@sero-ai/ui 0.4.0 → 0.4.1

package/package.json

@@ -1,67 +1,43 @@
 {
   "name": "@sero-ai/ui",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Shared UI components, AI elements, and design tokens for the Sero platform",
   "type": "module",
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": "./src/index.ts",
-    "./dashboard-catalog": "./src/dashboard-catalog.ts",
-    "./reference": "./src/reference.ts",
-    "./theme": "./src/theme/index.ts",
-    "./theme/*": "./src/theme/*",
-    "./styles/*": "./src/styles/*",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./dashboard-catalog.json": "./dist/components/dashboard/catalog.json",
+    "./reference": {
+      "types": "./dist/reference.d.ts",
+      "import": "./dist/reference.js",
+      "require": "./dist/reference.cjs"
+    },
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "import": "./dist/theme/index.js",
+      "require": "./dist/theme/index.cjs"
+    },
+    "./theme/*": {
+      "types": "./dist/theme/*.d.ts",
+      "import": "./dist/theme/*.js",
+      "require": "./dist/theme/*.cjs"
+    },
+    "./styles/*": "./dist/styles/*",
     "./package.json": "./package.json",
-    "./*": "./src/*"
-  },
-  "scripts": {
-    "build": "tsup",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run"
-  },
-  "publishConfig": {
-    "main": "./dist/index.js",
-    "module": "./dist/index.js",
-    "types": "./dist/index.d.ts",
-    "exports": {
-      ".": {
-        "types": "./dist/index.d.ts",
-        "import": "./dist/index.js",
-        "require": "./dist/index.cjs"
-      },
-      "./dashboard-catalog": {
-        "types": "./dist/dashboard-catalog.d.ts",
-        "import": "./dist/dashboard-catalog.js",
-        "require": "./dist/dashboard-catalog.cjs"
-      },
-      "./reference": {
-        "types": "./dist/reference.d.ts",
-        "import": "./dist/reference.js",
-        "require": "./dist/reference.cjs"
-      },
-      "./theme": {
-        "types": "./dist/theme/index.d.ts",
-        "import": "./dist/theme/index.js",
-        "require": "./dist/theme/index.cjs"
-      },
-      "./theme/*": {
-        "types": "./dist/theme/*.d.ts",
-        "import": "./dist/theme/*.js",
-        "require": "./dist/theme/*.cjs"
-      },
-      "./styles/*": "./dist/styles/*",
-      "./package.json": "./package.json",
-      "./*": {
-        "types": "./dist/*.d.ts",
-        "import": "./dist/*.js",
-        "require": "./dist/*.cjs"
-      }
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.js",
+      "require": "./dist/*.cjs"
     }
   },
   "peerDependencies": {
-    "react": "catalog:peer",
-    "react-dom": "catalog:peer"
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
   },
   "dependencies": {
     "@base-ui/react": "^1.3.0",
@@ -70,7 +46,6 @@
     "@radix-ui/react-use-controllable-state": "^1.2.2",
     "@remixicon/react": "^4.9.0",
     "@rive-app/react-webgl2": "^4.27.1",
-    "@sero-ai/common": "workspace:*",
     "@streamdown/cjk": "^1.0.2",
     "@streamdown/code": "^1.1.0",
     "@streamdown/math": "^1.0.2",
@@ -84,9 +59,9 @@
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
-    "lucide-react": "catalog:",
+    "lucide-react": "^0.563.0",
     "media-chrome": "^4.18.0",
-    "motion": "catalog:",
+    "motion": "^12.34.0",
     "nanoid": "^5.1.11",
     "next-themes": "^0.4.6",
     "radix-ui": "^1.4.3",
@@ -98,25 +73,33 @@
     "recharts": "2.15.4",
     "shiki": "^3.23.0",
     "sonner": "^2.0.7",
-    "streamdown": "catalog:",
+    "streamdown": "^2.5.0",
     "tailwind-merge": "^3.5.0",
     "tokenlens": "^1.3.1",
     "use-stick-to-bottom": "^1.1.4",
-    "vaul": "^1.1.2"
+    "vaul": "^1.1.2",
+    "@sero-ai/common": "0.3.1"
   },
   "devDependencies": {
     "@hookform/resolvers": "^5.2.2",
-    "@types/react": "catalog:",
-    "@types/react-dom": "catalog:",
+    "@types/react": "^19.2.13",
+    "@types/react-dom": "^19.2.3",
     "@types/react-syntax-highlighter": "^15.5.13",
     "jsdom": "^26.1.0",
-    "react": "catalog:peer",
-    "react-dom": "catalog:peer",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "shadcn": "^3.8.5",
-    "tailwindcss": "catalog:",
+    "tailwindcss": "4.1.18",
     "tsup": "^8.5.1",
     "tw-animate-css": "^1.4.0",
-    "typescript": "catalog:",
-    "vitest": "catalog:"
-  }
-}
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.7"
+  },
+  "scripts": {
+    "build": "tsup && tsup --config tsup.reference.config.ts",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "smoke": "node scripts/smoke-dist.mjs"
+  },
+  "module": "./dist/index.js"
+}

