@nascentdigital/funnel-editor 4.5.7 → 4.6.0

package/dist/explore/screens/CollectionExplorer.js

@@ -25,7 +25,7 @@ function CollectionExplorer({ type }) {
         }
     }, [splash, groupedCollections]);
     // helpers
-    const onCreateCollection = async (e) => {
+    const onCreateCollection = async (e, anchorId) => {
         var _a;
         // ignore if template isn't bound
         if (!collectionBrowser) {
@@ -34,7 +34,7 @@ function CollectionExplorer({ type }) {
         // open dialog (skip if the page creation was cancelled)
         const collection = await ((_a = createDialogRef.current) === null || _a === void 0 ? void 0 : _a.createCollection({
             collectionBrowser,
-            anchor: e.currentTarget
+            anchor: anchorId
         }));
         if (!collection) {
             return;
@@ -56,10 +56,10 @@ function renderCollections({ template, groupedCollections, onOpenLink, onCreateC
     // or render
     const { inProgress, live } = groupedCollections;
     if (inProgress.length === 0 && live.length === 0) {
-        return ((0, jsx_runtime_1.jsxs)(core_1.EmptyState, { variant: "missing", children: [(0, jsx_runtime_1.jsxs)("div", { className: "max-w-sm flex flex-col items-center gap-l4 text-center text-pretty whitespace-pre", children: [(0, jsx_runtime_1.jsx)("p", { children: "It doesn't look like you've created anything yet." }), (0, jsx_runtime_1.jsx)("p", { children: "Get started by creating your first item.  It's pretty simple and shouldn't take too long!" })] }), (0, jsx_runtime_1.jsxs)(core_1.Button, { variant: "primary", onClick: onCreateCollection, children: ["Create a ", template.name] })] }, "empty"));
+        return ((0, jsx_runtime_1.jsxs)(core_1.EmptyState, { variant: "missing", children: [(0, jsx_runtime_1.jsxs)("div", { className: "max-w-sm flex flex-col items-center gap-l4 text-center text-pretty whitespace-pre", children: [(0, jsx_runtime_1.jsx)("p", { children: "It doesn't look like you've created anything yet." }), (0, jsx_runtime_1.jsx)("p", { children: "Get started by creating your first item.  It's pretty simple and shouldn't take too long!" })] }), (0, jsx_runtime_1.jsxs)(core_1.Button, { anchorId: "collection.create", variant: "primary", onClick: e => onCreateCollection(e, 'collection.create'), children: ["Create a ", template.name] })] }, "empty"));
     }
     // render pages
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-l8 justify-between items-center", children: [(0, jsx_runtime_1.jsxs)("h2", { className: "heading-lg text-content-primary", children: [template.name, " data"] }), (0, jsx_runtime_1.jsxs)(core_1.Button, { variant: "primary", iconLeft: "Plus", onClick: onCreateCollection, children: ["Create a new ", template.name] })] }), inProgress.length > 0 &&
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-l8 justify-between items-center", children: [(0, jsx_runtime_1.jsxs)("h2", { className: "heading-lg text-content-primary", children: [template.name, " data"] }), (0, jsx_runtime_1.jsxs)(core_1.Button, { className: "collection.createNew", variant: "primary", iconLeft: "Plus", onClick: e => onCreateCollection(e, 'collection.createNew'), children: ["Create a new ", template.name] })] }), inProgress.length > 0 &&
                 (0, jsx_runtime_1.jsx)(core_1.Table, { className: "flex-1", title: "Work in progress", children: inProgress.map(({ status, link }) => (0, jsx_runtime_1.jsx)(core_1.TableItem, { details: status === 'ready'
                             ? (0, jsx_runtime_1.jsx)(core_1.StatusBadge, { variant: "success", label: "Ready to go" })
                             : status === 'changed'

package/dist/explore/screens/PageExplorer.js

@@ -25,7 +25,7 @@ function PageExplorer({ region, page: pageType }) {
         }
     }, [splash, ready]);
     // helpers
-    const onCreatePage = async (e) => {
+    const onCreatePage = async (e, anchorId) => {
         var _a;
         // skip if there are no collections (should never happen)
         if (!collection) {
@@ -36,7 +36,7 @@ function PageExplorer({ region, page: pageType }) {
             site,
             template,
             collection,
-            anchor: e.currentTarget
+            anchor: anchorId
         }));
         if (!page) {
             return;
@@ -58,10 +58,10 @@ function renderPages({ template, groupedPages, onCreatePage, onOpenPage }) {
     // or show empty state if there are no pages
     const { inProgress, live, unpublished } = groupedPages;
     if (inProgress.length === 0 && live.length === 0 && unpublished.length === 0) {
-        return ((0, jsx_runtime_1.jsxs)(core_1.EmptyState, { variant: "missing", children: [(0, jsx_runtime_1.jsxs)("h3", { className: "heading-md text-content-primary", children: ["There are no ", template.name, " pages created yet!"] }), (0, jsx_runtime_1.jsxs)(core_1.Button, { variant: "primary", iconLeft: "Plus", onClick: onCreatePage, children: ["Create a ", template.name] })] }, "empty"));
+        return ((0, jsx_runtime_1.jsxs)(core_1.EmptyState, { variant: "missing", children: [(0, jsx_runtime_1.jsxs)("h3", { className: "heading-md text-content-primary", children: ["There are no ", template.name, " pages created yet!"] }), (0, jsx_runtime_1.jsxs)(core_1.Button, { anchorId: "page-create", variant: "primary", iconLeft: "Plus", onClick: e => onCreatePage(e, 'page-create'), children: ["Create a ", template.name] })] }, "empty"));
     }
     // render pages
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-l8 justify-between items-center", children: [(0, jsx_runtime_1.jsxs)("h2", { className: "heading-lg text-content-primary", children: [template.name, " pages"] }), (0, jsx_runtime_1.jsxs)(core_1.Button, { variant: "primary", iconLeft: "Plus", onClick: onCreatePage, children: ["Create a new ", template.name] })] }), inProgress.length > 0 &&
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-l8 justify-between items-center", children: [(0, jsx_runtime_1.jsxs)("h2", { className: "heading-lg text-content-primary", children: [template.name, " pages"] }), (0, jsx_runtime_1.jsxs)(core_1.Button, { anchorId: "page-create", variant: "primary", iconLeft: "Plus", onClick: e => onCreatePage(e, 'page-create'), children: ["Create a new ", template.name] })] }), inProgress.length > 0 &&
                 (0, jsx_runtime_1.jsx)(core_1.Table, { className: "flex-1", title: "Work in progress", children: inProgress.map(({ summary: { status }, link }) => (0, jsx_runtime_1.jsx)(core_1.TableItem, { details: status === 'ready'
                             ? (0, jsx_runtime_1.jsx)(core_1.StatusBadge, { variant: "success", label: "Ready to publish" })
                             : status === 'changed'

package/dist/page/components/BlockEditor.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BlockEditor = BlockEditor;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
 const core_1 = require("../../core");
 const config_1 = require("./config");
 // component
@@ -13,6 +14,8 @@ function BlockEditor({ className, block, onSelectItem }) {
     // bind props + hooks
     const dialog = (0, core_1.useDialog)();
     const menu = (0, core_1.useMenuController)(blockMenu);
+    const anchorId = (0, react_1.useId)();
+    // sync block
     (0, core_1.useBlock)(block);
     // render empty state if block isn't selected
     if (!block) {
@@ -54,8 +57,13 @@ function BlockEditor({ className, block, onSelectItem }) {
         }
     };
     // render editor
-    return ((0, jsx_runtime_1.jsx)(core_1.FieldsPanel, { className: (0, classnames_1.default)(className, 'px-l6 py-l10'), title: block.name, actions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(config_1.BlockConfig, { className: "shrink-0", block: block }), block.canDelete &&
-                    (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.IconButton, { className: "DeleteAction text-content-primary hover:text-destructive shrink-0", variant: "util", icon: "EllipsisVertical", onClick: e => menu.open(e.currentTarget) }), (0, jsx_runtime_1.jsx)(core_1.Menu, { controller: menu, onItemClick: onMenuClick })] })] }), fields: block.fields }));
+    const { messageFields, visualFields, listsFields, extendedFields } = block;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'max-h-full h-full flex flex-col'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center px-l6 pt-l10 pb-l4", children: [(0, jsx_runtime_1.jsx)("h2", { className: "heading-lg flex-1", children: block.name }), (0, jsx_runtime_1.jsx)("div", { className: "shrink-0 flex items-center gap-l5", children: block.canDelete &&
+                            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.IconButton, { anchorId: anchorId, className: "DeleteAction text-content-primary hover:text-destructive shrink-0", variant: "util", icon: "EllipsisVertical", onClick: e => menu.open(anchorId) }), (0, jsx_runtime_1.jsx)(core_1.Menu, { controller: menu, onItemClick: onMenuClick })] }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex flex-col gap-l8 px-l6 pb-l10 overflow-y-scroll scrollbar-thin scroller-fade-top bg-background", children: [messageFields.length > 0 &&
+                        (0, jsx_runtime_1.jsx)(core_1.FieldsPanel, { title: "Messaging", actions: (0, jsx_runtime_1.jsx)(config_1.BlockConfigButton, { target: "message" }), fields: messageFields }), visualFields.length > 0 &&
+                        (0, jsx_runtime_1.jsx)(core_1.FieldsPanel, { title: "Visual", actions: (0, jsx_runtime_1.jsx)(config_1.BlockConfigButton, { target: "visual" }), fields: visualFields }), listsFields.length > 0 &&
+                        (0, jsx_runtime_1.jsx)(core_1.FieldsPanel, { title: "List", actions: (0, jsx_runtime_1.jsx)(config_1.BlockConfigButton, { target: "list" }), fields: listsFields }), extendedFields.length > 0 &&
+                        (0, jsx_runtime_1.jsx)(core_1.FieldsPanel, { fields: extendedFields })] })] }));
 }
 const blockMenu = [
     {

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

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+export declare function BlockConfigButton({ target, children }: BlockConfigButton.Props): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace BlockConfigButton {
+    type Target = 'block' | 'message' | 'visual' | 'list';
+    type Props = PropsWithChildren & {
+        target: Target;
+    };
+}

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

@@ -0,0 +1,320 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlockConfigButton = BlockConfigButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const funnel_ui_1 = require("@nascentdigital/funnel-ui");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("motion/react");
+const react_2 = require("react");
+const rxjs_1 = require("rxjs");
+const core_1 = require("../../../core");
+const hooks_1 = require("../../hooks");
+// component
+function BlockConfigButton({ target, children = 'Configure' }) {
+    var _a;
+    // bind state + hooks
+    const [open, setOpen] = (0, react_2.useState)(false);
+    const anchorId = (0, react_2.useId)();
+    const panelLayoutPickerRef = (0, react_2.useRef)(null);
+    const listLayoutPickerRef = (0, react_2.useRef)(null);
+    const configuration = (0, core_1.useBlockConfiguration)();
+    const pageController = (0, hooks_1.usePageController)();
+    // skip if there's no config
+    if (!configuration) {
+        return null;
+    }
+    // determine popup
+    let size;
+    let placement;
+    let title;
+    let tip = undefined;
+    let content;
+    switch (target) {
+        case 'block': {
+            // helper
+            const onChangePanelLayout = async (e) => {
+                var _a;
+                // skip if there's no layout field (shouldn't happen)
+                if (!layoutField) {
+                    return;
+                }
+                // pick new layout
+                const { schema: layoutSchema, value: layoutData } = layoutField;
+                const selectedLayout = await ((_a = panelLayoutPickerRef.current) === null || _a === void 0 ? void 0 : _a.open({
+                    anchor: anchorId,
+                    anchorOffset: 4,
+                    placement: 'top',
+                    items: Object.entries(layoutSchema.options).map(([layout, option]) => ({
+                        id: layout,
+                        label: option.name
+                    })),
+                    selectedItem: layoutData === null || layoutData === void 0 ? void 0 : layoutData.value
+                }));
+                // update if something was picked
+                if (selectedLayout) {
+                    layoutField.value = funnel_core_1.Schema.EnumField.Value.toData(selectedLayout);
+                }
+            };
+            // set variables
+            size = 'sm';
+            placement = 'left';
+            title = 'Block Configuration';
+            // render content
+            const { scope, layoutField, blocksFields = [], desktopFields = [], mobileFields = [] } = configuration;
+            const settingsFields = scope === 'desktop'
+                ? desktopFields
+                : mobileFields;
+            const { options: slotOptions = [], currentIndex: slotIndex = 0 } = configuration.slotState;
+            content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("section", { className: "grid grid-cols-2 gap-x-l5 gap-y-l4", children: [blocksFields.length > 0 &&
+                                (0, jsx_runtime_1.jsx)(core_1.FieldErrorController, { children: blocksFields.map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { className: "col-span-full", field: field, size: "xs" }, field.id)) }), layoutField && layoutField.schema.enum.length > 1 &&
+                                (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l2", children: [(0, jsx_runtime_1.jsx)(core_1.FieldHeader, { label: "Layout", size: "xs" }), (0, jsx_runtime_1.jsx)(core_1.Button, { anchorId: anchorId, variant: "secondary", size: "xs", iconLeft: "LayoutTemplate", onClick: onChangePanelLayout, children: "Change" })] }), slotOptions.length > 1 &&
+                                (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l2", children: [(0, jsx_runtime_1.jsx)(core_1.FieldHeader, { label: "Arrangement", size: "xs" }), slotOptions.length === 2
+                                            ?
+                                                (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "xs", iconLeft: "ArrowLeftRight", onClick: () => configuration === null || configuration === void 0 ? void 0 : configuration.gotToNextSlot(), children: "Swap" })
+                                            :
+                                                (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-l4", children: [(0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "xs", onClick: () => configuration === null || configuration === void 0 ? void 0 : configuration.gotToPreviousSlot(), children: (0, jsx_runtime_1.jsx)(core_1.Icon, { variant: "ArrowLeft", size: { size: 16, strokeWidth: 1, absoluteStrokeWidth: true } }) }), (0, jsx_runtime_1.jsxs)("span", { className: "label-xs", children: [slotIndex + 1, " of ", slotOptions.length] }), (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "xs", onClick: () => configuration === null || configuration === void 0 ? void 0 : configuration.gotToNextSlot(), children: (0, jsx_runtime_1.jsx)(core_1.Icon, { variant: "ArrowRight", size: { size: 16, strokeWidth: 1, absoluteStrokeWidth: true } }) })] })] }), settingsFields.map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { className: "col-span-full", field: field, size: "xs" }, field.id))] }), (0, jsx_runtime_1.jsx)(core_1.QuickPicker, { ref: panelLayoutPickerRef, variant: "card", title: "Pick Block Layout", description: "Select an available layout for this block.", renderItem: (item) => renderPanelLayoutItem(item) })] }));
+            break;
+        }
+        case 'message':
+            size = 'xs';
+            placement = 'bottom-end';
+            title = 'Message Configuration';
+            tip = 'Medium and Large are relative to this block\'s text area, not the page width.';
+            content = Object.values(configuration.messageFields)
+                .filter(funnel_core_1.Value.isDefined)
+                .map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { field: field, size: "xs" }, field.id));
+            break;
+        case 'list': {
+            // pull out layout from listFields
+            const _b = configuration.listFields, { layout: layoutField } = _b, listFields = __rest(_b, ["layout"]);
+            // helpers
+            const onChangeLayout = async (e) => {
+                var _a;
+                // skip if there's no layout field (shouldn't happen)
+                const layoutSchema = layoutField === null || layoutField === void 0 ? void 0 : layoutField.schema;
+                if (!layoutField || !layoutSchema) {
+                    return;
+                }
+                // pick new layout
+                const { value: layoutData } = layoutField;
+                const selectedLayout = await ((_a = listLayoutPickerRef.current) === null || _a === void 0 ? void 0 : _a.open({
+                    anchor: anchorId,
+                    anchorOffset: 4,
+                    placement: 'top',
+                    items: Object.entries(layoutSchema.options).map(([layout, option]) => ({
+                        id: layout,
+                        label: option.name
+                    })),
+                    selectedItem: layoutData === null || layoutData === void 0 ? void 0 : layoutData.value
+                }));
+                // update if something was picked
+                if (selectedLayout) {
+                    layoutField.value = funnel_core_1.Schema.EnumField.Value.toData(selectedLayout);
+                }
+            };
+            // set variables
+            size = 'xs';
+            placement = 'bottom-end';
+            title = 'List Configuration';
+            // render content
+            content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l4", children: [(0, jsx_runtime_1.jsx)(core_1.Button, { anchorId: anchorId, variant: "secondary", size: "xs", iconLeft: "LayoutTemplate", onClick: onChangeLayout, children: "Change" }), Object.values(listFields)
+                                .filter(funnel_core_1.Value.isDefined)
+                                .map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { field: field, size: "xs" }, field.id))] }), (0, jsx_runtime_1.jsx)(core_1.QuickPicker, { ref: listLayoutPickerRef, variant: "card", title: "Pick List Layout", description: "Select an available layout for this list.", renderItem: (item) => renderListLayoutItem(item) })] }));
+            break;
+        }
+        case 'visual': {
+            // set variables
+            size = 'xs';
+            placement = 'bottom-end';
+            title = 'Visual Configuration';
+            tip = 'Cropping changes how the image appears on your site, not your original file.';
+            // get fields
+            const { aspect: aspectField, anchor: anchorField, width: widthField, horizontalAlign: horizontalAlignField } = configuration.visualFields;
+            const { value } = (_a = configuration.getFieldData('visual')) !== null && _a !== void 0 ? _a : {};
+            const visual = funnel_core_1.Schema.AssetField.LinkedValue.Visual.filter(value)
+                ? value
+                : undefined;
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l9", children: [(0, jsx_runtime_1.jsxs)("section", { className: "flex flex-col gap-l4", children: [aspectField &&
+                                (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { field: aspectField, size: "xs" }), anchorField
+                                ? (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { field: anchorField, size: "xs" })
+                                :
+                                    (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(core_1.FieldHeader, { label: "Anchor", size: "xs" }), (0, jsx_runtime_1.jsx)("p", { className: "label-xs text-content-secondary text-pretty", children: "Your current image size and aspect ratio don't require and anchor (there's no cropping)." })] })] }), visual && renderVisual({
+                        configuration,
+                        visual,
+                        aspectField: aspectField,
+                        anchorField: anchorField
+                    })] }));
+            break;
+        }
+        default:
+            throw new funnel_core_1.NotImplementedError();
+    }
+    // helpers
+    const onSave = async () => {
+        // try to save
+        configuration.save();
+        // wait for page to save
+        await (0, rxjs_1.firstValueFrom)(pageController.saved$);
+        // re-sync config
+        configuration.reset();
+        // close
+        setOpen(false);
+    };
+    const onClosed = () => {
+        // reset configuration (drops changes)
+        configuration.reset();
+    };
+    // render
+    return ((0, jsx_runtime_1.jsx)(core_1.MiniEditor, { title: title, size: size, anchor: (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "xs", onClick: () => setOpen(true), children: children }), anchorOffset: 4, placement: placement, open: open, onSave: onSave, disableSave: !configuration.modified, onClose: () => setOpen(false), onClosed: onClosed, customActions: (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "xs", iconLeft: configuration.scope === 'mobile'
+                ? 'Smartphone'
+                : 'Monitor', onClick: () => configuration.scope = configuration.scope === 'desktop' ? 'mobile' : 'desktop', children: configuration.scope === 'mobile' ? 'Mobile' : 'Desktop' }), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l4", children: [tip &&
+                    (0, jsx_runtime_1.jsx)(core_1.Note, { variant: "tip", size: size, children: (0, jsx_runtime_1.jsx)(funnel_ui_1.Markup, { markdown: `**Tip:** ${tip}` }) }), content] }) }));
+}
+function renderPanelLayoutItem(item) {
+    const panel = (className = 'flex-1') => ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('bg-surface-placeholder rounded-[2px]', className) }));
+    const panelPaddedX = 'px-l4';
+    const panelPaddedY = 'py-l4';
+    const panelPadded = (0, classnames_1.default)(panelPaddedX, panelPaddedY);
+    const panelGap = 'gap-l1';
+    const nestedPanel = (config = {}) => {
+        // unpack config
+        const { panelClassName, nestedPanelClassName, multipleItems = false } = config;
+        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex h-full bg-surface-placeholder rounded-[2px]', panelClassName, panelGap, { 'p-l2': multipleItems }), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('flex-1 bg-surface-placeholder-raised rounded-[2px]', nestedPanelClassName, { 'm-l2': !multipleItems }) }), multipleItems &&
+                    (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('flex-1 bg-surface-placeholder-raised rounded-[2px]', nestedPanelClassName) })] }));
+    };
+    switch (item.id) {
+        case 'solo':
+            return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('size-full', panelPadded), children: panel('size-full') }));
+        case 'stack.v':
+            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex flex-col h-full", panelPadded, panelGap), children: [panel(), panel()] }));
+        case 'stack.h':
+            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex h-full", panelPadded, panelGap), children: [panel(), panel()] }));
+        case 'brick.v':
+            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex flex-col h-full", panelPadded, panelGap), children: [panel(), panel(), panel()] }));
+        case 'brick.t':
+            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex flex-col h-full", panelPadded, panelGap), children: [panel('flex-1 w-full h-[20px]'), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex flex-1', panelGap), children: [panel(), panel()] })] }));
+        case 'brick.r':
+            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex h-full', panelPadded, panelGap), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex h-full flex-1 flex-col', panelGap), children: [panel(), panel()] }), panel('h-full w-[30px]')] }));
+        case 'brick.b':
+            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex flex-col h-full", panelPadded, panelGap), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex flex-1', panelGap), children: [panel(), panel()] }), panel('flex-1 w-full h-[20px]')] }));
+        case 'brick.l':
+            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex h-full', panelPadded, panelGap), children: [panel('h-full w-[30px]'), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex h-full flex-1 flex-col', panelGap), children: [panel(), panel()] })] }));
+        case 'nested':
+            return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('size-full', panelPadded), children: nestedPanel() }));
+        case 'nested.v':
+            return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('size-full', panelPadded), children: nestedPanel({ panelClassName: 'flex-col', multipleItems: true }) }));
+        case 'nested.h':
+            return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('size-full', panelPadded), children: nestedPanel({ multipleItems: true }) }));
+        case 'nested.t':
+            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex h-full flex-col", panelPadded, panelGap), children: [nestedPanel({ panelClassName: 'flex-1' }), panel()] }));
+        case 'nested.r':
+            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex h-full", panelPadded, panelGap), children: [panel(), nestedPanel({ panelClassName: 'flex-1' })] }));
+        case 'nested.b':
+            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex h-full flex-col", panelPadded, panelGap), children: [panel(), nestedPanel({ panelClassName: 'flex-1' })] }));
+        case 'nested.l':
+            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex h-full", panelPadded, panelGap), children: [nestedPanel({ panelClassName: 'flex-1' }), panel()] }));
+        default:
+            return ((0, jsx_runtime_1.jsx)("div", { children: item.id }));
+    }
+}
+function renderListLayoutItem(item) {
+    // panel
+    const panel = (className = 'w-full') => ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('bg-surface-placeholder-raised rounded-[2px]', className) }));
+    // get content
+    const panelClassName = 'w-full h-full';
+    const panelPaddedX = 'px-10';
+    const panelPaddedY = 'py-10';
+    const panelPadded = (0, classnames_1.default)(panelPaddedX, panelPaddedY);
+    let content;
+    switch (item.id) {
+        case 'card':
+        case 'grid':
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPadded, 'grid grid-cols-3 auto-cols-fr gap-x-l3 gap-y-l2 '), children: [panel(), panel(), panel(), panel(), panel()] }));
+            break;
+        case 'flexWrap':
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPadded, 'flex flex-wrap justify-center items-center gap-l3'), children: [panel('w-12 h-12'), panel('w-12 h-12'), panel('w-12 h-12'), panel('w-12 h-12'), panel('w-12 h-12')] }));
+            break;
+        case 'verticalStack':
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPadded, 'grid grid-cols-1 auto-rows-fr gap-y-l2 '), children: [panel(), panel(), panel()] }));
+            break;
+        case 'horizontalStack':
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPadded, 'grid grid-rows-1 auto-cols-fr grid-flow-col gap-x-l3 '), children: [panel(), panel(), panel()] }));
+            break;
+        case 'masonry':
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPaddedX, 'grid grid-cols-3 grid-flow-col gap-x-l3 pt-10'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l2", children: [panel('h-l5'), panel('h-l6'), panel('h-l5')] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l2", children: [panel('h-22'), panel('h-l6')] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l2", children: [panel('h-l4'), panel('h-l7'), panel('h-l5')] })] }));
+            break;
+        case 'bento':
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPadded, 'grid auto-rows-auto auto-cols-auto gap-l3'), children: [panel('w-20 row-start-1 row-span-2 col-start-1'), panel('w-28 row-start-1 col-start-2'), panel('w-18 row-start-2 col-start-2')] }));
+            break;
+        case 'brick':
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPaddedX, 'grid grid-cols-2 gap-l3 pt-10'), children: [panel('h-12 row-start-1 col-span-full'), panel('h-12 row-start-2 col-start-1'), panel('h-12 row-start-2 col-start-2'), panel('h-12 row-start-3 col-span-full')] }));
+            break;
+        case 'brickFlipped':
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPaddedX, 'grid grid-cols-2 gap-l3 pt-10'), children: [panel('h-12 row-start-1 col-start-1'), panel('h-12 row-start-1 col-start-2'), panel('h-12 row-start-2 col-span-full'), panel('h-12 row-start-3 col-start-1'), panel('h-12 row-start-3 col-start-2')] }));
+            break;
+        case 'carousel':
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, 'flex flex-col gap-l2 pt-10 pb-l3'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex items-stretch gap-l3", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-8 bg-surface-placeholder rounded-r-[2px]" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface-placeholder-raised rounded-[2px]" }), (0, jsx_runtime_1.jsx)("div", { className: "w-8 bg-surface-placeholder rounded-l-[2px]" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center items-center gap-l1", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-4 h-4 bg-surface-placeholder-raised rounded-full" }), (0, jsx_runtime_1.jsx)("div", { className: "w-4 h-4 bg-surface-placeholder-raised rounded-full" }), (0, jsx_runtime_1.jsx)("div", { className: "w-4 h-4 bg-surface-placeholder-raised rounded-full" })] })] }));
+            break;
+        default:
+            content = ((0, jsx_runtime_1.jsx)("div", { children: item.id }));
+            break;
+    }
+    // render item in frame
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('w-full h-full flex justify-center items-center'), children: content }));
+}
+function renderVisual({ configuration, visual, aspectField, anchorField }) {
+    var _a, _b, _c;
+    // determine layout info
+    const { metadata, name, description } = visual;
+    const { dimensions: { width, height } } = metadata;
+    const isPortrait = width < height;
+    const aspect = (_b = (_a = aspectField === null || aspectField === void 0 ? void 0 : aspectField.value) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 'auto';
+    const anchor = (_c = anchorField === null || anchorField === void 0 ? void 0 : anchorField.value) === null || _c === void 0 ? void 0 : _c.value;
+    const anchorDirection = anchorField
+        ? anchorField.schema.isValidOption('left')
+            ? 'x'
+            : 'y'
+        : undefined;
+    // render
+    return ((0, jsx_runtime_1.jsx)("section", { className: (0, classnames_1.default)('w-full h-[210px]', 'flex flex-col justify-center items-center', 'bg-background rounded-xs'), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('relative bg-destructive', {
+                'h-full max-h-full w-auto': isPortrait,
+                'w-full': !isPortrait
+            }), children: [funnel_core_1.Schema.AssetField.LinkedValue.Image.filter(visual)
+                    ? renderImage({ configuration, visual })
+                    : renderVideo({ configuration, visual }), aspect !== 'auto' && anchor && anchorDirection &&
+                    (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('absolute inset-0 z-supersurface flex', {
+                            'flex-col': anchorDirection === 'y'
+                        }), children: (0, jsx_runtime_1.jsxs)(react_1.AnimatePresence, { mode: "popLayout", children: [anchor !== 'left' && anchor !== 'top' &&
+                                    (0, jsx_runtime_1.jsx)(react_1.motion.div, { className: "flex-1 bg-content-button-contrast/backdrop", layout: true, variants: core_1.Animate.Variants.fade, initial: "initial", animate: "animate", exit: "exit" }, "crop.start"), (0, jsx_runtime_1.jsx)(react_1.motion.div, { className: (0, classnames_1.default)('shrink-0 outline outline-1 outline-ix-primary', {
+                                        'h-full w-auto': anchorDirection === 'x',
+                                        'w-full h-auto': anchorDirection === 'y',
+                                        'aspect-square': aspect === 'square',
+                                        'aspect-phone': aspect === 'phone',
+                                        'aspect-tv': aspect === 'tv',
+                                        'aspect-widescreen': aspect === 'widescreen',
+                                        'aspect-cinema': aspect === 'cinema'
+                                    }), layout: true }, "visible"), anchor !== 'right' && anchor !== 'bottom' &&
+                                    (0, jsx_runtime_1.jsx)(react_1.motion.div, { className: "flex-1 bg-content-button-contrast/backdrop", layout: true, variants: core_1.Animate.Variants.fade, initial: "initial", animate: "animate", exit: "exit" }, "crop.end")] }) })] }) }));
+}
+function renderImage({ visual }) {
+    var _a;
+    return ((0, jsx_runtime_1.jsx)("img", { className: "max-w-full max-h-full", src: visual.url, alt: (_a = visual.description) !== null && _a !== void 0 ? _a : visual.name }));
+}
+function renderVideo({ visual }) {
+    return ((0, jsx_runtime_1.jsx)("video", { className: "max-w-full max-h-full", src: visual.url, autoPlay: true, muted: true, loop: true, playsInline: true }));
+}

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

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import { Block, PageSettings, Section, SectionBlock } from '../../../core';
+export declare function BlockConfigurationProvider({ item, children }: BlockConfigurationProvider.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace BlockConfigurationProvider {
+    type Props = PropsWithChildren & {
+        item?: Block | SectionBlock | Section | PageSettings;
+    };
+}

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlockConfigurationProvider = BlockConfigurationProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const core_1 = require("../../../core");
+// provider
+function BlockConfigurationProvider({ item, children }) {
+    // bind context
+    const context = (0, react_1.useMemo)(() => ({
+        configuration: item instanceof core_1.Block || item instanceof core_1.SectionBlock
+            ? item.getConfiguration()
+            : undefined
+    }), [item]);
+    // render
+    return ((0, jsx_runtime_1.jsx)(core_1.BlockConfigurationContext.Provider, { value: context, children: children }));
+}

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;
+    };
+}