@backbay/glia 0.2.0-alpha.1

package/dist/components/ClusterHero/useVideoPreload.js

@@ -0,0 +1,60 @@
+"use client";
+import { useEffect, useState } from "react";
+/**
+ * Custom hook to preload video and poster assets.
+ * Adds <link rel="preload"> hints to the document head for faster loading.
+ * Cleans up preload hints on unmount.
+ *
+ * @example
+ * ```tsx
+ * const { isPreloaded } = useVideoPreload({
+ *   videoSrc: '/videos/hero.mp4',
+ *   posterSrc: '/images/hero-poster.jpg',
+ * });
+ * ```
+ */
+export function useVideoPreload({ videoSrc, posterSrc, enabled = true, }) {
+    const [isPreloaded, setIsPreloaded] = useState(false);
+    useEffect(() => {
+        if (!enabled || typeof document === "undefined") {
+            return;
+        }
+        const links = [];
+        // Preload poster image
+        if (posterSrc) {
+            const posterLink = document.createElement("link");
+            posterLink.rel = "preload";
+            posterLink.as = "image";
+            posterLink.href = posterSrc;
+            document.head.appendChild(posterLink);
+            links.push(posterLink);
+        }
+        // Preload video
+        if (videoSrc) {
+            const videoLink = document.createElement("link");
+            videoLink.rel = "preload";
+            videoLink.as = "video";
+            videoLink.href = videoSrc;
+            // Set type hint for better browser optimization
+            if (videoSrc.endsWith(".webm")) {
+                videoLink.type = "video/webm";
+            }
+            else if (videoSrc.endsWith(".mp4")) {
+                videoLink.type = "video/mp4";
+            }
+            document.head.appendChild(videoLink);
+            links.push(videoLink);
+        }
+        setIsPreloaded(true);
+        // Cleanup on unmount
+        return () => {
+            links.forEach((link) => {
+                if (link.parentNode === document.head) {
+                    document.head.removeChild(link);
+                }
+            });
+        };
+    }, [videoSrc, posterSrc, enabled]);
+    return { isPreloaded };
+}
+export default useVideoPreload;

package/dist/components/PlaySession.d.ts

@@ -0,0 +1,48 @@
+/**
+ * PlaySession - Component for managing play session lifecycle
+ *
+ * Provides render props for session control, video rendering, and RPC calls.
+ */
+import { type ReactElement, type RefObject } from 'react';
+import { type UsePlaySessionOptions } from '../hooks/usePlaySession.js';
+import type { PlaySessionData, PlaySessionStatus, JsonRpcResponse } from '../protocol/types.js';
+export interface PlaySessionRenderProps {
+    /** Current session or null */
+    session: PlaySessionData | null;
+    /** Session status */
+    status: PlaySessionStatus;
+    /** Make a JSON-RPC call */
+    call: <T = unknown>(method: string, params?: Record<string, unknown>) => Promise<JsonRpcResponse<T>>;
+    /** Shorthand for observe.* methods */
+    observe: <T = unknown>(key: string) => Promise<T>;
+    /** Shorthand for act.* methods */
+    act: <T = unknown>(action: string, params?: Record<string, unknown>) => Promise<T>;
+    /** Connect to the session */
+    connect: (options?: {
+        timeout?: number;
+    }) => Promise<void>;
+    /** Disconnect from the session */
+    disconnect: () => Promise<void>;
+    /** Video element ref (attach to your video element) */
+    videoRef: RefObject<HTMLVideoElement | null>;
+    /** Whether currently connected */
+    isConnected: boolean;
+    /** Error message if any */
+    error: string | null;
+}
+export interface PlaySessionProps extends Omit<UsePlaySessionOptions, 'onConnect' | 'onDisconnect' | 'onRpcResult' | 'onError'> {
+    /** Called when session starts */
+    onSessionStart?: (session: PlaySessionData) => void;
+    /** Called when session ends */
+    onSessionEnd?: () => void;
+    /** Called on RPC result */
+    onRpcResult?: (result: JsonRpcResponse) => void;
+    /** Called on error */
+    onError?: (error: Error) => void;
+    /** Render function for session UI */
+    children: (props: PlaySessionRenderProps) => ReactElement;
+    /** Custom class name for the wrapper */
+    className?: string;
+}
+export declare function PlaySession({ adapter, autoConnect, timeout, onSessionStart, onSessionEnd, onRpcResult, onError, children, className, }: PlaySessionProps): ReactElement;
+//# sourceMappingURL=PlaySession.d.ts.map

