@stevederico/skateboard-ui 3.0.1 → 3.6.0

package/App.jsx

@@ -8,21 +8,21 @@ import {
   useNavigate,
 } from 'react-router-dom';
 import { useEffect } from 'react';
-import { getState } from './core/Context.jsx';
-import { ThemeProvider } from './core/ThemeProvider.jsx';
-import Layout from './layout/Layout.jsx';
-import LandingView from './views/LandingView.jsx';
-import TextView from './views/TextView.jsx';
-import SignUpView from './views/SignUpView.jsx';
-import SignInView from './views/SignInView.jsx';
-import SignOutView from './views/SignOutView.jsx';
-import PaymentView from './views/PaymentView.jsx';
-import SettingsView from './views/SettingsView.jsx';
-import NotFound from './views/NotFound.jsx';
+import { getState } from './components/core/Context.jsx';
+import { ThemeProvider } from './components/core/ThemeProvider.jsx';
+import Layout from './components/layout/Layout.jsx';
+import LandingView from './components/views/LandingView.jsx';
+import TextView from './components/views/TextView.jsx';
+import SignUpView from './components/views/SignUpView.jsx';
+import SignInView from './components/views/SignInView.jsx';
+import SignOutView from './components/views/SignOutView.jsx';
+import PaymentView from './components/views/PaymentView.jsx';
+import SettingsView from './components/views/SettingsView.jsx';
+import NotFound from './components/views/NotFound.jsx';
 import ProtectedRoute from './components/ProtectedRoute.jsx';
 import ErrorBoundary from './components/ErrorBoundary.jsx';
