@weasel-js/ui 1.2.0 → 1.3.0

package/dist/chunks/DragHandleGlyph-CJbzRigu.js

@@ -0,0 +1,47 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/DragHandleGlyph/DragHandleGlyph.tsx
+function n({ size: n = 16 }) {
+	return /* @__PURE__ */ t("svg", {
+		width: n * 8 / 16,
+		height: n,
+		viewBox: "0 0 8 16",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ e("circle", {
+				cx: "2",
+				cy: "3",
+				r: "1.1"
+			}),
+			/* @__PURE__ */ e("circle", {
+				cx: "6",
+				cy: "3",
+				r: "1.1"
+			}),
+			/* @__PURE__ */ e("circle", {
+				cx: "2",
+				cy: "8",
+				r: "1.1"
+			}),
+			/* @__PURE__ */ e("circle", {
+				cx: "6",
+				cy: "8",
+				r: "1.1"
+			}),
+			/* @__PURE__ */ e("circle", {
+				cx: "2",
+				cy: "13",
+				r: "1.1"
+			}),
+			/* @__PURE__ */ e("circle", {
+				cx: "6",
+				cy: "13",
+				r: "1.1"
+			})
+		]
+	});
+}
+//#endregion
+export { n as t };
+
+//# sourceMappingURL=DragHandleGlyph-CJbzRigu.js.map

package/dist/chunks/DragHandleGlyph-CJbzRigu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragHandleGlyph-CJbzRigu.js","names":[],"sources":["../../src/components/DragHandleGlyph/DragHandleGlyph.tsx"],"sourcesContent":["/** Props for `<DragHandleGlyph>`. */\nexport interface DragHandleGlyphProps {\n  /** Height in px; width scales with it. Default 16. */\n  size?: number;\n}\n\n/** The two-column dot grip used on anything draggable by a handle.\n *\n *  Deliberately not part of the icon register: that register is outline strokes\n *  at a fixed weight, and a grip is filled dots. Forcing it in would either\n *  break the register's rule or produce a worse glyph. */\nexport function DragHandleGlyph({ size = 16 }: DragHandleGlyphProps) {\n  return (\n    <svg\n      width={(size * 8) / 16}\n      height={size}\n      viewBox=\"0 0 8 16\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <circle cx=\"2\" cy=\"3\" r=\"1.1\" />\n      <circle cx=\"6\" cy=\"3\" r=\"1.1\" />\n      <circle cx=\"2\" cy=\"8\" r=\"1.1\" />\n      <circle cx=\"6\" cy=\"8\" r=\"1.1\" />\n      <circle cx=\"2\" cy=\"13\" r=\"1.1\" />\n      <circle cx=\"6\" cy=\"13\" r=\"1.1\" />\n    </svg>\n  );\n}\n"],"mappings":";;AAWA,SAAgB,EAAgB,EAAE,UAAO,MAA4B;AACnE,QACE,kBAAC,OAAD;EACE,OAAQ,IAAO,IAAK;EACpB,QAAQ;EACR,SAAQ;EACR,MAAK;EACL,eAAY;YALd;GAOE,kBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAI,GAAE;IAAQ,CAAA;GAChC,kBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAI,GAAE;IAAQ,CAAA;GAChC,kBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAI,GAAE;IAAQ,CAAA;GAChC,kBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAI,GAAE;IAAQ,CAAA;GAChC,kBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAK,GAAE;IAAQ,CAAA;GACjC,kBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAK,GAAE;IAAQ,CAAA;GAC7B"}

package/dist/chunks/{Field-VQwmrIna.js → Field-DrRby9vo.js}

@@ -1,10 +1,10 @@
 import { jsx as e } from "react/jsx-runtime";
 var t = {
-	field: "_field_aqiak_1",
-	label: "_label_aqiak_9",
-	hint: "_hint_aqiak_16",
-	error: "_error_aqiak_22",
-	row: "_row_aqiak_28"
+	field: "_field_do2o0_1",
+	label: "_label_do2o0_9",
+	hint: "_hint_do2o0_16",
+	error: "_error_do2o0_22",
+	row: "_row_do2o0_28"
 };
 //#endregion
 //#region src/components/Field/Field.tsx
@@ -28,4 +28,4 @@ var r = {
 //#endregion
 export { r as n, n as t };
 
-//# sourceMappingURL=Field-VQwmrIna.js.map
+//# sourceMappingURL=Field-DrRby9vo.js.map

package/dist/chunks/Field-DrRby9vo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field-DrRby9vo.js","names":[],"sources":["../../src/components/Field/Field.module.css","../../src/components/Field/Field.tsx"],"sourcesContent":[".field {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  font-family: var(--wzl-font-ui);\n  color: var(--wzl-fg);\n}\n\n.label {\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-medium);\n  color: var(--wzl-fg);\n  cursor: default;\n}\n\n.hint {\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n  line-height: 1.4;\n}\n\n.error {\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-danger);\n  line-height: 1.4;\n}\n\n.row {\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n}\n\n.row .label {\n  flex: 1;\n  min-width: 0;\n}\n","import type { ReactNode } from 'react';\nimport s from './Field.module.css';\n\n/**\n * Whether a {@link Field} stacks its label above the control or sits them\n * side by side.\n */\nexport type FieldOrientation = 'stacked' | 'row';\n\n/** Props for {@link Field}. */\nexport type FieldProps = {\n  orientation?: FieldOrientation;\n  className?: string;\n  children?: ReactNode;\n};\n\n/**\n * Layout primitive that arranges a label, control, hint, and error in the\n * canonical weasel-ui form-row shape. The control itself owns its semantics\n * (RAC `TextField`, `Checkbox`, etc.); this just paints the layout.\n *\n * Most users will instead reach for `Input` / `Checkbox` / `Switch`, which\n * compose Field internally. Use Field directly when you need a custom\n * control to sit in the same visual rhythm.\n */\nexport function Field({ orientation = 'stacked', className, children }: FieldProps) {\n  const cls = [s.field, orientation === 'row' && s.row, className].filter(Boolean).join(' ');\n  return <div className={cls}>{children}</div>;\n}\n\n/**\n * The class names {@link Field} paints its slots with, so a control composing\n * its own layout can match the same form-row rhythm.\n */\nexport const fieldClasses = {\n  root: s.field,\n  row: s.row,\n  label: s.label,\n  hint: s.hint,\n  error: s.error,\n};\n"],"mappings":";;;;;;;;;;ACyBA,SAAgB,EAAM,EAAE,iBAAc,WAAW,cAAW,eAAwB;AAElF,QAAO,kBAAC,OAAD;EAAK,WADA;GAAC,EAAE;GAAO,MAAgB,SAAS,EAAE;GAAK;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAC/D;EAAM;EAAe,CAAA;;AAO9C,IAAa,IAAe;CAC1B,MAAM,EAAE;CACR,KAAK,EAAE;CACP,OAAO,EAAE;CACT,MAAM,EAAE;CACR,OAAO,EAAE;CACV"}

