@nice2dev/ui-graphics 1.3.12 → 1.3.14

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nice2dev/ui-graphics — Changelog
 
+## 1.3.14
+
+No changes in this release.
+
+## 1.3.13
+
+No changes in this release.
+
 ## 1.3.12
 
 No changes in this release.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nice2dev/ui-graphics",
-  "version": "1.3.12",
+  "version": "1.3.14",
   "description": "Nice2Dev Graphics Editors — Pixel, Vector, Photo and Animation editors for React",
   "author": "NiceToDev <contact@nicetodev.com>",
   "license": "SEE LICENSE IN LICENSE",
@@ -71,8 +71,8 @@
     "react-dom": ">=17.0.0"
   },
   "devDependencies": {
-    "@nice2dev/ui": "^1.3.12",
-    "@nice2dev/ui-core": "^1.3.12",
+    "@nice2dev/ui": "^1.3.14",
+    "@nice2dev/ui-core": "^1.3.14",
     "@rollup/plugin-commonjs": "^29.0.3",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",

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

@@ -1,16 +0,0 @@
-/**
- * useGamepad — consolidated into `@nice2dev/ui-core` (the dependency-free home,
- * so any package can use it). This module re-exports the canonical hook and
- * types; the small `GamepadIndicator` UI below stays here as it is
- * ui-graphics-specific chrome.
- */
-import React from 'react';
-export { useGamepad, createNavigationActions, PS_BUTTON_ALIASES, GAMEPAD_BUTTONS, } from '@nice2dev/ui-core';
-export type { GamepadButton, GamepadAxis, GamepadState, GamepadAction, UseGamepadOptions, NavigationActions, } from '@nice2dev/ui-core';
-export interface GamepadIndicatorProps {
-    connected: boolean;
-    id?: string;
-    showId?: boolean;
-}
-/** Simple indicator showing gamepad connection status. */
-export declare const GamepadIndicator: ({ connected, id, showId }: GamepadIndicatorProps) => React.JSX.Element | null;

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

@@ -1,88 +0,0 @@
-/**
- * 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 | null>;
-    /** 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.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/game/AnimationPreviewPlayer.d.ts

@@ -1,30 +0,0 @@
-/**
- * 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 React from 'react';
-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: _showStateGraph, className, onFrameChange, onStateChange, }: AnimationPreviewPlayerProps): React.JSX.Element;
-export default AnimationPreviewPlayer;

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

@@ -1,102 +0,0 @@
-/**
- * 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
- */
-import React from 'react';
-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: "var(--nice-success-light, #4ade80)";
-}, {
-    readonly id: 2;
-    readonly name: "Enemy";
-    readonly color: "var(--nice-danger, #ef4444)";
-}, {
-    readonly id: 3;
-    readonly name: "Ground";
-    readonly color: "#a16207";
-}, {
-    readonly id: 4;
-    readonly name: "Platform";
-    readonly color: "var(--nice-accent, #8b5cf6)";
-}, {
-    readonly id: 5;
-    readonly name: "Projectile";
-    readonly color: "var(--nice-warning, #f59e0b)";
-}, {
-    readonly id: 6;
-    readonly name: "Pickup";
-    readonly color: "#22d3d8";
-}, {
-    readonly id: 7;
-    readonly name: "Trigger";
-    readonly color: "var(--nice-color-accent-pink, #ec4899)";
-}];
-export declare function CollisionEditor({ body, previewImage, onChange, width, height, gridSize: _gridSize, className, }: CollisionEditorProps): React.JSX.Element;
-export default CollisionEditor;

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

@@ -1,20 +0,0 @@
-/**
- * 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

@@ -1,22 +0,0 @@
-/**
- * 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

@@ -1,18 +0,0 @@
-/**
- * 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

@@ -1,160 +0,0 @@
-/**
- * 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>;