@alfadocs/ui-kit 0.1.8 → 0.1.10

package/dist/_chunks/matrix-rain-BEkvux64.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"matrix-rain-BEkvux64.js","sources":["../../src/components/matrix-rain/matrix-rain.tsx"],"sourcesContent":["/* -------------------------------------------------------------------- */\n/* MatrixRain — decorative canvas overlay.                                */\n/*                                                                        */\n/* Falling-glyph \"digital rain\" with a CRT terminal vibe. Designed for    */\n/* easter-egg / dev-flavoured surfaces: place inside a relatively-        */\n/* positioned container with an `inset-0` className.                      */\n/*                                                                        */\n/* Behaviour:                                                              */\n/*   - Honours `prefers-reduced-motion` (renders nothing, animation off). */\n/*   - Pauses while the tab is hidden (visibility API).                   */\n/*   - Pauses when scrolled off-screen (IntersectionObserver).            */\n/*   - DPR-aware so glyphs stay sharp on HiDPI.                           */\n/*   - Resizes with the container (ResizeObserver).                        */\n/*   - \"Density-by-use\" trail: the per-frame decay alpha is small, so     */\n/*     columns that fire often accumulate a denser background residue     */\n/*     than rarely-firing ones — well-trodden paths stay luminous.        */\n/*                                                                        */\n/* The canvas is purely decorative — `aria-hidden=\"true\"`, no focus, no   */\n/* visible text. Consumers must own the parent's positioning + stacking.  */\n/* -------------------------------------------------------------------- */\n\nimport { forwardRef, useEffect, useMemo, useRef } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\n/* ------------------------------------------------------------------ */\n/* Glyph presets                                                       */\n/* ------------------------------------------------------------------ */\n\n/**\n * Half-width katakana + Latin digits + a few symbols. The canonical\n * Matrix used reverse-mirrored half-width katakana from a custom font;\n * plain half-width katakana is the closest open approximation.\n */\nconst KATAKANA_GLYPHS =\n  'ｦｧｨｩｪｫｬｭｮｯｰｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜ' +\n  '0123456789:・.\"=*+-<>¦|';\n\nconst HEX_GLYPHS = '0123456789ABCDEF{}[]<>/\\\\;:=$#@!*+-';\nconst BINARY_GLYPHS = '01';\nconst SYMBOL_GLYPHS = '!@#$%^&*()_+-=[]{}|;:,.<>?/';\n\nconst GLYPH_PRESETS = {\n  katakana: KATAKANA_GLYPHS,\n  hex: HEX_GLYPHS,\n  binary: BINARY_GLYPHS,\n  symbols: SYMBOL_GLYPHS,\n} as const;\n\ntype GlyphPreset = keyof typeof GLYPH_PRESETS;\n\n/* ------------------------------------------------------------------ */\n/* CVA variants                                                        */\n/* ------------------------------------------------------------------ */\n\nconst wrapperVariants = cva(\n  // Wrapper holds the canvas plus optional overlay pseudo-elements.\n  // pointer-events-none so the overlay never blocks underlying UI.\n  'ds:pointer-events-none ds:relative ds:overflow-hidden',\n  {\n    variants: {\n      // Built-in surface so the rain has somewhere to read against\n      // without the consumer wrapping it themselves.\n      // `transparent` (default) lets the parent provide the background.\n      // `solid` paints a near-black surface using the brand `blue-900`\n      // step from the palette — the rain's brightest glyphs read clean\n      // against it in either light or dark theme.\n      background: {\n        transparent: '',\n        solid: 'ds:bg-[var(--color-blue-900)]',\n      },\n      vibe: {\n        // No overlay, no canvas filter — just the rain.\n        clean: '',\n        // Fallout-CRT stack: vignette + dense scanlines + bloom +\n        // per-glyph phosphor glow (canvas-side shadowBlur, applied in\n        // the draw loop).\n        terminal: [\n          \"ds:before:pointer-events-none ds:before:absolute ds:before:inset-0 ds:before:z-[2] ds:before:content-['']\",\n          'ds:before:bg-[radial-gradient(closest-side,transparent_55%,rgb(0_0_0/0.55)_100%)]',\n          \"ds:after:pointer-events-none ds:after:absolute ds:after:inset-0 ds:after:z-[1] ds:after:content-['']\",\n          'ds:after:bg-[repeating-linear-gradient(to_bottom,transparent_0,transparent_2px,rgb(0_0_0/0.32)_2px,rgb(0_0_0/0.32)_3px)]',\n          'ds:after:mix-blend-multiply',\n          'ds:[&>canvas]:[filter:blur(0.55px)_brightness(1.25)_contrast(1.1)_saturate(1.3)]',\n        ].join(' '),\n        // Sci-fi HUD: light scanlines, soft bloom, slow opacity pulse,\n        // per-glyph glow. No vignette.\n        hologram: [\n          \"ds:after:pointer-events-none ds:after:absolute ds:after:inset-0 ds:after:z-[1] ds:after:content-['']\",\n          'ds:after:bg-[repeating-linear-gradient(to_bottom,transparent_0,transparent_3px,rgb(0_0_0/0.18)_3px,rgb(0_0_0/0.18)_4px)]',\n          'ds:after:mix-blend-multiply',\n          'ds:[&>canvas]:[filter:blur(0.4px)_brightness(1.15)_contrast(1.05)]',\n          'ds:[&>canvas]:[animation:matrix-rain-hologram-pulse_3s_ease-in-out_infinite]',\n        ].join(' '),\n        // Synthwave neon: heavy bloom, no scanlines, indigo horizon\n        // glow at the bottom. Glyph colour is computed per-column in\n        // the draw loop (accent → info gradient).\n        synthwave: [\n          \"ds:after:pointer-events-none ds:after:absolute ds:after:inset-x-0 ds:after:bottom-0 ds:after:h-[30%] ds:after:z-[1] ds:after:content-['']\",\n          'ds:after:bg-[linear-gradient(to_top,var(--color-indigo-800),transparent)]',\n          'ds:after:opacity-50',\n          'ds:[&>canvas]:[filter:blur(0.7px)_brightness(1.3)_contrast(1.15)_saturate(1.5)]',\n        ].join(' '),\n        // Vintage scope monitor: dense thin scanlines, sharp edges\n        // (no canvas filter), animated horizontal sweep beam.\n        oscilloscope: [\n          // Scanlines (denser, alpha-heavier than terminal)\n          \"ds:after:pointer-events-none ds:after:absolute ds:after:inset-0 ds:after:z-[1] ds:after:content-['']\",\n          'ds:after:bg-[repeating-linear-gradient(to_bottom,transparent_0,transparent_1px,rgb(0_0_0/0.4)_1px,rgb(0_0_0/0.4)_2px)]',\n          'ds:after:mix-blend-multiply',\n          // Sweep beam — thin highlight bar scrolling top → bottom\n          \"ds:before:pointer-events-none ds:before:absolute ds:before:inset-x-0 ds:before:top-0 ds:before:z-[2] ds:before:h-[4px] ds:before:content-['']\",\n          'ds:before:bg-[linear-gradient(to_bottom,transparent,var(--foreground),transparent)]',\n          'ds:before:opacity-50',\n          'ds:before:[animation:matrix-rain-osc-sweep_4s_linear_infinite]',\n          'ds:before:mix-blend-screen',\n        ].join(' '),\n        // Production-friendly: low opacity, no overlay. Pairs with\n        // `decay=\"slow\"` (the default) for a faint background-noise\n        // feel that doesn't dominate foreground content.\n        ghost: 'ds:[&>canvas]:opacity-30',\n      },\n      // Radial mask that fades the canvas to transparent in the middle\n      // so foreground content stays readable. `closest-side` adapts to\n      // non-square containers. The `--mr` custom property comes from\n      // the `maskRadius` variant below.\n      mask: {\n        none: '',\n        center: [\n          'ds:[&>canvas]:[mask-image:radial-gradient(closest-side,transparent_0%,transparent_var(--mr,30%),black_calc(var(--mr,30%)+45%))]',\n          'ds:[&>canvas]:[-webkit-mask-image:radial-gradient(closest-side,transparent_0%,transparent_var(--mr,30%),black_calc(var(--mr,30%)+45%))]',\n        ].join(' '),\n      },\n      // Mask radius — t-shirt sizes drive the inner clear-zone radius.\n      // Only applied when mask=\"center\". md (30%) is the default.\n      maskRadius: {\n        xs: 'ds:[--mr:15%]',\n        sm: 'ds:[--mr:22%]',\n        md: 'ds:[--mr:30%]',\n        lg: 'ds:[--mr:42%]',\n        xl: 'ds:[--mr:55%]',\n      },\n    },\n    defaultVariants: {\n      background: 'transparent',\n      vibe: 'clean',\n      mask: 'none',\n      maskRadius: 'md',\n    },\n  },\n);\n\n/* ------------------------------------------------------------------ */\n/* Tone → semantic token resolution                                    */\n/* ------------------------------------------------------------------ */\n\ntype Tone = 'primary' | 'accent' | 'success' | 'error' | 'info';\ntype Density = 'low' | 'medium' | 'high';\ntype Pace = 'gentle' | 'normal' | 'fast';\ntype Decay = 'none' | 'slow' | 'normal' | 'fast';\n\nconst TONE_VAR: Record<Tone, string> = {\n  primary: '--primary',\n  accent: '--accent',\n  success: '--success',\n  error: '--error',\n  info: '--info',\n};\n\nconst DENSITY_FONT_PX: Record<Density, number> = {\n  low: 18,\n  medium: 14,\n  high: 11,\n};\n\nconst PACE_FRAME_MS: Record<Pace, number> = {\n  gentle: 100,\n  normal: 60,\n  fast: 33,\n};\n\n// Per-frame trail decay alpha. Smaller = trails persist longer = more\n// \"density by use\". `none` skips the decay step entirely; over long\n// uptimes the canvas approaches a saturated noise field. `slow` is the\n// new default that produces the \"well-trodden paths stay bright\" feel.\nconst DECAY_ALPHA: Record<Decay, number | null> = {\n  none: null,\n  slow: 0.003,\n  normal: 0.02,\n  fast: 0.08,\n};\n\n/* ------------------------------------------------------------------ */\n/* Props                                                               */\n/* ------------------------------------------------------------------ */\n\nexport interface MatrixRainProps extends VariantProps<typeof wrapperVariants> {\n  /** Glyph preset name or a literal string of glyphs. Default `katakana`. */\n  glyphs?: GlyphPreset | string;\n  /** Brand tone for the rain. Resolved against the active theme. */\n  tone?: Tone;\n  /** Optional explicit colour — any CSS colour value. Overrides `tone` when set. */\n  color?: string;\n  /** Glyph density — controls font-size. */\n  density?: Density;\n  /** Animation pace — controls frame interval. */\n  pace?: Pace;\n  /** Trail persistence — smaller decay = denser cumulative background. */\n  decay?: Decay;\n  /**\n   * Built-in surface beneath the rain. `transparent` (default) lets the\n   * parent provide its own background; `solid` paints a near-black\n   * surface so the rain reads cleanly without the consumer wrapping it\n   * themselves — useful for standalone demos or full-bleed easter eggs.\n   */\n  background?: 'transparent' | 'solid';\n  /**\n   * Visual treatment.\n   * - `clean`         — just the rain.\n   * - `terminal`      — Fallout-CRT: vignette + scanlines + bloom + glow.\n   * - `hologram`      — sci-fi HUD: soft scanlines + slow opacity pulse.\n   * - `synthwave`     — 80s neon: heavy bloom + indigo horizon + accent→\n   *                     info gradient across columns (overrides `tone`).\n   * - `oscilloscope`  — vintage scope: sharp edges + dense scanlines +\n   *                     animated horizontal beam sweep.\n   * - `ghost`         — production-friendly faint background variant.\n   */\n  vibe?: 'clean' | 'terminal' | 'hologram' | 'synthwave' | 'oscilloscope' | 'ghost';\n  /**\n   * When `true`, gives each column a stable random speed multiplier\n   * (0.6×–1.4× of the base pace) and adds a small horizontal jitter to\n   * each glyph. Pairs with any vibe — makes the rain feel alive vs.\n   * metronomic.\n   */\n  storm?: boolean;\n  /**\n   * Radial mask. `center` fades the canvas to fully transparent in the\n   * middle so foreground content sitting over the rain stays readable\n   * (e.g. code-block easter egg with copy in the middle).\n   */\n  mask?: 'none' | 'center';\n  /**\n   * Inner clear-zone radius for `mask=\"center\"`. Ignored when `mask`\n   * is `none`. T-shirt sizes map to: xs 15%, sm 22%, md 30% (default),\n   * lg 42%, xl 55%.\n   */\n  maskRadius?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Class merged onto the wrapper. */\n  className?: string;\n}\n\n/* ------------------------------------------------------------------ */\n/* Component                                                           */\n/* ------------------------------------------------------------------ */\n\nexport const MatrixRain = forwardRef<HTMLDivElement, MatrixRainProps>(\n  function MatrixRain(\n    {\n      glyphs = 'katakana',\n      tone = 'primary',\n      color,\n      density = 'medium',\n      pace = 'normal',\n      decay = 'slow',\n      vibe = 'clean',\n      storm = false,\n      mask = 'none',\n      maskRadius = 'md',\n      background = 'transparent',\n      className,\n    },\n    ref,\n  ) {\n    const canvasRef = useRef<HTMLCanvasElement | null>(null);\n\n    // Resolve the glyph string from a preset key or literal pass-through.\n    const glyphString = useMemo<string>(() => {\n      if (glyphs in GLYPH_PRESETS) {\n        return GLYPH_PRESETS[glyphs as GlyphPreset];\n      }\n      return glyphs;\n    }, [glyphs]);\n\n    const fontSize = DENSITY_FONT_PX[density];\n    const frameInterval = PACE_FRAME_MS[pace];\n    const decayAlpha = DECAY_ALPHA[decay];\n\n    useEffect(() => {\n      const canvas = canvasRef.current;\n      if (!canvas) return;\n      const ctx = canvas.getContext('2d');\n      if (!ctx) return;\n\n      // Bail entirely under reduced-motion. The CSS overlay is also\n      // suppressed by media-query in the consumer's stylesheet if needed\n      // — defence in depth, but the JS is the authoritative gate here.\n      const reduceMotionMql =\n        typeof window !== 'undefined' && typeof window.matchMedia === 'function'\n          ? window.matchMedia('(prefers-reduced-motion: reduce)')\n          : null;\n      if (reduceMotionMql?.matches) return;\n\n      // Resolve colour: explicit prop wins; otherwise read the theme\n      // token. Final fallback is the canvas's inherited `color` (cascade\n      // of the host `<div>`), which the browser always resolves to a\n      // usable value — keeps a literal hex out of component code.\n      const resolvedColor = (() => {\n        if (color) return color;\n        if (typeof window === 'undefined') return '';\n        const fromVar = getComputedStyle(document.documentElement)\n          .getPropertyValue(TONE_VAR[tone])\n          .trim();\n        return fromVar || getComputedStyle(canvas).color;\n      })();\n\n      // Resolve --font-mono at runtime so the kit's font fallback chain\n      // (incl. Noto Sans JP for katakana) flows through to canvas.\n      const fontFamily = (() => {\n        if (typeof window === 'undefined') return 'monospace';\n        const fromVar = getComputedStyle(document.documentElement)\n          .getPropertyValue('--font-mono')\n          .trim();\n        return fromVar || 'monospace';\n      })();\n\n      const dpr = window.devicePixelRatio || 1;\n      let columns = 0;\n      let drops: number[] = [];\n      // Synthwave: per-column accent → info gradient. Resolved through\n      // a temporary probe element so we get back fully-resolved rgb()\n      // strings the canvas API accepts. Empty when not in synthwave.\n      let columnColors: string[] = [];\n      // Storm: per-column random speed factor (0.6×–1.4× base pace) +\n      // glyph horizontal jitter. Stable across frames, recomputed on\n      // each fit() so columns stay coherent.\n      let columnSpeeds: number[] = [];\n\n      const fit = () => {\n        const rect = canvas.getBoundingClientRect();\n        canvas.width = Math.max(1, Math.floor(rect.width * dpr));\n        canvas.height = Math.max(1, Math.floor(rect.height * dpr));\n        // Render in CSS pixels so font metrics stay sharp on HiDPI.\n        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n        columns = Math.max(1, Math.floor(rect.width / fontSize));\n        drops = new Array(columns).fill(0).map(() =>\n          // Random initial offset so columns never start in sync.\n          Math.floor(Math.random() * (rect.height / fontSize)),\n        );\n\n        if (vibe === 'synthwave') {\n          // Build the per-column gradient by resolving color-mix()\n          // through a probe span. Browser handles the OKLCH math; we\n          // just store the resulting rgb() string per column.\n          const probe = document.createElement('span');\n          probe.style.display = 'none';\n          document.documentElement.appendChild(probe);\n          columnColors = new Array(columns).fill('').map((_, i) => {\n            const t = (i / Math.max(1, columns - 1)) * 100;\n            probe.style.color = `color-mix(in oklch, var(--accent) ${\n              100 - t\n            }%, var(--info) ${t}%)`;\n            const computed = getComputedStyle(probe).color;\n            return computed || resolvedColor;\n          });\n          document.documentElement.removeChild(probe);\n        } else {\n          columnColors = [];\n        }\n\n        if (storm) {\n          columnSpeeds = new Array(columns)\n            .fill(0)\n            .map(() => 0.6 + Math.random() * 0.8);\n        } else {\n          columnSpeeds = [];\n        }\n      };\n\n      let lastFrame = 0;\n      let rafHandle = 0;\n      let isVisible = true;\n      let isOnscreen = true;\n\n      const draw = (now: number) => {\n        if (now - lastFrame >= frameInterval) {\n          lastFrame = now;\n          const rect = canvas.getBoundingClientRect();\n\n          // Trail decay — `destination-out` fades existing pixels by\n          // `decayAlpha` each frame. Skip when `decay === 'none'` so\n          // trails are permanent (eventually saturate; intended).\n          // Under `destination-out` only the alpha channel matters, so\n          // we drive the fade via `globalAlpha` and any opaque CSS-keyword\n          // fillStyle — no rgba literal needed.\n          if (decayAlpha !== null) {\n            ctx.globalCompositeOperation = 'destination-out';\n            ctx.globalAlpha = decayAlpha;\n            ctx.fillStyle = 'black';\n            ctx.fillRect(0, 0, rect.width, rect.height);\n            ctx.globalAlpha = 1;\n          }\n\n          ctx.globalCompositeOperation = 'source-over';\n          ctx.font = `${fontSize}px ${fontFamily}`;\n          ctx.textBaseline = 'top';\n          // Per-glyph phosphor glow (canvas shadowBlur). On for vibes\n          // that need an emission envelope; off for sharp variants.\n          const wantsGlow =\n            vibe === 'terminal' || vibe === 'hologram' || vibe === 'synthwave';\n          if (wantsGlow) {\n            ctx.shadowColor = resolvedColor;\n            ctx.shadowBlur = Math.max(4, fontSize * 0.6);\n          } else {\n            ctx.shadowBlur = 0;\n          }\n\n          // Default fill (overridden per-column for synthwave).\n          if (vibe !== 'synthwave') ctx.fillStyle = resolvedColor;\n\n          for (let i = 0; i < columns; i += 1) {\n            const ch = glyphString.charAt(\n              Math.floor(Math.random() * glyphString.length),\n            );\n            // Storm: small horizontal jitter so rows feel alive.\n            const jitter = storm ? (Math.random() - 0.5) * 2 : 0;\n            const x = i * fontSize + jitter;\n            const y = drops[i] * fontSize;\n\n            // Synthwave: gradient colour per column.\n            if (vibe === 'synthwave' && columnColors[i]) {\n              ctx.fillStyle = columnColors[i];\n              if (wantsGlow) ctx.shadowColor = columnColors[i];\n            }\n\n            ctx.fillText(ch, x, y);\n\n            // Reset randomly once past the bottom so columns restart\n            // staggered rather than all at once.\n            if (y > rect.height && Math.random() > 0.97) {\n              drops[i] = 0;\n            }\n            // Storm: per-column variable advance speed.\n            drops[i] += storm ? columnSpeeds[i] || 1 : 1;\n          }\n        }\n        rafHandle = window.requestAnimationFrame(draw);\n      };\n\n      const start = () => {\n        if (rafHandle) return;\n        if (!isVisible || !isOnscreen) return;\n        lastFrame = window.performance ? window.performance.now() : 0;\n        rafHandle = window.requestAnimationFrame(draw);\n      };\n      const stop = () => {\n        if (rafHandle) {\n          window.cancelAnimationFrame(rafHandle);\n          rafHandle = 0;\n        }\n      };\n\n      fit();\n      start();\n\n      // Resize with the container.\n      const resizeObserver =\n        typeof ResizeObserver !== 'undefined' ? new ResizeObserver(fit) : null;\n      resizeObserver?.observe(canvas);\n      const onWindowResize = () => fit();\n      if (!resizeObserver) window.addEventListener('resize', onWindowResize);\n\n      // Pause when tab is hidden.\n      const onVisibility = () => {\n        isVisible = !document.hidden;\n        if (isVisible) start();\n        else stop();\n      };\n      document.addEventListener('visibilitychange', onVisibility);\n\n      // Pause when scrolled off-screen.\n      const intersectionObserver =\n        typeof IntersectionObserver !== 'undefined'\n          ? new IntersectionObserver(\n              (entries) => {\n                isOnscreen = entries.some((e) => e.isIntersecting);\n                if (isOnscreen) start();\n                else stop();\n              },\n              { threshold: 0 },\n            )\n          : null;\n      intersectionObserver?.observe(canvas);\n\n      // Pause if reduced-motion gets toggled at runtime.\n      const onReduceMotionChange = () => {\n        if (reduceMotionMql?.matches) stop();\n        else start();\n      };\n      reduceMotionMql?.addEventListener?.('change', onReduceMotionChange);\n\n      return () => {\n        stop();\n        resizeObserver?.disconnect();\n        intersectionObserver?.disconnect();\n        if (!resizeObserver) window.removeEventListener('resize', onWindowResize);\n        document.removeEventListener('visibilitychange', onVisibility);\n        reduceMotionMql?.removeEventListener?.('change', onReduceMotionChange);\n      };\n    }, [\n      glyphString,\n      tone,\n      color,\n      fontSize,\n      frameInterval,\n      decayAlpha,\n      vibe,\n      storm,\n    ]);\n\n    return (\n      <div\n        ref={ref}\n        aria-hidden=\"true\"\n        data-component=\"matrix-rain\"\n        className={[\n          wrapperVariants({ background, vibe, mask, maskRadius }),\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        <canvas ref={canvasRef} className=\"ds:absolute ds:inset-0 ds:block ds:size-full\" />\n      </div>\n    );\n  },\n);\n\nMatrixRain.displayName = 'MatrixRain';\n"],"names":["KATAKANA_GLYPHS","HEX_GLYPHS","BINARY_GLYPHS","SYMBOL_GLYPHS","GLYPH_PRESETS","wrapperVariants","cva","TONE_VAR","DENSITY_FONT_PX","PACE_FRAME_MS","DECAY_ALPHA","MatrixRain","forwardRef","glyphs","tone","color","density","pace","decay","vibe","storm","mask","maskRadius","background","className","ref","canvasRef","useRef","glyphString","useMemo","fontSize","frameInterval","decayAlpha","useEffect","canvas","ctx","reduceMotionMql","resolvedColor","fontFamily","dpr","columns","drops","columnColors","columnSpeeds","fit","rect","probe","_","i","t","lastFrame","rafHandle","isVisible","isOnscreen","draw","now","wantsGlow","ch","jitter","x","y","start","stop","resizeObserver","onWindowResize","onVisibility","intersectionObserver","entries","e","onReduceMotionChange","_a","jsx"],"mappings":"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"}