package/dist/chunks/GradientEditor-BuVR6pt-.js

@@ -0,0 +1,308 @@
+import { t as e } from "./Slider-DbOt9Dji.js";
+import { t } from "./ToggleBar-1wDRwSGN.js";
+import { t as n } from "./ColorField-CSSRv3jG.js";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { fillInPoseFrame as o, fillToBoundsFrame as s, gradientGeometry as c, isGradientFill as l, sampleGradientStops as u, useActionsRegistry as d, useHandleDrag as f, useNodeOverlayFrame as p, withGradientKind as m } from "@weasel-js/core";
+import { useCallback as h, useRef as g } from "react";
+//#region src/paintGradientTrack.tsx
+var _ = {
+	angleDeg: 135,
+	stripe: 2,
+	gap: 4,
+	dim: 75
+};
+function v(e) {
+	let { gradient: t, samples: n = 16, activeRange: r, hatch: a } = e;
+	return (e) => {
+		let o = [];
+		for (let e = 0; e <= n; e++) {
+			let r = e / n;
+			o.push(`${t(r)} ${(r * 100).toFixed(1)}%`);
+		}
+		let s = `linear-gradient(to right, ${o.join(", ")})`, c = [];
+		if (r) {
+			let t = e.valueToFraction(r[0]) * 100, n = e.valueToFraction(r[1]) * 100, i = {
+				..._,
+				...a
+			}, o = `repeating-linear-gradient(${i.angleDeg}deg, transparent 0 ${i.stripe}px, var(--wzl-surface) ${i.stripe}px ${i.stripe + i.gap}px)`, s = `color-mix(in srgb, var(--wzl-surface) ${i.dim}%, transparent)`, l = `linear-gradient(${s}, ${s})`;
+			if (t > 0 && (c.push(`${l} left 0 / ${t.toFixed(2)}% 100% no-repeat`), c.push(`${o} left 0 / ${t.toFixed(2)}% 100% no-repeat`)), n < 100) {
+				let e = (100 - n).toFixed(2);
+				c.push(`${l} right 0 / ${e}% 100% no-repeat`), c.push(`${o} right 0 / ${e}% 100% no-repeat`);
+			}
+		}
+		return c.push(s), /* @__PURE__ */ i("div", { style: {
+			position: "absolute",
+			inset: 0,
+			background: c.join(", ")
+		} });
+	};
+}
+var y = {
+	root: "_root_15yko_1",
+	swatches: "_swatches_15yko_8",
+	swatch: "_swatch_15yko_8"
+}, b = [
+	{
+		value: "linear-gradient",
+		label: "Linear"
+	},
+	{
+		value: "radial-gradient",
+		label: "Radial"
+	},
+	{
+		value: "conic-gradient",
+		label: "Conic"
+	}
+], x = 2;
+function S(r) {
+	let { value: o, onInput: s, onChange: c, kindSwitch: l = !0, className: d } = r, f = o.stops, p = h((e) => ({
+		...o,
+		stops: e
+	}), [o]), g = f.map((e) => ({
+		value: e.offset,
+		color: e.color
+	})), _ = (e) => e.map((e) => ({
+		offset: e.value,
+		color: e.color
+	})), S = (e, t) => f.map((n, r) => r === e ? {
+		...n,
+		color: t
+	} : n), C = f.map((e, t) => ({
+		stop: e,
+		index: t
+	})).sort((e, t) => e.stop.offset - t.stop.offset);
+	return /* @__PURE__ */ a("div", {
+		className: [y.root, d].filter(Boolean).join(" "),
+		children: [
+			l && /* @__PURE__ */ i(t, {
+				items: b,
+				value: o.fill,
+				size: "sm",
+				ariaLabel: "Gradient kind",
+				onChange: (e) => e && c(m(o, e))
+			}),
+			/* @__PURE__ */ i(e, {
+				min: 0,
+				max: 1,
+				step: .005,
+				constraint: "free",
+				thumbs: g,
+				ariaLabel: "Gradient stops",
+				readoutPlacement: "none",
+				onInput: (e) => s?.(p(_(e))),
+				onChange: (e) => c(p(_(e))),
+				onAddThumb: (e) => ({
+					value: e,
+					color: u(f, e)
+				}),
+				onRemoveThumb: () => f.length > x,
+				renderTrack: v({
+					gradient: (e) => u(f, e),
+					samples: 32
+				})
+			}),
+			/* @__PURE__ */ i("div", {
+				className: y.swatches,
+				children: C.map(({ stop: e, index: t }) => /* @__PURE__ */ i(n, {
+					value: e.color,
+					alpha: !0,
+					"aria-label": `Stop ${t + 1} at ${Math.round(e.offset * 100)}%`,
+					className: y.swatch,
+					onInput: (e) => s?.(p(S(t, e))),
+					onChange: (e) => c(p(S(t, e)))
+				}, t))
+			})
+		]
+	});
+}
+var C = {
+	overlay: "_overlay_6yu3h_3",
+	guide: "_guide_6yu3h_13",
+	handle: "_handle_6yu3h_21"
+};
+//#endregion
+//#region src/components/GradientEditor/GradientHandles.tsx
+function w(e) {
+	let { value: t, toScreen: n, toLocal: r, onInput: a, onChange: o, width: s, height: c, className: l } = e;
+	return /* @__PURE__ */ i("svg", {
+		className: [C.overlay, l].filter(Boolean).join(" "),
+		width: s,
+		height: c,
+		children: T(t, n, r, a, o)
+	});
+}
+function T(e, t, n, o, s) {
+	let l = (e, t) => {
+		t === "input" ? o?.(e) : s(e);
+	};
+	if (e.fill === "linear-gradient") {
+		let o = t(e.from), s = t(e.to);
+		return /* @__PURE__ */ a(r, { children: [
+			/* @__PURE__ */ i(D, {
+				x1: o.x,
+				y1: o.y,
+				x2: s.x,
+				y2: s.y
+			}),
+			/* @__PURE__ */ i(O, {
+				at: o,
+				label: "Gradient start",
+				onDrag: (t, r) => l({
+					...e,
+					from: n(t)
+				}, r)
+			}),
+			/* @__PURE__ */ i(O, {
+				at: s,
+				label: "Gradient end",
+				onDrag: (t, r) => l({
+					...e,
+					to: n(t)
+				}, r)
+			})
+		] });
+	}
+	if (e.fill === "radial-gradient") {
+		let o = t(e.center), s = t({
+			x: e.center.x + e.radius,
+			y: e.center.y
+		}), c = Math.hypot(s.x - o.x, s.y - o.y);
+		return /* @__PURE__ */ a(r, { children: [
+			/* @__PURE__ */ i("circle", {
+				className: C.guide,
+				cx: o.x,
+				cy: o.y,
+				r: c
+			}),
+			/* @__PURE__ */ i(O, {
+				at: o,
+				label: "Gradient center",
+				onDrag: (t, r) => l({
+					...e,
+					center: n(t)
+				}, r)
+			}),
+			/* @__PURE__ */ i(O, {
+				at: s,
+				label: "Gradient radius",
+				onDrag: (t, r) => {
+					let i = n(t), a = Math.hypot(i.x - e.center.x, i.y - e.center.y);
+					l({
+						...e,
+						radius: Math.max(E, a)
+					}, r);
+				}
+			})
+		] });
+	}
+	let u = t(e.center), { radius: d } = c(e), f = t({
+		x: e.center.x + Math.cos(e.angle) * d,
+		y: e.center.y + Math.sin(e.angle) * d
+	});
+	return /* @__PURE__ */ a(r, { children: [
+		/* @__PURE__ */ i(D, {
+			x1: u.x,
+			y1: u.y,
+			x2: f.x,
+			y2: f.y
+		}),
+		/* @__PURE__ */ i(O, {
+			at: u,
+			label: "Gradient center",
+			onDrag: (t, r) => l({
+				...e,
+				center: n(t)
+			}, r)
+		}),
+		/* @__PURE__ */ i(O, {
+			at: f,
+			label: "Gradient angle",
+			onDrag: (t, r) => {
+				let i = n(t), a = Math.atan2(i.y - e.center.y, i.x - e.center.x);
+				l({
+					...e,
+					angle: a
+				}, r);
+			}
+		})
+	] });
+}
+var E = 1;
+function D(e) {
+	return /* @__PURE__ */ i("line", {
+		className: C.guide,
+		...e
+	});
+}
+function O({ at: e, label: t, onDrag: n }) {
+	let r = g(null), a = g(e), o = f({
+		onStart: () => {
+			a.current = e, r.current = null;
+		},
+		onMove: (e) => {
+			r.current = e, n(e, "input");
+		},
+		onEnd: (e) => {
+			let t = r.current;
+			r.current = null, t !== null && (e.type === "pointercancel" ? n(a.current, "input") : n(t, "commit"));
+		}
+	});
+	return /* @__PURE__ */ i("circle", {
+		className: C.handle,
+		cx: e.x,
+		cy: e.y,
+		r: k,
+		role: "button",
+		"aria-label": t,
+		tabIndex: 0,
+		onKeyDown: (t) => {
+			let r = t.shiftKey ? A * 10 : A, i = 0, a = 0;
+			if (t.key === "ArrowLeft") i = -r;
+			else if (t.key === "ArrowRight") i = r;
+			else if (t.key === "ArrowUp") a = -r;
+			else if (t.key === "ArrowDown") a = r;
+			else return;
+			t.preventDefault();
+			let o = {
+				x: e.x + i,
+				y: e.y + a
+			};
+			n(o, "input"), n(o, "commit");
+		},
+		...o
+	});
+}
+var k = 7, A = 1;
+//#endregion
+//#region src/components/GradientEditor/SceneGradientHandles.tsx
+function j(e) {
+	let { scene: t, containerRef: n, nodeId: r, slot: a, view: c, className: l } = e, u = d(), f = p(t, n, r, { view: c }), m = g(null), h = f ? N(M(t, r, a)) : null;
+	if (!f || !h) return null;
+	let _ = (e, t) => {
+		let n = s(e, f.box), r = a === "fill" ? "setFill" : "setStroke";
+		m.current ? m.current.update({ paint: n }) : m.current = u?.begin(r, { paint: n }) ?? null, t === "commit" && m.current && (m.current.end("commit"), m.current = null);
+	};
+	return /* @__PURE__ */ i(w, {
+		value: o(h, f.box),
+		toScreen: f.toScreen,
+		toLocal: f.toLocal,
+		width: f.width,
+		height: f.height,
+		className: l,
+		onInput: (e) => _(e, "input"),
+		onChange: (e) => _(e, "commit")
+	});
+}
+function M(e, t, n) {
+	if (t == null) return;
+	let r = e.nodes.get(t)?.data;
+	if (r) return n === "fill" ? r.fill : r.stroke?.paint;
+}
+function N(e) {
+	return l(e) ? e : null;
+}
+//#endregion
+export { v as i, w as n, S as r, j as t };
+
+//# sourceMappingURL=GradientEditor-BuVR6pt-.js.map

