@nascentdigital/funnel-editor 4.6.1 → 5.0.1

package/dist/page/components/config/preview/VisualPanel.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VisualPanel = VisualPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const core_1 = require("../../../../core");
+const Panel_1 = require("./Panel");
+// components
+function VisualPanel({ className, parentType, itemOffset, panel, mobile, nested }) {
+    // render
+    const { aspectRatio: { mobile: aspectRatioMobile, desktop: aspectRatioDesktop } } = panel;
+    const aspectRatio = mobile ? aspectRatioMobile : aspectRatioDesktop;
+    return ((0, jsx_runtime_1.jsx)(Panel_1.Panel, { className: className, parentType: parentType, itemOffset: itemOffset, panel: panel, mobile: mobile, nested: nested, disableSizing: mobile, children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('flex justify-center items-center bg-draft/tint3 rounded-xxs overflow-hidden', {
+                'aspect-square': aspectRatio === 'square' || aspectRatio === 'auto',
+                'aspect-phone': aspectRatio === 'phone',
+                'aspects-tv': aspectRatio === 'tv',
+                'aspect-widescreen': aspectRatio === 'widescreen',
+                'aspect-cinema': aspectRatio === 'cinema'
+            }), children: (0, jsx_runtime_1.jsx)(core_1.Icon, { className: "text-content-tertiary", variant: "Image", size: {
+                    size: 20,
+                    strokeWidth: 1.5,
+                    absoluteStrokeWidth: false
+                } }) }) }));
+}

package/dist/page/components/config/preview/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ColumnLayout';
+export * from './RowLayout';
+export * from './StackLayout';

package/dist/page/components/config/preview/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ColumnLayout"), exports);
+__exportStar(require("./RowLayout"), exports);
+__exportStar(require("./StackLayout"), exports);

package/dist/page/components/panels/BlockConfigPanel.js

