@kerfjs/ui 5.0.0-beta.92 → 5.0.0-beta.94

package/README.md

@@ -373,11 +373,18 @@ guidance, public hooks, and explicit geometry ownership; then concatenate its
 `entries` with Kerf's shipped `entries` in the AI context. Keep package/source
 identity alongside each input when ids could collide. This makes a combined
 tool reason about both sides of a composition using one vocabulary without
-pretending app-local components are `@kerfjs/ui` exports.
+pretending app-local components are `@kerfjs/ui` exports. A package that
+keeps a `kerf.components.json` generates this extension with
+`kerf-component-catalog` by setting `kerfComponentCatalog.selectionOutput`
+instead of maintaining a second JSON by hand.
 For a consumer UX demo, `@kerfjs/ui/catalog-projection` derives rows and
 relationships from that extension; `kerf-catalog-demo --write` emits a typed
 module and `--check` catches drift. See the [catalog guide](./docs/catalog.md)
-for repository base and source path configuration.
+for repository base and source path configuration. To offer the catalog's
+**Capture region** link to UX Review on a local server, add the Node-only
+`uxReviewPlugin` from `@kerfjs/ui/vite-ux-review` to the Vite config and pass
+`wireCatalog`'s `onUxReviewProject` result to `Catalog`'s `uxReview` (the
+[catalog guide](./docs/catalog.md#ux-review-capture) has the wiring).
 
 Composition-aware consumers use
 [`component-composition-extension.schema.json`](./ai/component-composition-extension.schema.json),

package/ai/public-api-signatures-v1.md

@@ -1,6 +1,6 @@
 # Public API signatures for the UI authoring corpus
 
-Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.92` and `kerfjs@5.0.0-beta.92`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
+Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.94` and `kerfjs@5.0.0-beta.94`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
 
 ## `@kerfjs/ui/css-values`
 
@@ -2414,8 +2414,8 @@ export { DEFAULT_BREAKPOINTS, type DeviceBreakpoints, type DeviceClass, type Dev
 ```ts
 import * as kerfjs from 'kerfjs';
 import { SafeHtml } from 'kerfjs';
-import { b as CatalogProps } from './types-oLe_N1w0.js';
-export { a as CatalogBackgroundStyle, c as CatalogBrand, d as CatalogEntry, e as CatalogRelated, C as CatalogResource, f as CatalogSecondaryGroup, g as CatalogSection, h as CatalogStageRootAttributes } from './types-oLe_N1w0.js';
+import { b as CatalogProps } from './types-CVgIwSdq.js';
+export { a as CatalogBackgroundStyle, c as CatalogBrand, d as CatalogEntry, e as CatalogRelated, C as CatalogResource, f as CatalogSecondaryGroup, g as CatalogSection, h as CatalogSettingsConfig, i as CatalogStageRootAttributes, j as CatalogUxReview } from './types-CVgIwSdq.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 import './toolbar.js';
 import './sides-BPSWde0A.js';
@@ -2437,8 +2437,10 @@ import './resizable-region.js';
  * toolbar, description, preview stage, and resource footer. The sidebar's
  * standard toggle moves into the entry toolbar while it is collapsed, and on
  * a small screen the sidebar overlays the stage like any Workbench rail.
+ * An entry's `settings` render in a right-rail settings pane beside the stage,
+ * with the same toggle relocation and small-screen overlay.
  */
-declare function Catalog({ id, brand, sections, active, content, collapsed, theme, increasedContrast, reducedMotion, backgroundControl, headerActions, secondarySections, sidebarFooter, status, backgroundStyle, stageRootAttributes, selectAction, toggleSidebarAction, toggleThemeAction, toggleContrastAction, toggleMotionAction, selectBackgroundAction, toggleSecondaryAction, headerPlacement, footerPlacement, sidebar, mainToolbar, footerToolbar, className, slot, }: CatalogProps): kerfjs.SafeHtml;
+declare function Catalog({ id, brand, sections, active, content, collapsed, theme, increasedContrast, reducedMotion, backgroundControl, headerActions, settings, settingsCollapsed, settingsPanel, uxReview, secondarySections, sidebarFooter, status, backgroundStyle, stageRootAttributes, selectAction, toggleSidebarAction, toggleThemeAction, toggleContrastAction, toggleMotionAction, selectBackgroundAction, toggleSecondaryAction, toggleSettingsAction, headerPlacement, footerPlacement, sidebar, mainToolbar, footerToolbar, className, slot, }: CatalogProps): kerfjs.SafeHtml;
 
 /** How a specimen aligns its visible edge with its `ListHeader` label. */
 type CatalogExampleAlign = 'glyph' | 'inline-control' | 'text-trigger' | 'none';
@@ -2503,13 +2505,39 @@ interface CatalogExampleStackProps {
 /** A vertically stacked group of catalog examples. */
 declare function CatalogExampleStack({ label, rootAttributes, className, children, slot, }: CatalogExampleStackProps): kerfjs.SafeHtml;
 
-export { Catalog, CatalogExample, type CatalogExampleAlign, type CatalogExampleProps, CatalogExampleStack, type CatalogExampleStackProps, type CatalogExampleViewport, CatalogProps };
+/**
+ * Browser helpers for UX Review region captures from a catalog. The local
+ * project directory comes from `uxReviewPlugin` (`@kerfjs/ui/vite-ux-review`),
+ * which serves it to the catalog page on a Vite dev or preview server; static
+ * hosting has no such endpoint, so a catalog there shows no capture link.
+ */
+/** Where `uxReviewPlugin` serves `{ projectDirectory }`, relative to the catalog page. */
+declare const UX_REVIEW_PROJECT_PATH = "__ux-review/project.json";
+/** What a UX Review region capture is preset with. */
+interface UxReviewCapture {
+    /** The absolute project directory UX Review files the review under. */
+    projectDirectory: string;
+    /** The review title. */
+    title: string;
+    /** Review context: what was selected and where. */
+    context: string;
+}
+/** A `uxreview://capture` link that starts a region screenshot for a project. */
+declare function uxReviewCaptureUrl({ projectDirectory, title, context, }: UxReviewCapture): string;
+/**
+ * Ask the server that served `pageUrl` for its UX Review project directory.
+ * Resolves `null` when there is none (static hosting, a server without the
+ * plugin, a malformed answer, or a network failure); never rejects.
+ */
+declare function loadUxReviewProject(pageUrl: string | URL, fetchImpl?: typeof globalThis.fetch): Promise<string | null>;
+
+export { Catalog, CatalogExample, type CatalogExampleAlign, type CatalogExampleProps, CatalogExampleStack, type CatalogExampleStackProps, type CatalogExampleViewport, CatalogProps, UX_REVIEW_PROJECT_PATH, type UxReviewCapture, loadUxReviewProject, uxReviewCaptureUrl };
 ```
 
 ## `@kerfjs/ui/catalog-resources`
 
 ```ts
-import { C as CatalogResource } from './types-oLe_N1w0.js';
+import { C as CatalogResource } from './types-CVgIwSdq.js';
 import './toolbar.js';
 import 'kerfjs';
 import './semantic-content-BbzjvSu9.js';
@@ -2563,7 +2591,7 @@ export { type CatalogGuidanceKind, type CatalogResourceKind, type CatalogResourc
 
 ```ts
 import { Signal } from 'kerfjs';
-import { a as CatalogBackgroundStyle } from './types-oLe_N1w0.js';
+import { a as CatalogBackgroundStyle } from './types-CVgIwSdq.js';
 import './toolbar.js';
 import './semantic-content-BbzjvSu9.js';
 import './sides-BPSWde0A.js';
@@ -2592,6 +2620,11 @@ interface WireCatalogOptions {
     onToggleMotion?: () => void;
     /** Report a preview background choice; the app updates `backgroundStyle`. */
     onSelectBackground?: (style: CatalogBackgroundStyle) => void;
+    /**
+     * Invoked when the settings pane toggle is activated. With
+     * `settingsCollapsed`, `wireCatalog` has already flipped the signal.
+     */
+    onToggleSettings?: () => void;
     /** Invoked when the secondary (ecosystem) group's disclosure toggle is activated. */
     onToggleSecondary?: () => void;
     /** When set, `?<urlParam>=<id>` is written on select via `history.replaceState`. */
@@ -2608,6 +2641,7 @@ interface WireCatalogOptions {
     toggleMotionAction?: string;
     selectBackgroundAction?: string;
     toggleSecondaryAction?: string;
+    toggleSettingsAction?: string;
     /**
      * The sidebar's app-owned collapsed flag. With it, the catalog's Workbench
      * sidebar is wired like any Workbench rail: it becomes a transient overlay
@@ -2627,8 +2661,34 @@ interface WireCatalogOptions {
      * catalog remembers the user's sidebar width.
      */
     sidebarStorageKey?: string;
+    /**
+     * The settings pane's app-owned collapsed flag, rendered as the Catalog's
+     * `settingsCollapsed`. With it, `wireCatalog` owns the pane's toggle (each
+     * press flips the signal) and wires the pane like any Workbench rail: a
+     * transient overlay on a small screen (collapsed as the breakpoint applies,
+     * closed on Escape or a press outside, focus handed back).
+     */
+    settingsCollapsed?: Signal<boolean>;
+    /**
+     * The app-owned settings pane width signal for a Catalog rendered with
+     * `settingsPanel={{ resizable: true, size: settingsSize.value }}`. Each
+     * committed drag or keyboard resize is written to it.
+     */
+    settingsSize?: Signal<number>;
+    /**
+     * With `settingsSize`, load and save the width under this storage key so
+     * the catalog remembers the user's settings pane width.
+     */
+    settingsStorageKey?: string;
     /** The Catalog's `id`, when it is not the default `kui-catalog`. */
     id?: string;
+    /**
+     * Ask the page's server once for its UX Review project directory (served by
+     * `uxReviewPlugin` from `@kerfjs/ui/vite-ux-review`) and report it, so the
+     * app can render the Catalog with `uxReview`. Never called on static
+     * hosting or a server without the plugin.
+     */
+    onUxReviewProject?: (projectDirectory: string) => void;
 }
 interface CatalogRevealOptions {
     /** Scroll alignment within the sidebar. Default `'nearest'`. */
@@ -2650,14 +2710,14 @@ interface CatalogRevealOptions {
 declare function revealCatalogEntry(root: HTMLElement, id: string, { block, inline, behavior, media, }?: CatalogRevealOptions): () => void;
 /**
  * Wire a {@link Catalog}'s interactions with one delegated listener set: sidebar
- * item selection (and the related-entry popup menu), the sidebar collapse toggle, and
- * the theme toggle. The app owns the `active`/`collapsed`/`theme` signals and updates
+ * item selection (and the related-entry popup menu), the sidebar collapse toggle,
+ * the settings pane toggle, and the theme toggle. The app owns the `active`/`collapsed`/`theme` signals and updates
  * them in the callbacks; optionally mirror the active id into the URL via `urlParam`.
  * It also wires the scroll dividers below root (`wireScrollDividers`), so the
  * catalog's panes and every example in it show their chrome dividers only
  * while scrolled. Returns a disposer.
  */
-declare function wireCatalog(root: HTMLElement, { onSelect, onToggleSidebar, onToggleTheme, onToggleContrast, onToggleMotion, onSelectBackground, onToggleSecondary, urlParam, revealSelection, selectAction, toggleSidebarAction, toggleThemeAction, toggleContrastAction, toggleMotionAction, selectBackgroundAction, toggleSecondaryAction, collapsed, sidebarSize, sidebarStorageKey, id: catalogId, }: WireCatalogOptions): () => void;
+declare function wireCatalog(root: HTMLElement, { onSelect, onToggleSidebar, onToggleTheme, onToggleContrast, onToggleMotion, onSelectBackground, onToggleSecondary, onToggleSettings, urlParam, revealSelection, selectAction, toggleSidebarAction, toggleThemeAction, toggleContrastAction, toggleMotionAction, selectBackgroundAction, toggleSecondaryAction, toggleSettingsAction, collapsed, sidebarSize, sidebarStorageKey, settingsCollapsed, settingsSize, settingsStorageKey, id: catalogId, onUxReviewProject, }: WireCatalogOptions): () => void;
 
 export { type CatalogRevealOptions, type WireCatalogOptions, revealCatalogEntry, wireCatalog };
 ```

package/ai/skill.md

@@ -136,10 +136,19 @@ second, package-qualified input beside `./component-catalog.json`: search both,
 preserve their source identity, and use the shared `geometry` vocabulary across
 their composition boundary. An extension entry's optional `uses` ids resolve
 against both catalogs; its `source` and `demoSource` are repository-relative
-files for consumer catalog links. When a consuming project has reusable visual
+files for consumer catalog links. A project with `kerf.components.json` generates
+that extension with `kerf-component-catalog` (`kerfComponentCatalog.selectionOutput`
+plus per-component `selection` blocks) rather than hand-writing it. When a consuming project has reusable visual
 components, derive demo rows with `@kerfjs/ui/catalog-projection` or
 `kerf-catalog-demo --write`, then guard drift with `--check`; see
-`../docs/catalog.md`. Prefer its generated `component-composition.json`. A package
+`../docs/catalog.md`. For a local catalog's UX Review **Capture region** link,
+add `uxReviewPlugin()` from the Node-only `@kerfjs/ui/vite-ux-review` to the
+Vite config, report the project with `wireCatalog`'s `onUxReviewProject`, and
+render `Catalog` with `uxReview={{ projectDirectory }}`; never hand-roll the
+endpoint or the `uxreview://` link. For per-entry variant/state controls, pass
+them as `Catalog`'s `settings` (with `settingsCollapsed` and the same signal as
+`wireCatalog`'s `settingsCollapsed`); never build a separate settings aside and
+toggle. Prefer its generated `component-composition.json`. A package
 scaffolded by `create-kerf-component` owns the decisions in
 `kerf.components.json`; run `npm run catalog:check` before using its output. If
 no generated extension exists, start from the checked examples and require the

package/ai/webawesome-jsx-signatures-v1.md

@@ -1,6 +1,6 @@
 # Web Awesome JSX signatures for the UI authoring corpus
 
-Generated from the emitted `@kerfjs/ui@5.0.0-beta.92` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
+Generated from the emitted `@kerfjs/ui@5.0.0-beta.94` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
 
 ```ts
 import { KerfCustomElement } from 'kerfjs/jsx-runtime';

package/dist/catalog-resources.d.ts

@@ -1,4 +1,4 @@
-import { C as CatalogResource } from './types-oLe_N1w0.js';
+import { C as CatalogResource } from './types-CVgIwSdq.js';
 import './toolbar.js';
 import 'kerfjs';
 import './semantic-content-BbzjvSu9.js';

package/dist/catalog.d.ts

@@ -1,7 +1,7 @@
 import * as kerfjs from 'kerfjs';
 import { SafeHtml } from 'kerfjs';
-import { b as CatalogProps } from './types-oLe_N1w0.js';
-export { a as CatalogBackgroundStyle, c as CatalogBrand, d as CatalogEntry, e as CatalogRelated, C as CatalogResource, f as CatalogSecondaryGroup, g as CatalogSection, h as CatalogStageRootAttributes } from './types-oLe_N1w0.js';
+import { b as CatalogProps } from './types-CVgIwSdq.js';
+export { a as CatalogBackgroundStyle, c as CatalogBrand, d as CatalogEntry, e as CatalogRelated, C as CatalogResource, f as CatalogSecondaryGroup, g as CatalogSection, h as CatalogSettingsConfig, i as CatalogStageRootAttributes, j as CatalogUxReview } from './types-CVgIwSdq.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 import './toolbar.js';
 import './sides-BPSWde0A.js';
@@ -23,8 +23,10 @@ import './resizable-region.js';
  * toolbar, description, preview stage, and resource footer. The sidebar's
  * standard toggle moves into the entry toolbar while it is collapsed, and on
  * a small screen the sidebar overlays the stage like any Workbench rail.
+ * An entry's `settings` render in a right-rail settings pane beside the stage,
+ * with the same toggle relocation and small-screen overlay.
  */
-declare function Catalog({ id, brand, sections, active, content, collapsed, theme, increasedContrast, reducedMotion, backgroundControl, headerActions, secondarySections, sidebarFooter, status, backgroundStyle, stageRootAttributes, selectAction, toggleSidebarAction, toggleThemeAction, toggleContrastAction, toggleMotionAction, selectBackgroundAction, toggleSecondaryAction, headerPlacement, footerPlacement, sidebar, mainToolbar, footerToolbar, className, slot, }: CatalogProps): kerfjs.SafeHtml;
+declare function Catalog({ id, brand, sections, active, content, collapsed, theme, increasedContrast, reducedMotion, backgroundControl, headerActions, settings, settingsCollapsed, settingsPanel, uxReview, secondarySections, sidebarFooter, status, backgroundStyle, stageRootAttributes, selectAction, toggleSidebarAction, toggleThemeAction, toggleContrastAction, toggleMotionAction, selectBackgroundAction, toggleSecondaryAction, toggleSettingsAction, headerPlacement, footerPlacement, sidebar, mainToolbar, footerToolbar, className, slot, }: CatalogProps): kerfjs.SafeHtml;
 
 /** How a specimen aligns its visible edge with its `ListHeader` label. */
 type CatalogExampleAlign = 'glyph' | 'inline-control' | 'text-trigger' | 'none';
@@ -89,4 +91,30 @@ interface CatalogExampleStackProps {
 /** A vertically stacked group of catalog examples. */
 declare function CatalogExampleStack({ label, rootAttributes, className, children, slot, }: CatalogExampleStackProps): kerfjs.SafeHtml;
 
-export { Catalog, CatalogExample, type CatalogExampleAlign, type CatalogExampleProps, CatalogExampleStack, type CatalogExampleStackProps, type CatalogExampleViewport, CatalogProps };
+/**
+ * Browser helpers for UX Review region captures from a catalog. The local
+ * project directory comes from `uxReviewPlugin` (`@kerfjs/ui/vite-ux-review`),
+ * which serves it to the catalog page on a Vite dev or preview server; static
+ * hosting has no such endpoint, so a catalog there shows no capture link.
+ */
+/** Where `uxReviewPlugin` serves `{ projectDirectory }`, relative to the catalog page. */
+declare const UX_REVIEW_PROJECT_PATH = "__ux-review/project.json";
+/** What a UX Review region capture is preset with. */
+interface UxReviewCapture {
+    /** The absolute project directory UX Review files the review under. */
+    projectDirectory: string;
+    /** The review title. */
+    title: string;
+    /** Review context: what was selected and where. */
+    context: string;
+}
+/** A `uxreview://capture` link that starts a region screenshot for a project. */
+declare function uxReviewCaptureUrl({ projectDirectory, title, context, }: UxReviewCapture): string;
+/**
+ * Ask the server that served `pageUrl` for its UX Review project directory.
+ * Resolves `null` when there is none (static hosting, a server without the
+ * plugin, a malformed answer, or a network failure); never rejects.
+ */
+declare function loadUxReviewProject(pageUrl: string | URL, fetchImpl?: typeof globalThis.fetch): Promise<string | null>;
+
+export { Catalog, CatalogExample, type CatalogExampleAlign, type CatalogExampleProps, CatalogExampleStack, type CatalogExampleStackProps, type CatalogExampleViewport, CatalogProps, UX_REVIEW_PROJECT_PATH, type UxReviewCapture, loadUxReviewProject, uxReviewCaptureUrl };

package/dist/catalog.js

@@ -1,4 +1,6 @@
 import { Workbench } from './chunk-QCLLBMLA.js';
+import { uxReviewCaptureUrl } from './chunk-6C6DLP3W.js';
+export { UX_REVIEW_PROJECT_PATH, loadUxReviewProject, uxReviewCaptureUrl } from './chunk-6C6DLP3W.js';
 
 
 import { TokenSearchField } from './chunk-ROZLJULF.js';
@@ -27,7 +29,7 @@ import { LucideIcon } from './chunk-UKKRPP56.js';
 
 
 import { filterDataAttributes } from './chunk-LAZLBC2Q.js';
-import { Contrast, ZapOff, Moon, Sun, X, Waypoints, ExternalLink } from 'lucide';
+import { Contrast, ZapOff, Moon, Sun, X, Waypoints, ExternalLink, Scan } from 'lucide';
 import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
 
 function relatedMenuItems(related, selectAction) {
@@ -269,9 +271,40 @@ function CatalogStage({
     }
   );
 }
+function CatalogUxReviewLink({
+  uxReview: { projectDirectory, name },
+  entry,
+  category
+}) {
+  return /* @__PURE__ */ jsx(
+    ToolbarControlGroup,
+    {
+      appearance: "borderless",
+      single: true,
+      size: "compact",
+      content: "mixed",
+      buttonAppearance: "push",
+      children: /* @__PURE__ */ jsx(
+        ToolbarActionLink,
+        {
+          href: uxReviewCaptureUrl({
+            projectDirectory,
+            title: `${name}: ${entry.name}`,
+            context: `${name} catalog
+Selected ${category}: ${entry.name} (${entry.id})`
+          }),
+          label: "Capture region",
+          ariaLabel: `Capture ${entry.name} in UX Review`,
+          icon: /* @__PURE__ */ jsx(LucideIcon, { icon: Scan, name: "scan" })
+        }
+      )
+    }
+  );
+}
 function findEntry(sections, id) {
   for (const section of sections) {
-    for (const entry of section.entries) if (entry.id === id) return entry;
+    for (const entry of section.entries)
+      if (entry.id === id) return { entry, category: section.category };
   }
   return void 0;
 }
@@ -287,6 +320,10 @@ function Catalog({
   reducedMotion,
   backgroundControl = false,
   headerActions,
+  settings,
+  settingsCollapsed = false,
+  settingsPanel = {},
+  uxReview,
   secondarySections,
   sidebarFooter,
   status,
@@ -299,6 +336,7 @@ function Catalog({
   toggleMotionAction = "catalog-toggle-motion",
   selectBackgroundAction = "catalog-select-background",
   toggleSecondaryAction = "catalog-toggle-secondary",
+  toggleSettingsAction = "catalog-toggle-settings",
   headerPlacement = "auto",
   footerPlacement = "auto",
   sidebar = {},
@@ -307,17 +345,21 @@ function Catalog({
   className = "",
   slot
 }) {
-  const selected = findEntry(sections, active) ?? (secondarySections ? findEntry(secondarySections.sections, active) : void 0);
+  const found = findEntry(sections, active) ?? (secondarySections ? findEntry(secondarySections.sections, active) : void 0);
+  const selected = found?.entry;
   const name = selected?.name ?? "";
   const nextTheme = theme === "dark" ? "light" : "dark";
   const catalogName = `${brand.title} catalog`;
   const displayControls = increasedContrast !== void 0 || reducedMotion !== void 0 || backgroundControl || theme !== void 0;
+  const hasSettings = settings !== void 0 && settings !== null && settings !== false;
+  const settingsTitle = settingsPanel.title ?? "Settings";
   return /* @__PURE__ */ jsx(
     "main",
     {
       class: `kui-catalog ${className}`.trim(),
       "data-component": "catalog",
       "data-sidebar-collapsed": String(collapsed),
+      "data-settings-collapsed": hasSettings ? String(settingsCollapsed) : void 0,
       slot,
       children: /* @__PURE__ */ jsx(
         Workbench,
@@ -380,6 +422,29 @@ function Catalog({
               }
             )
           },
+          rightRail: hasSettings ? {
+            label: name ? `${name} ${settingsTitle}` : settingsTitle,
+            size: settingsPanel.size ?? 288,
+            resizable: settingsPanel.resizable,
+            separator: settingsPanel.separator,
+            collapseMotion: settingsPanel.collapseMotion,
+            presentation: settingsPanel.presentation,
+            responsiveOverlayAt: settingsPanel.responsiveOverlayAt,
+            compactOverlay: settingsPanel.compactOverlay,
+            collapsed: settingsCollapsed,
+            toolbar: {
+              ...settingsPanel.toolbar,
+              label: `${settingsTitle} header`,
+              // A peripheral rail beside the xl entry title takes the
+              // default title size, so it never truncates at 288px.
+              title: /* @__PURE__ */ jsx(ToolbarText, { text: settingsTitle, headingLevel: 2 }),
+              toggle: {
+                action: toggleSettingsAction,
+                name: settingsTitle.toLocaleLowerCase()
+              }
+            },
+            content: settings
+          } : void 0,
           mainToolbar: {
             ...mainToolbar,
             label: `${name} header`,
@@ -388,6 +453,14 @@ function Catalog({
             title: /* @__PURE__ */ jsx(ToolbarText, { text: name, size: "xlarge", headingLevel: 2 }),
             trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
               headerActions,
+              uxReview && found ? /* @__PURE__ */ jsx(
+                CatalogUxReviewLink,
+                {
+                  uxReview: { ...uxReview, name: uxReview.name ?? brand.title },
+                  entry: found.entry,
+                  category: found.category
+                }
+              ) : null,
               displayControls ? /* @__PURE__ */ jsxs(
                 ToolbarControlGroup,
                 {