@devalok/shilp-sutra 0.38.0 → 0.40.0

package/dist/composed/file-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-preview.js","names":[],"sources":["../../src/composed/file-preview/audio-preview.tsx","../../src/composed/file-preview/embed-preview.tsx","../../src/composed/file-preview/video-preview.tsx","../../src/composed/file-preview.tsx"],"sourcesContent":["'use client'\n\nimport { IconPlayerPause,IconPlayerPlay } from '@tabler/icons-react'\nimport * as React from 'react'\n\nimport { Button } from '../../ui/button'\nimport { Icon } from '../../ui/icon'\nimport { ErrorFallback, formatTime,VolumeControl } from './shared'\n\n// ============================================================\n// Audio Preview — Branded mini-player (Spotify/SoundCloud style)\n// ============================================================\n\nexport default function AudioPreview({ url, fileName, onError }: { url: string; fileName?: string; onError?: (msg: string) => void }) {\n  const audioRef = React.useRef<HTMLAudioElement>(null)\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const [playing, setPlaying] = React.useState(false)\n  const [progress, setProgress] = React.useState(0)\n  const [duration, setDuration] = React.useState(0)\n  const [currentTime, setCurrentTime] = React.useState(0)\n  const [volume, setVolume] = React.useState(1)\n  const [muted, setMuted] = React.useState(false)\n  const [error, setError] = React.useState(false)\n  const [hoverTime, setHoverTime] = React.useState<number | null>(null)\n\n  // Keyboard shortcuts\n  React.useEffect(() => {\n    function handleKeyDown(e: KeyboardEvent) {\n      const el = containerRef.current\n      if (!el || !el.contains(document.activeElement) && document.activeElement !== el) return\n      const a = audioRef.current\n      if (!a) return\n\n      switch (e.key) {\n        case ' ':\n          e.preventDefault()\n          setPlaying(prev => {\n            if (prev) a.pause(); else a.play()\n            return !prev\n          })\n          break\n        case 'ArrowRight':\n          e.preventDefault()\n          a.currentTime = Math.min(a.duration || 0, a.currentTime + 5)\n          break\n        case 'ArrowLeft':\n          e.preventDefault()\n          a.currentTime = Math.max(0, a.currentTime - 5)\n          break\n        case 'm':\n          e.preventDefault()\n          setMuted(prev => {\n            a.muted = !prev\n            return !prev\n          })\n          break\n      }\n    }\n    document.addEventListener('keydown', handleKeyDown)\n    return () => document.removeEventListener('keydown', handleKeyDown)\n   \n  }, [])\n\n  function togglePlay() {\n    if (!audioRef.current) return\n    if (playing) audioRef.current.pause()\n    else audioRef.current.play()\n    setPlaying(!playing)\n  }\n\n  function handleSeek(e: React.MouseEvent<HTMLDivElement>) {\n    if (!audioRef.current || !duration) return\n    const rect = e.currentTarget.getBoundingClientRect()\n    const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))\n    audioRef.current.currentTime = pct * duration\n  }\n\n  function handleHover(e: React.MouseEvent<HTMLDivElement>) {\n    if (!duration) return\n    const rect = e.currentTarget.getBoundingClientRect()\n    const pct = (e.clientX - rect.left) / rect.width\n    setHoverTime(pct * duration)\n  }\n\n  function toggleMute() {\n    if (!audioRef.current) return\n    const next = !muted\n    setMuted(next)\n    audioRef.current.muted = next\n  }\n\n  if (error) return <ErrorFallback message=\"Could not load audio\" url={url} />\n\n  return (\n    <div ref={containerRef} className=\"rounded-surface border border-surface-border bg-surface-raised shadow-raised overflow-hidden\" tabIndex={-1}>\n      {/* eslint-disable-next-line jsx-a11y/media-has-caption */}\n      <audio\n        ref={audioRef}\n        src={url}\n        onTimeUpdate={() => {\n          if (!audioRef.current) return\n          setCurrentTime(audioRef.current.currentTime)\n          if (audioRef.current.duration) setProgress((audioRef.current.currentTime / audioRef.current.duration) * 100)\n        }}\n        onLoadedMetadata={() => setDuration(audioRef.current?.duration ?? 0)}\n        onEnded={() => setPlaying(false)}\n        onError={() => { setError(true); onError?.('Audio failed to load') }}\n      />\n\n      {/* Progress bar — full width at top (Spotify style) */}\n      <div\n        className=\"relative h-1 w-full cursor-pointer bg-surface-sunken group/bar\"\n        onClick={handleSeek}\n        onMouseMove={handleHover}\n        onMouseLeave={() => setHoverTime(null)}\n        role=\"slider\"\n        aria-label=\"Audio progress\"\n        aria-valuenow={Math.round(progress)}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        tabIndex={0}\n      >\n        <div\n          className=\"absolute left-0 top-0 h-full bg-accent-9 transition-[width] duration-75\"\n          style={{ width: `${progress}%` }}\n        />\n        {/* Hover time tooltip */}\n        {hoverTime !== null && (\n          <div\n            className=\"absolute -top-7 -translate-x-1/2 rounded-control-inner bg-surface-overlay px-1.5 py-0.5 text-[10px] font-mono text-surface-fg shadow-floating pointer-events-none\"\n            style={{ left: `${(hoverTime / (duration || 1)) * 100}%` }}\n          >\n            {formatTime(hoverTime)}\n          </div>\n        )}\n        {/* Scrub handle */}\n        <div\n          className=\"absolute top-1/2 -translate-y-1/2 h-2.5 w-2.5 rounded-pill bg-accent-9 shadow-raised opacity-0 group-hover/bar:opacity-100 transition-opacity\"\n          style={{ left: `${progress}%`, marginLeft: '-5px' }}\n        />\n      </div>\n\n      {/* Controls */}\n      <div className=\"flex items-center gap-ds-04 px-ds-05 py-ds-04\">\n        <Button\n          variant=\"solid\"\n          size=\"icon-sm\"\n          onClick={togglePlay}\n          aria-label={playing ? 'Pause' : 'Play'}\n          title={playing ? 'Pause' : 'Play'}\n          className=\"shrink-0\"\n        >\n          {playing ? (\n            <Icon icon={IconPlayerPause} size=\"sm\" />\n          ) : (\n            <Icon icon={IconPlayerPlay} size=\"sm\" className=\"ml-0.5\" />\n          )}\n        </Button>\n\n        {/* File name + time */}\n        <div className=\"flex-1 min-w-0\">\n          {fileName && (\n            <p className=\"text-ds-sm font-semibold text-surface-fg truncate\">{fileName}</p>\n          )}\n          <p className=\"text-ds-xs font-mono text-surface-fg-muted tabular-nums\">\n            {formatTime(currentTime)} / {formatTime(duration)}\n          </p>\n        </div>\n\n        {/* Volume */}\n        <VolumeControl\n          volume={volume}\n          muted={muted}\n          onVolumeChange={(v) => {\n            setVolume(v)\n            if (audioRef.current) audioRef.current.volume = v\n            if (v > 0 && muted) {\n              setMuted(false)\n              if (audioRef.current) audioRef.current.muted = false\n            }\n          }}\n          onMuteToggle={toggleMute}\n          variant=\"light\"\n        />\n      </div>\n    </div>\n  )\n}\n","'use client'\n\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { tweens } from '../../ui/lib/motion'\nimport { Skeleton } from '../../ui/skeleton'\nimport { ErrorFallback } from './shared'\n\n// ============================================================\n// Embed Preview — 16:9 with error timeout\n// ============================================================\n\nexport default function EmbedPreview({ url, embedUrl, onError }: { url: string; embedUrl: string; onError?: (msg: string) => void }) {\n  const [loaded, setLoaded] = React.useState(false)\n  const [error, setError] = React.useState(false)\n\n  // Timeout — if iframe doesn't load in 15s, show error\n  React.useEffect(() => {\n    const timer = setTimeout(() => {\n      if (!loaded) { setError(true); onError?.('Embed timed out') }\n    }, 15000)\n    return () => clearTimeout(timer)\n  }, [loaded, onError])\n\n  if (error) return <ErrorFallback message=\"Could not load embed\" url={url} />\n\n  return (\n    <div className=\"relative w-full rounded-control overflow-hidden\" style={{ aspectRatio: '16 / 9' }}>\n      {!loaded && <Skeleton className=\"absolute inset-0\" />}\n      <motion.iframe\n        src={embedUrl}\n        title=\"Embedded content\"\n        onLoad={() => setLoaded(true)}\n        onError={() => { setError(true); onError?.('Embed failed to load') }}\n        initial={{ opacity: 0 }}\n        animate={{ opacity: loaded ? 1 : 0 }}\n        transition={tweens.fade}\n        className=\"absolute inset-0 h-full w-full border-none\"\n        allowFullScreen\n      />\n    </div>\n  )\n}\n","'use client'\n\nimport {\n  IconMaximize,\n  IconPlayerPause,\n  IconPlayerPlay,\n} from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from '../../ui/icon'\nimport { springs, tweens } from '../../ui/lib/motion'\nimport { ErrorFallback, formatTime,VolumeControl } from './shared'\n\n// ============================================================\n// Video Preview — Custom player with DS styling\n// ============================================================\n\nconst PLAYBACK_RATES = [0.5, 0.75, 1, 1.25, 1.5, 2] as const\n\nexport default function VideoPreview({ url, onError }: { url: string; onError?: (msg: string) => void }) {\n  const videoRef = React.useRef<HTMLVideoElement>(null)\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const [playing, setPlaying] = React.useState(false)\n  const [progress, setProgress] = React.useState(0)\n  const [duration, setDuration] = React.useState(0)\n  const [currentTime, setCurrentTime] = React.useState(0)\n  const [muted, setMuted] = React.useState(false)\n  const [error, setError] = React.useState(false)\n  const [showControls, setShowControls] = React.useState(true)\n  const [playbackRate, setPlaybackRate] = React.useState(1)\n  const hideTimer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n\n  React.useEffect(() => {\n    return () => clearTimeout(hideTimer.current)\n  }, [])\n\n  // Keyboard shortcuts — YouTube style\n  React.useEffect(() => {\n    function handleKeyDown(e: KeyboardEvent) {\n      const el = containerRef.current\n      if (!el || !el.contains(document.activeElement) && document.activeElement !== el) return\n      const v = videoRef.current\n      if (!v) return\n\n      switch (e.key) {\n        case ' ':\n        case 'k':\n          e.preventDefault()\n          setPlaying(prev => {\n            if (prev) v.pause(); else v.play()\n            return !prev\n          })\n          break\n        case 'ArrowRight':\n          e.preventDefault()\n          v.currentTime = Math.min(v.duration, v.currentTime + 5)\n          break\n        case 'ArrowLeft':\n          e.preventDefault()\n          v.currentTime = Math.max(0, v.currentTime - 5)\n          break\n        case 'j':\n          e.preventDefault()\n          v.currentTime = Math.max(0, v.currentTime - 10)\n          break\n        case 'l':\n          e.preventDefault()\n          v.currentTime = Math.min(v.duration, v.currentTime + 10)\n          break\n        case 'm':\n          e.preventDefault()\n          setMuted(prev => {\n            v.muted = !prev\n            return !prev\n          })\n          break\n        case 'f':\n          e.preventDefault()\n          v.requestFullscreen?.()\n          break\n        case '>':\n          e.preventDefault()\n          cyclePlaybackRate(1)\n          break\n        case '<':\n          e.preventDefault()\n          cyclePlaybackRate(-1)\n          break\n      }\n    }\n    document.addEventListener('keydown', handleKeyDown)\n    return () => document.removeEventListener('keydown', handleKeyDown)\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  function cyclePlaybackRate(direction: 1 | -1) {\n    const idx = PLAYBACK_RATES.indexOf(playbackRate as typeof PLAYBACK_RATES[number])\n    const nextIdx = Math.max(0, Math.min(PLAYBACK_RATES.length - 1, idx + direction))\n    const next = PLAYBACK_RATES[nextIdx]\n    setPlaybackRate(next)\n    if (videoRef.current) videoRef.current.playbackRate = next\n  }\n\n  function togglePlay() {\n    if (!videoRef.current) return\n    if (playing) videoRef.current.pause()\n    else videoRef.current.play()\n    setPlaying(!playing)\n  }\n\n  function handleSeek(e: React.MouseEvent<HTMLDivElement>) {\n    if (!videoRef.current || !duration) return\n    const rect = e.currentTarget.getBoundingClientRect()\n    const pct = (e.clientX - rect.left) / rect.width\n    videoRef.current.currentTime = pct * duration\n  }\n\n  function handleMouseMove() {\n    setShowControls(true)\n    clearTimeout(hideTimer.current)\n    if (playing) {\n      hideTimer.current = setTimeout(() => setShowControls(false), 3000)\n    }\n  }\n\n  if (error) return <ErrorFallback message=\"Could not load video\" url={url} />\n\n  return (\n    <div\n      ref={containerRef}\n      className=\"group relative rounded-control bg-black overflow-hidden\"\n      onMouseMove={handleMouseMove}\n      onMouseLeave={() => playing && setShowControls(false)}\n      tabIndex={-1}\n    >\n      {/* eslint-disable-next-line jsx-a11y/media-has-caption */}\n      <video\n        ref={videoRef}\n        src={url}\n        className=\"max-h-[70vh] w-full\"\n        onClick={togglePlay}\n        muted={muted}\n        onTimeUpdate={() => {\n          if (!videoRef.current) return\n          setCurrentTime(videoRef.current.currentTime)\n          if (videoRef.current.duration) setProgress((videoRef.current.currentTime / videoRef.current.duration) * 100)\n        }}\n        onLoadedMetadata={() => setDuration(videoRef.current?.duration ?? 0)}\n        onEnded={() => { setPlaying(false); setShowControls(true) }}\n        onError={() => { setError(true); onError?.('Video failed to load') }}\n        playsInline\n      />\n\n      {/* Play button overlay — shown when paused */}\n      {!playing && (\n        <motion.button\n          initial={{ opacity: 0, scale: 0.8 }}\n          animate={{ opacity: 1, scale: 1 }}\n          transition={springs.snappy}\n          onClick={togglePlay}\n          className=\"absolute inset-0 flex items-center justify-center bg-black/30\"\n          aria-label=\"Play video\"\n        >\n          <div className=\"flex h-14 w-14 items-center justify-center rounded-pill bg-white/90 shadow-floating\">\n            <Icon icon={IconPlayerPlay} size=\"xl\" className=\"text-surface-fg ml-0.5\" />\n          </div>\n        </motion.button>\n      )}\n\n      {/* Bottom controls — auto-hide after 3s during playback */}\n      <AnimatePresence>\n        {showControls && duration > 0 && (\n          <motion.div\n            initial={{ opacity: 0, y: 10 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: 10 }}\n            transition={tweens.fade}\n            className=\"absolute bottom-0 left-0 right-0 bg-linear-to-t from-black/80 to-transparent px-ds-04 pb-ds-04 pt-ds-08\"\n          >\n            {/* Progress bar */}\n            <div\n              className=\"relative h-1 w-full cursor-pointer rounded-pill bg-white/30 mb-ds-03 group/progress\"\n              onClick={handleSeek}\n              role=\"slider\"\n              aria-label=\"Video progress\"\n              aria-valuenow={Math.round(progress)}\n              aria-valuemin={0}\n              aria-valuemax={100}\n              tabIndex={0}\n            >\n              <div\n                className=\"absolute left-0 top-0 h-full rounded-pill bg-white transition-[width] duration-75\"\n                style={{ width: `${progress}%` }}\n              />\n              {/* Scrub handle */}\n              <div\n                className=\"absolute top-1/2 -translate-y-1/2 h-3 w-3 rounded-pill bg-white shadow-raised opacity-0 group-hover/progress:opacity-100 transition-opacity\"\n                style={{ left: `${progress}%`, marginLeft: '-6px' }}\n              />\n            </div>\n\n            {/* Controls row */}\n            <div className=\"flex items-center gap-ds-03\">\n              <button onClick={togglePlay} className=\"text-white hover:text-white/80\" aria-label={playing ? 'Pause' : 'Play'} title={playing ? 'Pause' : 'Play'}>\n                {playing ? <Icon icon={IconPlayerPause} size=\"lg\" /> : <Icon icon={IconPlayerPlay} size=\"lg\" />}\n              </button>\n              <VolumeControl\n                volume={muted ? 0 : 1}\n                muted={muted}\n                onVolumeChange={(v) => {\n                  if (videoRef.current) videoRef.current.volume = v\n                  if (v > 0 && muted) { setMuted(false); if (videoRef.current) videoRef.current.muted = false }\n                }}\n                onMuteToggle={() => { setMuted(!muted); if (videoRef.current) videoRef.current.muted = !muted }}\n                variant=\"dark\"\n              />\n              <span className=\"text-[11px] font-mono text-white/70 tabular-nums\">\n                {formatTime(currentTime)} / {formatTime(duration)}\n              </span>\n              <div className=\"flex-1\" />\n              <button\n                onClick={() => cyclePlaybackRate(1)}\n                className=\"text-[11px] font-mono text-white/70 hover:text-white px-1 rounded-control-inner hover:bg-white/10 transition-colors\"\n                aria-label={`Playback speed: ${playbackRate}x`}\n              >\n                {playbackRate}x\n              </button>\n              <button\n                onClick={() => videoRef.current?.requestFullscreen?.()}\n                className=\"text-white hover:text-white/80\"\n                aria-label=\"Fullscreen (F)\"\n                title=\"Fullscreen\"\n              >\n                <Icon icon={IconMaximize} size=\"sm\" />\n              </button>\n            </div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  )\n}\n","'use client'\n\nimport { IconDownload } from '@tabler/icons-react'\nimport * as React from 'react'\n\nimport { Badge } from '../ui/badge'\nimport { Button } from '../ui/button'\nimport { Icon } from '../ui/icon'\nimport { cn } from '../ui/lib/utils'\nimport { Skeleton } from '../ui/skeleton'\n\n// Sub-components: direct imports for non-peer-dep renderers,\n// React.lazy for renderers that pull in optional peer deps\n// (react-zoom-pan-pinch, react-pdf) to preserve code-splitting.\nconst LazyImagePreview = React.lazy(() => import('./file-preview/image-preview'))\nconst LazyDocumentPreview = React.lazy(() => import('./file-preview/document-preview'))\nimport AudioPreview from './file-preview/audio-preview'\nimport EmbedPreview from './file-preview/embed-preview'\nimport VideoPreview from './file-preview/video-preview'\n\n// ============================================================\n// Types\n// ============================================================\n\ntype FileType = 'image' | 'pdf' | 'video' | 'audio' | 'embed'\n\nexport interface FilePreviewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onError'> {\n  url: string\n  /** Auto-detected from URL/mimeType if omitted */\n  type?: FileType\n  mimeType?: string\n  alt?: string\n  /** PDF starting page @default 1 */\n  initialPage?: number\n  /** File name for display */\n  fileName?: string\n  /** File size for display (e.g. '2.4 MB') */\n  fileSize?: string\n  /** Called on errors (broken URL, CORS, timeout) */\n  onError?: (error: string) => void\n}\n\n// ============================================================\n// Type Detection\n// ============================================================\n\nfunction detectType(url: string, mimeType?: string): FileType {\n  if (mimeType) {\n    if (mimeType.startsWith('image/')) return 'image'\n    if (mimeType === 'application/pdf') return 'pdf'\n    if (mimeType.startsWith('video/')) return 'video'\n    if (mimeType.startsWith('audio/')) return 'audio'\n  }\n\n  const ext = url.split('?')[0].split('.').pop()?.toLowerCase()\n  if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'avif', 'bmp'].includes(ext ?? '')) return 'image'\n  if (ext === 'pdf') return 'pdf'\n  if (['mp4', 'webm', 'ogg', 'mov'].includes(ext ?? '')) return 'video'\n  if (['mp3', 'wav', 'ogg', 'aac', 'flac'].includes(ext ?? '')) return 'audio'\n\n  if (url.includes('figma.com') || url.includes('loom.com') || url.includes('youtube.com') || url.includes('youtu.be') || url.includes('vimeo.com')) {\n    return 'embed'\n  }\n\n  return 'image'\n}\n\nfunction getEmbedUrl(url: string): string {\n  const ytMatch = url.match(/(?:youtube\\.com\\/watch\\?v=|youtu\\.be\\/)([^&?]+)/)\n  if (ytMatch) return `https://www.youtube.com/embed/${ytMatch[1]}`\n\n  const vimeoMatch = url.match(/vimeo\\.com\\/(\\d+)/)\n  if (vimeoMatch) return `https://player.vimeo.com/video/${vimeoMatch[1]}`\n\n  if (url.includes('figma.com')) return `https://www.figma.com/embed?embed_host=share&url=${encodeURIComponent(url)}`\n\n  const loomMatch = url.match(/loom\\.com\\/share\\/([^?]+)/)\n  if (loomMatch) return `https://www.loom.com/embed/${loomMatch[1]}`\n\n  return url\n}\n\n// ============================================================\n// FilePreview — Main component (router)\n// ============================================================\n\nfunction FilePreview({\n  url,\n  type: typeProp,\n  mimeType,\n  alt,\n  initialPage = 1,\n  fileName,\n  fileSize,\n  onError,\n  className,\n  ...props\n}: FilePreviewProps) {\n  const type = typeProp ?? detectType(url, mimeType)\n  const fallback = <Skeleton className=\"h-64 w-full rounded-control\" />\n\n  return (\n    <div className={cn('flex flex-col gap-ds-03', className)} {...props}>\n      {/* File info bar */}\n      {(fileName || fileSize) && (\n        <div className=\"flex items-center gap-ds-03\">\n          {fileName && <span className=\"text-ds-sm font-semibold text-surface-fg truncate\">{fileName}</span>}\n          {fileSize && <Badge variant=\"subtle\" size=\"xs\">{fileSize}</Badge>}\n        </div>\n      )}\n\n      {/* Preview */}\n      {type === 'image' && (\n        <React.Suspense fallback={fallback}>\n          <LazyImagePreview url={url} alt={alt} onError={onError} />\n        </React.Suspense>\n      )}\n      {type === 'pdf' && (\n        <React.Suspense fallback={fallback}>\n          <LazyDocumentPreview url={url} initialPage={initialPage} onError={onError} />\n        </React.Suspense>\n      )}\n      {type === 'video' && <VideoPreview url={url} onError={onError} />}\n      {type === 'audio' && <AudioPreview url={url} fileName={fileName} onError={onError} />}\n      {type === 'embed' && <EmbedPreview url={url} embedUrl={getEmbedUrl(url)} onError={onError} />}\n\n      {/* Download — not shown for audio (it has its own layout) */}\n      {type !== 'audio' && (\n        <div className=\"flex justify-end\">\n          <Button variant=\"ghost\" size=\"xs\" startIcon={<Icon icon={IconDownload} />} asChild>\n            <a href={url} download target=\"_blank\" rel=\"noopener noreferrer\">Download</a>\n          </Button>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { FilePreview }\nexport type { FileType }\n"],"mappings":"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"}

