@wildwinter/app-shell 0.14.0 → 0.15.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/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;