@sanmid/flux 0.1.4 → 0.1.7

package/dist/index.d.cts

@@ -0,0 +1,240 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type DesignEditorProps = {
+    /**
+     * When true, the editor mounts in production builds.
+     * Default is **development only** (`process.env.NODE_ENV === "development"`).
+     */
+    force?: boolean;
+    /**
+     * Classic margin / border / padding overlay bands on the selected node.
+     * Default **false** — only the mint selection ring is shown unless you opt in.
+     */
+    showBoxModel?: boolean;
+    /**
+     * When the overlay is active, block default actions on interactive page nodes (buttons, links, inputs, …)
+     * via capture-phase listeners. Opt-in for host apps (e.g. playgrounds); default **false**.
+     */
+    blockPageInteractions?: boolean;
+};
+/**
+ * Visual design editor overlay. **Does not render in production** unless `force` is set.
+ */
+declare function DesignEditor({ force, showBoxModel, blockPageInteractions, }: DesignEditorProps): react_jsx_runtime.JSX.Element | null;
+
+/** Persisted for copy prompt after a successful DOM reorder. */
+type FluxStructuralReorder = {
+    type: "reorder";
+    containerSelector: string;
+    containerComponents: string[];
+    originalOrder: string[];
+    newOrder: string[];
+    childrenType: "array" | "static";
+    containerSourceFile: {
+        fileName: string;
+        lineNumber: number;
+        columnNumber?: number;
+    } | null;
+    childSources?: {
+        label: string;
+        sourceFile: {
+            fileName: string;
+            lineNumber: number;
+            columnNumber?: number;
+        };
+    }[];
+    timestamp: number;
+};
+
+/**
+ * Live preview engine using Constructable Stylesheets when supported,
+ * otherwise a single <style> tag in document.head.
+ *
+ * Applies CSS changes without mutating the host element's inline styles.
+ */
+interface AppliedRule {
+    selector: string;
+    property: string;
+    value: string;
+}
+declare class PreviewEngine {
+    private sheet;
+    private fallbackStyle;
+    private rules;
+    private attached;
+    constructor();
+    attach(): void;
+    detach(): void;
+    applyChange(selector: string, property: string, value: string): void;
+    removeChange(selector: string, property: string): void;
+    removeAllChanges(selector: string): void;
+    clearAll(): void;
+    getChanges(): readonly AppliedRule[];
+    /** Last preview value applied for this selector + property (e.g. `100%` when Fill), or undefined. */
+    getPreviewValue(selector: string, property: string): string | undefined;
+    destroy(): void;
+    private flush;
+}
+/**
+ * Generate a unique CSS selector for an element using @medv/finder.
+ * Falls back to a manual path if finder throws (e.g., SVG elements).
+ */
+declare function getUniqueSelector(el: Element): string;
+/**
+ * `parent > :nth-child(n)` so preview rules (e.g. `order`) target the exact direct child.
+ * Finder-only selectors often collide for sibling elements; this stays stable for flex/grid children.
+ */
+declare function getDirectChildSelector(parent: Element, child: Element): string;
+/**
+ * Selector used for {@link PreviewEngine} rules. Verifies each candidate with
+ * `querySelectorAll(sel).length === 1` and that node is `el`, so injected rules
+ * cannot hit multiple elements (e.g. all `button`s). Last resort: a temporary
+ * `data-flux-preview-target` id — call {@link removePreviewTargetAttribute} when deselecting.
+ */
+declare function getReliableSelectorForPreview(el: Element): {
+    selector: string;
+    usedAttrFallback: boolean;
+};
+declare function removePreviewTargetAttribute(el: Element | null | undefined): void;
+
+interface StyleSnapshot {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: string;
+    lineHeight: string;
+    letterSpacing: string;
+    color: string;
+    textAlign: string;
+    width: string;
+    height: string;
+    padding: string;
+    margin: string;
+    paddingTop: string;
+    paddingRight: string;
+    paddingBottom: string;
+    paddingLeft: string;
+    marginTop: string;
+    marginRight: string;
+    marginBottom: string;
+    marginLeft: string;
+    /** CSS `position` (static, relative, absolute, fixed, sticky). */
+    position: string;
+    /** Inset offsets for positioned layout (`top` / `right` / `bottom` / `left`). */
+    top: string;
+    right: string;
+    bottom: string;
+    left: string;
+    /** CSS `align-self` — item alignment in flex/grid. */
+    alignSelf: string;
+    /** CSS `justify-self` — grid item alignment on row axis. */
+    justifySelf: string;
+    overflow: string;
+    display: string;
+    flexDirection: string;
+    justifyContent: string;
+    alignItems: string;
+    gap: string;
+    rowGap: string;
+    columnGap: string;
+    gridTemplateColumns: string;
+    gridTemplateRows: string;
+    backgroundColor: string;
+    /** Computed `background-image` (gradients count as fill for `hasFill`-style checks). */
+    backgroundImage: string;
+    borderTopWidth: string;
+    borderRightWidth: string;
+    borderBottomWidth: string;
+    borderLeftWidth: string;
+    borderTopLeftRadius: string;
+    borderTopRightRadius: string;
+    borderBottomRightRadius: string;
+    borderBottomLeftRadius: string;
+    borderTopColor: string;
+    borderRightColor: string;
+    borderBottomColor: string;
+    borderLeftColor: string;
+    borderTopStyle: string;
+    borderRightStyle: string;
+    borderBottomStyle: string;
+    borderLeftStyle: string;
+    borderColor: string;
+    borderRadius: string;
+    borderStyle: string;
+    boxShadow: string;
+    opacity: string;
+}
+type DesignEditorElement = Element & {
+    style: CSSStyleDeclaration;
+};
+declare function isStyleableElement(target: EventTarget | null): target is DesignEditorElement;
+declare function getComputedSnapshot(el: Element): StyleSnapshot;
+declare function getElementPath(el: Element): string;
+declare function getElementSelector(el: Element): string;
+
+/**
+ * Border-box dimensions in viewport CSS pixels, rounded for the overlay label.
+ */
+declare function formatSelectionDimensions(width: number, height: number): string;
+
+/**
+ * React fiber traversal for extracting component hierarchy and source file locations.
+ * Works with React 18+ dev builds that attach `__reactFiber$` to DOM nodes.
+ */
+interface ReactComponentInfo {
+    components: string[];
+    sourceFile: {
+        fileName: string;
+        lineNumber: number;
+        columnNumber?: number;
+    } | null;
+}
+declare function getExactSourceLocation(el: Element): string | null;
+declare function getReactComponentStack(el: Element): string | null;
+declare function getReactComponentInfo(el: Element): ReactComponentInfo;
+
+/**
+ * Lazy token scanner — walks document.styleSheets to discover CSS custom properties
+ * and utility class tokens. Scans on-demand per category, cached until stylesheet count changes.
+ */
+type TokenCategory = "colors" | "spacing" | "typography" | "borders" | "effects" | "layout";
+type CssFramework = "tailwind" | "css-modules" | "custom" | "unknown";
+interface DesignToken {
+    className: string;
+    property: string;
+    value: string;
+    category: TokenCategory;
+}
+interface CssVariable {
+    name: string;
+    value: string;
+    category: TokenCategory;
+}
+interface TokenScanResult {
+    tokens: DesignToken[];
+    variables: CssVariable[];
+    framework: CssFramework;
+}
+declare function scanTokens(): TokenScanResult;
+/** One-line summary for AI prompts (design-token preamble). */
+declare function summarizeTokenSystem(): string | null;
+declare function detectFramework(): CssFramework;
+declare function getTokensForProperty(cssProperty: string): DesignToken[];
+declare function getVariablesForProperty(cssProperty: string): CssVariable[];
+/**
+ * Variables that appear in real CSS rules for this property first, then category fallback.
+ */
+declare function getVariablesForPropertySmart(cssPropertyKebab: string): CssVariable[];
+
+/**
+ * Maps CSS property names (kebab-case) to custom property names that appear
+ * in stylesheet values via var(--name), so pickers can prefer vars actually
+ * used for that property in the host app.
+ */
+declare function invalidateVariableUsageCache(): void;
+/** Custom property names (--foo) that appear in rules for this CSS property. */
+declare function getVariablesUsedForCssProperty(kebabProperty: string): string[];
+
+/** Collect `font-family` values from parsed stylesheets (best-effort; skips cross-origin). */
+declare function scanStylesheetFontFamilies(): string[];
+
+export { type CssFramework, type CssVariable, DesignEditor, type DesignEditorElement, type DesignEditorProps, type DesignToken, type FluxStructuralReorder, PreviewEngine, type ReactComponentInfo, type StyleSnapshot, type TokenCategory, type TokenScanResult, detectFramework, formatSelectionDimensions, getComputedSnapshot, getDirectChildSelector, getElementPath, getElementSelector, getExactSourceLocation, getReactComponentInfo, getReactComponentStack, getReliableSelectorForPreview, getTokensForProperty, getUniqueSelector, getVariablesForProperty, getVariablesForPropertySmart, getVariablesUsedForCssProperty, invalidateVariableUsageCache, isStyleableElement, removePreviewTargetAttribute, scanStylesheetFontFamilies, scanTokens, summarizeTokenSystem };

