@rinzai/zen 0.11.0 → 0.14.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.js

@@ -1,4 +1,3 @@
-"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));

package/dist/canvas/index.d.ts

@@ -13,10 +13,10 @@ export type { CanvasRect } from './geometry';
  * 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
+ * `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, onChange, onChangeEnd, selected, onSelect, minSize, snap, grid, className, style, children, onPointerDown, ...rest }: CanvasProps<T>): import('react').JSX.Element;
+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
@@ -29,7 +29,7 @@ export interface CanvasItemRect extends CanvasRect {
     /** 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'> {
+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;
@@ -38,12 +38,12 @@ export interface CanvasProps<T extends CanvasItemRect = CanvasItemRect> extends
     /** 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;
+    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. */
-    onChangeEnd?: (items: T[], before: readonly T[]) => void;
+    onItemsChangeEnd?: (items: T[], before: readonly T[]) => void;
     /** The selected items' ids. */
     selected?: readonly string[];
-    onSelect?: (ids: string[]) => void;
+    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). */

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

@@ -1 +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"}
+{"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

@@ -1,10 +1,12 @@
 "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";
+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 m = typeof window > "u" ? s : l, h = 3, ee = "input, textarea, select, button, a[href], [contenteditable=\"\"], [contenteditable=\"true\"], [data-canvas-no-drag]", g = [
+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",
@@ -13,7 +15,7 @@ var m = typeof window > "u" ? s : l, h = 3, ee = "input, textarea, select, butto
 	"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",
@@ -22,40 +24,40 @@ var m = typeof window > "u" ? s : l, h = 3, ee = "input, textarea, select, butto
 	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 = {
+}, b = {
 	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);
+}, 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();
-	}, [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
+	}, [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) => {
-		b(e, S) || C?.(e);
-	}, J = (e) => l.map((t) => {
+		S(e, w) || T?.(e);
+	}, J = (e) => d.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];
+	}), 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,
@@ -67,142 +69,142 @@ function S({ width: a, height: o, scale: s = 1, items: l, onChange: g, onChangeE
 			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;
+		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 (!a && s && s !== e.currentTarget && e.currentTarget.contains(s)) return;
+		if (!i && 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 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(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];
+		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) < h) return;
+				if (Math.hypot(r, s) < _) 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,
+			let [c, l] = [r / U, s / U], d;
+			if (i) {
+				let e = o(a, i, c, l, G, {
+					keepRatio: n.shiftKey,
 					...K(p)
 				});
-				u = {
-					rects: /* @__PURE__ */ new Map([[n, e.rect]]),
+				d = {
+					rects: /* @__PURE__ */ new Map([[t, 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}`
+			} 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", 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.`)));
+			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", w), f.addEventListener("pointerup", E), f.addEventListener("pointercancel", D), window.addEventListener("keydown", O, !0);
-	}, se = (e) => {
+		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, 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;
+		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 || !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)
+			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)
 			};
-			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));
+			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), F(null), n.type !== "pointercancel" && (u ? V(`${d.length} ${d.length === 1 ? "item" : "items"} selected.`) : s.length || q([])));
+			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);
-	}, ce = (e, n, r) => {
-		let a = W.get(n);
-		if (!a || e.target !== e.currentTarget) return;
+	}, pe = (e, t, n) => {
+		let i = W.get(t);
+		if (!i || e.target !== e.currentTarget) return;
 		if (e.key === "Escape") {
-			if (!S.length) return;
+			if (!w.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.`);
+			let t = d.filter((e) => !e.locked).map((e) => e.id);
+			q(t), V(A.selected(t.length));
 			return;
 		}
-		let o = v[e.key];
-		if (!o) return;
+		let a = b[e.key];
+		if (!a) 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;
+		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([[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 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);
-		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, {
+		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: S,
-			grab: oe,
-			key: ce,
-			focus: le,
+			selected: w,
+			grab: de,
+			key: pe,
+			focus: me,
 			hintId: H
 		},
 		children: [
-			/* @__PURE__ */ p("div", {
-				ref: A,
+			/* @__PURE__ */ h("div", {
 				role: "group",
-				...ne,
+				...k,
+				ref: oe,
 				onPointerDown: (e) => {
-					te?.(e), e.defaultPrevented || se(e);
+					ie?.(e), e.defaultPrevented || fe(e);
 				},
 				style: {
-					...O,
-					...s === "fit" ? {
+					...ne,
+					...l === "fit" ? {
 						width: "100%",
-						aspectRatio: `${a} / ${o}`
+						aspectRatio: `${s} / ${c}`
 					} : {
-						width: a * U,
-						height: o * U
+						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", D),
-				children: [/* @__PURE__ */ f("div", {
+				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: a,
-						height: o,
+						width: s,
+						height: c,
 						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", {
+					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__ */ f("div", {
+						$ > 0 && /* @__PURE__ */ m("div", {
 							"data-canvas-grid": "",
 							className: "absolute inset-0",
 							style: {
@@ -211,7 +213,7 @@ function S({ width: a, height: o, scale: s = 1, items: l, onChange: g, onChangeE
 								backgroundPosition: `${-$ / 2}px ${-$ / 2}px`
 							}
 						}),
-						ie.map((e) => /* @__PURE__ */ f("span", {
+						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" ? {
@@ -226,31 +228,31 @@ function S({ width: a, height: o, scale: s = 1, items: l, onChange: g, onChangeE
 								height: 1
 							}
 						}, `${e.axis}${e.at}`)),
-						P && /* @__PURE__ */ f("span", {
+						F && /* @__PURE__ */ m("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
+								left: F.x * U,
+								top: F.y * U,
+								width: F.w * U,
+								height: F.h * U
 							}
 						}),
-						Q && /* @__PURE__ */ f("span", {
+						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: I.text
+							children: L.text
 						})
 					]
 				})]
 			}),
-			/* @__PURE__ */ f("span", {
+			/* @__PURE__ */ m("span", {
 				id: H,
 				hidden: !0,
-				children: "Arrow keys move the selection, Shift with them by 10. Alt with the arrow keys resizes. Escape deselects."
+				children: A.canvasHelp
 			}),
-			/* @__PURE__ */ f("span", {
+			/* @__PURE__ */ m("span", {
 				"aria-live": "assertive",
 				className: "sr-only",
 				children: B
@@ -258,30 +260,30 @@ function S({ width: a, height: o, scale: s = 1, items: l, onChange: g, onChangeE
 		]
 	});
 }
-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);
+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 = c.selected.includes(t), d = u && c.selected.length === 1;
-	return /* @__PURE__ */ p("div", {
+	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 : c.hintId,
+		"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,
-		...s,
+		...o,
 		onFocus: (e) => {
-			s.onFocus?.(e), e.target === e.currentTarget && c.focus(t);
+			o.onFocus?.(e), e.target === e.currentTarget && s.focus(t);
 		},
 		onPointerDown: (e) => {
-			s.onPointerDown?.(e), c.grab(e, t, n);
+			o.onPointerDown?.(e), s.grab(e, t, n);
 		},
 		onKeyDown: (e) => {
-			s.onKeyDown?.(e), c.key(e, t, n);
+			o.onKeyDown?.(e), s.key(e, t, n);
 		},
 		style: {
 			...i,
@@ -291,13 +293,13 @@ function C({ id: t, label: n, className: r, style: i, children: a, ...s }) {
 			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", {
+		children: [a, d && !l.locked && v.map((r) => /* @__PURE__ */ m("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])
+			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 { S as Canvas, C as CanvasItem };
+export { w as Canvas, T as CanvasItem };