@tangle-network/agent-app 0.45.53 → 0.45.55

package/dist/design-canvas-react/components/Workspace.d.ts

@@ -0,0 +1,92 @@
+/**
+ * Konva Stage host for the design-canvas editor. Renders the active page
+ * (background rect + element nodes), wires all interaction gestures, and
+ * delegates persistence through the command stack.
+ *
+ * COORDINATE SYSTEM:
+ * The Konva stage sits at (0,0) in screen space. The content Layer group is
+ * translated by (panX, panY) and scaled by (zoom, zoom). Document coordinates
+ * map to screen via: screenX = panX + docX * zoom.
+ *
+ * GESTURES (mutually exclusive; escape cancels any live gesture):
+ * - Wheel: zoom-to-cursor via ZoomPanMath.zoomAtPoint; setView only.
+ * - Middle-button drag / space+drag: pan; setView only.
+ * - Empty-space drag: marquee selection; setView only.
+ * - Element drag: move via onDragMove preview + onDragEnd command.
+ * - Transformer: resize/rotate; handled by SelectionLayer.
+ * - Double-click on text: opens InlineTextEditor.
+ *
+ * KEYBOARD (active when canvas wrapper div is focused):
+ * - delete/backspace → deleteElementCommand for each selected id.
+ * - arrows → nudge (shift ×10); ONE command emitted on keyup (coalescing).
+ * - mod+z / shift+mod+z → undo / redo.
+ * - mod+d → duplicate selection at +10,+10 offset.
+ * - mod+g → group selection (≥2 elements).
+ * - shift+mod+g → ungroup selected group.
+ * - mod+a → select all on current page.
+ * - escape → cancel live gesture or clear selection.
+ *
+ * POINTER CAPTURE: marquee and pan gestures call setPointerCapture on the
+ * wrapper div so drag events don't escape on fast pointer moves.
+ *
+ * DEVICEPIXELRATIO: Konva's pixelRatio prop multiplies the backing canvas
+ * resolution for crisp rendering at any DPR.
+ *
+ * Composition:
+ * - `WorkspaceView` is the injectable form: receives a pre-created stack and
+ *   a guaranteed non-null activePage, commits all gestures through that shared
+ *   stack. `DesignCanvasEditor` passes the chrome's stack here so undo/redo
+ *   and layers-panel selection stay coherent across both surfaces.
+ * - `Workspace` is the standalone wrapper: creates its own stack and renders
+ *   WorkspaceView. Existing consumers (tests, bare embeds) mount this without
+ *   any chrome.
+ */
+import type { DesignCanvasProps, ExportTriggerOptions } from '../contracts';
+import { createSceneCommandStack } from '../engine/command-stack';
+import type { ScenePage } from '../../design-canvas/model';
+import { type CanvasRenderPalette } from '../../theme/theme';
+export interface WorkspaceViewProps {
+    /** The command stack this view commits gestures through. Must be the same
+     *  instance the chrome (DesignCanvasEditor) owns so undo/redo and layers-
+     *  panel selection are coherent. */
+    stack: ReturnType<typeof createSceneCommandStack>;
+    /** Active page resolved before render — WorkspaceView has no conditional
+     *  hook guards; the caller ensures this is never null. */
+    activePage: ScenePage;
+    canWrite: boolean;
+    onApplyOperations: DesignCanvasProps['onApplyOperations'];
+    onSelectionChange?: DesignCanvasProps['onSelectionChange'];
+    className?: string;
+    /** Ref the chrome fills with a fit-page callback. The chrome calls it on F /
+     *  Fit button; when injected via DesignCanvasEditor the ref is shared. */
+    onFitRef?: React.MutableRefObject<(() => void) | null>;
+    /** Host export hook. When set, the workspace fills `onExportRef` with a
+     *  callback that renders the stage to a data URL and forwards the result. */
+    onExport?: DesignCanvasProps['onExport'];
+    /** Ref the workspace fills with an export callback `(opts) => void`. The
+     *  chrome's Export control calls it; the workspace owns the Konva stage so it
+     *  produces the data URL here. Filled only when `onExport` is also set. */
+    onExportRef?: React.MutableRefObject<((opts: ExportTriggerOptions) => void) | null>;
+    /** Fit the active page to the viewport once, on the first non-zero measurement. Default true. */
+    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;
+    /** Show the branded in-canvas empty state (three doors) while the active page
+     *  has no elements and the user can write. Default true. Set false to keep a
+     *  bare blank stage (e.g. when restoring a saved-but-intentionally-empty page). */
+    showEmptyState?: boolean;
+    /** Focus/open the agent from the empty state's "Ask the agent" door. When
+     *  omitted that door is hidden — there is no agent surface to send them to. */
+    onAskAgent?(): void;
+}
+export declare function WorkspaceView({ canWrite, onApplyOperations, onSelectionChange, className, stack, activePage, onFitRef, onExport, onExportRef, fitOnMount, onReady, render, showEmptyState, onAskAgent, }: WorkspaceViewProps): import("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.
+ *
+ * Products that want the full editor (chrome + workspace sharing one stack)
+ * should mount `DesignCanvasEditor` instead.
+ */
+export declare function Workspace(props: DesignCanvasProps): import("react").JSX.Element | null;

package/dist/design-canvas-react/components/ZoomControls.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Canvas zoom controls: fit-to-page, 100%, zoom-out/in buttons, and a percent
+ * readout. Stateless — zoom lives in the editor's view state, updated through
+ * onZoom.
+ */
+export interface ZoomControlsProps {
+    zoom: number;
+    onZoom(zoom: number): void;
+    onFit(): void;
+    /** Label/aria for the fit action. Defaults to "Fit to screen" — shorter and
+     *  matching every other tool's wording for the same action. */
+    fitLabel?: string;
+}
+export declare function ZoomControls({ zoom, onZoom, onFit, fitLabel }: ZoomControlsProps): import("react").JSX.Element;

package/dist/design-canvas-react/components/glyphs.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Inline SVG glyphs for the design canvas editor. No external icon dependency —
+ * same convention as sequences-react/components/glyphs.tsx.
+ */
+interface GlyphProps {
+    className?: string;
+}
+export declare const UndoGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const RedoGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const SwapGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const EyeGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const EyeOffGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const LockGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const UnlockGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const TrashGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const GroupGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const UngroupGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const BringFrontGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const SendBackGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const AlignLeftGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const AlignCenterGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const AlignRightGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const BoldGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const ItalicGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const PlusGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const MinusGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const ChevronDownGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const RectGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const EllipseGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const LineGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const TextGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const ImageGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const VideoGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+/** A slot binding point: a socket plate with a keyhole notch — the outlet an
+ *  `apply_data` payload plugs into. Reads at h-3 where the old sunburst did not. */
+export declare const SlotGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const PageGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const GridGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const RulerGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const MagnetGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const BleedGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const DuplicateGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const ZoomFitGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const ExportGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export declare const ShapesGlyph: ({ className }: GlyphProps) => import("react").JSX.Element;
+export {};

package/dist/design-canvas-react/components/icon-button.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Shared icon-button contract for the canvas chrome (Toolbar, ZoomControls,
+ * PagesStrip). One definition so the focus ring, disabled affordance, and
+ * active state can never drift between surfaces.
+ *
+ * The focus ring uses the `--ring` token (defined in src/theme/tokens.css) and
+ * is keyboard-only (`focus-visible`) so mouse clicks don't draw a ring.
+ */
+import type { ButtonHTMLAttributes } from 'react';
+/** 28px square (h-7) — used by the main toolbar. */
+export 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)] disabled:cursor-default disabled:opacity-40";
+export declare const BTN_ACTIVE: string;
+/** 24px square (h-6) — used by the zoom controls and pages strip. */
+export 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)] disabled:cursor-default disabled:opacity-40";
+export declare const BTN_SM_ACTIVE: string;
+export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Render the active (brand-colored) variant. */
+    active?: boolean;
+    /** 'md' = 28px (toolbar), 'sm' = 24px (zoom/pages). */
+    size?: 'md' | 'sm';
+}
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,27 @@
+/**
+ * Design canvas editor component surface. `DesignCanvas` is the root component
+ * products mount (see `../lazy` for the code-split entry). Leaf components are
+ * exported for products that compose a custom editor shell from the same parts.
+ *
+ * Konva is an optional peer — all Konva-dependent components use it only
+ * at render time so this index is safe to import in server bundles (tree-
+ * shaking removes the Konva paths if they are never rendered).
+ */
+export { DesignCanvas, type DesignCanvasFullProps } from './DesignCanvas';
+export { DesignCanvasEditor } from './DesignCanvasEditor';
+export { CanvasInsertPanel, type CanvasInsertPanelProps, type InsertGeneration, } from './CanvasInsertPanel';
+export { Workspace, WorkspaceView, type WorkspaceViewProps } from './Workspace';
+export { CanvasEmptyState, type CanvasEmptyStateProps } from './CanvasEmptyState';
+export { SelectionLayer, type SelectionLayerProps } from './SelectionLayer';
+export { PagesStrip, type PagesStripProps } from './PagesStrip';
+export { LayersPanel, type LayersPanelProps } from './LayersPanel';
+export { Toolbar, type ToolbarProps } from './Toolbar';
+export { ZoomControls, type ZoomControlsProps } from './ZoomControls';
+export { IconButton, type IconButtonProps, BTN, BTN_ACTIVE, BTN_SM, BTN_SM_ACTIVE, } from './icon-button';
+export { ExportControl, type ExportControlProps } from './ExportControl';
+export { ElementNode, type ElementNodeProps } from './ElementNode';
+export { GridLayer, type GridLayerProps } from './GridLayer';
+export { Rulers, type RulersProps } from './Rulers';
+export { flattenLayerTree, LAYERS_PANEL_ROW_LIMIT, type LayerRow, } from './layer-tree';
+export { bakeRectTransform, bakeLineTransform, bakeTextTransform, type TransformerNode, type BakedNodeAttrs, } from './transform-math';
+export { selectTickStep, buildRulerTicks, formatRulerLabel, type TickStep, type RulerTick, } from './ruler-math';

