@orion-studios/payload-studio 0.5.0-beta.98 → 0.6.0-beta.1

package/dist/studio-pages/client.mjs

@@ -6,7 +6,7 @@ import {
 } from "../chunk-ROTPP5CU.mjs";
 
 // src/studio-pages/builder/BuilderPageEditor.tsx
-import { useCallback, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef2, useState as useState6 } from "react";
+import { useCallback, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef3, useState as useState6 } from "react";
 
 // src/blocks/blocks/sectionStyleFields.ts
 var sectionStyleDefaults = {
@@ -15,15 +15,15 @@ var sectionStyleDefaults = {
   contentGradientAngle: "135",
   contentGradientFrom: "#ffffff",
   contentGradientPreset: "none",
-  contentGradientTo: "#f4f6f2",
+  contentGradientTo: "#f4f6f8",
   contentWidth: "inherit",
   sectionPaddingX: "inherit",
   sectionBackgroundColor: "#ffffff",
   sectionBackgroundMode: "none",
   sectionGradientAngle: "135",
-  sectionGradientFrom: "#124a37",
-  sectionGradientPreset: "forest",
-  sectionGradientTo: "#1f684f",
+  sectionGradientFrom: "#334b63",
+  sectionGradientPreset: "slate",
+  sectionGradientTo: "#496582",
   sectionPaddingY: "md",
   sectionWidth: "content"
 };
@@ -41,13 +41,13 @@ var defaultBuilderBlockSettingsV2 = {
     contentGradientAngle: "135",
     contentGradientFrom: "#ffffff",
     contentGradientPreset: "none",
-    contentGradientTo: "#f4f6f2",
+    contentGradientTo: "#f4f6f8",
     sectionBackgroundColor: "#ffffff",
     sectionBackgroundMode: "none",
     sectionGradientAngle: "135",
-    sectionGradientFrom: "#124a37",
-    sectionGradientPreset: "forest",
-    sectionGradientTo: "#1f684f"
+    sectionGradientFrom: "#334b63",
+    sectionGradientPreset: "slate",
+    sectionGradientTo: "#496582"
   },
   layout: {
     contentWidth: "inherit",
@@ -108,9 +108,9 @@ var defaultBuilderItemSettingsV2 = {
 };
 var defaultBuilderThemeTokens = {
   colors: {
-    accent: "#0d4a37",
-    bodyText: "#13211c",
-    headingText: "#13211c",
+    accent: "#334b63",
+    bodyText: "#425163",
+    headingText: "#182332",
     surface: "#ffffff"
   },
   radii: {
@@ -504,72 +504,7 @@ var alignOptions = [
   { label: "Right", value: "right" },
   { label: "Justify", value: "justify" }
 ];
-var layoutFieldSet = [
-  {
-    group: "layout",
-    key: "settings.layout.contentWidth",
-    label: "Content Width",
-    options: [
-      { label: "Inherit Page Default", value: "inherit" },
-      { label: "Narrow", value: "narrow" },
-      { label: "Content", value: "content" },
-      { label: "Wide", value: "wide" },
-      { label: "Full", value: "full" }
-    ],
-    tags: ["width", "container"],
-    type: "select"
-  },
-  {
-    group: "layout",
-    key: "settings.layout.linkVerticalPadding",
-    label: "Keep Top and Bottom Equal",
-    tags: ["spacing", "padding", "equal", "lock", "vertical"],
-    type: "checkbox"
-  },
-  {
-    group: "layout",
-    key: "settings.layout.paddingTopPt",
-    label: "Top Padding (pt)",
-    max: 240,
-    min: 0,
-    tags: ["spacing", "padding", "top", "vertical"],
-    type: "number"
-  },
-  {
-    group: "layout",
-    key: "settings.layout.paddingBottomPt",
-    label: "Bottom Padding (pt)",
-    max: 240,
-    min: 0,
-    tags: ["spacing", "padding", "bottom", "vertical"],
-    type: "number"
-  },
-  {
-    group: "layout",
-    key: "settings.layout.linkHorizontalPadding",
-    label: "Keep Left and Right Equal",
-    tags: ["spacing", "padding", "equal", "lock", "horizontal"],
-    type: "checkbox"
-  },
-  {
-    group: "layout",
-    key: "settings.layout.paddingLeftPt",
-    label: "Left Padding (pt)",
-    max: 240,
-    min: 0,
-    tags: ["spacing", "padding", "left", "horizontal"],
-    type: "number"
-  },
-  {
-    group: "layout",
-    key: "settings.layout.paddingRightPt",
-    label: "Right Padding (pt)",
-    max: 240,
-    min: 0,
-    tags: ["spacing", "padding", "right", "horizontal"],
-    type: "number"
-  }
-];
+var layoutFieldSet = [];
 var typographyFieldSet = [
   {
     group: "typography",
@@ -626,44 +561,7 @@ var typographyFieldSet = [
     type: "select"
   }
 ];
-var styleFieldSet = [
-  {
-    group: "style",
-    key: "settings.appearance.sectionBackgroundMode",
-    label: "Section Background",
-    options: [
-      { label: "None", value: "none" },
-      { label: "Color", value: "color" },
-      { label: "Gradient", value: "gradient" }
-    ],
-    tags: ["background", "section"],
-    type: "select"
-  },
-  {
-    group: "style",
-    key: "settings.appearance.sectionBackgroundColor",
-    label: "Section Background Color",
-    type: "color"
-  },
-  {
-    group: "style",
-    key: "settings.appearance.contentBackgroundMode",
-    label: "Content Background",
-    options: [
-      { label: "None", value: "none" },
-      { label: "Color", value: "color" },
-      { label: "Gradient", value: "gradient" }
-    ],
-    tags: ["background", "content"],
-    type: "select"
-  },
-  {
-    group: "style",
-    key: "settings.appearance.contentBackgroundColor",
-    label: "Content Background Color",
-    type: "color"
-  }
-];
+var styleFieldSet = [];
 var commonAdvanced = [
   {
     group: "advanced",
@@ -714,10 +612,8 @@ var mediaFieldSet = [
 ];
 var commonInspectorGroups = [
   { key: "basics", label: "Basics" },
-  { key: "layout", label: "Layout" },
   { key: "typography", label: "Typography" },
   { key: "media", label: "Media" },
-  { key: "style", label: "Style" },
   { key: "advanced", label: "Advanced" }
 ];
 var inspectorDefinitionByBlockType = {
@@ -772,6 +668,7 @@ var inspectorDefinitionByBlockType = {
   faq: {
     blockType: "faq",
     fields: [
+      { group: "basics", inlineEditable: true, key: "eyebrow", label: "Eyebrow", type: "text" },
       { group: "basics", inlineEditable: true, key: "title", label: "Title", type: "text" },
       ...layoutFieldSet,
       ...typographyFieldSet,
@@ -782,6 +679,7 @@ var inspectorDefinitionByBlockType = {
   featureGrid: {
     blockType: "featureGrid",
     fields: [
+      { group: "basics", inlineEditable: true, key: "eyebrow", label: "Eyebrow", type: "text" },
       { group: "basics", inlineEditable: true, key: "title", label: "Title", type: "text" },
       {
         group: "basics",
@@ -789,7 +687,11 @@ var inspectorDefinitionByBlockType = {
         label: "Variant",
         options: [
           { label: "Cards", value: "cards" },
-          { label: "Highlight", value: "highlight" }
+          { label: "Highlight", value: "highlight" },
+          { label: "Split List", value: "splitList" },
+          { label: "Panels", value: "panels" },
+          { label: "Catalog", value: "catalog" },
+          { label: "Contact Split", value: "contact" }
         ],
         type: "select"
       },
@@ -804,6 +706,7 @@ var inspectorDefinitionByBlockType = {
   formEmbed: {
     blockType: "formEmbed",
     fields: [
+      { group: "basics", inlineEditable: true, key: "eyebrow", label: "Eyebrow", type: "text" },
       { group: "basics", inlineEditable: true, key: "title", label: "Title", type: "text" },
       { group: "basics", inlineEditable: true, key: "description", label: "Description", type: "textarea" },
       {
@@ -836,7 +739,7 @@ var inspectorDefinitionByBlockType = {
         type: "select"
       },
       {
-        group: "layout",
+        group: "basics",
         key: "heroHeight",
         label: "Hero Height",
         options: [
@@ -889,6 +792,16 @@ var inspectorDefinitionByBlockType = {
   richText: {
     blockType: "richText",
     fields: [
+      {
+        group: "basics",
+        key: "variant",
+        label: "Variant",
+        options: [
+          { label: "Default", value: "default" },
+          { label: "Quote Banner", value: "quoteBanner" }
+        ],
+        type: "select"
+      },
       { group: "basics", inlineEditable: true, key: "title", label: "Title", type: "text" },
       {
         group: "basics",
@@ -1029,9 +942,7 @@ function BlockInspectorRenderer({
   const [expandedGroups, setExpandedGroups] = useState2({
     advanced: false,
     basics: false,
-    layout: false,
     media: false,
-    style: false,
     typography: false
   });
   const definition = inspectorDefinitionByBlockType[blockType];
@@ -1074,10 +985,7 @@ function BlockInspectorRenderer({
   };
   return /* @__PURE__ */ jsxs3("div", { className: "orion-builder-settings-root", children: [
     /* @__PURE__ */ jsxs3("div", { className: "orion-builder-settings-summary-row", children: [
-      /* @__PURE__ */ jsxs3("div", { className: "orion-builder-settings-summary-title", children: [
-        groupLabel("basics"),
-        " and Styling"
-      ] }),
+      /* @__PURE__ */ jsx3("div", { className: "orion-builder-settings-summary-title", children: "Content Settings" }),
       /* @__PURE__ */ jsxs3("div", { className: "orion-builder-settings-summary-actions", children: [
         /* @__PURE__ */ jsx3(
           "button",
@@ -1106,7 +1014,7 @@ function BlockInspectorRenderer({
         {
           className: "orion-builder-settings-input",
           onChange: (event) => onSearchQueryChange(event.target.value),
-          placeholder: "Search layout, text, media...",
+          placeholder: "Search content, text, media...",
           type: "search",
           value: searchQuery
         }
@@ -1335,6 +1243,33 @@ function BlockInspectorRenderer({
   ] });
 }
 
+// src/studio-pages/document.ts
+var ensureNodeID = (value, index) => {
+  if (typeof value === "string" && value.trim().length > 0) {
+    return value.trim();
+  }
+  return `node-${index + 1}`;
+};
+var layoutToStudioDocument = (layout, title, metadata) => {
+  const nodes = layout.filter((block) => typeof block.blockType === "string").map((rawBlock, index) => {
+    const block = migrateBlockToSettingsV2(rawBlock);
+    const blockType = String(block.blockType);
+    const { id, blockType: _ignoredBlockType, ...data } = block;
+    return {
+      id: ensureNodeID(id, index),
+      type: blockType,
+      data
+    };
+  });
+  return {
+    metadata,
+    schemaVersion: 1,
+    title,
+    nodes,
+    updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+  };
+};
+
 // src/studio-pages/index.ts
 var withSectionStyleDefaults = (value) => ({
   ...sectionStyleDefaults,
@@ -1364,11 +1299,14 @@ var defaultNodeData = {
   }),
   cta: {
     ...withSectionStyleDefaults({}),
-    backgroundColor: "#1f684f",
+    backgroundColor: "",
+    bullets: [],
     buttonHref: "/contact",
     buttonLabel: "Contact Us",
     description: "Optional supporting copy.",
+    eyebrow: "",
     headline: "Ready to get started?",
+    imageURL: "",
     style: "light"
   },
   faq: {
@@ -1384,6 +1322,7 @@ var defaultNodeData = {
       { description: "Explain this point.", iconType: "badge", icon: "02", imageCornerStyle: "rounded", imageFit: "cover", imagePosition: "center", title: "Feature Two" },
       { description: "Explain this point.", iconType: "badge", icon: "03", imageCornerStyle: "rounded", imageFit: "cover", imagePosition: "center", title: "Feature Three" }
     ],
+    subtitle: "",
     title: "Section Title",
     variant: "cards"
   },
@@ -1391,16 +1330,18 @@ var defaultNodeData = {
     ...withSectionStyleDefaults({}),
     description: "Collect lead details from visitors.",
     formType: "quote",
+    submitLabel: "Submit",
     title: "Request a Quote"
   },
   hero: {
     ...withSectionStyleDefaults({}),
     backgroundColor: "",
+    backgroundImageURL: "",
     backgroundOverlayMode: "none",
     backgroundOverlayOpacity: 45,
     backgroundOverlayColor: "#000000",
-    backgroundOverlayGradientFrom: "#0d4a37",
-    backgroundOverlayGradientTo: "#1f684f",
+    backgroundOverlayGradientFrom: "#334b63",
+    backgroundOverlayGradientTo: "#496582",
     backgroundOverlayGradientAngle: "135",
     backgroundOverlayGradientFromStrength: 100,
     backgroundOverlayGradientToStrength: 100,
@@ -1434,11 +1375,12 @@ var defaultNodeData = {
       { imageCornerStyle: "rounded", imageFit: "contain", imagePosition: "center", name: "Trusted Partner 2" },
       { imageCornerStyle: "rounded", imageFit: "contain", imagePosition: "center", name: "Trusted Partner 3" }
     ],
-    subtitle: "Trusted by teams and homeowners across Central Texas.",
-    title: "Trusted by Local Organizations"
+    subtitle: "Show logos from trusted associations, partners, or collaborators.",
+    title: "Trusted by Great Partners"
   }),
   richText: {
     ...withSectionStyleDefaults({}),
+    cards: [],
     content: {
       root: {
         children: [
@@ -1468,6 +1410,7 @@ var defaultNodeData = {
         version: 1
       }
     },
+    statsItems: [],
     title: "Section Heading",
     width: "normal"
   },
@@ -1481,9 +1424,9 @@ var defaultNodeData = {
   },
   stats: withSectionStyleDefaults({
     items: [
-      { description: "Average response time", label: "Same-Day Quotes", value: "24h" },
-      { description: "Projects completed", label: "Completed Jobs", value: "1,200+" },
-      { description: "Client satisfaction score", label: "Satisfaction", value: "4.9/5" }
+      { description: "Average first response", label: "Response Time", value: "24h" },
+      { description: "Client satisfaction score", label: "Satisfaction", value: "4.9/5" },
+      { description: "Recent projects or clients served", label: "Recent Work", value: "150+" }
     ],
     subtitle: "Highlight measurable outcomes to build trust quickly.",
     title: "Performance Highlights"
@@ -1532,31 +1475,6 @@ var pageInspectorPanels = pageInspectorPanelRegistry.map((entry) => ({
   label: entry.panelLabel,
   nodeType: entry.nodeType
 }));
-var ensureNodeID = (inputID, index) => {
-  if (typeof inputID === "string" && inputID.length > 0) {
-    return inputID;
-  }
-  return `node-${index + 1}`;
-};
-var layoutToStudioDocument = (layout, title, metadata) => {
-  const nodes = layout.filter((block) => typeof block.blockType === "string").map((rawBlock, index) => {
-    const block = migrateBlockToSettingsV2(rawBlock);
-    const blockType = String(block.blockType);
-    const { id, blockType: _ignoredBlockType, ...data } = block;
-    return {
-      id: ensureNodeID(id, index),
-      type: blockType,
-      data
-    };
-  });
-  return {
-    metadata,
-    schemaVersion: 1,
-    title,
-    nodes,
-    updatedAt: (/* @__PURE__ */ new Date()).toISOString()
-  };
-};
 
 // src/studio-pages/builder/hooks/usePersistentSidebarPanel.ts
 import { useEffect as useEffect2, useState as useState3 } from "react";
@@ -1746,14 +1664,14 @@ var sectionPresets = [
         title: "Performance Highlights",
         subtitle: "Show measurable outcomes clients care about.",
         items: [
-          { value: "24h", label: "Same-Day Quotes", description: "Average first response" },
-          { value: "1,200+", label: "Completed Jobs", description: "Across Central Texas" },
+          { value: "24h", label: "Response Time", description: "Average first response" },
+          { value: "150+", label: "Recent Projects", description: "In the past 12 months" },
           { value: "4.9/5", label: "Satisfaction", description: "Average review score" }
         ]
       },
       {
         blockType: "logoWall",
-        title: "Trusted by Local Organizations",
+        title: "Trusted by Great Partners",
         subtitle: "Show logos from associations, partners, or neighborhoods.",
         items: [
           { name: "Partner One" },
@@ -1864,6 +1782,13 @@ function clonePresetBlocks(blocks) {
   return JSON.parse(JSON.stringify(blocks));
 }
 
+// src/studio-pages/builder/previewRegistry.ts
+var globalScope = globalThis;
+var registerBuilderBlockPreviewRenderer = (renderer) => {
+  globalScope.__ORION_STUDIO_BUILDER_BLOCK_PREVIEW_RENDERER__ = renderer;
+};
+var getRegisteredBuilderBlockPreviewRenderer = () => globalScope.__ORION_STUDIO_BUILDER_BLOCK_PREVIEW_RENDERER__ ?? null;
+
 // src/studio-pages/builder/ui/InlineText.tsx
 import { useEffect as useEffect3, useRef, useState as useState4 } from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
@@ -1931,10 +1856,10 @@ function InlineText({
         style: {
           background: "transparent",
           borderRadius: 6,
-          boxShadow: "0 0 0 4px rgba(92, 255, 174, 0.38)",
+          boxShadow: "0 0 0 1.5px rgba(255, 255, 255, 0.92), 0 0 0 5px var(--orion-studio-accent-soft-strong)",
           cursor: "text",
           minHeight: multiline ? "1.6em" : void 0,
-          outline: "3px solid rgba(21, 125, 82, 0.95)",
+          outline: "3px solid var(--orion-studio-selection-outline)",
           outlineOffset: 2,
           ...style
         },
@@ -1963,7 +1888,7 @@ function UploadOverlay({ label = "Uploading image..." }) {
 }
 
 // src/studio-pages/builder/ui/BlockFrame.tsx
-import { useEffect as useEffect4, useState as useState5 } from "react";
+import { useEffect as useEffect4, useRef as useRef2, useState as useState5 } from "react";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function BlockFrame({
   children,
@@ -1977,6 +1902,7 @@ function BlockFrame({
 }) {
   const [dropPosition, setDropPosition] = useState5(null);
   const [dropHovered, setDropHovered] = useState5(false);
+  const frameRef = useRef2(null);
   const isDragging = dragIndex === index;
   const isAnyDragging = dragIndex !== null;
   const isDropTarget = dragIndex !== null && dragIndex !== index && dropPosition !== null;
@@ -1991,13 +1917,8 @@ function BlockFrame({
   return /* @__PURE__ */ jsxs6(
     "div",
     {
-      draggable: true,
+      ref: frameRef,
       onClick: onSelect,
-      onDragEnd: () => {
-        setDragIndex(null);
-        setDropPosition(null);
-        setDropHovered(false);
-      },
       onDragEnter: (event) => {
         if (dragIndex === null || dragIndex === index) {
           return;
@@ -2029,7 +1950,6 @@ function BlockFrame({
           setDropPosition(position);
         }
       },
-      onDragStart: () => setDragIndex(index),
       onDrop: (event) => {
         event.preventDefault();
         if (dragIndex === null) {
@@ -2042,12 +1962,12 @@ function BlockFrame({
         setDropHovered(false);
       },
       style: {
-        background: isDropTarget ? "rgba(31, 122, 88, 0.07)" : "transparent",
+        background: isDropTarget ? "var(--orion-studio-accent-soft)" : "transparent",
         borderRadius: 18,
-        boxShadow: isDragging ? "0 24px 34px rgba(0, 0, 0, 0.2)" : isDropTarget ? "0 12px 26px rgba(31, 122, 88, 0.18)" : "none",
-        cursor: isDragging ? "grabbing" : "grab",
+        boxShadow: isDragging ? "0 24px 34px rgba(0, 0, 0, 0.2)" : isDropTarget ? "0 12px 26px var(--orion-studio-accent-soft-strong)" : "none",
+        cursor: "default",
         opacity: isDragging ? 0.46 : isAnyDragging ? 0.98 : 1,
-        outline: isDropTarget ? "3px solid rgba(31, 122, 88, 0.7)" : selected ? "2px solid #1f7a58" : "2px dashed transparent",
+        outline: isDropTarget ? "3px solid var(--orion-studio-selection-outline)" : selected ? "2px solid var(--orion-studio-selection-outline)" : "2px dashed transparent",
         outlineOffset: 4,
         position: "relative",
         transform: isDragging ? "scale(0.988)" : showDropBefore ? "translateY(5px) scale(1.003)" : showDropAfter ? "translateY(-5px) scale(1.003)" : isAnyDragging ? "scale(0.998)" : "none",
@@ -2059,9 +1979,9 @@ function BlockFrame({
           "div",
           {
             style: {
-              background: "#1f7a58",
+              background: "var(--orion-studio-accent)",
               borderRadius: 999,
-              boxShadow: "0 0 0 4px rgba(31, 122, 88, 0.2), 0 0 14px rgba(31, 122, 88, 0.25)",
+              boxShadow: "0 0 0 4px var(--orion-studio-accent-soft-strong), 0 0 14px var(--orion-studio-accent-soft-strong)",
               height: 5,
               left: 20,
               position: "absolute",
@@ -2075,9 +1995,9 @@ function BlockFrame({
           "div",
           {
             style: {
-              background: "#1f7a58",
+              background: "var(--orion-studio-accent)",
               borderRadius: 999,
-              boxShadow: "0 0 0 4px rgba(31, 122, 88, 0.2), 0 0 14px rgba(31, 122, 88, 0.25)",
+              boxShadow: "0 0 0 4px var(--orion-studio-accent-soft-strong), 0 0 14px var(--orion-studio-accent-soft-strong)",
               bottom: -10,
               height: 5,
               left: 20,
@@ -2091,8 +2011,8 @@ function BlockFrame({
           "div",
           {
             style: {
-              background: "rgba(31, 122, 88, 0.08)",
-              border: "1px dashed rgba(31, 122, 88, 0.5)",
+              background: "var(--orion-studio-accent-soft)",
+              border: "1px dashed var(--orion-studio-accent-border)",
               borderRadius: 14,
               inset: 12,
               pointerEvents: "none",
@@ -2127,11 +2047,38 @@ function BlockFrame({
           "div",
           {
             "aria-hidden": true,
+            draggable: true,
+            onClick: (event) => {
+              event.stopPropagation();
+              onSelect();
+            },
+            onDragEnd: () => {
+              setDragIndex(null);
+              setDropPosition(null);
+              setDropHovered(false);
+            },
+            onDragStart: (event) => {
+              event.stopPropagation();
+              if (event.dataTransfer && frameRef.current) {
+                const rect = frameRef.current.getBoundingClientRect();
+                const offsetX = Math.max(0, Math.min(rect.width, event.clientX - rect.left));
+                const offsetY = Math.max(0, Math.min(rect.height, event.clientY - rect.top));
+                event.dataTransfer.effectAllowed = "move";
+                event.dataTransfer.setData("text/plain", label);
+                event.dataTransfer.setDragImage(frameRef.current, offsetX, offsetY);
+              }
+              onSelect();
+              setDragIndex(index);
+            },
+            onMouseDown: (event) => {
+              event.stopPropagation();
+            },
             style: {
               alignItems: "center",
-              background: isDragging ? "rgba(31, 122, 88, 0.92)" : "rgba(31, 122, 88, 0.72)",
+              background: isDragging ? "var(--orion-studio-accent)" : "var(--orion-studio-accent-ghost)",
               borderRadius: 8,
               color: "#fff",
+              cursor: isDragging ? "grabbing" : "grab",
               display: "inline-flex",
               fontSize: 11,
               fontWeight: 700,
@@ -2355,7 +2302,12 @@ function renderSimpleBlockPreview(args) {
     );
   }
   if (type === "media") {
-    const image = resolveMedia2(block.image);
+    const imageRelation = resolveMedia2(block.image);
+    const imageURL = normalizeText3(block?.imageURL);
+    const image = imageRelation?.url || !imageURL ? imageRelation : {
+      alt: normalizeText3(block.caption, "Media image"),
+      url: imageURL
+    };
     const size = normalizeText3(block.size, "default");
     const blockSettings = isRecord4(block.settings) ? block.settings : {};
     const mediaSettings = isRecord4(blockSettings.media) ? blockSettings.media : {};
@@ -2561,10 +2513,10 @@ function AddSectionsPanel({
         {
           onClick: applyTemplateStarter,
           style: {
-            background: "#0f7d52",
+            background: "var(--orion-studio-accent)",
             border: "none",
             borderRadius: 999,
-            color: "#fff",
+            color: "var(--orion-studio-accent-contrast)",
             cursor: "pointer",
             fontSize: 12,
             fontWeight: 700,
@@ -2594,7 +2546,7 @@ function AddSectionsPanel({
           {
             onClick: () => addSectionPreset(preset.blocks),
             style: {
-              border: "1px solid rgba(13, 74, 55, 0.2)",
+              border: "1px solid var(--orion-studio-accent-border)",
               borderRadius: 10,
               cursor: "pointer",
               display: "grid",
@@ -2612,14 +2564,14 @@ function AddSectionsPanel({
         )),
         filteredSectionPresets.length === 0 ? /* @__PURE__ */ jsx9("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: "No presets match this search." }) : null
       ] }),
-      /* @__PURE__ */ jsxs8("div", { style: { borderTop: "1px solid rgba(13, 74, 55, 0.12)", marginTop: 2, paddingTop: 10 }, children: [
+      /* @__PURE__ */ jsxs8("div", { style: { borderTop: "1px solid var(--orion-studio-accent-border-subtle)", marginTop: 2, paddingTop: 10 }, children: [
         /* @__PURE__ */ jsx9("div", { style: { color: "var(--ink-700)", fontSize: 11, fontWeight: 800, textTransform: "uppercase" }, children: "Quick Add Blocks" }),
         /* @__PURE__ */ jsx9("div", { style: { display: "grid", gap: 6, gridTemplateColumns: "1fr 1fr", marginTop: 8 }, children: quickAddBlockTypes2.map((type) => /* @__PURE__ */ jsxs8(
           "button",
           {
             onClick: () => addBlockByType(type),
             style: {
-              border: "1px solid rgba(13, 74, 55, 0.2)",
+              border: "1px solid var(--orion-studio-accent-border)",
               borderRadius: 10,
               cursor: "pointer",
               fontSize: 12,
@@ -2697,7 +2649,7 @@ function PageDefaultsPanel({
         "div",
         {
           style: {
-            borderTop: "1px solid rgba(13, 74, 55, 0.12)",
+            borderTop: "1px solid var(--orion-studio-accent-border-subtle)",
             color: "var(--ink-700)",
             fontSize: 11,
             fontWeight: 800,
@@ -2725,7 +2677,7 @@ function PageDefaultsPanel({
             type: "color",
             value: normalizeText3(
               pageDefaults.themePage.colors?.accent,
-              "#0d4a37"
+              "#334b63"
             )
           }
         )
@@ -2747,7 +2699,7 @@ function PageDefaultsPanel({
             type: "color",
             value: normalizeText3(
               pageDefaults.themePage.colors?.headingText,
-              "#13211c"
+              "#182332"
             )
           }
         )
@@ -2769,7 +2721,7 @@ function PageDefaultsPanel({
             type: "color",
             value: normalizeText3(
               pageDefaults.themePage.colors?.bodyText,
-              "#13211c"
+              "#425163"
             )
           }
         )
@@ -2809,8 +2761,8 @@ var sidebarPanels = [
 function SidebarPanelIconButtons({ activeSidebarPanel, onOpenPanel }) {
   return /* @__PURE__ */ jsx11(Fragment3, { children: sidebarPanels.map((panel) => {
     const isActive = activeSidebarPanel === panel.key;
-    const iconFill = isActive ? "#ffffff" : "#124a37";
-    const iconButtonBg = isActive ? "#124a37" : "rgba(18, 74, 55, 0.08)";
+    const iconFill = isActive ? "var(--orion-studio-accent-contrast)" : "var(--orion-studio-accent)";
+    const iconButtonBg = isActive ? "var(--orion-studio-accent)" : "var(--orion-studio-accent-soft)";
     return /* @__PURE__ */ jsxs10(
       "button",
       {
@@ -2819,7 +2771,7 @@ function SidebarPanelIconButtons({ activeSidebarPanel, onOpenPanel }) {
         style: {
           alignItems: "center",
           background: iconButtonBg,
-          border: "1px solid rgba(18, 74, 55, 0.14)",
+          border: "1px solid var(--orion-studio-accent-border-subtle)",
           borderRadius: 14,
           cursor: "pointer",
           display: "grid",
@@ -2854,8 +2806,8 @@ function SidebarTabs({
     {
       style: {
         alignItems: "center",
-        background: "linear-gradient(180deg, rgba(18, 74, 55, 0.06), rgba(18, 74, 55, 0))",
-        borderBottom: "1px solid rgba(13, 74, 55, 0.12)",
+        background: "linear-gradient(180deg, var(--orion-studio-accent-soft), transparent)",
+        borderBottom: "1px solid var(--orion-studio-accent-border-subtle)",
         display: "flex",
         gap: 8,
         padding: "10px 10px"
@@ -2932,6 +2884,13 @@ var getItemTypographyAlign = (item) => {
   const value = typography.bodyAlign;
   return value === "center" || value === "justify" || value === "right" ? value : "left";
 };
+var bulletsToTextareaValue = (value) => {
+  if (!Array.isArray(value)) {
+    return "";
+  }
+  return value.map((item) => isRecord5(item) && typeof item.label === "string" ? item.label.trim() : "").filter(Boolean).join("\n");
+};
+var textareaValueToBullets = (value) => value.split("\n").map((line) => line.trim()).filter(Boolean).map((label) => ({ label }));
 function ArrayItemsEditor({
   blockType,
   expandedItemIndex,
@@ -3030,6 +2989,69 @@ function ArrayItemsEditor({
                     }
                   )
                 ] }),
+                hasQueryMatch(normalizedQuery, "tone", "style", "color") ? /* @__PURE__ */ jsxs11("label", { className: "orion-builder-settings-label", children: [
+                  "Tone",
+                  /* @__PURE__ */ jsxs11(
+                    "select",
+                    {
+                      className: "orion-builder-settings-input",
+                      onChange: (event) => onUpdateItemField(itemIndex, "tone", event.target.value),
+                      value: normalizeText(item.tone, "warm"),
+                      children: [
+                        /* @__PURE__ */ jsx12("option", { value: "warm", children: "Warm" }),
+                        /* @__PURE__ */ jsx12("option", { value: "cool", children: "Cool" }),
+                        /* @__PURE__ */ jsx12("option", { value: "neutral", children: "Neutral" })
+                      ]
+                    }
+                  )
+                ] }) : null,
+                hasQueryMatch(normalizedQuery, "button", "cta", "link label") ? /* @__PURE__ */ jsxs11("label", { className: "orion-builder-settings-label", children: [
+                  "Button Label",
+                  /* @__PURE__ */ jsx12(
+                    "input",
+                    {
+                      className: "orion-builder-settings-input",
+                      onChange: (event) => onUpdateItemField(itemIndex, "buttonLabel", event.target.value),
+                      type: "text",
+                      value: normalizeText(item.buttonLabel)
+                    }
+                  )
+                ] }) : null,
+                hasQueryMatch(normalizedQuery, "button", "url", "href", "link") ? /* @__PURE__ */ jsxs11("label", { className: "orion-builder-settings-label", children: [
+                  "Button URL",
+                  /* @__PURE__ */ jsx12(
+                    "input",
+                    {
+                      className: "orion-builder-settings-input",
+                      onChange: (event) => onUpdateItemField(itemIndex, "buttonHref", event.target.value),
+                      type: "text",
+                      value: normalizeText(item.buttonHref)
+                    }
+                  )
+                ] }) : null,
+                hasQueryMatch(normalizedQuery, "embed", "map", "iframe", "url") ? /* @__PURE__ */ jsxs11("label", { className: "orion-builder-settings-label", children: [
+                  "Embed URL",
+                  /* @__PURE__ */ jsx12(
+                    "input",
+                    {
+                      className: "orion-builder-settings-input",
+                      onChange: (event) => onUpdateItemField(itemIndex, "embedURL", event.target.value),
+                      type: "text",
+                      value: normalizeText(item.embedURL)
+                    }
+                  )
+                ] }) : null,
+                hasQueryMatch(normalizedQuery, "bullets", "list", "points") ? /* @__PURE__ */ jsxs11("label", { className: "orion-builder-settings-label", children: [
+                  "Bullet Points",
+                  /* @__PURE__ */ jsx12(
+                    "textarea",
+                    {
+                      className: "orion-builder-settings-input is-textarea",
+                      onChange: (event) => onUpdateItemField(itemIndex, "bullets", textareaValueToBullets(event.target.value)),
+                      value: bulletsToTextareaValue(item.bullets)
+                    }
+                  )
+                ] }) : null,
                 /* @__PURE__ */ jsxs11("div", { className: "orion-builder-settings-note", children: [
                   "Select this item and use the ",
                   /* @__PURE__ */ jsx12("strong", { children: "Media" }),
@@ -3262,6 +3284,19 @@ var resolveMedia = (value) => {
   }
   return null;
 };
+var resolveMediaWithURL = (value, imageURL, alt) => {
+  const resolved = resolveMedia(value);
+  if (resolved?.url) {
+    return resolved;
+  }
+  if (typeof imageURL === "string" && imageURL.trim().length > 0) {
+    return {
+      alt: typeof alt === "string" ? alt : void 0,
+      url: imageURL.trim()
+    };
+  }
+  return resolved;
+};
 var normalizeHeroImageFit = (value) => {
   if (value === "contain" || value === "contain-square") {
     return "contain";
@@ -3384,6 +3419,22 @@ function createLexicalText(value) {
     }
   };
 }
+function normalizePreviewText(value, fallback = "") {
+  if (typeof value === "string") {
+    return value;
+  }
+  const lexicalText = extractLexicalText(value);
+  return lexicalText || fallback;
+}
+function coercePreviewTextFieldValue(currentValue, nextValue) {
+  if (typeof currentValue === "string" || currentValue === null || typeof currentValue === "undefined") {
+    return nextValue;
+  }
+  if (isRecord6(currentValue) && isRecord6(currentValue.root)) {
+    return createLexicalText(nextValue);
+  }
+  return nextValue;
+}
 var blockTypeLabels = {
   beforeAfter: "Before / After",
   bookingEmbed: "Booking Embed",
@@ -3408,7 +3459,7 @@ var defaultSectionStyle = {
   contentGradientAngle: "135",
   contentGradientFrom: "#ffffff",
   contentGradientPreset: "none",
-  contentGradientTo: "#f4f6f2",
+  contentGradientTo: "#f4f6f8",
   contentWidth: "inherit",
   linkHorizontalPadding: true,
   linkVerticalPadding: true,
@@ -3420,13 +3471,14 @@ var defaultSectionStyle = {
   sectionBackgroundColor: "#ffffff",
   sectionBackgroundMode: "none",
   sectionGradientAngle: "135",
-  sectionGradientFrom: "#124a37",
-  sectionGradientPreset: "forest",
-  sectionGradientTo: "#1f684f",
+  sectionGradientFrom: "#334b63",
+  sectionGradientPreset: "slate",
+  sectionGradientTo: "#496582",
   sectionPaddingY: "md",
   sectionWidth: "content"
 };
 var gradientPresetPairs = {
+  brand: ["#334b63", "#496582"],
   cloud: ["#ffffff", "#eef2ec"],
   cream: ["#f7f3ea", "#eef3e9"],
   forest: ["#124a37", "#1f684f"],
@@ -3482,7 +3534,7 @@ function getDefaultBlock(blockType) {
       });
     case "featureGrid":
       return withSectionStyleDefaults2({
-        backgroundColor: "#1f684f",
+        backgroundColor: "",
         blockType: "featureGrid",
         items: [
           { description: "Explain this point.", icon: "01", imageCornerStyle: "rounded", imageFit: "cover", imagePosition: "center", title: "Feature One" },
@@ -3498,7 +3550,7 @@ function getDefaultBlock(blockType) {
         items: [
           { description: "Average first response", label: "Response Time", value: "24h" },
           { description: "Recent client rating", label: "Satisfaction", value: "4.9/5" },
-          { description: "Local completed projects", label: "Completed Jobs", value: "1,200+" }
+          { description: "Recent projects or clients served", label: "Recent Work", value: "150+" }
         ],
         subtitle: "Use measurable outcomes to build trust.",
         title: "Performance Highlights"
@@ -3551,7 +3603,7 @@ function getDefaultBlock(blockType) {
       });
     case "cta":
       return withSectionStyleDefaults2({
-        backgroundColor: "#1f684f",
+        backgroundColor: "",
         blockType: "cta",
         buttonHref: "/contact",
         buttonLabel: "Call To Action",
@@ -3672,6 +3724,25 @@ function rgbaFromHex(hex, alpha) {
   }
   return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${clamped})`;
 }
+function mixHexColors(primaryHex, secondaryHex, secondaryWeight) {
+  const primary = hexToRgb(primaryHex);
+  const secondary = hexToRgb(secondaryHex);
+  if (!primary || !secondary) {
+    return primaryHex;
+  }
+  const weight = Math.max(0, Math.min(1, secondaryWeight));
+  const mixChannel = (from, to) => Math.round(from * (1 - weight) + to * weight);
+  const toHex = (value) => value.toString(16).padStart(2, "0");
+  return `#${toHex(mixChannel(primary.r, secondary.r))}${toHex(mixChannel(primary.g, secondary.g))}${toHex(mixChannel(primary.b, secondary.b))}`;
+}
+function getReadableTextColor(backgroundHex, darkHex, lightHex) {
+  const rgb = hexToRgb(backgroundHex);
+  if (!rgb) {
+    return lightHex;
+  }
+  const luminance = (0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b) / 255;
+  return luminance > 0.62 ? darkHex : lightHex;
+}
 function getThemeColorOverride(tokens, colorKey) {
   if (!tokens || typeof tokens !== "object") {
     return null;
@@ -3731,11 +3802,11 @@ var sectionStyleFromBlock = (block, pageDefaults) => {
   const sectionPreset = normalizeText2(block.sectionGradientPreset, defaultSectionStyle.sectionGradientPreset);
   const sectionFrom = parseColor(
     normalizeText2(block.sectionGradientFrom, ""),
-    normalizeText2(defaultSectionStyle.sectionGradientFrom, "#124a37")
+    normalizeText2(defaultSectionStyle.sectionGradientFrom, "#334b63")
   );
   const sectionTo = parseColor(
     normalizeText2(block.sectionGradientTo, ""),
-    normalizeText2(defaultSectionStyle.sectionGradientTo, "#1f684f")
+    normalizeText2(defaultSectionStyle.sectionGradientTo, "#496582")
   );
   const sectionAngle = parseAngle(block.sectionGradientAngle, defaultSectionStyle.sectionGradientAngle);
   const contentMode = normalizeText2(block.contentBackgroundMode, defaultSectionStyle.contentBackgroundMode);
@@ -3750,7 +3821,7 @@ var sectionStyleFromBlock = (block, pageDefaults) => {
   );
   const contentTo = parseColor(
     normalizeText2(block.contentGradientTo, ""),
-    normalizeText2(defaultSectionStyle.contentGradientTo, "#f4f6f2")
+    normalizeText2(defaultSectionStyle.contentGradientTo, "#f4f6f8")
   );
   const contentAngle = parseAngle(block.contentGradientAngle, defaultSectionStyle.contentGradientAngle);
   const sectionPresetPair = gradientPresetPairs[sectionPreset];
@@ -3762,12 +3833,12 @@ var sectionStyleFromBlock = (block, pageDefaults) => {
     contentStyle: contentMode === "color" ? {
       background: contentColor,
       borderRadius: 20,
-      boxShadow: "0 8px 20px rgba(13, 74, 55, 0.08)",
+      boxShadow: "0 8px 20px var(--orion-studio-accent-soft)",
       padding: "1rem"
     } : contentMode === "gradient" ? {
       background: contentGradient,
       borderRadius: 20,
-      boxShadow: "0 8px 20px rgba(13, 74, 55, 0.08)",
+      boxShadow: "0 8px 20px var(--orion-studio-accent-soft)",
       padding: "1rem"
     } : {},
     sectionClass: `orion-builder-shell is-${pageDefaults.pageWidthDefault} padx-${resolvedSectionPaddingX}`,
@@ -3900,8 +3971,14 @@ var cloneSnapshot = (value) => ({
   layout: cloneBlockLayout(value.layout),
   pageDefaults: clonePageDefaults(value.pageDefaults)
 });
-function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, siteThemeTokens }) {
-  const editorRootRef = useRef2(null);
+function BuilderPageEditor({
+  featureFlags: _featureFlags,
+  initialDoc,
+  pageID,
+  renderBlockPreview,
+  siteThemeTokens
+}) {
+  const editorRootRef = useRef3(null);
   const doc = initialDoc ?? {};
   const sourceStudioDocument = doc.studioDocument && typeof doc.studioDocument === "object" ? doc.studioDocument : {};
   const sourceMetadata = sourceStudioDocument.metadata && typeof sourceStudioDocument.metadata === "object" ? sourceStudioDocument.metadata : {};
@@ -3939,12 +4016,12 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
   const [settingsPanelMode, setSettingsPanelMode] = useState6("basic");
   const [settingsSearchQuery, setSettingsSearchQuery] = useState6("");
   const { activeSidebarPanel, setActiveSidebarPanel } = usePersistentSidebarPanel(pageID);
-  const historyBypassRef = useRef2(true);
-  const previousSnapshotRef = useRef2({
+  const historyBypassRef = useRef3(true);
+  const previousSnapshotRef = useRef3({
     layout: migrateLayoutToSettingsV2(cloneBlockLayout(initialLayout).map((block) => withSectionStyleDefaults2(block))),
     pageDefaults: clonePageDefaults(initialPageDefaults)
   });
-  const lastSavedRef = useRef2(cloneSnapshot(previousSnapshotRef.current));
+  const lastSavedRef = useRef3(cloneSnapshot(previousSnapshotRef.current));
   const selectedBlock = useMemo2(
     () => selectedIndex !== null ? layout[selectedIndex] : null,
     [layout, selectedIndex]
@@ -4460,11 +4537,53 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
     }),
     [pageDefaults.themePage, siteThemeTokens]
   );
-  const renderWithSectionShell = (block, className, content) => {
+  const editorThemeStyles = useMemo2(() => {
+    const accent = resolvedThemeTokens.colors.accent;
+    const surface = resolvedThemeTokens.colors.surface;
+    const headingText = resolvedThemeTokens.colors.headingText;
+    const bodyText = resolvedThemeTokens.colors.bodyText;
+    const accentGradientEnd = mixHexColors(accent, surface, 0.18);
+    const subtleSurface = mixHexColors(surface, accent, 0.06);
+    const accentContrast = getReadableTextColor(accent, headingText, "#ffffff");
+    return {
+      "--forest-900": headingText,
+      "--ink-500": rgbaFromHex(bodyText, 0.72),
+      "--ink-700": bodyText,
+      "--orion-studio-accent": accent,
+      "--orion-studio-accent-border": rgbaFromHex(accent, 0.18),
+      "--orion-studio-accent-border-hairline": rgbaFromHex(accent, 0.08),
+      "--orion-studio-accent-border-strong": rgbaFromHex(accent, 0.24),
+      "--orion-studio-accent-border-subtle": rgbaFromHex(accent, 0.12),
+      "--orion-studio-accent-contrast": accentContrast,
+      "--orion-studio-accent-ghost": rgbaFromHex(accent, 0.82),
+      "--orion-studio-accent-gradient-end": accentGradientEnd,
+      "--orion-studio-accent-gradient-start": accent,
+      "--orion-studio-accent-soft": rgbaFromHex(accent, 0.08),
+      "--orion-studio-accent-soft-strong": rgbaFromHex(accent, 0.14),
+      "--orion-studio-bg": mixHexColors(surface, accent, 0.03),
+      "--orion-studio-body-text": bodyText,
+      "--orion-studio-border": rgbaFromHex(headingText, 0.14),
+      "--orion-studio-card": surface,
+      "--orion-studio-ink": headingText,
+      "--orion-studio-muted": rgbaFromHex(bodyText, 0.72),
+      "--orion-studio-radius-lg": `${Math.max(resolvedThemeTokens.radii.card, resolvedThemeTokens.radii.panel + 6)}px`,
+      "--orion-studio-radius-md": `${resolvedThemeTokens.radii.panel}px`,
+      "--orion-studio-selection-outline": rgbaFromHex(accent, 0.55),
+      "--orion-studio-shadow": `0 12px 26px ${rgbaFromHex(headingText, 0.12)}`,
+      "--orion-studio-surface-subtle": subtleSurface
+    };
+  }, [resolvedThemeTokens]);
+  const renderWithSectionShell = (block, className, content, options) => {
+    const inheritProjectStyles = options?.inheritProjectStyles === true;
     const shell = sectionStyleFromBlock(block, pageDefaults);
     const blockSettings = isRecord6(block.settings) ? block.settings : {};
     const blockTypography = isRecord6(blockSettings.typography) ? blockSettings.typography : {};
     const blockTheme = isRecord6(blockSettings.theme) ? blockSettings.theme : {};
+    const heroBackgroundColor = normalizeText2(block.backgroundColor).trim();
+    const heroBackgroundImageURL = normalizeText2(block.backgroundImageURL).trim();
+    const heroMedia = block.blockType === "hero" ? resolveMedia(block.media) : null;
+    const heroHasImage = block.blockType === "hero" && Boolean(heroBackgroundImageURL || heroMedia?.url);
+    const heroTextColor = block.blockType === "hero" ? heroHasImage ? "#ffffff" : heroBackgroundColor ? getReadableTextColor(heroBackgroundColor, resolvedThemeTokens.colors.headingText, "#ffffff") : resolvedThemeTokens.colors.headingText : null;
     const typographyStyle = resolveTypographyStyleFromSettings({
       bodyAlign: blockTypography.bodyAlign === "center" || blockTypography.bodyAlign === "justify" || blockTypography.bodyAlign === "right" ? blockTypography.bodyAlign : "left",
       letterSpacingPreset: blockTypography.letterSpacingPreset === "tight" || blockTypography.letterSpacingPreset === "relaxed" ? blockTypography.letterSpacingPreset : "normal",
@@ -4472,25 +4591,27 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
       maxTextWidth: blockTypography.maxTextWidth === "sm" || blockTypography.maxTextWidth === "md" || blockTypography.maxTextWidth === "lg" || blockTypography.maxTextWidth === "full" ? blockTypography.maxTextWidth : "auto"
     });
     const headingAlign = blockTypography.headingAlign === "center" || blockTypography.headingAlign === "justify" || blockTypography.headingAlign === "right" ? blockTypography.headingAlign : "left";
-    const headingColor = getThemeColorOverride(blockTheme, "headingText") || getThemeColorOverride(pageDefaults.themePage, "headingText") || getThemeColorOverride(siteThemeTokens, "headingText") || (block.blockType === "hero" ? "#ffffff" : resolvedThemeTokens.colors.headingText);
-    const bodyColor = getThemeColorOverride(blockTheme, "bodyText") || getThemeColorOverride(pageDefaults.themePage, "bodyText") || getThemeColorOverride(siteThemeTokens, "bodyText") || (block.blockType === "hero" ? "#ffffff" : resolvedThemeTokens.colors.bodyText);
+    const headingColor = getThemeColorOverride(blockTheme, "headingText") || getThemeColorOverride(pageDefaults.themePage, "headingText") || getThemeColorOverride(siteThemeTokens, "headingText") || heroTextColor || resolvedThemeTokens.colors.headingText;
+    const bodyColor = getThemeColorOverride(blockTheme, "bodyText") || getThemeColorOverride(pageDefaults.themePage, "bodyText") || getThemeColorOverride(siteThemeTokens, "bodyText") || heroTextColor || resolvedThemeTokens.colors.bodyText;
     return /* @__PURE__ */ jsx13("section", { className: `${className} ${shell.sectionClass}`, style: shell.sectionStyle, children: /* @__PURE__ */ jsx13("div", { style: shell.sectionInnerStyle, children: /* @__PURE__ */ jsx13(
       "div",
       {
         className: shell.contentClass,
         style: {
           ...shell.contentStyle,
-          "--orion-builder-heading-align": headingAlign,
-          "--orion-builder-heading-color": headingColor,
-          color: bodyColor,
-          ...typographyStyle
+          ...inheritProjectStyles ? {} : {
+            "--orion-builder-heading-align": headingAlign,
+            "--orion-builder-heading-color": headingColor,
+            color: bodyColor,
+            ...typographyStyle
+          }
         },
         children: content
       }
     ) }) });
   };
   const sidebarSectionStyle = {
-    border: "1px solid rgba(13, 74, 55, 0.15)",
+    border: "1px solid var(--orion-studio-accent-border-subtle)",
     borderRadius: 12,
     padding: 12
   };
@@ -4502,7 +4623,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
     gap: 6
   };
   const sidebarInputStyle = {
-    border: "1px solid rgba(13, 74, 55, 0.2)",
+    border: "1px solid var(--orion-studio-accent-border)",
     borderRadius: 10,
     fontSize: 13,
     padding: "7px 9px",
@@ -4649,6 +4770,35 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
       return next;
     });
   };
+  const updateBlockTextField = (blockIndex, fieldName, value) => {
+    setLayout((current) => {
+      const next = cloneBlockLayout(current);
+      const currentBlock = isRecord6(next[blockIndex]) ? next[blockIndex] : {};
+      next[blockIndex] = migrateBlockToSettingsV2({
+        ...currentBlock,
+        [fieldName]: coercePreviewTextFieldValue(currentBlock[fieldName], value)
+      });
+      return next;
+    });
+  };
+  const updateArrayItemTextField = (blockIndex, arrayField, itemIndex, fieldName, value) => {
+    setLayout((current) => {
+      const next = cloneBlockLayout(current);
+      const block = next[blockIndex];
+      const existingArray = Array.isArray(block[arrayField]) ? block[arrayField] : [];
+      const nextArray = [...existingArray];
+      const targetItem = nextArray[itemIndex] && typeof nextArray[itemIndex] === "object" ? nextArray[itemIndex] : {};
+      nextArray[itemIndex] = {
+        ...targetItem,
+        [fieldName]: coercePreviewTextFieldValue(targetItem[fieldName], value)
+      };
+      next[blockIndex] = migrateBlockToSettingsV2({
+        ...block,
+        [arrayField]: nextArray
+      });
+      return next;
+    });
+  };
   const updateArrayItemSettingField = (blockIndex, arrayField, itemIndex, path, value) => {
     setLayout((current) => {
       const next = cloneBlockLayout(current);
@@ -5089,6 +5239,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
     {
       ref: editorRootRef,
       style: {
+        ...editorThemeStyles,
         display: "grid",
         gap: 12,
         gridTemplateColumns: sidebarOpen ? "minmax(0, 1fr) 340px" : "minmax(0, 1fr) 52px",
@@ -5131,9 +5282,9 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
                       href: "/admin",
                       rel: "noopener noreferrer",
                       style: {
-                        background: "#0f7d52",
+                        background: "var(--orion-studio-accent)",
                         borderRadius: 8,
-                        color: "#ffffff",
+                        color: "var(--orion-studio-accent-contrast)",
                         display: "inline-block",
                         fontSize: "0.9rem",
                         fontWeight: 600,
@@ -5178,8 +5329,42 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
               setDragIndex(null);
               setSelectedIndex(dropIndex);
             };
+            const activeBlockPreviewRenderer = renderBlockPreview ?? getRegisteredBuilderBlockPreviewRenderer();
+            const customPreviewEditingHelpers = {
+              InlineText,
+              readText: normalizePreviewText,
+              updateArrayItemText: (arrayField, itemIndex, fieldName, value) => updateArrayItemTextField(index, arrayField, itemIndex, fieldName, value),
+              updateBlockText: (fieldName, value) => updateBlockTextField(index, fieldName, value)
+            };
+            const customBlockPreview = activeBlockPreviewRenderer?.({
+              block,
+              editing: customPreviewEditingHelpers,
+              index,
+              renderWithSectionShell,
+              resolvedThemeTokens
+            });
+            if (customBlockPreview) {
+              return /* @__PURE__ */ jsx13(
+                BlockFrame,
+                {
+                  dragIndex,
+                  index,
+                  label: `Section ${index + 1}`,
+                  onDropAt,
+                  onSelect: selectBlock,
+                  selected: selectedIndex === index,
+                  setDragIndex,
+                  children: customBlockPreview
+                },
+                `custom-${index}`
+              );
+            }
             if (type === "hero") {
-              const media = resolveMedia(block.media);
+              const media = resolveMediaWithURL(
+                block.media,
+                block.backgroundImageURL,
+                normalizeText2(block.headline, "Hero image")
+              );
               const blockSettings = isRecord6(block.settings) ? block.settings : {};
               const mediaSettings = isRecord6(blockSettings.media) ? blockSettings.media : {};
               const variant = normalizeText2(block.variant, "default");
@@ -5203,13 +5388,19 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
               const resolvedBackgroundPositionX = typeof backgroundImagePositionX === "number" ? backgroundImagePositionX : 50;
               const resolvedBackgroundPositionY = typeof backgroundImagePositionY === "number" ? backgroundImagePositionY : 50;
               const backgroundImageObjectPosition = `${resolvedBackgroundPositionX}% ${resolvedBackgroundPositionY}%`;
-              const hasCustomHeroColor = backgroundColor.length > 0 && backgroundColor.toLowerCase() !== "#124a37";
+              const hasCustomHeroColor = backgroundColor.length > 0;
               const overlayModeRaw = normalizeText2(block?.backgroundOverlayMode, "none");
               const overlayMode = overlayModeRaw === "solid" || overlayModeRaw === "gradient" ? overlayModeRaw : "none";
               const overlayOpacity = parsePercentNumber(block?.backgroundOverlayOpacity, 45) / 100;
               const overlayColor = parseColor(block?.backgroundOverlayColor, "#000000");
-              const overlayFrom = parseColor(block?.backgroundOverlayGradientFrom, "#0d4a37");
-              const overlayTo = parseColor(block?.backgroundOverlayGradientTo, "#1f684f");
+              const overlayFrom = parseColor(
+                block?.backgroundOverlayGradientFrom,
+                resolvedThemeTokens.colors.accent
+              );
+              const overlayTo = parseColor(
+                block?.backgroundOverlayGradientTo,
+                mixHexColors(resolvedThemeTokens.colors.accent, resolvedThemeTokens.colors.surface, 0.18)
+              );
               const overlayAngle = parseAngle(block?.backgroundOverlayGradientAngle, "135");
               const overlayFromStrength = parsePercentNumber(block?.backgroundOverlayGradientFromStrength, 100) / 100;
               const overlayToStrength = parsePercentNumber(block?.backgroundOverlayGradientToStrength, 100) / 100;
@@ -5478,7 +5669,11 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
                           },
                           children: items.map((item, itemIndex) => {
                             const itemRecord = item;
-                            const itemMedia = resolveMedia(itemRecord?.media);
+                            const itemMedia = resolveMediaWithURL(
+                              itemRecord?.media,
+                              itemRecord?.imageURL,
+                              normalizeText2(itemRecord?.title, "Feature image")
+                            );
                             const itemImageHeight = parsePixelNumber(itemRecord?.imageHeight, 120);
                             const iconType = normalizeText2(itemRecord?.iconType, "badge");
                             const iconBadge = normalizeText2(itemRecord?.icon);
@@ -5500,7 +5695,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
                                   setSelectedIndex(index);
                                   openSelectedItem(itemIndex);
                                 },
-                                style: isItemSelected ? { outline: "2px solid rgba(15, 125, 82, 0.55)", outlineOffset: 3 } : void 0,
+                                style: isItemSelected ? { outline: "2px solid var(--orion-studio-selection-outline)", outlineOffset: 3 } : void 0,
                                 children: /* @__PURE__ */ jsxs12("div", { className: "service-body", children: [
                                   /* @__PURE__ */ jsxs12("div", { className: "orion-builder-upload-slot", children: [
                                     itemMedia?.url ? (
@@ -5604,7 +5799,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
                               setSelectedIndex(index);
                               openSelectedItem(itemIndex);
                             },
-                            style: isItemSelected ? { outline: "2px solid rgba(15, 125, 82, 0.55)", outlineOffset: 3 } : void 0,
+                            style: isItemSelected ? { outline: "2px solid var(--orion-studio-selection-outline)", outlineOffset: 3 } : void 0,
                             children: [
                               /* @__PURE__ */ jsx13(
                                 InlineText,
@@ -5684,7 +5879,11 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
                       ] }) }),
                       /* @__PURE__ */ jsx13("div", { className: "orion-logo-wall", children: items.map((item, itemIndex) => {
                         const itemRecord = item;
-                        const media = resolveMedia(itemRecord?.media);
+                        const media = resolveMediaWithURL(
+                          itemRecord?.media,
+                          itemRecord?.imageURL,
+                          normalizeText2(itemRecord?.name, "Logo")
+                        );
                         const imageHeight = parsePixelNumber(itemRecord?.imageHeight, 54);
                         const itemPositionX = parseOptionalPercentNumber2(itemRecord?.imagePositionX);
                         const itemPositionY = parseOptionalPercentNumber2(itemRecord?.imagePositionY);
@@ -5704,7 +5903,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
                               setSelectedIndex(index);
                               openSelectedItem(itemIndex);
                             },
-                            style: isItemSelected ? { outline: "2px solid rgba(15, 125, 82, 0.55)", outlineOffset: 3 } : void 0,
+                            style: isItemSelected ? { outline: "2px solid var(--orion-studio-selection-outline)", outlineOffset: 3 } : void 0,
                             children: /* @__PURE__ */ jsxs12("div", { className: "orion-builder-upload-slot", children: [
                               media?.url ? (
                                 // eslint-disable-next-line @next/next/no-img-element
@@ -5789,8 +5988,16 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
                           },
                           children: items.map((item, itemIndex) => {
                             const itemRecord = item;
-                            const beforeMedia = resolveMedia(itemRecord?.beforeMedia);
-                            const afterMedia = resolveMedia(itemRecord?.afterMedia);
+                            const beforeMedia = resolveMediaWithURL(
+                              itemRecord?.beforeMedia,
+                              itemRecord?.beforeImageURL,
+                              `${normalizeText2(itemRecord?.label, "Project")} before`
+                            );
+                            const afterMedia = resolveMediaWithURL(
+                              itemRecord?.afterMedia,
+                              itemRecord?.afterImageURL,
+                              `${normalizeText2(itemRecord?.label, "Project")} after`
+                            );
                             const imageHeight = parsePixelNumber(itemRecord?.imageHeight, 160);
                             const itemPositionX = parseOptionalPercentNumber2(itemRecord?.imagePositionX);
                             const itemPositionY = parseOptionalPercentNumber2(itemRecord?.imagePositionY);
@@ -5809,7 +6016,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
                                   setSelectedIndex(index);
                                   openSelectedItem(itemIndex);
                                 },
-                                style: isItemSelected ? { outline: "2px solid rgba(15, 125, 82, 0.55)", outlineOffset: 3 } : void 0,
+                                style: isItemSelected ? { outline: "2px solid var(--orion-studio-selection-outline)", outlineOffset: 3 } : void 0,
                                 children: [
                                   /* @__PURE__ */ jsxs12("div", { className: "orion-before-after-media", children: [
                                     /* @__PURE__ */ jsxs12("figure", { children: [
@@ -5944,7 +6151,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
                                 setSelectedIndex(index);
                                 openSelectedItem(itemIndex);
                               },
-                              style: isItemSelected ? { outline: "2px solid rgba(15, 125, 82, 0.55)", outlineOffset: 3 } : void 0,
+                              style: isItemSelected ? { outline: "2px solid var(--orion-studio-selection-outline)", outlineOffset: 3 } : void 0,
                               children: [
                                 /* @__PURE__ */ jsxs12("div", { className: "testimonial-quote-top", children: [
                                   /* @__PURE__ */ jsx13("span", { className: "testimonial-quote-mark", "aria-hidden": "true", children: "\u201C" }),
@@ -6031,7 +6238,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
                               setSelectedIndex(index);
                               openSelectedItem(itemIndex);
                             },
-                            style: isItemSelected ? { outline: "2px solid rgba(15, 125, 82, 0.55)", outlineOffset: 3 } : void 0,
+                            style: isItemSelected ? { outline: "2px solid var(--orion-studio-selection-outline)", outlineOffset: 3 } : void 0,
                             children: [
                               /* @__PURE__ */ jsxs12("div", { className: "testimonial-quote-top", children: [
                                 /* @__PURE__ */ jsx13("span", { className: "testimonial-quote-mark", "aria-hidden": "true", children: "\u201C" }),
@@ -6163,9 +6370,9 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
               {
                 style: {
                   background: "#ffffff",
-                  border: "1px solid rgba(13, 74, 55, 0.16)",
+                  border: "1px solid var(--orion-studio-accent-border-subtle)",
                   borderRadius: 14,
-                  boxShadow: "0 14px 26px rgba(13, 74, 55, 0.12)",
+                  boxShadow: "0 14px 26px var(--orion-studio-accent-soft-strong)",
                   minHeight: 180,
                   overflow: "hidden",
                   width: sidebarOpen ? 340 : 52
@@ -6177,9 +6384,9 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
                       onClick: () => setSidebarOpen((open) => !open),
                       style: {
                         alignItems: "center",
-                        background: "#124a37",
+                        background: "var(--orion-studio-accent)",
                         border: "none",
-                        color: "#fff",
+                        color: "var(--orion-studio-accent-contrast)",
                         cursor: "pointer",
                         display: "flex",
                         fontSize: 12,
@@ -6357,7 +6564,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
                             ] }),
                             /* @__PURE__ */ jsx13("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: "Click section text directly on the page for copy edits. Use this panel for layout and style options." }),
                             uploadingTarget ? /* @__PURE__ */ jsx13("div", { style: { color: "var(--ink-700)", fontSize: 11 }, children: "Uploading image..." }) : null,
-                            uploadMessage ? /* @__PURE__ */ jsx13("div", { style: { color: "#0f7d52", fontSize: 11, fontWeight: 700 }, children: uploadMessage }) : null,
+                            uploadMessage ? /* @__PURE__ */ jsx13("div", { style: { color: "var(--orion-studio-accent)", fontSize: 11, fontWeight: 700 }, children: uploadMessage }) : null,
                             uploadError ? /* @__PURE__ */ jsx13("div", { style: { color: "#8d1d1d", fontSize: 11, fontWeight: 700 }, children: uploadError }) : null
                           ] }) : /* @__PURE__ */ jsx13("p", { style: { color: "var(--ink-700)", fontSize: 12, margin: 0 }, children: "Click a section on the page preview to edit its options here." }) })
                         ] }) : null
@@ -6367,7 +6574,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
                       {
                         style: {
                           alignContent: "start",
-                          background: "linear-gradient(180deg, rgba(18, 74, 55, 0.06), rgba(18, 74, 55, 0))",
+                          background: "linear-gradient(180deg, var(--orion-studio-accent-soft), transparent)",
                           display: "grid",
                           gap: 10,
                           justifyItems: "center",
@@ -6398,6 +6605,7 @@ export {
   BuilderPageEditor,
   clonePresetBlocks,
   defaultBuilderThemeTokens,
+  registerBuilderBlockPreviewRenderer,
   resolveBuilderThemeTokens,
   sectionPresets,
   templateStarterPresets