@nice2dev/ui-graphics 1.0.0

package/dist/types/photo/rawFileSupport.d.ts

@@ -0,0 +1,124 @@
+/**
+ * rawFileSupport — RAW camera file support for PhotoEditor
+ *
+ * Provides loading and processing of RAW camera formats including:
+ * - Canon (.CR2, .CR3, .CRW)
+ * - Nikon (.NEF, .NRW)
+ * - Sony (.ARW, .SRF, .SR2)
+ * - Adobe (.DNG)
+ * - Fujifilm (.RAF)
+ * - Olympus (.ORF)
+ * - Panasonic (.RW2)
+ * - Pentax (.PEF, .DNG)
+ * - And many more via embedded thumbnail or DCRaw emulation
+ *
+ * Features:
+ * - Embedded preview extraction (fast)
+ * - Full demosaic processing (with optional libraw.js)
+ * - White balance adjustment
+ * - Exposure compensation
+ * - Highlight recovery
+ * - Noise reduction
+ */
+export type RawFormat = 'cr2' | 'cr3' | 'crw' | 'nef' | 'nrw' | 'arw' | 'srf' | 'sr2' | 'dng' | 'raf' | 'orf' | 'rw2' | 'pef' | 'raw' | '3fr' | 'fff' | 'iiq' | 'mrw' | 'x3f' | 'rwl' | 'srw' | 'unknown';
+export interface RawMetadata {
+    /** Camera maker */
+    make: string;
+    /** Camera model */
+    model: string;
+    /** Image width */
+    width: number;
+    /** Image height */
+    height: number;
+    /** ISO sensitivity */
+    iso: number;
+    /** Shutter speed (seconds) */
+    shutterSpeed: number;
+    /** Aperture (f-number) */
+    aperture: number;
+    /** Focal length (mm) */
+    focalLength: number;
+    /** Capture date */
+    dateTime: Date | null;
+    /** Orientation (EXIF) */
+    orientation: number;
+    /** Color temperature (K) */
+    colorTemperature: number;
+    /** Detected RAW format */
+    format: RawFormat;
+    /** Has embedded preview */
+    hasPreview: boolean;
+    /** Has embedded thumbnail */
+    hasThumbnail: boolean;
+}
+export interface RawProcessingOptions {
+    /** Use embedded preview instead of demosaic */
+    usePreview: boolean;
+    /** White balance mode */
+    whiteBalance: 'camera' | 'auto' | 'daylight' | 'cloudy' | 'shade' | 'tungsten' | 'fluorescent' | 'flash' | 'custom';
+    /** Custom color temperature (K) */
+    colorTemperature: number;
+    /** Custom tint (green-magenta) */
+    tint: number;
+    /** Exposure compensation (EV) */
+    exposure: number;
+    /** Highlight recovery (0-1) */
+    highlightRecovery: number;
+    /** Shadow recovery (0-1) */
+    shadowRecovery: number;
+    /** Noise reduction level (0-1) */
+    noiseReduction: number;
+    /** Chromatic aberration correction */
+    chromaticAberration: boolean;
+    /** Output color space */
+    colorSpace: 'sRGB' | 'AdobeRGB' | 'ProPhotoRGB';
+    /** Output bit depth */
+    bitDepth: 8 | 16;
+    /** Demosaic algorithm */
+    demosaicAlgorithm: 'bilinear' | 'VNG' | 'PPG' | 'AHD' | 'DCB';
+}
+export interface RawLoadResult {
+    /** Processed image data */
+    imageData: ImageData;
+    /** Raw file metadata */
+    metadata: RawMetadata;
+    /** Processing info */
+    processingInfo: {
+        method: 'preview' | 'thumbnail' | 'demosaic';
+        timeMs: number;
+        originalWidth: number;
+        originalHeight: number;
+    };
+}
+export declare const DEFAULT_RAW_OPTIONS: RawProcessingOptions;
+export declare const RAW_EXTENSIONS: Record<RawFormat, string[]>;
+export declare const ALL_RAW_EXTENSIONS: string[];
+/**
+ * Detect RAW format from file extension
+ */
+export declare function detectFormatFromExtension(filename: string): RawFormat;
+/**
+ * Detect RAW format from file header
+ */
+export declare function detectFormatFromHeader(buffer: ArrayBuffer): RawFormat;
+/**
+ * Check if file is a RAW format
+ */
+export declare function isRawFile(filename: string): boolean;
+/**
+ * Extract metadata from RAW file
+ */
+export declare function extractMetadata(buffer: ArrayBuffer): RawMetadata;
+/**
+ * Extract embedded JPEG preview from RAW file
+ */
+export declare function extractPreview(buffer: ArrayBuffer): Promise<ImageData | null>;
+/**
+ * Load and process RAW file
+ */
+export declare function loadRawFile(buffer: ArrayBuffer, options?: Partial<RawProcessingOptions>): Promise<RawLoadResult>;
+/**
+ * Quick preview load (just extract embedded preview)
+ */
+export declare function loadRawPreview(buffer: ArrayBuffer): Promise<ImageData | null>;
+export default loadRawFile;

