@wildwinter/app-shell 0.39.0 → 0.40.1

package/dist/index.cjs

@@ -403,18 +403,18 @@ function tagChips(holder, onChange) {
   input.placeholder = "Add value";
   input.spellcheck = false;
   const makeChip = (v) => {
-    const chip = el("span", "shell-tag", v);
+    const chip2 = 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();
+      chip2.remove();
       onChange?.();
     });
-    chip.append(x);
-    return chip;
+    chip2.append(x);
+    return chip2;
   };
   const commit = () => {
     const v = input.value.trim();
@@ -455,9 +455,9 @@ function stageChips(holder, onChange) {
     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(
+      const chip2 = el("span", "shell-tag", `${i + 1}. ${v}`);
+      chip2.dataset["stage"] = v;
+      chip2.append(
         control(
           "back",
           `Move ${v} earlier`,
@@ -490,8 +490,8 @@ function stageChips(holder, onChange) {
         rebuild();
         onChange?.();
       });
-      chip.append(x);
-      wrap.insertBefore(chip, input);
+      chip2.append(x);
+      wrap.insertBefore(chip2, input);
     });
   };
   const commit = () => {
@@ -550,6 +550,39 @@ function wireReorder(el2, id, axis, onMove) {
     if (reorderDragId && reorderDragId !== id) onMove(reorderDragId, before, id);
   });
 }
+function metaLine(parts) {
+  const row = el("span", "shell-meta");
+  for (const part of parts) {
+    if (part === null || part === void 0 || part === "") continue;
+    const seg = el("span", "shell-meta-part");
+    seg.append(part);
+    row.append(seg);
+  }
+  return row;
+}
+function breadcrumb(parts) {
+  const trail = el("nav", "shell-crumbs");
+  trail.setAttribute("aria-label", "Where this is");
+  parts.forEach((part, i) => {
+    const crumb = typeof part === "string" ? { label: part } : part;
+    const last = i === parts.length - 1;
+    if (i > 0) {
+      const sep = iconNode("forward", 12);
+      sep.classList.add("shell-crumb-sep");
+      trail.append(sep);
+    }
+    if (crumb.onClick && !last) {
+      const b = el("button", { className: "shell-crumb shell-crumb-link", text: crumb.label, onClick: crumb.onClick });
+      b.type = "button";
+      trail.append(b);
+    } else {
+      const s = el("span", "shell-crumb", crumb.label);
+      if (last) s.setAttribute("aria-current", "location");
+      trail.append(s);
+    }
+  });
+  return trail;
+}
 
 // src/colour.ts
 var PALETTE_SIZE = 12;
@@ -571,6 +604,149 @@ function colourFor(name) {
   return PALETTE[colourIndex(name)];
 }
 
