@mdcrty/paint 0.1.0

package/README.md

@@ -0,0 +1,173 @@
+# @mdcrty/paint
+
+A zero-dependency React canvas paint component with built-in brush, eraser, and bucket fill tools.
+
+---
+
+## Features
+
+- Brush, eraser, and bucket fill tools
+- Dynamic slider — size in px for brush/eraser, tolerance % for bucket
+- Colour palette with custom colour picker
+- Brush/eraser size preview cursor (visible on light and dark backgrounds)
+- Built-in save (PNG download) and clear actions
+- Fully customisable via `classNames` or a `renderControls` render prop
+- No runtime dependencies beyond React
+
+---
+
+## Installation
+
+```bash
+npm install @mdcrty/paint
+```
+
+Peer dependencies: `react >= 18`, `react-dom >= 18`
+
+---
+
+## Basic Usage
+
+```tsx
+import { Paint } from "@mdcrty/paint";
+
+export default function Page() {
+  return <Paint controls />;
+}
+```
+
+`controls` enables the built-in toolbar (tools, slider, palette, save/clear buttons).
+
+---
+
+## Props
+
+```ts
+type PaintProps = {
+  controls?: boolean;
+  colors?: string[];
+  fillTolerance?: number;
+  renderControls?: (state: PaintState) => ReactNode;
+  classNames?: PaintClassNames;
+};
+```
+
+| Prop | Default | Description |
+|---|---|---|
+| `controls` | `false` | Show the built-in toolbar |
+| `colors` | `["#000", "#EF626C", "#FDEC03", "#24D102", "#FFF"]` | Preset colour swatches |
+| `fillTolerance` | `80` | Initial bucket tolerance (0–128, raw per-channel RGBA delta) |
+| `renderControls` | — | Replace the built-in toolbar entirely with your own UI |
+| `classNames` | — | Override class names on individual toolbar slots |
+
+---
+
+## Imperative API
+
+Access via `ref` to trigger actions from outside the component:
+
+```tsx
+import { useRef } from "react";
+import { Paint, PaintHandle } from "@mdcrty/paint";
+
+export default function Page() {
+  const paintRef = useRef<PaintHandle>(null);
+
+  return (
+    <>
+      <Paint ref={paintRef} controls />
+      <button onClick={() => paintRef.current?.clearCanvas()}>Clear</button>
+      <button onClick={() => paintRef.current?.saveImage()}>Save</button>
+    </>
+  );
+}
+```
+
+```ts
+type PaintHandle = {
+  clearCanvas(): void;
+  saveImage(): void;
+};
+```
+
+---
+
+## Custom Controls
+
+Use `renderControls` to replace the built-in toolbar with your own UI. All canvas state and actions are passed in:
+
+```tsx
+<Paint
+  renderControls={({ marker, setMarker, toolSelection, setToolSelection, clearCanvas }) => (
+    <div>
+      <button onClick={() => setToolSelection("brush")}>Brush</button>
+      <button onClick={() => setToolSelection("eraser")}>Eraser</button>
+      <button onClick={() => setMarker("#ff0000")}>Red</button>
+      <button onClick={clearCanvas}>Clear</button>
+    </div>
+  )}
+/>
+```
+
+```ts
+type PaintState = {
+  marker: string;
+  setMarker: (color: string) => void;
+  markerWidth: number;
+  setMarkerWidth: (width: number) => void;
+  toolSelection: string;
+  setToolSelection: (tool: string) => void;
+  customColor: string;
+  setCustomColor: (color: string) => void;
+  fillTolerance: number;
+  setFillTolerance: (v: number) => void;
+  colors: string[];
+  clearCanvas: () => void;
+  saveImage: () => void;
+};
+```
+
+---
+
+## Styling Slots
+
+Pass `classNames` to override individual elements in the built-in toolbar:
+
+```tsx
+<Paint
+  controls
+  classNames={{
+    tools: styles.tools,
+    colors: styles.colors,
+  }}
+/>
+```
+
+```ts
+type PaintClassNames = {
+  control?: string;
+  tools?: string;
+  brushSize?: string;
+  colors?: string;
+  clr?: string;
+  customClr?: string;
+  brush?: string;
+  bucket?: string;
+  eraser?: string;
+  bottomControl?: string;
+  btn?: string;
+  btnClear?: string;
+  btnSave?: string;
+};
+```
+
+---
+
+## License
+
+MIT © mdcrty
+
+## Links
+
+- GitHub: https://github.com/mdcrty/mdcrty-packages
+- npm: https://www.npmjs.com/package/@mdcrty/paint

package/dist/Paint.module-FY7BC2OM.module.css

