@wildwinter/app-shell 0.36.0 → 0.38.0

package/README.md

@@ -106,6 +106,31 @@ 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");
+  ```
+
+- **`revealRow`** - land on one row of a settings list. `expandableRow` takes a
+  `name` and stamps it on the row; `revealRow(within, name)` opens that row's
+  details, brings it to the middle of its scroller and lights it for a moment.
+  "Go to definition" in both apps opened the page a property is declared on and
+  stopped there, with the row off screen. It returns false when no row carries
+  the name, so a host whose page fills in late asks again on a later frame.
+  Brings nothing new: the light is in `settings.css`.
+
+  ```ts
+  list.append(expandableRow({ line, details, name: decl.name }));
+  revealRow(document, "mood");
+  ```
+
 - **`--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);
@@ -486,6 +486,7 @@ var PANE_MENU = {
 // src/settings.ts
 function expandableRow(opts) {
   const row = el("div", "set-row");
+  if (opts.name !== void 0) row.dataset.name = opts.name;
   const line = el("div", "set-rowline");
   if (opts.details && opts.details.length) {
     const details = el("div", "set-details");
@@ -511,6 +512,19 @@ function expandableRow(opts) {
   }
   return row;
 }
+function revealRow(within, name) {
+  const row = [...within.querySelectorAll(".set-row")].find((r) => r.dataset.name === name);
+  if (!row) return false;
+  const toggle = row.querySelector(".set-rowline > .set-expand");
+  if (toggle && toggle.getAttribute("aria-expanded") !== "true") toggle.click();
+  const still = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+  row.scrollIntoView({ block: "center", behavior: still ? "auto" : "smooth" });
+  row.classList.remove("landed");
+  void row.offsetWidth;
+  row.classList.add("landed");
+  row.addEventListener("animationend", () => row.classList.remove("landed"), { once: true });
+  return true;
+}
 function focusNewRow(listEl) {
   const last = listEl?.lastElementChild;
   if (!(last instanceof HTMLElement)) return;
@@ -680,14 +694,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
@@ -1530,7 +1544,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;
@@ -1538,17 +1552,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);
   };
@@ -1622,13 +1636,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
@@ -1649,6 +1663,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;
@@ -1789,6 +1840,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,12 +1876,14 @@ exports.propertyNameify = propertyNameify;
 exports.propertyRefProblem = propertyRefProblem;
 exports.renderStepperBar = renderStepperBar;
 exports.revalidatePropertyRefs = revalidatePropertyRefs;
+exports.revealRow = revealRow;
 exports.saveIndicator = saveIndicator;
 exports.showAbout = showAbout;
 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