@nascentdigital/funnel-editor 4.4.18

package/dist/core/components/fields/EmptyFieldCard.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmptyFieldCard = EmptyFieldCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const client_1 = require("@nascentdigital/funnel-ui/client");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const visuals_1 = require("../visuals");
+const factories_1 = require("./factories");
+// component
+function EmptyFieldCard({ className, schema, field, onClick, onCreated = funnel_core_1.Fn.NoOp, onEditing = funnel_core_1.Fn.NoOp }) {
+    // bind props + state
+    const { name } = schema;
+    const [creating, setCreating] = (0, react_1.useState)(false);
+    const rootElementRef = (0, react_1.useRef)(null);
+    const rootElement = rootElementRef.current;
+    const onCreatedRef = (0, react_1.useRef)(onCreated);
+    onCreatedRef.current = onCreated;
+    // helpers
+    const onCreateStart = (e) => {
+        // consume event
+        e.preventDefault();
+        e.stopPropagation();
+        // forward if there's a click event
+        if (onClick) {
+            onClick();
+        }
+        // or start creating if it's keyboard (or there's no click)
+        else {
+            setCreating(true);
+            onEditing(true);
+        }
+    };
+    const onCreateCancel = () => {
+        setCreating(false);
+        onEditing(false);
+    };
+    const onCreateComplete = (data) => {
+        // reset card
+        setCreating(false);
+        onEditing(false);
+        // set value
+        onCreatedRef.current(data);
+    };
+    // render
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("section", { ref: rootElementRef, className: (0, classnames_1.default)(className, 'h-full outline outline-1 outline-transparent overflow-hidden cursor-pointer interpolate', 'bg-surface1 border border-dashed border-border-l1 rounded-md', 'hover:bg-ix-primary-hover/tint0 hover:border-ix-primary hover:border-solid', 'focus-visible:bg-ix-primary-hover/tint0 focus-visible:border-ix-primary focus-visible:border-solid focus-visible:outline-ix-primary', 'active:scale-[.97] active:interpolate-fast'), onClick: onCreateStart, onKeyDown: client_1.OnKey.enter(onCreateStart), tabIndex: 0, children: (0, jsx_runtime_1.jsx)("div", { className: "h-full flex flex-col justify-center items-center pointer-events-none interpolate", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-l5 p-l5", children: [(0, jsx_runtime_1.jsx)("div", { className: "p-l5 text-ix-secondary bg-ix-primary rounded-full", children: (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: "Plus", size: "sm" }) }), (0, jsx_runtime_1.jsxs)("span", { className: "block label-md text-content-primary text-center", children: ["Select ", name] })] }) }) }), !onClick && creating && rootElement &&
+                (0, jsx_runtime_1.jsx)(factories_1.FieldValueFactory, { anchor: rootElement, itemSchema: schema, field: field, onCommit: onCreateComplete, onCancel: onCreateCancel })] }));
+}

package/dist/core/components/fields/EnumField.d.ts

