@stevederico/skateboard-ui 3.9.0 → 3.11.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # CHANGELOG
 
+3.11.0
+
+  Restore spinner animation
+  Bridge orientation variants
+  Restore sidebar sizes
+  Restore overlay background
+  Remove inert classes
+  Guard context hooks
+  Remove global augmentations
+  Compose drawer handlers
+  Slim package tarball
+
+3.10.0
+
+  Convert package to TypeScript
+  Fix sign-out trigger render
+  Fix calendar day focus
+  Fix misplaced cursor-pointer
+  Publish compiled dist with types
+  Exports map points to dist
+  Consumer import paths unchanged
+  Add tsconfig and build
+  Regenerate icons as TSX
+  Re-vendor base-ui 1.5.0
+  Bundle base-ui type declarations
+  Adopt official base-vega shadcn
+  Keep sidebar 12rem width
+  Keep cursor-pointer interactions
+  Preserve button asChild bridge
+  Type cva with VariantProps
+  Export public type surfaces
+  Add root package export
+
 3.9.0
 
   Auth overlay on by default

package/README.md

@@ -1,9 +1,11 @@
 # skateboard-ui
 
-React component library for rapid application development. Built with TailwindCSS v4 and shadcn/ui.
+React component library for rapid application development. Built with TypeScript, 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.
 
+**TypeScript with full type declarations.** Source is TypeScript, compiled to plain JavaScript + `.d.ts` in `dist/` (`npm run build`). JavaScript apps consume the compiled JS exactly as before — import paths are unchanged — and TypeScript apps get real types for every export (`SkateboardConstants`, `User`, component props, `VariantProps`, typed icons).
+
 **Node.js 24+** is required in the app repo for build tooling and backend (see `engines` in `package.json`). The UI package itself runs in the browser.
 
 ## Installation
@@ -46,7 +48,9 @@ Across the v3.x series, every npm runtime dep was either vendored, recreated, or
 | v3.3 | 2 | 0 | 2 |
 | v3.4 | 1 | 0 | 1 |
 | v3.5 | 0 | 0 | 0 |
-| **Now (v3.6)** | **0** | **0** | **0** |
+| **Now (v3.6+)** | **0** | **0** | **0** |
+
+v3.10 converts the package to TypeScript — compiled JS + `.d.ts` ship in `dist/`; the dependency count is unchanged (`typescript` is a devDependency only).
 
 **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.
 
