@stevederico/skateboard-ui 4.10.0 → 4.11.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # CHANGELOG
 
+4.11.0
+
+  Fix context-menu and menubar mouse clicks
+  Fix popover focus-into-content on open
+  Fix calendar single-select first-click crash
+  Share dismiss layer across nested overlays
+  Slider pointercancel cleanup and controlled drag
+  Fix roving tabindex (radio, tabs, calendar)
+  Avatar reconciles cached images
+  Command palette single-pass filter and a11y name
+  Add aria-expanded to sheet/drawer/alert-dialog
+  Guard checkout and subscription fields
+  TabBar active match by path segment
+  Remove banned type assertions and dead code
+
 4.10.0
 
   Fix dropdown menu item clicks

package/dist/App.js

@@ -41,9 +41,7 @@ function AuthRedirect() {
 }
 function App({ constants, appRoutes, defaultRoute, landingPage, overrides = {} }) {
     const location = useLocation();
-    useEffect(() => {
-        document.title = constants.appName;
-    }, [constants.appName]);
+    // document.title is set by useAppSetup (on navigation) — single source of truth.
     useAppSetup(location);
     const LayoutComponent = overrides.layout || Layout;
     const SettingsComponent = overrides.settings || SettingsView;

package/dist/components/core/Calendar.js

@@ -183,10 +183,31 @@ export function DayPicker({ mode = 'single', selected, onSelect, month: controll
     const WeekNumber = components.WeekNumber || DefaultWeekNumber;
     const today = useMemo(() => startOfDay(new Date()), []);
     const grid = useMemo(() => buildGrid(displayMonth, weekStartsOn), [displayMonth, weekStartsOn]);
+    // Fallback tabbable cell: keep the grid keyboard-reachable when no day is
+    // focused and "today" isn't in the displayed month. Prefer the selected day
+    // (when it falls in this month), else the first non-disabled day of the month.
+    const fallbackTabbable = useMemo(() => {
+        if (focusedDay)
+            return null;
+        const todayInMonth = isSameMonth(today, displayMonth);
+        if (todayInMonth)
+            return null;
+        if (selected instanceof Date && isSameMonth(selected, displayMonth)) {
+            return startOfDay(selected);
+        }
+        for (const week of grid) {
+            for (const date of week) {
+                if (isSameMonth(date, displayMonth) && !isDisabled(date, disabled))
+                    return date;
+            }
+        }
+        return null;
+    }, [focusedDay, today, displayMonth, selected, grid, disabled]);
     // Selection handler
     const handleSelect = useCallback((date) => {
         if (mode === 'single') {
-            onSelect?.(sameDay(selected, date) ? undefined : date);
+            const isSame = selected instanceof Date && sameDay(selected, date);
+            onSelect?.(isSame ? undefined : date);
             return;
         }
         if (mode === 'range') {
@@ -301,6 +322,9 @@ export function DayPicker({ mode = 'single', selected, onSelect, month: controll
                                             focused
                                         };
                                         const dayObj = { date };
-                                        return (_jsx("td", { className: dayClass, "data-selected": modSel ? 'true' : undefined, "data-disabled": dis ? 'true' : undefined, "data-outside": outside ? 'true' : undefined, "data-today": tod ? 'true' : undefined, children: _jsx(DayButton, { day: dayObj, modifiers: modifiers, onClick: () => !dis && handleSelect(date), onFocus: () => handleDayFocus(date), tabIndex: focused || (!focusedDay && sameDay(date, today)) ? 0 : -1, "aria-selected": modSel, "aria-disabled": dis, "aria-current": tod ? 'date' : undefined, className: "", children: date.getDate() }) }, date.toISOString()));
+                                        const isTabbable = Boolean(focused ||
+                                            (!focusedDay && isSameMonth(today, displayMonth) && sameDay(date, today)) ||
+                                            (fallbackTabbable && sameDay(date, fallbackTabbable)));
+                                        return (_jsx("td", { role: "gridcell", className: dayClass, "aria-selected": modSel, "data-selected": modSel ? 'true' : undefined, "data-disabled": dis ? 'true' : undefined, "data-outside": outside ? 'true' : undefined, "data-today": tod ? 'true' : undefined, children: _jsx(DayButton, { day: dayObj, modifiers: modifiers, onClick: () => !dis && handleSelect(date), onFocus: () => handleDayFocus(date), tabIndex: isTabbable ? 0 : -1, "aria-pressed": modSel, "aria-disabled": dis, "aria-current": tod ? 'date' : undefined, className: "", children: date.getDate() }) }, date.toISOString()));
                                     }) }, wi))) })] })] }) }) }));
 }

package/dist/components/core/Command.d.ts

@@ -1,8 +1,7 @@
 import type * as React from 'react';
