@wildwinter/app-shell 0.48.0 → 0.49.0

package/dist/property-list.d.cts

@@ -1 +1 @@
-export { D as DefaultControlOptions, P as PROPERTY_TYPES, b as PropertyDeclLike, c as PropertyListHandle, d as PropertyListOptions, e as PropertyListType, i as defaultControl, m as mountPropertyList } from './property-list-BgZlkcbz.cjs';
+export { D as DefaultControlOptions, P as PROPERTY_TYPES, b as PropertyDeclLike, c as PropertyListHandle, d as PropertyListOptions, e as PropertyListType, i as defaultControl, m as mountPropertyList } from './property-list-BPGU3rhF.cjs';

package/dist/property-list.d.ts

@@ -1 +1 @@
-export { D as DefaultControlOptions, P as PROPERTY_TYPES, b as PropertyDeclLike, c as PropertyListHandle, d as PropertyListOptions, e as PropertyListType, i as defaultControl, m as mountPropertyList } from './property-list-BgZlkcbz.js';
+export { D as DefaultControlOptions, P as PROPERTY_TYPES, b as PropertyDeclLike, c as PropertyListHandle, d as PropertyListOptions, e as PropertyListType, i as defaultControl, m as mountPropertyList } from './property-list-BPGU3rhF.js';

package/dist/property-list.js

@@ -1,4 +1,5 @@
-export { PROPERTY_TYPES, defaultControl, mountPropertyList } from './chunk-CRUILFAT.js';
+export { PROPERTY_TYPES, defaultControl, mountPropertyList } from './chunk-FGAPO4N5.js';
+import './chunk-EAE7UWQ5.js';
 import './chunk-W4WC4FO5.js';
 //# sourceMappingURL=property-list.js.map
 //# sourceMappingURL=property-list.js.map

package/dist/value-control.cjs

@@ -0,0 +1,232 @@
+'use strict';
+
+// src/tooltip.ts
+function renderTip(host, text) {
+  host.textContent = "";
+  const re = /\u0002([^\u0003]*)\u0003/g;
+  let last = 0;
+  let m;
+  while ((m = re.exec(text)) !== null) {
+    if (m.index > last) host.append(text.slice(last, m.index));
+    const strong = document.createElement("strong");
+    strong.textContent = m[1] ?? "";
+    host.append(strong);
+    last = m.index + m[0].length;
+  }
+  if (last < text.length) host.append(text.slice(last));
+}
+var inited = false;
+var checked = false;
+var suppressed;
+var SHOW_DELAY = 350;
+var EDGE = 6;
+var GAP = 7;
+var tip = null;
+var timer = 0;
+var active = null;
+function ensureEl() {
+  if (tip) return tip;
+  const el2 = document.createElement("div");
+  el2.className = "tooltip";
+  el2.setAttribute("role", "tooltip");
+  el2.hidden = true;
+  document.body.appendChild(el2);
+  tip = el2;
+  return el2;
+}
+var rectOf = (anchor) => anchor instanceof HTMLElement ? anchor.getBoundingClientRect() : anchor;
+function place(anchor) {
+  const t = ensureEl();
+  const r = rectOf(anchor);
+  const tr = t.getBoundingClientRect();
+  let top = r.top - tr.height - GAP;
+  if (top < EDGE) top = r.top + r.height + GAP;
+  let left = r.left + r.width / 2 - tr.width / 2;
+  left = Math.max(EDGE, Math.min(left, window.innerWidth - tr.width - EDGE));
+  t.style.left = `${Math.round(left)}px`;
+  t.style.top = `${Math.round(top)}px`;
+}
+function show(anchor) {
+  const text = anchor.dataset["tip"];
+  if (!text) return;
+  paint(anchor, text);
+}
+function paint(anchor, text) {
+  if (suppressed?.()) return;
+  const t = ensureEl();
+  const host = (anchor instanceof HTMLElement ? anchor.closest("dialog[open]") : null) ?? document.body;
+  if (t.parentElement !== host) host.appendChild(t);
+  active = anchor instanceof HTMLElement ? anchor : null;
+  renderTip(t, text);
+  t.hidden = false;
+  t.classList.remove("show");
+  void t.offsetWidth;
+  place(anchor);
+  t.classList.add("show");
+}
+function hide() {
+  if (timer) {
+    window.clearTimeout(timer);
+    timer = 0;
+  }
+  active = null;
+  if (tip) {
+    tip.hidden = true;
+    tip.classList.remove("show");
+  }
+}
+function schedule(anchor) {
+  if (anchor === active) return;
+  if (timer) window.clearTimeout(timer);
+  timer = window.setTimeout(() => show(anchor), SHOW_DELAY);
+}
+function ensureTooltipHost() {
+  initTooltips();
+}
+function checkTooltipHost() {
+  if (checked) return;
+  checked = true;
+  setTimeout(() => {
+    if (inited || typeof document === "undefined") return;
+    if (document.querySelector("[data-tip]")) {
+      console.warn("app-shell: something set `data-tip` but no tooltip host is mounted, so those rollovers will not draw. Call initTooltips() once per window.");
+    }
+  }, 0);
+}
+var tipAncestor = (n) => n instanceof Element ? n.closest("[data-tip]") : null;
+function initTooltips(opts = {}) {
+  if (opts.suppressed !== void 0) suppressed = opts.suppressed;
+  if (inited) return;
+  inited = true;
+  document.addEventListener("pointerover", (e) => {
+    const el2 = tipAncestor(e.target);
+    if (el2) schedule(el2);
+  });
+  document.addEventListener("pointerout", (e) => {
+    const el2 = tipAncestor(e.target);
+    if (!el2) return;
+    const to = e.relatedTarget;
+    if (to instanceof Node && el2.contains(to)) return;
+    hide();
+  });
+  document.addEventListener("focusin", (e) => {
+    const el2 = tipAncestor(e.target);
+    if (el2) schedule(el2);
+  });
+  document.addEventListener("focusout", () => hide());
+  document.addEventListener("pointerdown", () => hide(), true);
+  document.addEventListener("scroll", () => {
+    if (active) hide();
+  }, true);
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") hide();
+  });
+  window.addEventListener("blur", () => hide());
+}
+
+// src/dom.ts
+function el(tag, classNameOrProps, ...children) {
+  const node = document.createElement(tag);
+  const props = typeof classNameOrProps === "string" ? { className: classNameOrProps } : classNameOrProps ?? {};
+  if (props.className) node.className = props.className;
+  if (props.text !== void 0 && props.text !== null) node.textContent = props.text;
+  if (props.title !== void 0) node.title = props.title;
+  if (props.tip !== void 0) {
+    node.dataset["tip"] = props.tip;
+    node.setAttribute("aria-label", props.tip);
+    ensureTooltipHost();
+  }
+  if (props.onClick) node.addEventListener("click", props.onClick);
+  for (const child of children) {
+    if (child === null || child === void 0) continue;
+    node.append(child);
+  }
+  checkTooltipHost();
+  return node;
+}
+
+// src/value-control.ts
+function fallbackText(decl) {
+  const d = decl.default;
+  if (d !== void 0 && d !== null) {
+    if (typeof d === "boolean") return d ? "True" : "False";
+    if (Array.isArray(d)) return d.length === 0 ? "none" : d.join(", ");
+    return d === "" ? "none" : String(d);
+  }
+  switch (decl.type) {
+    case "boolean":
+      return "False";
+    case "number":
+      return "0";
+    case "enum":
+      return decl.values?.[0] ?? "none";
+    case "quality":
+      return decl.stages?.[0] ?? "first stage";
+    case "flags":
+      return "none";
+    default:
+      return "empty";
+  }
+}
+var defaultLabel = (decl) => `default (${fallbackText(decl)})`;
+function stageGateNote(gates) {
+  if (gates <= 0) return "";
+  return gates === 1 ? "1 gate compares against this ladder, and it now reads the new order." : `${gates} gates compare against this ladder, and each now reads the new order.`;
+}
+function rungStrip(opts) {
+  const make = opts.doc === void 0 ? el : (tag, props) => {
+    const node = opts.doc.createElement(tag);
+    node.className = props.className;
+    if (props.text !== void 0) node.textContent = props.text;
+    if (props.tip !== void 0) {
+      node.title = props.tip;
+      node.setAttribute("aria-label", props.tip);
+    }
+    if (props.onClick) node.addEventListener("click", props.onClick);
+    if (tag === "button") node.type = "button";
+    return node;
+  };
+  const strip = make("span", { className: "seg shell-rungs" });
+  const decl = opts.decl ?? { type: "quality", stages: opts.stages };
+  const unset = opts.value === void 0;
+  const fallback = typeof decl.default === "string" && opts.stages.includes(decl.default) ? decl.default : opts.stages[0];
+  const readOnly = opts.onPick === void 0;
+  if (opts.onClear) {
+    strip.append(make("button", {
+      className: `seg-opt shell-rung shell-rung-default${unset ? " on" : ""}`,
+      text: defaultLabel(decl),
+      tip: unset ? "Not set here: the declared default holds" : "Clear the value, back to the default",
+      onClick: () => {
+        if (!unset) opts.onClear();
+      }
+    }));
+  }
+  for (const stage of opts.stages) {
+    const current = opts.value === stage;
+    const falls = unset && stage === fallback;
+    const rung = make(readOnly ? "span" : "button", {
+      className: `seg-opt shell-rung${current ? " on" : ""}${falls ? " fallback" : ""}`,
+      text: stage,
+      tip: current ? "The current stage" : falls ? "The stage it falls back to" : readOnly ? stage : opts.pickTip?.(stage) ?? `Set to "${stage}"`,
+      ...readOnly ? {} : { onClick: () => {
+        if (!current) opts.onPick(stage);
+      } }
+    });
+    strip.append(rung);
+  }
+  if (!unset && !opts.stages.includes(opts.value)) {
+    strip.append(make("span", {
+      className: "seg-opt shell-rung stray on",
+      text: opts.value,
+      tip: `"${opts.value}" is not one of the stages: pick the one it belongs at now`
+    }));
+  }
+  return strip;
+}
+
+exports.defaultLabel = defaultLabel;
+exports.fallbackText = fallbackText;
+exports.rungStrip = rungStrip;
+exports.stageGateNote = stageGateNote;
+//# sourceMappingURL=value-control.cjs.map
+//# sourceMappingURL=value-control.cjs.map