package/dist/types/photo/usePhotoEditor.d.ts

@@ -0,0 +1,123 @@
+/**
+ * usePhotoEditor.ts — Custom hook encapsulating all PhotoEditor state & logic.
+ *
+ * Extracts ~500 lines of state, effects, callbacks, and memoised values
+ * out of the god-component so that the main component file is pure composition.
+ */
+import { type NiceTranslateFn } from "../core/i18n";
+import { type AdjustmentValues, type FilterDefinition } from "./photoFilters";
+import { type Overlay, type DrawingOverlay, createEmojiOverlay, createTextOverlay, createShapeOverlay, createFrameOverlay } from "./photoOverlays";
+import { type PhotoEditorProps, type EditorTab, type FilterCategory } from "./photoEditorTypes";
+export interface PhotoEditorAPI {
+    t: NiceTranslateFn;
+    playerColor: string;
+    onCancel: () => void;
+    accent: string;
+    accentDim: string;
+    image: HTMLImageElement | null;
+    loading: boolean;
+    activeTab: EditorTab;
+    setActiveTab: (tab: EditorTab) => void;
+    setCropMode: (v: boolean) => void;
+    selectedFilter: string;
+    setSelectedFilter: (f: string) => void;
+    filterIntensity: number;
+    setFilterIntensity: (v: number) => void;
+    filterCategory: FilterCategory;
+    setFilterCategory: (c: FilterCategory) => void;
+    filteredList: FilterDefinition[];
+    generateThumbnail: (canvas: HTMLCanvasElement, filter: FilterDefinition) => void;
+    adjustments: AdjustmentValues;
+    handleAdjChange: (key: keyof AdjustmentValues, value: number) => void;
+    handleAdjChangeEnd: () => void;
+    rotation: number;
+    setRotation: (v: number) => void;
+    flipH: boolean;
+    setFlipH: (v: boolean) => void;
+    flipV: boolean;
+    setFlipV: (v: boolean) => void;
+    zoom: number;
+    setZoom: (v: number) => void;
+    cropMode: boolean;
+    cropRect: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    } | null;
+    setCropRect: (r: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    } | null) => void;
+    cropAspect: number | null;
+    setCropAspect: (v: number | null) => void;
+    handleCropMouseDown: (e: React.MouseEvent, handle: string) => void;
+    showCompare: boolean;
+    setShowCompare: (v: boolean) => void;
+    comparePosition: number;
+    setCompareDragging: (v: boolean) => void;
+    overlays: Overlay[];
+    setOverlays: React.Dispatch<React.SetStateAction<Overlay[]>>;
+    selectedOverlayId: string | null;
+    setSelectedOverlayId: (id: string | null) => void;
+    selectedOverlay: Overlay | null;
+    addOverlay: (ov: Overlay) => void;
+    updateOverlay: (id: string, patch: Partial<Overlay>) => void;
+    deleteOverlay: (id: string) => void;
+    moveOverlayForward: (id: string) => void;
+    moveOverlayBack: (id: string) => void;
+    emojiCat: string;
+    setEmojiCat: (id: string) => void;
+    textDraft: string;
+    setTextDraft: (v: string) => void;
+    textColor: string;
+    setTextColor: (v: string) => void;
+    textBold: boolean;
+    setTextBold: (v: boolean) => void;
+    textItalic: boolean;
+    setTextItalic: (v: boolean) => void;
+    textOutline: boolean;
+    setTextOutline: (v: boolean) => void;
+    textFontSize: number;
+    setTextFontSize: (v: number) => void;
+    textBg: boolean;
+    setTextBg: (v: boolean) => void;
+    shapeStroke: string;
+    setShapeStroke: (v: string) => void;
+    shapeFill: string;
+    setShapeFill: (v: string) => void;
+    shapeStrokeW: number;
+    setShapeStrokeW: (v: number) => void;
+    frameColor: string;
+    setFrameColor: (v: string) => void;
+    frameThick: number;
+    setFrameThick: (v: number) => void;
+    drawColor: string;
+    setDrawColor: (v: string) => void;
+    drawWidth: number;
+    setDrawWidth: (v: number) => void;
+    drawingOverlayRef: React.MutableRefObject<DrawingOverlay | null>;
+    historyIdx: number;
+    historyLength: number;
+    undo: () => void;
+    redo: () => void;
+    pushHistory: () => void;
+    handleSave: () => Promise<void>;
+    handleReset: () => void;
+    handleDownload: () => Promise<void>;
+    handleCopyToClipboard: () => Promise<void>;
+    handleShareNative: () => Promise<void>;
+    mainCanvasRef: React.RefObject<HTMLCanvasElement>;
+    compareCanvasRef: React.RefObject<HTMLCanvasElement>;
+    containerRef: React.RefObject<HTMLDivElement>;
+    handleCanvasMouseDown: (e: React.MouseEvent) => void;
+    handleCanvasMouseMove: (e: React.MouseEvent) => void;
+    handleCanvasMouseUp: () => void;
+    createEmojiOverlay: typeof createEmojiOverlay;
+    createTextOverlay: typeof createTextOverlay;
+    createShapeOverlay: typeof createShapeOverlay;
+    createFrameOverlay: typeof createFrameOverlay;
+}
+export declare function usePhotoEditor({ src, playerColor, onSave, onCancel, initialState }: PhotoEditorProps): PhotoEditorAPI;

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

