@kbve/droid 0.0.6 → 0.1.1

package/src/lib/state/auth.ts

@@ -0,0 +1,30 @@
+import { map } from 'nanostores';
+
+export type AuthTone = 'loading' | 'auth' | 'anon' | 'error';
+
+export interface AuthState {
+	tone: AuthTone;
+	name: string;
+	avatar: string | undefined;
+	id: string;
+	error: string | undefined;
+}
+
+const DEFAULT_AUTH: AuthState = {
+	tone: 'loading',
+	name: '',
+	avatar: undefined,
+	id: '',
+	error: undefined,
+};
+
+export const $auth = map<AuthState>({ ...DEFAULT_AUTH });
+
+export function setAuth(state: Partial<AuthState>) {
+	const current = $auth.get();
+	$auth.set({ ...current, ...state });
+}
+
+export function resetAuth() {
+	$auth.set({ ...DEFAULT_AUTH, tone: 'anon' });
+}

package/src/lib/state/index.ts

@@ -0,0 +1,34 @@
+export {
+	$auth,
+	setAuth,
+	resetAuth,
+	type AuthTone,
+	type AuthState,
+} from './auth';
+
+export { $currentPath, bootRouter } from './router';
+
+export {
+	$activeTooltip,
+	$drawerOpen,
+	$modalId,
+	openTooltip,
+	closeTooltip,
+	openDrawer,
+	closeDrawer,
+	openModal,
+	closeModal,
+} from './ui';
+
+export { $toasts, addToast, removeToast } from './toasts';
+
+export { showWelcomeToast } from './welcome-toast';
+
+export {
+	syncThemeToDexie,
+	broadcastThemeChange,
+	observeThemeChanges,
+} from './theme-sync';
+
+export { OverlayManager } from './overlay-manager';
+export type { RenderPath } from './overlay-manager';

package/src/lib/state/overlay-manager.ts

@@ -0,0 +1,125 @@
+import type { Remote } from 'comlink';
+import type { CanvasWorkerAPI } from '../workers/canvas-worker';
+import { addToast, removeToast } from './toasts';
+import { openTooltip, closeTooltip, openModal, closeModal } from './ui';
+import type {
+	ToastPayload,
+	TooltipPayload,
+	ModalPayload,
+} from '../types/ui-event-types';
+
+export type RenderPath = 'dom' | 'canvas' | 'auto';
+
+interface OverlayManagerConfig {
+	preferredPath: RenderPath;
+	canvasWorker?: Remote<CanvasWorkerAPI>;
+}
+
+/**
+ * Unified overlay manager that routes to DOM or Canvas rendering.
+ *
+ * - 'dom': Uses nanostores → React components (Phases 1–6)
+ * - 'canvas': Uses CanvasUIRenderer in canvas-worker (Phase 9)
+ * - 'auto': Uses canvas if OffscreenCanvas is available AND a canvas worker
+ *           is bound, otherwise falls back to DOM
+ */
+export class OverlayManager {
+	private path: RenderPath;
+	private canvasWorker: Remote<CanvasWorkerAPI> | null;
+	private canvasBound = false;
+
+	constructor(config: OverlayManagerConfig) {
+		this.path = config.preferredPath;
+		this.canvasWorker = config.canvasWorker ?? null;
+	}
+
+	private get effectivePath(): 'dom' | 'canvas' {
+		if (this.path === 'canvas' && this.canvasBound && this.canvasWorker) {
+			return 'canvas';
+		}
+		if (this.path === 'auto' && this.canvasBound && this.canvasWorker) {
+			return 'canvas';
+		}
+		return 'dom';
+	}
+
+	/**
+	 * Bind a <canvas> element for off-thread overlay rendering.
+	 * Must be called before canvas path can be used.
+	 */
+	async bindCanvas(
+		canvasEl: HTMLCanvasElement,
+		dbGet: (key: string) => Promise<string | null>,
+	): Promise<void> {
+		if (!this.canvasWorker) {
+			console.warn('[OverlayManager] No canvas worker available');
+			return;
+		}
+		const offscreen = canvasEl.transferControlToOffscreen();
+		await this.canvasWorker.bindUICanvas(offscreen, dbGet);
+		this.canvasBound = true;
+	}
+
+	// ── Toast ──
+
+	toast(payload: ToastPayload): void {
+		if (this.effectivePath === 'canvas') {
+			void this.canvasWorker?.addCanvasToast(payload);
+		}
+		// Always update DOM state (nanostores) so event listeners and
+		// any DOM-rendered components stay in sync
+		addToast(payload);
+	}
+
+	dismissToast(id: string): void {
+		if (this.effectivePath === 'canvas') {
+			void this.canvasWorker?.removeCanvasToast(id);
+		}
+		removeToast(id);
+	}
+
+	// ── Tooltip ──
+
+	showTooltip(payload: TooltipPayload): void {
+		if (this.effectivePath === 'canvas') {
+			void this.canvasWorker?.showCanvasTooltip(payload);
+		}
+		openTooltip(payload.id);
+	}
+
+	hideTooltip(id?: string): void {
+		if (this.effectivePath === 'canvas') {
+			void this.canvasWorker?.showCanvasTooltip(null);
+		}
+		closeTooltip(id);
+	}
+
+	// ── Modal ──
+
+	showModal(payload: ModalPayload): void {
+		if (this.effectivePath === 'canvas') {
+			void this.canvasWorker?.showCanvasModal(payload);
+		}
+		openModal(payload.id);
+	}
+
+	hideModal(id?: string): void {
+		if (this.effectivePath === 'canvas') {
+			void this.canvasWorker?.showCanvasModal(null);
+		}
+		closeModal(id);
+	}
+
+	/** Switch rendering path at runtime */
+	setPath(path: RenderPath): void {
+		this.path = path;
+	}
+
+	/** Unbind canvas and clean up */
+	async destroy(): Promise<void> {
+		if (this.canvasBound && this.canvasWorker) {
+			await this.canvasWorker.unbindUICanvas();
+			this.canvasBound = false;
+		}
+	}
+}

