khal-os 1.260324.2

package/src/components/os-primitives/sidebar-nav.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+// ---------------------------------------------------------------------------
+// SidebarNav — reusable sidebar navigation for app shells.
+//
+// Extracts the repeated sidebar + tab-button pattern used across Settings,
+// AppStore, etc.  Designed to sit inside a SplitPane.Panel.
+//
+// Usage:
+//   <SidebarNav label="Settings" title="Settings">
+//     <SidebarNav.Item active={tab === "a"} onClick={() => setTab("a")} icon={<Icon />}>
+//       Appearance
+//     </SidebarNav.Item>
+//   </SidebarNav>
+//
+//   // Multiple sections:
+//   <SidebarNav label="App Store">
+//     <SidebarNav.Group title="Packages">
+//       <SidebarNav.Item ...>GUI Apps</SidebarNav.Item>
+//     </SidebarNav.Group>
+//     <SidebarNav.Group title="Repos">
+//       ...
+//     </SidebarNav.Group>
+//   </SidebarNav>
+// ---------------------------------------------------------------------------
+
+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;
+}
+
+function SidebarNavRoot({ children, label, title, className = '' }: SidebarNavProps) {
+	return (
+		<nav className={`flex flex-col py-2 ${className}`} aria-label={label}>
+			{title && (
+				<div className="px-3 pb-1">
+					<span className="text-copy-13 font-medium text-gray-800">{title}</span>
+				</div>
+			)}
+			{children}
+		</nav>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// SidebarNav.Group — optional section divider with a title
+// ---------------------------------------------------------------------------
+
+interface SidebarNavGroupProps {
+	children: ReactNode;
+	title?: string;
+	className?: string;
+}
+
+function SidebarNavGroup({ children, title, className = '' }: SidebarNavGroupProps) {
+	return (
+		<div className={className}>
+			{title && (
+				<div className="px-3 pt-4 pb-1">
+					<span className="text-copy-13 font-medium text-gray-800">{title}</span>
+				</div>
+			)}
+			{children}
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// SidebarNav.Item — a single navigation button
+// ---------------------------------------------------------------------------
+
+interface SidebarNavItemProps {
+	children: ReactNode;
+	active?: boolean;
+	onClick?: () => void;
+	icon?: ReactNode;
+	/** Trailing content (e.g. a count badge) */
+	suffix?: ReactNode;
+	className?: string;
+}
+
+function SidebarNavItem({ children, active, onClick, icon, suffix, className = '' }: SidebarNavItemProps) {
+	return (
+		<button
+			onClick={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}`}
+		>
+			{icon && <span className="shrink-0 text-gray-800 [&>svg]:h-3.5 [&>svg]:w-3.5">{icon}</span>}
+			<span className="min-w-0 truncate">{children}</span>
+			{suffix && <span className="ml-auto font-mono text-copy-13 tabular-nums text-gray-700">{suffix}</span>}
+		</button>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Export
+// ---------------------------------------------------------------------------
+
+export const SidebarNav = Object.assign(SidebarNavRoot, {
+	Group: SidebarNavGroup,
+	Item: SidebarNavItem,
+});

package/src/components/os-primitives/split-pane.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import { type CSSProperties, type ReactNode, useCallback, useRef, useState, useSyncExternalStore } from 'react';
+
+// ---------------------------------------------------------------------------
+// SplitPane — resizable two-panel layout (horizontal or vertical).
+//
+// Usage:
+//   <SplitPane defaultSize={240} min={120} max={400}>
+//     <SplitPane.Panel>Sidebar</SplitPane.Panel>
+//     <SplitPane.Panel>Main</SplitPane.Panel>
+//   </SplitPane>
+//
+//   <SplitPane direction="vertical" defaultSize={200} min={100}>
+//     <SplitPane.Panel>Top</SplitPane.Panel>
+//     <SplitPane.Panel>Bottom</SplitPane.Panel>
+//   </SplitPane>
+// ---------------------------------------------------------------------------
+
+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;
+}
+
+function useMediaQuery(query: string) {
+	const subscribe = useCallback(
+		(callback: () => void) => {
+			const mql = window.matchMedia(query);
+			mql.addEventListener('change', callback);
+			return () => mql.removeEventListener('change', callback);
+		},
+		[query]
+	);
+	const getSnapshot = useCallback(() => window.matchMedia(query).matches, [query]);
+	const getServerSnapshot = useCallback(() => false, []);
+	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+function SplitPaneRoot({
+	children,
+	direction = 'horizontal',
+	defaultSize = 240,
+	min = 100,
+	max = 600,
+	collapseBelow = 640,
+	onResize,
+	className = '',
+}: SplitPaneProps) {
+	const [size, setSize] = useState(defaultSize);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const dragging = useRef(false);
+	const startPos = useRef(0);
+	const startSize = useRef(0);
+	const isMobile = useMediaQuery(`(max-width: ${collapseBelow}px)`);
+
+	const isHorizontal = direction === 'horizontal' && !isMobile;
+	const [first, second] = children;
+
+	const onPointerDown = useCallback(
+		(e: React.PointerEvent) => {
+			e.preventDefault();
+			dragging.current = true;
+			startPos.current = isHorizontal ? e.clientX : e.clientY;
+			startSize.current = size;
+			(e.target as HTMLElement).setPointerCapture(e.pointerId);
+		},
+		[isHorizontal, size]
+	);
+
+	const onPointerMove = useCallback(
+		(e: React.PointerEvent) => {
+			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 = useCallback(() => {
+		dragging.current = false;
+	}, []);
+
+	// On mobile, stack vertically with no resize handle
+	if (isMobile) {
+		return (
+			<div ref={containerRef} className={`flex flex-col h-full w-full overflow-hidden ${className}`}>
+				<div className="shrink-0 overflow-auto border-b border-gray-alpha-200">{first}</div>
+				<div className="flex-1 overflow-hidden">{second}</div>
+			</div>
+		);
+	}
+
+	const firstStyle: CSSProperties = isHorizontal
+		? { width: size, minWidth: min, maxWidth: max, flexShrink: 0 }
+		: { height: size, minHeight: min, maxHeight: max, flexShrink: 0 };
+
+	return (
+		<div
+			ref={containerRef}
+			className={`flex ${isHorizontal ? 'flex-row' : 'flex-col'} h-full w-full overflow-hidden ${className}`}
+		>
+			<div style={firstStyle} className="overflow-hidden">
+				{first}
+			</div>
+			<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={onPointerDown}
+				onPointerMove={onPointerMove}
+				onPointerUp={onPointerUp}
+				role="separator"
+				aria-orientation={isHorizontal ? 'vertical' : 'horizontal'}
+				tabIndex={0}
+			/>
+			<div className="flex-1 overflow-hidden">{second}</div>
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// SplitPane.Panel — thin wrapper for semantic clarity
+// ---------------------------------------------------------------------------
+
+function Panel({ children, className = '' }: { children: ReactNode; className?: string }) {
+	return <div className={`h-full w-full overflow-auto ${className}`}>{children}</div>;
+}
+
+// ---------------------------------------------------------------------------
+// Export as compound component
+// ---------------------------------------------------------------------------
+
+export const SplitPane = Object.assign(SplitPaneRoot, {
+	Panel,
+});

package/src/components/os-primitives/status-badge.tsx

@@ -0,0 +1,10 @@
+import { Badge } from '@/components/ui/badge';
+
+export function StatusBadge({ status }: { status: string }) {
+	const variant = status === 'active' ? 'green' : status === 'creating' ? 'amber' : status === 'error' ? 'red' : 'gray';
+	return (
+		<Badge variant={variant} size="sm" contrast="low">
+			{status}
+		</Badge>
+	);
+}

package/src/components/os-primitives/status-bar.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import { type ReactNode } from 'react';
+import { Separator } from '@/components/ui/separator';
+
+// ---------------------------------------------------------------------------
+// StatusBar — bottom bar for app-level status, breadcrumbs, and indicators.
+//
+// Usage:
+//   <StatusBar>
+//     <StatusBar.Item>Ln 42, Col 18</StatusBar.Item>
+//     <StatusBar.Separator />
+//     <StatusBar.Item>UTF-8</StatusBar.Item>
+//     <StatusBar.Spacer />
+//     <StatusBar.Item icon={<CheckCircle />} variant="success">Saved</StatusBar.Item>
+//   </StatusBar>
+// ---------------------------------------------------------------------------
+
+interface StatusBarProps {
+	children: ReactNode;
+	className?: string;
+}
+
+function StatusBarRoot({ children, className = '' }: StatusBarProps) {
+	return (
+		<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}
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// StatusBar.Item
+// ---------------------------------------------------------------------------
+
+interface StatusBarItemProps {
+	children: ReactNode;
+	icon?: ReactNode;
+	variant?: 'default' | 'success' | 'warning' | 'error';
+	onClick?: () => void;
+	className?: string;
+}
+
+const 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 = '' }: StatusBarItemProps) {
+	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 (
+			<button className={classes} onClick={onClick}>
+				{icon}
+				{children}
+			</button>
+		);
+	}
+
+	return (
+		<span className={classes}>
+			{icon}
+			{children}
+		</span>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// StatusBar.Separator
+// ---------------------------------------------------------------------------
+
+function StatusBarSeparator() {
+	return <Separator orientation="vertical" className="mx-0.5 h-3" />;
+}
+
+// ---------------------------------------------------------------------------
+// StatusBar.Spacer
+// ---------------------------------------------------------------------------
+
+function StatusBarSpacer() {
+	return <div className="flex-1" />;
+}
+
+// ---------------------------------------------------------------------------
+// Export
+// ---------------------------------------------------------------------------
+
+export const StatusBar = Object.assign(StatusBarRoot, {
+	Item: StatusBarItem,
+	Separator: StatusBarSeparator,
+	Spacer: StatusBarSpacer,
+});

package/src/components/os-primitives/toolbar.tsx

@@ -0,0 +1,152 @@
+'use client';
+
+import { type ButtonHTMLAttributes, forwardRef, type ReactNode } from 'react';
+import { Separator } from '@/components/ui/separator';
+import { Tooltip } from '@/components/ui/tooltip';
+
+// ---------------------------------------------------------------------------
+// Toolbar — horizontal bar of icon buttons, groups, and separators.
+//
+// Usage:
+//   <Toolbar>
+//     <Toolbar.Group>
+//       <Toolbar.Button tooltip="Back" onClick={goBack}><ChevronLeft /></Toolbar.Button>
+//       <Toolbar.Button tooltip="Forward" onClick={goFwd}><ChevronRight /></Toolbar.Button>
+//     </Toolbar.Group>
+//     <Toolbar.Separator />
+//     <Toolbar.Group>
+//       <Toolbar.Button tooltip="Refresh" active={loading}><Refresh /></Toolbar.Button>
+//     </Toolbar.Group>
+//     <Toolbar.Spacer />
+//     <Toolbar.Text>3 items</Toolbar.Text>
+//   </Toolbar>
+// ---------------------------------------------------------------------------
+
+interface ToolbarProps {
+	children: ReactNode;
+	className?: string;
+}
+
+function ToolbarRoot({ children, className = '' }: ToolbarProps) {
+	return (
+		<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}
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Toolbar.Button
+// ---------------------------------------------------------------------------
+
+interface ToolbarButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+	tooltip?: string;
+	active?: boolean;
+	children: ReactNode;
+}
+
+const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(function ToolbarButton(
+	{ tooltip, active, children, className = '', disabled, ...props },
+	ref
+) {
+	const btn = (
+		<button
+			ref={ref}
+			disabled={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}
+		</button>
+	);
+
+	if (tooltip) {
+		return (
+			<Tooltip text={tooltip} desktopOnly>
+				{btn}
+			</Tooltip>
+		);
+	}
+	return btn;
+});
+
+// ---------------------------------------------------------------------------
+// Toolbar.Group — groups buttons together with tighter spacing
+// ---------------------------------------------------------------------------
+
+function ToolbarGroup({ children, className = '' }: { children: ReactNode; className?: string }) {
+	return <div className={`flex items-center gap-px ${className}`}>{children}</div>;
+}
+
+// ---------------------------------------------------------------------------
+// Toolbar.Separator
+// ---------------------------------------------------------------------------
+
+function ToolbarSeparator() {
+	return <Separator orientation="vertical" className="mx-1 h-4" />;
+}
+
+// ---------------------------------------------------------------------------
+// Toolbar.Spacer — pushes subsequent items to the right
+// ---------------------------------------------------------------------------
+
+function ToolbarSpacer() {
+	return <div className="flex-1" />;
+}
+
+// ---------------------------------------------------------------------------
+// Toolbar.Text — inline text label
+// ---------------------------------------------------------------------------
+
+function ToolbarText({ children, className = '' }: { children: ReactNode; className?: string }) {
+	return <span className={`px-1.5 text-label-13 text-gray-900 ${className}`}>{children}</span>;
+}
+
+// ---------------------------------------------------------------------------
+// Toolbar.Input — inline input (e.g. address bar)
+// ---------------------------------------------------------------------------
+
+function ToolbarInput({
+	value,
+	onChange,
+	placeholder,
+	className = '',
+	readOnly,
+}: {
+	value?: string;
+	onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+	placeholder?: string;
+	className?: string;
+	readOnly?: boolean;
+}) {
+	return (
+		<input
+			type="text"
+			value={value}
+			onChange={onChange}
+			placeholder={placeholder}
+			readOnly={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}`}
+		/>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Export as compound component
+// ---------------------------------------------------------------------------
+
+export const Toolbar = Object.assign(ToolbarRoot, {
+	Button: ToolbarButton,
+	Group: ToolbarGroup,
+	Separator: ToolbarSeparator,
+	Spacer: ToolbarSpacer,
+	Text: ToolbarText,
+	Input: ToolbarInput,
+});

package/src/components/taskbar/AppLauncher.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { LayoutGrid } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { AppIcon } from '@/components/app-icon';
+import {
+	CommandDialog,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+	CommandSeparator,
+} from '@/components/ui/command';
+import { getAppId, useLaunchApp } from '@/lib/hooks/use-launch-app';
+import { useDesktopStore } from '@/stores/desktop-store';
+import type { DesktopEntry } from '@/types/desktop-entry';
+
+export function AppLauncher({ externalToggle }: { externalToggle?: number }) {
+	const [open, setOpen] = useState(false);
+	const apps = useDesktopStore((s) => s.apps);
+	const launchApp = useLaunchApp();
+
+	// Toggle from centralized keybind system
+	const toggleRef = useRef(externalToggle);
+	useEffect(() => {
+		if (externalToggle !== undefined && externalToggle !== toggleRef.current) {
+			toggleRef.current = externalToggle;
+			setOpen((prev) => !prev);
+		}
+	}, [externalToggle]);
+
+	const launch = useCallback(
+		(entry: DesktopEntry) => {
+			launchApp(entry);
+			setOpen(false);
+		},
+		[launchApp]
+	);
+
+	const builtinApps = apps.filter((a) => a.type === 'builtin');
+	const x11Apps = apps.filter((a) => a.type === 'x11' || a.type === 'web');
+
+	return (
+		<>
+			<button
+				className={`flex h-8 items-center gap-1.5 rounded-md px-2 sm:px-2.5 text-label-13 transition-all ${
+					open ? '' : ''
+				}`}
+				style={{
+					background: open ? 'var(--khal-taskbar-active-bg)' : undefined,
+					color: open ? 'var(--khal-text-primary)' : 'var(--khal-text-secondary)',
+				}}
+				onMouseEnter={(e) => {
+					if (!open) (e.currentTarget as HTMLElement).style.background = 'var(--khal-taskbar-hover-bg)';
+				}}
+				onMouseLeave={(e) => {
+					if (!open) (e.currentTarget as HTMLElement).style.background = '';
+				}}
+				onClick={() => setOpen(true)}
+				aria-label="Open app launcher"
+			>
+				<LayoutGrid aria-hidden="true" size={16} />
+				<span className="hidden text-label-13 sm:inline">Apps</span>
+			</button>
+
+			<CommandDialog open={open} onOpenChange={setOpen}>
+				<CommandInput placeholder="Search apps..." />
+				<CommandList>
+					{builtinApps.length > 0 && (
+						<CommandGroup heading="Built-in">
+							{builtinApps.map((entry) => (
+								<CommandItem
+									key={entry.id}
+									value={[entry.name, entry.comment ?? '', entry.id].join(' ')}
+									onSelect={() => launch(entry)}
+								>
+									<AppIcon appId={getAppId(entry)} size={16} className="shrink-0 rounded" />
+									<span>{entry.name}</span>
+									{entry.comment && (
+										<span className="ml-2 text-label-12" style={{ color: 'var(--khal-text-muted)' }}>
+											{entry.comment}
+										</span>
+									)}
+								</CommandItem>
+							))}
+						</CommandGroup>
+					)}
+					{x11Apps.length > 0 && (
+						<>
+							<CommandSeparator />
+							<CommandGroup heading="Applications">
+								{x11Apps.map((entry) => (
+									<CommandItem
+										key={entry.id}
+										value={[entry.name, entry.comment ?? '', entry.id, entry.exec ?? ''].join(' ')}
+										onSelect={() => launch(entry)}
+									>
+										<AppIcon appId={getAppId(entry)} size={16} className="shrink-0 rounded" />
+										<span>{entry.name}</span>
+										{entry.comment && (
+											<span className="ml-2 text-label-12" style={{ color: 'var(--khal-text-muted)' }}>
+												{entry.comment}
+											</span>
+										)}
+									</CommandItem>
+								))}
+							</CommandGroup>
+						</>
+					)}
+				</CommandList>
+			</CommandDialog>
+		</>
+	);
+}