@nascentdigital/funnel-editor 4.6.7 → 5.0.2

package/dist/core/repository/SerializePageUpdate.js

@@ -0,0 +1,292 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SerializePageUpdate = void 0;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+// namespace
+var SerializePageUpdate;
+(function (SerializePageUpdate) {
+    // helpers
+    function serializeSectionUpdate(updates, section, parentPath, savables) {
+        // track insert/update
+        let sectionChanged = false;
+        const path = [parentPath, section.key];
+        const { blocks, initialBlocks = [] } = section;
+        const blockIds = [];
+        blocks.forEach((sectionBlock, index) => {
+            // track id
+            const { id, block } = sectionBlock;
+            blockIds.push(id);
+            // track insert
+            const originalIndex = initialBlocks.findIndex(item => item.id === id);
+            if (originalIndex < 0) {
+                // add as insertion
+                updates.push({
+                    type: 'section.insert',
+                    path,
+                    index,
+                    section: {
+                        type: 'section',
+                        version: section.schema.version
+                    },
+                    block: sectionBlock.value
+                });
+                // mark changed
+                sectionChanged = true;
+                // track nested savables for section-block insertion
+                const fields = [...block.config, ...block.fields];
+                fields.forEach(field => {
+                    if (field.modified) {
+                        savables.push(field);
+                    }
+                });
+            }
+            // recurse update if it's set
+            else if (block.modified) {
+                // track name field
+                if (block.nameField.modified) {
+                    // send update
+                    updates.push({
+                        type: 'section.blockName',
+                        path,
+                        id,
+                        value: funnel_core_1.Schema.TextField.Value.fromData(block.nameField.value) || null
+                    });
+                    // track change
+                    savables.push(block.nameField);
+                }
+                // serialize config fields
+                serializeFieldsUpdate(updates, block.config, [...path, id, 'config'], savables);
+                // serialize content fields
+                serializeFieldsUpdate(updates, block.fields, [...path, id, 'fields'], savables);
+            }
+        });
+        // track delete/reorder
+        let reordered = false;
+        initialBlocks.forEach(({ id }, index) => {
+            // add to deleted list if the original doesn't exist anymore
+            const blockIndex = blockIds.findIndex(blockId => blockId === id);
+            if (blockIndex < 0) {
+                // delete
+                updates.push({
+                    type: 'section.delete',
+                    path,
+                    id
+                });
+                // track reorder
+                sectionChanged = true;
+            }
+            // or mark reorder if index isn't the same
+            else if (blockIndex !== index) {
+                reordered = true;
+                sectionChanged = true;
+            }
+        });
+        // track reorder
+        if (reordered) {
+            updates.push({
+                type: 'section.reorder',
+                path,
+                ids: blockIds
+            });
+        }
+        // track section change (if any)
+        if (sectionChanged) {
+            savables.push(section);
+        }
+    }
+    SerializePageUpdate.serializeSectionUpdate = serializeSectionUpdate;
+    function serializeBlockUpdate(updates, block, parentPath, savables) {
+        // ignore if block isn't activated
+        if (!block.activated) {
+            return;
+        }
+        // create a new block if it's new
+        else if (block.isNew) {
+            // create update
+            updates.push({
+                type: 'block.create',
+                path: [parentPath, block.key],
+                block: block.value
+            });
+            // track block
+            savables.push(block);
+            // track nested savables for block insertion
+            const fields = [...block.config, ...block.fields];
+            fields.forEach(field => {
+                if (field.modified) {
+                    savables.push(field);
+                }
+            });
+        }
+        // or just track updated fields
+        else {
+            // serialize config fields
+            serializeFieldsUpdate(updates, block.config, [parentPath, block.key, 'config'], savables);
+            // serialize content fields
+            serializeFieldsUpdate(updates, block.fields, [parentPath, block.key, 'fields'], savables);
+        }
+    }
+    SerializePageUpdate.serializeBlockUpdate = serializeBlockUpdate;
+    function serializeFieldsUpdate(updates, fields, parentPath, savables) {
+        // handle fields in block
+        fields.forEach(field => {
+            if (field instanceof funnel_core_1.Field) {
+                serializeFieldUpdate(updates, field, parentPath, savables);
+            }
+            else if (field instanceof funnel_core_1.ObjectField) {
+                serializeObjectFieldUpdate(updates, field, parentPath, savables);
+            }
+            else {
+                serializeListUpdate(updates, field, parentPath, savables);
+            }
+        });
+        // return changes (for chaining)
+        return updates;
+    }
+    SerializePageUpdate.serializeFieldsUpdate = serializeFieldsUpdate;
+    function serializeObjectFieldUpdate(updates, field, parentPath, savables) {
+        var _a;
+        // create object if it's new
+        if (field.isNew) {
+            // add insert
+            updates.push({
+                type: 'object.insert',
+                path: [...parentPath, field.id],
+                value: (_a = field.value) !== null && _a !== void 0 ? _a : null
+            });
+            // track save
+            savables.push(field);
+        }
+        // or process subfields
+        else if (field.exists) {
+            // save fields
+            serializeFieldsUpdate(updates, field.fields, [...parentPath, field.id], savables);
+            // track save
+            savables.push(field);
+        }
+        // or process opted out field
+        else if (field.optedOut) {
+            // remove field
+            updates.push({
+                type: 'value',
+                path: [...parentPath, field.id],
+                value: null
+            });
+            // track save
+            savables.push(field);
+        }
+    }
+    SerializePageUpdate.serializeObjectFieldUpdate = serializeObjectFieldUpdate;
+    function serializeFieldUpdate(updates, field, parentPath, savables) {
+        var _a;
+        // track change if modified (ignore if field is sandboxed)
+        if (field.modified && !field.sandboxed) {
+            // set field
+            updates.push({
+                type: 'value',
+                path: [...parentPath, field.id],
+                value: ((_a = field.value) !== null && _a !== void 0 ? _a : null)
+            });
+            // track save
+            savables.push(field);
+        }
+    }
+    SerializePageUpdate.serializeFieldUpdate = serializeFieldUpdate;
+    function serializeListUpdate(updates, list, parentPath, savables) {
+        var _a, _b;
+        // create list if it's new
+        if (list.isNew) {
+            // add new list
+            updates.push({
+                type: 'value',
+                path: [...parentPath, list.id],
+                value: funnel_core_1.Schema.Field.Data.newValue('list')
+            });
+            // track save
+            savables.push(list);
+        }
+        // or drop list on opt-out
+        else if (list.optedOut) {
+            // drop list
+            updates.push({
+                type: 'value',
+                path: [...parentPath, list.id],
+                value: null
+            });
+            // track save
+            savables.push(list);
+        }
+        // or if it is modified (otherwise ignore)
+        else if (list.modified) {
+            // add new list if there's nothing and it's new
+            const path = [...parentPath, list.id];
+            const { value: currentValue, items: fields, initialValue } = list;
+            const currentItems = (_a = currentValue === null || currentValue === void 0 ? void 0 : currentValue.value) !== null && _a !== void 0 ? _a : [];
+            const initialItems = (_b = initialValue === null || initialValue === void 0 ? void 0 : initialValue.value) !== null && _b !== void 0 ? _b : [];
+            const fieldIds = [];
+            // track inserts/updates of elements
+            currentItems.forEach((item, index) => {
+                // track id
+                const { id, field } = fields[index];
+                fieldIds.push(item.id);
+                // track insert
+                const originalIndex = initialItems.findIndex(initialItem => initialItem.id === id);
+                if (originalIndex < 0) {
+                    updates.push({
+                        type: 'array.insert',
+                        path,
+                        index,
+                        id,
+                        value: item
+                    });
+                }
+                // track update
+                else if (field.modified) {
+                    // object field updates should be recursed and indexed
+                    if (field instanceof funnel_core_1.ObjectField) {
+                        serializeFieldsUpdate(updates, field.fields, [...path, id], savables);
+                    }
+                    // basic field updates can be done inline
+                    else {
+                        updates.push({
+                            type: 'value',
+                            path: [...path, id],
+                            value: item
+                        });
+                    }
+                }
+            });
+            // track delete/reorder
+            let reordered = false;
+            let deleted = 0;
+            initialItems.forEach(({ id }, index) => {
+                // add to deleted list if the original doesn't exist anymore
+                const fieldIndex = fieldIds.findIndex(fieldId => fieldId === id) + deleted;
+                if (fieldIndex < 0) {
+                    updates.push({
+                        type: 'array.delete',
+                        path,
+                        id
+                    });
+                    // track deletion
+                    ++deleted;
+                }
+                // or mark reorder if index isn't the same
+                else if (fieldIndex !== index) {
+                    reordered = true;
+                }
+            });
+            // track reorder
+            if (reordered) {
+                updates.push({
+                    type: 'array.reorder',
+                    path,
+                    ids: fieldIds
+                });
+            }
+            // track save
+            savables.push(list);
+        }
+    }
+    SerializePageUpdate.serializeListUpdate = serializeListUpdate;
+})(SerializePageUpdate || (exports.SerializePageUpdate = SerializePageUpdate = {}));

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