package/src/lib/state/router.ts

@@ -0,0 +1,24 @@
+import { atom } from 'nanostores';
+
+export const $currentPath = atom('/');
+
+let _routerBooted = false;
+
+export function bootRouter(initial?: string): void {
+	if (_routerBooted) return;
+	_routerBooted = true;
+
+	if (initial) $currentPath.set(initial);
+
+	if (typeof window === 'undefined') return;
+
+	$currentPath.set(window.location.pathname);
+
+	document.addEventListener('astro:page-load', () => {
+		$currentPath.set(window.location.pathname);
+	});
+
+	window.addEventListener('popstate', () => {
+		$currentPath.set(window.location.pathname);
+	});
+}

package/src/lib/state/theme-sync.ts

@@ -0,0 +1,75 @@
+import type { Remote } from 'comlink';
+import type { LocalStorageAPI } from '../workers/db-worker';
+
+const THEME_VARS = [
+	'accent',
+	'accent-low',
+	'accent-high',
+	'bg',
+	'bg-accent',
+	'text',
+	'text-accent',
+	'border',
+	'white',
+	'black',
+] as const;
+
+/**
+ * Read resolved CSS custom property values from the document root
+ * and persist them to Dexie so workers can access theme colors.
+ */
+export async function syncThemeToDexie(
+	api: Remote<LocalStorageAPI>,
+): Promise<void> {
+	const root = document.documentElement;
+	const styles = getComputedStyle(root);
+	const mode = root.dataset['theme'] ?? 'dark';
+
+	await api.dbSet('theme:mode', mode);
+
+	for (const name of THEME_VARS) {
+		const value = styles.getPropertyValue(`--sl-color-${name}`).trim();
+		if (value) {
+			await api.dbSet(`theme:${name}`, value);
+		}
+	}
+}
+
+/**
+ * Broadcast a theme-sync event so workers re-read colors from Dexie.
+ */
+export function broadcastThemeChange(): void {
+	try {
+		const bc = new BroadcastChannel('kbve_theme');
+		bc.postMessage({ type: 'theme-sync', timestamp: Date.now() });
+		bc.close();
+	} catch {
+		// BroadcastChannel not available — workers won't get live updates
+	}
+}
+
+/**
+ * Observe theme attribute changes and auto-sync.
+ * Call once from main() after Dexie is initialized.
+ */
+export function observeThemeChanges(api: Remote<LocalStorageAPI>): void {
+	const observer = new MutationObserver(async (mutations) => {
+		for (const mutation of mutations) {
+			if (
+				mutation.type === 'attributes' &&
+				mutation.attributeName === 'data-theme'
+			) {
+				await syncThemeToDexie(api);
+				broadcastThemeChange();
+			}
+		}
+	});
+
+	observer.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: ['data-theme'],
+	});
+
+	// Initial sync
+	void syncThemeToDexie(api);
+}

