@asciirender/asciir 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Vinay
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,313 @@
+# ASCIIR
+
+<p align="center">
+  <img src="https://img.shields.io/npm/v/asciir?color=blue&label=npm" alt="npm version" />
+  <img src="https://img.shields.io/npm/dm/asciir?color=green" alt="npm downloads" />
+  <img src="https://img.shields.io/bundlephobia/minzip/asciir?color=orange" alt="bundle size" />
+  <img src="https://img.shields.io/github/license/YOUR_USERNAME/asciir?color=purple" alt="license" />
+  <img src="https://img.shields.io/npm/types/asciir?color=blue" alt="TypeScript" />
+</p>
+
+<p align="center">
+  <strong>A powerful React component for converting images to beautiful ASCII art</strong>
+</p>
+
+<p align="center">
+  <a href="#installation">Installation</a> •
+  <a href="#quick-start">Quick Start</a> •
+  <a href="#api-reference">API</a> •
+  <a href="#examples">Examples</a>
+</p>
+
+---
+
+## ✨ Features
+
+- 🎨 **Multiple Color Modes** - Monochrome, Original colors, or custom palettes
+- 📝 **Custom Character Sets** - Use preset or custom character ramps
+- 🎛️ **Image Filters** - Brightness, contrast, and saturation controls
+- 🔲 **Dithering** - Floyd-Steinberg dithering for better gradients
+- 📦 **Multiple Output Formats** - HTML, SVG, or Canvas
+- 💾 **Export Options** - Download as PNG, SVG, or TXT
+- 🎯 **TypeScript** - Full type definitions included
+- ⚡ **Lightweight** - ~5KB gzipped, zero runtime dependencies
+
+## 📦 Installation
+
+```bash
+npm install asciir
+```
+
+```bash
+yarn add asciir
+```
+
+```bash
+pnpm add asciir
+```
+
+## 🚀 Quick Start
+
+```tsx
+import { ASCIIR } from 'asciir';
+
+function App() {
+  return (
+    <ASCIIR 
+      src="/path/to/image.jpg"
+      config={{ 
+        resolutionWidth: 100,
+        colorMode: 'original' 
+      }}
+    />
+  );
+}
+```
+
+## 📖 API Reference
+
+### `<ASCIIR />` Component
+
+The main component for rendering ASCII art.
+
+```tsx
+import { ASCIIR, useASCIIRender } from 'asciir';
+
+function App() {
+  const asciiRef = useASCIIRender();
+  
+  return (
+    <div>
+      <ASCIIR 
+        ref={asciiRef}
+        src={imageSource}
+        config={config}
+        output="html"
+        onGenerate={(result) => console.log(result)}
+        onError={(error) => console.error(error)}
+      />
+      
+      <button onClick={() => asciiRef.current?.downloadPNG()}>
+        Download PNG
+      </button>
+    </div>
+  );
+}
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `src` | `string \| File \| Blob \| HTMLImageElement` | Required | Image source |
+| `config` | `Partial<ASCIIRenderConfig>` | `{}` | Configuration overrides |
+| `output` | `'html' \| 'svg' \| 'canvas'` | `'html'` | Output format |
+| `onGenerate` | `(result: ProcessingResult) => void` | - | Callback when ASCII is generated |
+| `onError` | `(error: Error) => void` | - | Error callback |
+| `className` | `string` | - | Container CSS class |
+| `style` | `CSSProperties` | - | Container inline styles |
+| `autoFit` | `boolean` | `false` | Auto-fit to container width |
+
+### Configuration Options
+
+```typescript
+interface ASCIIRenderConfig {
+  resolutionWidth: number;      // Width in characters (default: 150)
+  characterSet: string;         // Character ramp (default: " .:-=+*#%@")
+  inverted: boolean;            // Invert character ramp (default: false)
+  contrastStretch: boolean;     // Auto contrast (default: true)
+  fontColor: string;            // Text color for mono mode (default: "#FFFFFF")
+  backgroundColor: string;      // Background color (default: "#242424")
+  lineHeight: number;           // Line height multiplier (default: 1.0)
+  scaleRatio: number;           // Vertical scale ratio (default: 0.55)
+  fontSize: number;             // Font size in px (default: 12)
+  transparentBackground: boolean; // Transparent bg (default: false)
+  dithering: boolean;           // Enable dithering (default: false)
+  colorMode: 'mono' | 'original' | 'palette'; // Color mode (default: 'mono')
+  fontFamily: string;           // Font family (default: "'Fira Code', monospace")
+  exportScale: number;          // PNG export scale (default: 2)
+  fillTransparency: boolean;    // Fill transparent areas (default: true)
+  brightness: number;           // Brightness 0-3 (default: 1.0)
+  contrast: number;             // Contrast 0-3 (default: 1.0)
+  saturation: number;           // Saturation 0-3 (default: 1.0)
+  colorPalette: string[];       // Color palette for palette mode
+}
+```
+
+### Ref Methods
+
+```typescript
+interface ASCIIRenderRef {
+  getResult(): ProcessingResult | null;
+  downloadPNG(filename?: string): void;
+  downloadSVG(filename?: string): void;
+  downloadTXT(filename?: string): void;
+  copyToClipboard(): Promise<void>;
+  getCanvas(scale?: number): HTMLCanvasElement | null;
+  getSVGString(): string | null;
+  refresh(): void;
+}
+```
+
+### Presets
+
+```tsx
+import { 
+  CHAR_SETS,      // Character set presets
+  FONTS,          // Font presets
+  PALETTE_PRESETS // Color palette presets
+} from 'asciir';
+
+// Character sets
+CHAR_SETS.default        // " .:-=+*#%@"
+CHAR_SETS.standard_short // "@%#*+=-:. "
+CHAR_SETS.blocks         // "█▓▒░ "
+CHAR_SETS.binary         // "01 "
+CHAR_SETS.matrix         // Matrix/Katakana style
+
+// Fonts
+FONTS.fira      // 'Fira Code', monospace
+FONTS.vt323     // 'VT323', monospace (retro)
+FONTS.roboto    // 'Roboto Mono', monospace
+
+// Color palettes
+PALETTE_PRESETS.cga       // CGA colors
+PALETTE_PRESETS.gameboy   // GameBoy green
+PALETTE_PRESETS.vaporwave // Vaporwave aesthetic
+```
+
+### Utility Functions
+
+For advanced usage, you can use the core functions directly:
+
+```tsx
+import { 
+  generateAscii,
+  generateCanvasFromAscii,
+  generateSVG,
+  generateHTML,
+  loadImage 
+} from 'asciir';
+
+// Load and process an image
+const img = await loadImage('/path/to/image.jpg');
+const result = generateAscii(img, config);
+
+// Generate outputs
+const svg = generateSVG(result, config);
+const html = generateHTML(result, config);
+const canvas = generateCanvasFromAscii(result, config, 2);
+```
+
+## 📋 Examples
+
+### Basic Usage
+
+```tsx
+<ASCIIR src="/image.jpg" />
+```
+
+### Colored ASCII Art
+
+```tsx
+<ASCIIR 
+  src="/image.jpg"
+  config={{
+    colorMode: 'original',
+    resolutionWidth: 120
+  }}
+/>
+```
+
+### Custom Palette
+
+```tsx
+import { ASCIIR, PALETTE_PRESETS } from 'asciir';
+
+<ASCIIR 
+  src="/image.jpg"
+  config={{
+    colorMode: 'palette',
+    colorPalette: PALETTE_PRESETS.vaporwave
+  }}
+/>
+```
+
+### With Downloads
+
+```tsx
+import { ASCIIR, useASCIIRender } from 'asciir';
+
+function App() {
+  const ref = useASCIIRender();
+  
+  return (
+    <>
+      <ASCIIR ref={ref} src="/image.jpg" />
+      <button onClick={() => ref.current?.downloadPNG('my-art.png')}>
+        Save as PNG
+      </button>
+    </>
+  );
+}
+```
+
+### File Upload
+
+```tsx
+import { useState } from 'react';
+import { ASCIIR } from 'asciir';
+
+function App() {
+  const [file, setFile] = useState<File | null>(null);
+  
+  return (
+    <>
+      <input 
+        type="file" 
+        accept="image/*"
+        onChange={(e) => setFile(e.target.files?.[0] || null)}
+      />
+      {file && <ASCIIR src={file} />}
+    </>
+  );
+}
+```
+
+## 🛠️ Development
+
+```bash
+# Clone the repository
+git clone https://github.com/YOUR_USERNAME/asciir.git
+cd asciir
+
+# Install dependencies
+npm install
+
+# Run the demo app
+npm run dev
+
+# Build the library
+npm run build:lib
+
+# Type checking
+npm run typecheck
+```
+
+## 📦 Building for Production
+
+```bash
+# Build library only (for npm publish)
+npm run build:lib
+
+# Build demo application
+npm run build:demo
+```
+
+## 📝 License
+
+MIT © Vinay
+
+## 🌟 Show Your Support
+
+Give a ⭐️ if this project helped you!

package/dist/asciir.js

@@ -0,0 +1,387 @@
+import { jsx as I } from "react/jsx-runtime";
+import { forwardRef as j, useState as k, useRef as U, useMemo as E, useEffect as H, useCallback as B, useImperativeHandle as O } from "react";
+const _ = {
+  /** Default character set */
+  default: " .:-=+*#%@",
+  /** Standard short character set */
+  standard_short: "@%#*+=-:. ",
+  /** Standard long character set with more detail */
+  standard_long: "$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/\\|()1{}[]?-_+~<>i!lI;:,\"^`'. ",
+  /** Unicode block shades */
+  blocks: "█▓▒░ ",
+  /** Binary style */
+  binary: "01 ",
+  /** Minimal contrast */
+  minimal: "#. ",
+  /** Matrix/Katakana style */
+  matrix: "ﾊﾐﾋｰｳｼﾅﾓﾆｻﾜﾂｵﾘｱﾎﾃﾏｹﾒｴｶｷﾑﾕﾗｾﾈｽﾀﾇﾍ123457890:・.=*+-<>¦｜"
+}, C = {
+  fira: "'Fira Code', monospace",
+  vt323: "'VT323', monospace",
+  roboto: "'Roboto Mono', monospace",
+  source: "'Source Code Pro', monospace",
+  courier: "'Courier New', monospace"
+}, Z = {
+  [C.fira]: 0.6,
+  [C.vt323]: 0.5,
+  [C.roboto]: 0.6,
+  [C.source]: 0.6,
+  [C.courier]: 0.6
+}, z = {
+  /** Classic terminal green */
+  retro_term: ["#000000", "#00ff00", "#008800"],
+  /** Game Boy 4-color palette */
+  gameboy: ["#0f380f", "#306230", "#8bac0f", "#9bbc0f"],
+  /** CGA 16-color palette (subset) */
+  cga: ["#000000", "#555555", "#ffffff", "#ff5555", "#ff55ff", "#55ffff"],
+  /** Vaporwave aesthetic */
+  vaporwave: ["#ff71ce", "#01cdfe", "#05ffa1", "#b967ff", "#fffb96", "#000000"],
+  /** Grayscale gradient */
+  grayscale: ["#000000", "#333333", "#666666", "#999999", "#cccccc", "#ffffff"],
+  /** AMOLED high contrast */
+  amoled: ["#000000", "#ffffff"]
+}, N = {
+  resolutionWidth: 150,
+  characterSet: _.default,
+  inverted: !1,
+  contrastStretch: !0,
+  fontColor: "#FFFFFF",
+  backgroundColor: "#242424",
+  lineHeight: 1,
+  scaleRatio: 0.55,
+  autoScaleHeight: !1,
+  fontSize: 12,
+  transparentBackground: !1,
+  dithering: !1,
+  colorMode: "mono",
+  fontFamily: C.fira,
+  exportScale: 2,
+  fillTransparency: !0,
+  brightness: 1,
+  contrast: 1,
+  saturation: 1,
+  colorPalette: [...z.cga]
+}, V = (e) => new Promise((t, p) => {
+  const n = new FileReader();
+  n.onload = () => t(n.result), n.onerror = p, n.readAsDataURL(e);
+}), D = (e) => new Promise((t, p) => {
+  const n = new Image();
+  n.crossOrigin = "anonymous", n.onload = () => t(n), n.onerror = p, n.src = e;
+}), W = (e) => new Promise((t, p) => {
+  const n = URL.createObjectURL(e), a = new Image();
+  a.onload = () => {
+    URL.revokeObjectURL(n), t(a);
+  }, a.onerror = (f) => {
+    URL.revokeObjectURL(n), p(f);
+  }, a.src = n;
+}), P = (e) => {
+  const t = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);
+  return t ? {
+    r: parseInt(t[1], 16),
+    g: parseInt(t[2], 16),
+    b: parseInt(t[3], 16)
+  } : { r: 0, g: 0, b: 0 };
+}, L = (e) => Math.max(0, Math.min(255, e)), q = (e, t) => {
+  const { brightness: p, contrast: n, saturation: a } = t;
+  if (p === 1 && n === 1 && a === 1) return;
+  const f = 128 * (1 - n);
+  for (let s = 0; s < e.length; s += 4) {
+    let m = e[s], h = e[s + 1], l = e[s + 2];
+    m *= p, h *= p, l *= p, m = m * n + f, h = h * n + f, l = l * n + f;
+    const u = 0.299 * m + 0.587 * h + 0.114 * l;
+    m = u + a * (m - u), h = u + a * (h - u), l = u + a * (l - u), e[s] = L(m), e[s + 1] = L(h), e[s + 2] = L(l);
+  }
+}, G = (e, t, p, n) => {
+  let a = 1 / 0, f = n[0];
+  for (const s of n) {
+    const m = (e - s.r) ** 2 + (t - s.g) ** 2 + (p - s.b) ** 2;
+    m < a && (a = m, f = s);
+  }
+  return f;
+}, A = (e, t) => {
+  const p = document.createElement("canvas"), n = p.getContext("2d", { willReadFrequently: !0 });
+  if (!n)
+    throw new Error("Canvas context not supported");
+  const a = e.height / e.width, f = t.resolutionWidth, s = Math.floor(a * f * t.scaleRatio);
+  p.width = f, p.height = s, n.drawImage(e, 0, 0, f, s);
+  const h = n.getImageData(0, 0, f, s).data, l = P(t.backgroundColor), u = t.colorMode === "palette" ? t.colorPalette.map(P) : [];
+  for (let o = 0; o < h.length; o += 4) {
+    const d = h[o + 3];
+    if (t.fillTransparency && d < 255) {
+      const r = d / 255;
+      h[o] = Math.round(h[o] * r + l.r * (1 - r)), h[o + 1] = Math.round(h[o + 1] * r + l.g * (1 - r)), h[o + 2] = Math.round(h[o + 2] * r + l.b * (1 - r)), h[o + 3] = 255;
+    }
+  }
+  q(h, t);
+  const c = new Float32Array(f * s), v = new Uint8ClampedArray(h.length);
+  for (let o = 0; o < h.length; o += 4) {
+    let d = h[o], r = h[o + 1], i = h[o + 2];
+    if (t.colorMode === "palette" && u.length > 0) {
+      const g = G(d, r, i, u);
+      d = g.r, r = g.g, i = g.b;
+    }
+    v[o] = d, v[o + 1] = r, v[o + 2] = i, v[o + 3] = 255, c[o / 4] = d * 0.299 + r * 0.587 + i * 0.114;
+  }
+  if (t.contrastStretch) {
+    let o = 255, d = 0;
+    for (let i = 0; i < c.length; i++)
+      c[i] < o && (o = c[i]), c[i] > d && (d = c[i]);
+    const r = d - o;
+    if (r > 0)
+      for (let i = 0; i < c.length; i++)
+        c[i] = (c[i] - o) / r * 255;
+    else
+      c.fill(0);
+  }
+  let x = t.characterSet.split("");
+  t.inverted && (x = x.reverse());
+  const w = x.length - 1;
+  if (t.dithering)
+    for (let o = 0; o < s; o++)
+      for (let d = 0; d < f; d++) {
+        const r = o * f + d, i = c[r], g = 255 / Math.max(1, w), $ = Math.round(i / g) * g, M = i - $;
+        d + 1 < f && (c[o * f + (d + 1)] += M * 7 / 16), d - 1 >= 0 && o + 1 < s && (c[(o + 1) * f + (d - 1)] += M * 3 / 16), o + 1 < s && (c[(o + 1) * f + d] += M * 5 / 16), d + 1 < f && o + 1 < s && (c[(o + 1) * f + (d + 1)] += M * 1 / 16);
+      }
+  const R = [], b = w / 255;
+  for (let o = 0; o < c.length; o++) {
+    let d = c[o];
+    d = Math.max(0, Math.min(255, d));
+    const r = Math.floor(d * b + 0.5);
+    R.push(x[Math.max(0, Math.min(r, w))]);
+  }
+  const y = [];
+  for (let o = 0; o < R.length; o += f)
+    y.push(R.slice(o, o + f).join(""));
+  return {
+    text: y.join(`
+`),
+    lines: y,
+    width: f,
+    height: s,
+    colorData: t.colorMode === "original" || t.colorMode === "palette" ? v : void 0
+  };
+}, T = (e, t, p) => {
+  const n = document.createElement("canvas"), a = n.getContext("2d");
+  if (!a) throw new Error("Canvas context not supported");
+  const f = p || 1, s = t.fontSize * f, m = t.fontFamily;
+  a.font = `${s}px ${m}`, a.textBaseline = "top";
+  const l = a.measureText("M").width, c = s * t.lineHeight, v = Math.ceil(l * e.width), x = Math.ceil(c * e.height);
+  n.width = v, n.height = x, a.font = `${s}px ${m}`, a.textBaseline = "top", t.transparentBackground ? a.clearRect(0, 0, v, x) : (a.fillStyle = t.backgroundColor, a.fillRect(0, 0, v, x));
+  const { lines: w, colorData: R } = e;
+  if ((t.colorMode === "original" || t.colorMode === "palette") && R)
+    for (let b = 0; b < e.height; b++) {
+      const y = w[b], o = b * c;
+      for (let d = 0; d < e.width; d++) {
+        const r = y[d], i = (b * e.width + d) * 4, g = R[i], S = R[i + 1], $ = R[i + 2];
+        a.fillStyle = `rgb(${g},${S},${$})`, a.fillText(r, d * l, o);
+      }
+    }
+  else {
+    a.fillStyle = t.fontColor;
+    for (let b = 0; b < w.length; b++)
+      a.fillText(w[b], 0, b * c);
+  }
+  return n;
+}, F = (e, t) => {
+  const { lines: p, colorData: n } = e, a = t.fontSize, f = a * 0.6, s = a * t.lineHeight, m = f * e.width, h = s * e.height, l = (c) => c.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  let u = `<svg xmlns="http://www.w3.org/2000/svg" width="${m}" height="${h}" viewBox="0 0 ${m} ${h}" shape-rendering="crispEdges">`;
+  if (t.transparentBackground || (u += `<rect width="100%" height="100%" fill="${t.backgroundColor}"/>`), u += `<style>text { font-family: ${t.fontFamily}, monospace; font-size: ${a}px; white-space: pre; text-rendering: geometricPrecision; }</style>`, (t.colorMode === "original" || t.colorMode === "palette") && n)
+    for (let c = 0; c < e.height; c++) {
+      let x = `<text x="0" y="${c * s + a}">`;
+      for (let w = 0; w < e.width; w++) {
+        const R = p[c][w], b = (c * e.width + w) * 4, y = n[b], o = n[b + 1], d = n[b + 2], r = "#" + ((1 << 24) + (y << 16) + (o << 8) + d).toString(16).slice(1);
+        x += `<tspan fill="${r}">${l(R)}</tspan>`;
+      }
+      x += "</text>", u += x;
+    }
+  else {
+    const c = t.fontColor;
+    p.forEach((v, x) => {
+      const w = x * s + a;
+      u += `<text x="0" y="${w}" fill="${c}">${l(v)}</text>`;
+    });
+  }
+  return u += "</svg>", u;
+}, X = (e, t) => {
+  const { lines: p, colorData: n } = e, a = t.fontSize, f = t.lineHeight;
+  if ((t.colorMode === "original" || t.colorMode === "palette") && n) {
+    let s = `<pre style="font-family: ${t.fontFamily}; font-size: ${a}px; line-height: ${f}; margin: 0; ${t.transparentBackground ? "" : `background-color: ${t.backgroundColor};`} display: inline-block;">`;
+    for (let m = 0; m < e.height; m++) {
+      for (let h = 0; h < e.width; h++) {
+        const l = p[m][h], u = (m * e.width + h) * 4, c = n[u], v = n[u + 1], x = n[u + 2];
+        s += `<span style="color: rgb(${c},${v},${x})">${l === "<" ? "&lt;" : l === ">" ? "&gt;" : l === "&" ? "&amp;" : l}</span>`;
+      }
+      m < e.height - 1 && (s += `
+`);
+    }
+    return s += "</pre>", s;
+  } else {
+    const s = p.join(`
+`).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    return `<pre style="font-family: ${t.fontFamily}; font-size: ${a}px; line-height: ${f}; margin: 0; color: ${t.fontColor}; ${t.transparentBackground ? "" : `background-color: ${t.backgroundColor};`} display: inline-block;">${s}</pre>`;
+  }
+}, J = j(
+  ({
+    src: e,
+    config: t,
+    output: p = "html",
+    onGenerate: n,
+    onError: a,
+    className: f,
+    style: s,
+    autoFit: m = !1
+  }, h) => {
+    const [l, u] = k(null), [c, v] = k(null), [x, w] = k(!1), R = U(null), b = U(null), y = E(
+      () => ({ ...N, ...t }),
+      [t]
+    );
+    H(() => {
+      let r = !1;
+      return (async () => {
+        w(!0);
+        try {
+          let g;
+          if (e instanceof HTMLImageElement)
+            g = e;
+          else if (typeof e == "object" && e !== null && "name" in e && "type" in e) {
+            const S = await V(e);
+            g = await D(S);
+          } else if (e instanceof Blob)
+            g = await W(e);
+          else if (typeof e == "string")
+            g = await D(e);
+          else
+            throw new Error("Invalid src type");
+          r || v(g);
+        } catch (g) {
+          if (!r) {
+            const S = g instanceof Error ? g : new Error(String(g));
+            a?.(S), v(null);
+          }
+        } finally {
+          r || w(!1);
+        }
+      })(), () => {
+        r = !0;
+      };
+    }, [e, a]), H(() => {
+      if (!c) {
+        u(null);
+        return;
+      }
+      const r = setTimeout(() => {
+        try {
+          const i = A(c, y);
+          u(i), n?.(i);
+        } catch (i) {
+          const g = i instanceof Error ? i : new Error(String(i));
+          a?.(g);
+        }
+      }, 200);
+      return () => clearTimeout(r);
+    }, [c, y, n, a]);
+    const o = B(() => {
+      if (c)
+        try {
+          const r = A(c, y);
+          u(r), n?.(r);
+        } catch (r) {
+          const i = r instanceof Error ? r : new Error(String(r));
+          a?.(i);
+        }
+    }, [c, y, n, a]);
+    O(
+      h,
+      () => ({
+        getResult: () => l,
+        downloadPNG: (r = `ascii-art-${Date.now()}.png`) => {
+          if (!l) return;
+          const i = T(l, y, y.exportScale), g = document.createElement("a");
+          g.download = r, g.href = i.toDataURL("image/png"), g.click();
+        },
+        downloadSVG: (r = `ascii-art-${Date.now()}.svg`) => {
+          if (!l) return;
+          const i = F(l, y), g = new Blob([i], { type: "image/svg+xml" }), S = URL.createObjectURL(g), $ = document.createElement("a");
+          $.download = r, $.href = S, $.click(), URL.revokeObjectURL(S);
+        },
+        downloadTXT: (r = `ascii-art-${Date.now()}.txt`) => {
+          if (!l) return;
+          const i = new Blob([l.text], { type: "text/plain" }), g = URL.createObjectURL(i), S = document.createElement("a");
+          S.download = r, S.href = g, S.click(), URL.revokeObjectURL(g);
+        },
+        copyToClipboard: async () => {
+          l && await navigator.clipboard.writeText(l.text);
+        },
+        getCanvas: (r) => l ? T(l, y, r ?? y.exportScale) : null,
+        getSVGString: () => l ? F(l, y) : null,
+        refresh: o
+      }),
+      [l, y, o]
+    );
+    const d = E(() => {
+      if (!l) return null;
+      switch (p) {
+        case "svg":
+          return /* @__PURE__ */ I(
+            "div",
+            {
+              dangerouslySetInnerHTML: { __html: F(l, y) },
+              style: { display: "inline-block" }
+            }
+          );
+        case "canvas":
+          const r = T(l, y);
+          return b.current = r, /* @__PURE__ */ I(
+            "img",
+            {
+              src: r.toDataURL(),
+              alt: "ASCII Art",
+              style: { display: "block", maxWidth: m ? "100%" : void 0 }
+            }
+          );
+        case "html":
+        default:
+          return /* @__PURE__ */ I(
+            "div",
+            {
+              dangerouslySetInnerHTML: { __html: X(l, y) },
+              style: { display: "inline-block" }
+            }
+          );
+      }
+    }, [l, y, p, m]);
+    return /* @__PURE__ */ I(
+      "div",
+      {
+        ref: R,
+        className: f,
+        style: {
+          display: "inline-block",
+          overflow: m ? "auto" : void 0,
+          ...s
+        },
+        children: x ? /* @__PURE__ */ I("div", { style: { padding: "1rem", opacity: 0.5 }, children: "Loading..." }) : l ? d : /* @__PURE__ */ I("div", { style: { padding: "1rem", opacity: 0.5 }, children: "No image loaded" })
+      }
+    );
+  }
+);
+J.displayName = "ASCIIRender";
+const K = () => U(null);
+export {
+  J as ASCIIR,
+  J as ASCIIRender,
+  _ as CHAR_SETS,
+  N as DEFAULT_CONFIG,
+  C as FONTS,
+  Z as FONT_RATIOS,
+  z as PALETTE_PRESETS,
+  J as default,
+  A as generateAscii,
+  T as generateCanvasFromAscii,
+  X as generateHTML,
+  F as generateSVG,
+  D as loadImage,
+  W as loadImageFromBlob,
+  V as readFileAsDataURL,
+  K as useASCIIRender
+};

