@nice2dev/ui-graphics 1.0.0

package/dist/types/pixel/pixelEditorUtils.d.ts

@@ -0,0 +1,136 @@
+/**
+ * pixelEditorUtils.ts — Drawing algorithms for the pixel editor.
+ * Bresenham line, midpoint ellipse, flood fill, selection, brush shapes,
+ * pressure-aware blending, dithering, gradient, symmetry etc.
+ */
+export type RGBA = [number, number, number, number];
+export type BrushShape = 'square' | 'circle' | 'diamond' | 'spray';
+export type SymmetryMode = 'none' | 'h' | 'v' | 'both' | 'radial4';
+export interface BrushConfig {
+    size: number;
+    shape: BrushShape;
+    opacity: number;
+    flow: number;
+    spacing: number;
+    pressureSize: boolean;
+    pressureOpacity: boolean;
+    hardness: number;
+}
+export declare const DEFAULT_BRUSH: BrushConfig;
+/** Read a pixel from ImageData at (x,y). Returns [r,g,b,a]. */
+export declare function getPixel(data: ImageData, x: number, y: number): RGBA;
+/** Set a pixel in ImageData at (x,y). */
+export declare function setPixel(data: ImageData, x: number, y: number, color: RGBA): void;
+/** Blend a pixel onto ImageData at (x,y) with alpha compositing. */
+export declare function blendPixel(data: ImageData, x: number, y: number, color: RGBA, strength?: number): void;
+/** Generate brush mask: returns array of {dx, dy, strength} offsets. */
+export declare function getBrushMask(cfg: BrushConfig, pressure?: number): {
+    dx: number;
+    dy: number;
+    strength: number;
+}[];
+/** Apply brush stamp at (x,y) with all brush settings. */
+export declare function applyBrushStamp(data: ImageData, x: number, y: number, color: RGBA, cfg: BrushConfig, pressure?: number, erase?: boolean): void;
+/** Get symmetry points for a coordinate. */
+export declare function getSymmetryPoints(x: number, y: number, w: number, h: number, mode: SymmetryMode): {
+    x: number;
+    y: number;
+}[];
+/** Draw a linear gradient between two points on ImageData. */
+export declare function drawGradient(data: ImageData, x0: number, y0: number, x1: number, y1: number, color1: RGBA, color2: RGBA, sel?: {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+} | null): void;
+/** Apply dithered brush stamp. */
+export declare function applyDitherStamp(data: ImageData, x: number, y: number, color: RGBA, size: number, pressure?: number): void;
+/** Copy pixels from a selection region. */
+export declare function copySelection(data: ImageData, sel: {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}): ImageData;
+/** Paste ImageData at position. */
+export declare function pasteAt(dst: ImageData, src: ImageData, ox: number, oy: number): void;
+/** Clear pixels in selection region. */
+export declare function clearSelection(data: ImageData, sel: {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}): void;
+/** HSV to RGB conversion. h: 0-360, s: 0-1, v: 0-1. Returns [r,g,b] 0-255. */
+export declare function hsvToRgb(h: number, s: number, v: number): [number, number, number];
+/** RGB to HSV conversion. r,g,b: 0-255. Returns [h: 0-360, s: 0-1, v: 0-1]. */
+export declare function rgbToHsv(r: number, g: number, b: number): [number, number, number];
+/** Bresenham line — calls callback for each pixel along the line. */
+export declare function bresenhamLine(x0: number, y0: number, x1: number, y1: number, cb: (x: number, y: number) => void): void;
+/** Draw a filled rectangle. */
+export declare function fillRect(data: ImageData, x0: number, y0: number, x1: number, y1: number, color: RGBA): void;
+/** Draw rectangle outline. */
+export declare function strokeRect(data: ImageData, x0: number, y0: number, x1: number, y1: number, color: RGBA): void;
+/** Midpoint ellipse algorithm — filled. */
+export declare function fillEllipse(data: ImageData, cx: number, cy: number, rx: number, ry: number, color: RGBA): void;
+/** Midpoint ellipse — outline only. */
+export declare function strokeEllipse(data: ImageData, cx: number, cy: number, rx: number, ry: number, color: RGBA): void;
+/** Flood fill — fills connected region of same color with new color. */
+export declare function floodFill(data: ImageData, startX: number, startY: number, fillColor: RGBA): void;
+/** Check if two RGBA colors are equal (with small tolerance for alpha). */
+export declare function colorsEqual(a: RGBA, b: RGBA, tolerance?: number): boolean;
+/** Parse hex color string to RGBA. */
+export declare function hexToRGBA(hex: string, alpha?: number): RGBA;
+/** Convert RGBA to hex string. */
+export declare function rgbaToHex(c: RGBA): string;
+/** Draw checkerboard pattern (for transparency indication). */
+export declare function drawCheckerboard(ctx: CanvasRenderingContext2D, width: number, height: number, cellSize: number, color1?: string, color2?: string): void;
+/** Generate spritesheet from frames (horizontal strip). */
+export declare function generateSpritesheet(frames: ImageData[], cols?: number): {
+    canvas: HTMLCanvasElement;
+    frameWidth: number;
+    frameHeight: number;
+    cols: number;
+    rows: number;
+} | null;
+/** Create blank ImageData. */
+export declare function createBlankImageData(width: number, height: number): ImageData;
+/** Clone ImageData. */
+export declare function cloneImageData(src: ImageData): ImageData;
+/** Composite two ImageData layers (src over dst), respecting opacity. */
+export declare function compositeOver(dst: ImageData, src: ImageData, srcOpacity?: number, offsetX?: number, offsetY?: number): void;
+/** Flip ImageData horizontally. */
+export declare function flipH(src: ImageData): ImageData;
+/** Flip ImageData vertically. */
+export declare function flipV(src: ImageData): ImageData;
+/** Rotate ImageData 90° clockwise. Returns new ImageData with swapped dimensions. */
+export declare function rotateCW(src: ImageData): ImageData;
+export type DitheringAlgorithm = 'none' | 'ordered-2x2' | 'ordered-4x4' | 'ordered-8x8' | 'floyd-steinberg' | 'jarvis-judice-ninke' | 'stucki' | 'atkinson' | 'burkes' | 'sierra' | 'sierra-lite' | 'random';
+/** Apply ordered dithering with Bayer matrix */
+export declare function ditherOrdered(data: ImageData, palette: RGBA[], matrix?: number[][], strength?: number): ImageData;
+/** Floyd-Steinberg error diffusion dithering */
+export declare function ditherFloydSteinberg(data: ImageData, palette: RGBA[]): ImageData;
+/** Jarvis-Judice-Ninke dithering (larger error diffusion kernel) */
+export declare function ditherJarvisJudiceNinke(data: ImageData, palette: RGBA[]): ImageData;
+/** Atkinson dithering (preserves details better) */
+export declare function ditherAtkinson(data: ImageData, palette: RGBA[]): ImageData;
+/** Random dithering */
+export declare function ditherRandom(data: ImageData, palette: RGBA[], strength?: number): ImageData;
+/** Apply dithering with specified algorithm */
+export declare function applyDithering(data: ImageData, palette: RGBA[], algorithm: DitheringAlgorithm): ImageData;
+/** Generate palette from image using median cut algorithm */
+export declare function extractPalette(data: ImageData, maxColors: number): RGBA[];
+/** Convert hex palette to RGBA array */
+export declare function hexPaletteToRGBA(hexColors: string[]): RGBA[];
+export interface ReferenceOverlay {
+    image: ImageData;
+    x: number;
+    y: number;
+    opacity: number;
+    scale: number;
+    locked: boolean;
+}
+/** Create reference overlay from file */
+export declare function createReferenceOverlay(file: File, targetWidth: number, targetHeight: number): Promise<ReferenceOverlay>;
+/** Render reference overlay onto canvas */
+export declare function renderReferenceOverlay(ctx: CanvasRenderingContext2D, ref: ReferenceOverlay, zoom: number, panX: number, panY: number): void;

