khal-os 1.260324.2

package/src/lib/hooks/use-visual-viewport.ts

@@ -0,0 +1,72 @@
+import { useSyncExternalStore } from 'react';
+
+interface ViewportSize {
+	height: number;
+	width: number;
+	offsetTop: number;
+}
+
+let cached: ViewportSize = {
+	height: typeof window !== 'undefined' ? window.innerHeight : 800,
+	width: typeof window !== 'undefined' ? window.innerWidth : 1280,
+	offsetTop: 0,
+};
+
+const listeners = new Set<() => void>();
+
+function update() {
+	const vv = typeof window !== 'undefined' ? window.visualViewport : null;
+	const next: ViewportSize = vv
+		? { height: vv.height, width: vv.width, offsetTop: vv.offsetTop }
+		: {
+				height: typeof window !== 'undefined' ? window.innerHeight : 800,
+				width: typeof window !== 'undefined' ? window.innerWidth : 1280,
+				offsetTop: 0,
+			};
+
+	if (next.height !== cached.height || next.width !== cached.width || next.offsetTop !== cached.offsetTop) {
+		cached = next;
+		for (const cb of listeners) cb();
+	}
+}
+
+let listening = false;
+
+function subscribe(cb: () => void) {
+	listeners.add(cb);
+
+	if (!listening && typeof window !== 'undefined') {
+		listening = true;
+		const vv = window.visualViewport;
+		if (vv) {
+			vv.addEventListener('resize', update);
+			vv.addEventListener('scroll', update);
+		}
+		window.addEventListener('resize', update);
+	}
+
+	return () => {
+		listeners.delete(cb);
+		if (listeners.size === 0 && typeof window !== 'undefined') {
+			listening = false;
+			const vv = window.visualViewport;
+			if (vv) {
+				vv.removeEventListener('resize', update);
+				vv.removeEventListener('scroll', update);
+			}
+			window.removeEventListener('resize', update);
+		}
+	};
+}
+
+function getSnapshot() {
+	return cached;
+}
+
+function getServerSnapshot(): ViewportSize {
+	return { height: 800, width: 1280, offsetTop: 0 };
+}
+
+export function useVisualViewport(): ViewportSize {
+	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}

package/src/lib/icons/resolve-window-icon.ts

@@ -0,0 +1,10 @@
+import { useDesktopStore } from '@/stores/desktop-store';
+
+/**
+ * React hook version — subscribes to the desktop store.
+ */
+export function useResolvedIcon(appId: string): string | null {
+	const apps = useDesktopStore((s) => s.apps);
+	const entry = apps.find((a) => a.id === appId || a.component === appId);
+	return entry?.icon ?? null;
+}

package/src/lib/keyboard/defaults.ts

