@backbay/glia 0.2.0-alpha.1

package/dist/desktop/components/desktop/DesktopIcon.js

@@ -0,0 +1,185 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @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, { useCallback, useMemo } from 'react';
+// ═══════════════════════════════════════════════════════════════════════════
+// Styles (using CSS custom properties)
+// ═══════════════════════════════════════════════════════════════════════════
+const createWrapperStyles = (selected) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: '6px',
+    padding: '8px 10px',
+    minWidth: '88px',
+    borderRadius: 'var(--bb-radius-button, 3px)',
+    background: selected ? 'var(--bb-color-icon-selected, rgba(212, 168, 75, 0.08))' : 'transparent',
+    border: '1px solid transparent',
+    cursor: 'pointer',
+    transition: 'all 350ms ease-out',
+    position: 'relative',
+    // Soft gold halo bloom when selected
+    boxShadow: selected
+        ? '0 0 24px 8px rgba(212, 168, 75, 0.12), 0 0 48px 16px rgba(212, 168, 75, 0.06)'
+        : 'none',
+    outline: 'none',
+});
+const createIconSymbolStyles = (selected) => ({
+    width: '48px',
+    height: '48px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: selected ? 'var(--bb-color-accent, #d4a84b)' : 'var(--bb-color-icon-text, #cccccc)',
+    fontSize: '26px',
+    transition: 'all 350ms ease-out',
+    // Text shadow for selected state
+    textShadow: selected
+        ? '0 0 16px rgba(212, 168, 75, 0.35), 0 0 32px rgba(212, 168, 75, 0.2)'
+        : 'none',
+});
+const createLabelStyles = (selected) => ({
+    fontFamily: 'var(--bb-font-display, "Cinzel", serif)',
+    fontSize: '10px',
+    fontWeight: 600,
+    letterSpacing: '0.06em',
+    textTransform: 'uppercase',
+    color: selected ? 'var(--bb-color-accent, #d4a84b)' : 'var(--bb-color-icon-text, #cccccc)',
+    textAlign: 'center',
+    whiteSpace: 'nowrap',
+    lineHeight: 1.2,
+    transition: 'color 350ms ease-out',
+    // Ensure no overflow
+    maxWidth: '100%',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+});
+const classificationTagStyles = {
+    position: 'absolute',
+    bottom: '-18px',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    fontFamily: 'var(--bb-font-mono, "JetBrains Mono", monospace)',
+    fontSize: '9px',
+    letterSpacing: '0.1em',
+    whiteSpace: 'nowrap',
+    opacity: 0,
+    pointerEvents: 'none',
+    transition: 'opacity 200ms ease-out',
+};
+const getStatusColor = (status) => {
+    switch (status) {
+        case 'ACTIVE':
+            return 'var(--bb-color-accent, #d4a84b)';
+        case 'STANDBY':
+            return '#4a6fa5';
+        case 'PENDING':
+            return 'var(--bb-color-text-muted, #888888)';
+        case 'LOCKED':
+            return 'var(--bb-color-text-muted, #666666)';
+        default:
+            return 'var(--bb-color-text-muted, #888888)';
+    }
+};
+const createDotStyles = (status) => ({
+    display: 'inline-block',
+    width: '4px',
+    height: '4px',
+    borderRadius: '50%',
+    margin: '0 4px',
+    verticalAlign: 'middle',
+    background: getStatusColor(status),
+    boxShadow: status === 'ACTIVE' ? '0 0 4px rgba(212, 168, 75, 0.6)' : 'none',
+});
+// ═══════════════════════════════════════════════════════════════════════════
+// Component
+// ═══════════════════════════════════════════════════════════════════════════
+/**
+ * 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 function DesktopIcon({ id, icon, label, selected = false, classification, status = 'ACTIVE', onClick, onDoubleClick, className, style, }) {
+    // Track hover state for classification tag
+    const [isHovered, setIsHovered] = React.useState(false);
+    // Memoize styles to prevent recalculation
+    const wrapperStyles = useMemo(() => createWrapperStyles(selected), [selected]);
+    const iconSymbolStyles = useMemo(() => createIconSymbolStyles(selected), [selected]);
+    const labelStyles = useMemo(() => createLabelStyles(selected), [selected]);
+    // Handle hover styles dynamically
+    const hoveredWrapperStyles = useMemo(() => {
+        if (!isHovered)
+            return {};
+        return {
+            background: 'rgba(212, 168, 75, 0.06)',
+            boxShadow: '0 0 20px 4px rgba(212, 168, 75, 0.08)',
+        };
+    }, [isHovered]);
+    const hoveredIconSymbolStyles = useMemo(() => {
+        if (!isHovered || selected)
+            return {};
+        return {
+            textShadow: '0 0 12px rgba(212, 168, 75, 0.25), 0 0 24px rgba(212, 168, 75, 0.15)',
+            color: 'var(--bb-color-text-primary, #ffffff)',
+        };
+    }, [isHovered, selected]);
+    const hoveredLabelStyles = useMemo(() => {
+        if (!isHovered || selected)
+            return {};
+        return {
+            color: 'var(--bb-color-text-primary, #ffffff)',
+        };
+    }, [isHovered, selected]);
+    // Event handlers
+    const handleMouseEnter = useCallback(() => setIsHovered(true), []);
+    const handleMouseLeave = useCallback(() => setIsHovered(false), []);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onDoubleClick?.();
+        }
+    }, [onDoubleClick]);
+    // Render icon content
+    const iconContent = useMemo(() => {
+        if (typeof icon === 'string') {
+            // String icon - could be an emoji, character, or icon name
+            return _jsx("span", { children: icon });
+        }
+        return icon;
+    }, [icon]);
+    return (_jsxs("button", { type: "button", className: className, style: {
+            ...wrapperStyles,
+            ...hoveredWrapperStyles,
+            ...style,
+        }, onClick: onClick, onDoubleClick: onDoubleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onKeyDown: handleKeyDown, "data-bb-desktop-icon": true, "data-id": id, "data-selected": selected || undefined, children: [_jsx("div", { style: {
+                    ...iconSymbolStyles,
+                    ...hoveredIconSymbolStyles,
+                }, "data-bb-icon-symbol": true, children: iconContent }), _jsx("span", { style: {
+                    ...labelStyles,
+                    ...hoveredLabelStyles,
+                }, "data-bb-icon-label": true, children: label }), classification && (_jsxs("div", { style: {
+                    ...classificationTagStyles,
+                    opacity: isHovered ? 1 : 0,
+                    color: getStatusColor(status),
+                }, "data-bb-icon-classification": true, children: [classification, _jsx("span", { style: createDotStyles(status) }), status] }))] }));
+}

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

@@ -0,0 +1,68 @@
+/**
+ * @backbay/glia Desktop OS - Snap Zone Overlay Component
+ *
+ * Visual feedback overlay showing the target snap zone during window dragging.
+ * Uses CSS variables for theming (--bb-color-*, etc.)
+ */
+import React from 'react';
+import type { SnapZone } from '../../core/desktop/types';
+export interface SnapZoneOverlayProps {
+    /** Override the active zone (uses hook state by default) */
+    zone?: SnapZone | null;
+    /** Custom color for the overlay */
+    color?: string;
+    /** Additional CSS class */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+}
+/**
+ * Snap zone overlay component.
+ *
+ * Displays a semi-transparent preview rectangle showing where a window
+ * will snap to when released during a drag operation.
+ *
+ * @example Using with hook state (automatic)
+ * ```tsx
+ * const { activeZone } = useSnapZones();
+ *
+ * return (
+ *   <>
+ *     {activeZone && <SnapZoneOverlay />}
+ *   </>
+ * );
+ * ```
+ *
+ * @example Manual control
+ * ```tsx
+ * <SnapZoneOverlay
+ *   zone="left"
+ *   color="rgba(0, 255, 128, 0.2)"
+ * />
+ * ```
+ */
+export declare function SnapZoneOverlay({ zone: zoneProp, color, className, style, }: SnapZoneOverlayProps): import("react/jsx-runtime").JSX.Element | null;
+export interface SnapZonePreviewProps {
+    /** The snap zone to preview */
+    zone: SnapZone;
+    /** Custom color for the overlay */
+    color?: string;
+    /** Whether to show the label */
+    showLabel?: boolean;
+    /** Additional CSS class */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+}
+/**
+ * Standalone snap zone preview without hook dependency.
+ *
+ * Useful for testing or custom implementations.
+ *
+ * @example
+ * ```tsx
+ * <SnapZonePreview zone="left" showLabel={false} />
+ * ```
+ */
+export declare function SnapZonePreview({ zone, color, showLabel, className, style, }: SnapZonePreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SnapZoneOverlay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SnapZoneOverlay.d.ts","sourceRoot":"","sources":["../../../../src/desktop/components/desktop/SnapZoneOverlay.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAMzD,MAAM,WAAW,oBAAoB;IACnC,4DAA4D;IAC5D,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IACvB,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAgFD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EAAE,QAAQ,EACd,KAAK,EACL,SAAS,EACT,KAAK,GACN,EAAE,oBAAoB,kDAqCtB;AAMD,MAAM,WAAW,oBAAoB;IACnC,+BAA+B;IAC/B,IAAI,EAAE,QAAQ,CAAC;IACf,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,KAAK,EACL,SAAgB,EAChB,SAAS,EACT,KAAK,GACN,EAAE,oBAAoB,2CAuBtB"}

package/dist/desktop/components/desktop/SnapZoneOverlay.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @backbay/glia Desktop OS - Snap Zone Overlay Component
+ *
+ * Visual feedback overlay showing the target snap zone during window dragging.
+ * Uses CSS variables for theming (--bb-color-*, etc.)
+ */
+import { useMemo } from 'react';
+import { useSnapZones, getSnapZoneDimensions } from '../../core/desktop/useSnapZones';
+// ═══════════════════════════════════════════════════════════════════════════
+// Styles (using CSS custom properties)
+// ═══════════════════════════════════════════════════════════════════════════
+const containerStyles = {
+    position: 'fixed',
+    inset: 0,
+    pointerEvents: 'none',
+    zIndex: 9998, // Just below windows being dragged
+};
+const createPreviewStyles = (dimensions, color) => ({
+    position: 'absolute',
+    left: dimensions.x,
+    top: dimensions.y,
+    width: dimensions.width,
+    height: dimensions.height,
+    background: color ?? 'var(--bb-color-accent-glow, rgba(212, 168, 75, 0.15))',
+    border: `2px solid ${color ?? 'var(--bb-color-accent, #d4a84b)'}`,
+    borderRadius: 'var(--bb-radius-window, 3px)',
+    transition: 'all 150ms var(--bb-easing-spring, cubic-bezier(0.34, 1.56, 0.64, 1))',
+    // Add subtle inner glow
+    boxShadow: `
+    inset 0 0 60px 10px ${color ?? 'var(--bb-color-accent-glow, rgba(212, 168, 75, 0.1))'},
+    0 0 40px 5px ${color ?? 'var(--bb-color-accent-glow, rgba(212, 168, 75, 0.1))'}
+  `,
+});
+// Zone label styles (shows which zone is being targeted)
+const labelStyles = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    fontFamily: 'var(--bb-font-mono, "JetBrains Mono", monospace)',
+    fontSize: '12px',
+    fontWeight: 600,
+    letterSpacing: '0.1em',
+    textTransform: 'uppercase',
+    color: 'var(--bb-color-accent, #d4a84b)',
+    opacity: 0.6,
+    userSelect: 'none',
+    whiteSpace: 'nowrap',
+};
+// ═══════════════════════════════════════════════════════════════════════════
+// Helper Functions
+// ═══════════════════════════════════════════════════════════════════════════
+/**
+ * Get human-readable label for snap zone.
+ */
+function getZoneLabel(zone) {
+    switch (zone) {
+        case 'maximize':
+            return 'Maximize';
+        case 'left':
+            return 'Left Half';
+        case 'right':
+            return 'Right Half';
+        case 'top-left':
+            return 'Top Left';
+        case 'top-right':
+            return 'Top Right';
+        case 'bottom-left':
+            return 'Bottom Left';
+        case 'bottom-right':
+            return 'Bottom Right';
+    }
+}
+// ═══════════════════════════════════════════════════════════════════════════
+// Component
+// ═══════════════════════════════════════════════════════════════════════════
+/**
+ * Snap zone overlay component.
+ *
+ * Displays a semi-transparent preview rectangle showing where a window
+ * will snap to when released during a drag operation.
+ *
+ * @example Using with hook state (automatic)
+ * ```tsx
+ * const { activeZone } = useSnapZones();
+ *
+ * return (
+ *   <>
+ *     {activeZone && <SnapZoneOverlay />}
+ *   </>
+ * );
+ * ```
+ *
+ * @example Manual control
+ * ```tsx
+ * <SnapZoneOverlay
+ *   zone="left"
+ *   color="rgba(0, 255, 128, 0.2)"
+ * />
+ * ```
+ */
+export function SnapZoneOverlay({ zone: zoneProp, color, className, style, }) {
+    const { activeZone: hookZone } = useSnapZones();
+    const zone = zoneProp ?? hookZone;
+    // Calculate preview dimensions
+    const dimensions = useMemo(() => {
+        if (!zone)
+            return null;
+        return getSnapZoneDimensions(zone);
+    }, [zone]);
+    // Create preview styles
+    const previewStyles = useMemo(() => {
+        if (!dimensions)
+            return null;
+        return createPreviewStyles(dimensions, color);
+    }, [dimensions, color]);
+    // Don't render if no active zone
+    if (!zone || !dimensions || !previewStyles) {
+        return null;
+    }
+    return (_jsx("div", { className: className, style: { ...containerStyles, ...style }, "data-bb-snap-zone-overlay": true, "data-zone": zone, children: _jsx("div", { style: previewStyles, "data-bb-snap-preview": true, children: _jsx("span", { style: labelStyles, "data-bb-snap-label": true, children: getZoneLabel(zone) }) }) }));
+}
+/**
+ * Standalone snap zone preview without hook dependency.
+ *
+ * Useful for testing or custom implementations.
+ *
+ * @example
+ * ```tsx
+ * <SnapZonePreview zone="left" showLabel={false} />
+ * ```
+ */
+export function SnapZonePreview({ zone, color, showLabel = true, className, style, }) {
+    const dimensions = useMemo(() => getSnapZoneDimensions(zone), [zone]);
+    const previewStyles = useMemo(() => createPreviewStyles(dimensions, color), [dimensions, color]);
+    return (_jsx("div", { className: className, style: { ...containerStyles, ...style }, "data-bb-snap-zone-preview": true, "data-zone": zone, children: _jsx("div", { style: previewStyles, "data-bb-snap-preview": true, children: showLabel && (_jsx("span", { style: labelStyles, "data-bb-snap-label": true, children: getZoneLabel(zone) })) }) }));
+}

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

@@ -0,0 +1,9 @@
+/**
+ * @backbay/glia Desktop OS - Desktop Components
+ *
+ * Components for the main desktop surface, icons, and snap zones.
+ */
+export { Desktop, type DesktopProps } from './Desktop';
+export { DesktopIcon, type DesktopIconProps } from './DesktopIcon';
+export { SnapZoneOverlay, SnapZonePreview, type SnapZoneOverlayProps, type SnapZonePreviewProps, } from './SnapZoneOverlay';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/desktop/components/desktop/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EACL,eAAe,EACf,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,GAC1B,MAAM,mBAAmB,CAAC"}

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

@@ -0,0 +1,8 @@
+/**
+ * @backbay/glia Desktop OS - Desktop Components
+ *
+ * Components for the main desktop surface, icons, and snap zones.
+ */
+export { Desktop } from './Desktop';
+export { DesktopIcon } from './DesktopIcon';
+export { SnapZoneOverlay, SnapZonePreview, } from './SnapZoneOverlay';

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

@@ -0,0 +1,11 @@
+/**
+ * @backbay/glia Desktop OS - Components
+ *
+ * Styled UI components for the desktop OS layer.
+ * All components use CSS variables for theming and can work
+ * standalone or within the DesktopOSProvider context.
+ */
+export * from './desktop';
+export * from './shell';
+export * from './window';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/desktop/components/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,cAAc,WAAW,CAAC;AAG1B,cAAc,SAAS,CAAC;AAGxB,cAAc,UAAU,CAAC"}

package/dist/desktop/components/index.js

@@ -0,0 +1,13 @@
+/**
+ * @backbay/glia Desktop OS - Components
+ *
+ * Styled UI components for the desktop OS layer.
+ * All components use CSS variables for theming and can work
+ * standalone or within the DesktopOSProvider context.
+ */
+// Desktop components (desktop surface, icons, snap zones)
+export * from './desktop';
+// Shell components (taskbar, context menu, clock)
+export * from './shell';
+// Window components (window container, titlebar)
+export * from './window';

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

@@ -0,0 +1,35 @@
+/**
+ * @backbay/glia Desktop OS - Clock Component
+ *
+ * System clock for the taskbar. Displays time in Roman numerals (Backbay style)
+ * with a tooltip showing the full date on hover.
+ *
+ * Can be used standalone or within the DesktopOSProvider context.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Clock />
+ *
+ * // With custom format
+ * <Clock format="standard" />
+ *
+ * // Styled with CSS variables
+ * <Clock style={{ '--bb-font-mono': 'Monaco, monospace' }} />
+ * ```
+ */
+import { type CSSProperties } from 'react';
+export interface ClockProps {
+    /** Time display format */
+    format?: 'roman' | 'standard' | '24h';
+    /** Whether to show seconds */
+    showSeconds?: boolean;
+    /** Whether to show date tooltip on hover */
+    showTooltip?: boolean;
+    /** Additional CSS class name */
+    className?: string;
+    /** Additional inline styles */
+    style?: CSSProperties;
+}
+export declare function Clock({ format, showSeconds, showTooltip: enableTooltip, className, style, }: ClockProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Clock.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Clock.d.ts","sourceRoot":"","sources":["../../../../src/desktop/components/shell/Clock.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAuB,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAMhE,MAAM,WAAW,UAAU;IACzB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,KAAK,CAAC;IACtC,8BAA8B;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAiFD,wBAAgB,KAAK,CAAC,EACpB,MAAgB,EAChB,WAAmB,EACnB,WAAW,EAAE,aAAoB,EACjC,SAAS,EACT,KAAK,GACN,EAAE,UAAU,kDAsFZ"}

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

@@ -0,0 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @backbay/glia Desktop OS - Clock Component
+ *
+ * System clock for the taskbar. Displays time in Roman numerals (Backbay style)
+ * with a tooltip showing the full date on hover.
+ *
+ * Can be used standalone or within the DesktopOSProvider context.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Clock />
+ *
+ * // With custom format
+ * <Clock format="standard" />
+ *
+ * // Styled with CSS variables
+ * <Clock style={{ '--bb-font-mono': 'Monaco, monospace' }} />
+ * ```
+ */
+import { useState, useEffect } from 'react';
+// ═══════════════════════════════════════════════════════════════════════════
+// Roman Numeral Conversion
+// ═══════════════════════════════════════════════════════════════════════════
+const ROMAN_NUMERALS = [
+    [1000, 'M'],
+    [900, 'CM'],
+    [500, 'D'],
+    [400, 'CD'],
+    [100, 'C'],
+    [90, 'XC'],
+    [50, 'L'],
+    [40, 'XL'],
+    [10, 'X'],
+    [9, 'IX'],
+    [5, 'V'],
+    [4, 'IV'],
+    [1, 'I'],
+];
+function toRomanNumeral(num) {
+    if (num <= 0)
+        return 'N'; // nulla (0)
+    let result = '';
+    let remaining = num;
+    for (const [value, symbol] of ROMAN_NUMERALS) {
+        while (remaining >= value) {
+            result += symbol;
+            remaining -= value;
+        }
+    }
+    return result;
+}
+// ═══════════════════════════════════════════════════════════════════════════
+// Styles
+// ═══════════════════════════════════════════════════════════════════════════
+const styles = {
+    wrapper: {
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        height: '100%',
+    },
+    clock: {
+        fontFamily: 'var(--bb-font-mono)',
+        fontSize: '13px',
+        color: 'var(--bb-color-text-muted)',
+        padding: '0 12px',
+        letterSpacing: '0.05em',
+        cursor: 'default',
+        userSelect: 'none',
+        transition: 'color var(--bb-duration-fast, 100ms) ease',
+    },
+    clockHover: {
+        color: 'var(--bb-color-text-secondary)',
+    },
+    tooltip: {
+        position: 'absolute',
+        bottom: '100%',
+        right: 0,
+        marginBottom: '8px',
+        padding: '8px 12px',
+        background: 'var(--bb-color-context-menu-bg, #111111)',
+        border: '1px solid var(--bb-color-window-border, #333333)',
+        borderRadius: 'var(--bb-radius-menu, 3px)',
+        fontFamily: 'var(--bb-font-body)',
+        fontSize: '12px',
+        color: 'var(--bb-color-text-secondary)',
+        whiteSpace: 'nowrap',
+        boxShadow: 'var(--bb-shadow-tooltip)',
+        zIndex: 10000,
+    },
+};
+// ═══════════════════════════════════════════════════════════════════════════
+// Component
+// ═══════════════════════════════════════════════════════════════════════════
+export function Clock({ format = 'roman', showSeconds = false, showTooltip: enableTooltip = true, className, style, }) {
+    const [time, setTime] = useState(null);
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    // Initialize on client side only (SSR-safe)
+    useEffect(() => {
+        setTime(new Date());
+        const interval = setInterval(() => {
+            setTime(new Date());
+        }, showSeconds ? 1000 : 60000);
+        return () => clearInterval(interval);
+    }, [showSeconds]);
+    // Don't render until client-side hydrated
+    if (!time)
+        return null;
+    const hours = time.getHours();
+    const minutes = time.getMinutes();
+    const seconds = time.getSeconds();
+    let formattedTime;
+    switch (format) {
+        case 'roman': {
+            const romanHours = toRomanNumeral(hours === 0 ? 24 : hours);
+            const romanMinutes = toRomanNumeral(minutes);
+            formattedTime = showSeconds
+                ? `${romanHours}:${romanMinutes}:${toRomanNumeral(seconds)}`
+                : `${romanHours}:${romanMinutes || 'N'}`;
+            break;
+        }
+        case '24h': {
+            const pad = (n) => n.toString().padStart(2, '0');
+            formattedTime = showSeconds
+                ? `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`
+                : `${pad(hours)}:${pad(minutes)}`;
+            break;
+        }
+        case 'standard':
+        default: {
+            const h = hours % 12 || 12;
+            const ampm = hours >= 12 ? 'PM' : 'AM';
+            const pad = (n) => n.toString().padStart(2, '0');
+            formattedTime = showSeconds
+                ? `${h}:${pad(minutes)}:${pad(seconds)} ${ampm}`
+                : `${h}:${pad(minutes)} ${ampm}`;
+            break;
+        }
+    }
+    const fullDate = time.toLocaleDateString('en-US', {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+    });
+    return (_jsxs("div", { style: { ...styles.wrapper, ...style }, className: className, onMouseEnter: () => {
+            setShowTooltip(true);
+            setIsHovered(true);
+        }, onMouseLeave: () => {
+            setShowTooltip(false);
+            setIsHovered(false);
+        }, children: [_jsx("div", { style: {
+                    ...styles.clock,
+                    ...(isHovered ? styles.clockHover : {}),
+                }, children: formattedTime }), enableTooltip && showTooltip && (_jsx("div", { style: styles.tooltip, children: fullDate }))] }));
+}