isotone 1.1.0 → 1.1.2

package/dist/index.js

@@ -754,7 +754,7 @@ ${APPEARANCE_CSS}
 /* Panels move independently; their content and corners retain their natural size. */
 .isotone-root[data-open='true'] { width: var(--iso-dock-width); }
 .isotone-root { pointer-events: none; }
-.isotone-root :is(.isotone-panel, .isotone-rail-button, .isotone-fab, .isotone-hint) { pointer-events: auto; }
+.isotone-root :is(.isotone-panel, .isotone-rail-button, .isotone-fab, .isotone-float) { pointer-events: auto; }
 /* The horizontal pill stays anchored while its panels open above it. */
 .isotone-rail, .isotone-rail-tools { display: contents; border: 0; margin: 0; padding: 0; min-width: 0; }
 .isotone-root[data-expanded='true'] { min-height: 44px; }
@@ -840,7 +840,7 @@ ${APPEARANCE_CSS}
 .isotone-picker input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
 .isotone-picker:has(input:focus-visible) { outline: 2px solid var(--iso-focus); outline-offset: 3px; }
 /* Raised actions share one face, edge and hover treatment. */
-.isotone-save, .isotone-secondary, .isotone-send, .isotone-hint button { border-radius: var(--iso-control-radius); color: var(--iso-fg); background: var(--iso-control-face); box-shadow: var(--iso-control-shadow); }
+.isotone-save, .isotone-secondary, .isotone-send, .isotone-picking button, .isotone-away-action { border-radius: var(--iso-control-radius); color: var(--iso-fg); background: var(--iso-control-face); box-shadow: var(--iso-control-shadow); }
 /* Persistent selections share the raised action material, never the recessed
    field/slot material. Keep the face and shadow together in this one rule. */
 .isotone-note-editing .isotone-note-hit,
@@ -915,7 +915,7 @@ ${FEEDBACK_LAYOUT_CSS}
 .isotone-chip button { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 3px; background: transparent; box-shadow: none; }
 .isotone-root .isotone-textarea { --iso-textarea-inset: 8px; display: block; width: 100%; flex: none; height: 22px; min-height: calc(22px + var(--iso-textarea-inset)); max-height: calc(120px + var(--iso-textarea-inset)); overflow-y: auto; resize: none; margin-top: calc(0px - var(--iso-textarea-inset)); padding: calc(var(--iso-textarea-inset) + 1px) 1px 1px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--iso-fg) 14%, transparent) transparent; color: var(--iso-fg); background: transparent; border: 0; border-radius: 0; font-size: 12px; line-height: 20px; box-shadow: none; cursor: text; }
 /* Text scrolls through the gap below tags, or the field inset without tags. */