package/dist/value-control.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tooltip.ts","../src/dom.ts","../src/value-control.ts"],"names":["el"],"mappings":"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","file":"value-control.cjs","sourcesContent":["// ---------------------------------------------------------------------------\n// A single themed tooltip the family controls, replacing native `title`\n// rollovers: those are unstyled OS chrome and appear on the platform's slow\n// (~1s) delay, which is exactly the seam design-language section 4 (\"coherent\n// to the edges\") says not to leave showing.\n//\n// ONE floating bubble, document-DELEGATED: any element carrying a `data-tip`\n// attribute gets it, so a caller just sets `data-tip=\"...\"` anywhere and wires\n// nothing. The bubble anchors above the element (flipping below near the top\n// edge), uses our own snappy delay and the shared panel-enter motion.\n// `initTooltips()` is idempotent, so it is safe to call from more than one\n// place in an app that has several entry points.\n//\n// Lifted from Patterpad's patterpad-surface/web/tooltip.ts, which proved it,\n// with the one app-specific rule (suppressed in Writing View) generalised into\n// the `suppressed` option so the shell knows nothing about either app's modes.\n// ---------------------------------------------------------------------------\n\n// Bold markers: a producer wraps a span in these PRIVATE control chars (U+0002 STX / U+0003 ETX,\n// never present in user text) and the renderer turns it into a <strong>. Lets a data-tip bold part\n// of itself (a name, a \"VO:\" prefix) without any HTML, and each segment is still set via\n// textContent, so there is no injection risk from user content.\nconst B_OPEN = \"\\u0002\";\nconst B_CLOSE = \"\\u0003\";\n\n/** Wrap `s` so it renders bold inside a tooltip (see the marker note above). */\nexport function tipBold(s: string): string { return `${B_OPEN}${s}${B_CLOSE}`; }\n\n/** Render `text` into `host`, turning `\\u0002…\\u0003`-marked spans into <strong>; all set as text (safe). */\nfunction renderTip(host: HTMLElement, text: string): void {\n  host.textContent = \"\";\n  const re = /\\u0002([^\\u0003]*)\\u0003/g;\n  let last = 0;\n  let m: RegExpExecArray | null;\n  while ((m = re.exec(text)) !== null) {\n    if (m.index > last) host.append(text.slice(last, m.index));\n    const strong = document.createElement(\"strong\");\n    strong.textContent = m[1] ?? \"\";\n    host.append(strong);\n    last = m.index + m[0].length;\n  }\n  if (last < text.length) host.append(text.slice(last));\n}\n\nexport interface TooltipOptions {\n  /** Called before every show: return true to keep the bubble down. For a mode\n   *  that wants no chrome at all (Patterpad's Writing View). */\n  suppressed?: () => boolean;\n}\n\nlet inited = false;\nlet checked = false; // the one-shot no-host warning below has been scheduled\nlet suppressed: (() => boolean) | undefined;\nconst SHOW_DELAY = 350; // ms - snappier than the OS title delay, slow enough not to flicker on pass-through\nconst EDGE = 6;         // viewport inset so the bubble never touches the window edge\nconst GAP = 7;          // px between the anchor and the bubble\n\nlet tip: HTMLDivElement | null = null;\nlet timer = 0;\nlet active: HTMLElement | null = null;\n/** The subject of a rect-anchored tip (see `tipAt`), when there is one. */\nlet activeKey: string | null = null;\n\nfunction ensureEl(): HTMLDivElement {\n  if (tip) return tip;\n  const el = document.createElement(\"div\");\n  el.className = \"tooltip\";\n  el.setAttribute(\"role\", \"tooltip\");\n  el.hidden = true;\n  document.body.appendChild(el);\n  tip = el;\n  return el;\n}\n\n/** A rectangle in VIEWPORT coordinates, for anchoring a tip to something that is\n *  not a DOM element: a shape on a canvas, a run of text inside one. */\nexport interface TipRect { left: number; top: number; width: number; height: number }\n\nconst rectOf = (anchor: HTMLElement | TipRect): TipRect =>\n  (anchor instanceof HTMLElement ? anchor.getBoundingClientRect() : anchor);\n\n/** Anchor the (already-visible, so measurable) bubble above the anchor, flipping below near the top. */\nfunction place(anchor: HTMLElement | TipRect): void {\n  const t = ensureEl();\n  const r = rectOf(anchor);\n  const tr = t.getBoundingClientRect();\n  let top = r.top - tr.height - GAP;\n  if (top < EDGE) top = r.top + r.height + GAP; // not enough room above -> below\n  let left = r.left + r.width / 2 - tr.width / 2;\n  left = Math.max(EDGE, Math.min(left, window.innerWidth - tr.width - EDGE));\n  t.style.left = `${Math.round(left)}px`;\n  t.style.top = `${Math.round(top)}px`;\n}\n\nfunction show(anchor: HTMLElement): void {\n  const text = anchor.dataset[\"tip\"];\n  if (!text) return;\n  paint(anchor, text);\n}\n\n/** Fill, place and reveal the bubble. The one path: both the delegated\n *  `data-tip` route and `tipAt` end up here, so a canvas tip and a button tip\n *  are the same bubble with the same look and the same motion. */\nfunction paint(anchor: HTMLElement | TipRect, text: string): void {\n  if (suppressed?.()) return;\n  const t = ensureEl();\n  // A modal <dialog> (settings, a confirm) renders in the browser TOP LAYER, above every normal-flow\n  // element whatever its z-index. If the anchor is inside one, move the bubble into that dialog so it\n  // shares the top layer; otherwise keep it on <body>. Re-parenting per show also moves it back out\n  // once the modal closes.\n  const host: HTMLElement = (anchor instanceof HTMLElement ? anchor.closest<HTMLElement>(\"dialog[open]\") : null)\n    ?? document.body;\n  if (t.parentElement !== host) host.appendChild(t);\n  active = anchor instanceof HTMLElement ? anchor : null;\n  renderTip(t, text);\n  t.hidden = false;\n  t.classList.remove(\"show\"); void t.offsetWidth; // restart the enter animation\n  place(anchor);                                  // measure + position now it has content + is visible\n  t.classList.add(\"show\");\n}\n\nfunction hide(): void {\n  if (timer) { window.clearTimeout(timer); timer = 0; }\n  active = null;\n  activeKey = null;\n  if (tip) { tip.hidden = true; tip.classList.remove(\"show\"); }\n}\n\nfunction schedule(anchor: HTMLElement): void {\n  if (anchor === active) return;\n  if (timer) window.clearTimeout(timer);\n  timer = window.setTimeout(() => show(anchor), SHOW_DELAY);\n}\n\n/**\n * Show a tip for something that has no DOM node of its own: a card on a canvas,\n * a zone, a pin. The caller says WHERE (a viewport rectangle) and WHAT, and\n * identifies the subject with `key`.\n *\n * The key is what makes this usable from a canvas. Re-calling with the same key\n * re-places the bubble WITHOUT restarting the delay, so a tip can follow its\n * shape while the camera moves; calling with a different key starts the wait\n * again, so sweeping the pointer across a dense board does not strobe.\n *\n * The bubble is ordinary DOM, so it holds its size whatever the canvas is\n * zoomed to. That is the point of it: the label it stands in for is the one\n * thing on a canvas that must not shrink with everything else.\n */\nexport function tipAt(key: string, rect: TipRect, text: string): void {\n  if (key === activeKey) {\n    // Already up for this subject: move it, do not re-animate it.\n    if (tip && !tip.hidden) { renderTip(tip, text); place(rect); }\n    return;\n  }\n  // A different subject: down first, then wait again. Leaving the old bubble up\n  // during the wait would put one card's name over another card, which is worse\n  // than no name at all - and it matches the delegated route, where leaving an\n  // element hides the tip before the next one is scheduled.\n  hide();\n  activeKey = key;\n  timer = window.setTimeout(() => { timer = 0; paint(rect, text); }, SHOW_DELAY);\n}\n\n/** Take any tip down: the pointer has left, or a gesture has started. */\nexport function hideTip(): void { hide(); }\n\n/**\n * Mount the renderer because something is about to speak the grammar.\n *\n * The themed tooltip is not a feature a host turns on; it is the renderer for a grammar the shell's own\n * components already speak, and `data-tip` with nothing listening draws NOTHING - not the themed\n * bubble, not the platform one. That silence cost Patterpad two releases of a pin with no tooltip, and\n * cost it again when a `title` was converted to `data-tip` in a window that had never mounted this.\n *\n * So `el` calls this whenever it sets a tip. Mounting a delegated listener is the same class of act as\n * `confirmDialog` appending to `document.body`, which this package has always done.\n */\nexport function ensureTooltipHost(): void { initTooltips(); }\n\n/**\n * One deferred check that an app writing `data-tip` ITSELF has a host, warning if not.\n *\n * `ensureTooltipHost` covers anything built through `el`. It cannot cover a `data-tip` written straight\n * into markup or set by hand, which is the case that leaves a whole window of dead tips with no shell\n * component involved - so that one gets a warning rather than silence. Scheduled once, after the\n * current task, so it sees a rendered document rather than an empty one.\n */\nexport function checkTooltipHost(): void {\n  if (checked) return;\n  checked = true;\n  setTimeout(() => {\n    if (inited || typeof document === \"undefined\") return;\n    if (document.querySelector(\"[data-tip]\")) {\n      console.warn(\"app-shell: something set `data-tip` but no tooltip host is mounted, so those rollovers will not draw. Call initTooltips() once per window.\");\n    }\n  }, 0);\n}\n\nconst tipAncestor = (n: EventTarget | null): HTMLElement | null =>\n  (n instanceof Element ? n.closest<HTMLElement>(\"[data-tip]\") : null);\n\n/**\n * Wire the one delegated controller. Mounting happens once; OPTIONS do not.\n *\n * An explicit call is always authoritative about its options, even after something else has already\n * mounted the listener. That ordering is not hypothetical, and Storyletter caught it before it shipped:\n * once components self-mount (see `ensureTooltipHost`), a host's own\n * `initTooltips({ suppressed })` could land second and be dropped by an early return, silently taking\n * a rule like \"no tooltips in Writing View\" with it. Nothing would fail and nothing would show.\n *\n * Components therefore call this with NO arguments: they mount the renderer without claiming the\n * options, and the host keeps the last word on behaviour.\n */\nexport function initTooltips(opts: TooltipOptions = {}): void {\n  if (opts.suppressed !== undefined) suppressed = opts.suppressed; // an explicit call always wins\n  if (inited) return;\n  inited = true;\n\n  document.addEventListener(\"pointerover\", (e) => {\n    const el = tipAncestor(e.target);\n    if (el) schedule(el);\n  });\n  document.addEventListener(\"pointerout\", (e) => {\n    const el = tipAncestor(e.target);\n    if (!el) return;\n    const to = (e as PointerEvent).relatedTarget;\n    if (to instanceof Node && el.contains(to)) return; // still inside the same anchor\n    hide();\n  });\n  // Keyboard parity: reveal on focus, dismiss on blur.\n  document.addEventListener(\"focusin\", (e) => { const el = tipAncestor(e.target); if (el) schedule(el); });\n  document.addEventListener(\"focusout\", () => hide());\n  // It's ANCHORED (not cursor-following), so anything that moves the layout or context dismisses it.\n  document.addEventListener(\"pointerdown\", () => hide(), true);\n  document.addEventListener(\"scroll\", () => { if (active) hide(); }, true);\n  document.addEventListener(\"keydown\", (e) => { if (e.key === \"Escape\") hide(); });\n  window.addEventListener(\"blur\", () => hide());\n}\n","// ---------------------------------------------------------------------------\n// `el`: the tiny tag-typed element factory both apps build their imperative,\n// idempotent views with.\n//\n// A SUPERSET of the two apps' prior signatures, so neither rewrites call sites:\n//   - Patterpad:       el(tag, cls?, text?)                       (positional)\n//   - Storylet Studio: el(tag, { className, text, ... }, ...kids) (options bag)\n// A string second argument is the className; an object is the props bag; string\n// children become text nodes. So `el(\"div\", \"c\", \"t\")` and\n// `el(\"div\", { className: \"c\" }, \"t\")` produce identical DOM.\n// ---------------------------------------------------------------------------\n\nimport { ensureTooltipHost, checkTooltipHost } from \"./tooltip.js\";\nimport { iconNode, iconNameOfGlyph, isIconName, type IconName } from \"./icons.js\";\n\nexport type Child = Node | string | null | undefined;\n\nexport interface ElProps {\n  className?: string;\n  text?: string;\n  /** A NATIVE rollover. Prefer `tip`: `title` is OS chrome on the platform's own\n   *  slow delay, which is the seam the themed tooltip exists to close. */\n  title?: string;\n  /** A themed rollover (`data-tip`, picked up by the delegated controller that\n   *  `initTooltips()` wires). Also the accessible name, since the elements that\n   *  want one are usually icon buttons with no text of their own. */\n  tip?: string;\n  onClick?: (event: MouseEvent) => void;\n}\n\nexport function el<K extends keyof HTMLElementTagNameMap>(\n  tag: K,\n  classNameOrProps?: string | ElProps,\n  ...children: Child[]\n): HTMLElementTagNameMap[K] {\n  const node = document.createElement(tag);\n  const props: ElProps = typeof classNameOrProps === \"string\"\n    ? { className: classNameOrProps }\n    : classNameOrProps ?? {};\n  if (props.className) node.className = props.className;\n  if (props.text !== undefined && props.text !== null) node.textContent = props.text;\n  if (props.title !== undefined) node.title = props.title;\n  if (props.tip !== undefined) {\n    node.dataset[\"tip\"] = props.tip;\n    node.setAttribute(\"aria-label\", props.tip);\n    // Setting a tip mounts the renderer. Without this, `data-tip` draws nothing at all in a window whose\n    // host never called `initTooltips()`, which is a silent failure rather than a degraded one. No\n    // options passed: the host stays authoritative about behaviour (see tooltip.ts).\n    ensureTooltipHost();\n  }\n  if (props.onClick) node.addEventListener(\"click\", props.onClick as EventListener);\n  for (const child of children) {\n    if (child === null || child === undefined) continue;\n    node.append(child);\n  }\n  checkTooltipHost(); // one-shot: warns if the APP wrote data-tip and nothing mounted a host\n  return node;\n}\n\n/** A small square icon button (the move/delete controls list editors share).\n *  Its rollover is the THEMED one (`data-tip`), so an app that has called\n *  `initTooltips()` gets our bubble rather than the platform's.\n *\n *  `name` is a word from the vocabulary (\"up\", \"close\"), drawn at 14px. A\n *  typed glyph from the deprecated `icon` table (\"↑\", \"✕\") is accepted for\n *  now and drawn as the word it stood for, so an app that has not moved its\n *  call sites yet still gets the drawn set; any other string is set as text,\n *  which is the old behaviour and on its way out. */\nexport function iconBtn(name: IconName | (string & {}), title: string, onClick: () => void, disabled = false, danger = false): HTMLButtonElement {\n  const b = el(\"button\", `shell-icon${danger ? \" danger\" : \"\"}`);\n  b.type = \"button\"; b.dataset[\"tip\"] = title; b.setAttribute(\"aria-label\", title);\n  const word = isIconName(name) ? name : iconNameOfGlyph(name);\n  if (word) b.append(iconNode(word)); else b.textContent = name;\n  b.disabled = disabled;\n  b.addEventListener(\"click\", onClick);\n  return b;\n}\n\n/** The sentence under a settings row: plain text, or nodes when it carries\n *  markup (a `code` for a file name, a `b` for an option's name). */\nexport type FieldHint = string | Node | Array<string | Node>;\n\n/**\n * A captioned field, the family's settings row (the 2026-10 review, ruling C):\n * the caption on the left and the control inline beside it,\n * `<label class=\"shell-labelled\"><span class=\"shell-fieldcap\">…</span>control</label>`.\n *\n * The label is pointed at the field it captions, EXPLICITLY, and never at a button. A `<label>` with no\n * `for` forwards a click to its first labelable descendant, and buttons are labelable - so a caption\n * wrapped around a control containing buttons (`tagChips`, whose every chip carries a remove button)\n * turns every click on the row's dead space into a press of the FIRST button in it. That shipped:\n * patterkit/patter#44, where clicking a Game Data list value anywhere but its ✕ deleted the first value\n * in the list. Reported as \"clicking a value removes the wrong one\", which is not a wrong-index bug at\n * all - the click never reached the chip. The same rule makes a control GROUP safe to caption: a field\n * with its own Choose… or Import… button beside it (`.shell-inline`) captions the field, and the button\n * stays a button.\n *\n * When the control holds no labelable field (a chips editor with the add input removed, say), this is a\n * plain `<div>`: no caption behaviour is better than a caption that presses something.\n *\n * With a `hint`, the row and the sentence under it come back together in a `.shell-field`, the hint as\n * the field's description (`aria-describedby`) rather than inside the label, where it would become part\n * of the field's NAME and be read out every time it takes focus. Without one, the row is exactly what it\n * always was.\n */\nexport function labelled(label: string, control: HTMLElement, hint?: FieldHint): HTMLElement {\n  const target = control.matches(\"input, select, textarea\")\n    ? control\n    : control.querySelector<HTMLElement>(\"input:not([type=button]):not([type=submit]), select, textarea\");\n  const w = el(target ? \"label\" : \"div\", \"shell-labelled\");\n  w.append(el(\"span\", \"shell-fieldcap\", label), control);\n  if (target) {\n    if (!target.id) target.id = uid();\n    (w as HTMLLabelElement).htmlFor = target.id;\n  }\n  if (hint === undefined) return w;\n  const note = el(\"p\", \"shell-fieldhint\");\n  note.append(...(Array.isArray(hint) ? hint : [hint]));\n  note.id = uid();\n  if (target) {\n    const by = target.getAttribute(\"aria-describedby\");\n    target.setAttribute(\"aria-describedby\", by ? `${by} ${note.id}` : note.id);\n  }\n  return el(\"div\", \"shell-field\", w, note);\n}\n\nconst uid = (): string => `shell-f-${Math.random().toString(36).slice(2, 9)}`;\n\nexport interface LabelledToggleOptions {\n  checked?: boolean;\n  /** The sentence under the row: what turning it on does. */\n  hint?: FieldHint;\n  /** An option that only means something while the row above it is set (Patterpad's \"Embed source\n   *  language for debug\" under an IDs-only build): indented under that row with a rule, so it reads as\n   *  belonging to it rather than as a peer. */\n  sub?: boolean;\n  disabled?: boolean;\n  /** Fired on every flip, with the new state. The input is handed back too, for a caller that reads it\n   *  on Save instead. */\n  onChange?: (checked: boolean) => void;\n}\n\n/**\n * The settings toggle, `labelled`'s partner (ruling C): the caption on the left, the checkbox beside it\n * where any other row has its control, and the optional hint under the row. One shape in both apps, so\n * a switch in one app's settings looks like a switch in the other's. Clicking the caption flips it, as\n * the label is the checkbox's.\n *\n * Returns the outermost row (to append, hide, or indent) and the input (to read or listen to).\n */\nexport function labelledToggle(label: string, opts: LabelledToggleOptions = {}): { row: HTMLElement; input: HTMLInputElement } {\n  const input = el(\"input\", \"shell-toggle-input\");\n  input.type = \"checkbox\";\n  input.checked = opts.checked ?? false;\n  input.disabled = opts.disabled ?? false;\n  const { onChange } = opts;\n  if (onChange) input.addEventListener(\"change\", () => onChange(input.checked));\n  const row = labelled(label, input, opts.hint);\n  // On the caption-and-box line itself, whether or not a hint wraps it.\n  (row.matches(\".shell-labelled\") ? row : row.querySelector(\".shell-labelled\"))?.classList.add(\"shell-toggle\");\n  if (opts.sub) row.classList.add(\"shell-suboption\");\n  return { row, input };\n}\n\n/** Swap item `i` with its neighbour `i + delta` IN PLACE (the up/down reorder list editors share);\n *  a no-op when the target is out of range. Returns whether anything moved. */\nexport function moveItem<T>(arr: T[], i: number, delta: number): boolean {\n  const j = i + delta;\n  if (j < 0 || j >= arr.length) return false;\n  [arr[i], arr[j]] = [arr[j]!, arr[i]!];\n  return true;\n}\n\n/** The icon size inside a chip's remove / move buttons: the chip is set at\n *  0.76rem, so its controls draw smaller than a toolbar button's 14px. */\nconst CHIP_ICON = 10;\n\n/** A tag-style editor for a string-list field (an enum's allowed values / flags): removable chips + an\n *  add input (Enter or \",\" commits; blank / duplicate ignored). Mutates `holder.values` in place (read\n *  back on save). `onChange` fires after any add / remove so callers can refresh a dependent control. */\nexport function tagChips(holder: { values?: string[] }, onChange?: () => void): HTMLElement {\n  const wrap = el(\"div\", \"shell-tags\");\n  const input = el(\"input\", \"shell-tag-input\");\n  // Sentence-cased like every other hint (the microcopy ruling, 2026-08-28):\n  // lowercase fragments read as adrift, and a placeholder is a hint speaking.\n  input.type = \"text\"; input.placeholder = \"Add value\"; input.spellcheck = false;\n  const makeChip = (v: string): HTMLElement => {\n    const chip = el(\"span\", \"shell-tag\", v);\n    const x = el(\"button\", \"shell-tag-x\", iconNode(\"close\", CHIP_ICON));\n    x.type = \"button\"; x.dataset[\"tip\"] = `Remove ${v}`; x.setAttribute(\"aria-label\", `Remove ${v}`);\n    x.addEventListener(\"click\", () => { holder.values = (holder.values ?? []).filter((o) => o !== v); chip.remove(); onChange?.(); });\n    chip.append(x);\n    return chip;\n  };\n  const commit = (): void => {\n    const v = input.value.trim();\n    if (v && !(holder.values ?? []).includes(v)) { (holder.values ??= []).push(v); wrap.insertBefore(makeChip(v), input); onChange?.(); }\n    input.value = \"\";\n  };\n  input.addEventListener(\"keydown\", (e) => { if (e.key === \"Enter\" || e.key === \",\") { e.preventDefault(); commit(); } });\n  input.addEventListener(\"blur\", commit);\n  for (const v of holder.values ?? []) wrap.append(makeChip(v));\n  wrap.append(input);\n  return wrap;\n}\n\n/** What `stageChips` tells its caller beyond \"something changed\". */\nexport interface StageChipsOptions {\n  /**\n   * A stage was renamed in place, `from` to `to`. Given, a rename calls this\n   * INSTEAD of `onChange`: values are stored by stage name, so whoever knows\n   * where those values live has to carry them, and doing it as one edit is\n   * theirs to arrange. Absent, a rename is an ordinary change.\n   */\n  onRename?: (from: string, to: string) => void;\n  /** The stages were reordered (after `onChange`): the one edit that changes\n   *  what every ordering gate means without changing any value. */\n  onReorder?: () => void;\n}\n\n/**\n * An ORDERED chips editor for a string-list field whose order means something\n * (a quality's stages: `advance()` walks them, so 2 comes after 1): numbered\n * chips, each with move-earlier / move-later / remove, plus an add input\n * (Enter or \",\" commits; blank / duplicate ignored). A stage's name renames\n * in place when clicked (Enter or blur commits, Escape cancels; blank, the same\n * name or another stage's is ignored). Mutates `holder.stages` in place;\n * `onChange` fires after any add / move / remove, and after a rename unless\n * `opts.onRename` takes it.\n *\n * Patterpad's, lifted (ui-review-2026-09, finding 3); Storyletter had been\n * faking it with `tagChips` over a `values` holder, which loses the order\n * controls. Same class family as `tagChips` (`.shell-tags`), so it is styled by\n * settings.css already.\n */\nexport function stageChips(holder: { stages?: string[] }, onChange?: () => void, opts: StageChipsOptions = {}): HTMLElement {\n  const wrap = el(\"div\", \"shell-tags shell-stages\");\n  const input = el(\"input\", \"shell-tag-input\");\n  input.type = \"text\"; input.placeholder = \"Add stage\"; input.spellcheck = false;\n  const control = (name: IconName, tip: string, disabled: boolean, onClick: () => void): HTMLButtonElement => {\n    const b = el(\"button\", \"shell-tag-x shell-tag-move\", iconNode(name, CHIP_ICON));\n    b.type = \"button\"; b.dataset[\"tip\"] = tip; b.setAttribute(\"aria-label\", tip);\n    b.disabled = disabled;\n    b.addEventListener(\"click\", onClick);\n    return b;\n  };\n  // The name, editable in place. A span with a button's role rather than a\n  // <button>, so the chip's own controls stay its only buttons.\n  const nameLabel = (chip: HTMLElement, v: string, i: number): HTMLElement => {\n    const label = el(\"span\", \"shell-tag-label\", `${i + 1}. ${v}`);\n    label.setAttribute(\"role\", \"button\"); label.tabIndex = 0;\n    label.dataset[\"tip\"] = `Rename ${v}`;\n    const edit = (): void => {\n      const field = el(\"input\", \"shell-tag-input shell-stage-rename\");\n      field.type = \"text\"; field.value = v; field.spellcheck = false;\n      field.setAttribute(\"aria-label\", `Rename ${v}`);\n      let done = false;\n      const finish = (keep: boolean): void => {\n        if (done) return;\n        done = true;\n        const to = field.value.trim();\n        const stages = holder.stages ?? [];\n        if (keep && to !== \"\" && to !== v && !stages.includes(to)) {\n          stages[stages.indexOf(v)] = to;\n          rebuild();\n          if (opts.onRename) opts.onRename(v, to); else onChange?.();\n        } else {\n          rebuild();\n        }\n      };\n      field.addEventListener(\"keydown\", (e) => {\n        if (e.key === \"Enter\") { e.preventDefault(); finish(true); }\n        else if (e.key === \"Escape\") { e.preventDefault(); e.stopPropagation(); finish(false); }\n      });\n      field.addEventListener(\"blur\", () => finish(true));\n      label.replaceWith(field);\n      chip.classList.add(\"editing\");\n      field.focus(); field.select();\n    };\n    // The chips usually sit inside a <label> for the add input (`labelled`),\n    // whose activation would move focus there and close the rename at once.\n    label.addEventListener(\"click\", (e) => { e.preventDefault(); edit(); });\n    label.addEventListener(\"keydown\", (e) => { if (e.key === \"Enter\" || e.key === \" \") { e.preventDefault(); edit(); } });\n    return label;\n  };\n  const moved = (): void => { rebuild(); onChange?.(); opts.onReorder?.(); };\n  const rebuild = (): void => {\n    for (const c of Array.from(wrap.children)) if (c !== input) c.remove();\n    const stages = holder.stages ?? [];\n    stages.forEach((v, i) => {\n      const chip = el(\"span\", \"shell-tag\");\n      chip.dataset[\"stage\"] = v;\n      chip.append(\n        nameLabel(chip, v, i),\n        control(\"back\", `Move ${v} earlier`, i === 0, () => { if (moveItem(stages, i, -1)) moved(); }),\n        control(\"forward\", `Move ${v} later`, i === stages.length - 1, () => { if (moveItem(stages, i, 1)) moved(); }),\n      );\n      const x = el(\"button\", \"shell-tag-x\", iconNode(\"close\", CHIP_ICON));\n      x.type = \"button\"; x.dataset[\"tip\"] = `Remove ${v}`; x.setAttribute(\"aria-label\", `Remove ${v}`);\n      x.addEventListener(\"click\", () => { holder.stages = (holder.stages ?? []).filter((o) => o !== v); rebuild(); onChange?.(); });\n      chip.append(x);\n      wrap.insertBefore(chip, input);\n    });\n  };\n  const commit = (): void => {\n    const v = input.value.trim();\n    if (v && !(holder.stages ?? []).includes(v)) { (holder.stages ??= []).push(v); rebuild(); onChange?.(); }\n    input.value = \"\";\n  };\n  input.addEventListener(\"keydown\", (e) => { if (e.key === \"Enter\" || e.key === \",\") { e.preventDefault(); commit(); } });\n  input.addEventListener(\"blur\", commit);\n  wrap.append(input);\n  rebuild();\n  return wrap;\n}\n\n// --- drag-to-reorder ---------------------------------------------------------\n// One drag at a time per window, shared across every wired list, so the\n// midpoint test knows what is being carried without a dataTransfer round trip.\nlet reorderDragId: string | null = null;\nconst clearDropMarks = (host: ParentNode): void =>\n  host.querySelectorAll(\".drop-before, .drop-after\").forEach((e) => e.classList.remove(\"drop-before\", \"drop-after\"));\n\n/**\n * Make `el` a drag source and a drop target for HTML5 drag-to-reorder among\n * its siblings. While carried it wears `.dragging`; a hovered target wears\n * `.drop-before` or `.drop-after` by the midpoint test on `axis` (\"y\" for\n * rows, \"x\" for a wrapping grid); a drop calls `onMove(draggedId, before,\n * targetId)` and the caller reorders its model and re-renders.\n *\n * Storyletter's `wireCardDrag`, lifted (ui-review-2026-09, finding 30);\n * Patterpad's `wireSceneDrag` is the same idea fixed on \"y\". The marks are\n * classes only: the app draws them (Patterpad's `box-shadow: 0 -2px 0 0\n * var(--accent)` pair is the family's look).\n */\nexport function wireReorder(el: HTMLElement, id: string, axis: \"x\" | \"y\", onMove: (id: string, before: boolean, targetId: string) => void): void {\n  el.draggable = true;\n  el.dataset[\"reorderId\"] = id;\n  const host = (): ParentNode => el.parentElement ?? el;\n  el.addEventListener(\"dragstart\", (e) => {\n    reorderDragId = id; el.classList.add(\"dragging\");\n    if (e.dataTransfer) { e.dataTransfer.effectAllowed = \"move\"; e.dataTransfer.setData(\"text/plain\", id); }\n  });\n  el.addEventListener(\"dragend\", () => { reorderDragId = null; el.classList.remove(\"dragging\"); clearDropMarks(host()); });\n  el.addEventListener(\"dragover\", (e) => {\n    if (!reorderDragId || reorderDragId === id) return;\n    e.preventDefault();\n    if (e.dataTransfer) e.dataTransfer.dropEffect = \"move\";\n    const r = el.getBoundingClientRect();\n    const before = axis === \"y\" ? e.clientY < r.top + r.height / 2 : e.clientX < r.left + r.width / 2;\n    clearDropMarks(host());\n    el.classList.add(before ? \"drop-before\" : \"drop-after\");\n  });\n  el.addEventListener(\"dragleave\", () => el.classList.remove(\"drop-before\", \"drop-after\"));\n  el.addEventListener(\"drop\", (e) => {\n    e.preventDefault();\n    const before = el.classList.contains(\"drop-before\");\n    clearDropMarks(host());\n    if (reorderDragId && reorderDragId !== id) onMove(reorderDragId, before, id);\n  });\n}\n\n// --- metadata and breadcrumbs ---------------------------------------------------\n// \"Icons are drawn, and so are separators\" (design-language.md section 4,\n// 2026-09-16): metadata is never joined with \"·\" and a breadcrumb is never a\n// string with \"›\" in it. Both apps had been building exactly those strings\n// (ui-review-2026-09, marker A); these two helpers make the same lines as DOM,\n// with the separator drawn by CSS (controls.css) or by the icon vocabulary.\n\n/**\n * A metadata line: `parts` as spans in a flex row, separated by a drawn\n * 3px disc (a `::before` on every part after the first, in controls.css),\n * so `metaLine([\"6 runs\", \"200 max steps\", \"seed 4\"])` is what\n * \"6 runs · 200 max steps · seed 4\" used to be, without the typed dot.\n * Empty, null and undefined parts are skipped, so a caller can pass an\n * optional segment without branching.\n */\nexport function metaLine(parts: (string | Node | null | undefined)[]): HTMLElement {\n  const row = el(\"span\", \"shell-meta\");\n  for (const part of parts) {\n    if (part === null || part === undefined || part === \"\") continue;\n    const seg = el(\"span\", \"shell-meta-part\");\n    seg.append(part);\n    row.append(seg);\n  }\n  return row;\n}\n\nexport interface Crumb {\n  label: string;\n  /** Makes the crumb a button. Ignored on the last crumb, which is where the\n   *  reader already is. */\n  onClick?: (event: MouseEvent) => void;\n}\n\n/**\n * A breadcrumb trail: each crumb a span, or a button when it carries\n * `onClick` and is not the last, with `iconNode(\"forward\", 12)` drawn between\n * them. `breadcrumb([\"Box\", \"Deck\", \"Card\"])` is what \"Box › Deck › Card\"\n * used to be; the chevrons are the family's own drawing, not a symbol-font\n * character.\n */\nexport function breadcrumb(parts: (string | Crumb)[]): HTMLElement {\n  const trail = el(\"nav\", \"shell-crumbs\");\n  trail.setAttribute(\"aria-label\", \"Where this is\");\n  parts.forEach((part, i) => {\n    const crumb: Crumb = typeof part === \"string\" ? { label: part } : part;\n    const last = i === parts.length - 1;\n    if (i > 0) {\n      const sep = iconNode(\"forward\", 12);\n      sep.classList.add(\"shell-crumb-sep\");\n      trail.append(sep);\n    }\n    if (crumb.onClick && !last) {\n      const b = el(\"button\", { className: \"shell-crumb shell-crumb-link\", text: crumb.label, onClick: crumb.onClick });\n      b.type = \"button\";\n      trail.append(b);\n    } else {\n      const s = el(\"span\", \"shell-crumb\", crumb.label);\n      if (last) s.setAttribute(\"aria-current\", \"location\");\n      trail.append(s);\n    }\n  });\n  return trail;\n}\n","// ---------------------------------------------------------------------------\n// Typed value controls: how both apps show and set a value of a declared type.\n//\n// The first is the quality's. A quality is a step on a ladder, so its value is\n// shown as the LADDER, with the current rung marked, rather than a dropdown that\n// shows one name and hides where it stands (patterkit design/proposals/\n// patter-qualities.md section 4). Storyletter's Board drew it this way first;\n// it lives here so Storyletter's Fields tab, Patterpad's play panel and Game\n// Data rows, and the play inspectors all draw the same strip.\n//\n// An UNSET value (a field or game-data value the node leaves out) names what it\n// falls back to, \"default (x)\", by the family's one rule: the declaration's own\n// default, else the type's (a quality's first stage). A value that is no longer\n// a stage (a deleted one) is shown as such, so it can be put back on the ladder.\n//\n// No Electron, no app state: this module is DOM only, and is its own entry point\n// (`@wildwinter/app-shell/value-control`) so a play inspector outside the apps\n// can take it.\n// ---------------------------------------------------------------------------\n\nimport { el } from \"./dom.js\";\n\n/** A declaration as these controls read it: a property's, a field's or a game-data field's. */\nexport interface ValueDeclLike {\n  type: string;\n  default?: unknown;\n  /** enum / flags */\n  values?: readonly string[];\n  /** quality: the ladder, in order */\n  stages?: readonly string[];\n}\n\n/**\n * What an unset value of `decl` falls back to, as the words a control shows: its own default where it has\n * one, else its type's (False, 0, the first value, no flags, the first stage, empty text). The kernel's\n * `defaultFor`, in words; a host reads the same value from the bundle.\n */\nexport function fallbackText(decl: ValueDeclLike): string {\n  const d = decl.default;\n  if (d !== undefined && d !== null) {\n    if (typeof d === \"boolean\") return d ? \"True\" : \"False\";\n    if (Array.isArray(d)) return d.length === 0 ? \"none\" : d.join(\", \");\n    return d === \"\" ? \"none\" : String(d);\n  }\n  switch (decl.type) {\n    case \"boolean\": return \"False\";\n    case \"number\": return \"0\";\n    case \"enum\": return decl.values?.[0] ?? \"none\";\n    case \"quality\": return decl.stages?.[0] ?? \"first stage\";\n    case \"flags\": return \"none\";\n    default: return \"empty\";\n  }\n}\n\n/** The label an unset value shows: \"default (x)\", naming what it falls back to. */\nexport const defaultLabel = (decl: ValueDeclLike): string => `default (${fallbackText(decl)})`;\n\n/**\n * The quiet line under a ladder that has just been reordered: how many gates order against it. A reorder\n * changes no value, and is the one edit that changes what a gate MEANS without saying so (patter-qualities.md\n * section 2), so the editor says so. Empty when no gate orders the quality.\n */\nexport function stageGateNote(gates: number): string {\n  if (gates <= 0) return \"\";\n  return gates === 1\n    ? \"1 gate compares against this ladder, and it now reads the new order.\"\n    : `${gates} gates compare against this ladder, and each now reads the new order.`;\n}\n\nexport interface RungStripOptions {\n  /** The ladder, in order. */\n  stages: readonly string[];\n  /** The value held, or undefined when unset: a field or game-data value the node leaves out. */\n  value: string | undefined;\n  /** The declaration, for what an unset value falls back to (its default, else the first stage). */\n  decl?: ValueDeclLike;\n  /** Pick a stage. Absent: the strip is read-only. */\n  onPick?: (stage: string) => void;\n  /** Clear back to unset. With it, the strip leads with \"default (x)\", which clears the value. */\n  onClear?: () => void;\n  /** The rollover on a rung that is not the current one (default: `Set to \"x\"`). */\n  pickTip?: (stage: string) => string;\n  /**\n   * The document to build in, for a host outside the apps (a play inspector in a page or a frame of its\n   * own). Given, rollovers are plain `title`s and the family's themed tooltips are not mounted; the host\n   * styles `.seg`, `.seg-opt` and `.shell-rung` itself. Absent: the apps' document and themed rollovers.\n   */\n  doc?: Document;\n}\n\n/**\n * A quality's value as its ladder: one rung per stage, in order, the current one marked (`on`). Unset, the\n * rung it falls back to is marked as the fallback (`fallback`), and with `onClear` a leading \"default (x)\"\n * option is the current choice. A value that is not a stage (a deleted one) is shown after the ladder,\n * marked `stray`, until a rung is picked.\n */\nexport function rungStrip(opts: RungStripOptions): HTMLElement {\n  const make = opts.doc === undefined ? el : (tag: \"span\" | \"button\", props: { className: string; text?: string; tip?: string; onClick?: () => void }) => {\n    const node = opts.doc!.createElement(tag);\n    node.className = props.className;\n    if (props.text !== undefined) node.textContent = props.text;\n    if (props.tip !== undefined) { node.title = props.tip; node.setAttribute(\"aria-label\", props.tip); }\n    if (props.onClick) node.addEventListener(\"click\", props.onClick);\n    if (tag === \"button\") (node as HTMLButtonElement).type = \"button\";\n    return node;\n  };\n  const strip = make(\"span\", { className: \"seg shell-rungs\" });\n  const decl: ValueDeclLike = opts.decl ?? { type: \"quality\", stages: opts.stages };\n  const unset = opts.value === undefined;\n  const fallback = typeof decl.default === \"string\" && opts.stages.includes(decl.default) ? decl.default : opts.stages[0];\n  const readOnly = opts.onPick === undefined;\n  if (opts.onClear) {\n    strip.append(make(\"button\", {\n      className: `seg-opt shell-rung shell-rung-default${unset ? \" on\" : \"\"}`, text: defaultLabel(decl),\n      tip: unset ? \"Not set here: the declared default holds\" : \"Clear the value, back to the default\",\n      onClick: () => { if (!unset) opts.onClear!(); },\n    }));\n  }\n  for (const stage of opts.stages) {\n    const current = opts.value === stage;\n    const falls = unset && stage === fallback;\n    const rung = make(readOnly ? \"span\" : \"button\", {\n      className: `seg-opt shell-rung${current ? \" on\" : \"\"}${falls ? \" fallback\" : \"\"}`, text: stage,\n      tip: current ? \"The current stage\" : falls ? \"The stage it falls back to\" : readOnly ? stage : (opts.pickTip?.(stage) ?? `Set to \"${stage}\"`),\n      ...(readOnly ? {} : { onClick: () => { if (!current) opts.onPick!(stage); } }),\n    });\n    strip.append(rung);\n  }\n  if (!unset && !opts.stages.includes(opts.value!)) {\n    strip.append(make(\"span\", {\n      className: \"seg-opt shell-rung stray on\", text: opts.value!,\n      tip: `\"${opts.value}\" is not one of the stages: pick the one it belongs at now`,\n    }));\n  }\n  return strip;\n}\n"]}

