@nascentdigital/funnel-editor 5.0.1 → 5.0.3

package/dist/core/domain/IPage.js

@@ -1,10 +1,30 @@
 "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.IPage = void 0;
 const funnel_core_1 = require("@nascentdigital/funnel-core");
 // extension
 var IPage;
 (function (IPage) {
+    let Ref;
+    (function (Ref) {
+        function fromData(_a) {
+            var { tags } = _a, data = __rest(_a, ["tags"]);
+            const template = funnel_core_1.Schema.Site.getPage(data.type, data.region);
+            return Object.assign({ template, tags: template.parseTags(tags !== null && tags !== void 0 ? tags : []) }, data);
+        }
+        Ref.fromData = fromData;
+    })(Ref = IPage.Ref || (IPage.Ref = {}));
     let Event;
     (function (Event) {
         // methods
@@ -17,4 +37,14 @@ var IPage;
         }
         Event.create = create;
     })(Event = IPage.Event || (IPage.Event = {}));
+    // helpers
+    function getPreviewUrl(path) {
+        // get base url
+        const url = new URL('/api/preview', window.location.href);
+        // apply args
+        url.searchParams.set('redirect', path);
+        // return url
+        return url;
+    }
+    IPage.getPreviewUrl = getPreviewUrl;
 })(IPage || (exports.IPage = IPage = {}));

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

