@khal-os/ui 1.0.0 → 1.0.2

package/dist/index.cjs

@@ -0,0 +1,2661 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ACCENT_BLUE: () => ACCENT_BLUE,
+  Avatar: () => Avatar,
+  BUTTON_RADIUS: () => BUTTON_RADIUS,
+  Badge: () => Badge,
+  Button: () => Button,
+  CELL_BG: () => CELL_BG,
+  CHROME_BG: () => CHROME_BG,
+  CollapsibleSidebar: () => CollapsibleSidebar,
+  Command: () => Command,
+  CommandDialog: () => CommandDialog,
+  CommandEmpty: () => CommandEmpty,
+  CommandGroup: () => CommandGroup,
+  CommandInput: () => CommandInput,
+  CommandItem: () => CommandItem,
+  CommandList: () => CommandList,
+  CommandSeparator: () => CommandSeparator,
+  CommandShortcut: () => CommandShortcut,
+  ContextMenu: () => ContextMenu,
+  ContextMenuContent: () => ContextMenuContent,
+  ContextMenuGroup: () => ContextMenuGroup,
+  ContextMenuItem: () => ContextMenuItem,
+  ContextMenuPortal: () => ContextMenuPortal,
+  ContextMenuRadioGroup: () => ContextMenuRadioGroup,
+  ContextMenuSeparator: () => ContextMenuSeparator,
+  ContextMenuSub: () => ContextMenuSub,
+  ContextMenuSubContent: () => ContextMenuSubContent,
+  ContextMenuSubTrigger: () => ContextMenuSubTrigger,
+  ContextMenuTrigger: () => ContextMenuTrigger,
+  CostCounter: () => CostCounter,
+  DataRow: () => DataRow,
+  Dialog: () => Dialog,
+  DropdownMenu: () => DropdownMenu,
+  DropdownMenuCheckboxItem: () => DropdownMenuCheckboxItem,
+  DropdownMenuContent: () => DropdownMenuContent,
+  DropdownMenuGroup: () => DropdownMenuGroup,
+  DropdownMenuItem: () => DropdownMenuItem,
+  DropdownMenuLabel: () => DropdownMenuLabel,
+  DropdownMenuPortal: () => DropdownMenuPortal,
+  DropdownMenuRadioGroup: () => DropdownMenuRadioGroup,
+  DropdownMenuRadioItem: () => DropdownMenuRadioItem,
+  DropdownMenuSeparator: () => DropdownMenuSeparator,
+  DropdownMenuShortcut: () => DropdownMenuShortcut,
+  DropdownMenuSub: () => DropdownMenuSub,
+  DropdownMenuSubContent: () => DropdownMenuSubContent,
+  DropdownMenuSubTrigger: () => DropdownMenuSubTrigger,
+  DropdownMenuTrigger: () => DropdownMenuTrigger,
+  EmptyState: () => EmptyState,
+  GlassCard: () => GlassCard,
+  Input: () => Input,
+  KhalLogo: () => KhalLogo,
+  ListView: () => ListView,
+  LiveFeed: () => LiveFeed,
+  MESH_GRADIENT_PALETTE: () => MESH_GRADIENT_PALETTE,
+  MeshGradient: () => MeshGradientInner,
+  MetricDisplay: () => MetricDisplay,
+  Note: () => Note,
+  NumberFlow: () => NumberFlow,
+  PillBadge: () => PillBadge,
+  ProgressBar: () => ProgressBar,
+  PropertyPanel: () => PropertyPanel,
+  SUBJECTS: () => import_app.SUBJECTS,
+  SectionCard: () => SectionCard,
+  SectionCardHeader: () => SectionCardHeader,
+  SectionHeader: () => SectionHeader,
+  Separator: () => Separator3,
+  SidebarNav: () => SidebarNav,
+  Spinner: () => Spinner,
+  SplitPane: () => SplitPane,
+  StatusBadge: () => StatusBadge,
+  StatusBar: () => StatusBar,
+  StatusDot: () => StatusDot,
+  TEXT_PRIMARY: () => TEXT_PRIMARY,
+  TEXT_SECONDARY: () => TEXT_SECONDARY,
+  TEXT_TERTIARY: () => TEXT_TERTIARY,
+  ThemeProvider: () => ThemeProvider,
+  ThemeSwitcher: () => ThemeSwitcher,
+  TickerBar: () => TickerBar,
+  Toggle: () => Toggle,
+  Toolbar: () => Toolbar,
+  Tooltip: () => Tooltip,
+  TooltipContent: () => TooltipContent,
+  TooltipProvider: () => TooltipProvider,
+  TooltipRoot: () => TooltipRoot,
+  TooltipTrigger: () => TooltipTrigger,
+  WINDOW_RADIUS: () => WINDOW_RADIUS,
+  WIN_BG: () => WIN_BG,
+  WIN_BORDER: () => WIN_BORDER,
+  WIN_BORDER_FOCUSED: () => WIN_BORDER_FOCUSED,
+  WindowActiveProvider: () => WindowActiveProvider,
+  WindowMinimizedProvider: () => WindowMinimizedProvider,
+  badgeVariants: () => badgeVariants,
+  buttonVariants: () => buttonVariants,
+  cn: () => cn,
+  dataRowVariants: () => dataRowVariants,
+  fadeIn: () => fadeIn,
+  fadeUp: () => fadeUp,
+  glassCardVariants: () => glassCardVariants,
+  khalEasing: () => khalEasing,
+  metricDisplayVariants: () => metricDisplayVariants,
+  pillBadgeVariants: () => pillBadgeVariants,
+  progressBarVariants: () => progressBarVariants,
+  scaleUp: () => scaleUp,
+  sectionCardVariants: () => sectionCardVariants,
+  springConfig: () => springConfig,
+  staggerChild: () => staggerChild,
+  staggerContainer: () => staggerContainer,
+  stateConfig: () => stateConfig,
+  useKhalAuth: () => import_app.useKhalAuth,
+  useNats: () => import_app.useNats,
+  useNatsSubscription: () => import_app.useNatsSubscription,
+  useNotificationStore: () => useNotificationStore,
+  useOSAuth: () => import_app.useKhalAuth,
+  useReducedMotion: () => useReducedMotion,
+  useSidebar: () => useSidebar,
+  useThemeStore: () => useThemeStore,
+  useWindowActive: () => useWindowActive,
+  useWindowMinimized: () => useWindowMinimized
+});
+module.exports = __toCommonJS(index_exports);
+var import_app = require("@khal-os/sdk/app");
+
+// src/components/avatar.tsx
+var React = __toESM(require("react"), 1);
+
+// src/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/status-dot.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var sizeMap = { sm: 8, md: 10, lg: 12 };
+var stateConfig = {
+  live: { color: "#22c55e", label: "Live", pulse: true },
+  online: { color: "#22c55e", label: "Online", pulse: false },
+  active: { color: "#22c55e", label: "Active", pulse: true },
+  working: { color: "#f59e0b", label: "Working", pulse: true },
+  idle: { color: "#64748b", label: "Idle", pulse: false },
+  away: { color: "#64748b", label: "Away", pulse: false },
+  queued: { color: "#f59e0b", label: "Queued", pulse: false },
+  error: { color: "#ef4444", label: "Error", pulse: true }
+};
+function StatusDot({
+  state,
+  color: colorProp,
+  pulse: pulseProp,
+  size = "md",
+  label: labelProp,
+  showLabel = false,
+  className,
+  style,
+  ...props
+}) {
+  const config = state ? stateConfig[state] : null;
+  const color = colorProp ?? config?.color ?? "#64748b";
+  const pulse = pulseProp ?? config?.pulse ?? false;
+  const label = labelProp ?? config?.label;
+  const px = sizeMap[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "span",
+    {
+      role: "status",
+      "aria-label": label,
+      className: cn("relative inline-flex shrink-0 items-center gap-1.5", className),
+      style,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "relative inline-flex shrink-0", style: { width: px, height: px }, children: [
+          pulse && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              className: "absolute -inset-0.5 rounded-full",
+              style: {
+                backgroundColor: color,
+                opacity: 0.35,
+                animation: "khal-pulse 2s ease-in-out infinite"
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              className: "absolute inset-0 rounded-full",
+              style: {
+                backgroundColor: color,
+                boxShadow: pulse ? `0 0 ${px}px ${color}80` : void 0
+              }
+            }
+          )
+        ] }),
+        showLabel && label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[11px] leading-none", style: { color }, children: label })
+      ]
+    }
+  );
+}
+
+// src/components/avatar.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var sizeMap2 = { sm: 24, md: 32, lg: 40 };
+var fontSizeMap = { sm: "10px", md: "12px", lg: "14px" };
+var statusColorMap = {
+  online: "var(--khal-status-live)",
+  idle: "var(--khal-status-warning)",
+  away: "var(--khal-status-idle)"
+};
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length >= 2) {
+    return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+  }
+  return name.charAt(0).toUpperCase();
+}
+var Avatar = React.forwardRef(
+  ({ name, size = "md", status, src, className, style, ...props }, ref) => {
+    const px = sizeMap2[size];
+    const [imgError, setImgError] = React.useState(false);
+    const showImage = src && !imgError;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "div",
+      {
+        ref,
+        className: cn("relative inline-flex shrink-0", className),
+        style: { width: px, height: px, ...style },
+        ...props,
+        children: [
+          showImage ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "img",
+            {
+              src,
+              alt: name,
+              className: "h-full w-full rounded-full object-cover",
+              onError: () => setImgError(true)
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "div",
+            {
+              className: "flex h-full w-full select-none items-center justify-center rounded-full border font-medium [background:var(--khal-surface-raised)] [border-color:var(--khal-border-subtle)]",
+              style: { fontSize: fontSizeMap[size] },
+              children: getInitials(name)
+            }
+          ),
+          status && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "absolute -bottom-px -right-px", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StatusDot, { color: statusColorMap[status], size: "sm", label: status, pulse: status === "online" }) })
+        ]
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+
+// src/components/badge.tsx
+var import_class_variance_authority = require("class-variance-authority");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var badgeVariants = (0, import_class_variance_authority.cva)(
+  "inline-flex items-center rounded-full border font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-blue-700 focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        gray: "border-gray-alpha-400 bg-gray-100 text-gray-900",
+        blue: "border-blue-300 bg-blue-100 text-blue-900",
+        green: "border-green-300 bg-green-100 text-green-900",
+        amber: "border-amber-300 bg-amber-100 text-amber-900",
+        red: "border-red-300 bg-red-100 text-red-900",
+        purple: "border-purple-300 bg-purple-100 text-purple-900",
+        pink: "border-pink-300 bg-pink-100 text-pink-900",
+        teal: "border-teal-300 bg-teal-100 text-teal-900"
+      },
+      size: {
+        sm: "px-2 py-0 text-[11px] leading-[18px]",
+        md: "px-2.5 py-0.5 text-[12px] leading-[18px]"
+      }
+    },
+    defaultVariants: {
+      variant: "gray",
+      size: "md"
+    }
+  }
+);
+function Badge({ className, variant, size, contrast, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cn(badgeVariants({ variant, size }), className), ...props });
+}
+
+// src/components/button.tsx
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority2 = require("class-variance-authority");
+var React2 = __toESM(require("react"), 1);
+
+// src/components/spinner.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var sizeMap3 = {
+  sm: 16,
+  md: 20,
+  lg: 24
+};
+function Spinner({ size = "md", className, ...props }) {
+  const px = sizeMap3[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      role: "status",
+      "aria-label": "Loading",
+      className: cn("inline-flex items-center justify-center", className),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: px, height: px, viewBox: "0 0 20 20", fill: "none", className: "animate-spin", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", opacity: "0.25" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "circle",
+          {
+            cx: "10",
+            cy: "10",
+            r: "8",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeDasharray: "50.26",
+            strokeDashoffset: "37.7"
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/components/button.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority2.cva)(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--khal-radius-button,10px)] text-copy-13 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--khal-accent-primary)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: "bg-gray-1000 text-white [color:white] dark:text-black dark:[color:black] hover:bg-gray-900",
+        secondary: "bg-background-100 text-gray-1000 border border-gray-alpha-400 hover:bg-gray-alpha-100",
+        tertiary: "bg-transparent text-gray-1000 hover:bg-gray-alpha-200",
+        error: "bg-red-700 text-white [color:white] hover:bg-red-600",
+        warning: "bg-amber-700 text-white [color:white] hover:bg-amber-600",
+        ghost: "hover:bg-gray-alpha-200 text-gray-1000",
+        link: "text-blue-700 underline-offset-4 hover:underline"
+      },
+      size: {
+        small: "h-8 px-3 text-copy-13",
+        medium: "h-9 px-4 text-copy-13",
+        large: "h-10 px-5 text-copy-14",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "medium"
+    }
+  }
+);
+var Button = React2.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    asChild = false,
+    loading = false,
+    prefix,
+    suffix,
+    typeName,
+    type,
+    disabled,
+    children,
+    ...props
+  }, ref) => {
+    let resolvedVariant = variant;
+    if (!resolvedVariant && type) {
+      if (type === "invert") resolvedVariant = "default";
+      else if (type === "shadow") resolvedVariant = "secondary";
+      else if (type === "unstyled") resolvedVariant = "ghost";
+    }
+    const Comp = asChild ? import_react_slot.Slot : "button";
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant: resolvedVariant, size, className })),
+        ref,
+        type: typeName ?? "button",
+        disabled: disabled || loading,
+        ...props,
+        children: loading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Spinner, { size: "sm" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+          prefix && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "inline-flex shrink-0", children: prefix }),
+          children,
+          suffix && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "inline-flex shrink-0", children: suffix })
+        ] })
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/ContextMenu.tsx
+var ContextMenuPrimitive = __toESM(require("@radix-ui/react-context-menu"), 1);
+var React3 = __toESM(require("react"), 1);
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ContextMenu = ContextMenuPrimitive.Root;
+var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+var ContextMenuGroup = ContextMenuPrimitive.Group;
+var ContextMenuPortal = ContextMenuPrimitive.Portal;
+var ContextMenuSub = ContextMenuPrimitive.Sub;
+var ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+var ContextMenuSubTrigger = React3.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  ContextMenuPrimitive.SubTrigger,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-copy-13 outline-none select-none",
+      "focus:bg-[var(--khal-menu-hover)]",
+      "data-[state=open]:bg-[var(--khal-menu-hover)]",
+      inset && "pl-8",
+      className
+    ),
+    style: { color: "var(--khal-text-primary)" },
+    ...props,
+    children
+  }
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+var ContextMenuSubContent = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  ContextMenuPrimitive.SubContent,
+  {
+    ref,
+    className: cn(
+      "z-[9999] min-w-[8rem] overflow-hidden rounded-xl p-1",
+      "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+      className
+    ),
+    style: {
+      background: "var(--khal-menu-bg)",
+      border: "1px solid var(--khal-menu-border)",
+      boxShadow: "var(--khal-menu-shadow)",
+      color: "var(--khal-text-primary)"
+    },
+    ...props
+  }
+));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+var ContextMenuContent = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  ContextMenuPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "z-[9999] min-w-[8rem] overflow-hidden rounded-xl p-1",
+      "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+      className
+    ),
+    style: {
+      background: "var(--khal-menu-bg)",
+      border: "1px solid var(--khal-menu-border)",
+      boxShadow: "var(--khal-menu-shadow)",
+      color: "var(--khal-text-primary)"
+    },
+    ...props
+  }
+) }));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+var ContextMenuItem = React3.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  ContextMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default items-center gap-2 rounded-lg px-2 py-1.5 text-copy-13 outline-none select-none transition-colors",
+      "focus:bg-[var(--khal-menu-hover)]",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    ),
+    style: { color: "var(--khal-text-primary)" },
+    ...props
+  }
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+var ContextMenuSeparator = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  ContextMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px", className),
+    style: { background: "var(--khal-border-default)" },
+    ...props
+  }
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+
+// src/components/command.tsx
+var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
+var import_cmdk = require("cmdk");
+var import_lucide_react = require("lucide-react");
+var React4 = __toESM(require("react"), 1);
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Command = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  import_cmdk.Command,
+  {
+    ref,
+    className: cn("flex h-full w-full flex-col overflow-hidden rounded-xl bg-background-100 text-gray-1000", className),
+    ...props
+  }
+));
+Command.displayName = import_cmdk.Command.displayName;
+function CommandDialog({
+  children,
+  open,
+  onOpenChange,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogPrimitive.Root, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(DialogPrimitive.Portal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      DialogPrimitive.Overlay,
+      {
+        className: "fixed inset-0 z-[9999] bg-black/40 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+        "cmdk-overlay": ""
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      DialogPrimitive.Content,
+      {
+        className: "fixed left-[50%] top-[20%] z-[9999] w-full max-w-lg translate-x-[-50%] overflow-hidden rounded-xl shadow-lg",
+        style: {
+          background: "var(--khal-menu-bg)",
+          border: "1px solid var(--khal-menu-border)",
+          boxShadow: "var(--khal-menu-shadow)",
+          backdropFilter: "blur(24px)",
+          WebkitBackdropFilter: "blur(24px)"
+        },
+        "cmdk-dialog": "",
+        "aria-describedby": void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DialogPrimitive.Title, { className: "sr-only", children: "Command palette" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            Command,
+            {
+              className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-gray-700 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3",
+              ...props,
+              children
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
+}
+var CommandInput = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  "div",
+  {
+    className: "flex items-center px-3",
+    style: { borderBottom: "1px solid var(--khal-border-default)" },
+    "cmdk-input-wrapper": "",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        import_cmdk.Command.Input,
+        {
+          ref,
+          className: cn(
+            "flex h-10 w-full rounded-md bg-transparent py-3 text-copy-13 outline-none",
+            "placeholder:text-gray-700",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          ),
+          ...props
+        }
+      )
+    ]
+  }
+));
+CommandInput.displayName = import_cmdk.Command.Input.displayName;
+var CommandList = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  import_cmdk.Command.List,
+  {
+    ref,
+    className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
+    ...props
+  }
+));
+CommandList.displayName = import_cmdk.Command.List.displayName;
+var CommandEmpty = React4.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_cmdk.Command.Empty, { ref, className: "py-6 text-center text-copy-13 text-gray-700", ...props }));
+CommandEmpty.displayName = import_cmdk.Command.Empty.displayName;
+var CommandGroup = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  import_cmdk.Command.Group,
+  {
+    ref,
+    className: cn(
+      "overflow-hidden p-1 text-gray-1000",
+      "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-label-12 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-gray-700",
+      className
+    ),
+    ...props
+  }
+));
+CommandGroup.displayName = import_cmdk.Command.Group.displayName;
+var CommandSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_cmdk.Command.Separator, { ref, className: cn("-mx-1 h-px bg-gray-alpha-400", className), ...props }));
+CommandSeparator.displayName = import_cmdk.Command.Separator.displayName;
+var CommandItem = React4.forwardRef(({ className, prefix, callback, onSelect, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  import_cmdk.Command.Item,
+  {
+    ref,
+    onSelect: onSelect ?? callback,
+    className: cn(
+      "relative flex cursor-default items-center gap-2 rounded-lg px-2 py-1.5 text-copy-13 outline-none select-none",
+      "data-[selected=true]:text-gray-1000",
+      "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      prefix && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "inline-flex shrink-0", children: prefix }),
+      children
+    ]
+  }
+));
+CommandItem.displayName = import_cmdk.Command.Item.displayName;
+var CommandShortcut = ({ className, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: cn("ml-auto text-label-12 tracking-widest text-gray-700", className), ...props });
+};
+
+// src/components/cost-counter.tsx
+var import_react2 = require("motion/react");
+var import_react3 = require("react");
+
+// src/components/number-flow.tsx
+var import_react = __toESM(require("@number-flow/react"), 1);
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function NumberFlow({ transformTiming, spinTiming, opacityTiming, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_react.default,
+    {
+      transformTiming: transformTiming ?? { duration: 800, easing: "cubic-bezier(0.34, 1.56, 0.64, 1)" },
+      spinTiming: spinTiming ?? { duration: 800, easing: "cubic-bezier(0.34, 1.56, 0.64, 1)" },
+      opacityTiming: opacityTiming ?? { duration: 350, easing: "ease-out" },
+      willChange: true,
+      ...props
+    }
+  );
+}
+
+// src/components/cost-counter.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function CostCounter({ value, suffix, prefix, label, description, budget, budgetColor, className }) {
+  const [displayed, setDisplayed] = (0, import_react3.useState)(0);
+  const triggered = (0, import_react3.useRef)(false);
+  const barRef = (0, import_react3.useRef)(null);
+  const barInView = (0, import_react2.useInView)(barRef, { once: true, amount: 0.6 });
+  const handleViewport = (0, import_react3.useCallback)(() => {
+    if (!triggered.current) {
+      triggered.current = true;
+      setDisplayed(value);
+    }
+  }, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    import_react2.motion.div,
+    {
+      onViewportEnter: handleViewport,
+      viewport: { once: true, amount: 0.5 },
+      className: cn("flex flex-col gap-3", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          "div",
+          {
+            className: "flex items-baseline tabular-nums font-semibold tracking-tight leading-none",
+            style: { fontFamily: "var(--font-display, var(--font-geist-sans))" },
+            children: [
+              prefix && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-[0.7em]", children: prefix }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(NumberFlow, { value: displayed }),
+              suffix && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-[0.65em] ml-0.5 opacity-70", children: suffix })
+            ]
+          }
+        ),
+        budget != null && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: barRef, className: "w-full h-2 rounded-full overflow-hidden bg-[var(--ds-gray-alpha-200)]", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_react2.motion.div,
+          {
+            initial: { width: 0 },
+            animate: barInView ? { width: `${Math.min(budget, 100)}%` } : { width: 0 },
+            transition: { duration: 1, ease: [0.22, 1, 0.36, 1], delay: 0.15 },
+            className: "h-full rounded-full",
+            style: { backgroundColor: budgetColor ?? "var(--ds-accent-warm)" }
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm font-medium leading-5", children: label }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs opacity-50 leading-4", children: description })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/data-row.tsx
+var import_class_variance_authority3 = require("class-variance-authority");
+var React5 = __toESM(require("react"), 1);
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var dataRowVariants = (0, import_class_variance_authority3.cva)("flex items-center gap-3 rounded-lg border border-[#FFFFFF14] font-mono", {
+  variants: {
+    variant: {
+      /** Standard data row — subtle bg */
+      default: "bg-[#FFFFFF08] py-2.5 px-3",
+      /** Inline/compact — for observability-style data */
+      inline: "bg-[#FFFFFF06] py-1.5 px-2.5 text-[11px]",
+      /** Nested rule row — for indented rule displays */
+      rule: "bg-[#FFFFFF05] py-2.5 px-3"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var DataRow = React5.forwardRef(
+  ({ className, variant, label, value, accentColor, statusDot, dotColor, tag, tagColor, children, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { ref, className: cn(dataRowVariants({ variant }), className), ...props, children: [
+      statusDot && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "size-[6px] shrink-0 rounded-full", style: { backgroundColor: dotColor || "#FFFFFF40" } }),
+      tag && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "span",
+        {
+          className: "shrink-0 rounded py-0.5 px-2 text-[10px] font-bold uppercase tracking-wide leading-3.5",
+          style: {
+            color: tagColor || "var(--color-accent, #D49355)",
+            backgroundColor: tagColor ? `color-mix(in srgb, ${tagColor} 10%, transparent)` : "rgba(var(--color-accent-rgb, 212,147,85), 0.1)"
+          },
+          children: tag
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[12px] text-[#FFFFFFCC] leading-4 min-w-0 truncate", children: label }),
+      (value || children) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "grow" }),
+      value && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[12px] leading-4 tabular-nums shrink-0", style: { color: accentColor || "#FFFFFF99" }, children: value }),
+      children
+    ] });
+  }
+);
+DataRow.displayName = "DataRow";
+
+// src/components/dropdown-menu.tsx
+var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
+var React6 = __toESM(require("react"), 1);
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuGroup = DropdownMenuPrimitive.Group;
+var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+var DropdownMenuSub = DropdownMenuPrimitive.Sub;
+var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+var DropdownMenuSubTrigger = React6.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  DropdownMenuPrimitive.SubTrigger,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-copy-13 outline-none select-none",
+      "focus:bg-[var(--khal-menu-hover)]",
+      "data-[state=open]:bg-[var(--khal-menu-hover)]",
+      inset && "pl-8",
+      className
+    ),
+    style: { color: "var(--khal-text-primary)" },
+    ...props,
+    children
+  }
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+var DropdownMenuSubContent = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  DropdownMenuPrimitive.SubContent,
+  {
+    ref,
+    className: cn(
+      "z-[9999] min-w-[8rem] overflow-hidden rounded-xl p-1",
+      "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    style: {
+      background: "var(--khal-menu-bg)",
+      border: "1px solid var(--khal-menu-border)",
+      boxShadow: "var(--khal-menu-shadow)",
+      color: "var(--khal-text-primary)"
+    },
+    ...props
+  }
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+var DropdownMenuContent = React6.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  DropdownMenuPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-[9999] min-w-[8rem] overflow-hidden rounded-xl p-1",
+      "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    style: {
+      background: "var(--khal-menu-bg)",
+      border: "1px solid var(--khal-menu-border)",
+      boxShadow: "var(--khal-menu-shadow)",
+      color: "var(--khal-text-primary)"
+    },
+    ...props
+  }
+) }));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+var DropdownMenuItem = React6.forwardRef(({ className, inset, prefix, suffix, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default items-center gap-2 rounded-lg px-2 py-1.5 text-copy-13 outline-none select-none transition-colors",
+      "focus:bg-[var(--khal-menu-hover)]",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    ),
+    style: { color: "var(--khal-text-primary)" },
+    ...props,
+    children: [
+      prefix && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "inline-flex shrink-0", children: prefix }),
+      children,
+      suffix && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ml-auto inline-flex shrink-0", style: { color: "var(--khal-text-muted)" }, children: suffix })
+    ]
+  }
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+var DropdownMenuCheckboxItem = React6.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  DropdownMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default items-center rounded-lg py-1.5 pl-8 pr-2 text-copy-13 outline-none select-none transition-colors",
+      "focus:bg-[var(--khal-menu-hover)]",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    style: { color: "var(--khal-text-primary)" },
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "path",
+        {
+          d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3354 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.5553 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
+          fill: "currentColor",
+          fillRule: "evenodd",
+          clipRule: "evenodd"
+        }
+      ) }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+var DropdownMenuRadioItem = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  DropdownMenuPrimitive.RadioItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default items-center rounded-lg py-1.5 pl-8 pr-2 text-copy-13 outline-none select-none transition-colors",
+      "focus:bg-[var(--khal-menu-hover)]",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    style: { color: "var(--khal-text-primary)" },
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "4", cy: "4", r: "4", fill: "currentColor" }) }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+var DropdownMenuLabel = React6.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  DropdownMenuPrimitive.Label,
+  {
+    ref,
+    className: cn("px-2 py-1.5 text-label-12 font-semibold", inset && "pl-8", className),
+    style: { color: "var(--khal-text-secondary)" },
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+var DropdownMenuSeparator = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px", className),
+    style: { background: "var(--khal-border-default)" },
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+var DropdownMenuShortcut = ({ className, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "span",
+    {
+      className: cn("ml-auto text-label-12 tracking-widest", className),
+      style: { color: "var(--khal-text-muted)" },
+      ...props
+    }
+  );
+};
+
+// src/components/glass-card.tsx
+var import_class_variance_authority4 = require("class-variance-authority");
+var React7 = __toESM(require("react"), 1);
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var glassCardVariants = (0, import_class_variance_authority4.cva)(
+  "relative overflow-hidden border transition-all [background:var(--khal-glass-tint)] [border-color:var(--khal-glass-border)]",
+  {
+    variants: {
+      variant: {
+        default: "[box-shadow:var(--khal-shadow-sm)]",
+        raised: "[box-shadow:var(--khal-shadow-md)]"
+      },
+      padding: {
+        sm: "p-3",
+        md: "p-4",
+        lg: "p-6"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      padding: "md"
+    }
+  }
+);
+var GlassCard = React7.forwardRef(
+  ({ className, variant, padding, hover = false, glow, style, children, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      "div",
+      {
+        ref,
+        className: cn(
+          glassCardVariants({ variant, padding }),
+          hover && [
+            "cursor-pointer",
+            "hover:-translate-y-0.5",
+            "hover:[border-color:var(--khal-border-strong)]",
+            "hover:[box-shadow:var(--khal-shadow-lg)]"
+          ],
+          className
+        ),
+        style: {
+          backdropFilter: "var(--khal-glass-filter)",
+          WebkitBackdropFilter: "var(--khal-glass-filter)",
+          borderRadius: "var(--khal-radius-xl)",
+          transitionTimingFunction: "var(--khal-ease-spring)",
+          transitionDuration: "var(--khal-duration-normal)",
+          ...style
+        },
+        ...props,
+        children: [
+          glow && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "div",
+            {
+              className: "pointer-events-none absolute inset-0 rounded-[inherit]",
+              style: {
+                background: `radial-gradient(ellipse at 50% 0%, color-mix(in srgb, ${glow} 20%, transparent), transparent 70%)`
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "relative", children })
+        ]
+      }
+    );
+  }
+);
+GlassCard.displayName = "GlassCard";
+
+// src/components/input.tsx
+var React8 = __toESM(require("react"), 1);
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Input = React8.forwardRef(
+  ({ className, label, size, typeName, type, ...props }, ref) => {
+    const input = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "input",
+      {
+        type: typeName ?? type,
+        className: cn(
+          "flex w-full rounded-md border border-gray-alpha-400 bg-background-100 px-3 text-copy-13 text-gray-1000 transition-colors",
+          "file:border-0 file:bg-transparent file:text-sm file:font-medium",
+          "placeholder:text-gray-700",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-700 focus-visible:ring-offset-1",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          size === "small" ? "h-8" : size === "large" ? "h-11" : "h-9",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+    if (label) {
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { className: "text-label-13 text-gray-900", children: label }),
+        input
+      ] });
+    }
+    return input;
+  }
+);
+Input.displayName = "Input";
+
+// src/components/khal-logo.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function KhalLogo({ size = 20, variant = "light", className }) {
+  const color = variant === "light" ? "#FFFFFF" : "#0A0A0A";
+  const showFull = size >= 20;
+  if (!showFull) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "svg",
+      {
+        viewBox: "0 0 156 155",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        width: size,
+        height: size,
+        className,
+        "aria-label": "K",
+        style: { color },
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "path",
+          {
+            d: "M0 0H27.4425V65.9519H71.7054L122.829 0H155.362L95.3869 76.1317L164.657 154.92H128.805L72.5913 92.2878H27.4425V154.92H0V0Z",
+            fill: "currentColor"
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "svg",
+    {
+      viewBox: "0 0 756 155",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size * (756 / 155),
+      height: size,
+      className,
+      "aria-label": "khal",
+      style: { color },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("g", { clipPath: "url(#khal-logo-clip)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "path",
+            {
+              d: "M616.81 0H644.252V128.584H765.533V154.92H638.499C635.4 154.92 632.524 154.33 629.867 153.149C627.211 151.969 624.924 150.42 623.007 148.502C621.088 146.584 619.539 144.371 618.359 141.863C617.326 139.206 616.81 136.403 616.81 133.453V0Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "path",
+            {
+              d: "M443.058 21.2467C445.123 14.4594 448.295 9.22105 452.573 5.53287C456.853 1.8447 462.533 0 469.616 0H519.632C527.009 0 532.911 1.91744 537.337 5.75467C541.763 9.44285 545.009 14.6072 547.076 21.2467L589.125 154.92H560.133L546.411 110.657H461.87L468.73 84.3212H538.665L521.181 26.3359H468.951L430 154.92H400.786L443.058 21.2467Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "path",
+            {
+              d: "M190.123 0H217.565V62.6322H344.6V0H372.043V154.92H344.6V88.9681H217.565V154.92H190.123V0Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "path",
+            {
+              d: "M0 0H27.4425V65.9519H71.7054L122.829 0H155.362L95.3869 76.1317L164.657 154.92H128.805L72.5913 92.2878H27.4425V154.92H0V0Z",
+              fill: "currentColor"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("clipPath", { id: "khal-logo-clip", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("rect", { width: "756", height: "155", fill: "white" }) }) })
+      ]
+    }
+  );
+}
+
+// src/components/live-feed.tsx
+var import_react4 = require("motion/react");
+var import_react5 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var typeColors = {
+  info: "var(--ds-blue-600)",
+  success: "var(--ds-green-600)",
+  warning: "var(--ds-amber-600)",
+  error: "var(--ds-red-600)",
+  agent: "var(--ds-purple-600)",
+  system: "var(--ds-gray-600)"
+};
+function LiveFeed({
+  events: externalEvents,
+  maxVisible = 50,
+  showTimestamps = true,
+  height = 300,
+  className
+}) {
+  const [events, setEvents] = (0, import_react5.useState)(externalEvents ?? []);
+  const scrollRef = (0, import_react5.useRef)(null);
+  const isAtBottom = (0, import_react5.useRef)(true);
+  (0, import_react5.useEffect)(() => {
+    if (externalEvents) {
+      setEvents((prev) => {
+        const combined = [...prev, ...externalEvents.filter((e) => !prev.some((p) => p.id === e.id))];
+        return combined.slice(-maxVisible);
+      });
+    }
+  }, [externalEvents, maxVisible]);
+  (0, import_react5.useEffect)(() => {
+    const el = scrollRef.current;
+    if (el && isAtBottom.current) {
+      el.scrollTop = el.scrollHeight;
+    }
+  }, [events]);
+  const handleScroll = (0, import_react5.useCallback)(() => {
+    const el = scrollRef.current;
+    if (el) {
+      isAtBottom.current = el.scrollHeight - el.scrollTop - el.clientHeight < 24;
+    }
+  }, []);
+  const formatTime = (d) => d.toLocaleTimeString("en-US", { hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit" });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "div",
+    {
+      ref: scrollRef,
+      onScroll: handleScroll,
+      className: cn("overflow-y-auto overflow-x-hidden font-mono text-xs leading-5 scrollbar-thin", className),
+      style: { height },
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react4.AnimatePresence, { initial: false, children: events.map((event) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        import_react4.motion.div,
+        {
+          initial: { opacity: 0, height: 0 },
+          animate: { opacity: 1, height: "auto" },
+          exit: { opacity: 0, height: 0 },
+          transition: { duration: 0.25, ease: [0.22, 1, 0.36, 1] },
+          className: "flex gap-2 px-2 py-0.5 hover:bg-[var(--ds-gray-alpha-100)]",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              "span",
+              {
+                className: "inline-block w-1.5 h-1.5 rounded-full mt-1.5 shrink-0",
+                style: { backgroundColor: typeColors[event.type] }
+              }
+            ),
+            showTimestamps && event.timestamp && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "shrink-0 opacity-40 tabular-nums", children: formatTime(event.timestamp) }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "opacity-80 break-words min-w-0", children: event.message })
+          ]
+        },
+        event.id
+      )) })
+    }
+  );
+}
+
+// src/components/mesh-gradient.tsx
+var import_react7 = require("react");
+
+// src/hooks/useReducedMotion.ts
+var import_react6 = require("react");
+function useReducedMotion() {
+  const [reduced, setReduced] = (0, import_react6.useState)(false);
+  (0, import_react6.useEffect)(() => {
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReduced(mq.matches || document.documentElement.dataset.reduceMotion === "true");
+    const handler = (e) => setReduced(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  return reduced;
+}
+
+// src/components/mesh-gradient.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var MeshGradientShader = (0, import_react7.lazy)(() => import("@paper-design/shaders-react").then((m) => ({ default: m.MeshGradient })));
+function StaticFallback({ colors }) {
+  const bg = colors.length >= 2 ? `linear-gradient(135deg, ${colors[0]} 0%, ${colors[Math.floor(colors.length / 2)]} 50%, ${colors[colors.length - 1]} 100%)` : colors[0] ?? "#0A0A0A";
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { width: "100%", height: "100%", background: bg } });
+}
+function MeshGradientInner({ colors, speed = 0.02, className, style }) {
+  const ref = (0, import_react7.useRef)(null);
+  const [visible, setVisible] = (0, import_react7.useState)(false);
+  const reducedMotion = useReducedMotion();
+  (0, import_react7.useEffect)(() => {
+    const el = ref.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(([entry]) => setVisible(entry.isIntersecting), {
+      rootMargin: "100px"
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref, className, style: { position: "absolute", inset: 0, ...style }, children: visible && !reducedMotion ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react7.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StaticFallback, { colors }), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MeshGradientShader, { colors, speed, style: { width: "100%", height: "100%" } }) }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StaticFallback, { colors }) });
+}
+
+// src/components/metric-display.tsx
+var import_class_variance_authority5 = require("class-variance-authority");
+var React9 = __toESM(require("react"), 1);
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var metricDisplayVariants = (0, import_class_variance_authority5.cva)("flex flex-col", {
+  variants: {
+    size: {
+      /** Compact — for inline/tile use (architecture mockup metric tiles) */
+      sm: "gap-1",
+      /** Standard — for dashboard displays */
+      md: "gap-1.5",
+      /** Large — hero stat cards (metrics.tsx) */
+      lg: "gap-2"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var valueSizeMap = {
+  sm: "text-[22px] font-semibold leading-7 tracking-tight",
+  md: "text-[28px] font-semibold leading-8 tracking-[-0.02em]",
+  lg: "text-[36px] sm:text-[44px] font-semibold leading-none tracking-[-0.04em]"
+};
+var labelSizeMap = {
+  sm: "text-[11px] uppercase tracking-[0.06em] text-[#FFFFFF80] font-medium leading-3.5",
+  md: "text-[13px] text-[#FFFFFFCC] font-medium leading-4",
+  lg: "text-[15px] text-[#FFFFFFCC] font-medium leading-5"
+};
+var MetricDisplay = React9.forwardRef(
+  ({ className, size = "md", value, label, description, prefix, suffix, accentColor, ...props }, ref) => {
+    const resolvedSize = size ?? "md";
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { ref, className: cn(metricDisplayVariants({ size }), className), ...props, children: [
+      resolvedSize === "sm" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: labelSizeMap[resolvedSize], children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        "div",
+        {
+          className: cn(valueSizeMap[resolvedSize], "tabular-nums"),
+          style: accentColor ? { color: accentColor } : void 0,
+          children: [
+            prefix && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: prefix }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: value }),
+            suffix && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: resolvedSize === "lg" ? "text-[32px] tracking-[-0.02em] ml-0.5" : "ml-0.5", children: suffix })
+          ]
+        }
+      ),
+      resolvedSize !== "sm" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: labelSizeMap[resolvedSize], children: label }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-[13px] text-[#FFFFFF80] leading-4", children: description })
+    ] });
+  }
+);
+MetricDisplay.displayName = "MetricDisplay";
+
+// src/components/note.tsx
+var import_class_variance_authority6 = require("class-variance-authority");
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var noteVariants = (0, import_class_variance_authority6.cva)("flex items-start gap-2 rounded-md border p-3 text-copy-13", {
+  variants: {
+    type: {
+      default: "border-gray-alpha-400 bg-gray-alpha-100 text-gray-900",
+      error: "border-red-300 bg-red-100 text-red-900",
+      warning: "border-amber-300 bg-amber-100 text-amber-900",
+      success: "border-green-300 bg-green-100 text-green-900"
+    },
+    size: {
+      default: "p-3",
+      small: "p-2 text-label-12"
+    }
+  },
+  defaultVariants: {
+    type: "default",
+    size: "default"
+  }
+});
+var iconMap = {
+  default: import_lucide_react2.Info,
+  error: import_lucide_react2.AlertCircle,
+  warning: import_lucide_react2.AlertTriangle,
+  success: import_lucide_react2.CheckCircle
+};
+function Note({ className, type = "default", size, label, action, children, ...props }) {
+  const Icon2 = iconMap[type];
+  const showLabel = label !== false;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cn(noteVariants({ type, size }), className), role: "alert", ...props, children: [
+    showLabel && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon2, { className: "h-4 w-4 shrink-0 mt-0.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex-1 min-w-0", children }),
+    action && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "shrink-0", children: action })
+  ] });
+}
+
+// src/components/pill-badge.tsx
+var import_class_variance_authority7 = require("class-variance-authority");
+var React10 = __toESM(require("react"), 1);
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var pillBadgeVariants = (0, import_class_variance_authority7.cva)(
+  "inline-flex items-center gap-1.5 rounded-full font-medium uppercase leading-none whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        /** Subtle border badge — compliance tags, capability tags */
+        default: "border border-[#FFFFFF26] bg-[#FFFFFF08] text-[#FFFFFFCC]",
+        /** Muted badge — less prominent */
+        muted: "border border-[#FFFFFF14] bg-[#FFFFFF05] text-[#FFFFFFCC]",
+        /** Accent-filled badge — ROI labels, active state badges */
+        accent: "text-[var(--color-accent,#D49355)] bg-[rgba(var(--color-accent-rgb,212,147,85),0.12)]"
+      },
+      size: {
+        sm: "py-1 px-2.5 text-[10px] tracking-[0.08em]",
+        md: "py-1.5 px-3.5 text-[11px] tracking-widest",
+        lg: "py-2 px-4 text-[11px] tracking-widest"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+var PillBadge = React10.forwardRef(
+  ({ className, variant, size, dot, dotColor, children, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { ref, className: cn(pillBadgeVariants({ variant, size }), className), ...props, children: [
+      dot && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "size-1.5 shrink-0 rounded-full", style: { backgroundColor: dotColor || "#FFFFFF40" } }),
+      children
+    ] });
+  }
+);
+PillBadge.displayName = "PillBadge";
+
+// src/components/progress-bar.tsx
+var import_class_variance_authority8 = require("class-variance-authority");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var progressBarVariants = (0, import_class_variance_authority8.cva)(
+  "relative w-full overflow-hidden rounded-full [background:var(--khal-border-default)]",
+  {
+    variants: {
+      size: {
+        sm: "h-1.5",
+        md: "h-2.5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function ProgressBar({
+  value,
+  max = 100,
+  color = "var(--khal-stage-build)",
+  size,
+  showLabel = false,
+  className,
+  ...props
+}) {
+  const percentage = Math.min(100, Math.max(0, value / max * 100));
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn("flex items-center gap-2", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      "div",
+      {
+        role: "progressbar",
+        "aria-valuenow": value,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        className: progressBarVariants({ size }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "div",
+          {
+            className: "h-full rounded-full",
+            style: {
+              width: `${percentage}%`,
+              background: `linear-gradient(90deg, color-mix(in srgb, ${color} 85%, black), ${color})`,
+              transition: "width var(--khal-duration-normal) var(--khal-ease-spring)"
+            }
+          }
+        )
+      }
+    ),
+    showLabel && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "shrink-0 text-xs tabular-nums opacity-60", children: [
+      value,
+      "/",
+      max
+    ] })
+  ] });
+}
+
+// src/components/section-card.tsx
+var import_class_variance_authority9 = require("class-variance-authority");
+var React11 = __toESM(require("react"), 1);
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var sectionCardVariants = (0, import_class_variance_authority9.cva)("relative flex flex-col overflow-hidden", {
+  variants: {
+    variant: {
+      default: "rounded-2xl border border-[#FFFFFF1A] bg-[#FFFFFF0A]",
+      inset: "rounded-tl-xl border-t border-l border-[#FFFFFF26] bg-[#111111]",
+      solid: "rounded-2xl border border-[#FFFFFF1A] bg-[#0D0D0D]"
+    },
+    padding: {
+      none: "",
+      sm: "p-4",
+      md: "p-5 sm:p-6",
+      lg: "p-5 sm:p-6 md:p-8"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    padding: "md"
+  }
+});
+var SectionCard = React11.forwardRef(
+  ({ className, variant, padding, glow, children, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ref, className: cn(sectionCardVariants({ variant, padding }), className), ...props, children: [
+      glow && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "div",
+        {
+          className: "pointer-events-none absolute inset-0 z-0",
+          style: {
+            background: `linear-gradient(180deg, ${glow}22 0%, transparent 60%)`
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "relative z-10 flex flex-col h-full", children })
+    ] });
+  }
+);
+SectionCard.displayName = "SectionCard";
+function SectionCardHeader({ className, children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "div",
+    {
+      className: cn("flex items-center justify-between py-3 px-4 border-b border-[#FFFFFF1A]", className),
+      ...props,
+      children
+    }
+  );
+}
+SectionCardHeader.displayName = "SectionCardHeader";
+
+// src/components/separator.tsx
+var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"), 1);
+var React12 = __toESM(require("react"), 1);
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var Separator3 = React12.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  SeparatorPrimitive.Root,
+  {
+    ref,
+    decorative,
+    orientation,
+    className: cn(
+      "shrink-0 bg-gray-alpha-400",
+      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+      className
+    ),
+    ...props
+  }
+));
+Separator3.displayName = SeparatorPrimitive.Root.displayName;
+
+// src/components/switch.tsx
+var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"), 1);
+var React13 = __toESM(require("react"), 1);
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var Toggle = React13.forwardRef(
+  ({ className, onChange, onCheckedChange, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    SwitchPrimitive.Root,
+    {
+      className: cn(
+        "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-700 focus-visible:ring-offset-2 focus-visible:ring-offset-background-100",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "data-[state=checked]:bg-gray-1000 data-[state=unchecked]:bg-gray-alpha-400",
+        className
+      ),
+      onCheckedChange: onCheckedChange ?? onChange,
+      ...props,
+      ref,
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        SwitchPrimitive.Thumb,
+        {
+          className: cn(
+            "pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition-transform",
+            "data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+          )
+        }
+      )
+    }
+  )
+);
+Toggle.displayName = "Toggle";
+
+// src/components/theme-provider.tsx
+var import_next_themes = require("next-themes");
+var import_react8 = require("react");
+
+// src/stores/theme-store.ts
+var import_zustand = require("zustand");
+var import_middleware = require("zustand/middleware");
+var useThemeStore = (0, import_zustand.create)()(
+  (0, import_middleware.persist)(
+    (set) => ({
+      mode: "dark",
+      setMode: (mode) => set({ mode }),
+      reduceMotion: false,
+      setReduceMotion: (reduceMotion) => set({ reduceMotion }),
+      glassEnabled: false,
+      setGlassEnabled: (glassEnabled) => set({ glassEnabled }),
+      gpuTerminals: false,
+      setGpuTerminals: (gpuTerminals) => set({ gpuTerminals })
+    }),
+    {
+      name: "khal-theme"
+    }
+  )
+);
+
+// src/components/theme-provider.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function ReduceMotionSync() {
+  const reduceMotion = useThemeStore((s) => s.reduceMotion);
+  (0, import_react8.useEffect)(() => {
+    document.documentElement.setAttribute("data-reduce-motion", String(reduceMotion));
+  }, [reduceMotion]);
+  return null;
+}
+function GlassSync() {
+  const glassEnabled = useThemeStore((s) => s.glassEnabled);
+  (0, import_react8.useEffect)(() => {
+    const el = document.documentElement;
+    if (glassEnabled) {
+      el.setAttribute("data-glass", "");
+      el.style.setProperty("--khal-glass-enabled", "1");
+    } else {
+      el.removeAttribute("data-glass");
+      el.style.setProperty("--khal-glass-enabled", "0");
+    }
+  }, [glassEnabled]);
+  return null;
+}
+function GpuTerminalsSync() {
+  const gpuTerminals = useThemeStore((s) => s.gpuTerminals);
+  (0, import_react8.useEffect)(() => {
+    if (gpuTerminals) {
+      localStorage.setItem("khal-gpu-terminals", "true");
+    } else {
+      localStorage.removeItem("khal-gpu-terminals");
+    }
+  }, [gpuTerminals]);
+  return null;
+}
+function ThemeProvider({ children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_next_themes.ThemeProvider, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ReduceMotionSync, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GlassSync, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GpuTerminalsSync, {}),
+    children
+  ] });
+}
+
+// src/components/theme-switcher.tsx
+var import_lucide_react3 = require("lucide-react");
+var import_next_themes2 = require("next-themes");
+var import_react9 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var themes = [
+  { value: "system", label: "System", icon: import_lucide_react3.Monitor },
+  { value: "light", label: "Light", icon: import_lucide_react3.Sun },
+  { value: "dark", label: "Dark", icon: import_lucide_react3.Moon }
+];
+function ThemeSwitcher({ small, className, onThemeSwitch, disabled }) {
+  const { theme, setTheme } = (0, import_next_themes2.useTheme)();
+  const [mounted, setMounted] = (0, import_react9.useState)(false);
+  (0, import_react9.useEffect)(() => setMounted(true), []);
+  const resolvedTheme = mounted ? theme : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    "fieldset",
+    {
+      className: cn("inline-flex items-center gap-1 rounded-lg bg-gray-alpha-100 p-1", className),
+      disabled,
+      children: themes.map(({ value, label, icon: Icon2 }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+        "button",
+        {
+          type: "button",
+          role: "radio",
+          "aria-checked": resolvedTheme === value,
+          onClick: () => {
+            setTheme(value);
+            onThemeSwitch?.(value);
+          },
+          className: cn(
+            "inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-label-12 transition-colors cursor-pointer",
+            resolvedTheme === value ? "bg-background-100 text-gray-1000 shadow-sm" : "text-gray-700 hover:text-gray-1000"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon2, { className: small ? "h-3.5 w-3.5" : "h-4 w-4" }),
+            !small && label
+          ]
+        },
+        value
+      ))
+    }
+  );
+}
+
+// src/components/ticker-bar.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function TickerBar({ children, duration = 30, pauseOnHover = true, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    "div",
+    {
+      className: cn("relative w-full overflow-hidden", className),
+      style: {
+        maskImage: "linear-gradient(to right, transparent, black 10%, black 90%, transparent)",
+        WebkitMaskImage: "linear-gradient(to right, transparent, black 10%, black 90%, transparent)"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+        "div",
+        {
+          className: cn("flex w-max", pauseOnHover && "hover:[animation-play-state:paused]"),
+          style: {
+            animation: `khal-ticker ${duration}s linear infinite`
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex shrink-0 items-center", children }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex shrink-0 items-center", "aria-hidden": true, children })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/components/tooltip.tsx
+var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
+var React14 = __toESM(require("react"), 1);
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var TooltipProvider = TooltipPrimitive.Provider;
+var TooltipRoot = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React14.forwardRef(({ className, sideOffset = 4, style, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-[9999] overflow-hidden rounded-md px-2.5 py-1 text-label-12",
+      "animate-in fade-in-0 zoom-in-95",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    style: {
+      background: "var(--khal-text-primary, var(--ds-gray-1000))",
+      color: "var(--khal-text-inverse, var(--ds-background-100))",
+      ...style
+    },
+    ...props
+  }
+) }));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+function Tooltip({ text, children, position = "top", delay, delayTime, desktopOnly, className }) {
+  const delayDuration = delayTime ?? (delay ? 400 : 200);
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TooltipProvider, { delayDuration, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(TooltipRoot, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TooltipContent, { side: position, className: cn(desktopOnly && "max-md:hidden", className), children: text })
+  ] }) });
+}
+
+// src/components/window-minimized-context.tsx
+var import_react10 = require("react");
+var WindowMinimizedContext = (0, import_react10.createContext)(false);
+var WindowMinimizedProvider = WindowMinimizedContext.Provider;
+function useWindowMinimized() {
+  return (0, import_react10.useContext)(WindowMinimizedContext);
+}
+var WindowActiveContext = (0, import_react10.createContext)(true);
+var WindowActiveProvider = WindowActiveContext.Provider;
+function useWindowActive() {
+  return (0, import_react10.useContext)(WindowActiveContext);
+}
+
+// src/lib/animations.ts
+var khalEasing = [0.22, 1, 0.36, 1];
+var springConfig = {
+  stiffness: 300,
+  damping: 22
+};
+var fadeUp = {
+  initial: { opacity: 0, y: 12, filter: "blur(4px)" },
+  animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+  transition: { duration: 0.7, ease: khalEasing }
+};
+var scaleUp = {
+  initial: { opacity: 0, scale: 0.96, filter: "blur(6px)" },
+  animate: { opacity: 1, scale: 1, filter: "blur(0px)" },
+  transition: { duration: 0.9, ease: khalEasing }
+};
+var staggerContainer = {
+  animate: {
+    transition: {
+      staggerChildren: 0.12
+    }
+  }
+};
+var staggerChild = {
+  initial: { opacity: 0, y: 8 },
+  animate: { opacity: 1, y: 0 },
+  transition: { duration: 0.4, ease: khalEasing }
+};
+var fadeIn = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  transition: { duration: 0.5, ease: khalEasing }
+};
+
+// src/primitives/collapsible-sidebar.tsx
+var import_react11 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var SidebarContext = (0, import_react11.createContext)({
+  collapsed: false,
+  toggle: () => {
+  },
+  size: 220
+});
+function useSidebar() {
+  return (0, import_react11.useContext)(SidebarContext);
+}
+function CollapsibleSidebarRoot({
+  children,
+  defaultSize = 220,
+  min = 140,
+  max = 400,
+  defaultCollapsed = false,
+  side = "left",
+  className = ""
+}) {
+  const [collapsed, setCollapsed] = (0, import_react11.useState)(defaultCollapsed);
+  const [size, setSize] = (0, import_react11.useState)(defaultSize);
+  const dragging = (0, import_react11.useRef)(false);
+  const startX = (0, import_react11.useRef)(0);
+  const startSize = (0, import_react11.useRef)(0);
+  const toggle = (0, import_react11.useCallback)(() => setCollapsed((v) => !v), []);
+  const onPointerDown = (0, import_react11.useCallback)(
+    (e) => {
+      if (collapsed) return;
+      e.preventDefault();
+      dragging.current = true;
+      startX.current = e.clientX;
+      startSize.current = size;
+      e.target.setPointerCapture(e.pointerId);
+    },
+    [collapsed, size]
+  );
+  const onPointerMove = (0, import_react11.useCallback)(
+    (e) => {
+      if (!dragging.current) return;
+      const delta = side === "left" ? e.clientX - startX.current : startX.current - e.clientX;
+      setSize(Math.min(max, Math.max(min, startSize.current + delta)));
+    },
+    [side, min, max]
+  );
+  const onPointerUp = (0, import_react11.useCallback)(() => {
+    dragging.current = false;
+  }, []);
+  const resizeHandle = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    "div",
+    {
+      className: `w-px shrink-0 cursor-col-resize bg-gray-alpha-200 transition-colors hover:w-0.5 hover:bg-blue-700/50 active:w-0.5 active:bg-blue-700 ${collapsed ? "pointer-events-none" : ""}`,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      role: "separator",
+      "aria-orientation": "vertical"
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SidebarContext.Provider, { value: { collapsed, toggle, size }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: `flex shrink-0 ${className}`, style: { width: collapsed ? 0 : size }, children: [
+    side === "right" && resizeHandle,
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      "div",
+      {
+        className: `flex h-full flex-col overflow-hidden transition-[width] duration-150 ${collapsed ? "w-0" : "w-full"}`,
+        children
+      }
+    ),
+    side === "left" && resizeHandle
+  ] }) });
+}
+function SidebarHeader({ children, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: `flex h-9 shrink-0 items-center justify-between border-b border-gray-alpha-200 px-3 ${className}`, children });
+}
+function CollapseButton({ className = "" }) {
+  const { collapsed, toggle } = useSidebar();
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    "button",
+    {
+      onClick: toggle,
+      className: `inline-flex h-5 w-5 items-center justify-center rounded text-gray-800 hover:bg-gray-alpha-200 hover:text-gray-1000 transition-colors ${className}`,
+      "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "path",
+        {
+          d: collapsed ? "M4.5 2L8.5 6L4.5 10" : "M8.5 2L4.5 6L8.5 10",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ) })
+    }
+  );
+}
+function SidebarContent({ children, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: `flex-1 overflow-y-auto ${className}`, children });
+}
+function SidebarSection({
+  title,
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: `${className}`, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "px-3 pt-2 pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-label-13 font-medium text-gray-800", children: title }) }),
+    children
+  ] });
+}
+function SidebarItem({ children, icon, active, indent = 0, onClick, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    "button",
+    {
+      onClick,
+      className: `flex w-full items-center gap-2 rounded-md px-2 py-1 text-left text-label-13 transition-colors
+        ${active ? "bg-gray-alpha-200 text-gray-1000" : "text-gray-900 hover:bg-gray-alpha-100 hover:text-gray-1000"}
+        ${className}`,
+      style: { paddingLeft: 8 + indent * 12 },
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "shrink-0 text-gray-800 [&>svg]:h-3.5 [&>svg]:w-3.5", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "min-w-0 truncate", children })
+      ]
+    }
+  );
+}
+var CollapsibleSidebar = Object.assign(CollapsibleSidebarRoot, {
+  Header: SidebarHeader,
+  CollapseButton,
+  Content: SidebarContent,
+  Section: SidebarSection,
+  Item: SidebarItem
+});
+
+// src/primitives/dialog.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function DialogRoot({ open, onClose, children }) {
+  if (!open) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    "div",
+    {
+      className: "bg-popover text-popover-foreground rounded-lg border p-6 shadow-lg",
+      onClick: (e) => e.stopPropagation(),
+      children
+    }
+  ) });
+}
+function Body({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex items-start gap-4", children });
+}
+function Icon({ children, variant: _variant }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "shrink-0", children });
+}
+function Title2({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h2", { className: "text-lg font-semibold", children });
+}
+function Description({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-muted-foreground text-sm", children });
+}
+function Actions({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mt-4 flex justify-end gap-2", children });
+}
+function Cancel({ children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("button", { type: "button", className: "rounded px-3 py-1.5 text-sm hover:bg-muted", ...props, children });
+}
+function Confirm({ children, variant: _variant, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("button", { type: "button", className: "rounded bg-destructive px-3 py-1.5 text-sm text-destructive-foreground", ...props, children });
+}
+var Dialog = Object.assign(DialogRoot, {
+  Body,
+  Icon,
+  Title: Title2,
+  Description,
+  Actions,
+  Cancel,
+  Confirm
+});
+
+// src/primitives/empty-state.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function EmptyState({ icon, title, description, action, compact, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    "div",
+    {
+      className: `flex flex-col items-center justify-center text-center ${compact ? "gap-2 py-6" : "gap-3 py-12"} ${className}`,
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: `text-gray-700 ${compact ? "[&>svg]:h-5 [&>svg]:w-5" : "[&>svg]:h-8 [&>svg]:w-8"}`, children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "space-y-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-label-13 font-medium text-gray-1000", children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: `text-gray-800 ${compact ? "text-label-13" : "text-label-13"}`, children: description })
+        ] }),
+        action && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "mt-2 shrink-0", children: action })
+      ]
+    }
+  );
+}
+
+// src/primitives/list-view.tsx
+var import_react12 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function ListView({
+  items,
+  selected,
+  onSelect,
+  onActivate,
+  renderItem,
+  getKey,
+  multiSelect = false,
+  emptyMessage = "No items",
+  className = ""
+}) {
+  const [focusIndex, setFocusIndex] = (0, import_react12.useState)(0);
+  const listRef = (0, import_react12.useRef)(null);
+  const selectedSet = new Set(selected == null ? [] : Array.isArray(selected) ? selected : [selected]);
+  const clamp = (0, import_react12.useCallback)((i) => Math.max(0, Math.min(items.length - 1, i)), [items.length]);
+  (0, import_react12.useEffect)(() => {
+    setFocusIndex((prev) => clamp(prev));
+  }, [items.length, clamp]);
+  const scrollToIndex = (0, import_react12.useCallback)((i) => {
+    const el = listRef.current?.children[i];
+    el?.scrollIntoView({ block: "nearest" });
+  }, []);
+  const handleKeyDown = (0, import_react12.useCallback)(
+    (e) => {
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          const next = clamp(focusIndex + 1);
+          setFocusIndex(next);
+          scrollToIndex(next);
+          if (!multiSelect) onSelect?.(getKey(items[next]));
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          const prev = clamp(focusIndex - 1);
+          setFocusIndex(prev);
+          scrollToIndex(prev);
+          if (!multiSelect) onSelect?.(getKey(items[prev]));
+          break;
+        }
+        case "Home": {
+          e.preventDefault();
+          setFocusIndex(0);
+          scrollToIndex(0);
+          if (!multiSelect && items.length > 0) onSelect?.(getKey(items[0]));
+          break;
+        }
+        case "End": {
+          e.preventDefault();
+          const last = items.length - 1;
+          setFocusIndex(last);
+          scrollToIndex(last);
+          if (!multiSelect && items.length > 0) onSelect?.(getKey(items[last]));
+          break;
+        }
+        case "Enter":
+        case " ": {
+          e.preventDefault();
+          const item = items[focusIndex];
+          if (item) {
+            onSelect?.(getKey(item));
+            if (e.key === "Enter") onActivate?.(item);
+          }
+          break;
+        }
+      }
+    },
+    [focusIndex, items, clamp, scrollToIndex, onSelect, onActivate, getKey, multiSelect]
+  );
+  if (items.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: `flex h-full items-center justify-center text-label-13 text-gray-800 ${className}`, children: emptyMessage });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    "div",
+    {
+      ref: listRef,
+      className: `overflow-y-auto outline-none ${className}`,
+      role: "listbox",
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
+      "aria-multiselectable": multiSelect,
+      children: items.map((item, i) => {
+        const key = getKey(item);
+        const isSelected = selectedSet.has(key);
+        const isFocused = i === focusIndex;
+        return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          "div",
+          {
+            role: "option",
+            "aria-selected": isSelected,
+            className: `cursor-default select-none px-2 py-1 transition-colors
+              ${isSelected ? "bg-blue-700/15 text-gray-1000" : "text-gray-1000"}
+              ${isFocused && !isSelected ? "bg-gray-alpha-100" : ""}
+              hover:bg-gray-alpha-200`,
+            onClick: () => {
+              setFocusIndex(i);
+              onSelect?.(key);
+            },
+            onDoubleClick: () => onActivate?.(item),
+            children: renderItem(item, { selected: isSelected, focused: isFocused, index: i })
+          },
+          key
+        );
+      })
+    }
+  );
+}
+
+// src/primitives/property-panel.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+function PropertyPanelRoot({ title, children, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: `flex flex-col overflow-y-auto ${className}`, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "sticky top-0 z-10 border-b border-gray-alpha-200 bg-background-100 px-3 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h3", { className: "text-label-13 font-medium text-gray-1000", children: title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col", children })
+  ] });
+}
+function PropertySection({
+  title,
+  children,
+  collapsible: _collapsible = false,
+  defaultOpen: _defaultOpen = true
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "border-b border-gray-alpha-200 last:border-b-0", children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "px-3 pt-3 pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-label-13 font-medium text-gray-800", children: title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: `px-3 pb-2 ${title ? "" : "pt-2"}`, children })
+  ] });
+}
+function PropertyRow({ label, value, children, mono }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-baseline justify-between gap-4 py-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("dt", { className: "shrink-0 text-label-13 text-gray-800", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("dd", { className: `min-w-0 truncate text-right text-label-13 text-gray-1000 ${mono ? "font-mono" : ""}`, children: children ?? value })
+  ] });
+}
+function PropertySeparator() {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Separator3, { className: "my-1" });
+}
+var PropertyPanel = Object.assign(PropertyPanelRoot, {
+  Section: PropertySection,
+  Row: PropertyRow,
+  Separator: PropertySeparator
+});
+
+// src/primitives/section-header.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function SectionHeader({
+  title,
+  description,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "mb-4 flex items-start justify-between", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h2", { className: "text-copy-13 font-medium text-gray-1000", children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "mt-0.5 text-copy-13 text-gray-900", children: description })
+    ] }),
+    children
+  ] });
+}
+
+// src/primitives/sidebar-nav.tsx
+var import_jsx_runtime34 = require("react/jsx-runtime");
+function SidebarNavRoot({ children, label, title, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("nav", { className: `flex flex-col py-2 ${className}`, "aria-label": label, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "px-3 pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-copy-13 font-medium text-gray-800", children: title }) }),
+    children
+  ] });
+}
+function SidebarNavGroup({ children, title, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "px-3 pt-4 pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-copy-13 font-medium text-gray-800", children: title }) }),
+    children
+  ] });
+}
+function SidebarNavItem({ children, active, onClick, icon, suffix, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    "button",
+    {
+      onClick,
+      className: `mx-1 flex items-center gap-2 rounded-md px-2 py-1 text-copy-13 transition-colors ${active ? "bg-gray-alpha-200 text-gray-1000" : "text-gray-900 hover:bg-gray-alpha-100 hover:text-gray-1000"} ${className}`,
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "shrink-0 text-gray-800 [&>svg]:h-3.5 [&>svg]:w-3.5", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "min-w-0 truncate", children }),
+        suffix && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "ml-auto font-mono text-copy-13 tabular-nums text-gray-700", children: suffix })
+      ]
+    }
+  );
+}
+var SidebarNav = Object.assign(SidebarNavRoot, {
+  Group: SidebarNavGroup,
+  Item: SidebarNavItem
+});
+
+// src/primitives/split-pane.tsx
+var import_react13 = require("react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function useMediaQuery(query) {
+  const subscribe = (0, import_react13.useCallback)(
+    (callback) => {
+      const mql = window.matchMedia(query);
+      mql.addEventListener("change", callback);
+      return () => mql.removeEventListener("change", callback);
+    },
+    [query]
+  );
+  const getSnapshot = (0, import_react13.useCallback)(() => window.matchMedia(query).matches, [query]);
+  const getServerSnapshot = (0, import_react13.useCallback)(() => false, []);
+  return (0, import_react13.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
+}
+function SplitPaneRoot({
+  children,
+  direction = "horizontal",
+  defaultSize = 240,
+  min = 100,
+  max = 600,
+  collapseBelow = 640,
+  onResize,
+  className = ""
+}) {
+  const [size, setSize] = (0, import_react13.useState)(defaultSize);
+  const containerRef = (0, import_react13.useRef)(null);
+  const dragging = (0, import_react13.useRef)(false);
+  const startPos = (0, import_react13.useRef)(0);
+  const startSize = (0, import_react13.useRef)(0);
+  const isMobile = useMediaQuery(`(max-width: ${collapseBelow}px)`);
+  const isHorizontal = direction === "horizontal" && !isMobile;
+  const [first, second] = children;
+  const onPointerDown = (0, import_react13.useCallback)(
+    (e) => {
+      e.preventDefault();
+      dragging.current = true;
+      startPos.current = isHorizontal ? e.clientX : e.clientY;
+      startSize.current = size;
+      e.target.setPointerCapture(e.pointerId);
+    },
+    [isHorizontal, size]
+  );
+  const onPointerMove = (0, import_react13.useCallback)(
+    (e) => {
+      if (!dragging.current) return;
+      const delta = (isHorizontal ? e.clientX : e.clientY) - startPos.current;
+      const next = Math.min(max, Math.max(min, startSize.current + delta));
+      setSize(next);
+      onResize?.(next);
+    },
+    [isHorizontal, min, max, onResize]
+  );
+  const onPointerUp = (0, import_react13.useCallback)(() => {
+    dragging.current = false;
+  }, []);
+  if (isMobile) {
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { ref: containerRef, className: `flex flex-col h-full w-full overflow-hidden ${className}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "shrink-0 overflow-auto border-b border-gray-alpha-200", children: first }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex-1 overflow-hidden", children: second })
+    ] });
+  }
+  const firstStyle = isHorizontal ? { width: size, minWidth: min, maxWidth: max, flexShrink: 0 } : { height: size, minHeight: min, maxHeight: max, flexShrink: 0 };
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: `flex ${isHorizontal ? "flex-row" : "flex-col"} h-full w-full overflow-hidden ${className}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { style: firstStyle, className: "overflow-hidden", children: first }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          "div",
+          {
+            className: `shrink-0 ${isHorizontal ? "w-px cursor-col-resize hover:w-0.5 hover:bg-blue-700/50 active:w-0.5 active:bg-blue-700" : "h-px cursor-row-resize hover:h-0.5 hover:bg-blue-700/50 active:h-0.5 active:bg-blue-700"} bg-gray-alpha-200 transition-colors`,
+            onPointerDown,
+            onPointerMove,
+            onPointerUp,
+            role: "separator",
+            "aria-orientation": isHorizontal ? "vertical" : "horizontal",
+            tabIndex: 0
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex-1 overflow-hidden", children: second })
+      ]
+    }
+  );
+}
+function Panel({ children, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: `h-full w-full overflow-auto ${className}`, children });
+}
+var SplitPane = Object.assign(SplitPaneRoot, {
+  Panel
+});
+
+// src/primitives/status-badge.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+function StatusBadge({ status }) {
+  const variant = status === "active" ? "green" : status === "creating" ? "amber" : status === "error" ? "red" : "gray";
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Badge, { variant, size: "sm", contrast: "low", children: status });
+}
+
+// src/primitives/status-bar.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+function StatusBarRoot({ children, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    "div",
+    {
+      className: `flex h-6 shrink-0 items-center gap-0 border-t border-gray-alpha-200 bg-background-100 px-2 font-mono text-label-13 text-gray-900 ${className}`,
+      role: "status",
+      children
+    }
+  );
+}
+var variantColors = {
+  default: "text-gray-900",
+  success: "text-green-900",
+  warning: "text-amber-900",
+  error: "text-red-900"
+};
+function StatusBarItem({ children, icon, variant = "default", onClick, className = "" }) {
+  const classes = `inline-flex items-center gap-1 px-1.5 py-0.5 rounded-sm ${variantColors[variant]} ${onClick ? "cursor-pointer hover:bg-gray-alpha-200 transition-colors" : ""} ${className}`;
+  if (onClick) {
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("button", { className: classes, onClick, children: [
+      icon,
+      children
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: classes, children: [
+    icon,
+    children
+  ] });
+}
+function StatusBarSeparator() {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Separator3, { orientation: "vertical", className: "mx-0.5 h-3" });
+}
+function StatusBarSpacer() {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex-1" });
+}
+var StatusBar = Object.assign(StatusBarRoot, {
+  Item: StatusBarItem,
+  Separator: StatusBarSeparator,
+  Spacer: StatusBarSpacer
+});
+
+// src/primitives/toolbar.tsx
+var import_react14 = require("react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+function ToolbarRoot({ children, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    "div",
+    {
+      className: `flex h-9 shrink-0 items-center gap-0.5 border-b border-gray-alpha-200 bg-background-100 px-1.5 ${className}`,
+      role: "toolbar",
+      children
+    }
+  );
+}
+var ToolbarButton = (0, import_react14.forwardRef)(function ToolbarButton2({ tooltip, active, children, className = "", disabled, ...props }, ref) {
+  const btn = /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    "button",
+    {
+      ref,
+      disabled,
+      className: `inline-flex h-7 w-7 items-center justify-center rounded-md text-gray-900 transition-colors [&>svg]:h-3.5 [&>svg]:w-3.5
+          hover:bg-gray-alpha-200 hover:text-gray-1000
+          disabled:pointer-events-none disabled:opacity-40
+          ${active ? "bg-gray-alpha-200 text-gray-1000" : ""}
+          ${className}`,
+      ...props,
+      children
+    }
+  );
+  if (tooltip) {
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Tooltip, { text: tooltip, desktopOnly: true, children: btn });
+  }
+  return btn;
+});
+function ToolbarGroup({ children, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: `flex items-center gap-px ${className}`, children });
+}
+function ToolbarSeparator() {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Separator3, { orientation: "vertical", className: "mx-1 h-4" });
+}
+function ToolbarSpacer() {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex-1" });
+}
+function ToolbarText({ children, className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: `px-1.5 text-label-13 text-gray-900 ${className}`, children });
+}
+function ToolbarInput({
+  value,
+  onChange,
+  placeholder,
+  className = "",
+  readOnly
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    "input",
+    {
+      type: "text",
+      value,
+      onChange,
+      placeholder,
+      readOnly,
+      className: `h-6 flex-1 rounded-md border border-gray-alpha-200 bg-gray-alpha-100 px-2 font-mono text-label-13 text-gray-1000 placeholder:text-gray-700 outline-none transition-colors focus:border-blue-700 ${className}`
+    }
+  );
+}
+var Toolbar = Object.assign(ToolbarRoot, {
+  Button: ToolbarButton,
+  Group: ToolbarGroup,
+  Separator: ToolbarSeparator,
+  Spacer: ToolbarSpacer,
+  Text: ToolbarText,
+  Input: ToolbarInput
+});
+
+// src/stores/notification-store.ts
+var import_zustand2 = require("zustand");
+var MAX_VISIBLE = 5;
+var MAX_HISTORY = 50;
+var PREFS_KEY = "khal_os_notification_prefs";
+function loadPrefs() {
+  if (typeof window === "undefined") return { doNotDisturb: false, desktopNotifMode: "background" };
+  try {
+    const raw = localStorage.getItem(PREFS_KEY);
+    if (raw) return JSON.parse(raw);
+  } catch {
+  }
+  return { doNotDisturb: false, desktopNotifMode: "background" };
+}
+function savePrefs(prefs) {
+  try {
+    localStorage.setItem(PREFS_KEY, JSON.stringify(prefs));
+  } catch {
+  }
+}
+function getBrowserPermission() {
+  if (typeof window === "undefined" || !("Notification" in window)) return "denied";
+  return Notification.permission;
+}
+function sendBrowserNotification(notif) {
+  if (typeof window === "undefined" || !("Notification" in window) || Notification.permission !== "granted") return;
+  const n = new Notification(notif.summary, {
+    body: notif.body || void 0,
+    icon: notif.icon || void 0,
+    tag: String(notif.id),
+    silent: notif.urgency === "low"
+  });
+  n.onclick = () => {
+    window.focus();
+    n.close();
+  };
+  if (notif.expires > 0) {
+    setTimeout(() => n.close(), notif.expires);
+  } else if (notif.urgency !== "critical") {
+    setTimeout(() => n.close(), 6e3);
+  }
+}
+var initialPrefs = loadPrefs();
+var useNotificationStore = (0, import_zustand2.create)()((set, get) => ({
+  notifications: [],
+  history: [],
+  trayIcons: /* @__PURE__ */ new Map(),
+  centerOpen: false,
+  unreadCount: 0,
+  doNotDisturb: initialPrefs.doNotDisturb,
+  desktopNotifMode: initialPrefs.desktopNotifMode,
+  browserPermission: getBrowserPermission(),
+  setDoNotDisturb: (value) => {
+    set({ doNotDisturb: value });
+    savePrefs({ doNotDisturb: value, desktopNotifMode: get().desktopNotifMode });
+  },
+  setDesktopNotifMode: (mode) => {
+    set({ desktopNotifMode: mode });
+    savePrefs({ doNotDisturb: get().doNotDisturb, desktopNotifMode: mode });
+  },
+  requestBrowserPermission: async () => {
+    if (typeof window === "undefined" || !("Notification" in window)) return "denied";
+    const result = await Notification.requestPermission();
+    set({ browserPermission: result });
+    return result;
+  },
+  syncBrowserPermission: () => {
+    set({ browserPermission: getBrowserPermission() });
+  },
+  addNotification: (notification) => {
+    const full = {
+      ...notification,
+      appName: notification.appName ?? "",
+      urgency: notification.urgency ?? "normal",
+      category: notification.category ?? null,
+      transient: notification.transient ?? false,
+      workspaceId: notification.workspaceId ?? null,
+      timestamp: Date.now(),
+      read: false
+    };
+    const { doNotDisturb, desktopNotifMode, browserPermission } = get();
+    set((state) => {
+      const history = full.transient ? state.history : [full, ...state.history].slice(0, MAX_HISTORY);
+      if (doNotDisturb && full.urgency !== "critical") {
+        return {
+          history,
+          unreadCount: full.transient ? state.unreadCount : state.unreadCount + 1
+        };
+      }
+      let notifications = [...state.notifications];
+      if (notification.replacesId) {
+        notifications = notifications.filter((n) => n.id !== notification.replacesId);
+      }
+      notifications = [full, ...notifications].slice(0, MAX_VISIBLE);
+      return {
+        notifications,
+        history,
+        unreadCount: full.transient ? state.unreadCount : state.unreadCount + 1
+      };
+    });
+    if (browserPermission === "granted" && desktopNotifMode !== "off" && !full.transient) {
+      const shouldSend = desktopNotifMode === "always" || desktopNotifMode === "background" && document.hidden;
+      if (shouldSend) {
+        sendBrowserNotification(full);
+      }
+    }
+    const isCritical = full.urgency === "critical";
+    if (full.expires > 0) {
+      setTimeout(() => {
+        get().hideNotification(full.id);
+      }, full.expires);
+    } else if (!isCritical) {
+      setTimeout(() => {
+        get().hideNotification(full.id);
+      }, 6e3);
+    }
+  },
+  dismissNotification: (id) => {
+    set((state) => ({
+      notifications: state.notifications.filter((n) => n.id !== id)
+    }));
+  },
+  hideNotification: (id) => {
+    set((state) => ({
+      notifications: state.notifications.filter((n) => n.id !== id)
+    }));
+  },
+  clearHistory: () => {
+    set({ history: [], unreadCount: 0 });
+  },
+  markAllRead: () => {
+    set((state) => ({
+      history: state.history.map((n) => ({ ...n, read: true })),
+      unreadCount: 0
+    }));
+  },
+  toggleCenter: () => {
+    const opening = !get().centerOpen;
+    set({ centerOpen: opening });
+    if (opening) {
+      get().markAllRead();
+    }
+  },
+  closeCenter: () => {
+    set({ centerOpen: false });
+  },
+  addTrayIcon: (icon) => {
+    set((state) => {
+      const next = new Map(state.trayIcons);
+      next.set(icon.wid, icon);
+      return { trayIcons: next };
+    });
+  },
+  removeTrayIcon: (wid) => {
+    set((state) => {
+      const next = new Map(state.trayIcons);
+      next.delete(wid);
+      return { trayIcons: next };
+    });
+  },
+  updateTrayIcon: (wid, updates) => {
+    set((state) => {
+      const next = new Map(state.trayIcons);
+      const existing = next.get(wid);
+      if (existing) {
+        next.set(wid, { ...existing, ...updates });
+      }
+      return { trayIcons: next };
+    });
+  }
+}));
+
+// src/tokens/lp-tokens.ts
+var WIN_BG = "#111318";
+var CHROME_BG = "#0D0F14";
+var CELL_BG = "#0D1017";
+var WIN_BORDER = "#1E2330";
+var WIN_BORDER_FOCUSED = "#333D55";
+var TEXT_PRIMARY = "#E8EAF0";
+var TEXT_SECONDARY = "#8B92A5";
+var TEXT_TERTIARY = "#555D73";
+var ACCENT_BLUE = "#0A6FE0";
+var MESH_GRADIENT_PALETTE = [
+  "#030508",
+  "#070D15",
+  "#0C1A2E",
+  "#1A4A7A",
+  "#2A3040",
+  "#5C4A38",
+  "#8B6B42",
+  "#D49355"
+];
+var WINDOW_RADIUS = "12px";
+var BUTTON_RADIUS = "10px";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ACCENT_BLUE,
+  Avatar,
+  BUTTON_RADIUS,
+  Badge,
+  Button,
+  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,
+  DataRow,
+  Dialog,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  EmptyState,
+  GlassCard,
+  Input,
+  KhalLogo,
+  ListView,
+  LiveFeed,
+  MESH_GRADIENT_PALETTE,
+  MeshGradient,
+  MetricDisplay,
+  Note,
+  NumberFlow,
+  PillBadge,
+  ProgressBar,
+  PropertyPanel,
+  SUBJECTS,
+  SectionCard,
+  SectionCardHeader,
+  SectionHeader,
+  Separator,
+  SidebarNav,
+  Spinner,
+  SplitPane,
+  StatusBadge,
+  StatusBar,
+  StatusDot,
+  TEXT_PRIMARY,
+  TEXT_SECONDARY,
+  TEXT_TERTIARY,
+  ThemeProvider,
+  ThemeSwitcher,
+  TickerBar,
+  Toggle,
+  Toolbar,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+  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,
+  useKhalAuth,
+  useNats,
+  useNatsSubscription,
+  useNotificationStore,
+  useOSAuth,
+  useReducedMotion,
+  useSidebar,
+  useThemeStore,
+  useWindowActive,
+  useWindowMinimized
+});
+//# sourceMappingURL=index.cjs.map