@anvilkit/puck-studio 0.0.1 → 0.1.0

package/dist/overrides.js

@@ -0,0 +1,2057 @@
+import { Search, Info, Plus, Bold, Italic, Link, ChevronRightIcon, Sparkles, ChevronDownIcon, CheckIcon, GripVertical, Copy, Trash2, SearchIcon, ChevronUpIcon } from 'lucide-react';
+import { useStore } from 'zustand';
+import * as React6 from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ScrollArea as ScrollArea$1 } from '@base-ui/react/scroll-area';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { Input as Input$1 } from '@base-ui/react/input';
+import { usePuck, useGetPuck, AutoField } from '@puckeditor/core';
+import { Separator as Separator$1 } from '@base-ui/react/separator';
+import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { Button as Button$1 } from '@base-ui/react/button';
+import { cva } from 'class-variance-authority';
+import { Select as Select$1 } from '@base-ui/react/select';
+import { useSensors, useSensor, PointerSensor, DndContext, closestCenter } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy, arrayMove, useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Popover as Popover$1 } from '@base-ui/react/popover';
+import { AnimatePresence, motion } from 'motion/react';
+import { Toggle as Toggle$1 } from '@base-ui/react/toggle';
+import { Command as Command$1 } from 'cmdk';
+
+// src/core/overrides/layout/EditorDrawer.tsx
+function getStrictContext(name) {
+  const Context = React6.createContext(void 0);
+  const Provider = ({
+    value,
+    children
+  }) => /* @__PURE__ */ jsx(Context.Provider, { value, children });
+  const useSafeContext = () => {
+    const ctx = React6.useContext(Context);
+    if (ctx === void 0) {
+      throw new Error(`useContext must be used within ${name ?? "a Provider"}`);
+    }
+    return ctx;
+  };
+  return [Provider, useSafeContext];
+}
+
+// src/store/ui-context.ts
+var [EditorUiStoreProvider, useEditorUiStoreApi] = getStrictContext("EditorUiStoreProvider");
+
+// src/store/i18n-context.ts
+var [EditorI18nStoreProvider, useEditorI18nStoreApi] = getStrictContext("EditorI18nStoreProvider");
+
+// src/store/hooks.ts
+function useDrawerSearch() {
+  return useStore(useEditorUiStoreApi(), (s) => s.drawerSearch);
+}
+function useSetDrawerSearch() {
+  return useStore(useEditorUiStoreApi(), (s) => s.setDrawerSearch);
+}
+function useTheme() {
+  return useStore(useEditorUiStoreApi(), (s) => s.theme);
+}
+function useMsg(key) {
+  return useStore(useEditorI18nStoreApi(), (s) => s.messages[key] ?? key);
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function ScrollArea({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    ScrollArea$1.Root,
+    {
+      "data-slot": "scroll-area",
+      className: cn("relative", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          ScrollArea$1.Viewport,
+          {
+            "data-slot": "scroll-area-viewport",
+            className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(ScrollBar, {}),
+        /* @__PURE__ */ jsx(ScrollArea$1.Corner, {})
+      ]
+    }
+  );
+}
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ScrollArea$1.Scrollbar,
+    {
+      "data-slot": "scroll-area-scrollbar",
+      "data-orientation": orientation,
+      orientation,
+      className: cn(
+        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ScrollArea$1.Thumb,
+        {
+          "data-slot": "scroll-area-thumb",
+          className: "relative flex-1 rounded-full bg-border"
+        }
+      )
+    }
+  );
+}
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Input$1,
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "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
+    }
+  );
+}
+function EditorDrawer({
+  children
+}) {
+  const search = useDrawerSearch();
+  const setSearch = useSetDrawerSearch();
+  const drawerTitle = useMsg("drawer.title");
+  const searchPlaceholder = useMsg("drawer.search.placeholder");
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-3 pt-3 pb-1 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: drawerTitle }),
+    /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          className: "pl-8",
+          placeholder: searchPlaceholder,
+          value: search,
+          onChange: (e) => setSearch(e.target.value)
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children })
+  ] });
+}
+function EditorComponents({
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { "data-puck-components-grid": true, className: "p-2", children: [
+    /* @__PURE__ */ jsx("style", { children: `
+        [data-puck-components-grid] [data-puck-drawer] {
+          display: grid;
+          grid-template-columns: repeat(3, minmax(0, 1fr));
+          gap: 6px;
+        }
+        /* flatten item wrapper and draggable wrapper */
+        [data-puck-components-grid] [data-puck-drawer] > div,
+        [data-puck-components-grid] [data-puck-drawer] > div > div {
+          display: contents;
+        }
+        /* hide the ghost/bg copy */
+        [data-puck-components-grid] [data-puck-drawer] > div > div > div:first-child {
+          display: none;
+        }
+        /* flatten the real draggable wrapper */
+        [data-puck-components-grid] [data-puck-drawer] > div > div > div:last-child {
+          display: contents;
+        }
+      ` }),
+    children
+  ] });
+}
+function getPlaceholderUrl(name) {
+  return `https://picsum.photos/seed/${encodeURIComponent(name)}/120/80`;
+}
+function DrawerItem({
+  children,
+  name
+}) {
+  const { config } = 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__ */ 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__ */ jsx("div", { className: "w-full h-16 bg-muted overflow-hidden", children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src,
+        alt: name,
+        className: "w-full h-full object-cover",
+        onError: (e) => {
+          e.currentTarget.style.display = "none";
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-xs font-medium truncate", children: name ?? children })
+  ] });
+}
+function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Separator$1,
+    {
+      "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
+}) {
+  const { selectedItem } = usePuck();
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-3 py-2 border-b", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: "Outline" }) }),
+    selectedItem && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "px-3 py-1.5 text-xs text-muted-foreground truncate", children: [
+        "Selected:",
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: typeof selectedItem.type === "string" ? selectedItem.type : String(selectedItem.type) })
+      ] }),
+      /* @__PURE__ */ jsx(Separator, {})
+    ] }),
+    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "p-2 text-sm", children }) })
+  ] });
+}
+var CANVAS_CSS = `
+  *, *::before, *::after { box-sizing: border-box; }
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --border: 214.3 31.8% 91.4%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --border: 217.2 32.6% 17.5%;
+  }
+  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();
+  React6.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]);
+  React6.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 addLibraryDragEventListener(type, listener, target = window) {
+  const wrapped = (event) => {
+    listener(event);
+  };
+  target.addEventListener(type, wrapped);
+  return () => {
+    target.removeEventListener(type, wrapped);
+  };
+}
+
+// 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/");
+}
+function replaceImageInProps(props, newSrc) {
+  const result = {};
+  for (const key of Object.keys(props)) {
+    const val = props[key];
+    if (typeof val === "string" && isImageUrl(val)) {
+      result[key] = newSrc;
+    } else if (Array.isArray(val)) {
+      result[key] = val.map(
+        (item) => item && typeof item === "object" ? replaceImageInProps(item, newSrc) : item
+      );
+    } else if (val && typeof val === "object") {
+      result[key] = replaceImageInProps(val, newSrc);
+    } else {
+      result[key] = val;
+    }
+  }
+  return result;
+}
+function replaceTextInProps(props, newText, targetText) {
+  for (const key of Object.keys(props)) {
+    if (key === "id") continue;
+    const val = props[key];
+    if (typeof val === "string" && val === targetText && !isImageUrl(val)) {
+      return { result: { ...props, [key]: newText }, replaced: true };
+    }
+  }
+  for (const key of Object.keys(props)) {
+    if (key === "id") continue;
+    const val = props[key];
+    if (typeof val === "string" && !isImageUrl(val) && val.length > 0) {
+      return { result: { ...props, [key]: newText }, replaced: true };
+    }
+  }
+  return { result: props, replaced: false };
+}
+
+// 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 = useGetPuck();
+  React6.useEffect(() => {
+    if (!iframeDoc) return;
+    const iframeEl = iframeDoc.defaultView?.frameElement;
+    if (!iframeEl) return;
+    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 }
+        }
+      });
+      return true;
+    }
+    function onLibraryDragStart(type) {
+      activeLibrary = type;
+    }
+    function onPointerMove(e) {
+      if (!activeLibrary) return;
+      const compEl = getComponentElAt(iframeDocument, frameElement, e.clientX, e.clientY);
+      if (!compEl) {
+        highlighter.clear();
+        return;
+      }
+      if (activeLibrary === "image") {
+        highlighter.set(
+          getImageElInComponent(compEl, frameElement, e.clientX, e.clientY),
+          "#6366f1"
+        );
+      } else {
+        highlighter.set(
+          getTextElInComponent(iframeDocument, frameElement, compEl, e.clientX, e.clientY),
+          "#f59e0b"
+        );
+      }
+    }
+    function onPointerUp() {
+      activeLibrary = null;
+      highlighter.clear();
+    }
+    function onImageDrop(src, clientX, clientY) {
+      highlighter.clear();
+      activeLibrary = null;
+      if (!src) return;
+      const compEl = getComponentElAt(iframeDocument, frameElement, clientX, clientY);
+      if (!compEl) return;
+      const componentId = compEl.dataset.puckComponent;
+      if (!componentId) return;
+      const item = getPuck().getItemById(componentId);
+      if (!item) return;
+      const updatedProps = replaceImageInProps(
+        item.props,
+        src
+      );
+      dispatchReplace(componentId, updatedProps);
+    }
+    function onTextDrop(text, clientX, clientY) {
+      highlighter.clear();
+      activeLibrary = null;
+      if (!text) return;
+      const compEl = getComponentElAt(iframeDocument, frameElement, clientX, clientY);
+      if (!compEl) return;
+      const componentId = compEl.dataset.puckComponent;
+      if (!componentId) return;
+      const textEl = getTextElInComponent(
+        iframeDocument,
+        frameElement,
+        compEl,
+        clientX,
+        clientY
+      );
+      const targetText = textEl?.textContent?.trim() ?? "";
+      const item = getPuck().getItemById(componentId);
+      if (!item) return;
+      const { result: updatedProps, replaced } = replaceTextInProps(
+        item.props,
+        text,
+        targetText
+      );
+      if (replaced) dispatchReplace(componentId, updatedProps);
+    }
+    const removeLibraryDragStart = addLibraryDragEventListener(
+      LIBRARY_DRAG_START,
+      (event) => {
+        onLibraryDragStart(event.detail.type);
+      }
+    );
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp);
+    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 () => {
+      removeLibraryDragStart();
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
+      removeImageDrop();
+      removeTextDrop();
+      highlighter.clear();
+    };
+  }, [iframeDoc, getPuck]);
+}
+function CanvasIframe({
+  children,
+  document: iframeDoc
+}) {
+  useThemeSync({ document: iframeDoc, injectCanvasCss: true });
+  useLibraryDropBridge(iframeDoc);
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function CanvasPreview({
+  children
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "w-full h-full px-3 py-2 text-sm font-medium text-foreground", children });
+}
+function ComponentOverlay({
+  children,
+  hover,
+  isSelected
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: [
+        "absolute inset-0 rounded-sm pointer-events-none z-10 transition-colors",
+        isSelected ? "border-2 border-primary/80" : hover ? "border-2 border-primary/40" : ""
+      ].filter(Boolean).join(" "),
+      children
+    }
+  );
+}
+function TooltipProvider({
+  delay = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Tooltip$1.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delay,
+      ...props
+    }
+  );
+}
+function Tooltip({ ...props }) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(
+    Tooltip$1.Positioner,
+    {
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      className: "isolate z-50",
+      children: /* @__PURE__ */ jsxs(
+        Tooltip$1.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__ */ jsx(Tooltip$1.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,
+  parentAction
+}) {
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 rounded-md border bg-background shadow-md px-1 py-0.5", children: [
+    label && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "px-2 text-xs font-medium text-muted-foreground truncate max-w-[120px]", children: label }),
+      /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "h-5" })
+    ] }),
+    parentAction && /* @__PURE__ */ jsxs(Fragment, { children: [
+      parentAction,
+      /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "h-5" })
+    ] }),
+    children
+  ] }) });
+}
+function Label({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "label",
+    {
+      "data-slot": "label",
+      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
+    }
+  );
+}
+function Breadcrumb({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": "breadcrumb",
+      "data-slot": "breadcrumb",
+      className: cn(className),
+      ...props
+    }
+  );
+}
+function BreadcrumbList({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      "data-slot": "breadcrumb-list",
+      className: cn(
+        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function BreadcrumbItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "data-slot": "breadcrumb-item",
+      className: cn("inline-flex items-center gap-1.5", className),
+      ...props
+    }
+  );
+}
+function BreadcrumbLink({
+  className,
+  render,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "a",
+    props: mergeProps(
+      {
+        className: cn("transition-colors hover:text-foreground", className)
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "breadcrumb-link"
+    }
+  });
+}
+function BreadcrumbPage({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "breadcrumb-page",
+      role: "link",
+      "aria-disabled": "true",
+      "aria-current": "page",
+      className: cn("font-normal text-foreground", className),
+      ...props
+    }
+  );
+}
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "data-slot": "breadcrumb-separator",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: cn("[&>svg]:size-3.5", className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(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 } = usePuck();
+  const { itemSelector } = appState.ui;
+  const selectRoot = () => dispatch({ type: "setUi", ui: { itemSelector: null } });
+  if (!itemSelector || !selectedItem) {
+    return [{ label: "Page" }];
+  }
+  const selectedType = getComponentTypeLabel(selectedItem);
+  const parentId = getComponentId(selectedItem);
+  const parent = parentId ? getParentById(parentId) : void 0;
+  if (!parent) {
+    return [{ label: "Page", onSelect: selectRoot }, { label: selectedType }];
+  }
+  const parentType = getComponentTypeLabel(parent);
+  return [
+    { label: "Page", onSelect: selectRoot },
+    { label: parentType },
+    { label: selectedType }
+  ];
+}
+function FieldWrapper({
+  children
+}) {
+  const crumbs = useBreadcrumbs();
+  return /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-3 py-2 border-b", children: /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsx(BreadcrumbList, { children: crumbs.map((crumb, i) => {
+      const isLast = i === crumbs.length - 1;
+      return /* @__PURE__ */ jsxs(React6.Fragment, { children: [
+        i > 0 && /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
+        /* @__PURE__ */ jsx(BreadcrumbItem, { children: isLast ? /* @__PURE__ */ jsx(BreadcrumbPage, { children: crumb.label }) : /* @__PURE__ */ jsx(
+          BreadcrumbLink,
+          {
+            className: "cursor-pointer",
+            onClick: crumb.onSelect,
+            children: crumb.label
+          }
+        ) })
+      ] }, i);
+    }) }) }) }),
+    children
+  ] }) });
+}
+function FieldLabel({
+  children,
+  label,
+  icon,
+  labelIcon,
+  el,
+  readOnly,
+  className
+}) {
+  const El = el ?? "div";
+  const labelAdornment = icon ?? labelIcon;
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(El, { className: `flex flex-col gap-1.5 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      labelAdornment && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: labelAdornment }),
+      /* @__PURE__ */ jsx(Label, { className: "text-xs font-medium text-muted-foreground", children: label }),
+      label && /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(
+          TooltipTrigger,
+          {
+            "aria-label": label,
+            render: /* @__PURE__ */ 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__ */ jsx(Info, { className: "h-3 w-3 text-muted-foreground/60 cursor-help" })
+          }
+        ),
+        /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: label })
+      ] }),
+      readOnly && /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-muted-foreground/50", children: "Read only" })
+    ] }),
+    children
+  ] }) });
+}
+var buttonVariants = 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__ */ jsx(
+    Button$1,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+var MOCK_VALUES = {
+  default: ["AI-generated content", "Smart suggestion", "Generated text"]
+};
+function getMock(instructions) {
+  if (instructions?.toLowerCase().includes("caps")) {
+    return "AI GENERATED TITLE";
+  }
+  const pool = MOCK_VALUES.default;
+  return pool[Math.floor(Math.random() * pool.length)];
+}
+function AiButton({ ai, onGenerate }) {
+  const [loading, setLoading] = React6.useState(false);
+  const handleClick = () => {
+    setLoading(true);
+    setTimeout(() => {
+      onGenerate(getMock(ai.instructions));
+      setLoading(false);
+    }, 600);
+  };
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      variant: "outline",
+      size: "icon",
+      className: "h-8 w-8 shrink-0 text-muted-foreground hover:text-primary",
+      onClick: handleClick,
+      disabled: loading,
+      "aria-label": "Generate with AI",
+      children: /* @__PURE__ */ jsx(Sparkles, { className: `h-3.5 w-3.5 ${loading ? "animate-pulse" : ""}` })
+    }
+  );
+}
+function TextField({
+  field,
+  value,
+  onChange,
+  readOnly,
+  placeholder,
+  label,
+  labelIcon
+}) {
+  const [local, setLocal] = React6.useState(value ?? "");
+  const onChangeRef = React6.useRef(onChange);
+  const lastCommittedValueRef = React6.useRef(value ?? "");
+  React6.useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  React6.useEffect(() => {
+    lastCommittedValueRef.current = value ?? "";
+    setLocal(value ?? "");
+  }, [value]);
+  React6.useEffect(() => {
+    const timer = setTimeout(() => {
+      if (local !== lastCommittedValueRef.current) {
+        onChangeRef.current(local);
+        lastCommittedValueRef.current = local;
+      }
+    }, 200);
+    return () => clearTimeout(timer);
+  }, [local]);
+  return /* @__PURE__ */ jsx(FieldLabel, { label: label ?? "", labelIcon, readOnly, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        value: local,
+        onChange: (e) => setLocal(e.target.value),
+        readOnly,
+        placeholder,
+        className: "h-8 text-sm flex-1"
+      }
+    ),
+    field?.ai && /* @__PURE__ */ jsx(
+      AiButton,
+      {
+        ai: field.ai,
+        onGenerate: (nextValue) => {
+          lastCommittedValueRef.current = nextValue;
+          setLocal(nextValue);
+          onChangeRef.current(nextValue);
+        }
+      }
+    )
+  ] }) });
+}
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(
+        "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
+    }
+  );
+}
+function TextareaField({ value, onChange, readOnly, placeholder, label }) {
+  const [local, setLocal] = React6.useState(value ?? "");
+  React6.useEffect(() => {
+    setLocal(value ?? "");
+  }, [value]);
+  React6.useEffect(() => {
+    const timer = setTimeout(() => {
+      if (local !== value) onChange(local);
+    }, 200);
+    return () => clearTimeout(timer);
+  }, [local]);
+  return /* @__PURE__ */ jsx(FieldLabel, { label: label ?? "", readOnly, children: /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      value: local,
+      onChange: (e) => setLocal(e.target.value),
+      readOnly,
+      placeholder,
+      className: "min-h-[80px] text-sm resize-y"
+    }
+  ) });
+}
+function NumberField({ value, onChange, readOnly, min, max, step, label }) {
+  const [local, setLocal] = React6.useState(String(value ?? ""));
+  React6.useEffect(() => {
+    setLocal(String(value ?? ""));
+  }, [value]);
+  React6.useEffect(() => {
+    const parsed = parseFloat(local);
+    if (!isNaN(parsed) && parsed !== value) {
+      const timer = setTimeout(() => onChange(parsed), 200);
+      return () => clearTimeout(timer);
+    }
+  }, [local]);
+  return /* @__PURE__ */ jsx(FieldLabel, { label: label ?? "", readOnly, children: /* @__PURE__ */ jsx(
+    Input,
+    {
+      type: "number",
+      value: local,
+      onChange: (e) => setLocal(e.target.value),
+      readOnly,
+      min,
+      max,
+      step,
+      className: "h-8 text-sm"
+    }
+  ) });
+}
+var Select = Select$1.Root;
+function SelectGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Select$1.Group,
+    {
+      "data-slot": "select-group",
+      className: cn("scroll-my-1 p-1", className),
+      ...props
+    }
+  );
+}
+function SelectValue({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Select$1.Value,
+    {
+      "data-slot": "select-value",
+      className: cn("flex flex-1 text-left", className),
+      ...props
+    }
+  );
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Select$1.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: cn(
+        "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,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          Select$1.Icon,
+          {
+            render: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" })
+          }
+        )
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  alignItemWithTrigger = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(
+    Select$1.Positioner,
+    {
+      side,
+      sideOffset,
+      align,
+      alignOffset,
+      alignItemWithTrigger,
+      className: "isolate z-50",
+      children: /* @__PURE__ */ jsxs(
+        Select$1.Popup,
+        {
+          "data-slot": "select-content",
+          "data-align-trigger": alignItemWithTrigger,
+          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__ */ jsx(SelectScrollUpButton, {}),
+            /* @__PURE__ */ jsx(Select$1.List, { children }),
+            /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+          ]
+        }
+      )
+    }
+  ) });
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Select$1.Item,
+    {
+      "data-slot": "select-item",
+      className: cn(
+        "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__ */ jsx(Select$1.ItemText, { className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap", children }),
+        /* @__PURE__ */ jsx(
+          Select$1.ItemIndicator,
+          {
+            render: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
+            children: /* @__PURE__ */ jsx(CheckIcon, { className: "pointer-events-none" })
+          }
+        )
+      ]
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Select$1.ScrollUpArrow,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn(
+        "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__ */ jsx(
+        ChevronUpIcon,
+        {}
+      )
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Select$1.ScrollDownArrow,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn(
+        "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__ */ jsx(
+        ChevronDownIcon,
+        {}
+      )
+    }
+  );
+}
+function SelectField({ field, value, onChange, id, readOnly, label }) {
+  return /* @__PURE__ */ jsx(FieldLabel, { label: label ?? "", readOnly, children: /* @__PURE__ */ jsxs(
+    Select,
+    {
+      value: String(value ?? ""),
+      onValueChange: (v) => {
+        if (v === null) return;
+        const match = field.options.find((o) => String(o.value) === v);
+        onChange(match ? match.value : v);
+      },
+      children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { id, className: "h-8 text-sm w-full", disabled: readOnly, children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select..." }) }),
+        /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(SelectGroup, { children: field.options.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: String(opt.value), children: opt.label }, String(opt.value))) }) })
+      ]
+    }
+  ) });
+}
+var buttonGroupVariants = cva(
+  "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: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: {
+      orientation: "horizontal"
+    }
+  }
+);
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "button-group",
+      "data-orientation": orientation,
+      className: cn(buttonGroupVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+function RadioField({ field, value, onChange, readOnly, label }) {
+  const options = field.options ?? [];
+  return /* @__PURE__ */ jsx(FieldLabel, { label: label ?? "", readOnly, el: "div", children: /* @__PURE__ */ jsx(ButtonGroup, { className: "w-full", children: options.map((opt) => {
+    const selected = String(opt.value) === String(value ?? "");
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: selected ? "default" : "outline",
+        size: "sm",
+        className: "flex-1 text-xs",
+        disabled: readOnly,
+        onClick: () => onChange(opt.value),
+        children: opt.label
+      },
+      String(opt.value)
+    );
+  }) }) });
+}
+function ItemGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "list",
+      "data-slot": "item-group",
+      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
+    }
+  );
+}
+var itemVariants = cva(
+  "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: "border-transparent bg-muted/50"
+      },
+      size: {
+        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"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  render,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps(
+      {
+        className: cn(itemVariants({ variant, size, className }))
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "item",
+      variant,
+      size
+    }
+  });
+}
+cva(
+  "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: {
+        default: "bg-transparent",
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function ItemContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-content",
+      className: cn(
+        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-title",
+      className: cn(
+        "line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ItemActions({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "item-actions",
+      className: cn("flex items-center gap-2", className),
+      ...props
+    }
+  );
+}
+function useControlledState(props) {
+  const { value, defaultValue, onChange } = props;
+  const [state, setInternalState] = React6.useState(
+    value !== void 0 ? value : defaultValue
+  );
+  React6.useEffect(() => {
+    if (value !== void 0) setInternalState(value);
+  }, [value]);
+  const setState = React6.useCallback(
+    (next, ...args) => {
+      setInternalState(next);
+      onChange?.(next, ...args);
+    },
+    [onChange]
+  );
+  return [state, setState];
+}
+var [PopoverProvider, usePopover] = getStrictContext("PopoverContext");
+function Popover(props) {
+  const [isOpen, setIsOpen] = useControlledState({
+    value: props?.open,
+    defaultValue: props?.defaultOpen,
+    onChange: props?.onOpenChange
+  });
+  return /* @__PURE__ */ jsx(PopoverProvider, { value: { isOpen, setIsOpen }, children: /* @__PURE__ */ jsx(
+    Popover$1.Root,
+    {
+      "data-slot": "popover",
+      ...props,
+      onOpenChange: setIsOpen
+    }
+  ) });
+}
+function PopoverTrigger(props) {
+  return /* @__PURE__ */ jsx(Popover$1.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverPortal(props) {
+  const { isOpen } = usePopover();
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(
+    Popover$1.Portal,
+    {
+      keepMounted: true,
+      "data-slot": "popover-portal",
+      ...props
+    }
+  ) });
+}
+function PopoverPositioner(props) {
+  return /* @__PURE__ */ jsx(Popover$1.Positioner, { "data-slot": "popover-positioner", ...props });
+}
+function PopoverPopup({
+  initialFocus,
+  finalFocus,
+  transition = { type: "spring", stiffness: 300, damping: 25 },
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Popover$1.Popup,
+    {
+      initialFocus,
+      finalFocus,
+      render: /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          "data-slot": "popover-popup",
+          initial: { opacity: 0, scale: 0.5 },
+          animate: { opacity: 1, scale: 1 },
+          exit: { opacity: 0, scale: 0.5 },
+          transition,
+          ...props
+        },
+        "popover-popup"
+      )
+    }
+  );
+}
+function Popover2(props) {
+  return /* @__PURE__ */ jsx(Popover, { ...props });
+}
+function PopoverTrigger2(props) {
+  return /* @__PURE__ */ jsx(PopoverTrigger, { ...props });
+}
+function PopoverPanel({
+  className,
+  align = "center",
+  sideOffset = 4,
+  initialFocus,
+  finalFocus,
+  style,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsx(
+    PopoverPositioner,
+    {
+      align,
+      sideOffset,
+      className: "z-50",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        PopoverPopup,
+        {
+          initialFocus,
+          finalFocus,
+          className: cn(
+            "bg-popover text-popover-foreground w-72 rounded-md border p-4 shadow-md outline-hidden origin-(--transform-origin)",
+            className
+          ),
+          style,
+          children
+        }
+      )
+    }
+  ) });
+}
+function getArraySubField(subName, subField) {
+  return { ...subField, label: subField.label ?? subName };
+}
+function SortableItem({
+  id,
+  index,
+  item,
+  field,
+  readOnly,
+  atMax,
+  atMin,
+  fieldId,
+  open,
+  onOpenChange,
+  onDuplicate,
+  onRemove,
+  onUpdate,
+  getSummary
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1
+  };
+  return /* @__PURE__ */ jsx("div", { ref: setNodeRef, style, children: /* @__PURE__ */ jsxs(Popover2, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsxs(Item, { variant: "outline", size: "sm", className: "cursor-pointer", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "cursor-grab active:cursor-grabbing touch-none p-0.5 text-muted-foreground/40 hover:text-muted-foreground",
+          ...attributes,
+          ...listeners,
+          children: /* @__PURE__ */ jsx(GripVertical, { className: "h-3.5 w-3.5 shrink-0" })
+        }
+      ),
+      /* @__PURE__ */ jsx(PopoverTrigger2, { className: "flex-1 min-w-0 text-left", children: /* @__PURE__ */ jsx(ItemContent, { children: /* @__PURE__ */ jsx(ItemTitle, { className: "text-xs", children: getSummary(item, index) }) }) }),
+      !readOnly && /* @__PURE__ */ jsxs(ItemActions, { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: "h-5 w-5",
+            disabled: atMax,
+            onClick: (e) => {
+              e.stopPropagation();
+              onDuplicate(index);
+            },
+            title: "Duplicate",
+            children: /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: "h-5 w-5 text-destructive hover:text-destructive",
+            disabled: atMin,
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove(index);
+            },
+            title: "Delete",
+            children: /* @__PURE__ */ jsx(Trash2, { className: "h-3 w-3" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      PopoverPanel,
+      {
+        side: "left",
+        sideOffset: 60,
+        align: "start",
+        alignOffset: -14,
+        className: "w-56 p-3 flex flex-col gap-2",
+        children: Object.entries(field.arrayFields).map(([subName, subField]) => /* @__PURE__ */ jsx(
+          AutoField,
+          {
+            field: getArraySubField(subName, subField),
+            value: item[subName],
+            onChange: (val) => onUpdate(index, subName, val),
+            readOnly,
+            id: `${fieldId}-${index}-${subName}`
+          },
+          subName
+        ))
+      }
+    )
+  ] }) });
+}
+function ArrayField({
+  field,
+  value = [],
+  onChange,
+  readOnly,
+  label,
+  id = ""
+}) {
+  const [openIndex, setOpenIndex] = React6.useState(null);
+  const stableValue = React6.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 = useSensors(useSensor(PointerSensor));
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    const from = itemIds.indexOf(active.id);
+    const to = itemIds.indexOf(over.id);
+    if (from === -1 || to === -1) return;
+    onChange(arrayMove(stableValue, from, to));
+  };
+  const defaultItem = () => {
+    if (!field.defaultItemProps) return {};
+    return typeof field.defaultItemProps === "function" ? field.defaultItemProps(value.length) : { ...field.defaultItemProps };
+  };
+  const addItem = () => {
+    if (atMax || readOnly) return;
+    const newIndex = stableValue.length;
+    onChange([...stableValue, defaultItem()]);
+    setOpenIndex(newIndex);
+  };
+  const removeItem = (i) => {
+    if (atMin || readOnly) return;
+    const next = [...stableValue];
+    next.splice(i, 1);
+    onChange(next);
+  };
+  const duplicateItem = (i) => {
+    if (atMax || readOnly) return;
+    const next = [...stableValue];
+    next.splice(i + 1, 0, { ...stableValue[i] });
+    onChange(next);
+  };
+  const updateItem = (i, subName, val) => {
+    onChange(
+      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.entries(item).find(
+      (entry) => entry[0] !== "_id" && typeof entry[1] === "string" && entry[1].length > 0
+    );
+    return first?.[1] ?? `Item ${i + 1}`;
+  };
+  return /* @__PURE__ */ jsx(FieldLabel, { label: label ?? field.label ?? "", readOnly, el: "div", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsx(
+      DndContext,
+      {
+        sensors,
+        collisionDetection: closestCenter,
+        onDragEnd: handleDragEnd,
+        children: /* @__PURE__ */ jsx(
+          SortableContext,
+          {
+            items: itemIds,
+            strategy: verticalListSortingStrategy,
+            children: /* @__PURE__ */ jsx(ItemGroup, { children: stableValue.map((item, i) => /* @__PURE__ */ jsx(
+              SortableItem,
+              {
+                id: itemIds[i],
+                index: i,
+                item,
+                field,
+                readOnly,
+                atMax,
+                atMin,
+                fieldId: id,
+                open: openIndex === i,
+                onOpenChange: (o) => setOpenIndex(o ? i : null),
+                onDuplicate: duplicateItem,
+                onRemove: removeItem,
+                onUpdate: updateItem,
+                getSummary
+              },
+              itemIds[i]
+            )) })
+          }
+        )
+      }
+    ),
+    !readOnly && !atMax && /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        onClick: addItem,
+        className: "w-full gap-1.5 mt-0.5",
+        children: [
+          /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }),
+          "Add item"
+        ]
+      }
+    )
+  ] }) });
+}
+function ObjectField({ children, name, readOnly }) {
+  return /* @__PURE__ */ jsx(FieldLabel, { label: name, el: "div", readOnly, children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 pl-3 border-l-2 border-border/60 ml-1", children }) });
+}
+function Card({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card",
+      "data-size": size,
+      className: cn(
+        "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
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: cn("px-6 group-data-[size=sm]/card:px-4", className),
+      ...props
+    }
+  );
+}
+function SlotField({ children, label }) {
+  return /* @__PURE__ */ jsx(FieldLabel, { label: label ?? "", el: "div", children: /* @__PURE__ */ jsx(Card, { className: "border-dashed", children: /* @__PURE__ */ jsx(CardContent, { className: "py-3 px-3", children: children ?? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground text-center", children: "Slot content is managed directly on the canvas." }) }) }) });
+}
+function CustomField({ children, label }) {
+  return /* @__PURE__ */ jsx(FieldLabel, { label: label ?? "", el: "div", children: /* @__PURE__ */ jsx("div", { className: "rounded-md border border-border/60 p-3", children }) });
+}
+var toggleVariants = cva(
+  "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 shadow-xs hover:bg-muted"
+      },
+      size: {
+        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: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Toggle({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Toggle$1,
+    {
+      "data-slot": "toggle",
+      className: cn(toggleVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+function RichtextField({ value, onChange, readOnly, label }) {
+  const ref = React6.useRef(null);
+  const boldLabel = useMsg("richtext.bold");
+  const italicLabel = useMsg("richtext.italic");
+  const linkLabel = useMsg("richtext.link");
+  const linkPrompt = useMsg("richtext.link.prompt");
+  React6.useEffect(() => {
+    if (ref.current && ref.current.innerHTML !== value) {
+      ref.current.innerHTML = value ?? "";
+    }
+  }, [value]);
+  const exec = (cmd, val) => {
+    document.execCommand(cmd, false, val);
+    if (ref.current) onChange(ref.current.innerHTML);
+  };
+  return /* @__PURE__ */ jsx(FieldLabel, { label: label ?? "", readOnly, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 rounded-md border border-input overflow-hidden", children: [
+    !readOnly && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 border-b px-1 py-0.5 bg-muted/30", children: [
+      /* @__PURE__ */ jsx(Toggle, { size: "sm", onPressedChange: () => exec("bold"), "aria-label": boldLabel, children: /* @__PURE__ */ jsx(Bold, { className: "h-3.5 w-3.5" }) }),
+      /* @__PURE__ */ jsx(Toggle, { size: "sm", onPressedChange: () => exec("italic"), "aria-label": italicLabel, children: /* @__PURE__ */ jsx(Italic, { className: "h-3.5 w-3.5" }) }),
+      /* @__PURE__ */ jsx(
+        Toggle,
+        {
+          size: "sm",
+          onPressedChange: () => {
+            const url = window.prompt(linkPrompt);
+            if (url) exec("createLink", url);
+          },
+          "aria-label": linkLabel,
+          children: /* @__PURE__ */ jsx(Link, { className: "h-3.5 w-3.5" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        contentEditable: !readOnly,
+        suppressContentEditableWarning: true,
+        onInput: () => {
+          if (ref.current) onChange(ref.current.innerHTML);
+        },
+        className: "min-h-[60px] px-3 py-2 text-sm outline-none"
+      }
+    )
+  ] }) });
+}
+function InputGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "input-group",
+      role: "group",
+      className: cn(
+        "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
+    }
+  );
+}
+var inputGroupAddonVariants = cva(
+  "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-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: {
+      align: "inline-start"
+    }
+  }
+);
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "input-group-addon",
+      "data-align": align,
+      className: cn(inputGroupAddonVariants({ align }), className),
+      onClick: (e) => {
+        if (e.target.closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      },
+      ...props
+    }
+  );
+}
+cva(
+  "flex items-center gap-2 text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        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"
+      }
+    },
+    defaultVariants: {
+      size: "xs"
+    }
+  }
+);
+function Command({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Command$1,
+    {
+      "data-slot": "command",
+      className: cn(
+        "flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "command-input-wrapper", className: "p-1 pb-0", children: /* @__PURE__ */ jsxs(InputGroup, { className: "h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!", children: [
+    /* @__PURE__ */ jsx(
+      Command$1.Input,
+      {
+        "data-slot": "command-input",
+        className: cn(
+          "w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }) })
+  ] }) });
+}
+function CommandList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Command$1.List,
+    {
+      "data-slot": "command-list",
+      className: cn(
+        "no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CommandEmpty({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Command$1.Empty,
+    {
+      "data-slot": "command-empty",
+      className: cn("py-6 text-center text-sm", className),
+      ...props
+    }
+  );
+}
+function CommandItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Command$1.Item,
+    {
+      "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",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(CheckIcon, { className: "ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" })
+      ]
+    }
+  );
+}
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "skeleton",
+      className: cn("animate-pulse rounded-md bg-muted", className),
+      ...props
+    }
+  );
+}
+function ExternalField({ value, onChange, fetchList, readOnly, label }) {
+  const [query, setQuery] = React6.useState("");
+  const [results, setResults] = React6.useState([]);
+  const [loading, setLoading] = React6.useState(false);
+  React6.useEffect(() => {
+    if (!fetchList) return;
+    setLoading(true);
+    const timer = setTimeout(async () => {
+      try {
+        const data = await fetchList(query);
+        setResults(data);
+      } catch {
+        setResults([]);
+      } finally {
+        setLoading(false);
+      }
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [query, fetchList]);
+  const selectedLabel = results.find((r) => r.value === value)?.label ?? String(value ?? "");
+  return /* @__PURE__ */ jsx(FieldLabel, { label: label ?? "", readOnly, children: /* @__PURE__ */ jsxs(Command, { className: "rounded-md border border-input", children: [
+    /* @__PURE__ */ jsx(
+      CommandInput,
+      {
+        placeholder: "Search...",
+        value: query,
+        onValueChange: setQuery,
+        disabled: readOnly
+      }
+    ),
+    /* @__PURE__ */ jsx(CommandList, { children: loading ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 p-2", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-3/4" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-1/2" })
+    ] }) : results.length === 0 ? /* @__PURE__ */ jsx(CommandEmpty, { children: "No results found." }) : results.map((r, i) => /* @__PURE__ */ jsx(
+      CommandItem,
+      {
+        "data-checked": r.value === value,
+        onSelect: () => onChange(r.value),
+        children: r.label
+      },
+      i
+    )) }),
+    value != null && /* @__PURE__ */ jsxs("div", { className: "border-t px-3 py-1.5 text-xs text-muted-foreground truncate", children: [
+      "Selected: ",
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: selectedLabel })
+    ] })
+  ] }) });
+}
+
+// src/core/overrides/fields/FieldTypesRegistry.ts
+var fieldTypesRegistry = {
+  text: TextField,
+  textarea: TextareaField,
+  number: NumberField,
+  select: SelectField,
+  radio: RadioField,
+  array: ArrayField,
+  object: ObjectField,
+  slot: SlotField,
+  custom: CustomField,
+  richtext: RichtextField,
+  external: ExternalField
+};
+function PuckRoot({ children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+var puckOverrides = {
+  drawer: EditorDrawer,
+  components: EditorComponents,
+  drawerItem: DrawerItem,
+  componentItem: DrawerItem,
+  outline: EditorOutline,
+  iframe: CanvasIframe,
+  preview: CanvasPreview,
+  componentOverlay: ComponentOverlay,
+  actionBar: ActionBar,
+  fields: FieldWrapper,
+  fieldTypes: fieldTypesRegistry,
+  puck: PuckRoot
+};
+
+export { ActionBar, CanvasIframe, CanvasPreview, ComponentOverlay, DrawerItem, EditorComponents, EditorDrawer, EditorOutline, FieldLabel, FieldWrapper, fieldTypesRegistry, puckOverrides };