@weasel-js/ui 1.5.2 → 1.6.0

package/dist/chunks/Button-DRSApvnK.js

@@ -1,90 +0,0 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-var r = {
-	button: "_button_111r2_3",
-	size_sm: "_size_sm_111r2_110",
-	size_md: "_size_md_111r2_111",
-	iconOnly: "_iconOnly_111r2_113",
-	variant_primary: "_variant_primary_111r2_121",
-	variant_secondary: "_variant_secondary_111r2_168",
-	variant_ghost: "_variant_ghost_111r2_203",
-	pressed: "_pressed_111r2_220",
-	fullWidth: "_fullWidth_111r2_228",
-	loading: "_loading_111r2_229",
-	label: "_label_111r2_229",
-	iconSlot: "_iconSlot_111r2_233",
-	spinner: "_spinner_111r2_247",
-	"wzl-btn-spin": "_wzl-btn-spin_111r2_1"
-};
-//#endregion
-//#region src/components/Button/Button.tsx
-function i() {
-	return /* @__PURE__ */ e("span", {
-		className: r.spinner,
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ t("svg", {
-			viewBox: "0 0 16 16",
-			width: "14",
-			height: "14",
-			children: [/* @__PURE__ */ e("circle", {
-				cx: "8",
-				cy: "8",
-				r: "6",
-				fill: "none",
-				stroke: "currentColor",
-				strokeWidth: "2",
-				strokeOpacity: "0.25"
-			}), /* @__PURE__ */ e("path", {
-				d: "M 8 2 A 6 6 0 0 1 14 8",
-				fill: "none",
-				stroke: "currentColor",
-				strokeWidth: "2",
-				strokeLinecap: "round"
-			})]
-		})
-	});
-}
-var a = n(function(n, a) {
-	let { variant: o = "secondary", size: s = "md", pressed: c, disabled: l, loading: u, leadingIcon: d, trailingIcon: f, fullWidth: p, iconOnly: m, ariaLabel: h, type: g = "button", className: _, style: v, children: y, onClick: b } = n;
-	return /* @__PURE__ */ t("button", {
-		ref: a,
-		type: g,
-		className: [
-			r.button,
-			r[`variant_${o}`],
-			r[`size_${s}`],
-			p && r.fullWidth,
-			c && r.pressed,
-			m && r.iconOnly,
-			u && r.loading,
-			_
-		].filter(Boolean).join(" "),
-		style: v,
-		disabled: l,
-		"aria-busy": u ? !0 : void 0,
-		"aria-pressed": c,
-		"aria-label": h,
-		onClick: b,
-		children: [
-			!m && (u || d) && /* @__PURE__ */ e("span", {
-				className: r.iconSlot,
-				children: u ? /* @__PURE__ */ e(i, {}) : d
-			}),
-			m ? u ? /* @__PURE__ */ e(i, {}) : /* @__PURE__ */ e("span", {
-				className: r.iconSlot,
-				children: y
-			}) : y !== void 0 && /* @__PURE__ */ e("span", {
-				className: r.label,
-				children: y
-			}),
-			!m && f && /* @__PURE__ */ e("span", {
-				className: r.iconSlot,
-				children: f
-			})
-		]
-	});
-});
-//#endregion
-export { a as t };
-
-//# sourceMappingURL=Button-DRSApvnK.js.map

