@tangle-network/agent-app 0.27.2 → 0.29.0

package/dist/design-canvas-react/index.d.ts

@@ -1,519 +1,17 @@
-import { c as SceneDocument, d as SceneElement, B as Bounds, N as NewPageOptions, a as PageGuides, P as PageBleed, g as ScenePage } from '../model-BHLN208Z.js';
-import { n as SceneOperation, m as SceneAttrsPatch, h as ExportCropRect, j as ExportPreset } from '../export-presets-Dl5Aa5xj.js';
-export { v as bleedAwareExportBounds, F as scaleForPreset } from '../export-presets-Dl5Aa5xj.js';
+import { D as DesignCanvasProps, c as createSceneCommandStack, E as ExportTriggerOptions, a as DesignCanvasMode } from '../command-stack-CkjelfK_.js';
+export { A as ApplySceneResult, b as EditorSceneState, S as SCENE_COMMAND_HISTORY_LIMIT, d as SceneCommand, e as SceneCommandStack, f as SceneCommandStackWithReapply, g as SnapEngine, h as SnapResult, i as SnapTarget, j as SnapTargetKind, k as SnapTargets, Z as ZoomPanMath } from '../command-stack-CkjelfK_.js';
+import { InsertPageGeometry, InsertTemplate, MultiSetAttrsEntry } from './engine.js';
+export { AddElementInput, AddPageInput, BindSlotInput, DEFAULT_INSERT_TEMPLATES, DUPLICATE_OFFSET, DeleteElementInput, DeletePageInput, DuplicatePageInput, ExportViewSnapshot, GroupElementsInput, MAX_INSERT_DIMENSION, MarqueeSelectOptions, NudgeDelta, ReorderElementInput, ReorderPageInput, ResolvedExportParams, SetAttrsInput, SetDocumentTitleInput, SetPageGuidesInput, SetPagePropsInput, UngroupElementInput, ZoomPanConfig, addElementCommand, addPageCommand, bindSlotCommand, buildInsertImageOp, centeredPosition, collectGridTargets, createSnapEngine, createZoomPanMath, deleteElementCommand, deletePageCommand, documentCropToStageCoords, duplicatePageCommand, fittedSize, groupElementsCommand, hitTestPoint, identifyTaintedSrc, isCrossOriginSrc, isExportHiddenNodeName, marqueeSelect, mintElementId, multiSetAttrsCommand, nudgeDelta, reorderElementCommand, reorderPageCommand, resolveExportParams, setAttrsCommand, setDocumentTitleCommand, setPageGuidesCommand, setPagePropsCommand, ungroupElementCommand } from './engine.js';
+import { c as SceneDocument, g as ScenePage, d as SceneElement, P as PageBleed, a as PageGuides } from '../model-BBwyOuWG.js';
+import { f as ExportPreset } from '../export-presets-DAsU5Wal.js';
+export { d as ExportCropRect, h as bleedAwareExportBounds, s as scaleForPreset } from '../export-presets-DAsU5Wal.js';
+export { D as DesignCanvas, a as DesignCanvasChromeLazy, b as DesignCanvasEditor, c as DesignCanvasFullProps, d as DesignCanvasLazy } from '../lazy-BHHqS8-j.js';
 import * as react from 'react';
+import { ButtonHTMLAttributes } from 'react';
+import { g as SceneOperation, f as SceneAttrsPatch } from '../operations-DLIvvD00.js';
+import { CanvasRenderPalette } from '../theme/index.js';
 import Konva from 'konva';
 