@@ -0,0 +1,11 @@
+import { Field, Schema } from '@nascentdigital/funnel-core';
+import { FieldLayout } from './FieldLayout';
+export declare function EnumField({ className, field, variant, disabled }: EnumField.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace EnumField {
+    type Props = {
+        className?: string;
+        field: Field<Schema.EnumField>;
+        variant?: FieldLayout.Variant;
+        disabled?: boolean;
+    };
+}

package/dist/core/components/fields/EnumField.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EnumField = EnumField;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const hooks_1 = require("../../hooks");
+const interaction_1 = require("../interaction");
+const FieldLayout_1 = require("./FieldLayout");
+// component
+function EnumField({ className, field, variant, disabled }) {
+    // bind toolbar
+    const { id, value: data, schema } = field;
+    const value = funnel_core_1.Schema.EnumField.Value.fromData(data);
+    // sync field
+    (0, hooks_1.useField)(field);
+    // create picker
+    let picker;
+    switch (schema.semantics) {
+        case 'dropdown':
+            picker = ((0, jsx_runtime_1.jsx)(interaction_1.Combobox, { className: "w-full", id: id, options: getComboboxOptions(schema), selectedOption: value !== null && value !== void 0 ? value : schema.defaultOption, onSelect: value => field.value = funnel_core_1.Schema.EnumField.Value.toData(value), disabled: disabled }));
+            break;
+        case 'segmented':
+            picker = ((0, jsx_runtime_1.jsx)(interaction_1.SegmentedButton, { options: getSegmentedButtonOptions(schema), selected: value !== null && value !== void 0 ? value : schema.defaultOption, onSelectionChange: ([value]) => field.value = funnel_core_1.Schema.EnumField.Value.toData(value), disabled: disabled }));
+            break;
+        default:
+            throw new funnel_core_1.NotImplementedError('No support for EnumField with "radio" semantics');
+    }
+    // render
+    return ((0, jsx_runtime_1.jsx)(FieldLayout_1.FieldLayout, { className: (0, classnames_1.default)(className, 'w-full'), field: field, variant: variant, children: picker }));
+}
+// helper
+function getComboboxOptions(schema) {
+    return Object.entries(schema.options).reduce((options, [id, option]) => {
+        // add option
+        options.push({
+            id,
+            label: option.name
+        });
+        // keep reducing
+        return options;
+    }, []);
+}
+function getSegmentedButtonOptions(schema) {
+    return Object.entries(schema.options).reduce((options, [id, option]) => {
+        // add option
+        options.push({
+            id,
+            value: id,
+            label: option.name
+        });
+        // keep reducing
+        return options;
+    }, []);
+}

package/dist/core/components/fields/FieldButton.d.ts

@@ -0,0 +1,11 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { PropsWithChildren } from 'react';
+export declare function FieldButton({ className, label, onClick, disabled, children }: FieldButton.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace FieldButton {
+    type Props = PropsWithChildren & {
+        className?: string;
+        label?: string;
+        disabled?: boolean;
+        onClick?: Callback.Void;
+    };
+}

package/dist/core/components/fields/FieldButton.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldButton = FieldButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+// component
+function FieldButton({ className, label, onClick, disabled = false, children }) {
+    // bind id
+    const id = (0, react_1.useId)();
+    // render
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'FieldButton-root', { 'FieldButton-disabled': disabled }), children: [label &&
+                (0, jsx_runtime_1.jsx)("label", { className: "FieldButton-label", htmlFor: id, children: label }), (0, jsx_runtime_1.jsx)("button", { id: id, className: "FieldButton-button", onClick: onClick, disabled: disabled, children: children })] }));
+}

package/dist/core/components/fields/FieldCard.d.ts

