@sero-ai/ui 0.3.2 → 0.4.0

package/dist/components/reference/SchedulerExample.cjs

@@ -0,0 +1,68 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _lucidereact = require('lucide-react');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _dashboard = require('../dashboard');
+var _button = require('../ui/button');
+const UPCOMING = [
+  { id: "a", label: "Daily backup", timestamp: "08:00", tone: "success" },
+  { id: "b", label: "Publish report", timestamp: "in 2h", tone: "info" },
+  { id: "c", label: "Rotate API keys", timestamp: "tomorrow", tone: "warning" }
+];
+function SchedulerExample() {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.WidgetContent, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _dashboard.Stack, { gap: "sm", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _dashboard.Inline, { justify: "between", align: "center", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Status, { tone: "success", pulse: true, children: "Scheduler active" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.ProgressRing, { value: 92, label: "Success rate", tone: "success", size: 40 })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Section, { heading: "Summary", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _dashboard.Inline, { gap: "sm", wrap: true, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.MetricCard, { className: "flex-1", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Metric, { label: "Jobs", value: 6 }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.MetricCard, { className: "flex-1", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _dashboard.Metric,
+        {
+          label: "Runs today",
+          value: 18,
+          trend: { direction: "up", value: "+4", tone: "success" }
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Divider, {}),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _dashboard.Section,
+      {
+        heading: "Next up",
+        action: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _button.Button, { size: "xs", variant: "ghost", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ExternalLink, { className: "size-3" }),
+          "All"
+        ] }),
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.DataBoundary, { state: "ready", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.ActivityList, { children: UPCOMING.map((e) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _dashboard.ActivityListItem,
+          {
+            tone: e.tone,
+            label: e.label,
+            timestamp: e.timestamp
+          },
+          e.id
+        )) }) })
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.StaleIndicator, { lastUpdated: "Updated 2m ago" })
+  ] }) });
+}
+var SchedulerExample_default = SchedulerExample;
+
+
+
+exports.SchedulerExample = SchedulerExample; exports.default = SchedulerExample_default;

package/dist/components/reference/SchedulerExample.d.cts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function SchedulerExample(): react_jsx_runtime.JSX.Element;
+
+export { SchedulerExample, SchedulerExample as default };

package/dist/components/reference/SchedulerExample.d.ts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function SchedulerExample(): react_jsx_runtime.JSX.Element;
+
+export { SchedulerExample, SchedulerExample as default };

package/dist/components/reference/SchedulerExample.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ExternalLink } from "lucide-react";
+import {
+  ActivityList,
+  ActivityListItem,
+  DataBoundary,
+  Divider,
+  Inline,
+  Metric,
+  MetricCard,
+  ProgressRing,
+  Section,
+  Stack,
+  StaleIndicator,
+  Status,
+  WidgetContent
+} from "../dashboard";
+import { Button } from "../ui/button";
+const UPCOMING = [
+  { id: "a", label: "Daily backup", timestamp: "08:00", tone: "success" },
+  { id: "b", label: "Publish report", timestamp: "in 2h", tone: "info" },
+  { id: "c", label: "Rotate API keys", timestamp: "tomorrow", tone: "warning" }
+];
+function SchedulerExample() {
+  return /* @__PURE__ */ jsx(WidgetContent, { children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+    /* @__PURE__ */ jsxs(Inline, { justify: "between", align: "center", children: [
+      /* @__PURE__ */ jsx(Status, { tone: "success", pulse: true, children: "Scheduler active" }),
+      /* @__PURE__ */ jsx(ProgressRing, { value: 92, label: "Success rate", tone: "success", size: 40 })
+    ] }),
+    /* @__PURE__ */ jsx(Section, { heading: "Summary", children: /* @__PURE__ */ jsxs(Inline, { gap: "sm", wrap: true, children: [
+      /* @__PURE__ */ jsx(MetricCard, { className: "flex-1", children: /* @__PURE__ */ jsx(Metric, { label: "Jobs", value: 6 }) }),
+      /* @__PURE__ */ jsx(MetricCard, { className: "flex-1", children: /* @__PURE__ */ jsx(
+        Metric,
+        {
+          label: "Runs today",
+          value: 18,
+          trend: { direction: "up", value: "+4", tone: "success" }
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(
+      Section,
+      {
+        heading: "Next up",
+        action: /* @__PURE__ */ jsxs(Button, { size: "xs", variant: "ghost", children: [
+          /* @__PURE__ */ jsx(ExternalLink, { className: "size-3" }),
+          "All"
+        ] }),
+        children: /* @__PURE__ */ jsx(DataBoundary, { state: "ready", children: /* @__PURE__ */ jsx(ActivityList, { children: UPCOMING.map((e) => /* @__PURE__ */ jsx(
+          ActivityListItem,
+          {
+            tone: e.tone,
+            label: e.label,
+            timestamp: e.timestamp
+          },
+          e.id
+        )) }) })
+      }
+    ),
+    /* @__PURE__ */ jsx(StaleIndicator, { lastUpdated: "Updated 2m ago" })
+  ] }) });
+}
+var SchedulerExample_default = SchedulerExample;
+export {
+  SchedulerExample,
+  SchedulerExample_default as default
+};

package/dist/components/reference/StarterExample.cjs

@@ -0,0 +1,34 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _lucidereact = require('lucide-react');
+
+
+
+
+
+
+
+var _dashboard = require('../dashboard');
+const RECENT = [
+  { id: "a", label: "Nightly build", timestamp: "12m", tone: "success" },
+  { id: "b", label: "Deploy to staging", timestamp: "1h", tone: "info" },
+  { id: "c", label: "Dependency audit", timestamp: "3h", tone: "neutral" }
+];
+function StarterExample() {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.WidgetContent, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _dashboard.Stack, { gap: "sm", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Metric, { label: "Tasks done", value: 12, icon: _lucidereact.CheckCircle2, tone: "success" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Section, { heading: "Recent", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.ActivityList, { children: RECENT.map((e) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _dashboard.ActivityListItem,
+      {
+        tone: e.tone,
+        label: e.label,
+        timestamp: e.timestamp
+      },
+      e.id
+    )) }) })
+  ] }) });
+}
+var StarterExample_default = StarterExample;
+
+
+
+exports.StarterExample = StarterExample; exports.default = StarterExample_default;

