@devalok/shilp-sutra 0.49.1 → 0.49.2

package/dist/ai/index.js

@@ -22,7 +22,7 @@ function O(e) {
 	}, [t, e]), b(t, (e) => `rotate(${e}, 16, 16)`);
 }
 var k = p.memo(function({ state: n = "idle", size: r = 20, className: i }) {
-	let { reducedMotion: a } = t(), o = O(n), s = p.useId(), c = p.useId();
+	let { reducedMotion: a } = t(), o = O(n), s = p.useId();
 	if (a) return /* @__PURE__ */ m("svg", {
 		viewBox: "0 0 32 32",
 		width: r,
@@ -34,7 +34,7 @@ var k = p.memo(function({ state: n = "idle", size: r = 20, className: i }) {
 			fill: n === "error" ? D : S
 		})
 	});
-	let l = n === "error" ? {
+	let c = n === "error" ? {
 		s1: D,
 		s2: "#FF6B6B",
 		s3: D
@@ -50,7 +50,7 @@ var k = p.memo(function({ state: n = "idle", size: r = 20, className: i }) {
 		s1: S,
 		s2: C,
 		s3: S
-	}, u = n === "processing" ? 3 : n === "error" ? 2.5 : 0;
+	};
 	return /* @__PURE__ */ m("span", {
 		className: e("relative inline-flex items-center justify-center", i),
 		style: {
@@ -80,7 +80,7 @@ var k = p.memo(function({ state: n = "idle", size: r = 20, className: i }) {
 			} } : n === "error" ? { x: { duration: .4 } } : { duration: .3 },
 			style: { overflow: "visible" },
 			children: [
-				/* @__PURE__ */ h("defs", { children: [/* @__PURE__ */ h(v.linearGradient, {
+				/* @__PURE__ */ m("defs", { children: /* @__PURE__ */ h(v.linearGradient, {
 					id: s,
 					x1: "0",
 					y1: "0",
@@ -90,7 +90,7 @@ var k = p.memo(function({ state: n = "idle", size: r = 20, className: i }) {
 					children: [
 						/* @__PURE__ */ m(v.stop, {
 							offset: "0%",
-							animate: { stopColor: l.s1 },
+							animate: { stopColor: c.s1 },
 							transition: {
 								duration: n === "processing" ? 3 : 5,
 								repeat: Infinity,
@@ -100,7 +100,7 @@ var k = p.memo(function({ state: n = "idle", size: r = 20, className: i }) {
 						}),
 						/* @__PURE__ */ m(v.stop, {
 							offset: "50%",
-							animate: { stopColor: l.s2 },
+							animate: { stopColor: c.s2 },
 							transition: {
 								duration: n === "processing" ? 3 : 5,
 								repeat: Infinity,
@@ -111,7 +111,7 @@ var k = p.memo(function({ state: n = "idle", size: r = 20, className: i }) {
 						}),
 						/* @__PURE__ */ m(v.stop, {
 							offset: "100%",
-							animate: { stopColor: l.s3 },
+							animate: { stopColor: c.s3 },
 							transition: {
 								duration: n === "processing" ? 3 : 5,
 								repeat: Infinity,
@@ -121,37 +121,6 @@ var k = p.memo(function({ state: n = "idle", size: r = 20, className: i }) {
 							}
 						})
 					]
-				}), /* @__PURE__ */ m("filter", {
-					id: c,
-					x: "-50%",
-					y: "-50%",
-					width: "200%",
-					height: "200%",
-					children: /* @__PURE__ */ m(v.feGaussianBlur, {
-						in: "SourceGraphic",
-						animate: { stdDeviation: u },
-						transition: {
-							duration: .6,
-							ease: "easeOut"
-						}
-					})
-				})] }),
-				/* @__PURE__ */ m(g, { children: (n === "processing" || n === "error") && /* @__PURE__ */ m(v.path, {
-					d: x,
-					fill: `url(#${s})`,
-					filter: `url(#${c})`,
-					initial: { opacity: 0 },
-					animate: { opacity: [
-						.2,
-						.45,
-						.2
-					] },
-					exit: { opacity: 0 },
-					transition: { opacity: {
-						duration: 3,
-						repeat: Infinity,
-						ease: "easeInOut"
-					} }
 				}) }),
 				/* @__PURE__ */ m(g, { children: n === "processing" && /* @__PURE__ */ m(v.path, {
 					d: x,

package/dist/ai/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/ai/devadoot-icon.tsx"],"sourcesContent":["'use client'\n\n/**\n * DevadootIcon -- Animated Devalok chakra for the AI command system.\n *\n * Renders the Devalok chakra SVG with **fill-first** animations:\n * - idle: gradient color breathing (pink ↔ rose, slow cycle)\n * - processing: gradient sweep (pink → purple → blue → pink cycle) + glow pulse\n * - responded: bright flash → settle to solid brand + brief scale pop\n * - error: red fill + glow pulse\n *\n * Inspired by Google Gemini's gradient-as-identity approach: the color IS\n * the animation, not just rotation/scale applied to a static shape.\n */\nimport { animate, AnimatePresence,motion, useMotionValue, useTransform } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useMotion } from '../motion/motion-provider'\nimport { cn } from '../ui/lib/utils'\n\nexport type DevadootState = 'idle' | 'processing' | 'responded' | 'error'\n\nexport interface DevadootIconProps {\n  state?: DevadootState\n  size?: number\n  className?: string\n}\n\n// Devalok chakra SVG path\nconst CHAKRA_PATH =\n  'M25.97,21.39c-0.9-1.85,0.08-3.95-1.72-5.39c1.76-1.44,0.8-3.55,1.69-5.39c0.05-0.12,0.04-0.25-0.02-0.35c-0.06-0.1-0.16-0.18-0.29-0.19c-2.05-0.15-3.35-2.04-5.5-1.21c-0.39-2.21-2.7-2.44-3.84-4.13c-0.08-0.1-0.19-0.16-0.31-0.16c-0.12,0-0.23,0.05-0.31,0.16c-1.14,1.69-3.43,1.92-3.82,4.13c-2.14-0.83-3.47,1.07-5.52,1.21c-0.13,0.01-0.23,0.09-0.29,0.19c-0.06,0.1-0.07,0.23-0.02,0.35c0.9,1.85-0.08,3.95,1.72,5.39c-1.76,1.44-0.8,3.55-1.69,5.39C6,21.51,6.02,21.64,6.07,21.74c0.06,0.1,0.16,0.18,0.29,0.19c2.05,0.15,3.38,2.06,5.52,1.23c0.39,2.21,2.67,2.43,3.82,4.12c0.08,0.1,0.19,0.16,0.31,0.16c0.12,0,0.23-0.05,0.31-0.16c1.14-1.69,3.42-1.92,3.81-4.13c2.14,0.83,3.48-1.07,5.53-1.22c0.13-0.01,0.23-0.09,0.29-0.19C26.01,21.64,26.02,21.51,25.97,21.39z'\n\n// Brand colors — pink ↔ purple palette, no blue\nconst BRAND_PINK = '#D33163'\nconst BRAND_ROSE = '#E8457A'\nconst BRAND_PURPLE = '#9B5DE5'\nconst BRAND_MAGENTA = '#C850C0'\nconst BRAND_BRIGHT = '#FF6B9D'\nconst ERROR_RED = '#E5383B'\n\n/**\n * Gradient rotation driver — animates the angle of the SVG gradient.\n * This creates the \"sweep\" effect: colors appear to flow across the shape.\n */\nfunction useGradientRotation(state: DevadootState) {\n  const angle = useMotionValue(0)\n\n  React.useEffect(() => {\n    const controls = animate(angle, 360, {\n      duration: state === 'processing' ? 4 : 12,\n      repeat: Infinity,\n      ease: 'linear',\n    })\n    return () => controls.stop()\n  }, [angle, state])\n\n  return useTransform(angle, (v) => `rotate(${v}, 16, 16)`)\n}\n\nconst DevadootIcon = React.memo(function DevadootIcon({\n  state = 'idle',\n  size = 20,\n  className,\n}: DevadootIconProps) {\n  const { reducedMotion } = useMotion()\n  const gradientRotation = useGradientRotation(state)\n  const gradientId = React.useId()\n  const filterId = React.useId()\n\n  // Static fallback for reduced motion\n  if (reducedMotion) {\n    return (\n      <svg\n        viewBox=\"0 0 32 32\"\n        width={size}\n        height={size}\n        className={className}\n        aria-hidden=\"true\"\n      >\n        <path\n          d={CHAKRA_PATH}\n          fill={state === 'error' ? ERROR_RED : BRAND_PINK}\n        />\n      </svg>\n    )\n  }\n\n  // Resolve gradient stop colors based on state\n  const stops =\n    state === 'error'\n      ? { s1: ERROR_RED, s2: '#FF6B6B', s3: ERROR_RED }\n      : state === 'processing'\n        ? { s1: BRAND_PINK, s2: BRAND_PURPLE, s3: BRAND_MAGENTA }\n        : state === 'responded'\n          ? { s1: BRAND_BRIGHT, s2: BRAND_PINK, s3: BRAND_BRIGHT }\n          : { s1: BRAND_PINK, s2: BRAND_ROSE, s3: BRAND_PINK }\n\n  // Glow blur intensity\n  const glowBlur = state === 'processing' ? 3 : state === 'error' ? 2.5 : 0\n\n  return (\n    <span\n      className={cn('relative inline-flex items-center justify-center', className)}\n      style={{ width: size, height: size }}\n      aria-hidden=\"true\"\n    >\n      <motion.svg\n        viewBox=\"0 0 32 32\"\n        width={size}\n        height={size}\n        // Responded: brief pop. Error: shake. Others: no transform.\n        animate={\n          state === 'responded'\n            ? { scale: [1.18, 1] }\n            : state === 'error'\n              ? { x: [0, -2, 2, -1.5, 1.5, 0] }\n              : { scale: 1, x: 0 }\n        }\n        transition={\n          state === 'responded'\n            /* Near springs.bouncy (400/15/0.5) — stiffer pop for celebration feedback */\n            ? { scale: { type: 'spring', stiffness: 500, damping: 15 } }\n            : state === 'error'\n              ? { x: { duration: 0.4 } }\n              : { duration: 0.3 }\n        }\n        style={{ overflow: 'visible' }}\n      >\n        <defs>\n          {/* Animated gradient — colors + rotation create the sweep */}\n          <motion.linearGradient\n            id={gradientId}\n            x1=\"0\"\n            y1=\"0\"\n            x2=\"1\"\n            y2=\"1\"\n            gradientTransform={gradientRotation}\n          >\n            <motion.stop\n              offset=\"0%\"\n              animate={{ stopColor: stops.s1 }}\n              transition={{ duration: state === 'processing' ? 3 : 5, repeat: Infinity, repeatType: 'reverse', ease: 'easeInOut' }}\n            />\n            <motion.stop\n              offset=\"50%\"\n              animate={{ stopColor: stops.s2 }}\n              transition={{ duration: state === 'processing' ? 3 : 5, repeat: Infinity, repeatType: 'reverse', ease: 'easeInOut', delay: 0.5 }}\n            />\n            <motion.stop\n              offset=\"100%\"\n              animate={{ stopColor: stops.s3 }}\n              transition={{ duration: state === 'processing' ? 3 : 5, repeat: Infinity, repeatType: 'reverse', ease: 'easeInOut', delay: 1 }}\n            />\n          </motion.linearGradient>\n\n          {/* Glow filter — blur applied to shadow layer */}\n          <filter id={filterId} x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n            <motion.feGaussianBlur\n              in=\"SourceGraphic\"\n              animate={{ stdDeviation: glowBlur }}\n              transition={{ duration: 0.6, ease: 'easeOut' }}\n            />\n          </filter>\n        </defs>\n\n        {/* Layer 1: Glow shadow (blurred, semi-transparent copy behind) */}\n        <AnimatePresence>\n          {(state === 'processing' || state === 'error') && (\n            <motion.path\n              d={CHAKRA_PATH}\n              fill={`url(#${gradientId})`}\n              filter={`url(#${filterId})`}\n              initial={{ opacity: 0 }}\n              animate={{ opacity: [0.2, 0.45, 0.2] }}\n              exit={{ opacity: 0 }}\n              transition={{\n                opacity: { duration: 3, repeat: Infinity, ease: 'easeInOut' },\n              }}\n            />\n          )}\n        </AnimatePresence>\n\n        {/* Layer 2: Shimmer highlight (bright overlay that pulses) */}\n        <AnimatePresence>\n          {state === 'processing' && (\n            <motion.path\n              d={CHAKRA_PATH}\n              fill=\"white\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: [0, 0.12, 0] }}\n              exit={{ opacity: 0 }}\n              transition={{\n                opacity: { duration: 2.5, repeat: Infinity, ease: 'easeInOut' },\n              }}\n            />\n          )}\n        </AnimatePresence>\n\n        {/* Layer 3: Main shape — gradient fill */}\n        <motion.path\n          d={CHAKRA_PATH}\n          fill={`url(#${gradientId})`}\n          // Responded: brief bright flash via fill override\n          animate={\n            state === 'responded'\n              ? { fill: [`url(#${gradientId})`, `url(#${gradientId})`] }\n              : {}\n          }\n        />\n      </motion.svg>\n    </span>\n  )\n})\n\nDevadootIcon.displayName = 'DevadootIcon'\n\nexport { DevadootIcon }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/ai/devadoot-icon.tsx"],"sourcesContent":["'use client'\n\n/**\n * DevadootIcon -- Animated Devalok chakra for the AI command system.\n *\n * Renders the Devalok chakra SVG with **fill-first** animations:\n * - idle: gradient color breathing (pink ↔ rose, slow cycle)\n * - processing: gradient sweep (pink → purple → blue → pink cycle) + glow pulse\n * - responded: bright flash → settle to solid brand + brief scale pop\n * - error: red fill + glow pulse\n *\n * Inspired by Google Gemini's gradient-as-identity approach: the color IS\n * the animation, not just rotation/scale applied to a static shape.\n */\nimport { animate, AnimatePresence,motion, useMotionValue, useTransform } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useMotion } from '../motion/motion-provider'\nimport { cn } from '../ui/lib/utils'\n\nexport type DevadootState = 'idle' | 'processing' | 'responded' | 'error'\n\nexport interface DevadootIconProps {\n  state?: DevadootState\n  size?: number\n  className?: string\n}\n\n// Devalok chakra SVG path\nconst CHAKRA_PATH =\n  'M25.97,21.39c-0.9-1.85,0.08-3.95-1.72-5.39c1.76-1.44,0.8-3.55,1.69-5.39c0.05-0.12,0.04-0.25-0.02-0.35c-0.06-0.1-0.16-0.18-0.29-0.19c-2.05-0.15-3.35-2.04-5.5-1.21c-0.39-2.21-2.7-2.44-3.84-4.13c-0.08-0.1-0.19-0.16-0.31-0.16c-0.12,0-0.23,0.05-0.31,0.16c-1.14,1.69-3.43,1.92-3.82,4.13c-2.14-0.83-3.47,1.07-5.52,1.21c-0.13,0.01-0.23,0.09-0.29,0.19c-0.06,0.1-0.07,0.23-0.02,0.35c0.9,1.85-0.08,3.95,1.72,5.39c-1.76,1.44-0.8,3.55-1.69,5.39C6,21.51,6.02,21.64,6.07,21.74c0.06,0.1,0.16,0.18,0.29,0.19c2.05,0.15,3.38,2.06,5.52,1.23c0.39,2.21,2.67,2.43,3.82,4.12c0.08,0.1,0.19,0.16,0.31,0.16c0.12,0,0.23-0.05,0.31-0.16c1.14-1.69,3.42-1.92,3.81-4.13c2.14,0.83,3.48-1.07,5.53-1.22c0.13-0.01,0.23-0.09,0.29-0.19C26.01,21.64,26.02,21.51,25.97,21.39z'\n\n// Brand colors — pink ↔ purple palette, no blue\nconst BRAND_PINK = '#D33163'\nconst BRAND_ROSE = '#E8457A'\nconst BRAND_PURPLE = '#9B5DE5'\nconst BRAND_MAGENTA = '#C850C0'\nconst BRAND_BRIGHT = '#FF6B9D'\nconst ERROR_RED = '#E5383B'\n\n/**\n * Gradient rotation driver — animates the angle of the SVG gradient.\n * This creates the \"sweep\" effect: colors appear to flow across the shape.\n */\nfunction useGradientRotation(state: DevadootState) {\n  const angle = useMotionValue(0)\n\n  React.useEffect(() => {\n    const controls = animate(angle, 360, {\n      duration: state === 'processing' ? 4 : 12,\n      repeat: Infinity,\n      ease: 'linear',\n    })\n    return () => controls.stop()\n  }, [angle, state])\n\n  return useTransform(angle, (v) => `rotate(${v}, 16, 16)`)\n}\n\nconst DevadootIcon = React.memo(function DevadootIcon({\n  state = 'idle',\n  size = 20,\n  className,\n}: DevadootIconProps) {\n  const { reducedMotion } = useMotion()\n  const gradientRotation = useGradientRotation(state)\n  const gradientId = React.useId()\n\n  // Static fallback for reduced motion\n  if (reducedMotion) {\n    return (\n      <svg\n        viewBox=\"0 0 32 32\"\n        width={size}\n        height={size}\n        className={className}\n        aria-hidden=\"true\"\n      >\n        <path\n          d={CHAKRA_PATH}\n          fill={state === 'error' ? ERROR_RED : BRAND_PINK}\n        />\n      </svg>\n    )\n  }\n\n  // Resolve gradient stop colors based on state\n  const stops =\n    state === 'error'\n      ? { s1: ERROR_RED, s2: '#FF6B6B', s3: ERROR_RED }\n      : state === 'processing'\n        ? { s1: BRAND_PINK, s2: BRAND_PURPLE, s3: BRAND_MAGENTA }\n        : state === 'responded'\n          ? { s1: BRAND_BRIGHT, s2: BRAND_PINK, s3: BRAND_BRIGHT }\n          : { s1: BRAND_PINK, s2: BRAND_ROSE, s3: BRAND_PINK }\n\n  return (\n    <span\n      className={cn('relative inline-flex items-center justify-center', className)}\n      style={{ width: size, height: size }}\n      aria-hidden=\"true\"\n    >\n      <motion.svg\n        viewBox=\"0 0 32 32\"\n        width={size}\n        height={size}\n        // Responded: brief pop. Error: shake. Others: no transform.\n        animate={\n          state === 'responded'\n            ? { scale: [1.18, 1] }\n            : state === 'error'\n              ? { x: [0, -2, 2, -1.5, 1.5, 0] }\n              : { scale: 1, x: 0 }\n        }\n        transition={\n          state === 'responded'\n            /* Near springs.bouncy (400/15/0.5) — stiffer pop for celebration feedback */\n            ? { scale: { type: 'spring', stiffness: 500, damping: 15 } }\n            : state === 'error'\n              ? { x: { duration: 0.4 } }\n              : { duration: 0.3 }\n        }\n        style={{ overflow: 'visible' }}\n      >\n        <defs>\n          {/* Animated gradient — colors + rotation create the sweep */}\n          <motion.linearGradient\n            id={gradientId}\n            x1=\"0\"\n            y1=\"0\"\n            x2=\"1\"\n            y2=\"1\"\n            gradientTransform={gradientRotation}\n          >\n            <motion.stop\n              offset=\"0%\"\n              animate={{ stopColor: stops.s1 }}\n              transition={{ duration: state === 'processing' ? 3 : 5, repeat: Infinity, repeatType: 'reverse', ease: 'easeInOut' }}\n            />\n            <motion.stop\n              offset=\"50%\"\n              animate={{ stopColor: stops.s2 }}\n              transition={{ duration: state === 'processing' ? 3 : 5, repeat: Infinity, repeatType: 'reverse', ease: 'easeInOut', delay: 0.5 }}\n            />\n            <motion.stop\n              offset=\"100%\"\n              animate={{ stopColor: stops.s3 }}\n              transition={{ duration: state === 'processing' ? 3 : 5, repeat: Infinity, repeatType: 'reverse', ease: 'easeInOut', delay: 1 }}\n            />\n          </motion.linearGradient>\n        </defs>\n\n        {/* Layer 1: Shimmer highlight (bright overlay that pulses) */}\n        <AnimatePresence>\n          {state === 'processing' && (\n            <motion.path\n              d={CHAKRA_PATH}\n              fill=\"white\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: [0, 0.12, 0] }}\n              exit={{ opacity: 0 }}\n              transition={{\n                opacity: { duration: 2.5, repeat: Infinity, ease: 'easeInOut' },\n              }}\n            />\n          )}\n        </AnimatePresence>\n\n        {/* Layer 3: Main shape — gradient fill */}\n        <motion.path\n          d={CHAKRA_PATH}\n          fill={`url(#${gradientId})`}\n          // Responded: brief bright flash via fill override\n          animate={\n            state === 'responded'\n              ? { fill: [`url(#${gradientId})`, `url(#${gradientId})`] }\n              : {}\n          }\n        />\n      </motion.svg>\n    </span>\n  )\n})\n\nDevadootIcon.displayName = 'DevadootIcon'\n\nexport { DevadootIcon }\n"],"mappings":"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"}

package/dist/composed/activity-feed.js

@@ -138,7 +138,7 @@ function b({ item: e, compact: n, children: r }) {
 }
 function x({ label: n, isFirst: r }) {
 	return /* @__PURE__ */ f(m.div, {
-		initial: { opacity: 0 },
+		initial: !1,
 		animate: { opacity: 1 },
 		transition: e.fade,
 		className: t("flex items-center gap-ds-03", r ? "" : "mt-ds-06", "mb-ds-03"),
@@ -191,7 +191,7 @@ var S = u.forwardRef(({ items: n, onLoadMore: r, loading: i = !1, hasMore: a = !
 			}), /* @__PURE__ */ f("div", {
 				className: t("relative flex flex-col", c ? "gap-1" : "gap-3"),
 				children: [/* @__PURE__ */ d("div", { className: "absolute bottom-0 left-[3px] top-0 w-px bg-surface-border" }), n.items.map((t, n) => /* @__PURE__ */ d(m.div, {
-					initial: { opacity: 0 },
+					initial: !1,
 					animate: { opacity: 1 },
 					transition: {
 						...e.fade,
@@ -202,7 +202,7 @@ var S = u.forwardRef(({ items: n, onLoadMore: r, loading: i = !1, hasMore: a = !
 			})] }, n.label)) }) : /* @__PURE__ */ f("div", {
 				className: t("relative flex flex-col", c ? "gap-1" : "gap-3"),
 				children: [/* @__PURE__ */ d("div", { className: "absolute bottom-0 left-[3px] top-0 w-px bg-surface-border" }), O.map((t, n) => /* @__PURE__ */ d(m.div, {
-					initial: { opacity: 0 },
+					initial: !1,
 					animate: { opacity: 1 },
 					transition: {
 						...e.fade,

package/dist/composed/activity-feed.js.map

@@ -1 +1 @@
-{"version":3,"file":"activity-feed.js","names":[],"sources":["../../src/composed/activity-feed.tsx"],"sourcesContent":["'use client'\n\nimport { IconChevronRight } from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'\nimport { Button } from '../ui/button'\nimport { Icon } from '../ui/icon'\nimport { formatRelativeTime } from '../ui/lib/date-utils'\nimport type { IconInput } from '../ui/lib/icon-input'\nimport { tweens } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport { Skeleton } from '../ui/skeleton'\nimport { getInitials } from './lib/string-utils'\n\nexport interface ActivityItem {\n  id: string\n  actor?: { name: string; image?: string }\n  action: string | React.ReactNode\n  timestamp: Date | string\n  icon?: IconInput\n  color?: 'default' | 'success' | 'warning' | 'error' | 'info'\n  detail?: React.ReactNode\n}\n\nexport interface GroupLabels {\n  today?: string\n  yesterday?: string\n  thisWeek?: string\n  older?: string\n}\n\nexport interface ActivityFeedProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: ActivityItem[]\n  onLoadMore?: () => void\n  loading?: boolean\n  hasMore?: boolean\n  emptyState?: React.ReactNode\n  compact?: boolean\n  maxInitialItems?: number\n  groupBy?: 'time' | 'none'\n  groupLabels?: GroupLabels\n  /** Custom renderer per item. Return ReactNode for custom rendering, undefined to use default ActivityEntry. */\n  renderItem?: (item: ActivityItem, index: number) => React.ReactNode | undefined\n}\n\nconst dotColorMap = {\n  default: 'bg-surface-fg-subtle',\n  success: 'bg-success-9',\n  warning: 'bg-warning-9',\n  error: 'bg-error-9',\n  info: 'bg-info-9',\n} as const\n\nconst DEFAULT_GROUP_LABELS: Required<GroupLabels> = {\n  today: 'Today',\n  yesterday: 'Yesterday',\n  thisWeek: 'This Week',\n  older: 'Older',\n}\n\n/**\n * Buckets items into time-based groups: today, yesterday, earlier this week (since Monday), older.\n * Skips empty groups.\n */\nexport function groupItemsByTime(\n  items: ActivityItem[],\n  labels?: GroupLabels,\n): { label: string; items: ActivityItem[] }[] {\n  const l = { ...DEFAULT_GROUP_LABELS, ...labels }\n  const now = new Date()\n\n  // Start of today (midnight local)\n  const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate())\n  // Start of yesterday\n  const startOfYesterday = new Date(startOfToday.getTime() - 24 * 60 * 60 * 1000)\n  // Start of this week (Monday)\n  const dayOfWeek = now.getDay() // 0=Sun, 1=Mon, ...\n  const daysSinceMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1\n  const startOfWeek = new Date(\n    startOfToday.getTime() - daysSinceMonday * 24 * 60 * 60 * 1000,\n  )\n\n  const today: ActivityItem[] = []\n  const yesterday: ActivityItem[] = []\n  const thisWeek: ActivityItem[] = []\n  const older: ActivityItem[] = []\n\n  for (const item of items) {\n    const ts =\n      typeof item.timestamp === 'string'\n        ? new Date(item.timestamp)\n        : item.timestamp\n    const t = ts.getTime()\n\n    if (t >= startOfToday.getTime()) {\n      today.push(item)\n    } else if (t >= startOfYesterday.getTime()) {\n      yesterday.push(item)\n    } else if (t >= startOfWeek.getTime()) {\n      thisWeek.push(item)\n    } else {\n      older.push(item)\n    }\n  }\n\n  const groups: { label: string; items: ActivityItem[] }[] = []\n  if (today.length > 0) groups.push({ label: l.today, items: today })\n  if (yesterday.length > 0) groups.push({ label: l.yesterday, items: yesterday })\n  if (thisWeek.length > 0) groups.push({ label: l.thisWeek, items: thisWeek })\n  if (older.length > 0) groups.push({ label: l.older, items: older })\n\n  return groups\n}\n\nfunction LoadingSkeleton({ compact }: { compact: boolean }) {\n  return (\n    <div className={cn('flex flex-col', compact ? 'gap-1' : 'gap-3')}>\n      {[0, 1, 2].map((i) => (\n        <div key={i} className=\"flex items-center gap-ds-03\">\n          <Skeleton className=\"h-2 w-2 shrink-0 rounded-pill\" />\n          {!compact && <Skeleton className=\"h-4 w-4 shrink-0 rounded-pill\" />}\n          <Skeleton className={cn('flex-1', compact ? 'h-3' : 'h-4')} />\n          <Skeleton className=\"h-3 w-12\" />\n        </div>\n      ))}\n    </div>\n  )\n}\n\nfunction ActivityEntry({\n  item,\n  compact,\n}: {\n  item: ActivityItem\n  compact: boolean\n}) {\n  const [expandedDetail, setExpandedDetail] = React.useState(false)\n  const detailId = React.useId()\n  const color = item.color ?? 'default'\n\n  const handleActionClick = () => {\n    if (item.detail) {\n      setExpandedDetail((prev) => !prev)\n    }\n  }\n\n  return (\n    <div className={cn('relative flex items-start', compact ? 'gap-ds-02' : 'gap-ds-03')}>\n      {/* Dot */}\n      <div\n        className={cn(\n          'relative z-10 mt-1.5 h-2 w-2 shrink-0 rounded-pill ring-2 ring-surface-base',\n          dotColorMap[color],\n        )}\n      />\n\n      {/* Avatar (non-compact only) */}\n      {!compact && item.actor && (\n        <Avatar className=\"h-5 w-5 shrink-0 text-[9px]\">\n          {item.actor.image && (\n            <AvatarImage src={item.actor.image} alt={item.actor.name} />\n          )}\n          <AvatarFallback className=\"text-[9px]\">\n            {getInitials(item.actor.name)}\n          </AvatarFallback>\n        </Avatar>\n      )}\n\n      {/* Content */}\n      <div className=\"flex min-w-0 flex-1 flex-col\">\n        <div className=\"flex items-center justify-between gap-ds-02\">\n          <div className={cn('min-w-0 flex-1 flex items-center gap-ds-01 flex-wrap', compact ? 'text-ds-xs' : 'text-ds-sm')}>\n            {item.actor && (\n              <span className=\"font-medium text-surface-fg\">{item.actor.name} </span>\n            )}\n            {item.detail && (\n              <Icon icon={IconChevronRight} size=\"xs\" className={cn('shrink-0 text-surface-fg-subtle transition-transform duration-fast-02 ease-productive-standard', expandedDetail && 'rotate-90')} />\n            )}\n            {item.detail ? (\n              <button\n                type=\"button\"\n                className=\"rounded-control text-surface-fg-muted hover:underline hover:bg-surface-raised focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9\"\n                onClick={handleActionClick}\n                aria-expanded={expandedDetail}\n                aria-controls={detailId}\n              >\n                {item.action}\n              </button>\n            ) : (\n              <span className=\"text-surface-fg-muted\">{item.action}</span>\n            )}\n          </div>\n\n          <time\n            className={cn(\n              'shrink-0 whitespace-nowrap text-surface-fg-subtle',\n              compact ? 'text-ds-xs' : 'text-ds-sm',\n            )}\n            dateTime={\n              (typeof item.timestamp === 'string'\n                ? new Date(item.timestamp)\n                : item.timestamp\n              ).toISOString()\n            }\n          >\n            {formatRelativeTime(item.timestamp)}\n          </time>\n        </div>\n\n        {/* Expandable detail */}\n        {expandedDetail && item.detail && (\n          <div id={detailId} className=\"mt-ds-02 animate-in fade-in slide-in-from-top-1 text-ds-sm text-surface-fg-muted\">\n            {item.detail}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\n/**\n * Wraps custom renderItem content with the same dot + layout container\n * that ActivityEntry uses, keeping vertical rhythm consistent.\n */\nfunction CustomEntry({\n  item,\n  compact,\n  children,\n}: {\n  item: ActivityItem\n  compact: boolean\n  children: React.ReactNode\n}) {\n  const color = item.color ?? 'default'\n  return (\n    <div className={cn('relative flex items-start', compact ? 'gap-ds-02' : 'gap-ds-03')}>\n      {/* Dot — same as ActivityEntry */}\n      <div\n        className={cn(\n          'relative z-10 mt-1.5 h-2 w-2 shrink-0 rounded-pill ring-2 ring-surface-base',\n          dotColorMap[color],\n        )}\n      />\n      {/* Custom content in the same flex slot as ActivityEntry's content area */}\n      <div className=\"min-w-0 flex-1\">{children}</div>\n    </div>\n  )\n}\n\nfunction GroupHeader({\n  label,\n  isFirst,\n}: {\n  label: string\n  isFirst: boolean\n}) {\n  return (\n    <motion.div\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      transition={tweens.fade}\n      className={cn(\n        'flex items-center gap-ds-03',\n        !isFirst ? 'mt-ds-06' : '',\n        'mb-ds-03',\n      )}\n    >\n      <hr className=\"flex-1 border-surface-border\" />\n      <span className=\"bg-surface-base px-ds-03 text-ds-xs font-medium uppercase tracking-wider text-surface-fg-subtle\">\n        {label}\n      </span>\n      <hr className=\"flex-1 border-surface-border\" />\n    </motion.div>\n  )\n}\n\nconst ActivityFeed = React.forwardRef<HTMLDivElement, ActivityFeedProps>(\n  (\n    {\n      items,\n      onLoadMore,\n      loading = false,\n      hasMore = false,\n      emptyState,\n      compact = false,\n      maxInitialItems,\n      groupBy = 'none',\n      groupLabels,\n      renderItem,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const [showAll, setShowAll] = React.useState(false)\n\n    if (loading) {\n      return (\n        <div ref={ref} className={cn('relative', className)} {...props}>\n          <LoadingSkeleton compact={compact} />\n        </div>\n      )\n    }\n\n    if (items.length === 0) {\n      if (emptyState) {\n        return (\n          <div ref={ref} className={className} {...props}>\n            {emptyState}\n          </div>\n        )\n      }\n      return null\n    }\n\n    // maxInitialItems applies to the flat list BEFORE grouping\n    const truncated =\n      maxInitialItems != null && !showAll && items.length > maxInitialItems\n    const visibleItems = truncated ? items.slice(0, maxInitialItems) : items\n\n    const useGrouping = groupBy === 'time'\n\n    /** Resolve what to render for a single item, respecting renderItem. */\n    const resolveEntry = (item: ActivityItem, index: number) => {\n      if (renderItem) {\n        const custom = renderItem(item, index)\n        if (custom !== undefined) {\n          return <CustomEntry item={item} compact={compact}>{custom}</CustomEntry>\n        }\n      }\n      return <ActivityEntry item={item} compact={compact} />\n    }\n\n    return (\n      <div ref={ref} className={cn('relative', className)} {...props}>\n        {/* Items */}\n        {useGrouping ? (\n          <div>\n            {groupItemsByTime(visibleItems, groupLabels).map((group, gi) => (\n              <div key={group.label}>\n                <GroupHeader label={group.label} isFirst={gi === 0} />\n                {/* Timeline line scoped to this group */}\n                <div className={cn('relative flex flex-col', compact ? 'gap-1' : 'gap-3')}>\n                  <div className=\"absolute bottom-0 left-[3px] top-0 w-px bg-surface-border\" />\n                  {group.items.map((item, index) => (\n                    <motion.div key={item.id} initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ ...tweens.fade, delay: index * 0.03 }}>\n                      {resolveEntry(item, index)}\n                    </motion.div>\n                  ))}\n                </div>\n              </div>\n            ))}\n          </div>\n        ) : (\n          <div className={cn('relative flex flex-col', compact ? 'gap-1' : 'gap-3')}>\n            {/* Timeline line */}\n            <div className=\"absolute bottom-0 left-[3px] top-0 w-px bg-surface-border\" />\n            {visibleItems.map((item, index) => (\n              <motion.div key={item.id} initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ ...tweens.fade, delay: index * 0.03 }}>\n                {resolveEntry(item, index)}\n              </motion.div>\n            ))}\n          </div>\n        )}\n\n        {/* Show all button */}\n        {truncated && (\n          <div className=\"relative mt-ds-03 flex justify-center\">\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => setShowAll(true)}\n            >\n              Show all ({items.length})\n            </Button>\n          </div>\n        )}\n\n        {/* Load more button */}\n        {hasMore && onLoadMore && !truncated && (\n          <div className=\"relative mt-ds-03 flex justify-center\">\n            <Button variant=\"ghost\" size=\"sm\" onClick={onLoadMore}>\n              Load more\n            </Button>\n          </div>\n        )}\n      </div>\n    )\n  },\n)\nActivityFeed.displayName = 'ActivityFeed'\n\nexport { ActivityFeed }\n"],"mappings":"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"}
+{"version":3,"file":"activity-feed.js","names":[],"sources":["../../src/composed/activity-feed.tsx"],"sourcesContent":["'use client'\n\nimport { IconChevronRight } from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'\nimport { Button } from '../ui/button'\nimport { Icon } from '../ui/icon'\nimport { formatRelativeTime } from '../ui/lib/date-utils'\nimport type { IconInput } from '../ui/lib/icon-input'\nimport { tweens } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport { Skeleton } from '../ui/skeleton'\nimport { getInitials } from './lib/string-utils'\n\nexport interface ActivityItem {\n  id: string\n  actor?: { name: string; image?: string }\n  action: string | React.ReactNode\n  timestamp: Date | string\n  icon?: IconInput\n  color?: 'default' | 'success' | 'warning' | 'error' | 'info'\n  detail?: React.ReactNode\n}\n\nexport interface GroupLabels {\n  today?: string\n  yesterday?: string\n  thisWeek?: string\n  older?: string\n}\n\nexport interface ActivityFeedProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: ActivityItem[]\n  onLoadMore?: () => void\n  loading?: boolean\n  hasMore?: boolean\n  emptyState?: React.ReactNode\n  compact?: boolean\n  maxInitialItems?: number\n  groupBy?: 'time' | 'none'\n  groupLabels?: GroupLabels\n  /** Custom renderer per item. Return ReactNode for custom rendering, undefined to use default ActivityEntry. */\n  renderItem?: (item: ActivityItem, index: number) => React.ReactNode | undefined\n}\n\nconst dotColorMap = {\n  default: 'bg-surface-fg-subtle',\n  success: 'bg-success-9',\n  warning: 'bg-warning-9',\n  error: 'bg-error-9',\n  info: 'bg-info-9',\n} as const\n\nconst DEFAULT_GROUP_LABELS: Required<GroupLabels> = {\n  today: 'Today',\n  yesterday: 'Yesterday',\n  thisWeek: 'This Week',\n  older: 'Older',\n}\n\n/**\n * Buckets items into time-based groups: today, yesterday, earlier this week (since Monday), older.\n * Skips empty groups.\n */\nexport function groupItemsByTime(\n  items: ActivityItem[],\n  labels?: GroupLabels,\n): { label: string; items: ActivityItem[] }[] {\n  const l = { ...DEFAULT_GROUP_LABELS, ...labels }\n  const now = new Date()\n\n  // Start of today (midnight local)\n  const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate())\n  // Start of yesterday\n  const startOfYesterday = new Date(startOfToday.getTime() - 24 * 60 * 60 * 1000)\n  // Start of this week (Monday)\n  const dayOfWeek = now.getDay() // 0=Sun, 1=Mon, ...\n  const daysSinceMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1\n  const startOfWeek = new Date(\n    startOfToday.getTime() - daysSinceMonday * 24 * 60 * 60 * 1000,\n  )\n\n  const today: ActivityItem[] = []\n  const yesterday: ActivityItem[] = []\n  const thisWeek: ActivityItem[] = []\n  const older: ActivityItem[] = []\n\n  for (const item of items) {\n    const ts =\n      typeof item.timestamp === 'string'\n        ? new Date(item.timestamp)\n        : item.timestamp\n    const t = ts.getTime()\n\n    if (t >= startOfToday.getTime()) {\n      today.push(item)\n    } else if (t >= startOfYesterday.getTime()) {\n      yesterday.push(item)\n    } else if (t >= startOfWeek.getTime()) {\n      thisWeek.push(item)\n    } else {\n      older.push(item)\n    }\n  }\n\n  const groups: { label: string; items: ActivityItem[] }[] = []\n  if (today.length > 0) groups.push({ label: l.today, items: today })\n  if (yesterday.length > 0) groups.push({ label: l.yesterday, items: yesterday })\n  if (thisWeek.length > 0) groups.push({ label: l.thisWeek, items: thisWeek })\n  if (older.length > 0) groups.push({ label: l.older, items: older })\n\n  return groups\n}\n\nfunction LoadingSkeleton({ compact }: { compact: boolean }) {\n  return (\n    <div className={cn('flex flex-col', compact ? 'gap-1' : 'gap-3')}>\n      {[0, 1, 2].map((i) => (\n        <div key={i} className=\"flex items-center gap-ds-03\">\n          <Skeleton className=\"h-2 w-2 shrink-0 rounded-pill\" />\n          {!compact && <Skeleton className=\"h-4 w-4 shrink-0 rounded-pill\" />}\n          <Skeleton className={cn('flex-1', compact ? 'h-3' : 'h-4')} />\n          <Skeleton className=\"h-3 w-12\" />\n        </div>\n      ))}\n    </div>\n  )\n}\n\nfunction ActivityEntry({\n  item,\n  compact,\n}: {\n  item: ActivityItem\n  compact: boolean\n}) {\n  const [expandedDetail, setExpandedDetail] = React.useState(false)\n  const detailId = React.useId()\n  const color = item.color ?? 'default'\n\n  const handleActionClick = () => {\n    if (item.detail) {\n      setExpandedDetail((prev) => !prev)\n    }\n  }\n\n  return (\n    <div className={cn('relative flex items-start', compact ? 'gap-ds-02' : 'gap-ds-03')}>\n      {/* Dot */}\n      <div\n        className={cn(\n          'relative z-10 mt-1.5 h-2 w-2 shrink-0 rounded-pill ring-2 ring-surface-base',\n          dotColorMap[color],\n        )}\n      />\n\n      {/* Avatar (non-compact only) */}\n      {!compact && item.actor && (\n        <Avatar className=\"h-5 w-5 shrink-0 text-[9px]\">\n          {item.actor.image && (\n            <AvatarImage src={item.actor.image} alt={item.actor.name} />\n          )}\n          <AvatarFallback className=\"text-[9px]\">\n            {getInitials(item.actor.name)}\n          </AvatarFallback>\n        </Avatar>\n      )}\n\n      {/* Content */}\n      <div className=\"flex min-w-0 flex-1 flex-col\">\n        <div className=\"flex items-center justify-between gap-ds-02\">\n          <div className={cn('min-w-0 flex-1 flex items-center gap-ds-01 flex-wrap', compact ? 'text-ds-xs' : 'text-ds-sm')}>\n            {item.actor && (\n              <span className=\"font-medium text-surface-fg\">{item.actor.name} </span>\n            )}\n            {item.detail && (\n              <Icon icon={IconChevronRight} size=\"xs\" className={cn('shrink-0 text-surface-fg-subtle transition-transform duration-fast-02 ease-productive-standard', expandedDetail && 'rotate-90')} />\n            )}\n            {item.detail ? (\n              <button\n                type=\"button\"\n                className=\"rounded-control text-surface-fg-muted hover:underline hover:bg-surface-raised focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9\"\n                onClick={handleActionClick}\n                aria-expanded={expandedDetail}\n                aria-controls={detailId}\n              >\n                {item.action}\n              </button>\n            ) : (\n              <span className=\"text-surface-fg-muted\">{item.action}</span>\n            )}\n          </div>\n\n          <time\n            className={cn(\n              'shrink-0 whitespace-nowrap text-surface-fg-subtle',\n              compact ? 'text-ds-xs' : 'text-ds-sm',\n            )}\n            dateTime={\n              (typeof item.timestamp === 'string'\n                ? new Date(item.timestamp)\n                : item.timestamp\n              ).toISOString()\n            }\n          >\n            {formatRelativeTime(item.timestamp)}\n          </time>\n        </div>\n\n        {/* Expandable detail */}\n        {expandedDetail && item.detail && (\n          <div id={detailId} className=\"mt-ds-02 animate-in fade-in slide-in-from-top-1 text-ds-sm text-surface-fg-muted\">\n            {item.detail}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\n/**\n * Wraps custom renderItem content with the same dot + layout container\n * that ActivityEntry uses, keeping vertical rhythm consistent.\n */\nfunction CustomEntry({\n  item,\n  compact,\n  children,\n}: {\n  item: ActivityItem\n  compact: boolean\n  children: React.ReactNode\n}) {\n  const color = item.color ?? 'default'\n  return (\n    <div className={cn('relative flex items-start', compact ? 'gap-ds-02' : 'gap-ds-03')}>\n      {/* Dot — same as ActivityEntry */}\n      <div\n        className={cn(\n          'relative z-10 mt-1.5 h-2 w-2 shrink-0 rounded-pill ring-2 ring-surface-base',\n          dotColorMap[color],\n        )}\n      />\n      {/* Custom content in the same flex slot as ActivityEntry's content area */}\n      <div className=\"min-w-0 flex-1\">{children}</div>\n    </div>\n  )\n}\n\nfunction GroupHeader({\n  label,\n  isFirst,\n}: {\n  label: string\n  isFirst: boolean\n}) {\n  return (\n    <motion.div\n      initial={false}\n      animate={{ opacity: 1 }}\n      transition={tweens.fade}\n      className={cn(\n        'flex items-center gap-ds-03',\n        !isFirst ? 'mt-ds-06' : '',\n        'mb-ds-03',\n      )}\n    >\n      <hr className=\"flex-1 border-surface-border\" />\n      <span className=\"bg-surface-base px-ds-03 text-ds-xs font-medium uppercase tracking-wider text-surface-fg-subtle\">\n        {label}\n      </span>\n      <hr className=\"flex-1 border-surface-border\" />\n    </motion.div>\n  )\n}\n\nconst ActivityFeed = React.forwardRef<HTMLDivElement, ActivityFeedProps>(\n  (\n    {\n      items,\n      onLoadMore,\n      loading = false,\n      hasMore = false,\n      emptyState,\n      compact = false,\n      maxInitialItems,\n      groupBy = 'none',\n      groupLabels,\n      renderItem,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const [showAll, setShowAll] = React.useState(false)\n\n    if (loading) {\n      return (\n        <div ref={ref} className={cn('relative', className)} {...props}>\n          <LoadingSkeleton compact={compact} />\n        </div>\n      )\n    }\n\n    if (items.length === 0) {\n      if (emptyState) {\n        return (\n          <div ref={ref} className={className} {...props}>\n            {emptyState}\n          </div>\n        )\n      }\n      return null\n    }\n\n    // maxInitialItems applies to the flat list BEFORE grouping\n    const truncated =\n      maxInitialItems != null && !showAll && items.length > maxInitialItems\n    const visibleItems = truncated ? items.slice(0, maxInitialItems) : items\n\n    const useGrouping = groupBy === 'time'\n\n    /** Resolve what to render for a single item, respecting renderItem. */\n    const resolveEntry = (item: ActivityItem, index: number) => {\n      if (renderItem) {\n        const custom = renderItem(item, index)\n        if (custom !== undefined) {\n          return <CustomEntry item={item} compact={compact}>{custom}</CustomEntry>\n        }\n      }\n      return <ActivityEntry item={item} compact={compact} />\n    }\n\n    return (\n      <div ref={ref} className={cn('relative', className)} {...props}>\n        {/* Items */}\n        {useGrouping ? (\n          <div>\n            {groupItemsByTime(visibleItems, groupLabels).map((group, gi) => (\n              <div key={group.label}>\n                <GroupHeader label={group.label} isFirst={gi === 0} />\n                {/* Timeline line scoped to this group */}\n                <div className={cn('relative flex flex-col', compact ? 'gap-1' : 'gap-3')}>\n                  <div className=\"absolute bottom-0 left-[3px] top-0 w-px bg-surface-border\" />\n                  {group.items.map((item, index) => (\n                    <motion.div key={item.id} initial={false} animate={{ opacity: 1 }} transition={{ ...tweens.fade, delay: index * 0.03 }}>\n                      {resolveEntry(item, index)}\n                    </motion.div>\n                  ))}\n                </div>\n              </div>\n            ))}\n          </div>\n        ) : (\n          <div className={cn('relative flex flex-col', compact ? 'gap-1' : 'gap-3')}>\n            {/* Timeline line */}\n            <div className=\"absolute bottom-0 left-[3px] top-0 w-px bg-surface-border\" />\n            {visibleItems.map((item, index) => (\n              <motion.div key={item.id} initial={false} animate={{ opacity: 1 }} transition={{ ...tweens.fade, delay: index * 0.03 }}>\n                {resolveEntry(item, index)}\n              </motion.div>\n            ))}\n          </div>\n        )}\n\n        {/* Show all button */}\n        {truncated && (\n          <div className=\"relative mt-ds-03 flex justify-center\">\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => setShowAll(true)}\n            >\n              Show all ({items.length})\n            </Button>\n          </div>\n        )}\n\n        {/* Load more button */}\n        {hasMore && onLoadMore && !truncated && (\n          <div className=\"relative mt-ds-03 flex justify-center\">\n            <Button variant=\"ghost\" size=\"sm\" onClick={onLoadMore}>\n              Load more\n            </Button>\n          </div>\n        )}\n      </div>\n    )\n  },\n)\nActivityFeed.displayName = 'ActivityFeed'\n\nexport { ActivityFeed }\n"],"mappings":"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"}

package/dist/composed/avatar-group.js

@@ -57,7 +57,7 @@ var g = {
 		let t = L * R;
 		return w === "left" ? `translateX(-${(z - 1 - e) * t}px)` : `translateX(${e * t}px)`;
 	}
-	let V = "transition-[transform,opacity] duration-300 ease-out hover:z-50 hover:scale-105 group-hover:[&:not(:hover)]:opacity-85";
+	let V = "transition-opacity duration-300 ease-out hover:z-50 group-hover:[&:not(:hover)]:opacity-85";
 	return /* @__PURE__ */ f(c, { children: /* @__PURE__ */ p("div", {
 		ref: O,
 		role: "group",
@@ -132,7 +132,7 @@ var g = {
 				type: "button",
 				onClick: S,
 				"aria-label": `${A} more members`,
-				className: n(_({ size: y }), P, j, `flex cursor-pointer items-center justify-center bg-accent-2 font-semibold text-accent-11 ${M}`, "hover:scale-105 hover:bg-accent-3 transition-[transform,background-color] duration-300 ease-out"),
+				className: n(_({ size: y }), P, j, `flex cursor-pointer items-center justify-center bg-accent-2 font-semibold text-accent-11 ${M}`, "hover:bg-accent-3 transition-colors duration-300 ease-out"),
 				style: {
 					zIndex: 0,
 					transform: B(k.length)

package/dist/composed/avatar-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-group.js","names":[],"sources":["../../src/composed/avatar-group.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport type { AvatarRing } from '../ui/avatar'\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '../ui/avatar'\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '../ui/tooltip'\nimport { getInitials } from './lib/string-utils'\n\n// Ring classes applied at group level (not via Avatar's ring prop, which adds ring-offset-2 that gets clipped by overflow-hidden)\nconst groupRingMap: Record<string, string> = {\n  lead: 'ring-2 ring-accent-7 ring-offset-1 ring-offset-surface-raised',\n  admin: 'ring-2 ring-warning-7 ring-offset-1 ring-offset-surface-raised',\n  client: 'ring-2 ring-info-7 ring-offset-1 ring-offset-surface-raised',\n}\n\nconst avatarSizeVariants = cva(\n  'shrink-0 overflow-hidden rounded-pill border-2',\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs w-ds-xs',\n        sm: 'h-ds-sm w-ds-sm',\n        md: 'h-ds-md w-ds-md',\n        lg: 'h-ds-lg w-ds-lg',\n        xl: 'h-ds-xl w-ds-xl',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n)\n\nexport interface AvatarUser {\n  name: string\n  image?: string | null\n  ring?: AvatarRing\n  indicator?: 'lead' | 'admin' | React.ReactNode\n}\n\nexport interface AvatarGroupProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof avatarSizeVariants> {\n  users: AvatarUser[]\n  max?: number\n  showTooltip?: boolean\n  /** Border color for the group avatars. @default 'surface-raised' */\n  borderColor?: 'surface-base' | 'surface-raised'\n  /** Callback when the \"+N\" overflow badge is clicked */\n  onOverflowClick?: () => void\n  /** Custom render function for each avatar */\n  renderAvatar?: (user: AvatarUser, index: number) => React.ReactNode\n  /** Direction avatars expand on hover. @default 'right' */\n  expandDirection?: 'left' | 'right'\n  /** How much avatars spread apart on hover. @default 'default' */\n  expandAmount?: 'compact' | 'default' | 'wide'\n}\n\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  (\n    {\n      users,\n      max = 4,\n      size,\n      showTooltip = true,\n      borderColor = 'surface-raised',\n      onOverflowClick,\n      renderAvatar,\n      expandDirection = 'right',\n      expandAmount = 'default',\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const displayed = users.slice(0, max)\n    const overflow = users.length - max\n\n    const overlapMap = {\n      xs: '-ml-ds-02',\n      sm: '-ml-ds-02b',\n      md: '-ml-ds-03',\n      lg: '-ml-ds-04',\n      xl: '-ml-ds-05',\n    }\n    const overlapClass = overlapMap[size ?? 'md']\n\n    // Match Avatar fallback font sizes so the \"+N\" badge text is consistent\n    const textSizeMap: Record<string, string> = {\n      xs: 'text-[9px]',\n      sm: 'text-ds-xs',\n      md: 'text-ds-sm',\n      lg: 'text-ds-md',\n      xl: 'text-ds-lg',\n    }\n    const textSizeClass = textSizeMap[size ?? 'md']\n\n    // Indicator dot scales with avatar size (matches Avatar's statusDotSizeMap)\n    const indicatorDotSizeMap: Record<string, string> = {\n      xs: 'h-1 w-1',\n      sm: 'h-1.5 w-1.5',\n      md: 'h-2 w-2',\n      lg: 'h-2.5 w-2.5',\n      xl: 'h-3 w-3',\n    }\n    const indicatorDotClass = indicatorDotSizeMap[size ?? 'md']\n\n    const borderClass =\n      borderColor === 'surface-base'\n        ? 'border-surface-base'\n        : 'border-surface-raised'\n\n    const [isHovered, setIsHovered] = React.useState(false)\n\n    const overlapPxMap: Record<string, number> = {\n      xs: 8, sm: 10, md: 12, lg: 16, xl: 20,\n    }\n    const resolvedSize = size ?? 'md'\n    const overlapPx = overlapPxMap[resolvedSize]\n    const expandMultiplier = { compact: 0.5, default: 1, wide: 1.5 }[expandAmount]\n    const totalVisible = displayed.length + (overflow > 0 ? 1 : 0)\n\n    function getExpandTransform(index: number): string {\n      if (!isHovered) return 'translateX(0)'\n      const shift = overlapPx * expandMultiplier\n      if (expandDirection === 'left') {\n        return `translateX(-${(totalVisible - 1 - index) * shift}px)`\n      }\n      return `translateX(${index * shift}px)`\n    }\n\n    const spotlightClasses =\n      'transition-[transform,opacity] duration-300 ease-out hover:z-50 hover:scale-105 group-hover:[&:not(:hover)]:opacity-85'\n\n    return (\n      <TooltipProvider>\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label={`${users.length} team members`}\n          tabIndex={0}\n          className={cn('group flex items-center', className)}\n          onMouseEnter={() => setIsHovered(true)}\n          onMouseLeave={() => setIsHovered(false)}\n          onFocus={() => setIsHovered(true)}\n          onBlur={(e) => { if (!e.currentTarget.contains(e.relatedTarget)) setIsHovered(false) }}\n          {...props}\n        >\n          {displayed.map((user, index) => {\n            const initials = getInitials(user.name)\n\n            const key = `${user.name}-${index}`\n\n            if (renderAvatar) {\n              // When renderAvatar is provided, the consumer owns the Avatar entirely.\n              // Wrapper is positioning-only (overlap, z-index, spotlight) — no size/border/clip\n              // so the consumer's Avatar renders at its natural size without being clipped.\n              return (\n                <div\n                  key={key}\n                  className={cn(\n                    'shrink-0 rounded-pill',\n                    index > 0 && overlapClass,\n                    spotlightClasses,\n                    user.ring && user.ring !== 'none' && groupRingMap[user.ring],\n                  )}\n                  style={{ zIndex: displayed.length - index, transform: getExpandTransform(index) }}\n                >\n                  {renderAvatar(user, index)}\n                </div>\n              )\n            }\n\n            const avatarNode = (\n              <div\n                key={key}\n                className={cn(\n                  'relative shrink-0 rounded-pill',\n                  index > 0 && overlapClass,\n                  spotlightClasses,\n                  user.ring && user.ring !== 'none' && groupRingMap[user.ring],\n                )}\n                style={{ zIndex: displayed.length - index, transform: getExpandTransform(index) }}\n              >\n                <Avatar\n                  size={size}\n                  className={borderClass}\n                >\n                  {user.image && (\n                    <AvatarImage src={user.image} alt={user.name} />\n                  )}\n                  <AvatarFallback\n                    colorSeed={user.name}\n                  >\n                    {initials}\n                  </AvatarFallback>\n                </Avatar>\n                <AnimatePresence>\n                  {user.indicator && (\n                    <motion.span\n                      initial={{ scale: 0, opacity: 0 }}\n                      animate={{ scale: 1, opacity: 1 }}\n                      exit={{ scale: 0, opacity: 0 }}\n                      transition={springs.snappy}\n                      className={cn(\n                        'absolute top-0 right-0 rounded-pill ring-1 ring-surface-raised',\n                        indicatorDotClass,\n                        user.indicator === 'lead' ? 'bg-accent-9' :\n                        user.indicator === 'admin' ? 'bg-accent-9' : '',\n                      )}\n                    >\n                      {typeof user.indicator !== 'string' && user.indicator}\n                    </motion.span>\n                  )}\n                </AnimatePresence>\n              </div>\n            )\n\n            if (!showTooltip) return avatarNode\n\n            return (\n              <Tooltip key={key}>\n                <TooltipTrigger asChild>{avatarNode}</TooltipTrigger>\n                <TooltipContent\n                  className=\"border-surface-border-strong bg-surface-base text-surface-fg\"\n                  sideOffset={6}\n                >\n                  <p className=\"text-ds-sm\">{user.name}</p>\n                </TooltipContent>\n              </Tooltip>\n            )\n          })}\n\n          {overflow > 0 && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                {onOverflowClick ? (\n                  <button\n                    type=\"button\"\n                    onClick={onOverflowClick}\n                    aria-label={`${overflow} more members`}\n                    className={cn(\n                      avatarSizeVariants({ size }),\n                      borderClass,\n                      overlapClass,\n                      `flex cursor-pointer items-center justify-center bg-accent-2 font-semibold text-accent-11 ${textSizeClass}`,\n                      'hover:scale-105 hover:bg-accent-3 transition-[transform,background-color] duration-300 ease-out',\n                    )}\n                    style={{ zIndex: 0, transform: getExpandTransform(displayed.length) }}\n                  >\n                    +{overflow}\n                  </button>\n                ) : (\n                  <div\n                    role=\"img\"\n                    aria-label={`${overflow} more members`}\n                    className={cn(\n                      avatarSizeVariants({ size }),\n                      borderClass,\n                      overlapClass,\n                      `flex cursor-default items-center justify-center bg-accent-2 font-semibold text-accent-11 ${textSizeClass}`,\n                      'transition-[transform,opacity] duration-300 ease-out',\n                    )}\n                    style={{ zIndex: 0, transform: getExpandTransform(displayed.length) }}\n                  >\n                    +{overflow}\n                  </div>\n                )}\n              </TooltipTrigger>\n              <TooltipContent\n                className=\"border-surface-border-strong bg-surface-base text-surface-fg\"\n                sideOffset={6}\n              >\n                <div className=\"flex flex-col gap-ds-01\">\n                  {users.slice(max).map((user, i) => (\n                    <p key={i} className=\"text-ds-sm\">{user.name}</p>\n                  ))}\n                </div>\n              </TooltipContent>\n            </Tooltip>\n          )}\n        </div>\n      </TooltipProvider>\n    )\n  },\n)\nAvatarGroup.displayName = 'AvatarGroup'\n\nexport { AvatarGroup }\n"],"mappings":"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"}
+{"version":3,"file":"avatar-group.js","names":[],"sources":["../../src/composed/avatar-group.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport type { AvatarRing } from '../ui/avatar'\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '../ui/avatar'\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '../ui/tooltip'\nimport { getInitials } from './lib/string-utils'\n\n// Ring classes applied at group level (not via Avatar's ring prop, which adds ring-offset-2 that gets clipped by overflow-hidden)\nconst groupRingMap: Record<string, string> = {\n  lead: 'ring-2 ring-accent-7 ring-offset-1 ring-offset-surface-raised',\n  admin: 'ring-2 ring-warning-7 ring-offset-1 ring-offset-surface-raised',\n  client: 'ring-2 ring-info-7 ring-offset-1 ring-offset-surface-raised',\n}\n\nconst avatarSizeVariants = cva(\n  'shrink-0 overflow-hidden rounded-pill border-2',\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs w-ds-xs',\n        sm: 'h-ds-sm w-ds-sm',\n        md: 'h-ds-md w-ds-md',\n        lg: 'h-ds-lg w-ds-lg',\n        xl: 'h-ds-xl w-ds-xl',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n)\n\nexport interface AvatarUser {\n  name: string\n  image?: string | null\n  ring?: AvatarRing\n  indicator?: 'lead' | 'admin' | React.ReactNode\n}\n\nexport interface AvatarGroupProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof avatarSizeVariants> {\n  users: AvatarUser[]\n  max?: number\n  showTooltip?: boolean\n  /** Border color for the group avatars. @default 'surface-raised' */\n  borderColor?: 'surface-base' | 'surface-raised'\n  /** Callback when the \"+N\" overflow badge is clicked */\n  onOverflowClick?: () => void\n  /** Custom render function for each avatar */\n  renderAvatar?: (user: AvatarUser, index: number) => React.ReactNode\n  /** Direction avatars expand on hover. @default 'right' */\n  expandDirection?: 'left' | 'right'\n  /** How much avatars spread apart on hover. @default 'default' */\n  expandAmount?: 'compact' | 'default' | 'wide'\n}\n\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  (\n    {\n      users,\n      max = 4,\n      size,\n      showTooltip = true,\n      borderColor = 'surface-raised',\n      onOverflowClick,\n      renderAvatar,\n      expandDirection = 'right',\n      expandAmount = 'default',\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const displayed = users.slice(0, max)\n    const overflow = users.length - max\n\n    const overlapMap = {\n      xs: '-ml-ds-02',\n      sm: '-ml-ds-02b',\n      md: '-ml-ds-03',\n      lg: '-ml-ds-04',\n      xl: '-ml-ds-05',\n    }\n    const overlapClass = overlapMap[size ?? 'md']\n\n    // Match Avatar fallback font sizes so the \"+N\" badge text is consistent\n    const textSizeMap: Record<string, string> = {\n      xs: 'text-[9px]',\n      sm: 'text-ds-xs',\n      md: 'text-ds-sm',\n      lg: 'text-ds-md',\n      xl: 'text-ds-lg',\n    }\n    const textSizeClass = textSizeMap[size ?? 'md']\n\n    // Indicator dot scales with avatar size (matches Avatar's statusDotSizeMap)\n    const indicatorDotSizeMap: Record<string, string> = {\n      xs: 'h-1 w-1',\n      sm: 'h-1.5 w-1.5',\n      md: 'h-2 w-2',\n      lg: 'h-2.5 w-2.5',\n      xl: 'h-3 w-3',\n    }\n    const indicatorDotClass = indicatorDotSizeMap[size ?? 'md']\n\n    const borderClass =\n      borderColor === 'surface-base'\n        ? 'border-surface-base'\n        : 'border-surface-raised'\n\n    const [isHovered, setIsHovered] = React.useState(false)\n\n    const overlapPxMap: Record<string, number> = {\n      xs: 8, sm: 10, md: 12, lg: 16, xl: 20,\n    }\n    const resolvedSize = size ?? 'md'\n    const overlapPx = overlapPxMap[resolvedSize]\n    const expandMultiplier = { compact: 0.5, default: 1, wide: 1.5 }[expandAmount]\n    const totalVisible = displayed.length + (overflow > 0 ? 1 : 0)\n\n    function getExpandTransform(index: number): string {\n      if (!isHovered) return 'translateX(0)'\n      const shift = overlapPx * expandMultiplier\n      if (expandDirection === 'left') {\n        return `translateX(-${(totalVisible - 1 - index) * shift}px)`\n      }\n      return `translateX(${index * shift}px)`\n    }\n\n    const spotlightClasses =\n      'transition-opacity duration-300 ease-out hover:z-50 group-hover:[&:not(:hover)]:opacity-85'\n\n    return (\n      <TooltipProvider>\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label={`${users.length} team members`}\n          tabIndex={0}\n          className={cn('group flex items-center', className)}\n          onMouseEnter={() => setIsHovered(true)}\n          onMouseLeave={() => setIsHovered(false)}\n          onFocus={() => setIsHovered(true)}\n          onBlur={(e) => { if (!e.currentTarget.contains(e.relatedTarget)) setIsHovered(false) }}\n          {...props}\n        >\n          {displayed.map((user, index) => {\n            const initials = getInitials(user.name)\n\n            const key = `${user.name}-${index}`\n\n            if (renderAvatar) {\n              // When renderAvatar is provided, the consumer owns the Avatar entirely.\n              // Wrapper is positioning-only (overlap, z-index, spotlight) — no size/border/clip\n              // so the consumer's Avatar renders at its natural size without being clipped.\n              return (\n                <div\n                  key={key}\n                  className={cn(\n                    'shrink-0 rounded-pill',\n                    index > 0 && overlapClass,\n                    spotlightClasses,\n                    user.ring && user.ring !== 'none' && groupRingMap[user.ring],\n                  )}\n                  style={{ zIndex: displayed.length - index, transform: getExpandTransform(index) }}\n                >\n                  {renderAvatar(user, index)}\n                </div>\n              )\n            }\n\n            const avatarNode = (\n              <div\n                key={key}\n                className={cn(\n                  'relative shrink-0 rounded-pill',\n                  index > 0 && overlapClass,\n                  spotlightClasses,\n                  user.ring && user.ring !== 'none' && groupRingMap[user.ring],\n                )}\n                style={{ zIndex: displayed.length - index, transform: getExpandTransform(index) }}\n              >\n                <Avatar\n                  size={size}\n                  className={borderClass}\n                >\n                  {user.image && (\n                    <AvatarImage src={user.image} alt={user.name} />\n                  )}\n                  <AvatarFallback\n                    colorSeed={user.name}\n                  >\n                    {initials}\n                  </AvatarFallback>\n                </Avatar>\n                <AnimatePresence>\n                  {user.indicator && (\n                    <motion.span\n                      initial={{ scale: 0, opacity: 0 }}\n                      animate={{ scale: 1, opacity: 1 }}\n                      exit={{ scale: 0, opacity: 0 }}\n                      transition={springs.snappy}\n                      className={cn(\n                        'absolute top-0 right-0 rounded-pill ring-1 ring-surface-raised',\n                        indicatorDotClass,\n                        user.indicator === 'lead' ? 'bg-accent-9' :\n                        user.indicator === 'admin' ? 'bg-accent-9' : '',\n                      )}\n                    >\n                      {typeof user.indicator !== 'string' && user.indicator}\n                    </motion.span>\n                  )}\n                </AnimatePresence>\n              </div>\n            )\n\n            if (!showTooltip) return avatarNode\n\n            return (\n              <Tooltip key={key}>\n                <TooltipTrigger asChild>{avatarNode}</TooltipTrigger>\n                <TooltipContent\n                  className=\"border-surface-border-strong bg-surface-base text-surface-fg\"\n                  sideOffset={6}\n                >\n                  <p className=\"text-ds-sm\">{user.name}</p>\n                </TooltipContent>\n              </Tooltip>\n            )\n          })}\n\n          {overflow > 0 && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                {onOverflowClick ? (\n                  <button\n                    type=\"button\"\n                    onClick={onOverflowClick}\n                    aria-label={`${overflow} more members`}\n                    className={cn(\n                      avatarSizeVariants({ size }),\n                      borderClass,\n                      overlapClass,\n                      `flex cursor-pointer items-center justify-center bg-accent-2 font-semibold text-accent-11 ${textSizeClass}`,\n                      'hover:bg-accent-3 transition-colors duration-300 ease-out',\n                    )}\n                    style={{ zIndex: 0, transform: getExpandTransform(displayed.length) }}\n                  >\n                    +{overflow}\n                  </button>\n                ) : (\n                  <div\n                    role=\"img\"\n                    aria-label={`${overflow} more members`}\n                    className={cn(\n                      avatarSizeVariants({ size }),\n                      borderClass,\n                      overlapClass,\n                      `flex cursor-default items-center justify-center bg-accent-2 font-semibold text-accent-11 ${textSizeClass}`,\n                      'transition-[transform,opacity] duration-300 ease-out',\n                    )}\n                    style={{ zIndex: 0, transform: getExpandTransform(displayed.length) }}\n                  >\n                    +{overflow}\n                  </div>\n                )}\n              </TooltipTrigger>\n              <TooltipContent\n                className=\"border-surface-border-strong bg-surface-base text-surface-fg\"\n                sideOffset={6}\n              >\n                <div className=\"flex flex-col gap-ds-01\">\n                  {users.slice(max).map((user, i) => (\n                    <p key={i} className=\"text-ds-sm\">{user.name}</p>\n                  ))}\n                </div>\n              </TooltipContent>\n            </Tooltip>\n          )}\n        </div>\n      </TooltipProvider>\n    )\n  },\n)\nAvatarGroup.displayName = 'AvatarGroup'\n\nexport { AvatarGroup }\n"],"mappings":"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"}

package/dist/composed/empty-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../src/composed/empty-state.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAKrD,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,6EAA6E;IAC7E,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC9B;AAoBD,QAAA,MAAM,UAAU,wFA8Ef,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../src/composed/empty-state.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAKrD,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,6EAA6E;IAC7E,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC9B;AAoBD,QAAA,MAAM,UAAU,wFA2Ef,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/composed/empty-state.js

@@ -5,70 +5,60 @@ import { cn as n } from "../ui/lib/utils.js";
 import { normalizeIcon as r } from "../_chunks/normalize-icon.js";
 import * as i from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { motion as s, useReducedMotion as c } from "framer-motion";
+import { motion as s } from "framer-motion";
 //#region src/composed/empty-state.tsx
-var l = {
+var c = {
 	sm: "md",
 	md: "xl",
 	lg: "2xl"
-}, u = ({ className: e }) => /* @__PURE__ */ a("svg", {
+}, l = ({ className: e }) => /* @__PURE__ */ a("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	viewBox: "0 0 32 32",
 	fill: "currentColor",
 	className: e,
 	"aria-hidden": "true",
 	children: /* @__PURE__ */ a("path", { d: "M25.97,21.39c-0.9-1.85,0.08-3.95-1.72-5.39c1.76-1.44,0.8-3.55,1.69-5.39c0.05-0.12,0.04-0.25-0.02-0.35c-0.06-0.1-0.16-0.18-0.29-0.19c-2.05-0.15-3.35-2.04-5.5-1.21c-0.39-2.21-2.7-2.44-3.84-4.13c-0.08-0.1-0.19-0.16-0.31-0.16c-0.12,0-0.23,0.05-0.31,0.16c-1.14,1.69-3.43,1.92-3.82,4.13c-2.14-0.83-3.47,1.07-5.52,1.21c-0.13,0.01-0.23,0.09-0.29,0.19c-0.06,0.1-0.07,0.23-0.02,0.35c0.9,1.85-0.08,3.95,1.72,5.39c-1.76,1.44-0.8,3.55-1.69,5.39C6,21.51,6.02,21.64,6.07,21.74c0.06,0.1,0.16,0.18,0.29,0.19c2.05,0.15,3.38,2.06,5.52,1.23c0.39,2.21,2.67,2.43,3.82,4.12c0.08,0.1,0.19,0.16,0.31,0.16c0.12,0,0.23-0.05,0.31-0.16c1.14-1.69,3.42-1.92,3.81-4.13c2.14,0.83,3.48-1.07,5.53-1.22c0.13-0.01,0.23-0.09,0.29-0.19C26.01,21.64,26.02,21.51,25.97,21.39z" })
-}), d = i.forwardRef(({ icon: i, title: d, description: f, action: p, compact: m = !1, iconSize: h, className: g, ..._ }, v) => {
-	let y = c(), b = h ?? (m ? "sm" : "md"), x = {
+}), u = i.forwardRef(({ icon: i, title: u, description: d, action: f, compact: p = !1, iconSize: m, className: h, ...g }, _) => {
+	let v = m ?? (p ? "sm" : "md"), y = {
 		sm: "h-ico-sm w-ico-sm",
 		md: "h-ico-lg w-ico-lg",
 		lg: "h-ico-xl w-ico-xl"
-	}[b], S = l[b], C = r(i, S) ?? /* @__PURE__ */ a(u, { className: n("text-surface-fg-subtle", x) });
+	}[v], b = c[v], x = r(i, b) ?? /* @__PURE__ */ a(l, { className: n("text-surface-fg-subtle", y) });
 	return /* @__PURE__ */ o("div", {
-		ref: v,
-		className: n("flex flex-col items-center justify-center text-center", m ? "gap-ds-04 py-ds-07" : "gap-ds-05 py-ds-10", g),
-		..._,
+		ref: _,
+		className: n("flex flex-col items-center justify-center text-center", p ? "gap-ds-04 py-ds-07" : "gap-ds-05 py-ds-10", h),
+		...g,
 		children: [
-			/* @__PURE__ */ a(s.div, {
-				className: n("flex items-center justify-center rounded-overlay-lg bg-surface-raised text-surface-fg-subtle", m ? "h-ds-md w-ds-md" : "h-ds-lg w-ds-lg"),
-				animate: y ? {} : { y: [
-					0,
-					-4,
-					0
-				] },
-				transition: y ? {} : {
-					repeat: Infinity,
-					duration: 3,
-					ease: "easeInOut"
-				},
+			/* @__PURE__ */ a("div", {
+				className: n("flex items-center justify-center text-surface-fg-subtle", p ? "h-ds-md w-ds-md" : "h-ds-lg w-ds-lg"),
 				children: /* @__PURE__ */ a(e, {
-					size: S,
-					children: C
+					size: b,
+					children: x
 				})
 			}),
 			/* @__PURE__ */ o(s.div, {
 				className: "flex max-w-[280px] flex-col gap-ds-02",
-				initial: { opacity: 0 },
+				initial: !1,
 				animate: { opacity: 1 },
 				transition: {
 					delay: .2,
 					...t.fade
 				},
 				children: [/* @__PURE__ */ a("h3", {
-					className: n("text-surface-fg", m ? "text-ds-md font-semibold" : "text-ds-base font-semibold"),
+					className: n("text-surface-fg", p ? "text-ds-md font-semibold" : "text-ds-base font-semibold"),
+					children: u
+				}), d && /* @__PURE__ */ a("p", {
+					className: n("text-surface-fg-subtle", p ? "text-ds-sm" : "text-ds-md"),
 					children: d
-				}), f && /* @__PURE__ */ a("p", {
-					className: n("text-surface-fg-subtle", m ? "text-ds-sm" : "text-ds-md"),
-					children: f
 				})]
 			}),
-			p && /* @__PURE__ */ a("div", {
+			f && /* @__PURE__ */ a("div", {
 				className: "mt-ds-02",
-				children: p
+				children: f
 			})
 		]
 	});
 });
-d.displayName = "EmptyState";
+u.displayName = "EmptyState";
 //#endregion
-export { d as EmptyState };
+export { u as EmptyState };

package/dist/composed/empty-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.js","names":[],"sources":["../../src/composed/empty-state.tsx"],"sourcesContent":["'use client'\n\nimport { motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { IconProvider, type IconSize } from '../ui/icon-context'\nimport type { IconInput } from '../ui/lib/icon-input'\nimport { tweens } from '../ui/lib/motion'\nimport { normalizeIcon } from '../ui/lib/normalize-icon'\nimport { cn } from '../ui/lib/utils'\n\nexport interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Icon. Accepts any `IconInput`. Falls back to the Devalok chakra glyph. */\n  icon?: IconInput\n  title: string\n  description?: string\n  action?: React.ReactNode\n  compact?: boolean\n  /** Icon size. Defaults to 'sm' when compact, 'md' otherwise. */\n  iconSize?: 'sm' | 'md' | 'lg'\n}\n\nconst ICON_SIZE_TO_TOKEN: Record<'sm' | 'md' | 'lg', IconSize> = {\n  sm: 'md',\n  md: 'xl',\n  lg: '2xl',\n}\n\nconst DevalokChakraIcon = ({ className }: { className?: string }) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 32 32\"\n    fill=\"currentColor\"\n    className={className}\n    aria-hidden=\"true\"\n  >\n    <path d=\"M25.97,21.39c-0.9-1.85,0.08-3.95-1.72-5.39c1.76-1.44,0.8-3.55,1.69-5.39c0.05-0.12,0.04-0.25-0.02-0.35c-0.06-0.1-0.16-0.18-0.29-0.19c-2.05-0.15-3.35-2.04-5.5-1.21c-0.39-2.21-2.7-2.44-3.84-4.13c-0.08-0.1-0.19-0.16-0.31-0.16c-0.12,0-0.23,0.05-0.31,0.16c-1.14,1.69-3.43,1.92-3.82,4.13c-2.14-0.83-3.47,1.07-5.52,1.21c-0.13,0.01-0.23,0.09-0.29,0.19c-0.06,0.1-0.07,0.23-0.02,0.35c0.9,1.85-0.08,3.95,1.72,5.39c-1.76,1.44-0.8,3.55-1.69,5.39C6,21.51,6.02,21.64,6.07,21.74c0.06,0.1,0.16,0.18,0.29,0.19c2.05,0.15,3.38,2.06,5.52,1.23c0.39,2.21,2.67,2.43,3.82,4.12c0.08,0.1,0.19,0.16,0.31,0.16c0.12,0,0.23-0.05,0.31-0.16c1.14-1.69,3.42-1.92,3.81-4.13c2.14,0.83,3.48-1.07,5.53-1.22c0.13-0.01,0.23-0.09,0.29-0.19C26.01,21.64,26.02,21.51,25.97,21.39z\" />\n  </svg>\n)\n\nconst EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(\n  (\n    {\n      icon,\n      title,\n      description,\n      action,\n      compact = false,\n      iconSize,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const reducedMotion = useReducedMotion()\n    const resolvedIconSize = iconSize ?? (compact ? 'sm' : 'md')\n    const iconSizeClass = {\n      sm: 'h-ico-sm w-ico-sm',\n      md: 'h-ico-lg w-ico-lg',\n      lg: 'h-ico-xl w-ico-xl',\n    }[resolvedIconSize]\n    const iconToken = ICON_SIZE_TO_TOKEN[resolvedIconSize]\n    const normalized = normalizeIcon(icon, iconToken)\n    const resolvedIcon = normalized ?? (\n      <DevalokChakraIcon className={cn('text-surface-fg-subtle', iconSizeClass)} />\n    )\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex flex-col items-center justify-center text-center',\n          compact ? 'gap-ds-04 py-ds-07' : 'gap-ds-05 py-ds-10',\n          className,\n        )}\n        {...props}\n      >\n        <motion.div\n          className={cn(\n            'flex items-center justify-center rounded-overlay-lg bg-surface-raised text-surface-fg-subtle',\n            compact ? 'h-ds-md w-ds-md' : 'h-ds-lg w-ds-lg',\n          )}\n          animate={reducedMotion ? {} : { y: [0, -4, 0] }}\n          transition={reducedMotion ? {} : { repeat: Infinity, duration: 3, ease: 'easeInOut' }}\n        >\n          <IconProvider size={iconToken}>{resolvedIcon}</IconProvider>\n        </motion.div>\n\n        <motion.div\n          className=\"flex max-w-[280px] flex-col gap-ds-02\"\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          transition={{ delay: 0.2, ...tweens.fade }}\n        >\n          <h3\n            className={cn(\n              'text-surface-fg',\n              compact ? 'text-ds-md font-semibold' : 'text-ds-base font-semibold',\n            )}\n          >\n            {title}\n          </h3>\n          {description && (\n            <p\n              className={cn(\n                'text-surface-fg-subtle',\n                compact ? 'text-ds-sm' : 'text-ds-md',\n              )}\n            >\n              {description}\n            </p>\n          )}\n        </motion.div>\n\n        {action && <div className=\"mt-ds-02\">{action}</div>}\n      </div>\n    )\n  },\n)\nEmptyState.displayName = 'EmptyState'\n\nexport { EmptyState }\n"],"mappings":";;;;;;;;;AAsBA,IAAM,IAA2D;CAC/D,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEK,KAAqB,EAAE,mBAC3B,kBAAC,OAAD;CACE,OAAM;CACN,SAAQ;CACR,MAAK;CACM;CACX,eAAY;WAEZ,kBAAC,QAAD,EAAM,GAAE,iuBAAkuB,CAAA;CACtuB,CAAA,EAGF,IAAa,EAAM,YAErB,EACE,SACA,UACA,gBACA,WACA,aAAU,IACV,aACA,cACA,GAAG,KAEL,MACG;CACH,IAAM,IAAgB,GAAkB,EAClC,IAAmB,MAAa,IAAU,OAAO,OACjD,IAAgB;EACpB,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,CAAC,IACI,IAAY,EAAmB,IAE/B,IADa,EAAc,GAAM,EAAU,IAE/C,kBAAC,GAAD,EAAmB,WAAW,EAAG,0BAA0B,EAAc,EAAI,CAAA;AAG/E,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EACT,yDACA,IAAU,uBAAuB,sBACjC,EACD;EACD,GAAI;YAPN;GASE,kBAAC,EAAO,KAAR;IACE,WAAW,EACT,gGACA,IAAU,oBAAoB,kBAC/B;IACD,SAAS,IAAgB,EAAE,GAAG,EAAE,GAAG;KAAC;KAAG;KAAI;KAAE,EAAE;IAC/C,YAAY,IAAgB,EAAE,GAAG;KAAE,QAAQ;KAAU,UAAU;KAAG,MAAM;KAAa;cAErF,kBAAC,GAAD;KAAc,MAAM;eAAY;KAA4B,CAAA;IACjD,CAAA;GAEb,kBAAC,EAAO,KAAR;IACE,WAAU;IACV,SAAS,EAAE,SAAS,GAAG;IACvB,SAAS,EAAE,SAAS,GAAG;IACvB,YAAY;KAAE,OAAO;KAAK,GAAG,EAAO;KAAM;cAJ5C,CAME,kBAAC,MAAD;KACE,WAAW,EACT,mBACA,IAAU,6BAA6B,6BACxC;eAEA;KACE,CAAA,EACJ,KACC,kBAAC,KAAD;KACE,WAAW,EACT,0BACA,IAAU,eAAe,aAC1B;eAEA;KACC,CAAA,CAEK;;GAEZ,KAAU,kBAAC,OAAD;IAAK,WAAU;cAAY;IAAa,CAAA;GAC/C;;EAGX;AACD,EAAW,cAAc"}
+{"version":3,"file":"empty-state.js","names":[],"sources":["../../src/composed/empty-state.tsx"],"sourcesContent":["'use client'\n\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { IconProvider, type IconSize } from '../ui/icon-context'\nimport type { IconInput } from '../ui/lib/icon-input'\nimport { tweens } from '../ui/lib/motion'\nimport { normalizeIcon } from '../ui/lib/normalize-icon'\nimport { cn } from '../ui/lib/utils'\n\nexport interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Icon. Accepts any `IconInput`. Falls back to the Devalok chakra glyph. */\n  icon?: IconInput\n  title: string\n  description?: string\n  action?: React.ReactNode\n  compact?: boolean\n  /** Icon size. Defaults to 'sm' when compact, 'md' otherwise. */\n  iconSize?: 'sm' | 'md' | 'lg'\n}\n\nconst ICON_SIZE_TO_TOKEN: Record<'sm' | 'md' | 'lg', IconSize> = {\n  sm: 'md',\n  md: 'xl',\n  lg: '2xl',\n}\n\nconst DevalokChakraIcon = ({ className }: { className?: string }) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 32 32\"\n    fill=\"currentColor\"\n    className={className}\n    aria-hidden=\"true\"\n  >\n    <path d=\"M25.97,21.39c-0.9-1.85,0.08-3.95-1.72-5.39c1.76-1.44,0.8-3.55,1.69-5.39c0.05-0.12,0.04-0.25-0.02-0.35c-0.06-0.1-0.16-0.18-0.29-0.19c-2.05-0.15-3.35-2.04-5.5-1.21c-0.39-2.21-2.7-2.44-3.84-4.13c-0.08-0.1-0.19-0.16-0.31-0.16c-0.12,0-0.23,0.05-0.31,0.16c-1.14,1.69-3.43,1.92-3.82,4.13c-2.14-0.83-3.47,1.07-5.52,1.21c-0.13,0.01-0.23,0.09-0.29,0.19c-0.06,0.1-0.07,0.23-0.02,0.35c0.9,1.85-0.08,3.95,1.72,5.39c-1.76,1.44-0.8,3.55-1.69,5.39C6,21.51,6.02,21.64,6.07,21.74c0.06,0.1,0.16,0.18,0.29,0.19c2.05,0.15,3.38,2.06,5.52,1.23c0.39,2.21,2.67,2.43,3.82,4.12c0.08,0.1,0.19,0.16,0.31,0.16c0.12,0,0.23-0.05,0.31-0.16c1.14-1.69,3.42-1.92,3.81-4.13c2.14,0.83,3.48-1.07,5.53-1.22c0.13-0.01,0.23-0.09,0.29-0.19C26.01,21.64,26.02,21.51,25.97,21.39z\" />\n  </svg>\n)\n\nconst EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(\n  (\n    {\n      icon,\n      title,\n      description,\n      action,\n      compact = false,\n      iconSize,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const resolvedIconSize = iconSize ?? (compact ? 'sm' : 'md')\n    const iconSizeClass = {\n      sm: 'h-ico-sm w-ico-sm',\n      md: 'h-ico-lg w-ico-lg',\n      lg: 'h-ico-xl w-ico-xl',\n    }[resolvedIconSize]\n    const iconToken = ICON_SIZE_TO_TOKEN[resolvedIconSize]\n    const normalized = normalizeIcon(icon, iconToken)\n    const resolvedIcon = normalized ?? (\n      <DevalokChakraIcon className={cn('text-surface-fg-subtle', iconSizeClass)} />\n    )\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex flex-col items-center justify-center text-center',\n          compact ? 'gap-ds-04 py-ds-07' : 'gap-ds-05 py-ds-10',\n          className,\n        )}\n        {...props}\n      >\n        <div\n          className={cn(\n            'flex items-center justify-center text-surface-fg-subtle',\n            compact ? 'h-ds-md w-ds-md' : 'h-ds-lg w-ds-lg',\n          )}\n        >\n          <IconProvider size={iconToken}>{resolvedIcon}</IconProvider>\n        </div>\n\n        <motion.div\n          className=\"flex max-w-[280px] flex-col gap-ds-02\"\n          initial={false}\n          animate={{ opacity: 1 }}\n          transition={{ delay: 0.2, ...tweens.fade }}\n        >\n          <h3\n            className={cn(\n              'text-surface-fg',\n              compact ? 'text-ds-md font-semibold' : 'text-ds-base font-semibold',\n            )}\n          >\n            {title}\n          </h3>\n          {description && (\n            <p\n              className={cn(\n                'text-surface-fg-subtle',\n                compact ? 'text-ds-sm' : 'text-ds-md',\n              )}\n            >\n              {description}\n            </p>\n          )}\n        </motion.div>\n\n        {action && <div className=\"mt-ds-02\">{action}</div>}\n      </div>\n    )\n  },\n)\nEmptyState.displayName = 'EmptyState'\n\nexport { EmptyState }\n"],"mappings":";;;;;;;;;AAsBA,IAAM,IAA2D;CAC/D,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEK,KAAqB,EAAE,mBAC3B,kBAAC,OAAD;CACE,OAAM;CACN,SAAQ;CACR,MAAK;CACM;CACX,eAAY;WAEZ,kBAAC,QAAD,EAAM,GAAE,iuBAAkuB,CAAA;CACtuB,CAAA,EAGF,IAAa,EAAM,YAErB,EACE,SACA,UACA,gBACA,WACA,aAAU,IACV,aACA,cACA,GAAG,KAEL,MACG;CACH,IAAM,IAAmB,MAAa,IAAU,OAAO,OACjD,IAAgB;EACpB,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,CAAC,IACI,IAAY,EAAmB,IAE/B,IADa,EAAc,GAAM,EAAU,IAE/C,kBAAC,GAAD,EAAmB,WAAW,EAAG,0BAA0B,EAAc,EAAI,CAAA;AAG/E,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EACT,yDACA,IAAU,uBAAuB,sBACjC,EACD;EACD,GAAI;YAPN;GASE,kBAAC,OAAD;IACE,WAAW,EACT,2DACA,IAAU,oBAAoB,kBAC/B;cAED,kBAAC,GAAD;KAAc,MAAM;eAAY;KAA4B,CAAA;IACxD,CAAA;GAEN,kBAAC,EAAO,KAAR;IACE,WAAU;IACV,SAAS;IACT,SAAS,EAAE,SAAS,GAAG;IACvB,YAAY;KAAE,OAAO;KAAK,GAAG,EAAO;KAAM;cAJ5C,CAME,kBAAC,MAAD;KACE,WAAW,EACT,mBACA,IAAU,6BAA6B,6BACxC;eAEA;KACE,CAAA,EACJ,KACC,kBAAC,KAAD;KACE,WAAW,EACT,0BACA,IAAU,eAAe,aAC1B;eAEA;KACC,CAAA,CAEK;;GAEZ,KAAU,kBAAC,OAAD;IAAK,WAAU;cAAY;IAAa,CAAA;GAC/C;;EAGX;AACD,EAAW,cAAc"}

package/dist/composed/schedule-view.js

@@ -79,7 +79,7 @@ function v({ date: n, events: a, startHour: o, endHour: f, slotDuration: h, onEv
 					let n = g(t, o, f), a = t.color ?? "accent", c = p[a], l = m[a];
 					return /* @__PURE__ */ r("button", {
 						type: "button",
-						className: e("absolute left-ds-01 right-ds-01 rounded-control-inner px-ds-02 py-ds-01", "text-left text-ds-xs font-medium overflow-hidden cursor-pointer", "hover:shadow-raised hover:scale-[1.02] transition-[box-shadow,transform] duration-fast-02 ease-productive-standard", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9", c),
+						className: e("absolute left-ds-01 right-ds-01 rounded-control-inner px-ds-02 py-ds-01", "text-left text-ds-xs font-medium overflow-hidden cursor-pointer", "hover:shadow-raised transition-[box-shadow] duration-fast-02 ease-productive-standard", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9", c),
 						style: n,
 						onClick: (e) => {
 							e.stopPropagation(), _?.(t);

package/dist/composed/schedule-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"schedule-view.js","names":[],"sources":["../../src/composed/schedule-view.tsx"],"sourcesContent":["'use client'\n\nimport {\n  addDays,\n  differenceInMinutes,\n  format,\n  getHours,\n  getMinutes,\n  isSameDay,\n  isToday,\n  startOfWeek,\n} from 'date-fns'\nimport * as React from 'react'\n\nimport { Dot } from '../ui/dot'\nimport { cn } from '../ui/lib/utils'\n\n/* ------------------------------------------------------------------ */\n/*  Types                                                              */\n/* ------------------------------------------------------------------ */\n\nexport interface ScheduleEvent {\n  id: string\n  title: string\n  start: Date\n  end: Date\n  color?: 'accent' | 'success' | 'warning' | 'error' | 'info' | 'neutral'\n}\n\n/**\n * A day/week calendar schedule grid. Renders time-slotted events with\n * proportional height, color coding, click handlers, and a current-time indicator.\n */\nexport interface ScheduleViewProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Display mode: single-day column or full-week (7 columns). */\n  view: 'day' | 'week'\n  /** Current day (day view) or any date within the target week (week view). */\n  date: Date\n  /** Events to display on the calendar grid. */\n  events: ScheduleEvent[]\n  /** Called when an event block is clicked. */\n  onEventClick?: (event: ScheduleEvent) => void\n  /** Called when an empty time slot is clicked, with the slot's start and end times. */\n  onSlotClick?: (start: Date, end: Date) => void\n  /** First visible hour (default 8). */\n  startHour?: number\n  /** Last visible hour -- exclusive (default 18). */\n  endHour?: number\n  /** Slot duration in minutes (default 30). */\n  slotDuration?: number\n}\n\n/* ------------------------------------------------------------------ */\n/*  Color map                                                          */\n/* ------------------------------------------------------------------ */\n\nconst eventColorMap: Record<\n  NonNullable<ScheduleEvent['color']>,\n  string\n> = {\n  accent: 'bg-accent-2 text-accent-11',\n  success: 'bg-success-3 text-success-11',\n  warning: 'bg-warning-3 text-warning-11',\n  error: 'bg-error-3 text-error-11',\n  info: 'bg-info-3 text-info-11',\n  neutral: 'bg-surface-raised text-surface-fg-muted',\n}\n\n// Solid category dot — the color-blind-safe, shape-based signal that replaces the\n// former left accent rail (the AI tell). Tint above carries the ambient color.\nconst eventDotMap: Record<\n  NonNullable<ScheduleEvent['color']>,\n  string\n> = {\n  accent: 'bg-accent-9',\n  success: 'bg-success-9',\n  warning: 'bg-warning-9',\n  error: 'bg-error-9',\n  info: 'bg-info-9',\n  neutral: 'bg-surface-fg-subtle',\n}\n\n/* ------------------------------------------------------------------ */\n/*  Helpers                                                            */\n/* ------------------------------------------------------------------ */\n\nfunction formatHourLabel(hour: number): string {\n  if (hour === 0) return '12 AM'\n  if (hour < 12) return `${hour} AM`\n  if (hour === 12) return '12 PM'\n  return `${hour - 12} PM`\n}\n\nfunction getEventStyle(\n  event: ScheduleEvent,\n  startHour: number,\n  endHour: number,\n) {\n  const totalMinutes = (endHour - startHour) * 60\n  const eventStartMinutes =\n    (getHours(event.start) - startHour) * 60 + getMinutes(event.start)\n  const durationMinutes = differenceInMinutes(event.end, event.start)\n\n  const top = (eventStartMinutes / totalMinutes) * 100\n  const height = (durationMinutes / totalMinutes) * 100\n\n  return {\n    top: `${top}%`,\n    height: `${height}%`,\n  }\n}\n\n/* ------------------------------------------------------------------ */\n/*  Sub-components                                                     */\n/* ------------------------------------------------------------------ */\n\ninterface TimeColumnProps {\n  startHour: number\n  endHour: number\n}\n\nfunction TimeColumn({ startHour, endHour }: TimeColumnProps) {\n  const hours: number[] = []\n  for (let h = startHour; h < endHour; h++) {\n    hours.push(h)\n  }\n  const slotHeight = 100 / (endHour - startHour)\n\n  return (\n    <div\n      className=\"relative shrink-0 w-[60px] border-r border-surface-border-strong\"\n      aria-hidden=\"true\"\n    >\n      {hours.map((hour) => (\n        <div\n          key={hour}\n          className=\"text-ds-xs text-surface-fg-muted pr-ds-02 text-right\"\n          style={{ height: `${slotHeight}%` }}\n        >\n          {formatHourLabel(hour)}\n        </div>\n      ))}\n    </div>\n  )\n}\n\ninterface DayColumnProps {\n  date: Date\n  events: ScheduleEvent[]\n  startHour: number\n  endHour: number\n  slotDuration: number\n  onEventClick?: (event: ScheduleEvent) => void\n  onSlotClick?: (start: Date, end: Date) => void\n  showHeader?: boolean\n}\n\nfunction DayColumn({\n  date,\n  events,\n  startHour,\n  endHour,\n  slotDuration,\n  onEventClick,\n  onSlotClick,\n  showHeader,\n}: DayColumnProps) {\n  const dayEvents = events.filter((e) => isSameDay(e.start, date))\n  const totalMinutes = (endHour - startHour) * 60\n  const slotCount = totalMinutes / slotDuration\n\n  const slots: { start: Date; end: Date }[] = []\n  for (let i = 0; i < slotCount; i++) {\n    const slotStart = new Date(date)\n    slotStart.setHours(startHour, i * slotDuration, 0, 0)\n    const slotEnd = new Date(slotStart)\n    slotEnd.setMinutes(slotEnd.getMinutes() + slotDuration)\n    slots.push({ start: slotStart, end: slotEnd })\n  }\n\n  const todayInView = isToday(date)\n\n  // Current time indicator position\n  let nowIndicatorTop: number | null = null\n  if (todayInView) {\n    const now = new Date()\n    const nowHour = getHours(now)\n    const nowMin = getMinutes(now)\n    if (nowHour >= startHour && nowHour < endHour) {\n      const nowMinutes = (nowHour - startHour) * 60 + nowMin\n      nowIndicatorTop = (nowMinutes / totalMinutes) * 100\n    }\n  }\n\n  return (\n    <div className=\"flex flex-1 flex-col min-w-ds-11\">\n      {showHeader && (\n        <div\n          className={cn(\n            'text-center text-ds-sm font-semibold py-ds-02 border-b border-surface-border-strong',\n            todayInView\n              ? 'text-accent-11 bg-accent-2'\n              : 'text-surface-fg bg-surface-raised',\n          )}\n        >\n          {format(date, 'EEE d')}\n        </div>\n      )}\n      <div className=\"relative flex-1\">\n        {/* Slot grid lines */}\n        {slots.map((slot, i) => (\n          <button\n            key={i}\n            type=\"button\"\n            className={cn(\n              'block w-full border-b border-surface-border hover:bg-surface-raised-hover transition-colors ease-productive-standard',\n              'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent-9',\n              i % 2 === 0 ? 'border-surface-border-strong' : 'border-surface-border-subtle',\n            )}\n            style={{ height: `${100 / slotCount}%` }}\n            onClick={() => onSlotClick?.(slot.start, slot.end)}\n            aria-label={`${format(slot.start, 'h:mm a')} to ${format(slot.end, 'h:mm a')}`}\n          />\n        ))}\n\n        {/* Events */}\n        {dayEvents.map((event) => {\n          const style = getEventStyle(event, startHour, endHour)\n          const eventColor = event.color ?? 'accent'\n          const colorClass = eventColorMap[eventColor]\n          const dotClass = eventDotMap[eventColor]\n          return (\n            <button\n              key={event.id}\n              type=\"button\"\n              className={cn(\n                'absolute left-ds-01 right-ds-01 rounded-control-inner px-ds-02 py-ds-01',\n                'text-left text-ds-xs font-medium overflow-hidden cursor-pointer',\n                'hover:shadow-raised hover:scale-[1.02] transition-[box-shadow,transform] duration-fast-02 ease-productive-standard',\n                'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9',\n                colorClass,\n              )}\n              style={style}\n              onClick={(e) => {\n                e.stopPropagation()\n                onEventClick?.(event)\n              }}\n              aria-label={`${event.title}, ${format(event.start, 'h:mm a')} to ${format(event.end, 'h:mm a')}`}\n            >\n              <span className=\"flex items-start gap-ds-02\">\n                <span\n                  className={cn('mt-[3px] h-ds-03 w-ds-03 shrink-0 rounded-pill', dotClass)}\n                  aria-hidden=\"true\"\n                />\n                <span className=\"line-clamp-2\">{event.title}</span>\n              </span>\n            </button>\n          )\n        })}\n\n        {/* Current time indicator */}\n        {nowIndicatorTop != null && (\n          <div\n            className=\"absolute left-0 right-0 h-ds-01 bg-error-9 z-10 pointer-events-none\"\n            style={{ top: `${nowIndicatorTop}%` }}\n            aria-hidden=\"true\"\n          >\n            <Dot color=\"error\" size=\"lg\" pulse className=\"absolute -left-[5px] -top-[4px]\" />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  ScheduleView                                                       */\n/* ------------------------------------------------------------------ */\n\nconst ScheduleView = React.forwardRef<HTMLDivElement, ScheduleViewProps>(\n  (\n    {\n      view,\n      date,\n      events,\n      onEventClick,\n      onSlotClick,\n      startHour = 8,\n      endHour = 18,\n      slotDuration = 30,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const days: Date[] = React.useMemo(() => {\n      if (view === 'day') return [date]\n      const weekStart = startOfWeek(date, { weekStartsOn: 1 }) // Monday\n      return Array.from({ length: 7 }, (_, i) => addDays(weekStart, i))\n    }, [view, date])\n\n    return (\n      <div\n        ref={ref}\n        role=\"region\"\n        aria-label={\n          view === 'day'\n            ? `Schedule for ${format(date, 'EEEE, MMMM d, yyyy')}`\n            : `Week schedule starting ${format(days[0], 'MMMM d, yyyy')}`\n        }\n        className={cn(\n          'flex rounded-control border border-surface-border-strong bg-surface-raised overflow-hidden',\n          'h-[480px]',\n          className,\n        )}\n        {...props}\n      >\n        <TimeColumn startHour={startHour} endHour={endHour} />\n        <div className=\"flex flex-1 divide-x divide-surface-border overflow-x-auto\">\n          {days.map((day) => (\n            <DayColumn\n              key={day.toISOString()}\n              date={day}\n              events={events}\n              startHour={startHour}\n              endHour={endHour}\n              slotDuration={slotDuration}\n              onEventClick={onEventClick}\n              onSlotClick={onSlotClick}\n              showHeader={view === 'week'}\n            />\n          ))}\n        </div>\n      </div>\n    )\n  },\n)\nScheduleView.displayName = 'ScheduleView'\n\nexport { ScheduleView }\n"],"mappings":"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"}
+{"version":3,"file":"schedule-view.js","names":[],"sources":["../../src/composed/schedule-view.tsx"],"sourcesContent":["'use client'\n\nimport {\n  addDays,\n  differenceInMinutes,\n  format,\n  getHours,\n  getMinutes,\n  isSameDay,\n  isToday,\n  startOfWeek,\n} from 'date-fns'\nimport * as React from 'react'\n\nimport { Dot } from '../ui/dot'\nimport { cn } from '../ui/lib/utils'\n\n/* ------------------------------------------------------------------ */\n/*  Types                                                              */\n/* ------------------------------------------------------------------ */\n\nexport interface ScheduleEvent {\n  id: string\n  title: string\n  start: Date\n  end: Date\n  color?: 'accent' | 'success' | 'warning' | 'error' | 'info' | 'neutral'\n}\n\n/**\n * A day/week calendar schedule grid. Renders time-slotted events with\n * proportional height, color coding, click handlers, and a current-time indicator.\n */\nexport interface ScheduleViewProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Display mode: single-day column or full-week (7 columns). */\n  view: 'day' | 'week'\n  /** Current day (day view) or any date within the target week (week view). */\n  date: Date\n  /** Events to display on the calendar grid. */\n  events: ScheduleEvent[]\n  /** Called when an event block is clicked. */\n  onEventClick?: (event: ScheduleEvent) => void\n  /** Called when an empty time slot is clicked, with the slot's start and end times. */\n  onSlotClick?: (start: Date, end: Date) => void\n  /** First visible hour (default 8). */\n  startHour?: number\n  /** Last visible hour -- exclusive (default 18). */\n  endHour?: number\n  /** Slot duration in minutes (default 30). */\n  slotDuration?: number\n}\n\n/* ------------------------------------------------------------------ */\n/*  Color map                                                          */\n/* ------------------------------------------------------------------ */\n\nconst eventColorMap: Record<\n  NonNullable<ScheduleEvent['color']>,\n  string\n> = {\n  accent: 'bg-accent-2 text-accent-11',\n  success: 'bg-success-3 text-success-11',\n  warning: 'bg-warning-3 text-warning-11',\n  error: 'bg-error-3 text-error-11',\n  info: 'bg-info-3 text-info-11',\n  neutral: 'bg-surface-raised text-surface-fg-muted',\n}\n\n// Solid category dot — the color-blind-safe, shape-based signal that replaces the\n// former left accent rail (the AI tell). Tint above carries the ambient color.\nconst eventDotMap: Record<\n  NonNullable<ScheduleEvent['color']>,\n  string\n> = {\n  accent: 'bg-accent-9',\n  success: 'bg-success-9',\n  warning: 'bg-warning-9',\n  error: 'bg-error-9',\n  info: 'bg-info-9',\n  neutral: 'bg-surface-fg-subtle',\n}\n\n/* ------------------------------------------------------------------ */\n/*  Helpers                                                            */\n/* ------------------------------------------------------------------ */\n\nfunction formatHourLabel(hour: number): string {\n  if (hour === 0) return '12 AM'\n  if (hour < 12) return `${hour} AM`\n  if (hour === 12) return '12 PM'\n  return `${hour - 12} PM`\n}\n\nfunction getEventStyle(\n  event: ScheduleEvent,\n  startHour: number,\n  endHour: number,\n) {\n  const totalMinutes = (endHour - startHour) * 60\n  const eventStartMinutes =\n    (getHours(event.start) - startHour) * 60 + getMinutes(event.start)\n  const durationMinutes = differenceInMinutes(event.end, event.start)\n\n  const top = (eventStartMinutes / totalMinutes) * 100\n  const height = (durationMinutes / totalMinutes) * 100\n\n  return {\n    top: `${top}%`,\n    height: `${height}%`,\n  }\n}\n\n/* ------------------------------------------------------------------ */\n/*  Sub-components                                                     */\n/* ------------------------------------------------------------------ */\n\ninterface TimeColumnProps {\n  startHour: number\n  endHour: number\n}\n\nfunction TimeColumn({ startHour, endHour }: TimeColumnProps) {\n  const hours: number[] = []\n  for (let h = startHour; h < endHour; h++) {\n    hours.push(h)\n  }\n  const slotHeight = 100 / (endHour - startHour)\n\n  return (\n    <div\n      className=\"relative shrink-0 w-[60px] border-r border-surface-border-strong\"\n      aria-hidden=\"true\"\n    >\n      {hours.map((hour) => (\n        <div\n          key={hour}\n          className=\"text-ds-xs text-surface-fg-muted pr-ds-02 text-right\"\n          style={{ height: `${slotHeight}%` }}\n        >\n          {formatHourLabel(hour)}\n        </div>\n      ))}\n    </div>\n  )\n}\n\ninterface DayColumnProps {\n  date: Date\n  events: ScheduleEvent[]\n  startHour: number\n  endHour: number\n  slotDuration: number\n  onEventClick?: (event: ScheduleEvent) => void\n  onSlotClick?: (start: Date, end: Date) => void\n  showHeader?: boolean\n}\n\nfunction DayColumn({\n  date,\n  events,\n  startHour,\n  endHour,\n  slotDuration,\n  onEventClick,\n  onSlotClick,\n  showHeader,\n}: DayColumnProps) {\n  const dayEvents = events.filter((e) => isSameDay(e.start, date))\n  const totalMinutes = (endHour - startHour) * 60\n  const slotCount = totalMinutes / slotDuration\n\n  const slots: { start: Date; end: Date }[] = []\n  for (let i = 0; i < slotCount; i++) {\n    const slotStart = new Date(date)\n    slotStart.setHours(startHour, i * slotDuration, 0, 0)\n    const slotEnd = new Date(slotStart)\n    slotEnd.setMinutes(slotEnd.getMinutes() + slotDuration)\n    slots.push({ start: slotStart, end: slotEnd })\n  }\n\n  const todayInView = isToday(date)\n\n  // Current time indicator position\n  let nowIndicatorTop: number | null = null\n  if (todayInView) {\n    const now = new Date()\n    const nowHour = getHours(now)\n    const nowMin = getMinutes(now)\n    if (nowHour >= startHour && nowHour < endHour) {\n      const nowMinutes = (nowHour - startHour) * 60 + nowMin\n      nowIndicatorTop = (nowMinutes / totalMinutes) * 100\n    }\n  }\n\n  return (\n    <div className=\"flex flex-1 flex-col min-w-ds-11\">\n      {showHeader && (\n        <div\n          className={cn(\n            'text-center text-ds-sm font-semibold py-ds-02 border-b border-surface-border-strong',\n            todayInView\n              ? 'text-accent-11 bg-accent-2'\n              : 'text-surface-fg bg-surface-raised',\n          )}\n        >\n          {format(date, 'EEE d')}\n        </div>\n      )}\n      <div className=\"relative flex-1\">\n        {/* Slot grid lines */}\n        {slots.map((slot, i) => (\n          <button\n            key={i}\n            type=\"button\"\n            className={cn(\n              'block w-full border-b border-surface-border hover:bg-surface-raised-hover transition-colors ease-productive-standard',\n              'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accent-9',\n              i % 2 === 0 ? 'border-surface-border-strong' : 'border-surface-border-subtle',\n            )}\n            style={{ height: `${100 / slotCount}%` }}\n            onClick={() => onSlotClick?.(slot.start, slot.end)}\n            aria-label={`${format(slot.start, 'h:mm a')} to ${format(slot.end, 'h:mm a')}`}\n          />\n        ))}\n\n        {/* Events */}\n        {dayEvents.map((event) => {\n          const style = getEventStyle(event, startHour, endHour)\n          const eventColor = event.color ?? 'accent'\n          const colorClass = eventColorMap[eventColor]\n          const dotClass = eventDotMap[eventColor]\n          return (\n            <button\n              key={event.id}\n              type=\"button\"\n              className={cn(\n                'absolute left-ds-01 right-ds-01 rounded-control-inner px-ds-02 py-ds-01',\n                'text-left text-ds-xs font-medium overflow-hidden cursor-pointer',\n                'hover:shadow-raised transition-[box-shadow] duration-fast-02 ease-productive-standard',\n                'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9',\n                colorClass,\n              )}\n              style={style}\n              onClick={(e) => {\n                e.stopPropagation()\n                onEventClick?.(event)\n              }}\n              aria-label={`${event.title}, ${format(event.start, 'h:mm a')} to ${format(event.end, 'h:mm a')}`}\n            >\n              <span className=\"flex items-start gap-ds-02\">\n                <span\n                  className={cn('mt-[3px] h-ds-03 w-ds-03 shrink-0 rounded-pill', dotClass)}\n                  aria-hidden=\"true\"\n                />\n                <span className=\"line-clamp-2\">{event.title}</span>\n              </span>\n            </button>\n          )\n        })}\n\n        {/* Current time indicator */}\n        {nowIndicatorTop != null && (\n          <div\n            className=\"absolute left-0 right-0 h-ds-01 bg-error-9 z-10 pointer-events-none\"\n            style={{ top: `${nowIndicatorTop}%` }}\n            aria-hidden=\"true\"\n          >\n            <Dot color=\"error\" size=\"lg\" pulse className=\"absolute -left-[5px] -top-[4px]\" />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  ScheduleView                                                       */\n/* ------------------------------------------------------------------ */\n\nconst ScheduleView = React.forwardRef<HTMLDivElement, ScheduleViewProps>(\n  (\n    {\n      view,\n      date,\n      events,\n      onEventClick,\n      onSlotClick,\n      startHour = 8,\n      endHour = 18,\n      slotDuration = 30,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const days: Date[] = React.useMemo(() => {\n      if (view === 'day') return [date]\n      const weekStart = startOfWeek(date, { weekStartsOn: 1 }) // Monday\n      return Array.from({ length: 7 }, (_, i) => addDays(weekStart, i))\n    }, [view, date])\n\n    return (\n      <div\n        ref={ref}\n        role=\"region\"\n        aria-label={\n          view === 'day'\n            ? `Schedule for ${format(date, 'EEEE, MMMM d, yyyy')}`\n            : `Week schedule starting ${format(days[0], 'MMMM d, yyyy')}`\n        }\n        className={cn(\n          'flex rounded-control border border-surface-border-strong bg-surface-raised overflow-hidden',\n          'h-[480px]',\n          className,\n        )}\n        {...props}\n      >\n        <TimeColumn startHour={startHour} endHour={endHour} />\n        <div className=\"flex flex-1 divide-x divide-surface-border overflow-x-auto\">\n          {days.map((day) => (\n            <DayColumn\n              key={day.toISOString()}\n              date={day}\n              events={events}\n              startHour={startHour}\n              endHour={endHour}\n              slotDuration={slotDuration}\n              onEventClick={onEventClick}\n              onSlotClick={onSlotClick}\n              showHeader={view === 'week'}\n            />\n          ))}\n        </div>\n      </div>\n    )\n  },\n)\nScheduleView.displayName = 'ScheduleView'\n\nexport { ScheduleView }\n"],"mappings":"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"}

package/dist/shell/bottom-navbar.js

@@ -24,7 +24,7 @@ function y({ count: e }) {
 function b({ item: r, isActive: o, onClick: s }) {
 	let c = a(), l = v();
 	return /* @__PURE__ */ f(_.div, {
-		whileTap: l ? void 0 : { y: -2 },
+		whileTap: l ? void 0 : { scale: .96 },
 		transition: l ? { duration: 0 } : t.snappy,
 		className: "flex max-w-[70px] flex-1",
 		children: /* @__PURE__ */ f(c, {