@cueplusplus/ui 0.18.2 → 0.19.0

package/dist/chrome/announcement-bar.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+//#region src/chrome/announcement-bar.d.ts
+/** The bar's one link. */
+interface AnnouncementBarAction {
+  /** The link's text, e.g. "Read the notes". */
+  label: string;
+  /** Where it goes. */
+  href: string;
+}
+interface AnnouncementBarProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** The one line. */
+  children: React.ReactNode;
+  /** One link, read as the bar's action. */
+  action?: AnnouncementBarAction;
+}
+/**
+ * One line across the top of a page, and one link: a launch, a change, a date.
+ *
+ * Filled in the accent, centred, and as short as its line. It is not a
+ * notification: it says the same thing to every reader and cannot be dismissed,
+ * so use `Toast` or `Alert` for anything that is about the reader.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <AnnouncementBar action={{ label: "Learn more", href: "/changelog" }}>Plans for teams are here.</AnnouncementBar>
+ */
+declare const AnnouncementBar: React.ForwardRefExoticComponent<AnnouncementBarProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { AnnouncementBar, AnnouncementBarAction, AnnouncementBarProps };

package/dist/chrome/announcement-bar.js

@@ -0,0 +1,38 @@
+import { cn } from "../lib/cn.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chrome/announcement-bar.tsx
+/**
+* One line across the top of a page, and one link: a launch, a change, a date.
+*
+* Filled in the accent, centred, and as short as its line. It is not a
+* notification: it says the same thing to every reader and cannot be dismissed,
+* so use `Toast` or `Alert` for anything that is about the reader.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <AnnouncementBar action={{ label: "Learn more", href: "/changelog" }}>Plans for teams are here.</AnnouncementBar>
+*/
+const AnnouncementBar = React.forwardRef(function AnnouncementBar({ className, children, action, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "announcement-bar",
+		className: cn("flex w-full flex-wrap items-center justify-center gap-x-(--cue-space-3) bg-accent-fill px-(--cue-space-5) py-(--cue-space-2) text-center text-(length:--cue-text-ui) text-accent-fill-fg", className),
+		...elementProps,
+		children: [/* @__PURE__ */ jsx("span", { children }), action === void 0 ? null : /* @__PURE__ */ jsxs("a", {
+			href: action.href,
+			className: "font-semibold underline underline-offset-4",
+			children: [
+				action.label,
+				" ",
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: "→"
+				})
+			]
+		})]
+	});
+});
+//#endregion
+export { AnnouncementBar };

package/dist/chrome/app-bar.d.ts