package/dist/_chunks/{message-card-qAp2-WQK.js → message-card-qhoGv947.js}

@@ -160,6 +160,7 @@ const Q = R(
         ref: z,
         role: "listitem",
         "data-component": "message-card",
+        "data-component-id": e.id,
         "data-read": e.read ? "true" : "false",
         "data-leaving": b ? "true" : void 0,
         "aria-hidden": b || void 0,
@@ -273,4 +274,4 @@ export {
   Q as M,
   O as i
 };
-//# sourceMappingURL=message-card-qAp2-WQK.js.map
+//# sourceMappingURL=message-card-qhoGv947.js.map

package/dist/_chunks/message-card-qhoGv947.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-card-qhoGv947.js","sources":["../../src/components/message-card/message-card.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { X } from 'lucide-react';\nimport { IconButton } from '../button/icon-button';\nimport { Button } from '../button/button';\nimport { Avatar } from '../avatar/avatar';\nimport { Timestamp } from '../timestamp';\n\n/* ------------------------------------------------------------------ */\n/* Types                                                               */\n/* ------------------------------------------------------------------ */\n\nexport interface MessageSender {\n  /** Display name — drives the avatar's deterministic colour + initials. */\n  name: string;\n  /** Optional avatar image URL. */\n  avatarUrl?: string;\n}\n\nexport interface MessageItem {\n  /** Unique identifier for the message (or thread). */\n  id: string;\n  /** Sender identity — avatar + bold display name. */\n  sender: MessageSender;\n  /** Optional subject / conversation title. Rendered bold when unread. */\n  subject?: string;\n  /** Last-message preview — rendered as plain text, clamped to two lines. */\n  preview: string;\n  /** ISO-8601 timestamp of when the message was sent. */\n  sentAt: string;\n  /** Whether the message has been seen. Unread items get accent styling. */\n  read?: boolean;\n  /** Optional deep link — when present the card row is an anchor. */\n  url?: string;\n  /**\n   * Count of unread messages inside a thread. Rendered as an end-aligned\n   * badge when greater than 1.\n   */\n  unreadCount?: number;\n}\n\nexport interface MessageCardProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'role' | 'title'>,\n    VariantProps<typeof cardVariants> {\n  /** The message to render. */\n  item: MessageItem;\n  /**\n   * Layout shape.\n   * - `compact` — single-line row with the whole card clickable (used by\n   *   MessageTray).\n   * - `dashboard` — bordered block with explicit CTA and mark-as-read\n   *   controls (used by dashboards / sidebars).\n   */\n  variant?: 'compact' | 'dashboard';\n  /** Visual density. */\n  size?: 'sm' | 'md';\n  /** Fires when the row / title is activated. */\n  onActivate?: (item: MessageItem) => void;\n  /** Fires when the dismiss control is activated. */\n  onDismiss?: (item: MessageItem) => void;\n  /**\n   * Label for the dashboard-variant CTA. Only rendered when `variant` is\n   * `'dashboard'` and the item has a `url`.\n   */\n  ctaLabel?: string;\n  /**\n   * Label for the dashboard-variant mark-as-read link. Only rendered when\n   * `variant` is `'dashboard'` and `onDismiss` is supplied.\n   */\n  dismissLabel?: string;\n  /**\n   * External exit-animation control. When supplied the card plays its\n   * fade-out when this turns `true` and the consumer owns the subsequent\n   * unmount (see MessageTray). If omitted, the card self-manages the\n   * exit on internal dismiss.\n   */\n  leaving?: boolean;\n}\n\n/* ------------------------------------------------------------------ */\n/* CVA                                                                 */\n/* ------------------------------------------------------------------ */\n\nconst cardVariants = cva(\n  [\n    'ds:relative ds:flex ds:gap-[var(--spacing-sm)]',\n    'ds:rounded-[var(--radius-sm)]',\n    'ds:transition-colors',\n    'ds:motion-safe:animate-in ds:motion-safe:fade-in-0 ds:motion-safe:slide-in-from-top-2 ds:motion-safe:duration-[var(--animation-duration)]',\n    'ds:data-[leaving=true]:motion-safe:animate-out ds:data-[leaving=true]:motion-safe:fade-out-0 ds:data-[leaving=true]:motion-safe:slide-out-to-top-2',\n    'ds:data-[leaving=true]:motion-safe:fill-mode-forwards',\n    'ds:data-[leaving=true]:pointer-events-none',\n    'ds:motion-reduce:transition-none',\n    'ds:text-start',\n    'ds:forced-colors:border ds:forced-colors:border-[CanvasText]',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        compact: 'ds:items-start ds:group',\n        dashboard:\n          'ds:flex-col ds:sm:flex-row ds:items-stretch ds:sm:items-start ds:border ds:border-[color:var(--border)] ds:bg-[color:var(--card)]',\n      },\n      size: {\n        sm: 'ds:p-[var(--spacing-sm)]',\n        md: 'ds:p-[var(--spacing-md)]',\n      },\n      state: {\n        unread: '',\n        read: 'ds:bg-transparent',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'compact',\n        state: 'unread',\n        class: 'ds:bg-[color:var(--accent)]/5',\n      },\n      {\n        variant: 'compact',\n        state: 'read',\n        class: 'ds:hover:bg-[color:var(--muted)]/40',\n      },\n      {\n        variant: 'dashboard',\n        state: 'unread',\n        class: 'ds:bg-[color:var(--accent)]/5',\n      },\n    ],\n    defaultVariants: {\n      variant: 'compact',\n      size: 'sm',\n      state: 'read',\n    },\n  },\n);\n\nconst stretchedLinkClass = [\n  'ds:focus-visible:outline-none',\n  \"ds:after:content-[''] ds:after:absolute ds:after:inset-0 ds:after:rounded-[var(--radius-sm)]\",\n  'ds:after:pointer-events-auto',\n  'ds:focus-visible:after:outline-[length:var(--focus-ring-width)]',\n  'ds:focus-visible:after:outline-solid',\n  'ds:focus-visible:after:outline-[color:var(--ring)]',\n  'ds:focus-visible:after:outline-offset-[length:var(--focus-ring-offset)]',\n  'ds:forced-colors:focus-visible:after:outline-[CanvasText]',\n].join(' ');\n\n/* ------------------------------------------------------------------ */\n/* Helpers                                                             */\n/* ------------------------------------------------------------------ */\n\nexport function isSafeMessageUrl(url: string): boolean {\n  // Reject protocol-relative (//host), javascript:, data:, mailto: etc.\n  // Only http(s), same-origin absolute paths (/), and hash (#) anchors pass.\n  return /^(https?:\\/\\/(?!\\/)|\\/(?!\\/)|#)/.test(url);\n}\n\n/* ------------------------------------------------------------------ */\n/* Component                                                           */\n/* ------------------------------------------------------------------ */\n\nexport const MessageCard = forwardRef<HTMLDivElement, MessageCardProps>(\n  (\n    {\n      item,\n      variant = 'compact',\n      size = 'sm',\n      onActivate,\n      onDismiss,\n      ctaLabel,\n      dismissLabel,\n      leaving,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { t, i18n } = useTranslation();\n\n    const accessibleTime = useMemo(() => {\n      const date = new Date(item.sentAt);\n      if (Number.isNaN(date.getTime())) return '';\n      return new Intl.DateTimeFormat(i18n.language, {\n        dateStyle: 'medium',\n        timeStyle: 'short',\n      }).format(date);\n    }, [item.sentAt, i18n.language]);\n\n    const isControlledLeaving = leaving !== undefined;\n    const [isLeaving, setIsLeaving] = useState(false);\n    const dismissTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    const effectiveLeaving = isControlledLeaving ? leaving : isLeaving;\n\n    const prefersReducedMotion =\n      typeof window !== 'undefined' &&\n      typeof window.matchMedia === 'function' &&\n      window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n    const handleDismiss = useCallback(() => {\n      if (!onDismiss) return;\n      if (isControlledLeaving || prefersReducedMotion) {\n        onDismiss(item);\n        return;\n      }\n      setIsLeaving(true);\n      if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);\n      const raw =\n        (typeof window !== 'undefined' &&\n          window\n            .getComputedStyle(document.documentElement)\n            .getPropertyValue('--animation-duration')) ||\n        '200ms';\n      const ms = raw.trim().endsWith('ms')\n        ? parseFloat(raw)\n        : parseFloat(raw) * 1000;\n      dismissTimerRef.current = setTimeout(\n        () => onDismiss(item),\n        Number.isFinite(ms) ? ms : 200,\n      );\n    }, [onDismiss, item, isControlledLeaving, prefersReducedMotion]);\n\n    const state = item.read ? 'read' : 'unread';\n\n    const unreadSuffix = item.read\n      ? ''\n      : t('ui.messageCard.unreadSuffix', ', unread');\n    const subjectFragment = item.subject\n      ? t('ui.messageCard.subjectFragment', {\n          subject: item.subject,\n          defaultValue: ' — {{subject}}',\n        })\n      : '';\n    const ariaLabel = t('ui.messageCard.itemLabel', {\n      sender: item.sender.name,\n      subjectFragment,\n      time: accessibleTime,\n      unreadSuffix,\n      defaultValue:\n        'Message from {{sender}}{{subjectFragment}}, {{time}}{{unreadSuffix}}',\n    });\n\n    const hasSafeUrl = !!item.url && isSafeMessageUrl(item.url);\n\n    /* ------- Sender-name rendering (stretched link in compact mode) ------ */\n\n    const senderText = (\n      <span\n        className={[\n          'ds:flex-1 ds:min-w-0 ds:truncate',\n          item.read ? 'ds:font-normal' : 'ds:font-semibold',\n        ].join(' ')}\n      >\n        {item.sender.name}\n      </span>\n    );\n\n    let senderNode: ReactNode;\n    if (variant === 'compact' && hasSafeUrl && onActivate) {\n      senderNode = (\n        <a\n          href={item.url}\n          aria-label={ariaLabel}\n          className={stretchedLinkClass + ' ds:contents'}\n          onClick={(event) => {\n            if (\n              event.defaultPrevented ||\n              event.metaKey ||\n              event.ctrlKey ||\n              event.shiftKey\n            )\n              return;\n            onActivate(item);\n          }}\n        >\n          {senderText}\n        </a>\n      );\n    } else if (variant === 'compact' && onActivate) {\n      senderNode = (\n        <button\n          type=\"button\"\n          aria-label={ariaLabel}\n          className={stretchedLinkClass + ' ds:contents ds:bg-transparent ds:border-0 ds:p-0'}\n          onClick={() => onActivate(item)}\n        >\n          {senderText}\n        </button>\n      );\n    } else if (variant === 'dashboard' && hasSafeUrl && onActivate) {\n      senderNode = (\n        <a\n          href={item.url}\n          className=\"ds:text-[color:var(--foreground)] ds:no-underline ds:hover:underline ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]\"\n          onClick={(event) => {\n            if (\n              event.defaultPrevented ||\n              event.metaKey ||\n              event.ctrlKey ||\n              event.shiftKey\n            )\n              return;\n            onActivate(item);\n          }}\n        >\n          {senderText}\n        </a>\n      );\n    } else {\n      senderNode = senderText;\n    }\n\n    const showThreadCount =\n      typeof item.unreadCount === 'number' && item.unreadCount > 1;\n\n    return (\n      <div\n        ref={ref}\n        role=\"listitem\"\n        data-component=\"message-card\"\n        data-component-id={item.id}\n        data-read={item.read ? 'true' : 'false'}\n        data-leaving={effectiveLeaving ? 'true' : undefined}\n        aria-hidden={effectiveLeaving || undefined}\n        className={cardVariants({ variant, size, state, className })}\n        {...rest}\n      >\n        {/* Avatar is decorative here — the row's assembled `aria-label`\n            already names the sender, so letting Avatar contribute its own\n            `role=\"img\"` + `aria-label={name}` would announce the name twice\n            per row. `aria-hidden` + `role=\"presentation\"` (spread last, so\n            they win over Avatar's internal values) pulls the element out of\n            the a11y tree entirely. */}\n        <Avatar\n          name={item.sender.name}\n          src={item.sender.avatarUrl}\n          size={size === 'md' ? 'md' : 'sm'}\n          className=\"ds:shrink-0\"\n          aria-hidden=\"true\"\n          role=\"presentation\"\n          aria-label={undefined}\n        />\n\n        <div className=\"ds:flex-1 ds:min-w-0 ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]\">\n          <div className=\"ds:flex ds:items-center ds:gap-[var(--spacing-xs)]\">\n            {!item.read ? (\n              <span\n                aria-hidden=\"true\"\n                className=\"ds:inline-block ds:size-1.5 ds:shrink-0 ds:rounded-[var(--radius-full)] ds:bg-[color:var(--primary)] ds:forced-colors:bg-[Highlight]\"\n              />\n            ) : null}\n            {variant === 'dashboard' ? (\n              <h3 className=\"ds:m-0 ds:flex-1 ds:min-w-0 type-title-item\">\n                {senderNode}\n              </h3>\n            ) : (\n              <span className=\"ds:flex-1 ds:min-w-0 type-title-item ds:text-[color:var(--foreground)]\">\n                {senderNode}\n              </span>\n            )}\n            {showThreadCount ? (\n              <span\n                aria-label={t('ui.messageCard.threadCount', {\n                  count: item.unreadCount,\n                  defaultValue_one: '{{count}} new message in thread',\n                  defaultValue_other: '{{count}} new messages in thread',\n                })}\n                className=\"ds:relative ds:z-[1] ds:shrink-0 ds:inline-flex ds:items-center ds:justify-center ds:min-w-[calc(var(--spacing-md)+var(--spacing-xs))] ds:h-[calc(var(--spacing-md)+var(--spacing-xs))] ds:ps-[calc(var(--spacing-xs)/1.5)] ds:pe-[calc(var(--spacing-xs)/1.5)] ds:rounded-[var(--radius-full)] ds:bg-[color:var(--accent)] ds:text-[color:var(--accent-foreground)] ds:text-[length:var(--font-size-xs)] ds:font-semibold ds:leading-none ds:forced-colors:outline ds:forced-colors:outline-1 ds:forced-colors:outline-[CanvasText]\"\n              >\n                {item.unreadCount}\n              </span>\n            ) : null}\n          </div>\n\n          {item.subject ? (\n            <p\n              className={[\n                'ds:m-0 type-body-sm ds:text-[color:var(--foreground)] ds:truncate',\n                item.read ? 'ds:font-normal' : 'ds:font-semibold',\n              ].join(' ')}\n            >\n              {item.subject}\n            </p>\n          ) : null}\n\n          <p className=\"ds:m-0 type-body-sm ds:text-[color:var(--muted-foreground)] ds:[overflow:hidden] ds:[display:-webkit-box] ds:[-webkit-box-orient:vertical] ds:[-webkit-line-clamp:2] ds:break-words\">\n            {item.preview}\n          </p>\n\n          <Timestamp\n            value={item.sentAt}\n            shape=\"chip\"\n            size=\"sm\"\n            relativeWindow={12 * 60 * 60 * 1000}\n          />\n\n          {variant === 'dashboard' && (ctaLabel || dismissLabel) ? (\n            <div className=\"ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-sm)]\">\n              {ctaLabel && hasSafeUrl ? (\n                <Button\n                  intent=\"outline\"\n                  size=\"sm\"\n                  asChild\n                  className=\"ds:relative ds:z-[1]\"\n                >\n                  <a\n                    href={item.url}\n                    onClick={(event) => {\n                      if (\n                        event.defaultPrevented ||\n                        event.metaKey ||\n                        event.ctrlKey ||\n                        event.shiftKey\n                      )\n                        return;\n                      onActivate?.(item);\n                    }}\n                  >\n                    {ctaLabel}\n                  </a>\n                </Button>\n              ) : null}\n              {dismissLabel && onDismiss ? (\n                <Button\n                  intent=\"link\"\n                  size=\"sm\"\n                  onClick={handleDismiss}\n                  className=\"ds:relative ds:z-[1]\"\n                >\n                  {dismissLabel}\n                </Button>\n              ) : null}\n            </div>\n          ) : null}\n        </div>\n\n        {variant === 'compact' && onDismiss ? (\n          <span className=\"ds:relative ds:z-[1] ds:opacity-0 ds:group-hover:opacity-100 ds:group-focus-within:opacity-100 ds:transition-opacity ds:motion-reduce:transition-none\">\n            <IconButton\n              icon={<X />}\n              intent=\"ghost\"\n              size=\"sm\"\n              aria-label={t('ui.messageCard.dismiss', 'Dismiss message')}\n              onClick={handleDismiss}\n            />\n          </span>\n        ) : null}\n      </div>\n    );\n  },\n);\n\nMessageCard.displayName = 'MessageCard';\n"],"names":["cardVariants","cva","stretchedLinkClass","isSafeMessageUrl","url","MessageCard","forwardRef","item","variant","size","onActivate","onDismiss","ctaLabel","dismissLabel","leaving","className","rest","ref","t","i18n","useTranslation","accessibleTime","useMemo","date","isControlledLeaving","isLeaving","setIsLeaving","useState","dismissTimerRef","useRef","effectiveLeaving","prefersReducedMotion","handleDismiss","useCallback","raw","ms","state","unreadSuffix","subjectFragment","ariaLabel","hasSafeUrl","senderText","jsx","senderNode","event","showThreadCount","jsxs","Avatar","Timestamp","Button","IconButton","X"],"mappings":"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"}