-export interface CommandProps {
+export interface CommandProps extends React.ComponentPropsWithoutRef<'div'> {
     className?: string;
     children?: React.ReactNode;
-    [key: string]: any;
 }
 export declare function Command({ className, children, ...props }: CommandProps): React.JSX.Element;
 export declare namespace Command {
@@ -13,49 +12,42 @@ export declare namespace Command {
     var Item: typeof CommandItem;
     var Separator: typeof CommandSeparator;
 }
-export interface CommandInputProps {
+export interface CommandInputProps extends Omit<React.ComponentPropsWithoutRef<'input'>, 'value' | 'onChange'> {
     className?: string;
     placeholder?: string;
     value?: string;
     onValueChange?: (value: string) => void;
-    [key: string]: any;
 }
 export declare function CommandInput({ className, placeholder, value: controlledValue, onValueChange, ...props }: CommandInputProps): React.JSX.Element;
-export interface CommandListProps {
+export interface CommandListProps extends React.ComponentPropsWithoutRef<'div'> {
     className?: string;
     children?: React.ReactNode;
-    [key: string]: any;
 }
 export declare function CommandList({ className, children, ...props }: CommandListProps): React.JSX.Element;
-export interface CommandEmptyProps {
+export interface CommandEmptyProps extends React.ComponentPropsWithoutRef<'div'> {
     className?: string;
     children?: React.ReactNode;
-    [key: string]: any;
 }
 export declare function CommandEmpty({ className, children, ...props }: CommandEmptyProps): React.JSX.Element | null;
-export interface CommandGroupProps {
+export interface CommandGroupProps extends React.ComponentPropsWithoutRef<'div'> {
     className?: string;
     heading?: React.ReactNode;
     children?: React.ReactNode;
-    [key: string]: any;
 }
 export declare function CommandGroup({ className, heading, children, ...props }: CommandGroupProps): React.JSX.Element;
-export interface CommandItemProps {
+export interface CommandItemProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onSelect'> {
     className?: string;
     value?: string;
     onSelect?: (value: string) => void;
     disabled?: boolean;
     children?: React.ReactNode;
-    [key: string]: any;
 }
 export declare function CommandItem({ className, value, onSelect, disabled, children, ...props }: CommandItemProps): React.JSX.Element | null;
-export interface CommandSeparatorProps {
+export interface CommandSeparatorProps extends React.ComponentPropsWithoutRef<'div'> {
     className?: string;
-    [key: string]: any;
 }
 export declare function CommandSeparator({ className, ...props }: CommandSeparatorProps): React.JSX.Element;
-export interface CommandShortcutProps {
+export interface CommandShortcutProps extends React.ComponentPropsWithoutRef<'span'> {
     className?: string;
-    [key: string]: any;
 }
 export declare function CommandShortcut({ className, ...props }: CommandShortcutProps): React.JSX.Element;

package/dist/components/core/Command.js

@@ -14,14 +14,22 @@ export function Command({ className, children, ...props }) {
     // input's aria-controls / aria-activedescendant can reference them.
     const listboxId = useId();
     const itemsRef = useRef(new Map()); // id -> { value, onSelect, disabled }
+    // Bumped on every register/unregister so the visible-id memo (which reads the
+    // non-reactive itemsRef) recomputes when the registered item set changes.
+    const [registrationVersion, setRegistrationVersion] = useState(0);
     const register = useCallback((id, meta) => {
         itemsRef.current.set(id, meta);
+        setRegistrationVersion((v) => v + 1);
     }, []);
     const unregister = useCallback((id) => {
         itemsRef.current.delete(id);
+        setRegistrationVersion((v) => v + 1);
         setSelectedId((cur) => (cur === id ? null : cur));
     }, []);
-    const visibleIds = useCallback(() => {
+    // Compute the ordered visible ids and the membership Set once per render,
+    // memoized on the filter and the registered item set. Items can then check
+    // visibility in O(1) instead of rescanning the whole list each render.
+    const visibleIds = useMemo(() => {
         const f = filter.trim().toLowerCase();
         const visible = [];
         for (const [id, meta] of itemsRef.current) {
@@ -31,24 +39,24 @@ export function Command({ className, children, ...props }) {
                 visible.push(id);
         }
         return visible;
-    }, [filter]);
-    // Keep selection valid when filter changes
+    }, [filter, registrationVersion]);
+    const visibleSet = useMemo(() => new Set(visibleIds), [visibleIds]);
+    const visibleCount = visibleSet.size;
+    // Keep selection valid when the visible set changes (filter input or
+    // registration), driven by the reactive derived ids rather than the ref.
     useEffect(() => {
-        const visible = visibleIds();
-        if (visible.length === 0) {
+        if (visibleIds.length === 0) {
             setSelectedId(null);
             return;
         }
-        if (!selectedId || !visible.includes(selectedId))
-            setSelectedId(visible[0]);
-    }, [filter, visibleIds, selectedId]);
+        setSelectedId((cur) => (cur && visibleSet.has(cur) ? cur : visibleIds[0]));
+    }, [visibleIds, visibleSet]);
     const move = useCallback((dir) => {
-        const visible = visibleIds();
-        if (visible.length === 0)
+        if (visibleIds.length === 0)
             return;
-        const idx = selectedId ? visible.indexOf(selectedId) : -1;
-        const next = (idx + dir + visible.length) % visible.length;
-        setSelectedId(visible[next]);
+        const idx = selectedId ? visibleIds.indexOf(selectedId) : -1;
+        const next = (idx + dir + visibleIds.length) % visibleIds.length;
+        setSelectedId(visibleIds[next]);
     }, [selectedId, visibleIds]);
     const triggerSelected = useCallback(() => {
         if (!selectedId)
@@ -56,9 +64,7 @@ export function Command({ className, children, ...props }) {
         const meta = itemsRef.current.get(selectedId);
         meta?.onSelect?.(meta.value);
     }, [selectedId]);
-    const isVisible = useCallback((id) => visibleIds().includes(id), [visibleIds]);
-    const visibleCount = visibleIds().length;
-    const value = useMemo(() => ({ filter, setFilter, selectedId, setSelectedId, listboxId, register, unregister, isVisible, visibleCount, move, triggerSelected }), [filter, selectedId, listboxId, register, unregister, isVisible, visibleCount, move, triggerSelected]);
+    const value = useMemo(() => ({ filter, setFilter, selectedId, setSelectedId, listboxId, register, unregister, visibleSet, visibleCount, move, triggerSelected }), [filter, selectedId, listboxId, register, unregister, visibleSet, visibleCount, move, triggerSelected]);
     return (_jsx(CommandContext.Provider, { value: value, children: _jsx("div", { className: className, ...props, children: children }) }));
 }
 export function CommandInput({ className, placeholder, value: controlledValue, onValueChange, ...props }) {
@@ -93,7 +99,7 @@ export function CommandInput({ className, placeholder, value: controlledValue, o
     // The input is the combobox. Real DOM focus stays here during arrow
     // navigation; only aria-activedescendant moves so screen readers announce
     // the active option (WAI-ARIA combobox + activedescendant pattern).
-    _jsx("input", { role: "combobox", "aria-autocomplete": "list", "aria-expanded": isExpanded, "aria-controls": listboxId, "aria-activedescendant": activeDescendant, autoComplete: "off", autoCorrect: "off", spellCheck: "false", value: value, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: placeholder, className: className, ...props }));
+    _jsx("input", { role: "combobox", "aria-autocomplete": "list", "aria-expanded": isExpanded, "aria-controls": listboxId, "aria-activedescendant": activeDescendant, "aria-label": "Search", autoComplete: "off", autoCorrect: "off", spellCheck: "false", value: value, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: placeholder, className: className, ...props }));
 }
 export function CommandList({ className, children, ...props }) {
     const { listboxId } = useCommand();
@@ -113,7 +119,7 @@ export function CommandItem({ className, value, onSelect, disabled = false, chil
     // This id is both the value tracked in selectedId and the option's DOM id,
     // which is what the input's aria-activedescendant references.
     const id = useId();
-    const { register, unregister, selectedId, setSelectedId, isVisible } = useCommand();
+    const { register, unregister, selectedId, setSelectedId, visibleSet } = useCommand();
     const optionRef = useRef(null);
     // Resolve a usable value string — fall back to children text if no value prop
     const resolvedValue = value ?? (typeof children === 'string' ? children : id);
@@ -128,7 +134,7 @@ export function CommandItem({ className, value, onSelect, disabled = false, chil
         if (isSelected)
             optionRef.current?.scrollIntoView({ block: 'nearest' });
     }, [isSelected]);
-    if (!isVisible(id))
+    if (!visibleSet.has(id))
         return null;
     const handleClick = () => {
         if (disabled)

package/dist/components/core/Context.js

@@ -90,13 +90,15 @@ export function ContextProvider({ children, constants }) {
         const appName = constants.appName || 'skateboard';
         return `${appName.toLowerCase().replace(/\s+/g, '-')}_user`;
     };
+    const isUser = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
     const getInitialUser = () => {
         try {
             const storageKey = getStorageKey();
             const storedUser = safeLSGetItem(storageKey);
             if (!storedUser || storedUser === "undefined")
                 return null;
-            return JSON.parse(storedUser);
+            const parsed = JSON.parse(storedUser);
+            return isUser(parsed) ? parsed : null;
         }
         catch (e) {
             console.error('Error parsing user data:', e instanceof Error ? e.message : String(e));

package/dist/components/core/Utilities.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useInRouterContext, useNavigate } from 'react-router';
 import { getDispatch } from './Context.js';
 // Constants will be initialized by the app shell
@@ -389,8 +389,13 @@ export async function showManage(stripeID) {
 export async function showCheckout(email, productIndex = 0) {
     try {
         const csrfToken = getCSRFToken();
+        const product = getConstants().stripeProducts?.[productIndex];
+        if (!product) {
+            console.error("No stripe product at index", productIndex);
+            return false;
+        }
         const params = {
-            lookup_key: getConstants().stripeProducts[productIndex].lookup_key,
+            lookup_key: product.lookup_key,
             email: email
         };
         const uri = `${getBackendURL()}/checkout`;
@@ -853,11 +858,15 @@ export function useListData(endpoint, sortFn = null) {
     const [data, setData] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
+    // Keep sortFn in a ref so an inline sort function doesn't retrigger the fetch effect every render
+    const sortFnRef = useRef(sortFn);
+    sortFnRef.current = sortFn;
     const fetchData = async (signal) => {
         setLoading(true);
         try {
             const result = await apiRequest(endpoint, { signal });
-            const sorted = sortFn ? result.sort(sortFn) : result;
+            const sort = sortFnRef.current;
+            const sorted = sort ? result.sort(sort) : result;
             setData(sorted);
             setError(null);
         }
@@ -875,7 +884,7 @@ export function useListData(endpoint, sortFn = null) {
         const controller = new AbortController();
         fetchData(controller.signal);
         return () => controller.abort();
-    }, [endpoint, sortFn]);
+    }, [endpoint]);
     return { data, loading, error, refetch: () => fetchData() };
 }
 /**

package/dist/components/layout/TabBar.js

@@ -8,6 +8,7 @@ export default function TabBar({ className, ...props }) {
     const location = useLocation();
     const { state } = getState();
     const constants = state.constants;
+    const currentPage = (location.pathname.split("/")[2] || "").toLowerCase();
     const tabs = [
         ...(constants?.pages || []).map((item) => ({
             title: item.title,
@@ -18,7 +19,7 @@ export default function TabBar({ className, ...props }) {
         { title: 'Settings', icon: 'settings', to: '/app/settings', match: 'settings' },
     ];
     return (_jsx("nav", { className: cn("fixed md:hidden bottom-0 inset-x-0 bg-background border-t border-border z-50", className), role: "navigation", "aria-label": "Main navigation", ...props, children: _jsx("div", { className: "flex justify-around items-center pt-2 pb-4", children: tabs.map((tab) => {
-                const isActive = location.pathname.includes(tab.match);
+                const isActive = currentPage === tab.match;
                 return (_jsxs(Link, { to: tab.to, className: cn("flex flex-col items-center gap-0.5 px-3 transition-colors", isActive ? "text-foreground" : "text-muted-foreground"), "aria-label": tab.title, "aria-current": isActive ? 'page' : undefined, children: [_jsx(DynamicIcon, { name: tab.icon, size: 24, strokeWidth: isActive ? 2 : 1.5 }), _jsx("span", { className: "text-xs", children: tab.title })] }, tab.title));
             }) }) }));
 }

package/dist/components/views/LandingView.js

@@ -51,7 +51,7 @@ export default function LandingView() {
     const goApp = () => navigate('/app');
     const navLinks = constants.navLinks || [
         { label: 'Features', href: '#features' },
-        ...(constants.stripeProducts?.length > 0 ? [{ label: 'Pricing', href: '#pricing' }] : []),
+        ...((constants.stripeProducts?.length ?? 0) > 0 ? [{ label: 'Pricing', href: '#pricing' }] : []),
     ];
     const footerLinks = constants.footerLinks || [
         ...(constants.privacyPolicy ? [PRIVACY_LINK] : []),

package/dist/components/views/NotFound.d.ts

@@ -1,3 +1,4 @@
+import type React from 'react';
 /**
  * 404 page displayed for unmatched routes.
  *
@@ -10,8 +11,6 @@
  *
  * <Route path="*" element={<NotFound />} />
  */
-export interface NotFoundProps {
-    className?: string;
-    [key: string]: any;
+export interface NotFoundProps extends React.HTMLAttributes<HTMLDivElement> {
 }
-export default function NotFound({ className, ...props }: NotFoundProps): import("react").JSX.Element;
+export default function NotFound({ className, ...props }: NotFoundProps): React.JSX.Element;

package/dist/components/views/SettingsView.js

@@ -30,6 +30,7 @@ export default function SettingsView() {
     const navigate = useNavigate();
     const user = state.user;
     const subscription = user?.subscription;
+    const stripeID = subscription?.stripeID;
     const showAuth = (constants.noLogin === false || typeof constants.noLogin === 'undefined') && user;
     function signOutClicked() {
         // Route through the canonical /signout flow (clears the server session and
@@ -40,10 +41,14 @@ export default function SettingsView() {
         const status = subscription?.status;
         if (status === null || typeof status === 'undefined')
             return "Free plan";
+        const expires = subscription?.expires;
+        const expiresDate = typeof expires === "number"
+            ? new Date(expires * 1000).toLocaleDateString('en-US')
+            : null;
         if (status === "active")
-            return `Renews ${new Date(subscription.expires * 1000).toLocaleDateString('en-US')}`;
+            return expiresDate ? `Renews ${expiresDate}` : "Active";
         if (status === "canceled")
-            return `Ends ${new Date(subscription.expires * 1000).toLocaleDateString('en-US')}`;
+            return expiresDate ? `Ends ${expiresDate}` : "Canceled";
         return `Plan ${status}`;
     }
     return (_jsxs("div", { className: "flex-1", children: [_jsx(Header, { title: "Settings", children: _jsx(ThemeToggle, { iconSize: 20 }) }), _jsxs("div", { className: "flex flex-col items-center p-4 gap-4", children: [!user && constants.noLogin !== true && (_jsx(Card, { className: "w-full max-w-lg", children: _jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Account" }), _jsx(CardDescription, { children: "Sign in to access your account settings." }), _jsx(CardAction, { children: _jsx(Button, { variant: "outline", size: "sm", onClick: () => {
@@ -53,5 +58,5 @@ export default function SettingsView() {
                                             else {
                                                 navigate('/signin');
                                             }
-                                        }, children: "Sign In" }) })] }) })), showAuth && (_jsx(Card, { className: "w-full max-w-lg", children: _jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-3", children: [_jsx(Avatar, { children: _jsx(AvatarFallback, { className: "bg-app text-white uppercase font-medium text-sm", children: user.name?.split(' ').map(w => w[0]).join('') || "NA" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2 capitalize", children: [user.name || "No User", subscription?.status === "active" && _jsx(Badge, { children: "Pro" })] }), _jsx(CardDescription, { className: "font-normal normal-case", children: user.email || "no@user.com" })] })] }), _jsx(CardAction, { children: _jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { render: _jsx(Button, { variant: "outline", size: "sm", children: "Sign Out" }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Sign Out" }), _jsx(AlertDialogDescription, { children: "Are you sure you want to sign out? You'll need to sign in again to access your account." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Cancel" }), _jsx(AlertDialogAction, { onClick: signOutClicked, children: "Sign Out" })] })] })] }) })] }) })), _jsx(Card, { className: "w-full max-w-lg", children: _jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Support" }), _jsx(CardDescription, { children: "How can we help?" }), _jsx(CardAction, { children: _jsx(Button, { variant: "outline", size: "sm", onClick: () => { window.location.href = `mailto:${constants.companyEmail}`; }, children: "Contact" }) })] }) }), showAuth && (_jsx(Card, { className: "w-full max-w-lg", children: _jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["Billing", subscription?.status === "active" ? (_jsx(Badge, { children: "Active" })) : subscription?.status === "canceled" ? (_jsx(Badge, { variant: "destructive", children: "Canceled" })) : (_jsx(Badge, { variant: "secondary", children: "Free" }))] }), _jsx(CardDescription, { children: getBillingDescription() }), _jsx(CardAction, { children: subscription?.stripeID ? (_jsx(Button, { variant: "outline", size: "sm", onClick: () => { showManage(subscription.stripeID); }, children: "Manage" })) : (_jsx(Button, { variant: "gradient", size: "sm", onClick: () => { showCheckout(user.email); }, children: "Subscribe" })) })] }) }))] }), _jsx("div", { className: "mt-8 text-center pb-24 md:pb-8", children: _jsxs("p", { className: "text-xs text-muted-foreground", children: ["v", constants.version || '0.0.0'] }) })] }));
+                                        }, children: "Sign In" }) })] }) })), showAuth && (_jsx(Card, { className: "w-full max-w-lg", children: _jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-3", children: [_jsx(Avatar, { children: _jsx(AvatarFallback, { className: "bg-app text-white uppercase font-medium text-sm", children: user.name?.split(' ').map(w => w[0]).join('') || "NA" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2 capitalize", children: [user.name || "No User", subscription?.status === "active" && _jsx(Badge, { children: "Pro" })] }), _jsx(CardDescription, { className: "font-normal normal-case", children: user.email || "no@user.com" })] })] }), _jsx(CardAction, { children: _jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { render: _jsx(Button, { variant: "outline", size: "sm", children: "Sign Out" }) }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Sign Out" }), _jsx(AlertDialogDescription, { children: "Are you sure you want to sign out? You'll need to sign in again to access your account." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Cancel" }), _jsx(AlertDialogAction, { onClick: signOutClicked, children: "Sign Out" })] })] })] }) })] }) })), _jsx(Card, { className: "w-full max-w-lg", children: _jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Support" }), _jsx(CardDescription, { children: "How can we help?" }), _jsx(CardAction, { children: _jsx(Button, { variant: "outline", size: "sm", onClick: () => { window.location.href = `mailto:${constants.companyEmail}`; }, children: "Contact" }) })] }) }), showAuth && (_jsx(Card, { className: "w-full max-w-lg", children: _jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["Billing", subscription?.status === "active" ? (_jsx(Badge, { children: "Active" })) : subscription?.status === "canceled" ? (_jsx(Badge, { variant: "destructive", children: "Canceled" })) : (_jsx(Badge, { variant: "secondary", children: "Free" }))] }), _jsx(CardDescription, { children: getBillingDescription() }), _jsx(CardAction, { children: stripeID ? (_jsx(Button, { variant: "outline", size: "sm", onClick: () => { showManage(stripeID); }, children: "Manage" })) : (_jsx(Button, { variant: "gradient", size: "sm", onClick: () => { showCheckout(user.email); }, children: "Subscribe" })) })] }) }))] }), _jsx("div", { className: "mt-8 text-center pb-24 md:pb-8", children: _jsxs("p", { className: "text-xs text-muted-foreground", children: ["v", constants.version || '0.0.0'] }) })] }));
 }

package/dist/components/views/SignInView.js

@@ -8,7 +8,7 @@ import { Card, CardContent, CardHeader } from "../../shadcn/ui/card.js";
 import { Alert, AlertDescription } from "../../shadcn/ui/alert.js";
 import DynamicIcon from '../core/DynamicIcon.js';
 import { getState } from "../core/Context.js";
-import { getBackendURL, useSafeNavigate } from '../core/Utilities.js';
+import { getBackendURL, useSafeNavigate, getAppKey } from '../core/Utilities.js';
 export default function SignInView({ className, embedded = false, onSuccess, onSwitchMode, ...props }) {
     const { state, dispatch } = getState();
     const constants = state.constants;
@@ -39,6 +39,12 @@ export default function SignInView({ className, embedded = false, onSuccess, onS
             });
             if (response.ok) {
                 const data = await response.json();
+                // Save CSRF token to localStorage for isAuthenticated() check
+                const csrfCookie = document.cookie.split('; ').find(row => row.startsWith('csrf_token='));
+                const csrfToken = csrfCookie ? csrfCookie.split('=')[1] : data.csrfToken;
+                if (csrfToken) {
+                    localStorage.setItem(getAppKey('csrf'), csrfToken);
+                }
                 dispatch({ type: 'SET_USER', payload: data });
                 if (embedded && onSuccess) {
                     onSuccess();

package/dist/components/views/SignUpView.js

@@ -16,6 +16,7 @@ export default function SignUpView({ className, embedded = false, onSuccess, onS
     const [password, setPassword] = useState('');
     const [name, setName] = useState('');
     const [errorMessage, setErrorMessage] = useState('');
+    const [isSubmitting, setIsSubmitting] = useState(false);
     const navigate = useSafeNavigate();
     const nameInputRef = useRef(null);
     // Focus the first input on mount
@@ -26,6 +27,8 @@ export default function SignUpView({ className, embedded = false, onSuccess, onS
     }, []);
     async function signUpClicked(e) {
         e.preventDefault();
+        if (isSubmitting)
+            return;
         // Client-side password validation (matches backend: 6-72 chars)
         if (password.length < 6) {
             setErrorMessage('Password must be at least 6 characters');
@@ -35,6 +38,7 @@ export default function SignUpView({ className, embedded = false, onSuccess, onS
             setErrorMessage('Password must be 72 characters or less');
             return;
         }
+        setIsSubmitting(true);
         try {
             const response = await fetch(`${getBackendURL()}/signup`, {
                 method: 'POST',
@@ -66,6 +70,9 @@ export default function SignUpView({ className, embedded = false, onSuccess, onS
             console.error('Signup failed:', error);
             setErrorMessage('Server Error');
         }
+        finally {
+            setIsSubmitting(false);
+        }
     }
     const formContent = (_jsxs(_Fragment, { children: [errorMessage !== '' && (_jsx(Alert, { variant: "destructive", className: "mb-4", children: _jsx(AlertDescription, { className: "text-center", children: errorMessage }) })), _jsxs("form", { onSubmit: signUpClicked, className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "name", children: "Name" }), _jsx(Input, { ref: nameInputRef, id: "name", placeholder: "John Doe", autoComplete: "name", required: true, value: name, onChange: (e) => {
                                     setName(e.target.value);
@@ -76,7 +83,7 @@ export default function SignUpView({ className, embedded = false, onSuccess, onS
                                 } })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "password", children: "Password" }), _jsx(Input, { id: "password", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", autoComplete: "new-password", required: true, minLength: 6, maxLength: 72, value: password, onChange: (e) => {
                                     setPassword(e.target.value);
                                     setErrorMessage('');
-                                } }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Minimum 6 characters" })] }), _jsx(Button, { type: "submit", variant: "gradient", size: "cta", className: "w-full", children: _jsxs("span", { className: "relative z-20 flex items-center justify-center gap-2 drop-shadow-sm", children: [_jsx(DynamicIcon, { name: "sparkles", size: 16, color: "currentColor", strokeWidth: 2, className: "animate-pulse" }), "Sign Up"] }) }), _jsxs("div", { className: "text-center text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: "Already have an account?" }), " ", _jsx(Button, { variant: "link", className: "p-0 h-auto", onClick: (e) => { e.preventDefault(); embedded && onSwitchMode ? onSwitchMode() : navigate('/signin'); }, children: "Sign In" })] })] }), _jsxs("div", { className: "mt-4 text-center text-xs text-muted-foreground", children: ["By registering you agree to our", " ", _jsx("a", { href: "/terms", className: "underline underline-offset-4 hover:text-foreground", children: "Terms of Service" }), ",", " ", _jsx("a", { href: "/eula", className: "underline underline-offset-4 hover:text-foreground", children: "EULA" }), ",", " ", _jsx("a", { href: "/privacy", className: "underline underline-offset-4 hover:text-foreground", children: "Privacy Policy" })] })] }));
+                                } }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Minimum 6 characters" })] }), _jsx(Button, { type: "submit", variant: "gradient", size: "cta", className: "w-full", disabled: isSubmitting, children: _jsxs("span", { className: "relative z-20 flex items-center justify-center gap-2 drop-shadow-sm", children: [_jsx(DynamicIcon, { name: "sparkles", size: 16, color: "currentColor", strokeWidth: 2, className: "animate-pulse" }), isSubmitting ? "Signing up..." : "Sign Up"] }) }), _jsxs("div", { className: "text-center text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: "Already have an account?" }), " ", _jsx(Button, { variant: "link", className: "p-0 h-auto", onClick: (e) => { e.preventDefault(); embedded && onSwitchMode ? onSwitchMode() : navigate('/signin'); }, children: "Sign In" })] })] }), _jsxs("div", { className: "mt-4 text-center text-xs text-muted-foreground", children: ["By registering you agree to our", " ", _jsx("a", { href: "/terms", className: "underline underline-offset-4 hover:text-foreground", children: "Terms of Service" }), ",", " ", _jsx("a", { href: "/eula", className: "underline underline-offset-4 hover:text-foreground", children: "EULA" }), ",", " ", _jsx("a", { href: "/privacy", className: "underline underline-offset-4 hover:text-foreground", children: "Privacy Policy" })] })] }));
     if (embedded) {
         return formContent;
     }

