html-to-ascii 0.1.1 → 0.2.2

package/dist/components/ASCII.d.ts

@@ -0,0 +1,3 @@
+export declare const ASCII: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/contexts/GridContext.d.ts

@@ -0,0 +1,2 @@
+import { GridData } from '../types/GridData';
+export declare const GridContext: import('react').Context<GridData>;

package/dist/hooks/useGridContext.d.ts

@@ -0,0 +1 @@
+export declare const useGridContext: () => import('../types/GridData').GridData;

package/dist/hooks/useReveal.d.ts

@@ -0,0 +1 @@
+export declare function useReveal(grid: string[], speed?: number): string[];

package/dist/hooks/useWindowDimensions.d.ts

@@ -0,0 +1,4 @@
+export declare function useWindowDimensions(): {
+    width: number;
+    height: number;
+};

package/dist/html-to-ascii.js

@@ -0,0 +1,283 @@
+import { jsxs as H, jsx as f } from "react/jsx-runtime";
+import { createContext as W, useContext as k, useState as b, useEffect as u, useRef as x, useLayoutEffect as v } from "react";
+const m = {
+  t: "─",
+  ti: "┴",
+  b: "─",
+  bi: "┬",
+  l: "│",
+  li: "┤",
+  r: "│",
+  ri: "├",
+  tl: "┌",
+  tr: "┐",
+  br: "┘",
+  bl: "└",
+  i: "┼",
+  fill: " "
+}, w = W({
+  fontHeight: 0,
+  courierRatio: 0,
+  fontWidth: 0,
+  truncWidth: 0,
+  truncHeight: 0,
+  windowWidth: 0,
+  windowHeight: 0,
+  rows: 0,
+  cols: 0,
+  grid: [],
+  options: m
+}), C = () => k(w);
+function d(s, t = 1) {
+  const [n, i] = b(0);
+  return u(() => {
+    let c;
+    const a = () => {
+      i((o) => o >= s.length ? o : o + t), c = requestAnimationFrame(a);
+    };
+    return a(), () => cancelAnimationFrame(c);
+  }, [s, t]), s.slice(0, n);
+}
+const r = (s, t, n) => {
+  const i = s / n.fontWidth | 0;
+  return (t / n.fontHeight | 0) * n.cols + i;
+}, y = ({ rect: s, grid: t }) => {
+  const n = Math.floor(s.rect.left / t.fontWidth) * t.fontWidth, i = Math.floor(s.rect.right / t.fontWidth) * t.fontWidth, c = Math.floor(s.rect.top / t.fontHeight) * t.fontHeight, a = Math.floor(s.rect.bottom / t.fontHeight) * t.fontHeight;
+  if (s.classList.contains("ascii-border") && !["ascii-border-l", "ascii-border-r", "ascii-border-t", "ascii-border-b"].some(
+    (o) => s.classList.contains(o)
+  ) || s.classList.contains("ascii-border-l"))
+    for (let o = c + t.fontHeight; o < a; o += t.fontHeight) {
+      const e = r(n, o, t);
+      switch (t.grid[e]) {
+        case t.options.t:
+        case t.options.b:
+        case t.options.tr:
+        case t.options.br:
+          t.grid[e] = t.options.li;
+          break;
+        default:
+          t.grid[e] = t.options.l;
+      }
+    }
+  if (s.classList.contains("ascii-border") && !["ascii-border-l", "ascii-border-r", "ascii-border-t", "ascii-border-b"].some(
+    (o) => s.classList.contains(o)
+  ) || s.classList.contains("ascii-border-r"))
+    for (let o = c + t.fontHeight; o < a; o += t.fontHeight) {
+      const e = r(i, o, t);
+      switch (t.grid[e]) {
+        case t.options.t:
+        case t.options.b:
+        case t.options.tl:
+        case t.options.bl:
+          t.grid[e] = t.options.ri;
+          break;
+        default:
+          t.grid[e] = t.options.r;
+      }
+    }
+  if (s.classList.contains("ascii-border") && !["ascii-border-l", "ascii-border-r", "ascii-border-t", "ascii-border-b"].some(
+    (o) => s.classList.contains(o)
+  ) || s.classList.contains("ascii-border-t"))
+    for (let o = n + t.fontWidth; o < i; o += t.fontWidth) {
+      const e = r(o, c, t);
+      switch (t.grid[e]) {
+        case t.options.l:
+        case t.options.r:
+        case t.options.bl:
+        case t.options.br:
+          t.grid[e] = t.options.ti;
+          break;
+        default:
+          t.grid[e] = t.options.t;
+      }
+    }
+  if (s.classList.contains("ascii-border") && !["ascii-border-l", "ascii-border-r", "ascii-border-t", "ascii-border-b"].some(
+    (o) => s.classList.contains(o)
+  ) || s.classList.contains("ascii-border-b"))
+    for (let o = n + t.fontWidth; o < i; o += t.fontWidth) {
+      const e = r(o, a, t);
+      switch (t.grid[e]) {
+        case t.options.l:
+        case t.options.r:
+        case t.options.tl:
+        case t.options.tr:
+          t.grid[e] = t.options.bi;
+          break;
+        default:
+          t.grid[e] = t.options.b;
+      }
+    }
+  if (["ascii-border", "ascii-border-tl"].some((o) => s.classList.contains(o)) || ["ascii-border-l", "ascii-border-t"].every((o) => s.classList.contains(o))) {
+    const o = r(n, c, t);
+    switch (t.grid[o]) {
+      case t.options.t:
+      case t.options.b:
+      case t.options.tr:
+        t.grid[o] = t.options.bi;
+        break;
+      case t.options.l:
+      case t.options.r:
+      case t.options.bl:
+        t.grid[o] = t.options.ri;
+        break;
+      case t.options.br:
+        t.grid[o] = t.options.i;
+        break;
+      default:
+        t.grid[o] = t.options.tl;
+    }
+  }
+  if (["ascii-border", "ascii-border-tr"].some((o) => s.classList.contains(o)) || ["ascii-border-r", "ascii-border-t"].every((o) => s.classList.contains(o))) {
+    const o = r(i, c, t);
+    switch (t.grid[o]) {
+      case t.options.t:
+      case t.options.b:
+      case t.options.tl:
+        t.grid[o] = t.options.bi;
+        break;
+      case t.options.l:
+      case t.options.r:
+      case t.options.br:
+        t.grid[o] = t.options.li;
+        break;
+      case t.options.bl:
+        t.grid[o] = t.options.i;
+        break;
+      default:
+        t.grid[o] = t.options.tr;
+    }
+  }
+  if (["ascii-border", "ascii-border-br"].some((o) => s.classList.contains(o)) || ["ascii-border-r", "ascii-border-b"].every((o) => s.classList.contains(o))) {
+    const o = r(i, a, t);
+    if (s.type === "textarea")
+      t.grid[o] = "▼";
+    else
+      switch (t.grid[o]) {
+        case t.options.l:
+        case t.options.r:
+        case t.options.tr:
+          t.grid[o] = t.options.li;
+          break;
+        case t.options.t:
+        case t.options.b:
+        case t.options.bl:
+          t.grid[o] = t.options.ti;
+          break;
+        case t.options.tl:
+          t.grid[o] = t.options.i;
+          break;
+        default:
+          t.grid[o] = t.options.br;
+      }
+  }
+  if (["ascii-border", "ascii-border-bl"].some((o) => s.classList.contains(o)) || ["ascii-border-l", "ascii-border-b"].every((o) => s.classList.contains(o))) {
+    const o = r(n, a, t);
+    switch (t.grid[o]) {
+      case t.options.l:
+      case t.options.r:
+      case t.options.tl:
+        t.grid[o] = t.options.ri;
+        break;
+      case t.options.t:
+      case t.options.b:
+      case t.options.br:
+        t.grid[o] = t.options.ti;
+        break;
+      case t.options.tr:
+        t.grid[o] = t.options.i;
+        break;
+      default:
+        t.grid[o] = t.options.bl;
+    }
+  }
+  if (s.classList.contains("ascii-fill"))
+    for (let o = c + t.fontHeight; o < a; o += t.fontHeight)
+      for (let e = n + t.fontWidth; e < i; e += t.fontWidth)
+        t.grid[r(e, o, t)] = t.options.fill;
+  s.classList.contains("ascii-text") && s.characters.forEach((o) => {
+    const e = Math.floor(o.rect.left / t.fontWidth) * t.fontWidth, l = Math.floor(o.rect.bottom / t.fontHeight) * t.fontHeight;
+    t.grid[r(e, l, t)] = o.char;
+  });
+};
+function R(s) {
+  return s.current ? Array.from(s.current.querySelectorAll('[class*="ascii"]')).map((t) => {
+    const n = [], i = document.createTreeWalker(t, NodeFilter.SHOW_TEXT);
+    for (; i.nextNode(); ) {
+      const c = i.currentNode, a = c.textContent ?? "";
+      for (let o = 0; o < a.length; o++) {
+        if (a[o].trim() === "") continue;
+        const e = document.createRange();
+        e.setStart(c, o), e.setEnd(c, o + 1);
+        const l = e.getBoundingClientRect();
+        n.push({ char: a[o], rect: l });
+      }
+    }
+    return {
+      rect: t.getBoundingClientRect(),
+      characters: n,
+      type: t.tagName.toLowerCase(),
+      classList: t.classList
+    };
+  }) : [];
+}
+const I = ({ children: s }) => {
+  const t = x(null), n = C(), [i, c] = b([]), a = d(n.grid, 30);
+  v(() => {
+    if (!t.current) return;
+    let o;
+    const e = () => {
+      c(R(t)), o = requestAnimationFrame(e);
+    };
+    return e(), () => cancelAnimationFrame(o);
+  }, []);
+  for (let o = 0; o < n.grid.length; o++)
+    n.grid[o] = " ";
+  return i?.forEach((o) => {
+    y({ rect: o, grid: n });
+  }), /* @__PURE__ */ H("div", { ref: t, children: [
+    /* @__PURE__ */ f(
+      "div",
+      {
+        style: { width: n.truncWidth, height: n.truncHeight },
+        className: "absolute opacity-0 top-0 left-0 bg-none pointer-events-none",
+        children: s
+      }
+    ),
+    t.current && /* @__PURE__ */ f("div", { style: { width: n.truncWidth, height: n.truncHeight }, className: "leading-none wrap-break-word", children: a.join("") })
+  ] });
+};
+function A() {
+  const [s, t] = b({
+    width: 0,
+    height: 0
+  });
+  return u(() => {
+    const n = () => t({ width: window.innerWidth, height: window.innerHeight });
+    return n(), window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
+  }, []), s;
+}
+function E({ width: s, height: t }) {
+  const i = 0.60009765625, c = 16 * i, a = s - s % c, o = t - t % 16, e = s, l = t, h = Math.floor(o / 16), p = Math.floor(a / c), L = Array.from({ length: h * p }, () => " ");
+  return {
+    fontHeight: 16,
+    courierRatio: i,
+    fontWidth: c,
+    truncWidth: a,
+    truncHeight: o,
+    windowWidth: e,
+    windowHeight: l,
+    rows: h,
+    cols: p,
+    grid: L,
+    options: m
+  };
+}
+function F({ children: s }) {
+  const { width: t, height: n } = A(), i = E({ width: t, height: n });
+  return /* @__PURE__ */ f(w.Provider, { value: i, children: s });
+}
+export {
+  I as ASCII,
+  F as ASCIIProvider,
+  C as useGridContext
+};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { ASCII } from './components/ASCII.tsx';
+export { useGridContext } from './hooks/useGridContext.tsx';
+export { ASCIIProvider } from './providers/ASCIIProvider.tsx';

