@sero-ai/ui 0.4.2 → 0.6.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,9 +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/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

@@ -504,6 +504,38 @@ html {
   }
 }
 
+/* Native window glass belongs behind the application. Keep the document
+   transparent, then restore an opaque base for blocking work surfaces. */
+html.theme-glass body {
+  background-color: transparent;
+}
+
+.theme-glass :is(.window-glass-sidebar, [data-slot="sidebar"]) {
+  background-color: var(--window-glass-sidebar);
+  box-shadow: inset -1px 0 0 var(--border-subtle);
+}
+
+.theme-glass :is(
+  [data-slot="dialog-content"],
+  [data-slot="alert-dialog-content"],
+  [data-slot="sheet-content"],
+  [data-slot="drawer-content"],
+  [data-slot="popover-content"],
+  [data-slot="dropdown-menu-content"],
+  [data-slot="context-menu-content"],
+  [data-slot="select-content"]
+) {
+  --background: var(--window-glass-opaque-base);
+  --card: var(--window-glass-opaque-surface);
+  --secondary: var(--window-glass-opaque-elevated);
+  --sidebar: var(--window-glass-opaque-surface);
+  --sidebar-accent: var(--window-glass-opaque-elevated);
+  --bg-base: var(--window-glass-opaque-base);
+  --bg-surface: var(--window-glass-opaque-surface);
+  --bg-elevated: var(--window-glass-opaque-elevated);
+  background-color: var(--window-glass-opaque-base);
+}
+
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,

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.css

@@ -3,7 +3,10 @@
 @import "shadcn/tailwind.css";
 @import "./plugin-theme.css";
 
