@nascentdigital/funnel-editor 4.4.21 → 4.5.0

package/dist/core/components/interaction/Animate.d.ts

@@ -1,7 +1,8 @@
-import { Variants } from 'motion/react';
+import { Variants as MotionVariants } from 'motion/react';
 import { PropsWithChildren } from 'react';
 export declare function Animate({ className, present, layout, effect, children }: Animate.Props): import("react/jsx-runtime").JSX.Element | undefined;
 export declare namespace Animate {
+    const Variants: Readonly<Record<Animate.Effect, MotionVariants>>;
     type Props = PropsWithChildren & {
         className?: string;
         present?: boolean;
@@ -10,4 +11,3 @@ export declare namespace Animate {
     };
     type Effect = 'fade';
 }
-export declare const variants: Readonly<Record<Animate.Effect, Variants>>;

package/dist/core/components/interaction/Animate.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.variants = void 0;
 exports.Animate = Animate;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("motion/react");
@@ -11,13 +10,16 @@ function Animate({ className, present = false, layout = false, effect = 'fade',
         return undefined;
     }
     // render
-    return ((0, jsx_runtime_1.jsx)(react_1.motion.div, { className: className, variants: exports.variants[effect], initial: "initial", animate: "animate", exit: "exit", layout: layout, children: children }));
+    return ((0, jsx_runtime_1.jsx)(react_1.motion.div, { className: className, variants: Animate.Variants[effect], initial: "initial", animate: "animate", exit: "exit", layout: layout, children: children }));
 }
-// helpers
-exports.variants = {
-    fade: {
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        exit: { opacity: 0 }
-    }
-};
+// extension
+(function (Animate) {
+    // variants
+    Animate.Variants = {
+        fade: {
+            initial: { opacity: 0, transition: { when: 'beforeChildren' } },
+            animate: { opacity: 1, transition: { ease: "easeIn", when: 'beforeChildren' } },
+            exit: { opacity: 0, transition: { ease: "easeOut", when: 'afterChildren' } }
+        }
+    };
+})(Animate || (exports.Animate = Animate = {}));

package/dist/core/components/interaction/QuickPicker.d.ts

@@ -0,0 +1,23 @@
+import { RequiredBy } from '@nascentdigital/funnel-core';
+import { Popup } from './Popup';
+export declare const QuickPicker: import("react").ForwardRefExoticComponent<QuickPicker.Props & import("react").RefAttributes<QuickPicker.Ref<string, QuickPicker.Item<string>>>>;
+export declare namespace QuickPicker {
+    type Item<TId extends string = string> = {
+        id: TId;
+    };
+    type Props = {
+        title: string;
+        description?: string;
+    };
+    interface Ref<TId extends string, TItem extends Item<TId>> {
+        readonly isOpen: boolean;
+        open(args: CaptureArgs<TId, TItem>): Promise<TId | undefined>;
+        close(): void;
+    }
+    type CaptureArgs<TId extends string, TItem extends Item<TId>> = PopupProps & {
+        items: ReadonlyArray<TItem>;
+        selectedItem?: TId;
+    };
+}
+type PopupProps = RequiredBy<Omit<Popup.Props, 'className' | 'animation' | 'disableClickDismiss' | 'open' | 'onOpened' | 'onClose' | 'onClosed' | 'children'>, 'anchor' | 'placement'>;
+export {};

package/dist/core/components/interaction/QuickPicker.js

@@ -0,0 +1,95 @@
+"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.QuickPicker = void 0;
+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 Popup_1 = require("./Popup");
+// component
+exports.QuickPicker = (0, react_1.forwardRef)(function QuickPicker({ title, description }, ref) {
+    // bind state
+    const [opened, setOpened] = (0, react_1.useState)(false);
+    const [deferral, setDeferral] = (0, react_1.useState)();
+    const deferralRef = (0, react_1.useRef)(deferral);
+    deferralRef.current = deferral;
+    const [items, setItems] = (0, react_1.useState)([]);
+    const [selectedItem, setSelectedItem] = (0, react_1.useState)();
+    const [popupProps, setPopupProps] = (0, react_1.useState)();
+    // expose interface
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        get isOpen() {
+            const deferral = deferralRef.current;
+            return !!deferral && !deferral.isComplete;
+        },
+        open: async (_a) => {
+            var { items, selectedItem } = _a, popupProps = __rest(_a, ["items", "selectedItem"]);
+            // reset
+            setItems(items);
+            setSelectedItem(selectedItem);
+            setPopupProps(popupProps);
+            // create/set deferral
+            const deferral = new funnel_core_1.Deferral();
+            setDeferral(deferral);
+            // await result
+            const result = await deferral.promise;
+            // clear deferral
+            setDeferral(undefined);
+            // return deferral
+            return result;
+        },
+        close: () => { var _a; return (_a = deferralRef.current) === null || _a === void 0 ? void 0 : _a.resolve(undefined); }
+    }), []);
+    // helpers
+    const onPick = (e) => {
+        // stop propagation
+        e.preventDefault();
+        e.stopPropagation();
+        // resolve
+        deferral === null || deferral === void 0 ? void 0 : deferral.resolve(selectedItem);
+    };
+    const onClose = (e) => {
+        // stop propagation
+        if (e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        // ignore if already complete
+        if (deferral === null || deferral === void 0 ? void 0 : deferral.isComplete) {
+            return;
+        }
+        // complete
+        deferral === null || deferral === void 0 ? void 0 : deferral.resolve(undefined);
+    };
+    const onKeyDown = (e) => {
+        // handle keys
+        switch (e.key) {
+            case 'Enter':
+                onPick(e);
+                break;
+            case 'Escape':
+                onClose(e);
+                break;
+        }
+    };
+    // render
+    return ((0, jsx_runtime_1.jsxs)(Popup_1.Popup, Object.assign({}, (popupProps !== null && popupProps !== void 0 ? popupProps : {}), { className: (0, classnames_1.default)('glass-overlay w-[372px] flex flex-col gap-l8 p-l8 interpolate', 'border-t border-solid border-glass-stroke-l1 rounded-md', {
+            'opacity-none': !opened,
+            'opacity-full': opened
+        }), animation: "out", open: !!deferral, onOpened: () => setOpened(true), onClose: onClose, onClosed: () => setOpened(false), children: [(0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("h3", { className: "heading-sm text-content-primary", children: title }), description &&
+                        (0, jsx_runtime_1.jsx)("p", { className: "body-sm text-content-secondary", children: description })] }), (0, jsx_runtime_1.jsx)("section", { children: "Items" })] })));
+});

