@frontlit/page-builder 0.1.0-alpha.1 → 0.1.0-alpha.2

package/dist/{chunk-MO76KZY2.js → chunk-KQKSLI3L.js}

@@ -1,13 +1,15 @@
 "use client";
-import { blockRegistry, getAddableBlocks, getWidget, PageRenderer } from './chunk-SSQWYMQR.js';
-import { generateUniqueId, FieldGroup, TextField, ToggleField } from './chunk-7KIX4WAO.js';
-import { ThemeModeSwitcher } from './chunk-7W6Q4WA7.js';
-import { themes, cn, Button, Switch, Input, PageCard, PageCardContent, PageCardHeader, Link, Button2 } from './chunk-RBJBODQP.js';
+import { blockRegistry, getAddableBlocks, getWidget, PageRenderer } from './chunk-HDINUNI2.js';
+import { generateUniqueId, FieldGroup, TextField, ToggleField } from './chunk-UO7XGBGM.js';
+import { ThemeModeSwitcher } from './chunk-H4P5MFJI.js';
+import { themes, cn, Button, Switch, Input, PageCard, PageCardContent, PageCardHeader, Link, Button2 } from './chunk-SGNRWWG3.js';
+import { getMediaUrl } from './chunk-XU7ALPGQ.js';
 import React2, { useState, useMemo, useCallback, useRef, useEffect } from 'react';
 import * as Icons from 'lucide-react';
 import { Smartphone, Tablet, Monitor, Palette, Globe, Plus, HelpCircle, X, ImageIcon, Sparkles, ExternalLink, Check, ChevronLeft, LayoutTemplate, Layers3, Pin, ChevronDown, FilePenLine, Brush, ChevronRight, Type, SquareMousePointer, Columns3, Pencil, Info } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