-import { useAppSetup, initializeUtilities, validateConstants } from './core/Utilities.js';
-import { ContextProvider } from './core/Context.jsx';
+import { useAppSetup, initializeUtilities, validateConstants } from './components/core/Utilities.js';
+import { ContextProvider } from './components/core/Context.jsx';
 import AuthOverlay from './components/AuthOverlay.jsx';
 
 /**

package/CHANGELOG.md

@@ -1,5 +1,74 @@
 # CHANGELOG
 
+3.6.0
+
+  Internal reorganization (no dep changes, no consumer API changes)
+  Move core/ → components/core/ (Calendar, Command, Context, DynamicIcon, ThemeProvider, Utilities)
+  Move layout/ → components/layout/ (Header, Layout, Sidebar, TabBar)
+  Move views/ → components/views/ (Landing, SignIn/Up/Out, Settings, Payment, Text, NotFound)
+  Delete empty src/shims/
+  Collapses 4 top-level dirs to 1; everything user-facing now lives under components/
+  package.json exports field updated to point to new internal paths — consumers continue to import via the same '@stevederico/skateboard-ui/X' names with no changes
+  files allowlist trimmed: core/, layout/, views/ removed (folded into components/)
+
+3.5.0
+
+  Drop @base-ui/react dep — zero runtime npm deps
+  Vendor @base-ui/react@1.4.1 as pre-bundled ESM at shadcn/lib/base-ui/ (28 entry points + shared chunks via bun build code-splitting)
+  All 5 transitive deps absorbed: @floating-ui/react-dom, @floating-ui/utils, @babel/runtime, use-sync-external-store, @base-ui/utils
+  React, React-DOM, react/jsx-runtime stay external as peer-resolved imports
+
+  Rewrite shadcn/ui/*.jsx imports: @base-ui/react/X → ../lib/base-ui/X.js (32 files)
+  Add scripts/vendor-base-ui.js (re-run after bumping BASE_UI_VERSION; requires bun)
+  Tree-shaking preserved: bun's splitting puts shared floating-ui/utils code in _chunk-*.js files referenced by primitives that need them
+
+  package.json dependencies block removed entirely — only peerDependencies remain
+  Consumers see zero npm packages pulled in by skateboard-ui on install
+
+3.4.0
+
+  Drop vaul dep
+  Drawer now uses @base-ui/react Dialog as the modal shell with vaul's drag-to-dismiss gesture logic ported into shadcn/ui/drawer.jsx (MIT — Emil Kowalski)
+  Single hard dep tree on @base-ui/react (removes vaul + 14 transitive @radix-ui/* packages)
+
+  Behavior preserved: open/close via open + onOpenChange, slide-up entrance, fade backdrop, click-outside, Escape, focus trap, drag-handle pill, swipe-down-to-dismiss with velocity + 25%-height thresholds
+  Behavior dropped (unused by Sheet/UpgradeSheet): multi-direction (top/left/right), snap points, nested drawers, scale-background, backdrop opacity fade during drag
+
+  shouldDrag gate ported from vaul: skips when content is scrolled mid-list, when text is selected, on <select>, or under [data-no-drag]
+  Sheet.jsx and UpgradeSheet.jsx consume the same Drawer API — no consumer changes
+
+3.3.0
+
+  Drop Chart component
+  Drop recharts peer dep
+
+  If you used Chart, install recharts directly in your app and import its primitives from there.
+
+3.2.1
+
+  Fix SidebarMenuButton outline variant shadow — tokens are oklch so wrapping in hsl() produced invalid CSS and the browser dropped the shadow. Port of upstream shadcn-ui f454f6e.
+
+3.2.0
+
+  Vendor tailwind-merge
+  Drop tailwind-merge dep
+  Add scripts/vendor-tailwind-merge.js (re-run on version bumps to track new Tailwind releases)
+
+3.1.0
+
+  Drop Carousel component
+  Drop embla-carousel-react peer dep
+  Drop Resizable component
+  Drop react-resizable-panels peer dep
+  Drop use-sync-external-store direct dep (@base-ui/react ^1.5.0 owns it transitively)
+
+  If you used these, import directly from embla-carousel-react / react-resizable-panels in your app
+
+3.0.2
+
+  Exclude .claude from npm tarball
+  Add files allowlist to package.json
+
 3.0.1
 
   Move vaul back to deps

package/README.md

@@ -2,6 +2,8 @@
 
 React component library for rapid application development. Built with TailwindCSS v4 and shadcn/ui.
 
+**Zero runtime npm dependencies.** Only React, React-DOM, and React Router are peer-resolved. Everything else — base-ui primitives, lucide icons, tailwind-merge, drag physics, command palette, date picker, theme provider — is vendored, ported, or recreated inside the repo.
+
 ## Installation
 
 ```bash
@@ -31,26 +33,52 @@ That's it! You get routing, auth, layout, landing page, settings, and payments.
 
 ## Dependency Footprint
 
-skateboard-ui v3.0 was a major slimming pass — most utility libraries are now recreated in-house, and single-purpose component libs are opt-in.
+Across the v3.x series, every npm runtime dep was either vendored, recreated, or dropped. v3.5 finished the job by vendoring `@base-ui/react`.
 
 | | Hard deps | Optional peer deps | Total |
 |---|---|---|---|
 | Before (v2.23) | 15 | 0 | 15 |
-| **Now (v3.0)** | **3** | **4** | **7** |
-
-**Hard deps that stayed:** `@base-ui/react` (popover/dropdown primitives — replacing it means rewriting floating-ui math), `tailwind-merge` (encodes Tailwind class precedence — the brain behind `cn()`), `use-sync-external-store` (React polyfill).
-
-**Removed entirely** by recreating, vendoring, or inlining:
-- `lucide-react` → 1700+ icons vendored at `icons/` via `scripts/vendor-icons.js`
-- `cmdk` → recreated as `core/Command.jsx`
-- `react-day-picker` → recreated as `core/Calendar.jsx`
-- `next-themes` → recreated as `core/ThemeProvider.jsx`
-- `class-variance-authority` → recreated as `shadcn/lib/cva.js`
-- `clsx` → recreated as `shadcn/lib/clsx.js`
-- `tailwindcss-animate` → inlined as plain CSS in `styles.css`
-- `sonner` → Toaster removed entirely (use `Dialog`/`Alert` instead)
-
-**Now optional peer deps** (apps install only if they import the matching component): `embla-carousel-react` (Carousel), `recharts` (Chart), `react-resizable-panels` (ResizablePanels). `vaul` stays a hard dep because the built-in `UpgradeSheet` uses it.
+| v3.0 | 4 | 3 | 7 |
+| v3.1 | 3 | 1 | 4 |
+| v3.2 | 2 | 1 | 3 |
+| v3.3 | 2 | 0 | 2 |
+| v3.4 | 1 | 0 | 1 |
+| v3.5 | 0 | 0 | 0 |
+| **Now (v3.6)** | **0** | **0** | **0** |
+
+**No hard deps remain.** React + React-DOM + React Router are the only `peerDependencies`. Every other piece of code that runs in a consumer browser is either authored here, recreated as a drop-in, or vendored from upstream.
+
+### Vendored packages
+
+Pre-built copies live in this repo so consumers don't pull them from npm. Refresh scripts in `scripts/` pin a version and re-bundle.
+
+| Source | Lives at | Refresh script |
+|---|---|---|
+| `@base-ui/react` + 5 transitive deps (`@floating-ui/react-dom`, `@floating-ui/utils`, `@babel/runtime`, `use-sync-external-store`, `@base-ui/utils`) | `shadcn/lib/base-ui/*.js` (28 entry points + shared chunks) | `node scripts/vendor-base-ui.js` (requires `bun`; bump `BASE_UI_VERSION`) |
+| `lucide` icons (1700+) | `icons/*.jsx` | `node scripts/vendor-icons.js` (bump `LUCIDE_TAG`) |
+| `tailwind-merge` | `shadcn/lib/tailwind-merge.js` | `node scripts/vendor-tailwind-merge.js` (bump `TM_VERSION`) |
+
+### Ported / recreated / inlined
+
+| Replaces | Lives at | Approach |
+|---|---|---|
+| `vaul` (drag gesture) | `shadcn/ui/drawer.jsx` | ported — drag math copied from vaul `src/index.tsx` (MIT, Emil Kowalski); base-ui Dialog as modal shell |
+| `cmdk` | `components/core/Command.jsx` | rewritten drop-in |
+| `react-day-picker` | `components/core/Calendar.jsx` | rewritten drop-in |
+| `next-themes` | `components/core/ThemeProvider.jsx` | rewritten drop-in |
+| `class-variance-authority` | `shadcn/lib/cva.js` | rewritten drop-in |
+| `clsx` | `shadcn/lib/clsx.js` | rewritten drop-in |
+| `tailwindcss-animate` | `styles.css` | inlined as plain CSS utilities |
+| `sonner` | — | removed; use `Dialog` / `Alert` |
+
+### Removed components (by version)
+
+| Version | Dropped | Reason |
+|---|---|---|
+| v3.1 | `Carousel`, `Resizable` | unused; consumers can install `embla-carousel-react` / `react-resizable-panels` directly |
+| v3.3 | `Chart` | unused; consumers can install `recharts` directly |
+| v3.4 | `vaul` | drag physics ported; `Drawer` rebuilt on base-ui Dialog |
+| v3.5 | `@base-ui/react` | vendored; see table above |
 
 ## Migrating to 3.0
 
@@ -78,19 +106,15 @@ To refresh the icon set against a newer lucide release: bump `LUCIDE_TAG` in `sc
 
 The vendored icons keep their original [Lucide ISC license](icons/LICENSE) (some legacy icons inherit Feather's MIT license — both notices are in that file).
 
-## Optional Peer Dependencies
-
-Three shadcn primitives are powered by single-purpose libraries that are **optional peer dependencies** — apps that don't import them install nothing.
-
-| Component | Required peer dep |
-|---|---|
-| `Carousel` | `embla-carousel-react` |
-| `Chart` | `recharts` |
-| `ResizablePanels` | `react-resizable-panels` |
+## Refreshing vendored packages
 
-If you import one of these without installing the matching package, your bundler will fail with a clear "Cannot find module" error. Just `npm i <package>` and continue.
+Each vendored library has a script that pins a version, fetches the upstream release, and re-emits the local copy. Trust model: vendoring upgrades from "trust npm on every install" to "trust npm at refresh time." Audit the diff between refreshes.
 
-(`Drawer`'s underlying lib `vaul` stays a hard dep because the built-in `UpgradeSheet` uses it.)
+| Library | Bump | Command | Host requirement |
+|---|---|---|---|
+| `@base-ui/react` | `BASE_UI_VERSION` in `scripts/vendor-base-ui.js` | `node scripts/vendor-base-ui.js` | [bun](https://bun.sh) |
+| `lucide` icons | `LUCIDE_TAG` in `scripts/vendor-icons.js` | `node scripts/vendor-icons.js` | Node |
+| `tailwind-merge` | `TM_VERSION` in `scripts/vendor-tailwind-merge.js` | `node scripts/vendor-tailwind-merge.js` | Node |
 
 ## Dark Mode Setup
 
@@ -253,9 +277,8 @@ createSkateboardApp({
 
 - **Routes:** Landing, signin, signup, signout, app routes, settings, payment, legal pages (terms, privacy, EULA, subscription)
 - **Authentication:** ProtectedRoute wrapping `/app/*`, AuthOverlay for lazy auth
-- **Theming:** next-themes ThemeProvider with system theme support
+- **Theming:** in-house `ThemeProvider` (system / light / dark) — `components/core/ThemeProvider.jsx`
 - **State:** ContextProvider with user, UI, and auth overlay state
-- **Toasts:** Sonner Toaster (top-right, rich colors, close button)
 - **Error Boundary:** Catches render errors, unhandled rejections, and global errors
 
 ### Generated Routes
@@ -1172,27 +1195,7 @@ The dialog supports toggling between sign-in and sign-up modes inline, and can b
 
 ## Toast Notifications
 
-Toasts are provided by [Sonner](https://sonner.emilkowal.dev/) and rendered automatically by `createSkateboardApp`.
-
-```javascript
-import { toast } from 'sonner';
-
-toast.success('Changes saved!');
-toast.error('Failed to save');
-toast.loading('Saving...');
-toast.info('New feature available');
-toast.warning('This action cannot be undone');
-
-// Promise-based
-toast.promise(
-  fetch('/api/data'),
-  {
-    loading: 'Loading...',
-    success: 'Data loaded!',
-    error: 'Failed to load'
-  }
-);
-```
+Removed in v3.0. The Sonner dependency is gone — surface short-lived feedback with `Dialog` or `Alert` from `shadcn/ui` instead.
 
 ## Styling
 
@@ -1219,11 +1222,11 @@ Import base theme and override as needed:
 | `--accent` | Secondary backgrounds |
 | `--radius` | Border radius |
 
-Dark mode is automatic via CSS custom properties and `next-themes`.
+Dark mode is automatic via CSS custom properties and the in-house `ThemeProvider` (`components/core/ThemeProvider.jsx`).
 
 ## shadcn/ui Components
 
-51 components available at `@stevederico/skateboard-ui/shadcn/ui/*`:
+47 components available at `@stevederico/skateboard-ui/shadcn/ui/*`:
 
 ```javascript
 import { Button } from '@stevederico/skateboard-ui/shadcn/ui/button';
@@ -1291,23 +1294,14 @@ All components support dark mode automatically and accept a `className` prop for
 
 ## Dependencies
 
-### Peer Dependencies
+### Required peer dependencies
 - React 19.1+
 - react-dom 19.1+
 - react-router-dom 7.0+
 
-### Core Dependencies
-- @base-ui/react — Accessible UI primitives
-- next-themes — Theme management
-- class-variance-authority — Variant styling
-- clsx & tailwind-merge — className utilities
-- sonner — Toast notifications
-- vaul — Drawer primitives
-- cmdk — Command menu
-- embla-carousel-react — Carousel
-- react-day-picker — Calendar
-- react-resizable-panels — Resizable panels
-- recharts — Charts
+### Hard dependencies
+
+None. `@base-ui/react` and all its transitive deps are vendored at `shadcn/lib/base-ui/`. See the dep-count table near the top of this README for the full vendoring history.
 
 ## Repository
 

package/components/AuthOverlay.jsx

@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../shadcn/ui/dialog.jsx';
-import DynamicIcon from '../core/DynamicIcon.jsx';
-import { getState } from '../core/Context.jsx';
-import SignInView from '../views/SignInView.jsx';
-import SignUpView from '../views/SignUpView.jsx';
+import DynamicIcon from './core/DynamicIcon.jsx';
+import { getState } from './core/Context.jsx';
+import SignInView from './views/SignInView.jsx';
+import SignUpView from './views/SignUpView.jsx';
 
 /**
  * Modal authentication overlay with sign-in and sign-up forms.

package/components/ProtectedRoute.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { Navigate, Outlet } from 'react-router-dom';
-import { isAuthenticated, apiRequest, getAppKey, getConstants } from '../core/Utilities';
+import { isAuthenticated, apiRequest, getAppKey, getConstants } from './core/Utilities';
 import { Spinner } from '../shadcn/ui/spinner.jsx';
 
 /**

package/components/ThemeToggle.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useTheme } from '../core/ThemeProvider.jsx';
+import { useTheme } from './core/ThemeProvider.jsx';
 import { Sun, Moon } from '../icons';
 import { Button } from '../shadcn/ui/button.jsx';
 import { cn } from '../shadcn/lib/utils.js';

package/components/UpgradeSheet.jsx

@@ -14,8 +14,8 @@ import {
 import { Badge } from "../shadcn/ui/badge"
 import { Separator } from "../shadcn/ui/separator"
 import { Button } from "../shadcn/ui/button"
-import { getState } from "../core/Context.jsx";
-import { showCheckout } from '../core/Utilities.js';
+import { getState } from "./core/Context.jsx";
+import { showCheckout } from './core/Utilities.js';
 import { Sparkles, CircleCheck } from '../icons';
 
 /**

package/components/core/DynamicIcon.jsx

@@ -0,0 +1,110 @@
+import * as LucideIcons from "../../icons";
+
+/**
+ * Convert a kebab-case, snake_case, or space-separated string to PascalCase.
+ *
+ * @param {string} str - Input string
+ * @returns {string} PascalCase version
+ */
+function toPascalCase(str) {
+  return str
+    .split(/[-_\s]/)
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join("");
+}
+
+/**
+ * Convert a PascalCase or camelCase string to kebab-case.
+ *
+ * @param {string} str - Input string
+ * @returns {string} kebab-case version
+ */
+function toKebabCase(str) {
+  return str
+    .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+    .replace(/([A-Z])([A-Z][a-z])/g, "$1-$2")
+    .toLowerCase();
+}
+
+/**
+ * Resolve an icon name in any format to a PascalCase name and kebab-case file path.
+ * e.g. "layout-dashboard" → { pascal: "LayoutDashboard", kebab: "layout-dashboard" }
+ *      "LayoutDashboard"  → { pascal: "LayoutDashboard", kebab: "layout-dashboard" }
+ *
+ * Strips legacy "Icon" prefix from Tabler-style names for backwards compatibility.
+ *
+ * @param {string} name - Icon name in any case format
+ * @returns {{ pascal: string, kebab: string }} Resolved icon name pair
+ */
+function toIconName(name) {
+  let stripped = name;
+  if (stripped.startsWith("Icon") && stripped.length > 4 && stripped[4] === stripped[4].toUpperCase()) {
+    stripped = stripped.slice(4);
+  }
+  const pascal = /[-_\s]/.test(stripped) ? toPascalCase(stripped) : stripped.charAt(0).toUpperCase() + stripped.slice(1);
+  const kebab = toKebabCase(pascal);
+  return { pascal, kebab };
+}
+
+/**
+ * Check if a name string can be resolved to a valid Lucide icon.
+ *
+ * @param {string} name - Icon name to check
+ * @returns {boolean} True if icon exists in the Lucide library
+ */
+export function canResolveIcon(name) {
+  const { pascal } = toIconName(name);
+  const icon = LucideIcons[pascal];
+  return !!icon && (typeof icon === "function" || typeof icon?.render === "function");
+}
+
+/**
+ * Render a Lucide icon by name string using a static import of all icons.
+ *
+ * All icons are vendored from lucide at scripts/vendor-icons.js, ensuring they work
+ * in both Vite dev mode and production builds. Icons are looked up synchronously
+ * by PascalCase name from the LucideIcons namespace.
+ *
+ * Accepts kebab-case ("layout-dashboard"), PascalCase ("LayoutDashboard"),
+ * or legacy prefixed ("IconLayoutDashboard") names.
+ *
+ * @param {Object} props
+ * @param {string} props.name - Icon name (e.g. "home", "arrow-right", "Settings")
+ * @param {number} [props.size=24] - Icon size in pixels
+ * @param {string} [props.color='currentColor'] - Icon stroke color
+ * @param {number} [props.strokeWidth=2] - Stroke width
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {JSX.Element|null} Rendered icon or null if not found
+ *
+ * @example
+ * import DynamicIcon from '@stevederico/skateboard-ui/DynamicIcon';
+ *
+ * <DynamicIcon name="home" size={24} />
+ * <DynamicIcon name="arrow-right" size={20} color="red" />
+ * <DynamicIcon name="settings" className="text-muted-foreground" />
+ */
+const DynamicIcon = ({
+  name,
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  className,
+  ...props
+}) => {
+  const { pascal } = toIconName(name);
+  const Icon = LucideIcons[pascal];
+
+  if (!Icon || (typeof Icon !== "function" && typeof Icon?.render !== "function")) return null;
+
+  return (
+    <Icon
+      size={size}
+      color={color}
+      strokeWidth={strokeWidth}
+      className={className}
+      {...props}
+    />
+  );
+};
+
+export default DynamicIcon;

