@wildwinter/app-shell 0.50.0 → 0.51.0

package/dist/value-rows.cjs

@@ -0,0 +1,1104 @@
+'use strict';
+
+var extensions = require('@wildwinter/toolkit/extensions');
+
+// src/value-rows.ts
+
+// 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/icons.ts
+var icon = {
+  // --- dismissing and revealing ---------------------------------------------
+  /** Close a panel, a dialog, a popover. Patterpad's, twelve times over. */
+  close: "\u2715",
+  /** The overflow menu on a document or a row: "more about this". */
+  more: "\u22EF",
+  /** Collapsed disclosure, pointing at what would open. */
+  collapsed: "\u25B8",
+  /** Expanded disclosure. */
+  expanded: "\u25BE",
+  /** A dropdown's affordance, where it is not a real <select>. */
+  dropdown: "\u25BE",
+  // --- moving through things ------------------------------------------------
+  /** Back / previous, in a breadcrumb or a stepper. */
+  back: "\u2039",
+  /** Forward / next. */
+  forward: "\u203A",
+  /** Up one, in a list. */
+  up: "\u2191",
+  /** Down one. */
+  down: "\u2193",
+  // --- state ----------------------------------------------------------------
+  /** Done, applied, agreed. */
+  tick: "\u2713",
+  /** Somebody else holds this: the version-control lock. */
+  locked: "\u2298",
+  /** Read-only on disk with no other holder: the resting state of everything
+   *  in a lock-based working copy that nobody has checked out yet. */
+  readOnly: "\u25CB",
+  /** YOU hold this one: checked out / opened by the current user, still yours to
+   *  edit. Shares its glyph with `note`, which the table permits: an entry is a
+   *  MEANING, and two meanings may draw the same shape. */
+  checkedOut: "\u270E",
+  /** Tracked, with local changes not yet committed. */
+  modified: "\u25CF",
+  /** Not in version control yet: new since the last commit. */
+  untracked: "+",
+  /** Something needs attention but is not fatal. */
+  warning: "\u203C",
+  /** A live thing: the running position, an active marker. */
+  dot: "\u25CF",
+  /** Play, in the sense of "run this". */
+  play: "\u25B6",
+  /** Start the thing again from the top: a play session, a sweep. Named for the
+   *  act, not the arrow, which is the table's rule. */
+  restart: "\u27F2",
+  /** The three ways a collection can be shown. Named by what you get rather than
+   *  by the glyph, so a second app can pick the same three without copying
+   *  somebody's taste in symbols. */
+  viewCards: "\u25A6",
+  viewTable: "\u2630",
+  viewNode: "\u25C8",
+  // --- handling -------------------------------------------------------------
+  /** The drag grip on a reorderable row. */
+  grip: "\u283F",
+  /** Add one of whatever this list holds. */
+  add: "+",
+  // --- annotation -----------------------------------------------------------
+  /** Documentation notes: the pencil. Both apps had chosen it independently,
+   *  which is the happiest way for a vocabulary entry to arrive. */
+  note: "\u270E",
+  /** A comment thread. Speech, not a pencil: documentation states the reason,
+   *  comments are the conversation, and the two must never look alike. */
+  comment: "\u275D"
+};
+var STROKE = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.571" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">';
+var FILL = '<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">';
+var stroked = (inner) => `${STROKE}${inner}</svg>`;
+var filled = (inner) => `${FILL}${inner}</svg>`;
+var DISC = filled('<circle cx="12" cy="12" r="6"/>');
+var DISC_LARGE = filled('<circle cx="12" cy="12" r="9"/>');
+var DRAWN = {
+  // --- dismissing and revealing ---------------------------------------------
+  /** Close a panel, a dialog, a popover. (x) */
+  close: stroked('<path d="M18 6 6 18"/><path d="m6 6 12 12"/>'),
+  /** The overflow menu on a document or a row: "more about this". (ellipsis) */
+  more: stroked('<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>'),
+  /** Collapsed disclosure, pointing at what would open. (chevron-right) */
+  collapsed: stroked('<path d="m9 18 6-6-6-6"/>'),
+  /** Expanded disclosure. (chevron-down) */
+  expanded: stroked('<path d="m6 9 6 6 6-6"/>'),
+  /** A dropdown's affordance, where it is not a real <select>. (chevron-down) */
+  dropdown: stroked('<path d="m6 9 6 6 6-6"/>'),
+  // --- moving through things ------------------------------------------------
+  /** Back / previous, in a breadcrumb or a stepper. (chevron-left) */
+  back: stroked('<path d="m15 18-6-6 6-6"/>'),
+  /** Forward / next. (chevron-right) */
+  forward: stroked('<path d="m9 18 6-6-6-6"/>'),
+  /** Up one, in a list. (arrow-up) */
+  up: stroked('<path d="m5 12 7-7 7 7"/><path d="M12 19V5"/>'),
+  /** Down one. (arrow-down) */
+  down: stroked('<path d="M12 5v14"/><path d="m19 12-7 7-7-7"/>'),
+  /** History back. (arrow-left) */
+  arrowLeft: stroked('<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>'),
+  /** History forward; "go there". (arrow-right) */
+  arrowRight: stroked('<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>'),
+  // --- state ----------------------------------------------------------------
+  /** Done, applied, agreed. (check) */
+  tick: stroked('<path d="M20 6 9 17l-5-5"/>'),
+  /** Somebody else holds this: the version-control lock. (lock) */
+  locked: stroked('<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>'),
+  /** Read-only on disk with no other holder. (lock-open) An open lock rather
+   *  than a struck-out eye: this state is not a prohibition. Nobody holds the
+   *  file, saving checks it out, and it is the resting state of everything the
+   *  author has not touched yet under a lock-based VCS. eye-off would say "you
+   *  cannot", which is false here; the open lock says "not held", beside
+   *  `locked`, which is the shut one, so the two read as a pair. */
+  readOnly: stroked('<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 9.9-1"/>'),
+  /** YOU hold this one: checked out, still yours to edit. (pencil) */
+  checkedOut: stroked('<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/>'),
+  /** Tracked, with local changes not yet committed. (a disc; see DISC) */
+  modified: DISC,
+  /** Not in version control yet: new since the last commit. (plus) */
+  untracked: stroked('<path d="M5 12h14"/><path d="M12 5v14"/>'),
+  /** Something needs attention but is not fatal. (triangle-alert) */
+  warning: stroked('<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/>'),
+  /** A live thing: the running position, an active marker. (a disc) */
+  dot: DISC,
+  /** Play, in the sense of "run this". (play) */
+  play: stroked('<path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"/>'),
+  /** Start the thing again from the top: a play session, a sweep. (rotate-ccw) */
+  restart: stroked('<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/>'),
+  /** The three ways a collection can be shown, named by what you get. */
+  /** Cards. (layout-grid) */
+  viewCards: stroked('<rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/>'),
+  /** A table. (rows-3: a ruled box, which is a table. `list` is bullets, and
+   *  the view is not a list.) */
+  viewTable: stroked('<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M21 9H3"/><path d="M21 15H3"/>'),
+  /** A node graph. (waypoints: four nodes on edges reads as a graph.
+   *  `git-fork` reads as version control, which this family also draws, and
+   *  a picture that means two things is the fault this table exists to
+   *  prevent.) */
+  viewNode: stroked('<path d="m10.586 5.414-5.172 5.172"/><path d="m18.586 13.414-5.172 5.172"/><path d="M6 12h12"/><circle cx="12" cy="20" r="2"/><circle cx="12" cy="4" r="2"/><circle cx="20" cy="12" r="2"/><circle cx="4" cy="12" r="2"/>'),
+  /** Record: the disc, in whatever colour the button is. (a disc; see DISC_LARGE) */
+  record: DISC_LARGE,
+  /** Sound: play with audio. (volume-2: the cone and two waves. Patterpad's
+   *  hand-drawn one had a single wave, which at 14px reads as quiet rather
+   *  than as sound.) */
+  speaker: stroked('<path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"/><path d="M16 9a5 5 0 0 1 0 6"/><path d="M19.364 18.364a9 9 0 0 0 0-12.728"/>'),
+  // --- handling -------------------------------------------------------------
+  /** The drag grip on a reorderable row. (grip-vertical) */
+  grip: stroked('<circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/>'),
+  /** Add one of whatever this list holds. (plus) */
+  add: stroked('<path d="M5 12h14"/><path d="M12 5v14"/>'),
+  /** Copy this to the clipboard. (copy: the front sheet whole, the back
+   *  sheet showing round two of its sides) */
+  copy: stroked('<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>'),
+  /** Connect: to a server, a live link, a running game. (plug) */
+  connect: stroked('<path d="M12 22v-5"/><path d="M15 8V2"/><path d="M17 8a1 1 0 0 1 1 1v4a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1z"/><path d="M9 8V2"/>'),
+  /** Search. (search) */
+  search: stroked('<path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/>'),
+  /** Keep this window on top. (pin) */
+  pin: stroked('<path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/>'),
+  /** Settings. (settings) */
+  settings: stroked('<path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/>'),
+  // --- annotation -----------------------------------------------------------
+  /** Documentation notes: a document with lines on it. (file-text) The glyph
+   *  table drew a pencil and shared it with `checkedOut`; the drawn set gives
+   *  the two meanings two shapes, and notes get the document, which is what
+   *  the shell's own noteFilled/noteOutline pair had always drawn. */
+  note: stroked('<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/>'),
+  /** A comment thread. Speech, not a document: documentation states the
+   *  reason, comments are the conversation, and the two must never look
+   *  alike. (message-square) */
+  comment: stroked('<path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"/>')
+};
+({
+  ...DRAWN});
+var ICON_SIZE = 14;
+var templates = /* @__PURE__ */ new Map();
+function iconNode(name, size = ICON_SIZE) {
+  let tpl = templates.get(name);
+  if (!tpl) {
+    const holder = document.createElement("template");
+    holder.innerHTML = DRAWN[name];
+    tpl = holder.content.firstElementChild;
+    tpl.setAttribute("data-icon", name);
+    templates.set(name, tpl);
+  }
+  const node = tpl.cloneNode(true);
+  node.setAttribute("width", String(size));
+  node.setAttribute("height", String(size));
+  return node;
+}
+var BY_GLYPH = /* @__PURE__ */ new Map();
+for (const [name, glyph] of Object.entries(icon)) {
+  if (!BY_GLYPH.has(glyph)) BY_GLYPH.set(glyph, name);
+}
+function iconNameOfGlyph(glyph) {
+  return BY_GLYPH.get(glyph);
+}
+function isIconName(s) {
+  return Object.prototype.hasOwnProperty.call(DRAWN, s);
+}
+
+// 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;
+}
+function iconBtn(name, title, onClick, disabled = false, danger = false) {
+  const b = el("button", `shell-icon${danger ? " danger" : ""}`);
+  b.type = "button";
+  b.dataset["tip"] = title;
+  b.setAttribute("aria-label", title);
+  const word = isIconName(name) ? name : iconNameOfGlyph(name);
+  if (word) b.append(iconNode(word));
+  else b.textContent = name;
+  b.disabled = disabled;
+  b.addEventListener("click", onClick);
+  return b;
+}
+function moveItem(arr, i, delta) {
+  const j = i + delta;
+  if (j < 0 || j >= arr.length) return false;
+  [arr[i], arr[j]] = [arr[j], arr[i]];
+  return true;
+}
+var CHIP_ICON = 10;
+function tagChips(holder, onChange) {
+  const wrap = el("div", "shell-tags");
+  const input = el("input", "shell-tag-input");
+  input.type = "text";
+  input.placeholder = "Add value";
+  input.spellcheck = false;
+  const makeChip = (v) => {
+    const chip = el("span", "shell-tag", v);
+    const x = el("button", "shell-tag-x", iconNode("close", CHIP_ICON));
+    x.type = "button";
+    x.dataset["tip"] = `Remove ${v}`;
+    x.setAttribute("aria-label", `Remove ${v}`);
+    x.addEventListener("click", () => {
+      holder.values = (holder.values ?? []).filter((o) => o !== v);
+      chip.remove();
+      onChange?.();
+    });
+    chip.append(x);
+    return chip;
+  };
+  const commit = () => {
+    const v = input.value.trim();
+    if (v && !(holder.values ?? []).includes(v)) {
+      (holder.values ??= []).push(v);
+      wrap.insertBefore(makeChip(v), input);
+      onChange?.();
+    }
+    input.value = "";
+  };
+  input.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" || e.key === ",") {
+      e.preventDefault();
+      commit();
+    }
+  });
+  input.addEventListener("blur", commit);
+  for (const v of holder.values ?? []) wrap.append(makeChip(v));
+  wrap.append(input);
+  return wrap;
+}
+
+// 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 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;
+}
+var fallbackFlags = (decl) => Array.isArray(decl.default) ? decl.default.filter((v) => typeof v === "string") : [];
+function fieldValueProblem(decl, value) {
+  if (value === void 0 || value === null || value === "") return "";
+  switch (decl.type) {
+    case "number":
+      return typeof value === "number" && Number.isFinite(value) ? "" : "Not a number.";
+    case "boolean":
+      return typeof value === "boolean" ? "" : "Not True or False.";
+    case "enum":
+      return decl.values && !decl.values.includes(String(value)) ? `"${String(value)}" is not one of the values.` : "";
+    case "quality":
+      return decl.stages && !decl.stages.includes(String(value)) ? `"${String(value)}" is not one of the stages.` : "";
+    case "flags": {
+      if (!Array.isArray(value)) return "Not a list of flags.";
+      const strays = decl.values ? value.filter((v) => !decl.values.includes(String(v))) : [];
+      if (strays.length === 0) return "";
+      return strays.length === 1 ? `"${String(strays[0])}" is not one of the values.` : `${strays.map((s) => `"${String(s)}"`).join(", ")} are not among the values.`;
+    }
+    default:
+      return "";
+  }
+}
+var isTextual = (type) => type !== "boolean" && type !== "enum" && type !== "flags" && type !== "quality";
+var controlShape = (o) => JSON.stringify([
+  o.decl.type,
+  o.decl.values ?? null,
+  o.decl.stages ?? null,
+  o.decl.default ?? null,
+  o.onCommit === void 0,
+  o.disabled === true,
+  o.controlClassName ?? "",
+  o.decl.type === "quality" && (o.decl.stages?.length ?? 0) === 0
+]);
+function fieldRow(initial) {
+  let opts = initial;
+  const row = el("div", `shell-fieldrow${opts.className ? ` ${opts.className}` : ""}`);
+  const caption = el("span", `shell-fieldrow-label${opts.labelClassName ? ` ${opts.labelClassName}` : ""}`);
+  caption.id = `shell-fr-${Math.random().toString(36).slice(2, 9)}`;
+  const body = el("div", "shell-fieldrow-body");
+  const purpose = el("p", "shell-fieldrow-purpose");
+  const problem = el("p", "shell-fieldrow-problem");
+  problem.setAttribute("role", "status");
+  row.append(caption, body);
+  let shape = "";
+  let show2 = () => {
+  };
+  let typing = "";
+  const commit = (v) => {
+    opts.onCommit?.(v);
+  };
+  const editable = () => opts.onCommit !== void 0 && opts.disabled !== true;
+  const ctl = (base) => opts.controlClassName ? `${base.replace(/^field /, "")} ${opts.controlClassName}` : base;
+  const labelledBy = (node) => {
+    node.setAttribute("aria-labelledby", caption.id);
+    const described = [purpose.id, problem.id].filter(Boolean).join(" ");
+    if (described) node.setAttribute("aria-describedby", described);
+  };
+  purpose.id = `${caption.id}-p`;
+  problem.id = `${caption.id}-m`;
+  const sayProblem = () => {
+    const words = [typing || fieldValueProblem(opts.decl, opts.value), opts.problem ?? ""].filter((w) => w !== "");
+    problem.textContent = words.join(" ");
+    problem.hidden = words.length === 0;
+    row.classList.toggle("has-problem", words.length > 0);
+    row.classList.toggle("shell-fieldrow-textual", isTextual(opts.decl.type));
+  };
+  const build = () => {
+    const decl = opts.decl;
+    typing = "";
+    if (decl.type === "quality" && (decl.stages?.length ?? 0) > 0) {
+      const holder = el("span", "shell-fieldrow-rungs");
+      show2 = (value) => {
+        holder.replaceChildren(rungStrip({
+          stages: decl.stages,
+          value: typeof value === "string" && value !== "" ? value : void 0,
+          decl,
+          ...editable() ? { onPick: (stage) => {
+            opts = { ...opts, value: stage };
+            show2(stage);
+            sayProblem();
+            commit(stage);
+          }, onClear: () => {
+            opts = { ...opts, value: void 0 };
+            show2(void 0);
+            sayProblem();
+            commit(void 0);
+          } } : {}
+        }));
+        const strip = holder.firstElementChild;
+        if (strip) {
+          strip.setAttribute("role", "group");
+          labelledBy(strip);
+        }
+      };
+      return holder;
+    }
+    if (decl.type === "boolean" || decl.type === "enum") {
+      const sel = el("select", ctl("field shell-fieldrow-select"));
+      labelledBy(sel);
+      sel.disabled = !editable();
+      const choices = decl.type === "boolean" ? [["true", "True"], ["false", "False"]] : (decl.values ?? []).map((v) => [v, v]);
+      show2 = (value) => {
+        const current = value === void 0 || value === null || value === "" ? "" : String(value);
+        sel.replaceChildren();
+        const add = (v, label) => {
+          const o = el("option", void 0, label);
+          o.value = v;
+          sel.append(o);
+        };
+        add("", defaultLabel(decl));
+        for (const [v, label] of choices) add(v, label);
+        if (current !== "" && !choices.some(([v]) => v === current)) add(current, current);
+        sel.value = current;
+      };
+      sel.addEventListener("change", () => {
+        const raw = sel.value;
+        const v = raw === "" ? void 0 : decl.type === "boolean" ? raw === "true" : raw;
+        opts = { ...opts, value: v };
+        sayProblem();
+        commit(v);
+      });
+      return sel;
+    }
+    if (decl.type === "flags" && (decl.values?.length ?? 0) > 0) {
+      const holder = el("span", "shell-flags");
+      holder.setAttribute("role", "group");
+      labelledBy(holder);
+      show2 = (value) => {
+        const unset = !Array.isArray(value);
+        const held = unset ? fallbackFlags(decl) : value.map(String);
+        holder.replaceChildren();
+        const chip = (text, cls, pressed, tip2, onClick) => {
+          const b = el(onClick && editable() ? "button" : "span", { className: `shell-flag${cls}`, text, tip: tip2 });
+          b.setAttribute("aria-label", `${text}: ${tip2}`);
+          if (b instanceof HTMLButtonElement) {
+            b.type = "button";
+            b.addEventListener("click", onClick);
+          }
+          if (pressed !== void 0) b.setAttribute("aria-pressed", String(pressed));
+          holder.append(b);
+        };
+        const set = (next) => {
+          opts = { ...opts, value: next };
+          show2(next);
+          sayProblem();
+          commit(next);
+        };
+        chip(
+          defaultLabel(decl),
+          ` shell-flag-default${unset ? " on" : ""}`,
+          void 0,
+          unset ? "Not set here: the declared default holds" : "Clear the value, back to the default",
+          unset ? void 0 : () => set(void 0)
+        );
+        for (const v of decl.values) {
+          const on = held.includes(v);
+          chip(
+            v,
+            `${on ? " on" : ""}${on && unset ? " fallback" : ""}`,
+            on,
+            on ? `Unset ${v}` : `Set ${v}`,
+            () => set(on ? held.filter((x) => x !== v) : decl.values.filter((x) => x === v || held.includes(x)).concat(held.filter((x) => !decl.values.includes(x))))
+          );
+        }
+        for (const v of held.filter((x) => !decl.values.includes(x))) {
+          chip(v, " stray on", true, `"${v}" is not one of the values: click to drop it`, () => set(held.filter((x) => x !== v)));
+        }
+      };
+      return holder;
+    }
+    if (decl.type === "flags") {
+      const holder = el("span", "shell-fieldrow-chips");
+      show2 = (value) => {
+        const box = { values: Array.isArray(value) ? value.map(String) : [] };
+        const chips = tagChips(box, () => {
+          const next = box.values.length > 0 ? [...box.values] : void 0;
+          opts = { ...opts, value: next };
+          sayProblem();
+          commit(next);
+        });
+        const input = chips.querySelector("input");
+        if (input) {
+          labelledBy(input);
+          input.placeholder = Array.isArray(value) ? "Add value" : defaultLabel(decl);
+          input.disabled = !editable();
+        }
+        chips.querySelectorAll("button").forEach((b) => {
+          b.disabled = !editable();
+        });
+        holder.replaceChildren(chips);
+      };
+      return holder;
+    }
+    const multiline = decl.type === "multiline";
+    const field = multiline ? el("textarea", ctl("field shell-fieldrow-text")) : el("input", ctl("field shell-fieldrow-text"));
+    if (field instanceof HTMLInputElement) {
+      field.type = "text";
+      if (decl.type === "number") field.inputMode = "decimal";
+    } else field.rows = 3;
+    labelledBy(field);
+    field.placeholder = defaultLabel(decl);
+    field.disabled = !editable();
+    const asText = (value) => value === void 0 || value === null ? "" : Array.isArray(value) ? value.join(", ") : String(value);
+    const read = (raw) => {
+      if (raw.trim() === "") return {};
+      if (decl.type !== "number") return { value: raw };
+      const n = Number(raw.trim());
+      return Number.isFinite(n) ? { value: n } : { bad: "Not a number." };
+    };
+    let atFocus = "";
+    show2 = (value) => {
+      if (field.ownerDocument.activeElement === field || keeper.restoring(field) || keeper.holds(row)) return;
+      field.value = asText(value);
+    };
+    const take = () => {
+      const r = read(field.value);
+      typing = r.bad ?? "";
+      if (r.bad === void 0) opts = { ...opts, value: r.value };
+      sayProblem();
+      if (r.bad === void 0) commit(r.value);
+    };
+    field.addEventListener("focus", () => {
+      if (!keeper.restoring(field)) atFocus = field.value;
+    });
+    field.addEventListener("input", take);
+    field.addEventListener("keydown", (e) => {
+      if (e.key !== "Escape" || field.value === atFocus) return;
+      field.value = atFocus;
+      take();
+    });
+    return field;
+  };
+  const draw = (next) => {
+    const decl = next.decl;
+    const label = next.label ?? decl.name;
+    if (typeof label === "string") caption.textContent = label;
+    else caption.replaceChildren(label);
+    caption.className = `shell-fieldrow-label${next.labelClassName ? ` ${next.labelClassName}` : ""}`;
+    row.className = `shell-fieldrow${next.className ? ` ${next.className}` : ""}`;
+    const nextShape = controlShape(next);
+    opts = next;
+    if (nextShape !== shape) {
+      shape = nextShape;
+      body.replaceChildren(build());
+    }
+    show2(next.value);
+    purpose.textContent = decl.purpose ?? "";
+    if (decl.purpose) body.append(purpose);
+    else purpose.remove();
+    body.append(problem);
+    sayProblem();
+  };
+  draw(initial);
+  keeper.watch(row);
+  return { el: row, update: draw };
+}
+var keeper = /* @__PURE__ */ (() => {
+  const memos = /* @__PURE__ */ new WeakMap();
+  const restoringNow = /* @__PURE__ */ new WeakSet();
+  const redrawn = /* @__PURE__ */ new WeakMap();
+  const put = (row) => {
+    const memo = memos.get(row);
+    if (!memo) return;
+    const doc = row.ownerDocument;
+    const active2 = doc.activeElement;
+    if (!row.isConnected || !memo.field.isConnected || !row.contains(memo.field)) return;
+    if (active2 && active2 !== doc.body && !row.contains(active2)) {
+      memos.delete(row);
+      return;
+    }
+    if (active2 === memo.field && memo.field.matches(":focus")) return;
+    restoringNow.add(memo.field);
+    try {
+      memo.field.focus({ preventScroll: true });
+      if (!(memo.field instanceof HTMLSelectElement) && memo.start !== null) memo.field.setSelectionRange(memo.start, memo.end ?? memo.start);
+    } finally {
+      restoringNow.delete(memo.field);
+    }
+  };
+  return {
+    watch(row) {
+      const note = (e) => {
+        const t = e.target;
+        if (!(t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement || t instanceof HTMLSelectElement)) return;
+        const text = !(t instanceof HTMLSelectElement);
+        memos.set(row, { field: t, start: text ? t.selectionStart : null, end: text ? t.selectionEnd : null });
+      };
+      row.addEventListener("focusin", note);
+      row.addEventListener("input", note);
+      row.addEventListener("keyup", note);
+      row.addEventListener("mouseup", note);
+      row.addEventListener("focusout", (e) => {
+        const at = performance.now();
+        const late = e.relatedTarget === null && at - (redrawn.get(row) ?? -Infinity) < 250;
+        if (late && memos.has(row)) {
+          queueMicrotask(() => put(row));
+          return;
+        }
+        queueMicrotask(() => {
+          if ((redrawn.get(row) ?? -Infinity) >= at) {
+            put(row);
+            return;
+          }
+          if (row.isConnected && !row.contains(row.ownerDocument.activeElement)) memos.delete(row);
+        });
+      });
+    },
+    /** Give the focus back to the row, if the author was in it and has not gone anywhere else since. */
+    restore(row) {
+      if (!memos.has(row)) return;
+      redrawn.set(row, performance.now());
+      queueMicrotask(() => put(row));
+    },
+    restoring: (field) => restoringNow.has(field),
+    /** Forget the row's focus if the author has since gone somewhere else (before the row is redrawn). */
+    settle(row) {
+      const active2 = row.ownerDocument.activeElement;
+      if (active2 && active2 !== row.ownerDocument.body && !row.contains(active2)) memos.delete(row);
+    },
+    /** The row the author is in (before a redraw takes it out). */
+    holds: (row) => memos.has(row)
+  };
+})();
+var fieldRowFocus = {
+  settle: (row) => keeper.settle(row),
+  restore: (row) => keeper.restore(row)
+};
+
+// src/value-rows.ts
+var SCALARS = /* @__PURE__ */ new Set(["text", "multiline", "number", "boolean", "enum", "flags", "quality", "string"]);
+var isObject = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
+var nameOf = (decl) => decl.label ?? decl.name;
+var asDecl = (d, name) => ({ ...d, name: d.name ?? name });
+function ownProblems(decl, value, adapter) {
+  if (value === void 0) return "";
+  const exists = adapter ? (kind, id) => adapter.nodes(kind).some((n) => n.id === id) : void 0;
+  return extensions.valueProblems(decl, value, exists ? { exists } : {}).filter((p) => p.path === "" && p.severity === "error" && p.code !== "not-a-value" && p.code !== "not-a-stage").map((p) => `${p.message.replace(/^the value/, "The value")}.`).join(" ");
+}
+function valueRow(initial) {
+  const decl = initial.decl;
+  if (SCALARS.has(decl.type)) return scalarRow(initial);
+  if (decl.type === "reference") return referenceRow(initial);
+  return structuredRow(initial);
+}
+function scalarRow(initial) {
+  const map = (o) => {
+    const range = ownProblems(o.decl, o.value, o.adapter);
+    const problem = [range, o.problem ?? ""].filter((w) => w !== "").join(" ");
+    return {
+      decl: { ...o.decl, ...o.decl.help !== void 0 && o.decl.purpose === void 0 ? { purpose: o.decl.help } : {} },
+      value: o.value,
+      ...o.onCommit ? { onCommit: (v) => o.onCommit(v) } : {},
+      ...o.disabled !== void 0 ? { disabled: o.disabled } : {},
+      ...problem !== "" ? { problem } : {},
+      label: o.label ?? nameOf(o.decl),
+      ...o.className !== void 0 ? { className: o.className } : {},
+      ...o.labelClassName !== void 0 ? { labelClassName: o.labelClassName } : {},
+      ...o.controlClassName !== void 0 ? { controlClassName: o.controlClassName } : {}
+    };
+  };
+  const handle = fieldRow(map(initial));
+  return { el: handle.el, update: (o) => handle.update(map(o)) };
+}
+function referenceRow(initial) {
+  let opts = initial;
+  if (!opts.adapter) {
+    const inner = scalarRow({ ...opts, decl: { ...opts.decl, type: "text" } });
+    return { el: inner.el, update: (o) => {
+      opts = o;
+      inner.update({ ...o, decl: { ...o.decl, type: "text" } });
+    } };
+  }
+  const row = el("div", "shell-fieldrow shell-valuerow-ref");
+  const caption = el("span", "shell-fieldrow-label");
+  const body = el("div", "shell-fieldrow-body");
+  const sel = el("select", "field shell-fieldrow-select");
+  const help = el("p", "shell-fieldrow-purpose");
+  const problem = el("p", "shell-fieldrow-problem");
+  problem.setAttribute("role", "status");
+  body.append(sel, help, problem);
+  row.append(caption, body);
+  sel.addEventListener("change", () => {
+    const v = sel.value === "" ? void 0 : sel.value;
+    opts = { ...opts, value: v };
+    draw(opts);
+    opts.onCommit?.(v);
+  });
+  const draw = (o) => {
+    opts = o;
+    row.className = `shell-fieldrow shell-valuerow-ref${o.className ? ` ${o.className}` : ""}`;
+    const label = o.label ?? nameOf(o.decl);
+    if (typeof label === "string") caption.textContent = label;
+    else caption.replaceChildren(label);
+    if (o.controlClassName) sel.className = `shell-fieldrow-select ${o.controlClassName}`;
+    const nodes = o.adapter.nodes(o.decl.to ?? "");
+    const held = typeof o.value === "string" ? o.value : "";
+    sel.replaceChildren();
+    const add = (v, text) => {
+      const opt = el("option", void 0, text);
+      opt.value = v;
+      sel.append(opt);
+    };
+    add("", "default (none)");
+    for (const n of nodes) add(n.id, n.label);
+    if (held !== "" && !nodes.some((n) => n.id === held)) add(held, `${held} (gone)`);
+    sel.value = held;
+    sel.disabled = o.onCommit === void 0 || o.disabled === true;
+    help.textContent = o.decl.help ?? o.decl.purpose ?? "";
+    help.hidden = help.textContent === "";
+    const words = [ownProblems(o.decl, o.value, o.adapter), o.problem ?? ""].filter((w) => w !== "").join(" ");
+    problem.textContent = words;
+    problem.hidden = words === "";
+    row.classList.toggle("has-problem", words !== "");
+  };
+  draw(initial);
+  return { el: row, update: draw };
+}
+function structuredRow(initial) {
+  let opts = initial;
+  const row = el("div", "shell-fieldrow shell-valuerow");
+  const caption = el("span", "shell-fieldrow-label");
+  const body = el("div", "shell-fieldrow-body shell-valuerow-parts");
+  const help = el("p", "shell-fieldrow-purpose");
+  const problem = el("p", "shell-fieldrow-problem");
+  problem.setAttribute("role", "status");
+  const adder = el("div", "shell-valuerow-add");
+  row.append(caption, body);
+  const parts = /* @__PURE__ */ new Map();
+  let kept = [];
+  let addKey = "";
+  const editable = () => opts.onCommit !== void 0 && opts.disabled !== true;
+  const commit = (v) => {
+    opts = { ...opts, value: v };
+    draw(opts);
+    opts.onCommit?.(v);
+  };
+  const part = (key, o, controls = []) => {
+    const had = parts.get(key);
+    if (had && had.handle.el.dataset["type"] === o.decl.type) {
+      fieldRowFocus.settle(had.handle.el);
+      had.handle.update(o);
+      had.tools.replaceChildren(...controls);
+      kept.push(had.handle.el);
+      return had.holder;
+    }
+    const handle = valueRow(o);
+    handle.el.dataset["type"] = o.decl.type;
+    const holder = el("div", "shell-valuerow-part");
+    const tools = el("span", "shell-valuerow-controls");
+    tools.append(...controls);
+    holder.append(handle.el, tools);
+    parts.set(key, { key, handle, holder, tools });
+    return holder;
+  };
+  const draw = (o) => {
+    opts = o;
+    kept = [];
+    const decl = o.decl;
+    row.className = `shell-fieldrow shell-valuerow shell-valuerow-${decl.type}${o.className ? ` ${o.className}` : ""}`;
+    const label = o.label ?? nameOf(decl);
+    if (typeof label === "string") caption.textContent = label;
+    else caption.replaceChildren(label);
+    const used = /* @__PURE__ */ new Set();
+    const rows = [];
+    const child = (key, childDecl, value, onCommit, controls, childLabel, extraProblem) => {
+      used.add(key);
+      rows.push(part(key, {
+        decl: childDecl,
+        value,
+        ...editable() ? { onCommit } : {},
+        ...o.adapter ? { adapter: o.adapter } : {},
+        ...o.disabled !== void 0 ? { disabled: o.disabled } : {},
+        ...childLabel !== void 0 ? { label: childLabel } : {},
+        ...extraProblem ? { problem: extraProblem } : {},
+        ...o.controlClassName !== void 0 ? { controlClassName: o.controlClassName } : {}
+      }, controls));
+    };
+    if (decl.type === "record") {
+      const value = isObject(o.value) ? o.value : void 0;
+      const required = value === void 0 ? [] : extensions.valueProblems(decl, value).filter((p) => p.code === "required");
+      for (const f of decl.fields ?? []) {
+        const missing = required.find((p) => p.path === f.name);
+        child(`f:${f.name}`, f, value?.[f.name], (v) => {
+          const next = { ...isObject(opts.value) ? opts.value : {} };
+          if (v === void 0) delete next[f.name];
+          else next[f.name] = v;
+          commit(Object.keys(next).length > 0 ? next : void 0);
+        }, void 0, void 0, missing ? "Required." : void 0);
+      }
+    } else if (decl.type === "map" && decl.of) {
+      const value = isObject(o.value) ? o.value : {};
+      const keyNodes = decl.key?.type === "reference" && o.adapter ? o.adapter.nodes(decl.key.to ?? "") : void 0;
+      const keyLabel = (k) => keyNodes?.find((n) => n.id === k)?.label ?? k;
+      for (const k of Object.keys(value)) {
+        const remove = editable() ? [iconBtn("close", `Remove ${keyLabel(k)}`, () => {
+          const next = { ...isObject(opts.value) ? opts.value : {} };
+          delete next[k];
+          commit(Object.keys(next).length > 0 ? next : void 0);
+        })] : [];
+        const gone = keyNodes !== void 0 && !keyNodes.some((n) => n.id === k) ? `${keyLabel(k)} is not here any more.` : void 0;
+        child(`k:${k}`, asDecl(decl.of, k), value[k], (v) => {
+          const next = { ...isObject(opts.value) ? opts.value : {} };
+          next[k] = v === void 0 ? extensions.defaultOf(decl.of) : v;
+          commit(next);
+        }, remove, keyLabel(k), gone);
+      }
+      adder.replaceChildren();
+      if (editable()) {
+        const add = (k) => {
+          if (k === "" || Object.prototype.hasOwnProperty.call(value, k)) return;
+          commit({ ...value, [k]: extensions.defaultOf(decl.of) });
+        };
+        if (keyNodes !== void 0) {
+          const pick = el("select", "field shell-valuerow-key");
+          const first = el("option", void 0, "Add...");
+          first.value = "";
+          pick.append(first);
+          for (const n of keyNodes.filter((n2) => !Object.prototype.hasOwnProperty.call(value, n2.id))) {
+            const opt = el("option", void 0, n.label);
+            opt.value = n.id;
+            pick.append(opt);
+          }
+          pick.addEventListener("change", () => add(pick.value));
+          adder.append(pick);
+        } else {
+          const input = el("input", "field shell-valuerow-key");
+          input.type = "text";
+          input.placeholder = "New key";
+          input.value = addKey;
+          input.addEventListener("input", () => {
+            addKey = input.value;
+          });
+          const go = () => {
+            const k = input.value.trim();
+            addKey = "";
+            add(k);
+          };
+          input.addEventListener("keydown", (e) => {
+            if (e.key === "Enter") go();
+          });
+          adder.append(input, iconBtn("add", "Add", go));
+        }
+      }
+    } else if (decl.type === "list" && decl.of) {
+      const value = Array.isArray(o.value) ? o.value : [];
+      const idOf = (item, i) => decl.id !== void 0 && isObject(item) && typeof item[decl.id] === "string" ? `id:${item[decl.id]}` : `i:${i}`;
+      value.forEach((item, i) => {
+        const set = (next) => commit(next.length > 0 ? next : void 0);
+        const controls = editable() ? [
+          iconBtn("up", "Move up", () => {
+            const next = [...value];
+            if (moveItem(next, i, -1)) set(next);
+          }, i === 0),
+          iconBtn("down", "Move down", () => {
+            const next = [...value];
+            if (moveItem(next, i, 1)) set(next);
+          }, i === value.length - 1),
+          iconBtn("close", "Remove", () => set(value.filter((_, j) => j !== i)), false, true)
+        ] : [];
+        const itemLabel = decl.id !== void 0 && isObject(item) && typeof item[decl.id] === "string" ? item[decl.id] : `${i + 1}`;
+        child(idOf(item, i), asDecl(decl.of, itemLabel), item, (v) => {
+          const next = [...Array.isArray(opts.value) ? opts.value : []];
+          next[i] = v === void 0 ? extensions.defaultOf(decl.of) : v;
+          set(next);
+        }, controls, itemLabel);
+      });
+      adder.replaceChildren();
+      if (editable()) {
+        adder.append(iconBtn("add", "Add", () => {
+          const fresh = extensions.defaultOf(decl.of);
+          if (decl.id !== void 0 && isObject(fresh)) {
+            const taken = new Set(value.map((x) => isObject(x) ? x[decl.id] : void 0));
+            let n = value.length + 1;
+            while (taken.has(`item-${n}`)) n++;
+            fresh[decl.id] = `item-${n}`;
+          }
+          commit([...value, fresh]);
+        }));
+      }
+    }
+    for (const key of [...parts.keys()]) if (!used.has(key)) parts.delete(key);
+    body.replaceChildren(...rows);
+    if (decl.type !== "record" && editable()) body.append(adder);
+    help.textContent = decl.help ?? decl.purpose ?? "";
+    if (help.textContent !== "") body.append(help);
+    const words = [ownProblems(decl, o.value, o.adapter), o.problem ?? ""].filter((w) => w !== "").join(" ");
+    problem.textContent = words;
+    problem.hidden = words === "";
+    body.append(problem);
+    row.classList.toggle("has-problem", words !== "");
+    for (const k of kept) fieldRowFocus.restore(k);
+  };
+  draw(initial);
+  return { el: row, update: draw };
+}
+function valueRows() {
+  const rows = /* @__PURE__ */ new Map();
+  return {
+    row(key, opts) {
+      const had = rows.get(key);
+      if (had && had.type === opts.decl.type) {
+        had.used = true;
+        fieldRowFocus.settle(had.handle.el);
+        had.handle.update(opts);
+        fieldRowFocus.restore(had.handle.el);
+        return had.handle.el;
+      }
+      const handle = valueRow(opts);
+      rows.set(key, { handle, type: opts.decl.type, used: true });
+      return handle.el;
+    },
+    sweep() {
+      for (const [key, entry] of rows) {
+        if (!entry.used) rows.delete(key);
+        else entry.used = false;
+      }
+    }
+  };
+}
+
+exports.valueRow = valueRow;
+exports.valueRows = valueRows;
+//# sourceMappingURL=value-rows.cjs.map
+//# sourceMappingURL=value-rows.cjs.map