@@ -56,20 +60,20 @@ Pre-built copies live in this repo so consumers don't pull them from npm. Refres
 
 | 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`) |
+| `@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` + `*.d.ts` (28 entry points + shared chunks) | `node scripts/vendor-base-ui.js` (requires `bun`; bump `BASE_UI_VERSION`) |
+| `lucide` icons (1700+) | `icons/*.tsx` | `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 |
+| `vaul` (drag gesture) | `shadcn/ui/drawer.tsx` | ported — drag math copied from vaul `src/index.tsx` (MIT, Emil Kowalski); base-ui Dialog as modal shell |
+| `cmdk` | `components/core/Command.tsx` | rewritten drop-in |
+| `react-day-picker` | `components/core/Calendar.tsx` | rewritten drop-in |
+| `next-themes` | `components/core/ThemeProvider.tsx` | rewritten drop-in |
+| `class-variance-authority` | `shadcn/lib/cva.ts` | rewritten drop-in |
+| `clsx` | `shadcn/lib/clsx.ts` | rewritten drop-in |
 | `tailwindcss-animate` | `styles.css` | inlined as plain CSS utilities |
 | `sonner` | — | removed; use `Dialog` / `Alert` |
 
@@ -280,7 +284,7 @@ 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:** in-house `ThemeProvider` (system / light / dark) — `components/core/ThemeProvider.jsx`
+- **Theming:** in-house `ThemeProvider` (system / light / dark) — `components/core/ThemeProvider.tsx`
 - **State:** ContextProvider with user, UI, and auth overlay state
 - **Error Boundary:** Catches render errors, unhandled rejections, and global errors
 
@@ -1224,7 +1228,7 @@ Import base theme and override as needed:
 | `--accent` | Secondary backgrounds |
 | `--radius` | Border radius |
 
-Dark mode is automatic via CSS custom properties and the in-house `ThemeProvider` (`components/core/ThemeProvider.jsx`).
+Dark mode is automatic via CSS custom properties and the in-house `ThemeProvider` (`components/core/ThemeProvider.tsx`).
 
 ## shadcn/ui Components
 

package/dist/App.d.ts

@@ -0,0 +1,70 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { SkateboardConstants } from './components/core/Utilities.js';
+/** A route rendered under /app (config.appRoutes). */
+export interface AppRoute {
+    path: string;
+    element: ReactNode;
+}
+/** Built-in view components that can be replaced via config.overrides. */
+export interface AppOverrides {
+    layout?: ComponentType<any>;
+    settings?: ComponentType<any>;
+    payment?: ComponentType<any>;
+    signIn?: ComponentType<any>;
+    signUp?: ComponentType<any>;
+    signOut?: ComponentType<any>;
+    notFound?: ComponentType<any>;
+}
+/** Configuration accepted by createSkateboardApp. */
+export interface CreateSkateboardAppConfig {
+    constants: SkateboardConstants;
+    appRoutes: AppRoute[];
+    defaultRoute?: string;
+    landingPage?: ReactNode;
+    wrapper?: ComponentType<{
+        children?: ReactNode;
+    }>;
+    overrides?: AppOverrides;
+}
+/**
+ * Bootstrap and render a skateboard-ui application.
+ *
+ * Sets up routing, authentication, layout, theming, and toast notifications.
+ * Mounts the app to the #root DOM element.
+ *
+ * @param {Object} config
+ * @param {Object} config.constants - App constants (see README for required fields)
+ * @param {Array<{path: string, element: JSX.Element}>} config.appRoutes - Routes rendered under /app
+ * @param {string} [config.defaultRoute] - Default route path under /app (defaults to first route)
+ * @param {JSX.Element} [config.landingPage] - Custom landing page for "/". Defaults to LandingView.
+ * @param {React.ComponentType} [config.wrapper] - Optional wrapper component around the router
+ * @param {Object} [config.overrides] - Override built-in view components
+ * @param {React.ComponentType} [config.overrides.layout] - Replace Layout
+ * @param {React.ComponentType} [config.overrides.settings] - Replace SettingsView
+ * @param {React.ComponentType} [config.overrides.payment] - Replace PaymentView
+ * @param {React.ComponentType} [config.overrides.signIn] - Replace SignInView
+ * @param {React.ComponentType} [config.overrides.signUp] - Replace SignUpView
+ * @param {React.ComponentType} [config.overrides.signOut] - Replace SignOutView
+ * @param {React.ComponentType} [config.overrides.notFound] - Replace NotFound
+ *
+ * @example
+ * import { createSkateboardApp } from '@stevederico/skateboard-ui/App';
+ * import constants from './constants.json';
+ *
+ * createSkateboardApp({
+ *   constants,
+ *   appRoutes: [{ path: 'home', element: <HomeView /> }]
+ * });
+ *
+ * @example
+ * // Override built-in views
+ * createSkateboardApp({
+ *   constants,
+ *   appRoutes: [{ path: 'home', element: <HomeView /> }],
+ *   overrides: {
+ *     settings: MySettingsView,
+ *     signIn: MySignInView,
+ *   }
+ * });
+ */
+export declare function createSkateboardApp({ constants, appRoutes, defaultRoute, landingPage, wrapper: Wrapper, overrides }: CreateSkateboardAppConfig): void;

