@wildwinter/app-shell 0.17.0 → 0.19.0

package/README.md

@@ -64,13 +64,61 @@ event loop (16ms), so a fast inner loop neither floods IPC nor stutters.
 **A strip, not a modal.** The window that started the job shows it; the rest of
 the app stays usable.
 
+## v0.18 (the bars, and the third semantic colour)
+
+Three drawings each app had grown its own copy of, and the token the family kept
+needing and never had.
+
+- **`renderStepperBar`** - a bottom bar that walks a list of things to attend to,
+  one at a time: count, previous, position, next, the entry as a button, an
+  action slot. Four bars across the two apps are this shape (problems, review
+  walks). It knows about a list and an index; it knows nothing about what a
+  problem or a comment is.
+
+  ```ts
+  import { renderStepperBar } from "@wildwinter/app-shell";
+  import "@wildwinter/app-shell/stepper.css";
+  renderStepperBar(host, {
+    items: problems.map((p) => ({ kind: p.severity, kindClass: `sev-${p.severity}`, where: p.path, text: p.message })),
+    at, tone: "danger", onStep: (i) => { at = i; paint(); }, onGo: (i) => jumpTo(problems[i]),
+  });
+  ```
+
+  Whether stepping NAVIGATES is the caller's decision, and the bar takes no view:
+  an ambient surface moves the view and never the focus; a mode you entered may
+  take you somewhere.
+
+- **`saveIndicator`** - the six lines that draw what `createSaveController`
+  already computes. Three states, always present: a dot that only ever appears
+  to worry you leaves "did that get written?" unanswered.
+
+  ```ts
+  const ind = saveIndicator();
+  topbar.append(ind.el);
+  const saver = createSaveController({ write, onStatus: ind.set });
+  ```
+
+- **`staleBar`** - a running session that has fallen behind its source. The app
+  supplies the noun and the callback; the sentence is shared, because both apps
+  had written it independently and landed a word apart.
+
+  ```ts
+  staleBar({ subject: "The project", onRestart: () => void rebuild() });
+  ```
+
+- **`--ok`** joins `--danger` and `--warn` in `tokens.css`, with a `light-dark()`
+  default every palette should override in its own `theme.css`. It is the only
+  colour in the grammar layer, and it is there because it kept not being
+  anywhere: "all is well" was being met with raw green literals that could not
+  theme-shift.
+
 ## Roadmap
 
 Later slices lift the rest of the common shell from Patterpad (canonical),
-reconciling Storylet Studio's variants: the pane grid + toggles, the save/dirty
-controller, the command palette, the anchored popover/panel + toast, and the
-detached-window out-of-date / restart pattern. Storylet Studio migrates each
-first (proving app-agnosticism); Patterpad follows.
+reconciling Storylet Studio's variants: the pane grid + toggles, the command
+palette, and version control's renderer half. Storylet Studio migrates each
+first (proving app-agnosticism); Patterpad follows - see
+`patterkit/design/from-storylets/patterpad-onto-the-shell.md` for that order.
 
 ## Release
 

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) => {
@@ -1037,6 +1050,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(
@@ -1388,6 +1405,99 @@ function createSaveController(opts) {
   };
 }
 
+// src/save-view.ts
+var WORDS = {
+  saved: "Saved",
+  saving: "Saving\u2026",
+  unsaved: "Unsaved"
+};
+function saveIndicator(initial = "saved") {
+  const node = el("span");
+  const set = (status) => {
+    node.className = `savestat ${status}`;
+    node.textContent = WORDS[status];
+  };
+  set(initial);
+  return { el: node, set };
+}
+
+// src/stale.ts
+function staleBar(opts) {
+  const label2 = opts.restartLabel ?? "Restart";
+  return el(
+    "div",
+    { className: "stale-bar" },
+    el("span", {
+      className: "stale-bar-msg",
+      text: `${opts.subject} changed in the editor. ${opts.advice ?? "Restart to play the new version."}`
+    }),
+    el("button", {
+      className: "stale-bar-go",
+      text: `${icon.restart} ${label2}`,
+      onClick: () => opts.onRestart()
+    })
+  );
+}
+
+// src/stepper.ts
+function renderStepperBar(host, opts) {
+  const { items } = opts;
+  const close = opts.onClose === void 0 ? null : el("button", {
+    className: "stepbar-nav stepbar-close",
+    text: icon.close,
+    tip: opts.closeTip ?? "Close",
+    onClick: opts.onClose
+  });
+  const actions = (opts.actions ?? []).filter((a) => a !== null && a !== void 0);
+  if (items.length === 0) {
+    if (opts.empty === void 0) {
+      host.hidden = true;
+      host.replaceChildren();
+      return;
+    }
+    host.hidden = false;
+    host.replaceChildren(
+      el("span", { className: "stepbar-count muted", text: "0" }),
+      el("span", { className: "stepbar-empty", text: opts.empty }),
+      ...actions,
+      ...close ? [close] : []
+    );
+    return;
+  }
+  host.hidden = false;
+  const index = Math.min(Math.max(opts.at, 0), items.length - 1);
+  const item = items[index];
+  const step = (delta) => opts.onStep((index + delta + items.length) % items.length);
+  const nav = items.length > 1 ? [
+    el("button", {
+      className: "stepbar-nav",
+      text: icon.back,
+      tip: opts.tips?.prev ?? "Previous",
+      onClick: () => step(-1)
+    }),
+    el("span", { className: "stepbar-of", text: `${index + 1}/${items.length}` }),
+    el("button", {
+      className: "stepbar-nav",
+      text: icon.forward,
+      tip: opts.tips?.next ?? "Next",
+      onClick: () => step(1)
+    })
+  ] : [];
+  host.replaceChildren(
+    el("span", { className: `stepbar-count ${opts.tone ?? "muted"}`, text: String(items.length) }),
+    ...nav,
+    el(
+      "button",
+      { className: "stepbar-cur", tip: opts.tips?.go ?? "Go to this", onClick: () => opts.onGo(index) },
+      item.kind === void 0 ? null : el("span", { className: `stepbar-cat${item.kindClass ? ` ${item.kindClass}` : ""}`, text: item.kind }),
+      item.where === void 0 ? null : el("span", { className: "stepbar-where", text: item.where }),
+      el("span", { className: "stepbar-msg", text: item.text })
+    ),
+    ...actions,
+    ...close ? [close] : []
+  );
+}
+
 exports.EDIT_MENU = EDIT_MENU;
 exports.JOB_PROGRESS = JOB_PROGRESS;
 exports.PALETTE = PALETTE;
@@ -1395,6 +1505,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;
@@ -1425,7 +1536,10 @@ exports.openNotesEditor = openNotesEditor;
 exports.paintVcBadges = paintVcBadges;
 exports.pinButton = pinButton;
 exports.placeAnchored = placeAnchored;
+exports.renderStepperBar = renderStepperBar;
+exports.saveIndicator = saveIndicator;
 exports.showAbout = showAbout;
+exports.staleBar = staleBar;
 exports.tagChips = tagChips;
 exports.tipAt = tipAt;
 exports.tipBold = tipBold;