@wildwinter/app-shell 0.14.0 → 0.16.0

package/dist/anchored.css

@@ -47,4 +47,58 @@
   gap: 8px;
   padding: 10px;
 }
+.shell-id-editor .shell-anchored-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.shell-id-input {
+  font: 0.82rem var(--font-mono, monospace);
+  padding: 5px 8px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: var(--card);
+  color: var(--ink);
+}
+.shell-id-hint {
+  font: 0.74rem/1.4 var(--font-ui);
+  color: var(--muted);
+}
+.shell-id-hint.bad {
+  color: var(--danger, #b00);
+}
+.shell-id-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.shell-id-reset {
+  font: 0.74rem var(--font-ui);
+  padding: 3px 10px;
+  cursor: pointer;
+  background: none;
+  border: 1px dashed var(--line);
+  border-radius: var(--radius-sm);
+  color: var(--muted);
+}
+.shell-id-reset:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+.shell-id-set {
+  font: 0.78rem var(--font-ui);
+  padding: 3px 12px;
+  cursor: pointer;
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-sm);
+  background: var(--accent);
+  color: var(--surface);
+}
+.shell-id-set:disabled {
+  cursor: default;
+  background: none;
+  color: var(--muted);
+  border-color: var(--line);
+}
 /*# sourceMappingURL=anchored.css.map */