package/dist/App.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter as Router, Routes, Route, Navigate, useLocation, useNavigate, } from 'react-router';
+import { useEffect } from 'react';
+import { getState } from './components/core/Context.js';
+import { ThemeProvider } from './components/core/ThemeProvider.js';
+import Layout from './components/layout/Layout.js';
+import LandingView from './components/views/LandingView.js';
+import TextView from './components/views/TextView.js';
+import SignUpView from './components/views/SignUpView.js';
+import SignInView from './components/views/SignInView.js';
+import SignOutView from './components/views/SignOutView.js';
+import PaymentView from './components/views/PaymentView.js';
+import SettingsView from './components/views/SettingsView.js';
+import NotFound from './components/views/NotFound.js';
+import ProtectedRoute from './components/ProtectedRoute.js';
+import ErrorBoundary from './components/ErrorBoundary.js';
+import { useAppSetup, initializeUtilities, validateConstants, isAuthOverlayEnabled, isAuthenticated } from './components/core/Utilities.js';
+import { ContextProvider } from './components/core/Context.js';
+import AuthOverlay from './components/AuthOverlay.js';
+/**
+ * Redirect component for auth routes when authOverlay mode is enabled.
+ *
+ * Dispatches SHOW_AUTH_OVERLAY on mount and redirects to the previous page
+ * (from location state) or /app/home as fallback.
+ */
+function AuthRedirect() {
+    const { dispatch } = getState();
+    const navigate = useNavigate();
+    const location = useLocation();
+    useEffect(() => {
+        // Already authenticated (e.g. reached /signin via a stale link)? Skip the
+        // overlay — just send them into the app instead of prompting a signed-in user.
+        if (!isAuthenticated()) {
+            dispatch({ type: 'SHOW_AUTH_OVERLAY' });
+        }
+        const returnTo = location.state?.from || '/app/home';
+        navigate(returnTo, { replace: true });
+    }, [dispatch, navigate, location.state]);
+    return null;
+}
+function App({ constants, appRoutes, defaultRoute, landingPage, overrides = {} }) {
+    const location = useLocation();
+    useEffect(() => {
+        document.title = constants.appName;
+    }, [constants.appName]);
+    useAppSetup(location);
+    const LayoutComponent = overrides.layout || Layout;
+    const SettingsComponent = overrides.settings || SettingsView;
+    const PaymentComponent = overrides.payment || PaymentView;
+    const SignOutComponent = overrides.signOut || SignOutView;
+    const NotFoundComponent = overrides.notFound || NotFound;
+    // authOverlay is on by default (except noLogin apps); redirect /signin and
+    // /signup to show the overlay unless explicitly disabled with authOverlay:false.
+    // An explicit override always wins, so consumers can supply custom auth pages.
+    const SignInComponent = overrides.signIn || (isAuthOverlayEnabled() ? AuthRedirect : SignInView);
+    const SignUpComponent = overrides.signUp || (isAuthOverlayEnabled() ? AuthRedirect : SignUpView);
+    return (_jsxs(Routes, { children: [_jsxs(Route, { element: _jsx(LayoutComponent, {}), children: [_jsx(Route, { path: "/console", element: _jsx(Navigate, { to: "/app", replace: true }) }), _jsxs(Route, { path: "/app", element: _jsx(ProtectedRoute, {}), children: [_jsx(Route, { index: true, element: _jsx(Navigate, { to: defaultRoute, replace: true }) }), appRoutes.map(({ path, element }) => (_jsx(Route, { path: path, element: element }, path))), _jsx(Route, { path: "settings", element: _jsx(SettingsComponent, {}) }), _jsx(Route, { path: "payment", element: _jsx(PaymentComponent, {}) })] })] }), _jsx(Route, { path: "/", element: landingPage || _jsx(LandingView, {}) }), _jsx(Route, { path: "/signin", element: _jsx(SignInComponent, {}) }), _jsx(Route, { path: "/signup", element: _jsx(SignUpComponent, {}) }), _jsx(Route, { path: "/signout", element: _jsx(SignOutComponent, {}) }), _jsx(Route, { path: "/terms", element: _jsx(TextView, { details: constants.termsOfService }) }), _jsx(Route, { path: "/privacy", element: _jsx(TextView, { details: constants.privacyPolicy }) }), _jsx(Route, { path: "/eula", element: _jsx(TextView, { details: constants.EULA }) }), _jsx(Route, { path: "/subs", element: _jsx(TextView, { details: constants.subscriptionDetails }) }), _jsx(Route, { path: "*", element: _jsx(NotFoundComponent, {}) })] }));
+}
+/**
+ * Bootstrap and render a skateboard-ui application.
+ *
+ * Sets up routing, authentication, layout, theming, and toast notifications.
+ * Mounts the app to the #root DOM element.
+ *
+ * @param {Object} config
+ * @param {Object} config.constants - App constants (see README for required fields)
+ * @param {Array<{path: string, element: JSX.Element}>} config.appRoutes - Routes rendered under /app
+ * @param {string} [config.defaultRoute] - Default route path under /app (defaults to first route)
+ * @param {JSX.Element} [config.landingPage] - Custom landing page for "/". Defaults to LandingView.
+ * @param {React.ComponentType} [config.wrapper] - Optional wrapper component around the router
+ * @param {Object} [config.overrides] - Override built-in view components
+ * @param {React.ComponentType} [config.overrides.layout] - Replace Layout
+ * @param {React.ComponentType} [config.overrides.settings] - Replace SettingsView
+ * @param {React.ComponentType} [config.overrides.payment] - Replace PaymentView
+ * @param {React.ComponentType} [config.overrides.signIn] - Replace SignInView
+ * @param {React.ComponentType} [config.overrides.signUp] - Replace SignUpView
+ * @param {React.ComponentType} [config.overrides.signOut] - Replace SignOutView
+ * @param {React.ComponentType} [config.overrides.notFound] - Replace NotFound
+ *
+ * @example
+ * import { createSkateboardApp } from '@stevederico/skateboard-ui/App';
+ * import constants from './constants.json';
+ *
+ * createSkateboardApp({
+ *   constants,
+ *   appRoutes: [{ path: 'home', element: <HomeView /> }]
+ * });
+ *
+ * @example
+ * // Override built-in views
+ * createSkateboardApp({
+ *   constants,
+ *   appRoutes: [{ path: 'home', element: <HomeView /> }],
+ *   overrides: {
+ *     settings: MySettingsView,
+ *     signIn: MySignInView,
+ *   }
+ * });
+ */
+export function createSkateboardApp({ constants, appRoutes, defaultRoute = appRoutes[0]?.path || 'home', landingPage, wrapper: Wrapper, overrides }) {
+    // Validate constants before initialization
+    validateConstants(constants);
+    // Initialize utilities with constants
+    initializeUtilities(constants);
+    // Prevent theme flash by setting dark class before React hydrates
+    // This runs synchronously before render, reading from localStorage or system preference
+    const storageKey = 'theme';
+    const storedTheme = localStorage.getItem(storageKey);
+    const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const isDark = storedTheme === 'dark' || (storedTheme !== 'light' && systemDark);
+    document.documentElement.classList.toggle('dark', isDark);
+    const container = document.getElementById('root');
+    const root = createRoot(container);
+    root.render(_jsx(ErrorBoundary, { children: _jsx(ThemeProvider, { attribute: "class", defaultTheme: "system", enableSystem: true, children: _jsx(ContextProvider, { constants: constants, children: Wrapper ? (_jsx(Wrapper, { children: _jsxs(Router, { children: [_jsx(AuthOverlay, {}), _jsx(App, { constants: constants, appRoutes: appRoutes, defaultRoute: defaultRoute, landingPage: landingPage, overrides: overrides })] }) })) : (_jsxs(Router, { children: [_jsx(AuthOverlay, {}), _jsx(App, { constants: constants, appRoutes: appRoutes, defaultRoute: defaultRoute, landingPage: landingPage, overrides: overrides })] })) }) }) }));
+}

