@sero-ai/ui 0.3.2 → 0.4.0

package/src/components/reference/ActivityExample.tsx

@@ -0,0 +1,68 @@
+// ActivityExample — a scrollable item list with a header count and a
+// footer status row.
+//
+// Pure static presentation; a real feed would wire its rows through a
+// DataBoundary (loading / empty / error) driven by plugin state. See the
+// runtime-state components in the catalogue for those slots.
+
+import { FileText } from "lucide-react";
+
+import {
+  Inline,
+  ItemList,
+  ItemListItem,
+  Stack,
+  StaleIndicator,
+  Status,
+  Text,
+  WidgetContent,
+} from "../dashboard";
+import { Badge } from "../ui/badge";
+
+const ITEMS = [
+  { id: "1", title: "quarterly-report.pdf", meta: "2h", badge: "PDF" },
+  { id: "2", title: "design-tokens.json", meta: "5h", badge: "JSON" },
+  { id: "3", title: "release-notes.md", meta: "1d", badge: "MD" },
+];
+
+export function ActivityExample() {
+  return (
+    <WidgetContent>
+      <Stack gap="sm" fill>
+        <Inline justify="between" align="center">
+          <Inline gap="xs" align="center">
+            <Text variant="label">Recent files</Text>
+            <Badge variant="info">{ITEMS.length}</Badge>
+          </Inline>
+        </Inline>
+
+        <Stack gap="none" scroll>
+          <ItemList>
+            {ITEMS.map((f) => (
+              <ItemListItem
+                key={f.id}
+                leading={<FileText className="size-4 text-[var(--text-muted)]" />}
+                primary={f.title}
+                trailing={
+                  <Inline gap="xs" align="center">
+                    <Badge variant="secondary">{f.badge}</Badge>
+                    <span>{f.meta}</span>
+                  </Inline>
+                }
+              />
+            ))}
+          </ItemList>
+        </Stack>
+
+        <Inline justify="between" align="center">
+          <Status tone="info" variant="pill">
+            Synced
+          </Status>
+          <StaleIndicator lastUpdated="Synced 30s ago" />
+        </Inline>
+      </Stack>
+    </WidgetContent>
+  );
+}
+
+export default ActivityExample;

package/src/components/reference/ResourceExample.tsx

@@ -0,0 +1,78 @@
+// ResourceExample — a grid, gauges, key/value metadata and headings.
+//
+// Pure static presentation; a real resource monitor would read live host
+// metrics from its plugin.
+
+import {
+  Divider,
+  Grid,
+  Heading,
+  KeyValue,
+  KeyValueList,
+  Metric,
+  MetricGroup,
+  ProgressRing,
+  Section,
+  Stack,
+  Status,
+  Text,
+  WidgetContent,
+} from "../dashboard";
+
+function Ring({
+  value,
+  label,
+  tone,
+}: {
+  value: number;
+  label: string;
+  tone: "success" | "info" | "warning";
+}) {
+  return (
+    <Stack gap="xs" align="center">
+      <ProgressRing value={value} label={label} tone={tone} />
+      <Text variant="muted">{label}</Text>
+    </Stack>
+  );
+}
+
+export function ResourceExample() {
+  return (
+    <WidgetContent scroll>
+      <Stack gap="sm">
+        <Heading level={2} size="md">
+          Resources
+        </Heading>
+
+        <MetricGroup>
+          <Metric label="CPU" value="42%" tone="success" />
+          <Metric label="Memory" value="6.1 GB" />
+          <Metric label="Disk" value="71%" tone="warning" />
+        </MetricGroup>
+
+        <Divider />
+
+        <Section heading="Usage">
+          <Grid columns={3} gap="sm">
+            <Ring value={42} label="CPU" tone="success" />
+            <Ring value={61} label="Memory" tone="info" />
+            <Ring value={71} label="Disk" tone="warning" />
+          </Grid>
+        </Section>
+
+        <Divider />
+
+        <Section heading="Host">
+          <KeyValueList>
+            <KeyValue label="Region" value="eu-west-1" mono />
+            <KeyValue label="Instance" value="c7g.xlarge" mono />
+            <KeyValue label="Uptime" value="14d 6h" mono />
+            <KeyValue label="Status" value={<Status tone="success">Healthy</Status>} />
+          </KeyValueList>
+        </Section>
+      </Stack>
+    </WidgetContent>
+  );
+}
+
+export default ResourceExample;

package/src/components/reference/SchedulerExample.tsx