package/dist/core/components/interaction/Tabs.d.ts

@@ -0,0 +1,16 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { Icon } from '../visuals';
+export declare function Tabs<TId extends string>({ className, items, selectedItem, onSelect }: Tabs.Props<TId>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Tabs {
+    type Item<TId extends string = string> = {
+        id: TId;
+        label: string;
+        icon?: Icon.Variant;
+    };
+    type Props<TId extends string = string> = {
+        className?: string;
+        items: ReadonlyArray<Item<TId>>;
+        selectedItem: TId;
+        onSelect?: Callback<TId>;
+    };
+}

package/dist/core/components/interaction/Tabs.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tabs = Tabs;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const framer_motion_1 = require("framer-motion");
+const visuals_1 = require("../visuals");
+// component
+function Tabs({ className, items, selectedItem, onSelect = funnel_core_1.Fn.NoOp }) {
+    // render
+    return ((0, jsx_runtime_1.jsx)("nav", { className: (0, classnames_1.default)(className), children: (0, jsx_runtime_1.jsx)("ul", { className: "grid auto-cols-fr grid-flow-col items-center", children: items.map(item => (0, jsx_runtime_1.jsxs)("li", { className: (0, classnames_1.default)('group relative border-b border-solid border-content-tertiary cursor-pointer interpolate', {
+                    'pointer-events-none': item.id === selectedItem,
+                    'hover:border-content-secondary active:border-content-tertiary': item.id !== selectedItem
+                }), onClick: () => onSelect(item.id), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center items-center gap-l6", children: [item.icon &&
+                                (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: item.icon, size: "nav" }), (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('inline-block label-sm py-l6 interpolate', {
+                                    'text-content-primary': item.id === selectedItem,
+                                    'text-content-secondary group-hover:text-content-primary group-active:text-content-tertiary': item.id !== selectedItem
+                                }), children: item.label })] }), item.id === selectedItem &&
+                        (0, jsx_runtime_1.jsx)(framer_motion_1.motion.span, { id: "underline", layoutId: "underline", className: "absolute inset-x-0 -bottom-px block divider border-b-2 border-ix-primary -mb-px z-supersurface" })] }, item.id)) }) }));
+}

