@zen-ui-capri/system 1.1.0 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zen-ui-capri/system",
-  "version": "1.1.0",
+  "version": "1.1.4",
   "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",
@@ -54,27 +54,57 @@
     "prepublishOnly": "npm run capri -- all && npm run build",
     "publish:npm": "node bin/capri.mjs publish-npm"
   },
-  "dependencies": {
+  "peerDependencies": {
+    "@react-three/fiber": ">=8.0.0",
+    "@react-three/postprocessing": ">=2.0.0",
+    "lucide-react": ">=0.300.0",
+    "postprocessing": ">=6.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "three": ">=0.150.0"
+  },
+  "peerDependenciesMeta": {
+    "@react-three/fiber": {
+      "optional": true
+    },
+    "@react-three/postprocessing": {
+      "optional": true
+    },
+    "lucide-react": {
+      "optional": true
+    },
+    "postprocessing": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "three": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
     "@gsap/react": "^2.1.2",
+    "@playwright/test": "^1.51.0",
     "@react-three/fiber": "^9.5.0",
     "@react-three/postprocessing": "^3.2.2",
     "@tailwindcss/vite": "^4.1.0",
+    "@types/node": "^22.10.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@types/three": "^0.182.0",
+    "@vitejs/plugin-react": "^4.3.4",
     "gsap": "^3.13.0",
     "lucide-react": "^0.562.0",
     "postprocessing": "^6.39.6",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "tailwindcss": "^4.1.0",
-    "three": "^0.182.0"
-  },
-  "devDependencies": {
-    "@playwright/test": "^1.51.0",
-    "@types/node": "^22.10.0",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
-    "@types/three": "^0.182.0",
-    "@vitejs/plugin-react": "^4.3.4",
+    "three": "^0.182.0",
     "typescript": "~5.8.2",
     "vite": "^6.2.0"
   }
-}
+}

package/src/lib/audio/ZenAudioController.tsx