package/dist/design-canvas-react/components/layer-tree.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Pure layer-tree helpers: flatten a page's element array into an ordered list
+ * for the LayersPanel, preserving group nesting. Extracted so render order,
+ * depth, and selection math can be unit-tested independently of React.
+ */
+import type { SceneElement, ScenePage } from '../../design-canvas/model';
+/** Describe a layer row with its element, depth, grouping, ownership, and parent group details */
+export interface LayerRow {
+    element: SceneElement;
+    depth: number;
+    /** True when this row is a group whose children follow it in the list. */
+    isGroup: boolean;
+    /** Index within its owner (page.elements or group.children). */
+    ownerIndex: number;
+    /** Length of the owner array — needed for z-order bound math. */
+    ownerLength: number;
+    /** Id of the containing group, or null for page-root elements. */
+    parentGroupId: string | null;
+}
+/**
+ * Flatten `page.elements` into display order for the layers panel.
+ *
+ * Z-order is bottom→top in the element array; the layers panel shows
+ * top→bottom (highest z-index first). A group row precedes its children
+ * (the group is "above" its children in the panel, reflecting that the group
+ * node itself paints last in Konva when empty; children paint inside it).
+ *
+ * Depth increases by 1 for each group level, starting at 0 for page-root
+ * elements. Groups are expanded; collapsed state is a view concern the caller
+ * tracks separately.
+ */
+export declare function flattenLayerTree(page: ScenePage): LayerRow[];
+/** The maximum number of rows the layers panel renders before truncating. */
+export declare const LAYERS_PANEL_ROW_LIMIT = 500;

