@nice2dev/ui-graphics 1.0.0

package/dist/types/animation/shapes/heads.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+export type HeadProps = {
+    colors: string[];
+    scale?: number;
+    transform?: string;
+    strokeWidth?: number;
+};
+export declare const HeadRound: React.FC<HeadProps>;
+export declare const HeadOval: React.FC<HeadProps>;
+export declare const HeadSquare: React.FC<HeadProps>;
+export declare const HeadHeart: React.FC<HeadProps>;
+export declare const HeadDiamond: React.FC<HeadProps>;
+export declare const HeadLong: React.FC<HeadProps>;
+export declare const HeadChubby: React.FC<HeadProps>;
+export declare const HEAD_RENDERERS: Record<string, React.FC<HeadProps>>;
+export declare const Head: React.FC<HeadProps & {
+    variant: string;
+}>;

package/dist/types/animation/shapes/headwear.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export type HeadwearProps = {
+    colors: string[];
+    scale?: number;
+    transform?: string;
+    strokeWidth?: number;
+};
+export declare const HeadwearNone: React.FC<HeadwearProps>;
+export declare const HeadwearCap: React.FC<HeadwearProps>;
+export declare const HeadwearCrown: React.FC<HeadwearProps>;
+export declare const HeadwearHeadphones: React.FC<HeadwearProps>;
+export declare const HeadwearBeanie: React.FC<HeadwearProps>;
+export declare const HEADWEAR_RENDERERS: Record<string, React.FC<HeadwearProps>>;
+export declare const Headwear: React.FC<HeadwearProps & {
+    variant: string;
+}>;

package/dist/types/animation/shapes/legs.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export type LegProps = {
+    colors: string[];
+    side: -1 | 1;
+    variant?: string;
+    scale?: number;
+    transform?: string;
+    strokeWidth?: number;
+};
+export declare const Leg: React.FC<LegProps>;

package/dist/types/animation/shapes/mouths.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+export type MouthProps = {
+    colors: string[];
+    y?: number;
+    scale?: number;
+    transform?: string;
+    strokeWidth?: number;
+};
+export declare const MouthSmile: React.FC<MouthProps>;
+export declare const MouthFrown: React.FC<MouthProps>;
+export declare const MouthOpen: React.FC<MouthProps>;
+export declare const MouthFlat: React.FC<MouthProps>;
+export declare const MouthGrin: React.FC<MouthProps>;
+export declare const MOUTH_RENDERERS: Record<string, React.FC<MouthProps>>;
+export declare const Mouth: React.FC<MouthProps & {
+    variant: string;
+}>;

package/dist/types/animation/shapes/noses.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+export type NoseProps = {
+    colors: string[];
+    y?: number;
+    scale?: number;
+    transform?: string;
+    strokeWidth?: number;
+};
+export declare const NoseLine: React.FC<NoseProps>;
+export declare const NoseTriangle: React.FC<NoseProps>;
+export declare const NoseRound: React.FC<NoseProps>;
+export declare const NoseButton: React.FC<NoseProps>;
+export declare const NoseNone: React.FC<NoseProps>;
+export declare const NOSE_RENDERERS: Record<string, React.FC<NoseProps>>;
+export declare const Nose: React.FC<NoseProps & {
+    variant: string;
+}>;

package/dist/types/animation/shapes/outfits.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export type OutfitProps = {
+    colors: string[];
+    scale?: number;
+    transform?: string;
+    strokeWidth?: number;
+};
+export declare const OutfitTee: React.FC<OutfitProps>;
+export declare const OutfitHoodie: React.FC<OutfitProps>;
+export declare const OutfitSuit: React.FC<OutfitProps>;
+export declare const OUTFIT_RENDERERS: Record<string, React.FC<OutfitProps>>;
+export declare const Outfit: React.FC<OutfitProps & {
+    variant: string;
+}>;

package/dist/types/animation/shapes/torsos.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export type TorsoProps = {
+    colors: string[];
+    scale?: number;
+    transform?: string;
+    strokeWidth?: number;
+    variant?: string;
+};
+export declare const Torso: React.FC<TorsoProps>;

package/dist/types/animation/spineExport.d.ts

