@sero-ai/ui 0.4.1 → 0.5.0

package/dist/reference.js

@@ -226,7 +226,7 @@ function Section({
       children: [
         (heading || action) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
-            heading && /* @__PURE__ */ jsx2("h3", { className: "truncate text-[11px] font-semibold uppercase tracking-wider text-[var(--text-muted)]", children: heading }),
+            heading && /* @__PURE__ */ jsx2("h3", { className: "truncate text-sm font-semibold uppercase tracking-wider text-[var(--text-muted)]", children: heading }),
             description && /* @__PURE__ */ jsx2("p", { className: "truncate text-xs text-[var(--text-muted)]", children: description })
           ] }),
           action && /* @__PURE__ */ jsx2("div", { className: "shrink-0", children: action })
@@ -263,11 +263,11 @@ import { jsx as jsx3 } from "react/jsx-runtime";
 var textVariants = cva2("min-w-0", {
   variants: {
     variant: {
-      body: "text-sm text-[var(--text-primary)]",
-      label: "text-[11px] font-semibold uppercase tracking-wider text-[var(--text-muted)]",
+      body: "text-base text-[var(--text-primary)]",
+      label: "text-sm font-semibold uppercase tracking-wider text-[var(--text-muted)]",
       supporting: "text-xs text-[var(--text-secondary)]",
       muted: "text-xs text-[var(--text-muted)]",
-      numeric: "text-sm font-semibold tabular-nums text-[var(--text-primary)]"
+      numeric: "text-base font-semibold tabular-nums text-[var(--text-primary)]"
     }
   },
   defaultVariants: { variant: "body" }
@@ -301,7 +301,7 @@ function Text({
 }
 var headingSize = {
   sm: "text-xs font-semibold",
-  md: "text-sm font-semibold",
+  md: "text-base font-semibold",
   lg: "text-base font-semibold"
 };
 function Heading({
@@ -384,7 +384,7 @@ function Metric({
       children: [
         /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1.5", children: [
           icon && /* @__PURE__ */ jsx4(Icon, { icon, size: "sm" }),
-          /* @__PURE__ */ jsx4("span", { className: "truncate text-[11px] font-medium uppercase tracking-wide text-[var(--text-muted)]", children: label })
+          /* @__PURE__ */ jsx4("span", { className: "truncate text-sm font-medium uppercase tracking-wide text-[var(--text-muted)]", children: label })
         ] }),
         /* @__PURE__ */ jsxs2("div", { className: "flex items-baseline gap-1.5", children: [
           /* @__PURE__ */ jsx4(
@@ -546,7 +546,7 @@ import { cva as cva3 } from "class-variance-authority";
 import { Slot } from "radix-ui";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var itemVariants = cva3(
-  "group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  "group/item flex items-center border border-transparent text-base rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
   {
     variants: {
       variant: {
@@ -633,7 +633,7 @@ function ItemTitle({ className, ...props }) {
     {
       "data-slot": "item-title",
       className: cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium",
+        "flex w-fit items-center gap-2 text-base leading-snug font-medium",
         className
       ),
       ...props
@@ -646,7 +646,7 @@ function ItemDescription({ className, ...props }) {
     {
       "data-slot": "item-description",
       className: cn(
-        "text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
+        "text-muted-foreground line-clamp-2 text-base leading-normal font-normal text-balance",
         "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
         className
       ),
@@ -694,7 +694,7 @@ function ItemListItem({
           /* @__PURE__ */ jsx8(ItemTitle, { className: "truncate text-xs font-medium text-[var(--text-primary)]", children: primary }),
           secondary && /* @__PURE__ */ jsx8(ItemDescription, { className: "line-clamp-1 text-xs text-[var(--text-muted)]", children: secondary })
         ] }),
-        trailing && /* @__PURE__ */ jsx8("span", { className: "shrink-0 text-[11px] tabular-nums text-[var(--text-muted)]", children: trailing }),
+        trailing && /* @__PURE__ */ jsx8("span", { className: "shrink-0 text-sm tabular-nums text-[var(--text-muted)]", children: trailing }),
         actions && /* @__PURE__ */ jsx8(ItemActions, { children: actions })
       ]
     }
@@ -715,7 +715,7 @@ function ItemList({
       ...props,
       children: [
         children,
-        overflowCount > 0 && /* @__PURE__ */ jsxs5("span", { className: "px-2 text-[11px] text-[var(--text-muted)]", children: [
+        overflowCount > 0 && /* @__PURE__ */ jsxs5("span", { className: "px-2 text-sm text-[var(--text-muted)]", children: [
           "+",
           overflowCount,
           " more"
@@ -747,7 +747,7 @@ function ActivityListItem({
         /* @__PURE__ */ jsxs6("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
           /* @__PURE__ */ jsxs6("div", { className: "flex items-baseline justify-between gap-2", children: [
             /* @__PURE__ */ jsx9("span", { className: "truncate text-xs text-[var(--text-primary)]", children: label }),
-            timestamp && /* @__PURE__ */ jsx9("span", { className: "shrink-0 text-[11px] tabular-nums text-[var(--text-muted)]", children: timestamp })
+            timestamp && /* @__PURE__ */ jsx9("span", { className: "shrink-0 text-sm tabular-nums text-[var(--text-muted)]", children: timestamp })
           ] }),
           detail && /* @__PURE__ */ jsx9("span", { className: "line-clamp-1 text-xs text-[var(--text-muted)]", children: detail })
         ] })
@@ -769,7 +769,7 @@ function ActivityList({
       ...props,
       children: [
         children,
-        overflowCount > 0 && /* @__PURE__ */ jsxs6("li", { className: "pl-5 pt-0.5 text-[11px] text-[var(--text-muted)]", children: [
+        overflowCount > 0 && /* @__PURE__ */ jsxs6("li", { className: "pl-5 pt-0.5 text-sm text-[var(--text-muted)]", children: [
           "+",
           overflowCount,
           " more"
@@ -861,7 +861,7 @@ import { cva as cva4 } from "class-variance-authority";
 import { Slot as Slot2 } from "radix-ui";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var buttonVariants = cva4(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-base font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
@@ -959,7 +959,7 @@ function StaleIndicator({
     {
       "data-slot": "stale-indicator",
       className: cn(
-        "flex items-center gap-1.5 text-[11px] text-[var(--text-muted)]",
+        "flex items-center gap-1.5 text-sm text-[var(--text-muted)]",
         className
       ),
       ...props,
@@ -1010,44 +1010,17 @@ function DataBoundary({
   }
 }
 
-// src/components/ui/empty.tsx
-import { cva as cva5 } from "class-variance-authority";
-import { jsx as jsx15 } from "react/jsx-runtime";
-var emptyMediaVariants = cva5(
-  "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-
-// src/components/dashboard/empty-state.tsx
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
-
-// src/components/ui/skeleton.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
-
-// src/components/dashboard/skeletons.tsx
-import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
-
 // src/components/reference/StarterExample.tsx
-import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var 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__ */ jsx19(WidgetContent, { children: /* @__PURE__ */ jsxs12(Stack, { gap: "sm", children: [
-    /* @__PURE__ */ jsx19(Metric, { label: "Tasks done", value: 12, icon: CheckCircle2, tone: "success" }),
-    /* @__PURE__ */ jsx19(Section, { heading: "Recent", children: /* @__PURE__ */ jsx19(ActivityList, { children: RECENT.map((e) => /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx15(WidgetContent, { children: /* @__PURE__ */ jsxs10(Stack, { gap: "sm", children: [
+    /* @__PURE__ */ jsx15(Metric, { label: "Tasks done", value: 12, icon: CheckCircle2, tone: "success" }),
+    /* @__PURE__ */ jsx15(Section, { heading: "Recent", children: /* @__PURE__ */ jsx15(ActivityList, { children: RECENT.map((e) => /* @__PURE__ */ jsx15(
       ActivityListItem,
       {
         tone: e.tone,
@@ -1061,21 +1034,21 @@ function StarterExample() {
 
 // src/components/reference/SchedulerExample.tsx
 import { ExternalLink } from "lucide-react";
-import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var 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__ */ jsx20(WidgetContent, { children: /* @__PURE__ */ jsxs13(Stack, { gap: "sm", children: [
-    /* @__PURE__ */ jsxs13(Inline, { justify: "between", align: "center", children: [
-      /* @__PURE__ */ jsx20(Status, { tone: "success", pulse: true, children: "Scheduler active" }),
-      /* @__PURE__ */ jsx20(ProgressRing, { value: 92, label: "Success rate", tone: "success", size: 40 })
+  return /* @__PURE__ */ jsx16(WidgetContent, { children: /* @__PURE__ */ jsxs11(Stack, { gap: "sm", children: [
+    /* @__PURE__ */ jsxs11(Inline, { justify: "between", align: "center", children: [
+      /* @__PURE__ */ jsx16(Status, { tone: "success", pulse: true, children: "Scheduler active" }),
+      /* @__PURE__ */ jsx16(ProgressRing, { value: 92, label: "Success rate", tone: "success", size: 40 })
     ] }),
-    /* @__PURE__ */ jsx20(Section, { heading: "Summary", children: /* @__PURE__ */ jsxs13(Inline, { gap: "sm", wrap: true, children: [
-      /* @__PURE__ */ jsx20(MetricCard, { className: "flex-1", children: /* @__PURE__ */ jsx20(Metric, { label: "Jobs", value: 6 }) }),
-      /* @__PURE__ */ jsx20(MetricCard, { className: "flex-1", children: /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx16(Section, { heading: "Summary", children: /* @__PURE__ */ jsxs11(Inline, { gap: "sm", wrap: true, children: [
+      /* @__PURE__ */ jsx16(MetricCard, { className: "flex-1", children: /* @__PURE__ */ jsx16(Metric, { label: "Jobs", value: 6 }) }),
+      /* @__PURE__ */ jsx16(MetricCard, { className: "flex-1", children: /* @__PURE__ */ jsx16(
         Metric,
         {
           label: "Runs today",
@@ -1084,16 +1057,16 @@ function SchedulerExample() {
         }
       ) })
     ] }) }),
-    /* @__PURE__ */ jsx20(Divider, {}),
-    /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx16(Divider, {}),
+    /* @__PURE__ */ jsx16(
       Section,
       {
         heading: "Next up",
-        action: /* @__PURE__ */ jsxs13(Button, { size: "xs", variant: "ghost", children: [
-          /* @__PURE__ */ jsx20(ExternalLink, { className: "size-3" }),
+        action: /* @__PURE__ */ jsxs11(Button, { size: "xs", variant: "ghost", children: [
+          /* @__PURE__ */ jsx16(ExternalLink, { className: "size-3" }),
           "All"
         ] }),
-        children: /* @__PURE__ */ jsx20(DataBoundary, { state: "ready", children: /* @__PURE__ */ jsx20(ActivityList, { children: UPCOMING.map((e) => /* @__PURE__ */ jsx20(
+        children: /* @__PURE__ */ jsx16(DataBoundary, { state: "ready", children: /* @__PURE__ */ jsx16(ActivityList, { children: UPCOMING.map((e) => /* @__PURE__ */ jsx16(
           ActivityListItem,
           {
             tone: e.tone,
@@ -1104,42 +1077,42 @@ function SchedulerExample() {
         )) }) })
       }
     ),
-    /* @__PURE__ */ jsx20(StaleIndicator, { lastUpdated: "Updated 2m ago" })
+    /* @__PURE__ */ jsx16(StaleIndicator, { lastUpdated: "Updated 2m ago" })
   ] }) });
 }
 
 // src/components/reference/ResourceExample.tsx
-import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 function Ring({
   value,
   label,
   tone
 }) {
-  return /* @__PURE__ */ jsxs14(Stack, { gap: "xs", align: "center", children: [
-    /* @__PURE__ */ jsx21(ProgressRing, { value, label, tone }),
-    /* @__PURE__ */ jsx21(Text, { variant: "muted", children: label })
+  return /* @__PURE__ */ jsxs12(Stack, { gap: "xs", align: "center", children: [
+    /* @__PURE__ */ jsx17(ProgressRing, { value, label, tone }),
+    /* @__PURE__ */ jsx17(Text, { variant: "muted", children: label })
   ] });
 }
 function ResourceExample() {
-  return /* @__PURE__ */ jsx21(WidgetContent, { scroll: true, children: /* @__PURE__ */ jsxs14(Stack, { gap: "sm", children: [
-    /* @__PURE__ */ jsx21(Heading, { level: 2, size: "md", children: "Resources" }),
-    /* @__PURE__ */ jsxs14(MetricGroup, { children: [
-      /* @__PURE__ */ jsx21(Metric, { label: "CPU", value: "42%", tone: "success" }),
-      /* @__PURE__ */ jsx21(Metric, { label: "Memory", value: "6.1 GB" }),
-      /* @__PURE__ */ jsx21(Metric, { label: "Disk", value: "71%", tone: "warning" })
+  return /* @__PURE__ */ jsx17(WidgetContent, { scroll: true, children: /* @__PURE__ */ jsxs12(Stack, { gap: "sm", children: [
+    /* @__PURE__ */ jsx17(Heading, { level: 2, size: "md", children: "Resources" }),
+    /* @__PURE__ */ jsxs12(MetricGroup, { children: [
+      /* @__PURE__ */ jsx17(Metric, { label: "CPU", value: "42%", tone: "success" }),
+      /* @__PURE__ */ jsx17(Metric, { label: "Memory", value: "6.1 GB" }),
+      /* @__PURE__ */ jsx17(Metric, { label: "Disk", value: "71%", tone: "warning" })
     ] }),
-    /* @__PURE__ */ jsx21(Divider, {}),
-    /* @__PURE__ */ jsx21(Section, { heading: "Usage", children: /* @__PURE__ */ jsxs14(Grid, { columns: 3, gap: "sm", children: [
-      /* @__PURE__ */ jsx21(Ring, { value: 42, label: "CPU", tone: "success" }),
-      /* @__PURE__ */ jsx21(Ring, { value: 61, label: "Memory", tone: "info" }),
-      /* @__PURE__ */ jsx21(Ring, { value: 71, label: "Disk", tone: "warning" })
+    /* @__PURE__ */ jsx17(Divider, {}),
+    /* @__PURE__ */ jsx17(Section, { heading: "Usage", children: /* @__PURE__ */ jsxs12(Grid, { columns: 3, gap: "sm", children: [
+      /* @__PURE__ */ jsx17(Ring, { value: 42, label: "CPU", tone: "success" }),
+      /* @__PURE__ */ jsx17(Ring, { value: 61, label: "Memory", tone: "info" }),
+      /* @__PURE__ */ jsx17(Ring, { value: 71, label: "Disk", tone: "warning" })
     ] }) }),
-    /* @__PURE__ */ jsx21(Divider, {}),
-    /* @__PURE__ */ jsx21(Section, { heading: "Host", children: /* @__PURE__ */ jsxs14(KeyValueList, { children: [
-      /* @__PURE__ */ jsx21(KeyValue, { label: "Region", value: "eu-west-1", mono: true }),
-      /* @__PURE__ */ jsx21(KeyValue, { label: "Instance", value: "c7g.xlarge", mono: true }),
-      /* @__PURE__ */ jsx21(KeyValue, { label: "Uptime", value: "14d 6h", mono: true }),
-      /* @__PURE__ */ jsx21(KeyValue, { label: "Status", value: /* @__PURE__ */ jsx21(Status, { tone: "success", children: "Healthy" }) })
+    /* @__PURE__ */ jsx17(Divider, {}),
+    /* @__PURE__ */ jsx17(Section, { heading: "Host", children: /* @__PURE__ */ jsxs12(KeyValueList, { children: [
+      /* @__PURE__ */ jsx17(KeyValue, { label: "Region", value: "eu-west-1", mono: true }),
+      /* @__PURE__ */ jsx17(KeyValue, { label: "Instance", value: "c7g.xlarge", mono: true }),
+      /* @__PURE__ */ jsx17(KeyValue, { label: "Uptime", value: "14d 6h", mono: true }),
+      /* @__PURE__ */ jsx17(KeyValue, { label: "Status", value: /* @__PURE__ */ jsx17(Status, { tone: "success", children: "Healthy" }) })
     ] }) })
   ] }) });
 }
@@ -1148,10 +1121,10 @@ function ResourceExample() {
 import { FileText } from "lucide-react";
 
 // src/components/ui/badge.tsx
-import { cva as cva6 } from "class-variance-authority";
+import { cva as cva5 } from "class-variance-authority";
 import { Slot as Slot3 } from "radix-ui";
-import { jsx as jsx22 } from "react/jsx-runtime";
-var badgeVariants = cva6(
+import { jsx as jsx18 } from "react/jsx-runtime";
+var badgeVariants = cva5(
   "inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
     variants: {
@@ -1180,7 +1153,7 @@ function Badge({
   ...props
 }) {
   const Comp = asChild ? Slot3.Root : "span";
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx18(
     Comp,
     {
       "data-slot": "badge",
@@ -1192,33 +1165,33 @@ function Badge({
 }
 
 // src/components/reference/ActivityExample.tsx
-import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 var 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" }
 ];
 function ActivityExample() {
-  return /* @__PURE__ */ jsx23(WidgetContent, { children: /* @__PURE__ */ jsxs15(Stack, { gap: "sm", fill: true, children: [
-    /* @__PURE__ */ jsx23(Inline, { justify: "between", align: "center", children: /* @__PURE__ */ jsxs15(Inline, { gap: "xs", align: "center", children: [
-      /* @__PURE__ */ jsx23(Text, { variant: "label", children: "Recent files" }),
-      /* @__PURE__ */ jsx23(Badge, { variant: "info", children: ITEMS.length })
+  return /* @__PURE__ */ jsx19(WidgetContent, { children: /* @__PURE__ */ jsxs13(Stack, { gap: "sm", fill: true, children: [
+    /* @__PURE__ */ jsx19(Inline, { justify: "between", align: "center", children: /* @__PURE__ */ jsxs13(Inline, { gap: "xs", align: "center", children: [
+      /* @__PURE__ */ jsx19(Text, { variant: "label", children: "Recent files" }),
+      /* @__PURE__ */ jsx19(Badge, { variant: "info", children: ITEMS.length })
     ] }) }),
-    /* @__PURE__ */ jsx23(Stack, { gap: "none", scroll: true, children: /* @__PURE__ */ jsx23(ItemList, { children: ITEMS.map((f) => /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx19(Stack, { gap: "none", scroll: true, children: /* @__PURE__ */ jsx19(ItemList, { children: ITEMS.map((f) => /* @__PURE__ */ jsx19(
       ItemListItem,
       {
-        leading: /* @__PURE__ */ jsx23(FileText, { className: "size-4 text-[var(--text-muted)]" }),
+        leading: /* @__PURE__ */ jsx19(FileText, { className: "size-4 text-[var(--text-muted)]" }),
         primary: f.title,
-        trailing: /* @__PURE__ */ jsxs15(Inline, { gap: "xs", align: "center", children: [
-          /* @__PURE__ */ jsx23(Badge, { variant: "secondary", children: f.badge }),
-          /* @__PURE__ */ jsx23("span", { children: f.meta })
+        trailing: /* @__PURE__ */ jsxs13(Inline, { gap: "xs", align: "center", children: [
+          /* @__PURE__ */ jsx19(Badge, { variant: "secondary", children: f.badge }),
+          /* @__PURE__ */ jsx19("span", { children: f.meta })
         ] })
       },
       f.id
     )) }) }),
-    /* @__PURE__ */ jsxs15(Inline, { justify: "between", align: "center", children: [
-      /* @__PURE__ */ jsx23(Status, { tone: "info", variant: "pill", children: "Synced" }),
-      /* @__PURE__ */ jsx23(StaleIndicator, { lastUpdated: "Synced 30s ago" })
+    /* @__PURE__ */ jsxs13(Inline, { justify: "between", align: "center", children: [
+      /* @__PURE__ */ jsx19(Status, { tone: "info", variant: "pill", children: "Synced" }),
+      /* @__PURE__ */ jsx19(StaleIndicator, { lastUpdated: "Synced 30s ago" })
     ] })
   ] }) });
 }

package/dist/styles/ai-elements.css

@@ -0,0 +1,2 @@
+/* Import after plugin.css when a federated plugin uses @sero-ai/ui/ai-elements/*. */
+@source "../components/ai-elements";

package/dist/styles/context-editor.css

@@ -0,0 +1,2 @@
+/* Import after plugin.css when a federated plugin uses components/context-editor/*. */
+@source "../components/context-editor";

package/dist/styles/globals.css

@@ -116,7 +116,7 @@
   /* Typography (themeable) */
   --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', Menlo, monospace;
-  --font-size-base: 14px;
+  --font-size-base: 13px;
 
   /* Spacing */
   --space-xs: 4px;
@@ -132,7 +132,7 @@
 
   /* Sero font sizes (legacy — use Tailwind text-* for new components) */
   --sero-text-xs: 12px;
-  --sero-text-sm: 13px;
+  --sero-text-base: 13px;
   --sero-text-base: 14px;
   --sero-text-lg: 15px;
   --sero-text-xl: 16px;
@@ -236,6 +236,14 @@
 }
 
 @theme inline {
+  --text-xs: 0.8rem;
+  --text-xs--line-height: 1rem;
+  
+  --text-sm: 0.9rem;
+  --text-sm--line-height: 1.2rem;
+
+  --text-base--line-height: 1.4rem;
+
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
@@ -483,7 +491,7 @@
 }
 
 html {
-  font-size: var(--font-size-base, 14px);
+  font-size: var(--font-size-base, 13px);
   font-family: var(--font-sans);
 }
 
@@ -495,3 +503,14 @@ html {
     @apply bg-background text-foreground;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/styles/model-selection.css

@@ -0,0 +1,2 @@
+/* Import after plugin.css when a federated plugin uses @sero-ai/ui/model-selection/*. */
+@source "../components/model-selection";

package/dist/styles/plugin-theme.css

@@ -0,0 +1,80 @@
+@theme inline {
+  --text-xs: 0.8rem;
+  --text-xs--line-height: 1rem;
+
+  --text-sm: 0.9rem;
+  --text-sm--line-height: 1.2rem;
+
+  --text-base--line-height: 1.4rem;
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-brand-primary: var(--brand-primary);
+  --color-brand-primary-foreground: var(--brand-primary-foreground);
+  --color-brand-primary-muted: var(--brand-primary-muted);
+  --color-brand-primary-subtle: var(--brand-primary-subtle);
+  --color-brand-primary-faint: var(--brand-primary-faint);
+  --color-brand-primary-border: var(--brand-primary-border);
+  --color-brand-secondary: var(--brand-secondary);
+  --color-brand-secondary-foreground: var(--brand-secondary-foreground);
+  --color-brand-secondary-muted: var(--brand-secondary-muted);
+  --color-brand-secondary-subtle: var(--brand-secondary-subtle);
+  --color-brand-secondary-faint: var(--brand-secondary-faint);
+  --color-brand-secondary-border: var(--brand-secondary-border);
+  --color-status-success: var(--status-success);
+  --color-status-success-muted: var(--status-success-muted);
+  --color-status-success-subtle: var(--status-success-subtle);
+  --color-status-success-faint: var(--status-success-faint);
+  --color-status-success-border: var(--status-success-border);
+  --color-status-warning: var(--status-warning);
+  --color-status-warning-muted: var(--status-warning-muted);
+  --color-status-warning-subtle: var(--status-warning-subtle);
+  --color-status-warning-faint: var(--status-warning-faint);
+  --color-status-warning-border: var(--status-warning-border);
+  --color-status-error: var(--status-error);
+  --color-status-error-muted: var(--status-error-muted);
+  --color-status-error-subtle: var(--status-error-subtle);
+  --color-status-error-faint: var(--status-error-faint);
+  --color-status-error-border: var(--status-error-border);
+  --color-status-info: var(--status-info);
+  --color-status-info-muted: var(--status-info-muted);
+  --color-status-info-subtle: var(--status-info-subtle);
+  --color-status-info-faint: var(--status-info-faint);
+  --color-status-info-border: var(--status-info-border);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}

package/dist/styles/plugin.css

@@ -1,4 +1,19 @@
-@import "./globals.css";
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "./plugin-theme.css";
+
+/* Match the lightweight package root. Specialized components opt into their
+   own source files through a matching stylesheet under styles/. */
+@source "../components/ui";
+@source "../components/dashboard";
+
+@custom-variant dark (&:is(.dark *));
 
 /* Federated Sero plugins should import this file, then add plugin-local
-   @source directives. It keeps Tailwind 4 token names aligned with the shell. */
+   @source directives. The seroPluginCssScope Vite helper rewrites this file's
+   document-level selectors (:root/:host theme blocks, html/body preflight) to
+   :scope, so a plugin's default Tailwind theme and resets are self-contained on
+   its own scope root. Sero design tokens (--background, --brand-*, …) are still
+   owned by the host: plugin-theme.css references them via @theme inline, so
+   they inherit from the host document root. */

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@sero-ai/ui",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Shared UI components, AI elements, and design tokens for the Sero platform",
   "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -11,6 +14,16 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./ai-elements/*": {
+      "types": "./dist/components/ai-elements/*.d.ts",
+      "import": "./dist/components/ai-elements/*.js",
+      "require": "./dist/components/ai-elements/*.cjs"
+    },
+    "./model-selection/*": {
+      "types": "./dist/components/model-selection/*.d.ts",
+      "import": "./dist/components/model-selection/*.js",
+      "require": "./dist/components/model-selection/*.cjs"
+    },
     "./dashboard-catalog.json": "./dist/components/dashboard/catalog.json",
     "./reference": {
       "types": "./dist/reference.d.ts",
@@ -40,48 +53,48 @@
     "react-dom": "^19.2.4"
   },
   "dependencies": {
-    "@base-ui/react": "^1.3.0",
-    "@headless-tree/core": "^1.6.3",
-    "@headless-tree/react": "^1.6.3",
-    "@radix-ui/react-use-controllable-state": "^1.2.2",
+    "@base-ui/react": "^1.6.0",
+    "@headless-tree/core": "^1.7.0",
+    "@headless-tree/react": "^1.7.0",
+    "@radix-ui/react-use-controllable-state": "^1.2.5",
     "@remixicon/react": "^4.9.0",
-    "@rive-app/react-webgl2": "^4.27.1",
+    "@rive-app/react-webgl2": "^4.29.5",
     "@streamdown/cjk": "^1.0.2",
     "@streamdown/code": "^1.1.0",
     "@streamdown/math": "^1.0.2",
     "@streamdown/mermaid": "^1.0.2",
-    "@xyflow/react": "^12.10.2",
+    "@xyflow/react": "^12.11.2",
     "ai": "^6.0.116",
     "ansi-to-react": "^6.2.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "date-fns": "^4.1.0",
+    "date-fns": "^4.4.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
-    "lucide-react": "^0.563.0",
-    "media-chrome": "^4.18.0",
+    "lucide-react": "^1.26.0",
+    "media-chrome": "^4.19.2",
     "motion": "^12.34.0",
     "nanoid": "^5.1.11",
     "next-themes": "^0.4.6",
-    "radix-ui": "^1.4.3",
+    "radix-ui": "^1.6.5",
     "react-day-picker": "^9.14.0",
-    "react-hook-form": "^7.71.2",
+    "react-hook-form": "^7.82.0",
     "react-jsx-parser": "^2.4.1",
-    "react-resizable-panels": "^4.7.2",
+    "react-resizable-panels": "^4.12.2",
     "react-syntax-highlighter": "^16.1.1",
-    "recharts": "2.15.4",
+    "recharts": "3.10.0",
     "shiki": "^3.23.0",
     "sonner": "^2.0.7",
     "streamdown": "^2.5.0",
-    "tailwind-merge": "^3.5.0",
+    "tailwind-merge": "^3.6.0",
     "tokenlens": "^1.3.1",
-    "use-stick-to-bottom": "^1.1.4",
+    "use-stick-to-bottom": "^1.1.6",
     "vaul": "^1.1.2",
-    "@sero-ai/common": "0.3.1"
+    "@sero-ai/common": "0.8.0"
   },
   "devDependencies": {
-    "@hookform/resolvers": "^5.2.2",
+    "@hookform/resolvers": "^5.4.0",
     "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
     "@types/react-syntax-highlighter": "^15.5.13",
@@ -96,7 +109,7 @@
     "vitest": "^4.1.7"
   },
   "scripts": {
-    "build": "tsup && tsup --config tsup.reference.config.ts",
+    "build": "tsup && tsup --config tsup.reference.config.ts && node scripts/smoke-dist.mjs",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "smoke": "node scripts/smoke-dist.mjs"