@jalvin/ui 2.0.17 → 2.0.18

package/dist/canvas.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { Modifier } from "./modifier.js";
+export interface CanvasProps extends Omit<React.CanvasHTMLAttributes<HTMLCanvasElement>, "children" | "style" | "width" | "height"> {
+    modifier?: Modifier;
+    /** CSS pixel width of the canvas drawing surface. */
+    width?: number;
+    /** CSS pixel height of the canvas drawing surface. */
+    height?: number;
+    /** Draw callback, invoked after the backing canvas is sized and scaled for DPR. */
+    draw?: (ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement) => void;
+    /** Clear the visible canvas area before running draw(). */
+    clearBeforeDraw?: boolean;
+    /** Override devicePixelRatio used for backing-store scaling. */
+    pixelRatio?: number;
+}
+/** Canvas drawing surface — analogous to Compose's Canvas. */
+export declare function Canvas({ modifier, width, height, draw, clearBeforeDraw, pixelRatio, className, ...domProps }: CanvasProps): React.ReactElement;
+//# sourceMappingURL=canvas.d.ts.map

package/dist/canvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../src/canvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;IACjI,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mFAAmF;IACnF,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,wBAAwB,EAAE,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC1E,2DAA2D;IAC3D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gEAAgE;IAChE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAOD,8DAA8D;AAC9D,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,KAAK,EACL,MAAM,EACN,IAAI,EACJ,eAAsB,EACtB,UAAU,EACV,SAAS,EACT,GAAG,QAAQ,EACZ,EAAE,WAAW,GAAG,KAAK,CAAC,YAAY,CAoDlC"}

package/dist/canvas.js

@@ -0,0 +1,56 @@
+import React from "react";
+function joinClassNames(...classNames) {
+    const value = classNames.filter(Boolean).join(" ").trim();
+    return value.length > 0 ? value : undefined;
+}
+/** Canvas drawing surface — analogous to Compose's Canvas. */
+export function Canvas({ modifier, width, height, draw, clearBeforeDraw = true, pixelRatio, className, ...domProps }) {
+    const ref = React.useRef(null);
+    const modProps = modifier?.toProps() ?? {};
+    const drawFrame = React.useCallback(() => {
+        const canvas = ref.current;
+        if (!canvas)
+            return;
+        const cssWidth = Math.max(1, Math.floor(width ?? (canvas.clientWidth || 300)));
+        const cssHeight = Math.max(1, Math.floor(height ?? (canvas.clientHeight || 150)));
+        const dpr = Math.max(1, pixelRatio ?? (typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1));
+        const backingWidth = Math.max(1, Math.floor(cssWidth * dpr));
+        const backingHeight = Math.max(1, Math.floor(cssHeight * dpr));
+        if (canvas.width !== backingWidth)
+            canvas.width = backingWidth;
+        if (canvas.height !== backingHeight)
+            canvas.height = backingHeight;
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            return;
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        if (clearBeforeDraw)
+            ctx.clearRect(0, 0, cssWidth, cssHeight);
+        draw?.(ctx, canvas);
+    }, [clearBeforeDraw, draw, height, pixelRatio, width]);
+    React.useLayoutEffect(() => {
+        drawFrame();
+    }, [drawFrame]);
+    React.useEffect(() => {
+        const canvas = ref.current;
+        if (!canvas || width !== undefined || height !== undefined || typeof ResizeObserver === "undefined") {
+            return;
+        }
+        const observer = new ResizeObserver(() => {
+            drawFrame();
+        });
+        observer.observe(canvas);
+        return () => observer.disconnect();
+    }, [drawFrame, height, width]);
+    return React.createElement("canvas", {
+        ref,
+        ...domProps,
+        className: joinClassNames(modProps.className, className),
+        style: {
+            width: width !== undefined ? `${width}px` : undefined,
+            height: height !== undefined ? `${height}px` : undefined,
+            ...modProps.style,
+        },
+    });
+}
+//# sourceMappingURL=canvas.js.map

package/dist/canvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.js","sourceRoot":"","sources":["../src/canvas.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -18,6 +18,8 @@ export { Checkbox } from "./checkbox.js";
 export type { CheckboxProps } from "./checkbox.js";
 export { Image, AsyncImage } from "./image.js";
 export type { ImageProps, AsyncImageProps } from "./image.js";
+export { Canvas } from "./canvas.js";
+export type { CanvasProps } from "./canvas.js";
 export { Spacer, Divider } from "./spacer.js";
 export type { SpacerProps, DividerProps } from "./spacer.js";
 export { Card, Scaffold, TopBar } from "./surface.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACxD,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAC/C,YAAY,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG3F,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACjD,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAG/E,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGlE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAGnD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC/C,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAG9D,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC9C,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG7D,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtD,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACxD,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAC/C,YAAY,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG3F,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACjD,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAG/E,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGlE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAGnD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC/C,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAC9C,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG7D,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtD,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC"}

package/dist/index.js

@@ -20,6 +20,7 @@ export { TextArea } from "./textarea.js";
 export { Checkbox } from "./checkbox.js";
 // Image
 export { Image, AsyncImage } from "./image.js";
+export { Canvas } from "./canvas.js";
 // Spacer / Divider
 export { Spacer, Divider } from "./spacer.js";
 // Surface / Scaffold

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,qDAAqD;AACrD,EAAE;AACF,qCAAqC;AACrC,6BAA6B;AAC7B,0BAA0B;AAC1B,6BAA6B;AAC7B,+BAA+B;AAE/B,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAGxD,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGpC,SAAS;AACT,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAG/C,UAAU;AACV,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGjD,OAAO;AACP,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,QAAQ;AACR,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,QAAQ;AACR,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAG/C,mBAAmB;AACnB,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAG9C,qBAAqB;AACrB,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,qDAAqD;AACrD,EAAE;AACF,qCAAqC;AACrC,6BAA6B;AAC7B,0BAA0B;AAC1B,6BAA6B;AAC7B,+BAA+B;AAE/B,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAGxD,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGpC,SAAS;AACT,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAG/C,UAAU;AACV,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAGjD,OAAO;AACP,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,QAAQ;AACR,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,QAAQ;AACR,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC,mBAAmB;AACnB,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAG9C,qBAAqB;AACrB,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jalvin/ui",
-  "version": "2.0.17",
+  "version": "2.0.18",
   "description": "Jalvin UI — Compose-style component library (Column, Row, Box, Button, Text, …)",
   "type": "module",
   "main": "dist/index.js",