openink 0.1.0

package/src/runtime/chart.js

@@ -0,0 +1,85 @@
+import rough from "roughjs/bundled/rough.esm.js";
+
+const SAMPLE = { line: [3, 5, 4, 7, 6, 9, 8], area: [3, 5, 4, 7, 6, 9, 8], bar: [5, 8, 3, 9, 6, 7], pie: [40, 30, 20, 10], donut: [40, 30, 20, 10] };
+
+/**
+ * <oi-chart kind="line|area|bar|pie|donut" h="200" values="3,5,4" label="Visitors">
+ * A hand-drawn chart with made-up data: it shows *where* a chart goes and what kind it is.
+ */
+class Chart extends HTMLElement {
+  connectedCallback() {
+    const h = +this.getAttribute("h") || 200;
+    const kind = this.getAttribute("kind") || "line";
+    const values = (this.getAttribute("values") || "").split(",").map((s) => s.trim()).filter(Boolean).map(Number).filter(Number.isFinite);
+    const data = values.length ? values : SAMPLE[kind] || SAMPLE.line;
+    this.style.cssText += `display:block;position:relative;height:${h}px`;
+
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.style.cssText = "position:absolute;inset:0;width:100%;height:100%";
+    this.prepend(svg);
+
+    const draw = () => {
+      const w = this.clientWidth;
+      if (!w) return;
+      svg.replaceChildren();
+      svg.setAttribute("viewBox", `0 0 ${w} ${h}`);
+      const css = getComputedStyle(this);
+      const ink = css.getPropertyValue("--oi-stroke").trim() || "#8a8a85";
+      const tone = css.getPropertyValue("--oi-chart").trim() || css.getPropertyValue("--accent").trim() || "#c2410c";
+      const rc = rough.svg(svg);
+      const line = { roughness: 1.4, stroke: ink, seed: 5 };
+      const max = Math.max(...data, 1);
+      const pad = { l: 34, r: 12, t: 14, b: 26 };
+      const cw = w - pad.l - pad.r;
+      const ch = h - pad.t - pad.b;
+
+      if (kind === "pie" || kind === "donut") {
+        const r = Math.min(w, h) / 2 - 8;
+        const cx = w / 2, cy = h / 2;
+        const total = data.reduce((a, b) => a + b, 0) || 1;
+        let a0 = -Math.PI / 2;
+        const shades = [tone, ink, "#cfcfc8", "#e7e5dc", "#b8b5a8"];
+        data.forEach((v, i) => {
+          const span = (Math.max(v, 0) / total) * Math.PI * 2;
+          const fill = { ...line, fill: shades[i % shades.length], fillStyle: i === 0 ? "solid" : "hachure", hachureGap: 6, fillWeight: 1 };
+          // RoughJS never returns for a zero-length arc, so skip empty slices and draw a whole circle as a circle
+          if (span >= Math.PI * 2 - 0.001) svg.appendChild(rc.circle(cx, cy, r * 2, fill));
+          else if (span > 0.01) svg.appendChild(rc.arc(cx, cy, r * 2, r * 2, a0, a0 + span, true, fill));
+          a0 += span;
+        });
+        if (kind === "donut") svg.appendChild(rc.circle(cx, cy, r, { ...line, fill: css.getPropertyValue("--paper").trim() || "#fdfcf8", fillStyle: "solid" }));
+        return;
+      }
+
+      // axes
+      svg.appendChild(rc.line(pad.l, pad.t, pad.l, pad.t + ch, line));
+      svg.appendChild(rc.line(pad.l, pad.t + ch, pad.l + cw, pad.t + ch, line));
+      for (let i = 1; i <= 3; i++) svg.appendChild(rc.line(pad.l, pad.t + (ch * i) / 4, pad.l + cw, pad.t + (ch * i) / 4, { ...line, stroke: "#d8d6cc", roughness: 0.8 }));
+
+      if (kind === "bar") {
+        const bw = cw / data.length;
+        data.forEach((v, i) => {
+          const bh = (v / max) * ch;
+          svg.appendChild(rc.rectangle(pad.l + i * bw + bw * 0.18, pad.t + ch - bh, bw * 0.64, bh, { ...line, stroke: tone, fill: tone, fillStyle: "hachure", hachureGap: 5, fillWeight: 1.2 }));
+        });
+      } else {
+        const pts = data.map((v, i) => [pad.l + (i / Math.max(data.length - 1, 1)) * cw, pad.t + ch - (v / max) * ch]);
+        if (kind === "area") svg.appendChild(rc.polygon([[pts[0][0], pad.t + ch], ...pts, [pts.at(-1)[0], pad.t + ch]], { roughness: 1, stroke: "none", fill: tone, fillStyle: "hachure", hachureGap: 7, fillWeight: 0.8, seed: 2 }));
+        svg.appendChild(rc.linearPath(pts, { ...line, stroke: tone, strokeWidth: 2.2 }));
+        pts.forEach(([x, y]) => svg.appendChild(rc.circle(x, y, 6, { ...line, stroke: tone, fill: tone, fillStyle: "solid" })));
+      }
+    };
+
+    draw();
+    new ResizeObserver(draw).observe(this);
+    const label = this.getAttribute("label");
+    if (label) {
+      const span = document.createElement("span");
+      span.className = "ph-label ph-corner";
+      span.textContent = label;
+      this.appendChild(span);
+    }
+  }
+}
+
+if (!customElements.get("oi-chart")) customElements.define("oi-chart", Chart);