package/dist/core/components/interaction/index.d.ts

@@ -23,7 +23,9 @@ export * from './Picker';
 export * from './Popup';
 export * from './Profile';
 export * from './QuickInput';
+export * from './QuickPicker';
 export * from './SegmentedButton';
 export * from './Sortable';
+export * from './Tabs';
 export * from './Toggle';
 export * from './Touchable';

package/dist/core/components/interaction/index.js

@@ -39,7 +39,9 @@ __exportStar(require("./Picker"), exports);
 __exportStar(require("./Popup"), exports);
 __exportStar(require("./Profile"), exports);
 __exportStar(require("./QuickInput"), exports);
+__exportStar(require("./QuickPicker"), exports);
 __exportStar(require("./SegmentedButton"), exports);
 __exportStar(require("./Sortable"), exports);
+__exportStar(require("./Tabs"), exports);
 __exportStar(require("./Toggle"), exports);
 __exportStar(require("./Touchable"), exports);

package/dist/core/components/visuals/Icon.d.ts

@@ -6,7 +6,7 @@ export declare namespace Icon {
         size?: Size;
     };
     type Size = 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'nav' | 'card' | Sizing;
-    type Variant = 'Archive' | 'ArrowLeft' | 'Atom' | 'Blocks' | 'Bold' | 'Check' | 'ChevronDown' | 'ChevronRight' | 'ChevronUp' | 'Circle' | 'CircleAlert' | 'CircleCheck' | 'CircleCheckBig' | 'CirclePlus' | 'CircleQuestionMark' | 'CloudCheck' | 'CloudUpload' | 'CornerDownRight' | 'EllipsisVertical' | 'Eye' | 'EyeOff' | 'File' | 'FileDown' | 'FilePlusCorner' | 'FileSearchCorner' | 'Goal' | 'Globe' | 'GripVertical' | 'HatGlasses' | 'History' | 'Highlighter' | 'Image' | 'ImageDown' | 'Info' | 'Italic' | 'Layers' | 'LayoutTemplate' | 'Link' | 'Link2' | 'List' | 'ListChecks' | 'ListIndentDecrease' | 'ListIndentIncrease' | 'ListOrdered' | 'Lock' | 'LockOpen' | 'Mail' | 'MessageSquareQuote' | 'Minus' | 'MonitorCog' | 'Moon' | 'NotebookPen' | 'Pencil' | 'Pin' | 'Plus' | 'Redo' | 'RefreshCw' | 'RotateCcw' | 'RotateCw' | 'SearchCode' | 'Settings' | 'SquarePlay' | 'Star' | 'Strikethrough' | 'Subscript' | 'Sun' | 'Superscript' | 'TextAlignStart' | 'Trash' | 'TriangleAlert' | 'Trophy' | 'Underline' | 'Undo' | 'Upload' | 'UserRound' | 'X';
+    type Variant = 'Archive' | 'ArrowLeft' | 'ArrowLeftRight' | 'Atom' | 'Blocks' | 'Bold' | 'Check' | 'ChevronDown' | 'ChevronRight' | 'ChevronUp' | 'Circle' | 'CircleAlert' | 'CircleCheck' | 'CircleCheckBig' | 'CirclePlus' | 'CircleQuestionMark' | 'CloudCheck' | 'CloudUpload' | 'CornerDownRight' | 'EllipsisVertical' | 'Eye' | 'EyeOff' | 'File' | 'FileDown' | 'FilePlusCorner' | 'FileSearchCorner' | 'Goal' | 'Globe' | 'GripVertical' | 'HatGlasses' | 'History' | 'Highlighter' | 'Image' | 'ImageDown' | 'Info' | 'Italic' | 'Layers' | 'LayoutTemplate' | 'Link' | 'Link2' | 'List' | 'ListChecks' | 'ListIndentDecrease' | 'ListIndentIncrease' | 'ListOrdered' | 'Lock' | 'LockOpen' | 'Mail' | 'MessageSquareQuote' | 'Minus' | 'MonitorCog' | 'Moon' | 'NotebookPen' | 'Pencil' | 'Pin' | 'Plus' | 'Redo' | 'RefreshCw' | 'RotateCcw' | 'RotateCw' | 'SearchCode' | 'Settings' | 'SquarePlay' | 'Star' | 'Strikethrough' | 'Subscript' | 'Sun' | 'Superscript' | 'TextAlignStart' | 'Trash' | 'TriangleAlert' | 'Trophy' | 'Underline' | 'Undo' | 'Upload' | 'UserRound' | 'X';
     namespace Variant {
         function filter(value: any): value is Variant;
     }

