@sero-ai/ui 0.3.2 → 0.4.1

package/dist/components/dashboard/tone.cjs

@@ -0,0 +1,34 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});const toneColor = {
+  neutral: "text-[var(--text-muted)]",
+  success: "text-[var(--status-success)]",
+  warning: "text-[var(--status-warning)]",
+  error: "text-[var(--status-error)]",
+  info: "text-[var(--status-info)]"
+};
+const toneDot = {
+  neutral: "bg-[var(--text-muted)]",
+  success: "bg-[var(--status-success)]",
+  warning: "bg-[var(--status-warning)]",
+  error: "bg-[var(--status-error)]",
+  info: "bg-[var(--status-info)]"
+};
+const toneLabel = {
+  neutral: "Neutral",
+  success: "Success",
+  warning: "Warning",
+  error: "Error",
+  info: "Info"
+};
+const tonePill = {
+  neutral: "bg-[var(--surface-flat)] text-[var(--text-secondary)]",
+  success: "bg-[var(--status-success-muted)] text-[var(--status-success)]",
+  warning: "bg-[var(--status-warning-muted)] text-[var(--status-warning)]",
+  error: "bg-[var(--status-error-muted)] text-[var(--status-error)]",
+  info: "bg-[var(--status-info-muted)] text-[var(--status-info)]"
+};
+
+
+
+
+
+exports.toneColor = toneColor; exports.toneDot = toneDot; exports.toneLabel = toneLabel; exports.tonePill = tonePill;

package/dist/components/dashboard/tone.d.cts

@@ -0,0 +1,15 @@
+type Tone = "neutral" | "success" | "warning" | "error" | "info";
+/** Solid foreground colour for a tone (dots, icons, emphasised text). */
+declare const toneColor: Record<Tone, string>;
+/** Solid background colour for a tone (status dots). */
+declare const toneDot: Record<Tone, string>;
+/**
+ * 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`.
+ */
+declare const toneLabel: Record<Tone, string>;
+/** Muted tinted background + matching text for a tone (pills, chips). */
+declare const tonePill: Record<Tone, string>;
+
+export { type Tone, toneColor, toneDot, toneLabel, tonePill };

package/dist/components/dashboard/tone.d.ts

@@ -0,0 +1,15 @@
+type Tone = "neutral" | "success" | "warning" | "error" | "info";
+/** Solid foreground colour for a tone (dots, icons, emphasised text). */
+declare const toneColor: Record<Tone, string>;
+/** Solid background colour for a tone (status dots). */
+declare const toneDot: Record<Tone, string>;
+/**
+ * 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`.
+ */
+declare const toneLabel: Record<Tone, string>;
+/** Muted tinted background + matching text for a tone (pills, chips). */
+declare const tonePill: Record<Tone, string>;
+
+export { type Tone, toneColor, toneDot, toneLabel, tonePill };

package/dist/components/dashboard/tone.js

@@ -0,0 +1,34 @@
+const toneColor = {
+  neutral: "text-[var(--text-muted)]",
+  success: "text-[var(--status-success)]",
+  warning: "text-[var(--status-warning)]",
+  error: "text-[var(--status-error)]",
+  info: "text-[var(--status-info)]"
+};
+const toneDot = {
+  neutral: "bg-[var(--text-muted)]",
+  success: "bg-[var(--status-success)]",
+  warning: "bg-[var(--status-warning)]",
+  error: "bg-[var(--status-error)]",
+  info: "bg-[var(--status-info)]"
+};
+const toneLabel = {
+  neutral: "Neutral",
+  success: "Success",
+  warning: "Warning",
+  error: "Error",
+  info: "Info"
+};
+const tonePill = {
+  neutral: "bg-[var(--surface-flat)] text-[var(--text-secondary)]",
+  success: "bg-[var(--status-success-muted)] text-[var(--status-success)]",
+  warning: "bg-[var(--status-warning-muted)] text-[var(--status-warning)]",
+  error: "bg-[var(--status-error-muted)] text-[var(--status-error)]",
+  info: "bg-[var(--status-info-muted)] text-[var(--status-info)]"
+};
+export {
+  toneColor,
+  toneDot,
+  toneLabel,
+  tonePill
+};