package/scripts/ensure-pnpm-publish.mjs

@@ -0,0 +1,23 @@
+// Publish guard — this package MUST be published with `pnpm publish`.
+//
+// The `publishConfig` block swaps main/types/exports over to the built `dist/`
+// at publish time. That override is a pnpm (and yarn) feature; plain npm
+// IGNORES it and publishes the top-level fields, which point at `src/`. So
+// `npm publish` here silently ships raw TypeScript source instead of the
+// compiled package — exactly how 0.4.0 went out wrong.
+//
+// This runs from `prepublishOnly`, so it fires on every publish. It aborts
+// unless the invoking package manager is pnpm.
+
+const ua = process.env.npm_config_user_agent ?? "";
+
+if (!ua.startsWith("pnpm")) {
+  const tool = ua.split("/")[0] || "an unknown tool";
+  console.error(
+    `\n✖ @sero-ai/ui must be published with pnpm, but this ran under ${tool}.\n\n` +
+      "  Plain npm ignores the publishConfig dist overrides and would ship raw\n" +
+      "  TypeScript source instead of the built dist/. Use:\n\n" +
+      "      pnpm publish   (from packages/ui)\n",
+  );
+  process.exit(1);
+}

package/scripts/smoke-dist.mjs

@@ -0,0 +1,68 @@
+// Smoke test for the published artifact.
+//
+// The package is bundle:false and bundler-resolved, so its public entrypoints
+// are easy to break under raw Node ESM (extensionless / directory imports).
+// This runs the built dist the way a published consumer would: it imports the
+// reference entry (ESM + CJS) and reads the catalogue JSON, failing loudly if
+// any entrypoint no longer resolves. Run after `pnpm build`.
+
+import { createRequire } from "node:module";
+import { existsSync, readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, resolve } from "node:path";
+
+const require = createRequire(import.meta.url);
+const here = dirname(fileURLToPath(import.meta.url));
+const dist = resolve(here, "..", "dist");
+
+const fail = (msg) => {
+  console.error(`✗ ${msg}`);
+  process.exitCode = 1;
+};
+
+if (!existsSync(dist)) {
+  fail("dist/ is missing — run `pnpm build` first");
+  process.exit(1);
+}
+
+// 1. Reference entrypoint resolves as ESM and exposes the example widgets.
+const EXPECTED = [
+  "StarterExample",
+  "SchedulerExample",
+  "ResourceExample",
+  "ActivityExample",
+];
+
+const esm = await import(resolve(dist, "reference.js"));
+for (const name of EXPECTED) {
+  if (typeof esm[name] !== "function") fail(`reference.js missing export ${name}`);
+}
+
+// 2. Reference entrypoint resolves as CJS too.
+const cjs = require(resolve(dist, "reference.cjs"));
+for (const name of EXPECTED) {
+  if (typeof cjs[name] !== "function") fail(`reference.cjs missing export ${name}`);
+}
+
+// The publishConfig `types` map points at these; a clean-race once dropped them.
+for (const f of ["reference.d.ts", "reference.d.cts"]) {
+  if (!existsSync(resolve(dist, f))) fail(`${f} not emitted to dist`);
+}
+
+// 3. Catalogue ships as plain JSON with the expected shape.
+const catalogPath = resolve(dist, "components", "dashboard", "catalog.json");
+if (!existsSync(catalogPath)) fail("dashboard-catalog.json not emitted to dist");
+else {
+  const catalog = JSON.parse(readFileSync(catalogPath, "utf8"));
+  if (!Array.isArray(catalog) || catalog.length === 0) {
+    fail("dashboard-catalog.json is not a non-empty array");
+  } else if (!catalog.every((e) => e.name && e.category && e.kind)) {
+    fail("dashboard-catalog.json has malformed entries");
+  }
+}
+
+if (process.exitCode) {
+  console.error("Smoke test failed.");
+} else {
+  console.log("✓ dist entrypoints resolve (reference esm+cjs, catalog json)");
+}

