@khal-os/ui 1.0.0 → 1.0.2

package/dist/index.d.ts

@@ -0,0 +1,926 @@
+export { SUBJECTS, useKhalAuth, useNats, useNatsSubscription, useKhalAuth as useOSAuth } from '@khal-os/sdk/app';
+import * as React$1 from 'react';
+import { ComponentProps, ReactNode, ButtonHTMLAttributes } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Command as Command$1 } from 'cmdk';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import NumberFlowBase from '@number-flow/react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { ThemeProvider as ThemeProvider$1 } from 'next-themes';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as zustand from 'zustand';
+import * as zustand_middleware from 'zustand/middleware';
+import { ClassValue } from 'clsx';
+
+declare const sizeMap$2: {
+    readonly sm: 24;
+    readonly md: 32;
+    readonly lg: 40;
+};
+interface AvatarProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    name: string;
+    size?: keyof typeof sizeMap$2;
+    status?: 'online' | 'idle' | 'away' | null;
+    src?: string;
+}
+declare const Avatar: React$1.ForwardRefExoticComponent<AvatarProps & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const badgeVariants: (props?: ({
+    variant?: "blue" | "gray" | "green" | "pink" | "purple" | "red" | "teal" | "amber" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+    contrast?: 'low' | 'high';
+}
+declare function Badge({ className, variant, size, contrast, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+declare const buttonVariants: (props?: ({
+    variant?: "error" | "link" | "default" | "secondary" | "tertiary" | "warning" | "ghost" | null | undefined;
+    size?: "small" | "medium" | "large" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ButtonVariantProps = VariantProps<typeof buttonVariants>;
+interface ButtonProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'prefix'>, ButtonVariantProps {
+    asChild?: boolean;
+    loading?: boolean;
+    prefix?: React$1.ReactNode;
+    suffix?: React$1.ReactNode;
+    /** HTML button type attribute (named typeName for compat with geistcn API) */
+    typeName?: 'submit' | 'button' | 'reset';
+    /** Visual type — maps to variant for compat */
+    type?: 'shadow' | 'invert' | 'unstyled';
+}
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+declare const ContextMenu: React$1.FC<ContextMenuPrimitive.ContextMenuProps>;
+declare const ContextMenuTrigger: React$1.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & React$1.RefAttributes<HTMLSpanElement>>;
+declare const ContextMenuGroup: React$1.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuPortal: React$1.FC<ContextMenuPrimitive.ContextMenuPortalProps>;
+declare const ContextMenuSub: React$1.FC<ContextMenuPrimitive.ContextMenuSubProps>;
+declare const ContextMenuRadioGroup: React$1.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuRadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuSubTrigger: React$1.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubTriggerProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuSubContent: React$1.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuContent: React$1.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuItem: React$1.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuSeparator: React$1.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const Command: React$1.ForwardRefExoticComponent<Omit<{
+    children?: React$1.ReactNode;
+} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React$1.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
+    label?: string;
+    shouldFilter?: boolean;
+    filter?: (value: string, search: string, keywords?: string[]) => number;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    loop?: boolean;
+    disablePointerSelection?: boolean;
+    vimBindings?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare function CommandDialog({ children, open, onOpenChange, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Root> & React$1.ComponentPropsWithoutRef<typeof Command$1>): react_jsx_runtime.JSX.Element;
+declare const CommandInput: React$1.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React$1.InputHTMLAttributes<HTMLInputElement>> & {
+    ref?: React$1.Ref<HTMLInputElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React$1.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+    value?: string;
+    onValueChange?: (search: string) => void;
+} & React$1.RefAttributes<HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+declare const CommandList: React$1.ForwardRefExoticComponent<Omit<{
+    children?: React$1.ReactNode;
+} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React$1.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
+    label?: string;
+} & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CommandEmpty: React$1.ForwardRefExoticComponent<Omit<{
+    children?: React$1.ReactNode;
+} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React$1.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CommandGroup: React$1.ForwardRefExoticComponent<Omit<{
+    children?: React$1.ReactNode;
+} & Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React$1.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
+    heading?: React$1.ReactNode;
+    value?: string;
+    forceMount?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CommandSeparator: React$1.ForwardRefExoticComponent<Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React$1.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
+    alwaysRender?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CommandItem: React$1.ForwardRefExoticComponent<Omit<{
+    children?: React$1.ReactNode;
+} & Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React$1.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    value?: string;
+    keywords?: string[];
+    forceMount?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    prefix?: React$1.ReactNode;
+    callback?: () => void;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const CommandShortcut: ({ className, ...props }: React$1.HTMLAttributes<HTMLSpanElement>) => react_jsx_runtime.JSX.Element;
+
+interface CostCounterProps {
+    /** The target numeric value to animate to */
+    value: number;
+    /** Text suffix after the number (e.g. "%", "pts", "k") */
+    suffix?: string;
+    /** Text prefix before the number (e.g. "$", "+") */
+    prefix?: string;
+    /** Primary label below the number */
+    label: string;
+    /** Secondary description text */
+    description?: string;
+    /** Budget bar target percentage (0-100). Omit to hide the bar. */
+    budget?: number;
+    /** Budget bar color — defaults to accent-warm */
+    budgetColor?: string;
+    className?: string;
+}
+declare function CostCounter({ value, suffix, prefix, label, description, budget, budgetColor, className }: CostCounterProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * DataRow — LP section-level key-value / data display component.
+ *
+ * Extracted from khal-landing section components:
+ * - Architecture.tsx: font-mono code rules (IF/THEN/ELSE patterns)
+ * - Architecture.tsx: connection rows with status dots
+ * - Omnichannel-spotlight.tsx: channel count rows (font-mono tabular-nums)
+ * - Omnichannel-spotlight.tsx: observability inline data
+ *
+ * Renders a horizontal key-value pair with monospace font and optional accent.
+ */
+declare const dataRowVariants: (props?: ({
+    variant?: "default" | "inline" | "rule" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface DataRowProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof dataRowVariants> {
+    /** The label/key portion (left side) */
+    label: string;
+    /** The value portion (right side, pushed to end) */
+    value?: string;
+    /** Accent color for the value text */
+    accentColor?: string;
+    /** Show a status dot before the label */
+    statusDot?: boolean;
+    /** Custom status dot color */
+    dotColor?: string;
+    /** Optional tag/badge to show before the label (e.g. "IF", "THEN") */
+    tag?: string;
+    /** Tag color — defaults to accent */
+    tagColor?: string;
+}
+declare const DataRow: React$1.ForwardRefExoticComponent<DataRowProps & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const DropdownMenu: React$1.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+declare const DropdownMenuTrigger: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuGroup: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuPortal: React$1.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+declare const DropdownMenuSub: React$1.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+declare const DropdownMenuRadioGroup: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubTrigger: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubContent: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+    prefix?: React$1.ReactNode;
+    suffix?: React$1.ReactNode;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuCheckboxItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuRadioItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuLabel: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuShortcut: ({ className, ...props }: React$1.HTMLAttributes<HTMLSpanElement>) => react_jsx_runtime.JSX.Element;
+
+declare const glassCardVariants: (props?: ({
+    variant?: "default" | "raised" | null | undefined;
+    padding?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface GlassCardProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof glassCardVariants> {
+    hover?: boolean;
+    glow?: string;
+}
+declare const GlassCard: React$1.ForwardRefExoticComponent<GlassCardProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Label above the input (geistcn compat) */
+    label?: string;
+    /** Size variant (geistcn compat) */
+    size?: 'small' | 'medium' | 'large';
+    /** HTML input type (named typeName for geistcn compat, also accepts type) */
+    typeName?: string;
+}
+declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
+
+interface KhalLogoProps {
+    size?: number;
+    variant?: 'light' | 'dark';
+    className?: string;
+}
+/**
+ * KhalLogo — SVG wordmark for large sizes (>=20), single "K" letterform for small sizes.
+ * Uses currentColor so color is inherited from parent.
+ */
+declare function KhalLogo({ size, variant, className }: KhalLogoProps): react_jsx_runtime.JSX.Element;
+
+type FeedEventType = 'info' | 'success' | 'warning' | 'error' | 'agent' | 'system';
+interface FeedEvent {
+    id: string;
+    type: FeedEventType;
+    message: string;
+    timestamp?: Date;
+}
+interface LiveFeedProps {
+    /** Initial events to render */
+    events?: FeedEvent[];
+    /** Maximum visible events before oldest are removed */
+    maxVisible?: number;
+    /** Show timestamps next to events */
+    showTimestamps?: boolean;
+    /** Height of the feed container */
+    height?: number | string;
+    className?: string;
+}
+declare function LiveFeed({ events: externalEvents, maxVisible, showTimestamps, height, className, }: LiveFeedProps): react_jsx_runtime.JSX.Element;
+
+interface MeshGradientProps {
+    /** Array of CSS color strings (typically 4-8) */
+    colors: string[];
+    /** Animation speed multiplier (default 0.02) */
+    speed?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare function MeshGradientInner({ colors, speed, className, style }: MeshGradientProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * MetricDisplay — LP section-level metric/stat component.
+ *
+ * Extracted from khal-landing section components:
+ * - Stat cards in metrics.tsx (large numbers with suffix/prefix)
+ * - Metric tiles in architecture.tsx AppBuilderMockup
+ * - ROI projected savings in metrics.tsx
+ *
+ * Renders a large highlighted value with a label and optional description.
+ */
+declare const metricDisplayVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface MetricDisplayProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof metricDisplayVariants> {
+    /** The primary value to display */
+    value: string | number;
+    /** Label describing the metric */
+    label: string;
+    /** Optional description/subtext below the label */
+    description?: string;
+    /** Optional prefix before the value (e.g. "+", "$") */
+    prefix?: string;
+    /** Optional suffix after the value (e.g. "%", "pts", "ms") */
+    suffix?: string;
+    /** Accent color for the value. Defaults to current text color. */
+    accentColor?: string;
+}
+declare const MetricDisplay: React$1.ForwardRefExoticComponent<MetricDisplayProps & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const noteVariants: (props?: ({
+    type?: "error" | "default" | "warning" | "success" | null | undefined;
+    size?: "small" | "default" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface NoteProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof noteVariants> {
+    type?: 'default' | 'error' | 'warning' | 'success';
+    label?: boolean | string;
+    action?: React$1.ReactNode;
+    disabled?: boolean;
+    fill?: boolean;
+}
+declare function Note({ className, type, size, label, action, children, ...props }: NoteProps): react_jsx_runtime.JSX.Element;
+
+type NumberFlowProps = ComponentProps<typeof NumberFlowBase>;
+/**
+ * NumberFlow — animated number transitions via @number-flow/react.
+ * Thin wrapper that sets KhalOS-branded timing defaults.
+ */
+declare function NumberFlow({ transformTiming, spinTiming, opacityTiming, ...props }: NumberFlowProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * PillBadge — LP section-level badge/tag component.
+ *
+ * Extracted from khal-landing section components:
+ * - Capability tags (omnichannel-spotlight.tsx)
+ * - Section label pills (fast-secure.tsx header)
+ * - Compliance badges (fast-secure.tsx badge strip)
+ * - Accent badges (metrics.tsx ROI calculator)
+ *
+ * Always uppercase with wide tracking — the LP's signature badge style.
+ */
+declare const pillBadgeVariants: (props?: ({
+    variant?: "default" | "muted" | "accent" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface PillBadgeProps extends React$1.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof pillBadgeVariants> {
+    /** Show a small dot indicator before the text */
+    dot?: boolean;
+    /** Custom dot color (defaults to current text color at 40% opacity) */
+    dotColor?: string;
+}
+declare const PillBadge: React$1.ForwardRefExoticComponent<PillBadgeProps & React$1.RefAttributes<HTMLSpanElement>>;
+
+declare const progressBarVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ProgressBarProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'color'>, VariantProps<typeof progressBarVariants> {
+    value: number;
+    max?: number;
+    color?: string;
+    showLabel?: boolean;
+}
+declare function ProgressBar({ value, max, color, size, showLabel, className, ...props }: ProgressBarProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * SectionCard — LP section-level card component.
+ *
+ * Extracted from khal-landing section components (architecture.tsx, fast-secure.tsx).
+ * Two variants matching the LP's two card styles:
+ * - `default`: full-border card (architecture section outer cards)
+ * - `inset`: top-left border card (architecture mockup panels)
+ */
+declare const sectionCardVariants: (props?: ({
+    variant?: "inset" | "solid" | "default" | null | undefined;
+    padding?: "sm" | "md" | "lg" | "none" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SectionCardProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof sectionCardVariants> {
+    /** Optional gradient overlay color (hex). Renders a subtle top-down gradient. */
+    glow?: string;
+}
+declare const SectionCard: React$1.ForwardRefExoticComponent<SectionCardProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * SectionCardHeader — optional header row with bottom border separator.
+ * Matches the LP mockup panel headers: `py-3 px-4 border-b border-[#FFFFFF1A]`.
+ */
+declare function SectionCardHeader({ className, children, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare namespace SectionCardHeader {
+    var displayName: string;
+}
+
+declare const Separator: React$1.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const sizeMap$1: {
+    readonly sm: 16;
+    readonly md: 20;
+    readonly lg: 24;
+};
+interface SpinnerProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    size?: keyof typeof sizeMap$1;
+}
+declare function Spinner({ size, className, ...props }: SpinnerProps): react_jsx_runtime.JSX.Element;
+
+declare const sizeMap: {
+    readonly sm: 8;
+    readonly md: 10;
+    readonly lg: 12;
+};
+/** All recognized status states */
+type StatusState = 'live' | 'online' | 'active' | 'working' | 'idle' | 'away' | 'queued' | 'error';
+declare const stateConfig: Record<StatusState, {
+    color: string;
+    label: string;
+    pulse: boolean;
+}>;
+interface StatusDotProps extends React$1.HTMLAttributes<HTMLSpanElement> {
+    /** Typed state — determines color, pulse, and label automatically */
+    state?: StatusState;
+    /** Manual color override (legacy support) */
+    color?: string;
+    /** Manual pulse override */
+    pulse?: boolean;
+    size?: keyof typeof sizeMap;
+    /** Manual label override */
+    label?: string;
+    /** Show text label next to dot */
+    showLabel?: boolean;
+}
+declare function StatusDot({ state, color: colorProp, pulse: pulseProp, size, label: labelProp, showLabel, className, style, ...props }: StatusDotProps): react_jsx_runtime.JSX.Element;
+
+interface ToggleProps extends Omit<React$1.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, 'onChange'> {
+    onChange?: (checked: boolean) => void;
+}
+declare const Toggle: React$1.ForwardRefExoticComponent<ToggleProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+declare function ThemeProvider({ children, ...props }: React.ComponentProps<typeof ThemeProvider$1>): react_jsx_runtime.JSX.Element;
+
+interface ThemeSwitcherProps {
+    small?: boolean;
+    className?: string;
+    onThemeSwitch?: (theme: string) => void;
+    disabled?: boolean;
+}
+declare function ThemeSwitcher({ small, className, onThemeSwitch, disabled }: ThemeSwitcherProps): react_jsx_runtime.JSX.Element;
+
+interface TickerBarProps {
+    /** Items to scroll — rendered twice for seamless looping */
+    children: ReactNode;
+    /** Animation duration in seconds (default 30) */
+    duration?: number;
+    /** Pause on hover */
+    pauseOnHover?: boolean;
+    className?: string;
+}
+declare function TickerBar({ children, duration, pauseOnHover, className }: TickerBarProps): react_jsx_runtime.JSX.Element;
+
+declare const TooltipProvider: React$1.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const TooltipRoot: React$1.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React$1.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+interface SimpleTooltipProps {
+    text: React$1.ReactNode;
+    children: React$1.ReactNode;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    delay?: boolean;
+    delayTime?: number;
+    desktopOnly?: boolean;
+    className?: string;
+}
+declare function Tooltip({ text, children, position, delay, delayTime, desktopOnly, className }: SimpleTooltipProps): react_jsx_runtime.JSX.Element;
+
+declare const WindowMinimizedProvider: React$1.Provider<boolean>;
+declare function useWindowMinimized(): boolean;
+declare const WindowActiveProvider: React$1.Provider<boolean>;
+declare function useWindowActive(): boolean;
+
+/**
+ * Returns true when the user prefers reduced motion (OS setting or app toggle).
+ */
+declare function useReducedMotion(): boolean;
+
+/**
+ * KhalOS animation presets — motion.js configurations for OS-wide use.
+ * Import these in components for consistent, branded animations.
+ */
+/** Custom easing curve — KhalOS primary */
+declare const khalEasing: readonly [0.22, 1, 0.36, 1];
+/** Spring config for interactive elements */
+declare const springConfig: {
+    readonly stiffness: 300;
+    readonly damping: 22;
+};
+/** Window open animation — fade up with blur */
+declare const fadeUp: {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly y: 12;
+        readonly filter: "blur(4px)";
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly y: 0;
+        readonly filter: "blur(0px)";
+    };
+    readonly transition: {
+        readonly duration: 0.7;
+        readonly ease: readonly [0.22, 1, 0.36, 1];
+    };
+};
+/** App launch animation — scale up with blur */
+declare const scaleUp: {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly scale: 0.96;
+        readonly filter: "blur(6px)";
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly scale: 1;
+        readonly filter: "blur(0px)";
+    };
+    readonly transition: {
+        readonly duration: 0.9;
+        readonly ease: readonly [0.22, 1, 0.36, 1];
+    };
+};
+/** Stagger container — children appear with 0.12s delay */
+declare const staggerContainer: {
+    readonly animate: {
+        readonly transition: {
+            readonly staggerChildren: 0.12;
+        };
+    };
+};
+/** Stagger child — each item fades up */
+declare const staggerChild: {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly y: 8;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly y: 0;
+    };
+    readonly transition: {
+        readonly duration: 0.4;
+        readonly ease: readonly [0.22, 1, 0.36, 1];
+    };
+};
+/** Fade in — simple opacity animation */
+declare const fadeIn: {
+    readonly initial: {
+        readonly opacity: 0;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+    };
+    readonly transition: {
+        readonly duration: 0.5;
+        readonly ease: readonly [0.22, 1, 0.36, 1];
+    };
+};
+
+interface SidebarContextValue {
+    collapsed: boolean;
+    toggle: () => void;
+    size: number;
+}
+declare function useSidebar(): SidebarContextValue;
+interface CollapsibleSidebarProps {
+    children: ReactNode;
+    defaultSize?: number;
+    min?: number;
+    max?: number;
+    defaultCollapsed?: boolean;
+    side?: 'left' | 'right';
+    className?: string;
+}
+declare function CollapsibleSidebarRoot({ children, defaultSize, min, max, defaultCollapsed, side, className, }: CollapsibleSidebarProps): react_jsx_runtime.JSX.Element;
+declare function SidebarHeader({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function CollapseButton({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SidebarContent({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function SidebarSection({ title, children, className, }: {
+    title?: string;
+    children: ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+interface SidebarItemProps {
+    children: ReactNode;
+    icon?: ReactNode;
+    active?: boolean;
+    indent?: number;
+    onClick?: () => void;
+    className?: string;
+}
+declare function SidebarItem({ children, icon, active, indent, onClick, className }: SidebarItemProps): react_jsx_runtime.JSX.Element;
+declare const CollapsibleSidebar: typeof CollapsibleSidebarRoot & {
+    Header: typeof SidebarHeader;
+    CollapseButton: typeof CollapseButton;
+    Content: typeof SidebarContent;
+    Section: typeof SidebarSection;
+    Item: typeof SidebarItem;
+};
+
+interface DialogRootProps {
+    open: boolean;
+    onClose: () => void;
+    children: ReactNode;
+}
+declare function DialogRoot({ open, onClose, children }: DialogRootProps): react_jsx_runtime.JSX.Element | null;
+declare function Body({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function Icon({ children, variant: _variant }: {
+    children: ReactNode;
+    variant?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function Title({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function Description({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function Actions({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+type BtnProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: string;
+};
+declare function Cancel({ children, ...props }: BtnProps): react_jsx_runtime.JSX.Element;
+declare function Confirm({ children, variant: _variant, ...props }: BtnProps): react_jsx_runtime.JSX.Element;
+declare const Dialog: typeof DialogRoot & {
+    Body: typeof Body;
+    Icon: typeof Icon;
+    Title: typeof Title;
+    Description: typeof Description;
+    Actions: typeof Actions;
+    Cancel: typeof Cancel;
+    Confirm: typeof Confirm;
+};
+
+interface EmptyStateProps {
+    icon?: ReactNode;
+    title: string;
+    description?: string;
+    action?: ReactNode;
+    compact?: boolean;
+    className?: string;
+}
+declare function EmptyState({ icon, title, description, action, compact, className }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+interface ListViewProps<T> {
+    items: T[];
+    selected?: string | string[] | null;
+    onSelect?: (key: string | null) => void;
+    onActivate?: (item: T) => void;
+    renderItem: (item: T, state: {
+        selected: boolean;
+        focused: boolean;
+        index: number;
+    }) => ReactNode;
+    getKey: (item: T) => string;
+    multiSelect?: boolean;
+    emptyMessage?: string;
+    className?: string;
+}
+declare function ListView<T>({ items, selected, onSelect, onActivate, renderItem, getKey, multiSelect, emptyMessage, className, }: ListViewProps<T>): react_jsx_runtime.JSX.Element;
+
+interface PropertyPanelProps {
+    title?: string;
+    children: ReactNode;
+    className?: string;
+}
+declare function PropertyPanelRoot({ title, children, className }: PropertyPanelProps): react_jsx_runtime.JSX.Element;
+declare function PropertySection({ title, children, collapsible: _collapsible, defaultOpen: _defaultOpen, }: {
+    title?: string;
+    children: ReactNode;
+    collapsible?: boolean;
+    defaultOpen?: boolean;
+}): react_jsx_runtime.JSX.Element;
+interface PropertyRowProps {
+    label: string;
+    value?: ReactNode;
+    children?: ReactNode;
+    mono?: boolean;
+    copyable?: boolean;
+}
+declare function PropertyRow({ label, value, children, mono }: PropertyRowProps): react_jsx_runtime.JSX.Element;
+declare function PropertySeparator(): react_jsx_runtime.JSX.Element;
+declare const PropertyPanel: typeof PropertyPanelRoot & {
+    Section: typeof PropertySection;
+    Row: typeof PropertyRow;
+    Separator: typeof PropertySeparator;
+};
+
+declare function SectionHeader({ title, description, children, }: {
+    title: string;
+    description?: string;
+    children?: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+interface SidebarNavProps {
+    children: ReactNode;
+    /** Accessible label for the <nav> element */
+    label: string;
+    /** Optional heading displayed at the top of the sidebar */
+    title?: string;
+    className?: string;
+}
+declare function SidebarNavRoot({ children, label, title, className }: SidebarNavProps): react_jsx_runtime.JSX.Element;
+interface SidebarNavGroupProps {
+    children: ReactNode;
+    title?: string;
+    className?: string;
+}
+declare function SidebarNavGroup({ children, title, className }: SidebarNavGroupProps): react_jsx_runtime.JSX.Element;
+interface SidebarNavItemProps {
+    children: ReactNode;
+    active?: boolean;
+    onClick?: () => void;
+    icon?: ReactNode;
+    /** Trailing content (e.g. a count badge) */
+    suffix?: ReactNode;
+    className?: string;
+}
+declare function SidebarNavItem({ children, active, onClick, icon, suffix, className }: SidebarNavItemProps): react_jsx_runtime.JSX.Element;
+declare const SidebarNav: typeof SidebarNavRoot & {
+    Group: typeof SidebarNavGroup;
+    Item: typeof SidebarNavItem;
+};
+
+interface SplitPaneProps {
+    children: [ReactNode, ReactNode];
+    direction?: 'horizontal' | 'vertical';
+    defaultSize?: number;
+    min?: number;
+    max?: number;
+    /** On narrow viewports, stack panels vertically and hide the resize handle */
+    collapseBelow?: number;
+    onResize?: (size: number) => void;
+    className?: string;
+}
+declare function SplitPaneRoot({ children, direction, defaultSize, min, max, collapseBelow, onResize, className, }: SplitPaneProps): react_jsx_runtime.JSX.Element;
+declare function Panel({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare const SplitPane: typeof SplitPaneRoot & {
+    Panel: typeof Panel;
+};
+
+declare function StatusBadge({ status }: {
+    status: string;
+}): react_jsx_runtime.JSX.Element;
+
+interface StatusBarProps {
+    children: ReactNode;
+    className?: string;
+}
+declare function StatusBarRoot({ children, className }: StatusBarProps): react_jsx_runtime.JSX.Element;
+interface StatusBarItemProps {
+    children: ReactNode;
+    icon?: ReactNode;
+    variant?: 'default' | 'success' | 'warning' | 'error';
+    onClick?: () => void;
+    className?: string;
+}
+declare function StatusBarItem({ children, icon, variant, onClick, className }: StatusBarItemProps): react_jsx_runtime.JSX.Element;
+declare function StatusBarSeparator(): react_jsx_runtime.JSX.Element;
+declare function StatusBarSpacer(): react_jsx_runtime.JSX.Element;
+declare const StatusBar: typeof StatusBarRoot & {
+    Item: typeof StatusBarItem;
+    Separator: typeof StatusBarSeparator;
+    Spacer: typeof StatusBarSpacer;
+};
+
+interface ToolbarProps {
+    children: ReactNode;
+    className?: string;
+}
+declare function ToolbarRoot({ children, className }: ToolbarProps): react_jsx_runtime.JSX.Element;
+interface ToolbarButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    tooltip?: string;
+    active?: boolean;
+    children: ReactNode;
+}
+declare function ToolbarGroup({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function ToolbarSeparator(): react_jsx_runtime.JSX.Element;
+declare function ToolbarSpacer(): react_jsx_runtime.JSX.Element;
+declare function ToolbarText({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function ToolbarInput({ value, onChange, placeholder, className, readOnly, }: {
+    value?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+    className?: string;
+    readOnly?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare const Toolbar: typeof ToolbarRoot & {
+    Button: React$1.ForwardRefExoticComponent<ToolbarButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+    Group: typeof ToolbarGroup;
+    Separator: typeof ToolbarSeparator;
+    Spacer: typeof ToolbarSpacer;
+    Text: typeof ToolbarText;
+    Input: typeof ToolbarInput;
+};
+
+type NotificationUrgency = 'low' | 'normal' | 'critical';
+type DesktopNotifMode = 'background' | 'always' | 'off';
+interface DesktopNotification {
+    id: number;
+    replacesId: number;
+    appName: string;
+    summary: string;
+    body: string;
+    icon: string | null;
+    actions: string[];
+    expires: number;
+    timestamp: number;
+    read: boolean;
+    urgency: NotificationUrgency;
+    category: string | null;
+    transient: boolean;
+    workspaceId: string | null;
+}
+interface TrayIcon {
+    wid: number;
+    title: string;
+    icon: string | null;
+}
+interface NotificationStore {
+    notifications: DesktopNotification[];
+    history: DesktopNotification[];
+    trayIcons: Map<number, TrayIcon>;
+    centerOpen: boolean;
+    unreadCount: number;
+    doNotDisturb: boolean;
+    desktopNotifMode: DesktopNotifMode;
+    browserPermission: NotificationPermission;
+    setDoNotDisturb: (value: boolean) => void;
+    setDesktopNotifMode: (mode: DesktopNotifMode) => void;
+    requestBrowserPermission: () => Promise<NotificationPermission>;
+    syncBrowserPermission: () => void;
+    addNotification: (notification: Omit<DesktopNotification, 'timestamp' | 'read' | 'appName' | 'urgency' | 'category' | 'transient' | 'workspaceId'> & Partial<Pick<DesktopNotification, 'appName' | 'urgency' | 'category' | 'transient' | 'workspaceId'>>) => void;
+    dismissNotification: (id: number) => void;
+    hideNotification: (id: number) => void;
+    clearHistory: () => void;
+    markAllRead: () => void;
+    toggleCenter: () => void;
+    closeCenter: () => void;
+    addTrayIcon: (icon: TrayIcon) => void;
+    removeTrayIcon: (wid: number) => void;
+    updateTrayIcon: (wid: number, updates: Partial<TrayIcon>) => void;
+}
+declare const useNotificationStore: zustand.UseBoundStore<zustand.StoreApi<NotificationStore>>;
+
+type ThemeMode = 'light' | 'dark' | 'system';
+interface ThemeStore {
+    mode: ThemeMode;
+    setMode: (mode: ThemeMode) => void;
+    reduceMotion: boolean;
+    setReduceMotion: (value: boolean) => void;
+    glassEnabled: boolean;
+    setGlassEnabled: (value: boolean) => void;
+    gpuTerminals: boolean;
+    setGpuTerminals: (value: boolean) => void;
+}
+declare const useThemeStore: zustand.UseBoundStore<Omit<zustand.StoreApi<ThemeStore>, "setState" | "persist"> & {
+    setState(partial: ThemeStore | Partial<ThemeStore> | ((state: ThemeStore) => ThemeStore | Partial<ThemeStore>), replace?: false | undefined): unknown;
+    setState(state: ThemeStore | ((state: ThemeStore) => ThemeStore), replace: true): unknown;
+    persist: {
+        setOptions: (options: Partial<zustand_middleware.PersistOptions<ThemeStore, ThemeStore, unknown>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: ThemeStore) => void) => () => void;
+        onFinishHydration: (fn: (state: ThemeStore) => void) => () => void;
+        getOptions: () => Partial<zustand_middleware.PersistOptions<ThemeStore, ThemeStore, unknown>>;
+    };
+}>;
+
+/**
+ * LP Design Tokens — extracted from khal-landing hero-os-showcase.tsx
+ * These are the canonical reference colors from the landing page.
+ * The OS theme CSS variables consume these values.
+ */
+declare const WIN_BG = "#111318";
+declare const CHROME_BG = "#0D0F14";
+declare const CELL_BG = "#0D1017";
+declare const WIN_BORDER = "#1E2330";
+declare const WIN_BORDER_FOCUSED = "#333D55";
+declare const TEXT_PRIMARY = "#E8EAF0";
+declare const TEXT_SECONDARY = "#8B92A5";
+declare const TEXT_TERTIARY = "#555D73";
+declare const ACCENT_BLUE = "#0A6FE0";
+declare const MESH_GRADIENT_PALETTE: readonly ["#030508", "#070D15", "#0C1A2E", "#1A4A7A", "#2A3040", "#5C4A38", "#8B6B42", "#D49355"];
+declare const WINDOW_RADIUS = "12px";
+declare const BUTTON_RADIUS = "10px";
+
+declare function cn(...inputs: ClassValue[]): string;
+
+interface AppComponentProps {
+    windowId: string;
+    meta?: Record<string, unknown>;
+}
+
+export { ACCENT_BLUE, type AppComponentProps, Avatar, type AvatarProps, BUTTON_RADIUS, Badge, Button, type ButtonProps, CELL_BG, CHROME_BG, CollapsibleSidebar, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CostCounter, type CostCounterProps, DataRow, type DataRowProps, type DesktopNotifMode, type DesktopNotification, Dialog, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type FeedEvent, type FeedEventType, GlassCard, type GlassCardProps, Input, KhalLogo, ListView, LiveFeed, type LiveFeedProps, MESH_GRADIENT_PALETTE, MeshGradientInner as MeshGradient, type MeshGradientProps, MetricDisplay, type MetricDisplayProps, Note, type NotificationUrgency, NumberFlow, type NumberFlowProps, PillBadge, type PillBadgeProps, ProgressBar, type ProgressBarProps, PropertyPanel, SectionCard, SectionCardHeader, type SectionCardProps, SectionHeader, Separator, SidebarNav, Spinner, SplitPane, StatusBadge, StatusBar, StatusDot, type StatusDotProps, type StatusState, TEXT_PRIMARY, TEXT_SECONDARY, TEXT_TERTIARY, ThemeProvider, ThemeSwitcher, TickerBar, type TickerBarProps, Toggle, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, type TrayIcon, WINDOW_RADIUS, WIN_BG, WIN_BORDER, WIN_BORDER_FOCUSED, WindowActiveProvider, WindowMinimizedProvider, badgeVariants, buttonVariants, cn, dataRowVariants, fadeIn, fadeUp, glassCardVariants, khalEasing, metricDisplayVariants, pillBadgeVariants, progressBarVariants, scaleUp, sectionCardVariants, springConfig, staggerChild, staggerContainer, stateConfig, useNotificationStore, useReducedMotion, useSidebar, useThemeStore, useWindowActive, useWindowMinimized };