isotone 1.1.2 → 1.2.0

package/dist/index.js

@@ -4,15 +4,22 @@ import {
   describeIterationElement,
   elementAsNode,
   isRouteVisible
-} from "./chunk-FKEKBZ3E.js";
+} from "./chunk-2FY2JNPG.js";
+import {
+  updateNoteText,
+  updatePrompt
+} from "./chunk-JCTWHR7U.js";
 import {
   FEEDBACK_STORAGE_KEY,
   KNOBS_STORAGE_KEY,
+  MAX_FEEDBACK_LENGTH,
   OVERLAY_DEFAULT_OPTION,
   OVERLAY_GROUP_ID,
+  SECTION_SEPARATOR,
   VARIANTS_ENDPOINT,
   applyKnobValues,
   axisDefault,
+  axisSection,
   createOverlayVariantsSource,
   createVariantsSource,
   defaultSelections,
@@ -29,13 +36,12 @@ import {
   parseVariantParam,
   readBrowserStorage,
   removeBrowserStorage,
+  sectionAxes,
   serializeVariantParam,
+  splitSectionLabel,
   visibleAxes,
   writeBrowserStorage
-} from "./chunk-PUXQGUMQ.js";
-import {
-  MAX_FEEDBACK_LENGTH
-} from "./chunk-A4DX2V4C.js";
+} from "./chunk-BTJHQXF7.js";
 
 // src/react/tooltips.ts
 function showOverflowTitle(event) {
@@ -45,7 +51,7 @@ function showOverflowTitle(event) {
 }
 
 // src/react/IterationPanel.tsx
-import { useCallback, useEffect as useEffect3, useId as useId2, useLayoutEffect as useLayoutEffect4, useMemo as useMemo3, useRef as useRef4, useState as useState3 } from "react";
+import { useCallback, useEffect as useEffect4, useId as useId3, useLayoutEffect as useLayoutEffect4, useMemo as useMemo3, useRef as useRef4, useState as useState3 } from "react";
 
 // src/react/appearance.ts
 var darkPalette = {
@@ -584,11 +590,16 @@ function Icon2({ name, size = 16 }) {
 
 // src/react/UpdateNotice.tsx
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-function UpdateNotice({ endpoint, active }) {
+function UpdateNotice({ endpoint, active, route = "/", requested = false, onRequested }) {
   const [info, setInfo] = useState(null);
   const [open, setOpen] = useState(false);
-  const [copied, setCopied] = useState(false);
+  const [showCommand, setShowCommand] = useState(false);
+  const [status, setStatus] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [asked, setAsked] = useState(false);
   const trigger = useRef(null);
+  const primary = useRef(null);
+  const done = useRef(null);
   const command = useRef(null);
   const closeButton = useRef(null);
   const id = useId();
@@ -618,28 +629,57 @@ function UpdateNotice({ endpoint, active }) {
     };
   }, [endpoint, active]);
   useEffect(() => {
-    if (open) {
-      setCopied(false);
-      (command.current ?? closeButton.current)?.focus();
-    }
+    if (requested) setAsked(false);
+  }, [requested]);
+  useEffect(() => {
+    if (!open) return;
+    setStatus("");
+    setShowCommand(false);
+    (primary.current ?? closeButton.current)?.focus();
   }, [open]);
+  useEffect(() => {
+    if (showCommand) command.current?.focus();
+  }, [showCommand]);
   function close() {
     setOpen(false);
     trigger.current?.focus();
   }
-  async function copy() {
-    if (!info?.upgrade) return;
+  async function ask() {
+    if (!endpoint || busy) return;
+    setBusy(true);
+    setStatus("");
+    try {
+      const response = await fetch(endpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ route })
+      });
+      if (!response.ok) throw new Error(String(response.status));
+      setAsked(true);
+      onRequested?.();
+      requestAnimationFrame(() => done.current?.focus());
+    } catch {
+      setStatus("Could not ask. Copy the prompt instead.");
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function copyPrompt() {
+    if (!info?.upgrade || !info.latestVersion) return;
+    const text = updatePrompt({ from: info.currentVersion, to: info.latestVersion, ...info.upgrade });
     try {
-      await navigator.clipboard.writeText(info.upgrade.command);
-      setCopied(true);
+      await navigator.clipboard.writeText(text);
+      setStatus("Prompt copied");
     } catch {
-      command.current?.focus();
-      command.current?.select();
+      setShowCommand(true);
+      setStatus("Could not copy. The command is below.");
     }
   }
   if (!active || !info) return null;
+  const pending = requested || asked;
+  const canAsk = Boolean(onRequested && info.upgrade);
   return /* @__PURE__ */ jsxs("div", { className: "isotone-update", children: [
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx2(
       "button",
       {
         ref: trigger,
@@ -647,11 +687,8 @@ function UpdateNotice({ endpoint, active }) {
         className: "isotone-update-trigger",
         "aria-expanded": open,
         "aria-controls": id,
-        onClick: () => setOpen((value) => !value),
-        children: [
-          "Update ",
-          info.latestVersion
-        ]
+        onClick: () => setOpen(!open),
+        children: pending ? "Update requested" : `Isotone ${info.latestVersion} is available`
       }
     ),
     open && /* @__PURE__ */ jsxs(
@@ -670,25 +707,27 @@ function UpdateNotice({ endpoint, active }) {
         },
         children: [
           /* @__PURE__ */ jsxs("div", { className: "isotone-menu-title", children: [
-            /* @__PURE__ */ jsx2("strong", { children: "Update available" }),
-            /* @__PURE__ */ jsx2("button", { ref: closeButton, type: "button", className: "isotone-icon", "aria-label": "Close update instructions", title: "Close update instructions", onClick: close, children: /* @__PURE__ */ jsx2(Icon2, { name: "close" }) })
-          ] }),
-          /* @__PURE__ */ jsxs("p", { children: [
-            info.currentVersion,
-            " \u2192 ",
-            info.latestVersion
+            /* @__PURE__ */ jsxs("strong", { className: "isotone-update-versions", children: [
+              info.currentVersion,
+              " \u2192 ",
+              info.latestVersion
+            ] }),
+            /* @__PURE__ */ jsx2("button", { ref: closeButton, type: "button", className: "isotone-icon", "aria-label": "Close update", title: "Close update", onClick: close, children: /* @__PURE__ */ jsx2(Icon2, { name: "close" }) })
           ] }),
           info.upgrade ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs("p", { children: [
-              "Run in ",
-              /* @__PURE__ */ jsx2("span", { className: "isotone-update-path", onPointerOver: showOverflowTitle, children: info.upgrade.cwd })
-            ] }),
-            /* @__PURE__ */ jsx2("input", { ref: command, "aria-label": "Upgrade command", readOnly: true, value: info.upgrade.command, onFocus: (event) => event.currentTarget.select() }),
+            canAsk && (pending ? /* @__PURE__ */ jsx2("p", { ref: done, tabIndex: -1, className: "isotone-update-requested", children: "Update requested \xB7 in Feedback" }) : /* @__PURE__ */ jsx2("button", { ref: primary, type: "button", className: "isotone-save isotone-update-ask", disabled: busy, onClick: () => void ask(), children: "Ask agent to update" })),
             /* @__PURE__ */ jsxs("div", { className: "isotone-update-actions", children: [
-              /* @__PURE__ */ jsx2("button", { type: "button", className: "isotone-secondary", onClick: () => void copy(), children: copied ? "Copied" : "Copy command" }),
-              /* @__PURE__ */ jsx2("span", { role: "status", children: copied ? "Ready to paste in your terminal" : "" })
+              /* @__PURE__ */ jsx2("button", { ref: canAsk ? void 0 : primary, type: "button", className: "isotone-update-quiet", onClick: () => void copyPrompt(), children: "Copy prompt" }),
+              /* @__PURE__ */ jsx2("button", { type: "button", className: "isotone-update-quiet", "aria-expanded": showCommand, onClick: () => setShowCommand((value) => !value), children: "Command" }),
+              /* @__PURE__ */ jsx2("span", { role: "status", children: status })
             ] }),
-            /* @__PURE__ */ jsx2("p", { children: "Restart the dev server after upgrading." })
+            showCommand && /* @__PURE__ */ jsxs("div", { className: "isotone-update-command", children: [
+              /* @__PURE__ */ jsx2("input", { ref: command, "aria-label": "Upgrade command", readOnly: true, value: info.upgrade.command, onFocus: (event) => event.currentTarget.select() }),
+              /* @__PURE__ */ jsxs("span", { className: "isotone-update-path", onPointerOver: showOverflowTitle, children: [
+                "in ",
+                info.upgrade.cwd
+              ] })
+            ] })
           ] }) : /* @__PURE__ */ jsx2("p", { children: info.message ?? "Run isotone check-update in the app directory for upgrade instructions." })
         ]
       }
@@ -696,18 +735,26 @@ function UpdateNotice({ endpoint, active }) {
   ] });
 }
 var UPDATE_NOTICE_CSS = `
-.isotone-update { position: absolute; z-index: 5; bottom: 10px; right: calc(var(--iso-rail-length) + 10px); pointer-events: auto; }
-.isotone-root[data-tools='1'] .isotone-update { right: calc(var(--iso-rail-size) + 10px); }
+.isotone-notices { position: absolute; z-index: 5; bottom: 10px; right: calc(var(--iso-rail-length) + 10px); display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; align-items: center; justify-content: flex-start; gap: 6px; width: max-content; max-width: calc(100vw - var(--iso-rail-length) - 36px); pointer-events: none; }
+.isotone-root[data-tools='1'] .isotone-notices { right: calc(var(--iso-rail-size) + 10px); max-width: calc(100vw - var(--iso-rail-size) - 36px); }
+.isotone-notices > * { pointer-events: auto; }
 .isotone-update-trigger { white-space: nowrap; color: var(--iso-muted); font-size: 10px; padding: 4px 6px; border-radius: 5px; background: var(--iso-bg); box-shadow: 0 0 0 1px var(--iso-line); }
-.isotone-update-dialog { position: absolute; right: calc(0px - var(--iso-rail-length) - 10px); bottom: 40px; width: var(--iso-dock-width); max-height: calc(100dvh - 100px); overflow: auto; padding: var(--iso-space); display: grid; gap: 8px; border-radius: 8px; background: var(--iso-bg); box-shadow: var(--iso-popup-shadow); font-size: 11px; }
+.isotone-update-dialog { position: absolute; right: calc(0px - var(--iso-rail-length) - 10px); bottom: 40px; width: min(var(--iso-dock-width), 260px); max-width: calc(100vw - 32px); max-height: calc(100dvh - 100px); overflow: auto; padding: 10px var(--iso-space) var(--iso-space); display: grid; gap: 8px; border-radius: 8px; background: var(--iso-bg); box-shadow: var(--iso-popup-shadow); font-size: 11px; }
 .isotone-root[data-tools='1'] .isotone-update-dialog { right: calc(0px - var(--iso-rail-size) - 10px); }
 .isotone-update-dialog .isotone-menu-title { padding: 0; background: none; }
+.isotone-update-versions { font-variant-numeric: tabular-nums; }
 .isotone-update-dialog > p { color: var(--iso-muted); }
-.isotone-update-path { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.isotone-root .isotone-update-dialog input { width: 100%; padding: 8px; border-radius: 5px; background: var(--iso-well); box-shadow: var(--iso-well-shadow); font-size: 11px; }
-.isotone-update-actions { display: flex; align-items: center; gap: 8px; }
-.isotone-update-actions [role='status'] { color: var(--iso-muted); font-size: 10px; }
-@media (hover: hover) and (pointer: fine) { .isotone-update-trigger:hover { color: var(--iso-fg); } }
+.isotone-root .isotone-update-ask { min-height: 28px; padding: 4px 10px; font-weight: 500; }
+.isotone-update-requested { min-height: 28px; display: flex; align-items: center; outline-offset: 2px; }
+.isotone-update-actions { display: flex; align-items: center; gap: 2px; margin: -4px 0 -4px -6px; }
+.isotone-root .isotone-update-quiet { padding: 4px 6px; border-radius: 5px; color: var(--iso-muted); font-size: 11px; background: none; box-shadow: none; }
+.isotone-update-quiet[aria-expanded='true'] { color: var(--iso-fg); }
+.isotone-update-actions [role='status'] { min-width: 0; margin-left: auto; color: var(--iso-muted); font-size: 10px; text-align: right; }
+.isotone-update-command { display: grid; gap: 4px; min-width: 0; }
+.isotone-update-path { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--iso-muted); font-size: 10px; }
+.isotone-root .isotone-update-dialog input { width: 100%; padding: 6px 8px; border-radius: 5px; background: var(--iso-well); box-shadow: var(--iso-well-shadow); font-size: 11px; }
+@media (pointer: coarse) { .isotone-root .isotone-update-quiet { padding: 9px 6px; } .isotone-update-actions { margin: -9px 0 -9px -6px; } }
+@media (hover: hover) and (pointer: fine) { .isotone-update-trigger:hover, .isotone-root .isotone-update-quiet:hover { color: var(--iso-fg); } }
 `;
 
 // src/react/styles.ts
@@ -742,8 +789,11 @@ ${APPEARANCE_CSS}
   --iso-ease-out: ${MOTION.easeOut};
   --iso-fast: ${MOTION.exit}ms; --iso-enter: ${MOTION.enter}ms; --iso-exit: ${MOTION.exit}ms;
   --iso-dock-width: min(340px, calc(100vw - 32px));
-  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
-  z-index: 2147483000; width: 44px; display: flex; flex-direction: column; isolation: isolate; max-height: calc(100dvh - 32px); color: var(--iso-fg);
+  /* The height the dock may fill: what is visible (above an on-screen keyboard,
+     see viewport.ts) less the safe areas it keeps clear of. */
+  --iso-view-height: calc(var(--iso-viewport, 100dvh) - env(safe-area-inset-top, 0px) - max(0px, env(safe-area-inset-bottom, 0px) - 16px));
+  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(calc(16px + var(--iso-keyboard, 0px)), env(safe-area-inset-bottom));
+  z-index: 2147483000; width: 44px; display: flex; flex-direction: column; isolation: isolate; max-height: calc(var(--iso-view-height) - 32px); color: var(--iso-fg);
   font: 12px/1.5 var(--iso-sans); -webkit-font-smoothing: antialiased;
   text-align: left; letter-spacing: normal; color-scheme: dark;
 }
