isotone 1.0.1 → 1.0.3

package/dist/index.js

@@ -45,7 +45,7 @@ function showOverflowTitle(event) {
 }
 
 // src/react/IterationPanel.tsx
-import { useCallback, useEffect as useEffect3, useId as useId2, useLayoutEffect as useLayoutEffect3, useMemo as useMemo3, useRef as useRef4, useState as useState3 } from "react";
+import { useCallback, useEffect as useEffect3, useId as useId2, useLayoutEffect as useLayoutEffect4, useMemo as useMemo3, useRef as useRef4, useState as useState3 } from "react";
 
 // src/react/appearance.ts
 var darkPalette = {
@@ -788,14 +788,14 @@ ${APPEARANCE_CSS}
 .isotone-root .isotone-vars > .isotone-panel-head:has(.isotone-save) { position: relative; z-index: 1; margin-top: calc(0px - var(--iso-space)); background: linear-gradient(to bottom, transparent, var(--iso-bg) var(--iso-space)); }
 .isotone-root .isotone-vars > .isotone-panel-head:not(:has(.isotone-save)) { display: none; }
 .isotone-root .isotone-vars > .isotone-panel-head :is(h2, .isotone-icon) { display: none; }
-.isotone-root .isotone-axis-menu { top: 6px; min-height: min(260px, calc(100% - 12px)); max-height: calc(100% - 12px); }
+.isotone-root .isotone-axis-menu { top: var(--iso-menu-top, 6px); max-height: calc(100% - var(--iso-menu-top, 6px) - 6px); }
 .isotone-root .isotone-save-state { top: auto; bottom: 27px; }
 .isotone-panel-head h2 { font-size: 12px; font-weight: 600; letter-spacing: -.01em; }
 .isotone-head-actions { display: flex; align-items: center; gap: 6px; margin-right: auto; }
 .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-variants-panel:has(.isotone-axis-menu[data-open='true']) { flex-basis: min(360px, calc(100dvh - 76px)); }
+.isotone-vars { min-height: min(var(--iso-menu-need, 0px), calc(100dvh - 76px)); }
 .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. */
@@ -863,7 +863,7 @@ ${PILL_ACTIVE_CSS}
    Cancelling margin/padding keeps the first row in place at scroll start; the
    expanded height preserves the content allowance and composer position.
    The side gutters contain the corner action and keyboard focus outlines. */
-.isotone-list { display: flex; flex-direction: column; gap: 0; flex: 0 1 auto; max-height: calc(var(--iso-list-height) + 2 * var(--iso-space) - 8px); min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: calc(0px - var(--iso-space)) calc(-8px - var(--iso-note-outset)); padding: var(--iso-space) 8px; scroll-padding-block: var(--iso-space); mask-image: linear-gradient(to bottom, transparent, #000 var(--iso-space), #000 calc(100% - var(--iso-space)), transparent); }
+.isotone-list { display: flex; flex-direction: column; gap: 0; flex: 0 1 auto; max-height: calc(var(--iso-list-height) + 2 * var(--iso-space) - 8px); min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: calc(0px - var(--iso-space)) calc(-8px - var(--iso-note-outset)) calc(-2px - var(--iso-space)); padding: var(--iso-space) 8px; scroll-padding-block: var(--iso-space); mask-image: linear-gradient(to bottom, transparent, #000 var(--iso-space), #000 calc(100% - var(--iso-space)), transparent); }
 .isotone-empty { color: var(--iso-muted); font-size: 11px; line-height: 1.7; padding: 8px; }
 .isotone-note { position: relative; flex: none; }
 .isotone-request-heading { display: flex; align-items: center; gap: 8px; line-height: 14px; }
@@ -895,14 +895,13 @@ ${FEEDBACK_LAYOUT_CSS}
 .isotone-context > .isotone-chip:not(:only-child) { max-width: calc(100% - 32px); }
 .isotone-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .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: 24px; min-height: calc(24px + 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) + 2px) 2px 2px; color: var(--iso-fg); background: transparent; border: 0; border-radius: 0; font-size: 12px; line-height: 20px; box-shadow: none; cursor: text; }
+.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-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); }
 .isotone-toolbar { display: flex; flex: none; align-items: center; gap: 7px; height: 28px; }
-.isotone-key-hint { color: var(--iso-faint); font-size: 9px; }
 .isotone-pick[aria-pressed='true'] { color: var(--iso-fg); }
 .isotone-pick, .isotone-send { position: relative; width: 24px; height: 24px; }
 /* Keep a 28px hit area around the quieter composer faces. */
@@ -949,7 +948,7 @@ function ensurePanelStyles(target) {
 }
 
 // src/react/VariantsView.tsx
-import { useEffect as useEffect2, useMemo as useMemo2, useRef as useRef3, useState as useState2 } from "react";
+import { useEffect as useEffect2, 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";
@@ -1084,6 +1083,45 @@ function VariantsView({
   useEffect2(() => {
     if (!menu) setMenuOpen(false);
   }, [menu]);
+  useLayoutEffect2(() => {
+    const root = bodyRef.current?.parentElement;
+    const dialog = menuRef.current;
+    const scroll = dialog?.querySelector(".isotone-menu-scroll");
+    if (!root) return;
+    const clear = () => {
+      root.style.removeProperty("--iso-menu-need");
+      root.style.removeProperty("--iso-menu-top");
+    };
+    if (!menuOpen || !dialog || !scroll) {
+      clear();
+      return;
+    }
+    const place = () => {
+      const natural = dialog.offsetHeight + scroll.scrollHeight - scroll.clientHeight;
+      root.style.setProperty("--iso-menu-need", `${natural + 12}px`);
+      const heading = trigger.current?.isConnected ? trigger.current.getBoundingClientRect().top : 0;
+      const top = heading - root.getBoundingClientRect().top - natural - 6;
+      root.style.setProperty("--iso-menu-top", `${Number.isFinite(top) && top >= 6 ? top : 6}px`);
+    };
+    place();
+    window.addEventListener("resize", place);
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(place);
+    observer?.observe(scroll);
+    return () => {
+      window.removeEventListener("resize", place);
+      observer?.disconnect();
+      clear();
+    };
+  }, [menuOpen, menu, menuOptions.length, error]);
+  useEffect2(() => {
+    if (!menuOpen) return;
+    const onPointerDown = (e) => {
+      const dialog = menuRef.current;
+      if (dialog && !e.composedPath().includes(dialog)) closeMenu();
+    };
+    window.addEventListener("pointerdown", onPointerDown, true);
+    return () => window.removeEventListener("pointerdown", onPointerDown, true);
+  }, [menuOpen]);
   useEffect2(() => {
     if (menuOpen)
       menuRef.current?.querySelector("button")?.focus();
@@ -1145,7 +1183,7 @@ 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 variant selectors on this page." }),
+      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(
@@ -1598,9 +1636,9 @@ function NoteSummary({ note }) {
 }
 
 // src/react/useDockMotion.ts
-import { useLayoutEffect as useLayoutEffect2 } from "react";
+import { useLayoutEffect as useLayoutEffect3 } from "react";
 function useDockMotion(ref, visible) {
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     const root = ref.current;
     if (!root || !visible) return;
     const previous = /* @__PURE__ */ new Map();
@@ -1734,7 +1772,6 @@ function IterationPanel({
   const pendingWrites = useRef4(0);
   const noteRequest = useRef4(0);
   const [editing, setEditing] = useState3(null);
-  const [unsynced, setUnsynced] = useState3(false);
   const [notice, setNotice] = useState3("");
   const [theme, setTheme] = useState3(() => detectTheme(themePreference));
   const [instant, setInstant] = useState3(false);
@@ -1755,13 +1792,13 @@ function IterationPanel({
     variants && visibleAxes(variants.getAxes(), variants.getSelections()).length
   );
   const visible = isRouteVisible(route, rule) && (notesAvailable || variantsAvailable || variantsOpen);
-  const hasContext = Boolean(editing || variantTarget || targets.length || notice || unsynced);
-  useLayoutEffect3(() => {
+  const hasContext = Boolean(editing || variantTarget || targets.length || notice);
+  useLayoutEffect4(() => {
     const field = textareaRef.current;
     if (!field || !notesOpen || !visible) return;
     const resize = () => {
       field.style.height = "0px";
-      field.style.height = `${text ? Math.max(24, field.scrollHeight) : 24}px`;
+      field.style.height = `${text ? Math.max(22, field.scrollHeight) : 22}px`;
       field.dataset.scrolled = String(field.scrollTop > 0);
     };
     resize();
@@ -1827,7 +1864,6 @@ function IterationPanel({
     void store.listNotes().then((fresh) => {
       if (request !== noteRequest.current || revision !== noteRevision.current || pendingWrites.current) return;
       setNotes(fresh);
-      setUnsynced(store.hasUnsyncedNotes);
     }).catch(() => {
     });
   }
@@ -1839,6 +1875,15 @@ function IterationPanel({
       pendingWrites.current--;
     };
   }
+  const keepPicking = useRef4(false);
+  const focusWhilePicking = useCallback(() => {
+    cancelAnimationFrame(focusFrame.current);
+    focusFrame.current = requestAnimationFrame(() => {
+      keepPicking.current = true;
+      textareaRef.current?.focus();
+      keepPicking.current = false;
+    });
+  }, []);
   const focusComposer = useCallback(() => {
     cancelAnimationFrame(focusFrame.current);
     focusFrame.current = requestAnimationFrame(
@@ -1894,7 +1939,6 @@ function IterationPanel({
         createdAt: (/* @__PURE__ */ new Date()).toISOString(),
         ...context
       }]);
-      setUnsynced(store.hasUnsyncedNotes);
       setNotesOpen(true);
     } finally {
       finish();
@@ -1949,7 +1993,6 @@ function IterationPanel({
       setNotes(
         (prev) => prev.map((n) => n.id === tempId ? { ...n, id: savedId } : n)
       );
-      setUnsynced(store.hasUnsyncedNotes);
     } catch {
       setNotes(
         (prev) => previous ? prev.map((n) => n.id === tempId ? previous : n) : prev.filter((n) => n.id !== tempId)
@@ -2038,7 +2081,7 @@ function IterationPanel({
     const el = listRef.current;
     if (el) el.scrollTop = el.scrollHeight;
   }, [notes, notesOpen]);
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     if (!visible) return;
     const root = rootRef.current?.getRootNode();
     if (root instanceof ShadowRoot || root instanceof Document)
@@ -2098,8 +2141,9 @@ function IterationPanel({
     };
     const onMove = (e) => {
       cancelAnimationFrame(frame);
+      const deferred = e.shiftKey;
       frame = requestAnimationFrame(() => {
-        const el = elementAt(e);
+        const el = deferred ? null : elementAt(e);
         setHoverRect(el ? el.getBoundingClientRect() : null);
       });
     };
@@ -2110,11 +2154,13 @@ function IterationPanel({
       );
     };
     const onClick = (e) => {
+      if (e.shiftKey) return;
       const el = elementAt(e);
       if (!el) return;
       e.preventDefault();
       e.stopImmediatePropagation();
       toggleTarget(el);
+      focusWhilePicking();
     };
     const onKey = (e) => {
       if (e.key === " ") {
@@ -2145,7 +2191,17 @@ function IterationPanel({
       window.removeEventListener("click", onClick, true);
       window.removeEventListener("keydown", onKey, true);
     };
-  }, [picking, focusComposer]);
+  }, [picking, focusComposer, focusWhilePicking]);
+  useEffect3(() => {
+    const shadow = rootRef.current?.getRootNode();
+    if (!(shadow instanceof ShadowRoot)) return;
+    const stop = (e) => e.stopPropagation();
+    const types = ["pointerdown", "pointerup", "mousedown", "mouseup", "touchstart", "touchend", "click"];
+    for (const type of types) shadow.addEventListener(type, stop);
+    return () => {
+      for (const type of types) shadow.removeEventListener(type, stop);
+    };
+  }, []);
   useEffect3(() => {
     if (!picking) {
       setRects([]);
@@ -2347,7 +2403,7 @@ function IterationPanel({
                   },
                   target.selector
                 )),
-                (notice || unsynced) && /* @__PURE__ */ jsx5("p", { role: "status", className: "isotone-notice", children: notice || "Saved in this browser. It will sync when the dev server returns." })
+                notice && /* @__PURE__ */ jsx5("p", { role: "status", className: "isotone-notice", children: notice })
               ] }),
               /* @__PURE__ */ jsx5(
                 "textarea",
@@ -2356,7 +2412,10 @@ function IterationPanel({
                   value: text,
                   "aria-label": "Feedback for the agent",
                   onChange: (e) => setText(e.target.value),
-                  onFocus: () => setPicking(false),
+                  onFocus: () => {
+                    if (!keepPicking.current) setPicking(false);
+                  },
+                  onPointerDown: () => setPicking(false),
                   onScroll: (event) => {
                     event.currentTarget.dataset.scrolled = String(event.currentTarget.scrollTop > 0);
                   },
@@ -2380,6 +2439,7 @@ function IterationPanel({
                     "aria-label": "Select elements",
                     "aria-pressed": picking,
                     className: "isotone-pick isotone-icon",
+                    onMouseDown: (e) => e.preventDefault(),
                     onClick: () => {
                       cancelAnimationFrame(focusFrame.current);
                       setPicking((v) => !v);
@@ -2387,7 +2447,6 @@ function IterationPanel({
                     children: /* @__PURE__ */ jsx5(Icon2, { name: "pin", size: 14 })
                   }
                 ),
-                picking && /* @__PURE__ */ jsx5("span", { className: "isotone-key-hint", children: "Click or Space to pin \xB7 Enter to finish" }),
                 /* @__PURE__ */ jsx5(
                   "button",
                   {
@@ -2425,7 +2484,7 @@ function IterationPanel({
         picking && /* @__PURE__ */ jsxs4("div", { className: "isotone-hint", "data-isotone": true, children: [
           /* @__PURE__ */ jsxs4("span", { children: [
             targets.length,
-            " selected \xB7 click to add or remove"
+            " selected \xB7 click to add or remove \xB7 hold \u21E7 to use the page"
           ] }),
           /* @__PURE__ */ jsxs4(
             "button",