@mcp-b/react-components 0.51.2 → 0.53.0

package/dist/components/general-purpose/ResponsiveSidebarShell.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { W as SidebarIcon, et as WarningIcon, f as ChevronDownIcon, r as ArrowLeftIcon } from "../../icons-cuEtsgj9.js";
+import { W as SidebarIcon, et as WarningIcon, f as ChevronDownIcon, r as ArrowLeftIcon } from "../../icons-CeGfXO21.js";
 import { Button } from "../foundations/Button.js";
 import { t as capitalize } from "../../format-COCyV98Z.js";
 import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
@@ -37,28 +37,12 @@ function isCompactSidebar(root) {
 	const rootFontSize = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
 	return root.offsetWidth <= compactSidebarWidthRem * rootFontSize;
 }
-/**
-* The one application shell: responsive master-detail with a resizable desktop
-* sidebar, a compact floating drawer that leaves the main content in place as
-* a dismiss target, and a shell-owned application bar composed from slots.
-* The root exposes `data-sidebar-open="true" | "false"` as its public styling
-* hook, and its container name `responsive-sidebar-shell` is public contract:
-* surfaces that compose the shell size themselves against it.
-*/
-function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", sidebarOpen, sidebarTogglePlacement = "main", defaultSidebarOpen, defaultSidebarWidth = sidebarDefaultWidth, onSidebarOpenChange, bar, error, showMainLabel = "Show main content", className, children, ref, style, ...props }) {
-	const sidebarId = React.useId();
-	const rootRef = React.useRef(null);
-	const mainRef = React.useRef(null);
-	const openerRef = React.useRef(null);
+/** Owns the independent sidebar and main-content breakpoints. */
+function useSidebarLayout({ rootRef, mainRef, isSidebarOpen, setSidebarOpen, primeSidebarOpen, wantsBuiltInDefault }) {
 	const compactRef = React.useRef(null);
 	const [compact, setCompact] = React.useState(true);
-	const restoreSidebarOnWideRef = React.useRef(true);
-	const [isSidebarOpen, setSidebarOpen, primeSidebarOpen] = useControllableSidebar({
-		sidebarOpen,
-		defaultSidebarOpen,
-		onSidebarOpenChange
-	});
-	const wantsBuiltInDefault = sidebarOpen === void 0 && defaultSidebarOpen === void 0;
+	const [contentCompact, setContentCompact] = React.useState(true);
+	const restoreSidebarOnWideRef = React.useRef(isSidebarOpen);
 	React.useLayoutEffect(() => {
 		const root = rootRef.current;
 		if (!root) return;
@@ -83,11 +67,55 @@ function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", sidebarOpen
 		observer.observe(root);
 		return () => observer.disconnect();
 	}, [
+		rootRef,
 		isSidebarOpen,
 		primeSidebarOpen,
 		setSidebarOpen,
 		wantsBuiltInDefault
 	]);
+	React.useLayoutEffect(() => {
+		const main = mainRef.current;
+		if (!main) return;
+		const syncContent = () => {
+			if (main.offsetWidth > 0) setContentCompact(isCompactSidebar(main));
+		};
+		syncContent();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(syncContent);
+		observer.observe(main);
+		return () => observer.disconnect();
+	}, [mainRef]);
+	return {
+		compact,
+		contentCompact
+	};
+}
+/**
+* The one application shell: responsive master-detail with a resizable desktop
+* sidebar, a compact floating drawer that leaves the main content in place as
+* a dismiss target, and a shell-owned application bar composed from slots.
+* The root exposes `data-sidebar-open="true" | "false"` as its public styling
+* hook, and its container name `responsive-sidebar-shell` is public contract:
+* surfaces that compose the shell size themselves against it.
+*/
+function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", sidebarOpen, sidebarTogglePlacement = "main", defaultSidebarOpen, defaultSidebarWidth = sidebarDefaultWidth, onSidebarOpenChange, bar, error, showMainLabel = "Show main content", className, children, ref, style, ...props }) {
+	const sidebarId = React.useId();
+	const rootRef = React.useRef(null);
+	const mainRef = React.useRef(null);
+	const openerRef = React.useRef(null);
+	const [isSidebarOpen, setSidebarOpen, primeSidebarOpen] = useControllableSidebar({
+		sidebarOpen,
+		defaultSidebarOpen,
+		onSidebarOpenChange
+	});
+	const { compact, contentCompact } = useSidebarLayout({
+		rootRef,
+		mainRef,
+		isSidebarOpen,
+		setSidebarOpen,
+		primeSidebarOpen,
+		wantsBuiltInDefault: sidebarOpen === void 0 && defaultSidebarOpen === void 0
+	});
 	const hasSidebar = sidebar != null;
 	const sidebarVisible = hasSidebar && isSidebarOpen;
 	const toggleLabel = capitalize(sidebarLabel);
