/**
 * @typedef {object} Card - Basic unit of information, also an "actor" in the programming system
 * @property {number} id Unique identifier
 * @property {Record<string, string>} fields Key-value properties on the card
 * @property {string} code Eventually: a markdown string containing code, but for now, just code
 */

/**
 * Global state: a single card
 * @type {Card}
 */
let theCard = {
  id: 100,
  fields: {},
  code: `
    h1 Hello, World!
    para [2 + 2]
    block {
        This is a paragraph of text, with one [b bold] word. Yes, this means there has to be some magic in text processing...
    }
    block -red "Beware!"
    block Wait, how do we distinguish a \{\} long string (text to put in a block) from a code block (with commands whose output goes in a block?)
  `,
};

const state = document.createElement("pre");
const display = document.createElement("blockquote");

function render() {
  state.textContent = JSON.stringify(theCard, null, 2);
  display.innerHTML = "<em>Rendering not implemented</em>";
}

render();
document.body.append(state, display);