khal-os 1.260324.2

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+const TooltipRoot = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+	React.ComponentRef<typeof TooltipPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, style, ...props }, ref) => (
+	<TooltipPrimitive.Portal>
+		<TooltipPrimitive.Content
+			ref={ref}
+			sideOffset={sideOffset}
+			className={cn(
+				'z-[9999] overflow-hidden rounded-md px-2.5 py-1 text-label-12',
+				'animate-in fade-in-0 zoom-in-95',
+				'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+				'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+				className
+			)}
+			style={{
+				background: 'var(--khal-text-primary, var(--ds-gray-1000))',
+				color: 'var(--khal-text-inverse, var(--ds-background-100))',
+				...style,
+			}}
+			{...props}
+		/>
+	</TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+interface SimpleTooltipProps {
+	text: React.ReactNode;
+	children: React.ReactNode;
+	position?: 'top' | 'bottom' | 'left' | 'right';
+	delay?: boolean;
+	delayTime?: number;
+	desktopOnly?: boolean;
+	className?: string;
+}
+
+function Tooltip({ text, children, position = 'top', delay, delayTime, desktopOnly, className }: SimpleTooltipProps) {
+	const delayDuration = delayTime ?? (delay ? 400 : 200);
+
+	return (
+		<TooltipProvider delayDuration={delayDuration}>
+			<TooltipRoot>
+				<TooltipTrigger asChild>{children}</TooltipTrigger>
+				<TooltipContent side={position} className={cn(desktopOnly && 'max-md:hidden', className)}>
+					{text}
+				</TooltipContent>
+			</TooltipRoot>
+		</TooltipProvider>
+	);
+}
+
+export { Tooltip, TooltipRoot, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/components/window/MobileWindowStack.tsx

@@ -0,0 +1,218 @@
+'use client';
+
+import { ArrowUpDown, ChevronDown, Maximize2, X } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import { AppIcon } from '@/components/app-icon';
+import { APP_COMPONENTS } from '@/components/apps/app-registry';
+import { Separator } from '@/components/ui/separator';
+import { TASKBAR_HEIGHT } from '@/lib/constants';
+import { useVisualViewport } from '@/lib/hooks/use-visual-viewport';
+import { useWindowStore } from '@/stores/window-store';
+import type { WindowState } from '@/types/window';
+
+function AppContent({ windowId, appId, meta }: { windowId: string; appId: string; meta?: Record<string, unknown> }) {
+	const AppComponent = APP_COMPONENTS[appId];
+	if (AppComponent) return <AppComponent windowId={windowId} meta={meta} />;
+	return <div className="flex h-full items-center justify-center text-neutral-500 text-sm">Unknown app: {appId}</div>;
+}
+
+function PaneHeader({
+	win,
+	isSplit,
+	onClose,
+	onSplit,
+	onUnsplit,
+}: {
+	win: WindowState;
+	isSplit: boolean;
+	onClose: () => void;
+	onSplit: () => void;
+	onUnsplit: () => void;
+}) {
+	return (
+		<div className="flex shrink-0 flex-col border-b border-gray-alpha-400 bg-background-200">
+			<div className="flex h-11 items-center gap-2 px-3">
+				<span className="text-gray-900" aria-hidden="true">
+					<AppIcon appId={win.appId} size={16} className="h-4 w-4 shrink-0" />
+				</span>
+				<span className="flex-1 truncate text-label-13 text-gray-1000">{win.title}</span>
+				<button
+					className="flex h-7 w-7 items-center justify-center rounded-md text-gray-900 transition-colors active:bg-gray-alpha-200"
+					onClick={isSplit ? onUnsplit : onSplit}
+					aria-label={isSplit ? 'Exit split view' : 'Split view'}
+				>
+					{isSplit ? <Maximize2 /> : <ArrowUpDown />}
+				</button>
+				<button
+					className="flex h-7 w-7 items-center justify-center rounded-md text-gray-900 transition-colors active:bg-red-200 active:text-red-900"
+					onClick={onClose}
+					aria-label={`Close ${win.title}`}
+				>
+					<X />
+				</button>
+			</div>
+		</div>
+	);
+}
+
+function CollapsedRow({
+	win,
+	onExpand,
+	onSplit,
+	onClose,
+}: {
+	win: WindowState;
+	onExpand: () => void;
+	onSplit: () => void;
+	onClose: () => void;
+}) {
+	return (
+		<div className="flex h-12 shrink-0 items-center border-b border-gray-alpha-400 bg-background-100">
+			<button
+				className="flex flex-1 items-center gap-3 px-4 active:bg-gray-alpha-200"
+				onClick={onExpand}
+				aria-label={`Expand ${win.title}`}
+			>
+				<span className="text-gray-900" aria-hidden="true">
+					<AppIcon appId={win.appId} size={16} className="h-4 w-4 shrink-0" />
+				</span>
+				<span className="flex-1 truncate text-left text-label-14 text-gray-1000">{win.title}</span>
+				<span className="text-gray-900" aria-hidden="true">
+					<ChevronDown />
+				</span>
+			</button>
+			<button
+				className="flex h-12 w-10 items-center justify-center text-gray-900 active:bg-gray-alpha-200"
+				onClick={onSplit}
+				aria-label={`Split ${win.title}`}
+			>
+				<ArrowUpDown />
+			</button>
+			<button
+				className="flex h-12 w-10 items-center justify-center text-gray-900 active:bg-red-200 active:text-red-900"
+				onClick={onClose}
+				aria-label={`Close ${win.title}`}
+			>
+				<X />
+			</button>
+		</div>
+	);
+}
+
+interface MobileWindowStackProps {
+	windows: WindowState[];
+}
+
+export function MobileWindowStack({ windows }: MobileWindowStackProps) {
+	const focusWindow = useWindowStore((s) => s.focusWindow);
+	const closeWindow = useWindowStore((s) => s.closeWindow);
+	const viewport = useVisualViewport();
+	const keyboardOpen = typeof window !== 'undefined' ? viewport.height < window.innerHeight - 50 : false;
+
+	const [splitId, setSplitId] = useState<string | null>(null);
+	const focusedWin = windows.find((w) => w.focused && !w.minimized);
+	const splitWin = splitId ? windows.find((w) => w.id === splitId) : null;
+	if (splitId && !splitWin) setSplitId(null);
+	const isSplit =
+		splitWin !== null && splitWin !== undefined && focusedWin !== undefined && splitWin.id !== focusedWin.id;
+
+	const collapsed = windows.filter((w) => {
+		if (focusedWin && w.id === focusedWin.id) return false;
+		if (isSplit && splitWin && w.id === splitWin.id) return false;
+		return true;
+	});
+
+	const handleClose = useCallback(
+		(id: string) => {
+			if (id === splitId) setSplitId(null);
+			closeWindow(id);
+		},
+		[closeWindow, splitId]
+	);
+	const handleExpand = useCallback(
+		(id: string) => {
+			setSplitId(null);
+			focusWindow(id);
+		},
+		[focusWindow]
+	);
+	const handleSplitWith = useCallback(
+		(id: string) => {
+			if (!focusedWin) {
+				focusWindow(id);
+				return;
+			}
+			setSplitId(id);
+		},
+		[focusedWin, focusWindow]
+	);
+	const handleUnsplit = useCallback(() => setSplitId(null), []);
+
+	if (windows.length === 0) return null;
+
+	return (
+		<div
+			className="fixed left-0 right-0 top-0 z-[8000] flex flex-col bg-background-100"
+			style={{
+				height: viewport.height,
+				paddingBottom: keyboardOpen ? 0 : TASKBAR_HEIGHT,
+				transform: viewport.offsetTop ? `translateY(${viewport.offsetTop}px)` : undefined,
+			}}
+			role="region"
+			aria-label="Open applications"
+		>
+			<div className="flex flex-1 flex-col min-h-0">
+				{focusedWin && (
+					<section
+						className={`flex flex-col min-h-0 ${isSplit ? 'h-1/2' : 'flex-1'}`}
+						aria-label={`${focusedWin.title} pane`}
+					>
+						<PaneHeader
+							win={focusedWin}
+							isSplit={isSplit}
+							onClose={() => handleClose(focusedWin.id)}
+							onSplit={() => {
+								const c = collapsed[0];
+								if (c) handleSplitWith(c.id);
+							}}
+							onUnsplit={handleUnsplit}
+						/>
+						<div className="relative flex-1 min-h-0 overflow-auto bg-background-100">
+							<AppContent windowId={focusedWin.id} appId={focusedWin.appId} meta={focusedWin.meta} />
+						</div>
+					</section>
+				)}
+				{isSplit && splitWin && (
+					<>
+						<Separator className="shrink-0" decorative={false} />
+						<section className="flex h-1/2 flex-col min-h-0" aria-label={`${splitWin.title} pane`}>
+							<PaneHeader
+								win={splitWin}
+								isSplit
+								onClose={() => handleClose(splitWin.id)}
+								onSplit={() => {}}
+								onUnsplit={handleUnsplit}
+							/>
+							<div className="relative flex-1 min-h-0 overflow-auto bg-background-100">
+								<AppContent windowId={splitWin.id} appId={splitWin.appId} meta={splitWin.meta} />
+							</div>
+						</section>
+					</>
+				)}
+			</div>
+			{collapsed.length > 0 && !keyboardOpen && (
+				<div className="shrink-0 overflow-y-auto max-h-36 border-t border-gray-alpha-400">
+					{collapsed.map((win) => (
+						<CollapsedRow
+							key={win.id}
+							win={win}
+							onExpand={() => handleExpand(win.id)}
+							onSplit={() => handleSplitWith(win.id)}
+							onClose={() => handleClose(win.id)}
+						/>
+					))}
+				</div>
+			)}
+		</div>
+	);
+}

package/src/components/window/SnapPreview.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { TASKBAR_HEIGHT } from '@/lib/constants';
+import type { SnapZone } from '@/types/window';
+
+const ZONE_STYLE: Record<NonNullable<SnapZone>, React.CSSProperties> = {
+	left: { top: 0, left: 0, width: '50%', height: `calc(100% - ${TASKBAR_HEIGHT}px)` },
+	right: { top: 0, right: 0, width: '50%', height: `calc(100% - ${TASKBAR_HEIGHT}px)` },
+	top: { top: 0, left: 0, width: '100%', height: `calc(100% - ${TASKBAR_HEIGHT}px)` },
+	'top-left': { top: 0, left: 0, width: '50%', height: `calc(50% - ${TASKBAR_HEIGHT / 2}px)` },
+	'top-right': { top: 0, right: 0, width: '50%', height: `calc(50% - ${TASKBAR_HEIGHT / 2}px)` },
+	'bottom-left': { bottom: TASKBAR_HEIGHT, left: 0, width: '50%', height: `calc(50% - ${TASKBAR_HEIGHT / 2}px)` },
+	'bottom-right': { bottom: TASKBAR_HEIGHT, right: 0, width: '50%', height: `calc(50% - ${TASKBAR_HEIGHT / 2}px)` },
+};
+
+interface SnapPreviewProps {
+	zone: SnapZone;
+}
+
+export function SnapPreview({ zone }: SnapPreviewProps) {
+	if (!zone) return null;
+
+	return (
+		<div className="pointer-events-none fixed inset-0 z-[8999]" aria-hidden="true">
+			<div
+				className="absolute rounded-xl border-2 backdrop-blur-sm transition-all duration-150 ease-out"
+				style={{
+					...ZONE_STYLE[zone],
+					margin: 6,
+					borderColor: 'var(--khal-accent-primary)',
+					background: 'var(--khal-accent-subtle)',
+					opacity: 0.8,
+				}}
+			/>
+		</div>
+	);
+}

package/src/components/window/StandaloneFrame.tsx

@@ -0,0 +1,170 @@
+'use client';
+
+import { Maximize2, Minimize2, Minus, X } from 'lucide-react';
+import { type ReactNode, useCallback, useState } from 'react';
+import { AppIcon } from '@/components/app-icon';
+
+declare global {
+	interface Window {
+		__TAURI__?: {
+			window: {
+				getCurrentWindow: () => {
+					minimize: () => Promise<void>;
+					toggleMaximize: () => Promise<void>;
+					isMaximized: () => Promise<boolean>;
+					close: () => Promise<void>;
+					startDragging: () => Promise<void>;
+				};
+			};
+		};
+	}
+}
+
+interface StandaloneFrameProps {
+	appId: string;
+	title: string;
+	children: ReactNode;
+}
+
+function getTauriWindow() {
+	return window.__TAURI__?.window.getCurrentWindow();
+}
+
+/** Glass-style rounded buttons with blur + color-coded hover */
+function StandaloneControls({ maximized }: { maximized: boolean }) {
+	const win = getTauriWindow();
+
+	return (
+		<div
+			className="flex items-center"
+			style={{ gap: 'var(--khal-controls-gap, 2px)' }}
+			onPointerDown={(e) => e.stopPropagation()}
+			role="toolbar"
+			aria-label="Window controls"
+		>
+			<button
+				className="flex h-7 w-7 items-center justify-center rounded-md transition-colors"
+				style={{ background: 'var(--khal-controls-bg)', color: 'var(--khal-text-muted)' }}
+				onMouseEnter={(e) => {
+					const el = e.currentTarget as HTMLElement;
+					el.style.background = 'var(--khal-controls-minimize-hover-bg)';
+					el.style.backdropFilter = 'var(--khal-controls-blur)';
+				}}
+				onMouseLeave={(e) => {
+					const el = e.currentTarget as HTMLElement;
+					el.style.background = 'var(--khal-controls-bg)';
+					el.style.backdropFilter = '';
+				}}
+				onClick={() => win?.minimize()}
+				aria-label="Minimize window"
+			>
+				<Minus size={14} />
+			</button>
+			<button
+				className="flex h-7 w-7 items-center justify-center rounded-md transition-colors"
+				style={{ background: 'var(--khal-controls-bg)', color: 'var(--khal-text-muted)' }}
+				onMouseEnter={(e) => {
+					const el = e.currentTarget as HTMLElement;
+					el.style.background = 'var(--khal-controls-maximize-hover-bg)';
+					el.style.backdropFilter = 'var(--khal-controls-blur)';
+				}}
+				onMouseLeave={(e) => {
+					const el = e.currentTarget as HTMLElement;
+					el.style.background = 'var(--khal-controls-bg)';
+					el.style.backdropFilter = '';
+				}}
+				onClick={() => win?.toggleMaximize()}
+				aria-label={maximized ? 'Restore window' : 'Maximize window'}
+			>
+				{maximized ? <Minimize2 size={14} /> : <Maximize2 size={14} />}
+			</button>
+			<button
+				className="flex h-7 w-7 items-center justify-center rounded-md transition-colors"
+				style={{ background: 'var(--khal-controls-bg)', color: 'var(--khal-text-muted)' }}
+				onMouseEnter={(e) => {
+					const el = e.currentTarget as HTMLElement;
+					el.style.background = 'var(--khal-controls-close-hover-bg)';
+					el.style.color = 'var(--khal-controls-close-hover-color)';
+					el.style.backdropFilter = 'var(--khal-controls-blur)';
+				}}
+				onMouseLeave={(e) => {
+					const el = e.currentTarget as HTMLElement;
+					el.style.background = 'var(--khal-controls-bg)';
+					el.style.color = 'var(--khal-text-muted)';
+					el.style.backdropFilter = '';
+				}}
+				onClick={() => win?.close()}
+				aria-label="Close window"
+			>
+				<X size={14} />
+			</button>
+		</div>
+	);
+}
+
+export function StandaloneFrame({ appId, title, children }: StandaloneFrameProps) {
+	const [maximized, setMaximized] = useState(false);
+
+	const handleDrag = useCallback((e: React.PointerEvent) => {
+		// Only drag on primary button (left click)
+		if (e.button !== 0) return;
+		getTauriWindow()?.startDragging();
+	}, []);
+
+	const handleDoubleClick = useCallback(async () => {
+		const win = getTauriWindow();
+		if (!win) return;
+		await win.toggleMaximize();
+		setMaximized(await win.isMaximized());
+	}, []);
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				height: '100vh',
+				backgroundColor: 'var(--ds-background-100, #0a0a0a)',
+				borderRadius: 'var(--os-window-radius, 10px)',
+				overflow: 'hidden',
+				boxShadow: 'var(--khal-window-shadow, 0 8px 32px rgba(0,0,0,0.4))',
+				border: 'var(--khal-window-border, 1px solid var(--khal-border-default, rgba(255,255,255,0.08)))',
+			}}
+		>
+			{/* Title bar */}
+			<header
+				className="khal-window-frame flex shrink-0 items-center justify-between select-none"
+				style={{
+					height: 'var(--khal-frame-height, 40px)',
+					paddingLeft: 'var(--khal-frame-padding-x, 12px)',
+					paddingRight: 'var(--khal-frame-padding-x, 12px)',
+					background: 'var(--khal-window-frame-bg-focused, var(--khal-window-title-bg-focused))',
+					borderBottom: 'var(--khal-window-frame-border-bottom, 1px solid var(--khal-border-strong))',
+					backdropFilter: 'var(--khal-frame-backdrop, var(--khal-glass-filter, none))',
+					WebkitBackdropFilter: 'var(--khal-frame-backdrop, var(--khal-glass-filter, none))',
+				}}
+				onPointerDown={handleDrag}
+				onDoubleClick={handleDoubleClick}
+			>
+				<div className="flex min-w-0 items-center" style={{ gap: 'var(--khal-frame-icon-gap, 8px)' }}>
+					<span style={{ opacity: 'var(--khal-frame-icon-opacity, 1)' }}>
+						<AppIcon appId={appId} size={16} className="h-4 w-4 shrink-0" />
+					</span>
+					<h2
+						className="truncate font-medium"
+						style={{
+							fontSize: 'var(--khal-frame-font-size, 13px)',
+							color: 'var(--khal-text-primary)',
+						}}
+					>
+						{title}
+					</h2>
+				</div>
+				<StandaloneControls maximized={maximized} />
+			</header>
+
+			{/* App content */}
+			<div style={{ flex: 1, overflow: 'auto' }}>{children}</div>
+		</div>
+	);
+}