package/dist/providers/ASCIIProvider.d.ts

@@ -0,0 +1,3 @@
+export declare function ASCIIProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/utils/defaultOptions.d.ts

@@ -0,0 +1,2 @@
+import { GridOptions } from '../types/GridOptions';
+export declare const defaultOptions: GridOptions;

package/package.json

@@ -1,11 +1,16 @@
 {
 	"name": "html-to-ascii",
 	"private": false,
-	"version": "0.1.1",
+	"version": "0.2.2",
 	"type": "module",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"files": [
+		"dist"
+	],
 	"scripts": {
 		"dev": "vite",
-		"build": "tsc -b && vite build",
+		"build": "tsc -b ./tsconfig.lib.json && vite build",
 		"lint": "eslint .",
 		"preview": "vite preview"
 	},
@@ -27,6 +32,7 @@
 		"globals": "^16.5.0",
 		"typescript": "~5.9.3",
 		"typescript-eslint": "^8.46.4",
-		"vite": "^7.2.4"
+		"vite": "^7.2.4",
+		"vite-plugin-dts": "^4.5.4"
 	}
 }

package/CHANGELOG.md

@@ -1,16 +0,0 @@
-# Changelog
-
-All notable changes to this project will be documented in this file.
-
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-
-## [Unreleased]
-
-## [0.1.0] - 2026-02-08
-
-### Added
-
-- Basic functionality
-- ASCII box customization
-- Basic position change monitoring

