@nascentdigital/funnel-editor 4.4.18

package/dist/devtools/screens/index.d.ts

@@ -0,0 +1 @@
+export * from './Devtools';

package/dist/devtools/screens/index.js

@@ -0,0 +1,17 @@
+"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("./Devtools"), exports);

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

@@ -0,0 +1,13 @@
+import { Rect } from '@nascentdigital/funnel-core';
+import { Collection, CollectionBrowser } from '../../core';
+export declare const CreateCollectionDialog: import("react").ForwardRefExoticComponent<import("react").RefAttributes<CreateCollectionDialog.Ref>>;
+export declare namespace CreateCollectionDialog {
+    type Props = {};
+    interface Ref {
+        createCollection(options: Options): Promise<Collection | undefined>;
+    }
+    type Options = {
+        collectionBrowser: CollectionBrowser;
+        anchor: HTMLElement | Rect;
+    };
+}

package/dist/explore/components/CreateCollectionDialog.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CreateCollectionDialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
+const core_1 = require("../../core");
+// component
+exports.CreateCollectionDialog = (0, react_1.forwardRef)(function CreateCollectionDialog(_, ref) {
+    var _a, _b, _c, _d;
+    // bind state + hooks
+    const [deferral, setDeferral] = (0, react_1.useState)();
+    const [result, setResult] = (0, react_1.useState)();
+    const [collectionBrowser, setCollectionBrowser] = (0, react_1.useState)();
+    const [anchor, setAnchor] = (0, react_1.useState)();
+    const [errorLevel, setErrorLevel] = (0, react_1.useState)('none');
+    const [error, setError] = (0, react_1.useState)();
+    const languageOptions = (0, react_1.useMemo)(() => getLanguageOptions(collectionBrowser), [collectionBrowser]);
+    const repository = (0, core_1.useCollectionRepository)();
+    const { nameField, languageField } = (0, core_1.useTempFields)({
+        nameField: funnel_core_1.Schema.Field.text({
+            name: 'Name',
+            hint: 'Provide a name'
+        }),
+        languageField: funnel_core_1.Schema.Field.enumeration({
+            name: 'Language',
+            hint: 'Select a language',
+            options: (_a = languageOptions === null || languageOptions === void 0 ? void 0 : languageOptions.languages) !== null && _a !== void 0 ? _a : {},
+            defaultOption: languageOptions === null || languageOptions === void 0 ? void 0 : languageOptions.defaultLanguage
+        })
+    }, [languageOptions]);
+    const valid = nameField.valid && languageField.valid;
+    const name = (_c = (_b = funnel_core_1.Schema.TextField.Value.fromData(nameField.value)) === null || _b === void 0 ? void 0 : _b.trim()) !== null && _c !== void 0 ? _c : '';
+    const multiLanguage = languageField.schema.enum.length > 1;
+    // bind service
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        createCollection: async ({ collectionBrowser, anchor }) => {
+            // reset dialog
+            setCollectionBrowser(collectionBrowser);
+            setAnchor(anchor);
+            setErrorLevel('none');
+            setError(undefined);
+            nameField.reset(null);
+            const { defaultLanguage } = languageOptions !== null && languageOptions !== void 0 ? languageOptions : {};
+            languageField.reset(defaultLanguage
+                ? funnel_core_1.Schema.EnumField.Value.toData(defaultLanguage)
+                : null);
+            // create deferral
+            const deferral = new funnel_core_1.Deferral();
+            // open dialog
+            setDeferral(deferral);
+            setResult(undefined);
+            // return page (or cancellation)
+            return await deferral.promise;
+        }
+    }), [nameField, languageField, languageOptions]);
+    // sync language
+    (0, react_1.useEffect)(() => {
+        const { defaultLanguage } = languageOptions !== null && languageOptions !== void 0 ? languageOptions : {};
+        languageField.reset(defaultLanguage
+            ? funnel_core_1.Schema.EnumField.Value.toData(defaultLanguage)
+            : null);
+    }, [languageField, languageOptions]);
+    // helpers
+    const onValidate = () => {
+        // update error level
+        setErrorLevel('all');
+        // return validity
+        return valid;
+    };
+    const onCreate = async () => {
+        // fail if not setup
+        if (!deferral || !collectionBrowser) {
+            console.warn('[CreateCollectionDialog/onCreate] not initialized');
+            return;
+        }
+        // fail if not setup
+        const language = funnel_core_1.Schema.EnumField.Value.fromData(languageField.value);
+        if (!name || !nameField.valid || !language) {
+            setErrorLevel('all');
+            return;
+        }
+        // start creating
+        try {
+            // reset error
+            setError(undefined);
+            // create page
+            const { template } = collectionBrowser;
+            const { collection } = await repository.create({ template, language, name, tags: [] });
+            // complete
+            setResult(collection);
+        }
+        // display error
+        catch (e) {
+            console.warn('[CreateCollectionDialog/onCreate] creation failed', e);
+            // set error
+            setError(core_1.ErrorMessage.getGenericError((e instanceof Error) ? e : new funnel_core_1.ServerError()));
+        }
+    };
+    const onCancel = () => {
+        // set result (triggers uploader to close)
+        setResult(null);
+    };
+    const onClosed = () => {
+        // skip if missing or already completed
+        if (!deferral || deferral.isComplete) {
+            return;
+        }
+        // complete deferral
+        deferral.resolve(result !== null && result !== void 0 ? result : undefined);
+    };
+    // skip if we don't have any params
+    if (!deferral || !collectionBrowser) {
+        return null;
+    }
+    // render
+    return ((0, jsx_runtime_1.jsxs)(core_1.MiniEditor, { className: "flex flex-col gap-l8", title: `Create new ${(_d = collectionBrowser.template.name) !== null && _d !== void 0 ? _d : 'collection'}`, open: result === undefined, anchor: anchor, anchorOffset: 4, placement: "bottom-end", renderSaveLabel: state => state === 'saving' ? 'Creating...' : 'Create', canSave: onValidate, onSave: onCreate, onClose: onCancel, onClosed: onClosed, children: [(0, jsx_runtime_1.jsx)(core_1.ErrorMessage, { error: error }), (0, jsx_runtime_1.jsxs)(core_1.FieldErrorController, { errorLevel: errorLevel, children: [(0, jsx_runtime_1.jsx)(core_1.FieldEditor, { field: nameField, autoFocus: true }), multiLanguage &&
+                        (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { field: languageField })] })] }));
+});
+function getLanguageOptions(collectionBrowser) {
+    // skip if there's no browser
+    if (!collectionBrowser) {
+        return undefined;
+    }
+    // or create options
+    return {
+        languages: collectionBrowser.languages.reduce((languages, language) => {
+            // bind language
+            languages[language] = { name: funnel_core_1.Language.getName(language) };
+            // keep reducing
+            return languages;
+        }, {}),
+        defaultLanguage: collectionBrowser.defaultLanguage
+    };
+}

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

