decantr 0.9.0

package/src/css/styles/addons/clay.js

@@ -0,0 +1,70 @@
+/**
+ * Clay — Soft, pillowy, pastel aesthetic.
+ * Everything looks molded from clay. Rounded forms, inner highlights,
+ * squishy interactions. Gentle and tactile.
+ */
+export const clay = {
+  id: 'clay',
+  name: 'Clay',
+  seed: {
+    primary: '#a78bfa',
+    accent: '#67e8f9',
+    tertiary: '#fda4af',
+    neutral: '#9ca3af',
+    success: '#86efac',
+    warning: '#fcd34d',
+    error: '#fca5a5',
+    info: '#93c5fd',
+    bg: '#faf5ff',
+    bgDark: '#1e1b2e',
+  },
+  personality: {
+    radius: 'rounded',
+    elevation: 'clay',
+    motion: 'smooth',
+    borders: 'none',
+    density: 'spacious',
+    gradient: 'none',
+  },
+  typography: {
+    '--d-fw-heading': '600',
+    '--d-fw-title': '500',
+    '--d-ls-heading': '0.01em',
+  },
+  overrides: {
+    light: {
+      '--d-border': 'rgba(0,0,0,0.06)',
+      '--d-border-strong': 'rgba(0,0,0,0.12)',
+      '--d-field-bg': 'rgba(255,255,255,0.7)',
+      '--d-field-border': 'rgba(0,0,0,0.08)',
+      '--d-field-border-hover': 'rgba(0,0,0,0.15)',
+      '--d-item-hover-bg': 'rgba(0,0,0,0.03)',
+    },
+    dark: {
+      '--d-border': 'rgba(255,255,255,0.06)',
+      '--d-border-strong': 'rgba(255,255,255,0.12)',
+      '--d-field-bg': 'rgba(255,255,255,0.06)',
+      '--d-field-border': 'rgba(255,255,255,0.08)',
+      '--d-field-border-hover': 'rgba(255,255,255,0.15)',
+      '--d-item-hover-bg': 'rgba(255,255,255,0.05)',
+    },
+  },
+  components: [
+    'body{font-family:var(--d-font);background:var(--d-bg);color:var(--d-fg);line-height:var(--d-lh-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}',
+    '::selection{background:var(--d-primary-subtle);color:var(--d-primary-subtle-fg)}',
+    // Scrollbar — rounded pill thumb
+    '::-webkit-scrollbar{width:8px;height:8px}',
+    '::-webkit-scrollbar-track{background:transparent}',
+    '::-webkit-scrollbar-thumb{background:var(--d-border-strong);border-radius:var(--d-radius-full)}',
+    '::-webkit-scrollbar-thumb:hover{background:var(--d-muted-fg)}',
+    // Card — soft inner highlight
+    '.d-card{border:none;box-shadow:var(--d-elevation-1),inset 0 2px 4px rgba(255,255,255,0.5)}',
+    '[data-mode="dark"] .d-card,.d-card[data-mode="dark"]{box-shadow:var(--d-elevation-1),inset 0 2px 4px rgba(255,255,255,0.1)}',
+    '.d-card-inner{box-shadow:inset 0 1px 2px rgba(255,255,255,0.3)}',
+    // Modal — pillow shadow
+    '.d-modal-content{border:none;box-shadow:var(--d-elevation-3),inset 0 2px 4px rgba(255,255,255,0.5)}',
+    // Button — soft squish
+    '.d-btn-primary{box-shadow:var(--d-elevation-1),inset 0 1px 2px rgba(255,255,255,0.3)}',
+    '.d-btn-primary:hover{box-shadow:var(--d-elevation-2),inset 0 1px 2px rgba(255,255,255,0.4)}',
+  ].join(''),
+};

package/src/css/styles/addons/clean.js

@@ -0,0 +1,57 @@
+/**
+ * Clean Style — Professional, understated, universally appropriate.
+ * Subtle shadows, smooth motion, rounded corners. The safe default.
+ *
+ * Personality: rounded + subtle elevation + smooth motion + thin borders + no gradients
+ * Works in both light and dark mode from the same definition.
+ */
+export const clean = {
+  id: 'clean',
+  name: 'Clean',
+  seed: {
+    primary: '#1366D9',
+    accent: '#7c3aed',
+    tertiary: '#0891b2',
+    neutral: '#71717a',
+    success: '#22c55e',
+    warning: '#f59e0b',
+    error: '#ef4444',
+    info: '#3b82f6',
+    bg: '#ffffff',
+    bgDark: '#0a0a0a',
+  },
+  personality: {
+    radius: 'rounded',
+    elevation: 'subtle',
+    motion: 'smooth',
+    borders: 'thin',
+    density: 'comfortable',
+    gradient: 'none',
+  },
+  typography: {
+    '--d-fw-heading': '700',
+    '--d-fw-title': '600',
+    '--d-ls-heading': '-0.025em',
+  },
+  overrides: {
+    light: {
+      '--d-border': 'rgba(0,0,0,0.15)',
+      '--d-border-strong': 'rgba(0,0,0,0.28)',
+    },
+    dark: {
+      '--d-border': 'rgba(255,255,255,0.12)',
+      '--d-border-strong': 'rgba(255,255,255,0.22)',
+    },
+  },
+  /** Component CSS (injected into d.theme layer). Minimal — most styling comes from tokens. */
+  components: [
+    // Global body + selection
+    'body{font-family:var(--d-font);background:var(--d-bg);color:var(--d-fg);line-height:var(--d-lh-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}',
+    '::selection{background:var(--d-selection-bg);color:var(--d-selection-fg)}',
+    // Smooth scrollbar
+    '::-webkit-scrollbar{width:8px;height:8px}',
+    '::-webkit-scrollbar-track{background:var(--d-surface-0)}',
+    '::-webkit-scrollbar-thumb{background:var(--d-border);border-radius:var(--d-radius-full)}',
+    '::-webkit-scrollbar-thumb:hover{background:var(--d-border-strong)}',
+  ].join(''),
+};