package/dist/types/pixel/tileMapMode.d.ts

@@ -0,0 +1,122 @@
+/**
+ * tileMapMode — Tile map editing mode for PixelEditor
+ *
+ * Features:
+ * - Repeat pattern (tile seamless preview)
+ * - Mirror modes (horizontal, vertical, both)
+ * - Tile grid overlay
+ * - Tile offset/wrapping
+ * - Seamless tile generation
+ * - Auto-tile detection
+ */
+export type TileMirrorMode = 'none' | 'horizontal' | 'vertical' | 'both';
+export type TileRepeatPattern = 'none' | 'repeat' | 'repeat-x' | 'repeat-y' | 'mirror-repeat' | 'brick' | 'hexagonal';
+export interface TileMapSettings {
+    /** Whether tile map mode is enabled */
+    enabled: boolean;
+    /** Mirror mode for editing */
+    mirrorMode: TileMirrorMode;
+    /** Repeat pattern for preview */
+    repeatPattern: TileRepeatPattern;
+    /** Number of tiles to show in preview (width) */
+    repeatCountX: number;
+    /** Number of tiles to show in preview (height) */
+    repeatCountY: number;
+    /** Brick offset (0-1, only for brick pattern) */
+    brickOffset: number;
+    /** Show tile grid */
+    showGrid: boolean;
+    /** Grid color */
+    gridColor: string;
+    /** Grid opacity (0-1) */
+    gridOpacity: number;
+    /** Wrap editing across tile boundaries */
+    wrapEditing: boolean;
+    /** Show seam warning markers */
+    showSeamWarnings: boolean;
+}
+export interface TileMapState {
+    settings: TileMapSettings;
+    /** Offset for scrolling the tile preview */
+    previewOffsetX: number;
+    previewOffsetY: number;
+    /** Zoom level for tile preview */
+    previewZoom: number;
+}
+export declare const DEFAULT_TILE_MAP_SETTINGS: TileMapSettings;
+/**
+ * Apply mirror transformation to coordinates
+ */
+export declare function applyMirror(x: number, y: number, width: number, height: number, mode: TileMirrorMode): {
+    x: number;
+    y: number;
+}[];
+/**
+ * Wrap coordinates to tile boundaries
+ */
+export declare function wrapCoordinates(x: number, y: number, width: number, height: number): {
+    x: number;
+    y: number;
+};
+/**
+ * Get all affected coordinates for a draw operation
+ */
+export declare function getAffectedCoordinates(x: number, y: number, width: number, height: number, settings: TileMapSettings): {
+    x: number;
+    y: number;
+}[];
+/**
+ * Render tile pattern to a canvas for preview
+ */
+export declare function renderTilePattern(source: HTMLCanvasElement | ImageData, settings: TileMapSettings, targetWidth: number, targetHeight: number): HTMLCanvasElement;
+/**
+ * Analyze tile for seam issues (discontinuities at edges)
+ */
+export declare function analyzeSeams(imageData: ImageData, threshold?: number): {
+    top: number[];
+    right: number[];
+    bottom: number[];
+    left: number[];
+    score: number;
+};
+/**
+ * Make tile seamless using offset blend technique
+ */
+export declare function makeSeamless(imageData: ImageData, blendWidth?: number): ImageData;
+export interface UseTileMapModeOptions {
+    /** Initial settings */
+    initialSettings?: Partial<TileMapSettings>;
+    /** Tile width */
+    tileWidth: number;
+    /** Tile height */
+    tileHeight: number;
+    /** Called when settings change */
+    onSettingsChange?: (settings: TileMapSettings) => void;
+}
+export interface UseTileMapModeReturn {
+    /** Current settings */
+    settings: TileMapSettings;
+    /** Update settings */
+    updateSettings: (partial: Partial<TileMapSettings>) => void;
+    /** Toggle tile map mode */
+    toggle: () => void;
+    /** Set mirror mode */
+    setMirrorMode: (mode: TileMirrorMode) => void;
+    /** Set repeat pattern */
+    setRepeatPattern: (pattern: TileRepeatPattern) => void;
+    /** Get affected coordinates for a draw operation */
+    getDrawCoordinates: (x: number, y: number) => {
+        x: number;
+        y: number;
+    }[];
+    /** Render tile preview */
+    renderPreview: (source: HTMLCanvasElement | ImageData, width: number, height: number) => HTMLCanvasElement;
+    /** Analyze seams */
+    analyzeSeams: (imageData: ImageData) => ReturnType<typeof analyzeSeams>;
+    /** Make tile seamless */
+    makeSeamless: (imageData: ImageData) => ImageData;
+    /** Reset to defaults */
+    reset: () => void;
+}
+export declare function useTileMapMode(options: UseTileMapModeOptions): UseTileMapModeReturn;
+export default useTileMapMode;

