Split Layout Context

1/* eslint-disable react-refresh/only-export-components */
2/**
3 * SplitLayoutGlass Context
4 *
5 * Provides state management for compound SplitLayoutGlass component.
6 * Handles selection state, mobile detection, and toggle functionality.
7 *
8 * @module split-layout-context
9 */
10 
11import {
12  createContext,
13  useContext,
14  useState,
15  useCallback,
16  useMemo,
17  useEffect,
18  type FC,
19  type ReactNode,
20} from 'react';
21 
22// ========================================
23// TYPES
24// ========================================
25 
26import type { IntensityType } from '@/lib/variants/glass-card-variants';
27 
28export type Breakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
29export type MobileMode = 'stack' | 'accordion' | 'drawer';
30 
31/**
32 * Context value for SplitLayoutGlass compound components
33 *
34 * API is designed to be consistent with shadcn/ui Sidebar patterns.
35 */
36export interface SplitLayoutContextValue {
37  // === STATE ===
38  /** Currently selected key for master-detail pattern */
39  selectedKey: string | null;
40  /** Set selected key */
41  setSelectedKey: (key: string | null) => void;
42 
43  /** Sidebar open state (desktop) */
44  isOpen: boolean;
45  /** Set sidebar open state */
46  setIsOpen: (open: boolean) => void;
47 
48  /** Mobile drawer/accordion open state */
49  isMobileOpen: boolean;
50  /** Set mobile open state */
51  setMobileOpen: (open: boolean) => void;
52 
53  // === SHADCN ALIASES ===
54  /** Sidebar state: "expanded" | "collapsed" (shadcn pattern) */
55  state: 'expanded' | 'collapsed';
56  /** Alias for isOpen (shadcn naming) */
57  open: boolean;
58  /** Alias for setIsOpen (shadcn naming) */
59  setOpen: (open: boolean) => void;
60  /** Alias for isMobileOpen (shadcn naming) */
61  openMobile: boolean;
62  /** Alias for setMobileOpen (shadcn naming) */
63  setOpenMobile: (open: boolean) => void;
64  /** Alias for toggle (shadcn naming) */
65  toggleSidebar: () => void;
66 
67  // === RESPONSIVE ===
68  /** Current viewport is below breakpoint */
69  isMobile: boolean;
70 
71  // === CONFIG ===
72  /** Breakpoint for desktop layout */
73  breakpoint: Breakpoint;
74  /** Mobile layout mode */
75  mobileMode: MobileMode;
76  /** Glass intensity for panels */
77  intensity: IntensityType;
78  /** Sticky offset from viewport top */
79  stickyOffset: number;
80 
81  // === ACTIONS ===
82  /** Toggle sidebar (desktop) or drawer (mobile) */
83  toggle: () => void;
84}
85 
86// ========================================
87// CONTEXT
88// ========================================
89 
90const SplitLayoutContext = createContext<SplitLayoutContextValue | null>(null);
91 
92/**
93// … truncated