@devalok/shilp-sutra 0.57.0 → 0.59.0

package/dist/_chunks/shared.js

@@ -1,36 +1,37 @@
 "use client";
 import { tweens as e } from "../ui/lib/motion.js";
-import { cn as t } from "../ui/lib/utils.js";
-import { Icon as n } from "../ui/icon.js";
-import { Button as r } from "../ui/button.js";
-import { Range as i, Root as a, Thumb as o, Track as s } from "./primitives/react-slider.js";
+import { MotionPreference as t } from "./motion-preference.js";
+import { cn as n } from "../ui/lib/utils.js";
+import { Icon as r } from "../ui/icon.js";
+import { Button as i } from "../ui/button.js";
+import { Range as a, Root as o, Thumb as s, Track as c } from "./primitives/react-slider.js";
 import "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { IconAlertTriangle as u, IconDownload as d, IconVolume as f, IconVolumeOff as p } from "@tabler/icons-react";
-import { motion as m } from "framer-motion";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { IconAlertTriangle as d, IconDownload as f, IconVolume as p, IconVolumeOff as m } from "@tabler/icons-react";
+import { motion as h } from "framer-motion";
 //#region src/composed/file-preview/shared.tsx
-function h({ message: e, url: t }) {
-	return /* @__PURE__ */ l("div", {
+function g({ message: e, url: t }) {
+	return /* @__PURE__ */ u("div", {
 		className: "flex flex-col items-center justify-center gap-ds-04 rounded-control border border-surface-border bg-surface-sunken p-ds-08 text-center",
 		children: [
-			/* @__PURE__ */ c(n, {
-				icon: u,
+			/* @__PURE__ */ l(r, {
+				icon: d,
 				size: "2xl",
 				className: "text-warning-9"
 			}),
-			/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("p", {
+			/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("p", {
 				className: "text-body-md font-semibold text-surface-fg",
 				children: "Preview unavailable"
-			}), /* @__PURE__ */ c("p", {
+			}), /* @__PURE__ */ l("p", {
 				className: "text-body-sm text-surface-fg-muted mt-ds-01",
 				children: e
 			})] }),
-			/* @__PURE__ */ c(r, {
+			/* @__PURE__ */ l(i, {
 				variant: "outline",
 				size: "xs",
-				startIcon: /* @__PURE__ */ c(n, { icon: d }),
+				startIcon: /* @__PURE__ */ l(r, { icon: f }),
 				asChild: !0,
-				children: /* @__PURE__ */ c("a", {
+				children: /* @__PURE__ */ l("a", {
 					href: t,
 					download: !0,
 					target: "_blank",
@@ -41,8 +42,8 @@ function h({ message: e, url: t }) {
 		]
 	});
 }
-function g({ children: n, className: r }) {
-	return /* @__PURE__ */ c(m.div, {
+function _({ children: r, className: i }) {
+	return /* @__PURE__ */ l(t, { children: /* @__PURE__ */ l(h.div, {
 		initial: {
 			opacity: 0,
 			y: 8
@@ -52,48 +53,48 @@ function g({ children: n, className: r }) {
 			y: 0
 		},
 		transition: e.fade,
-		className: t("flex items-center gap-ds-01 rounded-control bg-surface-overlay/95 px-ds-02 py-ds-01 shadow-floating backdrop-blur-xs", r),
-		children: n
-	});
+		className: n("flex items-center gap-ds-01 rounded-control bg-surface-overlay/95 px-ds-02 py-ds-01 shadow-floating backdrop-blur-xs", i),
+		children: r
+	}) });
 }
-function _() {
-	return /* @__PURE__ */ c("div", { className: "mx-ds-01 h-4 w-px bg-surface-border-subtle" });
+function v() {
+	return /* @__PURE__ */ l("div", { className: "mx-ds-01 h-4 w-px bg-surface-border-subtle" });
 }
-function v({ value: e, max: n = 100, step: r = 1, onValueChange: u, tone: d = "light", ariaLabel: f, disabled: p, className: m }) {
+function y({ value: e, max: t = 100, step: r = 1, onValueChange: i, tone: d = "light", ariaLabel: f, disabled: p, className: m }) {
 	let h = d === "dark";
-	return /* @__PURE__ */ l(a, {
-		className: t("group/ms relative flex h-3 w-full cursor-pointer touch-none select-none items-center", m),
+	return /* @__PURE__ */ u(o, {
+		className: n("group/ms relative flex h-3 w-full cursor-pointer touch-none select-none items-center", m),
 		value: [e],
-		max: n,
+		max: t,
 		step: r,
 		disabled: p,
-		onValueChange: (e) => u(e[0] ?? 0),
+		onValueChange: (e) => i(e[0] ?? 0),
 		"aria-label": f,
-		children: [/* @__PURE__ */ c(s, {
-			className: t("relative h-1 w-full grow overflow-hidden rounded-pill", h ? "bg-white/30" : "bg-surface-sunken"),
-			children: /* @__PURE__ */ c(i, { className: t("absolute h-full rounded-pill", h ? "bg-white" : "bg-accent-9") })
-		}), /* @__PURE__ */ c(o, { className: t("block h-3 w-3 rounded-pill shadow-raised outline-hidden transition-[opacity,transform] duration-fast-02", "opacity-0 group-hover/ms:opacity-100 focus:opacity-100 active:scale-110", "focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-1", h ? "bg-white focus-visible:ring-white" : "bg-accent-9 focus-visible:ring-accent-9") })]
+		children: [/* @__PURE__ */ l(c, {
+			className: n("relative h-1 w-full grow overflow-hidden rounded-pill", h ? "bg-white/30" : "bg-surface-sunken"),
+			children: /* @__PURE__ */ l(a, { className: n("absolute h-full rounded-pill", h ? "bg-white" : "bg-accent-9") })
+		}), /* @__PURE__ */ l(s, { className: n("block h-3 w-3 rounded-pill shadow-raised outline-hidden transition-[opacity,transform] duration-fast-02", "opacity-0 group-hover/ms:opacity-100 focus:opacity-100 active:scale-110", "focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-1", h ? "bg-white focus-visible:ring-white" : "bg-accent-9 focus-visible:ring-accent-9") })]
 	});
 }
-function y({ volume: e, muted: r, onVolumeChange: i, onMuteToggle: a, variant: o = "light" }) {
-	let s = r ? 0 : e;
-	return /* @__PURE__ */ l("div", {
+function b({ volume: e, muted: t, onVolumeChange: i, onMuteToggle: a, variant: o = "light" }) {
+	let s = t ? 0 : e;
+	return /* @__PURE__ */ u("div", {
 		className: "flex items-center gap-ds-02 shrink-0 group/vol",
-		children: [/* @__PURE__ */ c("button", {
+		children: [/* @__PURE__ */ l("button", {
 			onClick: a,
-			className: t("transition-colors", o === "dark" ? "text-white hover:text-white/80" : "text-surface-fg-muted hover:text-surface-fg"),
-			"aria-label": r ? "Unmute (M)" : "Mute (M)",
-			title: r ? "Unmute" : "Mute",
-			children: r || e === 0 ? /* @__PURE__ */ c(n, {
-				icon: p,
+			className: n("transition-colors", o === "dark" ? "text-white hover:text-white/80" : "text-surface-fg-muted hover:text-surface-fg"),
+			"aria-label": t ? "Unmute (M)" : "Mute (M)",
+			title: t ? "Unmute" : "Mute",
+			children: t || e === 0 ? /* @__PURE__ */ l(r, {
+				icon: m,
 				size: "sm"
-			}) : /* @__PURE__ */ c(n, {
-				icon: f,
+			}) : /* @__PURE__ */ l(r, {
+				icon: p,
 				size: "sm"
 			})
-		}), /* @__PURE__ */ c("div", {
+		}), /* @__PURE__ */ l("div", {
 			className: "flex w-0 items-center overflow-hidden transition-[width] duration-200 ease-productive-standard group-hover/vol:w-20 focus-within:w-20",
-			children: /* @__PURE__ */ c(v, {
+			children: /* @__PURE__ */ l(y, {
 				value: s,
 				max: 1,
 				step: .01,
@@ -104,10 +105,10 @@ function y({ volume: e, muted: r, onVolumeChange: i, onMuteToggle: a, variant: o
 		})]
 	});
 }
-function b(e) {
+function x(e) {
 	if (!isFinite(e) || e < 0) return "0:00";
 	let t = Math.floor(e / 3600), n = Math.floor(e % 3600 / 60), r = Math.floor(e % 60);
 	return t > 0 ? `${t}:${n.toString().padStart(2, "0")}:${r.toString().padStart(2, "0")}` : `${n}:${r.toString().padStart(2, "0")}`;
 }
 //#endregion
-export { h as ErrorFallback, v as MediaSlider, g as Toolbar, _ as ToolbarDivider, y as VolumeControl, b as formatTime };
+export { g as ErrorFallback, y as MediaSlider, _ as Toolbar, v as ToolbarDivider, b as VolumeControl, x as formatTime };

package/dist/_chunks/shared.js.map

@@ -1 +1 @@
-{"version":3,"file":"shared.js","names":[],"sources":["../../src/composed/file-preview/shared.tsx"],"sourcesContent":["'use client'\n\nimport * as SliderPrimitive from '@primitives/react-slider'\nimport {\n  IconAlertTriangle,\n  IconDownload,\n  IconVolume,\n  IconVolumeOff,\n} from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Button } from '../../ui/button'\nimport { Icon } from '../../ui/icon'\nimport { tweens } from '../../ui/lib/motion'\nimport { cn } from '../../ui/lib/utils'\n\n// ============================================================\n// Shared: Error Fallback\n// ============================================================\n\nexport function ErrorFallback({ message, url }: { message: string; url: string }) {\n  return (\n    <div className=\"flex flex-col items-center justify-center gap-ds-04 rounded-control border border-surface-border bg-surface-sunken p-ds-08 text-center\">\n      <Icon icon={IconAlertTriangle} size=\"2xl\" className=\"text-warning-9\" />\n      <div>\n        <p className=\"text-body-md font-semibold text-surface-fg\">Preview unavailable</p>\n        <p className=\"text-body-sm text-surface-fg-muted mt-ds-01\">{message}</p>\n      </div>\n      <Button variant=\"outline\" size=\"xs\" startIcon={<Icon icon={IconDownload} />} asChild>\n        <a href={url} download target=\"_blank\" rel=\"noopener noreferrer\">Download file</a>\n      </Button>\n    </div>\n  )\n}\n\n// ============================================================\n// Shared: Floating Toolbar\n// ============================================================\n\nexport function Toolbar({ children, className }: { children: React.ReactNode; className?: string }) {\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: 8 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={tweens.fade}\n      className={cn(\n        'flex items-center gap-ds-01 rounded-control bg-surface-overlay/95 px-ds-02 py-ds-01 shadow-floating backdrop-blur-xs',\n        className,\n      )}\n    >\n      {children}\n    </motion.div>\n  )\n}\n\nexport function ToolbarDivider() {\n  return <div className=\"mx-ds-01 h-4 w-px bg-surface-border-subtle\" />\n}\n\n// ============================================================\n// Shared: MediaSlider — slim seek/scrub/volume control\n// Composes the Radix Slider primitive (the same one ui/Slider uses) so it's\n// keyboard-operable (Arrow/Home/End), shows a visible focus ring, and forced-colors-safe —\n// unlike the old mouse-only <div role=\"slider\">. Styled slim for media chrome;\n// the thumb is hover/focus-reveal (hidden at rest, shown on hover, drag, or\n// keyboard focus). `tone=\"dark\"` = white-on-overlay; `tone=\"light\"` = accent.\n// ============================================================\n\nexport function MediaSlider({\n  value,\n  max = 100,\n  step = 1,\n  onValueChange,\n  tone = 'light',\n  ariaLabel,\n  disabled,\n  className,\n}: {\n  value: number\n  max?: number\n  step?: number\n  onValueChange: (v: number) => void\n  tone?: 'light' | 'dark'\n  ariaLabel: string\n  disabled?: boolean\n  className?: string\n}) {\n  const isDark = tone === 'dark'\n  return (\n    <SliderPrimitive.Root\n      className={cn(\n        'group/ms relative flex h-3 w-full cursor-pointer touch-none select-none items-center',\n        className,\n      )}\n      value={[value]}\n      max={max}\n      step={step}\n      disabled={disabled}\n      onValueChange={(vals) => onValueChange(vals[0] ?? 0)}\n      aria-label={ariaLabel}\n    >\n      <SliderPrimitive.Track\n        className={cn(\n          'relative h-1 w-full grow overflow-hidden rounded-pill',\n          isDark ? 'bg-white/30' : 'bg-surface-sunken',\n        )}\n      >\n        <SliderPrimitive.Range\n          className={cn('absolute h-full rounded-pill', isDark ? 'bg-white' : 'bg-accent-9')}\n        />\n      </SliderPrimitive.Track>\n      <SliderPrimitive.Thumb\n        className={cn(\n          'block h-3 w-3 rounded-pill shadow-raised outline-hidden transition-[opacity,transform] duration-fast-02',\n          // hover/focus-reveal: hidden at rest, shown on hover, drag (focus), or keyboard\n          'opacity-0 group-hover/ms:opacity-100 focus:opacity-100 active:scale-110',\n          'focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-1',\n          isDark ? 'bg-white focus-visible:ring-white' : 'bg-accent-9 focus-visible:ring-accent-9',\n        )}\n      />\n    </SliderPrimitive.Root>\n  )\n}\n\n// ============================================================\n// Shared: Volume Slider (Spotify/YouTube style)\n// ============================================================\n\nexport function VolumeControl({\n  volume,\n  muted,\n  onVolumeChange,\n  onMuteToggle,\n  variant = 'light',\n}: {\n  volume: number\n  muted: boolean\n  onVolumeChange: (v: number) => void\n  onMuteToggle: () => void\n  variant?: 'light' | 'dark'\n}) {\n  const displayVolume = muted ? 0 : volume\n  const isDark = variant === 'dark'\n  const iconClass = isDark ? 'text-white hover:text-white/80' : 'text-surface-fg-muted hover:text-surface-fg'\n\n  return (\n    <div className=\"flex items-center gap-ds-02 shrink-0 group/vol\">\n      <button onClick={onMuteToggle} className={cn('transition-colors', iconClass)} aria-label={muted ? 'Unmute (M)' : 'Mute (M)'} title={muted ? 'Unmute' : 'Mute'}>\n        {muted || volume === 0 ? <Icon icon={IconVolumeOff} size=\"sm\" /> : <Icon icon={IconVolume} size=\"sm\" />}\n      </button>\n      <div className=\"flex w-0 items-center overflow-hidden transition-[width] duration-200 ease-productive-standard group-hover/vol:w-20 focus-within:w-20\">\n        <MediaSlider\n          value={displayVolume}\n          max={1}\n          step={0.01}\n          onValueChange={onVolumeChange}\n          tone={variant}\n          ariaLabel=\"Volume\"\n        />\n      </div>\n    </div>\n  )\n}\n\n// ============================================================\n// Shared: Time Formatting\n// ============================================================\n\nexport function formatTime(s: number): string {\n  if (!isFinite(s) || s < 0) return '0:00'\n  const h = Math.floor(s / 3600)\n  const m = Math.floor((s % 3600) / 60)\n  const sec = Math.floor(s % 60)\n  if (h > 0) return `${h}:${m.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`\n  return `${m}:${sec.toString().padStart(2, '0')}`\n}\n"],"mappings":";;;;;;;;;;AAqBA,SAAgB,EAAc,EAAE,YAAS,UAAyC;CAChF,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD;IAAM,MAAM;IAAmB,MAAK;IAAM,WAAU;GAAkB,CAAA;GACtE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;IAAG,WAAU;cAA6C;GAAsB,CAAA,GAChF,kBAAC,KAAD;IAAG,WAAU;cAA+C;GAAW,CAAA,CACpE,EAAA,CAAA;GACL,kBAAC,GAAD;IAAQ,SAAQ;IAAU,MAAK;IAAK,WAAW,kBAAC,GAAD,EAAM,MAAM,EAAe,CAAA;IAAG,SAAA;cAC3E,kBAAC,KAAD;KAAG,MAAM;KAAK,UAAA;KAAS,QAAO;KAAS,KAAI;eAAsB;IAAgB,CAAA;GAC3E,CAAA;EACL;;AAET;AAMA,SAAgB,EAAQ,EAAE,aAAU,gBAAgE;CAClG,OACE,kBAAC,EAAO,KAAR;EACE,SAAS;GAAE,SAAS;GAAG,GAAG;EAAE;EAC5B,SAAS;GAAE,SAAS;GAAG,GAAG;EAAE;EAC5B,YAAY,EAAO;EACnB,WAAW,EACT,wHACA,CACF;EAEC;CACS,CAAA;AAEhB;AAEA,SAAgB,IAAiB;CAC/B,OAAO,kBAAC,OAAD,EAAK,WAAU,6CAA8C,CAAA;AACtE;AAWA,SAAgB,EAAY,EAC1B,UACA,SAAM,KACN,UAAO,GACP,kBACA,UAAO,SACP,cACA,aACA,gBAUC;CACD,IAAM,IAAS,MAAS;CACxB,OACE,kBAAC,GAAD;EACE,WAAW,EACT,wFACA,CACF;EACA,OAAO,CAAC,CAAK;EACR;EACC;EACI;EACV,gBAAgB,MAAS,EAAc,EAAK,MAAM,CAAC;EACnD,cAAY;YAVd,CAYE,kBAAC,GAAD;GACE,WAAW,EACT,yDACA,IAAS,gBAAgB,mBAC3B;aAEA,kBAAC,GAAD,EACE,WAAW,EAAG,gCAAgC,IAAS,aAAa,aAAa,EAClF,CAAA;EACoB,CAAA,GACvB,kBAAC,GAAD,EACE,WAAW,EACT,2GAEA,2EACA,8EACA,IAAS,sCAAsC,yCACjD,EACD,CAAA,CACmB;;AAE1B;AAMA,SAAgB,EAAc,EAC5B,WACA,UACA,mBACA,iBACA,aAAU,WAOT;CACD,IAAM,IAAgB,IAAQ,IAAI;CAIlC,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,UAAD;GAAQ,SAAS;GAAc,WAAW,EAAG,qBALlC,MAAY,SACA,mCAAmC,6CAIiB;GAAG,cAAY,IAAQ,eAAe;GAAY,OAAO,IAAQ,WAAW;aACpJ,KAAS,MAAW,IAAI,kBAAC,GAAD;IAAM,MAAM;IAAe,MAAK;GAAM,CAAA,IAAI,kBAAC,GAAD;IAAM,MAAM;IAAY,MAAK;GAAM,CAAA;EAChG,CAAA,GACR,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,GAAD;IACE,OAAO;IACP,KAAK;IACL,MAAM;IACN,eAAe;IACf,MAAM;IACN,WAAU;GACX,CAAA;EACE,CAAA,CACF;;AAET;AAMA,SAAgB,EAAW,GAAmB;CAC5C,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,GAAG,OAAO;CAClC,IAAM,IAAI,KAAK,MAAM,IAAI,IAAI,GACvB,IAAI,KAAK,MAAO,IAAI,OAAQ,EAAE,GAC9B,IAAM,KAAK,MAAM,IAAI,EAAE;CAE7B,OADI,IAAI,IAAU,GAAG,EAAE,GAAG,EAAE,SAAS,CAAC,CAAC,SAAS,GAAG,GAAG,EAAE,GAAG,EAAI,SAAS,CAAC,CAAC,SAAS,GAAG,GAAG,MAClF,GAAG,EAAE,GAAG,EAAI,SAAS,CAAC,CAAC,SAAS,GAAG,GAAG;AAC/C"}
+{"version":3,"file":"shared.js","names":[],"sources":["../../src/composed/file-preview/shared.tsx"],"sourcesContent":["'use client'\n\nimport * as SliderPrimitive from '@primitives/react-slider'\nimport {\n  IconAlertTriangle,\n  IconDownload,\n  IconVolume,\n  IconVolumeOff,\n} from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { MotionPreference } from '../../motion/motion-preference'\nimport { Button } from '../../ui/button'\nimport { Icon } from '../../ui/icon'\nimport { tweens } from '../../ui/lib/motion'\nimport { cn } from '../../ui/lib/utils'\n\n// ============================================================\n// Shared: Error Fallback\n// ============================================================\n\nexport function ErrorFallback({ message, url }: { message: string; url: string }) {\n  return (\n    <div className=\"flex flex-col items-center justify-center gap-ds-04 rounded-control border border-surface-border bg-surface-sunken p-ds-08 text-center\">\n      <Icon icon={IconAlertTriangle} size=\"2xl\" className=\"text-warning-9\" />\n      <div>\n        <p className=\"text-body-md font-semibold text-surface-fg\">Preview unavailable</p>\n        <p className=\"text-body-sm text-surface-fg-muted mt-ds-01\">{message}</p>\n      </div>\n      <Button variant=\"outline\" size=\"xs\" startIcon={<Icon icon={IconDownload} />} asChild>\n        <a href={url} download target=\"_blank\" rel=\"noopener noreferrer\">Download file</a>\n      </Button>\n    </div>\n  )\n}\n\n// ============================================================\n// Shared: Floating Toolbar\n// ============================================================\n\nexport function Toolbar({ children, className }: { children: React.ReactNode; className?: string }) {\n  return (\n    <MotionPreference>\n      <motion.div\n        initial={{ opacity: 0, y: 8 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={tweens.fade}\n        className={cn(\n          'flex items-center gap-ds-01 rounded-control bg-surface-overlay/95 px-ds-02 py-ds-01 shadow-floating backdrop-blur-xs',\n          className,\n        )}\n      >\n        {children}\n      </motion.div>\n    </MotionPreference>\n  )\n}\n\nexport function ToolbarDivider() {\n  return <div className=\"mx-ds-01 h-4 w-px bg-surface-border-subtle\" />\n}\n\n// ============================================================\n// Shared: MediaSlider — slim seek/scrub/volume control\n// Composes the Radix Slider primitive (the same one ui/Slider uses) so it's\n// keyboard-operable (Arrow/Home/End), shows a visible focus ring, and forced-colors-safe —\n// unlike the old mouse-only <div role=\"slider\">. Styled slim for media chrome;\n// the thumb is hover/focus-reveal (hidden at rest, shown on hover, drag, or\n// keyboard focus). `tone=\"dark\"` = white-on-overlay; `tone=\"light\"` = accent.\n// ============================================================\n\nexport function MediaSlider({\n  value,\n  max = 100,\n  step = 1,\n  onValueChange,\n  tone = 'light',\n  ariaLabel,\n  disabled,\n  className,\n}: {\n  value: number\n  max?: number\n  step?: number\n  onValueChange: (v: number) => void\n  tone?: 'light' | 'dark'\n  ariaLabel: string\n  disabled?: boolean\n  className?: string\n}) {\n  const isDark = tone === 'dark'\n  return (\n    <SliderPrimitive.Root\n      className={cn(\n        'group/ms relative flex h-3 w-full cursor-pointer touch-none select-none items-center',\n        className,\n      )}\n      value={[value]}\n      max={max}\n      step={step}\n      disabled={disabled}\n      onValueChange={(vals) => onValueChange(vals[0] ?? 0)}\n      aria-label={ariaLabel}\n    >\n      <SliderPrimitive.Track\n        className={cn(\n          'relative h-1 w-full grow overflow-hidden rounded-pill',\n          isDark ? 'bg-white/30' : 'bg-surface-sunken',\n        )}\n      >\n        <SliderPrimitive.Range\n          className={cn('absolute h-full rounded-pill', isDark ? 'bg-white' : 'bg-accent-9')}\n        />\n      </SliderPrimitive.Track>\n      <SliderPrimitive.Thumb\n        className={cn(\n          'block h-3 w-3 rounded-pill shadow-raised outline-hidden transition-[opacity,transform] duration-fast-02',\n          // hover/focus-reveal: hidden at rest, shown on hover, drag (focus), or keyboard\n          'opacity-0 group-hover/ms:opacity-100 focus:opacity-100 active:scale-110',\n          'focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-1',\n          isDark ? 'bg-white focus-visible:ring-white' : 'bg-accent-9 focus-visible:ring-accent-9',\n        )}\n      />\n    </SliderPrimitive.Root>\n  )\n}\n\n// ============================================================\n// Shared: Volume Slider (Spotify/YouTube style)\n// ============================================================\n\nexport function VolumeControl({\n  volume,\n  muted,\n  onVolumeChange,\n  onMuteToggle,\n  variant = 'light',\n}: {\n  volume: number\n  muted: boolean\n  onVolumeChange: (v: number) => void\n  onMuteToggle: () => void\n  variant?: 'light' | 'dark'\n}) {\n  const displayVolume = muted ? 0 : volume\n  const isDark = variant === 'dark'\n  const iconClass = isDark ? 'text-white hover:text-white/80' : 'text-surface-fg-muted hover:text-surface-fg'\n\n  return (\n    <div className=\"flex items-center gap-ds-02 shrink-0 group/vol\">\n      <button onClick={onMuteToggle} className={cn('transition-colors', iconClass)} aria-label={muted ? 'Unmute (M)' : 'Mute (M)'} title={muted ? 'Unmute' : 'Mute'}>\n        {muted || volume === 0 ? <Icon icon={IconVolumeOff} size=\"sm\" /> : <Icon icon={IconVolume} size=\"sm\" />}\n      </button>\n      <div className=\"flex w-0 items-center overflow-hidden transition-[width] duration-200 ease-productive-standard group-hover/vol:w-20 focus-within:w-20\">\n        <MediaSlider\n          value={displayVolume}\n          max={1}\n          step={0.01}\n          onValueChange={onVolumeChange}\n          tone={variant}\n          ariaLabel=\"Volume\"\n        />\n      </div>\n    </div>\n  )\n}\n\n// ============================================================\n// Shared: Time Formatting\n// ============================================================\n\nexport function formatTime(s: number): string {\n  if (!isFinite(s) || s < 0) return '0:00'\n  const h = Math.floor(s / 3600)\n  const m = Math.floor((s % 3600) / 60)\n  const sec = Math.floor(s % 60)\n  if (h > 0) return `${h}:${m.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`\n  return `${m}:${sec.toString().padStart(2, '0')}`\n}\n"],"mappings":"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"}

package/dist/_chunks/success.js

@@ -1,9 +1,9 @@
 "use client";
 import { durations as e, springs as t, tweens as n } from "../ui/lib/motion.js";
-import { cn as r } from "../ui/lib/utils.js";
-import { Icon as i } from "../ui/icon.js";
-import { Alert as a } from "../ui/alert.js";
-import { useMotion as o } from "./motion-provider.js";
+import { useMotion as r } from "./motion-provider.js";
+import { cn as i } from "../ui/lib/utils.js";
+import { Icon as a } from "../ui/icon.js";
+import { Alert as o } from "../ui/alert.js";
 import { Skeleton as s } from "../ui/skeleton.js";
 import { BadgeCompound as c } from "./badge-group.js";
 import { Button as l } from "../ui/button.js";
@@ -45,29 +45,29 @@ function j(e, t, n) {
 	});
 }
 var M = C.memo(function({ data: e, confidence: n }) {
-	let { reducedMotion: i } = o(), [a, s] = C.useState(null), [c, l] = C.useState(null), u = C.useCallback((t) => {
-		e.sortable && (a === t ? c === "asc" ? l("desc") : c === "desc" && (s(null), l(null)) : (s(t), l("asc")));
+	let { reducedMotion: a } = r(), [o, s] = C.useState(null), [c, l] = C.useState(null), u = C.useCallback((t) => {
+		e.sortable && (o === t ? c === "asc" ? l("desc") : c === "desc" && (s(null), l(null)) : (s(t), l("asc")));
 	}, [
 		e.sortable,
-		a,
+		o,
 		c
-	]), d = e.columns ?? [], f = j(e.rows ?? [], a, c);
+	]), d = e.columns ?? [], f = j(e.rows ?? [], o, c);
 	return /* @__PURE__ */ w(S, {
 		confidence: n,
 		className: "overflow-x-auto",
 		children: /* @__PURE__ */ T(p, { children: [
 			e.caption && /* @__PURE__ */ w(h, { children: e.caption }),
 			/* @__PURE__ */ w(v, { children: /* @__PURE__ */ w(y, { children: d.map((t) => {
-				let n = a === t.key, i = e.sortable ? n ? c === "asc" ? "ascending" : "descending" : "none" : void 0;
+				let n = o === t.key, r = e.sortable ? n ? c === "asc" ? "ascending" : "descending" : "none" : void 0;
 				return /* @__PURE__ */ w(_, {
 					role: "columnheader",
-					className: r(t.variant === "number" && "text-right", e.sortable && "cursor-pointer select-none"),
+					className: i(t.variant === "number" && "text-right", e.sortable && "cursor-pointer select-none"),
 					tabIndex: e.sortable ? 0 : void 0,
 					onClick: e.sortable ? () => u(t.key) : void 0,
 					onKeyDown: e.sortable ? (e) => {
 						(e.key === "Enter" || e.key === " ") && (e.preventDefault(), u(t.key));
 					} : void 0,
-					"aria-sort": i,
+					"aria-sort": r,
 					children: /* @__PURE__ */ T("span", {
 						className: "inline-flex items-center gap-1",
 						children: [
@@ -85,10 +85,10 @@ var M = C.memo(function({ data: e, confidence: n }) {
 				}, t.key);
 			}) }) }),
 			/* @__PURE__ */ w(m, { children: f.map((e, n) => {
-				let a = typeof e.id == "string" || typeof e.id == "number" ? String(e.id) : `row-${n}`;
-				return /* @__PURE__ */ w(i ? "tr" : k.tr, {
+				let r = typeof e.id == "string" || typeof e.id == "number" ? String(e.id) : `row-${n}`;
+				return /* @__PURE__ */ w(a ? "tr" : k.tr, {
 					className: "hover:bg-surface-panel-hover transition-colors",
-					...i ? {} : {
+					...a ? {} : {
 						initial: {
 							opacity: 0,
 							y: 6
@@ -103,10 +103,10 @@ var M = C.memo(function({ data: e, confidence: n }) {
 						}
 					},
 					children: d.map((t) => /* @__PURE__ */ w(g, {
-						className: r("text-body-sm py-ds-02b px-ds-04", t.variant === "number" && "text-right tabular-nums font-medium"),
+						className: i("text-body-sm py-ds-02b px-ds-04", t.variant === "number" && "text-right tabular-nums font-medium"),
 						children: A(e[t.key], t)
 					}, t.key))
-				}, a);
+				}, r);
 			}) })
 		] })
 	});
@@ -161,7 +161,7 @@ N.displayName = "ConfirmBlock";
 //#endregion
 //#region src/ai/blocks/divider.tsx
 var P = C.memo(function(e) {
-	let { reducedMotion: t } = o();
+	let { reducedMotion: t } = r();
 	return t ? /* @__PURE__ */ w(b, {}) : /* @__PURE__ */ w(k.div, {
 		initial: { scaleX: 0 },
 		animate: { scaleX: 1 },
@@ -174,7 +174,7 @@ P.displayName = "DividerBlock";
 //#endregion
 //#region src/ai/blocks/info.tsx
 var F = C.memo(function({ data: e }) {
-	return /* @__PURE__ */ w(a, {
+	return /* @__PURE__ */ w(o, {
 		color: "info",
 		variant: "subtle",
 		role: "status",
@@ -201,7 +201,7 @@ function L({ status: e }) {
 	switch (e) {
 		case "done": return /* @__PURE__ */ w("span", {
 			"data-testid": "step-icon-done",
-			children: /* @__PURE__ */ w(i, {
+			children: /* @__PURE__ */ w(a, {
 				icon: D,
 				size: "sm",
 				className: "text-success-11"
@@ -210,7 +210,7 @@ function L({ status: e }) {
 		case "active": return /* @__PURE__ */ w(I, {});
 		case "error": return /* @__PURE__ */ w("span", {
 			"data-testid": "step-icon-error",
-			children: /* @__PURE__ */ w(i, {
+			children: /* @__PURE__ */ w(a, {
 				icon: O,
 				size: "sm",
 				className: "text-error-11"
@@ -218,7 +218,7 @@ function L({ status: e }) {
 		});
 		default: return /* @__PURE__ */ w("span", {
 			"data-testid": "step-icon-pending",
-			children: /* @__PURE__ */ w(i, {
+			children: /* @__PURE__ */ w(a, {
 				icon: E,
 				size: "sm",
 				className: "text-surface-fg-subtle opacity-50"
@@ -227,7 +227,7 @@ function L({ status: e }) {
 	}
 }
 var R = C.memo(function({ data: t }) {
-	let { reducedMotion: n } = o(), i = n;
+	let { reducedMotion: n } = r(), a = n;
 	if (t.lines != null) {
 		let e = Math.max(1, t.lines);
 		return /* @__PURE__ */ T("div", {
@@ -237,7 +237,7 @@ var R = C.memo(function({ data: t }) {
 			className: "flex flex-col gap-2",
 			children: [Array.from({ length: e }).map((t, n) => /* @__PURE__ */ w(s, {
 				animation: "shimmer",
-				className: r("h-4", n === e - 1 ? "w-3/5" : "w-full")
+				className: i("h-4", n === e - 1 ? "w-3/5" : "w-full")
 			}, n)), /* @__PURE__ */ w("span", {
 				className: "sr-only",
 				children: "Loading"
@@ -251,7 +251,7 @@ var R = C.memo(function({ data: t }) {
 		className: "flex flex-col gap-2",
 		children: [t.steps.map((t, n) => /* @__PURE__ */ T(k.div, {
 			className: "flex items-center gap-2",
-			initial: i ? void 0 : {
+			initial: a ? void 0 : {
 				opacity: 0,
 				x: -8
 			},
@@ -259,12 +259,12 @@ var R = C.memo(function({ data: t }) {
 				opacity: 1,
 				x: 0
 			},
-			transition: i ? { duration: 0 } : {
+			transition: a ? { duration: 0 } : {
 				duration: e.moderate01b,
 				delay: n * .06
 			},
 			children: [/* @__PURE__ */ w(L, { status: t.status }), /* @__PURE__ */ w("span", {
-				className: r("text-body-sm", t.status === "done" || t.status === "active" ? "text-surface-fg" : "text-surface-fg-subtle"),
+				className: i("text-body-sm", t.status === "done" || t.status === "active" ? "text-surface-fg" : "text-surface-fg-subtle"),
 				children: t.label
 			})]
 		}, t.id)), /* @__PURE__ */ w("span", {
@@ -285,10 +285,10 @@ R.displayName = "LoadingBlock";
 //#endregion
 //#region src/ai/blocks/stat-row.tsx
 var z = C.memo(function({ data: e }) {
-	let { reducedMotion: n } = o(), r = e.stats ?? [];
-	return r.length === 0 ? null : /* @__PURE__ */ w("div", {
+	let { reducedMotion: n } = r(), i = e.stats ?? [];
+	return i.length === 0 ? null : /* @__PURE__ */ w("div", {
 		className: "flex flex-wrap gap-ds-05",
-		children: r.map((e, r) => {
+		children: i.map((e, r) => {
 			let i = e.change ? {
 				value: e.change.value,
 				direction: e.change.direction
@@ -323,8 +323,8 @@ var z = C.memo(function({ data: e }) {
 z.displayName = "StatRowBlock";
 //#endregion
 //#region src/ai/blocks/success.tsx
-var B = 5e3, V = C.memo(function({ data: e, blockId: t, confidence: n, onAction: r }) {
-	let { reducedMotion: i } = o(), s = i, c = e.undoTimeout ?? B, [u, d] = C.useState(c), [f, p] = C.useState(!!e.undoable);
+var B = 5e3, V = C.memo(function({ data: e, blockId: t, confidence: n, onAction: i }) {
+	let { reducedMotion: a } = r(), s = a, c = e.undoTimeout ?? B, [u, d] = C.useState(c), [f, p] = C.useState(!!e.undoable);
 	C.useEffect(() => {
 		if (!e.undoable) return;
 		let t = setInterval(() => {
@@ -336,11 +336,11 @@ var B = 5e3, V = C.memo(function({ data: e, blockId: t, confidence: n, onAction:
 		return () => clearInterval(t);
 	}, [e.undoable, c]);
 	let m = C.useCallback(() => {
-		r?.(t || "unknown", "undo");
-	}, [t, r]), h = Math.ceil(u / 1e3), g = 2 * Math.PI * 9;
+		i?.(t || "unknown", "undo");
+	}, [t, i]), h = Math.ceil(u / 1e3), g = 2 * Math.PI * 9;
 	return /* @__PURE__ */ T(S, {
 		confidence: n,
-		children: [/* @__PURE__ */ w(a, {
+		children: [/* @__PURE__ */ w(o, {
 			color: "success",
 			variant: "subtle",
 			title: e.title,

package/dist/_chunks/tree-view.js

@@ -175,7 +175,7 @@ var _ = a.forwardRef(({ itemId: o, label: s, icon: d, secondaryLabel: f, actions
 			onClick: w,
 			onKeyDown: E,
 			style: { paddingLeft: `calc(${_} * var(--spacing-ds-05b) + var(--spacing-ds-03))` },
-			className: t("flex items-center gap-ds-02 py-ds-02 px-ds-02 rounded-control cursor-pointer transition-colors duration-fast-01", "hover:bg-surface-panel-hover", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9", C && "bg-accent-3 text-accent-11", h && "opacity-action-disabled cursor-not-allowed pointer-events-none", v),
+			className: t("flex items-center gap-ds-02 py-ds-02 px-ds-02 rounded-control cursor-pointer transition-colors duration-fast-01", !C && "hover:bg-surface-panel-hover", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9", C && "bg-accent-4 text-accent-11 hover:bg-accent-5", h && "opacity-action-disabled cursor-not-allowed pointer-events-none", v),
 			children: [
 				x ? /* @__PURE__ */ c("button", {
 					type: "button",

package/dist/_chunks/tree-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-view.js","names":[],"sources":["../../src/ui/tree-view/use-tree.ts","../../src/ui/tree-view/tree-view.tsx","../../src/ui/tree-view/tree-item.tsx"],"sourcesContent":["import { useCallback,useState } from 'react'\n\nimport type { IconInput } from '../lib/icon-input'\n\nexport interface TreeNode {\n  id: string\n  label: string\n  icon?: IconInput\n  children?: TreeNode[]\n  disabled?: boolean\n}\n\ninterface UseTreeOptions {\n  defaultExpanded?: string[]\n  defaultSelected?: string[]\n  multiSelect?: boolean\n  onSelect?: (selectedIds: string[]) => void\n  onExpand?: (expandedIds: string[]) => void\n}\n\nexport function useTree(options: UseTreeOptions = {}) {\n  const { defaultExpanded, defaultSelected, multiSelect, onSelect, onExpand } = options\n\n  const [expanded, setExpanded] = useState<Set<string>>(\n    new Set(defaultExpanded ?? []),\n  )\n  const [selected, setSelected] = useState<Set<string>>(\n    new Set(defaultSelected ?? []),\n  )\n\n  const toggle = useCallback(\n    (id: string) => {\n      setExpanded((prev) => {\n        const next = new Set(prev)\n        if (next.has(id)) next.delete(id)\n        else next.add(id)\n        onExpand?.(Array.from(next))\n        return next\n      })\n    },\n    [onExpand],\n  )\n\n  const select = useCallback(\n    (id: string, event?: React.MouseEvent) => {\n      setSelected((prev) => {\n        let next: Set<string>\n        if (multiSelect && event?.ctrlKey) {\n          next = new Set(prev)\n          if (next.has(id)) next.delete(id)\n          else next.add(id)\n        } else {\n          next = new Set([id])\n        }\n        onSelect?.(Array.from(next))\n        return next\n      })\n    },\n    [multiSelect, onSelect],\n  )\n\n  return {\n    expanded,\n    selected,\n    toggle,\n    select,\n    isExpanded: (id: string) => expanded.has(id),\n    isSelected: (id: string) => selected.has(id),\n    expandAll: (ids: string[]) => setExpanded(new Set(ids)),\n    collapseAll: () => setExpanded(new Set()),\n  }\n}\n","'use client'\n\nimport * as React from 'react'\n\nimport { cn } from '../lib/utils'\nimport { TreeItem } from './tree-item'\nimport { type TreeNode,useTree } from './use-tree'\n\n// ─── Context ────────────────────────────────────────────────────────\ninterface TreeContextValue {\n  tree: ReturnType<typeof useTree>\n  checkboxes: boolean\n}\n\nconst TreeContext = React.createContext<TreeContextValue | null>(null)\n\nexport function useTreeContext() {\n  const ctx = React.useContext(TreeContext)\n  if (!ctx) {\n    throw new Error('TreeItem must be used within a <TreeView>')\n  }\n  return ctx\n}\n\n// ─── Props ──────────────────────────────────────────────────────────\nexport interface TreeViewProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onSelect'> {\n  /** Data-driven mode: pass items array */\n  items?: TreeNode[]\n  /** Initially expanded node IDs */\n  defaultExpanded?: string[]\n  /** Initially selected node IDs */\n  defaultSelected?: string[]\n  /** Enable multi-select */\n  multiSelect?: boolean\n  /** Show checkboxes before each item */\n  checkboxes?: boolean\n  /** Called when selection changes */\n  onSelect?: (ids: string[]) => void\n  /** Called when expansion changes */\n  onExpand?: (ids: string[]) => void\n  className?: string\n  /** Declarative mode: render TreeItem children directly */\n  children?: React.ReactNode\n}\n\n// ─── Render nodes recursively (data-driven mode) ───────────────────\nfunction renderNodes(nodes: TreeNode[], depth: number = 0): React.ReactNode {\n  return nodes.map((node) => (\n    <TreeItem\n      key={node.id}\n      itemId={node.id}\n      label={node.label}\n      icon={node.icon}\n      disabled={node.disabled}\n      depth={depth}\n    >\n      {node.children && node.children.length > 0\n        ? renderNodes(node.children, depth + 1)\n        : undefined}\n    </TreeItem>\n  ))\n}\n\n// ─── Helper: collect all visible item IDs ───────────────────────────\nfunction getVisibleItemElements(container: HTMLElement): HTMLElement[] {\n  return Array.from(\n    container.querySelectorAll<HTMLElement>('[data-tree-item]'),\n  ).filter((el) => {\n    // Items inside collapsed groups should not be focusable\n    let parent = el.parentElement\n    while (parent && parent !== container) {\n      if (parent.getAttribute('role') === 'group') {\n        const grid = parent.parentElement\n        if (grid && grid.classList.contains('grid-rows-[0fr]')) {\n          return false\n        }\n      }\n      parent = parent.parentElement\n    }\n    return true\n  })\n}\n\n// ─── Component ──────────────────────────────────────────────────────\nconst TreeView = React.forwardRef<HTMLUListElement, TreeViewProps>(\n  (\n    {\n      items,\n      defaultExpanded,\n      defaultSelected,\n      multiSelect = false,\n      checkboxes = false,\n      onSelect,\n      onExpand,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const tree = useTree({\n      defaultExpanded,\n      defaultSelected,\n      multiSelect,\n      onSelect,\n      onExpand,\n    })\n\n    const innerRef = React.useRef<HTMLUListElement>(null)\n    const containerRef = (ref as React.RefObject<HTMLUListElement>) ?? innerRef\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLUListElement>) => {\n      const container = containerRef.current\n      if (!container) return\n\n      const visibleItems = getVisibleItemElements(container)\n      const currentIndex = visibleItems.findIndex(\n        (el) => el === document.activeElement,\n      )\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault()\n          const next = visibleItems[currentIndex + 1]\n          next?.focus()\n          break\n        }\n        case 'ArrowUp': {\n          e.preventDefault()\n          const prev = visibleItems[currentIndex - 1]\n          prev?.focus()\n          break\n        }\n        case 'ArrowRight': {\n          // Handled in TreeItem for expand; if already expanded, move to first child\n          const current = visibleItems[currentIndex]\n          if (current) {\n            const itemId = current.getAttribute('data-tree-item')\n            if (itemId && tree.isExpanded(itemId)) {\n              e.preventDefault()\n              const nextItem = visibleItems[currentIndex + 1]\n              nextItem?.focus()\n            }\n          }\n          break\n        }\n        case 'ArrowLeft': {\n          // Handled in TreeItem for collapse; if already collapsed or leaf, move to parent\n          const current = visibleItems[currentIndex]\n          if (current) {\n            const itemId = current.getAttribute('data-tree-item')\n            const treeItem = current.closest('[role=\"treeitem\"]')\n            const parentGroup = treeItem?.parentElement?.closest(\n              '[role=\"treeitem\"]',\n            )\n            if (itemId && !tree.isExpanded(itemId) && parentGroup) {\n              e.preventDefault()\n              const parentRow = parentGroup.querySelector<HTMLElement>(\n                '[data-tree-item]',\n              )\n              parentRow?.focus()\n            }\n          }\n          break\n        }\n        case 'Home': {\n          e.preventDefault()\n          visibleItems[0]?.focus()\n          break\n        }\n        case 'End': {\n          e.preventDefault()\n          visibleItems[visibleItems.length - 1]?.focus()\n          break\n        }\n      }\n    }\n\n    const ctxValue = React.useMemo<TreeContextValue>(\n      () => ({ tree, checkboxes }),\n      [tree, checkboxes],\n    )\n\n    const content = items ? renderNodes(items) : children\n\n    return (\n      <TreeContext.Provider value={ctxValue}>\n        <ul\n          ref={containerRef}\n          role=\"tree\"\n          aria-multiselectable={multiSelect || undefined}\n          onKeyDown={handleKeyDown}\n          className={cn('m-0 list-none p-0', className)}\n          {...props}\n        >\n          {content}\n        </ul>\n      </TreeContext.Provider>\n    )\n  },\n)\nTreeView.displayName = 'TreeView'\n\nexport { TreeView }\n","'use client'\n\nimport { IconChevronRight } from '@tabler/icons-react'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox'\nimport { Icon } from '../icon'\nimport { IconProvider } from '../icon-context'\nimport type { IconInput } from '../lib/icon-input'\nimport { normalizeIcon } from '../lib/normalize-icon'\nimport { cn } from '../lib/utils'\nimport { useTreeContext } from './tree-view'\n\nexport interface TreeItemProps {\n  /** Unique identifier for this tree item */\n  itemId: string\n  /** Primary label content */\n  label: React.ReactNode\n  /** Optional icon rendered before the label. Accepts any `IconInput`. */\n  icon?: IconInput\n  /** Secondary label rendered after the primary label */\n  secondaryLabel?: React.ReactNode\n  /** Action buttons rendered at the end of the row */\n  actions?: React.ReactNode\n  /** Whether this item is disabled */\n  disabled?: boolean\n  /** Nested tree items */\n  children?: React.ReactNode\n  /** Depth level (used internally) */\n  depth?: number\n  /** Additional CSS class names */\n  className?: string\n}\n\nconst TreeItem = React.forwardRef<HTMLLIElement, TreeItemProps>(\n  (\n    {\n      itemId,\n      label,\n      icon,\n      secondaryLabel,\n      actions,\n      disabled = false,\n      children,\n      depth = 0,\n      className,\n    },\n    ref,\n  ) => {\n    const ctx = useTreeContext()\n    const hasChildren = React.Children.count(children) > 0\n    const isExpanded = ctx.tree.isExpanded(itemId)\n    const isSelected = ctx.tree.isSelected(itemId)\n\n    const handleRowClick = (e: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return\n      ctx.tree.select(itemId, e)\n    }\n\n    const handleChevronClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      e.stopPropagation()\n      if (disabled) return\n      ctx.tree.toggle(itemId)\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (disabled) return\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        ctx.tree.select(itemId)\n      }\n      if (e.key === 'ArrowRight' && hasChildren && !isExpanded) {\n        e.preventDefault()\n        e.stopPropagation()\n        ctx.tree.toggle(itemId)\n      }\n      if (e.key === 'ArrowLeft' && hasChildren && isExpanded) {\n        e.preventDefault()\n        e.stopPropagation()\n        ctx.tree.toggle(itemId)\n      }\n    }\n\n    // Compute indeterminate state for checkbox mode\n    const checkboxState = React.useMemo(() => {\n      if (!ctx.checkboxes || !hasChildren) {\n        return { checked: isSelected, indeterminate: false }\n      }\n      // Collect all descendant IDs\n      const descendants: string[] = []\n      const collectIds = (nodes: React.ReactNode) => {\n        React.Children.forEach(nodes, (child) => {\n          if (React.isValidElement<TreeItemProps>(child) && child.props.itemId) {\n            descendants.push(child.props.itemId)\n            if (child.props.children) {\n              collectIds(child.props.children)\n            }\n          }\n        })\n      }\n      collectIds(children)\n      const selectedCount = descendants.filter((id) =>\n        ctx.tree.isSelected(id),\n      ).length\n      if (selectedCount === 0 && !isSelected) {\n        return { checked: false, indeterminate: false }\n      }\n      if (selectedCount === descendants.length) {\n        return { checked: true, indeterminate: false }\n      }\n      return { checked: false, indeterminate: true }\n    }, [ctx.checkboxes, hasChildren, children, isSelected, ctx.tree])\n\n    return (\n      <li\n        ref={ref}\n        role=\"treeitem\"\n        aria-expanded={hasChildren ? isExpanded : undefined}\n        aria-selected={isSelected}\n        aria-level={depth + 1}\n        aria-disabled={disabled || undefined}\n        className=\"list-none\"\n      >\n        {/* Row */}\n        <div\n          role=\"presentation\"\n          data-tree-item={itemId}\n          tabIndex={disabled ? -1 : 0}\n          onClick={handleRowClick}\n          onKeyDown={handleKeyDown}\n          style={{ paddingLeft: `calc(${depth} * var(--spacing-ds-05b) + var(--spacing-ds-03))` }}\n          className={cn(\n            'flex items-center gap-ds-02 py-ds-02 px-ds-02 rounded-control cursor-pointer transition-colors duration-fast-01',\n            'hover:bg-surface-panel-hover',\n            'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9',\n            isSelected &&\n              'bg-accent-3 text-accent-11',\n            disabled && 'opacity-action-disabled cursor-not-allowed pointer-events-none',\n            className,\n          )}\n        >\n          {/* Expand chevron */}\n          {hasChildren ? (\n            <button\n              type=\"button\"\n              tabIndex={-1}\n              aria-hidden=\"true\"\n              onClick={handleChevronClick}\n              className=\"flex shrink-0 items-center justify-center p-0 border-0 bg-transparent cursor-pointer\"\n            >\n              <Icon\n                icon={IconChevronRight}\n                size=\"sm\"\n                className={cn(\n                  'transition-transform duration-moderate-02',\n                  isExpanded && 'rotate-90',\n                )}\n              />\n            </button>\n          ) : (\n            <span className=\"inline-block w-4 shrink-0\" aria-hidden=\"true\" />\n          )}\n\n          {/* Checkbox (optional) */}\n          {ctx.checkboxes && (\n            <Checkbox\n              checked={checkboxState.checked}\n              indeterminate={checkboxState.indeterminate}\n              disabled={disabled}\n              tabIndex={-1}\n              onClick={(e) => e.stopPropagation()}\n              onCheckedChange={() => {\n                if (!disabled) ctx.tree.select(itemId)\n              }}\n              className=\"shrink-0\"\n            />\n          )}\n\n          {/* Icon */}\n          {icon && (\n            <span className=\"flex shrink-0 items-center text-surface-fg-subtle\">\n              <IconProvider size=\"sm\">{normalizeIcon(icon)}</IconProvider>\n            </span>\n          )}\n\n          {/* Label */}\n          <span className=\"min-w-0 truncate text-body-sm\">{label}</span>\n\n          {/* Secondary label */}\n          {secondaryLabel && (\n            <span className=\"ml-auto truncate text-caption text-surface-fg-muted\">\n              {secondaryLabel}\n            </span>\n          )}\n\n          {/* Actions */}\n          {actions && (\n            <span\n              className=\"ml-auto flex shrink-0 items-center gap-ds-01\"\n              onClick={(e) => e.stopPropagation()}\n              role=\"presentation\"\n            >\n              {actions}\n            </span>\n          )}\n        </div>\n\n        {/* Children (collapsible) */}\n        {hasChildren && (\n          <div\n            role=\"group\"\n            className={cn(\n              'grid transition-[grid-template-rows] duration-moderate-02 ease-productive-standard',\n              isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',\n            )}\n          >\n            <ul role=\"group\" className=\"overflow-hidden m-0 p-0\">\n              {React.Children.map(children, (child) => {\n                if (React.isValidElement<TreeItemProps>(child)) {\n                  return React.cloneElement(child, {\n                    depth: depth + 1,\n                  })\n                }\n                return child\n              })}\n            </ul>\n          </div>\n        )}\n      </li>\n    )\n  },\n)\nTreeItem.displayName = 'TreeItem'\n\nexport { TreeItem }\n"],"mappings":"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"}
+{"version":3,"file":"tree-view.js","names":[],"sources":["../../src/ui/tree-view/use-tree.ts","../../src/ui/tree-view/tree-view.tsx","../../src/ui/tree-view/tree-item.tsx"],"sourcesContent":["import { useCallback,useState } from 'react'\n\nimport type { IconInput } from '../lib/icon-input'\n\nexport interface TreeNode {\n  id: string\n  label: string\n  icon?: IconInput\n  children?: TreeNode[]\n  disabled?: boolean\n}\n\ninterface UseTreeOptions {\n  defaultExpanded?: string[]\n  defaultSelected?: string[]\n  multiSelect?: boolean\n  onSelect?: (selectedIds: string[]) => void\n  onExpand?: (expandedIds: string[]) => void\n}\n\nexport function useTree(options: UseTreeOptions = {}) {\n  const { defaultExpanded, defaultSelected, multiSelect, onSelect, onExpand } = options\n\n  const [expanded, setExpanded] = useState<Set<string>>(\n    new Set(defaultExpanded ?? []),\n  )\n  const [selected, setSelected] = useState<Set<string>>(\n    new Set(defaultSelected ?? []),\n  )\n\n  const toggle = useCallback(\n    (id: string) => {\n      setExpanded((prev) => {\n        const next = new Set(prev)\n        if (next.has(id)) next.delete(id)\n        else next.add(id)\n        onExpand?.(Array.from(next))\n        return next\n      })\n    },\n    [onExpand],\n  )\n\n  const select = useCallback(\n    (id: string, event?: React.MouseEvent) => {\n      setSelected((prev) => {\n        let next: Set<string>\n        if (multiSelect && event?.ctrlKey) {\n          next = new Set(prev)\n          if (next.has(id)) next.delete(id)\n          else next.add(id)\n        } else {\n          next = new Set([id])\n        }\n        onSelect?.(Array.from(next))\n        return next\n      })\n    },\n    [multiSelect, onSelect],\n  )\n\n  return {\n    expanded,\n    selected,\n    toggle,\n    select,\n    isExpanded: (id: string) => expanded.has(id),\n    isSelected: (id: string) => selected.has(id),\n    expandAll: (ids: string[]) => setExpanded(new Set(ids)),\n    collapseAll: () => setExpanded(new Set()),\n  }\n}\n","'use client'\n\nimport * as React from 'react'\n\nimport { cn } from '../lib/utils'\nimport { TreeItem } from './tree-item'\nimport { type TreeNode,useTree } from './use-tree'\n\n// ─── Context ────────────────────────────────────────────────────────\ninterface TreeContextValue {\n  tree: ReturnType<typeof useTree>\n  checkboxes: boolean\n}\n\nconst TreeContext = React.createContext<TreeContextValue | null>(null)\n\nexport function useTreeContext() {\n  const ctx = React.useContext(TreeContext)\n  if (!ctx) {\n    throw new Error('TreeItem must be used within a <TreeView>')\n  }\n  return ctx\n}\n\n// ─── Props ──────────────────────────────────────────────────────────\nexport interface TreeViewProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onSelect'> {\n  /** Data-driven mode: pass items array */\n  items?: TreeNode[]\n  /** Initially expanded node IDs */\n  defaultExpanded?: string[]\n  /** Initially selected node IDs */\n  defaultSelected?: string[]\n  /** Enable multi-select */\n  multiSelect?: boolean\n  /** Show checkboxes before each item */\n  checkboxes?: boolean\n  /** Called when selection changes */\n  onSelect?: (ids: string[]) => void\n  /** Called when expansion changes */\n  onExpand?: (ids: string[]) => void\n  className?: string\n  /** Declarative mode: render TreeItem children directly */\n  children?: React.ReactNode\n}\n\n// ─── Render nodes recursively (data-driven mode) ───────────────────\nfunction renderNodes(nodes: TreeNode[], depth: number = 0): React.ReactNode {\n  return nodes.map((node) => (\n    <TreeItem\n      key={node.id}\n      itemId={node.id}\n      label={node.label}\n      icon={node.icon}\n      disabled={node.disabled}\n      depth={depth}\n    >\n      {node.children && node.children.length > 0\n        ? renderNodes(node.children, depth + 1)\n        : undefined}\n    </TreeItem>\n  ))\n}\n\n// ─── Helper: collect all visible item IDs ───────────────────────────\nfunction getVisibleItemElements(container: HTMLElement): HTMLElement[] {\n  return Array.from(\n    container.querySelectorAll<HTMLElement>('[data-tree-item]'),\n  ).filter((el) => {\n    // Items inside collapsed groups should not be focusable\n    let parent = el.parentElement\n    while (parent && parent !== container) {\n      if (parent.getAttribute('role') === 'group') {\n        const grid = parent.parentElement\n        if (grid && grid.classList.contains('grid-rows-[0fr]')) {\n          return false\n        }\n      }\n      parent = parent.parentElement\n    }\n    return true\n  })\n}\n\n// ─── Component ──────────────────────────────────────────────────────\nconst TreeView = React.forwardRef<HTMLUListElement, TreeViewProps>(\n  (\n    {\n      items,\n      defaultExpanded,\n      defaultSelected,\n      multiSelect = false,\n      checkboxes = false,\n      onSelect,\n      onExpand,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const tree = useTree({\n      defaultExpanded,\n      defaultSelected,\n      multiSelect,\n      onSelect,\n      onExpand,\n    })\n\n    const innerRef = React.useRef<HTMLUListElement>(null)\n    const containerRef = (ref as React.RefObject<HTMLUListElement>) ?? innerRef\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLUListElement>) => {\n      const container = containerRef.current\n      if (!container) return\n\n      const visibleItems = getVisibleItemElements(container)\n      const currentIndex = visibleItems.findIndex(\n        (el) => el === document.activeElement,\n      )\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault()\n          const next = visibleItems[currentIndex + 1]\n          next?.focus()\n          break\n        }\n        case 'ArrowUp': {\n          e.preventDefault()\n          const prev = visibleItems[currentIndex - 1]\n          prev?.focus()\n          break\n        }\n        case 'ArrowRight': {\n          // Handled in TreeItem for expand; if already expanded, move to first child\n          const current = visibleItems[currentIndex]\n          if (current) {\n            const itemId = current.getAttribute('data-tree-item')\n            if (itemId && tree.isExpanded(itemId)) {\n              e.preventDefault()\n              const nextItem = visibleItems[currentIndex + 1]\n              nextItem?.focus()\n            }\n          }\n          break\n        }\n        case 'ArrowLeft': {\n          // Handled in TreeItem for collapse; if already collapsed or leaf, move to parent\n          const current = visibleItems[currentIndex]\n          if (current) {\n            const itemId = current.getAttribute('data-tree-item')\n            const treeItem = current.closest('[role=\"treeitem\"]')\n            const parentGroup = treeItem?.parentElement?.closest(\n              '[role=\"treeitem\"]',\n            )\n            if (itemId && !tree.isExpanded(itemId) && parentGroup) {\n              e.preventDefault()\n              const parentRow = parentGroup.querySelector<HTMLElement>(\n                '[data-tree-item]',\n              )\n              parentRow?.focus()\n            }\n          }\n          break\n        }\n        case 'Home': {\n          e.preventDefault()\n          visibleItems[0]?.focus()\n          break\n        }\n        case 'End': {\n          e.preventDefault()\n          visibleItems[visibleItems.length - 1]?.focus()\n          break\n        }\n      }\n    }\n\n    const ctxValue = React.useMemo<TreeContextValue>(\n      () => ({ tree, checkboxes }),\n      [tree, checkboxes],\n    )\n\n    const content = items ? renderNodes(items) : children\n\n    return (\n      <TreeContext.Provider value={ctxValue}>\n        <ul\n          ref={containerRef}\n          role=\"tree\"\n          aria-multiselectable={multiSelect || undefined}\n          onKeyDown={handleKeyDown}\n          className={cn('m-0 list-none p-0', className)}\n          {...props}\n        >\n          {content}\n        </ul>\n      </TreeContext.Provider>\n    )\n  },\n)\nTreeView.displayName = 'TreeView'\n\nexport { TreeView }\n","'use client'\n\nimport { IconChevronRight } from '@tabler/icons-react'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox'\nimport { Icon } from '../icon'\nimport { IconProvider } from '../icon-context'\nimport type { IconInput } from '../lib/icon-input'\nimport { normalizeIcon } from '../lib/normalize-icon'\nimport { cn } from '../lib/utils'\nimport { useTreeContext } from './tree-view'\n\nexport interface TreeItemProps {\n  /** Unique identifier for this tree item */\n  itemId: string\n  /** Primary label content */\n  label: React.ReactNode\n  /** Optional icon rendered before the label. Accepts any `IconInput`. */\n  icon?: IconInput\n  /** Secondary label rendered after the primary label */\n  secondaryLabel?: React.ReactNode\n  /** Action buttons rendered at the end of the row */\n  actions?: React.ReactNode\n  /** Whether this item is disabled */\n  disabled?: boolean\n  /** Nested tree items */\n  children?: React.ReactNode\n  /** Depth level (used internally) */\n  depth?: number\n  /** Additional CSS class names */\n  className?: string\n}\n\nconst TreeItem = React.forwardRef<HTMLLIElement, TreeItemProps>(\n  (\n    {\n      itemId,\n      label,\n      icon,\n      secondaryLabel,\n      actions,\n      disabled = false,\n      children,\n      depth = 0,\n      className,\n    },\n    ref,\n  ) => {\n    const ctx = useTreeContext()\n    const hasChildren = React.Children.count(children) > 0\n    const isExpanded = ctx.tree.isExpanded(itemId)\n    const isSelected = ctx.tree.isSelected(itemId)\n\n    const handleRowClick = (e: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return\n      ctx.tree.select(itemId, e)\n    }\n\n    const handleChevronClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      e.stopPropagation()\n      if (disabled) return\n      ctx.tree.toggle(itemId)\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (disabled) return\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        ctx.tree.select(itemId)\n      }\n      if (e.key === 'ArrowRight' && hasChildren && !isExpanded) {\n        e.preventDefault()\n        e.stopPropagation()\n        ctx.tree.toggle(itemId)\n      }\n      if (e.key === 'ArrowLeft' && hasChildren && isExpanded) {\n        e.preventDefault()\n        e.stopPropagation()\n        ctx.tree.toggle(itemId)\n      }\n    }\n\n    // Compute indeterminate state for checkbox mode\n    const checkboxState = React.useMemo(() => {\n      if (!ctx.checkboxes || !hasChildren) {\n        return { checked: isSelected, indeterminate: false }\n      }\n      // Collect all descendant IDs\n      const descendants: string[] = []\n      const collectIds = (nodes: React.ReactNode) => {\n        React.Children.forEach(nodes, (child) => {\n          if (React.isValidElement<TreeItemProps>(child) && child.props.itemId) {\n            descendants.push(child.props.itemId)\n            if (child.props.children) {\n              collectIds(child.props.children)\n            }\n          }\n        })\n      }\n      collectIds(children)\n      const selectedCount = descendants.filter((id) =>\n        ctx.tree.isSelected(id),\n      ).length\n      if (selectedCount === 0 && !isSelected) {\n        return { checked: false, indeterminate: false }\n      }\n      if (selectedCount === descendants.length) {\n        return { checked: true, indeterminate: false }\n      }\n      return { checked: false, indeterminate: true }\n    }, [ctx.checkboxes, hasChildren, children, isSelected, ctx.tree])\n\n    return (\n      <li\n        ref={ref}\n        role=\"treeitem\"\n        aria-expanded={hasChildren ? isExpanded : undefined}\n        aria-selected={isSelected}\n        aria-level={depth + 1}\n        aria-disabled={disabled || undefined}\n        className=\"list-none\"\n      >\n        {/* Row */}\n        <div\n          role=\"presentation\"\n          data-tree-item={itemId}\n          tabIndex={disabled ? -1 : 0}\n          onClick={handleRowClick}\n          onKeyDown={handleKeyDown}\n          style={{ paddingLeft: `calc(${depth} * var(--spacing-ds-05b) + var(--spacing-ds-03))` }}\n          className={cn(\n            'flex items-center gap-ds-02 py-ds-02 px-ds-02 rounded-control cursor-pointer transition-colors duration-fast-01',\n            // Hover only applies when NOT selected. `hover:bg-…` is specificity\n            // (0,2,0) while the conditional `bg-accent-4` below compiles to a\n            // plain (0,1,0) class, so an unqualified hover won every time and\n            // pointing at a selected row visibly deselected it. Table solves the\n            // same problem with `data-[state=selected]:hover:…`.\n            !isSelected && 'hover:bg-surface-panel-hover',\n            'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9',\n            isSelected &&\n              'bg-accent-4 text-accent-11 hover:bg-accent-5',\n            disabled && 'opacity-action-disabled cursor-not-allowed pointer-events-none',\n            className,\n          )}\n        >\n          {/* Expand chevron */}\n          {hasChildren ? (\n            <button\n              type=\"button\"\n              tabIndex={-1}\n              aria-hidden=\"true\"\n              onClick={handleChevronClick}\n              className=\"flex shrink-0 items-center justify-center p-0 border-0 bg-transparent cursor-pointer\"\n            >\n              <Icon\n                icon={IconChevronRight}\n                size=\"sm\"\n                className={cn(\n                  'transition-transform duration-moderate-02',\n                  isExpanded && 'rotate-90',\n                )}\n              />\n            </button>\n          ) : (\n            <span className=\"inline-block w-4 shrink-0\" aria-hidden=\"true\" />\n          )}\n\n          {/* Checkbox (optional) */}\n          {ctx.checkboxes && (\n            <Checkbox\n              checked={checkboxState.checked}\n              indeterminate={checkboxState.indeterminate}\n              disabled={disabled}\n              tabIndex={-1}\n              onClick={(e) => e.stopPropagation()}\n              onCheckedChange={() => {\n                if (!disabled) ctx.tree.select(itemId)\n              }}\n              className=\"shrink-0\"\n            />\n          )}\n\n          {/* Icon */}\n          {icon && (\n            <span className=\"flex shrink-0 items-center text-surface-fg-subtle\">\n              <IconProvider size=\"sm\">{normalizeIcon(icon)}</IconProvider>\n            </span>\n          )}\n\n          {/* Label */}\n          <span className=\"min-w-0 truncate text-body-sm\">{label}</span>\n\n          {/* Secondary label */}\n          {secondaryLabel && (\n            <span className=\"ml-auto truncate text-caption text-surface-fg-muted\">\n              {secondaryLabel}\n            </span>\n          )}\n\n          {/* Actions */}\n          {actions && (\n            <span\n              className=\"ml-auto flex shrink-0 items-center gap-ds-01\"\n              onClick={(e) => e.stopPropagation()}\n              role=\"presentation\"\n            >\n              {actions}\n            </span>\n          )}\n        </div>\n\n        {/* Children (collapsible) */}\n        {hasChildren && (\n          <div\n            role=\"group\"\n            className={cn(\n              'grid transition-[grid-template-rows] duration-moderate-02 ease-productive-standard',\n              isExpanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',\n            )}\n          >\n            <ul role=\"group\" className=\"overflow-hidden m-0 p-0\">\n              {React.Children.map(children, (child) => {\n                if (React.isValidElement<TreeItemProps>(child)) {\n                  return React.cloneElement(child, {\n                    depth: depth + 1,\n                  })\n                }\n                return child\n              })}\n            </ul>\n          </div>\n        )}\n      </li>\n    )\n  },\n)\nTreeItem.displayName = 'TreeItem'\n\nexport { TreeItem }\n"],"mappings":"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"}

package/dist/ai/block-renderer.js

@@ -1,8 +1,8 @@
 "use client";
 import { springs as e } from "../ui/lib/motion.js";
-import { cn as t } from "../ui/lib/utils.js";
-import { Alert as n } from "../ui/alert.js";
-import { useMotion as r } from "../_chunks/motion-provider.js";
+import { useMotion as t } from "../_chunks/motion-provider.js";
+import { cn as n } from "../ui/lib/utils.js";
+import { Alert as r } from "../ui/alert.js";
 import { useAICommand as i } from "./ai-command-provider.js";
 import { BlockTable as a, ConfirmBlock as o, DividerBlock as s, InfoBlock as c, LoadingBlock as l, StatRowBlock as u, SuccessBlock as d } from "../_chunks/success.js";
 import { ErrorBlock as f } from "./blocks/error.js";
@@ -23,7 +23,7 @@ var _ = {
 	stat_row: u
 };
 function v({ data: e, type: t }) {
-	return /* @__PURE__ */ h(n, {
+	return /* @__PURE__ */ h(r, {
 		color: "info",
 		variant: "subtle",
 		title: `Unknown block type: ${t}`,
@@ -33,15 +33,15 @@ function v({ data: e, type: t }) {
 		})
 	});
 }
-var y = m.forwardRef(({ blocks: n, onAction: a, customBlocks: o, staggerDelay: s = 50, className: c }, l) => {
-	let u = i(), { reducedMotion: d } = r(), f = m.useMemo(() => ({
+var y = m.forwardRef(({ blocks: r, onAction: a, customBlocks: o, staggerDelay: s = 50, className: c }, l) => {
+	let u = i(), { reducedMotion: d } = t(), f = m.useMemo(() => ({
 		...u?.customBlocks ?? {},
 		...o
 	}), [u?.customBlocks, o]), p = a ?? u?.onAction;
 	return /* @__PURE__ */ h("div", {
 		ref: l,
-		className: t("flex flex-col gap-ds-04", c),
-		children: n.map((t, n) => {
+		className: n("flex flex-col gap-ds-04", c),
+		children: r.map((t, n) => {
 			let r = f[t.type] ?? _[t.type] ?? null, i = {
 				data: t.data,
 				blockId: t.id,