+// src/keys.ts
+var override;
+function setKeyPlatform(platform) {
+  override = platform;
+}
+function keyPlatform() {
+  if (override) return override;
+  if (typeof navigator !== "undefined") {
+    const s = `${navigator.platform ?? ""} ${navigator.userAgent ?? ""}`;
+    if (/mac|iphone|ipad/i.test(s)) return "mac";
+    if (/win/i.test(s)) return "win";
+    if (s.trim()) return "linux";
+  }
+  const p = typeof process !== "undefined" ? process.platform : void 0;
+  return p === "darwin" ? "mac" : p === "win32" ? "win" : "linux";
+}
+var MAC_ORDER = ["ctrl", "alt", "shift", "mod"];
+var OTHER_ORDER = ["mod", "ctrl", "alt", "shift"];
+var MAC_MOD = { ctrl: "\u2303", alt: "\u2325", shift: "\u21E7", mod: "\u2318" };
+var OTHER_MOD = { ctrl: "Ctrl", alt: "Alt", shift: "Shift", mod: "Ctrl" };
+var MODIFIER_ALIASES = {
+  mod: "mod",
+  cmd: "mod",
+  command: "mod",
+  meta: "mod",
+  super: "mod",
+  ctrl: "ctrl",
+  control: "ctrl",
+  alt: "alt",
+  option: "alt",
+  opt: "alt",
+  shift: "shift"
+};
+var NAMED = {
+  enter: { mac: "\u21A9", other: "Enter" },
+  return: { mac: "\u21A9", other: "Enter" },
+  esc: { mac: "esc", other: "Esc" },
+  escape: { mac: "esc", other: "Esc" },
+  up: { mac: "\u2191", other: "Up" },
+  down: { mac: "\u2193", other: "Down" },
+  left: { mac: "\u2190", other: "Left" },
+  right: { mac: "\u2192", other: "Right" },
+  backspace: { mac: "\u232B", other: "Backspace" },
+  delete: { mac: "\u2326", other: "Del" },
+  del: { mac: "\u2326", other: "Del" },
+  tab: { mac: "\u21E5", other: "Tab" },
+  space: { mac: "Space", other: "Space" },
+  home: { mac: "\u2196", other: "Home" },
+  end: { mac: "\u2198", other: "End" },
+  pageup: { mac: "\u21DE", other: "PgUp" },
+  pagedown: { mac: "\u21DF", other: "PgDn" }
+};
+var PORTABLE_MODS = /* @__PURE__ */ new Set(["mod", "ctrl", "alt", "shift"]);
+function parse(combo) {
+  const parts = combo.split("+");
+  const mods = [];
+  let key;
+  for (let i = 0; i < parts.length; i++) {
+    const raw = parts[i] ?? "";
+    if (raw === "" && i > 0) {
+      key = "+";
+      continue;
+    }
+    const mod = MODIFIER_ALIASES[raw.toLowerCase()];
+    if (mod) {
+      if (!mods.includes(mod)) mods.push(mod);
+      continue;
+    }
+    key = raw;
+  }
+  return { mods, key };
+}
+function isKeyCombo(value) {
+  const plus = value.length > 2 && value.endsWith("++");
+  const parts = (plus ? value.slice(0, -2) : value).split("+");
+  let keys = plus ? 1 : 0;
+  for (const raw of parts) {
+    if (raw === "") return false;
+    const word = raw.toLowerCase();
+    if (PORTABLE_MODS.has(word)) continue;
+    if (raw.length === 1 || word in NAMED) {
+      keys++;
+      continue;
+    }
+    return false;
+  }
+  return keys === 1;
+}
+function keyLegend(key, mac) {
+  const named = NAMED[key.toLowerCase()];
+  if (named) return mac ? named.mac : named.other;
+  return key.length === 1 ? key.toUpperCase() : key;
+}
+function keyLabel(combo, platform = keyPlatform()) {
+  const mac = platform === "mac";
+  const { mods, key } = parse(combo);
+  const order = mac ? MAC_ORDER : OTHER_ORDER;
+  const words = order.filter((m) => mods.includes(m)).map((m) => (mac ? MAC_MOD : OTHER_MOD)[m]);
+  const seen = /* @__PURE__ */ new Set();
+  const modWords = words.filter((w) => seen.has(w) ? false : (seen.add(w), true));
+  const legend = key === void 0 ? [] : [keyLegend(key, mac)];
+  return mac ? [...modWords, ...legend].join("") : [...modWords, ...legend].join("+");
+}
+function keyLegends(combo, platform = keyPlatform()) {
+  if (platform === "mac") return [keyLabel(combo, platform)];
+  const { mods, key } = parse(combo);
+  const seen = /* @__PURE__ */ new Set();
+  const words = OTHER_ORDER.filter((m) => mods.includes(m)).map((m) => OTHER_MOD[m]).filter((w) => seen.has(w) ? false : (seen.add(w), true));
+  return key === void 0 ? words : [...words, keyLegend(key, false)];
+}
+function chip(legend) {
+  const k = document.createElement("kbd");
+  k.className = "shell-kbd";
+  k.textContent = legend;
+  return k;
+}
+function keyHint(combo, opts = {}) {
+  const platform = opts.platform ?? keyPlatform();
+  const legends = combo.trim().split(/\s+/).flatMap((c) => keyLegends(c, platform));
+  if (legends.length === 1) return chip(legends[0]);
+  const group = document.createElement("span");
+  group.className = "shell-keys";
+  for (const legend of legends) group.append(chip(legend));
+  return group;
+}
+function hintBar(items, opts = {}) {
+  const bar = document.createElement("div");
+  bar.className = "shell-hintbar";
+  for (const item of items) {
+    const hint = document.createElement("span");
+    hint.className = "shell-hint";
+    const label2 = document.createElement("span");
+    label2.className = "shell-hint-label";
+    label2.textContent = item.label;
+    hint.append(keyHint(item.keys, opts), label2);
+    bar.append(hint);
+  }
+  return bar;
+}
+function tipWithKey(text, combo, platform = keyPlatform()) {
+  return `${text} (${keyLabel(combo, platform)})`;
+}
+
 // src/pane-shell.ts
 var DEFAULT_MAX = (w) => Math.min(640, w - 420);
 var openVar = { nav: "--nav-open-w", inspector: "--insp-open-w" };