@@ -0,0 +1,66 @@
+/**
+ * spineExport.ts — Export animations to Spine JSON format.
+ *
+ * Spine is a popular 2D skeletal animation tool. This module exports
+ * rig configurations and pose sequences to the Spine JSON format
+ * for import into Spine editor or Spine runtimes.
+ */
+import type { RigPose, RigConfig } from "./rig/rigTypes";
+export interface SpineExportOptions {
+    /** Skeleton name. */
+    name?: string;
+    /** Character size for FK solving. */
+    size?: number;
+    /** Rig configuration. */
+    rig?: RigConfig;
+    /** Image path prefix for attachments. */
+    imagePath?: string;
+}
+export interface SpineKeyframe {
+    time: number;
+    pose: RigPose;
+}
+export interface SpineAnimationDef {
+    name: string;
+    keyframes: SpineKeyframe[];
+    loop?: boolean;
+}
+interface SpineBone {
+    name: string;
+    parent?: string;
+    length: number;
+    x: number;
+    y: number;
+    rotation: number;
+}
+interface SpineSlot {
+    name: string;
+    bone: string;
+    attachment: string | null;
+}
+interface SpineJSON {
+    skeleton: {
+        hash: string;
+        spine: string;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        images: string;
+    };
+    bones: SpineBone[];
+    slots: SpineSlot[];
+    skins: Record<string, Record<string, Record<string, unknown>>>;
+    animations: Record<string, {
+        bones: Record<string, {
+            rotate: unknown[];
+        }>;
+    }>;
+}
+/** Export rig and animations to Spine JSON format. */
+export declare function exportToSpine(animations: SpineAnimationDef[], options?: SpineExportOptions): SpineJSON;
+/** Serialize Spine data to JSON string. */
+export declare function spineToJSON(data: SpineJSON): string;
+/** Create a downloadable Blob for the Spine JSON. */
+export declare function spineToBlob(data: SpineJSON): Blob;
+export {};

package/dist/types/core/LocalUI.d.ts

@@ -0,0 +1,21 @@
+/**
+ * LocalUI.tsx — UI primitives wrapper for @nice2dev/ui-graphics
+ *
+ * Re-exports nice2dev-ui components with compatible API for the graphics editors.
+ * This ensures consistent styling across the entire NiceToDev ecosystem.
+ */
+import React from "react";
+export type ButtonVariant = "dark" | "light" | "outline-secondary" | "outline-info" | "outline-warning" | "outline-danger";
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+    variant?: ButtonVariant;
+    size?: "sm" | "md";
+}
+export declare const Button: React.FC<ButtonProps>;
+export interface RangeInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
+    accentColor?: string;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+}
+export declare const RangeInput: React.FC<RangeInputProps>;
+export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+}
+export declare const TextArea: React.FC<TextAreaProps>;

package/dist/types/core/collaboration.d.ts

