khal-os 1.260324.2

package/src/components/taskbar/RunningApps.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { AppIcon } from '@/components/app-icon';
+import { Tooltip } from '@/components/ui/tooltip';
+import { useWindowStore } from '@/stores/window-store';
+
+export function RunningApps() {
+	const windowsByWorkspace = useWindowStore((s) => s.windowsByWorkspace);
+	const activeWorkspaceId = useWindowStore((s) => s.activeWorkspaceId);
+	const focusWindow = useWindowStore((s) => s.focusWindow);
+	const minimizeWindow = useWindowStore((s) => s.minimizeWindow);
+
+	const windows = activeWorkspaceId ? windowsByWorkspace[activeWorkspaceId] || [] : [];
+
+	if (windows.length === 0) {
+		return <div className="flex flex-1 items-center px-1" />;
+	}
+
+	return (
+		<div
+			className="flex min-w-0 flex-1 items-center gap-0.5 overflow-x-auto px-1 no-scrollbar"
+			role="tablist"
+			aria-label="Running applications"
+		>
+			{windows.map((win) => {
+				const isActive = win.focused && !win.minimized;
+
+				return (
+					<Tooltip key={win.id} text={win.title} position="top" delay delayTime={400} desktopOnly>
+						<button
+							role="tab"
+							aria-selected={isActive}
+							aria-label={`${win.title}${isActive ? ' (active)' : win.minimized ? ' (minimized)' : ''}`}
+							className={`group relative flex h-7 shrink-0 items-center gap-1.5 rounded-md px-1.5 text-label-13 transition-all sm:max-w-44 sm:px-2.5 ${
+								isActive ? '' : 'hover:text-gray-1000'
+							}`}
+							style={{
+								background: isActive ? 'var(--khal-taskbar-active-bg)' : undefined,
+								color: isActive ? 'var(--khal-text-primary)' : 'var(--khal-text-secondary)',
+							}}
+							onMouseEnter={(e) => {
+								if (!isActive) (e.currentTarget as HTMLElement).style.background = 'var(--khal-taskbar-hover-bg)';
+							}}
+							onMouseLeave={(e) => {
+								if (!isActive) (e.currentTarget as HTMLElement).style.background = '';
+							}}
+							onClick={() => {
+								if (isActive) {
+									minimizeWindow(win.id);
+								} else {
+									focusWindow(win.id);
+								}
+							}}
+						>
+							<AppIcon appId={win.appId} size={16} className="h-4 w-4 shrink-0" />
+							<span className="hidden truncate sm:inline">{win.title}</span>
+							<span
+								className={`absolute bottom-0 left-1/2 h-[2px] -translate-x-1/2 rounded-full transition-all ${
+									isActive ? 'w-4' : 'w-2 group-hover:w-3'
+								}`}
+								style={{
+									background: isActive ? 'var(--khal-taskbar-active-indicator)' : 'var(--khal-text-muted)',
+								}}
+							/>
+						</button>
+					</Tooltip>
+				);
+			})}
+		</div>
+	);
+}

