khal-os 1.260324.2

package/src/theme/surfaces.css

@@ -0,0 +1,94 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   Surfaces — 6-layer depth system, glass tokens, borders, shadows
+   Layers: desktop → chrome → inactive → raised → border → hover
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ── Mode-independent structural tokens ── */
+
+:root {
+  --khal-radius-sm: 4px;
+  --khal-radius-md: 8px;
+  --khal-radius-lg: 12px;
+  --khal-radius-xl: 16px;
+  --khal-radius-full: 9999px;
+}
+
+/* ── Light mode ── */
+
+:root {
+  /* Backgrounds */
+  --khal-bg-primary: #ffffff;
+  --khal-bg-secondary: #f8f9fb;
+  --khal-bg-tertiary: #f1f5f9;
+  --khal-bg-desktop: linear-gradient(135deg, #f0f2f8, #dfe4ef);
+
+  /* Surfaces */
+  --khal-surface-default: rgba(255, 255, 255, 0.85);
+  --khal-surface-raised: rgba(255, 255, 255, 0.92);
+  --khal-surface-sunken: rgba(241, 245, 249, 0.8);
+  --khal-surface-overlay: rgba(255, 255, 255, 0.88);
+
+  /* Animated background */
+  --khal-bg-anim-1: rgba(59, 130, 246, 0.12);
+  --khal-bg-anim-2: rgba(99, 102, 241, 0.08);
+  --khal-bg-anim-3: rgba(147, 197, 253, 0.1);
+
+  /* Borders */
+  --khal-border-default: rgba(226, 232, 240, 0.9);
+  --khal-border-subtle: rgba(226, 232, 240, 0.6);
+  --khal-border-strong: rgba(203, 213, 225, 1);
+
+  /* Shadows */
+  --khal-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.02);
+  --khal-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.03);
+  --khal-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
+  --khal-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.05);
+
+  /* Glass effects */
+  --khal-glass-blur: 16px;
+  --khal-glass-opacity: 0.85;
+  --khal-glass-tint: rgba(255, 255, 255, 0.6);
+  --khal-glass-border: rgba(226, 232, 240, 0.7);
+  --khal-glass-filter: blur(16px) saturate(1.4);
+  --khal-glass-enabled: 1;
+}
+
+/* ── Dark mode ── */
+
+.dark {
+  /* Backgrounds — mockup surface hierarchy */
+  --khal-bg-primary: #0d0d14;
+  --khal-bg-secondary: #0f0f18;
+  --khal-bg-tertiary: #111119;
+  --khal-bg-desktop: #0a0a0f;
+
+  /* Surfaces */
+  --khal-surface-default: rgba(20, 20, 32, 0.85);
+  --khal-surface-raised: rgba(26, 26, 42, 0.9);
+  --khal-surface-sunken: rgba(13, 13, 20, 0.8);
+  --khal-surface-overlay: rgba(20, 20, 32, 0.92);
+
+  /* Animated background */
+  --khal-bg-anim-1: rgba(59, 130, 246, 0.08);
+  --khal-bg-anim-2: rgba(99, 102, 241, 0.06);
+  --khal-bg-anim-3: rgba(30, 30, 48, 0.2);
+
+  /* Borders — mockup border color */
+  --khal-border-default: rgba(30, 30, 48, 0.9);
+  --khal-border-subtle: rgba(30, 30, 48, 0.6);
+  --khal-border-strong: rgba(45, 45, 70, 1);
+
+  /* Shadows */
+  --khal-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 1px rgba(59, 130, 246, 0.04);
+  --khal-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 4px rgba(59, 130, 246, 0.05);
+  --khal-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 8px rgba(59, 130, 246, 0.06);
+  --khal-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 16px rgba(59, 130, 246, 0.08);
+
+  /* Glass effects */
+  --khal-glass-blur: 16px;
+  --khal-glass-opacity: 0.85;
+  --khal-glass-tint: rgba(59, 130, 246, 0.03);
+  --khal-glass-border: rgba(30, 30, 48, 0.7);
+  --khal-glass-filter: blur(16px) saturate(1.4);
+  --khal-glass-enabled: 1;
+}