package/dist/index.js

@@ -1,7 +1,7 @@
-import { useReducedMotion, AnimatePresence, motion } from 'framer-motion';
+"use client";
 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 +149,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 +306,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 +334,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 +409,7 @@ function CopySuccessOverlay({ open, onClose }) {
             ]
           }
         )
-      },
-      "flux-copy-success-overlay"
+      }
     ) }),
     document.body
   );
@@ -7366,6 +7400,9 @@ async function writeTextToClipboard(text) {
 async function copyCombinedPromptToClipboard(items, structuralReorders) {
   return writeTextToClipboard(buildCombinedCopyPrompt(items, structuralReorders));
 }
+
+// src/host-styles.ts
+var fluxHostStyles = ".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-y-0{top:0;bottom:0}.-right-0{right:0}.-right-1{right:-.25rem}.-top-0{top:0}.-top-1{top:-.25rem}.bottom-2{bottom:.5rem}.left-0{left:0}.right-0{right:0}.right-1{right:.25rem}.right-2{right:.5rem}.right-4{right:1rem}.right-8{right:2rem}.top-0{top:0}.top-1{top:.25rem}.top-2{top:.5rem}.top-4{top:1rem}.top-full{top:100%}.z-10{z-index:10}.z-20{z-index:20}.z-\\[10003\\]{z-index:10003}.z-\\[10020\\]{z-index:10020}.z-\\[1\\]{z-index:1}.z-\\[9997\\]{z-index:9997}.z-\\[9998\\]{z-index:9998}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.-mt-px{margin-top:-1px}.mb-2{margin-bottom:.5rem}.ml-px{margin-left:1px}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.box-border{box-sizing:border-box}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.inline-grid{display:inline-grid}.hidden{display:none}.size-10{width:2.5rem;height:2.5rem}.size-11{width:2.75rem;height:2.75rem}.size-3{width:.75rem;height:.75rem}.size-3\\.5{width:.875rem;height:.875rem}.size-4{width:1rem;height:1rem}.size-9{width:2.25rem;height:2.25rem}.size-\\[14px\\]{width:14px;height:14px}.size-\\[5px\\]{width:5px;height:5px}.h-3{height:.75rem}.h-4{height:1rem}.h-9{height:2.25rem}.h-full{height:100%}.max-h-48{max-height:12rem}.max-h-\\[min\\(90vh\\2c 640px\\)\\]{max-height:min(90vh,640px)}.min-h-0{min-height:0}.w-0{width:0}.w-0\\.5{width:.125rem}.w-1{width:.25rem}.w-2{width:.5rem}.w-3{width:.75rem}.w-\\[4\\.5rem\\]{width:4.5rem}.w-\\[5\\.5rem\\]{width:5.5rem}.w-\\[52px\\]{width:52px}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\\[2rem\\]{min-width:2rem}.min-w-full{min-width:100%}.max-w-\\[520px\\]{max-width:520px}.max-w-\\[5rem\\]{max-width:5rem}.max-w-\\[min\\(18rem\\2c calc\\(100vw-20px\\)\\)\\]{max-width:min(18rem,calc(100vw - 20px))}.max-w-full{max-width:100%}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.-translate-y-1{--tw-translate-y:-0.25rem}.-translate-y-1,.scale-\\[0\\.92\\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-\\[0\\.92\\]{--tw-scale-x:0.92;--tw-scale-y:0.92}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-col-resize{cursor:col-resize}.cursor-ew-resize{cursor:ew-resize}.cursor-grab{cursor:grab}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.list-none{list-style-type:none}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-0\\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-\\[13px\\]{gap:13px}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.self-stretch{align-self:stretch}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-small{border-radius:8px}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-\\[\\#202020\\]{--tw-border-opacity:1;border-color:rgb(32 32 32/var(--tw-border-opacity,1))}.border-\\[\\#444\\]{--tw-border-opacity:1;border-color:rgb(68 68 68/var(--tw-border-opacity,1))}.border-\\[\\#555\\]{--tw-border-opacity:1;border-color:rgb(85 85 85/var(--tw-border-opacity,1))}.border-amber-800{--tw-border-opacity:1;border-color:rgb(146 64 14/var(--tw-border-opacity,1))}.border-amber-800\\/35{border-color:rgba(146,64,14,.35)}.border-zinc-100{--tw-border-opacity:1;border-color:rgb(244 244 245/var(--tw-border-opacity,1))}.border-zinc-200{--tw-border-opacity:1;border-color:rgb(228 228 231/var(--tw-border-opacity,1))}.border-zinc-200\\/90{border-color:hsla(240,6%,90%,.9)}.bg-\\[\\#202020\\]{--tw-bg-opacity:1;background-color:rgb(32 32 32/var(--tw-bg-opacity,1))}.bg-\\[\\#2a2a2a\\]{--tw-bg-opacity:1;background-color:rgb(42 42 42/var(--tw-bg-opacity,1))}.bg-\\[\\#333333\\]{--tw-bg-opacity:1;background-color:rgb(51 51 51/var(--tw-bg-opacity,1))}.bg-\\[\\#555\\]{--tw-bg-opacity:1;background-color:rgb(85 85 85/var(--tw-bg-opacity,1))}.bg-\\[\\#F3F3F3\\]{--tw-bg-opacity:1;background-color:rgb(243 243 243/var(--tw-bg-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-black\\/50{background-color:rgba(0,0,0,.5)}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-zinc-300{--tw-bg-opacity:1;background-color:rgb(212 212 216/var(--tw-bg-opacity,1))}.bg-zinc-400{--tw-bg-opacity:1;background-color:rgb(161 161 170/var(--tw-bg-opacity,1))}.bg-zinc-50{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))}.bg-zinc-50\\/90{background-color:hsla(0,0%,98%,.9)}.\\!fill-none{fill:none!important}.p-0{padding:0}.p-0\\.5{padding:.125rem}.p-1{padding:.25rem}.p-1\\.5{padding:.375rem}.p-3{padding:.75rem}.p-4{padding:1rem}.px-0{padding-left:0;padding-right:0}.px-0\\.5{padding-left:.125rem;padding-right:.125rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-0{padding-top:0;padding-bottom:0}.py-0\\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pl-0{padding-left:0}.pl-0\\.5{padding-left:.125rem}.pr-0{padding-right:0}.pr-10{padding-right:2.5rem}.pr-11{padding-right:2.75rem}.pr-6{padding-right:1.5rem}.pr-7{padding-right:1.75rem}.pt-0{padding-top:0}.pt-1{padding-top:.25rem}.pt-3{padding-top:.75rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.font-\\[\\'Inter\\'\\2c system-ui\\2c sans-serif\\]{font-family:Inter,system-ui,sans-serif}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.text-\\[12px\\]{font-size:12px}.text-\\[15px\\]{font-size:15px}.text-\\[7px\\]{font-size:7px}.text-base{font-size:1rem;line-height:1.5rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-\\[14px\\]{line-height:14px}.leading-\\[15\\.6px\\]{line-height:15.6px}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.tracking-tight{letter-spacing:-.025em}.text-\\[\\#202020\\]{--tw-text-opacity:1;color:rgb(32 32 32/var(--tw-text-opacity,1))}.text-\\[\\#333333\\]{--tw-text-opacity:1;color:rgb(51 51 51/var(--tw-text-opacity,1))}.text-\\[\\#71717a\\]{--tw-text-opacity:1;color:rgb(113 113 122/var(--tw-text-opacity,1))}.text-\\[\\#7C7C7C\\]{--tw-text-opacity:1;color:rgb(124 124 124/var(--tw-text-opacity,1))}.text-\\[\\#93c47d\\]{--tw-text-opacity:1;color:rgb(147 196 125/var(--tw-text-opacity,1))}.text-\\[\\#D9D9D9\\]{--tw-text-opacity:1;color:rgb(217 217 217/var(--tw-text-opacity,1))}.text-\\[\\#b45309\\]{--tw-text-opacity:1;color:rgb(180 83 9/var(--tw-text-opacity,1))}.text-\\[\\#c2410c\\]{--tw-text-opacity:1;color:rgb(194 65 12/var(--tw-text-opacity,1))}.text-\\[\\#d9d9d9\\]{--tw-text-opacity:1;color:rgb(217 217 217/var(--tw-text-opacity,1))}.text-emerald-600{--tw-text-opacity:1;color:rgb(5 150 105/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-zinc-400{--tw-text-opacity:1;color:rgb(161 161 170/var(--tw-text-opacity,1))}.text-zinc-500{--tw-text-opacity:1;color:rgb(113 113 122/var(--tw-text-opacity,1))}.text-zinc-700{--tw-text-opacity:1;color:rgb(63 63 70/var(--tw-text-opacity,1))}.text-zinc-800{--tw-text-opacity:1;color:rgb(39 39 42/var(--tw-text-opacity,1))}.text-zinc-900{--tw-text-opacity:1;color:rgb(24 24 27/var(--tw-text-opacity,1))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-\\[0_24px_80px_rgba\\(0\\2c 0\\2c 0\\2c 0\\.2\\)\\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\\[0_24px_80px_rgba\\(0\\2c 0\\2c 0\\2c 0\\.2\\)\\]{--tw-shadow:0 24px 80px rgba(0,0,0,.2);--tw-shadow-colored:0 24px 80px var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.\\!outline{outline-style:solid!important}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-\\[3px\\]{--tw-backdrop-blur:blur(3px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\\[transform\\]{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150,.transition-opacity{transition-duration:.15s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.\\[font-synthesis\\:none\\]{font-synthesis:none}.hover\\:bg-\\[\\#2a2a2a\\]:hover{--tw-bg-opacity:1;background-color:rgb(42 42 42/var(--tw-bg-opacity,1))}.hover\\:bg-\\[\\#333333\\]:hover{--tw-bg-opacity:1;background-color:rgb(51 51 51/var(--tw-bg-opacity,1))}.hover\\:text-\\[\\#D9D9D9\\]:hover{--tw-text-opacity:1;color:rgb(217 217 217/var(--tw-text-opacity,1))}.hover\\:brightness-110:hover{--tw-brightness:brightness(1.1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.focus-visible\\:outline:focus-visible{outline-style:solid}.focus-visible\\:outline-2:focus-visible{outline-width:2px}.focus-visible\\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\\:outline-\\[\\#D9D9D9\\]\\/40:focus-visible{outline-color:hsla(0,0%,85%,.4)}.active\\:scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:focus-within .group-focus-within\\:opacity-100{opacity:1}.group:hover .group-hover\\:opacity-100{opacity:1}@media (min-width:640px){.sm\\:max-w-\\[200px\\]{max-width:200px}.sm\\:flex-row{flex-direction:row}.sm\\:items-start{align-items:flex-start}.sm\\:justify-between{justify-content:space-between}.sm\\:gap-6{gap:1.5rem}.sm\\:px-4{padding-left:1rem;padding-right:1rem}.sm\\:px-5{padding-left:1.25rem;padding-right:1.25rem}.sm\\:pt-4{padding-top:1rem}}.\\[\\&\\:\\:-webkit-details-marker\\]\\:hidden::-webkit-details-marker{display:none}.\\[\\&_svg\\]\\:-mt-px svg{margin-top:-1px}.\\[\\&_svg\\]\\:\\!fill-none svg{fill:none!important}";
 var MIN_WIDTH = 240;
 var MAX_WIDTH = 560;
 var DEFAULT_WIDTH = 277;
@@ -7459,6 +7496,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);
@@ -7484,6 +7522,15 @@ function DesignEditorImpl({
       setMenuPortalTarget(null);
     };
   }, []);