package/dist/core/components/visuals/Icon.js

@@ -20,6 +20,7 @@ function Icon({ className, variant, size: sizing = 'md' }) {
         const values = [
             'Archive',
             'ArrowLeft',
+            'ArrowLeftRight',
             'Atom',
             'Blocks',
             'Bold',
@@ -111,6 +112,8 @@ function getIcon(variant) {
             return lucide_react_1.Archive;
         case 'ArrowLeft':
             return lucide_react_1.ArrowLeft;
+        case 'ArrowLeftRight':
+            return lucide_react_1.ArrowLeftRight;
         case 'Atom':
             return lucide_react_1.Atom;
         case 'Blocks':

package/dist/core/components/visuals/SkeletonLayout.js

@@ -27,17 +27,20 @@ function SkeletonLayout({ variant, layout }) {
 // helpers
 var Skeleton;
 (function (Skeleton) {
-    let Headline;
-    (function (Headline) {
-        Headline.md = 'h-8 bg-ix-primary rounded-xxs overflow-hidden';
-        Headline.sm = 'h-6 bg-ix-primary rounded-xxs overflow-hidden';
-    })(Headline = Skeleton.Headline || (Skeleton.Headline = {}));
-    let Caption;
-    (function (Caption) {
-        Caption.md = 'h-4 bg-draft/tint3 rounded-px overflow-hidden';
-        Caption.sm = 'h-4 bg-draft/tint3 rounded-px overflow-hidden';
-    })(Caption = Skeleton.Caption || (Skeleton.Caption = {}));
-    function Media({ className, aspect }) {
+    function HeadlinePart({ className, size }) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'bg-ix-primary rounded-xxs overflow-hidden', {
+                'h-6 ': size === 'sm',
+                'h-8': size === 'md'
+            }) }));
+    }
+    Skeleton.HeadlinePart = HeadlinePart;
+    function CaptionPart({ className, size }) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'h-4 bg-draft/tint3 rounded-px overflow-hidden', {
+                '': size === 'sm'
+            }) }));
+    }
+    Skeleton.CaptionPart = CaptionPart;
+    function MediaPart({ className, aspect }) {
         return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'flex justify-center items-center bg-draft/tint3 rounded-xxs overflow-hidden', {
                 'aspect-square': aspect === 'square' || aspect === 'auto',
                 'aspect-phone': aspect === 'phone',
@@ -50,7 +53,21 @@ var Skeleton;
                     absoluteStrokeWidth: false
                 } }) }));
     }