package/dist/anchored.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/anchored.css"],"sourcesContent":["/* The anchored panel (anchored.ts): a floating panel hung off the thing it is\n   about. Sized and positioned in script (the placement has to measure); this is\n   only what it looks like. Its body scrolls, because the placement caps the\n   height rather than letting a long thread run off the screen. */\n.shell-anchored {\n  position: fixed; z-index: 40;\n  display: flex; flex-direction: column;\n  border: 1px solid var(--line);\n  border-radius: var(--radius-md);\n  background: var(--surface); color: var(--ink);\n  box-shadow: var(--shadow-2, var(--shadow-1));\n  overflow: hidden;\n}\n.shell-anchored-head {\n  flex: none;\n  display: flex; align-items: center; justify-content: space-between; gap: 8px;\n  padding: 8px 10px;\n  border-bottom: 1px solid var(--line-soft);\n}\n.shell-anchored-title {\n  font: 600 0.72rem/1 var(--font-ui);\n  text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);\n}\n.shell-anchored-close {\n  border: 0; background: none; color: var(--muted);\n  font-size: 0.8rem; line-height: 1; padding: 0 2px; cursor: pointer;\n}\n.shell-anchored-close:hover { color: var(--accent); }\n.shell-anchored-body {\n  flex: 1; min-height: 0; overflow-y: auto;\n  display: flex; flex-direction: column; gap: 8px;\n  padding: 10px;\n}\n"],"mappings":";AAIA,CAAC;AACC,YAAU;AAAO,WAAS;AAC1B,WAAS;AAAM,kBAAgB;AAC/B,UAAQ,IAAI,MAAM,IAAI;AACtB,iBAAe,IAAI;AACnB,cAAY,IAAI;AAAY,SAAO,IAAI;AACvC,cAAY,IAAI,UAAU,EAAE,IAAI;AAChC,YAAU;AACZ;AACA,CAAC;AACC,QAAM;AACN,WAAS;AAAM,eAAa;AAAQ,mBAAiB;AAAe,OAAK;AACzE,WAAS,IAAI;AACb,iBAAe,IAAI,MAAM,IAAI;AAC/B;AACA,CAAC;AACC,QAAM,IAAI,OAAO,CAAC,EAAE,IAAI;AACxB,kBAAgB;AAAW,kBAAgB;AAAQ,SAAO,IAAI;AAChE;AACA,CAAC;AACC,UAAQ;AAAG,cAAY;AAAM,SAAO,IAAI;AACxC,aAAW;AAAQ,eAAa;AAAG,WAAS,EAAE;AAAK,UAAQ;AAC7D;AACA,CAJC,oBAIoB;AAAS,SAAO,IAAI;AAAW;AACpD,CAAC;AACC,QAAM;AAAG,cAAY;AAAG,cAAY;AACpC,WAAS;AAAM,kBAAgB;AAAQ,OAAK;AAC5C,WAAS;AACX;","names":[]}
+{"version":3,"sources":["../src/anchored.css"],"sourcesContent":["/* The anchored panel (anchored.ts): a floating panel hung off the thing it is\n   about. Sized and positioned in script (the placement has to measure); this is\n   only what it looks like. Its body scrolls, because the placement caps the\n   height rather than letting a long thread run off the screen. */\n.shell-anchored {\n  position: fixed; z-index: 40;\n  display: flex; flex-direction: column;\n  border: 1px solid var(--line);\n  border-radius: var(--radius-md);\n  background: var(--surface); color: var(--ink);\n  box-shadow: var(--shadow-2, var(--shadow-1));\n  overflow: hidden;\n}\n.shell-anchored-head {\n  flex: none;\n  display: flex; align-items: center; justify-content: space-between; gap: 8px;\n  padding: 8px 10px;\n  border-bottom: 1px solid var(--line-soft);\n}\n.shell-anchored-title {\n  font: 600 0.72rem/1 var(--font-ui);\n  text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);\n}\n.shell-anchored-close {\n  border: 0; background: none; color: var(--muted);\n  font-size: 0.8rem; line-height: 1; padding: 0 2px; cursor: pointer;\n}\n.shell-anchored-close:hover { color: var(--accent); }\n.shell-anchored-body {\n  flex: 1; min-height: 0; overflow-y: auto;\n  display: flex; flex-direction: column; gap: 8px;\n  padding: 10px;\n}\n\n/* The gameId editor (id-editor.ts). Refusal is the whole point of the design, so\n   it has to LOOK refused: the hint reddens and Set goes flat. */\n.shell-id-editor .shell-anchored-body { display: flex; flex-direction: column; gap: 8px; }\n.shell-id-input {\n  font: 0.82rem var(--font-mono, monospace);\n  padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm);\n  background: var(--card); color: var(--ink);\n}\n.shell-id-hint { font: 0.74rem/1.4 var(--font-ui); color: var(--muted); }\n.shell-id-hint.bad { color: var(--danger, #b00); }\n.shell-id-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }\n.shell-id-reset {\n  font: 0.74rem var(--font-ui); padding: 3px 10px; cursor: pointer;\n  background: none; border: 1px dashed var(--line); border-radius: var(--radius-sm); color: var(--muted);\n}\n.shell-id-reset:hover { border-color: var(--accent); color: var(--accent); }\n.shell-id-set {\n  font: 0.78rem var(--font-ui); padding: 3px 12px; cursor: pointer;\n  border: 1px solid var(--accent); border-radius: var(--radius-sm);\n  background: var(--accent); color: var(--surface);\n}\n.shell-id-set:disabled {\n  cursor: default; background: none; color: var(--muted); border-color: var(--line);\n}\n"],"mappings":";AAIA,CAAC;AACC,YAAU;AAAO,WAAS;AAC1B,WAAS;AAAM,kBAAgB;AAC/B,UAAQ,IAAI,MAAM,IAAI;AACtB,iBAAe,IAAI;AACnB,cAAY,IAAI;AAAY,SAAO,IAAI;AACvC,cAAY,IAAI,UAAU,EAAE,IAAI;AAChC,YAAU;AACZ;AACA,CAAC;AACC,QAAM;AACN,WAAS;AAAM,eAAa;AAAQ,mBAAiB;AAAe,OAAK;AACzE,WAAS,IAAI;AACb,iBAAe,IAAI,MAAM,IAAI;AAC/B;AACA,CAAC;AACC,QAAM,IAAI,OAAO,CAAC,EAAE,IAAI;AACxB,kBAAgB;AAAW,kBAAgB;AAAQ,SAAO,IAAI;AAChE;AACA,CAAC;AACC,UAAQ;AAAG,cAAY;AAAM,SAAO,IAAI;AACxC,aAAW;AAAQ,eAAa;AAAG,WAAS,EAAE;AAAK,UAAQ;AAC7D;AACA,CAJC,oBAIoB;AAAS,SAAO,IAAI;AAAW;AACpD,CAAC;AACC,QAAM;AAAG,cAAY;AAAG,cAAY;AACpC,WAAS;AAAM,kBAAgB;AAAQ,OAAK;AAC5C,WAAS;AACX;AAIA,CAAC,gBAAgB,CARhB;AAQuC,WAAS;AAAM,kBAAgB;AAAQ,OAAK;AAAK;AACzF,CAAC;AACC,QAAM,QAAQ,IAAI,WAAW,EAAE;AAC/B,WAAS,IAAI;AAAK,UAAQ,IAAI,MAAM,IAAI;AAAS,iBAAe,IAAI;AACpE,cAAY,IAAI;AAAS,SAAO,IAAI;AACtC;AACA,CAAC;AAAgB,QAAM,OAAO,CAAC,IAAI,IAAI;AAAY,SAAO,IAAI;AAAU;AACxE,CADC,aACa,CAAC;AAAM,SAAO,IAAI,QAAQ,EAAE;AAAO;AACjD,CAAC;AAAmB,WAAS;AAAM,eAAa;AAAQ,mBAAiB;AAAe,OAAK;AAAK;AAClG,CAAC;AACC,QAAM,QAAQ,IAAI;AAAY,WAAS,IAAI;AAAM,UAAQ;AACzD,cAAY;AAAM,UAAQ,IAAI,OAAO,IAAI;AAAS,iBAAe,IAAI;AAAc,SAAO,IAAI;AAChG;AACA,CAJC,cAIc;AAAS,gBAAc,IAAI;AAAW,SAAO,IAAI;AAAW;AAC3E,CAAC;AACC,QAAM,QAAQ,IAAI;AAAY,WAAS,IAAI;AAAM,UAAQ;AACzD,UAAQ,IAAI,MAAM,IAAI;AAAW,iBAAe,IAAI;AACpD,cAAY,IAAI;AAAW,SAAO,IAAI;AACxC;AACA,CALC,YAKY;AACX,UAAQ;AAAS,cAAY;AAAM,SAAO,IAAI;AAAU,gBAAc,IAAI;AAC5E;","names":[]}

package/dist/chunk-YLINCOQD.js