package/dist/design-canvas-react/components/ruler-math.d.ts

@@ -0,0 +1,78 @@
+/**
+ * Pure ruler tick-step and label math for the canvas rulers. Nothing here
+ * touches React or the DOM — all interaction geometry is extracted so it can
+ * be unit-tested without a browser.
+ *
+ * Canvas rulers show document-coordinate values (CSS px). Tick density adapts
+ * to the current zoom so major ticks never sit closer than `minMajorSpacingPx`
+ * screen pixels apart. The step table covers typical design zoom ranges; beyond
+ * the table the step grows by doubling the last candidate.
+ */
+/** Define spacing and visibility rules for major and minor ticks in a coordinate system */
+export interface TickStep {
+    /** Document-coordinate step between major ticks. */
+    major: number;
+    /** Document-coordinate step between minor ticks (major / 5). */
+    minor: number;
+    /** True when minor ticks should be drawn (they sit ≥ minMinorSpacingPx apart). */
+    drawMinor: boolean;
+}
+/**
+ * Select the major tick step that keeps major ticks ≥ minMajorSpacingPx apart
+ * at the given zoom. Minor ticks are rendered when they'd clear minMinorSpacingPx.
+ *
+ * Both spacing thresholds are SCREEN pixels — the caller provides `zoom` (screen
+ * px per document px) so the result is zoom-independent.
+ */
+export declare function selectTickStep(input: {
+    zoom: number;
+    minMajorSpacingPx?: number;
+    minMinorSpacingPx?: number;
+}): TickStep;
+/** Define a ruler tick with a position and optional label for measurement markings */
+export interface RulerTick {
+    /** Position in document coordinates. */
+    position: number;
+    /** Label text, or null for a minor tick. */
+    label: string | null;
+}
+/**
+ * Generate all ticks visible in a ruler of `documentLength` document-px,
+ * given the current tick step. The caller clips to the viewport; this produces
+ * all ticks for the full document extent so the ruler can be rendered
+ * declaratively without a separate clipping pass.
+ */
+export declare function buildRulerTicks(input: {
+    documentLength: number;
+    step: TickStep;
+}): RulerTick[];
+/** Format a document-px position as a compact label: integers stay whole,
+ *  decimals are rounded to 1 place. Values ≥ 1000 are compacted to "1k" etc. */
+export declare function formatRulerLabel(value: number): string;
+/**
+ * Convert a screen-coordinate pointer position to a document-coordinate guide
+ * drop position, given the ruler's scroll offset and zoom. Used by both the
+ * horizontal and vertical ruler drag-guide creation paths.
+ *
+ * `scrollOffset` is how many document-px of the ruler are scrolled off-screen
+ * to the left/top. `pointerScreenPx` is the cursor position in screen px
+ * relative to the ruler element's origin.
+ */
+export declare function screenToDocumentPosition(input: {
+    pointerScreenPx: number;
+    scrollOffset: number;
+    zoom: number;
+}): number;
+/** Snap a guide drop position to the nearest major tick if within
+ *  `snapThresholdPx` document px; otherwise returns the raw position. */
+export declare function snapGuideToTick(position: number, step: TickStep, snapThresholdPx: number): number;
+/** Index of the topmost element for a given owner length. */
+export declare function topIndex(ownerLength: number): number;
+/** Move an element one step toward the top (higher index = above in z-order).
+ *  Returns the current index unchanged if already at the top. */
+export declare function indexForward(current: number, ownerLength: number): number;
+/** Move an element one step toward the bottom (lower index = below). Returns
+ *  the current index unchanged if already at the bottom. */
+export declare function indexBackward(current: number): number;
+/** Clamp an arbitrary target index to valid range. */
+export declare function clampIndex(target: number, ownerLength: number): number;

