@hilum/designer-canvas 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Hilum
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,30 @@
+# @hilum/designer-canvas
+
+Generic free-positioned canvas engine for Hilum apps. Pluggable Layer model, pan/zoom viewport, drag/resize/marquee interactions, snap guides, and a curated set of 49 generic actions (alignment, z-order, opacity, fill, transform, etc.).
+
+The package ships **no concrete renderers** — apps register their own via the renderer registry. Advanced features (text-on-paths, custom warps, font registries, thumbnails) are exposed through optional injected services (`PathService`, `FontService`).
+
+```tsx
+import { CanvasProvider, DesignerCanvas, DesignerFrame } from "@hilum/designer-canvas"
+import { GeometryService, FontService } from "@/services"
+
+<CanvasProvider
+  defaultLayers={layers}
+  frameSize={{ width: 800, height: 600 }}
+  services={{ paths: GeometryService, fonts: FontService }}
+  renderers={{ rect: RectRenderer, text: TextRenderer }}
+>
+  <DesignerCanvas>
+    <DesignerFrame />
+  </DesignerCanvas>
+</CanvasProvider>
+```
+
+## Architecture
+
+- **State:** generic `Layer<TData>` shape with first-class typed geometry (x, y, width, height, rotation, opacity). Apps narrow `data` for their kind.
+- **Selection / tool / history:** delegated to `@hilum/designer`'s ShellContext.
+- **Actions:** 49 generic ones bundled (alignment, z-order, opacity, fill, transform, etc.). 6 require small abstractions (unit converter, font provider, image upload).
+- **Services:** optional. Pappery injects WASM-backed `PathService` and `FontService`; apps without them use the no-op fallbacks.
+
+See `PHASE_0_AUDIT.md` §P0.6 for the service interface and §P0.4 for the Layer shape.

package/dist/index.d.ts