@@ -0,0 +1,39 @@
+// src/menu.ts
+var EDIT_MENU = {
+  undo: { label: "Undo", accelerator: "CmdOrCtrl+Z" },
+  redo: { label: "Redo", accelerator: "Shift+CmdOrCtrl+Z" },
+  duplicate: { label: "Duplicate", accelerator: "CmdOrCtrl+D" },
+  find: { label: "Find\u2026", accelerator: "CmdOrCtrl+F" }
+};
+var PANE_MENU = {
+  showNav: { label: "Show Navigator", accelerator: "CmdOrCtrl+1" },
+  showInspector: { label: "Show Inspector", accelerator: "CmdOrCtrl+2" },
+  resetView: { label: "Reset View" }
+};
+var HELP_MENU = {
+  checkForUpdates: { label: "Check for Updates\u2026" }
+};
+var APP_MENU = {
+  /** Name + optional email, used to sign edits and comments. One label across the suite. */
+  userInfo: { label: "User Information\u2026" }
+};
+function namedMenuItems(naming) {
+  const suite = naming.suiteName ?? "Patter";
+  return {
+    about: { label: `About ${naming.appName}`, ready: true },
+    docs: {
+      label: `${naming.appName} Documentation`,
+      ...naming.docsUrl ? { url: naming.docsUrl } : {},
+      ready: naming.docsUrl !== void 0
+    },
+    suiteDocs: {
+      label: `${suite} Documentation Home`,
+      ...naming.suiteDocsUrl ? { url: naming.suiteDocsUrl } : {},
+      ready: naming.suiteDocsUrl !== void 0
+    }
+  };
+}
+
+export { APP_MENU, EDIT_MENU, HELP_MENU, PANE_MENU, namedMenuItems };
+//# sourceMappingURL=chunk-YLINCOQD.js.map
+//# sourceMappingURL=chunk-YLINCOQD.js.map

package/dist/chunk-YLINCOQD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/menu.ts"],"names":[],"mappings":";AA2BO,IAAM,SAAA,GAKT;AAAA,EACF,IAAA,EAAM,EAAE,KAAA,EAAO,MAAA,EAAQ,aAAa,aAAA,EAAc;AAAA,EAClD,IAAA,EAAM,EAAE,KAAA,EAAO,MAAA,EAAQ,aAAa,mBAAA,EAAoB;AAAA,EACxD,SAAA,EAAW,EAAE,KAAA,EAAO,WAAA,EAAa,aAAa,aAAA,EAAc;AAAA,EAC5D,IAAA,EAAM,EAAE,KAAA,EAAO,YAAA,EAAS,aAAa,aAAA;AACvC;AAGO,IAAM,SAAA,GAIT;AAAA,EACF,OAAA,EAAS,EAAE,KAAA,EAAO,gBAAA,EAAkB,aAAa,aAAA,EAAc;AAAA,EAC/D,aAAA,EAAe,EAAE,KAAA,EAAO,gBAAA,EAAkB,aAAa,aAAA,EAAc;AAAA,EACrE,SAAA,EAAW,EAAE,KAAA,EAAO,YAAA;AACtB;AAkBO,IAAM,SAAA,GAET;AAAA,EACF,eAAA,EAAiB,EAAE,KAAA,EAAO,yBAAA;AAC5B;AAGO,IAAM,QAAA,GAET;AAAA;AAAA,EAEF,QAAA,EAAU,EAAE,KAAA,EAAO,wBAAA;AACrB;AA+BO,SAAS,eAAe,MAAA,EAI7B;AACA,EAAA,MAAM,KAAA,GAAQ,OAAO,SAAA,IAAa,QAAA;AAClC,EAAA,OAAO;AAAA,IACL,KAAA,EAAO,EAAE,KAAA,EAAO,CAAA,MAAA,EAAS,OAAO,OAAO,CAAA,CAAA,EAAI,OAAO,IAAA,EAAK;AAAA,IACvD,IAAA,EAAM;AAAA,MACJ,KAAA,EAAO,CAAA,EAAG,MAAA,CAAO,OAAO,CAAA,cAAA,CAAA;AAAA,MACxB,GAAI,OAAO,OAAA,GAAU,EAAE,KAAK,MAAA,CAAO,OAAA,KAAY,EAAC;AAAA,MAChD,KAAA,EAAO,OAAO,OAAA,KAAY;AAAA,KAC5B;AAAA,IACA,SAAA,EAAW;AAAA,MACT,KAAA,EAAO,GAAG,KAAK,CAAA,mBAAA,CAAA;AAAA,MACf,GAAI,OAAO,YAAA,GAAe,EAAE,KAAK,MAAA,CAAO,YAAA,KAAiB,EAAC;AAAA,MAC1D,KAAA,EAAO,OAAO,YAAA,KAAiB;AAAA;AACjC,GACF;AACF","file":"chunk-YLINCOQD.js","sourcesContent":["// ---------------------------------------------------------------------------\n// Shell-owned menu naming: the labels + accelerators for the pane-frame menu\n// items, single-sourced so every app in the family names them identically\n// (and a rename here flows to all of them). Pure data - no electron, no DOM -\n// so a main-process menu builder can import it. Each app builds its own\n// MenuItem from these and wires the click to its shell controller.\n// ---------------------------------------------------------------------------\n\nexport interface MenuLabel {\n  label: string;\n  /** Electron accelerator string, when the item has one. */\n  accelerator?: string;\n}\n\n/**\n * The Edit menu items the family shares.\n *\n * Undo and Redo are here and the MECHANISM is not, which is the whole finding\n * about undo: Patterpad's is ProseMirror's document history, Storyletter's is a\n * replay of file bytes, and those have nothing in common but this. See\n * `design/shared-shell.md`.\n *\n * The rule both apps discovered separately, and the reason these are spelled\n * out rather than left as Electron's `role: \"undo\"`: the native role runs a DOM\n * text-field undo, which knows nothing about either app's model and will\n * silently undo the wrong thing.\n */\nexport const EDIT_MENU: {\n  undo: MenuLabel;\n  redo: MenuLabel;\n  duplicate: MenuLabel;\n  find: MenuLabel;\n} = {\n  undo: { label: \"Undo\", accelerator: \"CmdOrCtrl+Z\" },\n  redo: { label: \"Redo\", accelerator: \"Shift+CmdOrCtrl+Z\" },\n  duplicate: { label: \"Duplicate\", accelerator: \"CmdOrCtrl+D\" },\n  find: { label: \"Find…\", accelerator: \"CmdOrCtrl+F\" },\n};\n\n/** The pane-frame menu items (a View menu, conventionally). */\nexport const PANE_MENU: {\n  showNav: MenuLabel;\n  showInspector: MenuLabel;\n  resetView: MenuLabel;\n} = {\n  showNav: { label: \"Show Navigator\", accelerator: \"CmdOrCtrl+1\" },\n  showInspector: { label: \"Show Inspector\", accelerator: \"CmdOrCtrl+2\" },\n  resetView: { label: \"Reset View\" },\n};\n\n/**\n * The Help menu items the family shares, and the one platform rule that goes\n * with them.\n *\n * Lifted from Patterpad, which is the only app that has ever had these: a\n * second app writing its own updater or About is pure waste (`design/\n * shared-shell.md`), and a suite is recognised by finding Check for Updates\n * where you left it. Storyletter will grow both; until it does, these labels\n * are the agreement rather than a description of two implementations.\n *\n * PLACEMENT, which differs by platform and is easy to get wrong:\n * - macOS keeps About in the APP menu (the one named after the product), and\n *   Help carries documentation + Check for Updates only.\n * - Windows and Linux have no app menu, so About goes at the foot of Help,\n *   after a separator. That is the conventional home there.\n */\nexport const HELP_MENU: {\n  checkForUpdates: MenuLabel;\n} = {\n  checkForUpdates: { label: \"Check for Updates\\u2026\" },\n};\n\n/** The app-menu items the family shares (macOS; the identity item also belongs in File elsewhere). */\nexport const APP_MENU: {\n  userInfo: MenuLabel;\n} = {\n  /** Name + optional email, used to sign edits and comments. One label across the suite. */\n  userInfo: { label: \"User Information\\u2026\" },\n};\n\n/** What an app must tell the shell to build its named menu items. */\nexport interface MenuNaming {\n  /** The product, as it appears in menus: \"Patterpad\", \"Storyletter\". */\n  appName: string;\n  /** The product's own documentation URL. Omit while an app has no docs yet and\n   *  the item is rendered disabled rather than opening a broken link. */\n  docsUrl?: string;\n  /** The suite's documentation home, shared by every app in the family. */\n  suiteDocsUrl?: string;\n  /** The suite, as it appears in \"<suite> Documentation Home\". Defaults to \"Patter\". */\n  suiteName?: string;\n}\n\n/** A named menu item: the label, plus the URL it opens (absent = nothing wired yet). */\nexport interface NamedMenuItem extends MenuLabel {\n  url?: string;\n  /** False when the app has not supplied a URL, so the builder can render it\n   *  disabled instead of opening nothing. A placeholder, honestly labelled. */\n  ready: boolean;\n}\n\n/**\n * The menu labels that carry a product or suite name, so no app spells its own\n * About or Documentation item differently from the rest of the family.\n *\n * An app with no documentation site yet still gets the ITEM, marked\n * `ready: false`, so the menu has its family shape from day one and wiring the\n * URL later is a one-line change rather than a menu redesign.\n */\nexport function namedMenuItems(naming: MenuNaming): {\n  about: NamedMenuItem;\n  docs: NamedMenuItem;\n  suiteDocs: NamedMenuItem;\n} {\n  const suite = naming.suiteName ?? \"Patter\";\n  return {\n    about: { label: `About ${naming.appName}`, ready: true },\n    docs: {\n      label: `${naming.appName} Documentation`,\n      ...(naming.docsUrl ? { url: naming.docsUrl } : {}),\n      ready: naming.docsUrl !== undefined,\n    },\n    suiteDocs: {\n      label: `${suite} Documentation Home`,\n      ...(naming.suiteDocsUrl ? { url: naming.suiteDocsUrl } : {}),\n      ready: naming.suiteDocsUrl !== undefined,\n    },\n  };\n}\n"]}