@@ -779,8 +829,8 @@ ${APPEARANCE_CSS}
 /* Panels are sections inside the dock. Only long content scrolls. */
 .isotone-panel { order: 0; position: relative; display: none; flex-direction: column; min-height: 0; flex: 0 1 auto; width: 100%; }
 .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-variants-panel { flex-shrink: 1; max-height: calc(var(--iso-view-height) - 76px); }
+.isotone-notes-panel { flex-shrink: 0; max-height: calc(var(--iso-view-height) - 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); }
 /* 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
@@ -804,13 +854,30 @@ ${APPEARANCE_CSS}
 .isotone-icon { width: 28px; height: 28px; display: inline-grid; place-items: center; flex: none; color: var(--iso-muted); border-radius: 6px; }
 .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)); }
+.isotone-vars { min-height: min(var(--iso-menu-need, 0px), calc(var(--iso-view-height) - 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. */
 .isotone-axis { flex: none; }
+/* Sections name the part of the page their selectors change. The header sticks to
+   the top of the scroll area while its own selectors pass beneath and fade into the
+   surface; the next section's header pushes it out. At rest its padding occupies
+   the inset or gap above it, so sticking does not move the text. */
+.isotone-section, .isotone-section-body { flex: none; display: flex; flex-direction: column; gap: var(--iso-space); }
+.isotone-section-body[hidden] { display: none; }
+.isotone-vars-body > * + .isotone-section { padding-top: 8px; }
+/* Sticky offsets start inside the scroller's padding; the negative top reaches its edge. */
+.isotone-section-head { position: sticky; top: calc(0px - var(--iso-space)); z-index: 1; margin: calc(0px - var(--iso-space)) calc(0px - var(--iso-space)) -4px; padding: var(--iso-space) var(--iso-space) 0; background: var(--iso-bg); font: inherit; }
+.isotone-section-head::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 8px; background: linear-gradient(var(--iso-bg), transparent); pointer-events: none; }
+.isotone-section-toggle { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: calc(100% + 7px); min-height: 24px; padding: 2px 7px; margin-left: -7px; border-radius: 6px; text-align: left; color: var(--iso-muted); font-size: 11px; font-weight: 600; }
+.isotone-section-toggle > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.isotone-section-toggle > svg, .isotone-section-toggle > small { flex: none; }
+.isotone-section-toggle > small { color: var(--iso-faint); font-size: 10px; font-weight: 500; font-variant-numeric: tabular-nums; }
+.isotone-section[data-collapsed='true'] .isotone-section-toggle > svg { transform: rotate(-90deg); }
+/* Keyboard focus reveal keeps a focused control clear of the sticky header. */
+.isotone-vars-body:has(> .isotone-section) { scroll-padding-top: 44px; }
 .isotone-axis-head { display: flex; align-items: center; justify-content: space-between; min-height: 24px; gap: 8px; margin-bottom: 6px; }
 .isotone-axis-label { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; min-height: 24px; padding: 2px 7px; margin-left: -7px; border-radius: 6px; text-align: left; }
 .isotone-axis-label, .isotone-menu-title > strong { font: inherit; font-weight: 550; }
@@ -866,8 +933,13 @@ ${PILL_ACTIVE_CSS}
 .isotone-menu-action { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 34px; border-radius: 6px; text-align: left; padding: 7px; font-size: 11px; }
 .isotone-menu-options { padding: 7px 0; margin: 5px 0; border-top: 1px solid var(--iso-line); border-bottom: 1px solid var(--iso-line); }
 .isotone-option-row { display: flex; align-items: center; padding: 2px 4px 2px 7px; gap: 4px; }
-.isotone-option-row > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.isotone-option-row small { font-size: 9px; color: var(--iso-muted); margin-left: 6px; }
+.isotone-option-name { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; }
+.isotone-option-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* Tags never shrink, so a long label truncates before them instead of hiding them. */
+.isotone-option-tags { flex: none; display: flex; gap: 6px; white-space: nowrap; }
+.isotone-option-tags small { font-size: 9px; color: var(--iso-muted); }
+/* A pending removal stays listed and readable; only its text quietens. */
+.isotone-option-row[data-requested] .isotone-option-label { color: var(--iso-muted); }
 .isotone-menu-footer { flex-shrink: 0; padding: 9px 12px; border-top: 1px solid var(--iso-line); font-size: 10px; color: var(--iso-muted); min-height: 0; }
 .isotone-confirm { display: flex; justify-content: flex-end; gap: 6px; margin-top: 7px; }
 .isotone-danger { color: var(--iso-danger); }
@@ -883,6 +955,11 @@ ${PILL_ACTIVE_CSS}
 .isotone-note-hit { text-align: left; display: block; width: 100%; border-radius: 8px; padding: var(--iso-note-padding-y) var(--iso-note-padding-x); line-height: 18px; }
 .isotone-note-hit p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
 .isotone-meta { display: flex; align-items: center; gap: 4px; min-width: 0; margin-top: 4px; }