package/src/runtime/dom.js

@@ -0,0 +1,21 @@
+export const $$ = (selector, root = document) => [...root.querySelectorAll(selector)];
+
+export const config = window.OPENINK || { languages: [], first: "" };
+
+/**
+ * wired-elements only draw when their size changes, and they draw at 0x0 while hidden.
+ * Call this after anything becomes visible or is resized so they re-render.
+ */
+export function redraw() {
+  requestAnimationFrame(() =>
+    $$("*").forEach((el) => {
+      if (typeof el.wiredRender === "function" && el.offsetParent !== null) el.wiredRender();
+    })
+  );
+}
+
+let resizeTimer;
+window.addEventListener("resize", () => {
+  clearTimeout(resizeTimer);
+  resizeTimer = setTimeout(redraw, 150);
+});

package/src/runtime/i18n.js

@@ -0,0 +1,24 @@
+import { $$, config, redraw } from "./dom.js";
+
+const STORAGE_KEY = "openink_lang";
+
+/** Text lives in <span data-l="xx"> (shown by CSS). Attributes live in data-<attr>-<lang> and are swapped here. */
+export function setLang(lang) {
+  document.documentElement.lang = lang;
+  try { localStorage.setItem(STORAGE_KEY, lang); } catch { /* private mode */ }
+  $$("[data-lang]").forEach((b) => b.classList.toggle("on", b.dataset.lang === lang));
+  $$("*").forEach((el) => {
+    for (const a of el.attributes) {
+      const m = a.name.match(/^data-(.+)-([a-z]{2,3})$/i);
+      if (m && m[2] === lang && m[1] !== "lang") el.setAttribute(m[1], a.value);
+    }
+  });
+  redraw();
+}
+
+export function initI18n() {
+  if (!config.languages.length) return;
+  let saved = null;
+  try { saved = localStorage.getItem(STORAGE_KEY); } catch { /* private mode */ }
+  setLang(config.languages.includes(saved) ? saved : config.languages[0]);
+}

package/src/runtime/icon.js

@@ -0,0 +1,28 @@
+import rough from "roughjs/bundled/rough.esm.js";
+import { ICONS } from "../icons.js";
+
+/**
+ * <oi-icon name="heart" size="22" filled>
+ * Hand-drawn icon (RoughJS). Inherits the surrounding text colour.
+ */
+class Icon extends HTMLElement {
+  connectedCallback() {
+    const paths = ICONS[this.getAttribute("name")];
+    if (!paths) return;
+    const size = +this.getAttribute("size") || 22;
+    this.style.cssText += `display:inline-block;vertical-align:middle;width:${size}px;height:${size}px;line-height:0`;
+
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("viewBox", "0 0 24 24");
+    svg.setAttribute("width", size);
+    svg.setAttribute("height", size);
+    const rc = rough.svg(svg);
+    const filled = this.hasAttribute("filled");
+    for (const d of paths) {
+      svg.appendChild(rc.path(d, { roughness: 0.9, strokeWidth: 1.6, stroke: "currentColor", seed: 11, ...(filled ? { fill: "currentColor", fillStyle: "solid" } : {}) }));
+    }
+    this.replaceChildren(svg);
+  }
+}
+
+if (!customElements.get("oi-icon")) customElements.define("oi-icon", Icon);

package/src/runtime/index.js