+import { ImageUploadDialog } from '@frontlit/media-uploader';
 
 // src/utils/debounce.ts
 function debounce(fn, wait) {
@@ -47,9 +49,7 @@ function createWidgetInstance(name, overrides) {
 function ensureRequiredSharedWidgets(layout) {
   const header = layout.find((widget) => widget.name === "header") ?? createWidgetInstance("header");
   const footer = layout.find((widget) => widget.name === "footer") ?? createWidgetInstance("footer");
-  const body = layout.filter(
-    (widget) => !["header", "footer"].includes(widget.name)
-  );
+  const body = layout.filter((widget) => !["header", "footer"].includes(widget.name));
   return [
     {
       ...header,
@@ -473,58 +473,49 @@ function ColorSelector({
     onChange(newValue);
   };
   const swatchValue = /^#[0-9a-fA-F]{6}$/.test(localValue) ? localValue : "#000000";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex min-w-0 items-center justify-between gap-2",
-        className
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 items-center justify-between gap-2", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+      /* @__PURE__ */ jsx(PageBuilderPropertyHeader, { label: title, tooltip }),
+      description && /* @__PURE__ */ jsx("p", { className: "break-words text-xs text-muted-foreground", children: description })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "color",
+          value: swatchValue,
+          onChange: (e) => handleChange(e.currentTarget.value),
+          className: "h-7 w-9 shrink-0 cursor-pointer rounded-md border border-input bg-background p-0.5",
+          "aria-label": `${title} swatch`
+        }
       ),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
-          /* @__PURE__ */ jsx(PageBuilderPropertyHeader, { label: title, tooltip }),
-          description && /* @__PURE__ */ jsx("p", { className: "break-words text-xs text-muted-foreground", children: description })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "color",
-              value: swatchValue,
-              onChange: (e) => handleChange(e.currentTarget.value),
-              className: "h-7 w-9 shrink-0 cursor-pointer rounded-md border border-input bg-background p-0.5",
-              "aria-label": `${title} swatch`
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "text",
-              value: localValue ?? "",
-              placeholder: "#000000",
-              onChange: (e) => handleChange(e.currentTarget.value),
-              className: "h-7 w-20 min-w-0 rounded-md border border-input bg-background px-2 py-1 text-xs text-foreground outline-none focus:ring-2 focus:ring-ring/20",
-              "aria-label": `${title} hex value`
-            }
-          ),
-          allowReset && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              title: "Reset",
-              className: "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md hover:bg-muted/50",
-              onClick: (e) => {
-                e.preventDefault();
-                setLocalValue("");
-                onChange();
-              },
-              children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3 text-muted-foreground hover:text-foreground" })
-            }
-          )
-        ] })
-      ]
-    }
-  );
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: localValue ?? "",
+          placeholder: "#000000",
+          onChange: (e) => handleChange(e.currentTarget.value),
+          className: "h-7 w-20 min-w-0 rounded-md border border-input bg-background px-2 py-1 text-xs text-foreground outline-none focus:ring-2 focus:ring-ring/20",
+          "aria-label": `${title} hex value`
+        }
+      ),
+      allowReset && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          title: "Reset",
+          className: "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md hover:bg-muted/50",
+          onClick: (e) => {
+            e.preventDefault();
+            setLocalValue("");
+            onChange();
+          },
+          children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3 text-muted-foreground hover:text-foreground" })
+        }
+      )
+    ] })
+  ] });
 }
 var MAX_WIDTH_MAP = {
   1: "max-w-2xl",
@@ -594,9 +585,7 @@ function VerticalPaddingSelector({
   className = "",
   themeDefault
 }) {
-  const numericValue = Object.entries(PADDING_MAP).find(
-    ([_, v]) => v === (value ?? themeDefault)
-  )?.[0] || "6";
+  const numericValue = Object.entries(PADDING_MAP).find(([_, v]) => v === (value ?? themeDefault))?.[0] || "6";
   const handleChange = (newValue) => {
     if (newValue === void 0) {
       onChange();
@@ -1145,10 +1134,7 @@ function PanelSelect({
       "select",
       {
         id,
-        className: cn(
-          controlClass,
-          "cursor-pointer appearance-none pr-8"
-        ),
+        className: cn(controlClass, "cursor-pointer appearance-none pr-8"),
         value,
         onChange: (e) => onChange(e.target.value),
         children: options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
@@ -1255,7 +1241,7 @@ function FixedBackgroundToggle({
   ] }) });
 }
 function BackgroundPreview({ value }) {
-  const imageUrl = value.type === "image" && typeof value.media?.file === "string" ? value.media.file : void 0;
+  const imageUrl = value.type === "image" ? getMediaUrl(value.media) ?? void 0 : void 0;
   const previewStyle = (() => {
     if (value.type === "color") {
       return {
@@ -1283,43 +1269,36 @@ function BackgroundPreview({ value }) {
   })();
   const typeLabel = BG_TYPES.find((t) => t.type === value.type)?.label ?? "Background";
   return /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full overflow-hidden rounded-xl border border-border/70 shadow-sm", children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "relative h-14 w-full max-w-full",
-        style: previewStyle,
-        children: [
-          value.type === "image" && imageUrl && (value.blur || 0) > 0 ? /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "absolute inset-0",
-              style: {
-                backdropFilter: `blur(${value.blur}px)`
-              }
-            }
-          ) : null,
-          value.type === "image" && value.overlay?.color ? /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "absolute inset-0",
-              style: {
-                backgroundColor: value.overlay.color,
-                opacity: (value.overlay.opacity || 0) / 10,
-                mixBlendMode: value.overlay.blendMode || "normal"
-              }
-            }
-          ) : null,
-          value.type === "image" && !imageUrl ? /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex items-center justify-center gap-1.5 text-[11px] text-muted-foreground", children: [
-            /* @__PURE__ */ jsx(ImageIcon, { className: "h-3.5 w-3.5", "aria-hidden": true }),
-            "No image yet"
-          ] }) : null,
-          value.type === "gradient" && !value.backgroundImage ? /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex items-center justify-center gap-1.5 text-[11px] text-muted-foreground", children: [
-            /* @__PURE__ */ jsx(Sparkles, { className: "h-3.5 w-3.5", "aria-hidden": true }),
-            "Choose a pattern"
-          ] }) : null
-        ]
-      }
-    ),
+    /* @__PURE__ */ jsxs("div", { className: "relative h-14 w-full max-w-full", style: previewStyle, children: [
+      value.type === "image" && imageUrl && (value.blur || 0) > 0 ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute inset-0",
+          style: {
+            backdropFilter: `blur(${value.blur}px)`
+          }
+        }
+      ) : null,
+      value.type === "image" && value.overlay?.color ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute inset-0",
+          style: {
+            backgroundColor: value.overlay.color,
+            opacity: (value.overlay.opacity || 0) / 10,
+            mixBlendMode: value.overlay.blendMode || "normal"
+          }
+        }
+      ) : null,
+      value.type === "image" && !imageUrl ? /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex items-center justify-center gap-1.5 text-[11px] text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(ImageIcon, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+        "No image yet"
+      ] }) : null,
+      value.type === "gradient" && !value.backgroundImage ? /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex items-center justify-center gap-1.5 text-[11px] text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(Sparkles, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+        "Choose a pattern"
+      ] }) : null
+    ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-t border-border/60 bg-muted/20 px-3 py-1.5", children: [
       /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground", children: "Preview" }),
       /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-foreground", children: typeLabel })
