@khal-os/ui 1.0.1 → 1.0.2

package/src/primitives/toolbar.tsx

@@ -1,152 +0,0 @@
-'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

@@ -1,4 +0,0 @@
-// 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

@@ -1,271 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,36 +0,0 @@
-/**
- * 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

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

package/tsconfig.json

@@ -1,17 +0,0 @@
-{
-	"compilerOptions": {
-		"target": "ES2022",
-		"lib": ["dom", "dom.iterable", "esnext"],
-		"strict": true,
-		"noEmit": true,
-		"esModuleInterop": true,
-		"module": "esnext",
-		"moduleResolution": "bundler",
-		"jsx": "react-jsx",
-		"incremental": true,
-		"paths": {
-			"@/*": ["../../src/*"]
-		}
-	},
-	"include": ["src/**/*.ts", "src/**/*.tsx"]
-}