package/dist/components/AuthOverlay.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+/**
+ * Modal authentication overlay with sign-in and sign-up forms.
+ *
+ * Rendered at the app root and controlled via context state.
+ * Opens when SHOW_AUTH_OVERLAY is dispatched (typically via useAuthGate).
+ * On successful auth, runs the pending callback and closes.
+ *
+ * @returns {JSX.Element} Auth dialog overlay
+ *
+ * @example
+ * import AuthOverlay from '@stevederico/skateboard-ui/AuthOverlay';
+ *
+ * // Rendered automatically by createSkateboardApp
+ * <AuthOverlay />
+ */
+export default function AuthOverlay(): React.JSX.Element;

package/dist/components/AuthOverlay.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../shadcn/ui/dialog.js';
+import DynamicIcon from './core/DynamicIcon.js';
+import { getState } from './core/Context.js';
+import SignInView from './views/SignInView.js';
+import SignUpView from './views/SignUpView.js';
+/**
+ * Modal authentication overlay with sign-in and sign-up forms.
+ *
+ * Rendered at the app root and controlled via context state.
+ * Opens when SHOW_AUTH_OVERLAY is dispatched (typically via useAuthGate).
+ * On successful auth, runs the pending callback and closes.
+ *
+ * @returns {JSX.Element} Auth dialog overlay
+ *
+ * @example
+ * import AuthOverlay from '@stevederico/skateboard-ui/AuthOverlay';
+ *
+ * // Rendered automatically by createSkateboardApp
+ * <AuthOverlay />
+ */
+export default function AuthOverlay() {
+    const { state, dispatch } = getState();
+    const constants = state.constants;
+    const { visible } = state.authOverlay;
+    const [mode, setMode] = useState('signin');
+    // Reset mode when dialog opens
+    useEffect(() => {
+        if (visible) {
+            setMode('signin');
+        }
+    }, [visible]);
+    // Invoke parked 401 retries (apiRequest, Utilities.js) here in event handlers —
+    // not in the reducer, which must stay pure. Each callback settles the awaiting
+    // apiRequest promise: 'success' retries the request, 'cancel' rejects it so a
+    // dismissed overlay never leaves a caller hanging.
+    function runPendingCallbacks(outcome) {
+        for (const cb of state.authOverlay.pendingCallbacks) {
+            try {
+                cb(outcome);
+            }
+            catch (e) {
+                console.error('Auth callback error:', e);
+            }
+        }
+    }
+    function handleClose() {
+        runPendingCallbacks('cancel');
+        dispatch({ type: 'HIDE_AUTH_OVERLAY' });
+    }
+    function handleSuccess() {
+        runPendingCallbacks('success');
+        dispatch({ type: 'AUTH_OVERLAY_SUCCESS' });
+    }
+    return (_jsx(Dialog, { open: visible, onOpenChange: (open) => { if (!open)
+            handleClose(); }, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { className: "items-center text-center", children: [_jsxs("div", { className: "flex items-center justify-center gap-3", children: [_jsx("div", { className: "bg-app rounded-2xl flex aspect-square size-10 items-center justify-center", children: _jsx(DynamicIcon, { name: constants.appIcon, size: 20, color: "white", strokeWidth: 2 }) }), _jsx("span", { className: "text-2xl font-bold", children: constants.appName })] }), _jsx(DialogTitle, { className: "sr-only", children: mode === 'signin' ? 'Sign In' : 'Sign Up' })] }), mode === 'signin' ? (_jsx(SignInView, { embedded: true, onSuccess: handleSuccess, onSwitchMode: () => setMode('signup') })) : (_jsx(SignUpView, { embedded: true, onSuccess: handleSuccess, onSwitchMode: () => setMode('signin') }))] }) }));
+}