package/dist/chunks/Button-DRSApvnK.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button-DRSApvnK.js","names":[],"sources":["../../src/components/Button/Button.module.css","../../src/components/Button/Button.tsx"],"sourcesContent":["/* Aqua-glass button. Every visual parameter is exposed as a CSS custom\n   property so the Button Lab can override per-instance via inline style. */\n.button {\n  /* ---- Tunables (with Aqua-biased defaults) ---- */\n  /* Corner radius = 10% of the button's height (the shorter axis on every\n     realistic button shape). Using calc against --btn-height keeps the\n     corners circular rather than elliptical, which a % value would\n     otherwise produce on a wide-but-short pill. */\n  --btn-radius:       calc(var(--btn-height) * 0.1);\n  --btn-fontweight:   var(--wzl-font-weight-medium);\n  --btn-fontsize:     var(--wzl-font-size);\n  --btn-height:       var(--wzl-control-h);\n  --btn-padx:         var(--wzl-space-6);\n\n  /* Body gradient — alpha-laced top, opaque bottom. Percentages are\n     \"color-mix accent ratio\" so 45% = 45% accent + 55% transparent. */\n  --btn-top-alpha:     45%;\n  --btn-upper-alpha:   70%;\n  --btn-equator:       52%;   /* vertical position of the bright-to-deep transition */\n  --btn-equator-spread: 12%;  /* half-width of the equator transition band */\n  --btn-equator-tint:  95%;   /* accent vs white at equator */\n  --btn-base-tint:     70%;   /* accent vs black at base */\n  --btn-blur:          6px;\n  --btn-saturate:      1.3;\n\n  /* Specular gloss (::before) */\n  --btn-gloss-top:     0.42;\n  --btn-gloss-mid:     0.12;\n  --btn-gloss-bottom:  50%;   /* inset from bottom — 50% = upper hemisphere */\n\n  /* 3D shadows */\n  --btn-rim:          0.22;\n  --btn-drop-near:    0.30;\n  --btn-drop-far:     0.18;\n  --btn-inset-hi:     0.42;\n  --btn-inset-lo:     0.3;\n\n  /* Text — main shadow + a second engraving shadow you can angle.\n     `inset-x` / `inset-y` are pre-projected offsets from `inset-angle` so\n     the lab can drive them with a single slider. */\n  --btn-text-shadow:    0.35;\n  --btn-text-inset:     0.55;\n  --btn-text-inset-x:   0px;\n  --btn-text-inset-y:   1px;\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--wzl-space-3);\n  border: none;\n  border-radius: var(--btn-radius);\n  font-family: var(--wzl-font-ui);\n  font-weight: var(--btn-fontweight);\n  font-style: normal;\n  font-size: var(--btn-fontsize);\n  height: var(--btn-height);\n  padding: 0 var(--btn-padx);\n  line-height: 1;\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n  isolation: isolate;\n  overflow: hidden;\n  transition: filter var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast), transform 80ms;\n}\n\n/* Specular gloss — covers the upper hemisphere of the pill with a bright\n   white sheen that fades to nothing by the equator. The single detail that\n   sells the glass-cylinder illusion. */\n.button::before {\n  content: '';\n  position: absolute;\n  inset: 1px 1px var(--btn-gloss-bottom) 1px;\n  /* Top corners hug the button's outline; bottom corners are flat so the\n     gloss terminates in a straight line at the equator rather than two\n     little arcs that read as `)(` brackets at smaller radii. */\n  border-top-left-radius: var(--btn-radius);\n  border-top-right-radius: var(--btn-radius);\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, var(--btn-gloss-top)) 0%,\n    rgba(255, 255, 255, var(--btn-gloss-mid)) 60%,\n    rgba(255, 255, 255, 0) 100%\n  );\n  pointer-events: none;\n  z-index: 1;\n  transition: opacity var(--wzl-motion-fast);\n}\n\n.button > * {\n  position: relative;\n  z-index: 2;\n}\n\n.button:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: 1px;\n}\n\n.button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* ---------- Sizes — set defaults for the custom props ---------- */\n\n.size_sm { --btn-height: var(--wzl-control-h-sm); --btn-padx: var(--wzl-space-4); --btn-fontsize: var(--wzl-font-size-sm); }\n.size_md { --btn-height: var(--wzl-control-h); --btn-padx: var(--wzl-space-6); --btn-fontsize: var(--wzl-font-size); }\n\n.iconOnly.size_sm { width: var(--wzl-control-h-sm); --btn-padx: 0; }\n.iconOnly.size_md { width: var(--wzl-control-h); --btn-padx: 0; }\n\n/* ---------- Variants ---------- */\n\n/* Primary: tinted aqua glass — body uses --wzl-accent. The upper / equator\n   / lower stops are positioned around --btn-equator so dragging the equator\n   shifts the entire transition zone as one block. */\n.variant_primary {\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--wzl-accent) var(--btn-top-alpha), transparent) 0%,\n    color-mix(in srgb, var(--wzl-accent) var(--btn-upper-alpha), transparent) calc(var(--btn-equator) - var(--btn-equator-spread)),\n    color-mix(in srgb, var(--wzl-accent) var(--btn-equator-tint), white) var(--btn-equator),\n    var(--wzl-accent) calc(var(--btn-equator) + var(--btn-equator-spread) * 1.6),\n    color-mix(in srgb, var(--wzl-accent) var(--btn-base-tint), black) 100%\n  );\n  backdrop-filter: blur(var(--btn-blur)) saturate(var(--btn-saturate));\n  -webkit-backdrop-filter: blur(var(--btn-blur)) saturate(var(--btn-saturate));\n  color: var(--wzl-fg-on-accent);\n  /* Main shadow below for legibility, then a second engraving shadow at a\n     configurable angle (defaults below) — a near-black, lower-alpha stamp\n     that sits underneath the glyphs and reads as recessed type. */\n  text-shadow:\n    0 1px 0 rgba(0, 0, 0, var(--btn-text-shadow)),\n    var(--btn-text-inset-x) var(--btn-text-inset-y) 0 rgba(0, 0, 0, var(--btn-text-inset)),\n    0 0 6px rgba(0, 0, 0, calc(var(--btn-text-shadow) * 0.5));\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, var(--btn-inset-hi)),\n    inset 0 -1px 2px rgba(0, 0, 0, var(--btn-inset-lo)),\n    0 0 0 1px rgba(0, 0, 0, var(--btn-rim)),\n    0 1px 2px rgba(0, 0, 0, var(--btn-drop-near)),\n    0 3px 6px rgba(0, 0, 0, var(--btn-drop-far));\n}\n\n.variant_primary:hover:not(:disabled) {\n  filter: brightness(1.08) saturate(1.06);\n}\n\n.variant_primary:active:not(:disabled) {\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--wzl-accent) 80%, black) 0%,\n    color-mix(in srgb, var(--wzl-accent) 95%, black) 50%,\n    color-mix(in srgb, var(--wzl-accent) 60%, white) 100%\n  );\n  box-shadow:\n    inset 0 2px 4px rgba(0, 0, 0, 0.35),\n    inset 0 -1px 0 rgba(255, 255, 255, 0.25),\n    0 0 0 1px rgba(0, 0, 0, calc(var(--btn-rim) + 0.06));\n  transform: translateY(0.5px);\n}\n.variant_primary:active::before { opacity: 0.3; }\n\n/* Secondary: neutral glass — drained of color. */\n.variant_secondary {\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--wzl-fg) 25%, transparent) 0%,\n    color-mix(in srgb, var(--wzl-fg) 10%, transparent) calc(var(--btn-equator) - var(--btn-equator-spread)),\n    color-mix(in srgb, var(--wzl-surface-raised) 90%, white) var(--btn-equator),\n    var(--wzl-surface-raised) calc(var(--btn-equator) + var(--btn-equator-spread) * 1.6),\n    color-mix(in srgb, var(--wzl-surface-sunken) 80%, black) 100%\n  );\n  backdrop-filter: blur(var(--btn-blur)) saturate(var(--btn-saturate));\n  -webkit-backdrop-filter: blur(var(--btn-blur)) saturate(var(--btn-saturate));\n  color: var(--wzl-fg);\n  text-shadow:\n    0 1px 0 rgba(0, 0, 0, calc(var(--btn-text-shadow) * 0.7)),\n    var(--btn-text-inset-x) var(--btn-text-inset-y) 0 rgba(0, 0, 0, calc(var(--btn-text-inset) * 0.7));\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, calc(var(--btn-inset-hi) * 0.5)),\n    inset 0 -1px 2px rgba(0, 0, 0, calc(var(--btn-inset-lo) * 0.83)),\n    0 0 0 1px rgba(0, 0, 0, calc(var(--btn-rim) + 0.03)),\n    0 1px 2px rgba(0, 0, 0, calc(var(--btn-drop-near) * 0.93)),\n    0 3px 6px rgba(0, 0, 0, calc(var(--btn-drop-far) * 0.89));\n}\n\n.variant_secondary:hover:not(:disabled) { filter: brightness(1.1); }\n\n.variant_secondary:active:not(:disabled) {\n  background: linear-gradient(180deg, var(--wzl-surface-sunken) 0%, var(--wzl-surface-raised) 100%);\n  box-shadow:\n    inset 0 2px 4px rgba(0, 0, 0, 0.4),\n    0 0 0 1px rgba(0, 0, 0, 0.3);\n  transform: translateY(0.5px);\n}\n.variant_secondary:active::before { opacity: 0.2; }\n\n/* Ghost: silhouette only — no glass body, no gloss. */\n.variant_ghost {\n  background: transparent;\n  color: var(--wzl-fg);\n  box-shadow: none;\n}\n.variant_ghost::before { display: none; }\n\n.variant_ghost:hover:not(:disabled) {\n  background: var(--wzl-surface-hover);\n}\n\n.variant_ghost:active:not(:disabled) {\n  background: var(--wzl-surface-pressed);\n}\n\n/* ---------- Modifiers ---------- */\n\n.pressed:not(:disabled) {\n  background: var(--wzl-surface-pressed);\n  color: var(--wzl-fg);\n  box-shadow: inset 0 1px 2px rgb(0 0 0 / 18%);\n}\n\n.variant_primary.pressed:not(:disabled) { filter: brightness(0.92); }\n\n.fullWidth { width: 100%; }\n.loading .label { opacity: 0.7; }\n\n/* ---------- Slots ---------- */\n\n.iconSlot {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n}\n\n.size_sm .iconSlot > svg { width: 12px; height: 12px; }\n.size_md .iconSlot > svg { width: 14px; height: 14px; }\n\n.label { display: inline-block; }\n\n/* ---------- Spinner ---------- */\n\n.spinner {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  animation: wzl-btn-spin 0.7s linear infinite;\n}\n\n@keyframes wzl-btn-spin {\n  to { transform: rotate(360deg); }\n}\n","import { forwardRef, type ButtonHTMLAttributes, type ReactNode, type Ref } from 'react';\nimport s from './Button.module.css';\n\n/** Visual weight of a button. Defaults to `secondary`. */\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost';\n/** Button height and type scale. */\nexport type ButtonSize = 'sm' | 'md';\n\ntype ButtonBase = {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  /** A button that stays down: renders `aria-pressed` and holds the active\n   *  treatment while it is on. For a control that reports a state rather than\n   *  firing an action -- a panel toggle, a mode switch. Left off, the button\n   *  announces no pressed state at all, which is what an action button wants. */\n  pressed?: boolean;\n  disabled?: boolean;\n  loading?: boolean;\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n  fullWidth?: boolean;\n  type?: 'button' | 'submit' | 'reset';\n  className?: string;\n  style?: ButtonHTMLAttributes<HTMLButtonElement>['style'];\n  children?: ReactNode;\n  onClick?: ButtonHTMLAttributes<HTMLButtonElement>['onClick'];\n};\n\ntype ButtonRegular = ButtonBase & {\n  iconOnly?: false;\n  ariaLabel?: string;\n};\n\ntype ButtonIconOnly = ButtonBase & {\n  iconOnly: true;\n  ariaLabel: string;\n};\n\n/**\n * Props for {@link Button}. Setting `iconOnly` makes `ariaLabel` required,\n * since an icon-only button has no text for a screen reader to announce.\n */\nexport type ButtonProps = ButtonRegular | ButtonIconOnly;\n\nfunction Spinner(): ReactNode {\n  return (\n    <span className={s.spinner} aria-hidden=\"true\">\n      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\">\n        <circle\n          cx=\"8\"\n          cy=\"8\"\n          r=\"6\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeOpacity=\"0.25\"\n        />\n        <path\n          d=\"M 8 2 A 6 6 0 0 1 14 8\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n        />\n      </svg>\n    </span>\n  );\n}\n\n/**\n * Standard button. `loading` swaps the leading icon for a spinner, marks the\n * button `aria-busy`, and leaves the label in place; it does not disable the\n * button, so pass `disabled` too if the click should be blocked.\n *\n * `ref` forwards to the underlying `<button>`.\n */\nexport const Button = forwardRef(function Button(\n  props: ButtonProps,\n  ref: Ref<HTMLButtonElement>,\n) {\n  const {\n    variant = 'secondary',\n    size = 'md',\n    pressed,\n    disabled,\n    loading,\n    leadingIcon,\n    trailingIcon,\n    fullWidth,\n    iconOnly,\n    ariaLabel,\n    type = 'button',\n    className,\n    style,\n    children,\n    onClick,\n  } = props;\n\n  const cls = [\n    s.button,\n    s[`variant_${variant}`],\n    s[`size_${size}`],\n    fullWidth && s.fullWidth,\n    pressed && s.pressed,\n    iconOnly && s.iconOnly,\n    loading && s.loading,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const showLeading = !iconOnly && (loading || leadingIcon);\n\n  return (\n    <button\n      ref={ref}\n      type={type}\n      className={cls}\n      style={style}\n      disabled={disabled}\n      aria-busy={loading ? true : undefined}\n      aria-pressed={pressed}\n      aria-label={ariaLabel}\n      onClick={onClick}\n    >\n      {showLeading && (\n        <span className={s.iconSlot}>{loading ? <Spinner /> : leadingIcon}</span>\n      )}\n      {iconOnly ? (\n        loading ? <Spinner /> : <span className={s.iconSlot}>{children}</span>\n      ) : (\n        children !== undefined && <span className={s.label}>{children}</span>\n      )}\n      {!iconOnly && trailingIcon && (\n        <span className={s.iconSlot}>{trailingIcon}</span>\n      )}\n    </button>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AC4CA,SAAS,IAAqB;AAC5B,QACE,kBAAC,QAAD;EAAM,WAAW,EAAE;EAAS,eAAY;YACtC,kBAAC,OAAD;GAAK,SAAQ;GAAY,OAAM;GAAK,QAAO;aAA3C,CACE,kBAAC,UAAD;IACE,IAAG;IACH,IAAG;IACH,GAAE;IACF,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;IACd,CAAA,EACF,kBAAC,QAAD;IACE,GAAE;IACF,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;IACd,CAAA,CACE;;EACD,CAAA;;AAWX,IAAa,IAAS,EAAW,SAC/B,GACA,GACA;CACA,IAAM,EACJ,aAAU,aACV,UAAO,MACP,YACA,aACA,YACA,gBACA,iBACA,cACA,aACA,cACA,UAAO,UACP,cACA,UACA,aACA,eACE;AAiBJ,QACE,kBAAC,UAAD;EACO;EACC;EACN,WAnBQ;GACV,EAAE;GACF,EAAE,WAAW;GACb,EAAE,QAAQ;GACV,KAAa,EAAE;GACf,KAAW,EAAE;GACb,KAAY,EAAE;GACd,KAAW,EAAE;GACb;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAQO;EACJ;EACG;EACV,aAAW,IAAU,KAAO,KAAA;EAC5B,gBAAc;EACd,cAAY;EACH;YATX;GAHkB,CAAC,MAAa,KAAW,MAevC,kBAAC,QAAD;IAAM,WAAW,EAAE;cAAW,IAAU,kBAAC,GAAD,EAAW,CAAA,GAAG;IAAmB,CAAA;GAE1E,IACC,IAAU,kBAAC,GAAD,EAAW,CAAA,GAAG,kBAAC,QAAD;IAAM,WAAW,EAAE;IAAW;IAAgB,CAAA,GAEtE,MAAa,KAAA,KAAa,kBAAC,QAAD;IAAM,WAAW,EAAE;IAAQ;IAAgB,CAAA;GAEtE,CAAC,KAAY,KACZ,kBAAC,QAAD;IAAM,WAAW,EAAE;cAAW;IAAoB,CAAA;GAE7C;;EAEX"}