@@ -0,0 +1,15 @@
+import { Rect, Schema } from '@nascentdigital/funnel-core';
+import { Page, Pages, 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>;
+    }
+    type Options = {
+        site: Site;
+        template: Schema.Page;
+        collection: Pages;
+        anchor: HTMLElement | Rect;
+    };
+}

package/dist/explore/components/CreatePageDialog.js

@@ -0,0 +1,204 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CreatePageDialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_cms_1 = require("@nascentdigital/funnel-cms");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
+const core_1 = require("../../core");
+// component
+exports.CreatePageDialog = (0, react_1.forwardRef)(function CreatePageDialog(_, ref) {
+    var _a, _b, _c, _d;
+    // bind state + hooks
+    const [deferral, setDeferral] = (0, react_1.useState)();
+    const [result, setResult] = (0, react_1.useState)();
+    const [site, setSite] = (0, react_1.useState)();
+    const [template, setTemplate] = (0, react_1.useState)();
+    const [pages, setPages] = (0, react_1.useState)();
+    const [anchor, setAnchor] = (0, react_1.useState)();
+    const [slugLinked, setSlugLinked] = (0, react_1.useState)(true);
+    const [errorLevel, setErrorLevel] = (0, react_1.useState)('critical');
+    const [error, setError] = (0, react_1.useState)();
+    const languageOptions = (0, react_1.useMemo)(() => getLanguageOptions(site), [site]);
+    const repository = (0, core_1.usePageRepository)();
+    const { nameField, slugField, languageField } = (0, core_1.useTempFields)({
+        nameField: funnel_core_1.Schema.Field.text({
+            name: 'Title',
+            description: 'A page title should be short and describe the content of your page.',
+            hint: 'The title of your page',
+            required: true
+        }),
+        slugField: funnel_core_1.Schema.Field.slug({
+            name: 'Slug',
+            description: 'A slug should include relevant keywords to promote SEO',
+            hint: 'Pick a unique slug that describes the page',
+            required: true
+        }),
+        languageField: funnel_core_1.Schema.Field.enumeration({
+            name: 'Language',
+            hint: 'Select a language',
+            options: (_a = languageOptions === null || languageOptions === void 0 ? void 0 : languageOptions.languages) !== null && _a !== void 0 ? _a : {},
+            defaultOption: languageOptions === null || languageOptions === void 0 ? void 0 : languageOptions.defaultLanguage
+        })
+    }, [languageOptions]);
+    const slugFieldRef = (0, react_1.useRef)(null);
+    const valid = nameField.valid && slugField.valid && languageField.valid;
+    const name = (_c = (_b = funnel_core_1.Schema.TextField.Value.fromData(nameField.value)) === null || _b === void 0 ? void 0 : _b.trim()) !== null && _c !== void 0 ? _c : '';
+    const multiLanguage = languageField.schema.enum.length > 1;
+    // bind service
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        createPage: async ({ site, template, collection, anchor }) => {
+            // reset dialog
+            setSite(site);
+            setTemplate(template);
+            setPages(collection);
+            setAnchor(anchor);
+            setErrorLevel('critical');
+            setError(undefined);
+            nameField.reset(null);
+            slugField.reset(null);
+            const { defaultLanguage } = languageOptions !== null && languageOptions !== void 0 ? languageOptions : {};
+            languageField.reset(defaultLanguage
+                ? funnel_core_1.Schema.EnumField.Value.toData(defaultLanguage)
+                : null);
+            setSlugLinked(true);
+            // create deferral
+            const deferral = new funnel_core_1.Deferral();
+            // open dialog
+            setDeferral(deferral);
+            setResult(undefined);
+            // return page (or cancellation)
+            return await deferral.promise;
+        }
+    }), [nameField, slugField, languageField, languageOptions]);
+    // connect validator when pages change
+    (0, react_1.useEffect)(() => {
+        slugField.customValidator = pages
+            ? new SlugValidator(pages)
+            : undefined;
+    }, [slugField, pages]);
+    // sync name --> slug (only if linked)
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (slugLinked) {
+            (_a = slugFieldRef.current) === null || _a === void 0 ? void 0 : _a.coerce(name.toLowerCase().replaceAll(' ', '-'));
+        }
+    }, [slugLinked, name]);
+    // sync language
+    (0, react_1.useEffect)(() => {
+        const { defaultLanguage } = languageOptions !== null && languageOptions !== void 0 ? languageOptions : {};
+        languageField.reset(defaultLanguage
+            ? funnel_core_1.Schema.EnumField.Value.toData(defaultLanguage)
+            : null);
+    }, [languageField, languageOptions]);
+    // helpers
+    const onSlugKeyDown = async () => {
+        // eject on keypress
+        setSlugLinked(false);
+    };
+    const onValidate = () => {
+        // update error level
+        setErrorLevel('all');
+        // return validity
+        return valid;
+    };
+    const onCreate = async () => {
+        // fail if not setup
+        if (!deferral || !site || !template) {
+            console.warn('[CreatePageDialog/onCreate] not initialized');
+            return;
+        }
+        // reset errors
+        setErrorLevel('critical');
+        setError(undefined);
+        // skip if there's no username or password
+        const slug = funnel_core_1.Schema.TextField.Value.fromData(slugField.value);
+        const language = funnel_core_1.Schema.EnumField.Value.fromData(languageField.value);
+        if (!name || !nameField.valid || !slug || !slugField.valid || !language) {
+            setErrorLevel('all');
+            return;
+        }
+        // start creating
+        try {
+            // reset error
+            setError(undefined);
+            console.warn('[CreatePageDialog/onCreate] creating page', { name, slug });
+            // create page
+            const region = site.region.id;
+            const { page } = await repository.create({ template, region, language, name, slug, tags: [] });
+            // complete
+            setResult(page);
+        }
+        // display error
+        catch (e) {
+            // handle slug error
+            if (e instanceof funnel_cms_1.SlugValidationError) {
+                setError({
+                    title: 'The slug you provided is already in use',
+                    message: 'Please trying using a different slug and resubmitting.'
+                });
+            }
+            // or set a generic error
+            else {
+                setError(core_1.ErrorMessage.getGenericError((e instanceof Error) ? e : new funnel_core_1.ServerError()));
+            }
+            // rethrow
+            throw e;
+        }
+    };
+    const onCancel = () => {
+        // set result (triggers uploader to close)
+        setResult(null);
+    };
+    const onClosed = () => {
+        // skip if missing or already completed
+        if (!deferral || deferral.isComplete) {
+            return;
+        }
+        // complete deferral
+        deferral.resolve(result !== null && result !== void 0 ? result : undefined);
+    };
+    // skip if we don't have any params
+    if (!deferral || !site || !template) {
+        return null;
+    }
+    // render
+    return ((0, jsx_runtime_1.jsxs)(core_1.MiniEditor, { className: "flex flex-col gap-l8", title: `Create new ${(_d = template.name) !== null && _d !== void 0 ? _d : 'page'}`, open: result === undefined, anchor: anchor, anchorOffset: 4, placement: "bottom-end", renderSaveLabel: state => state === 'saving' ? 'Creating...' : 'Create', canSave: onValidate, onSave: onCreate, onClose: onCancel, onClosed: onClosed, children: [(0, jsx_runtime_1.jsx)(core_1.ErrorMessage, { error: error }), (0, jsx_runtime_1.jsxs)(core_1.FieldErrorController, { errorLevel: errorLevel, children: [(0, jsx_runtime_1.jsx)(core_1.FieldEditor, { field: nameField, autoFocus: true }), (0, jsx_runtime_1.jsx)(core_1.TextField, { ref: slugFieldRef, field: slugField, onKeyDown: onSlugKeyDown }), multiLanguage &&
+                        (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { field: languageField })] })] }));
+});
+function getLanguageOptions(site) {
+    var _a;
+    // skip if there's no site
+    if (!site) {
+        return undefined;
+    }
+    // or create options
+    return {
+        languages: site.region.languages.reduce((languages, language) => {
+            // bind language
+            languages[language] = { name: funnel_core_1.Language.getName(language) };
+            // keep reducing
+            return languages;
+        }, {}),
+        defaultLanguage: (_a = site.region.defaultLanguage) !== null && _a !== void 0 ? _a : site.defaultLanguage
+    };
+}
+class SlugValidator {
+    constructor(pages) {
+        this.pages = pages;
+    }
+    filter(errors, level) {
+        return funnel_core_1.ValidatorHelper.filterErrors(errors, level);
+    }
+    validate(field, rawData) {
+        // grab slug (skip if there's none)
+        const slug = funnel_core_1.Schema.TextField.Value.fromData(field.value);
+        if (!slug) {
+            return [];
+        }
+        // ensure slug isn't already used
+        return this.pages.items.some(page => page.slug === slug)
+            ? [funnel_core_1.ValidatorHelper.createError({ field, value: slug, id: 'duplicate', critical: true })]
+            : [];
+    }
+}

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