package/dist/comments.css

@@ -12,6 +12,31 @@
   gap: 8px;
   align-items: baseline;
 }
+.shell-cmt-del {
+  margin-left: auto;
+  flex: none;
+  padding: 0 4px;
+  line-height: 1;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 0.72rem;
+  color: var(--muted);
+  opacity: 0.55;
+  transition: opacity var(--dur-quick, 120ms) var(--ease-standard, ease), color var(--dur-quick, 120ms) var(--ease-standard, ease);
+}
+.shell-cmt-msg:hover .shell-cmt-del,
+.shell-cmt-del:focus-visible {
+  opacity: 1;
+}
+.shell-cmt-del:hover {
+  opacity: 1;
+  color: var(--danger, #b00);
+}
+.shell-cmt-msg.gone .shell-cmt-body {
+  font-style: italic;
+  color: var(--muted);
+}
 .shell-cmt-author {
   font: 600 0.76rem/1.2 var(--font-ui);
 }

package/dist/comments.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/comments.css"],"sourcesContent":["/* A comment thread inside the anchored panel (comments.ts). */\n.shell-cmt-list { display: flex; flex-direction: column; gap: 8px; }\n.shell-cmt-list.resolved { opacity: 0.55; }\n.shell-cmt-msg-head { display: flex; gap: 8px; align-items: baseline; }\n.shell-cmt-author { font: 600 0.76rem/1.2 var(--font-ui); }\n.shell-cmt-ts { font: 0.68rem/1.2 var(--font-ui); color: var(--muted); }\n.shell-cmt-body { font: 0.82rem/1.45 var(--font-read, var(--font-ui)); white-space: pre-wrap; }\n.shell-cmt-input {\n  width: 100%; box-sizing: border-box; resize: vertical;\n  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);\n  background: var(--card); color: var(--ink);\n  font: 0.82rem/1.4 var(--font-read, var(--font-ui)); padding: 6px 8px;\n}\n.shell-cmt-input:focus { outline: none; border-color: var(--accent); }\n.shell-cmt-actions { display: flex; gap: 6px; justify-content: flex-end; }\n.shell-cmt-btn {\n  font: 0.76rem/1 var(--font-ui); padding: 5px 10px;\n  border-radius: var(--radius-sm); border: 1px solid var(--line);\n  background: var(--card); color: var(--ink); cursor: pointer;\n}\n.shell-cmt-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }\n/* The picker, when one thing has more than one thread. */\n.shell-cmt-row {\n  display: flex; gap: 6px; align-items: baseline; width: 100%; text-align: left;\n  border: 0; background: none; color: var(--ink); cursor: pointer;\n  padding: 6px 4px; border-radius: var(--radius-sm);\n}\n.shell-cmt-row:hover { background: var(--accent-soft); }\n.shell-cmt-row.resolved { opacity: 0.55; }\n.shell-cmt-row-author { font: 600 0.74rem/1.2 var(--font-ui); flex: none; }\n.shell-cmt-row-gist {\n  font: 0.78rem/1.3 var(--font-read, var(--font-ui)); color: var(--muted);\n  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n}\n.shell-cmt-row-count { margin-left: auto; font: 0.7rem/1 var(--font-ui); color: var(--muted); }\n.shell-cmt-new {\n  align-self: flex-start; font: 0.76rem/1 var(--font-ui);\n  border: 1px dashed var(--line); background: none; color: var(--muted);\n  border-radius: var(--radius-sm); padding: 5px 10px; cursor: pointer;\n}\n.shell-cmt-new:hover { color: var(--accent); border-color: var(--accent); }\n"],"mappings":";AACA,CAAC;AAAiB,WAAS;AAAM,kBAAgB;AAAQ,OAAK;AAAK;AACnE,CADC,cACc,CAAC;AAAW,WAAS;AAAM;AAC1C,CAAC;AAAqB,WAAS;AAAM,OAAK;AAAK,eAAa;AAAU;AACtE,CAAC;AAAmB,QAAM,IAAI,OAAO,CAAC,IAAI,IAAI;AAAY;AAC1D,CAAC;AAAe,QAAM,OAAO,CAAC,IAAI,IAAI;AAAY,SAAO,IAAI;AAAU;AACvE,CAAC;AAAiB,QAAM,OAAO,CAAC,KAAK,IAAI,WAAW,EAAE,IAAI;AAAa,eAAa;AAAU;AAC9F,CAAC;AACC,SAAO;AAAM,cAAY;AAAY,UAAQ;AAC7C,UAAQ,IAAI,MAAM,IAAI;AAAc,iBAAe,IAAI;AACvD,cAAY,IAAI;AAAS,SAAO,IAAI;AACpC,QAAM,OAAO,CAAC,IAAI,IAAI,WAAW,EAAE,IAAI;AAAa,WAAS,IAAI;AACnE;AACA,CANC,eAMe;AAAS,WAAS;AAAM,gBAAc,IAAI;AAAW;AACrE,CAAC;AAAoB,WAAS;AAAM,OAAK;AAAK,mBAAiB;AAAU;AACzE,CAAC;AACC,QAAM,OAAO,CAAC,EAAE,IAAI;AAAY,WAAS,IAAI;AAC7C,iBAAe,IAAI;AAAc,UAAQ,IAAI,MAAM,IAAI;AACvD,cAAY,IAAI;AAAS,SAAO,IAAI;AAAQ,UAAQ;AACtD;AACA,CALC,aAKa,CAAC;AAAU,cAAY,IAAI;AAAW,gBAAc,IAAI;AAAW,SAAO,IAAI,WAAW,EAAE;AAAO;AAEhH,CAAC;AACC,WAAS;AAAM,OAAK;AAAK,eAAa;AAAU,SAAO;AAAM,cAAY;AACzE,UAAQ;AAAG,cAAY;AAAM,SAAO,IAAI;AAAQ,UAAQ;AACxD,WAAS,IAAI;AAAK,iBAAe,IAAI;AACvC;AACA,CALC,aAKa;AAAS,cAAY,IAAI;AAAgB;AACvD,CANC,aAMa,CA1BE;AA0BU,WAAS;AAAM;AACzC,CAAC;AAAuB,QAAM,IAAI,OAAO,CAAC,IAAI,IAAI;AAAY,QAAM;AAAM;AAC1E,CAAC;AACC,QAAM,OAAO,CAAC,IAAI,IAAI,WAAW,EAAE,IAAI;AAAa,SAAO,IAAI;AAC/D,YAAU;AAAQ,iBAAe;AAAU,eAAa;AAC1D;AACA,CAAC;AAAsB,eAAa;AAAM,QAAM,MAAM,CAAC,EAAE,IAAI;AAAY,SAAO,IAAI;AAAU;AAC9F,CAAC;AACC,cAAY;AAAY,QAAM,OAAO,CAAC,EAAE,IAAI;AAC5C,UAAQ,IAAI,OAAO,IAAI;AAAS,cAAY;AAAM,SAAO,IAAI;AAC7D,iBAAe,IAAI;AAAc,WAAS,IAAI;AAAM,UAAQ;AAC9D;AACA,CALC,aAKa;AAAS,SAAO,IAAI;AAAW,gBAAc,IAAI;AAAW;","names":[]}
+{"version":3,"sources":["../src/comments.css"],"sourcesContent":["/* A comment thread inside the anchored panel (comments.ts). */\n.shell-cmt-list { display: flex; flex-direction: column; gap: 8px; }\n.shell-cmt-list.resolved { opacity: 0.55; }\n.shell-cmt-msg-head { display: flex; gap: 8px; align-items: baseline; }\n/* The delete: QUIET but always there.\n   It was rollover-revealed at first, following the grip grammar the lists use,\n   and that was the wrong borrowing: a list row hides its grip because a dense\n   column of them would be clutter, whereas this popover holds two or three\n   messages and is already a surface you opened on purpose. Hidden, the only\n   way to delete a comment was to discover that hovering one exact row revealed\n   something - which is to say there was no way to delete a comment. Reported as\n   \"there is apparently no delete option\", which is exactly right.\n   Low contrast carries \"secondary\"; invisibility carries \"absent\". */\n.shell-cmt-del {\n  margin-left: auto; flex: none; padding: 0 4px; line-height: 1;\n  background: none; border: none; cursor: pointer;\n  font-size: 0.72rem; color: var(--muted); opacity: 0.55;\n  transition: opacity var(--dur-quick, 120ms) var(--ease-standard, ease),\n    color var(--dur-quick, 120ms) var(--ease-standard, ease);\n}\n.shell-cmt-msg:hover .shell-cmt-del, .shell-cmt-del:focus-visible { opacity: 1; }\n.shell-cmt-del:hover { opacity: 1; color: var(--danger, #b00); }\n/* A withdrawn message keeps its place in the thread and stops asking to be read. */\n.shell-cmt-msg.gone .shell-cmt-body { font-style: italic; color: var(--muted); }\n.shell-cmt-author { font: 600 0.76rem/1.2 var(--font-ui); }\n.shell-cmt-ts { font: 0.68rem/1.2 var(--font-ui); color: var(--muted); }\n.shell-cmt-body { font: 0.82rem/1.45 var(--font-read, var(--font-ui)); white-space: pre-wrap; }\n.shell-cmt-input {\n  width: 100%; box-sizing: border-box; resize: vertical;\n  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);\n  background: var(--card); color: var(--ink);\n  font: 0.82rem/1.4 var(--font-read, var(--font-ui)); padding: 6px 8px;\n}\n.shell-cmt-input:focus { outline: none; border-color: var(--accent); }\n.shell-cmt-actions { display: flex; gap: 6px; justify-content: flex-end; }\n.shell-cmt-btn {\n  font: 0.76rem/1 var(--font-ui); padding: 5px 10px;\n  border-radius: var(--radius-sm); border: 1px solid var(--line);\n  background: var(--card); color: var(--ink); cursor: pointer;\n}\n.shell-cmt-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }\n/* The picker, when one thing has more than one thread. */\n.shell-cmt-row {\n  display: flex; gap: 6px; align-items: baseline; width: 100%; text-align: left;\n  border: 0; background: none; color: var(--ink); cursor: pointer;\n  padding: 6px 4px; border-radius: var(--radius-sm);\n}\n.shell-cmt-row:hover { background: var(--accent-soft); }\n.shell-cmt-row.resolved { opacity: 0.55; }\n.shell-cmt-row-author { font: 600 0.74rem/1.2 var(--font-ui); flex: none; }\n.shell-cmt-row-gist {\n  font: 0.78rem/1.3 var(--font-read, var(--font-ui)); color: var(--muted);\n  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n}\n.shell-cmt-row-count { margin-left: auto; font: 0.7rem/1 var(--font-ui); color: var(--muted); }\n.shell-cmt-new {\n  align-self: flex-start; font: 0.76rem/1 var(--font-ui);\n  border: 1px dashed var(--line); background: none; color: var(--muted);\n  border-radius: var(--radius-sm); padding: 5px 10px; cursor: pointer;\n}\n.shell-cmt-new:hover { color: var(--accent); border-color: var(--accent); }\n"],"mappings":";AACA,CAAC;AAAiB,WAAS;AAAM,kBAAgB;AAAQ,OAAK;AAAK;AACnE,CADC,cACc,CAAC;AAAW,WAAS;AAAM;AAC1C,CAAC;AAAqB,WAAS;AAAM,OAAK;AAAK,eAAa;AAAU;AAUtE,CAAC;AACC,eAAa;AAAM,QAAM;AAAM,WAAS,EAAE;AAAK,eAAa;AAC5D,cAAY;AAAM,UAAQ;AAAM,UAAQ;AACxC,aAAW;AAAS,SAAO,IAAI;AAAU,WAAS;AAClD,cAAY,QAAQ,IAAI,WAAW,EAAE,OAAO,IAAI,eAAe,EAAE,KAAK,EACpE,MAAM,IAAI,WAAW,EAAE,OAAO,IAAI,eAAe,EAAE;AACvD;AACA,CAAC,aAAa,OAAO,CAPpB;AAOoC,CAPpC,aAOkD;AAAiB,WAAS;AAAG;AAChF,CARC,aAQa;AAAS,WAAS;AAAG,SAAO,IAAI,QAAQ,EAAE;AAAO;AAE/D,CAHC,aAGa,CAAC,KAAK,CAAC;AAAiB,cAAY;AAAQ,SAAO,IAAI;AAAU;AAC/E,CAAC;AAAmB,QAAM,IAAI,OAAO,CAAC,IAAI,IAAI;AAAY;AAC1D,CAAC;AAAe,QAAM,OAAO,CAAC,IAAI,IAAI;AAAY,SAAO,IAAI;AAAU;AACvE,CAHqB;AAGH,QAAM,OAAO,CAAC,KAAK,IAAI,WAAW,EAAE,IAAI;AAAa,eAAa;AAAU;AAC9F,CAAC;AACC,SAAO;AAAM,cAAY;AAAY,UAAQ;AAC7C,UAAQ,IAAI,MAAM,IAAI;AAAc,iBAAe,IAAI;AACvD,cAAY,IAAI;AAAS,SAAO,IAAI;AACpC,QAAM,OAAO,CAAC,IAAI,IAAI,WAAW,EAAE,IAAI;AAAa,WAAS,IAAI;AACnE;AACA,CANC,eAMe;AAAS,WAAS;AAAM,gBAAc,IAAI;AAAW;AACrE,CAAC;AAAoB,WAAS;AAAM,OAAK;AAAK,mBAAiB;AAAU;AACzE,CAAC;AACC,QAAM,OAAO,CAAC,EAAE,IAAI;AAAY,WAAS,IAAI;AAC7C,iBAAe,IAAI;AAAc,UAAQ,IAAI,MAAM,IAAI;AACvD,cAAY,IAAI;AAAS,SAAO,IAAI;AAAQ,UAAQ;AACtD;AACA,CALC,aAKa,CAAC;AAAU,cAAY,IAAI;AAAW,gBAAc,IAAI;AAAW,SAAO,IAAI,WAAW,EAAE;AAAO;AAEhH,CAAC;AACC,WAAS;AAAM,OAAK;AAAK,eAAa;AAAU,SAAO;AAAM,cAAY;AACzE,UAAQ;AAAG,cAAY;AAAM,SAAO,IAAI;AAAQ,UAAQ;AACxD,WAAS,IAAI;AAAK,iBAAe,IAAI;AACvC;AACA,CALC,aAKa;AAAS,cAAY,IAAI;AAAgB;AACvD,CANC,aAMa,CA9CE;AA8CU,WAAS;AAAM;AACzC,CAAC;AAAuB,QAAM,IAAI,OAAO,CAAC,IAAI,IAAI;AAAY,QAAM;AAAM;AAC1E,CAAC;AACC,QAAM,OAAO,CAAC,IAAI,IAAI,WAAW,EAAE,IAAI;AAAa,SAAO,IAAI;AAC/D,YAAU;AAAQ,iBAAe;AAAU,eAAa;AAC1D;AACA,CAAC;AAAsB,eAAa;AAAM,QAAM,MAAM,CAAC,EAAE,IAAI;AAAY,SAAO,IAAI;AAAU;AAC9F,CAAC;AACC,cAAY;AAAY,QAAM,OAAO,CAAC,EAAE,IAAI;AAC5C,UAAQ,IAAI,OAAO,IAAI;AAAS,cAAY;AAAM,SAAO,IAAI;AAC7D,iBAAe,IAAI;AAAc,WAAS,IAAI;AAAM,UAAQ;AAC9D;AACA,CALC,aAKa;AAAS,SAAO,IAAI;AAAW,gBAAc,IAAI;AAAW;","names":[]}

