pagepilot-visual-editor 1.0.2

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

@@ -0,0 +1,48 @@
+import { z } from 'zod';
+export declare function zColor(): z.ZodString;
+export declare function zFontFamily(): z.ZodEnum<{
+    MODERN_SANS: "MODERN_SANS";
+    BOOK_SANS: "BOOK_SANS";
+    ORGANIC_SANS: "ORGANIC_SANS";
+    GEOMETRIC_SANS: "GEOMETRIC_SANS";
+    HEAVY_SANS: "HEAVY_SANS";
+    ROUNDED_SANS: "ROUNDED_SANS";
+    MODERN_SERIF: "MODERN_SERIF";
+    BOOK_SERIF: "BOOK_SERIF";
+    MONOSPACE: "MONOSPACE";
+    ROBOTO: "ROBOTO";
+    OPEN_SANS: "OPEN_SANS";
+    LATO: "LATO";
+    POPPINS: "POPPINS";
+    INTER: "INTER";
+    MONTSERRAT: "MONTSERRAT";
+    RALEWAY: "RALEWAY";
+    NUNITO: "NUNITO";
+    PLAYFAIR_DISPLAY: "PLAYFAIR_DISPLAY";
+    MERRIWEATHER: "MERRIWEATHER";
+    PT_SANS: "PT_SANS";
+    OSWALD: "OSWALD";
+    SOURCE_SANS_PRO: "SOURCE_SANS_PRO";
+    RUBIK: "RUBIK";
+    WORK_SANS: "WORK_SANS";
+    NOTO_SANS: "NOTO_SANS";
+    DANCING_SCRIPT: "DANCING_SCRIPT";
+    PACIFICO: "PACIFICO";
+    LOBSTER: "LOBSTER";
+    BEBAS_NEUE: "BEBAS_NEUE";
+}>;
+export declare function zFontWeight(): z.ZodEnum<{
+    normal: "normal";
+    bold: "bold";
+}>;
+export declare function zTextAlign(): z.ZodEnum<{
+    right: "right";
+    left: "left";
+    center: "center";
+}>;
+export declare function zPadding(): z.ZodObject<{
+    top: z.ZodNumber;
+    bottom: z.ZodNumber;
+    right: z.ZodNumber;
+    left: z.ZodNumber;
+}, z.core.$strip>;

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

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export declare const useCurrentBlockId: () => string;
+type EditorBlockProps = {
+    id: string;
+};
+/**
+ *
+ * @param id - Block id
+ * @returns EditorBlock component that loads data from the EditorDocumentContext
+ */
+declare function EditorBlock({ id }: EditorBlockProps): React.JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof EditorBlock>;
+export default _default;

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