@@ -0,0 +1,629 @@
+import * as React from 'react';
+import { Dispatch, ReactNode, ComponentType, RefObject } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Generic Layer shape. Apps narrow `TData` per kind.
+ *
+ * Geometry (x, y, width, height, rotation, opacity) is first-class typed
+ * — Pappery used to bury these in `cssVars: Record<string,string>`. The
+ * package's reducer reads them directly.
+ *
+ * `type` is an open string; apps register renderers per type via the
+ * RendererProvider. Apps narrow it via TypeScript discriminated unions:
+ *
+ *   type AppLayer =
+ *     | Layer<TextData> & { type: 'text' }
+ *     | Layer<ImageData> & { type: 'image' }
+ */
+interface Layer<TData = Record<string, unknown>> {
+    id: string;
+    type: string;
+    name?: string;
+    /** Position in the artboard's coordinate system (typically pixels). */
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    /** Degrees, clockwise. Optional — defaults to 0. */
+    rotation?: number;
+    /** 0–1. Optional — defaults to 1. */
+    opacity?: number;
+    /** Render-time flags. */
+    isLocked?: boolean;
+    isVisible?: boolean;
+    /** Used by group / ungroup actions. */
+    groupId?: string;
+    /** Optional grid placement (set when canvas is in grid mode). */
+    gridItem?: GridItem;
+    /** Kind-specific fields. Apps narrow this. */
+    data: TData;
+}
+interface GridItem {
+    /** Column start (1-based, like CSS grid-column). */
+    x: number;
+    /** Row start. */
+    y: number;
+    /** Column span. */
+    w: number;
+    /** Row span. */
+    h: number;
+}
+interface FrameSize {
+    width: number;
+    height: number;
+}
+interface GridContainer {
+    /** Number of columns. */
+    cols: number;
+    /** Number of rows. */
+    rows: number;
+    /** Gap between cells (px). */
+    gap: number;
+    /** Padding around the grid (px). */
+    padding: number;
+}
+interface PanState {
+    x: number;
+    y: number;
+}
+interface LayerTypeDescriptor<TData = unknown> {
+    /** Layer kind identifier (matches `Layer.type`). */
+    type: string;
+    /** Display label for menus, picker UIs. */
+    label: string;
+    /** Default `data` payload when adding a new layer of this kind. */
+    defaultData: TData;
+    /** Default size when adding a new layer of this kind. */
+    defaultSize?: {
+        width: number;
+        height: number;
+    };
+    /** Optional icon component. */
+    icon?: React.ComponentType<{
+        size?: number;
+        className?: string;
+    }>;
+}
+type SurfaceTheme = "light" | "mid" | "dark";
+
+interface TextMetrics {
+    ascent: number;
+    descent: number;
+    width: number;
+    height: number;
+    bounds: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}
+interface ShadowResult {
+    path: string;
+    shadow: string;
+    blur: number;
+}
+interface OutlineResult {
+    path: string;
+    outline: string;
+    width: number;
+}
+interface PathEffectResult {
+    path: string;
+    shadow: string;
+    needsBlur: boolean;
+    blur: number;
+}
+/**
+ * Path / geometry service. Pappery injects a WASM-backed implementation; apps
+ * that don't need text-on-paths or warps can omit this.
+ */
+interface PathService {
+    /** Boolean union of two SVG path strings. */
+    union(pathA: string, pathB: string): string;
+    /** SVG path for text rendered in a registered font. */
+    getTextPath(text: string, fontName: string, fontSize: number, options?: {
+        letterSpacing?: number;
+        underline?: boolean;
+        strikethrough?: boolean;
+    }): string;
+    /** Detailed metrics for laid-out text. */
+    getTextMetrics(text: string, fontName: string, fontSize: number, options?: {
+        letterSpacing?: number;
+    }): TextMetrics;
+    /** Warp a path — arch, wave, flag, custom kinds. */
+    warpPath(pathData: string, warpType: string, amount: number): string;
+    /** Simple shape constructors. */
+    createRectangle(width: number, height: number): string;
+    createTriangle(width: number, height: number): string;
+    createCircle(radius: number): string;
+    /** Path effects. */
+    getShadow(pathData: string, offset: number, angle: number, blur: number): ShadowResult;
+    getOutline(pathData: string, outlineWidth: number): OutlineResult;
+    getPathEffect(pathData: string, shadowType: string, offset: number, angle: number, blur: number, outlineWidth: number): PathEffectResult;
+    /** Pattern fills. */
+    getDecorationPattern(pathData: string, pattern: string, lineWeight: number, lineDistance: number, baseSize: number): string;
+    /** Layer thumbnails (Worker-friendly). */
+    renderThumbnail(layersJson: string, frameWidth: number, frameHeight: number, outputWidth: number, outputHeight: number): Uint8Array | null;
+}
+interface FontDescriptor {
+    family: string;
+    /** App-defined source enum (Pappery: 'google'|'local'|'upload'). */
+    source: string;
+    loaded: boolean;
+    weights?: number[];
+}
+/** Font orchestration service. */
+interface FontService {
+    fonts: FontDescriptor[];
+    loadFont(family: string, weight?: string | number): Promise<string>;
+    getAvailableWeights(family: string): number[];
+    isFontLoaded(family: string, weight?: string | number): boolean;
+    getFontKey(family: string, weight?: string | number): string;
+}
+/** Convert between display unit (e.g. mm) and the canvas's internal pixels. */
+interface UnitConverter {
+    /** Display value → internal pixels. */
+    toPx(value: number): number;
+    /** Internal pixels → display value. */
+    fromPx(pixels: number): number;
+    /** Symbol (e.g. "px", "mm", "in"). Used as suffix in InputNumber. */
+    unit: string;
+    /** Decimal precision for display. Default: 0. */
+    precision?: number;
+}
+/** Pluggable image upload. Default: in-memory blob URL. */
+type UploadImage = (file: File) => Promise<{
+    url: string;
+    assetId?: string;
+}>;
+interface CanvasServices {
+    paths?: PathService | null;
+    fonts?: FontService | null;
+    /** Unit display / conversion. Default: identity / "px". */
+    units?: UnitConverter | null;
+    /** Image upload. Default: blob URL. */
+    uploadImage?: UploadImage | null;
+}
+
+interface CanvasState<TData = Record<string, unknown>> {
+    /** All layers in z-order. Index 0 = bottom. */
+    layers: Layer<TData>[];
+    /** View state. */
+    zoom: number;
+    pan: PanState;
+    /** Artboard / frame. */
+    frameSize: FrameSize;
+    artboardName: string;
+    artboardColor: string;
+    artboardOpacity: number;
+    /** Whether content is clipped to the frame bounds. */
+    artboardClipContent: boolean;
+    /** Optional grid layout mode. When set, layers can use `gridItem`. */
+    gridContainer?: GridContainer;
+    /** Clipboard: layers that have been copied / cut. */
+    copiedLayers: Layer<TData>[] | null;
+    /** Theme — chrome reads from here, components reference Hilum semantic vars. */
+    uiColor: SurfaceTheme;
+    canvasColor: SurfaceTheme;
+    /** Editor accent (selection handles, snap guides). Defaults to Hilum brand-primary via CSS var. */
+    accentColor: string;
+    /** Renderer registry: descriptors for the layer kinds the app supports. */
+    layerTypes: LayerTypeDescriptor[];
+    /** When true, mutating actions no-op. */
+    readOnly: boolean;
+}
+declare function createInitialState<TData>(partial?: Partial<CanvasState<TData>>): CanvasState<TData>;
+
+type CanvasAction<TData = Record<string, unknown>> = {
+    type: "SET_LAYERS";
+    payload: Layer<TData>[];
+} | {
+    type: "ADD_LAYER";
+    payload: Layer<TData>;
+} | {
+    type: "UPDATE_LAYER";
+    payload: {
+        id: string;
+        updates: Partial<Layer<TData>>;
+    };
+} | {
+    type: "UPDATE_LAYERS";
+    payload: Array<{
+        id: string;
+        updates: Partial<Layer<TData>>;
+    }>;
+} | {
+    type: "DELETE_LAYER";
+    payload: string;
+} | {
+    type: "DELETE_LAYERS";
+    payload: string[];
+} | {
+    type: "REORDER_LAYERS";
+    payload: {
+        fromIndex: number;
+        toIndex: number;
+    };
+} | {
+    type: "NUDGE_LAYERS";
+    payload: {
+        targetLayerIds: string[];
+        dx: number;
+        dy: number;
+    };
+} | {
+    type: "ALIGN_LAYERS";
+    payload: {
+        targetLayerIds: string[];
+        align: "left" | "center" | "right" | "top" | "middle" | "bottom";
+    };
+} | {
+    type: "DISTRIBUTE_LAYERS";
+    payload: {
+        targetLayerIds: string[];
+        axis: "horizontal" | "vertical";
+    };
+} | {
+    type: "GROUP_LAYERS";
+    payload: {
+        targetLayerIds: string[];
+        groupId: string;
+    };
+} | {
+    type: "UNGROUP_LAYERS";
+    payload: {
+        targetLayerIds: string[];
+    };
+} | {
+    type: "ARRANGE_LAYERS";
+    payload: {
+        targetLayerIds: string[];
+        mode: "front" | "back" | "forward" | "backward";
+    };
+} | {
+    type: "TRANSFORM_LAYERS";
+    payload: {
+        targetLayerIds: string[];
+        mode: "flip-h" | "flip-v";
+    };
+} | {
+    type: "SET_LAYER_PROPERTY";
+    payload: {
+        targetLayerIds: string[];
+        key: keyof Layer<TData>;
+        value: unknown;
+    };
+} | {
+    type: "SET_ZOOM";
+    payload: number;
+} | {
+    type: "SET_PAN";
+    payload: {
+        x: number;
+        y: number;
+    };
+} | {
+    type: "SET_FRAME_SIZE";
+    payload: {
+        width: number;
+        height: number;
+    };
+} | {
+    type: "SET_ARTBOARD_NAME";
+    payload: string;
+} | {
+    type: "SET_ARTBOARD_COLOR";
+    payload: string;
+} | {
+    type: "SET_ARTBOARD_OPACITY";
+    payload: number;
+} | {
+    type: "SET_ARTBOARD_CLIP_CONTENT";
+    payload: boolean;
+} | {
+    type: "SET_GRID_CONTAINER";
+    payload: GridContainer;
+} | {
+    type: "CLEAR_GRID_CONTAINER";
+} | {
+    type: "UPDATE_GRID_CONTAINER";
+    payload: Partial<GridContainer>;
+} | {
+    type: "SET_UI_COLOR";
+    payload: "light" | "mid" | "dark";
+} | {
+    type: "SET_CANVAS_COLOR";
+    payload: "light" | "mid" | "dark";
+} | {
+    type: "SET_ACCENT_COLOR";
+    payload: string;
+} | {
+    type: "COPY_LAYERS";
+    payload: {
+        targetLayerIds: string[];
+    };
+} | {
+    type: "PASTE_LAYERS";
+    payload?: {
+        offset?: {
+            dx: number;
+            dy: number;
+        };
+    };
+} | {
+    type: "CLEAR_CLIPBOARD";
+} | {
+    type: "SET_READ_ONLY";
+    payload: boolean;
+};
+declare function canvasReducer<TData>(state: CanvasState<TData>, action: CanvasAction<TData>): CanvasState<TData>;
+declare function alignLayers<TData>(layers: Layer<TData>[], ids: string[], align: "left" | "center" | "right" | "top" | "middle" | "bottom"): Layer<TData>[];
+declare function distributeLayers<TData>(layers: Layer<TData>[], ids: string[], axis: "horizontal" | "vertical"): Layer<TData>[];
+declare function arrangeLayers<TData>(layers: Layer<TData>[], ids: string[], mode: "front" | "back" | "forward" | "backward"): Layer<TData>[];
+declare const __test: {
+    alignLayers: typeof alignLayers;
+    distributeLayers: typeof distributeLayers;
+    arrangeLayers: typeof arrangeLayers;
+};
+
+interface CanvasContextValue<TData = Record<string, unknown>> {
+    state: CanvasState<TData>;
+    dispatch: Dispatch<CanvasAction<TData>>;
+    services: CanvasServices;
+    /** Bumped on each commit. Apps can use it as a memoization key. */
+    revision: number;
+}
+declare function useCanvasContext<TData = Record<string, unknown>>(): CanvasContextValue<TData>;
+declare const CanvasContextProvider: React.Provider<CanvasContextValue<unknown>>;
+
+interface CanvasProviderProps<TData = Record<string, unknown>> {
+    initial?: Partial<CanvasState<TData>>;
+    /** Optional injected services — see PHASE_0_AUDIT.md §P0.6. */
+    services?: CanvasServices;
+    /** Read-only mode (e.g. for thumbnails). */
+    readOnly?: boolean;
+    /** Receive every state transition. Useful for syncing to external storage. */
+    onChange?: (state: CanvasState<TData>) => void;
+    children: ReactNode;
+}
+/**
+ * Mounts both ShellContext (from @hilum/designer) and CanvasContext.
+ * Selection lives in ShellContext; layers / viewport / artboard live here.
+ *
+ * The reducer is generic on TData; apps narrow it by passing a typed
+ * `initial.layerTypes` array.
+ */
+declare function CanvasProvider<TData = Record<string, unknown>>({ initial, services, readOnly, onChange, children, }: CanvasProviderProps<TData>): react_jsx_runtime.JSX.Element;
+
+/**
+ * Renderer for a single layer kind. Receives the layer + a few context
+ * flags. Apps register one of these per `layer.type` they support.
+ *
+ * Position / size / rotation / opacity are applied by the package via a
+ * wrapper element — the renderer should focus on the **content** of the
+ * layer (text, image, shape path, etc.). It can use `data` for kind-specific
+ * fields.
+ */
+interface LayerRendererContext {
+    selected: boolean;
+    /** Current zoom — useful for scaling stroke width or rendering text crisply. */
+    zoom: number;
+    /** Read-only mode (no interactivity). */
+    readOnly: boolean;
+}
+type LayerRendererProps<TData = unknown> = {
+    layer: Layer<TData>;
+    ctx: LayerRendererContext;
+};
+type LayerRenderer<TData = unknown> = ComponentType<LayerRendererProps<TData>>;
+/** Map of `layer.type` → renderer. */
+type RendererRegistry = Record<string, LayerRenderer<unknown>>;
+
+interface RendererProviderProps {
+    /** Map of layer.type → renderer. Apps register their kinds here. */
+    renderers: RendererRegistry;
+    children: ReactNode;
+}
+/**
+ * Pluggable renderer registry. Apps mount this near the canvas root and
+ * pass `{ [layerType]: Component }`. The package never ships concrete
+ * renderers — Pappery's text/image/shape renderers stay in Pappery, and
+ * each app supplies its own per layer kind.
+ */
+declare function RendererProvider({ renderers, children }: RendererProviderProps): react_jsx_runtime.JSX.Element;
+declare function useLayerRenderer(type: string): LayerRenderer<unknown> | undefined;
+declare function useAllRenderers(): RendererRegistry;
+
+interface DesignerProps<TData = Record<string, unknown>> {
+    /** Initial canvas state. Layers, frame size, theme. */
+    initial?: Partial<CanvasState<TData>>;
+    /** Renderers per layer type. */
+    renderers?: RendererRegistry;
+    /** Optional injected services (paths, fonts, units, image upload). */
+    services?: CanvasServices;
+    /** Read-only mode (e.g. for previews). */
+    readOnly?: boolean;
+    /** Receive every state transition. */
+    onChange?: (state: CanvasState<TData>) => void;
+    children: ReactNode;
+}
+/**
+ * Root provider for a canvas-editor app. Mounts ShellProvider (selection,
+ * tool, read-only) + CanvasProvider (layers, viewport, artboard) +
+ * RendererProvider (per-type renderers).
+ *
+ * Place <DesignerCanvas><DesignerFrame /></DesignerCanvas> inside, or
+ * compose with @hilum/designer's chrome (DesignerShell, Toolbar, etc.).
+ */
+declare function Designer<TData = Record<string, unknown>>({ initial, renderers, services, readOnly, onChange, children, }: DesignerProps<TData>): react_jsx_runtime.JSX.Element;
+
+interface DesignerCanvasProps {
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * Pan / zoom viewport. Wraps an inner transform layer that applies the
+ * canvas state's pan + zoom. Children (typically `<DesignerFrame>` and
+ * overlays) are rendered inside the transform.
+ */
+declare function DesignerCanvas({ className, children }: DesignerCanvasProps): react_jsx_runtime.JSX.Element;
+
+interface DesignerFrameProps {
+    className?: string;
+    /** Hide the selection overlay (e.g. for a custom one). */
+    hideSelectionOverlay?: boolean;
+    /** Hide the marquee selection box. */
+    hideMarquee?: boolean;
+    /** Show the grid overlay. */
+    showGrid?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Interactive layer container. Renders the artboard, all layers via the
+ * RendererProvider, the marquee selection box, the selection handles, and
+ * an optional grid.
+ */
+declare function DesignerFrame({ className, hideSelectionOverlay, hideMarquee, showGrid, children, }: DesignerFrameProps): react_jsx_runtime.JSX.Element;
+
+interface DesignerStaticFrameProps {
+    className?: string;
+    /** Override frame size — used by thumbnails to render at a custom resolution. */
+    width?: number;
+    height?: number;
+}
+/**
+ * Read-only render of the canvas — no interactivity, no overlays. Use for
+ * dashboard thumbnails or print previews. The same renderers from
+ * <RendererProvider> are used; their `ctx.readOnly` will be true.
+ */
+declare function DesignerStaticFrame({ className, width, height }: DesignerStaticFrameProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Visual grid overlay — renders a SVG pattern based on `state.gridContainer`.
+ * Non-interactive; sits behind the layers but inside the artboard.
+ */
+declare function GridOverlay(): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Renders blue selection rectangles around currently-selected layers.
+ * Non-interactive — drag/resize handles can be added in a future iteration.
+ */
+declare function LayerSelectionOverlay(): react_jsx_runtime.JSX.Element | null;
+
+interface MarqueeOverlayProps {
+    /** Ref to the frame element this marquee is constrained to. */
+    containerRef: RefObject<HTMLDivElement | null>;
+}
+/**
+ * Click-and-drag marquee selection. Listens for pointerdown on the frame
+ * background; on drag, paints a translucent rectangle and selects all
+ * layers whose bounding box intersects it on pointerup.
+ */
+declare function MarqueeOverlay({ containerRef }: MarqueeOverlayProps): react_jsx_runtime.JSX.Element | null;
+
+declare function useLayers<TData = Record<string, unknown>>(): Layer<TData>[];
+declare function useLayer<TData = Record<string, unknown>>(id: string): Layer<TData> | undefined;
+declare function useSelectedLayerIds(): string[];
+declare function useSelectedLayers<TData = Record<string, unknown>>(): Layer<TData>[];
+declare function useSelectedLayer<TData = Record<string, unknown>>(): Layer<TData> | undefined;
+declare function useIsLayerSelected(id: string): boolean;
+
+interface UseZoomReturn {
+    zoom: number;
+    setZoom: (next: number) => void;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    resetZoom: () => void;
+    /** Fit zoom to bring the artboard into view, given an outer container. */
+    fitZoom: (container: {
+        width: number;
+        height: number;
+    }, padding?: number) => void;
+}
+declare function useZoom(): UseZoomReturn;
+
+interface UseDragInteractionParams {
+    layerId: string;
+    /** Pixel scale — typically `1 / zoom`. */
+    scale?: number;
+}
+/**
+ * Pointer-driven drag for a single layer. Returns props to spread on the
+ * draggable element. Holds Shift for axis-locked movement.
+ *
+ * Multi-select drag (move all selected layers) is handled by spreading
+ * onPointerDown on each selected frame and dispatching UPDATE_LAYERS in the
+ * same frame — this hook handles the single-layer case.
+ */
+declare function useDragInteraction({ layerId, scale }: UseDragInteractionParams): {
+    dragging: boolean;
+    onPointerDown: (e: React.PointerEvent) => void;
+};
+
+/**
+ * Wires `@hilum/designer`'s generic `useHistory<T>` to the canvas reducer.
+ *
+ * Apps don't usually use this directly — `<Designer>` mounts it. The pattern:
+ * the reducer commits state on every dispatch; this hook syncs the layers
+ * slice into the history stack when changes are user-initiated.
+ *
+ * For now, the canvas's reducer doesn't directly track history (history lives
+ * in @hilum/designer's hook). Apps that want canvas-level undo/redo wire
+ * `useHistory<Layer[]>(initialLayers)` and dispatch `SET_LAYERS` to apply
+ * undo / redo results.
+ */
+declare function useHistoryActions<TData = Record<string, unknown>>(): {
+    undo: () => void;
+    redo: () => void;
+    canUndo: boolean;
+    canRedo: boolean;
+};
+
+/**
+ * Renders one toolbar button per registered layer type. Apps that want a
+ * single + dropdown can build their own using <DropdownMenu> and the same
+ * dispatch call.
+ */
+declare function ActionAddLayer(): react_jsx_runtime.JSX.Element;
+
+/**
+ * Alignment + distribution toolbar group. Operates on currently-selected
+ * layers via ShellContext.selectedIds (passed explicitly to the reducer).
+ */
+declare function ActionAlign(): react_jsx_runtime.JSX.Element;
+
+/** Bring to front / back / forward / backward. */
+declare function ActionArrange(): react_jsx_runtime.JSX.Element;
+
+declare function ActionDelete(): react_jsx_runtime.JSX.Element;
+
+declare function ActionDuplicate(): react_jsx_runtime.JSX.Element;
+
+declare function ActionGroup(): react_jsx_runtime.JSX.Element;
+
+declare function ActionLock(): react_jsx_runtime.JSX.Element;
+
+interface ToolDescriptor {
+    id: string;
+    label: string;
+    icon: ComponentType<{
+        size?: number;
+        className?: string;
+    }>;
+    shortcut?: string;
+}
+interface ActionToolProps {
+    /** Override default tools. */
+    tools?: ToolDescriptor[];
+}
+declare function ActionTool({ tools }: ActionToolProps): react_jsx_runtime.JSX.Element;
+
+declare function ActionTransform(): react_jsx_runtime.JSX.Element;
+
+declare function ActionUndoRedo(): react_jsx_runtime.JSX.Element;
+
+declare function ActionZoom(): react_jsx_runtime.JSX.Element;
+
+export { ActionAddLayer, ActionAlign, ActionArrange, ActionDelete, ActionDuplicate, ActionGroup, ActionLock, ActionTool, type ActionToolProps, ActionTransform, ActionUndoRedo, ActionZoom, type CanvasAction, CanvasContextProvider, type CanvasContextValue, CanvasProvider, type CanvasServices, type CanvasState, Designer, DesignerCanvas, type DesignerCanvasProps, DesignerFrame, type DesignerFrameProps, type DesignerProps, DesignerStaticFrame, type DesignerStaticFrameProps, type FontDescriptor, type FontService, type FrameSize, type GridContainer, type GridItem, GridOverlay, type Layer, type LayerRenderer, type LayerRendererContext, type LayerRendererProps, LayerSelectionOverlay, type LayerTypeDescriptor, MarqueeOverlay, type MarqueeOverlayProps, type OutlineResult, type PanState, type PathEffectResult, type PathService, RendererProvider, type RendererRegistry, type ShadowResult, type SurfaceTheme, type TextMetrics, type ToolDescriptor, type UnitConverter, type UploadImage, __test, canvasReducer, createInitialState, useAllRenderers, useCanvasContext, useDragInteraction, useHistoryActions, useIsLayerSelected, useLayer, useLayerRenderer, useLayers, useSelectedLayer, useSelectedLayerIds, useSelectedLayers, useZoom };