package/dist/components/PlaySession.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlaySession.d.ts","sourceRoot":"","sources":["../../src/components/PlaySession.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAqB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAkB,KAAK,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACxF,OAAO,KAAK,EAAE,eAAe,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAMhG,MAAM,WAAW,sBAAsB;IACrC,8BAA8B;IAC9B,OAAO,EAAE,eAAe,GAAG,IAAI,CAAC;IAEhC,qBAAqB;IACrB,MAAM,EAAE,iBAAiB,CAAC;IAE1B,2BAA2B;IAC3B,IAAI,EAAE,CAAC,CAAC,GAAG,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAErG,sCAAsC;IACtC,OAAO,EAAE,CAAC,CAAC,GAAG,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;IAElD,kCAAkC;IAClC,GAAG,EAAE,CAAC,CAAC,GAAG,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;IAEnF,6BAA6B;IAC7B,OAAO,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAE3D,kCAAkC;IAClC,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAEhC,uDAAuD;IACvD,QAAQ,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAE7C,kCAAkC;IAClC,WAAW,EAAE,OAAO,CAAC;IAErB,2BAA2B;IAC3B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,WAAW,GAAG,cAAc,GAAG,aAAa,GAAG,SAAS,CAAC;IAC7H,iCAAiC;IACjC,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IAEpD,+BAA+B;IAC/B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1B,2BAA2B;IAC3B,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IAEhD,sBAAsB;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAEjC,qCAAqC;IACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,YAAY,CAAC;IAE1D,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,WAAmB,EACnB,OAAO,EACP,cAAc,EACd,YAAY,EACZ,WAAW,EACX,OAAO,EACP,QAAQ,EACR,SAAS,GACV,EAAE,gBAAgB,GAAG,YAAY,CAgEjC"}

package/dist/components/PlaySession.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * PlaySession - Component for managing play session lifecycle
+ *
+ * Provides render props for session control, video rendering, and RPC calls.
+ */
+import { useRef, useEffect } from 'react';
+import { usePlaySession } from '../hooks/usePlaySession.js';
+// =============================================================================
+// Component
+// =============================================================================
+export function PlaySession({ adapter, autoConnect = false, timeout, onSessionStart, onSessionEnd, onRpcResult, onError, children, className, }) {
+    const videoRef = useRef(null);
+    const { session, status, videoTrack, audioTrack, call, observe, act, connect, disconnect, isConnected, error, } = usePlaySession({
+        adapter,
+        autoConnect,
+        timeout,
+        onConnect: onSessionStart,
+        onDisconnect: onSessionEnd,
+        onRpcResult,
+        onError,
+    });
+    // Attach video track to video element when available
+    useEffect(() => {
+        if (videoRef.current && videoTrack) {
+            const stream = new MediaStream([videoTrack]);
+            videoRef.current.srcObject = stream;
+        }
+    }, [videoTrack]);
+    // Attach audio track when available
+    useEffect(() => {
+        if (videoRef.current && audioTrack) {
+            const currentStream = videoRef.current.srcObject;
+            if (currentStream) {
+                currentStream.addTrack(audioTrack);
+            }
+        }
+    }, [audioTrack]);
+    return (_jsx("div", { className: `bb-play-session ${className ?? ''}`, "data-bb-state": status, "data-bb-adapter": adapter, "data-bb-session-id": session?.id, children: children({
+            session,
+            status,
+            call,
+            observe,
+            act,
+            connect,
+            disconnect,
+            videoRef,
+            isConnected,
+            error,
+        }) }));
+}