package/src/css/styles/addons/command-center.js

@@ -0,0 +1,143 @@
+/**
+ * Command Center — HUD/radar monochromatic visual language.
+ * Dark operational panels with beveled frames, scanlines, status bars,
+ * monospace typography, and a monochromatic cyan palette derived from
+ * a single primary hue via the `palette: 'monochrome'` personality trait.
+ *
+ * Decorative classes (cc-* prefix) are injected via the components field,
+ * following the same pattern as glassmorphism's .d-glass utilities.
+ * These classes are used by the Command Center recipe to compose
+ * standard Decantr components into the HUD visual language.
+ */
+export const commandCenter = {
+  id: 'command-center',
+  name: 'Command Center',
+  seed: {
+    primary: '#00e5ff',
+    neutral: '#1a2a3a',
+    bg: '#c8d6e0',
+    bgDark: '#050a10',
+  },
+  personality: {
+    radius: 'sharp',
+    elevation: 'flat',
+    motion: 'snappy',
+    borders: 'bold',
+    density: 'compact',
+    gradient: 'none',
+    palette: 'monochrome',
+  },
+  typography: {
+    '--d-font': 'ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace',
+    '--d-fw-heading': '700',
+    '--d-fw-title': '600',
+    '--d-fw-medium': '500',
+    '--d-ls-heading': '0.08em',
+  },
+  overrides: {
+    dark: {
+      '--d-fg': '#00e5ff',
+      '--d-muted-fg': '#00809a',
+      '--d-border': 'rgba(0,229,255,0.12)',
+      '--d-border-strong': 'rgba(0,229,255,0.25)',
+      '--d-surface-0': '#050a10',
+      '--d-surface-1': '#0a1520',
+      '--d-surface-2': '#0f1d2a',
+      '--d-surface-3': '#142535',
+      '--d-surface-0-fg': '#00e5ff',
+      '--d-surface-1-fg': '#00e5ff',
+      '--d-surface-2-fg': '#00e5ff',
+      '--d-surface-3-fg': '#00e5ff',
+      '--d-surface-1-border': 'rgba(0,229,255,0.15)',
+      '--d-surface-2-border': 'rgba(0,229,255,0.18)',
+      '--d-surface-3-border': 'rgba(0,229,255,0.22)',
+      '--d-overlay': 'rgba(0,10,20,0.85)',
+      '--d-chart-grid': 'rgba(0,229,255,0.06)',
+      '--d-chart-axis': 'rgba(0,229,255,0.2)',
+      '--d-chart-crosshair': 'rgba(0,229,255,0.3)',
+      '--d-field-bg': 'var(--d-surface-1)',
+      '--d-field-border': 'rgba(0,229,255,0.15)',
+      '--d-field-border-hover': 'rgba(0,229,255,0.3)',
+      '--d-field-border-focus': 'rgba(0,229,255,0.5)',
+      '--d-item-hover-bg': 'rgba(0,229,255,0.06)',
+      '--d-scrollbar-thumb': 'rgba(0,229,255,0.2)',
+      '--d-scrollbar-thumb-hover': 'rgba(0,229,255,0.4)',
+    },
+    light: {
+      '--d-fg': '#0a1520',
+      '--d-muted-fg': '#1a3a50',
+      '--d-border': 'rgba(0,80,100,0.15)',
+      '--d-border-strong': 'rgba(0,80,100,0.3)',
+      '--d-surface-0': '#c8d6e0',
+      '--d-surface-1': '#b8c8d4',
+      '--d-surface-2': '#a8b8c6',
+      '--d-surface-3': '#98a8b8',
+      '--d-surface-0-fg': '#0a1520',
+      '--d-surface-1-fg': '#0a1520',
+      '--d-surface-2-fg': '#0a1520',
+      '--d-surface-3-fg': '#0a1520',
+      '--d-field-bg': 'var(--d-surface-1)',
+      '--d-field-border': 'rgba(0,80,100,0.2)',
+      '--d-field-border-hover': 'rgba(0,80,100,0.35)',
+      '--d-item-hover-bg': 'rgba(0,80,100,0.06)',
+    },
+  },
+  components: [
+    // ── Body / base ──
+    'body{font-family:var(--d-font);background:var(--d-bg);color:var(--d-fg);line-height:var(--d-lh-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}',
+    '::selection{background:rgba(0,229,255,0.25);color:var(--d-fg)}',
+    // ── Scrollbar — cyan tinted ──
+    '::-webkit-scrollbar{width:4px;height:4px}',
+    '::-webkit-scrollbar-track{background:transparent}',
+    '::-webkit-scrollbar-thumb{background:rgba(0,229,255,0.2);border-radius:0}',
+    '::-webkit-scrollbar-thumb:hover{background:rgba(0,229,255,0.4)}',
+    // ── Component overrides ──
+    '.d-card{border-color:rgba(0,229,255,0.15)}',
+    '.d-card-inner{border-color:rgba(0,229,255,0.08)}',
+    '.d-btn{text-transform:uppercase;letter-spacing:0.05em}',
+    '.d-btn-primary{box-shadow:0 0 12px rgba(0,229,255,0.15)}',
+    '.d-btn-primary:hover{box-shadow:0 0 20px rgba(0,229,255,0.3)}',
+    '.d-modal-panel{border-color:rgba(0,229,255,0.2)}',
+    '.d-input,.d-textarea,.d-select-trigger{border-color:rgba(0,229,255,0.15)}',
+    '.d-input:focus,.d-textarea:focus,.d-select-trigger:focus{border-color:rgba(0,229,255,0.4);box-shadow:0 0 8px rgba(0,229,255,0.1)}',
+    // ── Keyframes ──
+    '@keyframes cc-blink{0%,100%{opacity:1}50%{opacity:0.3}}',
+    '@keyframes cc-scan{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}',
+    '@keyframes cc-pulse{0%,100%{box-shadow:0 0 8px rgba(0,229,255,0.2)}50%{box-shadow:0 0 20px rgba(0,229,255,0.4)}}',
+    // ── cc-frame: beveled octagonal border ──
+    '.cc-frame{position:relative;clip-path:polygon(var(--d-sp-2) 0,calc(100% - var(--d-sp-2)) 0,100% var(--d-sp-2),100% calc(100% - var(--d-sp-2)),calc(100% - var(--d-sp-2)) 100%,var(--d-sp-2) 100%,0 calc(100% - var(--d-sp-2)),0 var(--d-sp-2));background:var(--d-surface-1);border:var(--d-border-width-strong) var(--d-border-style) rgba(0,229,255,0.2)}',
+    '.cc-frame-sm{position:relative;clip-path:polygon(var(--d-sp-1) 0,calc(100% - var(--d-sp-1)) 0,100% var(--d-sp-1),100% calc(100% - var(--d-sp-1)),calc(100% - var(--d-sp-1)) 100%,var(--d-sp-1) 100%,0 calc(100% - var(--d-sp-1)),0 var(--d-sp-1));background:var(--d-surface-1);border:var(--d-border-width) var(--d-border-style) rgba(0,229,255,0.15)}',
+    // ── cc-corner: bracket decorations ──
+    '.cc-corner{position:relative}',
+    '.cc-corner::before,.cc-corner::after{content:"";position:absolute;width:var(--d-sp-4);height:var(--d-sp-4);pointer-events:none}',
+    '.cc-corner::before{top:0;left:0;border-top:var(--d-border-width-strong) solid var(--d-primary);border-left:var(--d-border-width-strong) solid var(--d-primary)}',
+    '.cc-corner::after{bottom:0;right:0;border-bottom:var(--d-border-width-strong) solid var(--d-primary);border-right:var(--d-border-width-strong) solid var(--d-primary)}',
+    // ── cc-scanline: horizontal scan overlay ──
+    '.cc-scanline{position:relative;overflow:hidden}',
+    '.cc-scanline::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,229,255,0.03) 2px,rgba(0,229,255,0.03) 4px);pointer-events:none;z-index:1}',
+    // ── cc-grid: faint grid-line background ──
+    '.cc-grid{background-image:repeating-linear-gradient(0deg,rgba(0,229,255,0.04) 0,rgba(0,229,255,0.04) 1px,transparent 1px,transparent 40px),repeating-linear-gradient(90deg,rgba(0,229,255,0.04) 0,rgba(0,229,255,0.04) 1px,transparent 1px,transparent 40px)}',
+    // ── cc-bar: status bar row ──
+    '.cc-bar{display:flex;align-items:center;justify-content:space-between;padding:var(--d-sp-1-5) var(--d-sp-3);border-bottom:var(--d-border-width) solid rgba(0,229,255,0.15);text-transform:uppercase;letter-spacing:0.1em;font-size:var(--d-text-xs);color:var(--d-muted-fg)}',
+    '.cc-bar-bottom{border-bottom:none;border-top:var(--d-border-width) solid rgba(0,229,255,0.15)}',
+    // ── cc-blink: slow pulse for indicators ──
+    '.cc-blink{animation:cc-blink 2s ease-in-out infinite}',
+    // ── cc-glow: cyan glow effect ──
+    '.cc-glow{box-shadow:0 0 12px rgba(0,229,255,0.15),inset 0 0 12px rgba(0,229,255,0.05)}',
+    '.cc-glow-strong{box-shadow:0 0 24px rgba(0,229,255,0.25),inset 0 0 16px rgba(0,229,255,0.08)}',
+    '.cc-glow-pulse{animation:cc-pulse 3s ease-in-out infinite}',
+    // ── cc-divider: HUD horizontal rule ──
+    '.cc-divider{border:none;border-top:var(--d-border-width) dashed rgba(0,229,255,0.2);margin:var(--d-sp-2) 0}',
+    // ── cc-label: micro label ──
+    '.cc-label{text-transform:uppercase;letter-spacing:0.1em;font-size:var(--d-text-xs);font-weight:var(--d-fw-medium)}',
+    // ── cc-data: monospace data readout ──
+    '.cc-data{font-family:var(--d-font-mono);font-variant-numeric:tabular-nums;letter-spacing:0.02em}',
+    // ── cc-indicator: status dot ──
+    '.cc-indicator{display:inline-block;width:var(--d-sp-1-5);height:var(--d-sp-1-5);border-radius:0;background:currentColor}',
+    '.cc-indicator-ok{color:var(--d-success)}',
+    '.cc-indicator-warn{color:var(--d-warning)}',
+    '.cc-indicator-error{color:var(--d-error)}',
+    // ── cc-mesh: command center background ──
+    '.cc-mesh{background:radial-gradient(ellipse at 20% 30%,rgba(0,229,255,0.06) 0%,transparent 50%),radial-gradient(ellipse at 80% 70%,rgba(0,229,255,0.04) 0%,transparent 50%),var(--d-bg)}',
+  ].join(''),
+};