@@ -0,0 +1,11 @@
+/**
+ * HSVPicker — Color picker using HSV model.
+ * Accepts a hex color string and outputs hex color strings via onChange.
+ */
+import React from "react";
+interface Props {
+    color: string;
+    onChange: (color: string) => void;
+}
+export declare const HSVPicker: React.FC<Props>;
+export default HSVPicker;

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

@@ -0,0 +1,16 @@
+/**
+ * PaletteExtractorPanel — UI for extracting palettes from images
+ */
+export interface PaletteExtractorPanelProps {
+    /** Current image data to extract from */
+    imageData?: ImageData | null;
+    /** Called when palette is extracted */
+    onExtract?: (colors: string[]) => void;
+    /** Called when palette is applied */
+    onApply?: (colors: string[]) => void;
+    /** Current palette for comparison */
+    currentPalette?: string[];
+    className?: string;
+}
+export declare function PaletteExtractorPanel({ imageData, onExtract, onApply, currentPalette, className, }: PaletteExtractorPanelProps): import("react/jsx-runtime").JSX.Element;
+export default PaletteExtractorPanel;

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

@@ -0,0 +1,17 @@
+/**
+ * PixelEditor — Aseprite-inspired pixel art editor.
+ *
+ * Refactored: logic extracted to usePixelEditor hook,
+ * UI split into PixelEditorMenuBar, PixelEditorToolbar,
+ * PixelEditorCanvas, PixelEditorRightPanel, PixelEditorTimeline,
+ * PixelEditorStatusBar.
+ */
+import React from "react";
+export interface PixelEditorProps {
+    initialWidth?: number;
+    initialHeight?: number;
+    className?: string;
+    onSaveToLibrary?: (dataUrl: string, name: string, mimeType: string) => void;
+}
+export declare const PixelEditor: React.FC<PixelEditorProps>;
+export default PixelEditor;

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