package/dist/chunks/Callout-DrNu-9Qr.js

@@ -1,122 +0,0 @@
-import { r as e } from "./portalHost-CjpCnuGU.js";
-import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
-import { useCallback as i, useEffect as a, useId as o, useRef as s } from "react";
-import { Dialog as c, DialogTrigger as l, Heading as u, OverlayArrow as d, Popover as f } from "react-aria-components";
-import { createPortal as p } from "react-dom";
-var m = {
-	anchor: "_anchor_10x1z_1",
-	popover: "_popover_10x1z_6",
-	toneWarning: "_toneWarning_10x1z_25",
-	toneDanger: "_toneDanger_10x1z_29",
-	arrow: "_arrow_10x1z_33",
-	dialog: "_dialog_10x1z_52",
-	header: "_header_10x1z_59",
-	title: "_title_10x1z_66",
-	close: "_close_10x1z_73",
-	body: "_body_10x1z_89",
-	footer: "_footer_10x1z_96"
-}, h = {
-	info: m.toneInfo,
-	warning: m.toneWarning,
-	danger: m.toneDanger
-};
-function g(l) {
-	let { children: g, className: _, title: v, footer: y, tone: b = "info", modal: x = !1, showCloseButton: S, onDismiss: C, triggerRef: w, anchorRect: T, placement: E = "top", offset: D = 12, maxHeight: O = 400, onOpenChange: k, shouldCloseOnInteractOutside: A, "aria-label": j, "aria-labelledby": M, portalContainer: N, ...P } = l, F = s(null), { anchor: I, portalProps: L } = e(N), R = S ?? !x, z = s(C);
-	z.current = C;
-	let B = s((e) => {
-		e.key === "Escape" && z.current?.();
-	}), V = s(null), H = i((e) => {
-		V.current?.removeEventListener("keydown", B.current), V.current = e, e?.addEventListener("keydown", B.current);
-	}, []), U = o(), W = T !== void 0;
-	a(() => {
-		!W || typeof window > "u" || window.dispatchEvent(new Event("resize"));
-	}, [
-		W,
-		T?.x,
-		T?.y,
-		T?.width,
-		T?.height
-	]);
-	let G = x && v !== void 0 ? U : M, K = x ? j : void 0;
-	return /* @__PURE__ */ r(t, { children: [
-		I,
-		T !== void 0 && p(/* @__PURE__ */ n("span", {
-			ref: F,
-			"data-callout-anchor": "",
-			className: m.anchor,
-			"aria-hidden": "true",
-			style: {
-				left: T.x,
-				top: T.y,
-				width: T.width,
-				height: T.height
-			}
-		}), document.body),
-		/* @__PURE__ */ r(f, {
-			...P,
-			triggerRef: T === void 0 ? w : F,
-			isNonModal: !x,
-			placement: E,
-			offset: D,
-			maxHeight: O,
-			onOpenChange: k,
-			shouldCloseOnInteractOutside: A ?? (x ? () => !1 : void 0),
-			"aria-label": K,
-			"aria-labelledby": G,
-			className: [
-				m.popover,
-				h[b],
-				_
-			].filter(Boolean).join(" "),
-			"data-weasel-overlay": "",
-			...L,
-			children: [/* @__PURE__ */ n(d, {
-				className: m.arrow,
-				children: /* @__PURE__ */ n("svg", {
-					width: 12,
-					height: 12,
-					viewBox: "0 0 12 12",
-					"aria-hidden": "true",
-					children: /* @__PURE__ */ n("path", { d: "M0 0 L6 6 L12 0" })
-				})
-			}), /* @__PURE__ */ n(c, {
-				role: x ? "alertdialog" : "dialog",
-				className: m.dialog,
-				"aria-label": j,
-				"aria-labelledby": M,
-				ref: H,
-				children: ({ close: e }) => /* @__PURE__ */ r(t, { children: [
-					(v !== void 0 || R) && /* @__PURE__ */ r("header", {
-						className: m.header,
-						children: [v !== void 0 && /* @__PURE__ */ n(u, {
-							id: U,
-							slot: "title",
-							className: m.title,
-							children: v
-						}), R && /* @__PURE__ */ n("button", {
-							type: "button",
-							className: m.close,
-							onClick: () => {
-								e(), k?.(!1), C?.();
-							},
-							"aria-label": "Close callout",
-							children: "×"
-						})]
-					}),
-					/* @__PURE__ */ n("div", {
-						className: m.body,
-						children: g
-					}),
-					y !== void 0 && /* @__PURE__ */ n("footer", {
-						className: m.footer,
-						children: y
-					})
-				] })
-			})]
-		})
-	] });
-}
-//#endregion
-export { l as n, g as t };
-
-//# sourceMappingURL=Callout-DrNu-9Qr.js.map

