@tristan2828/ui-foundation 3.1.1 → 3.1.2

package/conventions/docs/cell-patterns.md

@@ -162,7 +162,28 @@ When the useful question is "how soon?" rather than "which day?".
   rebuilt as UTC midnight** (`Date.UTC(y, m, d)`). Subtracting `Date.now()`
   shifts the answer by a day for anyone west of UTC.
 - Relative text **goes stale**, so a fixture pinning a date drifts. Freeze
-  the clock (Playwright's `page.clock`) in any test asserting one.
+  the clock (Playwright's `page.clock`) in any test asserting one, and
+  assert one past and one future value:
+
+```ts
+// West of UTC, where subtracting Date.now() would be off by a day.
+test.use({ timezoneId: 'America/Los_Angeles' })
+
+test('release dates read relative to today', async ({ page }) => {
+  // Before goto, so the first render already sees it. Noon UTC is the same
+  // calendar day in every timezone from UTC-11 to UTC+11.
+  await page.clock.setFixedTime(new Date('2026-06-01T12:00:00Z'))
+  await page.goto('/games')
+  // Mock fixtures: one released 2026-04-01, one due 2026-06-22.
+  await expect(page.getByRole('cell', { name: '2 months ago' })).toBeVisible()
+  await expect(page.getByRole('cell', { name: 'in 3 weeks' })).toBeVisible()
+})
+```
+
+`setFixedTime` pins `Date.now()` and `new Date()` and leaves the real
+timers alone, so debounces and TanStack Query behave as usual. Reach for
+`page.clock.install()` only when a test has to move time forward.
+
 - `title` is mouse-only. If the exact date matters, use pattern 4 instead.
 - **Cost:** "2 years ago" is vague, and the column doesn't look sorted even
   though server-side sorting still works.

package/dist/components/app/app-shell.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LogOutIcon, MoonIcon, SunIcon } from 'lucide-react';
 import { useTheme } from 'next-themes';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { NavLink, Navigate, Outlet, useLocation } from 'react-router';
 import { useAuth } from '../../auth/use-auth.js';
 import { ErrorState } from './error-state.js';
 import { Button } from '../ui/button.js';
 import { Skeleton } from '../ui/skeleton.js';
-import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarTrigger, } from '../ui/sidebar.js';
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarTrigger, useSidebar, } from '../ui/sidebar.js';
 import { Toaster } from '../ui/sonner.js';
 import { TooltipProvider } from '../ui/tooltip.js';
 // Must match SIDEBAR_COOKIE_NAME in ../ui/sidebar.tsx, which writes the
@@ -17,6 +17,18 @@ function storedSidebarOpen(fallback) {
     const match = document.cookie.match(new RegExp(`(?:^|; )${SIDEBAR_COOKIE_NAME}=([^;]*)`));
     return match ? match[1] === 'true' : fallback;
 }
+// Below the mobile breakpoint the sidebar is a modal sheet, and the
+// primitive leaves it open when one of its links navigates, covering the
+// page the user just asked for. Keyed on location.key, so following a link
+// to the page already showing closes it too. Covers sidebarExtra's links.
+function CloseMobileSidebarOnNavigate() {
+    const { setOpenMobile } = useSidebar();
+    const { key } = useLocation();
+    useEffect(() => {
+        setOpenMobile(false);
+    }, [key, setOpenMobile]);
+    return null;
+}
 function ThemeToggle() {
     const { resolvedTheme, setTheme } = useTheme();
     const isDark = resolvedTheme === 'dark';
@@ -52,7 +64,7 @@ export function AppShell({ title, nav, sidebarExtra, defaultSidebarOpen = true }
         const from = `${location.pathname}${location.search}${location.hash}`;
         return _jsx(Navigate, { to: "/login", replace: true, state: isLoggingOut ? undefined : { from } });
     }
-    return (_jsxs(TooltipProvider, { children: [_jsxs(SidebarProvider, { defaultOpen: storedSidebarOpen(defaultSidebarOpen), children: [_jsx("nav", { "aria-label": "Primary", children: _jsxs(Sidebar, { collapsible: "icon", children: [_jsx(SidebarHeader, { children: _jsx("span", { className: "px-2 text-sm font-semibold text-sidebar-foreground group-data-[collapsible=icon]:hidden", children: title }) }), _jsxs(SidebarContent, { children: [_jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { children: "Navigation" }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: nav.map(({ to, label, icon: Icon, end }) => {
+    return (_jsxs(TooltipProvider, { children: [_jsxs(SidebarProvider, { defaultOpen: storedSidebarOpen(defaultSidebarOpen), children: [_jsx(CloseMobileSidebarOnNavigate, {}), _jsx("nav", { "aria-label": "Primary", children: _jsxs(Sidebar, { collapsible: "icon", children: [_jsx(SidebarHeader, { children: _jsx("span", { className: "px-2 text-sm font-semibold text-sidebar-foreground group-data-[collapsible=icon]:hidden", children: title }) }), _jsxs(SidebarContent, { children: [_jsxs(SidebarGroup, { children: [_jsx(SidebarGroupLabel, { children: "Navigation" }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: nav.map(({ to, label, icon: Icon, end }) => {
                                                             const isActive = end
                                                                 ? location.pathname === to
                                                                 : location.pathname.startsWith(to);

package/dist/components/ui/sidebar.js

@@ -182,12 +182,17 @@ const sidebarMenuButtonVariants = cva("peer/menu-button group/menu-button flex w
 });
 function SidebarMenuButton({ render, isActive = false, variant = "default", size = "default", tooltip, className, ...props }) {
     const { isMobile, state } = useSidebar();
+    // Patched (ui-foundation): upstream keeps the tooltip on mobile and only
+    // hides its content, so keyboard focus still opened an invisible tooltip
+    // and the first Escape closed that instead of the sidebar sheet. On
+    // mobile the label is always visible, so there is no tooltip at all.
+    const hasTooltip = !!tooltip && !isMobile;
     const comp = useRender({
         defaultTagName: "button",
         props: mergeProps({
             className: cn(sidebarMenuButtonVariants({ variant, size }), className),
         }, props),
-        render: !tooltip ? render : _jsx(TooltipTrigger, { render: render }),
+        render: !hasTooltip ? render : _jsx(TooltipTrigger, { render: render }),
         state: {
             slot: "sidebar-menu-button",
             sidebar: "menu-button",
@@ -195,7 +200,7 @@ function SidebarMenuButton({ render, isActive = false, variant = "default", size
             active: isActive,
         },
     });
-    if (!tooltip) {
+    if (!hasTooltip) {
         return comp;
     }
     if (typeof tooltip === "string") {
@@ -203,7 +208,7 @@ function SidebarMenuButton({ render, isActive = false, variant = "default", size
             children: tooltip,
         };
     }
-    return (_jsxs(Tooltip, { children: [comp, _jsx(TooltipContent, { side: "right", align: "center", hidden: state !== "collapsed" || isMobile, ...tooltip })] }));
+    return (_jsxs(Tooltip, { children: [comp, _jsx(TooltipContent, { side: "right", align: "center", hidden: state !== "collapsed", ...tooltip })] }));
 }
 function SidebarMenuAction({ className, render, showOnHover = false, ...props }) {
     return useRender({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tristan2828/ui-foundation",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "description": "Shared UI foundation for contract-first, database-backed React apps: shadcn primitives, DataTable/EntityForm composites, auth, the gateway error seam, design tokens, lint rules and the AI playbook.",
   "license": "MIT",
   "repository": {