@sero-ai/ui 0.4.0 → 0.4.2

package/src/components/ui/tooltip.tsx

@@ -4,6 +4,7 @@ import * as React from "react"
 import { Tooltip as TooltipPrimitive } from "radix-ui"
 
 import { cn } from "../../lib/utils"
+import { usePluginPortalContainer } from "../../plugin-style-scope-context"
 
 function TooltipProvider({
   delayDuration = 0,
@@ -36,8 +37,9 @@ function TooltipContent({
   children,
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  const container = usePluginPortalContainer()
   return (
-    <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Portal container={container}>
       <TooltipPrimitive.Content
         data-slot="tooltip-content"
         sideOffset={sideOffset}

package/src/index.ts

@@ -133,10 +133,14 @@ 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".
+// The discovery catalogue is plain data at "@sero-ai/ui/dashboard-catalog.json";
+// its entry type is re-exported here for callers that type the parsed JSON.
 export * from "./components/dashboard";
+export type { DashboardComponentCatalogEntry } from "./components/dashboard/catalog";
 
 // ── Model Selection Components ──
 export * from "./components/model-selection/available-model-picker";
 export * from "./components/model-selection/model-warning-list";
 export * from "./components/model-selection/thinking-level-picker";
+export { PluginStyleScope, type PluginStyleScopeProps } from './plugin-style-scope';
+export { usePluginPortalContainer } from './plugin-style-scope-context';

package/src/plugin-style-scope-context.ts

@@ -0,0 +1,21 @@
+import { createContext, useContext, type Context } from 'react';
+
+export interface PluginStyleScopeValue {
+  pluginId: string;
+  portalContainer: HTMLDivElement | null;
+}
+
+declare global {
+  var __sero_plugin_style_scope_context__: Context<PluginStyleScopeValue | null> | undefined;
+}
+
+// A single shared context instance across every federated copy of @sero-ai/ui,
+// so a plugin's portal primitives read the container the host provider set.
+export const PluginStyleScopeContext = globalThis.__sero_plugin_style_scope_context__
+  ?? createContext<PluginStyleScopeValue | null>(null);
+
+globalThis.__sero_plugin_style_scope_context__ = PluginStyleScopeContext;
+
+export function usePluginPortalContainer(): HTMLElement | undefined {
+  return useContext(PluginStyleScopeContext)?.portalContainer ?? undefined;
+}

package/src/plugin-style-scope.test.tsx

@@ -0,0 +1,38 @@
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, describe, expect, it } from 'vitest';
+import { PluginStyleScope } from './plugin-style-scope';
+import { usePluginPortalContainer } from './plugin-style-scope-context';
+
+(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT: boolean })
+  .IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.replaceChildren();
+});
+
+describe('PluginStyleScope', () => {
+  it('owns and removes an independent body portal container', () => {
+    const mount = document.createElement('div');
+    document.body.append(mount);
+    const root = createRoot(mount);
+
+    function Probe() {
+      const container = usePluginPortalContainer();
+      return <span data-container={container?.dataset.seroPluginPortals} />;
+    }
+
+    act(() => root.render(
+      <PluginStyleScope pluginId="admin" surfaceId="surface-1">
+        <Probe />
+      </PluginStyleScope>,
+    ));
+
+    const portal = document.body.querySelector('[data-sero-plugin-portals="surface-1"]');
+    expect(portal?.getAttribute('data-sero-plugin')).toBe('admin');
+    expect(mount.querySelector('span')?.getAttribute('data-container')).toBe('surface-1');
+
+    act(() => root.unmount());
+    expect(portal?.isConnected).toBe(false);
+  });
+});

package/src/plugin-style-scope.tsx

@@ -0,0 +1,35 @@
+import { useInsertionEffect, useMemo, type ReactNode } from 'react';
+import { PluginStyleScopeContext } from './plugin-style-scope-context';
+
+export interface PluginStyleScopeProps {
+  children: ReactNode;
+  pluginId: string;
+  surfaceId: string;
+}
+
+export function PluginStyleScope({ children, pluginId, surfaceId }: PluginStyleScopeProps) {
+  const portalContainer = useMemo(() => {
+    if (typeof document === 'undefined') return null;
+    const container = document.createElement('div');
+    container.dataset.seroPlugin = pluginId;
+    container.dataset.seroPluginPortals = surfaceId;
+    return container;
+  }, [pluginId, surfaceId]);
+
+  useInsertionEffect(() => {
+    if (!portalContainer) return undefined;
+    document.body.append(portalContainer);
+    return () => portalContainer.remove();
+  }, [portalContainer]);
+
+  const value = useMemo(
+    () => ({ pluginId, portalContainer }),
+    [pluginId, portalContainer],
+  );
+
+  return (
+    <PluginStyleScopeContext.Provider value={value}>
+      {children}
+    </PluginStyleScopeContext.Provider>
+  );
+}

package/src/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/src/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/src/styles/plugin.css

@@ -1,4 +1,16 @@
-@import "./globals.css";
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "./plugin-theme.css";
+
+@source "../components";
+
+@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/tsup.config.ts

@@ -1,22 +1,32 @@
 import { defineConfig } from "tsup";
 import { cpSync } from "node:fs";
 
+// Mirror the source tree 1:1 (bundle: false) so deep imports keep working.
+// The reference entry is bundled separately in tsup.reference.config.ts, which
+// the build script runs *after* this pass (this one cleans; that one does not).
 export default defineConfig({
-  // Tells tsup to grab everything in your src directory, except tests.
   entry: [
     "src/**/*.{ts,tsx}",
     "!src/**/*.test.{ts,tsx}",
     "!src/**/__tests__/**",
+    "!src/reference.ts",
+    "!src/components/reference/**",
   ],
   format: ["esm", "cjs"],
   dts: true,
   clean: true,
   splitting: true,
-  
-  // This is the golden key: it stops esbuild from merging everything 
+
+  // This is the golden key: it stops esbuild from merging everything
   // into index.js and forces it to mirror your exact folder structure.
   bundle: false,
   onSuccess: () => {
     cpSync("src/styles", "dist/styles", { recursive: true });
+    // The catalogue is plain data served as @sero-ai/ui/dashboard-catalog.json;
+    // the mirror pass only emits .ts/.tsx, so copy the JSON across by hand.
+    cpSync(
+      "src/components/dashboard/catalog.json",
+      "dist/components/dashboard/catalog.json",
+    );
   },
 });

package/tsup.reference.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from "tsup";
+
+// Reference examples are a public entrypoint, so bundle them into a single
+// self-contained file that resolves under Node ESM (the rest of the package is
+// bundler-resolved). Runtime deps stay external; only local component code is
+// inlined. Runs after the mirror pass (tsup.config.ts) with `clean: false`, so
+// it adds dist/reference.* without wiping the mirrored output.
+export default defineConfig({
+  entry: ["src/reference.ts"],
+  format: ["esm", "cjs"],
+  dts: true,
+  clean: false,
+  splitting: false,
+  bundle: true,
+});

package/dist/components/reference/ActivityExample.cjs

@@ -1,47 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
-var _lucidereact = require('lucide-react');
-
-
-
-
-
-
-
-
-
-var _dashboard = require('../dashboard');
-var _badge = require('../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" }
-];
-function ActivityExample() {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.WidgetContent, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _dashboard.Stack, { gap: "sm", fill: true, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Inline, { justify: "between", align: "center", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _dashboard.Inline, { gap: "xs", align: "center", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Text, { variant: "label", children: "Recent files" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _badge.Badge, { variant: "info", children: ITEMS.length })
-    ] }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Stack, { gap: "none", scroll: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.ItemList, { children: ITEMS.map((f) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _dashboard.ItemListItem,
-      {
-        leading: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.FileText, { className: "size-4 text-[var(--text-muted)]" }),
-        primary: f.title,
-        trailing: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _dashboard.Inline, { gap: "xs", align: "center", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _badge.Badge, { variant: "secondary", children: f.badge }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: f.meta })
-        ] })
-      },
-      f.id
-    )) }) }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _dashboard.Inline, { justify: "between", align: "center", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Status, { tone: "info", variant: "pill", children: "Synced" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.StaleIndicator, { lastUpdated: "Synced 30s ago" })
-    ] })
-  ] }) });
-}
-var ActivityExample_default = ActivityExample;
-
-
-
-exports.ActivityExample = ActivityExample; exports.default = ActivityExample_default;

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

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

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

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

