@backbay/glia 0.2.0-alpha.1

package/dist/desktop/components/shell/TaskbarButton.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @backbay/glia Desktop OS - TaskbarButton Component
+ *
+ * Individual button representing a window on the taskbar.
+ * Handles click to focus/minimize, hover for preview, and position tracking
+ * for minimize/restore animations.
+ *
+ * @example
+ * ```tsx
+ * // Within Taskbar
+ * <TaskbarButton
+ *   windowId="window-1"
+ *   title="Terminal"
+ *   icon="terminal"
+ *   isActive={true}
+ *   isFocused={true}
+ *   onClick={() => handleClick('window-1')}
+ * />
+ * ```
+ */
+import { useEffect, useRef, useCallback, memo, } from 'react';
+import { motion } from 'motion/react';
+// ═══════════════════════════════════════════════════════════════════════════
+// Styles
+// ═══════════════════════════════════════════════════════════════════════════
+const createStyles = (isActive, isFocused) => ({
+    button: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '6px',
+        padding: '6px 12px',
+        height: '36px',
+        background: isActive ? 'var(--bb-color-context-menu-hover, #1a1a1a)' : 'transparent',
+        borderRadius: 'var(--bb-radius-button, 2px)',
+        fontFamily: 'var(--bb-font-display)',
+        fontSize: '11px',
+        letterSpacing: '0.08em',
+        textTransform: 'uppercase',
+        color: isFocused ? 'var(--bb-color-accent, #d4a84b)' : 'var(--bb-color-text-muted, #888888)',
+        cursor: 'pointer',
+        position: 'relative',
+        border: 'none',
+        outline: 'none',
+    },
+    focusIndicator: {
+        content: '""',
+        position: 'absolute',
+        bottom: '2px',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        width: isFocused ? '60%' : '0',
+        height: '2px',
+        background: 'var(--bb-color-accent, #d4a84b)',
+        borderRadius: '1px',
+        transition: 'width var(--bb-duration-fast, 100ms) ease',
+    },
+    icon: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: '14px',
+    },
+});
+// ═══════════════════════════════════════════════════════════════════════════
+// Component
+// ═══════════════════════════════════════════════════════════════════════════
+function TaskbarButtonInner({ windowId, title, icon, isActive = false, isFocused = false, onClick, onMouseEnter, onMouseLeave, onRegisterPosition, onUnregisterPosition, renderIcon, className, style, }) {
+    const buttonRef = useRef(null);
+    const styles = createStyles(isActive, isFocused);
+    // Update button position for minimize/restore animations
+    const updatePosition = useCallback(() => {
+        if (!buttonRef.current || !onRegisterPosition)
+            return;
+        const rect = buttonRef.current.getBoundingClientRect();
+        onRegisterPosition(windowId, {
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: rect.height,
+        });
+    }, [windowId, onRegisterPosition]);
+    // Register/unregister position on mount/unmount
+    useEffect(() => {
+        updatePosition();
+        // Update on resize
+        const handleResize = () => updatePosition();
+        globalThis.addEventListener('resize', handleResize);
+        return () => {
+            globalThis.removeEventListener('resize', handleResize);
+            onUnregisterPosition?.(windowId);
+        };
+    }, [windowId, updatePosition, onUnregisterPosition]);
+    // Update position after render (for layout shifts)
+    useEffect(() => {
+        const timer = requestAnimationFrame(updatePosition);
+        return () => cancelAnimationFrame(timer);
+    });
+    const handleClick = useCallback(() => {
+        onClick?.(windowId);
+    }, [windowId, onClick]);
+    const handleMouseEnter = useCallback(() => {
+        onMouseEnter?.(windowId, icon);
+    }, [windowId, icon, onMouseEnter]);
+    const handleMouseLeave = useCallback(() => {
+        onMouseLeave?.();
+    }, [onMouseLeave]);
+    // Render icon based on type
+    const renderedIcon = icon ? (renderIcon ? (renderIcon(icon)) : (_jsx("span", { style: styles.icon, children: icon }))) : null;
+    return (_jsxs(motion.button, { ref: buttonRef, style: { ...styles.button, ...style }, className: className, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "data-taskbar-button": windowId, whileHover: {
+            background: 'var(--bb-color-context-menu-hover, #1a1a1a)',
+            color: 'var(--bb-color-text-secondary, #cccccc)',
+        }, transition: { duration: 0.15 }, children: [renderedIcon, title, _jsx("span", { style: styles.focusIndicator })] }));
+}
+// Memoize to prevent unnecessary re-renders from parent
+export const TaskbarButton = memo(TaskbarButtonInner);