@@ -0,0 +1,9 @@
+import { Callback, RegionsConfig } from '@nascentdigital/funnel-core';
+import { Header } from '../../core';
+export declare function ExploreHeader({ region: regionId, onRegionChange, children, ...props }: ExploreHeader.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace ExploreHeader {
+    type Props = Omit<Header.Props, 'back'> & {
+        region: string;
+        onRegionChange?: Callback<RegionsConfig.RegionConfig.WithId>;
+    };
+}

package/dist/explore/components/ExploreHeader.js

@@ -0,0 +1,44 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExploreHeader = ExploreHeader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
+const core_1 = require("../../core");
+// component
+function ExploreHeader(_a) {
+    var { region: regionId, onRegionChange = funnel_core_1.Fn.NoOp, children } = _a, props = __rest(_a, ["region", "onRegionChange", "children"]);
+    // hooks
+    const { regions, region } = (0, react_1.useMemo)(() => {
+        const regions = funnel_core_1.RegionsConfig.getRegions(funnel_core_1.AppConfig.brandConfig().regionalization)
+            .map(region => (Object.assign(Object.assign({}, region), { label: region.name })));
+        return {
+            regions,
+            region: regions.find(region => region.id === regionId)
+        };
+    }, [regionId]);
+    // helpers
+    const onRegionSelect = (id) => {
+        // ignore if selection is invalid
+        const region = regions.find(region => region.id === id);
+        if (!region || id === regionId) {
+            return;
+        }
+        // otherwise, raise change
+        onRegionChange(region);
+    };
+    // render
+    return ((0, jsx_runtime_1.jsxs)(core_1.Header, Object.assign({ back: "back" }, props, { children: [children, regions.length > 1 &&
+                (0, jsx_runtime_1.jsx)(core_1.Combobox, { options: regions, selectedOption: region === null || region === void 0 ? void 0 : region.id, onSelect: onRegionSelect })] })));
+}

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

@@ -0,0 +1,3 @@
+export * from './CreateCollectionDialog';
+export * from './CreatePageDialog';
+export * from './ExploreHeader';

package/dist/explore/components/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("./CreateCollectionDialog"), exports);
+__exportStar(require("./CreatePageDialog"), exports);
+__exportStar(require("./ExploreHeader"), exports);