package/dist/components/dashboard/typography.cjs

@@ -0,0 +1,99 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _classvarianceauthority = require('class-variance-authority');
+var _utils = require('../../lib/utils');
+var _tone = require('./tone');
+const textVariants = _classvarianceauthority.cva.call(void 0, "min-w-0", {
+  variants: {
+    variant: {
+      body: "text-sm text-[var(--text-primary)]",
+      label: "text-[11px] 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)]"
+    }
+  },
+  defaultVariants: { variant: "body" }
+});
+const clampClass = {
+  1: "line-clamp-1",
+  2: "line-clamp-2",
+  3: "line-clamp-3"
+};
+function Text({
+  className,
+  variant,
+  truncate,
+  clamp,
+  tone,
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "span",
+    {
+      "data-slot": "text",
+      className: _utils.cn.call(void 0, 
+        textVariants({ variant }),
+        clamp ? clampClass[clamp] : truncate && "truncate",
+        tone && _tone.toneColor[tone],
+        className
+      ),
+      ...props
+    }
+  );
+}
+const headingSize = {
+  sm: "text-xs font-semibold",
+  md: "text-sm font-semibold",
+  lg: "text-base font-semibold"
+};
+function Heading({
+  className,
+  level = 2,
+  size = "md",
+  truncate,
+  ...props
+}) {
+  const Tag = `h${level}`;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Tag,
+    {
+      "data-slot": "heading",
+      className: _utils.cn.call(void 0, 
+        "leading-snug text-[var(--text-primary)]",
+        headingSize[size],
+        truncate && "truncate",
+        className
+      ),
+      ...props
+    }
+  );
+}
+const iconSize = {
+  xs: "size-3",
+  sm: "size-3.5",
+  md: "size-4",
+  lg: "size-5"
+};
+function Icon({ className, icon: IconCmp, size = "md", tone, label, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "span",
+    {
+      "data-slot": "icon",
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      className: _utils.cn.call(void 0, 
+        "inline-flex shrink-0 items-center justify-center",
+        tone ? _tone.toneColor[tone] : "text-[var(--text-muted)]",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, IconCmp, { className: iconSize[size] })
+    }
+  );
+}
+
+
+
+
+exports.Heading = Heading; exports.Icon = Icon; exports.Text = Text;

package/dist/components/dashboard/typography.d.cts

