@devalok/shilp-sutra 0.36.0 → 0.37.0-next.0

package/dist/_chunks/shared.js

@@ -1,35 +1,35 @@
 "use client";
-import { a as e } from "./framer.js";
-import { tweens as t } from "../ui/lib/motion.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 * as a from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { IconAlertTriangle as c, IconDownload as l, IconVolume as u, IconVolumeOff as d } from "@tabler/icons-react";
+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 * as i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { IconAlertTriangle as s, IconDownload as c, IconVolume as l, IconVolumeOff as u } from "@tabler/icons-react";
+import { motion as d } from "framer-motion";
 //#region src/composed/file-preview/shared.tsx
 function f({ message: e, url: t }) {
-	return /* @__PURE__ */ s("div", {
+	return /* @__PURE__ */ o("div", {
 		className: "flex flex-col items-center justify-center gap-ds-04 rounded-ds-md border border-surface-border bg-surface-sunken p-ds-08 text-center",
 		children: [
-			/* @__PURE__ */ o(r, {
-				icon: c,
+			/* @__PURE__ */ a(n, {
+				icon: s,
 				size: "2xl",
 				className: "text-warning-9"
 			}),
-			/* @__PURE__ */ s("div", { children: [/* @__PURE__ */ o("p", {
+			/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("p", {
 				className: "text-ds-md font-semibold text-surface-fg",
 				children: "Preview unavailable"
-			}), /* @__PURE__ */ o("p", {
+			}), /* @__PURE__ */ a("p", {
 				className: "text-ds-sm text-surface-fg-muted mt-ds-01",
 				children: e
 			})] }),
-			/* @__PURE__ */ o(i, {
+			/* @__PURE__ */ a(r, {
 				variant: "outline",
 				size: "xs",
-				startIcon: /* @__PURE__ */ o(r, { icon: l }),
+				startIcon: /* @__PURE__ */ a(n, { icon: c }),
 				asChild: !0,
-				children: /* @__PURE__ */ o("a", {
+				children: /* @__PURE__ */ a("a", {
 					href: t,
 					download: !0,
 					target: "_blank",
@@ -40,8 +40,8 @@ function f({ message: e, url: t }) {
 		]
 	});
 }
-function p({ children: r, className: i }) {
-	return /* @__PURE__ */ o(e.div, {
+function p({ children: n, className: r }) {
+	return /* @__PURE__ */ a(d.div, {
 		initial: {
 			opacity: 0,
 			y: 8
@@ -50,50 +50,50 @@ function p({ children: r, className: i }) {
 			opacity: 1,
 			y: 0
 		},
-		transition: t.fade,
-		className: n("flex items-center gap-ds-01 rounded-ds-md border border-surface-border bg-surface-overlay/95 px-ds-02 py-ds-01 shadow-floating backdrop-blur-xs", i),
-		children: r
+		transition: e.fade,
+		className: t("flex items-center gap-ds-01 rounded-ds-md border border-surface-border bg-surface-overlay/95 px-ds-02 py-ds-01 shadow-floating backdrop-blur-xs", r),
+		children: n
 	});
 }
 function m() {
-	return /* @__PURE__ */ o("div", { className: "mx-ds-01 h-4 w-px bg-surface-border-subtle" });
+	return /* @__PURE__ */ a("div", { className: "mx-ds-01 h-4 w-px bg-surface-border-subtle" });
 }
-function h({ volume: e, muted: t, onVolumeChange: i, onMuteToggle: c, variant: l = "light" }) {
-	let f = a.useRef(null), [p, m] = a.useState(!1), h = t ? 0 : e;
+function h({ volume: e, muted: r, onVolumeChange: s, onMuteToggle: c, variant: d = "light" }) {
+	let f = i.useRef(null), [p, m] = i.useState(!1), h = r ? 0 : e;
 	function g(t) {
 		if (!f.current) return e;
 		let n = f.current.getBoundingClientRect();
 		return Math.max(0, Math.min(1, (t.clientX - n.left) / n.width));
 	}
 	function _(e) {
-		e.preventDefault(), m(!0), i(g(e)), e.target.setPointerCapture(e.pointerId);
+		e.preventDefault(), m(!0), s(g(e)), e.target.setPointerCapture(e.pointerId);
 	}
 	function v(e) {
-		p && i(g(e));
+		p && s(g(e));
 	}
 	function y() {
 		m(!1);
 	}
-	let b = l === "dark", x = b ? "bg-white/30" : "bg-surface-sunken", S = b ? "bg-white" : "bg-accent-9", C = b ? "bg-white" : "bg-accent-9";
-	return /* @__PURE__ */ s("div", {
+	let b = d === "dark", x = b ? "bg-white/30" : "bg-surface-sunken", S = b ? "bg-white" : "bg-accent-9", C = b ? "bg-white" : "bg-accent-9";
+	return /* @__PURE__ */ o("div", {
 		className: "group/vol flex items-center gap-ds-02 shrink-0",
-		children: [/* @__PURE__ */ o("button", {
+		children: [/* @__PURE__ */ a("button", {
 			onClick: c,
-			className: n("transition-colors", b ? "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__ */ o(r, {
-				icon: d,
-				size: "sm"
-			}) : /* @__PURE__ */ o(r, {
+			className: t("transition-colors", b ? "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__ */ a(n, {
 				icon: u,
 				size: "sm"
+			}) : /* @__PURE__ */ a(n, {
+				icon: l,
+				size: "sm"
 			})
-		}), /* @__PURE__ */ o("div", {
+		}), /* @__PURE__ */ a("div", {
 			className: "w-0 overflow-hidden group-hover/vol:w-20 transition-[width] duration-200 ease-productive-standard flex items-center",
-			children: /* @__PURE__ */ s("div", {
+			children: /* @__PURE__ */ o("div", {
 				ref: f,
-				className: n("relative w-full h-1 rounded-full cursor-pointer", x),
+				className: t("relative w-full h-1 rounded-full cursor-pointer", x),
 				onPointerDown: _,
 				onPointerMove: v,
 				onPointerUp: y,
@@ -103,11 +103,11 @@ function h({ volume: e, muted: t, onVolumeChange: i, onMuteToggle: c, variant: l
 				"aria-valuemin": 0,
 				"aria-valuemax": 100,
 				tabIndex: 0,
-				children: [/* @__PURE__ */ o("div", {
-					className: n("absolute left-0 top-0 h-full rounded-full transition-[width] duration-75", S),
+				children: [/* @__PURE__ */ a("div", {
+					className: t("absolute left-0 top-0 h-full rounded-full transition-[width] duration-75", S),
 					style: { width: `${h * 100}%` }
-				}), /* @__PURE__ */ o("div", {
-					className: n("absolute top-1/2 -translate-y-1/2 h-2.5 w-2.5 rounded-full shadow-raised transition-opacity", C, p ? "opacity-100 scale-110" : "opacity-0 group-hover/vol:opacity-100"),
+				}), /* @__PURE__ */ a("div", {
+					className: t("absolute top-1/2 -translate-y-1/2 h-2.5 w-2.5 rounded-full shadow-raised transition-opacity", C, p ? "opacity-100 scale-110" : "opacity-0 group-hover/vol:opacity-100"),
 					style: {
 						left: `${h * 100}%`,
 						marginLeft: "-5px"

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 React from 'react'\nimport { motion } from 'framer-motion'\nimport { cn } from '../../ui/lib/utils'\nimport { tweens } from '../../ui/lib/motion'\nimport { Icon } from '../../ui/icon'\nimport { Button } from '../../ui/button'\nimport {\n  IconDownload,\n  IconAlertTriangle,\n  IconVolume,\n  IconVolumeOff,\n} from '@tabler/icons-react'\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-ds-md 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-ds-md font-semibold text-surface-fg\">Preview unavailable</p>\n        <p className=\"text-ds-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-ds-md border border-surface-border 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: Volume Slider (Spotify/YouTube style)\n// Custom-built — no native input range. Consistent across browsers.\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 trackRef = React.useRef<HTMLDivElement>(null)\n  const [dragging, setDragging] = React.useState(false)\n  const displayVolume = muted ? 0 : volume\n\n  function getVolumeFromEvent(e: MouseEvent | React.MouseEvent) {\n    if (!trackRef.current) return volume\n    const rect = trackRef.current.getBoundingClientRect()\n    return Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))\n  }\n\n  function handlePointerDown(e: React.PointerEvent) {\n    e.preventDefault()\n    setDragging(true)\n    const v = getVolumeFromEvent(e)\n    onVolumeChange(v)\n    ;(e.target as HTMLElement).setPointerCapture(e.pointerId)\n  }\n\n  function handlePointerMove(e: React.PointerEvent) {\n    if (!dragging) return\n    onVolumeChange(getVolumeFromEvent(e))\n  }\n\n  function handlePointerUp() {\n    setDragging(false)\n  }\n\n  const isDark = variant === 'dark'\n  const trackBg = isDark ? 'bg-white/30' : 'bg-surface-sunken'\n  const fillBg = isDark ? 'bg-white' : 'bg-accent-9'\n  const thumbBg = isDark ? 'bg-white' : 'bg-accent-9'\n  const iconClass = isDark ? 'text-white hover:text-white/80' : 'text-surface-fg-muted hover:text-surface-fg'\n\n  return (\n    <div className=\"group/vol flex items-center gap-ds-02 shrink-0\">\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=\"w-0 overflow-hidden group-hover/vol:w-20 transition-[width] duration-200 ease-productive-standard flex items-center\">\n        <div\n          ref={trackRef}\n          className={cn('relative w-full h-1 rounded-full cursor-pointer', trackBg)}\n          onPointerDown={handlePointerDown}\n          onPointerMove={handlePointerMove}\n          onPointerUp={handlePointerUp}\n          role=\"slider\"\n          aria-label=\"Volume\"\n          aria-valuenow={Math.round(displayVolume * 100)}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          tabIndex={0}\n        >\n          {/* Fill */}\n          <div\n            className={cn('absolute left-0 top-0 h-full rounded-full transition-[width] duration-75', fillBg)}\n            style={{ width: `${displayVolume * 100}%` }}\n          />\n          {/* Thumb */}\n          <div\n            className={cn(\n              'absolute top-1/2 -translate-y-1/2 h-2.5 w-2.5 rounded-full shadow-raised transition-opacity',\n              thumbBg,\n              dragging ? 'opacity-100 scale-110' : 'opacity-0 group-hover/vol:opacity-100',\n            )}\n            style={{ left: `${displayVolume * 100}%`, marginLeft: '-5px' }}\n          />\n        </div>\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":";;;;;;;;;AAmBA,SAAgB,EAAc,EAAE,YAAS,UAAyC;AAChF,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD;IAAM,MAAM;IAAmB,MAAK;IAAM,WAAU;IAAmB,CAAA;GACvE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;IAAG,WAAU;cAA2C;IAAuB,CAAA,EAC/E,kBAAC,KAAD;IAAG,WAAU;cAA6C;IAAY,CAAA,CAClE,EAAA,CAAA;GACN,kBAAC,GAAD;IAAQ,SAAQ;IAAU,MAAK;IAAK,WAAW,kBAAC,GAAD,EAAM,MAAM,GAAgB,CAAA;IAAE,SAAA;cAC3E,kBAAC,KAAD;KAAG,MAAM;KAAK,UAAA;KAAS,QAAO;KAAS,KAAI;eAAsB;KAAiB,CAAA;IAC3E,CAAA;GACL;;;AAQV,SAAgB,EAAQ,EAAE,aAAU,gBAAgE;AAClG,QACE,kBAAC,EAAO,KAAR;EACE,SAAS;GAAE,SAAS;GAAG,GAAG;GAAG;EAC7B,SAAS;GAAE,SAAS;GAAG,GAAG;GAAG;EAC7B,YAAY,EAAO;EACnB,WAAW,EACT,mJACA,EACD;EAEA;EACU,CAAA;;AAIjB,SAAgB,IAAiB;AAC/B,QAAO,kBAAC,OAAD,EAAK,WAAU,8CAA+C,CAAA;;AAQvE,SAAgB,EAAc,EAC5B,WACA,UACA,mBACA,iBACA,aAAU,WAOT;CACD,IAAM,IAAW,EAAM,OAAuB,KAAK,EAC7C,CAAC,GAAU,KAAe,EAAM,SAAS,GAAM,EAC/C,IAAgB,IAAQ,IAAI;CAElC,SAAS,EAAmB,GAAkC;AAC5D,MAAI,CAAC,EAAS,QAAS,QAAO;EAC9B,IAAM,IAAO,EAAS,QAAQ,uBAAuB;AACrD,SAAO,KAAK,IAAI,GAAG,KAAK,IAAI,IAAI,EAAE,UAAU,EAAK,QAAQ,EAAK,MAAM,CAAC;;CAGvE,SAAS,EAAkB,GAAuB;AAK9C,EAJF,EAAE,gBAAgB,EAClB,EAAY,GAAK,EAEjB,EADU,EAAmB,EAAE,CACd,EACf,EAAE,OAAuB,kBAAkB,EAAE,UAAU;;CAG3D,SAAS,EAAkB,GAAuB;AAC3C,OACL,EAAe,EAAmB,EAAE,CAAC;;CAGvC,SAAS,IAAkB;AACzB,IAAY,GAAM;;CAGpB,IAAM,IAAS,MAAY,QACrB,IAAU,IAAS,gBAAgB,qBACnC,IAAS,IAAS,aAAa,eAC/B,IAAU,IAAS,aAAa;AAGtC,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,UAAD;GAAQ,SAAS;GAAc,WAAW,EAAG,qBAJ/B,IAAS,mCAAmC,8CAIkB;GAAE,cAAY,IAAQ,eAAe;GAAY,OAAO,IAAQ,WAAW;aACpJ,KAAS,MAAW,IAAI,kBAAC,GAAD;IAAM,MAAM;IAAe,MAAK;IAAO,CAAA,GAAG,kBAAC,GAAD;IAAM,MAAM;IAAY,MAAK;IAAO,CAAA;GAChG,CAAA,EACT,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD;IACE,KAAK;IACL,WAAW,EAAG,mDAAmD,EAAQ;IACzE,eAAe;IACf,eAAe;IACf,aAAa;IACb,MAAK;IACL,cAAW;IACX,iBAAe,KAAK,MAAM,IAAgB,IAAI;IAC9C,iBAAe;IACf,iBAAe;IACf,UAAU;cAXZ,CAcE,kBAAC,OAAD;KACE,WAAW,EAAG,4EAA4E,EAAO;KACjG,OAAO,EAAE,OAAO,GAAG,IAAgB,IAAI,IAAI;KAC3C,CAAA,EAEF,kBAAC,OAAD;KACE,WAAW,EACT,+FACA,GACA,IAAW,0BAA0B,wCACtC;KACD,OAAO;MAAE,MAAM,GAAG,IAAgB,IAAI;MAAI,YAAY;MAAQ;KAC9D,CAAA,CACE;;GACF,CAAA,CACF;;;AAQV,SAAgB,EAAW,GAAmB;AAC5C,KAAI,CAAC,SAAS,EAAE,IAAI,IAAI,EAAG,QAAO;CAClC,IAAM,IAAI,KAAK,MAAM,IAAI,KAAK,EACxB,IAAI,KAAK,MAAO,IAAI,OAAQ,GAAG,EAC/B,IAAM,KAAK,MAAM,IAAI,GAAG;AAE9B,QADI,IAAI,IAAU,GAAG,EAAE,GAAG,EAAE,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,EAAI,UAAU,CAAC,SAAS,GAAG,IAAI,KACnF,GAAG,EAAE,GAAG,EAAI,UAAU,CAAC,SAAS,GAAG,IAAI"}
+{"version":3,"file":"shared.js","names":[],"sources":["../../src/composed/file-preview/shared.tsx"],"sourcesContent":["'use client'\n\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-ds-md 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-ds-md font-semibold text-surface-fg\">Preview unavailable</p>\n        <p className=\"text-ds-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-ds-md border border-surface-border 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: Volume Slider (Spotify/YouTube style)\n// Custom-built — no native input range. Consistent across browsers.\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 trackRef = React.useRef<HTMLDivElement>(null)\n  const [dragging, setDragging] = React.useState(false)\n  const displayVolume = muted ? 0 : volume\n\n  function getVolumeFromEvent(e: MouseEvent | React.MouseEvent) {\n    if (!trackRef.current) return volume\n    const rect = trackRef.current.getBoundingClientRect()\n    return Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))\n  }\n\n  function handlePointerDown(e: React.PointerEvent) {\n    e.preventDefault()\n    setDragging(true)\n    const v = getVolumeFromEvent(e)\n    onVolumeChange(v)\n    ;(e.target as HTMLElement).setPointerCapture(e.pointerId)\n  }\n\n  function handlePointerMove(e: React.PointerEvent) {\n    if (!dragging) return\n    onVolumeChange(getVolumeFromEvent(e))\n  }\n\n  function handlePointerUp() {\n    setDragging(false)\n  }\n\n  const isDark = variant === 'dark'\n  const trackBg = isDark ? 'bg-white/30' : 'bg-surface-sunken'\n  const fillBg = isDark ? 'bg-white' : 'bg-accent-9'\n  const thumbBg = isDark ? 'bg-white' : 'bg-accent-9'\n  const iconClass = isDark ? 'text-white hover:text-white/80' : 'text-surface-fg-muted hover:text-surface-fg'\n\n  return (\n    <div className=\"group/vol flex items-center gap-ds-02 shrink-0\">\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=\"w-0 overflow-hidden group-hover/vol:w-20 transition-[width] duration-200 ease-productive-standard flex items-center\">\n        <div\n          ref={trackRef}\n          className={cn('relative w-full h-1 rounded-full cursor-pointer', trackBg)}\n          onPointerDown={handlePointerDown}\n          onPointerMove={handlePointerMove}\n          onPointerUp={handlePointerUp}\n          role=\"slider\"\n          aria-label=\"Volume\"\n          aria-valuenow={Math.round(displayVolume * 100)}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          tabIndex={0}\n        >\n          {/* Fill */}\n          <div\n            className={cn('absolute left-0 top-0 h-full rounded-full transition-[width] duration-75', fillBg)}\n            style={{ width: `${displayVolume * 100}%` }}\n          />\n          {/* Thumb */}\n          <div\n            className={cn(\n              'absolute top-1/2 -translate-y-1/2 h-2.5 w-2.5 rounded-full shadow-raised transition-opacity',\n              thumbBg,\n              dragging ? 'opacity-100 scale-110' : 'opacity-0 group-hover/vol:opacity-100',\n            )}\n            style={{ left: `${displayVolume * 100}%`, marginLeft: '-5px' }}\n          />\n        </div>\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/text.js

@@ -0,0 +1,432 @@
+"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 { n as o } from "./badge-group.js";
+import { Button as s } from "../ui/button.js";
+import { Collapsible as c, CollapsibleContent as l, CollapsibleTrigger as u } from "../ui/collapsible.js";
+import { Skeleton as d } from "../ui/skeleton.js";
+import { Table as f, TableBody as p, TableCaption as m, TableCell as h, TableHead as g, TableHeader as _, TableRow as v } from "../ui/table.js";
+import { Separator as y } from "../ui/separator.js";
+import { StatCard as b } from "../ui/stat-card.js";
+import { n as x } from "./motion-provider.js";
+import * as S from "react";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
+import { IconCircle as T, IconCircleCheck as E, IconCircleX as D } from "@tabler/icons-react";
+import { motion as O } from "framer-motion";
+import k from "react-markdown";
+import A from "remark-gfm";
+//#region src/ai/blocks/block-table.tsx
+function j(e, t) {
+	if (t.variant === "badge") {
+		if (e && typeof e == "object" && "label" in e) {
+			let t = e;
+			return /* @__PURE__ */ C(o, {
+				variant: "subtle",
+				size: "sm",
+				color: t.color,
+				children: t.label
+			});
+		}
+		return /* @__PURE__ */ C(o, {
+			variant: "subtle",
+			size: "sm",
+			children: String(e ?? "")
+		});
+	}
+	return String(e ?? "");
+}
+function M(e, t, n) {
+	return !t || !n ? e : [...e].sort((e, r) => {
+		let i = e[t], a = r[t], o = String(i ?? ""), s = String(a ?? ""), c = Number(i), l = Number(a);
+		if (!Number.isNaN(c) && !Number.isNaN(l)) return n === "asc" ? c - l : l - c;
+		let u = o.localeCompare(s);
+		return n === "asc" ? u : -u;
+	});
+}
+var N = S.memo(function({ data: e, confidence: n }) {
+	let { reducedMotion: i } = x(), [a, o] = S.useState(null), [s, c] = S.useState(null), l = S.useCallback((t) => {
+		e.sortable && (a === t ? s === "asc" ? c("desc") : s === "desc" && (o(null), c(null)) : (o(t), c("asc")));
+	}, [
+		e.sortable,
+		a,
+		s
+	]), u = e.columns ?? [], d = M(e.rows ?? [], a, s);
+	return /* @__PURE__ */ C("div", {
+		className: r("overflow-x-auto", n === "low" && "border-l-2 border-warning-7 pl-3"),
+		children: /* @__PURE__ */ w(f, { children: [
+			e.caption && /* @__PURE__ */ C(m, { children: e.caption }),
+			/* @__PURE__ */ C(_, { children: /* @__PURE__ */ C(v, { children: u.map((t) => {
+				let n = a === t.key, i = e.sortable ? n ? s === "asc" ? "ascending" : "descending" : "none" : void 0;
+				return /* @__PURE__ */ C(g, {
+					role: "columnheader",
+					className: r(t.variant === "number" && "text-right", e.sortable && "cursor-pointer select-none"),
+					tabIndex: e.sortable ? 0 : void 0,
+					onClick: e.sortable ? () => l(t.key) : void 0,
+					onKeyDown: e.sortable ? (e) => {
+						(e.key === "Enter" || e.key === " ") && (e.preventDefault(), l(t.key));
+					} : void 0,
+					"aria-sort": i,
+					children: /* @__PURE__ */ w("span", {
+						className: "inline-flex items-center gap-1",
+						children: [
+							t.label,
+							n && s === "asc" && /* @__PURE__ */ C("span", {
+								"aria-hidden": "true",
+								children: "▲"
+							}),
+							n && s === "desc" && /* @__PURE__ */ C("span", {
+								"aria-hidden": "true",
+								children: "▼"
+							})
+						]
+					})
+				}, t.key);
+			}) }) }),
+			/* @__PURE__ */ C(p, { children: d.map((e, n) => {
+				let a = typeof e.id == "string" || typeof e.id == "number" ? String(e.id) : `row-${n}`;
+				return /* @__PURE__ */ C(i ? "tr" : O.tr, {
+					className: "hover:bg-surface-raised-hover transition-colors",
+					...i ? {} : {
+						initial: {
+							opacity: 0,
+							y: 6
+						},
+						animate: {
+							opacity: 1,
+							y: 0
+						},
+						transition: {
+							...t.responsive,
+							delay: n * .03
+						}
+					},
+					children: u.map((t) => /* @__PURE__ */ C(h, {
+						className: r("text-ds-sm py-ds-02b px-ds-04", t.variant === "number" && "text-right tabular-nums font-medium"),
+						children: j(e[t.key], t)
+					}, t.key))
+				}, a);
+			}) })
+		] })
+	});
+});
+N.displayName = "BlockTable";
+//#endregion
+//#region src/ai/blocks/confirm.tsx
+var P = S.memo(function({ data: e, confidence: t, onAction: n }) {
+	let i = S.useCallback(() => {
+		n?.(e.actionId, "confirm");
+	}, [e.actionId, n]), a = S.useCallback(() => {
+		n?.(e.actionId, "cancel");
+	}, [e.actionId, n]);
+	return /* @__PURE__ */ w("div", {
+		className: r(t === "low" && "border-l-2 border-warning-7 pl-3"),
+		children: [
+			e.description && /* @__PURE__ */ C("p", {
+				className: "text-ds-sm text-surface-fg-muted mb-3",
+				children: e.description
+			}),
+			/* @__PURE__ */ w("div", {
+				className: "flex items-center gap-3",
+				children: [/* @__PURE__ */ C(s, {
+					variant: "solid",
+					color: e.destructive ? "error" : void 0,
+					onClick: i,
+					children: e.label
+				}), /* @__PURE__ */ C(s, {
+					variant: "ghost",
+					onClick: a,
+					children: "Cancel"
+				})]
+			}),
+			e.rationale && /* @__PURE__ */ w(c, {
+				className: "mt-3",
+				children: [/* @__PURE__ */ C(u, {
+					asChild: !0,
+					children: /* @__PURE__ */ C("button", {
+						type: "button",
+						className: "text-ds-xs text-surface-fg-subtle underline cursor-pointer",
+						children: "Why this action?"
+					})
+				}), /* @__PURE__ */ C(l, { children: /* @__PURE__ */ C("p", {
+					className: "text-ds-sm text-surface-fg-muted mt-2 p-3 bg-surface-raised rounded-ds-lg",
+					children: e.rationale
+				}) })]
+			})
+		]
+	});
+});
+P.displayName = "ConfirmBlock";
+//#endregion
+//#region src/ai/blocks/divider.tsx
+var F = S.memo(function(e) {
+	let { reducedMotion: t } = x();
+	return t ? /* @__PURE__ */ C(y, {}) : /* @__PURE__ */ C(O.div, {
+		initial: { scaleX: 0 },
+		animate: { scaleX: 1 },
+		style: { originX: .5 },
+		transition: n.elegant,
+		children: /* @__PURE__ */ C(y, {})
+	});
+});
+F.displayName = "DividerBlock";
+//#endregion
+//#region src/ai/blocks/error.tsx
+var I = S.memo(function({ data: e, confidence: t }) {
+	return /* @__PURE__ */ w("div", {
+		className: r(t === "low" && "border-l-2 border-warning-7 pl-3"),
+		children: [/* @__PURE__ */ C(a, {
+			color: "error",
+			variant: "subtle",
+			title: e.title,
+			children: /* @__PURE__ */ C("div", {
+				className: "prose prose-sm",
+				children: /* @__PURE__ */ C(k, {
+					remarkPlugins: [A],
+					children: e.message
+				})
+			})
+		}), e.suggestion && /* @__PURE__ */ C("p", {
+			className: "mt-2 text-ds-sm text-surface-fg-muted",
+			children: e.suggestion
+		})]
+	});
+});
+I.displayName = "ErrorBlock";
+//#endregion
+//#region src/ai/blocks/info.tsx
+var L = S.memo(function({ data: e }) {
+	return /* @__PURE__ */ C(a, {
+		color: "info",
+		variant: "subtle",
+		role: "status",
+		children: e.message
+	});
+});
+L.displayName = "InfoBlock";
+//#endregion
+//#region src/ai/blocks/loading.tsx
+function R() {
+	return /* @__PURE__ */ C(O.span, {
+		className: "inline-block h-4 w-4 rounded-full border-2 border-current border-t-transparent text-accent-9",
+		animate: { rotate: 360 },
+		transition: {
+			repeat: Infinity,
+			duration: 1,
+			ease: "linear"
+		},
+		"aria-hidden": "true",
+		"data-testid": "step-spinner"
+	});
+}
+function z({ status: e }) {
+	switch (e) {
+		case "done": return /* @__PURE__ */ C("span", {
+			"data-testid": "step-icon-done",
+			children: /* @__PURE__ */ C(i, {
+				icon: E,
+				size: "sm",
+				className: "text-success-11"
+			})
+		});
+		case "active": return /* @__PURE__ */ C(R, {});
+		case "error": return /* @__PURE__ */ C("span", {
+			"data-testid": "step-icon-error",
+			children: /* @__PURE__ */ C(i, {
+				icon: D,
+				size: "sm",
+				className: "text-error-11"
+			})
+		});
+		default: return /* @__PURE__ */ C("span", {
+			"data-testid": "step-icon-pending",
+			children: /* @__PURE__ */ C(i, {
+				icon: T,
+				size: "sm",
+				className: "text-surface-fg-subtle opacity-50"
+			})
+		});
+	}
+}
+var B = S.memo(function({ data: t }) {
+	let { reducedMotion: n } = x(), i = n;
+	if (t.lines != null) {
+		let e = Math.max(1, t.lines);
+		return /* @__PURE__ */ w("div", {
+			role: "status",
+			"aria-busy": "true",
+			"aria-label": "Loading",
+			className: "flex flex-col gap-2",
+			children: [Array.from({ length: e }).map((t, n) => /* @__PURE__ */ C(d, {
+				animation: "shimmer",
+				className: r("h-4", n === e - 1 ? "w-3/5" : "w-full")
+			}, n)), /* @__PURE__ */ C("span", {
+				className: "sr-only",
+				children: "Loading"
+			})]
+		});
+	}
+	return t.steps ? /* @__PURE__ */ w("div", {
+		role: "status",
+		"aria-busy": "true",
+		"aria-label": "Processing",
+		className: "flex flex-col gap-2",
+		children: [t.steps.map((t, n) => /* @__PURE__ */ w(O.div, {
+			className: "flex items-center gap-2",
+			initial: i ? void 0 : {
+				opacity: 0,
+				x: -8
+			},
+			animate: {
+				opacity: 1,
+				x: 0
+			},
+			transition: i ? { duration: 0 } : {
+				duration: e.moderate01b,
+				delay: n * .06
+			},
+			children: [/* @__PURE__ */ C(z, { status: t.status }), /* @__PURE__ */ C("span", {
+				className: r("text-ds-sm", t.status === "done" || t.status === "active" ? "text-surface-fg" : "text-surface-fg-subtle"),
+				children: t.label
+			})]
+		}, t.id)), /* @__PURE__ */ C("span", {
+			className: "sr-only",
+			children: "Processing"
+		})]
+	}) : /* @__PURE__ */ C("div", {
+		role: "status",
+		"aria-busy": "true",
+		"aria-label": "Loading",
+		children: /* @__PURE__ */ C("span", {
+			className: "sr-only",
+			children: "Loading"
+		})
+	});
+});
+B.displayName = "LoadingBlock";
+//#endregion
+//#region src/ai/blocks/stat-row.tsx
+var V = S.memo(function({ data: e }) {
+	let { reducedMotion: n } = x(), r = e.stats ?? [];
+	return r.length === 0 ? null : /* @__PURE__ */ C("div", {
+		className: "flex flex-wrap gap-ds-05",
+		children: r.map((e, r) => {
+			let i = e.change ? {
+				value: e.change.value,
+				direction: e.change.direction
+			} : void 0;
+			return n ? /* @__PURE__ */ C("div", {
+				className: "flex-1 min-w-[140px]",
+				children: /* @__PURE__ */ C(b, {
+					label: e.label,
+					value: e.value,
+					delta: i
+				})
+			}, e.label) : /* @__PURE__ */ C(O.div, {
+				className: "flex-1 min-w-[140px]",
+				initial: {
+					opacity: 0,
+					y: 8
+				},
+				animate: {
+					opacity: 1,
+					y: 0
+				},
+				transition: {
+					...t.responsive,
+					delay: r * .08
+				},
+				children: /* @__PURE__ */ C(b, {
+					label: e.label,
+					value: e.value,
+					delta: i
+				})
+			}, e.label);
+		})
+	});
+});
+V.displayName = "StatRowBlock";
+//#endregion
+//#region src/ai/blocks/success.tsx
+var H = 5e3, U = S.memo(function({ data: e, blockId: t, confidence: n, onAction: i }) {
+	let { reducedMotion: o } = x(), c = o, l = e.undoTimeout ?? H, [u, d] = S.useState(l), [f, p] = S.useState(!!e.undoable);
+	S.useEffect(() => {
+		if (!e.undoable) return;
+		let t = setInterval(() => {
+			d((e) => {
+				let n = e - 100;
+				return n <= 0 ? (clearInterval(t), p(!1), 0) : n;
+			});
+		}, 100);
+		return () => clearInterval(t);
+	}, [e.undoable, l]);
+	let m = S.useCallback(() => {
+		i?.(t || "unknown", "undo");
+	}, [t, i]), h = Math.ceil(u / 1e3), g = 2 * Math.PI * 9;
+	return /* @__PURE__ */ w("div", {
+		className: r(n === "low" && "border-l-2 border-warning-7 pl-3"),
+		children: [/* @__PURE__ */ C(a, {
+			color: "success",
+			variant: "subtle",
+			title: e.title,
+			children: e.message
+		}), f && e.undoable && /* @__PURE__ */ C("div", {
+			className: "mt-2 flex items-center gap-2",
+			children: /* @__PURE__ */ C(s, {
+				variant: "ghost",
+				size: "sm",
+				onClick: m,
+				"aria-label": `Undo action, ${h} seconds remaining`,
+				children: /* @__PURE__ */ w("span", {
+					className: "flex items-center gap-1.5",
+					children: [/* @__PURE__ */ w("svg", {
+						width: 20,
+						height: 20,
+						viewBox: "0 0 20 20",
+						className: "shrink-0 -rotate-90",
+						"aria-hidden": "true",
+						children: [/* @__PURE__ */ C("circle", {
+							cx: 20 / 2,
+							cy: 20 / 2,
+							r: 9,
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: 2,
+							opacity: .2
+						}), /* @__PURE__ */ C(O.circle, {
+							cx: 20 / 2,
+							cy: 20 / 2,
+							r: 9,
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: 2,
+							strokeDasharray: g,
+							initial: c ? void 0 : { strokeDashoffset: 0 },
+							animate: { strokeDashoffset: g },
+							transition: c ? { duration: 0 } : {
+								duration: l / 1e3,
+								ease: "linear"
+							}
+						})]
+					}), "Undo"]
+				})
+			})
+		})]
+	});
+});
+U.displayName = "SuccessBlock";
+//#endregion
+//#region src/ai/blocks/text.tsx
+var W = S.memo(function({ data: e, confidence: t }) {
+	return /* @__PURE__ */ C("div", {
+		className: r("prose prose-sm", "text-surface-fg", "prose-headings:text-surface-fg", "prose-a:text-accent-11 prose-a:underline", "prose-code:text-accent-11 prose-code:bg-surface-raised prose-code:rounded prose-code:px-1", "prose-strong:text-surface-fg", t === "low" && "border-l-2 border-warning-7 pl-3"),
+		children: /* @__PURE__ */ C(k, {
+			remarkPlugins: [A],
+			children: e.content
+		})
+	});
+});
+W.displayName = "TextBlock";
+//#endregion
+export { L as a, P as c, B as i, N as l, U as n, I as o, V as r, F as s, W as t };