pagepilot-visual-editor 1.0.30 → 1.0.34

package/CHANGELOG.md

@@ -7,6 +7,45 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 ## [Unreleased]
 
 ### Changed
+- Re-synced the vendored editor with ahd-fe `plugin-integration` (2aa96315d),
+  covering everything since the 67f2b933 sync. Upstream behaviour pulled in
+  includes:
+  - "Change design" in the block tune menu: swap a template section for
+    another design, carrying content over (`sectionScope`,
+    `changeSectionDesign`, `ChangeDesignFlow`, compare dialog + variables pane).
+  - "Edit variable" dialog: rename a `{{token}}` across the page or convert it
+    back to plain text, from the Variables tab, bound inputs or the canvas.
+  - MenuPicker: sub-menu text color / font size / font weight, header /
+    footer / navigation labels, page-link picker for site pages.
+  - Layers panel: section category in labels, copy/paste whole page buttons
+    disabled when there's nothing to copy/paste.
+  - Add-block keeps preassigned IDs, "Edit Content" in the add menu, Section
+    Library "View all" / "All sections", Video / Rating / Progress token fields.
+  - Inline text caret is restored correctly on undo/redo.
+- Host stubs: `modules/content/view/contentViewSelectors` (no record),
+  trimmed `view/page/form/dialog/PageVariablesPreview`, full
+  `view/template/form/fields/types` + `renameFieldTokens`; i18n defaults
+  regenerated with the new keys.
+- Re-synced the vendored editor with ahd-fe `master` (9661ba36b), on top of
+  the 82ec6ec4b sync below. Upstream behaviour pulled in includes:
+  - Host-application theme support (theme slots, surface lock, dark-host
+    `light-dark()` adaptation) across readers, the canvas and previews.
+  - Selecting a block no longer switches the sidebar tab; a variable-bound
+    block highlights its variable for the Variables tab.
+  - AI: per-field `RichTextAiButton` / `AiGenerateButton` (the AI Fill All
+    dialog is removed), and scalar `{{token}}` fields are auto-registered.
+  - Token editing inside inline text keeps `{{token}}` wrappers intact
+    (`splitEditedTokenHtml`, `htmlToPlainText`).
+  - Inline toolbar table resizing, MenuPicker items-array / columns plus a
+    page-link picker, FlexColumns column widths, container responsive
+    height, removing a repeat row deletes its subtree.
+  - Section Library defaults to "My templates" when the tenant has any.
+  - Debounced inputs and fewer re-renders in the sidebar and minimap.
+- Host stubs: `modules/allSlugs` (empty list) and
+  `modules/websiteV2/propagateFromPage` (no-op), and `authAxios` accepts
+  `signal` so AI requests can be cancelled without axios.
+- ahd-fe-only template-switch UI (Templates / SavedTemplates / compare
+  dialogs) is not vendored.
 - Re-synced the vendored editor (`editor-sample/`, `email-builder-core/`,
   `blocks-internal/`) with ahd-fe `master` (82ec6ec4b). 358 of 453 shared
   files are now byte-identical. The rest differ only where the standalone

package/dist/blocks-internal/block-button/src/index.d.ts

@@ -42,6 +42,12 @@ export declare const ButtonPropsSchema: z.ZodObject<{
             normal: "normal";
             bold: "bold";
         }>>>;