+/* The agent's question takes a second line under the note, muted, clipped like it. */
+.isotone-note-hit:has(> .isotone-reply) { flex-wrap: wrap; row-gap: 1px; }
+.isotone-note-hit > p.isotone-reply { order: 3; flex: 1 0 100%; color: var(--iso-muted); font-size: 11px; }
+.isotone-reply > span, .isotone-editing-reply > span { color: var(--iso-fg); font-weight: 500; }
+.isotone-editing-reply { flex: none; max-height: 58px; overflow-y: auto; padding: 8px var(--iso-input-padding) 0; color: var(--iso-muted); font-size: 11px; line-height: 16px; overflow-wrap: anywhere; }
 .isotone-meta .isotone-chip { flex: 0 1 auto; min-width: 0; height: 18px; padding: 0 5px; font-size: 9px; }
 /* A lone reference gets all available space; multiple references share the row. */
 .isotone-meta .isotone-chip:not(:only-child) { max-width: 140px; }
@@ -931,14 +1008,15 @@ ${FEEDBACK_LAYOUT_CSS}
 .isotone-picking { position: absolute; inset: -4px; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 0 4px 0 8px; border-radius: 6px; background: var(--iso-well); cursor: default; }
 .isotone-picking > svg { flex: none; color: var(--iso-fg); }
 .isotone-picking p { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; margin: 0; }
-.isotone-picking span { font-size: 12px; line-height: 16px; color: var(--iso-fg); font-variant-numeric: tabular-nums; }
-.isotone-picking small { font-size: 10px; line-height: 14px; color: var(--iso-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* Hints are never truncated (design.md, "Hints and instructions"): one line, copy short enough to fit. */
+.isotone-picking span { font-size: 12px; line-height: 16px; color: var(--iso-fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.isotone-picking small { font-size: 10px; line-height: 14px; color: var(--iso-muted); white-space: nowrap; }
 .isotone-picking button { flex: none; display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 9px; }
 .isotone-picking kbd { font: inherit; color: var(--iso-muted); }
 /* After a pin, the composer floats beside the element on a panel surface, placed by
    IterationPanel inside the viewport. It grows out of the point that was clicked. */
 .isotone-float { position: fixed; z-index: 2147483002; width: min(300px, calc(100vw - 16px)); padding: 4px; background: var(--iso-bg); border: 1px solid var(--iso-line); border-radius: 12px; box-shadow: var(--iso-panel-shadow); }
-.isotone-float-hint { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: var(--iso-muted); }
+.isotone-float-hint { flex: 1 0 auto; white-space: nowrap; font-size: 10px; color: var(--iso-muted); }
 /* Meanwhile the dock keeps the composer's slot and says where the writing went. */
 .isotone-away { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 8px 8px 8px 10px; text-align: left; color: var(--iso-fg); background: var(--iso-well); border: 1px solid var(--iso-input-border); box-shadow: var(--iso-input-shadow); border-radius: 8px; }
 .isotone-away > svg { flex: none; }
@@ -951,8 +1029,8 @@ ${FEEDBACK_LAYOUT_CSS}
 .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; }
 .isotone-selected { border: 2px solid var(--iso-pick-line); background: var(--iso-pick-selected-fill); }
 @media (hover: hover) and (pointer: fine) {
-  .isotone-root :where(.isotone-icon:not(.isotone-x), .isotone-menu-action, .isotone-axis-label):not(:disabled):not([aria-pressed='true']):hover { background: var(--iso-hover); box-shadow: var(--iso-hover-shadow); color: var(--iso-fg); }
-  .isotone-note:not(.isotone-note-editing):hover .isotone-note-hit:not(:disabled) { background: var(--iso-hover); box-shadow: var(--iso-hover-shadow); }
+  .isotone-root :where(.isotone-icon:not(.isotone-x), .isotone-menu-action, .isotone-axis-label, .isotone-section-toggle):not(:disabled):not([aria-pressed='true']):hover { background: var(--iso-hover); box-shadow: var(--iso-hover-shadow); color: var(--iso-fg); }
+  .isotone-note:not(.isotone-note-editing):hover .isotone-note-hit:not(:disabled):not([data-static]) { background: var(--iso-hover); box-shadow: var(--iso-hover-shadow); }
   .isotone-rail-button:not(:disabled):hover { color: var(--iso-fg); }
   .isotone-seg:not(:disabled):hover { color: var(--iso-fg); }
   .isotone-seg[aria-pressed='false']:not(:disabled):hover { box-shadow: var(--iso-hover-shadow); }
@@ -964,6 +1042,23 @@ ${FEEDBACK_LAYOUT_CSS}
   .isotone-note .isotone-x { opacity: 0; }
   .isotone-note:hover .isotone-x, .isotone-note:focus-within .isotone-x, .isotone-note-editing .isotone-x { opacity: 1; }
 }
+/* Phones. Panels take turns (see viewport.ts). Variants stop at about half the
+   screen, so the page they change stays in view; action dialogs keep their
+   360px. While selecting, the dock shrinks to the composer so the page can be
+   reached, and the saved notes return afterwards. */
+@media (max-width: 640px) {
+  .isotone-variants-panel { max-height: min(calc(var(--iso-view-height) - 76px), max(50dvh, 360px)); }
+}
+@media (max-width: 640px), (max-height: 500px) {
+  .isotone-root[data-selecting='true'] .isotone-notes-panel > :is(.isotone-list, .isotone-pages) { display: none; }
+}
+/* A finger needs more than the drawn faces. Hit areas grow without moving
+   anything; the faces keep Instrument's geometry. */
+@media (pointer: coarse) {
+  .isotone-pick::after, .isotone-send::after { inset: -8px -10px; }
+  .isotone-chip button { position: relative; }
+  .isotone-chip button::after, .isotone-note > .isotone-x::after, .isotone-panel-close::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
+}
 @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); }
@@ -988,7 +1083,7 @@ function ensurePanelStyles(target) {
 }
 
 // src/react/VariantsView.tsx
-import { useEffect as useEffect2, useLayoutEffect as useLayoutEffect2, useMemo as useMemo2, useRef as useRef3, useState as useState2 } from "react";
+import { useEffect as useEffect2, useId as useId2, useLayoutEffect as useLayoutEffect2, useMemo as useMemo2, useRef as useRef3, useState as useState2 } from "react";
 
 // src/react/useLayoutMotion.ts
 import { useLayoutEffect, useRef as useRef2 } from "react";
@@ -1046,13 +1141,13 @@ function useLayoutMotion(ref, revision, active = true) {
     previous.current = next;
   }, [ref, revision, active]);
   useLayoutEffect(() => {
-    const media = typeof matchMedia === "function" ? matchMedia("(prefers-reduced-motion: reduce)") : null;
+    const media2 = typeof matchMedia === "function" ? matchMedia("(prefers-reduced-motion: reduce)") : null;
     const changed = () => {
-      if (media?.matches) clearPositions(previous.current);
+      if (media2?.matches) clearPositions(previous.current);
     };
-    media?.addEventListener("change", changed);
+    media2?.addEventListener("change", changed);
     return () => {
-      media?.removeEventListener("change", changed);
+      media2?.removeEventListener("change", changed);
       clearPositions(previous.current);
     };
   }, []);
@@ -1072,6 +1167,7 @@ function useVariantsSource(source) {
   return revision;
 }
 var NO_PENDING_ACTIONS = [];