-@source "../components";
+/* 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 *));
 

package/src/theme/apply-theme.test.ts

@@ -0,0 +1,126 @@
+// @vitest-environment jsdom
+
+import { afterEach, describe, expect, it } from 'vitest';
+import { applyThemePreset, resetTheme, validateThemePreset } from './apply-theme';
+import {
+  DEFAULT_DARK_COLORS,
+  DEFAULT_GLASS_EFFECT,
+  DEFAULT_LIGHT_COLORS,
+  type ThemePreset,
+} from './types';
+
+function createPreset(overrides: Partial<ThemePreset> = {}): ThemePreset {
+  return {
+    id: 'glass-test',
+    name: 'Glass test',
+    version: 1,
+    colors: {
+      light: { ...DEFAULT_LIGHT_COLORS },
+      dark: { ...DEFAULT_DARK_COLORS },
+    },
+    ...overrides,
+  };
+}
+
+describe('theme glass effect', () => {
+  afterEach(() => resetTheme());
+
+  it('separates translucent layers and retains solid popup colors', () => {
+    applyThemePreset(createPreset({
+      glass: { enabled: true, opacity: 0.64 },
+    }), 'dark');
+
+    const root = document.documentElement;
+    expect(root.classList.contains('theme-glass')).toBe(true);
+    expect(root.style.getPropertyValue('--bg-base')).toBe(
+      'color-mix(in srgb, #0a0a0b 64%, transparent)',
+    );
+    expect(root.style.getPropertyValue('--bg-surface')).toBe(
+      'color-mix(in srgb, #111113 18%, transparent)',
+    );
+    expect(root.style.getPropertyValue('--window-glass-opaque-surface')).toBe('#111113');
+    expect(root.style.getPropertyValue('--bg-elevated')).toBe(
+      'color-mix(in srgb, #fafafa 8%, transparent)',
+    );
+    expect(root.style.getPropertyValue('--window-glass-opaque-elevated')).toBe('#18181b');
+    expect(root.style.getPropertyValue('--window-glass-sidebar')).toBe(
+      'color-mix(in srgb, #111113 8%, transparent)',
+    );
+    expect(root.style.getPropertyValue('--window-glass-opaque-base')).toBe(
+      '#0a0a0b',
+    );
+  });
+
+  it('restores opaque surfaces when the next theme disables glass', () => {
+    applyThemePreset(createPreset({
+      glass: { enabled: true, opacity: 0.64 },
+    }), 'dark');
+    applyThemePreset(createPreset(), 'dark');
+
+    const root = document.documentElement;
+    expect(root.classList.contains('theme-glass')).toBe(false);
+    expect(root.style.getPropertyValue('--bg-base')).toBe('#0a0a0b');
+    expect(root.style.getPropertyValue('--bg-surface')).toBe('#111113');
+    expect(root.style.getPropertyValue('--bg-elevated')).toBe('#18181b');
+    expect(root.style.getPropertyValue('--window-glass-opaque-surface')).toBe('');
+    expect(root.style.getPropertyValue('--window-glass-sidebar')).toBe('');
+    expect(root.style.getPropertyValue('--window-glass-opaque-base')).toBe('');
+  });
+
+  it('keeps panel boundaries and soft selections at zero window tint in light mode', () => {
+    applyThemePreset(createPreset({
+      glass: { enabled: true, opacity: 0 },
+    }), 'light');
+
+    const root = document.documentElement;
+    expect(root.style.getPropertyValue('--bg-base')).toBe(
+      'color-mix(in srgb, #ffffff 0%, transparent)',
+    );
+    expect(root.style.getPropertyValue('--window-glass-sidebar')).toBe(
+      'color-mix(in srgb, #f4f5f7 8%, transparent)',
+    );
+  });
+
+  it.each([
+    [-1, 0],
+    [2, 1],
+  ])('clamps persisted glass opacity %s to %s', (opacity, expected) => {
+    const preset = createPreset({ glass: { enabled: true, opacity } });
+
+    expect(validateThemePreset(preset)?.glass).toEqual({
+      ...DEFAULT_GLASS_EFFECT,
+      enabled: true,
+      opacity: expected,
+    });
+  });
+  it.each(['light', 'dark'] as const)('can clear every local layer in %s mode independently of native material', (mode) => {
+    const preset = createPreset({ glass: {
+      enabled: true, opacity: 0, blurRadius: 32, windowsMaterial: 'acrylic', sidebarOpacity: 0,
+      surfaceOpacity: 0, selectionOpacity: 0, borderOpacity: 0,
+    } });
+    const savedTheme = JSON.stringify(preset);
+    const validated = validateThemePreset(JSON.parse(savedTheme));
+    expect(validated?.glass).toEqual(preset.glass);
+    if (!validated) throw new Error('Expected valid theme');
+    applyThemePreset(validated, mode);
+    const style = document.documentElement.style;
+    for (const key of ['--bg-base', '--window-glass-sidebar', '--bg-surface', '--bg-elevated', '--border-default']) {
+      expect(style.getPropertyValue(key)).toContain(' 0%, transparent)');
+    }
+    applyThemePreset({ ...validated, glass: { ...preset.glass!, surfaceOpacity: 0.4 } }, mode);
+    expect(style.getPropertyValue('--bg-surface')).toContain(' 40%, transparent)');
+    expect(style.getPropertyValue('--window-glass-sidebar')).toContain(' 0%, transparent)');
+  });
+
+  it('normalises invalid saved glass controls', () => {
+    const preset = createPreset();
+    const validated = validateThemePreset({ ...preset, glass: {
+      enabled: true, opacity: NaN, sidebarOpacity: -1, surfaceOpacity: 4,
+      selectionOpacity: Infinity, borderOpacity: 'bad', blurRadius: Infinity, windowsMaterial: 'invalid',
+    } });
+    expect(validated?.glass).toEqual({
+      ...DEFAULT_GLASS_EFFECT, enabled: true, sidebarOpacity: 0, surfaceOpacity: 1,
+    });
+  });
+
+});

package/src/theme/apply-theme.ts

@@ -1,6 +1,9 @@
-import type {
-  ColorTokens,
-  ThemePreset,
+import {
+  DEFAULT_GLASS_EFFECT,
+  WINDOWS_GLASS_MATERIALS,
+  type ColorTokens,
+  type ThemeGlassEffect,
+  type ThemePreset,
 } from './types';
 
 // ── Token → CSS Variable Mapping ─────────────────────────────
@@ -86,6 +89,38 @@ function tint(color: string, percentage: number): string {
   return `color-mix(in srgb, ${color} ${percentage}%, transparent)`;
 }
 
+function applyGlassEffect(
+  root: HTMLElement,
+  glass: ThemeGlassEffect | undefined,
+  colors: ColorTokens,
+): void {
+  const enabled = glass?.enabled === true;
+  root.classList.toggle('theme-glass', enabled);
+  root.style.removeProperty('--window-glass-opaque-base');
+  root.style.removeProperty('--window-glass-sidebar');
+  root.style.removeProperty('--window-glass-opaque-surface');
+  root.style.removeProperty('--window-glass-opaque-elevated');
+  if (!enabled) return;
+
+  const opacity = Math.min(1, Math.max(0, glass.opacity));
+  const percentage = Math.round(opacity * 100);
+  root.style.setProperty('--bg-base', tint(colors.bgBase, percentage));
+  root.style.setProperty(
+    '--window-glass-sidebar',
+    tint(colors.bgSurface, (glass.sidebarOpacity ?? DEFAULT_GLASS_EFFECT.sidebarOpacity) * 100),
+  );
+  root.style.setProperty('--window-glass-opaque-base', colors.bgBase);
+  root.style.setProperty('--window-glass-opaque-surface', colors.bgSurface);
+  root.style.setProperty('--window-glass-opaque-elevated', colors.bgElevated);
+  // Thin local layers preserve the wallpaper while separating nested content.
+  root.style.setProperty('--bg-surface', tint(colors.bgSurface, (glass.surfaceOpacity ?? DEFAULT_GLASS_EFFECT.surfaceOpacity) * 100));
+  root.style.setProperty('--bg-elevated', tint(colors.textPrimary, (glass.selectionOpacity ?? DEFAULT_GLASS_EFFECT.selectionOpacity) * 100));
+  root.style.setProperty('--text-muted', colors.textSecondary);
+  const border = (glass.borderOpacity ?? DEFAULT_GLASS_EFFECT.borderOpacity) * 100;
+  root.style.setProperty('--border-subtle', tint(colors.textPrimary, border * 2 / 3));
+  root.style.setProperty('--border-default', tint(colors.textPrimary, border));
+}
+
 // ── Apply / Reset ────────────────────────────────────────────
 
 /** Apply a theme preset for the given mode. */