@@ -616,9 +792,10 @@ function mountPaneShell(host, opts) {
   if (!offered("nav")) navToggle.remove();
   if (!offered("inspector")) inspToggle.remove();
   const defaultTip = (side, isOpen) => {
-    const noun = cfg[side].label ?? side;
-    const hint = cfg[side].shortcutHint ? ` (${cfg[side].shortcutHint})` : "";
-    return `${isOpen ? "Hide" : "Show"} ${noun}${hint}`;
+    const text = `${isOpen ? "Hide" : "Show"} ${cfg[side].label ?? side}`;
+    const hint = cfg[side].shortcutHint;
+    if (!hint) return text;
+    return isKeyCombo(hint) ? tipWithKey(text, hint) : `${text} (${hint})`;
   };
   const tipFor = opts.tipFor ?? defaultTip;
   function applyToggleGlyph(side, button) {
@@ -779,6 +956,59 @@ var VIEW_MENU = {
   colourTheme: { label: "Colour Theme" }
 };
 
+// src/problems.ts
+function problemName(p, dangling = false) {
+  if (p.title) return `\u201C${p.title}\u201D`;
+  if (dangling && p.where) return `(id ${p.where})`;
+  return "This";
+}
+function describeProblem(problem, table = {}) {
+  const entry = problem.code ? table[problem.code] : void 0;
+  if (entry) {
+    const copy = entry(problem);
+    const text = copy.dangling && !problem.title && problem.where && !copy.text.includes(`(id ${problem.where})`) ? `${copy.text} (id ${problem.where})` : copy.text;
+    return copy.next ? { text, next: copy.next } : { text };
+  }
+  const message = problem.message.replace(/\s*\[[^\]]*\]\s*$/, "").trim();
+  return { text: problem.title ? `${problem.title}: ${message}` : message };
+}
+function problemLine(problem, table) {
+  const { text, next } = describeProblem(problem, table);
+  return next ? `${text} ${next}` : text;
+}
+var defaultProblemCopy = {
+  "duplicate-gameid": (p) => ({
+    text: `The Game ID on ${problemName(p)} is already used elsewhere.`,
+    next: "Each one must be unique; change one of them."
+  }),
+  "invalid-gameid": (p) => ({
+    text: `The Game ID on ${problemName(p)} isn't valid.`,
+    next: "Use lowercase letters, digits and hyphens."
+  }),
+  "dangling-reference": (p) => ({
+    text: `${problemName(p, true)} points at something that no longer exists.`,
+    next: "Choose where it goes.",
+    dangling: true
+  }),
+  "unknown-property": (p) => ({
+    text: `${problemName(p)} uses a property that isn't set up yet.`,
+    next: "Declare it in the project settings, or fix the name."
+  }),
+  "missing-name": (p) => ({ text: `${problemName(p)} needs a name.` }),
+  "empty": (p) => ({
+    text: `${problemName(p)} is empty.`,
+    next: "Add something inside it, or remove it."
+  }),
+  "stale-build": (p) => ({
+    text: `Your playable build${p.path ? ` (${p.path})` : ""} is out of date.`,
+    next: "It refreshes the next time you publish."
+  }),
+  "merge-conflict": (p) => ({
+    text: `${p.path ?? "This file"} still has an unresolved merge conflict in it.`,
+    next: "Resolve it in your version control tool, then reopen the project."
+  })
+};
+
 // src/settings.ts
 function expandableRow(opts) {
   const row = el("div", "set-row");
@@ -2400,7 +2630,7 @@ function renderStepperBar(host, opts) {
       "button",
       { className: "stepbar-cur", tip: opts.tips?.go ?? "Go to this", onClick: () => opts.onGo(index) },
       item.kind === void 0 ? null : el("span", { className: `stepbar-cat${item.kindClass ? ` ${item.kindClass}` : ""}`, text: item.kind }),
-      item.where === void 0 ? null : el("span", { className: "stepbar-where", text: item.where }),
+      item.where === void 0 ? null : typeof item.where === "string" ? el("span", { className: "stepbar-where", text: item.where }) : el("span", "stepbar-where", item.where),
       el("span", { className: "stepbar-msg", text: item.text })
     ),
     ...actions,
@@ -2559,6 +2789,8 @@ function linkAddress(s) {
   if (s.state !== "listening" && s.state !== "connected") return void 0;
   return s.address ?? `ws://127.0.0.1:${s.port}`;
 }
+var CORNER_INSET = 14.5;
+var CORNER_GAP = 12;
 function mountLinkStatus(host, opts) {
   const wrap = el("div", "linkstatus");
   wrap.hidden = true;
@@ -2572,6 +2804,15 @@ function mountLinkStatus(host, opts) {
   wrap.append(...opts.lead ?? [], url, toggle);
   host.append(wrap);
   let status = { state: "off" };
+  const root = host.ownerDocument.documentElement;
+  const publishReserve = () => {
+    const width = wrap.hidden ? 0 : wrap.getBoundingClientRect().width;
+    root.style.setProperty(
+      "--linkstatus-reserve",
+      width > 0 ? `${Math.ceil(width + CORNER_INSET + CORNER_GAP)}px` : "0px"
+    );
+  };
+  if (typeof ResizeObserver !== "undefined") new ResizeObserver(publishReserve).observe(wrap);
   const render = () => {
     toggle.className = `linkstatus-toggle ${linkStatusClass(status)}`;
     const tip2 = linkStatusTip(status);
@@ -2583,6 +2824,7 @@ function mountLinkStatus(host, opts) {
       url.dataset["tip"] = "Click to copy the live link address";
       url.hidden = false;
     } else url.hidden = true;
+    publishReserve();
   };
   const apply = (s) => {
     status = s;
@@ -2607,6 +2849,7 @@ function mountLinkStatus(host, opts) {
     status: () => status,
     setVisible(on) {
       wrap.hidden = !on;
+      publishReserve();
     },
     toggle() {
       toggle.click();
@@ -2854,6 +3097,7 @@ exports.VIEW_MENU = VIEW_MENU;
 exports.askIdentity = askIdentity;
 exports.bindPropertyName = bindPropertyName;
 exports.bindPropertyRef = bindPropertyRef;
+exports.breadcrumb = breadcrumb;
 exports.closeAnchoredPanel = closeAnchoredPanel;
 exports.closeWithExit = closeWithExit;
 exports.colourFor = colourFor;
@@ -2865,6 +3109,8 @@ exports.createNavHistory = createNavHistory;
 exports.createSaveController = createSaveController;
 exports.debounce = debounce;
 exports.defaultControl = defaultControl;
+exports.defaultProblemCopy = defaultProblemCopy;
+exports.describeProblem = describeProblem;
 exports.dialogFrame = dialogFrame;
 exports.dismissToast = dismissToast;
 exports.dupGuard = dupGuard;
@@ -2878,6 +3124,7 @@ exports.followButton = followButton;
 exports.formatCount = formatCount;
 exports.gameIdify = gameIdify;
 exports.hideTip = hideTip;
+exports.hintBar = hintBar;
 exports.historyNav = historyNav;
 exports.icon = icon;
 exports.iconBtn = iconBtn;
@@ -2889,14 +3136,20 @@ exports.initTooltips = initTooltips;
 exports.isCaseOnlyPropertyName = isCaseOnlyPropertyName;
 exports.isEditableTarget = isEditableTarget;
 exports.isIconName = isIconName;
+exports.isKeyCombo = isKeyCombo;
 exports.isValidGameId = isValidGameId;
 exports.isValidPropertyName = isValidPropertyName;
+exports.keyHint = keyHint;
+exports.keyLabel = keyLabel;
+exports.keyLegends = keyLegends;
+exports.keyPlatform = keyPlatform;
 exports.labelled = labelled;
 exports.linkAddress = linkAddress;
 exports.linkStatusClass = linkStatusClass;
 exports.linkStatusTip = linkStatusTip;
 exports.lockControls = lockControls;
 exports.lockNotice = lockNotice;
+exports.metaLine = metaLine;
 exports.mountJobProgress = mountJobProgress;
 exports.mountLinkStatus = mountLinkStatus;
 exports.mountPaneShell = mountPaneShell;
@@ -2914,6 +3167,8 @@ exports.paintVcBadges = paintVcBadges;
 exports.pinButton = pinButton;
 exports.placeAnchored = placeAnchored;
 exports.plural = plural;
+exports.problemLine = problemLine;
+exports.problemName = problemName;
 exports.propertyNameProblem = propertyNameProblem;
 exports.propertyNameify = propertyNameify;
 exports.propertyRefProblem = propertyRefProblem;
@@ -2923,6 +3178,7 @@ exports.revalidatePropertyRefs = revalidatePropertyRefs;
 exports.revealRow = revealRow;
 exports.revealRowWhenReady = revealRowWhenReady;
 exports.saveIndicator = saveIndicator;
+exports.setKeyPlatform = setKeyPlatform;
 exports.showAbout = showAbout;
 exports.showUpdaterDialog = showUpdaterDialog;
 exports.stageChips = stageChips;
@@ -2930,6 +3186,7 @@ exports.staleBar = staleBar;
 exports.tagChips = tagChips;
 exports.tipAt = tipAt;
 exports.tipBold = tipBold;
+exports.tipWithKey = tipWithKey;
 exports.toast = toast;
 exports.toolWindowHead = toolWindowHead;
 exports.vcBadgeFor = vcBadgeFor;