@wildwinter/app-shell 0.18.0 → 0.20.0

package/dist/anchored.css

@@ -10,6 +10,11 @@
   color: var(--ink);
   box-shadow: var(--shadow-2, var(--shadow-1));
   overflow: hidden;
+  animation: var(--anim-panel-in);
+}
+.shell-anchored.closing {
+  animation: var(--anim-panel-out);
+  pointer-events: none;
 }
 .shell-anchored-head {
   flex: none;

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\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":[]}
+{"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  /* The family's panel motion. Placement is set in script as left/top, so a\n     transform-based keyframe composes with it rather than fighting it. */\n  animation: var(--anim-panel-in);\n}\n/* Exit: .closing swaps the enter keyframe for its reverse, and the fading panel\n   stops taking clicks so a second press cannot reach a control on its way out.\n   Zero-duration under prefers-reduced-motion, where teardown is immediate. */\n.shell-anchored.closing { animation: var(--anim-panel-out); pointer-events: none; }\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;AAGV,aAAW,IAAI;AACjB;AAIA,CAfC,cAec,CAAC;AAAU,aAAW,IAAI;AAAmB,kBAAgB;AAAM;AAClF,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

@@ -1,4 +1,11 @@
 /* src/comments.css */
+.shell-cmt-quote {
+  margin: 0;
+  padding: 0.2rem 0.5rem;
+  border-left: 2px solid var(--accent);
+  color: var(--muted);
+  font: italic 0.8rem var(--font-ui);
+}
 .shell-cmt-list {
   display: flex;
   flex-direction: column;

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/* 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":[]}
+{"version":3,"sources":["../src/comments.css"],"sourcesContent":["/* A comment thread inside the anchored panel (comments.ts). */\n\n/* The span the thread is pinned to (quoteFor). A quotation rather than a heading:\n   these are somebody else's words, not a title the panel gave itself. */\n.shell-cmt-quote {\n  margin: 0; padding: 0.2rem 0.5rem;\n  border-left: 2px solid var(--accent);\n  color: var(--muted); font: italic 0.8rem var(--font-ui);\n}\n\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":";AAIA,CAAC;AACC,UAAQ;AAAG,WAAS,OAAO;AAC3B,eAAa,IAAI,MAAM,IAAI;AAC3B,SAAO,IAAI;AAAU,QAAM,OAAO,OAAO,IAAI;AAC/C;AAEA,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

@@ -488,6 +488,29 @@ function pinButton(opts) {
   return b;
 }
 
+// src/exit.ts
+function closeWithExit(element, done) {
+  element.classList.add("closing");
+  const seconds = parseFloat(getComputedStyle(element).animationDuration) || 0;
+  if (seconds === 0) {
+    done();
+    return;
+  }
+  let fired = false;
+  const finish = () => {
+    if (fired) return;
+    fired = true;
+    element.removeEventListener("animationend", onEnd);
+    clearTimeout(timer2);
+    done();
+  };
+  const onEnd = (e) => {
+    if (e.target === element) finish();
+  };
+  element.addEventListener("animationend", onEnd);
+  const timer2 = setTimeout(finish, seconds * 1e3 + 120);
+}
+
 // src/confirm.ts
 function confirmDialog(opts) {
   return new Promise((resolve) => {
@@ -509,21 +532,9 @@ function confirmDialog(opts) {
       if (done) return;
       done = true;
       resolve(ok);
-      dlg.classList.add("closing");
-      const dur = parseFloat(getComputedStyle(dlg).animationDuration) || 0;
-      const teardown = () => {
+      closeWithExit(dlg, () => {
         dlg.close();
         dlg.remove();
-      };
-      if (dur === 0) {
-        teardown();
-        return;
-      }
-      const timer2 = setTimeout(teardown, dur * 1e3 + 120);
-      dlg.addEventListener("animationend", (e) => {
-        if (e.target !== dlg) return;
-        clearTimeout(timer2);
-        teardown();
       });
     };
     cancel.addEventListener("click", () => finish(false));
@@ -616,8 +627,10 @@ function openAnchoredPanel(opts) {
     if (current?.panel === panel) current = null;
     document.removeEventListener("pointerdown", onDown, true);
     document.removeEventListener("keydown", onKey, true);
-    panel.remove();
-    opts.onClose?.();
+    closeWithExit(panel, () => {
+      opts.onClose?.();
+      panel.remove();
+    });
   };
   closeBtn.addEventListener("click", close);
   const onDown = (e) => {
@@ -704,7 +717,8 @@ function openGameIdEditor(opts) {
     className: "shell-id-editor",
     title: opts.title ?? "Game ID",
     width: 260,
-    ...opts.prefer !== void 0 ? { prefer: opts.prefer } : {}
+    ...opts.prefer !== void 0 ? { prefer: opts.prefer } : {},
+    ...opts.keepClear !== void 0 ? { keepClear: opts.keepClear } : {}
   });
   if (!panel) return false;
   const input = el("input", "shell-id-input");
@@ -1003,7 +1017,7 @@ function openComments(opts) {
     // want it to the left; and never over the problems bar, which an author may
     // be stepping through while reading the thread.
     prefer: opts.prefer ?? "below",
-    keepClear: [".problembar"]
+    keepClear: opts.keepClear ?? [".problembar"]
   });
   if (!panel) return;
   const { body, close } = panel;
@@ -1037,6 +1051,10 @@ function openComments(opts) {
     }
     const thread = open;
     if (thread) {
+      const quote = opts.quoteFor?.(thread);
+      if (quote !== void 0 && quote !== "") {
+        body.append(el("blockquote", { className: "shell-cmt-quote", text: quote }));
+      }
       const list = el("div", { className: `shell-cmt-list${thread.resolved === true ? " resolved" : ""}` });
       thread.messages.forEach((message, index) => {
         const head = el(
@@ -1488,6 +1506,7 @@ exports.PALETTE_SIZE = PALETTE_SIZE;
 exports.PANE_MENU = PANE_MENU;
 exports.askIdentity = askIdentity;
 exports.closeAnchoredPanel = closeAnchoredPanel;
+exports.closeWithExit = closeWithExit;
 exports.colourFor = colourFor;
 exports.colourIndex = colourIndex;
 exports.confirmDialog = confirmDialog;