@@ -0,0 +1,146 @@
+import type { ShortcutDefinition } from './types';
+
+export const DEFAULT_SHORTCUTS: ShortcutDefinition[] = [
+	// ── Window Management ──────────────────────────────────────────────
+	{
+		id: 'window.cycle-next',
+		label: 'Switch Window',
+		description: 'Cycle to next window (Alt-Tab)',
+		category: 'window',
+		defaultBinding: { key: 'Tab', modifiers: ['alt'] },
+		repeat: true,
+	},
+	{
+		id: 'window.cycle-prev',
+		label: 'Switch Window (Reverse)',
+		description: 'Cycle to previous window',
+		category: 'window',
+		defaultBinding: { key: 'Tab', modifiers: ['alt', 'shift'] },
+		repeat: true,
+	},
+	{
+		id: 'window.close',
+		label: 'Close Window',
+		description: 'Close the focused window',
+		category: 'window',
+		defaultBinding: { key: 'w', modifiers: ['alt'] },
+	},
+	{
+		id: 'window.minimize',
+		label: 'Minimize Window',
+		description: 'Minimize the focused window',
+		category: 'window',
+		defaultBinding: { key: 'h', modifiers: ['meta'] },
+	},
+	{
+		id: 'window.maximize',
+		label: 'Maximize / Restore Window',
+		description: 'Toggle maximize on the focused window',
+		category: 'window',
+		defaultBinding: { key: 'ArrowUp', modifiers: ['meta'] },
+	},
+	{
+		id: 'window.snap-left',
+		label: 'Tile Window Left',
+		description: 'Snap the focused window to the left half',
+		category: 'window',
+		defaultBinding: { key: 'ArrowLeft', modifiers: ['meta'] },
+	},
+	{
+		id: 'window.snap-right',
+		label: 'Tile Window Right',
+		description: 'Snap the focused window to the right half',
+		category: 'window',
+		defaultBinding: { key: 'ArrowRight', modifiers: ['meta'] },
+	},
+
+	// ── Launcher ───────────────────────────────────────────────────────
+	{
+		id: 'launcher.open',
+		label: 'App Launcher',
+		description: 'Open the application launcher',
+		category: 'launcher',
+		defaultBinding: { key: 'k', modifiers: ['meta'] },
+	},
+	{
+		id: 'launcher.terminal',
+		label: 'Open Terminal',
+		description: 'Open a new terminal window',
+		category: 'launcher',
+		defaultBinding: { key: 't', modifiers: ['ctrl', 'alt'] },
+	},
+	{
+		id: 'launcher.settings',
+		label: 'Open Settings',
+		description: 'Open the settings panel',
+		category: 'launcher',
+		defaultBinding: { key: ',', modifiers: ['meta'] },
+	},
+
+	// ── System ─────────────────────────────────────────────────────────
+	{
+		id: 'system.notification-center',
+		label: 'Notification Center',
+		description: 'Toggle the notification center',
+		category: 'system',
+		defaultBinding: { key: 'n', modifiers: ['meta'] },
+	},
+	{
+		id: 'system.shortcut-viewer',
+		label: 'Shortcut Viewer',
+		description: 'Open the keyboard shortcut reference',
+		category: 'system',
+		defaultBinding: { key: '/', modifiers: ['meta'] },
+	},
+	{
+		id: 'window.close-meta',
+		label: 'Close Window/Tab',
+		description: 'Close window or terminal tab (context-aware)',
+		category: 'window',
+		defaultBinding: { key: 'w', modifiers: ['meta'] },
+	},
+
+	// ── Terminal ───────────────────────────────────────────────────────
+	{
+		id: 'terminal.new-tab',
+		label: 'New Terminal Tab',
+		description: 'Create a new tab in the terminal',
+		category: 'terminal',
+		defaultBinding: { key: 't', modifiers: ['meta'] },
+	},
+	{
+		id: 'terminal.close-tab',
+		label: 'Close Terminal Tab/Pane',
+		description: 'Close the active terminal tab or pane',
+		category: 'terminal',
+		defaultBinding: { key: 'w', modifiers: ['meta'] },
+	},
+	{
+		id: 'terminal.next-tab',
+		label: 'Next Terminal Tab',
+		description: 'Switch to the next terminal tab',
+		category: 'terminal',
+		defaultBinding: { key: 'Tab', modifiers: ['ctrl'] },
+	},
+	{
+		id: 'terminal.prev-tab',
+		label: 'Previous Terminal Tab',
+		description: 'Switch to the previous terminal tab',
+		category: 'terminal',
+		defaultBinding: { key: 'Tab', modifiers: ['ctrl', 'shift'] },
+	},
+	{
+		id: 'terminal.split-vertical',
+		label: 'Split Terminal Vertically',
+		description: 'Split the active pane into two side-by-side panes',
+		category: 'terminal',
+		defaultBinding: { key: 'd', modifiers: ['meta'] },
+	},
+	{
+		id: 'terminal.split-horizontal',
+		label: 'Split Terminal Horizontally',
+		description: 'Split the active pane into two top/bottom panes',
+		category: 'terminal',
+		defaultBinding: { key: 'd', modifiers: ['meta', 'shift'] },
+	},
+];

package/src/lib/keyboard/types.ts

