@fieldia/designer 0.15.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fieldia/designer",
-  "version": "0.15.0",
+  "version": "0.17.0",
   "description": "Build Fieldia pages without writing JSON: an editing model with undo and versions, a survey editor, and a canvas.",
   "license": "MIT",
   "homepage": "https://fieldia.dev",
@@ -44,9 +44,9 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@fieldia/core": "0.15.0",
-    "@fieldia/viewer": "0.15.0",
-    "@fieldia/widgets": "0.15.0",
+    "@fieldia/core": "0.17.0",
+    "@fieldia/viewer": "0.17.0",
+    "@fieldia/widgets": "0.17.0",
     "tslib": "^2.8.1"
   },
   "peerDependencies": {

package/src/lib/canvas-blocks.d.mts

@@ -1,13 +1,14 @@
-import type { ButtonNode, DividerNode, ImageNode, SlotNode, SpacerNode, TextNode } from '@fieldia/core';
+import type { ButtonNode, DividerNode, ImageNode, MapNode, SlotNode, SpacerNode, TextNode } from '@fieldia/core';
 import type { ElementFactory } from './chrome.mjs';
 import type { Designer } from './designer.mjs';
 /**
  * The blocks between fields on the canvas — words, a button, a line, room, a
- * picture, a slot the app fills — drawn as the viewer draws them, so they sit
+ * picture, a slot the app fills, a map (its name and layers: the map itself
+ * is in Try it) — drawn as the viewer draws them, so they sit
  * in the grid exactly where they will. Picked, words and a button's label are
  * typed in where they stand; a run of typing is one undo step.
  */
-export type BlockNode = TextNode | ButtonNode | DividerNode | SpacerNode | ImageNode | SlotNode;
+export type BlockNode = TextNode | ButtonNode | DividerNode | SpacerNode | ImageNode | SlotNode | MapNode;
 export interface BlockViews {
     /** The block's element, made or patched; `picked` opens its words to typing. */
     draw(node: BlockNode, picked: boolean): HTMLElement;

package/src/lib/canvas-blocks.d.ts

@@ -1,13 +1,14 @@
-import type { ButtonNode, DividerNode, ImageNode, SlotNode, SpacerNode, TextNode } from '@fieldia/core';
+import type { ButtonNode, DividerNode, ImageNode, MapNode, SlotNode, SpacerNode, TextNode } from '@fieldia/core';
 import type { ElementFactory } from './chrome';
 import type { Designer } from './designer';
 /**
  * The blocks between fields on the canvas — words, a button, a line, room, a
- * picture, a slot the app fills — drawn as the viewer draws them, so they sit
+ * picture, a slot the app fills, a map (its name and layers: the map itself
+ * is in Try it) — drawn as the viewer draws them, so they sit
  * in the grid exactly where they will. Picked, words and a button's label are
  * typed in where they stand; a run of typing is one undo step.
  */
-export type BlockNode = TextNode | ButtonNode | DividerNode | SpacerNode | ImageNode | SlotNode;
+export type BlockNode = TextNode | ButtonNode | DividerNode | SpacerNode | ImageNode | SlotNode | MapNode;
 export interface BlockViews {
     /** The block's element, made or patched; `picked` opens its words to typing. */
     draw(node: BlockNode, picked: boolean): HTMLElement;

package/src/lib/canvas-blocks.js

@@ -35,6 +35,8 @@ function blockViews(options) {
                 return el('img', { class: 'fd-block fd-image fd-canvas-block', 'data-node': id, alt: '' });
             case 'slot':
                 return el('div', { class: 'fd-slot fd-canvas-block', 'data-node': id });
+            case 'map':
+                return el('div', { class: 'fd-map-preview fd-canvas-block', 'data-node': id });
         }
     }
     /** Words typed in where they stand: kept as they are while the cursor is in them. */
@@ -71,7 +73,12 @@ function blockViews(options) {
             }
             else if (node.type === 'slot')
                 element.textContent = node.name;
-            const span = node.type === 'divider' ? undefined : node.colspan;
+            else if (node.type === 'map') {
+                const w = designer.words.canvas;
+                element.replaceChildren(el('strong', {}, node.label || w.map), el('span', {}, w.mapLayers(node.layers.map((layer) => layer.id))));
+                element.style.minHeight = `${Math.round((node.height ?? 360) / 2)}px`;
+            }
+            const span = node.type === 'divider' ? undefined : node.type === 'map' ? (node.colspan ?? 12) : node.colspan;
             if (span)
                 element.style.setProperty('--fd-span', String(span));
             else

package/src/lib/canvas-blocks.js.map

@@ -1 +1 @@
-{"version":3,"file":"canvas-blocks.js","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/canvas-blocks.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"canvas-blocks.js","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/canvas-blocks.ts"],"names":[],"mappings":"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"}

package/src/lib/canvas-blocks.mjs

@@ -32,6 +32,8 @@ export function blockViews(options) {
                 return el('img', { class: 'fd-block fd-image fd-canvas-block', 'data-node': id, alt: '' });
             case 'slot':
                 return el('div', { class: 'fd-slot fd-canvas-block', 'data-node': id });
+            case 'map':
+                return el('div', { class: 'fd-map-preview fd-canvas-block', 'data-node': id });
         }
     }
     /** Words typed in where they stand: kept as they are while the cursor is in them. */
@@ -68,7 +70,12 @@ export function blockViews(options) {
             }
             else if (node.type === 'slot')
                 element.textContent = node.name;
-            const span = node.type === 'divider' ? undefined : node.colspan;
+            else if (node.type === 'map') {
+                const w = designer.words.canvas;
+                element.replaceChildren(el('strong', {}, node.label || w.map), el('span', {}, w.mapLayers(node.layers.map((layer) => layer.id))));
+                element.style.minHeight = `${Math.round((node.height ?? 360) / 2)}px`;
+            }
+            const span = node.type === 'divider' ? undefined : node.type === 'map' ? (node.colspan ?? 12) : node.colspan;
             if (span)
                 element.style.setProperty('--fd-span', String(span));
             else

package/src/lib/canvas-blocks.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"canvas-blocks.mjs","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/canvas-blocks.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"canvas-blocks.mjs","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/canvas-blocks.ts"],"names":[],"mappings":"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"}

package/src/lib/canvas-icons.js

@@ -17,6 +17,7 @@ const SHAPES = {
     image: '<rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="10" r="1.5"/><path d="m21 16-5-5-8 8"/>',
     button: '<rect x="3" y="8" width="18" height="8" rx="4"/><path d="M9 12h6"/>',
     form: '<rect x="3" y="3" width="13" height="16" rx="2"/><path d="M7 8h5M7 12h5M20 7v12a2 2 0 0 1-2 2H8"/>',
+    map: '<path d="M3 6.5l6-2.5 6 2.5 6-2.5v13.5l-6 2.5-6-2.5-6 2.5z"/><path d="M9 4v13.5M15 6.5V20"/>',
 };
 function blockIcon(doc, name) {
     const svg = doc.createElementNS('http://www.w3.org/2000/svg', 'svg');

package/src/lib/canvas-icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"canvas-icons.js","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/canvas-icons.ts"],"names":[],"mappings":";AAAA;;;;GAIG;;AAeH,8BASC;AAtBD,MAAM,MAAM,GAA2B;IACrC,KAAK,EAAE,sEAAsE;IAC7E,IAAI,EAAE,uGAAuG;IAC7G,IAAI,EAAE,0EAA0E;IAChF,OAAO,EAAE,qCAAqC;IAC9C,IAAI,EAAE,oCAAoC;IAC1C,OAAO,EAAE,+DAA+D;IACxE,MAAM,EAAE,oDAAoD;IAC5D,KAAK,EAAE,6GAA6G;IACpH,MAAM,EAAE,qEAAqE;IAC7E,IAAI,EAAE,oGAAoG;CAC3G,CAAC;AAEF,SAAgB,SAAS,CAAC,GAAa,EAAE,IAAY;IACnD,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,4BAA4B,EAAE,KAAK,CAAC,CAAC;IACrE,GAAG,CAAC,YAAY,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;IACzC,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IACtC,GAAG,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IACxC,GAAG,CAAC,YAAY,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;IACvC,kEAAkE;IAClE,GAAG,CAAC,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC;IAChD,OAAO,GAAG,CAAC;AACb,CAAC"}
+{"version":3,"file":"canvas-icons.js","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/canvas-icons.ts"],"names":[],"mappings":";AAAA;;;;GAIG;;AAgBH,8BASC;AAvBD,MAAM,MAAM,GAA2B;IACrC,KAAK,EAAE,sEAAsE;IAC7E,IAAI,EAAE,uGAAuG;IAC7G,IAAI,EAAE,0EAA0E;IAChF,OAAO,EAAE,qCAAqC;IAC9C,IAAI,EAAE,oCAAoC;IAC1C,OAAO,EAAE,+DAA+D;IACxE,MAAM,EAAE,oDAAoD;IAC5D,KAAK,EAAE,6GAA6G;IACpH,MAAM,EAAE,qEAAqE;IAC7E,IAAI,EAAE,oGAAoG;IAC1G,GAAG,EAAE,8FAA8F;CACpG,CAAC;AAEF,SAAgB,SAAS,CAAC,GAAa,EAAE,IAAY;IACnD,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,4BAA4B,EAAE,KAAK,CAAC,CAAC;IACrE,GAAG,CAAC,YAAY,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;IACzC,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IACtC,GAAG,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IACxC,GAAG,CAAC,YAAY,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;IACvC,kEAAkE;IAClE,GAAG,CAAC,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC;IAChD,OAAO,GAAG,CAAC;AACb,CAAC"}