@@ -1331,7 +1310,9 @@ function SectionBackgroundPanel({
   onChange,
   className
 }) {
-  const [patternFilter, setPatternFilter] = useState("all");
+  const [patternFilter, setPatternFilter] = useState(
+    "all"
+  );
   const handleTypeChange = (type) => {
     onChange({ ...value, type });
   };
@@ -1453,29 +1434,115 @@ function SectionBackgroundPanel({
         SectionCard,
         {
           title: "Source",
-          description: "Paste a public image URL to use as the section backdrop.",
-          children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "background-image-url", children: "Image URL" }),
-            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx(
-                ImageIcon,
-                {
-                  className: "pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground",
-                  "aria-hidden": true
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                PanelInput,
+          description: "Upload an image or paste a public URL for the section backdrop.",
+          children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            getMediaUrl(value.media) ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "relative aspect-video w-full overflow-hidden rounded-lg border border-border bg-muted/40", children: /* @__PURE__ */ jsx(
+                "img",
                 {
-                  id: "background-image-url",
-                  value: value.media?.file || "",
-                  onChange: (e) => handleBackgroundChange({
-                    media: e.target.value ? { file: e.target.value } : {}
-                  }),
-                  placeholder: "https://example.com/background.jpg",
-                  className: "pl-9"
+                  src: getMediaUrl(value.media),
+                  alt: "Background preview",
+                  className: "h-full w-full object-cover"
                 }
-              )
+              ) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  ImageUploadDialog,
+                  {
+                    title: "Change background image",
+                    description: "Upload an image or select one from your library.",
+                    onSelect: (selected) => {
+                      const selMedia = selected.media;
+                      const mediaLitId = selMedia?.mediaLitId ?? selMedia?.mediaId ?? void 0;
+                      handleBackgroundChange({
+                        media: {
+                          ...mediaLitId ? { mediaId: mediaLitId, mediaLitId } : {},
+                          url: selected.src,
+                          file: selected.src,
+                          thumbnailUrl: selMedia?.thumbnailUrl ?? selected.src,
+                          thumbnail: selMedia?.thumbnailUrl ?? selected.src,
+                          alt: selected.alt
+                        }
+                      });
+                    },
+                    children: /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        className: "inline-flex h-8 items-center justify-center rounded-lg border border-input bg-background px-3 text-xs font-medium text-foreground hover:bg-muted",
+                        children: [
+                          /* @__PURE__ */ jsx(ImageIcon, { className: "mr-1.5 h-3.5 w-3.5" }),
+                          "Change image"
+                        ]
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "inline-flex h-8 items-center justify-center rounded-lg border border-destructive/30 bg-background px-3 text-xs font-medium text-destructive hover:bg-destructive/10",
+                    onClick: () => handleBackgroundChange({ media: void 0 }),
+                    children: "Remove"
+                  }
+                )
+              ] })
+            ] }) : /* @__PURE__ */ jsx(
+              ImageUploadDialog,
+              {
+                title: "Choose background image",
+                description: "Upload an image or select one from your library.",
+                onSelect: (selected) => {
+                  const selMedia = selected.media;
+                  const mediaLitId = selMedia?.mediaLitId ?? selMedia?.mediaId ?? void 0;
+                  handleBackgroundChange({
+                    media: {
+                      ...mediaLitId ? { mediaId: mediaLitId, mediaLitId } : {},
+                      url: selected.src,
+                      file: selected.src,
+                      thumbnailUrl: selMedia?.thumbnailUrl ?? selected.src,
+                      thumbnail: selMedia?.thumbnailUrl ?? selected.src,
+                      alt: selected.alt
+                    }
+                  });
+                },
+                children: /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: "flex w-full items-center justify-center gap-2 rounded-lg border border-dashed border-border bg-muted/20 py-3 text-xs font-medium text-muted-foreground transition-colors hover:border-primary/40 hover:bg-muted/40 hover:text-foreground",
+                    children: [
+                      /* @__PURE__ */ jsx(ImageIcon, { className: "h-4 w-4" }),
+                      "Upload or choose image"
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 pt-1", children: [
+              /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "background-image-url", children: "Or paste image URL" }),
+              /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                /* @__PURE__ */ jsx(
+                  ImageIcon,
+                  {
+                    className: "pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground",
+                    "aria-hidden": true
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  PanelInput,
+                  {
+                    id: "background-image-url",
+                    value: getMediaUrl(value.media) || "",
+                    onChange: (e) => handleBackgroundChange({
+                      media: e.target.value ? { file: e.target.value, url: e.target.value } : void 0
+                    }),
+                    placeholder: "https://example.com/background.jpg",
+                    className: "pl-9"
+                  }
+                )
+              ] })
             ] })
           ] })
         }