+        textDecoration: z.ZodNullable<z.ZodOptional<z.ZodEnum<{
+            none: "none";
+            underline: "underline";
+            "line-through": "line-through";
+            "underline line-through": "underline line-through";
+        }>>>;
         textAlign: z.ZodNullable<z.ZodOptional<z.ZodEnum<{
             right: "right";
             left: "left";

package/dist/blocks-internal/block-heading/src/index.d.ts

@@ -11,8 +11,8 @@ export declare const HeadingPropsSchema: z.ZodObject<{
             h6: "h6";
         }>>>;
         linkType: z.ZodNullable<z.ZodOptional<z.ZodEnum<{
-            link: "link";
             text: "text";
+            link: "link";
         }>>>;
         url: z.ZodNullable<z.ZodOptional<z.ZodString>>;
         openInNewTab: z.ZodNullable<z.ZodOptional<z.ZodBoolean>>;
@@ -132,4 +132,4 @@ export declare const HeadingPropsDefaults: {
     readonly openInNewTab: false;
 };
 export declare function Heading({ props, style }: HeadingProps): import("react/jsx-runtime").JSX.Element;
-export declare function getFontSize(level: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'): 32 | 24 | 19 | 16 | 13 | 11;
+export declare function getFontSize(level: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'): 16 | 32 | 24 | 19 | 13 | 11;

package/dist/blocks-internal/block-list/src/index.d.ts

@@ -53,8 +53,8 @@ export declare const ListPropsSchema: z.ZodObject<{
             "upper-roman": "upper-roman";
         }>>>;
         numberSuffix: z.ZodPreprocess<z.ZodNullable<z.ZodOptional<z.ZodEnum<{
-            ".": ".";
             ")": ")";
+            ".": ".";
         }>>>>;
         startNumber: z.ZodNullable<z.ZodOptional<z.ZodNumber>>;
         markerColor: z.ZodOptional<z.ZodNullable<z.ZodUnion<readonly [z.ZodString, z.ZodString, z.ZodLiteral<"transparent">]>>>;

package/dist/editor-sample/App/InspectorDrawer/BehaviourPanel.d.ts

@@ -5,7 +5,7 @@ export declare const gridContainerSx: {
     py: string;
 };
 export declare const StyledElementIdContainer: import('@emotion/styled').StyledComponent<import('@mui/system').BoxOwnProps<import('@mui/material').Theme> & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('@mui/system').BoxOwnProps<import('@mui/material').Theme>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
-export declare const StyledDivider: import('@emotion/styled').StyledComponent<import('@mui/material').DividerOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "style" | "children" | "className" | "textAlign" | "orientation" | "light" | "absolute" | "variant" | "classes" | "sx" | "flexItem"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
+export declare const StyledDivider: import('@emotion/styled').StyledComponent<import('@mui/material').DividerOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "light" | "style" | "children" | "className" | "textAlign" | "orientation" | "absolute" | "variant" | "classes" | "sx" | "flexItem"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 export declare const StyledPositionGrid: any;
 export declare const StyledTriggerGrid: any;
 export declare const StyledAnimationGrid: any;

package/dist/editor-sample/App/InspectorDrawer/ConfigurationPanel/input-panels/MenuPickerSidebarPanel.d.ts

@@ -8,7 +8,7 @@ type Props = {
             stickyNavTablet?: boolean | null;
             stickyNavMobile?: boolean | null;
             position: 'left' | 'center' | 'right';
-            orientation: 'horizontal' | 'vertical';
+            orientation: 'horizontal' | 'vertical' | 'columns';
             menuItems?: any[];
             layout?: 'menu-only' | 'logo-menu' | 'menu-cta' | 'logo-menu-cta';
             startChildrenIds?: string[];

package/dist/editor-sample/App/InspectorDrawer/ConfigurationPanel/input-panels/helpers/inputs/VariableLinkHint.d.ts

@@ -1,8 +1,39 @@
+import { default as React } from 'react';
+/** Inline "Edit variable" link — rename the token(s) behind `value` or convert them to text. */
+export declare function EditVariableLink({ value }: {
+    value: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Compact pencil (fits inside a locked input's end adornment) opening "Edit
+ * variable". Opts back into pointer events — VariableBoundClickArea switches
+ * them off on the input — and stops the click reaching that wrapper.
+ */
+export declare function EditVariableIcon({ value }: {
+    value: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Wraps a locked, variable-bound input so clicking anywhere on it jumps to the
+ * Variables tab (a disabled input swallows clicks itself, so its own pointer
+ * events are switched off and the wrapper catches them). Passes children
+ * through untouched when not bound.
+ */
+export declare function VariableBoundClickArea({ bound, value, fieldId, children, }: {
+    bound: boolean;
+    value: string;
+    /** Known owning field (e.g. a menu's items-array) when `value` has no token. */
+    fieldId?: string;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
 /** Compact icon (fits inside an input) linking a locked, variable-bound value to its variable. */
 export declare function VariableLinkIcon({ value }: {
     value: string;
 }): import("react/jsx-runtime").JSX.Element;
-/** Text hint shown under a locked, variable-bound input — jumps to the variable. */
-export default function VariableLinkHint({ value }: {
-    value: string;
+/**
+ * Text hint shown under a locked, variable-bound input — jumps to the variable.
+ * Pass `fieldId` when the variable is known directly (e.g. a repeatable block's
+ * array field) instead of being derived from a `{{token}}` in `value`.
+ */
+export default function VariableLinkHint({ value, fieldId }: {
+    value?: string;
+    fieldId?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/editor-sample/App/InspectorDrawer/LayersPanelStyles.d.ts

@@ -4,7 +4,7 @@ export declare const PanelRoot: import('@emotion/styled').StyledComponent<import
 export declare const PanelHeader: import('@emotion/styled').StyledComponent<import('@mui/system').BoxOwnProps<Theme> & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('@mui/system').BoxOwnProps<Theme>> & import('@mui/system').MUIStyledCommonProps<Theme>, {}, {}>;
 export declare const PanelContent: import('@emotion/styled').StyledComponent<import('@mui/system').BoxOwnProps<Theme> & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('@mui/system').BoxOwnProps<Theme>> & import('@mui/system').MUIStyledCommonProps<Theme>, {}, {}>;
 export declare const HeaderBox: import('@emotion/styled').StyledComponent<import('@mui/system').BoxOwnProps<Theme> & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('@mui/system').BoxOwnProps<Theme>> & import('@mui/system').MUIStyledCommonProps<Theme>, {}, {}>;
-export declare const HeaderTitle: import('@emotion/styled').StyledComponent<import('@mui/material').TypographyOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "top" | "bottom" | "right" | "left" | "padding" | "margin" | "style" | "lineHeight" | "children" | "className" | "fontSize" | "fontFamily" | "fontWeight" | "fontStyle" | "textAlign" | "marginBottom" | "width" | "height" | "borderRadius" | "borderColor" | "gap" | "p" | "color" | "flex" | "display" | "position" | "border" | "paddingBottom" | "align" | "bgcolor" | "borderTop" | "px" | "boxShadow" | "overflow" | "variant" | "paddingX" | "paddingY" | "marginX" | "marginY" | "maxWidth" | "maxHeight" | "classes" | "sx" | "letterSpacing" | "order" | "visibility" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "marginBlockEnd" | "marginBlockStart" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "minHeight" | "minWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "rowGap" | "textOverflow" | "textTransform" | "whiteSpace" | "borderBottom" | "borderLeft" | "borderRight" | "gridArea" | "gridColumn" | "gridRow" | "marginBlock" | "marginInline" | "paddingBlock" | "paddingInline" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "py" | "typography" | "displayPrint" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import('@mui/system').MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const HeaderTitle: import('@emotion/styled').StyledComponent<import('@mui/material').TypographyOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "border" | "top" | "bottom" | "right" | "left" | "padding" | "margin" | "style" | "lineHeight" | "children" | "className" | "fontSize" | "fontFamily" | "fontWeight" | "fontStyle" | "textAlign" | "marginBottom" | "width" | "height" | "borderRadius" | "borderColor" | "gap" | "p" | "color" | "flex" | "display" | "position" | "paddingBottom" | "align" | "bgcolor" | "borderTop" | "px" | "boxShadow" | "overflow" | "variant" | "paddingX" | "paddingY" | "marginX" | "marginY" | "maxWidth" | "maxHeight" | "classes" | "sx" | "letterSpacing" | "order" | "visibility" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "marginBlockEnd" | "marginBlockStart" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "minHeight" | "minWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "rowGap" | "textOverflow" | "textTransform" | "whiteSpace" | "borderBottom" | "borderLeft" | "borderRight" | "gridArea" | "gridColumn" | "gridRow" | "marginBlock" | "marginInline" | "paddingBlock" | "paddingInline" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "py" | "typography" | "displayPrint" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import('@mui/system').MUIStyledCommonProps<Theme>, {}, {}>;
 export declare const ClipboardBar: import('@emotion/styled').StyledComponent<import('@mui/system').BoxOwnProps<Theme> & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('@mui/system').BoxOwnProps<Theme>> & import('@mui/system').MUIStyledCommonProps<Theme>, {}, {}>;
 export declare const ActionSpan: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const ActionButton: import('@emotion/styled').StyledComponent<import('@mui/material').ButtonOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style" | "children" | "className" | "size" | "color" | "disabled" | "action" | "href" | "tabIndex" | "fullWidth" | "variant" | "classes" | "sx" | "loading" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "loadingIndicator" | "disableElevation" | "endIcon" | "loadingPosition" | "startIcon"> & import('@mui/system').MUIStyledCommonProps<Theme>, {}, {}>;

package/dist/editor-sample/App/InspectorDrawer/LayoutPanel/ChangeDesignFlow.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+/**
+ * "Change design" for one section: pick a block template (the library opens
+ * on the section's category), review the section before/after, then swap it
+ * in place keeping the section's content. See changeSectionDesign.
+ */
+declare const ChangeDesignFlow: React.FC<{
+    blockId: string;
+    open: boolean;
+    onClose: () => void;
+}>;
+export default ChangeDesignFlow;

package/dist/editor-sample/App/InspectorDrawer/LayoutPanel/ChangeTemplateCompareDialog.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { FieldPatches } from './templateHelpers';
+interface ChangeTemplateCompareDialogProps {
+    open: boolean;
+    templateId?: string;
+    before: any;
+    after: any;
+    loading?: boolean;
+    onConfirm: (fieldPatches?: FieldPatches) => void;
+    onClose: () => void;
+    title?: string;
+    description?: string;
+    confirmLabel?: string;
+    notes?: string[];
+}
+/**
+ * "Change template" confirm: the current page on the left, the page as it
+ * will look after the change on the right — either rendered, or as each
+ * side's variables. The right side's variable values can be edited; the
+ * edits ride along with the confirm.
+ */
+declare const ChangeTemplateCompareDialog: React.FC<ChangeTemplateCompareDialogProps>;
+export default ChangeTemplateCompareDialog;

package/dist/editor-sample/App/InspectorDrawer/LayoutPanel/ChangeTemplateVariablesPane.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { TemplateFormField } from '../../../documents/editor/templateVariables';
+/**
+ * A page's variables (`root.data.formFields`), grouped the way the editor's
+ * Variables tab groups them. The "Change template" compare shows one per
+ * side, so the user sees which values the new template keeps; with
+ * `onPatch` the values can be edited before the change is applied, without
+ * it the same fields render disabled.
+ */
+declare const ChangeTemplateVariablesPane: React.FC<{
+    document: any;
+    onPatch?: (fieldId: string, patch: Partial<TemplateFormField>) => void;
+}>;
+export default ChangeTemplateVariablesPane;

package/dist/editor-sample/App/InspectorDrawer/LayoutPanel/SectionsModal.d.ts

@@ -2,6 +2,11 @@ interface SectionsModalProps {
     open: boolean;
     onClose: () => void;
     onInsert?: (block: any, preassignedId?: string) => void;
+    /** Category tab to open on (falls back to "Overall" when it has no templates). */
+    initialCategory?: string;
+    /** Pick mode ("Change design"): hand the fetched template back instead of inserting it. */
+    onPick?: (record: any) => void;
+    title?: string;
 }
 declare const SectionsModal: React.FC<SectionsModalProps>;
 export default SectionsModal;

package/dist/editor-sample/App/InspectorDrawer/LayoutPanel/templateCategory.d.ts

@@ -0,0 +1 @@
+export declare function humanizeCategory(category: string): string;

package/dist/editor-sample/App/InspectorDrawer/LayoutPanel/templateHelpers.d.ts

@@ -79,75 +79,35 @@ export declare function mergeTemplateFormFields(templateRecord: any, idMapping?:
     [oldId: string]: string;
 }): void;
 /**
- * Merge incoming formFields into the existing ones. Used by "Add this section"
- * so adding Template B that shares {{name}} with Template A keeps the typed
- * value and only appends B's new fields. Then jumps to Variables.
- *
- * Two dedupe rules — different because these fields mean different things:
- *
- *  - Scalar / plain-array fields are dedupe'd by `id`. A page-level `{{name}}`
- *    is a single slot; inserting Template B that also references `{{name}}`
- *    should reuse Template A's (possibly user-filled) value, not stomp it.
- *
- *  - Container-repeat fields (`type === 'array' && sourceBlockId`) are dedupe'd
- *    by `sourceBlockId`. Each such field is scoped to ONE container instance
- *    (a specific Grid / FlexColumns / Carousel), and its `sourceBlockId` gets
- *    remapped per insertion. Inserting a testimonial section twice produces
- *    two independent grid instances; BOTH need their own field or the second
- *    grid's `{{this.subField}}` tokens can't find their row in
- *    `buildRepeatRowIndex` (which keys off sourceBlockId/rowIds) and render as
- *    bare pills. Same-token-id but different sourceBlockId → different field.
- *
- * When a new container-repeat field's id collides with an already-registered
- * field (either a scalar sharing that name, or the same section inserted
- * before), we suffix the id with its sourceBlockId so `buildContext` doesn't
- * silently overwrite the earlier field. Sub-field tokens (`{{this.X}}`) are
- * resolved via the row index by block id, so they don't care about the outer
- * field's id.
+ * "Choose design" with a multi-section page template: replaces the page's
+ * sections with the template's (each carrying its own prefilled variables),
+ * loads the first internal section onto the canvas and returns its index so
+ * the caller can make it active.
  */
+export declare function applyPageSectionsTemplate(configuration: any, templateRecord: any, record: any, onUpdateRecord: (record: any) => void, resetDocument: (doc: any) => void): number;
 export declare function appendTemplateFormFields(templateRecord: any, idMapping?: {
     [oldId: string]: string;
 }): void;
 export declare const applyFullDocumentTemplate: (configuration: any, document: any, resetDocument: (doc: any) => void) => void;
 /**
- * "Change template": apply the incoming template's styling — both the root
- * canvas AND every individual block (menu, header, buttons, images, etc.) —
- * while leaving user content and structure exactly as they were.
- *
- * Root overlay: root-level style keys copied via `PURE_STYLE_KEYS` (the wide
- * list — "Change template" is the confirm-gated aggressive restyle).
- * Per-block overlay: `overlayBlockStylesFromTemplate`.
- *
- * Confirmation copy the user sees before this fires:
- *   "You can change the template, but please note that only the common
- *    fields will be retained; any unused data will be removed."
- * "Common fields" is the form-fields half — see
- * `mergeTemplateFormFieldsPreservingValues`.
+ * Build the document "Change template" would produce, without touching the
+ * editor. `applyChangeTemplate` commits it; the template preview dialog
+ * renders it beside the current page.
  */
-export declare const applyChangeTemplate: (configuration: any, document: any, resetDocument: (doc: any) => void) => void;
+export declare const buildChangeTemplateDocument: (configuration: any, document: any, templateRecord?: any) => {
+    doc: any;
+    fields: any[];
+    current: any;
+} | null;
+export type FieldPatches = Record<string, Record<string, any>>;
 /**
- * Sidebar-side counterpart to `applyChangeTemplate`. The user's blocks
- * stay on the canvas, so any `{{token}}` they already contain must keep
- * a matching form-field entry — otherwise the token renders as an unbound
- * "Add X" pill. This helper therefore takes the union approach:
- *
- *   - Every existing form field the user has is retained VERBATIM (id,
- *     type, value, everything). Tokens keep resolving to the values the
- *     user typed.
- *   - Any field the incoming template defines that the user doesn't
- *     already have is appended with its prefilled default. New template
- *     structure that references brand-new tokens still lights up.
- *   - Nothing is deleted. "Unused data will be removed" from the confirm
- *     copy cannot apply here: removing a field whose token still lives
- *     on the canvas would break the very content we just promised not
- *     to touch.
- *
- * Container-repeat fields (`type === 'array'` with `sourceBlockId`)
- * follow the same "already there? keep it" rule; the underlying
- * container blocks weren't remapped by `applyChangeTemplate`, so
- * `sourceBlockId` and `rowIds` stay valid.
+ * Apply field edits (field id → patch) made in the "Change template" compare
+ * to a document's `root.data.formFields`. An items-array field's rows are
+ * mirrored onto its block's items too — those blocks render from their own
+ * props, not from the field.
  */
-export declare function mergeTemplateFormFieldsPreservingValues(templateRecord: any): void;
+export declare const applyFieldPatches: (doc: any, patches: FieldPatches) => any;
+export declare const applyChangeTemplate: (configuration: any, document: any, resetDocument: (doc: any) => void, templateRecord?: any, fieldPatches?: FieldPatches) => void;
 /**
  * "Use this Styles" for non-tour modules (pages, FAQ, app-banner, tooltip,
  * template). Applies the template's styling — the root canvas AND every
@@ -161,8 +121,8 @@ export declare function mergeTemplateFormFieldsPreservingValues(templateRecord:
  * so the canvas geometry, background, CTA-existence and block list stay the
  * user's — the page never resizes and no root CTA button appears/moves.
  *
- * Per-block: `overlayBlockStylesFromTemplate` — same donor-matching + prop
- * overlay "Change template" uses; nothing is added, removed or re-keyed.
+ * Per-block: `overlayBlockStylesFromTemplate` — donor-matching + prop
+ * overlay; nothing is added, removed or re-keyed.
  *
  * History: a much older version of this function matched blocks by type,
  * replaced each with the template's, and DELETED every unmatched block —

package/dist/editor-sample/App/InspectorDrawer/VariablesPanel/AiGenerateButton.d.ts

@@ -3,6 +3,10 @@ type AiGenerateButtonProps = {
     /** The fields eligible for AI fill — id/name/type. */
     fields: AiTargetField[];
     onGenerated: (values: AiValue[]) => void;
+    /** Overrides the default text-button trigger (label, look) and popover side. */
+    label?: string;
+    variant?: 'text' | 'outlined';
+    popoverBelow?: boolean;
 };
 /**
  * Footer-level "Generate with AI" button for the variable group dialog. One
@@ -10,5 +14,5 @@ type AiGenerateButtonProps = {
  * fields are sent as `context.formFields` and the AI returns the same array
  * back with `value` populated, at `generation.data.response.data.formFields`.
  */
-export default function AiGenerateButton({ fields, onGenerated }: AiGenerateButtonProps): import("react/jsx-runtime").JSX.Element;
+export default function AiGenerateButton({ fields, onGenerated, label, variant, popoverBelow, }: AiGenerateButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/editor-sample/App/InspectorDrawer/VariablesPanel/EditVariableDialog.d.ts

@@ -0,0 +1,9 @@
+/**
+ * "Edit variable" — rename a declared `{{token}}` / `{{this.token}}` (every
+ * use on the page is rewritten, the value is kept) or turn it back into plain
+ * text. Opened via `openEditVariable` from the Variables tab, a bound input in
+ * the block sidebar, or the canvas tune menu — the last two pass EVERY
+ * variable they use (a Button's label + link), so one "Convert to text" frees
+ * the whole block.
+ */
+export default function EditVariableDialog(): import("react/jsx-runtime").JSX.Element;

package/dist/editor-sample/App/InspectorDrawer/VariablesPanel/ItemsArrayRepeatSection.d.ts

@@ -5,9 +5,8 @@
  * `TemplateFormField` bound to this block's own items via `itemsBlockId`,
  * seeded from whatever items already exist.
  *
- * No block type currently opts in (see `ITEMS_ARRAY_BLOCK_TYPES` in
- * documentUtils), so this renders for nothing today — kept alongside the
- * block-agnostic helpers for the next items-array block.
+ * Opt-in list: `ITEMS_ARRAY_BLOCK_TYPES` in documentUtils (today MenuPicker,
+ * custom-menu mode).
  */
 export default function ItemsArrayRepeatSection({ blockId }: {
     blockId: string;

package/dist/editor-sample/App/InspectorDrawer/VariablesPanel/RowCard.d.ts

@@ -9,15 +9,19 @@ type RowCardProps = {
     onRemove: null | (() => void);
     updateCell: (rowIndex: number, key: string, value: string) => void;
     headerLabel: string;
+    /** Read-only: the row still expands, its inputs are disabled. */
+    disabled?: boolean;
+    /** Shows an "Edit variable" icon per sub-field (`{{this.subId}}` rename/unlink/delete). */
+    onEditSub?: (subId: string) => void;
 };
 /**
  * The bare list of sub-field inputs for one row — no card chrome. Used inside
  * RowCard (behind its collapse) and directly by the Template Modifier, which
  * doesn't need a second collapsible layer around its single template row.
  */
-export declare function RowFields({ rowIndex, row, itemFields, updateCell, sx, }: Pick<RowCardProps, 'rowIndex' | 'row' | 'itemFields' | 'updateCell'> & {
+export declare function RowFields({ rowIndex, row, itemFields, updateCell, sx, disabled, onEditSub, }: Pick<RowCardProps, 'rowIndex' | 'row' | 'itemFields' | 'updateCell' | 'disabled' | 'onEditSub'> & {
     sx?: object;
 }): import("react/jsx-runtime").JSX.Element;
 /** One collapsible copy/template card in the Variables array editor. */
-export default function RowCard({ rowIndex, row, itemFields, isExpanded, onToggle, onRemove, updateCell, headerLabel, }: RowCardProps): import("react/jsx-runtime").JSX.Element;
+export default function RowCard({ rowIndex, row, itemFields, isExpanded, onToggle, onRemove, updateCell, headerLabel, disabled, onEditSub, }: RowCardProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/editor-sample/App/InspectorDrawer/VariablesPanel/ScalarFieldRow.d.ts

@@ -5,11 +5,13 @@ type Props = {
     onPatch: (patch: Partial<TemplateFormField>) => void;
     /** Optional control rendered at the right of the label row (e.g. "locate in canvas"). */
     headerAction?: ReactNode;
+    /** Read-only: shows the value and its controls, all disabled. */
+    disabled?: boolean;
 };
 /**
  * One scalar variable row: name, a type selector (Text / Number / Date / Time /
  * Image), the value input, and — for `date` / `time` — the format + timezone
  * controls.
  */
-export default function ScalarFieldRow({ field, onPatch, headerAction }: Props): import("react/jsx-runtime").JSX.Element;
+export default function ScalarFieldRow({ field, onPatch, headerAction, disabled }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/editor-sample/App/InspectorDrawer/VariablesPanel/aiFill.d.ts

@@ -1,4 +1,4 @@
-import { TemplateFormField, TemplateScalarType } from '../../../documents/editor/templateVariables';
+import { TemplateArrayRow, TemplateFormField, TemplateScalarType } from '../../../documents/editor/templateVariables';
 export type VisibleForm = {
     field: TemplateFormField;
     index: number;
@@ -28,9 +28,48 @@ export declare function buildAiFields(visibleForms: VisibleForm[]): {
 };
 /** Writes generated values back onto scalar fields and array rows. */
 export declare function applyAiValues(values: AiValue[], visibleForms: VisibleForm[], scalarIndexById: Map<string, number>, updateFields: UpdateFields): void;
+/**
+ * Template variables (root.data.formFields) serialized for an AI request's
+ * `context.formFields`, so text generation can see field names + current values.
+ * Same per-field shape `requestAiFill` sends; array fields also carry their
+ * sub-field defs and current rows.
+ */
+export declare function toAiFormFieldsContext(forms: TemplateFormField[]): ({
+    itemFields: {
+        id: string;
+        name: string;
+        type: TemplateScalarType;
+    }[];
+    value: TemplateArrayRow[];
+    id: string;
+    name: string;
+    type: import('../../../documents/editor/templateVariables').TemplateFormType;
+    defaultValue: string;
+} | {
+    value: string;
+    id: string;
+    name: string;
+    type: import('../../../documents/editor/templateVariables').TemplateFormType;
+    defaultValue: string;
+})[];
+/**
+ * Only the fields whose `{{id}}` (or `{{#each id}}`) token appears in `text` —
+ * i.e. the variables a single block actually uses. Same token pattern as
+ * templateVariables' collectUsedTokenIds.
+ */
+export declare function formFieldsUsedInText(text: string, forms: TemplateFormField[]): TemplateFormField[];
+/**
+ * AI-fill only the variables a block's text uses, writing the generated values
+ * onto root.data.formFields — the block text itself (with its {{tokens}}) is
+ * left untouched. Returns null when the text uses no variables (caller falls
+ * back to generating the text), false when the request failed (already
+ * toasted), true once values are written.
+ */
+export declare function fillTextFormFieldsWithAi(prompt: string, text: string, extraContext?: Record<string, unknown>): Promise<boolean | null>;
+export declare function requestRichTextAi(prompt: string, content: string, fieldId?: string): Promise<string | null>;
 /**
  * One prompt → values for every field. Returns null (after toasting) when the
- * request fails or yields nothing usable.
+ * request fails or yields nothing usable; null silently when `signal` aborts it.
  */
-export declare function requestAiFill(prompt: string, fields: AiTargetField[]): Promise<AiValue[] | null>;
+export declare function requestAiFill(prompt: string, fields: AiTargetField[], signal?: AbortSignal, extraContext?: Record<string, unknown>): Promise<AiValue[] | null>;
 export {};

package/dist/editor-sample/App/InspectorDrawer/VariablesPanel/useAutoRegisterTokenFields.d.ts

@@ -0,0 +1,13 @@
+/**
+ * A `{{token}}` typed anywhere on the page becomes a variable right away — not
+ * only once the page is saved as a template. Appends a field for every scalar
+ * token with no matching form field. Once added it's no longer "missing", so
+ * this can't loop. Mounted from the always-present inspector drawer so the
+ * variable already exists when the Variables tab is opened.
+ *
+ * A token edited away (present on the previous scan, gone now) drops its
+ * field. When exactly one token vanished and one new token appeared it's a
+ * rename (`{{old}}` → `{{new}}`): the field is re-keyed in place so its value
+ * and settings carry over instead of leaving both variables behind.
+ */
+export default function useAutoRegisterTokenFields(): void;

package/dist/editor-sample/App/InspectorDrawer/VariablesPanel/variableEditActions.d.ts

@@ -0,0 +1,32 @@
+/**
+ * A variable the "Edit variable" dialog acts on: a top-level `{{id}}` field,
+ * or a `{{this.subId}}` sub-field of a container-repeat field.
+ */
+export type VariableEditTarget = {
+    fieldId: string;
+    subId?: string;
+};
+export type VariableIdError = 'invalid' | 'duplicate';
+/** Opens the dialog for one variable, or every variable a block / input uses. */
+export declare const openEditVariable: (targets: VariableEditTarget | VariableEditTarget[]) => void;
+export declare const closeEditVariable: () => void;
+export declare const useEditVariableState: () => {
+    open: boolean;
+    targets: VariableEditTarget[];
+    openId: number;
+};
+export declare const VARIABLE_ID_RE: RegExp;
+/** All variables a block's own token-bearing props use (a Button: label + link). */
+export declare const getBlockVariableTargets: (blockId: string) => VariableEditTarget[];
+/** All variables behind one bound input value. */
+export declare const getValueVariableTargets: (value: string, blockId: string | null) => VariableEditTarget[];
+/**
+ * Per-target reason `nextIds[i]` can't be used, or null when it's fine (or
+ * unchanged). Keys must be unique against the page's other variables and
+ * against each other within the dialog.
+ */
+export declare function validateVariableIds(targets: VariableEditTarget[], nextIds: string[]): (VariableIdError | null)[];
+/** Renames every changed key, as ONE undo step. */
+export declare function renameVariables(targets: VariableEditTarget[], nextIds: string[]): void;
+/** Turns every target back into plain text, as ONE undo step. */
+export declare function unlinkVariables(targets: VariableEditTarget[]): void;

package/dist/editor-sample/App/InspectorDrawer/components/DateFieldControls.d.ts

@@ -2,11 +2,12 @@ import { TemplateFormField } from '../../../documents/editor/templateVariables';
 type Props = {
     field: TemplateFormField;
     onPatch: (patch: Partial<TemplateFormField>) => void;
+    disabled?: boolean;
 };
 /**
  * Format + timezone controls for a `date` scalar variable, shown under the
  * datetime input. `relative` recomputes in the reader's browser at view time;
  * every other preset is a fixed string baked in `dateTz` on publish.
  */
-export default function DateFieldControls({ field, onPatch }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DateFieldControls({ field, onPatch, disabled }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/editor-sample/App/InspectorDrawer/components/DateTimeFieldControls.d.ts

@@ -2,6 +2,7 @@ import { TemplateFormField } from '../../../documents/editor/templateVariables';
 type Props = {
     field: TemplateFormField;
     onPatch: (patch: Partial<TemplateFormField>) => void;
+    disabled?: boolean;
 };
 /**
  * Controls for a `datetime` scalar variable: one ISO value, exposed as two
@@ -10,5 +11,5 @@ type Props = {
  * may be `relative` (recomputed in the reader's browser); the time part is
  * always a fixed string.
  */
-export default function DateTimeFieldControls({ field, onPatch }: Props): import("react/jsx-runtime").JSX.Element;
+export default function DateTimeFieldControls({ field, onPatch, disabled }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/editor-sample/App/InspectorDrawer/components/MiniRichTextInput.d.ts

@@ -3,6 +3,7 @@ type Props = {
     value: string;
     onChange: (value: string) => void;
     fieldId?: string;
+    disabled?: boolean;
 };
 declare const MiniRichTextInput: React.FC<Props>;
 export default MiniRichTextInput;

package/dist/editor-sample/App/InspectorDrawer/components/RichTextAiButton.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    content: string;
+    fieldId?: string;
+    onGenerated: (html: string) => void;
+};
+export default function RichTextAiButton({ content, fieldId, onGenerated }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/editor-sample/App/InspectorDrawer/components/ScalarFieldInput.d.ts

@@ -6,6 +6,7 @@ type Props = {
     onChange: (value: string) => void;
     onPaperBackground?: boolean;
     fieldId?: string;
+    disabled?: boolean;
 };
-declare const ScalarFieldInput: ({ type, label, value, onChange, onPaperBackground, fieldId }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const ScalarFieldInput: ({ type, label, value, onChange, onPaperBackground, fieldId, disabled, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default ScalarFieldInput;

package/dist/editor-sample/App/InspectorDrawer/components/TimeFieldControls.d.ts

@@ -2,11 +2,12 @@ import { TemplateFormField } from '../../../documents/editor/templateVariables';
 type Props = {
     field: TemplateFormField;
     onPatch: (patch: Partial<TemplateFormField>) => void;
+    disabled?: boolean;
 };
 /**
  * Format + timezone controls for a `time` scalar variable, shown under the
  * datetime input. `time` always bakes to a fixed string (24h or AM/PM) rendered
  * in the chosen timezone — there's no view-time / relative mode.
  */
-export default function TimeFieldControls({ field, onPatch }: Props): import("react/jsx-runtime").JSX.Element;
+export default function TimeFieldControls({ field, onPatch, disabled }: Props): import("react/jsx-runtime").JSX.Element;
 export {};