@sanmid/flux 0.1.4 → 0.1.5

package/README.md

@@ -14,7 +14,7 @@ npm install @sanmid/flux -D
 
 Or: `pnpm add -D @sanmid/flux` · `yarn add -D @sanmid/flux`
 
-Icons, `clsx`, `tailwind-merge`, and `framer-motion` are **dependencies of Flux** — you do not install them separately. You only need **`react` and `react-dom` (18+)** in your app (Flux lists them as peer dependencies so one React instance is shared with your UI).
+Icons, `clsx`, and `tailwind-merge` are **dependencies of Flux** — you do not install them separately. You only need **`react` and `react-dom` (18+)** in your app (Flux lists them as peer dependencies so one React instance is shared with your UI).
 
 ---
 

package/dist/index.js

@@ -1,7 +1,6 @@
-import { useReducedMotion, AnimatePresence, motion } from 'framer-motion';
 import { createContext, useState, useRef, useCallback, useEffect, useLayoutEffect, useMemo, useContext } from 'react';
 import { flushSync, createPortal } from 'react-dom';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { X, CornerUpLeft, Check, Copy, AlignHorizontalJustifyStart, AlignHorizontalJustifyCenter, AlignHorizontalJustifyEnd, AlignVerticalJustifyStart, AlignVerticalJustifyCenter, AlignVerticalJustifyEnd, Rows3, SquareSquare, AlignVerticalSpaceAround, AlignHorizontalSpaceAround, ArrowUpDown, ArrowLeftRight, AlignLeft, AlignCenter, AlignRight, ArrowUpToLine, FoldVertical, ArrowDownToLine, SunDim, Minus, Plus, Eye, Ruler, SquareDashed, ChevronDown, Link2, Square, MoveDown, MoveRight } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -149,10 +148,23 @@ function BoxModelOverlay({ enabled, target }) {
     /* @__PURE__ */ jsx("div", { ref: contentRef, className: band, "aria-hidden": true })
   ] });
 }
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = useState(false);
+  useEffect(() => {
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const sync = () => setReduced(mq.matches);
+    sync();
+    mq.addEventListener("change", sync);
+    return () => mq.removeEventListener("change", sync);
+  }, []);
+  return reduced;
+}
 var MONO = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace";
 var PROMPT_MS = 22;
 var LINE_GAP_MS = 300;
 var AFTER_LAST_MS = 450;
