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

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

@@ -1,10 +1,10 @@
 "use client";
-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 { 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 React2, { useState, useMemo, useCallback, useRef, useEffect } from 'react';
+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';
@@ -14,12 +14,20 @@ 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
@@ -46,6 +54,12 @@ 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");
@@ -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,14 +539,15 @@ 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), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
@@ -494,9 +570,14 @@ function ColorSelector({
         {
           type: "text",
           value: localValue ?? "",
-          placeholder: "#000000",
+          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: "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",
+          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"
+          ),
           "aria-label": `${title} hex value`
         }
       ),
@@ -538,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(
@@ -554,7 +631,6 @@ function MaxWidthSelector({
       value: parseInt(numericValue),
       tooltip: "Maximum width of the content",
       className,
-      allowsReset: true,
       unit: ""
     }
   );
@@ -587,10 +663,6 @@ function VerticalPaddingSelector({
 }) {
   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(
@@ -2099,6 +2171,13 @@ function BlockSettings({
           onChange
         }
       ),
+      definition.titleSize && /* @__PURE__ */ jsx(FieldGroup, { title: "Title", children: /* @__PURE__ */ jsx(
+        TitleSizeField,
+        {
+          settings,
+          onChange: (partial) => onChange({ ...settings, ...partial })
+        }
+      ) }),
       /* @__PURE__ */ jsx(
         DesignFieldGroup,
         {
@@ -2368,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" },
@@ -2383,16 +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 TypographySelector({ value, onChange }) {
+function defaultFluid(fontSize) {
+  const max = TAILWIND_TEXT_PX[fontSize ?? ""] ?? 48;
+  return { min: Math.round(max * 0.66), max };
+}
+function TypographySelector({
+  value,
+  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" }),
@@ -2407,6 +2501,7 @@ function TypographySelector({ value, onChange }) {
             value?.letterSpacing || "",
             value?.textTransform || "normal-case"
           ),
+          style: fluid ? { fontSize: fluidFontSize(fluid) } : void 0,
           children: "The quick brown fox jumps over the lazy dog"
         }
       )
@@ -2427,11 +2522,56 @@ function TypographySelector({ value, onChange }) {
           }
         )
       ] }),
+      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,
@@ -2772,7 +2912,24 @@ function StructureSelector({ type, theme, onChange }) {
           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 = [
@@ -2798,6 +2955,7 @@ var sections = [
   }
 ];
 var typographyDisplayNames = {
+  display: "Display (hero)",
   header1: "Header 1",
   header2: "Header 2",
   header3: "Header 3",
@@ -2810,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",
@@ -2827,7 +2999,7 @@ var typographyCategories = [
   },
   {
     name: "Interactive Elements",
-    items: ["link", "button", "input"]
+    items: ["link", "button", "input", "code"]
   }
 ];
 var colorCategories = [
@@ -2941,34 +3113,28 @@ function ThemeEditor({
   onCustomThemesChange
 }) {
   const [navigationStack, setNavigationStack] = useState([]);
-  const [collapsedCategories, setCollapsedCategories] = useState(() => {
-    const initial = {};
-    typographyCategories.forEach((category) => {
-      initial[category.name] = true;
-    });
-    return initial;
-  });
   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) => {
@@ -2982,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",
@@ -3097,37 +3263,49 @@ function ThemeEditor({
       ) }) }, 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),
@@ -3152,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,
@@ -3194,7 +3356,7 @@ function ThemeEditor({
       case "colors":
         return renderColorsView();
       case "typography":
-        return renderTypographyList();
+        return renderTypographyView();
       case "interactives":
         return renderInteractivesList();
       case "structure":
@@ -3216,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() })
     ] })
@@ -3370,7 +3560,7 @@ function PageBuilder({
   className
 }) {
   const [layout, setLayout] = useState(
-    () => initialLayout ? ensureRequiredSharedWidgets(initialLayout) : createDefaultLayout()
+    () => initialLayout ? ensureRequiredSharedWidgets(withDefaultSettings(initialLayout)) : createDefaultLayout()
   );
   const [theme, setTheme] = useState(() => initialTheme ?? getDefaultTheme());
   const [previewTheme, setPreviewTheme] = useState(null);
@@ -3385,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(() => {
@@ -3409,6 +3600,7 @@ function PageBuilder({
   useEffect(() => {
     emitChange({ layout, theme, seo, customThemes });
   }, [layout, theme, seo, customThemes]);
+  useEffect(() => emitChange.flush, [emitChange]);
   const addableBlocks = useMemo(() => getAddableBlocks(), []);
   function updateWidgetSettings(widgetId, settings) {
     setLayout(
@@ -3431,6 +3623,9 @@ 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);
@@ -3456,7 +3651,11 @@ function PageBuilder({
         return [...prev.slice(0, footerIndex), instance, ...prev.slice(footerIndex)];
       }
       const afterIndex = prev.findIndex((w) => w.widgetId === insertAfter);
-      if (afterIndex === -1) return [...prev, instance];
+      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)];
+      }
       return [
         ...prev.slice(0, afterIndex + 1),
         instance,
@@ -3464,6 +3663,7 @@ function PageBuilder({
       ];
     });
     setInsertAfter(null);
+    highlightWidget(instance.widgetId);
     setPanel({ mode: "block", widgetId: instance.widgetId });
   }
   const selectedWidgetId = panel?.mode === "block" ? panel.widgetId : null;
@@ -3500,7 +3700,7 @@ function PageBuilder({
             onDeviceChange: setDevice,
             onOpenTheme: () => setPanel({ mode: "theme" }),
             onOpenSeo: () => setPanel({ mode: "seo" }),
-            onAddBlock: () => setInsertAfter("end"),
+            onAddBlock: () => setInsertAfter(selectedWidgetId ?? "end"),
             allowThemeEditing
           }
         ),
@@ -3521,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,
@@ -3531,7 +3732,6 @@ function PageBuilder({
                       theme: paintedTheme,
                       pageData,
                       nextTheme: resolvedMode,
-                      themeMode: mode,
                       onThemeModeChange: setMode,
                       editing: true,
                       selectedWidgetId: selectedWidgetId ?? void 0,
@@ -3539,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
                     }
@@ -3587,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,
           {
@@ -3600,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-KQKSLI3L.js.map
-//# sourceMappingURL=chunk-KQKSLI3L.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