-    Skeleton.Media = Media;
+    Skeleton.MediaPart = MediaPart;
+    function IconPart({ className, size }) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'bg-draft/tint3 rounded-full overflow-hidden', {
+                'w-10 h-10': size === 'sm',
+                'w-14 h-14': size === 'md'
+            }) }));
+    }
+    Skeleton.IconPart = IconPart;
+    function LogoPart({ className, size }) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'bg-draft/tint3 rounded-px overflow-hidden', {
+                'w-14 h-6': size === 'sm',
+                'w-20 h-9': size === 'md'
+            }) }));
+    }
+    Skeleton.LogoPart = LogoPart;
 })(Skeleton || (Skeleton = {}));
 function renderLayout({ className, variant, layout }) {
     // TODO: render empty state if there's no layout
@@ -58,55 +75,57 @@ function renderLayout({ className, variant, layout }) {
         return null;
     }
     // render root layout
-    const { type, items, } = layout.root;
+    const { type, items } = layout.root;
     return ((0, jsx_runtime_1.jsx)("div", { className: getContainerClasses({ className, variant, siblingCount: 1, item: layout.root }), children: items.map((item, parentOffset) => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderItem({
                 className: (0, classnames_1.default)({
                     'flex-1': type === 'row' && variant !== 'mobile'
                 }),
                 variant,
                 parent: type,
+                parentNested: false,
                 siblingCount: items.length,
                 item,
                 itemPosition: new ItemPosition({
                     parent: type,
                     parentOffset,
-                    parentSize: items.length,
+                    parentSize: items.length
                 })
             }) }, `${item.type}.${parentOffset}`)) }));
 }