package/src/components/taskbar/SystemTray.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import { Bell, Monitor, Moon, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { useEffect, useRef } from 'react';
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Tooltip } from '@/components/ui/tooltip';
+import { useNotificationStore } from '@/stores/notification-store';
+import { UserMenu } from './UserMenu';
+
+const THEME_OPTIONS = [
+	{ key: 'system', label: 'System', Icon: Monitor },
+	{ key: 'light', label: 'Light', Icon: Sun },
+	{ key: 'dark', label: 'Dark', Icon: Moon },
+] as const;
+
+function ThemeDropdown() {
+	const { theme, setTheme } = useTheme();
+
+	const current = THEME_OPTIONS.find((o) => o.key === theme) ?? THEME_OPTIONS[0];
+	const CurrentIcon = current.Icon;
+
+	return (
+		<DropdownMenu>
+			<Tooltip text="Theme" position="top" delay delayTime={400} desktopOnly>
+				<DropdownMenuTrigger
+					className="flex h-7 w-7 items-center justify-center rounded-md transition-colors"
+					style={{ color: 'var(--khal-text-secondary)' }}
+					onMouseEnter={(e) => {
+						(e.currentTarget as HTMLElement).style.background = 'var(--khal-taskbar-hover-bg)';
+					}}
+					onMouseLeave={(e) => {
+						(e.currentTarget as HTMLElement).style.background = '';
+					}}
+					aria-label="Change theme"
+				>
+					<CurrentIcon size={16} />
+				</DropdownMenuTrigger>
+			</Tooltip>
+			<DropdownMenuContent align="end" side="top" className="w-40">
+				{THEME_OPTIONS.map(({ key, label, Icon }) => (
+					<DropdownMenuItem key={key} onClick={() => setTheme(key)}>
+						<Icon size={16} />
+						{label}
+						{theme === key && (
+							<span className="ml-auto h-1.5 w-1.5 rounded-full" style={{ background: 'var(--khal-accent-primary)' }} />
+						)}
+					</DropdownMenuItem>
+				))}
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}
+
+export function SystemTray() {
+	const timeRef = useRef<HTMLSpanElement>(null);
+	const dateRef = useRef<HTMLSpanElement>(null);
+
+	const unreadCount = useNotificationStore((s) => s.unreadCount);
+	const toggleCenter = useNotificationStore((s) => s.toggleCenter);
+
+	useEffect(() => {
+		const update = () => {
+			const now = new Date();
+			if (timeRef.current) {
+				timeRef.current.textContent = now.toLocaleTimeString([], {
+					hour: '2-digit',
+					minute: '2-digit',
+				});
+			}
+			if (dateRef.current) {
+				dateRef.current.textContent = now.toLocaleDateString([], {
+					month: 'short',
+					day: 'numeric',
+				});
+			}
+		};
+		update();
+		const id = setInterval(update, 10_000);
+		return () => clearInterval(id);
+	}, []);
+
+	return (
+		<div className="flex items-center gap-1.5 px-3">
+			<Tooltip text="Notifications" position="top" delay delayTime={400} desktopOnly>
+				<button
+					className="relative flex h-7 w-7 items-center justify-center rounded-md transition-colors"
+					style={{ color: 'var(--khal-text-secondary)' }}
+					onMouseEnter={(e) => {
+						(e.currentTarget as HTMLElement).style.background = 'var(--khal-taskbar-hover-bg)';
+					}}
+					onMouseLeave={(e) => {
+						(e.currentTarget as HTMLElement).style.background = '';
+					}}
+					onClick={toggleCenter}
+					aria-label={`Notifications${unreadCount > 0 ? ` (${unreadCount} unread)` : ''}`}
+				>
+					<Bell size={16} />
+					{unreadCount > 0 && (
+						<span
+							className="absolute -top-0.5 -right-0.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full px-1 text-[9px] font-bold"
+							style={{
+								background: 'var(--khal-accent-primary)',
+								color: 'var(--khal-text-inverse)',
+							}}
+							aria-hidden="true"
+						>
+							{unreadCount > 99 ? '99+' : unreadCount}
+						</span>
+					)}
+				</button>
+			</Tooltip>
+
+			<ThemeDropdown />
+
+			<div
+				className="hidden flex-col items-end leading-tight sm:flex"
+				role="status"
+				aria-live="polite"
+				aria-label="Current time and date"
+			>
+				<span ref={timeRef} className="text-label-12" style={{ color: 'var(--khal-text-primary)' }} />
+				<span ref={dateRef} className="text-label-12" style={{ color: 'var(--khal-text-secondary)' }} />
+			</div>
+
+			<UserMenu />
+		</div>
+	);
+}

package/src/components/taskbar/Taskbar.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { Separator } from '@/components/ui/separator';
+import { AppLauncher } from './AppLauncher';
+import { RunningApps } from './RunningApps';
+import { SystemTray } from './SystemTray';
+import { WorkspaceSwitcher } from './WorkspaceSwitcher';
+
+export function Taskbar({ launcherToggle }: { launcherToggle?: number }) {
+	return (
+		<nav
+			className="fixed inset-x-0 bottom-0 z-[9000] flex h-11 items-center pb-[env(safe-area-inset-bottom,0px)]"
+			style={{
+				background: 'var(--khal-taskbar-bg)',
+				backdropFilter: 'blur(var(--khal-glass-blur, 32px)) saturate(1.8)',
+				WebkitBackdropFilter: 'blur(var(--khal-glass-blur, 32px)) saturate(1.8)',
+				borderTop: '1px solid var(--khal-taskbar-border)',
+				boxShadow: 'var(--khal-taskbar-shadow)',
+			}}
+			aria-label="Taskbar"
+		>
+			<div className="flex items-center px-1 sm:px-1.5">
+				<AppLauncher externalToggle={launcherToggle} />
+			</div>
+			<Separator
+				orientation="vertical"
+				className="mx-0.5 h-5 sm:mx-1"
+				style={{ background: 'var(--khal-border-default)' }}
+			/>
+			<RunningApps />
+			<Separator
+				orientation="vertical"
+				className="mx-0.5 h-5 sm:mx-1"
+				style={{ background: 'var(--khal-border-default)' }}
+			/>
+			<WorkspaceSwitcher />
+			<Separator
+				orientation="vertical"
+				className="mx-0.5 h-5 sm:mx-1"
+				style={{ background: 'var(--khal-border-default)' }}
+			/>
+			<SystemTray />
+		</nav>
+	);
+}

package/src/components/taskbar/UserMenu.tsx

@@ -0,0 +1,138 @@
+'use client';
+
+import { useAuth } from '@workos-inc/authkit-nextjs/components';
+import { Building2, LogOut, Shield, User } from 'lucide-react';
+import { useCallback, useRef } from 'react';
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Tooltip } from '@/components/ui/tooltip';
+import { useKhalAuth } from '@/lib/auth/use-auth';
+
+const ROLE_COLORS: Record<string, string> = {
+	'platform-owner': 'var(--khal-accent-warning, #f59e0b)',
+	'platform-admin': 'var(--khal-accent-primary)',
+	'platform-dev': 'var(--khal-accent-secondary, #6366f1)',
+	member: 'var(--khal-text-muted)',
+};
+
+const ROLE_LABELS: Record<string, string> = {
+	'platform-owner': 'Owner',
+	'platform-admin': 'Admin',
+	'platform-dev': 'Developer',
+	member: 'Member',
+};
+
+function getInitial(user: { firstName?: string | null; lastName?: string | null; email: string }): string {
+	if (user.firstName) return user.firstName[0].toUpperCase();
+	if (user.lastName) return user.lastName[0].toUpperCase();
+	return user.email[0].toUpperCase();
+}
+
+function getDisplayName(user: { firstName?: string | null; lastName?: string | null; email: string }): string {
+	const parts = [user.firstName, user.lastName].filter(Boolean);
+	return parts.length > 0 ? parts.join(' ') : user.email;
+}
+
+export function UserMenu() {
+	const { user, organizationId, loading } = useAuth();
+	const khalAuth = useKhalAuth();
+
+	const logoutFormRef = useRef<HTMLFormElement>(null);
+	const handleLogout = useCallback(() => {
+		logoutFormRef.current?.submit();
+	}, []);
+
+	if (loading || !user) {
+		return (
+			<div className="flex h-7 w-7 items-center justify-center rounded-md" style={{ color: 'var(--khal-text-muted)' }}>
+				<User size={16} />
+			</div>
+		);
+	}
+
+	const initial = getInitial(user);
+	const displayName = getDisplayName(user);
+	const role = khalAuth?.role ?? 'member';
+	const roleColor = ROLE_COLORS[role] ?? ROLE_COLORS.member;
+
+	return (
+		<>
+			<form ref={logoutFormRef} method="POST" action="/auth/logout" className="hidden" />
+			<DropdownMenu>
+				<Tooltip text={displayName} position="top" delay delayTime={400} desktopOnly>
+					<DropdownMenuTrigger
+						className="flex h-7 w-7 items-center justify-center rounded-md transition-colors"
+						onMouseEnter={(e) => {
+							(e.currentTarget as HTMLElement).style.background = 'var(--khal-taskbar-hover-bg)';
+						}}
+						onMouseLeave={(e) => {
+							(e.currentTarget as HTMLElement).style.background = '';
+						}}
+						aria-label="User menu"
+					>
+						{user.profilePictureUrl ? (
+							<img src={user.profilePictureUrl} alt={displayName} className="h-5 w-5 rounded-full object-cover" />
+						) : (
+							<span
+								className="flex h-5 w-5 items-center justify-center rounded-full text-[11px] font-semibold"
+								style={{
+									background: 'var(--khal-accent-primary)',
+									color: 'var(--khal-text-inverse)',
+								}}
+							>
+								{initial}
+							</span>
+						)}
+					</DropdownMenuTrigger>
+				</Tooltip>
+				<DropdownMenuContent align="end" side="top" className="w-56">
+					<DropdownMenuLabel className="flex flex-col gap-0.5 font-normal">
+						<span className="text-copy-13 font-medium" style={{ color: 'var(--khal-text-primary)' }}>
+							{displayName}
+						</span>
+						<span className="text-label-12" style={{ color: 'var(--khal-text-muted)' }}>
+							{user.email}
+						</span>
+					</DropdownMenuLabel>
+
+					<DropdownMenuSeparator />
+
+					{(organizationId || khalAuth?.orgId) && (
+						<DropdownMenuItem disabled className="gap-2 opacity-100">
+							<Building2 size={14} style={{ color: 'var(--khal-text-muted)' }} />
+							<span className="truncate" style={{ color: 'var(--khal-text-secondary)' }}>
+								{khalAuth?.orgId ?? organizationId}
+							</span>
+						</DropdownMenuItem>
+					)}
+
+					<DropdownMenuItem disabled className="gap-2 opacity-100">
+						<Shield size={14} style={{ color: roleColor }} />
+						<span
+							className="rounded px-1.5 py-0.5 text-label-12 font-medium"
+							style={{
+								background: `color-mix(in srgb, ${roleColor} 15%, transparent)`,
+								color: roleColor,
+							}}
+						>
+							{ROLE_LABELS[role] ?? role}
+						</span>
+					</DropdownMenuItem>
+
+					<DropdownMenuSeparator />
+
+					<DropdownMenuItem className="gap-2" onClick={handleLogout}>
+						<LogOut size={14} />
+						Logout
+					</DropdownMenuItem>
+				</DropdownMenuContent>
+			</DropdownMenu>
+		</>
+	);
+}

