@servantcdh/ez-planet-labeling 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,836 @@
+import { Canvas } from 'fabric';
+import { fabric } from 'fabric';
+import { FabricObject } from 'fabric';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { StoreApi } from 'zustand';
+import { TemporalState } from 'zundo';
+import { UseBoundStore } from 'zustand';
+
+export declare interface Annotation {
+    /** Host app assigns this freely (DB PK, UUID, temp ID, etc.) */
+    id: string;
+    type: AnnotationType;
+    label: AnnotationLabel;
+    style: AnnotationStyle;
+    geometry: AnnotationGeometry | null;
+}
+
+export declare type AnnotationGeometry = BoxGeometry | SegmentationGeometry | PolygonGeometry | BrushGeometry | RecognitionGeometry;
+
+export declare interface AnnotationLabel {
+    name: string;
+    index: number;
+}
+
+export declare interface AnnotationStyle {
+    color: string;
+    opacity: number;
+    lineColor?: string;
+    lineWidth?: number;
+    zIndex?: number;
+}
+
+/**
+ * Convert an Annotation back to Fabric object options (for canvas loading).
+ * This creates the configuration that can be used with Fabric's enlivenObjects.
+ */
+export declare const annotationToFabricProps: (annotation: Annotation, imageWidth: number, imageHeight: number) => Record<string, unknown>;
+
+export declare type AnnotationType = 'box' | 'segmentation' | 'polygon' | 'brush' | 'classification' | 'recognition';
+
+export declare const basicBrushes: {
+    id: number;
+    lineCap: string;
+    lineWidth: number;
+}[];
+
+export declare const basicColors: string[];
+
+export declare const blankRectTool: () => LabelingTool;
+
+export declare interface BoxGeometry {
+    type: 'box';
+    /** Normalized coordinates (0~1 ratio, image-size independent) */
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+
+export declare interface BrushGeometry {
+    type: 'brush';
+    /** SVG path or fabric path data */
+    path: string;
+}
+
+declare interface BrushState {
+    brush: {
+        id: number;
+        lineCap: string;
+        lineWidth: number;
+    };
+    setBrush: (brush: {
+        id: number;
+        lineCap: string;
+        lineWidth: number;
+    }) => void;
+}
+
+export declare const brushTool: () => LabelingTool;
+
+export declare type CanvasAction = {
+    type: 'add';
+    annotation: Annotation;
+} | {
+    type: 'update';
+    annotation: Annotation;
+    prev: Annotation;
+} | {
+    type: 'delete';
+    id: string;
+} | {
+    type: 'batch';
+    added: Annotation[];
+    updated: Annotation[];
+    deleted: string[];
+};
+
+export declare interface CanvasChangeEvent {
+    annotations: Annotation[];
+    action: CanvasAction;
+}
+
+declare interface CanvasExportJSON {
+    version: string;
+    objects: Record<string, unknown>[];
+}
+
+declare interface CanvasJSON {
+    version: string;
+    objects: LabeledFabricObject[];
+}
+
+declare interface CanvasObjectsState {
+    objects: LabeledFabricObject[];
+    setObjects: (objects: LabeledFabricObject[]) => void;
+}
+
+export declare interface CanvasPointerEvent {
+    x: number;
+    y: number;
+    shiftKey: boolean;
+    ctrlKey: boolean;
+    altKey: boolean;
+}
+
+declare interface CanvasState_2 {
+    annotations: Annotation[];
+    canvasJSON: object;
+    image: {
+        width: number;
+        height: number;
+    };
+}
+export { CanvasState_2 as CanvasState }
+
+/**
+ * Convert all canvas objects to Annotations.
+ */
+export declare const canvasToAnnotations: (objects: LabeledFabricObject[], imageWidth: number, imageHeight: number) => Promise<Annotation[]>;
+
+/**
+ * Create an HTMLImageElement from a URL.
+ */
+export declare const createImage: (src: string) => Promise<HTMLImageElement>;
+
+export declare const createTemporalHistoryStore: <T>() => UseBoundStore<Omit<StoreApi<TemporalHistoryState<T>>, "temporal"> & {
+temporal: StoreApi<TemporalState<    {
+snapshot: T | null;
+}>>;
+}>;
+
+/**
+ * Crop image data to the bounding box of non-transparent pixels.
+ */
+export declare const cropAlphaArea: (imgData: ImageData) => {
+    canvas: HTMLCanvasElement;
+    minX: number;
+    minY: number;
+};
+
+export declare const emitLabelEvent: (action: LabelEventType, data?: LabelEventData) => void;
+
+export declare const ensureCanvas: () => FabricCanvas;
+
+export declare const eraserTool: () => LabelingTool;
+
+export declare const EXCEPTION_TOOLS: string[];
+
+export declare const EXPORT_PROPS: string[];
+
+export declare interface ExtensionContext {
+    image: {
+        url: string;
+        width: number;
+        height: number;
+    };
+    annotations: Annotation[];
+    selectedIds: string[];
+    activeTool: string;
+    addAnnotations: (annotations: Annotation[]) => void;
+    updateAnnotation: (id: string, annotation: Partial<Annotation>) => void;
+    removeAnnotations: (ids: string[]) => void;
+    setTool: (tool: string) => void;
+    canvas: {
+        toJSON: () => object;
+        getImageDataURL: () => string;
+    };
+}
+
+declare type FabricCanvas = Canvas & {
+    lowerCanvasEl?: HTMLCanvasElement | null;
+    upperCanvasEl?: HTMLCanvasElement | null;
+};
+
+/**
+ * Convert a Fabric object to an Annotation.
+ */
+export declare const fabricObjectToAnnotation: (object: LabeledFabricObject, imageWidth: number, imageHeight: number) => Promise<Annotation | null>;
+
+export declare const filledRectTool: () => LabelingTool;
+
+export declare const getActiveLabeledObjects: (targetCanvas?: FabricCanvas) => LabeledFabricObject[];
+
+export declare const getCanvasInstance: () => FabricCanvas;
+
+export declare const getCanvasJSON: (targetCanvas?: FabricCanvas) => CanvasJSON;
+
+export declare const getLabeledObjects: (targetCanvas?: FabricCanvas) => LabeledFabricObject[];
+
+export declare const getToolSelectionStore: () => ToolSelectionState;
+
+declare interface LabeledFabricObject extends FabricObject {
+    info?: string;
+    unique?: string;
+    hex?: string;
+    alpha?: string;
+    selected?: boolean;
+    class?: string;
+    added?: boolean;
+    index?: number;
+    seq?: number;
+    copied?: boolean;
+    combinded?: boolean;
+    labeler?: string;
+    undo?: boolean;
+    redo?: boolean;
+    passStack?: boolean;
+    replaced?: boolean;
+    removed?: boolean;
+    trueLeft?: number;
+    trueTop?: number;
+    toHex?: string;
+    eraser?: unknown;
+    labelType?: string;
+    labelPayload?: Record<string, unknown>;
+    _objects?: LabeledFabricObject[];
+    labelInsertData?: Record<string, unknown>;
+    [key: string]: unknown;
+}
+
+declare interface LabelEventData {
+    uniques?: string[];
+    unique?: string;
+    selected?: boolean;
+    objects?: LabeledFabricObject[];
+    info?: string;
+    canvasJSON?: CanvasExportJSON;
+    seq?: Array<{
+        unique: string;
+        seq: number;
+    }>;
+    callback?: (json: CanvasExportJSON | string) => void;
+    direction?: ZoomPayload['direction'];
+    level?: number;
+    onChange?: ZoomPayload['onChange'];
+    class?: string;
+    hex?: string;
+    opacity?: number;
+    onDone?: () => void;
+    imageWidth?: number;
+    imageHeight?: number;
+    action?: string;
+    point?: {
+        x: number;
+        y: number;
+    };
+    labelInsertData?: Record<string, unknown>;
+    [key: string]: unknown;
+}
+
+declare type LabelEventListener = (action: LabelEventType, data?: LabelEventData) => void | Promise<void>;
+
+declare type LabelEventType = 'load' | 'selected' | 'deleted' | 'zoom' | 'copy' | 'paste' | 'deleteSelected' | 'selectAll' | 'reset' | 'combine' | 'seq' | 'addClass' | 'deleteObjectsOfTool' | 'addObjects' | 'deselectAll' | 'undo' | 'redo' | 'changed' | 'blur' | 'focus' | 'init';
+
+export declare function LabelingCanvas({ image, annotations, onChange, readOnly, width, height, }: LabelingCanvasProps): JSX_2.Element;
+
+declare interface LabelingCanvasProps {
+    image: string | {
+        url: string;
+        width: number;
+        height: number;
+    };
+    annotations: Annotation[];
+    onChange?: (event: CanvasChangeEvent) => void;
+    readOnly?: boolean;
+    width?: number;
+    height?: number;
+}
+
+export declare interface LabelingClass {
+    id: string;
+    name: string;
+    color: string;
+    hotkey?: string;
+    group?: string;
+}
+
+declare interface LabelingContextValue {
+    image: string | {
+        url: string;
+        width: number;
+        height: number;
+    };
+    annotations: Annotation[];
+    onChange: (event: CanvasChangeEvent) => void;
+    records: WorkspaceRecord[];
+    activeRecordId: string;
+    onRecordSelect: (record: WorkspaceRecord) => void;
+    classes: LabelingClass[];
+    onClassSelect?: (cls: LabelingClass) => void;
+    selectedClassId: string | null;
+    setSelectedClassId: (id: string | null) => void;
+    selectedAnnotationId: string | null;
+    setSelectedAnnotationId: (id: string | null) => void;
+    onSave: (state: CanvasState_2) => void | Promise<void>;
+    isSaving: boolean;
+    mode: WorkspaceMode;
+    onModeChange?: (mode: WorkspaceMode) => void;
+    validationResults: ValidationResult[];
+    indicator?: WorkspaceIndicator;
+    extensions: LabelingExtension[];
+    tools: ToolType[];
+    theme?: Partial<LabelingTheme>;
+    layout: WorkspaceLayout;
+    navDirection: 'horizontal' | 'vertical';
+    setNavDirection: (dir: 'horizontal' | 'vertical') => void;
+    navVisible: boolean;
+    setNavVisible: (visible: boolean) => void;
+}
+
+export declare interface LabelingExtension {
+    id: string;
+    slot: 'tool' | 'sidePanel' | 'toolbar';
+    render: (context: ExtensionContext) => ReactNode;
+}
+
+export declare function LabelingFloatingToolbar({ items, show, verticalNav, children, }: LabelingFloatingToolbarProps): JSX_2.Element | null;
+
+declare interface LabelingFloatingToolbarProps {
+    items: ToolbarItem[];
+    show?: boolean;
+    verticalNav?: boolean;
+    children?: ReactNode;
+}
+
+export declare function LabelingIndicator({ indicator }: LabelingIndicatorProps): JSX_2.Element | null;
+
+declare interface LabelingIndicatorProps {
+    indicator?: WorkspaceIndicator;
+}
+
+export declare function LabelingInfoPanel({ classes, annotations, selectedAnnotationId, onClassSelect, onAnnotationSelect, onAnnotationDelete, disabled, }: LabelingInfoPanelProps): JSX_2.Element;
+
+declare interface LabelingInfoPanelProps {
+    classes: LabelingClass[];
+    annotations: Annotation[];
+    selectedAnnotationId?: string | null;
+    onClassSelect?: (cls: LabelingClass) => void;
+    onAnnotationSelect?: (annotation: Annotation) => void;
+    onAnnotationDelete?: (annotationId: string) => void;
+    disabled?: boolean;
+}
+
+export declare function LabelingIssuePanel({ annotations, validationResults, selectedAnnotationId, onAnnotationSelect, onValidate, onValidationUpdate: _onValidationUpdate, onValidationDelete, }: LabelingIssuePanelProps): JSX_2.Element;
+
+declare interface LabelingIssuePanelProps {
+    annotations: Annotation[];
+    validationResults: ValidationResult[];
+    selectedAnnotationId?: string | null;
+    onAnnotationSelect?: (annotation: Annotation) => void;
+    onValidate?: (event: ValidateEvent) => void | Promise<void>;
+    onValidationUpdate?: (event: ValidationUpdateEvent) => void | Promise<void>;
+    onValidationDelete?: (event: ValidationDeleteEvent) => void | Promise<void>;
+}
+
+export declare function LabelingNavigation({ records, activeRecordId, onRecordSelect, direction, onDirectionChange, hidden, }: LabelingNavigationProps): JSX_2.Element;
+
+declare interface LabelingNavigationProps {
+    records: WorkspaceRecord[];
+    activeRecordId: string;
+    onRecordSelect: (record: WorkspaceRecord) => void;
+    direction?: 'horizontal' | 'vertical';
+    onDirectionChange?: (direction: 'horizontal' | 'vertical') => void;
+    hidden?: boolean;
+}
+
+export declare function LabelingProvider({ image, annotations, onChange, records, activeRecordId, onRecordSelect, classes, onClassSelect, onSave, isSaving, mode, onModeChange, validationResults, indicator, extensions, tools, theme, layout, children, }: LabelingProviderProps): JSX_2.Element;
+
+declare interface LabelingProviderProps {
+    image: string | {
+        url: string;
+        width: number;
+        height: number;
+    };
+    annotations: Annotation[];
+    onChange: (event: CanvasChangeEvent) => void;
+    records: WorkspaceRecord[];
+    activeRecordId: string;
+    onRecordSelect: (record: WorkspaceRecord) => void;
+    classes: LabelingClass[];
+    onClassSelect?: (cls: LabelingClass) => void;
+    onSave: (state: CanvasState_2) => void | Promise<void>;
+    isSaving?: boolean;
+    mode?: WorkspaceMode;
+    onModeChange?: (mode: WorkspaceMode) => void;
+    validationResults?: ValidationResult[];
+    indicator?: WorkspaceIndicator;
+    extensions?: LabelingExtension[];
+    tools?: ToolType[];
+    theme?: Partial<LabelingTheme>;
+    layout?: WorkspaceLayout;
+    children: ReactNode;
+}
+
+export declare interface LabelingTheme {
+    primary: string;
+    background: string;
+    surface: string;
+    border: string;
+    text: string;
+    textSecondary: string;
+    hover: string;
+    primaryLight: string;
+    fontFamily: string;
+    radius: number;
+    spacing: {
+        sm: number;
+        md: number;
+        lg: number;
+    };
+}
+
+declare interface LabelingTool {
+    id: string;
+    init: (...args: any[]) => Promise<(() => void) | void | undefined> | (() => void) | void;
+}
+
+export declare function LabelingToolbar({ tools, sections: _sections, onSave, isSaving, onPrev, onNext, hasPrev, hasNext, children, }: LabelingToolbarInternalProps): JSX_2.Element;
+
+declare interface LabelingToolbarInternalProps extends LabelingToolbarProps {
+    tools?: ToolType[];
+    children?: ReactNode;
+}
+
+export declare interface LabelingToolbarProps {
+    orientation?: 'horizontal' | 'vertical';
+    sections?: ToolbarSection[];
+    onSave?: () => void;
+    isSaving?: boolean;
+    onPrev?: () => void;
+    onNext?: () => void;
+    hasPrev?: boolean;
+    hasNext?: boolean;
+}
+
+/**
+ * Level 1: All-in-one labeling workspace.
+ * Renders Navigation + Toolbar + Canvas + InfoPanel in a single component.
+ */
+export declare function LabelingWorkspace(props: LabelingWorkspaceProps): JSX_2.Element;
+
+export declare interface LabelingWorkspaceProps {
+    image: string | {
+        url: string;
+        width: number;
+        height: number;
+    };
+    annotations: Annotation[];
+    onChange: (event: CanvasChangeEvent) => void;
+    records: WorkspaceRecord[];
+    activeRecordId: string;
+    onRecordSelect: (record: WorkspaceRecord) => void;
+    totalRecords?: number;
+    onPageChange?: (page: number) => void;
+    classes: LabelingClass[];
+    onClassSelect?: (cls: LabelingClass) => void;
+    onSave: (state: CanvasState_2) => void | Promise<void>;
+    isSaving?: boolean;
+    mode?: WorkspaceMode;
+    onModeChange?: (mode: WorkspaceMode) => void;
+    validationResults?: ValidationResult[];
+    onValidate?: (event: ValidateEvent) => void | Promise<void>;
+    onValidationUpdate?: (event: ValidationUpdateEvent) => void | Promise<void>;
+    onValidationDelete?: (event: ValidationDeleteEvent) => void | Promise<void>;
+    indicator?: WorkspaceIndicator;
+    extensions?: LabelingExtension[];
+    tools?: ToolType[];
+    theme?: Partial<LabelingTheme>;
+    layout?: WorkspaceLayout;
+}
+
+export declare const LAYER_MODE: Record<string, LayerMode>;
+
+declare type LayerMode = [number, number] | [number];
+
+declare interface LayerModeState {
+    mode: LayerMode;
+    setMode: (mode: LayerMode) => void;
+    cycleMode: () => void;
+}
+
+export declare const loadFabric: () => Promise<fabric>;
+
+export declare const magicbrushTool: () => LabelingTool;
+
+declare interface OpacityState {
+    opacity: number;
+    setOpacity: (opacity: number) => void;
+}
+
+declare interface PaletteState {
+    colorCode: string;
+    setColorCode: (colorCode: string) => void;
+}
+
+export declare interface PolygonGeometry {
+    type: 'polygon';
+    /** Normalized vertex coordinates */
+    points: Array<{
+        x: number;
+        y: number;
+    }>;
+}
+
+export declare const polygonTool: () => LabelingTool;
+
+export declare interface RecognitionGeometry {
+    type: 'recognition';
+    start: number;
+    end: number;
+    text?: string;
+}
+
+export declare type RecordStatus = 'unlabeled' | 'labeled' | 'validated' | 'issue';
+
+export declare const renderAllSafe: (targetCanvas?: FabricCanvas) => void;
+
+export declare const segmentAnythingTool: () => LabelingTool;
+
+export declare interface SegmentationGeometry {
+    type: 'segmentation';
+    /** Base64 PNG mask */
+    mask: string;
+    /** Fabric object vector for restoration (optional) */
+    vector?: string;
+}
+
+export declare const selectionTool: () => LabelingTool;
+
+export declare const setCanvasInstance: (instance: FabricCanvas | null) => void;
+
+export declare const setMagicBrushModule: (module: any) => void;
+
+export declare const setSuperpixelModules: (modules: {
+    SLIC: any;
+    MagicBrush: any;
+}) => void;
+
+export declare const subscribeLabelEvents: (listener: LabelEventListener) => () => void;
+
+export declare const superpixelTool: () => LabelingTool;
+
+declare interface TemporalHistoryState<T> {
+    snapshot: T | null;
+    setSnapshot: (snapshot: T) => void;
+    reset: () => void;
+}
+
+export declare const toHex: (color: string) => {
+    hex: string;
+    alpha: string;
+};
+
+export declare const TOOL_INFO_BOUNDED_BOX = "Bounded Box";
+
+export declare const TOOL_INFO_BRUSH = "Brush";
+
+export declare const TOOL_INFO_COMBINED_LABELS = "Combined Label";
+
+export declare const TOOL_INFO_ERASER = "Eraser";
+
+export declare const TOOL_INFO_FILLED_BOX = "Filled Box";
+
+export declare const TOOL_INFO_FILLED_POLYGON = "Filled Polygon";
+
+export declare const TOOL_INFO_MAGIC_BRUSH = "Magic Brush";
+
+export declare const TOOL_INFO_SUPERPIXEL = "Superpixel";
+
+export declare interface ToolbarButtonItem {
+    variant: 'button';
+    id?: string;
+    icon?: ReactNode;
+    title?: string;
+    tooltip?: string;
+    disabled?: boolean;
+    active?: boolean;
+    slim?: boolean;
+    onClick?: () => void;
+    subItems?: ToolbarItem[];
+}
+
+export declare interface ToolbarDividerItem {
+    variant: 'divider';
+}
+
+export declare type ToolbarItem = ToolbarButtonItem | ToolbarRadioItem | ToolbarDividerItem;
+
+export declare interface ToolbarRadioItem {
+    variant: 'radio';
+    id: string;
+    name: string;
+    icon?: ReactNode;
+    title?: string;
+    disabled?: boolean;
+    checked?: boolean;
+    onClick?: () => void;
+}
+
+export declare type ToolbarSection = 'tools' | 'brush' | 'palette' | 'zoom' | 'history' | 'layers' | 'viewMode' | 'validation' | 'navigation' | 'save';
+
+export declare interface ToolExtension extends LabelingExtension {
+    slot: 'tool';
+    icon: ReactNode;
+    label: string;
+    shortcut?: string;
+    canvasHandlers?: {
+        onMouseDown?: (e: CanvasPointerEvent) => void;
+        onMouseMove?: (e: CanvasPointerEvent) => void;
+        onMouseUp?: (e: CanvasPointerEvent) => void;
+    };
+}
+
+declare interface ToolSelectionState {
+    tool: LabelingTool | null;
+    setTool: (tool: LabelingTool | null) => void;
+    overedUniques: string[];
+    setOveredUniques: (overedUniques: string[]) => void;
+    undoStack: string[];
+    redoStack: string[];
+    setUndoStack: (undoStack: string[]) => void;
+    setRedoStack: (redoStack: string[]) => void;
+}
+
+export declare type ToolType = 'selection' | 'brush' | 'blankRect' | 'filledRect' | 'polygon' | 'eraser' | 'magicbrush' | 'superpixel';
+
+export declare const toRgba: (hex: string, opacity: number) => string;
+
+export declare const toRgbaArray: (rgba: string) => number[];
+
+export declare const toRGBAHex: (rgba: string) => string;
+
+/**
+ * Set black pixels transparent and apply opacity to non-black pixels.
+ */
+export declare const transparentBlackPixel: (imageData: ImageData, opacity: number) => ImageData;
+
+export declare const useBrushStore: UseBoundStore<StoreApi<BrushState>>;
+
+export declare const useCanvasObjectsStore: UseBoundStore<StoreApi<CanvasObjectsState>>;
+
+/**
+ * Manages extension lifecycle — provides the ExtensionContext
+ * and hooks up ToolExtension canvas handlers.
+ */
+export declare function useExtensions(options: UseExtensionsOptions): {
+    context: ExtensionContext;
+    toolExtensions: ToolExtension[];
+    sidePanelExtensions: LabelingExtension[];
+    toolbarExtensions: LabelingExtension[];
+    activeToolExtension: ToolExtension | undefined;
+};
+
+declare interface UseExtensionsOptions {
+    extensions: LabelingExtension[];
+    image: {
+        url: string;
+        width: number;
+        height: number;
+    };
+    annotations: Annotation[];
+    selectedIds: string[];
+    activeTool: string;
+    addAnnotations: (annotations: Annotation[]) => void;
+    updateAnnotation: (id: string, annotation: Partial<Annotation>) => void;
+    removeAnnotations: (ids: string[]) => void;
+    setTool: (tool: string) => void;
+}
+
+/**
+ * Level 3 headless hook — Direct canvas access.
+ *
+ * Provides low-level canvas operations: add/remove objects,
+ * export state, zoom control, etc.
+ */
+export declare function useLabelingCanvas(): {
+    objects: LabeledFabricObject[];
+    zoom: number;
+    getAnnotations: (imageWidth: number, imageHeight: number) => Promise<Annotation[]>;
+    addAnnotation: (annotation: Annotation, imageWidth: number, imageHeight: number) => Promise<void>;
+    removeAnnotation: (annotationId: string) => void;
+    clearCanvas: () => void;
+    exportState: (imageWidth: number, imageHeight: number) => Promise<CanvasState_2>;
+    setZoomLevel: (level: number) => void;
+};
+
+export declare function useLabelingContext(): LabelingContextValue;
+
+/**
+ * Level 3 headless hook — Canvas undo/redo history.
+ *
+ * Uses the tool store's undo/redo stacks (JSON snapshots).
+ */
+export declare function useLabelingHistory(): {
+    canUndo: boolean;
+    canRedo: boolean;
+    undo: () => Promise<void>;
+    redo: () => Promise<void>;
+    pushSnapshot: () => void;
+    clear: () => void;
+};
+
+/**
+ * Level 3 headless hook — Tool selection and palette state.
+ *
+ * Returns current tool, setTool, and palette/brush/opacity state with setters.
+ */
+export declare function useLabelingTools(): {
+    activeToolId: string | null;
+    currentTool: LabelingTool | null;
+    setTool: (toolType: ToolType) => void;
+    clearTool: () => void;
+    colorCode: string;
+    setColorCode: (colorCode: string) => void;
+    opacity: number;
+    setOpacity: (opacity: number) => void;
+    brush: {
+        id: number;
+        lineCap: string;
+        lineWidth: number;
+    };
+    setBrush: (brush: {
+        id: number;
+        lineCap: string;
+        lineWidth: number;
+    }) => void;
+};
+
+export declare const useLayerModeStore: UseBoundStore<StoreApi<LayerModeState>>;
+
+export declare const useOpacityStore: UseBoundStore<StoreApi<OpacityState>>;
+
+export declare const usePaletteStore: UseBoundStore<StoreApi<PaletteState>>;
+
+export declare const useToolSelectionStore: UseBoundStore<StoreApi<ToolSelectionState>>;
+
+export declare const useZoomStore: UseBoundStore<StoreApi<ZoomState>>;
+
+export declare interface ValidateEvent {
+    annotationIds: string[];
+    result: boolean;
+    reason?: string;
+}
+
+export declare interface ValidationDeleteEvent {
+    ids: string[];
+}
+
+export declare interface ValidationResult {
+    id: string;
+    annotationId?: string;
+    result: boolean;
+    reason?: string;
+    validatedAt?: string;
+}
+
+export declare interface ValidationUpdateEvent {
+    id: string;
+    result?: boolean;
+    reason?: string;
+}
+
+export declare interface WorkspaceIndicator {
+    title: string;
+    subtitle?: string;
+    detail?: string;
+    progress?: {
+        current: number;
+        total: number;
+    };
+}
+
+export declare interface WorkspaceLayout {
+    navigation?: 'left' | 'bottom' | 'hidden';
+    toolbar?: 'top' | 'bottom';
+}
+
+export declare type WorkspaceMode = 'labeling' | 'validation' | 'readonly';
+
+export declare interface WorkspaceRecord {
+    id: string;
+    title: string;
+    thumbnail?: string;
+    status?: RecordStatus;
+    children?: WorkspaceRecord[];
+    meta?: Record<string, unknown>;
+}
+
+declare interface ZoomPayload {
+    direction: 1 | 0 | -1;
+    level: number;
+    point?: {
+        x: number;
+        y: number;
+    };
+    onChange: (payload: {
+        level: number;
+        width: number;
+        height: number;
+    }) => void;
+}
+
+declare interface ZoomState {
+    level: number;
+    width: number;
+    height: number;
+    setZoom: (payload: {
+        level: number;
+        width: number;
+        height: number;
+    }) => void;
+    reset: () => void;
+}
+
+export { }