@anvilkit/puck-studio 0.0.1 → 0.1.0

package/dist/index.cjs

@@ -1,38 +1,35 @@
 'use strict';
 
-var core = require('@puckeditor/core');
 var lucideReact = require('lucide-react');
-var button = require('@base-ui/react/button');
-var classVarianceAuthority = require('class-variance-authority');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
-var jsxRuntime = require('react/jsx-runtime');
-var separator = require('@base-ui/react/separator');
 var zustand = require('zustand');
-var React18 = require('react');
-var TooltipPrimitive = require('@radix-ui/react-tooltip');
-var menu = require('@base-ui/react/menu');
+var React17 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var scrollArea = require('@base-ui/react/scroll-area');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
 var input = require('@base-ui/react/input');
+var core = require('@puckeditor/core');
+var separator = require('@base-ui/react/separator');
+var tooltip = require('@base-ui/react/tooltip');
 var mergeProps = require('@base-ui/react/merge-props');
 var useRender = require('@base-ui/react/use-render');
+var button = require('@base-ui/react/button');
+var classVarianceAuthority = require('class-variance-authority');
 var select = require('@base-ui/react/select');
 var core$1 = require('@dnd-kit/core');
 var sortable = require('@dnd-kit/sortable');
 var utilities = require('@dnd-kit/utilities');
-var popover = require('@base-ui-components/react/popover');
+var popover = require('@base-ui/react/popover');
 var react = require('motion/react');
 var toggle = require('@base-ui/react/toggle');
 var cmdk = require('cmdk');
-require('@base-ui/react/dialog');
-var pluginAi = require('@puckeditor/plugin-ai');
-require('@puckeditor/plugin-ai/styles.css');
 require('@puckeditor/core/puck.css');
-var tabs = require('@base-ui-components/react/tabs');
-var motion9 = require('motion/react-client');
+var tabs = require('@base-ui/react/tabs');
+var middleware = require('zustand/middleware');
+var motion8 = require('motion/react-client');
 var react$1 = require('@floating-ui/react');
 var avatar = require('@base-ui/react/avatar');
-var middleware = require('zustand/middleware');
+var menu = require('@base-ui/react/menu');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -52,90 +49,24 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React18__namespace = /*#__PURE__*/_interopNamespace(React18);
-var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
-var motion9__namespace = /*#__PURE__*/_interopNamespace(motion9);
+var React17__namespace = /*#__PURE__*/_interopNamespace(React17);
+var motion8__namespace = /*#__PURE__*/_interopNamespace(motion8);
 
-// src/components/overrides/layout/EditorHeader.tsx
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
-var buttonVariants = classVarianceAuthority.cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-        ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
-        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-8 gap-1.5 px-2.5",
-        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] [&_svg:not([class*='size-'])]:size-3.5",
-        lg: "h-9 gap-1.5 px-2.5",
-        icon: "size-8",
-        "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)]",
-        "icon-lg": "size-9"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    button.Button,
-    {
-      "data-slot": "button",
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
-function Separator({
-  className,
-  orientation = "horizontal",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    separator.Separator,
-    {
-      "data-slot": "separator",
-      orientation,
-      className: cn(
-        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
-        className
-      ),
-      ...props
-    }
-  );
-}
+// src/core/overrides/layout/EditorDrawer.tsx
 function getStrictContext(name) {
-  const Context = React18__namespace.createContext(void 0);
-  const Provider2 = ({
+  const Context = React17__namespace.createContext(void 0);
+  const Provider = ({
     value,
     children
   }) => /* @__PURE__ */ jsxRuntime.jsx(Context.Provider, { value, children });
   const useSafeContext = () => {
-    const ctx = React18__namespace.useContext(Context);
+    const ctx = React17__namespace.useContext(Context);
     if (ctx === void 0) {
       throw new Error(`useContext must be used within ${name ?? "a Provider"}`);
     }
     return ctx;
   };
-  return [Provider2, useSafeContext];
+  return [Provider, useSafeContext];
 }
 
 // src/store/ui-context.ts
@@ -166,137 +97,8 @@ function useToggleTheme() {
 function useMsg(key) {
   return zustand.useStore(useEditorI18nStoreApi(), (s) => s.messages[key] ?? key);
 }
-var TooltipProvider = TooltipPrimitive__namespace.Provider;
-var Tooltip = TooltipPrimitive__namespace.Root;
-var TooltipTrigger = TooltipPrimitive__namespace.Trigger;
-var TooltipContent = React18__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-  TooltipPrimitive__namespace.Content,
-  {
-    ref,
-    sideOffset,
-    className: cn(
-      "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
-      className
-    ),
-    ...props
-  }
-) }));
-TooltipContent.displayName = TooltipPrimitive__namespace.Content.displayName;
-function DropdownMenu({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Root, { "data-slot": "dropdown-menu", ...props });
-}
-function DropdownMenuTrigger({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
-}
-function DropdownMenuContent({
-  align = "start",
-  alignOffset = 0,
-  side = "bottom",
-  sideOffset = 4,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    menu.Menu.Positioner,
-    {
-      className: "isolate z-50 outline-none",
-      align,
-      alignOffset,
-      side,
-      sideOffset,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        menu.Menu.Popup,
-        {
-          "data-slot": "dropdown-menu-content",
-          className: cn(
-            "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden",
-            className
-          ),
-          ...props
-        }
-      )
-    }
-  ) });
-}
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    menu.Menu.Item,
-    {
-      "data-slot": "dropdown-menu-item",
-      "data-inset": inset,
-      "data-variant": variant,
-      className: cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function EditorHeader({
-  actions,
-  children
-}) {
-  const { history, appState } = core.usePuck();
-  const undo = useMsg("header.undo");
-  const undoTooltip = useMsg("header.undo.tooltip");
-  const redo = useMsg("header.redo");
-  const redoTooltip = useMsg("header.redo.tooltip");
-  const exportLabel = useMsg("header.export");
-  const exportJson = useMsg("header.export.json");
-  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex h-12 items-center justify-between border-b bg-background px-4 gap-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "h-4 w-4" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: appState?.data?.root?.props?.title || "" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "icon",
-            disabled: !history.hasPast,
-            onClick: () => history.back(),
-            "aria-label": undo,
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Undo2, { className: "h-4 w-4" })
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: undoTooltip })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "icon",
-            disabled: !history.hasFuture,
-            onClick: () => history.forward(),
-            "aria-label": redo,
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Redo2, { className: "h-4 w-4" })
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: redoTooltip })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", className: "h-5 mx-1" }),
-      /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { "aria-label": exportLabel, className: "inline-flex items-center justify-center rounded-md h-9 w-9 hover:bg-accent hover:text-accent-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-4 w-4" }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: exportLabel })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "end", children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { children: exportJson }) })
-      ] }),
-      actions
-    ] })
-  ] }) });
-}
-function EditorHeaderActions({
-  children
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children }) });
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
 function ScrollArea({
   className,
@@ -357,7 +159,7 @@ function Input({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: cn(
-        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
       ),
       ...props
@@ -422,9 +224,9 @@ function DrawerItem({
   children,
   name
 }) {
-  const { appState } = core.usePuck();
-  const componentConfig = appState.config?.components?.[name];
-  const thumbnail = componentConfig?.metadata?.thumbnail;
+  const { config } = core.usePuck();
+  const componentConfig = config.components?.[name];
+  const thumbnail = typeof componentConfig?.metadata?.thumbnail === "string" ? componentConfig.metadata.thumbnail : void 0;
   const src = thumbnail ?? getPlaceholderUrl(name);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col rounded-md border border-border bg-muted/40 cursor-grab select-none transition-colors hover:bg-muted active:cursor-grabbing overflow-hidden", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-16 bg-muted overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -441,6 +243,24 @@ function DrawerItem({
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1.5 text-xs font-medium truncate", children: name ?? children })
   ] });
 }
+function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    separator.Separator,
+    {
+      "data-slot": "separator",
+      orientation,
+      className: cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      ),
+      ...props
+    }
+  );
+}
 function EditorOutline({
   children
 }) {
@@ -451,7 +271,7 @@ function EditorOutline({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-1.5 text-xs text-muted-foreground truncate", children: [
         "Selected:",
         " ",
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-foreground", children: selectedItem.type ?? "Component" })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-foreground", children: typeof selectedItem.type === "string" ? selectedItem.type : String(selectedItem.type) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(Separator, {})
     ] }),
@@ -483,6 +303,61 @@ var CANVAS_CSS = `
   }
   body { margin: 0; font-family: system-ui, sans-serif; }
 `;
+var CANVAS_STYLE_ID = "__anvilkit_styles__";
+function resolveDocument(target) {
+  if (target) return target;
+  if (typeof document === "undefined") return void 0;
+  return document;
+}
+function useThemeSync({
+  document: targetDocument,
+  injectCanvasCss = false
+} = {}) {
+  const theme = useTheme();
+  React17__namespace.useEffect(() => {
+    const resolvedDocument = resolveDocument(targetDocument);
+    if (!resolvedDocument || !injectCanvasCss) return;
+    const existing = resolvedDocument.getElementById(CANVAS_STYLE_ID);
+    if (existing) existing.remove();
+    const style = resolvedDocument.createElement("style");
+    style.id = CANVAS_STYLE_ID;
+    style.textContent = CANVAS_CSS;
+    resolvedDocument.head.appendChild(style);
+  }, [targetDocument, injectCanvasCss]);
+  React17__namespace.useEffect(() => {
+    const resolvedDocument = resolveDocument(targetDocument);
+    if (!resolvedDocument) return;
+    resolvedDocument.documentElement.classList.toggle("dark", theme === "dark");
+  }, [targetDocument, theme]);
+}
+
+// src/features/library-dnd/drop-contract.ts
+var LIBRARY_DRAG_START = "anvilkit:librarydragstart";
+var IMAGE_DROP = "anvilkit:imagedrop";
+var TEXT_DROP = "anvilkit:textdrop";
+function createLibraryDragEvent(type, detail) {
+  return new CustomEvent(type, { detail });
+}
+function addLibraryDragEventListener(type, listener, target = window) {
+  const wrapped = (event) => {
+    listener(event);
+  };
+  target.addEventListener(type, wrapped);
+  return () => {
+    target.removeEventListener(type, wrapped);
+  };
+}
+function dispatchLibraryDragStart(type) {
+  window.dispatchEvent(createLibraryDragEvent(LIBRARY_DRAG_START, { type }));
+}
+function dispatchImageDrop(detail) {
+  window.dispatchEvent(createLibraryDragEvent(IMAGE_DROP, detail));
+}
+function dispatchTextDrop(detail) {
+  window.dispatchEvent(createLibraryDragEvent(TEXT_DROP, detail));
+}
+
+// src/features/library-dnd/replace-props.ts
 function isImageUrl(val) {
   return /\.(jpg|jpeg|png|gif|webp|svg|avif)(\?.*)?$/i.test(val) || val.includes("picsum.photos") || val.includes("unsplash.com") || val.includes("images.") || val.startsWith("data:image/");
 }
@@ -521,160 +396,187 @@ function replaceTextInProps(props, newText, targetText) {
   }
   return { result: props, replaced: false };
 }
