@khal-os/ui 1.0.0 → 1.0.2

package/dist/index.js

@@ -0,0 +1,2510 @@
+// src/index.ts
+import { SUBJECTS, useKhalAuth, useKhalAuth as useKhalAuth2, useNats, useNatsSubscription } from "@khal-os/sdk/app";
+
+// src/components/avatar.tsx
+import * as React from "react";
+
+// src/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/status-dot.tsx
+import { jsx, jsxs } from "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__ */ jsxs(
+    "span",
+    {
+      role: "status",
+      "aria-label": label,
+      className: cn("relative inline-flex shrink-0 items-center gap-1.5", className),
+      style,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "relative inline-flex shrink-0", style: { width: px, height: px }, children: [
+          pulse && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute -inset-0.5 rounded-full",
+              style: {
+                backgroundColor: color,
+                opacity: 0.35,
+                animation: "khal-pulse 2s ease-in-out infinite"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute inset-0 rounded-full",
+              style: {
+                backgroundColor: color,
+                boxShadow: pulse ? `0 0 ${px}px ${color}80` : void 0
+              }
+            }
+          )
+        ] }),
+        showLabel && label && /* @__PURE__ */ jsx("span", { className: "text-[11px] leading-none", style: { color }, children: label })
+      ]
+    }
+  );
+}
+
+// src/components/avatar.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "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__ */ jsxs2(
+      "div",
+      {
+        ref,
+        className: cn("relative inline-flex shrink-0", className),
+        style: { width: px, height: px, ...style },
+        ...props,
+        children: [
+          showImage ? /* @__PURE__ */ jsx2(
+            "img",
+            {
+              src,
+              alt: name,
+              className: "h-full w-full rounded-full object-cover",
+              onError: () => setImgError(true)
+            }
+          ) : /* @__PURE__ */ jsx2(
+            "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__ */ jsx2("div", { className: "absolute -bottom-px -right-px", children: /* @__PURE__ */ jsx2(StatusDot, { color: statusColorMap[status], size: "sm", label: status, pulse: status === "online" }) })
+        ]
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+
+// src/components/badge.tsx
+import { cva } from "class-variance-authority";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var badgeVariants = 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__ */ jsx3("span", { className: cn(badgeVariants({ variant, size }), className), ...props });
+}
+
+// src/components/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva as cva2 } from "class-variance-authority";
+import * as React2 from "react";
+
+// src/components/spinner.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var sizeMap3 = {
+  sm: 16,
+  md: 20,
+  lg: 24
+};
+function Spinner({ size = "md", className, ...props }) {
+  const px = sizeMap3[size];
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      role: "status",
+      "aria-label": "Loading",
+      className: cn("inline-flex items-center justify-center", className),
+      ...props,
+      children: /* @__PURE__ */ jsxs3("svg", { width: px, height: px, viewBox: "0 0 20 20", fill: "none", className: "animate-spin", children: [
+        /* @__PURE__ */ jsx4("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", opacity: "0.25" }),
+        /* @__PURE__ */ jsx4(
+          "circle",
+          {
+            cx: "10",
+            cy: "10",
+            r: "8",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeDasharray: "50.26",
+            strokeDashoffset: "37.7"
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/components/button.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var buttonVariants = cva2(
+  "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 ? Slot : "button";
+    return /* @__PURE__ */ jsx5(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant: resolvedVariant, size, className })),
+        ref,
+        type: typeName ?? "button",
+        disabled: disabled || loading,
+        ...props,
+        children: loading ? /* @__PURE__ */ jsx5(Spinner, { size: "sm" }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
+          prefix && /* @__PURE__ */ jsx5("span", { className: "inline-flex shrink-0", children: prefix }),
+          children,
+          suffix && /* @__PURE__ */ jsx5("span", { className: "inline-flex shrink-0", children: suffix })
+        ] })
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/ContextMenu.tsx
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import * as React3 from "react";
+import { jsx as jsx6 } from "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__ */ jsx6(
+  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__ */ jsx6(
+  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__ */ jsx6(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx6(
+  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__ */ jsx6(
+  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__ */ jsx6(
+  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
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+import * as React4 from "react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var Command = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+  CommandPrimitive,
+  {
+    ref,
+    className: cn("flex h-full w-full flex-col overflow-hidden rounded-xl bg-background-100 text-gray-1000", className),
+    ...props
+  }
+));
+Command.displayName = CommandPrimitive.displayName;
+function CommandDialog({
+  children,
+  open,
+  onOpenChange,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(DialogPrimitive.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs5(DialogPrimitive.Portal, { children: [
+    /* @__PURE__ */ jsx7(
+      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__ */ jsxs5(
+      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__ */ jsx7(DialogPrimitive.Title, { className: "sr-only", children: "Command palette" }),
+          /* @__PURE__ */ jsx7(
+            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__ */ jsxs5(
+  "div",
+  {
+    className: "flex items-center px-3",
+    style: { borderBottom: "1px solid var(--khal-border-default)" },
+    "cmdk-input-wrapper": "",
+    children: [
+      /* @__PURE__ */ jsx7(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+      /* @__PURE__ */ jsx7(
+        CommandPrimitive.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 = CommandPrimitive.Input.displayName;
+var CommandList = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+  CommandPrimitive.List,
+  {
+    ref,
+    className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
+    ...props
+  }
+));
+CommandList.displayName = CommandPrimitive.List.displayName;
+var CommandEmpty = React4.forwardRef((props, ref) => /* @__PURE__ */ jsx7(CommandPrimitive.Empty, { ref, className: "py-6 text-center text-copy-13 text-gray-700", ...props }));
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+var CommandGroup = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+  CommandPrimitive.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 = CommandPrimitive.Group.displayName;
+var CommandSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(CommandPrimitive.Separator, { ref, className: cn("-mx-1 h-px bg-gray-alpha-400", className), ...props }));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+var CommandItem = React4.forwardRef(({ className, prefix, callback, onSelect, children, ...props }, ref) => /* @__PURE__ */ jsxs5(
+  CommandPrimitive.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__ */ jsx7("span", { className: "inline-flex shrink-0", children: prefix }),
+      children
+    ]
+  }
+));
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+var CommandShortcut = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx7("span", { className: cn("ml-auto text-label-12 tracking-widest text-gray-700", className), ...props });
+};
+
+// src/components/cost-counter.tsx
+import { motion, useInView } from "motion/react";
+import { useCallback, useRef, useState as useState2 } from "react";
+
+// src/components/number-flow.tsx
+import NumberFlowBase from "@number-flow/react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function NumberFlow({ transformTiming, spinTiming, opacityTiming, ...props }) {
+  return /* @__PURE__ */ jsx8(
+    NumberFlowBase,
+    {
+      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
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function CostCounter({ value, suffix, prefix, label, description, budget, budgetColor, className }) {
+  const [displayed, setDisplayed] = useState2(0);
+  const triggered = useRef(false);
+  const barRef = useRef(null);
+  const barInView = useInView(barRef, { once: true, amount: 0.6 });
+  const handleViewport = useCallback(() => {
+    if (!triggered.current) {
+      triggered.current = true;
+      setDisplayed(value);
+    }
+  }, [value]);
+  return /* @__PURE__ */ jsxs6(
+    motion.div,
+    {
+      onViewportEnter: handleViewport,
+      viewport: { once: true, amount: 0.5 },
+      className: cn("flex flex-col gap-3", className),
+      children: [
+        /* @__PURE__ */ jsxs6(
+          "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__ */ jsx9("span", { className: "text-[0.7em]", children: prefix }),
+              /* @__PURE__ */ jsx9(NumberFlow, { value: displayed }),
+              suffix && /* @__PURE__ */ jsx9("span", { className: "text-[0.65em] ml-0.5 opacity-70", children: suffix })
+            ]
+          }
+        ),
+        budget != null && /* @__PURE__ */ jsx9("div", { ref: barRef, className: "w-full h-2 rounded-full overflow-hidden bg-[var(--ds-gray-alpha-200)]", children: /* @__PURE__ */ jsx9(
+          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__ */ jsxs6("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx9("span", { className: "text-sm font-medium leading-5", children: label }),
+          description && /* @__PURE__ */ jsx9("span", { className: "text-xs opacity-50 leading-4", children: description })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/data-row.tsx
+import { cva as cva3 } from "class-variance-authority";
+import * as React5 from "react";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var dataRowVariants = cva3("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__ */ jsxs7("div", { ref, className: cn(dataRowVariants({ variant }), className), ...props, children: [
+      statusDot && /* @__PURE__ */ jsx10("span", { className: "size-[6px] shrink-0 rounded-full", style: { backgroundColor: dotColor || "#FFFFFF40" } }),
+      tag && /* @__PURE__ */ jsx10(
+        "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__ */ jsx10("span", { className: "text-[12px] text-[#FFFFFFCC] leading-4 min-w-0 truncate", children: label }),
+      (value || children) && /* @__PURE__ */ jsx10("span", { className: "grow" }),
+      value && /* @__PURE__ */ jsx10("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
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as React6 from "react";
+import { jsx as jsx11, jsxs as jsxs8 } from "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__ */ jsx11(
+  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__ */ jsx11(
+  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__ */ jsx11(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx11(
+  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__ */ jsxs8(
+  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__ */ jsx11("span", { className: "inline-flex shrink-0", children: prefix }),
+      children,
+      suffix && /* @__PURE__ */ jsx11("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__ */ jsxs8(
+  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__ */ jsx11("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx11(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx11("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx11(
+        "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__ */ jsxs8(
+  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__ */ jsx11("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx11(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx11("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", children: /* @__PURE__ */ jsx11("circle", { cx: "4", cy: "4", r: "4", fill: "currentColor" }) }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+var DropdownMenuLabel = React6.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx11(
+  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__ */ jsx11(
+  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__ */ jsx11(
+    "span",
+    {
+      className: cn("ml-auto text-label-12 tracking-widest", className),
+      style: { color: "var(--khal-text-muted)" },
+      ...props
+    }
+  );
+};
+
+// src/components/glass-card.tsx
+import { cva as cva4 } from "class-variance-authority";
+import * as React7 from "react";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var glassCardVariants = cva4(
+  "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__ */ jsxs9(
+      "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__ */ jsx12(
+            "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__ */ jsx12("div", { className: "relative", children })
+        ]
+      }
+    );
+  }
+);
+GlassCard.displayName = "GlassCard";
+
+// src/components/input.tsx
+import * as React8 from "react";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+var Input = React8.forwardRef(
+  ({ className, label, size, typeName, type, ...props }, ref) => {
+    const input = /* @__PURE__ */ jsx13(
+      "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__ */ jsxs10("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx13("label", { className: "text-label-13 text-gray-900", children: label }),
+        input
+      ] });
+    }
+    return input;
+  }
+);
+Input.displayName = "Input";
+
+// src/components/khal-logo.tsx
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+function KhalLogo({ size = 20, variant = "light", className }) {
+  const color = variant === "light" ? "#FFFFFF" : "#0A0A0A";
+  const showFull = size >= 20;
+  if (!showFull) {
+    return /* @__PURE__ */ jsx14(
+      "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__ */ jsx14(
+          "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__ */ jsxs11(
+    "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__ */ jsxs11("g", { clipPath: "url(#khal-logo-clip)", children: [
+          /* @__PURE__ */ jsx14(
+            "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__ */ jsx14(
+            "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__ */ jsx14(
+            "path",
+            {
+              d: "M190.123 0H217.565V62.6322H344.6V0H372.043V154.92H344.6V88.9681H217.565V154.92H190.123V0Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ jsx14(
+            "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__ */ jsx14("defs", { children: /* @__PURE__ */ jsx14("clipPath", { id: "khal-logo-clip", children: /* @__PURE__ */ jsx14("rect", { width: "756", height: "155", fill: "white" }) }) })
+      ]
+    }
+  );
+}
+
+// src/components/live-feed.tsx
+import { AnimatePresence, motion as motion2 } from "motion/react";
+import { useCallback as useCallback2, useEffect, useRef as useRef2, useState as useState3 } from "react";
+import { jsx as jsx15, jsxs as jsxs12 } from "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] = useState3(externalEvents ?? []);
+  const scrollRef = useRef2(null);
+  const isAtBottom = useRef2(true);
+  useEffect(() => {
+    if (externalEvents) {
+      setEvents((prev) => {
+        const combined = [...prev, ...externalEvents.filter((e) => !prev.some((p) => p.id === e.id))];
+        return combined.slice(-maxVisible);
+      });
+    }
+  }, [externalEvents, maxVisible]);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (el && isAtBottom.current) {
+      el.scrollTop = el.scrollHeight;
+    }
+  }, [events]);
+  const handleScroll = useCallback2(() => {
+    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__ */ jsx15(
+    "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__ */ jsx15(AnimatePresence, { initial: false, children: events.map((event) => /* @__PURE__ */ jsxs12(
+        motion2.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__ */ jsx15(
+              "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__ */ jsx15("span", { className: "shrink-0 opacity-40 tabular-nums", children: formatTime(event.timestamp) }),
+            /* @__PURE__ */ jsx15("span", { className: "opacity-80 break-words min-w-0", children: event.message })
+          ]
+        },
+        event.id
+      )) })
+    }
+  );
+}
+
+// src/components/mesh-gradient.tsx
+import { lazy, Suspense, useEffect as useEffect3, useRef as useRef3, useState as useState5 } from "react";
+
+// src/hooks/useReducedMotion.ts
+import { useEffect as useEffect2, useState as useState4 } from "react";
+function useReducedMotion() {
+  const [reduced, setReduced] = useState4(false);
+  useEffect2(() => {
+    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
+import { jsx as jsx16 } from "react/jsx-runtime";
+var MeshGradientShader = 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__ */ jsx16("div", { style: { width: "100%", height: "100%", background: bg } });
+}
+function MeshGradientInner({ colors, speed = 0.02, className, style }) {
+  const ref = useRef3(null);
+  const [visible, setVisible] = useState5(false);
+  const reducedMotion = useReducedMotion();
+  useEffect3(() => {
+    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__ */ jsx16("div", { ref, className, style: { position: "absolute", inset: 0, ...style }, children: visible && !reducedMotion ? /* @__PURE__ */ jsx16(Suspense, { fallback: /* @__PURE__ */ jsx16(StaticFallback, { colors }), children: /* @__PURE__ */ jsx16(MeshGradientShader, { colors, speed, style: { width: "100%", height: "100%" } }) }) : /* @__PURE__ */ jsx16(StaticFallback, { colors }) });
+}
+
+// src/components/metric-display.tsx
+import { cva as cva5 } from "class-variance-authority";
+import * as React9 from "react";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+var metricDisplayVariants = cva5("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__ */ jsxs13("div", { ref, className: cn(metricDisplayVariants({ size }), className), ...props, children: [
+      resolvedSize === "sm" && /* @__PURE__ */ jsx17("span", { className: labelSizeMap[resolvedSize], children: label }),
+      /* @__PURE__ */ jsxs13(
+        "div",
+        {
+          className: cn(valueSizeMap[resolvedSize], "tabular-nums"),
+          style: accentColor ? { color: accentColor } : void 0,
+          children: [
+            prefix && /* @__PURE__ */ jsx17("span", { children: prefix }),
+            /* @__PURE__ */ jsx17("span", { children: value }),
+            suffix && /* @__PURE__ */ jsx17("span", { className: resolvedSize === "lg" ? "text-[32px] tracking-[-0.02em] ml-0.5" : "ml-0.5", children: suffix })
+          ]
+        }
+      ),
+      resolvedSize !== "sm" && /* @__PURE__ */ jsx17("span", { className: labelSizeMap[resolvedSize], children: label }),
+      description && /* @__PURE__ */ jsx17("span", { className: "text-[13px] text-[#FFFFFF80] leading-4", children: description })
+    ] });
+  }
+);
+MetricDisplay.displayName = "MetricDisplay";
+
+// src/components/note.tsx
+import { cva as cva6 } from "class-variance-authority";
+import { AlertCircle, AlertTriangle, CheckCircle, Info } from "lucide-react";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+var noteVariants = cva6("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: Info,
+  error: AlertCircle,
+  warning: AlertTriangle,
+  success: CheckCircle
+};
+function Note({ className, type = "default", size, label, action, children, ...props }) {
+  const Icon2 = iconMap[type];
+  const showLabel = label !== false;
+  return /* @__PURE__ */ jsxs14("div", { className: cn(noteVariants({ type, size }), className), role: "alert", ...props, children: [
+    showLabel && /* @__PURE__ */ jsx18(Icon2, { className: "h-4 w-4 shrink-0 mt-0.5" }),
+    /* @__PURE__ */ jsx18("div", { className: "flex-1 min-w-0", children }),
+    action && /* @__PURE__ */ jsx18("div", { className: "shrink-0", children: action })
+  ] });
+}
+
+// src/components/pill-badge.tsx
+import { cva as cva7 } from "class-variance-authority";
+import * as React10 from "react";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+var pillBadgeVariants = cva7(
+  "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__ */ jsxs15("span", { ref, className: cn(pillBadgeVariants({ variant, size }), className), ...props, children: [
+      dot && /* @__PURE__ */ jsx19("span", { className: "size-1.5 shrink-0 rounded-full", style: { backgroundColor: dotColor || "#FFFFFF40" } }),
+      children
+    ] });
+  }
+);
+PillBadge.displayName = "PillBadge";
+
+// src/components/progress-bar.tsx
+import { cva as cva8 } from "class-variance-authority";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+var progressBarVariants = cva8(
+  "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__ */ jsxs16("div", { className: cn("flex items-center gap-2", className), ...props, children: [
+    /* @__PURE__ */ jsx20(
+      "div",
+      {
+        role: "progressbar",
+        "aria-valuenow": value,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        className: progressBarVariants({ size }),
+        children: /* @__PURE__ */ jsx20(
+          "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__ */ jsxs16("span", { className: "shrink-0 text-xs tabular-nums opacity-60", children: [
+      value,
+      "/",
+      max
+    ] })
+  ] });
+}
+
+// src/components/section-card.tsx
+import { cva as cva9 } from "class-variance-authority";
+import * as React11 from "react";
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+var sectionCardVariants = cva9("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__ */ jsxs17("div", { ref, className: cn(sectionCardVariants({ variant, padding }), className), ...props, children: [
+      glow && /* @__PURE__ */ jsx21(
+        "div",
+        {
+          className: "pointer-events-none absolute inset-0 z-0",
+          style: {
+            background: `linear-gradient(180deg, ${glow}22 0%, transparent 60%)`
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx21("div", { className: "relative z-10 flex flex-col h-full", children })
+    ] });
+  }
+);
+SectionCard.displayName = "SectionCard";
+function SectionCardHeader({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx21(
+    "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
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React12 from "react";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var Separator3 = React12.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx22(
+  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
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import * as React13 from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var Toggle = React13.forwardRef(
+  ({ className, onChange, onCheckedChange, ...props }, ref) => /* @__PURE__ */ jsx23(
+    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__ */ jsx23(
+        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
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { useEffect as useEffect4 } from "react";
+
+// src/stores/theme-store.ts
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+var useThemeStore = create()(
+  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
+import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+function ReduceMotionSync() {
+  const reduceMotion = useThemeStore((s) => s.reduceMotion);
+  useEffect4(() => {
+    document.documentElement.setAttribute("data-reduce-motion", String(reduceMotion));
+  }, [reduceMotion]);
+  return null;
+}
+function GlassSync() {
+  const glassEnabled = useThemeStore((s) => s.glassEnabled);
+  useEffect4(() => {
+    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);
+  useEffect4(() => {
+    if (gpuTerminals) {
+      localStorage.setItem("khal-gpu-terminals", "true");
+    } else {
+      localStorage.removeItem("khal-gpu-terminals");
+    }
+  }, [gpuTerminals]);
+  return null;
+}
+function ThemeProvider({ children, ...props }) {
+  return /* @__PURE__ */ jsxs18(NextThemesProvider, { ...props, children: [
+    /* @__PURE__ */ jsx24(ReduceMotionSync, {}),
+    /* @__PURE__ */ jsx24(GlassSync, {}),
+    /* @__PURE__ */ jsx24(GpuTerminalsSync, {}),
+    children
+  ] });
+}
+
+// src/components/theme-switcher.tsx
+import { Monitor, Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useEffect as useEffect5, useState as useState6 } from "react";
+import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+var themes = [
+  { value: "system", label: "System", icon: Monitor },
+  { value: "light", label: "Light", icon: Sun },
+  { value: "dark", label: "Dark", icon: Moon }
+];
+function ThemeSwitcher({ small, className, onThemeSwitch, disabled }) {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState6(false);
+  useEffect5(() => setMounted(true), []);
+  const resolvedTheme = mounted ? theme : void 0;
+  return /* @__PURE__ */ jsx25(
+    "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__ */ jsxs19(
+        "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__ */ jsx25(Icon2, { className: small ? "h-3.5 w-3.5" : "h-4 w-4" }),
+            !small && label
+          ]
+        },
+        value
+      ))
+    }
+  );
+}
+
+// src/components/ticker-bar.tsx
+import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
+function TickerBar({ children, duration = 30, pauseOnHover = true, className }) {
+  return /* @__PURE__ */ jsx26(
+    "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__ */ jsxs20(
+        "div",
+        {
+          className: cn("flex w-max", pauseOnHover && "hover:[animation-play-state:paused]"),
+          style: {
+            animation: `khal-ticker ${duration}s linear infinite`
+          },
+          children: [
+            /* @__PURE__ */ jsx26("div", { className: "flex shrink-0 items-center", children }),
+            /* @__PURE__ */ jsx26("div", { className: "flex shrink-0 items-center", "aria-hidden": true, children })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/components/tooltip.tsx
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React14 from "react";
+import { jsx as jsx27, jsxs as jsxs21 } from "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__ */ jsx27(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx27(
+  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__ */ jsx27(TooltipProvider, { delayDuration, children: /* @__PURE__ */ jsxs21(TooltipRoot, { children: [
+    /* @__PURE__ */ jsx27(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx27(TooltipContent, { side: position, className: cn(desktopOnly && "max-md:hidden", className), children: text })
+  ] }) });
+}
+
+// src/components/window-minimized-context.tsx
+import { createContext, useContext } from "react";
+var WindowMinimizedContext = createContext(false);
+var WindowMinimizedProvider = WindowMinimizedContext.Provider;
+function useWindowMinimized() {
+  return useContext(WindowMinimizedContext);
+}
+var WindowActiveContext = createContext(true);
+var WindowActiveProvider = WindowActiveContext.Provider;
+function useWindowActive() {
+  return 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
+import { createContext as createContext2, useCallback as useCallback3, useContext as useContext2, useRef as useRef4, useState as useState7 } from "react";
+import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
+var SidebarContext = createContext2({
+  collapsed: false,
+  toggle: () => {
+  },
+  size: 220
+});
+function useSidebar() {
+  return useContext2(SidebarContext);
+}
+function CollapsibleSidebarRoot({
+  children,
+  defaultSize = 220,
+  min = 140,
+  max = 400,
+  defaultCollapsed = false,
+  side = "left",
+  className = ""
+}) {
+  const [collapsed, setCollapsed] = useState7(defaultCollapsed);
+  const [size, setSize] = useState7(defaultSize);
+  const dragging = useRef4(false);
+  const startX = useRef4(0);
+  const startSize = useRef4(0);
+  const toggle = useCallback3(() => setCollapsed((v) => !v), []);
+  const onPointerDown = useCallback3(
+    (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 = useCallback3(
+    (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 = useCallback3(() => {
+    dragging.current = false;
+  }, []);
+  const resizeHandle = /* @__PURE__ */ jsx28(
+    "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__ */ jsx28(SidebarContext.Provider, { value: { collapsed, toggle, size }, children: /* @__PURE__ */ jsxs22("div", { className: `flex shrink-0 ${className}`, style: { width: collapsed ? 0 : size }, children: [
+    side === "right" && resizeHandle,
+    /* @__PURE__ */ jsx28(
+      "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__ */ jsx28("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__ */ jsx28(
+    "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__ */ jsx28("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx28(
+        "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__ */ jsx28("div", { className: `flex-1 overflow-y-auto ${className}`, children });
+}
+function SidebarSection({
+  title,
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs22("div", { className: `${className}`, children: [
+    title && /* @__PURE__ */ jsx28("div", { className: "px-3 pt-2 pb-1", children: /* @__PURE__ */ jsx28("span", { className: "text-label-13 font-medium text-gray-800", children: title }) }),
+    children
+  ] });
+}
+function SidebarItem({ children, icon, active, indent = 0, onClick, className = "" }) {
+  return /* @__PURE__ */ jsxs22(
+    "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__ */ jsx28("span", { className: "shrink-0 text-gray-800 [&>svg]:h-3.5 [&>svg]:w-3.5", children: icon }),
+        /* @__PURE__ */ jsx28("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
+import { jsx as jsx29 } from "react/jsx-runtime";
+function DialogRoot({ open, onClose, children }) {
+  if (!open) return null;
+  return /* @__PURE__ */ jsx29("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40", onClick: onClose, children: /* @__PURE__ */ jsx29(
+    "div",
+    {
+      className: "bg-popover text-popover-foreground rounded-lg border p-6 shadow-lg",
+      onClick: (e) => e.stopPropagation(),
+      children
+    }
+  ) });
+}
+function Body({ children }) {
+  return /* @__PURE__ */ jsx29("div", { className: "flex items-start gap-4", children });
+}
+function Icon({ children, variant: _variant }) {
+  return /* @__PURE__ */ jsx29("div", { className: "shrink-0", children });
+}
+function Title2({ children }) {
+  return /* @__PURE__ */ jsx29("h2", { className: "text-lg font-semibold", children });
+}
+function Description({ children }) {
+  return /* @__PURE__ */ jsx29("p", { className: "text-muted-foreground text-sm", children });
+}
+function Actions({ children }) {
+  return /* @__PURE__ */ jsx29("div", { className: "mt-4 flex justify-end gap-2", children });
+}
+function Cancel({ children, ...props }) {
+  return /* @__PURE__ */ jsx29("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__ */ jsx29("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
+import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
+function EmptyState({ icon, title, description, action, compact, className = "" }) {
+  return /* @__PURE__ */ jsxs23(
+    "div",
+    {
+      className: `flex flex-col items-center justify-center text-center ${compact ? "gap-2 py-6" : "gap-3 py-12"} ${className}`,
+      children: [
+        icon && /* @__PURE__ */ jsx30("div", { className: `text-gray-700 ${compact ? "[&>svg]:h-5 [&>svg]:w-5" : "[&>svg]:h-8 [&>svg]:w-8"}`, children: icon }),
+        /* @__PURE__ */ jsxs23("div", { className: "space-y-0.5", children: [
+          /* @__PURE__ */ jsx30("p", { className: "text-label-13 font-medium text-gray-1000", children: title }),
+          description && /* @__PURE__ */ jsx30("p", { className: `text-gray-800 ${compact ? "text-label-13" : "text-label-13"}`, children: description })
+        ] }),
+        action && /* @__PURE__ */ jsx30("div", { className: "mt-2 shrink-0", children: action })
+      ]
+    }
+  );
+}
+
+// src/primitives/list-view.tsx
+import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef5, useState as useState8 } from "react";
+import { jsx as jsx31 } from "react/jsx-runtime";
+function ListView({
+  items,
+  selected,
+  onSelect,
+  onActivate,
+  renderItem,
+  getKey,
+  multiSelect = false,
+  emptyMessage = "No items",
+  className = ""
+}) {
+  const [focusIndex, setFocusIndex] = useState8(0);
+  const listRef = useRef5(null);
+  const selectedSet = new Set(selected == null ? [] : Array.isArray(selected) ? selected : [selected]);
+  const clamp = useCallback4((i) => Math.max(0, Math.min(items.length - 1, i)), [items.length]);
+  useEffect6(() => {
+    setFocusIndex((prev) => clamp(prev));
+  }, [items.length, clamp]);
+  const scrollToIndex = useCallback4((i) => {
+    const el = listRef.current?.children[i];
+    el?.scrollIntoView({ block: "nearest" });
+  }, []);
+  const handleKeyDown = useCallback4(
+    (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__ */ jsx31("div", { className: `flex h-full items-center justify-center text-label-13 text-gray-800 ${className}`, children: emptyMessage });
+  }
+  return /* @__PURE__ */ jsx31(
+    "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__ */ jsx31(
+          "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
+import { jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
+function PropertyPanelRoot({ title, children, className = "" }) {
+  return /* @__PURE__ */ jsxs24("div", { className: `flex flex-col overflow-y-auto ${className}`, children: [
+    title && /* @__PURE__ */ jsx32("div", { className: "sticky top-0 z-10 border-b border-gray-alpha-200 bg-background-100 px-3 py-2", children: /* @__PURE__ */ jsx32("h3", { className: "text-label-13 font-medium text-gray-1000", children: title }) }),
+    /* @__PURE__ */ jsx32("div", { className: "flex flex-col", children })
+  ] });
+}
+function PropertySection({
+  title,
+  children,
+  collapsible: _collapsible = false,
+  defaultOpen: _defaultOpen = true
+}) {
+  return /* @__PURE__ */ jsxs24("div", { className: "border-b border-gray-alpha-200 last:border-b-0", children: [
+    title && /* @__PURE__ */ jsx32("div", { className: "px-3 pt-3 pb-1", children: /* @__PURE__ */ jsx32("span", { className: "text-label-13 font-medium text-gray-800", children: title }) }),
+    /* @__PURE__ */ jsx32("div", { className: `px-3 pb-2 ${title ? "" : "pt-2"}`, children })
+  ] });
+}
+function PropertyRow({ label, value, children, mono }) {
+  return /* @__PURE__ */ jsxs24("div", { className: "flex items-baseline justify-between gap-4 py-1", children: [
+    /* @__PURE__ */ jsx32("dt", { className: "shrink-0 text-label-13 text-gray-800", children: label }),
+    /* @__PURE__ */ jsx32("dd", { className: `min-w-0 truncate text-right text-label-13 text-gray-1000 ${mono ? "font-mono" : ""}`, children: children ?? value })
+  ] });
+}
+function PropertySeparator() {
+  return /* @__PURE__ */ jsx32(Separator3, { className: "my-1" });
+}
+var PropertyPanel = Object.assign(PropertyPanelRoot, {
+  Section: PropertySection,
+  Row: PropertyRow,
+  Separator: PropertySeparator
+});
+
+// src/primitives/section-header.tsx
+import { jsx as jsx33, jsxs as jsxs25 } from "react/jsx-runtime";
+function SectionHeader({
+  title,
+  description,
+  children
+}) {
+  return /* @__PURE__ */ jsxs25("div", { className: "mb-4 flex items-start justify-between", children: [
+    /* @__PURE__ */ jsxs25("div", { children: [
+      /* @__PURE__ */ jsx33("h2", { className: "text-copy-13 font-medium text-gray-1000", children: title }),
+      description && /* @__PURE__ */ jsx33("p", { className: "mt-0.5 text-copy-13 text-gray-900", children: description })
+    ] }),
+    children
+  ] });
+}
+
+// src/primitives/sidebar-nav.tsx
+import { jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
+function SidebarNavRoot({ children, label, title, className = "" }) {
+  return /* @__PURE__ */ jsxs26("nav", { className: `flex flex-col py-2 ${className}`, "aria-label": label, children: [
+    title && /* @__PURE__ */ jsx34("div", { className: "px-3 pb-1", children: /* @__PURE__ */ jsx34("span", { className: "text-copy-13 font-medium text-gray-800", children: title }) }),
+    children
+  ] });
+}
+function SidebarNavGroup({ children, title, className = "" }) {
+  return /* @__PURE__ */ jsxs26("div", { className, children: [
+    title && /* @__PURE__ */ jsx34("div", { className: "px-3 pt-4 pb-1", children: /* @__PURE__ */ jsx34("span", { className: "text-copy-13 font-medium text-gray-800", children: title }) }),
+    children
+  ] });
+}
+function SidebarNavItem({ children, active, onClick, icon, suffix, className = "" }) {
+  return /* @__PURE__ */ jsxs26(
+    "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__ */ jsx34("span", { className: "shrink-0 text-gray-800 [&>svg]:h-3.5 [&>svg]:w-3.5", children: icon }),
+        /* @__PURE__ */ jsx34("span", { className: "min-w-0 truncate", children }),
+        suffix && /* @__PURE__ */ jsx34("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
+import { useCallback as useCallback5, useRef as useRef6, useState as useState9, useSyncExternalStore } from "react";
+import { jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
+function useMediaQuery(query) {
+  const subscribe = useCallback5(
+    (callback) => {
+      const mql = window.matchMedia(query);
+      mql.addEventListener("change", callback);
+      return () => mql.removeEventListener("change", callback);
+    },
+    [query]
+  );
+  const getSnapshot = useCallback5(() => window.matchMedia(query).matches, [query]);
+  const getServerSnapshot = useCallback5(() => false, []);
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+function SplitPaneRoot({
+  children,
+  direction = "horizontal",
+  defaultSize = 240,
+  min = 100,
+  max = 600,
+  collapseBelow = 640,
+  onResize,
+  className = ""
+}) {
+  const [size, setSize] = useState9(defaultSize);
+  const containerRef = useRef6(null);
+  const dragging = useRef6(false);
+  const startPos = useRef6(0);
+  const startSize = useRef6(0);
+  const isMobile = useMediaQuery(`(max-width: ${collapseBelow}px)`);
+  const isHorizontal = direction === "horizontal" && !isMobile;
+  const [first, second] = children;
+  const onPointerDown = useCallback5(
+    (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 = useCallback5(
+    (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 = useCallback5(() => {
+    dragging.current = false;
+  }, []);
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs27("div", { ref: containerRef, className: `flex flex-col h-full w-full overflow-hidden ${className}`, children: [
+      /* @__PURE__ */ jsx35("div", { className: "shrink-0 overflow-auto border-b border-gray-alpha-200", children: first }),
+      /* @__PURE__ */ jsx35("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__ */ jsxs27(
+    "div",
+    {
+      ref: containerRef,
+      className: `flex ${isHorizontal ? "flex-row" : "flex-col"} h-full w-full overflow-hidden ${className}`,
+      children: [
+        /* @__PURE__ */ jsx35("div", { style: firstStyle, className: "overflow-hidden", children: first }),
+        /* @__PURE__ */ jsx35(
+          "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__ */ jsx35("div", { className: "flex-1 overflow-hidden", children: second })
+      ]
+    }
+  );
+}
+function Panel({ children, className = "" }) {
+  return /* @__PURE__ */ jsx35("div", { className: `h-full w-full overflow-auto ${className}`, children });
+}
+var SplitPane = Object.assign(SplitPaneRoot, {
+  Panel
+});
+
+// src/primitives/status-badge.tsx
+import { jsx as jsx36 } from "react/jsx-runtime";
+function StatusBadge({ status }) {
+  const variant = status === "active" ? "green" : status === "creating" ? "amber" : status === "error" ? "red" : "gray";
+  return /* @__PURE__ */ jsx36(Badge, { variant, size: "sm", contrast: "low", children: status });
+}
+
+// src/primitives/status-bar.tsx
+import { jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
+function StatusBarRoot({ children, className = "" }) {
+  return /* @__PURE__ */ jsx37(
+    "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__ */ jsxs28("button", { className: classes, onClick, children: [
+      icon,
+      children
+    ] });
+  }
+  return /* @__PURE__ */ jsxs28("span", { className: classes, children: [
+    icon,
+    children
+  ] });
+}
+function StatusBarSeparator() {
+  return /* @__PURE__ */ jsx37(Separator3, { orientation: "vertical", className: "mx-0.5 h-3" });
+}
+function StatusBarSpacer() {
+  return /* @__PURE__ */ jsx37("div", { className: "flex-1" });
+}
+var StatusBar = Object.assign(StatusBarRoot, {
+  Item: StatusBarItem,
+  Separator: StatusBarSeparator,
+  Spacer: StatusBarSpacer
+});
+
+// src/primitives/toolbar.tsx
+import { forwardRef as forwardRef15 } from "react";
+import { jsx as jsx38 } from "react/jsx-runtime";
+function ToolbarRoot({ children, className = "" }) {
+  return /* @__PURE__ */ jsx38(
+    "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 = forwardRef15(function ToolbarButton2({ tooltip, active, children, className = "", disabled, ...props }, ref) {
+  const btn = /* @__PURE__ */ jsx38(
+    "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__ */ jsx38(Tooltip, { text: tooltip, desktopOnly: true, children: btn });
+  }
+  return btn;
+});
+function ToolbarGroup({ children, className = "" }) {
+  return /* @__PURE__ */ jsx38("div", { className: `flex items-center gap-px ${className}`, children });
+}
+function ToolbarSeparator() {
+  return /* @__PURE__ */ jsx38(Separator3, { orientation: "vertical", className: "mx-1 h-4" });
+}
+function ToolbarSpacer() {
+  return /* @__PURE__ */ jsx38("div", { className: "flex-1" });
+}
+function ToolbarText({ children, className = "" }) {
+  return /* @__PURE__ */ jsx38("span", { className: `px-1.5 text-label-13 text-gray-900 ${className}`, children });
+}
+function ToolbarInput({
+  value,
+  onChange,
+  placeholder,
+  className = "",
+  readOnly
+}) {
+  return /* @__PURE__ */ jsx38(
+    "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
+import { create as create2 } from "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 = create2()((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";
+export {
+  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,
+  MeshGradientInner as MeshGradient,
+  MetricDisplay,
+  Note,
+  NumberFlow,
+  PillBadge,
+  ProgressBar,
+  PropertyPanel,
+  SUBJECTS,
+  SectionCard,
+  SectionCardHeader,
+  SectionHeader,
+  Separator3 as 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,
+  useKhalAuth2 as useOSAuth,
+  useReducedMotion,
+  useSidebar,
+  useThemeStore,
+  useWindowActive,
+  useWindowMinimized
+};
+//# sourceMappingURL=index.js.map