package/dist/desktop/components/shell/index.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @backbay/glia Desktop OS - Shell Components
+ *
+ * Styled shell components for the desktop OS layer.
+ * These components use CSS variables for theming and can work
+ * standalone or within the DesktopOSProvider context.
+ *
+ * @example
+ * ```tsx
+ * import { Taskbar, TaskbarButton, ContextMenu, Clock } from '@backbay/glia/desktop/components/shell';
+ *
+ * function MyTaskbar() {
+ *   return (
+ *     <Taskbar showClock={true}>
+ *       <Taskbar.StartButton onClick={() => setStartMenuOpen(true)} />
+ *       <Taskbar.Divider />
+ *       <Taskbar.RunningApps>
+ *         {windows.map(w => (
+ *           <TaskbarButton key={w.id} windowId={w.id} title={w.title} />
+ *         ))}
+ *       </Taskbar.RunningApps>
+ *     </Taskbar>
+ *   );
+ * }
+ * ```
+ */
+export { Taskbar, type TaskbarProps, type TaskbarStartButtonProps, type TaskbarDividerProps, type TaskbarSectionProps } from './Taskbar';
+export { TaskbarButton, type TaskbarButtonProps } from './TaskbarButton';
+export { ContextMenu, type ContextMenuProps } from './ContextMenu';
+export { Clock, type ClockProps } from './Clock';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/desktop/components/shell/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAGH,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,uBAAuB,EAAE,KAAK,mBAAmB,EAAE,KAAK,mBAAmB,EAAE,MAAM,WAAW,CAAC;AACzI,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/dist/desktop/components/shell/index.js

@@ -0,0 +1,31 @@
+/**
+ * @backbay/glia Desktop OS - Shell Components
+ *
+ * Styled shell components for the desktop OS layer.
+ * These components use CSS variables for theming and can work
+ * standalone or within the DesktopOSProvider context.
+ *
+ * @example
+ * ```tsx
+ * import { Taskbar, TaskbarButton, ContextMenu, Clock } from '@backbay/glia/desktop/components/shell';
+ *
+ * function MyTaskbar() {
+ *   return (
+ *     <Taskbar showClock={true}>
+ *       <Taskbar.StartButton onClick={() => setStartMenuOpen(true)} />
+ *       <Taskbar.Divider />
+ *       <Taskbar.RunningApps>
+ *         {windows.map(w => (
+ *           <TaskbarButton key={w.id} windowId={w.id} title={w.title} />
+ *         ))}
+ *       </Taskbar.RunningApps>
+ *     </Taskbar>
+ *   );
+ * }
+ * ```
+ */
+// Main components
+export { Taskbar } from './Taskbar';
+export { TaskbarButton } from './TaskbarButton';
+export { ContextMenu } from './ContextMenu';
+export { Clock } from './Clock';

package/dist/desktop/components/window/Window.d.ts