package/dist/components/SyncDocument.d.ts

@@ -0,0 +1,50 @@
+/**
+ * SyncDocument - Wrapper for documents that need offline-first sync
+ *
+ * Provides render props for content, setContent, status, and lastSaved.
+ * Handles conflict resolution UI delegation.
+ */
+import type { ReactNode, ReactElement } from 'react';
+import type { SyncStatus, ConflictResolution } from '../protocol/types.js';
+export interface SyncDocumentRenderProps<T> {
+    /** Current document content */
+    content: T | null;
+    /** Update document content */
+    setContent: (data: T | ((prev: T | null) => T)) => void;
+    /** Current sync status */
+    status: SyncStatus;
+    /** Timestamp of last successful sync */
+    lastSaved: number | null;
+    /** Number of pending changes */
+    pendingChanges: number;
+    /** Force immediate save */
+    save: () => Promise<void>;
+    /** Refresh from server */
+    refresh: () => Promise<void>;
+    /** Whether initial load is complete */
+    isLoaded: boolean;
+}
+export interface SyncDocumentProps<T> {
+    /** Unique document identifier */
+    documentId: string;
+    /** API endpoint (documentId will be appended) */
+    endpoint: string;
+    /** Debounce time in ms (default: 1000) */
+    debounce?: number;
+    /** Initial content */
+    initialContent?: T;
+    /** Conflict resolution UI renderer */
+    onConflict?: (local: T, remote: T, resolve: (resolution: ConflictResolution) => void) => ReactNode;
+    /** Called on sync error */
+    onError?: (error: Error) => void;
+    /** Called on successful sync */
+    onSave?: (content: T) => void;
+    /** Render function for document UI */
+    children: (props: SyncDocumentRenderProps<T>) => ReactElement;
+    /** Custom fetch function */
+    fetcher?: (endpoint: string) => Promise<T>;
+    /** Custom save function */
+    saver?: (endpoint: string, data: T) => Promise<T>;
+}
+export declare function SyncDocument<T>({ documentId, endpoint, debounce, initialContent, onConflict, onError, onSave, children, fetcher, saver, }: SyncDocumentProps<T>): ReactElement;
+//# sourceMappingURL=SyncDocument.d.ts.map

package/dist/components/SyncDocument.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SyncDocument.d.ts","sourceRoot":"","sources":["../../src/components/SyncDocument.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,UAAU,EAAgB,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAMzF,MAAM,WAAW,uBAAuB,CAAC,CAAC;IACxC,+BAA+B;IAC/B,OAAO,EAAE,CAAC,GAAG,IAAI,CAAC;IAElB,8BAA8B;IAC9B,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC;IAExD,0BAA0B;IAC1B,MAAM,EAAE,UAAU,CAAC;IAEnB,wCAAwC;IACxC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB,gCAAgC;IAChC,cAAc,EAAE,MAAM,CAAC;IAEvB,2BAA2B;IAC3B,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAE1B,0BAA0B;IAC1B,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAE7B,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC;IAClC,iCAAiC;IACjC,UAAU,EAAE,MAAM,CAAC;IAEnB,iDAAiD;IACjD,QAAQ,EAAE,MAAM,CAAC;IAEjB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,sBAAsB;IACtB,cAAc,CAAC,EAAE,CAAC,CAAC;IAEnB,sCAAsC;IACtC,UAAU,CAAC,EAAE,CACX,KAAK,EAAE,CAAC,EACR,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,CAAC,UAAU,EAAE,kBAAkB,KAAK,IAAI,KAC9C,SAAS,CAAC;IAEf,2BAA2B;IAC3B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAEjC,gCAAgC;IAChC,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;IAE9B,sCAAsC;IACtC,QAAQ,EAAE,CAAC,KAAK,EAAE,uBAAuB,CAAC,CAAC,CAAC,KAAK,YAAY,CAAC;IAE9D,4BAA4B;IAC5B,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;IAE3C,2BAA2B;IAC3B,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;CACnD;AAMD,wBAAgB,YAAY,CAAC,CAAC,EAAE,EAC9B,UAAU,EACV,QAAQ,EACR,QAAe,EACf,cAAc,EACd,UAAU,EACV,OAAO,EACP,MAAM,EACN,QAAQ,EACR,OAAO,EACP,KAAK,GACN,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,YAAY,CAmDrC"}