package/dist/types/pixel/usePixelEditor.d.ts

@@ -0,0 +1,114 @@
+/**
+ * usePixelEditor — custom hook encapsulating ALL state, refs, callbacks,
+ * side-effects and memos for the PixelEditor component.
+ */
+import { type BrushConfig, type SymmetryMode } from "./pixelEditorUtils";
+import { type Tool, type Layer, type BlendMode, type Selection } from "./pixelEditorTypes";
+export interface UsePixelEditorProps {
+    initialWidth?: number;
+    initialHeight?: number;
+    onSaveToLibrary?: (dataUrl: string, name: string, mimeType: string) => void;
+}
+export interface PixelEditorAPI {
+    dw: number;
+    dh: number;
+    layers: Layer[];
+    aLi: number;
+    setALi: React.Dispatch<React.SetStateAction<number>>;
+    fc: number;
+    afi: number;
+    setAfi: React.Dispatch<React.SetStateAction<number>>;
+    fDur: number[];
+    tool: Tool;
+    setTool: React.Dispatch<React.SetStateAction<Tool>>;
+    col1: string;
+    setCol1: React.Dispatch<React.SetStateAction<string>>;
+    col2: string;
+    setCol2: React.Dispatch<React.SetStateAction<string>>;
+    brush: BrushConfig;
+    setBrush: React.Dispatch<React.SetStateAction<BrushConfig>>;
+    zoom: number;
+    setZoom: React.Dispatch<React.SetStateAction<number>>;
+    grid: boolean;
+    setGrid: React.Dispatch<React.SetStateAction<boolean>>;
+    onion: boolean;
+    setOnion: React.Dispatch<React.SetStateAction<boolean>>;
+    fps: number;
+    setFps: React.Dispatch<React.SetStateAction<number>>;
+    playing: boolean;
+    setPlaying: React.Dispatch<React.SetStateAction<boolean>>;
+    pal: string[];
+    setPal: React.Dispatch<React.SetStateAction<string[]>>;
+    cursor: {
+        x: number;
+        y: number;
+    } | null;
+    setCursor: React.Dispatch<React.SetStateAction<{
+        x: number;
+        y: number;
+    } | null>>;
+    dlgNew: boolean;
+    setDlgNew: React.Dispatch<React.SetStateAction<boolean>>;
+    nw: number;
+    setNw: React.Dispatch<React.SetStateAction<number>>;
+    nh: number;
+    setNh: React.Dispatch<React.SetStateAction<number>>;
+    sel: Selection | null;
+    setSel: React.Dispatch<React.SetStateAction<Selection | null>>;
+    symmetry: SymmetryMode;
+    setSymmetry: React.Dispatch<React.SetStateAction<SymmetryMode>>;
+    shapeFilled: boolean;
+    setShapeFilled: React.Dispatch<React.SetStateAction<boolean>>;
+    pressure: number;
+    showHSV: boolean;
+    setShowHSV: React.Dispatch<React.SetStateAction<boolean>>;
+    editingLayerName: string | null;
+    setEditingLayerName: React.Dispatch<React.SetStateAction<string | null>>;
+    cvRef: React.RefObject<HTMLCanvasElement>;
+    boxRef: React.RefObject<HTMLDivElement>;
+    fInp: React.RefObject<HTMLInputElement>;
+    clipboard: React.MutableRefObject<ImageData | null>;
+    drawing: React.MutableRefObject<boolean>;
+    panning: React.MutableRefObject<boolean>;
+    undo: () => void;
+    redo: () => void;
+    openFile: (file: File) => Promise<void>;
+    exportAse: () => Promise<void>;
+    exportPNG: () => void;
+    exportJPG: () => void;
+    exportWebP: () => void;
+    exportBMP: () => void;
+    exportSVG: () => void;
+    exportSheet: () => void;
+    saveToLibrary: () => void;
+    addLayer: () => void;
+    rmLayer: () => void;
+    toggleVis: (i: number) => void;
+    toggleLock: (i: number) => void;
+    setLayerOpacity: (i: number, op: number) => void;
+    setLayerBlendMode: (i: number, mode: BlendMode) => void;
+    renameLayer: (i: number, name: string) => void;
+    moveLayerUp: () => void;
+    moveLayerDown: () => void;
+    mergeDown: () => void;
+    dupLayer: () => void;
+    addFrame: () => void;
+    dupFrame: () => void;
+    rmFrame: () => void;
+    flipCv: (dir: "h" | "v") => void;
+    rotateCv: () => void;
+    clearCv: () => void;
+    newDoc: (w: number, h: number) => void;
+    doCopy: () => void;
+    doCut: () => void;
+    doPaste: () => void;
+    doDeleteSel: () => void;
+    doSelectAll: () => void;
+    doDeselectAll: () => void;
+    onDown: (e: React.PointerEvent<HTMLCanvasElement>) => void;
+    onMove: (e: React.PointerEvent<HTMLCanvasElement>) => void;
+    onUp: (e: React.PointerEvent<HTMLCanvasElement>) => void;
+    onWheel: (e: React.WheelEvent) => void;
+    thumbs: string[];
+}
+export declare function usePixelEditor({ initialWidth, initialHeight, onSaveToLibrary, }: UsePixelEditorProps): PixelEditorAPI;