-.isotone-root .isotone-context:empty + .isotone-textarea { --iso-textarea-inset: var(--iso-input-padding); }
+.isotone-root .isotone-context:empty + .isotone-entry .isotone-textarea { --iso-textarea-inset: var(--iso-input-padding); }
 .isotone-textarea::placeholder { color: var(--iso-faint); }
 .isotone-root .isotone-textarea:focus-visible { outline: none; }
 .isotone-textarea[data-scrolled='true'] { mask-image: linear-gradient(to bottom, transparent, #000 8px); }
@@ -926,11 +926,28 @@ ${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; 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-entry { position: relative; display: flex; flex-direction: column; gap: 8px; }
+/* Select mode covers the field and says how to finish, next to the elements the user is picking. */
+.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; }
+.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); }
+/* 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; }
+.isotone-root .isotone-float.isotone-exit { pointer-events: none; }
+.isotone-away-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.isotone-away-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.isotone-away-text > span { font-size: 12px; line-height: 16px; }
+.isotone-away-text > small { font-size: 10px; line-height: 14px; color: var(--iso-muted); }
+.isotone-away-action { flex: none; display: flex; align-items: center; height: 28px; padding: 0 9px; font-size: 11px; }
 .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) {
@@ -940,7 +957,7 @@ ${FEEDBACK_LAYOUT_CSS}
   .isotone-seg:not(:disabled):hover { color: var(--iso-fg); }
   .isotone-seg[aria-pressed='false']:not(:disabled):hover { box-shadow: var(--iso-hover-shadow); }
   .isotone-thumb[aria-pressed='false']:not(:disabled):hover { box-shadow: var(--iso-thumb-hover-shadow); }
-  .isotone-root :where(.isotone-save, .isotone-secondary, .isotone-send, .isotone-hint button):not(:disabled):hover { background: var(--iso-control-hover-face); box-shadow: var(--iso-control-hover-shadow); }
+  .isotone-root :where(.isotone-save, .isotone-secondary, .isotone-send, .isotone-picking button):not(:disabled):hover, .isotone-away:hover .isotone-away-action { background: var(--iso-control-hover-face); box-shadow: var(--iso-control-hover-shadow); }
   .isotone-chip button:hover { color: var(--iso-fg); background: var(--iso-hover); }
   .isotone-x:hover { color: var(--iso-fg); }
   .isotone-x:hover::before { background: var(--iso-control-hover-face); }
@@ -1788,6 +1805,8 @@ function useDockMotion(ref, visible) {
 // src/react/IterationPanel.tsx
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var PULSE_MS = 2e3;
+var FLOAT_GAP = 12;
+var FLOAT_MARGIN = 8;
 function syncPulse(spread) {
   return (node) => {
     if (!node || typeof node.animate !== "function") return;
@@ -1801,6 +1820,19 @@ function syncPulse(spread) {
     pulse.startTime = 0;
   };
 }
+function stillMotion(node) {
+  return Boolean(node.closest('[data-instant="true"]')) || typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function fadeIn(node) {
+  if (!node || typeof node.animate !== "function" || node.dataset.still === "true" || stillMotion(node)) return;
+  node.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 140, easing: "ease-out" });
+}
+function fadeInContent(node) {
+  if (!node || stillMotion(node)) return;
+  for (const child of node.children)
+    if (typeof child.animate === "function")
+      child.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 140, easing: "ease-out" });
+}
 var dotPulse = syncPulse(6);
 var ringPulse = syncPulse(8);
 var POLL_MS = 2500;
@@ -1838,13 +1870,22 @@ function IterationPanel({
   const [hovered, setHovered] = useState3(false);
   const [focused, setFocused] = useState3(false);
   const [picking, setPicking] = useState3(false);
+  const [pickingWithPanel, setPickingWithPanel] = useState3(false);
   const [targets, setTargets] = useState3([]);
+  const targetsRef = useRef4(targets);
+  targetsRef.current = targets;
+  const [anchor, setAnchor] = useState3(null);
+  const anchorRef = useRef4(anchor);
+  anchorRef.current = anchor;
+  const floating = anchor !== null;
+  const floatRef = useRef4(null);
+  const slotHeight = useRef4(0);
+  const lastFloat = useRef4(null);
+  const floatNode = useRef4(null);
   const [variantTarget, setVariantTarget] = useState3(
     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([]);
@@ -1895,7 +1936,7 @@ function IterationPanel({
     });
     observer.observe(field);
     return () => observer.disconnect();
-  }, [text, notesOpen, visible, hasContext]);
+  }, [text, notesOpen, visible, hasContext, floating]);
   useEffect3(() => {
     if (!visible) {
       setHovered(false);
@@ -1982,7 +2023,7 @@ function IterationPanel({
     cancelAnimationFrame(focusFrame.current);
     focusFrame.current = requestAnimationFrame(() => {
       keepPicking.current = true;
-      textareaRef.current?.focus();
+      textareaRef.current?.focus({ preventScroll: true });
       keepPicking.current = false;
     });
   }, []);
@@ -1997,21 +2038,33 @@ function IterationPanel({
     setNotesOpen(false);
     setVariantsOpen(false);
     setPicking(false);
+    setAnchor(null);
     setExpanded(false);
     setHovered(false);
     (previousFocus.current?.isConnected ? previousFocus.current : fabRef.current)?.focus();
   }
-  function openInitial() {
+  function startFeedback(select) {
+    setNotesOpen(true);
+    if (select) {
+      cancelAnimationFrame(focusFrame.current);
+      setPickingWithPanel(!notesOpen);
+      setPicking(true);
+    } else focusComposer();
+  }
+  function openInitial(select) {
     previousFocus.current = document.activeElement;
     setExpanded(true);
     if ((defaultTab === "variants" || !notesAvailable) && variantsAvailable)
       setVariantsOpen(true);
-    else {
-      setNotesOpen(true);
-      focusComposer();
-    }
+    else startFeedback(select);
+  }
+  function dockComposer() {
+    setAnchor(null);
+    setPicking(false);
+    focusComposer();
   }
   function feedback(reference) {
+    setAnchor(null);
     setVariantTarget(reference);
     setNotesOpen(true);
     setExpanded(true);
@@ -2082,6 +2135,7 @@ function IterationPanel({
     cancelEdit();
     setNotice("");
     setPicking(false);
+    setAnchor(null);
     focusComposer();
     try {
       const savedId = await store.saveNote(
@@ -2110,6 +2164,7 @@ function IterationPanel({
     }
   }
   function beginEdit(note) {
+    setAnchor(null);
     setEditing(note);
     setText(note.feedback);
     setTargets(note.elements ?? (note.element ? [note.element] : []));
@@ -2191,6 +2246,7 @@ function IterationPanel({
     if (draftRestored.current === draftKey) return;
     draftRestored.current = draftKey;
     restoringDraft.current = true;
+    setAnchor(null);
     setEditing(null);
     setText("");
     setTargets([]);
@@ -2250,16 +2306,16 @@ function IterationPanel({
         return;
       e.preventDefault();
       e.stopImmediatePropagation();
-      if (notesOpen && textareaRef.current === rootRef.current?.getRootNode()?.activeElement)
-        closeAll();
-      else if (notesAvailable) {
+      if (!notesAvailable) setVariantsOpen((v) => !v);
+      else if (picking) {
+        setPicking(false);
+        focusComposer();
+      } else {
         if (!open)
           previousFocus.current = document.activeElement;
-        setNotesOpen(true);
         setExpanded(true);
-        setPicking(false);
-        focusComposer();
-      } else setVariantsOpen((v) => !v);
+        startFeedback(true);
+      }
     };
     const onPointer = () => {
       rootRef.current?.setAttribute("data-instant", "false");
@@ -2276,7 +2332,8 @@ function IterationPanel({
     if (!open || picking) return;
     const onKey = (e) => {
       if (e.key !== "Escape" || e.defaultPrevented) return;
-      if (editing) cancelEdit();
+      if (anchor) dockComposer();
+      else if (editing) cancelEdit();
       else closeAll();
     };
     window.addEventListener("keydown", onKey);
@@ -2295,20 +2352,17 @@ 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);
       });
     };
     const toggleTarget = (el) => {
       const target = describeIterationElement(elementAsNode(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
       );
+      return added ? target : null;
     };
     const onClick = (e) => {
       if (e.shiftKey) return;
@@ -2316,8 +2370,18 @@ function IterationPanel({
       if (!el) return;
       e.preventDefault();
       e.stopImmediatePropagation();
-      toggleTarget(el);
-      focusWhilePicking();
+      const added = toggleTarget(el);
+      if (added) {
+        const r = el.getBoundingClientRect();
+        const pointed = e.detail > 0 || e.clientX !== 0 || e.clientY !== 0;
+        const x = pointed ? e.clientX : r.left;
+        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 });
+        setNotesOpen(true);
+        focusWhilePicking();
+      }
     };
     const onKey = (e) => {
       if (e.key === " ") {
@@ -2328,11 +2392,25 @@ function IterationPanel({
         if (!e.repeat) toggleTarget(el);
         return;
       }
+      const typing = e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey && !e.isComposing;
+      if (typing) {
+        const el = e.composedPath().find((node) => node instanceof Element);
+        if (el && !el.closest("[data-isotone]") && el.closest("input, textarea, select, [contenteditable]")) return;
+        setPicking(false);
+        setNotesOpen(true);
+        textareaRef.current?.focus();
+        return;
+      }
       if (e.key !== "Escape" && e.key !== "Enter") return;
-      if (e.key === "Enter" && e.composedPath().includes(textareaRef.current) && (e.shiftKey || e.isComposing || textareaRef.current?.value.trim()))
+      const field = textareaRef.current;
+      if (e.key === "Enter" && anchorRef.current && field && !e.shiftKey && field.value.trim() && e.composedPath().includes(field))
         return;
       e.preventDefault();
       e.stopImmediatePropagation();
+      if (e.key === "Escape") {
+        setTargets([]);
+        setAnchor(null);
+      }
       setPicking(false);
       setNotesOpen(true);
       focusComposer();
@@ -2344,7 +2422,6 @@ 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);
@@ -2361,7 +2438,113 @@ function IterationPanel({
     };
   }, []);
   useEffect3(() => {
-    if (!picking) {
+    if (!notesOpen) setAnchor(null);
+  }, [notesOpen]);
+  useLayoutEffect4(() => {
+    const float = floatRef.current;
+    if (!anchor || !float) {
+      lastFloat.current = null;
+      return;
+    }
+    floatNode.current = float;
+    const from = lastFloat.current;
+    let frame;
+    let side = null;
+    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 vw = document.documentElement.clientWidth || innerWidth;
+      const vh = innerHeight;
+      const w = float.offsetWidth;
+      const h = float.offsetHeight;
+      let left = x + FLOAT_GAP;
+      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;
+      if (side === null || (side === "below" ? !fitsBelow && fitsAbove : !fitsAbove && fitsBelow))
+        side = fitsBelow || !fitsAbove ? "below" : "above";
+      float.style.left = `${left}px`;
+      if (side === "below") {
+        const top = Math.max(FLOAT_MARGIN, Math.min(y + FLOAT_GAP, vh - h - FLOAT_MARGIN));
+        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));
+        float.style.bottom = `${bottom}px`;
+        float.style.top = "auto";
+        float.style.transformOrigin = `${x - left}px ${y - (vh - bottom - h)}px`;
+      }
+      lastFloat.current = { left, top: side === "below" ? Number.parseFloat(float.style.top) : vh - Number.parseFloat(float.style.bottom) - h };
+    };
+    const schedule = () => {
+      frame ??= requestAnimationFrame(place);
+    };
+    place();
+    const to = lastFloat.current;
+    const still = stillMotion(float) || typeof float.animate !== "function";
+    let glide;
+    if (still) {
+    } else if (!from)
+      glide = float.animate(
+        [{ opacity: 0, transform: "scale(.96)" }, { opacity: 1, transform: "none" }],
+        { duration: MOTION.enter, easing: MOTION.easeOut }
+      );
+    else if (to && (from.left !== to.left || from.top !== to.top))
+      glide = float.animate(
+        [{ translate: `${from.left - to.left}px ${from.top - to.top}px` }, { translate: "0 0" }],
+        { duration: MOTION.enter, easing: MOTION.easeOut }
+      );
+    const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(schedule) : void 0;
+    observer?.observe(float);
+    window.addEventListener("scroll", schedule, { capture: true, passive: true });
+    window.addEventListener("resize", schedule);
+    return () => {
+      if (frame !== void 0) cancelAnimationFrame(frame);
+      glide?.cancel();
+      observer?.disconnect();
+      window.removeEventListener("scroll", schedule, true);
+      window.removeEventListener("resize", schedule);
+    };
+  }, [anchor]);
+  useLayoutEffect4(() => {
+    const last = floatNode.current;
+    const root = rootRef.current;
+    if (floating || !last || !root) return;
+    floatNode.current = null;
+    if (typeof last.animate !== "function" || stillMotion(root)) return;
+    const ghost = last.cloneNode(true);
+    const field = last.querySelector("textarea");
+    const copy = ghost.querySelector("textarea");
+    if (field && copy) copy.value = field.value;
+    ghost.classList.add("isotone-exit");
+    ghost.inert = true;
+    ghost.setAttribute("aria-hidden", "true");
+    ghost.removeAttribute("role");
+    root.appendChild(ghost);
+    const fade = ghost.animate([{ opacity: 1 }, { opacity: 0, transform: "scale(.98)" }], {
+      duration: MOTION.exit,
+      easing: MOTION.easeOut,
+      fill: "forwards"
+    });
+    fade.onfinish = () => ghost.remove();
+    return () => {
+      fade.cancel();
+      ghost.remove();
+    };
+  }, [floating]);
+  useEffect3(() => {
+    if (!picking && !floating) {
       setRects([]);
       return;
     }
@@ -2400,7 +2583,7 @@ function IterationPanel({
       window.removeEventListener("scroll", schedule, true);
       window.removeEventListener("resize", schedule);
     };
-  }, [targets, picking]);
+  }, [targets, picking, floating]);
   const variantsPanel = variants && /* @__PURE__ */ jsxs4(
     "section",
     {
@@ -2436,6 +2619,162 @@ function IterationPanel({
       ]
     }
   );
+  const anchored = targets.find((t) => t.selector === anchor?.selector) ?? targets[0];
+  const awayLabel = anchored ? `Next to ${anchored.text || anchored.tag}${targets.length > 1 ? ` and ${targets.length - 1} more` : ""}` : "Next to where you clicked";
+  const composer = (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: This extends the native textarea's pointer area; keyboard users focus the textarea directly.
+    /* @__PURE__ */ jsxs4(
+      "fieldset",
+      {
+        className: "isotone-input",
+        "aria-label": "Feedback composer",
+        onClick: (event) => {
+          if (event.defaultPrevented || event.button !== 0) return;
+          const target = event.target;
+          if (target.closest('button, textarea, input, select, a, [contenteditable="true"]')) return;
+          textareaRef.current?.focus({ preventScroll: true });
+        },
+        children: [
+          /* @__PURE__ */ jsxs4("div", { className: "isotone-context", "aria-live": "polite", children: [
+            editing && /* @__PURE__ */ jsxs4("span", { className: "isotone-chip", children: [
+              "Editing note",
+              /* @__PURE__ */ jsx5(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Cancel edit",
+                  title: "Cancel edit",
+                  onClick: cancelEdit,
+                  children: /* @__PURE__ */ jsx5(Icon2, { name: "close", size: 12 })
+                }
+              )
+            ] }),
+            variantTarget && /* @__PURE__ */ jsxs4("span", { className: "isotone-chip", children: [
+              /* @__PURE__ */ jsx5(Icon2, { name: "sliders", size: 12 }),
+              /* @__PURE__ */ jsxs4("span", { onPointerOver: showOverflowTitle, children: [
+                variantTarget.label,
+                variantTarget.optionLabel ? ` / ${variantTarget.optionLabel}` : ""
+              ] }),
+              !editing?.variantAction && /* @__PURE__ */ jsx5(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Remove variant reference",
+                  title: "Remove reference",
+                  onClick: () => setVariantTarget(null),
+                  children: /* @__PURE__ */ jsx5(Icon2, { name: "close", size: 12 })
+                }
+              )
+            ] }),
+            targets.map((target, index) => /* @__PURE__ */ jsxs4(
+              "span",
+              {
+                className: "isotone-chip",
+                children: [
+                  /* @__PURE__ */ jsx5("span", { onPointerOver: showOverflowTitle, children: target.text || target.tag }),
+                  /* @__PURE__ */ jsx5(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": `Remove pinned element ${index + 1}`,
+                      title: "Unpin element",
+                      onClick: () => setTargets(
+                        (prev) => prev.filter((t) => t.selector !== target.selector)
+                      ),
+                      children: /* @__PURE__ */ jsx5(Icon2, { name: "close", size: 12 })
+                    }
+                  )
+                ]
+              },
+              target.selector
+            )),
+            notice && /* @__PURE__ */ jsx5("p", { role: "status", className: "isotone-notice", children: notice })
+          ] }),
+          /* @__PURE__ */ jsxs4("div", { className: "isotone-entry", children: [
+            /* @__PURE__ */ jsx5(
+              "textarea",
+              {
+                ref: textareaRef,
+                value: text,
+                "aria-label": "Feedback for the agent",
+                onChange: (e) => setText(e.target.value),
+                onFocus: () => {
+                  if (!keepPicking.current) setPicking(false);
+                },
+                onPointerDown: () => setPicking(false),
+                onScroll: (event) => {
+                  event.currentTarget.dataset.scrolled = String(event.currentTarget.scrollTop > 0);
+                },
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+                    e.preventDefault();
+                    void send();
+                  }
+                },
+                placeholder: targets.length || variantTarget ? "Feedback on your selection\u2026" : "What would you change?",
+                rows: 1,
+                className: "isotone-textarea"
+              }
+            ),
+            /* @__PURE__ */ jsxs4("div", { className: "isotone-toolbar", children: [
+              /* @__PURE__ */ jsx5(
+                "button",
+                {
+                  type: "button",
+                  title: `Select elements${shortcutLabel ? ` \xB7 ${shortcutLabel}` : ""}`,
+                  "aria-label": "Select elements",
+                  "aria-pressed": picking,
+                  className: "isotone-pick isotone-icon",
+                  onMouseDown: (e) => e.preventDefault(),
+                  onClick: () => {
+                    cancelAnimationFrame(focusFrame.current);
+                    setPickingWithPanel(false);
+                    setPicking((v) => !v);
+                  },
+                  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" }),
+              /* @__PURE__ */ jsx5(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": editing ? "Save edit" : "Send note",
+                  disabled: !text.trim(),
+                  className: "isotone-send",
+                  title: editing ? "Save edit (Enter)" : "Send note (Enter)",
+                  onClick: () => void send(),
+                  children: /* @__PURE__ */ jsx5(Icon2, { name: "send", size: 14 })
+                }
+              )
+            ] }),
+            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__ */ jsxs4(
+                "button",
+                {
+                  type: "button",
+                  onMouseDown: (e) => e.preventDefault(),
+                  onClick: () => {
+                    setPicking(false);
+                    focusComposer();
+                  },
+                  children: [
+                    "Done ",
+                    /* @__PURE__ */ jsx5("kbd", { children: "\u21B5" })
+                  ]
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    )
+  );
   const notesPanel = notesAvailable && /* @__PURE__ */ jsxs4(
     "section",
     {
@@ -2531,131 +2870,26 @@ function IterationPanel({
           },
           note.id
         )) }),
-        /* @__PURE__ */ jsx5("div", { className: "isotone-compose", children: /* @__PURE__ */ jsxs4(
-          "fieldset",
+        /* @__PURE__ */ jsx5("div", { className: "isotone-compose", children: floating ? /* @__PURE__ */ jsxs4(
+          "button",
           {
-            className: "isotone-input",
-            "aria-label": "Feedback composer",
-            onClick: (event) => {
-              if (event.defaultPrevented || event.button !== 0) return;
-              const target = event.target;
-              if (target.closest('button, textarea, input, select, a, [contenteditable="true"]')) return;
-              textareaRef.current?.focus({ preventScroll: true });
-            },
+            type: "button",
+            ref: fadeInContent,
+            className: "isotone-away",
+            title: "Write here instead",
+            style: { minHeight: slotHeight.current || void 0 },
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: dockComposer,
             children: [
-              /* @__PURE__ */ jsxs4("div", { className: "isotone-context", "aria-live": "polite", children: [
-                editing && /* @__PURE__ */ jsxs4("span", { className: "isotone-chip", children: [
-                  "Editing note",
-                  /* @__PURE__ */ jsx5(
-                    "button",
-                    {
-                      type: "button",
-                      "aria-label": "Cancel edit",
-                      title: "Cancel edit",
-                      onClick: cancelEdit,
-                      children: /* @__PURE__ */ jsx5(Icon2, { name: "close", size: 12 })
-                    }
-                  )
-                ] }),
-                variantTarget && /* @__PURE__ */ jsxs4("span", { className: "isotone-chip", children: [
-                  /* @__PURE__ */ jsx5(Icon2, { name: "sliders", size: 12 }),
-                  /* @__PURE__ */ jsxs4("span", { onPointerOver: showOverflowTitle, children: [
-                    variantTarget.label,
-                    variantTarget.optionLabel ? ` / ${variantTarget.optionLabel}` : ""
-                  ] }),
-                  !editing?.variantAction && /* @__PURE__ */ jsx5(
-                    "button",
-                    {
-                      type: "button",
-                      "aria-label": "Remove variant reference",
-                      title: "Remove reference",
-                      onClick: () => setVariantTarget(null),
-                      children: /* @__PURE__ */ jsx5(Icon2, { name: "close", size: 12 })
-                    }
-                  )
-                ] }),
-                targets.map((target, index) => /* @__PURE__ */ jsxs4(
-                  "span",
-                  {
-                    className: "isotone-chip",
-                    children: [
-                      /* @__PURE__ */ jsx5("span", { onPointerOver: showOverflowTitle, children: target.text || target.tag }),
-                      /* @__PURE__ */ jsx5(
-                        "button",
-                        {
-                          type: "button",
-                          "aria-label": `Remove pinned element ${index + 1}`,
-                          title: "Unpin element",
-                          onClick: () => setTargets(
-                            (prev) => prev.filter((t) => t.selector !== target.selector)
-                          ),
-                          children: /* @__PURE__ */ jsx5(Icon2, { name: "close", size: 12 })
-                        }
-                      )
-                    ]
-                  },
-                  target.selector
-                )),
-                notice && /* @__PURE__ */ jsx5("p", { role: "status", className: "isotone-notice", children: notice })
+              /* @__PURE__ */ jsx5(Icon2, { name: "pin", size: 14 }),
+              /* @__PURE__ */ jsxs4("span", { className: "isotone-away-text", children: [
+                /* @__PURE__ */ jsx5("span", { children: "Writing on the page" }),
+                /* @__PURE__ */ jsx5("small", { children: awayLabel })
               ] }),
-              /* @__PURE__ */ jsx5(
-                "textarea",
-                {
-                  ref: textareaRef,
-                  value: text,
-                  "aria-label": "Feedback for the agent",
-                  onChange: (e) => setText(e.target.value),
-                  onFocus: () => {
-                    if (!keepPicking.current) setPicking(false);
-                  },
-                  onPointerDown: () => setPicking(false),
-                  onScroll: (event) => {
-                    event.currentTarget.dataset.scrolled = String(event.currentTarget.scrollTop > 0);
-                  },
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
-                      e.preventDefault();
-                      void send();
-                    }
-                  },
-                  placeholder: targets.length || variantTarget ? "Feedback on your selection\u2026" : "What would you change?",
-                  rows: 1,
-                  className: "isotone-textarea"
-                }
-              ),
-              /* @__PURE__ */ jsxs4("div", { className: "isotone-toolbar", children: [
-                /* @__PURE__ */ jsx5(
-                  "button",
-                  {
-                    type: "button",
-                    title: "Select elements",
-                    "aria-label": "Select elements",
-                    "aria-pressed": picking,
-                    className: "isotone-pick isotone-icon",
-                    onMouseDown: (e) => e.preventDefault(),
-                    onClick: () => {
-                      cancelAnimationFrame(focusFrame.current);
-                      setPicking((v) => !v);
-                    },
-                    children: /* @__PURE__ */ jsx5(Icon2, { name: "pin", size: 14 })
-                  }
-                ),
-                /* @__PURE__ */ jsx5(
-                  "button",
-                  {
-                    type: "button",
-                    "aria-label": editing ? "Save edit" : "Send note",
-                    disabled: !text.trim(),
-                    className: "isotone-send",
-                    title: editing ? "Save edit (Enter)" : "Send note (Enter)",
-                    onClick: () => void send(),
-                    children: /* @__PURE__ */ jsx5(Icon2, { name: "send", size: 14 })
-                  }
-                )
-              ] })
+              /* @__PURE__ */ jsx5("span", { className: "isotone-away-action", children: "Move here" })
             ]
           }
-        ) })
+        ) : composer })
       ]
     }
   );
@@ -2675,27 +2909,7 @@ function IterationPanel({
       className: "isotone-root",
       children: [
         /* @__PURE__ */ jsx5("div", { className: "isotone-rail-track", "aria-hidden": "true" }),
-        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"
-          ] }),
-          /* @__PURE__ */ jsxs4(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                setPicking(false);
-                focusComposer();
-              },
-              children: [
-                "Done ",
-                /* @__PURE__ */ jsx5("kbd", { children: "\u21B5" })
-              ]
-            }
-          )
-        ] }),
-        picking && [
+        (picking || floating) && [
           ...rects,
           ...hoverRect ? [
             {
@@ -2720,6 +2934,16 @@ function IterationPanel({
           },
           rect.selector
         )),
+        floating && notesOpen && /* @__PURE__ */ jsx5(
+          "div",
+          {
+            ref: floatRef,
+            className: "isotone-float",
+            role: "dialog",
+            "aria-label": "Feedback on the selection",
+            children: composer
+          }
+        ),
         /* @__PURE__ */ jsx5(UpdateNotice, { endpoint: updateEndpoint, active: open }),
         /* @__PURE__ */ jsxs4(
           "fieldset",
@@ -2781,10 +3005,12 @@ function IterationPanel({
                         title: "Feedback",
                         "aria-controls": `${id}-notes`,
                         "aria-expanded": notesOpen,
-                        onClick: () => {
-                          setNotesOpen((v) => !v);
+                        onClick: (event) => {
                           setExpanded(false);
-                          if (!notesOpen) focusComposer();
+                          if (notesOpen) {
+                            setNotesOpen(false);
+                            setPicking(false);
+                          } else startFeedback(event.detail > 0);
                         },
                         children: [
                           /* @__PURE__ */ jsx5(Icon2, { name: "message" }),
@@ -2809,10 +3035,10 @@ function IterationPanel({
                   "aria-label": notesAvailable ? "Isotone" : "Variants",
                   title: `Isotone${working.size ? ` \xB7 ${working.size} in progress` : ""}${shortcutLabel ? ` \xB7 ${shortcutLabel}` : ""}`,
                   "aria-expanded": railOpen,
-                  onClick: () => {
+                  onClick: (event) => {
                     if (open) closeAll();
                     else if (expanded) setExpanded(false);
-                    else openInitial();
+                    else openInitial(event.detail > 0);
                   },
                   children: [
                     working.size > 0 && /* @__PURE__ */ jsx5("span", { className: "isotone-ring", ref: ringPulse }),