package/src/css/styles/addons/dopamine.js

@@ -0,0 +1,83 @@
+/**
+ * Dopamine — Saturated maximalism. Y2K revival.
+ * Joyful, loud, electric. Maximum saturation, heavy type, gradient everything.
+ * The anti-minimal design language.
+ */
+export const dopamine = {
+  id: 'dopamine',
+  name: 'Dopamine',
+  seed: {
+    primary: '#ff00e5',
+    accent: '#00ff88',
+    tertiary: '#ffea00',
+    neutral: '#8b8b8b',
+    success: '#00ff88',
+    warning: '#ffea00',
+    error: '#ff3366',
+    info: '#00ccff',
+    bg: '#fff5fc',
+    bgDark: '#0d0015',
+  },
+  personality: {
+    radius: 'pill',
+    elevation: 'raised',
+    motion: 'bouncy',
+    borders: 'thin',
+    density: 'comfortable',
+    gradient: 'vivid',
+  },
+  typography: {
+    '--d-fw-heading': '800',
+    '--d-fw-title': '700',
+    '--d-ls-heading': '-0.02em',
+  },
+  overrides: {
+    light: {
+      '--d-field-bg': 'rgba(255,255,255,0.7)',
+      '--d-field-border': 'rgba(255,0,229,0.15)',
+      '--d-field-border-hover': 'rgba(255,0,229,0.3)',
+      '--d-item-hover-bg': 'rgba(255,0,229,0.06)',
+    },
+    dark: {
+      '--d-border': 'rgba(255,0,229,0.12)',
+      '--d-border-strong': 'rgba(255,0,229,0.25)',
+      '--d-field-bg': 'rgba(255,255,255,0.04)',
+      '--d-field-border': 'rgba(255,0,229,0.15)',
+      '--d-field-border-hover': 'rgba(255,0,229,0.3)',
+      '--d-item-hover-bg': 'rgba(255,255,255,0.06)',
+      '--d-chart-0': '#ff00e5',
+      '--d-chart-1': '#00ff88',
+      '--d-chart-2': '#ffea00',
+      '--d-chart-3': '#00ccff',
+      '--d-chart-4': '#ff3366',
+      '--d-chart-5': '#9d4edd',
+      '--d-chart-6': '#ff6b00',
+      '--d-chart-7': '#00ffd5',
+    },
+  },
+  components: [
+    'body{font-family:var(--d-font);background:var(--d-bg);color:var(--d-fg);line-height:var(--d-lh-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}',
+    '::selection{background:var(--d-primary);color:#fff}',
+    // Scrollbar — gradient thumb
+    '::-webkit-scrollbar{width:6px;height:6px}',
+    '::-webkit-scrollbar-track{background:transparent}',
+    '::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--d-primary),var(--d-accent));border-radius:var(--d-radius-full)}',
+    '::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--d-accent),var(--d-primary))}',
+    // Card — gradient border
+    '.d-card{border:var(--d-border-width) solid transparent;background-clip:padding-box;box-shadow:var(--d-elevation-1);position:relative}',
+    '.d-card-inner{box-shadow:none}',
+    // Modal — elevated glow
+    '.d-modal-content{box-shadow:var(--d-elevation-3),0 0 40px rgba(255,0,229,0.15)}',
+    // Button — glow + hue-rotate on hover
+    '.d-btn-primary{box-shadow:0 0 16px rgba(255,0,229,0.3),0 0 4px rgba(0,255,136,0.2)}',
+    '.d-btn-primary:hover{box-shadow:0 0 24px rgba(255,0,229,0.4),0 0 8px rgba(0,255,136,0.3);filter:hue-rotate(15deg)}',
+    // Badge/chip uppercase
+    '.d-badge,.d-badge-sup,.d-chip{text-transform:uppercase;letter-spacing:0.04em}',
+    // Dopamine utilities
+    '.d-dopamine-glow{box-shadow:0 0 20px rgba(255,0,229,0.25),0 0 40px rgba(0,255,136,0.15)}',
+    '.d-gradient-text{background:linear-gradient(135deg,var(--d-primary),var(--d-accent),var(--d-tertiary),var(--d-primary));background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}',
+    '.d-gradient-text-alt{background:linear-gradient(135deg,var(--d-accent),var(--d-tertiary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}',
+    // Mesh — electric neon radials
+    '.d-mesh{background:radial-gradient(ellipse at 20% 50%,rgba(255,0,229,0.15) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(0,255,136,0.1) 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,rgba(255,234,0,0.08) 0%,transparent 50%),var(--d-bg)}',
+  ].join(''),
+};