package/dist/types/texture/Nice3DTexturePainter.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Nice3DTexturePainter.tsx — Paint textures directly on 3D models.
+ *
+ * Features:
+ * - WebGL-based 3D model viewer
+ * - UV unwrap visualization
+ * - Brush painting on UV texture
+ * - Texture baking and export (PNG, JPEG, WebP)
+ * - Layer support for non-destructive painting
+ * - Color picker and brush settings
+ */
+import React from "react";
+export interface TexturePainterProps {
+    /** Initial texture image URL. */
+    textureUrl?: string;
+    /** Texture width. Default: 1024. */
+    textureWidth?: number;
+    /** Texture height. Default: 1024. */
+    textureHeight?: number;
+    /** Called when texture is saved. */
+    onSave?: (blob: Blob) => void;
+    /** CSS class. */
+    className?: string;
+}
+export interface TexturePainterApi {
+    brush: BrushSettings;
+    setBrush: React.Dispatch<React.SetStateAction<BrushSettings>>;
+    layers: TextureLayer[];
+    addLayer: (name: string) => void;
+    removeLayer: (id: string) => void;
+    activeLayerId: string | null;
+    setActiveLayerId: React.Dispatch<React.SetStateAction<string | null>>;
+    tool: "brush" | "eraser" | "eyedropper" | "fill";
+    setTool: React.Dispatch<React.SetStateAction<"brush" | "eraser" | "eyedropper" | "fill">>;
+    paintStroke: (x: number, y: number) => void;
+    flattenToBlob: () => Promise<Blob | null>;
+}
+export interface BrushSettings {
+    size: number;
+    opacity: number;
+    hardness: number;
+    color: string;
+    blendMode: "normal" | "multiply" | "screen" | "overlay";
+}
+export interface TextureLayer {
+    id: string;
+    name: string;
+    visible: boolean;
+    opacity: number;
+    canvas: HTMLCanvasElement;
+}
+export declare function useTexturePainter(width: number, height: number): TexturePainterApi;
+/** 3D texture painting tool with UV-space brush painting. */
+export declare const Nice3DTexturePainter: React.FC<TexturePainterProps>;
+export default Nice3DTexturePainter;