package/dist/components/reference/ActivityExample.js

@@ -1,47 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-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" }
-];
-function ActivityExample() {
-  return /* @__PURE__ */ jsx(WidgetContent, { children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", fill: true, children: [
-    /* @__PURE__ */ jsx(Inline, { justify: "between", align: "center", children: /* @__PURE__ */ jsxs(Inline, { gap: "xs", align: "center", children: [
-      /* @__PURE__ */ jsx(Text, { variant: "label", children: "Recent files" }),
-      /* @__PURE__ */ jsx(Badge, { variant: "info", children: ITEMS.length })
-    ] }) }),
-    /* @__PURE__ */ jsx(Stack, { gap: "none", scroll: true, children: /* @__PURE__ */ jsx(ItemList, { children: ITEMS.map((f) => /* @__PURE__ */ jsx(
-      ItemListItem,
-      {
-        leading: /* @__PURE__ */ jsx(FileText, { className: "size-4 text-[var(--text-muted)]" }),
-        primary: f.title,
-        trailing: /* @__PURE__ */ jsxs(Inline, { gap: "xs", align: "center", children: [
-          /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: f.badge }),
-          /* @__PURE__ */ jsx("span", { children: f.meta })
-        ] })
-      },
-      f.id
-    )) }) }),
-    /* @__PURE__ */ jsxs(Inline, { justify: "between", align: "center", children: [
-      /* @__PURE__ */ jsx(Status, { tone: "info", variant: "pill", children: "Synced" }),
-      /* @__PURE__ */ jsx(StaleIndicator, { lastUpdated: "Synced 30s ago" })
-    ] })
-  ] }) });
-}
-var ActivityExample_default = ActivityExample;
-export {
-  ActivityExample,
-  ActivityExample_default as default
-};

