@sero-ai/ui 0.4.1 → 0.5.0

package/src/index.ts

@@ -1,12 +1,11 @@
 // @sero-ai/ui — Shared UI components, AI elements, and utilities
 //
-// Prefer importing common primitives from the barrel export:
+// Import primitives, dashboard components, hooks, and utilities from the root:
 //   import { Button, Card, Input, cn, useIsMobile } from "@sero-ai/ui"
 //
-// Deep subpath imports are still supported when needed. Because this package is
-// native ESM, consumers should use runtime .js extensions for deep imports:
-//   import { Button } from "@sero-ai/ui/components/ui/button.js"
-//   import { cn } from "@sero-ai/ui/lib/utils.js"
+// AI elements have stable public subpaths so their editor and rendering
+// dependencies are loaded only by consumers that use them:
+//   import { Message } from "@sero-ai/ui/ai-elements/message"
 
 // ── Utilities ──
 export { cn } from "./lib/utils";
@@ -77,60 +76,6 @@ export * from "./components/ui/toggle-group";
 export * from "./components/ui/toggle";
 export * from "./components/ui/tooltip";
 export * from "./components/ui/tree";
-// ── AI Elements ──
-export * from "./components/ai-elements/agent";
-export * from "./components/ai-elements/artifact";
-export * from "./components/ai-elements/attachments";
-export * from "./components/ai-elements/audio-player";
-export * from "./components/ai-elements/canvas";
-export * from "./components/ai-elements/chain-of-thought";
-export * from "./components/ai-elements/checkpoint";
-export * from "./components/ai-elements/code-block";
-export * from "./components/ai-elements/commit";
-export * from "./components/ai-elements/confirmation";
-export * from "./components/ai-elements/connection";
-export * from "./components/ai-elements/context";
-export * from "./components/ai-elements/controls";
-export * from "./components/ai-elements/conversation";
-export * from "./components/ai-elements/edge";
-export * from "./components/ai-elements/environment-variables";
-export * from "./components/ai-elements/file-tree";
-export * from "./components/ai-elements/image";
-export * from "./components/ai-elements/inline-citation";
-export * from "./components/ai-elements/jsx-preview";
-export * from "./components/ai-elements/message";
-export * from "./components/ai-elements/mic-selector";
-export * from "./components/ai-elements/model-selector";
-export * from "./components/ai-elements/node";
-export * from "./components/ai-elements/open-in-chat";
-export * from "./components/ai-elements/package-info";
-export * from "./components/ai-elements/panel";
-export * from "./components/ai-elements/persona";
-export * from "./components/ai-elements/plan";
-export * from "./components/ai-elements/prompt-input-context";
-export * from "./components/ai-elements/prompt-input-elements";
-export * from "./components/ai-elements/prompt-input-textarea";
-export * from "./components/ai-elements/prompt-input";
-export * from "./components/ai-elements/queue";
-export * from "./components/ai-elements/reasoning";
-export * from "./components/ai-elements/sandbox";
-export * from "./components/ai-elements/schema-display";
-export * from "./components/ai-elements/shimmer";
-export * from "./components/ai-elements/snippet";
-export * from "./components/ai-elements/sources";
-export * from "./components/ai-elements/speech-input";
-export * from "./components/ai-elements/stack-trace";
-export * from "./components/ai-elements/suggestion";
-export * from "./components/ai-elements/task";
-export * from "./components/ai-elements/terminal";
-export * from "./components/ai-elements/test-results";
-export * from "./components/ai-elements/tool";
-export * from "./components/ai-elements/toolbar";
-export * from "./components/ai-elements/transcription";
-export * from "./components/ai-elements/voice-selector-accent";
-export * from "./components/ai-elements/voice-selector";
-export * from "./components/ai-elements/web-preview";
-
 // ── Dashboard Components ──
 // Compact presentation components for dashboard widgets and full plugin views.
 // The discovery catalogue is plain data at "@sero-ai/ui/dashboard-catalog.json";
@@ -138,7 +83,5 @@ export * from "./components/ai-elements/web-preview";
 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/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/src/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/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/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/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,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. */