package/dist/types/ui/NiceUIDesigner.d.ts

@@ -0,0 +1,43 @@
+/**
+ * NiceUIDesigner.tsx — Drag & drop UI builder that generates React code.
+ *
+ * Features:
+ * - Visual drag & drop layout builder
+ * - Component palette (buttons, inputs, text, containers)
+ * - Property editor panel
+ * - Responsive breakpoint preview
+ * - Export to React/TSX code
+ * - Undo/redo support
+ */
+import React from "react";
+export interface UIDesignerProps {
+    /** Called when the design changes. */
+    onChange?: (tree: UINode[]) => void;
+    /** Called on code export. */
+    onExport?: (code: string) => void;
+    /** CSS class. */
+    className?: string;
+}
+export interface UIDesignerApi {
+    tree: UINode[];
+    setTree: React.Dispatch<React.SetStateAction<UINode[]>>;
+    selectedId: string | null;
+    setSelectedId: React.Dispatch<React.SetStateAction<string | null>>;
+    addNode: (type: UIComponentType, parentId?: string) => void;
+    removeNode: (id: string) => void;
+    updateNode: (id: string, updates: Partial<Pick<UINode, "props" | "style">>) => void;
+    exportCode: () => string;
+}
+export interface UINode {
+    id: string;
+    type: UIComponentType;
+    props: Record<string, unknown>;
+    children: UINode[];
+    style: React.CSSProperties;
+}
+export type UIComponentType = "Container" | "Row" | "Column" | "Text" | "Heading" | "Button" | "TextInput" | "Image" | "Spacer" | "Divider" | "Card" | "List";
+export declare function exportToReact(tree: UINode[], componentName?: string): string;
+export declare function useUIDesigner(): UIDesignerApi;
+/** Visual drag & drop UI builder that generates React code. */
+export declare const NiceUIDesigner: React.FC<UIDesignerProps>;
+export default NiceUIDesigner;

