@nascentdigital/funnel-editor 4.5.6 → 4.6.0

package/dist/page/components/config/LegacyBlockPreview.d.ts

@@ -0,0 +1,8 @@
+import { BlockConfiguration } from '../../../core';
+export declare function LegacyBlockPreview({ className, configuration }: LegacyBlockPreview.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace LegacyBlockPreview {
+    type Props = {
+        className?: string;
+        configuration: BlockConfiguration;
+    };
+}

package/dist/page/components/config/{BlockPreview.js → LegacyBlockPreview.js}

@@ -14,53 +14,45 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BlockPreview = BlockPreview;
+exports.LegacyBlockPreview = LegacyBlockPreview;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const funnel_core_1 = require("@nascentdigital/funnel-core");
 const classnames_1 = __importDefault(require("classnames"));
-const react_1 = require("react");
+const react_1 = require("motion/react");
+const react_2 = require("react");
 const core_1 = require("../../../core");
-const ListPanelEditor_1 = require("./ListPanelEditor");
-const MessagePanelEditor_1 = require("./MessagePanelEditor");
-const VisualPanelEditor_1 = require("./VisualPanelEditor");
-const react_2 = require("motion/react");
 // component
-function BlockPreview({ className, variant, configuration }) {
+function LegacyBlockPreview({ className, configuration }) {
     // bind props + state + refs
-    const { layout } = configuration;
-    const [editingPanel, setEditingPanel] = (0, react_1.useState)();
-    const previewRef = (0, react_1.useRef)(null);
+    const { scope, layout } = configuration;
+    const previewRef = (0, react_2.useRef)(null);
     // sync configuration
     (0, core_1.useBlockConfiguration)(configuration);
-    // helpers
-    const onPanelClick = (panel) => {
-        setEditingPanel(panel.type);
-    };
     // render
-    const tight = variant === 'mobile'
+    const tight = scope === 'mobile'
         ? layout === null || layout === void 0 ? void 0 : layout.tight.mobile
         : layout === null || layout === void 0 ? void 0 : layout.tight.desktop;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(react_2.motion.div, { ref: previewRef, className: (0, classnames_1.default)(className, 'w-full flex justify-center'), layout: true, children: [(0, jsx_runtime_1.jsx)(react_2.motion.div, { className: (0, classnames_1.default)('bg-surface2 rounded-xs', {
-                        'min-h-[100px]': !layout,
-                        'w-[120px]': variant === 'desktop',
-                        'w-[64px]': variant === 'mobile',
-                        'pb-l4': tight === 'above',
-                        'pt-l4': tight === 'below',
-                        'py-l4': tight === 'none'
-                    }), layoutRoot: true, layout: true, children: renderLayout({ variant, layout, onPanelClick }) }), (0, jsx_runtime_1.jsx)(MessagePanelEditor_1.MessagePanelEditor, { open: editingPanel === 'message', onClose: () => setEditingPanel(panel => panel === 'message' ? undefined : panel), anchor: previewRef.current, configuration: configuration }), (0, jsx_runtime_1.jsx)(ListPanelEditor_1.ListPanelEditor, { open: editingPanel === 'list', onClose: () => setEditingPanel(panel => panel === 'list' ? undefined : panel), anchor: previewRef.current, configuration: configuration }), (0, jsx_runtime_1.jsx)(VisualPanelEditor_1.VisualPanelEditor, { open: editingPanel === 'visual', onClose: () => setEditingPanel(panel => panel === 'visual' ? undefined : panel), anchor: previewRef.current, configuration: configuration })] }) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_1.motion.div, { ref: previewRef, className: (0, classnames_1.default)(className, 'w-full flex justify-center'), layout: true, children: (0, jsx_runtime_1.jsx)(react_1.motion.div, { className: (0, classnames_1.default)('bg-surface2 rounded-xs', {
+                    'min-h-[100px]': !layout,
+                    'w-[120px]': scope === 'desktop',
+                    'w-[64px]': scope === 'mobile',
+                    'pb-l4': tight === 'above',
+                    'pt-l4': tight === 'below',
+                    'py-l4': tight === 'none'
+                }), layoutRoot: true, layout: true, children: renderLayout({ variant: scope, layout }) }) }) }));
 }
 // helpers
 var Skeleton;
 (function (Skeleton) {
     function HeadlinePart({ className, size }) {
-        return ((0, jsx_runtime_1.jsx)(react_2.motion.div, { className: (0, classnames_1.default)(className, 'bg-ix-primary rounded-xxs overflow-hidden', {
+        return ((0, jsx_runtime_1.jsx)(react_1.motion.div, { className: (0, classnames_1.default)(className, 'bg-ix-primary rounded-xxs overflow-hidden', {
                 'h-6 ': size === 'sm',
                 'h-8': size === 'md'
             }), layout: true }));
     }
     Skeleton.HeadlinePart = HeadlinePart;
     function CaptionPart({ className, size }) {
-        return ((0, jsx_runtime_1.jsx)(react_2.motion.div, { className: (0, classnames_1.default)(className, 'h-4 bg-draft/tint3 rounded-px overflow-hidden', {
+        return ((0, jsx_runtime_1.jsx)(react_1.motion.div, { className: (0, classnames_1.default)(className, 'h-4 bg-draft/tint3 rounded-px overflow-hidden', {
                 '': size === 'sm'
             }), layout: true }));
     }
@@ -94,14 +86,14 @@ var Skeleton;
     }
     Skeleton.LogoPart = LogoPart;
 })(Skeleton || (Skeleton = {}));
-function renderLayout({ className, variant, layout, onPanelClick }) {
+function renderLayout({ className, variant, layout }) {
     // TODO: render empty state if there's no layout
     if (!layout) {
         return null;
     }
     // render root layout
     const { type, items } = layout.root;
-    return ((0, jsx_runtime_1.jsx)(react_2.motion.div, { className: getContainerClasses({ className, variant, siblingCount: 1, item: layout.root }), layout: true, children: items.map((item, parentOffset) => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderItem({
+    return ((0, jsx_runtime_1.jsx)(react_1.motion.div, { className: getContainerClasses({ className, variant, siblingCount: 1, item: layout.root }), layout: true, children: items.map((item, parentOffset) => (0, jsx_runtime_1.jsx)(react_2.Fragment, { children: renderItem({
                 className: (0, classnames_1.default)({
                     'flex-1': type === 'row' && variant !== 'mobile'
                 }),
@@ -114,18 +106,17 @@ function renderLayout({ className, variant, layout, onPanelClick }) {
                     parent: type,
                     parentOffset,
                     parentSize: items.length
-                }),
-                onPanelClick
+                })
             }) }, `${item.type}.${parentOffset}`)) }));
 }
-function renderItem({ className, parent, parentNested, siblingCount, variant, item, itemPosition, onPanelClick }) {
+function renderItem({ className, parent, parentNested, siblingCount, variant, item, itemPosition }) {
     // render item
     const { type: itemType } = item;
     switch (itemType) {
         case 'row':
         case 'column':
         case 'stack':
-            return ((0, jsx_runtime_1.jsx)(react_2.motion.div, { className: getContainerClasses({ className, parent, siblingCount, variant, item }), layout: true, children: item.items.map((item, parentOffset, items) => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderItem({
+            return ((0, jsx_runtime_1.jsx)(react_1.motion.div, { className: getContainerClasses({ className, parent, siblingCount, variant, item }), layout: true, children: item.items.map((item, parentOffset, items) => (0, jsx_runtime_1.jsx)(react_2.Fragment, { children: renderItem({
                         className: (0, classnames_1.default)({
                             'flex-1': itemType === 'row'
                         }),
@@ -138,17 +129,16 @@ function renderItem({ className, parent, parentNested, siblingCount, variant, it
                             parent: itemType,
                             parentOffset,
                             parentSize: items.length
-                        }),
-                        onPanelClick
+                        })
                     }) }, `${item.type}.${parentOffset}`)) }));
         case 'message':
-            return renderMessage({ className, parent, parentNested, siblingCount, variant, item, itemPosition, onPanelClick });
+            return renderMessage({ className, parent, parentNested, siblingCount, variant, item, itemPosition });
         case 'visual':
-            return renderVisual({ className, parent, parentNested, siblingCount, variant, item, itemPosition, onPanelClick });
+            return renderVisual({ className, parent, parentNested, siblingCount, variant, item, itemPosition });
         case 'list':
-            return renderList({ className, parent, parentNested, siblingCount, variant, item, itemPosition, onPanelClick });
+            return renderList({ className, parent, parentNested, siblingCount, variant, item, itemPosition });
         default:
-            console.error('[SkeletonLayout] no support for BlockLayout item', item);
+            console.error('[BlockPreview] no support for BlockLayout item', item);
             return null;
     }
 }
@@ -216,7 +206,7 @@ function renderList(args) {
     const itemCount = variant === 'mobile'
         ? itemCountRaw.mobile
         : itemCountRaw.desktop;
-    return ((0, jsx_runtime_1.jsx)(EditablePanel, Object.assign({}, args, { panelClassName: getListPanelClasses(args), children: funnel_core_1.ArrayUtils.series(itemCount, 1).map(row => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderListItem({ variant, parent, parentNested, layout, itemType, index: row, count: itemCount }) }, `list.${row}`)) })));
+    return ((0, jsx_runtime_1.jsx)(EditablePanel, Object.assign({}, args, { panelClassName: getListPanelClasses(args), children: funnel_core_1.ArrayUtils.series(itemCount, 1).map(row => (0, jsx_runtime_1.jsx)(react_2.Fragment, { children: renderListItem({ variant, parent, parentNested, layout, itemType, index: row, count: itemCount }) }, `list.${row}`)) })));
 }
 function getListPanelClasses(args) {
     // resolve props
@@ -332,7 +322,7 @@ function renderGrid(args) {
         : itemCountRaw.desktop;
     const { panelClassName, panelItemClassName } = getGridPanelClasses(args);
     // render grid (really a flexbox layout with controlled item widths)
-    return ((0, jsx_runtime_1.jsx)(EditablePanel, Object.assign({}, args, { panelClassName: panelClassName, children: funnel_core_1.ArrayUtils.series(itemCount, 1).map(row => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderListItem({
+    return ((0, jsx_runtime_1.jsx)(EditablePanel, Object.assign({}, args, { panelClassName: panelClassName, children: funnel_core_1.ArrayUtils.series(itemCount, 1).map(row => (0, jsx_runtime_1.jsx)(react_2.Fragment, { children: renderListItem({
                 className: panelItemClassName,
                 variant,
                 parent,
@@ -443,7 +433,7 @@ function getPanelClasses({ className, variant, parent, parentNested, item: { ali
 function EditablePanel(_a) {
     var { panelClassName, children } = _a, args = __rest(_a, ["panelClassName", "children"]);
     // render
-    return ((0, jsx_runtime_1.jsx)(react_2.motion.div, { className: getPanelWrapClasses(args), layout: true, layoutId: args.item.key, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, 'relative'), children: [children, (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('group absolute inset-0 z-overlay cursor-pointer interpolate', 'bg-surface1 border border-solid, border-ix-primary rounded-xxs overflow-hidden', 'opacity-none hover:opacity-full'), onClick: () => args.onPanelClick(args.item), children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('w-full h-full interpolate', 'flex flex-col justify-center items-center gap-l6', 'text-ix-primary group-hover:bg-ix-primary/tint1 group-active:bg-ix-primary/tint3'), children: (0, jsx_runtime_1.jsx)("span", { className: "label-xs label-strong", children: "Edit" }) }) })] }) }, args.item.key));
+    return ((0, jsx_runtime_1.jsx)(react_1.motion.div, { className: getPanelWrapClasses(args), layout: true, layoutId: args.item.key, children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(panelClassName, 'relative'), children: children }) }, args.item.key));
 }
 // TODO: scrap this
 class ItemPosition {

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

@@ -1 +1,3 @@
-export * from './BlockConfig';
+export * from './BlockConfigButton';
+export * from './BlockConfigurationProvider';
+export * from './LegacyBlockPreview';

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

@@ -14,4 +14,6 @@ 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("./BlockConfig"), exports);
+__exportStar(require("./BlockConfigButton"), exports);
+__exportStar(require("./BlockConfigurationProvider"), exports);
+__exportStar(require("./LegacyBlockPreview"), exports);

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

@@ -1,7 +1,7 @@
+export * from './panels';
 export * from './BlockEditor';
 export * from './PageHeader';
 export * from './PageNav';
 export * from './PageNotCreated';
 export * from './PageNotFound';
-export * from './PageStatus';
 export * from './SettingsEditor';

package/dist/page/components/index.js

@@ -14,10 +14,10 @@ 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("./panels"), exports);
 __exportStar(require("./BlockEditor"), exports);
 __exportStar(require("./PageHeader"), exports);
 __exportStar(require("./PageNav"), exports);
 __exportStar(require("./PageNotCreated"), exports);
 __exportStar(require("./PageNotFound"), exports);
-__exportStar(require("./PageStatus"), exports);
 __exportStar(require("./SettingsEditor"), exports);

package/dist/page/components/nav/NavSection.js

@@ -18,12 +18,13 @@ function NavSection({ className, section, selectedItem, onSelectItem }) {
         label: block.name,
         icon: core_1.BlockIcon.resolve(block.schema)
     })), [availableBlocks]);
+    const anchorId = (0, react_1.useId)();
     const menu = (0, core_1.useMenuController)(items);
     // helpers
-    const onOpenBlockMenu = (anchor) => {
+    const onOpenBlockMenu = () => {
         // open menu
         menu.selectedItem = undefined;
-        menu.open(anchor);
+        menu.open(anchorId);
     };
     const onAddBlock = (identifier) => {
         // add block
@@ -41,5 +42,5 @@ function NavSection({ className, section, selectedItem, onSelectItem }) {
     };
     // render
     return ((0, jsx_runtime_1.jsxs)("div", { id: section.identifier, className: (0, classnames_1.default)(className, 'flex flex-col gap-l4 p-l5 bg-surface2 rounded-sm'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center", children: [(0, jsx_runtime_1.jsx)("h3", { className: "heading-xs", children: name }), menu.items.length > 0 &&
-                        (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.IconButton, { variant: "util", icon: "Plus", size: "sm", onClick: e => onOpenBlockMenu(e.currentTarget) }), (0, jsx_runtime_1.jsx)(core_1.Menu, { title: "Add Block", controller: menu, onItemClick: onAddBlock })] })] }), (0, jsx_runtime_1.jsx)(core_1.Sortable, { className: "flex flex-col gap-l5", enableItemClick: true, items: section.blocks, renderItem: block => (0, jsx_runtime_1.jsx)(NavBlock_1.NavBlock, { block: block, selectedItem: selectedItem, onSelectItem: onSelectItem, draggable: true }, block.identifier), onChange: onOrderChange })] }));
+                        (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.IconButton, { anchorId: anchorId, variant: "util", icon: "Plus", size: "sm", onClick: e => onOpenBlockMenu() }), (0, jsx_runtime_1.jsx)(core_1.Menu, { title: "Add Block", placement: "bottom", controller: menu, onItemClick: onAddBlock })] })] }), (0, jsx_runtime_1.jsx)(core_1.Sortable, { className: "flex flex-col gap-l5", enableItemClick: true, items: section.blocks, renderItem: block => (0, jsx_runtime_1.jsx)(NavBlock_1.NavBlock, { block: block, selectedItem: selectedItem, onSelectItem: onSelectItem, draggable: true }, block.identifier), onChange: onOrderChange })] }));
 }

package/dist/page/components/panels/BlockConfigPanel.d.ts

@@ -0,0 +1 @@
+export declare function BlockConfigPanel(): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlockConfigPanel = BlockConfigPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("motion/react");
+const core_1 = require("../../../core");
+const config_1 = require("../config");
+// panel
+function BlockConfigPanel() {
+    // bind state + hooks
+    const configuration = (0, core_1.useBlockConfiguration)();
+    // skip if there's no config (shouldn't happen)
+    if (!configuration || !configuration.hasPanels) {
+        return null;
+    }
+    // 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"));
+}
+// helpers
+const blockScopes = [
+    { id: 'desktop', label: 'Desktop' },
+    { id: 'mobile', label: 'Mobile' },
+];

package/dist/page/components/{PageStatus.d.ts → panels/PageStatus.d.ts}

@@ -1,9 +1,9 @@
 import { Callback } from '@nascentdigital/funnel-core';
-import { Block, PageSettings, Section, SectionBlock } from '../../core';
-export declare function PageStatus({ className, onSelectItem }: PageStatus.Props): import("react/jsx-runtime").JSX.Element | null;
+import { Block, Page, PageSettings, Section, SectionBlock } from '../../../core';
+export declare function PageStatus({ page, onSelectItem }: PageStatus.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace PageStatus {
     type Props = {
-        className?: string;
+        page: Page;
         selectedItem: Block | SectionBlock | Section | PageSettings | undefined;
         onSelectItem: Callback<Block | SectionBlock | Section | PageSettings>;
     };

package/dist/page/components/{PageStatus.js → panels/PageStatus.js}

@@ -8,31 +8,27 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const funnel_cms_1 = require("@nascentdigital/funnel-cms");
 const funnel_core_1 = require("@nascentdigital/funnel-core");
 const classnames_1 = __importDefault(require("classnames"));
-const react_1 = require("motion/react");
-const core_1 = require("../../core");
-const hooks_1 = require("../hooks");
-const status_1 = require("./status");
+const core_1 = require("../../../core");
+const hooks_1 = require("../../hooks");
+const AutoSave_1 = require("./AutoSave");
 // component
-function PageStatus({ className, onSelectItem }) {
+function PageStatus({ page, onSelectItem }) {
     // bind hooks
     const router = (0, core_1.useEditorRouter)();
     const editorApi = (0, core_1.useEditorApi)();
     const controller = (0, hooks_1.usePageController)();
-    const page = (0, core_1.usePossiblePage)();
     const dialog = (0, core_1.useDialog)();
-    // skip if page isn't ready
-    if (!page) {
-        return null;
-    }
+    // sync with page
+    (0, core_1.usePage)(page);
     // render
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'flex flex-col gap-l8 pt-l9 px-l8 pb-l8'), children: [(0, jsx_runtime_1.jsx)("h2", { className: "label-sm text-content-tertiary uppercase", children: "Page Status" }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { mode: "wait", children: renderStatus({ router, editorApi, controller, page, dialog, onSelectItem }) })] }));
+    return renderStatus({ router, editorApi, controller, page, dialog, onSelectItem });
 }
 function renderStatus(args) {
     // render unchanged
     const { page, onSelectItem } = args;
     if (page.state === 'published') {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.FadeIn, { children: renderLiveUnchanged(args) }, "live"), page.modified &&
-                    (0, jsx_runtime_1.jsx)(core_1.FadeIn, { children: (0, jsx_runtime_1.jsx)(status_1.AutoSave, { className: "mt-l8" }) }, "live-status")] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.FadeIn, { layout: true, children: renderLiveUnchanged(args) }, "live"), page.modified &&
+                    (0, jsx_runtime_1.jsx)(core_1.FadeIn, { layout: true, children: (0, jsx_runtime_1.jsx)(AutoSave_1.AutoSave, { className: "mt-l8" }) }, "live-status")] }));
     }
     // or draft invalid/valid
     let status;
@@ -56,7 +52,7 @@ function renderStatus(args) {
                     (0, jsx_runtime_1.jsxs)("section", { className: "flex flex-col gap-l4 p-l7 bg-surface1 rounded-xxl", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-l2", children: [(0, jsx_runtime_1.jsx)("h4", { className: "heading-xs text-content-primary", children: "Changes" }), (0, jsx_runtime_1.jsx)(core_1.CountBadge, { variant: "secondary", count: changedBlocks.length })] }), (0, jsx_runtime_1.jsx)("p", { className: "body-sm text-content-secondary text-pretty", children: "These sections have been updated:" }), (0, jsx_runtime_1.jsx)("ul", { className: "flex flex-wrap gap-l4", children: changedBlocks.map(item => (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(core_1.StatusChip, { variant: "info", onClick: () => onSelectItem(item), children: item.name }) }, item.identifier)) })] })] }));
     }
     // return packaged item
-    return ((0, jsx_runtime_1.jsxs)(core_1.FadeIn, { children: [status, (0, jsx_runtime_1.jsx)(status_1.AutoSave, { className: "mt-l8" })] }, `${publishedOn ? 'updated' : 'draft'}/${invalid ? 'invalid' : 'valid'}`));
+    return ((0, jsx_runtime_1.jsxs)(core_1.FadeIn, { layout: true, children: [status, (0, jsx_runtime_1.jsx)(AutoSave_1.AutoSave, { className: "mt-l8" })] }, `${publishedOn ? 'updated' : 'draft'}/${invalid ? 'invalid' : 'valid'}`));
 }
 function renderDraftInvalid(args) {
     // bind props

package/dist/page/components/panels/index.d.ts

@@ -0,0 +1,2 @@
+export * from './BlockConfigPanel';
+export * from './PageStatus';

package/dist/page/components/{status → panels}/index.js

@@ -14,4 +14,5 @@ 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("./AutoSave"), exports);
+__exportStar(require("./BlockConfigPanel"), exports);
+__exportStar(require("./PageStatus"), exports);

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

@@ -18,8 +18,8 @@ export declare class PageController {
     get ready(): boolean;
     get target(): PageController.Target;
     get region(): string;
-    get language(): "id" | "is" | "tw" | "cy" | "fr" | "fy" | "to" | "br" | "hr" | "li" | "th" | "tr" | "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(): ("id" | "is" | "tw" | "cy" | "fr" | "fy" | "to" | "br" | "hr" | "li" | "th" | "tr" | "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 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;

package/dist/page/screens/PageEditor.js

@@ -1,12 +1,17 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageEditor = PageEditor;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("motion/react");
 const react_2 = require("react");
 const core_1 = require("../../core");
 const components_1 = require("../components");
+const config_1 = require("../components/config");
 const hooks_1 = require("../hooks");
 // component
 function PageEditor({ templateId, region, language, slug }) {
@@ -71,7 +76,9 @@ 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.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.jsx)("section", { className: "hidden lg:block lg:w-[320px] shrink-0 overflow-y-scroll scrollbar-thin", children: (0, jsx_runtime_1.jsx)(components_1.PageStatus, { selectedItem: selectedItem, onSelectItem: onSelectItem }) })] }) })] }) }) }) }) }) }));
+    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) &&
+                                                                    (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")] })] })] }) })] }) }) }) }) }) }) }));
 }
 // helpers
 function coerceTarget({ templateId, slug, region, language }) {