package/src/theme/tailwind-map.css

@@ -0,0 +1,138 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   Tailwind v4 Theme Mapping — maps --ds-* tokens to Tailwind utilities
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+@theme inline {
+  --breakpoint-*: initial;
+
+  --spacing: 0.25rem;
+
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+
+  --shadow-border: var(--ds-shadow-border);
+  --shadow-2xs: var(--ds-shadow-2xs);
+  --shadow-xs: var(--ds-shadow-xs);
+  --shadow-sm: var(--ds-shadow-small);
+  --shadow-md: var(--ds-shadow-medium);
+  --shadow-lg: var(--ds-shadow-large);
+  --shadow-xl: var(--ds-shadow-xl);
+  --shadow-2xl: var(--ds-shadow-2xl);
+
+  --breakpoint-sm: 401px;
+  --breakpoint-md: 601px;
+  --breakpoint-lg: 961px;
+  --breakpoint-xl: 1200px;
+  --breakpoint-2xl: 1400px;
+
+  --color-black: var(--ds-black);
+  --color-white: var(--ds-white);
+
+  --color-background-100: var(--ds-background-100);
+  --color-background-200: var(--ds-background-200);
+
+  --color-gray-100: var(--ds-gray-100);
+  --color-gray-200: var(--ds-gray-200);
+  --color-gray-300: var(--ds-gray-300);
+  --color-gray-400: var(--ds-gray-400);
+  --color-gray-500: var(--ds-gray-500);
+  --color-gray-600: var(--ds-gray-600);
+  --color-gray-700: var(--ds-gray-700);
+  --color-gray-800: var(--ds-gray-800);
+  --color-gray-900: var(--ds-gray-900);
+  --color-gray-1000: var(--ds-gray-1000);
+
+  --color-gray-alpha-100: var(--ds-gray-alpha-100);
+  --color-gray-alpha-200: var(--ds-gray-alpha-200);
+  --color-gray-alpha-300: var(--ds-gray-alpha-300);
+  --color-gray-alpha-400: var(--ds-gray-alpha-400);
+  --color-gray-alpha-500: var(--ds-gray-alpha-500);
+  --color-gray-alpha-600: var(--ds-gray-alpha-600);
+  --color-gray-alpha-700: var(--ds-gray-alpha-700);
+  --color-gray-alpha-800: var(--ds-gray-alpha-800);
+  --color-gray-alpha-900: var(--ds-gray-alpha-900);
+  --color-gray-alpha-1000: var(--ds-gray-alpha-1000);
+
+  --color-blue-100: var(--ds-blue-100);
+  --color-blue-200: var(--ds-blue-200);
+  --color-blue-300: var(--ds-blue-300);
+  --color-blue-400: var(--ds-blue-400);
+  --color-blue-500: var(--ds-blue-500);
+  --color-blue-600: var(--ds-blue-600);
+  --color-blue-700: var(--ds-blue-700);
+  --color-blue-800: var(--ds-blue-800);
+  --color-blue-900: var(--ds-blue-900);
+  --color-blue-1000: var(--ds-blue-1000);
+
+  --color-red-100: var(--ds-red-100);
+  --color-red-200: var(--ds-red-200);
+  --color-red-300: var(--ds-red-300);
+  --color-red-400: var(--ds-red-400);
+  --color-red-500: var(--ds-red-500);
+  --color-red-600: var(--ds-red-600);
+  --color-red-700: var(--ds-red-700);
+  --color-red-800: var(--ds-red-800);
+  --color-red-900: var(--ds-red-900);
+  --color-red-1000: var(--ds-red-1000);
+
+  --color-amber-100: var(--ds-amber-100);
+  --color-amber-200: var(--ds-amber-200);
+  --color-amber-300: var(--ds-amber-300);
+  --color-amber-400: var(--ds-amber-400);
+  --color-amber-500: var(--ds-amber-500);
+  --color-amber-600: var(--ds-amber-600);
+  --color-amber-700: var(--ds-amber-700);
+  --color-amber-800: var(--ds-amber-800);
+  --color-amber-900: var(--ds-amber-900);
+  --color-amber-1000: var(--ds-amber-1000);
+
+  --color-green-100: var(--ds-green-100);
+  --color-green-200: var(--ds-green-200);
+  --color-green-300: var(--ds-green-300);
+  --color-green-400: var(--ds-green-400);
+  --color-green-500: var(--ds-green-500);
+  --color-green-600: var(--ds-green-600);
+  --color-green-700: var(--ds-green-700);
+  --color-green-800: var(--ds-green-800);
+  --color-green-900: var(--ds-green-900);
+  --color-green-1000: var(--ds-green-1000);
+
+  --color-teal-100: var(--ds-teal-100);
+  --color-teal-200: var(--ds-teal-200);
+  --color-teal-300: var(--ds-teal-300);
+  --color-teal-400: var(--ds-teal-400);
+  --color-teal-500: var(--ds-teal-500);
+  --color-teal-600: var(--ds-teal-600);
+  --color-teal-700: var(--ds-teal-700);
+  --color-teal-800: var(--ds-teal-800);
+  --color-teal-900: var(--ds-teal-900);
+  --color-teal-1000: var(--ds-teal-1000);
+
+  --color-purple-100: var(--ds-purple-100);
+  --color-purple-200: var(--ds-purple-200);
+  --color-purple-300: var(--ds-purple-300);
+  --color-purple-400: var(--ds-purple-400);
+  --color-purple-500: var(--ds-purple-500);
+  --color-purple-600: var(--ds-purple-600);
+  --color-purple-700: var(--ds-purple-700);
+  --color-purple-800: var(--ds-purple-800);
+  --color-purple-900: var(--ds-purple-900);
+  --color-purple-1000: var(--ds-purple-1000);
+
+  --color-pink-100: var(--ds-pink-100);
+  --color-pink-200: var(--ds-pink-200);
+  --color-pink-300: var(--ds-pink-300);
+  --color-pink-400: var(--ds-pink-400);
+  --color-pink-500: var(--ds-pink-500);
+  --color-pink-600: var(--ds-pink-600);
+  --color-pink-700: var(--ds-pink-700);
+  --color-pink-800: var(--ds-pink-800);
+  --color-pink-900: var(--ds-pink-900);
+  --color-pink-1000: var(--ds-pink-1000);
+
+  --font-mono: "JetBrains Mono", var(--font-geist-mono), ui-monospace, monospace;
+}