@@ -0,0 +1,64 @@
+import "wired-elements";
+import "./placeholder.js";
+import "./icon.js";
+import "./chart.js";
+import { $$, redraw } from "./dom.js";
+import { go, toast, initNavigation } from "./navigation.js";
+import { setLang, initI18n } from "./i18n.js";
+
+function select(buttons, active) {
+  buttons.forEach((b) => {
+    b.classList.toggle("on", b === active);
+    b.setAttribute("elevation", b === active ? 3 : 1);
+  });
+}
+
+const closeModals = () => $$(".modal.on").forEach((m) => m.classList.remove("on"));
+
+document.addEventListener("click", (e) => {
+  const lang = e.target.closest("[data-lang]");
+  if (lang) return setLang(lang.dataset.lang);
+
+  // modals: [data-open="id"] opens <div data-modal="id">; [data-close] (button, X, backdrop) closes
+  if (e.target.closest("[data-close]")) closeModals();
+  const opener = e.target.closest("[data-open]");
+  if (opener) {
+    closeModals();
+    document.querySelector(`.modal[data-modal="${CSS.escape(opener.dataset.open)}"]`)?.classList.add("on");
+    redraw();
+  }
+
+  const chip = e.target.closest("[data-chips] .chip");
+  if (chip) {
+    select($$(".chip", chip.parentElement), chip);
+    toast("Results updated");
+  }
+
+  const tab = e.target.closest("[data-tabs] .tab");
+  if (tab) {
+    const root = tab.closest("[data-tabs]");
+    select($$(".tab", root), tab);
+    $$(".tab-panel", root).forEach((p) => p.classList.toggle("on", p.dataset.panel === tab.dataset.tab));
+    redraw();
+  }
+
+  const item = e.target.closest(".tabbar .tab-item");
+  if (item) select($$(".tab-item", item.parentElement), item);
+
+  const target = e.target.closest("[data-go]");
+  if (target) {
+    closeModals();
+    go(target.dataset.go);
+  }
+  const message = e.target.closest("[data-toast]");
+  if (message) toast(message.dataset.toast);
+});
+
+document.addEventListener("keydown", (e) => e.key === "Escape" && closeModals());
+// <details> content is hidden until opened, so wired-elements inside it have never been drawn
+document.addEventListener("toggle", (e) => e.target.tagName === "DETAILS" && redraw(), true);
+
+window.addEventListener("DOMContentLoaded", () => {
+  initI18n();
+  initNavigation();
+});

package/src/runtime/navigation.js

@@ -0,0 +1,27 @@
+import { $$, config, redraw } from "./dom.js";
+
+/** Show one screen (and the header nav set it asks for). */
+export function go(id) {
+  const el = document.getElementById(id);
+  if (!el || !el.classList.contains("screen")) return;
+  $$(".screen").forEach((s) => s.classList.remove("on"));
+  el.classList.add("on");
+  $$("header nav").forEach((n) => (n.hidden = n.dataset.nav !== el.dataset.nav));
+  document.title = el.dataset.title + " · " + document.title.split(" · ").pop();
+  history.replaceState(null, "", "#" + id);
+  window.scrollTo({ top: 0 });
+  redraw();
+}
+
+export function toast(message) {
+  const el = document.getElementById("toast");
+  el.textContent = message;
+  el.classList.add("show");
+  clearTimeout(toast.timer);
+  toast.timer = setTimeout(() => el.classList.remove("show"), 2200);
+}
+
+export function initNavigation() {
+  window.addEventListener("hashchange", () => go(location.hash.slice(1)));
+  go(location.hash.slice(1) || config.first);
+}

package/src/runtime/placeholder.js