package/dist/types/vector/PathSimplificationPanel.d.ts

@@ -0,0 +1,15 @@
+/**
+ * PathSimplificationPanel — UI for path simplification and smoothing
+ */
+import type { Point } from './pathSimplification';
+export interface PathSimplificationPanelProps {
+    /** Points array from selected shape */
+    points: Point[];
+    /** Called when points are modified */
+    onApply: (points: Point[]) => void;
+    /** Whether the path is closed (polygon) */
+    isClosed?: boolean;
+    className?: string;
+}
+export declare function PathSimplificationPanel({ points, onApply, isClosed, className, }: PathSimplificationPanelProps): import("react/jsx-runtime").JSX.Element;
+export default PathSimplificationPanel;

package/dist/types/vector/PdfExportPanel.d.ts

@@ -0,0 +1,20 @@
+/**
+ * PdfExportPanel
+ * UI for exporting vector graphics to PDF
+ */
+import React from 'react';
+import type { PdfExportResult } from './pdfExport';
+export interface PdfExportPanelProps {
+    /** SVG element or string to export */
+    svg: SVGElement | string | null;
+    /** Called when export starts */
+    onExportStart?: () => void;
+    /** Called when export completes */
+    onExportComplete?: (result: PdfExportResult) => void;
+    /** Called on export error */
+    onExportError?: (error: Error) => void;
+    /** Custom class name */
+    className?: string;
+}
+export declare const PdfExportPanel: React.FC<PdfExportPanelProps>;
+export default PdfExportPanel;

package/dist/types/vector/TextOnPathPanel.d.ts

@@ -0,0 +1,26 @@
+/**
+ * TextOnPathPanel
+ * UI for editing text along a path
+ */
+import React from 'react';
+import type { TextOnPathOptions } from './textOnPath';
+export interface TextOnPathPanelProps {
+    /** Initial text */
+    initialText?: string;
+    /** Initial path data */
+    initialPath?: string;
+    /** Called when result changes */
+    onChange?: (result: {
+        svg: string;
+        options: TextOnPathOptions;
+    }) => void;
+    /** Custom class name */
+    className?: string;
+    /** Preview size */
+    previewSize?: {
+        width: number;
+        height: number;
+    };
+}
+export declare const TextOnPathPanel: React.FC<TextOnPathPanelProps>;
+export default TextOnPathPanel;

package/dist/types/vector/VectorEditor.d.ts

