isotone 1.0.6 → 1.0.8

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,
@@ -781,7 +781,17 @@ ${APPEARANCE_CSS}
 .isotone-panel[data-open='true'] { display: flex; }
 .isotone-variants-panel { flex-shrink: 1; max-height: calc(100dvh - 76px); }
 .isotone-notes-panel { flex-shrink: 0; max-height: calc(100dvh - 76px); padding: var(--iso-space); gap: var(--iso-space); }
-.isotone-root .isotone-panel { background: var(--iso-bg); border: 1px solid var(--iso-line); border-radius: 12px; box-shadow: var(--iso-panel-shadow); overflow: hidden; }
+.isotone-root .isotone-panel { background: var(--iso-bg); border: 1px solid var(--iso-line); border-radius: 12px; box-shadow: var(--iso-panel-shadow); }
+/* The close control sits on the panel's top-left corner, half outside it, with
+   the same face as a note's delete button, a touch larger. It fades in while the
+   pointer is over the panel; keyboard focus and touch screens always show it. */
+.isotone-panel-close { position: absolute; left: -9px; top: -9px; z-index: 3; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; isolation: isolate; color: var(--iso-muted); background: none; opacity: 0; }
+.isotone-panel-close::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); transition: background-color 120ms ease; }
+.isotone-root .isotone-panel > .isotone-panel-close { transition: opacity 220ms ease, color 120ms ease; }
+.isotone-root .isotone-panel:hover > .isotone-panel-close, .isotone-panel-close:focus-visible { opacity: 1; }
+.isotone-root .isotone-panel > .isotone-panel-close:hover { color: var(--iso-fg); }
+.isotone-panel-close:hover::before { background: var(--iso-control-hover-face); }
+@media (hover: none) { .isotone-panel-close { opacity: 1; } }
 .isotone-panel-head { flex: 0 0 42px; min-height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 14px; gap: 8px; border-bottom: 1px solid var(--iso-line); }
 .isotone-root .isotone-notes-panel > .isotone-panel-head { display: none; }
 .isotone-root .isotone-vars > .isotone-panel-head { order: 2; flex: 0 0 auto; min-height: 48px; padding: var(--iso-space); border: 0; }
@@ -795,6 +805,8 @@ ${APPEARANCE_CSS}
 .isotone-count { margin-left: 5px; color: var(--iso-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
 .isotone-vars { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }
 .isotone-vars { min-height: min(var(--iso-menu-need, 0px), calc(100dvh - 76px)); }
+/* The panel no longer clips, so its corner close can overhang; the variants body clips itself. */
+.isotone-root .isotone-panel > .isotone-vars { overflow: hidden; border-radius: 11px; }
 .isotone-vars-body { flex: 1; overflow-y: auto; min-height: 0; overscroll-behavior: contain; padding: var(--iso-space); display: flex; flex-direction: column; gap: var(--iso-space); }
 /* The footer overlaps only the scroller's bottom padding: content fades beneath
    it while scrolling, but the last control remains fully visible at the end. */
@@ -878,6 +890,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; }
@@ -903,7 +926,9 @@ ${FEEDBACK_LAYOUT_CSS}
 .isotone-pick::after, .isotone-send::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; }
 .isotone-send { display: grid; place-items: center; margin-left: auto; flex: none; }
 .isotone-notice { font-size: 10px; color: var(--iso-muted); }
-.isotone-hint { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 14px; border-radius: 24px; background: var(--iso-bg); box-shadow: var(--iso-shadow); font-size: 11px; white-space: nowrap; }
+.isotone-hint { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 14px; border-radius: 24px; background: var(--iso-bg); box-shadow: var(--iso-shadow); font-size: 11px; white-space: nowrap; transition: opacity 120ms ease; }
+/* Near the pointer the hint fades and lets the page underneath be hovered and pinned. */
+.isotone-root .isotone-hint[data-away='true'] { opacity: 0; pointer-events: none; }
 .isotone-hint button { display: flex; align-items: center; gap: 8px; border-radius: 14px; padding: 5px 9px; }
 .isotone-hint kbd { font: inherit; color: var(--iso-muted); }
 .isotone-hover { position: fixed; pointer-events: none; border: 1px solid var(--iso-pick-line); background: var(--iso-pick-fill); border-radius: 5px; z-index: 2147483001; }
@@ -924,12 +949,15 @@ ${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; }
   .isotone-root button:not(:disabled):active > svg { transform: none; }
 }
 .isotone-root[data-instant='true'] *, .isotone-root[data-instant='true'] *::before, .isotone-root[data-instant='true'] *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
