@sero-ai/ui 0.4.2 → 0.6.0

package/dist/theme/apply-theme.cjs

@@ -1,4 +1,8 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }const COLOR_TOKEN_TO_CSS = {
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+
+var _types = require('./types');
+const COLOR_TOKEN_TO_CSS = {
   bgBase: "--bg-base",
   bgSurface: "--bg-surface",
   bgElevated: "--bg-elevated",
@@ -67,6 +71,31 @@ const DERIVED_OPACITY_VARS = [
 function tint(color, percentage) {
   return `color-mix(in srgb, ${color} ${percentage}%, transparent)`;
 }
+function applyGlassEffect(root, glass, colors) {
+  const enabled = _optionalChain([glass, 'optionalAccess', _ => _.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, (_nullishCoalesce(glass.sidebarOpacity, () => ( _types.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);
+  root.style.setProperty("--bg-surface", tint(colors.bgSurface, (_nullishCoalesce(glass.surfaceOpacity, () => ( _types.DEFAULT_GLASS_EFFECT.surfaceOpacity))) * 100));
+  root.style.setProperty("--bg-elevated", tint(colors.textPrimary, (_nullishCoalesce(glass.selectionOpacity, () => ( _types.DEFAULT_GLASS_EFFECT.selectionOpacity))) * 100));
+  root.style.setProperty("--text-muted", colors.textSecondary);
+  const border = (_nullishCoalesce(glass.borderOpacity, () => ( _types.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));
+}
 function applyThemePreset(preset, mode, options = {}) {
   const root = document.documentElement;
   const colors = mode === "dark" ? preset.colors.dark : preset.colors.light;
@@ -78,26 +107,27 @@ function applyThemePreset(preset, mode, options = {}) {
     const baseColor = colors[baseKey];
     if (baseColor) root.style.setProperty(cssVar, tint(baseColor, percentage));
   }
-  if (_optionalChain([preset, 'access', _ => _.typography, 'optionalAccess', _2 => _2.fontSans])) {
-    _optionalChain([options, 'access', _3 => _3.loadFont, 'optionalCall', _4 => _4(preset.typography.fontSans)]);
+  if (_optionalChain([preset, 'access', _2 => _2.typography, 'optionalAccess', _3 => _3.fontSans])) {
+    _optionalChain([options, 'access', _4 => _4.loadFont, 'optionalCall', _5 => _5(preset.typography.fontSans)]);
     root.style.setProperty("--font-sans", preset.typography.fontSans);
   }
-  if (_optionalChain([preset, 'access', _5 => _5.typography, 'optionalAccess', _6 => _6.fontMono])) {
-    _optionalChain([options, 'access', _7 => _7.loadFont, 'optionalCall', _8 => _8(preset.typography.fontMono)]);
+  if (_optionalChain([preset, 'access', _6 => _6.typography, 'optionalAccess', _7 => _7.fontMono])) {
+    _optionalChain([options, 'access', _8 => _8.loadFont, 'optionalCall', _9 => _9(preset.typography.fontMono)]);
     root.style.setProperty("--font-mono", preset.typography.fontMono);
   }
-  if (_optionalChain([preset, 'access', _9 => _9.typography, 'optionalAccess', _10 => _10.fontSizeBase])) {
+  if (_optionalChain([preset, 'access', _10 => _10.typography, 'optionalAccess', _11 => _11.fontSizeBase])) {
     root.style.setProperty("--font-size-base", preset.typography.fontSizeBase);
   }
-  if (_optionalChain([preset, 'access', _11 => _11.spacing, 'optionalAccess', _12 => _12.md])) {
+  if (_optionalChain([preset, 'access', _12 => _12.spacing, 'optionalAccess', _13 => _13.md])) {
     const mdPx = parseFloat(preset.spacing.md);
     if (Number.isFinite(mdPx) && mdPx > 0) {
       root.style.setProperty("--spacing", `${(mdPx / 3).toFixed(3)}px`);
     }
   }
-  if (_optionalChain([preset, 'access', _13 => _13.radius, 'optionalAccess', _14 => _14.md])) {
+  if (_optionalChain([preset, 'access', _14 => _14.radius, 'optionalAccess', _15 => _15.md])) {
     root.style.setProperty("--radius", preset.radius.md);
   }
+  applyGlassEffect(root, preset.glass, colors);
   root.classList.toggle("dark", mode === "dark");
 }
 const ALL_MANAGED_VARS = [
@@ -107,13 +137,18 @@ const ALL_MANAGED_VARS = [
   "--font-mono",
   "--font-size-base",
   "--spacing",
-  "--radius"
+  "--radius",
+  "--window-glass-opaque-base",
+  "--window-glass-sidebar",
+  "--window-glass-opaque-surface",
+  "--window-glass-opaque-elevated"
 ];
 function resetTheme() {
   const root = document.documentElement;
   for (const cssVar of ALL_MANAGED_VARS) {
     root.style.removeProperty(cssVar);
   }
+  root.classList.remove("theme-glass");
 }
 const LEGACY_REQUIRED_COLOR_KEYS = [
   "bgBase",
@@ -191,6 +226,23 @@ function sanitiseRadius(raw) {
   }
   return Object.keys(result).length > 0 ? result : void 0;
 }
+function sanitiseGlass(raw) {
+  if (!raw || typeof raw !== "object") return void 0;
+  const value = raw;
+  if (typeof value.enabled !== "boolean") return void 0;
+  const result = { ..._types.DEFAULT_GLASS_EFFECT, enabled: value.enabled };
+  for (const key of ["opacity", "sidebarOpacity", "surfaceOpacity", "selectionOpacity", "borderOpacity"]) {
+    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 = _nullishCoalesce(_types.WINDOWS_GLASS_MATERIALS.find((material) => material === value.windowsMaterial), () => ( _types.DEFAULT_GLASS_EFFECT.windowsMaterial));
+  return result;
+}
 function validateThemePreset(data) {
   if (!data || typeof data !== "object") return null;
   const d = data;
@@ -198,8 +250,8 @@ function validateThemePreset(data) {
   if (typeof d.name !== "string" || !d.name) return null;
   if (d.version !== 1) return null;
   const colors = d.colors;
-  const light = normaliseColorTokens(_optionalChain([colors, 'optionalAccess', _15 => _15.light]));
-  const dark = normaliseColorTokens(_optionalChain([colors, 'optionalAccess', _16 => _16.dark]));
+  const light = normaliseColorTokens(_optionalChain([colors, 'optionalAccess', _16 => _16.light]));
+  const dark = normaliseColorTokens(_optionalChain([colors, 'optionalAccess', _17 => _17.dark]));
   if (!light || !dark) return null;
   return {
     id: d.id,
@@ -211,7 +263,8 @@ function validateThemePreset(data) {
     colors: { light, dark },
     typography: sanitiseTypography(d.typography),
     spacing: sanitiseSpacing(d.spacing),
-    radius: sanitiseRadius(d.radius)
+    radius: sanitiseRadius(d.radius),
+    glass: sanitiseGlass(d.glass)
   };
 }
 

package/dist/theme/apply-theme.js

@@ -1,3 +1,7 @@
+import {
+  DEFAULT_GLASS_EFFECT,
+  WINDOWS_GLASS_MATERIALS
+} from "./types";
 const COLOR_TOKEN_TO_CSS = {
   bgBase: "--bg-base",
   bgSurface: "--bg-surface",
@@ -67,6 +71,31 @@ const DERIVED_OPACITY_VARS = [
 function tint(color, percentage) {
   return `color-mix(in srgb, ${color} ${percentage}%, transparent)`;
 }
+function applyGlassEffect(root, glass, colors) {
+  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);
+  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));
+}
 function applyThemePreset(preset, mode, options = {}) {
   const root = document.documentElement;
   const colors = mode === "dark" ? preset.colors.dark : preset.colors.light;
@@ -98,6 +127,7 @@ function applyThemePreset(preset, mode, options = {}) {
   if (preset.radius?.md) {
     root.style.setProperty("--radius", preset.radius.md);
   }
+  applyGlassEffect(root, preset.glass, colors);
   root.classList.toggle("dark", mode === "dark");
 }
 const ALL_MANAGED_VARS = [
@@ -107,13 +137,18 @@ const ALL_MANAGED_VARS = [
   "--font-mono",
   "--font-size-base",
   "--spacing",
-  "--radius"
+  "--radius",
+  "--window-glass-opaque-base",
+  "--window-glass-sidebar",
+  "--window-glass-opaque-surface",
+  "--window-glass-opaque-elevated"
 ];
 function resetTheme() {
   const root = document.documentElement;
   for (const cssVar of ALL_MANAGED_VARS) {
     root.style.removeProperty(cssVar);
   }
+  root.classList.remove("theme-glass");
 }
 const LEGACY_REQUIRED_COLOR_KEYS = [
   "bgBase",
@@ -191,6 +226,23 @@ function sanitiseRadius(raw) {
   }
   return Object.keys(result).length > 0 ? result : void 0;
 }
+function sanitiseGlass(raw) {
+  if (!raw || typeof raw !== "object") return void 0;
+  const value = raw;
+  if (typeof value.enabled !== "boolean") return void 0;
+  const result = { ...DEFAULT_GLASS_EFFECT, enabled: value.enabled };
+  for (const key of ["opacity", "sidebarOpacity", "surfaceOpacity", "selectionOpacity", "borderOpacity"]) {
+    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;
+}
 function validateThemePreset(data) {
   if (!data || typeof data !== "object") return null;
   const d = data;
@@ -211,7 +263,8 @@ function validateThemePreset(data) {
     colors: { light, dark },
     typography: sanitiseTypography(d.typography),
     spacing: sanitiseSpacing(d.spacing),
-    radius: sanitiseRadius(d.radius)
+    radius: sanitiseRadius(d.radius),
+    glass: sanitiseGlass(d.glass)
   };
 }
 export {

package/dist/theme/index.d.cts

@@ -1,2 +1,2 @@
-export { ColorTokens, DEFAULT_DARK_COLORS, DEFAULT_LIGHT_COLORS, DEFAULT_RADIUS, DEFAULT_SPACING, DEFAULT_THEME_ID, DEFAULT_TYPOGRAPHY, RadiusTokens, SpacingTokens, TerminalColorTokens, ThemeMode, ThemePreset, ThemePresetMeta, TypographyTokens } from './types.cjs';
+export { ColorTokens, DEFAULT_DARK_COLORS, DEFAULT_GLASS_EFFECT, DEFAULT_LIGHT_COLORS, DEFAULT_RADIUS, DEFAULT_SPACING, DEFAULT_THEME_ID, DEFAULT_TYPOGRAPHY, RadiusTokens, SpacingTokens, TerminalColorTokens, ThemeGlassEffect, ThemeMode, ThemePreset, ThemePresetMeta, TypographyTokens, WINDOWS_GLASS_MATERIALS, WindowsGlassMaterial } from './types.cjs';
 export { ApplyThemeOptions, applyThemePreset, resetTheme, validateThemePreset } from './apply-theme.cjs';

package/dist/theme/index.d.ts

@@ -1,2 +1,2 @@
-export { ColorTokens, DEFAULT_DARK_COLORS, DEFAULT_LIGHT_COLORS, DEFAULT_RADIUS, DEFAULT_SPACING, DEFAULT_THEME_ID, DEFAULT_TYPOGRAPHY, RadiusTokens, SpacingTokens, TerminalColorTokens, ThemeMode, ThemePreset, ThemePresetMeta, TypographyTokens } from './types.js';
+export { ColorTokens, DEFAULT_DARK_COLORS, DEFAULT_GLASS_EFFECT, DEFAULT_LIGHT_COLORS, DEFAULT_RADIUS, DEFAULT_SPACING, DEFAULT_THEME_ID, DEFAULT_TYPOGRAPHY, RadiusTokens, SpacingTokens, TerminalColorTokens, ThemeGlassEffect, ThemeMode, ThemePreset, ThemePresetMeta, TypographyTokens, WINDOWS_GLASS_MATERIALS, WindowsGlassMaterial } from './types.js';
 export { ApplyThemeOptions, applyThemePreset, resetTheme, validateThemePreset } from './apply-theme.js';

package/dist/theme/types.cjs

@@ -1,4 +1,5 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});const DEFAULT_THEME_ID = "default";
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});const WINDOWS_GLASS_MATERIALS = ["acrylic", "mica", "tabbed"];
+const DEFAULT_THEME_ID = "default";
 const DEFAULT_LIGHT_COLORS = {
   bgBase: "#ffffff",
   bgSurface: "#f4f5f7",
@@ -48,6 +49,16 @@ const DEFAULT_RADIUS = {
   md: "8px",
   lg: "12px"
 };
+const DEFAULT_GLASS_EFFECT = {
+  enabled: false,
+  opacity: 0.78,
+  blurRadius: 24,
+  windowsMaterial: "acrylic",
+  sidebarOpacity: 0.08,
+  surfaceOpacity: 0.18,
+  selectionOpacity: 0.08,
+  borderOpacity: 0.18
+};
 const DEFAULT_DARK_COLORS = {
   bgBase: "#0a0a0b",
   bgSurface: "#111113",
@@ -87,4 +98,6 @@ const DEFAULT_DARK_COLORS = {
 
 
 
-exports.DEFAULT_DARK_COLORS = DEFAULT_DARK_COLORS; exports.DEFAULT_LIGHT_COLORS = DEFAULT_LIGHT_COLORS; exports.DEFAULT_RADIUS = DEFAULT_RADIUS; exports.DEFAULT_SPACING = DEFAULT_SPACING; exports.DEFAULT_THEME_ID = DEFAULT_THEME_ID; exports.DEFAULT_TYPOGRAPHY = DEFAULT_TYPOGRAPHY;
+
+
+exports.DEFAULT_DARK_COLORS = DEFAULT_DARK_COLORS; exports.DEFAULT_GLASS_EFFECT = DEFAULT_GLASS_EFFECT; exports.DEFAULT_LIGHT_COLORS = DEFAULT_LIGHT_COLORS; exports.DEFAULT_RADIUS = DEFAULT_RADIUS; exports.DEFAULT_SPACING = DEFAULT_SPACING; exports.DEFAULT_THEME_ID = DEFAULT_THEME_ID; exports.DEFAULT_TYPOGRAPHY = DEFAULT_TYPOGRAPHY; exports.WINDOWS_GLASS_MATERIALS = WINDOWS_GLASS_MATERIALS;

package/dist/theme/types.d.cts

@@ -78,6 +78,23 @@ interface RadiusTokens {
     md?: string;
     lg?: string;
 }
+declare const WINDOWS_GLASS_MATERIALS: readonly ["acrylic", "mica", "tabbed"];
+type WindowsGlassMaterial = typeof WINDOWS_GLASS_MATERIALS[number];
+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;
+}
 interface ThemePreset {
     /** Unique ID (slug or uuid). */
     id: string;
@@ -107,6 +124,8 @@ interface ThemePreset {
     spacing?: SpacingTokens;
     /** Border radius overrides. */
     radius?: RadiusTokens;
+    /** Optional translucent desktop window treatment. */
+    glass?: ThemeGlassEffect;
 }
 /** Lightweight metadata for listing presets without loading full data. */
 interface ThemePresetMeta {
@@ -127,7 +146,8 @@ declare const DEFAULT_TYPOGRAPHY: Required<TypographyTokens>;
 declare const DEFAULT_SPACING: Required<SpacingTokens>;
 /** Default radius matching globals.css values. */
 declare const DEFAULT_RADIUS: Required<RadiusTokens>;
+declare const DEFAULT_GLASS_EFFECT: Required<ThemeGlassEffect>;
 /** Default colour tokens matching globals.css .dark values. */
 declare const DEFAULT_DARK_COLORS: ColorTokens;
 
-export { type ColorTokens, DEFAULT_DARK_COLORS, DEFAULT_LIGHT_COLORS, DEFAULT_RADIUS, DEFAULT_SPACING, DEFAULT_THEME_ID, DEFAULT_TYPOGRAPHY, type RadiusTokens, type SpacingTokens, type TerminalColorTokens, type ThemeMode, type ThemePreset, type ThemePresetMeta, type TypographyTokens };
+export { type ColorTokens, DEFAULT_DARK_COLORS, DEFAULT_GLASS_EFFECT, DEFAULT_LIGHT_COLORS, DEFAULT_RADIUS, DEFAULT_SPACING, DEFAULT_THEME_ID, DEFAULT_TYPOGRAPHY, type RadiusTokens, type SpacingTokens, type TerminalColorTokens, type ThemeGlassEffect, type ThemeMode, type ThemePreset, type ThemePresetMeta, type TypographyTokens, WINDOWS_GLASS_MATERIALS, type WindowsGlassMaterial };

package/dist/theme/types.d.ts

@@ -78,6 +78,23 @@ interface RadiusTokens {
     md?: string;
     lg?: string;
 }
+declare const WINDOWS_GLASS_MATERIALS: readonly ["acrylic", "mica", "tabbed"];
+type WindowsGlassMaterial = typeof WINDOWS_GLASS_MATERIALS[number];
+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;
+}
 interface ThemePreset {
     /** Unique ID (slug or uuid). */
     id: string;
@@ -107,6 +124,8 @@ interface ThemePreset {
     spacing?: SpacingTokens;
     /** Border radius overrides. */
     radius?: RadiusTokens;
+    /** Optional translucent desktop window treatment. */
+    glass?: ThemeGlassEffect;
 }
 /** Lightweight metadata for listing presets without loading full data. */
 interface ThemePresetMeta {
@@ -127,7 +146,8 @@ declare const DEFAULT_TYPOGRAPHY: Required<TypographyTokens>;
 declare const DEFAULT_SPACING: Required<SpacingTokens>;
 /** Default radius matching globals.css values. */
 declare const DEFAULT_RADIUS: Required<RadiusTokens>;
+declare const DEFAULT_GLASS_EFFECT: Required<ThemeGlassEffect>;
 /** Default colour tokens matching globals.css .dark values. */
 declare const DEFAULT_DARK_COLORS: ColorTokens;
 
-export { type ColorTokens, DEFAULT_DARK_COLORS, DEFAULT_LIGHT_COLORS, DEFAULT_RADIUS, DEFAULT_SPACING, DEFAULT_THEME_ID, DEFAULT_TYPOGRAPHY, type RadiusTokens, type SpacingTokens, type TerminalColorTokens, type ThemeMode, type ThemePreset, type ThemePresetMeta, type TypographyTokens };
+export { type ColorTokens, DEFAULT_DARK_COLORS, DEFAULT_GLASS_EFFECT, DEFAULT_LIGHT_COLORS, DEFAULT_RADIUS, DEFAULT_SPACING, DEFAULT_THEME_ID, DEFAULT_TYPOGRAPHY, type RadiusTokens, type SpacingTokens, type TerminalColorTokens, type ThemeGlassEffect, type ThemeMode, type ThemePreset, type ThemePresetMeta, type TypographyTokens, WINDOWS_GLASS_MATERIALS, type WindowsGlassMaterial };

package/dist/theme/types.js

@@ -1,3 +1,4 @@
+const WINDOWS_GLASS_MATERIALS = ["acrylic", "mica", "tabbed"];
 const DEFAULT_THEME_ID = "default";
 const DEFAULT_LIGHT_COLORS = {
   bgBase: "#ffffff",
@@ -48,6 +49,16 @@ const DEFAULT_RADIUS = {
   md: "8px",
   lg: "12px"
 };
+const DEFAULT_GLASS_EFFECT = {
+  enabled: false,
+  opacity: 0.78,
+  blurRadius: 24,
+  windowsMaterial: "acrylic",
+  sidebarOpacity: 0.08,
+  surfaceOpacity: 0.18,
+  selectionOpacity: 0.08,
+  borderOpacity: 0.18
+};
 const DEFAULT_DARK_COLORS = {
   bgBase: "#0a0a0b",
   bgSurface: "#111113",
@@ -82,9 +93,11 @@ const DEFAULT_DARK_COLORS = {
 };
 export {
   DEFAULT_DARK_COLORS,
+  DEFAULT_GLASS_EFFECT,
   DEFAULT_LIGHT_COLORS,
   DEFAULT_RADIUS,
   DEFAULT_SPACING,
   DEFAULT_THEME_ID,
-  DEFAULT_TYPOGRAPHY
+  DEFAULT_TYPOGRAPHY,
+  WINDOWS_GLASS_MATERIALS
 };

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@sero-ai/ui",
-  "version": "0.4.2",
+  "version": "0.6.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",
@@ -36,67 +49,68 @@
     }
   },
   "peerDependencies": {
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4"
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8"
   },
   "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.7.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.31.0",
     "@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",
-    "ai": "^6.0.116",
+    "@tanstack/react-virtual": "^3.14.10",
+    "@xyflow/react": "^12.11.3",
+    "ai": "^6.0.256",
     "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",
-    "motion": "^12.34.0",
-    "nanoid": "^5.1.11",
+    "lucide-react": "^1.28.0",
+    "media-chrome": "^4.19.2",
+    "motion": "^12.43.0",
+    "nanoid": "^5.1.16",
     "next-themes": "^0.4.6",
-    "radix-ui": "^1.4.3",
-    "react-day-picker": "^9.14.0",
-    "react-hook-form": "^7.71.2",
+    "radix-ui": "^1.6.5",
+    "react-day-picker": "^10.0.1",
+    "react-hook-form": "^7.85.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": "3.9.2",
+    "recharts": "3.10.1",
     "shiki": "^3.23.0",
-    "sonner": "^2.0.7",
+    "sonner": "^2.0.8",
     "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.13.0"
   },
   "devDependencies": {
-    "@hookform/resolvers": "^5.2.2",
+    "@hookform/resolvers": "^5.9.0",
     "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
     "@types/react-syntax-highlighter": "^15.5.13",
     "jsdom": "^26.1.0",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "shadcn": "^3.8.5",
-    "tailwindcss": "4.1.18",
+    "tailwindcss": "4.3.3",
     "tsup": "^8.5.1",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3",
-    "vitest": "^4.1.7"
+    "vitest": "^4.1.10"
   },
   "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"