package/dist/components/SyncDocument.js

@@ -0,0 +1,37 @@
+import { Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSync } from '../hooks/useSync.js';
+// =============================================================================
+// Component
+// =============================================================================
+export function SyncDocument({ documentId, endpoint, debounce = 1000, initialContent, onConflict, onError, onSave, children, fetcher, saver, }) {
+    const fullEndpoint = `${endpoint}/${documentId}`;
+    const { data, setData, status, pendingChanges, lastSyncedAt, conflict, resolveConflict, forceSave, refresh, isLoaded, } = useSync({
+        key: `sync-doc:${documentId}`,
+        endpoint: fullEndpoint,
+        debounce,
+        initialData: initialContent,
+        fetcher,
+        saver,
+        onConflict: onConflict
+            ? (c) => {
+                // Conflict will be rendered in the component
+            }
+            : undefined,
+        onError,
+        onSync: onSave,
+    });
+    // Render conflict UI if provided and conflict exists
+    const conflictUI = conflict && onConflict
+        ? onConflict(conflict.local, conflict.remote, resolveConflict)
+        : null;
+    return (_jsxs(_Fragment, { children: [conflictUI, children({
+                content: data,
+                setContent: setData,
+                status,
+                lastSaved: lastSyncedAt,
+                pendingChanges,
+                save: forceSave,
+                refresh,
+                isLoaded,
+            })] }));
+}

package/dist/components/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * bb-ui components
+ */
+export { BBProvider, useBBContext, useBBContextOptional, type BBProviderProps, } from "./BBProvider.js";
+export { SyncDocument, type SyncDocumentProps, type SyncDocumentRenderProps, } from "./SyncDocument.js";
+export { AgentPanel, type AgentPanelProps, type QuickPrompt } from "./AgentPanel.js";
+export { PlaySession, type PlaySessionProps, type PlaySessionRenderProps } from "./PlaySession.js";
+export { ClusterHero, ClusterHeroPage, CLUSTER_CONFIGS, getClusterConfig, type ClusterHeroProps, type ClusterHeroPageProps, type ClusterId, type ClusterConfig, } from "./ClusterHero/index.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EACL,UAAU,EACV,YAAY,EACZ,oBAAoB,EACpB,KAAK,eAAe,GACrB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,GAC7B,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAErF,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAEnG,OAAO,EACL,WAAW,EACX,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,KAAK,gBAAgB,EACrB,KAAK,oBAAoB,EACzB,KAAK,SAAS,EACd,KAAK,aAAa,GACnB,MAAM,wBAAwB,CAAC"}

package/dist/components/index.js

@@ -0,0 +1,8 @@
+/**
+ * bb-ui components
+ */
+export { BBProvider, useBBContext, useBBContextOptional, } from "./BBProvider.js";
+export { SyncDocument, } from "./SyncDocument.js";
+export { AgentPanel } from "./AgentPanel.js";
+export { PlaySession } from "./PlaySession.js";
+export { ClusterHero, ClusterHeroPage, CLUSTER_CONFIGS, getClusterConfig, } from "./ClusterHero/index.js";

package/dist/core.d.ts

