@backbay/glia 0.2.0-alpha.1

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

@@ -0,0 +1,44 @@
+/**
+ * @backbay/glia Desktop OS - ContextMenu Component
+ *
+ * Right-click context menu with smooth animations.
+ * Supports nested items, separators, keyboard navigation, and shortcuts.
+ *
+ * Can be controlled externally or used with the useContextMenu hook.
+ *
+ * @example
+ * ```tsx
+ * // Controlled usage
+ * <ContextMenu
+ *   isOpen={menuOpen}
+ *   position={{ x: 100, y: 200 }}
+ *   items={[
+ *     { id: 'open', label: 'Open', action: () => handleOpen() },
+ *     { id: 'sep', separator: true },
+ *     { id: 'delete', label: 'Delete', danger: true, action: () => handleDelete() },
+ *   ]}
+ *   onClose={() => setMenuOpen(false)}
+ * />
+ * ```
+ */
+import { type CSSProperties } from 'react';
+import type { ContextMenuItem } from '../../core/shell/types';
+export interface ContextMenuProps {
+    /** Whether the menu is open */
+    isOpen: boolean;
+    /** Menu position */
+    position: {
+        x: number;
+        y: number;
+    };
+    /** Menu items to display */
+    items: ContextMenuItem[];
+    /** Called when menu should close */
+    onClose: () => void;
+    /** Additional CSS class name */
+    className?: string;
+    /** Additional inline styles */
+    style?: CSSProperties;
+}
+export declare function ContextMenu({ isOpen, position, items, onClose, className, style, }: ContextMenuProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ContextMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../../src/desktop/components/shell/ContextMenu.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAAkC,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAM9D,MAAM,WAAW,gBAAgB;IAC/B,+BAA+B;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,oBAAoB;IACpB,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,4BAA4B;IAC5B,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,oCAAoC;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAwED,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,QAAQ,EACR,KAAK,EACL,OAAO,EACP,SAAS,EACT,KAAK,GACN,EAAE,gBAAgB,kDA4HlB"}

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

@@ -0,0 +1,158 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @backbay/glia Desktop OS - ContextMenu Component
+ *
+ * Right-click context menu with smooth animations.
+ * Supports nested items, separators, keyboard navigation, and shortcuts.
+ *
+ * Can be controlled externally or used with the useContextMenu hook.
+ *
+ * @example
+ * ```tsx
+ * // Controlled usage
+ * <ContextMenu
+ *   isOpen={menuOpen}
+ *   position={{ x: 100, y: 200 }}
+ *   items={[
+ *     { id: 'open', label: 'Open', action: () => handleOpen() },
+ *     { id: 'sep', separator: true },
+ *     { id: 'delete', label: 'Delete', danger: true, action: () => handleDelete() },
+ *   ]}
+ *   onClose={() => setMenuOpen(false)}
+ * />
+ * ```
+ */
+import { useCallback, useEffect, useRef } from 'react';
+import { AnimatePresence, motion } from 'motion/react';
+// ═══════════════════════════════════════════════════════════════════════════
+// Styles
+// ═══════════════════════════════════════════════════════════════════════════
+const styles = {
+    overlay: {
+        position: 'fixed',
+        inset: 0,
+        zIndex: 999998,
+    },
+    menu: {
+        position: 'fixed',
+        minWidth: '200px',
+        background: 'var(--bb-color-context-menu-bg, #111111)',
+        border: '1px solid var(--bb-color-window-border, #333333)',
+        backdropFilter: 'var(--bb-blur-backdrop, blur(12px))',
+        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.5), 0 0 1px rgba(212, 168, 75, 0.15)',
+        padding: '6px',
+        zIndex: 999999,
+        borderRadius: 'var(--bb-radius-menu, 3px)',
+    },
+    item: {
+        width: '100%',
+        textAlign: 'left',
+        padding: '8px 12px',
+        background: 'transparent',
+        border: 0,
+        fontFamily: 'var(--bb-font-mono)',
+        fontSize: '11px',
+        letterSpacing: '0.1em',
+        textTransform: 'uppercase',
+        cursor: 'default',
+        borderRadius: '3px',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '10px',
+        transition: 'all 0.1s ease',
+    },
+    itemNormal: {
+        color: 'var(--bb-color-text-secondary, #cccccc)',
+    },
+    itemDestructive: {
+        color: 'var(--bb-color-destructive, #c44444)',
+    },
+    itemDisabled: {
+        opacity: 0.4,
+        pointerEvents: 'none',
+    },
+    itemIcon: {
+        fontSize: '14px',
+        width: '18px',
+        textAlign: 'center',
+    },
+    itemShortcut: {
+        marginLeft: 'auto',
+        fontSize: '10px',
+        opacity: 0.6,
+    },
+    separator: {
+        height: '1px',
+        margin: '5px 8px',
+        background: 'var(--bb-color-window-border, #333333)',
+    },
+};
+// ═══════════════════════════════════════════════════════════════════════════
+// Component
+// ═══════════════════════════════════════════════════════════════════════════
+export function ContextMenu({ isOpen, position, items, onClose, className, style, }) {
+    const menuRef = useRef(null);
+    // Handle keyboard navigation
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isOpen, onClose]);
+    // Calculate menu position to keep within viewport
+    const getMenuPosition = useCallback(() => {
+        const estimatedHeight = items.length * 40 + 20;
+        const estimatedWidth = 220;
+        // Use globalThis for SSR safety
+        const viewportWidth = typeof globalThis !== 'undefined' ? globalThis.innerWidth : 1920;
+        const viewportHeight = typeof globalThis !== 'undefined' ? globalThis.innerHeight : 1080;
+        return {
+            x: Math.min(position.x, viewportWidth - estimatedWidth),
+            y: Math.min(position.y, viewportHeight - estimatedHeight),
+        };
+    }, [position, items.length]);
+    const handleItemClick = useCallback((item) => {
+        if (item.disabled || item.separator)
+            return;
+        item.action?.();
+        onClose();
+    }, [onClose]);
+    const handleContextMenu = useCallback((e) => {
+        e.preventDefault();
+        onClose();
+    }, [onClose]);
+    if (!isOpen)
+        return null;
+    const menuPos = getMenuPosition();
+    return (_jsxs(AnimatePresence, { children: [_jsx(motion.div, { style: styles.overlay, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: onClose, onContextMenu: handleContextMenu }, "context-menu-overlay"), _jsx(motion.div, { ref: menuRef, style: {
+                    ...styles.menu,
+                    left: menuPos.x,
+                    top: menuPos.y,
+                    ...style,
+                }, className: className, initial: { opacity: 0, scale: 0.95, y: -4 }, animate: { opacity: 1, scale: 1, y: 0 }, exit: { opacity: 0, scale: 0.95, y: -4 }, transition: { duration: 0.12 }, onMouseDown: (e) => e.stopPropagation(), children: items.map((item, idx) => {
+                    // Separator
+                    if (item.separator) {
+                        return _jsx("div", { style: styles.separator }, item.id || `sep-${idx}`);
+                    }
+                    // Regular item
+                    const itemStyle = {
+                        ...styles.item,
+                        ...(item.danger ? styles.itemDestructive : styles.itemNormal),
+                        ...(item.disabled ? styles.itemDisabled : {}),
+                    };
+                    return (_jsxs(motion.button, { style: itemStyle, disabled: item.disabled, onClick: () => handleItemClick(item), whileHover: {
+                            background: item.danger
+                                ? 'rgba(196, 92, 92, 0.12)'
+                                : 'var(--bb-color-context-menu-hover, rgba(212, 168, 75, 0.10))',
+                            color: item.danger
+                                ? '#d77777'
+                                : 'var(--bb-color-text-primary, #ffffff)',
+                        }, transition: { duration: 0.1 }, children: [item.icon && _jsx("span", { style: styles.itemIcon, children: item.icon }), item.label, item.shortcut && (_jsx("span", { style: styles.itemShortcut, children: item.shortcut }))] }, item.id));
+                }) }, "context-menu")] }));
+}

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