@@ -130,6 +165,8 @@ export function applyThemePreset(
     root.style.setProperty('--radius', preset.radius.md);
   }
 
+  applyGlassEffect(root, preset.glass, colors);
+
   root.classList.toggle('dark', mode === 'dark');
 }
 
@@ -142,6 +179,10 @@ const ALL_MANAGED_VARS = [
   '--font-size-base',
   '--spacing',
   '--radius',
+  '--window-glass-opaque-base',
+  '--window-glass-sidebar',
+  '--window-glass-opaque-surface',
+  '--window-glass-opaque-elevated',
 ];
 
 /** Remove all inline theme overrides, reverting to CSS defaults. */
@@ -150,6 +191,7 @@ export function resetTheme(): void {
   for (const cssVar of ALL_MANAGED_VARS) {
     root.style.removeProperty(cssVar);
   }
+  root.classList.remove('theme-glass');
 }
 
 // ── Validation ───────────────────────────────────────────────
@@ -221,6 +263,26 @@ function sanitiseRadius(raw: unknown): ThemePreset['radius'] | undefined {
   return Object.keys(result).length > 0 ? result : undefined;
 }
 
+function sanitiseGlass(raw: unknown): ThemeGlassEffect | undefined {
+  if (!raw || typeof raw !== 'object') return undefined;
+  const value = raw as Record<string, unknown>;
+  if (typeof value.enabled !== 'boolean') return undefined;
+
+  const result = { ...DEFAULT_GLASS_EFFECT, enabled: value.enabled };
+  for (const key of ['opacity', 'sidebarOpacity', 'surfaceOpacity', 'selectionOpacity', 'borderOpacity'] as const) {
+    const amount = value[key];
+    if (typeof amount === 'number' && Number.isFinite(amount)) {
+      result[key] = Math.min(1, Math.max(0, amount));
+    }
+  }
+  if (typeof value.blurRadius === 'number' && Number.isFinite(value.blurRadius)) {
+    result.blurRadius = Math.round(Math.min(64, Math.max(0, value.blurRadius)));
+  }
+  result.windowsMaterial = WINDOWS_GLASS_MATERIALS.find((material) => material === value.windowsMaterial)
+    ?? DEFAULT_GLASS_EFFECT.windowsMaterial;
+  return result;
+}
+
 /** Validate and normalise an unknown value into a ThemePreset. */
 export function validateThemePreset(data: unknown): ThemePreset | null {
   if (!data || typeof data !== 'object') return null;
@@ -246,5 +308,6 @@ export function validateThemePreset(data: unknown): ThemePreset | null {
     typography: sanitiseTypography(d.typography),
     spacing: sanitiseSpacing(d.spacing),
     radius: sanitiseRadius(d.radius),
+    glass: sanitiseGlass(d.glass),
   };
 }

package/src/theme/types.ts

@@ -105,6 +105,25 @@ export interface RadiusTokens {
   lg?: string;
 }
 
+export const WINDOWS_GLASS_MATERIALS = ['acrylic', 'mica', 'tabbed'] as const;
+export type WindowsGlassMaterial = typeof WINDOWS_GLASS_MATERIALS[number];
+
+export interface ThemeGlassEffect {
+  /** Show the desktop through Sero's surfaces. */
+  enabled: boolean;
+  /** Window tint opacity from 0 to 1. */
+  opacity: number;
+  /** Direct macOS desktop blur radius, from 0 to 64 pixels. */
+  blurRadius?: number;
+  /** Windows 11 system backdrop. */
+  windowsMaterial?: WindowsGlassMaterial;
+  /** Independent local layer opacities from 0 to 1. */
+  sidebarOpacity?: number;
+  surfaceOpacity?: number;
+  selectionOpacity?: number;
+  borderOpacity?: number;
+}
+
 // ── Theme Preset ─────────────────────────────────────────────
 
 export interface ThemePreset {
@@ -141,6 +160,9 @@ export interface ThemePreset {
 
   /** Border radius overrides. */
   radius?: RadiusTokens;
+
+  /** Optional translucent desktop window treatment. */
+  glass?: ThemeGlassEffect;
 }
 
 /** Lightweight metadata for listing presets without loading full data. */
@@ -218,6 +240,17 @@ export const DEFAULT_RADIUS: Required<RadiusTokens> = {
   lg: '12px',
 };
 
+export const DEFAULT_GLASS_EFFECT: Required<ThemeGlassEffect> = {
+  enabled: false,
+  opacity: 0.78,
+  blurRadius: 24,
+  windowsMaterial: 'acrylic',
+  sidebarOpacity: 0.08,
+  surfaceOpacity: 0.18,
+  selectionOpacity: 0.08,
+  borderOpacity: 0.18,
+};
+
 /** Default colour tokens matching globals.css .dark values. */
 export const DEFAULT_DARK_COLORS: ColorTokens = {
   bgBase: '#0a0a0b',