@khal-os/ui 1.0.0

package/src/components/metric-display.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '../utils';
+
+/**
+ * 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.
+ */
+const metricDisplayVariants = cva('flex flex-col', {
+	variants: {
+		size: {
+			/** Compact — for inline/tile use (architecture mockup metric tiles) */
+			sm: 'gap-1',
+			/** Standard — for dashboard displays */
+			md: 'gap-1.5',
+			/** Large — hero stat cards (metrics.tsx) */
+			lg: 'gap-2',
+		},
+	},
+	defaultVariants: {
+		size: 'md',
+	},
+});
+
+const 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]',
+} as const;
+
+const 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',
+} as const;
+
+interface MetricDisplayProps extends React.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;
+}
+
+const MetricDisplay = React.forwardRef<HTMLDivElement, MetricDisplayProps>(
+	({ className, size = 'md', value, label, description, prefix, suffix, accentColor, ...props }, ref) => {
+		const resolvedSize = (size ?? 'md') as 'sm' | 'md' | 'lg';
+
+		return (
+			<div ref={ref} className={cn(metricDisplayVariants({ size }), className)} {...props}>
+				{/* Label above value for sm size (matches LP tile pattern) */}
+				{resolvedSize === 'sm' && <span className={labelSizeMap[resolvedSize]}>{label}</span>}
+
+				{/* Value */}
+				<div
+					className={cn(valueSizeMap[resolvedSize], 'tabular-nums')}
+					style={accentColor ? { color: accentColor } : undefined}
+				>
+					{prefix && <span>{prefix}</span>}
+					<span>{value}</span>
+					{suffix && (
+						<span className={resolvedSize === 'lg' ? 'text-[32px] tracking-[-0.02em] ml-0.5' : 'ml-0.5'}>{suffix}</span>
+					)}
+				</div>
+
+				{/* Label below value for md/lg sizes */}
+				{resolvedSize !== 'sm' && <span className={labelSizeMap[resolvedSize]}>{label}</span>}
+
+				{/* Description */}
+				{description && <span className="text-[13px] text-[#FFFFFF80] leading-4">{description}</span>}
+			</div>
+		);
+	}
+);
+MetricDisplay.displayName = 'MetricDisplay';
+
+export type { MetricDisplayProps };
+export { MetricDisplay, metricDisplayVariants };

package/src/components/note.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+import { AlertCircle, AlertTriangle, CheckCircle, Info } from 'lucide-react';
+import * as React from 'react';
+import { cn } from '../utils';
+
+const noteVariants = cva('flex items-start gap-2 rounded-md border p-3 text-copy-13', {
+	variants: {
+		type: {
+			default: 'border-gray-alpha-400 bg-gray-alpha-100 text-gray-900',
+			error: 'border-red-300 bg-red-100 text-red-900',
+			warning: 'border-amber-300 bg-amber-100 text-amber-900',
+			success: 'border-green-300 bg-green-100 text-green-900',
+		},
+		size: {
+			default: 'p-3',
+			small: 'p-2 text-label-12',
+		},
+	},
+	defaultVariants: {
+		type: 'default',
+		size: 'default',
+	},
+});
+
+const iconMap = {
+	default: Info,
+	error: AlertCircle,
+	warning: AlertTriangle,
+	success: CheckCircle,
+} as const;
+
+interface NoteProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof noteVariants> {
+	type?: 'default' | 'error' | 'warning' | 'success';
+	label?: boolean | string;
+	action?: React.ReactNode;
+	disabled?: boolean;
+	fill?: boolean;
+}
+
+function Note({ className, type = 'default', size, label, action, children, ...props }: NoteProps) {
+	const Icon = iconMap[type];
+	const showLabel = label !== false;
+
+	return (
+		<div className={cn(noteVariants({ type, size }), className)} role="alert" {...props}>
+			{showLabel && <Icon className="h-4 w-4 shrink-0 mt-0.5" />}
+			<div className="flex-1 min-w-0">{children}</div>
+			{action && <div className="shrink-0">{action}</div>}
+		</div>
+	);
+}
+
+export { Note };