package/src/components/dashboard/__tests__/catalog.test.ts

@@ -1,10 +1,15 @@
-// Catalogue integrity — keeps the typed catalogue honest against the exports.
+// Catalogue integrity — keeps the JSON catalogue honest against the exports.
 
 import { describe, expect, it } from "vitest";
 
-import { dashboardComponentCatalog } from "../catalog";
+import type { DashboardComponentCatalogEntry } from "../catalog";
+import catalogJson from "../catalog.json";
 import * as dashboard from "../index";
 
+// The JSON is the source of truth. JSON imports widen literal unions to
+// `string`, so assert the authored entry shape for the checks below.
+const dashboardComponentCatalog = catalogJson as DashboardComponentCatalogEntry[];
+
 // Reused primitives live in other component folders, not the dashboard barrel.
 const REUSED_PRIMITIVES = new Set(["Badge", "Alert", "Button", "Skeleton"]);
 

package/src/components/dashboard/__tests__/state.test.tsx

@@ -94,10 +94,27 @@ describe("accessibility contracts", () => {
     expect(html).toContain('type="button"');
   });
 
-  it("a bare Status dot is announced as a status", () => {
+  it("a bare Status dot exposes its tone as announceable text", () => {
     const html = renderToStaticMarkup(<Status tone="success" />);
     expect(html).toContain('role="status"');
-    expect(html).toContain('data-tone="success"');
+    // Not an empty live region: assistive tech gets a text alternative.
+    expect(html).toContain('class="sr-only">Success<');
+  });
+
+  it("a bare Status dot honours a caller aria-label instead of the tone", () => {
+    const html = renderToStaticMarkup(
+      <Status tone="success" aria-label="Backup succeeded" />,
+    );
+    expect(html).toContain('aria-label="Backup succeeded"');
+    // The caller supplied the name, so no generic fallback is added.
+    expect(html).not.toContain("sr-only");
+  });
+
+  it("a labelled Status uses its visible text and adds no fallback", () => {
+    const html = renderToStaticMarkup(<Status tone="neutral">Idle</Status>);
+    expect(html).toContain("Idle");
+    expect(html).not.toContain('role="status"');
+    expect(html).not.toContain("sr-only");
   });
 
   it("EmptyState renders its title and message", () => {

package/src/components/dashboard/catalog.json

@@ -0,0 +1,312 @@
+[
+  {
+    "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\" />"
+  },
+  {
+    "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\" />"
+  },
+  {
+    "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={…} />"
+  },
+  {
+    "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\" />"
+  },
+  {
+    "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\" />"
+  }
+]