package/components/layout/Header.jsx

@@ -0,0 +1,50 @@
+import { Separator } from "../../shadcn/ui/separator.jsx";
+import { Button } from "../../shadcn/ui/button.jsx";
+import { Badge } from "../../shadcn/ui/badge.jsx";
+import { cn } from "../../shadcn/lib/utils.js";
+
+/**
+ * App header bar built on shadcn primitives (Button, Separator, Badge).
+ *
+ * Renders page title and optional action button on the right.
+ * A shadcn Separator renders below the header instead of a border utility.
+ *
+ * @param {Object} props
+ * @param {string} props.title - Header title text
+ * @param {string} [props.buttonTitle] - Action button label (omit to hide button)
+ * @param {Function} [props.onButtonTitleClick] - Button click handler
+ * @param {string} [props.buttonClass] - Additional CSS classes for the button
+ * @param {string} [props.className] - Additional CSS classes for the header
+ * @param {React.ReactNode} [props.children] - Custom right-side content
+ * @returns {JSX.Element} Header bar with separator
+ */
+function Header({ title, buttonTitle, onButtonTitleClick, buttonClass, className, children, ...props }) {
+  return (
+    <>
+      <header
+        className={cn("flex h-(--header-height) shrink-0 items-center gap-2", className)}
+        {...props}
+      >
+        <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
+          <h1 className="text-lg font-medium">{title}</h1>
+          <div className="ml-auto flex items-center gap-2">
+            {typeof buttonTitle !== "undefined" && (
+              <Button
+                variant="ghost"
+                size="sm"
+                className={buttonClass || ""}
+                onClick={onButtonTitleClick}
+              >
+                {buttonTitle}
+              </Button>
+            )}
+            {children}
+          </div>
+        </div>
+      </header>
+      <Separator />
+    </>
+  );
+}
+
+export default Header;