package/dist/components/reference/StarterExample.d.cts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function StarterExample(): react_jsx_runtime.JSX.Element;
+
+export { StarterExample, StarterExample as default };

package/dist/components/reference/StarterExample.d.ts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function StarterExample(): react_jsx_runtime.JSX.Element;
+
+export { StarterExample, StarterExample as default };

package/dist/components/reference/StarterExample.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckCircle2 } from "lucide-react";
+import {
+  ActivityList,
+  ActivityListItem,
+  Metric,
+  Section,
+  Stack,
+  WidgetContent
+} from "../dashboard";
+const RECENT = [
+  { id: "a", label: "Nightly build", timestamp: "12m", tone: "success" },
+  { id: "b", label: "Deploy to staging", timestamp: "1h", tone: "info" },
+  { id: "c", label: "Dependency audit", timestamp: "3h", tone: "neutral" }
+];
+function StarterExample() {
+  return /* @__PURE__ */ jsx(WidgetContent, { children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+    /* @__PURE__ */ jsx(Metric, { label: "Tasks done", value: 12, icon: CheckCircle2, tone: "success" }),
+    /* @__PURE__ */ jsx(Section, { heading: "Recent", children: /* @__PURE__ */ jsx(ActivityList, { children: RECENT.map((e) => /* @__PURE__ */ jsx(
+      ActivityListItem,
+      {
+        tone: e.tone,
+        label: e.label,
+        timestamp: e.timestamp
+      },
+      e.id
+    )) }) })
+  ] }) });
+}
+var StarterExample_default = StarterExample;
+export {
+  StarterExample,
+  StarterExample_default as default
+};

package/dist/components/reference/index.cjs

@@ -0,0 +1,10 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _StarterExample = require('./StarterExample');
+var _SchedulerExample = require('./SchedulerExample');
+var _ResourceExample = require('./ResourceExample');
+var _ActivityExample = require('./ActivityExample');
+
+
+
+
+
+exports.ActivityExample = _ActivityExample.ActivityExample; exports.ResourceExample = _ResourceExample.ResourceExample; exports.SchedulerExample = _SchedulerExample.SchedulerExample; exports.StarterExample = _StarterExample.StarterExample;

package/dist/components/reference/index.d.cts

@@ -0,0 +1,5 @@
+export { StarterExample } from './StarterExample.cjs';
+export { SchedulerExample } from './SchedulerExample.cjs';
+export { ResourceExample } from './ResourceExample.cjs';
+export { ActivityExample } from './ActivityExample.cjs';
+import 'react/jsx-runtime';

package/dist/components/reference/index.d.ts