package/src/theme/taskbar.css

@@ -0,0 +1,25 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   Taskbar — bottom bar layout tokens (one layout, no floating dock)
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ── Light mode ── */
+
+:root {
+  --khal-taskbar-bg: rgba(255, 255, 255, 0.7);
+  --khal-taskbar-border: rgba(226, 232, 240, 0.8);
+  --khal-taskbar-shadow: 0 -1px 8px rgba(0, 0, 0, 0.04);
+  --khal-taskbar-active-indicator: #3b82f6;
+  --khal-taskbar-active-bg: rgba(59, 130, 246, 0.1);
+  --khal-taskbar-hover-bg: rgba(59, 130, 246, 0.06);
+}
+
+/* ── Dark mode ── */
+
+.dark {
+  --khal-taskbar-bg: rgba(10, 10, 15, 0.85);
+  --khal-taskbar-border: rgba(30, 30, 48, 0.7);
+  --khal-taskbar-shadow: 0 -1px 8px rgba(0, 0, 0, 0.3);
+  --khal-taskbar-active-indicator: #3b82f6;
+  --khal-taskbar-active-bg: rgba(59, 130, 246, 0.15);
+  --khal-taskbar-hover-bg: rgba(59, 130, 246, 0.08);
+}

package/src/theme/terminal.css

