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

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

@@ -1,23 +1,33 @@
 "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 React2, { useState, useMemo, useCallback, useRef, useEffect } from 'react';
+import { blockRegistry, resolveThemeColor, getAddableBlocks, getWidget, PageRenderer } from './chunk-IU4KATI2.js';
+import { ThemeModeSwitcher } from './chunk-BBI7UHOA.js';
+import { generateUniqueId, FieldGroup, TextField, ToggleField, TitleSizeField } from './chunk-K4WCLHMS.js';
+import { themes, cn, Button, Switch, Input, PageCard, PageCardContent, PageCardHeader, Link, Button2, fluidFontSize, TAILWIND_TEXT_PX } from './chunk-J7Z4UW45.js';
+import { getMediaUrl } from './chunk-XU7ALPGQ.js';
+import React3, { 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) {
   let timeout;
-  return function(...args) {
+  let pending = null;
+  const debounced = function(...args) {
+    pending = args;
     clearTimeout(timeout);
-    timeout = setTimeout(() => {
-      fn(...args);
-    }, wait);
+    timeout = setTimeout(debounced.flush, wait);
   };
+  debounced.flush = () => {
+    clearTimeout(timeout);
+    if (!pending) return;
+    const args = pending;
+    pending = null;
+    fn(...args);
+  };
+  return debounced;
 }
 
 // src/utils/color-mode.ts
@@ -44,12 +54,16 @@ function createWidgetInstance(name, overrides) {
     }
   };
 }
+function withDefaultSettings(layout) {
+  return layout.map((widget) => {
+    const defaults = blockRegistry[widget.name]?.getDefaultSettings?.();
+    return defaults ? { ...widget, settings: { ...defaults, ...widget.settings } } : widget;
+  });
+}
 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,
@@ -213,7 +227,11 @@ var THEME_FONT_VARS = [
   "--font-bebas-neue",
   "--font-lato",
   "--font-pt-sans",
-  "--font-quicksand"
+  "--font-quicksand",
+  "--font-archivo",
+  "--font-jetbrains-mono",
+  "--font-hanken-grotesk",
+  "--font-spline-sans-mono"
 ];
 function readCssVar(sourceDoc, name) {
   const view = sourceDoc.defaultView;
@@ -250,6 +268,7 @@ function PreviewFrame({
     const iframe = iframeRef.current;
     if (!iframe) return;
     let observer;
+    let resizeObserver;
     const init = () => {
       const doc = iframe.contentDocument;
       if (!doc) return;
@@ -268,12 +287,21 @@ function PreviewFrame({
         characterData: true
       });
       setMountNode(doc.body);
+      resizeObserver?.disconnect();
+      const measure = () => iframe.style.setProperty(
+        "--pb-scrollbar",
+        `${Math.max(0, iframe.clientWidth - doc.documentElement.clientWidth)}px`
+      );
+      resizeObserver = new ResizeObserver(measure);
+      resizeObserver.observe(doc.documentElement);
+      measure();
     };
     if (iframe.contentDocument?.readyState === "complete") init();
     iframe.addEventListener("load", init);
     return () => {
       iframe.removeEventListener("load", init);
       observer?.disconnect();
+      resizeObserver?.disconnect();
     };
   }, []);
   return /* @__PURE__ */ jsx("iframe", { ref: iframeRef, title, className, children: mountNode ? createPortal(children, mountNode) : null });
@@ -335,6 +363,67 @@ function BlockPicker({
     }
   );
 }