@@ -1,7 +1,11 @@
+export * from './AssetRepository';
 export * from './CollectionRepository';
 export * from './CollectionSerializer';
 export * from './CollectionTarget';
 export * from './FieldSerializer';
+export * from './IAssetRepository';
+export * from './ICollectionRepository';
+export * from './IPageRepository';
 export * from './PageRepository';
 export * from './PageSerializer';
 export * from './PageTarget';

package/dist/core/repository/index.js

@@ -14,10 +14,14 @@ 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("./AssetRepository"), exports);
 __exportStar(require("./CollectionRepository"), exports);
 __exportStar(require("./CollectionSerializer"), exports);
 __exportStar(require("./CollectionTarget"), exports);
 __exportStar(require("./FieldSerializer"), exports);
+__exportStar(require("./IAssetRepository"), exports);
+__exportStar(require("./ICollectionRepository"), exports);
+__exportStar(require("./IPageRepository"), exports);
 __exportStar(require("./PageRepository"), exports);
 __exportStar(require("./PageSerializer"), exports);
 __exportStar(require("./PageTarget"), exports);

package/dist/core/splash/SplashContainer.d.ts

@@ -1,5 +1,7 @@
 import { PropsWithChildren } from 'react';
-export declare function SplashContainer({ children }: SplashContainer.Props): import("react/jsx-runtime").JSX.Element;
+export declare function SplashContainer({ message, children }: SplashContainer.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace SplashContainer {
-    type Props = PropsWithChildren;
+    type Props = PropsWithChildren & {
+        message?: string;
+    };
 }

package/dist/core/splash/SplashContainer.js

@@ -8,16 +8,16 @@ const Splash_1 = require("./Splash");
 const SplashContext_1 = require("./SplashContext");
 const SplashService_1 = require("./SplashService");
 // component
-function SplashContainer({ children }) {
+function SplashContainer({ message = 'Signing you in', children }) {
     // bind hooks + memo
     const service = (0, react_2.useMemo)(() => {
         // create service
         const service = new SplashService_1.SplashService();
         // start in a loading state
-        service.showLoading(`Signing you in`);
+        service.showLoading(message);
         // return service
         return service;
-    }, []);
+    }, [message]);
     const [context, setContext] = (0, react_2.useState)(() => ({ service }));
     // update context on event changes
     (0, react_2.useEffect)(() => {

package/dist/dashboard/screens/Dashboard.js

@@ -23,7 +23,7 @@ function Dashboard() {
         splash.dismiss();
     }, [splash]);
     // render
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-dvw h-dvh flex flex-col bg-surface1", children: [(0, jsx_runtime_1.jsx)(core_1.Header, { breadcrumbs: [brand.name, 'Dashboard'], back: "none" }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex-1", children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('w-full sm:w-4/5 md:w-3/5 max-h-full overflow-y-scroll p-l6', 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 grid-auto-rows auto-cols-fr auto-rows-fr gap-l6'), children: [(0, jsx_runtime_1.jsx)(components_1.NavCard, { title: "My Site's Pages", caption: "Your main website.", action: "Explore pages", onClick: () => router.navigateToTemplates({ region: brand.regionalization.fallback }) }), collections.length > 0 &&
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-dvw h-dvh flex flex-col bg-surface1", children: [(0, jsx_runtime_1.jsx)(core_1.Header, { breadcrumbs: [brand.name, 'Dashboard'], back: "none" }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex-1", children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('w-full sm:w-4/5 md:w-3/5 max-h-full overflow-y-scroll p-l6', 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 grid-auto-rows auto-cols-fr auto-rows-fr gap-l6'), tabIndex: -1, children: [(0, jsx_runtime_1.jsx)(components_1.NavCard, { title: "My Site's Pages", caption: "Your main website.", action: "Explore pages", onClick: () => router.navigateToTemplates({ region: brand.regionalization.fallback }) }), collections.length > 0 &&
                             (0, jsx_runtime_1.jsx)(components_1.NavCard, { title: "Collections", caption: "Shared data used by site pages.", action: "Manage collections", onClick: () => router.navigateToCollections() }), (0, jsx_runtime_1.jsx)(components_1.NavCard, { title: "Publishing", caption: "View and manage groups of changes.", action: "Manage changes", onClick: () => router.navigateToChangeSets() }), (0, jsx_runtime_1.jsx)(components_1.NavCard, { title: "Media", caption: "Images, videos and other files.", action: "Manage media", disabled: true }), user.hasAny('user.create', 'user.update', 'user.delete') &&
                             (0, jsx_runtime_1.jsx)(components_1.NavCard, { title: "Users", caption: "Control who has access to content.", action: "Manage Users", onClick: () => router.navigateToUsers() }), user.role.id === 'owner' &&
                             (0, jsx_runtime_1.jsx)(components_1.NavCard, { variant: "destructive", title: "Developer", caption: "Access tools tomaintain the site.", action: "Developer Tools", onClick: () => router.navigateToDevtools() })] }) })] }));