@@ -0,0 +1,88 @@
+import rough from "roughjs/bundled/rough.esm.js";
+
+/**
+ * <oi-placeholder h="160" label="Photo" cross pin round play dots="4" upload>
+ * A hand-drawn box (RoughJS) used for images, maps, video, galleries, uploads.
+ * Colours come from CSS variables, so a `tone` on a parent block recolours it:
+ *   --oi-stroke (outline), --oi-fill (hatch fill), --accent (pin / play button)
+ */
+class Placeholder extends HTMLElement {
+  connectedCallback() {
+    const h = +this.getAttribute("h") || 120;
+    // A round placeholder (avatar) is square and must have a width of its own to sit in a flex row.
+    const width = this.hasAttribute("round") ? `width:${h}px;flex:none;` : "";
+    this.style.cssText += `display:block;position:relative;height:${h}px;${width}`;
+
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.style.cssText = "position:absolute;inset:0;width:100%;height:100%";
+    this.prepend(svg);
+
+    const draw = () => {
+      const w = this.clientWidth;
+      if (!w) return;
+      svg.replaceChildren();
+      svg.setAttribute("viewBox", `0 0 ${w} ${h}`);
+      const css = getComputedStyle(this);
+      const stroke = css.getPropertyValue("--oi-stroke").trim() || "#8a8a85";
+      const fill = css.getPropertyValue("--oi-fill").trim() || "#f3f1ea";
+      const accent = css.getPropertyValue("--accent").trim() || "#c2410c";
+      const paper = css.getPropertyValue("--paper").trim() || "#fdfcf8";
+      const rc = rough.svg(svg);
+      const ink = { roughness: 1.6, stroke, seed: 7 };
+      const soft = { roughness: 1.6, stroke: css.getPropertyValue("--oi-line").trim() || "#cfcfc8", seed: 3 };
+      const solid = { ...ink, stroke: accent, fill: accent, fillStyle: "solid" };
+
+      if (this.hasAttribute("round")) {
+        svg.appendChild(rc.circle(w / 2, h / 2, Math.min(w, h) - 6, { ...ink, fill, fillStyle: "solid" }));
+      } else {
+        const dashed = this.hasAttribute("upload") ? { strokeLineDash: [8, 6] } : {};
+        svg.appendChild(rc.rectangle(3, 3, w - 6, h - 6, { ...ink, ...dashed, fill, fillStyle: "hachure", hachureGap: 12, fillWeight: 0.6 }));
+        if (this.hasAttribute("cross")) {
+          svg.appendChild(rc.line(3, 3, w - 3, h - 3, soft));
+          svg.appendChild(rc.line(w - 3, 3, 3, h - 3, soft));
+        }
+      }
+      if (this.hasAttribute("pin")) {
+        const y = h * 0.38;
+        svg.appendChild(rc.circle(w / 2, y, 22, solid));
+        svg.appendChild(rc.line(w / 2, y + 10, w / 2, y + 24, { ...ink, stroke: accent, strokeWidth: 2 }));
+      }
+      if (this.hasAttribute("play")) {
+        const cy = h * 0.42;
+        svg.appendChild(rc.circle(w / 2, cy, Math.min(56, h * 0.4), { ...ink, stroke: accent, fill: paper, fillStyle: "solid", strokeWidth: 2 }));
+        svg.appendChild(rc.polygon([[w / 2 - 7, cy - 10], [w / 2 - 7, cy + 10], [w / 2 + 11, cy]], solid));
+      }
+      if (this.hasAttribute("upload")) {
+        const cy = h * 0.38;
+        svg.appendChild(rc.line(w / 2, cy + 14, w / 2, cy - 14, { ...ink, strokeWidth: 2.2 }));
+        svg.appendChild(rc.linearPath([[w / 2 - 11, cy - 3], [w / 2, cy - 15], [w / 2 + 11, cy - 3]], { ...ink, strokeWidth: 2.2 }));
+      }
+      const dots = +this.getAttribute("dots");
+      if (dots > 0) {
+        const y = h - 16;
+        for (let i = 0; i < dots; i++) {
+          const x = w / 2 + (i - (dots - 1) / 2) * 16;
+          svg.appendChild(rc.circle(x, y, 7, i === 0 ? { ...ink, stroke: accent, fill: accent, fillStyle: "solid" } : { ...ink, fill: paper, fillStyle: "solid" }));
+        }
+        for (const dir of [-1, 1]) {
+          const x = dir < 0 ? 22 : w - 22;
+          svg.appendChild(rc.circle(x, h / 2, 26, { ...ink, fill: paper, fillStyle: "solid" }));
+          svg.appendChild(rc.linearPath([[x - dir * 3, h / 2 - 6], [x + dir * 3, h / 2], [x - dir * 3, h / 2 + 6]], { ...ink, strokeWidth: 1.8 }));
+        }
+      }
+    };
+
+    draw();
+    new ResizeObserver(draw).observe(this);
+
+    const label = this.getAttribute("label");
+    if (label) {
+      const span = document.createElement("span");
+      span.className = "ph-label";
+      span.textContent = label;
+      this.appendChild(span);
+    }
+  }
+}
+
+if (!customElements.get("oi-placeholder")) customElements.define("oi-placeholder", Placeholder);