@@ -0,0 +1,32 @@
+/**
+ * VectorEditor — SVG-based vector drawing editor.
+ *
+ * Refactored: logic extracted to useVectorEditor hook,
+ * UI split into VectorEditorMenuBar, VectorEditorRightPanel, VectorEditorStatusBar.
+ *
+ * Features:
+ *  - Tools: pointer/select, rectangle, rounded rect, ellipse, line, arrow,
+ *    polygon, star, pen (polyline), text
+ *  - Fill & stroke colour + stroke-width editing per shape
+ *  - Opacity per shape, rotation per shape
+ *  - Shape list with selection, delete, reorder (bring to front / send to back)
+ *  - Copy / Paste / Duplicate
+ *  - Flip horizontal / vertical
+ *  - Alignment: left, center, right, top, middle, bottom
+ *  - Snap to grid toggle
+ *  - Multi-format export: SVG, PNG, JPG, WebP, BMP
+ *  - SVG import (paste or file)
+ *  - Undo / Redo
+ *  - Zoom & pan (wheel + middle-click)
+ *  - Keyboard shortcuts: Delete, Ctrl+Z, Ctrl+Y, Ctrl+C, Ctrl+V, Ctrl+D,
+ *    V, R, U, C, L, A, G, S, P, T
+ */
+import React from "react";
+export interface VectorEditorProps {
+    width?: number;
+    height?: number;
+    className?: string;
+    onSaveToLibrary?: (dataUrl: string, name: string, mimeType: string) => void;
+}
+export declare const VectorEditor: React.FC<VectorEditorProps>;
+export default VectorEditor;

package/dist/types/vector/VectorEditorMenuBar.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { VectorEditorAPI } from "./useVectorEditor";
+interface Props {
+    api: VectorEditorAPI;
+    hasOnSaveToLibrary?: boolean;
+}
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;

package/dist/types/vector/VectorEditorRightPanel.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { VectorEditorAPI } from "./useVectorEditor";
+interface Props {
+    api: VectorEditorAPI;
+}
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;

package/dist/types/vector/VectorEditorShapeRenderer.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { VShape } from "./vectorEditorTypes";
+interface ShapeRendererProps {
+    shape: VShape;
+    selected: boolean;
+    zoom: number;
+}
+export declare const ShapeRenderer: React.FC<ShapeRendererProps>;
+export {};

package/dist/types/vector/VectorEditorStatusBar.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { VectorEditorAPI } from "./useVectorEditor";
+interface Props {
+    api: VectorEditorAPI;
+    artW: number;
+    artH: number;
+}
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;

package/dist/types/vector/VectorFilterPanel.d.ts

@@ -0,0 +1,19 @@
+/**
+ * VectorFilterPanel — UI for editing SVG filters on shapes
+ *
+ * Features:
+ * - Add/remove filters
+ * - Filter presets
+ * - Individual filter property editing
+ * - Drag to reorder filters
+ * - Enable/disable individual filters
+ */
+import type { VShape } from './vectorEditorTypes';
+import { type SvgFilter } from './vectorSvgFilters';
+export interface VectorFilterPanelProps {
+    shape: VShape | null;
+    onFiltersChange: (shapeId: string, filters: SvgFilter[]) => void;
+    className?: string;
+}
+export declare function VectorFilterPanel({ shape, onFiltersChange, className, }: VectorFilterPanelProps): import("react/jsx-runtime").JSX.Element;
+export default VectorFilterPanel;

package/dist/types/vector/VectorPatternPanel.d.ts

@@ -0,0 +1,21 @@
+/**
+ * VectorPatternPanel — UI for pattern fill editing
+ */
+import type { PatternFill } from './vectorPatternFills';
+export interface VectorPatternPanelProps {
+    /** Currently selected pattern */
+    pattern: PatternFill | null;
+    /** Called when pattern changes */
+    onChange: (pattern: PatternFill | null) => void;
+    /** Whether pattern fill is enabled */
+    enabled: boolean;
+    /** Called when enabled state changes */
+    onEnabledChange: (enabled: boolean) => void;
+    /** Saved patterns library */
+    savedPatterns?: PatternFill[];
+    /** Called when pattern is saved to library */
+    onSavePattern?: (pattern: PatternFill) => void;
+    className?: string;
+}
+export declare function VectorPatternPanel({ pattern, onChange, enabled, onEnabledChange, savedPatterns, onSavePattern, className, }: VectorPatternPanelProps): import("react/jsx-runtime").JSX.Element;
+export default VectorPatternPanel;