package/dist/devtools/screens/Devtools.js

@@ -66,5 +66,5 @@ function Devtools() {
         return ((0, jsx_runtime_1.jsxs)("div", { className: "w-dvw h-dvh flex flex-col bg-surface1", children: [(0, jsx_runtime_1.jsx)(core_1.Header, { breadcrumbs: [brand.name, 'Developer Tools'], back: "back", onBack: () => router.navigateToDashboard() }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)(core_1.EmptyState, { variant: "missing", size: "md", children: (0, jsx_runtime_1.jsx)("h1", { className: "heading text-content-primary", children: "You're not authorized to see this page!" }) }) })] }));
     }
     // render
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-dvw h-dvh flex flex-col bg-surface1", children: [(0, jsx_runtime_1.jsx)(core_1.Header, { breadcrumbs: [brand.name, 'Developer Tools'], back: "back", onBack: () => router.navigateToDashboard() }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex-1", children: (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 flex", children: [(0, jsx_runtime_1.jsx)("section", { className: "flex-1 h-full max-h-full overflow-y-scroll flex flex-wrap justify-start items-start gap-l6 p-l6", children: (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { mode: "wait", initial: true, children: (0, jsx_runtime_1.jsx)(core_1.Button, { variant: isEditorLocked ? 'destructive' : 'primary', iconLeft: isEditorLocked ? 'Lock' : 'LockOpen', onClick: onToggleEditorLockdown, disabled: !ready, children: isEditorLocked ? 'Unlock Editor' : 'Lock Editor' }) }) }), (0, jsx_runtime_1.jsx)("section", { className: "hidden md:block md:w-[280px] lg:w-[320px] xl:w-[350px] border-l border-solid border-border-l1 overflow-y-scroll shrink-0" })] }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-dvw h-dvh flex flex-col bg-surface1", children: [(0, jsx_runtime_1.jsx)(core_1.Header, { breadcrumbs: [brand.name, 'Developer Tools'], back: "back", onBack: () => router.navigateToDashboard() }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex-1", children: (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 flex", children: [(0, jsx_runtime_1.jsx)("section", { className: "flex-1 h-full max-h-full overflow-y-scroll flex flex-wrap justify-start items-start gap-l6 p-l6", tabIndex: -1, children: (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { mode: "wait", initial: true, children: (0, jsx_runtime_1.jsx)(core_1.Button, { variant: isEditorLocked ? 'destructive' : 'primary', iconLeft: isEditorLocked ? 'Lock' : 'LockOpen', onClick: onToggleEditorLockdown, disabled: !ready, children: isEditorLocked ? 'Unlock Editor' : 'Lock Editor' }) }) }), (0, jsx_runtime_1.jsx)("section", { className: "hidden md:block md:w-[280px] lg:w-[320px] xl:w-[350px] border-l border-solid border-border-l1 overflow-y-scroll shrink-0" })] }) })] }));
 }