+var EASE_OUT = "cubic-bezier(0.4, 0, 0.2, 1)";
+var DIALOG_EASE = "cubic-bezier(0.34, 1.3, 0.64, 1)";
 function TrafficLightsSvg() {
   return /* @__PURE__ */ jsxs("svg", { width: "52", height: "12", viewBox: "0 0 52 12", "aria-hidden": true, className: "shrink-0", children: [
     /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "5", fill: "#FF5F57" }),
@@ -293,11 +305,12 @@ function TerminalTyping({
     }
   );
 }
-var EASE_OUT = [0.4, 0, 0.2, 1];
 var DISMISS_AFTER_TYPING_MS = 5200;
 function CopySuccessOverlay({ open, onClose }) {
-  const reduceMotion = useReducedMotion();
+  const reduceMotion = usePrefersReducedMotion();
   const [typingComplete, setTypingComplete] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const [animIn, setAnimIn] = useState(false);
   const handleTypingComplete = useCallback(() => setTypingComplete(true), []);
   useEffect(() => {
     if (!open) {
@@ -320,36 +333,57 @@ function CopySuccessOverlay({ open, onClose }) {
     const t = window.setTimeout(onClose, DISMISS_AFTER_TYPING_MS);
     return () => window.clearTimeout(t);
   }, [open, typingComplete, onClose]);
+  useLayoutEffect(() => {
+    if (open) setMounted(true);
+  }, [open]);
+  useEffect(() => {
+    if (!open) {
+      setAnimIn(false);
+      return;
+    }
+    setAnimIn(false);
+    const id = requestAnimationFrame(() => {
+      requestAnimationFrame(() => setAnimIn(true));
+    });
+    return () => cancelAnimationFrame(id);
+  }, [open]);
+  const onBackdropTransitionEnd = useCallback((e) => {
+    if (e.target !== e.currentTarget) return;
+    if (e.propertyName !== "opacity") return;
+    if (!open) setMounted(false);
+  }, [open]);
   if (typeof document === "undefined") return null;
   const running = open && !typingComplete && !reduceMotion;
+  const backdropStyle = {
+    opacity: animIn ? 1 : 0,
+    transition: reduceMotion ? "none" : `opacity 220ms ${EASE_OUT}`
+  };
+  const dialogStyle = reduceMotion ? {
+    opacity: animIn ? 1 : 0,
+    transition: `opacity 180ms ${EASE_OUT}`
+  } : {
+    opacity: animIn ? 1 : 0,
+    transform: animIn ? "scale(1) translateY(0)" : "scale(0.94) translateY(14px)",
+    transition: `opacity 240ms ${EASE_OUT}, transform 450ms ${DIALOG_EASE}`
+  };
   return createPortal(
-    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
-      motion.div,
+    /* @__PURE__ */ jsx(Fragment, { children: mounted && /* @__PURE__ */ jsx(
+      "div",
       {
         className: "fixed inset-0 z-[10020] flex items-center justify-center bg-black/50 p-4 backdrop-blur-[3px]",
-        style: { fontFamily: MONO },
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        exit: { opacity: 0 },
-        transition: { duration: 0.22, ease: EASE_OUT },
+        style: { ...backdropStyle, fontFamily: MONO },
         onClick: onClose,
+        onTransitionEnd: onBackdropTransitionEnd,
         role: "presentation",
         children: /* @__PURE__ */ jsxs(
-          motion.div,
+          "div",
           {
             role: "dialog",
             "aria-modal": "true",
             "aria-labelledby": "flux-copy-success-title",
             className: "max-h-[min(90vh,640px)] w-full max-w-[520px] overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-[0_24px_80px_rgba(0,0,0,0.2)]",
-            onClick: (e) => e.stopPropagation(),
-            initial: reduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.94, y: 14 },
-            animate: reduceMotion ? { opacity: 1 } : { opacity: 1, scale: 1, y: 0 },
-            exit: reduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.97, y: 8 },
-            transition: reduceMotion ? { duration: 0.18, ease: EASE_OUT } : {
-              opacity: { duration: 0.24, ease: EASE_OUT },
-              scale: { type: "spring", stiffness: 420, damping: 32, mass: 0.85 },
-              y: { type: "spring", stiffness: 420, damping: 34, mass: 0.85 }
-            },
+            style: dialogStyle,
+            onClick: (ev) => ev.stopPropagation(),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-b border-zinc-200/90 bg-zinc-50/90 px-3 py-2", children: [
                 /* @__PURE__ */ jsx(TrafficLightsSvg, {}),
@@ -374,8 +408,7 @@ function CopySuccessOverlay({ open, onClose }) {
             ]
           }
         )
-      },
-      "flux-copy-success-overlay"
+      }
     ) }),
     document.body
   );
@@ -7459,6 +7492,7 @@ function DesignEditorImpl({
   blockPageInteractions
 }) {
   const [enabled, setEnabled] = useState(false);
+  const [isExiting, setIsExiting] = useState(false);
   const [width, setWidth] = useState(DEFAULT_WIDTH);
   const [layoutW, setLayoutW] = useState(0);
   const resizeRef = useRef(null);
@@ -7572,6 +7606,9 @@ button[data-flux-floating-toggle]:hover {
         flushSync(() => {
           setExitClipVp(getEditorToggleViewportCenter());
         });
+        flushSync(() => {
+          setIsExiting(true);
+        });
         flushSync(() => {
           setEnabled(false);
         });
@@ -7695,7 +7732,11 @@ button[data-flux-floating-toggle]:hover {
     }
     return copyCombinedPromptToClipboard(items, structuralReorders);
   }, [getCopyBatchItems, structuralReorders]);
-  const reduceMotion = useReducedMotion();
+  const reduceMotion = usePrefersReducedMotion();
+  const panelRef = useRef(null);
+  const panelVisible = enabled || isExiting;
+  const irisOpenDoneRef = useRef(false);
+  const exitAnimStartedRef = useRef(false);
   const themeRevealDuration = useMemo(() => readThemeTransitionDurationSeconds(), []);
   const effectiveWidth = useMemo(() => {
     const lw = layoutW > 0 ? layoutW : layoutViewportWidth();
@@ -7706,10 +7747,80 @@ button[data-flux-floating-toggle]:hover {
   const openO = viewportToPanelClipOrigin(openClipVpRef.current.x, openClipVpRef.current.y, effectiveWidth);
   const exitVpForClip = exitClipVp ?? defaultExitViewport();
   const closeO = viewportToPanelClipOrigin(exitVpForClip.x, exitVpForClip.y, effectiveWidth);
-  const irisAt = exitClipVp != null ? closeO : openO;
-  const panelContent = /* @__PURE__ */ jsx(AnimatePresence, { onExitComplete: () => setExitClipVp(null), children: enabled && /* @__PURE__ */ jsxs(
-    motion.div,
+  const easeReveal = `cubic-bezier(${THEME_REVEAL_EASE.join(",")})`;
+  const easeExit = `cubic-bezier(${IRIS_EXIT_EASE.join(",")})`;
+  useEffect(() => {
+    if (!enabled) irisOpenDoneRef.current = false;
+  }, [enabled]);
+  useEffect(() => {
+    if (!isExiting) exitAnimStartedRef.current = false;
+  }, [isExiting]);
+  useLayoutEffect(() => {
+    if (!panelVisible || !enabled || isExiting) return;
+    if (irisOpenDoneRef.current) return;
+    const el = panelRef.current;
+    if (!el) return;
+    irisOpenDoneRef.current = true;
+    if (reduceMotion) {
+      el.style.transition = "";
+      el.style.clipPath = "none";
+      return;
+    }
+    el.style.transition = "none";
+    el.style.clipPath = `circle(0px at ${openO.ox}px ${openO.oy}px)`;
+    const id = requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        el.style.transition = `clip-path ${themeRevealDuration}s ${easeReveal}`;
+        el.style.clipPath = `circle(150vmax at ${openO.ox}px ${openO.oy}px)`;
+      });
+    });
+    return () => cancelAnimationFrame(id);
+  }, [
+    panelVisible,
+    enabled,
+    isExiting,
+    reduceMotion,
+    themeRevealDuration,
+    easeReveal,
+    openO.ox,
+    openO.oy
+  ]);
+  useLayoutEffect(() => {
+    if (!isExiting || enabled) return;
+    if (exitAnimStartedRef.current) return;
+    const el = panelRef.current;
+    if (!el) return;
+    exitAnimStartedRef.current = true;
+    if (reduceMotion) {
+      el.style.transition = "";
+      el.style.clipPath = `circle(0px at ${closeO.ox}px ${closeO.oy}px)`;
+      queueMicrotask(() => {
+        setIsExiting(false);
+        setExitClipVp(null);
+      });
+      return;
+    }
+    el.style.transition = "none";
+    el.style.clipPath = `circle(150vmax at ${openO.ox}px ${openO.oy}px)`;
+    void el.offsetHeight;
+    el.style.transition = `clip-path ${themeRevealDuration}s ${easeExit}`;
+    el.style.clipPath = `circle(0px at ${closeO.ox}px ${closeO.oy}px)`;
+  }, [isExiting, enabled, reduceMotion, themeRevealDuration, easeExit, openO.ox, openO.oy, closeO.ox, closeO.oy]);
+  const onPanelTransitionEnd = useCallback(
+    (e) => {
+      if (e.propertyName !== "clip-path") return;
+      if (!isExiting || enabled || reduceMotion) return;
+      setIsExiting(false);
+      setExitClipVp(null);
+    },
+    [isExiting, enabled, reduceMotion]
+  );
+  const panelContent = /* @__PURE__ */ jsx(Fragment, { children: panelVisible && /* @__PURE__ */ jsxs(
+    "div",
     {
+      ref: panelRef,
+      "data-flux-ui": true,
+      onTransitionEnd: onPanelTransitionEnd,
       style: {
         position: "fixed",
         top: 8,
@@ -7726,18 +7837,8 @@ button[data-flux-floating-toggle]:hover {
         color: "#D9D9D9",
         colorScheme: "dark",
         WebkitFontSmoothing: "antialiased",
-        pointerEvents: "auto"
-      },
-      initial: reduceMotion === true ? { clipPath: "none" } : { clipPath: `circle(0px at ${openO.ox}px ${openO.oy}px)` },
-      animate: reduceMotion === true ? { clipPath: "none" } : { clipPath: `circle(150vmax at ${irisAt.ox}px ${irisAt.oy}px)` },
-      exit: reduceMotion === true ? { clipPath: "none", transition: { duration: 0 } } : {
-        clipPath: `circle(0px at ${closeO.ox}px ${closeO.oy}px)`,
-        transition: {
-          clipPath: { duration: themeRevealDuration, ease: IRIS_EXIT_EASE }
-        }
-      },
-      transition: reduceMotion === true ? { duration: 0 } : {
-        clipPath: { duration: themeRevealDuration, ease: THEME_REVEAL_EASE }
+        pointerEvents: "auto",
+        willChange: reduceMotion ? void 0 : "clip-path"
       },
       children: [
         /* @__PURE__ */ jsx(
@@ -7764,6 +7865,9 @@ button[data-flux-floating-toggle]:hover {
               flushSync(() => {
                 setExitClipVp(getEditorToggleViewportCenter());
               });
+              flushSync(() => {
+                setIsExiting(true);
+              });
               flushSync(() => {
                 setEnabled(false);
               });
@@ -7794,8 +7898,7 @@ button[data-flux-floating-toggle]:hover {
           selectedElement ? getElementPath(selectedElement) : "none"
         ) })
       ]
-    },
-    "flux-panel"
+    }
   ) });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     !enabled && /* @__PURE__ */ jsx(