package/eslint.config.js

@@ -1,23 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import { defineConfig, globalIgnores } from 'eslint/config'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs.flat.recommended,
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-  },
-])

package/index.html

@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>html-to-ascii</title>
-	</head>
-	<body>
-		<div id="root"></div>
-		<script type="module" src="/src/main.tsx"></script>
-	</body>
-</html>

package/src/App.css

@@ -1 +0,0 @@
-@import "tailwindcss";

package/src/App.tsx

@@ -1,39 +0,0 @@
-import ASCII from "./components/ASCII"
-
-function App() {
-	return (
-		<ASCII>
-			<div className="flex justify-center">
-				<div className="w-72 h-48 border text-center p-4 ascii-border">
-					<div className="m-4 ascii-border-tl ascii-border-br h-8" />
-					<div className="m-2 border h-8 ascii-border-r ascii-border-b" />
-					<button className="ascii-border ascii-text">button</button>
-					<br></br>
-					<a href="https://en.wikipedia.org/wiki/Block_Elements" className="ascii-border ascii-text">
-						a link
-					</a>
-				</div>
-				<textarea className="w-64 h-64 ascii-border" defaultValue={"test"}></textarea>
-				<br></br>
-				<div className="p-4">
-					{" "}
-					<label htmlFor="cars" className="border">
-						Choose a car:
-					</label>
-					<select name="cars" id="cars" className="border">
-						<option value="volvo">Volvo</option>
-						<option value="saab">Saab</option>
-						<option value="mercedes">Mercedes</option>
-						<option value="audi">Audi</option>
-					</select>
-				</div>
-			</div>
-			{/* <img
-				src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmancelona-vet.com%2Fwp-content%2Fuploads%2F2022%2F04%2FPuppy-Care.png&f=1&nofb=1&ipt=fdd8b957d76c0c6eda753c0b89ca41de8642c16b654126bf5cd82e61c0d114ea"
-				className="ascii-border opacity-100 p-10 mt-4"
-			></img> */}
-		</ASCII>
-	)
-}
-
-export default App