package/dist/value-control.d.cts

@@ -0,0 +1,52 @@
+/** A declaration as these controls read it: a property's, a field's or a game-data field's. */
+interface ValueDeclLike {
+    type: string;
+    default?: unknown;
+    /** enum / flags */
+    values?: readonly string[];
+    /** quality: the ladder, in order */
+    stages?: readonly string[];
+}
+/**
+ * What an unset value of `decl` falls back to, as the words a control shows: its own default where it has
+ * one, else its type's (False, 0, the first value, no flags, the first stage, empty text). The kernel's
+ * `defaultFor`, in words; a host reads the same value from the bundle.
+ */
+declare function fallbackText(decl: ValueDeclLike): string;
+/** The label an unset value shows: "default (x)", naming what it falls back to. */
+declare const defaultLabel: (decl: ValueDeclLike) => string;
+/**
+ * The quiet line under a ladder that has just been reordered: how many gates order against it. A reorder
+ * changes no value, and is the one edit that changes what a gate MEANS without saying so (patter-qualities.md
+ * section 2), so the editor says so. Empty when no gate orders the quality.
+ */
+declare function stageGateNote(gates: number): string;
+interface RungStripOptions {
+    /** The ladder, in order. */
+    stages: readonly string[];
+    /** The value held, or undefined when unset: a field or game-data value the node leaves out. */
+    value: string | undefined;
+    /** The declaration, for what an unset value falls back to (its default, else the first stage). */
+    decl?: ValueDeclLike;
+    /** Pick a stage. Absent: the strip is read-only. */
+    onPick?: (stage: string) => void;
+    /** Clear back to unset. With it, the strip leads with "default (x)", which clears the value. */
+    onClear?: () => void;
+    /** The rollover on a rung that is not the current one (default: `Set to "x"`). */
+    pickTip?: (stage: string) => string;
+    /**
+     * The document to build in, for a host outside the apps (a play inspector in a page or a frame of its
+     * own). Given, rollovers are plain `title`s and the family's themed tooltips are not mounted; the host
+     * styles `.seg`, `.seg-opt` and `.shell-rung` itself. Absent: the apps' document and themed rollovers.
+     */
+    doc?: Document;
+}
+/**
+ * A quality's value as its ladder: one rung per stage, in order, the current one marked (`on`). Unset, the
+ * rung it falls back to is marked as the fallback (`fallback`), and with `onClear` a leading "default (x)"
+ * option is the current choice. A value that is not a stage (a deleted one) is shown after the ladder,
+ * marked `stray`, until a rung is picked.
+ */
+declare function rungStrip(opts: RungStripOptions): HTMLElement;
+
+export { type RungStripOptions, type ValueDeclLike, defaultLabel, fallbackText, rungStrip, stageGateNote };