+  useEffect(() => {
+    const id = "flux-host-tailwind";
+    if (typeof document === "undefined" || document.getElementById(id)) return;
+    const el = document.createElement("style");
+    el.id = id;
+    el.setAttribute("data-flux-host-tailwind", "");
+    el.textContent = fluxHostStyles;
+    document.head.appendChild(el);
+  }, []);
   useEffect(() => {
     const id = "flux-floating-toggle-host-styles";
     if (document.getElementById(id)) return;
@@ -7572,6 +7619,9 @@ button[data-flux-floating-toggle]:hover {
         flushSync(() => {
           setExitClipVp(getEditorToggleViewportCenter());
         });
+        flushSync(() => {
+          setIsExiting(true);
+        });
         flushSync(() => {
           setEnabled(false);
         });
@@ -7695,7 +7745,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 +7760,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 +7850,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 +7878,9 @@ button[data-flux-floating-toggle]:hover {
               flushSync(() => {
                 setExitClipVp(getEditorToggleViewportCenter());
               });
+              flushSync(() => {
+                setIsExiting(true);
+              });
               flushSync(() => {
                 setEnabled(false);
               });
@@ -7794,8 +7911,7 @@ button[data-flux-floating-toggle]:hover {
           selectedElement ? getElementPath(selectedElement) : "none"
         ) })
       ]
-    },
-    "flux-panel"
+    }
   ) });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     !enabled && /* @__PURE__ */ jsx(