+var DEFAULT_EMPTY_TEXT = "No variants on this page yet. Ask your agent to create variants of any design and they will appear here.";
 function VariantsView({
   source,
   showTitle = true,
@@ -1080,26 +1176,35 @@ function VariantsView({
   onClose,
   onSaved,
   onManage,
-  pendingActions = NO_PENDING_ACTIONS
+  pendingActions = NO_PENDING_ACTIONS,
+  emptyText = DEFAULT_EMPTY_TEXT
 }) {
   const revision = useVariantsSource(source);
   useEffect2(() => {
     if (active) refreshSource(source);
   }, [active, source]);
-  const { selections, shown, sourceError } = useMemo2(() => {
+  const { selections, shown, sections, names, sourceError } = useMemo2(() => {
     const selections2 = source.getSelections();
+    const shown2 = visibleAxes(source.getAxes(), selections2);
+    const sections2 = sectionAxes(shown2);
     return {
       selections: selections2,
-      shown: visibleAxes(source.getAxes(), selections2),
+      shown: shown2,
+      sections: sections2,
+      names: new Map(sections2.flatMap((section) => section.axes).map((entry) => [entry.axis.id, entry])),
       sourceError: source.getError?.()
     };
   }, [source, revision]);
+  const [collapsed, setCollapsed] = useState2(() => /* @__PURE__ */ new Set());
   const [menuId, setMenuId] = useState2(null);
   const menu = shown.find((axis) => axis.id === menuId) ?? null;
+  const nameOf = (axis) => names.get(axis.id) ?? axisSection(axis);
+  const menuName = menu ? nameOf(menu) : null;
   const [menuOpen, setMenuOpen] = useState2(false);
   const [busy, setBusy] = useState2(false);
   const [error, setError] = useState2("");
   const menuRef = useRef3(null);
+  const pendingFocus = useRef3(null);
   const bodyRef = useRef3(null);
   useLayoutMotion(bodyRef, shown, active);
   const trigger = useRef3(null);
@@ -1111,15 +1216,28 @@ function VariantsView({
     ...o,
     isDefault: o.id === menu.defaultOption
   })) : [];
-  const closeMenu = () => {
+  const closeMenu = (restoreFocus = true) => {
     setMenuOpen(false);
     setError("");
+    pendingFocus.current = null;
+    if (!restoreFocus) return;
     requestAnimationFrame(() => {
       if (trigger.current?.isConnected) trigger.current.focus();
       else
         bodyRef.current?.parentElement?.querySelector("button")?.focus();
     });
   };
+  useEffect2(() => {
+    const target = pendingFocus.current;
+    const dialog = menuRef.current;
+    if (busy || !target || !dialog || !menuOpen) return;
+    pendingFocus.current = null;
+    const rows = Array.from(dialog.querySelectorAll(".isotone-option-row"));
+    const at = rows.findIndex((row) => row.dataset.optionId === target.optionId);
+    const removable = (row) => row?.querySelector("button[data-remove]:not(:disabled)") ?? null;
+    const next = target.retry ? removable(rows[at]) : [...rows.slice(at + 1), ...rows.slice(0, Math.max(at, 0)).reverse()].map(removable).find(Boolean);
+    (next ?? dialog.querySelector("[data-reset]"))?.focus();
+  }, [busy, pendingActions, menuOpen]);
   useEffect2(() => {
     if (!menu) setMenuOpen(false);
   }, [menu]);
@@ -1170,10 +1288,10 @@ function VariantsView({
     const option = axis.kind === "range" ? void 0 : (axis.kind === "color" ? axis.swatches : axis.options).find(
       (o) => o.id === optionId
     );
-    closeMenu();
+    closeMenu(false);
     onFeedback?.({
       axisId: axis.id,
-      label: axis.label,
+      label: nameOf(axis).fullLabel,
       value: value(axis),
       ...option ? { optionId: option.id, optionLabel: option.label } : {}
     });
@@ -1181,18 +1299,21 @@ function VariantsView({
   const requested = (action) => pendingActions.some((pending) => pending.axisId === action.axisId && pending.action === action.action && pending.optionId === action.optionId);
   async function manage(action) {
     if (!menu || busy || !onManage || requested(action)) return;
+    const option = action.action === "remove-option" ? action.optionId : void 0;
     setBusy(true);
     setError("");
     try {
-      const option = menuOptions.find((o) => o.id === action.optionId);
+      const chosen = menuOptions.find((o) => o.id === action.optionId);
       await onManage(action, {
         axisId: menu.id,
-        label: menu.label,
+        label: menuName?.fullLabel ?? menu.label,
         value: value(menu),
-        ...option ? { optionId: option.id, optionLabel: option.label } : {}
+        ...chosen ? { optionId: chosen.id, optionLabel: chosen.label } : {}
       });
-      closeMenu();
+      if (option !== void 0) pendingFocus.current = { optionId: option, retry: false };
+      else closeMenu();
     } catch (e) {
+      if (option !== void 0) pendingFocus.current = { optionId: option, retry: true };
       setError(
         e instanceof Error ? e.message : "Could not update this selector."
       );
@@ -1200,6 +1321,100 @@ function VariantsView({
       setBusy(false);
     }
   }
+  function renderAxis({ axis, label, fullLabel }) {
+    const thumbnails = axis.kind !== "range" && axis.kind !== "color" && axis.options.length > 0 && axis.options.every((option) => option.image);
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: "isotone-axis",
+        "data-motion-key": axis.id,
+        children: [
+          /* @__PURE__ */ jsxs2("div", { className: "isotone-axis-head", children: [
+            /* @__PURE__ */ jsxs2(
+              "button",
+              {
+                type: "button",
+                className: "isotone-axis-label",
+                "aria-label": `${fullLabel} actions`,
+                "aria-haspopup": "dialog",
+                "aria-expanded": menuOpen && menu?.id === axis.id,
+                onClick: (e) => {
+                  trigger.current = e.currentTarget;
+                  setMenuId(axis.id);
+                  setError("");
+                  setMenuOpen(true);
+                },
+                children: [
+                  /* @__PURE__ */ jsx3("span", { onPointerOver: showOverflowTitle, children: label }),
+                  /* @__PURE__ */ jsx3(Icon2, { name: "chevron", size: 12 })
+                ]
+              }
+            ),
+            (axis.kind === "range" || axis.kind === "color") && /* @__PURE__ */ jsx3("span", { className: "isotone-axis-value", children: axis.kind === "range" ? formatRangeValue(axis, value(axis)) : value(axis).toUpperCase() })
+          ] }),
+          axis.kind === "range" ? /* @__PURE__ */ jsx3(
+            "input",
+            {
+              type: "range",
+              className: "isotone-range",
+              "aria-label": fullLabel,
+              "aria-valuetext": formatRangeValue(axis, value(axis)),
+              min: axis.min,
+              max: axis.max,
+              step: axis.step,
+              value: Number(value(axis)),
+              onChange: (e) => source.setSelection(axis.id, e.target.value)
+            }
+          ) : axis.kind === "color" ? /* @__PURE__ */ jsxs2("fieldset", { className: "isotone-swatches", "aria-label": fullLabel, children: [
+            axis.swatches.map((sw) => /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                title: sw.label,
+                "aria-label": sw.label,
+                "aria-pressed": value(axis).toLowerCase() === sw.value.toLowerCase(),
+                className: "isotone-swatch",
+                style: { backgroundColor: sw.value },
+                onClick: () => source.setSelection(axis.id, sw.value)
+              },
+              sw.id
+            )),
+            /* @__PURE__ */ jsx3("label", { className: "isotone-picker", title: "Custom colour", children: /* @__PURE__ */ jsx3(
+              "input",
+              {
+                type: "color",
+                "aria-label": `${fullLabel}: custom colour`,
+                value: value(axis),
+                onChange: (e) => source.setSelection(axis.id, e.target.value)
+              }
+            ) })
+          ] }) : /* @__PURE__ */ jsx3(
+            "fieldset",
+            {
+              "aria-label": fullLabel,
+              className: thumbnails ? "isotone-grid" : "isotone-segs",
+              children: axis.options.map((o) => /* @__PURE__ */ jsxs2(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": o.label,
+                  "aria-pressed": value(axis) === o.id,
+                  className: `${thumbnails ? "isotone-thumb" : "isotone-seg"}${value(axis) === o.id ? " isotone-seg-on" : ""}`,
+                  onClick: () => source.setSelection(axis.id, o.id),
+                  children: [
+                    thumbnails && /* @__PURE__ */ jsx3("img", { src: o.image, alt: "" }),
+                    /* @__PURE__ */ jsx3("span", { onPointerOver: showOverflowTitle, children: o.label })
+                  ]
+                },
+                o.id
+              ))
+            }
+          )
+        ]
+      },
+      axis.id
+    );
+  }
   return /* @__PURE__ */ jsxs2("div", { className: "isotone-vars", children: [
     /* @__PURE__ */ jsxs2("div", { className: "isotone-panel-head", children: [
       showTitle && /* @__PURE__ */ jsx3("h2", { children: source.title ?? "Variants" }),
@@ -1223,101 +1438,23 @@ function VariantsView({
       node?.toggleAttribute("inert", menuOpen);
     }, children: [
       sourceError && /* @__PURE__ */ jsx3("p", { className: "isotone-danger", role: "alert", children: sourceError }),
-      shown.length === 0 && /* @__PURE__ */ jsx3("p", { className: "isotone-empty", children: "No variants on this page yet. Ask your agent to create variants of any design and they will appear here." }),
-      shown.map((axis) => {
-        const thumbnails = axis.kind !== "range" && axis.kind !== "color" && axis.options.length > 0 && axis.options.every((option) => option.image);
-        return /* @__PURE__ */ jsxs2(
-          "div",
-          {
-            className: "isotone-axis",
-            "data-motion-key": axis.id,
-            children: [
-              /* @__PURE__ */ jsxs2("div", { className: "isotone-axis-head", children: [
-                /* @__PURE__ */ jsxs2(
-                  "button",
-                  {
-                    type: "button",
-                    className: "isotone-axis-label",
-                    "aria-label": `${axis.label} actions`,
-                    "aria-haspopup": "dialog",
-                    "aria-expanded": menuOpen && menu?.id === axis.id,
-                    onClick: (e) => {
-                      trigger.current = e.currentTarget;
-                      setMenuId(axis.id);
-                      setError("");
-                      setMenuOpen(true);
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx3("span", { onPointerOver: showOverflowTitle, children: axis.label }),
-                      /* @__PURE__ */ jsx3(Icon2, { name: "chevron", size: 12 })
-                    ]
-                  }
-                ),
-                (axis.kind === "range" || axis.kind === "color") && /* @__PURE__ */ jsx3("span", { className: "isotone-axis-value", children: axis.kind === "range" ? formatRangeValue(axis, value(axis)) : value(axis).toUpperCase() })
-              ] }),
-              axis.kind === "range" ? /* @__PURE__ */ jsx3(
-                "input",
-                {
-                  type: "range",
-                  className: "isotone-range",
-                  "aria-label": axis.label,
-                  "aria-valuetext": formatRangeValue(axis, value(axis)),
-                  min: axis.min,
-                  max: axis.max,
-                  step: axis.step,
-                  value: Number(value(axis)),
-                  onChange: (e) => source.setSelection(axis.id, e.target.value)
-                }
-              ) : axis.kind === "color" ? /* @__PURE__ */ jsxs2("fieldset", { className: "isotone-swatches", "aria-label": axis.label, children: [
-                axis.swatches.map((sw) => /* @__PURE__ */ jsx3(
-                  "button",
-                  {
-                    type: "button",
-                    title: sw.label,
-                    "aria-label": sw.label,
-                    "aria-pressed": value(axis).toLowerCase() === sw.value.toLowerCase(),
-                    className: "isotone-swatch",
-                    style: { backgroundColor: sw.value },
-                    onClick: () => source.setSelection(axis.id, sw.value)
-                  },
-                  sw.id
-                )),
-                /* @__PURE__ */ jsx3("label", { className: "isotone-picker", title: "Custom colour", children: /* @__PURE__ */ jsx3(
-                  "input",
-                  {
-                    type: "color",
-                    "aria-label": `${axis.label}: custom colour`,
-                    value: value(axis),
-                    onChange: (e) => source.setSelection(axis.id, e.target.value)
-                  }
-                ) })
-              ] }) : /* @__PURE__ */ jsx3(
-                "fieldset",
-                {
-                  "aria-label": axis.label,
-                  className: thumbnails ? "isotone-grid" : "isotone-segs",
-                  children: axis.options.map((o) => /* @__PURE__ */ jsxs2(
-                    "button",
-                    {
-                      type: "button",
-                      "aria-label": o.label,
-                      "aria-pressed": value(axis) === o.id,
-                      className: `${thumbnails ? "isotone-thumb" : "isotone-seg"}${value(axis) === o.id ? " isotone-seg-on" : ""}`,
-                      onClick: () => source.setSelection(axis.id, o.id),
-                      children: [
-                        thumbnails && /* @__PURE__ */ jsx3("img", { src: o.image, alt: "" }),
-                        /* @__PURE__ */ jsx3("span", { onPointerOver: showOverflowTitle, children: o.label })
-                      ]
-                    },
-                    o.id
-                  ))
-                }
-              )
-            ]
-          },
-          axis.id
-        );
-      })
+      shown.length === 0 && /* @__PURE__ */ jsx3("p", { className: "isotone-empty", children: emptyText }),
+      sections.map((section) => section.name === null ? section.axes.map(renderAxis) : /* @__PURE__ */ jsx3(
+        SectionBlock,
+        {
+          name: section.name,
+          sectionKey: section.key,
+          count: section.axes.length,
+          collapsed: collapsed.has(section.key),
+          onToggle: () => setCollapsed((previous) => {
+            const next = new Set(previous);
+            if (!next.delete(section.key)) next.add(section.key);
+            return next;
+          }),
+          children: section.axes.map(renderAxis)
+        },
+        `section:${section.key}`
+      ))
     ] }),
     menu && /* @__PURE__ */ jsxs2(
       "div",
@@ -1328,7 +1465,7 @@ function VariantsView({
           node?.toggleAttribute("inert", !menuOpen);
         },
         role: "dialog",
-        "aria-label": `${menu.label} actions`,
+        "aria-label": `${menuName?.fullLabel ?? menu.label} actions`,
         "aria-hidden": !menuOpen,
         "data-open": menuOpen,
         onKeyDown: (e) => {
@@ -1340,7 +1477,7 @@ function VariantsView({
         },
         children: [
           /* @__PURE__ */ jsxs2("div", { className: "isotone-menu-title", children: [
-            /* @__PURE__ */ jsx3("strong", { children: menu.label }),
+            /* @__PURE__ */ jsx3("strong", { children: menuName?.label ?? menu.label }),
             /* @__PURE__ */ jsx3(
               "button",
               {
@@ -1348,7 +1485,7 @@ function VariantsView({
                 className: "isotone-icon",
                 "aria-label": "Close selector actions",
                 title: "Close selector actions",
-                onClick: closeMenu,
+                onClick: () => closeMenu(),
                 children: /* @__PURE__ */ jsx3(Icon2, { name: "close" })
               }
             )
@@ -1366,44 +1503,52 @@ function VariantsView({
                 ]
               }
             ),
-            menu.kind !== "range" && /* @__PURE__ */ jsx3("div", { className: "isotone-menu-options", children: menuOptions.map((option) => /* @__PURE__ */ jsxs2("div", { className: "isotone-option-row", children: [
-              /* @__PURE__ */ jsxs2("span", { children: [
-                option.label,
-                option.isDefault && /* @__PURE__ */ jsx3("small", { children: "Default" })
-              ] }),
-              onFeedback && /* @__PURE__ */ jsx3(
-                "button",
-                {
-                  type: "button",
-                  className: "isotone-icon",
-                  "aria-label": `Feedback on ${option.label}`,
-                  title: "Give feedback",
-                  onClick: () => feedback(menu, option.id),
-                  children: /* @__PURE__ */ jsx3(Icon2, { name: "message" })
-                }
-              ),
-              onManage && /* @__PURE__ */ jsx3(
-                "button",
-                {
-                  type: "button",
-                  className: "isotone-icon",
-                  "aria-label": `Remove ${option.label}`,
-                  disabled: option.isDefault || busy || requested({ axisId: menu.id, action: "remove-option", optionId: option.id }),
-                  title: option.isDefault ? "Default option" : "Request option removal",
-                  onClick: () => void manage({
-                    axisId: menu.id,
-                    action: "remove-option",
-                    optionId: option.id
-                  }),
-                  children: /* @__PURE__ */ jsx3(Icon2, { name: "trash" })
-                }
-              )
-            ] }, option.id)) }),
+            menu.kind !== "range" && /* @__PURE__ */ jsx3("div", { className: "isotone-menu-options", children: menuOptions.map((option) => {
+              const pending = requested({ axisId: menu.id, action: "remove-option", optionId: option.id });
+              return /* @__PURE__ */ jsxs2("div", { className: "isotone-option-row", "data-option-id": option.id, "data-requested": pending || void 0, children: [
+                /* @__PURE__ */ jsxs2("span", { className: "isotone-option-name", children: [
+                  /* @__PURE__ */ jsx3("span", { className: "isotone-option-label", children: option.label }),
+                  (option.isDefault || pending) && /* @__PURE__ */ jsxs2("span", { className: "isotone-option-tags", children: [
+                    option.isDefault && /* @__PURE__ */ jsx3("small", { children: "Default" }),
+                    pending && /* @__PURE__ */ jsx3("small", { children: "Removal requested" })
+                  ] })
+                ] }),
+                onFeedback && /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    type: "button",
+                    className: "isotone-icon",
+                    "aria-label": `Feedback on ${option.label}`,
+                    title: "Give feedback",
+                    onClick: () => feedback(menu, option.id),
+                    children: /* @__PURE__ */ jsx3(Icon2, { name: "message" })
+                  }
+                ),
+                onManage && /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    type: "button",
+                    className: "isotone-icon",
+                    "data-remove": "",
+                    "aria-label": `Remove ${option.label}`,
+                    disabled: option.isDefault || busy || pending,
+                    title: option.isDefault ? "Default option" : pending ? "Removal requested" : "Request option removal",
+                    onClick: () => void manage({
+                      axisId: menu.id,
+                      action: "remove-option",
+                      optionId: option.id
+                    }),
+                    children: /* @__PURE__ */ jsx3(Icon2, { name: "trash" })
+                  }
+                )
+              ] }, option.id);
+            }) }),
             /* @__PURE__ */ jsxs2(
               "button",
               {
                 type: "button",
                 className: "isotone-menu-action",
+                "data-reset": "",
                 onClick: () => {
                   source.setSelection(menu.id, axisDefault(menu));
                   closeMenu();
@@ -1449,6 +1594,39 @@ function VariantsView({
     )
   ] });
 }
+function SectionBlock({
+  name,
+  sectionKey,
+  count,
+  collapsed,
+  onToggle,
+  children
+}) {
+  const id = useId2();
+  return (
+    // The heading carries the structure (heading navigation, a disclosure button);
+    // a region or group per section would only add landmarks to a long list.
+    /* @__PURE__ */ jsxs2("div", { className: "isotone-section", "data-collapsed": collapsed, children: [
+      /* @__PURE__ */ jsx3("h3", { className: "isotone-section-head", "data-motion-key": `section:${sectionKey}`, children: /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          type: "button",
+          className: "isotone-section-toggle",
+          "aria-label": `${name}, ${count} ${count === 1 ? "selector" : "selectors"}`,
+          "aria-expanded": !collapsed,
+          "aria-controls": `${id}-body`,
+          onClick: onToggle,
+          children: [
+            /* @__PURE__ */ jsx3(Icon2, { name: "chevron", size: 12 }),
+            /* @__PURE__ */ jsx3("span", { onPointerOver: showOverflowTitle, children: name }),
+            /* @__PURE__ */ jsx3("small", { children: count })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx3("div", { className: "isotone-section-body", id: `${id}-body`, hidden: collapsed, children: collapsed ? null : children })
+    ] })
+  );
+}
 function SaveDefaults({
   source,
   onSaved
@@ -1626,8 +1804,8 @@ function observeTheme(onTheme, preference = "auto") {
   sample();
   if (preference === "light" || preference === "dark") return () => {
   };
-  const media = window.matchMedia?.("(prefers-color-scheme: dark)");
-  media?.addEventListener("change", schedule);
+  const media2 = window.matchMedia?.("(prefers-color-scheme: dark)");
+  media2?.addEventListener("change", schedule);
   const pageEvent = (event) => {
     if (!isPanel(event.target instanceof Node ? event.target : null)) schedule();
   };
@@ -1642,7 +1820,7 @@ function observeTheme(onTheme, preference = "auto") {
     disposed = true;
     observer?.disconnect();
     if (frame !== void 0) window.cancelAnimationFrame(frame);
-    media?.removeEventListener("change", schedule);
+    media2?.removeEventListener("change", schedule);
     window.removeEventListener("resize", schedule);
     document.removeEventListener("scroll", pageEvent, true);
     document.removeEventListener("load", pageEvent, true);
@@ -1656,7 +1834,20 @@ 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 Reply({ note }) {
+  if (!note.reply?.text || note.reply.answered) return null;
+  return /* @__PURE__ */ jsxs3("p", { className: "isotone-reply", onPointerOver: showOverflowTitle, children: [
+    /* @__PURE__ */ jsx4("span", { children: "Agent asks" }),
+    " ",
+    note.reply.text
+  ] });
+}
 function NoteSummary({ note, page }) {
+  if (note.update) return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsx4("p", { children: updateNoteText(note.update) }),
+    /* @__PURE__ */ jsx4(Reply, { note }),
+    /* @__PURE__ */ jsx4("span", { className: "isotone-meta", children: /* @__PURE__ */ jsx4(SummaryTag, { label: "Update" }) })
+  ] });
   if (!note.feedback.startsWith("[set-defaults]")) {
     const elements = note.elements ?? (note.element ? [note.element] : []);
     const references = [
@@ -1669,6 +1860,7 @@ function NoteSummary({ note, page }) {
     ];
     return /* @__PURE__ */ jsxs3(Fragment3, { children: [
       /* @__PURE__ */ jsx4("p", { children: note.feedback }),
+      /* @__PURE__ */ jsx4(Reply, { note }),
       references.length > 0 && /* @__PURE__ */ jsx4("span", { className: "isotone-meta", children: references.map((reference) => /* @__PURE__ */ jsx4(SummaryTag, { label: reference.label }, reference.key)) })
     ] });
   }
@@ -1692,6 +1884,7 @@ function NoteSummary({ note, page }) {
   }
   return /* @__PURE__ */ jsxs3(Fragment3, { children: [
     /* @__PURE__ */ jsx4("p", { children: note.feedback }),
+    /* @__PURE__ */ jsx4(Reply, { note }),
     (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}`)),
@@ -1789,11 +1982,14 @@ function useDockMotion(ref, visible) {
       if (changed) measure();
     });
     mutations.observe(root, { subtree: true, childList: true, attributes: true, attributeFilter: ["data-open", "data-instant"] });
+    const lifted = new MutationObserver(measure);
+    lifted.observe(root, { attributes: true, attributeFilter: ["style"] });
     reduced?.addEventListener("change", measure);
     window.addEventListener("resize", measure);
     return () => {
       observer?.disconnect();
       mutations.disconnect();
+      lifted.disconnect();
       reduced?.removeEventListener("change", measure);
       window.removeEventListener("resize", measure);
       for (const element of exits.keys()) removeExit(element);
@@ -1802,6 +1998,73 @@ function useDockMotion(ref, visible) {
   }, [ref, visible]);
 }
 
+// src/react/hints.ts
+var HINTS = {
+  /** The select-mode cover over the docked composer: what to do, then how to pause. */
+  picking: {
+    pointer: { title: "Click elements on the page", pause: "Hold \u21E7 to use the page" },
+    touch: { title: "Tap elements on the page", pause: "Tap Done to use the page" }
+  },
+  /** The floating composer beside a pinned element, while still selecting. */
+  floating: {
+    pointer: "Click to pin more \xB7 \u21E7 uses the page",
+    touch: "Tap to pin more \xB7 crosshair pauses"
+  }
+};
+
+// src/react/viewport.ts
+import { useEffect as useEffect3 } from "react";
+var COMPACT_QUERY = "(max-width: 640px), (max-height: 500px)";
+var TOUCH_QUERY = "(hover: none) and (pointer: coarse)";
+var KEYBOARD_MIN = 80;
+function media(query) {
+  return typeof matchMedia === "function" && Boolean(matchMedia(query)?.matches);
+}
+function isCompactViewport() {
+  return media(COMPACT_QUERY);
+}
+function prefersTouch() {
+  return media(TOUCH_QUERY);
+}
+function visibleBand() {
+  const viewport = typeof window !== "undefined" ? window.visualViewport : null;
+  if (!viewport || Math.abs(viewport.scale - 1) > 0.01 || innerHeight - viewport.height < KEYBOARD_MIN)
+    return { top: 0, bottom: innerHeight };
+  return { top: viewport.offsetTop, bottom: viewport.offsetTop + viewport.height };
+}
+function useKeyboardInset(ref, active) {
+  useEffect3(() => {
+    const node = ref.current;
+    const viewport = typeof window !== "undefined" ? window.visualViewport : null;
+    if (!active || !node || !viewport) return;
+    let frame = 0;
+    const apply = () => {
+      frame = 0;
+      const band = visibleBand();
+      if (band.top === 0 && band.bottom === innerHeight) {
+        node.style.removeProperty("--iso-keyboard");
+        node.style.removeProperty("--iso-viewport");
+        return;
+      }
+      node.style.setProperty("--iso-keyboard", `${Math.max(0, Math.round(innerHeight - band.bottom))}px`);
+      node.style.setProperty("--iso-viewport", `${Math.round(band.bottom - band.top)}px`);
+    };
+    const schedule = () => {
+      frame ||= requestAnimationFrame(apply);
+    };
+    apply();
+    viewport.addEventListener("resize", schedule);
+    viewport.addEventListener("scroll", schedule);
+    return () => {
+      cancelAnimationFrame(frame);
+      viewport.removeEventListener("resize", schedule);
+      viewport.removeEventListener("scroll", schedule);
+      node.style.removeProperty("--iso-keyboard");
+      node.style.removeProperty("--iso-viewport");
+    };
+  }, [ref, active]);
+}
+
 // src/react/IterationPanel.tsx
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var PULSE_MS = 2e3;
@@ -1859,6 +2122,7 @@ function IterationPanel({
   rule,
   getPayload,
   variants,
+  variantsEmptyText,
   defaultTab = "notes",
   shortcut = DEFAULT_SHORTCUT
 }) {
@@ -1887,6 +2151,16 @@ function IterationPanel({
   );
   const [hoverRect, setHoverRect] = useState3(null);
   const [rects, setRects] = useState3([]);
+  const pinnedElements = useRef4(/* @__PURE__ */ new Map());
+  const locate = useCallback((selector) => {
+    const pinned = pinnedElements.current.get(selector);
+    if (pinned?.isConnected) return pinned;
+    try {
+      return document.querySelector(selector);
+    } catch {
+      return null;
+    }
+  }, []);
   const [text, setText] = useState3("");
   const [notes, setNotes] = useState3([]);
   const [scope, setScope] = useState3(null);
@@ -1899,17 +2173,19 @@ function IterationPanel({
   const [notice, setNotice] = useState3("");
   const [theme, setTheme] = useState3(() => detectTheme(themePreference));
   const [instant, setInstant] = useState3(false);
+  const [touch, setTouch] = useState3(prefersTouch);
+  const touchRef = useRef4(touch);
   const rootRef = useRef4(null);
   const textareaRef = useRef4(null);
   const focusFrame = useRef4(0);
-  useEffect3(() => () => cancelAnimationFrame(focusFrame.current), []);
+  useEffect4(() => () => cancelAnimationFrame(focusFrame.current), []);
   const listRef = useRef4(null);
   useLayoutMotion(listRef, notes, notesOpen);
   const fabRef = useRef4(null);
   const previousFocus = useRef4(null);
   const draftRestored = useRef4("");
   const restoringDraft = useRef4(false);
-  const id = useId2();
+  const id = useId3();
   const notesAvailable = Boolean(storeCfg.endpoint);
   useVariantsSource(variants);
   const variantsAvailable = Boolean(
@@ -1937,7 +2213,7 @@ function IterationPanel({
     observer.observe(field);
     return () => observer.disconnect();
   }, [text, notesOpen, visible, hasContext, floating]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!visible) {
       setHovered(false);
       setFocused(false);
@@ -1965,9 +2241,21 @@ function IterationPanel({
     };
   }, [visible]);
   useDockMotion(rootRef, visible);
+  useKeyboardInset(rootRef, visible);
+  const wasOpen = useRef4({ notes: notesOpen, variants: variantsOpen });
+  useLayoutEffect4(() => {
+    const was = wasOpen.current;
+    wasOpen.current = { notes: notesOpen, variants: variantsOpen };
+    if (!notesOpen || !variantsOpen || !isCompactViewport()) return;
+    if (was.variants) setVariantsOpen(false);
+    else {
+      setNotesOpen(false);
+      setPicking(false);
+    }
+  }, [notesOpen, variantsOpen]);
   const open = notesOpen || variantsOpen;
   const railOpen = expanded || hovered || focused && instant || open || picking;
-  useEffect3(() => {
+  useEffect4(() => {
     if (!railOpen || !instant) return;
     const active = rootRef.current?.getRootNode()?.activeElement;
     if (active === fabRef.current) rootRef.current?.querySelector(".isotone-rail-button")?.focus();
@@ -1976,7 +2264,7 @@ function IterationPanel({
   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);
+    for (const n of openNotes) if (!n.update) counts.set(n.route, (counts.get(n.route) ?? 0) + 1);
     const others = [...counts.keys()].filter((r) => r !== route).sort();
     return { counts, others };
   }, [openNotes, route]);
@@ -1984,7 +2272,8 @@ function IterationPanel({
     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 updateRequested = useMemo3(() => openNotes.some((n) => n.update), [openNotes]);
+  const visibleNotes = useMemo3(() => openNotes.filter((n) => n.update || 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);
@@ -2184,10 +2473,10 @@ function IterationPanel({
       finish();
     }
   }
-  useEffect3(() => {
+  useEffect4(() => {
     loadNotes();
   }, [notesOpen, variantsOpen, route]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!notesAvailable || !visible) return;
     let stopped = false;
     let running = false;
@@ -2236,13 +2525,13 @@ function IterationPanel({
       window.removeEventListener("focus", wake);
     };
   }, [notesAvailable, visible, store]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (variants && notesOpen && !variantsOpen) refreshSource(variants);
   }, [notesOpen, variantsOpen, variants]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (variants && !variantsAvailable) refreshSource(variants);
   }, [variants]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (draftRestored.current === draftKey) return;
     draftRestored.current = draftKey;
     restoringDraft.current = true;
@@ -2267,7 +2556,7 @@ function IterationPanel({
     } catch {
     }
   }, [draftKey]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (restoringDraft.current) {
       restoringDraft.current = false;
       return;
@@ -2285,7 +2574,7 @@ function IterationPanel({
     } catch {
     }
   }, [text, targets, variantTarget, editing, draftKey]);
-  useEffect3(() => {
+  useEffect4(() => {
     const el = listRef.current;
     if (el) el.scrollTop = el.scrollHeight;
   }, [notes, notesOpen]);
@@ -2296,7 +2585,7 @@ function IterationPanel({
       ensurePanelStyles(root);
     return observeTheme(setTheme, themePreference);
   }, [visible, open, route, themePreference]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!visible) return;
     const onKey = (e) => {
       rootRef.current?.setAttribute("data-instant", "true");
@@ -2317,9 +2606,13 @@ function IterationPanel({
         startFeedback(true);
       }
     };
-    const onPointer = () => {
+    const onPointer = (e) => {
       rootRef.current?.setAttribute("data-instant", "false");
       setInstant(false);
+      if (e.pointerType) {
+        touchRef.current = e.pointerType === "touch";
+        setTouch(touchRef.current);
+      }
     };
     window.addEventListener("keydown", onKey, true);
     window.addEventListener("pointerdown", onPointer, true);
@@ -2328,7 +2621,7 @@ function IterationPanel({
       window.removeEventListener("pointerdown", onPointer, true);
     };
   });
-  useEffect3(() => {
+  useEffect4(() => {
     if (!open || picking) return;
     const onKey = (e) => {
       if (e.key !== "Escape" || e.defaultPrevented) return;
@@ -2339,7 +2632,7 @@ function IterationPanel({
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   });
-  useEffect3(() => {
+  useEffect4(() => {
     if (!picking) return;
     const cursor = document.body.style.cursor;
     document.body.style.cursor = "crosshair";
@@ -2349,6 +2642,7 @@ function IterationPanel({
       return el && !el.closest("[data-isotone]") ? el : null;
     };
     const onMove = (e) => {
+      if (e.pointerType === "touch") return;
       cancelAnimationFrame(frame);
       const deferred = e.shiftKey;
       frame = requestAnimationFrame(() => {
@@ -2358,6 +2652,7 @@ function IterationPanel({
     };
     const toggleTarget = (el) => {
       const target = describeIterationElement(elementAsNode(el));
+      pinnedElements.current.set(target.selector, el);
       const added = !targetsRef.current.some((t) => t.selector === target.selector);
       setTargets(
         (prev) => prev.some((t) => t.selector === target.selector) ? prev.filter((t) => t.selector !== target.selector) : prev.length < 50 ? [...prev, target] : prev
@@ -2378,7 +2673,7 @@ function IterationPanel({
         const y = pointed ? e.clientY : r.bottom;
         if (!anchorRef.current)
           slotHeight.current = rootRef.current?.querySelector(".isotone-notes-panel .isotone-input")?.offsetHeight ?? 0;
-        setAnchor({ selector: added.selector, dx: x - r.left, dy: y - r.top, x, y });
+        setAnchor({ selector: added.selector, dx: x - r.left, dy: y - r.top, x, y, beside: touchRef.current && pointed });
         setNotesOpen(true);
         focusWhilePicking();
       }
@@ -2415,19 +2710,19 @@ function IterationPanel({
       setNotesOpen(true);
       focusComposer();
     };
-    window.addEventListener("mousemove", onMove, true);
+    window.addEventListener("pointermove", onMove, true);
     window.addEventListener("click", onClick, true);
     window.addEventListener("keydown", onKey, true);
     return () => {
       document.body.style.cursor = cursor;
       cancelAnimationFrame(frame);
       setHoverRect(null);
-      window.removeEventListener("mousemove", onMove, true);
+      window.removeEventListener("pointermove", onMove, true);
       window.removeEventListener("click", onClick, true);
       window.removeEventListener("keydown", onKey, true);
     };
   }, [picking, focusComposer, focusWhilePicking]);
-  useEffect3(() => {
+  useEffect4(() => {
     const shadow = rootRef.current?.getRootNode();
     if (!(shadow instanceof ShadowRoot)) return;
     const stop = (e) => e.stopPropagation();
@@ -2437,7 +2732,7 @@ function IterationPanel({
       for (const type of types) shadow.removeEventListener(type, stop);
     };
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!notesOpen) setAnchor(null);
   }, [notesOpen]);
   useLayoutEffect4(() => {
@@ -2453,39 +2748,46 @@ function IterationPanel({
     const place = () => {
       frame = void 0;
       let { x, y } = anchor;
-      try {
-        const el = document.querySelector(anchor.selector);
-        if (el) {
-          const r = el.getBoundingClientRect();
-          x = r.left + anchor.dx;
-          y = r.top + anchor.dy;
-        }
-      } catch {
+      const el = locate(anchor.selector);
+      const r = el?.getBoundingClientRect();
+      if (r) {
+        x = r.left + anchor.dx;
+        y = r.top + anchor.dy;
       }
       const vw = document.documentElement.clientWidth || innerWidth;
       const vh = innerHeight;
+      const band = visibleBand();
+      const minY = band.top + FLOAT_MARGIN;
+      const maxY = band.bottom - FLOAT_MARGIN;
       const w = float.offsetWidth;
       const h = float.offsetHeight;
+      const fits = (below, above) => [below + FLOAT_GAP + h <= maxY, above - FLOAT_GAP - h >= minY];
+      let belowY = y;
+      let aboveY = y;
       let left = x + FLOAT_GAP;
-      if (left + w > vw - FLOAT_MARGIN) left = x - FLOAT_GAP - w;
+      if (anchor.beside && r && fits(r.bottom, r.top).some(Boolean)) {
+        belowY = r.bottom;
+        aboveY = r.top;
+        left = x - w / 2;
+      } else if (left + w > vw - FLOAT_MARGIN) left = x - FLOAT_GAP - w;
       left = Math.max(FLOAT_MARGIN, Math.min(left, vw - w - FLOAT_MARGIN));
-      const fitsBelow = y + FLOAT_GAP + h <= vh - FLOAT_MARGIN;
-      const fitsAbove = y - FLOAT_GAP - h >= FLOAT_MARGIN;
+      const [fitsBelow, fitsAbove] = fits(belowY, aboveY);
       if (side === null || (side === "below" ? !fitsBelow && fitsAbove : !fitsAbove && fitsBelow))
         side = fitsBelow || !fitsAbove ? "below" : "above";
       float.style.left = `${left}px`;
+      let top;
       if (side === "below") {
-        const top = Math.max(FLOAT_MARGIN, Math.min(y + FLOAT_GAP, vh - h - FLOAT_MARGIN));
+        top = Math.max(minY, Math.min(belowY + FLOAT_GAP, maxY - h));
         float.style.top = `${top}px`;
         float.style.bottom = "auto";
-        float.style.transformOrigin = `${x - left}px ${y - top}px`;
       } else {
-        const bottom = Math.max(FLOAT_MARGIN, Math.min(vh - y + FLOAT_GAP, vh - h - FLOAT_MARGIN));
+        const bottom = Math.max(vh - maxY, Math.min(vh - aboveY + FLOAT_GAP, vh - h - minY));
         float.style.bottom = `${bottom}px`;
         float.style.top = "auto";
-        float.style.transformOrigin = `${x - left}px ${y - (vh - bottom - h)}px`;
+        top = vh - bottom - h;
       }
-      lastFloat.current = { left, top: side === "below" ? Number.parseFloat(float.style.top) : vh - Number.parseFloat(float.style.bottom) - h };
+      float.style.transformOrigin = `${x - left}px ${y - top}px`;
+      lastFloat.current = { left, top };
     };
     const schedule = () => {
       frame ??= requestAnimationFrame(place);
@@ -2509,14 +2811,19 @@ function IterationPanel({
     observer?.observe(float);
     window.addEventListener("scroll", schedule, { capture: true, passive: true });
     window.addEventListener("resize", schedule);
+    const viewport = window.visualViewport;
+    viewport?.addEventListener("resize", schedule);
+    viewport?.addEventListener("scroll", schedule);
     return () => {
       if (frame !== void 0) cancelAnimationFrame(frame);
       glide?.cancel();
       observer?.disconnect();
       window.removeEventListener("scroll", schedule, true);
       window.removeEventListener("resize", schedule);
+      viewport?.removeEventListener("resize", schedule);
+      viewport?.removeEventListener("scroll", schedule);
     };
-  }, [anchor]);
+  }, [anchor, locate]);
   useLayoutEffect4(() => {
     const last = floatNode.current;
     const root = rootRef.current;
@@ -2543,7 +2850,11 @@ function IterationPanel({
       ghost.remove();
     };
   }, [floating]);
-  useEffect3(() => {
+  useEffect4(() => {
+    const kept = new Set(targets.map((t) => t.selector));
+    for (const selector of pinnedElements.current.keys()) if (!kept.has(selector)) pinnedElements.current.delete(selector);
+  }, [targets]);
+  useEffect4(() => {
     if (!picking && !floating) {
       setRects([]);
       return;
@@ -2553,22 +2864,18 @@ function IterationPanel({
       frame = void 0;
       setRects(
         targets.flatMap((t) => {
-          try {
-            const el = document.querySelector(t.selector);
-            if (!el) return [];
-            const r = el.getBoundingClientRect();
-            return [
-              {
-                top: r.top,
-                left: r.left,
-                width: r.width,
-                height: r.height,
-                selector: t.selector
-              }
-            ];
-          } catch {
-            return [];
-          }
+          const el = locate(t.selector);
+          if (!el) return [];
+          const r = el.getBoundingClientRect();
+          return [
+            {
+              top: r.top,
+              left: r.left,
+              width: r.width,
+              height: r.height,
+              selector: t.selector
+            }
+          ];
         })
       );
     };
@@ -2583,7 +2890,7 @@ function IterationPanel({
       window.removeEventListener("scroll", schedule, true);
       window.removeEventListener("resize", schedule);
     };
-  }, [targets, picking, floating]);
+  }, [targets, picking, floating, locate]);
   const variantsPanel = variants && /* @__PURE__ */ jsxs4(
     "section",
     {
@@ -2613,7 +2920,8 @@ function IterationPanel({
             onFeedback: notesAvailable ? feedback : void 0,
             onSaved: loadNotes,
             onManage: notesAvailable ? queueRemoval : void 0,
-            pendingActions
+            pendingActions,
+            emptyText: variantsEmptyText
           }
         )
       ]
@@ -2635,6 +2943,11 @@ function IterationPanel({
           textareaRef.current?.focus({ preventScroll: true });
         },
         children: [
+          editing?.reply?.text && !editing.reply.answered && /* @__PURE__ */ jsxs4("p", { className: "isotone-editing-reply", children: [
+            /* @__PURE__ */ jsx5("span", { children: "Agent asks" }),
+            " ",
+            editing.reply.text
+          ] }),
           /* @__PURE__ */ jsxs4("div", { className: "isotone-context", "aria-live": "polite", children: [
             editing && /* @__PURE__ */ jsxs4("span", { className: "isotone-chip", children: [
               "Editing note",
@@ -2734,7 +3047,7 @@ function IterationPanel({
                   children: /* @__PURE__ */ jsx5(Icon2, { name: "pin", size: 14 })
                 }
               ),
-              floating && picking && /* @__PURE__ */ jsx5("span", { ref: fadeIn, className: "isotone-float-hint", children: "Click to pin more \xB7 hold \u21E7 to use the page" }),
+              floating && picking && /* @__PURE__ */ jsx5("span", { ref: fadeIn, className: "isotone-float-hint", children: HINTS.floating[touch ? "touch" : "pointer"] }),
               /* @__PURE__ */ jsx5(
                 "button",
                 {
@@ -2751,8 +3064,8 @@ function IterationPanel({
             picking && !floating && /* @__PURE__ */ jsxs4("div", { ref: fadeIn, className: "isotone-picking", "data-still": pickingWithPanel, children: [
               /* @__PURE__ */ jsx5(Icon2, { name: "pin", size: 14 }),
               /* @__PURE__ */ jsxs4("p", { children: [
-                /* @__PURE__ */ jsx5("span", { children: targets.length ? `${targets.length} selected` : "Click elements on the page" }),
-                /* @__PURE__ */ jsx5("small", { children: "Hold \u21E7 to use the page normally" })
+                /* @__PURE__ */ jsx5("span", { children: targets.length ? `${targets.length} selected` : HINTS.picking[touch ? "touch" : "pointer"].title }),
+                /* @__PURE__ */ jsx5("small", { children: HINTS.picking[touch ? "touch" : "pointer"].pause })
               ] }),
               /* @__PURE__ */ jsxs4(
                 "button",
@@ -2764,8 +3077,8 @@ function IterationPanel({
                     focusComposer();
                   },
                   children: [
-                    "Done ",
-                    /* @__PURE__ */ jsx5("kbd", { children: "\u21B5" })
+                    "Done",
+                    !touch && /* @__PURE__ */ jsx5("kbd", { children: "\u21B5" })
                   ]
                 }
               )
@@ -2842,7 +3155,14 @@ function IterationPanel({
             "data-motion-key": note.id,
             className: `isotone-note${editing?.id === note.id ? " isotone-note-editing" : ""}`,
             children: [
-              /* @__PURE__ */ jsxs4(
+              note.update ? (
+                // Isotone writes an update note's text from its request, so
+                // there is nothing to edit; its corner action cancels it.
+                /* @__PURE__ */ jsxs4("div", { className: "isotone-note-hit", "data-static": "", 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 })
+                ] })
+              ) : /* @__PURE__ */ jsxs4(
                 "button",
                 {
                   type: "button",
@@ -2860,8 +3180,8 @@ function IterationPanel({
                 {
                   type: "button",
                   className: "isotone-x isotone-icon",
-                  "aria-label": note.variantAction ? "Cancel removal" : "Delete note",
-                  title: note.variantAction ? "Cancel removal" : "Delete note",
+                  "aria-label": note.variantAction ? "Cancel removal" : note.update ? "Cancel update request" : "Delete note",
+                  title: note.variantAction ? "Cancel removal" : note.update ? "Cancel update request" : "Delete note",
                   onClick: () => void removeNote(note),
                   children: /* @__PURE__ */ jsx5(Icon2, { name: "close", size: 12 })
                 }
@@ -2904,6 +3224,7 @@ function IterationPanel({
       "data-tools": Number(Boolean(variants)) + Number(notesAvailable),
       "data-instant": instant,
       "data-notes-open": notesOpen,
+      "data-selecting": picking || floating,
       "data-working": working.size > 0,
       "data-open": open,
       className: "isotone-root",
@@ -2944,7 +3265,16 @@ function IterationPanel({
             children: composer
           }
         ),
-        /* @__PURE__ */ jsx5(UpdateNotice, { endpoint: updateEndpoint, active: open }),
+        /* @__PURE__ */ jsx5("div", { className: "isotone-notices", children: /* @__PURE__ */ jsx5(
+          UpdateNotice,
+          {
+            endpoint: updateEndpoint,
+            active: open,
+            route,
+            requested: updateRequested,
+            onRequested: notesAvailable ? loadNotes : void 0
+          }
+        ) }),
         /* @__PURE__ */ jsxs4(
           "fieldset",
           {
@@ -3069,9 +3399,10 @@ function withDocumentUntouched(create) {
   }
   return result;
 }
+var KNOBS_EMPTY_TEXT = "No knobs on this page yet. Ask your agent to add knobs for this page to .isotone/knobs.json and they will appear here.";
 function mountIteration(opts) {
   const getRoute = opts.getRoute ?? (() => window.location.pathname);
-  const variants = opts.variants === "overlay" ? overlaySourceWithSave(getRoute, opts.endpoint, opts.key) : opts.variants;
+  const variants = opts.variants === "overlay" || opts.variants === "knobs" ? overlaySourceWithSave(getRoute, opts.endpoint, opts.key, opts.variantsEndpoint) : opts.variants;
   if (!opts.endpoint && !variants) return () => {
   };
   if (!opts.endpoint && variants && variants.getAxes().length === 0 && typeof variants.refresh !== "function") {
@@ -3103,6 +3434,7 @@ function mountIteration(opts) {
           rule: opts.rule,
           getPayload: opts.getPayload,
           variants,
+          variantsEmptyText: opts.variants === "knobs" ? KNOBS_EMPTY_TEXT : void 0,
           defaultTab: opts.defaultTab,
           shortcut: opts.shortcut,
           updateEndpoint: opts.updateEndpoint,
@@ -3149,17 +3481,18 @@ function mountIteration(opts) {
     }, 0);
   };
 }
-function overlaySourceWithSave(getRoute, endpoint, key) {
-  const source = createOverlayVariantsSource({ endpoint: VARIANTS_ENDPOINT, getRoute });
+function overlaySourceWithSave(getRoute, endpoint, key, variantsEndpoint = VARIANTS_ENDPOINT) {
+  const source = createOverlayVariantsSource({ endpoint: variantsEndpoint, getRoute });
   if (!endpoint) return source;
   const notes = createIterationStore({ endpoint, key });
   source.saveDefaults = async (selections) => {
-    const picked = source.getAxes().filter((axis) => axis.kind === void 0 || axis.kind === "select").flatMap((axis) => {
+    const picked = source.getAxes().filter((axis) => (axis.kind === void 0 || axis.kind === "select") && !source.knobs.axes.includes(axis)).flatMap((axis) => {
       const id = selections[axis.id];
       if (!id || id === OVERLAY_DEFAULT_OPTION) return [];
       const variant = source.list?.variants.find((v) => v.id === id);
       const label = variant?.label ?? id;
-      const named = axis.label === label ? label : `${axis.label}: ${label}`;
+      const selector = axisSection(axis).fullLabel;
+      const named = selector === label || axis.label === label ? label : `${selector}: ${label}`;
       return [{ id, named, element: variant?.element ?? null }];
     });
     const moved = knobDelta(source.knobs.axes, source.knobs.values);
@@ -3168,7 +3501,7 @@ function overlaySourceWithSave(getRoute, endpoint, key) {
       parts.push(`Make the default: ${picked.map((p) => `"${p.named}" (${p.id})`).join("; ")}.`);
     }
     if (moved.length) {
-      parts.push(`Knobs: ${moved.map((m) => `${m.axis.label} ${m.shown} (${m.axis.id})`).join("; ")}.`);
+      parts.push(`Knobs: ${moved.map((m) => `${axisSection(m.axis).fullLabel} ${m.shown} (${m.axis.id})`).join("; ")}.`);
     }
     const feedback = parts.length ? `[set-defaults] ${parts.join(" ")}` : "[set-defaults] The current defaults stay on this route.";
     await notes.saveNote(
@@ -3191,10 +3524,12 @@ export {
   OVERLAY_DEFAULT_OPTION,
   OVERLAY_GROUP_ID,
   PANEL_CSS,
+  SECTION_SEPARATOR,
   VARIANTS_ENDPOINT,
   VariantsView,
   applyKnobValues,
   axisDefault,
+  axisSection,
   createOverlayVariantsSource,
   createVariantsSource,
   defaultSelections,
@@ -3214,7 +3549,9 @@ export {
   overlayAxes,
   overlayGroups,
   parseVariantParam,
+  sectionAxes,
   serializeVariantParam,
+  splitSectionLabel,
   visibleAxes
 };
 /*! Bundled license information: