@nascentdigital/funnel-editor 4.6.1 → 5.0.1

package/dist/core/components/fields/media/MediaPicker.js

@@ -0,0 +1,251 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaPicker = 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 framer_motion_1 = require("framer-motion");
+const react_1 = require("react");
+const hooks_1 = require("../../../hooks");
+const feedback_1 = require("../../feedback");
+const interaction_1 = require("../../interaction");
+const transitions_1 = require("../../transitions");
+// component
+exports.MediaPicker = (0, react_1.forwardRef)(function MediaPicker({ language }, ref) {
+    // bind props + hooks
+    const [deferral, setDeferral] = (0, react_1.useState)(undefined);
+    const [result, setResult] = (0, react_1.useState)();
+    const [schema, setSchema] = (0, react_1.useState)();
+    const [collectionGroups, setCollectionGroups] = (0, react_1.useState)();
+    const [collectionGroup, setCollectionGroup] = (0, react_1.useState)();
+    const [collections, setCollections] = (0, react_1.useState)();
+    const [tagOptions, setTagOptions] = (0, react_1.useState)();
+    const [tagFilters, setTagFilters] = (0, react_1.useState)([]);
+    const [tagTooltip, setTagTooltip] = (0, react_1.useState)();
+    const [fetching, setFetching] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)();
+    const repo = (0, hooks_1.useCollectionRepository)();
+    const siteCollections = (0, hooks_1.useCollections)();
+    const collectionStore = (0, hooks_1.useCollectionStore)();
+    // export service
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        pick: async ({ schema }) => {
+            // reset state
+            setSchema(schema);
+            setCollectionGroups(undefined);
+            setCollectionGroup(undefined);
+            setTagOptions(undefined);
+            setTagFilters([]);
+            setTagTooltip(undefined);
+            setCollections(undefined);
+            setError(undefined);
+            // create deferral
+            const deferral = new funnel_core_1.Deferral();
+            setDeferral(deferral);
+            setResult(undefined);
+            // wait until deferral is resolved
+            return deferral.promise;
+        }
+    }), []);
+    // fetch collection groups when schema changes
+    (0, react_1.useEffect)(() => {
+        // skip if there's no deferral
+        if (!schema || !deferral) {
+            return;
+        }
+        // reset error (if any)
+        setError(undefined);
+        // sync site
+        siteCollections.sync()
+            // bind groups, filtering out types that aren't part of the set
+            .then(() => {
+            // determine group list
+            const { collections } = schema;
+            const collectionGroups = collections.length === 0
+                ? siteCollections.items
+                : siteCollections.items
+                    .filter(group => collections.some(collection => collection.type === group.type));
+            setCollectionGroups(collectionGroups);
+            // bind first group as in initial selection
+            const [collectionGroup] = collectionGroups;
+            setCollectionGroup(collectionGroup);
+            // short-circuit collections if none are present
+            if (!collectionGroup) {
+                setCollections([]);
+                setTagOptions([]);
+                setTagFilters([]);
+            }
+        })
+            // handle error
+            .catch(e => {
+            console.error('[MediaPicker/sync] sync failed', e);
+            setError(feedback_1.ErrorMessage.coerce(e));
+        });
+    }, [siteCollections, deferral, schema]);
+    // fetch collection items when group changes
+    (0, react_1.useEffect)(() => {
+        // ignore if not ready
+        if (!collectionGroup) {
+            return;
+        }
+        console.debug('[MediaPicker/sync] syncing group', collectionGroup);
+        // clear collections
+        setCollections(undefined);
+        setTagOptions(undefined);
+        setTagFilters([]);
+        // sync group
+        collectionGroup.sync()
+            // then update filters
+            .then(() => {
+            // transform items
+            const collections = collectionGroup.items
+                .map(summary => summary.getClosestCollectionRef(language, collectionGroup.defaultLanguage))
+                .filter(funnel_core_1.Value.isDefined);
+            // set collections
+            setCollections(collections);
+            // setup tags (if there are items in group)
+            if (collections.length > 0) {
+                const { tags: tagGroups } = collectionGroup.template;
+                const tagOptions = tagGroups
+                    .map(tagGroup => {
+                    // get all tags in group
+                    const tags = Object.values(tagGroup.tags).reduce((tags, tag) => {
+                        // add tag if it matches
+                        if (collections.some(collection => collection.tags.includes(tag))) {
+                            tags.add(tag);
+                        }
+                        // keep reducing
+                        return tags;
+                    }, new Set());
+                    // create filter group (if there are items)
+                    return tags.size > 0
+                        ? { group: tagGroup, tags }
+                        : undefined;
+                })
+                    .filter(funnel_core_1.Value.isDefined);
+                // set options
+                setTagOptions(tagOptions);
+            }
+            // or clear tags
+            else {
+                setTagOptions([]);
+            }
+        })
+            // or capture error
+            .catch(e => setError(feedback_1.ErrorMessage.coerce(e)));
+    }, [language, collectionGroup]);
+    // helpers
+    const onPick = async (collectionRef) => {
+        // clear tooltips
+        setTagTooltip(undefined);
+        // fetch ref (or fail)
+        const { template, id, name } = collectionRef;
+        const collection = await repo.get({ id, version: 'draft' });
+        if (!collection) {
+            setFetching(false);
+            setError({
+                title: `Unable to find ${template.name}`,
+                message: `We ran into an issue while trying to fetch the "${name}" collection item.  Please refresh your browser and try again.`
+            });
+            return;
+        }
+        // add collection
+        collectionStore.addCollection(collection.data);
+        // set result (triggers picker to close)
+        setResult(collectionRef);
+    };
+    const onCancel = () => {
+        // clear tooltips
+        setTagTooltip(undefined);
+        // set result (triggers picker to close)
+        setResult(null);
+    };
+    const onPickerClosed = () => {
+        // skip if missing or already completed
+        if (!deferral || deferral.isComplete) {
+            return;
+        }
+        // complete deferral
+        deferral.resolve(result !== null && result !== void 0 ? result : undefined);
+    };
+    // render
+    return ((0, jsx_runtime_1.jsxs)(interaction_1.Picker, { className: "flex", open: deferral && result === undefined, disableDismiss: fetching, onClose: onCancel, onClosed: onPickerClosed, children: [(0, jsx_runtime_1.jsxs)("section", { className: "shrink-0 w-[206px] flex flex-col gap-l8 p-l8 bg-modal-background", children: [(0, jsx_runtime_1.jsx)("h1", { className: "heading-md text-content-primary", children: "Select Collection" }), (0, jsx_runtime_1.jsx)(interaction_1.ChipFilters, { title: "Site Collections", options: collectionGroups, selectedOptions: collectionGroup && [collectionGroup], onToggle: (collectionGroup, selected) => selected && setCollectionGroup(collectionGroup), renderLabel: collectionGroup => collectionGroup.template.name, disabled: fetching })] }), (0, jsx_runtime_1.jsxs)("section", { className: "flex-1 flex flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l8 overflow-y-scroll", tabIndex: -1, children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { mode: "wait", initial: false, children: renderPicker({ language, error, collectionGroups, collectionGroup, collections, tagOptions, tagFilters, onPick, setTagTooltip, fetching }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end items-center p-l8 border-t border-solid border-border-l1", children: (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", size: "sm", onClick: onCancel, disabled: fetching, children: "Cancel" }) }), (0, jsx_runtime_1.jsx)(interaction_1.Popup, { className: (0, classnames_1.default)('max-w-[200px] bg-surface2 rounded-md p-l5', 'border border-solid border-border-l1 shadow-tooltip', 'flex flex-wrap items-center gap-l4'), open: !!tagTooltip, anchor: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.anchor, anchorOffset: 4, placement: "top", disableOverlay: true, onClose: () => setTagTooltip(undefined), children: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.tags.map(tag => (0, jsx_runtime_1.jsx)(feedback_1.Badge, { variant: "outlinedTiny", status: "draft", label: tag.name }, tag.data)) })] })] }));
+});
+function renderPicker({ language, schema, error, collectionGroups, collectionGroup, collections, tagOptions, tagFilters, onPick, setTagTooltip, fetching }) {
+    // show error if we have one
+    if (error) {
+        return ((0, jsx_runtime_1.jsx)(transitions_1.FadeIn, { className: "flex flex-col justify-center items-center", children: (0, jsx_runtime_1.jsx)(feedback_1.ErrorMessage, { error: error }) }, "error"));
+    }
+    // or show loader if filters aren't loaded (or if fetching)
+    else if (fetching || !collectionGroups || !collections || !tagOptions) {
+        return ((0, jsx_runtime_1.jsx)(transitions_1.FadeIn, { className: "w-full h-full flex flex-col justify-center items-center", children: (0, jsx_runtime_1.jsx)(interaction_1.Loader, { size: "lg" }) }, "loader"));
+    }
+    // show empty state if there are no pages
+    else if (!collectionGroup || collections.length === 0) {
+        return ((0, jsx_runtime_1.jsx)(transitions_1.FadeIn, { className: "h-full flex flex-wrap justify-center items-center", children: (0, jsx_runtime_1.jsxs)(feedback_1.EmptyState, { variant: "missing", size: "sm", children: [(0, jsx_runtime_1.jsx)("p", { className: "body-md text-content-secondary text-pretty", children: "There are no collections available that match your criteria." }), (0, jsx_runtime_1.jsx)("p", { className: "body-md text-content-secondary text-pretty", children: "Create a new collection." })] }) }, "pages.empty"));
+    }
+    // or show pages (filtered)
+    else {
+        // get tags that are available (no tags at all means "all" of the group is chosen)
+        const collectionSchema = collectionGroup.template;
+        const schemaTags = collectionSchema.tags.flatMap(tagGroup => Object.values(tagGroup.tags));
+        const activeTagFilters = tagFilters.filter(tag => schemaTags.includes(tag));
+        const tags = tagOptions
+            .filter(({ group }) => collectionSchema.tags.includes(group))
+            .flatMap(({ tags }) => {
+            const filteredTags = activeTagFilters.filter(tag => tags.has(tag));
+            return filteredTags.length > 0 ? filteredTags : tags.values().toArray();
+        });
+        const filteredCollections = activeTagFilters.length > 0
+            ? collections.filter(collection => collection.tags.some(tag => tags.includes(tag)))
+            : collections;
+        // render empty list if there are no items
+        if (filteredCollections.length === 0) {
+            return ((0, jsx_runtime_1.jsx)(transitions_1.FadeIn, { className: "h-full flex flex-col items-center justify-center gap-l5 px-l10", variant: "blur", children: (0, jsx_runtime_1.jsx)("p", { className: "body-md text-content-secondary text-pretty", children: "Sorry, but no collections match your filters." }) }, "pages.dyanmic.empty"));
+        }
+        // or render items
+        else {
+            return ((0, jsx_runtime_1.jsx)(transitions_1.FadeIn, { className: "flex flex-col gap-l3", children: filteredCollections.map(ref => renderCollectionRef({
+                    language,
+                    template: ref.template,
+                    ref,
+                    onPick,
+                    setTagTooltip
+                })) }, "pages.dynamic"));
+        }
+    }
+}
+function renderCollectionRef({ language, template, ref, onPick, setTagTooltip }) {
+    var _a;
+    // resolve props
+    const title = (_a = ref.name) !== null && _a !== void 0 ? _a : template.name;
+    const tags = ref ? ref.tags : [];
+    const visibleTags = tags.slice(0, Math.min(tags.length, 2));
+    const tooltipTags = tags.length > 2
+        ? tags.slice(2)
+        : [];
+    const disabled = ref.language !== language;
+    // helpers
+    const onClick = () => {
+        // ignore if disabled
+        if (disabled) {
+            return;
+        }
+        // otherwise, pick
+        else {
+            onPick(ref);
+        }
+    };
+    // render
+    const anchorId = `col-pick-tip-${ref.id}`;
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('flex items-center px-l7 py-l4 select-none interpolate', 'even:bg-modal-background rounded-md', {
+            'hover:bg-modal-surface2/tint2 cursor-pointer': !disabled,
+            'cursor-default': disabled
+        }), onClick: onClick, tabIndex: disabled ? undefined : 0, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('w-full flex items-center gap-l8 select-none interpolate', {
+                'opacity-disabled': disabled
+            }), onClick: onClick, children: [(0, jsx_runtime_1.jsx)("h3", { className: "flex-1 label-sm text-content-primary ellipsis", children: title }), tags.length > 0 &&
+                    (0, jsx_runtime_1.jsxs)("div", { className: "shrink-0 flex items-center gap-l4", children: [visibleTags.map(tag => (0, jsx_runtime_1.jsx)(feedback_1.Badge, { variant: "outlinedTiny", status: "draft", label: tag.name }, tag.data)), tooltipTags.length > 0 && ((0, jsx_runtime_1.jsx)(feedback_1.Badge, { anchorId: anchorId, variant: "outlinedTiny", status: "draft", label: `+${tooltipTags.length}`, onPointerEnter: e => setTagTooltip({ anchor: anchorId, tags: tooltipTags }), onPointerLeave: () => setTagTooltip(undefined) }))] })] }) }, ref.id));
+}