package/dist/index.cjs

@@ -640,9 +640,14 @@ function placeAnchored(panel, anchor, width, prefer, keepClear) {
   const CAP = window.innerHeight * 0.7;
   const MIN_H = 140;
   panel.style.width = `${width}px`;
-  const leftOf = a.left - width - GAP2;
-  const alignedRight = Math.min(a.right - width, window.innerWidth - width - 8);
-  panel.style.left = `${Math.round(prefer === "left" && leftOf >= 8 ? leftOf : Math.max(8, prefer === "left" ? a.left : alignedRight))}px`;
+  if (prefer === "centre") {
+    const centred = a.left + a.width / 2 - width / 2;
+    panel.style.left = `${Math.round(Math.min(Math.max(8, centred), window.innerWidth - width - 8))}px`;
+  } else {
+    const leftOf = a.left - width - GAP2;
+    const alignedRight = Math.min(a.right - width, window.innerWidth - width - 8);
+    panel.style.left = `${Math.round(prefer === "left" && leftOf >= 8 ? leftOf : Math.max(8, prefer === "left" ? a.left : alignedRight))}px`;
+  }
   let bottomLimit = window.innerHeight - 8;
   for (const selector of keepClear) {
     const bar = document.querySelector(selector);
@@ -650,6 +655,16 @@ function placeAnchored(panel, anchor, width, prefer, keepClear) {
     const r = bar.getBoundingClientRect();
     if (r.height > 0) bottomLimit = Math.min(bottomLimit, r.top - 6);
   }
+  if (prefer === "centre") {
+    const height = Math.min(CAP, Math.max(MIN_H, panel.offsetHeight));
+    const mid = a.top + a.height / 2 - height / 2;
+    if (mid >= 8 && mid + height <= bottomLimit) {
+      panel.style.top = `${Math.round(mid)}px`;
+      panel.style.bottom = "auto";
+      panel.style.maxHeight = `${Math.round(CAP)}px`;
+      return;
+    }
+  }
   const roomBelow = bottomLimit - (a.bottom + GAP2);
   const roomAbove = a.top - GAP2 - 8;
   if (roomAbove > roomBelow) {
@@ -663,6 +678,75 @@ function placeAnchored(panel, anchor, width, prefer, keepClear) {
   }
 }
 
+// src/ids.ts
+function gameIdify(text) {
+  return text.toLowerCase().replace(/['’]/g, "").replace(/[^a-z0-9-]+/g, "-").replace(/-+/g, "-").replace(/^-+|-+$/g, "");
+}
+function isValidGameId(gameId) {
+  return /^[a-z0-9]([a-z0-9-]*[a-z0-9])?$/.test(gameId);
+}
+
+// src/id-editor.ts
+function openGameIdEditor(opts) {
+  const slugify = opts.slugify ?? gameIdify;
+  const valid = opts.validate ?? isValidGameId;
+  const panel = openAnchoredPanel({
+    anchor: opts.anchor,
+    className: "shell-id-editor",
+    title: opts.title ?? "Game ID",
+    width: 260,
+    ...opts.prefer !== void 0 ? { prefer: opts.prefer } : {}
+  });
+  if (!panel) return false;
+  const input = el("input", "shell-id-input");
+  input.type = "text";
+  input.value = opts.value;
+  input.placeholder = opts.derived || "<game-id>";
+  input.spellcheck = false;
+  const hint = el("div", "shell-id-hint", "Lower case, digits, hyphens. Empty = auto from the name.");
+  const actions = el("div", "shell-id-actions");
+  const reset = el("button", "shell-id-reset", "Reset to auto");
+  const set = el("button", "shell-id-set", "Set");
+  reset.type = "button";
+  set.type = "button";
+  actions.append(reset, set);
+  panel.body.append(input, hint, actions);
+  const legal = () => {
+    const v = input.value.trim();
+    return v === "" || valid(v);
+  };
+  const sync = () => {
+    set.disabled = !legal();
+    hint.classList.toggle("bad", !legal());
+  };
+  const commit = () => {
+    if (!legal()) return;
+    opts.onCommit(input.value.trim());
+    panel.close();
+  };
+  input.addEventListener("input", sync);
+  input.addEventListener("keydown", (e) => {
+    e.stopPropagation();
+    if (e.key === "Enter") {
+      e.preventDefault();
+      commit();
+    }
+    if (e.key === "Tab" && input.value.trim() !== "") {
+      e.preventDefault();
+      input.value = slugify(input.value);
+      sync();
+    }
+  });
+  set.addEventListener("click", commit);
+  reset.addEventListener("click", () => {
+    opts.onCommit("");
+    panel.close();
+  });
+  sync();
+  setTimeout(() => input.focus(), 0);
+  return true;
+}
+
 // src/vc-view.ts
 function foldVc(shards, keys) {
   if (!keys) return void 0;
@@ -896,7 +980,7 @@ var stamp = (ts) => {
   return when.toLocaleString(void 0, { dateStyle: "medium", timeStyle: "short" });
 };
 var gist = (thread) => {
-  const first = thread.messages[0]?.body ?? "";
+  const first = thread.messages.find((m) => m.deleted !== true)?.body ?? "";
   return first.length > 60 ? `${first.slice(0, 57)}\u2026` : first;
 };
 function openComments(opts) {
@@ -909,7 +993,7 @@ function openComments(opts) {
     // Below its button (the topline), unlike Patterpad's inspector rows which
     // want it to the left; and never over the problems bar, which an author may
     // be stepping through while reading the thread.
-    prefer: "below",
+    prefer: opts.prefer ?? "below",
     keepClear: [".problembar"]
   });
   if (!panel) return;
@@ -945,19 +1029,26 @@ function openComments(opts) {
     const thread = open;
     if (thread) {
       const list = el("div", { className: `shell-cmt-list${thread.resolved === true ? " resolved" : ""}` });
-      for (const message of thread.messages) {
+      thread.messages.forEach((message, index) => {
+        const head = el(
+          "div",
+          { className: "shell-cmt-msg-head" },
+          el("span", { className: "shell-cmt-author", text: message.author === "" ? "Someone" : message.author }),
+          el("span", { className: "shell-cmt-ts", text: stamp(message.ts) })
+        );
+        if (opts.deleteMessage && message.deleted !== true) {
+          const bin = el("button", { className: "shell-cmt-del", text: "\u2715" });
+          bin.title = "Delete this comment";
+          bin.addEventListener("click", () => opts.deleteMessage?.(thread.id, index));
+          head.append(bin);
+        }
         list.append(el(
           "div",
-          { className: "shell-cmt-msg" },
-          el(
-            "div",
-            { className: "shell-cmt-msg-head" },
-            el("span", { className: "shell-cmt-author", text: message.author === "" ? "Someone" : message.author }),
-            el("span", { className: "shell-cmt-ts", text: stamp(message.ts) })
-          ),
-          el("div", { className: "shell-cmt-body", text: message.body })
+          { className: `shell-cmt-msg${message.deleted === true ? " gone" : ""}` },
+          head,
+          el("div", { className: "shell-cmt-body", text: message.deleted === true ? "Comment deleted" : message.body })
         ));
-      }
+      });
       body.append(list);
     }
     const input = el("textarea", { className: "shell-cmt-input" });
@@ -1304,11 +1395,13 @@ exports.el = el;
 exports.expandableRow = expandableRow;
 exports.focusNewRow = focusNewRow;
 exports.foldVc = foldVc;
+exports.gameIdify = gameIdify;
 exports.hideTip = hideTip;
 exports.icon = icon;
 exports.iconBtn = iconBtn;
 exports.iconSvg = iconSvg;
 exports.initTooltips = initTooltips;
+exports.isValidGameId = isValidGameId;
 exports.labelled = labelled;
 exports.lockControls = lockControls;
 exports.lockNotice = lockNotice;
@@ -1318,6 +1411,7 @@ exports.mountSettingsDialog = mountSettingsDialog;
 exports.moveItem = moveItem;
 exports.openAnchoredPanel = openAnchoredPanel;
 exports.openComments = openComments;
+exports.openGameIdEditor = openGameIdEditor;
 exports.openNotesEditor = openNotesEditor;
 exports.paintVcBadges = paintVcBadges;
 exports.pinButton = pinButton;