@riverbankcms/sdk 0.76.0 → 0.77.1

package/dist/{PreviewEditorSidebar-X2HWXFOL.mjs → PreviewEditorSidebar-DVUG7GK4.mjs}

@@ -1,6 +1,6 @@
 "use client";
-import { resolvePreviewDashboardSetupHandoff, buildPreviewDashboardSetupUrl, resolvePreviewSidebarChromeModel, resolvePreviewEditorGuidanceModel, canInspectSiteStyle, usePreviewThemeOverlay, resolveStyleConfiguratorInitialSnapshot, createStyleConfiguratorState, createOptimisticActionRunner, syncStyleConfiguratorState, isPreviewingChange, openRow, previewSiteStyle, applyResolvedSelections, previewButtonPersonality, planSiteChromeLookSelection, previewHeaderLook, previewFooterLook, previewPaletteVariant, setPaletteOverrides, toggleRow, cancelPreview, dismissWarnings, dismissNotices, markApplyFailed, markApplySaved, markApplySaving, canApplySiteStyle, buildSiteChromeLookModels, cycleSiteChromeLookId, cycleableSiteChromeOptions } from './chunk-TW2Y4RR5.mjs';
-import { KeyboardCode, getBlockDefinition, CSS, useSdkConfig, listBlockDescriptors, useSensor, PointerSensor, useSensors, deleteBlock, createEditorRemoveBlockCommand, asEditorBlockId, DndContext, closestCenter, Button, Plus, useDroppable, useDraggable, useCombinedRefs, isKeyboardEvent, transformSdkBlockToManifest, Card, cn, Collapsible, CollapsibleContent, listContentTypes, createBlock, createEditorReorderBlocksCommand, reorderBlocks, mutateBlockContent, useDndContext, useUniqueId, useIsomorphicLayoutEffect, EmptyState, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Search, getClientRect, resolveBlockTitle, CardHeader, GripVertical, ChevronRight, CardTitle, ArrowUp, ArrowDown, DropdownMenu, DropdownMenuTrigger, EllipsisVertical, DropdownMenuContent, DropdownMenuItem, Settings, DropdownMenuSeparator, Copy, Trash2, DialogFooter, DialogClose, CardContent, transformSdkBlockToDefinition, createEditorInsertBlockCommand, LoaderCircle, ChevronDown, normalEditorCuratedPromotedFieldPaths, resolveVisiblePromotedFieldPathsForEditorBlock, createStoreBackend, validateBlockManifestIssues, Callout, CalloutTitle, unfinishedBlockCopy, CalloutDescription, recoveryConflictCopy, ManifestForm, asEditorBlockValues, Box, createManifestFormAdapter, getModalConfig, isNonEmptyValue, ScrollableDialogContent, FormRenderer, Tabs, TabsList, TabsTrigger, TabsContent, mergeManifestWithSdkOptions, augmentManifestWithStyleGroups, lucide_react_exports, isThemeV2NormalEditorRawStylePath, getFieldIntent, isHeaderField, isThemeV2NormalEditorRawStyleFieldName, unwrapResponse, useEntryController, useEditorUiStoreInstance, useUISelector, resolvePreviewSidebarTab, BackgroundGradientField, BackgroundColorField, X, omitRouteTitleFieldFromManifest, getRouteMetadataManifestForType, createManifestValidation, previewAssistantEnabled, useField, FieldFrame, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, isCtaIconName, Combobox, CTA_ICON_OPTIONS, getCtaIconComponent, useBackendWatch, useAsyncPickerOptions, shouldShowPickerSearch, normalizePickerSearchThreshold, Badge, resolvePickerSelectionLabel, useMediaEditorOptional, useRichTextEditor, RichTextEditorSurface, ThemeScope, useBlockContext, resolveMediaSlotContract, asRecord, parseAspectRatioValue, MediaEditor, PUBLIC_FILE_FIELD_KINDS, CollapsibleTrigger, ContentFieldsForm, getCuratedSiteStyle, compileSiteThemeFromSelections, paletteOverridesSchema, findButtonPersonality, findPaletteVariant, findHeaderLook, findFooterLook, headerLookCatalog, footerLookCatalog, isObjectRecord, EMPTY_DOC, getRichTextImagePositionFromTarget, insertOrReplaceRichTextImage, Pencil, foldSubroute, SUBROUTE_KINDS, Smartphone, Tablet, Monitor, Maximize2, DropdownMenuLabel, asSiteId, buildThemeRuntime, PaletteProvider, MediaEditorProvider, curatedSiteStyles, ChevronLeft, requireEntriesForCuratedChoices, buttonPersonalities, paletteVariants, resolveImageUrlWithContext, Root2, List, Trigger, Content, Input, Check, Label, isInternalResolvedLinkValue, Separator, toRoutableLinkPayload, useMediaEditor, MediaPickerMini, MediaPickerDialog, Surface, ColorPicker, getDirectImageUrlForMediaAsset, isSvgMimeType } from './chunk-LYI7TEMH.mjs';
+import { resolvePreviewDashboardSetupHandoff, buildPreviewDashboardSetupUrl, resolvePreviewSidebarChromeModel, resolvePreviewEditorGuidanceModel, canInspectSiteStyle, usePreviewDesignCoordinator, resolveStyleConfiguratorInitialSnapshot, createStyleConfiguratorState, createOptimisticActionRunner, syncStyleConfiguratorState, isPreviewingChange, planSiteStylePreviewChange, openRow, previewSiteStyle, applyResolvedSelections, previewButtonPersonality, previewHeaderLayout, previewHeaderStyle, planSiteChromeLookSelection, previewFooterLook, previewPaletteVariant, previewTypographyPreset, setTypographyBodyFontOverride, setTypographyHeadingFontOverride, clearTypographyFontOverrides, setPaletteOverrides, toggleRow, cancelPreview, dismissWarnings, dismissNotices, markApplyFailed, markApplySaved, markApplySaving, canApplySiteStyle, buildSiteChromeLookModels, cycleSiteChromeLookId, cycleableSiteChromeOptions } from './chunk-IENWFSLO.mjs';
+import { KeyboardCode, getBlockDefinition, CSS, useSdkConfig, listBlockDescriptors, useSensor, PointerSensor, useSensors, deleteBlock, createEditorRemoveBlockCommand, asEditorBlockId, DndContext, closestCenter, Button, Plus, useDroppable, useDraggable, useCombinedRefs, isKeyboardEvent, createCustomBlockRegistry, Card, cn, Collapsible, CollapsibleContent, listContentTypes, mergeBlockDescriptorsWithRegistry, createBlock, createEditorReorderBlocksCommand, reorderBlocks, mutateBlockContent, useDndContext, useUniqueId, useIsomorphicLayoutEffect, EmptyState, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Search, getClientRect, resolveBlockTitle, CardHeader, GripVertical, ChevronRight, CardTitle, ArrowUp, ArrowDown, DropdownMenu, DropdownMenuTrigger, EllipsisVertical, DropdownMenuContent, DropdownMenuItem, Settings, DropdownMenuSeparator, Copy, Trash2, DialogFooter, DialogClose, CardContent, createEditorInsertBlockCommand, LoaderCircle, ChevronDown, normalEditorCuratedPromotedFieldPaths, resolveVisiblePromotedFieldPathsForEditorBlock, createStoreBackend, validateBlockManifestIssues, Callout, CalloutTitle, unfinishedBlockCopy, CalloutDescription, recoveryConflictCopy, ManifestForm, asEditorBlockValues, Box, createManifestFormAdapter, getModalConfig, isNonEmptyValue, ScrollableDialogContent, FormRenderer, Tabs, TabsList, TabsTrigger, TabsContent, mergeManifestWithSdkOptions, augmentManifestWithStyleGroups, lucide_react_exports, isThemeV2NormalEditorRawStylePath, getFieldIntent, isHeaderField, isThemeV2NormalEditorRawStyleFieldName, unwrapResponse, useEntryController, useEditorUiStoreInstance, useUISelector, resolvePreviewSidebarTab, BackgroundGradientField, BackgroundColorField, X, omitRouteTitleFieldFromManifest, getRouteMetadataManifestForType, createManifestValidation, previewAssistantEnabled, useField, FieldFrame, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, isCtaIconName, Combobox, CTA_ICON_OPTIONS, getCtaIconComponent, useBackendWatch, useAsyncPickerOptions, shouldShowPickerSearch, normalizePickerSearchThreshold, Badge, resolvePickerSelectionLabel, useMediaEditorOptional, useRichTextEditor, RichTextEditorSurface, ThemeScope, useBlockContext, resolveMediaSlotContract, asRecord, parseAspectRatioValue, MediaEditor, PUBLIC_FILE_FIELD_KINDS, CollapsibleTrigger, ContentFieldsForm, getCuratedSiteStyle, paletteOverridesSchema, findButtonPersonality, findPaletteVariant, findTypographyPreset, getHeaderLayout, getHeaderStyle, findFooterLook, footerLookCatalog, isObjectRecord, EMPTY_DOC, getRichTextImagePositionFromTarget, insertOrReplaceRichTextImage, Pencil, foldSubroute, SUBROUTE_KINDS, Smartphone, Tablet, Monitor, Maximize2, DropdownMenuLabel, asSiteId, buildThemeRuntime, PaletteProvider, MediaEditorProvider, curatedSiteStyles, ChevronLeft, requireEntriesForCuratedChoices, buttonPersonalities, typographyPresets, paletteVariants, resolveImageUrlWithContext, Root2, List, Trigger, Content, Input, Check, Label, isInternalResolvedLinkValue, evaluateTypographyFontSlot, Separator, toRoutableLinkPayload, useMediaEditor, MediaPickerMini, MediaPickerDialog, Surface, ColorPicker, getDirectImageUrlForMediaAsset, isSvgMimeType } from './chunk-KWJPDZH2.mjs';
 import { usePreviewAuth, getDashboardUrl } from './chunk-VX7B5VAC.mjs';
 import './chunk-XGB3TDIC.mjs';
 import React2, { createContext, memo, useMemo, useState, useRef, useEffect, forwardRef, useCallback, useImperativeHandle, useContext, useSyncExternalStore, useLayoutEffect, useTransition, useId } from 'react';