package/src/css/styles/addons/editorial.js

@@ -0,0 +1,80 @@
+/**
+ * Editorial — Digital print magazine aesthetic.
+ * High-contrast, dramatic typography, zero decoration.
+ * Content is the design. Ink-on-paper warmth with modern sensibility.
+ */
+export const editorial = {
+  id: 'editorial',
+  name: 'Editorial',
+  seed: {
+    primary: '#1a1a1a',
+    accent: '#c41e3a',
+    tertiary: '#1a5276',
+    neutral: '#6b6b6b',
+    success: '#2d6a4f',
+    warning: '#b45309',
+    error: '#9b1b30',
+    info: '#1a5276',
+    bg: '#fefcf9',
+    bgDark: '#111111',
+  },
+  personality: {
+    radius: 'sharp',
+    elevation: 'flat',
+    motion: 'instant',
+    borders: 'none',
+    density: 'spacious',
+    gradient: 'none',
+  },
+  typography: {
+    '--d-font': 'Charter,"Bitstream Charter","Sitka Text",Cambria,serif',
+    '--d-fw-heading': '900',
+    '--d-fw-title': '800',
+    '--d-fw-medium': '600',
+    '--d-ls-heading': '0.06em',
+  },
+  overrides: {
+    light: {
+      '--d-border': 'rgba(0,0,0,0.1)',
+      '--d-border-strong': 'rgba(0,0,0,0.2)',
+      '--d-muted-fg': '#6b6b6b',
+      '--d-field-bg': 'transparent',
+      '--d-field-border': 'rgba(0,0,0,0.15)',
+      '--d-field-border-hover': 'rgba(0,0,0,0.3)',
+      '--d-item-hover-bg': 'rgba(0,0,0,0.03)',
+    },
+    dark: {
+      '--d-bg': '#111111',
+      '--d-fg': '#e8e4df',
+      '--d-muted-fg': '#8a8580',
+      '--d-border': 'rgba(255,255,255,0.1)',
+      '--d-border-strong': 'rgba(255,255,255,0.2)',
+      '--d-field-bg': 'transparent',
+      '--d-field-border': 'rgba(255,255,255,0.15)',
+      '--d-field-border-hover': 'rgba(255,255,255,0.3)',
+      '--d-item-hover-bg': 'rgba(255,255,255,0.04)',
+    },
+  },
+  components: [
+    'body{font-family:var(--d-font);background:var(--d-bg);color:var(--d-fg);line-height:var(--d-lh-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}',
+    '::selection{background:var(--d-accent);color:#fff}',
+    // Minimal scrollbar — 2px thin line
+    '::-webkit-scrollbar{width:2px;height:2px}',
+    '::-webkit-scrollbar-track{background:transparent}',
+    '::-webkit-scrollbar-thumb{background:var(--d-border-strong);border-radius:0}',
+    '::-webkit-scrollbar-thumb:hover{background:var(--d-fg)}',
+    // Card — top-border accent, no shadow
+    '.d-card{border:none;border-top:2px solid var(--d-accent);box-shadow:none}',
+    '.d-card-inner{border:none;border-top:1px solid var(--d-accent);box-shadow:none}',
+    // Modal — clean, borderless
+    '.d-modal-content{border:none;box-shadow:none;border-top:2px solid var(--d-accent)}',
+    // Buttons — text-only or outlined, uppercase, tracked
+    '.d-btn{text-transform:uppercase;letter-spacing:0.08em;font-weight:700;border-radius:0}',
+    '.d-btn-primary{background:var(--d-fg);color:var(--d-bg);box-shadow:none}',
+    '.d-btn-primary:hover{box-shadow:none;opacity:0.85}',
+    // Editorial utilities
+    '.d-editorial-rule{border:none;border-top:2px solid var(--d-fg);margin:var(--d-sp-6) 0}',
+    '.d-editorial-pull{font-size:var(--d-text-xl);font-style:italic;font-weight:400;border-left:3px solid var(--d-accent);padding-left:var(--d-sp-4);margin:var(--d-sp-6) 0;line-height:var(--d-lh-relaxed)}',
+    '.d-editorial-cap::first-letter{float:left;font-size:3.5em;line-height:0.8;font-weight:900;margin-right:var(--d-sp-2);margin-top:var(--d-sp-1)}',
+  ].join(''),
+};