@@ -1,114 +1,114 @@
-import { Volume2, VolumeX, Disc3 } from 'lucide-react';
-import type { ZenAudioSynthController, ZenSynthPresetId } from './useZenAudioSynth';
-import { ZenButton } from '../components/ZenButton';
-import { ZenSegmentedControl } from '../components/ZenSegmentedControl';
-
-export interface ZenAudioControllerProps {
-  readonly synth: ZenAudioSynthController;
-  readonly mode?: 'pill' | 'deck';
-  readonly activeLabel?: string;
-  readonly idleLabel?: string;
-  readonly className?: string;
-}
-
-export function ZenAudioController({
-  synth,
-  mode = 'pill',
-  activeLabel = 'Lo-Fi Radio: ON',
-  idleLabel = 'Lo-Fi Background',
-  className = '',
-}: ZenAudioControllerProps) {
-  if (mode === 'pill') {
-    return (
-      <ZenButton
-        variant="secondary"
-        size="sm"
-        mono
-        pressed={synth.active}
-        onClick={synth.toggle}
-        aria-label="Toggle procedural ambient synthesizer"
-        className={className}
-        iconLeft={
-          synth.active ? (
-            <Volume2 className="w-3.5 h-3.5 animate-pulse" />
-          ) : (
-            <VolumeX className="w-3.5 h-3.5 text-[var(--zen-accent-primary)]" />
-          )
-        }
-      >
-        {synth.active ? activeLabel : idleLabel}
-      </ZenButton>
-    );
-  }
-
-  return (
-    <div
-      data-zen-occlude="true"
-      className={`p-5 rounded-3xl zen-surface-static flex flex-col gap-4 ${className}`.trim()}
-    >
-      <div className="flex flex-wrap items-center justify-between gap-3">
-        <div className="flex items-center gap-3">
-          <Disc3
-            className={`w-6 h-6 text-[var(--zen-accent-primary)] ${
-              synth.active ? 'animate-spin' : ''
-            }`}
-          />
-          <div>
-            <div className="zen-telemetry-label text-[var(--zen-accent-primary)]">
-              WEB AUDIO PROCEDURAL SYNTHESIZER
-            </div>
-            <div className="zen-font-display font-bold text-base text-[var(--zen-ink-primary)]">
-              Zero-Dependency Acoustic Engine
-            </div>
-          </div>
-        </div>
-
-        <ZenButton
-          variant={synth.active ? 'primary' : 'secondary'}
-          size="sm"
-          mono
-          pressed={synth.active}
-          onClick={synth.toggle}
-          iconLeft={
-            synth.active ? (
-              <Volume2 className="w-3.5 h-3.5" />
-            ) : (
-              <VolumeX className="w-3.5 h-3.5" />
-            )
-          }
-        >
-          {synth.active ? 'SYNTH ACTIVE' : 'START SYNTH'}
-        </ZenButton>
-      </div>
-
-      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pt-2 border-t border-[var(--zen-border-subtle)]">
-        <ZenSegmentedControl<ZenSynthPresetId>
-          ariaLabel="Select synthesizer voicing preset"
-          size="sm"
-          value={synth.presetId}
-          onChange={synth.setPresetId}
-          items={synth.presets.map((p) => ({
-            value: p.id,
-            label: p.label.split(' (')[0],
-          }))}
-        />
-
-        <div className="flex items-center gap-1.5" aria-label="8-step bar sequencer">
-          {Array.from({ length: 8 }).map((_, idx) => {
-            const isBeat = synth.active && synth.currentStep === idx;
-            return (
-              <span
-                key={idx}
-                className={`h-2.5 w-2.5 rounded-full transition-all ${
-                  isBeat
-                    ? 'bg-[var(--zen-accent-primary)] scale-125'
-                    : 'bg-[var(--zen-border-default)]'
-                }`}
-              />
-            );
-          })}
-        </div>
-      </div>
-    </div>
-  );
-}
+import { Volume2, VolumeX, Disc3 } from 'lucide-react';
+import type { ZenAudioSynthController, ZenSynthPresetId } from './useZenAudioSynth';
+import { ZenButton } from '../components/ZenButton';
+import { ZenSegmentedControl } from '../components/ZenSegmentedControl';
+
+export interface ZenAudioControllerProps {
+  readonly synth: ZenAudioSynthController;
+  readonly mode?: 'pill' | 'deck';
+  readonly activeLabel?: string;
+  readonly idleLabel?: string;
+  readonly className?: string;
+}
+
+export function ZenAudioController({
+  synth,
+  mode = 'pill',
+  activeLabel = 'Lo-Fi Radio: ON',
+  idleLabel = 'Lo-Fi Background',
+  className = '',
+}: ZenAudioControllerProps) {
+  if (mode === 'pill') {
+    return (
+      <ZenButton
+        variant="secondary"
+        size="sm"
+        mono
+        pressed={synth.active}
+        onClick={synth.toggle}
+        aria-label="Toggle procedural ambient synthesizer"
+        className={className}
+        iconLeft={
+          synth.active ? (
+            <Volume2 className="w-3.5 h-3.5 animate-pulse" />
+          ) : (
+            <VolumeX className="w-3.5 h-3.5 text-[var(--zen-accent-primary)]" />
+          )
+        }
+      >
+        {synth.active ? activeLabel : idleLabel}
+      </ZenButton>
+    );
+  }
+
+  return (
+    <div
+      data-zen-occlude="true"
+      className={`p-5 rounded-3xl zen-surface-static flex flex-col gap-4 ${className}`.trim()}
+    >
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div className="flex items-center gap-3">
+          <Disc3
+            className={`w-6 h-6 text-[var(--zen-accent-primary)] ${
+              synth.active ? 'animate-spin' : ''
+            }`}
+          />
+          <div>
+            <div className="zen-telemetry-label text-[var(--zen-accent-primary)]">
+              WEB AUDIO PROCEDURAL SYNTHESIZER
+            </div>
+            <div className="zen-font-display font-bold text-base text-[var(--zen-ink-primary)]">
+              Zero-Dependency Acoustic Engine
+            </div>
+          </div>
+        </div>
+
+        <ZenButton
+          variant={synth.active ? 'primary' : 'secondary'}
+          size="sm"
+          mono
+          pressed={synth.active}
+          onClick={synth.toggle}
+          iconLeft={
+            synth.active ? (
+              <Volume2 className="w-3.5 h-3.5" />
+            ) : (
+              <VolumeX className="w-3.5 h-3.5" />
+            )
+          }
+        >
+          {synth.active ? 'SYNTH ACTIVE' : 'START SYNTH'}
+        </ZenButton>
+      </div>
+
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pt-2 border-t border-[var(--zen-border-subtle)]">
+        <ZenSegmentedControl<ZenSynthPresetId>
+          ariaLabel="Select synthesizer voicing preset"
+          size="sm"
+          value={synth.presetId}
+          onChange={synth.setPresetId}
+          items={synth.presets.map((p) => ({
+            value: p.id,
+            label: p.label.split(' (')[0],
+          }))}
+        />
+
+        <div className="flex items-center gap-1.5" aria-label="8-step bar sequencer">
+          {Array.from({ length: 8 }).map((_, idx) => {
+            const isBeat = synth.active && synth.currentStep === idx;
+            return (
+              <span
+                key={idx}
+                className={`h-2.5 w-2.5 rounded-full transition-all ${
+                  isBeat
+                    ? 'bg-[var(--zen-accent-primary)] scale-125'
+                    : 'bg-[var(--zen-border-default)]'
+                }`}
+              />
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

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'

package/src/lib/components/ZenIcon.tsx

@@ -167,10 +167,21 @@ export function renderZenIconSvgMarkup(options: {
   readonly strokeWidth?: number;
   readonly spin?: boolean;
 }): string {
-  const px = ZEN_ICON_SIZE_PX[options.size ?? 'md'];
-  const color = TONE_COLOR_MAP[options.tone ?? 'inherit'];
-  const sw = options.strokeWidth ?? 2;
-  const inner = ZEN_ICON_SVG_INNER[options.name] ?? ZEN_ICON_SVG_INNER.sparkles;
+  const sizeKey = options.size ?? 'md';
+  const px = Object.prototype.hasOwnProperty.call(ZEN_ICON_SIZE_PX, sizeKey)
+    ? ZEN_ICON_SIZE_PX[sizeKey]
+    : ZEN_ICON_SIZE_PX.md;
+  const toneKey = options.tone ?? 'inherit';
+  const color = Object.prototype.hasOwnProperty.call(TONE_COLOR_MAP, toneKey)
+    ? TONE_COLOR_MAP[toneKey]
+    : 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(ZEN_ICON_SVG_INNER, options.name)
+    ? ZEN_ICON_SVG_INNER[options.name]
+    : ZEN_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>`;
 }
@@ -194,9 +205,15 @@ export function ZenIcon({
   className = '',
   ...rest
 }: ZenIconProps) {
-  const px = ZEN_ICON_SIZE_PX[size];
-  const strokeColor = TONE_COLOR_MAP[tone];
-  const innerMarkup = ZEN_ICON_SVG_INNER[name] ?? ZEN_ICON_SVG_INNER.sparkles;
+  const px = Object.prototype.hasOwnProperty.call(ZEN_ICON_SIZE_PX, size)
+    ? ZEN_ICON_SIZE_PX[size]
+    : ZEN_ICON_SIZE_PX.md;
+  const strokeColor = Object.prototype.hasOwnProperty.call(TONE_COLOR_MAP, tone)
+    ? TONE_COLOR_MAP[tone]
+    : TONE_COLOR_MAP.inherit;
+  const innerMarkup = Object.prototype.hasOwnProperty.call(ZEN_ICON_SVG_INNER, name)
+    ? ZEN_ICON_SVG_INNER[name]
+    : ZEN_ICON_SVG_INNER.sparkles;
 
   return (
     <svg

package/src/lib/index.ts

@@ -1,4 +1,4 @@
-export const ZEN_UI_VERSION = '1.1.0';
+export const ZEN_UI_VERSION = '1.1.4';
 export const ZEN_PACKAGE_NAME = '@zen-ui/system';
 
 export {

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;
@@ -136,7 +42,16 @@ export interface ZenThemeContextValue {
   readonly setRadius: (next: ZenRadiusMode) => void;
 }
 
-const ZenThemeContext = createContext<ZenThemeContextValue | null>(null);
+let zenThemeContextInstance: ReturnType<
+  typeof createContext<ZenThemeContextValue | null>
+> | null = null;
+
+function getZenThemeContext() {
+  if (!zenThemeContextInstance) {
+    zenThemeContextInstance = createContext<ZenThemeContextValue | null>(null);
+  }
+  return zenThemeContextInstance;
+}
 
 export interface ZenThemeProviderProps {
   readonly defaultTheme?: ZenThemeId;
@@ -147,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',
@@ -312,15 +155,17 @@ export function ZenThemeProvider({
     [theme, themeMeta, density, radius, reducedMotion]
   );
 
+  const ThemeCtx = getZenThemeContext();
+
   return (
-    <ZenThemeContext.Provider value={value}>
+    <ThemeCtx.Provider value={value}>
       {children}
-    </ZenThemeContext.Provider>
+    </ThemeCtx.Provider>
   );
 }
 
 export function useZenTheme(): ZenThemeContextValue {
-  const ctx = useContext(ZenThemeContext);
+  const ctx = useContext(getZenThemeContext());
   if (!ctx) {
     throw new Error('useZenTheme must be used within a ZenThemeProvider');
   }