package/src/components/number-flow.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import NumberFlowBase from '@number-flow/react';
+import type { ComponentProps } from 'react';
+
+type NumberFlowProps = ComponentProps<typeof NumberFlowBase>;
+
+/**
+ * NumberFlow — animated number transitions via @number-flow/react.
+ * Thin wrapper that sets KhalOS-branded timing defaults.
+ */
+function NumberFlow({ transformTiming, spinTiming, opacityTiming, ...props }: NumberFlowProps) {
+	return (
+		<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
+			{...props}
+		/>
+	);
+}
+
+export type { NumberFlowProps };
+export { NumberFlow };

package/src/components/pill-badge.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '../utils';
+
+/**
+ * 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.
+ */
+const pillBadgeVariants = cva(
+	'inline-flex items-center gap-1.5 rounded-full font-medium uppercase leading-none whitespace-nowrap',
+	{
+		variants: {
+			variant: {
+				/** Subtle border badge — compliance tags, capability tags */
+				default: 'border border-[#FFFFFF26] bg-[#FFFFFF08] text-[#FFFFFFCC]',
+				/** Muted badge — less prominent */
+				muted: 'border border-[#FFFFFF14] bg-[#FFFFFF05] text-[#FFFFFFCC]',
+				/** Accent-filled badge — ROI labels, active state badges */
+				accent: 'text-[var(--color-accent,#D49355)] bg-[rgba(var(--color-accent-rgb,212,147,85),0.12)]',
+			},
+			size: {
+				sm: 'py-1 px-2.5 text-[10px] tracking-[0.08em]',
+				md: 'py-1.5 px-3.5 text-[11px] tracking-widest',
+				lg: 'py-2 px-4 text-[11px] tracking-widest',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'md',
+		},
+	}
+);
+
+interface PillBadgeProps extends React.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;
+}
+
+const PillBadge = React.forwardRef<HTMLSpanElement, PillBadgeProps>(
+	({ className, variant, size, dot, dotColor, children, ...props }, ref) => {
+		return (
+			<span ref={ref} className={cn(pillBadgeVariants({ variant, size }), className)} {...props}>
+				{dot && (
+					<span className="size-1.5 shrink-0 rounded-full" style={{ backgroundColor: dotColor || '#FFFFFF40' }} />
+				)}
+				{children}
+			</span>
+		);
+	}
+);
+PillBadge.displayName = 'PillBadge';
+
+export type { PillBadgeProps };
+export { PillBadge, pillBadgeVariants };

package/src/components/progress-bar.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '../utils';
+
+const progressBarVariants = cva(
+	'relative w-full overflow-hidden rounded-full [background:var(--khal-border-default)]',
+	{
+		variants: {
+			size: {
+				sm: 'h-1.5',
+				md: 'h-2.5',
+			},
+		},
+		defaultVariants: {
+			size: 'md',
+		},
+	}
+);
+
+interface ProgressBarProps
+	extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,
+		VariantProps<typeof progressBarVariants> {
+	value: number;
+	max?: number;
+	color?: string;
+	showLabel?: boolean;
+}
+
+function ProgressBar({
+	value,
+	max = 100,
+	color = 'var(--khal-stage-build)',
+	size,
+	showLabel = false,
+	className,
+	...props
+}: ProgressBarProps) {
+	const percentage = Math.min(100, Math.max(0, (value / max) * 100));
+
+	return (
+		<div className={cn('flex items-center gap-2', className)} {...props}>
+			<div
+				role="progressbar"
+				aria-valuenow={value}
+				aria-valuemin={0}
+				aria-valuemax={max}
+				className={progressBarVariants({ size })}
+			>
+				<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)',
+					}}
+				/>
+			</div>
+			{showLabel && (
+				<span className="shrink-0 text-xs tabular-nums opacity-60">
+					{value}/{max}
+				</span>
+			)}
+		</div>
+	);
+}
+
+export type { ProgressBarProps };
+export { ProgressBar, progressBarVariants };