@@ -0,0 +1,18 @@
+import { Callback, Field, ObjectField } from '@nascentdigital/funnel-core';
+export declare function FieldCard({ field, ...props }: FieldCard.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace FieldCard {
+    type Props = {
+        className?: string;
+        field: Field | ObjectField;
+        deletable?: boolean;
+        selecting?: boolean;
+        embedded?: boolean;
+        onDelete?: Callback<Field | ObjectField>;
+        onEditing?: Callback<boolean>;
+    };
+    namespace Props {
+        type For<T> = Omit<Props, 'field'> & {
+            field: T;
+        };
+    }
+}

package/dist/core/components/fields/FieldCard.js

@@ -0,0 +1,44 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldCard = FieldCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const asset_1 = require("./asset");
+const collection_1 = require("./collection");
+const embed_1 = require("./embed");
+const link_1 = require("./link");
+const object_1 = require("./object");
+const page_1 = require("./page");
+// component
+function FieldCard(_a) {
+    var { field } = _a, props = __rest(_a, ["field"]);
+    // render based on type
+    const { schema } = field;
+    switch (schema.type) {
+        case 'asset': {
+            return ((0, jsx_runtime_1.jsx)(asset_1.AssetCard, Object.assign({}, props, { field: field })));
+        }
+        case 'link':
+            return ((0, jsx_runtime_1.jsx)(link_1.LinkCard, Object.assign({}, props, { field: field })));
+        case 'embedded.video':
+            return ((0, jsx_runtime_1.jsx)(embed_1.EmbeddedVideoCard, Object.assign({}, props, { field: field })));
+        case 'page':
+            return ((0, jsx_runtime_1.jsx)(page_1.PageCard, Object.assign({}, props, { field: field })));
+        case 'collection':
+            return ((0, jsx_runtime_1.jsx)(collection_1.CollectionCard, Object.assign({}, props, { field: field })));
+        case 'object':
+            return ((0, jsx_runtime_1.jsx)(object_1.ObjectCard, Object.assign({}, props, { field: field })));
+        default:
+            return ((0, jsx_runtime_1.jsxs)("div", { children: ["No support for Field: ", field.name] }));
+    }
+}

package/dist/core/components/fields/FieldCardLayout.d.ts

@@ -0,0 +1,17 @@
+import { Callback, Field, ObjectField } from '@nascentdigital/funnel-core';
+import { ReactNode } from 'react';
+export declare function FieldCardLayout({ className, tip, field, deletable, embedded, selecting, onDelete, onEditing, onActiveChanged, children }: FieldCardLayout.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace FieldCardLayout {
+    type Props = {
+        className?: string;
+        tip?: string;
+        field: Field | ObjectField;
+        deletable?: boolean;
+        embedded?: boolean;
+        selecting?: boolean;
+        onDelete?: Callback<Field | ObjectField>;
+        onEditing?: Callback<boolean>;
+        onActiveChanged?: Callback<boolean>;
+        children?: ReactNode;
+    };
+}

package/dist/core/components/fields/FieldCardLayout.js

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldCardLayout = FieldCardLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const client_1 = require("@nascentdigital/funnel-ui/client");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const hooks_1 = require("../../hooks");
+const factories_1 = require("./factories");
+const FieldHeader_1 = require("./FieldHeader");
+// component
+function FieldCardLayout({ className, tip, field, deletable = false, embedded = false, selecting = false, onDelete = funnel_core_1.Fn.NoOp, onEditing = funnel_core_1.Fn.NoOp, onActiveChanged = funnel_core_1.Fn.NoOp, children }) {
+    // bind props + state
+    const { schema } = field;
+    const [hovering, setHovering] = (0, react_1.useState)(false);
+    const [focused, setFocused] = (0, react_1.useState)(false);
+    const [editing, setEditing] = (0, react_1.useState)(false);
+    const rootElementRef = (0, react_1.useRef)(null);
+    const rootElement = rootElementRef.current;
+    const active = hovering || focused;
+    const onActiveChangedRef = (0, react_1.useRef)(onActiveChanged);
+    onActiveChangedRef.current = onActiveChanged;
+    // sync field
+    (0, hooks_1.useField)(field);
+    // update active state
+    (0, react_1.useEffect)(() => {
+        onActiveChangedRef.current(active);
+    }, [active]);
+    // helpers
+    const onEdit = (e) => {
+        // consume event
+        e.preventDefault();
+        e.stopPropagation();
+        // start edit
+        setEditing(true);
+        onEditing(true);
+    };
+    const onEdited = (data) => {
+        // end editing
+        setEditing(false);
+        onEditing(false);
+        // sync value for fields or object fields
+        if (field instanceof funnel_core_1.Field || field instanceof funnel_core_1.ObjectField) {
+            field.value = data;
+        }
+    };
+    const onCancel = () => {
+        setEditing(false);
+        onEditing(false);
+    };
+    // render
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'relative w-[212px] flex flex-col'), onPointerEnter: () => setHovering(true), onPointerLeave: () => setHovering(false), children: [!embedded &&
+                        (0, jsx_runtime_1.jsx)(FieldHeader_1.FieldHeader, { className: "w-full", label: schema.name, tip: tip !== null && tip !== void 0 ? tip : schema.description, active: active, onDelete: deletable
+                                ? () => onDelete(field)
+                                : undefined }), (0, jsx_runtime_1.jsx)("div", { ref: rootElementRef, className: (0, classnames_1.default)('FieldCard h-[170px]', {
+                            'pointer-events-none': selecting
+                        }), onClick: selecting ? undefined : onEdit, onKeyDown: selecting ? undefined : client_1.OnKey.enter(onEdit), tabIndex: selecting ? -1 : 0, onFocus: () => setFocused(true), onBlur: () => setFocused(false), children: children })] }), editing && rootElement &&
+                (0, jsx_runtime_1.jsx)(factories_1.FieldValueFactory, { itemSchema: schema, field: field, anchor: rootElement, onCommit: onEdited, onCancel: onCancel })] }));
+}