package/components/layout/Layout.jsx

@@ -0,0 +1,60 @@
+import { Outlet } from 'react-router-dom';
+import TabBar from './TabBar.jsx'
+import { SidebarProvider, SidebarInset } from "../../shadcn/ui/sidebar"
+import Sidebar from "./Sidebar"
+import { getState } from '../core/Context.jsx';
+
+/**
+ * Page layout wrapper with sidebar and tab bar.
+ *
+ * Renders Sidebar (desktop) and TabBar (mobile) based on constants
+ * configuration and programmatic visibility state. Uses SidebarInset
+ * for proper shadcn sidebar layout with inset variant.
+ *
+ * Set `constants.hideSidebarInsetRounding` to true to remove the
+ * rounded corners on the main content area.
+ *
+ * Set `constants.sidebarCollapsed` to true to start the sidebar
+ * in its collapsed (icon-only) state.
+ *
+ * @param {Object} props
+ * @param {React.ReactNode} [props.children] - Child content (unused, Outlet renders routes)
+ * @returns {JSX.Element} Layout with sidebar, main content, and tab bar
+ *
+ * @example
+ * import Layout from '@stevederico/skateboard-ui/Layout';
+ *
+ * // Used internally by createSkateboardApp route config
+ * <Route element={<Layout />}>
+ *   <Route path="home" element={<HomeView />} />
+ * </Route>
+ */
+export default function Layout({ children }) {
+  const { state } = getState();
+  const { sidebarVisible, tabBarVisible } = state.ui;
+  const constants = state.constants;
+
+  // Combine constants (static config) with context state (programmatic control)
+  const showSidebar = !constants.hideSidebar && sidebarVisible;
+  const showTabBar = !constants.hideTabBar && tabBarVisible;
+
+  return (
+    <div className="min-h-screen flex flex-col pt-[env(safe-area-inset-top)] pb-[calc(5rem+env(safe-area-inset-bottom))] md:pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]">
+      <a href="#main" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-background focus:text-foreground focus:rounded-md focus:ring-2 focus:ring-ring">
+        Skip to content
+      </a>
+      <SidebarProvider
+        defaultOpen={!constants.sidebarCollapsed}
+        style={{
+          '--sidebar-width': '12rem',
+          '--header-height': '3.5rem',
+        }}>
+        {showSidebar && <Sidebar variant="inset" />}
+        <SidebarInset id="main" className={`border border-border/50 ${constants.hideSidebarInsetRounding ? "md:peer-data-[variant=inset]:rounded-none" : ""}`}>
+          <Outlet />
+        </SidebarInset>
+      </SidebarProvider>
+      {showTabBar && <TabBar className="md:hidden" />}
+    </div>
+  );
+}