@@ -0,0 +1,55 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   Terminal — background + 16 ANSI colors (standard + bright) per mode
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ── Light mode ── */
+
+:root {
+  --khal-terminal-bg: #f8fafc;
+
+  /* Standard colors */
+  --khal-ansi-black: #1e293b;
+  --khal-ansi-red: #dc2626;
+  --khal-ansi-green: #16a34a;
+  --khal-ansi-yellow: #ca8a04;
+  --khal-ansi-blue: #2563eb;
+  --khal-ansi-magenta: #9333ea;
+  --khal-ansi-cyan: #0891b2;
+  --khal-ansi-white: #f1f5f9;
+
+  /* Bright colors */
+  --khal-ansi-bright-black: #475569;
+  --khal-ansi-bright-red: #ef4444;
+  --khal-ansi-bright-green: #22c55e;
+  --khal-ansi-bright-yellow: #eab308;
+  --khal-ansi-bright-blue: #3b82f6;
+  --khal-ansi-bright-magenta: #a855f7;
+  --khal-ansi-bright-cyan: #06b6d4;
+  --khal-ansi-bright-white: #ffffff;
+}
+
+/* ── Dark mode ── */
+
+.dark {
+  --khal-terminal-bg: #0a0a0f;
+
+  /* Standard colors */
+  --khal-ansi-black: #0a0a0f;
+  --khal-ansi-red: #f87171;
+  --khal-ansi-green: #4ade80;
+  --khal-ansi-yellow: #fbbf24;
+  --khal-ansi-blue: #60a5fa;
+  --khal-ansi-magenta: #c084fc;
+  --khal-ansi-cyan: #22d3ee;
+  --khal-ansi-white: #e2e8f0;
+
+  /* Bright colors */
+  --khal-ansi-bright-black: #475569;
+  --khal-ansi-bright-red: #fca5a5;
+  --khal-ansi-bright-green: #86efac;
+  --khal-ansi-bright-yellow: #fde68a;
+  --khal-ansi-bright-blue: #93c5fd;
+  --khal-ansi-bright-magenta: #d8b4fe;
+  --khal-ansi-bright-cyan: #67e8f9;
+  --khal-ansi-bright-white: #f8fafc;
+}

package/src/theme/typography.css

@@ -0,0 +1,26 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   Typography — 4-tier text hierarchy, font families
+   Tiers: primary → secondary → muted → faint (+ inverse)
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ── Light mode ── */
+
+:root {
+  /* Text hierarchy */
+  --khal-text-primary: #1a1a2e;
+  --khal-text-secondary: #4a5568;
+  --khal-text-muted: #94a3b8;
+  --khal-text-faint: #cbd5e1;
+  --khal-text-inverse: #ffffff;
+}
+
+/* ── Dark mode ── */
+
+.dark {
+  /* Text hierarchy — mockup palette */
+  --khal-text-primary: #e2e8f0;
+  --khal-text-secondary: #94a3b8;
+  --khal-text-muted: #64748b;
+  --khal-text-faint: #475569;
+  --khal-text-inverse: #0a0a0f;
+}

package/src/theme/utilities.css

