pagepilot-visual-editor 1.0.4 → 1.0.6

package/dist/editor-sample/documents/blocks/Timer/variants/DigitalFlipView.d.ts

@@ -0,0 +1,9 @@
+import { TimeParts } from '../timerMath';
+type Props = {
+    parts: TimeParts;
+    showLabels: boolean;
+    accentColor?: string | null;
+    textColor?: string | null;
+};
+export default function DigitalFlipView({ parts, showLabels, accentColor, textColor }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/editor-sample/documents/blocks/Timer/variants/TextInlineView.d.ts

@@ -0,0 +1,9 @@
+import { TimeParts } from '../timerMath';
+type Props = {
+    parts: TimeParts;
+    showLabels: boolean;
+    accentColor?: string | null;
+    textColor?: string | null;
+};
+export default function TextInlineView({ parts, showLabels, accentColor, textColor }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/editor-sample/documents/blocks/helpers/BlockCategories.d.ts

@@ -0,0 +1 @@
+export declare const BLOCK_CATEGORIES: string[];

package/dist/editor-sample/documents/blocks/helpers/EditorChildrenIds/AddBlockMenu/BlockButton.d.ts

@@ -5,5 +5,5 @@ type BlockMenuButtonProps = {
     onClick: () => void;
     highlighted?: boolean;
 };
-export default function BlockTypeButton({ label, icon, onClick, highlighted }: BlockMenuButtonProps): import("react/jsx-runtime").JSX.Element;
+export default function BlockTypeButton({ label, icon, onClick, highlighted, }: BlockMenuButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/editor-sample/documents/blocks/helpers/EditorChildrenIds/AddBlockMenu/BlocksMenu.d.ts

@@ -2,7 +2,7 @@ import { TEditorBlock } from '../../../../editor/core';
 type BlocksMenuProps = {
     anchorEl: HTMLElement | null;
     setAnchorEl: (v: HTMLElement | null) => void;
-    onSelect: (block: TEditorBlock) => void;
+    onSelect: (block: TEditorBlock, preassignedId?: string) => void;
     onPaste?: () => void;
 };
 export default function BlocksMenu({ anchorEl, setAnchorEl, onSelect, onPaste }: BlocksMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor-sample/documents/blocks/helpers/EditorChildrenIds/AddBlockMenu/DividerButton.d.ts

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 type Props = {
     buttonElement: HTMLElement | null;
     onClick: () => void;
+    hideIcon?: boolean;
 };
-export default function DividerButton({ buttonElement, onClick }: Props): React.ReactPortal;
+export default function DividerButton({ buttonElement, onClick, hideIcon }: Props): React.ReactPortal;
 export {};

package/dist/editor-sample/documents/blocks/helpers/EditorChildrenIds/AddBlockMenu/PlaceholderButton.d.ts

@@ -1,5 +1,6 @@
 type Props = {
     onClick: () => void;
+    hideIcon?: boolean;
 };
-export default function PlaceholderButton({ onClick }: Props): import("react/jsx-runtime").JSX.Element;
+export default function PlaceholderButton({ onClick, hideIcon }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/editor-sample/documents/blocks/helpers/EditorChildrenIds/AddBlockMenu/blockMenuStyles.d.ts

@@ -0,0 +1,11 @@
+import { SxProps, Theme } from '@mui/material';
+export declare const BLOCK_MENU_MIN_WIDTH = "368px";
+export declare const menuRootSx: (theme: Theme) => SxProps<Theme>;
+export declare const searchHeaderSx: (theme: Theme) => SxProps<Theme>;
+export declare const scrollAreaSx: (theme: Theme) => SxProps<Theme>;
+export declare const gridSx: SxProps<Theme>;
+export declare const emptyStateSx: SxProps<Theme>;
+export declare const emptyIconBadgeSx: (theme: Theme) => SxProps<Theme>;
+export declare const blockButtonSx: (theme: Theme, highlighted: boolean) => SxProps<Theme>;
+export declare const blockButtonIconSx: SxProps<Theme>;
+export declare const blockButtonLabelSx: SxProps<Theme>;

package/dist/editor-sample/documents/blocks/helpers/EditorChildrenIds/AddBlockMenu/brandButtonDefaults.d.ts

@@ -1,5 +1,7 @@
-type BrandButton = any;
-type BrandingConfig = any;
+type BrandButton = Record<string, any>;
+type BrandingConfig = {
+    button?: BrandButton;
+};
 type ButtonBlockData = {
     props: Record<string, any>;
     style: Record<string, any>;

package/dist/editor-sample/documents/blocks/helpers/EditorChildrenIds/AddBlockMenu/buttons.d.ts

@@ -2,6 +2,14 @@ import { default as React } from 'react';
 import { TEditorBlock } from '../../../../editor/core';
 type TButtonProps = {
     label: string;
+    /**
+     * Palette section this tile belongs to. Used by BlocksPanel to group
+     * tiles under section headers ("Text/Content", "Media",
+     * "Layout/Structure", "Actions/Controls", "Embeds/Integrations",
+     * "Support/Utility"). Order and header labels come from
+     * `BlockCategories.ts`.
+     */
+    category: string;
     icon: React.JSX.Element;
     block: () => TEditorBlock;
 };

package/dist/editor-sample/documents/blocks/helpers/EditorChildrenIds/AddBlockMenu/gridPresets.d.ts

@@ -0,0 +1,17 @@
+import { TEditorBlock } from '../../../../editor/core';
+export type GridPresetId = 'single' | 'twoColumn' | 'twoRow' | 'threeColumn' | 'twoByTwo' | 'threeByTwo' | 'heroLeft' | 'heroTop' | 'bento' | 'masonry' | 'magazine' | 'collage' | 'panorama' | 'horizontalStrip' | 'verticalStrip';
+export type GridPresetCell = {
+    colStart: number;
+    colSpan: number;
+    rowStart: number;
+    rowSpan: number;
+};
+export type GridPresetDef = {
+    id: GridPresetId;
+    labelKey: string;
+    columnsCount: number;
+    rowsCount: number;
+    cells: GridPresetCell[];
+};
+export declare const GRID_PRESETS: GridPresetDef[];
+export declare function buildGridPresetBlock(preset: GridPresetDef): TEditorBlock;

package/dist/editor-sample/documents/blocks/helpers/EditorChildrenIds/AddBlockMenu/index.d.ts

@@ -5,11 +5,12 @@ export type ContainerNeighbor = {
 };
 type Props = {
     placeholder?: boolean;
-    onSelect: (block: TEditorBlock) => void;
+    suppressAdd?: boolean;
+    onSelect: (block: TEditorBlock, preassignedId?: string) => void;
     onPaste?: () => void;
     containerNeighbors?: ContainerNeighbor[];
     onInsertIntoContainer?: (block: TEditorBlock, containerId: string, insertAt: 'start' | 'end') => void;
     insertAboveCallback?: (block: TEditorBlock) => void;
 };
-export default function AddBlockButton({ onSelect, onPaste, placeholder, containerNeighbors, onInsertIntoContainer, insertAboveCallback, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function AddBlockButton({ onSelect, onPaste, placeholder, suppressAdd, containerNeighbors, onInsertIntoContainer, insertAboveCallback, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/editor-sample/documents/blocks/helpers/EditorChildrenIds/index.d.ts

@@ -11,5 +11,6 @@ export type EditorChildrenIdsProps = {
     maxChildren?: number;
     showContainerScopePrompt?: boolean;
     insertAboveCallback?: (block: TEditorBlock) => void;
+    suppressAdd?: boolean;
 };
-export default function EditorChildrenIds({ childrenIds, onChange, maxChildren, showContainerScopePrompt, insertAboveCallback, }: EditorChildrenIdsProps): import("react/jsx-runtime").JSX.Element;
+export default function EditorChildrenIds({ childrenIds, onChange, maxChildren, showContainerScopePrompt, insertAboveCallback, suppressAdd, }: EditorChildrenIdsProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor-sample/documents/blocks/helpers/TStyle.d.ts

@@ -2,6 +2,7 @@ export type TStyle = {
     backgroundColor?: any;
     backgroundImage?: any;
     backgroundSize?: any;
+    backgroundRepeat?: any;
     borderColor?: any;
     borderRadius?: any;
     color?: any;
@@ -12,6 +13,7 @@ export type TStyle = {
     fontStyle?: any;
     textDecoration?: any;
     padding?: any;
+    margin?: any;
     textAlign?: any;
     buttonTextAlign?: any;
 };

package/dist/editor-sample/documents/blocks/helpers/block-wrappers/saveAsTemplateUtils.d.ts

@@ -0,0 +1,97 @@
+/**
+ * "Save as template" capture logic.
+ *
+ * Turns a selected on-canvas block subtree into the configuration object stored
+ * on a template record. Kept as pure functions (no React / editor-store access)
+ * so they're easy to test and reuse; the editor document + live form fields are
+ * passed in by the caller (TuneMenu).
+ *
+ * See CLAUDE.md ("Template Variables") for how formFields flow end to end.
+ */
+/** Loose block shape — the editor document isn't strongly typed here. */
+type AnyBlock = any;
+type BlockMap = Record<string, AnyBlock>;
+type FormField = any;
+/** The configuration payload persisted for a block-type template. */
+export type BlockTemplateConfiguration = {
+    isIndividualBlock: true;
+    rootBlockId: string;
+    blocks: BlockMap;
+    formFields: FormField[];
+};
+/**
+ * Collect `rootBlockId` and every descendant block (following each container
+ * type's own child-id layout) into a flat `{ id: block }` map.
+ */
+export declare function collectBlockSubtree(document: BlockMap, rootBlockId: string): BlockMap;
+/**
+ * Parse `{{tokens}}` out of a block subtree's text and return field DEFINITIONS:
+ *   - `{{#each id}}…{{this.sub}}…{{/each}}` → an array field with row sub-fields
+ *   - `{{this.sub}}` (no explicit #each) → a synthetic `items` array field bound
+ *     to `rootBlockId` (container-repeat)
+ *   - `{{id}}` → a scalar text field
+ */
+export declare function extractFormFieldsFromBlocks(blocks: BlockMap, rootBlockId: string): FormField[];
+/**
+ * Convert one live root field into an authoring field for the template dialog.
+ * Only the DEFINITION is kept (id, name, type, itemFields, target blocks);
+ * runtime content (`value`, `rowIds`) and default content (`defaultValue`,
+ * `defaultRows`, `defaultRowsByBlock`) are dropped so the dialog opens with
+ * empty default inputs.
+ *
+ * `prefillDefaults` (opt-in) flips this: the field's CURRENT value(s) are
+ * carried over as the dialog's default value(s) instead of being stripped.
+ * Used by the Variables-panel "Save as new template" shortcut, which captures
+ * one specific (already-filled-in) instance as a starting template — unlike
+ * the canvas "Save as template" action, which authors a blank, reusable
+ * template and must stay empty-by-default.
+ */
+export declare function toAuthoringField(field: FormField, blockIds: Set<string>, prefillDefaults?: boolean): FormField;
+/**
+ * Merge the live root formFields (filtered to this subtree) with fields
+ * auto-detected from block text, keeping DEFINITIONS only (or prefilled
+ * defaults — see `toAuthoringField`).
+ */
+export declare function buildTemplateFormFields(rootFormFields: FormField[], detectedFields: FormField[], blockIds: Set<string>, prefillDefaults?: boolean): FormField[];
+/** Pull color / font-size out of value HTML (`<font color>` or `style="font-size"`). */
+export declare function extractInlineStyle(html: string): {
+    color?: string;
+    fontSize?: number;
+};
+/**
+ * When a token-bound Text/Heading/Button block shows a single `{{token}}`, the
+ * user's inline color/font-size lives in the field VALUE's HTML, not on the
+ * block. Lift that styling onto the block's own `data.style` so Save-as-Template
+ * preserves it while leaving the token (and its repeatability) untouched.
+ */
+export declare function enrichTokenBlockStyleFromValue(block: AnyBlock, fields: FormField[], rowContext: Record<string, string> | null): AnyBlock;
+/**
+ * Build the template configuration for saving `rootBlockId` (and its subtree)
+ * as a block-type template.
+ *
+ * @param document        live editor document ({ id: block })
+ * @param rootBlockId     the selected block being saved
+ * @param liveFormFields  live root formFields (from editor state) — carry the
+ *                        user's typed-in / styled values used to enrich block styles
+ * @param prefillDefaults when true, the dialog's default-value inputs are
+ *                        seeded from the block's CURRENT content instead of
+ *                        opening blank. Used by the Variables-panel "Save as
+ *                        new template" shortcut (captures one filled-in
+ *                        instance); the canvas "Save as template" action keeps
+ *                        this false so authored templates stay default-empty.
+ */
+export declare function buildBlockTemplateConfiguration(document: BlockMap, rootBlockId: string, liveFormFields: FormField[], prefillDefaults?: boolean): BlockTemplateConfiguration;
+/**
+ * True when the configuration has authored `formFields` embedded on one of its
+ * document roots — meaning the record was already saved with the new
+ * placement rule (fields inside `configuration`). Used to decide whether to
+ * trust the derived-from-configuration fields or fall back to the legacy
+ * top-level `templateRecord.formFields` mirror on old records.
+ *
+ * Only counts NON-EMPTY authored arrays; a `formFields: []` at the root or on
+ * a step counts as "no authored fields there" so token auto-detection doesn't
+ * suppress legacy top-level content.
+ */
+export declare function hasAuthoredFormFieldsInConfiguration(record: any): boolean;
+export declare function derivePageInitialFormFields(record: any): FormField[];
+export {};

package/dist/editor-sample/documents/blocks/helpers/documentUtils.d.ts

@@ -36,6 +36,93 @@ export declare const addRepeatRow: (documentTree: Record<string, any>, sourceBlo
  * arrays. Used to delete a repeat row's cloned container subtree.
  */
 export declare function removeSubtree(documentTree: Record<string, any>, idsToRemove: Set<string>): Record<string, any>;
+export type RepeatableSlot = {
+    childrenIds: string[];
+};
+export type RepeatableContainerInfo = {
+    containerId: string;
+    type: 'Grid' | 'FlexColumns' | 'Carousel';
+    /** Total fixed slots (grid cells / flex columns / carousel slides). */
+    slotCount: number;
+    /** Each slot's current child ids, normalized to `slotCount` length. */
+    slots: RepeatableSlot[];
+    /** Index of the first non-empty slot, or -1 if the container is empty. */
+    firstFilledSlot: number;
+    /** How many slots are currently empty. */
+    emptySlotCount: number;
+};
+/** True if the block is a slot-based container the repeat feature supports. */
+export declare function isRepeatableContainerType(type: string | undefined): boolean;
+/**
+ * Describe a repeatable container's slot layout (empty vs filled). Returns null
+ * when the block isn't a supported slot container. Used by the Variables tab to
+ * decide whether to show the Repeatable controls for the selected block.
+ */
+export declare function getRepeatableContainerInfo(documentTree: Record<string, any>, containerId: string): RepeatableContainerInfo | null;
+/** Write a container's slots back onto the block (Grid → cells, Carousel →
+ *  items[].contentChildrenIds, else → columns). */
+export declare function writeContainerSlots(block: any, slots: RepeatableSlot[]): any;
+/**
+ * Grow a repeatable container so it has at least `neededSlots` cells/columns/slides.
+ *
+ * - Grid: `direction: 'rows'` bumps `rowsCount` (keeps columns), `'columns'`
+ *   bumps `columnsCount` (keeps rows), until columns×rows ≥ neededSlots. The
+ *   `cells` array is padded with empty slots to match the new total.
+ * - FlexColumns: single-axis — grows `columnsCount` (and pads `columns`)
+ *   regardless of `direction`.
+ * - Carousel: single-axis — grows `items` (new empty slides) up to the
+ *   block's 20-slide schema cap; `neededSlots` beyond that are left unmet.
+ *
+ * Returns the updated document (or the same ref when no growth was needed / the
+ * block isn't a repeatable container).
+ */
+export declare function growContainerToFit(documentTree: Record<string, any>, containerId: string, neededSlots: number, direction: 'rows' | 'columns'): Record<string, any>;
+/**
+ * Stamp the subtree rooted at `sourceRootId` (which lives in the container's
+ * first filled slot) into the next `count` EMPTY slots. Each stamp is a fresh
+ * clone (new block ids), so its text tokens are editable independently while
+ * sharing the source's styling. Returns the updated document plus the new clone
+ * root ids (one per filled empty slot), or null when the block/slots are invalid.
+ *
+ * `count` is clamped to the number of empty slots — the container never grows;
+ * callers surface "add more cells" when `count` exceeds capacity.
+ */
+export declare function stampTemplateIntoEmptySlots(documentTree: Record<string, any>, containerId: string, sourceRootId: string, count: number): {
+    updatedDocument: Record<string, any>;
+    newRootIds: string[];
+} | null;
+/** Find the repeatable container whose slots hold `childId`. */
+export declare function findRepeatableContainerOf(documentTree: Record<string, any>, childId: string): string | null;
+/**
+ * Reconcile a container-repeat field's `value` array against the actually
+ * rendered cards. When `value` has MORE entries than there are materialized
+ * rows (e.g. a row was appended server-side, or on another device), stamp the
+ * template into empty grid cells so each value entry gets a card, and register
+ * the new clone roots as `rowIds`. Existing cards + their block subtrees are
+ * untouched; capped at available empty slots.
+ *
+ * Returns `{ document, fields }` (possibly the same refs when nothing changed)
+ * plus how many rows were materialized vs. still missing for capacity warnings.
+ */
+export declare function reconcileRepeatFieldValues(documentTree: Record<string, any>, fields: any[]): {
+    document: Record<string, any>;
+    fields: any[];
+    materialized: number;
+    missing: number;
+};
+/**
+ * Copy the STYLING (block `data.style` + text-formatting props) from every
+ * block in the source cell's subtree onto the structurally-corresponding block
+ * in each target cell's subtree. Text / token values are left untouched — only
+ * look-and-feel (color, font, size, alignment, padding, etc.) propagates.
+ *
+ * Correspondence is positional: `collectSubtreeIds` walks both subtrees in the
+ * same deterministic order, so index i in the source maps to index i in a copy
+ * (the copies were produced by `cloneSubtree`, which preserves structure).
+ *
+ * Returns the updated document, or null when the source subtree is missing.
+ */
+export declare function syncCellStyles(documentTree: Record<string, any>, sourceRootId: string, targetRootIds: string[]): Record<string, any> | null;
 export type DropPosition = 'before' | 'after' | 'inside';
 export declare const PALETTE_DRAG_MIME = "application/x-ahd-palette-block";
 /**
@@ -88,14 +175,13 @@ export declare const cloneCopiedBlocks: (copiedConfig: {
 }) => {
     newBlocks: Record<string, any>;
     newRootId: string;
+    idMap: Record<string, string>;
 };
 export declare const pasteBlockAsNew: (documentTree: Record<string, any>, copiedConfig: {
     rootBlockId: string;
     blocks: Record<string, any>;
 }) => {
-    updatedDocument: {
-        [x: string]: any;
-    };
+    updatedDocument: Record<string, any>;
     newRootId: string;
 };
 export declare const pasteBlock: (documentTree: Record<string, any>, targetBlockId: string, copiedConfig: {
@@ -105,20 +191,13 @@ export declare const pasteBlock: (documentTree: Record<string, any>, targetBlock
     updatedDocument: Record<string, any>;
     newRootId: string;
 };
-/**
- * Strip blocks whose `type` isn't in `knownTypes` from a document and unlink
- * them from every parent's children list (root.data.childrenIds, container
- * props.childrenIds, columns/cells, accordion/tabs/carousel/marquee items,
- * MenuPicker start/end children). Used when pasting an external payload —
- * the standalone editor doesn't ship every host-only block type (MenuPicker,
- * DemoPicker, Mdx, …), so removing them gracefully lets the rest paste
- * instead of crashing the canvas inside `BlockComponent` (which throws
- * "Cannot read properties of undefined (reading 'Component')" the moment an
- * unknown type tries to render).
- *
- * Returns the sanitized document, the de-duped list of removed type names
- * (for a user-facing toast), and whether any pruning happened.
- */
+export declare const replaceBlock: (documentTree: Record<string, any>, targetBlockId: string, copiedConfig: {
+    rootBlockId: string;
+    blocks: Record<string, any>;
+}) => {
+    updatedDocument: Record<string, any>;
+    newRootId: string;
+};
 export declare function sanitizeAgainstKnownTypes(doc: Record<string, any>, knownTypes: ReadonlySet<string>): {
     sanitized: Record<string, any>;
     removedTypes: string[];

package/dist/editor-sample/documents/blocks/helpers/responsiveStyle.d.ts

@@ -0,0 +1,106 @@
+import { z } from 'zod';
+export declare const DEVICE_TYPES: readonly ["desktop", "tablet", "mobile"];
+export type TDeviceType = (typeof DEVICE_TYPES)[number];
+/** Non-desktop breakpoints that carry override slices. */
+export type TResponsiveDevice = Exclude<TDeviceType, 'desktop'>;
+/** A deep-partial override of a block's `data` (style + props + any field). */
+export type TDeviceOverride = Record<string, any>;
+/** Override slices keyed by breakpoint. Absent = "inherit desktop". */
+export type TResponsiveOverrides = Partial<Record<TResponsiveDevice, TDeviceOverride>>;
+/** The subset of a block's `data` this module reads/writes. */
+export type TResponsiveBlockData = {
+    responsive?: TResponsiveOverrides | null;
+    [key: string]: any;
+};
+/**
+ * Viewport widths (px) each device tab represents. These match the actual
+ * `@media (max-width: …)` breakpoints emitted by the responsive blocks (Grid,
+ * FlexColumns, Carousel, Pagination — see their *Reader.tsx / *helpers.ts), so
+ * the number shown in the sidebar is the real breakpoint, not an approximation.
+ */
+export declare const DEVICE_VIEWPORT_WIDTH: Record<TDeviceType, number>;
+/**
+ * The ONLY properties that may differ per device. Content (text, url, id,
+ * image src, actions) and appearance that should stay consistent (colours,
+ * borders) are intentionally excluded — they're edited once on Desktop and
+ * shared across breakpoints. A per-device edit that isn't in these allowlists
+ * is dropped by {@link applyDeviceEdit}, so overrides can never carry content.
+ */
+export declare const RESPONSIVE_STYLE_KEYS: readonly ["fontSize", "fontFamily", "fontWeight", "fontStyle", "textDecoration", "lineHeight", "textAlign", "buttonTextAlign", "padding", "margin", "marginBottom", "width", "height", "borderRadius", "activeFontSize", "showActiveBorder", "tabGap", "contentGap", "starSize", "starGap", "itemGap", "arrowSize", "dotSize", "slideGap", "buttonSize", "buttonGap", "buttonRadius", "controlGap", "backgroundImage", "backgroundSize", "backgroundRepeat"];
+export declare const RESPONSIVE_PROP_KEYS: readonly ["contentAlignment", "horizontalAlignment", "width", "fontSize", "fontFamily", "fontWeight", "padding", "margin", "blockPadding", "gap", "borderRadius", "iconSize", "lineHeight", "speed", "pauseOnHover", "fadeEdges", "dotSize", "dotSpacing", "numericFontSize", "numericPosition"];
+/**
+ * NATIVE per-device props: a few layout blocks (Grid / FlexColumns / Pagination)
+ * are already truly responsive via `@media` CSS keyed off dedicated props. Their
+ * device-specific keys must always be written to the BASE data (never folded
+ * into a `responsive` slice), so their existing `@media` rendering keeps working
+ * unchanged. The sidebar targets the right suffixed key per device via
+ * `deviceProp.ts`; `applyDeviceEdit` passes these straight through to base.
+ *
+ * IMPORTANT — native-ness is PER BLOCK, not global. A key is only native for the
+ * blocks that actually ship suffixed-prop `@media` rendering for it. `height`,
+ * for example, is native for Video (which emits heightTablet/heightMobile CSS)
+ * but NOT for Spacer, which has no such CSS: routing Spacer's height to base
+ * would make a Mobile edit overwrite the Desktop value. Use
+ * {@link nativeKeysForBlock} to get the right set for a block type — never test
+ * against this flat list directly.
+ */
+export declare const NATIVE_DEVICE_PROP_KEYS: readonly ["columnsCount", "columnsCountTablet", "columnsCountMobile", "rowsCount", "rowsCountTablet", "rowsCountMobile", "columnsGap", "columnsGapTablet", "columnsGapMobile", "rowsGap", "desktopLayout", "tabletLayout", "mobileLayout", "columnShrink", "columnShrinkTablet", "columnShrinkMobile", "columnsDirection", "columnsDirectionTablet", "columnsDirectionMobile", "widthType", "widthTypeTablet", "widthTypeMobile", "size", "sizeTablet", "sizeMobile", "fixedWidths", "fixedWidthsTablet", "fixedWidthsMobile", "contentAlignmentTablet", "contentAlignmentMobile", "slidesPerView", "slidesPerViewTablet", "slidesPerViewMobile", "width", "widthTablet", "widthMobile", "height", "heightTablet", "heightMobile", "url", "urlTablet", "urlMobile", "iconName", "iconNameTablet", "iconNameMobile", "iconFillColor", "iconFillColorTablet", "iconFillColorMobile", "orientation", "orientationTablet", "orientationMobile", "direction", "directionTablet", "directionMobile", "alignmentTablet", "alignmentMobile", "rotation", "rotationTablet", "rotationMobile"];
+/**
+ * The native per-device prop keys that apply to `blockType`. Unambiguous keys
+ * are always native; ambiguous ones only for the block types that actually
+ * render them with `@media` CSS (see {@link AMBIGUOUS_NATIVE_KEY_OWNERS}).
+ */
+export declare function nativeKeysForBlock(blockType: string | undefined): string[];
+/** Read the raw (user-authored) override slice for a device. */
+export declare function getDeviceOverride(data: TResponsiveBlockData | null | undefined, device: TResponsiveDevice): TDeviceOverride;
+/** True when the user has authored at least one override for the device. */
+export declare function hasDeviceOverride(data: TResponsiveBlockData | null | undefined, device: TResponsiveDevice): boolean;
+/**
+ * The resolved `data` a block should render/edit at `device`:
+ *   desktop           → the base data unchanged (`responsive` stripped)
+ *   tablet / mobile   → base deep-merged with `responsive[device]`
+ *
+ * The `responsive` key itself is never part of the resolved data handed to a
+ * block component — only the merged style/props are.
+ */
+export declare function resolveBlockDataForDevice<T extends TResponsiveBlockData>(data: T | null | undefined, device: TDeviceType): T;
+/**
+ * Where a responsive field lives on the override slice:
+ * - `style` / `props` → nested under `data.style` / `data.props`
+ * - `root`  → a top-level `data` field (e.g. `data.hidden` for visibility)
+ */
+export type ResponsiveGroup = 'style' | 'props' | 'root';
+/**
+ * Write a single responsive field's value into the device slice and return the
+ * new stored data (desktop base untouched). `group: 'root'` writes the key at
+ * the slice's top level (→ merges onto `data.<key>`); `style`/`props` nest it.
+ * Passing `undefined` clears that field (reverting it to inherit desktop); an
+ * empty group / slice is dropped so we never persist `{ mobile: { style: {} } }`.
+ */
+export declare function setResponsiveField<T extends TResponsiveBlockData>(data: T, device: TResponsiveDevice, group: ResponsiveGroup, key: string, value: any): T;
+/** True when this exact field is overridden on the device. */
+export declare function isFieldOverridden(data: TResponsiveBlockData | null | undefined, device: TResponsiveDevice, group: ResponsiveGroup, key: string): boolean;
+/** Clear a single overridden field back to the desktop value. */
+export declare function clearResponsiveField<T extends TResponsiveBlockData>(data: T, device: TResponsiveDevice, group: ResponsiveGroup, key: string): T;
+/**
+ * Legacy full-data write kept for callers (e.g. BlockStyleClipboardBar) that
+ * hand over a whole `{ style, props }` diff. Only the responsive-allowed keys
+ * survive — content in the diff is dropped so a device slice can never hold it.
+ */
+export declare function applyDeviceEdit<T extends TResponsiveBlockData>(data: T, device: TResponsiveDevice, nextResolvedData: TResponsiveBlockData, blockType?: string): T;
+/** Clear a device's entire override slice (reset the whole breakpoint). */
+export declare function clearDeviceOverride<T extends TResponsiveBlockData>(data: T, device: TResponsiveDevice): T;
+/** Whether the block is hidden on `device` (visibility override). */
+export declare function isHiddenOnDevice(data: TResponsiveBlockData | null | undefined, device: TResponsiveDevice): boolean;
+/**
+ * Zod schema for the `responsive` field, spliced into a block's props schema so
+ * the override survives `safeParse`. Permissive by design — each slice is a
+ * subset of fields the block's own schema already validates on the base data.
+ *
+ * Add to a block schema like:
+ *   z.object({ style: {...}, props: {...}, responsive: ResponsiveSchema })
+ */
+export declare const ResponsiveSchema: z.ZodNullable<z.ZodOptional<z.ZodObject<{
+    tablet: z.ZodNullable<z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodAny>>>;
+    mobile: z.ZodNullable<z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodAny>>>;
+}, z.core.$strip>>>;

package/dist/editor-sample/documents/blocks/helpers/zod.d.ts

@@ -32,8 +32,8 @@ export declare function zFontFamily(): z.ZodEnum<{
     BEBAS_NEUE: "BEBAS_NEUE";
 }>;
 export declare function zFontWeight(): z.ZodEnum<{
-    normal: "normal";
     bold: "bold";
+    normal: "normal";
 }>;
 export declare function zTextAlign(): z.ZodEnum<{
     right: "right";

package/dist/editor-sample/documents/editor/EditorContext.d.ts

@@ -7,6 +7,12 @@ type TValue = {
     selectedSidebarTab: 'block-configuration' | 'styles' | 'behaviour' | 'layout' | 'settings' | 'background' | 'page-pilot-ai' | 'layers' | 'brand' | 'seo' | 'variables' | 'research';
     selectedMainTab: 'editor' | 'preview' | 'json' | 'html';
     selectedScreenSize: 'desktop' | 'mobile' | 'tablet';
+    /**
+     * Which device the responsive sidebar tabs are currently authoring
+     * for. Independent of `selectedScreenSize` (the top-toolbar preview
+     * device) — flipping this must NOT resize the canvas.
+     */
+    sidebarEditingDevice: 'desktop' | 'mobile' | 'tablet';
     inspectorDrawerOpen: boolean;
     samplesDrawerOpen: boolean;
     activeStepIndex: number;
@@ -104,7 +110,10 @@ export declare function useSelectedBlockId(): string;
  * re-renders A and B, not every other block on the canvas.
  */
 export declare function useIsBlockSelected(id: string): boolean;
-export declare function useSelectedScreenSize(): "desktop" | "tablet" | "mobile";
+export declare function useSelectedScreenSize(): "tablet" | "mobile" | "desktop";
+/** Which device's properties the sidebar is currently editing (see ResponsiveDeviceTabs). */
+export declare function useSidebarEditingDevice(): "tablet" | "mobile" | "desktop";
+export declare function setSidebarEditingDevice(sidebarEditingDevice: TValue['sidebarEditingDevice']): void;
 export declare function useSelectedMainTab(): "html" | "editor" | "preview" | "json";
 export declare function useActiveStepIndex(): number;
 export declare function useSelectors(): string[];
@@ -150,7 +159,7 @@ type SetActiveStepIndexOptions = {
 };
 export declare function setActiveStepIndex(activeStepIndex: number, options?: SetActiveStepIndexOptions): void;
 export declare function setSelectedMainTab(selectedMainTab: TValue['selectedMainTab']): void;
-export declare function useSelectedSidebarTab(): "layout" | "background" | "behaviour" | "block-configuration" | "styles" | "settings" | "page-pilot-ai" | "layers" | "brand" | "seo" | "variables" | "research";
+export declare function useSelectedSidebarTab(): "layout" | "behaviour" | "block-configuration" | "styles" | "settings" | "background" | "page-pilot-ai" | "layers" | "brand" | "seo" | "variables" | "research";
 export declare function useInspectorDrawerOpen(): boolean;
 export declare function useSamplesDrawerOpen(): boolean;
 export declare function useInlineEditingEnabled(): boolean;