@xemahq/ui-kernel 0.10.0 → 0.11.0

package/src/ui/charts/sparkline.tsx

@@ -1,12 +1,12 @@
 // ═══════════════════════════════════════════════════════════════════════════
 // Sparkline — tiny inline trend line, pure SVG, no axes/legend (Wave 9.2)
 // ═══════════════════════════════════════════════════════════════════════════
-import type { ReactNode } from 'react';
 
 import { cn } from '../cn';
+import { chartColorAt, defaultFormatValue, niceScale } from './chart-utils';
 
 import type { ChartValueFormatter } from './chart-types';
-import { chartColorAt, defaultFormatValue, niceScale } from './chart-utils';
+import type { ReactNode } from 'react';
 
 const VIEW_W = 100;
 const VIEW_H = 28;
@@ -36,8 +36,13 @@ export function Sparkline({
 }: SparklineProps): ReactNode {
   const format = formatValue ?? defaultFormatValue;
   const finite = values.filter((v) => Number.isFinite(v));
+  // Read the endpoints BEFORE the empty guard so the guard itself narrows them:
+  // both are `undefined` exactly when `finite` is empty, which is the case the
+  // guard already returns for.
+  const first = finite[0];
+  const last = finite[finite.length - 1];
 
-  if (finite.length === 0) {
+  if (first === undefined || last === undefined) {
     return (
       <span
         role="img"
@@ -49,7 +54,9 @@ export function Sparkline({
     );
   }
 
-  const scale = niceScale(Math.min(...finite), Math.max(...finite), { pinZero: false });
+  const scale = niceScale(Math.min(...finite), Math.max(...finite), {
+    pinZero: false,
+  });
   const span = scale.max - scale.min;
   const yToPx = (v: number): number =>
     VIEW_H - PAD_Y - ((v - scale.min) / span) * (VIEW_H - 2 * PAD_Y);
@@ -60,17 +67,18 @@ export function Sparkline({
   const segments: string[] = [];
   let current: string[] = [];
   values.forEach((v, i) => {
-    if (Number.isFinite(v)) current.push(`${xToPx(i)},${yToPx(v)}`);
-    else if (current.length > 0) {
+    if (Number.isFinite(v)) {
+      current.push(`${xToPx(i)},${yToPx(v)}`);
+    } else if (current.length > 0) {
       segments.push(current.join(' '));
       current = [];
     }
   });
-  if (current.length > 0) segments.push(current.join(' '));
+  if (current.length > 0) {
+    segments.push(current.join(' '));
+  }
 
   const stroke = chartColorAt(0, color);
-  const first = finite[0];
-  const last = finite[finite.length - 1];
   const summary =
     ariaLabel ??
     `${title}: trend of ${finite.length} points, from ${format(first)} to ${format(last)}.`;

package/src/ui/chrome/AsyncBoundary.tsx

@@ -1,10 +1,10 @@
-import type { LucideIcon } from 'lucide-react';
-import type { ReactNode } from 'react';
-
-import ErrorCard, { type ErrorMessageFormatter } from './ErrorCard';
 import EmptyState from './EmptyState';
+import ErrorCard, { type ErrorMessageFormatter } from './ErrorCard';
 import LoadingState, { type LoadingStateVariant } from './LoadingState';
 
+import type { LucideIcon } from 'lucide-react';
+import type { ReactNode } from 'react';
+
 interface AsyncBoundaryEmpty {
   icon: LucideIcon;
   title: string;
@@ -55,11 +55,19 @@ export default function AsyncBoundary({
   }
 
   if (error) {
-    return <ErrorCard error={error} onRetry={onRetry} formatError={formatError} />;
+    return (
+      <ErrorCard error={error} onRetry={onRetry} formatError={formatError} />
+    );
   }
 
   if (isEmpty && empty) {
-    return <EmptyState icon={empty.icon} title={empty.title} description={empty.description} />;
+    return (
+      <EmptyState
+        icon={empty.icon}
+        title={empty.title}
+        description={empty.description}
+      />
+    );
   }
 
   return <>{children}</>;

package/src/ui/chrome/EmptyState.tsx

@@ -1,11 +1,14 @@
-import type { LucideIcon } from 'lucide-react';
-import type { ComponentType, ReactNode } from 'react';
-
 import { cn } from '../cn';
 import { Button } from '../primitives/button';
 import { Card, CardContent } from '../primitives/card';
 
-export type EmptyStateVariant = 'not-configured' | 'no-results' | 'disabled-context';
+import type { LucideIcon } from 'lucide-react';
+import type { ComponentType, ReactNode } from 'react';
+
+export type EmptyStateVariant =
+  | 'not-configured'
+  | 'no-results'
+  | 'disabled-context';
 
 /**
  * Visual density.
@@ -45,67 +48,94 @@ interface EmptyStateSecondaryAction {
   href: string;
 }
 
-interface EmptyStateProps {
-  icon: LucideIcon;
+interface EmptyStateCommonProps {
   title: string;
   description?: ReactNode;
+  action?: EmptyStateAction;
+  secondaryAction?: EmptyStateSecondaryAction;
+  /** Host link component for `secondaryAction.href` (defaults to `<a>`). */
+  linkComponent?: EmptyStateLinkComponent;
+  className?: string;
+}
+
+/** `comfortable` / `dense` render an icon block, so the icon is required. */
+interface EmptyStateIconicProps extends EmptyStateCommonProps {
+  size?: Exclude<EmptyStateSize, 'inline'>;
+  icon: LucideIcon;
   /** Optional illustration or extra content above the title */
   illustration?: ReactNode;
   /** Visual variant — drives default iconBg/iconColor unless overridden. */
   variant?: EmptyStateVariant;
-  size?: EmptyStateSize;
   /** Icon tint — overrides variant defaults */
   iconBg?: string;
   iconColor?: string;
-  action?: EmptyStateAction;
-  secondaryAction?: EmptyStateSecondaryAction;
-  /** Host link component for `secondaryAction.href` (defaults to `<a>`). */
-  linkComponent?: EmptyStateLinkComponent;
-  className?: string;
 }
 
-const VARIANT_DEFAULTS: Record<EmptyStateVariant, { iconBg: string; iconColor: string }> = {
+/**
+ * `inline` is text-only by definition — no icon block, therefore no icon,
+ * illustration, variant or icon tint. They are typed `never` rather than
+ * silently ignored: an accepted-but-unrendered prop is how callers ended up
+ * importing a lucide icon that renders nowhere.
+ */
+interface EmptyStateInlineProps extends EmptyStateCommonProps {
+  size: 'inline';
+  icon?: never;
+  illustration?: never;
+  variant?: never;
+  iconBg?: never;
+  iconColor?: never;
+}
+
+type EmptyStateProps = EmptyStateIconicProps | EmptyStateInlineProps;
+
+const VARIANT_DEFAULTS: Record<
+  EmptyStateVariant,
+  { iconBg: string; iconColor: string }
+> = {
   'not-configured': { iconBg: 'bg-info/10', iconColor: 'text-info' },
   'no-results': { iconBg: 'bg-warning/10', iconColor: 'text-warning' },
   'disabled-context': { iconBg: 'bg-muted', iconColor: 'text-ink-3' },
 };
 
-export default function EmptyState({
-  icon: Icon,
-  title,
-  description,
-  illustration,
-  variant = 'not-configured',
-  size = 'comfortable',
-  iconBg,
-  iconColor,
-  action,
-  secondaryAction,
-  linkComponent,
-  className,
-}: Readonly<EmptyStateProps>) {
+export default function EmptyState(props: Readonly<EmptyStateProps>) {
+  const { title, description, action, secondaryAction, linkComponent, className } =
+    props;
   const Link = linkComponent ?? DefaultLink;
-  const defaults = VARIANT_DEFAULTS[variant];
-  const resolvedIconBg = iconBg ?? defaults.iconBg;
-  const resolvedIconColor = iconColor ?? defaults.iconColor;
 
-  if (size === 'inline') {
+  if (props.size === 'inline') {
     return (
-      <div className={cn('flex items-center justify-center px-3 py-6 text-center text-body-2 text-ink-4', className)}>
+      <div
+        className={cn(
+          'flex items-center justify-center px-3 py-6 text-center text-body-2 text-ink-4',
+          className,
+        )}
+      >
         <div className="max-w-sm space-y-1">
           <p className="text-ink-3">{title}</p>
           {description && <p className="text-ink-4">{description}</p>}
           {(action || secondaryAction) && (
             <div className="mt-3 flex items-center justify-center gap-2">
               {action && (
-                <Button size="sm" variant="outline" onClick={action.onClick} className="h-7 gap-1.5 text-body-2">
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={action.onClick}
+                  className="h-7 gap-1.5 text-body-2"
+                >
                   {action.icon && <action.icon className="h-3.5 w-3.5" />}
                   {action.label}
                 </Button>
               )}
               {secondaryAction && (
-                <Button asChild size="sm" variant="ghost" className="h-7 px-2 text-body-2">
-                  <Link href={secondaryAction.href}>{secondaryAction.label}</Link>
+                <Button
+                  asChild
+                  size="sm"
+                  variant="ghost"
+                  className="h-7 px-2 text-body-2"
+                >
+                  <Link href={secondaryAction.href}>
+                    {secondaryAction.label}
+                  </Link>
                 </Button>
               )}
             </div>
@@ -115,6 +145,18 @@ export default function EmptyState({
     );
   }
 
+  const {
+    icon: Icon,
+    illustration,
+    variant = 'not-configured',
+    size = 'comfortable',
+    iconBg,
+    iconColor,
+  } = props;
+  const defaults = VARIANT_DEFAULTS[variant];
+  const resolvedIconBg = iconBg ?? defaults.iconBg;
+  const resolvedIconColor = iconColor ?? defaults.iconColor;
+
   if (size === 'dense') {
     return (
       <div
@@ -124,24 +166,41 @@ export default function EmptyState({
         )}
       >
         {illustration ?? (
-          <div className={cn('h-9 w-9 rounded-xl flex items-center justify-center mb-3', resolvedIconBg)}>
+          <div
+            className={cn(
+              'h-9 w-9 rounded-xl flex items-center justify-center mb-3',
+              resolvedIconBg,
+            )}
+          >
             <Icon className={cn('h-4 w-4', resolvedIconColor)} />
           </div>
         )}
         <p className="text-body-1 font-semibold text-ink">{title}</p>
         {description && (
-          <p className="mt-1 max-w-md text-body-2 leading-snug text-ink-3">{description}</p>
+          <p className="mt-1 max-w-md text-body-2 leading-snug text-ink-3">
+            {description}
+          </p>
         )}
         {(action || secondaryAction) && (
           <div className="mt-3 flex items-center gap-2">
             {action && (
-              <Button size="sm" variant="outline" onClick={action.onClick} className="h-7 gap-1.5 text-body-2">
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={action.onClick}
+                className="h-7 gap-1.5 text-body-2"
+              >
                 {action.icon && <action.icon className="h-3.5 w-3.5" />}
                 {action.label}
               </Button>
             )}
             {secondaryAction && (
-              <Button asChild size="sm" variant="ghost" className="h-7 px-2 text-body-2">
+              <Button
+                asChild
+                size="sm"
+                variant="ghost"
+                className="h-7 px-2 text-body-2"
+              >
                 <Link href={secondaryAction.href}>{secondaryAction.label}</Link>
               </Button>
             )}
@@ -152,21 +211,35 @@ export default function EmptyState({
   }
 
   return (
-    <Card className={cn('border-2 border-dashed border-border/50 rounded-xl', className)}>
+    <Card
+      className={cn(
+        'border-2 border-dashed border-border/50 rounded-xl',
+        className,
+      )}
+    >
       <CardContent className="flex flex-col items-center justify-center py-16 text-center">
         {illustration ?? (
-          <div className={`h-16 w-16 rounded-2xl flex items-center justify-center mb-5 ${resolvedIconBg}`}>
+          <div
+            className={`h-16 w-16 rounded-2xl flex items-center justify-center mb-5 ${resolvedIconBg}`}
+          >
             <Icon className={`h-7 w-7 ${resolvedIconColor}`} />
           </div>
         )}
         <p className="text-subtitle font-semibold text-ink">{title}</p>
         {description && (
-          <p className="text-body-1 mt-2 max-w-sm text-ink-3 leading-relaxed">{description}</p>
+          <p className="text-body-1 mt-2 max-w-sm text-ink-3 leading-relaxed">
+            {description}
+          </p>
         )}
         {(action || secondaryAction) && (
           <div className="mt-6 flex items-center gap-3">
             {action && (
-              <Button size="sm" variant="outline" onClick={action.onClick} className="gap-2 h-10 px-5">
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={action.onClick}
+                className="gap-2 h-10 px-5"
+              >
                 {action.icon && <action.icon className="h-4 w-4" />}
                 {action.label}
               </Button>

package/src/ui/chrome/RecordCardList.tsx

@@ -0,0 +1,98 @@
+import { cn } from '../cn';
+
+import type { ReactNode } from 'react';
+
+/**
+ * One label/value row inside a record card — mirrors one table column.
+ *
+ * `key` exists because a card's rows are keyed by the COLUMN, and a column's
+ * identity is its field key, not its user-facing label (two columns may carry
+ * the same label). It defaults to `label` for the common case where the label
+ * is already unique.
+ */
+export interface RecordCardField {
+  readonly key?: string;
+  readonly label: string;
+  readonly value: ReactNode;
+  /**
+   * `data-*` attributes for the row element — e.g. the same hook the equivalent
+   * table cell carries, so a click-to-context resolver lands on the identical
+   * node at every viewport width. Deliberately `data-*` only: styling stays in
+   * this primitive, so a caller cannot re-open the drift it closed.
+   */
+  readonly rowAttributes?: Readonly<Record<`data-${string}`, string>>;
+}
+
+export interface RecordCardListProps<T> {
+  readonly items: readonly T[];
+  readonly getKey: (item: T) => string;
+  /** Card header rendered above the field list (title, status, row toggle). */
+  readonly renderHeader?: (item: T) => ReactNode;
+  readonly getFields: (item: T) => readonly RecordCardField[];
+  /** Row actions, rendered right-aligned below a divider. */
+  readonly renderActions?: (item: T) => ReactNode;
+  /** Free block appended after the actions (expanded detail). */
+  readonly renderDetail?: (item: T) => ReactNode;
+  /** Extra classes for the list element. */
+  readonly className?: string;
+}
+
+/**
+ * Small-viewport (below `md`) layout for a record list: one stacked card per
+ * record with the table's columns rendered as label/value rows, instead of a
+ * horizontal-scroll-only table.
+ *
+ * This is the ONE definition of that card chrome — spacing, border, divider,
+ * label/value alignment. Callers name their columns and their actions; they do
+ * not restate the chrome. Deliberately NOT parameterised by card class: a
+ * per-caller class hook is how the three copies this replaced drifted apart in
+ * the first place.
+ */
+export function RecordCardList<T>(props: Readonly<RecordCardListProps<T>>) {
+  const {
+    items,
+    getKey,
+    renderHeader,
+    getFields,
+    renderActions,
+    renderDetail,
+    className,
+  } = props;
+
+  return (
+    <ul className={cn('space-y-2', className)}>
+      {items.map((item) => {
+        const actions = renderActions?.(item);
+        const detail = renderDetail?.(item);
+        return (
+          <li
+            key={getKey(item)}
+            className="space-y-2 rounded-lg border border-rule bg-paper-elev p-3"
+          >
+            {renderHeader?.(item)}
+            <dl className="space-y-1.5">
+              {getFields(item).map((field) => (
+                <div
+                  key={field.key ?? field.label}
+                  {...field.rowAttributes}
+                  className="flex justify-between gap-3 text-sm"
+                >
+                  <dt className="shrink-0 text-ink-3">{field.label}</dt>
+                  <dd className="text-right text-ink-2">{field.value}</dd>
+                </div>
+              ))}
+            </dl>
+            {actions ? (
+              <div className="flex items-center justify-end gap-2 border-t border-rule/50 pt-2">
+                {actions}
+              </div>
+            ) : null}
+            {detail}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+export default RecordCardList;

package/src/ui/chrome/page-shell.tsx

@@ -1,8 +1,8 @@
 import { FileQuestion, type LucideIcon } from 'lucide-react';
 import { type ReactNode } from 'react';
 
-import { useHostBridge, type PageBackTarget } from '../../lib/biome-host';
 import EmptyState from './EmptyState';
+import { useHostBridge, type PageBackTarget } from '../../lib/biome-host';
 import { Tabs, TabsList, TabsTrigger } from '../primitives/tabs';
 
 interface TabDef {
@@ -63,7 +63,13 @@ export default function PageShell({
   // Single source of truth for the topbar title. Pages that bypass
   // PageShell call the page-meta hook directly; PageShell wraps the same
   // hook so consumers don't need to register meta twice.
-  useHostBridge().pageMeta.usePageMeta({ title, description, eyebrow, backTo, topbarActions });
+  useHostBridge().pageMeta.usePageMeta({
+    title,
+    description,
+    eyebrow,
+    backTo,
+    topbarActions,
+  });
   if (embedded) {
     // Embedded mode: the host page already provides the title + tabs +
     // context, so we render ONLY the child content + any sub-tab strip +
@@ -75,7 +81,11 @@ export default function PageShell({
           <div className="shrink-0 border-b border-rule bg-paper-elev/40">
             <div className="flex items-center gap-3 px-4 py-2 lg:px-6">
               {tabs && tabs.length > 0 && (
-                <Tabs value={activeTab} onValueChange={onTabChange} className="flex-1 min-w-0">
+                <Tabs
+                  value={activeTab}
+                  onValueChange={onTabChange}
+                  className="flex-1 min-w-0"
+                >
                   <div className="overflow-x-auto">
                     <TabsList className="h-7 bg-transparent p-0 gap-0">
                       {tabs.map((tab) => (
@@ -86,7 +96,9 @@ export default function PageShell({
                         >
                           {tab.label}
                           {tab.count !== undefined && (
-                            <span className="ml-1.5 text-caption tabular-nums opacity-70">{tab.count}</span>
+                            <span className="ml-1.5 text-caption tabular-nums opacity-70">
+                              {tab.count}
+                            </span>
                           )}
                           {tab.indicator && (
                             <span className="ml-1.5 inline-block h-1.5 w-1.5 rounded-full bg-warning" />
@@ -98,12 +110,18 @@ export default function PageShell({
                 </Tabs>
               )}
               {!tabs && <div className="flex-1" />}
-              {actions && <div className="flex items-center gap-2 shrink-0">{actions}</div>}
+              {actions && (
+                <div className="flex items-center gap-2 shrink-0">
+                  {actions}
+                </div>
+              )}
             </div>
           </div>
         ) : null}
         <div className="flex-1 overflow-auto min-h-0">
-          <div className="flex h-full min-h-0 flex-col px-4 pb-4 pt-3 lg:px-6">{children}</div>
+          <div className="flex h-full min-h-0 flex-col px-4 pb-4 pt-3 lg:px-6">
+            {children}
+          </div>
         </div>
       </div>
     );
@@ -116,7 +134,11 @@ export default function PageShell({
         <div className="shrink-0 border-b border-border/50 px-4 sm:px-5 lg:px-8">
           <div className="flex min-h-[34px] flex-col gap-2 py-1.5 sm:flex-row sm:items-center sm:gap-3 sm:py-0">
             {tabs && tabs.length > 0 && (
-              <Tabs value={activeTab} onValueChange={onTabChange} className="flex-1 min-w-0">
+              <Tabs
+                value={activeTab}
+                onValueChange={onTabChange}
+                className="flex-1 min-w-0"
+              >
                 <div className="overflow-x-auto">
                   <TabsList className="h-7 bg-transparent p-0 gap-0">
                     {tabs.map((tab) => (
@@ -127,7 +149,9 @@ export default function PageShell({
                       >
                         {tab.label}
                         {tab.count !== undefined && (
-                          <span className="ml-1.5 text-caption tabular-nums opacity-60">{tab.count}</span>
+                          <span className="ml-1.5 text-caption tabular-nums opacity-60">
+                            {tab.count}
+                          </span>
                         )}
                         {tab.indicator && (
                           <span className="ml-1.5 inline-block h-1.5 w-1.5 rounded-full bg-warning" />

package/src/ui/chrome/status-badge.tsx

@@ -1,9 +1,9 @@
-import type { ReactNode } from 'react';
-
 import { cn } from '../cn';
 import { getStatusStyle } from '../design-tokens';
 import { Badge } from '../primitives/badge';
 
+import type { ReactNode } from 'react';
+
 export type StatusBadgeSize = 'xs' | 'sm' | 'md';
 
 export interface StatusBadgeProps {
@@ -68,8 +68,12 @@ export default function StatusBadge({
         className,
       )}
     >
-      {dot && <span className={cn('shrink-0 rounded-full', sz.dot, style.dot)} />}
-      {children ?? <span className="capitalize">{status.replace(/_/g, ' ')}</span>}
+      {dot && (
+        <span className={cn('shrink-0 rounded-full', sz.dot, style.dot)} />
+      )}
+      {children ?? (
+        <span className="capitalize">{status.replace(/_/g, ' ')}</span>
+      )}
     </Badge>
   );
 }

package/src/ui/design-tokens.ts

@@ -142,8 +142,16 @@ export const STATUS_STYLES: Record<string, StatusStyle> = {
   manual_review: WARNING_STYLE,
 };
 
+/**
+ * Style for an unrecognised status. Same value `STATUS_STYLES.pending` carries —
+ * referenced as the fragment rather than re-read out of the open `Record`, so
+ * the fallback is structurally guaranteed instead of being a second lookup that
+ * can itself miss (e.g. if the `pending` key were ever renamed).
+ */
+const DEFAULT_STATUS_STYLE: StatusStyle = INFO_STYLE;
+
 export function getStatusStyle(status: string): StatusStyle {
-  return STATUS_STYLES[status] ?? STATUS_STYLES.pending;
+  return STATUS_STYLES[status] ?? DEFAULT_STATUS_STYLE;
 }
 
 // ── Priority Styles ────────────────────────────────────────────────
@@ -156,6 +164,17 @@ export interface PriorityStyle {
   label: string;
 }
 
+// Lowest priority — also the style for an unrecognised priority. Named so the
+// map entry and `getPriorityStyle`'s fallback are the same proven value rather
+// than a second `Record` lookup that can itself miss.
+const PRIORITY_LOW_STYLE: PriorityStyle = {
+  badge: 'bg-paper-elev text-ink-3 border-border',
+  text: 'text-ink-3',
+  bg: 'bg-muted/30',
+  border: 'border-border',
+  label: 'Low',
+};
+
 export const PRIORITY_STYLES: Record<string, PriorityStyle> = {
   p0: {
     badge: 'bg-destructive text-white border-destructive',
@@ -178,17 +197,11 @@ export const PRIORITY_STYLES: Record<string, PriorityStyle> = {
     border: 'border-warning/30',
     label: 'Medium',
   },
-  p3: {
-    badge: 'bg-paper-elev text-ink-3 border-border',
-    text: 'text-ink-3',
-    bg: 'bg-muted/30',
-    border: 'border-border',
-    label: 'Low',
-  },
+  p3: PRIORITY_LOW_STYLE,
 };
 
 export function getPriorityStyle(priority: string): PriorityStyle {
-  return PRIORITY_STYLES[priority] ?? PRIORITY_STYLES.p3;
+  return PRIORITY_STYLES[priority] ?? PRIORITY_LOW_STYLE;
 }
 
 // ── Severity Styles ────────────────────────────────────────────────
@@ -285,15 +298,28 @@ export const IMPORTANCE_STYLES: Record<number, { badge: string; label: string; s
 
 // ── Risk Level Styles ──────────────────────────────────────────────
 
-export const RISK_LEVEL_STYLES: Record<string, { badge: string; text: string }> = {
-  low: { badge: 'bg-success/15 text-success dark:text-success border-success/30', text: 'text-success dark:text-success' },
+export interface RiskLevelStyle {
+  badge: string;
+  text: string;
+}
+
+// Lowest risk — also the style for an unrecognised level. Named for the same
+// reason as PRIORITY_LOW_STYLE: the fallback must be a proven value, not a
+// second lookup into the open `Record`.
+const RISK_LOW_STYLE: RiskLevelStyle = {
+  badge: 'bg-success/15 text-success dark:text-success border-success/30',
+  text: 'text-success dark:text-success',
+};
+
+export const RISK_LEVEL_STYLES: Record<string, RiskLevelStyle> = {
+  low: RISK_LOW_STYLE,
   medium: { badge: 'bg-warning/15 text-warning dark:text-warning border-warning/30', text: 'text-warning dark:text-warning' },
   high: { badge: 'bg-warning/15 text-warning dark:text-warning border-warning/30', text: 'text-warning dark:text-warning' },
   critical: { badge: 'bg-destructive/15 text-destructive dark:text-destructive border-destructive/30', text: 'text-destructive dark:text-destructive' },
 };
 
-export function getRiskLevelStyle(level: string): { badge: string; text: string } {
-  return RISK_LEVEL_STYLES[level] ?? RISK_LEVEL_STYLES.low;
+export function getRiskLevelStyle(level: string): RiskLevelStyle {
+  return RISK_LEVEL_STYLES[level] ?? RISK_LOW_STYLE;
 }
 
 // ── Agent Source Styles ────────────────────────────────────────────

package/src/ui/index.ts

@@ -92,6 +92,11 @@ export {
   type EmptyStateLinkComponent,
 } from './chrome/EmptyState';
 export { StateCard } from './chrome/StateCard';
+export {
+  RecordCardList,
+  type RecordCardField,
+  type RecordCardListProps,
+} from './chrome/RecordCardList';
 export { default as PageHeader, PageToolbar } from './chrome/PageHeader';
 export { default as LoadingState, type LoadingStateVariant } from './chrome/LoadingState';
 export { default as AsyncBoundary } from './chrome/AsyncBoundary';