@@ -0,0 +1,347 @@
+import { PageTypes } from '../../App/hooks/constants';
+import { TEditorConfiguration } from './core';
+import { TemplateFormField, TemplateArrayRow } from './templateVariables';
+type TValue = {
+    document: TEditorConfiguration;
+    selectedBlockId: string | null;
+    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';
+    inspectorDrawerOpen: boolean;
+    samplesDrawerOpen: boolean;
+    activeStepIndex: number;
+    selectors: Array<string | undefined>;
+    elementIdError: {
+        hasError: boolean;
+        stepIndex?: number;
+    };
+    slugError: boolean;
+    stepSavedSnapshots?: Record<number, string | null>;
+    panelMeasurements?: {
+        panelWidth: number;
+        panelHeight: number;
+        containerWidth: number;
+        containerHeight: number;
+        renderWidth?: number;
+        renderHeight?: number;
+        offsetLeft?: number;
+        offsetTop?: number;
+    } | null;
+    inlineEditing: {
+        blockId: string | null;
+        draft: string;
+    };
+    inlineEditingEnabled: boolean;
+    hoveredBlockId: string | null;
+    copiedBlock: {
+        rootBlockId: string;
+        blocks: Record<string, any>;
+    } | null;
+    activeSectionIsExternal: boolean;
+    undoStack: HistoryEntry[];
+    redoStack: HistoryEntry[];
+    stepHistories: Record<number, {
+        undoStack: HistoryEntry[];
+        redoStack: HistoryEntry[];
+    }>;
+    isApplyingHistory: boolean;
+    currentRecordType: string | null;
+};
+/**
+ * A single undo/redo step. We snapshot the selected block alongside the
+ * document so undo/redo can put the user back exactly where they were —
+ * losing selection on every undo means having to re-pick the block you were
+ * tweaking after each step, which makes rapid trial-and-error painful.
+ */
+/**
+ * Optional callbacks for state that lives OUTSIDE the editor's document —
+ * e.g. the tour record's `steps` array, which is held by the parent React
+ * tree. The editor only owns the active step's document, so reverting the
+ * doc alone after an action like "apply multi-step template" leaves the
+ * parent record stuck on the post-action state. The action attaches an
+ * `UndoSideEffect` to its undo entry; undo/redo fire `.undo()` / `.redo()`
+ * after the editor's own state has settled so the two surfaces stay in sync.
+ */
+export type UndoSideEffect = {
+    undo: () => void;
+    redo: () => void;
+};
+type HistoryEntry = {
+    document: TEditorConfiguration;
+    activeStepIndex: number;
+    selectedBlockId: string | null;
+    selectors: Array<string | undefined>;
+    sideEffect?: UndoSideEffect;
+};
+export declare const editorStateStore: import('zustand').UseBoundStore<import('zustand').StoreApi<TValue>>;
+export declare function useDocument(): TEditorConfiguration;
+/**
+ * Reactive document view with orphan blocks (the ones handleDeleteClick deliberately
+ * leaves behind) pruned out. Use this in save/publish/preview consumers so backend
+ * payloads don't keep growing, but stick with useDocument() inside the editor where
+ * you may still want to see disconnected blocks.
+ */
+export declare function useDocumentPruned(): TEditorConfiguration;
+/**
+ * Subscribe to a SINGLE block by id. The selector returns the block reference
+ * directly, so re-renders fire only when that block's reference changes —
+ * which, thanks to the per-block short-circuit inside `setDocument`, happens
+ * only when that block actually changed. Use this in place of `useDocument()`
+ * whenever a component only needs one block's data.
+ */
+export declare function useEditorBlock(id: string): any;
+/**
+ * Non-reactive read of the current document. Use inside event handlers / callbacks
+ * when you need the latest document but do NOT want the component to re-render
+ * every time any block in the document changes.
+ */
+export declare function getDocument(): TValue['document'];
+export declare function useRootFontFamily(): string;
+export declare function useSelectedBlockId(): string;
+/**
+ * Boolean selector — returns true only when THIS block is the selected one.
+ * Use in per-block components so that switching selection from A to B only
+ * 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 useSelectedMainTab(): "html" | "editor" | "preview" | "json";
+export declare function useActiveStepIndex(): number;
+export declare function useSelectors(): string[];
+export declare function usePanelMeasurements(): {
+    panelWidth: number;
+    panelHeight: number;
+    containerWidth: number;
+    containerHeight: number;
+    renderWidth?: number;
+    renderHeight?: number;
+    offsetLeft?: number;
+    offsetTop?: number;
+};
+export declare function useCurrentRecordType(): string;
+export declare function setCurrentRecordType(type: string | null): void;
+export declare function setPanelMeasurements(measurements: {
+    panelWidth: number;
+    panelHeight: number;
+    containerWidth: number;
+    containerHeight: number;
+    renderWidth?: number;
+    renderHeight?: number;
+    offsetLeft?: number;
+    offsetTop?: number;
+} | null): void;
+export declare function setSelectors(selectors: Array<string | undefined>): void;
+export declare function setSelectorAt(index: number, selector: string): void;
+/**
+ * Per-call options for `setActiveStepIndex`. `skipHistory` lets non-user
+ * callers — e.g. the add/delete/duplicate/reorder paths, which are about to
+ * push their own undo entry that already captures the pre-action active step
+ * via the sideEffect mechanism — change the active step without producing a
+ * separate "navigate" entry in the undo stack. Without this opt-out, those
+ * structural actions would emit TWO entries (one navigate + one structural),
+ * forcing the user to press Undo twice to revert a single conceptual action.
+ *
+ * Also used during initial load (`useGetTooltip` reading the `?step=N` query
+ * param), where the navigation isn't a user edit at all and shouldn't be
+ * undoable.
+ */
+type SetActiveStepIndexOptions = {
+    skipHistory?: boolean;
+};
+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 useInspectorDrawerOpen(): boolean;
+export declare function useSamplesDrawerOpen(): boolean;
+export declare function useInlineEditingEnabled(): boolean;
+export declare function setInlineEditingEnabled(enabled: boolean): void;
+export declare function useInlineEditing(): {
+    blockId: string | null;
+    draft: string;
+};
+export declare function useHoveredBlockId(): string;
+/**
+ * Boolean selector — returns true only when THIS block is the hovered one.
+ * See {@link useIsBlockSelected} for rationale.
+ */
+export declare function useIsBlockHovered(id: string): boolean;
+export declare function setHoveredBlockId(hoveredBlockId: string | null): void;
+export declare function useCopiedBlock(): {
+    rootBlockId: string;
+    blocks: Record<string, any>;
+};
+export declare function getCopiedBlock(): {
+    rootBlockId: string;
+    blocks: Record<string, any>;
+};
+export declare function setCopiedBlock(config: {
+    rootBlockId: string;
+    blocks: Record<string, any>;
+}): void;
+export declare function clearCopiedBlock(): void;
+export declare function useActiveSectionIsExternal(): boolean;
+export declare function setActiveSectionIsExternal(value: boolean): void;
+/**
+ * Selects a block without changing the active sidebar tab or opening the inspector drawer.
+ * Use this when selection should be a "focus" action, not a "navigate to configuration" action.
+ */
+export declare function setSelectedBlockIdKeepTab(selectedBlockId: string | null): void;
+export declare function setSelectedBlockId(selectedBlockId: TValue['selectedBlockId']): void;
+export declare function setSelectedBlockIdOnly(selectedBlockId: TValue['selectedBlockId']): void;
+export declare function setSidebarTab(selectedSidebarTab: TValue['selectedSidebarTab']): void;
+export declare function startInlineEditing(blockId: string, draft: string): void;
+export declare function stopInlineEditing(): void;
+export declare function registerPendingInlineCommit(cb: () => void): () => void;
+/**
+ * Public flush so the inline toolbar can demand "this command is its own
+ * undo step" immediately, without waiting for blur or the next setDocument.
+ *
+ * Why: toolbar buttons (Bold, color, font size, list, etc.) mutate the
+ * contentEditable via execCommand. Those mutations DO fire input events,
+ * but `InlineEditableText.handleInput` only commits on word boundaries /
+ * paste / etc. — pure formatting clicks were silently held until the next
+ * blur or external setDocument. The result was the bug the user reported:
+ * "some tools/settings don't immediately go into undo/redo".
+ */
+export declare function commitPendingInlineEdit(): void;
+export declare function resetDocument(document: TValue['document'], options?: {
+    sideEffect?: UndoSideEffect;
+    activeStepIndex?: number;
+    /**
+     * Skip the undo-stack push *and* wipe both stacks. Use when seeding the
+     * editor from external state (host record on mount, hot reload, etc.) —
+     * the swap isn't a user action and the previous empty doc shouldn't
+     * become an Undo target. Without this, the Undo button is already
+     * enabled the moment the editor mounts because pushToUndoStack records
+     * the pre-seed empty state.
+     */
+    skipHistory?: boolean;
+}): void;
+/**
+ * Wipe both history stacks without touching the document. Used by the Shell
+ * after the initial seed has settled, to swallow any spurious pushes that
+ * various block-level useEffects (ButtonGroup auto-seed, layout positioning
+ * re-measure, sidebar panels echoing fetched data, etc.) emit between
+ * "editor mounted" and "user has actually edited something". Without this
+ * guard the Undo button is enabled on first paint and clicking it rolls
+ * the canvas back to an empty document.
+ */
+export declare function clearEditorHistory(): void;
+export declare function resetDocumentKeepTab(document: TValue['document'], options?: {
+    sideEffect?: UndoSideEffect;
+}): void;
+/**
+ * Force the next push to start a fresh entry (no coalescing). Used after
+ * undo/redo and step/section switches so a burst from before the navigation
+ * can't accidentally merge with the next edit.
+ *
+ * Also exported for the inline editor's word-boundary commit path: each
+ * finished word should become its own undo entry instead of collapsing into
+ * the 200ms burst window with neighbouring words.
+ */
+export declare function resetCoalesce(): void;
+export declare function undo(): void;
+export declare function redo(): void;
+/**
+ * Load a step / section document into the live editor without touching the
+ * global undo stack. Called by the useEffect that fires on activeStepIndex
+ * change (useGetTooltip) and by the page-section handlers when the user
+ * switches between sections.
+ *
+ * In the previous per-step history design this function ALSO swapped the live
+ * undoStack/redoStack with the per-step `stepHistories[activeStepIndex]`
+ * snapshot. With the global linear stack that machinery is gone — every
+ * action's undo entry already captures the active step it belonged to via
+ * `HistoryEntry.activeStepIndex`, so wiping or swapping stacks here would
+ * just throw away cross-step history the user can legitimately undo into.
+ */
+export declare function loadStepDocument(document: TValue['document']): void;
+export declare function insertStepHistorySlot(_insertedIndex: number): void;
+export declare function removeStepHistorySlot(_removedIndex: number): void;
+export declare function swapStepHistoryEntries(_indexA: number, _indexB: number): void;
+export declare function reorderStepHistoryEntries(_sourceIndex: number, _targetIndex: number): void;
+/**
+ * Wipe a single step's saved undo/redo history. Use after a destructive
+ * step-level operation (e.g. "Replace from template", or a save that should
+ * make the current document the new clean baseline) when we want that
+ * specific step to lose its history without affecting the others.
+ */
+export declare function clearStepHistory(stepIndex: number): void;
+/**
+ * Per-call options for `setDocument`. `skipHistory` lets non-user callers
+ * (layout-driven auto-writes like usePanelPositioning's ResizeObserver and
+ * initial-position seed) update the document without pushing to the undo
+ * stack OR clearing the redo stack.
+ *
+ * Why this matters for redo correctness: every regular setDocument call
+ * wipes the redo stack on the assumption that "if the user just made a
+ * forward edit, the forward branch they had via redo is no longer valid."
+ * That assumption is correct for USER edits but catastrophic for background
+ * effects. A ResizeObserver firing after the canvas reflows from an undo —
+ * which happens at the tail of every undo, since the document changed —
+ * would call setDocument to re-record the panel's position, clearing the
+ * very redo stack the user is about to interact with. The visible bug is
+ * "I undo my last edit, then redo, and the edit doesn't come back."
+ *
+ * Callers that pass skipHistory:true also opt out of flushing pending
+ * inline edits, since they're not a logical break in the user's work.
+ */
+export type SetDocumentOptions = {
+    skipHistory?: boolean;
+    /**
+     * Attach an `UndoSideEffect` to the undo entry this setDocument call
+     * pushes. Use this when the user-visible action affects state OUTSIDE
+     * the editor's document (e.g. demo background image lives in the
+     * parent's React state + the record's per-step `backgroundImage`).
+     * The sideEffect's `undo` / `redo` callbacks fire after the editor's
+     * own state is restored, in the same try/catch wrapper as the
+     * resetDocument flow.
+     *
+     * Ignored when `skipHistory` is true (no entry is pushed in that case).
+     */
+    sideEffect?: UndoSideEffect;
+};
+export declare function setDocument(document: TValue['document'], options?: SetDocumentOptions): void;
+export declare function toggleInspectorDrawerOpen(): void;
+export declare function toggleSamplesDrawerOpen(): void;
+export declare function setSelectedScreenSize(selectedScreenSize: TValue['selectedScreenSize']): void;
+/** Reactive view of the template fields on root.data.formFields. */
+export declare function useTemplateForms(): TemplateFormField[];
+/** Non-reactive read for use inside event handlers / the save transform. */
+export declare function getTemplateFormsState(): TemplateFormField[];
+/**
+ * Reactive map of blockId → repeat-row values for every container-repeat array
+ * field (array field with a `sourceBlockId`). Recomputed when the document
+ * changes. The canvas render path uses it to substitute a repeated container
+ * copy's `{{this.subField}}` tokens with that copy's row values.
+ */
+export declare function useRepeatRowIndex(): Map<string, TemplateArrayRow>;
+/** Write the template-fields onto the document root (undoable, live). */
+export declare function setTemplateForms(fields: TemplateFormField[]): void;
+export declare function useElementIdError(): {
+    hasError: boolean;
+    stepIndex?: number;
+};
+export declare function setElementIdError(elementIdError: TValue['elementIdError']): void;
+export declare function clearElementIdError(): void;
+export declare function useSlugError(): boolean;
+export declare function setSlugError(slugError: boolean): void;
+export declare function clearSlugError(): void;
+export declare function getStepSavedSnapshot(stepIndex: number): string | null;
+export declare function initStepSavedSnapshotIfMissing(stepIndex: number, snapshot: string | null): void;
+export declare function setStepSavedSnapshot(stepIndex: number, snapshot: string | null): void;
+export declare function setStepSavedSnapshotFromStore(stepIndex: number): void;
+export declare function initStepSavedSnapshotIfMissingFromStore(stepIndex: number): void;
+export declare function clearStepSavedSnapshots(): void;
+export declare function resetEditorStateForNewRecord(): void;
+export declare function useIsStepDirty(stepIndex?: number): boolean;
+export declare function pruneOrphanBlocks<T extends Record<string, any>>(doc: T, rootId?: string): T;
+export declare function buildSnapshot({ document, selector, identifier, pageType, }: {
+    document?: any;
+    selector?: string;
+    identifier?: string;
+    pageType?: string;
+}): string;
+export declare function useIsTourDirty(record: any, pageType: PageTypes | undefined, initialRecord: any): boolean;
+export declare function persistEditorToLocalStorage(record: any, recordId?: string, pageType?: string, activeStepIndex?: number): void;
+export {};

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

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+export type EditorVariant = 'default' | 'page-tour';
+export declare const EditorVariantProvider: React.Provider<EditorVariant>;
+export declare function useEditorVariant(): EditorVariant;

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

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+type Props = {
+    id: string;
+};
+/**
+ * Virtualized wrapper around <EditorBlock>. While the placeholder div is
+ * outside the viewport (plus a 600px margin), the real EditorBlock is NOT
+ * mounted — no Zustand subscription, no children render, no Container
+ * recursion. The moment the placeholder enters that margin, we mount the
+ * real block and tear down the observer.
+ *
+ * Why this exists: when the user appends a heavy template (30+ nested
+ * blocks) to a page that already has a heavy template, the previous
+ * implementation forced React to mount every new block in one
+ * synchronous commit — sometimes locking the page for several seconds.
+ * With this wrapper, the click commit only mounts the ~5 blocks that
+ * happen to be in the viewport; the rest mount on demand as the user
+ * scrolls. Total CPU work is the same, but it's spread across many
+ * frames instead of one frozen one.
+ *
+ * Once mounted, we never unmount — that would lose any per-block state
+ * (selection, in-flight edits, etc.). This is "lazy mount", not full
+ * windowing, which is the right trade-off for an editor.
+ */
+export default function LazyEditorBlock({ id }: Props): React.JSX.Element;
+export {};