package/src/lib/state/toasts.spec.ts

@@ -0,0 +1,106 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { $toasts, addToast, removeToast } from './toasts';
+import { DroidEvents } from '../workers/events';
+import type { ToastPayload } from '../types/ui-event-types';
+
+beforeEach(() => {
+	$toasts.set({});
+	// Reset the toast queue
+	(window as Record<string, unknown>).__kbveToastQueue = undefined;
+});
+
+const makeToast = (
+	id: string,
+	overrides?: Partial<ToastPayload>,
+): ToastPayload => ({
+	id,
+	message: `Toast ${id}`,
+	severity: 'info',
+	...overrides,
+});
+
+describe('addToast', () => {
+	it('adds toast to the nanostore', () => {
+		addToast(makeToast('t1'));
+		expect($toasts.get()).toHaveProperty('t1');
+		expect($toasts.get()['t1'].message).toBe('Toast t1');
+	});
+
+	it('adds multiple toasts', () => {
+		addToast(makeToast('t1'));
+		addToast(makeToast('t2', { severity: 'error' }));
+
+		const state = $toasts.get();
+		expect(Object.keys(state)).toHaveLength(2);
+		expect(state['t2'].severity).toBe('error');
+	});
+
+	it('emits toast-added event', () => {
+		const handler = vi.fn();
+		DroidEvents.on('toast-added', handler);
+
+		const toast = makeToast('t1');
+		addToast(toast);
+
+		expect(handler).toHaveBeenCalledWith(toast);
+		DroidEvents.off('toast-added', handler);
+	});
+
+	it('pushes to the pre-mount queue', () => {
+		addToast(makeToast('t1'));
+
+		const queue = (window as Record<string, unknown>)
+			.__kbveToastQueue as ToastPayload[];
+		expect(queue).toHaveLength(1);
+		expect(queue[0].id).toBe('t1');
+	});
+
+	it('does not push to queue when queue is drained (null)', () => {
+		(window as Record<string, unknown>).__kbveToastQueue = null;
+
+		addToast(makeToast('t1'));
+
+		expect((window as Record<string, unknown>).__kbveToastQueue).toBeNull();
+		// But the nanostore should still have it
+		expect($toasts.get()).toHaveProperty('t1');
+	});
+});
+
+describe('removeToast', () => {
+	it('removes toast from the nanostore', () => {
+		addToast(makeToast('t1'));
+		addToast(makeToast('t2'));
+
+		removeToast('t1');
+
+		expect($toasts.get()).not.toHaveProperty('t1');
+		expect($toasts.get()).toHaveProperty('t2');
+	});
+
+	it('emits toast-removed event', () => {
+		const handler = vi.fn();
+		DroidEvents.on('toast-removed', handler);
+
+		addToast(makeToast('t1'));
+		removeToast('t1');
+
+		expect(handler).toHaveBeenCalledWith({ id: 't1' });
+		DroidEvents.off('toast-removed', handler);
+	});
+
+	it('removes toast from the pre-mount queue', () => {
+		addToast(makeToast('t1'));
+		addToast(makeToast('t2'));
+
+		removeToast('t1');
+
+		const queue = (window as Record<string, unknown>)
+			.__kbveToastQueue as ToastPayload[];
+		expect(queue).toHaveLength(1);
+		expect(queue[0].id).toBe('t2');
+	});
+
+	it('handles removing a non-existent toast gracefully', () => {
+		expect(() => removeToast('non-existent')).not.toThrow();
+	});
+});

package/src/lib/state/toasts.ts

