@setsquare/ui 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.2.2 — 2026-10-05
+
+- **`AppHeader` takes a `brand`** for phones, where the breadcrumbs give way to the product. It showed the
+  shell's `productName` as plain text, so a product whose sidebar header shows a mark beside its name lost the mark
+  as soon as the sidebar became a sheet. Without `brand` the header is unchanged. Found by the Docuccino portal.
+
+## 0.2.1 — 2026-10-04
+
+- **The prefetch template imports nothing from Next's internals.** `templates/next/prefetch-on-intent.ts` imported
+  `PrefetchKind` from `next/dist/…/router-reducer-types`, a path Next doesn't promise to keep. It now passes
+  `{ kind: 'full' }` typed for itself; `package:verify` builds it and checks the page transition still runs.
+- **Self-hosted fonts.** The README shows how to load Atkinson Hyperlegible Next and Mono from Fontsource with
+  `next/font/local`, for builds with no network and a CSP at `font-src 'self'`.
+
 ## 0.2.0 — 2026-10-04
 
 Fixes and additions from the first product built on the package, the Docuccino portal.

package/README.md

@@ -29,7 +29,42 @@ In the app's global stylesheet, after Tailwind:
 
 `styles.css` brings the tokens as CSS variables (four themes), Tailwind's theme mapping (`bg-primary`, `h-control`, `min-h-target`…), the `focus-ring` and type utilities, the `dark:` and `aaa:` variants, and an `@source` that points Tailwind at the package's compiled components, which Tailwind doesn't scan in `node_modules` by itself.
 
