@nascentdigital/funnel-editor 4.5.3 → 4.5.4

package/dist/core/components/fields/richtext/Theme.d.ts

@@ -1,6 +1,5 @@
 import { Schema } from '@nascentdigital/funnel-core';
 import { EditorThemeClasses } from 'lexical';
-import { RichTextEditor } from '../RichTextEditor';
 export declare const listClassname: string;
 export declare const listItemClassname: string;
-export declare function getTheme(variant: RichTextEditor.Variant, options: Schema.RichTextField.Capabilities.Options): EditorThemeClasses;
+export declare function getTheme(variant: Schema.RichTextField.Semantics, options: Schema.RichTextField.Capabilities.Options): EditorThemeClasses;

package/dist/core/components/fields/richtext/Theme.js

@@ -24,8 +24,8 @@ function getTheme(variant, options) {
         },
         // text
         paragraph: (0, classnames_1.default)('block min-h-body-sm last:mb-0', {
-            'mb-l5': variant === 'area',
-            'mb-l8': variant === 'editor',
+            'mb-l5': variant === 'area' || variant === 'mini-editor',
+            'mb-l8': variant === 'full-editor',
         }),
         quote: 'block pl-l6 mb-l8 last:mb-0 border-l-3 border-solid border-border-l1',
         text: {

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

@@ -26,9 +26,9 @@ exports.Button = (0, react_1.forwardRef)(function Button(_a, ref) {
     var { className, variant = 'primary', size = 'md', iconLeft, iconRight, loading = false, disabled = false, children } = _a, props = __rest(_a, ["className", "variant", "size", "iconLeft", "iconRight", "loading", "disabled", "children"]);
     // render
     return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ ref: ref, className: (0, classnames_1.default)(className, getButtonClassnames({ variant, size, loading, disabled })), type: "button", disabled: disabled || loading }, props, { children: [loading &&
-                (0, jsx_runtime_1.jsx)(Loader_1.Loader, { size: "sm" }), iconLeft && !loading && size !== 'xs' &&
-                (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: iconLeft, size: size === 'md' ? 'md' : 'sm' }), children, iconRight && size !== 'xs' &&
-                (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: iconRight, size: size === 'md' ? 'md' : 'sm' })] })));
+                (0, jsx_runtime_1.jsx)(Loader_1.Loader, { size: "sm" }), iconLeft && !loading &&
+                (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: iconLeft, size: size }), children, iconRight &&
+                (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: iconRight, size: size })] })));
 });
 function getButtonClassnames({ variant, size, loading, disabled }) {
     return (0, classnames_1.default)('button', {

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

@@ -1,11 +1,13 @@
 import { Callback, Transform } from '@nascentdigital/funnel-core';
 import { ReactNode } from 'react';
+import { FieldSize } from '../fields';
 import { Icon } from '../visuals';
-export declare function Combobox<TOptionId extends string>({ id: externalId, className, maxRows, rowHeight, disabled, options, noSelectionText, selectedOption: selectedOptionId, onSelect, renderSelection: renderSelectionRaw, renderOption, }: Combobox.Props<TOptionId>): import("react/jsx-runtime").JSX.Element;
+export declare function Combobox<TOptionId extends string>({ id: externalId, className, size, maxRows, rowHeight: rowHeightRaw, disabled, options, noSelectionText, selectedOption: selectedOptionId, onSelect, renderSelection: renderSelectionRaw, renderOption, }: Combobox.Props<TOptionId>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Combobox {
     type Props<TOptionId extends string> = {
         id?: string;
         className?: string;
+        size?: FieldSize;
         maxRows?: number;
         rowHeight?: number;
         disabled?: boolean;
@@ -16,6 +18,10 @@ export declare namespace Combobox {
         renderSelection?: Transform<Option<TOptionId> | undefined, ReactNode>;
         renderOption?: Transform<RenderOptionArgs<TOptionId>, ReactNode>;
     };
+    type RenderSelectionArgs<TOptionId extends string> = {
+        option?: Option<TOptionId>;
+        size: FieldSize;
+    };
     type Option<TOptionId extends string = string> = Option.Standard<TOptionId> | Option.WithIcon<TOptionId>;
     namespace Option {
         type Standard<TOptionId extends string> = {
@@ -30,6 +36,7 @@ export declare namespace Combobox {
     type RenderOptionArgs<TOptionId extends string = string> = {
         option: Option<TOptionId>;
         selected: boolean;
+        size: FieldSize;
     };
     interface Service {
     }

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

@@ -12,7 +12,7 @@ const react_1 = require("react");
 const visuals_1 = require("../visuals");
 const Popup_1 = require("./Popup");
 // component
-function Combobox({ id: externalId, className, maxRows = 6, rowHeight = 36, disabled = false, options, noSelectionText = 'Make a selection', selectedOption: selectedOptionId, onSelect = funnel_core_1.Fn.NoOp, renderSelection: renderSelectionRaw, renderOption = onRenderOption, }) {
+function Combobox({ id: externalId, className, size = 'md', maxRows = 6, rowHeight: rowHeightRaw, disabled = false, options, noSelectionText = 'Make a selection', selectedOption: selectedOptionId, onSelect = funnel_core_1.Fn.NoOp, renderSelection: renderSelectionRaw, renderOption = onRenderOption, }) {
     // bind state
     const [open, setOpen] = (0, react_1.useState)(false);
     const buttonRef = (0, react_1.useRef)(null);
@@ -24,7 +24,19 @@ function Combobox({ id: externalId, className, maxRows = 6, rowHeight = 36, disa
         && options.find(option => option.id === selectedOptionId);
     const renderSelection = (0, react_1.useMemo)(() => renderSelectionRaw
         ? renderSelectionRaw :
-        (option) => onRenderSelection(option, noSelectionText), [renderSelectionRaw, noSelectionText]);
+        (option) => onRenderSelection({ option, size }, noSelectionText), [renderSelectionRaw, size, noSelectionText]);
+    const rowHeight = rowHeightRaw
+        ? rowHeightRaw
+        : size === 'md'
+            ? 36
+            : size === 'sm'
+                ? 32
+                : 24;
+    const rowPaddingY = size === 'md'
+        ? 8
+        : size === 'sm'
+            ? 6
+            : 3;
     // helpers
     const onOpen = (e) => {
         // stop propagation
@@ -47,21 +59,30 @@ function Combobox({ id: externalId, className, maxRows = 6, rowHeight = 36, disa
         setOpen(false);
     };
     // render
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { ref: buttonRef, id: id, className: (0, classnames_1.default)(className, 'min-w-[180px] h-40 flex items-center justify-between gap-l5 px-l5', 'bg-surface1 border border-solid border-border-l1 rounded-full select-none appearance-none', 'disabled:opacity-disabled', {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { ref: buttonRef, id: id, className: (0, classnames_1.default)(className, 'flex items-center justify-between gap-l5 px-l5', 'bg-surface1 border border-solid border-border-l1 rounded-full select-none appearance-none', 'disabled:opacity-disabled', {
+                    'min-w-[200px] h-40': size === 'md',
+                    'min-w-[180px] h-32': size === 'sm',
+                    'min-w-[120px] h-24': size === 'xs',
                     'pointer-events-none': open
-                }), type: "button", disabled: disabled, role: "combobox", "aria-expanded": open, "aria-controls": popupId, "aria-owns": popupId, onClick: onOpen, onKeyDown: client_1.OnKey.enter(onOpen), children: [renderSelection(selectedOption), (0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: "text-content-primary", variant: "ChevronDown" })] }), (0, jsx_runtime_1.jsx)(Popup_1.Popup, { open: open, anchor: button, anchorOffset: 2, placement: "bottom", onClose: onOptionsClose, children: (0, jsx_runtime_1.jsx)("div", { id: popupId, className: (0, classnames_1.default)('flex flex-col py-l4 bg-surface2 rounded-lg shadow-popup overflow-y-scroll'), style: {
+                }), type: "button", disabled: disabled, role: "combobox", "aria-expanded": open, "aria-controls": popupId, "aria-owns": popupId, onClick: onOpen, onKeyDown: client_1.OnKey.enter(onOpen), children: [renderSelection(selectedOption), (0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: "text-content-primary", variant: "ChevronDown" })] }), (0, jsx_runtime_1.jsx)(Popup_1.Popup, { open: open, anchor: button, anchorOffset: 2, placement: "bottom", onClose: onOptionsClose, children: (0, jsx_runtime_1.jsx)("div", { id: popupId, className: (0, classnames_1.default)('flex flex-col bg-surface2 shadow-popup overflow-y-scroll', {
+                        'py-l4 rounded-lg': size === 'md',
+                        'py-l3 rounded-md': size !== 'md'
+                    }), style: {
                         minWidth: button ? `${button.offsetWidth}px` : 'auto',
-                        maxHeight: maxRows * rowHeight + 16
+                        maxHeight: maxRows * rowHeight + (rowPaddingY * 2)
                     }, role: "listbox", children: options.map((option, index) => {
                         // render
                         const optionKey = getOptionId(id, option);
                         const selected = option.id === selectedOptionId;
-                        return ((0, jsx_runtime_1.jsx)("button", { id: optionKey, style: { height: `${rowHeight}px` }, role: "option", "aria-selected": selected, autoFocus: (index === 0 && !selected) || (index === 1 && options[0].id === selectedOptionId), disabled: selected, onClick: e => onOptionSelect(e, option), onKeyDown: client_1.OnKey.enter(e => onOptionSelect(e, option)), children: (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('h-full flex items-center justify-between gap-l4 px-l6 appearance-none select-none outline-none interpolate', {
+                        return ((0, jsx_runtime_1.jsx)("button", { id: optionKey, style: { height: `${rowHeight}px` }, role: "option", "aria-selected": selected, autoFocus: (index === 0 && !selected) || (index === 1 && options[0].id === selectedOptionId), disabled: selected, onClick: e => onOptionSelect(e, option), onKeyDown: client_1.OnKey.enter(e => onOptionSelect(e, option)), children: (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('h-full flex items-center justify-between appearance-none select-none outline-none interpolate', {
+                                    'gap-l4 px-l6': size === 'md',
+                                    'gap-l3 px-l5': size === 'sm',
+                                    'gap-l2 px-l4': size === 'xs',
                                     'text-content-link-highlight': selected,
                                     'text-content-primary hover:bg-ix-util-hover/tint1 active:bg-ix-util-press/tint2': !selected && !disabled,
                                     'focus-visible:bg-interactive focus-visible:border-border-l1': !selected && !disabled,
                                     'text-ix-disabled-content': disabled
-                                }), children: renderOption({ option, selected }) }) }, optionKey));
+                                }), children: renderOption({ option, selected, size }) }) }, optionKey));
                     }) }) })] }));
 }
 // extension
@@ -79,16 +100,22 @@ function Combobox({ id: externalId, className, maxRows = 6, rowHeight = 36, disa
 function getOptionId(comboboxId, option) {
     return `${comboboxId}::option::${option.id}`;
 }
-function onRenderSelection(option, noSelectionText) {
+function onRenderSelection({ option, size }, noSelectionText) {
     var _a;
-    return ((0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('inline-block body-sm', {
+    return ((0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('inline-block', {
+            'body-sm': size === 'md',
+            'label-sm': size === 'sm',
+            'label-xs': size === 'xs',
             'text-content-primary': !!option,
             'text-ix-disabled-content': !option
         }), children: (_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : noSelectionText }));
 }
-function onRenderOption({ option, selected }) {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('inline-block label-md', {
+function onRenderOption({ option, selected, size }) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('inline-block', {
+                    'label-md': size === 'md',
+                    'label-sm': size === 'sm',
+                    'label-xs': size === 'xs',
                     'label-strong': selected
                 }), children: option.label }), selected &&
-                (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: "Check" })] }));
+                (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: "Check", size: size })] }));
 }

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

@@ -3,7 +3,7 @@ import { Icon } from '../visuals';
 export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLButtonElement>, "children"> & {
     variant?: IconButton.Variant;
     icon: Icon.Variant;
-    size?: Extract<Icon.Size, "md" | "sm" | "xs">;
+    size?: Extract<Icon.Size, "md" | "sm" | "xs" | "xxs">;
     active?: boolean;
     disabled?: boolean;
 } & import("react").RefAttributes<HTMLButtonElement>>;
@@ -11,7 +11,7 @@ export declare namespace IconButton {
     type Props = Omit<HTMLAttributes<HTMLButtonElement>, 'children'> & {
         variant?: Variant;
         icon: Icon.Variant;
-        size?: Extract<Icon.Size, 'md' | 'sm' | 'xs'>;
+        size?: Extract<Icon.Size, 'md' | 'sm' | 'xs' | 'xxs'>;
         active?: boolean;
         disabled?: boolean;
     };

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

@@ -36,6 +36,7 @@ function getIconButtonClassnames({ variant, size, active, disabled }) {
         'iconbutton-disabled': disabled,
         'iconbutton-md': size === 'md',
         'iconbutton-sm': size === 'sm',
-        'iconbutton-xs': size === 'xs'
+        'iconbutton-xs': size === 'xs',
+        'iconbutton-xxs': size === 'xxs'
     });
 }

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

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { Popup } from './Popup';
+export declare function QuickEditor({ className, title, tip, size, open, onClose, children, ...props }: QuickEditor.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace QuickEditor {
+    type Props = Popup.Props & {
+        title: ReactNode;
+        tip?: string;
+        size?: Size;
+    };
+    type Size = 'md' | 'sm';
+}

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

@@ -0,0 +1,33 @@
+"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.QuickEditor = QuickEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_ui_1 = require("@nascentdigital/funnel-ui");
+const classnames_1 = __importDefault(require("classnames"));
+const feedback_1 = require("../feedback");
+const IconButton_1 = require("./IconButton");
+const Popup_1 = require("./Popup");
+// component
+function QuickEditor(_a) {
+    var { className, title, tip, size = 'md', open = false, onClose, children } = _a, props = __rest(_a, ["className", "title", "tip", "size", "open", "onClose", "children"]);
+    // render
+    return ((0, jsx_runtime_1.jsxs)(Popup_1.Popup, Object.assign({}, props, { className: (0, classnames_1.default)(className, 'flex flex-col', 'bg-surface1 border-solid border-border-l1 shadow-miniEditor', 'border border-solid border-border-l1 rounded-md overflow-hidden', {
+            'w-[320px]': size === 'md',
+            'w-[288px]': size === 'sm'
+        }), open: open, onClose: onClose, children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-content-primary flex justify-between items-center gap-l8 px-l8 pt-l8 pb-l4", children: [(0, jsx_runtime_1.jsx)("h2", { className: "heading-sm text-pretty", children: title }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { className: "shrink-0", icon: "X", size: "xs", onClick: onClose })] }), tip &&
+                (0, jsx_runtime_1.jsx)(feedback_1.Note, { className: "mt-l2 mb-l4 mx-l8", variant: "tip", size: size === 'md' ? 'sm' : 'xs', children: (0, jsx_runtime_1.jsx)(funnel_ui_1.Markup, { markdown: `**Tip:** ${tip}` }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 px-l8 pt-l4 pb-l8 overflow-y-scroll", children: children })] })));
+}

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

@@ -140,7 +140,7 @@ function renderInput({ field, onKeyDown }) {
     const { schema } = field;
     switch (schema.type) {
         case 'text':
-            return ((0, jsx_runtime_1.jsx)(TextField_1.TextField, { className: "flex-1", field: field, variant: "minimal", small: true, autoFocus: true, onKeyDown: onKeyDown }));
+            return ((0, jsx_runtime_1.jsx)(TextField_1.TextField, { className: "flex-1", field: field, variant: "minimal", size: "sm", autoFocus: true, onKeyDown: onKeyDown }));
         case 'richtext':
             return ((0, jsx_runtime_1.jsx)(fields_1.RichTextField, { className: "flex-1", field: field, minimal: true, autoFocus: true }));
         default:

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

@@ -88,12 +88,14 @@ exports.QuickPicker = (0, react_1.forwardRef)(function QuickPicker({ variant, ti
         }
     };
     // 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-[420px] max-w-full flex flex-col gap-l8 pt-l8 interpolate', 'border border-solid border-glass-stroke-l1/tint5 rounded-md', {
+    return ((0, jsx_runtime_1.jsxs)(Popup_1.Popup, Object.assign({}, (popupProps !== null && popupProps !== void 0 ? popupProps : {}), { className: (0, classnames_1.default)('glass-overlay max-w-[380px] flex flex-col gap-l8 pt-l8 interpolate', 'border border-solid border-glass-stroke-l1/tint5 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", { className: "px-l8", 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", { className: (0, classnames_1.default)({
-                    'flex flex-wrap items-center gap-l5 max-h-[240px] px-l8 pb-l8 overflow-y-scroll': variant === 'card'
+                    'flex flex-wrap gap-l5 items-center px-l8 pb-l8 overflow-y-scroll': variant === 'card',
+                    'w-[288px]': variant === 'card' && items.length < 4,
+                    'w-[372px] max-h-[213px]': variant === 'card' && items.length >= 4
                 }), children: items.map(item => renderCard({
                     item,
                     content: renderItem(item),
@@ -102,7 +104,7 @@ exports.QuickPicker = (0, react_1.forwardRef)(function QuickPicker({ variant, ti
                 })) })] })));
 });
 function renderCard({ item, content, selected, onSelect }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('FieldCard w-[116px] h-[88px]', {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('FieldCard w-[72px] h-[55px]', {
             'FieldCard-selected': selected
         }), onClick: () => onSelect(item.id), children: content }, item.id));
 }

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

@@ -1,10 +1,12 @@
 import { Callback } from '@nascentdigital/funnel-core';
+import { FieldSize } from '../fields';
 import { Icon } from '../visuals';
-export declare function SegmentedButton<TOption extends SegmentedButton.OptionType>({ className, options, selected, allowEmpty, multiSelect, autoFocus, disabled, onSelectionChange, onBlur }: SegmentedButton.Props<TOption>): import("react/jsx-runtime").JSX.Element;
+export declare function SegmentedButton<TOption extends SegmentedButton.OptionType>({ className, size, options, selected, allowEmpty, multiSelect, autoFocus, disabled, onSelectionChange, onBlur }: SegmentedButton.Props<TOption>): import("react/jsx-runtime").JSX.Element;
 export declare namespace SegmentedButton {
     type OptionType = string | number;
     type Props<TOption extends OptionType> = {
         className?: string;
+        size?: FieldSize;
         options: ReadonlyArray<Option<TOption>>;
         selected?: TOption | ReadonlyArray<TOption>;
         allowEmpty?: boolean;

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

@@ -11,7 +11,7 @@ const ms_1 = __importDefault(require("ms"));
 const react_1 = require("react");
 const visuals_1 = require("../visuals");
 // component
-function SegmentedButton({ className, options, selected = [], allowEmpty = false, multiSelect = false, autoFocus = false, disabled = false, onSelectionChange, onBlur = funnel_core_1.Fn.NoOp }) {
+function SegmentedButton({ className, size = 'md', options, selected = [], allowEmpty = false, multiSelect = false, autoFocus = false, disabled = false, onSelectionChange, onBlur = funnel_core_1.Fn.NoOp }) {
     // bind ref data
     const blurTimeoutRef = (0, react_1.useRef)(undefined);
     const selectedOptions = Array.isArray(selected)
@@ -68,6 +68,9 @@ function SegmentedButton({ className, options, selected = [], allowEmpty = false
         }), children: options.map(({ id, value, label, icon }) => {
             const active = selectedOptions.includes(value);
             return ((0, jsx_runtime_1.jsxs)("button", { type: "button", disabled: disabled, className: (0, classnames_1.default)('segmented-button', {
+                    'segmented-button-md': size === 'md',
+                    'segmented-button-sm': size === 'sm',
+                    'segmented-button-xs': size === 'xs',
                     'segmented-button-selected': active
                 }), onClick: () => onSelect(value), onFocus: onSegmentFocus, onBlur: onSegmentBlur, children: [icon &&
                         (0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: "segmented-button-icon", variant: icon, size: "nav" }), (0, jsx_runtime_1.jsx)("span", { className: "segmented-button-label", children: label })] }, id));

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

@@ -154,7 +154,7 @@ function SideSheet(_a) {
                             'w-full md:w-screen-sm': size === 'lg'
                         }), variants: breakpoint === 'xs' || breakpoint === 'sm'
                             ? Animate_1.Animate.Variants.slideFromBottom
-                            : Animate_1.Animate.Variants.slideFromLeft, initial: "initial", animate: "animate", exit: "exit", onAnimationComplete: definition => onAnimationComplete(definition), onKeyDown: onKeyDown, tabIndex: -1, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'w-full h-full max-h-full pointer-events-auto', 'flex flex-col', 'bg-background border-solid border-border-l1', 'max-md:border-t max-md:rounded-tl-md max-md:rounded-tr-md', 'md:border-l md:rounded-tl-md md:rounded-bl-md'), children: [(0, jsx_runtime_1.jsx)("h2", { className: "heading-md text-content-primary p-l8", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-y-scroll", children: children }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex justify-end items-center gap-l4 p-l8', 'border-t border-solid border-border-l1'), children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", size: "sm", disabled: locked, onClick: onClose, children: "Cancel" }), customActions &&
+                            : Animate_1.Animate.Variants.slideFromLeft, initial: "initial", animate: "animate", exit: "exit", onAnimationComplete: definition => onAnimationComplete(definition), onKeyDown: onKeyDown, tabIndex: -1, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'w-full h-full max-h-full pointer-events-auto', 'flex flex-col', 'bg-background border-solid border-border-l1', 'max-md:border-t max-md:rounded-tl-md max-md:rounded-tr-md', 'md:border-l md:rounded-tl-md md:rounded-bl-md'), children: [(0, jsx_runtime_1.jsx)("h2", { className: "heading-sm text-content-primary px-l8 pt-l8 pb-l4", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 px-l8 pt-l4 pb-l8 overflow-y-scroll", children: children }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex justify-end items-center gap-l4 p-l8', 'border-t border-solid border-border-l1'), children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", size: "sm", disabled: locked, onClick: onClose, children: "Cancel" }), customActions &&
                                             (0, jsx_runtime_1.jsx)("div", { className: "flex-1 flex justify-end items-center gap-l4", children: customActions }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "primary", size: "sm", loading: state === 'saving', disabled: disableSave || locked, onClick: onSave, children: renderSaveLabel(state) })] })] }) }))] }, id) }), document.body);
 }
 // helpers

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