package/src/components/taskbar/WorkspaceSwitcher.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+/**
+ * Workspace switcher stub — no workspaces in stripped mode.
+ * Renders nothing, keeping the taskbar layout intact.
+ */
+export function WorkspaceSwitcher() {
+	return <div className="flex items-center px-1.5" />;
+}

package/src/components/ui/ContextMenu.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const ContextMenu = ContextMenuPrimitive.Root;
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+
+const ContextMenuSubTrigger = React.forwardRef<
+	React.ComponentRef<typeof ContextMenuPrimitive.SubTrigger>,
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+		inset?: boolean;
+	}
+>(({ className, inset, children, ...props }, ref) => (
+	<ContextMenuPrimitive.SubTrigger
+		ref={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}
+	</ContextMenuPrimitive.SubTrigger>
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+
+const ContextMenuSubContent = React.forwardRef<
+	React.ComponentRef<typeof ContextMenuPrimitive.SubContent>,
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+	<ContextMenuPrimitive.SubContent
+		ref={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;
+
+const ContextMenuContent = React.forwardRef<
+	React.ComponentRef<typeof ContextMenuPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+	<ContextMenuPrimitive.Portal>
+		<ContextMenuPrimitive.Content
+			ref={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}
+		/>
+	</ContextMenuPrimitive.Portal>
+));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+
+const ContextMenuItem = React.forwardRef<
+	React.ComponentRef<typeof ContextMenuPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+		inset?: boolean;
+	}
+>(({ className, inset, ...props }, ref) => (
+	<ContextMenuPrimitive.Item
+		ref={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;
+
+const ContextMenuSeparator = React.forwardRef<
+	React.ComponentRef<typeof ContextMenuPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+	<ContextMenuPrimitive.Separator
+		ref={ref}
+		className={cn('-mx-1 my-1 h-px', className)}
+		style={{ background: 'var(--khal-border-default)' }}
+		{...props}
+	/>
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+
+export {
+	ContextMenu,
+	ContextMenuTrigger,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuSeparator,
+	ContextMenuGroup,
+	ContextMenuPortal,
+	ContextMenuSub,
+	ContextMenuSubContent,
+	ContextMenuSubTrigger,
+	ContextMenuRadioGroup,
+};

package/src/components/ui/badge.tsx

@@ -0,0 +1,39 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const 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',
+		},
+	}
+);
+
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+	contrast?: 'low' | 'high';
+}
+
+function Badge({ className, variant, size, contrast, ...props }: BadgeProps) {
+	return <span className={cn(badgeVariants({ variant, size }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

package/src/components/ui/button.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import { Spinner } from './spinner';
+
+const buttonVariants = cva(
+	'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md 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',
+		},
+	}
+);
+
+type ButtonVariantProps = VariantProps<typeof buttonVariants>;
+
+interface ButtonProps
+	extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'prefix'>,
+		ButtonVariantProps {
+	asChild?: boolean;
+	loading?: boolean;
+	prefix?: React.ReactNode;
+	suffix?: React.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';
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+	(
+		{
+			className,
+			variant,
+			size,
+			asChild = false,
+			loading = false,
+			prefix,
+			suffix,
+			typeName,
+			type,
+			disabled,
+			children,
+			...props
+		},
+		ref
+	) => {
+		// Map geistcn "type" prop to variant if variant not explicitly set
+		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 (
+			<Comp
+				className={cn(buttonVariants({ variant: resolvedVariant, size, className }))}
+				ref={ref}
+				type={typeName ?? 'button'}
+				disabled={disabled || loading}
+				{...props}
+			>
+				{loading ? (
+					<Spinner size="sm" />
+				) : (
+					<>
+						{prefix && <span className="inline-flex shrink-0">{prefix}</span>}
+						{children}
+						{suffix && <span className="inline-flex shrink-0">{suffix}</span>}
+					</>
+				)}
+			</Comp>
+		);
+	}
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
+export type { ButtonProps };