@alfadocs/ui-kit-debug 0.68.0 → 0.70.0

package/dist/_chunks/{notification-card-BiESdm8q.js → notification-card-D2jiKSJJ.js}

@@ -1,12 +1,12 @@
 import { jsx as a, jsxs as n } from "react/jsx-runtime";
 import { forwardRef as M, useMemo as P, useState as R, useRef as B, useCallback as L } from "react";
-import { c as D } from "./index-D2ZczOXr.js";
-import { useTranslation as U } from "react-i18next";
-import { I as W } from "./icon-button-LqoiKcUN.js";
+import { c as _ } from "./index-D2ZczOXr.js";
+import { useTranslation as D } from "react-i18next";
+import { I as U } from "./icon-button-LqoiKcUN.js";
 import { B as N } from "./button-DD_0Xdmr.js";
-import { T as E } from "./timestamp-BV2lC-wV.js";
-import { X as H } from "./x-CCcI3eJp.js";
-const X = D(
+import { T as W } from "./timestamp-BV2lC-wV.js";
+import { X as E } from "./x-CCcI3eJp.js";
+const H = _(
   [
     "ds:relative ds:flex ds:gap-[var(--spacing-sm)]",
     "ds:rounded-[var(--radius-sm)]",
@@ -23,14 +23,18 @@ const X = D(
     "ds:data-[leaving=true]:pointer-events-none",
     "ds:motion-reduce:transition-none",
     "ds:text-start",
-    "ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2",
+    // Compact rows are borderless (flat list — the tray panel is the frame);
+    // the dashboard variant adds its own card border below. Forced-colors keeps
+    // a border on both so rows stay separated in High Contrast Mode.
     "ds:forced-colors:border ds:forced-colors:border-[CanvasText]"
   ].join(" "),
   {
     variants: {
       variant: {
-        compact: "ds:items-start",
-        dashboard: "ds:flex-col ds:sm:flex-row ds:items-stretch ds:sm:items-start ds:border ds:border-[color:var(--card-border)] ds:shadow-[var(--shadow-card)] ds:bg-[color:var(--card)]"
+        // Flat rows by default; the accessible (AAA) theme restores a hairline
+        // row divider so consecutive rows keep a visible boundary.
+        compact: "ds:items-start ds:[.theme-accessible_&]:border-b ds:[.theme-accessible_&]:border-[color:var(--card-border)]",
+        dashboard: "ds:flex-col ds:sm:flex-row ds:items-stretch ds:sm:items-start ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2 ds:shadow-[var(--shadow-card)] ds:bg-[color:var(--card)]"
       },
       size: {
         sm: "ds:p-[var(--spacing-sm)]",
@@ -74,7 +78,7 @@ const X = D(
   "ds:focus-visible:after:outline-offset-[length:var(--focus-ring-offset)]",
   "ds:forced-colors:focus-visible:after:outline-[CanvasText]"
 ].join(" ");
-function _(e) {
+function X(e) {
   return /^(https?:\/\/(?!\/)|\/(?!\/)|#)/.test(e);
 }
 const q = M(
@@ -90,15 +94,15 @@ const q = M(
     className: z,
     ...T
   }, K) => {
-    const { t: u, i18n: v } = U(), S = P(() => {
+    const { t: u, i18n: v } = D(), S = P(() => {
       const s = new Date(e.createdAt);
       return Number.isNaN(s.getTime()) ? "" : new Intl.DateTimeFormat(v.language, {
         dateStyle: "medium",
         timeStyle: "short"
       }).format(s);
-    }, [e.createdAt, v.language]), f = h !== void 0, [j, V] = R(!1), m = B(null), g = f ? h : j, b = typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, w = L(() => {
+    }, [e.createdAt, v.language]), f = h !== void 0, [j, V] = R(!1), m = B(null), b = f ? h : j, g = typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, w = L(() => {
       if (!d) return;
-      if (f || b) {
+      if (f || g) {
         d(e);
         return;
       }
@@ -108,12 +112,12 @@ const q = M(
         () => d(e),
         Number.isFinite(y) ? y : 200
       );
-    }, [d, e, f, b]), F = e.read ? "read" : "unread", I = e.read ? "" : u("notificationCard.unreadSuffix", ", unread"), x = u("notificationCard.itemLabel", {
+    }, [d, e, f, g]), F = e.read ? "read" : "unread", I = e.read ? "" : u("notificationCard.unreadSuffix", ", unread"), x = u("notificationCard.itemLabel", {
       title: e.title,
       time: S,
       unreadSuffix: I,
       defaultValue: "{{title}}, {{time}}{{unreadSuffix}}"
-    }), p = !!e.url && _(e.url), i = /* @__PURE__ */ a(
+    }), p = !!e.url && X(e.url), i = /* @__PURE__ */ a(
       "span",
       {
         className: [
@@ -162,9 +166,9 @@ const q = M(
         "data-component": "notification-card",
         "data-component-id": e.id,
         "data-read": e.read ? "true" : "false",
-        "data-leaving": g ? "true" : void 0,
-        "aria-hidden": g || void 0,
-        className: X({ variant: t, size: k, state: F, className: z }),
+        "data-leaving": b ? "true" : void 0,
+        "aria-hidden": b || void 0,
+        className: H({ variant: t, size: k, state: F, className: z }),
         ...T,
         children: [
           e.icon ? /* @__PURE__ */ a(
@@ -192,7 +196,7 @@ const q = M(
             ] }),
             e.description ? /* @__PURE__ */ a("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", children: e.description }) : null,
             /* @__PURE__ */ a(
-              E,
+              W,
               {
                 value: e.createdAt,
                 shape: "chip",
@@ -233,9 +237,9 @@ const q = M(
             ] }) : null
           ] }),
           t === "compact" && d ? /* @__PURE__ */ a("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", children: /* @__PURE__ */ a(
-            W,
+            U,
             {
-              icon: /* @__PURE__ */ a(H, {}),
+              icon: /* @__PURE__ */ a(E, {}),
               intent: "ghost",
               size: "sm",
               "aria-label": u("notificationCard.dismiss", "Dismiss notification"),
@@ -250,6 +254,6 @@ const q = M(
 q.displayName = "NotificationCard";
 export {
   q as N,
-  _ as i
+  X as i
 };
-//# sourceMappingURL=notification-card-BiESdm8q.js.map
+//# sourceMappingURL=notification-card-D2jiKSJJ.js.map

package/dist/_chunks/notification-card-D2jiKSJJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-card-D2jiKSJJ.js","sources":["../../src/components/notification-card/notification-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 { Timestamp } from '../timestamp';\n\n/* ------------------------------------------------------------------ */\n/* Types                                                               */\n/* ------------------------------------------------------------------ */\n\nexport interface NotificationItem {\n  /** Unique identifier for the notification. */\n  id: string;\n  /** Notification title — rendered on the first line. */\n  title: string;\n  /** Notification body — rendered as plain text. */\n  description?: string;\n  /** Optional leading glyph — a React node (usually a Lucide icon). */\n  icon?: ReactNode;\n  /** Optional action URL — when present the card title is an anchor. */\n  url?: string;\n  /** ISO-8601 timestamp of when the notification was created. */\n  createdAt: string;\n  /** Whether the notification has been seen. Unread items get accent styling. */\n  read?: boolean;\n}\n\nexport interface NotificationCardProps\n  extends\n    Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'role' | 'title'>,\n    VariantProps<typeof cardVariants> {\n  /** The notification to render. */\n  item: NotificationItem;\n  /**\n   * Layout shape.\n   * - `compact` — single-line row with the whole card clickable (used by\n   *   NotificationTray).\n   * - `dashboard` — alert-style 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 card title / body is activated. */\n  onActivate?: (item: NotificationItem) => void;\n  /** Fires when the dismiss control is activated. */\n  onDismiss?: (item: NotificationItem) => 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 NotificationTray). 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    // Mount: fade + slide-down so a fresh notification reads as arriving.\n    // `data-leaving=true` plays the matching exit, driven by the owning\n    // tray's AnimatePresence loop.\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    // Pin the exit's end-state until React unmounts. Without `fill-mode-forwards`\n    // tw-animate-css leaves the element at opacity:1 for one paint frame after\n    // the animation ends — the \"flicker before it animates away\" bug.\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    // Compact rows are borderless (flat list — the tray panel is the frame);\n    // the dashboard variant adds its own card border below. Forced-colors keeps\n    // a border on both so rows stay separated in High Contrast Mode.\n    'ds:forced-colors:border ds:forced-colors:border-[CanvasText]',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        // Flat rows by default; the accessible (AAA) theme restores a hairline\n        // row divider so consecutive rows keep a visible boundary.\n        compact:\n          'ds:items-start ds:[.theme-accessible_&]:border-b ds:[.theme-accessible_&]:border-[color:var(--card-border)]',\n        dashboard:\n          'ds:flex-col ds:sm:flex-row ds:items-stretch ds:sm:items-start ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2 ds:shadow-[var(--shadow-card)] 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 isSafeNotificationUrl(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 NotificationCard = forwardRef<\n  HTMLDivElement,\n  NotificationCardProps\n>(\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    // Screen-reader time context — absolute & unambiguous rather than the\n    // visible relative phrase, which drifts and reads less clearly aloud.\n    const accessibleTime = useMemo(() => {\n      const date = new Date(item.createdAt);\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.createdAt, i18n.language]);\n\n    /* Exit animation.\n     * - When `leaving` is undefined (uncontrolled): the card owns the\n     *   fade-out — dismiss click flips `isLeaving`, waits for\n     *   --animation-duration, then fires onDismiss.\n     * - When `leaving` is boolean (controlled, e.g. NotificationTray): the\n     *   parent owns the lifecycle — dismiss click fires onDismiss\n     *   immediately and the parent schedules unmount after the animation. */\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('notificationCard.unreadSuffix', ', unread');\n    const ariaLabel = t('notificationCard.itemLabel', {\n      title: item.title,\n      time: accessibleTime,\n      unreadSuffix,\n      defaultValue: '{{title}}, {{time}}{{unreadSuffix}}',\n    });\n\n    const hasSafeUrl = !!item.url && isSafeNotificationUrl(item.url);\n\n    /* ------- Title rendering (stretched link in compact mode) ------- */\n\n    const titleText = (\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.title}\n      </span>\n    );\n\n    let titleNode: ReactNode;\n    if (variant === 'compact' && hasSafeUrl && onActivate) {\n      titleNode = (\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            event.preventDefault();\n            onActivate(item);\n          }}\n        >\n          {titleText}\n        </a>\n      );\n    } else if (variant === 'compact' && onActivate) {\n      titleNode = (\n        <button\n          type=\"button\"\n          aria-label={ariaLabel}\n          className={\n            stretchedLinkClass +\n            ' ds:contents ds:bg-transparent ds:border-0 ds:p-0'\n          }\n          onClick={() => onActivate(item)}\n        >\n          {titleText}\n        </button>\n      );\n    } else if (variant === 'dashboard' && hasSafeUrl && onActivate) {\n      titleNode = (\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            event.preventDefault();\n            onActivate(item);\n          }}\n        >\n          {titleText}\n        </a>\n      );\n    } else {\n      titleNode = titleText;\n    }\n\n    return (\n      <div\n        ref={ref}\n        role=\"listitem\"\n        data-component=\"notification-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        {item.icon ? (\n          <span\n            aria-hidden=\"true\"\n            className=\"ds:inline-flex ds:shrink-0 ds:items-center ds:justify-center ds:size-8 ds:rounded-[var(--radius-full)] ds:bg-[color:var(--accent)]/10 ds:text-[color:var(--accent)] ds:[&>svg]:size-4\"\n          >\n            {item.icon}\n          </span>\n        ) : null}\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` keeps the dashboard heading ladder continuous:\n              // h1 (page) → h2 (WarningStack + NotificationsPanel) → h3 (notification title).\n              <h3 className=\"ds:m-0 ds:flex-1 ds:min-w-0 type-title-item\">\n                {titleNode}\n              </h3>\n            ) : (\n              <span className=\"ds:flex-1 ds:min-w-0 type-title-item ds:text-[color:var(--foreground)]\">\n                {titleNode}\n              </span>\n            )}\n          </div>\n\n          {item.description ? (\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.description}\n            </p>\n          ) : null}\n\n          <Timestamp\n            value={item.createdAt}\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                      event.preventDefault();\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('notificationCard.dismiss', 'Dismiss notification')}\n              onClick={handleDismiss}\n            />\n          </span>\n        ) : null}\n      </div>\n    );\n  },\n);\n\nNotificationCard.displayName = 'NotificationCard';\n"],"names":["cardVariants","cva","stretchedLinkClass","isSafeNotificationUrl","url","NotificationCard","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","ariaLabel","hasSafeUrl","titleText","jsx","titleNode","event","jsxs","Timestamp","Button","IconButton","X"],"mappings":"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"}

package/dist/_chunks/{notification-card.agent-Rqt3ofk9.js → notification-card.agent-DxGBZb8T.js}

@@ -1,5 +1,9 @@
 const t = {
   id: "notification-card",
+  // `dismiss` is host-delegated: the card itself declares no imperative handle —
+  // the owning NotificationTray (or the consumer) performs the dismiss via its
+  // own handle. The capability is kept to document that a rendered card is
+  // addressable + dismissable through its host. See notification-tray.agent.ts.
   capabilities: ["dismiss"],
   state: {},
   actions: {},
@@ -19,4 +23,4 @@ const t = {
 export {
   t as n
 };
-//# sourceMappingURL=notification-card.agent-Rqt3ofk9.js.map
+//# sourceMappingURL=notification-card.agent-DxGBZb8T.js.map

package/dist/_chunks/notification-card.agent-DxGBZb8T.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-card.agent-DxGBZb8T.js","sources":["../../src/components/notification-card/notification-card.agent.ts"],"sourcesContent":["/* -------------------------------------------------------------------- */\n/* Agent adapter — NotificationCard.                                      */\n/*                                                                        */\n/* Single-notification surface. Lifecycle (dismiss, mark-read) is         */\n/* owned by the consumer / host tray; the card itself simply exposes a    */\n/* DOM hook so a future MCP UI bridge can address one rendered card by    */\n/* its notification id. No imperative handle is declared.                 */\n/* -------------------------------------------------------------------- */\n\nimport type { AgentAdapter } from '../../agent/types';\n\nexport const notificationCardAgent: AgentAdapter = {\n  id: 'notification-card',\n  // `dismiss` is host-delegated: the card itself declares no imperative handle —\n  // the owning NotificationTray (or the consumer) performs the dismiss via its\n  // own handle. The capability is kept to document that a rendered card is\n  // addressable + dismissable through its host. See notification-tray.agent.ts.\n  capabilities: ['dismiss'],\n  state: {},\n  actions: {},\n  domHooks: {\n    root: {\n      attr: 'data-component',\n      value: 'notification-card',\n      description:\n        'Marks the element as a kit NotificationCard. 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 notification identifier.',\n    },\n  },\n};\n"],"names":["notificationCardAgent"],"mappings":"AAWO,MAAMA,IAAsC;AAAA,EACjD,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,EAKJ,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/{notification-tray-DlgenTEe.js → notification-tray-AEun6DN2.js}

@@ -1,24 +1,25 @@
-import { jsx as t, jsxs as c, Fragment as L } from "react/jsx-runtime";
-import { forwardRef as ne, useState as se, useCallback as oe, useEffect as _, useRef as f, useMemo as re, useImperativeHandle as de } from "react";
+import { jsx as t, jsxs as c, Fragment as P } from "react/jsx-runtime";
+import { forwardRef as ne, useState as oe, useCallback as se, useEffect as q, useRef as p, useMemo as re, useImperativeHandle as de } from "react";
 import * as y from "@radix-ui/react-popover";
-import { c as C } from "./index-D2ZczOXr.js";
+import { c as E } from "./index-D2ZczOXr.js";
 import { useTranslation as F } from "react-i18next";
 import { u as ce } from "./use-controllable-state-BiY4xTzM.js";
 import { u as le } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
-import { I as fe } from "./icon-button-LqoiKcUN.js";
-import { B as E } from "./button-DD_0Xdmr.js";
-import { S as q } from "./separator-CYU_bGFn.js";
+import { I as pe } from "./icon-button-LqoiKcUN.js";
+import { B as L } from "./button-DD_0Xdmr.js";
+import { S as _ } from "./separator-CYU_bGFn.js";
 import { S as x } from "./skeleton-CZbwyJAA.js";
-import { N as pe } from "./notification-card-BiESdm8q.js";
-import { u as ue } from "./registry-nPAVE19X.js";
-import { c as me } from "./createLucideIcon-CrFbzy84.js";
+import { C as fe } from "./counter-dRlTNC_y.js";
+import { N as me } from "./notification-card-D2jiKSJJ.js";
+import { u as ue } from "./registry-DvAUVLHh.js";
+import { c as ge } from "./createLucideIcon-CrFbzy84.js";
 /**
  * @license lucide-react v1.8.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ge = [
+const ve = [
   ["path", { d: "M10.268 21a2 2 0 0 0 3.464 0", key: "vwvbt9" }],
   [
     "path",
@@ -27,7 +28,7 @@ const ge = [
       key: "11g9vi"
     }
   ]
-], H = me("bell", ge), ve = {
+], H = ge("bell", ve), he = {
   id: "notification-tray",
   capabilities: ["open", "close", "select_single", "dismiss"],
   state: {
@@ -53,6 +54,7 @@ const ge = [
   actions: {
     open: {
       safety: "read",
+      idempotent: !0,
       descriptionKey: "ui.agent.notificationTray.actions.open",
       description: "Open the notification panel.",
       invoke: (i) => {
@@ -61,6 +63,7 @@ const ge = [
     },
     close: {
       safety: "read",
+      idempotent: !0,
       descriptionKey: "ui.agent.notificationTray.actions.close",
       description: "Close the notification panel.",
       invoke: (i) => {
@@ -70,6 +73,14 @@ const ge = [
     select_item: {
       safety: "read",
       argsType: "{ id: string }",
+      argsSchema: {
+        type: "object",
+        properties: { id: { type: "string" } },
+        required: ["id"]
+      },
+      idempotent: !0,
+      errors: ["No notification matches the given id."],
+      examples: [{ args: { id: "notif-1" } }],
       descriptionKey: "ui.agent.notificationTray.actions.selectItem",
       description: "Activate the notification with the given id.",
       invoke: (i, a) => {
@@ -79,6 +90,14 @@ const ge = [
     mark_read: {
       safety: "write",
       argsType: "{ id: string }",
+      argsSchema: {
+        type: "object",
+        properties: { id: { type: "string" } },
+        required: ["id"]
+      },
+      idempotent: !0,
+      errors: ["No notification matches the given id."],
+      examples: [{ args: { id: "notif-1" } }],
       descriptionKey: "ui.agent.notificationTray.actions.markRead",
       description: "Request the host to mark a notification as read.",
       invoke: (i, a) => {
@@ -88,6 +107,14 @@ const ge = [
     dismiss: {
       safety: "destructive",
       argsType: "{ id: string }",
+      argsSchema: {
+        type: "object",
+        properties: { id: { type: "string" } },
+        required: ["id"]
+      },
+      idempotent: !0,
+      errors: ["No notification matches the given id."],
+      examples: [{ args: { id: "notif-1" } }],
       descriptionKey: "ui.agent.notificationTray.actions.dismiss",
       description: "Request the host to dismiss the notification with the given id.",
       invoke: (i, a) => {
@@ -111,7 +138,7 @@ const ge = [
       description: "Stable notification id emitted on each rendered NotificationCard inside the tray."
     }
   }
-}, he = C(
+}, ye = E(
   "ds:relative ds:inline-flex ds:items-center",
   {
     variants: {
@@ -124,7 +151,7 @@ const ge = [
       size: "md"
     }
   }
-), ye = C(
+), xe = E(
   [
     "ds:flex ds:flex-col",
     "ds:bg-[var(--popover)] ds:text-[var(--popover-foreground)]",
@@ -168,21 +195,7 @@ const ge = [
       size: "md"
     }
   }
-), xe = C(
-  [
-    // Anchored to the top-end corner of the trigger, nudged outward so
-    // the bell icon isn't covered.
-    "ds:absolute ds:-top-[var(--spacing-xs)] ds:-end-[var(--spacing-xs)]",
-    "ds:inline-flex ds:items-center ds:justify-center",
-    // Circle at 1-2 digits; widens into a pill only for "99+".
-    "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(" ")
-);
+), Ne = "ds:absolute ds:-top-[var(--spacing-xs)] ds:-end-[var(--spacing-xs)] ds:pointer-events-none";
 function be(i, a) {
   return i > 99 ? a : String(i);
 }
@@ -203,7 +216,7 @@ function z() {
     }
   );
 }
-function Ne() {
+function Te() {
   const { t: i } = F();
   return /* @__PURE__ */ c(
     "div",
@@ -229,65 +242,65 @@ function Ne() {
     }
   );
 }
-const Te = ne(
+const we = ne(
   ({
     id: i,
     items: a,
-    unseenCount: b,
+    unseenCount: N,
     open: U,
     onOpenChange: W,
-    onItemClick: p,
-    onDismiss: u,
+    onItemClick: f,
+    onDismiss: m,
     onMarkRead: g,
-    onMarkAllRead: R,
-    loading: k = !1,
+    onMarkAllRead: C,
+    loading: S = !1,
     maxVisible: Y,
-    viewAllLabel: S,
+    viewAllLabel: R,
     onViewAll: G,
     align: J = "end",
     side: M = "bottom",
-    size: N = "md",
+    size: b = "md",
     className: Q,
     ...X
   }, Z) => {
-    var B;
+    var A;
     const { t: r } = F(), [$, v] = ce({
       value: U,
       defaultValue: !1,
       onChange: W
-    }), T = $ ?? !1, [m, O] = se(
+    }), T = $ ?? !1, [u, k] = oe(
       () => a.map((e) => ({ item: e, leaving: !1 }))
-    ), I = oe(() => {
+    ), O = se(() => {
       if (typeof window > "u") return 200;
       const e = window.getComputedStyle(document.documentElement).getPropertyValue("--animation-duration");
       if (!e) return 200;
-      const n = e.trim(), s = parseFloat(n);
-      return Number.isFinite(s) ? n.endsWith("ms") ? s : s * 1e3 : 200;
+      const n = e.trim(), o = parseFloat(n);
+      return Number.isFinite(o) ? n.endsWith("ms") ? o : o * 1e3 : 200;
     }, []);
     le(() => {
-      O((e) => {
-        const n = new Set(a.map((o) => o.id)), s = new Set(e.map((o) => o.item.id)), d = e.map((o) => {
-          if (n.has(o.item.id)) {
-            const P = a.find((ae) => ae.id === o.item.id);
-            return P ? { item: P, leaving: !1 } : { ...o, leaving: !0 };
+      k((e) => {
+        const n = new Set(a.map((s) => s.id)), o = new Set(e.map((s) => s.item.id)), d = e.map((s) => {
+          if (n.has(s.item.id)) {
+            const B = a.find((ae) => ae.id === s.item.id);
+            return B ? { item: B, leaving: !1 } : { ...s, leaving: !0 };
           }
-          return { ...o, leaving: !0 };
+          return { ...s, leaving: !0 };
         });
-        for (const o of a)
-          s.has(o.id) || d.push({ item: o, leaving: !1 });
+        for (const s of a)
+          o.has(s.id) || d.push({ item: s, leaving: !1 });
         return d;
       });
-    }, [a]), _(() => {
-      if (!m.some((s) => s.leaving)) return;
-      const e = I(), n = setTimeout(() => {
-        O((s) => s.filter((d) => !d.leaving));
+    }, [a]), q(() => {
+      if (!u.some((o) => o.leaving)) return;
+      const e = O(), n = setTimeout(() => {
+        k((o) => o.filter((d) => !d.leaving));
       }, e);
       return () => clearTimeout(n);
-    }, [m, I]);
-    const w = f(null), j = f((B = a[0]) == null ? void 0 : B.id);
-    _(() => {
-      var s;
-      const e = (s = a[0]) == null ? void 0 : s.id, n = j.current;
+    }, [u, O]);
+    const w = p(null), j = p((A = a[0]) == null ? void 0 : A.id);
+    q(() => {
+      var o;
+      const e = (o = a[0]) == null ? void 0 : o.id, n = j.current;
       if (n && e && n !== e && w.current) {
         const d = a[0];
         d && !d.read && (w.current.textContent = r(
@@ -300,17 +313,17 @@ const Te = ne(
       }
       j.current = e;
     }, [a, r]);
-    const h = b ?? 0, D = h > 0 ? r("notificationTray.triggerLabel", {
+    const h = N ?? 0, D = h > 0 ? r("notificationTray.triggerLabel", {
       count: h,
       defaultValue: "Notifications, {{count}} unread"
     }) : r("notificationTray.triggerLabelNone", "Notifications, none unread"), ee = be(
       h,
       r("notificationTray.badgeCountOverflow", "99+")
-    ), te = ye({ size: N }), l = f(a);
+    ), te = xe({ size: b }), l = p(a);
     l.current = a;
-    const V = f(b);
-    V.current = b;
-    const K = f(T);
+    const I = p(N);
+    I.current = N;
+    const K = p(T);
     K.current = T;
     const ie = re(
       () => ({
@@ -318,47 +331,49 @@ const Te = ne(
         close: () => v(!1),
         isOpen: () => K.current,
         getItems: () => l.current.map((e) => ({ id: e.id, read: !!e.read })),
-        getUnreadCount: () => V.current ?? l.current.filter((e) => !e.read).length,
+        getUnreadCount: () => I.current ?? l.current.filter((e) => !e.read).length,
         selectItem: (e) => {
-          const n = l.current.find((s) => s.id === e);
-          n && (p == null || p(n));
+          const n = l.current.find((o) => o.id === e);
+          n && (f == null || f(n));
         },
         markRead: (e) => {
-          const n = l.current.find((s) => s.id === e);
+          const n = l.current.find((o) => o.id === e);
           n && (g == null || g(n));
         },
         dismiss: (e) => {
-          const n = l.current.find((s) => s.id === e);
-          n && (u == null || u(n));
+          const n = l.current.find((o) => o.id === e);
+          n && (m == null || m(n));
         }
       }),
-      [v, p, g, u]
-    ), A = f(null);
-    return de(Z, () => A.current, []), ue(ve, ie, i), /* @__PURE__ */ t(
+      [v, f, g, m]
+    ), V = p(null);
+    return de(Z, () => V.current, []), ue(he, ie, i), /* @__PURE__ */ t(
       "div",
       {
-        ref: A,
+        ref: V,
         "data-component": "notification-tray",
         "data-component-id": i,
-        className: [he({ size: N }), Q].filter(Boolean).join(" "),
+        className: [ye({ size: b }), Q].filter(Boolean).join(" "),
         ...X,
         children: /* @__PURE__ */ c(y.Root, { open: T, onOpenChange: v, children: [
           /* @__PURE__ */ t(y.Trigger, { asChild: !0, children: /* @__PURE__ */ t(
-            fe,
+            pe,
             {
               icon: /* @__PURE__ */ t(H, {}),
               intent: "outline",
-              size: N === "sm" ? "sm" : "md",
+              size: b === "sm" ? "sm" : "md",
               "aria-label": D,
               "aria-haspopup": "dialog"
             }
           ) }),
           h > 0 ? /* @__PURE__ */ t(
-            "span",
+            fe,
             {
+              variant: "notification",
+              size: "md",
               "aria-hidden": "true",
               "data-testid": "notification-tray-badge",
-              className: xe(),
+              className: Ne,
               children: ee
             }
           ) : null,
@@ -384,52 +399,52 @@ const Te = 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__ */ t("h3", { className: "ds:m-0 type-title-card ds:text-[color:var(--foreground)]", children: r("notificationTray.panelTitle", "Notifications") }),
-                  R && a.some((e) => !e.read) ? /* @__PURE__ */ t(
-                    E,
+                  C && a.some((e) => !e.read) ? /* @__PURE__ */ t(
+                    L,
                     {
                       intent: "link",
                       size: "sm",
-                      onClick: R,
+                      onClick: C,
                       className: "ds:text-[length:var(--font-size-xs)]",
                       children: r("notificationTray.markAllRead", "Mark all as read")
                     }
                   ) : null
                 ] }),
-                /* @__PURE__ */ t(q, {}),
+                /* @__PURE__ */ t(_, {}),
                 /* @__PURE__ */ t(
                   "div",
                   {
-                    role: k || m.length === 0 ? void 0 : "list",
+                    role: S || u.length === 0 ? void 0 : "list",
                     "data-max-visible": Y,
                     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(--notification-tray-max-block-size,24rem)]",
-                    children: k ? /* @__PURE__ */ c(L, { children: [
+                    children: S ? /* @__PURE__ */ c(P, { children: [
                       /* @__PURE__ */ t(z, {}),
                       /* @__PURE__ */ t(z, {}),
                       /* @__PURE__ */ t(z, {})
-                    ] }) : m.length === 0 ? /* @__PURE__ */ t(Ne, {}) : m.map(({ item: e, leaving: n }) => /* @__PURE__ */ t(
-                      pe,
+                    ] }) : u.length === 0 ? /* @__PURE__ */ t(Te, {}) : u.map(({ item: e, leaving: n }) => /* @__PURE__ */ t(
+                      me,
                       {
                         item: e,
                         variant: "compact",
                         leaving: n,
-                        onActivate: p,
-                        onDismiss: u,
+                        onActivate: f,
+                        onDismiss: m,
                         "data-notification-id": e.id
                       },
                       e.id
                     ))
                   }
                 ),
-                S ? /* @__PURE__ */ c(L, { children: [
-                  /* @__PURE__ */ t(q, {}),
+                R ? /* @__PURE__ */ c(P, { children: [
+                  /* @__PURE__ */ t(_, {}),
                   /* @__PURE__ */ t("div", { className: "ds:pt-[var(--spacing-xs)]", children: /* @__PURE__ */ t(
-                    E,
+                    L,
                     {
                       intent: "link",
                       size: "sm",
                       onClick: G,
                       className: "ds:w-full ds:justify-center",
-                      children: S
+                      children: R
                     }
                   ) })
                 ] }) : null
@@ -441,9 +456,9 @@ const Te = ne(
     );
   }
 );
-Te.displayName = "NotificationTray";
+we.displayName = "NotificationTray";
 export {
-  Te as N,
-  ve as n
+  we as N,
+  he as n
 };
-//# sourceMappingURL=notification-tray-DlgenTEe.js.map
+//# sourceMappingURL=notification-tray-AEun6DN2.js.map