@orion-studios/payload-studio 0.5.0-beta.95 → 0.5.0-beta.96

package/dist/{chunk-SHC2KLT3.mjs → chunk-C4J35SPJ.mjs}

@@ -322,9 +322,10 @@ var resolveBuilderThemeTokens = (layers) => {
 };
 
 // src/studio-pages/builder/settings-v2/BlockInspectorRenderer.tsx
-import { useMemo, useState } from "react";
+import { useMemo, useState as useState2 } from "react";
 
 // src/studio-pages/builder/ui/Accordion.tsx
+import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 // src/studio-pages/builder/ui/ImageControls.tsx

package/dist/{chunk-H3UCUO3C.mjs → chunk-MH25M24L.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-ADIIWIYL.mjs";
 import {
   studioDocumentToLayout
-} from "./chunk-SHC2KLT3.mjs";
+} from "./chunk-C4J35SPJ.mjs";
 import {
   __export
 } from "./chunk-6BWS3CLP.mjs";

package/dist/index.js

@@ -3012,9 +3012,10 @@ var resolveBuilderThemeTokens = (layers) => {
 };
 
 // src/studio-pages/builder/settings-v2/BlockInspectorRenderer.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 
 // src/studio-pages/builder/ui/Accordion.tsx
+var import_react = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 
 // src/studio-pages/builder/ui/ImageControls.tsx

package/dist/index.mjs

@@ -4,18 +4,18 @@ import {
 import {
   admin_app_exports
 } from "./chunk-XVH5SCBD.mjs";
-import {
-  blocks_exports
-} from "./chunk-XK3K5GRP.mjs";
 import {
   nextjs_exports
-} from "./chunk-H3UCUO3C.mjs";
+} from "./chunk-MH25M24L.mjs";
 import {
   studio_exports
 } from "./chunk-ADIIWIYL.mjs";
 import {
   studio_pages_exports
-} from "./chunk-SHC2KLT3.mjs";
+} from "./chunk-C4J35SPJ.mjs";
+import {
+  blocks_exports
+} from "./chunk-XK3K5GRP.mjs";
 import "./chunk-SIL2J5MF.mjs";
 import "./chunk-6BWS3CLP.mjs";
 export {

package/dist/nextjs/index.js

@@ -378,9 +378,10 @@ var migrateBlockToSettingsV2 = (block) => {
 };
 
 // src/studio-pages/builder/settings-v2/BlockInspectorRenderer.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 
 // src/studio-pages/builder/ui/Accordion.tsx
+var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 
 // src/studio-pages/builder/ui/ImageControls.tsx

package/dist/nextjs/index.mjs

@@ -4,9 +4,9 @@ import {
   createPayloadClient,
   createSiteQueries,
   resolveMedia
-} from "../chunk-H3UCUO3C.mjs";
+} from "../chunk-MH25M24L.mjs";
 import "../chunk-ADIIWIYL.mjs";