@@ -0,0 +1,57 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { Tone } from './tone.cjs';
+
+declare const textVariants: (props?: ({
+    variant?: "body" | "label" | "numeric" | "muted" | "supporting" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TextProps extends Omit<React.ComponentProps<"span">, "color">, VariantProps<typeof textVariants> {
+    /** Truncate to a single line with an ellipsis. */
+    truncate?: boolean;
+    /** Clamp to N lines. Overrides `truncate`. */
+    clamp?: 1 | 2 | 3;
+    /** Semantic colour override (e.g. a numeric value that turns red on error). */
+    tone?: Tone;
+    asChild?: boolean;
+}
+/** Semantic text with truncation, line-clamp and optional tone. */
+declare function Text({ className, variant, truncate, clamp, tone, ...props }: TextProps): react_jsx_runtime.JSX.Element;
+declare const headingSize: {
+    readonly sm: "text-xs font-semibold";
+    readonly md: "text-sm font-semibold";
+    readonly lg: "text-base font-semibold";
+};
+interface HeadingProps extends React.ComponentProps<"h2"> {
+    /** HTML heading level for correct document semantics (1–4). */
+    level?: 1 | 2 | 3 | 4;
+    /** Visual size, decoupled from the semantic level. */
+    size?: keyof typeof headingSize;
+    truncate?: boolean;
+}
+/** Compact heading with correct HTML semantics decoupled from visual size. */
+declare function Heading({ className, level, size, truncate, ...props }: HeadingProps): react_jsx_runtime.JSX.Element;
+declare const iconSize: {
+    readonly xs: "size-3";
+    readonly sm: "size-3.5";
+    readonly md: "size-4";
+    readonly lg: "size-5";
+};
+interface IconProps extends React.ComponentProps<"span"> {
+    /** The icon component to render (e.g. a lucide-react icon). */
+    icon: React.ComponentType<{
+        className?: string;
+    }>;
+    size?: keyof typeof iconSize;
+    tone?: Tone;
+    /**
+     * Accessible label. When omitted the icon is decorative and hidden from
+     * assistive tech; when provided it is exposed as an image with this name.
+     */
+    label?: string;
+}
+/** Consistent icon wrapper for size, tone and accessibility. */
+declare function Icon({ className, icon: IconCmp, size, tone, label, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+
+export { Heading, type HeadingProps, Icon, type IconProps, Text, type TextProps };

package/dist/components/dashboard/typography.d.ts

@@ -0,0 +1,57 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { Tone } from './tone.js';
+
+declare const textVariants: (props?: ({
+    variant?: "body" | "label" | "numeric" | "muted" | "supporting" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TextProps extends Omit<React.ComponentProps<"span">, "color">, VariantProps<typeof textVariants> {
+    /** Truncate to a single line with an ellipsis. */
+    truncate?: boolean;
+    /** Clamp to N lines. Overrides `truncate`. */
+    clamp?: 1 | 2 | 3;
+    /** Semantic colour override (e.g. a numeric value that turns red on error). */
+    tone?: Tone;
+    asChild?: boolean;
+}
+/** Semantic text with truncation, line-clamp and optional tone. */
+declare function Text({ className, variant, truncate, clamp, tone, ...props }: TextProps): react_jsx_runtime.JSX.Element;
+declare const headingSize: {
+    readonly sm: "text-xs font-semibold";
+    readonly md: "text-sm font-semibold";
+    readonly lg: "text-base font-semibold";
+};
+interface HeadingProps extends React.ComponentProps<"h2"> {
+    /** HTML heading level for correct document semantics (1–4). */
+    level?: 1 | 2 | 3 | 4;
+    /** Visual size, decoupled from the semantic level. */
+    size?: keyof typeof headingSize;
+    truncate?: boolean;
+}
+/** Compact heading with correct HTML semantics decoupled from visual size. */
+declare function Heading({ className, level, size, truncate, ...props }: HeadingProps): react_jsx_runtime.JSX.Element;
+declare const iconSize: {
+    readonly xs: "size-3";
+    readonly sm: "size-3.5";
+    readonly md: "size-4";
+    readonly lg: "size-5";
+};
+interface IconProps extends React.ComponentProps<"span"> {
+    /** The icon component to render (e.g. a lucide-react icon). */
+    icon: React.ComponentType<{
+        className?: string;
+    }>;
+    size?: keyof typeof iconSize;
+    tone?: Tone;
+    /**
+     * Accessible label. When omitted the icon is decorative and hidden from
+     * assistive tech; when provided it is exposed as an image with this name.
+     */
+    label?: string;
+}
+/** Consistent icon wrapper for size, tone and accessibility. */
+declare function Icon({ className, icon: IconCmp, size, tone, label, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+
+export { Heading, type HeadingProps, Icon, type IconProps, Text, type TextProps };

package/dist/components/dashboard/typography.js

@@ -0,0 +1,99 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+import { toneColor } from "./tone";
+const textVariants = cva("min-w-0", {
+  variants: {
+    variant: {
+      body: "text-sm text-[var(--text-primary)]",
+      label: "text-[11px] 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)]"
+    }
+  },
+  defaultVariants: { variant: "body" }
+});
+const clampClass = {
+  1: "line-clamp-1",
+  2: "line-clamp-2",
+  3: "line-clamp-3"
+};
+function Text({
+  className,
+  variant,
+  truncate,
+  clamp,
+  tone,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "text",
+      className: cn(
+        textVariants({ variant }),
+        clamp ? clampClass[clamp] : truncate && "truncate",
+        tone && toneColor[tone],
+        className
+      ),
+      ...props
+    }
+  );
+}
+const headingSize = {
+  sm: "text-xs font-semibold",
+  md: "text-sm font-semibold",
+  lg: "text-base font-semibold"
+};
+function Heading({
+  className,
+  level = 2,
+  size = "md",
+  truncate,
+  ...props
+}) {
+  const Tag = `h${level}`;
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      "data-slot": "heading",
+      className: cn(
+        "leading-snug text-[var(--text-primary)]",
+        headingSize[size],
+        truncate && "truncate",
+        className
+      ),
+      ...props
+    }
+  );
+}
+const iconSize = {
+  xs: "size-3",
+  sm: "size-3.5",
+  md: "size-4",
+  lg: "size-5"
+};
+function Icon({ className, icon: IconCmp, size = "md", tone, label, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "icon",
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      className: cn(
+        "inline-flex shrink-0 items-center justify-center",
+        tone ? toneColor[tone] : "text-[var(--text-muted)]",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(IconCmp, { className: iconSize[size] })
+    }
+  );
+}
+export {
+  Heading,
+  Icon,
+  Text
+};

package/dist/components/ui/badge.cjs

@@ -12,7 +12,11 @@ const badgeVariants = _classvarianceauthority.cva.call(void 0,
         destructive: "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
         ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 [a&]:hover:underline"
+        link: "text-primary underline-offset-4 [a&]:hover:underline",
+        // Semantic status tones (error is covered by `destructive`).
+        success: "bg-[var(--status-success-muted)] text-[var(--status-success)]",
+        warning: "bg-[var(--status-warning-muted)] text-[var(--status-warning)]",
+        info: "bg-[var(--status-info-muted)] text-[var(--status-info)]"
       }
     },
     defaultVariants: {

package/dist/components/ui/badge.d.cts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | "success" | "warning" | "info" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;

package/dist/components/ui/badge.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | "success" | "warning" | "info" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;

package/dist/components/ui/badge.js

@@ -12,7 +12,11 @@ const badgeVariants = cva(
         destructive: "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
         ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 [a&]:hover:underline"
+        link: "text-primary underline-offset-4 [a&]:hover:underline",
+        // Semantic status tones (error is covered by `destructive`).
+        success: "bg-[var(--status-success-muted)] text-[var(--status-success)]",
+        warning: "bg-[var(--status-warning-muted)] text-[var(--status-warning)]",
+        info: "bg-[var(--status-info-muted)] text-[var(--status-info)]"
       }
     },
     defaultVariants: {

package/dist/index.cjs

@@ -112,6 +112,7 @@ var _transcription = require('./components/ai-elements/transcription'); _createS
 var _voiceselectoraccent = require('./components/ai-elements/voice-selector-accent'); _createStarExport(_voiceselectoraccent);
 var _voiceselector = require('./components/ai-elements/voice-selector'); _createStarExport(_voiceselector);
 var _webpreview = require('./components/ai-elements/web-preview'); _createStarExport(_webpreview);
+var _dashboard = require('./components/dashboard'); _createStarExport(_dashboard);
 var _availablemodelpicker = require('./components/model-selection/available-model-picker'); _createStarExport(_availablemodelpicker);
 var _modelwarninglist = require('./components/model-selection/model-warning-list'); _createStarExport(_modelwarninglist);
 var _thinkinglevelpicker = require('./components/model-selection/thinking-level-picker'); _createStarExport(_thinkinglevelpicker);

package/dist/index.d.cts

@@ -113,6 +113,22 @@ export { Transcription, TranscriptionProps, TranscriptionSegment, TranscriptionS
 export { VoiceSelectorAccent, VoiceSelectorAccentProps, VoiceSelectorAccentValue } from './components/ai-elements/voice-selector-accent.cjs';
 export { VoiceSelector, VoiceSelectorAge, VoiceSelectorAgeProps, VoiceSelectorAttributes, VoiceSelectorAttributesProps, VoiceSelectorBullet, VoiceSelectorBulletProps, VoiceSelectorContent, VoiceSelectorContentProps, VoiceSelectorDescription, VoiceSelectorDescriptionProps, VoiceSelectorDialog, VoiceSelectorDialogProps, VoiceSelectorEmpty, VoiceSelectorEmptyProps, VoiceSelectorGender, VoiceSelectorGenderProps, VoiceSelectorGroup, VoiceSelectorGroupProps, VoiceSelectorInput, VoiceSelectorInputProps, VoiceSelectorItem, VoiceSelectorItemProps, VoiceSelectorList, VoiceSelectorListProps, VoiceSelectorName, VoiceSelectorNameProps, VoiceSelectorPreview, VoiceSelectorPreviewProps, VoiceSelectorProps, VoiceSelectorSeparator, VoiceSelectorSeparatorProps, VoiceSelectorShortcut, VoiceSelectorShortcutProps, VoiceSelectorTrigger, VoiceSelectorTriggerProps, useVoiceSelector } from './components/ai-elements/voice-selector.cjs';
 export { WebPreview, WebPreviewBody, WebPreviewBodyProps, WebPreviewConsole, WebPreviewConsoleProps, WebPreviewContextValue, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewNavigationButtonProps, WebPreviewNavigationProps, WebPreviewProps, WebPreviewUrl, WebPreviewUrlProps } from './components/ai-elements/web-preview.cjs';
+export { Tone, toneColor, toneDot, toneLabel, tonePill } from './components/dashboard/tone.cjs';
+export { Gap, gapClass } from './components/dashboard/spacing.cjs';
+export { Divider, DividerProps, Grid, GridProps, Inline, InlineProps, Section, SectionProps, Stack, StackProps, WidgetContent, WidgetContentProps } from './components/dashboard/layout.cjs';
+export { Heading, HeadingProps, Icon, IconProps, Text, TextProps } from './components/dashboard/typography.cjs';
+export { Metric, MetricCard, MetricCardProps, MetricGroup, MetricGroupProps, MetricProps, MetricTrend } from './components/dashboard/metric.cjs';
+export { Status, StatusProps } from './components/dashboard/status.cjs';
+export { KeyValue, KeyValueList, KeyValueListProps, KeyValueProps } from './components/dashboard/key-value.cjs';
+export { ItemList, ItemListItem, ItemListItemProps, ItemListProps } from './components/dashboard/item-list.cjs';
+export { ActivityList, ActivityListItem, ActivityListItemProps, ActivityListProps } from './components/dashboard/activity-list.cjs';
+export { ProgressRing, ProgressRingProps } from './components/dashboard/progress-ring.cjs';
+export { StaleIndicator, StaleIndicatorProps } from './components/dashboard/stale-indicator.cjs';
+export { DataBoundary, DataBoundaryProps, DataState } from './components/dashboard/data-boundary.cjs';
+export { EmptyState, EmptyStateProps } from './components/dashboard/empty-state.cjs';
+export { ActivitySkeleton, ListSkeleton, MetricSkeleton, SkeletonPatternProps } from './components/dashboard/skeletons.cjs';
+export { IconButton, IconButtonProps } from './components/dashboard/icon-button.cjs';
+export { DashboardComponentCatalogEntry } from './components/dashboard/catalog.cjs';
 export { AvailableModelPicker } from './components/model-selection/available-model-picker.cjs';
 export { ModelWarningList } from './components/model-selection/model-warning-list.cjs';
 export { ThinkingLevelPicker } from './components/model-selection/thinking-level-picker.cjs';

package/dist/index.d.ts

@@ -113,6 +113,22 @@ export { Transcription, TranscriptionProps, TranscriptionSegment, TranscriptionS
 export { VoiceSelectorAccent, VoiceSelectorAccentProps, VoiceSelectorAccentValue } from './components/ai-elements/voice-selector-accent.js';
 export { VoiceSelector, VoiceSelectorAge, VoiceSelectorAgeProps, VoiceSelectorAttributes, VoiceSelectorAttributesProps, VoiceSelectorBullet, VoiceSelectorBulletProps, VoiceSelectorContent, VoiceSelectorContentProps, VoiceSelectorDescription, VoiceSelectorDescriptionProps, VoiceSelectorDialog, VoiceSelectorDialogProps, VoiceSelectorEmpty, VoiceSelectorEmptyProps, VoiceSelectorGender, VoiceSelectorGenderProps, VoiceSelectorGroup, VoiceSelectorGroupProps, VoiceSelectorInput, VoiceSelectorInputProps, VoiceSelectorItem, VoiceSelectorItemProps, VoiceSelectorList, VoiceSelectorListProps, VoiceSelectorName, VoiceSelectorNameProps, VoiceSelectorPreview, VoiceSelectorPreviewProps, VoiceSelectorProps, VoiceSelectorSeparator, VoiceSelectorSeparatorProps, VoiceSelectorShortcut, VoiceSelectorShortcutProps, VoiceSelectorTrigger, VoiceSelectorTriggerProps, useVoiceSelector } from './components/ai-elements/voice-selector.js';
 export { WebPreview, WebPreviewBody, WebPreviewBodyProps, WebPreviewConsole, WebPreviewConsoleProps, WebPreviewContextValue, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewNavigationButtonProps, WebPreviewNavigationProps, WebPreviewProps, WebPreviewUrl, WebPreviewUrlProps } from './components/ai-elements/web-preview.js';
+export { Tone, toneColor, toneDot, toneLabel, tonePill } from './components/dashboard/tone.js';
+export { Gap, gapClass } from './components/dashboard/spacing.js';
+export { Divider, DividerProps, Grid, GridProps, Inline, InlineProps, Section, SectionProps, Stack, StackProps, WidgetContent, WidgetContentProps } from './components/dashboard/layout.js';
+export { Heading, HeadingProps, Icon, IconProps, Text, TextProps } from './components/dashboard/typography.js';
+export { Metric, MetricCard, MetricCardProps, MetricGroup, MetricGroupProps, MetricProps, MetricTrend } from './components/dashboard/metric.js';
+export { Status, StatusProps } from './components/dashboard/status.js';
+export { KeyValue, KeyValueList, KeyValueListProps, KeyValueProps } from './components/dashboard/key-value.js';
+export { ItemList, ItemListItem, ItemListItemProps, ItemListProps } from './components/dashboard/item-list.js';
+export { ActivityList, ActivityListItem, ActivityListItemProps, ActivityListProps } from './components/dashboard/activity-list.js';
+export { ProgressRing, ProgressRingProps } from './components/dashboard/progress-ring.js';
+export { StaleIndicator, StaleIndicatorProps } from './components/dashboard/stale-indicator.js';
+export { DataBoundary, DataBoundaryProps, DataState } from './components/dashboard/data-boundary.js';
+export { EmptyState, EmptyStateProps } from './components/dashboard/empty-state.js';
+export { ActivitySkeleton, ListSkeleton, MetricSkeleton, SkeletonPatternProps } from './components/dashboard/skeletons.js';
+export { IconButton, IconButtonProps } from './components/dashboard/icon-button.js';
+export { DashboardComponentCatalogEntry } from './components/dashboard/catalog.js';
 export { AvailableModelPicker } from './components/model-selection/available-model-picker.js';
 export { ModelWarningList } from './components/model-selection/model-warning-list.js';
 export { ThinkingLevelPicker } from './components/model-selection/thinking-level-picker.js';

package/dist/index.js

@@ -112,6 +112,7 @@ export * from "./components/ai-elements/transcription";
 export * from "./components/ai-elements/voice-selector-accent";
 export * from "./components/ai-elements/voice-selector";
 export * from "./components/ai-elements/web-preview";
+export * from "./components/dashboard";
 export * from "./components/model-selection/available-model-picker";
 export * from "./components/model-selection/model-warning-list";
 export * from "./components/model-selection/thinking-level-picker";