@wildwinter/app-shell 0.46.5 → 0.48.0

package/dist/index.cjs

@@ -285,11 +285,18 @@ var DRAWN = {
   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,
+  /** Sound: play with audio. (volume-2: the cone and two waves. Patterpad's
+   *  hand-drawn one had a single wave, which at 14px reads as quiet rather
+   *  than as sound.) */
+  speaker: stroked('<path d="M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z"/><path d="M16 9a5 5 0 0 1 0 6"/><path d="M19.364 18.364a9 9 0 0 0 0-12.728"/>'),
   // --- 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"/>'),
+  /** Copy this to the clipboard. (copy: the front sheet whole, the back
+   *  sheet showing round two of its sides) */
+  copy: stroked('<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>'),
   /** 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) */
@@ -379,15 +386,36 @@ function iconBtn(name, title, onClick, disabled = false, danger = false) {
   b.addEventListener("click", onClick);
   return b;
 }
-function labelled(label2, control) {
+function labelled(label2, control, hint) {
   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)}`;
+    if (!target.id) target.id = uid();
     w.htmlFor = target.id;
   }
-  return w;
+  if (hint === void 0) return w;
+  const note = el("p", "shell-fieldhint");
+  note.append(...Array.isArray(hint) ? hint : [hint]);
+  note.id = uid();
+  if (target) {
+    const by = target.getAttribute("aria-describedby");
+    target.setAttribute("aria-describedby", by ? `${by} ${note.id}` : note.id);
+  }
+  return el("div", "shell-field", w, note);
+}
+var uid = () => `shell-f-${Math.random().toString(36).slice(2, 9)}`;
+function labelledToggle(label2, opts = {}) {
+  const input = el("input", "shell-toggle-input");
+  input.type = "checkbox";
+  input.checked = opts.checked ?? false;
+  input.disabled = opts.disabled ?? false;
+  const { onChange } = opts;
+  if (onChange) input.addEventListener("change", () => onChange(input.checked));
+  const row = labelled(label2, input, opts.hint);
+  (row.matches(".shell-labelled") ? row : row.querySelector(".shell-labelled"))?.classList.add("shell-toggle");
+  if (opts.sub) row.classList.add("shell-suboption");
+  return { row, input };
 }
 function moveItem(arr, i, delta) {
   const j = i + delta;
@@ -436,7 +464,7 @@ function tagChips(holder, onChange) {
   wrap.append(input);
   return wrap;
 }
-function stageChips(holder, onChange) {
+function stageChips(holder, onChange, opts = {}) {
   const wrap = el("div", "shell-tags shell-stages");
   const input = el("input", "shell-tag-input");
   input.type = "text";
@@ -451,35 +479,79 @@ function stageChips(holder, onChange) {
     b.addEventListener("click", onClick);
     return b;
   };
+  const nameLabel = (chip2, v, i) => {
+    const label2 = el("span", "shell-tag-label", `${i + 1}. ${v}`);
+    label2.setAttribute("role", "button");
+    label2.tabIndex = 0;
+    label2.dataset["tip"] = `Rename ${v}`;
+    const edit = () => {
+      const field = el("input", "shell-tag-input shell-stage-rename");
+      field.type = "text";
+      field.value = v;
+      field.spellcheck = false;
+      field.setAttribute("aria-label", `Rename ${v}`);
+      let done = false;
+      const finish = (keep) => {
+        if (done) return;
+        done = true;
+        const to = field.value.trim();
+        const stages = holder.stages ?? [];
+        if (keep && to !== "" && to !== v && !stages.includes(to)) {
+          stages[stages.indexOf(v)] = to;
+          rebuild();
+          if (opts.onRename) opts.onRename(v, to);
+          else onChange?.();
+        } else {
+          rebuild();
+        }
+      };
+      field.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          finish(true);
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          e.stopPropagation();
+          finish(false);
+        }
+      });
+      field.addEventListener("blur", () => finish(true));
+      label2.replaceWith(field);
+      chip2.classList.add("editing");
+      field.focus();
+      field.select();
+    };
+    label2.addEventListener("click", (e) => {
+      e.preventDefault();
+      edit();
+    });
+    label2.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        edit();
+      }
+    });
+    return label2;
+  };
+  const moved = () => {
+    rebuild();
+    onChange?.();
+    opts.onReorder?.();
+  };
   const rebuild = () => {
     for (const c of Array.from(wrap.children)) if (c !== input) c.remove();
     const stages = holder.stages ?? [];
     stages.forEach((v, i) => {
-      const chip2 = el("span", "shell-tag", `${i + 1}. ${v}`);
+      const chip2 = el("span", "shell-tag");
       chip2.dataset["stage"] = v;
       chip2.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?.();
-            }
-          }
-        )
+        nameLabel(chip2, v, i),
+        control("back", `Move ${v} earlier`, i === 0, () => {
+          if (moveItem(stages, i, -1)) moved();
+        }),
+        control("forward", `Move ${v} later`, i === stages.length - 1, () => {
+          if (moveItem(stages, i, 1)) moved();
+        })
       );
       const x = el("button", "shell-tag-x", iconNode("close", CHIP_ICON));
       x.type = "button";
@@ -935,6 +1007,7 @@ var FILE_MENU = {
   projectSettings: { label: "Project Settings\u2026", accelerator: "CmdOrCtrl+," }
 };
 var PLAY_MENU = {
+  play: { accelerator: "CmdOrCtrl+P" },
   liveLink: { label: "Live Link" }
 };
 var REVIEW_MENU = {
@@ -1197,9 +1270,17 @@ function mountSettingsDialog(opts) {
       error.hidden = false;
       return;
     }
+    save.disabled = true;
     void (async () => {
-      await opts.onSave();
-      dialog.close("save");
+      let saved;
+      try {
+        saved = await opts.onSave();
+      } catch (err) {
+        saved = false;
+        console.error("Settings save failed:", err);
+      }
+      save.disabled = false;
+      if (saved !== false) dialog.close("save");
     })();
   });
   return {
@@ -2104,16 +2185,19 @@ var CLASS_LABEL = {
   everyone: "Everyone",
   writing: "Writing",
   vo: "Voice (VO)",
-  loc: "Localisers"
+  loc: "Localisers",
+  editor: "Editors"
 };
 var label = (cls) => cls === EDITOR_ONLY ? "Note (editor-only)" : CLASS_LABEL[cls] ?? cls[0].toUpperCase() + cls.slice(1);
 var PLACEHOLDER = {
   vo: "Direction for the voice actor or director",
-  loc: "Context for translators"
+  loc: "Context for translators",
+  editor: "Context for an outside editor"
 };
 var placeholder = (cls) => cls === EDITOR_ONLY ? "An internal note, never exported" : PLACEHOLDER[cls] ?? "Why this is here";
 function openNotesEditor(opts) {
   const { notes } = opts;
+  const inherited = notes.inherited ?? [];
   const seed = /* @__PURE__ */ new Map();
   for (const line of notes.own) {
     const key = line.type ?? EDITOR_ONLY;
@@ -2121,6 +2205,8 @@ function openNotesEditor(opts) {
 ${line.text}` : line.text);
   }
   const shown = [...seed.keys()];
