@alfadocs/ui-kit-debug 0.71.0 → 0.72.1

package/dist/_chunks/notes-panel-CMyjUXD4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notes-panel-CMyjUXD4.js","sources":["../../node_modules/lucide-react/dist/esm/icons/notebook-pen.mjs","../../src/components/notes-panel/notes-panel.agent.ts","../../src/components/notes-panel/notes-panel.tsx"],"sourcesContent":["/**\n * @license lucide-react v1.22.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.mjs';\n\nconst __iconNode = [\n  [\"path\", { d: \"M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4\", key: \"re6nr2\" }],\n  [\"path\", { d: \"M2 6h4\", key: \"aawbzj\" }],\n  [\"path\", { d: \"M2 10h4\", key: \"l0bgd4\" }],\n  [\"path\", { d: \"M2 14h4\", key: \"1gsvsf\" }],\n  [\"path\", { d: \"M2 18h4\", key: \"1bu2t1\" }],\n  [\n    \"path\",\n    {\n      d: \"M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z\",\n      key: \"pqwjuv\"\n    }\n  ]\n];\nconst NotebookPen = createLucideIcon(\"notebook-pen\", __iconNode);\n\nexport { __iconNode, NotebookPen as default };\n//# sourceMappingURL=notebook-pen.mjs.map\n","/* -------------------------------------------------------------------- */\n/* Agent adapter — NotesPanel.                                            */\n/*                                                                        */\n/* The Notes tool: a composer over a note timeline. The agent reads the   */\n/* timeline STRUCTURE (note ids + pinned / flagged / clinical flags —     */\n/* never the note body or author, both PHI), composes and commits a new   */\n/* note, and toggles a note's pinned / flagged state. `add_note` carries  */\n/* the `phi` safety class: a note body is patient-identifiable clinical   */\n/* content, so the host gates it behind the same confirm-before-act as a  */\n/* destructive write and never auto-confirms. A clinical submission also  */\n/* requires the host's `practice_add_clinical_note` permission (the       */\n/* handle drops it when the gate is closed).                              */\n/* -------------------------------------------------------------------- */\n\nimport type { AgentAdapter } from '../../agent/types';\nimport type { NotesPanelHandle } from './notes-panel';\n\nexport const notesPanelAgent: AgentAdapter<NotesPanelHandle> = {\n  id: 'notes-panel',\n  // 'submit' backs add_note (compose + commit a note). pin / flag are toggles\n  // with no dedicated capability in the closed vocabulary.\n  capabilities: ['submit'],\n  state: {\n    notes: {\n      type: 'Array<{ id?: string; pinned: boolean; flagged: boolean; clinical: boolean }>',\n      descriptionKey: 'ui.agent.notesPanel.state.notes',\n      description:\n        'Timeline note ids + pinned / flagged / clinical flags. Never the note body or author (both PHI).',\n      read: (handle) => handle.getNotes(),\n    },\n    canAddClinical: {\n      type: 'boolean',\n      descriptionKey: 'ui.agent.notesPanel.state.canAddClinical',\n      description:\n        'Whether the current user may write clinical notes (the practice_add_clinical_note permission gate).',\n      read: (handle) => handle.canAddClinical(),\n    },\n  },\n  actions: {\n    add_note: {\n      // Writes a clinical/admin note body — patient-identifiable content. PHI.\n      safety: 'phi',\n      argsType: '{ content: string; clinical: boolean }',\n      argsSchema: {\n        type: 'object',\n        properties: {\n          content: {\n            type: 'string',\n            description:\n              'Note body. Rich HTML for the rich composer, else plain text.',\n          },\n          clinical: {\n            type: 'boolean',\n            description:\n              'Whether the note is clinical. Requires the clinical-note permission; the submission is dropped when the gate is closed.',\n          },\n        },\n        required: ['content', 'clinical'],\n      },\n      openWorld: true,\n      descriptionKey: 'ui.agent.notesPanel.actions.addNote',\n      description:\n        'Compose and commit a new note. A clinical note requires the clinical-note permission (read canAddClinical first).',\n      examples: [\n        {\n          args: { content: 'Patient reported improvement.', clinical: true },\n          note: 'Add a clinical note.',\n        },\n      ],\n      invoke: (handle, args: { content: string; clinical: boolean }) => {\n        handle.addNote(args);\n      },\n    },\n    toggle_pin: {\n      // Re-orders the timeline (pinned notes lead) — reversible view write.\n      safety: 'write',\n      argsType: '{ id: string }',\n      argsSchema: {\n        type: 'object',\n        properties: { id: { type: 'string' } },\n        required: ['id'],\n      },\n      idempotent: false,\n      descriptionKey: 'ui.agent.notesPanel.actions.togglePin',\n      description: 'Toggle the pinned state of the note with the given id.',\n      invoke: (handle, args: { id: string }) => {\n        handle.togglePin(args.id);\n      },\n    },\n    toggle_flag: {\n      safety: 'write',\n      argsType: '{ id: string }',\n      argsSchema: {\n        type: 'object',\n        properties: { id: { type: 'string' } },\n        required: ['id'],\n      },\n      idempotent: false,\n      descriptionKey: 'ui.agent.notesPanel.actions.toggleFlag',\n      description: 'Toggle the flagged state of the note with the given id.',\n      invoke: (handle, args: { id: string }) => {\n        handle.toggleFlag(args.id);\n      },\n    },\n  },\n  domHooks: {\n    root: {\n      attr: 'data-component',\n      value: 'notes-panel',\n      description: 'Marks the NotesPanel region.',\n    },\n    instanceId: {\n      attr: 'data-component-id',\n      sourceProp: 'id',\n      description:\n        'Sourced from the id prop. Required to address a specific notes panel from the agent.',\n    },\n  },\n};\n","import {\n  forwardRef,\n  useCallback,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { useAgentRegistration } from '../../agent/registry';\nimport { notesPanelAgent } from './notes-panel.agent';\nimport { ClinicalNoteCard } from '../clinical-note-card';\nimport type { ClinicalNoteCardProps } from '../clinical-note-card';\nimport { RichTextEditor } from '../rich-text-editor';\nimport type {\n  RichTextEditorHandle,\n  RichTextEditorProps,\n  RichTextEditorToolbar,\n  RedactorFactory,\n} from '../rich-text-editor';\nimport { TextArea } from '../text-area';\nimport { Button } from '../button';\nimport { Checkbox } from '../checkbox';\nimport { NotebookPen } from 'lucide-react';\nimport { PanelHeader } from '../panel-header';\n\n/* ------------------------------------------------------------------ */\n/* NotesPanel — the Notes tool for the Control Room rail.              */\n/*                                                                    */\n/* A composer over an elevated ClinicalNoteCard timeline. Drops       */\n/* into a ControlRoomRail tool `panel`, the patient profile, or the   */\n/* care-plan editor — anywhere notes about the open entity belong.    */\n/* The composer is the kit RichTextEditor by default (degrades to a   */\n/* textarea where Redactor is absent), carries a permission-gated     */\n/* \"clinical note\" toggle, and forwards the editor's AI affordances.  */\n/* The note attaches to whatever entity the host is showing — the     */\n/* host owns the attachment; the panel only emits content + clinical. */\n/* Pinned notes lead; pin / flag are inline per-note toggles.         */\n/* ------------------------------------------------------------------ */\n\n/** One note in the panel — the data subset of `ClinicalNoteCard`. */\nexport type NotesPanelNote = Pick<\n  ClinicalNoteCardProps,\n  | 'id'\n  | 'dateIso'\n  | 'createdAtIso'\n  | 'author'\n  | 'clinical'\n  | 'attachedTo'\n  | 'content'\n  | 'contentFormat'\n  | 'pinned'\n  | 'flagged'\n>;\n\n/**\n * Curated agent handle for NotesPanel. Reads the note timeline's STRUCTURE\n * (ids + pinned / flagged / clinical flags — never the note body or author,\n * both PHI) and drives the composer + per-note toggles. See\n * `notes-panel.agent.ts`.\n */\nexport interface NotesPanelHandle {\n  /** Timeline snapshot — ids + flags only, never note content (PHI). */\n  getNotes: () => Array<{\n    id?: string;\n    pinned: boolean;\n    flagged: boolean;\n    clinical: boolean;\n  }>;\n  /** Whether the composer is mounted (onAddNote is wired). */\n  canAddNote: () => boolean;\n  /** Whether clinical notes may be written (the permission gate). */\n  canAddClinical: () => boolean;\n  /** Commit a new note with explicit content (mirrors the composer's submit). */\n  addNote: (submission: NotesPanelSubmission) => void;\n  /** Toggle a note's pinned state (mirrors onTogglePin). */\n  togglePin: (id: string) => void;\n  /** Toggle a note's flagged state (mirrors onToggleFlag). */\n  toggleFlag: (id: string) => void;\n}\n\n/** Payload handed to `onAddNote` when the composer commits. */\nexport interface NotesPanelSubmission {\n  /** The note body — rich HTML (`composer='rich'`) or plain text. */\n  content: string;\n  /** Whether the \"clinical note\" toggle was set. */\n  clinical: boolean;\n}\n\nexport interface NotesPanelProps extends Omit<\n  HTMLAttributes<HTMLElement>,\n  'title' | 'children'\n> {\n  /**\n   * Stable instance id. Surfaced on the root as `data-component-id` so an\n   * agent / MCP UI bridge can address this specific notes panel.\n   */\n  id?: string;\n  /** Notes to render, newest-first by convention. Pinned notes lead. */\n  notes: NotesPanelNote[];\n  /** Commit a new note. Omit to hide the composer (read-only timeline). */\n  onAddNote?: (submission: NotesPanelSubmission) => void;\n\n  /* ----- Composer ----- */\n  /**\n   * `'rich'` (default) mounts the kit `RichTextEditor` (Redactor; degrades to a\n   * textarea where Redactor is absent). `'plain'` keeps a simple `TextArea` for\n   * lightweight surfaces / deterministic tests.\n   */\n  composer?: 'rich' | 'plain';\n  /** Toolbar preset for the rich composer. Defaults to `'standard'`. */\n  editorToolbar?: RichTextEditorToolbar;\n  /** Inject the Redactor factory for the rich composer (else `window.$R`). */\n  redactor?: RedactorFactory;\n  /** Consumer image-upload endpoint for the rich composer. */\n  imageUploadUrl?: string;\n\n  /* ----- Clinical flag (permission-gated) ----- */\n  /** Show the \"clinical note\" toggle in the composer. Default `true`. */\n  showClinicalToggle?: boolean;\n  /**\n   * Permission gate — when `false` the clinical toggle is disabled and shows\n   * `clinicalGatedReason` on hover/focus. Mirrors platform's\n   * `practice_add_clinical_note` permission. Default `true`.\n   */\n  canAddClinicalNote?: boolean;\n  /** Tooltip shown when the clinical toggle is gated off. */\n  clinicalGatedReason?: string;\n  /** Initial state of the clinical toggle. Default `false`. */\n  defaultClinical?: boolean;\n\n  /* ----- AI assistance (forwarded to RichTextEditor) ----- */\n  onRequestAiDraft?: RichTextEditorProps['onRequestAiDraft'];\n  aiDraftFormat?: RichTextEditorProps['aiDraftFormat'];\n  aiPrivacyNotice?: RichTextEditorProps['aiPrivacyNotice'];\n  onDictate?: RichTextEditorProps['onDictate'];\n  onProofread?: RichTextEditorProps['onProofread'];\n  onAutoFormat?: RichTextEditorProps['onAutoFormat'];\n\n  /* ----- Per-note actions ----- */\n  /** Toggle a note's pinned state — renders an inline pin button per note. */\n  onTogglePin?: (id: string) => void;\n  /** Toggle a note's flagged state — renders an inline flag button per note. */\n  onToggleFlag?: (id: string) => void;\n\n  /* ----- Labels / chrome ----- */\n  /** Panel heading. Defaults to the localised \"Notes\". */\n  title?: string;\n  /** Composer placeholder. */\n  composerPlaceholder?: string;\n  /** Save-button label. */\n  addNoteLabel?: string;\n  /** Rendered when there are no notes. */\n  emptyState?: ReactNode;\n  /** Accessible name for the panel region (defaults to `title`). */\n  'aria-label'?: string;\n}\n\n/** Strip tags / entities to test whether a rich draft holds real content. */\nfunction hasRichContent(html: string): boolean {\n  if (!html) return false;\n  if (/<img\\b/i.test(html)) return true;\n  return (\n    html\n      .replace(/<[^>]*>/g, '')\n      .replace(/&nbsp;/gi, ' ')\n      .trim().length > 0\n  );\n}\n\nexport const NotesPanel = forwardRef<HTMLElement, NotesPanelProps>(\n  function NotesPanel(\n    {\n      id,\n      notes,\n      onAddNote,\n      composer = 'rich',\n      editorToolbar = 'standard',\n      redactor,\n      imageUploadUrl,\n      showClinicalToggle = true,\n      canAddClinicalNote = true,\n      clinicalGatedReason,\n      defaultClinical = false,\n      onRequestAiDraft,\n      aiDraftFormat,\n      aiPrivacyNotice,\n      onDictate,\n      onProofread,\n      onAutoFormat,\n      onTogglePin,\n      onToggleFlag,\n      title,\n      composerPlaceholder,\n      addNoteLabel,\n      emptyState,\n      className,\n      'aria-label': ariaLabel,\n      ...rest\n    },\n    ref,\n  ) {\n    const { t } = useTranslation();\n    const editorRef = useRef<RichTextEditorHandle>(null);\n    const [draft, setDraft] = useState('');\n    const [clinical, setClinical] = useState(defaultClinical);\n\n    const heading = title ?? t('notesPanel.title', { defaultValue: 'Notes' });\n    const headingId = useId();\n    const placeholder =\n      composerPlaceholder ??\n      t('notesPanel.placeholder', { defaultValue: 'Add a note…' });\n    const composerLabel = t('notesPanel.composerLabel', {\n      defaultValue: 'New note',\n    });\n\n    // Live content check: plain reads the draft directly; rich strips the draft\n    // (debounced) for the disabled state but commits from the editor handle.\n    const hasContent =\n      composer === 'rich' ? hasRichContent(draft) : draft.trim().length > 0;\n\n    const commit = useCallback(() => {\n      if (!onAddNote) return;\n      if (composer === 'rich') {\n        const html = editorRef.current?.getHTML() ?? draft;\n        if (!hasRichContent(html)) return;\n        onAddNote({ content: html, clinical });\n        editorRef.current?.clear();\n      } else {\n        const text = draft.trim();\n        if (!text) return;\n        onAddNote({ content: text, clinical });\n      }\n      setDraft('');\n      setClinical(defaultClinical);\n    }, [composer, draft, clinical, defaultClinical, onAddNote]);\n\n    // Pinned notes lead; order within each group is preserved.\n    const ordered = [...notes].sort(\n      (a, b) => Number(b.pinned ?? false) - Number(a.pinned ?? false),\n    );\n\n    /* ----- Agent handle (structural reads + composer / toggles) ----- */\n    const notesRef = useRef(notes);\n    notesRef.current = notes;\n    const onAddNoteRef = useRef(onAddNote);\n    onAddNoteRef.current = onAddNote;\n    const onTogglePinRef = useRef(onTogglePin);\n    onTogglePinRef.current = onTogglePin;\n    const onToggleFlagRef = useRef(onToggleFlag);\n    onToggleFlagRef.current = onToggleFlag;\n    const canAddClinicalRef = useRef(canAddClinicalNote);\n    canAddClinicalRef.current = canAddClinicalNote;\n\n    const rootRef = useRef<HTMLElement>(null);\n    useImperativeHandle(ref, () => rootRef.current as HTMLElement, []);\n\n    const handle = useMemo<NotesPanelHandle>(\n      () => ({\n        // Ids + flags only — never the note body or author (both PHI).\n        getNotes: () =>\n          notesRef.current.map((n) => ({\n            id: n.id,\n            pinned: !!n.pinned,\n            flagged: !!n.flagged,\n            clinical: !!n.clinical,\n          })),\n        canAddNote: () => !!onAddNoteRef.current,\n        canAddClinical: () => canAddClinicalRef.current,\n        addNote: (submission) => {\n          // A clinical submission requires the permission gate to be open.\n          if (submission.clinical && !canAddClinicalRef.current) return;\n          onAddNoteRef.current?.(submission);\n        },\n        togglePin: (noteId) => onTogglePinRef.current?.(noteId),\n        toggleFlag: (noteId) => onToggleFlagRef.current?.(noteId),\n      }),\n      [],\n    );\n    useAgentRegistration(notesPanelAgent, handle, id);\n\n    return (\n      <section\n        ref={rootRef}\n        data-component=\"notes-panel\"\n        data-component-id={id}\n        aria-labelledby={ariaLabel ? undefined : headingId}\n        aria-label={ariaLabel}\n        className={['ds:flex ds:flex-col', className].filter(Boolean).join(' ')}\n        {...rest}\n      >\n        {/* Shared rail header — pins to the top of the panel's scroll region\n            while the composer + note timeline scroll beneath it. The rail\n            injects the favourite / close actions via PanelHeaderActionsProvider. */}\n        <PanelHeader\n          title={heading}\n          icon={<NotebookPen aria-hidden=\"true\" />}\n          headingId={ariaLabel ? undefined : headingId}\n          sticky\n          divider\n        />\n\n        <div className=\"ds:flex ds:flex-col ds:gap-[var(--spacing-md)] ds:p-[var(--spacing-md)]\">\n          {onAddNote ? (\n            <div className=\"ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]\">\n              {composer === 'rich' ? (\n                <RichTextEditor\n                  ref={editorRef}\n                  ariaLabel={composerLabel}\n                  placeholder={placeholder}\n                  toolbar={editorToolbar}\n                  minHeight=\"sm\"\n                  redactor={redactor}\n                  imageUploadUrl={imageUploadUrl}\n                  onChange={({ html }) => setDraft(html)}\n                  onRequestAiDraft={onRequestAiDraft}\n                  aiDraftFormat={aiDraftFormat}\n                  aiPrivacyNotice={aiPrivacyNotice}\n                  onDictate={onDictate}\n                  onProofread={onProofread}\n                  onAutoFormat={onAutoFormat}\n                />\n              ) : (\n                <TextArea\n                  value={draft}\n                  onChange={(event) => setDraft(event.target.value)}\n                  placeholder={placeholder}\n                  autoResize\n                  minRows={2}\n                  maxRows={6}\n                  aria-label={composerLabel}\n                />\n              )}\n              <div\n                className={[\n                  'ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-sm)]',\n                  showClinicalToggle ? 'ds:justify-between' : 'ds:justify-end',\n                ].join(' ')}\n              >\n                {showClinicalToggle ? (\n                  <Checkbox\n                    size=\"sm\"\n                    label={t('notesPanel.clinicalToggle', {\n                      defaultValue: 'Clinical note',\n                    })}\n                    checked={clinical}\n                    onCheckedChange={(next) => setClinical(next === true)}\n                    disabled={!canAddClinicalNote}\n                    disabledReason={\n                      canAddClinicalNote\n                        ? undefined\n                        : (clinicalGatedReason ??\n                          t('notesPanel.clinicalGated', {\n                            defaultValue:\n                              'You do not have permission to write clinical notes.',\n                          }))\n                    }\n                  />\n                ) : null}\n                <Button\n                  type=\"button\"\n                  size=\"sm\"\n                  onClick={commit}\n                  disabled={!hasContent}\n                >\n                  {addNoteLabel ??\n                    t('notesPanel.add', { defaultValue: 'Add note' })}\n                </Button>\n              </div>\n            </div>\n          ) : null}\n\n          {ordered.length > 0 ? (\n            <ul className=\"ds:m-0 ds:flex ds:list-none ds:flex-col ds:gap-[var(--spacing-sm)] ds:p-0\">\n              {ordered.map((note, index) => (\n                <li key={note.id ?? index} className=\"ds:flex ds:flex-col\">\n                  {/* Elevated card per note; the list gap (not a separator)\n                    spaces them. Bodies clamp to five lines with read-more —\n                    the timeline is a read-only display surface. */}\n                  <ClinicalNoteCard\n                    surface=\"elevated\"\n                    truncate\n                    {...note}\n                    onTogglePin={\n                      onTogglePin && note.id\n                        ? () => onTogglePin(note.id as string)\n                        : undefined\n                    }\n                    onToggleFlag={\n                      onToggleFlag && note.id\n                        ? () => onToggleFlag(note.id as string)\n                        : undefined\n                    }\n                  />\n                </li>\n              ))}\n            </ul>\n          ) : (\n            (emptyState ?? (\n              <p className=\"ds:m-0 type-body-sm ds:text-[color:var(--muted-foreground)]\">\n                {t('notesPanel.empty', { defaultValue: 'No notes yet.' })}\n              </p>\n            ))\n          )}\n        </div>\n      </section>\n    );\n  },\n);\n"],"names":["__iconNode","NotebookPen","createLucideIcon","notesPanelAgent","handle","args","hasRichContent","html","NotesPanel","forwardRef","id","notes","onAddNote","composer","editorToolbar","redactor","imageUploadUrl","showClinicalToggle","canAddClinicalNote","clinicalGatedReason","defaultClinical","onRequestAiDraft","aiDraftFormat","aiPrivacyNotice","onDictate","onProofread","onAutoFormat","onTogglePin","onToggleFlag","title","composerPlaceholder","addNoteLabel","emptyState","className","ariaLabel","rest","ref","t","useTranslation","editorRef","useRef","draft","setDraft","useState","clinical","setClinical","heading","headingId","useId","placeholder","composerLabel","hasContent","commit","useCallback","_a","_b","text","ordered","a","b","notesRef","onAddNoteRef","onTogglePinRef","onToggleFlagRef","canAddClinicalRef","rootRef","useImperativeHandle","useMemo","n","submission","noteId","useAgentRegistration","jsxs","jsx","PanelHeader","RichTextEditor","TextArea","event","Checkbox","next","Button","note","index","ClinicalNoteCard"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/_chunks/notification-card-BHJ07FkH.js

@@ -0,0 +1,290 @@
+import { jsx as a, jsxs as l } from "react/jsx-runtime";
+import { forwardRef as W, useMemo as E, useState as H, useRef as X, useCallback as q } from "react";
+import { c as G } from "./index-D2ZczOXr.js";
+import { useTranslation as J } from "react-i18next";
+import { I as O } from "./icon-button-LqoiKcUN.js";
+import { B as K } from "./button-DD_0Xdmr.js";
+import { T as Q } from "./timestamp-BV2lC-wV.js";
+import { X as Y } from "./x-B5YnXwCz.js";
+const Z = G(
+  [
+    // `group` so the hover/focus-revealed close button can react to the whole
+    // row, not just itself.
+    "ds:group ds:relative ds:flex ds:gap-[var(--spacing-sm)]",
+    "ds:rounded-[var(--radius-sm)]",
+    "ds:transition-colors",
+    // Mount: fade + slide-down so a fresh notification reads as arriving.
+    // `data-leaving=true` plays the matching exit, driven by the owning
+    // tray's AnimatePresence loop.
+    "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)]",
+    "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",
+    // Pin the exit's end-state until React unmounts. Without `fill-mode-forwards`
+    // tw-animate-css leaves the element at opacity:1 for one paint frame after
+    // the animation ends — the "flicker before it animates away" bug.
+    "ds:data-[leaving=true]:motion-safe:fill-mode-forwards",
+    "ds:data-[leaving=true]:pointer-events-none",
+    "ds:motion-reduce:transition-none",
+    "ds:text-start",
+    // 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: {
+        // 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)]",
+        md: "ds:p-[var(--spacing-md)]"
+      },
+      state: {
+        unread: "",
+        read: "ds:bg-transparent"
+      },
+      // Compact-row chrome: flat (tray) vs elevated (own card on a rail).
+      // Mirrors AppointmentCard's `surface` so a rail feed of mixed cards
+      // reads consistently.
+      surface: {
+        flat: "",
+        elevated: "ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2 ds:shadow-[var(--shadow-sm)]"
+      }
+    },
+    compoundVariants: [
+      // Compact rows no longer tint the background for unread — the read state
+      // is carried by the icon's corner status ball instead. Both states
+      // share the same neutral hover.
+      {
+        variant: "compact",
+        state: "unread",
+        class: "ds:hover:bg-[color:var(--muted)]/40"
+      },
+      {
+        variant: "compact",
+        state: "read",
+        class: "ds:hover:bg-[color:var(--muted)]/40"
+      },
+      {
+        variant: "dashboard",
+        state: "unread",
+        class: "ds:bg-[color:var(--accent)]/5"
+      }
+    ],
+    defaultVariants: {
+      variant: "compact",
+      size: "sm",
+      state: "read",
+      surface: "flat"
+    }
+  }
+), S = [
+  "ds:focus-visible:outline-none",
+  "ds:after:content-[''] ds:after:absolute ds:after:inset-0 ds:after:rounded-[var(--radius-sm)]",
+  "ds:after:pointer-events-auto",
+  "ds:focus-visible:after:outline-[length:var(--focus-ring-width)]",
+  "ds:focus-visible:after:outline-solid",
+  "ds:focus-visible:after:outline-[color:var(--ring)]",
+  "ds:focus-visible:after:outline-offset-[length:var(--focus-ring-offset)]",
+  "ds:forced-colors:focus-visible:after:outline-[CanvasText]"
+].join(" ");
+function A(s) {
+  return /^(https?:\/\/(?!\/)|\/(?!\/)|#)/.test(s);
+}
+const ss = W(
+  ({
+    item: s,
+    variant: r = "compact",
+    surface: j = "flat",
+    size: v = "sm",
+    onActivate: o,
+    onToggleRead: b,
+    onDismiss: d,
+    ctaLabel: c,
+    dismissLabel: u,
+    leaving: g,
+    className: M,
+    ...V
+  }, _) => {
+    const { t: n, i18n: h } = J(), B = E(() => {
+      const e = new Date(s.createdAt);
+      return Number.isNaN(e.getTime()) ? "" : new Intl.DateTimeFormat(h.language, {
+        dateStyle: "medium",
+        timeStyle: "short"
+      }).format(e);
+    }, [s.createdAt, h.language]), f = g !== void 0, [I, P] = H(!1), m = X(null), x = f ? g : I, w = typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, y = q(() => {
+      if (!d) return;
+      if (f || w) {
+        d(s);
+        return;
+      }
+      P(!0), m.current && clearTimeout(m.current);
+      const e = typeof window < "u" && window.getComputedStyle(document.documentElement).getPropertyValue("--animation-duration") || "200ms", T = e.trim().endsWith("ms") ? parseFloat(e) : parseFloat(e) * 1e3;
+      m.current = setTimeout(
+        () => d(s),
+        Number.isFinite(T) ? T : 200
+      );
+    }, [d, s, f, w]), R = s.read ? "read" : "unread", $ = s.read ? "" : n("notificationCard.unreadSuffix", ", unread"), N = n("notificationCard.itemLabel", {
+      title: s.title,
+      time: B,
+      unreadSuffix: $,
+      defaultValue: "{{title}}, {{time}}{{unreadSuffix}}"
+    }), p = !!s.url && A(s.url), F = v === "md" ? "ds:top-[var(--spacing-md)] ds:end-[var(--spacing-md)]" : "ds:top-[var(--spacing-sm)] ds:end-[var(--spacing-sm)]", C = "ds:absolute ds:top-[calc(var(--spacing-xs)*-1)] ds:end-[calc(var(--spacing-xs)*-1)] ds:z-[1]", D = "ds:block ds:size-[calc(var(--spacing-sm)+var(--spacing-xs))] ds:rounded-[var(--radius-full)] ds:bg-[color:var(--primary)] ds:ring-2 ds:ring-[color:var(--card)] ds:forced-colors:bg-[Highlight]", L = "ds:block ds:size-[calc(var(--spacing-sm)+var(--spacing-xs))] ds:rounded-[var(--radius-full)] ds:bg-[color:var(--card)] ds:border-2 ds:border-[color:color-mix(in_srgb,var(--muted-foreground)_55%,transparent)] ds:forced-colors:border-[CanvasText]", U = 'ds:cursor-pointer ds:outline-none 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)] ds:forced-colors:focus-visible:outline-[CanvasText] ds:before:absolute ds:before:inset-x-[calc((var(--min-target-size)-100%)/-2)] ds:before:inset-y-[calc((var(--min-target-size)-100%)/-2)] ds:before:content-[""] ds:sm:before:hidden', k = s.read ? L : D, z = r !== "compact" ? null : b ? /* @__PURE__ */ a(
+      "button",
+      {
+        type: "button",
+        onClick: () => b(s),
+        "aria-label": s.read ? n("notificationCard.markAsUnread", "Mark as unread") : n("notificationCard.markAsRead", "Mark as read"),
+        className: `${C} ${k} ${U}`
+      }
+    ) : /* @__PURE__ */ a("span", { "aria-hidden": "true", className: `${C} ${k}` }), i = /* @__PURE__ */ a(
+      "span",
+      {
+        className: [
+          "ds:flex-1 ds:min-w-0 ds:truncate",
+          s.read ? "ds:font-normal" : "ds:font-semibold"
+        ].join(" "),
+        children: s.title
+      }
+    );
+    let t;
+    return r === "compact" && p && o ? t = /* @__PURE__ */ a(
+      "a",
+      {
+        href: s.url,
+        "aria-label": N,
+        className: S + " ds:contents",
+        onClick: (e) => {
+          e.defaultPrevented || e.metaKey || e.ctrlKey || e.shiftKey || (e.preventDefault(), o(s));
+        },
+        children: i
+      }
+    ) : r === "compact" && o ? t = /* @__PURE__ */ a(
+      "button",
+      {
+        type: "button",
+        "aria-label": N,
+        className: S + " ds:contents ds:bg-transparent ds:border-0 ds:p-0",
+        onClick: () => o(s),
+        children: i
+      }
+    ) : r === "dashboard" && p && o ? t = /* @__PURE__ */ a(
+      "a",
+      {
+        href: s.url,
+        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)]",
+        onClick: (e) => {
+          e.defaultPrevented || e.metaKey || e.ctrlKey || e.shiftKey || (e.preventDefault(), o(s));
+        },
+        children: i
+      }
+    ) : t = i, /* @__PURE__ */ l(
+      "div",
+      {
+        ref: _,
+        role: "listitem",
+        "data-component": "notification-card",
+        "data-component-id": s.id,
+        "data-read": s.read ? "true" : "false",
+        "data-leaving": x ? "true" : void 0,
+        "aria-hidden": x || void 0,
+        className: Z({
+          variant: r,
+          size: v,
+          state: R,
+          // Elevated chrome only applies to the compact row; the dashboard
+          // variant brings its own border + shadow.
+          surface: r === "compact" ? j : "flat",
+          className: M
+        }),
+        ...V,
+        children: [
+          s.icon || z ? /* @__PURE__ */ l("span", { className: "ds:relative ds:size-8 ds:shrink-0", children: [
+            s.icon ? /* @__PURE__ */ a(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "ds:inline-flex ds:size-8 ds:items-center ds:justify-center ds:rounded-[var(--radius-full)] ds:bg-[color:var(--accent)]/10 ds:text-[color:var(--accent)] ds:[&>svg]:size-4",
+                children: s.icon
+              }
+            ) : null,
+            z
+          ] }) : null,
+          /* @__PURE__ */ l("div", { className: "ds:flex-1 ds:min-w-0 ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
+            /* @__PURE__ */ a("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-sm)]", children: r === "dashboard" ? (
+              // `h3` keeps the dashboard heading ladder continuous:
+              // h1 (page) → h2 (WarningStack + NotificationsPanel) → h3 (notification title).
+              /* @__PURE__ */ a("h3", { className: "ds:m-0 ds:flex-1 ds:min-w-0 type-title-item", children: t })
+            ) : /* @__PURE__ */ a("span", { className: "ds:flex-1 ds:min-w-0 type-title-item ds:text-[color:var(--foreground)]", children: t }) }),
+            s.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: s.description }) : null,
+            /* @__PURE__ */ a(
+              Q,
+              {
+                value: s.createdAt,
+                shape: "chip",
+                size: "sm",
+                relativeWindow: 720 * 60 * 1e3
+              }
+            ),
+            r === "dashboard" && (c || u) ? /* @__PURE__ */ l("div", { className: "ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-sm)]", children: [
+              c && p ? /* @__PURE__ */ a(
+                K,
+                {
+                  intent: "outline",
+                  size: "sm",
+                  asChild: !0,
+                  className: "ds:relative ds:z-[1]",
+                  children: /* @__PURE__ */ a(
+                    "a",
+                    {
+                      href: s.url,
+                      onClick: (e) => {
+                        e.defaultPrevented || e.metaKey || e.ctrlKey || e.shiftKey || (e.preventDefault(), o == null || o(s));
+                      },
+                      children: c
+                    }
+                  )
+                }
+              ) : null,
+              u && d ? /* @__PURE__ */ a(
+                K,
+                {
+                  intent: "link",
+                  size: "sm",
+                  onClick: y,
+                  className: "ds:relative ds:z-[1]",
+                  children: u
+                }
+              ) : null
+            ] }) : null
+          ] }),
+          r === "compact" && d ? /* @__PURE__ */ a(
+            "span",
+            {
+              className: "ds:absolute ds:z-[2] ds:opacity-0 ds:pointer-events-none ds:transition-opacity ds:motion-reduce:transition-none ds:group-hover:opacity-100 ds:group-hover:pointer-events-auto ds:group-focus-within:opacity-100 ds:group-focus-within:pointer-events-auto " + F,
+              children: /* @__PURE__ */ a(
+                O,
+                {
+                  icon: /* @__PURE__ */ a(Y, {}),
+                  intent: "ghost",
+                  size: "sm",
+                  "aria-label": n("notificationCard.dismiss", "Dismiss notification"),
+                  onClick: y
+                }
+              )
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+ss.displayName = "NotificationCard";
+export {
+  ss as N,
+  A as i
+};
+//# sourceMappingURL=notification-card-BHJ07FkH.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"notification-card-BHJ07FkH.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  /**\n   * Row chrome for the `compact` variant (ignored for `dashboard`, which\n   * always carries its own card border). `'flat'` (default) — chrome-less row\n   * for use inside a bordered tray. `'elevated'` — each row carries its own\n   * card chrome (border + `--shadow-sm`), matching `AppointmentCard` /\n   * `ClinicalNoteCard` for placing rows directly on a rail (e.g. the Inbox).\n   */\n  surface?: 'flat' | 'elevated';\n  /** Visual density. */\n  size?: 'sm' | 'md';\n  /** Fires when the card title / body is activated. */\n  onActivate?: (item: NotificationItem) => void;\n  /**\n   * Fires when the read/unread status ball (the corner badge on the category\n   * icon) is activated. Supply to make the ball an interactive toggle; omit and\n   * it renders as a static read-state indicator.\n   */\n  onToggleRead?: (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    // `group` so the hover/focus-revealed close button can react to the whole\n    // row, not just itself.\n    'ds:group 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      // Compact-row chrome: flat (tray) vs elevated (own card on a rail).\n      // Mirrors AppointmentCard's `surface` so a rail feed of mixed cards\n      // reads consistently.\n      surface: {\n        flat: '',\n        elevated:\n          'ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2 ds:shadow-[var(--shadow-sm)]',\n      },\n    },\n    compoundVariants: [\n      // Compact rows no longer tint the background for unread — the read state\n      // is carried by the icon's corner status ball instead. Both states\n      // share the same neutral hover.\n      {\n        variant: 'compact',\n        state: 'unread',\n        class: 'ds:hover:bg-[color:var(--muted)]/40',\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      surface: 'flat',\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      surface = 'flat',\n      size = 'sm',\n      onActivate,\n      onToggleRead,\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    // Close insets track the card padding so it aligns with the title's first\n    // line at either size.\n    const closeInset =\n      size === 'md'\n        ? 'ds:top-[var(--spacing-md)] ds:end-[var(--spacing-md)]'\n        : 'ds:top-[var(--spacing-sm)] ds:end-[var(--spacing-sm)]';\n\n    // Compact \"status ball\" — a corner badge on the category icon carrying\n    // read/unread. Replaces the old inline Mail toggle so a variable-width\n    // indicator no longer ragged-edges the titles.\n    const ballPos =\n      'ds:absolute ds:top-[calc(var(--spacing-xs)*-1)] ds:end-[calc(var(--spacing-xs)*-1)] ds:z-[1]';\n    const ballDot =\n      'ds:block ds:size-[calc(var(--spacing-sm)+var(--spacing-xs))] ds:rounded-[var(--radius-full)] ds:bg-[color:var(--primary)] ds:ring-2 ds:ring-[color:var(--card)] ds:forced-colors:bg-[Highlight]';\n    const ballRing =\n      'ds:block ds:size-[calc(var(--spacing-sm)+var(--spacing-xs))] ds:rounded-[var(--radius-full)] ds:bg-[color:var(--card)] ds:border-2 ds:border-[color:color-mix(in_srgb,var(--muted-foreground)_55%,transparent)] ds:forced-colors:border-[CanvasText]';\n    // Interactive ball gets the kit focus ring + pointer cursor (a bare\n    // <button> falls back to the browser default outline). The transparent\n    // ::before grows the touch target to --min-target-size on coarse pointers\n    // (matches IconButton) while the visual ball stays small; dropped at sm+.\n    const ballBtn =\n      'ds:cursor-pointer ds:outline-none 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)] ds:forced-colors:focus-visible:outline-[CanvasText] ds:before:absolute ds:before:inset-x-[calc((var(--min-target-size)-100%)/-2)] ds:before:inset-y-[calc((var(--min-target-size)-100%)/-2)] ds:before:content-[\"\"] ds:sm:before:hidden';\n    const ballVisual = item.read ? ballRing : ballDot;\n    const statusBall =\n      variant !== 'compact' ? null : onToggleRead ? (\n        <button\n          type=\"button\"\n          onClick={() => onToggleRead(item)}\n          aria-label={\n            item.read\n              ? t('notificationCard.markAsUnread', 'Mark as unread')\n              : t('notificationCard.markAsRead', 'Mark as read')\n          }\n          className={`${ballPos} ${ballVisual} ${ballBtn}`}\n        />\n      ) : (\n        <span aria-hidden=\"true\" className={`${ballPos} ${ballVisual}`} />\n      );\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({\n          variant,\n          size,\n          state,\n          // Elevated chrome only applies to the compact row; the dashboard\n          // variant brings its own border + shadow.\n          surface: variant === 'compact' ? surface : 'flat',\n          className,\n        })}\n        {...rest}\n      >\n        {/* Leading category icon with the status ball overlaid on its corner.\n            `relative` anchors the ball; a 32px box keeps titles aligned even\n            when an icon-less row only shows the ball. */}\n        {item.icon || statusBall ? (\n          <span className=\"ds:relative ds:size-8 ds:shrink-0\">\n            {item.icon ? (\n              <span\n                aria-hidden=\"true\"\n                className=\"ds:inline-flex ds:size-8 ds:items-center ds:justify-center 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            {statusBall}\n          </span>\n        ) : null}\n\n        <div className=\"ds:flex-1 ds:min-w-0 ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]\">\n          <div className=\"ds:flex ds:items-center ds:gap-[var(--spacing-sm)]\">\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        {/* Close — inline-end, hover/focus-revealed. Absolutely positioned so it\n            claims no width at rest: the title fills the row and there's no empty\n            gap when the row isn't hovered. */}\n        {variant === 'compact' && onDismiss ? (\n          <span\n            className={\n              'ds:absolute ds:z-[2] ds:opacity-0 ds:pointer-events-none ds:transition-opacity ds:motion-reduce:transition-none ds:group-hover:opacity-100 ds:group-hover:pointer-events-auto ds:group-focus-within:opacity-100 ds:group-focus-within:pointer-events-auto ' +\n              closeInset\n            }\n          >\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","surface","size","onActivate","onToggleRead","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","closeInset","ballPos","ballDot","ballRing","ballBtn","ballVisual","statusBall","jsx","titleText","titleNode","event","jsxs","Timestamp","Button","IconButton","X"],"mappings":"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"}