@@ -0,0 +1,156 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   Utilities — typography, material, misc Tailwind utility classes
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ─── Typography Utilities ─── */
+
+@utility text-heading-72 {
+  @apply font-sans font-semibold text-[72px] leading-[72px] tracking-[-4.32px];
+}
+@utility text-heading-64 {
+  @apply font-sans font-semibold text-[64px] leading-[64px] tracking-[-3.84px];
+}
+@utility text-heading-56 {
+  @apply font-sans font-semibold text-[56px] leading-[56px] tracking-[-3.36px];
+}
+@utility text-heading-48 {
+  @apply font-sans font-semibold text-[48px] leading-[56px] tracking-[-2.88px];
+}
+@utility text-heading-40 {
+  @apply font-sans font-semibold text-[40px] leading-[48px] tracking-[-2.4px];
+}
+@utility text-heading-32 {
+  @apply font-sans font-semibold [&>strong]:font-medium [&>strong]:text-gray-900 text-[32px] leading-[40px] tracking-[-1.28px];
+}
+@utility text-heading-24 {
+  @apply font-sans font-semibold [&>strong]:font-medium [&>strong]:text-gray-900 text-[24px] leading-[32px] tracking-[-0.96px];
+}
+@utility text-heading-20 {
+  @apply font-sans font-semibold [&>strong]:font-medium [&>strong]:text-gray-900 text-[20px] leading-[26px] tracking-[-0.4px];
+}
+@utility text-heading-16 {
+  @apply font-sans font-semibold [&>strong]:font-medium [&>strong]:text-gray-900 text-[16px] leading-[24px] tracking-[-0.32px];
+}
+@utility text-heading-14 {
+  @apply font-sans font-semibold text-[14px] leading-[20px] tracking-[-0.28px];
+}
+
+@utility text-button-16 {
+  @apply font-sans font-medium text-[16px] leading-[20px];
+}
+@utility text-button-14 {
+  @apply font-sans font-medium text-[14px] leading-[20px];
+}
+@utility text-button-12 {
+  @apply font-sans font-medium text-[12px] leading-[16px];
+}
+
+@utility text-label-20 {
+  @apply font-sans font-normal text-[20px] leading-[32px];
+}
+@utility text-label-18 {
+  @apply font-sans font-normal text-[18px] leading-[20px];
+}
+@utility text-label-16 {
+  @apply font-sans font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[16px] leading-[20px];
+}
+@utility text-label-14 {
+  @apply font-sans font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[14px] leading-[20px];
+}
+@utility text-label-14-mono {
+  @apply font-mono font-normal text-[14px] leading-[20px];
+}
+@utility text-label-13 {
+  @apply font-sans font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[13px] leading-[16px];
+}
+@utility text-label-13-mono {
+  @apply font-mono font-normal text-[13px] leading-[20px];
+}
+@utility text-label-12 {
+  @apply font-sans font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[12px] leading-[16px];
+}
+@utility text-label-12-mono {
+  @apply font-mono font-normal text-[12px] leading-[16px];
+}
+
+@utility text-copy-24 {
+  @apply font-sans font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[24px] leading-[36px];
+}
+@utility text-copy-20 {
+  @apply font-sans font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[20px] leading-[36px];
+}
+@utility text-copy-18 {
+  @apply font-sans font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[18px] leading-[28px];
+}
+@utility text-copy-16 {
+  @apply font-sans font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[16px] leading-[24px];
+}
+@utility text-copy-14 {
+  @apply font-sans font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[14px] leading-[20px];
+}
+@utility text-copy-14-mono {
+  @apply font-mono font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[14px] leading-[20px];
+}
+@utility text-copy-13 {
+  @apply font-sans font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[13px] leading-[18px];
+}
+@utility text-copy-13-mono {
+  @apply font-mono font-normal text-[13px] leading-[18px];
+}
+
+/* ─── Material Utilities ─── */
+
+@utility material-base {
+  @apply bg-background-100 rounded-[6px];
+  box-shadow: var(--ds-shadow-border);
+}
+@utility material-small {
+  @apply bg-background-100 rounded-[6px];
+  box-shadow: var(--ds-shadow-border-small);
+}
+@utility material-medium {
+  @apply bg-background-100 rounded-[12px];
+  box-shadow: var(--ds-shadow-border-medium);
+}
+@utility material-large {
+  @apply bg-background-100 rounded-[12px];
+  box-shadow: var(--ds-shadow-border-large);
+}
+@utility material-tooltip {
+  @apply bg-background-100 rounded-[6px];
+  box-shadow: var(--ds-shadow-tooltip);
+}
+@utility material-menu {
+  @apply bg-background-100 rounded-[12px];
+  box-shadow: var(--ds-shadow-menu);
+}
+@utility material-modal {
+  @apply bg-background-100 rounded-[12px];
+  box-shadow: var(--ds-shadow-modal);
+}
+@utility material-fullscreen {
+  @apply bg-background-100 rounded-[16px];
+  box-shadow: var(--ds-shadow-fullscreen);
+}
+
+/* ─── Misc Utilities ─── */
+
+@utility no-scrollbar {
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@utility animation-delay-* {
+  animation-delay: --value(--animation-delay-*);
+  animation-delay: calc(--value(integer) * 1ms);
+  animation-delay: --value([*]);
+}
+
+@utility -animation-delay-* {
+  animation-delay: calc(--value(--animation-delay-*) * -1);
+  animation-delay: calc(--value(integer) * -1ms);
+  animation-delay: calc(--value([*]) * -1);
+}

package/src/theme/window.css

@@ -0,0 +1,103 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   Window — chrome, title bar, borders, shadows, frame, control buttons (glass)
+   One control style: glass with macOS-style traffic lights
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ── Light mode ── */
+
+:root {
+  /* Window structure */
+  --khal-window-radius: 8px;
+  --khal-window-overflow: hidden;
+  --khal-window-bg: var(--khal-surface-default);
+  --khal-window-border-expr: 1px solid var(--khal-window-border);
+  --khal-window-border-focused-expr: 1px solid var(--khal-window-border-focused);
+  --khal-window-top-border: none;
+
+  /* Title bar */
+  --khal-window-title-bg: rgba(255, 255, 255, 0.8);
+  --khal-window-title-bg-focused: rgba(255, 255, 255, 0.92);
+
+  /* Borders */
+  --khal-window-border: rgba(226, 232, 240, 0.8);
+  --khal-window-border-focused: rgba(59, 130, 246, 0.3);
+
+  /* Shadows */
+  --khal-window-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.03), inset 0 0.5px 0 rgba(255, 255, 255, 0.8);
+  --khal-window-shadow-focused: 0 8px 28px rgba(59, 130, 246, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06), inset 0 0.5px 0 rgba(255, 255, 255, 0.9);
+
+  /* Frame layout */
+  --khal-frame-height: 40px;
+  --khal-frame-icon-gap: 8px;
+  --khal-frame-font-size: 13px;
+  --khal-frame-icon-opacity: 1;
+  --khal-frame-controls-position: right;
+
+  /* Control buttons — glass style */
+  --khal-controls-inset: 6px 6px auto auto;
+  --khal-controls-bg: transparent;
+  --khal-controls-blur: blur(8px);
+  --khal-controls-gap: 2px;
+  --khal-controls-minimize-hover-bg: var(--khal-accent-subtle);
+  --khal-controls-maximize-hover-bg: var(--khal-accent-subtle);
+  --khal-controls-close-hover-bg: rgba(239, 68, 68, 0.1);
+  --khal-controls-close-hover-color: rgb(239, 68, 68);
+
+  /* Frame extras */
+  --khal-frame-padding-x: 12px;
+  --khal-frame-backdrop: var(--khal-glass-filter);
+  --khal-window-backdrop: var(--khal-glass-filter);
+  --khal-window-frame-bg: var(--khal-window-title-bg);
+  --khal-window-frame-bg-focused: var(--khal-window-title-bg-focused);
+  --khal-window-frame-border-bottom: 1px solid var(--khal-border-default);
+  --khal-window-content-bg: var(--khal-surface-default);
+}
+
+/* ── Dark mode ── */
+
+.dark {
+  /* Window structure */
+  --khal-window-radius: 8px;
+  --khal-window-overflow: hidden;
+  --khal-window-bg: var(--khal-surface-default);
+  --khal-window-border-expr: 1px solid var(--khal-window-border);
+  --khal-window-border-focused-expr: 1px solid var(--khal-window-border-focused);
+  --khal-window-top-border: none;
+
+  /* Title bar */
+  --khal-window-title-bg: rgba(13, 13, 20, 0.85);
+  --khal-window-title-bg-focused: rgba(20, 20, 32, 0.92);
+
+  /* Borders */
+  --khal-window-border: rgba(30, 30, 48, 0.8);
+  --khal-window-border-focused: rgba(59, 130, 246, 0.3);
+
+  /* Shadows */
+  --khal-window-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 0.5px 0 rgba(255, 255, 255, 0.04);
+  --khal-window-shadow-focused: 0 8px 32px rgba(59, 130, 246, 0.08), 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 0.5px 0 rgba(255, 255, 255, 0.06);
+
+  /* Frame layout */
+  --khal-frame-height: 40px;
+  --khal-frame-icon-gap: 8px;
+  --khal-frame-font-size: 13px;
+  --khal-frame-icon-opacity: 1;
+  --khal-frame-controls-position: right;
+
+  /* Control buttons — glass style */
+  --khal-controls-inset: 6px 6px auto auto;
+  --khal-controls-bg: transparent;
+  --khal-controls-blur: blur(8px);
+  --khal-controls-minimize-hover-bg: var(--khal-accent-subtle);
+  --khal-controls-maximize-hover-bg: var(--khal-accent-subtle);
+  --khal-controls-close-hover-bg: rgba(239, 68, 68, 0.15);
+  --khal-controls-close-hover-color: rgb(239, 68, 68);
+
+  /* Frame extras */
+  --khal-frame-padding-x: 12px;
+  --khal-frame-backdrop: var(--khal-glass-filter);
+  --khal-window-backdrop: var(--khal-glass-filter);
+  --khal-window-frame-bg: var(--khal-window-title-bg);
+  --khal-window-frame-bg-focused: var(--khal-window-title-bg-focused);
+  --khal-window-frame-border-bottom: 1px solid var(--khal-border-default);
+  --khal-window-content-bg: var(--khal-surface-default);
+}