package/dist/ui/accordion.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../shadcn/lib/utils.js";
 import { ChevronDownIcon } from "../icons/index.js";
+import { useControllableState } from "./use-controllable-state.js";
 const AccordionContext = React.createContext({
     value: [],
     toggle: () => { },
@@ -20,14 +21,11 @@ function useItem() {
  * `--accordion-panel-height` var or keyframes).
  */
 function Accordion({ className, value: controlled, defaultValue = [], onValueChange, openMultiple = true, ...props }) {
-    const [value, setValue] = React.useState(defaultValue);
-    const isControlled = controlled !== undefined;
-    const open = isControlled ? controlled : value;
-    const commit = (next) => {
-        if (!isControlled)
-            setValue(next);
-        onValueChange?.(next);
-    };
+    const [open, setOpen] = useControllableState({
+        value: controlled,
+        defaultValue,
+        onChange: onValueChange,
+    });
     const toggle = (item) => {
         const has = open.includes(item);
         const next = has
@@ -35,9 +33,33 @@ function Accordion({ className, value: controlled, defaultValue = [], onValueCha
             : openMultiple
                 ? [...open, item]
                 : [item];
-        commit(next);
+        setOpen(next);
+    };
+    const onKeyDown = (e) => {
+        props.onKeyDown?.(e);
+        if (e.defaultPrevented)
+            return;
+        if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key))
+            return;
+        const triggers = Array.from(e.currentTarget.querySelectorAll('[data-slot="accordion-trigger"]:not([disabled])'));
+        const current = triggers.findIndex((t) => t === document.activeElement);
+        if (current < 0)
+            return;
+        let next = -1;
+        if (e.key === "ArrowDown")
+            next = (current + 1) % triggers.length;
+        else if (e.key === "ArrowUp")
+            next = (current - 1 + triggers.length) % triggers.length;
+        else if (e.key === "Home")
+            next = 0;
+        else if (e.key === "End")
+            next = triggers.length - 1;
+        if (next >= 0) {
+            e.preventDefault();
+            triggers[next].focus();
+        }
     };
-    return (_jsx(AccordionContext.Provider, { value: { value: open, toggle }, children: _jsx("div", { "data-slot": "accordion", className: cn("flex w-full flex-col", className), ...props }) }));
+    return (_jsx(AccordionContext.Provider, { value: { value: open, toggle }, children: _jsx("div", { "data-slot": "accordion", className: cn("flex w-full flex-col", className), ...props, onKeyDown: onKeyDown }) }));
 }
 function AccordionItem({ className, value, ...props }) {
     const { value: openValues } = React.useContext(AccordionContext);

package/dist/ui/alert-dialog.js

@@ -23,9 +23,12 @@ function AlertDialog({ open, defaultOpen = false, onOpenChange, children, }) {
         onChange: onOpenChange,
     });
     const { titleId, descriptionId, registerTitle, registerDescription, labelledBy, describedBy, } = useDialogLabelling();
+    // Stable id wiring the trigger's aria-controls to the content's id.
+    const contentId = React.useId();
     return (_jsx(AlertDialogContext.Provider, { value: {
             open: isOpen,
             setOpen,
+            contentId,
             titleId,
             descriptionId,
             registerTitle,
@@ -35,10 +38,10 @@ function AlertDialog({ open, defaultOpen = false, onOpenChange, children, }) {
         }, children: children }));
 }
 function AlertDialogTrigger({ className, asChild = false, render, nativeButton: _nativeButton, children, onClick, ...props }) {
-    const { open, setOpen } = useAlertDialog();
+    const { open, setOpen, contentId } = useAlertDialog();
     const { useSlot, slotChild } = resolveRender(asChild, render, children);
     const Comp = useSlot ? Slot : "button";
-    return (_jsx(Comp, { type: useSlot ? undefined : "button", "data-slot": "alert-dialog-trigger", "aria-haspopup": "dialog", "data-state": open ? "open" : "closed", className: cn("cursor-pointer", className), onClick: (e) => {
+    return (_jsx(Comp, { type: useSlot ? undefined : "button", "data-slot": "alert-dialog-trigger", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": open ? contentId : undefined, "data-state": open ? "open" : "closed", className: cn("cursor-pointer", className), onClick: (e) => {
             onClick?.(e);
             if (!e.defaultPrevented)
                 setOpen(true);
@@ -51,7 +54,7 @@ function AlertDialogOverlay() {
     return null;
 }
 function AlertDialogContent({ className, size = "default", children, ...props }) {
-    const { open, setOpen, labelledBy, describedBy } = useAlertDialog();
+    const { open, setOpen, contentId, labelledBy, describedBy } = useAlertDialog();
     const ref = React.useRef(null);
     React.useEffect(() => {
         const node = ref.current;
@@ -68,7 +71,7 @@ function AlertDialogContent({ className, size = "default", children, ...props })
     return (_jsx("dialog", { ref: ref, role: "alertdialog", "aria-labelledby": labelledBy, "aria-describedby": describedBy, "data-slot": "alert-dialog-overlay", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", onCancel: (e) => {
             e.preventDefault();
             setOpen(false);
-        }, onClose: () => setOpen(false), className: "m-0 grid max-h-none max-w-none place-items-center bg-transparent p-4 backdrop:bg-black/10 backdrop:duration-100 supports-backdrop-filter:backdrop:backdrop-blur-xs open:fixed open:inset-0 open:size-full", children: open ? (_jsx("div", { "data-slot": "alert-dialog-content", "data-size": size, "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, className: cn("group/alert-dialog-content relative grid w-full gap-6 rounded-xl bg-background p-6 text-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", className), ...props, children: children })) : null }));
+        }, onClose: () => setOpen(false), className: "m-0 grid max-h-none max-w-none place-items-center bg-transparent p-4 backdrop:bg-black/10 backdrop:duration-100 supports-backdrop-filter:backdrop:backdrop-blur-xs open:fixed open:inset-0 open:size-full", children: open ? (_jsx("div", { id: contentId, "data-slot": "alert-dialog-content", "data-size": size, "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, className: cn("group/alert-dialog-content relative grid w-full gap-6 rounded-xl bg-background p-6 text-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", className), ...props, children: children })) : null }));
 }
 function AlertDialogHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "alert-dialog-header", className: cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className), ...props }));

package/dist/ui/avatar.js

@@ -13,17 +13,30 @@ function Avatar({ className, size = "default", ...props }) {
 }
 function AvatarImage({ className, onLoad, onError, src, ...props }) {
     const { status, setStatus } = React.useContext(AvatarContext);
+    const imgRef = React.useRef(null);
     // A missing/empty src never fires load or error, so mark it errored up front;
     // otherwise the fallback would sit next to a blank img, each squeezed to half.
     React.useEffect(() => {
         if (!src)
             setStatus("error");
     }, [src, setStatus]);
+    // A cached image can finish loading before React wires up onLoad, leaving the
+    // fallback stuck over a hidden loaded image. Reconcile against the DOM on mount
+    // and on src change (matches Base UI's cached-image handling).
+    React.useLayoutEffect(() => {
+        const img = imgRef.current;
+        if (!img || !img.complete)
+            return;
+        if (img.naturalWidth > 0)
+            setStatus("loaded");
+        else
+            setStatus("error");
+    }, [src, setStatus]);
     // Render nothing until the image has actually loaded — the fallback owns the
     // box until then (matches Base UI, avoids the blank-img squeeze on slow loads).
     if (!src || status === "error")
         return null;
-    return (_jsx("img", { src: src, "data-slot": "avatar-image", className: cn("absolute inset-0 aspect-square size-full rounded-full object-cover", status === "loaded" ? undefined : "opacity-0", className), onLoad: (e) => {
+    return (_jsx("img", { ref: imgRef, src: src, "data-slot": "avatar-image", className: cn("absolute inset-0 aspect-square size-full rounded-full object-cover", status === "loaded" ? undefined : "opacity-0", className), onLoad: (e) => {
             setStatus("loaded");
             onLoad?.(e);
         }, onError: (e) => {