@commercetools-demo/puck-editor 0.5.1 → 0.6.0

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { Config, ComponentConfig } from '@measured/puck';
+import { Config, ComponentConfig, CustomField, Data, Overrides } from '@measured/puck';
 import { PuckData, PuckStateInfo } from '@commercetools-demo/puck-types';
 
 interface PuckEditorProps {
@@ -11,6 +11,8 @@ interface PuckEditorProps {
     businessUnitKey: string;
     /** JWT bearer token — required for save/publish mutations */
     jwtToken: string;
+    /** Content locale (e.g. "en-US") used for locale-aware calls like product search */
+    locale?: string;
     /** The key of the puck page to edit */
     pageKey: string;
     /**
@@ -25,6 +27,10 @@ interface PuckEditorProps {
     onSave?: (puckData: PuckData) => void;
     /** Called when an error occurs */
     onError?: (error: Error) => void;
+    /** Opens the preview view; when omitted the toolbar Preview button is hidden. */
+    onPreview?: () => void;
+    /** Notifies the host when the unsaved-changes state flips (for nav guards). */
+    onDirtyChange?: (isDirty: boolean) => void;
     /** Show the Publish button in the toolbar. Default: true */
     showPublishButton?: boolean;
     /** Debounce delay for auto-save in ms. Default: 1500 */
@@ -48,7 +54,9 @@ declare const defaultPuckConfig: Config;
 
 interface HeroProps {
     heading: string;
+    headingFontSize?: string;
     subheading?: string;
+    subheadingFontSize?: string;
     backgroundImage?: string;
     ctaText?: string;
     ctaUrl?: string;
@@ -65,11 +73,32 @@ interface RichTextProps {
 }
 declare const RichText: ComponentConfig<RichTextProps>;
 
+interface GridProps {
+    columnCount?: 1 | 2 | 3 | 4 | 5 | 6;
+    rowCount?: 1 | 2 | 3 | 4 | 5 | 6;
+    gap?: string;
+    padding?: string;
+}
+/**
+ * Grid — a layout container that lays out a `columnCount` × `rowCount` matrix
+ * of drop zones. Each cell is an independent Puck DropZone, so components can be
+ * dropped into any cell. (Renamed from "Columns"; rows added.)
+ *
+ * This render function is shared by the editor and the Puck renderer
+ * (puck-renderer runs the same config), so updating it here updates both.
+ */
+declare const Grid: ComponentConfig<GridProps>;
+
 interface ColumnsProps {
     columnCount?: 2 | 3 | 4;
     gap?: string;
     padding?: string;
 }
+/**
+ * @deprecated Use `Grid` instead (columns + rows). `Columns` is kept registered
+ * for backward compatibility so pages saved with the original component (and its
+ * `column-N` drop zones) keep rendering. Prefer Grid for new content.
+ */
 declare const Columns: ComponentConfig<ColumnsProps>;
 
 interface ImageProps {
@@ -89,6 +118,7 @@ interface ButtonProps {
     href?: string;
     variant?: 'primary' | 'secondary' | 'outline';
     size?: 'sm' | 'md' | 'lg';
+    fontSize?: string;
     align?: 'left' | 'center' | 'right';
     openInNewTab?: boolean;
 }
@@ -96,6 +126,7 @@ declare const Button: ComponentConfig<ButtonProps>;
 
 interface CardProps {
     title: string;
+    titleFontSize?: string;
     body?: string;
     imageUrl?: string;
     ctaText?: string;
@@ -125,7 +156,15 @@ interface DatasourceFieldProps {
 }
 declare const DatasourceField: React.FC<DatasourceFieldProps>;
 
-interface ProductTeaserProps {
+/** How a product link is built — from the product slug or its SKU. */
+type ProductLinkWith = 'slug' | 'sku';
+/** Props every product-linking component shares. */
+interface ProductLinkProps {
+    linkWith: ProductLinkWith;
+    baseUrl: string;
+}
+
+interface ProductTeaserProps extends ProductLinkProps {
     datasource: DatasourceValue;
     richText: string;
 }
@@ -186,7 +225,7 @@ interface CountdownBannerProps {
 }
 declare const CountdownBanner: ComponentConfig<CountdownBannerProps>;
 
-interface CrossSellBlockProps {
+interface CrossSellBlockProps extends ProductLinkProps {
     title: string;
     products: DatasourceValue;
     ctaText: string;
@@ -249,7 +288,7 @@ interface NewsletterSignupProps {
 }
 declare const NewsletterSignup: ComponentConfig<NewsletterSignupProps>;
 
-interface ProductBannerProps {
+interface ProductBannerProps extends ProductLinkProps {
     title: string;
     description: string;
     ctaText: string;
@@ -266,7 +305,7 @@ interface ProductGridHeaderProps {
 }
 declare const ProductGridHeader: ComponentConfig<ProductGridHeaderProps>;
 
-interface ProductSliderProps {
+interface ProductSliderProps extends ProductLinkProps {
     title: string;
     subtitle: string;
     products: DatasourceValue;
@@ -283,7 +322,7 @@ interface PromotionalBannerProps {
 }
 declare const PromotionalBanner: ComponentConfig<PromotionalBannerProps>;
 
-interface RelatedProductsSliderProps {
+interface RelatedProductsSliderProps extends ProductLinkProps {
     title: string;
     subtitle: string;
     products: DatasourceValue;
@@ -364,17 +403,135 @@ interface ImagePickerFieldProps {
 }
 declare const ImagePickerField: React.FC<ImagePickerFieldProps>;
 
+interface RichTextFieldProps {
+    /** HTML string. */
+    value: string | undefined;
+    onChange: (value: string) => void;
+}
+declare const RichTextField: React.FC<RichTextFieldProps>;
+/**
+ * Puck `custom` field config that renders a rich-text editor (HTML in / out).
+ * Use in a component's `fields` for any prop that holds an HTML string, e.g.
+ *   fields: { body: richTextField('Body') }
+ */
+declare const richTextField: (label: string) => CustomField<string>;
+
+/**
+ * Sanitize rich-text HTML before it is injected via dangerouslySetInnerHTML.
+ *
+ * RichText/TextBlock/Card store author-controlled HTML produced by the TipTap
+ * editor, but content can also arrive from imports or older data, so we always
+ * sanitize at render time. isomorphic-dompurify works in both the browser and
+ * during SSR, so this is safe wherever the renderer runs.
+ *
+ * `style` and `class` are allowed because the editor emits inline styles
+ * (e.g. font-size from the typography control) and structural classes.
+ */
+declare const sanitizeHtml: (html: string | undefined | null) => string;
+
 interface EditorToolbarProps {
+    /** Page / content name shown centred in the bar. */
+    title: string;
     saving: boolean;
     isDirty: boolean;
     states: PuckStateInfo;
     onSave: () => void;
     onPublish: () => void;
     onRevert: () => void;
+    /** When provided, renders a Preview button that opens the preview view. */
+    onPreview?: () => void;
+    /** When provided, adds a "Create a template from this…" overflow-menu item. */
+    onCreateTemplate?: () => void;
+    /** Label for the create-template menu item. */
+    createTemplateLabel?: string;
     showPublishButton: boolean;
 }
+/**
+ * Full replacement for Puck's header (wired via the `header` override).
+ *
+ * Layout: undo/redo + panel toggle on the left, the document name with its
+ * status badges centred, and the Save / Publish / Preview actions plus an
+ * overflow menu (version history, revert) on the right.
+ */
 declare const EditorToolbar: React.FC<EditorToolbarProps>;
 
+interface UnsavedChangesDialogProps {
+    /** Whether the dialog is visible. */
+    isOpen: boolean;
+    /** Called when the dialog requests to open/close (backdrop, Esc, Stay). */
+    onOpenChange: (isOpen: boolean) => void;
+    /** Called when the user confirms they want to leave and discard changes. */
+    onConfirm: () => void;
+}
+/**
+ * Nimbus confirmation shown when the user tries to navigate away from an editor
+ * that has unsaved changes. Replaces the native `window.confirm` so the warning
+ * matches the rest of the editor chrome.
+ */
+declare const UnsavedChangesDialog: React.FC<UnsavedChangesDialogProps>;
+
+interface CreateTemplateDialogProps {
+    /** Whether the dialog is visible. */
+    isOpen: boolean;
+    /** Called when the dialog requests to open/close (backdrop, Esc, Cancel). */
+    onOpenChange: (isOpen: boolean) => void;
+    /**
+     * Called when the user confirms. `withoutData` reflects the
+     * "Create template without data" checkbox (default checked).
+     */
+    onConfirm: (name: string, withoutData: boolean) => void | Promise<void>;
+    /** Disables the form while the template is being created. */
+    saving?: boolean;
+}
+/**
+ * Nimbus dialog for "Create a template from this page/content". Collects a
+ * template name and whether to strip component data before saving.
+ */
+declare const CreateTemplateDialog: React.FC<CreateTemplateDialogProps>;
+
+/**
+ * Produce a "without data" copy of Puck data for use as a template.
+ *
+ * Each **leaf** component's props are reset to its config `defaultProps` (so a
+ * new page created from the template shows the component's default contents,
+ * not the source page's data). **Container** components — those that hold child
+ * components in a zone — keep their props, so structural fields (e.g. a Grid's
+ * `columnCount`) survive and the nested layout renders correctly.
+ *
+ * Nested components live in a flat `data.zones` map keyed `"<parentId>:<zone>"`;
+ * `<parentId>` is the parent component's `props.id`. Every component's
+ * `props.id` is always preserved so those zone keys stay consistent.
+ */
+declare function stripPuckDataToTemplate(data: Data, config: Config): Data;
+
+interface DirtyState {
+    /** True when the canvas differs from the last saved / loaded baseline. */
+    isDirty: boolean;
+    /**
+     * Feed every Puck `onChange` payload through this. The very first call after
+     * a (re)load establishes the baseline and is treated as "clean" — Puck emits
+     * an `onChange` on mount while it normalises the incoming data, and that must
+     * not be mistaken for an edit by the user.
+     */
+    markChange: (data: unknown) => void;
+    /** Mark the current data as the saved baseline (call after a successful save). */
+    markSaved: (data: unknown) => void;
+}
+/**
+ * Tracks whether the Puck canvas has unsaved edits.
+ *
+ * Puck is an uncontrolled editor that fires `onChange` once on mount (to report
+ * its normalised version of the initial data). Naively flagging the editor
+ * dirty on the first `onChange` makes a freshly-opened page look "Unsaved" even
+ * though nothing was touched. We instead capture that first payload as the
+ * baseline and only flag dirty when a later payload diverges from it.
+ *
+ * `resetKey` should change whenever the document shown in the canvas is swapped
+ * out (different page/content, or a historical version applied) so a new
+ * baseline is captured for the new document.
+ */
+declare const useDirtyState: (resetKey: string) => DirtyState;
+
 declare const ComponentSearchProvider: React.FC<{
     children: ReactNode;
 }>;
@@ -386,4 +543,25 @@ declare const ComponentItemFilter: React.FC<{
     name: string;
 }>;
 
-export { Button, type ButtonProps, Card, type CardProps, CategoryGrid, type CategoryGridProps, CategoryHero, type CategoryHeroProps, CheckoutPromoBanner, type CheckoutPromoBannerProps, Columns, type ColumnsProps, ComponentItemFilter, ComponentSearchProvider, ComponentsPanel, CountdownBanner, type CountdownBannerProps, CrossSellBlock, type CrossSellBlockProps, DatasourceField, type DatasourceFieldProps, type DatasourceType, type DatasourceValue, DeliveryMessage, type DeliveryMessageProps, Divider, type DividerProps, EditorToolbar, type EditorToolbarProps, EmptyState, type EmptyStateProps, FAQAccordion, type FAQAccordionProps, FooterBlock, type FooterBlockProps, Hero, HeroBanner, type HeroBannerProps, type HeroProps, Image, ImageBlock, type ImageBlockProps, ImagePickerField, type ImagePickerFieldProps, type ImageProps, NewsletterSignup, type NewsletterSignupProps, ProductBanner, type ProductBannerProps, ProductGridHeader, type ProductGridHeaderProps, ProductSlider, type ProductSliderProps, ProductTeaser, type ProductTeaserProps, PromotionalBanner, type PromotionalBannerProps, PuckEditor, type PuckEditorProps, RelatedProductsSlider, type RelatedProductsSliderProps, RichText, type RichTextProps, SocialLinks, type SocialLinksProps, Spacer, type SpacerProps, TabContent, type TabContentProps, TestimonialsSlider, type TestimonialsSliderProps, TextBlock, type TextBlockProps, ThankYouContent, type ThankYouContentProps, TrustBadges, type TrustBadgesProps, VideoBlock, type VideoBlockProps, WebsiteLogo, type WebsiteLogoProps, defaultPuckConfig };
+declare const nimbusFieldTypes: NonNullable<Overrides['fieldTypes']>;
+
+interface PropertiesResizerProps {
+    /** Smallest allowed width in px. */
+    minWidth?: number;
+    /** Largest allowed width in px. */
+    maxWidth?: number;
+}
+/**
+ * Draggable divider that resizes the Puck properties (right) panel.
+ *
+ * Render it as a child of the `.puck-editor-fill` container (a sibling of the
+ * Puck editor). It writes the chosen width to a `--puck-properties-width` CSS
+ * variable on that container — the grid-template override in
+ * ComponentListSearch's injected `<style>` reads it to size only the right
+ * column, leaving the left panel and canvas alone. The handle is positioned
+ * over the panel's left edge by measuring the live sidebar, and hides itself
+ * when the panel is collapsed. The width persists in localStorage.
+ */
+declare const PropertiesResizer: React.FC<PropertiesResizerProps>;
+
+export { Button, type ButtonProps, Card, type CardProps, CategoryGrid, type CategoryGridProps, CategoryHero, type CategoryHeroProps, CheckoutPromoBanner, type CheckoutPromoBannerProps, Columns, type ColumnsProps, ComponentItemFilter, ComponentSearchProvider, ComponentsPanel, CountdownBanner, type CountdownBannerProps, CreateTemplateDialog, type CreateTemplateDialogProps, CrossSellBlock, type CrossSellBlockProps, DatasourceField, type DatasourceFieldProps, type DatasourceType, type DatasourceValue, DeliveryMessage, type DeliveryMessageProps, type DirtyState, Divider, type DividerProps, EditorToolbar, type EditorToolbarProps, EmptyState, type EmptyStateProps, FAQAccordion, type FAQAccordionProps, FooterBlock, type FooterBlockProps, Grid, type GridProps, Hero, HeroBanner, type HeroBannerProps, type HeroProps, Image, ImageBlock, type ImageBlockProps, ImagePickerField, type ImagePickerFieldProps, type ImageProps, NewsletterSignup, type NewsletterSignupProps, ProductBanner, type ProductBannerProps, ProductGridHeader, type ProductGridHeaderProps, ProductSlider, type ProductSliderProps, ProductTeaser, type ProductTeaserProps, PromotionalBanner, type PromotionalBannerProps, PropertiesResizer, type PropertiesResizerProps, PuckEditor, type PuckEditorProps, RelatedProductsSlider, type RelatedProductsSliderProps, RichText, RichTextField, type RichTextFieldProps, type RichTextProps, SocialLinks, type SocialLinksProps, Spacer, type SpacerProps, TabContent, type TabContentProps, TestimonialsSlider, type TestimonialsSliderProps, TextBlock, type TextBlockProps, ThankYouContent, type ThankYouContentProps, TrustBadges, type TrustBadgesProps, UnsavedChangesDialog, type UnsavedChangesDialogProps, VideoBlock, type VideoBlockProps, WebsiteLogo, type WebsiteLogoProps, defaultPuckConfig, nimbusFieldTypes, richTextField, sanitizeHtml, stripPuckDataToTemplate, useDirtyState };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { Config, ComponentConfig } from '@measured/puck';
+import { Config, ComponentConfig, CustomField, Data, Overrides } from '@measured/puck';
 import { PuckData, PuckStateInfo } from '@commercetools-demo/puck-types';
 
 interface PuckEditorProps {
@@ -11,6 +11,8 @@ interface PuckEditorProps {
     businessUnitKey: string;
     /** JWT bearer token — required for save/publish mutations */
     jwtToken: string;
+    /** Content locale (e.g. "en-US") used for locale-aware calls like product search */
+    locale?: string;
     /** The key of the puck page to edit */
     pageKey: string;
     /**
@@ -25,6 +27,10 @@ interface PuckEditorProps {
     onSave?: (puckData: PuckData) => void;
     /** Called when an error occurs */
     onError?: (error: Error) => void;
+    /** Opens the preview view; when omitted the toolbar Preview button is hidden. */
+    onPreview?: () => void;
+    /** Notifies the host when the unsaved-changes state flips (for nav guards). */
+    onDirtyChange?: (isDirty: boolean) => void;
     /** Show the Publish button in the toolbar. Default: true */
     showPublishButton?: boolean;
     /** Debounce delay for auto-save in ms. Default: 1500 */
@@ -48,7 +54,9 @@ declare const defaultPuckConfig: Config;
 
 interface HeroProps {
     heading: string;
+    headingFontSize?: string;
     subheading?: string;
+    subheadingFontSize?: string;
     backgroundImage?: string;
     ctaText?: string;
     ctaUrl?: string;
@@ -65,11 +73,32 @@ interface RichTextProps {
 }
 declare const RichText: ComponentConfig<RichTextProps>;
 
+interface GridProps {
+    columnCount?: 1 | 2 | 3 | 4 | 5 | 6;
+    rowCount?: 1 | 2 | 3 | 4 | 5 | 6;
+    gap?: string;
+    padding?: string;
+}
+/**
+ * Grid — a layout container that lays out a `columnCount` × `rowCount` matrix
+ * of drop zones. Each cell is an independent Puck DropZone, so components can be
+ * dropped into any cell. (Renamed from "Columns"; rows added.)
+ *
+ * This render function is shared by the editor and the Puck renderer
+ * (puck-renderer runs the same config), so updating it here updates both.
+ */
+declare const Grid: ComponentConfig<GridProps>;
+
 interface ColumnsProps {
     columnCount?: 2 | 3 | 4;
     gap?: string;
     padding?: string;
 }
+/**
+ * @deprecated Use `Grid` instead (columns + rows). `Columns` is kept registered
+ * for backward compatibility so pages saved with the original component (and its
+ * `column-N` drop zones) keep rendering. Prefer Grid for new content.
+ */
 declare const Columns: ComponentConfig<ColumnsProps>;
 
 interface ImageProps {
@@ -89,6 +118,7 @@ interface ButtonProps {
     href?: string;
     variant?: 'primary' | 'secondary' | 'outline';
     size?: 'sm' | 'md' | 'lg';
+    fontSize?: string;
     align?: 'left' | 'center' | 'right';
     openInNewTab?: boolean;
 }
@@ -96,6 +126,7 @@ declare const Button: ComponentConfig<ButtonProps>;
 
 interface CardProps {
     title: string;
+    titleFontSize?: string;
     body?: string;
     imageUrl?: string;
     ctaText?: string;
@@ -125,7 +156,15 @@ interface DatasourceFieldProps {
 }
 declare const DatasourceField: React.FC<DatasourceFieldProps>;
 
-interface ProductTeaserProps {
+/** How a product link is built — from the product slug or its SKU. */
+type ProductLinkWith = 'slug' | 'sku';
+/** Props every product-linking component shares. */
+interface ProductLinkProps {
+    linkWith: ProductLinkWith;
+    baseUrl: string;
+}
+
+interface ProductTeaserProps extends ProductLinkProps {
     datasource: DatasourceValue;
     richText: string;
 }
@@ -186,7 +225,7 @@ interface CountdownBannerProps {
 }
 declare const CountdownBanner: ComponentConfig<CountdownBannerProps>;
 
-interface CrossSellBlockProps {
+interface CrossSellBlockProps extends ProductLinkProps {
     title: string;
     products: DatasourceValue;
     ctaText: string;
@@ -249,7 +288,7 @@ interface NewsletterSignupProps {
 }
 declare const NewsletterSignup: ComponentConfig<NewsletterSignupProps>;
 
-interface ProductBannerProps {
+interface ProductBannerProps extends ProductLinkProps {
     title: string;
     description: string;
     ctaText: string;
@@ -266,7 +305,7 @@ interface ProductGridHeaderProps {
 }
 declare const ProductGridHeader: ComponentConfig<ProductGridHeaderProps>;
 
-interface ProductSliderProps {
+interface ProductSliderProps extends ProductLinkProps {
     title: string;
     subtitle: string;
     products: DatasourceValue;
@@ -283,7 +322,7 @@ interface PromotionalBannerProps {
 }
 declare const PromotionalBanner: ComponentConfig<PromotionalBannerProps>;
 
-interface RelatedProductsSliderProps {
+interface RelatedProductsSliderProps extends ProductLinkProps {
     title: string;
     subtitle: string;
     products: DatasourceValue;
@@ -364,17 +403,135 @@ interface ImagePickerFieldProps {
 }
 declare const ImagePickerField: React.FC<ImagePickerFieldProps>;
 
+interface RichTextFieldProps {
+    /** HTML string. */
+    value: string | undefined;
+    onChange: (value: string) => void;
+}
+declare const RichTextField: React.FC<RichTextFieldProps>;
+/**
+ * Puck `custom` field config that renders a rich-text editor (HTML in / out).
+ * Use in a component's `fields` for any prop that holds an HTML string, e.g.
+ *   fields: { body: richTextField('Body') }
+ */
+declare const richTextField: (label: string) => CustomField<string>;
+
+/**
+ * Sanitize rich-text HTML before it is injected via dangerouslySetInnerHTML.
+ *
+ * RichText/TextBlock/Card store author-controlled HTML produced by the TipTap
+ * editor, but content can also arrive from imports or older data, so we always
+ * sanitize at render time. isomorphic-dompurify works in both the browser and
+ * during SSR, so this is safe wherever the renderer runs.
+ *
+ * `style` and `class` are allowed because the editor emits inline styles
+ * (e.g. font-size from the typography control) and structural classes.
+ */
+declare const sanitizeHtml: (html: string | undefined | null) => string;
+
 interface EditorToolbarProps {
+    /** Page / content name shown centred in the bar. */
+    title: string;
     saving: boolean;
     isDirty: boolean;
     states: PuckStateInfo;
     onSave: () => void;
     onPublish: () => void;
     onRevert: () => void;
+    /** When provided, renders a Preview button that opens the preview view. */
+    onPreview?: () => void;
+    /** When provided, adds a "Create a template from this…" overflow-menu item. */
+    onCreateTemplate?: () => void;
+    /** Label for the create-template menu item. */
+    createTemplateLabel?: string;
     showPublishButton: boolean;
 }
+/**
+ * Full replacement for Puck's header (wired via the `header` override).
+ *
+ * Layout: undo/redo + panel toggle on the left, the document name with its
+ * status badges centred, and the Save / Publish / Preview actions plus an
+ * overflow menu (version history, revert) on the right.
+ */
 declare const EditorToolbar: React.FC<EditorToolbarProps>;
 
+interface UnsavedChangesDialogProps {
+    /** Whether the dialog is visible. */
+    isOpen: boolean;
+    /** Called when the dialog requests to open/close (backdrop, Esc, Stay). */
+    onOpenChange: (isOpen: boolean) => void;
+    /** Called when the user confirms they want to leave and discard changes. */
+    onConfirm: () => void;
+}
+/**
+ * Nimbus confirmation shown when the user tries to navigate away from an editor
+ * that has unsaved changes. Replaces the native `window.confirm` so the warning
+ * matches the rest of the editor chrome.
+ */
+declare const UnsavedChangesDialog: React.FC<UnsavedChangesDialogProps>;
+
+interface CreateTemplateDialogProps {
+    /** Whether the dialog is visible. */
+    isOpen: boolean;
+    /** Called when the dialog requests to open/close (backdrop, Esc, Cancel). */
+    onOpenChange: (isOpen: boolean) => void;
+    /**
+     * Called when the user confirms. `withoutData` reflects the
+     * "Create template without data" checkbox (default checked).
+     */
+    onConfirm: (name: string, withoutData: boolean) => void | Promise<void>;
+    /** Disables the form while the template is being created. */
+    saving?: boolean;
+}
+/**
+ * Nimbus dialog for "Create a template from this page/content". Collects a
+ * template name and whether to strip component data before saving.
+ */
+declare const CreateTemplateDialog: React.FC<CreateTemplateDialogProps>;
+
+/**
+ * Produce a "without data" copy of Puck data for use as a template.
+ *
+ * Each **leaf** component's props are reset to its config `defaultProps` (so a
+ * new page created from the template shows the component's default contents,
+ * not the source page's data). **Container** components — those that hold child
+ * components in a zone — keep their props, so structural fields (e.g. a Grid's
+ * `columnCount`) survive and the nested layout renders correctly.
+ *
+ * Nested components live in a flat `data.zones` map keyed `"<parentId>:<zone>"`;
+ * `<parentId>` is the parent component's `props.id`. Every component's
+ * `props.id` is always preserved so those zone keys stay consistent.
+ */
+declare function stripPuckDataToTemplate(data: Data, config: Config): Data;
+
+interface DirtyState {
+    /** True when the canvas differs from the last saved / loaded baseline. */
+    isDirty: boolean;
+    /**
+     * Feed every Puck `onChange` payload through this. The very first call after
+     * a (re)load establishes the baseline and is treated as "clean" — Puck emits
+     * an `onChange` on mount while it normalises the incoming data, and that must
+     * not be mistaken for an edit by the user.
+     */
+    markChange: (data: unknown) => void;
+    /** Mark the current data as the saved baseline (call after a successful save). */
+    markSaved: (data: unknown) => void;
+}
+/**
+ * Tracks whether the Puck canvas has unsaved edits.
+ *
+ * Puck is an uncontrolled editor that fires `onChange` once on mount (to report
+ * its normalised version of the initial data). Naively flagging the editor
+ * dirty on the first `onChange` makes a freshly-opened page look "Unsaved" even
+ * though nothing was touched. We instead capture that first payload as the
+ * baseline and only flag dirty when a later payload diverges from it.
+ *
+ * `resetKey` should change whenever the document shown in the canvas is swapped
+ * out (different page/content, or a historical version applied) so a new
+ * baseline is captured for the new document.
+ */
+declare const useDirtyState: (resetKey: string) => DirtyState;
+
 declare const ComponentSearchProvider: React.FC<{
     children: ReactNode;
 }>;
@@ -386,4 +543,25 @@ declare const ComponentItemFilter: React.FC<{
     name: string;
 }>;
 
-export { Button, type ButtonProps, Card, type CardProps, CategoryGrid, type CategoryGridProps, CategoryHero, type CategoryHeroProps, CheckoutPromoBanner, type CheckoutPromoBannerProps, Columns, type ColumnsProps, ComponentItemFilter, ComponentSearchProvider, ComponentsPanel, CountdownBanner, type CountdownBannerProps, CrossSellBlock, type CrossSellBlockProps, DatasourceField, type DatasourceFieldProps, type DatasourceType, type DatasourceValue, DeliveryMessage, type DeliveryMessageProps, Divider, type DividerProps, EditorToolbar, type EditorToolbarProps, EmptyState, type EmptyStateProps, FAQAccordion, type FAQAccordionProps, FooterBlock, type FooterBlockProps, Hero, HeroBanner, type HeroBannerProps, type HeroProps, Image, ImageBlock, type ImageBlockProps, ImagePickerField, type ImagePickerFieldProps, type ImageProps, NewsletterSignup, type NewsletterSignupProps, ProductBanner, type ProductBannerProps, ProductGridHeader, type ProductGridHeaderProps, ProductSlider, type ProductSliderProps, ProductTeaser, type ProductTeaserProps, PromotionalBanner, type PromotionalBannerProps, PuckEditor, type PuckEditorProps, RelatedProductsSlider, type RelatedProductsSliderProps, RichText, type RichTextProps, SocialLinks, type SocialLinksProps, Spacer, type SpacerProps, TabContent, type TabContentProps, TestimonialsSlider, type TestimonialsSliderProps, TextBlock, type TextBlockProps, ThankYouContent, type ThankYouContentProps, TrustBadges, type TrustBadgesProps, VideoBlock, type VideoBlockProps, WebsiteLogo, type WebsiteLogoProps, defaultPuckConfig };
+declare const nimbusFieldTypes: NonNullable<Overrides['fieldTypes']>;
+
+interface PropertiesResizerProps {
+    /** Smallest allowed width in px. */
+    minWidth?: number;
+    /** Largest allowed width in px. */
+    maxWidth?: number;
+}
+/**
+ * Draggable divider that resizes the Puck properties (right) panel.
+ *
+ * Render it as a child of the `.puck-editor-fill` container (a sibling of the
+ * Puck editor). It writes the chosen width to a `--puck-properties-width` CSS
+ * variable on that container — the grid-template override in
+ * ComponentListSearch's injected `<style>` reads it to size only the right
+ * column, leaving the left panel and canvas alone. The handle is positioned
+ * over the panel's left edge by measuring the live sidebar, and hides itself
+ * when the panel is collapsed. The width persists in localStorage.
+ */
+declare const PropertiesResizer: React.FC<PropertiesResizerProps>;
+
+export { Button, type ButtonProps, Card, type CardProps, CategoryGrid, type CategoryGridProps, CategoryHero, type CategoryHeroProps, CheckoutPromoBanner, type CheckoutPromoBannerProps, Columns, type ColumnsProps, ComponentItemFilter, ComponentSearchProvider, ComponentsPanel, CountdownBanner, type CountdownBannerProps, CreateTemplateDialog, type CreateTemplateDialogProps, CrossSellBlock, type CrossSellBlockProps, DatasourceField, type DatasourceFieldProps, type DatasourceType, type DatasourceValue, DeliveryMessage, type DeliveryMessageProps, type DirtyState, Divider, type DividerProps, EditorToolbar, type EditorToolbarProps, EmptyState, type EmptyStateProps, FAQAccordion, type FAQAccordionProps, FooterBlock, type FooterBlockProps, Grid, type GridProps, Hero, HeroBanner, type HeroBannerProps, type HeroProps, Image, ImageBlock, type ImageBlockProps, ImagePickerField, type ImagePickerFieldProps, type ImageProps, NewsletterSignup, type NewsletterSignupProps, ProductBanner, type ProductBannerProps, ProductGridHeader, type ProductGridHeaderProps, ProductSlider, type ProductSliderProps, ProductTeaser, type ProductTeaserProps, PromotionalBanner, type PromotionalBannerProps, PropertiesResizer, type PropertiesResizerProps, PuckEditor, type PuckEditorProps, RelatedProductsSlider, type RelatedProductsSliderProps, RichText, RichTextField, type RichTextFieldProps, type RichTextProps, SocialLinks, type SocialLinksProps, Spacer, type SpacerProps, TabContent, type TabContentProps, TestimonialsSlider, type TestimonialsSliderProps, TextBlock, type TextBlockProps, ThankYouContent, type ThankYouContentProps, TrustBadges, type TrustBadgesProps, UnsavedChangesDialog, type UnsavedChangesDialogProps, VideoBlock, type VideoBlockProps, WebsiteLogo, type WebsiteLogoProps, defaultPuckConfig, nimbusFieldTypes, richTextField, sanitizeHtml, stripPuckDataToTemplate, useDirtyState };