@@ -0,0 +1,10 @@
+/**
+ * PixelEditorCanvas — the main canvas element with pointer and wheel handlers.
+ */
+import React from "react";
+import type { PixelEditorAPI } from "./usePixelEditor";
+interface Props {
+    api: PixelEditorAPI;
+}
+declare const PixelEditorCanvas: React.FC<Props>;
+export default PixelEditorCanvas;

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

@@ -0,0 +1,11 @@
+/**
+ * PixelEditorMenuBar — top menu bar for PixelEditor.
+ */
+import React from "react";
+import type { PixelEditorAPI } from "./usePixelEditor";
+interface Props {
+    api: PixelEditorAPI;
+    hasOnSaveToLibrary: boolean;
+}
+declare const PixelEditorMenuBar: React.FC<Props>;
+export default PixelEditorMenuBar;

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

@@ -0,0 +1,11 @@
+/**
+ * PixelEditorRightPanel — brush config, HSV colour picker,
+ * layer management and palette.
+ */
+import React from "react";
+import type { PixelEditorAPI } from "./usePixelEditor";
+interface Props {
+    api: PixelEditorAPI;
+}
+declare const PixelEditorRightPanel: React.FC<Props>;
+export default PixelEditorRightPanel;

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

@@ -0,0 +1,11 @@
+/**
+ * PixelEditorStatusBar — bottom status bar showing
+ * canvas info, cursor position, tool, brush, pressure, layer, frame.
+ */
+import React from "react";
+import type { PixelEditorAPI } from "./usePixelEditor";
+interface Props {
+    api: PixelEditorAPI;
+}
+declare const PixelEditorStatusBar: React.FC<Props>;
+export default PixelEditorStatusBar;

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

@@ -0,0 +1,11 @@
+/**
+ * PixelEditorTimeline — bottom panel with frame management,
+ * playback controls, onion skin toggle and frame thumbnails.
+ */
+import React from "react";
+import type { PixelEditorAPI } from "./usePixelEditor";
+interface Props {
+    api: PixelEditorAPI;
+}
+declare const PixelEditorTimeline: React.FC<Props>;
+export default PixelEditorTimeline;

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

@@ -0,0 +1,11 @@
+/**
+ * PixelEditorToolbar — left-side tool buttons, shape-fill toggle,
+ * symmetry selector and colour swatches.
+ */
+import React from "react";
+import type { PixelEditorAPI } from "./usePixelEditor";
+interface Props {
+    api: PixelEditorAPI;
+}
+declare const PixelEditorToolbar: React.FC<Props>;
+export default PixelEditorToolbar;

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

@@ -0,0 +1,14 @@
+/**
+ * TileMapPanel — UI panel for tile map mode settings
+ */
+import type { TileMapSettings } from './tileMapMode';
+export interface TileMapPanelProps {
+    settings: TileMapSettings;
+    onSettingsChange: (settings: Partial<TileMapSettings>) => void;
+    seamScore?: number;
+    onMakeSeamless?: () => void;
+    onAnalyzeSeams?: () => void;
+    className?: string;
+}
+export declare function TileMapPanel({ settings, onSettingsChange, seamScore, onMakeSeamless, onAnalyzeSeams, className, }: TileMapPanelProps): import("react/jsx-runtime").JSX.Element;
+export default TileMapPanel;

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