package/dist/chunks/GradientEditor-BuVR6pt-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientEditor-BuVR6pt-.js","names":[],"sources":["../../src/paintGradientTrack.tsx","../../src/components/GradientEditor/GradientEditor.module.css","../../src/components/GradientEditor/GradientEditor.tsx","../../src/components/GradientEditor/GradientHandles.module.css","../../src/components/GradientEditor/GradientHandles.tsx","../../src/components/GradientEditor/SceneGradientHandles.tsx"],"sourcesContent":["import type { ReactNode, CSSProperties } from 'react';\nimport type { TrackCtx } from './components/Slider';\n\n/**\n * Options for {@link paintGradientTrack}.\n *\n * `gradient` maps a normalized position along the track (0 to 1) to a CSS\n * color; `samples` is how many stops the resulting linear-gradient uses.\n * `activeRange`, given in the slider's own value units, keeps that span at\n * full strength and dims + hatches the rest.\n */\nexport type GradientTrackOpts = {\n  gradient: (t: number) => string;\n  samples?: number;\n  activeRange?: [number, number];\n  hatch?: {\n    angleDeg?: number;\n    stripe?: number;\n    gap?: number;\n    dim?: number;\n  };\n};\n\nconst DEFAULT_HATCH = { angleDeg: 135, stripe: 2, gap: 4, dim: 75 };\n\n/**\n * Builds a `Slider` `renderTrack` function that paints the track as a\n * sampled color gradient, optionally dimming and hatching the portions\n * outside an active range.\n */\nexport function paintGradientTrack(opts: GradientTrackOpts): (ctx: TrackCtx) => ReactNode {\n  const { gradient, samples = 16, activeRange, hatch } = opts;\n\n  return (ctx: TrackCtx) => {\n    const stops: string[] = [];\n    for (let i = 0; i <= samples; i++) {\n      const t = i / samples;\n      stops.push(`${gradient(t)} ${(t * 100).toFixed(1)}%`);\n    }\n    const baseGradient = `linear-gradient(to right, ${stops.join(', ')})`;\n\n    const layers: string[] = [];\n    if (activeRange) {\n      const lowPct = ctx.valueToFraction(activeRange[0]) * 100;\n      const highPct = ctx.valueToFraction(activeRange[1]) * 100;\n      const h = { ...DEFAULT_HATCH, ...hatch };\n      const stripe = `repeating-linear-gradient(${h.angleDeg}deg, transparent 0 ${h.stripe}px, var(--wzl-surface) ${h.stripe}px ${h.stripe + h.gap}px)`;\n      const dimColor = `color-mix(in srgb, var(--wzl-surface) ${h.dim}%, transparent)`;\n      const dimOverlay = `linear-gradient(${dimColor}, ${dimColor})`;\n\n      if (lowPct > 0) {\n        layers.push(`${dimOverlay} left 0 / ${lowPct.toFixed(2)}% 100% no-repeat`);\n        layers.push(`${stripe} left 0 / ${lowPct.toFixed(2)}% 100% no-repeat`);\n      }\n      if (highPct < 100) {\n        const wR = (100 - highPct).toFixed(2);\n        layers.push(`${dimOverlay} right 0 / ${wR}% 100% no-repeat`);\n        layers.push(`${stripe} right 0 / ${wR}% 100% no-repeat`);\n      }\n    }\n    layers.push(baseGradient);\n\n    const style: CSSProperties = {\n      position: 'absolute',\n      inset: 0,\n      background: layers.join(', '),\n    };\n    return <div style={style} />;\n  };\n}\n",".root {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  min-inline-size: 0;\n}\n\n.swatches {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n/* Each stop's opacity slider would otherwise stretch the row to a width no\n * properties panel has; the chip stays legible, the slider yields. */\n.swatch {\n  flex: 0 1 auto;\n  min-inline-size: 0;\n}\n","import { useCallback, type ReactElement } from 'react';\nimport {\n  sampleGradientStops,\n  withGradientKind,\n  type GradStop,\n  type GradientFill,\n  type GradientKind,\n} from '@weasel-js/core';\nimport { Slider, type Thumb } from '../Slider';\nimport { ColorField } from '../ColorField';\nimport { ToggleBar, type ToggleBarItem } from '../ToggleBar';\nimport { paintGradientTrack } from '../../paintGradientTrack';\nimport s from './GradientEditor.module.css';\n\nconst KINDS: readonly ToggleBarItem<GradientKind>[] = [\n  { value: 'linear-gradient', label: 'Linear' },\n  { value: 'radial-gradient', label: 'Radial' },\n  { value: 'conic-gradient', label: 'Conic' },\n];\n\n/** Fewer than two stops is not a gradient any renderer can ramp between. */\nconst MIN_STOPS = 2;\n\n/**\n * Props for {@link GradientEditor}. `onInput` fires throughout a gesture and\n * `onChange` once at its end.\n */\nexport interface GradientEditorProps {\n  /** The gradient being edited. */\n  value: GradientFill;\n  /**\n   * Live value during a gesture — a stop drag, a color-picker scrub. Wire\n   * it for preview; it fires many times per gesture and must not be\n   * written to history.\n   */\n  onInput?: (next: GradientFill) => void;\n  /** Committed value: one call per completed gesture. Pair with an\n   *  undoable write. */\n  onChange: (next: GradientFill) => void;\n  /** Show the linear / radial / conic switch. Default true; turn it off\n   *  when the surrounding UI already owns the kind. */\n  kindSwitch?: boolean;\n  className?: string;\n}\n\ntype StopThumb = Thumb & { color: string };\n\n/**\n * Editor for a gradient's kind and stop list.\n *\n * Geometry (`from`/`to`, `center`, `radius`, `angle`) is deliberately not\n * edited here — on a canvas that belongs on the artwork, via\n * `<GradientHandles>`. This component owns the parts with no spatial\n * meaning, so it composes into a properties panel at any width.\n *\n * Stops are addressed by their position in `value.stops`, which is never\n * reordered — dragging one stop past another leaves both indices alone, so\n * a drag can cross a neighbour without the two swapping under the pointer.\n * Rendering sorts a copy.\n */\nexport function GradientEditor(props: GradientEditorProps): ReactElement {\n  const { value, onInput, onChange, kindSwitch = true, className } = props;\n  const stops = value.stops;\n\n  const withStops = useCallback(\n    (next: GradStop[]): GradientFill => ({ ...value, stops: next }),\n    [value],\n  );\n\n  const thumbs: StopThumb[] = stops.map((stop) => ({ value: stop.offset, color: stop.color }));\n\n  const applyThumbs = (next: StopThumb[]): GradStop[] =>\n    next.map((t) => ({ offset: t.value, color: t.color }));\n\n  const setStopColor = (index: number, color: string): GradStop[] =>\n    stops.map((stop, i) => (i === index ? { ...stop, color } : stop));\n\n  // Sorted view for the swatch row, carrying each stop's real index so a\n  // recolor writes back to the right entry.\n  const ordered = stops\n    .map((stop, index) => ({ stop, index }))\n    .sort((a, b) => a.stop.offset - b.stop.offset);\n\n  return (\n    <div className={[s.root, className].filter(Boolean).join(' ')}>\n      {kindSwitch && (\n        <ToggleBar<GradientKind>\n          items={KINDS}\n          value={value.fill}\n          size=\"sm\"\n          ariaLabel=\"Gradient kind\"\n          onChange={(kind) => kind && onChange(withGradientKind(value, kind))}\n        />\n      )}\n\n      <Slider<StopThumb>\n        min={0}\n        max={1}\n        step={0.005}\n        constraint=\"free\"\n        thumbs={thumbs}\n        ariaLabel=\"Gradient stops\"\n        readoutPlacement=\"none\"\n        onInput={(next) => onInput?.(withStops(applyThumbs(next)))}\n        onChange={(next) => onChange(withStops(applyThumbs(next)))}\n        onAddThumb={(at) => ({ value: at, color: sampleGradientStops(stops, at) })}\n        onRemoveThumb={() => stops.length > MIN_STOPS}\n        renderTrack={paintGradientTrack({\n          gradient: (t) => sampleGradientStops(stops, t),\n          samples: 32,\n        })}\n      />\n\n      <div className={s.swatches}>\n        {ordered.map(({ stop, index }) => (\n          <ColorField\n            key={index}\n            value={stop.color}\n            alpha\n            aria-label={`Stop ${index + 1} at ${Math.round(stop.offset * 100)}%`}\n            className={s.swatch}\n            onInput={(hex) => onInput?.(withStops(setStopColor(index, hex)))}\n            onChange={(hex) => onChange(withStops(setStopColor(index, hex)))}\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n","/* The overlay covers the canvas but must not intercept tool input; only the\n * handles opt back into hit-testing. */\n.overlay {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n/* These sit over artwork of unknown color, not over the app's own surface,\n * so they are deliberately not themed: a themed handle disappears against\n * whatever the user painted underneath. White-on-dark reads on anything,\n * which is why every editor draws handles this way. */\n.guide {\n  fill: none;\n  stroke: #ffffff;\n  stroke-opacity: 0.7;\n  stroke-dasharray: 4 4;\n  paint-order: stroke;\n}\n\n.handle {\n  fill: #ffffff;\n  stroke: #222222;\n  stroke-width: 2;\n  cursor: grab;\n  pointer-events: auto;\n}\n\n.handle:active {\n  cursor: grabbing;\n}\n\n.handle:focus-visible {\n  outline: 2px solid var(--wzl-accent, #4a9eff);\n  outline-offset: 2px;\n}\n","import { useRef, type KeyboardEvent as ReactKeyboardEvent, type ReactElement, type ReactNode } from 'react';\nimport { useHandleDrag, gradientGeometry, type GradientFill } from '@weasel-js/core';\nimport s from './GradientHandles.module.css';\n\n/** Structural, and deliberately not exported — `Plot2D` and `CurveEditor`\n *  each publish their own `Point`, and a third would only be ambiguous at\n *  the package barrel. Consumers pass any `{ x, y }`. */\ninterface Point {\n  x: number;\n  y: number;\n}\n\n/**\n * Props for {@link GradientHandles}. `onInput` fires throughout a drag and\n * `onChange` once at its end.\n */\nexport interface GradientHandlesProps {\n  /**\n   * The gradient whose geometry these handles move, in a **resolved,\n   * isotropic** frame — one where `radius` is a length in the same units as\n   * `center.x` and a right angle is a right angle.\n   *\n   * A `units: 'bounds'` gradient is not such a frame: `x` and `y` are\n   * fractions of two different lengths, so a circle there is an ellipse on\n   * screen and polar math silently mixes scales. Resolve it first with\n   * `fillInPoseFrame(fill, box)` and convert edits back with\n   * `fillToBoundsFrame(next, box)`.\n   */\n  value: GradientFill;\n  /**\n   * Gradient space → overlay pixels. For a `units: 'local'` gradient this\n   * is the node's local-to-screen transform; for `'world'`, the view.\n   */\n  toScreen: (p: Point) => Point;\n  /** Overlay pixels → gradient space. Must invert `toScreen`. */\n  toLocal: (p: Point) => Point;\n  /** Live during a drag — wire for preview, do not write to history. */\n  onInput?: (next: GradientFill) => void;\n  /** Committed at drag end: one call per gesture. */\n  onChange: (next: GradientFill) => void;\n  /** Overlay size in CSS pixels. */\n  width: number;\n  height: number;\n  className?: string;\n}\n\n/**\n * Direct-manipulation handles for a gradient's geometry, drawn as an SVG\n * overlay above a canvas: endpoints for linear, center and radius for\n * radial, center and angle arm for conic.\n *\n * Positioning is entirely the consumer's `toScreen` / `toLocal` — this\n * component never sees a view or a scene node, so the same handles serve a\n * node-local gradient, a world-space one, and a plain unzoomed preview.\n *\n * The overlay ignores pointer events except on the handles themselves, so\n * it can sit over live canvas content without swallowing tool input.\n */\nexport function GradientHandles(props: GradientHandlesProps): ReactElement {\n  const { value, toScreen, toLocal, onInput, onChange, width, height, className } = props;\n\n  return (\n    <svg\n      className={[s.overlay, className].filter(Boolean).join(' ')}\n      width={width}\n      height={height}\n    >\n      {renderForKind(value, toScreen, toLocal, onInput, onChange)}\n    </svg>\n  );\n}\n\nfunction renderForKind(\n  value: GradientFill,\n  toScreen: (p: Point) => Point,\n  toLocal: (p: Point) => Point,\n  onInput: ((next: GradientFill) => void) | undefined,\n  onChange: (next: GradientFill) => void,\n): ReactNode {\n  const emit = (next: GradientFill, phase: 'input' | 'commit'): void => {\n    if (phase === 'input') onInput?.(next);\n    else onChange(next);\n  };\n\n  if (value.fill === 'linear-gradient') {\n    const from = toScreen(value.from);\n    const to = toScreen(value.to);\n    return (\n      <>\n        <Guide x1={from.x} y1={from.y} x2={to.x} y2={to.y} />\n        <DragPoint\n          at={from}\n          label=\"Gradient start\"\n          onDrag={(p, phase) => emit({ ...value, from: toLocal(p) }, phase)}\n        />\n        <DragPoint\n          at={to}\n          label=\"Gradient end\"\n          onDrag={(p, phase) => emit({ ...value, to: toLocal(p) }, phase)}\n        />\n      </>\n    );\n  }\n\n  if (value.fill === 'radial-gradient') {\n    const center = toScreen(value.center);\n    // The radius handle rides the +x axis of gradient space, so it stays on\n    // the drawn circle under a rotated or anisotropic transform.\n    const edge = toScreen({ x: value.center.x + value.radius, y: value.center.y });\n    const screenRadius = Math.hypot(edge.x - center.x, edge.y - center.y);\n    return (\n      <>\n        <circle className={s.guide} cx={center.x} cy={center.y} r={screenRadius} />\n        <DragPoint\n          at={center}\n          label=\"Gradient center\"\n          onDrag={(p, phase) => emit({ ...value, center: toLocal(p) }, phase)}\n        />\n        <DragPoint\n          at={edge}\n          label=\"Gradient radius\"\n          onDrag={(p, phase) => {\n            const local = toLocal(p);\n            const radius = Math.hypot(local.x - value.center.x, local.y - value.center.y);\n            emit({ ...value, radius: Math.max(MIN_RADIUS, radius) }, phase);\n          }}\n        />\n      </>\n    );\n  }\n\n  const center = toScreen(value.center);\n  const { radius } = gradientGeometry(value);\n  const tip = toScreen({\n    x: value.center.x + Math.cos(value.angle) * radius,\n    y: value.center.y + Math.sin(value.angle) * radius,\n  });\n  return (\n    <>\n      <Guide x1={center.x} y1={center.y} x2={tip.x} y2={tip.y} />\n      <DragPoint\n        at={center}\n        label=\"Gradient center\"\n        onDrag={(p, phase) => emit({ ...value, center: toLocal(p) }, phase)}\n      />\n      <DragPoint\n        at={tip}\n        label=\"Gradient angle\"\n        onDrag={(p, phase) => {\n          const local = toLocal(p);\n          const angle = Math.atan2(local.y - value.center.y, local.x - value.center.x);\n          emit({ ...value, angle }, phase);\n        }}\n      />\n    </>\n  );\n}\n\n/** A radius of zero divides by zero in the shader's `t`; keep it off the floor. */\nconst MIN_RADIUS = 1;\n\nfunction Guide(props: { x1: number; y1: number; x2: number; y2: number }): ReactElement {\n  return <line className={s.guide} {...props} />;\n}\n\nfunction DragPoint({\n  at,\n  label,\n  onDrag,\n}: {\n  at: Point;\n  label: string;\n  onDrag: (p: Point, phase: 'input' | 'commit') => void;\n}): ReactElement {\n  // `useHandleDrag` reports the pointer on move but not on end, so the last\n  // position is held here to commit with. It stays null until the pointer\n  // actually moves: a press that never moves must not write anything.\n  const last = useRef<Point | null>(null);\n  const start = useRef<Point>(at);\n  const drag = useHandleDrag<SVGCircleElement>({\n    onStart: () => {\n      start.current = at;\n      last.current = null;\n    },\n    onMove: (p) => {\n      last.current = p;\n      onDrag(p, 'input');\n    },\n    onEnd: (e) => {\n      const moved = last.current;\n      last.current = null;\n      if (moved === null) return;\n      // A canceled pointer is not an edit — put the live preview back where\n      // the gesture started rather than committing where it was abandoned.\n      if (e.type === 'pointercancel') onDrag(start.current, 'input');\n      else onDrag(moved, 'commit');\n    },\n  });\n  const onKeyDown = (e: ReactKeyboardEvent<SVGCircleElement>): void => {\n    const amount = e.shiftKey ? KEY_STEP * 10 : KEY_STEP;\n    let dx = 0;\n    let dy = 0;\n    if (e.key === 'ArrowLeft') dx = -amount;\n    else if (e.key === 'ArrowRight') dx = amount;\n    else if (e.key === 'ArrowUp') dy = -amount;\n    else if (e.key === 'ArrowDown') dy = amount;\n    else return;\n    e.preventDefault();\n    const next = { x: at.x + dx, y: at.y + dy };\n    onDrag(next, 'input');\n    onDrag(next, 'commit');\n  };\n  return (\n    <circle\n      className={s.handle}\n      cx={at.x}\n      cy={at.y}\n      r={HANDLE_RADIUS}\n      // Not `slider`: the handle carries a 2-D position, not one value, so\n      // it has no `aria-valuenow` to honor the role's contract with.\n      role=\"button\"\n      aria-label={label}\n      tabIndex={0}\n      onKeyDown={onKeyDown}\n      {...drag}\n    />\n  );\n}\n\nconst HANDLE_RADIUS = 7;\n\n/** One arrow-key step, in overlay pixels. */\nconst KEY_STEP = 1;\n","import { useRef, type ReactElement, type RefObject } from 'react';\nimport {\n  fillInPoseFrame,\n  fillToBoundsFrame,\n  isGradientFill,\n  useActionsRegistry,\n  useNodeOverlayFrame,\n  type FillStyle,\n  type GradientFill,\n  type RectPose,\n  type Scene,\n  type Stroke,\n  type UiOngoingControl,\n  type View,\n} from '@weasel-js/core';\nimport { GradientHandles } from './GradientHandles';\n\n/** The paint slots a node carries. Either may hold a gradient, and each has\n *  its own action, so the overlay is told which one it is editing. */\nexport type PaintSlot = 'fill' | 'stroke';\n\n/** What `SceneGradientHandles` reads off a node. Every field is optional, so\n *  any richer app data shape satisfies it. */\nexport interface PaintedNodeData {\n  fill?: FillStyle | null;\n  stroke?: Stroke | null;\n}\n\nexport interface SceneGradientHandlesProps<\n  TData extends PaintedNodeData,\n  TLayer extends string,\n  TPose extends RectPose,\n> {\n  scene: Scene<TData, TLayer, TPose>;\n  /** The element the overlay is positioned in. Must be the canvas's own box,\n   *  or the handles land somewhere other than the paint. */\n  containerRef: RefObject<HTMLElement | null>;\n  /** The node whose paint is being edited — usually the lone selected id. */\n  nodeId: string | null | undefined;\n  /** Which of the node's two paints these handles move. */\n  slot: PaintSlot;\n  /** Current viewport; a thunk is re-read per projection. See\n   *  `useNodeOverlayFrame`. */\n  view?: View | (() => View);\n  className?: string;\n}\n\n/**\n * Scene-aware `GradientHandles`: on-canvas geometry handles for the gradient\n * in one node's `fill` or `stroke`, committed through the `setFill` /\n * `setStroke` actions as a single undo entry per drag.\n *\n * Renders nothing unless the targeted slot holds a gradient. The node stores\n * its gradient in `units: 'bounds'` — fractions of its own box, so the paint\n * survives pan, zoom and resize — which is not a frame polar math can work\n * in; the handles get it resolved onto the box and every edit is normalized\n * back on the way out.\n *\n * `slot` is a prop rather than state the kit keeps: an app that edits fill\n * and stroke separately already knows which one has focus.\n */\nexport function SceneGradientHandles<\n  TData extends PaintedNodeData,\n  TLayer extends string,\n  TPose extends RectPose,\n>(props: SceneGradientHandlesProps<TData, TLayer, TPose>): ReactElement | null {\n  const { scene, containerRef, nodeId, slot, view, className } = props;\n  const actions = useActionsRegistry();\n  const frame = useNodeOverlayFrame(scene, containerRef, nodeId, { view });\n  const ctrlRef = useRef<UiOngoingControl | null>(null);\n\n  const gradient = frame ? gradientInSlot(paintOf(scene, nodeId, slot)) : null;\n  if (!frame || !gradient) return null;\n\n  const dispatch = (next: GradientFill, phase: 'input' | 'commit'): void => {\n    const paint = fillToBoundsFrame(next, frame.box);\n    const id = slot === 'fill' ? 'setFill' : 'setStroke';\n    if (!ctrlRef.current) ctrlRef.current = actions?.begin(id, { paint }) ?? null;\n    else ctrlRef.current.update({ paint });\n    if (phase === 'commit' && ctrlRef.current) {\n      ctrlRef.current.end('commit');\n      ctrlRef.current = null;\n    }\n  };\n\n  return (\n    <GradientHandles\n      value={fillInPoseFrame(gradient, frame.box) as GradientFill}\n      toScreen={frame.toScreen}\n      toLocal={frame.toLocal}\n      width={frame.width}\n      height={frame.height}\n      className={className}\n      onInput={(next) => dispatch(next, 'input')}\n      onChange={(next) => dispatch(next, 'commit')}\n    />\n  );\n}\n\nfunction paintOf<TData extends PaintedNodeData, TLayer extends string, TPose extends RectPose>(\n  scene: Scene<TData, TLayer, TPose>,\n  nodeId: string | null | undefined,\n  slot: PaintSlot,\n): FillStyle | null | undefined {\n  if (nodeId == null) return undefined;\n  const data = (scene.nodes as ReadonlyMap<string, { data: TData }>).get(nodeId)?.data;\n  if (!data) return undefined;\n  return slot === 'fill' ? data.fill : data.stroke?.paint;\n}\n\nfunction gradientInSlot(paint: FillStyle | null | undefined): GradientFill | null {\n  return isGradientFill(paint) ? paint : null;\n}\n"],"mappings":"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"}

package/dist/chunks/InlineRange-B-Jkv8AA.js

@@ -0,0 +1,24 @@
+import { jsx as e } from "react/jsx-runtime";
+import "react";
+var t = { range: "_range_2rfxw_7" };
+//#endregion
+//#region src/components/InlineRange/InlineRange.tsx
+function n(n) {
+	let { value: r, min: i = 0, max: a = 100, className: o, style: s, ...c } = n, l = a - i, u = l > 0 ? (Math.min(Math.max(r, i), a) - i) / l * 100 : 0;
+	return /* @__PURE__ */ e("input", {
+		...c,
+		type: "range",
+		value: r,
+		min: i,
+		max: a,
+		className: [t.range, o].filter(Boolean).join(" "),
+		style: {
+			"--slider-fill": `${u}%`,
+			...s
+		}
+	});
+}
+//#endregion
+export { n as t };
+
+//# sourceMappingURL=InlineRange-B-Jkv8AA.js.map

package/dist/chunks/InlineRange-B-Jkv8AA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineRange-B-Jkv8AA.js","names":[],"sources":["../../src/components/InlineRange/InlineRange.module.css","../../src/components/InlineRange/InlineRange.tsx"],"sourcesContent":["/* The track is painted here rather than left to `accent-color`. A UA fills\n   the left of the track with the accent but draws the remainder near-white on\n   a dark surface whatever `color-scheme` says, and overriding the track's\n   background removes the accent fill instead of recolouring the remainder —\n   so the whole track is ours. `--slider-fill` carries the value, since no\n   static rule expresses \"filled to N%\". */\n.range {\n  flex: 1;\n  min-inline-size: 48px;\n  appearance: none;\n  -webkit-appearance: none;\n  block-size: 4px;\n  border-radius: var(--wzl-radius-pill);\n  background: linear-gradient(\n    to right,\n    var(--wzl-accent) 0 var(--slider-fill, 0%),\n    var(--wzl-border-strong) var(--slider-fill, 0%) 100%\n  );\n  cursor: pointer;\n}\n\n.range::-webkit-slider-thumb {\n  appearance: none;\n  -webkit-appearance: none;\n  inline-size: 12px;\n  block-size: 12px;\n  border-radius: 50%;\n  background: var(--wzl-accent);\n}\n\n.range::-moz-range-thumb {\n  inline-size: 12px;\n  block-size: 12px;\n  border: none;\n  border-radius: 50%;\n  background: var(--wzl-accent);\n}\n\n.range:focus-visible {\n  outline: 2px solid var(--wzl-accent);\n  outline-offset: 2px;\n}\n\n.range:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n","import { type CSSProperties, type InputHTMLAttributes, type ReactElement } from 'react';\nimport s from './InlineRange.module.css';\n\n/** Props for {@link InlineRange} — a range input's, with `value` required. */\nexport type InlineRangeProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'type' | 'value' | 'min' | 'max'\n> & {\n  value: number;\n  min?: number;\n  max?: number;\n};\n\n/**\n * Compact range input for a property row: one track, no label, no output.\n *\n * Distinct from the kit's other two — `Slider` is shaped for canvas scrubbing,\n * and `RangeSlider` is a full-width labelled form control on React Aria. This\n * one exists to sit inline beside a swatch or a readout, and to own the track\n * painting both of those surfaces need.\n */\nexport function InlineRange(props: InlineRangeProps): ReactElement {\n  const { value, min = 0, max = 100, className, style, ...rest } = props;\n  const span = max - min;\n  const filled = span > 0 ? ((Math.min(Math.max(value, min), max) - min) / span) * 100 : 0;\n  return (\n    <input\n      {...rest}\n      type=\"range\"\n      value={value}\n      min={min}\n      max={max}\n      className={[s.range, className].filter(Boolean).join(' ')}\n      style={{ ['--slider-fill' as string]: `${filled}%`, ...style } as CSSProperties}\n    />\n  );\n}\n"],"mappings":";;;;;ACqBA,SAAgB,EAAY,GAAuC;CACjE,IAAM,EAAE,UAAO,SAAM,GAAG,SAAM,KAAK,cAAW,UAAO,GAAG,MAAS,GAC3D,IAAO,IAAM,GACb,IAAS,IAAO,KAAM,KAAK,IAAI,KAAK,IAAI,GAAO,EAAI,EAAE,EAAI,GAAG,KAAO,IAAQ,MAAM;AACvF,QACE,kBAAC,SAAD;EACE,GAAI;EACJ,MAAK;EACE;EACF;EACA;EACL,WAAW,CAAC,EAAE,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EACzD,OAAO;GAAG,iBAA4B,GAAG,EAAO;GAAI,GAAG;GAAO;EAC9D,CAAA"}

package/dist/chunks/Input-BnxOPY4N.js

@@ -0,0 +1,55 @@
+import { n as e } from "./Field-DrRby9vo.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+import { FieldError as i, Input as a, Label as o, Text as s, TextField as c } from "react-aria-components";
+var l = {
+	field: "_field_zwx85_1",
+	frame: "_frame_zwx85_9",
+	adornment: "_adornment_zwx85_54"
+}, u = r(function(r, u) {
+	let { label: d, description: f, errorMessage: p, placeholder: m, leadingAdornment: h, trailingAdornment: g, className: _, ...v } = r;
+	return /* @__PURE__ */ n(c, {
+		...v,
+		className: [
+			l.field,
+			e.root,
+			_
+		].filter(Boolean).join(" "),
+		children: [
+			d !== void 0 && /* @__PURE__ */ t(o, {
+				className: e.label,
+				children: d
+			}),
+			/* @__PURE__ */ n("div", {
+				className: l.frame,
+				children: [
+					h !== void 0 && /* @__PURE__ */ t("span", {
+						className: l.adornment,
+						children: h
+					}),
+					/* @__PURE__ */ t(a, {
+						ref: u,
+						placeholder: m
+					}),
+					g !== void 0 && /* @__PURE__ */ t("span", {
+						className: l.adornment,
+						children: g
+					})
+				]
+			}),
+			f !== void 0 && /* @__PURE__ */ t(s, {
+				slot: "description",
+				className: e.hint,
+				children: f
+			}),
+			/* @__PURE__ */ t(i, {
+				className: e.error,
+				children: p
+			})
+		]
+	});
+});
+//#endregion
+export { u as t };
+
+//# sourceMappingURL=Input-BnxOPY4N.js.map

package/dist/chunks/Input-BnxOPY4N.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input-BnxOPY4N.js","names":[],"sources":["../../src/components/Input/Input.module.css","../../src/components/Input/Input.tsx"],"sourcesContent":[".field {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  gap: 4px;\n}\n\n.frame {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: var(--wzl-control-h);\n  padding: 0 8px;\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size);\n  line-height: 1;\n  transition: border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.frame:focus-within {\n  border-color: var(--wzl-focus-ring);\n  box-shadow: 0 0 0 1px var(--wzl-focus-ring);\n}\n\n.field[data-invalid] .frame {\n  border-color: var(--wzl-danger);\n}\n\n.field[data-disabled] .frame {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.frame input {\n  flex: 1;\n  min-width: 0;\n  background: transparent;\n  border: none;\n  outline: none;\n  color: inherit;\n  font: inherit;\n  padding: 0;\n}\n\n.frame input::placeholder {\n  color: var(--wzl-fg-subtle);\n}\n\n.adornment {\n  display: inline-flex;\n  align-items: center;\n  color: var(--wzl-fg-subtle);\n  font-size: var(--wzl-font-size-sm);\n  pointer-events: none;\n}\n","import { forwardRef, type ReactNode, type Ref } from 'react';\nimport {\n  TextField,\n  Label,\n  Input as RACInput,\n  Text,\n  FieldError,\n  type TextFieldProps as RACTextFieldProps,\n  type ValidationResult,\n} from 'react-aria-components';\nimport { fieldClasses } from '../Field/Field';\nimport s from './Input.module.css';\n\n/** Props for {@link Input}, on top of React Aria's `TextField` props. */\nexport type InputProps = Omit<RACTextFieldProps, 'children' | 'className'> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n  placeholder?: string;\n  leadingAdornment?: ReactNode;\n  trailingAdornment?: ReactNode;\n  className?: string;\n};\n\n/**\n * Single-line text input wrapping React Aria's TextField. Supplies a\n * default skin against the `--wzl-*` token system, and exposes the\n * familiar label / description / errorMessage / adornment slot shape.\n *\n * `ref` forwards to the underlying `<input>`.\n */\nexport const Input = forwardRef(function Input(\n  props: InputProps,\n  ref: Ref<HTMLInputElement>,\n) {\n  const {\n    label,\n    description,\n    errorMessage,\n    placeholder,\n    leadingAdornment,\n    trailingAdornment,\n    className,\n    ...textFieldProps\n  } = props;\n\n  return (\n    <TextField {...textFieldProps} className={[s.field, fieldClasses.root, className].filter(Boolean).join(' ')}>\n      {label !== undefined && <Label className={fieldClasses.label}>{label}</Label>}\n      <div className={s.frame}>\n        {leadingAdornment !== undefined && <span className={s.adornment}>{leadingAdornment}</span>}\n        <RACInput ref={ref} placeholder={placeholder} />\n        {trailingAdornment !== undefined && <span className={s.adornment}>{trailingAdornment}</span>}\n      </div>\n      {description !== undefined && (\n        <Text slot=\"description\" className={fieldClasses.hint}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={fieldClasses.error}>{errorMessage}</FieldError>\n    </TextField>\n  );\n});\n"],"mappings":";;;;;;;;GC+Ba,IAAQ,EAAW,SAC9B,GACA,GACA;CACA,IAAM,EACJ,UACA,gBACA,iBACA,gBACA,qBACA,sBACA,cACA,GAAG,MACD;AAEJ,QACE,kBAAC,GAAD;EAAW,GAAI;EAAgB,WAAW;GAAC,EAAE;GAAO,EAAa;GAAM;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAA3G;GACG,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAa;cAAQ;IAAc,CAAA;GAC7E,kBAAC,OAAD;IAAK,WAAW,EAAE;cAAlB;KACG,MAAqB,KAAA,KAAa,kBAAC,QAAD;MAAM,WAAW,EAAE;gBAAY;MAAwB,CAAA;KAC1F,kBAAC,GAAD;MAAe;MAAkB;MAAe,CAAA;KAC/C,MAAsB,KAAA,KAAa,kBAAC,QAAD;MAAM,WAAW,EAAE;gBAAY;MAAyB,CAAA;KACxF;;GACL,MAAgB,KAAA,KACf,kBAAC,GAAD;IAAM,MAAK;IAAc,WAAW,EAAa;cAC9C;IACI,CAAA;GAET,kBAAC,GAAD;IAAY,WAAW,EAAa;cAAQ;IAA0B,CAAA;GAC5D;;EAEd"}

package/dist/chunks/{Keycaps-CFX7UAj8.js → Keycaps-Dk33JOiH.js}

@@ -1,10 +1,10 @@
-import { Fragment as e } from "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { Fragment as n } from "react";
 var r = {
-	keys: "_keys_n4bkk_2",
-	keysEmpty: "_keysEmpty_n4bkk_16",
-	sep: "_sep_n4bkk_20",
-	key: "_key_n4bkk_2"
+	keys: "_keys_1cdok_2",
+	keysEmpty: "_keysEmpty_1cdok_16",
+	sep: "_sep_1cdok_20",
+	key: "_key_1cdok_2"
 }, i = new Set([
 	"⌘",
 	"⇪",
@@ -19,24 +19,24 @@ var r = {
 function o(e) {
 	return i.has(e) ? "modifier" : a.has(e) || e.length > 1 ? "wide" : "square";
 }
-function s({ label: e, inverted: n = !1, variant: i = "default", className: a, style: s, font: c }) {
+function s({ label: t, inverted: n = !1, variant: i = "default", className: a, style: s, font: c }) {
 	let l = c ? {
 		...s,
 		fontFamily: c
 	} : s;
-	return /* @__PURE__ */ t("kbd", {
+	return /* @__PURE__ */ e("kbd", {
 		className: [r.key, a].filter(Boolean).join(" "),
-		"data-kind": o(e),
+		"data-kind": o(t),
 		"data-variant": i === "default" ? void 0 : i,
 		"data-inverted": n || void 0,
 		style: l,
-		children: e
+		children: t
 	});
 }
 //#endregion
 //#region src/components/Keycaps/Keycaps.tsx
 function c({ keys: i, separator: a = "+", variant: c = "default", font: l, className: u }) {
-	if (!i || i.length === 0) return /* @__PURE__ */ t("span", {
+	if (!i || i.length === 0) return /* @__PURE__ */ e("span", {
 		className: [r.keysEmpty, u].filter(Boolean).join(" "),
 		children: "—"
 	});
@@ -44,12 +44,12 @@ function c({ keys: i, separator: a = "+", variant: c = "default", font: l, class
 		k: e,
 		i: t
 	})).sort((e, t) => (o(e.k.label) === "modifier" ? 0 : 1) - (o(t.k.label) === "modifier" ? 0 : 1) || e.i - t.i).map(({ k: e }) => e), f = d.findIndex((e) => o(e.label) !== "modifier"), p = !!a && f > 0 && f < d.length;
-	return /* @__PURE__ */ t("span", {
+	return /* @__PURE__ */ e("span", {
 		className: [r.keys, u].filter(Boolean).join(" "),
-		children: d.map((i, o) => /* @__PURE__ */ n(e, { children: [p && o === f ? /* @__PURE__ */ t("span", {
+		children: d.map((i, o) => /* @__PURE__ */ t(n, { children: [p && o === f ? /* @__PURE__ */ e("span", {
 			className: r.sep,
 			children: a
-		}) : null, /* @__PURE__ */ t(s, {
+		}) : null, /* @__PURE__ */ e(s, {
 			label: i.label,
 			inverted: i.optional ?? !1,
 			variant: c,
@@ -394,4 +394,4 @@ function p(e, t = {}) {
 //#endregion
 export { s as a, c as i, p as n, o, d as r, u as t };
 
-//# sourceMappingURL=Keycaps-CFX7UAj8.js.map
+//# sourceMappingURL=Keycaps-Dk33JOiH.js.map