package/src/css/styles/addons/glassmorphism.js

@@ -0,0 +1,99 @@
+/**
+ * Glassmorphism — Stormy blue frosted glass aesthetic.
+ * Dark glass surfaces with blue-tinted borders, sky-blue primary,
+ * cyan accents, and atmospheric gradient backgrounds.
+ * Inspired by stormy/lightning design language.
+ */
+export const glassmorphism = {
+  id: 'glassmorphism',
+  name: 'Glassmorphism',
+  seed: {
+    primary: '#38bdf8',
+    accent: '#22d3ee',
+    tertiary: '#4ade80',
+    neutral: '#6b7a94',
+    success: '#4ade80',
+    warning: '#fbbf24',
+    error: '#f87171',
+    info: '#38bdf8',
+    bg: '#f0f4f9',
+    bgDark: '#0a0c10',
+  },
+  personality: {
+    radius: 'rounded',
+    elevation: 'glass',
+    motion: 'smooth',
+    borders: 'thin',
+    density: 'comfortable',
+    gradient: 'vivid',
+  },
+  typography: {
+    '--d-fw-heading': '700',
+    '--d-fw-title': '600',
+    '--d-ls-heading': '-0.02em',
+  },
+  overrides: {
+    light: {
+      '--d-surface-1-filter': 'blur(16px) saturate(1.6)',
+      '--d-surface-2-filter': 'blur(20px) saturate(1.8)',
+      '--d-surface-3-filter': 'blur(24px) saturate(2)',
+      '--d-field-bg': 'rgba(255,255,255,0.5)',
+      '--d-field-border': 'rgba(0,0,0,0.12)',
+      '--d-field-border-hover': 'rgba(0,0,0,0.22)',
+      '--d-item-hover-bg': 'rgba(0,0,0,0.06)',
+    },
+    dark: {
+      '--d-surface-1': 'rgba(17,19,24,0.7)',
+      '--d-surface-2': 'rgba(17,19,24,0.78)',
+      '--d-surface-3': 'rgba(17,19,24,0.85)',
+      '--d-surface-1-filter': 'blur(12px) saturate(1.4)',
+      '--d-surface-2-filter': 'blur(16px) saturate(1.5)',
+      '--d-surface-3-filter': 'blur(20px) saturate(1.6)',
+      '--d-border': 'rgba(56,189,248,0.1)',
+      '--d-border-strong': 'rgba(56,189,248,0.2)',
+      '--d-field-bg': 'rgba(255,255,255,0.06)',
+      '--d-field-border': 'rgba(56,189,248,0.1)',
+      '--d-field-border-hover': 'rgba(56,189,248,0.2)',
+      '--d-item-hover-bg': 'rgba(255,255,255,0.08)',
+      '--d-fg': '#c5d3e8',
+      '--d-muted-fg': '#8494ad',
+      '--d-chart-0': '#38bdf8',
+      '--d-chart-1': '#22d3ee',
+      '--d-chart-2': '#4ade80',
+      '--d-chart-3': '#fbbf24',
+      '--d-chart-4': '#f87171',
+      '--d-chart-5': '#a78bfa',
+      '--d-chart-6': '#fb923c',
+      '--d-chart-7': '#e879f9',
+    },
+  },
+  components: [
+    // Body + selection + font smoothing
+    'body{font-family:var(--d-font);background:var(--d-bg);color:var(--d-fg);line-height:var(--d-lh-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}',
+    '::selection{background:var(--d-selection-bg);color:var(--d-selection-fg)}',
+    // Scrollbar — sky-blue tinted
+    '::-webkit-scrollbar{width:6px;height:6px}',
+    '::-webkit-scrollbar-track{background:transparent}',
+    '::-webkit-scrollbar-thumb{background:var(--d-primary-border);border-radius:var(--d-radius-full)}',
+    '::-webkit-scrollbar-thumb:hover{background:var(--d-primary-hover)}',
+    // Card — blue-tinted border, no white inset highlight
+    '.d-card{border:var(--d-border-width) solid rgba(56,189,248,0.15);box-shadow:var(--d-elevation-1)}',
+    '.d-card-inner{border:var(--d-border-width) solid rgba(56,189,248,0.08);box-shadow:none}',
+    // Modal — slightly stronger blue border
+    '.d-modal-panel{border:var(--d-border-width) solid rgba(56,189,248,0.18);box-shadow:var(--d-elevation-3)}',
+    // Button primary glow — sky-blue
+    '.d-btn-primary{box-shadow:0 0 16px rgba(56,189,248,0.2)}',
+    '.d-btn-primary:hover{box-shadow:0 0 24px rgba(56,189,248,0.35)}',
+    // Mesh gradient background utility — stormy blue radials
+    '.d-mesh{background:radial-gradient(ellipse at 20% 50%,rgba(56,189,248,0.12) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(34,211,238,0.08) 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,rgba(74,222,128,0.06) 0%,transparent 50%),var(--d-bg)}',
+    // Gradient text utilities — stormy blue spectrum
+    '.d-gradient-text{background:linear-gradient(135deg,var(--d-primary),var(--d-accent),var(--d-tertiary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}',
+    '.d-gradient-text-alt{background:linear-gradient(135deg,var(--d-accent),var(--d-primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}',
+    // Glass panel utilities — three tiers with blue-tinted borders
+    '.d-glass-subtle{background:var(--d-surface-1);backdrop-filter:var(--d-surface-1-filter);-webkit-backdrop-filter:var(--d-surface-1-filter);border:var(--d-border-width) solid rgba(56,189,248,0.08);border-radius:var(--d-radius-lg);box-shadow:var(--d-elevation-0)}',
+    '.d-glass{background:var(--d-surface-1);backdrop-filter:var(--d-surface-1-filter);-webkit-backdrop-filter:var(--d-surface-1-filter);border:var(--d-border-width) solid rgba(56,189,248,0.15);border-radius:var(--d-radius-lg);box-shadow:var(--d-elevation-1)}',
+    '.d-glass-strong{background:var(--d-surface-2);backdrop-filter:var(--d-surface-2-filter);-webkit-backdrop-filter:var(--d-surface-2-filter);border:var(--d-border-width) solid rgba(56,189,248,0.2);border-radius:var(--d-radius-lg);box-shadow:var(--d-elevation-2)}',
+    // Frosted-glass dialog backdrops
+    'dialog::backdrop{background:rgba(10,12,16,0.45);backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4)}',
+  ].join(''),
+};

