isotone 1.0.6 → 1.0.7

package/dist/index.js

@@ -4,7 +4,7 @@ import {
   describeIterationElement,
   elementAsNode,
   isRouteVisible
-} from "./chunk-UYMMI2IH.js";
+} from "./chunk-JGIX4XEH.js";
 import {
   FEEDBACK_STORAGE_KEY,
   KNOBS_STORAGE_KEY,
@@ -878,6 +878,17 @@ ${PILL_ACTIVE_CSS}
    surrounds a 16px face without reserving trailing space in every row. */
 .isotone-note > .isotone-x { position: absolute; right: -8px; top: -8px; width: 24px; height: 24px; isolation: isolate; opacity: .6; background: none; box-shadow: none; }
 .isotone-x::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; z-index: -1; background: var(--iso-bg); box-shadow: 0 0 0 1px var(--iso-edge); }
+/* One chip per page that has open notes, this page first. */
+.isotone-pages { display: flex; flex: none; min-width: 0; border-top: 0; border-bottom: 0; border-inline: 0; gap: 4px; overflow-x: auto; overscroll-behavior: contain; margin: 0 calc(0px - var(--iso-space)); padding: 0 var(--iso-space); }
+.isotone-page { flex: 0 1 auto; display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 160px; height: 22px; padding: 0 7px; border-radius: var(--iso-control-radius); border: 1px solid var(--iso-edge); background: transparent; color: var(--iso-muted); font-size: 10px; }
+.isotone-page > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.isotone-page small { color: var(--iso-faint); font-size: 9px; font-variant-numeric: tabular-nums; }
+.isotone-page[aria-pressed='true'] { color: var(--iso-fg); background: var(--iso-label-face); box-shadow: var(--iso-label-lift-shadow); }
+/* An agent has said it is working on a note: a soft pulse on the note, and a ring on the launcher.
+   Both are driven by one shared clock (see syncPulse), so they beat together. */
+.isotone-note-hit { position: relative; }
+.isotone-working { position: absolute; left: 3px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--iso-focus); }
+.isotone-ring { position: absolute; inset: 0; border-radius: 999px; pointer-events: none; }
 .isotone-list:empty { display: none; }
 ${FEEDBACK_LAYOUT_CSS}
 .isotone-compose { flex: none; display: flex; flex-direction: column; }
