shadcn-glass-ui 2.1.4 → 2.1.5

package/docs/AI_USAGE.md

@@ -138,7 +138,7 @@ export default {
 In your main CSS file (`src/index.css` or `src/globals.css`):
 
 ```css
-@import 'shadcn-glass-ui/dist/styles.css';
+@import 'shadcn-glass-ui/styles.css';
 ```
 
 **5. Wrap app with theme provider**
@@ -203,7 +203,7 @@ export function Test() {
 **Issue: "Styles not applied"**
 
 - **Cause:** CSS not imported
-- **Fix:** Add `@import 'shadcn-glass-ui/dist/styles.css';` to main CSS
+- **Fix:** Add `@import 'shadcn-glass-ui/styles.css';` to main CSS
 
 ---
 
@@ -541,7 +541,7 @@ npm install shadcn-glass-ui
 
 ```css
 /* src/index.css */
-@import 'shadcn-glass-ui/dist/styles.css';
+@import 'shadcn-glass-ui/styles.css';
 ```
 
 ```typescript
@@ -658,7 +658,7 @@ mcp__context7__get-library-docs /yhooi2/shadcn-glass-ui-library --topic="token a
 ```tsx
 import { ButtonGlass, InputGlass } from 'shadcn-glass-ui';
 import { ThemeProvider, useTheme } from 'shadcn-glass-ui';
-import 'shadcn-glass-ui/dist/styles.css';
+import 'shadcn-glass-ui/styles.css';
 ```
 
 **shadcn CLI:**
@@ -756,7 +756,7 @@ import { ThemeProvider } from '@/lib/theme-context';
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
-   @import 'shadcn-glass-ui/dist/styles.css';
+   @import 'shadcn-glass-ui/styles.css';
    ```
 
 ---

package/docs/BEST_PRACTICES.md

@@ -21,7 +21,7 @@ Always wrap your app with ThemeProvider at the root level:
 
 ```tsx
 import { ThemeProvider } from 'shadcn-glass-ui';
-import 'shadcn-glass-ui/dist/styles.css';
+import 'shadcn-glass-ui/styles.css';
 
 function App() {
   return (

package/docs/COMPONENTS_CATALOG.md

@@ -57,6 +57,8 @@ hardcoded OKLCH values across all components.
 | **RepositoryMetadataGlass**  | Composite   | `src/components/glass/composite/repository-metadata-glass.tsx`  | 6     | Repo metadata display                      |
 | **UserInfoGlass**            | Composite   | `src/components/glass/composite/user-info-glass.tsx`            | 5     | User card, avatar, stats                   |
 | **UserStatsLineGlass**       | Composite   | `src/components/glass/composite/user-stats-line-glass.tsx`      | 4     | Horizontal stats line                      |
+| **SplitLayoutGlass**         | Composite   | `src/components/glass/composite/split-layout-glass/`            | -     | Compound API, sticky scroll, master-detail |
+| **SidebarGlass**             | Core UI     | `src/components/glass/ui/sidebar-glass/`                        | -     | Compound API, shadcn/ui compatible, rail   |
 | **HeaderNavGlass**           | Section     | `src/components/glass/sections/header-nav-glass.tsx`            | 6     | Navigation, search, theme                  |
 | **ProfileHeaderGlass**       | Section     | `src/components/glass/sections/profile-header-glass.tsx`        | 7     | Profile, avatar, stats, langs              |
 | **CareerStatsGlass**         | Section     | `src/components/glass/sections/career-stats-glass.tsx`          | 5     | Career stats, year cards                   |
@@ -857,6 +859,91 @@ content, anchor **API:** Compound component + Legacy wrapper
 </PopoverGlassLegacy>
 ```
 
+#### SidebarGlass (Compound API)
+
+**File:** `src/components/glass/ui/sidebar-glass/sidebar-glass.tsx` **Components:** Provider, Root,
+Header, Content, Footer, Rail, Inset, Trigger, Separator, Group, GroupLabel, GroupAction,
+GroupContent, Menu, MenuItem, MenuButton, MenuAction, MenuBadge, MenuSkeleton, MenuSub, MenuSubItem,
+MenuSubButton **Features:** 100% shadcn/ui compatible, mobile drawer, desktop collapsible
+(offcanvas/icon/none), glassmorphism
+
+**Basic Sidebar:**
+
+```tsx
+<SidebarGlass.Provider>
+  <SidebarGlass.Root>
+    <SidebarGlass.Header>
+      <Logo />
+    </SidebarGlass.Header>
+    <SidebarGlass.Content>
+      <SidebarGlass.Menu>
+        <SidebarGlass.MenuItem>
+          <SidebarGlass.MenuButton isActive>
+            <Home className="w-4 h-4" />
+            Dashboard
+          </SidebarGlass.MenuButton>
+        </SidebarGlass.MenuItem>
+        <SidebarGlass.MenuItem>
+          <SidebarGlass.MenuButton>
+            <Settings className="w-4 h-4" />
+            Settings
+          </SidebarGlass.MenuButton>
+        </SidebarGlass.MenuItem>
+      </SidebarGlass.Menu>
+    </SidebarGlass.Content>
+    <SidebarGlass.Footer>
+      <UserInfo />
+    </SidebarGlass.Footer>
+  </SidebarGlass.Root>
+  <SidebarGlass.Inset>
+    <main>Main Content</main>
+  </SidebarGlass.Inset>
+</SidebarGlass.Provider>
+```
+
+**With Groups and Submenus:**
+
+```tsx
+<SidebarGlass.Provider collapsible="icon" side="left">
+  <SidebarGlass.Root>
+    <SidebarGlass.Content>
+      <SidebarGlass.Group>
+        <SidebarGlass.GroupLabel>Main</SidebarGlass.GroupLabel>
+        <SidebarGlass.GroupContent>
+          <SidebarGlass.Menu>
+            <SidebarGlass.MenuItem>
+              <SidebarGlass.MenuButton tooltip="Dashboard">
+                <Home /> Dashboard
+              </SidebarGlass.MenuButton>
+            </SidebarGlass.MenuItem>
+          </SidebarGlass.Menu>
+        </SidebarGlass.GroupContent>
+      </SidebarGlass.Group>
+    </SidebarGlass.Content>
+    <SidebarGlass.Rail />
+  </SidebarGlass.Root>
+</SidebarGlass.Provider>
+```
+
+**Props (Provider):**
+
+| Prop             | Type                               | Default         | Description                        |
+| ---------------- | ---------------------------------- | --------------- | ---------------------------------- |
+| side             | 'left' \| 'right'                  | 'left'          | Sidebar position                   |
+| variant          | 'sidebar' \| 'floating' \| 'inset' | 'sidebar'       | Visual style                       |
+| collapsible      | 'offcanvas' \| 'icon' \| 'none'    | 'offcanvas'     | Collapse behavior                  |
+| open             | boolean                            | -               | Controlled open state              |
+| onOpenChange     | (open: boolean) => void            | -               | Open state change handler          |
+| defaultOpen      | boolean                            | true            | Initial open state                 |
+| cookieName       | string                             | 'sidebar:state' | Cookie name for persistence        |
+| keyboardShortcut | string \| false                    | 'b'             | Keyboard shortcut (Cmd/Ctrl + key) |
+
+**Hook: useSidebar()**
+
+```tsx
+const { state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar } = useSidebar();
+```
+
 ---
 
 ### Level 2 - Atomic (7)
@@ -1016,6 +1103,122 @@ feature list **Usage:**
 />
 ```
 
+#### SplitLayoutGlass (Compound API)
+
+**File:** `src/components/glass/composite/split-layout-glass/split-layout-glass.tsx` **Components:**
+Provider, Root, Sidebar, SidebarHeader, SidebarContent, SidebarFooter, Main, MainHeader,
+MainContent, MainFooter, Trigger, Accordion **Features:** Sticky scroll, responsive
+(stack/main-only/sidebar-only), master-detail pattern, keyboard shortcut (Cmd+B)
+
+**Basic Two-Column Layout:**
+
+```tsx
+<SplitLayoutGlass.Provider>
+  <SplitLayoutGlass.Root>
+    <SplitLayoutGlass.Sidebar>
+      <SplitLayoutGlass.SidebarHeader>
+        <h3>Navigation</h3>
+      </SplitLayoutGlass.SidebarHeader>
+      <SplitLayoutGlass.SidebarContent>
+        <nav>
+          <a href="#section1">Section 1</a>
+          <a href="#section2">Section 2</a>
+        </nav>
+      </SplitLayoutGlass.SidebarContent>
+    </SplitLayoutGlass.Sidebar>
+    <SplitLayoutGlass.Main>
+      <SplitLayoutGlass.MainContent>
+        <article>
+          <h1>Main Content</h1>
+          <p>Your content here...</p>
+        </article>
+      </SplitLayoutGlass.MainContent>
+    </SplitLayoutGlass.Main>
+  </SplitLayoutGlass.Root>
+</SplitLayoutGlass.Provider>
+```
+
+**With Master-Detail Pattern:**
+
+```tsx
+<SplitLayoutGlass.Provider
+  defaultSelectedKey="item-1"
+  breakpoint="lg"
+  mobileMode="drawer"
+  intensity="medium"
+>
+  <SplitLayoutGlass.Root ratio={{ sidebar: 1, main: 2 }} minSidebarWidth="300px">
+    <SplitLayoutGlass.Sidebar>
+      <SplitLayoutGlass.SidebarHeader>
+        <h3>Items List</h3>
+        <SplitLayoutGlass.Trigger variant="menu" />
+      </SplitLayoutGlass.SidebarHeader>
+      <SplitLayoutGlass.SidebarContent scrollable>
+        {items.map((item) => (
+          <ItemRow key={item.id} item={item} />
+        ))}
+      </SplitLayoutGlass.SidebarContent>
+    </SplitLayoutGlass.Sidebar>
+    <SplitLayoutGlass.Main>
+      <SplitLayoutGlass.MainHeader>
+        <Breadcrumbs />
+      </SplitLayoutGlass.MainHeader>
+      <SplitLayoutGlass.MainContent>
+        <ItemDetail />
+      </SplitLayoutGlass.MainContent>
+      <SplitLayoutGlass.MainFooter>
+        <Actions />
+      </SplitLayoutGlass.MainFooter>
+    </SplitLayoutGlass.Main>
+  </SplitLayoutGlass.Root>
+</SplitLayoutGlass.Provider>
+```
+
+**Props (Provider):**
+
+| Prop                | Type                                  | Default  | Description                              |
+| ------------------- | ------------------------------------- | -------- | ---------------------------------------- |
+| selectedKey         | string \| null                        | -        | Controlled selected key (master-detail)  |
+| onSelectedKeyChange | (key: string \| null) => void         | -        | Selection change handler                 |
+| defaultSelectedKey  | string \| null                        | -        | Initial selected key                     |
+| open                | boolean                               | -        | Controlled sidebar open state            |
+| onOpenChange        | (open: boolean) => void               | -        | Open state change handler                |
+| defaultOpen         | boolean                               | true     | Initial sidebar open state               |
+| breakpoint          | 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' | 'md'     | Desktop layout breakpoint                |
+| mobileMode          | 'stack' \| 'accordion' \| 'drawer'    | 'stack'  | Mobile layout behavior                   |
+| intensity           | 'subtle' \| 'medium' \| 'strong'      | 'medium' | Glass blur intensity                     |
+| stickyOffset        | number                                | 24       | Sticky offset in pixels                  |
+| urlParamName        | string                                | -        | URL param name for selection persistence |
+| keyboardShortcut    | string \| false                       | 'b'      | Keyboard shortcut (Cmd/Ctrl + key)       |
+
+**Props (Root):**
+
+| Prop            | Type                                            | Default                     | Description                   |
+| --------------- | ----------------------------------------------- | --------------------------- | ----------------------------- |
+| ratio           | { sidebar: number; main: number }               | { sidebar: 1, main: 2 }     | Column ratio (1:2 = 33%/67%)  |
+| minSidebarWidth | string                                          | '300px'                     | Minimum sidebar width         |
+| maxSidebarWidth | string                                          | -                           | Maximum sidebar width         |
+| gap             | number \| { mobile?: number; desktop?: number } | { mobile: 16, desktop: 24 } | Gap between panels            |
+| breakpoint      | Breakpoint                                      | -                           | Overrides Provider breakpoint |
+| mobileLayout    | 'stack' \| 'main-only' \| 'sidebar-only'        | 'stack'                     | Mobile layout mode            |
+
+**Hook: useSplitLayout()**
+
+```tsx
+const {
+  selectedKey,
+  setSelectedKey,
+  isOpen,
+  setIsOpen,
+  isMobileOpen,
+  setMobileOpen,
+  isMobile,
+  toggle,
+  state,
+  toggleSidebar, // shadcn/ui alias
+} = useSplitLayout();
+```
+
 ---
 
 ### Level 5 - Sections (7)
@@ -1060,6 +1263,14 @@ avatar, stats, languages **Usage:**
 - **DropdownGlass** - Dropdown menus
 - **ButtonGlass** (asChild) - Link buttons
 - **SegmentedControlGlass** - Segmented buttons
+- **SidebarGlass** - Collapsible sidebar navigation (compound API)
+
+### Layouts
+
+- **SplitLayoutGlass** - Two-column responsive layout (compound API)
+- **SidebarGlass** - Sidebar with collapsible rail
+- **GlassCard** - Card containers
+- **ModalGlass** - Modal dialogs (compound API)
 
 ### Feedback
 
@@ -1105,6 +1316,10 @@ For AI assistants: Use Ctrl+F to search by keyword.
 - "avatar, profile, user" → AvatarGlass, ProfileAvatarGlass, ProfileHeaderGlass, UserInfoGlass
 - "badge, tag, label, status" → BadgeGlass, StatusIndicatorGlass
 - "tabs, navigation, switch" → TabsGlass, HeaderNavGlass, SegmentedControlGlass
+- "sidebar, drawer, collapsible, rail" → SidebarGlass
+- "split, two-column, layout, master-detail" → SplitLayoutGlass
+- "compound, compound component" → ModalGlass, TabsGlass, SidebarGlass, SplitLayoutGlass,
+  StepperGlass
 - "theme, dark mode" → ThemeProvider, ThemeToggleGlass, useTheme
 - "tooltip, hint, help" → TooltipGlass
 - "slider, range" → SliderGlass

package/docs/EXPORTS_MAP.json

@@ -2,10 +2,10 @@
   "$schema": "http://json-schema.org/draft-07/schema#",
   "title": "shadcn-glass-ui Exports Map",
   "description": "Machine-readable export structure for AI assistants and automated tools",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "library": "shadcn-glass-ui",
   "repository": "https://github.com/yhooi2/shadcn-glass-ui",
-  "lastUpdated": "2025-12-06",
+  "lastUpdated": "2025-12-17",
 
   "components": {
     "primitives": {
@@ -76,7 +76,15 @@
           "type": "component",
           "description": "Status badge with multiple variants",
           "props": "BadgeGlassProps",
-          "variants": ["default", "secondary", "destructive", "outline", "success", "warning", "info"],
+          "variants": [
+            "default",
+            "secondary",
+            "destructive",
+            "outline",
+            "success",
+            "warning",
+            "info"
+          ],
           "category": "display",
           "keywords": ["badge", "tag", "label", "status"],
           "shadcnCompatible": true
@@ -169,7 +177,18 @@
           "keywords": ["modal", "dialog", "overlay", "popup"],
           "shadcnCompatible": true,
           "compoundAPI": true,
-          "subComponents": ["Root", "Trigger", "Overlay", "Content", "Header", "Title", "Description", "Body", "Footer", "Close"]
+          "subComponents": [
+            "Root",
+            "Trigger",
+            "Overlay",
+            "Content",
+            "Header",
+            "Title",
+            "Description",
+            "Body",
+            "Footer",
+            "Close"
+          ]
         },
         {
           "name": "NotificationGlass",
@@ -245,6 +264,50 @@
           "category": "overlay",
           "keywords": ["tooltip", "hint", "help", "overlay"],
           "shadcnCompatible": true
+        },
+        {
+          "name": "SidebarGlass",
+          "path": "components/glass/ui/sidebar-glass",
+          "type": "component",
+          "description": "Collapsible sidebar navigation with glassmorphism styling (100% shadcn/ui compatible)",
+          "props": "SidebarGlassProps",
+          "category": "navigation",
+          "keywords": [
+            "sidebar",
+            "navigation",
+            "drawer",
+            "collapsible",
+            "menu",
+            "compound",
+            "rail"
+          ],
+          "shadcnCompatible": true,
+          "compoundAPI": true,
+          "subComponents": [
+            "Provider",
+            "Root",
+            "Header",
+            "Content",
+            "Footer",
+            "Rail",
+            "Inset",
+            "Trigger",
+            "Separator",
+            "Group",
+            "GroupLabel",
+            "GroupAction",
+            "GroupContent",
+            "Menu",
+            "MenuItem",
+            "MenuButton",
+            "MenuAction",
+            "MenuBadge",
+            "MenuSkeleton",
+            "MenuSub",
+            "MenuSubItem",
+            "MenuSubButton"
+          ],
+          "contains": ["ModalGlass", "GlassCard"]
         }
       ]
     },
@@ -525,6 +588,40 @@
           "category": "display",
           "keywords": ["year", "card", "timeline", "career"],
           "contains": ["GlassCard", "StatItemGlass"]
+        },
+        {
+          "name": "SplitLayoutGlass",
+          "path": "components/glass/composite/split-layout-glass",
+          "type": "component",
+          "description": "Two-column responsive layout with sticky scroll behavior and glassmorphism styling",
+          "props": "SplitLayoutGlassProps",
+          "category": "layout",
+          "keywords": [
+            "layout",
+            "split",
+            "sidebar",
+            "responsive",
+            "sticky",
+            "two-column",
+            "master-detail",
+            "compound"
+          ],
+          "compoundAPI": true,
+          "subComponents": [
+            "Provider",
+            "Root",
+            "Sidebar",
+            "SidebarHeader",
+            "SidebarContent",
+            "SidebarFooter",
+            "Main",
+            "MainHeader",
+            "MainContent",
+            "MainFooter",
+            "Trigger",
+            "Accordion"
+          ],
+          "contains": ["GlassCard", "ScrollArea"]
         }
       ]
     },
@@ -709,6 +806,24 @@
         "returns": "{ isDark: boolean; tintColor: string }",
         "category": "theming",
         "keywords": ["wallpaper", "tint", "color", "macos"]
+      },
+      {
+        "name": "useSplitLayout",
+        "path": "components/glass/composite/split-layout-glass",
+        "type": "hook",
+        "description": "Hook for accessing SplitLayoutGlass context (selectedKey, isOpen, isMobile, toggle, state)",
+        "returns": "SplitLayoutContextValue",
+        "category": "layout",
+        "keywords": ["split", "layout", "sidebar", "context", "state"]
+      },
+      {
+        "name": "useSidebar",
+        "path": "components/glass/ui/sidebar-glass",
+        "type": "hook",
+        "description": "Hook for accessing SidebarGlass context (100% shadcn/ui compatible)",
+        "returns": "SidebarContextValue",
+        "category": "navigation",
+        "keywords": ["sidebar", "context", "state", "collapsible"]
       }
     ]
   },
@@ -737,7 +852,15 @@
     ],
     "variants": {
       "AlertType": ["default", "destructive", "success", "warning"],
-      "BadgeVariant": ["default", "secondary", "destructive", "outline", "success", "warning", "info"],
+      "BadgeVariant": [
+        "default",
+        "secondary",
+        "destructive",
+        "outline",
+        "success",
+        "warning",
+        "info"
+      ],
       "NotificationType": ["default", "destructive", "success", "warning"],
       "SkeletonVariant": ["text", "circle", "rectangle"],
       "TooltipPosition": ["top", "bottom", "left", "right"],
@@ -779,21 +902,21 @@
   },
 
   "statistics": {
-    "totalComponents": 55,
+    "totalComponents": 57,
     "byLevel": {
       "primitives": 3,
-      "core": 18,
+      "core": 19,
       "atomic": 6,
       "specialized": 8,
-      "composite": 13,
+      "composite": 14,
       "sections": 7
     },
-    "totalTypes": 45,
-    "totalHooks": 4,
+    "totalTypes": 47,
+    "totalHooks": 6,
     "totalUtilities": 1,
-    "shadcnCompatible": 18,
+    "shadcnCompatible": 19,
     "supportsAsChild": 3,
-    "compoundAPI": 2
+    "compoundAPI": 4
   },
 
   "usage": {
@@ -814,7 +937,9 @@
         "MetricsGridGlass",
         "ProgressGlass",
         "BadgeGlass",
-        "HeaderNavGlass"
+        "HeaderNavGlass",
+        "SidebarGlass",
+        "SplitLayoutGlass"
       ],
       "forms": [
         "InputGlass",
@@ -833,7 +958,8 @@
         "RepositoryCardGlass",
         "TrustScoreCardGlass",
         "LanguageBarGlass"
-      ]
+      ],
+      "layouts": ["SplitLayoutGlass", "SidebarGlass", "GlassCard", "ModalGlass", "TabsGlass"]
     }
   },
 

package/docs/EXPORTS_STRUCTURE.md

@@ -101,8 +101,9 @@ Level 5: Sections (7)        → Complete page sections
 └──────────────────┬──────────────────────────┘
                    │
 ┌──────────────────▼──────────────────────────┐
-│ LEVEL 4: COMPOSITE (13 components)          │
-│ MetricCardGlass, AICardGlass, etc.          │
+│ LEVEL 4: COMPOSITE (14 components)          │
+│ MetricCardGlass, AICardGlass,               │
+│ SplitLayoutGlass, etc.                      │
 └──────────────────┬──────────────────────────┘
                    │
 ┌──────────────────▼──────────────────────────┐
@@ -116,8 +117,9 @@ Level 5: Sections (7)        → Complete page sections
 └──────────────────┬──────────────────────────┘
                    │
 ┌──────────────────▼──────────────────────────┐
-│ LEVEL 1: CORE UI (18 components)            │
-│ ButtonGlass, InputGlass, ModalGlass, etc.   │
+│ LEVEL 1: CORE UI (19 components)            │
+│ ButtonGlass, InputGlass, ModalGlass,        │
+│ SidebarGlass, etc.                          │
 └──────────────────┬──────────────────────────┘
                    │
 ┌──────────────────▼──────────────────────────┐
@@ -193,6 +195,12 @@ Primary building blocks for application interfaces. These are the most commonly
 | `SkeletonGlass`         | Loading skeleton            | `variant`, `width`, `height`                | text, circle, rectangle                                          |
 | `TooltipGlass`          | Tooltip overlay             | `content`, `position`, `children`           | top, bottom, left, right                                         |
 
+#### Navigation (1)
+
+| Export         | Description                    | Key Props                                      | shadcn/ui |
+| -------------- | ------------------------------ | ---------------------------------------------- | --------- |
+| `SidebarGlass` | Collapsible sidebar navigation | `side`, `variant`, `collapsible`, compound API | 100%      |
+
 **Import:**
 
 ```tsx
@@ -326,10 +334,16 @@ import { ProgressGlass, RainbowProgressGlass, SegmentedControlGlass } from 'shad
 
 ---
 
-### Level 4: Composite Components (13 components)
+### Level 4: Composite Components (14 components)
 
 Multi-component compositions that combine several elements.
 
+#### Layout (1)
+
+| Export             | Description                  | Contains              | Use Case                    |
+| ------------------ | ---------------------------- | --------------------- | --------------------------- |
+| `SplitLayoutGlass` | Two-column responsive layout | GlassCard, ScrollArea | Docs, dashboards, analytics |
+
 #### Metrics & Stats (4)
 
 | Export                     | Description                     | Contains                 | Use Case               |
@@ -546,7 +560,14 @@ console.log(THEME_CONFIG); // [{ name: 'glass', label: 'Glass' }, ...]
 ### React Hooks
 
 ```tsx
-import { useFocus, useHover, useResponsive, useWallpaperTint } from 'shadcn-glass-ui';
+import {
+  useFocus,
+  useHover,
+  useResponsive,
+  useWallpaperTint,
+  useSplitLayout,
+  useSidebar,
+} from 'shadcn-glass-ui';
 
 // Focus management
 function FocusExample() {
@@ -571,6 +592,18 @@ function WallpaperExample() {
   const { isDark, tintColor } = useWallpaperTint();
   return <div style={{ color: tintColor }}>Adaptive UI</div>;
 }
+
+// SplitLayoutGlass context
+function SplitLayoutExample() {
+  const { selectedKey, isOpen, isMobile, toggle } = useSplitLayout();
+  return <button onClick={toggle}>{isOpen ? 'Close' : 'Open'}</button>;
+}
+
+// SidebarGlass context (shadcn/ui compatible)
+function SidebarExample() {
+  const { state, toggleSidebar, isMobile } = useSidebar();
+  return <button onClick={toggleSidebar}>{state}</button>;
+}
 ```
 
 ### CVA Variants (Advanced)
@@ -688,10 +721,10 @@ import {
 ### Component Count by Level
 
 - **Level 0 (Primitives):** 3 components
-- **Level 1 (Core UI):** 18 components
+- **Level 1 (Core UI):** 19 components (including SidebarGlass)
 - **Level 2 (Atomic):** 7 components
 - **Level 3 (Specialized):** 10 components
-- **Level 4 (Composite):** 13 components
+- **Level 4 (Composite):** 14 components (including SplitLayoutGlass)
 - **Level 5 (Sections):** 7 components
 - **Total:** 57 components
 
@@ -700,9 +733,10 @@ import {
 - **Components:** 57 total
 - **Types:** 25+ prop types, 15+ variant types
 - **Utilities:** 1 function (`cn`)
-- **Hooks:** 4 custom hooks
+- **Hooks:** 6 custom hooks (including useSplitLayout, useSidebar)
 - **Theme:** 6 exports (provider, hook, constants, helpers)
 - **CVA Variants:** 15+ variant functions
+- **Compound Components:** ModalGlass, TabsGlass, SidebarGlass, SplitLayoutGlass, StepperGlass
 
 ### shadcn/ui Compatibility
 

package/docs/GETTING_STARTED.md

@@ -126,7 +126,7 @@ Create or update your `globals.css`:
 @tailwind utilities;
 
 /* Import shadcn-glass-ui styles (if using npm package) */
-@import 'shadcn-glass-ui/dist/styles.css';
+@import 'shadcn-glass-ui/styles.css';
 
 /* Or define variables manually */
 @layer base {

package/docs/REGISTRY_USAGE.md

@@ -313,7 +313,7 @@ npm install shadcn-glass-ui
 
 ```tsx
 import { ButtonGlass, InputGlass } from 'shadcn-glass-ui';
-import 'shadcn-glass-ui/dist/styles.css';
+import 'shadcn-glass-ui/styles.css';
 ```
 
 See [GETTING_STARTED.md](./GETTING_STARTED.md) for npm installation guide.

package/docs/api/README.md

@@ -97,7 +97,7 @@ npm install shadcn-glass-ui
 
 ```tsx
 import { ButtonGlass, InputGlass, ThemeProvider } from 'shadcn-glass-ui';
-import 'shadcn-glass-ui/dist/styles.css';
+import 'shadcn-glass-ui/styles.css';
 
 function App() {
   return (