@@ -1618,13 +1685,7 @@ function SectionBackgroundPanel({
                       className: "inline-flex items-center gap-1 text-[10px] font-medium text-muted-foreground underline-offset-2 hover:text-foreground hover:underline",
                       children: [
                         "Docs",
-                        /* @__PURE__ */ jsx(
-                          ExternalLink,
-                          {
-                            className: "h-3 w-3",
-                            "aria-hidden": true
-                          }
-                        )
+                        /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3", "aria-hidden": true })
                       ]
                     }
                   ),
@@ -1707,13 +1768,7 @@ function SectionBackgroundPanel({
                           maskImage: preset.apply.gradientMaskImage
                         },
                         "aria-hidden": true,
-                        children: isSelected ? /* @__PURE__ */ jsx("span", { className: "absolute right-1 top-1 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm", children: /* @__PURE__ */ jsx(
-                          Check,
-                          {
-                            className: "h-2.5 w-2.5",
-                            "aria-hidden": true
-                          }
-                        ) }) : null
+                        children: isSelected ? /* @__PURE__ */ jsx("span", { className: "absolute right-1 top-1 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm", children: /* @__PURE__ */ jsx(Check, { className: "h-2.5 w-2.5", "aria-hidden": true }) }) : null
                       }
                     ),
                     /* @__PURE__ */ jsx("span", { className: "truncate border-t border-border/60 px-1 py-1 text-[10px] font-semibold leading-tight text-foreground", children: preset.label })
@@ -1853,13 +1908,7 @@ function SectionBackgroundPanel({
                       className: "inline-flex items-center gap-1 text-[10px] font-medium text-muted-foreground underline-offset-2 hover:text-foreground hover:underline",
                       children: [
                         "Docs",
-                        /* @__PURE__ */ jsx(
-                          ExternalLink,
-                          {
-                            className: "h-3 w-3",
-                            "aria-hidden": true
-                          }
-                        )
+                        /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3", "aria-hidden": true })
                       ]
                     }
                   ),
@@ -1966,6 +2015,7 @@ function BlockSettings({
 }) {
   const [tab, setTab] = useState("data");
   const Editor = definition.editor;
+  const DesignEditor = definition.designEditor;
   const settings = instance.settings ?? {};
   return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 max-w-full flex-col", children: [
     /* @__PURE__ */ jsx(
@@ -1997,14 +2047,7 @@ function BlockSettings({
         })
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "pt-5", children: tab === "data" && Editor && /* @__PURE__ */ jsx(
-      Editor,
-      {
-        settings,
-        theme,
-        onChange
-      }
-    ) }),
+    /* @__PURE__ */ jsx("div", { className: "pt-5", children: tab === "data" && Editor && /* @__PURE__ */ jsx(Editor, { settings, theme, onChange }) }),
     tab === "design" && /* @__PURE__ */ jsxs("div", { className: "min-w-0 max-w-full space-y-5 pt-5", children: [
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: "Refine the look" }),
@@ -2039,13 +2082,7 @@ function BlockSettings({
                   }),
                   children: [
                     /* @__PURE__ */ jsx("span", { children: layout.name }),
-                    active && /* @__PURE__ */ jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(
-                      Check,
-                      {
-                        className: "h-3 w-3",
-                        "aria-hidden": "true"
-                      }
-                    ) })
+                    active && /* @__PURE__ */ jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(Check, { className: "h-3 w-3", "aria-hidden": "true" }) })
                   ]
                 },
                 layout.id