package/dist/design-canvas-react/components/transform-math.d.ts

@@ -0,0 +1,168 @@
+/**
+ * Pure geometry helpers extracted from component drag/transform logic so
+ * every interactive math path is unit-testable without Konva or a DOM.
+ *
+ * Invariants:
+ * - All inputs and outputs are in document-coordinate pixels unless noted.
+ * - Rotation angles are degrees, clockwise, matching the Konva + model convention.
+ * - "Baking" scale into width/height resets Konva's scaleX/scaleY to 1; that
+ *   is required so the model's width/height always reflects true size, never a
+ *   scaled-but-uncollapsed state.
+ */
+export interface TransformerNode {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    /** Konva's scale after the transformer gesture; 1 when already baked. */
+    scaleX: number;
+    scaleY: number;
+    rotation: number;
+}
+/** Define baked node attributes including position, size, and rotation with collapsed scale */
+export interface BakedNodeAttrs {
+    x: number;
+    y: number;
+    /** True pixel size after scale is collapsed into dimensions. */
+    width: number;
+    height: number;
+    rotation: number;
+}
+/**
+ * Collapse Konva scaleX/scaleY into width/height so the model always stores
+ * true pixel dimensions. The transformer mutates scale on drag; we bake it
+ * once at dragend/transformend and emit width/height — scale resets to 1
+ * implicitly (the emitted attrs do not include scale, so the next render
+ * starts from scaleX=1).
+ *
+ * Konva rotates about the top-left origin and also shifts x/y to compensate
+ * for scale — the transformer gives us the post-rotation, post-scale x/y
+ * directly, so no further rotation math is needed here.
+ */
+export declare function bakeRectTransform(node: TransformerNode): BakedNodeAttrs;
+/**
+ * Lines store points as a flat [x0, y0, x1, y1, ...] array relative to the
+ * line element's (x, y). When the transformer scales the group containing the
+ * line, we bake scaleX into every x-component of points and scaleY into every
+ * y-component, then reset scale to 1. The element x/y is the Konva group
+ * origin and is taken directly from the transformer output.
+ */
+export declare function bakeLineTransform(node: TransformerNode & {
+    points: number[];
+}): BakedNodeAttrs & {
+    points: number[];
+};
+/**
+ * Text nodes have a fixed wrap width; scaling that width is what the
+ * transformer controls. Height is content-derived and is NOT baked here —
+ * it re-derives from text content at render time via estimateTextHeight.
+ * Only scaleX is baked into width; scaleY into fontSize so text scales
+ * proportionally when the user resizes with keepRatio.
+ */
+export declare function bakeTextTransform(node: TransformerNode & {
+    fontSize: number;
+}): BakedNodeAttrs & {
+    fontSize: number;
+};
+/**
+ * The model stores ellipse position as the top-left corner of the bounding
+ * box (matching every other element kind). Konva.Ellipse draws from its center
+ * (radiusX, radiusY). This converts model top-left to Konva center.
+ *
+ * INVARIANT: radiusX = width/2, radiusY = height/2; x/y offsets are exactly
+ * half the dimensions because there is no separate offset field.
+ */
+export declare function ellipseCenterFromTopLeft(topLeft: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}): {
+    x: number;
+    y: number;
+    radiusX: number;
+    radiusY: number;
+};
+/**
+ * Inverse: Konva center + radius → model top-left. Used when reading back
+ * from a transformer node whose origin is the Konva center.
+ */
+export declare function ellipseTopLeftFromCenter(center: {
+    x: number;
+    y: number;
+    radiusX: number;
+    radiusY: number;
+}): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+interface MarqueeRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/**
+ * Normalize a marquee rectangle from two arbitrary corners into a canonical
+ * top-left origin with positive width/height, regardless of drag direction.
+ */
+export declare function normalizeMarquee(startX: number, startY: number, endX: number, endY: number): MarqueeRect;
+interface OverlayPositionInput {
+    /** Element top-left in document coordinates. */
+    elementX: number;
+    elementY: number;
+    elementWidth: number;
+    elementHeight: number;
+    /** Current zoom and pan. */
+    zoom: number;
+    panX: number;
+    panY: number;
+}
+interface OverlayPosition {
+    /** CSS left/top for the overlay textarea relative to the canvas container. */
+    left: number;
+    top: number;
+    width: number;
+    /** fontSize to mirror from the element, scaled by zoom. */
+    fontSize: number;
+}
+/**
+ * Compute the screen-space position for an inline text editor overlay.
+ *
+ * V1 simplification: rotated text elements are edited in a non-rotated overlay
+ * positioned at the element's AABB. This means the overlay does not visually
+ * align with the rotated text, but keeps the textarea DOM element axis-aligned
+ * which avoids browser textarea rotation bugs. A future v2 may apply a CSS
+ * transform to the textarea to match rotation.
+ */
+export declare function computeTextOverlayPosition(input: OverlayPositionInput & {
+    elementFontSize: number;
+}): OverlayPosition;
+/**
+ * Snap a rotation angle to the nearest cardinal/diagonal if within
+ * `thresholdDeg` of it (default 5°). Returns the original value when no snap
+ * activates. Normalizes output to [0, 360).
+ */
+export declare function snapRotation(angleDeg: number, thresholdDeg?: number): number;
+/**
+ * Convert a keyboard arrow event into a {dx, dy} nudge in document px.
+ * Shift multiplies by 10 (the "big nudge" convention).
+ */
+export declare function nudgeDelta(key: 'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'ArrowDown', shift: boolean): {
+    dx: number;
+    dy: number;
+};
+/**
+ * Return true when bounds B is entirely contained within marquee A.
+ * Partial intersection does NOT select — the marquee must fully enclose.
+ */
+export declare function marqueeContains(marquee: MarqueeRect, bounds: MarqueeRect): boolean;
+/**
+ * Return true when grid lines at `gridSize` document px would render at least
+ * `minScreenPx` apart at the current zoom. Used to skip grid drawing when
+ * zoomed out far enough that lines would clutter.
+ */
+export declare function gridVisible(gridSize: number, zoom: number, minScreenPx?: number): boolean;
+export {};