@@ -2,12 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BlockConfigPanel = BlockConfigPanel;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("motion/react");
+const react_1 = require("react");
 const core_1 = require("../../../core");
 const config_1 = require("../config");
 // panel
 function BlockConfigPanel() {
-    // bind state + hooks
+    // bind hooks
+    const id = (0, react_1.useId)();
     const configuration = (0, core_1.useBlockConfiguration)();
     // skip if there's no config (shouldn't happen)
     if (!configuration || !configuration.hasPanels) {
@@ -15,8 +16,7 @@ function BlockConfigPanel() {
     }
     // render
     const { scope } = configuration;
-    return ((0, jsx_runtime_1.jsx)(core_1.FadeIn, { layout: true, children: (0, jsx_runtime_1.jsxs)("div", { className: "h-full flex flex-col gap-l6 p-l7 bg-surface1 rounded-xxl", children: [(0, jsx_runtime_1.jsx)(core_1.Tabs, { variant: "highlighted", size: "sm", items: blockScopes, selectedItem: scope, onSelect: scope => configuration.scope = scope }), (0, jsx_runtime_1.jsx)(react_1.motion.section, { className: "p-l6 bg-surface-placeholder-raised rounded-md", layout: true, children: configuration &&
-                        (0, jsx_runtime_1.jsx)(config_1.LegacyBlockPreview, { configuration: configuration }) }), (0, jsx_runtime_1.jsx)(config_1.BlockConfigButton, { target: "block" })] }) }, "block.config"));
+    return ((0, jsx_runtime_1.jsx)(core_1.FadeIn, { children: (0, jsx_runtime_1.jsxs)(core_1.Popup.AnchorElement, { tag: "div", anchorId: id, className: "h-full flex flex-col gap-l6 py-l7 bg-surface1 rounded-xxl interpolate-all", children: [(0, jsx_runtime_1.jsx)(core_1.Tabs, { className: "mx-l7", variant: "highlighted", size: "sm", items: blockScopes, selectedItem: scope, onSelect: scope => configuration.scope = scope }), (0, jsx_runtime_1.jsx)(config_1.BlockPreview, { className: "self-center", configuration: configuration }), (0, jsx_runtime_1.jsx)("div", { className: "px-l7", children: (0, jsx_runtime_1.jsx)(config_1.BlockConfigButton, { anchorId: id, target: "block" }) })] }) }, "block.config"));
 }
 // helpers
 const blockScopes = [

package/dist/page/hooks/IPageController.d.ts

@@ -0,0 +1,42 @@
+import { EventBus, Language, Schema } from '@nascentdigital/funnel-core';
+import { Observable } from 'rxjs';
+import { IPage, PageSummary } from '../../core';
+export interface IPageController {
+    readonly state: IPageController.State;
+    readonly events$: Observable<IPageController.Event | IPage.Event>;
+    readonly saved$: Observable<[IPageController.StateChangedEvent, IPageController.StateChangedEvent]>;
+    readonly page: IPage | undefined;
+    readonly pageSummary: PageSummary | undefined;
+    readonly languages: ReadonlyArray<Language>;
+    unpublish(): Promise<void>;
+    create(target: IPageController.Target): Promise<void>;
+    reload(): Promise<void>;
+}
+export declare namespace IPageController {
+    type State = 'uninitialized' | 'initializing' | 'loading' | 'ready' | 'saving' | 'unpublishing' | 'error';
+    type Target = {
+        brand: string;
+        templates: Schema.Site.Pages;
+        template: Schema.Page;
+        region: string;
+        slug?: string;
+        language: Language;
+    };
+    interface Event extends EventBus.Event<'PageController', Event.Type> {
+        controller: IPageController;
+    }
+    namespace Event {
+        type Type = 'pageSummary.changed' | 'page.changed';
+        function filter(event: EventBus.Event): event is Event;
+        function create(event: EventBus.Args<Event>): Event;
+    }
+    interface StateChangedEvent extends EventBus.Event<'PageController', StateChangedEvent.Type> {
+        controller: IPageController;
+        state: State;
+    }
+    namespace StateChangedEvent {
+        type Type = 'state.changed';
+        function filter(event: EventBus.Event): event is StateChangedEvent;
+        function create(event: Omit<EventBus.Args<StateChangedEvent>, 'type'>): StateChangedEvent;
+    }
+}

package/dist/page/hooks/IPageController.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IPageController = void 0;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+// extension
+var IPageController;
+(function (IPageController) {
+    let Event;
+    (function (Event) {
+        // methods
+        function filter(event) {
+            return event.domain === 'PageController';
+        }
+        Event.filter = filter;
+        function create(event) {
+            return funnel_core_1.EventBus.createEvent(Object.assign({ domain: 'PageController' }, event));
+        }
+        Event.create = create;
+    })(Event = IPageController.Event || (IPageController.Event = {}));
+    let StateChangedEvent;
+    (function (StateChangedEvent) {
+        // methods
+        function filter(event) {
+            return event.domain === 'PageController' && event.type === 'state.changed';
+        }
+        StateChangedEvent.filter = filter;
+        function create(event) {
+            return funnel_core_1.EventBus.createEvent(Object.assign({ domain: 'PageController', type: 'state.changed' }, event));
+        }
+        StateChangedEvent.create = create;
+    })(StateChangedEvent = IPageController.StateChangedEvent || (IPageController.StateChangedEvent = {}));
+})(IPageController || (exports.IPageController = IPageController = {}));

package/dist/page/hooks/PageController.d.ts

@@ -1,6 +1,7 @@
-import { EventBus, Language, Schema } from '@nascentdigital/funnel-core';
-import { AppState, EditorApiClient, Page, PageRepository, PageSummary } from '../../core';
-export declare class PageController {
+import { Schema } from '@nascentdigital/funnel-core';
+import { AppState, EditorApiClient, IPage, Page, PageRepository, PageSummary } from '../../core';
+import { IPageController } from './IPageController';
+export declare class PageController implements IPageController {
     private readonly _eventBus;
     readonly appState: AppState;
     readonly repository: PageRepository;
@@ -11,58 +12,32 @@ export declare class PageController {
     private _pageSubscription?;
     private _saveQueuedFor?;
     constructor({ appState, editorApi }: PageController.ConstructorArgs);
-    get events$(): import("rxjs").Observable<Page.Event | PageController.Event>;
-    get saved$(): import("rxjs").Observable<[PageController.StateChangedEvent, PageController.StateChangedEvent]>;
-    get state(): PageController.State;
+    get events$(): import("rxjs").Observable<IPage.Event | IPageController.Event>;
+    get saved$(): import("rxjs").Observable<[IPageController.StateChangedEvent, IPageController.StateChangedEvent]>;
+    get state(): IPageController.State;
     private set state(value);
     get ready(): boolean;
-    get target(): PageController.Target;
+    get target(): IPageController.Target;
     get region(): string;
     get language(): "cy" | "fr" | "fy" | "to" | "br" | "hr" | "li" | "th" | "tr" | "id" | "is" | "tw" | "no" | "aa" | "ab" | "ae" | "af" | "ak" | "am" | "an" | "ar" | "as" | "av" | "ay" | "az" | "ba" | "be" | "bg" | "bh" | "bi" | "bm" | "bn" | "bo" | "bs" | "ca" | "ce" | "ch" | "co" | "cr" | "cs" | "cu" | "cv" | "da" | "de" | "dv" | "dz" | "ee" | "el" | "en" | "eo" | "es" | "et" | "eu" | "fa" | "ff" | "fi" | "fj" | "fo" | "ga" | "gd" | "gl" | "gn" | "gu" | "gv" | "ha" | "he" | "hi" | "ho" | "ht" | "hu" | "hy" | "hz" | "ia" | "ie" | "ig" | "ii" | "ik" | "io" | "it" | "iu" | "ja" | "jv" | "ka" | "kg" | "ki" | "kj" | "kk" | "kl" | "km" | "kn" | "ko" | "kr" | "ks" | "ku" | "kv" | "kw" | "ky" | "la" | "lb" | "lg" | "ln" | "lo" | "lt" | "lu" | "lv" | "mg" | "mh" | "mi" | "mk" | "ml" | "mn" | "mr" | "ms" | "mt" | "my" | "na" | "nb" | "nd" | "ne" | "ng" | "nl" | "nn" | "nr" | "nv" | "ny" | "oc" | "oj" | "om" | "or" | "os" | "pa" | "pi" | "pl" | "ps" | "pt" | "qu" | "rm" | "rn" | "ro" | "ru" | "rw" | "sa" | "sc" | "sd" | "se" | "sg" | "si" | "sk" | "sl" | "sm" | "sn" | "so" | "sq" | "sr" | "ss" | "st" | "su" | "sv" | "sw" | "ta" | "te" | "tg" | "ti" | "tk" | "tl" | "tn" | "ts" | "tt" | "ty" | "ug" | "uk" | "ur" | "uz" | "ve" | "vi" | "vo" | "wa" | "wo" | "xh" | "yi" | "yo" | "za" | "zh" | "zu";
     get languages(): ("cy" | "fr" | "fy" | "to" | "br" | "hr" | "li" | "th" | "tr" | "id" | "is" | "tw" | "no" | "aa" | "ab" | "ae" | "af" | "ak" | "am" | "an" | "ar" | "as" | "av" | "ay" | "az" | "ba" | "be" | "bg" | "bh" | "bi" | "bm" | "bn" | "bo" | "bs" | "ca" | "ce" | "ch" | "co" | "cr" | "cs" | "cu" | "cv" | "da" | "de" | "dv" | "dz" | "ee" | "el" | "en" | "eo" | "es" | "et" | "eu" | "fa" | "ff" | "fi" | "fj" | "fo" | "ga" | "gd" | "gl" | "gn" | "gu" | "gv" | "ha" | "he" | "hi" | "ho" | "ht" | "hu" | "hy" | "hz" | "ia" | "ie" | "ig" | "ii" | "ik" | "io" | "it" | "iu" | "ja" | "jv" | "ka" | "kg" | "ki" | "kj" | "kk" | "kl" | "km" | "kn" | "ko" | "kr" | "ks" | "ku" | "kv" | "kw" | "ky" | "la" | "lb" | "lg" | "ln" | "lo" | "lt" | "lu" | "lv" | "mg" | "mh" | "mi" | "mk" | "ml" | "mn" | "mr" | "ms" | "mt" | "my" | "na" | "nb" | "nd" | "ne" | "ng" | "nl" | "nn" | "nr" | "nv" | "ny" | "oc" | "oj" | "om" | "or" | "os" | "pa" | "pi" | "pl" | "ps" | "pt" | "qu" | "rm" | "rn" | "ro" | "ru" | "rw" | "sa" | "sc" | "sd" | "se" | "sg" | "si" | "sk" | "sl" | "sm" | "sn" | "so" | "sq" | "sr" | "ss" | "st" | "su" | "sv" | "sw" | "ta" | "te" | "tg" | "ti" | "tk" | "tl" | "tn" | "ts" | "tt" | "ty" | "ug" | "uk" | "ur" | "uz" | "ve" | "vi" | "vo" | "wa" | "wo" | "xh" | "yi" | "yo" | "za" | "zh" | "zu")[];
     get templates(): Schema.Site.Pages;
     get currentTemplate(): Schema.Page<Schema.Page.Content, string>;
-    get pageTarget(): PageController.Target | undefined;
+    get pageTarget(): IPageController.Target | undefined;
     get pageSummary(): PageSummary | undefined;
     private set pageSummary(value);
     get page(): Page | undefined;
     private set page(value);
-    load(target: PageController.Target): Promise<void>;
+    load(target: IPageController.Target): Promise<void>;
     reload(): Promise<void>;
-    create(target: PageController.Target): Promise<void>;
+    create(target: IPageController.Target): Promise<void>;
     save(): Promise<void>;
     unpublish(): Promise<void>;
     private raiseEvent;
 }
 export declare namespace PageController {
-    type State = 'uninitialized' | 'initializing' | 'loading' | 'ready' | 'saving' | 'unpublishing' | 'error';
-    type Target = {
-        brand: string;
-        templates: Schema.Site.Pages;
-        template: Schema.Page;
-        region: string;
-        slug?: string;
-        language: Language;
-    };
     type ConstructorArgs = {
         appState: AppState;
         editorApi: EditorApiClient;
     };
-    interface Event extends EventBus.Event<'PageController', Event.Type> {
-        controller: PageController;
-    }
-    namespace Event {
-        type Type = 'pageSummary.changed' | 'page.changed';
-        function filter(event: EventBus.Event): event is Event;
-        function create(event: EventBus.Args<Event>): Event;
-    }
-    interface StateChangedEvent extends EventBus.Event<'PageController', StateChangedEvent.Type> {
-        controller: PageController;
-        state: State;
-    }
-    namespace StateChangedEvent {
-        type Type = 'state.changed';
-        function filter(event: EventBus.Event): event is StateChangedEvent;
-        function create(event: Omit<EventBus.Args<StateChangedEvent>, 'type'>): StateChangedEvent;
-    }
 }

package/dist/page/hooks/PageController.js

@@ -4,6 +4,7 @@ exports.PageController = void 0;
 const funnel_core_1 = require("@nascentdigital/funnel-core");
 const rxjs_1 = require("rxjs");
 const core_1 = require("../../core");
+const IPageController_1 = require("./IPageController");
 // class
 class PageController {
     constructor({ appState, editorApi }) {
@@ -15,10 +16,10 @@ class PageController {
     }
     get events$() {
         return this._eventBus.events$
-            .pipe((0, rxjs_1.filter)(e => PageController.Event.filter(e) || core_1.Page.Event.filter(e)));
+            .pipe((0, rxjs_1.filter)(e => IPageController_1.IPageController.Event.filter(e) || core_1.IPage.Event.filter(e)));
     }
     get saved$() {
-        return this._eventBus.events$.pipe((0, rxjs_1.filter)(PageController.StateChangedEvent.filter), (0, rxjs_1.pairwise)(), (0, rxjs_1.filter)(([previous, current]) => previous.state === 'saving' && current.state === 'ready'));
+        return this._eventBus.events$.pipe((0, rxjs_1.filter)(IPageController_1.IPageController.StateChangedEvent.filter), (0, rxjs_1.pairwise)(), (0, rxjs_1.filter)(([previous, current]) => previous.state === 'saving' && current.state === 'ready'));
     }
     get state() {
         return this._state;
@@ -31,7 +32,7 @@ class PageController {
         // or update
         this._state = value;
         // raise event
-        this._eventBus.publish(PageController.StateChangedEvent.create({
+        this._eventBus.publish(IPageController_1.IPageController.StateChangedEvent.create({
             state: value,
             controller: this
         }));
@@ -113,7 +114,7 @@ class PageController {
             this._pageSubscription = page.events$
                 .pipe((0, rxjs_1.filter)(e => {
                 // handle page events
-                if (core_1.Page.Event.filter(e)) {
+                if (core_1.IPage.Event.filter(e)) {
                     return e.type === 'modified';
                 }
                 // or item/object/list events
@@ -128,7 +129,7 @@ class PageController {
                     return funnel_core_1.Field.Event.filter(e) && (e.type === 'changed' || e.type === 'reset');
                 }
             }), (0, rxjs_1.debounce)(e => {
-                if ((core_1.Page.Event.filter(e) && e.type === 'modified')
+                if ((core_1.IPage.Event.filter(e) && e.type === 'modified')
                     || core_1.Item.Event.filter(e)
                     || funnel_core_1.FieldList.Event.filter(e)
                     || (funnel_core_1.Field.Event.filter(e) && e.field.isComposite)) {
@@ -326,34 +327,7 @@ class PageController {
         }
     }
     raiseEvent(type) {
-        this._eventBus.publish(PageController.Event.create({ type, controller: this }));
+        this._eventBus.publish(IPageController_1.IPageController.Event.create({ type, controller: this }));
     }
 }
 exports.PageController = PageController;
-// extensions
-(function (PageController) {
-    let Event;
-    (function (Event) {
-        // methods
-        function filter(event) {
-            return event.domain === 'PageController';
-        }
-        Event.filter = filter;
-        function create(event) {
-            return funnel_core_1.EventBus.createEvent(Object.assign({ domain: 'PageController' }, event));
-        }
-        Event.create = create;
-    })(Event = PageController.Event || (PageController.Event = {}));
-    let StateChangedEvent;
-    (function (StateChangedEvent) {
-        // methods
-        function filter(event) {
-            return event.domain === 'PageController' && event.type === 'state.changed';
-        }
-        StateChangedEvent.filter = filter;
-        function create(event) {
-            return funnel_core_1.EventBus.createEvent(Object.assign({ domain: 'PageController', type: 'state.changed' }, event));
-        }
-        StateChangedEvent.create = create;
-    })(StateChangedEvent = PageController.StateChangedEvent || (PageController.StateChangedEvent = {}));
-})(PageController || (exports.PageController = PageController = {}));

package/dist/page/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export * from './PageController';
+export * from './IPageController';
 export * from './usePageController';

package/dist/page/hooks/index.js

@@ -15,4 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./PageController"), exports);
+__exportStar(require("./IPageController"), exports);
 __exportStar(require("./usePageController"), exports);

package/dist/page/hooks/usePageController.d.ts

@@ -1,8 +1,8 @@
-import { PageController } from './PageController';
-export declare function usePageController(pageController?: PageController): PageController;
+import { IPageController } from './IPageController';
+export declare function usePageController(pageController?: IPageController): IPageController;
 export declare const PageControllerContext: import("react").Context<PageControllerContext.Type>;
 export declare namespace PageControllerContext {
     type Type = {
-        controller: PageController;
+        controller: IPageController;
     };
 }

package/dist/page/screens/PageEditor.js

@@ -76,7 +76,7 @@ function PageEditor({ templateId, region, language, slug }) {
     };
     const onSelectItem = (item) => setItemId(item.identifier);
     // render
-    return ((0, jsx_runtime_1.jsx)(hooks_1.PageControllerContext.Provider, { value: controllerContext, children: (0, jsx_runtime_1.jsx)(core_1.PageContext.Provider, { value: pageContext, children: (0, jsx_runtime_1.jsx)(core_1.AssetStoreContext.Provider, { value: page, children: (0, jsx_runtime_1.jsx)(core_1.CollectionStoreContext.Provider, { value: page, children: (0, jsx_runtime_1.jsx)(core_1.PageRefStoreContext.Provider, { value: pageRefStoreProxy, children: (0, jsx_runtime_1.jsx)(config_1.BlockConfigurationProvider, { item: selectedItem, children: (0, jsx_runtime_1.jsxs)("div", { className: "w-dvw h-dvh flex flex-col bg-background", children: [(0, jsx_runtime_1.jsx)(components_1.PageHeader, { target: target, selectedItem: selectedItem, onBack: onHeaderBack }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex-1", children: (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 flex", children: [(0, jsx_runtime_1.jsx)("section", { className: "w-[220px] lg:w-[240px] xl:w-[280px] shrink-0 overflow-y-scroll scrollbar-thin", children: (0, jsx_runtime_1.jsx)(components_1.PageNav, { selectedItem: selectedItem, onSelectItem: onSelectItem }) }), (0, jsx_runtime_1.jsx)("section", { className: "flex-1 h-full max-h-full max-w-[1000px] mx-auto", children: (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { mode: "wait", initial: false, children: renderContent({ target, controller, page, selectedItem, onSelectItem }) }) }), (0, jsx_runtime_1.jsxs)(react_1.motion.section, { className: (0, classnames_1.default)('hidden lg:flex lg:w-[320px] shrink-0 overflow-y-scroll scrollbar-thin', 'flex-col gap-l8 pt-l9 px-l8 pb-l8'), layout: true, children: [(0, jsx_runtime_1.jsx)("h2", { className: "label-sm text-content-tertiary uppercase", children: "Inspector" }), (0, jsx_runtime_1.jsxs)(react_1.AnimatePresence, { mode: "popLayout", children: [page && selectedItem && (selectedItem instanceof core_1.Block || selectedItem instanceof core_1.SectionBlock) &&
+    return ((0, jsx_runtime_1.jsx)(hooks_1.PageControllerContext.Provider, { value: controllerContext, children: (0, jsx_runtime_1.jsx)(core_1.PageContext.Provider, { value: pageContext, children: (0, jsx_runtime_1.jsx)(core_1.AssetStoreContext.Provider, { value: page, children: (0, jsx_runtime_1.jsx)(core_1.CollectionStoreContext.Provider, { value: page, children: (0, jsx_runtime_1.jsx)(core_1.PageRefStoreContext.Provider, { value: pageRefStoreProxy, children: (0, jsx_runtime_1.jsx)(config_1.BlockConfigurationProvider, { item: selectedItem, children: (0, jsx_runtime_1.jsxs)("div", { className: "w-dvw h-dvh flex flex-col bg-background", children: [(0, jsx_runtime_1.jsx)(components_1.PageHeader, { target: target, selectedItem: selectedItem, onBack: onHeaderBack }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex-1", children: (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 flex z-default", children: [(0, jsx_runtime_1.jsx)("section", { className: "w-[220px] lg:w-[240px] xl:w-[280px] shrink-0 overflow-y-scroll scrollbar-thin", tabIndex: -1, children: (0, jsx_runtime_1.jsx)(components_1.PageNav, { selectedItem: selectedItem, onSelectItem: onSelectItem }) }), (0, jsx_runtime_1.jsx)("section", { className: "flex-1 h-full max-h-full max-w-[1000px] mx-auto", tabIndex: -1, children: (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { mode: "wait", initial: false, children: renderContent({ target, controller, page, selectedItem, onSelectItem }) }) }), (0, jsx_runtime_1.jsxs)(react_1.motion.section, { className: (0, classnames_1.default)('hidden lg:flex lg:w-[320px] shrink-0 overflow-y-scroll scrollbar-thin', 'flex-col gap-l8 pt-l9 px-l8 pb-l8'), layout: true, tabIndex: -1, children: [(0, jsx_runtime_1.jsx)("h2", { className: "label-sm text-content-tertiary uppercase", children: "Inspector" }), (0, jsx_runtime_1.jsxs)(react_1.AnimatePresence, { mode: "popLayout", children: [page && selectedItem && (selectedItem instanceof core_1.Block || selectedItem instanceof core_1.SectionBlock) &&
                                                                     (0, jsx_runtime_1.jsx)(components_1.BlockConfigPanel, {}, "block.config"), page && selectedItem &&
                                                                     (0, jsx_runtime_1.jsx)(components_1.PageStatus, { page: page, selectedItem: selectedItem, onSelectItem: onSelectItem }, "status")] })] })] }) })] }) }) }) }) }) }) }));
 }