package/dist/components/ErrorBoundary.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+/**
+ * Top-level error boundary that catches render errors, unhandled promise
+ * rejections, and global errors.
+ *
+ * Displays a shadcn Card fallback with a destructive Alert showing the
+ * error message, plus "Try Again" and "Reload Page" buttons.
+ *
+ * @param {Object} props
+ * @param {React.ReactNode} props.children - Child components to protect
+ * @returns {JSX.Element} Children or error fallback UI
+ *
+ * @example
+ * import ErrorBoundary from '@stevederico/skateboard-ui/ErrorBoundary';
+ *
+ * <ErrorBoundary>
+ *   <App />
+ * </ErrorBoundary>
+ */
+export interface ErrorBoundaryProps {
+    children?: React.ReactNode;
+}
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+}
+declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    unsubscribeRejection?: () => void;
+    unsubscribeError?: () => void;
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
+}
+export default ErrorBoundary;

package/dist/components/ErrorBoundary.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Button } from '../shadcn/ui/button.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardFooter } from '../shadcn/ui/card.js';
+import { Alert, AlertDescription } from '../shadcn/ui/alert.js';
+import { Badge } from '../shadcn/ui/badge.js';
+class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error('Error caught by boundary:', error, errorInfo);
+    }
+    componentDidMount() {
+        const handleUnhandledRejection = (event) => {
+            console.error('Unhandled promise rejection:', event.reason);
+            this.setState({
+                hasError: true,
+                error: new Error(`Async Error: ${event.reason?.message || String(event.reason)}`)
+            });
+        };
+        const handleError = (event) => {
+            if (event.error && !(this.state.hasError)) {
+                console.error('Global error:', event.error);
+                this.setState({ hasError: true, error: event.error });
+            }
+        };
+        window.addEventListener('unhandledrejection', handleUnhandledRejection);
+        window.addEventListener('error', handleError);
+        this.unsubscribeRejection = () => {
+            window.removeEventListener('unhandledrejection', handleUnhandledRejection);
+        };
+        this.unsubscribeError = () => {
+            window.removeEventListener('error', handleError);
+        };
+    }
+    componentWillUnmount() {
+        if (this.unsubscribeRejection)
+            this.unsubscribeRejection();
+        if (this.unsubscribeError)
+            this.unsubscribeError();
+    }
+    render() {
+        if (this.state.hasError) {
+            return (_jsx("div", { className: "flex items-center justify-center w-full h-screen bg-background", children: _jsxs(Card, { className: "max-w-md w-full", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Something went wrong" }), _jsx(CardDescription, { children: "An unexpected error occurred in the application." })] }), _jsx(Alert, { variant: "destructive", className: "mx-6", children: _jsxs(AlertDescription, { children: [_jsx(Badge, { variant: "outline", className: "mr-2", children: "Error" }), this.state.error?.message || 'Unknown error'] }) }), _jsxs(CardFooter, { className: "gap-2", children: [_jsx(Button, { variant: "outline", onClick: () => this.setState({ hasError: false, error: null }), children: "Try Again" }), _jsx(Button, { onClick: () => window.location.reload(), children: "Reload Page" })] })] }) }));
+        }
+        return this.props.children;
+    }
+}
+export default ErrorBoundary;

package/dist/components/ProtectedRoute.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Route guard that validates authentication before rendering child routes.
+ *
+ * Checks client-side auth via isAuthenticated(), then validates the
+ * session with the backend via /me. Redirects to /signin if invalid.
+ * Bypassed for lazy auth (the default) unless constants.authOverlay is false.
+ * Bypassed when constants.noLogin is true (no auth required).
+ *
+ * @returns {JSX.Element} Outlet if authenticated, Navigate to /signin otherwise
+ *
+ * @example
+ * import ProtectedRoute from '@stevederico/skateboard-ui/ProtectedRoute';
+ *
+ * <Route path="/app" element={<ProtectedRoute />}>
+ *   <Route path="home" element={<HomeView />} />
+ * </Route>
+ */
+declare const ProtectedRoute: () => import("react").JSX.Element;
+export default ProtectedRoute;

package/dist/components/ProtectedRoute.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Navigate, Outlet } from 'react-router';
+import { isAuthenticated, apiRequest, getAppKey, getConstants, isAuthOverlayEnabled } from './core/Utilities.js';
+import { Spinner } from '../shadcn/ui/spinner.js';
+/**
+ * Route guard that validates authentication before rendering child routes.
+ *
+ * Checks client-side auth via isAuthenticated(), then validates the
+ * session with the backend via /me. Redirects to /signin if invalid.
+ * Bypassed for lazy auth (the default) unless constants.authOverlay is false.
+ * Bypassed when constants.noLogin is true (no auth required).
+ *
+ * @returns {JSX.Element} Outlet if authenticated, Navigate to /signin otherwise
+ *
+ * @example
+ * import ProtectedRoute from '@stevederico/skateboard-ui/ProtectedRoute';
+ *
+ * <Route path="/app" element={<ProtectedRoute />}>
+ *   <Route path="home" element={<HomeView />} />
+ * </Route>
+ */
+const ProtectedRoute = () => {
+    const constants = getConstants();
+    const skipProtection = isAuthOverlayEnabled();
+    const [status, setStatus] = useState(skipProtection ? 'valid' : 'checking');
+    useEffect(() => {
+        if (skipProtection)
+            return;
+        if (!isAuthenticated()) {
+            setStatus('invalid');
+            return;
+        }
+        // Skip backend validation for noLogin apps
+        if (constants.noLogin === true) {
+            setStatus('valid');
+            return;
+        }
+        // Validate session with backend
+        apiRequest('/me')
+            .then(() => setStatus('valid'))
+            .catch(() => {
+            // Clear stale localStorage data
+            const csrfKey = getAppKey('csrf');
+            const userKey = getAppKey('user');
+            localStorage.removeItem(csrfKey);
+            localStorage.removeItem(userKey);
+            setStatus('invalid');
+        });
+    }, []);
+    if (status === 'checking') {
+        return (_jsx("div", { className: "flex items-center justify-center min-h-screen bg-background", children: _jsx(Spinner, { className: "size-6" }) }));
+    }
+    return status === 'valid' ? _jsx(Outlet, {}) : _jsx(Navigate, { to: "/signin", replace: true });
+};
+export default ProtectedRoute;

package/dist/components/Sheet.d.ts

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react';
+/** Imperative API exposed via ref: { show, hide, open, close, toggle }. */
+export interface SheetHandle {
+    show: () => void;
+    hide: () => void;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+}
+export interface SheetProps {
+    title?: string;
+    minHeight?: string;
+    children?: ReactNode;
+}
+/**
+ * Bottom sheet (drawer) component with imperative open/close API.
+ *
+ * Use a ref to control visibility programmatically.
+ *
+ * @param {Object} props
+ * @param {string} [props.title=""] - Sheet header title
+ * @param {string} [props.minHeight="auto"] - Minimum sheet height CSS value
+ * @param {React.ReactNode} props.children - Sheet body content
+ * @param {React.Ref} ref - Ref exposing { show, hide, open, close, toggle }
+ * @returns {JSX.Element} Drawer sheet
+ *
+ * @example
+ * import { useRef } from 'react';
+ * import Sheet from '@stevederico/skateboard-ui/Sheet';
+ *
+ * function MyComponent() {
+ *   const sheetRef = useRef();
+ *   return (
+ *     <>
+ *       <button onClick={() => sheetRef.current.show()}>Open</button>
+ *       <Sheet ref={sheetRef} title="Details">
+ *         <p>Sheet content</p>
+ *       </Sheet>
+ *     </>
+ *   );
+ * }
+ */
+declare const MySheet: import("react").ForwardRefExoticComponent<SheetProps & import("react").RefAttributes<SheetHandle>>;
+export default MySheet;

package/dist/components/Sheet.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useImperativeHandle, forwardRef } from 'react';
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, } from "../shadcn/ui/drawer.js";
+/**
+ * Bottom sheet (drawer) component with imperative open/close API.
+ *
+ * Use a ref to control visibility programmatically.
+ *
+ * @param {Object} props
+ * @param {string} [props.title=""] - Sheet header title
+ * @param {string} [props.minHeight="auto"] - Minimum sheet height CSS value
+ * @param {React.ReactNode} props.children - Sheet body content
+ * @param {React.Ref} ref - Ref exposing { show, hide, open, close, toggle }
+ * @returns {JSX.Element} Drawer sheet
+ *
+ * @example
+ * import { useRef } from 'react';
+ * import Sheet from '@stevederico/skateboard-ui/Sheet';
+ *
+ * function MyComponent() {
+ *   const sheetRef = useRef();
+ *   return (
+ *     <>
+ *       <button onClick={() => sheetRef.current.show()}>Open</button>
+ *       <Sheet ref={sheetRef} title="Details">
+ *         <p>Sheet content</p>
+ *       </Sheet>
+ *     </>
+ *   );
+ * }
+ */
+const MySheet = forwardRef(function MySheet(props, ref) {
+    const { title = "", minHeight = "auto", children } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    useImperativeHandle(ref, () => ({
+        show: () => setIsOpen(true),
+        hide: () => setIsOpen(false),
+        open: () => setIsOpen(true),
+        close: () => setIsOpen(false),
+        toggle: () => setIsOpen(prev => !prev)
+    }));
+    return (_jsx(Drawer, { open: isOpen, onOpenChange: setIsOpen, children: _jsxs(DrawerContent, { style: { minHeight }, children: [_jsx(DrawerHeader, { children: _jsx(DrawerTitle, { children: title }) }), _jsx("div", { className: "px-4 pb-4", children: children })] }) }));
+});
+export default MySheet;