package/dist/core/components/fields/FieldEditor.d.ts

@@ -0,0 +1,15 @@
+import { Callback, FieldModel } from '@nascentdigital/funnel-core';
+import { FieldLayout } from './FieldLayout';
+export declare function FieldEditor({ className, field, variant, standalone, autoFocus: autoFocusRaw, disabled, secured, onValidChanged }: FieldEditor.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace FieldEditor {
+    type Props = {
+        className?: string;
+        field: FieldModel;
+        variant?: FieldLayout.Variant;
+        standalone?: boolean;
+        autoFocus?: boolean;
+        secured?: boolean;
+        disabled?: boolean;
+        onValidChanged?: Callback<boolean>;
+    };
+}

package/dist/core/components/fields/FieldEditor.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldEditor = FieldEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
+const hooks_1 = require("../../hooks");
+const feedback_1 = require("../feedback");
+const BooleanField_1 = require("./BooleanField");
+const DateField_1 = require("./DateField");
+const DynamicPagesEditor_1 = require("./DynamicPagesEditor");
+const EnumField_1 = require("./EnumField");
+const FieldCard_1 = require("./FieldCard");
+const FormEditor_1 = require("./FormEditor");
+const ListEditor_1 = require("./ListEditor");
+const RichTextField_1 = require("./RichTextField");
+const TextField_1 = require("./TextField");
+const TimestampField_1 = require("./TimestampField");
+// component
+function FieldEditor({ className, field, variant, standalone = false, autoFocus: autoFocusRaw = false, disabled = false, secured = false, onValidChanged = funnel_core_1.Fn.NoOp }) {
+    // bind state + hooks
+    const wasValidRef = (0, react_1.useRef)(field.valid);
+    const dialog = (0, feedback_1.useDialog)();
+    const isValid = field.valid;
+    // bind hook (needed for updating field)
+    (0, hooks_1.useField)(field);
+    // raise change when flipping from valid -> invalid
+    (0, react_1.useEffect)(() => {
+        // skip if validity is unchanged
+        const wasValid = wasValidRef.current;
+        if (wasValid === isValid) {
+            return;
+        }
+        // update ref
+        wasValidRef.current = isValid;
+        // raise change
+        onValidChanged(isValid);
+    }, [isValid, onValidChanged]);
+    // set/clear focus if requested
+    let autoFocus = autoFocusRaw;
+    if (field.shouldFocus) {
+        autoFocus = true;
+        field.didFocus();
+    }
+    // helpers
+    const { schema } = field;
+    const onDelete = async () => {
+        // confirm opt-out (or skip)
+        const confirmed = await dialog.confirm({
+            title: `Remove the ${schema.name} field?`,
+            confirmLabel: 'Opt-out',
+            destructive: true
+        });
+        if (!confirmed) {
+            return;
+        }
+        // opt-out of field
+        field.optOut();
+    };
+    // render field
+    if (field instanceof funnel_core_1.Field) {
+        switch (schema.type) {
+            case 'text':
+                return ((0, jsx_runtime_1.jsx)(TextField_1.TextField, { className: className, field: field, variant: variant, autoFocus: autoFocus, disabled: disabled, secured: secured }));
+            case 'richtext':
+                return ((0, jsx_runtime_1.jsx)(RichTextField_1.RichTextField, { className: className, field: field, standalone: standalone, autoFocus: autoFocus, disabled: disabled }));
+            case 'enum':
+                return ((0, jsx_runtime_1.jsx)(EnumField_1.EnumField, { className: className, field: field, variant: variant, disabled: disabled }));
+            case 'boolean':
+                return ((0, jsx_runtime_1.jsx)(BooleanField_1.BooleanField, { className: className, field: field, variant: variant }));
+            case 'date':
+                return ((0, jsx_runtime_1.jsx)(DateField_1.DateField, { className: className, field: field, variant: variant }));
+            case 'timestamp':
+                return ((0, jsx_runtime_1.jsx)(TimestampField_1.TimestampField, { className: className, field: field, variant: variant, autoFocus: autoFocus, disabled: disabled, secured: secured }));
+            case 'link':
+            case 'asset':
+            case 'embedded.video':
+            case 'collection':
+            case 'page':
+                return ((0, jsx_runtime_1.jsx)(FieldCard_1.FieldCard, { className: className, field: field, deletable: field.canOptOut, onDelete: onDelete }));
+            case 'form':
+                return ((0, jsx_runtime_1.jsx)(FormEditor_1.FormEditor, { form: field }));
+            case 'dynamic.pages':
+                return ((0, jsx_runtime_1.jsx)(DynamicPagesEditor_1.DynamicPagesEditor, { dynamicPages: field }));
+            default:
+                return ((0, jsx_runtime_1.jsxs)("b", { className: className, children: ["No support for: ", schema.type, "!"] }));
+        }
+    }
+    // or list
+    else if (field instanceof funnel_core_1.FieldList) {
+        return ((0, jsx_runtime_1.jsx)(ListEditor_1.ListEditor, { className: className, list: field }));
+    }
+    // or object
+    else {
+        return ((0, jsx_runtime_1.jsx)(FieldCard_1.FieldCard, { className: className, field: field, deletable: field.canOptOut, onDelete: onDelete }));
+    }
+}

package/dist/core/components/fields/FieldErrorController.d.ts

@@ -0,0 +1,12 @@
+import { FieldValidator } from '@nascentdigital/funnel-core';
+import { PropsWithChildren } from 'react';
+export declare function FieldErrorController({ errorLevel, children }: FieldErrorController.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace FieldErrorController {
+    type Props = PropsWithChildren & {
+        errorLevel?: FieldValidator.Error.Level;
+    };
+}
+export declare const FieldErrorContext: import("react").Context<FieldValidator.Error.Level>;
+export declare namespace FieldErrorContext {
+    type Data = FieldValidator.Error.Level;
+}

package/dist/core/components/fields/FieldErrorController.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldErrorContext = void 0;
+exports.FieldErrorController = FieldErrorController;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+// component
+function FieldErrorController({ errorLevel = 'all', children }) {
+    // render
+    return ((0, jsx_runtime_1.jsx)(exports.FieldErrorContext.Provider, { value: errorLevel, children: children }));
+}
+// context
+exports.FieldErrorContext = (0, react_1.createContext)('all');

package/dist/core/components/fields/FieldHeader.d.ts

@@ -0,0 +1,13 @@
+import { Callback } from '@nascentdigital/funnel-core';
+export declare function FieldHeader({ className, fieldId, label, tip, embedded, active: fieldActive, onDelete }: FieldHeader.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace FieldHeader {
+    type Props = {
+        className?: string;
+        fieldId?: string;
+        label?: string;
+        tip?: string;
+        embedded?: boolean;
+        active?: boolean;
+        onDelete?: Callback.Void;
+    };
+}

package/dist/core/components/fields/FieldHeader.js

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldHeader = FieldHeader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_ui_1 = require("@nascentdigital/funnel-ui");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const interaction_1 = require("../interaction");
+const visuals_1 = require("../visuals");
+const rxjs_1 = require("rxjs");
+// component
+function FieldHeader({ className, fieldId, label, tip, embedded = false, active: fieldActive = false, onDelete }) {
+    // bind hooks
+    const [tipAnchor, setTipAnchor] = (0, react_1.useState)();
+    const [focused, setFocused] = (0, react_1.useState)(false);
+    const [active, setActive] = (0, react_1.useState)(fieldActive || focused);
+    const activeRef = (0, react_1.useRef)(active);
+    activeRef.current = active;
+    // update active (with delay if deactivating)
+    (0, react_1.useEffect)(() => {
+        // ignore if nothing has changed
+        const activeCurrent = activeRef.current;
+        const activeNext = fieldActive || focused;
+        if (activeCurrent === activeNext) {
+            return;
+        }
+        // or update immediately if activating
+        else if (activeNext) {
+            setActive(true);
+        }
+        // or deactivate with delay
+        else {
+            // create delayed update
+            let cancelled = false;
+            (0, rxjs_1.firstValueFrom)((0, rxjs_1.timer)(50)).then(() => {
+                if (!cancelled) {
+                    setActive(false);
+                }
+            });
+            // cancel on unmount
+            return () => {
+                cancelled = true;
+            };
+        }
+    }, [fieldActive, focused]);
+    // render
+    const labelClassName = 'shrink-0 flex-1 label-md';
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'h-24 flex items-center gap-l2', 'text-content-primary'), children: [fieldId && !embedded
+                ? (0, jsx_runtime_1.jsx)("label", { className: labelClassName, htmlFor: fieldId, children: label })
+                : (0, jsx_runtime_1.jsx)("span", { className: labelClassName, children: embedded ? '' : label }), tip && !embedded &&
+                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)({
+                                'opacity-none pointer-events-none interpolate-fast': !active,
+                                'opacity-full pointer-events-auto interpolate': active
+                            }), onPointerEnter: e => setTipAnchor(e.currentTarget), onPointerLeave: () => setTipAnchor(undefined), children: (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: "Info", size: "sm" }) }), (0, jsx_runtime_1.jsx)(interaction_1.Popup, { className: (0, classnames_1.default)('max-w-[200px] bg-surface2 rounded-sm px-l5 py-l4 pointer-events-none', 'border border-solid border-border-l1 shadow-tooltip'), open: !!tipAnchor, anchor: tipAnchor, anchorOffset: 4, placement: "top", disableOverlay: true, onClose: () => setTipAnchor(undefined), children: (0, jsx_runtime_1.jsx)(funnel_ui_1.Markup, { className: "block body-sm text-content-primary text-pretty", markdown: tip }) })] }), onDelete &&
+                (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { className: (0, classnames_1.default)({
+                        'opacity-none pointer-events-none interpolate-fast': !active,
+                        'opacity-full pointer-events-auto interpolate': active
+                    }), size: "xs", icon: "X", disabled: !active, onFocus: () => setFocused(true), onBlur: () => setFocused(false), onClick: () => onDelete() })] }));
+}