@@ -2962,45 +2962,37 @@ function createBlockFormLogger(scope) {
 }
 
 // ../editor-blocks/src/block-editor/sdkBlockMerger.ts
-var logger = createBlockFormLogger("sdkBlockMerger");
-function transformToBlockDescriptor(sdkBlock) {
-  return {
-    name: sdkBlock.id,
-    title: sdkBlock.title,
-    description: sdkBlock.description,
-    category: sdkBlock.category,
-    tags: sdkBlock.tags,
-    icon: sdkBlock.icon,
-    definition: transformSdkBlockToDefinition(sdkBlock),
-    source: "sdk"
-  };
-}
+var logger = createBlockFormLogger("customBlockRegistry");
 function mergeBlockDescriptors(systemBlocks, sdkConfig, dbCustomBlocks) {
-  const existingNames = new Set(systemBlocks.map((b) => b.name));
-  const result = [...systemBlocks];
-  if (sdkConfig?.customBlocks?.length) {
-    for (const sdkBlock of sdkConfig.customBlocks) {
-      if (existingNames.has(sdkBlock.id)) {
-        logger.warn(`Skipping SDK block "${sdkBlock.id}" - conflicts with system block`);
-        continue;
-      }
-      result.push(transformToBlockDescriptor(sdkBlock));
-      existingNames.add(sdkBlock.id);
-    }
-  }
-  return result;
+  const registry = createCustomBlockRegistry({
+    sdkConfig,
+    customBlocks: normalizeCustomBlockEntries(dbCustomBlocks),
+    onConflict: (message) => logger.warn(message)
+  });
+  return mergeBlockDescriptorsWithRegistry(
+    systemBlocks,
+    registry,
+    (message) => logger.warn(message)
+  );
 }
 function getBlockManifestFromSdkConfig(blockKind, sdkConfig, dbCustomBlocks) {
-  if (!blockKind.startsWith("custom.")) {
-    return void 0;
-  }
-  if (sdkConfig?.customBlocks) {
-    const sdkBlock = sdkConfig.customBlocks.find((b) => b.id === blockKind);
-    if (sdkBlock) {
-      return transformSdkBlockToManifest(sdkBlock);
+  return createCustomBlockRegistry({
+    sdkConfig,
+    customBlocks: normalizeCustomBlockEntries(dbCustomBlocks),
+    onConflict: (message) => logger.warn(message)
+  }).findManifest(blockKind)?.manifest;
+}
+function normalizeCustomBlockEntries(customBlocks) {
+  if (!customBlocks) return [];
+  return customBlocks.map((entry) => {
+    if ("manifest" in entry && "source" in entry) {
+      return entry;
     }
-  }
-  return void 0;
+    return {
+      manifest: entry,
+      source: { kind: "managed-database" }
+    };
+  });
 }
 var AddBlockDivider = ({ onOpen, position }) => /* @__PURE__ */ jsxs("div", { className: "relative flex w-full items-center justify-center h-8 opacity-0 transition-opacity hover:opacity-100", children: [
   /* @__PURE__ */ jsx("div", { className: "w-full border-b" }),
@@ -3092,18 +3084,20 @@ function getCategoryLabel(category) {
 // ../editor-blocks/src/block-editor/blockDiscovery.ts
 var CORE_ESSENTIAL_BLOCKS = [
   "block.hero",
-  "block.bodyText",
-  "block.mediaText",
-  "block.imageGallery",
-  "block.ctaFull",
+  "block.intro",
+  "block.body-text",
+  "block.media-text",
+  "block.feature-cards",
+  "block.image-gallery",
+  "block.cta-full",
   "block.testimonials",
   "block.faq",
   "block.form"
 ];
 var CONTEXTUAL_ESSENTIAL_GROUPS = [
-  ["block.blogListing"],
-  ["block.eventListing", "block.eventCalendar"],
-  ["block.appointmentBooking"],
+  ["block.blog-listing"],
+  ["block.event-listing", "block.event-calendar"],
+  ["block.appointment-booking"],
   ["block.shop"]
 ];
 function filterBlocksByContentType(blocks, enabledContentTypes) {
@@ -3194,21 +3188,26 @@ function getRecentBlocks(blocks, recentBlockNames) {
 }
 function suggestBlocks(blocks, existingBlockNames) {
   if (existingBlockNames.length === 0) {
-    return blocks.filter((b) => ["block.hero", "block.body-text", "block.cta-full"].includes(b.name)).slice(0, 3);
+    return blocks.filter((b) => ["block.hero", "block.intro", "block.cta-full"].includes(b.name)).slice(0, 3);
   }
   const hasHero = existingBlockNames.includes("block.hero");
+  const hasIntro = existingBlockNames.includes("block.intro");
   const hasBody = existingBlockNames.includes("block.body-text");
+  const hasFeatureCards = existingBlockNames.includes("block.feature-cards");
   const hasCta = existingBlockNames.includes("block.cta-full");
   const hasFaq = existingBlockNames.includes("block.faq");
   const hasTestimonials = existingBlockNames.includes("block.testimonials");
   const suggestions = [];
-  if (hasHero && !hasBody) {
-    suggestions.push("block.body-text");
+  if (hasHero && !hasIntro && !hasBody) {
+    suggestions.push("block.intro", "block.body-text");
   }
-  if ((hasHero || hasBody) && !hasCta) {
+  if ((hasHero || hasIntro || hasBody) && !hasCta) {
     suggestions.push("block.cta-full");
   }
-  if ((hasBody || hasCta) && !hasTestimonials && !hasFaq) {
+  if ((hasIntro || hasBody) && !hasFeatureCards) {
+    suggestions.push("block.feature-cards");
+  }
+  if ((hasIntro || hasBody || hasFeatureCards || hasCta) && !hasTestimonials && !hasFaq) {
     suggestions.push("block.testimonials", "block.faq");
   }
   const blockMap = new Map(blocks.map((b) => [b.name, b]));
@@ -4978,20 +4977,28 @@ var SortableBlockItem = memo(function SortableBlockItem2({
   widgetOverrides,
   uiStore,
   sdkConfig,
+  customBlocks = [],
   hideThemeV2RawStyleFields: hideThemeV2RawStyleFields2 = false,
   pageDesignBlock = null,
   reorderControlMode = DEFAULT_REORDER_CONTROL_MODE,
   actionControlMode = DEFAULT_BLOCK_ACTION_CONTROL_MODE
 }) {
-  const sortable = useSortable({ id: block.id, disabled: !isDraggable });
+  const sortable = useSortable({
+    id: block.id,
+    disabled: !isDraggable
+  });
   const manifest = useMemo(() => {
-    const sdkManifest = getBlockManifestFromSdkConfig(block.kind, sdkConfig ?? null);
+    const sdkManifest = getBlockManifestFromSdkConfig(
+      block.kind,
+      sdkConfig ?? null,
+      customBlocks
+    );
     if (sdkManifest) {
       return sdkManifest;
     }
     const blockDefinition = getBlockDefinition(block.kind);
     return blockDefinition?.manifest;
-  }, [block.kind, sdkConfig]);
+  }, [block.kind, customBlocks, sdkConfig]);
   const [mounted, setMounted] = useState(false);
   const blockRef = useRef(null);
   useEffect(() => setMounted(true), []);
@@ -5063,360 +5070,439 @@ var SortableBlockItem = memo(function SortableBlockItem2({
     }
   );
 });
-var BlockEditor = forwardRef(function BlockEditor2({
-  siteId,
-  pageId,
-  blocks,
-  recoveryConflictBlockIds = [],
-  recoveryConflictReviewRequestId = null,
-  apiClient,
-  uiStore,
-  enableReordering = true,
-  enableCreation = true,
-  onBlockSave,
-  onBlocksChange,
-  theme,
-  widgetOverrides,
-  headerLeftSlot,
-  hideThemeV2RawStyleFields: hideThemeV2RawStyleFields2 = false,
-  pageDesignEditorModel = null,
-  enabledContentTypes = [],
-  sdkConfig = null,
-  reorderControlMode = DEFAULT_REORDER_CONTROL_MODE,
-  actionControlMode = DEFAULT_BLOCK_ACTION_CONTROL_MODE
-}, ref) {
-  const [blockList, setBlockList] = useState(() => normalizeBlockListInitial(blocks));
-  const [errorMessage, setErrorMessage] = useState(null);
-  const [highlightedBlockId, setHighlightedBlockId] = useState(null);
-  const blockRefs = useRef(/* @__PURE__ */ new Map());
-  const highlightTimerRef = useRef(null);
-  const { blockFieldExtensions } = useSdkConfig();
-  const activeBlockId = useStoreSelector(uiStore, (state) => state.activeBlockId);
-  const setActiveBlockId = useCallback(
-    (id) => {
-      uiStore.getState().setActiveBlockId(id);
-    },
-    [uiStore]
-  );
-  const [fetchedContentTypes, setFetchedContentTypes] = useState(enabledContentTypes);
-  const [fetchingContentTypes, setFetchingContentTypes] = useState(false);
-  const allowReordering = enableReordering;
-  const allowCreation = enableCreation;
-  const conflictedBlockIdSet = useMemo(
-    () => new Set(recoveryConflictBlockIds),
-    [recoveryConflictBlockIds]
-  );
-  const blockIds = useMemo(
-    () => blockList.map((block) => block.id).filter((blockId) => typeof blockId === "string"),
-    [blockList]
-  );
-  const pageDesignBlockById = useMemo(
-    () => new Map(
-      (pageDesignEditorModel?.blocks ?? []).map((block) => [String(block.blockId), block])
-    ),
-    [pageDesignEditorModel]
-  );
-  const { isCollapsed, setCollapsed } = useBlockExpandState({
+var BlockEditor = forwardRef(
+  function BlockEditor2({
+    siteId,
     pageId,
-    blockIds
-  });
-  useEffect(() => {
-    setBlockList(normalizeBlockListInitial(blocks));
-  }, [blocks]);
-  useEffect(() => {
-    const unsubscribe = uiStore.subscribe(() => {
-      const structureList = uiStore.getState().structure.getList();
-      setBlockList((currentList) => {
-        const nextList = structureList.map((block) => ({ ...block }));
-        const hasChanges = currentList.length !== nextList.length || currentList.some((block, index) => {
-          const nextBlock = nextList[index];
-          return !nextBlock || block.id !== nextBlock.id || block.orderIndex !== nextBlock.orderIndex || block.kind !== nextBlock.kind;
+    blocks,
+    recoveryConflictBlockIds = [],
+    recoveryConflictReviewRequestId = null,
+    apiClient,
+    uiStore,
+    enableReordering = true,
+    enableCreation = true,
+    onBlockSave,
+    onBlocksChange,
+    theme,
+    widgetOverrides,
+    headerLeftSlot,
+    hideThemeV2RawStyleFields: hideThemeV2RawStyleFields2 = false,
+    pageDesignEditorModel = null,
+    enabledContentTypes = [],
+    sdkConfig = null,
+    customBlocks = [],
+    reorderControlMode = DEFAULT_REORDER_CONTROL_MODE,
+    actionControlMode = DEFAULT_BLOCK_ACTION_CONTROL_MODE
+  }, ref) {
+    const [blockList, setBlockList] = useState(
+      () => normalizeBlockListInitial(blocks)
+    );
+    const [errorMessage, setErrorMessage] = useState(null);
+    const [highlightedBlockId, setHighlightedBlockId] = useState(
+      null
+    );
+    const blockRefs = useRef(/* @__PURE__ */ new Map());
+    const highlightTimerRef = useRef(null);
+    const { blockFieldExtensions } = useSdkConfig();
+    const activeBlockId = useStoreSelector(
+      uiStore,
+      (state) => state.activeBlockId
+    );
+    const setActiveBlockId = useCallback(
+      (id) => {
+        uiStore.getState().setActiveBlockId(id);
+      },
+      [uiStore]
+    );
+    const [fetchedContentTypes, setFetchedContentTypes] = useState(enabledContentTypes);
+    const [fetchingContentTypes, setFetchingContentTypes] = useState(false);
+    const allowReordering = enableReordering;
+    const allowCreation = enableCreation;
+    const conflictedBlockIdSet = useMemo(
+      () => new Set(recoveryConflictBlockIds),
+      [recoveryConflictBlockIds]
+    );
+    const blockIds = useMemo(
+      () => blockList.map((block) => block.id).filter((blockId) => typeof blockId === "string"),
+      [blockList]
+    );
+    const pageDesignBlockById = useMemo(
+      () => new Map(
+        (pageDesignEditorModel?.blocks ?? []).map((block) => [
+          String(block.blockId),
+          block
+        ])
+      ),
+      [pageDesignEditorModel]
+    );
+    const { isCollapsed, setCollapsed } = useBlockExpandState({
+      pageId,
+      blockIds
+    });
+    useEffect(() => {
+      setBlockList(normalizeBlockListInitial(blocks));
+    }, [blocks]);
+    useEffect(() => {
+      const unsubscribe = uiStore.subscribe(() => {
+        const structureList = uiStore.getState().structure.getList();
+        setBlockList((currentList) => {
+          const nextList = structureList.map((block) => ({ ...block }));
+          const hasChanges = currentList.length !== nextList.length || currentList.some((block, index) => {
+            const nextBlock = nextList[index];
+            return !nextBlock || block.id !== nextBlock.id || block.orderIndex !== nextBlock.orderIndex || block.kind !== nextBlock.kind;
+          });
+          return hasChanges ? nextList : currentList;
         });
-        return hasChanges ? nextList : currentList;
       });
+      return unsubscribe;
+    }, [uiStore]);
+    useEffect(() => {
+      let cancelled = false;
+      async function fetchContentTypesFromApi() {
+        if (fetchingContentTypes) return;
+        setFetchingContentTypes(true);
+        try {
+          const result = await listContentTypes(apiClient, { siteId });
+          if (!cancelled) {
+            const keys = (result.contentTypes || []).map(
+              (ct) => typeof ct === "string" ? ct : ct.key
+            );
+            setFetchedContentTypes(keys);
+          }
+        } catch (error) {
+          console.error("[block-editor] Failed to fetch content types:", error);
+          if (!cancelled) {
+            setFetchedContentTypes(enabledContentTypes);
+          }
+        } finally {
+          if (!cancelled) {
+            setFetchingContentTypes(false);
+          }
+        }
+      }
+      fetchContentTypesFromApi();
+      return () => {
+        cancelled = true;
+      };
+    }, [siteId, apiClient, enabledContentTypes]);
+    useBlockBaselineSync({
+      enabled: true,
+      blockList,
+      blockFieldExtensions,
+      uiStore
     });
-    return unsubscribe;
-  }, [uiStore]);
-  useEffect(() => {
-    let cancelled = false;
-    async function fetchContentTypesFromApi() {
-      if (fetchingContentTypes) return;
-      setFetchingContentTypes(true);
-      try {
-        const result = await listContentTypes(apiClient, { siteId });
-        if (!cancelled) {
-          const keys = (result.contentTypes || []).map(
-            (ct) => typeof ct === "string" ? ct : ct.key
-          );
-          setFetchedContentTypes(keys);
+    const focusRequest = useStoreSelector(
+      uiStore,
+      (state) => state.focusRequest
+    );
+    const triggerFocus = useCallback(
+      (target) => {
+        const { blockId, fieldPath, itemIndex } = target;
+        uiStore.getState().requestFocus({ blockId, fieldPath, itemIndex });
+      },
+      [uiStore]
+    );
+    const handleFocusHandled = useCallback(
+      (requestId) => {
+        const current = uiStore.getState().focusRequest;
+        if (current && current.requestId === requestId) {
+          uiStore.getState().clearFocus();
         }
-      } catch (error) {
-        console.error("[block-editor] Failed to fetch content types:", error);
-        if (!cancelled) {
-          setFetchedContentTypes(enabledContentTypes);
+      },
+      [uiStore]
+    );
+    useImperativeHandle(
+      ref,
+      () => ({
+        focusField: triggerFocus
+      }),
+      [triggerFocus]
+    );
+    const availableBlocks = useMemo(
+      () => mergeBlockDescriptors(listBlockDescriptors(), sdkConfig, customBlocks),
+      [customBlocks, sdkConfig]
+    );
+    const pointerSensor = useSensor(PointerSensor, {
+      activationConstraint: { distance: 5 }
+    });
+    const sensors = useSensors(pointerSensor);
+    const activeSensors = allowReordering ? sensors : [];
+    const {
+      pickerOpen,
+      creatingBlockName,
+      openPicker,
+      closePicker,
+      handleCreateBlock
+    } = useBlockCreation({
+      allowCreation,
+      apiClient,
+      siteId,
+      pageId,
+      blockList,
+      setBlockList,
+      onBlocksChange,
+      triggerFocus,
+      uiStore
+    });
+    const { reorderId, handleMove, onDragEnd } = useBlockReorder({
+      allowReordering,
+      apiClient,
+      siteId,
+      pageId,
+      blockList,
+      setBlockList,
+      onBlocksChange,
+      setErrorMessage,
+      uiStore
+    });
+    const { duplicatingBlockId, duplicateBlock } = useBlockDuplication({
+      allowCreation,
+      apiClient,
+      siteId,
+      pageId,
+      blockList,
+      setBlockList,
+      onBlocksChange,
+      triggerFocus,
+      setErrorMessage,
+      uiStore
+    });
+    const handleDelete = useCallback(
+      async (blockId) => {
+        try {
+          setErrorMessage(null);
+          const removedBlock = blockList.find((block) => block.id === blockId);
+          if (!removedBlock) {
+            return;
+          }
+          await deleteBlock(apiClient, { siteId, pageId, blockId });
+          const updatedList = blockList.filter((b) => b.id !== blockId);
+          setBlockList(updatedList);
+          if (uiStore) {
+            uiStore.getState().history.applyCommand?.({
+              ...createEditorRemoveBlockCommand(asEditorBlockId(blockId))
+            });
+          }
+          onBlocksChange?.(updatedList);
+        } catch (error) {
+          console.error("[BlockEditor] Delete failed:", error);
+          const message = error instanceof Error ? error.message : "Failed to delete block";
+          setErrorMessage(message);
         }
-      } finally {
-        if (!cancelled) {
-          setFetchingContentTypes(false);
+      },
+      [
+        apiClient,
+        siteId,
+        pageId,
+        blockList,
+        setBlockList,
+        onBlocksChange,
+        uiStore
+      ]
+    );
+    useEffect(() => {
+      return () => {
+        if (highlightTimerRef.current !== null) {
+          window.clearTimeout(highlightTimerRef.current);
         }
-      }
-    }
-    fetchContentTypesFromApi();
-    return () => {
-      cancelled = true;
-    };
-  }, [siteId, apiClient, enabledContentTypes]);
-  useBlockBaselineSync({ enabled: true, blockList, blockFieldExtensions, uiStore });
-  const focusRequest = useStoreSelector(uiStore, (state) => state.focusRequest);
-  const triggerFocus = useCallback(
-    (target) => {
-      const { blockId, fieldPath, itemIndex } = target;
-      uiStore.getState().requestFocus({ blockId, fieldPath, itemIndex });
-    },
-    [uiStore]
-  );
-  const handleFocusHandled = useCallback(
-    (requestId) => {
-      const current = uiStore.getState().focusRequest;
-      if (current && current.requestId === requestId) {
-        uiStore.getState().clearFocus();
-      }
-    },
-    [uiStore]
-  );
-  useImperativeHandle(
-    ref,
-    () => ({
-      focusField: triggerFocus
-    }),
-    [triggerFocus]
-  );
-  const availableBlocks = useMemo(
-    () => mergeBlockDescriptors(listBlockDescriptors(), sdkConfig),
-    [sdkConfig]
-  );
-  const pointerSensor = useSensor(PointerSensor, { activationConstraint: { distance: 5 } });
-  const sensors = useSensors(pointerSensor);
-  const activeSensors = allowReordering ? sensors : [];
-  const { pickerOpen, creatingBlockName, openPicker, closePicker, handleCreateBlock } = useBlockCreation({
-    allowCreation,
-    apiClient,
-    siteId,
-    pageId,
-    blockList,
-    setBlockList,
-    onBlocksChange,
-    triggerFocus,
-    uiStore
-  });
-  const { reorderId, handleMove, onDragEnd } = useBlockReorder({
-    allowReordering,
-    apiClient,
-    siteId,
-    pageId,
-    blockList,
-    setBlockList,
-    onBlocksChange,
-    setErrorMessage,
-    uiStore
-  });
-  const { duplicatingBlockId, duplicateBlock } = useBlockDuplication({
-    allowCreation,
-    apiClient,
-    siteId,
-    pageId,
-    blockList,
-    setBlockList,
-    onBlocksChange,
-    triggerFocus,
-    setErrorMessage,
-    uiStore
-  });
-  const handleDelete = useCallback(async (blockId) => {
-    try {
-      setErrorMessage(null);
-      const removedBlock = blockList.find((block) => block.id === blockId);
-      if (!removedBlock) {
+      };
+    }, []);
+    useEffect(() => {
+      if (!focusRequest?.blockId) {
         return;
       }
-      await deleteBlock(apiClient, { siteId, pageId, blockId });
-      const updatedList = blockList.filter((b) => b.id !== blockId);
-      setBlockList(updatedList);
-      if (uiStore) {
-        uiStore.getState().history.applyCommand?.({
-          ...createEditorRemoveBlockCommand(asEditorBlockId(blockId))
+      const focusedBlockId = String(focusRequest.blockId);
+      setCollapsed(focusedBlockId, false);
+      uiStore.getState().setActiveBlockId(focusRequest.blockId);
+      setHighlightedBlockId(focusedBlockId);
+      window.setTimeout(() => {
+        blockRefs.current.get(focusedBlockId)?.scrollIntoView({
+          behavior: "smooth",
+          block: "center"
         });
-      }
-      onBlocksChange?.(updatedList);
-    } catch (error) {
-      console.error("[BlockEditor] Delete failed:", error);
-      const message = error instanceof Error ? error.message : "Failed to delete block";
-      setErrorMessage(message);
-    }
-  }, [apiClient, siteId, pageId, blockList, setBlockList, onBlocksChange, uiStore]);
-  useEffect(() => {
-    return () => {
+      }, 100);
       if (highlightTimerRef.current !== null) {
         window.clearTimeout(highlightTimerRef.current);
       }
-    };
-  }, []);
-  useEffect(() => {
-    if (!focusRequest?.blockId) {
-      return;
-    }
-    const focusedBlockId = String(focusRequest.blockId);
-    setCollapsed(focusedBlockId, false);
-    uiStore.getState().setActiveBlockId(focusRequest.blockId);
-    setHighlightedBlockId(focusedBlockId);
-    window.setTimeout(() => {
-      blockRefs.current.get(focusedBlockId)?.scrollIntoView({
-        behavior: "smooth",
-        block: "center"
-      });
-    }, 100);
-    if (highlightTimerRef.current !== null) {
-      window.clearTimeout(highlightTimerRef.current);
-    }
-    highlightTimerRef.current = window.setTimeout(() => {
-      setHighlightedBlockId((current) => current === focusedBlockId ? null : current);
-      highlightTimerRef.current = null;
-    }, 1500);
-  }, [focusRequest?.requestId, focusRequest?.blockId, setCollapsed, uiStore]);
-  useEffect(() => {
-    if (recoveryConflictReviewRequestId === null || recoveryConflictBlockIds.length === 0) {
-      return;
-    }
-    for (const blockId of recoveryConflictBlockIds) {
-      setCollapsed(blockId, false);
-    }
-    const firstRecoveryBlockId = recoveryConflictBlockIds[0];
-    if (!firstRecoveryBlockId) {
-      return;
-    }
-    uiStore.getState().requestFocus({ blockId: asEditorBlockId(firstRecoveryBlockId) });
-  }, [recoveryConflictBlockIds, recoveryConflictReviewRequestId, setCollapsed, uiStore]);
-  useEffect(() => {
-    if (!activeBlockId) {
-      return;
-    }
-    const stillExists = blockList.some(
-      (block) => typeof block.id === "string" && asEditorBlockId(block.id) === activeBlockId
-    );
-    if (!stillExists) {
-      uiStore.getState().setActiveBlockId(null);
-    }
-  }, [activeBlockId, blockList, uiStore]);
-  const hasBlocks = blockList.length > 0;
-  const contextValue = useMemo(
-    () => ({
-      blockList,
-      setBlockList,
-      reorderId,
-      focusRequest,
-      triggerFocus,
-      handleMove,
-      onDragEnd,
-      activeBlockId,
-      setActiveBlockId,
-      theme
-    }),
-    [blockList, reorderId, focusRequest, triggerFocus, handleMove, onDragEnd, activeBlockId, setActiveBlockId, theme]
-  );
-  return /* @__PURE__ */ jsx(BlockListProvider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { className: "space-y-3 touch-pan-y", children: [
-    /* @__PURE__ */ jsx(HeaderActions, { headerLeftSlot }),
-    errorMessage ? /* @__PURE__ */ jsx("div", { className: "rounded-md border border-destructive bg-destructive/10 px-4 py-2 text-sm text-destructive", children: errorMessage }) : null,
-    hasBlocks ? /* @__PURE__ */ jsx(
-      DndContext,
-      {
-        sensors: activeSensors,
-        collisionDetection: closestCenter,
+      highlightTimerRef.current = window.setTimeout(() => {
+        setHighlightedBlockId(
+          (current) => current === focusedBlockId ? null : current
+        );
+        highlightTimerRef.current = null;
+      }, 1500);
+    }, [focusRequest?.requestId, focusRequest?.blockId, setCollapsed, uiStore]);
+    useEffect(() => {
+      if (recoveryConflictReviewRequestId === null || recoveryConflictBlockIds.length === 0) {
+        return;
+      }
+      for (const blockId of recoveryConflictBlockIds) {
+        setCollapsed(blockId, false);
+      }
+      const firstRecoveryBlockId = recoveryConflictBlockIds[0];
+      if (!firstRecoveryBlockId) {
+        return;
+      }
+      uiStore.getState().requestFocus({ blockId: asEditorBlockId(firstRecoveryBlockId) });
+    }, [
+      recoveryConflictBlockIds,
+      recoveryConflictReviewRequestId,
+      setCollapsed,
+      uiStore
+    ]);
+    useEffect(() => {
+      if (!activeBlockId) {
+        return;
+      }
+      const stillExists = blockList.some(
+        (block) => typeof block.id === "string" && asEditorBlockId(block.id) === activeBlockId
+      );
+      if (!stillExists) {
+        uiStore.getState().setActiveBlockId(null);
+      }
+    }, [activeBlockId, blockList, uiStore]);
+    const hasBlocks = blockList.length > 0;
+    const contextValue = useMemo(
+      () => ({
+        blockList,
+        setBlockList,
+        reorderId,
+        focusRequest,
+        triggerFocus,
+        handleMove,
         onDragEnd,
-        children: /* @__PURE__ */ jsx(SortableContext, { items: blockList.map((b) => b.id), strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsxs("div", { className: "space-y-0", children: [
-          allowCreation ? /* @__PURE__ */ jsx(AddBlockDivider, { onOpen: openPicker, position: 0 }) : null,
-          blockList.map((block, index) => {
-            const focusSignal = focusRequest && block.id && focusRequest.blockId === asEditorBlockId(block.id) ? focusRequest : null;
-            const collapsed = isCollapsed(block.id);
-            return /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "group",
-                ref: (node) => {
-                  if (!block.id) return;
-                  if (node) {
-                    blockRefs.current.set(block.id, node);
-                  } else {
-                    blockRefs.current.delete(block.id);
-                  }
-                },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    SortableBlockItem,
+        activeBlockId,
+        setActiveBlockId,
+        theme
+      }),
+      [
+        blockList,
+        reorderId,
+        focusRequest,
+        triggerFocus,
+        handleMove,
+        onDragEnd,
+        activeBlockId,
+        setActiveBlockId,
+        theme
+      ]
+    );
+    return /* @__PURE__ */ jsx(BlockListProvider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { className: "space-y-3 touch-pan-y", children: [
+      /* @__PURE__ */ jsx(HeaderActions, { headerLeftSlot }),
+      errorMessage ? /* @__PURE__ */ jsx("div", { className: "rounded-md border border-destructive bg-destructive/10 px-4 py-2 text-sm text-destructive", children: errorMessage }) : null,
+      hasBlocks ? /* @__PURE__ */ jsx(
+        DndContext,
+        {
+          sensors: activeSensors,
+          collisionDetection: closestCenter,
+          onDragEnd,
+          children: /* @__PURE__ */ jsx(
+            SortableContext,
+            {
+              items: blockList.map((b) => b.id),
+              strategy: verticalListSortingStrategy,
+              children: /* @__PURE__ */ jsxs("div", { className: "space-y-0", children: [
+                allowCreation ? /* @__PURE__ */ jsx(AddBlockDivider, { onOpen: openPicker, position: 0 }) : null,
+                blockList.map((block, index) => {
+                  const focusSignal = focusRequest && block.id && focusRequest.blockId === asEditorBlockId(block.id) ? focusRequest : null;
+                  const collapsed = isCollapsed(block.id);
+                  return /* @__PURE__ */ jsxs(
+                    "div",
                     {
-                      siteId,
-                      block,
-                      onMove: handleMove,
-                      onDuplicate: duplicateBlock,
-                      onDelete: handleDelete,
-                      isFirst: index === 0,
-                      isLast: index === blockList.length - 1,
-                      isMoving: reorderId === block.id || duplicatingBlockId === block.id,
-                      isDraggable: allowReordering,
-                      collapsed,
-                      onCollapsedChange: (nextCollapsed) => {
+                      className: "group",
+                      ref: (node) => {
                         if (!block.id) return;
-                        setCollapsed(block.id, nextCollapsed);
-                        if (nextCollapsed) {
-                          if (activeBlockId === asEditorBlockId(block.id)) {
-                            uiStore.getState().setActiveBlockId(null);
-                          }
-                          return;
+                        if (node) {
+                          blockRefs.current.set(block.id, node);
+                        } else {
+                          blockRefs.current.delete(block.id);
                         }
-                        uiStore.getState().setActiveBlockId(asEditorBlockId(block.id));
                       },
-                      highlighted: highlightedBlockId === block.id,
-                      hasRecoveryConflict: typeof block.id === "string" && conflictedBlockIdSet.has(block.id),
-                      focusSignal,
-                      onFocusHandled: handleFocusHandled,
-                      onBlockSave,
-                      theme,
-                      widgetOverrides,
-                      uiStore,
-                      sdkConfig,
-                      hideThemeV2RawStyleFields: hideThemeV2RawStyleFields2,
-                      pageDesignBlock: block.id ? pageDesignBlockById.get(block.id) ?? null : null,
-                      reorderControlMode,
-                      actionControlMode
-                    }
-                  ),
-                  allowCreation && index < blockList.length - 1 ? /* @__PURE__ */ jsx(AddBlockDivider, { onOpen: openPicker, position: index + 1 }) : null
-                ]
-              },
-              block.id ?? index
-            );
-          })
-        ] }) })
-      }
-    ) : hasBlocks ? /* @__PURE__ */ jsx("div", { className: "rounded-md border border-dashed px-4 py-6 text-center text-sm text-muted-foreground", children: "Loading block editor..." }) : allowCreation ? /* @__PURE__ */ jsx(EmptyState2, { onAdd: () => openPicker(0) }) : /* @__PURE__ */ jsx("div", { className: "rounded-md border border-dashed px-4 py-6 text-center text-sm text-muted-foreground", children: "No blocks available for this page." }),
-    allowCreation && hasBlocks ? /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "secondary", onClick: () => openPicker(blockList.length), children: [
-      /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }),
-      "Add block"
-    ] }) }) : null,
-    allowCreation ? /* @__PURE__ */ jsx(
-      EnhancedBlockPickerDialog,
-      {
-        open: pickerOpen,
-        onOpenChange: (open) => open ? openPicker(blockList.length) : closePicker(),
-        creatingBlockName,
-        descriptors: availableBlocks,
-        siteId,
-        existingBlockNames: blockList.map((b) => b.kind).filter(Boolean),
-        enabledContentTypes: fetchedContentTypes,
-        onSelect: (descriptor) => void handleCreateBlock(descriptor)
-      }
-    ) : null
-  ] }) });
-});
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          SortableBlockItem,
+                          {
+                            siteId,
+                            block,
+                            onMove: handleMove,
+                            onDuplicate: duplicateBlock,
+                            onDelete: handleDelete,
+                            isFirst: index === 0,
+                            isLast: index === blockList.length - 1,
+                            isMoving: reorderId === block.id || duplicatingBlockId === block.id,
+                            isDraggable: allowReordering,
+                            collapsed,
+                            onCollapsedChange: (nextCollapsed) => {
+                              if (!block.id) return;
+                              setCollapsed(block.id, nextCollapsed);
+                              if (nextCollapsed) {
+                                if (activeBlockId === asEditorBlockId(block.id)) {
+                                  uiStore.getState().setActiveBlockId(null);
+                                }
+                                return;
+                              }
+                              uiStore.getState().setActiveBlockId(asEditorBlockId(block.id));
+                            },
+                            highlighted: highlightedBlockId === block.id,
+                            hasRecoveryConflict: typeof block.id === "string" && conflictedBlockIdSet.has(block.id),
+                            focusSignal,
+                            onFocusHandled: handleFocusHandled,
+                            onBlockSave,
+                            theme,
+                            widgetOverrides,
+                            uiStore,
+                            sdkConfig,
+                            customBlocks,
+                            hideThemeV2RawStyleFields: hideThemeV2RawStyleFields2,
+                            pageDesignBlock: block.id ? pageDesignBlockById.get(block.id) ?? null : null,
+                            reorderControlMode,
+                            actionControlMode
+                          }
+                        ),
+                        allowCreation && index < blockList.length - 1 ? /* @__PURE__ */ jsx(
+                          AddBlockDivider,
+                          {
+                            onOpen: openPicker,
+                            position: index + 1
+                          }
+                        ) : null
+                      ]
+                    },
+                    block.id ?? index
+                  );
+                })
+              ] })
+            }
+          )
+        }
+      ) : hasBlocks ? /* @__PURE__ */ jsx("div", { className: "rounded-md border border-dashed px-4 py-6 text-center text-sm text-muted-foreground", children: "Loading block editor..." }) : allowCreation ? /* @__PURE__ */ jsx(EmptyState2, { onAdd: () => openPicker(0) }) : /* @__PURE__ */ jsx("div", { className: "rounded-md border border-dashed px-4 py-6 text-center text-sm text-muted-foreground", children: "No blocks available for this page." }),
+      allowCreation && hasBlocks ? /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "secondary",
+          onClick: () => openPicker(blockList.length),
+          children: [
+            /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }),
+            "Add block"
+          ]
+        }
+      ) }) : null,
+      allowCreation ? /* @__PURE__ */ jsx(
+        EnhancedBlockPickerDialog,
+        {
+          open: pickerOpen,
+          onOpenChange: (open) => open ? openPicker(blockList.length) : closePicker(),
+          creatingBlockName,
+          descriptors: availableBlocks,
+          siteId,
+          existingBlockNames: blockList.map((b) => b.kind).filter(Boolean),
+          enabledContentTypes: fetchedContentTypes,
+          onSelect: (descriptor) => void handleCreateBlock(descriptor)
+        }
+      ) : null
+    ] }) });
+  }
+);
 function PageBlockEditorPanel({
   siteId,
   pageId,
@@ -5743,12 +5829,19 @@ function buildApplySiteStyleSelectionBody(input) {
     buttonPersonalityId: input.previewed.buttonPersonalityId,
     paletteVariantId: input.previewed.paletteVariantId,
     paletteOverrides: input.previewed.paletteOverrides,
+    typographyPresetId: input.previewed.typographyPresetId,
+    typographyBodyFontOverride: input.previewed.typographyBodyFontOverride,
+    typographyHeadingFontOverride: input.previewed.typographyHeadingFontOverride,
     headerLookId: input.previewed.headerLookId,
+    headerLayoutId: input.previewed.headerLayoutId,
+    headerStyleId: input.previewed.headerStyleId,
     footerLookId: input.previewed.footerLookId,
     baseSelectionVersion: input.base.selectionVersion,
     selectionId: input.selectionId ?? null
   };
 }
+var MAX_FONT_RESULTS_WHEN_SEARCHING = 12;
+var MAX_FONT_RESULTS_WHEN_BROWSING = 8;
 function StyleConfigurator({
   siteId,
   apiClient,
@@ -5763,7 +5856,14 @@ function StyleConfigurator({
   siteStyleAccess
 }) {
   const router = useRouter();
-  const { setOverrideTheme } = usePreviewThemeOverlay();
+  const previewDesign = usePreviewDesignCoordinator();
+  const {
+    applyFailed,
+    applyStarted,
+    applySucceeded,
+    clearPreview,
+    previewTheme
+  } = previewDesign;
   const [isRefreshPending, startRefreshTransition] = useTransition();
   const baseSnapshot = useMemo(
     () => resolveStyleConfiguratorInitialSnapshot({
@@ -5783,50 +5883,47 @@ function StyleConfigurator({
   );
   const hasLoadedState = state !== null;
   const stateRef = useRef(state);
-  const setOverrideThemeRef = useRef(setOverrideTheme);
+  const clearPreviewRef = useRef(clearPreview);
   const runnerRef = useRef(createOptimisticActionRunner());
   const appliedExpandedRowRequestIdRef = useRef(null);
   useEffect(() => {
     stateRef.current = state;
   }, [state]);
   useEffect(() => {
-    setOverrideThemeRef.current = setOverrideTheme;
-  }, [setOverrideTheme]);
+    clearPreviewRef.current = clearPreview;
+  }, [clearPreview]);
   useEffect(() => {
     if (!baseSnapshot) return;
     setState((current) => current ? syncStyleConfiguratorState(current, baseSnapshot) : createStyleConfiguratorState(baseSnapshot));
   }, [baseSnapshot]);
   useEffect(() => {
     if (!state || !baseSnapshot) {
-      setOverrideTheme(null, { source: "style-configurator" });
+      clearPreview("style-configurator");
       return;
     }
     if (!isPreviewingChange(state)) {
-      setOverrideTheme(null, { source: "style-configurator" });
+      clearPreview("style-configurator");
       return;
     }
     const siteStyle = getCuratedSiteStyle(state.previewed.siteStyleId);
     if (!siteStyle) {
-      setOverrideTheme(null, { source: "style-configurator" });
+      clearPreview("style-configurator");
       return;
     }
-    const result = compileSiteThemeFromSelections({
+    const result = planSiteStylePreviewChange({
       siteStyle,
-      buttonPersonalityId: state.previewed.buttonPersonalityId,
-      paletteVariantId: state.previewed.paletteVariantId,
-      paletteOverrides: state.previewed.paletteOverrides,
-      headerLookId: state.previewed.headerLookId,
-      footerLookId: state.previewed.footerLookId,
+      selection: state.previewed,
+      baseTheme: theme,
       headerSelectionContext,
       footerSelectionContext
     });
-    setOverrideTheme(result.theme, { source: "style-configurator" });
-  }, [state, baseSnapshot, setOverrideTheme, headerSelectionContext, footerSelectionContext]);
+    previewTheme("style-configurator", result.themeOverlay, "site-style");
+  }, [state, baseSnapshot, clearPreview, previewTheme, headerSelectionContext, footerSelectionContext, theme]);
   useEffect(() => {
     const runner = runnerRef.current;
     return () => {
       runner.invalidate();
-      setOverrideThemeRef.current(null, { source: "style-configurator" });
+      clearPreviewRef.current("style-configurator");
     };
   }, []);
   useEffect(() => {
@@ -5835,7 +5932,7 @@ function StyleConfigurator({
     setState((current) => {
       if (!current) return current;
       appliedExpandedRowRequestIdRef.current = expandedRowRequest.id;
-      return openRow(current, expandedRowRequest.row);
+      return openRow(current, expandedRowRequest.row === "header" ? "header-layout" : expandedRowRequest.row);
     });
   }, [expandedRowRequest, hasLoadedState]);
   const handlePreviewSiteStyle = useCallback((siteStyleId) => {
@@ -5844,13 +5941,10 @@ function StyleConfigurator({
       const next = previewSiteStyle(current, siteStyleId);
       const siteStyle = getCuratedSiteStyle(siteStyleId);
       if (!siteStyle) return next;
-      const result = compileSiteThemeFromSelections({
+      const result = planSiteStylePreviewChange({
         siteStyle,
-        buttonPersonalityId: next.previewed.buttonPersonalityId,
-        paletteVariantId: next.previewed.paletteVariantId,
-        paletteOverrides: next.previewed.paletteOverrides,
-        headerLookId: next.previewed.headerLookId,
-        footerLookId: next.previewed.footerLookId,
+        selection: next.previewed,
+        baseTheme: theme,
         headerSelectionContext,
         footerSelectionContext
       });
@@ -5859,14 +5953,17 @@ function StyleConfigurator({
         warnings: result.warnings
       });
     });
-  }, [footerSelectionContext, headerSelectionContext]);
+  }, [footerSelectionContext, headerSelectionContext, theme]);
   const handlePreviewPersonality = useCallback((id) => {
     setState((current) => current ? previewButtonPersonality(current, id) : current);
   }, []);
-  const handlePreviewHeaderLook = useCallback((id) => {
-    const plan = planSiteChromeLookSelection({ surface: "header", lookId: id });
-    if (plan.kind !== "header") return;
-    setState((current) => current ? previewHeaderLook(current, plan.next.headerLookId) : current);
+  const handlePreviewHeaderLayout = useCallback((id) => {
+    if (!id) return;
+    setState((current) => current ? previewHeaderLayout(current, id) : current);
+  }, []);
+  const handlePreviewHeaderStyle = useCallback((id) => {
+    if (!id) return;
+    setState((current) => current ? previewHeaderStyle(current, id) : current);
   }, []);
   const handlePreviewFooterLook = useCallback((id) => {
     const plan = planSiteChromeLookSelection({ surface: "footer", lookId: id });
@@ -5876,6 +5973,18 @@ function StyleConfigurator({
   const handlePreviewPalette = useCallback((id) => {
     setState((current) => current ? previewPaletteVariant(current, id) : current);
   }, []);
+  const handlePreviewTypographyPreset = useCallback((id) => {
+    setState((current) => current ? previewTypographyPreset(current, id) : current);
+  }, []);
+  const handleBodyFontOverride = useCallback((fontFamily) => {
+    setState((current) => current ? setTypographyBodyFontOverride(current, fontFamily) : current);
+  }, []);
+  const handleHeadingFontOverride = useCallback((fontFamily) => {
+    setState((current) => current ? setTypographyHeadingFontOverride(current, fontFamily) : current);
+  }, []);
+  const handleClearTypographyOverrides = useCallback(() => {
+    setState((current) => current ? clearTypographyFontOverrides(current) : current);
+  }, []);
   const handleTokenOverride = useCallback((role, hex) => {
     setState((current) => {
       if (!current) return current;
@@ -5906,13 +6015,10 @@ function StyleConfigurator({
     const previewed = live.previewed;
     const siteStyle = getCuratedSiteStyle(previewed.siteStyleId);
     if (!siteStyle) return;
-    const compiled = compileSiteThemeFromSelections({
+    const compiled = planSiteStylePreviewChange({
       siteStyle,
-      buttonPersonalityId: previewed.buttonPersonalityId,
-      paletteVariantId: previewed.paletteVariantId,
-      paletteOverrides: previewed.paletteOverrides,
-      headerLookId: previewed.headerLookId,
-      footerLookId: previewed.footerLookId,
+      selection: previewed,
+      baseTheme: theme,
       headerSelectionContext,
       footerSelectionContext
     });
@@ -5921,12 +6027,19 @@ function StyleConfigurator({
       previewed: {
         ...previewed,
         buttonPersonalityId: compiled.resolvedSelections.buttonPersonalityId,
-        paletteVariantId: compiled.resolvedSelections.paletteVariantId
+        paletteVariantId: compiled.resolvedSelections.paletteVariantId,
+        headerLayoutId: compiled.resolvedSelections.headerLayoutId,
+        headerStyleId: compiled.resolvedSelections.headerStyleId,
+        headerLookId: compiled.resolvedSelections.headerLookId,
+        typographyPresetId: compiled.resolvedSelections.typographyPresetId,
+        typographyBodyFontOverride: compiled.resolvedSelections.typographyBodyFontOverride,
+        typographyHeadingFontOverride: compiled.resolvedSelections.typographyHeadingFontOverride
       },
       selectionId
     });
     await runnerRef.current.run({
       optimistic: () => {
+        applyStarted("style-configurator");
         setState((current) => current ? markApplySaving(current) : current);
       },
       network: async () => {
@@ -5946,15 +6059,22 @@ function StyleConfigurator({
             buttonPersonalityId: saved.buttonPersonalityId,
             paletteVariantId: saved.paletteVariantId,
             paletteOverrides: saved.paletteOverrides ?? null,
+            typographyPresetId: saved.typographyPresetId,
+            typographyBodyFontOverride: saved.typographyBodyFontOverride,
+            typographyHeadingFontOverride: saved.typographyHeadingFontOverride,
             headerLookId: saved.headerLookId,
+            headerLayoutId: saved.headerLayoutId,
+            headerStyleId: saved.headerStyleId,
             footerLookId: saved.footerLookId
           }) : current
         );
+        applySucceeded("style-configurator");
         startRefreshTransition(() => {
           router.refresh();
         });
       },
       onError: (error) => {
+        applyFailed("style-configurator");
         const applyError = classifyStyleApplyError(error);
         if (applyError.kind === "stale") {
           startRefreshTransition(() => {
@@ -5969,10 +6089,14 @@ function StyleConfigurator({
     apiClient,
     footerSelectionContext,
     headerSelectionContext,
+    applyFailed,
+    applyStarted,
+    applySucceeded,
     router,
     selectionId,
     siteId,
-    startRefreshTransition
+    startRefreshTransition,
+    theme
   ]);
   if (!state || !baseSnapshot) {
     return /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Loading design controls..." });
@@ -5986,13 +6110,15 @@ function StyleConfigurator({
   }
   const currentPersonality = findButtonPersonality(state.previewed.buttonPersonalityId);
   const currentPaletteVariant = findPaletteVariant(state.previewed.paletteVariantId);
+  const currentTypographyPreset = state.previewed.typographyPresetId ? findTypographyPreset(state.previewed.typographyPresetId) : null;
   const chromeLookModels = buildSiteChromeLookModels({
     state,
     siteStyle: currentSiteStyle,
     headerSelectionContext,
     footerSelectionContext
   });
-  const currentHeaderLook = state.previewed.headerLookId ? findHeaderLook(state.previewed.headerLookId) : findHeaderLook(chromeLookModels.header.renderedLookId);
+  const currentHeaderLayout = getHeaderLayout(state.previewed.headerLayoutId);
+  const currentHeaderStyle = getHeaderStyle(state.previewed.headerStyleId);
   const currentFooterLook = state.previewed.footerLookId ? findFooterLook(state.previewed.footerLookId) : findFooterLook(chromeLookModels.footer.renderedLookId);
   return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
     state.warnings.length > 0 ? /* @__PURE__ */ jsx(WarningNotice, { warnings: state.warnings, onDismiss: handleDismissWarnings }) : null,
@@ -6010,22 +6136,42 @@ function StyleConfigurator({
     /* @__PURE__ */ jsx(
       SiteChromeLookRow,
       {
-        label: "Header",
-        ariaLabel: "Header",
-        defaultDescription: "Use the header chosen for this site style.",
-        catalog: headerLookCatalog,
-        expanded: state.expandedRow === "header",
-        onToggle: () => handleToggleRow("header"),
-        currentId: state.previewed.headerLookId,
-        currentLabel: state.previewed.headerLookId ? currentHeaderLook?.label ?? "Unknown header Look" : `${currentHeaderLook?.label ?? "Site style"} (default)`,
-        scopeDescription: "Changes the header on every page.",
-        options: chromeLookModels.header.options,
-        diagnostics: chromeLookModels.header.diagnostics,
+        label: "Header layout",
+        ariaLabel: "Header layout",
+        defaultDescription: "Choose the header structure.",
+        expanded: state.expandedRow === "header-layout",
+        onToggle: () => handleToggleRow("header-layout"),
+        currentId: state.previewed.headerLayoutId,
+        currentLabel: currentHeaderLayout?.label ?? state.previewed.headerLayoutId,
+        scopeDescription: "Changes the header structure on every page.",
+        options: chromeLookModels.headerLayout.options,
+        diagnostics: [],
+        onCycle: (direction) => {
+          const next = cycleSiteChromeLookId(chromeLookModels.headerLayout.options, state.previewed.headerLayoutId, direction);
+          if (next !== void 0) handlePreviewHeaderLayout(next);
+        },
+        onPreview: handlePreviewHeaderLayout,
+        disabled: saving
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SiteChromeLookRow,
+      {
+        label: "Header look",
+        ariaLabel: "Header look",
+        defaultDescription: "Choose the header visual style.",
+        expanded: state.expandedRow === "header-style",
+        onToggle: () => handleToggleRow("header-style"),
+        currentId: state.previewed.headerStyleId,
+        currentLabel: currentHeaderStyle?.label ?? state.previewed.headerStyleId,
+        scopeDescription: "Changes the header surface and link style.",
+        options: chromeLookModels.headerStyle.options,
+        diagnostics: [],
         onCycle: (direction) => {
-          const next = cycleSiteChromeLookId(chromeLookModels.header.options, state.previewed.headerLookId, direction);
-          if (next !== void 0) handlePreviewHeaderLook(next);
+          const next = cycleSiteChromeLookId(chromeLookModels.headerStyle.options, state.previewed.headerStyleId, direction);
+          if (next !== void 0) handlePreviewHeaderStyle(next);
         },
-        onPreview: handlePreviewHeaderLook,
+        onPreview: handlePreviewHeaderStyle,
         disabled: saving
       }
     ),
@@ -6063,6 +6209,24 @@ function StyleConfigurator({
         disabled: saving
       }
     ),
+    /* @__PURE__ */ jsx(
+      TypographyRow,
+      {
+        expanded: state.expandedRow === "typography",
+        onToggle: () => handleToggleRow("typography"),
+        apiClient,
+        siteStyle: currentSiteStyle,
+        currentPresetId: state.previewed.typographyPresetId,
+        currentLabel: currentTypographyPreset?.name ?? "Custom typography",
+        bodyFontOverride: state.previewed.typographyBodyFontOverride,
+        headingFontOverride: state.previewed.typographyHeadingFontOverride,
+        onPreviewPreset: handlePreviewTypographyPreset,
+        onBodyFontOverride: handleBodyFontOverride,
+        onHeadingFontOverride: handleHeadingFontOverride,
+        onClearOverrides: handleClearTypographyOverrides,
+        disabled: saving
+      }
+    ),
     /* @__PURE__ */ jsx(
       PaletteRow,
       {
@@ -6154,6 +6318,407 @@ function PersonalityRow({ expanded, onToggle, siteStyle, currentId, currentLabel
     personality.id
   )) }) });
 }
+function TypographyRow({
+  expanded,
+  onToggle,
+  apiClient,
+  siteStyle,
+  currentPresetId,
+  currentLabel,
+  bodyFontOverride,
+  headingFontOverride,
+  onPreviewPreset,
+  onBodyFontOverride,
+  onHeadingFontOverride,
+  onClearOverrides,
+  disabled
+}) {
+  const options = useMemo(
+    () => requireEntriesForCuratedChoices(typographyPresets, siteStyle.typographyPresetChoices),
+    [siteStyle.typographyPresetChoices]
+  );
+  const fontCatalog = useFontCatalog(apiClient, expanded);
+  const selectedPreset = currentPresetId ? findTypographyPreset(currentPresetId) : null;
+  return /* @__PURE__ */ jsxs(StyleRowFrame, { label: "Typography", currentLabel, expanded, onToggle, children: [
+    currentPresetId === null ? /* @__PURE__ */ jsx("div", { className: "mb-3 rounded-md border border-muted-foreground/20 bg-muted/30 px-3 py-2 text-xs text-muted-foreground", children: "Current custom setup" }) : null,
+    /* @__PURE__ */ jsx("ul", { role: "radiogroup", "aria-label": "Typography preset", className: "space-y-1", children: options.map((preset) => /* @__PURE__ */ jsx(
+      TypographyPresetOption,
+      {
+        preset,
+        selected: preset.id === currentPresetId,
+        onSelect: () => onPreviewPreset(preset.id),
+        disabled
+      },
+      preset.id
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-3 border-t pt-3", children: [
+      selectedPreset ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          TypographyFontSlotPicker,
+          {
+            label: "Body font",
+            slot: "body",
+            preset: selectedPreset,
+            catalog: fontCatalog,
+            value: bodyFontOverride,
+            onChange: onBodyFontOverride,
+            disabled
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TypographyFontSlotPicker,
+          {
+            label: "Heading font",
+            slot: "heading",
+            preset: selectedPreset,
+            catalog: fontCatalog,
+            value: headingFontOverride,
+            onChange: onHeadingFontOverride,
+            disabled
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Choose a typography preset to use curated font overrides." }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: "outline",
+          onClick: onClearOverrides,
+          disabled: disabled || !bodyFontOverride && !headingFontOverride,
+          children: "Use preset fonts"
+        }
+      )
+    ] })
+  ] });
+}
+function TypographyPresetOption({
+  preset,
+  selected,
+  onSelect,
+  disabled
+}) {
+  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "radio",
+      "aria-checked": selected,
+      onClick: onSelect,
+      disabled,
+      className: cn(
+        "w-full rounded-md border px-3 py-2 text-left transition disabled:cursor-not-allowed disabled:opacity-50",
+        selected ? "border-primary bg-primary/5" : "border-border hover:bg-muted/60"
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: preset.name }),
+          /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: preset.description })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "shrink-0 text-right", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-[11px] font-semibold uppercase tracking-wide", children: preset.defaultFonts.heading.split(",")[0] }),
+          /* @__PURE__ */ jsx("div", { className: "text-[11px] text-muted-foreground", children: preset.defaultFonts.body.split(",")[0] })
+        ] })
+      ] })
+    }
+  ) });
+}
+function TypographyFontSlotPicker({
+  label,
+  slot,
+  preset,
+  catalog,
+  value,
+  onChange,
+  disabled
+}) {
+  const [query, setQuery] = useState("");
+  const defaultFont = primaryFontFamily(preset.defaultFonts[slot]);
+  const selectedFamily = value ?? defaultFont;
+  const recordsByFamily = useMemo(() => indexFontsByFamily(catalog.fonts), [catalog.fonts]);
+  const selectedFit = evaluateTypographyFontSlot({
+    slot,
+    policy: preset.slotPolicies[slot],
+    capability: capabilityForFamily(selectedFamily, recordsByFamily)
+  });
+  const recommendedFamilies = preset.recommendedFonts[slot];
+  const recommendedOptions = useMemo(
+    () => uniqueFontFamilies(recommendedFamilies),
+    [recommendedFamilies]
+  );
+  const browseOptions = useMemo(() => {
+    const normalizedQuery = query.trim().toLowerCase();
+    const source = normalizedQuery.length > 0 ? catalog.fonts.filter((font) => font.family.toLowerCase().includes(normalizedQuery)) : catalog.fonts;
+    return [...source].sort((a, b) => sortFontForPresetSlot(a, b, slot, preset, recordsByFamily)).slice(0, normalizedQuery.length > 0 ? MAX_FONT_RESULTS_WHEN_SEARCHING : MAX_FONT_RESULTS_WHEN_BROWSING);
+  }, [catalog.fonts, preset, query, recordsByFamily, slot]);
+  return /* @__PURE__ */ jsxs("section", { className: "space-y-2", "aria-label": label, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-muted-foreground", children: label }),
+        /* @__PURE__ */ jsx("div", { className: "truncate text-sm", children: value ? selectedFamily : `${defaultFont} (preset)` })
+      ] }),
+      /* @__PURE__ */ jsx(TypographyFontFitBadge, { fit: selectedFit })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-1", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "rounded-md border px-3 py-2 text-left text-sm transition disabled:cursor-not-allowed disabled:opacity-50",
+            value === null ? "border-foreground bg-accent/40" : "border-transparent hover:border-foreground/40 hover:bg-accent/20"
+          ),
+          onClick: () => onChange(null),
+          disabled,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Use preset font" }),
+            /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs text-muted-foreground", children: defaultFont })
+          ]
+        }
+      ),
+      recommendedOptions.map((family) => /* @__PURE__ */ jsx(
+        FontFamilyOption,
+        {
+          family,
+          selected: value === family,
+          fit: evaluateTypographyFontSlot({
+            slot,
+            policy: preset.slotPolicies[slot],
+            capability: capabilityForFamily(family, recordsByFamily)
+          }),
+          onSelect: () => onChange(family),
+          disabled
+        },
+        family
+      ))
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2 rounded-md border bg-muted/20 p-2", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "search",
+          value: query,
+          placeholder: `Search ${slot} fonts`,
+          onChange: (event) => setQuery(event.currentTarget.value),
+          disabled: disabled || catalog.kind === "loading",
+          className: "h-8 w-full rounded-md border bg-background px-2 text-sm outline-none focus:border-primary disabled:cursor-not-allowed disabled:opacity-50"
+        }
+      ),
+      catalog.kind === "loading" ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Loading font catalog..." }) : catalog.kind === "failed" ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: catalog.message }) : null,
+      browseOptions.length > 0 ? /* @__PURE__ */ jsx("div", { className: "max-h-56 space-y-1 overflow-y-auto pr-1", children: browseOptions.map((font) => /* @__PURE__ */ jsx(
+        FontFamilyOption,
+        {
+          family: font.family,
+          selected: value === font.family,
+          fit: evaluateTypographyFontSlot({
+            slot,
+            policy: preset.slotPolicies[slot],
+            capability: capabilityFromFontRecord(font)
+          }),
+          onSelect: () => onChange(font.family),
+          disabled
+        },
+        font.family
+      )) }) : catalog.kind === "loaded" ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "No matching Google Fonts." }) : null
+    ] }),
+    /* @__PURE__ */ jsxs("label", { className: "block space-y-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Brand or uploaded font name" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: value ?? "",
+          placeholder: "Enter any font family",
+          onChange: (event) => onChange(normalizeFontFamilyOverride(event.currentTarget.value)),
+          disabled,
+          className: "h-8 w-full rounded-md border bg-background px-2 text-sm outline-none focus:border-primary disabled:cursor-not-allowed disabled:opacity-50"
+        }
+      )
+    ] })
+  ] });
+}
+function FontFamilyOption({
+  family,
+  selected,
+  fit,
+  onSelect,
+  disabled
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "flex w-full items-center justify-between gap-3 rounded-md border px-3 py-2 text-left text-sm transition disabled:cursor-not-allowed disabled:opacity-50",
+        selected ? "border-foreground bg-accent/40" : "border-transparent bg-background hover:border-foreground/40 hover:bg-accent/20"
+      ),
+      onClick: onSelect,
+      disabled,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: family }),
+        /* @__PURE__ */ jsx(TypographyFontFitBadge, { fit })
+      ]
+    }
+  );
+}
+function TypographyFontFitBadge({ fit }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "shrink-0 rounded-full px-2 py-0.5 text-[11px] font-medium",
+        fit.kind === "recommended" && "bg-emerald-100 text-emerald-800",
+        fit.kind === "compatible" && "bg-sky-100 text-sky-800",
+        fit.kind === "limited" && "bg-amber-100 text-amber-900",
+        fit.kind === "risky" && "bg-rose-100 text-rose-800",
+        fit.kind === "unknown" && "bg-muted text-muted-foreground"
+      ),
+      title: fit.reason,
+      children: typographyFontFitLabel(fit.kind)
+    }
+  );
+}
+function useFontCatalog(apiClient, enabled) {
+  const [catalog, setCatalog] = useState({ kind: "idle", fonts: [] });
+  const requestedClientRef = useRef(null);
+  useEffect(() => {
+    if (!enabled) return;
+    if (requestedClientRef.current === apiClient) return;
+    requestedClientRef.current = apiClient;
+    let cancelled = false;
+    setCatalog({ kind: "loading", fonts: [] });
+    async function loadFonts() {
+      try {
+        const response = await apiClient({ endpoint: "listFonts" });
+        const fonts = unwrapResponse(response);
+        if (!cancelled) {
+          setCatalog({
+            kind: "loaded",
+            fonts: Array.isArray(fonts) ? fonts : []
+          });
+        }
+      } catch (error) {
+        if (!cancelled) {
+          setCatalog({
+            kind: "failed",
+            fonts: [],
+            message: error instanceof Error ? error.message : "Unable to load the font catalog."
+          });
+        }
+      }
+    }
+    void loadFonts();
+    return () => {
+      cancelled = true;
+    };
+  }, [apiClient, enabled]);
+  return catalog;
+}
+function indexFontsByFamily(fonts) {
+  return new Map(fonts.map((font) => [font.family.toLowerCase(), font]));
+}
+function capabilityForFamily(family, recordsByFamily) {
+  const record = recordsByFamily.get(family.toLowerCase());
+  if (record) return capabilityFromFontRecord(record);
+  return {
+    source: "unknown",
+    family,
+    category: "unknown",
+    variants: []
+  };
+}
+function capabilityFromFontRecord(font) {
+  return {
+    source: "google",
+    family: font.family,
+    category: normalizeGoogleFontCategory(font.category),
+    variants: font.variants
+  };
+}
+function normalizeGoogleFontCategory(category) {
+  switch (category) {
+    case "serif":
+    case "sans-serif":
+    case "display":
+    case "handwriting":
+    case "monospace":
+      return category;
+    default:
+      return "unknown";
+  }
+}
+function sortFontForPresetSlot(a, b, slot, preset, recordsByFamily) {
+  const aFit = evaluateTypographyFontSlot({
+    slot,
+    policy: preset.slotPolicies[slot],
+    capability: capabilityForFamily(a.family, recordsByFamily)
+  });
+  const bFit = evaluateTypographyFontSlot({
+    slot,
+    policy: preset.slotPolicies[slot],
+    capability: capabilityForFamily(b.family, recordsByFamily)
+  });
+  const fitDelta = typographyFontFitRank(aFit.kind) - typographyFontFitRank(bFit.kind);
+  if (fitDelta !== 0) return fitDelta;
+  const popularityDelta = (a.popularity ?? Infinity) - (b.popularity ?? Infinity);
+  if (popularityDelta !== 0) return popularityDelta;
+  return a.family.localeCompare(b.family);
+}
+function typographyFontFitRank(kind) {
+  switch (kind) {
+    case "recommended":
+      return 0;
+    case "compatible":
+      return 1;
+    case "limited":
+      return 2;
+    case "risky":
+      return 3;
+    case "unknown":
+      return 4;
+    default: {
+      const exhaustive = kind;
+      return exhaustive;
+    }
+  }
+}
+function typographyFontFitLabel(kind) {
+  switch (kind) {
+    case "recommended":
+      return "Recommended";
+    case "compatible":
+      return "Compatible";
+    case "limited":
+      return "Limited";
+    case "risky":
+      return "Risky";
+    case "unknown":
+      return "Unknown";
+    default: {
+      const exhaustive = kind;
+      return exhaustive;
+    }
+  }
+}
+function primaryFontFamily(cssFamily) {
+  return cssFamily.split(",")[0]?.trim().replace(/^["']|["']$/gu, "") || cssFamily;
+}
+function uniqueFontFamilies(families) {
+  const seen = /* @__PURE__ */ new Set();
+  const result = [];
+  for (const family of families) {
+    const normalized = primaryFontFamily(family);
+    const key = normalized.toLowerCase();
+    if (seen.has(key)) continue;
+    seen.add(key);
+    result.push(normalized);
+  }
+  return result;
+}
+function normalizeFontFamilyOverride(value) {
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : null;
+}
 function SiteChromeLookRow({
   label,
   ariaLabel,
@@ -6166,7 +6731,7 @@ function SiteChromeLookRow({
       description: defaultDescription,
       available: true
     },
-    ...catalog.map((look) => ({ ...look, available: true }))
+    ...(catalog ?? []).map((look) => ({ ...look, available: true }))
   ],
   diagnostics,
   scopeDescription,
@@ -6188,7 +6753,7 @@ function SiteChromeLookRow({
             type: "button",
             onClick: () => onCycle("prev"),
             className: "grid h-8 w-8 place-items-center hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50",
-            "aria-label": `Previous ${label.toLowerCase()} Look`,
+            "aria-label": `Previous ${label.toLowerCase()}`,
             disabled: disabled || cycleableSiteChromeOptions(options).length <= 1,
             children: /* @__PURE__ */ jsx(ChevronLeft, { size: 14 })
           }
@@ -6199,7 +6764,7 @@ function SiteChromeLookRow({
             type: "button",
             onClick: () => onCycle("next"),
             className: "grid h-8 w-8 place-items-center border-l hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50",
-            "aria-label": `Next ${label.toLowerCase()} Look`,
+            "aria-label": `Next ${label.toLowerCase()}`,
             disabled: disabled || cycleableSiteChromeOptions(options).length <= 1,
             children: /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
           }
@@ -6369,6 +6934,8 @@ function describeWarning(warning) {
       return `Button style changed to ${warning.fellBackTo} because ${warning.requested} is not offered for this site style.`;
     case "rejected-palette":
       return `Palette changed to ${warning.fellBackTo} because ${warning.requested} is not offered for this site style.`;
+    case "rejected-typography-preset":
+      return `Typography changed to ${warning.fellBackTo} because ${warning.requested} is not offered for this site style.`;
     default: {
       const exhaustive = warning;
       return exhaustive;
@@ -6393,6 +6960,11 @@ function PreviewEditorSidebar({
   themeSelectionButtonPersonalityId = null,
   themeSelectionPaletteVariantId = null,
   themeSelectionPaletteOverrides = null,
+  themeSelectionHeaderLayoutId = null,
+  themeSelectionHeaderStyleId = null,
+  themeSelectionTypographyPresetId = null,
+  themeSelectionTypographyBodyFontOverride = null,
+  themeSelectionTypographyHeadingFontOverride = null,
   themeSelectionHeaderLookId = null,
   themeSelectionFooterLookId = null,
   themeSelectionHeaderContext,
@@ -6552,6 +7124,11 @@ function PreviewEditorSidebar({
             buttonPersonalityId: themeSelectionButtonPersonalityId,
             paletteVariantId: themeSelectionPaletteVariantId,
             paletteOverrides: themeSelectionPaletteOverrides,
+            headerLayoutId: themeSelectionHeaderLayoutId,
+            headerStyleId: themeSelectionHeaderStyleId,
+            typographyPresetId: themeSelectionTypographyPresetId,
+            typographyBodyFontOverride: themeSelectionTypographyBodyFontOverride,
+            typographyHeadingFontOverride: themeSelectionTypographyHeadingFontOverride,
             headerLookId: themeSelectionHeaderLookId,
             footerLookId: themeSelectionFooterLookId
           },