package/dist/chunks/Callout-DrNu-9Qr.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Callout-DrNu-9Qr.js","names":[],"sources":["../../src/components/Callout/Callout.module.css","../../src/components/Callout/Callout.tsx"],"sourcesContent":[".anchor {\n  position: fixed;\n  pointer-events: none;\n}\n\n.popover {\n  /* Above Dialog overlay (1000) and ToastRegion (1100) — RAC sets no z-index. */\n  z-index: 1200;\n  --callout-accent: var(--wzl-accent-strong);\n  background: var(--wzl-surface);\n  border: 1px solid var(--callout-accent);\n  border-radius: var(--wzl-radius-md);\n  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  max-width: 320px;\n  transition: opacity var(--wzl-motion-fast);\n}\n\n.popover[data-entering],\n.popover[data-exiting] {\n  opacity: 0;\n}\n\n.toneWarning {\n  --callout-accent: var(--wzl-warning, #d99a3f);\n}\n\n.toneDanger {\n  --callout-accent: var(--wzl-danger);\n}\n\n.arrow svg {\n  display: block;\n  fill: var(--wzl-surface);\n  stroke: var(--callout-accent);\n  stroke-width: 1;\n}\n\n.arrow[data-placement='bottom'] svg {\n  transform: rotate(180deg);\n}\n\n.arrow[data-placement='left'] svg {\n  transform: rotate(-90deg);\n}\n\n.arrow[data-placement='right'] svg {\n  transform: rotate(90deg);\n}\n\n.dialog {\n  outline: none;\n  max-height: inherit;\n  display: flex;\n  flex-direction: column;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-4);\n  padding: var(--wzl-space-5) var(--wzl-space-6) 0;\n}\n\n.title {\n  margin: 0;\n  flex: 1;\n  font-size: var(--wzl-font-size);\n  font-weight: var(--wzl-font-weight-bold);\n}\n\n.close {\n  flex: 0 0 auto;\n  background: none;\n  border: none;\n  color: var(--wzl-fg-muted);\n  font-size: var(--wzl-font-size-lg);\n  line-height: 1;\n  padding: var(--wzl-space-1) var(--wzl-space-2);\n  cursor: pointer;\n  border-radius: var(--wzl-radius-sm);\n}\n\n.close:hover {\n  color: var(--wzl-fg);\n}\n\n.body {\n  padding: var(--wzl-space-4) var(--wzl-space-6) var(--wzl-space-5);\n  font-size: var(--wzl-font-size);\n  line-height: 1.4;\n  overflow-y: auto;\n}\n\n.footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--wzl-space-4);\n  padding: 0 var(--wzl-space-6) var(--wzl-space-5);\n}\n","import { useCallback, useEffect, useId, useRef, type ReactNode, type RefObject } from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  DialogTrigger,\n  Popover as RACPopover,\n  OverlayArrow,\n  Dialog as RACDialog,\n  Heading,\n  type PopoverProps as RACPopoverProps,\n} from 'react-aria-components';\nimport { useOverlayPortal, type OverlayPortalProps, type WithoutPortalTarget } from '../../overlays/portalHost';\nimport s from './Callout.module.css';\n\n/** Accent color of a {@link Callout}'s border and arrow. */\nexport type CalloutTone = 'info' | 'warning' | 'danger';\n\n/**\n * Composition wrapper for press-to-open callouts:\n * `<CalloutTrigger><Pressable>…</Pressable><Callout>…</Callout></CalloutTrigger>`.\n * Re-exported RAC DialogTrigger — non-RAC trigger elements must be wrapped\n * in `<Pressable>` from react-aria-components.\n * In composed mode, put `defaultOpen` on `CalloutTrigger`, not `Callout` —\n * RAC detaches to local open state on the trigger, not the popover.\n */\nexport { DialogTrigger as CalloutTrigger };\n\n/** Props for {@link Callout}, on top of React Aria's `Popover` props. */\nexport type CalloutProps = Omit<\n  WithoutPortalTarget<RACPopoverProps>,\n  'children' | 'className' | 'isNonModal' | 'triggerRef'\n> &\n  OverlayPortalProps & {\n  children?: ReactNode;\n  className?: string;\n  /** Optional heading rendered above the body. */\n  title?: ReactNode;\n  /** Footer slot — typically action buttons. */\n  footer?: ReactNode;\n  /** Accent tone for border + arrow. Default `info`. */\n  tone?: CalloutTone;\n  /**\n   * `true` — blocks interaction with the rest of the app until dismissed;\n   * inner dialog is `role=\"alertdialog\"`. `false` (default) — non-blocking:\n   * the app stays interactive; Esc / outside click / close button dismiss.\n   */\n  modal?: boolean;\n  /**\n   * Show the × button. Defaults to `!modal`. In programmatic\n   * `triggerRef`/`anchorRect` modes the close button needs controlled open\n   * (`isOpen` + `onOpenChange`); with only `defaultOpen` it has no open-state\n   * setter to call and cannot close.\n   */\n  showCloseButton?: boolean;\n  /**\n   * The user asked for this callout to go away — the × button or Escape.\n   *\n   * Distinct from `onOpenChange`, which a non-modal popover *also* fires when\n   * interaction or focus merely leaves it. On a canvas that's every click on\n   * the artwork, so a consumer that pins `isOpen` and treats `onOpenChange`\n   * as dismissal retires messages nobody read. Use this instead: it fires\n   * only on a deliberate act, and never on incidental focus loss.\n   */\n  onDismiss?: () => void;\n  /** Anchor to an arbitrary element (programmatic use, with `isOpen`). */\n  triggerRef?: RefObject<Element | null>;\n  /**\n   * Anchor to a client-coordinate rect — e.g. a scene node's on-screen box.\n   * The callout re-anchors whenever this rect changes, so a consumer that\n   * recomputes it on pan, zoom, or scene edits keeps the arrow on its target.\n   * Takes precedence over `triggerRef`.\n   */\n    anchorRect?: { x: number; y: number; width: number; height: number };\n  };\n\nconst toneClass: Record<CalloutTone, string> = {\n  info: s.toneInfo,\n  warning: s.toneWarning,\n  danger: s.toneDanger,\n};\n\n/**\n * Anchored callout with an arrow pointing at its source — a trigger\n * element, an arbitrary `triggerRef`, or a client-space `anchorRect`.\n * Wraps React Aria Popover + Dialog; positioning, collision flipping,\n * dismissal, and focus behavior come from the underlying primitives.\n */\nexport function Callout(props: CalloutProps) {\n  const {\n    children,\n    className,\n    title,\n    footer,\n    tone = 'info',\n    modal = false,\n    showCloseButton,\n    onDismiss,\n    triggerRef,\n    anchorRect,\n    placement = 'top',\n    offset = 12,\n    maxHeight = 400,\n    onOpenChange,\n    shouldCloseOnInteractOutside,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    portalContainer,\n    ...rest\n  } = props;\n  const anchorRef = useRef<HTMLSpanElement>(null);\n  const { anchor: portalAnchor, portalProps } = useOverlayPortal(portalContainer);\n  const showClose = showCloseButton ?? !modal;\n  // Escape is a dismissal like the × is. It can't ride on a React `onKeyDown`:\n  // RAC's Dialog runs its props through filterDOMProps, which drops handlers\n  // it doesn't know, so the listener goes on the section itself. RAC's own\n  // Escape handling is untouched — this only adds the signal.\n  const onDismissRef = useRef(onDismiss);\n  onDismissRef.current = onDismiss;\n  const escapeListener = useRef((e: KeyboardEvent) => {\n    if (e.key === 'Escape') onDismissRef.current?.();\n  });\n  const listeningTo = useRef<HTMLElement | null>(null);\n  const dialogRef = useCallback((node: HTMLElement | null) => {\n    listeningTo.current?.removeEventListener('keydown', escapeListener.current);\n    listeningTo.current = node;\n    node?.addEventListener('keydown', escapeListener.current);\n  }, []);\n  const titleId = useId();\n  // RAC positions on open and recomputes on scroll, resize, and a\n  // ResizeObserver on the anchor — none of which fire when `anchorRect` is\n  // merely *translated*, as it is when a consumer tracks a scene node across a\n  // pan. (Zoom happens to work, since scaling also changes the anchor's size.)\n  // Nudging RAC's own resize listener is the supported way to make it\n  // recompute; there's no public updatePosition on Popover.\n  const hasAnchorRect = anchorRect !== undefined;\n  useEffect(() => {\n    if (!hasAnchorRect || typeof window === 'undefined') return;\n    window.dispatchEvent(new Event('resize'));\n  }, [hasAnchorRect, anchorRect?.x, anchorRect?.y, anchorRect?.width, anchorRect?.height]);\n  // RAC's popover role-heuristic misses alertdialog; label the outer role\n  // it stamps. Upstream: react-spectrum Popover.mjs querySelector('[role=dialog]').\n  const popoverAriaLabelledby =\n    modal && title !== undefined ? titleId : ariaLabelledby;\n  const popoverAriaLabel = modal ? ariaLabel : undefined;\n  return (\n    <>\n      {portalAnchor}\n      {/* Harmless while closed — RAC reads the ref only when the popover is open. */}\n      {anchorRect !== undefined &&\n        createPortal(\n          <span\n            ref={anchorRef}\n            data-callout-anchor=\"\"\n            className={s.anchor}\n            aria-hidden=\"true\"\n            // Dynamic geometry — inline style is the mechanism here, not styling.\n            style={{\n              left: anchorRect.x,\n              top: anchorRect.y,\n              width: anchorRect.width,\n              height: anchorRect.height,\n            }}\n          />,\n          document.body,\n        )}\n      <RACPopover\n        {...rest}\n        triggerRef={anchorRect !== undefined ? anchorRef : triggerRef}\n        isNonModal={!modal}\n        placement={placement}\n        offset={offset}\n        maxHeight={maxHeight}\n        onOpenChange={onOpenChange}\n        shouldCloseOnInteractOutside={\n          shouldCloseOnInteractOutside ?? (modal ? () => false : undefined)\n        }\n        aria-label={popoverAriaLabel}\n        aria-labelledby={popoverAriaLabelledby}\n        className={[s.popover, toneClass[tone], className].filter(Boolean).join(' ')}\n        data-weasel-overlay=\"\"\n        {...portalProps}\n      >\n        <OverlayArrow className={s.arrow}>\n          <svg width={12} height={12} viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n            <path d=\"M0 0 L6 6 L12 0\" />\n          </svg>\n        </OverlayArrow>\n        <RACDialog\n          role={modal ? 'alertdialog' : 'dialog'}\n          className={s.dialog}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          ref={dialogRef}\n        >\n          {({ close }) => (\n            <>\n              {(title !== undefined || showClose) && (\n                <header className={s.header}>\n                  {title !== undefined && (\n                    <Heading id={titleId} slot=\"title\" className={s.title}>\n                      {title}\n                    </Heading>\n                  )}\n                  {showClose && (\n                    <button\n                      type=\"button\"\n                      className={s.close}\n                      onClick={() => {\n                        // `close()` resolves OverlayTriggerStateContext, only\n                        // provided by DialogTrigger (composed mode). In\n                        // triggerRef/anchorRect modes there is no such\n                        // context, so `close()` is a no-op there — the\n                        // controlled-open fallback below does the work.\n                        close();\n                        onOpenChange?.(false);\n                        onDismiss?.();\n                      }}\n                      aria-label=\"Close callout\"\n                    >\n                      ×\n                    </button>\n                  )}\n                </header>\n              )}\n              <div className={s.body}>{children}</div>\n              {footer !== undefined && <footer className={s.footer}>{footer}</footer>}\n            </>\n          )}\n        </RACDialog>\n      </RACPopover>\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/ColorField-BYzgZM9o.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColorField-BYzgZM9o.js","names":[],"sources":["../../src/components/ColorField/ColorField.module.css","../../src/components/ColorField/ColorField.tsx"],"sourcesContent":[".root {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--wzl-space-3);\n}\n\n.chip {\n  position: relative;\n  display: inline-flex;\n  border-radius: var(--wzl-radius-sm);\n  overflow: hidden;\n}\n\n.color {\n  inline-size: 28px;\n  block-size: var(--wzl-control-h-sm);\n  padding: 0;\n  border: 1px solid var(--wzl-border, #444);\n  border-radius: var(--wzl-radius-sm);\n  background: none;\n  cursor: pointer;\n}\n\n.color:focus-visible {\n  outline: none;\n  border-color: var(--wzl-focus-ring);\n  box-shadow: 0 0 0 1px var(--wzl-focus-ring);\n}\n\n/* Indeterminate (mixed) presentation: checkerboard overlay atop the\n * swatch. pointer-events: none so the input stays clickable. */\n.root[data-mixed] .chip::after {\n  content: '';\n  position: absolute;\n  inset: 1px;\n  border-radius: var(--wzl-radius-sm);\n  pointer-events: none;\n  background: repeating-conic-gradient(\n      var(--wzl-border, #666) 0% 25%,\n      var(--wzl-surface, #2e2f36) 0% 50%\n    )\n    50% / 8px 8px;\n}\n\n/* `InlineRange` owns the track; this only says how it shares the row. */\n.alphaRange {\n  flex: 1;\n}\n\n.alphaReadout {\n  min-inline-size: 3ch;\n  text-align: end;\n  font-size: var(--wzl-font-size-sm);\n  opacity: 0.7;\n}\n","import { useState } from 'react';\nimport { toHex8, getAlpha01, withAlpha01 } from '@weasel-js/core';\nimport { InlineRange } from '../InlineRange';\nimport s from './ColorField.module.css';\n\n/**\n * Props for {@link ColorField}. `onInput` fires throughout a gesture and\n * `onChange` once at its end.\n */\nexport interface ColorFieldProps {\n  /** Current color, `#rrggbb` or `#rrggbbaa`. Omit when `mixed`. */\n  value?: string;\n  /** Indeterminate presentation (multi-selection with differing colors):\n   *  checkered chip, empty value. The first color edit produces a real\n   *  value; the opacity slider stays disabled until then (an alpha-only\n   *  edit would otherwise commit a value composed against the\n   *  placeholder black). */\n  mixed?: boolean;\n  /** Show the opacity slider; emitted values are `#rrggbbaa`. */\n  alpha?: boolean;\n  /** Live value during interaction (picker drag, slider drag). Optional —\n   *  wire it for live preview; omit it for commit-only consumers. */\n  onInput?: (hex: string) => void;\n  /** Committed value — picker close (blur) or slider release. One call\n   *  per user gesture; pair with an undoable write. */\n  onChange: (hex: string) => void;\n  'aria-label'?: string;\n  className?: string;\n}\n\n/**\n * Compact color editor: native color input + optional opacity slider.\n * Commit semantics are gesture-based (see `onChange`) because native\n * color/range inputs fire `change` continuously during interaction —\n * commit-on-change would emit one undo entry per tick.\n */\nexport function ColorField(props: ColorFieldProps) {\n  const { value, mixed = false, alpha = false, onInput, onChange, className } = props;\n  const hex8 = toHex8(value ?? '#000000');\n  const rgb6 = hex8.slice(0, 7);\n  const alpha01 = getAlpha01(hex8);\n  const alphaPct = Math.round(alpha01 * 100);\n\n  // Drafts track the control during a gesture (the committed prop only\n  // updates after onChange), then reset to follow the prop again.\n  const [colorDraft, setColorDraft] = useState<string | null>(null);\n  const [alphaDraft, setAlphaDraft] = useState<number | null>(null);\n  const visibleRgb = colorDraft ?? rgb6;\n  const visibleAlphaPct = alphaDraft ?? alphaPct;\n\n  const compose = (rgb: string, a01: number): string =>\n    alpha ? withAlpha01(rgb, a01) : rgb;\n\n  // Mixed with no color edit yet: the alpha slider has nothing real to\n  // compose against (rgb6 is the placeholder black), so keep it disabled\n  // until the first color edit lands.\n  const alphaLocked = mixed && colorDraft === null;\n\n  // Commit only when a gesture actually changed something — blur with no\n  // preceding input must not emit (it would create a no-op undo entry).\n  const commit = (rgb: string, a01: number): void => {\n    if (colorDraft === null && alphaDraft === null) return;\n    onChange(compose(rgb, a01));\n    setColorDraft(null);\n    setAlphaDraft(null);\n  };\n\n  return (\n    <span\n      className={[s.root, className].filter(Boolean).join(' ')}\n      {...(mixed && colorDraft === null ? { 'data-mixed': '' } : {})}\n    >\n      <span className={s.chip}>\n        <input\n          className={s.color}\n          type=\"color\"\n          value={visibleRgb}\n          aria-label={props['aria-label'] ?? 'Color'}\n          onInput={(e) => {\n            const rgb = (e.target as HTMLInputElement).value;\n            setColorDraft(rgb);\n            onInput?.(compose(rgb, visibleAlphaPct / 100));\n          }}\n          onBlur={() => commit(visibleRgb, visibleAlphaPct / 100)}\n        />\n      </span>\n      {alpha && (\n        <>\n          <InlineRange\n            className={s.alphaRange}\n            min={0}\n            max={100}\n            step={1}\n            value={visibleAlphaPct}\n            disabled={alphaLocked}\n            aria-label={props['aria-label'] ? `${props['aria-label']} opacity` : 'Opacity'}\n            onInput={(e) => {\n              const pct = Number((e.target as HTMLInputElement).value);\n              setAlphaDraft(pct);\n              onInput?.(compose(visibleRgb, pct / 100));\n            }}\n            onPointerUp={() => commit(visibleRgb, visibleAlphaPct / 100)}\n            onPointerCancel={() => commit(visibleRgb, visibleAlphaPct / 100)}\n            onKeyUp={() => commit(visibleRgb, visibleAlphaPct / 100)}\n            onBlur={() => commit(visibleRgb, visibleAlphaPct / 100)}\n          />\n          <span className={s.alphaReadout} aria-hidden=\"true\">{visibleAlphaPct}%</span>\n        </>\n      )}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;ACoCA,SAAgB,EAAW,GAAwB;CACjD,IAAM,EAAE,UAAO,WAAQ,IAAO,WAAQ,IAAO,YAAS,aAAU,iBAAc,GACxE,IAAO,EAAO,KAAS,UAAU,EACjC,IAAO,EAAK,MAAM,GAAG,EAAE,EACvB,IAAU,EAAW,EAAK,EAC1B,IAAW,KAAK,MAAM,IAAU,IAAI,EAIpC,CAAC,GAAY,KAAiB,EAAwB,KAAK,EAC3D,CAAC,GAAY,KAAiB,EAAwB,KAAK,EAC3D,IAAa,KAAc,GAC3B,IAAkB,KAAc,GAEhC,KAAW,GAAa,MAC5B,IAAQ,EAAY,GAAK,EAAI,GAAG,GAK5B,IAAc,KAAS,MAAe,MAItC,KAAU,GAAa,MAAsB;AAC7C,QAAe,QAAQ,MAAe,SAC1C,EAAS,EAAQ,GAAK,EAAI,CAAC,EAC3B,EAAc,KAAK,EACnB,EAAc,KAAK;;AAGrB,QACE,kBAAC,QAAD;EACE,WAAW,CAAC,EAAE,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EACxD,GAAK,KAAS,MAAe,OAAO,EAAE,cAAc,IAAI,GAAG,EAAE;YAF/D,CAIE,kBAAC,QAAD;GAAM,WAAW,EAAE;aACjB,kBAAC,SAAD;IACE,WAAW,EAAE;IACb,MAAK;IACL,OAAO;IACP,cAAY,EAAM,iBAAiB;IACnC,UAAU,MAAM;KACd,IAAM,IAAO,EAAE,OAA4B;AAE3C,KADA,EAAc,EAAI,EAClB,IAAU,EAAQ,GAAK,IAAkB,IAAI,CAAC;;IAEhD,cAAc,EAAO,GAAY,IAAkB,IAAI;IACvD,CAAA;GACG,CAAA,EACN,KACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GACE,WAAW,EAAE;GACb,KAAK;GACL,KAAK;GACL,MAAM;GACN,OAAO;GACP,UAAU;GACV,cAAY,EAAM,gBAAgB,GAAG,EAAM,cAAc,YAAY;GACrE,UAAU,MAAM;IACd,IAAM,IAAM,OAAQ,EAAE,OAA4B,MAAM;AAExD,IADA,EAAc,EAAI,EAClB,IAAU,EAAQ,GAAY,IAAM,IAAI,CAAC;;GAE3C,mBAAmB,EAAO,GAAY,IAAkB,IAAI;GAC5D,uBAAuB,EAAO,GAAY,IAAkB,IAAI;GAChE,eAAe,EAAO,GAAY,IAAkB,IAAI;GACxD,cAAc,EAAO,GAAY,IAAkB,IAAI;GACvD,CAAA,EACF,kBAAC,QAAD;GAAM,WAAW,EAAE;GAAc,eAAY;aAA7C,CAAqD,GAAgB,IAAQ;KAC5E,EAAA,CAAA,CAEA"}

package/dist/chunks/DataGrid-C8KrYtw7.js

@@ -1,104 +0,0 @@
-import { t as e } from "./useReorderDragList-CSQGd7zQ.js";
-import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
-import { useMemo as i, useState as a } from "react";
-var o = {
-	grid: "_grid_rn983_1",
-	table: "_table_rn983_6",
-	sortButton: "_sortButton_rn983_32",
-	sortActive: "_sortActive_rn983_44",
-	empty: "_empty_rn983_46",
-	handleCol: "_handleCol_rn983_54",
-	handleCell: "_handleCell_rn983_55",
-	dragging: "_dragging_rn983_64",
-	dropBefore: "_dropBefore_rn983_66",
-	dropAfter: "_dropAfter_rn983_67"
-};
-//#endregion
-//#region src/components/DataGrid/DataGrid.tsx
-function s(s) {
-	let { rows: c, columns: l, defaultSort: u, onReorder: d, empty: f = "—", className: p } = s, [m, h] = a(u ?? null), g = i(() => {
-		if (!m) return [...c];
-		let e = l.find((e) => e.id === m.columnId);
-		if (!e) return [...c];
-		let t = e.accessor ?? ((t) => t[e.id]), n = m.direction === "asc" ? 1 : -1;
-		return [...c].sort((e, r) => {
-			let i = t(e), a = t(r);
-			return i == null && a == null ? 0 : i == null ? 1 : a == null ? -1 : i < a ? -1 * n : i > a ? 1 * n : 0;
-		});
-	}, [
-		c,
-		l,
-		m
-	]), _ = (e) => {
-		h((t) => !t || t.columnId !== e ? {
-			columnId: e,
-			direction: "asc"
-		} : t.direction === "asc" ? {
-			columnId: e,
-			direction: "desc"
-		} : null);
-	}, v = e({
-		items: g.map((e) => ({
-			id: e.id,
-			label: ""
-		})),
-		selectedIds: [],
-		onReorder: d ?? (() => {})
-	}), y = !!d;
-	return /* @__PURE__ */ n("div", {
-		className: [o.grid, p].filter(Boolean).join(" "),
-		children: /* @__PURE__ */ r("table", {
-			className: o.table,
-			children: [/* @__PURE__ */ n("thead", { children: /* @__PURE__ */ r("tr", { children: [y && /* @__PURE__ */ n("th", {
-				className: o.handleCol,
-				"aria-label": "drag"
-			}), l.map((e) => {
-				let i = e.sortable !== !1, a = m?.columnId === e.id, s = a ? m.direction === "asc" ? " ↑" : " ↓" : "";
-				return /* @__PURE__ */ n("th", {
-					className: [e.className, a ? o.sortActive : ""].filter(Boolean).join(" "),
-					"aria-sort": i ? a ? m.direction === "asc" ? "ascending" : "descending" : "none" : void 0,
-					children: i ? /* @__PURE__ */ r("button", {
-						type: "button",
-						className: o.sortButton,
-						onClick: () => _(e.id),
-						children: [e.header, s]
-					}) : /* @__PURE__ */ r(t, { children: [e.header, s] })
-				}, e.id);
-			})] }) }), /* @__PURE__ */ r("tbody", {
-				ref: y ? v.containerProps.ref : void 0,
-				children: [g.length === 0 && /* @__PURE__ */ n("tr", { children: /* @__PURE__ */ n("td", {
-					colSpan: l.length + +!!y,
-					className: o.empty,
-					children: f
-				}) }), g.map((e, t) => {
-					let i = v.state.draggedIds?.includes(e.id) ?? !1, a = v.state.targetIndex;
-					return /* @__PURE__ */ r("tr", {
-						className: [
-							i && o.dragging,
-							a === t && o.dropBefore,
-							a === g.length && t === g.length - 1 && o.dropAfter
-						].filter(Boolean).join(" ") || void 0,
-						children: [y && /* @__PURE__ */ n("td", {
-							className: o.handleCell,
-							onPointerDown: (n) => v.rowProps(e.id, t).onPointerDown(n),
-							children: /* @__PURE__ */ n("span", {
-								"aria-hidden": "true",
-								children: "⋮⋮"
-							})
-						}), l.map((t) => {
-							let r = t.accessor ?? ((e) => e[t.id]), i = t.render ? t.render(e) : String(r(e) ?? "");
-							return /* @__PURE__ */ n("td", {
-								className: t.className,
-								children: i
-							}, t.id);
-						})]
-					}, e.id);
-				})]
-			})]
-		})
-	});
-}
-//#endregion
-export { s as t };
-
-//# sourceMappingURL=DataGrid-C8KrYtw7.js.map

package/dist/chunks/DataGrid-C8KrYtw7.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DataGrid-C8KrYtw7.js","names":[],"sources":["../../src/components/DataGrid/DataGrid.module.css","../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":[".grid {\n  position: relative;\n  width: 100%;\n}\n\n.table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: var(--wzl-font-size-sm);\n}\n\n.table th,\n.table td {\n  text-align: left;\n  padding: 3px var(--wzl-space-3);\n  vertical-align: middle;\n}\n.table tbody tr {\n  border-bottom: 1px solid var(--wzl-line-subtle);\n}\n\n.table th {\n  font-weight: var(--wzl-font-weight-bold);\n  color: var(--wzl-fg-muted);\n  position: sticky;\n  top: 0;\n  background: var(--wzl-surface, #2a2018);\n  z-index: 1;\n  border-bottom: 1px solid var(--wzl-border);\n}\n\n.sortButton {\n  all: unset;\n  cursor: pointer;\n  user-select: none;\n  display: block;\n  width: 100%;\n}\n.sortButton:hover { color: var(--wzl-fg, #e6e7e9); }\n.sortButton:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring, var(--wzl-accent, #7fb069));\n  outline-offset: -2px;\n}\n.sortActive { color: var(--wzl-fg, #e6e7e9); }\n\n.empty {\n  color: var(--wzl-fg-muted);\n  font-style: italic;\n  padding: var(--wzl-space-4) 0;\n  text-align: center;\n}\n\n/* Drag-handle column. */\n.handleCol { width: 14px; }\n.handleCell {\n  width: 14px;\n  cursor: grab;\n  color: var(--wzl-fg-muted);\n  user-select: none;\n  text-align: center;\n}\n.handleCell:active { cursor: grabbing; }\n\n.dragging { opacity: 0.4; }\n\n.dropBefore > td { box-shadow: inset 0 2px 0 0 var(--wzl-accent, #7fb069); }\n.dropAfter > td { box-shadow: inset 0 -2px 0 0 var(--wzl-accent, #7fb069); }\n","/**\n * Lightweight sortable data grid. Use for inspector tables — action\n * registries, route maps, telemetry rows. Intentionally narrow:\n *\n * - Sortable columns (click header to cycle asc → desc → none)\n * - Custom cell render via per-column `render`\n * - Optional drag handles for row reordering (when `onReorder` is set)\n *\n * Not: virtual scrolling, column resizing, multi-column sort, filtering,\n * inline editing. Reach for a real grid library when you need those.\n */\nimport { useMemo, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { useReorderDragList } from '../../useReorderDragList';\nimport s from './DataGrid.module.css';\n\n/**\n * One column of a {@link DataGrid}. `id` doubles as the default property name\n * read off each row when no `accessor` is given.\n */\nexport interface DataGridColumn<Row> {\n  id: string;\n  header: ReactNode;\n  /** Pull a sortable value from the row. Defaults to `(row as any)[column.id]`. */\n  accessor?: (row: Row) => string | number | null | undefined;\n  /** Render the cell. Defaults to `String(accessor(row) ?? '')`. */\n  render?: (row: Row) => ReactNode;\n  /** Default true. Set false to suppress the sort affordance on this column. */\n  sortable?: boolean;\n  /** Optional CSS class on every <td> in this column. */\n  className?: string;\n}\n\n/** Props for {@link DataGrid}. */\nexport interface DataGridProps<Row extends { id: string }> {\n  rows: readonly Row[];\n  columns: readonly DataGridColumn<Row>[];\n  /** Initial sort. Omit for unsorted (rows render in input order). */\n  defaultSort?: { columnId: string; direction: 'asc' | 'desc' };\n  /** Enable drag handles in a leading column. Receives the reorder spec\n   *  (the existing `useReorderDragList` semantics — see weasel-ui). */\n  onReorder?: (ids: string[], targetIndex: number) => void;\n  /** Empty-state row text. Default `'—'`. */\n  empty?: ReactNode;\n  className?: string;\n}\n\ntype SortState = { columnId: string; direction: 'asc' | 'desc' } | null;\n\n/**\n * Sortable table for inspector-style data. Rows are keyed by `id`. Clicking a\n * sortable header cycles ascending, descending, unsorted; nullish values sort\n * last regardless of direction. Passing `onReorder` adds a leading drag-handle\n * column — note that the drag indices it reports are into the *sorted* row\n * order, not the input order.\n */\nexport function DataGrid<Row extends { id: string }>(props: DataGridProps<Row>) {\n  const { rows, columns, defaultSort, onReorder, empty = '—', className } = props;\n  const [sort, setSort] = useState<SortState>(defaultSort ?? null);\n\n  const sortedRows = useMemo(() => {\n    if (!sort) return [...rows];\n    const col = columns.find((c) => c.id === sort.columnId);\n    if (!col) return [...rows];\n    const get = col.accessor ?? ((row: Row) => (row as unknown as Record<string, unknown>)[col.id] as string | number | null | undefined);\n    const dir = sort.direction === 'asc' ? 1 : -1;\n    return [...rows].sort((a, b) => {\n      const av = get(a);\n      const bv = get(b);\n      if (av == null && bv == null) return 0;\n      if (av == null) return 1;\n      if (bv == null) return -1;\n      if (av < bv) return -1 * dir;\n      if (av > bv) return 1 * dir;\n      return 0;\n    });\n  }, [rows, columns, sort]);\n\n  const cycleSort = (columnId: string) => {\n    setSort((cur) => {\n      if (!cur || cur.columnId !== columnId) return { columnId, direction: 'asc' };\n      if (cur.direction === 'asc') return { columnId, direction: 'desc' };\n      return null;\n    });\n  };\n\n  // Drag handles via useReorderDragList. Adapter: the hook expects\n  // `{ id, label }`-shaped items; we map our rows to that shape (label\n  // unused — the hook only uses id and locked).\n  const drag = useReorderDragList({\n    items: sortedRows.map((r) => ({ id: r.id, label: '' })),\n    selectedIds: [],\n    onReorder: onReorder ?? (() => {}),\n  });\n  const dragEnabled = !!onReorder;\n\n  const cls = [s.grid, className].filter(Boolean).join(' ');\n\n  return (\n    <div\n      className={cls}\n    >\n      <table className={s.table}>\n        <thead>\n          <tr>\n            {dragEnabled && <th className={s.handleCol} aria-label=\"drag\" />}\n            {columns.map((col) => {\n              const sortable = col.sortable !== false;\n              const active = sort?.columnId === col.id;\n              const indicator = active ? (sort.direction === 'asc' ? ' ↑' : ' ↓') : '';\n              return (\n                <th\n                  key={col.id}\n                  className={[col.className, active ? s.sortActive : ''].filter(Boolean).join(' ')}\n                  aria-sort={sortable ? (active ? (sort.direction === 'asc' ? 'ascending' : 'descending') : 'none') : undefined}\n                >\n                  {sortable ? (\n                    <button type=\"button\" className={s.sortButton} onClick={() => cycleSort(col.id)}>\n                      {col.header}{indicator}\n                    </button>\n                  ) : (\n                    <>{col.header}{indicator}</>\n                  )}\n                </th>\n              );\n            })}\n          </tr>\n        </thead>\n        <tbody ref={dragEnabled ? (drag.containerProps.ref as React.RefCallback<HTMLTableSectionElement>) : undefined}>\n          {sortedRows.length === 0 && (\n            <tr>\n              <td colSpan={columns.length + (dragEnabled ? 1 : 0)} className={s.empty}>\n                {empty}\n              </td>\n            </tr>\n          )}\n          {sortedRows.map((row, i) => {\n            const isDragging = drag.state.draggedIds?.includes(row.id) ?? false;\n            const target = drag.state.targetIndex;\n            const rowCls = [\n              isDragging && s.dragging,\n              target === i && s.dropBefore,\n              target === sortedRows.length && i === sortedRows.length - 1 && s.dropAfter,\n            ].filter(Boolean).join(' ');\n            return (\n              <tr key={row.id} className={rowCls || undefined}>\n                {dragEnabled && (\n                  <td\n                    className={s.handleCell}\n                    onPointerDown={(e) => drag.rowProps(row.id, i).onPointerDown(e)}\n                  >\n                    <span aria-hidden=\"true\">⋮⋮</span>\n                  </td>\n                )}\n                {columns.map((col) => {\n                  const get = col.accessor ?? ((r: Row) => (r as unknown as Record<string, unknown>)[col.id] as string | number | null | undefined);\n                  const content = col.render ? col.render(row) : String(get(row) ?? '');\n                  return (\n                    <td key={col.id} className={col.className}>\n                      {content}\n                    </td>\n                  );\n                })}\n              </tr>\n            );\n          })}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/Dialog-fGqqQ6o_.js

@@ -1,61 +0,0 @@
-import { r as e } from "./portalHost-CjpCnuGU.js";
-import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Dialog as i, Heading as a, Modal as o, ModalOverlay as s } from "react-aria-components";
-var c = {
-	overlay: "_overlay_18n10_1",
-	modal: "_modal_18n10_29",
-	dialog: "_dialog_18n10_43",
-	header: "_header_18n10_51",
-	title: "_title_18n10_60",
-	close: "_close_18n10_68",
-	body: "_body_18n10_90",
-	footer: "_footer_18n10_97"
-};
-//#endregion
-//#region src/components/Dialog/Dialog.tsx
-function l(l) {
-	let { title: u, showCloseButton: d, children: f, footer: p, role: m = "dialog", className: h, isOpen: g, onOpenChange: _, portalContainer: v, ...y } = l, b = d ?? !!_, { anchor: x, portalProps: S } = e(v);
-	return /* @__PURE__ */ r(t, { children: [x, /* @__PURE__ */ n(s, {
-		...y,
-		isOpen: g,
-		onOpenChange: _,
-		className: c.overlay,
-		"data-weasel-overlay": "",
-		...S,
-		children: /* @__PURE__ */ n(o, {
-			className: [c.modal, h].filter(Boolean).join(" "),
-			children: /* @__PURE__ */ n(i, {
-				role: m,
-				className: c.dialog,
-				children: ({ close: e }) => /* @__PURE__ */ r(t, { children: [
-					(u !== void 0 || b) && /* @__PURE__ */ r("header", {
-						className: c.header,
-						children: [u !== void 0 && /* @__PURE__ */ n(a, {
-							slot: "title",
-							className: c.title,
-							children: u
-						}), b && /* @__PURE__ */ n("button", {
-							type: "button",
-							className: c.close,
-							onClick: e,
-							"aria-label": "Close dialog",
-							children: "×"
-						})]
-					}),
-					/* @__PURE__ */ n("div", {
-						className: c.body,
-						children: f
-					}),
-					p !== void 0 && /* @__PURE__ */ n("footer", {
-						className: c.footer,
-						children: p
-					})
-				] })
-			})
-		})
-	})] });
-}
-//#endregion
-export { l as t };
-
-//# sourceMappingURL=Dialog-fGqqQ6o_.js.map

package/dist/chunks/Dialog-fGqqQ6o_.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Dialog-fGqqQ6o_.js","names":[],"sources":["../../src/components/Dialog/Dialog.module.css","../../src/components/Dialog/Dialog.tsx"],"sourcesContent":[".overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  opacity: 0;\n  transition: opacity var(--wzl-motion-fast);\n}\n\n.overlay[data-entering] {\n  opacity: 0;\n}\n\n.overlay[data-entering][data-rac] {\n  opacity: 1;\n}\n\n.overlay[data-exiting] {\n  opacity: 0;\n}\n\n.overlay[data-rac]:not([data-entering]):not([data-exiting]) {\n  opacity: 1;\n}\n\n.modal {\n  background: var(--wzl-surface);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-md);\n  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  max-width: min(900px, calc(100vw - 32px));\n  max-height: calc(100vh - 32px);\n  display: flex;\n  flex-direction: column;\n  outline: none;\n}\n\n.dialog {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  flex: 1;\n  outline: none;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-6);\n  padding: var(--wzl-space-7) var(--wzl-space-8);\n  border-bottom: 1px solid var(--wzl-border);\n  flex: 0 0 auto;\n}\n\n.title {\n  flex: 1;\n  margin: 0;\n  font-size: var(--wzl-font-size);\n  font-weight: var(--wzl-font-weight-bold);\n  color: var(--wzl-fg);\n}\n\n.close {\n  flex: 0 0 auto;\n  width: var(--wzl-icon-button-size);\n  height: var(--wzl-icon-button-size);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-fg-muted);\n  cursor: pointer;\n  padding: 0;\n  font-size: var(--wzl-font-size-lg);\n  line-height: 1;\n}\n\n.close:hover {\n  background: var(--wzl-surface-hover);\n  color: var(--wzl-fg);\n}\n\n.body {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  padding: var(--wzl-space-8);\n}\n\n.footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--wzl-space-4);\n  padding: var(--wzl-space-6) var(--wzl-space-8);\n  border-top: 1px solid var(--wzl-border);\n  flex: 0 0 auto;\n}\n","import type { ReactNode } from 'react';\nimport {\n  Modal as RACModal,\n  ModalOverlay,\n  Dialog as RACDialog,\n  Heading,\n  type ModalOverlayProps,\n  type DialogProps as RACDialogProps,\n} from 'react-aria-components';\nimport { useOverlayPortal, type OverlayPortalProps, type WithoutPortalTarget } from '../../overlays/portalHost';\nimport s from './Dialog.module.css';\n\n/** Props for {@link Dialog}, on top of React Aria's `ModalOverlay` props. */\nexport type DialogProps = Omit<\n  WithoutPortalTarget<ModalOverlayProps>,\n  'children' | 'className'\n> &\n  OverlayPortalProps & {\n    /** Heading rendered in the dialog's default header. Omit when supplying\n     *  a custom `header` slot via children. */\n    title?: ReactNode;\n    /** Show the built-in close button. Defaults to true when `onOpenChange`\n     *  is wired so the user has an escape hatch. */\n    showCloseButton?: boolean;\n    /** Body content. */\n    children?: ReactNode;\n    /** Footer slot — typically action buttons. */\n    footer?: ReactNode;\n    /** ARIA role. Defaults to `dialog`. Use `alertdialog` for confirms. */\n    role?: RACDialogProps['role'];\n    /** Class applied to the modal box (inside the overlay). */\n    className?: string;\n  };\n\n/**\n * Modal dialog wrapping React Aria. Supplies a default header (title +\n * close), scrollable body, and footer slot. Pass `isOpen` + `onOpenChange`\n * for controlled visibility, or omit both and use a `<DialogTrigger>` from\n * `react-aria-components` upstream of this component.\n *\n * Escape, click-outside, focus trap, and scroll lock all come from the\n * underlying primitives.\n */\nexport function Dialog(props: DialogProps) {\n  const {\n    title,\n    showCloseButton,\n    children,\n    footer,\n    role = 'dialog',\n    className,\n    isOpen,\n    onOpenChange,\n    portalContainer,\n    ...rest\n  } = props;\n\n  const showClose = showCloseButton ?? Boolean(onOpenChange);\n  const { anchor, portalProps } = useOverlayPortal(portalContainer);\n\n  return (\n    <>\n      {anchor}\n      <ModalOverlay\n        {...rest}\n        isOpen={isOpen}\n        onOpenChange={onOpenChange}\n        className={s.overlay}\n        data-weasel-overlay=\"\"\n        {...portalProps}\n      >\n        <RACModal className={[s.modal, className].filter(Boolean).join(' ')}>\n          <RACDialog role={role} className={s.dialog}>\n            {({ close }) => (\n              <>\n                {(title !== undefined || showClose) && (\n                  <header className={s.header}>\n                    {title !== undefined && (\n                      <Heading slot=\"title\" className={s.title}>{title}</Heading>\n                    )}\n                    {showClose && (\n                      <button\n                        type=\"button\"\n                        className={s.close}\n                        onClick={close}\n                        aria-label=\"Close dialog\"\n                      >\n                        ×\n                      </button>\n                    )}\n                  </header>\n                )}\n                <div className={s.body}>{children}</div>\n                {footer !== undefined && <footer className={s.footer}>{footer}</footer>}\n              </>\n            )}\n          </RACDialog>\n        </RACModal>\n      </ModalOverlay>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AC2CA,SAAgB,EAAO,GAAoB;CACzC,IAAM,EACJ,UACA,oBACA,aACA,WACA,UAAO,UACP,cACA,WACA,iBACA,oBACA,GAAG,MACD,GAEE,IAAY,KAAmB,EAAQ,GACvC,EAAE,WAAQ,mBAAgB,EAAiB,EAAgB;AAEjE,QACE,kBAAA,GAAA,EAAA,UAAA,CACG,GACD,kBAAC,GAAD;EACE,GAAI;EACI;EACM;EACd,WAAW,EAAE;EACb,uBAAoB;EACpB,GAAI;YAEJ,kBAAC,GAAD;GAAU,WAAW,CAAC,EAAE,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;aACjE,kBAAC,GAAD;IAAiB;IAAM,WAAW,EAAE;eAChC,EAAE,eACF,kBAAA,GAAA,EAAA,UAAA;MACI,MAAU,KAAA,KAAa,MACvB,kBAAC,UAAD;MAAQ,WAAW,EAAE;gBAArB,CACG,MAAU,KAAA,KACT,kBAAC,GAAD;OAAS,MAAK;OAAQ,WAAW,EAAE;iBAAQ;OAAgB,CAAA,EAE5D,KACC,kBAAC,UAAD;OACE,MAAK;OACL,WAAW,EAAE;OACb,SAAS;OACT,cAAW;iBACZ;OAEQ,CAAA,CAEJ;;KAEX,kBAAC,OAAD;MAAK,WAAW,EAAE;MAAO;MAAe,CAAA;KACvC,MAAW,KAAA,KAAa,kBAAC,UAAD;MAAQ,WAAW,EAAE;gBAAS;MAAgB,CAAA;KACtE,EAAA,CAAA;IAEK,CAAA;GACH,CAAA;EACE,CAAA,CACd,EAAA,CAAA"}

package/dist/chunks/Disclosure-CILDfWsU.js

@@ -1,47 +0,0 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-var n = {
-	twisty: "_twisty_1yb0k_5",
-	mark: "_mark_1yb0k_45",
-	down: "_down_1yb0k_57",
-	row: "_row_1yb0k_71",
-	rowBody: "_rowBody_1yb0k_79"
-};
-//#endregion
-//#region src/components/Disclosure/Disclosure.tsx
-function r({ open: t, onToggle: r, label: i, controls: a, direction: o = "right", size: s = 12, disabled: c, className: l }) {
-	return /* @__PURE__ */ e("button", {
-		type: "button",
-		className: [
-			n.twisty,
-			o === "down" && n.down,
-			l
-		].filter(Boolean).join(" "),
-		"aria-expanded": t,
-		"aria-controls": a,
-		"aria-label": i,
-		disabled: c,
-		onClick: r,
-		children: /* @__PURE__ */ e("svg", {
-			className: n.mark,
-			viewBox: "0 0 12 12",
-			width: s,
-			height: s,
-			"aria-hidden": "true",
-			focusable: "false",
-			children: /* @__PURE__ */ e("path", { d: "M4 2.5 L8.5 6 L4 9.5 Z" })
-		})
-	});
-}
-function i({ children: i, className: a, ...o }) {
-	return /* @__PURE__ */ t("div", {
-		className: a ? `${n.row} ${a}` : n.row,
-		children: [/* @__PURE__ */ e(r, { ...o }), /* @__PURE__ */ e("div", {
-			className: n.rowBody,
-			children: i
-		})]
-	});
-}
-//#endregion
-export { i as n, r as t };
-
-//# sourceMappingURL=Disclosure-CILDfWsU.js.map

package/dist/chunks/Disclosure-CILDfWsU.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Disclosure-CILDfWsU.js","names":[],"sources":["../../src/components/Disclosure/Disclosure.module.css","../../src/components/Disclosure/Disclosure.tsx"],"sourcesContent":["/* Every dimension is stated because a host app's bare-element defaults can be\n   authored at zero specificity — labkit's `:where(.lk-root) :where(button)`\n   sets `height: var(--wzl-control-h)` and horizontal padding, which would\n   otherwise stretch a 12px mark into a full-height control. */\n.twisty {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  /* A floor, not a size: a control sized to a 12px glyph is a 12px target,\n     which is under every pointer-size guideline there is. Stated as a minimum\n     so a larger mark grows the target with it rather than being shrunk to fit\n     — a flex item's default `flex-shrink: 1` would otherwise crush it. */\n  min-width: var(--wzl-disclosure-target, var(--wzl-control-h-sm));\n  min-height: var(--wzl-disclosure-target, var(--wzl-control-h-sm));\n  padding: 0;\n  border: 0;\n  border-radius: var(--wzl-radius-sm);\n  background: none;\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  color: var(--wzl-fg-muted);\n  line-height: 1;\n  cursor: pointer;\n}\n\n.twisty:hover:not(:disabled) {\n  color: var(--wzl-fg);\n  background: var(--wzl-surface-raised);\n}\n\n.twisty:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: -2px;\n  color: var(--wzl-fg);\n}\n\n.twisty:disabled {\n  color: var(--wzl-fg-subtle);\n  cursor: not-allowed;\n}\n\n/* `currentColor` so the mark follows the button's own hover and disabled\n   colors, and so a consumer can recolor the pair with one declaration. */\n.mark {\n  display: block;\n  flex: none;\n  fill: currentColor;\n  transition: transform var(--wzl-motion-fast, 90ms) var(--wzl-ease-out-cubic);\n}\n\n.twisty[aria-expanded='true'] .mark {\n  transform: rotate(90deg);\n}\n\n/* `direction=\"down\"` starts pointing down and lifts to point up. */\n.down .mark {\n  transform: rotate(90deg);\n}\n\n.down[aria-expanded='true'] .mark {\n  transform: rotate(-90deg);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .mark {\n    transition: none;\n  }\n}\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-disclosure-gap, 4px);\n}\n\n/* The row's content takes the rest and is allowed to shrink; the twisty is\n   not, so a long label truncates rather than crushing the control. */\n.rowBody {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n","import type { ReactNode } from 'react';\nimport s from './Disclosure.module.css';\n\n/** Which way the mark points when the section is closed. */\nexport type DisclosureDirection = 'right' | 'down';\n\n/** Props for `<Disclosure>`. */\nexport interface DisclosureProps {\n  /** Whether the section it controls is open. The consumer owns this. */\n  open: boolean;\n  onToggle: () => void;\n  /**\n   * Names the section, for a screen reader. The control has no text of its\n   * own, so without this it announces as an unlabeled button.\n   */\n  label: string;\n  /**\n   * `id` of the element this expands. Sets `aria-controls`, which lets a\n   * screen reader move to the revealed content.\n   */\n  controls?: string;\n  /** Which way the closed mark points. `'right'` (default) rotates down when\n   *  open; `'down'` rotates up. */\n  direction?: DisclosureDirection;\n  /** Mark size in px. The hit target is at least 20px and grows with it.\n   *  Default 12. */\n  size?: number;\n  disabled?: boolean;\n  className?: string;\n}\n\n/**\n * The twisty on a collapsible section: a triangle that turns as it opens.\n *\n * Presentational — it holds no open/closed state and renders no children.\n * The consumer owns the state and the panel; this is the control that toggles\n * it, and `aria-expanded` is what ties the two together.\n *\n * Three things it settles that a hand-rolled twisty keeps getting wrong. The\n * mark is drawn rather than typed, because `--wzl-font-ui` carries no ▸/▾ and\n * a text glyph falls back to whatever the system offers at whatever size that\n * font renders it — around 6px against 13px body text, which reads as dirt on\n * the screen. The hit target is larger than the mark. And it is a sibling of\n * the row's label rather than a child, so clicking to expand does not actuate\n * the label's own control.\n *\n * Deliberately not part of the icon register, on the same grounds as\n * `DragHandleGlyph`: that register is outline strokes at a fixed weight, and\n * `base.mjs` rejects a solid triangle in it by name. A disclosure mark is\n * filled.\n */\nexport function Disclosure({\n  open,\n  onToggle,\n  label,\n  controls,\n  direction = 'right',\n  size = 12,\n  disabled,\n  className,\n}: DisclosureProps) {\n  const cls = [s.twisty, direction === 'down' && s.down, className].filter(Boolean).join(' ');\n  return (\n    <button\n      type=\"button\"\n      className={cls}\n      aria-expanded={open}\n      aria-controls={controls}\n      aria-label={label}\n      disabled={disabled}\n      onClick={onToggle}\n    >\n      <svg\n        className={s.mark}\n        viewBox=\"0 0 12 12\"\n        width={size}\n        height={size}\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        {/* Vertex on the right edge at the vertical center, so the rotation\n            about the box center keeps the point on the same circle. */}\n        <path d=\"M4 2.5 L8.5 6 L4 9.5 Z\" />\n      </svg>\n    </button>\n  );\n}\n\n/** Props for `<DisclosureRow>`. */\nexport interface DisclosureRowProps extends Omit<DisclosureProps, 'className'> {\n  /** The row's own content — a label, a checkbox, a count. */\n  children: ReactNode;\n  className?: string;\n}\n\n/**\n * A `<Disclosure>` and a row of content beside it, laid out so the twisty\n * leads and the content takes the rest.\n *\n * The layout is the point: the twisty sits *outside* whatever the row puts in\n * it, so a row whose content is a `<label>` wrapping a checkbox stays\n * clickable as a label without the twisty actuating it.\n */\nexport function DisclosureRow({ children, className, ...twisty }: DisclosureRowProps) {\n  return (\n    <div className={className ? `${s.row} ${className}` : s.row}>\n      <Disclosure {...twisty} />\n      <div className={s.rowBody}>{children}</div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;ACmDA,SAAgB,EAAW,EACzB,SACA,aACA,UACA,aACA,eAAY,SACZ,UAAO,IACP,aACA,gBACkB;AAElB,QACE,kBAAC,UAAD;EACE,MAAK;EACL,WAJQ;GAAC,EAAE;GAAQ,MAAc,UAAU,EAAE;GAAM;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAIxE;EACX,iBAAe;EACf,iBAAe;EACf,cAAY;EACF;EACV,SAAS;YAET,kBAAC,OAAD;GACE,WAAW,EAAE;GACb,SAAQ;GACR,OAAO;GACP,QAAQ;GACR,eAAY;GACZ,WAAU;aAIV,kBAAC,QAAD,EAAM,GAAE,0BAA2B,CAAA;GAC/B,CAAA;EACC,CAAA;;AAmBb,SAAgB,EAAc,EAAE,aAAU,cAAW,GAAG,KAA8B;AACpF,QACE,kBAAC,OAAD;EAAK,WAAW,IAAY,GAAG,EAAE,IAAI,GAAG,MAAc,EAAE;YAAxD,CACE,kBAAC,GAAD,EAAY,GAAI,GAAU,CAAA,EAC1B,kBAAC,OAAD;GAAK,WAAW,EAAE;GAAU;GAAe,CAAA,CACvC"}