@@ -0,0 +1,19 @@
+/**
+ * bb-ui core entrypoint
+ *
+ * A lighter-weight import path that avoids pulling in optional/heavy modules.
+ *
+ * @example
+ * import { GliaProvider, useAgentRun } from "@backbay/glia/core";
+ * import { Graph3D } from "@backbay/glia/primitives";
+ */
+export * from "./protocol/index.js";
+export { BBProvider, useBBContext, useBBContextOptional, type BBProviderProps, } from "./components/BBProvider.js";
+export { SyncDocument, type SyncDocumentProps, type SyncDocumentRenderProps, } from "./components/SyncDocument.js";
+export { AgentPanel, type AgentPanelProps, type QuickPrompt } from "./components/AgentPanel.js";
+export { PlaySession, type PlaySessionProps, type PlaySessionRenderProps, } from "./components/PlaySession.js";
+export * from "./hooks/index.js";
+export * from "./workspace/index.js";
+export * from "./theme/index.js";
+export * from "./lib/utils.js";
+//# sourceMappingURL=core.d.ts.map

package/dist/core.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"core.d.ts","sourceRoot":"","sources":["../src/core.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,cAAc,qBAAqB,CAAC;AAGpC,OAAO,EACL,UAAU,EACV,YAAY,EACZ,oBAAoB,EACpB,KAAK,eAAe,GACrB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,GAC7B,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEhG,OAAO,EACL,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,sBAAsB,GAC5B,MAAM,6BAA6B,CAAC;AAGrC,cAAc,kBAAkB,CAAC;AAGjC,cAAc,sBAAsB,CAAC;AAGrC,cAAc,kBAAkB,CAAC;AAGjC,cAAc,gBAAgB,CAAC"}

package/dist/core.js

@@ -0,0 +1,24 @@
+/**
+ * bb-ui core entrypoint
+ *
+ * A lighter-weight import path that avoids pulling in optional/heavy modules.
+ *
+ * @example
+ * import { GliaProvider, useAgentRun } from "@backbay/glia/core";
+ * import { Graph3D } from "@backbay/glia/primitives";
+ */
+// Protocol (Discovery + Execution)
+export * from "./protocol/index.js";
+// Components (Core)
+export { BBProvider, useBBContext, useBBContextOptional, } from "./components/BBProvider.js";
+export { SyncDocument, } from "./components/SyncDocument.js";
+export { AgentPanel } from "./components/AgentPanel.js";
+export { PlaySession, } from "./components/PlaySession.js";
+// Hooks
+export * from "./hooks/index.js";
+// Workspace
+export * from "./workspace/index.js";
+// Theme
+export * from "./theme/index.js";
+// Utilities
+export * from "./lib/utils.js";