package/dist/{command-stack-TNPWJCzW.d.ts → design-canvas-react/contracts.d.ts}

@@ -1,7 +1,3 @@
-import { c as SceneDocument, a as SceneElement, S as ScenePage, B as Bounds } from './model-DnfO_PdJ.js';
-import { S as SceneOperation } from './operations-ByJ6yXOW.js';
-import { CanvasRenderPalette } from './theme/index.js';
-
 /**
  * Seams between the design-canvas editor's engine and components, mirroring
  * the sequences-react pattern: interface-only so layers build independently.
@@ -14,9 +10,11 @@ import { CanvasRenderPalette } from './theme/index.js';
  * inverse = pre-gesture attrs) executes on release — undo is per-gesture,
  * never per-pixel.
  */
-
+import type { Bounds, SceneDocument, SceneElement, ScenePage } from '../design-canvas/model';
+import type { SceneOperation } from '../design-canvas/operations';
+import type { CanvasRenderPalette } from '../theme/theme';
 /** Define the state of the editor scene including document, view settings, and selection details */
-interface EditorSceneState {
+export interface EditorSceneState {
     document: SceneDocument;
     activePageId: string;
     selectedElementIds: string[];
@@ -32,7 +30,7 @@ interface EditorSceneState {
     showBleed: boolean;
 }
 /** Define a command with execution, undo, and operation methods for scene editing and persistence */
-interface SceneCommand {
+export interface SceneCommand {
     label: string;
     execute(state: EditorSceneState): EditorSceneState;
     undo(state: EditorSceneState): EditorSceneState;
@@ -46,7 +44,7 @@ interface SceneCommand {
     inverseOperations(): SceneOperation[];
 }
 /** Manage and track scene commands with undo, redo, and state subscription capabilities */
-interface SceneCommandStack {
+export 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). */
@@ -81,20 +79,20 @@ interface SceneCommandStack {
     rollback(command: SceneCommand): void;
 }
 /** Define snap target categories for aligning elements within a layout system */
-type SnapTargetKind = 'grid' | 'element-edge' | 'element-center' | 'page-edge' | 'page-center' | 'guide';
+export type SnapTargetKind = 'grid' | 'element-edge' | 'element-center' | 'page-edge' | 'page-center' | 'guide';
 /** Define a target position and kind for snapping elements on a page */
-interface SnapTarget {
+export interface SnapTarget {
     /** Page-coordinate position of the snap line. */
     position: number;
     kind: SnapTargetKind;
 }
 /** Define vertical and horizontal collections of snap targets for alignment purposes */
-interface SnapTargets {
+export interface SnapTargets {
     vertical: SnapTarget[];
     horizontal: SnapTarget[];
 }
 /** Define the result of a snap operation including coordinates and active snap lines */
-interface SnapResult {
+export interface SnapResult {
     x: number;
     y: number;
     /** Lines to render while the gesture holds the snap. */
@@ -102,7 +100,7 @@ interface SnapResult {
     activeHorizontal: SnapTarget | null;
 }
 /** Resolve snapping targets and apply snapping logic to moving elements within the editor scene */
-interface SnapEngine {
+export 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. */
@@ -111,7 +109,7 @@ interface SnapEngine {
     apply(bounds: Bounds, targets: SnapTargets, thresholdPx: number, zoom: number): SnapResult;
 }
 /** Define methods and properties to calculate zoom and pan transformations between document and screen coordinates */
-interface ZoomPanMath {
+export interface ZoomPanMath {
     minZoom: number;
     maxZoom: number;
     /** Zoom about a screen point so the document point under the cursor stays
@@ -155,7 +153,7 @@ interface ZoomPanMath {
     };
 }
 /** Resolve the result of applying a scene update including revision and optional normalized document */
-interface ApplySceneResult {
+export interface ApplySceneResult {
     rev: number;
     /** Present when the server re-minted ids or normalized the document; the
      *  editor rebases onto it. */
@@ -168,7 +166,7 @@ interface ApplySceneResult {
  * {@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 {
+export interface ExportTriggerOptions {
     format: 'png' | 'jpeg';
     /** Output scale multiplier (1 = page size, 2 = retina). */
     pixelRatio: number;
@@ -184,9 +182,9 @@ interface ExportTriggerOptions {
  *   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';
+export type DesignCanvasMode = 'edit' | 'review';
 /** Define properties and callbacks for configuring and controlling the design canvas editor */
-interface DesignCanvasProps {
+export interface DesignCanvasProps {
     document: SceneDocument;
     /** Revision the document was loaded at; threaded through saves. */
     rev: number;
@@ -251,48 +249,3 @@ interface DesignCanvasProps {
     /** Label/aria for the zoom fit action. Defaults to "Fit to screen". */
     fitLabel?: string;
 }
-
-/**
- * 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;
-/**
- * The base {@link SceneCommandStack} plus the two command-specific recovery
- * primitives the undo/redo persistence path needs. `rollback` (on the base
- * contract) undoes a failed COMMIT; these undo a failed UNDO/REDO persist.
- * Defined here (not on the shared contract) so consumers that take the stack as
- * `ReturnType<typeof createSceneCommandStack>` see them without a contract bump.
- */
-interface SceneCommandStackWithReapply extends SceneCommandStack {
-    /**
-     * A persisted UNDO rejected: re-apply that command's FORWARD transform (move
-     * it redo→undo). Mirrors `rollback`'s command-specific contract — it acts on
-     * the captured command, not blindly on the redo-stack top, so an interleaved
-     * edit cannot make it re-apply the wrong command. No-op if the command is not
-     * the top of the redo stack (a newer edit reshaped history — the next
-     * `reset()` reconciles).
-     */
-    reexecute(command: SceneCommand): void;
-    /**
-     * A persisted REDO rejected: re-apply that command's INVERSE transform (move
-     * it undo→redo). The redo-side mirror of `reexecute`. No-op unless the command
-     * is the top of the undo stack.
-     */
-    reundo(command: SceneCommand): void;
-}
-/** Create a command stack for scene editing with reapply capabilities based on the given document and page ID */
-declare function createSceneCommandStack(document: SceneDocument, activePageId: string): SceneCommandStackWithReapply;
-
-export { type ApplySceneResult as A, type DesignCanvasProps as D, type ExportTriggerOptions as E, SCENE_COMMAND_HISTORY_LIMIT as S, type ZoomPanMath as Z, type DesignCanvasMode as a, type EditorSceneState as b, createSceneCommandStack as c, type SceneCommand as d, type SceneCommandStack as e, type SceneCommandStackWithReapply as f, type SnapEngine as g, type SnapResult as h, type SnapTarget as i, type SnapTargetKind as j, type SnapTargets as k };