@@ -17,14 +17,20 @@ export declare class StaticPageOverview extends PageOverviewBase {
     readonly refs: Readonly<Record<Language, Schema.Page.Data.AsLink>>;
     readonly languages: ReadonlyArray<Language>;
     constructor({ refs, ...args }: StaticPageOverview.ConstructorArgs);
+    get pages(): Schema.Page.Data.AsLink<Schema.Page<Schema.Page.Content, string>, string>[];
     get isEmpty(): boolean;
     hasLanguage(language: Language): boolean;
+    findPage({ region, language }: StaticPageOverview.FindPageArgs): Schema.Page.Data.AsLink | undefined;
     getClosestPageRef(language: Language, fallback?: Language): IPage.Ref | undefined;
 }
 export declare namespace StaticPageOverview {
     type ConstructorArgs = Omit<PageOverviewBase.ConstructorArgs, 'variant'> & {
         refs: Record<Language, Schema.Page.Data.AsLink>;
     };
+    type FindPageArgs = {
+        region: string;
+        language?: Language;
+    };
 }
 export declare class DynamicPageOverview extends PageOverviewBase {
     readonly count: number;

package/dist/core/domain/PageOverview.js

@@ -32,12 +32,29 @@ class StaticPageOverview extends PageOverviewBase {
         this.refs = refs;
         this.languages = Object.keys(refs).map(funnel_core_1.Language.parse);
     }
+    get pages() {
+        return Object.values(this.refs);
+    }
     get isEmpty() {
         return this.languages.length === 0;
     }
     hasLanguage(language) {
         return this.languages.includes(language);
     }
+    findPage({ region, language }) {
+        var _a;
+        // narrow down to region
+        const pages = this.pages.filter(page => page.region === region);
+        // return exact match (if any) if a language is provided
+        if (language) {
+            return pages.find(page => page.language === language);
+        }
+        // or pick the best match
+        else {
+            const { defaultLanguage } = funnel_core_1.AppConfig.brandConfig().regionalization.regions[region];
+            return (_a = pages.find(page => page.language === defaultLanguage)) !== null && _a !== void 0 ? _a : pages[0];
+        }
+    }
     getClosestPageRef(language, fallback) {
         var _a, _b;
         const { template, languages, refs } = this;

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

@@ -4,7 +4,6 @@ export declare class PageSummary {
     readonly template: Schema.Page;
     readonly brand: string;
     readonly groupId: Schema.Page.GroupId;
-    readonly region: string;
     readonly slug?: string;
     readonly pages: ReadonlyArray<PageSummary.PageRef>;
     readonly status: PageSummary.Status;
@@ -12,10 +11,10 @@ export declare class PageSummary {
     get type(): Schema.Page.Type;
     get variant(): Schema.Page.Variant;
     get hasPages(): boolean;
-    hasLanguage(language: Language): boolean;
-    getPage(language: Language): PageSummary.PageRef | undefined;
-    getClosestPageRef(language: Language, fallback?: Language): IPage.Ref;
-    isInGroup({ template, region }: PageSummary.IsInGroupArgs): boolean;
+    hasLanguage(region: string, language: Language): boolean;
+    getPage(region: string, language: Language): PageSummary.PageRef | undefined;
+    getClosestPageRef({ region, language, fallbackLanguage }: PageSummary.GetClosestPageRefArgs): IPage.Ref;
+    isInGroup({ template }: PageSummary.IsInGroupArgs): boolean;
 }
 export declare namespace PageSummary {
     type Status = 'draft' | 'ready' | 'live' | 'unpublished' | 'changed' | 'empty';
@@ -23,13 +22,16 @@ export declare namespace PageSummary {
         template: Schema.Page;
         brand: string;
         groupId: Schema.Page.GroupId;
-        region: string;
         slug?: string;
         pages: PageSummary.PageRef[];
     };
     type PageRef = Schema.Page.Data.AsGroup.Instance & Pick<Schema.Page.Data.AsLink, 'state' | 'errors' | 'createdOn' | 'updatedOn' | 'publishedOn'>;
+    type GetClosestPageRefArgs = {
+        region: string;
+        language: Language;
+        fallbackLanguage?: Language;
+    };
     type IsInGroupArgs = {
         template: Schema.Page;
-        region: string;
     };
 }

package/dist/core/domain/PageSummary.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageSummary = void 0;
 const funnel_core_1 = require("@nascentdigital/funnel-core");
+const IPage_1 = require("./IPage");
 // class
 class PageSummary {
     constructor(args) {
@@ -9,7 +10,6 @@ class PageSummary {
         this.template = args.template;
         this.brand = args.brand;
         this.groupId = args.groupId;
-        this.region = args.region;
         this.slug = args.slug;
         this.pages = args.pages;
         this.status = getStatus(args.pages);
@@ -23,24 +23,20 @@ class PageSummary {
     get hasPages() {
         return this.groupId !== funnel_core_1.Schema.Page.GroupId.empty;
     }
-    hasLanguage(language) {
-        return this.pages.some(page => page.language === language);
+    hasLanguage(region, language) {
+        return this.pages.some(page => page.region === region && page.language === language);
     }
-    getPage(language) {
-        return this.pages.find(page => page.language === language);
+    getPage(region, language) {
+        return this.pages.find(page => page.region === region && page.language === language);
     }
-    getClosestPageRef(language, fallback) {
-        var _a, _b;
-        const { template, brand, groupId, region, pages } = this;
-        const ref = (_b = (_a = pages.find(page => page.language === language)) !== null && _a !== void 0 ? _a : (fallback && pages.find(page => page.language === fallback))) !== null && _b !== void 0 ? _b : pages[0];
-        return Object.assign(Object.assign({}, ref), { template,
-            brand,
-            groupId,
-            region, tags: template.tags.flatMap(tagGroup => tagGroup.parse(ref.tags)) });
+    getClosestPageRef({ region, language, fallbackLanguage }) {
+        var _a, _b, _c, _d;
+        const { template, brand, groupId, pages } = this;
+        const ref = (_d = (_c = (_b = (_a = pages.find(page => page.region === region && page.language === language)) !== null && _a !== void 0 ? _a : (fallbackLanguage && pages.find(page => page.region === region && page.language === fallbackLanguage))) !== null && _b !== void 0 ? _b : pages.find(page => page.language === language)) !== null && _c !== void 0 ? _c : (fallbackLanguage && pages.find(page => page.language === fallbackLanguage))) !== null && _d !== void 0 ? _d : pages[0];
+        return IPage_1.IPage.Ref.fromData(Object.assign(Object.assign({}, ref), { groupId, type: template.type, brand }));
     }
-    isInGroup({ template, region }) {
-        return this.template.type === template.type
-            && this.region === region;
+    isInGroup({ template }) {
+        return this.template.type === template.type;
     }
 }
 exports.PageSummary = PageSummary;

package/dist/core/domain/Pages.js

@@ -60,7 +60,6 @@ class Pages {
             const { region } = site;
             const { items: pages } = await site.repository.search({
                 template,
-                region: region.id,
                 tags: tags.map(tag => tag.data),
                 pagination: 'all'
             });
@@ -77,7 +76,6 @@ class Pages {
                         template,
                         brand: page.brand,
                         groupId: page.groupId,
-                        region: region.id,
                         slug: page.slug,
                         pages: []
                     };
@@ -88,6 +86,7 @@ class Pages {
                 // add page to args
                 args.pages.push({
                     id: page.id,
+                    region: page.region,
                     language: page.language,
                     slug: page.slug,
                     name: page.name,

package/dist/core/domain/Site.js

@@ -21,8 +21,6 @@ class Site {
         this._overviews = [];
         this._pages = new Map();
         this._pagesToSync = new Set();
-        // start initial loading of data
-        this.sync().catch(console.error);
         // listen to app state for page changes
         this._subscription = this.appState.pageEvents$.subscribe(e => this.onPageEvent(e));
     }

package/dist/core/hooks/useCollectionRepository.d.ts

@@ -1,3 +1,3 @@
 import { ICollectionRepository } from '../repository';
-export declare function useCollectionRepository(): ICollectionRepository;
+export declare function useCollectionRepository<TRepository extends ICollectionRepository = ICollectionRepository>(): TRepository;
 export declare const CollectionRepositoryContext: import("react").Context<ICollectionRepository>;

package/dist/core/hooks/useCollections.js

@@ -17,6 +17,10 @@ function usePossibleCollections() {
         if (!collections) {
             return;
         }
+        // sync if it's not ready
+        else if (collections.state === 'uninitialized') {
+            collections.sync().catch(console.error);
+        }
         // subscribe to changes
         const subscription = collections.events$.subscribe(() => touch());
         // unsubscribe on unmount

package/dist/core/hooks/usePageRepository.d.ts

@@ -1,3 +1,3 @@
 import { IPageRepository } from '../repository';
-export declare function usePageRepository(): IPageRepository;
+export declare function usePageRepository<TRepository extends IPageRepository = IPageRepository>(): TRepository;
 export declare const PageRepositoryContext: import("react").Context<IPageRepository>;

package/dist/core/hooks/useSite.js

@@ -17,6 +17,10 @@ function usePossibleSite() {
         if (!site) {
             return;
         }
+        // sync if it's not ready
+        else if (site.state === 'uninitialized') {
+            site.sync().catch(console.error);
+        }
         // subscribe to changes
         const subscription = site.events$.subscribe(() => touch());
         // unsubscribe on unmount

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

@@ -1,7 +1,7 @@
 import { Schema } from '@nascentdigital/funnel-core';
 import { UpdateCollectionCommand } from '../../api/collections';
 import { EditorApiClient } from '../client';
-import { Collection, CollectionFieldProxy } from '../domain';
+import { Collection, CollectionFieldProxy, ICollection } from '../domain';
 import { CollectionTarget } from './CollectionTarget';
 import { ICollectionRepository } from './ICollectionRepository';
 export declare class CollectionRepository implements ICollectionRepository {
@@ -26,5 +26,5 @@ export declare class CollectionRepository implements ICollectionRepository {
     getItems(args: ICollectionRepository.GetItems.Args): Promise<ICollectionRepository.GetItems.Result>;
     get(args: ICollectionRepository.Get.Args): Promise<ICollectionRepository.Get.Result>;
     update(args: ICollectionRepository.Update.Args): Promise<ICollectionRepository.Update.Result>;
-    serializeUpdate(collection: Collection | CollectionFieldProxy, savables: ICollectionRepository.Savable[]): UpdateCollectionCommand.Data;
+    serializeUpdate(collection: Collection | CollectionFieldProxy, savables: ICollection.Savable[]): UpdateCollectionCommand.Data;
 }

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

@@ -1,5 +1,5 @@
 import { CollectionClient } from '@nascentdigital/funnel-cms';
-import { EventBus, FieldModel, Schema } from '@nascentdigital/funnel-core';
+import { EventBus, Schema } from '@nascentdigital/funnel-core';
 import { CollectionFieldProxy, ICollection } from '../domain';
 export interface ICollectionRepository {
     create(args: ICollectionRepository.Create.Args): Promise<ICollectionRepository.Create.Result>;
@@ -11,10 +11,9 @@ export interface ICollectionRepository {
     getItems(args: ICollectionRepository.GetItems.Args): Promise<ICollectionRepository.GetItems.Result>;
     get(args: ICollectionRepository.Get.Args): Promise<ICollectionRepository.Get.Result>;
     update(args: ICollectionRepository.Update.Args): Promise<ICollectionRepository.Update.Result>;
-    serializeUpdate(collection: ICollection | CollectionFieldProxy, savables: ICollectionRepository.Savable[]): ICollectionRepository.SerializeUpdates.Result;
+    serializeUpdate(collection: ICollection | CollectionFieldProxy, savables: ICollection.Savable[]): ICollectionRepository.SerializeUpdates.Result;
 }
 export declare namespace ICollectionRepository {
-    type Savable = FieldModel;
     namespace Create {
         type Args = Omit<CollectionClient.Create.NewArgs, 'brand' | 'type' | 'version'> & {
             template: Schema.Collection;

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

@@ -13,7 +13,6 @@ export declare namespace IPageRepository {
     namespace Search {
         type Args = Omit<PageClient.Search.Args, 'version' | 'brand' | 'type' | 'region'> & {
             template: Schema.Page;
-            region: string;
         };
         type Result = Pagination.Paginated<IPage.Ref>;
     }

package/dist/core/repository/PageRepository.js

@@ -57,7 +57,7 @@ class PageRepository {
         const { eventBus, template } = args, query = __rest(args, ["eventBus", "template"]);
         const data = await this.editorApi.createPage(Object.assign(Object.assign({}, query), { type: template.type }));
         // return page
-        return PageSerializer_1.PageSerializer.deserializePageWithSummary(Object.assign(Object.assign({ region: data.group.region }, args), data));
+        return PageSerializer_1.PageSerializer.deserializePageWithSummary(Object.assign(Object.assign({}, args), data));
     }
     async save(page) {
         // get page update

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

@@ -1,8 +1,8 @@
 import { Field, FieldList, FieldModel, ObjectField, Schema } from '@nascentdigital/funnel-core';
-import { ICollectionRepository } from './ICollectionRepository';
+import { ICollection } from '../domain';
 export declare namespace SerializeCollectionUpdate {
-    function serializeFieldsUpdate(updates: Schema.Collection.Update[], fields: ReadonlyArray<FieldModel>, parentPath: ReadonlyArray<string>, savables: ICollectionRepository.Savable[]): Schema.Collection.Update[];
-    function serializeObjectFieldUpdate(updates: Schema.Collection.Update[], field: ObjectField, parentPath: ReadonlyArray<string>, savables: ICollectionRepository.Savable[]): void;
-    function serializeFieldUpdate(updates: Schema.Collection.Update[], field: Field, parentPath: ReadonlyArray<string>, savables: ICollectionRepository.Savable[]): void;
-    function serializeListUpdate(updates: Schema.Collection.Update[], list: FieldList, parentPath: ReadonlyArray<string>, savables: ICollectionRepository.Savable[]): void;
+    function serializeFieldsUpdate(updates: Schema.Collection.Update[], fields: ReadonlyArray<FieldModel>, parentPath: ReadonlyArray<string>, savables: ICollection.Savable[]): Schema.Collection.Update[];
+    function serializeObjectFieldUpdate(updates: Schema.Collection.Update[], field: ObjectField, parentPath: ReadonlyArray<string>, savables: ICollection.Savable[]): void;
+    function serializeFieldUpdate(updates: Schema.Collection.Update[], field: Field, parentPath: ReadonlyArray<string>, savables: ICollection.Savable[]): void;
+    function serializeListUpdate(updates: Schema.Collection.Update[], list: FieldList, parentPath: ReadonlyArray<string>, savables: ICollection.Savable[]): void;
 }

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

@@ -1,11 +1,10 @@
 import { Field, FieldList, FieldModel, ObjectField, Schema } from '@nascentdigital/funnel-core';
-import type { Block, Section } from '../domain';
+import { Block, IPage, Section } from '../domain';
 export declare namespace SerializePageUpdate {
-    type Savable = Section | Block | FieldModel;
-    function serializeSectionUpdate(updates: Schema.Page.Update[], section: Section, parentPath: string, savables: Savable[]): void;
-    function serializeBlockUpdate(updates: Schema.Page.Update[], block: Block, parentPath: string, savables: Savable[]): void;
-    function serializeFieldsUpdate(updates: Schema.Page.Update[], fields: ReadonlyArray<FieldModel>, parentPath: ReadonlyArray<string>, savables: Savable[]): Schema.Page.Update[];
-    function serializeObjectFieldUpdate(updates: Schema.Page.Update[], field: ObjectField, parentPath: ReadonlyArray<string>, savables: Savable[]): void;
-    function serializeFieldUpdate(updates: Schema.Page.Update[], field: Field, parentPath: ReadonlyArray<string>, savables: Savable[]): void;
-    function serializeListUpdate(updates: Schema.Page.Update[], list: FieldList, parentPath: ReadonlyArray<string>, savables: Savable[]): void;
+    function serializeSectionUpdate(updates: Schema.Page.Update[], section: Section, parentPath: string, savables: IPage.Savable[]): void;
+    function serializeBlockUpdate(updates: Schema.Page.Update[], block: Block, parentPath: string, savables: IPage.Savable[]): void;
+    function serializeFieldsUpdate(updates: Schema.Page.Update[], fields: ReadonlyArray<FieldModel>, parentPath: ReadonlyArray<string>, savables: IPage.Savable[]): Schema.Page.Update[];
+    function serializeObjectFieldUpdate(updates: Schema.Page.Update[], field: ObjectField, parentPath: ReadonlyArray<string>, savables: IPage.Savable[]): void;
+    function serializeFieldUpdate(updates: Schema.Page.Update[], field: Field, parentPath: ReadonlyArray<string>, savables: IPage.Savable[]): void;
+    function serializeListUpdate(updates: Schema.Page.Update[], list: FieldList, parentPath: ReadonlyArray<string>, savables: IPage.Savable[]): void;
 }

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/explore/screens/PageExplorer.js

@@ -72,9 +72,10 @@ function renderPages({ template, groupedPages, onCreatePage, onOpenPage }) {
 }
 function groupPages(site, summaries) {
     // group pages
+    const { region: { id: region }, defaultLanguage: language } = site;
     const groupedPages = summaries
         // enrich summaries with links
-        .map(summary => ({ summary, link: summary.getClosestPageRef(site.defaultLanguage) }))
+        .map(summary => ({ summary, link: summary.getClosestPageRef({ region, language }) }))
         // group summaries based on status
         .reduce((groupedPages, linkedSummary) => {
         // bind page to group (drop empty pages groups, which shouldn't occur)

package/dist/page/components/BlockEditor.d.ts

@@ -1,10 +1,12 @@
 import { Callback } from '@nascentdigital/funnel-core';
+import { ReactNode } from 'react';
 import { Block, PageSettings, Section, SectionBlock } from '../../core';
-export declare function BlockEditor({ className, block, onSelectItem }: BlockEditor.Props): import("react/jsx-runtime").JSX.Element | null;
+export declare function BlockEditor({ className, block, headerActions, onSelectItem }: BlockEditor.Props): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace BlockEditor {
     type Props = {
         className?: string;
         block: Block | SectionBlock;
+        headerActions?: ReactNode;
         onSelectItem: Callback<Block | SectionBlock | Section | PageSettings>;
     };
 }

package/dist/page/components/BlockEditor.js

@@ -10,8 +10,9 @@ const react_1 = require("react");
 const core_1 = require("../../core");
 const config_1 = require("./config");
 // component
-function BlockEditor({ className, block, onSelectItem }) {
+function BlockEditor({ className, block, headerActions, onSelectItem }) {
     // bind props + hooks
+    const page = (0, core_1.usePage)();
     const dialog = (0, core_1.useDialog)();
     const menu = (0, core_1.useMenuController)(blockMenu);
     const anchorId = (0, react_1.useId)();
@@ -58,8 +59,8 @@ 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", tabIndex: -1, children: [messageFields.length > 0 &&
+    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: (0, jsx_runtime_1.jsx)("a", { href: core_1.IPage.getPreviewUrl(page.url).href, target: `${page.brand}.preview`, children: block.name }) }), (0, jsx_runtime_1.jsxs)("div", { className: "shrink-0 flex items-center gap-l5", children: [headerActions, 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", 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/config/BlockConfigurationProvider.d.ts

@@ -1,8 +1,16 @@
 import { PropsWithChildren } from 'react';
-import { Block, PageSettings, Section, SectionBlock } from '../../../core';
-export declare function BlockConfigurationProvider({ item, children }: BlockConfigurationProvider.Props): import("react/jsx-runtime").JSX.Element;
+import { Observable } from 'rxjs';
+import { Block, BlockConfiguration, PageSettings, Section, SectionBlock } from '../../../core';
+export declare const BlockConfigurationProvider: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode | undefined;
+} & {
+    item?: Block | SectionBlock | Section | PageSettings;
+} & import("react").RefAttributes<BlockConfigurationProvider.Ref>>;
 export declare namespace BlockConfigurationProvider {
     type Props = PropsWithChildren & {
         item?: Block | SectionBlock | Section | PageSettings;
     };
+    interface Ref {
+        readonly configuration$: Observable<BlockConfiguration | undefined>;
+    }
 }

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

@@ -1,17 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BlockConfigurationProvider = BlockConfigurationProvider;
+exports.BlockConfigurationProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const rxjs_1 = require("rxjs");
 const core_1 = require("../../../core");
 // provider
-function BlockConfigurationProvider({ item, children }) {
+exports.BlockConfigurationProvider = (0, react_1.forwardRef)(function BlockConfigurationProvider({ item, children }, ref) {
     // bind context
     const context = (0, react_1.useMemo)(() => ({
         configuration: item instanceof core_1.Block || item instanceof core_1.SectionBlock
             ? item.getConfiguration()
             : undefined
     }), [item]);
+    const configuration$ = (0, react_1.useMemo)(() => new rxjs_1.BehaviorSubject(undefined), []);
+    // bind interface
+    (0, react_1.useImperativeHandle)(ref, () => ({ configuration$ }), [configuration$]);
+    // sync configuration when context updates
+    (0, react_1.useEffect)(() => {
+        configuration$.next(context.configuration);
+    }, [configuration$, context]);
     // render
     return ((0, jsx_runtime_1.jsx)(core_1.BlockConfigurationContext.Provider, { value: context, children: children }));
-}
+});

package/dist/page/components/config/BlockPreview.d.ts

@@ -1,8 +1,10 @@
+import { BlockLayout } from '@nascentdigital/funnel-core';
 import { BlockConfiguration } from '../../../core';
-export declare function BlockPreview({ className, configuration }: BlockPreview.Props): import("react/jsx-runtime").JSX.Element;
+export declare function BlockPreview({ className, scope, layout }: BlockPreview.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace BlockPreview {
     type Props = {
         className?: string;
-        configuration?: BlockConfiguration;
+        scope: BlockConfiguration.Scope;
+        layout: BlockLayout;
     };
 }

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

@@ -10,12 +10,11 @@ const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("motion/react");
 const preview_1 = require("./preview");
 // components
-function BlockPreview({ className, configuration }) {
+function BlockPreview({ className, scope, layout }) {
     // bind props
-    const { scope = 'desktop', layout } = configuration !== null && configuration !== void 0 ? configuration : {};
     const tight = scope === 'mobile'
-        ? layout === null || layout === void 0 ? void 0 : layout.tight.mobile
-        : layout === null || layout === void 0 ? void 0 : layout.tight.desktop;
+        ? layout.tight.mobile
+        : layout.tight.desktop;
     // render
     return ((0, jsx_runtime_1.jsx)(react_1.motion.section, { className: (0, classnames_1.default)(className, 'bg-surface2 rounded-xs interpolate-all', {
             'min-h-[100px]': !layout,
@@ -24,14 +23,9 @@ function BlockPreview({ className, configuration }) {
             'pb-l4': tight === 'above',
             'pt-l4': tight === 'below',
             'py-l4': tight === 'none'
-        }), layoutRoot: true, layout: true, children: configuration && renderLayout({ configuration }) }));
+        }), layoutRoot: true, layout: true, children: renderLayout({ scope, layout }) }));
 }
-function renderLayout({ configuration }) {
-    // skip if there's no layout
-    const { scope, layout } = configuration;
-    if (!layout) {
-        return null;
-    }
+function renderLayout({ scope, layout }) {
     // render layout based on root type
     const mobile = scope === 'mobile';
     const { root } = layout;

package/dist/page/components/config/index.d.ts

@@ -1,3 +1,4 @@
 export * from './BlockConfigButton';
 export * from './BlockConfigurationProvider';
 export * from './BlockPreview';
+export * from './useBlockConfiguration$';

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

@@ -17,3 +17,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./BlockConfigButton"), exports);
 __exportStar(require("./BlockConfigurationProvider"), exports);
 __exportStar(require("./BlockPreview"), exports);
+__exportStar(require("./useBlockConfiguration$"), exports);

package/dist/page/components/config/useBlockConfiguration$.d.ts

@@ -0,0 +1,3 @@
+import { Observable } from 'rxjs';
+import { BlockConfiguration } from '../../../core';
+export declare function useBlockConfiguration$(configuration$?: Observable<BlockConfiguration | undefined>): BlockConfiguration | undefined;

package/dist/page/components/config/useBlockConfiguration$.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBlockConfiguration$ = useBlockConfiguration$;
+const react_1 = require("react");
+function useBlockConfiguration$(configuration$) {
+    // bind hooks
+    const [configuration, setConfiguration] = (0, react_1.useState)();
+    // sync configuration
+    (0, react_1.useEffect)(() => {
+        // skip if there's no stream
+        if (!configuration$) {
+            setConfiguration(undefined);
+            return;
+        }
+        // watch stream and sync
+        const subscription = configuration$.subscribe(setConfiguration);
+        // stop on unmount
+        return () => subscription.unsubscribe();
+    }, [configuration$]);
+    // return configuration
+    return configuration;
+}

package/dist/page/components/panels/BlockConfigPanel.js

@@ -11,12 +11,12 @@ function BlockConfigPanel() {
     const id = (0, react_1.useId)();
     const configuration = (0, core_1.useBlockConfiguration)();
     // skip if there's no config (shouldn't happen)
-    if (!configuration || !configuration.hasPanels) {
+    const { scope = 'desktop', layout } = configuration !== null && configuration !== void 0 ? configuration : {};
+    if (!configuration || !configuration.hasPanels || !layout) {
         return null;
     }
     // render
-    const { scope } = configuration;
-    return ((0, jsx_runtime_1.jsx)(core_1.FadeIn, { children: (0, jsx_runtime_1.jsxs)(core_1.Popup.AnchorElement, { tag: "div", anchorId: id, className: "h-full flex flex-col gap-l6 py-l7 bg-surface1 rounded-xxl interpolate-all", children: [(0, jsx_runtime_1.jsx)(core_1.Tabs, { className: "mx-l7", variant: "highlighted", size: "sm", items: blockScopes, selectedItem: scope, onSelect: scope => configuration.scope = scope }), (0, jsx_runtime_1.jsx)(config_1.BlockPreview, { className: "self-center", configuration: configuration }), (0, jsx_runtime_1.jsx)("div", { className: "px-l7", children: (0, jsx_runtime_1.jsx)(config_1.BlockConfigButton, { anchorId: id, target: "block" }) })] }) }, "block.config"));
+    return ((0, jsx_runtime_1.jsx)(core_1.FadeIn, { children: (0, jsx_runtime_1.jsxs)(core_1.Popup.AnchorElement, { tag: "div", anchorId: id, className: "h-full flex flex-col gap-l6 py-l7 bg-surface1 rounded-xxl interpolate-all", children: [(0, jsx_runtime_1.jsx)(core_1.Tabs, { className: "mx-l7", variant: "highlighted", size: "sm", items: blockScopes, selectedItem: scope, onSelect: scope => configuration.scope = scope }), (0, jsx_runtime_1.jsx)(config_1.BlockPreview, { className: "self-center", scope: scope, layout: layout }), (0, jsx_runtime_1.jsx)("div", { className: "px-l7", children: (0, jsx_runtime_1.jsx)(config_1.BlockConfigButton, { anchorId: id, target: "block" }) })] }) }, "block.config"));
 }
 // helpers
 const blockScopes = [

package/dist/page/hooks/PageController.js

@@ -206,11 +206,12 @@ class PageController {
             if (existingSummary
                 && existingSummary.isInGroup(target)
                 && existingSummary.groupId !== funnel_core_1.Schema.Page.GroupId.empty) {
-                const { template, slug, language } = target;
+                const { template, slug, region, language } = target;
                 result = await this.repository.createLanguage({
                     template,
                     groupId: existingSummary.groupId,
                     slug,
+                    region,
                     language,
                     eventBus
                 });