+function ConfirmDialog({
+  title,
+  description,
+  confirmLabel,
+  onConfirm,
+  onClose
+}) {
+  const cancelRef = useRef(null);
+  useEffect(() => {
+    cancelRef.current?.focus();
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [onClose]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4",
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "alertdialog",
+          "aria-modal": "true",
+          "aria-label": title,
+          className: "flex w-full max-w-sm flex-col gap-4 rounded-lg border border-border bg-background p-5 shadow-xl",
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: title }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs leading-5 text-muted-foreground", children: description })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  ref: cancelRef,
+                  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",
+                  onClick: onClose,
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "inline-flex h-8 items-center justify-center rounded-lg bg-destructive px-3 text-xs font-medium text-destructive-foreground hover:bg-destructive/90",
+                  onClick: onConfirm,
+                  children: confirmLabel
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
 function PanelHeader({
   title,
   onClose,
@@ -401,7 +490,6 @@ function PageBuilderSlider({
   onChange,
   tooltip,
   className,
-  allowsReset = false,
   unit = "px"
 }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2.5", className), children: [
@@ -424,20 +512,7 @@ function PageBuilderSlider({
             className: "h-7 w-12 rounded-md border border-input bg-muted/20 px-1.5 py-1 text-center text-xs font-semibold text-foreground outline-none transition-colors focus:border-ring focus:bg-background focus:ring-2 focus:ring-ring/20"
           }
         ),
-        unit && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-muted-foreground", children: unit }),
-        allowsReset && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            title: "Reset",
-            className: "inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            onClick: (e) => {
-              e.preventDefault();
-              onChange();
-            },
-            children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3 text-muted-foreground hover:text-foreground" })
-          }
-        )
+        unit && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-muted-foreground", children: unit })
       ] })
     ] }),
     /* @__PURE__ */ jsx(
@@ -464,67 +539,64 @@ function ColorSelector({
   allowReset = true,
   description
 }) {
-  const [localValue, setLocalValue] = React2.useState(value);
-  React2.useEffect(() => {
+  const [localValue, setLocalValue] = React3.useState(value);
+  React3.useEffect(() => {
     setLocalValue(value);
   }, [value]);
   const handleChange = (newValue) => {
     setLocalValue(newValue);
     onChange(newValue);
   };
+  const invalid = Boolean(localValue) && !resolveThemeColor(localValue);
   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`
-            }
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: localValue ?? "",
+          placeholder: "#000000 or oklch(\u2026)",
+          title: "A hex colour, or a CSS colour such as oklch(0.6 0.2 30)",
+          "aria-invalid": invalid || void 0,
+          onChange: (e) => handleChange(e.currentTarget.value),
+          className: cn(
+            "h-7 w-28 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",
+            invalid && "border-destructive focus:ring-destructive/30"
           ),
-          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" })
-            }
-          )
-        ] })
-      ]
-    }
-  );
+          "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",
@@ -547,10 +619,6 @@ function MaxWidthSelector({
     ([_, v]) => v === (value ?? themeDefault)
   )?.[0] || "5";
   const handleChange = (newValue) => {
-    if (newValue === void 0) {
-      onChange();
-      return;
-    }
     onChange(getMaxWidthTWClass(newValue));
   };
   return /* @__PURE__ */ jsx(
@@ -563,7 +631,6 @@ function MaxWidthSelector({
       value: parseInt(numericValue),
       tooltip: "Maximum width of the content",
       className,
-      allowsReset: true,
       unit: ""
     }
   );
@@ -594,14 +661,8 @@ 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();
-      return;
-    }
     onChange(getVerticalPaddingTWClass(newValue));
   };
   return /* @__PURE__ */ jsx(
@@ -1145,10 +1206,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 +1313,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 +1341,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 +1382,9 @@ function SectionBackgroundPanel({
   onChange,
   className
 }) {
-  const [patternFilter, setPatternFilter] = useState("all");
+  const [patternFilter, setPatternFilter] = useState(
+    "all"
+  );
   const handleTypeChange = (type) => {
     onChange({ ...value, type });
   };
@@ -1453,29 +1506,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,
+          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",
                 {
-                  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: 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 +1757,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 +1840,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 +1980,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 +2087,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 +2119,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 +2154,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 +2163,21 @@ function BlockSettings({
           }
         )
       ] }),
+      DesignEditor && /* @__PURE__ */ jsx(
+        DesignEditor,
+        {
+          settings,
+          theme,
+          onChange
+        }
+      ),
+      definition.titleSize && /* @__PURE__ */ jsx(FieldGroup, { title: "Title", children: /* @__PURE__ */ jsx(
+        TitleSizeField,
+        {
+          settings,
+          onChange: (partial) => onChange({ ...settings, ...partial })
+        }
+      ) }),
       /* @__PURE__ */ jsx(
         DesignFieldGroup,
         {
@@ -2124,15 +2248,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 +2267,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;
@@ -2338,7 +2447,8 @@ var fontFamilyOptions = {
     { label: "Roboto", value: "font-roboto" },
     { label: "Mulish", value: "font-mulish" },
     { label: "Nunito", value: "font-nunito" },
-    { label: "Work Sans", value: "font-work-sans" }
+    { label: "Work Sans", value: "font-work-sans" },
+    { label: "Hanken Grotesk", value: "font-hanken-grotesk" }
   ],
   Serif: [
     { label: "Merriweather", value: "font-merriweather" },
@@ -2353,19 +2463,30 @@ var fontFamilyOptions = {
     { label: "Raleway", value: "font-raleway" },
     { label: "Rubik", value: "font-rubik" },
     { label: "Oswald", value: "font-oswald" },
-    { label: "Bebas Neue", value: "font-bebas-neue" }
+    { label: "Bebas Neue", value: "font-bebas-neue" },
+    { label: "Archivo", value: "font-archivo" }
   ],
   Modern: [
     { label: "Lato", value: "font-lato" },
     { label: "PT Sans", value: "font-pt-sans" },
     { label: "Quicksand", value: "font-quicksand" }
+  ],
+  Mono: [
+    { label: "JetBrains Mono", value: "font-jetbrains-mono" },
+    { label: "Spline Sans Mono", value: "font-spline-sans-mono" }
   ]
 };
+function defaultFluid(fontSize) {
+  const max = TAILWIND_TEXT_PX[fontSize ?? ""] ?? 48;
+  return { min: Math.round(max * 0.66), max };
+}
 function TypographySelector({
   value,
-  onChange
+  onChange,
+  allowFluid
 }) {
   const update = (patch) => onChange({ ...value, ...patch });
+  const fluid = value?.fluid;
   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: [
       /* @__PURE__ */ jsx(PanelLabel, { children: "Preview" }),
@@ -2380,6 +2501,7 @@ function TypographySelector({
             value?.letterSpacing || "",
             value?.textTransform || "normal-case"
           ),
+          style: fluid ? { fontSize: fluidFontSize(fluid) } : void 0,
           children: "The quick brown fox jumps over the lazy dog"
         }
       )
@@ -2395,25 +2517,61 @@ 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))
             ]
           }
         )
       ] }),
+      allowFluid && /* @__PURE__ */ jsxs("div", { className: "space-y-3 rounded-md border p-2", children: [
+        /* @__PURE__ */ jsxs("label", { className: "flex items-center justify-between gap-3 text-xs font-medium text-foreground", children: [
+          "Scale with screen size",
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: Boolean(fluid),
+              onChange: (e) => update({
+                fluid: e.target.checked ? defaultFluid(value.fontSize) : void 0
+              })
+            }
+          )
+        ] }),
+        fluid && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+            /* @__PURE__ */ jsx(PanelLabel, { htmlFor: "fluid-min", children: "Phone size (px)" }),
+            /* @__PURE__ */ jsx(
+              PanelInput2,
+              {
+                id: "fluid-min",
+                type: "number",
+                min: 8,
+                max: 200,
+                value: fluid.min,
+                onChange: (e) => update({ fluid: { ...fluid, min: Number(e.target.value) || 0 } })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+            /* @__PURE__ */ jsx(PanelLabel, { htmlFor: "fluid-max", children: "Desktop size (px)" }),
+            /* @__PURE__ */ jsx(
+              PanelInput2,
+              {
+                id: "fluid-max",
+                type: "number",
+                min: 8,
+                max: 200,
+                value: fluid.max,
+                onChange: (e) => update({ fluid: { ...fluid, max: Number(e.target.value) || 0 } })
+              }
+            )
+          ] })
+        ] })
+      ] }),
       /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
         /* @__PURE__ */ jsx(
           PanelSelect2,
           {
-            title: "Font Size",
+            title: fluid ? "Font Size (unused while scaling)" : "Font Size",
             value: value?.fontSize || "",
             onChange: (v) => update({ fontSize: v }),
             options: fontSizeOptions,
@@ -2510,25 +2668,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 +2856,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(
@@ -2769,7 +2912,24 @@ function StructureSelector({
           updatePadding({ y });
         }
       }
-    )
+    ),
+    /* @__PURE__ */ jsxs("label", { className: "flex items-center justify-between gap-3 text-xs font-medium text-foreground", children: [
+      "Hairline between sections",
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: Boolean(sectionValue?.dividers),
+          onChange: (e) => onChange({
+            ...theme,
+            structure: {
+              ...theme.structure,
+              section: { ...sectionValue, dividers: e.target.checked || void 0 }
+            }
+          })
+        }
+      )
+    ] })
   ] });
 }
 var sections = [
@@ -2795,6 +2955,7 @@ var sections = [
   }
 ];
 var typographyDisplayNames = {
+  display: "Display (hero)",
   header1: "Header 1",
   header2: "Header 2",
   header3: "Header 3",
@@ -2807,12 +2968,26 @@ var typographyDisplayNames = {
   caption: "Caption",
   link: "Link",
   button: "Button Text",
-  input: "Input Text"
+  input: "Input Text",
+  code: "Code"
+};
+var DEFAULT_CODE_TYPOGRAPHY = {
+  fontFamily: "font-jetbrains-mono",
+  fontSize: "text-sm",
+  fontWeight: "font-normal",
+  lineHeight: "leading-relaxed"
 };
+var fluidTypography = /* @__PURE__ */ new Set([
+  "display",
+  "header1",
+  "header2",
+  "header3",
+  "header4"
+]);
 var typographyCategories = [
   {
     name: "Headers",
-    items: ["header1", "header2", "header3", "header4", "preheader"]
+    items: ["display", "header1", "header2", "header3", "header4", "preheader"]
   },
   {
     name: "Subheaders",
@@ -2824,7 +2999,7 @@ var typographyCategories = [
   },
   {
     name: "Interactive Elements",
-    items: ["link", "button", "input"]
+    items: ["link", "button", "input", "code"]
   }
 ];
 var colorCategories = [
@@ -2915,12 +3090,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,45 +3112,35 @@ function ThemeEditor({
   onApply,
   onCustomThemesChange
 }) {
-  const [navigationStack, setNavigationStack] = useState(
-    []
-  );
-  const [collapsedCategories, setCollapsedCategories] = useState(() => {
-    const initial = {};
-    typographyCategories.forEach((category) => {
-      initial[category.name] = true;
-    });
-    return initial;
-  });
+  const [navigationStack, setNavigationStack] = useState([]);
   const navigateTo = useCallback((item) => {
     setNavigationStack((prev) => [...prev, item]);
   }, []);
   const navigateBack = useCallback(() => {
     setNavigationStack((prev) => prev.slice(0, -1));
   }, []);
-  const toggleCategory = useCallback((categoryName) => {
-    setCollapsedCategories((prev) => ({
-      ...prev,
-      [categoryName]: !prev[categoryName]
-    }));
-  }, []);
-  const applyStyle = useCallback(
-    (style) => {
-      const updated = { ...theme, theme: style };
-      onApply(updated);
+  const commitTheme = useCallback(
+    (updated) => {
+      if (updated.id === appliedThemeId) {
+        onApply(updated);
+      } else {
+        onPreview(updated);
+      }
       onCustomThemesChange(
         customThemes.map((t) => t.id === updated.id ? updated : t)
       );
     },
-    [theme, customThemes, onApply, onCustomThemesChange]
+    [appliedThemeId, customThemes, onApply, onPreview, onCustomThemesChange]
+  );
+  const applyStyle = useCallback(
+    (style) => commitTheme({ ...theme, theme: style }),
+    [theme, commitTheme]
   );
   const startEditing = useCallback(
     (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),
@@ -2988,10 +3148,10 @@ function ThemeEditor({
         };
         onCustomThemesChange([...customThemes, target]);
       }
-      onApply(target);
+      onPreview(target);
       setNavigationStack([{ id: "categories", label: target.name }]);
     },
-    [systemThemes, customThemes, onApply, onCustomThemesChange]
+    [systemThemes, customThemes, onPreview, onCustomThemesChange]
   );
   const renderDrillButton = (label, onClick) => /* @__PURE__ */ jsxs(
     "button",
@@ -3020,14 +3180,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,80 +3240,72 @@ 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: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        className: "flex w-full items-center rounded px-2 py-1.5 text-sm transition-colors hover:bg-muted",
-        onClick: () => toggleCategory(category.name),
-        children: [
-          /* @__PURE__ */ jsx(
-            ChevronDown,
+  const renderTypographyView = () => {
+    const updateTypography = (key, value) => applyStyle({
+      ...theme.theme,
+      typography: { ...theme.theme.typography, [key]: value }
+    });
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+      /* @__PURE__ */ jsx(
+        PanelSelect2,
+        {
+          title: "Highlighted title words (*like this*)",
+          value: theme.theme.highlight ?? "color",
+          onChange: (highlight) => applyStyle({ ...theme.theme, highlight }),
+          options: [
+            { label: "Primary colour text", value: "color" },
+            { label: "Marker in primary colour", value: "marker" }
+          ]
+        }
+      ),
+      typographyCategories.map((category) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-muted-foreground", children: category.name }),
+        category.items.map((typography) => {
+          const key = typography;
+          const value = theme.theme.typography[key] ?? (key === "display" ? theme.theme.typography.header1 : void 0) ?? (key === "code" ? DEFAULT_CODE_TYPOGRAPHY : void 0);
+          if (!value) return null;
+          return /* @__PURE__ */ jsx(
+            AccordionSection,
             {
-              className: cn(
-                "mr-2 h-4 w-4 transition-transform",
-                collapsedCategories[category.name] ? "rotate-[-90deg]" : "rotate-0"
+              title: typographyDisplayNames[typography] || capitalize(typography),
+              children: /* @__PURE__ */ jsx(
+                TypographySelector,
+                {
+                  value,
+                  allowFluid: fluidTypography.has(typography),
+                  onChange: (value2) => updateTypography(key, value2)
+                }
               )
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-muted-foreground", children: category.name })
-        ]
-      }
-    ),
-    !collapsedCategories[category.name] && /* @__PURE__ */ jsx("div", { children: category.items.map(
-      (typography) => renderDrillButton(
-        typographyDisplayNames[typography] || capitalize(typography),
-        () => navigateTo({
-          id: typography,
-          label: typographyDisplayNames[typography] || capitalize(typography)
+            },
+            typography
+          );
         })
-      )
-    ) })
-  ] }, category.name)) });
+      ] }, category.name))
+    ] });
+  };
   const renderInteractivesList = () => /* @__PURE__ */ jsx("div", { className: "space-y-1", children: Object.keys(interactiveDisplayNames).map(
     (interactive) => renderDrillButton(
       interactiveDisplayNames[interactive] || capitalize(interactive),
@@ -3182,22 +3330,6 @@ function ThemeEditor({
     if (!currentItem) {
       return renderRootView();
     }
-    if (parentItem?.id === "typography" && currentItem.id in theme.theme.typography) {
-      const key = currentItem.id;
-      return /* @__PURE__ */ jsx(
-        TypographySelector,
-        {
-          value: theme.theme.typography[key],
-          onChange: (value) => applyStyle({
-            ...theme.theme,
-            typography: {
-              ...theme.theme.typography,
-              [key]: value
-            }
-          })
-        }
-      );
-    }
     if (parentItem?.id === "interactives" && currentItem.id in theme.theme.interactives) {
       return /* @__PURE__ */ jsx(
         InteractiveSelector,
@@ -3224,7 +3356,7 @@ function ThemeEditor({
       case "colors":
         return renderColorsView();
       case "typography":
-        return renderTypographyList();
+        return renderTypographyView();
       case "interactives":
         return renderInteractivesList();
       case "structure":
@@ -3246,7 +3378,35 @@ function ThemeEditor({
             children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-muted-foreground", children: navigationStack[navigationStack.length - 1].label })
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-muted-foreground", children: navigationStack.length === 1 ? theme.name : navigationStack[navigationStack.length - 1].label })
+      ] }),
+      navigationStack.length === 1 && /* @__PURE__ */ jsxs("div", { className: "space-y-3 pb-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx(PanelLabel, { htmlFor: "theme-name", children: "Theme name" }),
+          /* @__PURE__ */ jsx(
+            PanelInput2,
+            {
+              id: "theme-name",
+              value: theme.name,
+              onChange: (e) => commitTheme({ ...theme, name: e.target.value })
+            }
+          )
+        ] }),
+        theme.id === appliedThemeId ? /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
+          "This is your site theme"
+        ] }) : /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "inline-flex h-8 w-full items-center justify-center gap-1.5 rounded-md bg-primary px-3 text-xs font-medium text-primary-foreground hover:bg-primary/90",
+            onClick: () => onApply(theme),
+            children: [
+              /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
+              "Use this theme"
+            ]
+          }
+        )
       ] }),
       /* @__PURE__ */ jsx("div", { className: "py-2", children: getCurrentView() })
     ] })
@@ -3257,7 +3417,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 +3449,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." })
     ] })
   ] });
@@ -3324,16 +3560,12 @@ function PageBuilder({
   className
 }) {
   const [layout, setLayout] = useState(
-    () => initialLayout ? ensureRequiredSharedWidgets(initialLayout) : createDefaultLayout()
-  );
-  const [theme, setTheme] = useState(
-    () => initialTheme ?? getDefaultTheme()
+    () => initialLayout ? ensureRequiredSharedWidgets(withDefaultSettings(initialLayout)) : createDefaultLayout()
   );
+  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 ?? []
@@ -3343,6 +3575,7 @@ function PageBuilder({
   const [device, setDevice] = useState("desktop");
   const [panel, setPanel] = useState(null);
   const [insertAfter, setInsertAfter] = useState(null);
+  const [pendingDeleteId, setPendingDeleteId] = useState(null);
   const [movedWidgetId, setMovedWidgetId] = useState(null);
   const movedTimeoutRef = useRef(null);
   useEffect(() => {
@@ -3361,15 +3594,13 @@ 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(() => {
     emitChange({ layout, theme, seo, customThemes });
   }, [layout, theme, seo, customThemes]);
+  useEffect(() => emitChange.flush, [emitChange]);
   const addableBlocks = useMemo(() => getAddableBlocks(), []);
   function updateWidgetSettings(widgetId, settings) {
     setLayout(
@@ -3392,12 +3623,12 @@ function PageBuilder({
       [next[index], next[targetIndex]] = [next[targetIndex], next[index]];
       return next;
     });
+    highlightWidget(widgetId);
+  }
+  function highlightWidget(widgetId) {
     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,16 +3648,14 @@ 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);
+      if (afterIndex === -1 || prev[afterIndex].name === "footer") {
+        const footerIndex = prev.findIndex((w) => w.name === "footer");
+        if (footerIndex === -1) return [...prev, instance];
+        return [...prev.slice(0, footerIndex), instance, ...prev.slice(footerIndex)];
       }
-      const afterIndex = prev.findIndex(
-        (w) => w.widgetId === insertAfter
-      );
-      if (afterIndex === -1) return [...prev, instance];
       return [
         ...prev.slice(0, afterIndex + 1),
         instance,
@@ -3434,12 +3663,11 @@ function PageBuilder({
       ];
     });
     setInsertAfter(null);
+    highlightWidget(instance.widgetId);
     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
@@ -3472,7 +3700,7 @@ function PageBuilder({
             onDeviceChange: setDevice,
             onOpenTheme: () => setPanel({ mode: "theme" }),
             onOpenSeo: () => setPanel({ mode: "seo" }),
-            onAddBlock: () => setInsertAfter("end"),
+            onAddBlock: () => setInsertAfter(selectedWidgetId ?? "end"),
             allowThemeEditing
           }
         ),
@@ -3493,8 +3721,9 @@ function PageBuilder({
                 {
                   className: cn(
                     "h-full w-full max-w-full transition-[max-width] duration-300",
-                    device === "mobile" && "max-w-[390px] border-x",
-                    device === "tablet" && "max-w-[768px] border-x"
+                    // Device width plus the 2px border and the measured scrollbar.
+                    device === "mobile" && "max-w-[calc(392px_+_var(--pb-scrollbar,0px))] border-x",
+                    device === "tablet" && "max-w-[calc(770px_+_var(--pb-scrollbar,0px))] border-x"
                   ),
                   children: /* @__PURE__ */ jsx(
                     PageRenderer,
@@ -3503,7 +3732,6 @@ function PageBuilder({
                       theme: paintedTheme,
                       pageData,
                       nextTheme: resolvedMode,
-                      themeMode: mode,
                       onThemeModeChange: setMode,
                       editing: true,
                       selectedWidgetId: selectedWidgetId ?? void 0,
@@ -3511,7 +3739,7 @@ function PageBuilder({
                       onSelectWidget: (id) => setPanel({ mode: "block", widgetId: id }),
                       onMoveWidgetUp: (id) => moveWidget(id, -1),
                       onMoveWidgetDown: (id) => moveWidget(id, 1),
-                      onDeleteWidget: deleteWidget,
+                      onDeleteWidget: setPendingDeleteId,
                       onAddWidgetBelow: (id) => setInsertAfter(id),
                       linkComponent
                     }
@@ -3534,10 +3762,7 @@ function PageBuilder({
                   instance: selectedInstance,
                   definition: selectedDefinition,
                   theme,
-                  onChange: (settings) => updateWidgetSettings(
-                    selectedInstance.widgetId,
-                    settings
-                  )
+                  onChange: (settings) => updateWidgetSettings(selectedInstance.widgetId, settings)
                 },
                 selectedInstance.widgetId
               )
@@ -3562,6 +3787,19 @@ function PageBuilder({
           ) }),
           showSeoPanel && /* @__PURE__ */ jsx(SettingsPanel, { title: "SEO", onClose: closePanel, children: /* @__PURE__ */ jsx(SeoEditor, { seo, onChange: setSeo }) })
         ] }),
+        pendingDeleteId !== null && /* @__PURE__ */ jsx(
+          ConfirmDialog,
+          {
+            title: `Delete ${getWidget(layout.find((w) => w.widgetId === pendingDeleteId)?.name ?? "")?.metadata.displayName ?? "block"}?`,
+            description: "This block and its content will be removed from the page draft.",
+            confirmLabel: "Delete",
+            onConfirm: () => {
+              deleteWidget(pendingDeleteId);
+              setPendingDeleteId(null);
+            },
+            onClose: () => setPendingDeleteId(null)
+          }
+        ),
         insertAfter !== null && /* @__PURE__ */ jsx(
           BlockPicker,
           {
@@ -3575,6 +3813,6 @@ 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
+export { BlockPicker, BuilderTopBar, ColorSelector, ContentPaddingSelector, MaxWidthSelector, PATTERN_PRESETS, PageBuilder, PageBuilderPropertyHeader, PageBuilderSlider, SectionBackgroundPanel, SeoEditor, SettingsPanel, ThemeEditor, VerticalPaddingSelector, createDefaultLayout, createWidgetInstance, ensureRequiredSharedWidgets, getDefaultTheme, getMaxWidthTWClass, getVerticalPaddingTWClass, withDefaultSettings };
+//# sourceMappingURL=chunk-GIKTOAQS.js.map
+//# sourceMappingURL=chunk-GIKTOAQS.js.map