@@ -2054,6 +2091,14 @@ function BlockSettings({
           }
         )
       ] }),
+      DesignEditor && /* @__PURE__ */ jsx(
+        DesignEditor,
+        {
+          settings,
+          theme,
+          onChange
+        }
+      ),
       /* @__PURE__ */ jsx(
         DesignFieldGroup,
         {
@@ -2124,15 +2169,7 @@ function ThemeCard({
           /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-foreground", children: name }),
           /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
             onEdit && /* @__PURE__ */ jsx(CardButton, { label: `Edit ${name}`, onClick: onEdit, children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" }) }),
-            onUse && /* @__PURE__ */ jsx(
-              CardButton,
-              {
-                label: `Use ${name}`,
-                disabled: active,
-                onClick: onUse,
-                children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
-              }
-            )
+            onUse && /* @__PURE__ */ jsx(CardButton, { label: `Use ${name}`, disabled: active, onClick: onUse, children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) })
           ] })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: palette.map((color, i) => /* @__PURE__ */ jsx(
@@ -2151,14 +2188,7 @@ function PanelLabel({
   htmlFor,
   children
 }) {
-  return /* @__PURE__ */ jsx(
-    "label",
-    {
-      htmlFor,
-      className: "text-xs font-medium text-foreground",
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx("label", { htmlFor, className: "text-xs font-medium text-foreground", children });
 }
 function PanelInput2(props) {
   const { className, ...rest } = props;
@@ -2361,10 +2391,7 @@ var fontFamilyOptions = {
     { label: "Quicksand", value: "font-quicksand" }
   ]
 };
-function TypographySelector({
-  value,
-  onChange
-}) {
+function TypographySelector({ value, onChange }) {
   const update = (patch) => onChange({ ...value, ...patch });
   return /* @__PURE__ */ jsxs("div", { className: "space-y-6 p-2", children: [
     /* @__PURE__ */ jsx("div", { className: "h-[100px] overflow-auto rounded-lg border p-2", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-2", children: [
@@ -2395,16 +2422,7 @@ function TypographySelector({
             onChange: (e) => update({ fontFamily: e.target.value }),
             children: [
               !value?.fontFamily && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select font family" }),
-              Object.entries(fontFamilyOptions).map(
-                ([category, fonts]) => /* @__PURE__ */ jsx("optgroup", { label: category, children: fonts.map((font) => /* @__PURE__ */ jsx(
-                  "option",
-                  {
-                    value: font.value,
-                    children: font.label
-                  },
-                  font.value
-                )) }, category)
-              )
+              Object.entries(fontFamilyOptions).map(([category, fonts]) => /* @__PURE__ */ jsx("optgroup", { label: category, children: fonts.map((font) => /* @__PURE__ */ jsx("option", { value: font.value, children: font.label }, font.value)) }, category))
             ]
           }
         )
@@ -2510,25 +2528,14 @@ function InteractiveSelector({
           /* @__PURE__ */ jsx("div", { children: "Card content goes here" })
         ] }) });
       case "input":
-        return /* @__PURE__ */ jsx(
-          Input,
-          {
-            theme,
-            type: "text",
-            placeholder: "Demo Input"
-          }
-        );
+        return /* @__PURE__ */ jsx(Input, { theme, type: "text", placeholder: "Demo Input" });
       default:
         return null;
     }
   };
   const renderPaddingConfig = (allowedPaddingX, allowedPaddingY) => {
-    const filteredPaddingX = allowedPaddingX ? paddingOptions.x.filter(
-      (option) => allowedPaddingX.includes(option.value)
-    ) : paddingOptions.x;
-    const filteredPaddingY = allowedPaddingY ? paddingOptions.y.filter(
-      (option) => allowedPaddingY.includes(option.value)
-    ) : paddingOptions.y;
+    const filteredPaddingX = allowedPaddingX ? paddingOptions.x.filter((option) => allowedPaddingX.includes(option.value)) : paddingOptions.x;
+    const filteredPaddingY = allowedPaddingY ? paddingOptions.y.filter((option) => allowedPaddingY.includes(option.value)) : paddingOptions.y;
     return /* @__PURE__ */ jsx(AccordionSection, { title: "Padding", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
       /* @__PURE__ */ jsx(
         PanelSelect2,
@@ -2709,11 +2716,7 @@ var structureDisplayNames = {
   page: "Page",
   section: "Section"
 };
-function StructureSelector({
-  type,
-  theme,
-  onChange
-}) {
+function StructureSelector({ type, theme, onChange }) {
   if (type === "page") {
     const pageValue = theme.structure.page;
     return /* @__PURE__ */ jsx("div", { className: "space-y-6 p-2", children: /* @__PURE__ */ jsx(
@@ -2915,12 +2918,7 @@ var colorCategories = [
     ]
   }
 ];
-var paletteColorOrder = [
-  "primary",
-  "accent",
-  "secondary",
-  "border"
-];
+var paletteColorOrder = ["primary", "accent", "secondary", "border"];
 function capitalize(value) {
   return value.charAt(0).toUpperCase() + value.slice(1);
 }
@@ -2942,9 +2940,7 @@ function ThemeEditor({
   onApply,
   onCustomThemesChange
 }) {
-  const [navigationStack, setNavigationStack] = useState(
-    []
-  );
+  const [navigationStack, setNavigationStack] = useState([]);
   const [collapsedCategories, setCollapsedCategories] = useState(() => {
     const initial = {};
     typographyCategories.forEach((category) => {
@@ -2978,9 +2974,7 @@ function ThemeEditor({
     (themeItem, isSystem) => {
       let target = themeItem;
       if (isSystem) {
-        const takenNames = [...systemThemes, ...customThemes].map(
-          (t) => t.name
-        );
+        const takenNames = [...systemThemes, ...customThemes].map((t) => t.name);
         target = {
           id: generateUniqueId(),
           name: copyName(themeItem.name, takenNames),
@@ -3020,14 +3014,10 @@ function ThemeEditor({
   );
   const renderRootView = () => /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-muted-foreground", children: "System Themes" }),
-    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: systemThemes.map(
-      (themeItem) => renderThemeCard(themeItem, true)
-    ) }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: systemThemes.map((themeItem) => renderThemeCard(themeItem, true)) }),
     /* @__PURE__ */ jsx("hr", { className: "my-4 border-muted" }),
     /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-muted-foreground", children: "Custom Themes" }),
-    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: customThemes.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "No custom themes yet" }) : customThemes.map(
-      (themeItem) => renderThemeCard(themeItem, false)
-    ) })
+    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: customThemes.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "No custom themes yet" }) : customThemes.map((themeItem) => renderThemeCard(themeItem, false)) })
   ] });
   const renderCategoriesView = () => /* @__PURE__ */ jsx("div", { className: "space-y-1", children: sections.map((section) => /* @__PURE__ */ jsxs(
     "button",
@@ -3084,47 +3074,27 @@ function ThemeEditor({
           ))
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "space-y-4", children: colorCategories.map((category) => /* @__PURE__ */ jsx(
-        AccordionSection,
-        {
-          title: category.label,
-          children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: category.colors.map(
-            (color) => category.key === "shadows" ? /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "space-y-1.5",
-                children: [
-                  /* @__PURE__ */ jsx(PanelLabel, { children: color.displayName }),
-                  /* @__PURE__ */ jsx(
-                    PanelInput2,
-                    {
-                      value: colors[color.name],
-                      onChange: (e) => updateColor(
-                        color.name,
-                        e.target.value
-                      )
-                    }
-                  )
-                ]
-              },
-              color.name
-            ) : /* @__PURE__ */ jsx(
-              ColorSelector,
-              {
-                title: color.displayName,
-                value: colors[color.name],
-                onChange: (value) => updateColor(
-                  color.name,
-                  value ?? ""
-                ),
-                allowReset: false
-              },
-              color.name
-            )
-          ) })
-        },
-        category.key
-      )) })
+      /* @__PURE__ */ jsx("div", { className: "space-y-4", children: colorCategories.map((category) => /* @__PURE__ */ jsx(AccordionSection, { title: category.label, children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: category.colors.map(
+        (color) => category.key === "shadows" ? /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx(PanelLabel, { children: color.displayName }),
+          /* @__PURE__ */ jsx(
+            PanelInput2,
+            {
+              value: colors[color.name],
+              onChange: (e) => updateColor(color.name, e.target.value)
+            }
+          )
+        ] }, color.name) : /* @__PURE__ */ jsx(
+          ColorSelector,
+          {
+            title: color.displayName,
+            value: colors[color.name],
+            onChange: (value) => updateColor(color.name, value ?? ""),
+            allowReset: false
+          },
+          color.name
+        )
+      ) }) }, category.key)) })
     ] });
   };
   const renderTypographyList = () => /* @__PURE__ */ jsx("div", { className: "space-y-1", children: typographyCategories.map((category) => /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
@@ -3257,7 +3227,7 @@ function SeoEditor({
   onChange
 }) {
   const update = (next) => onChange({ ...seo, ...next });
-  const imageUrl = seo.socialImage?.file;
+  const imageUrl = getMediaUrl(seo.socialImage);
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
     /* @__PURE__ */ jsxs(FieldGroup, { title: "Search results", children: [
       /* @__PURE__ */ jsx(
@@ -3289,25 +3259,101 @@ function SeoEditor({
       )
     ] }),
     /* @__PURE__ */ jsxs(FieldGroup, { title: "Social card image", children: [
+      imageUrl ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: imageUrl,
+            alt: "Social card preview",
+            className: "aspect-[1200/630] w-full rounded-md border border-border object-cover"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            ImageUploadDialog,
+            {
+              title: "Change social card image",
+              description: "Upload an image or pick one from your library.",
+              onSelect: (selected) => {
+                const selMedia = selected.media;
+                const mediaLitId = selMedia?.mediaLitId ?? selMedia?.mediaId ?? void 0;
+                update({
+                  socialImage: {
+                    ...mediaLitId ? { mediaId: mediaLitId, mediaLitId } : {},
+                    url: selected.src,
+                    file: selected.src,
+                    thumbnailUrl: selMedia?.thumbnailUrl ?? selected.src,
+                    thumbnail: selMedia?.thumbnailUrl ?? selected.src,
+                    alt: selected.alt
+                  }
+                });
+              },
+              children: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "inline-flex h-8 items-center justify-center rounded-lg border border-input bg-background px-3 text-xs font-medium text-foreground hover:bg-muted",
+                  children: [
+                    /* @__PURE__ */ jsx(ImageIcon, { className: "mr-1.5 h-3.5 w-3.5" }),
+                    "Change image"
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "inline-flex h-8 items-center justify-center rounded-lg border border-destructive/30 bg-background px-3 text-xs font-medium text-destructive hover:bg-destructive/10",
+              onClick: () => update({ socialImage: void 0 }),
+              children: "Remove"
+            }
+          )
+        ] })
+      ] }) : /* @__PURE__ */ jsx(
+        ImageUploadDialog,
+        {
+          title: "Choose social card image",
+          description: "Upload an image or pick one from your library.",
+          onSelect: (selected) => {
+            const selMedia = selected.media;
+            const mediaLitId = selMedia?.mediaLitId ?? selMedia?.mediaId ?? void 0;
+            update({
+              socialImage: {
+                ...mediaLitId ? { mediaId: mediaLitId, mediaLitId } : {},
+                url: selected.src,
+                file: selected.src,
+                thumbnailUrl: selMedia?.thumbnailUrl ?? selected.src,
+                thumbnail: selMedia?.thumbnailUrl ?? selected.src,
+                alt: selected.alt
+              }
+            });
+          },
+          children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "flex w-full items-center justify-center gap-2 rounded-lg border border-dashed border-border bg-muted/20 py-3 text-xs font-medium text-muted-foreground transition-colors hover:border-primary/40 hover:bg-muted/40 hover:text-foreground",
+              children: [
+                /* @__PURE__ */ jsx(ImageIcon, { className: "h-4 w-4" }),
+                "Upload or choose image"
+              ]
+            }
+          )
+        }
+      ),
       /* @__PURE__ */ jsx(
         TextField,
         {
-          label: "Image URL",
-          value: imageUrl,
+          label: "Or paste image URL",
+          value: imageUrl ?? "",
           placeholder: "https://...",
-          onChange: (file) => update({
-            socialImage: file ? { mediaId: file, file } : void 0
+          onChange: (url) => update({
+            socialImage: url ? { url, file: url } : void 0
           })
         }
       ),
-      imageUrl && /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: imageUrl,
-          alt: "Social card preview",
-          className: "aspect-[1200/630] w-full rounded-md border border-border object-cover"
-        }
-      ),
       /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Shown when the page is shared on social networks. Recommended size 1200\xD7630." })
     ] })
   ] });