package/src/components/ASCII.tsx

@@ -1,322 +0,0 @@
-import { useLayoutEffect, useRef, useState } from "react"
-import type GridData from "../types/GridData"
-import type Rect from "../types/Rect"
-import { useGridContext } from "../hooks/useGridContext"
-
-const getIndex = (x: number, y: number, grid: GridData) => {
-	const col = (x / grid.fontWidth) | 0
-	const row = (y / grid.fontHeight) | 0
-	return row * grid.cols + col
-}
-
-const drawRect = ({ rect, grid }: { rect: Rect; grid: GridData }) => {
-	const rectLeft = Math.floor(rect.rect.left / grid.fontWidth) * grid.fontWidth
-	const rectRight = Math.floor(rect.rect.right / grid.fontWidth) * grid.fontWidth
-	const rectTop = Math.floor(rect.rect.top / grid.fontHeight) * grid.fontHeight
-	const rectBottom = Math.floor(rect.rect.bottom / grid.fontHeight) * grid.fontHeight
-
-	//verticals
-	//left
-	if (
-		(rect.classList.contains("ascii-border") &&
-			!["ascii-border-l", "ascii-border-r", "ascii-border-t", "ascii-border-b"].some((c) =>
-				rect.classList.contains(c),
-			)) ||
-		rect.classList.contains("ascii-border-l")
-	) {
-		for (let i = rectTop + grid.fontHeight; i < rectBottom; i += grid.fontHeight) {
-			const l = getIndex(rectLeft, i, grid)
-
-			switch (grid.grid[l]) {
-				case grid.options.t:
-				case grid.options.b:
-				case grid.options.tr:
-				case grid.options.br:
-					grid.grid[l] = grid.options.li
-					break
-				default:
-					grid.grid[l] = grid.options.l
-			}
-		}
-	}
-	//right
-	if (
-		(rect.classList.contains("ascii-border") &&
-			!["ascii-border-l", "ascii-border-r", "ascii-border-t", "ascii-border-b"].some((c) =>
-				rect.classList.contains(c),
-			)) ||
-		rect.classList.contains("ascii-border-r")
-	) {
-		for (let i = rectTop + grid.fontHeight; i < rectBottom; i += grid.fontHeight) {
-			const r = getIndex(rectRight, i, grid)
-
-			switch (grid.grid[r]) {
-				case grid.options.t:
-				case grid.options.b:
-				case grid.options.tl:
-				case grid.options.bl:
-					grid.grid[r] = grid.options.ri
-					break
-				default:
-					grid.grid[r] = grid.options.r
-			}
-		}
-	}
-
-	//horizontals
-	//top
-	if (
-		(rect.classList.contains("ascii-border") &&
-			!["ascii-border-l", "ascii-border-r", "ascii-border-t", "ascii-border-b"].some((c) =>
-				rect.classList.contains(c),
-			)) ||
-		rect.classList.contains("ascii-border-t")
-	) {
-		for (let i = rectLeft + grid.fontWidth; i < rectRight; i += grid.fontWidth) {
-			const t = getIndex(i, rectTop, grid)
-
-			switch (grid.grid[t]) {
-				case grid.options.l:
-				case grid.options.r:
-				case grid.options.bl:
-				case grid.options.br:
-					grid.grid[t] = grid.options.ti
-					break
-				default:
-					grid.grid[t] = grid.options.t
-			}
-		}
-	}
-	//bottom
-	if (
-		(rect.classList.contains("ascii-border") &&
-			!["ascii-border-l", "ascii-border-r", "ascii-border-t", "ascii-border-b"].some((c) =>
-				rect.classList.contains(c),
-			)) ||
-		rect.classList.contains("ascii-border-b")
-	) {
-		for (let i = rectLeft + grid.fontWidth; i < rectRight; i += grid.fontWidth) {
-			const b = getIndex(i, rectBottom, grid)
-			switch (grid.grid[b]) {
-				case grid.options.l:
-				case grid.options.r:
-				case grid.options.tl:
-				case grid.options.tr:
-					grid.grid[b] = grid.options.bi
-					break
-				default:
-					grid.grid[b] = grid.options.b
-			}
-		}
-	}
-
-	//corners
-	//tl
-	if (
-		["ascii-border", "ascii-border-tl"].some((c) => rect.classList.contains(c)) ||
-		["ascii-border-l", "ascii-border-t"].every((c) => rect.classList.contains(c))
-	) {
-		const tl = getIndex(rectLeft, rectTop, grid)
-		switch (grid.grid[tl]) {
-			case grid.options.t:
-			case grid.options.b:
-			case grid.options.tr:
-				grid.grid[tl] = grid.options.bi
-				break
-			case grid.options.l:
-			case grid.options.r:
-			case grid.options.bl:
-				grid.grid[tl] = grid.options.ri
-				break
-			case grid.options.br:
-				grid.grid[tl] = grid.options.i
-				break
-			default:
-				grid.grid[tl] = grid.options.tl
-		}
-	}
-	//tr
-	if (
-		["ascii-border", "ascii-border-tr"].some((c) => rect.classList.contains(c)) ||
-		["ascii-border-r", "ascii-border-t"].every((c) => rect.classList.contains(c))
-	) {
-		const tr = getIndex(rectRight, rectTop, grid)
-		switch (grid.grid[tr]) {
-			case grid.options.t:
-			case grid.options.b:
-			case grid.options.tl:
-				grid.grid[tr] = grid.options.bi
-				break
-			case grid.options.l:
-			case grid.options.r:
-			case grid.options.br:
-				grid.grid[tr] = grid.options.li
-				break
-			case grid.options.bl:
-				grid.grid[tr] = grid.options.i
-				break
-			default:
-				grid.grid[tr] = grid.options.tr
-		}
-	}
-	//br
-	if (
-		["ascii-border", "ascii-border-br"].some((c) => rect.classList.contains(c)) ||
-		["ascii-border-r", "ascii-border-b"].every((c) => rect.classList.contains(c))
-	) {
-		const br = getIndex(rectRight, rectBottom, grid)
-		if (rect.type === "textarea") {
-			grid.grid[br] = "▼"
-		} else {
-			switch (grid.grid[br]) {
-				case grid.options.l:
-				case grid.options.r:
-				case grid.options.tr:
-					grid.grid[br] = grid.options.li
-					break
-				case grid.options.t:
-				case grid.options.b:
-				case grid.options.bl:
-					grid.grid[br] = grid.options.ti
-					break
-				case grid.options.tl:
-					grid.grid[br] = grid.options.i
-					break
-				default:
-					grid.grid[br] = grid.options.br
-			}
-		}
-	}
-
-	//bl
-	if (
-		["ascii-border", "ascii-border-bl"].some((c) => rect.classList.contains(c)) ||
-		["ascii-border-l", "ascii-border-b"].every((c) => rect.classList.contains(c))
-	) {
-		const bl = getIndex(rectLeft, rectBottom, grid)
-		switch (grid.grid[bl]) {
-			case grid.options.l:
-			case grid.options.r:
-			case grid.options.tl:
-				grid.grid[bl] = grid.options.ri
-				break
-			case grid.options.t:
-			case grid.options.b:
-			case grid.options.br:
-				grid.grid[bl] = grid.options.ti
-				break
-			case grid.options.tr:
-				grid.grid[bl] = grid.options.i
-				break
-			default:
-				grid.grid[bl] = grid.options.bl
-		}
-	}
-
-	//fill
-	if (rect.classList.contains("ascii-fill")) {
-		for (let y = rectTop + grid.fontHeight; y < rectBottom; y += grid.fontHeight) {
-			for (let x = rectLeft + grid.fontWidth; x < rectRight; x += grid.fontWidth) {
-				grid.grid[getIndex(x, y, grid)] = grid.options.fill
-			}
-		}
-	}
-
-	//characters
-	if (rect.classList.contains("ascii-text")) {
-		rect.characters.forEach((c) => {
-			const cRectLeft = Math.floor(c.rect.left / grid.fontWidth) * grid.fontWidth
-			const cRectBottom = Math.floor(c.rect.bottom / grid.fontHeight) * grid.fontHeight
-			grid.grid[getIndex(cRectLeft, cRectBottom, grid)] = c.char
-		})
-	}
-}
-
-function getElements(ref: React.RefObject<HTMLDivElement | null>): Rect[] {
-	if (!ref.current) return []
-	return Array.from(ref.current.querySelectorAll<HTMLElement>('[class*="ascii"]')).map((el) => {
-		//console.log("element", el)
-		const c: { char: string; rect: DOMRect }[] = []
-		const textWalker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT)
-
-		while (textWalker.nextNode()) {
-			const textNode = textWalker.currentNode as Text
-			const text = textNode.textContent ?? ""
-
-			for (let i = 0; i < text.length; i++) {
-				if (text[i].trim() === "") continue
-				//console.log(text[i])
-				const range = document.createRange()
-				range.setStart(textNode, i)
-				range.setEnd(textNode, i + 1)
-
-				const rect = range.getBoundingClientRect()
-				//if (rect.width === 0 || rect.height === 0) continue
-
-				c.push({ char: text[i], rect })
-			}
-		}
-		return {
-			rect: el.getBoundingClientRect(),
-			characters: c,
-			type: el.tagName.toLowerCase(),
-			classList: el.classList,
-		}
-	})
-}
-
-export default function ASCII({ children }: { children: React.ReactNode }) {
-	const parentRef = useRef<HTMLDivElement | null>(null)
-	const grid = useGridContext()
-	const [rects, setRects] = useState<Rect[] | null>([])
-
-	useLayoutEffect(() => {
-		if (!parentRef.current) return
-
-		const update = () => {
-			const r = getElements(parentRef)
-			setRects(r)
-		}
-
-		const observer = new MutationObserver((mutations) => {
-			mutations.forEach(() => {
-				//console.log("DOM changed:", mutation.type)
-				// Handle the DOM change here
-				update()
-			})
-		})
-
-		observer.observe(parentRef.current, {
-			attributes: true,
-			childList: true,
-			subtree: true,
-			characterData: true,
-		})
-	}, [])
-
-	// clear canvas
-	// maybe find better way
-	for (let i = 0; i < grid.grid.length; i++) {
-		grid.grid[i] = String.fromCharCode(160)
-	}
-
-	rects?.forEach((rect) => {
-		drawRect({ rect, grid })
-	})
-
-	return (
-		<div ref={parentRef}>
-			<div
-				style={{ width: grid.truncWidth, height: grid.truncHeight }}
-				className="absolute opacity-0 top-0 left-0 bg-none pointer-events-none"
-			>
-				{children}
-			</div>
-			{parentRef.current && (
-				<div style={{ width: grid.truncWidth, height: grid.truncHeight }} className="leading-none wrap-break-word">
-					{grid.grid.join("")}
-				</div>
-			)}
-		</div>
-	)
-}

