@wildwinter/app-shell 0.30.0 → 0.32.0

package/dist/index.cjs

@@ -180,8 +180,13 @@ function iconBtn(glyph, title, onClick, disabled = false, danger = false) {
   return b;
 }
 function labelled(label2, control) {
-  const w = el("label", "shell-labelled");
+  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", label2), 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) {
@@ -892,6 +897,7 @@ function isCaseOnlyPropertyName(name) {
 }
 
 // src/property-name-field.ts
+var refSyncs = /* @__PURE__ */ new WeakMap();
 function propertyNameProblem(name) {
   if (isValidPropertyName(name)) return void 0;
   const suggestion = propertyNameify(name);
@@ -938,6 +944,96 @@ function bindPropertyName(input, onCommit, opts = {}) {
 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 `Cannot be used: "${folded}" is a keyword in expressions.${tail}`;
+    if (name.includes("-")) return `Cannot be used: a hyphen reads as subtraction in an expression.${tail}`;
+    if (/^[0-9]/.test(name)) return `Cannot be used: a name cannot start with a digit.${tail}`;
+    return `Cannot 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}". Declared: ${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("Cannot 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/id-editor.ts
 function openGameIdEditor(opts) {
@@ -1611,6 +1707,7 @@ exports.PROPERTY_NAME_HINT = PROPERTY_NAME_HINT;
 exports.RESERVED_PROPERTY_NAMES = RESERVED_PROPERTY_NAMES;
 exports.askIdentity = askIdentity;
 exports.bindPropertyName = bindPropertyName;
+exports.bindPropertyRef = bindPropertyRef;
 exports.closeAnchoredPanel = closeAnchoredPanel;
 exports.closeWithExit = closeWithExit;
 exports.colourFor = colourFor;
@@ -1648,7 +1745,9 @@ exports.pinButton = pinButton;
 exports.placeAnchored = placeAnchored;
 exports.propertyNameProblem = propertyNameProblem;
 exports.propertyNameify = propertyNameify;
+exports.propertyRefProblem = propertyRefProblem;
 exports.renderStepperBar = renderStepperBar;
+exports.revalidatePropertyRefs = revalidatePropertyRefs;
 exports.saveIndicator = saveIndicator;
 exports.showAbout = showAbout;
 exports.staleBar = staleBar;