@@ -0,0 +1,52 @@
+export type ModifierKey = 'meta' | 'ctrl' | 'alt' | 'shift';
+
+export interface KeyCombo {
+	key: string;
+	modifiers: ModifierKey[];
+}
+
+export type ShortcutCategory = 'window' | 'workspace' | 'launcher' | 'terminal' | 'system';
+
+export interface ShortcutDefinition {
+	id: string;
+	label: string;
+	description: string;
+	category: ShortcutCategory;
+	defaultBinding: KeyCombo;
+	/** Whether the shortcut fires on keyup instead of keydown */
+	onKeyUp?: boolean;
+	/** Whether the shortcut repeats when held */
+	repeat?: boolean;
+}
+
+export function comboToSymbols(combo: KeyCombo): string {
+	const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.userAgent);
+	const parts: string[] = [];
+	if (combo.modifiers.includes('ctrl')) parts.push(isMac ? '\u2303' : 'Ctrl');
+	if (combo.modifiers.includes('alt')) parts.push(isMac ? '\u2325' : 'Alt');
+	if (combo.modifiers.includes('shift')) parts.push(isMac ? '\u21E7' : 'Shift');
+	if (combo.modifiers.includes('meta')) parts.push(isMac ? '\u2318' : 'Super');
+	parts.push(formatKeyName(combo.key));
+	return parts.join(isMac ? '' : ' + ');
+}
+
+function formatKeyName(key: string): string {
+	if (key === 'Tab') return 'Tab';
+	if (key === 'Escape') return 'Esc';
+	if (key === 'ArrowLeft') return '\u2190';
+	if (key === 'ArrowRight') return '\u2192';
+	if (key === 'ArrowUp') return '\u2191';
+	if (key === 'ArrowDown') return '\u2193';
+	if (key === ' ') return 'Space';
+	if (key.length === 1) return key.toUpperCase();
+	return key;
+}
+
+export function matchesCombo(e: KeyboardEvent, combo: KeyCombo): boolean {
+	if (e.key.toLowerCase() !== combo.key.toLowerCase() && e.key !== combo.key) return false;
+	const wantMeta = combo.modifiers.includes('meta');
+	const wantCtrl = combo.modifiers.includes('ctrl');
+	const wantAlt = combo.modifiers.includes('alt');
+	const wantShift = combo.modifiers.includes('shift');
+	return e.metaKey === wantMeta && e.ctrlKey === wantCtrl && e.altKey === wantAlt && e.shiftKey === wantShift;
+}

package/src/lib/keyboard/use-global-keybinds.ts