package/src/contexts/GridContext.tsx

@@ -1,17 +0,0 @@
-import { createContext } from "react"
-import type GridData from "../types/GridData"
-import { defaultOptions } from "../utils/defaultOptions"
-
-export const GridContext = createContext<GridData>({
-	fontHeight: 0,
-	courierRatio: 0,
-	fontWidth: 0,
-	truncWidth: 0,
-	truncHeight: 0,
-	windowWidth: 0,
-	windowHeight: 0,
-	rows: 0,
-	cols: 0,
-	grid: [],
-	options: defaultOptions,
-})

package/src/hooks/useGridContext.tsx

@@ -1,6 +0,0 @@
-import { useContext } from "react"
-import { GridContext } from "../contexts/GridContext"
-
-export const useGridContext = () => {
-	return useContext(GridContext)
-}

package/src/hooks/useWindowDimensions.tsx

@@ -1,17 +0,0 @@
-import { useEffect, useState } from "react"
-
-export default function useWindowDimensions() {
-	const [dimensions, setDimensions] = useState({
-		width: 0,
-		height: 0,
-	})
-	useEffect(() => {
-		const update = () => setDimensions({ width: window.innerWidth, height: window.innerHeight })
-
-		update() // Set initial size
-		window.addEventListener("resize", update)
-		return () => window.removeEventListener("resize", update)
-	}, [])
-
-	return dimensions
-}