@@ -0,0 +1,5 @@
+export { StarterExample } from './StarterExample.js';
+export { SchedulerExample } from './SchedulerExample.js';
+export { ResourceExample } from './ResourceExample.js';
+export { ActivityExample } from './ActivityExample.js';
+import 'react/jsx-runtime';

package/dist/components/reference/index.js

@@ -0,0 +1,10 @@
+import { StarterExample } from "./StarterExample";
+import { SchedulerExample } from "./SchedulerExample";
+import { ResourceExample } from "./ResourceExample";
+import { ActivityExample } from "./ActivityExample";
+export {
+  ActivityExample,
+  ResourceExample,
+  SchedulerExample,
+  StarterExample
+};

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/dashboard-catalog.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _catalog = require('./components/dashboard/catalog'); var _catalog2 = _interopRequireDefault(_catalog);
+
+
+
+
+exports.dashboardComponentCatalog = _catalog.dashboardComponentCatalog; exports.default = _catalog2.default;

package/dist/dashboard-catalog.d.cts

@@ -0,0 +1 @@
+export { DashboardComponentCatalogEntry, dashboardComponentCatalog, dashboardComponentCatalog as default } from './components/dashboard/catalog.cjs';

package/dist/dashboard-catalog.d.ts

@@ -0,0 +1 @@
+export { DashboardComponentCatalogEntry, dashboardComponentCatalog, dashboardComponentCatalog as default } from './components/dashboard/catalog.js';

package/dist/dashboard-catalog.js

