@wildwinter/app-shell 0.29.0 → 0.30.0

package/dist/index.cjs

@@ -891,6 +891,54 @@ function isCaseOnlyPropertyName(name) {
   return !isValidPropertyName(name) && isValidPropertyName(name.toLowerCase());
 }
 
+// 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 `Cannot be used: "${name.toLowerCase()}" 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}`;
+  if (name !== name.toLowerCase()) {
+    return `Cannot be used: expressions fold names, so this would look for "${name.toLowerCase()}".${tail}`;
+  }
+  return `Cannot 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("Cannot 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/id-editor.ts
 function openGameIdEditor(opts) {
   const slugify = opts.slugify ?? gameIdify;
@@ -1562,6 +1610,7 @@ exports.PANE_MENU = PANE_MENU;
 exports.PROPERTY_NAME_HINT = PROPERTY_NAME_HINT;
 exports.RESERVED_PROPERTY_NAMES = RESERVED_PROPERTY_NAMES;
 exports.askIdentity = askIdentity;
+exports.bindPropertyName = bindPropertyName;
 exports.closeAnchoredPanel = closeAnchoredPanel;
 exports.closeWithExit = closeWithExit;
 exports.colourFor = colourFor;
@@ -1571,6 +1620,7 @@ exports.createSaveController = createSaveController;
 exports.dupGuard = dupGuard;
 exports.el = el;
 exports.expandableRow = expandableRow;
+exports.firstIllegalPropertyName = firstIllegalPropertyName;
 exports.focusNewRow = focusNewRow;
 exports.foldVc = foldVc;
 exports.gameIdify = gameIdify;
@@ -1596,6 +1646,7 @@ exports.openNotesEditor = openNotesEditor;
 exports.paintVcBadges = paintVcBadges;
 exports.pinButton = pinButton;
 exports.placeAnchored = placeAnchored;
+exports.propertyNameProblem = propertyNameProblem;
 exports.propertyNameify = propertyNameify;
 exports.renderStepperBar = renderStepperBar;
 exports.saveIndicator = saveIndicator;