-import "../chunk-SHC2KLT3.mjs";
+import "../chunk-C4J35SPJ.mjs";
 import "../chunk-SIL2J5MF.mjs";
 import "../chunk-6BWS3CLP.mjs";
 export {

package/dist/studio-pages/client.js

@@ -32,7 +32,7 @@ __export(client_exports, {
 module.exports = __toCommonJS(client_exports);
 
 // src/studio-pages/builder/BuilderPageEditor.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/blocks/blocks/sectionStyleFields.ts
 var sectionStyleDefaults = {
@@ -369,19 +369,33 @@ var resolveTypographyStyleFromSettings = (settings) => {
 };
 
 // src/studio-pages/builder/settings-v2/BlockInspectorRenderer.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 
 // src/studio-pages/builder/ui/Accordion.tsx
+var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 function Accordion({ children, defaultOpen = false, onToggle, open, subtitle, title }) {
   const controlled = typeof open === "boolean";
-  const isOpen = controlled ? open : defaultOpen;
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react.useState)(defaultOpen);
+  (0, import_react.useEffect)(() => {
+    if (!controlled) {
+      setUncontrolledOpen(defaultOpen);
+    }
+  }, [controlled, defaultOpen]);
+  const isOpen = controlled ? open : uncontrolledOpen;
+  const handleToggle = () => {
+    const next = !isOpen;
+    if (!controlled) {
+      setUncontrolledOpen(next);
+    }
+    onToggle?.(next);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("article", { className: "orion-builder-settings-group", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "button",
       {
         className: "orion-builder-settings-group-header",
-        onClick: () => onToggle?.(!isOpen),
+        onClick: handleToggle,
         type: "button",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "orion-builder-settings-group-title-wrap", children: [
@@ -1038,7 +1052,7 @@ function BlockInspectorRenderer({
   onUpdateSetting,
   searchQuery
 }) {
-  const [expandedGroups, setExpandedGroups] = (0, import_react.useState)({
+  const [expandedGroups, setExpandedGroups] = (0, import_react2.useState)({
     advanced: false,
     basics: false,
     layout: false,
@@ -1048,14 +1062,14 @@ function BlockInspectorRenderer({
   });
   const definition = inspectorDefinitionByBlockType[blockType];
   const fields = definition?.fields || [];
-  const resolvedFields = (0, import_react.useMemo)(() => {
+  const resolvedFields = (0, import_react2.useMemo)(() => {
     return filterInspectorFields(fields, {
       editCopyInPanel: Boolean(getByPath(block, "settings.advanced.editCopyInPanel")),
       mode,
       query: searchQuery
     });
   }, [block, fields, mode, searchQuery]);
-  const groups = (0, import_react.useMemo)(() => {
+  const groups = (0, import_react2.useMemo)(() => {
     const baseGroups = commonInspectorGroups.map((group) => ({
       key: group.key,
       label: group.label,
@@ -1664,15 +1678,15 @@ async function optimizeImageForUpload(file) {
 }
 
 // src/studio-pages/builder/hooks/usePersistentSidebarPanel.ts
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // src/studio-pages/builder/sidebar/types.ts
 var isSidebarPanelKey = (value) => value === "pageDefaults" || value === "addSections" || value === "selected";
 
 // src/studio-pages/builder/hooks/usePersistentSidebarPanel.ts
 function usePersistentSidebarPanel(pageID) {
-  const [activeSidebarPanel, setActiveSidebarPanel] = (0, import_react2.useState)("selected");
-  (0, import_react2.useEffect)(() => {
+  const [activeSidebarPanel, setActiveSidebarPanel] = (0, import_react3.useState)("selected");
+  (0, import_react3.useEffect)(() => {
     const storageKey = `orion-builder-panels:${pageID}`;
     const raw = window.localStorage.getItem(storageKey);
     if (!raw) {
@@ -1698,7 +1712,7 @@ function usePersistentSidebarPanel(pageID) {
     } catch {
     }
   }, [pageID]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const storageKey = `orion-builder-panels:${pageID}`;
     window.localStorage.setItem(storageKey, JSON.stringify({ activePanel: activeSidebarPanel }));
   }, [activeSidebarPanel, pageID]);
@@ -1970,7 +1984,7 @@ function clonePresetBlocks(blocks) {
 }
 
 // src/studio-pages/builder/ui/InlineText.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function InlineText({
   as = "p",
@@ -1981,8 +1995,8 @@ function InlineText({
   style,
   value
 }) {
-  const [editing, setEditing] = (0, import_react3.useState)(false);
-  const editableRef = (0, import_react3.useRef)(null);
+  const [editing, setEditing] = (0, import_react4.useState)(false);
+  const editableRef = (0, import_react4.useRef)(null);
   const Tag = as;
   const normalizeValue = (raw) => {
     if (multiline) {
@@ -1990,7 +2004,7 @@ function InlineText({
     }
     return raw.replace(/\r?\n/g, " ").replace(/\s+/g, " ").trim();
   };
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!editing || !editableRef.current) {
       return;
     }
@@ -2068,7 +2082,7 @@ function UploadOverlay({ label = "Uploading image..." }) {
 }
 
 // src/studio-pages/builder/ui/BlockFrame.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function BlockFrame({
   children,
@@ -2080,14 +2094,14 @@ function BlockFrame({
   selected,
   setDragIndex
 }) {
-  const [dropPosition, setDropPosition] = (0, import_react4.useState)(null);
-  const [dropHovered, setDropHovered] = (0, import_react4.useState)(false);
+  const [dropPosition, setDropPosition] = (0, import_react5.useState)(null);
+  const [dropHovered, setDropHovered] = (0, import_react5.useState)(false);
   const isDragging = dragIndex === index;
   const isAnyDragging = dragIndex !== null;
   const isDropTarget = dragIndex !== null && dragIndex !== index && dropPosition !== null;
   const showDropBefore = isDropTarget && dropPosition === "before";
   const showDropAfter = isDropTarget && dropPosition === "after";
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (dragIndex === null) {
       setDropPosition(null);
       setDropHovered(false);
@@ -4006,7 +4020,7 @@ var cloneSnapshot = (value) => ({
   pageDefaults: clonePageDefaults(value.pageDefaults)
 });
 function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, siteThemeTokens }) {
-  const editorRootRef = (0, import_react5.useRef)(null);
+  const editorRootRef = (0, import_react6.useRef)(null);
   const doc = initialDoc ?? {};
   const sourceStudioDocument = doc.studioDocument && typeof doc.studioDocument === "object" ? doc.studioDocument : {};
   const sourceMetadata = sourceStudioDocument.metadata && typeof sourceStudioDocument.metadata === "object" ? sourceStudioDocument.metadata : {};
@@ -4018,39 +4032,39 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
     pageWidthDefault: sourceMetadata.pageWidthDefault === "wide" || sourceMetadata.pageWidthDefault === "full" ? sourceMetadata.pageWidthDefault : defaultPageDefaults.pageWidthDefault,
     themePage: isRecord6(sourceThemePage.page) ? sourceThemePage.page : {}
   };
-  const [layout, setLayout] = (0, import_react5.useState)(
+  const [layout, setLayout] = (0, import_react6.useState)(
     migrateLayoutToSettingsV2(cloneBlockLayout(initialLayout).map((block) => withSectionStyleDefaults2(block)))
   );
-  const [pageDefaults, setPageDefaults] = (0, import_react5.useState)(clonePageDefaults(initialPageDefaults));
-  const [selectedIndex, setSelectedIndex] = (0, import_react5.useState)(null);
-  const [dragIndex, setDragIndex] = (0, import_react5.useState)(null);
-  const [sidebarOpen, setSidebarOpen] = (0, import_react5.useState)(true);
-  const [savingStatus, setSavingStatus] = (0, import_react5.useState)(null);
-  const [uploadingTarget, setUploadingTarget] = (0, import_react5.useState)(null);
-  const [topViewportHeight, setTopViewportHeight] = (0, import_react5.useState)(null);
-  const [uploadError, setUploadError] = (0, import_react5.useState)("");
-  const [uploadMessage, setUploadMessage] = (0, import_react5.useState)("");
-  const [uploadAltText, setUploadAltText] = (0, import_react5.useState)("");
-  const [mediaLibrary, setMediaLibrary] = (0, import_react5.useState)([]);
-  const [mediaLibraryError, setMediaLibraryError] = (0, import_react5.useState)("");
-  const [mediaLibraryLoading, setMediaLibraryLoading] = (0, import_react5.useState)(false);
-  const [selectedItemIndex, setSelectedItemIndex] = (0, import_react5.useState)(null);
-  const [expandedItemIndex, setExpandedItemIndex] = (0, import_react5.useState)(null);
-  const [testimonialsOffsets, setTestimonialsOffsets] = (0, import_react5.useState)({});
-  const [presetQuery, setPresetQuery] = (0, import_react5.useState)("");
-  const [sessionExpired, setSessionExpired] = (0, import_react5.useState)(false);
-  const [pastSnapshots, setPastSnapshots] = (0, import_react5.useState)([]);
-  const [futureSnapshots, setFutureSnapshots] = (0, import_react5.useState)([]);
-  const [settingsPanelMode, setSettingsPanelMode] = (0, import_react5.useState)("basic");
-  const [settingsSearchQuery, setSettingsSearchQuery] = (0, import_react5.useState)("");
+  const [pageDefaults, setPageDefaults] = (0, import_react6.useState)(clonePageDefaults(initialPageDefaults));
+  const [selectedIndex, setSelectedIndex] = (0, import_react6.useState)(null);
+  const [dragIndex, setDragIndex] = (0, import_react6.useState)(null);
+  const [sidebarOpen, setSidebarOpen] = (0, import_react6.useState)(true);
+  const [savingStatus, setSavingStatus] = (0, import_react6.useState)(null);
+  const [uploadingTarget, setUploadingTarget] = (0, import_react6.useState)(null);
+  const [topViewportHeight, setTopViewportHeight] = (0, import_react6.useState)(null);
+  const [uploadError, setUploadError] = (0, import_react6.useState)("");
+  const [uploadMessage, setUploadMessage] = (0, import_react6.useState)("");
+  const [uploadAltText, setUploadAltText] = (0, import_react6.useState)("");
+  const [mediaLibrary, setMediaLibrary] = (0, import_react6.useState)([]);
+  const [mediaLibraryError, setMediaLibraryError] = (0, import_react6.useState)("");
+  const [mediaLibraryLoading, setMediaLibraryLoading] = (0, import_react6.useState)(false);
+  const [selectedItemIndex, setSelectedItemIndex] = (0, import_react6.useState)(null);
+  const [expandedItemIndex, setExpandedItemIndex] = (0, import_react6.useState)(null);
+  const [testimonialsOffsets, setTestimonialsOffsets] = (0, import_react6.useState)({});
+  const [presetQuery, setPresetQuery] = (0, import_react6.useState)("");
+  const [sessionExpired, setSessionExpired] = (0, import_react6.useState)(false);
+  const [pastSnapshots, setPastSnapshots] = (0, import_react6.useState)([]);
+  const [futureSnapshots, setFutureSnapshots] = (0, import_react6.useState)([]);
+  const [settingsPanelMode, setSettingsPanelMode] = (0, import_react6.useState)("basic");
+  const [settingsSearchQuery, setSettingsSearchQuery] = (0, import_react6.useState)("");
   const { activeSidebarPanel, setActiveSidebarPanel } = usePersistentSidebarPanel(pageID);
-  const historyBypassRef = (0, import_react5.useRef)(true);
-  const previousSnapshotRef = (0, import_react5.useRef)({
+  const historyBypassRef = (0, import_react6.useRef)(true);
+  const previousSnapshotRef = (0, import_react6.useRef)({
     layout: migrateLayoutToSettingsV2(cloneBlockLayout(initialLayout).map((block) => withSectionStyleDefaults2(block))),
     pageDefaults: clonePageDefaults(initialPageDefaults)
   });
-  const lastSavedRef = (0, import_react5.useRef)(cloneSnapshot(previousSnapshotRef.current));
-  const selectedBlock = (0, import_react5.useMemo)(
+  const lastSavedRef = (0, import_react6.useRef)(cloneSnapshot(previousSnapshotRef.current));
+  const selectedBlock = (0, import_react6.useMemo)(
     () => selectedIndex !== null ? layout[selectedIndex] : null,
     [layout, selectedIndex]
   );
@@ -4083,7 +4097,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
     return false;
   };
   const isSelectedBlockMediaUploading = selectedIndex !== null && (selectedType === "hero" && uploadingTarget?.kind === "hero" || selectedType === "media" && uploadingTarget?.kind === "media");
-  const filteredSectionPresets = (0, import_react5.useMemo)(() => {
+  const filteredSectionPresets = (0, import_react6.useMemo)(() => {
     const query = presetQuery.trim().toLowerCase();
     if (!query) {
       return sectionPresets;
@@ -4092,7 +4106,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
       (preset) => `${preset.title} ${preset.description}`.toLowerCase().includes(query)
     );
   }, [presetQuery]);
-  const loadMediaLibrary = (0, import_react5.useCallback)(async () => {
+  const loadMediaLibrary = (0, import_react6.useCallback)(async () => {
     setMediaLibraryLoading(true);
     setMediaLibraryError("");
     try {
@@ -4113,10 +4127,10 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
       setMediaLibraryLoading(false);
     }
   }, []);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     void loadMediaLibrary();
   }, [loadMediaLibrary]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const refreshMediaLibrary = () => {
       void loadMediaLibrary();
     };
@@ -4141,7 +4155,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
       document.removeEventListener("visibilitychange", onVisibilityChange);
     };
   }, [loadMediaLibrary]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     let active = true;
     const checkSession = async () => {
       try {
@@ -4558,7 +4572,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
     }
     return nextBlock;
   });
-  const resolvedThemeTokens = (0, import_react5.useMemo)(
+  const resolvedThemeTokens = (0, import_react6.useMemo)(
     () => resolveBuilderThemeTokens({
       page: pageDefaults.themePage,
       site: siteThemeTokens
@@ -4773,14 +4787,14 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
       return next;
     });
   };
-  const currentSnapshot = (0, import_react5.useMemo)(
+  const currentSnapshot = (0, import_react6.useMemo)(
     () => ({
       layout: cloneBlockLayout(layout),
       pageDefaults: clonePageDefaults(pageDefaults)
     }),
     [layout, pageDefaults]
   );
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const readTopViewportHeight = () => {
       if (typeof window === "undefined") {
         setTopViewportHeight(null);
@@ -4805,7 +4819,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
     layout: toPersistedLayout(snapshot.layout),
     pageDefaults: snapshot.pageDefaults
   });
-  const isDirty = (0, import_react5.useMemo)(
+  const isDirty = (0, import_react6.useMemo)(
     () => snapshotKey(currentSnapshot) !== snapshotKey(lastSavedRef.current),
     [currentSnapshot]
   );
@@ -4939,14 +4953,14 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
       setSavingStatus(null);
     }
   };
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (selectedIndex === null) {
       return;
     }
     setSidebarOpen(true);
     setActiveSidebarPanel("selected");
   }, [selectedIndex]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (selectedIndex === null) {
       setSelectedItemIndex(null);
       setExpandedItemIndex(null);
@@ -4964,7 +4978,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
       (current) => typeof current === "number" && current >= 0 && current < selectedItems.length ? current : 0
     );
   }, [selectedIndex, selectedItems.length]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (layout.length > 0) {
       return;
     }
@@ -5061,10 +5075,10 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
     positionX: parsePercentNumber(selectedItemRecord.imagePositionX, 50),
     positionY: parsePercentNumber(selectedItemRecord.imagePositionY, 50)
   } : void 0;
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     return;
   }, [layout]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (historyBypassRef.current) {
       historyBypassRef.current = false;
       previousSnapshotRef.current = cloneSnapshot(currentSnapshot);
@@ -5075,7 +5089,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
     setFutureSnapshots([]);
     previousSnapshotRef.current = cloneSnapshot(currentSnapshot);
   }, [currentSnapshot]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const onKeyDown = (event) => {
       const key = event.key.toLowerCase();
       const isUndo = (event.metaKey || event.ctrlKey) && key === "z" && !event.shiftKey;
@@ -5093,7 +5107,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [canRedo, canUndo, futureSnapshots, pastSnapshots, currentSnapshot]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     window.parent?.postMessage(
       {
         dirty: isDirty,
@@ -5103,7 +5117,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
       "*"
     );
   }, [isDirty]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     window.parent?.postMessage(
       {
         canRedo,
@@ -5114,7 +5128,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
       "*"
     );
   }, [canRedo, canUndo]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const onMessage = (event) => {
       const data = event.data;
       if (!data || data.source !== "payload-visual-builder-parent") {
@@ -5167,7 +5181,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
     window.addEventListener("message", onMessage);
     return () => window.removeEventListener("message", onMessage);
   }, [canRedo, canUndo, isDirty, layout, pageDefaults.pageWidthDefault, title]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const preventNavigationWhileEditing = (event) => {
       const editorRoot = editorRootRef.current;
       if (!editorRoot) {

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 useEffect4, useMemo as useMemo2, useRef as useRef2, useState as useState5 } from "react";
+import { useCallback, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef2, useState as useState6 } from "react";
 
 // src/blocks/blocks/sectionStyleFields.ts
 var sectionStyleDefaults = {
@@ -343,19 +343,33 @@ var resolveTypographyStyleFromSettings = (settings) => {
 };
 
 // src/studio-pages/builder/settings-v2/BlockInspectorRenderer.tsx
-import { useMemo, useState } from "react";
+import { useMemo, useState as useState2 } from "react";
 
 // src/studio-pages/builder/ui/Accordion.tsx
+import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Accordion({ children, defaultOpen = false, onToggle, open, subtitle, title }) {
   const controlled = typeof open === "boolean";
-  const isOpen = controlled ? open : defaultOpen;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  useEffect(() => {
+    if (!controlled) {
+      setUncontrolledOpen(defaultOpen);
+    }
+  }, [controlled, defaultOpen]);
+  const isOpen = controlled ? open : uncontrolledOpen;
+  const handleToggle = () => {
+    const next = !isOpen;
+    if (!controlled) {
+      setUncontrolledOpen(next);
+    }
+    onToggle?.(next);
+  };
   return /* @__PURE__ */ jsxs("article", { className: "orion-builder-settings-group", children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
         className: "orion-builder-settings-group-header",
-        onClick: () => onToggle?.(!isOpen),
+        onClick: handleToggle,
         type: "button",
         children: [
           /* @__PURE__ */ jsxs("span", { className: "orion-builder-settings-group-title-wrap", children: [
@@ -1012,7 +1026,7 @@ function BlockInspectorRenderer({
   onUpdateSetting,
   searchQuery
 }) {
-  const [expandedGroups, setExpandedGroups] = useState({
+  const [expandedGroups, setExpandedGroups] = useState2({
     advanced: false,
     basics: false,
     layout: false,
@@ -1545,15 +1559,15 @@ var layoutToStudioDocument = (layout, title, metadata) => {
 };
 
 // src/studio-pages/builder/hooks/usePersistentSidebarPanel.ts
-import { useEffect, useState as useState2 } from "react";
+import { useEffect as useEffect2, useState as useState3 } from "react";
 
 // src/studio-pages/builder/sidebar/types.ts
 var isSidebarPanelKey = (value) => value === "pageDefaults" || value === "addSections" || value === "selected";
 
 // src/studio-pages/builder/hooks/usePersistentSidebarPanel.ts
 function usePersistentSidebarPanel(pageID) {
-  const [activeSidebarPanel, setActiveSidebarPanel] = useState2("selected");
-  useEffect(() => {
+  const [activeSidebarPanel, setActiveSidebarPanel] = useState3("selected");
+  useEffect2(() => {
     const storageKey = `orion-builder-panels:${pageID}`;
     const raw = window.localStorage.getItem(storageKey);
     if (!raw) {
@@ -1579,7 +1593,7 @@ function usePersistentSidebarPanel(pageID) {
     } catch {
     }
   }, [pageID]);
-  useEffect(() => {
+  useEffect2(() => {
     const storageKey = `orion-builder-panels:${pageID}`;
     window.localStorage.setItem(storageKey, JSON.stringify({ activePanel: activeSidebarPanel }));
   }, [activeSidebarPanel, pageID]);
@@ -1851,7 +1865,7 @@ function clonePresetBlocks(blocks) {
 }
 
 // src/studio-pages/builder/ui/InlineText.tsx
-import { useEffect as useEffect2, useRef, useState as useState3 } from "react";
+import { useEffect as useEffect3, useRef, useState as useState4 } from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
 function InlineText({
   as = "p",
@@ -1862,7 +1876,7 @@ function InlineText({
   style,
   value
 }) {
-  const [editing, setEditing] = useState3(false);
+  const [editing, setEditing] = useState4(false);
   const editableRef = useRef(null);
   const Tag = as;
   const normalizeValue = (raw) => {
@@ -1871,7 +1885,7 @@ function InlineText({
     }
     return raw.replace(/\r?\n/g, " ").replace(/\s+/g, " ").trim();
   };
-  useEffect2(() => {
+  useEffect3(() => {
     if (!editing || !editableRef.current) {
       return;
     }
@@ -1949,7 +1963,7 @@ function UploadOverlay({ label = "Uploading image..." }) {
 }
 
 // src/studio-pages/builder/ui/BlockFrame.tsx
-import { useEffect as useEffect3, useState as useState4 } from "react";
+import { useEffect as useEffect4, useState as useState5 } from "react";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function BlockFrame({
   children,
@@ -1961,14 +1975,14 @@ function BlockFrame({
   selected,
   setDragIndex
 }) {
-  const [dropPosition, setDropPosition] = useState4(null);
-  const [dropHovered, setDropHovered] = useState4(false);
+  const [dropPosition, setDropPosition] = useState5(null);
+  const [dropHovered, setDropHovered] = useState5(false);
   const isDragging = dragIndex === index;
   const isAnyDragging = dragIndex !== null;
   const isDropTarget = dragIndex !== null && dragIndex !== index && dropPosition !== null;
   const showDropBefore = isDropTarget && dropPosition === "before";
   const showDropAfter = isDropTarget && dropPosition === "after";
-  useEffect3(() => {
+  useEffect4(() => {
     if (dragIndex === null) {
       setDropPosition(null);
       setDropHovered(false);
@@ -3899,31 +3913,31 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
     pageWidthDefault: sourceMetadata.pageWidthDefault === "wide" || sourceMetadata.pageWidthDefault === "full" ? sourceMetadata.pageWidthDefault : defaultPageDefaults.pageWidthDefault,
     themePage: isRecord6(sourceThemePage.page) ? sourceThemePage.page : {}
   };
-  const [layout, setLayout] = useState5(
+  const [layout, setLayout] = useState6(
     migrateLayoutToSettingsV2(cloneBlockLayout(initialLayout).map((block) => withSectionStyleDefaults2(block)))
   );
-  const [pageDefaults, setPageDefaults] = useState5(clonePageDefaults(initialPageDefaults));
-  const [selectedIndex, setSelectedIndex] = useState5(null);
-  const [dragIndex, setDragIndex] = useState5(null);
-  const [sidebarOpen, setSidebarOpen] = useState5(true);
-  const [savingStatus, setSavingStatus] = useState5(null);
-  const [uploadingTarget, setUploadingTarget] = useState5(null);
-  const [topViewportHeight, setTopViewportHeight] = useState5(null);
-  const [uploadError, setUploadError] = useState5("");
-  const [uploadMessage, setUploadMessage] = useState5("");
-  const [uploadAltText, setUploadAltText] = useState5("");
-  const [mediaLibrary, setMediaLibrary] = useState5([]);
-  const [mediaLibraryError, setMediaLibraryError] = useState5("");
-  const [mediaLibraryLoading, setMediaLibraryLoading] = useState5(false);
-  const [selectedItemIndex, setSelectedItemIndex] = useState5(null);
-  const [expandedItemIndex, setExpandedItemIndex] = useState5(null);
-  const [testimonialsOffsets, setTestimonialsOffsets] = useState5({});
-  const [presetQuery, setPresetQuery] = useState5("");
-  const [sessionExpired, setSessionExpired] = useState5(false);
-  const [pastSnapshots, setPastSnapshots] = useState5([]);
-  const [futureSnapshots, setFutureSnapshots] = useState5([]);
-  const [settingsPanelMode, setSettingsPanelMode] = useState5("basic");
-  const [settingsSearchQuery, setSettingsSearchQuery] = useState5("");
+  const [pageDefaults, setPageDefaults] = useState6(clonePageDefaults(initialPageDefaults));
+  const [selectedIndex, setSelectedIndex] = useState6(null);
+  const [dragIndex, setDragIndex] = useState6(null);
+  const [sidebarOpen, setSidebarOpen] = useState6(true);
+  const [savingStatus, setSavingStatus] = useState6(null);
+  const [uploadingTarget, setUploadingTarget] = useState6(null);
+  const [topViewportHeight, setTopViewportHeight] = useState6(null);
+  const [uploadError, setUploadError] = useState6("");
+  const [uploadMessage, setUploadMessage] = useState6("");
+  const [uploadAltText, setUploadAltText] = useState6("");
+  const [mediaLibrary, setMediaLibrary] = useState6([]);
+  const [mediaLibraryError, setMediaLibraryError] = useState6("");
+  const [mediaLibraryLoading, setMediaLibraryLoading] = useState6(false);
+  const [selectedItemIndex, setSelectedItemIndex] = useState6(null);
+  const [expandedItemIndex, setExpandedItemIndex] = useState6(null);
+  const [testimonialsOffsets, setTestimonialsOffsets] = useState6({});
+  const [presetQuery, setPresetQuery] = useState6("");
+  const [sessionExpired, setSessionExpired] = useState6(false);
+  const [pastSnapshots, setPastSnapshots] = useState6([]);
+  const [futureSnapshots, setFutureSnapshots] = useState6([]);
+  const [settingsPanelMode, setSettingsPanelMode] = useState6("basic");
+  const [settingsSearchQuery, setSettingsSearchQuery] = useState6("");
   const { activeSidebarPanel, setActiveSidebarPanel } = usePersistentSidebarPanel(pageID);
   const historyBypassRef = useRef2(true);
   const previousSnapshotRef = useRef2({
@@ -3994,10 +4008,10 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
       setMediaLibraryLoading(false);
     }
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     void loadMediaLibrary();
   }, [loadMediaLibrary]);
-  useEffect4(() => {
+  useEffect5(() => {
     const refreshMediaLibrary = () => {
       void loadMediaLibrary();
     };
@@ -4022,7 +4036,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
       document.removeEventListener("visibilitychange", onVisibilityChange);
     };
   }, [loadMediaLibrary]);
-  useEffect4(() => {
+  useEffect5(() => {
     let active = true;
     const checkSession = async () => {
       try {
@@ -4661,7 +4675,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
     }),
     [layout, pageDefaults]
   );
-  useEffect4(() => {
+  useEffect5(() => {
     const readTopViewportHeight = () => {
       if (typeof window === "undefined") {
         setTopViewportHeight(null);
@@ -4820,14 +4834,14 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
       setSavingStatus(null);
     }
   };
-  useEffect4(() => {
+  useEffect5(() => {
     if (selectedIndex === null) {
       return;
     }
     setSidebarOpen(true);
     setActiveSidebarPanel("selected");
   }, [selectedIndex]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (selectedIndex === null) {
       setSelectedItemIndex(null);
       setExpandedItemIndex(null);
@@ -4845,7 +4859,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
       (current) => typeof current === "number" && current >= 0 && current < selectedItems.length ? current : 0
     );
   }, [selectedIndex, selectedItems.length]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (layout.length > 0) {
       return;
     }
@@ -4942,10 +4956,10 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
     positionX: parsePercentNumber(selectedItemRecord.imagePositionX, 50),
     positionY: parsePercentNumber(selectedItemRecord.imagePositionY, 50)
   } : void 0;
-  useEffect4(() => {
+  useEffect5(() => {
     return;
   }, [layout]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (historyBypassRef.current) {
       historyBypassRef.current = false;
       previousSnapshotRef.current = cloneSnapshot(currentSnapshot);
@@ -4956,7 +4970,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
     setFutureSnapshots([]);
     previousSnapshotRef.current = cloneSnapshot(currentSnapshot);
   }, [currentSnapshot]);
-  useEffect4(() => {
+  useEffect5(() => {
     const onKeyDown = (event) => {
       const key = event.key.toLowerCase();
       const isUndo = (event.metaKey || event.ctrlKey) && key === "z" && !event.shiftKey;
@@ -4974,7 +4988,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [canRedo, canUndo, futureSnapshots, pastSnapshots, currentSnapshot]);
-  useEffect4(() => {
+  useEffect5(() => {
     window.parent?.postMessage(
       {
         dirty: isDirty,
@@ -4984,7 +4998,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
       "*"
     );
   }, [isDirty]);
-  useEffect4(() => {
+  useEffect5(() => {
     window.parent?.postMessage(
       {
         canRedo,
@@ -4995,7 +5009,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
       "*"
     );
   }, [canRedo, canUndo]);
-  useEffect4(() => {
+  useEffect5(() => {
     const onMessage = (event) => {
       const data = event.data;
       if (!data || data.source !== "payload-visual-builder-parent") {
@@ -5048,7 +5062,7 @@ function BuilderPageEditor({ featureFlags: _featureFlags, initialDoc, pageID, si
     window.addEventListener("message", onMessage);
     return () => window.removeEventListener("message", onMessage);
   }, [canRedo, canUndo, isDirty, layout, pageDefaults.pageWidthDefault, title]);
-  useEffect4(() => {
+  useEffect5(() => {
     const preventNavigationWhileEditing = (event) => {
       const editorRoot = editorRootRef.current;
       if (!editorRoot) {

package/dist/studio-pages/index.js

@@ -355,9 +355,10 @@ var resolveBuilderThemeTokens = (layers) => {
 };
 
 // src/studio-pages/builder/settings-v2/BlockInspectorRenderer.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 
 // src/studio-pages/builder/ui/Accordion.tsx
+var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 
 // src/studio-pages/builder/ui/ImageControls.tsx

package/dist/studio-pages/index.mjs

@@ -8,7 +8,7 @@ import {
   pageStudioModuleManifest,
   resolveBuilderThemeTokens,
   studioDocumentToLayout
-} from "../chunk-SHC2KLT3.mjs";
+} from "../chunk-C4J35SPJ.mjs";
 import "../chunk-SIL2J5MF.mjs";
 import "../chunk-6BWS3CLP.mjs";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-studios/payload-studio",
-  "version": "0.5.0-beta.95",
+  "version": "0.5.0-beta.96",
   "description": "Unified Payload CMS toolkit for Orion Studios",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",