package/src/components/section-card.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '../utils';
+
+/**
+ * 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)
+ */
+const sectionCardVariants = cva('relative flex flex-col overflow-hidden', {
+	variants: {
+		variant: {
+			default: 'rounded-2xl border border-[#FFFFFF1A] bg-[#FFFFFF0A]',
+			inset: 'rounded-tl-xl border-t border-l border-[#FFFFFF26] bg-[#111111]',
+			solid: 'rounded-2xl border border-[#FFFFFF1A] bg-[#0D0D0D]',
+		},
+		padding: {
+			none: '',
+			sm: 'p-4',
+			md: 'p-5 sm:p-6',
+			lg: 'p-5 sm:p-6 md:p-8',
+		},
+	},
+	defaultVariants: {
+		variant: 'default',
+		padding: 'md',
+	},
+});
+
+interface SectionCardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof sectionCardVariants> {
+	/** Optional gradient overlay color (hex). Renders a subtle top-down gradient. */
+	glow?: string;
+}
+
+const SectionCard = React.forwardRef<HTMLDivElement, SectionCardProps>(
+	({ className, variant, padding, glow, children, ...props }, ref) => {
+		return (
+			<div ref={ref} className={cn(sectionCardVariants({ variant, padding }), className)} {...props}>
+				{glow && (
+					<div
+						className="pointer-events-none absolute inset-0 z-0"
+						style={{
+							background: `linear-gradient(180deg, ${glow}22 0%, transparent 60%)`,
+						}}
+					/>
+				)}
+				<div className="relative z-10 flex flex-col h-full">{children}</div>
+			</div>
+		);
+	}
+);
+SectionCard.displayName = 'SectionCard';
+
+/**
+ * SectionCardHeader — optional header row with bottom border separator.
+ * Matches the LP mockup panel headers: `py-3 px-4 border-b border-[#FFFFFF1A]`.
+ */
+function SectionCardHeader({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+	return (
+		<div
+			className={cn('flex items-center justify-between py-3 px-4 border-b border-[#FFFFFF1A]', className)}
+			{...props}
+		>
+			{children}
+		</div>
+	);
+}
+SectionCardHeader.displayName = 'SectionCardHeader';
+
+export type { SectionCardProps };
+export { SectionCard, SectionCardHeader, sectionCardVariants };

package/src/components/separator.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as React from 'react';
+import { cn } from '../utils';
+
+const Separator = React.forwardRef<
+	React.ComponentRef<typeof SeparatorPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
+	<SeparatorPrimitive.Root
+		ref={ref}
+		decorative={decorative}
+		orientation={orientation}
+		className={cn(
+			'shrink-0 bg-gray-alpha-400',
+			orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+			className
+		)}
+		{...props}
+	/>
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

package/src/components/spinner.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../utils';
+
+const sizeMap = {
+	sm: 16,
+	md: 20,
+	lg: 24,
+} as const;
+
+interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
+	size?: keyof typeof sizeMap;
+}
+
+function Spinner({ size = 'md', className, ...props }: SpinnerProps) {
+	const px = sizeMap[size];
+	return (
+		<div
+			role="status"
+			aria-label="Loading"
+			className={cn('inline-flex items-center justify-center', className)}
+			{...props}
+		>
+			<svg width={px} height={px} viewBox="0 0 20 20" fill="none" className="animate-spin">
+				<circle cx="10" cy="10" r="8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" opacity="0.25" />
+				<circle
+					cx="10"
+					cy="10"
+					r="8"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeDasharray="50.26"
+					strokeDashoffset="37.7"
+				/>
+			</svg>
+		</div>
+	);
+}
+
+export { Spinner };