package/src/lib/canvas-icons.mjs

@@ -14,6 +14,7 @@ const SHAPES = {
     image: '<rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="10" r="1.5"/><path d="m21 16-5-5-8 8"/>',
     button: '<rect x="3" y="8" width="18" height="8" rx="4"/><path d="M9 12h6"/>',
     form: '<rect x="3" y="3" width="13" height="16" rx="2"/><path d="M7 8h5M7 12h5M20 7v12a2 2 0 0 1-2 2H8"/>',
+    map: '<path d="M3 6.5l6-2.5 6 2.5 6-2.5v13.5l-6 2.5-6-2.5-6 2.5z"/><path d="M9 4v13.5M15 6.5V20"/>',
 };
 export function blockIcon(doc, name) {
     const svg = doc.createElementNS('http://www.w3.org/2000/svg', 'svg');

package/src/lib/canvas-icons.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"canvas-icons.mjs","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/canvas-icons.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,MAAM,GAA2B;IACrC,KAAK,EAAE,sEAAsE;IAC7E,IAAI,EAAE,uGAAuG;IAC7G,IAAI,EAAE,0EAA0E;IAChF,OAAO,EAAE,qCAAqC;IAC9C,IAAI,EAAE,oCAAoC;IAC1C,OAAO,EAAE,+DAA+D;IACxE,MAAM,EAAE,oDAAoD;IAC5D,KAAK,EAAE,6GAA6G;IACpH,MAAM,EAAE,qEAAqE;IAC7E,IAAI,EAAE,oGAAoG;CAC3G,CAAC;AAEF,MAAM,UAAU,SAAS,CAAC,GAAa,EAAE,IAAY;IACnD,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,4BAA4B,EAAE,KAAK,CAAC,CAAC;IACrE,GAAG,CAAC,YAAY,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;IACzC,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IACtC,GAAG,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IACxC,GAAG,CAAC,YAAY,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;IACvC,kEAAkE;IAClE,GAAG,CAAC,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC;IAChD,OAAO,GAAG,CAAC;AACb,CAAC"}
+{"version":3,"file":"canvas-icons.mjs","sourceRoot":"","sources":["../../../../../libs/designer/src/lib/canvas-icons.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,MAAM,GAA2B;IACrC,KAAK,EAAE,sEAAsE;IAC7E,IAAI,EAAE,uGAAuG;IAC7G,IAAI,EAAE,0EAA0E;IAChF,OAAO,EAAE,qCAAqC;IAC9C,IAAI,EAAE,oCAAoC;IAC1C,OAAO,EAAE,+DAA+D;IACxE,MAAM,EAAE,oDAAoD;IAC5D,KAAK,EAAE,6GAA6G;IACpH,MAAM,EAAE,qEAAqE;IAC7E,IAAI,EAAE,oGAAoG;IAC1G,GAAG,EAAE,8FAA8F;CACpG,CAAC;AAEF,MAAM,UAAU,SAAS,CAAC,GAAa,EAAE,IAAY;IACnD,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,4BAA4B,EAAE,KAAK,CAAC,CAAC;IACrE,GAAG,CAAC,YAAY,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;IACzC,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IACtC,GAAG,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IACxC,GAAG,CAAC,YAAY,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;IACvC,kEAAkE;IAClE,GAAG,CAAC,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC;IAChD,OAAO,GAAG,CAAC;AACb,CAAC"}

package/src/lib/designer.d.mts

@@ -1,4 +1,4 @@
-import { type AnswerRule, type ColumnCount, type ColumnsByWidth, type Field, type LabelPlace, type OptionsFrom, type PartLookKind, type HelpShown, type Page, type PageLook, type SetWhen } from '@fieldia/core';
+import { type AnswerRule, type ColumnCount, type ColumnsByWidth, type Field, type LabelPlace, type OptionsFrom, type PartLookKind, type HelpShown, type MapFence, type MapLayer, type MapNode, type Page, type PageLook, type SetWhen } from '@fieldia/core';
 import { type Condition, type ShownWhile } from './conditions.mjs';
 import { type HeaderCommands } from './header-commands.mjs';
 import { type ListCommands } from './list-commands.mjs';
@@ -333,6 +333,18 @@ export interface Designer extends HeaderCommands, ListCommands, ChoiceCommands,
     setOptionsFrom(id: string, from: OptionsFrom | null): boolean;
     /** A block's words and look, a button's label, a picture's address and description; a run of typing in one is one undo step. */
     updateBlock(id: string, patch: BlockPatch): boolean;
+    /**
+     * A map's name, height and layers. The fields its layers name come onto the
+     * page from the model; the page check says what else is wrong with them.
+     */
+    /** A map's name, height, layers, tools under its zoom, and fences; `null` takes a height, tools or fences away. Its fields come onto the page from the model. */
+    updateMap(id: string, patch: {
+        label?: string;
+        height?: number | null;
+        layers?: MapLayer[];
+        tools?: NonNullable<MapNode['tools']> | null;
+        fences?: MapFence[] | null;
+    }): boolean;
     /**
      * Several parts' widths as one edit: two trading width across the gutter
      * between them. With `twelfths`, widths are twelfths of their row, and a
@@ -406,6 +418,8 @@ export interface Designer extends HeaderCommands, ListCommands, ChoiceCommands,
     setFold(id: string, fold: Fold): boolean;
     /** Whether a saved form can be placed in the page: the app's store lists its saved forms (`PageStore.list`). */
     canPlaceForms(): boolean;
+    /** The sets of borders the app's maps know, for a map's areas by colour. */
+    regionSets(): readonly RegionSet[];
     /** The saved forms that can be placed in this page: the store's, this page itself left out. None without a store that lists them. */
     savedForms(): Promise<SavedFormRef[]>;
     /**
@@ -462,6 +476,8 @@ export declare function createDesigner(options: {
     locale?: DesignerLocale | (string & {});
     /** Open a saved form placed in the page where it is made, by its id: “Open it” on the canvas. Without one, it is not offered. */
     openForm?: (id: string) => void;
+    /** The sets of borders the app's maps know (their `regions`), offered for a map's areas by colour. Without them, a map has no areas to add. */
+    regionSets?: readonly RegionSet[];
 }): Designer;
 export declare namespace createDesigner {
     var open: (id: string, store: PageStore, options?: {
@@ -471,5 +487,17 @@ export declare namespace createDesigner {
         looks?: LookStore;
         openForm?: (id: string) => void;
         locale?: DesignerLocale | (string & {});
+        regionSets?: readonly RegionSet[];
     }) => Promise<Designer>;
 }
+/**
+ * A set of borders an app's maps know, by the name its maps' `regions` give:
+ * the property that keys each border (what a record's field holds), the one
+ * that names it, and the numbers among its properties an area can be shaded by.
+ */
+export interface RegionSet {
+    name: string;
+    key: string;
+    nameKey?: string;
+    numbers?: readonly string[];
+}

package/src/lib/designer.d.ts

@@ -1,4 +1,4 @@
-import { type AnswerRule, type ColumnCount, type ColumnsByWidth, type Field, type LabelPlace, type OptionsFrom, type PartLookKind, type HelpShown, type Page, type PageLook, type SetWhen } from '@fieldia/core';
+import { type AnswerRule, type ColumnCount, type ColumnsByWidth, type Field, type LabelPlace, type OptionsFrom, type PartLookKind, type HelpShown, type MapFence, type MapLayer, type MapNode, type Page, type PageLook, type SetWhen } from '@fieldia/core';
 import { type Condition, type ShownWhile } from './conditions';
 import { type HeaderCommands } from './header-commands';
 import { type ListCommands } from './list-commands';
@@ -333,6 +333,18 @@ export interface Designer extends HeaderCommands, ListCommands, ChoiceCommands,
     setOptionsFrom(id: string, from: OptionsFrom | null): boolean;
     /** A block's words and look, a button's label, a picture's address and description; a run of typing in one is one undo step. */
     updateBlock(id: string, patch: BlockPatch): boolean;
+    /**
+     * A map's name, height and layers. The fields its layers name come onto the
+     * page from the model; the page check says what else is wrong with them.
+     */
+    /** A map's name, height, layers, tools under its zoom, and fences; `null` takes a height, tools or fences away. Its fields come onto the page from the model. */
+    updateMap(id: string, patch: {
+        label?: string;
+        height?: number | null;
+        layers?: MapLayer[];
+        tools?: NonNullable<MapNode['tools']> | null;
+        fences?: MapFence[] | null;
+    }): boolean;
     /**
      * Several parts' widths as one edit: two trading width across the gutter
      * between them. With `twelfths`, widths are twelfths of their row, and a
@@ -406,6 +418,8 @@ export interface Designer extends HeaderCommands, ListCommands, ChoiceCommands,
     setFold(id: string, fold: Fold): boolean;
     /** Whether a saved form can be placed in the page: the app's store lists its saved forms (`PageStore.list`). */
     canPlaceForms(): boolean;
+    /** The sets of borders the app's maps know, for a map's areas by colour. */
+    regionSets(): readonly RegionSet[];
     /** The saved forms that can be placed in this page: the store's, this page itself left out. None without a store that lists them. */
     savedForms(): Promise<SavedFormRef[]>;
     /**
@@ -462,6 +476,8 @@ export declare function createDesigner(options: {
     locale?: DesignerLocale | (string & {});
     /** Open a saved form placed in the page where it is made, by its id: “Open it” on the canvas. Without one, it is not offered. */
     openForm?: (id: string) => void;
+    /** The sets of borders the app's maps know (their `regions`), offered for a map's areas by colour. Without them, a map has no areas to add. */
+    regionSets?: readonly RegionSet[];
 }): Designer;
 export declare namespace createDesigner {
     var open: (id: string, store: PageStore, options?: {
@@ -471,5 +487,17 @@ export declare namespace createDesigner {
         looks?: LookStore;
         openForm?: (id: string) => void;
         locale?: DesignerLocale | (string & {});
+        regionSets?: readonly RegionSet[];
     }) => Promise<Designer>;
 }
+/**
+ * A set of borders an app's maps know, by the name its maps' `regions` give:
+ * the property that keys each border (what a record's field holds), the one
+ * that names it, and the numbers among its properties an area can be shaded by.
+ */
+export interface RegionSet {
+    name: string;
+    key: string;
+    nameKey?: string;
+    numbers?: readonly string[];
+}

package/src/lib/designer.js

@@ -1184,6 +1184,35 @@ function createDesigner(options) {
         },
         // canvas lane
         updateBlock: (id, patch) => apply((draft) => settings.updateBlock(draft, id, patch), `block:${id}:${Object.keys(patch).join(',')}`),
+        updateMap: (id, patch) => apply((draft) => {
+            const node = (0, page_tree_1.findNode)(draft, id)?.node;
+            if (!node || node.type !== 'map')
+                throw new refusal_1.Refusal((w) => w.layout.noPart(id));
+            if (patch.label !== undefined) {
+                if (patch.label.trim())
+                    node.label = patch.label;
+                else
+                    delete node.label;
+            }
+            if (patch.height === null)
+                delete node.height;
+            else if (patch.height !== undefined)
+                node.height = patch.height;
+            if (patch.tools === null || patch.tools?.length === 0)
+                delete node.tools;
+            else if (patch.tools !== undefined)
+                node.tools = [...patch.tools];
+            if (patch.fences === null || patch.fences?.length === 0)
+                delete node.fences;
+            else if (patch.fences !== undefined)
+                node.fences = clone(patch.fences);
+            if (patch.layers !== undefined)
+                node.layers = clone(patch.layers);
+            if (patch.layers !== undefined || patch.fences !== undefined)
+                for (const name of (0, page_tree_1.mapNodeFields)(node))
+                    if (!draft.fields[name] && model[name])
+                        draft.fields[name] = model[name];
+        }, `map:${id}:${Object.keys(patch).join(',')}`),
         setWidths: (widths, options) => apply((draft) => settings.setWidths(draft, widths, options?.twelfths)),
         // rules lane
         ...(0, rules_commands_1.rulesCommands)({ apply, getPage: () => page, fromModel }),
@@ -1235,6 +1264,7 @@ function createDesigner(options) {
         setFold: (id, fold) => apply((draft) => (0, group_fold_1.setFold)(draft, id, fold)),
         // embed lane
         canPlaceForms: () => typeof store?.list === 'function',
+        regionSets: () => options.regionSets ?? [],
         async savedForms() {
             if (!store?.list)
                 return [];
@@ -1280,7 +1310,7 @@ createDesigner.open = async (id, store, options = {}) => {
     const page = draft ?? versions[versions.length - 1]?.page;
     if (!page)
         throw new Error(`The store has no page "${id}"`);
-    return createDesigner({ page, store, versions, model: options.model, lists: options.lists, kinds: options.kinds, looks: options.looks, openForm: options.openForm, locale: options.locale });
+    return createDesigner({ page, store, versions, model: options.model, lists: options.lists, kinds: options.kinds, looks: options.looks, openForm: options.openForm, locale: options.locale, regionSets: options.regionSets });
 };
 /** A sheet's status steps, by the id the designer picks them by: they show for some records only, and to some roles, as any part. */
 function statusbarOf(page, id) {