-function renderItem({ className, parent, siblingCount, variant, item, itemPosition }) {
+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)("div", { className: getContainerClasses({ className, siblingCount, variant, item }), children: item.items.map((item, parentOffset, items) => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderItem({
+            return ((0, jsx_runtime_1.jsx)("div", { className: getContainerClasses({ className, parent, siblingCount, variant, item }), children: item.items.map((item, parentOffset, items) => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderItem({
                         className: (0, classnames_1.default)({
                             'flex-1': itemType === 'row'
                         }),
                         variant,
                         parent: itemType,
+                        parentNested: true,
                         siblingCount: items.length,
                         item: item,
                         itemPosition: new ItemPosition({
                             parent: itemType,
                             parentOffset,
-                            parentSize: items.length,
+                            parentSize: items.length
                         })
                     }) }, `${item.type}.${parentOffset}`)) }));
         case 'message':
-            return renderMessage({ className, parent, siblingCount, variant, item, itemPosition });
+            return renderMessage({ className, parent, parentNested, siblingCount, variant, item, itemPosition });
         case 'visual':
-            return renderVisual({ className, parent, siblingCount, variant, item, itemPosition });
+            return renderVisual({ className, parent, parentNested, siblingCount, variant, item, itemPosition });
         case 'list':
-            return renderList({ className, parent, siblingCount, variant, item, itemPosition });
+            return renderList({ className, parent, parentNested, siblingCount, variant, item, itemPosition });
         default:
             console.error('[SkeletonLayout] no support for BlockLayout item', item);
             return null;
     }
 }
-function getContainerClasses({ className, variant, item }) {
+function getContainerClasses({ className, variant, parent, item }) {
     const { type, alignY } = item;
     // row style
     if (type === 'row' && variant !== 'mobile') {
@@ -120,7 +139,7 @@ function getContainerClasses({ className, variant, item }) {
             'grid-cols-[2fr,1fr]': item.ratio.desktop === '2/1',
             'grid-cols-[2fr,3fr]': item.ratio.desktop === '2/3',
             'grid-cols-[3fr,1fr]': item.ratio.desktop === '3/1',
-            'grid-cols-[3fr,2fr]': item.ratio.desktop === '3/2',
+            'grid-cols-[3fr,2fr]': item.ratio.desktop === '3/2'
         });
     }
     // or stack
@@ -147,24 +166,198 @@ function renderMessage(args) {
             'items-end': textAlign.desktop === 'right'
         });
     // render
-    return ((0, jsx_runtime_1.jsx)("div", { className: getPanelWrapClasses(args), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(messageClasses, getPanelClasses(Object.assign(Object.assign({}, args), { className: 'flex flex-col' }))), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('w-full mb-l2', Skeleton.Headline.md) }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('w-full mb-px', Skeleton.Caption.md) }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('w-full mb-px', Skeleton.Caption.md) }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('w-20', Skeleton.Caption.md) })] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: getPanelWrapClasses(args), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(messageClasses, getPanelClasses(Object.assign(Object.assign({}, args), { className: 'flex flex-col' }))), children: [(0, jsx_runtime_1.jsx)(Skeleton.HeadlinePart, { className: "w-full mb-l2", size: "md" }), (0, jsx_runtime_1.jsx)(Skeleton.CaptionPart, { className: "w-full mb-px", size: "md" }), (0, jsx_runtime_1.jsx)(Skeleton.CaptionPart, { className: "w-full mb-px", size: "md" }), (0, jsx_runtime_1.jsx)(Skeleton.CaptionPart, { className: "w-20", size: "md" })] }) }));
 }
 function renderVisual(args) {
     // resolve props
     const { variant, item: { aspectRatio }, parent } = args;
     const aspect = variant === 'mobile' ? aspectRatio.mobile : aspectRatio.desktop;
     // render
-    return ((0, jsx_runtime_1.jsx)("div", { className: getPanelWrapClasses(args), children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(getPanelClasses(Object.assign(Object.assign({}, args), { className: '' }))), children: (0, jsx_runtime_1.jsx)(Skeleton.Media, { className: "w-full", aspect: aspect }) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: getPanelWrapClasses(args), children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(getPanelClasses(Object.assign(Object.assign({}, args), { className: '' }))), children: (0, jsx_runtime_1.jsx)(Skeleton.MediaPart, { className: "w-full", aspect: aspect }) }) }));
 }
 function renderList(args) {
     // resolve props
-    const { item: { itemType } } = args;
-    const rows = 2;
-    // render
-    return ((0, jsx_runtime_1.jsx)("div", { className: getPanelWrapClasses(args), children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(getPanelClasses(Object.assign(Object.assign({}, args), { className: 'flex flex-col gap-l2' }))), children: funnel_core_1.ArrayUtils.series(rows, 1).map(row => (0, jsx_runtime_1.jsxs)("div", { className: "w-full flex flex-row", children: [itemType === 'message+visual' &&
-                        (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Skeleton.Media, { className: "w-full", aspect: "square" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('w-24 mb-l1', Skeleton.Headline.sm) }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('w-full mb-px', Skeleton.Caption.sm) }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('w-40', Skeleton.Caption.sm) })] })] }, `list.${row}`)) }) }));
+    const { variant, parent, parentNested, item: { layout: layoutRaw, itemType, itemCount: itemCountRaw } } = args;
+    const layout = variant === 'mobile'
+        ? layoutRaw.mobile
+        : layoutRaw.desktop;
+    // render a grid
+    if (layout === 'grid') {
+        return renderGrid(args);
+    }
+    // or render row/column
+    const itemCount = variant === 'mobile'
+        ? itemCountRaw.mobile
+        : itemCountRaw.desktop;
+    return ((0, jsx_runtime_1.jsx)("div", { className: getPanelWrapClasses(args), children: (0, jsx_runtime_1.jsx)("div", { className: 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}`)) }) }));
+}
+function getListPanelClasses(args) {
+    // resolve props
+    const { variant, item: { layout: layoutRaw } } = args;
+    const layout = variant === 'mobile'
+        ? layoutRaw.mobile
+        : layoutRaw.desktop;
+    // determine list classes
+    let listClasses = '';
+    switch (layout) {
+        case 'row':
+            listClasses = 'grid grid-rows-1 auto-cols-auto grid-flow-col gap-l2';
+            break;
+        case 'column':
+            listClasses = 'flex flex-col gap-l2';
+            break;
+    }
+    // return completed classes
+    return getPanelClasses(Object.assign(Object.assign({}, args), { className: listClasses }));
+}
+function renderGrid(args) {
+    // determine props
+    const { variant, parent, parentNested, item: { itemType, itemCount: itemCountRaw } } = args;
+    const itemCount = variant === 'mobile'
+        ? itemCountRaw.mobile
+        : itemCountRaw.desktop;
+    const { panelClassName, panelItemClassName } = getGridPanelClasses(args);
+    // render grid (really a flexbox layout with controlled item widths)
+    return ((0, jsx_runtime_1.jsx)("div", { className: getPanelWrapClasses(args), children: (0, jsx_runtime_1.jsx)("div", { className: panelClassName, children: funnel_core_1.ArrayUtils.series(itemCount, 1).map(row => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderListItem({
+                    className: panelItemClassName,
+                    variant,
+                    parent,
+                    parentNested,
+                    layout: 'grid',
+                    itemType, index: row,
+                    count: itemCount
+                }) }, `list.${row}`)) }) }));
+}
+function getGridPanelClasses(args) {
+    // resolve props
+    const { variant, parent, parentNested, item: { itemType, itemCount: itemCountRaw, itemAlign: itemAlignRaw } } = args;
+    const itemAlign = variant === 'mobile'
+        ? itemAlignRaw.mobile
+        : itemAlignRaw.desktop;
+    // determine list classes
+    const panelClasses = (0, classnames_1.default)('flex flex-wrap gap-l2', {
+        'justify-center': itemAlign === 'center',
+        'justify-end': itemAlign === 'end'
+    });
+    let panelItemClasses = '';
+    switch (itemType) {
+        case 'message':
+        case 'message+visual':
+            panelItemClasses = (0, classnames_1.default)({
+                'w-full': variant === 'mobile' || (variant === 'desktop' && (parent === 'row' || parentNested)),
+                'w-[50px]': variant === 'desktop' && parent !== 'row' && !parentNested
+            });
+            break;
+        case 'visual':
+            panelItemClasses = (0, classnames_1.default)({
+                '': variant === 'mobile' || (variant === 'desktop' && (parent === 'row' || parentNested)),
+                'flex-1': variant === 'desktop' && parent !== 'row' && !parentNested
+            });
+            break;
+        case 'icon':
+            panelItemClasses = (0, classnames_1.default)({});
+            break;
+        case 'logo':
+            panelItemClasses = (0, classnames_1.default)({
+                '': variant === 'desktop',
+                '': variant === 'mobile'
+            });
+            break;
+    }
+    // return completed classes
+    return {
+        panelClassName: getPanelClasses(Object.assign(Object.assign({}, args), { className: panelClasses })),
+        panelItemClassName: panelItemClasses
+    };
+}
+function renderListItem({ className, variant, parent, parentNested, layout, itemType, index, count }) {
+    let itemClassName = '';
+    switch (itemType) {
+        case 'message':
+        case 'message+visual':
+            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'flex flex-row p-3 bg-background rounded-xxs'), children: [itemType === 'message+visual' &&
+                        (0, jsx_runtime_1.jsx)("div", { className: "flex justify-center items-center", children: (0, jsx_runtime_1.jsx)("div", { className: "bg-content-tertiary rounded-full w-4 h-4" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex flex-col", children: [(0, jsx_runtime_1.jsx)(Skeleton.HeadlinePart, { className: "w-11/12 mb-l1", size: "sm" }), (0, jsx_runtime_1.jsx)(Skeleton.CaptionPart, { className: "w-full mb-px", size: "sm" }), (0, jsx_runtime_1.jsx)(Skeleton.CaptionPart, { className: "w-8/12", size: "sm" })] })] }));
+        case 'visual': {
+            // determine aspect
+            let aspect;
+            switch (layout) {
+                case 'column':
+                    aspect = parent === 'row' || parentNested
+                        ? 'widescreen'
+                        : variant === 'mobile'
+                            ? 'widescreen'
+                            : 'cinema';
+                    break;
+                case 'row':
+                    aspect = parent === 'row' || parentNested
+                        ? 'square'
+                        : 'widescreen';
+                    break;
+                case 'grid': {
+                    // aspect for mobile/nested
+                    if (variant === 'mobile' || parent === 'row' || parentNested) {
+                        itemClassName = 'w-full';
+                        aspect = count === 1
+                            ? 'square'
+                            : count <= 3
+                                ? 'tv'
+                                : 'widescreen';
+                    }
+                    // adjust aspect based on layout (if it's a grid)
+                    else if (layout === 'grid') {
+                        // set base class
+                        itemClassName = 'min-w-[50px]';
+                        // override base + pick aspect
+                        switch (count) {
+                            case 1:
+                                aspect = 'widescreen';
+                                break;
+                            case 2:
+                                aspect = 'widescreen';
+                                break;
+                            case 3:
+                                itemClassName = index === 1
+                                    ? 'min-w-full'
+                                    : 'min-w-[50px]';
+                                aspect = index === 1
+                                    ? 'cinema'
+                                    : 'tv';
+                                break;
+                            case 4:
+                                aspect = 'tv';
+                                break;
+                            case 5:
+                                itemClassName = index === 3
+                                    ? 'min-w-full'
+                                    : 'min-w-[50px]';
+                                aspect = index === 3
+                                    ? 'cinema'
+                                    : 'tv';
+                                break;
+                            default:
+                                aspect = 'widescreen';
+                                break;
+                        }
+                    }
+                    // otherwise standard
+                    else {
+                        aspect = 'widescreen';
+                    }
+                    break;
+                }
+            }
+            // create visual
+            return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, itemClassName), children: (0, jsx_runtime_1.jsx)(Skeleton.MediaPart, { aspect: aspect }) }));
+        }
+        case 'icon':
+            return ((0, jsx_runtime_1.jsx)(Skeleton.IconPart, { className: (0, classnames_1.default)(className, itemClassName), size: variant === 'mobile' ? 'md' : 'sm' }));
+        case 'logo':
+            return ((0, jsx_runtime_1.jsx)(Skeleton.LogoPart, { className: (0, classnames_1.default)(className, itemClassName), size: variant === 'mobile' ? 'md' : 'sm' }));
+        default:
+            return null;
+    }
 }
-function getPanelWrapClasses({ className, variant, parent, item: { mobileOrder, alignY, fullBleed }, itemPosition }) {
+function getPanelWrapClasses({ className, variant, parent, parentNested, item: { mobileOrder, alignY, fullBleed }, itemPosition }) {
     return variant === 'mobile'
         ? (0, classnames_1.default)(className, 'w-full flex flex-col', {
             'justify-start': alignY === 'start',
@@ -178,18 +371,18 @@ function getPanelWrapClasses({ className, variant, parent, item: { mobileOrder,
             'items-start': alignY === 'start',
             'items-center': alignY === 'center',
             'items-end': alignY === 'end',
-            'px-l4': parent !== 'row' && !fullBleed.desktop,
+            'px-l4': parent !== 'row' && !fullBleed.desktop && !parentNested,
             '-ml-l4': itemPosition.left && fullBleed.desktop,
             '-mr-l4': itemPosition.right && fullBleed.desktop
         });
 }
-function getPanelClasses({ className, variant, parent, item: { type, alignX, alignY, size } }) {
+function getPanelClasses({ className, variant, parent, parentNested, item: { alignX, size } }) {
     // force full width for mobile
     if (variant === 'mobile') {
         return (0, classnames_1.default)(className);
     }
     // or size for desktop
-    switch (size) {
+    switch (parent === 'row' || parentNested ? 'full' : size) {
         case 'xs':
             return (0, classnames_1.default)(className, 'col-span-4', {
                 'col-start-1': alignX === 'start',