package/dist/composed/filter-bar.js

@@ -70,7 +70,7 @@ function b({ label: i, value: a, onValueChange: o, options: s, className: c }) {
 		searchPlaceholder: `Search ${i.toLowerCase()}...`,
 		children: /* @__PURE__ */ m("button", {
 			type: "button",
-			className: t("flex items-center justify-between gap-ds-02 whitespace-nowrap rounded-ds-md border bg-surface-raised-hover text-surface-fg", "hover:bg-surface-raised-active transition-colors duration-fast-01 ease-productive-standard", {
+			className: t("flex items-center justify-between gap-ds-02 whitespace-nowrap rounded-control border bg-surface-raised-hover text-surface-fg", "hover:bg-surface-raised-active transition-colors duration-fast-01 ease-productive-standard", {
 				xs: "h-ds-xs-plus text-ds-sm px-ds-02",
 				sm: "h-ds-sm text-ds-sm px-ds-03",
 				md: "h-ds-md text-ds-md px-ds-04"

package/dist/composed/filter-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-bar.js","names":[],"sources":["../../src/composed/filter-bar.tsx"],"sourcesContent":["'use client'\n\nimport { IconChevronDown } from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Badge } from '../ui/badge'\nimport { Button } from '../ui/button'\nimport { Icon } from '../ui/icon'\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport { SearchInput } from '../ui/search-input'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '../ui/select'\nimport { type MultiSelectItem,MultiSelectPopover } from './multi-select-popover'\n\n// ============================================================\n// Context\n// ============================================================\n\ntype FilterBarSize = 'xs' | 'sm' | 'md'\n\nconst FilterBarContext = React.createContext<{ size: FilterBarSize }>({ size: 'sm' })\n\n// ============================================================\n// FilterBar\n// ============================================================\n\n/**\n * A toolbar for filtering lists/tables. Composes a search input, slot-based\n * filter controls (Select, MultiSelect), and an optional \"Clear all\" button.\n * Size is propagated to all child controls via context.\n */\nexport interface FilterBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Controlled search input value. Omit `onSearchChange` to hide the search input entirely. */\n  searchValue?: string\n  /** Called when the search input changes. If not provided, the search input is hidden. */\n  onSearchChange?: (value: string) => void\n  searchPlaceholder?: string\n  /** When provided, a \"Clear all\" button appears that calls this handler. */\n  onClearAll?: () => void\n  /** Size propagated to all child controls. @default 'sm' */\n  size?: FilterBarSize\n}\n\nconst FilterBar = React.forwardRef<HTMLDivElement, FilterBarProps>(({\n  searchValue,\n  onSearchChange,\n  searchPlaceholder = 'Search...',\n  onClearAll,\n  size = 'sm',\n  children,\n  className,\n  ...props\n}, ref) => {\n  return (\n    <FilterBarContext.Provider value={{ size }}>\n      <div\n        ref={ref}\n        className={cn('flex flex-wrap items-center gap-ds-03', className)}\n        role=\"toolbar\"\n        aria-label=\"Filters\"\n        {...props}\n      >\n        {onSearchChange && (\n          <SearchInput\n            size={size}\n            value={searchValue}\n            onChange={(e) => onSearchChange(e.target.value)}\n            onClear={searchValue ? () => onSearchChange('') : undefined}\n            placeholder={searchPlaceholder}\n            className=\"w-48\"\n          />\n        )}\n        {children}\n        {onClearAll && (\n          <Button variant=\"ghost\" size={size} onClick={onClearAll}>\n            Clear all\n          </Button>\n        )}\n      </div>\n    </FilterBarContext.Provider>\n  )\n})\nFilterBar.displayName = 'FilterBar'\n\n// ============================================================\n// FilterSelect\n// ============================================================\n\nexport interface FilterSelectProps {\n  label: string\n  value: string\n  onValueChange: (value: string) => void\n  options: { value: string; label: string }[]\n  /** Label for the \"all\" option @default 'All' */\n  allLabel?: string\n  className?: string\n}\n\nfunction FilterSelect({\n  label,\n  value,\n  onValueChange,\n  options,\n  allLabel = 'All',\n  className,\n}: FilterSelectProps) {\n  const { size } = React.useContext(FilterBarContext)\n  const isFiltered = value !== '' && value !== 'all'\n\n  return (\n    <Select value={value} onValueChange={onValueChange}>\n      <SelectTrigger\n        size={size}\n        className={cn('w-40', isFiltered && 'border-accent-7', className)}\n      >\n        <SelectValue placeholder={label} />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectItem value=\"all\">{allLabel}</SelectItem>\n        {options.map((o) => (\n          <SelectItem key={o.value} value={o.value}>\n            {o.label}\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  )\n}\n\n// ============================================================\n// FilterMultiSelect\n// ============================================================\n\nexport interface FilterMultiSelectProps {\n  label: string\n  value: string[]\n  onValueChange: (values: string[]) => void\n  options: { value: string; label: string }[]\n  className?: string\n}\n\nfunction FilterMultiSelect({\n  label,\n  value,\n  onValueChange,\n  options,\n  className,\n}: FilterMultiSelectProps) {\n  const { size } = React.useContext(FilterBarContext)\n  const count = value.length\n\n  const items: MultiSelectItem[] = React.useMemo(\n    () => options.map((o) => ({ id: o.value, label: o.label })),\n    [options],\n  )\n\n  // Trigger button sized by FilterBar context\n  const triggerSizeClasses: Record<string, string> = {\n    xs: 'h-ds-xs-plus text-ds-sm px-ds-02',\n    sm: 'h-ds-sm text-ds-sm px-ds-03',\n    md: 'h-ds-md text-ds-md px-ds-04',\n  }\n\n  return (\n    <MultiSelectPopover\n      items={items}\n      value={value}\n      onValueChange={onValueChange}\n      searchPlaceholder={`Search ${label.toLowerCase()}...`}\n    >\n      <button\n        type=\"button\"\n        className={cn(\n          'flex items-center justify-between gap-ds-02 whitespace-nowrap rounded-ds-md border bg-surface-raised-hover text-surface-fg',\n          'hover:bg-surface-raised-active transition-colors duration-fast-01 ease-productive-standard',\n          triggerSizeClasses[size],\n          count > 0 ? 'border-accent-7' : 'border-surface-border-strong',\n          'w-40',\n          className,\n        )}\n      >\n        <span className=\"flex items-center gap-ds-02 truncate\">\n          <span>{label}</span>\n          {count > 0 && (\n            <motion.span\n              key={count}\n              initial={{ scale: 0.8 }}\n              animate={{ scale: 1 }}\n              transition={springs.bouncy}\n              className=\"inline-flex\"\n            >\n              <Badge size=\"xs\" variant=\"solid\" className=\"ml-ds-01\">\n                {count}\n              </Badge>\n            </motion.span>\n          )}\n        </span>\n        <Icon icon={IconChevronDown} size=\"xs\" className=\"opacity-50 shrink-0\" />\n      </button>\n    </MultiSelectPopover>\n  )\n}\n\nexport { FilterBar, FilterMultiSelect,FilterSelect }\n"],"mappings":";;;;;;;;;;;;;;AA2BA,IAAM,IAAmB,EAAM,cAAuC,EAAE,MAAM,MAAM,CAAC,EAuB/E,IAAY,EAAM,YAA4C,EAClE,gBACA,mBACA,uBAAoB,aACpB,eACA,UAAO,MACP,aACA,cACA,GAAG,KACF,MAEC,kBAAC,EAAiB,UAAlB;CAA2B,OAAO,EAAE,SAAM;WACxC,kBAAC,OAAD;EACO;EACL,WAAW,EAAG,yCAAyC,EAAU;EACjE,MAAK;EACL,cAAW;EACX,GAAI;YALN;GAOG,KACC,kBAAC,GAAD;IACQ;IACN,OAAO;IACP,WAAW,MAAM,EAAe,EAAE,OAAO,MAAM;IAC/C,SAAS,UAAoB,EAAe,GAAG,GAAG,KAAA;IAClD,aAAa;IACb,WAAU;IACV,CAAA;GAEH;GACA,KACC,kBAAC,GAAD;IAAQ,SAAQ;IAAc;IAAM,SAAS;cAAY;IAEhD,CAAA;GAEP;;CACoB,CAAA,CAE9B;AACF,EAAU,cAAc;AAgBxB,SAAS,EAAa,EACpB,UACA,UACA,kBACA,YACA,cAAW,OACX,gBACoB;CACpB,IAAM,EAAE,YAAS,EAAM,WAAW,EAAiB;AAGnD,QACE,kBAAC,GAAD;EAAe;EAAsB;YAArC,CACE,kBAAC,GAAD;GACQ;GACN,WAAW,EAAG,QAND,MAAU,MAAM,MAAU,SAMH,mBAAmB,EAAU;aAEjE,kBAAC,GAAD,EAAa,aAAa,GAAS,CAAA;GACrB,CAAA,EAChB,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;GAAY,OAAM;aAAO;GAAsB,CAAA,EAC9C,EAAQ,KAAK,MACZ,kBAAC,GAAD;GAA0B,OAAO,EAAE;aAChC,EAAE;GACQ,EAFI,EAAE,MAEN,CACb,CACY,EAAA,CAAA,CACT;;;AAgBb,SAAS,EAAkB,EACzB,UACA,UACA,kBACA,YACA,gBACyB;CACzB,IAAM,EAAE,YAAS,EAAM,WAAW,EAAiB,EAC7C,IAAQ,EAAM;AAcpB,QACE,kBAAC,GAAD;EACS,OAdsB,EAAM,cAC/B,EAAQ,KAAK,OAAO;GAAE,IAAI,EAAE;GAAO,OAAO,EAAE;GAAO,EAAE,EAC3D,CAAC,EAAQ,CACV;EAYU;EACQ;EACf,mBAAmB,UAAU,EAAM,aAAa,CAAC;YAEjD,kBAAC,UAAD;GACE,MAAK;GACL,WAAW,EACT,8HACA,8FAjB2C;IACjD,IAAI;IACJ,IAAI;IACJ,IAAI;IACL,CAc0B,IACnB,IAAQ,IAAI,oBAAoB,gCAChC,QACA,EACD;aATH,CAWE,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACE,kBAAC,QAAD,EAAA,UAAO,GAAa,CAAA,EACnB,IAAQ,KACP,kBAAC,EAAO,MAAR;KAEE,SAAS,EAAE,OAAO,IAAK;KACvB,SAAS,EAAE,OAAO,GAAG;KACrB,YAAY,EAAQ;KACpB,WAAU;eAEV,kBAAC,GAAD;MAAO,MAAK;MAAK,SAAQ;MAAQ,WAAU;gBACxC;MACK,CAAA;KACI,EATP,EASO,CAEX;OACP,kBAAC,GAAD;IAAM,MAAM;IAAiB,MAAK;IAAK,WAAU;IAAwB,CAAA,CAClE;;EACU,CAAA"}
+{"version":3,"file":"filter-bar.js","names":[],"sources":["../../src/composed/filter-bar.tsx"],"sourcesContent":["'use client'\n\nimport { IconChevronDown } from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Badge } from '../ui/badge'\nimport { Button } from '../ui/button'\nimport { Icon } from '../ui/icon'\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport { SearchInput } from '../ui/search-input'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '../ui/select'\nimport { type MultiSelectItem,MultiSelectPopover } from './multi-select-popover'\n\n// ============================================================\n// Context\n// ============================================================\n\ntype FilterBarSize = 'xs' | 'sm' | 'md'\n\nconst FilterBarContext = React.createContext<{ size: FilterBarSize }>({ size: 'sm' })\n\n// ============================================================\n// FilterBar\n// ============================================================\n\n/**\n * A toolbar for filtering lists/tables. Composes a search input, slot-based\n * filter controls (Select, MultiSelect), and an optional \"Clear all\" button.\n * Size is propagated to all child controls via context.\n */\nexport interface FilterBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Controlled search input value. Omit `onSearchChange` to hide the search input entirely. */\n  searchValue?: string\n  /** Called when the search input changes. If not provided, the search input is hidden. */\n  onSearchChange?: (value: string) => void\n  searchPlaceholder?: string\n  /** When provided, a \"Clear all\" button appears that calls this handler. */\n  onClearAll?: () => void\n  /** Size propagated to all child controls. @default 'sm' */\n  size?: FilterBarSize\n}\n\nconst FilterBar = React.forwardRef<HTMLDivElement, FilterBarProps>(({\n  searchValue,\n  onSearchChange,\n  searchPlaceholder = 'Search...',\n  onClearAll,\n  size = 'sm',\n  children,\n  className,\n  ...props\n}, ref) => {\n  return (\n    <FilterBarContext.Provider value={{ size }}>\n      <div\n        ref={ref}\n        className={cn('flex flex-wrap items-center gap-ds-03', className)}\n        role=\"toolbar\"\n        aria-label=\"Filters\"\n        {...props}\n      >\n        {onSearchChange && (\n          <SearchInput\n            size={size}\n            value={searchValue}\n            onChange={(e) => onSearchChange(e.target.value)}\n            onClear={searchValue ? () => onSearchChange('') : undefined}\n            placeholder={searchPlaceholder}\n            className=\"w-48\"\n          />\n        )}\n        {children}\n        {onClearAll && (\n          <Button variant=\"ghost\" size={size} onClick={onClearAll}>\n            Clear all\n          </Button>\n        )}\n      </div>\n    </FilterBarContext.Provider>\n  )\n})\nFilterBar.displayName = 'FilterBar'\n\n// ============================================================\n// FilterSelect\n// ============================================================\n\nexport interface FilterSelectProps {\n  label: string\n  value: string\n  onValueChange: (value: string) => void\n  options: { value: string; label: string }[]\n  /** Label for the \"all\" option @default 'All' */\n  allLabel?: string\n  className?: string\n}\n\nfunction FilterSelect({\n  label,\n  value,\n  onValueChange,\n  options,\n  allLabel = 'All',\n  className,\n}: FilterSelectProps) {\n  const { size } = React.useContext(FilterBarContext)\n  const isFiltered = value !== '' && value !== 'all'\n\n  return (\n    <Select value={value} onValueChange={onValueChange}>\n      <SelectTrigger\n        size={size}\n        className={cn('w-40', isFiltered && 'border-accent-7', className)}\n      >\n        <SelectValue placeholder={label} />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectItem value=\"all\">{allLabel}</SelectItem>\n        {options.map((o) => (\n          <SelectItem key={o.value} value={o.value}>\n            {o.label}\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  )\n}\n\n// ============================================================\n// FilterMultiSelect\n// ============================================================\n\nexport interface FilterMultiSelectProps {\n  label: string\n  value: string[]\n  onValueChange: (values: string[]) => void\n  options: { value: string; label: string }[]\n  className?: string\n}\n\nfunction FilterMultiSelect({\n  label,\n  value,\n  onValueChange,\n  options,\n  className,\n}: FilterMultiSelectProps) {\n  const { size } = React.useContext(FilterBarContext)\n  const count = value.length\n\n  const items: MultiSelectItem[] = React.useMemo(\n    () => options.map((o) => ({ id: o.value, label: o.label })),\n    [options],\n  )\n\n  // Trigger button sized by FilterBar context\n  const triggerSizeClasses: Record<string, string> = {\n    xs: 'h-ds-xs-plus text-ds-sm px-ds-02',\n    sm: 'h-ds-sm text-ds-sm px-ds-03',\n    md: 'h-ds-md text-ds-md px-ds-04',\n  }\n\n  return (\n    <MultiSelectPopover\n      items={items}\n      value={value}\n      onValueChange={onValueChange}\n      searchPlaceholder={`Search ${label.toLowerCase()}...`}\n    >\n      <button\n        type=\"button\"\n        className={cn(\n          'flex items-center justify-between gap-ds-02 whitespace-nowrap rounded-control border bg-surface-raised-hover text-surface-fg',\n          'hover:bg-surface-raised-active transition-colors duration-fast-01 ease-productive-standard',\n          triggerSizeClasses[size],\n          count > 0 ? 'border-accent-7' : 'border-surface-border-strong',\n          'w-40',\n          className,\n        )}\n      >\n        <span className=\"flex items-center gap-ds-02 truncate\">\n          <span>{label}</span>\n          {count > 0 && (\n            <motion.span\n              key={count}\n              initial={{ scale: 0.8 }}\n              animate={{ scale: 1 }}\n              transition={springs.bouncy}\n              className=\"inline-flex\"\n            >\n              <Badge size=\"xs\" variant=\"solid\" className=\"ml-ds-01\">\n                {count}\n              </Badge>\n            </motion.span>\n          )}\n        </span>\n        <Icon icon={IconChevronDown} size=\"xs\" className=\"opacity-50 shrink-0\" />\n      </button>\n    </MultiSelectPopover>\n  )\n}\n\nexport { FilterBar, FilterMultiSelect,FilterSelect }\n"],"mappings":";;;;;;;;;;;;;;AA2BA,IAAM,IAAmB,EAAM,cAAuC,EAAE,MAAM,MAAM,CAAC,EAuB/E,IAAY,EAAM,YAA4C,EAClE,gBACA,mBACA,uBAAoB,aACpB,eACA,UAAO,MACP,aACA,cACA,GAAG,KACF,MAEC,kBAAC,EAAiB,UAAlB;CAA2B,OAAO,EAAE,SAAM;WACxC,kBAAC,OAAD;EACO;EACL,WAAW,EAAG,yCAAyC,EAAU;EACjE,MAAK;EACL,cAAW;EACX,GAAI;YALN;GAOG,KACC,kBAAC,GAAD;IACQ;IACN,OAAO;IACP,WAAW,MAAM,EAAe,EAAE,OAAO,MAAM;IAC/C,SAAS,UAAoB,EAAe,GAAG,GAAG,KAAA;IAClD,aAAa;IACb,WAAU;IACV,CAAA;GAEH;GACA,KACC,kBAAC,GAAD;IAAQ,SAAQ;IAAc;IAAM,SAAS;cAAY;IAEhD,CAAA;GAEP;;CACoB,CAAA,CAE9B;AACF,EAAU,cAAc;AAgBxB,SAAS,EAAa,EACpB,UACA,UACA,kBACA,YACA,cAAW,OACX,gBACoB;CACpB,IAAM,EAAE,YAAS,EAAM,WAAW,EAAiB;AAGnD,QACE,kBAAC,GAAD;EAAe;EAAsB;YAArC,CACE,kBAAC,GAAD;GACQ;GACN,WAAW,EAAG,QAND,MAAU,MAAM,MAAU,SAMH,mBAAmB,EAAU;aAEjE,kBAAC,GAAD,EAAa,aAAa,GAAS,CAAA;GACrB,CAAA,EAChB,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;GAAY,OAAM;aAAO;GAAsB,CAAA,EAC9C,EAAQ,KAAK,MACZ,kBAAC,GAAD;GAA0B,OAAO,EAAE;aAChC,EAAE;GACQ,EAFI,EAAE,MAEN,CACb,CACY,EAAA,CAAA,CACT;;;AAgBb,SAAS,EAAkB,EACzB,UACA,UACA,kBACA,YACA,gBACyB;CACzB,IAAM,EAAE,YAAS,EAAM,WAAW,EAAiB,EAC7C,IAAQ,EAAM;AAcpB,QACE,kBAAC,GAAD;EACS,OAdsB,EAAM,cAC/B,EAAQ,KAAK,OAAO;GAAE,IAAI,EAAE;GAAO,OAAO,EAAE;GAAO,EAAE,EAC3D,CAAC,EAAQ,CACV;EAYU;EACQ;EACf,mBAAmB,UAAU,EAAM,aAAa,CAAC;YAEjD,kBAAC,UAAD;GACE,MAAK;GACL,WAAW,EACT,gIACA,8FAjB2C;IACjD,IAAI;IACJ,IAAI;IACJ,IAAI;IACL,CAc0B,IACnB,IAAQ,IAAI,oBAAoB,gCAChC,QACA,EACD;aATH,CAWE,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACE,kBAAC,QAAD,EAAA,UAAO,GAAa,CAAA,EACnB,IAAQ,KACP,kBAAC,EAAO,MAAR;KAEE,SAAS,EAAE,OAAO,IAAK;KACvB,SAAS,EAAE,OAAO,GAAG;KACrB,YAAY,EAAQ;KACpB,WAAU;eAEV,kBAAC,GAAD;MAAO,MAAK;MAAK,SAAQ;MAAQ,WAAU;gBACxC;MACK,CAAA;KACI,EATP,EASO,CAEX;OACP,kBAAC,GAAD;IAAM,MAAM;IAAiB,MAAK;IAAK,WAAU;IAAwB,CAAA,CAClE;;EACU,CAAA"}

package/dist/composed/index.d.ts

@@ -25,22 +25,13 @@ export type { ConfirmDialogProps } from './confirm-dialog';
 export { ConfirmDialog } from './confirm-dialog';
 export type { ContentCardProps } from './content-card';
 export { ContentCard, contentCardVariants } from './content-card';
-export type { CalendarEvent, CalendarGridProps, DatePickerProps, DateRangePickerProps, DateTimePickerProps, MonthPickerProps, PresetKey, PresetsProps, TimePickerProps, YearPickerProps } from './date-picker';
-export { CalendarGrid, DatePicker, DateRangePicker, DateTimePicker, MonthPicker, Presets, TimePicker, useCalendar, YearPicker } from './date-picker';
 export type { DeadlineIndicatorProps } from './deadline-indicator';
 export { DeadlineIndicator } from './deadline-indicator';
-export type { EmojiData, EmojiPickerPopoverProps, EmojiPickerProps, EmojiSet } from './emoji-picker';
-export { EmojiPicker, EmojiPickerPopover } from './emoji-picker';
 export type { EmptyStateProps } from './empty-state';
 export { EmptyState } from './empty-state';
 export type { ErrorBoundaryProps, ErrorDisplayProps } from './error-boundary';
 export { ErrorBoundary, ErrorDisplay } from './error-boundary';
-export type { EmojiNodeAttrs } from './extensions/emoji-node';
-export { EmojiNode } from './extensions/emoji-node';
-export { createEmojiSuggestion } from './extensions/emoji-suggestion';
 export type { SlashCommand, SlashCommandGroup } from './extensions/slash-command';
-export type { FilePreviewProps } from './file-preview';
-export { FilePreview } from './file-preview';
 export type { FilterBarProps, FilterMultiSelectProps, FilterSelectProps } from './filter-bar';
 export { FilterBar, FilterMultiSelect, FilterSelect } from './filter-bar';
 export type { FormSectionProps } from './form-section';
@@ -52,8 +43,6 @@ export { InlineEdit } from './inline-edit';
 export { getInitials } from './lib/string-utils';
 export type { BoardSkeletonProps, CardSkeletonProps, ListSkeletonProps, TableSkeletonProps } from './loading-skeleton';
 export { BoardSkeleton, CardSkeleton, ListSkeleton, TableSkeleton } from './loading-skeleton';
-export type { MarkdownViewerProps } from './markdown-viewer';
-export { MarkdownViewer } from './markdown-viewer';
 export type { MasterDetailProps } from './master-detail';
 export { MasterDetail } from './master-detail';
 export type { MemberPickerMember, MemberPickerProps } from './member-picker';
@@ -65,10 +54,6 @@ export { PageHeader } from './page-header';
 export { DashboardSkeleton, ProjectListSkeleton, TaskDetailSkeleton, } from './page-skeletons';
 export type { Priority, PriorityIndicatorProps } from './priority-indicator';
 export { PriorityIndicator } from './priority-indicator';
-export type { AudioPlayerProps, AudioWaveformProps, ChatToolbarItem, RichChatInputMessage, RichChatInputProps, UseVoiceRecorderOptions, UseVoiceRecorderReturn } from './rich-chat-input';
-export { AudioPlayer, AudioWaveform, RichChatInput, useVoiceRecorder } from './rich-chat-input';
-export type { MentionItem, RichTextEditorProps, RichTextViewerProps, ToolbarItem } from './rich-text-editor';
-export { RichTextEditor, RichTextViewer } from './rich-text-editor';
 export type { ScheduleEvent, ScheduleViewProps } from './schedule-view';
 export { ScheduleView } from './schedule-view';
 export type { SimpleTooltipProps } from './simple-tooltip';

package/dist/composed/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/composed/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/composed/index.ts"],"names":[],"mappings":"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"}

package/dist/composed/index.js

@@ -8,27 +8,19 @@ import { ConfirmDialog as o } from "./confirm-dialog.js";
 import { ContentCard as s, contentCardVariants as c } from "./content-card.js";
 import { SimpleTooltip as l } from "./simple-tooltip.js";
 import { DeadlineIndicator as u } from "./deadline-indicator.js";
-import { EmojiPicker as d, EmojiPickerPopover as f } from "./emoji-picker.js";
-import { EmptyState as p } from "./empty-state.js";
-import { ErrorBoundary as m, ErrorDisplay as h } from "./error-boundary.js";
-import { t as g } from "../_chunks/file-preview.js";
-import { MultiSelectPopover as _ } from "./multi-select-popover.js";
-import { FilterBar as v, FilterMultiSelect as y, FilterSelect as b } from "./filter-bar.js";
-import { FormSection as x } from "./form-section.js";
-import { GlobalLoading as S } from "./global-loading.js";
-import { n as C, t as w } from "../_chunks/use-calendar.js";
-import { a as T, i as E, n as D, o as O, r as k, s as A, t as j } from "../_chunks/date-picker.js";
-import { i as M, r as N } from "../_chunks/mention-suggestion.js";
-import { InlineEdit as P } from "./inline-edit.js";
-import { BoardSkeleton as F, CardSkeleton as I, ListSkeleton as L, TableSkeleton as R } from "./loading-skeleton.js";
-import { MarkdownViewer as z } from "./markdown-viewer.js";
-import { MasterDetail as B } from "./master-detail.js";
-import { MemberPicker as V } from "./member-picker.js";
-import { PageHeader as H } from "./page-header.js";
-import { DashboardSkeleton as U, ProjectListSkeleton as W, TaskDetailSkeleton as G } from "./page-skeletons.js";
-import { PriorityIndicator as K } from "./priority-indicator.js";
-import { b as q, n as J, t as Y, y as X } from "../_chunks/rich-chat-input.js";
-import { RichTextEditor as Z, RichTextViewer as Q } from "./rich-text-editor.js";
-import { ScheduleView as $ } from "./schedule-view.js";
-import { StatusBadge as ee, statusBadgeVariants as te } from "./status-badge.js";
-export { t as ActivityFeed, X as AudioPlayer, q as AudioWaveform, r as AvatarGroup, F as BoardSkeleton, i as BulkActionBar, C as CalendarGrid, I as CardSkeleton, a as CommandPalette, o as ConfirmDialog, s as ContentCard, U as DashboardSkeleton, T as DatePicker, k as DateRangePicker, D as DateTimePicker, u as DeadlineIndicator, M as EmojiNode, d as EmojiPicker, f as EmojiPickerPopover, p as EmptyState, m as ErrorBoundary, h as ErrorDisplay, g as FilePreview, v as FilterBar, y as FilterMultiSelect, b as FilterSelect, x as FormSection, S as GlobalLoading, P as InlineEdit, L as ListSkeleton, z as MarkdownViewer, B as MasterDetail, V as MemberPicker, A as MonthPicker, _ as MultiSelectPopover, H as PageHeader, E as Presets, K as PriorityIndicator, W as ProjectListSkeleton, Y as RichChatInput, Z as RichTextEditor, Q as RichTextViewer, $ as ScheduleView, l as SimpleTooltip, ee as StatusBadge, R as TableSkeleton, G as TaskDetailSkeleton, j as TimePicker, O as YearPicker, c as contentCardVariants, N as createEmojiSuggestion, e as getInitials, n as groupItemsByTime, te as statusBadgeVariants, w as useCalendar, J as useVoiceRecorder };
+import { EmptyState as d } from "./empty-state.js";
+import { ErrorBoundary as f, ErrorDisplay as p } from "./error-boundary.js";
+import { MultiSelectPopover as m } from "./multi-select-popover.js";
+import { FilterBar as h, FilterMultiSelect as g, FilterSelect as _ } from "./filter-bar.js";
+import { FormSection as v } from "./form-section.js";
+import { GlobalLoading as y } from "./global-loading.js";
+import { InlineEdit as b } from "./inline-edit.js";
+import { BoardSkeleton as x, CardSkeleton as S, ListSkeleton as C, TableSkeleton as w } from "./loading-skeleton.js";
+import { MasterDetail as T } from "./master-detail.js";
+import { MemberPicker as E } from "./member-picker.js";
+import { PageHeader as D } from "./page-header.js";
+import { DashboardSkeleton as O, ProjectListSkeleton as k, TaskDetailSkeleton as A } from "./page-skeletons.js";
+import { PriorityIndicator as j } from "./priority-indicator.js";
+import { ScheduleView as M } from "./schedule-view.js";
+import { StatusBadge as N, statusBadgeVariants as P } from "./status-badge.js";
+export { t as ActivityFeed, r as AvatarGroup, x as BoardSkeleton, i as BulkActionBar, S as CardSkeleton, a as CommandPalette, o as ConfirmDialog, s as ContentCard, O as DashboardSkeleton, u as DeadlineIndicator, d as EmptyState, f as ErrorBoundary, p as ErrorDisplay, h as FilterBar, g as FilterMultiSelect, _ as FilterSelect, v as FormSection, y as GlobalLoading, b as InlineEdit, C as ListSkeleton, T as MasterDetail, E as MemberPicker, m as MultiSelectPopover, D as PageHeader, j as PriorityIndicator, k as ProjectListSkeleton, M as ScheduleView, l as SimpleTooltip, N as StatusBadge, w as TableSkeleton, A as TaskDetailSkeleton, c as contentCardVariants, e as getInitials, n as groupItemsByTime, P as statusBadgeVariants };

package/dist/composed/inline-edit.js

@@ -78,7 +78,7 @@ var s = r.forwardRef(({ value: s, onSave: c, placeholder: l = "Click to edit", t
 				onInput: j,
 				onPaste: M,
 				spellCheck: x,
-				className: e("font-sans text-surface-fg outline-hidden", u, !d && !x && "cursor-text rounded-ds-sm -mx-ds-01 px-ds-01 hover:bg-surface-raised-hover transition-colors duration-fast-01", x && "rounded-ds-sm -mx-ds-01 px-ds-01 bg-surface-raised-hover ring-1 ring-accent-7", E && !x && "text-surface-fg-subtle italic", d && "cursor-default"),
+				className: e("font-sans text-surface-fg outline-hidden", u, !d && !x && "cursor-text rounded-control-inner -mx-ds-01 px-ds-01 hover:bg-surface-raised-hover transition-colors duration-fast-01", x && "rounded-control-inner -mx-ds-01 px-ds-01 bg-surface-raised-hover ring-1 ring-accent-7", E && !x && "text-surface-fg-subtle italic", d && "cursor-default"),
 				"data-placeholder": l,
 				children: s || (x ? "" : l)
 			}),

package/dist/composed/inline-edit.js.map

@@ -1 +1 @@
-{"version":3,"file":"inline-edit.js","names":[],"sources":["../../src/composed/inline-edit.tsx"],"sourcesContent":["'use client'\n\nimport { IconPencil } from '@tabler/icons-react'\nimport * as React from 'react'\n\nimport { Icon } from '../ui/icon'\nimport { cn } from '../ui/lib/utils'\nimport { Spinner } from '../ui/spinner'\n\n// ============================================================\n// Types\n// ============================================================\n\nexport interface InlineEditProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSave'> {\n  value: string\n  onSave: (newValue: string) => void | Promise<void>\n  placeholder?: string\n  /** CSS class applied to the editable text (e.g. 'text-ds-lg font-semibold') */\n  textClassName?: string\n  readOnly?: boolean\n  maxLength?: number\n  /** External saving state — shows spinner */\n  saving?: boolean\n}\n\n// ============================================================\n// InlineEdit — contentEditable approach\n//\n// No mode switch. No input field. The text IS the editor.\n// Click → cursor appears in the text. Type. Enter saves. Escape reverts.\n// Like Notion, Linear, Figma layer names.\n// ============================================================\n\nconst InlineEdit = React.forwardRef<HTMLDivElement, InlineEditProps>(({\n  value,\n  onSave,\n  placeholder = 'Click to edit',\n  textClassName,\n  readOnly = false,\n  maxLength,\n  saving: savingProp = false,\n  className,\n  // aria-label / aria-labelledby apply to the editable textbox (the inner\n  // span), not the outer wrapper div. Intercept them from ...props so they\n  // land on the role=\"textbox\" element that actually needs the name.\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ...props\n}, ref) => {\n  const [saving, setSaving] = React.useState(false)\n  const [focused, setFocused] = React.useState(false)\n  const editRef = React.useRef<HTMLSpanElement>(null)\n  const snapshotRef = React.useRef(value)\n\n  const isSaving = savingProp || saving\n  const isEmpty = !value\n\n  // Sync DOM text when value changes externally (and not focused)\n  React.useEffect(() => {\n    if (!focused && editRef.current) {\n      editRef.current.textContent = value\n    }\n  }, [value, focused])\n\n  function handleFocus() {\n    if (readOnly || isSaving) return\n    setFocused(true)\n    snapshotRef.current = value\n\n    // Select all text on focus (like clicking a file name in Finder)\n    requestAnimationFrame(() => {\n      if (!editRef.current) return\n      const range = document.createRange()\n      range.selectNodeContents(editRef.current)\n      const sel = window.getSelection()\n      sel?.removeAllRanges()\n      sel?.addRange(range)\n    })\n  }\n\n  async function commit() {\n    if (!editRef.current) return\n    setFocused(false)\n    const raw = editRef.current.textContent ?? ''\n    const trimmed = raw.trim()\n\n    // Enforce maxLength\n    const final = maxLength ? trimmed.slice(0, maxLength) : trimmed\n\n    // Reset DOM to clean value\n    editRef.current.textContent = final || value\n\n    if (final === value) return\n    const result = onSave(final)\n    if (result instanceof Promise) {\n      setSaving(true)\n      try {\n        await result\n      } catch {\n        // Revert on error\n        if (editRef.current) editRef.current.textContent = value\n      } finally {\n        setSaving(false)\n      }\n    }\n  }\n\n  function cancel() {\n    if (!editRef.current) return\n    editRef.current.textContent = snapshotRef.current\n    setFocused(false)\n    editRef.current.blur()\n  }\n\n  function handleKeyDown(e: React.KeyboardEvent) {\n    if (e.key === 'Escape') {\n      e.preventDefault()\n      cancel()\n    } else if (e.key === 'Enter') {\n      e.preventDefault()\n      commit()\n    }\n  }\n\n  function handleInput() {\n    if (!editRef.current || !maxLength) return\n    const text = editRef.current.textContent ?? ''\n    if (text.length > maxLength) {\n      editRef.current.textContent = text.slice(0, maxLength)\n      // Move cursor to end\n      const range = document.createRange()\n      range.selectNodeContents(editRef.current)\n      range.collapse(false)\n      const sel = window.getSelection()\n      sel?.removeAllRanges()\n      sel?.addRange(range)\n    }\n  }\n\n  // Prevent paste from inserting rich content\n  function handlePaste(e: React.ClipboardEvent) {\n    e.preventDefault()\n    const text = e.clipboardData.getData('text/plain')\n    document.execCommand('insertText', false, text)\n  }\n\n  return (\n    <div ref={ref} className={cn('group inline-flex items-center gap-ds-02', className)} {...props}>\n      <span\n        ref={editRef}\n        role={readOnly ? undefined : 'textbox'}\n        contentEditable={!readOnly && !isSaving}\n        suppressContentEditableWarning\n        tabIndex={readOnly ? undefined : 0}\n        // Fall back to the placeholder when no explicit label is supplied —\n        // screen readers need _something_ on role=\"textbox\".\n        aria-label={readOnly ? undefined : (ariaLabel ?? (ariaLabelledBy ? undefined : placeholder))}\n        aria-labelledby={readOnly ? undefined : ariaLabelledBy}\n        onFocus={handleFocus}\n        onBlur={commit}\n        onKeyDown={handleKeyDown}\n        onInput={handleInput}\n        onPaste={handlePaste}\n        spellCheck={focused}\n        className={cn(\n          'font-sans text-surface-fg outline-hidden',\n          textClassName,\n          // Idle: subtle hover hint\n          !readOnly && !focused && 'cursor-text rounded-ds-sm -mx-ds-01 px-ds-01 hover:bg-surface-raised-hover transition-colors duration-fast-01',\n          // Focused: subtle underline to indicate editing\n          focused && 'rounded-ds-sm -mx-ds-01 px-ds-01 bg-surface-raised-hover ring-1 ring-accent-7',\n          // Empty: show placeholder styling\n          isEmpty && !focused && 'text-surface-fg-subtle italic',\n          // Read-only\n          readOnly && 'cursor-default',\n        )}\n        data-placeholder={placeholder}\n      >\n        {value || (focused ? '' : placeholder)}\n      </span>\n      {!readOnly && !focused && !isSaving && (\n        <Icon icon={IconPencil} size=\"xs\" className=\"text-surface-fg-subtle opacity-0 group-hover:opacity-100 transition-opacity duration-fast-01 shrink-0\" />\n      )}\n      {isSaving && <Spinner size=\"sm\" />}\n    </div>\n  )\n})\nInlineEdit.displayName = 'InlineEdit'\n\nexport { InlineEdit }\n"],"mappings":";;;;;;;;AAiCA,IAAM,IAAa,EAAM,YAA6C,EACpE,UACA,WACA,iBAAc,iBACd,kBACA,cAAW,IACX,cACA,QAAQ,IAAa,IACrB,cAIA,cAAc,GACd,mBAAmB,GACnB,GAAG,KACF,MAAQ;CACT,IAAM,CAAC,GAAQ,KAAa,EAAM,SAAS,GAAM,EAC3C,CAAC,GAAS,KAAc,EAAM,SAAS,GAAM,EAC7C,IAAU,EAAM,OAAwB,KAAK,EAC7C,IAAc,EAAM,OAAO,EAAM,EAEjC,IAAW,KAAc,GACzB,IAAU,CAAC;AAGjB,GAAM,gBAAgB;AACpB,EAAI,CAAC,KAAW,EAAQ,YACtB,EAAQ,QAAQ,cAAc;IAE/B,CAAC,GAAO,EAAQ,CAAC;CAEpB,SAAS,IAAc;AACjB,OAAY,MAChB,EAAW,GAAK,EAChB,EAAY,UAAU,GAGtB,4BAA4B;AAC1B,OAAI,CAAC,EAAQ,QAAS;GACtB,IAAM,IAAQ,SAAS,aAAa;AACpC,KAAM,mBAAmB,EAAQ,QAAQ;GACzC,IAAM,IAAM,OAAO,cAAc;AAEjC,GADA,GAAK,iBAAiB,EACtB,GAAK,SAAS,EAAM;IACpB;;CAGJ,eAAe,IAAS;AACtB,MAAI,CAAC,EAAQ,QAAS;AACtB,IAAW,GAAM;EAEjB,IAAM,KADM,EAAQ,QAAQ,eAAe,IACvB,MAAM,EAGpB,IAAQ,IAAY,EAAQ,MAAM,GAAG,EAAU,GAAG;AAKxD,MAFA,EAAQ,QAAQ,cAAc,KAAS,GAEnC,MAAU,EAAO;EACrB,IAAM,IAAS,EAAO,EAAM;AAC5B,MAAI,aAAkB,SAAS;AAC7B,KAAU,GAAK;AACf,OAAI;AACF,UAAM;WACA;AAEN,IAAI,EAAQ,YAAS,EAAQ,QAAQ,cAAc;aAC3C;AACR,MAAU,GAAM;;;;CAKtB,SAAS,IAAS;AACX,IAAQ,YACb,EAAQ,QAAQ,cAAc,EAAY,SAC1C,EAAW,GAAM,EACjB,EAAQ,QAAQ,MAAM;;CAGxB,SAAS,EAAc,GAAwB;AAC7C,EAAI,EAAE,QAAQ,YACZ,EAAE,gBAAgB,EAClB,GAAQ,IACC,EAAE,QAAQ,YACnB,EAAE,gBAAgB,EAClB,GAAQ;;CAIZ,SAAS,IAAc;AACrB,MAAI,CAAC,EAAQ,WAAW,CAAC,EAAW;EACpC,IAAM,IAAO,EAAQ,QAAQ,eAAe;AAC5C,MAAI,EAAK,SAAS,GAAW;AAC3B,KAAQ,QAAQ,cAAc,EAAK,MAAM,GAAG,EAAU;GAEtD,IAAM,IAAQ,SAAS,aAAa;AAEpC,GADA,EAAM,mBAAmB,EAAQ,QAAQ,EACzC,EAAM,SAAS,GAAM;GACrB,IAAM,IAAM,OAAO,cAAc;AAEjC,GADA,GAAK,iBAAiB,EACtB,GAAK,SAAS,EAAM;;;CAKxB,SAAS,EAAY,GAAyB;AAC5C,IAAE,gBAAgB;EAClB,IAAM,IAAO,EAAE,cAAc,QAAQ,aAAa;AAClD,WAAS,YAAY,cAAc,IAAO,EAAK;;AAGjD,QACE,kBAAC,OAAD;EAAU;EAAK,WAAW,EAAG,4CAA4C,EAAU;EAAE,GAAI;YAAzF;GACE,kBAAC,QAAD;IACE,KAAK;IACL,MAAM,IAAW,KAAA,IAAY;IAC7B,iBAAiB,CAAC,KAAY,CAAC;IAC/B,gCAAA;IACA,UAAU,IAAW,KAAA,IAAY;IAGjC,cAAY,IAAW,KAAA,IAAa,MAAc,IAAiB,KAAA,IAAY;IAC/E,mBAAiB,IAAW,KAAA,IAAY;IACxC,SAAS;IACT,QAAQ;IACR,WAAW;IACX,SAAS;IACT,SAAS;IACT,YAAY;IACZ,WAAW,EACT,4CACA,GAEA,CAAC,KAAY,CAAC,KAAW,iHAEzB,KAAW,iFAEX,KAAW,CAAC,KAAW,iCAEvB,KAAY,iBACb;IACD,oBAAkB;cAEjB,MAAU,IAAU,KAAK;IACrB,CAAA;GACN,CAAC,KAAY,CAAC,KAAW,CAAC,KACzB,kBAAC,GAAD;IAAM,MAAM;IAAY,MAAK;IAAK,WAAU;IAA0G,CAAA;GAEvJ,KAAY,kBAAC,GAAD,EAAS,MAAK,MAAO,CAAA;GAC9B;;EAER;AACF,EAAW,cAAc"}
+{"version":3,"file":"inline-edit.js","names":[],"sources":["../../src/composed/inline-edit.tsx"],"sourcesContent":["'use client'\n\nimport { IconPencil } from '@tabler/icons-react'\nimport * as React from 'react'\n\nimport { Icon } from '../ui/icon'\nimport { cn } from '../ui/lib/utils'\nimport { Spinner } from '../ui/spinner'\n\n// ============================================================\n// Types\n// ============================================================\n\nexport interface InlineEditProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSave'> {\n  value: string\n  onSave: (newValue: string) => void | Promise<void>\n  placeholder?: string\n  /** CSS class applied to the editable text (e.g. 'text-ds-lg font-semibold') */\n  textClassName?: string\n  readOnly?: boolean\n  maxLength?: number\n  /** External saving state — shows spinner */\n  saving?: boolean\n}\n\n// ============================================================\n// InlineEdit — contentEditable approach\n//\n// No mode switch. No input field. The text IS the editor.\n// Click → cursor appears in the text. Type. Enter saves. Escape reverts.\n// Like Notion, Linear, Figma layer names.\n// ============================================================\n\nconst InlineEdit = React.forwardRef<HTMLDivElement, InlineEditProps>(({\n  value,\n  onSave,\n  placeholder = 'Click to edit',\n  textClassName,\n  readOnly = false,\n  maxLength,\n  saving: savingProp = false,\n  className,\n  // aria-label / aria-labelledby apply to the editable textbox (the inner\n  // span), not the outer wrapper div. Intercept them from ...props so they\n  // land on the role=\"textbox\" element that actually needs the name.\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ...props\n}, ref) => {\n  const [saving, setSaving] = React.useState(false)\n  const [focused, setFocused] = React.useState(false)\n  const editRef = React.useRef<HTMLSpanElement>(null)\n  const snapshotRef = React.useRef(value)\n\n  const isSaving = savingProp || saving\n  const isEmpty = !value\n\n  // Sync DOM text when value changes externally (and not focused)\n  React.useEffect(() => {\n    if (!focused && editRef.current) {\n      editRef.current.textContent = value\n    }\n  }, [value, focused])\n\n  function handleFocus() {\n    if (readOnly || isSaving) return\n    setFocused(true)\n    snapshotRef.current = value\n\n    // Select all text on focus (like clicking a file name in Finder)\n    requestAnimationFrame(() => {\n      if (!editRef.current) return\n      const range = document.createRange()\n      range.selectNodeContents(editRef.current)\n      const sel = window.getSelection()\n      sel?.removeAllRanges()\n      sel?.addRange(range)\n    })\n  }\n\n  async function commit() {\n    if (!editRef.current) return\n    setFocused(false)\n    const raw = editRef.current.textContent ?? ''\n    const trimmed = raw.trim()\n\n    // Enforce maxLength\n    const final = maxLength ? trimmed.slice(0, maxLength) : trimmed\n\n    // Reset DOM to clean value\n    editRef.current.textContent = final || value\n\n    if (final === value) return\n    const result = onSave(final)\n    if (result instanceof Promise) {\n      setSaving(true)\n      try {\n        await result\n      } catch {\n        // Revert on error\n        if (editRef.current) editRef.current.textContent = value\n      } finally {\n        setSaving(false)\n      }\n    }\n  }\n\n  function cancel() {\n    if (!editRef.current) return\n    editRef.current.textContent = snapshotRef.current\n    setFocused(false)\n    editRef.current.blur()\n  }\n\n  function handleKeyDown(e: React.KeyboardEvent) {\n    if (e.key === 'Escape') {\n      e.preventDefault()\n      cancel()\n    } else if (e.key === 'Enter') {\n      e.preventDefault()\n      commit()\n    }\n  }\n\n  function handleInput() {\n    if (!editRef.current || !maxLength) return\n    const text = editRef.current.textContent ?? ''\n    if (text.length > maxLength) {\n      editRef.current.textContent = text.slice(0, maxLength)\n      // Move cursor to end\n      const range = document.createRange()\n      range.selectNodeContents(editRef.current)\n      range.collapse(false)\n      const sel = window.getSelection()\n      sel?.removeAllRanges()\n      sel?.addRange(range)\n    }\n  }\n\n  // Prevent paste from inserting rich content\n  function handlePaste(e: React.ClipboardEvent) {\n    e.preventDefault()\n    const text = e.clipboardData.getData('text/plain')\n    document.execCommand('insertText', false, text)\n  }\n\n  return (\n    <div ref={ref} className={cn('group inline-flex items-center gap-ds-02', className)} {...props}>\n      <span\n        ref={editRef}\n        role={readOnly ? undefined : 'textbox'}\n        contentEditable={!readOnly && !isSaving}\n        suppressContentEditableWarning\n        tabIndex={readOnly ? undefined : 0}\n        // Fall back to the placeholder when no explicit label is supplied —\n        // screen readers need _something_ on role=\"textbox\".\n        aria-label={readOnly ? undefined : (ariaLabel ?? (ariaLabelledBy ? undefined : placeholder))}\n        aria-labelledby={readOnly ? undefined : ariaLabelledBy}\n        onFocus={handleFocus}\n        onBlur={commit}\n        onKeyDown={handleKeyDown}\n        onInput={handleInput}\n        onPaste={handlePaste}\n        spellCheck={focused}\n        className={cn(\n          'font-sans text-surface-fg outline-hidden',\n          textClassName,\n          // Idle: subtle hover hint\n          !readOnly && !focused && 'cursor-text rounded-control-inner -mx-ds-01 px-ds-01 hover:bg-surface-raised-hover transition-colors duration-fast-01',\n          // Focused: subtle underline to indicate editing\n          focused && 'rounded-control-inner -mx-ds-01 px-ds-01 bg-surface-raised-hover ring-1 ring-accent-7',\n          // Empty: show placeholder styling\n          isEmpty && !focused && 'text-surface-fg-subtle italic',\n          // Read-only\n          readOnly && 'cursor-default',\n        )}\n        data-placeholder={placeholder}\n      >\n        {value || (focused ? '' : placeholder)}\n      </span>\n      {!readOnly && !focused && !isSaving && (\n        <Icon icon={IconPencil} size=\"xs\" className=\"text-surface-fg-subtle opacity-0 group-hover:opacity-100 transition-opacity duration-fast-01 shrink-0\" />\n      )}\n      {isSaving && <Spinner size=\"sm\" />}\n    </div>\n  )\n})\nInlineEdit.displayName = 'InlineEdit'\n\nexport { InlineEdit }\n"],"mappings":";;;;;;;;AAiCA,IAAM,IAAa,EAAM,YAA6C,EACpE,UACA,WACA,iBAAc,iBACd,kBACA,cAAW,IACX,cACA,QAAQ,IAAa,IACrB,cAIA,cAAc,GACd,mBAAmB,GACnB,GAAG,KACF,MAAQ;CACT,IAAM,CAAC,GAAQ,KAAa,EAAM,SAAS,GAAM,EAC3C,CAAC,GAAS,KAAc,EAAM,SAAS,GAAM,EAC7C,IAAU,EAAM,OAAwB,KAAK,EAC7C,IAAc,EAAM,OAAO,EAAM,EAEjC,IAAW,KAAc,GACzB,IAAU,CAAC;AAGjB,GAAM,gBAAgB;AACpB,EAAI,CAAC,KAAW,EAAQ,YACtB,EAAQ,QAAQ,cAAc;IAE/B,CAAC,GAAO,EAAQ,CAAC;CAEpB,SAAS,IAAc;AACjB,OAAY,MAChB,EAAW,GAAK,EAChB,EAAY,UAAU,GAGtB,4BAA4B;AAC1B,OAAI,CAAC,EAAQ,QAAS;GACtB,IAAM,IAAQ,SAAS,aAAa;AACpC,KAAM,mBAAmB,EAAQ,QAAQ;GACzC,IAAM,IAAM,OAAO,cAAc;AAEjC,GADA,GAAK,iBAAiB,EACtB,GAAK,SAAS,EAAM;IACpB;;CAGJ,eAAe,IAAS;AACtB,MAAI,CAAC,EAAQ,QAAS;AACtB,IAAW,GAAM;EAEjB,IAAM,KADM,EAAQ,QAAQ,eAAe,IACvB,MAAM,EAGpB,IAAQ,IAAY,EAAQ,MAAM,GAAG,EAAU,GAAG;AAKxD,MAFA,EAAQ,QAAQ,cAAc,KAAS,GAEnC,MAAU,EAAO;EACrB,IAAM,IAAS,EAAO,EAAM;AAC5B,MAAI,aAAkB,SAAS;AAC7B,KAAU,GAAK;AACf,OAAI;AACF,UAAM;WACA;AAEN,IAAI,EAAQ,YAAS,EAAQ,QAAQ,cAAc;aAC3C;AACR,MAAU,GAAM;;;;CAKtB,SAAS,IAAS;AACX,IAAQ,YACb,EAAQ,QAAQ,cAAc,EAAY,SAC1C,EAAW,GAAM,EACjB,EAAQ,QAAQ,MAAM;;CAGxB,SAAS,EAAc,GAAwB;AAC7C,EAAI,EAAE,QAAQ,YACZ,EAAE,gBAAgB,EAClB,GAAQ,IACC,EAAE,QAAQ,YACnB,EAAE,gBAAgB,EAClB,GAAQ;;CAIZ,SAAS,IAAc;AACrB,MAAI,CAAC,EAAQ,WAAW,CAAC,EAAW;EACpC,IAAM,IAAO,EAAQ,QAAQ,eAAe;AAC5C,MAAI,EAAK,SAAS,GAAW;AAC3B,KAAQ,QAAQ,cAAc,EAAK,MAAM,GAAG,EAAU;GAEtD,IAAM,IAAQ,SAAS,aAAa;AAEpC,GADA,EAAM,mBAAmB,EAAQ,QAAQ,EACzC,EAAM,SAAS,GAAM;GACrB,IAAM,IAAM,OAAO,cAAc;AAEjC,GADA,GAAK,iBAAiB,EACtB,GAAK,SAAS,EAAM;;;CAKxB,SAAS,EAAY,GAAyB;AAC5C,IAAE,gBAAgB;EAClB,IAAM,IAAO,EAAE,cAAc,QAAQ,aAAa;AAClD,WAAS,YAAY,cAAc,IAAO,EAAK;;AAGjD,QACE,kBAAC,OAAD;EAAU;EAAK,WAAW,EAAG,4CAA4C,EAAU;EAAE,GAAI;YAAzF;GACE,kBAAC,QAAD;IACE,KAAK;IACL,MAAM,IAAW,KAAA,IAAY;IAC7B,iBAAiB,CAAC,KAAY,CAAC;IAC/B,gCAAA;IACA,UAAU,IAAW,KAAA,IAAY;IAGjC,cAAY,IAAW,KAAA,IAAa,MAAc,IAAiB,KAAA,IAAY;IAC/E,mBAAiB,IAAW,KAAA,IAAY;IACxC,SAAS;IACT,QAAQ;IACR,WAAW;IACX,SAAS;IACT,SAAS;IACT,YAAY;IACZ,WAAW,EACT,4CACA,GAEA,CAAC,KAAY,CAAC,KAAW,yHAEzB,KAAW,yFAEX,KAAW,CAAC,KAAW,iCAEvB,KAAY,iBACb;IACD,oBAAkB;cAEjB,MAAU,IAAU,KAAK;IACrB,CAAA;GACN,CAAC,KAAY,CAAC,KAAW,CAAC,KACzB,kBAAC,GAAD;IAAM,MAAM;IAAY,MAAK;IAAK,WAAU;IAA0G,CAAA;GAEvJ,KAAY,kBAAC,GAAD,EAAS,MAAK,MAAO,CAAA;GAC9B;;EAER;AACF,EAAW,cAAc"}

package/dist/composed/loading-skeleton.js

@@ -7,7 +7,7 @@ var a = n.forwardRef(function({ className: n, ...a }, o) {
 	return /* @__PURE__ */ i("div", {
 		ref: o,
 		...a,
-		className: e("rounded-ds-lg border border-surface-border-strong bg-surface-raised p-ds-05b", n),
+		className: e("rounded-surface border border-surface-border-strong bg-surface-raised p-ds-05b", n),
 		children: [
 			/* @__PURE__ */ i("div", {
 				className: "flex items-center justify-between pb-ds-05",
@@ -23,7 +23,7 @@ var a = n.forwardRef(function({ className: n, ...a }, o) {
 			}),
 			/* @__PURE__ */ i("div", {
 				className: "flex items-center gap-ds-03 pt-ds-05",
-				children: [/* @__PURE__ */ r(t, { className: "h-ds-xs w-ds-xs rounded-ds-full bg-surface-raised-hover" }), /* @__PURE__ */ r(t, { className: "h-[12px] w-[80px] bg-surface-raised-hover" })]
+				children: [/* @__PURE__ */ r(t, { className: "h-ds-xs w-ds-xs rounded-pill bg-surface-raised-hover" }), /* @__PURE__ */ r(t, { className: "h-[12px] w-[80px] bg-surface-raised-hover" })]
 			})
 		]
 	});
@@ -33,7 +33,7 @@ var o = n.forwardRef(function({ rows: n = 5, columns: a = 4, className: o, ...s
 	return /* @__PURE__ */ i("div", {
 		ref: c,
 		...s,
-		className: e("overflow-hidden rounded-ds-lg border border-surface-border-strong", o),
+		className: e("overflow-hidden rounded-surface border border-surface-border-strong", o),
 		children: [/* @__PURE__ */ r("div", {
 			className: "flex items-center gap-ds-05 border-b border-surface-border-strong bg-surface-raised px-ds-05 py-ds-04",
 			children: Array.from({ length: a }).map((n, i) => /* @__PURE__ */ r(t, { className: e("h-[12px] bg-surface-raised-hover", i === 0 ? "w-[160px]" : "flex-1") }, `head-${i}`))
@@ -59,11 +59,11 @@ var s = n.forwardRef(function({ columns: n = 4, cardsPerColumn: a = 3, className
 					children: [
 						/* @__PURE__ */ r(t, { className: "h-[12px] w-[12px] rounded bg-surface-raised-hover" }),
 						/* @__PURE__ */ r(t, { className: "h-[12px] w-[80px] bg-surface-raised-hover" }),
-						/* @__PURE__ */ r(t, { className: "h-[16px] w-[20px] rounded-ds-full bg-surface-raised-hover" })
+						/* @__PURE__ */ r(t, { className: "h-[16px] w-[20px] rounded-pill bg-surface-raised-hover" })
 					]
 				}), /* @__PURE__ */ r(t, { className: "h-ico-sm w-ico-sm rounded bg-surface-raised-hover" })]
 			}), Array.from({ length: a }).map((e, o) => /* @__PURE__ */ i("div", {
-				className: "rounded-ds-lg border border-surface-border-strong bg-surface-raised p-ds-04",
+				className: "rounded-surface border border-surface-border-strong bg-surface-raised p-ds-04",
 				style: { animationDelay: `${(n * a + o) * 50}ms` },
 				children: [/* @__PURE__ */ i("div", {
 					className: "space-y-ds-03",
@@ -72,8 +72,8 @@ var s = n.forwardRef(function({ columns: n = 4, cardsPerColumn: a = 3, className
 					className: "flex items-center justify-between pt-ds-04",
 					children: [/* @__PURE__ */ i("div", {
 						className: "flex items-center gap-ds-02b",
-						children: [/* @__PURE__ */ r(t, { className: "h-ico-md w-ico-md rounded-ds-full bg-surface-raised-hover" }), /* @__PURE__ */ r(t, { className: "h-ds-03 w-[64px] bg-surface-raised-hover" })]
-					}), /* @__PURE__ */ r(t, { className: "h-[16px] w-ds-lg rounded-ds-full bg-surface-raised-hover" })]
+						children: [/* @__PURE__ */ r(t, { className: "h-ico-md w-ico-md rounded-pill bg-surface-raised-hover" }), /* @__PURE__ */ r(t, { className: "h-ds-03 w-[64px] bg-surface-raised-hover" })]
+					}), /* @__PURE__ */ r(t, { className: "h-[16px] w-ds-lg rounded-pill bg-surface-raised-hover" })]
 				})]
 			}, `card-${n}-${o}`))]
 		}, `col-${n}`))
@@ -89,12 +89,12 @@ var c = n.forwardRef(function({ rows: n = 6, showAvatar: a = !0, className: o, .
 			className: e("flex items-center gap-ds-04 py-ds-04", s < n - 1 && "border-b border-surface-border-strong"),
 			style: { animationDelay: `${s * 50}ms` },
 			children: [
-				a && /* @__PURE__ */ r(t, { className: "h-ds-sm w-ds-sm shrink-0 rounded-ds-full bg-surface-raised-hover" }),
+				a && /* @__PURE__ */ r(t, { className: "h-ds-sm w-ds-sm shrink-0 rounded-pill bg-surface-raised-hover" }),
 				/* @__PURE__ */ i("div", {
 					className: "flex flex-1 flex-col gap-ds-02b",
 					children: [/* @__PURE__ */ r(t, { className: "h-[12px] w-2/5 bg-surface-raised-hover" }), /* @__PURE__ */ r(t, { className: "h-ds-03 w-3/5 bg-surface-raised-hover" })]
 				}),
-				/* @__PURE__ */ r(t, { className: "h-[20px] w-[56px] rounded-ds-full bg-surface-raised-hover" })
+				/* @__PURE__ */ r(t, { className: "h-[20px] w-[56px] rounded-pill bg-surface-raised-hover" })
 			]
 		}, `list-${s}`))
 	});

package/dist/composed/loading-skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading-skeleton.js","names":[],"sources":["../../src/composed/loading-skeleton.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from '../ui/lib/utils'\nimport { Skeleton } from '../ui/skeleton'\n\nexport interface CardSkeletonProps extends React.ComponentPropsWithoutRef<'div'> {\n  className?: string\n}\n\nconst CardSkeleton = React.forwardRef<HTMLDivElement, CardSkeletonProps>(\n  function CardSkeleton({ className, ...props }, ref) {\n  return (\n    <div\n      ref={ref}\n      {...props}\n      className={cn(\n        'rounded-ds-lg border border-surface-border-strong bg-surface-raised p-ds-05b',\n        className,\n      )}\n    >\n      <div className=\"flex items-center justify-between pb-ds-05\">\n        <Skeleton className=\"h-[16px] w-[128px] bg-surface-raised-hover\" />\n        <Skeleton className=\"h-ico-sm w-ico-sm rounded bg-surface-raised-hover\" />\n      </div>\n      <div className=\"space-y-ds-04\">\n        <Skeleton className=\"h-[12px] w-full bg-surface-raised-hover\" />\n        <Skeleton className=\"h-[12px] w-4/5 bg-surface-raised-hover\" />\n        <Skeleton className=\"h-[12px] w-3/5 bg-surface-raised-hover\" />\n      </div>\n      <div className=\"flex items-center gap-ds-03 pt-ds-05\">\n        <Skeleton className=\"h-ds-xs w-ds-xs rounded-ds-full bg-surface-raised-hover\" />\n        <Skeleton className=\"h-[12px] w-[80px] bg-surface-raised-hover\" />\n      </div>\n    </div>\n  )\n},\n)\n\nCardSkeleton.displayName = 'CardSkeleton'\n\nexport interface TableSkeletonProps extends CardSkeletonProps {\n  rows?: number\n  columns?: number\n}\n\nconst TableSkeleton = React.forwardRef<HTMLDivElement, TableSkeletonProps>(\n  function TableSkeleton({\n  rows = 5,\n  columns = 4,\n  className,\n  ...props\n}, ref) {\n  return (\n    <div\n      ref={ref}\n      {...props}\n      className={cn(\n        'overflow-hidden rounded-ds-lg border border-surface-border-strong',\n        className,\n      )}\n    >\n      {/* Header */}\n      <div className=\"flex items-center gap-ds-05 border-b border-surface-border-strong bg-surface-raised px-ds-05 py-ds-04\">\n        {Array.from({ length: columns }).map((_, i) => (\n          <Skeleton\n            key={`head-${i}`}\n            className={cn(\n              'h-[12px] bg-surface-raised-hover',\n              i === 0 ? 'w-[160px]' : 'flex-1',\n            )}\n          />\n        ))}\n      </div>\n\n      {/* Rows */}\n      {Array.from({ length: rows }).map((_, rowIndex) => (\n        <div\n          key={`row-${rowIndex}`}\n          className={cn(\n            'flex items-center gap-ds-05 px-ds-05 py-ds-04',\n            rowIndex < rows - 1 && 'border-b border-surface-border-strong',\n          )}\n          style={{ animationDelay: `${rowIndex * 50}ms` }}\n        >\n          {Array.from({ length: columns }).map((_, colIndex) => (\n            <Skeleton\n              key={`cell-${rowIndex}-${colIndex}`}\n              className={cn(\n                'h-[12px] bg-surface-raised-hover',\n                colIndex === 0 ? 'w-[160px]' : 'flex-1',\n              )}\n            />\n          ))}\n        </div>\n      ))}\n    </div>\n  )\n},\n)\n\nTableSkeleton.displayName = 'TableSkeleton'\n\nexport interface BoardSkeletonProps extends CardSkeletonProps {\n  columns?: number\n  cardsPerColumn?: number\n}\n\nconst BoardSkeleton = React.forwardRef<HTMLDivElement, BoardSkeletonProps>(\n  function BoardSkeleton({\n  columns = 4,\n  cardsPerColumn = 3,\n  className,\n  ...props\n}, ref) {\n  return (\n    <div ref={ref} {...props} className={cn('flex gap-ds-05 overflow-x-auto', className)}>\n      {Array.from({ length: columns }).map((_, colIndex) => (\n        <div\n          key={`col-${colIndex}`}\n          className=\"flex w-[272px] shrink-0 flex-col gap-ds-03\"\n        >\n          {/* Column header */}\n          <div className=\"flex items-center justify-between px-ds-02 py-ds-03\">\n            <div className=\"flex items-center gap-ds-03\">\n              <Skeleton className=\"h-[12px] w-[12px] rounded bg-surface-raised-hover\" />\n              <Skeleton className=\"h-[12px] w-[80px] bg-surface-raised-hover\" />\n              <Skeleton className=\"h-[16px] w-[20px] rounded-ds-full bg-surface-raised-hover\" />\n            </div>\n            <Skeleton className=\"h-ico-sm w-ico-sm rounded bg-surface-raised-hover\" />\n          </div>\n\n          {/* Column cards */}\n          {Array.from({ length: cardsPerColumn }).map((_, cardIndex) => (\n            <div\n              key={`card-${colIndex}-${cardIndex}`}\n              className=\"rounded-ds-lg border border-surface-border-strong bg-surface-raised p-ds-04\"\n              style={{ animationDelay: `${(colIndex * cardsPerColumn + cardIndex) * 50}ms` }}\n            >\n              <div className=\"space-y-ds-03\">\n                <Skeleton className=\"h-[12px] w-4/5 bg-surface-raised-hover\" />\n                <Skeleton className=\"h-[12px] w-3/5 bg-surface-raised-hover\" />\n              </div>\n              <div className=\"flex items-center justify-between pt-ds-04\">\n                <div className=\"flex items-center gap-ds-02b\">\n                  <Skeleton className=\"h-ico-md w-ico-md rounded-ds-full bg-surface-raised-hover\" />\n                  <Skeleton className=\"h-ds-03 w-[64px] bg-surface-raised-hover\" />\n                </div>\n                <Skeleton className=\"h-[16px] w-ds-lg rounded-ds-full bg-surface-raised-hover\" />\n              </div>\n            </div>\n          ))}\n        </div>\n      ))}\n    </div>\n  )\n},\n)\n\nBoardSkeleton.displayName = 'BoardSkeleton'\n\nexport interface ListSkeletonProps extends CardSkeletonProps {\n  rows?: number\n  showAvatar?: boolean\n}\n\nconst ListSkeleton = React.forwardRef<HTMLDivElement, ListSkeletonProps>(\n  function ListSkeleton({\n  rows = 6,\n  showAvatar = true,\n  className,\n  ...props\n}, ref) {\n  return (\n    <div ref={ref} {...props} className={cn('flex flex-col', className)}>\n      {Array.from({ length: rows }).map((_, i) => (\n        <div\n          key={`list-${i}`}\n          className={cn(\n            'flex items-center gap-ds-04 py-ds-04',\n            i < rows - 1 && 'border-b border-surface-border-strong',\n          )}\n          style={{ animationDelay: `${i * 50}ms` }}\n        >\n          {showAvatar && (\n            <Skeleton className=\"h-ds-sm w-ds-sm shrink-0 rounded-ds-full bg-surface-raised-hover\" />\n          )}\n          <div className=\"flex flex-1 flex-col gap-ds-02b\">\n            <Skeleton className=\"h-[12px] w-2/5 bg-surface-raised-hover\" />\n            <Skeleton className=\"h-ds-03 w-3/5 bg-surface-raised-hover\" />\n          </div>\n          <Skeleton className=\"h-[20px] w-[56px] rounded-ds-full bg-surface-raised-hover\" />\n        </div>\n      ))}\n    </div>\n  )\n},\n)\n\nListSkeleton.displayName = 'ListSkeleton'\n\nexport { BoardSkeleton, CardSkeleton, ListSkeleton,TableSkeleton }\n"],"mappings":"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"}
+{"version":3,"file":"loading-skeleton.js","names":[],"sources":["../../src/composed/loading-skeleton.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from '../ui/lib/utils'\nimport { Skeleton } from '../ui/skeleton'\n\nexport interface CardSkeletonProps extends React.ComponentPropsWithoutRef<'div'> {\n  className?: string\n}\n\nconst CardSkeleton = React.forwardRef<HTMLDivElement, CardSkeletonProps>(\n  function CardSkeleton({ className, ...props }, ref) {\n  return (\n    <div\n      ref={ref}\n      {...props}\n      className={cn(\n        'rounded-surface border border-surface-border-strong bg-surface-raised p-ds-05b',\n        className,\n      )}\n    >\n      <div className=\"flex items-center justify-between pb-ds-05\">\n        <Skeleton className=\"h-[16px] w-[128px] bg-surface-raised-hover\" />\n        <Skeleton className=\"h-ico-sm w-ico-sm rounded bg-surface-raised-hover\" />\n      </div>\n      <div className=\"space-y-ds-04\">\n        <Skeleton className=\"h-[12px] w-full bg-surface-raised-hover\" />\n        <Skeleton className=\"h-[12px] w-4/5 bg-surface-raised-hover\" />\n        <Skeleton className=\"h-[12px] w-3/5 bg-surface-raised-hover\" />\n      </div>\n      <div className=\"flex items-center gap-ds-03 pt-ds-05\">\n        <Skeleton className=\"h-ds-xs w-ds-xs rounded-pill bg-surface-raised-hover\" />\n        <Skeleton className=\"h-[12px] w-[80px] bg-surface-raised-hover\" />\n      </div>\n    </div>\n  )\n},\n)\n\nCardSkeleton.displayName = 'CardSkeleton'\n\nexport interface TableSkeletonProps extends CardSkeletonProps {\n  rows?: number\n  columns?: number\n}\n\nconst TableSkeleton = React.forwardRef<HTMLDivElement, TableSkeletonProps>(\n  function TableSkeleton({\n  rows = 5,\n  columns = 4,\n  className,\n  ...props\n}, ref) {\n  return (\n    <div\n      ref={ref}\n      {...props}\n      className={cn(\n        'overflow-hidden rounded-surface border border-surface-border-strong',\n        className,\n      )}\n    >\n      {/* Header */}\n      <div className=\"flex items-center gap-ds-05 border-b border-surface-border-strong bg-surface-raised px-ds-05 py-ds-04\">\n        {Array.from({ length: columns }).map((_, i) => (\n          <Skeleton\n            key={`head-${i}`}\n            className={cn(\n              'h-[12px] bg-surface-raised-hover',\n              i === 0 ? 'w-[160px]' : 'flex-1',\n            )}\n          />\n        ))}\n      </div>\n\n      {/* Rows */}\n      {Array.from({ length: rows }).map((_, rowIndex) => (\n        <div\n          key={`row-${rowIndex}`}\n          className={cn(\n            'flex items-center gap-ds-05 px-ds-05 py-ds-04',\n            rowIndex < rows - 1 && 'border-b border-surface-border-strong',\n          )}\n          style={{ animationDelay: `${rowIndex * 50}ms` }}\n        >\n          {Array.from({ length: columns }).map((_, colIndex) => (\n            <Skeleton\n              key={`cell-${rowIndex}-${colIndex}`}\n              className={cn(\n                'h-[12px] bg-surface-raised-hover',\n                colIndex === 0 ? 'w-[160px]' : 'flex-1',\n              )}\n            />\n          ))}\n        </div>\n      ))}\n    </div>\n  )\n},\n)\n\nTableSkeleton.displayName = 'TableSkeleton'\n\nexport interface BoardSkeletonProps extends CardSkeletonProps {\n  columns?: number\n  cardsPerColumn?: number\n}\n\nconst BoardSkeleton = React.forwardRef<HTMLDivElement, BoardSkeletonProps>(\n  function BoardSkeleton({\n  columns = 4,\n  cardsPerColumn = 3,\n  className,\n  ...props\n}, ref) {\n  return (\n    <div ref={ref} {...props} className={cn('flex gap-ds-05 overflow-x-auto', className)}>\n      {Array.from({ length: columns }).map((_, colIndex) => (\n        <div\n          key={`col-${colIndex}`}\n          className=\"flex w-[272px] shrink-0 flex-col gap-ds-03\"\n        >\n          {/* Column header */}\n          <div className=\"flex items-center justify-between px-ds-02 py-ds-03\">\n            <div className=\"flex items-center gap-ds-03\">\n              <Skeleton className=\"h-[12px] w-[12px] rounded bg-surface-raised-hover\" />\n              <Skeleton className=\"h-[12px] w-[80px] bg-surface-raised-hover\" />\n              <Skeleton className=\"h-[16px] w-[20px] rounded-pill bg-surface-raised-hover\" />\n            </div>\n            <Skeleton className=\"h-ico-sm w-ico-sm rounded bg-surface-raised-hover\" />\n          </div>\n\n          {/* Column cards */}\n          {Array.from({ length: cardsPerColumn }).map((_, cardIndex) => (\n            <div\n              key={`card-${colIndex}-${cardIndex}`}\n              className=\"rounded-surface border border-surface-border-strong bg-surface-raised p-ds-04\"\n              style={{ animationDelay: `${(colIndex * cardsPerColumn + cardIndex) * 50}ms` }}\n            >\n              <div className=\"space-y-ds-03\">\n                <Skeleton className=\"h-[12px] w-4/5 bg-surface-raised-hover\" />\n                <Skeleton className=\"h-[12px] w-3/5 bg-surface-raised-hover\" />\n              </div>\n              <div className=\"flex items-center justify-between pt-ds-04\">\n                <div className=\"flex items-center gap-ds-02b\">\n                  <Skeleton className=\"h-ico-md w-ico-md rounded-pill bg-surface-raised-hover\" />\n                  <Skeleton className=\"h-ds-03 w-[64px] bg-surface-raised-hover\" />\n                </div>\n                <Skeleton className=\"h-[16px] w-ds-lg rounded-pill bg-surface-raised-hover\" />\n              </div>\n            </div>\n          ))}\n        </div>\n      ))}\n    </div>\n  )\n},\n)\n\nBoardSkeleton.displayName = 'BoardSkeleton'\n\nexport interface ListSkeletonProps extends CardSkeletonProps {\n  rows?: number\n  showAvatar?: boolean\n}\n\nconst ListSkeleton = React.forwardRef<HTMLDivElement, ListSkeletonProps>(\n  function ListSkeleton({\n  rows = 6,\n  showAvatar = true,\n  className,\n  ...props\n}, ref) {\n  return (\n    <div ref={ref} {...props} className={cn('flex flex-col', className)}>\n      {Array.from({ length: rows }).map((_, i) => (\n        <div\n          key={`list-${i}`}\n          className={cn(\n            'flex items-center gap-ds-04 py-ds-04',\n            i < rows - 1 && 'border-b border-surface-border-strong',\n          )}\n          style={{ animationDelay: `${i * 50}ms` }}\n        >\n          {showAvatar && (\n            <Skeleton className=\"h-ds-sm w-ds-sm shrink-0 rounded-pill bg-surface-raised-hover\" />\n          )}\n          <div className=\"flex flex-1 flex-col gap-ds-02b\">\n            <Skeleton className=\"h-[12px] w-2/5 bg-surface-raised-hover\" />\n            <Skeleton className=\"h-ds-03 w-3/5 bg-surface-raised-hover\" />\n          </div>\n          <Skeleton className=\"h-[20px] w-[56px] rounded-pill bg-surface-raised-hover\" />\n        </div>\n      ))}\n    </div>\n  )\n},\n)\n\nListSkeleton.displayName = 'ListSkeleton'\n\nexport { BoardSkeleton, CardSkeleton, ListSkeleton,TableSkeleton }\n"],"mappings":"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"}

package/dist/composed/markdown-viewer.js

@@ -52,7 +52,7 @@ function m({ language: t, code: n, mb: i }) {
 	}, []), !s) return /* @__PURE__ */ o("div", {
 		className: e("group relative", i),
 		children: [/* @__PURE__ */ a("pre", {
-			className: "bg-surface-sunken rounded-ds-md p-ds-04 overflow-x-auto text-ds-sm font-mono",
+			className: "bg-surface-sunken rounded-control p-ds-04 overflow-x-auto text-ds-sm font-mono",
 			children: /* @__PURE__ */ a("code", { children: n })
 		}), /* @__PURE__ */ a(p, { code: n })]
 	});
@@ -143,7 +143,7 @@ var h = r.forwardRef(({ content: t, compact: n = !1, allowHtml: r = !1, linkTarg
 						});
 					}
 					return /* @__PURE__ */ a("code", {
-						className: "bg-surface-sunken rounded-ds-sm px-1.5 py-0.5 text-ds-sm font-mono text-surface-fg",
+						className: "bg-surface-sunken rounded-control-inner px-1.5 py-0.5 text-ds-sm font-mono text-surface-fg",
 						...n,
 						children: t
 					});
@@ -180,7 +180,7 @@ var h = r.forwardRef(({ content: t, compact: n = !1, allowHtml: r = !1, linkTarg
 				img: ({ src: e, alt: t }) => /* @__PURE__ */ a("img", {
 					src: e,
 					alt: t ?? "",
-					className: "rounded-ds-md max-w-full",
+					className: "rounded-control max-w-full",
 					loading: "lazy"
 				})
 			},

package/dist/composed/markdown-viewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"markdown-viewer.js","names":[],"sources":["../../src/composed/markdown-viewer.tsx"],"sourcesContent":["'use client'\n\nimport { IconCheck,IconCopy } from '@tabler/icons-react'\nimport * as React from 'react'\nimport Markdown from 'react-markdown'\nimport remarkGfm from 'remark-gfm'\n\nimport { Button } from '../ui/button'\nimport { Icon } from '../ui/icon'\nimport { cn } from '../ui/lib/utils'\n\n// react-syntax-highlighter is lazy-loaded in CodeBlock component below\n\n// ============================================================\n// Heading helpers\n// ============================================================\n\nfunction slugify(text: string): string {\n  return text.toLowerCase().replace(/[^\\w]+/g, '-').replace(/(^-|-$)/g, '')\n}\n\n/** Recursively extract text content from React children */\nfunction extractText(node: React.ReactNode): string {\n  if (typeof node === 'string') return node\n  if (typeof node === 'number') return String(node)\n  if (!node) return ''\n  if (Array.isArray(node)) return node.map(extractText).join('')\n  if (typeof node === 'object' && 'props' in node) {\n    return extractText((node as React.ReactElement<{ children?: React.ReactNode }>).props.children)\n  }\n  return ''\n}\n\n// ============================================================\n// Types\n// ============================================================\n\nexport interface MarkdownViewerProps extends React.HTMLAttributes<HTMLDivElement> {\n  content: string\n  /** Tighter spacing for inline use */\n  compact?: boolean\n  /** Allow raw HTML in markdown @default false */\n  allowHtml?: boolean\n  /** Link target @default '_blank' */\n  linkTarget?: string\n}\n\n// ============================================================\n// MarkdownViewer\n// ============================================================\n\n// Small copy-to-clipboard button for code blocks\nfunction CopyButton({ code }: { code: string }) {\n  const [copied, setCopied] = React.useState(false)\n  const timerRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n  React.useEffect(() => () => clearTimeout(timerRef.current), [])\n\n  function handleCopy() {\n    navigator.clipboard.writeText(code).then(() => {\n      setCopied(true)\n      timerRef.current = setTimeout(() => setCopied(false), 2000)\n    })\n  }\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon-xs\"\n      className=\"absolute top-ds-02 right-ds-02 opacity-0 group-hover:opacity-100 transition-opacity\"\n      onClick={handleCopy}\n      aria-label={copied ? 'Copied' : 'Copy code'}\n    >\n      {copied ? <Icon icon={IconCheck} size=\"xs\" /> : <Icon icon={IconCopy} size=\"xs\" />}\n    </Button>\n  )\n}\n\n// Syntax-highlighted code block with lazy-loaded highlighter\nfunction CodeBlock({ language, code, mb }: { language: string; code: string; mb: string }) {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const [modules, setModules] = React.useState<{ Highlighter: any; style: any } | null>(null)\n\n  React.useEffect(() => {\n    let cancelled = false\n    Promise.all([\n      import('react-syntax-highlighter'),\n      import('react-syntax-highlighter/dist/esm/styles/prism/one-dark'),\n    ]).then(([hlMod, styleMod]) => {\n      if (!cancelled) {\n        setModules({ Highlighter: hlMod.Prism ?? hlMod.default, style: styleMod.default })\n      }\n    }).catch(() => { /* fallback to plain pre */ })\n    return () => { cancelled = true }\n  }, [])\n\n  if (!modules) {\n    return (\n      <div className={cn('group relative', mb)}>\n        <pre className=\"bg-surface-sunken rounded-ds-md p-ds-04 overflow-x-auto text-ds-sm font-mono\">\n          <code>{code}</code>\n        </pre>\n        <CopyButton code={code} />\n      </div>\n    )\n  }\n\n  const { Highlighter, style } = modules\n  return (\n    <div className={cn('group relative', mb)}>\n      <Highlighter\n        language={language}\n        style={style}\n        customStyle={{\n          margin: 0,\n          borderRadius: 'var(--radius-ds-md)',\n          fontSize: 'var(--text-ds-sm)',\n          padding: 'var(--spacing-ds-04)',\n        }}\n      >\n        {code}\n      </Highlighter>\n      <CopyButton code={code} />\n    </div>\n  )\n}\n\nconst MarkdownViewer = React.forwardRef<HTMLDivElement, MarkdownViewerProps>(({\n  content,\n  compact = false,\n  allowHtml = false,\n  linkTarget = '_blank',\n  className,\n  ...props\n}, ref) => {\n  const mb = compact ? 'mb-ds-02' : 'mb-ds-03'\n  const mt = compact ? 'mt-ds-03' : 'mt-ds-05'\n\n  return (\n    <div ref={ref} className={cn('font-sans text-surface-fg', className)} {...props}>\n      <Markdown\n        remarkPlugins={[remarkGfm]}\n        skipHtml={!allowHtml}\n        components={{\n          h1: ({ children }) => {\n            const slug = slugify(extractText(children))\n            return (\n              <h1 id={slug} className={cn('group', compact ? 'text-ds-md' : 'text-ds-lg', 'font-semibold text-surface-fg', mt, mb)}>\n                <a href={`#${slug}`} className=\"opacity-0 group-hover:opacity-100 text-surface-fg-subtle mr-ds-02 no-underline\" aria-hidden=\"true\">\n                  #\n                </a>\n                {children}\n              </h1>\n            )\n          },\n          h2: ({ children }) => {\n            const slug = slugify(extractText(children))\n            return (\n              <h2 id={slug} className={cn('group', 'text-ds-md font-semibold text-surface-fg', compact ? 'mt-ds-03' : 'mt-ds-04', mb)}>\n                <a href={`#${slug}`} className=\"opacity-0 group-hover:opacity-100 text-surface-fg-subtle mr-ds-02 no-underline\" aria-hidden=\"true\">\n                  #\n                </a>\n                {children}\n              </h2>\n            )\n          },\n          h3: ({ children }) => {\n            const slug = slugify(extractText(children))\n            return (\n              <h3 id={slug} className={cn('group', 'text-ds-md font-semibold text-surface-fg', 'mt-ds-03', mb)}>\n                <a href={`#${slug}`} className=\"opacity-0 group-hover:opacity-100 text-surface-fg-subtle mr-ds-02 no-underline\" aria-hidden=\"true\">\n                  #\n                </a>\n                {children}\n              </h3>\n            )\n          },\n          p: ({ children }) => (\n            <p className={cn('text-ds-md text-surface-fg leading-ds-relaxed', mb)}>\n              {children}\n            </p>\n          ),\n          a: ({ href, children }) => (\n            <a\n              href={href}\n              target={linkTarget}\n              rel={linkTarget === '_blank' ? 'noopener noreferrer' : undefined}\n              className=\"text-accent-11 hover:underline\"\n            >\n              {children}\n            </a>\n          ),\n          code: ({ className: codeClassName, children, ...codeProps }) => {\n            const langMatch = codeClassName ? /language-(\\w+)/.exec(codeClassName) : null\n            if (langMatch) {\n              const lang = langMatch[1]\n              const codeString = String(children).replace(/\\n$/, '')\n              return <CodeBlock language={lang} code={codeString} mb={mb} />\n            }\n            return (\n              <code className=\"bg-surface-sunken rounded-ds-sm px-1.5 py-0.5 text-ds-sm font-mono text-surface-fg\" {...codeProps}>\n                {children}\n              </code>\n            )\n          },\n          pre: ({ children }) => (\n            <>{children}</>\n          ),\n          blockquote: ({ children }) => (\n            <blockquote className={cn('border-l-2 border-surface-border-subtle pl-ds-04 text-surface-fg-muted italic', mb)}>\n              {children}\n            </blockquote>\n          ),\n          ul: ({ children }) => (\n            <ul className={cn('list-disc pl-ds-06 text-ds-md text-surface-fg space-y-ds-01', mb)}>\n              {children}\n            </ul>\n          ),\n          ol: ({ children }) => (\n            <ol className={cn('list-decimal pl-ds-06 text-ds-md text-surface-fg space-y-ds-01', mb)}>\n              {children}\n            </ol>\n          ),\n          table: ({ children }) => (\n            <div className={cn('overflow-x-auto', mb)}>\n              <table className=\"w-full border-collapse\">\n                {children}\n              </table>\n            </div>\n          ),\n          th: ({ children }) => (\n            <th className=\"border border-surface-border-subtle px-ds-03 py-ds-02 text-left text-ds-sm font-semibold bg-surface-sunken\">\n              {children}\n            </th>\n          ),\n          td: ({ children }) => (\n            <td className=\"border border-surface-border-subtle px-ds-03 py-ds-02 text-ds-sm\">\n              {children}\n            </td>\n          ),\n          hr: () => <hr className={cn('border-surface-border-subtle', compact ? 'my-ds-03' : 'my-ds-04')} />,\n          img: ({ src, alt }) => (\n            <img src={src} alt={alt ?? ''} className=\"rounded-ds-md max-w-full\" loading=\"lazy\" />\n          ),\n        }}\n      >\n        {content}\n      </Markdown>\n    </div>\n  )\n})\nMarkdownViewer.displayName = 'MarkdownViewer'\n\nexport { MarkdownViewer }\n"],"mappings":"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"}
+{"version":3,"file":"markdown-viewer.js","names":[],"sources":["../../src/composed/markdown-viewer.tsx"],"sourcesContent":["'use client'\n\nimport { IconCheck,IconCopy } from '@tabler/icons-react'\nimport * as React from 'react'\nimport Markdown from 'react-markdown'\nimport remarkGfm from 'remark-gfm'\n\nimport { Button } from '../ui/button'\nimport { Icon } from '../ui/icon'\nimport { cn } from '../ui/lib/utils'\n\n// react-syntax-highlighter is lazy-loaded in CodeBlock component below\n\n// ============================================================\n// Heading helpers\n// ============================================================\n\nfunction slugify(text: string): string {\n  return text.toLowerCase().replace(/[^\\w]+/g, '-').replace(/(^-|-$)/g, '')\n}\n\n/** Recursively extract text content from React children */\nfunction extractText(node: React.ReactNode): string {\n  if (typeof node === 'string') return node\n  if (typeof node === 'number') return String(node)\n  if (!node) return ''\n  if (Array.isArray(node)) return node.map(extractText).join('')\n  if (typeof node === 'object' && 'props' in node) {\n    return extractText((node as React.ReactElement<{ children?: React.ReactNode }>).props.children)\n  }\n  return ''\n}\n\n// ============================================================\n// Types\n// ============================================================\n\nexport interface MarkdownViewerProps extends React.HTMLAttributes<HTMLDivElement> {\n  content: string\n  /** Tighter spacing for inline use */\n  compact?: boolean\n  /** Allow raw HTML in markdown @default false */\n  allowHtml?: boolean\n  /** Link target @default '_blank' */\n  linkTarget?: string\n}\n\n// ============================================================\n// MarkdownViewer\n// ============================================================\n\n// Small copy-to-clipboard button for code blocks\nfunction CopyButton({ code }: { code: string }) {\n  const [copied, setCopied] = React.useState(false)\n  const timerRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n  React.useEffect(() => () => clearTimeout(timerRef.current), [])\n\n  function handleCopy() {\n    navigator.clipboard.writeText(code).then(() => {\n      setCopied(true)\n      timerRef.current = setTimeout(() => setCopied(false), 2000)\n    })\n  }\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon-xs\"\n      className=\"absolute top-ds-02 right-ds-02 opacity-0 group-hover:opacity-100 transition-opacity\"\n      onClick={handleCopy}\n      aria-label={copied ? 'Copied' : 'Copy code'}\n    >\n      {copied ? <Icon icon={IconCheck} size=\"xs\" /> : <Icon icon={IconCopy} size=\"xs\" />}\n    </Button>\n  )\n}\n\n// Syntax-highlighted code block with lazy-loaded highlighter\nfunction CodeBlock({ language, code, mb }: { language: string; code: string; mb: string }) {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const [modules, setModules] = React.useState<{ Highlighter: any; style: any } | null>(null)\n\n  React.useEffect(() => {\n    let cancelled = false\n    Promise.all([\n      import('react-syntax-highlighter'),\n      import('react-syntax-highlighter/dist/esm/styles/prism/one-dark'),\n    ]).then(([hlMod, styleMod]) => {\n      if (!cancelled) {\n        setModules({ Highlighter: hlMod.Prism ?? hlMod.default, style: styleMod.default })\n      }\n    }).catch(() => { /* fallback to plain pre */ })\n    return () => { cancelled = true }\n  }, [])\n\n  if (!modules) {\n    return (\n      <div className={cn('group relative', mb)}>\n        <pre className=\"bg-surface-sunken rounded-control p-ds-04 overflow-x-auto text-ds-sm font-mono\">\n          <code>{code}</code>\n        </pre>\n        <CopyButton code={code} />\n      </div>\n    )\n  }\n\n  const { Highlighter, style } = modules\n  return (\n    <div className={cn('group relative', mb)}>\n      <Highlighter\n        language={language}\n        style={style}\n        customStyle={{\n          margin: 0,\n          borderRadius: 'var(--radius-ds-md)',\n          fontSize: 'var(--text-ds-sm)',\n          padding: 'var(--spacing-ds-04)',\n        }}\n      >\n        {code}\n      </Highlighter>\n      <CopyButton code={code} />\n    </div>\n  )\n}\n\nconst MarkdownViewer = React.forwardRef<HTMLDivElement, MarkdownViewerProps>(({\n  content,\n  compact = false,\n  allowHtml = false,\n  linkTarget = '_blank',\n  className,\n  ...props\n}, ref) => {\n  const mb = compact ? 'mb-ds-02' : 'mb-ds-03'\n  const mt = compact ? 'mt-ds-03' : 'mt-ds-05'\n\n  return (\n    <div ref={ref} className={cn('font-sans text-surface-fg', className)} {...props}>\n      <Markdown\n        remarkPlugins={[remarkGfm]}\n        skipHtml={!allowHtml}\n        components={{\n          h1: ({ children }) => {\n            const slug = slugify(extractText(children))\n            return (\n              <h1 id={slug} className={cn('group', compact ? 'text-ds-md' : 'text-ds-lg', 'font-semibold text-surface-fg', mt, mb)}>\n                <a href={`#${slug}`} className=\"opacity-0 group-hover:opacity-100 text-surface-fg-subtle mr-ds-02 no-underline\" aria-hidden=\"true\">\n                  #\n                </a>\n                {children}\n              </h1>\n            )\n          },\n          h2: ({ children }) => {\n            const slug = slugify(extractText(children))\n            return (\n              <h2 id={slug} className={cn('group', 'text-ds-md font-semibold text-surface-fg', compact ? 'mt-ds-03' : 'mt-ds-04', mb)}>\n                <a href={`#${slug}`} className=\"opacity-0 group-hover:opacity-100 text-surface-fg-subtle mr-ds-02 no-underline\" aria-hidden=\"true\">\n                  #\n                </a>\n                {children}\n              </h2>\n            )\n          },\n          h3: ({ children }) => {\n            const slug = slugify(extractText(children))\n            return (\n              <h3 id={slug} className={cn('group', 'text-ds-md font-semibold text-surface-fg', 'mt-ds-03', mb)}>\n                <a href={`#${slug}`} className=\"opacity-0 group-hover:opacity-100 text-surface-fg-subtle mr-ds-02 no-underline\" aria-hidden=\"true\">\n                  #\n                </a>\n                {children}\n              </h3>\n            )\n          },\n          p: ({ children }) => (\n            <p className={cn('text-ds-md text-surface-fg leading-ds-relaxed', mb)}>\n              {children}\n            </p>\n          ),\n          a: ({ href, children }) => (\n            <a\n              href={href}\n              target={linkTarget}\n              rel={linkTarget === '_blank' ? 'noopener noreferrer' : undefined}\n              className=\"text-accent-11 hover:underline\"\n            >\n              {children}\n            </a>\n          ),\n          code: ({ className: codeClassName, children, ...codeProps }) => {\n            const langMatch = codeClassName ? /language-(\\w+)/.exec(codeClassName) : null\n            if (langMatch) {\n              const lang = langMatch[1]\n              const codeString = String(children).replace(/\\n$/, '')\n              return <CodeBlock language={lang} code={codeString} mb={mb} />\n            }\n            return (\n              <code className=\"bg-surface-sunken rounded-control-inner px-1.5 py-0.5 text-ds-sm font-mono text-surface-fg\" {...codeProps}>\n                {children}\n              </code>\n            )\n          },\n          pre: ({ children }) => (\n            <>{children}</>\n          ),\n          blockquote: ({ children }) => (\n            <blockquote className={cn('border-l-2 border-surface-border-subtle pl-ds-04 text-surface-fg-muted italic', mb)}>\n              {children}\n            </blockquote>\n          ),\n          ul: ({ children }) => (\n            <ul className={cn('list-disc pl-ds-06 text-ds-md text-surface-fg space-y-ds-01', mb)}>\n              {children}\n            </ul>\n          ),\n          ol: ({ children }) => (\n            <ol className={cn('list-decimal pl-ds-06 text-ds-md text-surface-fg space-y-ds-01', mb)}>\n              {children}\n            </ol>\n          ),\n          table: ({ children }) => (\n            <div className={cn('overflow-x-auto', mb)}>\n              <table className=\"w-full border-collapse\">\n                {children}\n              </table>\n            </div>\n          ),\n          th: ({ children }) => (\n            <th className=\"border border-surface-border-subtle px-ds-03 py-ds-02 text-left text-ds-sm font-semibold bg-surface-sunken\">\n              {children}\n            </th>\n          ),\n          td: ({ children }) => (\n            <td className=\"border border-surface-border-subtle px-ds-03 py-ds-02 text-ds-sm\">\n              {children}\n            </td>\n          ),\n          hr: () => <hr className={cn('border-surface-border-subtle', compact ? 'my-ds-03' : 'my-ds-04')} />,\n          img: ({ src, alt }) => (\n            <img src={src} alt={alt ?? ''} className=\"rounded-control max-w-full\" loading=\"lazy\" />\n          ),\n        }}\n      >\n        {content}\n      </Markdown>\n    </div>\n  )\n})\nMarkdownViewer.displayName = 'MarkdownViewer'\n\nexport { MarkdownViewer }\n"],"mappings":"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"}

package/dist/composed/multi-select-popover.js

@@ -107,7 +107,7 @@ var m = s.forwardRef(({ items: m, groups: h, value: g, onValueChange: _, searchP
 			}) : /* @__PURE__ */ u(c, { children: [n.image && /* @__PURE__ */ l("img", {
 				src: n.image,
 				alt: "",
-				className: "h-ico-md w-ico-md rounded-full object-cover shrink-0"
+				className: "h-ico-md w-ico-md rounded-pill object-cover shrink-0"
 			}), /* @__PURE__ */ u("span", {
 				className: "flex-1 min-w-0",
 				children: [/* @__PURE__ */ l("span", {