@khal-os/ui 1.0.0

package/src/primitives/toolbar.tsx

@@ -0,0 +1,152 @@
+'use client';
+
+import { type ButtonHTMLAttributes, forwardRef, type ReactNode } from 'react';
+import { Separator } from '../components/separator';
+import { Tooltip } from '../components/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/server.ts

@@ -0,0 +1,4 @@
+// Server-safe exports for API routes and background services.
+// Keep this entrypoint free of client hooks/components.
+
+export { SUBJECTS } from '@khal-os/sdk/app';

package/src/stores/notification-store.ts

@@ -0,0 +1,271 @@
+import { create } from 'zustand';
+
+export type NotificationUrgency = 'low' | 'normal' | 'critical';
+export type DesktopNotifMode = 'background' | 'always' | 'off';
+
+export interface DesktopNotification {
+	id: number;
+	replacesId: number;
+	appName: string;
+	summary: string;
+	body: string;
+	icon: string | null;
+	actions: string[];
+	expires: number;
+	timestamp: number;
+	read: boolean;
+	urgency: NotificationUrgency;
+	category: string | null;
+	transient: boolean;
+	workspaceId: string | null;
+}
+
+export interface TrayIcon {
+	wid: number;
+	title: string;
+	icon: string | null;
+}
+
+interface NotificationStore {
+	notifications: DesktopNotification[];
+	history: DesktopNotification[];
+	trayIcons: Map<number, TrayIcon>;
+	centerOpen: boolean;
+	unreadCount: number;
+
+	// Preferences
+	doNotDisturb: boolean;
+	desktopNotifMode: DesktopNotifMode;
+	browserPermission: NotificationPermission;
+
+	setDoNotDisturb: (value: boolean) => void;
+	setDesktopNotifMode: (mode: DesktopNotifMode) => void;
+	requestBrowserPermission: () => Promise<NotificationPermission>;
+	syncBrowserPermission: () => void;
+
+	addNotification: (
+		notification: Omit<
+			DesktopNotification,
+			'timestamp' | 'read' | 'appName' | 'urgency' | 'category' | 'transient' | 'workspaceId'
+		> &
+			Partial<Pick<DesktopNotification, 'appName' | 'urgency' | 'category' | 'transient' | 'workspaceId'>>
+	) => void;
+	dismissNotification: (id: number) => void;
+	hideNotification: (id: number) => void;
+	clearHistory: () => void;
+	markAllRead: () => void;
+	toggleCenter: () => void;
+	closeCenter: () => void;
+
+	addTrayIcon: (icon: TrayIcon) => void;
+	removeTrayIcon: (wid: number) => void;
+	updateTrayIcon: (wid: number, updates: Partial<TrayIcon>) => void;
+}
+
+const MAX_VISIBLE = 5;
+const MAX_HISTORY = 50;
+
+const PREFS_KEY = 'khal_os_notification_prefs';
+
+function loadPrefs(): {
+	doNotDisturb: boolean;
+	desktopNotifMode: DesktopNotifMode;
+} {
+	if (typeof window === 'undefined') return { doNotDisturb: false, desktopNotifMode: 'background' };
+	try {
+		const raw = localStorage.getItem(PREFS_KEY);
+		if (raw) return JSON.parse(raw);
+	} catch {}
+	return { doNotDisturb: false, desktopNotifMode: 'background' };
+}
+
+function savePrefs(prefs: { doNotDisturb: boolean; desktopNotifMode: DesktopNotifMode }) {
+	try {
+		localStorage.setItem(PREFS_KEY, JSON.stringify(prefs));
+	} catch {}
+}
+
+function getBrowserPermission(): NotificationPermission {
+	if (typeof window === 'undefined' || !('Notification' in window)) return 'denied';
+	return Notification.permission;
+}
+
+function sendBrowserNotification(notif: DesktopNotification) {
+	if (typeof window === 'undefined' || !('Notification' in window) || Notification.permission !== 'granted') return;
+
+	const n = new Notification(notif.summary, {
+		body: notif.body || undefined,
+		icon: notif.icon || undefined,
+		tag: String(notif.id),
+		silent: notif.urgency === 'low',
+	});
+
+	n.onclick = () => {
+		window.focus();
+		n.close();
+	};
+
+	if (notif.expires > 0) {
+		setTimeout(() => n.close(), notif.expires);
+	} else if (notif.urgency !== 'critical') {
+		setTimeout(() => n.close(), 6000);
+	}
+}
+
+const initialPrefs = loadPrefs();
+
+export const useNotificationStore = create<NotificationStore>()((set, get) => ({
+	notifications: [],
+	history: [],
+	trayIcons: new Map(),
+	centerOpen: false,
+	unreadCount: 0,
+
+	doNotDisturb: initialPrefs.doNotDisturb,
+	desktopNotifMode: initialPrefs.desktopNotifMode,
+	browserPermission: getBrowserPermission(),
+
+	setDoNotDisturb: (value) => {
+		set({ doNotDisturb: value });
+		savePrefs({ doNotDisturb: value, desktopNotifMode: get().desktopNotifMode });
+	},
+
+	setDesktopNotifMode: (mode) => {
+		set({ desktopNotifMode: mode });
+		savePrefs({ doNotDisturb: get().doNotDisturb, desktopNotifMode: mode });
+	},
+
+	requestBrowserPermission: async () => {
+		if (typeof window === 'undefined' || !('Notification' in window)) return 'denied';
+		const result = await Notification.requestPermission();
+		set({ browserPermission: result });
+		return result;
+	},
+
+	syncBrowserPermission: () => {
+		set({ browserPermission: getBrowserPermission() });
+	},
+
+	addNotification: (notification) => {
+		const full: DesktopNotification = {
+			...notification,
+			appName: notification.appName ?? '',
+			urgency: notification.urgency ?? 'normal',
+			category: notification.category ?? null,
+			transient: notification.transient ?? false,
+			workspaceId: notification.workspaceId ?? null,
+			timestamp: Date.now(),
+			read: false,
+		};
+
+		const { doNotDisturb, desktopNotifMode, browserPermission } = get();
+
+		// Always add to history regardless of DND
+		set((state) => {
+			const history = full.transient ? state.history : [full, ...state.history].slice(0, MAX_HISTORY);
+
+			// In DND mode, skip visible toasts (still record in history)
+			if (doNotDisturb && full.urgency !== 'critical') {
+				return {
+					history,
+					unreadCount: full.transient ? state.unreadCount : state.unreadCount + 1,
+				};
+			}
+
+			let notifications = [...state.notifications];
+
+			if (notification.replacesId) {
+				notifications = notifications.filter((n) => n.id !== notification.replacesId);
+			}
+
+			notifications = [full, ...notifications].slice(0, MAX_VISIBLE);
+
+			return {
+				notifications,
+				history,
+				unreadCount: full.transient ? state.unreadCount : state.unreadCount + 1,
+			};
+		});
+
+		// Bridge to browser desktop notifications
+		if (browserPermission === 'granted' && desktopNotifMode !== 'off' && !full.transient) {
+			const shouldSend = desktopNotifMode === 'always' || (desktopNotifMode === 'background' && document.hidden);
+			if (shouldSend) {
+				sendBrowserNotification(full);
+			}
+		}
+
+		const isCritical = full.urgency === 'critical';
+		if (full.expires > 0) {
+			setTimeout(() => {
+				get().hideNotification(full.id);
+			}, full.expires);
+		} else if (!isCritical) {
+			setTimeout(() => {
+				get().hideNotification(full.id);
+			}, 6000);
+		}
+	},
+
+	dismissNotification: (id) => {
+		set((state) => ({
+			notifications: state.notifications.filter((n) => n.id !== id),
+		}));
+	},
+
+	hideNotification: (id) => {
+		set((state) => ({
+			notifications: state.notifications.filter((n) => n.id !== id),
+		}));
+	},
+
+	clearHistory: () => {
+		set({ history: [], unreadCount: 0 });
+	},
+
+	markAllRead: () => {
+		set((state) => ({
+			history: state.history.map((n) => ({ ...n, read: true })),
+			unreadCount: 0,
+		}));
+	},
+
+	toggleCenter: () => {
+		const opening = !get().centerOpen;
+		set({ centerOpen: opening });
+		if (opening) {
+			get().markAllRead();
+		}
+	},
+
+	closeCenter: () => {
+		set({ centerOpen: false });
+	},
+
+	addTrayIcon: (icon) => {
+		set((state) => {
+			const next = new Map(state.trayIcons);
+			next.set(icon.wid, icon);
+			return { trayIcons: next };
+		});
+	},
+
+	removeTrayIcon: (wid) => {
+		set((state) => {
+			const next = new Map(state.trayIcons);
+			next.delete(wid);
+			return { trayIcons: next };
+		});
+	},
+
+	updateTrayIcon: (wid, updates) => {
+		set((state) => {
+			const next = new Map(state.trayIcons);
+			const existing = next.get(wid);
+			if (existing) {
+				next.set(wid, { ...existing, ...updates });
+			}
+			return { trayIcons: next };
+		});
+	},
+}));

