@rinzai/zen 0.10.3 → 0.13.0

package/dist/calendar-heatmap/index.d.ts

@@ -1,22 +1,24 @@
 import { DateString } from '../utils/date';
 import { Month } from '../utils/month';
+import { ComponentProps } from 'react';
 /**
  * A month as a grid of days, each shaded by its value (e.g. what was spent
  * that day): busy days stand out at a glance. Hover a day for its figure;
- * with `onSelect`, days are buttons.
+ * with `onSelectedChange`, days are buttons.
  */
-export default function CalendarHeatmap({ month, values, locale, format, weekStartsOn, onSelect, selected, label, className, }: CalendarHeatmapProps): import('react').JSX.Element;
-export interface CalendarHeatmapProps {
+export default function CalendarHeatmap({ month, values, locale: localeProp, format, weekStartsOn: weekStartsOnProp, onSelectedChange, selected, label, className, ...rest }: CalendarHeatmapProps): import('react').JSX.Element;
+/** Other props (data-*, an id) go on the table. */
+export interface CalendarHeatmapProps extends Omit<ComponentProps<'table'>, 'children'> {
     month: Month;
     /** Each day's value, by date ("2026-09-03"); days missing have none. */
     values: Partial<Record<DateString, number>>;
-    locale: string;
+    locale?: string;
     /** Turns a value into text for its label, e.g. as money. */
     format?: (value: number) => string;
     /** 0 for Sunday … 6 for Saturday (default: the locale's). */
     weekStartsOn?: number;
     /** Makes the days buttons. */
-    onSelect?: (day: DateString) => void;
+    onSelectedChange?: (day: DateString) => void;
     selected?: DateString | null;
     /** Accessible name (default: the month, e.g. "September 2026"). */
     label?: string;

package/dist/calendar-heatmap/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/calendar-heatmap/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,UAAU,EAA+D,MAAM,iBAAiB,CAAC;AAC/G,OAAO,EAAe,KAAK,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE3D;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACpC,KAAK,EACL,MAAM,EACN,MAAM,EACN,MAAe,EACf,YAAgC,EAChC,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,SAAS,GACZ,EAAE,oBAAoB,+BAsFtB;AAED,MAAM,WAAW,oBAAoB;IACjC,KAAK,EAAE,KAAK,CAAC;IACb,wEAAwE;IACxE,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC;IAC5C,MAAM,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAC7B,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/calendar-heatmap/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,UAAU,EAA+D,MAAM,iBAAiB,CAAC;AAC/G,OAAO,EAAe,KAAK,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACpC,KAAK,EACL,MAAM,EACN,MAAM,EAAE,UAAU,EAClB,MAAe,EACf,YAAY,EAAE,gBAAgB,EAC9B,gBAAgB,EAChB,QAAQ,EACR,KAAK,EACL,SAAS,EACT,GAAG,IAAI,EACV,EAAE,oBAAoB,+BA0FtB;AAED,mDAAmD;AACnD,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC;IACnF,KAAK,EAAE,KAAK,CAAC;IACb,wEAAwE;IACxE,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8BAA8B;IAC9B,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAC7B,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/calendar-heatmap/index.js

@@ -1,48 +1,50 @@
 "use client";
 import { cx as e } from "../utils/cx.js";
-import { formatMonth as t } from "../utils/month.js";
-import { dayOfWeek as n, daysInMonth as r, formatDate as i, weekStart as a, weekdayNames as o } from "../utils/date.js";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useLocale as t } from "../locale-provider/index.js";
+import { formatMonth as n } from "../utils/month.js";
+import { dayOfWeek as r, daysInMonth as i, formatDate as a, weekStart as o, weekdayNames as s } from "../utils/date.js";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region packages/calendar-heatmap/index.tsx
-function u({ month: u, values: d, locale: f, format: p = String, weekStartsOn: m = a(f), onSelect: h, selected: g, label: _, className: v }) {
-	let y = r(u), b = Array.from({ length: y }, (e, t) => `${u}-${String(t + 1).padStart(2, "0")}`), x = (n(b[0]) - m + 7) % 7, S = [...Array(x).fill(null), ...b];
-	for (; S.length % 7;) S.push(null);
-	let C = Array.from({ length: S.length / 7 }, (e, t) => S.slice(t * 7, t * 7 + 7)), w = o(f, "narrow"), T = o(f, "long"), E = Array.from({ length: 7 }, (e, t) => (m + t) % 7), D = Math.max(0, ...b.map((e) => d[e] ?? 0));
-	return /* @__PURE__ */ l("table", {
-		"aria-label": _ ?? t(u, f, "long"),
-		className: e("zen__calendar-heatmap w-full table-fixed border-separate border-spacing-1", v),
-		children: [/* @__PURE__ */ c("thead", { children: /* @__PURE__ */ c("tr", { children: E.map((e) => /* @__PURE__ */ c("th", {
+function d({ month: d, values: f, locale: p, format: m = String, weekStartsOn: h, onSelectedChange: g, selected: _, label: v, className: y, ...b }) {
+	let x = t(p), S = new Intl.NumberFormat(x), C = h ?? o(x), w = i(d), T = Array.from({ length: w }, (e, t) => `${d}-${String(t + 1).padStart(2, "0")}`), E = (r(T[0]) - C + 7) % 7, D = [...Array(E).fill(null), ...T];
+	for (; D.length % 7;) D.push(null);
+	let O = Array.from({ length: D.length / 7 }, (e, t) => D.slice(t * 7, t * 7 + 7)), k = s(x, "narrow"), A = s(x, "long"), j = Array.from({ length: 7 }, (e, t) => (C + t) % 7), M = Math.max(0, ...T.map((e) => f[e] ?? 0));
+	return /* @__PURE__ */ u("table", {
+		"aria-label": v ?? n(d, x, "long"),
+		...b,
+		className: e("zen__calendar-heatmap w-full table-fixed border-separate border-spacing-1", y),
+		children: [/* @__PURE__ */ l("thead", { children: /* @__PURE__ */ l("tr", { children: j.map((e) => /* @__PURE__ */ l("th", {
 			scope: "col",
-			abbr: T[e],
+			abbr: A[e],
 			className: "text-muted-foreground pb-1 text-xs font-normal",
-			children: w[e]
-		}, e)) }) }), /* @__PURE__ */ c("tbody", { children: C.map((t, n) => /* @__PURE__ */ c("tr", { children: t.map((t, n) => {
-			if (!t) return /* @__PURE__ */ c("td", {}, n);
-			let r = d[t], a = D > 0 && r ? Math.sqrt(r / D) : 0, o = `${i(t, f, "day")}: ${p(r || 0)}`, u = e("relative grid aspect-square w-full place-items-center rounded-md text-[0.65rem] tabular-nums transition-[box-shadow]", a ? a > .6 ? "text-primary-foreground" : "text-foreground/80" : "bg-tint/[0.04] text-muted-foreground", t === g && "ring-ring ring-2"), m = a ? { background: `oklch(var(--primary) / ${+(.14 + .81 * a).toFixed(2)})` } : void 0, _ = /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("span", {
+			children: k[e]
+		}, e)) }) }), /* @__PURE__ */ l("tbody", { children: O.map((t, n) => /* @__PURE__ */ l("tr", { children: t.map((t, n) => {
+			if (!t) return /* @__PURE__ */ l("td", {}, n);
+			let r = f[t], i = M > 0 && r ? Math.sqrt(r / M) : 0, o = `${a(t, x, "day")}: ${m(r || 0)}`, s = e("relative grid aspect-square w-full place-items-center rounded-md text-[0.65rem] tabular-nums transition-[box-shadow]", i ? i > .6 ? "text-primary-foreground" : "text-foreground/80" : "bg-tint/[0.04] text-muted-foreground", t === _ && "ring-ring ring-2"), d = i ? { background: `oklch(var(--primary) / ${+(.14 + .81 * i).toFixed(2)})` } : void 0, p = /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("span", {
 				"aria-hidden": !0,
-				children: Number(t.slice(8))
-			}), /* @__PURE__ */ c("span", {
+				children: S.format(Number(t.slice(8)))
+			}), /* @__PURE__ */ l("span", {
 				className: "sr-only",
 				children: o
 			})] });
-			return /* @__PURE__ */ c("td", {
+			return /* @__PURE__ */ l("td", {
 				title: o,
 				className: "p-0",
-				children: h ? /* @__PURE__ */ c("button", {
+				children: g ? /* @__PURE__ */ l("button", {
 					type: "button",
-					"aria-pressed": t === g,
-					onClick: () => h(t),
-					className: e(u, "focus-visible:ring-ring/60 cursor-pointer outline-hidden hover:shadow-[0_0_0_1px_oklch(var(--tint)/0.3)] focus-visible:ring-2"),
-					style: m,
-					children: _
-				}) : /* @__PURE__ */ c("span", {
-					className: u,
-					style: m,
-					children: _
+					"aria-pressed": t === _,
+					onClick: () => g(t),
+					className: e(s, " cursor-pointer outline-hidden hover:shadow-[0_0_0_1px_oklch(var(--tint)/0.3)] focus-ring"),
+					style: d,
+					children: p
+				}) : /* @__PURE__ */ l("span", {
+					className: s,
+					style: d,
+					children: p
 				})
 			}, t);
 		}) }, n)) })]
 	});
 }
 //#endregion
-export { u as default };
+export { d 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,90 @@
+//#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.
+ * `onItemsChange` gets the items with every step of a change; `onItemsChangeEnd`, once
+ * it's made, with the items before it, for undo or saving.
+ */
+export declare function Canvas<T extends CanvasItemRect>({ width, height, scale, items, onItemsChange, onItemsChangeEnd, selected, onSelectedChange, minSize, snap, grid, className, style, children, onPointerDown, ref, ...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 ComponentProps<'div'> {
+    /** 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. */
+    onItemsChange: (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. */
+    onItemsChangeEnd?: (items: T[], before: readonly T[]) => void;
+    /** The selected items' ids. */
+    selected?: readonly string[];
+    onSelectedChange?: (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":"AAGA,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,aAAa,EACb,gBAAgB,EAChB,QAAa,EACb,gBAAgB,EAChB,OAAW,EACX,IAAY,EACZ,IAAI,EACJ,SAAS,EACT,KAAK,EACL,QAAQ,EACR,aAAa,EACb,GAAG,EACH,GAAG,IAAI,EACV,EAAE,WAAW,CAAC,CAAC,CAAC,+BAwUhB;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,cAAc,CAAC,KAAK,CAAC;IACjG,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,aAAa,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IACpC,mHAAmH;IACnH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,KAAK,IAAI,CAAC;IAC9D,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC7B,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3C,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,305 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { useMergedRefs as t } from "../utils/refs.js";
+import { useMessages as n } from "../locale-provider/index.js";
+import { boundsOf as r, intersects as i, moveRect as a, resizeRect as o } from "./geometry.js";
+import { createContext as s, useContext as c, useEffect as l, useId as u, useLayoutEffect as d, useRef as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region packages/canvas/index.tsx
+var g = typeof window > "u" ? l : d, _ = 3, ee = "input, textarea, select, button, a[href], [contenteditable=\"\"], [contenteditable=\"true\"], [data-canvas-no-drag]", v = [
+	"nw",
+	"n",
+	"ne",
+	"e",
+	"se",
+	"s",
+	"sw",
+	"w"
+], y = {
+	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"
+}, b = {
+	ArrowLeft: [-1, 0],
+	ArrowRight: [1, 0],
+	ArrowUp: [0, -1],
+	ArrowDown: [0, 1]
+}, x = (e, t) => e.x === t.x && e.y === t.y && e.w === t.w && e.h === t.h, S = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), C = s(null);
+function w({ width: s, height: c, scale: l = 1, items: d, onItemsChange: v, onItemsChangeEnd: y, selected: w = [], onSelectedChange: T, minSize: E = 8, snap: D = !1, grid: O, className: te, style: ne, children: re, onPointerDown: ie, ref: ae, ...k }) {
+	let A = n(), j = f(null), oe = t(j, ae), M = f(!1), [N, se] = p(null), [ce, P] = p([]), [F, I] = p(null), [L, R] = p(null), [le, z] = p(!1), [B, V] = p(""), H = u();
+	g(() => {
+		let e = j.current;
+		if (l !== "fit" || !e) return;
+		let t = () => e.clientWidth && se(e.clientWidth / s);
+		if (t(), typeof ResizeObserver > "u") return;
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, [l, s]);
+	let U = l === "fit" ? N ?? 1 : l, W = new Map(d.map((e) => [e.id, e])), G = {
+		width: s,
+		height: c,
+		min: E
+	}, ue = D === !1 ? 0 : (D === !0 ? 6 : D) / U, K = (e) => ({
+		others: d.filter((t) => !e.has(t.id)),
+		threshold: ue,
+		grid: O
+	}), q = (e) => {
+		S(e, w) || T?.(e);
+	}, J = (e) => d.map((t) => {
+		let n = e.get(t.id);
+		return n ? {
+			...t,
+			...n
+		} : t;
+	}), Y = (e, t, n, i) => {
+		let o = r(e), s = a(o, t, n, G, i), [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(A.resized(e, n.w, n.h)) : (n.x !== t.x || n.y !== t.y) && V(A.moved(e, n.x, n.y));
+	}, Z = (e, t, n) => e.length === 1 && e[0].id === t ? n : `${e.length} items`, de = (e, t, n, i) => {
+		let a = W.get(t);
+		if (e.button !== 0 || !a || a.locked && !i) return;
+		let s = e.target.closest(ee);
+		if (!i && s && s !== e.currentTarget && e.currentTarget.contains(s)) return;
+		e.preventDefault(), e.stopPropagation();
+		let c = e.shiftKey || e.metaKey || e.ctrlKey, l;
+		if (l = i ? [t] : c ? w.includes(t) ? w.filter((e) => e !== t) : [...w, t] : w.includes(t) ? [...w] : [t], q(l), M.current = !0, e.currentTarget.closest("[data-canvas-id]")?.focus({ preventScroll: !0 }), M.current = !1, !l.includes(t)) return;
+		let u = i ? [a] : l.flatMap((e) => W.get(e) ?? []).filter((e) => !e.locked);
+		if (!u.length) return;
+		let f = e.currentTarget;
+		f.setPointerCapture?.(e.pointerId);
+		let p = new Set(u.map((e) => e.id)), m = d, h = r(u), g = Z(u, t, n), b = !1, x = [...d], S = h, C = (n) => {
+			if (n.pointerId !== e.pointerId) return;
+			let [r, s] = [n.clientX - e.clientX, n.clientY - e.clientY];
+			if (!b) {
+				if (Math.hypot(r, s) < _) return;
+				b = !0, z(!0);
+			}
+			let [c, l] = [r / U, s / U], d;
+			if (i) {
+				let e = o(a, i, c, l, G, {
+					keepRatio: n.shiftKey,
+					...K(p)
+				});
+				d = {
+					rects: /* @__PURE__ */ new Map([[t, e.rect]]),
+					box: e.rect,
+					guides: e.guides
+				};
+			} else d = Y(u, c, l, K(p));
+			S = d.box, x = J(d.rects), v(x), P(d.guides), R({
+				box: d.box,
+				text: i ? `${d.box.w} × ${d.box.h}` : `${d.box.x}, ${d.box.y}`
+			});
+		}, T = (t) => {
+			f.removeEventListener("pointermove", C), f.removeEventListener("pointerup", E), f.removeEventListener("pointercancel", D), window.removeEventListener("keydown", O, !0), f.hasPointerCapture?.(e.pointerId) && f.releasePointerCapture(e.pointerId), P([]), R(null), z(!1), b && (t ? (y?.(x, m), X(g, h, S)) : (v([...m]), V(A.putBack(g))));
+		}, 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", C), f.addEventListener("pointerup", E), f.addEventListener("pointercancel", D), window.addEventListener("keydown", O, !0);
+	}, fe = (e) => {
+		if (e.button !== 0 || e.target.closest("[data-canvas-id]:not([data-locked])")) return;
+		let t = e.currentTarget, n = t.getBoundingClientRect(), r = (e) => ({
+			x: Math.min(s, Math.max(0, (e.clientX - n.left) / U)),
+			y: Math.min(c, Math.max(0, (e.clientY - n.top) / U))
+		}), a = e.shiftKey || e.metaKey || e.ctrlKey ? [...w] : [], o = r(e), l = !1, u = w;
+		t.setPointerCapture?.(e.pointerId);
+		let f = (t) => {
+			if (t.pointerId !== e.pointerId || !l && Math.hypot(t.clientX - e.clientX, t.clientY - e.clientY) < _) return;
+			l = !0;
+			let n = r(t), s = {
+				x: Math.min(o.x, n.x),
+				y: Math.min(o.y, n.y),
+				w: Math.abs(n.x - o.x),
+				h: Math.abs(n.y - o.y)
+			};
+			I(s);
+			let c = d.filter((e) => !e.locked && i(e, s)).map((e) => e.id), f = [...a, ...c.filter((e) => !a.includes(e))];
+			S(f, u) || (u = f, T?.(f));
+		}, p = (n) => {
+			n.pointerId === e.pointerId && (t.removeEventListener("pointermove", f), t.removeEventListener("pointerup", p), t.removeEventListener("pointercancel", p), I(null), n.type !== "pointercancel" && (l ? V(A.selected(u.length)) : a.length || q([])));
+		};
+		t.addEventListener("pointermove", f), t.addEventListener("pointerup", p), t.addEventListener("pointercancel", p);
+	}, pe = (e, t, n) => {
+		let i = W.get(t);
+		if (!i || e.target !== e.currentTarget) return;
+		if (e.key === "Escape") {
+			if (!w.length) return;
+			e.preventDefault(), q([]);
+			return;
+		}
+		if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "a") {
+			e.preventDefault();
+			let t = d.filter((e) => !e.locked).map((e) => e.id);
+			q(t), V(A.selected(t.length));
+			return;
+		}
+		let a = b[e.key];
+		if (!a) return;
+		e.preventDefault();
+		let s = e.shiftKey ? 10 : 1, [c, l] = [a[0] * s, a[1] * s], u = (w.includes(t) ? w : [t]).flatMap((e) => W.get(e) ?? []).filter((e) => !e.locked), f = e.altKey ? u.filter((e) => e.id === t) : u;
+		if (!f.length) return;
+		let p = e.altKey ? /* @__PURE__ */ new Map([[t, o(i, "se", c, l, G).rect]]) : Y(f, c, l).rects;
+		if ([...p].every(([e, t]) => x(t, W.get(e)))) return;
+		let m = J(p);
+		v(m), y?.(m, d), X(Z(f, t, n), r(f), r([...p.values()]));
+	}, me = (e) => {
+		!M.current && !w.includes(e) && q([e]);
+	}, Q = L && {
+		left: Math.min(s * U - 28, Math.max(28, (L.box.x + L.box.w / 2) * U)),
+		top: (L.box.y + L.box.h) * U + 26 > c * U ? Math.max(4, L.box.y * U - 26) : (L.box.y + L.box.h) * U + 6
+	}, $ = le && O && O * U >= 6 ? O * U : 0;
+	return /* @__PURE__ */ h(C.Provider, {
+		value: {
+			item: (e) => W.get(e),
+			selected: w,
+			grab: de,
+			key: pe,
+			focus: me,
+			hintId: H
+		},
+		children: [
+			/* @__PURE__ */ h("div", {
+				role: "group",
+				...k,
+				ref: oe,
+				onPointerDown: (e) => {
+					ie?.(e), e.defaultPrevented || fe(e);
+				},
+				style: {
+					...ne,
+					...l === "fit" ? {
+						width: "100%",
+						aspectRatio: `${s} / ${c}`
+					} : {
+						width: s * U,
+						height: c * 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", te),
+				children: [/* @__PURE__ */ m("div", {
+					style: {
+						width: s,
+						height: c,
+						scale: String(U),
+						"--canvas-scale": U
+					},
+					className: e("absolute top-0 left-0 origin-top-left", l === "fit" && N === null && "invisible"),
+					children: re
+				}), /* @__PURE__ */ h("div", {
+					"aria-hidden": !0,
+					className: "pointer-events-none absolute inset-0",
+					children: [
+						$ > 0 && /* @__PURE__ */ m("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`
+							}
+						}),
+						ce.map((e) => /* @__PURE__ */ m("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}`)),
+						F && /* @__PURE__ */ m("span", {
+							"data-canvas-marquee": "",
+							className: "border-primary/60 bg-primary/10 absolute rounded-sm border",
+							style: {
+								left: F.x * U,
+								top: F.y * U,
+								width: F.w * U,
+								height: F.h * U
+							}
+						}),
+						Q && /* @__PURE__ */ m("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: L.text
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ m("span", {
+				id: H,
+				hidden: !0,
+				children: A.canvasHelp
+			}),
+			/* @__PURE__ */ m("span", {
+				"aria-live": "assertive",
+				className: "sr-only",
+				children: B
+			})
+		]
+	});
+}
+function T({ id: t, label: n, className: r, style: i, children: a, ...o }) {
+	let s = c(C);
+	if (!s) throw Error("<CanvasItem> must be inside <Canvas>");
+	let l = s.item(t);
+	if (!l) return null;
+	let u = s.selected.includes(t), d = u && s.selected.length === 1;
+	return /* @__PURE__ */ h("div", {
+		role: "group",
+		"aria-roledescription": l.locked ? "locked item" : "movable item",
+		"aria-label": n,
+		"aria-describedby": l.locked ? void 0 : s.hintId,
+		tabIndex: 0,
+		"data-canvas-id": t,
+		"data-selected": u || void 0,
+		"data-locked": l.locked || void 0,
+		...o,
+		onFocus: (e) => {
+			o.onFocus?.(e), e.target === e.currentTarget && s.focus(t);
+		},
+		onPointerDown: (e) => {
+			o.onPointerDown?.(e), s.grab(e, t, n);
+		},
+		onKeyDown: (e) => {
+			o.onKeyDown?.(e), s.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 && v.map((r) => /* @__PURE__ */ m("span", {
+			"aria-hidden": !0,
+			"data-handle": r,
+			onPointerDown: (e) => s.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))]", y[r])
+		}, r))]
+	});
+}
+//#endregion
+export { w as Canvas, T as CanvasItem };