package/dist/desktop/components/desktop/Desktop.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @backbay/glia Desktop OS - Desktop Component
+ *
+ * Main desktop surface that renders icons and provides window snap zone previews.
+ * Uses CSS variables for theming (--bb-color-*, --bb-spacing-*, etc.)
+ */
+import React from 'react';
+import type { DesktopIcon as DesktopIconType } from '../../core/desktop/types';
+export interface DesktopProps {
+    /** Windows render here */
+    children?: React.ReactNode;
+    /** Desktop icons to display */
+    icons?: DesktopIconType[];
+    /** Callback when an icon is activated (double-click) */
+    onIconActivate?: (iconId: string) => void;
+    /** Whether to show snap zone overlays during window dragging */
+    showSnapZones?: boolean;
+    /** Additional CSS class */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /** Icon renderer - allows custom icon component */
+    renderIcon?: (icon: DesktopIconType, props: {
+        selected: boolean;
+        onClick: (e: React.MouseEvent) => void;
+        onDoubleClick: () => void;
+    }) => React.ReactNode;
+}
+/**
+ * Desktop surface component.
+ *
+ * Renders the main desktop area with:
+ * - Icon grid for desktop shortcuts
+ * - Snap zone overlays for window tiling
+ * - Children (windows) layered on top
+ *
+ * @example
+ * ```tsx
+ * <Desktop
+ *   icons={myIcons}
+ *   onIconActivate={(id) => launchApp(id)}
+ *   showSnapZones={isDragging}
+ * >
+ *   {windows.map(w => <Window key={w.id} {...w} />)}
+ * </Desktop>
+ * ```
+ */
+export declare function Desktop({ children, icons, onIconActivate, showSnapZones, className, style, renderIcon, }: DesktopProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Desktop.d.ts.map

package/dist/desktop/components/desktop/Desktop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Desktop.d.ts","sourceRoot":"","sources":["../../../../src/desktop/components/desktop/Desktop.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAgC,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAwC/E,MAAM,WAAW,YAAY;IAC3B,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,wDAAwD;IACxD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,gEAAgE;IAChE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mDAAmD;IACnD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE;QAC1C,QAAQ,EAAE,OAAO,CAAC;QAClB,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;QACvC,aAAa,EAAE,MAAM,IAAI,CAAC;KAC3B,KAAK,KAAK,CAAC,SAAS,CAAC;CACvB;AAMD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,KAAU,EACV,cAAc,EACd,aAAoB,EACpB,SAAS,EACT,KAAK,EACL,UAAU,GACX,EAAE,YAAY,2CAuGd"}

package/dist/desktop/components/desktop/Desktop.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @backbay/glia Desktop OS - Desktop Component
+ *
+ * Main desktop surface that renders icons and provides window snap zone previews.
+ * Uses CSS variables for theming (--bb-color-*, --bb-spacing-*, etc.)
+ */
+import React, { useCallback, useState } from 'react';
+import { useSnapZones } from '../../core/desktop/useSnapZones';
+import { DesktopIcon } from './DesktopIcon';
+import { SnapZoneOverlay } from './SnapZoneOverlay';
+// ═══════════════════════════════════════════════════════════════════════════
+// Styles (using CSS custom properties)
+// ═══════════════════════════════════════════════════════════════════════════
+const containerStyles = {
+    position: 'fixed',
+    inset: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    background: 'var(--bb-color-desktop-bg, #010100)',
+    overflow: 'hidden',
+};
+const desktopAreaStyles = {
+    flex: 1,
+    position: 'relative',
+    padding: '16px',
+    paddingBottom: 'calc(16px + var(--bb-spacing-taskbar-height, 48px))',
+};
+const iconGridStyles = {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fill, var(--bb-spacing-icon-size, 80px))',
+    gridAutoRows: 'var(--bb-spacing-icon-size, 80px)',
+    gap: 'var(--bb-spacing-icon-gap, 16px)',
+    padding: '8px',
+    alignContent: 'start',
+    height: '100%',
+    overflow: 'auto',
+};
+// ═══════════════════════════════════════════════════════════════════════════
+// Component
+// ═══════════════════════════════════════════════════════════════════════════
+/**
+ * Desktop surface component.
+ *
+ * Renders the main desktop area with:
+ * - Icon grid for desktop shortcuts
+ * - Snap zone overlays for window tiling
+ * - Children (windows) layered on top
+ *
+ * @example
+ * ```tsx
+ * <Desktop
+ *   icons={myIcons}
+ *   onIconActivate={(id) => launchApp(id)}
+ *   showSnapZones={isDragging}
+ * >
+ *   {windows.map(w => <Window key={w.id} {...w} />)}
+ * </Desktop>
+ * ```
+ */
+export function Desktop({ children, icons = [], onIconActivate, showSnapZones = true, className, style, renderIcon, }) {
+    const { activeZone } = useSnapZones();
+    const [selectedIconIds, setSelectedIconIds] = useState(new Set());
+    // Handle icon click (selection)
+    const handleIconClick = useCallback((iconId, e) => {
+        setSelectedIconIds((prev) => {
+            const next = new Set(prev);
+            const additive = e.metaKey || e.ctrlKey;
+            if (additive) {
+                // Toggle selection
+                if (next.has(iconId)) {
+                    next.delete(iconId);
+                }
+                else {
+                    next.add(iconId);
+                }
+            }
+            else {
+                // Replace selection
+                next.clear();
+                next.add(iconId);
+            }
+            return next;
+        });
+    }, []);
+    // Handle icon double-click (activation)
+    const handleIconDoubleClick = useCallback((iconId) => {
+        onIconActivate?.(iconId);
+    }, [onIconActivate]);
+    // Clear selection when clicking desktop background
+    const handleBackgroundClick = useCallback((e) => {
+        // Only clear if clicking the desktop area itself, not children
+        if (e.target === e.currentTarget) {
+            setSelectedIconIds(new Set());
+        }
+    }, []);
+    return (_jsxs("div", { className: className, style: { ...containerStyles, ...style }, "data-bb-desktop": true, children: [_jsxs("div", { style: desktopAreaStyles, onClick: handleBackgroundClick, "data-bb-desktop-area": true, children: [icons.length > 0 && (_jsx("div", { style: iconGridStyles, "data-bb-icon-grid": true, children: icons.map((icon) => {
+                            const isSelected = selectedIconIds.has(icon.id);
+                            const clickHandler = (e) => handleIconClick(icon.id, e);
+                            const doubleClickHandler = () => handleIconDoubleClick(icon.id);
+                            if (renderIcon) {
+                                return (_jsx(React.Fragment, { children: renderIcon(icon, {
+                                        selected: isSelected,
+                                        onClick: clickHandler,
+                                        onDoubleClick: doubleClickHandler,
+                                    }) }, icon.id));
+                            }
+                            return (_jsx(DesktopIcon, { id: icon.id, icon: icon.icon, label: icon.label, selected: isSelected, onClick: clickHandler, onDoubleClick: doubleClickHandler }, icon.id));
+                        }) })), children] }), showSnapZones && activeZone && _jsx(SnapZoneOverlay, {})] }));
+}

