@wildwinter/app-shell 0.16.0 → 0.18.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/index.cjs

@@ -136,6 +136,15 @@ var icon = {
   dot: "\u25CF",
   /** Play, in the sense of "run this". */
   play: "\u25B6",
+  /** Start the thing again from the top: a play session, a sweep. Named for the
+   *  act, not the arrow, which is the table's rule. */
+  restart: "\u27F2",
+  /** The three ways a collection can be shown. Named by what you get rather than
+   *  by the glyph, so a second app can pick the same three without copying
+   *  somebody's taste in symbols. */
+  viewCards: "\u25A6",
+  viewTable: "\u2630",
+  viewNode: "\u25C8",
   // --- handling -------------------------------------------------------------
   /** The drag grip on a reorderable row. */
   grip: "\u283F",
@@ -1379,6 +1388,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;
@@ -1416,7 +1518,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;