@@ -0,0 +1,231 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useKhalAuth } from '@/lib/auth/use-auth';
+import { hasAppPermission } from '@/lib/hooks/use-launch-app';
+import { useKeybindStore } from '@/stores/keybind-store';
+import { useNotificationStore } from '@/stores/notification-store';
+import { useWindowStore } from '@/stores/window-store';
+import type { WindowState } from '@/types/window';
+import { matchesCombo } from './types';
+
+interface WindowSwitcherState {
+	visible: boolean;
+	windows: WindowState[];
+	selectedIndex: number;
+}
+
+export function useGlobalKeybinds() {
+	const [switcher, setSwitcher] = useState<WindowSwitcherState>({
+		visible: false,
+		windows: [],
+		selectedIndex: 0,
+	});
+	const switcherRef = useRef(switcher);
+	switcherRef.current = switcher;
+
+	const [launcherToggle, setLauncherToggle] = useState(0);
+	const [shortcutViewerVisible, setShortcutViewerVisible] = useState(false);
+
+	// Track permissions via ref so handleAction stays stable (no dep change)
+	const auth = useKhalAuth();
+	const permissionsRef = useRef<string[]>(auth?.permissions ?? []);
+	permissionsRef.current = auth?.permissions ?? [];
+
+	const handleAction = useCallback((id: string) => {
+		const windowStore = useWindowStore.getState();
+
+		switch (id) {
+			case 'window.cycle-next':
+			case 'window.cycle-prev': {
+				const windows = windowStore.getWindows();
+				if (windows.length === 0) return;
+				const sorted = [...windows].sort((a, b) => b.zIndex - a.zIndex);
+				const current = switcherRef.current;
+
+				if (!current.visible) {
+					const startIndex = id === 'window.cycle-next' ? 1 : sorted.length - 1;
+					setSwitcher({
+						visible: true,
+						windows: sorted,
+						selectedIndex: Math.min(startIndex, sorted.length - 1),
+					});
+				} else {
+					const dir = id === 'window.cycle-next' ? 1 : -1;
+					const next = (current.selectedIndex + dir + current.windows.length) % current.windows.length;
+					setSwitcher((prev) => ({ ...prev, selectedIndex: next }));
+				}
+				return;
+			}
+
+			case 'window.close': {
+				const top = windowStore.getTopmostWindow();
+				if (top) windowStore.closeWindow(top.id);
+				return;
+			}
+			case 'window.close-meta': {
+				const top = windowStore.getTopmostWindow();
+				// If focused window is terminal, skip (let terminal handle Cmd+W internally as close-tab)
+				if (top && top.appId !== 'terminal') {
+					windowStore.closeWindow(top.id);
+				}
+				// If it is terminal, do nothing - terminal's internal handler will take over
+				return;
+			}
+			case 'window.minimize': {
+				const top = windowStore.getTopmostWindow();
+				if (top) windowStore.minimizeWindow(top.id);
+				return;
+			}
+			case 'window.maximize': {
+				const top = windowStore.getTopmostWindow();
+				if (top) {
+					if (top.maximized) windowStore.restoreWindow(top.id);
+					else windowStore.maximizeWindow(top.id);
+				}
+				return;
+			}
+			case 'window.snap-left': {
+				const top = windowStore.getTopmostWindow();
+				if (top) {
+					if (top.snapped === 'left') windowStore.unsnapWindow(top.id);
+					else windowStore.snapWindow(top.id, 'left');
+				}
+				return;
+			}
+			case 'window.snap-right': {
+				const top = windowStore.getTopmostWindow();
+				if (top) {
+					if (top.snapped === 'right') windowStore.unsnapWindow(top.id);
+					else windowStore.snapWindow(top.id, 'right');
+				}
+				return;
+			}
+
+			default: {
+				if (id === 'launcher.open') {
+					setLauncherToggle((n) => n + 1);
+					return;
+				}
+				if (id === 'launcher.terminal') {
+					if (!hasAppPermission('terminal', permissionsRef.current)) {
+						useNotificationStore.getState().addNotification({
+							id: Date.now(),
+							replacesId: 0,
+							summary: 'Permission Denied',
+							body: 'You do not have permission to open Terminal.',
+							icon: null,
+							actions: [],
+							expires: 4000,
+							urgency: 'normal',
+						});
+						return;
+					}
+					windowStore.openWindow({ title: 'Terminal', appId: 'terminal', width: 720, height: 480 });
+					return;
+				}
+				if (id === 'launcher.settings') {
+					if (!hasAppPermission('settings', permissionsRef.current)) {
+						useNotificationStore.getState().addNotification({
+							id: Date.now(),
+							replacesId: 0,
+							summary: 'Permission Denied',
+							body: 'You do not have permission to open Settings.',
+							icon: null,
+							actions: [],
+							expires: 4000,
+							urgency: 'normal',
+						});
+						return;
+					}
+					windowStore.openWindow({ title: 'Settings', appId: 'settings', width: 700, height: 500 });
+					return;
+				}
+				if (id === 'system.notification-center') {
+					useNotificationStore.getState().toggleCenter();
+					return;
+				}
+				if (id === 'system.shortcut-viewer') {
+					setShortcutViewerVisible((v) => !v);
+					return;
+				}
+			}
+		}
+	}, []);
+
+	const commitSwitcher = useCallback(() => {
+		const current = switcherRef.current;
+		if (!current.visible) return;
+		const selected = current.windows[current.selectedIndex];
+		if (selected) {
+			useWindowStore.getState().focusWindow(selected.id);
+		}
+		setSwitcher({ visible: false, windows: [], selectedIndex: 0 });
+	}, []);
+
+	useEffect(() => {
+		const store = useKeybindStore.getState();
+		const { definitions } = store;
+
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if (
+				e.target instanceof HTMLInputElement ||
+				e.target instanceof HTMLTextAreaElement ||
+				(e.target instanceof HTMLElement && e.target.isContentEditable)
+			) {
+				return;
+			}
+
+			const state = useKeybindStore.getState();
+			if (state.suspended) return;
+			const { getBinding } = state;
+			for (const def of definitions) {
+				if (def.onKeyUp) continue;
+				const binding = getBinding(def.id);
+				if (!binding) continue;
+				if (!def.repeat && e.repeat) continue;
+				if (matchesCombo(e, binding)) {
+					e.preventDefault();
+					e.stopPropagation();
+					handleAction(def.id);
+					return;
+				}
+			}
+		};
+
+		const handleKeyUp = (e: KeyboardEvent) => {
+			if (e.key === 'Alt' && switcherRef.current.visible) {
+				commitSwitcher();
+				return;
+			}
+
+			const upState = useKeybindStore.getState();
+			if (upState.suspended) return;
+			const { getBinding } = upState;
+			for (const def of definitions) {
+				if (!def.onKeyUp) continue;
+				const binding = getBinding(def.id);
+				if (!binding) continue;
+				if (matchesCombo(e, binding)) {
+					e.preventDefault();
+					handleAction(def.id);
+					return;
+				}
+			}
+		};
+
+		window.addEventListener('keydown', handleKeyDown, { capture: true });
+		window.addEventListener('keyup', handleKeyUp, { capture: true });
+		return () => {
+			window.removeEventListener('keydown', handleKeyDown, { capture: true });
+			window.removeEventListener('keyup', handleKeyUp, { capture: true });
+		};
+	}, [handleAction, commitSwitcher]);
+
+	return {
+		switcher,
+		launcherToggle,
+		shortcutViewerVisible,
+		setShortcutViewerVisible,
+	};
+}