@setsquare/ui 0.2.1 → 0.2.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # 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

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.1",
+  "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",