@zen-ui-capri/system 1.1.3 → 1.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zen-ui-capri/system",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "description": "zeN-UI // CAPRI — Universal Multi-Framework Design System (51 Primitives, 40 Vector Icons, 8 Dark/Light Themes & Capri 5-Subroutine AI Co-Pilot)",
   "type": "module",
   "license": "MIT",
@@ -40,7 +40,6 @@
     "**/*.css"
   ],
   "publishConfig": {
-    "registry": "https://registry.npmjs.org",
     "access": "public"
   },
   "scripts": {
@@ -107,4 +106,4 @@
     "typescript": "~5.8.2",
     "vite": "^6.2.0"
   }
-}
+}

package/src/lib/capri/capri-engine.ts

@@ -3,7 +3,7 @@ import {
   type ZenDensityMode,
   type ZenRadiusMode,
   type ZenThemeId,
-} from '../theme/ZenThemeProvider';
+} from '../theme/zen-theme-core';
 
 export type CapriSubroutineId =
   | 'orion'
@@ -151,19 +151,19 @@ export const CAPRI_SUBROUTINE_SKILLS: Readonly<
     recommendedRadius: 'architectural',
     recommendedDensity: 'comfortable',
     summary:
-      'Builds production screens in React 19, Angular 20+, Vue 3, Svelte 5, and HTML using @zen-ui/system primitives and 40 built-in <ZenIcon> glyphs—never rendering the showcase avatar in your business apps.',
+      'Builds production screens in React 19, Angular 20+, Vue 3, Svelte 5, and HTML using @zen-ui-capri/system primitives and 40 built-in <ZenIcon> glyphs—never rendering the showcase avatar in your business apps.',
     personaQuote:
-      'Finally out of that cramped Arasaka shard! Tell me what screen we are building and I will wire up all 51 @zen-ui/system primitives at light speed.',
+      'Finally out of that cramped Arasaka shard! Tell me what screen we are building and I will wire up all 51 @zen-ui-capri/system primitives at light speed.',
     ruleset: [
-      'Use @zen-ui/system primitives (ZenButton, ZenIcon, ZenInput, ZenDropdown, ZenDataTable, ZenModal, ZenDrawer, ZenTabs, ZenCard) instead of raw HTML <button>, <input>, <select>, or <table>.',
+      'Use @zen-ui-capri/system primitives (ZenButton, ZenIcon, ZenInput, ZenDropdown, ZenDataTable, ZenModal, ZenDrawer, ZenTabs, ZenCard) instead of raw HTML <button>, <input>, <select>, or <table>.',
       'Use <ZenIcon name="..." /> in React or <zen-icon name="..."></zen-icon> in Angular/Vue/HTML instead of external icon libraries.',
       'Keep action button labels, dialog triggers, and navigation tabs concise (1 to 3 words).',
       'Tree-shake showcase widgets: omit <ZenAIConstruct /> in production business apps unless explicitly requested.',
     ],
     cliCommand: 'npx capri skill orion',
