@backbay/glia 0.2.0-alpha.1

package/dist/desktop/components/window/Window.js

@@ -0,0 +1,416 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useMemo, useState, useEffect, memo } from 'react';
+import { Rnd } from 'react-rnd';
+import { motion, AnimatePresence } from 'motion/react';
+import { useWindow, useIsWindowFocused, useIsWindowFullscreen, useWindowGroup, useWindowActions, useWindowManagerStore, } from '../../core/window/useWindowManager';
+import { WindowTitlebar } from './WindowTitlebar';
+// ═══════════════════════════════════════════════════════════════════════════
+// Hyprland-style animation configurations
+// Fast, smooth springs with minimal overshoot for that polished feel
+// ═══════════════════════════════════════════════════════════════════════════
+const SPRING_SNAPPY = {
+    type: 'spring',
+    stiffness: 400,
+    damping: 35,
+    mass: 0.8,
+};
+const SPRING_SMOOTH = {
+    type: 'spring',
+    stiffness: 300,
+    damping: 30,
+    mass: 1,
+};
+// Minimize animation - fast ease-out curve
+const MINIMIZE_TRANSITION = {
+    type: 'tween',
+    duration: 0.3,
+    ease: [0.32, 0, 0.67, 0],
+};
+// Restore animation - spring physics for that snappy feel
+const RESTORE_TRANSITION = {
+    type: 'spring',
+    stiffness: 380,
+    damping: 32,
+    mass: 0.8,
+};
+/**
+ * Get animation config based on window variant
+ */
+function getWindowAnimations(variant = 'default') {
+    if (variant === 'prominent') {
+        // Prominent: dramatic slide-up with scale, like opening a workspace
+        return {
+            initial: { opacity: 0, scale: 0.92, y: 40 },
+            animate: { opacity: 1, scale: 1, y: 0 },
+            exit: { opacity: 0, scale: 0.96, y: 20 },
+            transition: SPRING_SMOOTH,
+        };
+    }
+    // Default: snappy pop-in from center
+    return {
+        initial: { opacity: 0, scale: 0.9 },
+        animate: { opacity: 1, scale: 1 },
+        exit: { opacity: 0, scale: 0.95 },
+        transition: SPRING_SNAPPY,
+    };
+}
+/**
+ * Calculate animation variants for minimize/restore based on target position.
+ */
+function getMinimizeRestoreVariants(windowRect, targetCenter) {
+    const windowCenterX = windowRect.x + windowRect.width / 2;
+    const windowCenterY = windowRect.y + windowRect.height / 2;
+    if (!targetCenter) {
+        return {
+            minimized: {
+                opacity: 0,
+                scale: 0.1,
+                y: 200,
+                transition: MINIMIZE_TRANSITION,
+            },
+            visible: {
+                opacity: 1,
+                scale: 1,
+                x: 0,
+                y: 0,
+                transition: RESTORE_TRANSITION,
+            },
+        };
+    }
+    const deltaX = targetCenter.x - windowCenterX;
+    const deltaY = targetCenter.y - windowCenterY;
+    return {
+        minimized: {
+            opacity: 0,
+            scale: 0.1,
+            x: deltaX,
+            y: deltaY,
+            transition: MINIMIZE_TRANSITION,
+        },
+        visible: {
+            opacity: 1,
+            scale: 1,
+            x: 0,
+            y: 0,
+            transition: RESTORE_TRANSITION,
+        },
+    };
+}
+// ═══════════════════════════════════════════════════════════════════════════
+// Styles - Using CSS custom properties from theme
+// ═══════════════════════════════════════════════════════════════════════════
+const windowFrameStyle = (focused, variant, isFullscreen) => ({
+    position: 'absolute',
+    display: 'flex',
+    flexDirection: 'column',
+    background: 'var(--bb-color-window-bg, #0a0a0a)',
+    border: isFullscreen
+        ? 'none'
+        : `var(--bb-spacing-window-border-width, 2px) solid ${variant === 'prominent' && focused
+            ? 'var(--bb-color-window-border-focused, rgba(212, 168, 75, 0.25))'
+            : 'var(--bb-color-window-border, #333333)'}`,
+    borderRadius: isFullscreen ? 0 : 'var(--bb-radius-window, 3px)',
+    overflow: 'visible',
+    transition: 'border-color 0.3s ease, box-shadow 0.3s ease',
+    // GPU acceleration
+    willChange: 'transform, opacity',
+    transform: 'translateZ(0)',
+    backfaceVisibility: 'hidden',
+    contain: 'layout paint',
+    // Shadow
+    boxShadow: variant === 'prominent'
+        ? focused
+            ? 'var(--bb-shadow-window-focused, 0 32px 80px -12px rgba(0, 0, 0, 0.6))'
+            : 'var(--bb-shadow-window, 0 8px 32px rgba(0, 0, 0, 0.6))'
+        : 'var(--bb-shadow-window, 0 8px 32px rgba(0, 0, 0, 0.6))',
+    // Dim unfocused prominent windows
+    filter: variant === 'prominent' && !focused ? 'brightness(0.92)' : undefined,
+    width: '100%',
+    height: '100%',
+});
+const windowContentStyle = {
+    flex: 1,
+    minHeight: 0,
+    overflow: 'auto',
+    position: 'relative',
+};
+const groupDropZoneStyle = {
+    position: 'absolute',
+    inset: 0,
+    pointerEvents: 'none',
+    zIndex: 100,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    background: 'rgba(212, 168, 75, 0.08)',
+    border: '2px dashed rgba(212, 168, 75, 0.4)',
+    borderRadius: 'var(--bb-radius-window, 3px)',
+};
+const groupDropZoneLabelStyle = {
+    padding: '8px 16px',
+    background: 'var(--bb-color-window-bg, #0a0a0a)',
+    border: '1px solid var(--bb-color-accent, #d4a84b)',
+    borderRadius: 'var(--bb-radius-window, 3px)',
+    fontFamily: 'var(--bb-font-display, sans-serif)',
+    fontSize: '0.75rem',
+    fontWeight: 600,
+    letterSpacing: '0.1em',
+    textTransform: 'uppercase',
+    color: 'var(--bb-color-accent, #d4a84b)',
+};
+// ═══════════════════════════════════════════════════════════════════════════
+// Window Component
+// ═══════════════════════════════════════════════════════════════════════════
+function WindowInner({ id, children, 
+// Standalone props
+title: titleProp, position: positionProp, size: sizeProp, minSize: minSizeProp, maxSize: maxSizeProp, zIndex: zIndexProp, isMinimized: isMinimizedProp, isMaximized: isMaximizedProp, isFullscreen: isFullscreenProp, isFocused: isFocusedProp, tilePosition: tilePositionProp, 
+// Styling
+variant = 'default', hideTitlebar = false, className, style, 
+// Standalone handlers
+onPositionChange, onSizeChange, onFocus, onClose, onMinimize, onMaximize, onRestore, 
+// Advanced
+minimizeTarget, bounds = 'parent', disableDragging: disableDraggingProp, disableResizing: disableResizingProp, }) {
+    // ─────────────────────────────────────────────────────────────────────────
+    // Try to get window state from store (provider mode)
+    // ─────────────────────────────────────────────────────────────────────────
+    const windowFromStore = useWindow(id);
+    const isFocusedFromStore = useIsWindowFocused(id);
+    const isFullscreenFromStore = useIsWindowFullscreen(id);
+    const group = useWindowGroup(windowFromStore?.groupId);
+    const actions = useWindowActions();
+    // Determine if we're in standalone mode (no provider) or provider mode
+    const isStandaloneMode = !windowFromStore;
+    // ─────────────────────────────────────────────────────────────────────────
+    // Resolve props - use prop values in standalone mode, store in provider mode
+    // ─────────────────────────────────────────────────────────────────────────
+    const resolvedWindow = isStandaloneMode
+        ? {
+            id,
+            title: titleProp ?? 'Window',
+            position: positionProp ?? { x: 100, y: 100 },
+            size: sizeProp ?? { width: 640, height: 480 },
+            minSize: minSizeProp ?? { width: 320, height: 240 },
+            maxSize: maxSizeProp,
+            zIndex: zIndexProp ?? 1,
+            isMinimized: isMinimizedProp ?? false,
+            isMaximized: isMaximizedProp ?? false,
+            isFullscreen: isFullscreenProp ?? false,
+            isFocused: isFocusedProp ?? true,
+            tilePosition: tilePositionProp,
+        }
+        : windowFromStore;
+    const isFocused = isStandaloneMode ? (isFocusedProp ?? true) : isFocusedFromStore;
+    const isFullscreen = isStandaloneMode ? (isFullscreenProp ?? false) : isFullscreenFromStore;
+    // ─────────────────────────────────────────────────────────────────────────
+    // Local state for animations
+    // ─────────────────────────────────────────────────────────────────────────
+    const rndRef = useRef(null);
+    const frameRef = useRef(null);
+    const [isMinimizeAnimating, setIsMinimizeAnimating] = useState(false);
+    const [minimizeAnimationState, setMinimizeAnimationState] = useState('visible');
+    const prevMinimized = useRef(resolvedWindow.isMinimized ?? false);
+    const [isTransitioning, setIsTransitioning] = useState(false);
+    const prevMaximized = useRef(resolvedWindow.isMaximized);
+    const prevTiled = useRef(resolvedWindow.tilePosition);
+    const [showGroupDropZone, setShowGroupDropZone] = useState(false);
+    // Get dragging window ID from store for group drop detection
+    const draggingWindowId = useWindowManagerStore((state) => {
+        // This would need to be added to the store - for now we'll skip this feature
+        return null;
+    });
+    // ─────────────────────────────────────────────────────────────────────────
+    // Handle minimize/restore animation state
+    // ─────────────────────────────────────────────────────────────────────────
+    useEffect(() => {
+        const wasMinimized = prevMinimized.current;
+        const isMinimizedNow = resolvedWindow.isMinimized ?? false;
+        if (wasMinimized !== isMinimizedNow) {
+            prevMinimized.current = isMinimizedNow;
+            setIsMinimizeAnimating(true);
+            setMinimizeAnimationState(isMinimizedNow ? 'minimized' : 'visible');
+        }
+    }, [resolvedWindow.isMinimized]);
+    // Handle maximize/tile state changes for smooth Rnd transitions
+    useEffect(() => {
+        if (prevMaximized.current !== resolvedWindow.isMaximized ||
+            prevTiled.current !== resolvedWindow.tilePosition) {
+            setIsTransitioning(true);
+            prevMaximized.current = resolvedWindow.isMaximized;
+            prevTiled.current = resolvedWindow.tilePosition;
+            const timer = setTimeout(() => setIsTransitioning(false), 350);
+            return () => clearTimeout(timer);
+        }
+    }, [resolvedWindow.isMaximized, resolvedWindow.tilePosition]);
+    // Handle fullscreen keyboard shortcuts
+    useEffect(() => {
+        if (!isFocused)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape' && isFullscreen) {
+                if (isStandaloneMode) {
+                    // No-op in standalone unless handler provided
+                }
+                else {
+                    actions.exitFullscreen();
+                }
+            }
+            if (e.key === 'f' && e.shiftKey && (e.metaKey || e.ctrlKey)) {
+                e.preventDefault();
+                if (isFullscreen) {
+                    if (isStandaloneMode) {
+                        // No-op
+                    }
+                    else {
+                        actions.exitFullscreen();
+                    }
+                }
+                else {
+                    if (isStandaloneMode) {
+                        // No-op
+                    }
+                    else {
+                        actions.fullscreen(id);
+                    }
+                }
+            }
+        };
+        globalThis.addEventListener('keydown', handleKeyDown);
+        return () => globalThis.removeEventListener('keydown', handleKeyDown);
+    }, [isFocused, isFullscreen, isStandaloneMode, actions, id]);
+    // ─────────────────────────────────────────────────────────────────────────
+    // Animation config
+    // ─────────────────────────────────────────────────────────────────────────
+    const animations = useMemo(() => getWindowAnimations(variant), [variant]);
+    const minimizeVariants = useMemo(() => {
+        const pos = resolvedWindow.position ?? { x: 100, y: 100 };
+        const sz = resolvedWindow.size ?? { width: 640, height: 480 };
+        return getMinimizeRestoreVariants({ x: pos.x, y: pos.y, width: sz.width, height: sz.height }, minimizeTarget);
+    }, [resolvedWindow.position, resolvedWindow.size, minimizeTarget]);
+    const handleMinimizeAnimationComplete = useCallback(() => {
+        setIsMinimizeAnimating(false);
+    }, []);
+    // ─────────────────────────────────────────────────────────────────────────
+    // Drag handlers
+    // ─────────────────────────────────────────────────────────────────────────
+    const handleDragStart = useCallback(() => {
+        // Untile if tiled when drag starts
+        if (resolvedWindow.tilePosition && !isStandaloneMode) {
+            actions.untile(id);
+        }
+    }, [id, resolvedWindow.tilePosition, isStandaloneMode, actions]);
+    const handleDragStop = useCallback((_e, d) => {
+        if (isStandaloneMode) {
+            onPositionChange?.({ x: d.x, y: d.y });
+        }
+        else {
+            actions.move(id, { x: d.x, y: d.y });
+        }
+    }, [id, isStandaloneMode, onPositionChange, actions]);
+    const handleResizeStop = useCallback((_e, _direction, ref, _delta, position) => {
+        const newWidth = parseInt(ref.style.width, 10);
+        const newHeight = parseInt(ref.style.height, 10);
+        if (isStandaloneMode) {
+            onSizeChange?.({ width: newWidth, height: newHeight });
+            onPositionChange?.(position);
+        }
+        else {
+            actions.resize(id, { width: newWidth, height: newHeight });
+            actions.move(id, position);
+        }
+    }, [id, isStandaloneMode, onSizeChange, onPositionChange, actions]);
+    const handleMouseDown = useCallback(() => {
+        if (isStandaloneMode) {
+            onFocus?.();
+        }
+        else {
+            actions.focus(id);
+        }
+    }, [id, isStandaloneMode, onFocus, actions]);
+    // ─────────────────────────────────────────────────────────────────────────
+    // Render conditions
+    // ─────────────────────────────────────────────────────────────────────────
+    // For grouped windows, only render the active tab
+    if (resolvedWindow.groupId && !resolvedWindow.isGroupActive) {
+        return null;
+    }
+    // Hide when minimized and not animating
+    const isVisible = !resolvedWindow.isMinimized || isMinimizeAnimating;
+    if (!isVisible)
+        return null;
+    const hasGroup = !!group && group.windowIds.length > 1;
+    const pos = resolvedWindow.position ?? { x: 100, y: 100 };
+    const sz = resolvedWindow.size ?? { width: 640, height: 480 };
+    const minSz = resolvedWindow.minSize ?? { width: 320, height: 240 };
+    const title = resolvedWindow.title ?? titleProp ?? 'Window';
+    // Disable dragging for maximized/fullscreen windows
+    const disableDragging = disableDraggingProp ?? resolvedWindow.isMaximized ?? isFullscreen ?? isMinimizeAnimating;
+    // Disable resizing for maximized/tiled/fullscreen windows
+    const enableResizing = !(disableResizingProp ??
+        resolvedWindow.isMaximized ??
+        resolvedWindow.tilePosition ??
+        isFullscreen ??
+        isMinimizeAnimating);
+    // Transition style for smooth maximize/restore
+    const transitionStyle = isTransitioning
+        ? { transition: 'all 0.35s cubic-bezier(0.22, 1, 0.36, 1)' }
+        : undefined;
+    const useMinimizeAnimation = isMinimizeAnimating && minimizeVariants;
+    return (_jsx(Rnd, { ref: rndRef, position: { x: pos.x, y: pos.y }, size: { width: sz.width, height: sz.height }, minWidth: isFullscreen ? undefined : minSz.width, minHeight: isFullscreen ? undefined : minSz.height, maxWidth: resolvedWindow.maxSize?.width, maxHeight: resolvedWindow.maxSize?.height, disableDragging: disableDragging, enableResizing: enableResizing, onDragStart: handleDragStart, onDragStop: handleDragStop, onResizeStop: handleResizeStop, onMouseDown: handleMouseDown, dragHandleClassName: "window-drag-handle", bounds: isFullscreen ? undefined : bounds, style: {
+            zIndex: resolvedWindow.zIndex ?? zIndexProp ?? 1,
+            display: 'flex',
+            pointerEvents: isMinimizeAnimating && minimizeAnimationState === 'minimized' ? 'none' : 'auto',
+            ...(isFullscreen
+                ? {
+                    position: 'fixed',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    width: '100vw',
+                    height: '100vh',
+                    borderRadius: 0,
+                }
+                : {}),
+            ...transitionStyle,
+            ...style,
+        }, className: className, children: _jsxs(motion.div, { ref: frameRef, variants: useMinimizeAnimation ? minimizeVariants : undefined, initial: useMinimizeAnimation ? undefined : animations.initial, animate: useMinimizeAnimation ? minimizeAnimationState : animations.animate, onAnimationComplete: useMinimizeAnimation ? handleMinimizeAnimationComplete : undefined, style: windowFrameStyle(isFocused, variant, isFullscreen), "data-bb-window": true, "data-bb-window-id": id, "data-bb-window-variant": variant, "data-bb-window-fullscreen": isFullscreen ? 'true' : undefined, children: [!hideTitlebar && !isFullscreen && (_jsx(WindowTitlebar, { id: id, title: title, isMaximized: resolvedWindow.isMaximized ?? false, isFullscreen: isFullscreen, isTiled: resolvedWindow.tilePosition, isFocused: isFocused, groupId: resolvedWindow.groupId, onClose: isStandaloneMode ? onClose : undefined, onMinimize: isStandaloneMode ? onMinimize : undefined, onMaximize: isStandaloneMode ? onMaximize : undefined, onRestore: isStandaloneMode ? onRestore : undefined })), _jsx("div", { style: windowContentStyle, "data-bb-window-content": true, children: children }), _jsx(AnimatePresence, { children: showGroupDropZone && (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, style: groupDropZoneStyle, children: _jsx("div", { style: groupDropZoneLabelStyle, children: "Group Windows" }) })) })] }) }));
+}
+/**
+ * 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 const Window = memo(WindowInner);

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import type { WindowId, TilePosition } from '../../core/window/types';
+export interface WindowTitlebarProps {
+    /** Window ID */
+    id: WindowId;
+    /** Window title */
+    title: string;
+    /** Whether the window is maximized */
+    isMaximized: boolean;
+    /** Whether the window is in fullscreen */
+    isFullscreen?: boolean;
+    /** Whether the window is tiled */
+    isTiled?: TilePosition;
+    /** Whether the window is focused */
+    isFocused: boolean;
+    /** Group ID if window is part of a group (reserved for tab group UI) */
+    groupId?: string;
+    /** Custom close handler (for standalone mode) */
+    onClose?: () => void;
+    /** Custom minimize handler (for standalone mode) */
+    onMinimize?: () => void;
+    /** Custom maximize handler (for standalone mode) */
+    onMaximize?: () => void;
+    /** Custom restore handler (for standalone mode) */
+    onRestore?: () => void;
+    /** Custom fullscreen handler (for standalone mode) */
+    onFullscreen?: () => void;
+    /** Custom exit fullscreen handler (for standalone mode) */
+    onExitFullscreen?: () => void;
+    /** Hide window control buttons */
+    hideControls?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Custom inline styles */
+    style?: React.CSSProperties;
+    /** Additional content to render in the titlebar */
+    children?: React.ReactNode;
+}
+declare function WindowTitlebarInner({ id, title, isMaximized, isFullscreen, isTiled, isFocused, groupId: _groupId, onClose, onMinimize, onMaximize, onRestore, onFullscreen, onExitFullscreen, hideControls, className, style, children, }: WindowTitlebarProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * WindowTitlebar - A styled titlebar for windows with standard controls.
+ *
+ * Works in dual mode:
+ * - **Standalone**: Pass all event handlers (onClose, onMinimize, etc.)
+ * - **With Provider**: Uses useWindowManager() automatically
+ *
+ * @example Standalone mode
+ * ```tsx
+ * <WindowTitlebar
+ *   id="my-window"
+ *   title="My Window"
+ *   isMaximized={false}
+ *   isFocused={true}
+ *   onClose={() => setIsOpen(false)}
+ *   onMinimize={() => setIsMinimized(true)}
+ * />
+ * ```
+ *
+ * @example With DesktopOSProvider
+ * ```tsx
+ * <WindowTitlebar
+ *   id={windowId}
+ *   title={window.title}
+ *   isMaximized={window.isMaximized}
+ *   isFocused={window.isFocused}
+ * />
+ * ```
+ */
+export declare const WindowTitlebar: React.MemoExoticComponent<typeof WindowTitlebarInner>;
+export {};
+//# sourceMappingURL=WindowTitlebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WindowTitlebar.d.ts","sourceRoot":"","sources":["../../../../src/desktop/components/window/WindowTitlebar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AA4DtE,MAAM,WAAW,mBAAmB;IAClC,gBAAgB;IAChB,EAAE,EAAE,QAAQ,CAAC;IACb,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,WAAW,EAAE,OAAO,CAAC;IACrB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kCAAkC;IAClC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,oCAAoC;IACpC,SAAS,EAAE,OAAO,CAAC;IACnB,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,2DAA2D;IAC3D,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,kCAAkC;IAClC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mDAAmD;IACnD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAoDD,iBAAS,mBAAmB,CAAC,EAC3B,EAAE,EACF,KAAK,EACL,WAAW,EACX,YAAY,EACZ,OAAO,EACP,SAAS,EACT,OAAO,EAAE,QAAQ,EACjB,OAAO,EACP,UAAU,EACV,UAAU,EACV,SAAS,EACT,YAAY,EACZ,gBAAgB,EAChB,YAAoB,EACpB,SAAS,EACT,KAAK,EACL,QAAQ,GACT,EAAE,mBAAmB,2CA+JrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,cAAc,uDAA4B,CAAC"}