@backbay/glia-desktop 0.2.0-alpha.1

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@backbay/glia-desktop",
+  "version": "0.2.0-alpha.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js" },
+    "./core": { "types": "./dist/core/index.d.ts", "import": "./dist/core/index.js" },
+    "./themes": { "types": "./dist/themes/index.d.ts", "import": "./dist/themes/index.js" }
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "zustand": "^5.0.5",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.3.0"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
+    "framer-motion": "^12"
+  },
+  "optionalDependencies": {
+    "react-rnd": "^10.4.13"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.1",
+    "typescript": "^5.8.3"
+  }
+}

package/src/components/GliaErrorBoundary/GliaErrorBoundary.tsx

@@ -0,0 +1,202 @@
+"use client";
+
+import React, { Component, type ReactNode, type ErrorInfo } from "react";
+import { ErrorThrower } from "./useErrorBoundary";
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+export interface ErrorFallbackProps {
+  error: Error;
+  reset: () => void;
+}
+
+export interface GliaErrorBoundaryProps {
+  children: ReactNode;
+  /** Custom fallback UI. Receives error + reset function. */
+  fallback?: ReactNode | ((props: ErrorFallbackProps) => ReactNode);
+  /** Called when an error is caught. Use for telemetry/logging. */
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+  /** Auto-retry after this many ms (0 = no auto-retry) */
+  autoRetryMs?: number;
+  /** Glass-themed fallback styling */
+  variant?: "inline" | "card" | "fullscreen";
+}
+
+interface GliaErrorBoundaryState {
+  error: Error | null;
+}
+
+// ============================================================================
+// DEFAULT FALLBACK (glass-themed)
+// ============================================================================
+
+function DefaultFallback({
+  error,
+  reset,
+  variant = "card",
+}: ErrorFallbackProps & { variant?: "inline" | "card" | "fullscreen" }) {
+  const isFullscreen = variant === "fullscreen";
+  const isInline = variant === "inline";
+
+  const containerStyle: React.CSSProperties = isFullscreen
+    ? {
+        position: "fixed",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 9999,
+        background: "rgba(0, 0, 0, 0.6)",
+        backdropFilter: "blur(12px)",
+        WebkitBackdropFilter: "blur(12px)",
+      }
+    : isInline
+      ? {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 8,
+          padding: "4px 8px",
+          borderRadius: 6,
+          background: "rgba(255, 60, 60, 0.08)",
+          border: "1px solid rgba(255, 60, 60, 0.2)",
+        }
+      : {};
+
+  const cardStyle: React.CSSProperties = {
+    background: "rgba(20, 20, 30, 0.85)",
+    backdropFilter: "blur(16px)",
+    WebkitBackdropFilter: "blur(16px)",
+    border: "1px solid rgba(255, 255, 255, 0.08)",
+    borderRadius: 12,
+    padding: isInline ? undefined : "24px 28px",
+    maxWidth: isFullscreen ? 480 : "100%",
+    width: isFullscreen ? "90%" : undefined,
+    color: "rgba(255, 255, 255, 0.9)",
+    fontFamily: "system-ui, -apple-system, sans-serif",
+  };
+
+  if (isInline) {
+    return (
+      <span style={containerStyle}>
+        <span style={{ color: "rgba(255, 100, 100, 0.9)", fontSize: 12 }}>
+          Error: {error.message}
+        </span>
+        <button
+          onClick={reset}
+          style={{
+            background: "none",
+            border: "none",
+            color: "rgba(100, 180, 255, 0.9)",
+            cursor: "pointer",
+            fontSize: 12,
+            textDecoration: "underline",
+            padding: 0,
+          }}
+        >
+          Retry
+        </button>
+      </span>
+    );
+  }
+
+  return (
+    <div style={containerStyle}>
+      <div style={cardStyle}>
+        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="rgba(255, 100, 100, 0.9)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="12" cy="12" r="10" />
+            <line x1="12" y1="8" x2="12" y2="12" />
+            <line x1="12" y1="16" x2="12.01" y2="16" />
+          </svg>
+          <span style={{ fontWeight: 600, fontSize: 15 }}>Something went wrong</span>
+        </div>
+        <p style={{ color: "rgba(255, 255, 255, 0.5)", fontSize: 13, lineHeight: 1.5, margin: "0 0 16px", wordBreak: "break-word" }}>
+          {error.message}
+        </p>
+        <button
+          onClick={reset}
+          style={{
+            background: "rgba(255, 255, 255, 0.08)",
+            border: "1px solid rgba(255, 255, 255, 0.12)",
+            borderRadius: 8,
+            padding: "8px 16px",
+            color: "rgba(255, 255, 255, 0.9)",
+            cursor: "pointer",
+            fontSize: 13,
+            fontWeight: 500,
+            transition: "background 0.15s",
+          }}
+          onMouseEnter={(e) => {
+            (e.currentTarget as HTMLElement).style.background = "rgba(255, 255, 255, 0.14)";
+          }}
+          onMouseLeave={(e) => {
+            (e.currentTarget as HTMLElement).style.background = "rgba(255, 255, 255, 0.08)";
+          }}
+        >
+          Try again
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// ERROR BOUNDARY (class component)
+// ============================================================================
+
+export class GliaErrorBoundary extends Component<GliaErrorBoundaryProps, GliaErrorBoundaryState> {
+  static displayName = "GliaErrorBoundary";
+  private autoRetryTimer: ReturnType<typeof setTimeout> | null = null;
+
+  constructor(props: GliaErrorBoundaryProps) {
+    super(props);
+    this.state = { error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): GliaErrorBoundaryState {
+    return { error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    this.props.onError?.(error, errorInfo);
+
+    if (this.props.autoRetryMs && this.props.autoRetryMs > 0) {
+      this.autoRetryTimer = setTimeout(() => {
+        this.reset();
+      }, this.props.autoRetryMs);
+    }
+  }
+
+  componentWillUnmount(): void {
+    if (this.autoRetryTimer) {
+      clearTimeout(this.autoRetryTimer);
+    }
+  }
+
+  reset = () => {
+    if (this.autoRetryTimer) {
+      clearTimeout(this.autoRetryTimer);
+      this.autoRetryTimer = null;
+    }
+    this.setState({ error: null });
+  };
+
+  render() {
+    const { error } = this.state;
+    const { children, fallback, variant = "card" } = this.props;
+
+    if (error) {
+      if (typeof fallback === "function") {
+        return fallback({ error, reset: this.reset });
+      }
+      if (fallback !== undefined) {
+        return fallback;
+      }
+      return <DefaultFallback error={error} reset={this.reset} variant={variant} />;
+    }
+
+    return <ErrorThrower>{children}</ErrorThrower>;
+  }
+}

package/src/components/GliaErrorBoundary/index.ts

@@ -0,0 +1,2 @@
+export { GliaErrorBoundary, type GliaErrorBoundaryProps, type ErrorFallbackProps } from "./GliaErrorBoundary";
+export { useErrorBoundary, type ErrorBoundaryContextValue } from "./useErrorBoundary";

package/src/components/GliaErrorBoundary/useErrorBoundary.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { createContext, useContext, useCallback, useState, type ReactNode } from "react";
+
+// ============================================================================
+// CONTEXT
+// ============================================================================
+
+export interface ErrorBoundaryContextValue {
+  throwError: (error: Error) => void;
+}
+
+export const ErrorBoundaryContext = createContext<ErrorBoundaryContextValue | null>(null);
+
+// ============================================================================
+// HOOK
+// ============================================================================
+
+/**
+ * Hook that provides a `throwError` function to trigger the nearest
+ * GliaErrorBoundary from a function component.
+ *
+ * @example
+ * ```tsx
+ * const { throwError } = useErrorBoundary();
+ * stream.on('error', (err) => throwError(err));
+ * ```
+ */
+export function useErrorBoundary(): ErrorBoundaryContextValue {
+  const ctx = useContext(ErrorBoundaryContext);
+  if (!ctx) {
+    throw new Error("useErrorBoundary must be used within a GliaErrorBoundary");
+  }
+  return ctx;
+}
+
+// ============================================================================
+// ERROR THROWER (internal helper)
+// ============================================================================
+
+/**
+ * Internal component that catches programmatic errors thrown via context
+ * and re-throws them during render so React's error boundary catches them.
+ */
+export function ErrorThrower({ children }: { children: ReactNode }) {
+  const [error, setError] = useState<Error | null>(null);
+
+  if (error) {
+    throw error;
+  }
+
+  const throwError = useCallback((err: Error) => {
+    setError(err);
+  }, []);
+
+  return (
+    <ErrorBoundaryContext.Provider value={{ throwError }}>
+      {children}
+    </ErrorBoundaryContext.Provider>
+  );
+}

package/src/components/desktop/Desktop.tsx

@@ -0,0 +1,204 @@
+/**
+ * @backbay/glia Desktop OS - Desktop Component
+ *
+ * Main desktop surface that renders icons and provides window snap zone previews.
+ * Uses CSS variables for theming (--glia-color-*, --glia-spacing-*, etc.)
+ */
+
+import React, { useCallback, useState } from 'react';
+import type { DesktopIcon as DesktopIconType } from '../../core/desktop/types';
+import { useSnapZones } from '../../core/desktop/useSnapZones';
+import { DesktopIcon } from './DesktopIcon';
+import { SnapZoneOverlay } from './SnapZoneOverlay';
+
+// ═══════════════════════════════════════════════════════════════════════════
+// Styles (using CSS custom properties)
+// ═══════════════════════════════════════════════════════════════════════════
+
+const containerStyles: React.CSSProperties = {
+  position: 'fixed',
+  inset: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  background: 'var(--glia-color-bg-body, #010100)',
+  overflow: 'hidden',
+};
+
+const desktopAreaStyles: React.CSSProperties = {
+  flex: 1,
+  position: 'relative',
+  padding: '16px',
+  paddingBottom: 'calc(16px + var(--glia-spacing-taskbar-height, 48px))',
+};
+
+const iconGridStyles: React.CSSProperties = {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(auto-fill, var(--glia-spacing-icon-size, 80px))',
+  gridAutoRows: 'var(--glia-spacing-icon-size, 80px)',
+  gap: 'var(--glia-spacing-icon-gap, 16px)',
+  padding: '8px',
+  alignContent: 'start',
+  height: '100%',
+  overflow: 'auto',
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 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;
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 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,
+}: DesktopProps) {
+  const { activeZone } = useSnapZones();
+  const [selectedIconIds, setSelectedIconIds] = useState<Set<string>>(new Set());
+
+  // Handle icon click (selection)
+  const handleIconClick = useCallback(
+    (iconId: string, e: React.MouseEvent) => {
+      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: string) => {
+      onIconActivate?.(iconId);
+    },
+    [onIconActivate]
+  );
+
+  // Clear selection when clicking desktop background
+  const handleBackgroundClick = useCallback(
+    (e: React.MouseEvent) => {
+      // Only clear if clicking the desktop area itself, not children
+      if (e.target === e.currentTarget) {
+        setSelectedIconIds(new Set());
+      }
+    },
+    []
+  );
+
+  return (
+    <div
+      className={className}
+      style={{ ...containerStyles, ...style }}
+      data-bb-desktop
+    >
+      {/* Desktop area with icons */}
+      <div
+        style={desktopAreaStyles}
+        onClick={handleBackgroundClick}
+        data-bb-desktop-area
+      >
+        {/* Icon grid */}
+        {icons.length > 0 && (
+          <div style={iconGridStyles} data-bb-icon-grid>
+            {icons.map((icon) => {
+              const isSelected = selectedIconIds.has(icon.id);
+              const clickHandler = (e: React.MouseEvent) => handleIconClick(icon.id, e);
+              const doubleClickHandler = () => handleIconDoubleClick(icon.id);
+
+              if (renderIcon) {
+                return (
+                  <React.Fragment key={icon.id}>
+                    {renderIcon(icon, {
+                      selected: isSelected,
+                      onClick: clickHandler,
+                      onDoubleClick: doubleClickHandler,
+                    })}
+                  </React.Fragment>
+                );
+              }
+
+              return (
+                <DesktopIcon
+                  key={icon.id}
+                  id={icon.id}
+                  icon={icon.icon}
+                  label={icon.label}
+                  selected={isSelected}
+                  onClick={clickHandler}
+                  onDoubleClick={doubleClickHandler}
+                />
+              );
+            })}
+          </div>
+        )}
+
+        {/* Windows render on top */}
+        {children}
+      </div>
+
+      {/* Snap zone overlay (visible during window drag) */}
+      {showSnapZones && activeZone && <SnapZoneOverlay />}
+    </div>
+  );
+}