even-toolkit 1.4.0 → 1.4.2

package/README.md

@@ -2,7 +2,7 @@
 
 Design system & component library for **Even Realities G2** smart glasses apps.
 
-55+ web components, 191 pixel-art icons, glasses SDK bridge, light/dark themes, and design tokens — all following the Even Realities 2025 UIUX Design Guidelines.
+55+ web components, 191 pixel-art icons, glasses SDK bridge with per-screen architecture, speech-to-text module, light/dark themes, and design tokens — all following the Even Realities 2025 UIUX Design Guidelines.
 
 **[Live Demo → even-demo.vercel.app](https://even-demo.vercel.app)**
 
@@ -12,6 +12,12 @@ Design system & component library for **Even Realities G2** smart glasses apps.
 npm install even-toolkit
 ```
 
+Scaffold a new app instantly:
+
+```bash
+npx create-even-app my-app
+```
+
 ## What's Inside
 
 ### `/web` — Web Component Library
@@ -24,7 +30,7 @@ import { Button, Card, NavBar, ListItem, Toggle, AppShell } from 'even-toolkit/w
 
 **Primitives:** Button, Card, Badge, Input, Textarea, Select, Checkbox, RadioGroup, Slider, InputGroup, Skeleton, Progress, StatusDot, Pill, Toggle, SegmentedControl, Table, Kbd, Divider
 
-**Layout:** AppShell, Page, NavBar, NavHeader, ScreenHeader, SectionHeader, SettingsGroup, CategoryFilter, ListItem (swipe-to-delete), SearchBar, Tag, TagCarousel, TagCard, SliderIndicator, PageIndicator, StepIndicator, Timeline, StatGrid, StatusProgress
+**Layout:** AppShell, Page, NavBar, NavHeader, SideDrawer, DrawerShell, DrawerTrigger, ScreenHeader, SectionHeader, SettingsGroup, CategoryFilter, ListItem (swipe-to-delete), SearchBar, Tag, TagCarousel, TagCard, SliderIndicator, PageIndicator, StepIndicator, Timeline, StatGrid, StatusProgress
 
 **Feedback:** TimerRing, Dialog, ConfirmDialog, Toast, EmptyState, Loading, BottomSheet, CTAGroup, ScrollPicker, DatePicker, TimePicker, SelectionPicker
 
@@ -44,38 +50,173 @@ import { IcChevronBack, IcTrash, IcSettings } from 'even-toolkit/web/icons/svg-i
 
 **Categories:** Edit & Settings (32), Feature & Function (50), Guide System (20), Menu Bar (8), Navigate (23), Status (54), Health (12)
 
-### `/glasses` — G2 Glasses SDK Bridge
+---
 
-Everything needed to render content on the G2 glasses display.
+## Glasses SDK
+
+Everything needed to build G2 glasses apps with a clean, per-screen architecture.
+
+### Per-Screen Architecture (v1.4)
+
+Each glasses screen lives in its own file with co-located display + action logic:
 
-```tsx
-import { useGlasses } from 'even-toolkit/useGlasses';
-import { line, separator } from 'even-toolkit/types';
-import { buildActionBar } from 'even-toolkit/action-bar';
+```
+src/glass/
+  shared.ts              — Snapshot type + actions interface
+  selectors.ts           — Screen router (3 lines of wiring)
+  splash.ts              — Splash image + loading text
+  AppGlasses.tsx         — useGlasses hook setup
+  screens/
+    home.ts              — { display, action }
+    detail.ts            — { display, action }
+    active.ts            — { display, action }
 ```
 
-**Core:** EvenHubBridge, useGlasses hook, useFlashPhase hook
+#### Define a screen
+
+```ts
+import type { GlassScreen } from 'even-toolkit/glass-screen-router';
+import { buildScrollableList } from 'even-toolkit/glass-display-builders';
+import { moveHighlight } from 'even-toolkit/glass-nav';
+
+export const homeScreen: GlassScreen<MySnapshot, MyActions> = {
+  display(snapshot, nav) {
+    return {
+      lines: buildScrollableList({
+        items: snapshot.items,
+        highlightedIndex: nav.highlightedIndex,
+        maxVisible: 5,
+        formatter: (item) => item.title,
+      }),
+    };
+  },
+
+  action(action, nav, snapshot, ctx) {
+    if (action.type === 'HIGHLIGHT_MOVE') {
+      return { ...nav, highlightedIndex: moveHighlight(nav.highlightedIndex, action.direction, snapshot.items.length - 1) };
+    }
+    if (action.type === 'SELECT_HIGHLIGHTED') {
+      ctx.navigate(`/item/${snapshot.items[nav.highlightedIndex].id}`);
+      return nav;
+    }
+    return nav;
+  },
+};
+```
 
-**Display:** DisplayData, DisplayLine, line(), separator(), text-utils, timer-display, canvas-renderer
+#### Wire screens together
 
-**Input:** action-map, gestures, keyboard bindings
+```ts
+import { createGlassScreenRouter } from 'even-toolkit/glass-screen-router';
+import { homeScreen } from './screens/home';
+import { detailScreen } from './screens/detail';
 
-**Layout:** 576x288px display, text/columns/chart/home page modes, image tiles
+export const { toDisplayData, onGlassAction } = createGlassScreenRouter({
+  'home': homeScreen,
+  'detail': detailScreen,
+}, 'home');
+```
 
-**Utilities:** splash screens, PNG encoding, text cleaning, pagination, keep-alive
+### Navigation Helpers (`glass-nav`)
 
-### Glasses Display Helpers
+```ts
+import { moveHighlight, clampIndex, calcMaxScroll, wrapIndex } from 'even-toolkit/glass-nav';
 
-```tsx
-import { glassHeader, line, separator } from 'even-toolkit/types';
+// Clamped movement (0 to max)
+moveHighlight(current, 'up', max)    // Math.max(0, Math.min(max, current - 1))
+moveHighlight(current, 'down', max)  // Math.max(0, Math.min(max, current + 1))
+
+// Clamp index to button count
+clampIndex(index, buttonCount)       // Math.min(Math.max(0, index), count - 1)
+
+// Max scroll offset
+calcMaxScroll(totalLines, slots)     // Math.max(0, totalLines - slots)
+
+// Wrapping movement (loops around)
+wrapIndex(current, 'down', count)    // (current + 1) % count
+```
+
+### Display Builders (`glass-display-builders`)
+
+```ts
+import {
+  buildScrollableList,
+  buildScrollableContent,
+  slidingWindowStart,
+  G2_TEXT_LINES,          // 10
+  DEFAULT_CONTENT_SLOTS,  // 7 (below glassHeader)
+} from 'even-toolkit/glass-display-builders';
+
+// Scrollable highlighted list with scroll indicators
+const lines = buildScrollableList({
+  items: recipes,
+  highlightedIndex: nav.highlightedIndex,
+  maxVisible: 5,
+  formatter: (r) => r.title,
+});
+
+// Header + scrollable content with indicators
+const display = buildScrollableContent({
+  title: 'Recipe Detail',
+  actionBar: buildStaticActionBar(['Start'], 0),
+  contentLines: ['Line 1', 'Line 2', ...],
+  scrollPos: nav.highlightedIndex,
+});
+```
+
+### Mode Encoding (`glass-mode`)
+
+Pack multiple navigation modes into a single `highlightedIndex`:
+
+```ts
+import { createModeEncoder } from 'even-toolkit/glass-mode';
+
+const mode = createModeEncoder({
+  buttons: 0,    // 0-99: button selection
+  scroll: 100,   // 100+: scroll mode (offset = index - 100)
+  links: 200,    // 200+: link navigation
+});
+
+mode.getMode(150)    // 'scroll'
+mode.getOffset(150)  // 50
+mode.encode('scroll', 25)  // 125
+```
+
+### Route Mapping (`glass-router`)
+
+```ts
+import { createScreenMapper, createIdExtractor, getHomeTiles } from 'even-toolkit/glass-router';
 
-// Header with separator
-lines.push(...glassHeader('MY APP'));
+const deriveScreen = createScreenMapper([
+  { pattern: '/', screen: 'home' },
+  { pattern: /^\/item\/[^/]+$/, screen: 'detail' },
+], 'home');
 
-// Header with action bar
-lines.push(...glassHeader('STEP 1/4', buildActionBar([...], 0, null, true)));
+const extractId = createIdExtractor(/^\/item\/([^/]+)/);
+const homeTiles = getHomeTiles(appSplash);
 ```
 
+### Core Glasses Modules
+
+```ts
+import { useGlasses } from 'even-toolkit/useGlasses';
+import { useFlashPhase } from 'even-toolkit/useFlashPhase';
+import { EvenHubBridge } from 'even-toolkit/bridge';
+import { line, separator, glassHeader } from 'even-toolkit/types';
+import { buildActionBar, buildStaticActionBar } from 'even-toolkit/action-bar';
+import { truncate, applyScrollIndicators } from 'even-toolkit/text-utils';
+import { renderTimerLines } from 'even-toolkit/timer-display';
+import { createSplash, TILE_PRESETS } from 'even-toolkit/splash';
+```
+
+**Display:** 576x288px, 10 text lines, text/columns/chart/home page modes, image tiles (max 288x144)
+
+**Input:** action-map (tap/double-tap/scroll events), gestures (debounce), keyboard bindings
+
+**Utilities:** splash screens, PNG encoding, text cleaning, pagination, keep-alive
+
+---
+
 ## Speech-to-Text (STT)
 
 Provider-agnostic speech-to-text module for voice input in G2 glasses apps.
@@ -130,9 +271,10 @@ Automatically detects the best audio source:
 - **Browser mic** — via `getUserMedia` (desktop)
 - Custom `AudioSource` — pass your own
 
+---
+
 ## SDK 0.0.9 Support
 
-- Container limit increased to 12 (8 text + 4 image)
 - Max image size: 288x144
 - IMU control: `bridge.imuEnable()` / `bridge.imuDisable()`
 - Launch source detection: `LaunchSource` type
@@ -174,10 +316,55 @@ Light theme following Even Realities 2025 guidelines:
 | Normal Subtitle | 13px | 400 | -0.13px |
 | Normal Detail | 11px | 400 | -0.11px |
 
-## Quick Start
+## Navigation Patterns
+
+### DrawerShell (recommended)
+
+Side drawer navigation with automatic hamburger/back-button detection, header context for nested screens, and `bottomItems` for pinned items like Settings.
+
+```tsx
+import { DrawerShell, useDrawerHeader } from 'even-toolkit/web';
+import type { SideDrawerItem } from 'even-toolkit/web';
+
+// In your shell/layout:
+const MENU_ITEMS: SideDrawerItem[] = [
+  { id: '/', label: 'Home', section: 'App' },
+];
+const BOTTOM_ITEMS: SideDrawerItem[] = [
+  { id: '/settings', label: 'Settings', section: 'App' },
+];
+
+function Shell() {
+  return (
+    <DrawerShell
+      items={MENU_ITEMS}
+      bottomItems={BOTTOM_ITEMS}
+      title="MyApp"
+      getPageTitle={(p) => p === '/' ? 'MyApp' : 'Page'}
+      deriveActiveId={(p) => p}
+    />
+  );
+}
+
+// In nested screens — customize the header:
+function DetailScreen() {
+  useDrawerHeader({
+    title: 'Detail',
+    backTo: '/',                        // shows back button instead of hamburger
+    right: <Button size="sm">Save</Button>,
+    below: <Progress value={50} />,     // below header (progress bars)
+    footer: <StepIndicator ... />,      // fixed bottom area
+    hidden: true,                       // hide header entirely
+  });
+  return <div>...</div>;
+}
+```
+
+### NavBar + AppShell (tab bar)
+
+Horizontal tab bar for simpler apps.
 
 ```tsx
-// App.tsx
 import { AppShell, NavBar, ScreenHeader, Button, Card } from 'even-toolkit/web';
 import type { NavItem } from 'even-toolkit/web';
 
@@ -200,7 +387,6 @@ export function App() {
 ```
 
 ```css
-/* app.css */
 @import "tailwindcss";
 @import "even-toolkit/web/theme-light.css";
 @import "even-toolkit/web/typography.css";

package/dist/web/components/drawer-shell.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+import type { SideDrawerItem } from './side-drawer';
+interface DrawerShellProps {
+    items: SideDrawerItem[];
+    bottomItems?: SideDrawerItem[];
+    title?: string;
+    footer?: ReactNode;
+    width?: number;
+    getPageTitle: (pathname: string) => string;
+    deriveActiveId: (pathname: string) => string;
+    isNestedRoute?: (pathname: string) => boolean;
+    getBackPath?: (pathname: string) => string;
+    backIcon?: ReactNode;
+    className?: string;
+}
+declare function DrawerShell({ items, bottomItems, title, footer, width, getPageTitle, deriveActiveId, isNestedRoute, getBackPath, backIcon, className, }: DrawerShellProps): import("react/jsx-runtime").JSX.Element;
+export { DrawerShell };
+export type { DrawerShellProps };
+//# sourceMappingURL=drawer-shell.d.ts.map

package/dist/web/components/drawer-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-shell.d.ts","sourceRoot":"","sources":["../../../web/components/drawer-shell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvE,OAAO,KAAK,EAAE,cAAc,EAAsB,MAAM,eAAe,CAAC;AAIxE,UAAU,gBAAgB;IACxB,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,cAAc,EAAE,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7C,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD,iBAAS,WAAW,CAAC,EACnB,KAAK,EACL,WAAW,EACX,KAAK,EACL,MAAM,EACN,KAAK,EACL,YAAY,EACZ,cAAc,EACd,aAAa,EACb,WAAW,EACX,QAA4B,EAC5B,SAAS,GACV,EAAE,gBAAgB,2CAgGlB;AAED,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,YAAY,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/web/components/drawer-shell.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from 'react';
+import { Outlet, useLocation, useNavigate } from 'react-router';
+import { SideDrawer, DrawerTrigger, DrawerHeaderContext } from './side-drawer';
+import { NavHeader } from './nav-header';
+import { Button } from './button';
+const DEFAULT_BACK_ICON = (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.5 15L7.5 10L12.5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+function DrawerShell({ items, bottomItems, title, footer, width, getPageTitle, deriveActiveId, isNestedRoute, getBackPath, backIcon = DEFAULT_BACK_ICON, className, }) {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    const [headerOverride, setHeaderOverride] = useState(null);
+    const handleNavigate = useCallback((id) => {
+        navigate(id);
+        setDrawerOpen(false);
+    }, [navigate]);
+    const allItemIds = useMemo(() => {
+        const ids = new Set(items.map((i) => i.id));
+        if (bottomItems)
+            bottomItems.forEach((i) => ids.add(i.id));
+        return ids;
+    }, [items, bottomItems]);
+    const pathname = location.pathname;
+    const activeId = deriveActiveId(pathname);
+    // Determine if nested: either explicit function or check if path matches any item id
+    const nested = isNestedRoute
+        ? isNestedRoute(pathname)
+        : !allItemIds.has(pathname);
+    // Resolve header values (screen overrides > defaults)
+    const headerTitle = headerOverride?.title ?? getPageTitle(pathname);
+    const headerHidden = headerOverride?.hidden ?? false;
+    const defaultLeft = nested
+        ? (_jsx(Button, { variant: "ghost", size: "icon", onClick: () => navigate(headerOverride?.backTo ?? getBackPath?.(pathname) ?? '/'), children: backIcon }))
+        : _jsx(DrawerTrigger, { onClick: () => setDrawerOpen(true) });
+    const headerLeft = headerOverride?.left ?? (headerOverride?.backTo
+        ? (_jsx(Button, { variant: "ghost", size: "icon", onClick: () => navigate(headerOverride.backTo), children: backIcon }))
+        : defaultLeft);
+    const headerRight = headerOverride?.right ?? undefined;
+    const headerBelow = headerOverride?.below ?? undefined;
+    const headerFooter = headerOverride?.footer ?? undefined;
+    // Context value
+    const ctxValue = useMemo(() => ({
+        setHeader: (config) => setHeaderOverride(config),
+        resetHeader: () => setHeaderOverride(null),
+    }), []);
+    return (_jsx(SideDrawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), onNavigate: handleNavigate, activeId: activeId, items: items, bottomItems: bottomItems, title: title, footer: footer, width: width, className: className, children: _jsx(DrawerHeaderContext.Provider, { value: ctxValue, children: _jsxs("div", { className: "flex flex-col h-full", children: [!headerHidden && (_jsxs("div", { className: "shrink-0", children: [_jsx(NavHeader, { title: headerTitle, left: headerLeft, right: headerRight }), headerBelow] })), _jsx("div", { className: "flex-1 overflow-y-auto min-h-0", children: _jsx(Outlet, {}) }), headerFooter && (_jsx("div", { className: "shrink-0", children: headerFooter }))] }) }) }));
+}
+export { DrawerShell };
+//# sourceMappingURL=drawer-shell.js.map

package/dist/web/components/drawer-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-shell.js","sourceRoot":"","sources":["../../../web/components/drawer-shell.tsx"],"names":[],"mappings":"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"}

package/dist/web/components/side-drawer.d.ts

@@ -0,0 +1,43 @@
+import { type ReactNode } from 'react';
+interface SideDrawerItem {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    section?: string;
+}
+interface SideDrawerProps {
+    open: boolean;
+    onClose: () => void;
+    onNavigate: (id: string) => void;
+    activeId: string;
+    items: SideDrawerItem[];
+    bottomItems?: SideDrawerItem[];
+    title?: string;
+    footer?: ReactNode;
+    children: ReactNode;
+    width?: number;
+    className?: string;
+}
+declare function SideDrawer({ open, onClose, onNavigate, activeId, items, bottomItems, title, footer, children, width, className, }: SideDrawerProps): import("react/jsx-runtime").JSX.Element;
+declare function DrawerTrigger({ onClick, className }: {
+    onClick: () => void;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+interface DrawerHeaderConfig {
+    title?: string;
+    left?: ReactNode;
+    right?: ReactNode;
+    below?: ReactNode;
+    footer?: ReactNode;
+    backTo?: string;
+    hidden?: boolean;
+}
+interface DrawerHeaderContextValue {
+    setHeader: (config: DrawerHeaderConfig) => void;
+    resetHeader: () => void;
+}
+declare const DrawerHeaderContext: import("react").Context<DrawerHeaderContextValue | null>;
+declare function useDrawerHeader(config: DrawerHeaderConfig): void;
+export { SideDrawer, DrawerTrigger, DrawerHeaderContext, useDrawerHeader };
+export type { SideDrawerProps, SideDrawerItem, DrawerHeaderConfig, DrawerHeaderContextValue };
+//# sourceMappingURL=side-drawer.d.ts.map

package/dist/web/components/side-drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-drawer.d.ts","sourceRoot":"","sources":["../../../web/components/side-drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyF,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK9H,UAAU,cAAc;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,eAAe;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,cAAc,EAAE,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA8DD,iBAAS,UAAU,CAAC,EAClB,IAAI,EACJ,OAAO,EACP,UAAU,EACV,QAAQ,EACR,KAAK,EACL,WAAW,EACX,KAAK,EACL,MAAM,EACN,QAAQ,EACR,KAAqB,EACrB,SAAS,GACV,EAAE,eAAe,2CAsFjB;AAID,iBAAS,aAAa,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE;IAAE,OAAO,EAAE,MAAM,IAAI,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAgBzF;AAID,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,wBAAwB;IAChC,SAAS,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAChD,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,QAAA,MAAM,mBAAmB,0DAAuD,CAAC;AAEjF,iBAAS,eAAe,CAAC,MAAM,EAAE,kBAAkB,GAAG,IAAI,CAiBzD;AAED,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,mBAAmB,EAAE,eAAe,EAAE,CAAC;AAC3E,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,CAAC"}

package/dist/web/components/side-drawer.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo } from 'react';
+import { cn } from '../utils/cn';
+/* ── Constants ── */
+const DEFAULT_WIDTH = 280;
+const SHIFT_EXTRA = 20;
+const MAIN_SCALE = 0.985;
+const TRANSITION = 'transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border-radius 300ms ease';
+const SIDEBAR_TRANSITION = 'transform 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms ease';
+/* ── Shared item renderer ── */
+function renderItemSection(sectionName, sectionItems, activeId, onNavigate) {
+    return (_jsxs("div", { children: [sectionName && (_jsx("div", { className: "px-3 pt-4 pb-1.5", children: _jsx("span", { className: "text-[11px] tracking-[-0.11px] text-text-dim font-normal uppercase", children: sectionName }) })), sectionItems.map((item) => {
+                const isActive = activeId === item.id || (item.id !== '/' && activeId.startsWith(item.id));
+                return (_jsxs("button", { onClick: () => onNavigate(item.id), className: cn('w-full flex items-center gap-3 px-3 h-11 rounded-[6px] mb-0.5 text-left cursor-pointer border-none', 'transition-colors', isActive
+                        ? 'bg-surface-light text-accent'
+                        : 'text-text hover:bg-surface-light/50'), children: [item.icon && _jsx("span", { className: "shrink-0 w-5 flex items-center justify-center", children: item.icon }), _jsx("span", { className: "text-[15px] tracking-[-0.15px] font-normal", children: item.label })] }, item.id));
+            })] }, sectionName || '__default'));
+}
+function groupBySection(items) {
+    const sections = new Map();
+    for (const item of items) {
+        const key = item.section ?? '';
+        if (!sections.has(key))
+            sections.set(key, []);
+        sections.get(key).push(item);
+    }
+    return sections;
+}
+/* ── SideDrawer ── */
+function SideDrawer({ open, onClose, onNavigate, activeId, items, bottomItems, title, footer, children, width = DEFAULT_WIDTH, className, }) {
+    // Close on Escape key
+    useEffect(() => {
+        if (!open)
+            return;
+        const handler = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        document.addEventListener('keydown', handler);
+        return () => document.removeEventListener('keydown', handler);
+    }, [open, onClose]);
+    const shift = width + SHIFT_EXTRA;
+    const sections = groupBySection(items);
+    const bottomSections = bottomItems ? groupBySection(bottomItems) : null;
+    return (_jsxs("div", { className: cn('relative h-dvh w-full overflow-hidden bg-bg', className), children: [_jsxs("div", { className: "absolute top-0 left-0 bottom-0 flex flex-col bg-bg z-0", style: {
+                    width: `${width}px`,
+                    transform: open ? 'translateX(0)' : `translateX(-${width * 0.3}px)`,
+                    opacity: open ? 1 : 0,
+                    transition: SIDEBAR_TRANSITION,
+                    pointerEvents: open ? 'auto' : 'none',
+                }, children: [title && (_jsx("div", { className: "shrink-0 px-4 pt-4 pb-3", children: _jsx("span", { className: "text-[20px] tracking-[-0.6px] font-normal text-text", children: title }) })), _jsx("div", { className: "flex-1 overflow-y-auto px-2 py-1", children: [...sections.entries()].map(([name, items]) => renderItemSection(name, items, activeId, onNavigate)) }), bottomSections && (_jsx("div", { className: "shrink-0 border-t border-border px-2 py-1", children: [...bottomSections.entries()].map(([name, items]) => renderItemSection(name, items, activeId, onNavigate)) })), footer && (_jsx("div", { className: cn('shrink-0 px-2 py-2', !bottomSections && 'border-t border-border'), children: footer }))] }), _jsxs("div", { className: "relative h-full w-full z-[1] bg-bg overflow-hidden", style: {
+                    transform: open
+                        ? `translateX(${shift}px) scale(${MAIN_SCALE})`
+                        : 'translateX(0) scale(1)',
+                    borderRadius: open ? '16px' : '0px',
+                    transition: TRANSITION,
+                    transformOrigin: 'left center',
+                }, children: [children, _jsx("div", { onClick: onClose, className: "absolute inset-0 bg-black cursor-pointer z-[2]", style: {
+                            opacity: open ? 0.45 : 0,
+                            pointerEvents: open ? 'auto' : 'none',
+                            transition: 'opacity 300ms ease',
+                        } })] })] }));
+}
+/* ── DrawerTrigger (hamburger button) ── */
+function DrawerTrigger({ onClick, className }) {
+    return (_jsx("button", { onClick: onClick, className: cn('flex items-center justify-center w-9 h-9 rounded-[6px] cursor-pointer border-none bg-transparent', 'text-text hover:bg-surface-light transition-colors', className), "aria-label": "Open menu", children: _jsx("svg", { width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M1 1h16M1 7h16M1 13h16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) }));
+}
+const DrawerHeaderContext = createContext(null);
+function useDrawerHeader(config) {
+    const ctx = useContext(DrawerHeaderContext);
+    const configRef = useMemo(() => config, [
+        config.title,
+        config.left,
+        config.right,
+        config.below,
+        config.footer,
+        config.backTo,
+        config.hidden,
+    ]);
+    useLayoutEffect(() => {
+        if (!ctx)
+            return;
+        ctx.setHeader(configRef);
+        return () => ctx.resetHeader();
+    }, [ctx, configRef]);
+}
+export { SideDrawer, DrawerTrigger, DrawerHeaderContext, useDrawerHeader };
+//# sourceMappingURL=side-drawer.js.map

package/dist/web/components/side-drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-drawer.js","sourceRoot":"","sources":["../../../web/components/side-drawer.tsx"],"names":[],"mappings":"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"}

package/dist/web/index.d.ts

@@ -102,6 +102,10 @@ export { AudioPlayer } from './components/audio-player';
 export type { AudioPlayerProps } from './components/audio-player';
 export { AppShell } from './components/app-shell';
 export type { AppShellProps } from './components/app-shell';
+export { SideDrawer, DrawerTrigger, DrawerHeaderContext, useDrawerHeader } from './components/side-drawer';
+export type { SideDrawerProps, SideDrawerItem, DrawerHeaderConfig, DrawerHeaderContextValue } from './components/side-drawer';
+export { DrawerShell } from './components/drawer-shell';
+export type { DrawerShellProps } from './components/drawer-shell';
 export { ScrollPicker, DatePicker, TimePicker, SelectionPicker } from './components/scroll-picker';
 export type { ScrollPickerProps, ScrollColumn, DatePickerProps, TimePickerProps, SelectionPickerProps } from './components/scroll-picker';
 //# sourceMappingURL=index.d.ts.map

package/dist/web/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../web/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../web/index.ts"],"names":[],"mappings":"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"}

package/dist/web/index.js

@@ -64,6 +64,8 @@ export { ImageGrid, ImageViewer } from './components/image-viewer';
 export { AudioPlayer } from './components/audio-player';
 // App Shell
 export { AppShell } from './components/app-shell';
+export { SideDrawer, DrawerTrigger, DrawerHeaderContext, useDrawerHeader } from './components/side-drawer';
+export { DrawerShell } from './components/drawer-shell';
 // Scroll Picker
 export { ScrollPicker, DatePicker, TimePicker, SelectionPicker } from './components/scroll-picker';
 //# sourceMappingURL=index.js.map

package/dist/web/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../web/index.ts"],"names":[],"mappings":"AAAA,sEAAsE;AAEtE,QAAQ;AACR,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAEhC,QAAQ;AACR,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAEhF,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAE7E,aAAa;AACb,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAG7D,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGvD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAG1D,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAG3C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGpD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAGzC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAGlE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEnG,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAGvC,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAGhE,sBAAsB;AACtB,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAG9C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAGzC,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAG1D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAG5D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAG5D,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAG9D,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAGlD,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGpD,qBAAqB;AACrB,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGpD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAG1D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAGtD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,8CAA8C;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGpD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGxD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAGlD,OAAO,EAAE,GAAG,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAG7D,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAGxE,oCAAoC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAGtD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAGnE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAGtD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAG5D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAG5D,+BAA+B;AAC/B,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAGtJ,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAGxF,+BAA+B;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAGlD,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAG9D,0BAA0B;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAGtD,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAG1E,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGnE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGxD,YAAY;AACZ,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAGlD,gBAAgB;AAChB,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../web/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "even-toolkit",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "Design system & component library for Even Realities G2 smart glasses apps — 55+ web components, 191 pixel-art icons, glasses SDK bridge, and design tokens.",
   "type": "module",
   "main": "./dist/glasses/index.js",

package/web/components/drawer-shell.tsx

@@ -0,0 +1,139 @@
+import { useState, useCallback, useMemo, type ReactNode } from 'react';
+import { Outlet, useLocation, useNavigate } from 'react-router';
+import { SideDrawer, DrawerTrigger, DrawerHeaderContext } from './side-drawer';
+import type { SideDrawerItem, DrawerHeaderConfig } from './side-drawer';
+import { NavHeader } from './nav-header';
+import { Button } from './button';
+
+interface DrawerShellProps {
+  items: SideDrawerItem[];
+  bottomItems?: SideDrawerItem[];
+  title?: string;
+  footer?: ReactNode;
+  width?: number;
+  getPageTitle: (pathname: string) => string;
+  deriveActiveId: (pathname: string) => string;
+  isNestedRoute?: (pathname: string) => boolean;
+  getBackPath?: (pathname: string) => string;
+  backIcon?: ReactNode;
+  className?: string;
+}
+
+const DEFAULT_BACK_ICON = (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12.5 15L7.5 10L12.5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+function DrawerShell({
+  items,
+  bottomItems,
+  title,
+  footer,
+  width,
+  getPageTitle,
+  deriveActiveId,
+  isNestedRoute,
+  getBackPath,
+  backIcon = DEFAULT_BACK_ICON,
+  className,
+}: DrawerShellProps) {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [headerOverride, setHeaderOverride] = useState<DrawerHeaderConfig | null>(null);
+
+  const handleNavigate = useCallback((id: string) => {
+    navigate(id);
+    setDrawerOpen(false);
+  }, [navigate]);
+
+  const allItemIds = useMemo(() => {
+    const ids = new Set(items.map((i) => i.id));
+    if (bottomItems) bottomItems.forEach((i) => ids.add(i.id));
+    return ids;
+  }, [items, bottomItems]);
+
+  const pathname = location.pathname;
+  const activeId = deriveActiveId(pathname);
+
+  // Determine if nested: either explicit function or check if path matches any item id
+  const nested = isNestedRoute
+    ? isNestedRoute(pathname)
+    : !allItemIds.has(pathname);
+
+  // Resolve header values (screen overrides > defaults)
+  const headerTitle = headerOverride?.title ?? getPageTitle(pathname);
+  const headerHidden = headerOverride?.hidden ?? false;
+
+  const defaultLeft = nested
+    ? (
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => navigate(headerOverride?.backTo ?? getBackPath?.(pathname) ?? '/')}
+        >
+          {backIcon}
+        </Button>
+      )
+    : <DrawerTrigger onClick={() => setDrawerOpen(true)} />;
+
+  const headerLeft = headerOverride?.left ?? (headerOverride?.backTo
+    ? (
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => navigate(headerOverride.backTo!)}
+        >
+          {backIcon}
+        </Button>
+      )
+    : defaultLeft);
+
+  const headerRight = headerOverride?.right ?? undefined;
+  const headerBelow = headerOverride?.below ?? undefined;
+  const headerFooter = headerOverride?.footer ?? undefined;
+
+  // Context value
+  const ctxValue = useMemo(() => ({
+    setHeader: (config: DrawerHeaderConfig) => setHeaderOverride(config),
+    resetHeader: () => setHeaderOverride(null),
+  }), []);
+
+  return (
+    <SideDrawer
+      open={drawerOpen}
+      onClose={() => setDrawerOpen(false)}
+      onNavigate={handleNavigate}
+      activeId={activeId}
+      items={items}
+      bottomItems={bottomItems}
+      title={title}
+      footer={footer}
+      width={width}
+      className={className}
+    >
+      <DrawerHeaderContext.Provider value={ctxValue}>
+        <div className="flex flex-col h-full">
+          {!headerHidden && (
+            <div className="shrink-0">
+              <NavHeader title={headerTitle} left={headerLeft} right={headerRight} />
+              {headerBelow}
+            </div>
+          )}
+          <div className="flex-1 overflow-y-auto min-h-0">
+            <Outlet />
+          </div>
+          {headerFooter && (
+            <div className="shrink-0">
+              {headerFooter}
+            </div>
+          )}
+        </div>
+      </DrawerHeaderContext.Provider>
+    </SideDrawer>
+  );
+}
+
+export { DrawerShell };
+export type { DrawerShellProps };

package/web/components/side-drawer.tsx

@@ -0,0 +1,246 @@
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useState, type ReactNode } from 'react';
+import { cn } from '../utils/cn';
+
+/* ── Types ── */
+
+interface SideDrawerItem {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+  section?: string;
+}
+
+interface SideDrawerProps {
+  open: boolean;
+  onClose: () => void;
+  onNavigate: (id: string) => void;
+  activeId: string;
+  items: SideDrawerItem[];
+  bottomItems?: SideDrawerItem[];
+  title?: string;
+  footer?: ReactNode;
+  children: ReactNode;
+  width?: number;
+  className?: string;
+}
+
+/* ── Constants ── */
+
+const DEFAULT_WIDTH = 280;
+const SHIFT_EXTRA = 20;
+const MAIN_SCALE = 0.985;
+const TRANSITION = 'transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border-radius 300ms ease';
+const SIDEBAR_TRANSITION = 'transform 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms ease';
+
+/* ── Shared item renderer ── */
+
+function renderItemSection(
+  sectionName: string,
+  sectionItems: SideDrawerItem[],
+  activeId: string,
+  onNavigate: (id: string) => void,
+) {
+  return (
+    <div key={sectionName || '__default'}>
+      {sectionName && (
+        <div className="px-3 pt-4 pb-1.5">
+          <span className="text-[11px] tracking-[-0.11px] text-text-dim font-normal uppercase">
+            {sectionName}
+          </span>
+        </div>
+      )}
+      {sectionItems.map((item) => {
+        const isActive = activeId === item.id || (item.id !== '/' && activeId.startsWith(item.id));
+        return (
+          <button
+            key={item.id}
+            onClick={() => onNavigate(item.id)}
+            className={cn(
+              'w-full flex items-center gap-3 px-3 h-11 rounded-[6px] mb-0.5 text-left cursor-pointer border-none',
+              'transition-colors',
+              isActive
+                ? 'bg-surface-light text-accent'
+                : 'text-text hover:bg-surface-light/50',
+            )}
+          >
+            {item.icon && <span className="shrink-0 w-5 flex items-center justify-center">{item.icon}</span>}
+            <span className="text-[15px] tracking-[-0.15px] font-normal">{item.label}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+function groupBySection(items: SideDrawerItem[]): Map<string, SideDrawerItem[]> {
+  const sections = new Map<string, SideDrawerItem[]>();
+  for (const item of items) {
+    const key = item.section ?? '';
+    if (!sections.has(key)) sections.set(key, []);
+    sections.get(key)!.push(item);
+  }
+  return sections;
+}
+
+/* ── SideDrawer ── */
+
+function SideDrawer({
+  open,
+  onClose,
+  onNavigate,
+  activeId,
+  items,
+  bottomItems,
+  title,
+  footer,
+  children,
+  width = DEFAULT_WIDTH,
+  className,
+}: SideDrawerProps) {
+  // Close on Escape key
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [open, onClose]);
+
+  const shift = width + SHIFT_EXTRA;
+  const sections = groupBySection(items);
+  const bottomSections = bottomItems ? groupBySection(bottomItems) : null;
+
+  return (
+    <div className={cn('relative h-dvh w-full overflow-hidden bg-bg', className)}>
+      {/* Sidebar panel */}
+      <div
+        className="absolute top-0 left-0 bottom-0 flex flex-col bg-bg z-0"
+        style={{
+          width: `${width}px`,
+          transform: open ? 'translateX(0)' : `translateX(-${width * 0.3}px)`,
+          opacity: open ? 1 : 0,
+          transition: SIDEBAR_TRANSITION,
+          pointerEvents: open ? 'auto' : 'none',
+        }}
+      >
+        {/* Header */}
+        {title && (
+          <div className="shrink-0 px-4 pt-4 pb-3">
+            <span className="text-[20px] tracking-[-0.6px] font-normal text-text">{title}</span>
+          </div>
+        )}
+
+        {/* Menu items */}
+        <div className="flex-1 overflow-y-auto px-2 py-1">
+          {[...sections.entries()].map(([name, items]) =>
+            renderItemSection(name, items, activeId, onNavigate),
+          )}
+        </div>
+
+        {/* Bottom items */}
+        {bottomSections && (
+          <div className="shrink-0 border-t border-border px-2 py-1">
+            {[...bottomSections.entries()].map(([name, items]) =>
+              renderItemSection(name, items, activeId, onNavigate),
+            )}
+          </div>
+        )}
+
+        {/* Footer */}
+        {footer && (
+          <div className={cn('shrink-0 px-2 py-2', !bottomSections && 'border-t border-border')}>
+            {footer}
+          </div>
+        )}
+      </div>
+
+      {/* Main content */}
+      <div
+        className="relative h-full w-full z-[1] bg-bg overflow-hidden"
+        style={{
+          transform: open
+            ? `translateX(${shift}px) scale(${MAIN_SCALE})`
+            : 'translateX(0) scale(1)',
+          borderRadius: open ? '16px' : '0px',
+          transition: TRANSITION,
+          transformOrigin: 'left center',
+        }}
+      >
+        {children}
+
+        {/* Dark overlay */}
+        <div
+          onClick={onClose}
+          className="absolute inset-0 bg-black cursor-pointer z-[2]"
+          style={{
+            opacity: open ? 0.45 : 0,
+            pointerEvents: open ? 'auto' : 'none',
+            transition: 'opacity 300ms ease',
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+/* ── DrawerTrigger (hamburger button) ── */
+
+function DrawerTrigger({ onClick, className }: { onClick: () => void; className?: string }) {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        'flex items-center justify-center w-9 h-9 rounded-[6px] cursor-pointer border-none bg-transparent',
+        'text-text hover:bg-surface-light transition-colors',
+        className,
+      )}
+      aria-label="Open menu"
+    >
+      <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M1 1h16M1 7h16M1 13h16" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+      </svg>
+    </button>
+  );
+}
+
+/* ── Drawer Header Context ── */
+
+interface DrawerHeaderConfig {
+  title?: string;
+  left?: ReactNode;
+  right?: ReactNode;
+  below?: ReactNode;
+  footer?: ReactNode;
+  backTo?: string;
+  hidden?: boolean;
+}
+
+interface DrawerHeaderContextValue {
+  setHeader: (config: DrawerHeaderConfig) => void;
+  resetHeader: () => void;
+}
+
+const DrawerHeaderContext = createContext<DrawerHeaderContextValue | null>(null);
+
+function useDrawerHeader(config: DrawerHeaderConfig): void {
+  const ctx = useContext(DrawerHeaderContext);
+  const configRef = useMemo(() => config, [
+    config.title,
+    config.left,
+    config.right,
+    config.below,
+    config.footer,
+    config.backTo,
+    config.hidden,
+  ]);
+
+  useLayoutEffect(() => {
+    if (!ctx) return;
+    ctx.setHeader(configRef);
+    return () => ctx.resetHeader();
+  }, [ctx, configRef]);
+}
+
+export { SideDrawer, DrawerTrigger, DrawerHeaderContext, useDrawerHeader };
+export type { SideDrawerProps, SideDrawerItem, DrawerHeaderConfig, DrawerHeaderContextValue };

package/web/index.ts

@@ -167,6 +167,12 @@ export type { AudioPlayerProps } from './components/audio-player';
 export { AppShell } from './components/app-shell';
 export type { AppShellProps } from './components/app-shell';
 
+export { SideDrawer, DrawerTrigger, DrawerHeaderContext, useDrawerHeader } from './components/side-drawer';
+export type { SideDrawerProps, SideDrawerItem, DrawerHeaderConfig, DrawerHeaderContextValue } from './components/side-drawer';
+
+export { DrawerShell } from './components/drawer-shell';
+export type { DrawerShellProps } from './components/drawer-shell';
+
 // Scroll Picker
 export { ScrollPicker, DatePicker, TimePicker, SelectionPicker } from './components/scroll-picker';
 export type { ScrollPickerProps, ScrollColumn, DatePickerProps, TimePickerProps, SelectionPickerProps } from './components/scroll-picker';