@sero-ai/ui 0.4.0 → 0.4.2

package/src/components/dashboard/catalog.ts

@@ -1,11 +1,11 @@
-// Dashboard component catalogue — the source of truth for discovery.
+// Dashboard component catalogue — type for the JSON source of truth.
 //
-// This is package metadata, not a runtime service. It changes through normal
-// source review and ships with @sero-ai/ui. Widget code imports the React
-// components from "@sero-ai/ui"; tooling and the agent read this metadata via
-// "@sero-ai/ui/dashboard-catalog" to discover the supported vocabulary.
+// The catalogue data lives in `catalog.json` (plain data, no compiler needed)
+// and ships as `@sero-ai/ui/dashboard-catalog.json`. Tooling and the agent read
+// that file directly; this module only provides the entry type so TypeScript
+// callers can type the parsed JSON.
 //
-// Keep this in step with the two readable views on release:
+// Keep `catalog.json` in step with the two readable views on release:
 //   - packages/templates/skills/sero-dashboard-ui/references/component-catalog.md
 //   - the docs-site dashboard component catalogue page
 // (Generation + drift validation is a deferred follow-up.)
@@ -27,325 +27,3 @@ export interface DashboardComponentCatalogEntry {
   status: "stable" | "experimental";
   example?: string;
 }
