@rinzai/zen 0.10.2 → 0.11.0

package/README.md

@@ -57,11 +57,11 @@ export default function App() {
 ## What's inside
 
 - **Surfaces:** Card, Inset, Alert, Stat, Dialog (and sheets from an edge), ConfirmDialog, Popover, Tooltip, Toast (a stacked deck), Disclosure, Backdrop (aurora, contours or dots, and a pointer light)
-- **Inputs:** Button, Input, TextArea, InputGroup, MoneyInput (with currency conversion), Select, Combobox, Calendar, DatePicker, DateRangePicker, MonthPicker, Checkbox, RadioGroup, RadioCards, Segmented, Slider, Toggle, Chip, Field
-- **Data:** Chart (areas, lines, bars) and DonutChart in plain SVG, composable Table with sticky edges and sorting, tree rows, editable cells, virtual rows, Meter, ProgressRing, AnimatedNumber, Badge, StatusPill (a live save status), Skeleton, Spinner
+- **Inputs:** Button, Input, TextArea, InputGroup, MoneyInput (with currency conversion), Select, Combobox, Calendar, DatePicker, DateRangePicker, MonthPicker, ColorPicker, Checkbox, RadioGroup, RadioCards, Segmented, Slider, Toggle, Chip, Field
+- **Data:** Chart (areas, lines, bars) and DonutChart in plain SVG, composable Table with sticky edges and sorting, tree rows, editable cells, virtual rows, Meter, ProgressRing, AnimatedNumber, Badge, StatusPill (a live save status), Skeleton, Spinner, Canvas (items placed freely, with snapping)
 - **Navigation:** Header, Pills, Tabs, TabBar, SideNav, TableOfContents, Menu
 - **Theming:** dark and light, OKLCH tokens, and a theme generator (presets or any hue) that keeps contrast readable
-- **Hooks and utilities:** `themeWave` (the theme spreads from the switch like a drop falling into water: ripples, glints and a rainbow edge, drawn on the GPU; `prepareThemeWave` readies it when the pointer reaches your own switch), `useAnchoredPopup`, `useVirtualList`, `useTree`, `useSort`, money, currency, month and date helpers, `cx` (Tailwind-aware class merging), `cva`
+- **Hooks and utilities:** `themeWave` (the theme spreads from the switch like a drop falling into water: ripples, glints and a rainbow edge, drawn on the GPU; `prepareThemeWave` readies it when the pointer reaches your own switch), `useAnchoredPopup`, `useVirtualList`, `useTree`, `useSort`, `useCopyToClipboard`, money, currency, month and date helpers, `hexToOklch` and `oklchToHex`, `cx` (Tailwind-aware class merging), `cva`
 
 Every component takes `className`, and a class you pass always overrides the component's default.
 

package/dist/avatar/index.d.ts

@@ -12,7 +12,7 @@ export declare class ImageCropError extends Error {
  */
 export declare function cropImageToSquare(file: Blob, size?: number, quality?: number): Promise<string>;
 export interface AvatarProps {
-    /** Image URL (or data URL); without it, the initial is shown. */
+    /** Image URL (or data URL); without it, or if it fails to load, the initial is shown. */
     src?: string | null;
     /** Name or email, for the initial. */
     name: string;

package/dist/avatar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/avatar/index.tsx"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,WAAW,+BAqBxE;AAED,qBAAa,cAAe,SAAQ,KAAK;CAAG;AAE5C;;;;GAIG;AACH,wBAAsB,iBAAiB,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,SAAM,EAAE,OAAO,SAAO,GAAG,OAAO,CAAC,MAAM,CAAC,CAkB/F;AAED,MAAM,WAAW,WAAW;IACxB,iEAAiE;IACjE,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,4EAA4E;IAC5E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/avatar/index.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,WAAW,+BA+BxE;AAED,qBAAa,cAAe,SAAQ,KAAK;CAAG;AAE5C;;;;GAIG;AACH,wBAAsB,iBAAiB,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,SAAM,EAAE,OAAO,SAAO,GAAG,OAAO,CAAC,MAAM,CAAC,CAkB/F;AAED,MAAM,WAAW,WAAW;IACxB,yFAAyF;IACzF,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,4EAA4E;IAC5E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/avatar/index.js

@@ -1,41 +1,43 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region packages/avatar/index.tsx
-function r({ src: r, name: i, alt: a, className: o }) {
-	let s = (i.trim()[0] ?? "?").toUpperCase();
-	return /* @__PURE__ */ n("span", {
-		role: a ? "img" : void 0,
-		"aria-label": a,
-		"aria-hidden": !a || void 0,
-		className: e("zen__avatar relative inline-grid shrink-0 place-items-center overflow-hidden rounded-full font-semibold select-none", "size-9 text-sm", "text-primary-foreground bg-[radial-gradient(circle_at_30%_25%,oklch(var(--glow)/0.9),oklch(var(--primary)/0.55))]", "shadow-[0_0_0_1px_oklch(var(--tint)/0.12),0_0_18px_-6px_oklch(var(--glow)/calc(0.9*var(--glow-strength)))]", o),
-		children: [/* @__PURE__ */ t("span", {
-			className: r ? "invisible" : void 0,
-			children: s
-		}), r && /* @__PURE__ */ t("img", {
-			src: r,
+function i({ src: i, name: a, alt: o, className: s }) {
+	let c = (a.trim()[0] ?? "?").toUpperCase(), [l, u] = t(null), d = i && i !== l ? i : null;
+	return /* @__PURE__ */ r("span", {
+		role: o ? "img" : void 0,
+		"aria-label": o,
+		"aria-hidden": !o || void 0,
+		className: e("zen__avatar relative inline-grid shrink-0 place-items-center overflow-hidden rounded-full font-semibold select-none", "size-9 text-sm", "text-primary-foreground bg-[radial-gradient(circle_at_30%_25%,oklch(var(--glow)/0.9),oklch(var(--primary)/0.55))]", "shadow-[0_0_0_1px_oklch(var(--tint)/0.12),0_0_18px_-6px_oklch(var(--glow)/calc(0.9*var(--glow-strength)))]", s),
+		children: [/* @__PURE__ */ n("span", {
+			className: d ? "invisible" : void 0,
+			children: c
+		}), d && /* @__PURE__ */ n("img", {
+			src: d,
 			alt: "",
+			onError: () => u(d),
 			className: "absolute inset-0 size-full object-cover",
 			draggable: !1
 		})]
 	});
 }
-var i = class extends Error {};
-async function a(e, t = 160, n = .85) {
-	if (!e.type.startsWith("image/")) throw new i("Choose an image file.");
-	if (e.size > 20971520) throw new i("That image is too large (over 20 MB).");
+var a = class extends Error {};
+async function o(e, t = 160, n = .85) {
+	if (!e.type.startsWith("image/")) throw new a("Choose an image file.");
+	if (e.size > 20971520) throw new a("That image is too large (over 20 MB).");
 	let r;
 	try {
 		r = await createImageBitmap(e);
 	} catch {
-		throw new i("That image couldn't be read.");
+		throw new a("That image couldn't be read.");
 	}
-	let a = Math.min(r.width, r.height), o = document.createElement("canvas");
+	let i = Math.min(r.width, r.height), o = document.createElement("canvas");
 	o.width = o.height = t;
 	let s = o.getContext("2d");
-	s.imageSmoothingQuality = "high", s.drawImage(r, (r.width - a) / 2, (r.height - a) / 2, a, a, 0, 0, t, t), r.close();
+	s.imageSmoothingQuality = "high", s.drawImage(r, (r.width - i) / 2, (r.height - i) / 2, i, i, 0, 0, t, t), r.close();
 	let c = o.toDataURL("image/webp", n);
 	return c.startsWith("data:image/webp") ? c : o.toDataURL("image/jpeg", n);
 }
 //#endregion
-export { i as ImageCropError, a as cropImageToSquare, r as default };
+export { a as ImageCropError, o as cropImageToSquare, i as default };

package/dist/canvas/geometry.d.ts

@@ -0,0 +1,51 @@
+export interface CanvasRect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+/** A snap line: a vertical one at x, or a horizontal one at y. */
+export interface CanvasGuide {
+    axis: 'x' | 'y';
+    at: number;
+}
+/** Which corner or edge a resize handle is on. */
+export type CanvasHandle = 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw';
+export interface Bounds {
+    width: number;
+    height: number;
+    /** Smallest width and height. */
+    min: number;
+}
+export interface SnapOptions {
+    /** Rects to line up with, besides the surface. */
+    others?: readonly CanvasRect[];
+    /** How close counts for lines, in surface units; 0 or left out, no lines. */
+    threshold?: number;
+    /** Round to multiples of this when no line is in reach. */
+    grid?: number;
+}
+/** The box around several rects. */
+export declare function boundsOf(rects: readonly CanvasRect[]): CanvasRect;
+/** Whether two rects overlap. */
+export declare function intersects(a: CanvasRect, b: CanvasRect): boolean;
+/**
+ * `start` moved by dx, dy, then snapped: an edge or its centre onto a line in
+ * reach, otherwise its corner onto the grid. Kept on the surface, in whole units.
+ */
+export declare function moveRect(start: CanvasRect, dx: number, dy: number, bounds: Bounds, snap?: SnapOptions): {
+    rect: CanvasRect;
+    guides: CanvasGuide[];
+};
+/**
+ * `start` resized by dragging `handle` by dx, dy: its moving edges snapped to a
+ * line or the grid, no smaller than `min`, kept on the surface, in whole units.
+ * With `keepRatio`, its shape stays the same (and it doesn't snap).
+ */
+export declare function resizeRect(start: CanvasRect, handle: CanvasHandle, dx: number, dy: number, bounds: Bounds, { keepRatio, ...snap }?: SnapOptions & {
+    keepRatio?: boolean;
+}): {
+    rect: CanvasRect;
+    guides: CanvasGuide[];
+};
+//# sourceMappingURL=geometry.d.ts.map

package/dist/canvas/geometry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"geometry.d.ts","sourceRoot":"","sources":["../../packages/canvas/geometry.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACb;AAED,kEAAkE;AAClE,MAAM,WAAW,WAAW;IACxB,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;CACd;AAED,kDAAkD;AAClD,MAAM,MAAM,YAAY,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC;AAE7E,MAAM,WAAW,MAAM;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,GAAG,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IACxB,kDAAkD;IAClD,MAAM,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IAC/B,6EAA6E;IAC7E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,oCAAoC;AACpC,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,UAAU,EAAE,GAAG,UAAU,CASjE;AAED,iCAAiC;AACjC,wBAAgB,UAAU,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,UAAU,GAAG,OAAO,CAEhE;AA2BD;;;GAGG;AACH,wBAAgB,QAAQ,CACpB,KAAK,EAAE,UAAU,EACjB,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,MAAM,EAAE,MAAM,EACd,IAAI,GAAE,WAAgB,GACvB;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,MAAM,EAAE,WAAW,EAAE,CAAA;CAAE,CAqB7C;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CACtB,KAAK,EAAE,UAAU,EACjB,MAAM,EAAE,YAAY,EACpB,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,MAAM,EAAE,MAAM,EACd,EAAE,SAAiB,EAAE,GAAG,IAAI,EAAE,GAAE,WAAW,GAAG;IAAE,SAAS,CAAC,EAAE,OAAO,CAAA;CAAO,GAC3E;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,MAAM,EAAE,WAAW,EAAE,CAAA;CAAE,CAqD7C"}

package/dist/canvas/geometry.js

@@ -0,0 +1,91 @@
+"use client";
+//#region packages/canvas/geometry.ts
+function e(e) {
+	let t = Math.min(...e.map((e) => e.x)), n = Math.min(...e.map((e) => e.y));
+	return {
+		x: t,
+		y: n,
+		w: Math.max(...e.map((e) => e.x + e.w)) - t,
+		h: Math.max(...e.map((e) => e.y + e.h)) - n
+	};
+}
+function t(e, t) {
+	return e.x < t.x + t.w && t.x < e.x + e.w && e.y < t.y + t.h && t.y < e.y + e.h;
+}
+function n(e, t, n) {
+	let r = e === "x" ? t.width : t.height, i = [
+		0,
+		r / 2,
+		r
+	];
+	for (let t of n) {
+		let [n, r] = e === "x" ? [t.x, t.w] : [t.y, t.h];
+		i.push(n, n + r / 2, n + r);
+	}
+	return i;
+}
+function r(e, t, n) {
+	let r = null;
+	for (let i of e) for (let e of t) {
+		let t = e - i;
+		Math.abs(t) <= n && (!r || Math.abs(t) < Math.abs(r.by)) && (r = {
+			by: t,
+			at: e
+		});
+	}
+	return r;
+}
+var i = (e, t) => t ? Math.round(e / t) * t : e;
+function a(e, t, a, o, s = {}) {
+	let c = [], l = (e, t, a) => {
+		let l = s.threshold && r([
+			t,
+			t + a / 2,
+			t + a
+		], n(e, o, s.others ?? []), s.threshold);
+		return l ? (c.push({
+			axis: e,
+			at: l.at
+		}), t + l.by) : i(t, s.grid);
+	}, u = l("x", e.x + t, e.w), d = l("y", e.y + a, e.h);
+	return {
+		rect: {
+			x: Math.round(Math.min(Math.max(0, u), o.width - e.w)),
+			y: Math.round(Math.min(Math.max(0, d), o.height - e.h)),
+			w: e.w,
+			h: e.h
+		},
+		guides: c
+	};
+}
+function o(e, t, a, o, s, { keepRatio: c = !1, ...l } = {}) {
+	let u = t.includes("w"), d = t.includes("e"), f = t.includes("n"), p = t.includes("s"), m = e.x + e.w, h = e.y + e.h, g = e.x + (u ? a : 0), _ = m + (d ? a : 0), v = e.y + (f ? o : 0), y = h + (p ? o : 0), b = [];
+	if (!c) {
+		let e = (e, t) => {
+			let a = l.threshold && r([t], n(e, s, l.others ?? []), l.threshold);
+			return a ? (b.push({
+				axis: e,
+				at: a.at
+			}), a.at) : i(t, l.grid);
+		};
+		u && (g = e("x", g)), d && (_ = e("x", _)), f && (v = e("y", v)), p && (y = e("y", y));
+	}
+	let x = u ? m : s.width - e.x, S = f ? h : s.height - e.y, C = Math.min(x, Math.max(s.min, _ - g)), w = Math.min(S, Math.max(s.min, y - v));
+	if (c) {
+		let t = e.w / e.h;
+		(u || d) && (!(f || p) || Math.abs(C / e.w - 1) >= Math.abs(w / e.h - 1)) ? w = C / t : C = w * t;
+		let n = Math.min(1, x / C, S / w), r = Math.max(1, s.min / C, s.min / w), i = n < 1 ? n : r;
+		C *= i, w *= i;
+	}
+	return C = Math.round(C), w = Math.round(w), {
+		rect: {
+			x: u ? m - C : e.x,
+			y: f ? h - w : e.y,
+			w: C,
+			h: w
+		},
+		guides: b
+	};
+}
+//#endregion
+export { e as boundsOf, t as intersects, a as moveRect, o as resizeRect };

package/dist/canvas/index.d.ts

@@ -0,0 +1,59 @@
+import { ComponentProps } from 'react';
+import { CanvasRect } from './geometry';
+export type { CanvasRect } from './geometry';
+/**
+ * A fixed-size surface where items sit anywhere, such as the cards of a
+ * stream overlay or a slide. Drag an item to move it, and the handles of the
+ * selected one to resize it (Shift keeps its shape); Escape mid-drag puts it
+ * back. Shift- or Cmd-click, or drag a box on empty space, to select several
+ * and move them together. From the keyboard, Tab reaches each item, the arrow
+ * keys move the selection (Shift by 10), Alt and the arrow keys resize, Cmd or
+ * Ctrl+A selects all, and Escape deselects; each change is announced.
+ *
+ * Items stay on the surface; with `snap` they line up with its edges and
+ * centre and with each other, and with `grid` they keep to a grid. `scale`
+ * shows the design larger or smaller, or `"fit"` fills the width it's given.
+ * `onChange` gets the items with every step of a change; `onChangeEnd`, once
+ * it's made, with the items before it, for undo or saving.
+ */
+export declare function Canvas<T extends CanvasItemRect>({ width, height, scale, items, onChange, onChangeEnd, selected, onSelect, minSize, snap, grid, className, style, children, onPointerDown, ...rest }: CanvasProps<T>): import('react').JSX.Element;
+/**
+ * One item on a Canvas, placed where the canvas's `items` say for its `id`;
+ * later items sit on top of earlier ones. `label` names it ("Title") in what's
+ * announced. Its content is yours: fields and buttons in it work as usual,
+ * and pressing them doesn't drag it (nor anything with data-canvas-no-drag).
+ */
+export declare function CanvasItem({ id, label, className, style, children, ...rest }: CanvasItemProps): import('react').JSX.Element | null;
+export interface CanvasItemRect extends CanvasRect {
+    id: string;
+    /** Not moved or resized, and presses go through it to the surface (Tab still reaches it): a background, say. */
+    locked?: boolean;
+}
+export interface CanvasProps<T extends CanvasItemRect = CanvasItemRect> extends Omit<ComponentProps<'div'>, 'onChange' | 'onSelect'> {
+    /** The surface's size, in your design's units (px at scale 1). */
+    width: number;
+    height: number;
+    /** How large to show it: 2 shows a 400×120 design 800×240; "fit" fills the width it's given. Positions stay in design units. */
+    scale?: number | 'fit';
+    /** Where each item is (other fields are kept); render a CanvasItem for each. */
+    items: readonly T[];
+    /** The items, with every step of a move or resize. */
+    onChange: (items: T[]) => void;
+    /** The items once a change is made (a drag let go, a key pressed), and as they were before: for undo or saving. */
+    onChangeEnd?: (items: T[], before: readonly T[]) => void;
+    /** The selected items' ids. */
+    selected?: readonly string[];
+    onSelect?: (ids: string[]) => void;
+    /** Smallest width and height an item can be resized to. */
+    minSize?: number;
+    /** Line items up with the surface and each other: true, or how close counts, in screen px (true is 6). */
+    snap?: boolean | number;
+    /** Keep positions and sizes to multiples of this (design units) when no line is in reach. */
+    grid?: number;
+}
+export interface CanvasItemProps extends ComponentProps<'div'> {
+    id: string;
+    /** The item's name, e.g. "Title", for what's announced. */
+    label: string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/canvas/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/canvas/index.tsx"],"names":[],"mappings":"AACA,OAAO,EACH,cAAc,EAWjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAIH,KAAK,UAAU,EAKlB,MAAM,YAAY,CAAC;AAEpB,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAyC7C;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,MAAM,CAAC,CAAC,SAAS,cAAc,EAAE,EAC7C,KAAK,EACL,MAAM,EACN,KAAS,EACT,KAAK,EACL,QAAQ,EACR,WAAW,EACX,QAAa,EACb,QAAQ,EACR,OAAW,EACX,IAAY,EACZ,IAAI,EACJ,SAAS,EACT,KAAK,EACL,QAAQ,EACR,aAAa,EACb,GAAG,IAAI,EACV,EAAE,WAAW,CAAC,CAAC,CAAC,+BAsUhB;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,sCA2D7F;AAED,MAAM,WAAW,cAAe,SAAQ,UAAU;IAC9C,EAAE,EAAE,MAAM,CAAC;IACX,gHAAgH;IAChH,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CAAE,SAAQ,IAAI,CAChF,cAAc,CAAC,KAAK,CAAC,EACrB,UAAU,GAAG,UAAU,CAC1B;IACG,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,gIAAgI;IAChI,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACvB,gFAAgF;IAChF,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;IACpB,sDAAsD;IACtD,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/B,mHAAmH;IACnH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,KAAK,IAAI,CAAC;IACzD,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0GAA0G;IAC1G,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,6FAA6F;IAC7F,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC1D,EAAE,EAAE,MAAM,CAAC;IACX,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAC;CACjB"}

package/dist/canvas/index.js

@@ -0,0 +1,303 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { boundsOf as t, intersects as n, moveRect as r, resizeRect as i } from "./geometry.js";
+import { createContext as a, useContext as o, useEffect as s, useId as c, useLayoutEffect as l, useRef as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region packages/canvas/index.tsx
+var m = typeof window > "u" ? s : l, h = 3, ee = "input, textarea, select, button, a[href], [contenteditable=\"\"], [contenteditable=\"true\"], [data-canvas-no-drag]", g = [
+	"nw",
+	"n",
+	"ne",
+	"e",
+	"se",
+	"s",
+	"sw",
+	"w"
+], _ = {
+	nw: "left-0 top-0 cursor-nwse-resize",
+	n: "left-1/2 top-0 cursor-ns-resize",
+	ne: "left-full top-0 cursor-nesw-resize",
+	e: "left-full top-1/2 cursor-ew-resize",
+	se: "left-full top-full cursor-nwse-resize",
+	s: "left-1/2 top-full cursor-ns-resize",
+	sw: "left-0 top-full cursor-nesw-resize",
+	w: "left-0 top-1/2 cursor-ew-resize"
+}, v = {
+	ArrowLeft: [-1, 0],
+	ArrowRight: [1, 0],
+	ArrowUp: [0, -1],
+	ArrowDown: [0, 1]
+}, y = (e, t) => e.x === t.x && e.y === t.y && e.w === t.w && e.h === t.h, b = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), x = a(null);
+function S({ width: a, height: o, scale: s = 1, items: l, onChange: g, onChangeEnd: _, selected: S = [], onSelect: C, minSize: w = 8, snap: T = !1, grid: E, className: D, style: O, children: k, onPointerDown: te, ...ne }) {
+	let A = u(null), j = u(!1), [M, re] = d(null), [ie, N] = d([]), [P, F] = d(null), [I, L] = d(null), [R, z] = d(!1), [B, V] = d(""), H = c();
+	m(() => {
+		let e = A.current;
+		if (s !== "fit" || !e) return;
+		let t = () => e.clientWidth && re(e.clientWidth / a);
+		if (t(), typeof ResizeObserver > "u") return;
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, [s, a]);
+	let U = s === "fit" ? M ?? 1 : s, W = new Map(l.map((e) => [e.id, e])), G = {
+		width: a,
+		height: o,
+		min: w
+	}, ae = T === !1 ? 0 : (T === !0 ? 6 : T) / U, K = (e) => ({
+		others: l.filter((t) => !e.has(t.id)),
+		threshold: ae,
+		grid: E
+	}), q = (e) => {
+		b(e, S) || C?.(e);
+	}, J = (e) => l.map((t) => {
+		let n = e.get(t.id);
+		return n ? {
+			...t,
+			...n
+		} : t;
+	}), Y = (e, n, i, a) => {
+		let o = t(e), s = r(o, n, i, G, a), [c, l] = [s.rect.x - o.x, s.rect.y - o.y];
+		return {
+			rects: new Map(e.map((e) => [e.id, {
+				x: e.x + c,
+				y: e.y + l,
+				w: e.w,
+				h: e.h
+			}])),
+			box: s.rect,
+			guides: s.guides
+		};
+	}, X = (e, t, n) => {
+		n.w !== t.w || n.h !== t.h ? V(`${e} resized to ${n.w} by ${n.h}.`) : (n.x !== t.x || n.y !== t.y) && V(`${e} moved to ${n.x}, ${n.y}.`);
+	}, Z = (e, t, n) => e.length === 1 && e[0].id === t ? n : `${e.length} items`, oe = (e, n, r, a) => {
+		let o = W.get(n);
+		if (e.button !== 0 || !o || o.locked && !a) return;
+		let s = e.target.closest(ee);
+		if (!a && s && s !== e.currentTarget && e.currentTarget.contains(s)) return;
+		e.preventDefault(), e.stopPropagation();
+		let c = e.shiftKey || e.metaKey || e.ctrlKey, u;
+		if (u = a ? [n] : c ? S.includes(n) ? S.filter((e) => e !== n) : [...S, n] : S.includes(n) ? [...S] : [n], q(u), j.current = !0, e.currentTarget.closest("[data-canvas-id]")?.focus({ preventScroll: !0 }), j.current = !1, !u.includes(n)) return;
+		let d = a ? [o] : u.flatMap((e) => W.get(e) ?? []).filter((e) => !e.locked);
+		if (!d.length) return;
+		let f = e.currentTarget;
+		f.setPointerCapture?.(e.pointerId);
+		let p = new Set(d.map((e) => e.id)), m = l, v = t(d), y = Z(d, n, r), b = !1, x = [...l], C = v, w = (t) => {
+			if (t.pointerId !== e.pointerId) return;
+			let [r, s] = [t.clientX - e.clientX, t.clientY - e.clientY];
+			if (!b) {
+				if (Math.hypot(r, s) < h) return;
+				b = !0, z(!0);
+			}
+			let [c, l] = [r / U, s / U], u;
+			if (a) {
+				let e = i(o, a, c, l, G, {
+					keepRatio: t.shiftKey,
+					...K(p)
+				});
+				u = {
+					rects: /* @__PURE__ */ new Map([[n, e.rect]]),
+					box: e.rect,
+					guides: e.guides
+				};
+			} else u = Y(d, c, l, K(p));
+			C = u.box, x = J(u.rects), g(x), N(u.guides), L({
+				box: u.box,
+				text: a ? `${u.box.w} × ${u.box.h}` : `${u.box.x}, ${u.box.y}`
+			});
+		}, T = (t) => {
+			f.removeEventListener("pointermove", w), f.removeEventListener("pointerup", E), f.removeEventListener("pointercancel", D), window.removeEventListener("keydown", O, !0), f.hasPointerCapture?.(e.pointerId) && f.releasePointerCapture(e.pointerId), N([]), L(null), z(!1), b && (t ? (_?.(x, m), X(y, v, C)) : (g([...m]), V(`${y} put back.`)));
+		}, E = (t) => t.pointerId === e.pointerId && T(!0), D = (t) => t.pointerId === e.pointerId && T(!1), O = (e) => {
+			e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), T(!1));
+		};
+		f.addEventListener("pointermove", w), f.addEventListener("pointerup", E), f.addEventListener("pointercancel", D), window.addEventListener("keydown", O, !0);
+	}, se = (e) => {
+		if (e.button !== 0 || e.target.closest("[data-canvas-id]:not([data-locked])")) return;
+		let t = e.currentTarget, r = t.getBoundingClientRect(), i = (e) => ({
+			x: Math.min(a, Math.max(0, (e.clientX - r.left) / U)),
+			y: Math.min(o, Math.max(0, (e.clientY - r.top) / U))
+		}), s = e.shiftKey || e.metaKey || e.ctrlKey ? [...S] : [], c = i(e), u = !1, d = S;
+		t.setPointerCapture?.(e.pointerId);
+		let f = (t) => {
+			if (t.pointerId !== e.pointerId || !u && Math.hypot(t.clientX - e.clientX, t.clientY - e.clientY) < h) return;
+			u = !0;
+			let r = i(t), a = {
+				x: Math.min(c.x, r.x),
+				y: Math.min(c.y, r.y),
+				w: Math.abs(r.x - c.x),
+				h: Math.abs(r.y - c.y)
+			};
+			F(a);
+			let o = l.filter((e) => !e.locked && n(e, a)).map((e) => e.id), f = [...s, ...o.filter((e) => !s.includes(e))];
+			b(f, d) || (d = f, C?.(f));
+		}, p = (n) => {
+			n.pointerId === e.pointerId && (t.removeEventListener("pointermove", f), t.removeEventListener("pointerup", p), t.removeEventListener("pointercancel", p), F(null), n.type !== "pointercancel" && (u ? V(`${d.length} ${d.length === 1 ? "item" : "items"} selected.`) : s.length || q([])));
+		};
+		t.addEventListener("pointermove", f), t.addEventListener("pointerup", p), t.addEventListener("pointercancel", p);
+	}, ce = (e, n, r) => {
+		let a = W.get(n);
+		if (!a || e.target !== e.currentTarget) return;
+		if (e.key === "Escape") {
+			if (!S.length) return;
+			e.preventDefault(), q([]);
+			return;
+		}
+		if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "a") {
+			e.preventDefault();
+			let t = l.filter((e) => !e.locked).map((e) => e.id);
+			q(t), V(`${t.length} items selected.`);
+			return;
+		}
+		let o = v[e.key];
+		if (!o) return;
+		e.preventDefault();
+		let s = e.shiftKey ? 10 : 1, [c, u] = [o[0] * s, o[1] * s], d = (S.includes(n) ? S : [n]).flatMap((e) => W.get(e) ?? []).filter((e) => !e.locked), f = e.altKey ? d.filter((e) => e.id === n) : d;
+		if (!f.length) return;
+		let p = e.altKey ? /* @__PURE__ */ new Map([[n, i(a, "se", c, u, G).rect]]) : Y(f, c, u).rects;
+		if ([...p].every(([e, t]) => y(t, W.get(e)))) return;
+		let m = J(p);
+		g(m), _?.(m, l), X(Z(f, n, r), t(f), t([...p.values()]));
+	}, le = (e) => {
+		!j.current && !S.includes(e) && q([e]);
+	}, Q = I && {
+		left: Math.min(a * U - 28, Math.max(28, (I.box.x + I.box.w / 2) * U)),
+		top: (I.box.y + I.box.h) * U + 26 > o * U ? Math.max(4, I.box.y * U - 26) : (I.box.y + I.box.h) * U + 6
+	}, $ = R && E && E * U >= 6 ? E * U : 0;
+	return /* @__PURE__ */ p(x.Provider, {
+		value: {
+			item: (e) => W.get(e),
+			selected: S,
+			grab: oe,
+			key: ce,
+			focus: le,
+			hintId: H
+		},
+		children: [
+			/* @__PURE__ */ p("div", {
+				ref: A,
+				role: "group",
+				...ne,
+				onPointerDown: (e) => {
+					te?.(e), e.defaultPrevented || se(e);
+				},
+				style: {
+					...O,
+					...s === "fit" ? {
+						width: "100%",
+						aspectRatio: `${a} / ${o}`
+					} : {
+						width: a * U,
+						height: o * U
+					}
+				},
+				className: e("zen__canvas bg-tint/[0.03] relative shrink-0 overflow-hidden rounded-lg shadow-[inset_0_0_0_1px_oklch(var(--tint)/0.08)] select-none", D),
+				children: [/* @__PURE__ */ f("div", {
+					style: {
+						width: a,
+						height: o,
+						scale: String(U),
+						"--canvas-scale": U
+					},
+					className: e("absolute top-0 left-0 origin-top-left", s === "fit" && M === null && "invisible"),
+					children: k
+				}), /* @__PURE__ */ p("div", {
+					"aria-hidden": !0,
+					className: "pointer-events-none absolute inset-0",
+					children: [
+						$ > 0 && /* @__PURE__ */ f("div", {
+							"data-canvas-grid": "",
+							className: "absolute inset-0",
+							style: {
+								backgroundImage: "radial-gradient(circle, oklch(var(--tint) / 0.22) 1px, transparent 1.5px)",
+								backgroundSize: `${$}px ${$}px`,
+								backgroundPosition: `${-$ / 2}px ${-$ / 2}px`
+							}
+						}),
+						ie.map((e) => /* @__PURE__ */ f("span", {
+							"data-canvas-guide": "",
+							className: "bg-primary absolute shadow-[0_0_6px_oklch(var(--glow)/0.8)]",
+							style: e.axis === "x" ? {
+								left: e.at * U,
+								top: 0,
+								bottom: 0,
+								width: 1
+							} : {
+								top: e.at * U,
+								left: 0,
+								right: 0,
+								height: 1
+							}
+						}, `${e.axis}${e.at}`)),
+						P && /* @__PURE__ */ f("span", {
+							"data-canvas-marquee": "",
+							className: "border-primary/60 bg-primary/10 absolute rounded-sm border",
+							style: {
+								left: P.x * U,
+								top: P.y * U,
+								width: P.w * U,
+								height: P.h * U
+							}
+						}),
+						Q && /* @__PURE__ */ f("span", {
+							"data-canvas-readout": "",
+							className: "bg-primary text-primary-foreground absolute -translate-x-1/2 rounded-md px-1.5 py-0.5 text-[11px] leading-4 font-medium whitespace-nowrap tabular-nums shadow-[0_4px_14px_-4px_oklch(var(--glow)/0.7)]",
+							style: Q,
+							children: I.text
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ f("span", {
+				id: H,
+				hidden: !0,
+				children: "Arrow keys move the selection, Shift with them by 10. Alt with the arrow keys resizes. Escape deselects."
+			}),
+			/* @__PURE__ */ f("span", {
+				"aria-live": "assertive",
+				className: "sr-only",
+				children: B
+			})
+		]
+	});
+}
+function C({ id: t, label: n, className: r, style: i, children: a, ...s }) {
+	let c = o(x);
+	if (!c) throw Error("<CanvasItem> must be inside <Canvas>");
+	let l = c.item(t);
+	if (!l) return null;
+	let u = c.selected.includes(t), d = u && c.selected.length === 1;
+	return /* @__PURE__ */ p("div", {
+		role: "group",
+		"aria-roledescription": l.locked ? "locked item" : "movable item",
+		"aria-label": n,
+		"aria-describedby": l.locked ? void 0 : c.hintId,
+		tabIndex: 0,
+		"data-canvas-id": t,
+		"data-selected": u || void 0,
+		"data-locked": l.locked || void 0,
+		...s,
+		onFocus: (e) => {
+			s.onFocus?.(e), e.target === e.currentTarget && c.focus(t);
+		},
+		onPointerDown: (e) => {
+			s.onPointerDown?.(e), c.grab(e, t, n);
+		},
+		onKeyDown: (e) => {
+			s.onKeyDown?.(e), c.key(e, t, n);
+		},
+		style: {
+			...i,
+			left: l.x,
+			top: l.y,
+			width: l.w,
+			height: l.h
+		},
+		className: e("zen__canvas-item absolute cursor-move touch-none outline-hidden data-locked:cursor-default data-locked:touch-auto", "[outline-offset:calc(1px/var(--canvas-scale))]", "not-data-selected:hover:outline-solid not-data-selected:hover:outline-[length:calc(1px/var(--canvas-scale))] not-data-selected:hover:outline-[color:oklch(var(--tint)/0.35)]", "data-selected:outline-solid data-selected:outline-[length:calc(2px/var(--canvas-scale))] data-selected:outline-[color:oklch(var(--primary)/0.8)]", "focus-visible:outline-solid focus-visible:outline-[length:calc(2px/var(--canvas-scale))] focus-visible:outline-[color:oklch(var(--ring)/0.7)]", r),
+		children: [a, d && !l.locked && g.map((r) => /* @__PURE__ */ f("span", {
+			"aria-hidden": !0,
+			"data-handle": r,
+			onPointerDown: (e) => c.grab(e, t, n, r),
+			className: e("bg-foreground absolute z-10 size-[calc(10px/var(--canvas-scale))] -translate-1/2 rounded-full border-[length:calc(2px/var(--canvas-scale))] border-[color:oklch(var(--primary))] shadow-[0_0_8px_oklch(var(--glow)/0.6)]", "after:absolute after:-inset-[calc(6px/var(--canvas-scale))] pointer-coarse:after:-inset-[calc(14px/var(--canvas-scale))]", _[r])
+		}, r))]
+	});
+}
+//#endregion
+export { S as Canvas, C as CanvasItem };

package/dist/code-block/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/code-block/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAA+B,MAAM,OAAO,CAAC;AAEpE;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAC9B,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,QAAe,EACf,OAAiB,EACjB,SAAS,EACT,GAAG,IAAI,EACV,EAAE,cAAc,+BA8DhB;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC3E,IAAI,EAAE,MAAM,CAAC;IACb,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACxD,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wGAAwG;IACxG,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CAC/B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/code-block/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAA+B,MAAM,OAAO,CAAC;AAEpE;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAC9B,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,QAAe,EACf,OAAiB,EACjB,SAAS,EACT,GAAG,IAAI,EACV,EAAE,cAAc,+BAsDhB;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC3E,IAAI,EAAE,MAAM,CAAC;IACb,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACxD,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wGAAwG;IACxG,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CAC/B"}