@nice2dev/ui-graphics 1.0.0

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

@@ -0,0 +1,88 @@
+/**
+ * usePointerPressure — Hook for graphic tablet/stylus pressure sensitivity
+ *
+ * Provides pressure, tilt, and twist data from supported devices.
+ * Falls back gracefully for mouse input.
+ */
+export interface PointerPressureState {
+    /** Is a stylus/pen currently active? */
+    isStylus: boolean;
+    /** Pressure value from 0 to 1 (mouse always returns 0.5) */
+    pressure: number;
+    /** Tilt angle on X axis (-90 to 90 degrees) */
+    tiltX: number;
+    /** Tilt angle on Y axis (-90 to 90 degrees) */
+    tiltY: number;
+    /** Twist angle of the stylus (0 to 360 degrees) */
+    twist: number;
+    /** Tangential pressure (for airbrush styluses) */
+    tangentialPressure: number;
+    /** Width of contact point (for touch) */
+    width: number;
+    /** Height of contact point (for touch) */
+    height: number;
+    /** Current pointer type: 'mouse', 'pen', 'touch', 'eraser' */
+    pointerType: 'mouse' | 'pen' | 'touch' | 'eraser';
+    /** Current position */
+    x: number;
+    y: number;
+    /** Is button pressed? */
+    isPressed: boolean;
+    /** Which buttons are pressed (bitmask) */
+    buttons: number;
+}
+export interface UsePointerPressureOptions {
+    /** Target element ref */
+    elementRef: React.RefObject<HTMLElement>;
+    /** Enable pressure simulation for mouse (default: true) */
+    simulatePressure?: boolean;
+    /** Pressure curve for simulation: linear, ease-in, ease-out */
+    pressureCurve?: 'linear' | 'ease-in' | 'ease-out' | 'custom';
+    /** Custom pressure curve function (input: speed 0-1, output: pressure 0-1) */
+    customPressureCurve?: (speed: number) => number;
+    /** Enable pressure smoothing (default: true) */
+    smoothing?: boolean;
+    /** Smoothing factor 0-1 (default: 0.3) */
+    smoothingFactor?: number;
+    /** Callbacks */
+    onPressureChange?: (pressure: number) => void;
+    onDown?: (state: PointerPressureState) => void;
+    onMove?: (state: PointerPressureState) => void;
+    onUp?: (state: PointerPressureState) => void;
+}
+export declare function usePointerPressure(options: UsePointerPressureOptions): PointerPressureState;
+export interface BrushSizeOptions {
+    minSize: number;
+    maxSize: number;
+    pressure: number;
+    /** How much pressure affects size (0-1, default 1) */
+    pressureSensitivity?: number;
+    /** Pressure curve: 'linear' | 'squared' | 'sqrt' */
+    curve?: 'linear' | 'squared' | 'sqrt';
+}
+/** Calculate brush size based on pressure */
+export declare function calculateBrushSize(options: BrushSizeOptions): number;
+/** Calculate brush opacity based on pressure */
+export declare function calculateBrushOpacity(pressure: number, minOpacity?: number, maxOpacity?: number, sensitivity?: number): number;
+/** Calculate brush rotation angle based on tilt */
+export declare function calculateBrushAngle(tiltX: number, tiltY: number): number;
+/** Calculate brush squash based on tilt (for calligraphy) */
+export declare function calculateBrushSquash(tiltX: number, tiltY: number): number;
+export interface PressureIndicatorProps {
+    pressure: number;
+    isStylus: boolean;
+    showValues?: boolean;
+    tiltX?: number;
+    tiltY?: number;
+}
+/** Visual indicator for current pressure */
+export declare const PressureIndicator: ({ pressure, isStylus, showValues, tiltX, tiltY, }: PressureIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export interface SmoothPoint {
+    x: number;
+    y: number;
+    pressure: number;
+}
+/** Catmull-Rom spline smoothing for stroke points */
+export declare function smoothStroke(points: SmoothPoint[], tension?: number, segments?: number): SmoothPoint[];
+/** Moving average smoothing */
+export declare function movingAverageSmooth(points: SmoothPoint[], windowSize?: number): SmoothPoint[];

package/dist/types/font/NiceFontEditor.d.ts

@@ -0,0 +1,62 @@
+/**
+ * NiceFontEditor.tsx — Font creation and editing (glyph editor).
+ *
+ * Features:
+ * - Glyph grid with unicode character mapping
+ * - Per-glyph vector path editor
+ * - Metrics editing (advance width, bearing, ascent/descent)
+ * - Font preview with sample text
+ * - Export to OTF/TTF metadata (SVG font), WOFF subset
+ * - Import from existing font files
+ */
+import React from "react";
+export interface FontEditorProps {
+    /** Font family name. */
+    fontName?: string;
+    /** Called on font save. */
+    onSave?: (data: FontData) => void;
+    /** CSS class. */
+    className?: string;
+}
+export interface GlyphData {
+    unicode: number;
+    char: string;
+    name: string;
+    path: string;
+    advanceWidth: number;
+    leftBearing: number;
+}
+export interface FontMetrics {
+    unitsPerEm: number;
+    ascent: number;
+    descent: number;
+    lineGap: number;
+    xHeight: number;
+    capHeight: number;
+}
+export interface FontData {
+    name: string;
+    family: string;
+    metrics: FontMetrics;
+    glyphs: GlyphData[];
+}
+export type FontGlyph = GlyphData;
+export interface FontEditorApi {
+    fontName: string;
+    setFontName: React.Dispatch<React.SetStateAction<string>>;
+    metrics: FontMetrics;
+    setMetrics: React.Dispatch<React.SetStateAction<FontMetrics>>;
+    glyphs: GlyphData[];
+    selectedGlyph: number | null;
+    setSelectedGlyph: React.Dispatch<React.SetStateAction<number | null>>;
+    updateGlyph: (unicode: number, updates: Partial<GlyphData>) => void;
+    addGlyph: (char: string) => void;
+    previewText: string;
+    setPreviewText: React.Dispatch<React.SetStateAction<string>>;
+    toFontData: () => FontData;
+}
+export declare function exportToSvgFont(data: FontData): string;
+export declare function useFontEditor(initialName: string): FontEditorApi;
+/** Font glyph editor with metrics, path editing, and preview. */
+export declare const NiceFontEditor: React.FC<FontEditorProps>;
+export default NiceFontEditor;

package/dist/types/game/AnimationPreviewPlayer.d.ts

@@ -0,0 +1,29 @@
+/**
+ * AnimationPreviewPlayer — UI component for animation preview in GameAsset2dEditor
+ *
+ * Features:
+ * - Canvas-based animation rendering with zoom
+ * - Playback controls (play/pause/stop/step)
+ * - Timeline scrubber with frame indicators
+ * - Speed control (0.25x - 4x)
+ * - Onion skinning toggle
+ * - State machine parameter controls
+ * - Transition visualization
+ */
+import type { SpriteSheet, AnimationStateMachine } from './gameAssetTypes';
+export interface AnimationPreviewPlayerProps {
+    spriteSheets: SpriteSheet[];
+    stateMachines: AnimationStateMachine[];
+    selectedAnimationId?: string | null;
+    selectedStateMachineId?: string | null;
+    width?: number;
+    height?: number;
+    backgroundColor?: string;
+    showTimeline?: boolean;
+    showStateGraph?: boolean;
+    className?: string;
+    onFrameChange?: (frameIndex: number) => void;
+    onStateChange?: (stateId: string) => void;
+}
+export declare function AnimationPreviewPlayer({ spriteSheets, stateMachines, selectedAnimationId, selectedStateMachineId, width, height, backgroundColor, showTimeline, showStateGraph, className, onFrameChange, onStateChange, }: AnimationPreviewPlayerProps): import("react/jsx-runtime").JSX.Element;
+export default AnimationPreviewPlayer;

package/dist/types/game/CollisionEditor.d.ts

@@ -0,0 +1,101 @@
+/**
+ * CollisionEditor — Shape-based collision mask editor for GameAsset2dEditor
+ *
+ * Features:
+ * - Multiple collision shape types: box, circle, polygon, capsule
+ * - Visual editing with drag handles
+ * - Collision layer assignment
+ * - Per-frame collision shapes for animations
+ * - Collision body types: static, dynamic, kinematic
+ * - Physics material properties
+ */
+export type CollisionShapeType = 'box' | 'circle' | 'polygon' | 'capsule' | 'edge';
+export type CollisionBodyType = 'static' | 'dynamic' | 'kinematic' | 'trigger';
+export interface CollisionShape {
+    id: string;
+    /** Display name */
+    name?: string;
+    type: CollisionShapeType;
+    enabled: boolean;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotation: number;
+    radius?: number;
+    vertices?: {
+        x: number;
+        y: number;
+    }[];
+    capsuleDirection?: 'horizontal' | 'vertical';
+    layer: number;
+    mask: number[];
+    isTrigger: boolean;
+    /** Frame index for animation (optional) */
+    frameIndex?: number;
+}
+export interface CollisionBody {
+    id: string;
+    name: string;
+    bodyType: CollisionBodyType;
+    shapes: CollisionShape[];
+    density: number;
+    friction: number;
+    restitution: number;
+    linearDamping: number;
+    angularDamping: number;
+    fixedRotation: boolean;
+    gravityScale: number;
+}
+export interface CollisionEditorProps {
+    /** Collision body being edited */
+    body: CollisionBody | null;
+    /** Preview image (sprite/tile) */
+    previewImage: HTMLCanvasElement | HTMLImageElement | null;
+    /** Called when body changes */
+    onChange: (body: CollisionBody) => void;
+    /** Width of the preview area */
+    width?: number;
+    /** Height of the preview area */
+    height?: number;
+    /** Grid size for snapping */
+    gridSize?: number;
+    className?: string;
+}
+export declare function createDefaultShape(type: CollisionShapeType): CollisionShape;
+export declare function createDefaultBody(): CollisionBody;
+export declare const COLLISION_LAYERS: readonly [{
+    readonly id: 0;
+    readonly name: "Default";
+    readonly color: "#4a9fff";
+}, {
+    readonly id: 1;
+    readonly name: "Player";
+    readonly color: "#4ade80";
+}, {
+    readonly id: 2;
+    readonly name: "Enemy";
+    readonly color: "#ef4444";
+}, {
+    readonly id: 3;
+    readonly name: "Ground";
+    readonly color: "#a16207";
+}, {
+    readonly id: 4;
+    readonly name: "Platform";
+    readonly color: "#8b5cf6";
+}, {
+    readonly id: 5;
+    readonly name: "Projectile";
+    readonly color: "#f59e0b";
+}, {
+    readonly id: 6;
+    readonly name: "Pickup";
+    readonly color: "#22d3d8";
+}, {
+    readonly id: 7;
+    readonly name: "Trigger";
+    readonly color: "#ec4899";
+}];
+export declare function CollisionEditor({ body, previewImage, onChange, width, height, gridSize, className, }: CollisionEditorProps): import("react/jsx-runtime").JSX.Element;
+export default CollisionEditor;

package/dist/types/game/GameAsset2dEditor.d.ts

@@ -0,0 +1,17 @@
+/**
+ * GameAsset2dEditor — Comprehensive 2D game asset editor
+ *
+ * Features:
+ * - Tile Map Editor: Build 2D and 2.5D (isometric/oblique) maps
+ * - Sprite Sheet Manager: Import, slice, and organize sprite sheets
+ * - Animation State Machine: Design character animation states and transitions
+ * - Effects Pipeline: Apply and preview image effects
+ */
+import React from 'react';
+export interface GameAsset2dEditorProps {
+    className?: string;
+    onSave?: (project: any) => void;
+    onExport?: (data: string, format: string) => void;
+}
+export declare const GameAsset2dEditor: React.FC<GameAsset2dEditorProps>;
+export default GameAsset2dEditor;

package/dist/types/game/GameAssetExportPanel.d.ts

@@ -0,0 +1,20 @@
+/**
+ * GameAssetExportPanel
+ * UI for exporting game assets to various formats
+ */
+import React from 'react';
+import type { GameAssetExportOptions, ExportResult } from './gameAssetExport';
+export interface GameAssetExportPanelProps {
+    /** Asset data to export */
+    asset: GameAssetExportOptions;
+    /** Called when export starts */
+    onExportStart?: () => void;
+    /** Called when export completes */
+    onExportComplete?: (results: ExportResult[]) => void;
+    /** Called on export error */
+    onExportError?: (error: Error) => void;
+    /** Custom class name */
+    className?: string;
+}
+export declare const GameAssetExportPanel: React.FC<GameAssetExportPanelProps>;
+export default GameAssetExportPanel;

package/dist/types/game/IsometricEditor.d.ts

@@ -0,0 +1,22 @@
+/**
+ * IsometricEditor
+ * Visual editor for 2.5D isometric tile maps
+ */
+import React from 'react';
+import type { IsometricTileset, IsometricMap } from './isometricTiles';
+export interface IsometricEditorProps {
+    /** Initial tileset */
+    tileset?: IsometricTileset;
+    /** Initial map */
+    initialMap?: IsometricMap;
+    /** Canvas width */
+    width?: number;
+    /** Canvas height */
+    height?: number;
+    /** Called when map changes */
+    onChange?: (map: IsometricMap) => void;
+    /** Custom class name */
+    className?: string;
+}
+export declare const IsometricEditor: React.FC<IsometricEditorProps>;
+export default IsometricEditor;

package/dist/types/game/IsometricTilePanel.d.ts

@@ -0,0 +1,18 @@
+/**
+ * IsometricTilePanel
+ * Settings panel for isometric tile configuration and export
+ */
+import React from 'react';
+import type { IsometricConfig, IsometricMap } from './isometricTiles';
+export interface IsometricTilePanelProps {
+    /** Current configuration */
+    config: IsometricConfig;
+    /** Called when config changes */
+    onConfigChange: (config: IsometricConfig) => void;
+    /** Current map (for export) */
+    map?: IsometricMap;
+    /** Custom class name */
+    className?: string;
+}
+export declare const IsometricTilePanel: React.FC<IsometricTilePanelProps>;
+export default IsometricTilePanel;

package/dist/types/game/gameAssetExport.d.ts

@@ -0,0 +1,160 @@
+/**
+ * GameAsset Export Formats
+ * Export utilities for Tiled, Godot, Unity, and other game engines
+ */
+import type { CollisionShape } from './CollisionEditor';
+export interface GameAssetExportOptions {
+    /** Asset name */
+    name: string;
+    /** Image width */
+    width: number;
+    /** Image height */
+    height: number;
+    /** Image file path (relative) */
+    imagePath: string;
+    /** Collision shapes */
+    collisions?: CollisionShape[];
+    /** Animation frames */
+    frames?: AnimationFrameData[];
+    /** Sprite metadata */
+    sprite?: SpriteMetadata;
+    /** Tile size for tile-based export */
+    tileSize?: {
+        width: number;
+        height: number;
+    };
+    /** Custom properties */
+    properties?: Record<string, unknown>;
+}
+export interface AnimationFrameData {
+    /** Frame index */
+    index: number;
+    /** Frame duration in milliseconds */
+    duration: number;
+    /** Frame region in sprite sheet */
+    region: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    /** Frame collision shapes (overrides default) */
+    collisions?: CollisionShape[];
+    /** Frame anchor/pivot point */
+    anchor?: {
+        x: number;
+        y: number;
+    };
+}
+export interface SpriteMetadata {
+    /** Pivot point (normalized 0-1) */
+    pivot: {
+        x: number;
+        y: number;
+    };
+    /** Pixels per unit */
+    pixelsPerUnit: number;
+    /** Border for 9-slice */
+    border?: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+    };
+    /** Filter mode */
+    filterMode?: 'point' | 'bilinear' | 'trilinear';
+    /** Wrap mode */
+    wrapMode?: 'clamp' | 'repeat' | 'mirror';
+}
+export interface ExportResult {
+    /** File name */
+    fileName: string;
+    /** File content */
+    content: string;
+    /** MIME type */
+    mimeType: string;
+}
+export interface TiledExportOptions extends GameAssetExportOptions {
+    /** First global ID */
+    firstgid?: number;
+    /** Tile count */
+    tileCount?: number;
+    /** Columns in tileset */
+    columns?: number;
+    /** Spacing between tiles */
+    spacing?: number;
+    /** Margin around tileset */
+    margin?: number;
+    /** Object alignment */
+    objectAlignment?: 'unspecified' | 'topleft' | 'top' | 'topright' | 'left' | 'center' | 'right' | 'bottomleft' | 'bottom' | 'bottomright';
+}
+/**
+ * Export as Tiled tileset (TSX format)
+ */
+export declare function exportToTiled(options: TiledExportOptions): ExportResult;
+export interface GodotExportOptions extends GameAssetExportOptions {
+    /** Godot version (3 or 4) */
+    godotVersion?: 3 | 4;
+    /** Resource UID (Godot 4) */
+    uid?: string;
+    /** Atlas texture */
+    atlas?: boolean;
+}
+/**
+ * Export as Godot SpriteFrames resource
+ */
+export declare function exportToGodot(options: GodotExportOptions): ExportResult[];
+export interface UnityExportOptions extends GameAssetExportOptions {
+    /** Generate .meta file */
+    generateMeta?: boolean;
+    /** Unity GUID */
+    guid?: string;
+    /** Sprite mode */
+    spriteMode?: 'single' | 'multiple';
+    /** Pixels per unit */
+    pixelsPerUnit?: number;
+    /** Filter mode */
+    filterMode?: 'point' | 'bilinear' | 'trilinear';
+    /** Sprite packing tag */
+    packingTag?: string;
+}
+/**
+ * Export for Unity (meta file + scriptable object data)
+ */
+export declare function exportToUnity(options: UnityExportOptions): ExportResult[];
+/**
+ * Export as generic JSON (for custom importers)
+ */
+export declare function exportToJson(options: GameAssetExportOptions): ExportResult;
+export interface PhaserExportOptions extends GameAssetExportOptions {
+    /** Phaser version (2 or 3) */
+    phaserVersion?: 2 | 3;
+    /** Physics system */
+    physics?: 'arcade' | 'matter' | 'p2';
+}
+/**
+ * Export for Phaser (JSON Atlas format)
+ */
+export declare function exportToPhaser(options: PhaserExportOptions): ExportResult[];
+/**
+ * Export for Construct 2/3 (c2addon/c3addon compatible JSON)
+ */
+export declare function exportToConstruct(options: GameAssetExportOptions): ExportResult;
+export type ExportFormat = 'tiled' | 'godot' | 'unity' | 'phaser' | 'construct' | 'json';
+export interface ExportManagerOptions {
+    format: ExportFormat;
+    options: GameAssetExportOptions;
+    formatOptions?: Partial<TiledExportOptions | GodotExportOptions | UnityExportOptions | PhaserExportOptions>;
+}
+/**
+ * Export game asset to specified format
+ */
+export declare function exportGameAsset(config: ExportManagerOptions): ExportResult[];
+/**
+ * Download export results as files
+ */
+export declare function downloadExportResults(results: ExportResult[]): void;
+/**
+ * Zip export results (requires JSZip)
+ */
+export declare function zipExportResults(results: ExportResult[], zipName: string): Promise<Blob>;