@@ -0,0 +1,34 @@
+import { map } from 'nanostores';
+import { DroidEvents } from '../workers/events';
+import type { ToastPayload } from '../types/ui-event-types';
+
+export const $toasts = map<Record<string, ToastPayload>>({});
+
+// Returns the pre-mount toast buffer, or null if the ToastContainer
+// has already mounted and drained it (future toasts reach the
+// container via nanostores + the CustomEvent bridge instead).
+function getToastQueue(): ToastPayload[] | null {
+	if (window.__kbveToastQueue === null) return null;
+	if (!window.__kbveToastQueue) window.__kbveToastQueue = [];
+	return window.__kbveToastQueue;
+}
+
+export function addToast(payload: ToastPayload): void {
+	$toasts.set({ ...$toasts.get(), [payload.id]: payload });
+	getToastQueue()?.push(payload);
+	DroidEvents.emit('toast-added', payload);
+}
+
+export function removeToast(id: string): void {
+	const current = { ...$toasts.get() };
+	delete current[id];
+	$toasts.set(current);
+
+	const q = getToastQueue();
+	if (q) {
+		const idx = q.findIndex((t) => t.id === id);
+		if (idx !== -1) q.splice(idx, 1);
+	}
+
+	DroidEvents.emit('toast-removed', { id });
+}

package/src/lib/state/ui.spec.ts

@@ -0,0 +1,148 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import {
+	$activeTooltip,
+	$drawerOpen,
+	$modalId,
+	openTooltip,
+	closeTooltip,
+	openDrawer,
+	closeDrawer,
+	openModal,
+	closeModal,
+} from './ui';
+import { DroidEvents } from '../workers/events';
+
+beforeEach(() => {
+	$activeTooltip.set(null);
+	$drawerOpen.set(false);
+	$modalId.set(null);
+});
+
+describe('Tooltip state', () => {
+	it('openTooltip sets the active tooltip', () => {
+		openTooltip('tip-1');
+		expect($activeTooltip.get()).toBe('tip-1');
+	});
+
+	it('openTooltip emits tooltip-opened event', () => {
+		const handler = vi.fn();
+		DroidEvents.on('tooltip-opened', handler);
+
+		openTooltip('tip-2');
+
+		expect(handler).toHaveBeenCalledWith({ id: 'tip-2' });
+		DroidEvents.off('tooltip-opened', handler);
+	});
+
+	it('closeTooltip clears the active tooltip', () => {
+		openTooltip('tip-1');
+		closeTooltip();
+		expect($activeTooltip.get()).toBeNull();
+	});
+
+	it('closeTooltip emits tooltip-closed event', () => {
+		const handler = vi.fn();
+		DroidEvents.on('tooltip-closed', handler);
+
+		openTooltip('tip-1');
+		closeTooltip();
+
+		expect(handler).toHaveBeenCalledWith({ id: 'tip-1' });
+		DroidEvents.off('tooltip-closed', handler);
+	});
+
+	it('closeTooltip with mismatched id does nothing', () => {
+		openTooltip('tip-1');
+		closeTooltip('tip-2');
+		expect($activeTooltip.get()).toBe('tip-1');
+	});
+
+	it('closeTooltip with matching id clears tooltip', () => {
+		openTooltip('tip-1');
+		closeTooltip('tip-1');
+		expect($activeTooltip.get()).toBeNull();
+	});
+
+	it('closeTooltip does not emit when no tooltip is active', () => {
+		const handler = vi.fn();
+		DroidEvents.on('tooltip-closed', handler);
+
+		closeTooltip();
+
+		expect(handler).not.toHaveBeenCalled();
+		DroidEvents.off('tooltip-closed', handler);
+	});
+});
+
+describe('Drawer state', () => {
+	it('openDrawer sets drawer open and clears tooltip', () => {
+		openTooltip('tip-1');
+		openDrawer();
+		expect($drawerOpen.get()).toBe(true);
+		expect($activeTooltip.get()).toBeNull();
+	});
+
+	it('closeDrawer sets drawer closed', () => {
+		openDrawer();
+		closeDrawer();
+		expect($drawerOpen.get()).toBe(false);
+	});
+});
+
+describe('Modal state', () => {
+	it('openModal sets the modal id', () => {
+		openModal('modal-1');
+		expect($modalId.get()).toBe('modal-1');
+	});
+
+	it('openModal closes drawer and tooltip', () => {
+		openDrawer();
+		openTooltip('tip-1');
+		openModal('modal-1');
+		expect($drawerOpen.get()).toBe(false);
+		expect($activeTooltip.get()).toBeNull();
+	});
+
+	it('openModal emits modal-opened event', () => {
+		const handler = vi.fn();
+		DroidEvents.on('modal-opened', handler);
+
+		openModal('modal-1');
+
+		expect(handler).toHaveBeenCalledWith({ id: 'modal-1' });
+		DroidEvents.off('modal-opened', handler);
+	});
+
+	it('closeModal clears the modal id', () => {
+		openModal('modal-1');
+		closeModal();
+		expect($modalId.get()).toBeNull();
+	});
+
+	it('closeModal emits modal-closed event', () => {
+		const handler = vi.fn();
+		DroidEvents.on('modal-closed', handler);
+
+		openModal('modal-1');
+		closeModal();
+
+		expect(handler).toHaveBeenCalledWith({ id: 'modal-1' });
+		DroidEvents.off('modal-closed', handler);
+	});
+
+	it('closeModal with mismatched id does nothing', () => {
+		openModal('modal-1');
+		closeModal('modal-2');
+		expect($modalId.get()).toBe('modal-1');
+	});
+
+	it('closeModal does not emit when no modal is active', () => {
+		const handler = vi.fn();
+		DroidEvents.on('modal-closed', handler);
+
+		closeModal();
+
+		expect(handler).not.toHaveBeenCalled();
+		DroidEvents.off('modal-closed', handler);
+	});
+});