-Load the fonts yourself: the tokens name Atkinson Hyperlegible Next and Atkinson Hyperlegible Mono (`next/font/google`), or set `--font-sans` and `--font-mono` to your own.
+Load the fonts yourself: the tokens name Atkinson Hyperlegible Next and Atkinson Hyperlegible Mono. `next/font/google` downloads them at build time and serves them from your own origin; or set `--font-sans` and `--font-mono` to your own.
+
+To serve them from the app with no Google request at build time either (a build with no network, a Content-Security-Policy at `font-src 'self'`), install the variable fonts from Fontsource (`@fontsource-variable/atkinson-hyperlegible-next` and `-mono`, SIL OFL 1.1) and load them with `next/font/local`:
+
+```tsx
+// app/layout.tsx
+import localFont from 'next/font/local';
+
+const sans = localFont({
+  src: [
+    { path: '../node_modules/@fontsource-variable/atkinson-hyperlegible-next/files/atkinson-hyperlegible-next-latin-wght-normal.woff2', weight: '200 800', style: 'normal' },
+    { path: '../node_modules/@fontsource-variable/atkinson-hyperlegible-next/files/atkinson-hyperlegible-next-latin-wght-italic.woff2', weight: '200 800', style: 'italic' },
+  ],
+  variable: '--font-atkinson-next',
+  display: 'swap',
+});
+const mono = localFont({
+  src: [
+    { path: '../node_modules/@fontsource-variable/atkinson-hyperlegible-mono/files/atkinson-hyperlegible-mono-latin-wght-normal.woff2', weight: '200 800', style: 'normal' },
+  ],
+  variable: '--font-atkinson-mono',
+  display: 'swap',
+});
+// <html className={`${sans.variable} ${mono.variable}`}>
+```
+
+```css
+/* globals.css, after @setsquare/ui/styles.css. The fallback inside var() keeps the stack valid on a page
+   that doesn't load the fonts (a global-error page). */
+:root {
+  --font-sans: var(--font-atkinson-next, 'Atkinson Hyperlegible Next'), ui-sans-serif, system-ui, sans-serif;
+  --font-mono: var(--font-atkinson-mono, 'Atkinson Hyperlegible Mono'), ui-monospace, monospace;
+}
+```
+
+`next/font` gives the face a generated family name, which is why the stack points at its variable rather than at the name the tokens use. Add the `latin-ext` files too if your copy needs them.
 
 ```tsx
 import { Button, DashboardShell, ShellMain, TextField } from '@setsquare/ui';

package/dist/shell/app-header.d.ts

@@ -1,8 +1,14 @@
 import type { ReactNode } from 'react';
 import { type SidebarTriggerLabels } from './sidebar.js';
 export interface AppHeaderProps {
-    /** Usually <Breadcrumbs>. On phones the product name shows instead. */
+    /** Usually <Breadcrumbs>. On phones `brand` shows instead. */
     breadcrumbs?: ReactNode;
+    /**
+     * What shows on phones in place of the breadcrumbs: the product's mark and name, as its sidebar header shows
+     * them, so the brand doesn't change when the sidebar becomes a sheet. Not a link: a second link to the home page
+     * under another name fails 3.2.4. Default: the shell's `productName`, in bold.
+     */
+    brand?: ReactNode;
     /** Usually <AppSearch>. */
     search?: ReactNode;
     /** Help, notifications — the same buttons in the same order on every page (help: 3.2.6; notifications: our rule). */
@@ -12,5 +18,5 @@ export interface AppHeaderProps {
     className?: string;
 }
 /** The inset's top bar: sidebar trigger, where you are, search and the fixed actions. */
-export declare function AppHeader({ breadcrumbs, search, actions, labels, className }: AppHeaderProps): import("react").JSX.Element;
+export declare function AppHeader({ breadcrumbs, brand, search, actions, labels, className, }: AppHeaderProps): import("react").JSX.Element;
 //# sourceMappingURL=app-header.d.ts.map

package/dist/shell/app-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-header.d.ts","sourceRoot":"","sources":["../../src/shell/app-header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAkB,KAAK,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEzE,MAAM,WAAW,cAAc;IAC7B,uEAAuE;IACvE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,qHAAqH;IACrH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,yFAAyF;AACzF,wBAAgB,SAAS,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,cAAc,+BAyB5F"}
+{"version":3,"file":"app-header.d.ts","sourceRoot":"","sources":["../../src/shell/app-header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAkB,KAAK,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEzE,MAAM,WAAW,cAAc;IAC7B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,qHAAqH;IACrH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,yFAAyF;AACzF,wBAAgB,SAAS,CAAC,EACxB,WAAW,EACX,KAAK,EACL,MAAM,EACN,OAAO,EACP,MAAM,EACN,SAAS,GACV,EAAE,cAAc,+BAuBhB"}

package/dist/shell/app-header.js

@@ -4,8 +4,10 @@ import { cn } from '../lib/cn.js';
 import { useShell } from './dashboard-shell.js';
 import { SidebarTrigger } from './sidebar.js';
 /** The inset's top bar: sidebar trigger, where you are, search and the fixed actions. */
-export function AppHeader({ breadcrumbs, search, actions, labels, className }) {
+export function AppHeader({ breadcrumbs, brand, search, actions, labels, className, }) {
     const { size, productName } = useShell();
-    return (_jsxs("header", { style: { viewTransitionName: 'shell-header' }, className: cn('flex h-header shrink-0 items-center gap-2 border-b border-border px-3 @min-[48rem]/shell:px-4', className), children: [_jsx(SidebarTrigger, { labels: labels }), _jsx("span", { "aria-hidden": "true", className: "mx-1 h-6 w-px bg-border @max-[48rem]/shell:hidden" }), _jsx("div", { className: "flex min-w-0 flex-1 items-center", children: size === 'mobile' ? (_jsx("span", { className: "truncate text-base font-bold", children: productName })) : (breadcrumbs) }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [search, actions] })] }));
+    return (_jsxs("header", { style: { viewTransitionName: 'shell-header' }, className: cn('flex h-header shrink-0 items-center gap-2 border-b border-border px-3 @min-[48rem]/shell:px-4', className), children: [_jsx(SidebarTrigger, { labels: labels }), _jsx("span", { "aria-hidden": "true", className: "mx-1 h-6 w-px bg-border @max-[48rem]/shell:hidden" }), _jsx("div", { className: "flex min-w-0 flex-1 items-center", children: size === 'mobile'
+                    ? (brand ?? _jsx("span", { className: "truncate text-base font-bold", children: productName }))
+                    : breadcrumbs }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [search, actions] })] }));
 }
 //# sourceMappingURL=app-header.js.map

package/dist/shell/app-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-header.js","sourceRoot":"","sources":["../../src/shell/app-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,cAAc,EAA6B,MAAM,cAAc,CAAC;AAczE,yFAAyF;AACzF,MAAM,UAAU,SAAS,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAkB;IAC3F,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,QAAQ,EAAE,CAAC;IACzC,OAAO,CACL,kBACE,KAAK,EAAE,EAAE,kBAAkB,EAAE,cAAc,EAAE,EAC7C,SAAS,EAAE,EAAE,CACX,+FAA+F,EAC/F,SAAS,CACV,aAED,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,GAAI,EAClC,8BAAkB,MAAM,EAAC,SAAS,EAAC,mDAAmD,GAAG,EACzF,cAAK,SAAS,EAAC,kCAAkC,YAC9C,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CACnB,eAAM,SAAS,EAAC,8BAA8B,YAAE,WAAW,GAAQ,CACpE,CAAC,CAAC,CAAC,CACF,WAAW,CACZ,GACG,EACN,eAAK,SAAS,EAAC,kCAAkC,aAC9C,MAAM,EACN,OAAO,IACJ,IACC,CACV,CAAC;AACJ,CAAC"}
+{"version":3,"file":"app-header.js","sourceRoot":"","sources":["../../src/shell/app-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,cAAc,EAA6B,MAAM,cAAc,CAAC;AAoBzE,yFAAyF;AACzF,MAAM,UAAU,SAAS,CAAC,EACxB,WAAW,EACX,KAAK,EACL,MAAM,EACN,OAAO,EACP,MAAM,EACN,SAAS,GACM;IACf,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,QAAQ,EAAE,CAAC;IACzC,OAAO,CACL,kBACE,KAAK,EAAE,EAAE,kBAAkB,EAAE,cAAc,EAAE,EAC7C,SAAS,EAAE,EAAE,CACX,+FAA+F,EAC/F,SAAS,CACV,aAED,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,GAAI,EAClC,8BAAkB,MAAM,EAAC,SAAS,EAAC,mDAAmD,GAAG,EACzF,cAAK,SAAS,EAAC,kCAAkC,YAC9C,IAAI,KAAK,QAAQ;oBAChB,CAAC,CAAC,CAAC,KAAK,IAAI,eAAM,SAAS,EAAC,8BAA8B,YAAE,WAAW,GAAQ,CAAC;oBAChF,CAAC,CAAC,WAAW,GACX,EACN,eAAK,SAAS,EAAC,kCAAkC,aAC9C,MAAM,EACN,OAAO,IACJ,IACC,CACV,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@setsquare/ui",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "React Aria components, design tokens, a dashboard shell and a site shell, with a switch between WCAG 2.2 AA and AAA sizing, spacing and contrast.",
   "license": "Apache-2.0",
   "homepage": "https://github.com/Worktree-Amigos/setsquare-ui#readme",

package/templates/next/prefetch-on-intent.ts

@@ -3,8 +3,15 @@
 
 import { useEffect } from 'react';
 import type { useRouter } from 'next/navigation';
-// router.prefetch's own options type names this enum, and Next exports it from nowhere public.
-import { PrefetchKind } from 'next/dist/client/components/router-reducer/router-reducer-types';
+
+/**
+ * `router.prefetch` as Next 16 runs it. It reads `options.kind`, and `'full'` is the value of its internal
+ * `PrefetchKind.FULL` (the whole page, which a dynamic route needs), but its public types and documentation list
+ * only `onInvalidate`, and typed routes drop the options altogether. Typed here rather than imported from
+ * `next/dist`, so the template depends on no internal module path; if Next stops reading `kind`, the prefetch
+ * falls back to its default.
+ */
+type FullPrefetch = (href: string, options: { kind: 'full' }) => void;
 
 /**
  * Warms a page when a pointer moves over a link to it or the link takes focus, as Next's own <Link> does —
@@ -19,7 +26,7 @@ export function usePrefetchOnIntent(router: ReturnType<typeof useRouter>) {
       const link = e.target instanceof Element ? e.target.closest('a[href^="/"]') : null;
       const href = link?.getAttribute('href')?.replace(/#.*$/, '');
       if (href && href !== window.location.pathname)
-        router.prefetch(href, { kind: PrefetchKind.FULL });
+        (router.prefetch as unknown as FullPrefetch).call(router, href, { kind: 'full' });
     };
     document.addEventListener('pointerover', warm);
     document.addEventListener('focusin', warm);