-/**
- * Seams between the design-canvas editor's engine and components, mirroring
- * the sequences-react pattern: interface-only so layers build independently.
- *
- * Persistence: the command stack executes optimistically against local state
- * and emits `SceneOperation[]` through `DesignCanvasProps.onApplyOperations`.
- * The host's apply returns the new revision (and the server document when it
- * re-minted ids); a rejected promise rolls the command back. Drag gestures
- * coalesce: pointer moves mutate volatile state, ONE command (final attrs,
- * inverse = pre-gesture attrs) executes on release — undo is per-gesture,
- * never per-pixel.
- */
-
-interface EditorSceneState {
-    document: SceneDocument;
-    activePageId: string;
-    selectedElementIds: string[];
-    /** Pixels per document px. */
-    zoom: number;
-    panX: number;
-    panY: number;
-    gridEnabled: boolean;
-    /** Document px between grid lines. */
-    gridSize: number;
-    snapEnabled: boolean;
-    showRulers: boolean;
-    showBleed: boolean;
-}
-interface SceneCommand {
-    label: string;
-    execute(state: EditorSceneState): EditorSceneState;
-    undo(state: EditorSceneState): EditorSceneState;
-    operations(): SceneOperation[];
-    /**
-     * The inverse operation sequence for server-side persistence of an undo.
-     * Most commands return an exact inverse (e.g. set_attrs → prior set_attrs,
-     * add_element → delete_element). deletePageCommand returns add_page +
-     * per-element add_element ops restoring the full page snapshot.
-     */
-    inverseOperations(): SceneOperation[];
-}
-interface SceneCommandStack {
-    execute(command: SceneCommand): void;
-    /** Apply the top-of-done-stack inverse and return the command (callers use
-     *  `command.inverseOperations()` to persist the undo to the server). */
-    undo(): SceneCommand;
-    /** Re-execute the top-of-redo-stack and return the command (callers use
-     *  `command.operations()` to persist the redo to the server). */
-    redo(): SceneCommand;
-    canUndo(): boolean;
-    canRedo(): boolean;
-    subscribe(listener: () => void): () => void;
-    getState(): EditorSceneState;
-    /** Update volatile view state (zoom/pan/selection/toggles) without touching
-     *  history — view changes are never undo steps. */
-    setView(patch: Partial<Omit<EditorSceneState, 'document'>>): void;
-    /** Rebase onto a server refresh WITHOUT clearing history (history holds
-     *  operations, not snapshots). */
-    reset(document: SceneDocument): void;
-    /**
-     * Remove a specific command from the undo stack and apply its inverse to
-     * the current state. Called by the persistence layer when a save rejects
-     * AFTER the user may have made further edits.
-     *
-     * Invariant: for commands that operate on disjoint attributes, rollback is
-     * identity for all commands executed after the rolled-back one — their net
-     * effect is preserved. For overlapping attr edits (same element, same field)
-     * the result is defined but not guaranteed to be semantically correct; the
-     * caller should trigger an onResyncRequired fetch in that case.
-     *
-     * If `command` is not found in the undo stack (stale or double-fire
-     * rejection handler), this is a safe no-op.
-     */
-    rollback(command: SceneCommand): void;
-}
-type SnapTargetKind = 'grid' | 'element-edge' | 'element-center' | 'page-edge' | 'page-center' | 'guide';
-interface SnapTarget {
-    /** Page-coordinate position of the snap line. */
-    position: number;
-    kind: SnapTargetKind;
-}
-interface SnapTargets {
-    vertical: SnapTarget[];
-    horizontal: SnapTarget[];
-}
-interface SnapResult {
-    x: number;
-    y: number;
-    /** Lines to render while the gesture holds the snap. */
-    activeVertical: SnapTarget | null;
-    activeHorizontal: SnapTarget | null;
-}
-interface SnapEngine {
-    /** Collect targets for a gesture: other elements' edges/centers, page
-     *  edges/center, saved guides, and grid lines when enabled. `excludeIds`
-     *  removes the dragged elements' own geometry. */
-    collectTargets(state: EditorSceneState, excludeIds: string[]): SnapTargets;
-    /** Snap a moving AABB. Threshold is SCREEN pixels, divided by zoom. */
-    apply(bounds: Bounds, targets: SnapTargets, thresholdPx: number, zoom: number): SnapResult;
-}
-interface ZoomPanMath {
-    minZoom: number;
-    maxZoom: number;
-    /** Zoom about a screen point so the document point under the cursor stays
-     *  fixed (wheel-zoom-to-cursor). Returns the clamped new view. */
-    zoomAtPoint(state: {
-        zoom: number;
-        panX: number;
-        panY: number;
-    }, factor: number, screenX: number, screenY: number): {
-        zoom: number;
-        panX: number;
-        panY: number;
-    };
-    /** Fit the active page into a viewport with padding. */
-    fitPage(page: {
-        width: number;
-        height: number;
-    }, viewport: {
-        width: number;
-        height: number;
-    }, paddingPx?: number): {
-        zoom: number;
-        panX: number;
-        panY: number;
-    };
-    documentToScreen(state: {
-        zoom: number;
-        panX: number;
-        panY: number;
-    }, x: number, y: number): {
-        x: number;
-        y: number;
-    };
-    screenToDocument(state: {
-        zoom: number;
-        panX: number;
-        panY: number;
-    }, x: number, y: number): {
-        x: number;
-        y: number;
-    };
-}
-interface ApplySceneResult {
-    rev: number;
-    /** Present when the server re-minted ids or normalized the document; the
-     *  editor rebases onto it. */
-    document?: SceneDocument;
-}
-/**
- * What the chrome's Export control collects and hands to the workspace's
- * export callback. The workspace (which owns the Konva stage) renders the
- * page to a data URL with these params and forwards the full result to
- * {@link DesignCanvasProps.onExport}. The chrome is Konva-free, so it cannot
- * produce the data URL itself — it only chooses the format and scale.
- */
-interface ExportTriggerOptions {
-    format: 'png' | 'jpeg';
-    /** Output scale multiplier (1 = page size, 2 = retina). */
-    pixelRatio: number;
-}
-/**
- * Editor capability mode.
- * - `'edit'` (default): the full authoring editor — insert panel, page
- *   add/duplicate/delete, layers, grid/snap/ruler/bleed toggles, group/ungroup,
- *   z-order. This is the designer surface.
- * - `'review'`: a lean review/tweak surface for agent-authored output. The
- *   minimal toolbar exposes only safe direct edits (undo/redo, fit/zoom). The
- *   insert panel, blank-page-create, and authoring controls are hidden. Drag,
- *   select, double-click-to-edit-text, image swap, the agent panel, and
- *   gallery/thumbnail/export all stay. Additive and backward-compatible.
- */
-type DesignCanvasMode = 'edit' | 'review';
-interface DesignCanvasProps {
-    document: SceneDocument;
-    /** Revision the document was loaded at; threaded through saves. */
-    rev: number;
-    canWrite: boolean;
-    /** Editor capability mode. Default `'edit'` (full authoring editor). Set
-     *  `'review'` for a lean reviewer that hides authoring controls but keeps
-     *  drag/select/text-edit/image-swap and the agent panel. */
-    mode?: DesignCanvasMode;
-    /** Persist operations. Resolve with the new revision; reject to roll back.
-     *  A stale-revision failure should resolve AFTER refetch with the fresh
-     *  document so the editor rebases instead of fighting. */
-    onApplyOperations(operations: SceneOperation[]): Promise<ApplySceneResult>;
-    onSelectionChange?(elements: SceneElement[]): void;
-    /** Host panels: agent chat (right), asset/template browser (left). */
-    renderAgentPanel?(ctx: {
-        selectedElements: SceneElement[];
-        activePageId: string;
-    }): React.ReactNode;
-    renderSidePanel?(): React.ReactNode;
-    /** Export hook — host persists the rendered blob (upload → asset row). */
-    onExport?(result: {
-        pageId: string;
-        format: 'png' | 'jpeg';
-        dataUrl: string;
-        pixelRatio: number;
-    }): Promise<void>;
-    /**
-     * Optional caller-supplied default for the export popover. The chrome's
-     * Export control opens with this format/scale pre-selected. Omitted →
-     * PNG @ 1x.
-     */
-    exportDefaults?: ExportTriggerOptions;
-    className?: string;
-    /** Fit the active page to the viewport once, on the first non-zero measurement. Default true. Set false to keep zoom:1/pan:0 (e.g. when restoring a saved viewport). */
-    fitOnMount?: boolean;
-    /** Called once after the first real (non-zero) measurement, after the initial fit is applied (or skipped when fitOnMount is false). */
-    onReady?(): void;
-}
-
-/**
- * Undo/redo command stack over immutable `EditorSceneState`.
- *
- * History entries hold COMMANDS (state transforms + durable operations
- * captured at construction), never snapshots. Rebasing the document via
- * `reset()` therefore cannot stale the history: a later undo re-applies the
- * inverse transform to whatever document is current. If the rebase removed an
- * element a historical command targets, that transform throws (fail loud)
- * rather than silently editing the wrong element.
- *
- * `setView` updates volatile view state (zoom/pan/selection/toggles) without
- * touching history — view changes are never undo steps.
- */
-
-/** Oldest entries are dropped past this bound; redo stack is cleared on execute. */
-declare const SCENE_COMMAND_HISTORY_LIMIT = 200;
-declare function createSceneCommandStack(document: SceneDocument, activePageId: string): SceneCommandStack;
-
-interface AddElementInput {
-    pageId: string;
-    element: SceneElement;
-    /** Insertion z-index within owner; omitted → top. */
-    index?: number;
-    /** Parent group id; omitted → page root. */
-    parentGroupId?: string;
-}
-declare function addElementCommand(input: AddElementInput): SceneCommand;
-interface SetAttrsInput {
-    pageId: string;
-    elementId: string;
-    /** Final attribute values after the gesture. */
-    attrs: SceneAttrsPatch;
-    /** Attribute values BEFORE the gesture began — inverse is built from these. */
-    priorAttrs: SceneAttrsPatch;
-}
-declare function setAttrsCommand(input: SetAttrsInput): SceneCommand;
-interface MultiSetAttrsEntry {
-    pageId: string;
-    elementId: string;
-    attrs: SceneAttrsPatch;
-    priorAttrs: SceneAttrsPatch;
-}
-declare function multiSetAttrsCommand(entries: MultiSetAttrsEntry[]): SceneCommand;
-interface ReorderElementInput {
-    pageId: string;
-    elementId: string;
-    toIndex: number;
-}
-declare function reorderElementCommand(input: ReorderElementInput): SceneCommand;
-interface DeleteElementInput {
-    document: SceneDocument;
-    pageId: string;
-    elementId: string;
-}
-declare function deleteElementCommand(input: DeleteElementInput): SceneCommand;
-interface GroupElementsInput {
-    document: SceneDocument;
-    pageId: string;
-    elementIds: string[];
-    groupId: string;
-    name?: string;
-}
-declare function groupElementsCommand(input: GroupElementsInput): SceneCommand;
-interface UngroupElementInput {
-    document: SceneDocument;
-    pageId: string;
-    groupId: string;
-}
-declare function ungroupElementCommand(input: UngroupElementInput): SceneCommand;
-interface AddPageInput {
-    pageId: string;
-    options?: NewPageOptions;
-    index?: number;
-}
-declare function addPageCommand(input: AddPageInput): SceneCommand;
-interface DuplicatePageInput {
-    document: SceneDocument;
-    sourcePageId: string;
-    /** Caller-minted id for the copy. */
-    pageId: string;
-}
-declare function duplicatePageCommand(input: DuplicatePageInput): SceneCommand;
-interface DeletePageInput {
-    document: SceneDocument;
-    pageId: string;
-}
-declare function deletePageCommand(input: DeletePageInput): SceneCommand;
-interface ReorderPageInput {
-    pageId: string;
-    toIndex: number;
-}
-declare function reorderPageCommand(input: ReorderPageInput): SceneCommand;
-interface SetPagePropsInput {
-    document: SceneDocument;
-    pageId: string;
-    props: {
-        name?: string;
-        width?: number;
-        height?: number;
-        background?: string;
-        bleed?: PageBleed | null;
-    };
-}
-declare function setPagePropsCommand(input: SetPagePropsInput): SceneCommand;
-interface SetPageGuidesInput {
-    document: SceneDocument;
-    pageId: string;
-    guides: PageGuides;
-}
-declare function setPageGuidesCommand(input: SetPageGuidesInput): SceneCommand;
-interface BindSlotInput {
-    document: SceneDocument;
-    pageId: string;
-    elementId: string;
-    slot: string | null;
-}
-declare function bindSlotCommand(input: BindSlotInput): SceneCommand;
-interface SetDocumentTitleInput {
-    document: SceneDocument;
-    title: string;
-}
-declare function setDocumentTitleCommand(input: SetDocumentTitleInput): SceneCommand;
-
-/**
- * 2-axis snap engine for the design-canvas editor. Targets come from element
- * AABBs (edges + centers), page edges + center, saved guides, and grid lines
- * near the moving bounds. Grid lines are generated lazily in the neighborhood
- * of the moving element, not the full page — avoids allocating thousands of
- * targets on large pages with fine grids.
- *
- * Threshold is a SCREEN distance (pixels), divided by zoom to convert to
- * document units — what "feels close" is a screen distance.
- *
- * Tie-breaking: non-grid kinds beat grid on equal distance; among equals of
- * the same priority the first in iteration order wins.
- */
-
-declare function createSnapEngine(): SnapEngine;
-/** Generate grid line targets within a neighborhood around the moving bounds.
- *  Call this and append to `SnapTargets.vertical`/`horizontal` before
- *  passing to `apply()` when `state.gridEnabled`. */
-declare function collectGridTargets(bounds: Bounds, gridSize: number, page: ScenePage, thresholdDocPx: number): {
-    vertical: SnapTarget[];
-    horizontal: SnapTarget[];
-};
-
-/**
- * Selection math for the design-canvas editor: marquee hit-tests, keyboard
- * nudge deltas, and the duplicate offset constant. Pure functions — no DOM, no
- * Konva, no React.
- *
- * Marquee inclusion: by default any element whose AABB intersects the marquee
- * rect is included (the "touch" model). Pass `requireFullContainment: true` for
- * the "surround" model where the marquee must fully contain the element. Locked
- * and invisible elements are never selected regardless.
- */
-
-/**
- * Top-most selectable element whose AABB contains the document-space point, or
- * null when the point is over empty space.
- *
- * This is the authoritative "is the pointer over an element?" test for the
- * pointer-down gesture router. It runs against the scene model in document
- * coordinates rather than Konva's hit-graph canvas, so it is independent of
- * clip groups, listening flags, and hit-canvas redraw timing — all of which
- * could make `stage.getIntersection` misclassify a press as empty space and
- * silently start a marquee instead of an element drag.
- *
- * Z-order: later elements paint on top, so we scan the array in reverse and
- * return the first hit. Groups descend into children (top child wins); a hit on
- * a group child resolves to the group itself, matching drag/selection which
- * operate on the group as a unit. Locked and invisible elements never hit.
- */
-declare function hitTestPoint(page: ScenePage, x: number, y: number): string | null;
-interface MarqueeSelectOptions {
-    /** When true, the element's AABB must be fully inside the marquee; default is
-     *  intersection (any overlap selects). */
-    requireFullContainment?: boolean;
-}
-/** Returns the ids of selectable elements on `page` whose AABB intersects (or
- *  is contained by) `rect`. Locked and invisible elements are excluded. */
-declare function marqueeSelect(page: ScenePage, rect: Bounds, opts?: MarqueeSelectOptions): string[];
-interface NudgeDelta {
-    dx: number;
-    dy: number;
-}
-/** Map an arrow key to a document-px delta. `shift` engages the 10× step.
- *  Throws on unknown keys so callers handle only real nudge keys. */
-declare function nudgeDelta(key: 'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'ArrowDown', shift: boolean): NudgeDelta;
-/** Document-px offset applied to duplicated elements so the copy is visually
- *  separated from the original (matching common design-tool convention). */
-declare const DUPLICATE_OFFSET: NudgeDelta;
-
-/**
- * Zoom + pan coordinate math for the design-canvas editor. Zoom is pixels-per-
- * document-px (e.g. 2 = 200% magnification). The key invariant for wheel-zoom
- * is that the document point under the cursor stays fixed in screen space:
- *
- *   docPoint = (screenPoint - pan) / zoom
- *   newPan   = screenPoint - docPoint * newZoom
- *
- * This module is pure math — no DOM, no Konva, no React.
- */
-
-interface ZoomPanConfig {
-    minZoom: number;
-    maxZoom: number;
-}
-declare function createZoomPanMath(config: ZoomPanConfig): ZoomPanMath;
-
-/**
- * Pure export math for the design-canvas surface — no Konva, no DOM, no React.
- *
- * All stage-interaction code (save/restore, node visibility, toDataURL) lives
- * in export.ts and delegates the decision math here so it can be tested
- * without a canvas environment.
- */
-
-/** Returns true for any Konva node that must be hidden during export. Nodes
- *  whose names start with 'overlay:' are editor-only chrome (snap lines,
- *  selection indicators, rulers, bleed guides). The transformer node is
- *  identified by its canonical name 'Transformer'. */
-declare function isExportHiddenNodeName(name: string): boolean;
-interface ResolvedExportParams {
-    cropRect: ExportCropRect;
-    pixelRatio: number;
-    mimeType: 'image/png' | 'image/jpeg';
-    quality: number | undefined;
-}
-/**
- * Resolve the full set of toDataURL params from a page, format, pixel ratio,
- * bleed flag, and optional preset. When a preset is supplied it overrides
- * `pixelRatio` and `includeBleed` — the explicit args are ignored for those
- * two values so the preset is the single source of truth.
- *
- * `quality` is set to 0.92 for jpeg, undefined for png (Konva ignores it).
- */
-declare function resolveExportParams(page: ScenePage, opts: {
-    format: 'png' | 'jpeg';
-    pixelRatio?: number;
-    includeBleed?: boolean;
-    preset?: ExportPreset;
-}): ResolvedExportParams;
-/**
- * Walk image nodes to find the src of any that may have caused a SecurityError
- * when the stage called toDataURL. Returns the first offending src found, or
- * null if none can be identified.
- *
- * `imageSrcs` is a flat list of { name, src } records collected from all image
- * nodes on the stage before calling toDataURL — export.ts builds it before
- * attempting the export so that if the SecurityError fires we have the data.
- */
-declare function identifyTaintedSrc(imageSrcs: ReadonlyArray<{
-    name: string;
-    src: string;
-}>): string | null;
-/**
- * Heuristic: a src is potentially cross-origin when it is an absolute http(s)
- * URL. Same-origin relative paths (/api/...) and data: blobs are safe.
- * This is intentionally conservative — the taint check runs only after a
- * SecurityError fires, so a false positive is "blamed" without being silently
- * ignored. NOTE: same-origin https:// assets will also match; if a
- * SecurityError fires, the cross-origin culprit may be a different image than
- * the one this function flags first.
- */
-declare function isCrossOriginSrc(src: string): boolean;
-/** Minimal snapshot of stage view state that export.ts saves before mutating
- *  zoom/pan/visibility and restores afterward. */
-interface ExportViewSnapshot {
-    /** Stage scale factor before export. */
-    scaleX: number;
-    scaleY: number;
-    /** Stage translation before export. */
-    x: number;
-    y: number;
-    /** node name → prior visibility, for the nodes that were hidden. */
-    hiddenNodeNames: string[];
-}
-/**
- * Build the toDataURL crop rect translated to stage output coordinates.
- * Konva's `stage.toDataURL({ x, y, width, height })` takes STAGE OUTPUT
- * coordinates, not document coordinates. When the stage has been scaled to fit
- * (zoom × stageScale), the crop rect in document px must be multiplied by the
- * combined scale to land on the right pixels.
- *
- * `stageScale` is the stage's current uniform scale (scaleX == scaleY);
- * `pixelRatio` is separate and handed directly to toDataURL — Konva multiplies
- * it internally when rendering to the backing canvas, so we must NOT include
- * it in the stage-coordinate rect.
- */
-declare function documentCropToStageCoords(cropRect: ExportCropRect, stageScale: number, stageX: number, stageY: number): {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-};
-
 /**
  * Client-side export for design-canvas pages: raster (PNG/JPEG via Konva
  * stage.toDataURL) and JSON (document serialisation).
@@ -589,126 +87,6 @@ declare function exportDocumentJson(document: SceneDocument): string;
  */
 declare function downloadDataUrl(dataUrl: string, filename: string): void;
 
-/**
- * Pure builders for the human "add element to the canvas" path — the math and
- * `SceneOperation` construction behind {@link CanvasInsertPanel}, separated from
- * the React/DOM layer so every insert is unit-testable without Konva or a
- * browser. The panel calls these to produce `add_element` operations and hands
- * them to the host's `onApplyOperations` (server-validated, undoable) — the same
- * pipeline every other edit flows through.
- *
- * Media boundary: image inserts must pass {@link assertSceneMediaSrc} (remote
- * http(s) or a rooted `/api/` path — never `data:` blobs or sandbox-local
- * files). Builders that take a src assert it up front so a bad url fails here,
- * not deep in the apply layer.
- */
-
-/** Largest dimension (document px) a freshly inserted element is fitted to,
- *  before the page-size cap applies. Keeps a huge upload from filling the page. */
-declare const MAX_INSERT_DIMENSION = 600;
-/** Active page geometry an insert lands into — drives centering and fitting. */
-interface InsertPageGeometry {
-    pageId: string;
-    width: number;
-    height: number;
-}
-/** Mint a DOM-safe element id. Prefers `crypto.randomUUID`; falls back to a
- *  time+random id where crypto is unavailable (older runtimes, some test envs). */
-declare function mintElementId(): string;
-/** Fit (naturalW, naturalH) under a max-dimension cap (further bounded by the
- *  page), preserving aspect ratio. Never upscales past natural size. */
-declare function fittedSize(naturalW: number, naturalH: number, pageWidth: number, pageHeight: number): {
-    width: number;
-    height: number;
-};
-/** Top-left position that centers a (width, height) box on the page. */
-declare function centeredPosition(width: number, height: number, pageWidth: number, pageHeight: number): {
-    x: number;
-    y: number;
-};
-/**
- * Build an `add_element` op placing an image, fitted and centered on the page.
- * `naturalSize` is the probed image dimensions (the panel reads them in the
- * browser); pass `{ width: 0, height: 0 }` when unknown to fall back to the cap.
- *
- * Throws (via `assertSceneMediaSrc`) when `src` is not http(s) or a rooted
- * `/api/` path — callers should surface the error, never insert a `data:` src.
- */
-declare function buildInsertImageOp(src: string, naturalSize: {
-    width: number;
-    height: number;
-}, page: InsertPageGeometry): SceneOperation;
-/** A template the insert panel can drop without the agent. `build` is pure and
- *  produces the operations for the active page geometry. */
-interface InsertTemplate {
-    id: string;
-    label: string;
-    build(page: InsertPageGeometry): SceneOperation[];
-}
-/** The built-in starter templates (heading, body text, rectangle, ellipse).
- *  Consumers can pass their own list to {@link CanvasInsertPanel}; this is the
- *  default so every canvas gets a usable set out of the box. */
-declare const DEFAULT_INSERT_TEMPLATES: readonly InsertTemplate[];
-
-/** Callers inject a workspace renderer so this chrome stays Konva-free. The
- *  workspace occupies the scrollable area between the rulers and the bottom bar. */
-interface DesignCanvasFullProps extends DesignCanvasProps {
-    /**
-     * Render the Konva canvas workspace into the slot this shell provides.
-     * The shell passes viewport dimensions, view-state, and the shared command
-     * stack so `WorkspaceView` can commit gestures through the same stack the
-     * chrome uses for undo/redo and layers-panel selection.
-     *
-     * `onFitRef` is a ref the workspace fills with a fit-page callback; the
-     * shell calls it when the user presses F or clicks the Fit button.
-     */
-    renderWorkspace(ctx: {
-        document: SceneDocument;
-        activePageId: string;
-        selectedElementIds: string[];
-        zoom: number;
-        panX: number;
-        panY: number;
-        gridEnabled: boolean;
-        gridSize: number;
-        snapEnabled: boolean;
-        showBleed: boolean;
-        canWrite: boolean;
-        /** The chrome's command stack. Pass to WorkspaceView so gestures, undo,
-         *  and layers-panel selection share a single state machine. */
-        stack: ReturnType<typeof createSceneCommandStack>;
-        activePage: SceneDocument['pages'][number] | undefined;
-        onFitRef: React.MutableRefObject<(() => void) | null>;
-        /** A ref the workspace fills with an export callback. The chrome's Export
-         *  control calls it with the chosen format/scale; the workspace renders the
-         *  Konva stage to a data URL and forwards the result to `onExport`. Filled
-         *  only when `onExport` is wired (the workspace skips it otherwise). */
-        onExportRef: React.MutableRefObject<((opts: ExportTriggerOptions) => void) | null>;
-        /** Forwarded from DesignCanvasProps. Default true: WorkspaceView fits the
-         *  active page to the viewport once, on the first non-zero measurement. */
-        fitOnMount?: boolean;
-        /** Forwarded from DesignCanvasProps. Fires once after the first real
-         *  measurement, after the initial fit is applied (or skipped). */
-        onReady?(): void;
-        onZoomChange(zoom: number): void;
-        onPanChange(panX: number, panY: number): void;
-        onSelectElements(ids: string[], additive: boolean): void;
-    }): React.ReactNode;
-    /**
-     * Generates page thumbnails for the PagesStrip. Injected by the integrator
-     * (who has Konva access) so the chrome doesn't import Konva directly.
-     */
-    renderThumbnail(page: SceneDocument['pages'][number]): Promise<string | null>;
-}
-declare function DesignCanvas({ document: initialDocument, rev: initialRev, canWrite, mode, onApplyOperations, onSelectionChange, renderAgentPanel, renderSidePanel, onExport, exportDefaults, className, fitOnMount, onReady, renderWorkspace, renderThumbnail, }: DesignCanvasFullProps): react.JSX.Element;
-
-/**
- * Mount this component to get the full editor: toolbar, rulers, layers panel,
- * pages strip, zoom controls, and the Konva canvas — all sharing one command
- * stack so undo/redo and selection are coherent across every surface.
- */
-declare function DesignCanvasEditor(props: DesignCanvasProps): react.JSX.Element;
-
 /** An already-generated image the panel can offer for one-click insertion. */
 interface InsertGeneration {
     id: string;
@@ -762,8 +140,10 @@ interface WorkspaceViewProps {
     fitOnMount?: boolean;
     /** Called once after the first real (non-zero) measurement, after the initial fit is applied (or skipped). */
     onReady?(): void;
+    /** Konva render palette. Omitted → light defaults (byte-identical history). */
+    render?: CanvasRenderPalette;
 }
-declare function WorkspaceView({ canWrite, onApplyOperations, onSelectionChange, className, stack, activePage, onFitRef, onExport, onExportRef, fitOnMount, onReady, }: WorkspaceViewProps): react.JSX.Element;
+declare function WorkspaceView({ canWrite, onApplyOperations, onSelectionChange, className, stack, activePage, onFitRef, onExport, onExportRef, fitOnMount, onReady, render, }: WorkspaceViewProps): react.JSX.Element;
 /**
  * Self-contained Konva workspace that creates its own command stack. Mount
  * this when you want the canvas without the toolbar/rulers/pages-strip chrome.
@@ -786,8 +166,10 @@ interface SelectionLayerProps {
     onTransformEnd(entries: MultiSetAttrsEntry[]): void;
     /** Active page id — every entry in onTransformEnd carries this. */
     pageId: string;
+    /** Theme render palette. Omitted → light defaults (byte-identical history). */
+    render?: CanvasRenderPalette;
 }
-declare function SelectionLayer({ stageRef, selectedIds, selectedElements, canWrite, onTransformEnd, pageId, }: SelectionLayerProps): react.JSX.Element;
+declare function SelectionLayer({ stageRef, selectedIds, selectedElements, canWrite, onTransformEnd, pageId, render, }: SelectionLayerProps): react.JSX.Element;
 
 interface PagesStripProps {
     pages: ScenePage[];
@@ -877,6 +259,20 @@ interface ZoomControlsProps {
 }
 declare function ZoomControls({ zoom, onZoom, onFit }: ZoomControlsProps): react.JSX.Element;
 
+/** 28px square (h-7) — used by the main toolbar. */
+declare const BTN = "flex h-7 w-7 items-center justify-center rounded border border-[var(--border-default)] text-[var(--text-secondary)] transition hover:text-[var(--text-primary)] focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-input)] disabled:cursor-default disabled:opacity-40";
+declare const BTN_ACTIVE: string;
+/** 24px square (h-6) — used by the zoom controls and pages strip. */
+declare const BTN_SM = "flex h-6 w-6 items-center justify-center rounded border border-[var(--border-default)] text-[var(--text-secondary)] transition hover:text-[var(--text-primary)] focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-input)] disabled:cursor-default disabled:opacity-40";
+declare const BTN_SM_ACTIVE: string;
+interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Render the active (brand-colored) variant. */
+    active?: boolean;
+    /** 'md' = 28px (toolbar), 'sm' = 24px (zoom/pages). */
+    size?: 'md' | 'sm';
+}
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
 interface ExportControlProps {
     /** Pre-selected format/scale when the popover opens. Default PNG @ 1x. */
     defaults?: ExportTriggerOptions;
@@ -890,22 +286,47 @@ interface ElementNodeProps {
     element: SceneElement;
     isSelected: boolean;
     zoom: number;
+    /** Theme render palette. Omitted → light defaults (byte-identical history). */
+    render?: CanvasRenderPalette;
     onClick?(elementId: string): void;
     onDragStart?(elementId: string): void;
     onDragMove?(elementId: string, dx: number, dy: number): void;
     onDragEnd?(elementId: string, finalX: number, finalY: number): void;
     onDoubleClick?(elementId: string): void;
 }
-declare function ElementNode(props: ElementNodeProps): react.JSX.Element | null;
+declare function ElementNodeImpl(props: ElementNodeProps): react.JSX.Element | null;
+/**
+ * Memoized so a `stack.notify()` (fired ~120/s during a pan/marquee) that
+ * re-renders WorkspaceView does NOT re-render every element. With stable
+ * handler identities supplied by WorkspaceView, an ElementNode re-renders only
+ * when its OWN `element` reference, `isSelected`, `zoom`, or `render` palette
+ * change — i.e. when it actually moved, was (de)selected, or the view scaled.
+ * Pan-only frames change none of these props, so the N nodes stay reconciled.
+ */
+declare const ElementNode: react.MemoExoticComponent<typeof ElementNodeImpl>;
 
 /**
- * Grid overlay rendered beneath page content. Uses Konva.Layer with Konva.Line
- * nodes at `gridSize` document-px spacing, scaled by zoom. Grid lines are
- * skipped entirely when they would be closer than 4 screen pixels apart —
- * below that density the grid becomes visual noise rather than guidance.
+ * Grid overlay rendered beneath page content. The whole grid is painted by a
+ * SINGLE Konva node — a custom Shape whose `sceneFunc` strokes every grid line
+ * in one pass — rather than one Konva.Line per line. At ~hundreds of lines on a
+ * page this turns a per-pan-frame reconciliation of hundreds of React/Konva
+ * nodes into a single node whose only changing props are the transform; panning
+ * no longer churns the scene graph.
+ *
+ * Grid lines are skipped entirely when they would be closer than 4 screen
+ * pixels apart — below that density the grid becomes visual noise rather than
+ * guidance (gridVisible density-skip, unchanged).
+ *
+ * COORDINATE SYSTEM: the lines are authored in document space and wrapped in a
+ * Group carrying the SAME (panX, panY, zoom) transform the content layer uses,
+ * so the grid tracks the page exactly on pan and zoom. A Konva.Layer cannot
+ * live inside a Group, so the transform is applied to an inner Group, not the
+ * Layer. The grid is its own Layer (not merged into the content Layer) so the
+ * content draws on top without per-frame z-ordering churn.
  *
- * All nodes carry the name prefix 'overlay:' so export logic can exclude this
- * layer from rasterization.
+ * EXPORT EXCLUSION: the Layer carries the name prefix 'overlay:' and the Shape
+ * is named 'overlay:grid-shape' so export logic excludes the whole grid from
+ * rasterization.
  */
 interface GridLayerProps {
     /** Page width in document px. */
@@ -916,12 +337,16 @@ interface GridLayerProps {
     gridSize: number;
     /** Screen px per document px. */
     zoom: number;
+    /** Horizontal pan offset in screen px (content Group x). */
+    panX: number;
+    /** Vertical pan offset in screen px (content Group y). */
+    panY: number;
     /** Grid line color. */
     color?: string;
     /** Grid line opacity (0–1). */
     opacity?: number;
 }
-declare function GridLayer({ pageWidth, pageHeight, gridSize, zoom, color, opacity, }: GridLayerProps): react.JSX.Element | null;
+declare function GridLayer({ pageWidth, pageHeight, gridSize, zoom, panX, panY, color, opacity, }: GridLayerProps): react.JSX.Element | null;
 
 interface RulersProps {
     /** Page width in document px. */
@@ -1089,9 +514,4 @@ declare function buildRulerTicks(input: {
  *  decimals are rounded to 1 place. Values ≥ 1000 are compacted to "1k" etc. */
 declare function formatRulerLabel(value: number): string;
 
-/** Batteries-included editor: chrome + workspace on one shared stack. */
-declare const DesignCanvasLazy: react.LazyExoticComponent<typeof DesignCanvasEditor>;
-/** Raw chrome only — use when supplying a custom renderWorkspace/renderThumbnail. */
-declare const DesignCanvasChromeLazy: react.LazyExoticComponent<typeof DesignCanvas>;
-
-export { type AddElementInput, type AddPageInput, type ApplySceneResult, type BakedNodeAttrs, type BindSlotInput, CanvasInsertPanel, type CanvasInsertPanelProps, DEFAULT_INSERT_TEMPLATES, DUPLICATE_OFFSET, type DeleteElementInput, type DeletePageInput, DesignCanvas, DesignCanvasChromeLazy, DesignCanvasEditor, type DesignCanvasFullProps, DesignCanvasLazy, type DesignCanvasMode, type DesignCanvasProps, type DuplicatePageInput, type EditorSceneState, ElementNode, type ElementNodeProps, ExportControl, type ExportControlProps, ExportCropRect, type ExportPageDataUrlOptions, ExportPreset, type ExportTriggerOptions, type ExportViewSnapshot, GridLayer, type GridLayerProps, type GroupElementsInput, type InsertGeneration, type InsertPageGeometry, type InsertTemplate, LAYERS_PANEL_ROW_LIMIT, type LayerRow, LayersPanel, type LayersPanelProps, MAX_INSERT_DIMENSION, type MarqueeSelectOptions, type MultiSetAttrsEntry, type NudgeDelta, PagesStrip, type PagesStripProps, type ReorderElementInput, type ReorderPageInput, type ResolvedExportParams, type RulerTick, Rulers, type RulersProps, SCENE_COMMAND_HISTORY_LIMIT, type SceneCommand, type SceneCommandStack, SelectionLayer, type SelectionLayerProps, type SetAttrsInput, type SetDocumentTitleInput, type SetPageGuidesInput, type SetPagePropsInput, type SnapEngine, type SnapResult, type SnapTarget, type SnapTargetKind, type SnapTargets, type TickStep, Toolbar, type ToolbarProps, type TransformerNode, type UngroupElementInput, Workspace, WorkspaceView, type WorkspaceViewProps, ZoomControls, type ZoomControlsProps, type ZoomPanConfig, type ZoomPanMath, addElementCommand, addPageCommand, bakeLineTransform, bakeRectTransform, bakeTextTransform, bindSlotCommand, buildInsertImageOp, buildRulerTicks, centeredPosition, collectGridTargets, createSceneCommandStack, createSnapEngine, createZoomPanMath, deleteElementCommand, deletePageCommand, documentCropToStageCoords, downloadDataUrl, duplicatePageCommand, exportDocumentJson, exportPageDataUrl, fittedSize, flattenLayerTree, formatRulerLabel, groupElementsCommand, hitTestPoint, identifyTaintedSrc, isCrossOriginSrc, isExportHiddenNodeName, marqueeSelect, mintElementId, multiSetAttrsCommand, nudgeDelta, reorderElementCommand, reorderPageCommand, resolveExportParams, selectTickStep, setAttrsCommand, setDocumentTitleCommand, setPageGuidesCommand, setPagePropsCommand, ungroupElementCommand };
+export { BTN, BTN_ACTIVE, BTN_SM, BTN_SM_ACTIVE, type BakedNodeAttrs, CanvasInsertPanel, type CanvasInsertPanelProps, DesignCanvasMode, DesignCanvasProps, ElementNode, type ElementNodeProps, ExportControl, type ExportControlProps, type ExportPageDataUrlOptions, ExportPreset, ExportTriggerOptions, GridLayer, type GridLayerProps, IconButton, type IconButtonProps, type InsertGeneration, InsertPageGeometry, InsertTemplate, LAYERS_PANEL_ROW_LIMIT, type LayerRow, LayersPanel, type LayersPanelProps, MultiSetAttrsEntry, PagesStrip, type PagesStripProps, type RulerTick, Rulers, type RulersProps, SelectionLayer, type SelectionLayerProps, type TickStep, Toolbar, type ToolbarProps, type TransformerNode, Workspace, WorkspaceView, type WorkspaceViewProps, ZoomControls, type ZoomControlsProps, bakeLineTransform, bakeRectTransform, bakeTextTransform, buildRulerTicks, createSceneCommandStack, downloadDataUrl, exportDocumentJson, exportPageDataUrl, flattenLayerTree, formatRulerLabel, selectTickStep };