package/src/lib/state/ui.ts

@@ -0,0 +1,45 @@
+import { atom } from 'nanostores';
+import { DroidEvents } from '../workers/events';
+
+export const $activeTooltip = atom<string | null>(null);
+export const $drawerOpen = atom(false);
+export const $modalId = atom<string | null>(null);
+
+export function openTooltip(id: string) {
+	$activeTooltip.set(id);
+	DroidEvents.emit('tooltip-opened', { id });
+}
+
+export function closeTooltip(id?: string) {
+	if (id && $activeTooltip.get() !== id) return;
+	const closedId = $activeTooltip.get();
+	$activeTooltip.set(null);
+	if (closedId) {
+		DroidEvents.emit('tooltip-closed', { id: closedId });
+	}
+}
+
+export function openDrawer() {
+	$drawerOpen.set(true);
+	$activeTooltip.set(null);
+}
+
+export function closeDrawer() {
+	$drawerOpen.set(false);
+}
+
+export function openModal(id: string) {
+	$modalId.set(id);
+	$drawerOpen.set(false);
+	$activeTooltip.set(null);
+	DroidEvents.emit('modal-opened', { id });
+}
+
+export function closeModal(id?: string) {
+	if (id && $modalId.get() !== id) return;
+	const closedId = $modalId.get();
+	$modalId.set(null);
+	if (closedId) {
+		DroidEvents.emit('modal-closed', { id: closedId });
+	}
+}

package/src/lib/state/welcome-toast.ts

@@ -0,0 +1,76 @@
+import { $auth } from './auth';
+import { addToast } from './toasts';
+
+const SHOWN_KEY = 'kbve:welcome-shown';
+
+function hasShown(): boolean {
+	try {
+		return sessionStorage.getItem(SHOWN_KEY) === '1';
+	} catch {
+		return false;
+	}
+}
+
+function markShown(): void {
+	try {
+		sessionStorage.setItem(SHOWN_KEY, '1');
+	} catch {
+		/* private browsing / storage full */
+	}
+}
+
+export function showWelcomeToast(): void {
+	if (hasShown()) return;
+
+	const tryShow = (): boolean => {
+		const auth = $auth.get();
+		if (auth.tone === 'auth' && auth.name) {
+			markShown();
+			addToast({
+				id: `welcome-${Date.now()}`,
+				message: `Welcome back, ${auth.name}`,
+				severity: 'success',
+				duration: 4000,
+			});
+			return true;
+		}
+		if (auth.tone === 'anon') {
+			markShown();
+			addToast({
+				id: `welcome-${Date.now()}`,
+				message: 'Welcome!',
+				severity: 'info',
+				duration: 3000,
+			});
+			return true;
+		}
+		if (auth.tone === 'error') {
+			markShown();
+			return true;
+		}
+		return false;
+	};
+
+	if (tryShow()) return;
+
+	// Auth still loading — subscribe and wait (10s timeout)
+	const timeoutId = setTimeout(() => {
+		unsub();
+		if (!hasShown()) {
+			markShown();
+			addToast({
+				id: `welcome-${Date.now()}`,
+				message: 'Welcome!',
+				severity: 'info',
+				duration: 3000,
+			});
+		}
+	}, 10_000);
+
+	const unsub = $auth.subscribe(() => {
+		if ($auth.get().tone === 'loading') return;
+		clearTimeout(timeoutId);
+		unsub();
+		tryShow();
+	});
+}