package/dist/explore/components/CreatePageDialog.d.ts

@@ -1,10 +1,10 @@
 import { Schema } from '@nascentdigital/funnel-core';
-import { Page, Pages, Popup, Site } from '../../core';
+import { IPage, Pages, Popup, Site } from '../../core';
 export declare const CreatePageDialog: import("react").ForwardRefExoticComponent<import("react").RefAttributes<CreatePageDialog.Ref>>;
 export declare namespace CreatePageDialog {
     type Props = {};
     interface Ref {
-        createPage(options: Options): Promise<Page | undefined>;
+        createPage(options: Options): Promise<IPage | undefined>;
     }
     type Options = {
         site: Site;

package/dist/explore/screens/CollectionExplorer.js

@@ -46,7 +46,7 @@ function CollectionExplorer({ type }) {
         await router.navigateToCollection({ type, language, groupId });
     };
     // render
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-dvw h-dvh flex flex-col", children: [(0, jsx_runtime_1.jsx)(core_1.Header, { breadcrumbs: ['Dashboard', 'Collection explorer'], back: "back", onBack: () => router.navigateToCollections() }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex-1 overflow-y-scroll shrink-0", children: (0, jsx_runtime_1.jsx)("div", { className: "container-sm container-p", children: (0, jsx_runtime_1.jsx)(core_1.LoadingUntilReady, { className: "flex flex-col gap-l10 py-l14", ready: !!template && !!groupedCollections, children: renderCollections({ template, groupedCollections, onOpenLink, onCreateCollection }) }) }) }), (0, jsx_runtime_1.jsx)(components_1.CreateCollectionDialog, { ref: createDialogRef })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-dvw h-dvh flex flex-col", children: [(0, jsx_runtime_1.jsx)(core_1.Header, { breadcrumbs: ['Dashboard', 'Collection explorer'], back: "back", onBack: () => router.navigateToCollections() }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex-1 overflow-y-scroll shrink-0", tabIndex: -1, children: (0, jsx_runtime_1.jsx)("div", { className: "container-sm container-p", children: (0, jsx_runtime_1.jsx)(core_1.LoadingUntilReady, { className: "flex flex-col gap-l10 py-l14", ready: !!template && !!groupedCollections, children: renderCollections({ template, groupedCollections, onOpenLink, onCreateCollection }) }) }) }), (0, jsx_runtime_1.jsx)(components_1.CreateCollectionDialog, { ref: createDialogRef })] }));
 }
 function renderCollections({ template, groupedCollections, onOpenLink, onCreateCollection }) {
     // show loader if browser isn't ready

package/dist/explore/screens/CollectionsExplorer.js

@@ -21,7 +21,7 @@ function CollectionsExplorer(_) {
         }
     }, [splash, ready]);
     // render
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-dvw h-dvh flex flex-col bg-surface1", children: [(0, jsx_runtime_1.jsx)(core_1.Header, { back: "back", breadcrumbs: [brand.name, 'Collections'], onBack: () => router.navigateToDashboard() }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex-1", children: (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 flex", children: [(0, jsx_runtime_1.jsx)("section", { className: "w-[200px] md:w-[220px] lg:w-[300px] border-r border-solid border-border-l1 overflow-y-scroll shrink-0" }), (0, jsx_runtime_1.jsx)("section", { className: "flex-1 h-full max-h-full overflow-y-scroll flex flex-wrap justify-start items-start gap-l6 p-l8", children: (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: renderContent({ collections, router }) }) }), (0, jsx_runtime_1.jsx)("section", { className: "hidden md:block md:w-[280px] lg:w-[320px] xl:w-[350px] border-l border-solid border-border-l1 overflow-y-scroll shrink-0" })] }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-dvw h-dvh flex flex-col bg-surface1", children: [(0, jsx_runtime_1.jsx)(core_1.Header, { back: "back", breadcrumbs: [brand.name, 'Collections'], onBack: () => router.navigateToDashboard() }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex-1", children: (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 flex", children: [(0, jsx_runtime_1.jsx)("section", { className: "w-[200px] md:w-[220px] lg:w-[300px] border-r border-solid border-border-l1 overflow-y-scroll shrink-0", tabIndex: -1 }), (0, jsx_runtime_1.jsx)("section", { className: "flex-1 h-full max-h-full overflow-y-scroll flex flex-wrap justify-start items-start gap-l6 p-l8", tabIndex: -1, children: (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: renderContent({ collections, router }) }) }), (0, jsx_runtime_1.jsx)("section", { className: "hidden md:block md:w-[280px] lg:w-[320px] xl:w-[350px] border-l border-solid border-border-l1 overflow-y-scroll shrink-0", tabIndex: -1 })] }) })] }));
 }
 function renderContent({ collections, router }) {
     // show loader if browser isn't ready

package/dist/explore/screens/PageExplorer.js

@@ -48,7 +48,7 @@ function PageExplorer({ region, page: pageType }) {
         await router.navigateToPage({ page: template.type, region, language, slug });
     };
     // render
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-dvw h-dvh flex flex-col", children: [(0, jsx_runtime_1.jsx)(components_1.ExploreHeader, { breadcrumbs: ['Dashboard', 'Site explorer'], region: region, onBack: () => router.navigateToTemplates({ region }), onRegionChange: region => router.navigateToPages({ region: region.id, page: pageType }) }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex-1 overflow-y-scroll shrink-0", children: (0, jsx_runtime_1.jsx)("div", { className: "container-sm container-p", children: (0, jsx_runtime_1.jsx)(core_1.LoadingUntilReady, { className: "flex flex-col gap-l10 py-l14", ready: ready, children: renderPages({ template, groupedPages, onCreatePage, onOpenPage }) }) }) }), (0, jsx_runtime_1.jsx)(components_1.CreatePageDialog, { ref: createDialogRef })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-dvw h-dvh flex flex-col", children: [(0, jsx_runtime_1.jsx)(components_1.ExploreHeader, { breadcrumbs: ['Dashboard', 'Site explorer'], region: region, onBack: () => router.navigateToTemplates({ region }), onRegionChange: region => router.navigateToPages({ region: region.id, page: pageType }) }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex-1 overflow-y-scroll shrink-0", tabIndex: -1, children: (0, jsx_runtime_1.jsx)("div", { className: "container-sm container-p", children: (0, jsx_runtime_1.jsx)(core_1.LoadingUntilReady, { className: "flex flex-col gap-l10 py-l14", ready: ready, children: renderPages({ template, groupedPages, onCreatePage, onOpenPage }) }) }) }), (0, jsx_runtime_1.jsx)(components_1.CreatePageDialog, { ref: createDialogRef })] }));
 }
 function renderPages({ template, groupedPages, onCreatePage, onOpenPage }) {
     // show loader if not ready

package/dist/explore/screens/SiteExplorer.js

@@ -29,7 +29,7 @@ function SiteExplorer({ region }) {
         }
     };
     // render
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-dvw h-dvh flex flex-col", children: [(0, jsx_runtime_1.jsx)(components_1.ExploreHeader, { breadcrumbs: ['Dashboard'], region: region, onBack: () => router.navigateToDashboard(), onRegionChange: region => router.navigateToTemplates({ region: region.id }) }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex-1 overflow-y-scroll shrink-0", children: (0, jsx_runtime_1.jsx)("div", { className: "container-sm container-p", children: (0, jsx_runtime_1.jsxs)(core_1.LoadingUntilReady, { className: "flex flex-col gap-l10 py-l14", ready: ready, children: [(0, jsx_runtime_1.jsx)("h2", { className: "heading-lg text-content-primary", children: "Site explorer" }), (0, jsx_runtime_1.jsx)(core_1.Table, { className: "flex-1", children: site.overviews.map(overview => overview instanceof core_1.DynamicPageOverview
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-dvw h-dvh flex flex-col", children: [(0, jsx_runtime_1.jsx)(components_1.ExploreHeader, { breadcrumbs: ['Dashboard'], region: region, onBack: () => router.navigateToDashboard(), onRegionChange: region => router.navigateToTemplates({ region: region.id }) }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex-1 overflow-y-scroll shrink-0", tabIndex: -1, children: (0, jsx_runtime_1.jsx)("div", { className: "container-sm container-p", children: (0, jsx_runtime_1.jsxs)(core_1.LoadingUntilReady, { className: "flex flex-col gap-l10 py-l14", ready: ready, children: [(0, jsx_runtime_1.jsx)("h2", { className: "heading-lg text-content-primary", children: "Site explorer" }), (0, jsx_runtime_1.jsx)(core_1.Table, { className: "flex-1", children: site.overviews.map(overview => overview instanceof core_1.DynamicPageOverview
                                     ?
                                         (0, jsx_runtime_1.jsx)(core_1.Table, { nested: true, children: (0, jsx_runtime_1.jsx)(core_1.TableItem, { nested: true, iconLeft: "CornerDownRight", iconRight: "ChevronRight", details: (0, jsx_runtime_1.jsx)(core_1.CountBadge, { count: overview.count }), onClick: () => onPageClicked(overview), children: overview.template.name }) }, overview.type)
                                     :

package/dist/page/components/BlockEditor.js

@@ -59,7 +59,7 @@ function BlockEditor({ className, block, onSelectItem }) {
     // render editor
     const { messageFields, visualFields, listsFields, extendedFields } = block;
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'max-h-full h-full flex flex-col'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center px-l6 pt-l10 pb-l4", children: [(0, jsx_runtime_1.jsx)("h2", { className: "heading-lg flex-1", children: block.name }), (0, jsx_runtime_1.jsx)("div", { className: "shrink-0 flex items-center gap-l5", children: block.canDelete &&
-                            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.IconButton, { anchorId: anchorId, className: "DeleteAction text-content-primary hover:text-destructive shrink-0", variant: "util", icon: "EllipsisVertical", onClick: e => menu.open(anchorId) }), (0, jsx_runtime_1.jsx)(core_1.Menu, { controller: menu, onItemClick: onMenuClick })] }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex flex-col gap-l8 px-l6 pb-l10 overflow-y-scroll scrollbar-thin scroller-fade-top bg-background", children: [messageFields.length > 0 &&
+                            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.IconButton, { anchorId: anchorId, className: "DeleteAction text-content-primary hover:text-destructive shrink-0", variant: "util", icon: "EllipsisVertical", onClick: e => menu.open(anchorId) }), (0, jsx_runtime_1.jsx)(core_1.Menu, { controller: menu, onItemClick: onMenuClick })] }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex flex-col gap-l8 px-l6 pb-l10 overflow-y-scroll scrollbar-thin scroller-fade-top bg-background", tabIndex: -1, children: [messageFields.length > 0 &&
                         (0, jsx_runtime_1.jsx)(core_1.FieldsPanel, { title: "Messaging", actions: (0, jsx_runtime_1.jsx)(config_1.BlockConfigButton, { target: "message" }), fields: messageFields }), visualFields.length > 0 &&
                         (0, jsx_runtime_1.jsx)(core_1.FieldsPanel, { title: "Visual", actions: (0, jsx_runtime_1.jsx)(config_1.BlockConfigButton, { target: "visual" }), fields: visualFields }), listsFields.length > 0 &&
                         (0, jsx_runtime_1.jsx)(core_1.FieldsPanel, { title: "List", actions: (0, jsx_runtime_1.jsx)(config_1.BlockConfigButton, { target: "list" }), fields: listsFields }), extendedFields.length > 0 &&

package/dist/page/components/SettingsEditor.js

@@ -9,15 +9,11 @@ const funnel_core_1 = require("@nascentdigital/funnel-core");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const core_1 = require("../../core");
-const hooks_1 = require("../hooks");
 // component
 function SettingsEditor({ className }) {
     // bind state + hooks
     const { timezone } = funnel_core_1.AppConfig.get();
-    const controller = (0, hooks_1.usePageController)();
     const page = (0, core_1.usePage)();
-    const editorApi = (0, core_1.useEditorApi)();
-    const router = (0, core_1.useEditorRouter)();
     const { publicationField, slugField } = (0, core_1.useTempFields)({
         publicationField: funnel_core_1.Schema.Field.timestamp({
             name: 'Published Date',
@@ -27,11 +23,8 @@ function SettingsEditor({ className }) {
         }).optional(),
         slugField: funnel_core_1.Schema.Field.slug({ name: 'Slug', minLength: 2, required: true })
     });
-    const dialog = (0, core_1.useDialog)();
     const publicationModified = !publicationField.sandboxed && publicationField.modified;
     const slugModified = !slugField.sandboxed && slugField.modified;
-    const tagOptions = page.template.tags;
-    const { tags } = page;
     const canUnpublish = page.published;
     const canDelete = page.hasSlug && !page.published;
     const showDangerOptions = canUnpublish || canDelete;

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

@@ -35,6 +35,8 @@ function BlockConfigButton({ target, anchorId: anchorOverrideId, children = 'Con
     const listLayoutPickerRef = (0, react_2.useRef)(null);
     const configuration = (0, core_1.useBlockConfiguration)();
     const pageController = (0, hooks_1.usePageController)();
+    const collectionStore = (0, core_1.useCollectionStore)();
+    const assetStore = (0, core_1.useAssetStore)();
     // skip if there's no config
     if (!configuration) {
         return null;
@@ -145,20 +147,36 @@ function BlockConfigButton({ target, anchorId: anchorOverrideId, children = 'Con
             title = 'Visual Configuration';
             tip = 'Cropping changes how the image appears on your site, not your original file.';
             // get fields
-            const { aspect: aspectField, anchor: anchorField, width: widthField, horizontalAlign: horizontalAlignField } = configuration.visualFields;
+            const { aspect: aspectField, anchor: anchorField, width: widthField, horizontalAlign: horizontalAlignField, controls: controlsField, autoPlay: autoPlayField, loop: loopField, mute: muteField, } = configuration.visualFields;
             const { value } = (_a = configuration.getFieldData('visual')) !== null && _a !== void 0 ? _a : {};
-            const visual = funnel_core_1.Schema.AssetField.LinkedValue.Visual.filter(value)
+            const media = funnel_core_1.Schema.CollectionField.Value.ForInline.filter(value)
                 ? value
-                : undefined;
+                : funnel_core_1.Schema.CollectionField.Value.ForRef.filter(value)
+                    ? collectionStore.getCollection(value.id)
+                    : undefined;
+            // helpers
+            const renderOptionButton = (field) => {
+                var _a;
+                // skip if there's no field
+                if (!field) {
+                    return null;
+                }
+                // render
+                const enabled = ((_a = field.value) === null || _a === void 0 ? void 0 : _a.value) === true;
+                return ((0, jsx_runtime_1.jsx)(core_1.Button, { variant: enabled ? 'primary' : 'secondary', size: "xs", onClick: () => field.value = funnel_core_1.Schema.BooleanField.Value.toData(!enabled), children: field.schema.name }));
+            };
+            // content
             content = ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l9", children: [(0, jsx_runtime_1.jsxs)("section", { className: "flex flex-col gap-l4", children: [aspectField &&
                                 (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { field: aspectField, size: "xs" }), anchorField
                                 ? (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { field: anchorField, size: "xs" })
                                 :
                                     (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(core_1.FieldHeader, { label: "Anchor", size: "xs" }), (0, jsx_runtime_1.jsx)("p", { className: "label-xs text-content-secondary text-pretty", children: "Your current image size and aspect ratio don't require and anchor (there's no cropping)." })] }), widthField &&
                                 (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { field: widthField, size: "xs" }, widthField.id), horizontalAlignField &&
-                                (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { field: horizontalAlignField, size: "xs" }, horizontalAlignField.id)] }), visual && renderVisual({
+                                (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { field: horizontalAlignField, size: "xs" }, horizontalAlignField.id), (controlsField || autoPlayField || loopField || muteField) &&
+                                (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l2", children: [(0, jsx_runtime_1.jsx)(core_1.FieldHeader, { label: "Video Options", size: "xs" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-l4 items-center", children: [renderOptionButton(controlsField), renderOptionButton(autoPlayField)] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-l4 items-center", children: [renderOptionButton(loopField), renderOptionButton(muteField)] })] })] }), funnel_ui_1.Media.Value.filter(media) && renderVisual({
+                        assetStore,
                         configuration,
-                        visual,
+                        visual: media,
                         aspectField: aspectField,
                         anchorField: anchorField
                     })] }));
@@ -280,14 +298,46 @@ function renderListLayoutItem(item) {
     // render item in frame
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('w-full h-full flex justify-center items-center'), children: content }));
 }
-function renderVisual({ configuration, visual, aspectField, anchorField }) {
-    var _a, _b, _c;
+function renderVisual({ assetStore, configuration, visual, aspectField, anchorField }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    // get dimensions
+    let width = undefined;
+    let height = undefined;
+    let image = undefined;
+    let video = undefined;
+    let embeddedVideo = undefined;
+    if (funnel_ui_1.Media.Value.isImage(visual) && ((_c = (_b = (_a = visual.fields) === null || _a === void 0 ? void 0 : _a.image) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.id)) {
+        const asset = assetStore.getAsset(visual.fields.image.value.id);
+        image = asset === null || asset === void 0 ? void 0 : asset.value;
+        const { dimensions } = (_d = image === null || image === void 0 ? void 0 : image.metadata) !== null && _d !== void 0 ? _d : {};
+        width = (_e = dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== null && _e !== void 0 ? _e : undefined;
+        height = (_f = dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) !== null && _f !== void 0 ? _f : undefined;
+    }
+    else if (funnel_ui_1.Media.Value.isVideo(visual) && ((_h = (_g = visual.fields) === null || _g === void 0 ? void 0 : _g.video) === null || _h === void 0 ? void 0 : _h.value)) {
+        // link local video
+        const { video: { value: { local, remote } }, cover: coverRaw } = visual.fields;
+        if ((_j = local === null || local === void 0 ? void 0 : local.value) === null || _j === void 0 ? void 0 : _j.id) {
+            const asset = assetStore.getAsset(local.value.id);
+            video = asset === null || asset === void 0 ? void 0 : asset.value;
+            const { dimensions } = (_k = video === null || video === void 0 ? void 0 : video.metadata) !== null && _k !== void 0 ? _k : {};
+            width = (_l = dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== null && _l !== void 0 ? _l : undefined;
+            height = (_m = dimensions === null || dimensions === void 0 ? void 0 : dimensions.height) !== null && _m !== void 0 ? _m : undefined;
+        }
+        // or remote
+        else if (remote === null || remote === void 0 ? void 0 : remote.value) {
+            embeddedVideo = remote.value;
+            width = embeddedVideo.dimensions.width;
+            height = embeddedVideo.dimensions.height;
+        }
+    }
+    // slop if there's no asset
+    if (!width || !height) {
+        return null;
+    }
     // determine layout info
-    const { metadata, name, description } = visual;
-    const { dimensions: { width, height } } = metadata;
     const isPortrait = width < height;
-    const aspect = (_b = (_a = aspectField === null || aspectField === void 0 ? void 0 : aspectField.value) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 'auto';
-    const anchor = (_c = anchorField === null || anchorField === void 0 ? void 0 : anchorField.value) === null || _c === void 0 ? void 0 : _c.value;
+    const aspect = (_p = (_o = aspectField === null || aspectField === void 0 ? void 0 : aspectField.value) === null || _o === void 0 ? void 0 : _o.value) !== null && _p !== void 0 ? _p : 'auto';
+    const anchor = (_q = anchorField === null || anchorField === void 0 ? void 0 : anchorField.value) === null || _q === void 0 ? void 0 : _q.value;
     const anchorDirection = anchorField
         ? anchorField.schema.isValidOption('left')
             ? 'x'
@@ -297,9 +347,13 @@ function renderVisual({ configuration, visual, aspectField, anchorField }) {
     return ((0, jsx_runtime_1.jsx)("section", { className: (0, classnames_1.default)('w-full h-[210px]', 'flex flex-col justify-center items-center', 'bg-background rounded-xs'), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('relative bg-destructive', {
                 'h-full max-h-full w-auto': isPortrait,
                 'w-full': !isPortrait
-            }), children: [funnel_core_1.Schema.AssetField.LinkedValue.Image.filter(visual)
-                    ? renderImage({ configuration, visual })
-                    : renderVideo({ configuration, visual }), aspect !== 'auto' && anchor && anchorDirection &&
+            }), children: [image
+                    ? renderImage({ assetStore, configuration, visual: image })
+                    : video
+                        ? renderVideo({ assetStore, configuration, visual: video })
+                        : embeddedVideo
+                            ? renderStreamingVideo({ assetStore, configuration, visual: embeddedVideo })
+                            : null, aspect !== 'auto' && anchor && anchorDirection &&
                     (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('absolute inset-0 z-supersurface flex', {
                             'flex-col': anchorDirection === 'y'
                         }), children: (0, jsx_runtime_1.jsxs)(react_1.AnimatePresence, { mode: "popLayout", children: [anchor !== 'left' && anchor !== 'top' &&
@@ -321,3 +375,6 @@ function renderImage({ visual }) {
 function renderVideo({ visual }) {
     return ((0, jsx_runtime_1.jsx)("video", { className: "max-w-full max-h-full", src: visual.url, autoPlay: true, muted: true, loop: true, playsInline: true }));
 }
+function renderStreamingVideo({ visual }) {
+    return ((0, jsx_runtime_1.jsx)("img", { className: "max-w-full max-h-full", src: visual.thumbUrl, alt: "Video preview" }));
+}

package/dist/page/screens/PageEditor.js

@@ -76,7 +76,7 @@ function PageEditor({ templateId, region, language, slug }) {
     };
     const onSelectItem = (item) => setItemId(item.identifier);
     // render
-    return ((0, jsx_runtime_1.jsx)(hooks_1.PageControllerContext.Provider, { value: controllerContext, children: (0, jsx_runtime_1.jsx)(core_1.PageContext.Provider, { value: pageContext, children: (0, jsx_runtime_1.jsx)(core_1.AssetStoreContext.Provider, { value: page, children: (0, jsx_runtime_1.jsx)(core_1.CollectionStoreContext.Provider, { value: page, children: (0, jsx_runtime_1.jsx)(core_1.PageRefStoreContext.Provider, { value: pageRefStoreProxy, children: (0, jsx_runtime_1.jsx)(config_1.BlockConfigurationProvider, { item: selectedItem, children: (0, jsx_runtime_1.jsxs)("div", { className: "w-dvw h-dvh flex flex-col bg-background", children: [(0, jsx_runtime_1.jsx)(components_1.PageHeader, { target: target, selectedItem: selectedItem, onBack: onHeaderBack }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex-1", children: (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 flex", children: [(0, jsx_runtime_1.jsx)("section", { className: "w-[220px] lg:w-[240px] xl:w-[280px] shrink-0 overflow-y-scroll scrollbar-thin", children: (0, jsx_runtime_1.jsx)(components_1.PageNav, { selectedItem: selectedItem, onSelectItem: onSelectItem }) }), (0, jsx_runtime_1.jsx)("section", { className: "flex-1 h-full max-h-full max-w-[1000px] mx-auto", children: (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { mode: "wait", initial: false, children: renderContent({ target, controller, page, selectedItem, onSelectItem }) }) }), (0, jsx_runtime_1.jsxs)(react_1.motion.section, { className: (0, classnames_1.default)('hidden lg:flex lg:w-[320px] shrink-0 overflow-y-scroll scrollbar-thin', 'flex-col gap-l8 pt-l9 px-l8 pb-l8'), layout: true, children: [(0, jsx_runtime_1.jsx)("h2", { className: "label-sm text-content-tertiary uppercase", children: "Inspector" }), (0, jsx_runtime_1.jsxs)(react_1.AnimatePresence, { mode: "popLayout", children: [page && selectedItem && (selectedItem instanceof core_1.Block || selectedItem instanceof core_1.SectionBlock) &&
+    return ((0, jsx_runtime_1.jsx)(hooks_1.PageControllerContext.Provider, { value: controllerContext, children: (0, jsx_runtime_1.jsx)(core_1.PageContext.Provider, { value: pageContext, children: (0, jsx_runtime_1.jsx)(core_1.AssetStoreContext.Provider, { value: page, children: (0, jsx_runtime_1.jsx)(core_1.CollectionStoreContext.Provider, { value: page, children: (0, jsx_runtime_1.jsx)(core_1.PageRefStoreContext.Provider, { value: pageRefStoreProxy, children: (0, jsx_runtime_1.jsx)(config_1.BlockConfigurationProvider, { item: selectedItem, children: (0, jsx_runtime_1.jsxs)("div", { className: "w-dvw h-dvh flex flex-col bg-background", children: [(0, jsx_runtime_1.jsx)(components_1.PageHeader, { target: target, selectedItem: selectedItem, onBack: onHeaderBack }), (0, jsx_runtime_1.jsx)("div", { className: "relative flex-1", children: (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 flex z-default", children: [(0, jsx_runtime_1.jsx)("section", { className: "w-[220px] lg:w-[240px] xl:w-[280px] shrink-0 overflow-y-scroll scrollbar-thin", tabIndex: -1, children: (0, jsx_runtime_1.jsx)(components_1.PageNav, { selectedItem: selectedItem, onSelectItem: onSelectItem }) }), (0, jsx_runtime_1.jsx)("section", { className: "flex-1 h-full max-h-full max-w-[1000px] mx-auto", tabIndex: -1, children: (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { mode: "wait", initial: false, children: renderContent({ target, controller, page, selectedItem, onSelectItem }) }) }), (0, jsx_runtime_1.jsxs)(react_1.motion.section, { className: (0, classnames_1.default)('hidden lg:flex lg:w-[320px] shrink-0 overflow-y-scroll scrollbar-thin', 'flex-col gap-l8 pt-l9 px-l8 pb-l8'), layout: true, tabIndex: -1, children: [(0, jsx_runtime_1.jsx)("h2", { className: "label-sm text-content-tertiary uppercase", children: "Inspector" }), (0, jsx_runtime_1.jsxs)(react_1.AnimatePresence, { mode: "popLayout", children: [page && selectedItem && (selectedItem instanceof core_1.Block || selectedItem instanceof core_1.SectionBlock) &&
                                                                     (0, jsx_runtime_1.jsx)(components_1.BlockConfigPanel, {}, "block.config"), page && selectedItem &&
                                                                     (0, jsx_runtime_1.jsx)(components_1.PageStatus, { page: page, selectedItem: selectedItem, onSelectItem: onSelectItem }, "status")] })] })] }) })] }) }) }) }) }) }) }));
 }