package/dist/_chunks/message-card.agent-4IeIgrnJ.js

@@ -0,0 +1,22 @@
+const e = {
+  id: "message-card",
+  capabilities: ["dismiss"],
+  state: {},
+  actions: {},
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "message-card",
+      description: "Marks the element as a kit MessageCard. The card root also emits data-component-id sourced from item.id and data-read with the current read flag."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "item.id",
+      description: "Sourced from item.id — the stable message identifier."
+    }
+  }
+};
+export {
+  e as m
+};
+//# sourceMappingURL=message-card.agent-4IeIgrnJ.js.map

package/dist/_chunks/message-card.agent-4IeIgrnJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-card.agent-4IeIgrnJ.js","sources":["../../src/components/message-card/message-card.agent.ts"],"sourcesContent":["/* -------------------------------------------------------------------- */\n/* Agent adapter — MessageCard.                                           */\n/*                                                                        */\n/* Single-message surface. Lifecycle (dismiss, mark-read) is owned by    */\n/* the consumer / host tray; the card emits a DOM hook so a future MCP   */\n/* UI bridge can address one rendered card by its message id.            */\n/* -------------------------------------------------------------------- */\n\nimport type { AgentAdapter } from '../../agent/types';\n\nexport const messageCardAgent: AgentAdapter = {\n  id: 'message-card',\n  capabilities: ['dismiss'],\n  state: {},\n  actions: {},\n  domHooks: {\n    root: {\n      attr: 'data-component',\n      value: 'message-card',\n      description:\n        'Marks the element as a kit MessageCard. The card root also emits data-component-id sourced from item.id and data-read with the current read flag.',\n    },\n    instanceId: {\n      attr: 'data-component-id',\n      sourceProp: 'item.id',\n      description: 'Sourced from item.id — the stable message identifier.',\n    },\n  },\n};\n"],"names":["messageCardAgent"],"mappings":"AAUO,MAAMA,IAAiC;AAAA,EAC5C,IAAI;AAAA,EACJ,cAAc,CAAC,SAAS;AAAA,EACxB,OAAO,CAAA;AAAA,EACP,SAAS,CAAA;AAAA,EACT,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aACE;AAAA,IAAA;AAAA,IAEJ,YAAY;AAAA,MACV,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ;"}