@@ -0,0 +1,216 @@
+.control {
+  position: absolute;
+  width: 100%;
+  top: 10px;
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 24px;
+}
+
+.tools {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tool {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 3px solid #ccc;
+  cursor: pointer;
+  padding: 0;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #000;
+  transition: border-color 120ms ease;
+}
+
+.tool:hover {
+  border-color: #888;
+}
+
+.brushSize {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 24px;
+}
+
+.brushSize label {
+  min-width: 5ch;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+@media (max-width: 1050px) {
+  .brushSize {
+    text-align: center;
+    position: absolute;
+    top: 8px;
+    right: 24px;
+    z-index: 1;
+  }
+}
+
+@media (max-width: 768px) {
+  .brushSize {
+    top: 1px;
+    right: 10px;
+  }
+}
+
+.colors {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 8px;
+  flex-direction: row;
+}
+
+@media (max-width: 920px) {
+  .tools {
+    flex-direction: column;
+    position: absolute;
+    top: 1px;
+    left: 8px;
+    z-index: 1;
+  }
+  .colors {
+    flex-direction: column;
+    position: absolute;
+    top: calc(9.5 * 16px);
+    left: 8px;
+    z-index: 1;
+  }
+}
+
+.clr {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 3px solid #ccc;
+  cursor: pointer;
+  padding: 0;
+}
+
+.customClr {
+  position: relative;
+}
+
+.customClr input {
+  -webkit-appearance: none;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border-radius: 50%;
+  border: 3px solid #ccc;
+  overflow: hidden;
+  cursor: pointer;
+  display: block;
+}
+
+.customClr svg {
+  position: absolute;
+  top: 9px;
+  left: 9px;
+  cursor: pointer;
+  pointer-events: none;
+}
+
+.customClr input::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+.customClr input::-webkit-color-swatch {
+  border: none;
+}
+
+.canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+/* Brush/eraser size preview — white inner ring + black outer ring, visible on any background */
+.cursorCircle {
+  position: fixed;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.9);
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+  z-index: 9999;
+  opacity: 0;
+}
+
+.bottomControl {
+  position: absolute;
+  right: 24px;
+  height: 70px;
+  width: auto;
+  bottom: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+@media (max-width: 768px) {
+  .bottomControl {
+    right: 12px;
+    height: 50px;
+  }
+}
+
+.btn {
+  padding: 6px 16px;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  color: #fff;
+  transition:
+    background 120ms ease,
+    border-color 120ms ease;
+  line-height: 1.4;
+}
+
+.btnClear {
+  background: #228be6;
+  border-color: #228be6;
+}
+
+.btnClear:hover {
+  background: #1c7ed6;
+  border-color: #1c7ed6;
+}
+
+.btnClear:active {
+  background: #1971c2;
+  border-color: #1971c2;
+}
+
+.btnSave {
+  background: #40c057;
+  border-color: #40c057;
+}
+
+.btnSave:hover {
+  background: #37b24d;
+  border-color: #37b24d;
+}
+
+.btnSave:active {
+  background: #2f9e44;
+  border-color: #2f9e44;
+}

package/dist/index.d.ts

@@ -0,0 +1,72 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+declare const PAINT_MOCKDATA: string[];
+/** Imperative handle exposed via ref. */
+type PaintHandle = {
+    clearCanvas(): void;
+    saveImage(): void;
+};
+/**
+ * State and actions passed to the `renderControls` render prop.
+ * Use this to build fully custom control UIs while the canvas logic stays in Paint.
+ */
+type PaintState = {
+    marker: string;
+    setMarker: (color: string) => void;
+    markerWidth: number;
+    setMarkerWidth: (width: number) => void;
+    toolSelection: string;
+    setToolSelection: (tool: string) => void;
+    customColor: string;
+    setCustomColor: (color: string) => void;
+    fillTolerance: number;
+    setFillTolerance: (v: number) => void;
+    colors: string[];
+    clearCanvas: () => void;
+    saveImage: () => void;
+};
+/** Override class names for individual slots in the built-in control UI. */
+type PaintClassNames = {
+    control?: string;
+    /** The tools container (brush / eraser / bucket buttons). */
+    tools?: string;
+    brushSize?: string;
+    colors?: string;
+    clr?: string;
+    customClr?: string;
+    /** Applied to the brush tool button. */
+    brush?: string;
+    bucket?: string;
+    eraser?: string;
+    bottomControl?: string;
+    /** Applied to both action buttons. */
+    btn?: string;
+    /** Applied to the clear button (in addition to `btn`). */
+    btnClear?: string;
+    /** Applied to the save button (in addition to `btn`). */
+    btnSave?: string;
+};
+type PaintProps = {
+    /** Show the built-in controls bar. Ignored when `renderControls` is provided. */
+    controls?: boolean;
+    /** Preset colour swatches shown in the built-in palette. */
+    colors?: string[];
+    /**
+     * Initial fill tolerance for the bucket tool. Raw per-channel delta on the
+     * 0–255 RGBA scale (0 = exact match, 128 = ~50% — the built-in slider ceiling).
+     * Displayed as a percentage of 255 in the built-in UI.
+     * @default 80
+     */
+    fillTolerance?: number;
+    /**
+     * Replace the built-in controls entirely with your own UI.
+     * Receives all canvas state and action callbacks.
+     */
+    renderControls?: (state: PaintState) => ReactNode;
+    /** Override individual class names on the built-in control slots. */
+    classNames?: PaintClassNames;
+};
+declare const Paint: react.ForwardRefExoticComponent<PaintProps & react.RefAttributes<PaintHandle>>;
+
+export { PAINT_MOCKDATA, Paint, type PaintClassNames, type PaintHandle, type PaintProps, type PaintState };

package/dist/index.js

@@ -0,0 +1,633 @@
+"use client";
+
+// src/Paint.tsx
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState
+} from "react";
+import classes from "./Paint.module-FY7BC2OM.module.css";
+
+// src/colorBrightness.ts
+function colorBrightness(color = "") {
+  let r = 0, g = 0, b = 0;
+  if (color.match(/^rgb/)) {
+    const rgb = color.match(/rgba?\(([^)]+)\)/)?.[1].split(/ *, */).map((v) => Number(v)) || [0, 0, 0];
+    r = rgb[0];
+    g = rgb[1];
+    b = rgb[2];
+  } else if (color[0] === "#" && color.length === 7) {
+    r = parseInt(color.slice(1, 3), 16);
+    g = parseInt(color.slice(3, 5), 16);
+    b = parseInt(color.slice(5, 7), 16);
+  } else if (color[0] === "#" && color.length === 4) {
+    r = parseInt(color[1] + color[1], 16);
+    g = parseInt(color[2] + color[2], 16);
+    b = parseInt(color[3] + color[3], 16);
+  }
+  return (r * 299 + g * 587 + b * 114) / 1e3 < 125 ? "dark" : "light";
+}
+
+// src/Paint.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var cx = (...args) => args.filter(Boolean).join(" ");
+var PAINT_MOCKDATA = ["#000", "#EF626C", "#FDEC03", "#24D102", "#FFF"];
+function IconEraser({ size = 22 }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M19 20H7l-4-4 9.5-9.5a2 2 0 0 1 2.8 0l3.2 3.2a2 2 0 0 1 0 2.8L10 20" }),
+        /* @__PURE__ */ jsx("path", { d: "M6.5 12.5l5 5" })
+      ]
+    }
+  );
+}
+function IconPalette({
+  size = 22,
+  color = "currentColor"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M12 21a9 9 0 1 1 0-18c4.97 0 9 3.582 9 8 0 1.06-.474 2.078-1.318 2.828-.844.75-1.989 1.172-3.182 1.172H15a2 2 0 0 0-1 3.75A1.3 1.3 0 0 1 12 21" }),
+        /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "10.5", r: "1", fill: color }),
+        /* @__PURE__ */ jsx("circle", { cx: "12.5", cy: "7.5", r: "1", fill: color }),
+        /* @__PURE__ */ jsx("circle", { cx: "16.5", cy: "10.5", r: "1", fill: color })
+      ]
+    }
+  );
+}
+function IconBrush({ size = 22 }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M3 21v-4a4 4 0 1 1 4 4h-4" }),
+        /* @__PURE__ */ jsx("path", { d: "M21 3a16 16 0 0 0 -12.8 10.2" }),
+        /* @__PURE__ */ jsx("path", { d: "M21 3a16 16 0 0 1 -10.2 12.8" }),
+        /* @__PURE__ */ jsx("path", { d: "M10.6 9a9 9 0 0 1 4.4 4.4" })
+      ]
+    }
+  );
+}
+function IconBucket({ size = 22 }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M5 16l1.465 1.638a2 2 0 1 1 -3.015 .099l1.55 -1.737" }),
+        /* @__PURE__ */ jsx("path", { d: "M13.737 9.737c2.299 -2.3 3.23 -5.095 2.081 -6.245c-1.15 -1.15 -3.945 -.217 -6.244 2.082c-2.3 2.299 -3.231 5.095 -2.082 6.244c1.15 1.15 3.946 .218 6.245 -2.081" }),
+        /* @__PURE__ */ jsx("path", { d: "M7.492 11.818c.362 .362 .768 .676 1.208 .934l6.895 4.047c1.078 .557 2.255 -.075 3.692 -1.512c1.437 -1.437 2.07 -2.614 1.512 -3.692c-.372 -.718 -1.72 -3.017 -4.047 -6.895a6.015 6.015 0 0 0 -.934 -1.208" })
+      ]
+    }
+  );
+}
+function drawBezierPath(ctx, pts) {
+  if (pts.length < 3) {
+    const b = pts[0];
+    ctx.beginPath();
+    ctx.arc(b.x, b.y, ctx.lineWidth / 2, 0, Math.PI * 2, true);
+    ctx.fill();
+    ctx.closePath();
+    return;
+  }
+  ctx.beginPath();
+  ctx.moveTo(pts[0].x, pts[0].y);
+  let i;
+  for (i = 1; i < pts.length - 2; i++) {
+    const c = (pts[i].x + pts[i + 1].x) / 2;
+    const d = (pts[i].y + pts[i + 1].y) / 2;
+    ctx.quadraticCurveTo(pts[i].x, pts[i].y, c, d);
+  }
+  ctx.quadraticCurveTo(pts[i].x, pts[i].y, pts[i + 1].x, pts[i + 1].y);
+  ctx.stroke();
+}
+function floodFill(ctx, startX, startY, fillColor, tolerance) {
+  const canvas = ctx.canvas;
+  const w = canvas.width;
+  const h = canvas.height;
+  const x0 = Math.round(startX);
+  const y0 = Math.round(startY);
+  if (x0 < 0 || x0 >= w || y0 < 0 || y0 >= h) return;
+  const imageData = ctx.getImageData(0, 0, w, h);
+  const data = imageData.data;
+  const tiny = document.createElement("canvas");
+  tiny.width = tiny.height = 1;
+  const tc = tiny.getContext("2d");
+  tc.fillStyle = fillColor;
+  tc.fillRect(0, 0, 1, 1);
+  const fill = tc.getImageData(0, 0, 1, 1).data;
+  const [fr, fg, fb, fa] = [fill[0], fill[1], fill[2], fill[3]];
+  const si = y0 * w + x0;
+  const bi = si * 4;
+  const [tr, tg, tb, ta] = [data[bi], data[bi + 1], data[bi + 2], data[bi + 3]];
+  if (tr === fr && tg === fg && tb === fb && ta === fa) return;
+  const matches = (pi) => {
+    const i = pi * 4;
+    return Math.abs(data[i] - tr) <= tolerance && Math.abs(data[i + 1] - tg) <= tolerance && Math.abs(data[i + 2] - tb) <= tolerance && Math.abs(data[i + 3] - ta) <= tolerance;
+  };
+  const filled = new Uint8Array(w * h);
+  const setPixel = (pi) => {
+    const i = pi * 4;
+    data[i] = fr;
+    data[i + 1] = fg;
+    data[i + 2] = fb;
+    data[i + 3] = fa;
+    filled[pi] = 1;
+  };
+  const visited = new Uint8Array(w * h);
+  const stack = [[x0, y0]];
+  visited[si] = 1;
+  while (stack.length > 0) {
+    const [sx, sy] = stack.pop();
+    if (!matches(sy * w + sx)) continue;
+    let lx = sx;
+    while (lx > 0 && matches(sy * w + lx - 1)) lx--;
+    let spanAbove = false;
+    let spanBelow = false;
+    let rx = lx;
+    while (rx < w && matches(sy * w + rx)) {
+      setPixel(sy * w + rx);
+      if (sy > 0) {
+        const above = (sy - 1) * w + rx;
+        if (!spanAbove && matches(above) && !visited[above]) {
+          visited[above] = 1;
+          stack.push([rx, sy - 1]);
+          spanAbove = true;
+        } else if (spanAbove && !matches(above)) {
+          spanAbove = false;
+        }
+      }
+      if (sy < h - 1) {
+        const below = (sy + 1) * w + rx;
+        if (!spanBelow && matches(below) && !visited[below]) {
+          visited[below] = 1;
+          stack.push([rx, sy + 1]);
+          spanBelow = true;
+        } else if (spanBelow && !matches(below)) {
+          spanBelow = false;
+        }
+      }
+      rx++;
+    }
+  }
+  for (let py = 0; py < h; py++) {
+    for (let px = 0; px < w; px++) {
+      const pi = py * w + px;
+      if (!filled[pi]) continue;
+      if (px > 0 && !filled[pi - 1] && data[(pi - 1) * 4 + 3] < 200)
+        setPixel(pi - 1);
+      if (px < w - 1 && !filled[pi + 1] && data[(pi + 1) * 4 + 3] < 200)
+        setPixel(pi + 1);
+      if (py > 0 && !filled[pi - w] && data[(pi - w) * 4 + 3] < 200)
+        setPixel(pi - w);
+      if (py < h - 1 && !filled[pi + w] && data[(pi + w) * 4 + 3] < 200)
+        setPixel(pi + w);
+    }
+  }
+  ctx.putImageData(imageData, 0, 0);
+}
+var Paint = forwardRef(function Paint2({
+  controls,
+  colors = PAINT_MOCKDATA,
+  fillTolerance: fillToleranceProp = 80,
+  renderControls,
+  classNames = {}
+}, ref) {
+  const [marker, setMarker] = useState(colors[0]);
+  const [markerWidth, setMarkerWidth] = useState(5);
+  const [toolSelection, setToolSelection] = useState("brush");
+  const [customColor, setCustomColor] = useState("#A020F0");
+  const [fillTolerance, setFillTolerance] = useState(fillToleranceProp);
+  const [context, setContext] = useState(null);
+  const [tmp_context, setTmpContext] = useState(null);
+  const cursorRef = useRef({ x: 0, y: 0 });
+  const canvas_ref = useRef(null);
+  const tmp_canvas_ref = useRef(null);
+  const customColorInputRef = useRef(null);
+  const pptsRef = useRef([]);
+  const eraserSnapshotRef = useRef(null);
+  const cursorCircleRef = useRef(null);
+  function setupCanvas(canvas) {
+    const dpr = window.devicePixelRatio || 1;
+    const rect = { width: window.innerWidth, height: window.innerHeight };
+    canvas.width = rect.width * dpr;
+    canvas.height = rect.height * dpr;
+    const ctx = canvas.getContext("2d");
+    ctx.scale(dpr, dpr);
+    canvas.width = rect.width;
+    canvas.height = rect.height;
+    return ctx;
+  }
+  function clearCanvas() {
+    if (!context || !canvas_ref.current) return;
+    context.clearRect(
+      0,
+      0,
+      canvas_ref.current.width,
+      canvas_ref.current.height
+    );
+  }
+  function saveImage() {
+    if (!canvas_ref.current) return;
+    const data = canvas_ref.current.toDataURL("image/png");
+    const a = document.createElement("a");
+    a.href = data;
+    a.download = "sketch.png";
+    a.click();
+    a.remove();
+  }
+  useImperativeHandle(ref, () => ({ clearCanvas, saveImage }));
+  useEffect(() => {
+    if (!canvas_ref.current || !tmp_canvas_ref.current) return;
+    const canvas = canvas_ref.current;
+    const tmp_canvas = tmp_canvas_ref.current;
+    let ctx = null;
+    let tmp_ctx = null;
+    if (tmp_context !== null) {
+      ctx = context;
+      tmp_ctx = tmp_context;
+    } else {
+      ctx = setupCanvas(canvas);
+      setContext(ctx);
+      tmp_ctx = setupCanvas(tmp_canvas);
+      setTmpContext(tmp_ctx);
+      tmp_ctx.lineJoin = "round";
+      tmp_ctx.lineCap = "round";
+    }
+    if (tmp_ctx) {
+      tmp_ctx.lineWidth = markerWidth;
+      tmp_ctx.strokeStyle = marker;
+      tmp_ctx.fillStyle = marker;
+    }
+    const cursorStart = (ev) => {
+      const rect = ev.target?.getBoundingClientRect();
+      const isTouch = ev.type === "touchstart";
+      let x, y;
+      if (isTouch) {
+        const tev = ev;
+        x = tev.targetTouches[0].pageX - rect.left;
+        y = tev.targetTouches[0].pageY - rect.top;
+      } else {
+        const mev = ev;
+        x = typeof mev.offsetX !== "undefined" ? mev.offsetX : mev.layerX;
+        y = typeof mev.offsetY !== "undefined" ? mev.offsetY : mev.layerY;
+      }
+      if (toolSelection === "bucket" && ctx) {
+        floodFill(ctx, x, y, marker, fillTolerance);
+        return;
+      }
+      if (isTouch) {
+        tmp_canvas.addEventListener("touchmove", onPaint, false);
+      } else {
+        tmp_canvas.addEventListener("mousemove", onPaint, false);
+      }
+      cursorRef.current.x = x;
+      cursorRef.current.y = y;
+      if (toolSelection === "eraser" && ctx) {
+        eraserSnapshotRef.current = ctx.getImageData(
+          0,
+          0,
+          canvas.width,
+          canvas.height
+        );
+      }
+      pptsRef.current.push({ x, y });
+      onPaint();
+    };
+    const cursorMove = (ev) => {
+      const rect = ev.target?.getBoundingClientRect();
+      let clientX, clientY;
+      if (ev.type === "touchmove") {
+        const tev = ev;
+        cursorRef.current.x = tev.targetTouches[0].pageX - rect.left;
+        cursorRef.current.y = tev.targetTouches[0].pageY - rect.top;
+        clientX = tev.targetTouches[0].clientX;
+        clientY = tev.targetTouches[0].clientY;
+      } else {
+        const mev = ev;
+        cursorRef.current.x = typeof mev.offsetX !== "undefined" ? mev.offsetX : mev.layerX;
+        cursorRef.current.y = typeof mev.offsetY !== "undefined" ? mev.offsetY : mev.layerY;
+        clientX = mev.clientX;
+        clientY = mev.clientY;
+      }
+      if (cursorCircleRef.current) {
+        cursorCircleRef.current.style.left = `${clientX}px`;
+        cursorCircleRef.current.style.top = `${clientY}px`;
+      }
+    };
+    const showCursorCircle = () => {
+      if (cursorCircleRef.current && toolSelection !== "bucket") {
+        cursorCircleRef.current.style.opacity = "1";
+      }
+    };
+    const hideCursorCircle = () => {
+      if (cursorCircleRef.current) cursorCircleRef.current.style.opacity = "0";
+    };
+    const cursorEnd = (ev) => {
+      if (ev.type === "touchend") {
+        tmp_canvas.removeEventListener("touchmove", onPaint, false);
+      } else {
+        tmp_canvas.removeEventListener("mousemove", onPaint, false);
+      }
+      if (!tmp_ctx || !ctx) return;
+      if (toolSelection === "eraser") {
+        eraserSnapshotRef.current = null;
+      } else {
+        ctx.globalCompositeOperation = "source-over";
+        ctx.drawImage(tmp_canvas, 0, 0);
+        tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
+      }
+      pptsRef.current = [];
+      cursorRef.current = { x: 0, y: 0 };
+    };
+    const onPaint = () => {
+      if (!tmp_ctx || !ctx) return;
+      pptsRef.current.push({ x: cursorRef.current.x, y: cursorRef.current.y });
+      if (toolSelection === "eraser") {
+        if (eraserSnapshotRef.current) {
+          ctx.putImageData(eraserSnapshotRef.current, 0, 0);
+        }
+        ctx.save();
+        ctx.globalCompositeOperation = "destination-out";
+        ctx.lineWidth = markerWidth;
+        ctx.strokeStyle = "rgba(0,0,0,1)";
+        ctx.fillStyle = "rgba(0,0,0,1)";
+        ctx.lineJoin = "round";
+        ctx.lineCap = "round";
+        drawBezierPath(ctx, pptsRef.current);
+        ctx.restore();
+        return;
+      }
+      if (pptsRef.current.length < 3) {
+        const b = pptsRef.current[0];
+        tmp_ctx.beginPath();
+        tmp_ctx.arc(b.x, b.y, tmp_ctx.lineWidth / 2, 0, Math.PI * 2, true);
+        tmp_ctx.fill();
+        tmp_ctx.closePath();
+        return;
+      }
+      tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
+      drawBezierPath(tmp_ctx, pptsRef.current);
+    };
+    const handleResize = () => {
+      if (!tmp_ctx || !ctx) return;
+      tmp_ctx.drawImage(canvas, 0, 0);
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+      ctx.drawImage(tmp_canvas, 0, 0);
+      tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
+      tmp_canvas.width = canvas.width;
+      tmp_canvas.height = canvas.height;
+      tmp_ctx.lineWidth = markerWidth;
+      tmp_ctx.strokeStyle = marker;
+      tmp_ctx.fillStyle = marker;
+      tmp_ctx.lineJoin = "round";
+      tmp_ctx.lineCap = "round";
+    };
+    window.addEventListener("resize", handleResize);
+    tmp_canvas.addEventListener("mousedown", cursorStart, false);
+    tmp_canvas.addEventListener("mousemove", cursorMove, false);
+    tmp_canvas.addEventListener("mouseup", cursorEnd, false);
+    tmp_canvas.addEventListener("mouseenter", showCursorCircle, false);
+    tmp_canvas.addEventListener("mouseleave", hideCursorCircle, false);
+    tmp_canvas.addEventListener("touchstart", cursorStart, { passive: true });
+    tmp_canvas.addEventListener("touchmove", cursorMove, { passive: true });
+    tmp_canvas.addEventListener("touchend", cursorEnd, { passive: true });
+    return () => {
+      window.removeEventListener("resize", handleResize, false);
+      tmp_canvas.removeEventListener("mousedown", cursorStart, false);
+      tmp_canvas.removeEventListener("mousemove", cursorMove, false);
+      tmp_canvas.removeEventListener("mouseup", cursorEnd, false);
+      tmp_canvas.removeEventListener("mouseenter", showCursorCircle, false);
+      tmp_canvas.removeEventListener("mouseleave", hideCursorCircle, false);
+      tmp_canvas.removeEventListener("touchstart", cursorStart, false);
+      tmp_canvas.removeEventListener("touchmove", cursorMove, false);
+      tmp_canvas.removeEventListener("touchend", cursorEnd, false);
+    };
+  }, [marker, markerWidth, fillTolerance, toolSelection, context, tmp_context]);
+  const paintState = {
+    marker,
+    setMarker,
+    markerWidth,
+    setMarkerWidth,
+    toolSelection,
+    setToolSelection,
+    customColor,
+    setCustomColor,
+    fillTolerance,
+    setFillTolerance,
+    colors,
+    clearCanvas,
+    saveImage
+  };
+  const colorActive = true;
+  const isCustomActive = colorActive && !colors.includes(marker);
+  const builtInTopControls = /* @__PURE__ */ jsxs("div", { className: cx(classes.control, classNames.control), children: [
+    /* @__PURE__ */ jsxs("div", { className: cx(classes.tools, classNames.tools), children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: cx(classes.tool, classNames.brush),
+          style: { borderColor: toolSelection === "brush" ? "#000" : "#CCC" },
+          onClick: () => setToolSelection("brush"),
+          title: "Brush",
+          children: /* @__PURE__ */ jsx(IconBrush, { size: 20 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: cx(classes.tool, classNames.bucket),
+          style: { borderColor: toolSelection === "bucket" ? "#000" : "#CCC" },
+          onClick: () => setToolSelection("bucket"),
+          title: "Fill",
+          children: /* @__PURE__ */ jsx(IconBucket, { size: 20 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: cx(classes.tool, classNames.eraser),
+          style: { borderColor: toolSelection === "eraser" ? "#000" : "#CCC" },
+          onClick: () => setToolSelection("eraser"),
+          title: "Eraser",
+          children: /* @__PURE__ */ jsx(IconEraser, { size: 20 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: cx(classes.brushSize, classNames.brushSize), children: toolSelection === "bucket" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          id: "fillTolerance",
+          name: "fillTolerance",
+          min: "0",
+          max: "128",
+          value: fillTolerance,
+          step: "1",
+          onChange: (e) => setFillTolerance(Number(e.target.value))
+        }
+      ),
+      /* @__PURE__ */ jsxs("label", { htmlFor: "fillTolerance", children: [
+        Math.round(fillTolerance / 255 * 100),
+        "%"
+      ] })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          id: "brushSize",
+          name: "brushSize",
+          min: "4",
+          max: "100",
+          value: markerWidth,
+          step: "2",
+          onChange: (e) => setMarkerWidth(Number(e.target.value))
+        }
+      ),
+      /* @__PURE__ */ jsxs("label", { htmlFor: "brushSize", children: [
+        markerWidth,
+        "px"
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: cx(classes.colors, classNames.colors), children: [
+      colors.map((color, i) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: cx(classes.clr, classNames.clr),
+          style: {
+            borderColor: colorActive && marker === color ? "#000" : "#CCC",
+            backgroundColor: color
+          },
+          onClick: () => setMarker(color)
+        },
+        i
+      )),
+      /* @__PURE__ */ jsxs("div", { className: cx(classes.customClr, classNames.customClr), children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: customColorInputRef,
+            type: "color",
+            name: "custClr",
+            defaultValue: customColor,
+            style: { borderColor: isCustomActive ? "#000" : "#CCC" },
+            onChange: (e) => {
+              setMarker(e.target.value);
+              setCustomColor(e.target.value);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconPalette,
+          {
+            size: 22,
+            color: colorBrightness(customColor) === "dark" ? "white" : "black"
+          }
+        )
+      ] })
+    ] })
+  ] });
+  const builtInBottomControls = /* @__PURE__ */ jsxs("div", { className: cx(classes.bottomControl, classNames.bottomControl), children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: cx(
+          classes.btn,
+          classes.btnClear,
+          classNames.btn,
+          classNames.btnClear
+        ),
+        onClick: clearCanvas,
+        children: "clear"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: cx(
+          classes.btn,
+          classes.btnSave,
+          classNames.btn,
+          classNames.btnSave
+        ),
+        onClick: saveImage,
+        children: "save"
+      }
+    )
+  ] });
+  const showBuiltInControls = controls && !renderControls;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    renderControls ? renderControls(paintState) : showBuiltInControls && builtInTopControls,
+    /* @__PURE__ */ jsx("canvas", { className: classes.canvas, ref: canvas_ref }),
+    /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        className: classes.canvas,
+        ref: tmp_canvas_ref,
+        style: { cursor: toolSelection === "bucket" ? "crosshair" : "none" }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: cursorCircleRef,
+        className: classes.cursorCircle,
+        style: { width: markerWidth, height: markerWidth }
+      }
+    ),
+    showBuiltInControls && builtInBottomControls
+  ] });
+});
+var Paint_default = Paint;
+export {
+  PAINT_MOCKDATA,
+  Paint_default as Paint
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Paint.tsx","../src/colorBrightness.ts"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  ReactNode,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\nimport classes from \"./Paint.module.css\";\nimport colorBrightness from \"./colorBrightness\";\n\nconst cx = (...args: (string | undefined)[]) => args.filter(Boolean).join(\" \");\n\nexport const PAINT_MOCKDATA = [\"#000\", \"#EF626C\", \"#FDEC03\", \"#24D102\", \"#FFF\"];\n\n// ─── Public types ────────────────────────────────────────────────────────────\n\n/** Imperative handle exposed via ref. */\nexport type PaintHandle = {\n  clearCanvas(): void;\n  saveImage(): void;\n};\n\n/**\n * State and actions passed to the `renderControls` render prop.\n * Use this to build fully custom control UIs while the canvas logic stays in Paint.\n */\nexport type PaintState = {\n  marker: string;\n  setMarker: (color: string) => void;\n  markerWidth: number;\n  setMarkerWidth: (width: number) => void;\n  toolSelection: string;\n  setToolSelection: (tool: string) => void;\n  customColor: string;\n  setCustomColor: (color: string) => void;\n  fillTolerance: number;\n  setFillTolerance: (v: number) => void;\n  colors: string[];\n  clearCanvas: () => void;\n  saveImage: () => void;\n};\n\n/** Override class names for individual slots in the built-in control UI. */\nexport type PaintClassNames = {\n  control?: string;\n  /** The tools container (brush / eraser / bucket buttons). */\n  tools?: string;\n  brushSize?: string;\n  colors?: string;\n  clr?: string;\n  customClr?: string;\n  /** Applied to the brush tool button. */\n  brush?: string;\n  bucket?: string;\n  eraser?: string;\n  bottomControl?: string;\n  /** Applied to both action buttons. */\n  btn?: string;\n  /** Applied to the clear button (in addition to `btn`). */\n  btnClear?: string;\n  /** Applied to the save button (in addition to `btn`). */\n  btnSave?: string;\n};\n\nexport type PaintProps = {\n  /** Show the built-in controls bar. Ignored when `renderControls` is provided. */\n  controls?: boolean;\n  /** Preset colour swatches shown in the built-in palette. */\n  colors?: string[];\n  /**\n   * Initial fill tolerance for the bucket tool. Raw per-channel delta on the\n   * 0–255 RGBA scale (0 = exact match, 128 = ~50% — the built-in slider ceiling).\n   * Displayed as a percentage of 255 in the built-in UI.\n   * @default 80\n   */\n  fillTolerance?: number;\n  /**\n   * Replace the built-in controls entirely with your own UI.\n   * Receives all canvas state and action callbacks.\n   */\n  renderControls?: (state: PaintState) => ReactNode;\n  /** Override individual class names on the built-in control slots. */\n  classNames?: PaintClassNames;\n};\n\n// ─── Inline SVG icons (no external dependency) ───────────────────────────────\n\nfunction IconEraser({ size = 22 }: { size?: number }) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M19 20H7l-4-4 9.5-9.5a2 2 0 0 1 2.8 0l3.2 3.2a2 2 0 0 1 0 2.8L10 20\" />\n      <path d=\"M6.5 12.5l5 5\" />\n    </svg>\n  );\n}\n\nfunction IconPalette({\n  size = 22,\n  color = \"currentColor\",\n}: {\n  size?: number;\n  color?: string;\n}) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke={color}\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M12 21a9 9 0 1 1 0-18c4.97 0 9 3.582 9 8 0 1.06-.474 2.078-1.318 2.828-.844.75-1.989 1.172-3.182 1.172H15a2 2 0 0 0-1 3.75A1.3 1.3 0 0 1 12 21\" />\n      <circle cx=\"8.5\" cy=\"10.5\" r=\"1\" fill={color} />\n      <circle cx=\"12.5\" cy=\"7.5\" r=\"1\" fill={color} />\n      <circle cx=\"16.5\" cy=\"10.5\" r=\"1\" fill={color} />\n    </svg>\n  );\n}\n\nfunction IconBrush({ size = 22 }: { size?: number }) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path d=\"M3 21v-4a4 4 0 1 1 4 4h-4\" />\n      <path d=\"M21 3a16 16 0 0 0 -12.8 10.2\" />\n      <path d=\"M21 3a16 16 0 0 1 -10.2 12.8\" />\n      <path d=\"M10.6 9a9 9 0 0 1 4.4 4.4\" />\n    </svg>\n  );\n}\n\nfunction IconBucket({ size = 22 }: { size?: number }) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path d=\"M5 16l1.465 1.638a2 2 0 1 1 -3.015 .099l1.55 -1.737\" />\n      <path d=\"M13.737 9.737c2.299 -2.3 3.23 -5.095 2.081 -6.245c-1.15 -1.15 -3.945 -.217 -6.244 2.082c-2.3 2.299 -3.231 5.095 -2.082 6.244c1.15 1.15 3.946 .218 6.245 -2.081\" />\n      <path d=\"M7.492 11.818c.362 .362 .768 .676 1.208 .934l6.895 4.047c1.078 .557 2.255 -.075 3.692 -1.512c1.437 -1.437 2.07 -2.614 1.512 -3.692c-.372 -.718 -1.72 -3.017 -4.047 -6.895a6.015 6.015 0 0 0 -.934 -1.208\" />\n    </svg>\n  );\n}\n\n// ─── Helpers ─────────────────────────────────────────────────────────────────\n\n/**\n * Draws a smooth bezier path through accumulated points onto the given context.\n * Falls back to a filled dot for fewer than 3 points.\n */\nfunction drawBezierPath(\n  ctx: CanvasRenderingContext2D,\n  pts: Array<{ x: number; y: number }>,\n) {\n  if (pts.length < 3) {\n    const b = pts[0];\n    ctx.beginPath();\n    ctx.arc(b.x, b.y, ctx.lineWidth / 2, 0, Math.PI * 2, true);\n    ctx.fill();\n    ctx.closePath();\n    return;\n  }\n\n  ctx.beginPath();\n  ctx.moveTo(pts[0].x, pts[0].y);\n\n  let i;\n  for (i = 1; i < pts.length - 2; i++) {\n    const c = (pts[i].x + pts[i + 1].x) / 2;\n    const d = (pts[i].y + pts[i + 1].y) / 2;\n    ctx.quadraticCurveTo(pts[i].x, pts[i].y, c, d);\n  }\n  ctx.quadraticCurveTo(pts[i].x, pts[i].y, pts[i + 1].x, pts[i + 1].y);\n  ctx.stroke();\n}\n\n/**\n * Scanline flood fill on a canvas context.\n *\n * Snapshots the pixel data, fills all connected pixels whose colour is within\n * `tolerance` of the target (the pixel at startX/startY), then writes back.\n * The scanline approach processes full horizontal runs at once, making it\n * significantly faster than naive BFS for large fills.\n *\n * A `visited` bitfield prevents infinite loops when `tolerance > 0` causes\n * newly-filled pixels to still match the target colour.\n */\nfunction floodFill(\n  ctx: CanvasRenderingContext2D,\n  startX: number,\n  startY: number,\n  fillColor: string,\n  tolerance: number,\n) {\n  const canvas = ctx.canvas;\n  const w = canvas.width;\n  const h = canvas.height;\n\n  const x0 = Math.round(startX);\n  const y0 = Math.round(startY);\n  if (x0 < 0 || x0 >= w || y0 < 0 || y0 >= h) return;\n\n  const imageData = ctx.getImageData(0, 0, w, h);\n  const data = imageData.data;\n\n  // Parse fill colour to RGBA via a tiny offscreen canvas — works with any\n  // valid CSS colour string (hex, rgb, named, etc.)\n  const tiny = document.createElement(\"canvas\");\n  tiny.width = tiny.height = 1;\n  const tc = tiny.getContext(\"2d\")!;\n  tc.fillStyle = fillColor;\n  tc.fillRect(0, 0, 1, 1);\n  const fill = tc.getImageData(0, 0, 1, 1).data;\n  const [fr, fg, fb, fa] = [fill[0], fill[1], fill[2], fill[3]];\n\n  // Target colour at the clicked pixel (using pixel index throughout)\n  const si = y0 * w + x0;\n  const bi = si * 4;\n  const [tr, tg, tb, ta] = [data[bi], data[bi + 1], data[bi + 2], data[bi + 3]];\n\n  // Already the fill colour — nothing to do\n  if (tr === fr && tg === fg && tb === fb && ta === fa) return;\n\n  // matches / setPixel both take a pixel index (not byte offset) for clarity\n  const matches = (pi: number) => {\n    const i = pi * 4;\n    return (\n      Math.abs(data[i] - tr) <= tolerance &&\n      Math.abs(data[i + 1] - tg) <= tolerance &&\n      Math.abs(data[i + 2] - tb) <= tolerance &&\n      Math.abs(data[i + 3] - ta) <= tolerance\n    );\n  };\n\n  // Track filled pixels so the post-fill boundary pass can find them\n  const filled = new Uint8Array(w * h);\n\n  const setPixel = (pi: number) => {\n    const i = pi * 4;\n    data[i] = fr;\n    data[i + 1] = fg;\n    data[i + 2] = fb;\n    data[i + 3] = fa;\n    filled[pi] = 1;\n  };\n\n  // One byte per pixel — prevents duplicate stack pushes (needed when\n  // tolerance > 0 means filled pixels can still satisfy `matches`)\n  const visited = new Uint8Array(w * h);\n\n  const stack: Array<[number, number]> = [[x0, y0]];\n  visited[si] = 1;\n\n  while (stack.length > 0) {\n    const [sx, sy] = stack.pop()!;\n\n    if (!matches(sy * w + sx)) continue;\n\n    // Scan left to the boundary of the matching region\n    let lx = sx;\n    while (lx > 0 && matches(sy * w + lx - 1)) lx--;\n\n    // Scan right: fill the span and push unvisited neighbours above/below\n    let spanAbove = false;\n    let spanBelow = false;\n    let rx = lx;\n\n    while (rx < w && matches(sy * w + rx)) {\n      setPixel(sy * w + rx);\n\n      if (sy > 0) {\n        const above = (sy - 1) * w + rx;\n        if (!spanAbove && matches(above) && !visited[above]) {\n          visited[above] = 1;\n          stack.push([rx, sy - 1]);\n          spanAbove = true;\n        } else if (spanAbove && !matches(above)) {\n          spanAbove = false;\n        }\n      }\n\n      if (sy < h - 1) {\n        const below = (sy + 1) * w + rx;\n        if (!spanBelow && matches(below) && !visited[below]) {\n          visited[below] = 1;\n          stack.push([rx, sy + 1]);\n          spanBelow = true;\n        } else if (spanBelow && !matches(below)) {\n          spanBelow = false;\n        }\n      }\n\n      rx++;\n    }\n  }\n\n  // Post-fill pass: eliminate the 1-pixel anti-aliased fringe that scanline\n  // fill leaves at stroke edges. Any semi-transparent pixel (alpha < 200)\n  // directly adjacent to a filled pixel is also filled.\n  for (let py = 0; py < h; py++) {\n    for (let px = 0; px < w; px++) {\n      const pi = py * w + px;\n      if (!filled[pi]) continue;\n      if (px > 0 && !filled[pi - 1] && data[(pi - 1) * 4 + 3] < 200)\n        setPixel(pi - 1);\n      if (px < w - 1 && !filled[pi + 1] && data[(pi + 1) * 4 + 3] < 200)\n        setPixel(pi + 1);\n      if (py > 0 && !filled[pi - w] && data[(pi - w) * 4 + 3] < 200)\n        setPixel(pi - w);\n      if (py < h - 1 && !filled[pi + w] && data[(pi + w) * 4 + 3] < 200)\n        setPixel(pi + w);\n    }\n  }\n\n  ctx.putImageData(imageData, 0, 0);\n}\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\nconst Paint = forwardRef<PaintHandle, PaintProps>(function Paint(\n  {\n    controls,\n    colors = PAINT_MOCKDATA,\n    fillTolerance: fillToleranceProp = 80,\n    renderControls,\n    classNames = {},\n  },\n  ref,\n) {\n  const [marker, setMarker] = useState(colors[0]);\n  const [markerWidth, setMarkerWidth] = useState(5);\n  // \"brush\" | \"bucket\" | \"eraser\" — tool is independent of colour choice\n  const [toolSelection, setToolSelection] = useState(\"brush\");\n  const [customColor, setCustomColor] = useState(\"#A020F0\");\n  const [fillTolerance, setFillTolerance] = useState(fillToleranceProp);\n  const [context, setContext] = useState<CanvasRenderingContext2D | null>(null);\n  const [tmp_context, setTmpContext] =\n    useState<CanvasRenderingContext2D | null>(null);\n\n  const cursorRef = useRef({ x: 0, y: 0 });\n  const canvas_ref = useRef<HTMLCanvasElement>(null);\n  const tmp_canvas_ref = useRef<HTMLCanvasElement>(null);\n  const customColorInputRef = useRef<HTMLInputElement>(null);\n  const pptsRef = useRef<Array<{ x: number; y: number }>>([]);\n  // Captured once on eraser mousedown; restored before each paint frame so\n  // the eraser stroke is drawn directly on ctx with destination-out live.\n  const eraserSnapshotRef = useRef<ImageData | null>(null);\n  // Sized circle that follows the cursor for brush/eraser — updated via direct\n  // DOM manipulation so mousemove doesn't trigger React re-renders.\n  const cursorCircleRef = useRef<HTMLDivElement>(null);\n\n  function setupCanvas(canvas: HTMLCanvasElement) {\n    const dpr = window.devicePixelRatio || 1;\n    const rect = { width: window.innerWidth, height: window.innerHeight };\n    canvas.width = rect.width * dpr;\n    canvas.height = rect.height * dpr;\n    const ctx = canvas.getContext(\"2d\")!;\n    ctx.scale(dpr, dpr);\n    canvas.width = rect.width;\n    canvas.height = rect.height;\n    return ctx;\n  }\n\n  function clearCanvas() {\n    if (!context || !canvas_ref.current) return;\n    context.clearRect(\n      0,\n      0,\n      canvas_ref.current.width,\n      canvas_ref.current.height,\n    );\n  }\n\n  function saveImage() {\n    if (!canvas_ref.current) return;\n    const data = canvas_ref.current.toDataURL(\"image/png\");\n    const a = document.createElement(\"a\");\n    a.href = data;\n    a.download = \"sketch.png\";\n    a.click();\n    a.remove();\n  }\n\n  useImperativeHandle(ref, () => ({ clearCanvas, saveImage }));\n\n  useEffect(() => {\n    if (!canvas_ref.current || !tmp_canvas_ref.current) return;\n\n    const canvas = canvas_ref.current;\n    const tmp_canvas = tmp_canvas_ref.current;\n\n    let ctx: CanvasRenderingContext2D | null = null;\n    let tmp_ctx: CanvasRenderingContext2D | null = null;\n\n    if (tmp_context !== null) {\n      ctx = context;\n      tmp_ctx = tmp_context;\n    } else {\n      ctx = setupCanvas(canvas);\n      setContext(ctx);\n      tmp_ctx = setupCanvas(tmp_canvas);\n      setTmpContext(tmp_ctx);\n      tmp_ctx.lineJoin = \"round\";\n      tmp_ctx.lineCap = \"round\";\n    }\n\n    if (tmp_ctx) {\n      tmp_ctx.lineWidth = markerWidth;\n      tmp_ctx.strokeStyle = marker;\n      tmp_ctx.fillStyle = marker;\n    }\n\n    const cursorStart = (ev: MouseEvent | TouchEvent) => {\n      const rect = (ev.target as HTMLElement)?.getBoundingClientRect();\n      const isTouch = ev.type === \"touchstart\";\n\n      let x: number, y: number;\n      if (isTouch) {\n        const tev = ev as TouchEvent;\n        x = tev.targetTouches[0].pageX - rect.left;\n        y = tev.targetTouches[0].pageY - rect.top;\n      } else {\n        const mev = ev as MouseEvent;\n        x = typeof mev.offsetX !== \"undefined\" ? mev.offsetX : mev.layerX;\n        y = typeof mev.offsetY !== \"undefined\" ? mev.offsetY : mev.layerY;\n      }\n\n      // Bucket fill is a single click — don't start a stroke\n      if (toolSelection === \"bucket\" && ctx) {\n        floodFill(ctx, x, y, marker, fillTolerance);\n        return;\n      }\n\n      // Register the move listener for stroke drawing\n      if (isTouch) {\n        tmp_canvas.addEventListener(\"touchmove\", onPaint, false);\n      } else {\n        tmp_canvas.addEventListener(\"mousemove\", onPaint, false);\n      }\n\n      cursorRef.current.x = x;\n      cursorRef.current.y = y;\n\n      // Snapshot once per eraser stroke so onPaint can restore + redraw live\n      if (toolSelection === \"eraser\" && ctx) {\n        eraserSnapshotRef.current = ctx.getImageData(\n          0,\n          0,\n          canvas.width,\n          canvas.height,\n        );\n      }\n\n      pptsRef.current.push({ x, y });\n      onPaint();\n    };\n\n    const cursorMove = (ev: MouseEvent | TouchEvent) => {\n      const rect = (ev.target as HTMLElement)?.getBoundingClientRect();\n      let clientX: number, clientY: number;\n      if (ev.type === \"touchmove\") {\n        const tev = ev as TouchEvent;\n        cursorRef.current.x = tev.targetTouches[0].pageX - rect.left;\n        cursorRef.current.y = tev.targetTouches[0].pageY - rect.top;\n        clientX = tev.targetTouches[0].clientX;\n        clientY = tev.targetTouches[0].clientY;\n      } else {\n        const mev = ev as MouseEvent;\n        cursorRef.current.x =\n          typeof mev.offsetX !== \"undefined\" ? mev.offsetX : mev.layerX;\n        cursorRef.current.y =\n          typeof mev.offsetY !== \"undefined\" ? mev.offsetY : mev.layerY;\n        clientX = mev.clientX;\n        clientY = mev.clientY;\n      }\n      if (cursorCircleRef.current) {\n        cursorCircleRef.current.style.left = `${clientX}px`;\n        cursorCircleRef.current.style.top = `${clientY}px`;\n      }\n    };\n\n    const showCursorCircle = () => {\n      if (cursorCircleRef.current && toolSelection !== \"bucket\") {\n        cursorCircleRef.current.style.opacity = \"1\";\n      }\n    };\n    const hideCursorCircle = () => {\n      if (cursorCircleRef.current) cursorCircleRef.current.style.opacity = \"0\";\n    };\n\n    const cursorEnd = (ev: MouseEvent | TouchEvent) => {\n      if (ev.type === \"touchend\") {\n        tmp_canvas.removeEventListener(\"touchmove\", onPaint, false);\n      } else {\n        tmp_canvas.removeEventListener(\"mousemove\", onPaint, false);\n      }\n\n      if (!tmp_ctx || !ctx) return;\n\n      if (toolSelection === \"eraser\") {\n        // Erasure was already committed live in onPaint; just clean up\n        eraserSnapshotRef.current = null;\n      } else {\n        ctx.globalCompositeOperation = \"source-over\";\n        ctx.drawImage(tmp_canvas, 0, 0);\n        tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);\n      }\n\n      pptsRef.current = [];\n      cursorRef.current = { x: 0, y: 0 };\n    };\n\n    const onPaint = () => {\n      if (!tmp_ctx || !ctx) return;\n      pptsRef.current.push({ x: cursorRef.current.x, y: cursorRef.current.y });\n\n      if (toolSelection === \"eraser\") {\n        // Restore the pre-stroke snapshot then redraw the full accumulated path\n        // with destination-out directly on ctx — live transparent erasure.\n        if (eraserSnapshotRef.current) {\n          ctx.putImageData(eraserSnapshotRef.current, 0, 0);\n        }\n        ctx.save();\n        ctx.globalCompositeOperation = \"destination-out\";\n        ctx.lineWidth = markerWidth;\n        ctx.strokeStyle = \"rgba(0,0,0,1)\";\n        ctx.fillStyle = \"rgba(0,0,0,1)\";\n        ctx.lineJoin = \"round\";\n        ctx.lineCap = \"round\";\n        drawBezierPath(ctx, pptsRef.current);\n        ctx.restore();\n        return;\n      }\n\n      if (pptsRef.current.length < 3) {\n        const b = pptsRef.current[0];\n        tmp_ctx.beginPath();\n        tmp_ctx.arc(b.x, b.y, tmp_ctx.lineWidth / 2, 0, Math.PI * 2, true);\n        tmp_ctx.fill();\n        tmp_ctx.closePath();\n        return;\n      }\n\n      tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);\n      drawBezierPath(tmp_ctx, pptsRef.current);\n    };\n\n    const handleResize = () => {\n      if (!tmp_ctx || !ctx) return;\n      tmp_ctx.drawImage(canvas, 0, 0);\n      ctx.clearRect(0, 0, canvas.width, canvas.height);\n      canvas.width = window.innerWidth;\n      canvas.height = window.innerHeight;\n      ctx.drawImage(tmp_canvas, 0, 0);\n      tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);\n      tmp_canvas.width = canvas.width;\n      tmp_canvas.height = canvas.height;\n      tmp_ctx.lineWidth = markerWidth;\n      tmp_ctx.strokeStyle = marker;\n      tmp_ctx.fillStyle = marker;\n      tmp_ctx.lineJoin = \"round\";\n      tmp_ctx.lineCap = \"round\";\n    };\n\n    window.addEventListener(\"resize\", handleResize);\n    tmp_canvas.addEventListener(\"mousedown\", cursorStart, false);\n    tmp_canvas.addEventListener(\"mousemove\", cursorMove, false);\n    tmp_canvas.addEventListener(\"mouseup\", cursorEnd, false);\n    tmp_canvas.addEventListener(\"mouseenter\", showCursorCircle, false);\n    tmp_canvas.addEventListener(\"mouseleave\", hideCursorCircle, false);\n    tmp_canvas.addEventListener(\"touchstart\", cursorStart, { passive: true });\n    tmp_canvas.addEventListener(\"touchmove\", cursorMove, { passive: true });\n    tmp_canvas.addEventListener(\"touchend\", cursorEnd, { passive: true });\n\n    return () => {\n      window.removeEventListener(\"resize\", handleResize, false);\n      tmp_canvas.removeEventListener(\"mousedown\", cursorStart, false);\n      tmp_canvas.removeEventListener(\"mousemove\", cursorMove, false);\n      tmp_canvas.removeEventListener(\"mouseup\", cursorEnd, false);\n      tmp_canvas.removeEventListener(\"mouseenter\", showCursorCircle, false);\n      tmp_canvas.removeEventListener(\"mouseleave\", hideCursorCircle, false);\n      tmp_canvas.removeEventListener(\"touchstart\", cursorStart, false);\n      tmp_canvas.removeEventListener(\"touchmove\", cursorMove, false);\n      tmp_canvas.removeEventListener(\"touchend\", cursorEnd, false);\n    };\n  }, [marker, markerWidth, fillTolerance, toolSelection, context, tmp_context]);\n\n  // ─── Shared state object for renderControls ─────────────────────────────────\n\n  const paintState: PaintState = {\n    marker,\n    setMarker,\n    markerWidth,\n    setMarkerWidth,\n    toolSelection,\n    setToolSelection,\n    customColor,\n    setCustomColor,\n    fillTolerance,\n    setFillTolerance,\n    colors,\n    clearCanvas,\n    saveImage,\n  };\n\n  // ─── Built-in controls ───────────────────────────────────────────────────────\n\n  // Active-colour outline disappears when eraser is selected (colour is irrelevant then)\n  // const colorActive = toolSelection !== \"eraser\";\n  const colorActive = true;\n  // Custom picker is active when the current marker isn't one of the preset swatches\n  const isCustomActive = colorActive && !colors.includes(marker);\n\n  const builtInTopControls = (\n    <div className={cx(classes.control, classNames.control)}>\n      {/* Tool selector — independent of colour choice */}\n      <div className={cx(classes.tools, classNames.tools)}>\n        <button\n          className={cx(classes.tool, classNames.brush)}\n          style={{ borderColor: toolSelection === \"brush\" ? \"#000\" : \"#CCC\" }}\n          onClick={() => setToolSelection(\"brush\")}\n          title=\"Brush\"\n        >\n          <IconBrush size={20} />\n        </button>\n        <button\n          className={cx(classes.tool, classNames.bucket)}\n          style={{ borderColor: toolSelection === \"bucket\" ? \"#000\" : \"#CCC\" }}\n          onClick={() => setToolSelection(\"bucket\")}\n          title=\"Fill\"\n        >\n          <IconBucket size={20} />\n        </button>\n        <button\n          className={cx(classes.tool, classNames.eraser)}\n          style={{ borderColor: toolSelection === \"eraser\" ? \"#000\" : \"#CCC\" }}\n          onClick={() => setToolSelection(\"eraser\")}\n          title=\"Eraser\"\n        >\n          <IconEraser size={20} />\n        </button>\n      </div>\n\n      {/* Dynamic slider: size for brush/eraser, tolerance for bucket */}\n      <div className={cx(classes.brushSize, classNames.brushSize)}>\n        {toolSelection === \"bucket\" ? (\n          <>\n            <input\n              type=\"range\"\n              id=\"fillTolerance\"\n              name=\"fillTolerance\"\n              min=\"0\"\n              max=\"128\"\n              value={fillTolerance}\n              step=\"1\"\n              onChange={(e) => setFillTolerance(Number(e.target.value))}\n            />\n            <label htmlFor=\"fillTolerance\">\n              {Math.round((fillTolerance / 255) * 100)}%\n            </label>\n          </>\n        ) : (\n          <>\n            <input\n              type=\"range\"\n              id=\"brushSize\"\n              name=\"brushSize\"\n              min=\"4\"\n              max=\"100\"\n              value={markerWidth}\n              step=\"2\"\n              onChange={(e) => setMarkerWidth(Number(e.target.value))}\n            />\n            <label htmlFor=\"brushSize\">{markerWidth}px</label>\n          </>\n        )}\n      </div>\n\n      {/* Colour palette */}\n      <div className={cx(classes.colors, classNames.colors)}>\n        {colors.map((color, i) => (\n          <button\n            key={i}\n            className={cx(classes.clr, classNames.clr)}\n            style={{\n              borderColor: colorActive && marker === color ? \"#000\" : \"#CCC\",\n              backgroundColor: color,\n            }}\n            onClick={() => setMarker(color)}\n          />\n        ))}\n\n        <div className={cx(classes.customClr, classNames.customClr)}>\n          <input\n            ref={customColorInputRef}\n            type=\"color\"\n            name=\"custClr\"\n            defaultValue={customColor}\n            style={{ borderColor: isCustomActive ? \"#000\" : \"#CCC\" }}\n            onChange={(e) => {\n              setMarker(e.target.value);\n              setCustomColor(e.target.value);\n            }}\n          />\n          <IconPalette\n            size={22}\n            color={colorBrightness(customColor) === \"dark\" ? \"white\" : \"black\"}\n          />\n        </div>\n      </div>\n    </div>\n  );\n\n  const builtInBottomControls = (\n    <div className={cx(classes.bottomControl, classNames.bottomControl)}>\n      <button\n        className={cx(\n          classes.btn,\n          classes.btnClear,\n          classNames.btn,\n          classNames.btnClear,\n        )}\n        onClick={clearCanvas}\n      >\n        clear\n      </button>\n      <button\n        className={cx(\n          classes.btn,\n          classes.btnSave,\n          classNames.btn,\n          classNames.btnSave,\n        )}\n        onClick={saveImage}\n      >\n        save\n      </button>\n    </div>\n  );\n\n  // ─── Render ──────────────────────────────────────────────────────────────────\n\n  const showBuiltInControls = controls && !renderControls;\n\n  return (\n    <>\n      {renderControls\n        ? renderControls(paintState)\n        : showBuiltInControls && builtInTopControls}\n\n      <canvas className={classes.canvas} ref={canvas_ref} />\n      <canvas\n        className={classes.canvas}\n        ref={tmp_canvas_ref}\n        style={{ cursor: toolSelection === \"bucket\" ? \"crosshair\" : \"none\" }}\n      />\n      {/* Brush/eraser size preview — position updated via DOM, no re-renders */}\n      <div\n        ref={cursorCircleRef}\n        className={classes.cursorCircle}\n        style={{ width: markerWidth, height: markerWidth }}\n      />\n\n      {showBuiltInControls && builtInBottomControls}\n    </>\n  );\n});\n\nexport default Paint;\n","export default function colorBrightness(color: string = \"\"): \"dark\" | \"light\" {\n  let r = 0, g = 0, b = 0;\n\n  if (color.match(/^rgb/)) {\n    const rgb = color\n      .match(/rgba?\\(([^)]+)\\)/)?.[1]\n      .split(/ *, */)\n      .map((v) => Number(v)) || [0, 0, 0];\n    r = rgb[0]; g = rgb[1]; b = rgb[2];\n  } else if (color[0] === \"#\" && color.length === 7) {\n    r = parseInt(color.slice(1, 3), 16);\n    g = parseInt(color.slice(3, 5), 16);\n    b = parseInt(color.slice(5, 7), 16);\n  } else if (color[0] === \"#\" && color.length === 4) {\n    r = parseInt(color[1] + color[1], 16);\n    g = parseInt(color[2] + color[2], 16);\n    b = parseInt(color[3] + color[3], 16);\n  }\n\n  return (r * 299 + g * 587 + b * 114) / 1000 < 125 ? \"dark\" : \"light\";\n}\n"],"mappings":"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","names":["Paint"]}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@mdcrty/paint",
+  "version": "0.1.0",
+  "description": "A zero-dependency React canvas paint component with customisable controls.",
+  "keywords": [
+    "react",
+    "canvas",
+    "paint",
+    "drawing",
+    "sketch"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "react": ">=18.0.0 <20.0.0",
+    "react-dom": ">=18.0.0 <20.0.0"
+  },
+  "scripts": {
+    "build": "tsup"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mdcrty/mdcrty-packages.git",
+    "directory": "packages/paint"
+  },
+  "bugs": {
+    "url": "https://github.com/mdcrty/mdcrty-packages/issues"
+  },
+  "homepage": "https://github.com/mdcrty/mdcrty-packages/tree/main/packages/paint#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "devDependencies": {}
+}