package/dist/components/reference/ResourceExample.cjs

@@ -1,54 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-var _dashboard = require('../dashboard');
-function Ring({
-  value,
-  label,
-  tone
-}) {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _dashboard.Stack, { gap: "xs", align: "center", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.ProgressRing, { value, label, tone }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Text, { variant: "muted", children: label })
-  ] });
-}
-function ResourceExample() {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.WidgetContent, { scroll: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _dashboard.Stack, { gap: "sm", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Heading, { level: 2, size: "md", children: "Resources" }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _dashboard.MetricGroup, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Metric, { label: "CPU", value: "42%", tone: "success" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Metric, { label: "Memory", value: "6.1 GB" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Metric, { label: "Disk", value: "71%", tone: "warning" })
-    ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Divider, {}),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Section, { heading: "Usage", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _dashboard.Grid, { columns: 3, gap: "sm", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Ring, { value: 42, label: "CPU", tone: "success" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Ring, { value: 61, label: "Memory", tone: "info" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Ring, { value: 71, label: "Disk", tone: "warning" })
-    ] }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Divider, {}),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Section, { heading: "Host", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _dashboard.KeyValueList, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.KeyValue, { label: "Region", value: "eu-west-1", mono: true }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.KeyValue, { label: "Instance", value: "c7g.xlarge", mono: true }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.KeyValue, { label: "Uptime", value: "14d 6h", mono: true }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.KeyValue, { label: "Status", value: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dashboard.Status, { tone: "success", children: "Healthy" }) })
-    ] }) })
-  ] }) });
-}
-var ResourceExample_default = ResourceExample;
-
-
-
-exports.ResourceExample = ResourceExample; exports.default = ResourceExample_default;

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

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

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

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

package/dist/components/reference/ResourceExample.js

@@ -1,54 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  Divider,
-  Grid,
-  Heading,
-  KeyValue,
-  KeyValueList,
-  Metric,
-  MetricGroup,
-  ProgressRing,
-  Section,
-  Stack,
-  Status,
-  Text,
-  WidgetContent
-} from "../dashboard";
-function Ring({
-  value,
-  label,
-  tone
-}) {
-  return /* @__PURE__ */ jsxs(Stack, { gap: "xs", align: "center", children: [
-    /* @__PURE__ */ jsx(ProgressRing, { value, label, tone }),
-    /* @__PURE__ */ jsx(Text, { variant: "muted", children: label })
-  ] });
-}
-function ResourceExample() {
-  return /* @__PURE__ */ jsx(WidgetContent, { scroll: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
-    /* @__PURE__ */ jsx(Heading, { level: 2, size: "md", children: "Resources" }),
-    /* @__PURE__ */ jsxs(MetricGroup, { children: [
-      /* @__PURE__ */ jsx(Metric, { label: "CPU", value: "42%", tone: "success" }),
-      /* @__PURE__ */ jsx(Metric, { label: "Memory", value: "6.1 GB" }),
-      /* @__PURE__ */ jsx(Metric, { label: "Disk", value: "71%", tone: "warning" })
-    ] }),
-    /* @__PURE__ */ jsx(Divider, {}),
-    /* @__PURE__ */ jsx(Section, { heading: "Usage", children: /* @__PURE__ */ jsxs(Grid, { columns: 3, gap: "sm", children: [
-      /* @__PURE__ */ jsx(Ring, { value: 42, label: "CPU", tone: "success" }),
-      /* @__PURE__ */ jsx(Ring, { value: 61, label: "Memory", tone: "info" }),
-      /* @__PURE__ */ jsx(Ring, { value: 71, label: "Disk", tone: "warning" })
-    ] }) }),
-    /* @__PURE__ */ jsx(Divider, {}),
-    /* @__PURE__ */ jsx(Section, { heading: "Host", children: /* @__PURE__ */ jsxs(KeyValueList, { children: [
-      /* @__PURE__ */ jsx(KeyValue, { label: "Region", value: "eu-west-1", mono: true }),
-      /* @__PURE__ */ jsx(KeyValue, { label: "Instance", value: "c7g.xlarge", mono: true }),
-      /* @__PURE__ */ jsx(KeyValue, { label: "Uptime", value: "14d 6h", mono: true }),
-      /* @__PURE__ */ jsx(KeyValue, { label: "Status", value: /* @__PURE__ */ jsx(Status, { tone: "success", children: "Healthy" }) })
-    ] }) })
-  ] }) });
-}
-var ResourceExample_default = ResourceExample;
-export {
-  ResourceExample,
-  ResourceExample_default as default
-};

package/dist/components/reference/SchedulerExample.cjs

@@ -1,68 +0,0 @@
-"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

@@ -1,5 +0,0 @@
-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

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