-function CanvasIframe({
-  children,
-  document: iframeDoc
-}) {
+
+// src/core/overrides/canvas/drop-targets.ts
+var TEXT_TAGS = /* @__PURE__ */ new Set([
+  "P",
+  "H1",
+  "H2",
+  "H3",
+  "H4",
+  "H5",
+  "H6",
+  "SPAN",
+  "A",
+  "LI",
+  "BUTTON",
+  "LABEL"
+]);
+function getIframeCoords(iframeEl, clientX, clientY) {
+  const rect = iframeEl.getBoundingClientRect();
+  const x = clientX - rect.left;
+  const y = clientY - rect.top;
+  if (x < 0 || y < 0 || x > rect.width || y > rect.height) {
+    return null;
+  }
+  return { x, y };
+}
+function getComponentElAt(iframeDoc, iframeEl, clientX, clientY) {
+  const coords = getIframeCoords(iframeEl, clientX, clientY);
+  if (!coords) return null;
+  const element = iframeDoc.elementFromPoint(coords.x, coords.y);
+  if (!element) return null;
+  return element.closest("[data-puck-component]");
+}
+function getImageElInComponent(compEl, iframeEl, clientX, clientY) {
+  const images = Array.from(compEl.querySelectorAll("img"));
+  if (!images.length) return null;
+  if (images.length === 1) return images[0];
+  const rect = iframeEl.getBoundingClientRect();
+  const x = clientX - rect.left;
+  const y = clientY - rect.top;
+  let closest = null;
+  let minDistance = Infinity;
+  for (const image of images) {
+    const imageRect = image.getBoundingClientRect();
+    const centerX = imageRect.left + imageRect.width / 2;
+    const centerY = imageRect.top + imageRect.height / 2;
+    const distance = Math.hypot(centerX - x, centerY - y);
+    if (distance < minDistance) {
+      minDistance = distance;
+      closest = image;
+    }
+  }
+  return closest;
+}
+function getTextElInComponent(iframeDoc, iframeEl, compEl, clientX, clientY) {
+  const coords = getIframeCoords(iframeEl, clientX, clientY);
+  if (!coords) return null;
+  const element = iframeDoc.elementFromPoint(coords.x, coords.y);
+  if (element && compEl.contains(element)) {
+    let current = element;
+    while (current && current !== iframeDoc.body) {
+      if (TEXT_TAGS.has(current.tagName) && current.textContent?.trim()) {
+        return current;
+      }
+      current = current.parentElement;
+    }
+  }
+  for (const tag of TEXT_TAGS) {
+    const candidate = compEl.querySelector(tag.toLowerCase());
+    if (candidate?.textContent?.trim()) {
+      return candidate;
+    }
+  }
+  return null;
+}
+
+// src/core/overrides/canvas/highlight.ts
+function createElementHighlighter() {
+  let highlightedEl = null;
+  function set(el, color) {
+    if (highlightedEl && highlightedEl !== el) {
+      highlightedEl.style.outline = "";
+      highlightedEl.style.outlineOffset = "";
+    }
+    if (el) {
+      el.style.outline = `2px solid ${color}`;
+      el.style.outlineOffset = "2px";
+    }
+    highlightedEl = el;
+  }
+  function clear() {
+    set(null, "");
+  }
+  return { set, clear };
+}
+
+// src/core/overrides/canvas/useLibraryDropBridge.ts
+function useLibraryDropBridge(iframeDoc) {
   const getPuck = core.useGetPuck();
-  const theme = useTheme();
-  React18__namespace.useEffect(() => {
-    if (!iframeDoc) return;
-    const existing = iframeDoc.getElementById("__anvilkit_styles__");
-    if (existing) existing.remove();
-    const style = iframeDoc.createElement("style");
-    style.id = "__anvilkit_styles__";
-    style.textContent = CANVAS_CSS;
-    iframeDoc.head.appendChild(style);
-  }, [iframeDoc]);
-  React18__namespace.useEffect(() => {
-    if (!iframeDoc) return;
-    iframeDoc.documentElement.classList.toggle("dark", theme === "dark");
-  }, [iframeDoc, theme]);
-  React18__namespace.useEffect(() => {
+  React17__namespace.useEffect(() => {
     if (!iframeDoc) return;
     const iframeEl = iframeDoc.defaultView?.frameElement;
     if (!iframeEl) return;
-    let highlightedEl = null;
-    function iframeCoords(clientX, clientY) {
-      const rect = iframeEl.getBoundingClientRect();
-      const x = clientX - rect.left;
-      const y = clientY - rect.top;
-      if (x < 0 || y < 0 || x > rect.width || y > rect.height) return null;
-      return { x, y };
-    }
-    function getComponentElAt(clientX, clientY) {
-      const coords = iframeCoords(clientX, clientY);
-      if (!coords) return null;
-      const el = iframeDoc.elementFromPoint(coords.x, coords.y);
-      if (!el) return null;
-      const comp = el.closest("[data-puck-component]");
-      return comp;
-    }
-    function getImgInComponent(compEl, clientX, clientY) {
-      const imgs = Array.from(compEl.querySelectorAll("img"));
-      if (!imgs.length) return null;
-      if (imgs.length === 1) return imgs[0];
-      const rect = iframeEl.getBoundingClientRect();
-      const x = clientX - rect.left;
-      const y = clientY - rect.top;
-      let closest = null;
-      let minDist = Infinity;
-      for (const img of imgs) {
-        const r = img.getBoundingClientRect();
-        const cx = r.left + r.width / 2;
-        const cy = r.top + r.height / 2;
-        const dist = Math.hypot(cx - x, cy - y);
-        if (dist < minDist) {
-          minDist = dist;
-          closest = img;
-        }
-      }
-      return closest;
-    }
-    const TEXT_TAGS = /* @__PURE__ */ new Set(["P", "H1", "H2", "H3", "H4", "H5", "H6", "SPAN", "A", "LI", "BUTTON", "LABEL"]);
-    function getTextElInComponent(compEl, clientX, clientY) {
-      const coords = iframeCoords(clientX, clientY);
-      if (!coords) return null;
-      const el = iframeDoc.elementFromPoint(coords.x, coords.y);
-      if (el && compEl.contains(el)) {
-        let cur = el;
-        while (cur && cur !== iframeDoc.body) {
-          if (TEXT_TAGS.has(cur.tagName) && cur.textContent?.trim()) return cur;
-          cur = cur.parentElement;
+    const iframeDocument = iframeDoc;
+    const frameElement = iframeEl;
+    let activeLibrary = null;
+    const highlighter = createElementHighlighter();
+    function dispatchReplace(componentId, updatedProps) {
+      const { dispatch, getItemById, getSelectorForId } = getPuck();
+      const item = getItemById(componentId);
+      const selector = getSelectorForId(componentId);
+      if (!item || !selector) return false;
+      dispatch({
+        type: "replace",
+        destinationIndex: selector.index,
+        destinationZone: selector.zone,
+        data: {
+          ...item,
+          props: { ...item.props, ...updatedProps }
         }
-      }
-      for (const tag of TEXT_TAGS) {
-        const found = compEl.querySelector(tag.toLowerCase());
-        if (found?.textContent?.trim()) return found;
-      }
-      return null;
-    }
-    function setHighlight(el, color) {
-      if (highlightedEl && highlightedEl !== el) {
-        highlightedEl.style.outline = "";
-        highlightedEl.style.outlineOffset = "";
-      }
-      if (el) {
-        el.style.outline = `2px solid ${color}`;
-        el.style.outlineOffset = "2px";
-      }
-      highlightedEl = el;
+      });
+      return true;
     }
-    function clearHighlight() {
-      setHighlight(null, "");
-    }
-    let activeLibrary = null;
-    function onLibraryDragStart(e) {
-      activeLibrary = e.detail.type;
+    function onLibraryDragStart(type) {
+      activeLibrary = type;
     }
     function onPointerMove(e) {
       if (!activeLibrary) return;
-      const compEl = getComponentElAt(e.clientX, e.clientY);
+      const compEl = getComponentElAt(iframeDocument, frameElement, e.clientX, e.clientY);
       if (!compEl) {
-        clearHighlight();
+        highlighter.clear();
         return;
       }
       if (activeLibrary === "image") {
-        const img = getImgInComponent(compEl, e.clientX, e.clientY);
-        setHighlight(img, "#6366f1");
+        highlighter.set(
+          getImageElInComponent(compEl, frameElement, e.clientX, e.clientY),
+          "#6366f1"
+        );
       } else {
-        const textEl = getTextElInComponent(compEl, e.clientX, e.clientY);
-        setHighlight(textEl, "#f59e0b");
+        highlighter.set(
+          getTextElInComponent(iframeDocument, frameElement, compEl, e.clientX, e.clientY),
+          "#f59e0b"
+        );
       }
     }
     function onPointerUp() {
       activeLibrary = null;
-      clearHighlight();
-    }
-    function dispatchReplace(componentId, updatedProps) {
-      const { dispatch, getItemById, getSelectorForId } = getPuck();
-      const item = getItemById(componentId);
-      const selector = getSelectorForId(componentId);
-      if (!item || !selector) return false;
-      dispatch({
-        type: "replace",
-        destinationIndex: selector.index,
-        destinationZone: selector.zone,
-        data: { ...item, props: { ...item.props, ...updatedProps } }
-      });
-      return true;
+      highlighter.clear();
     }
-    function onImageDrop(e) {
-      const { src, clientX, clientY } = e.detail;
-      clearHighlight();
+    function onImageDrop(src, clientX, clientY) {
+      highlighter.clear();
       activeLibrary = null;
       if (!src) return;
-      const compEl = getComponentElAt(clientX, clientY);
+      const compEl = getComponentElAt(iframeDocument, frameElement, clientX, clientY);
       if (!compEl) return;
-      const componentId = compEl.getAttribute("data-puck-component");
-      const { getItemById } = getPuck();
-      const item = getItemById(componentId);
+      const componentId = compEl.dataset.puckComponent;
+      if (!componentId) return;
+      const item = getPuck().getItemById(componentId);
       if (!item) return;
-      const updatedProps = replaceImageInProps(item.props, src);
+      const updatedProps = replaceImageInProps(
+        item.props,
+        src
+      );
       dispatchReplace(componentId, updatedProps);
     }
-    function onTextDrop(e) {
-      const { text, clientX, clientY } = e.detail;
-      clearHighlight();
+    function onTextDrop(text, clientX, clientY) {
+      highlighter.clear();
       activeLibrary = null;
       if (!text) return;
-      const compEl = getComponentElAt(clientX, clientY);
+      const compEl = getComponentElAt(iframeDocument, frameElement, clientX, clientY);
       if (!compEl) return;
-      const componentId = compEl.getAttribute("data-puck-component");
-      const textEl = getTextElInComponent(compEl, clientX, clientY);
+      const componentId = compEl.dataset.puckComponent;
+      if (!componentId) return;
+      const textEl = getTextElInComponent(
+        iframeDocument,
+        frameElement,
+        compEl,
+        clientX,
+        clientY
+      );
       const targetText = textEl?.textContent?.trim() ?? "";
-      const { getItemById } = getPuck();
-      const item = getItemById(componentId);
+      const item = getPuck().getItemById(componentId);
       if (!item) return;
       const { result: updatedProps, replaced } = replaceTextInProps(
         item.props,
@@ -683,19 +585,38 @@ function CanvasIframe({
       );
       if (replaced) dispatchReplace(componentId, updatedProps);
     }
-    window.addEventListener("anvilkit:librarydragstart", onLibraryDragStart);
+    const removeLibraryDragStart = addLibraryDragEventListener(
+      LIBRARY_DRAG_START,
+      (event) => {
+        onLibraryDragStart(event.detail.type);
+      }
+    );
     window.addEventListener("pointermove", onPointerMove);
     window.addEventListener("pointerup", onPointerUp);
-    window.addEventListener("anvilkit:imagedrop", onImageDrop);
-    window.addEventListener("anvilkit:textdrop", onTextDrop);
+    const removeImageDrop = addLibraryDragEventListener(IMAGE_DROP, (event) => {
+      const { src, clientX, clientY } = event.detail;
+      onImageDrop(src, clientX, clientY);
+    });
+    const removeTextDrop = addLibraryDragEventListener(TEXT_DROP, (event) => {
+      const { text, clientX, clientY } = event.detail;
+      onTextDrop(text, clientX, clientY);
+    });
     return () => {
-      window.removeEventListener("anvilkit:librarydragstart", onLibraryDragStart);
+      removeLibraryDragStart();
       window.removeEventListener("pointermove", onPointerMove);
       window.removeEventListener("pointerup", onPointerUp);
-      window.removeEventListener("anvilkit:imagedrop", onImageDrop);
-      window.removeEventListener("anvilkit:textdrop", onTextDrop);
+      removeImageDrop();
+      removeTextDrop();
+      highlighter.clear();
     };
   }, [iframeDoc, getPuck]);
+}
+function CanvasIframe({
+  children,
+  document: iframeDoc
+}) {
+  useThemeSync({ document: iframeDoc, injectCanvasCss: true });
+  useLibraryDropBridge(iframeDoc);
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 }
 function CanvasPreview({
@@ -719,6 +640,60 @@ function ComponentOverlay({
     }
   );
 }
+function TooltipProvider({
+  delay = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    tooltip.Tooltip.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delay,
+      ...props
+    }
+  );
+}
+function Tooltip({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    tooltip.Tooltip.Positioner,
+    {
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      className: "isolate z-50",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        tooltip.Tooltip.Popup,
+        {
+          "data-slot": "tooltip-content",
+          className: cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          ),
+          ...props,
+          children: [
+            children,
+            /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })
+          ]
+        }
+      )
+    }
+  ) });
+}
 function ActionBar({
   children,
   label,
@@ -736,16 +711,13 @@ function ActionBar({
     children
   ] }) });
 }
-function cn2(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
 function Label({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "label",
     {
       "data-slot": "label",
-      className: cn2(
-        "gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
         className
       ),
       ...props
@@ -758,7 +730,7 @@ function Breadcrumb({ className, ...props }) {
     {
       "aria-label": "breadcrumb",
       "data-slot": "breadcrumb",
-      className: cn2(className),
+      className: cn(className),
       ...props
     }
   );
@@ -768,8 +740,8 @@ function BreadcrumbList({ className, ...props }) {
     "ol",
     {
       "data-slot": "breadcrumb-list",
-      className: cn2(
-        "text-muted-foreground gap-1.5 text-sm flex flex-wrap items-center wrap-break-word",
+      className: cn(
+        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5",
         className
       ),
       ...props
@@ -781,7 +753,7 @@ function BreadcrumbItem({ className, ...props }) {
     "li",
     {
       "data-slot": "breadcrumb-item",
-      className: cn2("gap-1 inline-flex items-center", className),
+      className: cn("inline-flex items-center gap-1.5", className),
       ...props
     }
   );
@@ -795,7 +767,7 @@ function BreadcrumbLink({
     defaultTagName: "a",
     props: mergeProps.mergeProps(
       {
-        className: cn2("hover:text-foreground transition-colors", className)
+        className: cn("transition-colors hover:text-foreground", className)
       },
       props
     ),
@@ -813,7 +785,7 @@ function BreadcrumbPage({ className, ...props }) {
       role: "link",
       "aria-disabled": "true",
       "aria-current": "page",
-      className: cn2("text-foreground font-normal", className),
+      className: cn("font-normal text-foreground", className),
       ...props
     }
   );
@@ -829,32 +801,39 @@ function BreadcrumbSeparator({
       "data-slot": "breadcrumb-separator",
       role: "presentation",
       "aria-hidden": "true",
-      className: cn2("[&>svg]:size-3.5", className),
+      className: cn("[&>svg]:size-3.5", className),
       ...props,
-      children: children ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "cn-rtl-flip" })
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, {})
     }
   );
 }
+function getComponentTypeLabel(item) {
+  if (!item) return "Component";
+  return typeof item.type === "string" ? item.type : String(item.type);
+}
+function getComponentId(item) {
+  const id = item?.props?.id;
+  return typeof id === "string" ? id : null;
+}
 function useBreadcrumbs() {
-  const { appState, dispatch, selectedItem, getParentById, getSelectorForId } = core.usePuck();
+  const { appState, dispatch, selectedItem, getParentById } = core.usePuck();
   const { itemSelector } = appState.ui;
   const selectRoot = () => dispatch({ type: "setUi", ui: { itemSelector: null } });
   if (!itemSelector || !selectedItem) {
     return [{ label: "Page" }];
   }
-  const selectedType = selectedItem.type ?? "Component";
-  const parent = getParentById(selectedItem.props?.id ?? "");
+  const selectedType = getComponentTypeLabel(selectedItem);
+  const parentId = getComponentId(selectedItem);
+  const parent = parentId ? getParentById(parentId) : void 0;
   if (!parent) {
     return [{ label: "Page", onSelect: selectRoot }, { label: selectedType }];
   }
-  parent.type ?? "Component";
-  let parentSelector = void 0;
-  try {
-    parentSelector = getSelectorForId(parent.props?.id ?? "");
-  } catch {
-    parentSelector = void 0;
-  }
-  return [{ label: "Page", onSelect: selectRoot }, { label: selectedType }];
+  const parentType = getComponentTypeLabel(parent);
+  return [
+    { label: "Page", onSelect: selectRoot },
+    { label: parentType },
+    { label: selectedType }
+  ];
 }
 function FieldWrapper({
   children
@@ -863,7 +842,7 @@ function FieldWrapper({
   return /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 border-b", children: /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbList, { children: crumbs.map((crumb, i) => {
       const isLast = i === crumbs.length - 1;
-      return /* @__PURE__ */ jsxRuntime.jsxs(React18__namespace.Fragment, { children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs(React17__namespace.Fragment, { children: [
         i > 0 && /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, {}),
         /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { children: isLast ? /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbPage, { children: crumb.label }) : /* @__PURE__ */ jsxRuntime.jsx(
           BreadcrumbLink,
@@ -881,20 +860,33 @@ function FieldWrapper({
 function FieldLabel({
   children,
   label,
+  icon,
   labelIcon,
   el,
-  type: _type,
   readOnly,
   className
 }) {
-  console.log("Lable type", labelIcon);
   const El = el ?? "div";
+  const labelAdornment = icon ?? labelIcon;
   return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(El, { className: `flex flex-col gap-1.5 ${className ?? ""}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-      labelIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: labelIcon }),
+      labelAdornment && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: labelAdornment }),
       /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-xs font-medium text-muted-foreground", children: label }),
       label && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { className: "h-3 w-3 text-muted-foreground/60 cursor-help" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TooltipTrigger,
+          {
+            "aria-label": label,
+            render: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "inline-flex cursor-help items-center justify-center text-muted-foreground/60 transition-colors hover:text-muted-foreground"
+              }
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { className: "h-3 w-3 text-muted-foreground/60 cursor-help" })
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "right", children: label })
       ] }),
       readOnly && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto text-xs text-muted-foreground/50", children: "Read only" })
@@ -902,6 +894,50 @@ function FieldLabel({
     children
   ] }) });
 }
+var buttonVariants = classVarianceAuthority.cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline: "border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+        lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    button.Button,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
 var MOCK_VALUES = {
   default: ["AI-generated content", "Smart suggestion", "Generated text"]
 };
@@ -913,7 +949,7 @@ function getMock(instructions) {
   return pool[Math.floor(Math.random() * pool.length)];
 }
 function AiButton({ ai, onGenerate }) {
-  const [loading, setLoading] = React18__namespace.useState(false);
+  const [loading, setLoading] = React17__namespace.useState(false);
   const handleClick = () => {
     setLoading(true);
     setTimeout(() => {
@@ -944,13 +980,22 @@ function TextField({
   label,
   labelIcon
 }) {
-  const [local, setLocal] = React18__namespace.useState(value ?? "");
-  React18__namespace.useEffect(() => {
+  const [local, setLocal] = React17__namespace.useState(value ?? "");
+  const onChangeRef = React17__namespace.useRef(onChange);
+  const lastCommittedValueRef = React17__namespace.useRef(value ?? "");
+  React17__namespace.useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  React17__namespace.useEffect(() => {
+    lastCommittedValueRef.current = value ?? "";
     setLocal(value ?? "");
   }, [value]);
-  React18__namespace.useEffect(() => {
+  React17__namespace.useEffect(() => {
     const timer = setTimeout(() => {
-      if (local !== value) onChange(local);
+      if (local !== lastCommittedValueRef.current) {
+        onChangeRef.current(local);
+        lastCommittedValueRef.current = local;
+      }
     }, 200);
     return () => clearTimeout(timer);
   }, [local]);
@@ -965,10 +1010,17 @@ function TextField({
         className: "h-8 text-sm flex-1"
       }
     ),
-    field?.ai && /* @__PURE__ */ jsxRuntime.jsx(AiButton, { ai: field.ai, onGenerate: (v) => {
-      setLocal(v);
-      onChange(v);
-    } })
+    field?.ai && /* @__PURE__ */ jsxRuntime.jsx(
+      AiButton,
+      {
+        ai: field.ai,
+        onGenerate: (nextValue) => {
+          lastCommittedValueRef.current = nextValue;
+          setLocal(nextValue);
+          onChangeRef.current(nextValue);
+        }
+      }
+    )
   ] }) });
 }
 function Textarea({ className, ...props }) {
@@ -977,7 +1029,7 @@ function Textarea({ className, ...props }) {
     {
       "data-slot": "textarea",
       className: cn(
-        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
       ),
       ...props
@@ -985,11 +1037,11 @@ function Textarea({ className, ...props }) {
   );
 }
 function TextareaField({ value, onChange, readOnly, placeholder, label }) {
-  const [local, setLocal] = React18__namespace.useState(value ?? "");
-  React18__namespace.useEffect(() => {
+  const [local, setLocal] = React17__namespace.useState(value ?? "");
+  React17__namespace.useEffect(() => {
     setLocal(value ?? "");
   }, [value]);
-  React18__namespace.useEffect(() => {
+  React17__namespace.useEffect(() => {
     const timer = setTimeout(() => {
       if (local !== value) onChange(local);
     }, 200);
@@ -1007,11 +1059,11 @@ function TextareaField({ value, onChange, readOnly, placeholder, label }) {
   ) });
 }
 function NumberField({ value, onChange, readOnly, min, max, step, label }) {
-  const [local, setLocal] = React18__namespace.useState(String(value ?? ""));
-  React18__namespace.useEffect(() => {
+  const [local, setLocal] = React17__namespace.useState(String(value ?? ""));
+  React17__namespace.useEffect(() => {
     setLocal(String(value ?? ""));
   }, [value]);
-  React18__namespace.useEffect(() => {
+  React17__namespace.useEffect(() => {
     const parsed = parseFloat(local);
     if (!isNaN(parsed) && parsed !== value) {
       const timer = setTimeout(() => onChange(parsed), 200);
@@ -1065,7 +1117,7 @@ function SelectTrigger({
       "data-slot": "select-trigger",
       "data-size": size,
       className: cn(
-        "border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
@@ -1074,7 +1126,7 @@ function SelectTrigger({
         /* @__PURE__ */ jsxRuntime.jsx(
           select.Select.Icon,
           {
-            render: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: "text-muted-foreground size-4 pointer-events-none" })
+            render: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" })
           }
         )
       ]
@@ -1105,10 +1157,7 @@ function SelectContent({
         {
           "data-slot": "select-content",
           "data-align-trigger": alignItemWithTrigger,
-          className: cn(
-            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none",
-            className
-          ),
+          className: cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
           ...props,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(SelectScrollUpButton, {}),
@@ -1130,16 +1179,17 @@ function SelectItem({
     {
       "data-slot": "select-item",
       className: cn(
-        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(select.Select.ItemText, { className: "flex flex-1 gap-2 shrink-0 whitespace-nowrap", children }),
+        /* @__PURE__ */ jsxRuntime.jsx(select.Select.ItemText, { className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap", children }),
         /* @__PURE__ */ jsxRuntime.jsx(
           select.Select.ItemIndicator,
           {
-            render: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "pointer-events-none" }) })
+            render: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "pointer-events-none" })
           }
         )
       ]
@@ -1155,11 +1205,14 @@ function SelectScrollUpButton({
     {
       "data-slot": "select-scroll-up-button",
       className: cn(
-        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full",
+        "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUpIcon, {})
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        lucideReact.ChevronUpIcon,
+        {}
+      )
     }
   );
 }
@@ -1172,11 +1225,14 @@ function SelectScrollDownButton({
     {
       "data-slot": "select-scroll-down-button",
       className: cn(
-        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full",
+        "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, {})
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        lucideReact.ChevronDownIcon,
+        {}
+      )
     }
   );
 }
@@ -1198,12 +1254,12 @@ function SelectField({ field, value, onChange, id, readOnly, label }) {
   ) });
 }
 var buttonGroupVariants = classVarianceAuthority.cva(
-  "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
     variants: {
       orientation: {
-        horizontal: "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! *:data-slot:rounded-r-none [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
-        vertical: "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col *:data-slot:rounded-b-none [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0"
+        horizontal: "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+        vertical: "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0"
       }
     },
     defaultVariants: {
@@ -1222,7 +1278,7 @@ function ButtonGroup({
       role: "group",
       "data-slot": "button-group",
       "data-orientation": orientation,
-      className: cn2(buttonGroupVariants({ orientation }), className),
+      className: cn(buttonGroupVariants({ orientation }), className),
       ...props
     }
   );
@@ -1252,8 +1308,8 @@ function ItemGroup({ className, ...props }) {
     {
       role: "list",
       "data-slot": "item-group",
-      className: cn2(
-        "gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col",
+      className: cn(
+        "group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
         className
       ),
       ...props
@@ -1261,16 +1317,16 @@ function ItemGroup({ className, ...props }) {
   );
 }
 var itemVariants = classVarianceAuthority.cva(
-  "[a]:hover:bg-muted rounded-lg border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors",
+  "group/item flex w-full flex-wrap items-center rounded-md border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
   {
     variants: {
       variant: {
         default: "border-transparent",
         outline: "border-border",
-        muted: "bg-muted/50 border-transparent"
+        muted: "border-transparent bg-muted/50"
       },
       size: {
-        default: "gap-2.5 px-3 py-2.5",
+        default: "gap-3.5 px-4 py-3.5",
         sm: "gap-2.5 px-3 py-2.5",
         xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0"
       }
@@ -1292,7 +1348,7 @@ function Item({
     defaultTagName: "div",
     props: mergeProps.mergeProps(
       {
-        className: cn2(itemVariants({ variant, size, className }))
+        className: cn(itemVariants({ variant, size, className }))
       },
       props
     ),
@@ -1305,7 +1361,7 @@ function Item({
   });
 }
 classVarianceAuthority.cva(
-  "gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
+  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
   {
     variants: {
       variant: {
@@ -1324,8 +1380,8 @@ function ItemContent({ className, ...props }) {
     "div",
     {
       "data-slot": "item-content",
-      className: cn2(
-        "gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none",
+      className: cn(
+        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none",
         className
       ),
       ...props
@@ -1337,8 +1393,8 @@ function ItemTitle({ className, ...props }) {
     "div",
     {
       "data-slot": "item-title",
-      className: cn2(
-        "gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center",
+      className: cn(
+        "line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
         className
       ),
       ...props
@@ -1350,20 +1406,20 @@ function ItemActions({ className, ...props }) {
     "div",
     {
       "data-slot": "item-actions",
-      className: cn2("gap-2 flex items-center", className),
+      className: cn("flex items-center gap-2", className),
       ...props
     }
   );
 }
 function useControlledState(props) {
   const { value, defaultValue, onChange } = props;
-  const [state, setInternalState] = React18__namespace.useState(
+  const [state, setInternalState] = React17__namespace.useState(
     value !== void 0 ? value : defaultValue
   );
-  React18__namespace.useEffect(() => {
+  React17__namespace.useEffect(() => {
     if (value !== void 0) setInternalState(value);
   }, [value]);
-  const setState = React18__namespace.useCallback(
+  const setState = React17__namespace.useCallback(
     (next, ...args) => {
       setInternalState(next);
       onChange?.(next, ...args);
@@ -1476,6 +1532,9 @@ function PopoverPanel({
 function PopoverTitle2(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(PopoverTitle, { ...props });
 }
+function getArraySubField(subName, subField) {
+  return { ...subField, label: subField.label ?? subName };
+}
 function SortableItem({
   id,
   index,
@@ -1562,7 +1621,7 @@ function SortableItem({
         children: Object.entries(field.arrayFields).map(([subName, subField]) => /* @__PURE__ */ jsxRuntime.jsx(
           core.AutoField,
           {
-            field: { ...subField, label: subField.label ?? subName },
+            field: getArraySubField(subName, subField),
             value: item[subName],
             onChange: (val) => onUpdate(index, subName, val),
             readOnly,
@@ -1582,13 +1641,17 @@ function ArrayField({
   label,
   id = ""
 }) {
-  const atMax = field.max !== void 0 && value.length >= field.max;
-  const atMin = field.min !== void 0 && value.length <= field.min;
-  const [openIndex, setOpenIndex] = React18__namespace.useState(null);
-  const itemIds = React18__namespace.useMemo(
-    () => value.map((_, i) => `${id}-item-${i}`),
-    [value.length, id]
-  );
+  const [openIndex, setOpenIndex] = React17__namespace.useState(null);
+  const stableValue = React17__namespace.useMemo(() => {
+    const needsId = value.some((item) => !item._id);
+    if (!needsId) return value;
+    return value.map(
+      (item) => item._id ? item : { ...item, _id: `${id}-${Math.random().toString(36).slice(2)}` }
+    );
+  }, [value, id]);
+  const itemIds = stableValue.map((item) => item._id);
+  const atMax = field.max !== void 0 && stableValue.length >= field.max;
+  const atMin = field.min !== void 0 && stableValue.length <= field.min;
   const sensors = core$1.useSensors(core$1.useSensor(core$1.PointerSensor));
   const handleDragEnd = (event) => {
     const { active, over } = event;
@@ -1596,7 +1659,7 @@ function ArrayField({
     const from = itemIds.indexOf(active.id);
     const to = itemIds.indexOf(over.id);
     if (from === -1 || to === -1) return;
-    onChange(sortable.arrayMove(value, from, to));
+    onChange(sortable.arrayMove(stableValue, from, to));
   };
   const defaultItem = () => {
     if (!field.defaultItemProps) return {};
@@ -1604,33 +1667,35 @@ function ArrayField({
   };
   const addItem = () => {
     if (atMax || readOnly) return;
-    const newIndex = value.length;
-    onChange([...value, defaultItem()]);
+    const newIndex = stableValue.length;
+    onChange([...stableValue, defaultItem()]);
     setOpenIndex(newIndex);
   };
   const removeItem = (i) => {
     if (atMin || readOnly) return;
-    const next = [...value];
+    const next = [...stableValue];
     next.splice(i, 1);
     onChange(next);
   };
   const duplicateItem = (i) => {
     if (atMax || readOnly) return;
-    const next = [...value];
-    next.splice(i + 1, 0, { ...value[i] });
+    const next = [...stableValue];
+    next.splice(i + 1, 0, { ...stableValue[i] });
     onChange(next);
   };
   const updateItem = (i, subName, val) => {
     onChange(
-      value.map(
+      stableValue.map(
         (item, idx) => idx === i ? { ...item, [subName]: val } : item
       )
     );
   };
   const getSummary = (item, i) => {
     if (field.getItemSummary) return field.getItemSummary(item, i);
-    const first = Object.values(item).find((v) => typeof v === "string" && v);
-    return first || `Item ${i + 1}`;
+    const first = Object.entries(item).find(
+      (entry) => entry[0] !== "_id" && typeof entry[1] === "string" && entry[1].length > 0
+    );
+    return first?.[1] ?? `Item ${i + 1}`;
   };
   return /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label: label ?? field.label ?? "", readOnly, el: "div", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -1644,7 +1709,7 @@ function ArrayField({
           {
             items: itemIds,
             strategy: sortable.verticalListSortingStrategy,
-            children: /* @__PURE__ */ jsxRuntime.jsx(ItemGroup, { children: value.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            children: /* @__PURE__ */ jsxRuntime.jsx(ItemGroup, { children: stableValue.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
               SortableItem,
               {
                 id: itemIds[i],
@@ -1697,7 +1762,7 @@ function Card({
       "data-slot": "card",
       "data-size": size,
       className: cn(
-        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        "group/card flex flex-col gap-6 overflow-hidden rounded-xl bg-card py-6 text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
         className
       ),
       ...props
@@ -1709,7 +1774,7 @@ function CardContent({ className, ...props }) {
     "div",
     {
       "data-slot": "card-content",
-      className: cn("px-4 group-data-[size=sm]/card:px-3", className),
+      className: cn("px-6 group-data-[size=sm]/card:px-4", className),
       ...props
     }
   );
@@ -1721,17 +1786,17 @@ function CustomField({ children, label }) {
   return /* @__PURE__ */ jsxRuntime.jsx(FieldLabel, { label: label ?? "", el: "div", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-border/60 p-3", children }) });
 }
 var toggleVariants = classVarianceAuthority.cva(
-  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
         default: "bg-transparent",
-        outline: "border border-input bg-transparent hover:bg-muted"
+        outline: "border border-input bg-transparent shadow-xs hover:bg-muted"
       },
       size: {
-        default: "h-8 min-w-8 px-2",
-        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]",
-        lg: "h-9 min-w-9 px-2.5"
+        default: "h-9 min-w-9 px-2",
+        sm: "h-8 min-w-8 px-1.5",
+        lg: "h-10 min-w-10 px-2.5"
       }
     },
     defaultVariants: {
@@ -1756,12 +1821,12 @@ function Toggle({
   );
 }
 function RichtextField({ value, onChange, readOnly, label }) {
-  const ref = React18__namespace.useRef(null);
+  const ref = React17__namespace.useRef(null);
   const boldLabel = useMsg("richtext.bold");
   const italicLabel = useMsg("richtext.italic");
   const linkLabel = useMsg("richtext.link");
   const linkPrompt = useMsg("richtext.link.prompt");
-  React18__namespace.useEffect(() => {
+  React17__namespace.useEffect(() => {
     if (ref.current && ref.current.innerHTML !== value) {
       ref.current.innerHTML = value ?? "";
     }
@@ -1808,17 +1873,7 @@ function InputGroup({ className, ...props }) {
       "data-slot": "input-group",
       role: "group",
       className: cn(
-        "group/input-group border-input dark:bg-input/30 shadow-xs relative flex w-full items-center rounded-md border outline-none transition-[color,box-shadow]",
-        "h-9 has-[>textarea]:h-auto",
-        // Variants based on alignment.
-        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
-        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
-        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
-        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
-        // Focus state.
-        "has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1",
-        // Error state.
-        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+        "group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
         className
       ),
       ...props
@@ -1826,14 +1881,14 @@ function InputGroup({ className, ...props }) {
   );
 }
 var inputGroupAddonVariants = classVarianceAuthority.cva(
-  "text-muted-foreground flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
   {
     variants: {
       align: {
-        "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
-        "inline-end": "order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]",
-        "block-start": "[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5",
-        "block-end": "[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5"
+        "inline-start": "order-first pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]",
+        "inline-end": "order-last pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]",
+        "block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+        "block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2"
       }
     },
     defaultVariants: {
@@ -1868,8 +1923,8 @@ classVarianceAuthority.cva(
   {
     variants: {
       size: {
-        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
-        sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "",
         "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
         "icon-sm": "size-8 p-0 has-[>svg]:p-0"
       }
@@ -1953,7 +2008,7 @@ function CommandItem({
     {
       "data-slot": "command-item",
       className: cn(
-        "group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
+        "group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:**:[svg]:text-foreground",
         className
       ),
       ...props,
@@ -1975,10 +2030,10 @@ function Skeleton({ className, ...props }) {
   );
 }
 function ExternalField({ value, onChange, fetchList, readOnly, label }) {
-  const [query, setQuery] = React18__namespace.useState("");
-  const [results, setResults] = React18__namespace.useState([]);
-  const [loading, setLoading] = React18__namespace.useState(false);
-  React18__namespace.useEffect(() => {
+  const [query, setQuery] = React17__namespace.useState("");
+  const [results, setResults] = React17__namespace.useState([]);
+  const [loading, setLoading] = React17__namespace.useState(false);
+  React17__namespace.useEffect(() => {
     if (!fetchList) return;
     setLoading(true);
     const timer = setTimeout(async () => {
@@ -2024,7 +2079,7 @@ function ExternalField({ value, onChange, fetchList, readOnly, label }) {
   ] }) });
 }
 
-// src/components/overrides/fields/FieldTypesRegistry.ts
+// src/core/overrides/fields/FieldTypesRegistry.ts
 var fieldTypesRegistry = {
   text: TextField,
   textarea: TextareaField,
@@ -2042,8 +2097,6 @@ function PuckRoot({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 }
 var puckOverrides = {
-  header: EditorHeader,
-  headerActions: EditorHeaderActions,
   drawer: EditorDrawer,
   components: EditorComponents,
   drawerItem: DrawerItem,
@@ -2063,9 +2116,9 @@ var DEFAULT_BOUNDS_OFFSET = {
   width: 0,
   height: 0
 };
-var HighlightContext = React18__namespace.createContext(void 0);
+var HighlightContext = React17__namespace.createContext(void 0);
 function useHighlight() {
-  const context = React18__namespace.useContext(HighlightContext);
+  const context = React17__namespace.useContext(HighlightContext);
   if (!context) {
     throw new Error("useHighlight must be used within a HighlightProvider");
   }
@@ -2092,21 +2145,21 @@ function Highlight({
     exitDelay = 200,
     mode = "children"
   } = props;
-  const localRef = React18__namespace.useRef(null);
-  React18__namespace.useImperativeHandle(ref, () => localRef.current);
+  const localRef = React17__namespace.useRef(null);
+  React17__namespace.useImperativeHandle(ref, () => localRef.current);
   const propsBoundsOffset = props?.boundsOffset;
   const boundsOffset = propsBoundsOffset ?? DEFAULT_BOUNDS_OFFSET;
   const boundsOffsetTop = boundsOffset.top ?? 0;
   const boundsOffsetLeft = boundsOffset.left ?? 0;
   const boundsOffsetWidth = boundsOffset.width ?? 0;
   const boundsOffsetHeight = boundsOffset.height ?? 0;
-  const boundsOffsetRef = React18__namespace.useRef({
+  const boundsOffsetRef = React17__namespace.useRef({
     top: boundsOffsetTop,
     left: boundsOffsetLeft,
     width: boundsOffsetWidth,
     height: boundsOffsetHeight
   });
-  React18__namespace.useEffect(() => {
+  React17__namespace.useEffect(() => {
     boundsOffsetRef.current = {
       top: boundsOffsetTop,
       left: boundsOffsetLeft,
@@ -2119,11 +2172,11 @@ function Highlight({
     boundsOffsetWidth,
     boundsOffsetHeight
   ]);
-  const [activeValue, setActiveValue] = React18__namespace.useState(
+  const [activeValue, setActiveValue] = React17__namespace.useState(
     value ?? defaultValue ?? null
   );
-  const [boundsState, setBoundsState] = React18__namespace.useState(null);
-  const [activeClassNameState, setActiveClassNameState] = React18__namespace.useState("");
+  const [boundsState, setBoundsState] = React17__namespace.useState(null);
+  const [activeClassNameState, setActiveClassNameState] = React17__namespace.useState("");
   const safeSetActiveValue = (id2) => {
     setActiveValue((prev) => {
       if (prev !== id2) {
@@ -2133,8 +2186,8 @@ function Highlight({
       return prev;
     });
   };
-  const safeSetBoundsRef = React18__namespace.useRef(void 0);
-  React18__namespace.useEffect(() => {
+  const safeSetBoundsRef = React17__namespace.useRef(void 0);
+  React17__namespace.useEffect(() => {
     safeSetBoundsRef.current = (bounds) => {
       if (!localRef.current) return;
       const containerRect = localRef.current.getBoundingClientRect();
@@ -2156,15 +2209,15 @@ function Highlight({
   const safeSetBounds = (bounds) => {
     safeSetBoundsRef.current?.(bounds);
   };
-  const clearBounds = React18__namespace.useCallback(() => {
+  const clearBounds = React17__namespace.useCallback(() => {
     setBoundsState((prev) => prev === null ? prev : null);
   }, []);
-  React18__namespace.useEffect(() => {
+  React17__namespace.useEffect(() => {
     if (value !== void 0) setActiveValue(value);
     else if (defaultValue !== void 0) setActiveValue(defaultValue);
   }, [value, defaultValue]);
-  const id = React18__namespace.useId();
-  React18__namespace.useEffect(() => {
+  const id = React17__namespace.useId();
+  React17__namespace.useEffect(() => {
     if (mode !== "parent") return;
     const container = localRef.current;
     if (!container) return;
@@ -2249,7 +2302,7 @@ function Highlight({
         forceUpdateBounds: props?.forceUpdateBounds
       },
       children: enabled ? controlledItems ? render(children) : render(
-        React18__namespace.Children.map(children, (child, index) => /* @__PURE__ */ jsxRuntime.jsx(HighlightItem, { className: props?.itemsClassName, children: child }, index))
+        React17__namespace.Children.map(children, (child, index) => /* @__PURE__ */ jsxRuntime.jsx(HighlightItem, { className: props?.itemsClassName, children: child }, index))
       ) : children
     }
   );
@@ -2281,7 +2334,7 @@ function HighlightItem({
   forceUpdateBounds,
   ...props
 }) {
-  const itemId = React18__namespace.useId();
+  const itemId = React17__namespace.useId();
   const {
     activeValue,
     setActiveValue,
@@ -2306,12 +2359,12 @@ function HighlightItem({
   const isActive = activeValue === childValue;
   const isDisabled = disabled === void 0 ? contextDisabled : disabled;
   const itemTransition = transition ?? contextTransition;
-  const localRef = React18__namespace.useRef(null);
-  React18__namespace.useImperativeHandle(ref, () => localRef.current);
-  const refCallback = React18__namespace.useCallback((node) => {
+  const localRef = React17__namespace.useRef(null);
+  React17__namespace.useImperativeHandle(ref, () => localRef.current);
+  const refCallback = React17__namespace.useCallback((node) => {
     localRef.current = node;
   }, []);
-  React18__namespace.useEffect(() => {
+  React17__namespace.useEffect(() => {
     if (mode !== "parent") return;
     let rafId;
     let previousBounds = null;
@@ -2345,7 +2398,7 @@ function HighlightItem({
     forceUpdateBounds,
     contextForceUpdateBounds
   ]);
-  if (!React18__namespace.isValidElement(children)) return children;
+  if (!React17__namespace.isValidElement(children)) return children;
   const dataAttributes = {
     "data-active": isActive ? "true" : "false",
     "aria-selected": isActive,
@@ -2370,7 +2423,7 @@ function HighlightItem({
   } : {};
   if (asChild) {
     if (mode === "children") {
-      return React18__namespace.cloneElement(
+      return React17__namespace.cloneElement(
         element,
         {
           key: childValue,
@@ -2422,7 +2475,7 @@ function HighlightItem({
         ] })
       );
     }
-    return React18__namespace.cloneElement(element, {
+    return React17__namespace.cloneElement(element, {
       ref: refCallback,
       ...getNonOverridingDataAttributes(element, {
         ...dataAttributes,
@@ -2466,7 +2519,7 @@ function HighlightItem({
             ...dataAttributes
           }
         ) }),
-        React18__namespace.cloneElement(element, {
+        React17__namespace.cloneElement(element, {
           style: { position: "relative", zIndex: 1 },
           className: element.props.className,
           ...getNonOverridingDataAttributes(element, {
@@ -2513,11 +2566,11 @@ function Slot({
   ...props
 }) {
   const isAlreadyMotion = typeof children.type === "object" && children.type !== null && react.isMotionComponent(children.type);
-  const Base = React18__namespace.useMemo(
+  const Base = React17__namespace.useMemo(
     () => isAlreadyMotion ? children.type : react.motion.create(children.type),
     [isAlreadyMotion, children.type]
   );
-  if (!React18__namespace.isValidElement(children)) return null;
+  if (!React17__namespace.isValidElement(children)) return null;
   const { ref: childRef, ...childProps } = children.props;
   const mergedProps = mergeProps4(childProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(Base, { ...mergedProps, ref: mergeRefs(childRef, ref) });
@@ -2597,6 +2650,52 @@ function TabsTab2({ className, ...props }) {
     }
   ) });
 }
+var ACTIVE_TABS = [
+  "insert",
+  "layer",
+  "image",
+  "text",
+  "copilot"
+];
+var activeTabSet = new Set(ACTIVE_TABS);
+function isActiveTab(value) {
+  return activeTabSet.has(value);
+}
+function createEditorUiStore(storeId) {
+  return zustand.createStore()(
+    middleware.persist(
+      (set) => ({
+        drawerSearch: "",
+        setDrawerSearch: (q) => set({ drawerSearch: q }),
+        drawerCollapsed: {},
+        toggleDrawerGroup: (group) => set((s) => ({
+          drawerCollapsed: { ...s.drawerCollapsed, [group]: !s.drawerCollapsed[group] }
+        })),
+        activeTab: "insert",
+        setActiveTab: (tab) => set({ activeTab: tab }),
+        outlineExpanded: {},
+        toggleOutlineItem: (id) => set((s) => ({
+          outlineExpanded: { ...s.outlineExpanded, [id]: !s.outlineExpanded[id] }
+        })),
+        theme: "light",
+        toggleTheme: () => set((s) => {
+          const next = s.theme === "light" ? "dark" : "light";
+          return { theme: next };
+        })
+      }),
+      {
+        name: `anvilkit-ui-${storeId}`,
+        partialize: (s) => ({
+          activeTab: s.activeTab,
+          drawerCollapsed: s.drawerCollapsed,
+          outlineExpanded: s.outlineExpanded,
+          theme: s.theme
+          // drawerSearch intentionally excluded — transient input
+        })
+      }
+    )
+  );
+}
 function Aside() {
   const activeTab = useActiveTab();
   const setActiveTab = useSetActiveTab();
@@ -2607,10 +2706,35 @@ function Aside() {
     { value: "text", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Type, { className: "h-4 w-4" }), label: useMsg("aside.text") },
     { value: "copilot", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bot, { className: "h-4 w-4" }), label: useMsg("aside.copilot") }
   ];
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-18 h-full py-4 border-r border-neutral-200 dark:border-neutral-800/80", children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(Tabs2, { value: activeTab, onValueChange: setActiveTab, className: "w-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(TabsList2, { className: "flex-col h-auto bg-transparent gap-2", children: tabs.map(({ value, icon, label }) => /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(TabsTab2, { value, className: "p-2", children: icon }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "right", children: label })
-  ] }, value)) }) }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-18 h-full py-4 border-r border-neutral-200 dark:border-neutral-800/80", children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    Tabs2,
+    {
+      value: activeTab,
+      onValueChange: (value) => {
+        if (isActiveTab(value)) {
+          setActiveTab(value);
+        }
+      },
+      className: "w-full flex items-center justify-center",
+      children: /* @__PURE__ */ jsxRuntime.jsx(TabsList2, { className: "flex-col h-auto bg-transparent gap-2", children: tabs.map(({ value, icon, label }) => /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TooltipTrigger,
+          {
+            render: /* @__PURE__ */ jsxRuntime.jsx(
+              TabsTab2,
+              {
+                value,
+                className: "p-2",
+                "aria-label": label
+              }
+            ),
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "right", children: label })
+      ] }, value)) })
+    }
+  ) }) });
 }
 function AnimatedAsana({
   trigger = false,
@@ -2627,15 +2751,15 @@ function AnimatedAsana({
   // Default non-priority
   ...props
 }) {
-  const [isHovered, setIsHovered] = React18.useState(false);
-  const [animationPhase, setAnimationPhase] = React18.useState("three-circles");
-  const animationTimerRef = React18.useRef(null);
-  const animationStartedRef = React18.useRef(false);
-  const effectiveTrigger = React18.useMemo(
+  const [isHovered, setIsHovered] = React17.useState(false);
+  const [animationPhase, setAnimationPhase] = React17.useState("three-circles");
+  const animationTimerRef = React17.useRef(null);
+  const animationStartedRef = React17.useRef(false);
+  const effectiveTrigger = React17.useMemo(
     () => trigger || useTrigger && isHovered,
     [trigger, useTrigger, isHovered]
   );
-  const springTransition = React18.useMemo(
+  const springTransition = React17.useMemo(
     () => ({
       type: "spring",
       stiffness: springConfig.stiffness,
@@ -2644,17 +2768,17 @@ function AnimatedAsana({
     }),
     [springConfig.stiffness, springConfig.damping, springConfig.mass]
   );
-  const handleMouseEnter = React18.useCallback(() => {
+  const handleMouseEnter = React17.useCallback(() => {
     if (useTrigger) {
       setIsHovered(true);
     }
   }, [useTrigger]);
-  const handleMouseLeave = React18.useCallback(() => {
+  const handleMouseLeave = React17.useCallback(() => {
     if (useTrigger) {
       setIsHovered(false);
     }
   }, [useTrigger]);
-  React18.useEffect(() => {
+  React17.useEffect(() => {
     if (animationTimerRef.current) {
       clearTimeout(animationTimerRef.current);
       animationTimerRef.current = null;
@@ -2677,14 +2801,14 @@ function AnimatedAsana({
       }
     };
   }, [effectiveTrigger, animationDuration]);
-  const centerCircleAnimation = React18.useMemo(
+  const centerCircleAnimation = React17.useMemo(
     () => ({
       opacity: animationPhase === "one-circle" ? 1 : 0,
       scale: animationPhase === "one-circle" ? 1 : 0
     }),
     [animationPhase]
   );
-  const topCircleAnimation = React18.useMemo(
+  const topCircleAnimation = React17.useMemo(
     () => ({
       opacity: animationPhase === "three-circles" ? 1 : 0,
       y: animationPhase === "three-circles" ? 0 : 4.5,
@@ -2692,7 +2816,7 @@ function AnimatedAsana({
     }),
     [animationPhase]
   );
-  const leftBottomCircleAnimation = React18.useMemo(
+  const leftBottomCircleAnimation = React17.useMemo(
     () => ({
       opacity: animationPhase === "three-circles" ? 1 : 0,
       x: animationPhase === "three-circles" ? 0 : 5,
@@ -2701,7 +2825,7 @@ function AnimatedAsana({
     }),
     [animationPhase]
   );
-  const rightBottomCircleAnimation = React18.useMemo(
+  const rightBottomCircleAnimation = React17.useMemo(
     () => ({
       opacity: animationPhase === "three-circles" ? 1 : 0,
       x: animationPhase === "three-circles" ? 0 : -5,
@@ -2802,10 +2926,10 @@ function AnimatedAsana({
     }
   );
 }
-React18__namespace.default.memo(function TriggerableAsana2(props) {
+React17__namespace.default.memo(function TriggerableAsana2(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(AnimatedAsana, { useTrigger: true, ...props });
 });
-React18__namespace.default.memo(function ControlledAsana2(props) {
+React17__namespace.default.memo(function ControlledAsana2(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(AnimatedAsana, { useTrigger: false, ...props });
 });
 var [GlobalTooltipProvider, useGlobalTooltip] = getStrictContext("GlobalTooltipProvider");
@@ -2831,12 +2955,12 @@ function TooltipProvider2({
   closeDelay = 300,
   transition = { type: "spring", stiffness: 300, damping: 35 }
 }) {
-  const globalId = React18__namespace.useId();
-  const [currentTooltip, setCurrentTooltip] = React18__namespace.useState(null);
-  const timeoutRef = React18__namespace.useRef(null);
-  const lastCloseTimeRef = React18__namespace.useRef(0);
-  const referenceElRef = React18__namespace.useRef(null);
-  const showTooltip = React18__namespace.useCallback(
+  const globalId = React17__namespace.useId();
+  const [currentTooltip, setCurrentTooltip] = React17__namespace.useState(null);
+  const timeoutRef = React17__namespace.useRef(null);
+  const lastCloseTimeRef = React17__namespace.useRef(0);
+  const referenceElRef = React17__namespace.useRef(null);
+  const showTooltip = React17__namespace.useCallback(
     (data) => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
       if (currentTooltip !== null) {
@@ -2852,22 +2976,22 @@ function TooltipProvider2({
     },
     [openDelay, closeDelay, currentTooltip]
   );
-  const hideTooltip = React18__namespace.useCallback(() => {
+  const hideTooltip = React17__namespace.useCallback(() => {
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     timeoutRef.current = window.setTimeout(() => {
       setCurrentTooltip(null);
       lastCloseTimeRef.current = Date.now();
     }, closeDelay);
   }, [closeDelay]);
-  const hideImmediate = React18__namespace.useCallback(() => {
+  const hideImmediate = React17__namespace.useCallback(() => {
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     setCurrentTooltip(null);
     lastCloseTimeRef.current = Date.now();
   }, []);
-  const setReferenceEl = React18__namespace.useCallback((el) => {
+  const setReferenceEl = React17__namespace.useCallback((el) => {
     referenceElRef.current = el;
   }, []);
-  React18__namespace.useEffect(() => {
+  React17__namespace.useEffect(() => {
     const onKeyDown = (e) => {
       if (e.key === "Escape") hideImmediate();
     };
@@ -2911,7 +3035,7 @@ function TooltipArrow({
   const { side, align, open } = useRenderedTooltip();
   const { context, arrowRef } = useFloatingContext();
   const { transition, globalId } = useGlobalTooltip();
-  React18__namespace.useImperativeHandle(ref, () => arrowRef.current);
+  React17__namespace.useImperativeHandle(ref, () => arrowRef.current);
   const deg = { top: 0, right: 90, bottom: 180, left: -90 }[side];
   return /* @__PURE__ */ jsxRuntime.jsx(
     MotionTooltipArrow,
@@ -2934,8 +3058,8 @@ function TooltipPortal(props) {
 }
 function TooltipOverlay() {
   const { currentTooltip, transition, globalId, referenceElRef } = useGlobalTooltip();
-  const [rendered, setRendered] = React18__namespace.useState({ data: null, open: false });
-  const arrowRef = React18__namespace.useRef(null);
+  const [rendered, setRendered] = React17__namespace.useState({ data: null, open: false });
+  const arrowRef = React17__namespace.useRef(null);
   const side = rendered.data?.side ?? "top";
   const align = rendered.data?.align ?? "center";
   const { refs, x, y, strategy, context, update } = react$1.useFloating({
@@ -2951,14 +3075,14 @@ function TooltipOverlay() {
       react$1.arrow({ element: arrowRef })
     ]
   });
-  React18__namespace.useEffect(() => {
+  React17__namespace.useEffect(() => {
     if (currentTooltip) {
       setRendered({ data: currentTooltip, open: true });
     } else {
       setRendered((p) => p.data ? { ...p, open: false } : p);
     }
   }, [currentTooltip]);
-  React18__namespace.useLayoutEffect(() => {
+  React17__namespace.useLayoutEffect(() => {
     if (referenceElRef.current) {
       refs.setReference(referenceElRef.current);
       update();
@@ -3037,9 +3161,9 @@ function Tooltip2({
   align = "center",
   alignOffset = 0
 }) {
-  const id = React18__namespace.useId();
-  const [props, setProps] = React18__namespace.useState({});
-  const [asChild, setAsChild] = React18__namespace.useState(false);
+  const id = React17__namespace.useId();
+  const [props, setProps] = React17__namespace.useState({});
+  const [asChild, setAsChild] = React17__namespace.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsx(
     LocalTooltipProvider,
     {
@@ -3071,16 +3195,16 @@ function shallowEqualWithoutChildren(a, b) {
 }
 function TooltipContent2({ asChild = false, ...props }) {
   const { setProps, setAsChild } = useTooltip();
-  const lastPropsRef = React18__namespace.useRef(
+  const lastPropsRef = React17__namespace.useRef(
     void 0
   );
-  React18__namespace.useEffect(() => {
+  React17__namespace.useEffect(() => {
     if (!shallowEqualWithoutChildren(lastPropsRef.current, props)) {
       lastPropsRef.current = props;
       setProps(props);
     }
   }, [props, setProps]);
-  React18__namespace.useEffect(() => {
+  React17__namespace.useEffect(() => {
     setAsChild(asChild);
   }, [asChild, setAsChild]);
   return null;
@@ -3111,10 +3235,10 @@ function TooltipTrigger2({
     currentTooltip,
     setReferenceEl
   } = useGlobalTooltip();
-  const triggerRef = React18__namespace.useRef(null);
-  React18__namespace.useImperativeHandle(ref, () => triggerRef.current);
-  const suppressNextFocusRef = React18__namespace.useRef(false);
-  const handleOpen = React18__namespace.useCallback(() => {
+  const triggerRef = React17__namespace.useRef(null);
+  React17__namespace.useImperativeHandle(ref, () => triggerRef.current);
+  const suppressNextFocusRef = React17__namespace.useRef(false);
+  const handleOpen = React17__namespace.useCallback(() => {
     if (!triggerRef.current) return;
     setReferenceEl(triggerRef.current);
     const rect = triggerRef.current.getBoundingClientRect();
@@ -3139,7 +3263,7 @@ function TooltipTrigger2({
     alignOffset,
     id
   ]);
-  const handlePointerDown = React18__namespace.useCallback(
+  const handlePointerDown = React17__namespace.useCallback(
     (e) => {
       onPointerDown?.(e);
       if (currentTooltip?.id === id) {
@@ -3152,21 +3276,21 @@ function TooltipTrigger2({
     },
     [onPointerDown, currentTooltip?.id, id, hideImmediate]
   );
-  const handleMouseEnter = React18__namespace.useCallback(
+  const handleMouseEnter = React17__namespace.useCallback(
     (e) => {
       onMouseEnter?.(e);
       handleOpen();
     },
     [handleOpen, onMouseEnter]
   );
-  const handleMouseLeave = React18__namespace.useCallback(
+  const handleMouseLeave = React17__namespace.useCallback(
     (e) => {
       onMouseLeave?.(e);
       hideTooltip();
     },
     [hideTooltip, onMouseLeave]
   );
-  const handleFocus = React18__namespace.useCallback(
+  const handleFocus = React17__namespace.useCallback(
     (e) => {
       onFocus?.(e);
       if (suppressNextFocusRef.current) return;
@@ -3174,7 +3298,7 @@ function TooltipTrigger2({
     },
     [handleOpen, onFocus]
   );
-  const handleBlur = React18__namespace.useCallback(
+  const handleBlur = React17__namespace.useCallback(
     (e) => {
       onBlur?.(e);
       hideTooltip();
@@ -3276,7 +3400,7 @@ function AvatarGroup({
           children: children?.map((child, index) => /* @__PURE__ */ jsxRuntime.jsx(
             AvatarContainer,
             {
-              zIndex: invertOverlap ? React18__namespace.Children.count(children) - index : index,
+              zIndex: invertOverlap ? React17__namespace.Children.count(children) - index : index,
               transition,
               translate,
               side,
@@ -3327,7 +3451,7 @@ function AvatarGroupTooltip2({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(motion9__namespace.div, { layout, className: "overflow-hidden", children }),
+        /* @__PURE__ */ jsxRuntime.jsx(motion8__namespace.div, { layout, className: "overflow-hidden", children }),
         /* @__PURE__ */ jsxRuntime.jsx(
           AvatarGroupTooltipArrow,
           {
@@ -3350,7 +3474,7 @@ function Avatar({
       "data-slot": "avatar",
       "data-size": size,
       className: cn(
-        "size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten",
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
         className
       ),
       ...props
@@ -3363,7 +3487,7 @@ function AvatarImage({ className, ...props }) {
     {
       "data-slot": "avatar-image",
       className: cn(
-        "rounded-full aspect-square size-full object-cover",
+        "aspect-square size-full rounded-full object-cover",
         className
       ),
       ...props
@@ -3379,7 +3503,7 @@ function AvatarFallback({
     {
       "data-slot": "avatar-fallback",
       className: cn(
-        "bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs",
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
         className
       ),
       ...props
@@ -3406,8 +3530,8 @@ var Collaborators = () => {
   ] }, index)) });
 };
 var Share = () => {
-  const [access, setAccess] = React18__namespace.useState("private");
-  const [copied, setCopied] = React18__namespace.useState(false);
+  const [access, setAccess] = React17__namespace.useState("private");
+  const [copied, setCopied] = React17__namespace.useState(false);
   const shareUrl = typeof window !== "undefined" ? window.location.href : "";
   const shareButton = useMsg("share.button");
   const shareTitle = useMsg("share.title");
@@ -3520,6 +3644,78 @@ var CollaboratorsPopover = () => {
     ] })
   ] });
 };
+
+// src/features/export/export-json.ts
+function getFilename(filenameBase) {
+  const safeBase = filenameBase?.trim() || "page";
+  return `${safeBase}.json`;
+}
+function exportDataAsJson(data, { filenameBase, document: targetDocument } = {}) {
+  const resolvedDocument = targetDocument ?? (typeof document !== "undefined" ? document : void 0);
+  if (!resolvedDocument) return;
+  const blob = new Blob([JSON.stringify(data, null, 2)], {
+    type: "application/json"
+  });
+  const url = URL.createObjectURL(blob);
+  const link = resolvedDocument.createElement("a");
+  link.href = url;
+  link.download = getFilename(filenameBase);
+  link.click();
+  URL.revokeObjectURL(url);
+}
+function DropdownMenu({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    menu.Menu.Positioner,
+    {
+      className: "isolate z-50 outline-none",
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        menu.Menu.Popup,
+        {
+          "data-slot": "dropdown-menu-content",
+          className: cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className),
+          ...props
+        }
+      )
+    }
+  ) });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    menu.Menu.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+}
 var Header = () => {
   const { history, appState } = core.usePuck();
   const publish = useMsg("header.publish");
@@ -3534,9 +3730,7 @@ var Header = () => {
   const themeLightLabel = useMsg("header.theme.light");
   const themeDarkLabel = useMsg("header.theme.dark");
   const themeLabel = theme === "dark" ? themeLightLabel : themeDarkLabel;
-  React18__namespace.useEffect(() => {
-    document.documentElement.classList.toggle("dark", theme === "dark");
-  }, []);
+  useThemeSync();
   return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex overflow-hidden transition-all duration-300 backdrop-blur-xl w-full border-b border-neutral-200 dark:border-neutral-800 items-center h-[54px] py-0", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-18 flex items-center justify-center h-full border-r border-neutral-200 dark:border-neutral-800/80", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-10 h-10 bg-primary rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedAsana, { className: "text-white text-2xl" }) }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-1 w-full px-2", children: [
@@ -3544,31 +3738,41 @@ var Header = () => {
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none text-sm font-medium", children: appState?.data?.root?.props?.title || "" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 h-full ml-auto", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TooltipTrigger,
             {
-              variant: "ghost",
-              size: "icon",
-              disabled: !history.hasPast,
-              onClick: () => history.back(),
-              "aria-label": undo,
+              render: /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  disabled: !history.hasPast,
+                  onClick: () => history.back(),
+                  "aria-label": undo
+                }
+              ),
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Undo2, { className: "h-4 w-4" })
             }
-          ) }),
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: undoTooltip })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TooltipTrigger,
             {
-              variant: "ghost",
-              size: "icon",
-              disabled: !history.hasFuture,
-              onClick: () => history.forward(),
-              "aria-label": redo,
+              render: /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  disabled: !history.hasFuture,
+                  onClick: () => history.forward(),
+                  "aria-label": redo
+                }
+              ),
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Redo2, { className: "h-4 w-4" })
             }
-          ) }),
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: redoTooltip })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", className: "h-5 mx-1" }),
@@ -3578,21 +3782,34 @@ var Header = () => {
         /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", className: "h-5 mx-1" }),
         /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { render: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", "aria-label": exportLabel }), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-4 w-4" }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              TooltipTrigger,
+              {
+                render: /* @__PURE__ */ jsxRuntime.jsx(
+                  DropdownMenuTrigger,
+                  {
+                    render: /* @__PURE__ */ jsxRuntime.jsx(
+                      Button,
+                      {
+                        variant: "ghost",
+                        size: "icon",
+                        "aria-label": exportLabel
+                      }
+                    )
+                  }
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-4 w-4" })
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: exportLabel })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "end", children: /* @__PURE__ */ jsxRuntime.jsxs(
             DropdownMenuItem,
             {
               onClick: () => {
-                const json = JSON.stringify(appState.data, null, 2);
-                const blob = new Blob([json], { type: "application/json" });
-                const url = URL.createObjectURL(blob);
-                const a = document.createElement("a");
-                a.href = url;
-                a.download = `${appState.data.root?.props?.title || "page"}.json`;
-                a.click();
-                URL.revokeObjectURL(url);
+                exportDataAsJson(appState.data, {
+                  filenameBase: appState.data.root?.props?.title
+                });
               },
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileDown, { className: "h-4 w-4" }),
@@ -3604,21 +3821,79 @@ var Header = () => {
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", className: "h-5 mx-1" }),
         /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", onClick: toggleTheme, "aria-label": themeLabel, children: theme === "dark" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { className: "h-4 w-4" }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TooltipTrigger,
+            {
+              render: /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  onClick: toggleTheme,
+                  "aria-label": themeLabel
+                }
+              ),
+              children: theme === "dark" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { className: "h-4 w-4" })
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: themeLabel })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", className: "h-5 mx-1" }),
         /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { size: "sm", "aria-label": publish, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "h-4 w-4" }),
-            publish
-          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            TooltipTrigger,
+            {
+              render: /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", "aria-label": publish }),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "h-4 w-4" }),
+                publish
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: publish })
         ] })
       ] })
     ] })
   ] }) });
 };
+function useGhostDrag({ createGhostEl }) {
+  const ghostRef = React17__namespace.useRef(null);
+  function moveGhost(x, y) {
+    if (!ghostRef.current) return;
+    ghostRef.current.style.left = `${x + 12}px`;
+    ghostRef.current.style.top = `${y + 12}px`;
+  }
+  function removeGhost() {
+    ghostRef.current?.remove();
+    ghostRef.current = null;
+  }
+  const startDrag = React17__namespace.useCallback(
+    (e, type, payload) => {
+      e.stopPropagation();
+      e.currentTarget.setPointerCapture(e.pointerId);
+      ghostRef.current = createGhostEl(payload);
+      moveGhost(e.clientX, e.clientY);
+      dispatchLibraryDragStart(type);
+      function onMove(ev) {
+        moveGhost(ev.clientX, ev.clientY);
+      }
+      function onUp(ev) {
+        removeGhost();
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+        if (type === "image") {
+          dispatchImageDrop({ src: payload, clientX: ev.clientX, clientY: ev.clientY });
+        } else {
+          dispatchTextDrop({ text: payload, clientX: ev.clientX, clientY: ev.clientY });
+        }
+      }
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+    },
+    [createGhostEl]
+  );
+  return { startDrag };
+}
 var DEFAULT_SEEDS = [
   "forest",
   "ocean",
@@ -3650,8 +3925,7 @@ function getSearchImages(query) {
     id: `${query}-${i}`
   }));
 }
-var ghostEl = null;
-function createGhost(src) {
+function createImageGhost(src) {
   const el = document.createElement("div");
   el.style.cssText = `
     position: fixed; top: -9999px; left: -9999px; z-index: 99999;
@@ -3665,63 +3939,31 @@ function createGhost(src) {
   document.body.appendChild(el);
   return el;
 }
-function moveGhost(x, y) {
-  if (!ghostEl) return;
-  ghostEl.style.left = `${x + 12}px`;
-  ghostEl.style.top = `${y + 12}px`;
-}
-function removeGhost() {
-  ghostEl?.remove();
-  ghostEl = null;
-}
 function ImageLibrary({
   seeds,
   items: customImages
 } = {}) {
   const effectiveSeeds = seeds ?? DEFAULT_SEEDS;
-  const [query, setQuery] = React18__namespace.useState("");
-  const [committed, setCommitted] = React18__namespace.useState("");
-  const [items, setItems] = React18__namespace.useState(
+  const [query, setQuery] = React17__namespace.useState("");
+  const [committed, setCommitted] = React17__namespace.useState("");
+  const [items, setItems] = React17__namespace.useState(
     () => customImages ?? getDefaultImages(effectiveSeeds)
   );
   const libraryTitle = useMsg("image-library.title");
   const searchPlaceholder = useMsg("image-library.search.placeholder");
-  React18__namespace.useEffect(() => {
+  const { startDrag } = useGhostDrag({
+    createGhostEl: createImageGhost
+  });
+  React17__namespace.useEffect(() => {
     const t = setTimeout(() => setCommitted(query.trim()), 400);
     return () => clearTimeout(t);
   }, [query]);
-  React18__namespace.useEffect(() => {
+  React17__namespace.useEffect(() => {
     if (customImages) return;
     setItems(
       committed ? getSearchImages(committed) : getDefaultImages(effectiveSeeds)
     );
   }, [committed, customImages, effectiveSeeds]);
-  function handlePointerDown(e, src) {
-    e.stopPropagation();
-    e.currentTarget.setPointerCapture(e.pointerId);
-    ghostEl = createGhost(src);
-    moveGhost(e.clientX, e.clientY);
-    window.dispatchEvent(
-      new CustomEvent("anvilkit:librarydragstart", {
-        detail: { type: "image" }
-      })
-    );
-    function onMove(ev) {
-      moveGhost(ev.clientX, ev.clientY);
-    }
-    function onUp(ev) {
-      removeGhost();
-      window.removeEventListener("pointermove", onMove);
-      window.removeEventListener("pointerup", onUp);
-      window.dispatchEvent(
-        new CustomEvent("anvilkit:imagedrop", {
-          detail: { src, clientX: ev.clientX, clientY: ev.clientY }
-        })
-      );
-    }
-    window.addEventListener("pointermove", onMove);
-    window.addEventListener("pointerup", onUp);
-  }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pt-3 pb-1 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: libraryTitle }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
@@ -3736,10 +3978,10 @@ function ImageLibrary({
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 grid grid-cols-2 gap-2", children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 grid grid-cols-2 gap-2", children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        onPointerDown: (e) => handlePointerDown(e, item.src),
+        onPointerDown: (e) => startDrag(e, "image", item.src),
         className: "rounded-md overflow-hidden border border-border bg-muted/40 cursor-grab select-none hover:ring-2 hover:ring-primary/50 active:cursor-grabbing transition-all",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -3754,12 +3996,27 @@ function ImageLibrary({
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-1.5 py-1 text-xs text-muted-foreground truncate capitalize", children: item.alt })
         ]
       },
-      `${item.src}-${i}`
+      item.id
     )) }) })
   ] });
 }
-var ghostEl2 = null;
-function createGhost2(text) {
+var DEFAULT_SNIPPETS = [
+  { category: "Headlines", label: "Bold statement", text: "The Future Starts Here" },
+  { category: "Headlines", label: "Question hook", text: "Ready to Transform Your Business?" },
+  { category: "Headlines", label: "Value prop", text: "Simple, Powerful, Built for Teams" },
+  { category: "Headlines", label: "Action-led", text: "Ship Faster. Break Less. Sleep Better." },
+  { category: "Subheadings", label: "Feature intro", text: "Everything you need, nothing you don't." },
+  { category: "Subheadings", label: "Social proof", text: "Trusted by over 10,000 teams worldwide." },
+  { category: "Subheadings", label: "CTA support", text: "Get started in minutes \u2014 no credit card required." },
+  { category: "Body", label: "Product description", text: "Our platform helps teams collaborate in real time, ship products faster, and stay aligned across every stage of the process." },
+  { category: "Body", label: "Feature benefit", text: "With built-in analytics and smart automation, you can focus on what matters most \u2014 building great products." },
+  { category: "Body", label: "About us", text: "We're a small team on a big mission: to make software development feel effortless for everyone." },
+  { category: "CTAs", label: "Primary", text: "Get Started Free" },
+  { category: "CTAs", label: "Secondary", text: "Learn More" },
+  { category: "CTAs", label: "Soft sell", text: "See How It Works" },
+  { category: "CTAs", label: "Urgency", text: "Start Your Free Trial Today" }
+];
+function createTextGhost(text) {
   const el = document.createElement("div");
   el.style.cssText = `
     position: fixed; top: -9999px; left: -9999px; z-index: 99999;
@@ -3772,112 +4029,16 @@ function createGhost2(text) {
   document.body.appendChild(el);
   return el;
 }
-function moveGhost2(x, y) {
-  if (!ghostEl2) return;
-  ghostEl2.style.left = `${x + 12}px`;
-  ghostEl2.style.top = `${y + 12}px`;
-}
-function removeGhost2() {
-  ghostEl2?.remove();
-  ghostEl2 = null;
-}
-var DEFAULT_SNIPPETS = [
-  // Headlines
-  {
-    category: "Headlines",
-    label: "Bold statement",
-    text: "The Future Starts Here"
-  },
-  {
-    category: "Headlines",
-    label: "Question hook",
-    text: "Ready to Transform Your Business?"
-  },
-  {
-    category: "Headlines",
-    label: "Value prop",
-    text: "Simple, Powerful, Built for Teams"
-  },
-  {
-    category: "Headlines",
-    label: "Action-led",
-    text: "Ship Faster. Break Less. Sleep Better."
-  },
-  // Subheadings
-  {
-    category: "Subheadings",
-    label: "Feature intro",
-    text: "Everything you need, nothing you don't."
-  },
-  {
-    category: "Subheadings",
-    label: "Social proof",
-    text: "Trusted by over 10,000 teams worldwide."
-  },
-  {
-    category: "Subheadings",
-    label: "CTA support",
-    text: "Get started in minutes \u2014 no credit card required."
-  },
-  // Body
-  {
-    category: "Body",
-    label: "Product description",
-    text: "Our platform helps teams collaborate in real time, ship products faster, and stay aligned across every stage of the process."
-  },
-  {
-    category: "Body",
-    label: "Feature benefit",
-    text: "With built-in analytics and smart automation, you can focus on what matters most \u2014 building great products."
-  },
-  {
-    category: "Body",
-    label: "About us",
-    text: "We're a small team on a big mission: to make software development feel effortless for everyone."
-  },
-  // CTAs
-  { category: "CTAs", label: "Primary", text: "Get Started Free" },
-  { category: "CTAs", label: "Secondary", text: "Learn More" },
-  { category: "CTAs", label: "Soft sell", text: "See How It Works" },
-  { category: "CTAs", label: "Urgency", text: "Start Your Free Trial Today" }
-];
-function CopyLibrary({
-  items
-} = {}) {
+function CopyLibrary({ items } = {}) {
   const activeSnippets = items ?? DEFAULT_SNIPPETS;
   const categories = Array.from(new Set(activeSnippets.map((s) => s.category)));
-  const [query, setQuery] = React18__namespace.useState("");
+  const [query, setQuery] = React17__namespace.useState("");
   const libraryTitle = useMsg("copy-library.title");
   const searchPlaceholder = useMsg("copy-library.search.placeholder");
+  const { startDrag } = useGhostDrag({ createGhostEl: createTextGhost });
   const filtered = query.trim() ? activeSnippets.filter(
     (s) => s.text.toLowerCase().includes(query.toLowerCase()) || s.label.toLowerCase().includes(query.toLowerCase()) || s.category.toLowerCase().includes(query.toLowerCase())
   ) : activeSnippets;
-  function handlePointerDown(e, text) {
-    e.stopPropagation();
-    e.currentTarget.setPointerCapture(e.pointerId);
-    ghostEl2 = createGhost2(text);
-    moveGhost2(e.clientX, e.clientY);
-    window.dispatchEvent(
-      new CustomEvent("anvilkit:librarydragstart", {
-        detail: { type: "text" }
-      })
-    );
-    function onMove(ev) {
-      moveGhost2(ev.clientX, ev.clientY);
-    }
-    function onUp(ev) {
-      removeGhost2();
-      window.removeEventListener("pointermove", onMove);
-      window.removeEventListener("pointerup", onUp);
-      window.dispatchEvent(
-        new CustomEvent("anvilkit:textdrop", {
-          detail: { text, clientX: ev.clientX, clientY: ev.clientY }
-        })
-      );
-    }
-    window.addEventListener("pointermove", onMove);
-    window.addEventListener("pointerup", onUp);
-  }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pt-3 pb-1 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: libraryTitle }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
@@ -3893,24 +4054,24 @@ function CopyLibrary({
       )
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 flex flex-col gap-4", children: (query.trim() ? [null] : categories).map((cat) => {
-      const items2 = cat ? filtered.filter((s) => s.category === cat) : filtered;
-      if (!items2.length) return null;
+      const snippets = cat ? filtered.filter((s) => s.category === cat) : filtered;
+      if (!snippets.length) return null;
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         cat && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-1 pb-1 text-xs font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Type, { className: "h-3 w-3" }),
           cat
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1", children: items2.map((snippet, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1", children: snippets.map((snippet) => /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            onPointerDown: (e) => handlePointerDown(e, snippet.text),
+            onPointerDown: (e) => startDrag(e, "text", snippet.text),
             className: "rounded-md border border-border bg-muted/40 px-2.5 py-2 cursor-grab select-none hover:bg-muted hover:ring-1 hover:ring-primary/40 active:cursor-grabbing transition-all",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-foreground/70 mb-0.5", children: snippet.label }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-foreground leading-snug line-clamp-2", children: snippet.text })
             ]
           },
-          i
+          `${snippet.category}-${snippet.label}`
         )) })
       ] }, cat ?? "results");
     }) }) })
@@ -3938,42 +4099,6 @@ var EditorLayout = ({
     ] })
   ] });
 };
-function createEditorUiStore(storeId) {
-  return zustand.createStore()(
-    middleware.persist(
-      (set) => ({
-        drawerSearch: "",
-        setDrawerSearch: (q) => set({ drawerSearch: q }),
-        drawerCollapsed: {},
-        toggleDrawerGroup: (group) => set((s) => ({
-          drawerCollapsed: { ...s.drawerCollapsed, [group]: !s.drawerCollapsed[group] }
-        })),
-        activeTab: "insert",
-        setActiveTab: (tab) => set({ activeTab: tab }),
-        outlineExpanded: {},
-        toggleOutlineItem: (id) => set((s) => ({
-          outlineExpanded: { ...s.outlineExpanded, [id]: !s.outlineExpanded[id] }
-        })),
-        theme: "light",
-        toggleTheme: () => set((s) => {
-          const next = s.theme === "light" ? "dark" : "light";
-          document.documentElement.classList.toggle("dark", next === "dark");
-          return { theme: next };
-        })
-      }),
-      {
-        name: `anvilkit-ui-${storeId}`,
-        partialize: (s) => ({
-          activeTab: s.activeTab,
-          drawerCollapsed: s.drawerCollapsed,
-          outlineExpanded: s.outlineExpanded,
-          theme: s.theme
-          // drawerSearch intentionally excluded — transient input
-        })
-      }
-    )
-  );
-}
 function createEditorI18nStore(initial) {
   return zustand.createStore()(
     middleware.persist(
@@ -4047,20 +4172,33 @@ function Studio({
   locale,
   messages
 }) {
-  const uiStore2 = React18__namespace.useRef(createEditorUiStore(storeId ?? "default")).current;
-  const i18nStore = React18__namespace.useRef(
+  const uiStore2 = React17__namespace.useRef(createEditorUiStore(storeId ?? "default")).current;
+  const i18nStore = React17__namespace.useRef(
     createEditorI18nStore({
       locale: locale ?? "zh",
       messages: messages ?? defaultMessages
     })
   ).current;
-  const aiPlugin = React18__namespace.useMemo(
-    () => pluginAi.createAiPlugin({ host: aiHost }),
-    [aiHost]
-  );
-  const mergedOverrides = React18__namespace.useMemo(
-    () => ({ ...aiPlugin.overrides, ...puckOverrides, ...overrideExtensions }),
-    [aiPlugin.overrides, overrideExtensions]
+  React17__namespace.useEffect(() => {
+    i18nStore.getState().setLocale(locale ?? "zh", messages ?? defaultMessages);
+  }, [locale, messages, i18nStore]);
+  const [aiPlugin, setAiPlugin] = React17__namespace.useState(null);
+  React17__namespace.useEffect(() => {
+    if (!aiHost) return;
+    let cancelled = false;
+    import('@puckeditor/plugin-ai').then(({ createAiPlugin }) => {
+      if (cancelled) return;
+      import('@puckeditor/plugin-ai/styles.css').catch(() => {
+      });
+      setAiPlugin(createAiPlugin({ host: aiHost }));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [aiHost]);
+  const mergedOverrides = React17__namespace.useMemo(
+    () => ({ ...aiPlugin?.overrides ?? {}, ...puckOverrides, ...overrideExtensions }),
+    [aiPlugin, overrideExtensions]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(EditorUiStoreProvider, { value: uiStore2, children: /* @__PURE__ */ jsxRuntime.jsx(EditorI18nStoreProvider, { value: i18nStore, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsx(
     core.Puck,
@@ -4070,11 +4208,11 @@ function Studio({
       onPublish,
       onChange,
       overrides: mergedOverrides,
-      plugins: [aiPlugin],
+      plugins: aiPlugin ? [aiPlugin] : [],
       children: /* @__PURE__ */ jsxRuntime.jsx(
         EditorLayout,
         {
-          aiPanel: aiPlugin.render(),
+          aiPanel: aiPlugin?.render(),
           images,
           copywritings
         }
@@ -4084,10 +4222,14 @@ function Studio({
 }
 
 // src/store/index.ts
-var uiStore = createEditorUiStore("default");
+createEditorUiStore("default");
 
+exports.EditorI18nStoreProvider = EditorI18nStoreProvider;
+exports.EditorUiStoreProvider = EditorUiStoreProvider;
 exports.Studio = Studio;
 exports.createEditorI18nStore = createEditorI18nStore;
 exports.createEditorUiStore = createEditorUiStore;
+exports.defaultMessages = defaultMessages;
 exports.puckOverrides = puckOverrides;
-exports.uiStore = uiStore;
+exports.useEditorI18nStoreApi = useEditorI18nStoreApi;
+exports.useEditorUiStoreApi = useEditorUiStoreApi;