Split Layout Glass

1/* eslint-disable react-refresh/only-export-components */
2/**
3 * SplitLayoutGlass Component (Compound API only)
4 *
5 * A responsive two-column layout with sticky scroll behavior and glassmorphism styling.
6 * Features independent scrolling in each panel after sticky positioning activates.
7 *
8 * @pattern MDN, GitHub Docs, Linear, shadcn Sidebar
9 *
10 * @example
11 * ```tsx
12 * <SplitLayoutGlass.Provider defaultSelectedKey="2024">
13 *   <SplitLayoutGlass.Root ratio={{ sidebar: 1, main: 2 }}>
14 *     <SplitLayoutGlass.Sidebar>
15 *       <SplitLayoutGlass.SidebarHeader>Header</SplitLayoutGlass.SidebarHeader>
16 *       <SplitLayoutGlass.SidebarContent>Content</SplitLayoutGlass.SidebarContent>
17 *     </SplitLayoutGlass.Sidebar>
18 *     <SplitLayoutGlass.Main>
19 *       <SplitLayoutGlass.MainContent>Content</SplitLayoutGlass.MainContent>
20 *     </SplitLayoutGlass.Main>
21 *   </SplitLayoutGlass.Root>
22 * </SplitLayoutGlass.Provider>
23 * ```
24 *
25 * @since v2.2.0 - Legacy props API removed, Compound API only
26 * @module split-layout-glass
27 */
28 
29import { forwardRef, type CSSProperties, type ReactNode } from 'react';
30import { Menu, X, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
31import { Slot } from '@radix-ui/react-slot';
32import { cn } from '@/lib/utils';
33import { GlassCard } from '@/components/glass/ui/glass-card';
34import { ButtonGlass } from '@/components/glass/ui/button-glass';
35import { ScrollArea } from '@/components/ui/scroll-area';
36 
37// Import context
38import {
39  SplitLayoutProvider,
40  useSplitLayout,
41  useSplitLayoutOptional,
42  type SplitLayoutProviderProps,
43  type SplitLayoutContextValue,
44  type Breakpoint,
45  type MobileMode,
46} from './split-layout-context';
47 
48import '@/glass-theme.css';
49 
50// ========================================
51// GRID STYLES HOOK
52// ========================================
53 
54interface GridStylesConfig {
55  ratio?: { sidebar: number; main: number };
56  minSidebarWidth?: string;
57  maxSidebarWidth?: string;
58  gap?: number | { mobile?: number; desktop?: number };
59  stickyOffset?: number;
60}
61 
62function useGridStyles(config: GridStylesConfig) {
63  const {
64    ratio = { sidebar: 1, main: 2 },
65    minSidebarWidth = '280px',
66    maxSidebarWidth,
67    gap = { mobile: 16, desktop: 24 },
68    stickyOffset = 24,
69  } = config;
70 
71  const gapMobile = typeof gap === 'number' ? gap : (gap.mobile ?? 16);
72  const gapDesktop = typeof gap === 'number' ? gap : (gap.desktop ?? 24);
73 
74  const gridTemplate = maxSidebarWidth
75// … truncated