package/src/spec/docs.js

@@ -0,0 +1,65 @@
+import { blocks } from "../render/blocks/index.js";
+import { COMMON, ACTION } from "../render/blocks/shared.js";
+import { ICON_NAMES } from "../icons.js";
+
+const TYPE_LABEL = {
+  text: "text",
+  string: "string",
+  number: "number",
+  boolean: "boolean",
+  "text[]": "list of text",
+  "number[]": "list of numbers",
+  sections: "list of `{ label, children }`",
+  links: "list of `{ icon, label, go, toast, open }`",
+  rows: "list of rows",
+};
+
+/** Markdown reference for every block, generated from the registry (also printed by `openink blocks`). */
+export function blocksMarkdown() {
+  const groups = [...new Set(blocks.map((b) => b.group))];
+  const out = [
+    "# Block reference",
+    "",
+    "<!-- Generated from src/render/blocks by `npm run generate`. Do not edit by hand. -->",
+    "",
+    "Every entry in a screen's `blocks:` list is `{ type: <name>, ...props }`. Blocks marked **children** also take a `children:` list of blocks.",
+    "A `text` value is a string, a number, or a translation object such as `{ en: \"Hello\", de: \"Hallo\" }` (needs `languages:` in the spec).",
+    "",
+    "## Props every block accepts",
+    "",
+    "| Prop | Type | Description |",
+    "|---|---|---|",
+    ...Object.entries(COMMON).map(([k, p]) => `| \`${k}\` | ${p.enum ? p.enum.map((e) => `\`${e}\``).join(" \\| ") : p.type} | ${p.doc} |`),
+    "",
+    "## Actions",
+    "",
+    "Blocks that list `go`, `toast`, `open` or `close` in their props are clickable (`button`, `card`, `avatar`, `link`, `nextbar`, nav and tab-bar items) and accept:",
+    "",
+    "| Prop | Type | Description |",
+    "|---|---|---|",
+    ...Object.entries(ACTION).map(([k, p]) => `| \`${k}\` | ${p.type} | ${p.doc} |`),
+    "",
+    `## Icons`,
+    "",
+    "Used by `icon`, `button.icon`, nav items and `tabbar`:",
+    "",
+    ICON_NAMES.map((n) => `\`${n}\``).join(" · "),
+    "",
+  ];
+  for (const g of groups) {
+    out.push(`## ${g}`, "");
+    for (const b of blocks.filter((x) => x.group === g)) {
+      out.push(`### \`${b.name}\`${b.children ? " · children" : ""}`, "", b.summary, "");
+      const props = Object.entries(b.props);
+      if (props.length) {
+        out.push("| Prop | Type | Description |", "|---|---|---|");
+        for (const [k, p] of props) {
+          const type = p.enum ? p.enum.map((e) => `\`${e}\``).join(" \\| ") : TYPE_LABEL[p.type];
+          out.push(`| \`${k}\`${p.required ? " *" : ""} | ${type} | ${p.doc} |`);
+        }
+        out.push("", "\\* required", "");
+      }
+    }
+  }
+  return out.join("\n");
+}

package/src/spec/schema.js