package/src/index.css

@@ -1,26 +0,0 @@
-@import "tailwindcss";
-
-:root {
-	font-family: "Courier New", Courier, monospace;
-	height: 100vh;
-}
-
-body {
-	height: 100vh;
-}
-
-#root {
-	height: 100vh;
-}
-
-a,
-button,
-input,
-textarea,
-select,
-area,
-label,
-details,
-summary {
-	pointer-events: auto;
-}

package/src/main.tsx

@@ -1,13 +0,0 @@
-import { StrictMode } from "react"
-import { createRoot } from "react-dom/client"
-import "./index.css"
-import App from "./App.tsx"
-import ASCIIProvider from "./providers/ASCIIProvider.tsx"
-
-createRoot(document.getElementById("root")!).render(
-	<StrictMode>
-		<ASCIIProvider>
-			<App />
-		</ASCIIProvider>
-	</StrictMode>,
-)

package/src/providers/ASCIIProvider.tsx

@@ -1,37 +0,0 @@
-import { GridContext } from "../contexts/GridContext"
-import useWindowDimensions from "../hooks/useWindowDimensions"
-import type GridData from "../types/GridData"
-import { defaultOptions } from "../utils/defaultOptions"
-
-function initGrid({ width, height }: { width: number; height: number }): GridData {
-	const fontHeight = 16
-	const courierRatio = 1229 / 2048
-	const fontWidth = fontHeight * courierRatio
-	const truncWidth = width - (width % fontWidth)
-	const truncHeight = height - (height % fontHeight)
-	const windowWidth = width
-	const windowHeight = height
-	const rows = Math.floor(truncHeight / fontHeight)
-	const cols = Math.floor(truncWidth / fontWidth)
-	const grid = Array.from({ length: rows * cols }, () => String.fromCharCode(160))
-	const options = defaultOptions
-	return {
-		fontHeight,
-		courierRatio,
-		fontWidth,
-		truncWidth,
-		truncHeight,
-		windowWidth,
-		windowHeight,
-		rows,
-		cols,
-		grid,
-		options,
-	}
-}
-
-export default function ASCIIProvider({ children }: { children: React.ReactNode }) {
-	const { width, height } = useWindowDimensions()
-	const grid = initGrid({ width, height })
-	return <GridContext.Provider value={grid}>{children}</GridContext.Provider>
-}