package/dist/desktop/components/desktop/DesktopIcon.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @backbay/glia Desktop OS - Desktop Icon Component
+ *
+ * A desktop icon with selection, hover, and activation states.
+ * Uses CSS variables for theming (--bb-color-*, --bb-font-*, etc.)
+ */
+import React from 'react';
+export interface DesktopIconProps {
+    /** Unique identifier */
+    id: string;
+    /** Icon element or string identifier */
+    icon: React.ReactNode | string;
+    /** Display label */
+    label: string;
+    /** Whether the icon is selected */
+    selected?: boolean;
+    /** Classification badge (CORE, SYS, NET, etc.) */
+    classification?: string;
+    /** Status indicator (ACTIVE, STANDBY, etc.) */
+    status?: 'ACTIVE' | 'STANDBY' | 'PENDING' | 'LOCKED';
+    /** Click handler (selection) */
+    onClick?: (e: React.MouseEvent) => void;
+    /** Double-click handler (activation) */
+    onDoubleClick?: () => void;
+    /** Additional CSS class */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+}
+/**
+ * Desktop icon component.
+ *
+ * Supports:
+ * - Selection state with gold halo effect
+ * - Hover states with subtle glow
+ * - Classification tags that fade in on hover
+ * - Double-click activation
+ *
+ * @example
+ * ```tsx
+ * <DesktopIcon
+ *   id="app-browser"
+ *   icon={<BrowserIcon />}
+ *   label="Browser"
+ *   selected={selectedId === 'app-browser'}
+ *   onClick={(e) => selectIcon('app-browser', e)}
+ *   onDoubleClick={() => launchApp('browser')}
+ * />
+ * ```
+ */
+export declare function DesktopIcon({ id, icon, label, selected, classification, status, onClick, onDoubleClick, className, style, }: DesktopIconProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DesktopIcon.d.ts.map

package/dist/desktop/components/desktop/DesktopIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DesktopIcon.d.ts","sourceRoot":"","sources":["../../../../src/desktop/components/desktop/DesktopIcon.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAA+B,MAAM,OAAO,CAAC;AAMpD,MAAM,WAAW,gBAAgB;IAC/B,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,wCAAwC;IACxC,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAC/B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACrD,gCAAgC;IAChC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,wCAAwC;IACxC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAsGD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,IAAI,EACJ,KAAK,EACL,QAAgB,EAChB,cAAc,EACd,MAAiB,EACjB,OAAO,EACP,aAAa,EACb,SAAS,EACT,KAAK,GACN,EAAE,gBAAgB,2CA4HlB"}