@@ -3326,14 +3372,10 @@ function PageBuilder({
   const [layout, setLayout] = useState(
     () => initialLayout ? ensureRequiredSharedWidgets(initialLayout) : createDefaultLayout()
   );
-  const [theme, setTheme] = useState(
-    () => initialTheme ?? getDefaultTheme()
-  );
+  const [theme, setTheme] = useState(() => initialTheme ?? getDefaultTheme());
   const [previewTheme, setPreviewTheme] = useState(null);
   const paintedTheme = previewTheme ?? theme;
-  const [seo, setSeo] = useState(
-    () => initialSeo ?? { robotsAllowed: true }
-  );
+  const [seo, setSeo] = useState(() => initialSeo ?? { robotsAllowed: true });
   const systemThemes = providedThemes?.system ?? themes;
   const [customThemes, setCustomThemes] = useState(
     () => providedThemes?.custom ?? []
@@ -3361,10 +3403,7 @@ function PageBuilder({
   const onChangeRef = useRef(onChange);
   onChangeRef.current = onChange;
   const emitChange = useMemo(
-    () => debounce(
-      (state) => onChangeRef.current?.(state),
-      500
-    ),
+    () => debounce((state) => onChangeRef.current?.(state), 500),
     []
   );
   useEffect(() => {
@@ -3394,10 +3433,7 @@ function PageBuilder({
     });
     if (movedTimeoutRef.current) clearTimeout(movedTimeoutRef.current);
     setMovedWidgetId(widgetId);
-    movedTimeoutRef.current = setTimeout(
-      () => setMovedWidgetId(null),
-      1500
-    );
+    movedTimeoutRef.current = setTimeout(() => setMovedWidgetId(null), 1500);
   }
   function deleteWidget(widgetId) {
     setLayout((prev) => {
@@ -3417,15 +3453,9 @@ function PageBuilder({
       if (insertAfter === "end" || insertAfter === null) {
         const footerIndex = prev.findIndex((w) => w.name === "footer");
         if (footerIndex === -1) return [...prev, instance];
-        return [
-          ...prev.slice(0, footerIndex),
-          instance,
-          ...prev.slice(footerIndex)
-        ];
+        return [...prev.slice(0, footerIndex), instance, ...prev.slice(footerIndex)];
       }
-      const afterIndex = prev.findIndex(
-        (w) => w.widgetId === insertAfter
-      );
+      const afterIndex = prev.findIndex((w) => w.widgetId === insertAfter);
       if (afterIndex === -1) return [...prev, instance];
       return [
         ...prev.slice(0, afterIndex + 1),
@@ -3437,9 +3467,7 @@ function PageBuilder({
     setPanel({ mode: "block", widgetId: instance.widgetId });
   }
   const selectedWidgetId = panel?.mode === "block" ? panel.widgetId : null;
-  const selectedInstance = layout.find(
-    (w) => w.widgetId === selectedWidgetId
-  );
+  const selectedInstance = layout.find((w) => w.widgetId === selectedWidgetId);
   const selectedDefinition = selectedInstance ? getWidget(selectedInstance.name) : void 0;
   const showBlockPanel = Boolean(
     panel?.mode === "block" && selectedInstance && selectedDefinition?.editor
@@ -3534,10 +3562,7 @@ function PageBuilder({
                   instance: selectedInstance,
                   definition: selectedDefinition,
                   theme,
-                  onChange: (settings) => updateWidgetSettings(
-                    selectedInstance.widgetId,
-                    settings
-                  )
+                  onChange: (settings) => updateWidgetSettings(selectedInstance.widgetId, settings)
                 },
                 selectedInstance.widgetId
               )
@@ -3576,5 +3601,5 @@ function PageBuilder({
 }
 
 export { BlockPicker, BuilderTopBar, ColorSelector, ContentPaddingSelector, MaxWidthSelector, PATTERN_PRESETS, PageBuilder, PageBuilderPropertyHeader, PageBuilderSlider, SectionBackgroundPanel, SeoEditor, SettingsPanel, ThemeEditor, VerticalPaddingSelector, createDefaultLayout, createWidgetInstance, ensureRequiredSharedWidgets, getDefaultTheme, getMaxWidthTWClass, getVerticalPaddingTWClass };
-//# sourceMappingURL=chunk-MO76KZY2.js.map
-//# sourceMappingURL=chunk-MO76KZY2.js.map
+//# sourceMappingURL=chunk-KQKSLI3L.js.map
+//# sourceMappingURL=chunk-KQKSLI3L.js.map