khal-os 1.260324.2

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

@@ -0,0 +1,226 @@
+'use client';
+
+import { createContext, type ReactNode, useCallback, useContext, useRef, useState } from 'react';
+
+// ---------------------------------------------------------------------------
+// CollapsibleSidebar — resizable sidebar with collapse/expand toggle.
+//
+// Usage:
+//   <CollapsibleSidebar defaultSize={220} min={160} max={360}>
+//     <CollapsibleSidebar.Header>
+//       <span>Explorer</span>
+//       <CollapsibleSidebar.CollapseButton />
+//     </CollapsibleSidebar.Header>
+//     <CollapsibleSidebar.Content>
+//       <FileTree />
+//     </CollapsibleSidebar.Content>
+//   </CollapsibleSidebar>
+// ---------------------------------------------------------------------------
+
+interface SidebarContextValue {
+	collapsed: boolean;
+	toggle: () => void;
+	size: number;
+}
+
+const SidebarContext = createContext<SidebarContextValue>({
+	collapsed: false,
+	toggle: () => {},
+	size: 220,
+});
+
+export function useSidebar() {
+	return useContext(SidebarContext);
+}
+
+interface CollapsibleSidebarProps {
+	children: ReactNode;
+	defaultSize?: number;
+	min?: number;
+	max?: number;
+	defaultCollapsed?: boolean;
+	side?: 'left' | 'right';
+	className?: string;
+}
+
+function CollapsibleSidebarRoot({
+	children,
+	defaultSize = 220,
+	min = 140,
+	max = 400,
+	defaultCollapsed = false,
+	side = 'left',
+	className = '',
+}: CollapsibleSidebarProps) {
+	const [collapsed, setCollapsed] = useState(defaultCollapsed);
+	const [size, setSize] = useState(defaultSize);
+	const dragging = useRef(false);
+	const startX = useRef(0);
+	const startSize = useRef(0);
+
+	const toggle = useCallback(() => setCollapsed((v) => !v), []);
+
+	const onPointerDown = useCallback(
+		(e: React.PointerEvent) => {
+			if (collapsed) return;
+			e.preventDefault();
+			dragging.current = true;
+			startX.current = e.clientX;
+			startSize.current = size;
+			(e.target as HTMLElement).setPointerCapture(e.pointerId);
+		},
+		[collapsed, size]
+	);
+
+	const onPointerMove = useCallback(
+		(e: React.PointerEvent) => {
+			if (!dragging.current) return;
+			const delta = side === 'left' ? e.clientX - startX.current : startX.current - e.clientX;
+			setSize(Math.min(max, Math.max(min, startSize.current + delta)));
+		},
+		[side, min, max]
+	);
+
+	const onPointerUp = useCallback(() => {
+		dragging.current = false;
+	}, []);
+
+	const resizeHandle = (
+		<div
+			className={`w-px shrink-0 cursor-col-resize bg-gray-alpha-200 transition-colors hover:w-0.5 hover:bg-blue-700/50 active:w-0.5 active:bg-blue-700 ${
+				collapsed ? 'pointer-events-none' : ''
+			}`}
+			onPointerDown={onPointerDown}
+			onPointerMove={onPointerMove}
+			onPointerUp={onPointerUp}
+			role="separator"
+			aria-orientation="vertical"
+		/>
+	);
+
+	return (
+		<SidebarContext.Provider value={{ collapsed, toggle, size }}>
+			<div className={`flex shrink-0 ${className}`} style={{ width: collapsed ? 0 : size }}>
+				{side === 'right' && resizeHandle}
+				<div
+					className={`flex h-full flex-col overflow-hidden transition-[width] duration-150 ${
+						collapsed ? 'w-0' : 'w-full'
+					}`}
+				>
+					{children}
+				</div>
+				{side === 'left' && resizeHandle}
+			</div>
+		</SidebarContext.Provider>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// CollapsibleSidebar.Header
+// ---------------------------------------------------------------------------
+
+function SidebarHeader({ children, className = '' }: { children: ReactNode; className?: string }) {
+	return (
+		<div className={`flex h-9 shrink-0 items-center justify-between border-b border-gray-alpha-200 px-3 ${className}`}>
+			{children}
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// CollapsibleSidebar.CollapseButton
+// ---------------------------------------------------------------------------
+
+function CollapseButton({ className = '' }: { className?: string }) {
+	const { collapsed, toggle } = useSidebar();
+	return (
+		<button
+			onClick={toggle}
+			className={`inline-flex h-5 w-5 items-center justify-center rounded text-gray-800 hover:bg-gray-alpha-200 hover:text-gray-1000 transition-colors ${className}`}
+			aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+		>
+			<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+				<path
+					d={collapsed ? 'M4.5 2L8.5 6L4.5 10' : 'M8.5 2L4.5 6L8.5 10'}
+					stroke="currentColor"
+					strokeWidth="1.5"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+				/>
+			</svg>
+		</button>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// CollapsibleSidebar.Content
+// ---------------------------------------------------------------------------
+
+function SidebarContent({ children, className = '' }: { children: ReactNode; className?: string }) {
+	return <div className={`flex-1 overflow-y-auto ${className}`}>{children}</div>;
+}
+
+// ---------------------------------------------------------------------------
+// CollapsibleSidebar.Section
+// ---------------------------------------------------------------------------
+
+function SidebarSection({
+	title,
+	children,
+	className = '',
+}: {
+	title?: string;
+	children: ReactNode;
+	className?: string;
+}) {
+	return (
+		<div className={`${className}`}>
+			{title && (
+				<div className="px-3 pt-2 pb-1">
+					<span className="text-label-13 font-medium text-gray-800">{title}</span>
+				</div>
+			)}
+			{children}
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// CollapsibleSidebar.Item
+// ---------------------------------------------------------------------------
+
+interface SidebarItemProps {
+	children: ReactNode;
+	icon?: ReactNode;
+	active?: boolean;
+	indent?: number;
+	onClick?: () => void;
+	className?: string;
+}
+
+function SidebarItem({ children, icon, active, indent = 0, onClick, className = '' }: SidebarItemProps) {
+	return (
+		<button
+			onClick={onClick}
+			className={`flex w-full items-center gap-2 rounded-md px-2 py-1 text-left text-label-13 transition-colors
+        ${active ? 'bg-gray-alpha-200 text-gray-1000' : 'text-gray-900 hover:bg-gray-alpha-100 hover:text-gray-1000'}
+        ${className}`}
+			style={{ paddingLeft: 8 + indent * 12 }}
+		>
+			{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>
+		</button>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Export
+// ---------------------------------------------------------------------------
+
+export const CollapsibleSidebar = Object.assign(CollapsibleSidebarRoot, {
+	Header: SidebarHeader,
+	CollapseButton,
+	Content: SidebarContent,
+	Section: SidebarSection,
+	Item: SidebarItem,
+});

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

@@ -0,0 +1,76 @@
+'use client';
+
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+/* ------------------------------------------------------------------ */
+/*  Minimal compound Dialog primitive for OS chrome.                   */
+/*  Enough to satisfy DeleteConfirmDialog; expand as needed.           */
+/* ------------------------------------------------------------------ */
+
+interface DialogRootProps {
+	open: boolean;
+	onClose: () => void;
+	children: ReactNode;
+}
+
+function DialogRoot({ open, onClose, children }: DialogRootProps) {
+	if (!open) return null;
+	return (
+		<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={onClose}>
+			<div
+				className="bg-popover text-popover-foreground rounded-lg border p-6 shadow-lg"
+				onClick={(e) => e.stopPropagation()}
+			>
+				{children}
+			</div>
+		</div>
+	);
+}
+
+function Body({ children }: { children: ReactNode }) {
+	return <div className="flex items-start gap-4">{children}</div>;
+}
+
+function Icon({ children, variant: _variant }: { children: ReactNode; variant?: string }) {
+	return <div className="shrink-0">{children}</div>;
+}
+
+function Title({ children }: { children: ReactNode }) {
+	return <h2 className="text-lg font-semibold">{children}</h2>;
+}
+
+function Description({ children }: { children: ReactNode }) {
+	return <p className="text-muted-foreground text-sm">{children}</p>;
+}
+
+function Actions({ children }: { children: ReactNode }) {
+	return <div className="mt-4 flex justify-end gap-2">{children}</div>;
+}
+
+type BtnProps = ButtonHTMLAttributes<HTMLButtonElement> & { variant?: string };
+
+function Cancel({ children, ...props }: BtnProps) {
+	return (
+		<button type="button" className="rounded px-3 py-1.5 text-sm hover:bg-muted" {...props}>
+			{children}
+		</button>
+	);
+}
+
+function Confirm({ children, variant: _variant, ...props }: BtnProps) {
+	return (
+		<button type="button" className="rounded bg-destructive px-3 py-1.5 text-sm text-destructive-foreground" {...props}>
+			{children}
+		</button>
+	);
+}
+
+export const Dialog = Object.assign(DialogRoot, {
+	Body,
+	Icon,
+	Title,
+	Description,
+	Actions,
+	Cancel,
+	Confirm,
+});

package/src/components/os-primitives/empty-state.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { type ReactNode } from 'react';
+
+// ---------------------------------------------------------------------------
+// EmptyState — placeholder for empty views (no files, no results, etc.).
+//
+// Usage:
+//   <EmptyState
+//     icon={<FolderOpen />}
+//     title="No files"
+//     description="This folder is empty."
+//     action={<Button onClick={upload}>Upload File</Button>}
+//   />
+// ---------------------------------------------------------------------------
+
+interface EmptyStateProps {
+	icon?: ReactNode;
+	title: string;
+	description?: string;
+	action?: ReactNode;
+	compact?: boolean;
+	className?: string;
+}
+
+export function EmptyState({ icon, title, description, action, compact, className = '' }: EmptyStateProps) {
+	return (
+		<div
+			className={`flex flex-col items-center justify-center text-center ${
+				compact ? 'gap-2 py-6' : 'gap-3 py-12'
+			} ${className}`}
+		>
+			{icon && (
+				<div className={`text-gray-700 ${compact ? '[&>svg]:h-5 [&>svg]:w-5' : '[&>svg]:h-8 [&>svg]:w-8'}`}>{icon}</div>
+			)}
+			<div className="space-y-0.5">
+				<p className="text-label-13 font-medium text-gray-1000">{title}</p>
+				{description && <p className={`text-gray-800 ${compact ? 'text-label-13' : 'text-label-13'}`}>{description}</p>}
+			</div>
+			{action && <div className="mt-2 shrink-0">{action}</div>}
+		</div>
+	);
+}

package/src/components/os-primitives/index.ts

@@ -0,0 +1,21 @@
+// OS Primitives — UI building blocks for desktop app chrome.
+// Built on top of shadcn/ui components and Geist design tokens.
+//
+// These fill the gap between shadcn's web-focused components and the
+// needs of a desktop-style app (toolbars, split panes, status bars, etc.).
+//
+// shadcn/ui components to use directly (from @/components/ui/*):
+//   Button, Input, Badge, Spinner, Separator, Tooltip, Toggle (Switch),
+//   ContextMenu, Command (CommandDialog), DropdownMenu, Note, LoadingDots,
+//   ThemeSwitcher
+
+export { CollapsibleSidebar, useSidebar } from './collapsible-sidebar';
+export { EmptyState } from './empty-state';
+export { ListView } from './list-view';
+export { PropertyPanel } from './property-panel';
+export { SectionHeader } from './section-header';
+export { SidebarNav } from './sidebar-nav';
+export { SplitPane } from './split-pane';
+export { StatusBadge } from './status-badge';
+export { StatusBar } from './status-bar';
+export { Toolbar } from './toolbar';

package/src/components/os-primitives/list-view.tsx

@@ -0,0 +1,155 @@
+'use client';
+
+import { type KeyboardEvent, type ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+
+// ---------------------------------------------------------------------------
+// ListView — selectable list with keyboard navigation.
+//
+// Usage:
+//   <ListView
+//     items={files}
+//     selected={selectedId}
+//     onSelect={setSelectedId}
+//     onActivate={(item) => openFile(item)}
+//     renderItem={(item, { selected, focused }) => (
+//       <div className="flex items-center gap-2">
+//         <FileIcon name={item.name} />
+//         <span>{item.name}</span>
+//       </div>
+//     )}
+//     getKey={(item) => item.id}
+//   />
+// ---------------------------------------------------------------------------
+
+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;
+}
+
+export function ListView<T>({
+	items,
+	selected,
+	onSelect,
+	onActivate,
+	renderItem,
+	getKey,
+	multiSelect = false,
+	emptyMessage = 'No items',
+	className = '',
+}: ListViewProps<T>) {
+	const [focusIndex, setFocusIndex] = useState(0);
+	const listRef = useRef<HTMLDivElement>(null);
+
+	const selectedSet = new Set(selected == null ? [] : Array.isArray(selected) ? selected : [selected]);
+
+	const clamp = useCallback((i: number) => Math.max(0, Math.min(items.length - 1, i)), [items.length]);
+
+	useEffect(() => {
+		setFocusIndex((prev) => clamp(prev));
+	}, [items.length, clamp]);
+
+	const scrollToIndex = useCallback((i: number) => {
+		const el = listRef.current?.children[i] as HTMLElement | undefined;
+		el?.scrollIntoView({ block: 'nearest' });
+	}, []);
+
+	const handleKeyDown = useCallback(
+		(e: KeyboardEvent) => {
+			switch (e.key) {
+				case 'ArrowDown': {
+					e.preventDefault();
+					const next = clamp(focusIndex + 1);
+					setFocusIndex(next);
+					scrollToIndex(next);
+					if (!multiSelect) onSelect?.(getKey(items[next]));
+					break;
+				}
+				case 'ArrowUp': {
+					e.preventDefault();
+					const prev = clamp(focusIndex - 1);
+					setFocusIndex(prev);
+					scrollToIndex(prev);
+					if (!multiSelect) onSelect?.(getKey(items[prev]));
+					break;
+				}
+				case 'Home': {
+					e.preventDefault();
+					setFocusIndex(0);
+					scrollToIndex(0);
+					if (!multiSelect && items.length > 0) onSelect?.(getKey(items[0]));
+					break;
+				}
+				case 'End': {
+					e.preventDefault();
+					const last = items.length - 1;
+					setFocusIndex(last);
+					scrollToIndex(last);
+					if (!multiSelect && items.length > 0) onSelect?.(getKey(items[last]));
+					break;
+				}
+				case 'Enter':
+				case ' ': {
+					e.preventDefault();
+					const item = items[focusIndex];
+					if (item) {
+						onSelect?.(getKey(item));
+						if (e.key === 'Enter') onActivate?.(item);
+					}
+					break;
+				}
+			}
+		},
+		[focusIndex, items, clamp, scrollToIndex, onSelect, onActivate, getKey, multiSelect]
+	);
+
+	if (items.length === 0) {
+		return (
+			<div className={`flex h-full items-center justify-center text-label-13 text-gray-800 ${className}`}>
+				{emptyMessage}
+			</div>
+		);
+	}
+
+	return (
+		<div
+			ref={listRef}
+			className={`overflow-y-auto outline-none ${className}`}
+			role="listbox"
+			tabIndex={0}
+			onKeyDown={handleKeyDown}
+			aria-multiselectable={multiSelect}
+		>
+			{items.map((item, i) => {
+				const key = getKey(item);
+				const isSelected = selectedSet.has(key);
+				const isFocused = i === focusIndex;
+
+				return (
+					<div
+						key={key}
+						role="option"
+						aria-selected={isSelected}
+						className={`cursor-default select-none px-2 py-1 transition-colors
+              ${isSelected ? 'bg-blue-700/15 text-gray-1000' : 'text-gray-1000'}
+              ${isFocused && !isSelected ? 'bg-gray-alpha-100' : ''}
+              hover:bg-gray-alpha-200`}
+						onClick={() => {
+							setFocusIndex(i);
+							onSelect?.(key);
+						}}
+						onDoubleClick={() => onActivate?.(item)}
+					>
+						{renderItem(item, { selected: isSelected, focused: isFocused, index: i })}
+					</div>
+				);
+			})}
+		</div>
+	);
+}

package/src/components/os-primitives/property-panel.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { type ReactNode } from 'react';
+import { Separator } from '@/components/ui/separator';
+
+// ---------------------------------------------------------------------------
+// PropertyPanel — key-value inspector panel (like Finder's "Get Info").
+//
+// Usage:
+//   <PropertyPanel title="File Info">
+//     <PropertyPanel.Section title="General">
+//       <PropertyPanel.Row label="Name" value="document.pdf" />
+//       <PropertyPanel.Row label="Size" value="2.4 MB" />
+//       <PropertyPanel.Row label="Modified" value="Feb 10, 2026" />
+//     </PropertyPanel.Section>
+//     <PropertyPanel.Section title="Permissions">
+//       <PropertyPanel.Row label="Owner" value="vercel-sandbox" />
+//       <PropertyPanel.Row label="Group" value="users" />
+//     </PropertyPanel.Section>
+//   </PropertyPanel>
+// ---------------------------------------------------------------------------
+
+interface PropertyPanelProps {
+	title?: string;
+	children: ReactNode;
+	className?: string;
+}
+
+function PropertyPanelRoot({ title, children, className = '' }: PropertyPanelProps) {
+	return (
+		<div className={`flex flex-col overflow-y-auto ${className}`}>
+			{title && (
+				<div className="sticky top-0 z-10 border-b border-gray-alpha-200 bg-background-100 px-3 py-2">
+					<h3 className="text-label-13 font-medium text-gray-1000">{title}</h3>
+				</div>
+			)}
+			<div className="flex flex-col">{children}</div>
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// PropertyPanel.Section
+// ---------------------------------------------------------------------------
+
+function PropertySection({
+	title,
+	children,
+	collapsible: _collapsible = false,
+	defaultOpen: _defaultOpen = true,
+}: {
+	title?: string;
+	children: ReactNode;
+	collapsible?: boolean;
+	defaultOpen?: boolean;
+}) {
+	return (
+		<div className="border-b border-gray-alpha-200 last:border-b-0">
+			{title && (
+				<div className="px-3 pt-3 pb-1">
+					<span className="text-label-13 font-medium text-gray-800">{title}</span>
+				</div>
+			)}
+			<div className={`px-3 pb-2 ${title ? '' : 'pt-2'}`}>{children}</div>
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// PropertyPanel.Row
+// ---------------------------------------------------------------------------
+
+interface PropertyRowProps {
+	label: string;
+	value?: ReactNode;
+	children?: ReactNode;
+	mono?: boolean;
+	copyable?: boolean;
+}
+
+function PropertyRow({ label, value, children, mono }: PropertyRowProps) {
+	return (
+		<div className="flex items-baseline justify-between gap-4 py-1">
+			<dt className="shrink-0 text-label-13 text-gray-800">{label}</dt>
+			<dd className={`min-w-0 truncate text-right text-label-13 text-gray-1000 ${mono ? 'font-mono' : ''}`}>
+				{children ?? value}
+			</dd>
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// PropertyPanel.Separator
+// ---------------------------------------------------------------------------
+
+function PropertySeparator() {
+	return <Separator className="my-1" />;
+}
+
+// ---------------------------------------------------------------------------
+// Export
+// ---------------------------------------------------------------------------
+
+export const PropertyPanel = Object.assign(PropertyPanelRoot, {
+	Section: PropertySection,
+	Row: PropertyRow,
+	Separator: PropertySeparator,
+});

package/src/components/os-primitives/section-header.tsx

@@ -0,0 +1,19 @@
+export function SectionHeader({
+	title,
+	description,
+	children,
+}: {
+	title: string;
+	description?: string;
+	children?: React.ReactNode;
+}) {
+	return (
+		<div className="mb-4 flex items-start justify-between">
+			<div>
+				<h2 className="text-copy-13 font-medium text-gray-1000">{title}</h2>
+				{description && <p className="mt-0.5 text-copy-13 text-gray-900">{description}</p>}
+			</div>
+			{children}
+		</div>
+	);
+}