+  const focus = opts.focus !== void 0 && (opts.focus === EDITOR_ONLY || notes.classes.includes(opts.focus) || seed.has(opts.focus)) ? opts.focus : void 0;
+  if (focus !== void 0 && !shown.includes(focus)) shown.push(focus);
   if (shown.length === 0) shown.push(notes.classes[0] ?? EDITOR_ONLY);
   const areas = /* @__PURE__ */ new Map();
   const value = () => {
@@ -2138,13 +2224,13 @@ ${line.text}` : line.text);
   const body = el("div", "shell-notes-body");
   const render = () => {
     body.replaceChildren();
-    if (notes.inherited.length > 0) {
+    if (inherited.length > 0) {
       const from = el(
         "div",
         { className: "shell-notes-inherited" },
         el("div", "shell-notes-caption", "Inherited")
       );
-      for (const level of notes.inherited) {
+      for (const level of inherited) {
         from.append(el(
           "div",
           { className: "shell-notes-level" },
@@ -2201,7 +2287,12 @@ ${line.text}` : line.text);
     const next = value();
     if (JSON.stringify(next) !== before) opts.save(next);
   };
-  const frame = dialogFrame({ title: `Notes: ${opts.subject}`, className: "shell-notes", onClose: commit });
+  const frame = dialogFrame({
+    title: opts.subject !== void 0 ? `Notes: ${opts.subject}` : "Notes",
+    ...opts.sub !== void 0 ? { sub: opts.sub } : {},
+    className: "shell-notes",
+    onClose: commit
+  });
   frame.body.append(body);
   frame.actions.append(done);
   done.addEventListener("click", () => {
@@ -2209,7 +2300,7 @@ ${line.text}` : line.text);
     frame.close();
   });
   frame.open();
-  areas.get(shown[0] ?? EDITOR_ONLY)?.focus();
+  areas.get(focus ?? shown[0] ?? EDITOR_ONLY)?.focus();
 }
 
 // src/comments.ts
@@ -3146,7 +3237,21 @@ function mountPropertyList(host, decls, opts = {}) {
     }, 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 (p.type === "quality") {
+      const note = el("p", "shell-stage-note");
+      const stages = stageChips(p, refreshDefault, {
+        onRename: (from, to) => {
+          if (p.default === from) p.default = to;
+          const fresh = defaultControl(p, changed, opts);
+          def.replaceWith(fresh);
+          def = fresh;
+          if (opts.onStageRename) opts.onStageRename(p, from, to);
+          else changed();
+        },
+        onReorder: () => opts.onStageReorder?.(p, note)
+      });
+      details.push(labelled("Stages (in order)", stages), note);
+    }
     if (opts.purpose !== false) {
       const purpose = el("input", "field set-purpose");
       purpose.type = "text";
@@ -3222,6 +3327,10 @@ function createNavHistory(opts) {
     },
     canForward() {
       return ahead.length > 0;
+    },
+    clear() {
+      past = [];
+      ahead = [];
     }
   };
 }
@@ -3318,6 +3427,7 @@ exports.keyLegends = keyLegends;
 exports.keyPlatform = keyPlatform;
 exports.kitTile = kitTile;
 exports.labelled = labelled;
+exports.labelledToggle = labelledToggle;
 exports.linkAddress = linkAddress;
 exports.linkStatusClass = linkStatusClass;
 exports.linkStatusTip = linkStatusTip;