+/* Instant mode follows any key press, but the corner close only ever appears under the pointer, so it keeps its fade. */
+.isotone-root[data-instant='true'] .isotone-panel > .isotone-panel-close { transition-duration: 220ms, 120ms !important; }
 ${UPDATE_NOTICE_CSS}
 `;
 function ensurePanelStyles(target) {
@@ -1611,10 +1639,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 +1675,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 +1787,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,
@@ -1786,9 +1843,14 @@ function IterationPanel({
     null
   );
   const [hoverRect, setHoverRect] = useState3(null);
+  const [hintAway, setHintAway] = useState3(false);
+  const hintRef = useRef4(null);
   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 +1932,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 +1962,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 +2131,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]);
@@ -2164,6 +2294,11 @@ function IterationPanel({
       cancelAnimationFrame(frame);
       const deferred = e.shiftKey;
       frame = requestAnimationFrame(() => {
+        const hint = hintRef.current?.getBoundingClientRect();
+        const reach = 48;
+        setHintAway(
+          !!hint && e.clientX > hint.left - reach && e.clientX < hint.right + reach && e.clientY > hint.top - reach && e.clientY < hint.bottom + reach
+        );
         const el = deferred ? null : elementAt(e);
         setHoverRect(el ? el.getBoundingClientRect() : null);
       });
@@ -2208,6 +2343,7 @@ function IterationPanel({
       document.body.style.cursor = cursor;
       cancelAnimationFrame(frame);
       setHoverRect(null);
+      setHintAway(false);
       window.removeEventListener("mousemove", onMove, true);
       window.removeEventListener("click", onClick, true);
       window.removeEventListener("keydown", onKey, true);
@@ -2217,7 +2353,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);
@@ -2264,7 +2400,7 @@ function IterationPanel({
       window.removeEventListener("resize", schedule);
     };
   }, [targets, picking]);
-  const variantsPanel = variants && /* @__PURE__ */ jsx5(
+  const variantsPanel = variants && /* @__PURE__ */ jsxs4(
     "section",
     {
       id: `${id}-variants`,
@@ -2276,21 +2412,27 @@ function IterationPanel({
       ref: (node) => {
         node?.toggleAttribute("inert", !variantsOpen);
       },
-      children: /* @__PURE__ */ jsx5(
-        VariantsView,
-        {
-          source: variants,
-          active: variantsOpen,
-          onClose: () => {
-            setVariantsOpen(false);
-            setExpanded(false);
-          },
-          onFeedback: notesAvailable ? feedback : void 0,
-          onSaved: loadNotes,
-          onManage: notesAvailable ? queueRemoval : void 0,
-          pendingActions
-        }
-      )
+      children: [
+        /* @__PURE__ */ jsx5(PanelClose, { label: "Close variants", onClose: () => {
+          setVariantsOpen(false);
+          setExpanded(false);
+        } }),
+        /* @__PURE__ */ jsx5(
+          VariantsView,
+          {
+            source: variants,
+            active: variantsOpen,
+            onClose: () => {
+              setVariantsOpen(false);
+              setExpanded(false);
+            },
+            onFeedback: notesAvailable ? feedback : void 0,
+            onSaved: loadNotes,
+            onManage: notesAvailable ? queueRemoval : void 0,
+            pendingActions
+          }
+        )
+      ]
     }
   );
   const notesPanel = notesAvailable && /* @__PURE__ */ jsxs4(
@@ -2306,6 +2448,17 @@ function IterationPanel({
         node?.toggleAttribute("inert", !notesOpen);
       },
       children: [
+        /* @__PURE__ */ jsx5(
+          PanelClose,
+          {
+            label: "Close feedback",
+            onClose: () => {
+              setNotesOpen(false);
+              setExpanded(false);
+              setPicking(false);
+            }
+          }
+        ),
         /* @__PURE__ */ jsxs4("div", { className: "isotone-panel-head", children: [
           /* @__PURE__ */ jsxs4("h2", { children: [
             "Feedback",
@@ -2328,20 +2481,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,11 +2669,12 @@ 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: [
         /* @__PURE__ */ jsx5("div", { className: "isotone-rail-track", "aria-hidden": "true" }),
-        picking && /* @__PURE__ */ jsxs4("div", { className: "isotone-hint", "data-isotone": true, children: [
+        picking && /* @__PURE__ */ jsxs4("div", { ref: hintRef, className: "isotone-hint", "data-isotone": true, "data-away": hintAway, children: [
           /* @__PURE__ */ jsxs4("span", { children: [
             targets.length,
             " selected \xB7 click to add or remove \xB7 hold \u21E7 to use the page"
@@ -2634,7 +2806,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 +2814,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 })
                   ]
@@ -2654,6 +2827,9 @@ function IterationPanel({
     }
   );
 }
+function PanelClose({ label, onClose }) {
+  return /* @__PURE__ */ jsx5("button", { type: "button", className: "isotone-panel-close", "aria-label": label, title: label, onClick: onClose, children: /* @__PURE__ */ jsx5(Icon2, { name: "close", size: 12 }) });
+}
 
 // src/react/IterationMount.tsx
 import { createRoot } from "react-dom/client";