package/src/types/GridData.tsx

@@ -1,15 +0,0 @@
-import type GridOptions from "./GridOptions"
-
-export default interface GridData {
-	fontHeight: number | 0
-	courierRatio: number
-	fontWidth: number
-	truncWidth: number
-	truncHeight: number
-	windowWidth: number
-	windowHeight: number
-	rows: number
-	cols: number
-	grid: string[]
-	options: Required<GridOptions>
-}

package/src/types/GridOptions.tsx

@@ -1,16 +0,0 @@
-export default interface GridOptions {
-	t: string
-	ti: string
-	b: string
-	bi: string
-	l: string
-	li: string
-	r: string
-	ri: string
-	tl: string
-	tr: string
-	br: string
-	bl: string
-	i: string
-	fill: string
-}

package/src/types/Rect.tsx

@@ -1,6 +0,0 @@
-export default interface Rect {
-	rect: DOMRect
-	characters: { char: string; rect: DOMRect }[]
-	type: string
-	classList: DOMTokenList
-}

package/src/utils/defaultOptions.tsx

@@ -1,18 +0,0 @@
-import type GridOptions from "../types/GridOptions"
-
-export const defaultOptions: GridOptions = {
-	t: "─",
-	ti: "┴",
-	b: "─",
-	bi: "┬",
-	l: "│",
-	li: "┤",
-	r: "│",
-	ri: "├",
-	tl: "┌",
-	tr: "┐",
-	br: "┘",
-	bl: "└",
-	i: "┼",
-	fill: String.fromCharCode(160),
-}

package/tsconfig.app.json

@@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "types": ["vite/client"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["src"]
-}

package/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
-}

package/tsconfig.node.json

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2023",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "types": ["node"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
-}

package/vite.config.ts

@@ -1,8 +0,0 @@
-import { defineConfig } from "vite"
-import react from "@vitejs/plugin-react"
-import tailwindcss from "@tailwindcss/vite"
-
-// https://vite.dev/config/
-export default defineConfig({
-	plugins: [react(), tailwindcss()],
-})