@@ -0,0 +1,62 @@
+/**
+ * asepriteFormat.ts — Aseprite .ase/.aseprite binary format parser & writer.
+ * Spec: https://github.com/aseprite/aseprite/blob/main/docs/ase-file-specs.md
+ *
+ * Supports:
+ *  - RGBA color depth (32-bit)
+ *  - Layers (normal, groups)
+ *  - Cels (raw + zlib-compressed read, raw write)
+ *  - Palette chunks
+ *  - Frame tags
+ *  - Round-trip: parseAse → writeAse produces valid .ase files
+ */
+export interface AseDocument {
+    width: number;
+    height: number;
+    colorDepth: 8 | 16 | 32;
+    frames: AseFrame[];
+    layers: AseLayer[];
+    palette: AseColor[];
+    tags: AseTag[];
+    transparentIndex: number;
+}
+export interface AseFrame {
+    duration: number;
+    cels: AseCel[];
+}
+export interface AseLayer {
+    name: string;
+    visible: boolean;
+    opacity: number;
+    blendMode: number;
+    childLevel: number;
+    layerType: number;
+}
+export interface AseCel {
+    layerIndex: number;
+    x: number;
+    y: number;
+    opacity: number;
+    width: number;
+    height: number;
+    pixels: Uint8Array;
+}
+export interface AseTag {
+    name: string;
+    from: number;
+    to: number;
+    direction: number;
+    color: AseColor;
+}
+export interface AseColor {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+export declare function parseAseFile(buffer: ArrayBuffer): Promise<AseDocument>;
+export declare function writeAseFile(doc: AseDocument): Promise<ArrayBuffer>;
+export declare function createEmptyAseDocument(width?: number, height?: number): AseDocument;
+export declare function defaultPalette(): AseColor[];
+export declare function aseColorToHex(c: AseColor): string;
+export declare function hexToAseColor(hex: string): AseColor;

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

@@ -0,0 +1,73 @@
+/**
+ * paletteExtractor — Extract color palettes from images
+ *
+ * Features:
+ * - K-means clustering for dominant colors
+ * - Median cut algorithm
+ * - Octree quantization
+ * - Color sorting options
+ * - Palette size control
+ * - Common palette format imports (GPL, PAL, ASE, ACO)
+ */
+export interface RGB {
+    r: number;
+    g: number;
+    b: number;
+}
+export interface PaletteColor extends RGB {
+    hex: string;
+    count: number;
+    percentage: number;
+}
+export type ExtractionAlgorithm = 'kmeans' | 'median-cut' | 'octree' | 'frequency';
+export type SortOrder = 'frequency' | 'hue' | 'saturation' | 'lightness' | 'brightness' | 'none';
+export interface ExtractionOptions {
+    /** Number of colors to extract */
+    colorCount: number;
+    /** Algorithm to use */
+    algorithm: ExtractionAlgorithm;
+    /** Sort order for results */
+    sortOrder: SortOrder;
+    /** Minimum color difference (0-255) to include similar colors */
+    minDifference: number;
+    /** Sample rate (1 = every pixel, 2 = every 2nd, etc.) */
+    sampleRate: number;
+    /** Ignore transparent pixels */
+    ignoreTransparent: boolean;
+}
+export declare const DEFAULT_EXTRACTION_OPTIONS: ExtractionOptions;
+export declare function rgbToHex(r: number, g: number, b: number): string;
+export declare function hexToRgb(hex: string): RGB;
+export declare function colorDistance(c1: RGB, c2: RGB): number;
+export declare function rgbToHsl(r: number, g: number, b: number): {
+    h: number;
+    s: number;
+    l: number;
+};
+export declare function getBrightness(r: number, g: number, b: number): number;
+export declare function extractPalette(imageData: ImageData, options?: Partial<ExtractionOptions>): PaletteColor[];
+/**
+ * Extract palette from image/canvas element
+ */
+export declare function extractPaletteFromImage(source: HTMLImageElement | HTMLCanvasElement, options?: Partial<ExtractionOptions>): PaletteColor[];
+/**
+ * Parse GIMP Palette (.gpl) format
+ */
+export declare function parseGplPalette(content: string): string[];
+/**
+ * Parse Paint.NET/JASC Palette (.pal) format
+ */
+export declare function parsePalPalette(content: string): string[];
+/**
+ * Parse hex color list (one per line)
+ */
+export declare function parseHexPalette(content: string): string[];
+/**
+ * Export palette to GPL format
+ */
+export declare function exportToGpl(colors: string[], name?: string): string;
+/**
+ * Export palette to PAL format
+ */
+export declare function exportToPal(colors: string[]): string;
+export default extractPalette;

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

@@ -0,0 +1,31 @@
+/**
+ * pixelEditorExports — pixel editor file export utilities as pure functions.
+ */
+import type { Layer } from "./pixelEditorTypes";
+export interface ExportContext {
+    dw: number;
+    dh: number;
+    layers: Layer[];
+    fc: number;
+    fDur: number[];
+    pal: string[];
+    cels: Map<string, ImageData>;
+}
+export declare function exportAse(ctx: ExportContext): Promise<void>;
+export declare function exportPNG(afi: number, dw: number, dh: number, compFrame: (fi: number) => ImageData): void;
+export declare function exportJPG(afi: number, dw: number, dh: number, compFrame: (fi: number) => ImageData): void;
+export declare function exportWebP(afi: number, dw: number, dh: number, compFrame: (fi: number) => ImageData): void;
+export declare function exportBMP(afi: number, dw: number, dh: number, compFrame: (fi: number) => ImageData): void;
+export declare function exportSVG(afi: number, dw: number, dh: number, compFrame: (fi: number) => ImageData): void;
+export declare function exportSheet(dw: number, dh: number, fc: number, compFrame: (fi: number) => ImageData): void;
+export interface SpriteSheetOptions {
+    columns?: number;
+    padding?: number;
+    includeMeta?: boolean;
+    fileName?: string;
+}
+export declare function exportSpriteSheetAdvanced(dw: number, dh: number, fc: number, compFrame: (fi: number) => ImageData, fDur: number[], options?: SpriteSheetOptions): void;
+export declare function exportGIF(dw: number, dh: number, fc: number, compFrame: (fi: number) => ImageData, fDur: number[], options?: {
+    loop?: boolean;
+    quality?: number;
+}): Promise<void>;

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

@@ -0,0 +1,51 @@
+/**
+ * pixelEditorTypes — shared types, constants & helpers for PixelEditor.
+ */
+import { type RGBA, type BrushShape, type SymmetryMode } from "./pixelEditorUtils";
+export type Tool = "pencil" | "eraser" | "fill" | "line" | "rect" | "ellipse" | "eyedropper" | "select" | "move" | "gradient" | "dither";
+export interface Layer {
+    id: string;
+    name: string;
+    visible: boolean;
+    opacity: number;
+    locked: boolean;
+    blendMode: BlendMode;
+}
+export type BlendMode = "normal" | "multiply" | "screen" | "overlay" | "darken" | "lighten";
+export interface HistoryEntry {
+    desc: string;
+    cels: Map<string, ImageData>;
+    layers: Layer[];
+    frameCount: number;
+}
+export interface Selection {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+export declare const TOOLS: {
+    id: Tool;
+    icon: string;
+    label: string;
+    key: string;
+}[];
+export declare const BLEND_MODES: BlendMode[];
+export declare const BRUSH_SHAPES: {
+    id: BrushShape;
+    label: string;
+    icon: string;
+}[];
+export declare const SYMMETRY_MODES: {
+    id: SymmetryMode;
+    label: string;
+}[];
+export declare const DEFAULT_PALETTE: string[];
+export declare const lid: () => string;
+export declare const celKey: (f: number, l: number) => string;
+export declare const inB: (x: number, y: number, w: number, h: number) => boolean;
+export declare const downloadBlob: (blob: Blob, name: string) => void;
+/** Hex → RGBA tuple. */
+export declare const hex2t: (hex: string) => RGBA;
+/** Draw ellipse outline using parametric approach. */
+export declare const plotEllipse: (data: ImageData, cx: number, cy: number, rx: number, ry: number, color: RGBA, w: number, h: number, filled?: boolean) => void;