@@ -0,0 +1,111 @@
+/**
+ * @backbay/glia Desktop OS - Taskbar Component
+ *
+ * Main taskbar container that renders at the bottom of the screen.
+ * Provides sections for start button, running apps, pinned apps, and system tray.
+ *
+ * Can be used standalone or within the DesktopOSProvider context.
+ * When standalone, you control the state via props. When in context,
+ * it automatically connects to the window manager.
+ *
+ * @example Standalone usage
+ * ```tsx
+ * <Taskbar showClock={true}>
+ *   <Taskbar.StartButton onClick={() => setStartMenuOpen(true)} />
+ *   <Taskbar.Divider />
+ *   <Taskbar.RunningApps>
+ *     {windows.map(w => (
+ *       <TaskbarButton key={w.id} {...w} />
+ *     ))}
+ *   </Taskbar.RunningApps>
+ * </Taskbar>
+ * ```
+ *
+ * @example With custom content
+ * ```tsx
+ * <Taskbar showClock={true}>
+ *   <Taskbar.StartButton icon={<MyLogo />} />
+ *   <Taskbar.Divider />
+ *   <Taskbar.Section flex={1}>
+ *     {runningWindows}
+ *   </Taskbar.Section>
+ *   <Taskbar.Divider />
+ *   <Taskbar.SystemTray>
+ *     <WifiIndicator />
+ *     <BatteryIndicator />
+ *   </Taskbar.SystemTray>
+ * </Taskbar>
+ * ```
+ */
+import { type CSSProperties, type ReactNode } from 'react';
+import { type ClockProps } from './Clock';
+export interface TaskbarProps {
+    /** Content sections to render in the taskbar */
+    children?: ReactNode;
+    /** Whether to show the system clock */
+    showClock?: boolean;
+    /** Clock configuration */
+    clockProps?: ClockProps;
+    /** Whether the taskbar is hidden (e.g., fullscreen mode) */
+    hidden?: boolean;
+    /** Additional CSS class name */
+    className?: string;
+    /** Additional inline styles */
+    style?: CSSProperties;
+}
+export interface TaskbarStartButtonProps {
+    /** Whether the start menu is open/active */
+    active?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+    /** Custom icon (defaults to Backbay logo) */
+    icon?: ReactNode;
+    /** Title/tooltip */
+    title?: string;
+    /** Additional CSS class name */
+    className?: string;
+    /** Additional inline styles */
+    style?: CSSProperties;
+}
+export interface TaskbarDividerProps {
+    /** Additional CSS class name */
+    className?: string;
+    /** Additional inline styles */
+    style?: CSSProperties;
+}
+export interface TaskbarSectionProps {
+    /** Content */
+    children?: ReactNode;
+    /** Flex grow value */
+    flex?: number;
+    /** Gap between items */
+    gap?: string | number;
+    /** Additional CSS class name */
+    className?: string;
+    /** Additional inline styles */
+    style?: CSSProperties;
+}
+/**
+ * Main taskbar component.
+ *
+ * Compose using sub-components:
+ * - `Taskbar.StartButton` - Start menu button
+ * - `Taskbar.Divider` - Vertical separator
+ * - `Taskbar.Section` - Generic flexbox section
+ * - `Taskbar.RunningApps` - Scrollable running apps area
+ * - `Taskbar.PinnedApps` - Pinned apps section
+ * - `Taskbar.SystemTray` - System tray on the right
+ * - `Taskbar.CenterSection` - Absolutely centered content
+ */
+export declare function Taskbar({ children, showClock, clockProps, hidden, className, style, }: TaskbarProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace Taskbar {
+    var StartButton: ({ active, onClick, icon, title, className, style, }: TaskbarStartButtonProps) => import("react/jsx-runtime").JSX.Element;
+    var Divider: ({ className, style }: TaskbarDividerProps) => import("react/jsx-runtime").JSX.Element;
+    var Section: ({ children, flex, gap, className, style, }: TaskbarSectionProps) => import("react/jsx-runtime").JSX.Element;
+    var RunningApps: ({ children, className, style }: TaskbarSectionProps) => import("react/jsx-runtime").JSX.Element;
+    var PinnedApps: ({ children, className, style }: TaskbarSectionProps) => import("react/jsx-runtime").JSX.Element;
+    var SystemTray: ({ children, className, style }: TaskbarSectionProps) => import("react/jsx-runtime").JSX.Element;
+    var CenterSection: ({ children, className, style }: TaskbarSectionProps) => import("react/jsx-runtime").JSX.Element;
+    var Clock: typeof import("./Clock").Clock;
+}
+//# sourceMappingURL=Taskbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Taskbar.d.ts","sourceRoot":"","sources":["../../../../src/desktop/components/shell/Taskbar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEH,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAMjD,MAAM,WAAW,YAAY;IAC3B,gDAAgD;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0BAA0B;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,MAAM,WAAW,uBAAuB;IACtC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,MAAM,WAAW,mBAAmB;IAClC,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,MAAM,WAAW,mBAAmB;IAClC,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAsOD;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,SAAgB,EAChB,UAAU,EACV,MAAc,EACd,SAAS,EACT,KAAK,GACN,EAAE,YAAY,kDA2Bd;yBAlCe,OAAO;2EAlJpB,uBAAuB;wCAiCa,mBAAmB;8DAavD,mBAAmB;sDAmB+B,mBAAmB;qDAiBpB,mBAAmB;qDAiBnB,mBAAmB;wDAiBhB,mBAAmB"}

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

@@ -0,0 +1,182 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { motion } from 'motion/react';
+import { Clock } from './Clock';
+// ═══════════════════════════════════════════════════════════════════════════
+// Styles
+// ═══════════════════════════════════════════════════════════════════════════
+const styles = {
+    container: {
+        position: 'fixed',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: 'var(--bb-spacing-taskbar-height, 48px)',
+        background: 'var(--bb-color-taskbar-bg, rgba(17, 17, 17, 0.8))',
+        backdropFilter: 'var(--bb-blur-backdrop, blur(12px))',
+        borderTop: '1px solid var(--bb-color-window-border, #333333)',
+        display: 'flex',
+        alignItems: 'center',
+        padding: '0 8px',
+        zIndex: 9000,
+        gap: '4px',
+    },
+    startButton: {
+        width: '40px',
+        height: '36px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 'var(--bb-radius-button, 2px)',
+        fontSize: '18px',
+        background: 'transparent',
+        border: 'none',
+        cursor: 'pointer',
+        transition: 'all var(--bb-duration-fast, 100ms) ease',
+    },
+    startButtonActive: {
+        color: 'var(--bb-color-accent, #d4a84b)',
+        background: 'var(--bb-color-accent-glow, rgba(212, 168, 75, 0.2))',
+    },
+    startButtonInactive: {
+        color: 'var(--bb-color-text-muted, #888888)',
+        background: 'transparent',
+    },
+    divider: {
+        width: '1px',
+        height: '24px',
+        background: 'var(--bb-color-window-border, #333333)',
+        margin: '0 4px',
+    },
+    section: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+    runningApps: {
+        flex: 1,
+        display: 'flex',
+        alignItems: 'center',
+        gap: '2px',
+        overflowX: 'auto',
+        scrollbarWidth: 'none', // Firefox
+        msOverflowStyle: 'none', // IE/Edge
+    },
+    pinnedApps: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '2px',
+    },
+    systemTray: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '4px',
+    },
+    centerSection: {
+        position: 'absolute',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        display: 'flex',
+        alignItems: 'center',
+        zIndex: 1,
+    },
+};
+// ═══════════════════════════════════════════════════════════════════════════
+// Sub-Components
+// ═══════════════════════════════════════════════════════════════════════════
+/**
+ * Start menu button.
+ */
+function StartButton({ active = false, onClick, icon, title = 'Start Menu', className, style, }) {
+    // Default Backbay-style logo
+    const defaultIcon = (_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 32 32", fill: "currentColor", children: [_jsx("path", { d: "M16 2L2 16l14 14 14-14L16 2zm0 4.5L26.5 16 16 25.5 5.5 16 16 6.5z" }), _jsx("circle", { cx: "16", cy: "16", r: "4" })] }));
+    return (_jsx(motion.button, { style: {
+            ...styles.startButton,
+            ...(active ? styles.startButtonActive : styles.startButtonInactive),
+            ...style,
+        }, className: className, onClick: onClick, title: title, whileHover: {
+            background: 'var(--bb-color-context-menu-hover, #1a1a1a)',
+            color: 'var(--bb-color-accent, #d4a84b)',
+        }, transition: { duration: 0.15 }, children: icon ?? defaultIcon }));
+}
+/**
+ * Vertical divider between sections.
+ */
+function Divider({ className, style }) {
+    return _jsx("div", { style: { ...styles.divider, ...style }, className: className });
+}
+/**
+ * Generic section container.
+ */
+function Section({ children, flex, gap = '2px', className, style, }) {
+    return (_jsx("div", { style: {
+            ...styles.section,
+            flex,
+            gap: typeof gap === 'number' ? `${gap}px` : gap,
+            ...style,
+        }, className: className, children: children }));
+}
+/**
+ * Running apps section (scrollable).
+ */
+function RunningApps({ children, className, style }) {
+    return (_jsx("div", { style: {
+            ...styles.runningApps,
+            ...style,
+        }, className: className, children: children }));
+}
+/**
+ * Pinned apps section.
+ */
+function PinnedApps({ children, className, style }) {
+    return (_jsx("div", { style: {
+            ...styles.pinnedApps,
+            ...style,
+        }, className: className, children: children }));
+}
+/**
+ * System tray section (right side).
+ */
+function SystemTray({ children, className, style }) {
+    return (_jsx("div", { style: {
+            ...styles.systemTray,
+            ...style,
+        }, className: className, children: children }));
+}
+/**
+ * Absolute center section (for centered content like sentinel agents).
+ */
+function CenterSection({ children, className, style }) {
+    return (_jsx("div", { style: {
+            ...styles.centerSection,
+            ...style,
+        }, className: className, children: children }));
+}
+// ═══════════════════════════════════════════════════════════════════════════
+// Main Component
+// ═══════════════════════════════════════════════════════════════════════════
+/**
+ * Main taskbar component.
+ *
+ * Compose using sub-components:
+ * - `Taskbar.StartButton` - Start menu button
+ * - `Taskbar.Divider` - Vertical separator
+ * - `Taskbar.Section` - Generic flexbox section
+ * - `Taskbar.RunningApps` - Scrollable running apps area
+ * - `Taskbar.PinnedApps` - Pinned apps section
+ * - `Taskbar.SystemTray` - System tray on the right
+ * - `Taskbar.CenterSection` - Absolutely centered content
+ */
+export function Taskbar({ children, showClock = true, clockProps, hidden = false, className, style, }) {
+    if (hidden) {
+        return null;
+    }
+    return (_jsxs("div", { style: { ...styles.container, ...style }, className: className, "data-shell-target": "taskbar", children: [children, !children && showClock && (_jsxs(_Fragment, { children: [_jsx("div", { style: { flex: 1 } }), _jsx(SystemTray, { children: _jsx(Clock, { ...clockProps }) })] })), children && showClock && _jsx(Clock, { ...clockProps })] }));
+}
+// Attach sub-components
+Taskbar.StartButton = StartButton;
+Taskbar.Divider = Divider;
+Taskbar.Section = Section;
+Taskbar.RunningApps = RunningApps;
+Taskbar.PinnedApps = PinnedApps;
+Taskbar.SystemTray = SystemTray;
+Taskbar.CenterSection = CenterSection;
+Taskbar.Clock = Clock;

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

@@ -0,0 +1,54 @@
+/**
+ * @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 { type CSSProperties } from 'react';
+import type { TaskbarButtonPosition } from '../../core/shell/types';
+export interface TaskbarButtonProps {
+    /** Window ID this button represents */
+    windowId: string;
+    /** Button title/label */
+    title: string;
+    /** Icon to display (emoji, URL, or component name) */
+    icon?: string;
+    /** Whether the window is active (not minimized) */
+    isActive?: boolean;
+    /** Whether the window is currently focused */
+    isFocused?: boolean;
+    /** Click handler */
+    onClick?: (windowId: string) => void;
+    /** Mouse enter handler (for preview) */
+    onMouseEnter?: (windowId: string, icon?: string) => void;
+    /** Mouse leave handler (for preview) */
+    onMouseLeave?: () => void;
+    /** Register button position for animations */
+    onRegisterPosition?: (windowId: string, position: TaskbarButtonPosition) => void;
+    /** Unregister button position */
+    onUnregisterPosition?: (windowId: string) => void;
+    /** Custom icon render function */
+    renderIcon?: (icon: string) => React.ReactNode;
+    /** Additional CSS class name */
+    className?: string;
+    /** Additional inline styles */
+    style?: CSSProperties;
+}
+declare function TaskbarButtonInner({ windowId, title, icon, isActive, isFocused, onClick, onMouseEnter, onMouseLeave, onRegisterPosition, onUnregisterPosition, renderIcon, className, style, }: TaskbarButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare const TaskbarButton: import("react").MemoExoticComponent<typeof TaskbarButtonInner>;
+export {};
+//# sourceMappingURL=TaskbarButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TaskbarButton.d.ts","sourceRoot":"","sources":["../../../../src/desktop/components/shell/TaskbarButton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAKL,KAAK,aAAa,EAEnB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAMpE,MAAM,WAAW,kBAAkB;IACjC,uCAAuC;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,wCAAwC;IACxC,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,8CAA8C;IAC9C,kBAAkB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjF,iCAAiC;IACjC,oBAAoB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,kCAAkC;IAClC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/C,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAiDD,iBAAS,kBAAkB,CAAC,EAC1B,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,QAAgB,EAChB,SAAiB,EACjB,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,oBAAoB,EACpB,UAAU,EACV,SAAS,EACT,KAAK,GACN,EAAE,kBAAkB,2CA8EpB;AAGD,eAAO,MAAM,aAAa,gEAA2B,CAAC"}