@@ -924,6 +935,7 @@ ${FEEDBACK_LAYOUT_CSS}
 }
 @media (max-height: 580px) { .isotone-list { --iso-list-height: 72px; } .isotone-root .isotone-textarea { max-height: calc(64px + var(--iso-textarea-inset)); } }
 @media (prefers-reduced-motion: reduce) {
+  .isotone-ring { box-shadow: 0 0 0 2px color-mix(in srgb, var(--iso-focus) 50%, transparent); }
   .isotone-root .isotone-rail-track { transition: none; }
   .isotone-root .isotone-panel, .isotone-root .isotone-axis-menu, .isotone-root .isotone-rail-tools { transition-property: opacity, visibility; }
   .isotone-root button { transition: opacity 125ms ease; }
@@ -1611,10 +1623,11 @@ import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-run
 function SummaryTag({ label }) {
   return /* @__PURE__ */ jsx4("span", { className: "isotone-chip", children: /* @__PURE__ */ jsx4("span", { onPointerOver: showOverflowTitle, children: label }) });
 }
-function NoteSummary({ note }) {
+function NoteSummary({ note, page }) {
   if (!note.feedback.startsWith("[set-defaults]")) {
     const elements = note.elements ?? (note.element ? [note.element] : []);
     const references = [
+      ...page ? [{ key: `page:${page}`, label: page }] : [],
       ...note.variant ? [{
         key: `variant:${note.variant.axisId}`,
         label: `${note.variant.label}${note.variant.optionLabel ? ` / ${note.variant.optionLabel}` : ""}`
@@ -1646,7 +1659,8 @@ function NoteSummary({ note }) {
   }
   return /* @__PURE__ */ jsxs3(Fragment3, { children: [
     /* @__PURE__ */ jsx4("p", { children: note.feedback }),
-    tags.length > 0 && /* @__PURE__ */ jsxs3("span", { className: "isotone-meta", children: [
+    (page || tags.length > 0) && /* @__PURE__ */ jsxs3("span", { className: "isotone-meta", children: [
+      page && /* @__PURE__ */ jsx4(SummaryTag, { label: page }),
       tags.slice(0, 3).map((tag) => /* @__PURE__ */ jsx4(SummaryTag, { label: `${tag.name} ${tag.value}` }, `${tag.name}-${tag.value}`)),
       tags.length > 3 && /* @__PURE__ */ jsxs3("span", { className: "isotone-request-more", children: [
         "+",
@@ -1757,6 +1771,33 @@ function useDockMotion(ref, visible) {
 
 // src/react/IterationPanel.tsx
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var PULSE_MS = 2e3;
+function syncPulse(spread) {
+  return (node) => {
+    if (!node || typeof node.animate !== "function") return;
+    if (node.closest('[data-instant="true"]') || typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    const tint = "color-mix(in srgb, var(--iso-focus) 55%, transparent)";
+    const pulse = node.animate([
+      { boxShadow: `0 0 0 0 ${tint}`, offset: 0 },
+      { boxShadow: `0 0 0 ${spread}px transparent`, offset: 0.7 },
+      { boxShadow: `0 0 0 ${spread}px transparent`, offset: 1 }
+    ], { duration: PULSE_MS, iterations: Infinity, easing: "ease-out" });
+    pulse.startTime = 0;
+  };
+}
+var dotPulse = syncPulse(6);
+var ringPulse = syncPulse(8);
+var POLL_MS = 2500;
+var POLL_MAX_MS = 3e4;
+function sameNotes(a, b) {
+  if (a.length !== b.length) return false;
+  const byId = new Map(a.map((note) => [note.id, note]));
+  return b.every((note) => {
+    const old = byId.get(note.id);
+    return old !== void 0 && JSON.stringify(old) === JSON.stringify(note);
+  });
+}
+var WORKING_FRESH_MS = 20 * 60 * 1e3;
 var DEFAULT_SHORTCUT = {
   code: "Period",
   mod: true,
@@ -1789,6 +1830,9 @@ function IterationPanel({
   const [rects, setRects] = useState3([]);
   const [text, setText] = useState3("");
   const [notes, setNotes] = useState3([]);
+  const [scope, setScope] = useState3(null);
+  const [clock, setClock] = useState3(() => Math.floor(Date.now() / 6e4) * 6e4);
+  const pollRev = useRef4(null);
   const noteRevision = useRef4(0);
   const pendingWrites = useRef4(0);
   const noteRequest = useRef4(0);
@@ -1870,7 +1914,25 @@ function IterationPanel({
     if (active === fabRef.current) rootRef.current?.querySelector(".isotone-rail-button")?.focus();
   }, [railOpen, instant]);
   const draftKey = `${nsKey}::draft::${route}`;
-  const visibleNotes = useMemo3(() => notes.filter((n) => !n.done).sort((a, b) => a.createdAt.localeCompare(b.createdAt)), [notes]);
+  const openNotes = useMemo3(() => notes.filter((n) => !n.done), [notes]);
+  const pages = useMemo3(() => {
+    const counts = /* @__PURE__ */ new Map();
+    for (const n of openNotes) counts.set(n.route, (counts.get(n.route) ?? 0) + 1);
+    const others = [...counts.keys()].filter((r) => r !== route).sort();
+    return { counts, others };
+  }, [openNotes, route]);
+  const selectedPages = useMemo3(() => {
+    const chosen = (scope ?? [route]).filter((r) => r === route || pages.counts.has(r));
+    return new Set(chosen.length ? chosen : [route]);
+  }, [scope, route, pages]);
+  const visibleNotes = useMemo3(() => openNotes.filter((n) => selectedPages.has(n.route)).sort((a, b) => a.createdAt.localeCompare(b.createdAt)), [openNotes, selectedPages]);
+  const working = useMemo3(() => new Set(visibleNotes.filter((n) => n.workingAt && clock - Date.parse(n.workingAt) < WORKING_FRESH_MS).map((n) => n.id)), [visibleNotes, clock]);
+  function togglePage(page) {
+    const next = new Set(selectedPages);
+    if (next.has(page)) next.delete(page);
+    else next.add(page);
+    setScope(next.size ? [...next] : [route]);
+  }
   const pendingActions = useMemo3(() => notes.flatMap((n) => !n.done && n.route === route && n.variantAction ? [n.variantAction] : []), [notes, route]);
   const shortcutLabel = shortcut ? [
     shortcut.mod ? "\u2318/Ctrl" : "",
@@ -1882,8 +1944,9 @@ function IterationPanel({
     if (!notesAvailable) return;
     const request = ++noteRequest.current;
     const revision = noteRevision.current;
-    void store.listNotes().then((fresh) => {
+    void store.pollNotes(null).then((result) => ({ rev: result.rev, notes: result.notes ?? [] })).catch(() => store.pendingNotes().then((fresh) => ({ rev: null, notes: fresh }))).then(({ rev, notes: fresh }) => {
       if (request !== noteRequest.current || revision !== noteRevision.current || pendingWrites.current) return;
+      pollRev.current = rev;
       setNotes(fresh);
     }).catch(() => {
     });
@@ -2050,6 +2113,55 @@ function IterationPanel({
   useEffect3(() => {
     loadNotes();
   }, [notesOpen, variantsOpen, route]);
+  useEffect3(() => {
+    if (!notesAvailable || !visible) return;
+    let stopped = false;
+    let running = false;
+    let failures = 0;
+    let timer;
+    const schedule = () => {
+      clearTimeout(timer);
+      if (stopped || document.hidden) return;
+      timer = setTimeout(() => void tick(), Math.min(POLL_MS * 2 ** failures, POLL_MAX_MS));
+    };
+    const tick = async () => {
+      if (stopped || running || document.hidden) return;
+      running = true;
+      const request = noteRequest.current;
+      const revision = noteRevision.current;
+      try {
+        const result = await store.pollNotes(pollRev.current);
+        failures = 0;
+        if (stopped || request !== noteRequest.current || revision !== noteRevision.current || pendingWrites.current) return;
+        pollRev.current = result.rev;
+        const fresh = result.notes;
+        if (fresh) setNotes((prev) => sameNotes(prev, fresh) ? prev : fresh);
+        setClock(Math.floor(Date.now() / 6e4) * 6e4);
+      } catch {
+        failures = Math.min(failures + 1, 8);
+      } finally {
+        running = false;
+        schedule();
+      }
+    };
+    const wake = () => {
+      if (document.hidden) {
+        clearTimeout(timer);
+        return;
+      }
+      failures = 0;
+      void tick();
+    };
+    schedule();
+    document.addEventListener("visibilitychange", wake);
+    window.addEventListener("focus", wake);
+    return () => {
+      stopped = true;
+      clearTimeout(timer);
+      document.removeEventListener("visibilitychange", wake);
+      window.removeEventListener("focus", wake);
+    };
+  }, [notesAvailable, visible, store]);
   useEffect3(() => {
     if (variants && notesOpen && !variantsOpen) refreshSource(variants);
   }, [notesOpen, variantsOpen, variants]);
@@ -2217,7 +2329,7 @@ function IterationPanel({
     const shadow = rootRef.current?.getRootNode();
     if (!(shadow instanceof ShadowRoot)) return;
     const stop = (e) => e.stopPropagation();
-    const types = ["pointerdown", "pointerup", "mousedown", "mouseup", "touchstart", "touchend", "click"];
+    const types = ["pointerdown", "mousedown", "touchstart", "click"];
     for (const type of types) shadow.addEventListener(type, stop);
     return () => {
       for (const type of types) shadow.removeEventListener(type, stop);
@@ -2328,20 +2440,38 @@ function IterationPanel({
             }
           )
         ] }),
+        pages.counts.size > 1 && /* @__PURE__ */ jsx5("fieldset", { className: "isotone-pages", "aria-label": "Pages", children: [route, ...pages.others].map((page) => /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            type: "button",
+            className: "isotone-page",
+            "aria-pressed": selectedPages.has(page),
+            title: page === route ? `This page \xB7 ${page}` : page,
+            onClick: () => togglePage(page),
+            children: [
+              /* @__PURE__ */ jsx5("span", { onPointerOver: showOverflowTitle, children: page === route ? "This page" : page }),
+              /* @__PURE__ */ jsx5("small", { children: pages.counts.get(page) ?? 0 })
+            ]
+          },
+          page
+        )) }),
         /* @__PURE__ */ jsx5("ul", { ref: listRef, className: "isotone-list", children: visibleNotes.map((note) => /* @__PURE__ */ jsxs4(
           "li",
           {
             "data-motion-key": note.id,
             className: `isotone-note${editing?.id === note.id ? " isotone-note-editing" : ""}`,
             children: [
-              /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsxs4(
                 "button",
                 {
                   type: "button",
                   className: "isotone-note-hit",
                   "aria-current": editing?.id === note.id ? true : void 0,
                   onClick: () => beginEdit(note),
-                  children: /* @__PURE__ */ jsx5(NoteSummary, { note })
+                  children: [
+                    working.has(note.id) && /* @__PURE__ */ jsx5("span", { className: "isotone-working", ref: dotPulse, role: "img", "aria-label": "An agent is working on this", title: "An agent is working on this" }),
+                    /* @__PURE__ */ jsx5(NoteSummary, { note, page: note.route !== route ? note.route : void 0 })
+                  ]
                 }
               ),
               /* @__PURE__ */ jsx5(
@@ -2498,6 +2628,7 @@ function IterationPanel({
       "data-tools": Number(Boolean(variants)) + Number(notesAvailable),
       "data-instant": instant,
       "data-notes-open": notesOpen,
+      "data-working": working.size > 0,
       "data-open": open,
       className: "isotone-root",
       children: [
@@ -2634,7 +2765,7 @@ function IterationPanel({
                   "aria-hidden": railOpen,
                   tabIndex: railOpen ? -1 : 0,
                   "aria-label": notesAvailable ? "Isotone" : "Variants",
-                  title: `Isotone${shortcutLabel ? ` \xB7 ${shortcutLabel}` : ""}`,
+                  title: `Isotone${working.size ? ` \xB7 ${working.size} in progress` : ""}${shortcutLabel ? ` \xB7 ${shortcutLabel}` : ""}`,
                   "aria-expanded": railOpen,
                   onClick: () => {
                     if (open) closeAll();
@@ -2642,6 +2773,7 @@ function IterationPanel({
                     else openInitial();
                   },
                   children: [
+                    working.size > 0 && /* @__PURE__ */ jsx5("span", { className: "isotone-ring", ref: ringPulse }),
                     /* @__PURE__ */ jsx5(Icon2, { name: "iterate" }),
                     visibleNotes.length > 0 && /* @__PURE__ */ jsx5("span", { className: "isotone-badge", children: visibleNotes.length })
                   ]