@wildwinter/app-shell 0.37.0 → 0.39.0

package/dist/property-list.cjs

@@ -0,0 +1,784 @@
+'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/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,
+  // --- 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"/>'),
+  /** 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 labelled(label, control) {
+  const target = control.matches("input, select, textarea") ? control : control.querySelector("input:not([type=button]):not([type=submit]), select, textarea");
+  const w = el(target ? "label" : "div", "shell-labelled");
+  w.append(el("span", "shell-fieldcap", label), control);
+  if (target) {
+    if (!target.id) target.id = `shell-f-${Math.random().toString(36).slice(2, 9)}`;
+    w.htmlFor = target.id;
+  }
+  return w;
+}
+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;
+}
+function stageChips(holder, onChange) {
+  const wrap = el("div", "shell-tags shell-stages");
+  const input = el("input", "shell-tag-input");
+  input.type = "text";
+  input.placeholder = "Add stage";
+  input.spellcheck = false;
+  const control = (name, tip2, disabled, onClick) => {
+    const b = el("button", "shell-tag-x shell-tag-move", iconNode(name, CHIP_ICON));
+    b.type = "button";
+    b.dataset["tip"] = tip2;
+    b.setAttribute("aria-label", tip2);
+    b.disabled = disabled;
+    b.addEventListener("click", onClick);
+    return b;
+  };
+  const rebuild = () => {
+    for (const c of Array.from(wrap.children)) if (c !== input) c.remove();
+    const stages = holder.stages ?? [];
+    stages.forEach((v, i) => {
+      const chip = el("span", "shell-tag", `${i + 1}. ${v}`);
+      chip.dataset["stage"] = v;
+      chip.append(
+        control(
+          "back",
+          `Move ${v} earlier`,
+          i === 0,
+          () => {
+            if (moveItem(stages, i, -1)) {
+              rebuild();
+              onChange?.();
+            }
+          }
+        ),
+        control(
+          "forward",
+          `Move ${v} later`,
+          i === stages.length - 1,
+          () => {
+            if (moveItem(stages, i, 1)) {
+              rebuild();
+              onChange?.();
+            }
+          }
+        )
+      );
+      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.stages = (holder.stages ?? []).filter((o) => o !== v);
+        rebuild();
+        onChange?.();
+      });
+      chip.append(x);
+      wrap.insertBefore(chip, input);
+    });
+  };
+  const commit = () => {
+    const v = input.value.trim();
+    if (v && !(holder.stages ?? []).includes(v)) {
+      (holder.stages ??= []).push(v);
+      rebuild();
+      onChange?.();
+    }
+    input.value = "";
+  };
+  input.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" || e.key === ",") {
+      e.preventDefault();
+      commit();
+    }
+  });
+  input.addEventListener("blur", commit);
+  wrap.append(input);
+  rebuild();
+  return wrap;
+}
+
+// src/settings.ts
+function expandableRow(opts) {
+  const row = el("div", "set-row");
+  if (opts.name !== void 0) row.dataset.name = opts.name;
+  const line = el("div", "set-rowline");
+  if (opts.details && opts.details.length) {
+    const details = el("div", "set-details");
+    details.hidden = true;
+    for (const d of opts.details) details.append(d);
+    const toggle = el("button", "set-expand");
+    toggle.type = "button";
+    toggle.dataset.tip = "More";
+    toggle.setAttribute("aria-label", "More");
+    toggle.setAttribute("aria-expanded", "false");
+    toggle.addEventListener("click", () => {
+      const open = details.hidden;
+      details.hidden = !open;
+      toggle.setAttribute("aria-expanded", String(open));
+      toggle.classList.toggle("open", open);
+    });
+    line.append(toggle);
+    opts.line.forEach((c) => line.append(c));
+    row.append(line, details);
+  } else {
+    opts.line.forEach((c) => line.append(c));
+    row.append(line);
+  }
+  return row;
+}
+function focusNewRow(listEl) {
+  const last = listEl?.lastElementChild;
+  if (!(last instanceof HTMLElement)) return;
+  last.scrollIntoView({ block: "nearest" });
+  const name = last.querySelector("input.set-name") ?? last.querySelector("input");
+  name?.focus();
+}
+var DUP_MESSAGE = "Another row already has this name.";
+function dupGuard() {
+  const items = [];
+  const check = () => {
+    const counts = /* @__PURE__ */ new Map();
+    for (const it of items) {
+      const k = it.key().trim().toLowerCase();
+      if (k) counts.set(k, (counts.get(k) ?? 0) + 1);
+    }
+    let any = false;
+    for (const it of items) {
+      const k = it.key().trim().toLowerCase();
+      const dup = !!k && (counts.get(k) ?? 0) > 1;
+      it.input.classList.toggle("invalid", dup);
+      if (dup) {
+        it.input.dataset["tip"] = DUP_MESSAGE;
+        any = true;
+      } else if (it.input.dataset["tip"] === DUP_MESSAGE) delete it.input.dataset["tip"];
+    }
+    return any;
+  };
+  return {
+    reset() {
+      items.length = 0;
+    },
+    track(input, key = () => input.value, also) {
+      items.push({ input, key });
+      input.addEventListener("input", check);
+      for (const a of also ?? []) a.addEventListener("input", check);
+    },
+    check,
+    firstDuplicate() {
+      check();
+      return items.find((it) => it.input.classList.contains("invalid"))?.input ?? null;
+    }
+  };
+}
+
+// src/property-names.ts
+var RESERVED_PROPERTY_NAMES = ["true", "false", "and", "or", "not"];
+var PROPERTY_NAME_HINT = "Lower case letters, digits, and underscores. It can't start with a digit. No hyphens or spaces.";
+function propertyNameify(text) {
+  const trimmed = text.trim();
+  const deliberateLeading = trimmed.startsWith("_");
+  let out = trimmed.toLowerCase().replace(/['’]/g, "").replace(/[^a-z0-9_]+/g, "_").replace(/_+/g, "_").replace(/^_+|_+$/g, "");
+  if (out === "") return "";
+  if (deliberateLeading || /^[0-9]/.test(out)) out = `_${out}`;
+  if (RESERVED_PROPERTY_NAMES.includes(out)) out = `${out}_`;
+  return out;
+}
+function isValidPropertyName(name) {
+  return /^[a-z_][a-z0-9_]*$/.test(name) && !RESERVED_PROPERTY_NAMES.includes(name);
+}
+
+// src/property-name-field.ts
+function propertyNameProblem(name) {
+  if (isValidPropertyName(name)) return void 0;
+  const suggestion = propertyNameify(name);
+  const tail = suggestion ? ` Try "${suggestion}", or press Tab.` : "";
+  if (RESERVED_PROPERTY_NAMES.includes(name.toLowerCase())) {
+    return `Can't be used. "${name.toLowerCase()}" is a keyword in expressions.${tail}`;
+  }
+  if (name.includes("-")) return `Can't be used. A hyphen reads as subtraction in an expression.${tail}`;
+  if (/^[0-9]/.test(name)) return `Can't be used. A name can't start with a digit.${tail}`;
+  if (name !== name.toLowerCase()) {
+    return `Can't be used. Expressions fold names, so this would look for "${name.toLowerCase()}".${tail}`;
+  }
+  return `Can't be used. Only lower case letters, digits, and underscores.${tail}`;
+}
+function bindPropertyName(input, onCommit, opts = {}) {
+  const hint = opts.hint;
+  const sync = () => {
+    const v = input.value.trim();
+    const problem = v === "" ? void 0 : propertyNameProblem(v);
+    input.classList.toggle("illegal", !!problem);
+    if (problem) input.title = problem;
+    else if (input.title.startsWith("Can't be used")) {
+      if (hint) input.title = hint;
+      else input.removeAttribute("title");
+    }
+  };
+  input.addEventListener("input", () => {
+    onCommit(input.value);
+    sync();
+  });
+  input.addEventListener("keydown", (e) => {
+    if (e.key !== "Tab" || e.shiftKey) return;
+    const typed = input.value.trim();
+    if (typed === "" || isValidPropertyName(typed)) return;
+    const coerced = propertyNameify(typed);
+    if (!coerced || coerced === input.value) return;
+    e.preventDefault();
+    input.value = coerced;
+    onCommit(coerced);
+    sync();
+  });
+  sync();
+}
+function firstIllegalPropertyName(host) {
+  return host.querySelector("input.illegal");
+}
+
+// src/property-list.ts
+var PROPERTY_TYPES = [
+  ["number", "Number"],
+  ["boolean", "True / False"],
+  ["string", "Text"],
+  ["enum", "List"],
+  ["flags", "Flags"],
+  ["quality", "Quality"]
+];
+var option = (value, label, selected) => {
+  const o = el("option", void 0, label);
+  o.value = value;
+  o.selected = selected;
+  return o;
+};
+var NONE = "(none)";
+function defaultControl(p, onChange, opts = {}) {
+  const typed = opts.typed === true;
+  const write = (raw) => {
+    if (raw === "") {
+      if (typed) delete p.default;
+      else p.default = "";
+    } else if (typed && p.type === "boolean") p.default = raw === "true";
+    else if (typed && p.type === "number") p.default = Number(raw);
+    else p.default = raw;
+    onChange?.();
+  };
+  const current = p.default === void 0 || p.default === null ? "" : String(p.default);
+  if (p.type === "boolean") {
+    const sel = el("select", "field set-default");
+    sel.append(option("", NONE, current === ""), option("true", "True", current === "true"), option("false", "False", current === "false"));
+    sel.addEventListener("change", () => write(sel.value));
+    return sel;
+  }
+  if (p.type === "enum") {
+    const sel = el("select", "field set-default");
+    sel.append(option("", NONE, current === ""));
+    for (const v of p.values ?? []) sel.append(option(v, v, current === v));
+    sel.addEventListener("change", () => write(sel.value));
+    return sel;
+  }
+  if (p.type === "quality") {
+    const sel = el("select", "field set-default");
+    sel.append(option("", "(first stage)", current === ""));
+    for (const v of p.stages ?? []) sel.append(option(v, v, current === v));
+    sel.addEventListener("change", () => write(sel.value));
+    return sel;
+  }
+  if (p.type === "flags") {
+    const s = el("span", "set-flagnote", "Starts empty");
+    s.dataset["tip"] = "A flags property starts with none set.";
+    return s;
+  }
+  const input = el("input", "field set-default");
+  input.type = p.type === "number" ? "number" : "text";
+  input.placeholder = "Default";
+  input.value = current;
+  input.addEventListener("input", () => write(input.value));
+  return input;
+}
+function mountPropertyList(host, decls, opts = {}) {
+  const changed = () => opts.onChange?.();
+  const guard = dupGuard();
+  const types = opts.types ?? PROPERTY_TYPES;
+  const list = el("div", "set-list");
+  const keep = (parts) => (parts ?? []).filter((p) => p !== null);
+  const row = (p, i) => {
+    const name = el("input", "field set-name");
+    name.type = "text";
+    name.placeholder = "Property name";
+    name.value = p.name;
+    name.spellcheck = false;
+    name.dataset["tip"] = PROPERTY_NAME_HINT;
+    bindPropertyName(name, (v) => {
+      p.name = v;
+      changed();
+    }, { hint: PROPERTY_NAME_HINT });
+    guard.track(name);
+    const type = el("select", "field set-type");
+    for (const [v, label] of types) type.append(option(v, label, v === p.type));
+    type.addEventListener("change", () => {
+      p.type = type.value;
+      if (opts.typed) delete p.default;
+      else p.default = "";
+      if (p.type === "enum" || p.type === "flags") p.values ??= [];
+      else delete p.values;
+      if (p.type === "quality") p.stages ??= [];
+      else delete p.stages;
+      render();
+      changed();
+    });
+    let def = defaultControl(p, changed, opts);
+    const refreshDefault = () => {
+      const fresh = defaultControl(p, changed, opts);
+      def.replaceWith(fresh);
+      def = fresh;
+      changed();
+    };
+    const up = iconBtn("up", "Move up", () => {
+      if (moveItem(decls, i, -1)) {
+        render();
+        changed();
+      }
+    }, i === 0);
+    const down = iconBtn("down", "Move down", () => {
+      if (moveItem(decls, i, 1)) {
+        render();
+        changed();
+      }
+    }, i === decls.length - 1);
+    const del = iconBtn("close", "Delete property", () => {
+      decls.splice(i, 1);
+      render();
+      changed();
+    }, false, true);
+    const details = keep(opts.extraDetails?.(p, i));
+    if (p.type === "enum" || p.type === "flags") details.push(labelled("Values", tagChips(p, refreshDefault)));
+    if (p.type === "quality") details.push(labelled("Stages (in order)", stageChips(p, refreshDefault)));
+    if (opts.purpose !== false) {
+      const purpose = el("input", "field set-purpose");
+      purpose.type = "text";
+      purpose.placeholder = "What this property is for";
+      purpose.value = p.purpose ?? "";
+      purpose.addEventListener("input", () => {
+        if (purpose.value.trim()) p.purpose = purpose.value;
+        else delete p.purpose;
+        changed();
+      });
+      details.push(labelled("Purpose", purpose));
+    }
+    return expandableRow({ line: [name, type, def, ...keep(opts.extraLine?.(p, i)), up, down, del], details, name: p.name });
+  };
+  const render = () => {
+    guard.reset();
+    list.replaceChildren();
+    if (decls.length === 0) list.append(el("p", "empty", opts.emptyText ?? "No properties yet."));
+    else decls.forEach((p, i) => list.append(row(p, i)));
+    guard.check();
+  };
+  render();
+  const add = el("button", "btn set-add", opts.addLabel ?? "+ Add property");
+  add.type = "button";
+  add.addEventListener("click", () => {
+    decls.push(opts.newDecl ? opts.newDecl() : { name: "", type: types[0]?.[0] ?? "string", ...opts.typed ? {} : { default: "" } });
+    render();
+    changed();
+    focusNewRow(list);
+  });
+  host.append(list, add);
+  return {
+    firstDuplicate: () => guard.firstDuplicate(),
+    firstIllegalName: () => firstIllegalPropertyName(host),
+    // The Save gate takes both faults; the field's own rollover says which.
+    firstInvalid: () => guard.firstDuplicate() ?? firstIllegalPropertyName(host),
+    render
+  };
+}
+
+exports.PROPERTY_TYPES = PROPERTY_TYPES;
+exports.defaultControl = defaultControl;
+exports.mountPropertyList = mountPropertyList;
+//# sourceMappingURL=property-list.cjs.map
+//# sourceMappingURL=property-list.cjs.map