@khal-os/ui 1.0.17 → 1.0.22

package/dist/index.d.cts

@@ -898,6 +898,93 @@ declare const useThemeStore: zustand.UseBoundStore<Omit<zustand.StoreApi<ThemeSt
     };
 }>;
 
+/**
+ * KhalOS Design Tokens — canonical, product-facing token API.
+ *
+ * Extracted from `khal-landing` (see DESIGN-SYSTEM.md in this package).
+ * These are the six default tokens every Khal app surface should consume,
+ * plus a small set of supporting tokens for OS chrome, code surfaces, and
+ * operational focus.
+ *
+ * The CSS equivalents are exposed in `tokens.css` under the
+ * "KhalOS Brand Aliases" block as `--khal-*` custom properties.
+ *
+ * NOTE: `./lp-tokens.ts` predates this file and is kept only for the
+ * mesh-gradient consumer. Prefer this module for new code.
+ */
+declare const KHAL_BG = "oklch(14.48% 0.0000 89.88)";
+declare const KHAL_SURFACE = "oklch(18.69% 0.0107 268.11)";
+declare const KHAL_FG = "oklch(93.72% 0.0084 271.33)";
+declare const KHAL_MUTED = "oklch(66.06% 0.0293 269.51)";
+declare const KHAL_BORDER = "oklch(25.72% 0.0257 268.23)";
+declare const KHAL_ACCENT = "oklch(71.49% 0.1112 63.09)";
+declare const KHAL_CHROME = "oklch(16.86% 0.0110 268.03)";
+declare const KHAL_CELL = "oklch(17.33% 0.0154 266.68)";
+declare const KHAL_TERTIARY = "oklch(47.99% 0.0369 269.33)";
+declare const KHAL_BORDER_STRONG = "oklch(36.17% 0.0439 266.77)";
+declare const KHAL_ACCENT_BLUE = "oklch(55.73% 0.1910 256.76)";
+declare const KHAL_SURFACE_LIGHT = "oklch(95.99% 0.0079 73.74)";
+declare const KHAL_FONT_DISPLAY = "\"Geist\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif";
+declare const KHAL_FONT_BODY = "\"Geist\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif";
+declare const KHAL_FONT_MONO = "\"Geist Mono\", \"SFMono-Regular\", ui-monospace, Menlo, Consolas, monospace";
+declare const KHAL_RADIUS = "10px";
+declare const KHAL_RADIUS_LG = "12px";
+declare const KHAL_MOTION_EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
+declare const KHAL_MOTION_DURATION_MS = 420;
+/**
+ * The full canonical token set as a frozen object — handy for theming
+ * primitives that take a `tokens` prop, or for runtime introspection.
+ */
+declare const KHAL_TOKENS: Readonly<{
+    readonly color: {
+        readonly bg: "oklch(14.48% 0.0000 89.88)";
+        readonly surface: "oklch(18.69% 0.0107 268.11)";
+        readonly fg: "oklch(93.72% 0.0084 271.33)";
+        readonly muted: "oklch(66.06% 0.0293 269.51)";
+        readonly border: "oklch(25.72% 0.0257 268.23)";
+        readonly accent: "oklch(71.49% 0.1112 63.09)";
+        readonly chrome: "oklch(16.86% 0.0110 268.03)";
+        readonly cell: "oklch(17.33% 0.0154 266.68)";
+        readonly tertiary: "oklch(47.99% 0.0369 269.33)";
+        readonly borderStrong: "oklch(36.17% 0.0439 266.77)";
+        readonly accentBlue: "oklch(55.73% 0.1910 256.76)";
+        readonly surfaceLight: "oklch(95.99% 0.0079 73.74)";
+    };
+    readonly font: {
+        readonly display: "\"Geist\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif";
+        readonly body: "\"Geist\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif";
+        readonly mono: "\"Geist Mono\", \"SFMono-Regular\", ui-monospace, Menlo, Consolas, monospace";
+    };
+    readonly radius: {
+        readonly base: "10px";
+        readonly lg: "12px";
+    };
+    readonly motion: {
+        readonly ease: "cubic-bezier(0.22, 1, 0.36, 1)";
+        readonly durationMs: 420;
+    };
+}>;
+type KhalTokens = typeof KHAL_TOKENS;
+/**
+ * The six CSS custom property names that map to the canonical color
+ * tokens above. Use when you need to reference a token by its CSS name
+ * (e.g. for inline styles or a theme bridge).
+ */
+declare const KHAL_CSS_VARS: Readonly<{
+    readonly bg: "--khal-bg";
+    readonly surface: "--khal-surface";
+    readonly fg: "--khal-fg";
+    readonly muted: "--khal-muted";
+    readonly border: "--khal-border";
+    readonly accent: "--khal-accent";
+    readonly chrome: "--khal-chrome";
+    readonly cell: "--khal-cell";
+    readonly tertiary: "--khal-tertiary";
+    readonly borderStrong: "--khal-border-strong";
+    readonly accentBlue: "--khal-accent-blue";
+    readonly surfaceLight: "--khal-surface-light";
+}>;
+
 /**
  * LP Design Tokens — extracted from khal-landing hero-os-showcase.tsx
  * These are the canonical reference colors from the landing page.
@@ -923,4 +1010,4 @@ interface AppComponentProps {
     meta?: Record<string, unknown>;
 }
 
-export { ACCENT_BLUE, type AppComponentProps, Avatar, type AvatarProps, BUTTON_RADIUS, Badge, Button, type ButtonProps, CELL_BG, CHROME_BG, CollapsibleSidebar, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CostCounter, type CostCounterProps, DataRow, type DataRowProps, type DesktopNotifMode, type DesktopNotification, Dialog, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type FeedEvent, type FeedEventType, GlassCard, type GlassCardProps, Input, KhalLogo, ListView, LiveFeed, type LiveFeedProps, MESH_GRADIENT_PALETTE, MeshGradientInner as MeshGradient, type MeshGradientProps, MetricDisplay, type MetricDisplayProps, Note, type NotificationUrgency, NumberFlow, type NumberFlowProps, PillBadge, type PillBadgeProps, ProgressBar, type ProgressBarProps, PropertyPanel, SectionCard, SectionCardHeader, type SectionCardProps, SectionHeader, Separator, SidebarNav, Spinner, SplitPane, StatusBadge, StatusBar, StatusDot, type StatusDotProps, type StatusState, TEXT_PRIMARY, TEXT_SECONDARY, TEXT_TERTIARY, ThemeProvider, ThemeSwitcher, TickerBar, type TickerBarProps, Toggle, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, type TrayIcon, WINDOW_RADIUS, WIN_BG, WIN_BORDER, WIN_BORDER_FOCUSED, WindowActiveProvider, WindowMinimizedProvider, badgeVariants, buttonVariants, cn, dataRowVariants, fadeIn, fadeUp, glassCardVariants, khalEasing, metricDisplayVariants, pillBadgeVariants, progressBarVariants, scaleUp, sectionCardVariants, springConfig, staggerChild, staggerContainer, stateConfig, useNotificationStore, useReducedMotion, useSidebar, useThemeStore, useWindowActive, useWindowMinimized };
+export { ACCENT_BLUE, type AppComponentProps, Avatar, type AvatarProps, BUTTON_RADIUS, Badge, Button, type ButtonProps, CELL_BG, CHROME_BG, CollapsibleSidebar, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CostCounter, type CostCounterProps, DataRow, type DataRowProps, type DesktopNotifMode, type DesktopNotification, Dialog, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type FeedEvent, type FeedEventType, GlassCard, type GlassCardProps, Input, KHAL_ACCENT, KHAL_ACCENT_BLUE, KHAL_BG, KHAL_BORDER, KHAL_BORDER_STRONG, KHAL_CELL, KHAL_CHROME, KHAL_CSS_VARS, KHAL_FG, KHAL_FONT_BODY, KHAL_FONT_DISPLAY, KHAL_FONT_MONO, KHAL_MOTION_DURATION_MS, KHAL_MOTION_EASE, KHAL_MUTED, KHAL_RADIUS, KHAL_RADIUS_LG, KHAL_SURFACE, KHAL_SURFACE_LIGHT, KHAL_TERTIARY, KHAL_TOKENS, KhalLogo, type KhalTokens, ListView, LiveFeed, type LiveFeedProps, MESH_GRADIENT_PALETTE, MeshGradientInner as MeshGradient, type MeshGradientProps, MetricDisplay, type MetricDisplayProps, Note, type NotificationUrgency, NumberFlow, type NumberFlowProps, PillBadge, type PillBadgeProps, ProgressBar, type ProgressBarProps, PropertyPanel, SectionCard, SectionCardHeader, type SectionCardProps, SectionHeader, Separator, SidebarNav, Spinner, SplitPane, StatusBadge, StatusBar, StatusDot, type StatusDotProps, type StatusState, TEXT_PRIMARY, TEXT_SECONDARY, TEXT_TERTIARY, ThemeProvider, ThemeSwitcher, TickerBar, type TickerBarProps, Toggle, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, type TrayIcon, WINDOW_RADIUS, WIN_BG, WIN_BORDER, WIN_BORDER_FOCUSED, WindowActiveProvider, WindowMinimizedProvider, badgeVariants, buttonVariants, cn, dataRowVariants, fadeIn, fadeUp, glassCardVariants, khalEasing, metricDisplayVariants, pillBadgeVariants, progressBarVariants, scaleUp, sectionCardVariants, springConfig, staggerChild, staggerContainer, stateConfig, useNotificationStore, useReducedMotion, useSidebar, useThemeStore, useWindowActive, useWindowMinimized };

package/dist/index.d.ts

@@ -898,6 +898,93 @@ declare const useThemeStore: zustand.UseBoundStore<Omit<zustand.StoreApi<ThemeSt
     };
 }>;
 
+/**
+ * KhalOS Design Tokens — canonical, product-facing token API.
+ *
+ * Extracted from `khal-landing` (see DESIGN-SYSTEM.md in this package).
+ * These are the six default tokens every Khal app surface should consume,
+ * plus a small set of supporting tokens for OS chrome, code surfaces, and
+ * operational focus.
+ *
+ * The CSS equivalents are exposed in `tokens.css` under the
+ * "KhalOS Brand Aliases" block as `--khal-*` custom properties.
+ *
+ * NOTE: `./lp-tokens.ts` predates this file and is kept only for the
+ * mesh-gradient consumer. Prefer this module for new code.
+ */
+declare const KHAL_BG = "oklch(14.48% 0.0000 89.88)";
+declare const KHAL_SURFACE = "oklch(18.69% 0.0107 268.11)";
+declare const KHAL_FG = "oklch(93.72% 0.0084 271.33)";
+declare const KHAL_MUTED = "oklch(66.06% 0.0293 269.51)";
+declare const KHAL_BORDER = "oklch(25.72% 0.0257 268.23)";
+declare const KHAL_ACCENT = "oklch(71.49% 0.1112 63.09)";
+declare const KHAL_CHROME = "oklch(16.86% 0.0110 268.03)";
+declare const KHAL_CELL = "oklch(17.33% 0.0154 266.68)";
+declare const KHAL_TERTIARY = "oklch(47.99% 0.0369 269.33)";
+declare const KHAL_BORDER_STRONG = "oklch(36.17% 0.0439 266.77)";
+declare const KHAL_ACCENT_BLUE = "oklch(55.73% 0.1910 256.76)";
+declare const KHAL_SURFACE_LIGHT = "oklch(95.99% 0.0079 73.74)";
+declare const KHAL_FONT_DISPLAY = "\"Geist\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif";
+declare const KHAL_FONT_BODY = "\"Geist\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif";
+declare const KHAL_FONT_MONO = "\"Geist Mono\", \"SFMono-Regular\", ui-monospace, Menlo, Consolas, monospace";
+declare const KHAL_RADIUS = "10px";
+declare const KHAL_RADIUS_LG = "12px";
+declare const KHAL_MOTION_EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
+declare const KHAL_MOTION_DURATION_MS = 420;
+/**
+ * The full canonical token set as a frozen object — handy for theming
+ * primitives that take a `tokens` prop, or for runtime introspection.
+ */
+declare const KHAL_TOKENS: Readonly<{
+    readonly color: {
+        readonly bg: "oklch(14.48% 0.0000 89.88)";
+        readonly surface: "oklch(18.69% 0.0107 268.11)";
+        readonly fg: "oklch(93.72% 0.0084 271.33)";
+        readonly muted: "oklch(66.06% 0.0293 269.51)";
+        readonly border: "oklch(25.72% 0.0257 268.23)";
+        readonly accent: "oklch(71.49% 0.1112 63.09)";
+        readonly chrome: "oklch(16.86% 0.0110 268.03)";
+        readonly cell: "oklch(17.33% 0.0154 266.68)";
+        readonly tertiary: "oklch(47.99% 0.0369 269.33)";
+        readonly borderStrong: "oklch(36.17% 0.0439 266.77)";
+        readonly accentBlue: "oklch(55.73% 0.1910 256.76)";
+        readonly surfaceLight: "oklch(95.99% 0.0079 73.74)";
+    };
+    readonly font: {
+        readonly display: "\"Geist\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif";
+        readonly body: "\"Geist\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif";
+        readonly mono: "\"Geist Mono\", \"SFMono-Regular\", ui-monospace, Menlo, Consolas, monospace";
+    };
+    readonly radius: {
+        readonly base: "10px";
+        readonly lg: "12px";
+    };
+    readonly motion: {
+        readonly ease: "cubic-bezier(0.22, 1, 0.36, 1)";
+        readonly durationMs: 420;
+    };
+}>;
+type KhalTokens = typeof KHAL_TOKENS;
+/**
+ * The six CSS custom property names that map to the canonical color
+ * tokens above. Use when you need to reference a token by its CSS name
+ * (e.g. for inline styles or a theme bridge).
+ */
+declare const KHAL_CSS_VARS: Readonly<{
+    readonly bg: "--khal-bg";
+    readonly surface: "--khal-surface";
+    readonly fg: "--khal-fg";
+    readonly muted: "--khal-muted";
+    readonly border: "--khal-border";
+    readonly accent: "--khal-accent";
+    readonly chrome: "--khal-chrome";
+    readonly cell: "--khal-cell";
+    readonly tertiary: "--khal-tertiary";
+    readonly borderStrong: "--khal-border-strong";
+    readonly accentBlue: "--khal-accent-blue";
+    readonly surfaceLight: "--khal-surface-light";
+}>;
+
 /**
  * LP Design Tokens — extracted from khal-landing hero-os-showcase.tsx
  * These are the canonical reference colors from the landing page.
@@ -923,4 +1010,4 @@ interface AppComponentProps {
     meta?: Record<string, unknown>;
 }
 
-export { ACCENT_BLUE, type AppComponentProps, Avatar, type AvatarProps, BUTTON_RADIUS, Badge, Button, type ButtonProps, CELL_BG, CHROME_BG, CollapsibleSidebar, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CostCounter, type CostCounterProps, DataRow, type DataRowProps, type DesktopNotifMode, type DesktopNotification, Dialog, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type FeedEvent, type FeedEventType, GlassCard, type GlassCardProps, Input, KhalLogo, ListView, LiveFeed, type LiveFeedProps, MESH_GRADIENT_PALETTE, MeshGradientInner as MeshGradient, type MeshGradientProps, MetricDisplay, type MetricDisplayProps, Note, type NotificationUrgency, NumberFlow, type NumberFlowProps, PillBadge, type PillBadgeProps, ProgressBar, type ProgressBarProps, PropertyPanel, SectionCard, SectionCardHeader, type SectionCardProps, SectionHeader, Separator, SidebarNav, Spinner, SplitPane, StatusBadge, StatusBar, StatusDot, type StatusDotProps, type StatusState, TEXT_PRIMARY, TEXT_SECONDARY, TEXT_TERTIARY, ThemeProvider, ThemeSwitcher, TickerBar, type TickerBarProps, Toggle, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, type TrayIcon, WINDOW_RADIUS, WIN_BG, WIN_BORDER, WIN_BORDER_FOCUSED, WindowActiveProvider, WindowMinimizedProvider, badgeVariants, buttonVariants, cn, dataRowVariants, fadeIn, fadeUp, glassCardVariants, khalEasing, metricDisplayVariants, pillBadgeVariants, progressBarVariants, scaleUp, sectionCardVariants, springConfig, staggerChild, staggerContainer, stateConfig, useNotificationStore, useReducedMotion, useSidebar, useThemeStore, useWindowActive, useWindowMinimized };
+export { ACCENT_BLUE, type AppComponentProps, Avatar, type AvatarProps, BUTTON_RADIUS, Badge, Button, type ButtonProps, CELL_BG, CHROME_BG, CollapsibleSidebar, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CostCounter, type CostCounterProps, DataRow, type DataRowProps, type DesktopNotifMode, type DesktopNotification, Dialog, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type FeedEvent, type FeedEventType, GlassCard, type GlassCardProps, Input, KHAL_ACCENT, KHAL_ACCENT_BLUE, KHAL_BG, KHAL_BORDER, KHAL_BORDER_STRONG, KHAL_CELL, KHAL_CHROME, KHAL_CSS_VARS, KHAL_FG, KHAL_FONT_BODY, KHAL_FONT_DISPLAY, KHAL_FONT_MONO, KHAL_MOTION_DURATION_MS, KHAL_MOTION_EASE, KHAL_MUTED, KHAL_RADIUS, KHAL_RADIUS_LG, KHAL_SURFACE, KHAL_SURFACE_LIGHT, KHAL_TERTIARY, KHAL_TOKENS, KhalLogo, type KhalTokens, ListView, LiveFeed, type LiveFeedProps, MESH_GRADIENT_PALETTE, MeshGradientInner as MeshGradient, type MeshGradientProps, MetricDisplay, type MetricDisplayProps, Note, type NotificationUrgency, NumberFlow, type NumberFlowProps, PillBadge, type PillBadgeProps, ProgressBar, type ProgressBarProps, PropertyPanel, SectionCard, SectionCardHeader, type SectionCardProps, SectionHeader, Separator, SidebarNav, Spinner, SplitPane, StatusBadge, StatusBar, StatusDot, type StatusDotProps, type StatusState, TEXT_PRIMARY, TEXT_SECONDARY, TEXT_TERTIARY, ThemeProvider, ThemeSwitcher, TickerBar, type TickerBarProps, Toggle, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, type TrayIcon, WINDOW_RADIUS, WIN_BG, WIN_BORDER, WIN_BORDER_FOCUSED, WindowActiveProvider, WindowMinimizedProvider, badgeVariants, buttonVariants, cn, dataRowVariants, fadeIn, fadeUp, glassCardVariants, khalEasing, metricDisplayVariants, pillBadgeVariants, progressBarVariants, scaleUp, sectionCardVariants, springConfig, staggerChild, staggerContainer, stateConfig, useNotificationStore, useReducedMotion, useSidebar, useThemeStore, useWindowActive, useWindowMinimized };

package/dist/index.js

@@ -2366,6 +2366,70 @@ var useNotificationStore = create2()((set, get) => ({
   }
 }));
 
+// src/tokens/khal-os-tokens.ts
+var KHAL_BG = "oklch(14.48% 0.0000 89.88)";
+var KHAL_SURFACE = "oklch(18.69% 0.0107 268.11)";
+var KHAL_FG = "oklch(93.72% 0.0084 271.33)";
+var KHAL_MUTED = "oklch(66.06% 0.0293 269.51)";
+var KHAL_BORDER = "oklch(25.72% 0.0257 268.23)";
+var KHAL_ACCENT = "oklch(71.49% 0.1112 63.09)";
+var KHAL_CHROME = "oklch(16.86% 0.0110 268.03)";
+var KHAL_CELL = "oklch(17.33% 0.0154 266.68)";
+var KHAL_TERTIARY = "oklch(47.99% 0.0369 269.33)";
+var KHAL_BORDER_STRONG = "oklch(36.17% 0.0439 266.77)";
+var KHAL_ACCENT_BLUE = "oklch(55.73% 0.1910 256.76)";
+var KHAL_SURFACE_LIGHT = "oklch(95.99% 0.0079 73.74)";
+var KHAL_FONT_DISPLAY = '"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif';
+var KHAL_FONT_BODY = '"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif';
+var KHAL_FONT_MONO = '"Geist Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace';
+var KHAL_RADIUS = "10px";
+var KHAL_RADIUS_LG = "12px";
+var KHAL_MOTION_EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
+var KHAL_MOTION_DURATION_MS = 420;
+var KHAL_TOKENS = Object.freeze({
+  color: {
+    bg: KHAL_BG,
+    surface: KHAL_SURFACE,
+    fg: KHAL_FG,
+    muted: KHAL_MUTED,
+    border: KHAL_BORDER,
+    accent: KHAL_ACCENT,
+    chrome: KHAL_CHROME,
+    cell: KHAL_CELL,
+    tertiary: KHAL_TERTIARY,
+    borderStrong: KHAL_BORDER_STRONG,
+    accentBlue: KHAL_ACCENT_BLUE,
+    surfaceLight: KHAL_SURFACE_LIGHT
+  },
+  font: {
+    display: KHAL_FONT_DISPLAY,
+    body: KHAL_FONT_BODY,
+    mono: KHAL_FONT_MONO
+  },
+  radius: {
+    base: KHAL_RADIUS,
+    lg: KHAL_RADIUS_LG
+  },
+  motion: {
+    ease: KHAL_MOTION_EASE,
+    durationMs: KHAL_MOTION_DURATION_MS
+  }
+});
+var KHAL_CSS_VARS = Object.freeze({
+  bg: "--khal-bg",
+  surface: "--khal-surface",
+  fg: "--khal-fg",
+  muted: "--khal-muted",
+  border: "--khal-border",
+  accent: "--khal-accent",
+  chrome: "--khal-chrome",
+  cell: "--khal-cell",
+  tertiary: "--khal-tertiary",
+  borderStrong: "--khal-border-strong",
+  accentBlue: "--khal-accent-blue",
+  surfaceLight: "--khal-surface-light"
+});
+
 // src/tokens/lp-tokens.ts
 var WIN_BG = "#111318";
 var CHROME_BG = "#0D0F14";
@@ -2438,6 +2502,27 @@ export {
   EmptyState,
   GlassCard,
   Input,
+  KHAL_ACCENT,
+  KHAL_ACCENT_BLUE,
+  KHAL_BG,
+  KHAL_BORDER,
+  KHAL_BORDER_STRONG,
+  KHAL_CELL,
+  KHAL_CHROME,
+  KHAL_CSS_VARS,
+  KHAL_FG,
+  KHAL_FONT_BODY,
+  KHAL_FONT_DISPLAY,
+  KHAL_FONT_MONO,
+  KHAL_MOTION_DURATION_MS,
+  KHAL_MOTION_EASE,
+  KHAL_MUTED,
+  KHAL_RADIUS,
+  KHAL_RADIUS_LG,
+  KHAL_SURFACE,
+  KHAL_SURFACE_LIGHT,
+  KHAL_TERTIARY,
+  KHAL_TOKENS,
   KhalLogo,
   ListView,
   LiveFeed,