package/src/stores/theme-store.ts

@@ -0,0 +1,33 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+type ThemeMode = 'light' | 'dark' | 'system';
+
+interface ThemeStore {
+	mode: ThemeMode;
+	setMode: (mode: ThemeMode) => void;
+	reduceMotion: boolean;
+	setReduceMotion: (value: boolean) => void;
+	glassEnabled: boolean;
+	setGlassEnabled: (value: boolean) => void;
+	gpuTerminals: boolean;
+	setGpuTerminals: (value: boolean) => void;
+}
+
+export const useThemeStore = create<ThemeStore>()(
+	persist(
+		(set) => ({
+			mode: 'dark' as ThemeMode,
+			setMode: (mode) => set({ mode }),
+			reduceMotion: false,
+			setReduceMotion: (reduceMotion) => set({ reduceMotion }),
+			glassEnabled: false,
+			setGlassEnabled: (glassEnabled) => set({ glassEnabled }),
+			gpuTerminals: false,
+			setGpuTerminals: (gpuTerminals) => set({ gpuTerminals }),
+		}),
+		{
+			name: 'khal-theme',
+		}
+	)
+);

package/src/tokens/lp-tokens.ts

@@ -0,0 +1,36 @@
+/**
+ * LP Design Tokens — extracted from khal-landing hero-os-showcase.tsx
+ * These are the canonical reference colors from the landing page.
+ * The OS theme CSS variables consume these values.
+ */
+
+// Surface colors
+export const WIN_BG = '#111318';
+export const CHROME_BG = '#0D0F14';
+export const CELL_BG = '#0D1017';
+export const WIN_BORDER = '#1E2330';
+export const WIN_BORDER_FOCUSED = '#333D55';
+
+// Text hierarchy
+export const TEXT_PRIMARY = '#E8EAF0';
+export const TEXT_SECONDARY = '#8B92A5';
+export const TEXT_TERTIARY = '#555D73';
+
+// Accent
+export const ACCENT_BLUE = '#0A6FE0';
+
+// Mesh gradient palette (8-color navy-to-gold)
+export const MESH_GRADIENT_PALETTE = [
+	'#030508',
+	'#070D15',
+	'#0C1A2E',
+	'#1A4A7A',
+	'#2A3040',
+	'#5C4A38',
+	'#8B6B42',
+	'#D49355',
+] as const;
+
+// Radii
+export const WINDOW_RADIUS = '12px';
+export const BUTTON_RADIUS = '10px';

package/src/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}