@@ -22,6 +22,7 @@ export * from './NavButton';
 export * from './Picker';
 export * from './Popup';
 export * from './Profile';
+export * from './QuickEditor';
 export * from './QuickInput';
 export * from './QuickPicker';
 export * from './SegmentedButton';

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

@@ -38,6 +38,7 @@ __exportStar(require("./NavButton"), exports);
 __exportStar(require("./Picker"), exports);
 __exportStar(require("./Popup"), exports);
 __exportStar(require("./Profile"), exports);
+__exportStar(require("./QuickEditor"), exports);
 __exportStar(require("./QuickInput"), exports);
 __exportStar(require("./QuickPicker"), exports);
 __exportStar(require("./SegmentedButton"), exports);

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

@@ -5,8 +5,8 @@ export declare namespace Icon {
         variant: Variant;
         size?: Size;
     };
-    type Size = 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'nav' | 'card' | Sizing;
-    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';
+    type Size = 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'xxs' | 'nav' | 'card' | Sizing;
+    type Variant = 'Archive' | 'ArrowLeft' | 'ArrowRight' | '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',
+            'ArrowRight',
             'ArrowLeftRight',
             'Atom',
             'Blocks',
@@ -112,6 +113,8 @@ function getIcon(variant) {
             return lucide_react_1.Archive;
         case 'ArrowLeft':
             return lucide_react_1.ArrowLeft;
+        case 'ArrowRight':
+            return lucide_react_1.ArrowRight;
         case 'ArrowLeftRight':
             return lucide_react_1.ArrowLeftRight;
         case 'Atom':
@@ -281,6 +284,8 @@ function getSizing(size) {
             return { size: 16, strokeWidth: 2 };
         case 'xs':
             return { size: 14, strokeWidth: 2 };
+        case 'xxs':
+            return { size: 10, strokeWidth: 1, absoluteStrokeWidth: true };
         default:
             return { size: 20, strokeWidth: 2 };
     }

package/dist/core/domain/BlockConfiguration.d.ts

@@ -1,5 +1,5 @@
 import { BlockLayout, EventBus, Field, FieldModel, Schema } from '@nascentdigital/funnel-core';
-import { PanelLayout, SlotVariation } from '@nascentdigital/funnel-ui';
+import { ListPanel, MessagePanel, PanelLayout, SlotVariation, VisualPanel } from '@nascentdigital/funnel-ui';
 import { Block } from './Block';
 import { IAssetStore } from './IAssetStore';
 import { SectionBlock } from './SectionBlock';
@@ -11,6 +11,7 @@ export declare class BlockConfiguration {
     readonly fields: ReadonlyArray<FieldModel.Config>;
     private _editableFields;
     private _layout?;
+    private _slotState;
     private _defaultConfig?;
     private _isConfigInDefault?;
     constructor({ block: blockOrSectionBlock, assetStore }: BlockConfiguration.ConstructorArgs);
@@ -23,14 +24,19 @@ export declare class BlockConfiguration {
     get nameField(): FieldModel.Config | undefined;
     get themeField(): FieldModel.Config | undefined;
     get layoutField(): Field<Schema.EnumField<Schema.EnumField.Options<PanelLayout>>> | undefined;
-    get slotField(): Field<Schema.EnumField<Schema.EnumField.Options<SlotVariation>>> | undefined;
-    get slotOptions(): string[];
+    get slotState(): Readonly<BlockConfiguration.SlotState>;
     gotToNextSlot(): void;
+    gotToPreviousSlot(): void;
+    get messageFields(): Record<keyof MessagePanel.Config.Keys<'message'>, FieldModel.Config | undefined>;
+    get listFields(): Record<keyof ListPanel.Config.Keys<'list'>, FieldModel.Config | undefined>;
+    get visualFields(): Record<keyof VisualPanel.Config.Keys<'visual'>, FieldModel.Config | undefined>;
     get layout(): BlockLayout | undefined;
     get events$(): import("rxjs").Observable<EventBus.Event<string, string>>;
     get valid(): boolean;
     get modified(): boolean;
     getField(fieldId: string): FieldModel;
+    getFieldData(fieldId: string): Schema.Field.LinkedData | undefined;
+    getEditableField(fieldId: string): FieldModel.Config | undefined;
     save(): void;
     reset(): void;
     get isConfigInDefault(): boolean | undefined;
@@ -38,6 +44,12 @@ export declare class BlockConfiguration {
     private raiseEvent;
 }
 export declare namespace BlockConfiguration {
+    type SlotState = {
+        field?: Field<Schema.EnumField<Schema.EnumField.Options<SlotVariation>>>;
+        options: ReadonlyArray<SlotVariation>;
+        currentOption?: SlotVariation | undefined;
+        currentIndex?: number;
+    };
     type ConstructorArgs = {
         assetStore: IAssetStore;
         block: Block | SectionBlock;

package/dist/core/domain/BlockConfiguration.js

@@ -16,6 +16,7 @@ class BlockConfiguration {
         this.fields = fields;
         this._editableFields = fields;
         this._isConfigInDefault = false;
+        this._slotState = { options: [] };
         // initialize section block
         if (blockOrSectionBlock instanceof SectionBlock_1.SectionBlock) {
             // capture parents
@@ -28,7 +29,6 @@ class BlockConfiguration {
         }
         // or regular block
         else {
-            // capture parent
             this.block = blockOrSectionBlock;
         }
         // add fields
@@ -76,7 +76,7 @@ class BlockConfiguration {
     }
     get desktopFields() {
         return [
-            this._editableFields.find(field => field.id === 'contentAlign')
+            this.getEditableField('contentAlign')
         ].filter(funnel_core_1.Value.isDefined);
     }
     get mobileFields() {
@@ -85,45 +85,74 @@ class BlockConfiguration {
     get nameField() {
         const { block, sectionBlock } = this;
         return sectionBlock
-            ? this._editableFields.find(field => field.id === block.nameField.id)
+            ? this.getEditableField(block.nameField.id)
             : undefined;
     }
     get themeField() {
-        return this._editableFields.find(field => field.id === funnel_ui_1.BlockConfig.Presets.ThemeOnly.key);
+        return this.getEditableField(funnel_ui_1.BlockConfig.Presets.ThemeOnly.key);
     }
     get layoutField() {
         return this._editableFields.find(field => field.id === 'layout');
     }
-    get slotField() {
-        return this._editableFields.find(field => field.id === 'slotVariation');
-    }
-    get slotOptions() {
-        const slotField = this.slotField;
-        return slotField ? Object.keys(slotField.schema.options) : [];
+    get slotState() {
+        return this._slotState;
     }
     gotToNextSlot() {
-        var _a;
-        // get the slot field and skip if the field doesn't exist
-        const slotField = this.slotField;
-        if (!slotField) {
+        // skip if there's no options
+        const { field, options, currentIndex } = this._slotState;
+        if (!field || options.length < 0 || currentIndex === undefined) {
             return;
         }
-        // get the current slot value and skip if no value found (should not happen)
-        const currentValue = (_a = slotField.value) === null || _a === void 0 ? void 0 : _a.value;
-        if (!currentValue) {
+        // update the slot
+        const newIndex = (currentIndex + 1) % options.length;
+        const newOption = options[newIndex];
+        this._slotState = {
+            field, options, currentIndex: newIndex, currentOption: newOption
+        };
+        field.value = funnel_core_1.Schema.EnumField.Value.toData(newOption);
+    }
+    gotToPreviousSlot() {
+        // skip if there's no options
+        const { field, options, currentIndex } = this._slotState;
+        if (!field || options.length < 0 || currentIndex === undefined) {
             return;
         }
-        // get all the available slot options
-        const options = this.slotOptions;
-        // compute the next index and account for being out of bound
-        let nextIndex = options.indexOf(currentValue) + 1;
-        if (nextIndex > options.length - 1) {
-            nextIndex = 0;
-        }
-        // get the next slot value
-        const nextSlot = options[nextIndex];
         // update the slot
-        slotField.value = funnel_core_1.Schema.EnumField.Value.toData(nextSlot);
+        const newIndex = currentIndex === 0
+            ? options.length - 1
+            : currentIndex - 1;
+        const newOption = options[newIndex];
+        this._slotState = {
+            field, options, currentIndex: newIndex, currentOption: newOption
+        };
+        field.value = funnel_core_1.Schema.EnumField.Value.toData(newOption);
+    }
+    get messageFields() {
+        const keys = funnel_ui_1.MessagePanel.Config.getKeys('message');
+        return {
+            textAlign: this.getEditableField(keys.textAlign),
+            width: this.getEditableField(keys.width),
+            horizontalAlign: this.getEditableField(keys.horizontalAlign),
+            verticalAlign: this.getEditableField(keys.verticalAlign)
+        };
+    }
+    get listFields() {
+        const keys = funnel_ui_1.ListPanel.Config.getKeys('list');
+        return {
+            layout: this.getEditableField(keys.layout),
+            width: this.getEditableField(keys.width),
+            horizontalAlign: this.getEditableField(keys.horizontalAlign),
+            verticalAlign: this.getEditableField(keys.verticalAlign)
+        };
+    }
+    get visualFields() {
+        const keys = funnel_ui_1.VisualPanel.Config.getKeys('visual');
+        return {
+            aspect: this.getEditableField(keys.aspect),
+            anchor: this.getEditableField(keys.anchor),
+            width: this.getEditableField(keys.width),
+            horizontalAlign: this.getEditableField(keys.horizontalAlign)
+        };
     }
     get layout() {
         return this._layout;
@@ -152,6 +181,32 @@ class BlockConfiguration {
         // return field
         return field;
     }
+    getFieldData(fieldId) {
+        // skip if it's not there
+        const { block, assetStore } = this;
+        const field = block.fields.find(field => field.id === fieldId);
+        if (!field) {
+            return undefined;
+        }
+        // link assets
+        const fieldValue = field.value;
+        if ((fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.type) === 'asset') {
+            const assetData = funnel_core_1.Schema.AssetField.Value.fromData(fieldValue);
+            const asset = (assetData === null || assetData === void 0 ? void 0 : assetData.id)
+                ? assetStore.getAsset(assetData === null || assetData === void 0 ? void 0 : assetData.id)
+                : undefined;
+            return assetData && asset
+                ? funnel_core_1.Schema.AssetField.LinkedValue.toData(funnel_core_1.Schema.AssetField.Value.toLinked(assetData, asset))
+                : undefined;
+        }
+        // or return other values as-is
+        else {
+            return fieldValue;
+        }
+    }
+    getEditableField(fieldId) {
+        return this._editableFields.find(field => field.id === fieldId);
+    }
     save() {
         // save each modified field
         const { sectionBlock, block, editableFields } = this;
@@ -233,6 +288,7 @@ class BlockConfiguration {
         return this._isConfigInDefault;
     }
     sync() {
+        var _a;
         // recompute the editable fields
         const { block, blockFieldData: fieldData, fields, editableFields } = this;
         const configData = editableFields.reduce((data, field) => {
@@ -273,6 +329,17 @@ class BlockConfiguration {
         this._layout = getLayout
             ? getLayout({ config: updatedConfig, fields: fieldData })
             : undefined;
+        // setup slot
+        const slotField = configFields.find(field => field.id === 'slotVariation');
+        const slotOptions = (slotField ? Object.keys(slotField.schema.options) : []);
+        const slotOption = (_a = slotField === null || slotField === void 0 ? void 0 : slotField.value) === null || _a === void 0 ? void 0 : _a.value;
+        const slotOptionIndex = slotOption ? slotOptions.indexOf(slotOption) : -1;
+        this._slotState = {
+            field: slotField,
+            options: slotOptions,
+            currentIndex: slotOptionIndex < 0 ? undefined : slotOptionIndex,
+            currentOption: slotOption
+        };
         // assign to editable fields (raised event)
         this.editableFields = configFields;
         // compute the default config