package/dist/core/components/fields/FieldLayout.d.ts

@@ -0,0 +1,17 @@
+import { Callback, Field } from '@nascentdigital/funnel-core';
+import { ReactNode } from 'react';
+export declare function FieldLayout({ field, className, label: rawLabel, variant, onActiveChanged, children }: FieldLayout.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace FieldLayout {
+    type Variant = 'default' | 'wide' | 'minimal';
+    type Props = {
+        field?: Field;
+        variant?: Variant;
+        className?: string;
+        label?: string;
+        secured?: boolean;
+        disabled?: boolean;
+        locked?: boolean;
+        onActiveChanged?: Callback<boolean>;
+        children: ReactNode;
+    };
+}

package/dist/core/components/fields/FieldLayout.js

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldLayout = FieldLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
+const hooks_1 = require("../../hooks");
+const feedback_1 = require("../feedback");
+const visuals_1 = require("../visuals");
+const FieldErrorController_1 = require("./FieldErrorController");
+const FieldHeader_1 = require("./FieldHeader");
+const classnames_1 = __importDefault(require("classnames"));
+// component
+function FieldLayout({ field, className, label: rawLabel, variant = 'default', onActiveChanged = funnel_core_1.Fn.NoOp, children }) {
+    var _a;
+    // bind props + hook
+    const { schema, name = 'Unknown', canOptOut = false } = field !== null && field !== void 0 ? field : {};
+    const { description } = schema !== null && schema !== void 0 ? schema : {};
+    const label = rawLabel !== null && rawLabel !== void 0 ? rawLabel : name;
+    const [active, setActive] = (0, react_1.useState)(false);
+    const errorLevel = (0, react_1.useContext)(FieldErrorController_1.FieldErrorContext);
+    const errors = (_a = field === null || field === void 0 ? void 0 : field.getErrors(errorLevel)) !== null && _a !== void 0 ? _a : [];
+    const hasErrors = errors.length > 0;
+    const dialog = (0, feedback_1.useDialog)();
+    const minimal = variant === 'minimal';
+    // sync with field
+    const fieldRef = (0, hooks_1.useField)(field);
+    // helpers
+    const onActive = () => {
+        setActive(true);
+        onActiveChanged(true);
+    };
+    const onInactive = () => {
+        setActive(false);
+        onActiveChanged(false);
+    };
+    const onOptOut = async () => {
+        var _a;
+        // confirm opt-out (or skip)
+        const confirmed = await dialog.confirm({
+            title: `Remove the ${name} field?`,
+            confirmLabel: 'Opt-out',
+            destructive: true
+        });
+        if (!confirmed) {
+            return;
+        }
+        // opt-out of field (using field ref to prevent stale closure)
+        (_a = fieldRef.current) === null || _a === void 0 ? void 0 : _a.optOut();
+    };
+    // render
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, {
+            'flex flex-col gap-m2': variant !== 'wide',
+            'grid grid-cols-subgrid items-center': variant === 'wide'
+        }), onPointerEnter: onActive, onPointerLeave: onInactive, children: [!minimal &&
+                (0, jsx_runtime_1.jsx)(FieldHeader_1.FieldHeader, { fieldId: field === null || field === void 0 ? void 0 : field.id, label: label, tip: description, active: active || (field === null || field === void 0 ? void 0 : field.editing) === true, onDelete: canOptOut ? onOptOut : undefined }), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-[200px]", children: [children, !minimal && hasErrors &&
+                        (0, jsx_runtime_1.jsx)("ul", { className: "flex flex-col gap-l2 mt-l3", "aria-live": "polite", children: errors.map((error, index) => (0, jsx_runtime_1.jsxs)("li", { className: "flex items-center gap-l2 text-destructive", children: [(0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: "TriangleAlert", size: "sm" }), (0, jsx_runtime_1.jsx)("span", { className: "label-sm ellipsis", children: error.message })] }, `error_${index}`)) })] })] }));
+}

package/dist/core/components/fields/FieldsPanel.d.ts

@@ -0,0 +1,14 @@
+import { FieldModel } from '@nascentdigital/funnel-core';
+import { ReactNode } from 'react';
+export declare function FieldsPanel({ className, title, actions, fields, autoFocus }: FieldsPanel.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace FieldsPanel {
+    type Props = {
+        className?: string;
+        title?: string;
+        actions?: ReactNode;
+        config?: ReadonlyArray<Item>;
+        fields: ReadonlyArray<Item>;
+        autoFocus?: boolean;
+    };
+    type Item = FieldModel;
+}