@wildwinter/app-shell 0.26.0 → 0.28.0

package/dist/index.cjs

@@ -1,5 +1,154 @@
 'use strict';
 
+// src/tooltip.ts
+var B_OPEN = "";
+var B_CLOSE = "";
+function tipBold(s) {
+  return `${B_OPEN}${s}${B_CLOSE}`;
+}
+function renderTip(host, text) {
+  host.textContent = "";
+  const re = /\u0002([^\u0003]*)\u0003/g;
+  let last = 0;
+  let m;
+  while ((m = re.exec(text)) !== null) {
+    if (m.index > last) host.append(text.slice(last, m.index));
+    const strong = document.createElement("strong");
+    strong.textContent = m[1] ?? "";
+    host.append(strong);
+    last = m.index + m[0].length;
+  }
+  if (last < text.length) host.append(text.slice(last));
+}
+var inited = false;
+var checked = false;
+var suppressed;
+var SHOW_DELAY = 350;
+var EDGE = 6;
+var GAP = 7;
+var tip = null;
+var timer = 0;
+var active = null;
+var activeKey = null;
+function ensureEl() {
+  if (tip) return tip;
+  const el2 = document.createElement("div");
+  el2.className = "tooltip";
+  el2.setAttribute("role", "tooltip");
+  el2.hidden = true;
+  document.body.appendChild(el2);
+  tip = el2;
+  return el2;
+}
+var rectOf = (anchor) => anchor instanceof HTMLElement ? anchor.getBoundingClientRect() : anchor;
+function place(anchor) {
+  const t = ensureEl();
+  const r = rectOf(anchor);
+  const tr = t.getBoundingClientRect();
+  let top = r.top - tr.height - GAP;
+  if (top < EDGE) top = r.top + r.height + GAP;
+  let left = r.left + r.width / 2 - tr.width / 2;
+  left = Math.max(EDGE, Math.min(left, window.innerWidth - tr.width - EDGE));
+  t.style.left = `${Math.round(left)}px`;
+  t.style.top = `${Math.round(top)}px`;
+}
+function show(anchor) {
+  const text = anchor.dataset["tip"];
+  if (!text) return;
+  paint(anchor, text);
+}
+function paint(anchor, text) {
+  if (suppressed?.()) return;
+  const t = ensureEl();
+  const host = (anchor instanceof HTMLElement ? anchor.closest("dialog[open]") : null) ?? document.body;
+  if (t.parentElement !== host) host.appendChild(t);
+  active = anchor instanceof HTMLElement ? anchor : null;
+  renderTip(t, text);
+  t.hidden = false;
+  t.classList.remove("show");
+  void t.offsetWidth;
+  place(anchor);
+  t.classList.add("show");
+}
+function hide() {
+  if (timer) {
+    window.clearTimeout(timer);
+    timer = 0;
+  }
+  active = null;
+  activeKey = null;
+  if (tip) {
+    tip.hidden = true;
+    tip.classList.remove("show");
+  }
+}
+function schedule(anchor) {
+  if (anchor === active) return;
+  if (timer) window.clearTimeout(timer);
+  timer = window.setTimeout(() => show(anchor), SHOW_DELAY);
+}
+function tipAt(key, rect, text) {
+  if (key === activeKey) {
+    if (tip && !tip.hidden) {
+      renderTip(tip, text);
+      place(rect);
+    }
+    return;
+  }
+  hide();
+  activeKey = key;
+  timer = window.setTimeout(() => {
+    timer = 0;
+    paint(rect, text);
+  }, SHOW_DELAY);
+}
+function hideTip() {
+  hide();
+}
+function ensureTooltipHost() {
+  initTooltips();
+}
+function checkTooltipHost() {
+  if (checked) return;
+  checked = true;
+  setTimeout(() => {
+    if (inited || typeof document === "undefined") return;
+    if (document.querySelector("[data-tip]")) {
+      console.warn("app-shell: something set `data-tip` but no tooltip host is mounted, so those rollovers will not draw. Call initTooltips() once per window.");
+    }
+  }, 0);
+}
+var tipAncestor = (n) => n instanceof Element ? n.closest("[data-tip]") : null;
+function initTooltips(opts = {}) {
+  if (opts.suppressed !== void 0) suppressed = opts.suppressed;
+  if (inited) return;
+  inited = true;
+  document.addEventListener("pointerover", (e) => {
+    const el2 = tipAncestor(e.target);
+    if (el2) schedule(el2);
+  });
+  document.addEventListener("pointerout", (e) => {
+    const el2 = tipAncestor(e.target);
+    if (!el2) return;
+    const to = e.relatedTarget;
+    if (to instanceof Node && el2.contains(to)) return;
+    hide();
+  });
+  document.addEventListener("focusin", (e) => {
+    const el2 = tipAncestor(e.target);
+    if (el2) schedule(el2);
+  });
+  document.addEventListener("focusout", () => hide());
+  document.addEventListener("pointerdown", () => hide(), true);
+  document.addEventListener("scroll", () => {
+    if (active) hide();
+  }, true);
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") hide();
+  });
+  window.addEventListener("blur", () => hide());
+}
+
 // src/dom.ts
 function el(tag, classNameOrProps, ...children) {
   const node = document.createElement(tag);
@@ -10,12 +159,14 @@ function el(tag, classNameOrProps, ...children) {
   if (props.tip !== void 0) {
     node.dataset["tip"] = props.tip;
     node.setAttribute("aria-label", props.tip);
+    ensureTooltipHost();
   }
   if (props.onClick) node.addEventListener("click", props.onClick);
   for (const child of children) {
     if (child === null || child === void 0) continue;
     node.append(child);
   }
+  checkTooltipHost();
   return node;
 }
 function iconBtn(glyph, title, onClick, disabled = false, danger = false) {
@@ -485,7 +636,9 @@ function pinButton(opts) {
   const reflect = () => {
     b.classList.toggle("on", pinned);
     b.setAttribute("aria-pressed", String(pinned));
-    b.title = pinned ? "Pinned on top: click to unpin" : "Click to keep on top";
+    const label2 = pinned ? "Pinned on top: click to unpin" : "Click to keep on top";
+    b.dataset["tip"] = label2;
+    b.setAttribute("aria-label", label2);
   };
   reflect();
   b.addEventListener("click", () => {
@@ -1196,141 +1349,6 @@ function mountJobProgress(host, opts) {
 // src/job.ts
 var JOB_PROGRESS = "job:progress";
 
-// src/tooltip.ts
-var B_OPEN = "";
-var B_CLOSE = "";
-function tipBold(s) {
-  return `${B_OPEN}${s}${B_CLOSE}`;
-}
-function renderTip(host, text) {
-  host.textContent = "";
-  const re = /\u0002([^\u0003]*)\u0003/g;
-  let last = 0;
-  let m;
-  while ((m = re.exec(text)) !== null) {
-    if (m.index > last) host.append(text.slice(last, m.index));
-    const strong = document.createElement("strong");
-    strong.textContent = m[1] ?? "";
-    host.append(strong);
-    last = m.index + m[0].length;
-  }
-  if (last < text.length) host.append(text.slice(last));
-}
-var inited = false;
-var suppressed;
-var SHOW_DELAY = 350;
-var EDGE = 6;
-var GAP = 7;
-var tip = null;
-var timer = 0;
-var active = null;
-var activeKey = null;
-function ensureEl() {
-  if (tip) return tip;
-  const el2 = document.createElement("div");
-  el2.className = "tooltip";
-  el2.setAttribute("role", "tooltip");
-  el2.hidden = true;
-  document.body.appendChild(el2);
-  tip = el2;
-  return el2;
-}
-var rectOf = (anchor) => anchor instanceof HTMLElement ? anchor.getBoundingClientRect() : anchor;
-function place(anchor) {
-  const t = ensureEl();
-  const r = rectOf(anchor);
-  const tr = t.getBoundingClientRect();
-  let top = r.top - tr.height - GAP;
-  if (top < EDGE) top = r.top + r.height + GAP;
-  let left = r.left + r.width / 2 - tr.width / 2;
-  left = Math.max(EDGE, Math.min(left, window.innerWidth - tr.width - EDGE));
-  t.style.left = `${Math.round(left)}px`;
-  t.style.top = `${Math.round(top)}px`;
-}
-function show(anchor) {
-  const text = anchor.dataset["tip"];
-  if (!text) return;
-  paint(anchor, text);
-}
-function paint(anchor, text) {
-  if (suppressed?.()) return;
-  const t = ensureEl();
-  const host = (anchor instanceof HTMLElement ? anchor.closest("dialog[open]") : null) ?? document.body;
-  if (t.parentElement !== host) host.appendChild(t);
-  active = anchor instanceof HTMLElement ? anchor : null;
-  renderTip(t, text);
-  t.hidden = false;
-  t.classList.remove("show");
-  void t.offsetWidth;
-  place(anchor);
-  t.classList.add("show");
-}
-function hide() {
-  if (timer) {
-    window.clearTimeout(timer);
-    timer = 0;
-  }
-  active = null;
-  activeKey = null;
-  if (tip) {
-    tip.hidden = true;
-    tip.classList.remove("show");
-  }
-}
-function schedule(anchor) {
-  if (anchor === active) return;
-  if (timer) window.clearTimeout(timer);
-  timer = window.setTimeout(() => show(anchor), SHOW_DELAY);
-}
-function tipAt(key, rect, text) {
-  if (key === activeKey) {
-    if (tip && !tip.hidden) {
-      renderTip(tip, text);
-      place(rect);
-    }
-    return;
-  }
-  hide();
-  activeKey = key;
-  timer = window.setTimeout(() => {
-    timer = 0;
-    paint(rect, text);
-  }, SHOW_DELAY);
-}
-function hideTip() {
-  hide();
-}
-var tipAncestor = (n) => n instanceof Element ? n.closest("[data-tip]") : null;
-function initTooltips(opts = {}) {
-  if (inited) return;
-  inited = true;
-  suppressed = opts.suppressed;
-  document.addEventListener("pointerover", (e) => {
-    const el2 = tipAncestor(e.target);
-    if (el2) schedule(el2);
-  });
-  document.addEventListener("pointerout", (e) => {
-    const el2 = tipAncestor(e.target);
-    if (!el2) return;
-    const to = e.relatedTarget;
-    if (to instanceof Node && el2.contains(to)) return;
-    hide();
-  });
-  document.addEventListener("focusin", (e) => {
-    const el2 = tipAncestor(e.target);
-    if (el2) schedule(el2);
-  });
-  document.addEventListener("focusout", () => hide());
-  document.addEventListener("pointerdown", () => hide(), true);
-  document.addEventListener("scroll", () => {
-    if (active) hide();
-  }, true);
-  document.addEventListener("keydown", (e) => {
-    if (e.key === "Escape") hide();
-  });
-  window.addEventListener("blur", () => hide());
-}
-
 // src/save.ts
 function createSaveController(opts) {
   const delayMs = opts.delayMs ?? 700;