@nascentdigital/funnel-editor 5.0.2 → 5.0.3

package/dist/components.d.ts

@@ -15,7 +15,8 @@ export * from './core/repository/SerializeCollectionUpdate';
 export * from './core/repository/SerializePageUpdate';
 export * from './core/repository/TagSerializer';
 export * from './core/splash';
-export * from './page/hooks';
+export * from './page/components/config';
 export * from './page/components/SettingsEditor';
+export * from './page/hooks';
 export * from './collection/hooks';
 export { PageNav, BlockEditor };

package/dist/components.js

@@ -36,7 +36,8 @@ __exportStar(require("./core/repository/SerializePageUpdate"), exports);
 __exportStar(require("./core/repository/TagSerializer"), exports);
 __exportStar(require("./core/splash"), exports);
 // page
-__exportStar(require("./page/hooks"), exports);
+__exportStar(require("./page/components/config"), exports);
 __exportStar(require("./page/components/SettingsEditor"), exports);
+__exportStar(require("./page/hooks"), exports);
 // collection
 __exportStar(require("./collection/hooks"), exports);

package/dist/core/client/EditorApiClient.js

@@ -33,7 +33,7 @@ class EditorApiClient {
         });
     }
     getPreviewUrl(url) {
-        return `/api/preview?token=${this._token}&redirect=${url}`;
+        return `/api/preview?redirect=${url}`;
     }
     async getAssets(data) {
         return this.sendCommand('getAssets', data);

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

@@ -138,7 +138,7 @@ exports.PagePicker = (0, react_1.forwardRef)(function PagePicker({ language }, r
             pages.sync()
                 .then(() => {
                 setPagesSchema(pages.template);
-                setPages(pages.items.map(page => page.getClosestPageRef(language, site.defaultLanguage)));
+                setPages(pages.items.map(page => page.getClosestPageRef({ region: site.region.id, language, fallbackLanguage: site.defaultLanguage })));
             })
                 .catch(e => setError(feedback_1.ErrorMessage.coerce(e)));
         }

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

@@ -52,6 +52,9 @@ export declare namespace IPage {
         updatedOn: number;
         publishedOn?: number;
     };
+    namespace Ref {
+        function fromData({ tags, ...data }: Schema.Page.Data.AsLink): Ref;
+    }
     type References = {
         pages: Ref[];
         collections: Schema.Collection.Data.AsLink[];
@@ -70,4 +73,5 @@ export declare namespace IPage {
         function filter(event: EventBus.Event): event is Event;
         function create(event: EventBus.Args<Event>): Event;
     }
+    function getPreviewUrl(path: string): URL;
 }

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/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/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
                 });

package/dist/styles/index.css

@@ -501,12 +501,12 @@ video {
 }
 
 [popover]{
-    inset: var(--toolwind-toggle-oQHJpc9jXV, 0px);
-    background-color: var(--toolwind-toggle-GCBdFMAuDL, canvas);
-    color: var(--toolwind-toggle-I8FwR2AIO0, canvastext);
-    margin: var(--toolwind-toggle-irGpFytKLG, auto);
+    inset: var(--toolwind-toggle-JZbcB7Gi7r, 0px);
+    background-color: var(--toolwind-toggle-BCaXoftPtT, canvas);
+    color: var(--toolwind-toggle-JbSxTBifE3, canvastext);
+    margin: var(--toolwind-toggle-j7HGGXmZWl, auto);
 }
-    html, body, #__next, .Editor-wrap{
+    html, body, #__next, #root, .Editor-wrap{
     position: relative;
     height: 100lvh;
     max-height: 100lvh;
@@ -549,6 +549,31 @@ video {
     overflow: scroll;
 }
 
+
+    html.Editor-widget{
+    height: -moz-max-content;
+    height: max-content;
+    max-height: -moz-max-content;
+    max-height: max-content;
+    min-height: -moz-max-content;
+    min-height: max-content;
+    background-color: transparent;
+}
+
+        html.Editor-widget body, html.Editor-widget #__next, html.Editor-widget #root, html.Editor-widget .Editor-wrap{
+    height: -moz-max-content;
+    height: max-content;
+    max-height: -moz-max-content;
+    max-height: max-content;
+    min-height: -moz-max-content;
+    min-height: max-content;
+    background-color: transparent;
+}
+
+        html.Editor-widget nextjs-portal {
+            display: none !important;
+        }
+
     /* colors: light mode */
     html, *.light-mode {
         --color-background: 247 250 252;
@@ -5996,10 +6021,10 @@ img.nd-Visual-image {
 .anchored\/\[--nd-popup-anchor\]:where(.anchored\/\[--nd-popup-anchor\]){
     position: absolute;
     view-transition-name: --tw-anchor-view-transition-2j1919322s193433343934192p322r2w33362l;
-    --toolwind-toggle-oQHJpc9jXV: auto;
-    --toolwind-toggle-GCBdFMAuDL: transparent;
-    --toolwind-toggle-I8FwR2AIO0: inherit;
-    --toolwind-toggle-irGpFytKLG: 0px;
+    --toolwind-toggle-JZbcB7Gi7r: auto;
+    --toolwind-toggle-BCaXoftPtT: transparent;
+    --toolwind-toggle-JbSxTBifE3: inherit;
+    --toolwind-toggle-j7HGGXmZWl: 0px;
 }
 .counter-l1{
     counter-reset: l1;

package/dist/styles/tailwind.js

@@ -15,6 +15,7 @@ exports.EditorTailwindConfig = {
     content: [
         './src/**/*.{tsx,jsx,ts,js}',
         '../core/src/**/*.{tsx,jsx,ts,js}',
+        '../editor-contentful/src/**/*.{tsx,jsx,ts,js}',
         '../ui/src/**/*.{tsx,jsx,ts,js}'
     ],
     safelist: [

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@nascentdigital/funnel-editor",
-  "version": "5.0.2",
+  "version": "5.0.3",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
-    "access": "restricted"
+    "access": "public"
   },
   "repository": {
     "url": "git+https://github.com/nascentdigital/funnel.git",
@@ -91,5 +91,5 @@
     "ts-jest": "^29",
     "type-fest": "^4"
   },
-  "gitHead": "24d9690cf813052f6561c3ccef11c7cf69ad7f7c"
+  "gitHead": "0d1cc7d78504e8819998d928ffb342d622f75690"
 }