package/dist/core/components/fields/media/index.d.ts

@@ -0,0 +1,3 @@
+export * from './MediaCard';
+export * from './MediaEditor';
+export * from './MediaPicker';

package/dist/core/components/fields/media/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MediaCard"), exports);
+__exportStar(require("./MediaEditor"), exports);
+__exportStar(require("./MediaPicker"), exports);

package/dist/core/components/fields/object/ObjectEditor.js

@@ -58,5 +58,5 @@ exports.ObjectEditor = (0, react_1.forwardRef)(function ObjectEditor(_, ref) {
         return null;
     }
     // render
-    return ((0, jsx_runtime_1.jsxs)(interaction_1.CenterSheet, { className: "h-full flex flex-col gap-l6", name: field.name, open: !!deferral && result === undefined, onClose: onClose, onClosed: onClosed, children: [(0, jsx_runtime_1.jsxs)("div", { className: "h-48 flex items-center gap-l4 px-l7", children: [(0, jsx_runtime_1.jsx)(interaction_1.IconButton, { icon: "X", onClick: onClose }), (0, jsx_runtime_1.jsx)("h1", { className: "label-sm text-content-primary", children: field.name }), (0, jsx_runtime_1.jsx)("span", { className: "flex-1" }), (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "primary", size: "sm", disabled: !field.modified, onClick: () => setResult(field.value), children: field.isNew ? 'Create' : 'Update' })] }), (0, jsx_runtime_1.jsx)(FieldsPanel_1.FieldsPanel, { className: "flex-1 px-l7", title: schema.name, fields: field.fields })] }));
+    return ((0, jsx_runtime_1.jsxs)(interaction_1.CenterSheet, { className: "h-full flex flex-col gap-l6", name: field.name, open: !!deferral && result === undefined, onClose: onClose, onClosed: onClosed, children: [(0, jsx_runtime_1.jsxs)("div", { className: "h-48 flex items-center gap-l8 px-l7", children: [(0, jsx_runtime_1.jsx)(interaction_1.IconButton, { icon: "X", onClick: onClose }), (0, jsx_runtime_1.jsx)("h1", { className: "label-sm text-content-primary", children: field.name }), (0, jsx_runtime_1.jsx)("span", { className: "flex-1" }), (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "primary", size: "sm", disabled: !field.modified, onClick: () => setResult(field.value), children: field.isNew ? 'Create' : 'Update' })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 flex flex-col gap-l10 px-l6 py-l10 overflow-y-scroll scrollbar-thin bg-background", tabIndex: -1, children: (0, jsx_runtime_1.jsx)(FieldsPanel_1.FieldsPanel, { className: "flex-1", title: schema.name, fields: field.fields, autoFocus: true }) })] }));
 });

package/dist/core/components/fields/page/PagePicker.d.ts

@@ -1,5 +1,5 @@
 import { Language, Schema } from '@nascentdigital/funnel-core';
-import { Page } from '../../../domain';
+import { IPage } from '../../../domain';
 export declare const PagePicker: import("react").ForwardRefExoticComponent<PagePicker.Props & import("react").RefAttributes<PagePicker.Ref>>;
 export declare namespace PagePicker {
     type Props = {
@@ -14,5 +14,5 @@ export declare namespace PagePicker {
         tags?: ReadonlyArray<Schema.Tag>;
         disabledIds?: ReadonlyArray<Schema.Page.Id>;
     };
-    type Result = Page.Ref | undefined;
+    type Result = IPage.Ref | undefined;
 }

package/dist/core/components/fields/page/PagePicker.js

@@ -205,7 +205,7 @@ exports.PagePicker = (0, react_1.forwardRef)(function PagePicker({ language }, r
                             ? 'Primary'
                             : filter.template.name }), tagOptions === null || tagOptions === void 0 ? void 0 : tagOptions.map(({ group, tags: groupTags }) => (0, jsx_runtime_1.jsx)(interaction_1.ChipFilters, { title: group.name, multiselect: true, options: groupTags.values().toArray(), selectedOptions: tagFilters.filter(tag => groupTags.has(tag)), onToggle: (tag, selected) => setTagFilters(tags => selected
                             ? [...tags, tag]
-                            : tags.filter(t => t !== tag)), onToggleAll: () => setTagFilters(tags => tags.filter(tag => !groupTags.has(tag))), renderLabel: tag => tag.name }, group.id))] }), (0, jsx_runtime_1.jsxs)("section", { className: "flex-1 flex flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l8 overflow-y-scroll", children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { mode: "wait", initial: false, children: renderPicker({ site, language, disabledIds, error, pageFilters, pageFilter, tagOptions, tagFilters, pagesSchema, pages, onPick, setTagTooltip }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end items-center p-l8 border-t border-solid border-border-l1", children: (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", size: "sm", onClick: onCancel, children: "Cancel" }) }), (0, jsx_runtime_1.jsx)(interaction_1.Popup, { className: (0, classnames_1.default)('max-w-[200px] bg-surface2 rounded-md p-l5', 'border border-solid border-border-l1 shadow-tooltip', 'flex flex-wrap items-center gap-l4'), open: !!tagTooltip, anchor: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.anchor, anchorOffset: 4, placement: "top", disableOverlay: true, onClose: () => setTagTooltip(undefined), children: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.tags.map(tag => (0, jsx_runtime_1.jsx)(feedback_1.Badge, { variant: "outlinedTiny", status: "draft", label: tag.name }, tag.data)) })] })] }));
+                            : tags.filter(t => t !== tag)), onToggleAll: () => setTagFilters(tags => tags.filter(tag => !groupTags.has(tag))), renderLabel: tag => tag.name }, group.id))] }), (0, jsx_runtime_1.jsxs)("section", { className: "flex-1 flex flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l8 overflow-y-scroll", tabIndex: -1, children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { mode: "wait", initial: false, children: renderPicker({ site, language, disabledIds, error, pageFilters, pageFilter, tagOptions, tagFilters, pagesSchema, pages, onPick, setTagTooltip }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end items-center p-l8 border-t border-solid border-border-l1", children: (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", size: "sm", onClick: onCancel, children: "Cancel" }) }), (0, jsx_runtime_1.jsx)(interaction_1.Popup, { className: (0, classnames_1.default)('max-w-[200px] bg-surface2 rounded-md p-l5', 'border border-solid border-border-l1 shadow-tooltip', 'flex flex-wrap items-center gap-l4'), open: !!tagTooltip, anchor: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.anchor, anchorOffset: 4, placement: "top", disableOverlay: true, onClose: () => setTagTooltip(undefined), children: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.tags.map(tag => (0, jsx_runtime_1.jsx)(feedback_1.Badge, { variant: "outlinedTiny", status: "draft", label: tag.name }, tag.data)) })] })] }));
 });
 function renderPicker({ site, language, disabledIds, error, pageFilters, pageFilter, tagOptions, tagFilters, pagesSchema, pages, onPick, setTagTooltip }) {
     // show error if we have one

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

@@ -70,7 +70,7 @@ function Combobox({ id: externalId, className, size = 'md', maxRows = 6, rowHeig
                     }), style: {
                         minWidth: button ? `${button.offsetWidth}px` : 'auto',
                         maxHeight: maxRows * rowHeight + (rowPaddingY * 2)
-                    }, role: "listbox", children: options.map((option, index) => {
+                    }, role: "listbox", tabIndex: -1, children: options.map((option, index) => {
                         // render
                         const optionKey = getOptionId(id, option);
                         const selected = option.id === selectedOptionId;

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

@@ -1,5 +1,4 @@
 import { Callback, Timestamp } from '@nascentdigital/funnel-core';
-import 'flatpickr/dist/themes/dark.css';
 export declare function DateTimePicker({ className, disabled, placeholder, date, onChange, ...optionsRaw }: DateTimePicker.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace DateTimePicker {
     type Props = {

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

@@ -19,8 +19,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const client_1 = require("@nascentdigital/funnel-ui/client");
 const flatpickr_1 = __importDefault(require("flatpickr"));
 const react_1 = require("react");
-// styles
-require("flatpickr/dist/themes/dark.css");
 // component
 function DateTimePicker(_a) {
     var { className, disabled = false, placeholder, date, onChange } = _a, optionsRaw = __rest(_a, ["className", "disabled", "placeholder", "date", "onChange"]);

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

@@ -57,11 +57,11 @@ exports.MultiSelectControls = (0, react_1.forwardRef)(function MultiSelectContro
     };
     // render controls when selecting
     if (selecting) {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex flex-wrap items-center gap-l5', className), children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "secondary", size: "sm", onClick: selectedIdCount < idCount ? onSelectAll : onDeselectAll, children: selectedIdCount < idCount ? selectAllLabel : deselectAllLabel }), actions, (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", size: "sm", onClick: onSelectCancel, children: cancelLabel })] }));
+        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex flex-wrap items-center gap-l5', className), children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "secondary", size: "xs", onClick: selectedIdCount < idCount ? onSelectAll : onDeselectAll, children: selectedIdCount < idCount ? selectAllLabel : deselectAllLabel }), actions, (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", size: "xs", onClick: onSelectCancel, children: cancelLabel })] }));
     }
     // or render control to enter selection
     else {
-        return ((0, jsx_runtime_1.jsx)("div", { className: className, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", size: "sm", onClick: onSelectStart, children: editLabel }) }));
+        return ((0, jsx_runtime_1.jsx)("div", { className: className, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "secondary", size: "xs", onClick: onSelectStart, children: editLabel }) }));
     }
 });
 // hook
@@ -73,16 +73,13 @@ function useMultiSelectControls() {
     (0, react_1.useEffect)(() => {
         // skip if not bound
         if (!multiSelect) {
-            console.debug('[useMultiSelectControls] controls not ready');
             return;
         }
-        console.debug('[useMultiSelectControls] binding to controls');
         // touch on event
         const subscription = multiSelect.events$.subscribe(touch);
         // unsubscribe on unmount
         return () => subscription.unsubscribe();
     }, [touch, multiSelect]);
-    console.debug('[useMultiSelectControls] updated', multiSelect);
     // return selector
     return [setMultiSelect, multiSelect];
 }

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

@@ -142,6 +142,7 @@ function getPopupClassNames({ anchor, placement }) {
                 'anchored-top-span-right': placement === 'top-start',
                 'anchored-bottom': placement === 'bottom',
                 'anchored-left': placement === 'left',
+                'anchored-left-span-bottom': placement === 'left-start',
                 'anchored-right': placement === 'right',
                 'anchored-bottom-span-left': placement === 'bottom-end'
             })

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

@@ -29,5 +29,5 @@ function QuickEditor(_a) {
             '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 })] })));
+                (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", tabIndex: -1, children: children })] })));
 }

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

@@ -96,7 +96,7 @@ exports.QuickPicker = (0, react_1.forwardRef)(function QuickPicker({ variant, ti
                     'flex flex-wrap gap-l5 items-center ': variant === 'card',
                     'w-[288px]': variant === 'card' && items.length < 4,
                     'w-[372px] max-h-[213px]': variant === 'card' && items.length >= 4
-                }), children: items.map(item => renderCard({
+                }), tabIndex: -1, children: items.map(item => renderCard({
                     item,
                     content: renderItem(item),
                     selected: item.id === selectedItem,

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-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 &&
+                            : 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", tabIndex: -1, 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/centersheet/CenterSheet.js

@@ -34,8 +34,10 @@ exports.CenterSheet = (0, react_2.forwardRef)(function CenterSheet({ className,
     }), [open]);
     // handle open/close events
     (0, react_2.useEffect)(() => {
-        // raise open event
+        // handle open change
+        let unlock = undefined;
         if (open) {
+            // raise open event
             eventBus.next({
                 type: 'onOpen',
                 sheetInfo: {
@@ -43,6 +45,8 @@ exports.CenterSheet = (0, react_2.forwardRef)(function CenterSheet({ className,
                     name: nameRef.current
                 }
             });
+            // lock tabbing
+            unlock = funnel_core_1.Browser.lockFocus(`#${CSS.escape(id)}`);
         }
         // or close event
         else {
@@ -51,6 +55,8 @@ exports.CenterSheet = (0, react_2.forwardRef)(function CenterSheet({ className,
                 sheetId: id
             });
         }
+        // unlock tabbing on unmount (if locked)
+        return () => unlock && unlock();
     }, [id, eventBus, open]);
     // ensure close on unmount
     (0, react_2.useEffect)(() => {

package/dist/core/components/interaction/centersheet/CenterSheetContainer.js

@@ -58,7 +58,9 @@ function CenterSheetContainer({ children }) {
     // render
     const { sheets } = context;
     const active = sheets.length > 0;
-    return ((0, jsx_runtime_1.jsxs)(CenterSheetContext_1.CenterSheetContext.Provider, { value: context, children: [children, (0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 pointer-events-none", children: (0, jsx_runtime_1.jsx)("div", { id: anchorId, className: "relative w-full h-full", children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('absolute inset-0 z-backdrop interpolate will-change-[backdrop-filter,opacity]', 'backdrop-blur-[9px] bg-glass-fill-l1', {
+    return ((0, jsx_runtime_1.jsxs)(CenterSheetContext_1.CenterSheetContext.Provider, { value: context, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('w-dvw h-dvh', {
+                    'pointer-events-none': active
+                }), children: children }), (0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 pointer-events-none", children: (0, jsx_runtime_1.jsx)("div", { id: anchorId, className: "relative w-full h-full", children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('absolute inset-0 z-backdrop interpolate will-change-[backdrop-filter,opacity]', 'backdrop-blur-[9px] bg-glass-fill-l1/tint3', {
                             'pointer-events-none opacity-none': !active,
                             'pointer-events-auto opacity-full': active
                         }) }, "backdrop") }) })] }));

package/dist/core/components/transitions/FadeIn.js

@@ -18,24 +18,12 @@ exports.FadeIn = FadeIn;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("motion/react");
+const interaction_1 = require("../interaction");
 // component
 function FadeIn(_a) {
     var { className, variant = 'default' } = _a, props = __rest(_a, ["className", "variant"]);
     // render
     return ((0, jsx_runtime_1.jsx)(react_1.motion.div, Object.assign({ className: (0, classnames_1.default)(className, {
             'will-change-[opacity,filter]': variant === 'blur'
-        }), variants: Animations[variant], initial: "initial", animate: "animate", exit: "exit" }, props)));
+        }), variants: interaction_1.Animate.Variants.fade, initial: "initial", animate: "animate", exit: "exit" }, props, { tabIndex: -1 })));
 }
-// helper
-const Animations = {
-    default: {
-        initial: { opacity: 0 },
-        animate: { opacity: 1, transition: { duration: 0.4, ease: 'easeIn' } },
-        exit: { opacity: 0, transition: { duration: 0.2, ease: 'easeOut' } }
-    },
-    blur: {
-        initial: { opacity: 0, filter: 'blur(5px)' },
-        animate: { opacity: 1, filter: 'blur(0px)' },
-        exit: { opacity: 0, filter: 'blur(5px)', transition: { duration: 0.2 } }
-    }
-};

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' | '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' | 'Monitor' | 'MonitorCog' | 'Moon' | 'NotebookPen' | 'Pencil' | 'Pin' | 'Plus' | 'Redo' | 'RefreshCw' | 'RotateCcw' | 'RotateCw' | 'SearchCode' | 'Settings' | 'Smartphone' | 'SquarePlay' | 'Star' | 'Strikethrough' | 'Subscript' | 'Sun' | 'Superscript' | 'TextAlignStart' | 'Trash' | 'TriangleAlert' | 'Trophy' | 'Underline' | 'Undo' | 'Upload' | 'UserRound' | 'X';
+    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' | 'Monitor' | 'MonitorCog' | 'Moon' | 'NotebookPen' | 'Pencil' | 'Pin' | 'Plus' | 'Redo' | 'RefreshCw' | 'RotateCcw' | 'RotateCw' | 'Search' | 'SearchCode' | 'Settings' | 'Smartphone' | '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

@@ -80,6 +80,7 @@ function Icon({ className, variant, size: sizing = 'md' }) {
             'RefreshCw',
             'RotateCcw',
             'RotateCw',
+            'Search',
             'SearchCode',
             'Settings',
             'Smartphone',
@@ -235,6 +236,8 @@ function getIcon(variant) {
             return lucide_react_1.RotateCcw;
         case 'RotateCw':
             return lucide_react_1.RotateCw;
+        case 'Search':
+            return lucide_react_1.Search;
         case 'SearchCode':
             return lucide_react_1.SearchCode;
         case 'Settings':

package/dist/core/containers/AssetRepositoryContainer.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export declare function AssetRepositoryContainer({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/dist/core/containers/AssetRepositoryContainer.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetRepositoryContainer = AssetRepositoryContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const client_1 = require("../client");
+const hooks_1 = require("../hooks");
+const repository_1 = require("../repository");
+// container
+function AssetRepositoryContainer({ children }) {
+    // bind to hooks
+    const client = (0, client_1.useEditorApi)();
+    const repository = (0, react_1.useMemo)(() => {
+        return new repository_1.AssetRepository(client);
+    }, [client]);
+    // render
+    return ((0, jsx_runtime_1.jsx)(hooks_1.AssetRepositoryContext.Provider, { value: repository, children: children }));
+}

package/dist/core/containers/CollectionRepositoryContainer.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export declare function CollectionRepositoryContainer({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/dist/core/containers/CollectionRepositoryContainer.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollectionRepositoryContainer = CollectionRepositoryContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const client_1 = require("../client");
+const hooks_1 = require("../hooks");
+const repository_1 = require("../repository");
+// container
+function CollectionRepositoryContainer({ children }) {
+    // bind to hooks
+    const client = (0, client_1.useEditorApi)();
+    const repository = (0, react_1.useMemo)(() => {
+        return new repository_1.CollectionRepository(client);
+    }, [client]);
+    // render
+    return ((0, jsx_runtime_1.jsx)(hooks_1.CollectionRepositoryContext.Provider, { value: repository, children: children }));
+}

package/dist/core/containers/PageRepositoryContainer.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export declare function PageRepositoryContainer({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/dist/core/containers/PageRepositoryContainer.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageRepositoryContainer = PageRepositoryContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const client_1 = require("../client");
+const hooks_1 = require("../hooks");
+const repository_1 = require("../repository");
+// container
+function PageRepositoryContainer({ children }) {
+    // bind to hooks
+    const client = (0, client_1.useEditorApi)();
+    const repository = (0, react_1.useMemo)(() => {
+        return new repository_1.PageRepository(client);
+    }, [client]);
+    // render
+    return ((0, jsx_runtime_1.jsx)(hooks_1.PageRepositoryContext.Provider, { value: repository, children: children }));
+}

package/dist/core/containers/index.d.ts

@@ -0,0 +1,3 @@
+export * from './AssetRepositoryContainer';
+export * from './CollectionRepositoryContainer';
+export * from './PageRepositoryContainer';

package/dist/core/containers/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./AssetRepositoryContainer"), exports);
+__exportStar(require("./CollectionRepositoryContainer"), exports);
+__exportStar(require("./PageRepositoryContainer"), exports);