@@ -15,7 +15,10 @@ interface AppBarRootProps extends React.ComponentPropsWithoutRef<"header"> {
 }
 type AppBarBrandProps = Omit<LinkProps, "variant" | "external">;
 interface AppBarNavProps extends Omit<React.ComponentPropsWithoutRef<"nav">, "children"> {
-  /** Where the links sit when they are narrower than the space. Defaults to `"end"`. */
+  /**
+   * Where the links sit when they are narrower than the space. Omitted, the style
+   * set's `style-nav-align` decides, and without one it is `"end"`.
+   */
   align?: "start" | "center" | "end";
   /**
    * What the navigation does when the links do not fit. Defaults to `"scroll"`.

package/dist/chrome/app-bar.js

@@ -89,6 +89,11 @@ const NAV_ALIGN = {
 	end: "justify-end"
 };
 /**
+* The style set's nav alignment (structural Looks, spec 2026-10-02 §3.5), for a nav
+* whose caller named none: `flex-end` unset, which is what `justify-end` draws.
+*/
+const NAV_ALIGN_FROM_SET = "[justify-content:var(--cue-style-nav-align,flex-end)]";
+/**
 * The `<nav>` landmark between the brand and the actions, and the one part of
 * the bar that gives up width.
 *
@@ -102,14 +107,14 @@ const NAV_ALIGN = {
 * scroll to reach it. Aligning the frame and letting the nav grow from its
 * start keeps every link reachable at every width.
 */
-const AppBarNav = React.forwardRef(function AppBarNav({ className, frameClassName, align = "end", overflow = "scroll", previousLabel = "Show earlier links", nextLabel = "Show later links", ...elementProps }, ref) {
+const AppBarNav = React.forwardRef(function AppBarNav({ className, frameClassName, align, overflow = "scroll", previousLabel = "Show earlier links", nextLabel = "Show later links", ...elementProps }, ref) {
 	return /* @__PURE__ */ jsx(EdgeScrollNav, {
 		ref,
 		"data-slot": "app-bar-nav",
 		scrolls: overflow === "scroll",
 		previousLabel,
 		nextLabel,
-		frameClassName: cn("min-w-0 flex-1", NAV_ALIGN[align], frameClassName),
+		frameClassName: cn("min-w-0 flex-1", align === void 0 ? NAV_ALIGN_FROM_SET : NAV_ALIGN[align], frameClassName),
 		className: cn("flex min-w-0 items-center gap-(--cue-space-4)", className),
 		...elementProps
 	});

package/dist/chrome/app-shell.js

@@ -10,6 +10,13 @@ import { DRAG_CLASSES, NO_DRAG_CLASSES } from "./_drag.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/chrome/app-shell.tsx
+/**
+* A style set's page ground (structural Looks, spec 2026-10-02 §3.1): a gradient of
+* the theme's own inks, tiled or not. The frame is the one element that covers the
+* whole window, so the ground lands here. Unset, every reader falls back to the
+* value it had — no image, `auto`, `no-repeat` — and the frame paints as it did.
+*/
+const PAGE_GROUND_CLASSES = "[background-image:var(--cue-style-page-ground-image,none)] [background-size:var(--cue-style-page-ground-tile,auto)] [background-repeat:var(--cue-style-page-ground-repeat,no-repeat)]";
 const AppShellContext = React.createContext({
 	navOpen: false,
 	setNavOpen: () => {},
@@ -114,7 +121,7 @@ const AppShell = {
 				ref,
 				"data-slot": "app-shell",
 				"data-rail": rail ? "" : void 0,
-				className: cn("group/app-shell relative flex h-dvh flex-col overflow-clip bg-bg text-fg", TEXTURE_CLASSES, className),
+				className: cn("group/app-shell relative flex h-dvh flex-col overflow-clip bg-bg text-fg", TEXTURE_CLASSES, PAGE_GROUND_CLASSES, className),
 				style: {
 					[NAV_WIDTH_PROPERTY]: rail ? railWidth : navWidth,
 					...style

package/dist/chrome/band.d.ts

@@ -76,7 +76,9 @@ interface BandProps extends React.ComponentPropsWithoutRef<"section"> {
  * nothing and they do not vanish symmetrically: `--cue-band-ground` is
  * `transparent` on `:root` and on every set but `marketing` and `kiln`, so a
  * `"ground"` paints nothing on most pages, while `--cue-band-rule` is `0px`
- * under those two alone. Both are deliberate and nothing warns.
+ * under those two and under `ledger` and `prism`, which separate bands by
+ * rhythm alone (and `prism`'s by a ground image, `style-band-ground-image`).
+ * Both are deliberate and nothing warns.
  *
  * **Two substitution boundaries, because `--cue-band-y` is a `calc()` resolved
  * at the element that declares it.** A `<Density>` island nested inside a

package/dist/chrome/band.js

@@ -3,13 +3,12 @@ import { TEXTURE_CLASSES } from "../system/_paint-texture.js";
 import { Container } from "../layout/container.js";
 import { bandClasses } from "./_band.js";
 import { BAND_BROAD_WIDTH, BAND_Y_HALVES } from "../system/_style-band.js";
-import { GROUND_PATTERN_CLASSES } from "../system/_paint-ground-pattern.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/chrome/band.tsx
 const SEPARATION_PAINT = {
 	rule: "border-(--cue-band-rule-color)",
-	ground: `bg-(--cue-band-ground) ${GROUND_PATTERN_CLASSES} ${TEXTURE_CLASSES} before:[mask-image:linear-gradient(var(--cue-band-ground),var(--cue-band-ground)),var(--cue-paint-fade)] before:[-webkit-mask-image:linear-gradient(var(--cue-band-ground),var(--cue-band-ground)),var(--cue-paint-fade)]`,
+	ground: `bg-(--cue-band-ground) [background-image:var(--cue-paint-ground-pattern,none),var(--cue-style-band-ground-image,none)] [background-size:var(--cue-paint-ground-pattern-size,auto),auto] ${TEXTURE_CLASSES} before:[mask-image:linear-gradient(var(--cue-band-ground),var(--cue-band-ground)),var(--cue-paint-fade)] before:[-webkit-mask-image:linear-gradient(var(--cue-band-ground),var(--cue-band-ground)),var(--cue-paint-fade)]`,
 	bleed: null,
 	none: null
 };
@@ -32,7 +31,9 @@ const SEPARATION_PAINT = {
 * nothing and they do not vanish symmetrically: `--cue-band-ground` is
 * `transparent` on `:root` and on every set but `marketing` and `kiln`, so a
 * `"ground"` paints nothing on most pages, while `--cue-band-rule` is `0px`
-* under those two alone. Both are deliberate and nothing warns.
+* under those two and under `ledger` and `prism`, which separate bands by
+* rhythm alone (and `prism`'s by a ground image, `style-band-ground-image`).
+* Both are deliberate and nothing warns.
 *
 * **Two substitution boundaries, because `--cue-band-y` is a `calc()` resolved
 * at the element that declares it.** A `<Density>` island nested inside a

package/dist/chrome/hero.d.ts

@@ -0,0 +1,61 @@
+import * as React from "react";
+//#region src/chrome/hero.d.ts
+interface HeroProps extends Omit<React.ComponentPropsWithoutRef<"section">, "title"> {
+  /** A short line above the title, usually an `Eyebrow`. */
+  eyebrow?: React.ReactNode;
+  /** The title's first line. A hero without a title is a band; use `Band`. */
+  title: React.ReactNode;
+  /**
+   * The title's second line, drawn in the style set's second ink: the accent, a
+   * muted ink or the keyword gradient, by the Look. Omit it for a one-line title.
+   */
+  titleSecond?: React.ReactNode;
+  /**
+   * The title's heading level. `1`, the default, is a page's opening; `2` or `3`
+   * is a hero that opens a section under the page's own `<h1>`, or a preview of
+   * one on a page about something else.
+   */
+  level?: 1 | 2 | 3;
+  /** The sentence under the title. */
+  lede?: React.ReactNode;
+  /** The calls to action, usually a primary and a secondary `Button`. */
+  actions?: React.ReactNode;
+  /** Art beside or behind the words: a `Motif`, an image, a product shot. */
+  media?: React.ReactNode;
+  /** A row of figures under the lede, usually a `StatBand`. */
+  stats?: React.ReactNode;
+  /**
+   * `page` draws the hero on the page's own ground. `inverse` draws it as a dark
+   * card on any page — its whole colour scope flipped, controls and focus included —
+   * which is how a report opens on a light page. Defaults to `"page"`.
+   */
+  surface?: "page" | "inverse";
+}
+/**
+ * The opening of a page: a title, the line under it, what to do next, and art.
+ *
+ * **The Look decides the arrangement, not this component.** The grid reads the
+ * style set's hero recipe — `style-hero-columns`, `style-hero-align` and
+ * `style-hero-media-order` — so the same hero opens centred under one Look, with
+ * its art beside the words under another, and with the art first under a third,
+ * with no prop changed. Unset, it is one column, start-aligned, art after the
+ * words.
+ *
+ * **No media, one column**, whatever the recipe says: two columns with nothing in
+ * the second is half a page of nothing.
+ *
+ * `surface="inverse"` is a theme island in dark mode, so every ink inside it —
+ * the title, the lede, a button's fill and its focus ring — is the dark palette's,
+ * and an overlay opened from it inherits that. The island carries
+ * `data-cue-rescope`, where the token build re-declares the active set's and
+ * pack's inks, so the card is right in the first frame, before hydration.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <Hero eyebrow={<Eyebrow>Category report</Eyebrow>} title="Snacks & nuts" titleSecond="Range review"
+ *   lede="Every recommendation has a boundary." actions={<Button>Open the report</Button>} />
+ */
+declare const Hero: React.ForwardRefExoticComponent<HeroProps & React.RefAttributes<HTMLElement>>;
+//#endregion
+export { Hero, HeroProps };

package/dist/chrome/hero.js

@@ -0,0 +1,108 @@
+import { cn } from "../lib/cn.js";
+import { ThemeProvider } from "../system/theme-provider.js";
+import { BODY_VOICE } from "../system/_style-body.js";
+import { LEDE_INK, LEDE_LEADING, LEDE_SIZE, LEDE_TRACKING } from "../system/_style-lede.js";
+import { HERO_TITLE_VOICE } from "../system/_style-hero-title.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chrome/hero.tsx
+/**
+* The second title line's ink (spec 2026-10-02 §3.1, §15.2). A colour by default;
+* under a set whose line takes the keyword gradient, the build restates the
+* colour as the accent and derives a fill, a clip and a text fill, so the
+* gradient paints the glyphs through `background-clip: text`. Each derived
+* name's fallback is the property's own initial value, so a line no set
+* touches computes exactly what it did. All of it sits behind
+* `@supports (background-clip: text)`, so a browser that cannot clip keeps the
+* solid accent; forced colours drop the image and the transparent fill, as
+* `Keyword` does.
+*/
+const TITLE_SECOND = "block text-[color:var(--cue-style-hero-title-ink-2,var(--cue-fg))] supports-[background-clip:text]:[background-image:var(--cue-style-hero-title-fill-2,none)] supports-[background-clip:text]:[background-clip:var(--cue-style-hero-title-clip-2,border-box)] supports-[background-clip:text]:[-webkit-background-clip:var(--cue-style-hero-title-clip-2,border-box)] supports-[background-clip:text]:[-webkit-text-fill-color:var(--cue-style-hero-title-text-2,currentcolor)] forced-colors:[background-image:none] forced-colors:[-webkit-text-fill-color:CanvasText]";
+/**
+* The opening of a page: a title, the line under it, what to do next, and art.
+*
+* **The Look decides the arrangement, not this component.** The grid reads the
+* style set's hero recipe — `style-hero-columns`, `style-hero-align` and
+* `style-hero-media-order` — so the same hero opens centred under one Look, with
+* its art beside the words under another, and with the art first under a third,
+* with no prop changed. Unset, it is one column, start-aligned, art after the
+* words.
+*
+* **No media, one column**, whatever the recipe says: two columns with nothing in
+* the second is half a page of nothing.
+*
+* `surface="inverse"` is a theme island in dark mode, so every ink inside it —
+* the title, the lede, a button's fill and its focus ring — is the dark palette's,
+* and an overlay opened from it inherits that. The island carries
+* `data-cue-rescope`, where the token build re-declares the active set's and
+* pack's inks, so the card is right in the first frame, before hydration.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <Hero eyebrow={<Eyebrow>Category report</Eyebrow>} title="Snacks & nuts" titleSecond="Range review"
+*   lede="Every recommendation has a boundary." actions={<Button>Open the report</Button>} />
+*/
+const Hero = React.forwardRef(function Hero({ className, eyebrow, title, titleSecond, level = 1, lede, actions, media, stats, surface = "page", ...elementProps }, ref) {
+	const words = /* @__PURE__ */ jsxs("div", {
+		"data-slot": "hero-words",
+		className: "flex min-w-0 flex-col gap-(--cue-space-5) [align-items:var(--cue-style-hero-align,start)] [text-align:var(--cue-style-hero-align,start)]",
+		children: [
+			eyebrow,
+			/* @__PURE__ */ jsxs(level === 3 ? "h3" : level === 2 ? "h2" : "h1", {
+				"data-slot": "hero-title",
+				className: cn(HERO_TITLE_VOICE, "m-0"),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "block",
+					children: title
+				}), titleSecond === void 0 ? null : /* @__PURE__ */ jsx("span", {
+					"data-slot": "hero-title-second",
+					className: TITLE_SECOND,
+					children: titleSecond
+				})]
+			}),
+			lede === void 0 ? null : /* @__PURE__ */ jsx("p", {
+				"data-slot": "hero-lede",
+				className: cn(BODY_VOICE, LEDE_SIZE, LEDE_LEADING, LEDE_TRACKING, LEDE_INK, "m-0 max-w-[48ch]"),
+				children: lede
+			}),
+			actions === void 0 ? null : /* @__PURE__ */ jsx("div", {
+				"data-slot": "hero-actions",
+				className: "flex flex-wrap items-center gap-(--cue-space-3) [justify-content:var(--cue-style-hero-align,start)]",
+				children: actions
+			}),
+			stats === void 0 ? null : /* @__PURE__ */ jsx("div", {
+				"data-slot": "hero-stats",
+				className: "w-full",
+				children: stats
+			})
+		]
+	});
+	const body = /* @__PURE__ */ jsxs("div", {
+		"data-slot": "hero-grid",
+		"data-media": media === void 0 ? void 0 : "",
+		className: cn("grid w-full items-center gap-(--cue-space-7)", media === void 0 ? "grid-cols-1" : "grid-cols-1 md:[grid-template-columns:var(--cue-style-hero-columns,1fr)]"),
+		children: [words, media === void 0 ? null : /* @__PURE__ */ jsx("div", {
+			"data-slot": "hero-media",
+			className: "min-w-0 [order:var(--cue-style-hero-media-order,1)]",
+			children: media
+		})]
+	});
+	return /* @__PURE__ */ jsx("section", {
+		ref,
+		"data-slot": "hero",
+		"data-surface": surface,
+		className: cn("w-full", className),
+		...elementProps,
+		children: surface === "inverse" ? /* @__PURE__ */ jsx(ThemeProvider, {
+			mode: "dark",
+			children: /* @__PURE__ */ jsx("div", {
+				"data-cue-rescope": "",
+				className: "rounded-surface bg-bg p-(--cue-space-7) text-fg",
+				children: body
+			})
+		}) : body
+	});
+});
+//#endregion
+export { Hero };

package/dist/chrome/index.d.ts

@@ -21,4 +21,9 @@ import { ScrollableTabsList, ScrollableTabsListProps, Tabs, TabsListProps, TabsP
 import { TitleBar, TitleBarProps } from "./title-bar.js";
 import { Tree, TreeProps, TreeVisibility, TreeVisibilityToggle, TreeVisibilityToggleProps } from "./tree.js";
 import { Toolbar, ToolbarButtonProps, ToolbarGroupProps, ToolbarRootProps, ToolbarSeparatorProps } from "./toolbar.js";
-export { AppBar, type AppBarActionsProps, type AppBarBrandProps, type AppBarLinkProps, type AppBarNavProps, type AppBarRegister, type AppBarRootProps, type AppBarSeparatorProps, AppShell, type AppShellAsideProps, type AppShellBarProps, type AppShellBodyProps, type AppShellContentProps, type AppShellNavTriggerProps, type AppShellRootProps, type AppShellScrollerProps, type AppShellSidebarProps, Band, type BandProps, type BandSeparation, type BandWidth, type BarOverflow, EmptyState, type EmptyStateProps, Eyebrow, type EyebrowProps, Footer, type FooterProps, Inspector, type InspectorFooterProps, type InspectorRootProps, type InspectorRowProps, type InspectorSectionProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, PageShell, type PageShellProps, type PageWidth, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, Row, type RowProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, SeamList, type SeamListProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, StatusBar, type StatusBarGroupProps, type StatusBarItemProps, type StatusBarProminence, type StatusBarProps, type StatusBarTone, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TitleBar, type TitleBarProps, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarRootProps, type ToolbarSeparatorProps, Tree, type TreeGuide, type TreeItem, type TreeProps, type TreeRow, type TreeVisibility, TreeVisibilityToggle, type TreeVisibilityToggleProps, computeScrollEdges, edgeFadeMask, flattenTree, rowVariants };
+import { AnnouncementBar, AnnouncementBarAction, AnnouncementBarProps } from "./announcement-bar.js";
+import { Hero, HeroProps } from "./hero.js";
+import { Keyword, KeywordProps } from "./keyword.js";
+import { LogoStrip, LogoStripProps } from "./logo-strip.js";
+import { StatBand, StatBandProps, StatBandStat } from "./stat-band.js";
+export { AnnouncementBar, type AnnouncementBarAction, type AnnouncementBarProps, AppBar, type AppBarActionsProps, type AppBarBrandProps, type AppBarLinkProps, type AppBarNavProps, type AppBarRegister, type AppBarRootProps, type AppBarSeparatorProps, AppShell, type AppShellAsideProps, type AppShellBarProps, type AppShellBodyProps, type AppShellContentProps, type AppShellNavTriggerProps, type AppShellRootProps, type AppShellScrollerProps, type AppShellSidebarProps, Band, type BandProps, type BandSeparation, type BandWidth, type BarOverflow, EmptyState, type EmptyStateProps, Eyebrow, type EyebrowProps, Footer, type FooterProps, Hero, type HeroProps, Inspector, type InspectorFooterProps, type InspectorRootProps, type InspectorRowProps, type InspectorSectionProps, Keyword, type KeywordProps, LogoStrip, type LogoStripProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, PageShell, type PageShellProps, type PageWidth, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, Row, type RowProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, SeamList, type SeamListProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, StatBand, type StatBandProps, type StatBandStat, StatusBar, type StatusBarGroupProps, type StatusBarItemProps, type StatusBarProminence, type StatusBarProps, type StatusBarTone, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TitleBar, type TitleBarProps, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarRootProps, type ToolbarSeparatorProps, Tree, type TreeGuide, type TreeItem, type TreeProps, type TreeRow, type TreeVisibility, TreeVisibilityToggle, type TreeVisibilityToggleProps, computeScrollEdges, edgeFadeMask, flattenTree, rowVariants };

package/dist/chrome/index.js

@@ -19,4 +19,9 @@ import { ScrollableTabsList, Tabs } from "./tabs.js";
 import { TitleBar } from "./title-bar.js";
 import { Tree, TreeVisibilityToggle } from "./tree.js";
 import { Toolbar } from "./toolbar.js";
-export { AppBar, AppShell, Band, EmptyState, Eyebrow, Footer, Inspector, NavigationMenu, PageShell, Panel, PanelHeader, Row, ScrollArea, ScrollableTabsList, SeamList, SectionHeader, SegmentedControl, StatusBar, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Tabs, TitleBar, Toolbar, Tree, TreeVisibilityToggle, computeScrollEdges, edgeFadeMask, flattenTree, rowVariants };
+import { AnnouncementBar } from "./announcement-bar.js";
+import { Hero } from "./hero.js";
+import { Keyword } from "./keyword.js";
+import { LogoStrip } from "./logo-strip.js";
+import { StatBand } from "./stat-band.js";
+export { AnnouncementBar, AppBar, AppShell, Band, EmptyState, Eyebrow, Footer, Hero, Inspector, Keyword, LogoStrip, NavigationMenu, PageShell, Panel, PanelHeader, Row, ScrollArea, ScrollableTabsList, SeamList, SectionHeader, SegmentedControl, StatBand, StatusBar, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Tabs, TitleBar, Toolbar, Tree, TreeVisibilityToggle, computeScrollEdges, edgeFadeMask, flattenTree, rowVariants };

package/dist/chrome/keyword.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+//#region src/chrome/keyword.d.ts
+interface KeywordProps extends React.ComponentPropsWithoutRef<"span"> {
+  /** The words to mark: one word or a short phrase in a title. */
+  children: React.ReactNode;
+}
+/**
+ * A word in a title filled with the Look's keyword gradient.
+ *
+ * Reads `style-keyword-fill`, a gradient of the theme's own inks, through
+ * `background-clip: text`. Where the browser cannot clip a background to text, or
+ * in forced colours, it is the accent instead, so the word is never transparent.
+ * Unset, the fill is the accent itself.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <h1>The world's first <Keyword>predictive</Keyword> retail system.</h1>
+ */
+declare const Keyword: React.ForwardRefExoticComponent<KeywordProps & React.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { Keyword, KeywordProps };

package/dist/chrome/keyword.js

@@ -0,0 +1,28 @@
+import { cn } from "../lib/cn.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/chrome/keyword.tsx
+/**
+* A word in a title filled with the Look's keyword gradient.
+*
+* Reads `style-keyword-fill`, a gradient of the theme's own inks, through
+* `background-clip: text`. Where the browser cannot clip a background to text, or
+* in forced colours, it is the accent instead, so the word is never transparent.
+* Unset, the fill is the accent itself.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <h1>The world's first <Keyword>predictive</Keyword> retail system.</h1>
+*/
+const Keyword = React.forwardRef(function Keyword({ className, children, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"data-slot": "keyword",
+		className: cn("text-accent", "supports-[background-clip:text]:bg-[image:var(--cue-style-keyword-fill,linear-gradient(var(--cue-accent),var(--cue-accent)))] supports-[background-clip:text]:bg-clip-text supports-[background-clip:text]:text-transparent", "forced-colors:bg-none forced-colors:text-[CanvasText]", className),
+		...elementProps,
+		children
+	});
+});
+//#endregion
+export { Keyword };

package/dist/chrome/logo-strip.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+//#region src/chrome/logo-strip.d.ts
+interface LogoStripProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** The names, as text. A real company's logo is never drawn here. */
+  names: readonly string[];
+  /** The line above the row, e.g. "Trusted by teams at". */
+  caption?: React.ReactNode;
+}
+/**
+ * A row of names under a caption: the "trusted by" strip of a product page.
+ *
+ * Text wordmarks only, set in the display face at a muted ink, never an image: a
+ * real company's mark is a trademark that is not this library's to draw, and a
+ * gallery page's names are fictional. The row wraps, and centres when it does.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <LogoStrip caption="Trusted by teams at" names={["Northwind", "Halcyon", "Kestrel"]} />
+ */
+declare const LogoStrip: React.ForwardRefExoticComponent<LogoStripProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { LogoStrip, LogoStripProps };

package/dist/chrome/logo-strip.js

@@ -0,0 +1,43 @@
+import { cn } from "../lib/cn.js";
+import { LABEL_INK, LABEL_INK_SUBTLE } from "../system/_style-label-ink.js";
+import { LABEL_FACE } from "../system/_style-label-face.js";
+import { LABEL_CASE } from "../system/_style-label-case.js";
+import { LABEL_TRACKING } from "../system/_style-label-tracking.js";
+import { LABEL_SIZE } from "../system/_style-label-size.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chrome/logo-strip.tsx
+/**
+* A row of names under a caption: the "trusted by" strip of a product page.
+*
+* Text wordmarks only, set in the display face at a muted ink, never an image: a
+* real company's mark is a trademark that is not this library's to draw, and a
+* gallery page's names are fictional. The row wraps, and centres when it does.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <LogoStrip caption="Trusted by teams at" names={["Northwind", "Halcyon", "Kestrel"]} />
+*/
+const LogoStrip = React.forwardRef(function LogoStrip({ className, names, caption, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "logo-strip",
+		className: cn("flex flex-col items-center gap-(--cue-space-4)", className),
+		...elementProps,
+		children: [caption === void 0 ? null : /* @__PURE__ */ jsx("p", {
+			"data-slot": "logo-strip-caption",
+			className: cn(LABEL_FACE, LABEL_SIZE, LABEL_CASE, LABEL_TRACKING, LABEL_INK_SUBTLE, "m-0"),
+			children: caption
+		}), /* @__PURE__ */ jsx("ul", {
+			role: "list",
+			className: "m-0 flex list-none flex-wrap items-center justify-center gap-x-(--cue-space-7) gap-y-(--cue-space-4) p-0",
+			children: names.map((name) => /* @__PURE__ */ jsx("li", {
+				className: cn("font-sans text-(length:--cue-text-title) font-semibold", LABEL_INK),
+				children: name
+			}, name))
+		})]
+	});
+});
+//#endregion
+export { LogoStrip };

package/dist/chrome/page-shell.js

@@ -26,6 +26,18 @@ const WIDTHS = {
 	full: ""
 };
 /**
+* A style set's frame and grid lines (structural Looks, spec 2026-10-02 §3.1): a
+* dashed hairline round the content column, and two hairlines at its edges. Each is
+* a pseudo-element whose `content` is a token the build derives — `none` unless the
+* set asks, which generates no box at all — and the shell is their containing block
+* only while one is drawn, so a set without lines lays out and paints as before.
+*/
+const FRAME_LINES_CLASSES = [
+	"[position:var(--cue-style-page-frame-position,static)]",
+	"before:content-[var(--cue-style-frame-lines-content,none)] before:pointer-events-none before:absolute before:inset-0 before:border before:border-dashed before:border-(--cue-border)",
+	"after:content-[var(--cue-style-grid-lines-content,none)] after:pointer-events-none after:absolute after:inset-y-0 after:inset-x-(--cue-space-6) after:border-x after:border-(--cue-border)"
+].join(" ");
+/**
 * A centred content column with a standard page header.
 *
 * The header is emitted only when something fills it, so a shell used purely
@@ -47,7 +59,7 @@ const PageShell = React.forwardRef(function PageShell({ className, width = "narr
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		"data-slot": "page-shell",
-		className: cn("mx-auto flex w-full flex-col gap-(--cue-space-6) px-(--cue-space-6) py-(--cue-space-7)", WIDTHS[width], className),
+		className: cn("mx-auto flex w-full flex-col gap-(--cue-space-6) px-(--cue-space-6) py-(--cue-space-7)", FRAME_LINES_CLASSES, WIDTHS[width], className),
 		...elementProps,
 		children: [hasHeader ? /* @__PURE__ */ jsxs("header", {
 			"data-slot": "page-shell-header",

package/dist/chrome/stat-band.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+//#region src/chrome/stat-band.d.ts
+interface StatBandStat {
+  /** What is measured. */
+  label: React.ReactNode;
+  /** The reading. */
+  value: React.ReactNode;
+  /** An optional second line: a delta, a window, a unit. */
+  note?: React.ReactNode;
+}
+interface StatBandProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** The figures, in reading order. One to six sit in one row; more wrap. */
+  stats: readonly StatBandStat[];
+}
+/**
+ * A row of named figures: the KPI band under a report's title.
+ *
+ * Built from `Stat`, so each figure keeps its caption-over-reading voice and its
+ * tabular numerals. The style set decides the band's look: `style-stat-divider`
+ * draws a rule between figures, and `Stat` reads `style-stat-numeral-ink` for the
+ * reading's colour. Unset, there is no rule and the reading keeps its ink. A
+ * wrapped row's first figure draws no rule, so a narrow screen never shows a
+ * divider hanging off the left edge.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <StatBand stats={[{ label: "SKUs", value: "1,091" }, { label: "Brands", value: "148" }]} />
+ */
+declare const StatBand: React.ForwardRefExoticComponent<StatBandProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { StatBand, StatBandProps, StatBandStat };

package/dist/chrome/stat-band.js

@@ -0,0 +1,39 @@
+import { cn } from "../lib/cn.js";
+import { Stat } from "../instruments/stat.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/chrome/stat-band.tsx
+/**
+* A row of named figures: the KPI band under a report's title.
+*
+* Built from `Stat`, so each figure keeps its caption-over-reading voice and its
+* tabular numerals. The style set decides the band's look: `style-stat-divider`
+* draws a rule between figures, and `Stat` reads `style-stat-numeral-ink` for the
+* reading's colour. Unset, there is no rule and the reading keeps its ink. A
+* wrapped row's first figure draws no rule, so a narrow screen never shows a
+* divider hanging off the left edge.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <StatBand stats={[{ label: "SKUs", value: "1,091" }, { label: "Brands", value: "148" }]} />
+*/
+const StatBand = React.forwardRef(function StatBand({ className, stats, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "stat-band",
+		className: cn("overflow-hidden", className),
+		...elementProps,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "-ms-(--cue-space-5) flex flex-wrap gap-y-(--cue-space-5)",
+			children: stats.map((stat, index) => /* @__PURE__ */ jsx(Stat, {
+				label: stat.label,
+				value: stat.value,
+				detail: stat.note,
+				className: "relative min-w-[10rem] flex-1 ps-(--cue-space-5) before:pointer-events-none before:absolute before:inset-y-0 before:start-0 before:[border-inline-start:var(--cue-style-stat-divider,none)] before:content-['']"
+			}, index))
+		})
+	});
+});
+//#endregion
+export { StatBand };

package/dist/dmx/channel-matrix.js

@@ -1,10 +1,11 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { usePrefersReducedMotion } from "../instruments/_motion.js";
+import { useStill } from "../system/still.js";
 import { FOCUS_RING } from "../system/_focus-ring.js";
 import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
 import { useComposedRefs } from "../lib/compose.js";
 import { useCuePortalProps } from "../system/portal.js";
-import { usePrefersReducedMotion } from "../instruments/_motion.js";
 import { DMX_RAMP_NAMES, activeChannels, dmxPalette, dmxPaletteColor, dmxPaletteInk } from "./_ramp.js";
 import { DmxReadout } from "./_readout.js";
 import * as React from "react";
@@ -77,8 +78,9 @@ const ChannelMatrix = React.forwardRef(function ChannelMatrix({ className, data,
 	universesRef.current = universes;
 	const [hover, setHover] = React.useState(null);
 	const portal = useCuePortalProps();
-	const reduced = usePrefersReducedMotion();
-	const streaming = live && !reduced;
+	const prefersReduced = usePrefersReducedMotion();
+	const held = useStill();
+	const streaming = live && !(prefersReduced || held);
 	const paint = React.useCallback(() => {
 		const bytes = dataRef.current;
 		const palette = paletteRef.current;