@@ -0,0 +1,110 @@
+import { blocks } from "../render/blocks/index.js";
+import { COMMON, TONES } from "../render/blocks/shared.js";
+import { ICON_NAMES } from "../icons.js";
+import { THEME_PRESETS, COLOR_KEYS } from "../themes.js";
+
+const TEXT = { anyOf: [{ type: ["string", "number"] }, { type: "object", additionalProperties: { type: ["string", "number"] } }] };
+const ref = (name) => ({ $ref: `#/$defs/${name}` });
+
+const propSchema = (p) => {
+  const base = {
+    text: ref("text"),
+    string: p.enum ? { enum: p.enum } : { type: "string" },
+    number: { type: "number" },
+    boolean: { type: "boolean" },
+    "text[]": { type: "array", items: ref("text") },
+    "number[]": { type: "array", items: { type: "number" } },
+    sections: { type: "array", items: { type: "object", required: ["label"], properties: { label: ref("text"), children: { type: "array", items: ref("block") } }, additionalProperties: false } },
+    links: {
+      type: "array",
+      items: { type: "object", properties: { icon: { enum: ICON_NAMES }, label: ref("text"), go: { type: "string" }, toast: ref("text"), open: { type: "string" } }, additionalProperties: false },
+    },
+    rows: { type: "array", items: { anyOf: [{ type: "array", items: ref("cell") }, { type: "object", required: ["cells"], properties: { cells: { type: "array", items: ref("cell") }, go: { type: "string" } }, additionalProperties: false }] } },
+  }[p.type];
+  return { ...base, description: p.doc };
+};
+
+/** Properties of a global modal: everything the `modal` block has, minus `type`. */
+function modalProps() {
+  const modal = blocks.find((b) => b.name === "modal");
+  return {
+    ...Object.fromEntries(Object.entries({ ...modal.props, ...COMMON }).map(([k, p]) => [k, propSchema(p)])),
+    children: { type: "array", items: ref("block") },
+  };
+}
+
+/** JSON Schema for spec.yaml, generated from the block registry (gives editors autocomplete + validation). */
+export function buildSchema() {
+  return {
+    $schema: "https://json-schema.org/draft/2020-12/schema",
+    $id: "https://unpkg.com/openink/schema/spec.schema.json",
+    title: "openink spec",
+    type: "object",
+    required: ["name", "screens"],
+    additionalProperties: false,
+    patternProperties: { "^x-": { description: "Free-form: define YAML anchors here to reuse blocks." } },
+    properties: {
+      name: { type: "string", description: "Title shown in the header and browser tab." },
+      languages: { type: "array", items: { type: "string", pattern: "^[A-Za-z]{2,3}$" }, description: "Language codes. The first is the default." },
+      footer: { type: "string" },
+      theme: {
+        anyOf: [{ enum: THEME_PRESETS }, { type: "string", pattern: "\\.css$" }],
+        description: `Colour theme: a preset (${THEME_PRESETS.join(", ")}) or the path of your own .css file. Default: sketch.`,
+      },
+      colors: {
+        type: "object",
+        additionalProperties: false,
+        properties: Object.fromEntries(COLOR_KEYS.map((k) => [k, { type: "string", description: `CSS colour for the \`${k}\` design token.` }])),
+        description: "Override individual design tokens, on top of the theme.",
+      },
+      nav: {
+        description: "Header buttons: a list, or an object of named lists (screens choose one with `nav:`).",
+        anyOf: [{ type: "array", items: ref("navItem") }, { type: "object", additionalProperties: { type: "array", items: ref("navItem") } }],
+      },
+      modals: {
+        type: "array",
+        description: "Dialogs that any screen can open with `open: <id>`. Same properties as a `modal` block.",
+        items: { type: "object", required: ["id"], additionalProperties: false, properties: modalProps() },
+      },
+      screens: {
+        type: "array",
+        minItems: 1,
+        items: {
+          type: "object",
+          required: ["id", "blocks"],
+          additionalProperties: false,
+          properties: {
+            id: { type: "string", pattern: "^[A-Za-z][\\w-]*$", description: "Unique id, used by `go:` links." },
+            title: ref("text"),
+            nav: { type: "string", description: "Name of the nav set to show on this screen." },
+            note: { ...ref("text"), description: "Sticky-note annotation shown at the top of the screen." },
+            tone: { enum: TONES, description: "Tint the whole screen with a colour." },
+            width: { enum: ["narrow", "medium", "wide"], description: "Page width: narrow (~520px, phone-like), medium (~760px) or wide (default, full width)." },
+            blocks: { type: "array", items: ref("block") },
+          },
+        },
+      },
+    },
+    $defs: {
+      text: TEXT,
+      navItem: { type: "object", properties: { icon: { enum: ICON_NAMES }, label: ref("text"), go: { type: "string" }, toast: ref("text"), open: { type: "string" } }, additionalProperties: false },
+      cell: { anyOf: [{ type: ["string", "number"] }, { type: "object", additionalProperties: { type: ["string", "number"] } }, ref("block")] },
+      block: {
+        anyOf: [
+          { type: "string", description: "Shorthand for a `text` block." },
+          ...blocks.map((b) => ({
+            type: "object",
+            description: b.summary,
+            required: ["type", ...Object.entries(b.props).filter(([, p]) => p.required).map(([k]) => k)],
+            additionalProperties: false,
+            properties: {
+              type: { const: b.name },
+              ...Object.fromEntries(Object.entries({ ...b.props, ...COMMON }).map(([k, p]) => [k, propSchema(p)])),
+              ...(b.children ? { children: { type: "array", items: ref("block") } } : {}),
+            },
+          })),
+        ],
+      },
+    },
+  };
+}