@@ -0,0 +1,164 @@
+/**
+ * collaboration.ts — Real-time collaborative editing, comments, and version history.
+ *
+ * Uses a provider-agnostic architecture so consumers can plug in
+ * WebSocket, WebRTC, or any custom transport.
+ */
+export interface CollaborationUser {
+    id: string;
+    name: string;
+    color: string;
+    cursor?: {
+        x: number;
+        y: number;
+    };
+    selection?: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+}
+export interface CollaborationOperation {
+    type: "insert" | "update" | "delete";
+    path: string[];
+    value?: unknown;
+    timestamp: number;
+    userId: string;
+}
+export interface Comment {
+    id: string;
+    userId: string;
+    userName: string;
+    text: string;
+    x: number;
+    y: number;
+    timestamp: number;
+    resolved: boolean;
+    replies: CommentReply[];
+}
+export interface CommentReply {
+    id: string;
+    userId: string;
+    userName: string;
+    text: string;
+    timestamp: number;
+}
+export interface VersionSnapshot {
+    id: string;
+    name: string;
+    timestamp: number;
+    userId: string;
+    data: unknown;
+    thumbnail?: string;
+}
+export interface CollaborationTransport {
+    connect(roomId: string, userId: string): void;
+    disconnect(): void;
+    send(message: CollaborationMessage): void;
+    onMessage(handler: (message: CollaborationMessage) => void): () => void;
+}
+export type CollaborationMessage = {
+    type: "join";
+    user: CollaborationUser;
+} | {
+    type: "leave";
+    userId: string;
+} | {
+    type: "cursor";
+    userId: string;
+    x: number;
+    y: number;
+} | {
+    type: "selection";
+    userId: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+} | {
+    type: "operation";
+    operation: CollaborationOperation;
+} | {
+    type: "comment-add";
+    comment: Comment;
+} | {
+    type: "comment-resolve";
+    commentId: string;
+} | {
+    type: "comment-reply";
+    commentId: string;
+    reply: CommentReply;
+} | {
+    type: "snapshot";
+    snapshot: VersionSnapshot;
+} | {
+    type: "sync-request";
+    userId: string;
+} | {
+    type: "sync-response";
+    data: unknown;
+    userId: string;
+};
+export declare class WebSocketTransport implements CollaborationTransport {
+    private serverUrl;
+    private maxReconnectMs;
+    private ws;
+    private handlers;
+    private reconnectTimer;
+    private roomId;
+    private userId;
+    constructor(serverUrl: string, maxReconnectMs?: number);
+    connect(roomId: string, userId: string): void;
+    disconnect(): void;
+    send(message: CollaborationMessage): void;
+    onMessage(handler: (message: CollaborationMessage) => void): () => void;
+    private doConnect;
+}
+export declare class VersionHistory {
+    private snapshots;
+    /** Create a new version snapshot. */
+    create(name: string, userId: string, data: unknown, thumbnail?: string): VersionSnapshot;
+    /** Get all snapshots ordered by timestamp. */
+    getAll(): VersionSnapshot[];
+    /** Get a specific snapshot. */
+    get(id: string): VersionSnapshot | undefined;
+    /** Remove a snapshot. */
+    remove(id: string): boolean;
+    /** Import snapshots from JSON. */
+    import(data: VersionSnapshot[]): void;
+    /** Export snapshots to JSON. */
+    export(): VersionSnapshot[];
+}
+export declare class CommentManager {
+    private comments;
+    add(userId: string, userName: string, text: string, x: number, y: number): Comment;
+    reply(commentId: string, userId: string, userName: string, text: string): CommentReply | null;
+    resolve(commentId: string): boolean;
+    getAll(): Comment[];
+    getUnresolved(): Comment[];
+    remove(commentId: string): boolean;
+}
+/** Hook for real-time collaboration. */
+export declare function useCollaboration(transport: CollaborationTransport, roomId: string, currentUser: CollaborationUser): {
+    users: CollaborationUser[];
+    connected: boolean;
+    sendCursor: (x: number, y: number) => void;
+    sendOperation: (op: Omit<CollaborationOperation, "timestamp" | "userId">) => void;
+    onOperation: (handler: (op: CollaborationOperation) => void) => () => void;
+};
+/** Hook for managing comments. */
+export declare function useComments(): {
+    comments: Comment[];
+    addComment: (userId: string, userName: string, text: string, x: number, y: number) => Comment;
+    replyToComment: (commentId: string, userId: string, userName: string, text: string) => CommentReply | null;
+    resolveComment: (commentId: string) => void;
+    removeComment: (commentId: string) => void;
+};
+/** Hook for version history. */
+export declare function useVersionHistory(): {
+    snapshots: VersionSnapshot[];
+    createSnapshot: (name: string, userId: string, data: unknown, thumbnail?: string) => VersionSnapshot;
+    removeSnapshot: (id: string) => void;
+    getSnapshot: (id: string) => VersionSnapshot | undefined;
+};

package/dist/types/core/colorBlindness.d.ts

@@ -0,0 +1,24 @@
+/**
+ * colorBlindness.ts — Color blindness simulation modes for editors.
+ *
+ * Simulates various types of color vision deficiency on canvas content
+ * to help designers create accessible graphics.
+ */
+export type ColorBlindnessType = "protanopia" | "deuteranopia" | "tritanopia" | "protanomaly" | "deuteranomaly" | "tritanomaly" | "achromatopsia" | "achromatomaly" | "none";
+export interface ColorBlindnessInfo {
+    type: ColorBlindnessType;
+    label: string;
+    description: string;
+    prevalence: string;
+}
+export declare const COLOR_BLINDNESS_TYPES: ColorBlindnessInfo[];
+/** Apply color blindness simulation to ImageData in-place. */
+export declare function simulateColorBlindness(imageData: ImageData, type: ColorBlindnessType): ImageData;
+/** Create a new ImageData with color blindness simulation (non-destructive). */
+export declare function simulateColorBlindnessCopy(source: ImageData, type: ColorBlindnessType): ImageData;
+/** Apply color blindness filter to a canvas. */
+export declare function applyColorBlindnessFilter(canvas: HTMLCanvasElement, type: ColorBlindnessType): void;
+/** Simulate color blindness on a single RGB color. */
+export declare function simulateColor(r: number, g: number, b: number, type: ColorBlindnessType): [number, number, number];
+/** Generate an SVG filter for color blindness simulation. */
+export declare function colorBlindnessSvgFilter(type: ColorBlindnessType, filterId?: string): string;