@@ -0,0 +1,8 @@
+import {
+  dashboardComponentCatalog
+} from "./components/dashboard/catalog";
+import { default as default2 } from "./components/dashboard/catalog";
+export {
+  dashboardComponentCatalog,
+  default2 as default
+};

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,21 @@ 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, 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 { 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,21 @@ 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, 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 { 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";

package/dist/reference.cjs

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+
+var _reference = require('./components/reference');
+
+
+
+
+
+exports.ActivityExample = _reference.ActivityExample; exports.ResourceExample = _reference.ResourceExample; exports.SchedulerExample = _reference.SchedulerExample; exports.StarterExample = _reference.StarterExample;

package/dist/reference.d.cts

@@ -0,0 +1,5 @@
+export { StarterExample } from './components/reference/StarterExample.cjs';
+export { SchedulerExample } from './components/reference/SchedulerExample.cjs';
+export { ResourceExample } from './components/reference/ResourceExample.cjs';
+export { ActivityExample } from './components/reference/ActivityExample.cjs';
+import 'react/jsx-runtime';

package/dist/reference.d.ts

@@ -0,0 +1,5 @@
+export { StarterExample } from './components/reference/StarterExample.js';
+export { SchedulerExample } from './components/reference/SchedulerExample.js';
+export { ResourceExample } from './components/reference/ResourceExample.js';
+export { ActivityExample } from './components/reference/ActivityExample.js';
+import 'react/jsx-runtime';

package/dist/reference.js

@@ -0,0 +1,12 @@
+import {
+  StarterExample,
+  SchedulerExample,
+  ResourceExample,
+  ActivityExample
+} from "./components/reference";
+export {
+  ActivityExample,
+  ResourceExample,
+  SchedulerExample,
+  StarterExample
+};

package/dist/styles/glass-board.css

@@ -0,0 +1,43 @@
+/**
+ * Shared glass board — the frosted-board look, framework-agnostic.
+ *
+ * `.glass-canvas` paints the ambient accent-glow backdrop; `.glass-tile`
+ * is a translucent, backdrop-blurred surface with a luminous hairline rim.
+ * The desktop dashboard and the styleguide preview both consume this file
+ * so widgets render on an identical board.
+ *
+ * Depends on the canonical `--glass-*` tokens in globals.css. Dark is the
+ * primary target; light mirrors the same relationships (frosted white
+ * glass over a soft tinted canvas).
+ */
+
+/* ── Canvas ──────────────────────────────────────────────────────
+   Ambient accent glow the glass tiles pick up. */
+.glass-canvas {
+  --glass-canvas-base: #e9eaef;
+  --glass-glow-a: color-mix(in srgb, var(--accent-primary) 16%, transparent);
+  --glass-glow-b: color-mix(in srgb, var(--brand-primary) 12%, transparent);
+  background:
+    radial-gradient(90% 70% at 85% -10%, var(--glass-glow-a), transparent 60%),
+    radial-gradient(80% 60% at -10% 110%, var(--glass-glow-b), transparent 60%),
+    var(--glass-canvas-base);
+}
+
+.dark .glass-canvas {
+  --glass-canvas-base: #060608;
+  --glass-glow-a: color-mix(in srgb, var(--accent-primary) 48%, transparent);
+  --glass-glow-b: color-mix(in srgb, var(--brand-primary) 30%, transparent);
+}
+
+/* ── Glass tile surface ──────────────────────────────────────────
+   Translucent, blurred surface floating over the canvas. The surface is
+   static on hover — the tile is content, not a button, so pointing at it
+   must not change it. (`--glass-hover` is still used for row hover *inside*
+   widgets.) The transition covers the drag/resize state changes only. */
+.glass-tile {
+  background: var(--glass-tile);
+  border: 1px solid var(--glass-border);
+  backdrop-filter: blur(24px) saturate(140%);
+  box-shadow: inset 0 1px 0 var(--glass-rim);
+  transition: background-color 150ms ease, border-color 150ms ease;
+}

package/dist/styles/globals.css

@@ -179,6 +179,27 @@
   --sidebar-accent-foreground: var(--text-primary);
   --sidebar-border: var(--border-subtle);
   --sidebar-ring: var(--border-focus);
+
+  /* ── Glass (dashboard) ────────────────────────────────────
+     Canonical translucent surface language for the glass
+     dashboard. The host `dashboard.css` derives its `--dash-*`
+     tokens from these, and the `.glass` scope below remaps the
+     component-facing `--surface-*` tokens to them. Light =
+     frosted white; dark values live in the `.dark` block. */
+  --glass-tile: rgba(255, 255, 255, 0.52); /* base tile (host) */
+  --glass-surface: rgba(255, 255, 255, 0.62); /* raised card */
+  --glass-surface-flat: rgba(255, 255, 255, 0.40); /* flat row */
+  --glass-border: rgba(15, 17, 23, 0.10);
+  --glass-rim: rgba(255, 255, 255, 0.60);
+  --glass-hover: rgba(255, 255, 255, 0.72);
+
+  /* Component-facing surface tokens. Default to the solid design
+     tokens so components look unchanged outside the `.glass`
+     scope; the scope flips them to the glass values above. */
+  --surface-raised: var(--bg-surface);
+  --surface-flat: var(--bg-elevated);
+  --surface-line: var(--border-subtle);
+  --surface-rim: transparent;
 }
 
 /* ── Scrollbars ─────────────────────────────────────────────── */
@@ -421,6 +442,44 @@
   --sidebar-accent-foreground: var(--text-primary);
   --sidebar-border: var(--border-subtle);
   --sidebar-ring: var(--border-focus);
+
+  /* ── Glass (dashboard) — dark: low-opacity white over the dark
+       canvas glow. `--surface-*` defaults stay solid; the `.glass`
+       scope flips them (values shared across themes via the vars). */
+  --glass-tile: rgba(255, 255, 255, 0.06);
+  --glass-surface: rgba(255, 255, 255, 0.09);
+  --glass-surface-flat: rgba(255, 255, 255, 0.05);
+  --glass-border: rgba(255, 255, 255, 0.12);
+  --glass-rim: rgba(255, 255, 255, 0.08);
+  --glass-hover: rgba(255, 255, 255, 0.13);
+}
+
+/* ── Glass scope ─────────────────────────────────────────────────
+   Subtree-local class applied by `WidgetContent` (default on). It
+   remaps the component-facing surface tokens and the container/border
+   shadcn bridge tokens to the translucent glass values, so dashboard
+   components read as part of the frosted tile. Interactive controls
+   (`--input`) and portalled surfaces (`--popover`, rendered at
+   document.body outside this scope) stay solid for legibility. No
+   `backdrop-filter` here — the host tile provides the single blur. */
+.glass {
+  /* component surface tokens */
+  --surface-raised: var(--glass-surface);
+  --surface-flat: var(--glass-surface-flat);
+  --surface-line: var(--glass-border);
+  --surface-rim: var(--glass-rim);
+
+  /* containers + borders for primitives used inside widgets */
+  --card: var(--glass-surface);
+  --secondary: var(--glass-surface-flat);
+  --muted: var(--glass-surface-flat);
+  --accent: var(--glass-surface-flat);
+  --border: var(--glass-border);
+
+  /* keep interactive controls + portalled surfaces solid */
+  --input: var(--border-subtle);
+  --popover: var(--bg-elevated);
+  --ring: var(--border-focus);
 }
 
 html {