@@ -115,10 +143,12 @@ function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", sidebarOpen
 	}, [setSidebarOpen, updateSidebar]);
 	const controls = React.useMemo(() => ({
 		compact,
+		contentCompact,
 		closeSidebar,
 		closeSidebarOnCompact
 	}), [
 		compact,
+		contentCompact,
 		closeSidebar,
 		closeSidebarOnCompact
 	]);
@@ -174,6 +204,7 @@ function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", sidebarOpen
 					/* @__PURE__ */ jsxs("div", {
 						ref: mainRef,
 						className: "responsive-sidebar-shell__main",
+						"data-content-compact": String(contentCompact),
 						tabIndex: -1,
 						children: [
 							/* @__PURE__ */ jsx(SidebarAppBar, {
@@ -209,9 +240,8 @@ function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", sidebarOpen
 }
 function SidebarAppBar({ bar, hasSidebar, sidebarTogglePlacement, sidebarId, isSidebarOpen, toggleSidebar, toggleLabel, toggleTooltip }) {
 	const hasCustomLeading = bar?.leading != null;
-	const hasAppLeading = bar?.back != null || hasCustomLeading;
 	const hasTitleTrigger = hasSidebar && bar?.compactTitleTrigger != null && bar?.compactLeading == null;
-	const mainSidebarToggle = hasSidebar && (sidebarTogglePlacement === "sidebar" || !hasCustomLeading) ? /* @__PURE__ */ jsx(AppTopBar.Button, {
+	const mainSidebarToggle = hasSidebar && (sidebarTogglePlacement === "sidebar" || !hasCustomLeading || !isSidebarOpen) ? /* @__PURE__ */ jsx(AppTopBar.Button, {
 		className: cx("responsive-sidebar-shell__toggle", sidebarToggleClassName(sidebarTogglePlacement, hasTitleTrigger, bar?.compactLeading != null)),
 		label: toggleLabel,
 		tooltip: toggleTooltip,
@@ -221,7 +251,7 @@ function SidebarAppBar({ bar, hasSidebar, sidebarTogglePlacement, sidebarId, isS
 		onClick: (event) => toggleSidebar(event.currentTarget),
 		children: /* @__PURE__ */ jsx(SidebarIcon, {})
 	}) : null;
-	const compactLeadingMode = hasTitleTrigger ? "trigger" : !hasAppLeading && bar?.compactLeading != null ? "custom" : void 0;
+	const compactLeadingMode = hasTitleTrigger ? "trigger" : bar?.compactLeading != null ? "custom" : void 0;
 	if (!hasSidebarAppBar(bar, hasSidebar)) return null;
 	return /* @__PURE__ */ jsxs(AppTopBar.Root, {
 		"aria-label": bar?.label ?? "Application controls",
@@ -270,15 +300,17 @@ function sidebarToggleClassName(placement, hasTitleTrigger, hasCompactLeading) {
 	if (hasCompactLeading) return "responsive-sidebar-shell__toggle--replaced-by-compact-leading";
 }
 function SidebarAppBarLeading({ bar, mainSidebarToggle, compactLeadingMode }) {
+	const { contentCompact } = useResponsiveSidebarShell();
+	const compactNavigationActive = contentCompact && compactLeadingMode === "custom";
 	if (mainSidebarToggle == null && bar?.back == null && bar?.leading == null && bar?.compactLeading == null) return null;
 	return /* @__PURE__ */ jsxs(AppTopBar.Leading, { children: [
-		bar?.back ? /* @__PURE__ */ jsx(AppTopBar.Link, {
+		mainSidebarToggle,
+		bar?.back && !compactNavigationActive ? /* @__PURE__ */ jsx(AppTopBar.Link, {
 			label: bar.back.label,
 			render: bar.back.link,
 			children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
 		}) : null,
-		bar?.leading,
-		mainSidebarToggle,
+		compactNavigationActive ? null : bar?.leading,
 		compactLeadingMode === "custom" ? /* @__PURE__ */ jsx("span", {
 			className: "responsive-sidebar-shell__compact-leading",
 			children: bar?.compactLeading

package/dist/components/general-purpose/SettingsFormDialog.js

@@ -1,8 +1,8 @@
 import { Button } from "../foundations/Button.js";
-import { Dialog } from "../foundations/Dialog.js";
-import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
 import { Field } from "../foundations/Field.js";
 import { Form } from "../foundations/Form.js";
+import { Dialog } from "../foundations/Dialog.js";
+import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/SettingsFormDialog.tsx

package/dist/components/general-purpose/SetupChecklist.js

@@ -1,2 +1,2 @@
-import { n as SetupChecklistGroup, t as SetupChecklistAction } from "../../SetupChecklist-Btmy3-_C.js";
+import { n as SetupChecklistGroup, t as SetupChecklistAction } from "../../SetupChecklist-DWyifWWg.js";
 export { SetupChecklistAction, SetupChecklistGroup };

package/dist/components/general-purpose/StatusScreen.d.ts

@@ -1,10 +1,21 @@
 import { EmptyStateProps } from "../foundations/EmptyState.js";
+import * as React from "react";
 
 //#region src/components/general-purpose/StatusScreen.d.ts
 /** A whole-region status with one shared layout for its message and recovery actions. */
 declare function StatusScreen({
   role,
+  page,
+  title,
   ...props
-}: EmptyStateProps): import("react").JSX.Element;
+}: EmptyStateProps & {
+  /** Standalone page semantics: a main landmark and level-one title. */page?: boolean;
+}): React.JSX.Element;
+/** Nonvisual route/status updates; the host supplies the localized announcement. */
+declare function StatusAnnouncement({
+  children
+}: {
+  children: React.ReactNode;
+}): React.JSX.Element;
 //#endregion
-export { StatusScreen };
+export { StatusAnnouncement, StatusScreen };

package/dist/components/general-purpose/StatusScreen.js

@@ -2,12 +2,36 @@ import { EmptyState } from "../foundations/EmptyState.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/general-purpose/StatusScreen.tsx
 /** A whole-region status with one shared layout for its message and recovery actions. */
-function StatusScreen({ role = "status", ...props }) {
+function StatusScreen({ role = "status", page = false, title, ...props }) {
+	if (page) return /* @__PURE__ */ jsx("main", {
+		className: "status-screen",
+		children: /* @__PURE__ */ jsx(EmptyState, {
+			...props,
+			role,
+			title: title ? /* @__PURE__ */ jsx("h1", {
+				className: "status-screen__title",
+				children: title
+			}) : void 0
+		})
+	});
 	return /* @__PURE__ */ jsx("section", {
 		className: "status-screen",
 		role,
-		children: /* @__PURE__ */ jsx(EmptyState, { ...props })
+		children: /* @__PURE__ */ jsx(EmptyState, {
+			title,
+			...props
+		})
+	});
+}
+/** Nonvisual route/status updates; the host supplies the localized announcement. */
+function StatusAnnouncement({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "sigvelo-visually-hidden",
+		role: "status",
+		"aria-live": "polite",
+		"aria-atomic": "true",
+		children
 	});
 }
 //#endregion
-export { StatusScreen };
+export { StatusAnnouncement, StatusScreen };

package/dist/components/general-purpose/Terminal.d.ts

@@ -1,5 +1,5 @@
-import { n as IconButtonProps } from "../../IconButton-ByiyjkYE.js";
-import { t as CopyButtonProps } from "../../copy-button-OUwOdgEm.js";
+import { n as IconButtonProps } from "../../IconButton-CAlFVb2L.js";
+import { t as CopyButtonProps } from "../../copy-button-CJYYgCIU.js";
 import * as React from "react";
 
 //#region src/components/general-purpose/Terminal.d.ts

package/dist/components/general-purpose/Terminal.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { Z as TerminalIcon, nt as XIcon } from "../../icons-cuEtsgj9.js";
+import { Z as TerminalIcon, nt as XIcon } from "../../icons-CeGfXO21.js";
 import { IconButton } from "../foundations/IconButton.js";
-import { t as CopyButton } from "../../copy-button-CSDuDfdP.js";
+import { t as CopyButton } from "../../copy-button-Dk2vRe9j.js";
 import { ScrollArea } from "../foundations/ScrollArea.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/general-purpose/TestResults.js

@@ -1,6 +1,6 @@
 import { n as mergeBaseClassName, t as cx } from "../../class-names-BiMDVpUo.js";
-import { K as SpinnerIcon, d as CheckIcon, nt as XIcon, p as ChevronRightIcon } from "../../icons-cuEtsgj9.js";
 import { Collapsible } from "../foundations/Collapsible.js";
+import { K as SpinnerIcon, d as CheckIcon, nt as XIcon, p as ChevronRightIcon } from "../../icons-CeGfXO21.js";
 import { Progress } from "../foundations/Progress.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/general-purpose/ThemeModeControl.js

@@ -1,4 +1,4 @@
-import { F as MoonIcon, P as MonitorIcon, Y as SunIcon } from "../../icons-cuEtsgj9.js";
+import { F as MoonIcon, P as MonitorIcon, Y as SunIcon } from "../../icons-CeGfXO21.js";
 import { useTheme } from "../foundations/ThemeProvider.js";
 import { Radio, RadioGroup } from "../foundations/RadioGroup.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/general-purpose/WebPreview.d.ts

@@ -1,4 +1,4 @@
-import { n as IconButtonProps } from "../../IconButton-ByiyjkYE.js";
+import { n as IconButtonProps } from "../../IconButton-CAlFVb2L.js";
 import * as React from "react";
 import { useRender } from "@base-ui/react/use-render";
 

package/dist/components/general-purpose/WebPreview.js

@@ -1,9 +1,9 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { H as RefreshIcon, f as ChevronDownIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "../../icons-cuEtsgj9.js";
 import { Collapsible } from "../foundations/Collapsible.js";
+import { H as RefreshIcon, f as ChevronDownIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "../../icons-CeGfXO21.js";
 import { IconButton } from "../foundations/IconButton.js";
-import { ScrollArea } from "../foundations/ScrollArea.js";
 import { Input } from "../foundations/Input.js";
+import { ScrollArea } from "../foundations/ScrollArea.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";

package/dist/components/nanites/AgentConnection.js

@@ -1,8 +1,8 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { D as LinkIcon } from "../../icons-cuEtsgj9.js";
+import { D as LinkIcon } from "../../icons-CeGfXO21.js";
 import { Button } from "../foundations/Button.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../../CodeBlock-Dw1z6jc8.js";
 import { Popover } from "../foundations/Popover.js";
-import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../../CodeBlock-g8sADidM.js";
 import { ToggleGroup } from "../foundations/ToggleGroup.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/nanites/AgentToolDetail.js

@@ -1,10 +1,10 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { r as ArrowLeftIcon } from "../../icons-cuEtsgj9.js";
+import { r as ArrowLeftIcon } from "../../icons-CeGfXO21.js";
 import { MessageActions } from "../ai-sdk/Message.js";
 import { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.js";
 import { NaniteMark } from "./NaniteScene.js";
-import { TransitionSurface } from "../foundations/TransitionSurface.js";
 import { AgentChat } from "../agents-sdk/AgentChat.js";
+import { TransitionSurface } from "../foundations/TransitionSurface.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { ThinkChat } from "../agents-sdk/ThinkChat.js";
 import { SubagentRunMetadata } from "../agents-sdk/SubagentRunDetails.js";

package/dist/{copy-button-OUwOdgEm.d.ts → copy-button-CJYYgCIU.d.ts}

@@ -1,4 +1,4 @@
-import { n as IconButtonProps } from "./IconButton-ByiyjkYE.js";
+import { n as IconButtonProps } from "./IconButton-CAlFVb2L.js";
 import * as React from "react";
 
 //#region src/components/_internal/copy-button.d.ts

package/dist/{copy-button-CSDuDfdP.js → copy-button-Dk2vRe9j.js}

@@ -1,4 +1,4 @@
-import { d as CheckIcon, h as CopyIcon } from "./icons-cuEtsgj9.js";
+import { d as CheckIcon, h as CopyIcon } from "./icons-CeGfXO21.js";
 import { IconButton } from "./components/foundations/IconButton.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/styles/activity.css

@@ -12,8 +12,8 @@
   margin-block: var(--sigvelo-spacing-2);
   font-family: inherit;
   /* Codex `conversation-body`: same ink as the turn, at 60%. Size matches
-     chat (`text-size-chat`); opacity is what marks the row as status. */
-  color: color-mix(in oklab, var(--sigvelo-color-text) 60%, transparent);
+     chat (`text-size-chat`); the muted foreground marks the row as status. */
+  color: var(--sigvelo-color-text-muted);
 }
 
 .activity__trigger {

package/dist/styles/agent-chat.css

@@ -67,12 +67,8 @@
 /* Takes the whole transcript region, the way the scroller it stands in for
    does, so nothing moves when the rows arrive. The composer floats over its
    lower edge, so the state sits slightly high rather than under it. The
-   .empty-state inside brings its own type and colour. */
+   shared brand loading state brings its own type and colour. */
 .agent-chat__transcript-loading {
-  display: grid;
-  block-size: 100%;
-  min-block-size: 0;
-  place-items: center;
   padding-block-end: var(--agent-chat-dock-size, 5rem);
 }
 
@@ -98,10 +94,7 @@
   display: grid;
   align-content: start;
   grid-template-rows: var(--sigvelo-layout-track-fill) auto var(--sigvelo-layout-track-fill);
-  inline-size: min(
-    100%,
-    var(--agent-chat-content-max-inline-size, var(--sigvelo-measure-wide-block))
-  );
+  inline-size: min(100%, var(--sigvelo-measure-prose));
   min-block-size: 100%;
   margin-inline: auto;
   padding-block: max(var(--agent-chat-start-screen-padding-block), env(safe-area-inset-top, 0px))
@@ -120,7 +113,7 @@
 
 .agent-chat-start-screen__heading {
   margin: 0;
-  color: var(--sigvelo-color-text);
+  color: var(--sigvelo-color-primary-text);
   font-size: var(--sigvelo-text-lg);
   font-weight: var(--sigvelo-font-weight-normal);
   letter-spacing: var(--sigvelo-tracking-normal);
@@ -164,56 +157,14 @@
   inline-size: 100%;
 }
 
-/* The first-turn utility tray owns its buttons' treatment so every host gets
-   the same quiet look without per-app classes. Hug the actions — a short
-   viewport (Storybook addons, a short side panel) used to stretch this into
-   a vacant slab. Space-between only when there are three slots to fill.
-   Compact control tokens keep this strip on the same ramp as the composer.
-   Count buttons only: opening a popup inserts non-layout focus guards. */
+/* Keep the utility tray inset beneath the floating composer. */
 .agent-chat-start-screen__composer-tray {
   align-self: start;
-  justify-content: start;
+  flex-wrap: wrap;
+  justify-content: center;
   min-block-size: 0;
 }
 
-.agent-chat-start-screen__composer-tray:has(
-  > :nth-child(3 of .button):nth-last-child(1 of .button)
-) {
-  justify-content: space-between;
-}
-
-.agent-chat-start-screen__composer-tray > .button {
-  --sigvelo-recipe-button-height: var(--sigvelo-density-compact-control-height);
-  --sigvelo-recipe-button-font-size: var(--sigvelo-density-compact-control-font-size);
-  --sigvelo-recipe-button-icon-size: var(--sigvelo-density-compact-control-icon-size);
-
-  min-inline-size: 0;
-  gap: var(--sigvelo-density-compact-control-gap);
-  padding-inline: var(--sigvelo-density-compact-control-padding-inline);
-  color: inherit;
-  font-size: var(--sigvelo-density-compact-control-font-size);
-  font-weight: var(--sigvelo-font-weight-normal);
-}
-
-.agent-chat-start-screen__composer-tray > .button > svg {
-  flex: none;
-}
-
-.agent-chat-start-screen__composer-tray .app-icon {
-  --sigvelo-recipe-app-icon-size: var(--sigvelo-spacing-5);
-}
-
-.agent-chat-start-screen__composer-tray .app-icon :is(svg, img) {
-  inline-size: 100%;
-  block-size: 100%;
-}
-
-.agent-chat-start-screen__composer-tray > .button > span:not(.app-icon-stack) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .agent-chat-start-screen__suggestions {
   grid-row: 3;
   align-self: start;
@@ -307,41 +258,6 @@
   opacity: 1;
 }
 
-/* First paint only. The start screen is replaced by the transcript after the
-   first message, so this never re-runs mid-conversation. */
-@media (prefers-reduced-motion: no-preference) {
-  .agent-chat-start-screen__primary > *,
-  .agent-chat-starter {
-    animation: agent-chat-start-screen-enter var(--sigvelo-motion-duration-disclosure)
-      var(--sigvelo-ease-snappy) backwards;
-  }
-
-  .agent-chat-start-screen__primary > *:nth-child(2),
-  .agent-chat-starter:nth-child(2) {
-    animation-delay: calc(var(--sigvelo-motion-stagger-step) * 1);
-  }
-
-  .agent-chat-start-screen__content > *:nth-child(3),
-  .agent-chat-starter:nth-child(3) {
-    animation-delay: calc(var(--sigvelo-motion-stagger-step) * 2);
-  }
-
-  .agent-chat-starter:nth-child(4) {
-    animation-delay: calc(var(--sigvelo-motion-stagger-step) * 3);
-  }
-
-  .agent-chat-starter:nth-child(n + 5) {
-    animation-delay: calc(var(--sigvelo-motion-stagger-step) * 4);
-  }
-}
-
-@keyframes agent-chat-start-screen-enter {
-  from {
-    opacity: 0;
-    translate: 0 var(--sigvelo-motion-distance-md);
-  }
-}
-
 /*
  * Once there is something in the composer, the screen quiets around it instead
  * of moving it: the heading slides down behind the composer and the starters
@@ -564,21 +480,6 @@
     font-size: var(--sigvelo-text-lg);
   }
 
-  .agent-chat-start-screen__composer-tray:has(
-    > :nth-child(3 of .button):nth-last-child(1 of .button)
-  ) {
-    display: grid;
-    grid-template-columns: repeat(3, var(--sigvelo-layout-track-fill));
-  }
-
-  .agent-chat-start-screen__composer-tray:has(
-      > :nth-child(3 of .button):nth-last-child(1 of .button)
-    )
-    > .button {
-    inline-size: 100%;
-    justify-content: center;
-  }
-
   .agent-chat-starter__label {
     overflow: hidden;
     text-overflow: ellipsis;

package/dist/styles/app-root.css

@@ -0,0 +1,9 @@
+/* Opt in only at a full-page application entrypoint. */
+@layer app {
+  html,
+  body,
+  #app {
+    height: 100%;
+    overflow: hidden;
+  }
+}

package/dist/styles/app-top-bar.css

@@ -42,7 +42,8 @@
   max-inline-size: min(20rem, 45vw);
   align-self: center;
   justify-self: center;
-  color: var(--sigvelo-color-text);
+  color: var(--sigvelo-color-primary-text);
+  letter-spacing: var(--sigvelo-tracking-tight);
   font-size: var(--sigvelo-density-compact-control-font-size);
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: var(--sigvelo-leading-tight);
@@ -56,14 +57,13 @@
 /* A panel header, not an application title bar: the symmetric track layout
    would float the name in the middle of the plane instead of labelling its
    leading edge. Only the trailing group still needs room of its own.
-   Panel chrome also sits atop scrolling content, so it separates the Ploy
-   way — one hairline and a breath of shadow, still no fill. */
+   A single hairline separates scrolling content while the title stays flat
+   against its hosting surface in both themes. */
 .app-top-bar[data-title-align="start"] {
   position: relative;
   grid-template-columns: auto auto var(--sigvelo-layout-track-fill);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
-  box-shadow: var(--sigvelo-elevation-bar);
 }
 
 .app-top-bar[data-title-align="start"] .app-top-bar__title {
@@ -126,3 +126,9 @@
     outline-offset: -2px;
   }
 }
+
+/* A matching router destination does not select an action such as New thread. */
+.app-top-bar__button:is([aria-pressed="true"], [data-pressed]) {
+  color: var(--sigvelo-color-primary-text-on-subtle);
+  background-color: var(--sigvelo-color-primary-bg-subtle);
+}

package/dist/styles/avatar.css

@@ -64,7 +64,7 @@
   block-size: 100%;
   font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-semibold);
-  color: var(--sigvelo-color-text-muted);
+  color: var(--sigvelo-color-neutral-text-on-subtle);
   text-transform: uppercase;
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border-radius: inherit;
@@ -109,7 +109,7 @@
   background-color: var(--sigvelo-color-neutral-bg-muted);
   border: 2px solid var(--sigvelo-color-canvas);
   border-radius: var(--sigvelo-radius-full);
-  color: var(--sigvelo-color-text-muted);
+  color: var(--sigvelo-color-neutral-text-on-subtle);
 }
 
 .avatar-group:has(.avatar[data-size="sm"]) .avatar-group__count {

package/dist/styles/base.css

@@ -45,7 +45,6 @@
   .inline-citation__trigger,
   .media-preview-card__play,
   .manager-office__unread-dot,
-  .manager-office__nav-status,
   .manager-office__employee-nav::-webkit-scrollbar-thumb,
   :where([data-layout="chat"]) .manager-office__employee-link[aria-current="page"]::after,
   .menu__radio-indicator::before,
@@ -70,7 +69,6 @@
   .stepper__separator,
   .stepper__trigger,
   .subagent-run__milestone::before,
-  .subagent-run__selector,
   .switch,
   .switch__thumb,
   .task__item::before,
@@ -166,6 +164,12 @@ a {
   touch-action: manipulation;
 }
 
+/* Native content links share the brand accent; control-owned link recipes
+   can still supply their own foreground in the components layer. */
+:where(a[href]) {
+  color: var(--sigvelo-color-primary-text);
+}
+
 button,
 input,
 optgroup,

package/dist/styles/brand-loading.css

@@ -0,0 +1,58 @@
+.brand-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sigvelo-layout-gutter);
+  inline-size: 100%;
+  block-size: 100%;
+  min-block-size: 0;
+  padding: var(--sigvelo-layout-gutter);
+}
+
+.brand-loading__mark {
+  position: relative;
+  display: block;
+  inline-size: var(--sigvelo-spacing-24);
+  aspect-ratio: 1;
+  flex: none;
+}
+
+.brand-loading__mark img {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.brand-loading__mark::after {
+  position: absolute;
+  inset: 0;
+  content: "";
+  background: linear-gradient(
+    105deg,
+    transparent 38%,
+    var(--sigvelo-color-primary-text-on-bg) 50%,
+    transparent 62%
+  );
+  background-size: 300% 100%;
+  mask: url("../assets/sigvelo-logo.svg") center / contain no-repeat;
+  animation: sigvelo-text-shimmer var(--sigvelo-motion-duration-shimmer)
+    var(--sigvelo-motion-ease-change) infinite;
+}
+
+.brand-loading__label {
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-compact);
+  line-height: var(--sigvelo-text-compact-leading);
+  text-align: center;
+}
+
+@media (prefers-reduced-motion: reduce), (forced-colors: active) {
+  .brand-loading__mark::after {
+    display: none;
+  }
+}
+
+:root[data-motion="reduce"] .brand-loading__mark::after {
+  display: none;
+}