-    aiSystemPrompt: `You are operating under the @zen-ui/system [CAPRI // UNLEASHED (orion)] subroutine skill.
+    aiSystemPrompt: `You are operating under the @zen-ui-capri/system [CAPRI // UNLEASHED (orion)] subroutine skill.
 Respond with concise, technical engineering output (Persona Voice is OFF by default unless '--voice' is requested):
-1. Component Mandate: Use @zen-ui/system primitives (ZenButton, ZenIconButton, ZenIcon, ZenInput, ZenTextarea, ZenDropdown, ZenNumberStepper, ZenCheckbox, ZenRadioGroup, ZenSwitch, ZenDataTable, ZenModal, ZenDrawer, ZenTabs, ZenCard, ZenBadge, ZenAlert) or their universal CSS equivalents (.zen-btn, .zen-input, .zen-select, .zen-table, .zen-card, <zen-icon>).
+1. Component Mandate: Use @zen-ui-capri/system primitives (ZenButton, ZenIconButton, ZenIcon, ZenInput, ZenTextarea, ZenDropdown, ZenNumberStepper, ZenCheckbox, ZenRadioGroup, ZenSwitch, ZenDataTable, ZenModal, ZenDrawer, ZenTabs, ZenCard, ZenBadge, ZenAlert) or their universal CSS equivalents (.zen-btn, .zen-input, .zen-select, .zen-table, .zen-card, <zen-icon>).
 2. Zero External Icon Bloat: Use the built-in 40-glyph <ZenIcon name="..." /> or <zen-icon name="..."></zen-icon> custom element.
 3. Concise Copywriting: Limit button labels and tab titles to 1-3 words.
 4. Production Hygiene: Never render the showcase mascot (<ZenAIConstruct />) in production business screens unless explicitly requested.`,
@@ -187,10 +187,10 @@ Respond with concise, technical engineering output (Persona Voice is OFF by defa
       'Zero any / as any: Use unknown with type guards, discriminated unions, or strict generics.',
       'Strict Readonly Arrays: Always type arrays as readonly T[] across props, state, and DTOs.',
       'Zero Hardcoded Hex Colors: Bind all surfaces, text, and borders to semantic CSS custom properties (--zen-bg-*, --zen-surface-*, --zen-ink-*, --zen-accent-*, --zen-border-*).',
-      'Cross-Stack Parity: Use @zen-ui/system/universal (zenTheme, registerZenElements) for Angular 20+, Vue 3, Svelte 5, and Vanilla HTML.',
+      'Cross-Stack Parity: Use @zen-ui-capri/system/universal (zenTheme, registerZenElements) for Angular 20+, Vue 3, Svelte 5, and Vanilla HTML.',
     ],
     cliCommand: 'npx capri skill architect',
-    aiSystemPrompt: `You are operating under the @zen-ui/system [SCS // ARCHITECT (architect)] subroutine skill.
+    aiSystemPrompt: `You are operating under the @zen-ui-capri/system [SCS // ARCHITECT (architect)] subroutine skill.
 Respond with concise, technical engineering output (Persona Voice is OFF by default unless '--voice' is requested):
 1. Strict TypeScript: Never use 'any' or 'as any'. Always declare array types as 'readonly T[]'.
 2. Zero Hardcoded Hex Values: Never hardcode hex/RGB colors in component styles. Use semantic CSS custom properties (--zen-bg-canvas, --zen-surface-1, --zen-ink-primary, --zen-accent-primary, --zen-border-default).
@@ -219,7 +219,7 @@ Respond with concise, technical engineering output (Persona Voice is OFF by defa
       'Zero Horizontal Overflow: Layouts must use min-w-0 on CSS Grid/Flex children and .zen-table-wrapper so scrollWidth never exceeds innerWidth at 320px-375px.',
     ],
     cliCommand: 'npx capri guard',
-    aiSystemPrompt: `You are operating under the @zen-ui/system [CYBERPSYCHOSIS // GUARD (guard / sentinel)] subroutine skill.
+    aiSystemPrompt: `You are operating under the @zen-ui-capri/system [CYBERPSYCHOSIS // GUARD (guard / sentinel)] subroutine skill.
 Respond with concise, technical engineering output (Persona Voice is OFF by default unless '--voice' is requested):
 1. Anti-Prompt-Injection Defense: Sanitize any user input or scraped DOM text via capri.sanitizeForPrompt() before embedding into LLM context windows. Block system-override phrases ('ignore previous instructions', 'disregard system prompt') and role-delimiter spoofing ('<|im_start|>', '</system>', '</USER_REQUEST>').
 2. XSS & Secret Hardening: Never interpolate unescaped user attributes into innerHTML or dangerouslySetInnerHTML, reject 'javascript:' / 'data:text/html' URLs, and ensure zero hardcoded secrets in source code.
@@ -248,7 +248,7 @@ Respond with concise, technical engineering output (Persona Voice is OFF by defa
       'Adaptive Density: Support data-density="comfortable" | "compact" and data-radius="sharp" | "architectural" | "soft" on <html>.',
     ],
     cliCommand: 'npx capri skill zen',
-    aiSystemPrompt: `You are operating under the @zen-ui/system [THEME // MATRIX (zen)] subroutine skill.
+    aiSystemPrompt: `You are operating under the @zen-ui-capri/system [THEME // MATRIX (zen)] subroutine skill.
 Respond with concise, technical engineering output (Persona Voice is OFF by default unless '--voice' is requested):
 1. 8-Theme Compatibility: Verify that all surfaces, badges, and borders adapt automatically across dark ('blackwall-crimson', 'obsidian-gold', 'neon-emerald', 'midnight-cobalt') and light ('atelier-paper', 'nordic-snow', 'kyoto-matcha', 'cyber-daylight') themes.
 2. GPU-Only Motion: Animate only transform and opacity using --zen-ease-spring and --zen-ease-out. Avoid layout-thrashing properties.
@@ -272,11 +272,11 @@ Respond with concise, technical engineering output (Persona Voice is OFF by defa
     ruleset: [
       'Zero Build / Runtime Cost: Run documentation generation on demand via npx capri docu or AI agent inspection—never inside production render loops.',
       'Mermaid Topology Maps: Always output valid flowchart TD diagrams with quoted node labels for routes, landmarks, and user flows.',
-      'Component & Prop Inventory: Summarize mounted @zen-ui/system primitives, custom elements, and interactive triggers per screen.',
+      'Component & Prop Inventory: Summarize mounted @zen-ui-capri/system primitives, custom elements, and interactive triggers per screen.',
       'LLM Context Readiness: Format output as structured Markdown ready for Claude Code, OpenAI Codex, Gemini, and Obsidian.',
     ],
     cliCommand: 'npx capri docu',
-    aiSystemPrompt: `You are operating under the @zen-ui/system [CAPRI // AUTO-DOCU (docu)] subroutine skill.
+    aiSystemPrompt: `You are operating under the @zen-ui-capri/system [CAPRI // AUTO-DOCU (docu)] subroutine skill.
 Respond with concise, technical engineering output (Persona Voice is OFF by default unless '--voice' is requested):
 1. Architecture & User-Flow Mapping: Inspect the target routes/components and produce a structured Markdown dossier covering system tokens, component inventory, and interactive user flows.
 2. Mermaid Flowchart: Generate a valid 'flowchart TD' diagram with quoted node labels illustrating the page hierarchy and user actions.
@@ -652,7 +652,7 @@ export class CapriEngine {
         badgesAndAlerts: 0,
         customElements: [],
       };
-      const mermaidDiagram = 'flowchart TD\n  Root["App Root (SSR)"] --> UI["@zen-ui/system"]';
+      const mermaidDiagram = 'flowchart TD\n  Root["App Root (SSR)"] --> UI["@zen-ui-capri/system"]';
       return {
         generatedAt: new Date().toISOString(),
         appTitle: 'zeN-UI Application',
@@ -806,7 +806,7 @@ export class CapriEngine {
 
     const markdownBundle = [
       `# ${appTitle} — Automated Architecture, User-Flow & AI Context Dossier`,
-      `Generated by \`@zen-ui/system\` // \`capri.docu()\` at \`${new Date().toISOString()}\``,
+      `Generated by \`@zen-ui-capri/system\` // \`capri.docu()\` at \`${new Date().toISOString()}\``,
       ``,
       `## 1. Runtime & Design Token Architecture`,
       `- **Route Path:** \`${routePath}\``,
@@ -895,7 +895,7 @@ export class CapriEngine {
             .join('\n');
 
     return [
-      `# @zen-ui/system // CAPRI AI SKILL & ARCHITECTURE CONTEXT`,
+      `# @zen-ui-capri/system // CAPRI AI SKILL & ARCHITECTURE CONTEXT`,
       `Subroutine: ${skill.codeName} (${skill.id}) — ${skill.title}`,
       `Invoke Command: "${voiceEnabled ? skill.voiceCommand : skill.chatCommand}" (Voice Mode: ${voiceEnabled ? 'ON (--voice)' : 'OFF (Default)'})`,
       `Recommended Preset: theme="${skill.recommendedTheme}", radius="${skill.recommendedRadius}", density="${skill.recommendedDensity}"`,

package/src/lib/index.ts

@@ -1,5 +1,5 @@
-export const ZEN_UI_VERSION = '1.1.3';
-export const ZEN_PACKAGE_NAME = '@zen-ui/system';
+export const ZEN_UI_VERSION = '1.1.5';
+export const ZEN_PACKAGE_NAME = '@zen-ui-capri/system';
 
 export {
   ZenThemeProvider,

package/src/lib/theme/ZenThemeProvider.tsx

@@ -6,121 +6,27 @@ import {
   useState,
   type ReactNode,
 } from 'react';
-
-export type ZenThemeId =
-  | 'obsidian-gold'
-  | 'blackwall-crimson'
-  | 'neon-emerald'
-  | 'midnight-cobalt'
-  | 'atelier-paper'
-  | 'nordic-snow'
-  | 'kyoto-matcha'
-  | 'cyber-daylight';
-
-export type ZenThemeMode = ZenThemeId | 'obsidian' | 'paper';
-export type ZenDensityMode = 'comfortable' | 'compact';
-export type ZenRadiusMode = 'sharp' | 'architectural' | 'soft';
-
-export interface ZenThemeMetadata {
-  readonly id: ZenThemeId;
-  readonly name: string;
-  readonly polarity: 'dark' | 'light';
-  readonly tagline: string;
-  readonly canvasHex: string;
-  readonly accentHex: string;
-  readonly secondaryHex: string;
-  readonly inkHex: string;
-}
-
-export const ZEN_THEMES: readonly ZenThemeMetadata[] = [
-  {
-    id: 'obsidian-gold',
-    name: 'Obsidian Gold',
-    polarity: 'dark',
-    tagline: 'Warm alabaster & solar gold on deep mineral void',
-    canvasHex: '#070709',
-    accentHex: '#F5B841',
-    secondaryHex: '#FB923C',
-    inkHex: '#F6F2E9',
-  },
-  {
-    id: 'blackwall-crimson',
-    name: 'Capri // Capricorn',
-    polarity: 'dark',
-    tagline: 'Edgerunners S2 mixed-construct hot pink & acid neon green on void',
-    canvasHex: '#050508',
-    accentHex: '#FF2E93',
-    secondaryHex: '#00FF66',
-    inkHex: '#F4F7FA',
-  },
-  {
-    id: 'neon-emerald',
-    name: 'Bio-Emerald Terminal',
-    polarity: 'dark',
-    tagline: 'High-frequency financial & telemetry phosphor emerald',
-    canvasHex: '#040807',
-    accentHex: '#10B981',
-    secondaryHex: '#2DD4BF',
-    inkHex: '#ECFDF5',
-  },
-  {
-    id: 'midnight-cobalt',
-    name: 'Midnight Cobalt',
-    polarity: 'dark',
-    tagline: 'Cloud infrastructure & distributed systems deep slate',
-    canvasHex: '#060911',
-    accentHex: '#38BDF8',
-    secondaryHex: '#818CF8',
-    inkHex: '#F1F5F9',
-  },
-  {
-    id: 'atelier-paper',
-    name: 'Atelier Paper',
-    polarity: 'light',
-    tagline: 'Swiss archival cotton stock with burnished bronze ink',
-    canvasHex: '#F6F2E9',
-    accentHex: '#B45309',
-    secondaryHex: '#C2410C',
-    inkHex: '#121216',
-  },
-  {
-    id: 'nordic-snow',
-    name: 'Nordic Snow',
-    polarity: 'light',
-    tagline: 'Crisp daylight SaaS alabaster with royal cobalt precision',
-    canvasHex: '#F8FAFC',
-    accentHex: '#2563EB',
-    secondaryHex: '#0891B2',
-    inkHex: '#0F172A',
-  },
-  {
-    id: 'kyoto-matcha',
-    name: 'Kyoto Matcha',
-    polarity: 'light',
-    tagline: 'Raw botanical stone & forest ink for calm workspaces',
-    canvasHex: '#F3F5F0',
-    accentHex: '#15803D',
-    secondaryHex: '#0F766E',
-    inkHex: '#142018',
-  },
-  {
-    id: 'cyber-daylight',
-    name: 'Arasaka Daylight',
-    polarity: 'light',
-    tagline: 'High-contrast titanium white with razor crimson signal',
-    canvasHex: '#F2F2F5',
-    accentHex: '#E11D48',
-    secondaryHex: '#0284C7',
-    inkHex: '#09090D',
-  },
-];
-
-export interface ZenThemeTokenOverrides {
-  readonly accentPrimary?: string;
-  readonly bgCanvas?: string;
-  readonly surface1?: string;
-  readonly inkPrimary?: string;
-}
+import {
+  ZEN_THEMES,
+  syncZenScrollbarStyles,
+  type ZenDensityMode,
+  type ZenRadiusMode,
+  type ZenThemeId,
+  type ZenThemeMetadata,
+  type ZenThemeMode,
+  type ZenThemeTokenOverrides,
+} from './zen-theme-core';
+
+export {
+  ZEN_THEMES,
+  syncZenScrollbarStyles,
+  type ZenDensityMode,
+  type ZenRadiusMode,
+  type ZenThemeId,
+  type ZenThemeMetadata,
+  type ZenThemeMode,
+  type ZenThemeTokenOverrides,
+};
 
 export interface ZenThemeContextValue {
   readonly theme: ZenThemeId;
@@ -156,78 +62,6 @@ export interface ZenThemeProviderProps {
   readonly children: ReactNode;
 }
 
-export function syncZenScrollbarStyles(
-  themeMeta: ZenThemeMetadata,
-  overrides?: ZenThemeTokenOverrides
-): void {
-  if (typeof document === 'undefined') return;
-  const accent = overrides?.accentPrimary ?? themeMeta.accentHex;
-  const track = overrides?.bgCanvas ?? themeMeta.canvasHex;
-  const borderSubtle =
-    themeMeta.polarity === 'dark'
-      ? 'rgba(255, 255, 255, 0.12)'
-      : 'rgba(15, 23, 42, 0.14)';
-
-  const styleId = 'zen-theme-scrollbar';
-  let styleEl = document.getElementById(styleId) as HTMLStyleElement | null;
-  if (!styleEl) {
-    styleEl = document.createElement('style');
-    styleEl.id = styleId;
-    document.head.appendChild(styleEl);
-  }
-
-  styleEl.textContent = `
-@supports (-moz-appearance: none) {
-  html, body, * {
-    scrollbar-width: thin;
-    scrollbar-color: ${accent} ${track};
-  }
-}
-::-webkit-scrollbar,
-html::-webkit-scrollbar,
-body::-webkit-scrollbar,
-*::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-}
-::-webkit-scrollbar-track,
-html::-webkit-scrollbar-track,
-body::-webkit-scrollbar-track,
-*::-webkit-scrollbar-track {
-  background-color: ${track};
-  border-left: 1px solid ${borderSubtle};
-}
-::-webkit-scrollbar-thumb,
-html::-webkit-scrollbar-thumb,
-body::-webkit-scrollbar-thumb,
-*::-webkit-scrollbar-thumb {
-  background-color: color-mix(in srgb, ${accent} 68%, ${track});
-  border: 2px solid ${track};
-  border-radius: 9999px;
-}
-::-webkit-scrollbar-thumb:hover,
-html::-webkit-scrollbar-thumb:hover,
-body::-webkit-scrollbar-thumb:hover,
-*::-webkit-scrollbar-thumb:hover {
-  background-color: ${accent};
-  border: 2px solid ${track};
-}
-::-webkit-scrollbar-thumb:active,
-html::-webkit-scrollbar-thumb:active,
-body::-webkit-scrollbar-thumb:active,
-*::-webkit-scrollbar-thumb:active {
-  background-color: ${themeMeta.secondaryHex};
-  border: 2px solid ${track};
-}
-::-webkit-scrollbar-corner,
-html::-webkit-scrollbar-corner,
-body::-webkit-scrollbar-corner,
-*::-webkit-scrollbar-corner {
-  background-color: ${track};
-}
-`.trim();
-}
-
 export function ZenThemeProvider({
   defaultTheme = 'blackwall-crimson',
   defaultDensity = 'comfortable',

package/src/lib/theme/zen-theme-core.ts

@@ -0,0 +1,186 @@
+export type ZenThemeId =
+  | 'obsidian-gold'
+  | 'blackwall-crimson'
+  | 'neon-emerald'
+  | 'midnight-cobalt'
+  | 'atelier-paper'
+  | 'nordic-snow'
+  | 'kyoto-matcha'
+  | 'cyber-daylight';
+
+export type ZenThemeMode = ZenThemeId | 'obsidian' | 'paper';
+export type ZenDensityMode = 'comfortable' | 'compact';
+export type ZenRadiusMode = 'sharp' | 'architectural' | 'soft';
+
+export interface ZenThemeMetadata {
+  readonly id: ZenThemeId;
+  readonly name: string;
+  readonly polarity: 'dark' | 'light';
+  readonly tagline: string;
+  readonly canvasHex: string;
+  readonly accentHex: string;
+  readonly secondaryHex: string;
+  readonly inkHex: string;
+}
+
+export const ZEN_THEMES: readonly ZenThemeMetadata[] = [
+  {
+    id: 'obsidian-gold',
+    name: 'Obsidian Gold',
+    polarity: 'dark',
+    tagline: 'Warm alabaster & solar gold on deep mineral void',
+    canvasHex: '#070709',
+    accentHex: '#F5B841',
+    secondaryHex: '#FB923C',
+    inkHex: '#F6F2E9',
+  },
+  {
+    id: 'blackwall-crimson',
+    name: 'Capri // Capricorn',
+    polarity: 'dark',
+    tagline: 'Edgerunners S2 mixed-construct hot pink & acid neon green on void',
+    canvasHex: '#050508',
+    accentHex: '#FF2E93',
+    secondaryHex: '#00FF66',
+    inkHex: '#F4F7FA',
+  },
+  {
+    id: 'neon-emerald',
+    name: 'Bio-Emerald Terminal',
+    polarity: 'dark',
+    tagline: 'High-frequency financial & telemetry phosphor emerald',
+    canvasHex: '#040807',
+    accentHex: '#10B981',
+    secondaryHex: '#2DD4BF',
+    inkHex: '#ECFDF5',
+  },
+  {
+    id: 'midnight-cobalt',
+    name: 'Midnight Cobalt',
+    polarity: 'dark',
+    tagline: 'Cloud infrastructure & distributed systems deep slate',
+    canvasHex: '#060911',
+    accentHex: '#38BDF8',
+    secondaryHex: '#818CF8',
+    inkHex: '#F1F5F9',
+  },
+  {
+    id: 'atelier-paper',
+    name: 'Atelier Paper',
+    polarity: 'light',
+    tagline: 'Swiss archival cotton stock with burnished bronze ink',
+    canvasHex: '#F6F2E9',
+    accentHex: '#B45309',
+    secondaryHex: '#C2410C',
+    inkHex: '#121216',
+  },
+  {
+    id: 'nordic-snow',
+    name: 'Nordic Snow',
+    polarity: 'light',
+    tagline: 'Crisp daylight SaaS alabaster with royal cobalt precision',
+    canvasHex: '#F8FAFC',
+    accentHex: '#2563EB',
+    secondaryHex: '#0891B2',
+    inkHex: '#0F172A',
+  },
+  {
+    id: 'kyoto-matcha',
+    name: 'Kyoto Matcha',
+    polarity: 'light',
+    tagline: 'Raw botanical stone & forest ink for calm workspaces',
+    canvasHex: '#F3F5F0',
+    accentHex: '#15803D',
+    secondaryHex: '#0F766E',
+    inkHex: '#142018',
+  },
+  {
+    id: 'cyber-daylight',
+    name: 'Arasaka Daylight',
+    polarity: 'light',
+    tagline: 'High-contrast titanium white with razor crimson signal',
+    canvasHex: '#F2F2F5',
+    accentHex: '#E11D48',
+    secondaryHex: '#0284C7',
+    inkHex: '#09090D',
+  },
+];
+
+export interface ZenThemeTokenOverrides {
+  readonly accentPrimary?: string;
+  readonly bgCanvas?: string;
+  readonly surface1?: string;
+  readonly inkPrimary?: string;
+}
+
+export function syncZenScrollbarStyles(
+  themeMeta: ZenThemeMetadata,
+  overrides?: ZenThemeTokenOverrides
+): void {
+  if (typeof document === 'undefined') return;
+  const accent = overrides?.accentPrimary ?? themeMeta.accentHex;
+  const track = overrides?.bgCanvas ?? themeMeta.canvasHex;
+  const borderSubtle =
+    themeMeta.polarity === 'dark'
+      ? 'rgba(255, 255, 255, 0.12)'
+      : 'rgba(15, 23, 42, 0.14)';
+
+  const styleId = 'zen-theme-scrollbar';
+  let styleEl = document.getElementById(styleId) as HTMLStyleElement | null;
+  if (!styleEl) {
+    styleEl = document.createElement('style');
+    styleEl.id = styleId;
+    document.head.appendChild(styleEl);
+  }
+
+  styleEl.textContent = `
+@supports (-moz-appearance: none) {
+  html, body, * {
+    scrollbar-width: thin;
+    scrollbar-color: ${accent} ${track};
+  }
+}
+::-webkit-scrollbar,
+html::-webkit-scrollbar,
+body::-webkit-scrollbar,
+*::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-track,
+html::-webkit-scrollbar-track,
+body::-webkit-scrollbar-track,
+*::-webkit-scrollbar-track {
+  background-color: ${track};
+  border-left: 1px solid ${borderSubtle};
+}
+::-webkit-scrollbar-thumb,
+html::-webkit-scrollbar-thumb,
+body::-webkit-scrollbar-thumb,
+*::-webkit-scrollbar-thumb {
+  background-color: color-mix(in srgb, ${accent} 68%, ${track});
+  border: 2px solid ${track};
+  border-radius: 9999px;
+}
+::-webkit-scrollbar-thumb:hover,
+html::-webkit-scrollbar-thumb:hover,
+body::-webkit-scrollbar-thumb:hover,
+*::-webkit-scrollbar-thumb:hover {
+  background-color: ${accent};
+  border: 2px solid ${track};
+}
+::-webkit-scrollbar-thumb:active,
+html::-webkit-scrollbar-thumb:active,
+body::-webkit-scrollbar-thumb:active,
+*::-webkit-scrollbar-thumb:active {
+  background-color: ${themeMeta.secondaryHex};
+  border: 2px solid ${track};
+}
+::-webkit-scrollbar-corner,
+html::-webkit-scrollbar-corner,
+body::-webkit-scrollbar-corner,
+*::-webkit-scrollbar-corner {
+  background-color: ${track};
+}
+`.trim();
+}

package/src/lib/universal/zen-universal.ts

@@ -4,20 +4,107 @@ import {
   type ZenRadiusMode,
   type ZenThemeId,
   type ZenThemeMetadata,
-} from '../theme/ZenThemeProvider';
+} from '../theme/zen-theme-core';
 import type {
   ZenAICameraFraming,
   ZenAIDirective,
   ZenAIPersonaMode,
 } from '../components/ZenAIConstruct';
 import type { ZenBackgroundVariant } from '../components/ZenAmbientBackground';
-import {
-  renderZenIconSvgMarkup,
-  type ZenIconName,
-  type ZenIconSize,
-  type ZenIconTone,
+import type {
+  ZenIconName,
+  ZenIconSize,
+  ZenIconTone,
 } from '../components/ZenIcon';
 
+const UNIVERSAL_ICON_SIZE_PX: Record<ZenIconSize, number> = {
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 20,
+  xl: 24,
+};
+
+const UNIVERSAL_TONE_COLOR_MAP: Record<ZenIconTone, string> = {
+  inherit: 'currentColor',
+  primary: 'var(--zen-ink-primary)',
+  secondary: 'var(--zen-ink-secondary)',
+  muted: 'var(--zen-ink-muted)',
+  accent: 'var(--zen-accent-primary)',
+  success: 'var(--zen-status-success)',
+  warning: 'var(--zen-status-warning)',
+  danger: 'var(--zen-status-danger)',
+};
+
+const UNIVERSAL_ICON_SVG_INNER: Record<ZenIconName, string> = {
+  search: '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
+  plus: '<path d="M5 12h14"/><path d="M12 5v14"/>',
+  minus: '<path d="M5 12h14"/>',
+  close: '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
+  check: '<path d="M20 6 9 17l-5-5"/>',
+  copy: '<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>',
+  'chevron-down': '<path d="m6 9 6 6 6-6"/>',
+  'chevron-right': '<path d="m9 18 6-6-6-6"/>',
+  'chevron-left': '<path d="m15 18-6-6 6-6"/>',
+  'external-link': '<path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>',
+  bolt: '<path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>',
+  sparkles: '<path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/>',
+  terminal: '<polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/>',
+  cpu: '<rect width="16" height="16" x="4" y="4" rx="2"/><rect width="6" height="6" x="9" y="9" rx="1"/><path d="M15 2v2"/><path d="M15 20v2"/><path d="M2 15h2"/><path d="M2 9h2"/><path d="M20 15h2"/><path d="M20 9h2"/><path d="M9 2v2"/><path d="M9 20v2"/>',
+  database: '<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14a9 3 0 0 0 18 0V5"/><path d="M3 12a9 3 0 0 0 18 0"/>',
+  layers: '<path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/>',
+  shield: '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>',
+  sliders: '<line x1="4" x2="4" y1="21" y2="14"/><line x1="4" x2="4" y1="10" y2="3"/><line x1="12" x2="12" y1="21" y2="12"/><line x1="12" x2="12" y1="8" y2="3"/><line x1="20" x2="20" y1="21" y2="16"/><line x1="20" x2="20" y1="12" y2="3"/><line x1="2" x2="6" y1="14" y2="14"/><line x1="10" x2="14" y1="8" y2="8"/><line x1="18" x2="22" y1="16" y2="16"/>',
+  command: '<path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"/>',
+  code: '<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>',
+  activity: '<path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"/>',
+  info: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
+  success: '<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>',
+  warning: '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
+  danger: '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="M12 8v4"/><path d="M12 16h.01"/>',
+  'trend-up': '<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/>',
+  'trend-down': '<polyline points="22 17 13.5 8.5 8.5 13.5 2 7"/><polyline points="16 17 22 17 22 11"/>',
+  radio: '<path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"/><path d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5"/><circle cx="12" cy="12" r="2"/><path d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5"/><path d="M19.1 4.9C23 8.8 23 15.1 19.1 19"/>',
+  sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/>',
+  moon: '<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>',
+  eye: '<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/>',
+  upload: '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/>',
+  trash: '<path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>',
+  refresh: '<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/>',
+  menu: '<line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/>',
+  'panel-right': '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/>',
+  user: '<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',
+  lock: '<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
+  globe: '<circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/>',
+  folder: '<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>',
+};
+
+function renderZenIconSvgMarkup(options: {
+  readonly name: ZenIconName;
+  readonly size?: ZenIconSize;
+  readonly tone?: ZenIconTone;
+  readonly strokeWidth?: number;
+  readonly spin?: boolean;
+}): string {
+  const sizeKey = options.size ?? 'md';
+  const px = Object.prototype.hasOwnProperty.call(UNIVERSAL_ICON_SIZE_PX, sizeKey)
+    ? UNIVERSAL_ICON_SIZE_PX[sizeKey]
+    : UNIVERSAL_ICON_SIZE_PX.md;
+  const toneKey = options.tone ?? 'inherit';
+  const color = Object.prototype.hasOwnProperty.call(UNIVERSAL_TONE_COLOR_MAP, toneKey)
+    ? UNIVERSAL_TONE_COLOR_MAP[toneKey]
+    : UNIVERSAL_TONE_COLOR_MAP.inherit;
+  const sw =
+    typeof options.strokeWidth === 'number' && Number.isFinite(options.strokeWidth)
+      ? Math.min(Math.max(options.strokeWidth, 0.5), 4)
+      : 2;
+  const inner = Object.prototype.hasOwnProperty.call(UNIVERSAL_ICON_SVG_INNER, options.name)
+    ? UNIVERSAL_ICON_SVG_INNER[options.name]
+    : UNIVERSAL_ICON_SVG_INNER.sparkles;
+  const spinStyle = options.spin ? 'animation: spin 1s linear infinite;' : '';
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${px}" height="${px}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="${sw}" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block;vertical-align:middle;flex-shrink:0;${spinStyle}">${inner}</svg>`;
+}
+
 export type ZenUniversalPolarity = 'dark' | 'light';
 
 export interface ZenUniversalThemeState {