package/dist/types/core/dragDrop.d.ts

@@ -0,0 +1,46 @@
+/**
+ * dragDrop.ts — External drag & drop support for editors.
+ *
+ * Handles file/image drops from the OS or other applications
+ * into the editor canvas area.
+ */
+import React from "react";
+export interface DropResult {
+    files: File[];
+    images: ImageData[];
+    text?: string;
+    urls: string[];
+}
+export interface DragDropConfig {
+    /** Accepted MIME types. Defaults to image/*. */
+    accept?: string[];
+    /** Maximum number of files. Default: 10. */
+    maxFiles?: number;
+    /** Maximum file size in bytes. Default: 50MB. */
+    maxSize?: number;
+    /** Called when valid files are dropped. */
+    onDrop?: (result: DropResult) => void;
+    /** Called when drag enters the zone. */
+    onDragEnter?: () => void;
+    /** Called when drag leaves the zone. */
+    onDragLeave?: () => void;
+    /** Called if a drop fails validation. */
+    onError?: (message: string) => void;
+}
+export interface DragDropState {
+    isDragging: boolean;
+    dragProps: {
+        onDragEnter: (e: React.DragEvent) => void;
+        onDragOver: (e: React.DragEvent) => void;
+        onDragLeave: (e: React.DragEvent) => void;
+        onDrop: (e: React.DragEvent) => void;
+    };
+}
+/** React hook for handling external file/image drag & drop. */
+export declare function useDragDrop(config: DragDropConfig): DragDropState;
+export interface DropZoneOverlayProps {
+    isDragging: boolean;
+    message?: string;
+}
+/** Visual overlay shown when dragging files over the editor. */
+export declare const DropZoneOverlay: React.FC<DropZoneOverlayProps>;

package/dist/types/core/fixes.d.ts

@@ -0,0 +1,80 @@
+/**
+ * fixes.ts — Bug fixes and performance patches for editors.
+ *
+ * - PhotoEditor: Retina/HiDPI canvas devicePixelRatio handling
+ * - VectorEditor: Shape virtualization for >100 shapes
+ * - AnimationEditor: Memory leak prevention (raf/timer cleanup)
+ */
+export interface RetinaCanvasOptions {
+    /** CSS width of the canvas. */
+    width: number;
+    /** CSS height of the canvas. */
+    height: number;
+    /** Override devicePixelRatio (default: window.devicePixelRatio). */
+    dpr?: number;
+}
+/**
+ * Configure a canvas for Retina/HiDPI displays.
+ * Scales the backing store while keeping CSS dimensions intact.
+ */
+export declare function setupRetinaCanvas(canvas: HTMLCanvasElement, options: RetinaCanvasOptions): CanvasRenderingContext2D;
+/**
+ * Get the correct mouse position on a Retina canvas.
+ */
+export declare function retinaMousePosition(e: MouseEvent | {
+    clientX: number;
+    clientY: number;
+}, canvas: HTMLCanvasElement): {
+    x: number;
+    y: number;
+};
+export interface VirtualBounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface VirtualizedShape<T> {
+    shape: T;
+    bounds: VirtualBounds;
+}
+/**
+ * Given a list of shapes with bounding boxes and a visible viewport,
+ * returns only the shapes intersecting the viewport.
+ */
+export declare function virtualizeShapes<T>(shapes: VirtualizedShape<T>[], viewport: VirtualBounds, margin?: number): T[];
+/**
+ * Spatial hash grid for fast shape lookup.
+ * Greatly speeds up rendering and hit-testing with many shapes.
+ */
+export declare class SpatialHashGrid<T> {
+    private cellSize;
+    private cells;
+    constructor(cellSize?: number);
+    private cellKey;
+    /** Insert a shape into the grid. */
+    insert(shape: T, bounds: VirtualBounds): void;
+    /** Query shapes overlapping the given viewport. */
+    query(viewport: VirtualBounds): T[];
+    /** Remove all shapes from the grid. */
+    clear(): void;
+    /** Rebuild the grid from a list of shapes. */
+    rebuild(shapes: VirtualizedShape<T>[]): void;
+}
+/**
+ * Track requestAnimationFrame IDs and timers for proper cleanup.
+ */
+export declare class AnimationCleanup {
+    private rafIds;
+    private timerIds;
+    private intervalIds;
+    private disposed;
+    /** Wraps requestAnimationFrame with tracking. */
+    requestAnimationFrame(cb: FrameRequestCallback): number;
+    /** Wraps setTimeout with tracking. */
+    setTimeout(cb: () => void, ms: number): ReturnType<typeof setTimeout>;
+    /** Wraps setInterval with tracking. */
+    setInterval(cb: () => void, ms: number): ReturnType<typeof setInterval>;
+    /** Cancel all tracked timers and animation frames. */
+    dispose(): void;
+}

