@wildwinter/app-shell 0.38.0 → 0.40.0

package/dist/chunk-R3NXPHRZ.js

@@ -0,0 +1,534 @@
+import { el, iconBtn, moveItem, labelled, tagChips, stageChips } from './chunk-UG2P777F.js';
+
+// 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 revealRow(within, name) {
+  const row = [...within.querySelectorAll(".set-row")].find((r) => r.dataset.name === name);
+  if (!row) return false;
+  const toggle = row.querySelector(".set-rowline > .set-expand");
+  if (toggle && toggle.getAttribute("aria-expanded") !== "true") toggle.click();
+  const still = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+  row.scrollIntoView({ block: "center", behavior: still ? "auto" : "smooth" });
+  row.classList.remove("landed");
+  void row.offsetWidth;
+  row.classList.add("landed");
+  row.addEventListener("animationend", () => row.classList.remove("landed"), { once: true });
+  return true;
+}
+function revealRowWhenReady(within, name, tries = 12) {
+  return new Promise((resolve) => {
+    const attempt = (left) => {
+      if (revealRow(within, name)) {
+        resolve(true);
+        return;
+      }
+      if (left <= 0) {
+        resolve(false);
+        return;
+      }
+      requestAnimationFrame(() => attempt(left - 1));
+    };
+    attempt(tries);
+  });
+}
+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;
+    }
+  };
+}
+function mountSettingsDialog(opts) {
+  const dialog = el("dialog", "settings-dialog");
+  const form = el("form", "settings-form");
+  form.method = "dialog";
+  const tabs = el("nav", "settings-tabs");
+  const panels = el("div", "settings-panels");
+  const error = el("p", "settings-error");
+  error.hidden = true;
+  const cancel = el("button", "settings-cancel", "Cancel");
+  cancel.type = "button";
+  cancel.value = "cancel";
+  const save = el("button", "settings-save primary", "Save");
+  save.value = "save";
+  const panelFor = /* @__PURE__ */ new Map();
+  const tabFor = /* @__PURE__ */ new Map();
+  const handles = /* @__PURE__ */ new Map();
+  let active = opts.sections[0]?.id ?? "";
+  let lastGroup;
+  for (const s of opts.sections) {
+    if (s.group && s.group !== lastGroup) {
+      tabs.append(el("div", "settings-group", s.group));
+      lastGroup = s.group;
+    }
+    const tab = el("button", "settings-tab", s.label);
+    tab.type = "button";
+    tab.dataset["tab"] = s.id;
+    tab.addEventListener("click", () => {
+      if (!tab.classList.contains("is-disabled")) showTab(s.id);
+    });
+    tabs.append(tab);
+    tabFor.set(s.id, tab);
+    const panel = el("section", "settings-panel");
+    panel.dataset["panel"] = s.id;
+    panel.hidden = true;
+    panels.append(panel);
+    panelFor.set(s.id, panel);
+  }
+  function showTab(id) {
+    active = id;
+    for (const [sid, t] of tabFor) t.classList.toggle("active", sid === id);
+    for (const [sid, p] of panelFor) p.hidden = sid !== id;
+  }
+  const usable = (s) => !tabFor.get(s.id)?.classList.contains("is-disabled");
+  function refreshTabs() {
+    for (const s of opts.sections) {
+      const tab = tabFor.get(s.id);
+      const reason = s.disabled?.() ?? null;
+      tab.classList.toggle("is-disabled", reason !== null);
+      if (reason !== null) {
+        tab.dataset["tip"] = reason;
+        tab.setAttribute("aria-disabled", "true");
+      } else {
+        delete tab.dataset["tip"];
+        tab.removeAttribute("aria-disabled");
+      }
+    }
+    if (!opts.sections.some((s) => s.id === active && usable(s))) {
+      const first = opts.sections.find(usable);
+      if (first) showTab(first.id);
+    }
+  }
+  form.append(
+    el("h2", "settings-title", opts.title),
+    el("div", "settings-body", tabs, panels),
+    el("div", "settings-actions", error, cancel, save)
+  );
+  dialog.append(form);
+  document.body.append(dialog);
+  form.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" && e.target?.tagName === "INPUT") e.preventDefault();
+  });
+  cancel.addEventListener("click", () => dialog.close("cancel"));
+  save.addEventListener("click", (e) => {
+    e.preventDefault();
+    error.hidden = true;
+    for (const s of opts.sections) {
+      const found = handles.get(s.id)?.firstInvalid?.();
+      if (!found) continue;
+      const bad = found instanceof HTMLElement ? found : found.el;
+      const message = (found instanceof HTMLElement ? void 0 : found.message) ?? bad.dataset["tip"];
+      showTab(s.id);
+      bad.focus();
+      error.textContent = message || "Fix the highlighted fields first.";
+      error.hidden = false;
+      return;
+    }
+    void (async () => {
+      await opts.onSave();
+      dialog.close("save");
+    })();
+  });
+  return {
+    open(tabId) {
+      handles.clear();
+      for (const s of opts.sections) {
+        const panel = panelFor.get(s.id);
+        panel.replaceChildren();
+        handles.set(s.id, s.mount(panel));
+      }
+      error.hidden = true;
+      showTab(tabId ?? active ?? opts.sections[0]?.id ?? "");
+      refreshTabs();
+      dialog.showModal();
+    },
+    refreshTabs,
+    destroy() {
+      dialog.remove();
+    }
+  };
+}
+
+// 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);
+}
+function isCaseOnlyPropertyName(name) {
+  return !isValidPropertyName(name) && isValidPropertyName(name.toLowerCase());
+}
+
+// src/property-name-field.ts
+var refSyncs = /* @__PURE__ */ new WeakMap();
+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");
+}
+function nearest(name, known) {
+  const n = name.toLowerCase();
+  const byPrefix = known.filter((k) => k.toLowerCase().startsWith(n) || n.startsWith(k.toLowerCase()));
+  if (byPrefix.length === 1) return byPrefix[0];
+  let best;
+  let bestScore = 3;
+  for (const k of known) {
+    const a = k.toLowerCase();
+    if (Math.abs(a.length - n.length) > 2) continue;
+    let prev = Array.from({ length: n.length + 1 }, (_, i) => i);
+    for (let i = 1; i <= a.length; i++) {
+      const row = [i];
+      for (let j = 1; j <= n.length; j++) {
+        row[j] = Math.min(prev[j] + 1, row[j - 1] + 1, prev[j - 1] + (a[i - 1] === n[j - 1] ? 0 : 1));
+      }
+      prev = row;
+    }
+    const d = prev[n.length];
+    if (d < bestScore) {
+      bestScore = d;
+      best = k;
+    }
+  }
+  return best;
+}
+function propertyRefProblem(name, opts) {
+  const scope = opts.scope ? `@${opts.scope}` : "that scope";
+  const folded = name.toLowerCase();
+  if (!isValidPropertyName(folded)) {
+    const suggestion = propertyNameify(name);
+    const tail = suggestion ? ` Try "${suggestion}", or press Tab.` : "";
+    if (RESERVED_PROPERTY_NAMES.includes(folded)) return `Can't be used. "${folded}" 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}`;
+    return `Can't be used. Only lower case letters, digits, and underscores.${tail}`;
+  }
+  const known = opts.known();
+  if (known.some((k) => k.toLowerCase() === folded)) return void 0;
+  const near = nearest(folded, known);
+  if (near) return `No ${scope} property is called "${name}". Did you mean "${near}"?`;
+  if (known.length === 0) return `No ${scope} properties are declared yet. Declare one above first.`;
+  const shown = known.slice(0, 3).map((k) => `"${k}"`).join(", ");
+  const more = known.length > 3 ? `, and ${known.length - 3} more` : "";
+  return `No ${scope} property is called "${name}". Pick one of ${shown}${more}.`;
+}
+function bindPropertyRef(input, onCommit, opts) {
+  const list = document.createElement("datalist");
+  list.id = `shell-propref-${Math.random().toString(36).slice(2, 9)}`;
+  input.setAttribute("list", list.id);
+  const attach = () => {
+    if (!list.isConnected && input.parentNode) input.after(list);
+  };
+  const sync = () => {
+    attach();
+    const known = opts.known();
+    list.replaceChildren(...known.map((k) => {
+      const o = document.createElement("option");
+      o.value = k;
+      return o;
+    }));
+    const v = input.value.trim();
+    const problem = v === "" ? void 0 : propertyRefProblem(v, opts);
+    input.classList.toggle("illegal", !!problem);
+    if (problem) input.title = problem;
+    else if (input.title.startsWith("Can't be used") || input.title.startsWith("No ")) {
+      if (opts.hint) input.title = opts.hint;
+      else input.removeAttribute("title");
+    }
+  };
+  refSyncs.set(input, sync);
+  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.toLowerCase())) return;
+    const coerced = propertyNameify(typed);
+    if (!coerced || coerced === input.value) return;
+    e.preventDefault();
+    input.value = coerced;
+    onCommit(coerced);
+    sync();
+  });
+  sync();
+}
+function revalidatePropertyRefs(host) {
+  for (const input of host.querySelectorAll("input")) refSyncs.get(input)?.();
+}
+
+// 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
+  };
+}
+
+export { PROPERTY_NAME_HINT, PROPERTY_TYPES, RESERVED_PROPERTY_NAMES, bindPropertyName, bindPropertyRef, defaultControl, dupGuard, expandableRow, firstIllegalPropertyName, focusNewRow, isCaseOnlyPropertyName, isValidPropertyName, mountPropertyList, mountSettingsDialog, propertyNameProblem, propertyNameify, propertyRefProblem, revalidatePropertyRefs, revealRow, revealRowWhenReady };
+//# sourceMappingURL=chunk-R3NXPHRZ.js.map
+//# sourceMappingURL=chunk-R3NXPHRZ.js.map