@@ -0,0 +1,88 @@
+// SchedulerExample — layout, metric cards, a gauge and an activity group.
+//
+// Pure static presentation (fixed sample data, no state or controls); a real
+// scheduler widget would read jobs and run stats from its plugin.
+
+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" as const },
+  { id: "b", label: "Publish report", timestamp: "in 2h", tone: "info" as const },
+  { id: "c", label: "Rotate API keys", timestamp: "tomorrow", tone: "warning" as const },
+];
+
+export function SchedulerExample() {
+  return (
+    <WidgetContent>
+      <Stack gap="sm">
+        <Inline justify="between" align="center">
+          <Status tone="success" pulse>
+            Scheduler active
+          </Status>
+          <ProgressRing value={92} label="Success rate" tone="success" size={40} />
+        </Inline>
+
+        <Section heading="Summary">
+          <Inline gap="sm" wrap>
+            <MetricCard className="flex-1">
+              <Metric label="Jobs" value={6} />
+            </MetricCard>
+            <MetricCard className="flex-1">
+              <Metric
+                label="Runs today"
+                value={18}
+                trend={{ direction: "up", value: "+4", tone: "success" }}
+              />
+            </MetricCard>
+          </Inline>
+        </Section>
+
+        <Divider />
+
+        <Section
+          heading="Next up"
+          action={
+            <Button size="xs" variant="ghost">
+              <ExternalLink className="size-3" />
+              All
+            </Button>
+          }
+        >
+          <DataBoundary state="ready">
+            <ActivityList>
+              {UPCOMING.map((e) => (
+                <ActivityListItem
+                  key={e.id}
+                  tone={e.tone}
+                  label={e.label}
+                  timestamp={e.timestamp}
+                />
+              ))}
+            </ActivityList>
+          </DataBoundary>
+        </Section>
+
+        <StaleIndicator lastUpdated="Updated 2m ago" />
+      </Stack>
+    </WidgetContent>
+  );
+}
+
+export default SchedulerExample;

package/src/components/reference/StarterExample.tsx

@@ -0,0 +1,48 @@
+// StarterExample — the smallest useful widget: a headline metric and a
+// short list. Copy this as the starting point for a new dashboard widget.
+//
+// Reference widgets are pure static presentation (fixed sample data, no
+// state or controls) so they render identically anywhere. A real widget
+// swaps the sample data for state read from its plugin.
+
+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" as const },
+  { id: "b", label: "Deploy to staging", timestamp: "1h", tone: "info" as const },
+  { id: "c", label: "Dependency audit", timestamp: "3h", tone: "neutral" as const },
+];
+
+export function StarterExample() {
+  return (
+    <WidgetContent>
+      <Stack gap="sm">
+        <Metric label="Tasks done" value={12} icon={CheckCircle2} tone="success" />
+
+        <Section heading="Recent">
+          <ActivityList>
+            {RECENT.map((e) => (
+              <ActivityListItem
+                key={e.id}
+                tone={e.tone}
+                label={e.label}
+                timestamp={e.timestamp}
+              />
+            ))}
+          </ActivityList>
+        </Section>
+      </Stack>
+    </WidgetContent>
+  );
+}
+
+export default StarterExample;

package/src/components/reference/index.ts

@@ -0,0 +1,10 @@
+// Reference dashboard widgets — worked examples of the @sero-ai/ui dashboard
+// components, glass-styled and ready to copy. Pure static presentation.
+//
+// Exposed to widget authors via the `@sero-ai/ui/reference` subpath, not the
+// main barrel.
+
+export { StarterExample } from "./StarterExample";
+export { SchedulerExample } from "./SchedulerExample";
+export { ResourceExample } from "./ResourceExample";
+export { ActivityExample } from "./ActivityExample";

package/src/components/ui/badge.tsx

@@ -18,6 +18,12 @@ const badgeVariants = cva(
           "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",
+        // 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/src/dashboard-catalog.ts

@@ -0,0 +1,13 @@
+// Stable subpath for the dashboard component catalogue metadata.
+//
+//   import { dashboardComponentCatalog } from "@sero-ai/ui/dashboard-catalog";
+//
+// The metadata is for discovery tools, documentation and agent workflows; it is
+// not involved in rendering. Normal widget code imports React components from
+// the package root instead.
+
+export {
+  dashboardComponentCatalog,
+  type DashboardComponentCatalogEntry,
+} from "./components/dashboard/catalog";
+export { default } from "./components/dashboard/catalog";

package/src/index.ts

@@ -131,6 +131,11 @@ export * from "./components/ai-elements/voice-selector-accent";
 export * from "./components/ai-elements/voice-selector";
 export * from "./components/ai-elements/web-preview";
 
+// ── Dashboard Components ──
+// Compact presentation components for dashboard widgets and full plugin views.
+// The discovery catalogue is exported separately from "@sero-ai/ui/dashboard-catalog".
+export * from "./components/dashboard";
+
 // ── Model Selection Components ──
 export * from "./components/model-selection/available-model-picker";
 export * from "./components/model-selection/model-warning-list";

package/src/reference.ts

@@ -0,0 +1,15 @@
+// Stable subpath for the reference dashboard widgets.
+//
+//   import { SchedulerExample } from "@sero-ai/ui/reference";
+//
+// These are worked, glass-styled examples of the dashboard components —
+// importable to preview, or copy-pasteable as a starting point for a real
+// widget. Kept out of the main barrel so they don't ship with app bundles
+// that only need the components.
+
+export {
+  StarterExample,
+  SchedulerExample,
+  ResourceExample,
+  ActivityExample,
+} from "./components/reference";

package/src/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/src/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 {

package/tsup.config.ts

@@ -2,8 +2,12 @@ import { defineConfig } from "tsup";
 import { cpSync } from "node:fs";
 
 export default defineConfig({
-  // Tells tsup to grab everything in your src directory
-  entry: ["src/**/*.{ts,tsx}"],
+  // Tells tsup to grab everything in your src directory, except tests.
+  entry: [
+    "src/**/*.{ts,tsx}",
+    "!src/**/*.test.{ts,tsx}",
+    "!src/**/__tests__/**",
+  ],
   format: ["esm", "cjs"],
   dts: true,
   clean: true,

package/vitest.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    include: ["src/**/*.test.ts", "src/**/*.test.tsx"],
+    environment: "jsdom",
+  },
+});