package/dist/types/core/gridGuides.d.ts

@@ -0,0 +1,70 @@
+/**
+ * gridGuides.ts — Grid, guides, rulers, and snap-to-grid/pixel for editors.
+ *
+ * Unified system for drawing grids, ruler bars, snapping to grid,
+ * and managing user-defined guide lines.
+ */
+export interface GridConfig {
+    enabled: boolean;
+    size: number;
+    subdivisions: number;
+    color: string;
+    subColor: string;
+    opacity: number;
+    snapToGrid: boolean;
+}
+export interface RulersConfig {
+    enabled: boolean;
+    size: number;
+    color: string;
+    backgroundColor: string;
+    textColor: string;
+    tickSize: number;
+}
+export interface Guide {
+    id: string;
+    orientation: "horizontal" | "vertical";
+    position: number;
+    color: string;
+    locked: boolean;
+}
+export interface GuidesConfig {
+    enabled: boolean;
+    guides: Guide[];
+    snapToGuides: boolean;
+    snapDistance: number;
+    color: string;
+}
+export interface SnapResult {
+    x: number;
+    y: number;
+    snappedX: boolean;
+    snappedY: boolean;
+}
+export declare const DEFAULT_GRID: GridConfig;
+export declare const DEFAULT_RULERS: RulersConfig;
+export declare const DEFAULT_GUIDES: GuidesConfig;
+/** Draw a grid on a canvas context. */
+export declare function drawGrid(ctx: CanvasRenderingContext2D, width: number, height: number, config: GridConfig, offsetX?: number, offsetY?: number, zoom?: number): void;
+/** Draw horizontal ruler bar. */
+export declare function drawHorizontalRuler(ctx: CanvasRenderingContext2D, width: number, config: RulersConfig, offsetX?: number, zoom?: number): void;
+/** Draw vertical ruler bar. */
+export declare function drawVerticalRuler(ctx: CanvasRenderingContext2D, height: number, config: RulersConfig, offsetY?: number, zoom?: number): void;
+/** Draw guides on a canvas context. */
+export declare function drawGuides(ctx: CanvasRenderingContext2D, width: number, height: number, config: GuidesConfig, offsetX?: number, offsetY?: number, zoom?: number): void;
+/** Snap a point to the grid. */
+export declare function snapToGrid(x: number, y: number, gridSize: number): SnapResult;
+/** Snap a point to nearby guides. */
+export declare function snapToGuides(x: number, y: number, guides: Guide[], snapDistance: number): SnapResult;
+/** Snap to pixel (floor to nearest integer). */
+export declare function snapToPixel(x: number, y: number): SnapResult;
+/** Combined snap: try guides first, then grid, then pixel. */
+export declare function snapPoint(x: number, y: number, gridConfig: GridConfig, guidesConfig: GuidesConfig): SnapResult;
+/** Create a new guide. */
+export declare function createGuide(orientation: "horizontal" | "vertical", position: number, color?: string): Guide;
+/** Add a guide to the config. */
+export declare function addGuide(config: GuidesConfig, guide: Guide): GuidesConfig;
+/** Remove a guide by ID. */
+export declare function removeGuide(config: GuidesConfig, guideId: string): GuidesConfig;
+/** Clear all guides. */
+export declare function clearGuides(config: GuidesConfig): GuidesConfig;