-
-export const dashboardComponentCatalog: DashboardComponentCatalogEntry[] = [
-  // ── Layout and structure ──────────────────────────────────────
-  {
-    name: "WidgetContent",
-    category: "layout",
-    kind: "composite",
-    summary:
-      "Full-height widget frame with standard padding and a container-query boundary.",
-    useWhen: "As the outermost element of every dashboard widget.",
-    related: ["Stack", "Inline"],
-    status: "stable",
-    example: "<WidgetContent><Stack gap=\"sm\">…</Stack></WidgetContent>",
-  },
-  {
-    name: "Stack",
-    category: "layout",
-    kind: "composite",
-    summary: "Vertical layout with semantic spacing, alignment and optional scrolling.",
-    useWhen: "For the primary top-to-bottom content flow inside a widget.",
-    related: ["Inline", "WidgetContent"],
-    status: "stable",
-    example: "<Stack gap=\"sm\" scroll>…</Stack>",
-  },
-  {
-    name: "Inline",
-    category: "layout",
-    kind: "composite",
-    summary: "Horizontal layout with spacing, alignment, wrap and justify.",
-    useWhen: "For a row of items such as a header with a trailing action.",
-    related: ["Stack"],
-    status: "stable",
-    example: "<Inline justify=\"between\" align=\"center\">…</Inline>",
-  },
-  {
-    name: "Grid",
-    category: "layout",
-    kind: "composite",
-    summary: "Responsive grid with bounded columns and gap.",
-    useWhen: "For metric and summary layouts that reflow by width.",
-    related: ["MetricGroup"],
-    status: "stable",
-    example: "<Grid columns=\"auto\" minColumnWidth={120}>…</Grid>",
-  },
-  {
-    name: "Section",
-    category: "layout",
-    kind: "composite",
-    summary: "Compact section with optional heading, description and trailing action.",
-    useWhen: "To group related content under a labelled heading.",
-    related: ["Divider", "Heading"],
-    status: "stable",
-    example: "<Section heading=\"Summary\" action={…}>…</Section>",
-  },
-  {
-    name: "Divider",
-    category: "layout",
-    kind: "composite",
-    summary: "Compact horizontal or vertical divider built on Separator.",
-    useWhen: "To separate sections without a heavy border.",
-    related: ["Section"],
-    status: "stable",
-    example: "<Divider spacing=\"sm\" />",
-  },
-  // ── Typography and media ──────────────────────────────────────
-  {
-    name: "Text",
-    category: "typography",
-    kind: "composite",
-    summary:
-      "Semantic text variants (body, label, supporting, muted, numeric) with truncation.",
-    useWhen: "For any text, instead of ad-hoc font-size utilities.",
-    related: ["Heading"],
-    status: "stable",
-    example: "<Text variant=\"label\">Jobs</Text>",
-  },
-  {
-    name: "Heading",
-    category: "typography",
-    kind: "composite",
-    summary: "Compact heading levels and sizes that keep correct HTML semantics.",
-    useWhen: "For section and view titles.",
-    related: ["Section", "Text"],
-    status: "stable",
-    example: "<Heading level={2} size=\"md\">Overview</Heading>",
-  },
-  {
-    name: "Icon",
-    category: "typography",
-    kind: "composite",
-    summary: "Consistent icon wrapper for size, tone and accessibility.",
-    useWhen: "To render an icon component with a shared size and tone.",
-    related: ["IconButton"],
-    status: "stable",
-    example: "<Icon icon={Clock} size=\"sm\" tone=\"warning\" />",
-  },
-  // ── Data display ──────────────────────────────────────────────
-  {
-    name: "Metric",
-    category: "data-display",
-    kind: "composite",
-    summary: "Label + value with optional icon, supporting text and trend.",
-    useWhen: "To show a single number inline.",
-    related: ["MetricCard", "MetricGroup"],
-    status: "stable",
-    example: "<Metric label=\"Jobs\" value={6} />",
-  },
-  {
-    name: "MetricCard",
-    category: "data-display",
-    kind: "composite",
-    summary: "A contained surface for a Metric or compact summary.",
-    useWhen: "To give a metric its own bounded card.",
-    related: ["Metric", "MetricGroup"],
-    status: "stable",
-    example: "<MetricCard><Metric label=\"Jobs\" value={6} /></MetricCard>",
-  },
-  {
-    name: "MetricGroup",
-    category: "data-display",
-    kind: "composite",
-    summary: "Arranges multiple metrics responsively in a bounded grid.",
-    useWhen: "To show several metrics that reflow by width.",
-    related: ["Metric", "Grid"],
-    status: "stable",
-    example: "<MetricGroup><Metric … /><Metric … /></MetricGroup>",
-  },
-  {
-    name: "Status",
-    category: "data-display",
-    kind: "composite",
-    summary: "Semantic status dot, label or pill with neutral/success/warning/error/info tones.",
-    useWhen: "To show a health or state indicator. Map domain status onto a tone.",
-    related: ["Badge"],
-    status: "stable",
-    example: "<Status tone=\"success\">Active</Status>",
-  },
-  {
-    name: "Badge",
-    category: "data-display",
-    kind: "primitive",
-    summary: "Existing badge primitive, extended with success/warning/info tones.",
-    useWhen: "For compact counts, tags and category labels.",
-    related: ["Status"],
-    status: "stable",
-    example: "<Badge variant=\"success\">Passed</Badge>",
-  },
-  {
-    name: "KeyValue",
-    category: "data-display",
-    kind: "composite",
-    summary: "A single label/value row with predictable alignment and truncation.",
-    useWhen: "For metadata, totals and configuration summaries.",
-    related: ["KeyValueList"],
-    status: "stable",
-    example: "<KeyValue label=\"Region\" value=\"eu-west-1\" mono />",
-  },
-  {
-    name: "KeyValueList",
-    category: "data-display",
-    kind: "composite",
-    summary: "A vertical list of KeyValue rows.",
-    useWhen: "For a block of metadata pairs.",
-    related: ["KeyValue"],
-    status: "stable",
-    example: "<KeyValueList><KeyValue … /></KeyValueList>",
-  },
-  {
-    name: "ItemList",
-    category: "data-display",
-    kind: "composite",
-    summary: "Compact rows with leading media, text, trailing metadata, actions and overflow.",
-    useWhen: "For entity lists (files, notes, results).",
-    related: ["ItemListItem", "ActivityList"],
-    status: "stable",
-    example: "<ItemList overflowCount={3}><ItemListItem … /></ItemList>",
-  },
-  {
-    name: "ItemListItem",
-    category: "data-display",
-    kind: "composite",
-    summary: "A single compact list row with media, primary/secondary text and actions.",
-    useWhen: "As the row inside an ItemList.",
-    related: ["ItemList"],
-    status: "stable",
-    example: "<ItemListItem primary=\"Report.pdf\" trailing=\"2h\" />",
-  },
-  {
-    name: "ActivityList",
-    category: "data-display",
-    kind: "composite",
-    summary: "A chronological list for recent events with a shared overflow footer.",
-    useWhen: "For time-ordered activity or upcoming events.",
-    related: ["ActivityListItem", "ItemList"],
-    status: "stable",
-    example: "<ActivityList><ActivityListItem … /></ActivityList>",
-  },
-  {
-    name: "ActivityListItem",
-    category: "data-display",
-    kind: "composite",
-    summary: "An event row with a status marker or icon, label, timestamp and detail.",
-    useWhen: "As the row inside an ActivityList.",
-    related: ["ActivityList", "Status"],
-    status: "stable",
-    example: "<ActivityListItem label=\"Backup\" timestamp=\"08:00\" tone=\"success\" />",
-  },
-  {
-    name: "ProgressRing",
-    category: "data-display",
-    kind: "composite",
-    summary: "Accessible circular progress / donut gauge, no charting dependency.",
-    useWhen: "For a bounded value such as a success rate or usage percentage.",
-    related: ["Metric"],
-    status: "stable",
-    example: "<ProgressRing value={75} label=\"Success rate\" tone=\"success\" />",
-  },
-  {
-    name: "StaleIndicator",
-    category: "data-display",
-    kind: "composite",
-    summary: "Compact hint that data may be out of date, with optional refresh action.",
-    useWhen: "When displayed data can lag its source.",
-    related: ["DataBoundary"],
-    status: "stable",
-    example: "<StaleIndicator lastUpdated=\"Updated 5m ago\" onRefresh={…} />",
-  },
-  // ── Runtime states and feedback ───────────────────────────────
-  {
-    name: "DataBoundary",
-    category: "state",
-    kind: "composite",
-    summary: "Selects presentation for loading / ready / empty / stale / error states.",
-    useWhen: "To switch a widget's content by data state without owning fetching.",
-    related: ["EmptyState", "MetricSkeleton", "StaleIndicator"],
-    status: "stable",
-    example: "<DataBoundary state={state} loading={…} empty={…} error={…}>…</DataBoundary>",
-  },
-  {
-    name: "EmptyState",
-    category: "state",
-    kind: "composite",
-    summary: "Compact empty state built on the Empty primitives.",
-    useWhen: "When there is nothing to show yet.",
-    related: ["DataBoundary"],
-    status: "stable",
-    example: "<EmptyState icon={Inbox} title=\"No activity yet\" />",
-  },
-  {
-    name: "Alert",
-    category: "state",
-    kind: "primitive",
-    summary: "Existing alert primitive for inline warnings and errors.",
-    useWhen: "For a persistent inline message inside a widget or view.",
-    related: ["DataBoundary"],
-    status: "stable",
-    example: "<Alert variant=\"destructive\">Failed to load</Alert>",
-  },
-  {
-    name: "MetricSkeleton",
-    category: "state",
-    kind: "composite",
-    summary: "Loading placeholder for a row of metrics.",
-    useWhen: "As the `loading` fallback for metric layouts.",
-    related: ["DataBoundary", "ListSkeleton"],
-    status: "stable",
-    example: "<MetricSkeleton count={3} />",
-  },
-  {
-    name: "ListSkeleton",
-    category: "state",
-    kind: "composite",
-    summary: "Loading placeholder for a list of rows.",
-    useWhen: "As the `loading` fallback for item lists.",
-    related: ["DataBoundary", "ItemList"],
-    status: "stable",
-    example: "<ListSkeleton count={4} />",
-  },
-  {
-    name: "ActivitySkeleton",
-    category: "state",
-    kind: "composite",
-    summary: "Loading placeholder for an activity list.",
-    useWhen: "As the `loading` fallback for activity feeds.",
-    related: ["DataBoundary", "ActivityList"],
-    status: "stable",
-    example: "<ActivitySkeleton count={4} />",
-  },
-  {
-    name: "Skeleton",
-    category: "state",
-    kind: "primitive",
-    summary: "Existing skeleton primitive for bespoke loading shapes.",
-    useWhen: "When the prebuilt skeleton patterns do not fit.",
-    related: ["MetricSkeleton", "ListSkeleton", "ActivitySkeleton"],
-    status: "stable",
-    example: "<Skeleton className=\"h-4 w-24\" />",
-  },
-  // ── Actions ───────────────────────────────────────────────────
-  {
-    name: "Button",
-    category: "action",
-    kind: "primitive",
-    summary: "Existing button primitive, the standard text-action control.",
-    useWhen: "For a labelled action.",
-    related: ["IconButton"],
-    status: "stable",
-    example: "<Button size=\"sm\">Open</Button>",
-  },
-  {
-    name: "IconButton",
-    category: "action",
-    kind: "composite",
-    summary: "Small icon-only button with a required accessible label.",
-    useWhen: "For a compact action such as refresh or dismiss.",
-    related: ["Button", "Icon"],
-    status: "stable",
-    example: "<IconButton icon={RotateCw} label=\"Refresh\" size=\"xs\" />",
-  },
-];
-
-export default dashboardComponentCatalog;

