@wildwinter/app-shell 0.35.1 → 0.37.0

package/README.md

@@ -106,6 +106,18 @@ needing and never had.
   staleBar({ subject: "The project", onRestart: () => void rebuild() });
   ```
 
+- **`toast`** - a transient remark: "Bundle published", "Save refused: ...".
+  Bottom-right, an outlined card on the surface colour with the kind in the
+  border, on the shared panel motion; one at a time, 4s (7s for an error).
+  Both apps had one, and they agreed on nothing but the sentences - place,
+  colour, timing, motion and ARIA all differed. It mounts its own node, so a
+  second window gets it by importing it. Bring `toast.css`.
+
+  ```ts
+  toast(`Bundle published\n${where}`, "ok");
+  toast(`Save refused: ${err}`, "error");
+  ```
+
 - **`--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

package/dist/index.cjs

@@ -151,23 +151,23 @@ function initTooltips(opts = {}) {
 
 // src/dom.ts
 function el(tag, classNameOrProps, ...children) {
-  const node = document.createElement(tag);
+  const node2 = document.createElement(tag);
   const props = typeof classNameOrProps === "string" ? { className: classNameOrProps } : classNameOrProps ?? {};
-  if (props.className) node.className = props.className;
-  if (props.text !== void 0 && props.text !== null) node.textContent = props.text;
-  if (props.title !== void 0) node.title = props.title;
+  if (props.className) node2.className = props.className;
+  if (props.text !== void 0 && props.text !== null) node2.textContent = props.text;
+  if (props.title !== void 0) node2.title = props.title;
   if (props.tip !== void 0) {
-    node.dataset["tip"] = props.tip;
-    node.setAttribute("aria-label", props.tip);
+    node2.dataset["tip"] = props.tip;
+    node2.setAttribute("aria-label", props.tip);
     ensureTooltipHost();
   }
-  if (props.onClick) node.addEventListener("click", props.onClick);
+  if (props.onClick) node2.addEventListener("click", props.onClick);
   for (const child of children) {
     if (child === null || child === void 0) continue;
-    node.append(child);
+    node2.append(child);
   }
   checkTooltipHost();
-  return node;
+  return node2;
 }
 function iconBtn(glyph, title, onClick, disabled = false, danger = false) {
   const b = el("button", `shell-icon${danger ? " danger" : ""}`);
@@ -199,7 +199,7 @@ function tagChips(holder, onChange) {
   const wrap = el("div", "shell-tags");
   const input = el("input", "shell-tag-input");
   input.type = "text";
-  input.placeholder = "add value";
+  input.placeholder = "Add value";
   input.spellcheck = false;
   const makeChip = (v) => {
     const chip = el("span", "shell-tag", v);
@@ -335,7 +335,11 @@ var openVar = { nav: "--nav-open-w", inspector: "--insp-open-w" };
 var collapseClass = { nav: "no-nav", inspector: "no-inspector" };
 function mountPaneShell(host, opts) {
   const cfg = { nav: opts.nav, inspector: opts.inspector };
-  const open = { nav: opts.initial?.open?.nav ?? true, inspector: opts.initial?.open?.inspector ?? true };
+  const offered = (side) => cfg[side].offered !== false;
+  const open = {
+    nav: offered("nav") && (opts.initial?.open?.nav ?? true),
+    inspector: offered("inspector") && (opts.initial?.open?.inspector ?? true)
+  };
   const width = { ...opts.initial?.width ?? {} };
   const el2 = (tag, cls) => {
     const n = document.createElement(tag);
@@ -365,6 +369,8 @@ function mountPaneShell(host, opts) {
   const root = el2("div", "pane-shell");
   root.append(topbar, panes);
   host.append(root);
+  if (!offered("nav")) navToggle.remove();
+  if (!offered("inspector")) inspToggle.remove();
   function applyToggleGlyph(side, button) {
     const isOpen = open[side];
     button.textContent = side === "nav" ? isOpen ? "\u2039" : "\u203A" : isOpen ? "\u203A" : "\u2039";
@@ -381,8 +387,8 @@ function mountPaneShell(host, opts) {
     panes.style.setProperty(openVar.inspector, width.inspector !== void 0 ? `${width.inspector}px` : cfg.inspector.defaultWidth);
     applyToggleGlyph("nav", navToggle);
     applyToggleGlyph("inspector", inspToggle);
-    navResizer.style.display = cfg.nav.resizable === false ? "none" : "";
-    inspResizer.style.display = cfg.inspector.resizable === false ? "none" : "";
+    navResizer.style.display = cfg.nav.resizable === false || !offered("nav") ? "none" : "";
+    inspResizer.style.display = cfg.inspector.resizable === false || !offered("inspector") ? "none" : "";
   }
   const snapshot = () => ({ open: { ...open }, width: { ...width } });
   const persist = () => opts.onChange?.(snapshot());
@@ -393,7 +399,7 @@ function mountPaneShell(host, opts) {
     persist();
   }
   function togglePane(side) {
-    setPaneOpen(side, !open[side]);
+    if (offered(side)) setPaneOpen(side, !open[side]);
   }
   function resetWidths() {
     delete width.nav;
@@ -674,14 +680,14 @@ function closeWithExit(element, done) {
     if (fired) return;
     fired = true;
     element.removeEventListener("animationend", onEnd);
-    clearTimeout(timer2);
+    clearTimeout(timer3);
     done();
   };
   const onEnd = (e) => {
     if (e.target === element) finish();
   };
   element.addEventListener("animationend", onEnd);
-  const timer2 = setTimeout(finish, seconds * 1e3 + 120);
+  const timer3 = setTimeout(finish, seconds * 1e3 + 120);
 }
 
 // src/confirm.ts
@@ -1524,7 +1530,7 @@ function createSaveController(opts) {
   let auto = true;
   let dirty = false;
   let dirtySince = 0;
-  let timer2;
+  let timer3;
   let inFlight;
   const setStatus = (next) => {
     if (next === status) return;
@@ -1532,17 +1538,17 @@ function createSaveController(opts) {
     opts.onStatus?.(status);
   };
   const clearTimer = () => {
-    if (timer2 === void 0) return;
-    clearTimeout(timer2);
-    timer2 = void 0;
+    if (timer3 === void 0) return;
+    clearTimeout(timer3);
+    timer3 = void 0;
   };
   const arm = () => {
     clearTimer();
     if (!auto) return;
     const deadline = dirtySince + maxWaitMs;
     const wait = Math.max(0, Math.min(delayMs, deadline - Date.now()));
-    timer2 = setTimeout(() => {
-      timer2 = void 0;
+    timer3 = setTimeout(() => {
+      timer3 = void 0;
       void run();
     }, wait);
   };
@@ -1616,13 +1622,13 @@ var WORDS = {
   unsaved: "Unsaved"
 };
 function saveIndicator(initial = "saved") {
-  const node = el("span");
+  const node2 = el("span");
   const set = (status) => {
-    node.className = `savestat ${status}`;
-    node.textContent = WORDS[status];
+    node2.className = `savestat ${status}`;
+    node2.textContent = WORDS[status];
   };
   set(initial);
-  return { el: node, set };
+  return { el: node2, set };
 }
 
 // src/stale.ts
@@ -1643,6 +1649,43 @@ function staleBar(opts) {
   );
 }
 
+// src/toast.ts
+var DURATION = { info: 4e3, ok: 4e3, error: 7e3 };
+var node;
+var timer2 = 0;
+var seq = 0;
+function mount() {
+  if (node && node.isConnected) return node;
+  node = el("div", { className: "shell-toast" });
+  node.setAttribute("role", "status");
+  node.setAttribute("aria-live", "polite");
+  node.hidden = true;
+  document.body.append(node);
+  return node;
+}
+function toast(message, kind = "info", opts = {}) {
+  const t = mount();
+  const id = ++seq;
+  t.textContent = message;
+  t.className = `shell-toast ${kind}`;
+  t.hidden = false;
+  window.clearTimeout(timer2);
+  timer2 = window.setTimeout(() => {
+    closeWithExit(t, () => {
+      if (seq === id) t.hidden = true;
+    });
+  }, opts.duration ?? DURATION[kind]);
+}
+function dismissToast() {
+  if (!node || node.hidden) return;
+  window.clearTimeout(timer2);
+  const id = seq;
+  const t = node;
+  closeWithExit(t, () => {
+    if (seq === id) t.hidden = true;
+  });
+}
+
 // src/stepper.ts
 function renderStepperBar(host, opts) {
   const { items } = opts;
@@ -1783,6 +1826,7 @@ exports.colourIndex = colourIndex;
 exports.confirmDialog = confirmDialog;
 exports.createNavHistory = createNavHistory;
 exports.createSaveController = createSaveController;
+exports.dismissToast = dismissToast;
 exports.dupGuard = dupGuard;
 exports.el = el;
 exports.expandableRow = expandableRow;
@@ -1824,6 +1868,7 @@ exports.staleBar = staleBar;
 exports.tagChips = tagChips;
 exports.tipAt = tipAt;
 exports.tipBold = tipBold;
+exports.toast = toast;
 exports.vcBadgeFor = vcBadgeFor;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map