package/src/css/styles/addons/liquid-glass.js

@@ -0,0 +1,105 @@
+/**
+ * Liquid Glass — Apple-inspired premium glass aesthetic.
+ * Refined, dynamic refraction feel. Extreme blur values,
+ * dramatic opacity ramp, specular highlights. True black dark mode.
+ */
+export const liquidGlass = {
+  id: 'liquid-glass',
+  name: 'Liquid Glass',
+  seed: {
+    primary: '#007aff',
+    accent: '#5856d6',
+    tertiary: '#34c759',
+    neutral: '#8e8e93',
+    success: '#34c759',
+    warning: '#ff9f0a',
+    error: '#ff3b30',
+    info: '#5ac8fa',
+    bg: '#f2f2f7',
+    bgDark: '#000000',
+  },
+  personality: {
+    radius: 'pill',
+    elevation: 'glass',
+    motion: 'smooth',
+    borders: 'thin',
+    density: 'comfortable',
+    gradient: 'vivid',
+  },
+  typography: {
+    '--d-fw-heading': '600',
+    '--d-fw-title': '500',
+    '--d-ls-heading': '-0.02em',
+  },
+  overrides: {
+    light: {
+      '--d-surface-1': 'rgba(242,242,247,0.45)',
+      '--d-surface-2': 'rgba(242,242,247,0.65)',
+      '--d-surface-3': 'rgba(242,242,247,0.9)',
+      '--d-surface-1-filter': 'blur(20px) saturate(1.8)',
+      '--d-surface-2-filter': 'blur(28px) saturate(2.0)',
+      '--d-surface-3-filter': 'blur(36px) saturate(2.2)',
+      '--d-field-bg': 'rgba(255,255,255,0.5)',
+      '--d-field-border': 'rgba(0,0,0,0.08)',
+      '--d-field-border-hover': 'rgba(0,0,0,0.15)',
+      '--d-item-hover-bg': 'rgba(0,0,0,0.04)',
+    },
+    dark: {
+      '--d-surface-1': 'rgba(0,0,0,0.45)',
+      '--d-surface-2': 'rgba(0,0,0,0.65)',
+      '--d-surface-3': 'rgba(0,0,0,0.9)',
+      '--d-surface-1-filter': 'blur(20px) saturate(1.8)',
+      '--d-surface-2-filter': 'blur(28px) saturate(2.0)',
+      '--d-surface-3-filter': 'blur(36px) saturate(2.2)',
+      '--d-border': 'rgba(255,255,255,0.08)',
+      '--d-border-strong': 'rgba(255,255,255,0.18)',
+      '--d-field-bg': 'rgba(255,255,255,0.06)',
+      '--d-field-border': 'rgba(255,255,255,0.1)',
+      '--d-field-border-hover': 'rgba(255,255,255,0.2)',
+      '--d-item-hover-bg': 'rgba(255,255,255,0.06)',
+      '--d-chart-0': '#007aff',
+      '--d-chart-1': '#5856d6',
+      '--d-chart-2': '#34c759',
+      '--d-chart-3': '#ff9f0a',
+      '--d-chart-4': '#ff3b30',
+      '--d-chart-5': '#af52de',
+      '--d-chart-6': '#ff2d55',
+      '--d-chart-7': '#5ac8fa',
+    },
+  },
+  components: [
+    'body{font-family:var(--d-font);background:var(--d-bg);color:var(--d-fg);line-height:var(--d-lh-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}',
+    '::selection{background:var(--d-selection-bg);color:var(--d-selection-fg)}',
+    // Scrollbar — true black with subtle gray thumb
+    '::-webkit-scrollbar{width:6px;height:6px}',
+    '::-webkit-scrollbar-track{background:transparent}',
+    '::-webkit-scrollbar-thumb{background:rgba(142,142,147,0.3);border-radius:var(--d-radius-full)}',
+    '::-webkit-scrollbar-thumb:hover{background:rgba(142,142,147,0.5)}',
+    // Card — specular top-edge highlight
+    '.d-card{border:var(--d-border-width) solid rgba(255,255,255,0.1);box-shadow:var(--d-elevation-1),inset 0 0.5px 0 rgba(255,255,255,0.4)}',
+    '.d-card-inner{border:var(--d-border-width) solid rgba(255,255,255,0.06);box-shadow:none}',
+    // Modal — strong specular
+    '.d-modal-content{border:var(--d-border-width) solid rgba(255,255,255,0.12);box-shadow:var(--d-elevation-3),inset 0 0.5px 0 rgba(255,255,255,0.4)}',
+    // Button — iOS blue glow
+    '.d-btn-primary{box-shadow:0 0 12px rgba(0,122,255,0.2)}',
+    '.d-btn-primary:hover{box-shadow:0 0 20px rgba(0,122,255,0.35)}',
+    // Liquid Glass utilities
+    '.d-liquid-refract{transition:transform var(--d-tr-normal) var(--d-ease-standard),backdrop-filter var(--d-tr-normal) var(--d-ease-standard)}',
+    '.d-liquid-refract:hover{transform:scale(1.01)}',
+    '.d-liquid-highlight{position:relative;overflow:hidden}',
+    '.d-liquid-highlight::after{content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);animation:d-liquid-sweep 4s ease-in-out infinite;pointer-events:none}',
+    '@keyframes d-liquid-sweep{0%{left:-100%}50%{left:100%}100%{left:100%}}',
+    '.d-liquid-depth{box-shadow:0 1px 2px rgba(0,0,0,0.05),0 4px 8px rgba(0,0,0,0.05),0 12px 24px rgba(0,0,0,0.08),inset 0 0.5px 0 rgba(255,255,255,0.3)}',
+    // Glass panels with specular
+    '.d-glass-subtle{background:var(--d-surface-1);backdrop-filter:var(--d-surface-1-filter);-webkit-backdrop-filter:var(--d-surface-1-filter);border:var(--d-border-width) solid rgba(255,255,255,0.08);border-radius:var(--d-radius-lg);box-shadow:var(--d-elevation-0),inset 0 0.5px 0 rgba(255,255,255,0.3)}',
+    '.d-glass{background:var(--d-surface-1);backdrop-filter:var(--d-surface-1-filter);-webkit-backdrop-filter:var(--d-surface-1-filter);border:var(--d-border-width) solid rgba(255,255,255,0.1);border-radius:var(--d-radius-lg);box-shadow:var(--d-elevation-1),inset 0 0.5px 0 rgba(255,255,255,0.4)}',
+    '.d-glass-strong{background:var(--d-surface-2);backdrop-filter:var(--d-surface-2-filter);-webkit-backdrop-filter:var(--d-surface-2-filter);border:var(--d-border-width) solid rgba(255,255,255,0.12);border-radius:var(--d-radius-lg);box-shadow:var(--d-elevation-2),inset 0 0.5px 0 rgba(255,255,255,0.4)}',
+    // Gradient text
+    '.d-gradient-text{background:linear-gradient(135deg,var(--d-primary),var(--d-accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}',
+    '.d-gradient-text-alt{background:linear-gradient(135deg,var(--d-accent),var(--d-tertiary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}',
+    // Mesh
+    '.d-mesh{background:radial-gradient(ellipse at 20% 50%,rgba(0,122,255,0.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(88,86,214,0.06) 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,rgba(52,199,89,0.04) 0%,transparent 50%),var(--d-bg)}',
+    // Frosted-glass backdrop
+    'dialog::backdrop{background:rgba(0,0,0,0.3);backdrop-filter:blur(20px) saturate(1.8);-webkit-backdrop-filter:blur(20px) saturate(1.8)}',
+  ].join(''),
+};