@@ -0,0 +1,122 @@
+import React from 'react';
+import type { WindowId, TilePosition } from '../../core/window/types';
+export interface WindowProps {
+    /** Window ID (required) */
+    id: WindowId;
+    /** Window content */
+    children: React.ReactNode;
+    /** Window title (standalone mode) */
+    title?: string;
+    /** Window position (standalone mode) */
+    position?: {
+        x: number;
+        y: number;
+    };
+    /** Window size (standalone mode) */
+    size?: {
+        width: number;
+        height: number;
+    };
+    /** Minimum window size */
+    minSize?: {
+        width: number;
+        height: number;
+    };
+    /** Maximum window size */
+    maxSize?: {
+        width: number;
+        height: number;
+    };
+    /** Z-index for stacking */
+    zIndex?: number;
+    /** Whether window is minimized */
+    isMinimized?: boolean;
+    /** Whether window is maximized */
+    isMaximized?: boolean;
+    /** Whether window is in fullscreen */
+    isFullscreen?: boolean;
+    /** Whether window is focused */
+    isFocused?: boolean;
+    /** Tile position if snapped */
+    tilePosition?: TilePosition;
+    /** Visual variant */
+    variant?: 'default' | 'prominent';
+    /** Hide the titlebar */
+    hideTitlebar?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Custom inline styles */
+    style?: React.CSSProperties;
+    /** Position change handler (standalone mode) */
+    onPositionChange?: (position: {
+        x: number;
+        y: number;
+    }) => void;
+    /** Size change handler (standalone mode) */
+    onSizeChange?: (size: {
+        width: number;
+        height: number;
+    }) => void;
+    /** Focus handler (standalone mode) */
+    onFocus?: () => void;
+    /** Close handler (standalone mode) */
+    onClose?: () => void;
+    /** Minimize handler (standalone mode) */
+    onMinimize?: () => void;
+    /** Maximize handler (standalone mode) */
+    onMaximize?: () => void;
+    /** Restore handler (standalone mode) */
+    onRestore?: () => void;
+    /** Minimize animation target position */
+    minimizeTarget?: {
+        x: number;
+        y: number;
+    };
+    /** Bounds for dragging (CSS selector or 'parent' or 'window') */
+    bounds?: string | Element;
+    /** Disable dragging */
+    disableDragging?: boolean;
+    /** Disable resizing */
+    disableResizing?: boolean;
+}
+declare function WindowInner({ id, children, title: titleProp, position: positionProp, size: sizeProp, minSize: minSizeProp, maxSize: maxSizeProp, zIndex: zIndexProp, isMinimized: isMinimizedProp, isMaximized: isMaximizedProp, isFullscreen: isFullscreenProp, isFocused: isFocusedProp, tilePosition: tilePositionProp, variant, hideTitlebar, className, style, onPositionChange, onSizeChange, onFocus, onClose, onMinimize, onMaximize, onRestore, minimizeTarget, bounds, disableDragging: disableDraggingProp, disableResizing: disableResizingProp, }: WindowProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Window - A draggable, resizable window component with full state management.
+ *
+ * Works in dual mode:
+ * - **Standalone**: Control all state via props and event handlers
+ * - **With Provider**: Auto-managed via useWindowManager()
+ *
+ * @example Standalone mode
+ * ```tsx
+ * const [position, setPosition] = useState({ x: 100, y: 100 });
+ * const [size, setSize] = useState({ width: 800, height: 600 });
+ *
+ * <Window
+ *   id="my-window"
+ *   title="My App"
+ *   position={position}
+ *   size={size}
+ *   onPositionChange={setPosition}
+ *   onSizeChange={setSize}
+ *   onClose={() => setIsOpen(false)}
+ * >
+ *   <MyAppContent />
+ * </Window>
+ * ```
+ *
+ * @example With DesktopOSProvider
+ * ```tsx
+ * // Window state is managed by the provider
+ * const { windows } = useWindowManager();
+ *
+ * {windows.map(w => (
+ *   <Window key={w.id} id={w.id}>
+ *     <AppContent appId={w.appId} />
+ *   </Window>
+ * ))}
+ * ```
+ */
+export declare const Window: React.MemoExoticComponent<typeof WindowInner>;
+export {};
+//# sourceMappingURL=Window.d.ts.map

package/dist/desktop/components/window/Window.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Window.d.ts","sourceRoot":"","sources":["../../../../src/desktop/components/window/Window.tsx"],"names":[],"mappings":"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"}