package/dist/value-control.d.ts

@@ -0,0 +1,52 @@
+/** A declaration as these controls read it: a property's, a field's or a game-data field's. */
+interface ValueDeclLike {
+    type: string;
+    default?: unknown;
+    /** enum / flags */
+    values?: readonly string[];
+    /** quality: the ladder, in order */
+    stages?: readonly string[];
+}
+/**
+ * What an unset value of `decl` falls back to, as the words a control shows: its own default where it has
+ * one, else its type's (False, 0, the first value, no flags, the first stage, empty text). The kernel's
+ * `defaultFor`, in words; a host reads the same value from the bundle.
+ */
+declare function fallbackText(decl: ValueDeclLike): string;
+/** The label an unset value shows: "default (x)", naming what it falls back to. */
+declare const defaultLabel: (decl: ValueDeclLike) => string;
+/**
+ * The quiet line under a ladder that has just been reordered: how many gates order against it. A reorder
+ * changes no value, and is the one edit that changes what a gate MEANS without saying so (patter-qualities.md
+ * section 2), so the editor says so. Empty when no gate orders the quality.
+ */
+declare function stageGateNote(gates: number): string;
+interface RungStripOptions {
+    /** The ladder, in order. */
+    stages: readonly string[];
+    /** The value held, or undefined when unset: a field or game-data value the node leaves out. */
+    value: string | undefined;
+    /** The declaration, for what an unset value falls back to (its default, else the first stage). */
+    decl?: ValueDeclLike;
+    /** Pick a stage. Absent: the strip is read-only. */
+    onPick?: (stage: string) => void;
+    /** Clear back to unset. With it, the strip leads with "default (x)", which clears the value. */
+    onClear?: () => void;
+    /** The rollover on a rung that is not the current one (default: `Set to "x"`). */
+    pickTip?: (stage: string) => string;
+    /**
+     * The document to build in, for a host outside the apps (a play inspector in a page or a frame of its
+     * own). Given, rollovers are plain `title`s and the family's themed tooltips are not mounted; the host
+     * styles `.seg`, `.seg-opt` and `.shell-rung` itself. Absent: the apps' document and themed rollovers.
+     */
+    doc?: Document;
+}
+/**
+ * A quality's value as its ladder: one rung per stage, in order, the current one marked (`on`). Unset, the
+ * rung it falls back to is marked as the fallback (`fallback`), and with `onClear` a leading "default (x)"
+ * option is the current choice. A value that is not a stage (a deleted one) is shown after the ladder,
+ * marked `stray`, until a rung is picked.
+ */
+declare function rungStrip(opts: RungStripOptions): HTMLElement;
+
+export { type RungStripOptions, type ValueDeclLike, defaultLabel, fallbackText, rungStrip, stageGateNote };

package/dist/value-control.js

@@ -0,0 +1,4 @@
+export { defaultLabel, fallbackText, rungStrip, stageGateNote } from './chunk-EAE7UWQ5.js';
+import './chunk-W4WC4FO5.js';
+//# sourceMappingURL=value-control.js.map
+//# sourceMappingURL=value-control.js.map

package/dist/value-control.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"value-control.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wildwinter/app-shell",
-  "version": "0.48.0",
+  "version": "0.49.0",
   "description": "The shared shell for the editor family (Patterpad, Storylet Studio): the app-agnostic design-token grammar, the per-entity colour hash, and the vanilla-TS DOM primitive. Two palettes, one grammar - each app supplies its own palette/fonts over these tokens.",
   "type": "module",
   "license": "MIT",
@@ -30,6 +30,11 @@
     "./dialog.css": "./dist/dialog.css",
     "./context-menu.css": "./dist/context-menu.css",
     "./pane-shell.css": "./dist/pane-shell.css",
+    "./value-control": {
+      "types": "./dist/value-control.d.ts",
+      "import": "./dist/value-control.js",
+      "require": "./dist/value-control.cjs"
+    },
     "./dialog": {
       "types": "./dist/dialog.d.ts",
       "import": "./dist/dialog.js",