package/src/components/status-dot.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../utils';
+
+const sizeMap = { sm: 8, md: 10, lg: 12 } as const;
+
+/** All recognized status states */
+type StatusState = 'live' | 'online' | 'active' | 'working' | 'idle' | 'away' | 'queued' | 'error';
+
+const stateConfig: Record<StatusState, { color: string; label: string; pulse: boolean }> = {
+	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 },
+};
+
+interface StatusDotProps extends React.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;
+}
+
+function StatusDot({
+	state,
+	color: colorProp,
+	pulse: pulseProp,
+	size = 'md',
+	label: labelProp,
+	showLabel = false,
+	className,
+	style,
+	...props
+}: StatusDotProps) {
+	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 (
+		<span
+			role="status"
+			aria-label={label}
+			className={cn('relative inline-flex shrink-0 items-center gap-1.5', className)}
+			style={style}
+			{...props}
+		>
+			<span className="relative inline-flex shrink-0" style={{ width: px, height: px }}>
+				{pulse && (
+					<span
+						className="absolute -inset-0.5 rounded-full"
+						style={{
+							backgroundColor: color,
+							opacity: 0.35,
+							animation: 'khal-pulse 2s ease-in-out infinite',
+						}}
+					/>
+				)}
+				<span
+					className="absolute inset-0 rounded-full"
+					style={{
+						backgroundColor: color,
+						boxShadow: pulse ? `0 0 ${px}px ${color}80` : undefined,
+					}}
+				/>
+			</span>
+			{showLabel && label && (
+				<span className="text-[11px] leading-none" style={{ color }}>
+					{label}
+				</span>
+			)}
+		</span>
+	);
+}
+
+export type { StatusDotProps, StatusState };
+export { StatusDot, stateConfig };

package/src/components/switch.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import * as React from 'react';
+import { cn } from '../utils';
+
+interface ToggleProps extends Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, 'onChange'> {
+	onChange?: (checked: boolean) => void;
+}
+
+const Toggle = React.forwardRef<React.ComponentRef<typeof SwitchPrimitive.Root>, ToggleProps>(
+	({ className, onChange, onCheckedChange, ...props }, ref) => (
+		<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={ref}
+		>
+			<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'
+				)}
+			/>
+		</SwitchPrimitive.Root>
+	)
+);
+Toggle.displayName = 'Toggle';
+
+export { Toggle };

package/src/components/theme-provider.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+import { useEffect } from 'react';
+import { useThemeStore } from '../stores/theme-store';
+
+function ReduceMotionSync() {
+	const reduceMotion = useThemeStore((s) => s.reduceMotion);
+
+	useEffect(() => {
+		document.documentElement.setAttribute('data-reduce-motion', String(reduceMotion));
+	}, [reduceMotion]);
+
+	return null;
+}
+
+function GlassSync() {
+	const glassEnabled = useThemeStore((s) => s.glassEnabled);
+
+	useEffect(() => {
+		const el = document.documentElement;
+		if (glassEnabled) {
+			el.setAttribute('data-glass', '');
+			el.style.setProperty('--khal-glass-enabled', '1');
+		} else {
+			el.removeAttribute('data-glass');
+			el.style.setProperty('--khal-glass-enabled', '0');
+		}
+	}, [glassEnabled]);
+
+	return null;
+}
+
+function GpuTerminalsSync() {
+	const gpuTerminals = useThemeStore((s) => s.gpuTerminals);
+
+	useEffect(() => {
+		// Sync to the localStorage key the terminal reads on mount
+		if (gpuTerminals) {
+			localStorage.setItem('khal-gpu-terminals', 'true');
+		} else {
+			localStorage.removeItem('khal-gpu-terminals');
+		}
+	}, [gpuTerminals]);
+
+	return null;
+}
+
+export function ThemeProvider({ children, ...props }: React.ComponentProps<typeof NextThemesProvider>) {
+	return (
+		<NextThemesProvider {...props}>
+			<ReduceMotionSync />
+			<GlassSync />
+			<GpuTerminalsSync />
+			{children}
+		</NextThemesProvider>
+	);
+}