package/src/types/desktop-entry.ts

@@ -0,0 +1,12 @@
+export interface DesktopEntry {
+	id: string;
+	name: string;
+	icon: string;
+	exec: string | null;
+	type: 'builtin' | 'x11' | 'web';
+	component: string | null;
+	categories: string[];
+	comment: string | null;
+	/** true if sourced from ~/Desktop (shows as a desktop icon) */
+	onDesktop?: boolean;
+}

package/src/types/use-descendants.d.ts

@@ -0,0 +1,13 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+declare module "use-descendants" {
+  export function createDescendants<T = any>(): any;
+  export function useDescendants<T = any, O = any>(...args: any[]): any;
+  export interface ItemOptions<T = any, O = any> {
+    disabled?: boolean;
+    [key: string]: any;
+  }
+  export const DescendantContext: any;
+  export function useDescendant<T = any>(...args: any[]): any;
+  export function DescendantProvider(props: any): any;
+  export function useIsomorphicLayoutEffect(...args: any[]): any;
+}

package/src/types/window.ts

@@ -0,0 +1,28 @@
+export interface WindowPosition {
+	x: number;
+	y: number;
+}
+
+export interface WindowSize {
+	width: number;
+	height: number;
+}
+
+export type SnapZone = 'left' | 'right' | 'top' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | null;
+
+export interface WindowState {
+	id: string;
+	title: string;
+	appId: string;
+	position: WindowPosition;
+	size: WindowSize;
+	minimized: boolean;
+	maximized: boolean;
+	focused: boolean;
+	zIndex: number;
+	snapped?: SnapZone;
+	preSnapPosition?: WindowPosition;
+	preSnapSize?: WindowSize;
+	meta?: Record<string, unknown>;
+	closing?: boolean;
+}

package/src/types.d.ts

@@ -0,0 +1,9 @@
+declare module '*.css' {
+	const content: Record<string, string>;
+	export default content;
+}
+
+declare module '@xterm/xterm/css/xterm.css' {
+	const content: string;
+	export default content;
+}