package/dist/_chunks/message-tray-xHUCra-Y.js

@@ -0,0 +1,419 @@
+import { jsx as s, jsxs as c, Fragment as L } from "react/jsx-runtime";
+import { forwardRef as de, useState as q, useCallback as F, useLayoutEffect as oe, useEffect as H, useRef as p, useMemo as ce, useImperativeHandle as le } from "react";
+import * as b from "@radix-ui/react-popover";
+import { c as k } from "./index-D2ZczOXr.js";
+import { useTranslation as W } from "react-i18next";
+import { I as me } from "./icon-button-Wnnde5lc.js";
+import { B as _ } from "./button-7mLWcMp_.js";
+import { S as U } from "./separator-B4wXDLNC.js";
+import { S as g } from "./skeleton-dtqyF09N.js";
+import { M as ue } from "./message-card-qhoGv947.js";
+import { u as pe } from "./registry-C9nwlNyL.js";
+import { M as Y } from "./mail-C8irm52s.js";
+const ge = {
+  id: "message-tray",
+  capabilities: ["open", "close", "select_single", "dismiss"],
+  state: {
+    items: {
+      type: "Array<{ id: string; read: boolean }>",
+      descriptionKey: "ui.agent.messageTray.state.items",
+      description: "Currently-displayed messages. Ids + read flag only — no PHI / no sender names.",
+      read: (a) => a.getItems()
+    },
+    unreadCount: {
+      type: "number",
+      descriptionKey: "ui.agent.messageTray.state.unreadCount",
+      description: "Badge unread count surfaced by the host.",
+      read: (a) => a.getUnreadCount()
+    },
+    isOpen: {
+      type: "boolean",
+      descriptionKey: "ui.agent.messageTray.state.isOpen",
+      description: "Whether the dropdown panel is currently open.",
+      read: (a) => a.isOpen()
+    }
+  },
+  actions: {
+    open: {
+      safety: "read",
+      descriptionKey: "ui.agent.messageTray.actions.open",
+      description: "Open the message panel.",
+      invoke: (a) => {
+        a.open();
+      }
+    },
+    close: {
+      safety: "read",
+      descriptionKey: "ui.agent.messageTray.actions.close",
+      description: "Close the message panel.",
+      invoke: (a) => {
+        a.close();
+      }
+    },
+    select_item: {
+      safety: "read",
+      argsType: "{ id: string }",
+      descriptionKey: "ui.agent.messageTray.actions.selectItem",
+      description: "Activate the message with the given id.",
+      invoke: (a, t) => {
+        a.selectItem(t.id);
+      }
+    },
+    mark_read: {
+      safety: "write",
+      argsType: "{ id: string }",
+      descriptionKey: "ui.agent.messageTray.actions.markRead",
+      description: "Request the host to mark a message as read.",
+      invoke: (a, t) => {
+        a.markRead(t.id);
+      }
+    },
+    dismiss: {
+      safety: "destructive",
+      argsType: "{ id: string }",
+      descriptionKey: "ui.agent.messageTray.actions.dismiss",
+      description: "Request the host to dismiss / archive the message with the given id.",
+      invoke: (a, t) => {
+        a.dismiss(t.id);
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "message-tray",
+      description: "Marks the MessageTray wrapper."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop. Required to address a specific tray from the agent."
+    },
+    item: {
+      attr: "data-message-id",
+      description: "Stable message id emitted on each rendered MessageCard inside the tray."
+    }
+  }
+}, fe = k("ds:relative ds:inline-flex ds:items-center", {
+  variants: {
+    size: {
+      sm: "",
+      md: ""
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), ve = k(
+  [
+    "ds:flex ds:flex-col",
+    "ds:bg-[var(--popover)] ds:text-[var(--popover-foreground)]",
+    "ds:border ds:border-[color:var(--border)]",
+    "ds:rounded-[var(--radius-md)]",
+    "ds:shadow-[var(--shadow-lg)]",
+    "ds:z-[var(--z-popover)]",
+    // Width: fluid below the design cap so narrow viewports keep a visible
+    // gutter on both sides (shadow included). Cap slightly wider than
+    // NotificationTray because message rows carry subject + preview.
+    "ds:w-[min(26rem,calc(100vw-2*var(--spacing-md)))]",
+    // Height: below the `sm` breakpoint the panel takes a near-full-screen
+    // sheet shape so the user gets room to triage an inbox without
+    // scrolling a tiny popover. `6rem` reserves space for the Header
+    // (≈4rem) plus the sideOffset + collisionPadding (≈2rem). Above `sm`
+    // it returns to `h-auto` so the list's own cap governs the height.
+    "ds:h-[calc(100dvh-6rem)] ds:sm:h-auto",
+    "ds:data-[state=open]:animate-in ds:data-[state=closed]:animate-out",
+    "ds:data-[state=closed]:fade-out-0 ds:data-[state=open]:fade-in-0",
+    "ds:data-[state=closed]:zoom-out-95 ds:data-[state=open]:zoom-in-95",
+    "ds:motion-reduce:transition-none ds:motion-reduce:animate-none",
+    "ds:focus-visible:outline-none",
+    "ds:forced-colors:border-[CanvasText]"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "ds:p-[var(--spacing-xs)]",
+        md: "ds:p-[var(--spacing-sm)]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+), ye = k(
+  [
+    "ds:absolute ds:-top-[var(--spacing-xs)] ds:-end-[var(--spacing-xs)]",
+    "ds:inline-flex ds:items-center ds:justify-center",
+    "ds:min-w-[calc(var(--spacing-md)+var(--spacing-xs))] ds:h-[calc(var(--spacing-md)+var(--spacing-xs))] ds:ps-[calc(var(--spacing-xs)/1.5)] ds:pe-[calc(var(--spacing-xs)/1.5)]",
+    "ds:rounded-[var(--radius-full)]",
+    "ds:bg-[color:var(--destructive)] ds:text-[color:var(--destructive-foreground)]",
+    "ds:text-[length:var(--font-size-xs)] ds:font-semibold ds:leading-none",
+    "ds:pointer-events-none ds:select-none",
+    "ds:forced-colors:outline ds:forced-colors:outline-1 ds:forced-colors:outline-[CanvasText]"
+  ].join(" ")
+);
+function he(a, t) {
+  return a > 99 ? t : String(a);
+}
+function S() {
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "ds:flex ds:items-start ds:gap-[var(--spacing-sm)] ds:p-[var(--spacing-sm)]",
+      children: [
+        /* @__PURE__ */ s(g, { variant: "circular", size: "sm" }),
+        /* @__PURE__ */ c("div", { className: "ds:flex-1 ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
+          /* @__PURE__ */ s(g, { variant: "text", size: "md", width: "60%" }),
+          /* @__PURE__ */ s(g, { variant: "text", size: "sm", width: "80%" }),
+          /* @__PURE__ */ s(g, { variant: "text", size: "sm", width: "95%" }),
+          /* @__PURE__ */ s(g, { variant: "text", size: "sm", width: "30%" })
+        ] })
+      ]
+    }
+  );
+}
+function xe() {
+  const { t: a } = W();
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      className: "ds:flex ds:flex-col ds:items-center ds:justify-center ds:gap-[var(--spacing-xs)] ds:p-[var(--spacing-lg)] ds:text-center",
+      children: [
+        /* @__PURE__ */ s(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "ds:inline-flex ds:items-center ds:justify-center ds:size-10 ds:rounded-[var(--radius-full)] ds:bg-[color:var(--muted)] ds:text-[color:var(--muted-foreground)] ds:[&>svg]:size-5",
+            children: /* @__PURE__ */ s(Y, {})
+          }
+        ),
+        /* @__PURE__ */ s("p", { className: "type-title-item ds:text-[color:var(--foreground)]", children: a("ui.messageTray.noMessages", "No messages") }),
+        /* @__PURE__ */ s("p", { className: "type-meta ds:text-[color:var(--muted-foreground)]", children: a(
+          "ui.messageTray.noMessagesDescription",
+          "Your inbox is clear."
+        ) })
+      ]
+    }
+  );
+}
+const be = de(
+  ({
+    id: a,
+    items: t,
+    unreadCount: T,
+    open: C,
+    onOpenChange: f,
+    onItemClick: m,
+    onDismiss: u,
+    onMarkRead: v,
+    onMarkAllRead: j,
+    loading: G = !1,
+    maxVisible: J,
+    viewAllLabel: I,
+    onViewAll: Q,
+    align: X = "end",
+    side: Z = "bottom",
+    size: w = "md",
+    className: $,
+    ...D
+  }, ee) => {
+    var A;
+    const { t: d } = W(), N = C !== void 0, [se, ae] = q(!1), z = N ? C : se, y = F(
+      (e) => {
+        N || ae(e), f == null || f(e);
+      },
+      [N, f]
+    ), [h, K] = q(
+      () => t.map((e) => ({ item: e, leaving: !1 }))
+    ), O = F(() => {
+      if (typeof window > "u") return 200;
+      const e = window.getComputedStyle(document.documentElement).getPropertyValue("--animation-duration");
+      if (!e) return 200;
+      const r = e.trim(), n = parseFloat(r);
+      return Number.isFinite(n) ? r.endsWith("ms") ? n : n * 1e3 : 200;
+    }, []);
+    oe(() => {
+      K((e) => {
+        const r = new Set(t.map((i) => i.id)), n = new Set(e.map((i) => i.item.id)), o = e.map((i) => {
+          if (r.has(i.item.id)) {
+            const E = t.find((ie) => ie.id === i.item.id);
+            return E ? { item: E, leaving: !1 } : { ...i, leaving: !0 };
+          }
+          return { ...i, leaving: !0 };
+        });
+        for (const i of t)
+          n.has(i.id) || o.push({ item: i, leaving: !1 });
+        return o;
+      });
+    }, [t]), H(() => {
+      if (!h.some((n) => n.leaving)) return;
+      const e = O(), r = setTimeout(() => {
+        K((n) => n.filter((o) => !o.leaving));
+      }, e);
+      return () => clearTimeout(r);
+    }, [h, O]);
+    const M = p(null), V = p((A = t[0]) == null ? void 0 : A.id);
+    H(() => {
+      var n;
+      const e = (n = t[0]) == null ? void 0 : n.id, r = V.current;
+      if (r && e && r !== e && M.current) {
+        const o = t[0];
+        o && !o.read && (M.current.textContent = d(
+          "ui.messageTray.newMessage",
+          {
+            sender: o.sender.name,
+            defaultValue: "New message from {{sender}}"
+          }
+        ));
+      }
+      V.current = e;
+    }, [t, d]);
+    const x = T ?? 0, te = x > 0 ? d("ui.messageTray.triggerLabel", {
+      count: x,
+      defaultValue: "Messages, {{count}} unread"
+    }) : d("ui.messageTray.triggerLabelNone", "Messages, none unread"), re = he(
+      x,
+      d("ui.messageTray.badgeCountOverflow", "99+")
+    ), ne = ve({ size: w }), l = p(t);
+    l.current = t;
+    const P = p(T);
+    P.current = T;
+    const B = p(z);
+    B.current = z;
+    const R = ce(
+      () => ({
+        open: () => y(!0),
+        close: () => y(!1),
+        isOpen: () => B.current,
+        getItems: () => l.current.map((e) => ({ id: e.id, read: !!e.read })),
+        getUnreadCount: () => P.current ?? l.current.filter((e) => !e.read).length,
+        selectItem: (e) => {
+          const r = l.current.find((n) => n.id === e);
+          r && (m == null || m(r));
+        },
+        markRead: (e) => {
+          const r = l.current.find((n) => n.id === e);
+          r && (v == null || v(r));
+        },
+        dismiss: (e) => {
+          const r = l.current.find((n) => n.id === e);
+          r && (u == null || u(r));
+        }
+      }),
+      [y, m, v, u]
+    );
+    return le(ee, () => R, [R]), pe(ge, R, a), /* @__PURE__ */ s(
+      "div",
+      {
+        "data-component": "message-tray",
+        "data-component-id": a,
+        className: [fe({ size: w }), $].filter(Boolean).join(" "),
+        ...D,
+        children: /* @__PURE__ */ c(b.Root, { open: z, onOpenChange: y, children: [
+          /* @__PURE__ */ s(b.Trigger, { asChild: !0, children: /* @__PURE__ */ s(
+            me,
+            {
+              icon: /* @__PURE__ */ s(Y, {}),
+              intent: "outline",
+              size: w === "sm" ? "sm" : "md",
+              "aria-label": te,
+              "aria-haspopup": "dialog"
+            }
+          ) }),
+          x > 0 ? /* @__PURE__ */ s(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-testid": "message-tray-badge",
+              className: ye(),
+              children: re
+            }
+          ) : null,
+          /* @__PURE__ */ s(
+            "div",
+            {
+              ref: M,
+              "aria-live": "polite",
+              "aria-atomic": "true",
+              className: "ds:sr-only"
+            }
+          ),
+          /* @__PURE__ */ s(b.Portal, { children: /* @__PURE__ */ c(
+            b.Content,
+            {
+              role: "dialog",
+              "aria-label": d("ui.messageTray.panelTitle", "Messages"),
+              side: Z,
+              align: X,
+              sideOffset: 8,
+              collisionPadding: 16,
+              className: ne,
+              children: [
+                /* @__PURE__ */ c("div", { className: "ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:pb-[var(--spacing-xs)]", children: [
+                  /* @__PURE__ */ s("h3", { className: "ds:m-0 type-title-card ds:text-[color:var(--foreground)]", children: d("ui.messageTray.panelTitle", "Messages") }),
+                  j && t.some((e) => !e.read) ? /* @__PURE__ */ s(
+                    _,
+                    {
+                      intent: "link",
+                      size: "sm",
+                      onClick: j,
+                      className: "ds:text-[length:var(--font-size-xs)]",
+                      children: d("ui.messageTray.markAllRead", "Mark all as read")
+                    }
+                  ) : null
+                ] }),
+                /* @__PURE__ */ s(U, {}),
+                /* @__PURE__ */ s(
+                  "div",
+                  {
+                    role: "list",
+                    "data-max-visible": J,
+                    className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:overflow-y-auto ds:pt-[var(--spacing-xs)] ds:flex-1 ds:sm:flex-none ds:sm:[max-block-size:var(--message-tray-max-block-size,26rem)]",
+                    children: G ? /* @__PURE__ */ c(L, { children: [
+                      /* @__PURE__ */ s(S, {}),
+                      /* @__PURE__ */ s(S, {}),
+                      /* @__PURE__ */ s(S, {})
+                    ] }) : h.length === 0 ? /* @__PURE__ */ s(xe, {}) : h.map(({ item: e, leaving: r }) => /* @__PURE__ */ s(
+                      ue,
+                      {
+                        item: e,
+                        variant: "compact",
+                        leaving: r,
+                        onActivate: m,
+                        onDismiss: u,
+                        "data-message-id": e.id
+                      },
+                      e.id
+                    ))
+                  }
+                ),
+                I ? /* @__PURE__ */ c(L, { children: [
+                  /* @__PURE__ */ s(U, {}),
+                  /* @__PURE__ */ s("div", { className: "ds:pt-[var(--spacing-xs)]", children: /* @__PURE__ */ s(
+                    _,
+                    {
+                      intent: "link",
+                      size: "sm",
+                      onClick: Q,
+                      className: "ds:w-full ds:justify-center",
+                      children: I
+                    }
+                  ) })
+                ] }) : null
+              ]
+            }
+          ) })
+        ] })
+      }
+    );
+  }
+);
+be.displayName = "MessageTray";
+export {
+  be as M,
+  ge as m
+};
+//# sourceMappingURL=message-tray-xHUCra-Y.js.map