package/src/components/dashboard/empty-state.tsx

@@ -53,7 +53,7 @@ function EmptyState({
             <Icon icon={icon} size="md" className="text-current" />
           </EmptyMedia>
         )}
-        <EmptyTitle className="text-sm font-medium text-[var(--text-primary)]">
+        <EmptyTitle className="text-base font-medium text-[var(--text-primary)]">
           {title}
         </EmptyTitle>
         {message && (

package/src/components/dashboard/index.ts

@@ -1,8 +1,8 @@
 // @sero-ai/ui dashboard components — shared compact presentation for widgets
 // and full plugin views. Import from the package root: `@sero-ai/ui`.
 //
-// The component catalogue (metadata for discovery tooling) is exported
-// separately from `@sero-ai/ui/dashboard-catalog`, not from here.
+// The component catalogue (metadata for discovery tooling) is plain data at
+// `@sero-ai/ui/dashboard-catalog.json`, not exported from here.
 
 export * from "./tone";
 export * from "./spacing";

package/src/components/dashboard/item-list.tsx

@@ -65,7 +65,7 @@ function ItemListItem({
         )}
       </ItemContent>
       {trailing && (
-        <span className="shrink-0 text-[11px] tabular-nums text-[var(--text-muted)]">
+        <span className="shrink-0 text-sm tabular-nums text-[var(--text-muted)]">
           {trailing}
         </span>
       )}
@@ -95,7 +95,7 @@ function ItemList({
     >
       {children}
       {overflowCount > 0 && (
-        <span className="px-2 text-[11px] text-[var(--text-muted)]">
+        <span className="px-2 text-sm text-[var(--text-muted)]">
           +{overflowCount} more
         </span>
       )}

package/src/components/dashboard/layout.tsx

@@ -235,7 +235,7 @@ function Section({
         <div className="flex items-center justify-between gap-2">
           <div className="flex min-w-0 flex-col gap-0.5">
             {heading && (
-              <h3 className="truncate text-[11px] font-semibold uppercase tracking-wider text-[var(--text-muted)]">
+              <h3 className="truncate text-sm font-semibold uppercase tracking-wider text-[var(--text-muted)]">
                 {heading}
               </h3>
             )}

package/src/components/dashboard/metric.tsx

@@ -67,7 +67,7 @@ function Metric({
     >
       <div className="flex items-center gap-1.5">
         {icon && <Icon icon={icon} size="sm" />}
-        <span className="truncate text-[11px] font-medium uppercase tracking-wide text-[var(--text-muted)]">
+        <span className="truncate text-sm font-medium uppercase tracking-wide text-[var(--text-muted)]">
           {label}
         </span>
       </div>

package/src/components/dashboard/stale-indicator.tsx

@@ -31,7 +31,7 @@ function StaleIndicator({
     <div
       data-slot="stale-indicator"
       className={cn(
-        "flex items-center gap-1.5 text-[11px] text-[var(--text-muted)]",
+        "flex items-center gap-1.5 text-sm text-[var(--text-muted)]",
         className,
       )}
       {...props}

package/src/components/dashboard/status.tsx

@@ -8,7 +8,7 @@
 import * as React from "react";
 
 import { cn } from "../../lib/utils";
-import { toneColor, toneDot, tonePill, type Tone } from "./tone";
+import { toneColor, toneDot, toneLabel, tonePill, type Tone } from "./tone";
 
 export interface StatusProps extends React.ComponentProps<"span"> {
   tone?: Tone;
@@ -28,6 +28,16 @@ function Status({
   ...props
 }: StatusProps) {
   const hasLabel = children != null && children !== "";
+  const hasAccessibleName =
+    props["aria-label"] != null || props["aria-labelledby"] != null;
+
+  // A bare indicator (no visible children) is otherwise silent to assistive
+  // tech. Give it a text alternative — the caller's aria-label if provided,
+  // else the generic tone name — so its state is announced, not an empty region.
+  const hiddenLabel =
+    !hasLabel && !hasAccessibleName ? (
+      <span className="sr-only">{toneLabel[tone]}</span>
+    ) : null;
 
   if (variant === "pill") {
     return (
@@ -43,6 +53,7 @@ function Status({
       >
         <span className={cn("size-1.5 shrink-0 rounded-full", toneDot[tone])} />
         {children}
+        {hiddenLabel}
       </span>
     );
   }
@@ -51,7 +62,8 @@ function Status({
     <span
       data-slot="status"
       data-tone={tone}
-      // A bare dot carries no text, so surface the tone to assistive tech.
+      // A bare dot carries no visible text, so expose its state to assistive
+      // tech via role="status" plus the hidden label below.
       role={hasLabel ? undefined : "status"}
       className={cn(
         "inline-flex items-center gap-1.5 text-xs font-medium text-[var(--text-secondary)]",
@@ -68,6 +80,7 @@ function Status({
         )}
       />
       {children}
+      {hiddenLabel}
     </span>
   );
 }

package/src/components/dashboard/tone.ts

@@ -25,6 +25,19 @@ export const toneDot: Record<Tone, string> = {
   info: "bg-[var(--status-info)]",
 };
 
+/**
+ * Default accessible name for a tone, used as the text alternative when a
+ * status indicator carries no visible label. Generic by design — callers with
+ * a domain-specific meaning should pass their own `aria-label`.
+ */
+export const toneLabel: Record<Tone, string> = {
+  neutral: "Neutral",
+  success: "Success",
+  warning: "Warning",
+  error: "Error",
+  info: "Info",
+};
+
 /** Muted tinted background + matching text for a tone (pills, chips). */
 export const tonePill: Record<Tone, string> = {
   neutral: "bg-[var(--surface-flat)] text-[var(--text-secondary)]",

package/src/components/dashboard/typography.tsx

@@ -2,7 +2,7 @@
 //
 // Text, Heading and Icon give one type scale and one icon treatment so
 // equivalent text and icons render identically across widgets, replacing the
-// scattered `text-[9px]`/`text-[10px]` and per-widget muted colours.
+// scattered `text-xs`/`text-sm` and per-widget muted colours.
 
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
@@ -15,13 +15,13 @@ import { toneColor, type Tone } from "./tone";
 const textVariants = cva("min-w-0", {
   variants: {
     variant: {
-      body: "text-sm text-[var(--text-primary)]",
+      body: "text-base text-[var(--text-primary)]",
       label:
-        "text-[11px] font-semibold uppercase tracking-wider text-[var(--text-muted)]",
+        "text-sm font-semibold uppercase tracking-wider text-[var(--text-muted)]",
       supporting: "text-xs text-[var(--text-secondary)]",
       muted: "text-xs text-[var(--text-muted)]",
       numeric:
-        "text-sm font-semibold tabular-nums text-[var(--text-primary)]",
+        "text-base font-semibold tabular-nums text-[var(--text-primary)]",
     },
   },
   defaultVariants: { variant: "body" },
@@ -72,7 +72,7 @@ function Text({
 
 const headingSize = {
   sm: "text-xs font-semibold",
-  md: "text-sm font-semibold",
+  md: "text-base font-semibold",
   lg: "text-base font-semibold",
 } as const;
 

package/src/components/model-selection/available-model-picker.tsx

@@ -102,7 +102,7 @@ export function AvailableModelPicker<
           role="button"
           tabIndex={disabled ? -1 : 0}
           className={cn(
-            'flex w-full items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-left text-sm transition-colors',
+            'flex w-full items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-left text-base transition-colors',
             'hover:bg-secondary/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
             disabled && 'cursor-not-allowed opacity-50',
             className,
@@ -122,13 +122,13 @@ export function AvailableModelPicker<
                     <Sparkles className="size-3 shrink-0 text-amber-500/70" />
                   ) : null}
                 </div>
-                <div className="truncate text-[11px] text-muted-foreground">
+                <div className="truncate text-sm text-muted-foreground">
                   {selected.group.displayName}
                 </div>
               </div>
             </>
           ) : selected.fallbackLabel ? (
-            <span className="min-w-0 flex-1 truncate font-mono text-xs text-muted-foreground">
+            <span className="min-w-0 flex-1 truncate font-mono text-sm text-muted-foreground">
               {selected.fallbackLabel}
             </span>
           ) : (
@@ -169,11 +169,11 @@ export function AvailableModelPicker<
 
         <div className="max-h-[280px] overflow-y-auto py-1">
           {groups.length === 0 ? (
-            <div className="px-3 py-4 text-center text-xs text-muted-foreground">
+            <div className="px-3 py-4 text-center text-sm text-muted-foreground">
               {noModelsLabel}
             </div>
           ) : totalResults === 0 ? (
-            <div className="px-3 py-4 text-center text-xs text-muted-foreground">
+            <div className="px-3 py-4 text-center text-sm text-muted-foreground">
               {emptyLabel}
             </div>
           ) : (
@@ -186,7 +186,7 @@ export function AvailableModelPicker<
                     alt={group.displayName}
                     className="size-3.5 shrink-0 rounded-sm dark:invert"
                   />
-                  <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+                  <span className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
                     {group.displayName}
                   </span>
                 </div>
@@ -200,7 +200,7 @@ export function AvailableModelPicker<
                         type="button"
                         onClick={() => handleSelect(model.provider, model.modelId)}
                         className={cn(
-                          'flex w-full items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-left text-xs transition-colors',
+                          'flex w-full items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-left text-sm transition-colors',
                           isSelected
                             ? 'bg-secondary text-foreground'
                             : 'text-muted-foreground hover:bg-secondary/60 hover:text-foreground',

package/src/components/model-selection/thinking-level-picker.tsx

@@ -39,7 +39,7 @@ export function ThinkingLevelPicker({
             disabled={disabled || !isAvailable}
             onClick={() => onChange(level)}
             className={cn(
-              'rounded-md px-2 py-1.5 text-[11px] font-medium transition-colors',
+              'rounded-md px-2 py-1.5 text-sm font-medium transition-colors',
               isActive
                 ? 'bg-background text-foreground shadow-sm'
                 : 'text-muted-foreground hover:bg-background/70 hover:text-foreground',