package/dist/explore/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './screens';

package/dist/explore/index.js

@@ -0,0 +1,18 @@
+"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("./components"), exports);
+__exportStar(require("./screens"), exports);

package/dist/explore/screens/CollectionExplorer.d.ts

@@ -0,0 +1,7 @@
+import { Schema } from '@nascentdigital/funnel-core';
+export declare function CollectionExplorer({ type }: CollectionExplorer.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace CollectionExplorer {
+    type Props = {
+        type: Schema.Collection.Type;
+    };
+}

package/dist/explore/screens/CollectionExplorer.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollectionExplorer = CollectionExplorer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const core_1 = require("../../core");
+const components_1 = require("../components");
+// component
+function CollectionExplorer({ type }) {
+    // bind hooks
+    const collectionBrowser = (0, core_1.useCollectionBrowser)(type);
+    const router = (0, core_1.useEditorRouter)();
+    const splash = (0, core_1.useSplash)();
+    const { items, template } = (collectionBrowser === null || collectionBrowser === void 0 ? void 0 : collectionBrowser.ready)
+        ? collectionBrowser !== null && collectionBrowser !== void 0 ? collectionBrowser : {}
+        : {};
+    const groupedCollections = (0, react_1.useMemo)(() => items
+        ? groupCollections(items)
+        : undefined, [items]);
+    const createDialogRef = (0, react_1.useRef)(null);
+    // dismiss splash
+    (0, react_1.useEffect)(() => {
+        if (groupedCollections) {
+            splash.dismiss();
+        }
+    }, [splash, groupedCollections]);
+    // helpers
+    const onCreateCollection = async (e) => {
+        var _a;
+        // ignore if template isn't bound
+        if (!collectionBrowser) {
+            return;
+        }
+        // open dialog (skip if the page creation was cancelled)
+        const collection = await ((_a = createDialogRef.current) === null || _a === void 0 ? void 0 : _a.createCollection({
+            collectionBrowser,
+            anchor: e.currentTarget
+        }));
+        if (!collection) {
+            return;
+        }
+        // otherwise, redirect to collection (open it)
+        await onOpenLink(collection);
+    };
+    const onOpenLink = async ({ type, groupId, language }) => {
+        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 })] }));
+}
+function renderCollections({ template, groupedCollections, onOpenLink, onCreateCollection }) {
+    // show loader if browser isn't ready
+    if (!template || !groupedCollections) {
+        return null;
+    }
+    // or render
+    const { inProgress, live } = groupedCollections;
+    if (inProgress.length === 0 && live.length === 0) {
+        return ((0, jsx_runtime_1.jsxs)(core_1.EmptyState, { variant: "missing", children: [(0, jsx_runtime_1.jsxs)("div", { className: "max-w-sm flex flex-col items-center gap-l4 text-center text-pretty whitespace-pre", children: [(0, jsx_runtime_1.jsx)("p", { children: "It doesn't look like you've created anything yet." }), (0, jsx_runtime_1.jsx)("p", { children: "Get started by creating your first item.  It's pretty simple and shouldn't take too long!" })] }), (0, jsx_runtime_1.jsxs)(core_1.Button, { variant: "primary", onClick: onCreateCollection, children: ["Create a ", template.name] })] }, "empty"));
+    }
+    // render pages
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-l8 justify-between items-center", children: [(0, jsx_runtime_1.jsxs)("h2", { className: "heading-lg text-content-primary", children: [template.name, " data"] }), (0, jsx_runtime_1.jsxs)(core_1.Button, { variant: "primary", iconLeft: "Plus", onClick: onCreateCollection, children: ["Create a new ", template.name] })] }), inProgress.length > 0 &&
+                (0, jsx_runtime_1.jsx)(core_1.Table, { className: "flex-1", title: "Work in progress", children: inProgress.map(({ status, link }) => (0, jsx_runtime_1.jsx)(core_1.TableItem, { details: status === 'ready'
+                            ? (0, jsx_runtime_1.jsx)(core_1.StatusBadge, { variant: "success", label: "Ready to go" })
+                            : status === 'changed'
+                                ? (0, jsx_runtime_1.jsx)(core_1.StatusBadge, { variant: "info", label: "Modified" })
+                                : undefined, iconRight: "ChevronRight", onClick: () => onOpenLink(link), children: link.name }, link.id)) }), live.length > 0 &&
+                (0, jsx_runtime_1.jsx)(core_1.Table, { className: "flex-1", title: "Live", children: live.map(({ link }) => (0, jsx_runtime_1.jsx)(core_1.TableItem, { iconRight: "ChevronRight", onClick: () => onOpenLink(link), children: link.name }, link.id)) })] }, "pages"));
+}
+function groupCollections(summaries) {
+    // group pages
+    const groupedCollections = summaries
+        // group summaries based on status
+        .reduce((groupedCollections, summary) => {
+        // bind page to group (drop empty collections, which shouldn't occur)
+        switch (summary.status) {
+            case 'draft':
+            case 'changed':
+            case 'ready':
+                groupedCollections.inProgress.push(summary);
+                break;
+            case 'live':
+                groupedCollections.live.push(summary);
+                break;
+        }
+        // keep reducing
+        return groupedCollections;
+    }, { inProgress: [], live: [] });
+    // sort pages
+    groupedCollections.inProgress.sort((lhs, rhs) => {
+        // sort by status first
+        const lhsStatus = lhs.status;
+        const rhsStatus = rhs.status;
+        if (lhsStatus !== rhsStatus) {
+            if (lhsStatus === 'ready') {
+                return -1;
+            }
+            else if (rhsStatus === 'ready') {
+                return 1;
+            }
+            else if (lhsStatus === 'changed') {
+                return -1;
+            }
+            else if (rhsStatus === 'changed') {
+                return 1;
+            }
+        }
+        // otherwise sort by name
+        return lhs.name.localeCompare(rhs.name);
+    });
+    groupedCollections.live.sort((lhs, rhs) => lhs.name.localeCompare(rhs.name));
+    // return groups
+    return groupedCollections;
+}

package/dist/explore/screens/CollectionsExplorer.d.ts

@@ -0,0 +1,4 @@
+export declare function CollectionsExplorer(_: CollectionsExplorer.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace CollectionsExplorer {
+    type Props = {};
+}