package/dist/asciir.umd.cjs

@@ -0,0 +1,4 @@
+(function(y,C){typeof exports=="object"&&typeof module<"u"?C(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],C):(y=typeof globalThis<"u"?globalThis:y||self,C(y.ASCIIR={},y.jsxRuntime,y.React))})(this,(function(y,C,R){"use strict";const P={default:" .:-=+*#%@",standard_short:"@%#*+=-:. ",standard_long:"$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/\\|()1{}[]?-_+~<>i!lI;:,\"^`'. ",blocks:"█▓▒░ ",binary:"01 ",minimal:"#. ",matrix:"ﾊﾐﾋｰｳｼﾅﾓﾆｻﾜﾂｵﾘｱﾎﾃﾏｹﾒｴｶｷﾑﾕﾗｾﾈｽﾀﾇﾍ123457890:・.=*+-<>¦｜"},M={fira:"'Fira Code', monospace",vt323:"'VT323', monospace",roboto:"'Roboto Mono', monospace",source:"'Source Code Pro', monospace",courier:"'Courier New', monospace"},N={[M.fira]:.6,[M.vt323]:.5,[M.roboto]:.6,[M.source]:.6,[M.courier]:.6},D={retro_term:["#000000","#00ff00","#008800"],gameboy:["#0f380f","#306230","#8bac0f","#9bbc0f"],cga:["#000000","#555555","#ffffff","#ff5555","#ff55ff","#55ffff"],vaporwave:["#ff71ce","#01cdfe","#05ffa1","#b967ff","#fffb96","#000000"],grayscale:["#000000","#333333","#666666","#999999","#cccccc","#ffffff"],amoled:["#000000","#ffffff"]},j={resolutionWidth:150,characterSet:P.default,inverted:!1,contrastStretch:!0,fontColor:"#FFFFFF",backgroundColor:"#242424",lineHeight:1,scaleRatio:.55,autoScaleHeight:!1,fontSize:12,transparentBackground:!1,dithering:!1,colorMode:"mono",fontFamily:M.fira,exportScale:2,fillTransparency:!0,brightness:1,contrast:1,saturation:1,colorPalette:[...D.cga]},O=t=>new Promise((e,u)=>{const o=new FileReader;o.onload=()=>e(o.result),o.onerror=u,o.readAsDataURL(t)}),A=t=>new Promise((e,u)=>{const o=new Image;o.crossOrigin="anonymous",o.onload=()=>e(o),o.onerror=u,o.src=t}),_=t=>new Promise((e,u)=>{const o=URL.createObjectURL(t),r=new Image;r.onload=()=>{URL.revokeObjectURL(o),e(r)},r.onerror=f=>{URL.revokeObjectURL(o),u(f)},r.src=o}),B=t=>{const e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:{r:0,g:0,b:0}},U=t=>Math.max(0,Math.min(255,t)),V=(t,e)=>{const{brightness:u,contrast:o,saturation:r}=e;if(u===1&&o===1&&r===1)return;const f=128*(1-o);for(let s=0;s<t.length;s+=4){let m=t[s],h=t[s+1],l=t[s+2];m*=u,h*=u,l*=u,m=m*o+f,h=h*o+f,l=l*o+f;const p=.299*m+.587*h+.114*l;m=p+r*(m-p),h=p+r*(h-p),l=p+r*(l-p),t[s]=U(m),t[s+1]=U(h),t[s+2]=U(l)}},q=(t,e,u,o)=>{let r=1/0,f=o[0];for(const s of o){const m=(t-s.r)**2+(e-s.g)**2+(u-s.b)**2;m<r&&(r=m,f=s)}return f},H=(t,e)=>{const u=document.createElement("canvas"),o=u.getContext("2d",{willReadFrequently:!0});if(!o)throw new Error("Canvas context not supported");const r=t.height/t.width,f=e.resolutionWidth,s=Math.floor(r*f*e.scaleRatio);u.width=f,u.height=s,o.drawImage(t,0,0,f,s);const h=o.getImageData(0,0,f,s).data,l=B(e.backgroundColor),p=e.colorMode==="palette"?e.colorPalette.map(B):[];for(let n=0;n<h.length;n+=4){const d=h[n+3];if(e.fillTransparency&&d<255){const a=d/255;h[n]=Math.round(h[n]*a+l.r*(1-a)),h[n+1]=Math.round(h[n+1]*a+l.g*(1-a)),h[n+2]=Math.round(h[n+2]*a+l.b*(1-a)),h[n+3]=255}}V(h,e);const i=new Float32Array(f*s),v=new Uint8ClampedArray(h.length);for(let n=0;n<h.length;n+=4){let d=h[n],a=h[n+1],c=h[n+2];if(e.colorMode==="palette"&&p.length>0){const g=q(d,a,c,p);d=g.r,a=g.g,c=g.b}v[n]=d,v[n+1]=a,v[n+2]=c,v[n+3]=255,i[n/4]=d*.299+a*.587+c*.114}if(e.contrastStretch){let n=255,d=0;for(let c=0;c<i.length;c++)i[c]<n&&(n=i[c]),i[c]>d&&(d=i[c]);const a=d-n;if(a>0)for(let c=0;c<i.length;c++)i[c]=(i[c]-n)/a*255;else i.fill(0)}let w=e.characterSet.split("");e.inverted&&(w=w.reverse());const S=w.length-1;if(e.dithering)for(let n=0;n<s;n++)for(let d=0;d<f;d++){const a=n*f+d,c=i[a],g=255/Math.max(1,S),T=Math.round(c/g)*g,E=c-T;d+1<f&&(i[n*f+(d+1)]+=E*7/16),d-1>=0&&n+1<s&&(i[(n+1)*f+(d-1)]+=E*3/16),n+1<s&&(i[(n+1)*f+d]+=E*5/16),d+1<f&&n+1<s&&(i[(n+1)*f+(d+1)]+=E*1/16)}const $=[],x=S/255;for(let n=0;n<i.length;n++){let d=i[n];d=Math.max(0,Math.min(255,d));const a=Math.floor(d*x+.5);$.push(w[Math.max(0,Math.min(a,S))])}const b=[];for(let n=0;n<$.length;n+=f)b.push($.slice(n,n+f).join(""));return{text:b.join(`
+`),lines:b,width:f,height:s,colorData:e.colorMode==="original"||e.colorMode==="palette"?v:void 0}},L=(t,e,u)=>{const o=document.createElement("canvas"),r=o.getContext("2d");if(!r)throw new Error("Canvas context not supported");const f=u||1,s=e.fontSize*f,m=e.fontFamily;r.font=`${s}px ${m}`,r.textBaseline="top";const l=r.measureText("M").width,i=s*e.lineHeight,v=Math.ceil(l*t.width),w=Math.ceil(i*t.height);o.width=v,o.height=w,r.font=`${s}px ${m}`,r.textBaseline="top",e.transparentBackground?r.clearRect(0,0,v,w):(r.fillStyle=e.backgroundColor,r.fillRect(0,0,v,w));const{lines:S,colorData:$}=t;if((e.colorMode==="original"||e.colorMode==="palette")&&$)for(let x=0;x<t.height;x++){const b=S[x],n=x*i;for(let d=0;d<t.width;d++){const a=b[d],c=(x*t.width+d)*4,g=$[c],I=$[c+1],T=$[c+2];r.fillStyle=`rgb(${g},${I},${T})`,r.fillText(a,d*l,n)}}else{r.fillStyle=e.fontColor;for(let x=0;x<S.length;x++)r.fillText(S[x],0,x*i)}return o},k=(t,e)=>{const{lines:u,colorData:o}=t,r=e.fontSize,f=r*.6,s=r*e.lineHeight,m=f*t.width,h=s*t.height,l=i=>i.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;");let p=`<svg xmlns="http://www.w3.org/2000/svg" width="${m}" height="${h}" viewBox="0 0 ${m} ${h}" shape-rendering="crispEdges">`;if(e.transparentBackground||(p+=`<rect width="100%" height="100%" fill="${e.backgroundColor}"/>`),p+=`<style>text { font-family: ${e.fontFamily}, monospace; font-size: ${r}px; white-space: pre; text-rendering: geometricPrecision; }</style>`,(e.colorMode==="original"||e.colorMode==="palette")&&o)for(let i=0;i<t.height;i++){let w=`<text x="0" y="${i*s+r}">`;for(let S=0;S<t.width;S++){const $=u[i][S],x=(i*t.width+S)*4,b=o[x],n=o[x+1],d=o[x+2],a="#"+((1<<24)+(b<<16)+(n<<8)+d).toString(16).slice(1);w+=`<tspan fill="${a}">${l($)}</tspan>`}w+="</text>",p+=w}else{const i=e.fontColor;u.forEach((v,w)=>{const S=w*s+r;p+=`<text x="0" y="${S}" fill="${i}">${l(v)}</text>`})}return p+="</svg>",p},z=(t,e)=>{const{lines:u,colorData:o}=t,r=e.fontSize,f=e.lineHeight;if((e.colorMode==="original"||e.colorMode==="palette")&&o){let s=`<pre style="font-family: ${e.fontFamily}; font-size: ${r}px; line-height: ${f}; margin: 0; ${e.transparentBackground?"":`background-color: ${e.backgroundColor};`} display: inline-block;">`;for(let m=0;m<t.height;m++){for(let h=0;h<t.width;h++){const l=u[m][h],p=(m*t.width+h)*4,i=o[p],v=o[p+1],w=o[p+2];s+=`<span style="color: rgb(${i},${v},${w})">${l==="<"?"&lt;":l===">"?"&gt;":l==="&"?"&amp;":l}</span>`}m<t.height-1&&(s+=`
+`)}return s+="</pre>",s}else{const s=u.join(`
+`).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");return`<pre style="font-family: ${e.fontFamily}; font-size: ${r}px; line-height: ${f}; margin: 0; color: ${e.fontColor}; ${e.transparentBackground?"":`background-color: ${e.backgroundColor};`} display: inline-block;">${s}</pre>`}},F=R.forwardRef(({src:t,config:e,output:u="html",onGenerate:o,onError:r,className:f,style:s,autoFit:m=!1},h)=>{const[l,p]=R.useState(null),[i,v]=R.useState(null),[w,S]=R.useState(!1),$=R.useRef(null),x=R.useRef(null),b=R.useMemo(()=>({...j,...e}),[e]);R.useEffect(()=>{let a=!1;return(async()=>{S(!0);try{let g;if(t instanceof HTMLImageElement)g=t;else if(typeof t=="object"&&t!==null&&"name"in t&&"type"in t){const I=await O(t);g=await A(I)}else if(t instanceof Blob)g=await _(t);else if(typeof t=="string")g=await A(t);else throw new Error("Invalid src type");a||v(g)}catch(g){if(!a){const I=g instanceof Error?g:new Error(String(g));r?.(I),v(null)}}finally{a||S(!1)}})(),()=>{a=!0}},[t,r]),R.useEffect(()=>{if(!i){p(null);return}const a=setTimeout(()=>{try{const c=H(i,b);p(c),o?.(c)}catch(c){const g=c instanceof Error?c:new Error(String(c));r?.(g)}},200);return()=>clearTimeout(a)},[i,b,o,r]);const n=R.useCallback(()=>{if(i)try{const a=H(i,b);p(a),o?.(a)}catch(a){const c=a instanceof Error?a:new Error(String(a));r?.(c)}},[i,b,o,r]);R.useImperativeHandle(h,()=>({getResult:()=>l,downloadPNG:(a=`ascii-art-${Date.now()}.png`)=>{if(!l)return;const c=L(l,b,b.exportScale),g=document.createElement("a");g.download=a,g.href=c.toDataURL("image/png"),g.click()},downloadSVG:(a=`ascii-art-${Date.now()}.svg`)=>{if(!l)return;const c=k(l,b),g=new Blob([c],{type:"image/svg+xml"}),I=URL.createObjectURL(g),T=document.createElement("a");T.download=a,T.href=I,T.click(),URL.revokeObjectURL(I)},downloadTXT:(a=`ascii-art-${Date.now()}.txt`)=>{if(!l)return;const c=new Blob([l.text],{type:"text/plain"}),g=URL.createObjectURL(c),I=document.createElement("a");I.download=a,I.href=g,I.click(),URL.revokeObjectURL(g)},copyToClipboard:async()=>{l&&await navigator.clipboard.writeText(l.text)},getCanvas:a=>l?L(l,b,a??b.exportScale):null,getSVGString:()=>l?k(l,b):null,refresh:n}),[l,b,n]);const d=R.useMemo(()=>{if(!l)return null;switch(u){case"svg":return C.jsx("div",{dangerouslySetInnerHTML:{__html:k(l,b)},style:{display:"inline-block"}});case"canvas":const a=L(l,b);return x.current=a,C.jsx("img",{src:a.toDataURL(),alt:"ASCII Art",style:{display:"block",maxWidth:m?"100%":void 0}});case"html":default:return C.jsx("div",{dangerouslySetInnerHTML:{__html:z(l,b)},style:{display:"inline-block"}})}},[l,b,u,m]);return C.jsx("div",{ref:$,className:f,style:{display:"inline-block",overflow:m?"auto":void 0,...s},children:w?C.jsx("div",{style:{padding:"1rem",opacity:.5},children:"Loading..."}):l?d:C.jsx("div",{style:{padding:"1rem",opacity:.5},children:"No image loaded"})})});F.displayName="ASCIIRender";const W=()=>R.useRef(null);y.ASCIIR=F,y.ASCIIRender=F,y.CHAR_SETS=P,y.DEFAULT_CONFIG=j,y.FONTS=M,y.FONT_RATIOS=N,y.PALETTE_PRESETS=D,y.default=F,y.generateAscii=H,y.generateCanvasFromAscii=L,y.generateHTML=z,y.generateSVG=k,y.loadImage=A,y.loadImageFromBlob=_,y.readFileAsDataURL=O,y.useASCIIRender=W,Object.defineProperties(y,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/dist/index.d.ts

@@ -0,0 +1,240 @@
+import { default as default_2 } from 'react';
+import { RefObject } from 'react';
+
+/**
+ * ASCIIRender - A React component for converting images to ASCII art
+ *
+ * @example
+ * ```tsx
+ * import { ASCIIRender } from 'asciirender';
+ *
+ * function App() {
+ *   return (
+ *     <ASCIIRender
+ *       src="/path/to/image.jpg"
+ *       config={{ resolutionWidth: 100, colorMode: 'original' }}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare const ASCIIRender: default_2.ForwardRefExoticComponent<ASCIIRenderProps & default_2.RefAttributes<ASCIIRenderRef>>;
+export { ASCIIRender as ASCIIR }
+export { ASCIIRender }
+export default ASCIIRender;
+
+/**
+ * Configuration options for ASCII art generation
+ */
+export declare interface ASCIIRenderConfig {
+    /** Width of output in characters (columns). Default: 150 */
+    resolutionWidth: number;
+    /** Character set for ASCII mapping (dark to light). Default: " .:-=+*#%@" */
+    characterSet: string;
+    /** Whether to invert the character ramp. Default: false */
+    inverted: boolean;
+    /** Apply auto contrast stretching. Default: true */
+    contrastStretch: boolean;
+    /** Font/text color for mono mode. Default: "#FFFFFF" */
+    fontColor: string;
+    /** Background color. Default: "#242424" */
+    backgroundColor: string;
+    /** Line height multiplier. Default: 1.0 */
+    lineHeight: number;
+    /** Vertical scale ratio (to correct aspect ratio). Default: 0.55 */
+    scaleRatio: number;
+    /** Auto-scale ratio based on font height. Default: false */
+    autoScaleHeight: boolean;
+    /** Font size in pixels. Default: 12 */
+    fontSize: number;
+    /** Whether background should be transparent. Default: false */
+    transparentBackground: boolean;
+    /** Apply Floyd-Steinberg dithering. Default: false */
+    dithering: boolean;
+    /** Color mode: 'mono', 'original', or 'palette'. Default: 'mono' */
+    colorMode: 'mono' | 'original' | 'palette';
+    /** Font family for rendering. Default: "'Fira Code', monospace" */
+    fontFamily: string;
+    /** Scale factor for PNG export. Default: 2 */
+    exportScale: number;
+    /** Fill transparent areas with background color. Default: true */
+    fillTransparency: boolean;
+    /** Brightness adjustment (0-3). Default: 1.0 */
+    brightness: number;
+    /** Contrast adjustment (0-3). Default: 1.0 */
+    contrast: number;
+    /** Saturation adjustment (0-3). Default: 1.0 */
+    saturation: number;
+    /** Color palette for palette mode. Default: CGA colors */
+    colorPalette: string[];
+}
+
+/**
+ * Props for the ASCIIRender component
+ */
+export declare interface ASCIIRenderProps {
+    /** Image source - can be URL, File, Blob, or HTMLImageElement */
+    src: string | File | Blob | HTMLImageElement;
+    /** Partial config overrides (all fields optional) */
+    config?: Partial<ASCIIRenderConfig>;
+    /** Output format: 'html' (default), 'svg', or 'canvas' */
+    output?: 'html' | 'svg' | 'canvas';
+    /** Callback when ASCII art is generated */
+    onGenerate?: (result: ProcessingResult) => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+    /** Additional className for the container */
+    className?: string;
+    /** Additional style for the container */
+    style?: React.CSSProperties;
+    /** Whether to auto-fit to container width */
+    autoFit?: boolean;
+}
+
+/**
+ * Ref handle for imperative access to ASCIIRender
+ */
+export declare interface ASCIIRenderRef {
+    /** Get the current processing result */
+    getResult: () => ProcessingResult | null;
+    /** Download as PNG */
+    downloadPNG: (filename?: string) => void;
+    /** Download as SVG */
+    downloadSVG: (filename?: string) => void;
+    /** Download as TXT */
+    downloadTXT: (filename?: string) => void;
+    /** Copy text to clipboard */
+    copyToClipboard: () => Promise<void>;
+    /** Get the generated canvas element */
+    getCanvas: (scale?: number) => HTMLCanvasElement | null;
+    /** Get the SVG string */
+    getSVGString: () => string | null;
+    /** Re-process the image with current config */
+    refresh: () => void;
+}
+
+/**
+ * Predefined character sets for ASCII art generation
+ */
+export declare const CHAR_SETS: {
+    /** Default character set */
+    readonly default: " .:-=+*#%@";
+    /** Standard short character set */
+    readonly standard_short: "@%#*+=-:. ";
+    /** Standard long character set with more detail */
+    readonly standard_long: "$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/\\|()1{}[]?-_+~<>i!lI;:,\"^`'. ";
+    /** Unicode block shades */
+    readonly blocks: "█▓▒░ ";
+    /** Binary style */
+    readonly binary: "01 ";
+    /** Minimal contrast */
+    readonly minimal: "#. ";
+    /** Matrix/Katakana style */
+    readonly matrix: "ﾊﾐﾋｰｳｼﾅﾓﾆｻﾜﾂｵﾘｱﾎﾃﾏｹﾒｴｶｷﾑﾕﾗｾﾈｽﾀﾇﾍ123457890:・.=*+-<>¦｜";
+};
+
+/**
+ * Default configuration for ASCII art generation
+ */
+export declare const DEFAULT_CONFIG: ASCIIRenderConfig;
+
+/**
+ * Approximate width/height ratio for each font
+ */
+export declare const FONT_RATIOS: Record<string, number>;
+
+/**
+ * Predefined monospace font families
+ */
+export declare const FONTS: {
+    readonly fira: "'Fira Code', monospace";
+    readonly vt323: "'VT323', monospace";
+    readonly roboto: "'Roboto Mono', monospace";
+    readonly source: "'Source Code Pro', monospace";
+    readonly courier: "'Courier New', monospace";
+};
+
+/**
+ * Generate ASCII art from an HTMLImageElement
+ */
+export declare const generateAscii: (image: HTMLImageElement, config: ASCIIRenderConfig) => ProcessingResult;
+
+/**
+ * Generate a canvas from ASCII result
+ */
+export declare const generateCanvasFromAscii: (result: ProcessingResult, config: ASCIIRenderConfig, customScale?: number) => HTMLCanvasElement;
+
+/**
+ * Generate HTML string from ASCII result
+ */
+export declare const generateHTML: (result: ProcessingResult, config: ASCIIRenderConfig) => string;
+
+/**
+ * Generate SVG string from ASCII result
+ */
+export declare const generateSVG: (result: ProcessingResult, config: ASCIIRenderConfig) => string;
+
+/**
+ * Load an image from a URL
+ */
+export declare const loadImage: (src: string) => Promise<HTMLImageElement>;
+
+/**
+ * Load an image from a Blob
+ */
+export declare const loadImageFromBlob: (blob: Blob) => Promise<HTMLImageElement>;
+
+/**
+ * Predefined color palettes for palette mode
+ */
+export declare const PALETTE_PRESETS: {
+    /** Classic terminal green */
+    readonly retro_term: readonly ["#000000", "#00ff00", "#008800"];
+    /** Game Boy 4-color palette */
+    readonly gameboy: readonly ["#0f380f", "#306230", "#8bac0f", "#9bbc0f"];
+    /** CGA 16-color palette (subset) */
+    readonly cga: readonly ["#000000", "#555555", "#ffffff", "#ff5555", "#ff55ff", "#55ffff"];
+    /** Vaporwave aesthetic */
+    readonly vaporwave: readonly ["#ff71ce", "#01cdfe", "#05ffa1", "#b967ff", "#fffb96", "#000000"];
+    /** Grayscale gradient */
+    readonly grayscale: readonly ["#000000", "#333333", "#666666", "#999999", "#cccccc", "#ffffff"];
+    /** AMOLED high contrast */
+    readonly amoled: readonly ["#000000", "#ffffff"];
+};
+
+/**
+ * Result of ASCII art processing
+ */
+export declare interface ProcessingResult {
+    /** Full ASCII text with newlines */
+    text: string;
+    /** Array of lines */
+    lines: string[];
+    /** Width in characters */
+    width: number;
+    /** Height in lines */
+    height: number;
+    /** Color data for colored modes (RGBA array) */
+    colorData?: Uint8ClampedArray;
+}
+
+/**
+ * Read a File as a data URL
+ */
+export declare const readFileAsDataURL: (file: File) => Promise<string>;
+
+/**
+ * Hook to get a typed ref for ASCIIR component
+ *
+ * @example
+ * ```tsx
+ * const asciiRef = useASCIIRender();
+ *
+ * return (
+ *   <ASCIIR ref={asciiRef} src={imageSrc} />
+ * );
+ * ```
+ */
+export declare const useASCIIRender: () => RefObject<ASCIIRenderRef>;
+
+export { }

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@asciirender/asciir",
+  "version": "1.0.2",
+  "description": "A powerful React component for converting images to beautiful ASCII art with customizable settings",
+  "author": "dvinay",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ACIIRenderer/ASCIIR.git"
+  },
+  "homepage": "https://github.com/ACIIRenderer/ASCIIR#readme",
+  "bugs": {
+    "url": "https://github.com/ACIIRenderer/ASCIIR/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "keywords": [
+    "ascii",
+    "ascii-art",
+    "image-processing",
+    "react",
+    "react-component",
+    "image-to-ascii",
+    "text-art",
+    "canvas",
+    "svg",
+    "typescript",
+    "image-converter"
+  ],
+  "type": "module",
+  "main": "./dist/asciir.umd.cjs",
+  "module": "./dist/asciir.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/asciir.js",
+      "require": "./dist/asciir.umd.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite --config vite.demo.config.ts",
+    "build": "npm run build:lib",
+    "build:lib": "tsc -p tsconfig.lib.json && vite build --config vite.config.ts",
+    "build:demo": "vite build --config vite.demo.config.ts",
+    "preview": "vite preview --config vite.demo.config.ts",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build:lib",
+    "size": "npm run build:lib && npx size-limit"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "lucide-react": "^0.562.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "react-router-dom": "^7.12.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0",
+    "vite-plugin-dts": "^4.5.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}