@mcp-b/react-components 0.56.0 → 0.56.2

package/dist/components/nanites/NaniteScene.d.ts

@@ -1,20 +1,23 @@
 //#region src/components/nanites/NaniteScene.d.ts
-type NaniteSceneVariant = "idle" | "helmet" | "working" | "celebrating" | "concerned";
-type NaniteSceneProps = {
-  /** Visual state to render. */readonly variant: NaniteSceneVariant; /** Render three compact Nanites or one status Nanite with optional screen art. */
-  readonly mode?: "trio" | "solo"; /** Additional class names for layout only. */
-  readonly className?: string; /** Accessible title when the illustration communicates state. */
+export type NaniteSceneVariant = "idle" | "helmet" | "working" | "celebrating" | "concerned";
+export type NaniteSceneProps = {
+  /** Visual state to render. */
+  readonly variant: NaniteSceneVariant;
+  /** Render three compact Nanites or one status Nanite with optional screen art. */
+  readonly mode?: "trio" | "solo";
+  /** Additional class names for layout only. */
+  readonly className?: string;
+  /** Accessible title when the illustration communicates state. */
   readonly title?: string;
 };
-type NaniteMarkProps = {
-  /** Selects one of the established Nanite body colors. */readonly index?: number; /** Additional class names for layout only. */
+export type NaniteMarkProps = {
+  /** Selects one of the established Nanite body colors. */
+  readonly index?: number;
+  /** Additional class names for layout only. */
   readonly className?: string;
 };
 /** Compact decorative Nanite identity mark for dense agent and task UI. */
-declare function NaniteMark({
-  index,
-  className
-}: NaniteMarkProps): import("react").JSX.Element;
+export declare function NaniteMark({ index, className }: NaniteMarkProps): import("react").JSX.Element;
 /**
  * Decorative Nanites illustration used in setup, status, and empty states.
  * Pass a title when the illustration communicates state; otherwise it remains
@@ -32,11 +35,5 @@ declare function NaniteMark({
  * <NaniteScene variant="working" mode="solo" title="Agent is checking GitHub" />
  * ```
  */
-declare function NaniteScene({
-  variant,
-  mode,
-  className,
-  title
-}: NaniteSceneProps): import("react").JSX.Element;
-//#endregion
-export { NaniteMark, NaniteMarkProps, NaniteScene, NaniteSceneProps, NaniteSceneVariant };
+export declare function NaniteScene({ variant, mode, className, title }: NaniteSceneProps): import("react").JSX.Element;
+//#endregion

package/dist/components/nanites/NaniteScene.js

@@ -25,8 +25,9 @@ const TRIO_XS = [
 ];
 /** Compact decorative Nanite identity mark for dense agent and task UI. */
 function NaniteMark({ index = 0, className }) {
+	const wrapperClass = cx("nanite-mark", className);
 	return /* @__PURE__ */ jsx("span", {
-		className: cx("nanite-mark", className),
+		className: wrapperClass,
 		"aria-hidden": "true",
 		children: /* @__PURE__ */ jsxs("svg", {
 			viewBox: "-18 -34 36 54",
@@ -244,7 +245,7 @@ function NaniteScene({ variant, mode = "trio", className, title }) {
 					]
 				}) : null,
 				showGlass ? /* @__PURE__ */ jsx("g", {
-					transform: `translate(${screenCx - 4}, 32)`,
+					transform: `translate(78, 32)`,
 					children: /* @__PURE__ */ jsxs("g", {
 						className: "nanite-scene__glass",
 						children: [/* @__PURE__ */ jsx("circle", {
@@ -266,7 +267,7 @@ function NaniteScene({ variant, mode = "trio", className, title }) {
 					})
 				}) : null,
 				showSuccessMark ? /* @__PURE__ */ jsx("g", {
-					transform: `translate(96, ${screenCy - 10})`,
+					transform: `translate(96, 20)`,
 					children: /* @__PURE__ */ jsxs("g", {
 						className: "nanite-scene__status-mark",
 						children: [/* @__PURE__ */ jsx("circle", {
@@ -287,7 +288,7 @@ function NaniteScene({ variant, mode = "trio", className, title }) {
 					})
 				}) : null,
 				showFailMark ? /* @__PURE__ */ jsx("g", {
-					transform: `translate(96, ${screenCy - 10})`,
+					transform: `translate(96, 20)`,
 					children: /* @__PURE__ */ jsxs("g", {
 						className: "nanite-scene__status-mark",
 						children: [
@@ -325,22 +326,22 @@ function NaniteScene({ variant, mode = "trio", className, title }) {
 					children: [
 						/* @__PURE__ */ jsx("circle", {
 							className: "nanite-scene__sparkle",
-							cx: naniteX - 10,
-							cy: centerY - 24,
+							cx: 14,
+							cy: 6,
 							r: "1.6",
 							fill: HAT_BULB
 						}),
 						/* @__PURE__ */ jsx("circle", {
 							className: "nanite-scene__sparkle",
 							cx: 26,
-							cy: centerY - 28,
+							cy: 2,
 							r: "1.9",
 							fill: BODY_COLORS[0]
 						}),
 						/* @__PURE__ */ jsx("circle", {
 							className: "nanite-scene__sparkle",
 							cx: 38,
-							cy: centerY - 22,
+							cy: 8,
 							r: "1.6",
 							fill: BODY_COLORS[2]
 						})

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

@@ -1,6 +1,5 @@
-import { n as IconButtonProps } from "./IconButton-CAlFVb2L.js";
+import { n as IconButtonProps } from "./IconButton-43ggXEuf.js";
 import * as React from "react";
-
 //#region src/components/_internal/copy-button.d.ts
 interface CopyButtonProps extends Omit<IconButtonProps, "children" | "variant" | "color" | "onClick" | "onError"> {
   label: string;

package/dist/{format-COCyV98Z.js → format-CWaZEp5o.js}

@@ -57,7 +57,7 @@ function textLines(value) {
 */
 function firstLine(value) {
 	const line = textLines(value).at(0) ?? "";
-	return line.length > LINE_LIMIT ? `${line.slice(0, LINE_LIMIT - 1)}…` : line;
+	return line.length > LINE_LIMIT ? `${line.slice(0, 159)}…` : line;
 }
 /**
 * Renders an unknown upstream value as display text. Tool arguments, results,

package/dist/icons-CUuD7iEh.d.ts

@@ -0,0 +1,73 @@
+import { LucideProps } from "lucide-react";
+import { IconBaseProps } from "react-icons";
+//#region src/components/_internal/icons.d.ts
+/**
+ * The design system's single icon adapter.
+ *
+ * Lucide supplies the artwork while this adapter owns the library-wide optical
+ * defaults and decorative semantics. Keeping the existing names here lets
+ * components share one icon language without coupling their public APIs to an
+ * icon vendor.
+ */
+type IconProps = Omit<LucideProps, "ref">;
+type BrandIconProps = Omit<IconBaseProps, "ref">;
+declare const ChevronRightIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const ChevronDownIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const CheckIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const CodeIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const XIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const PencilIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const CopyIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const EyeIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const EyeOffIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const FolderIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const FolderOpenIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const FileIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const PaperclipIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const MicrophoneIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const StopIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const PlusIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const MinusIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const PlayIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const PauseIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const SquareIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const ArrowLeftIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const ArrowRightIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const ArrowDownIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const ArrowUpIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const ArrowUpRightIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const BookmarkIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const ArchiveIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const DownloadIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const RefreshIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const DotIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const EllipsisIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare function SpinnerIcon({ className, size, strokeWidth, ...props }: IconProps): import("react").JSX.Element;
+declare const SearchIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const SidebarIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const TerminalIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const LinkIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const KeyboardIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const QueueIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const TrashIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const WarningIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const BoxIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const BrainIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const CalendarIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const WrenchIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const InfoIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const MonitorIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const MessageSquareIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const MailIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const UserIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const McpIcon: ({ size, ...props }: BrandIconProps) => import("react").JSX.Element;
+/** Discord Blurple. Callers override with `color` or a `className` that sets color. */
+declare function DiscordIcon({ size, color, className, ...props }: BrandIconProps): import("react").JSX.Element;
+/** Four-color Slack hash. Official fills live on the paths, not currentColor. */
+declare function SlackIcon({ size, className, ...props }: BrandIconProps): import("react").JSX.Element;
+declare const MoonIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const SunIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const TargetIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+declare const MaximizeIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+//#endregion
+export { TerminalIcon as $, MailIcon as A, PencilIcon as B, FileIcon as C, InfoIcon as D, IconProps as E, MinusIcon as F, SearchIcon as G, PlusIcon as H, MonitorIcon as I, SpinnerIcon as J, SidebarIcon as K, MoonIcon as L, McpIcon as M, MessageSquareIcon as N, KeyboardIcon as O, MicrophoneIcon as P, TargetIcon as Q, PaperclipIcon as R, EyeOffIcon as S, FolderOpenIcon as T, QueueIcon as U, PlayIcon as V, RefreshIcon as W, StopIcon as X, SquareIcon as Y, SunIcon as Z, DiscordIcon as _, ArrowUpIcon as a, EllipsisIcon as b, BoxIcon as c, CalendarIcon as d, TrashIcon as et, CheckIcon as f, CopyIcon as g, CodeIcon as h, ArrowRightIcon as i, XIcon as it, MaximizeIcon as j, LinkIcon as k, BrainIcon as l, ChevronRightIcon as m, ArrowDownIcon as n, WarningIcon as nt, ArrowUpRightIcon as o, ChevronDownIcon as p, SlackIcon as q, ArrowLeftIcon as r, WrenchIcon as rt, BookmarkIcon as s, ArchiveIcon as t, UserIcon as tt, BrandIconProps as u, DotIcon as v, FolderIcon as w, EyeIcon as x, DownloadIcon as y, PauseIcon as z };

package/dist/{mcp-server-catalog-D9p4gGeJ.d.ts → mcp-server-catalog-DgA9BnL0.d.ts}

@@ -1,5 +1,4 @@
 import { MCPServer, MCPServersState } from "agents";
-
 //#region src/utils/mcp-server-catalog.d.ts
 interface McpServerSetupLink {
   label: string;

package/dist/{progress-ring-Cgii90dC.js → progress-ring-L2bbF0ji.js}

@@ -1,4 +1,4 @@
-import { n as clamp } from "./format-COCyV98Z.js";
+import { n as clamp } from "./format-CWaZEp5o.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/_internal/progress-ring.tsx
 /**

package/dist/styles/agent-chat.css

@@ -21,6 +21,16 @@
   min-block-size: 0;
 }
 
+/* One gutter contract for the transcript and floating composer, including
+   safe areas. The prompt's internal text padding is independent. */
+.agent-chat__transcript-content,
+.agent-chat__dock {
+  --agent-chat-used-column-inset: var(--agent-chat-column-inset, var(--sigvelo-spacing-4));
+
+  padding-inline: max(var(--agent-chat-used-column-inset), env(safe-area-inset-left, 0px))
+    max(var(--agent-chat-used-column-inset), env(safe-area-inset-right, 0px));
+}
+
 /* Room for the last message to scroll clear of the floating composer.
    --agent-chat-dock-size is set from a ResizeObserver in AgentChat. */
 .agent-chat__transcript-content {
@@ -31,21 +41,14 @@
   --message-scroller-virtual-block-start: var(--sigvelo-spacing-8);
 
   min-inline-size: 0;
-  max-inline-size: 100%;
-  /* Codex thread column: `mx-auto w-full max-w-(--thread-content-max-width)
-     px-toolbar`. Subtract the inset from the measure so content-box padding
-     cannot overflow the scroller or eat the composer clearance. */
-  --agent-chat-used-column-inset: var(--agent-chat-column-inset, var(--sigvelo-spacing-4));
-  inline-size: min(
-    calc(100% - 2 * var(--agent-chat-used-column-inset)),
-    var(--agent-chat-content-max-inline-size, var(--sigvelo-measure-wide-block))
-  );
+  /* Auto width subtracts the gutters from the content box; cap the reading
+     width at the same measure as the composer. */
+  max-inline-size: var(--agent-chat-content-max-inline-size, var(--sigvelo-measure-wide-block));
   margin-inline: auto;
   /* Clearance = composer + its scrim band, so a transcript resting at the
      bottom never sits inside the fade. */
   padding-block: var(--message-scroller-virtual-block-start)
     calc(var(--agent-chat-dock-size, 5rem) + var(--agent-chat-dock-scrim-fade, 2.5rem));
-  padding-inline: var(--agent-chat-used-column-inset);
 }
 
 .agent-chat:not(:has(.agent-chat__dock-content > :not(.agent-chat__notice:empty)))
@@ -69,11 +72,15 @@
    lower edge, so the state sits slightly high rather than under it. The
    shared brand loading state brings its own type and colour. */
 .agent-chat__transcript-loading {
+  overflow: hidden;
+  scrollbar-gutter: stable;
   padding-block-end: var(--agent-chat-dock-size, 5rem);
 }
 
 .agent-chat:not(:has(.agent-chat__dock-content > :not(.agent-chat__notice:empty)))
   .agent-chat__transcript-loading {
+  overflow: hidden;
+  scrollbar-gutter: stable;
   padding-block-end: 0;
 }
 
@@ -145,6 +152,8 @@
 }
 
 .agent-chat-start-screen__composer > .agent-chat__dock > .agent-chat__dock-content {
+  /* The start screen already reserves its own scrollbar gutter. */
+  scrollbar-gutter: auto;
   --agent-chat-dock-ink-room: 0px;
 
   overflow: visible;
@@ -301,14 +310,7 @@
   position: absolute;
   inset-inline: 0;
   inset-block-end: 0;
-  padding-block: 0 max(var(--sigvelo-spacing-6), env(safe-area-inset-bottom, 0px));
-  /* Same column as the transcript (Codex px-toolbar). The pill's own
-     padding lives on .prompt-input. */
-  padding-inline: max(
-      var(--agent-chat-column-inset, var(--sigvelo-spacing-4)),
-      env(safe-area-inset-left, 0px)
-    )
-    max(var(--agent-chat-column-inset, var(--sigvelo-spacing-4)), env(safe-area-inset-right, 0px));
+  padding-block: 0 max(var(--sigvelo-spacing-2), env(safe-area-inset-bottom, 0px));
 }
 
 /* Solid behind the composer itself, dissolving upward so passing transcript
@@ -446,6 +448,12 @@
    only where there is genuinely no room for it. */
 /* Local wrap. Not --sigvelo-layout-break-compact. */
 @container agent-chat (inline-size <= 36rem) {
+  .agent-chat__transcript-content,
+  .agent-chat__dock {
+    /* Codex Chrome extension: [--padding-toolbar:calc(var(--spacing)*2)] = 8px. */
+    --agent-chat-used-column-inset: var(--agent-chat-column-inset, var(--sigvelo-spacing-2));
+  }
+
   .agent-chat__transcript-content {
     /* A notch pushes the first row down only as far as it must: the desktop
        inset already clears shallow insets, so only deeper ones add height. */
@@ -453,23 +461,6 @@
       var(--sigvelo-spacing-8),
       calc(var(--sigvelo-spacing-5) + env(safe-area-inset-top, 0px))
     );
-
-    --agent-chat-used-column-inset: var(--agent-chat-column-inset, var(--sigvelo-spacing-2));
-    inline-size: min(
-      calc(100% - 2 * var(--agent-chat-used-column-inset)),
-      var(--agent-chat-content-max-inline-size, var(--sigvelo-measure-wide-block))
-    );
-    /* Codex Chrome extension: [--padding-toolbar:calc(var(--spacing)*2)] = 8px. */
-    padding-inline: var(--agent-chat-used-column-inset);
-  }
-
-  .agent-chat__dock {
-    padding-block-end: max(var(--sigvelo-layout-stack), env(safe-area-inset-bottom, 0px));
-    padding-inline: max(
-        var(--agent-chat-column-inset, var(--sigvelo-spacing-2)),
-        env(safe-area-inset-left, 0px)
-      )
-      max(var(--agent-chat-column-inset, var(--sigvelo-spacing-2)), env(safe-area-inset-right, 0px));
   }
 
   .agent-chat-start-screen__content {
@@ -516,6 +507,10 @@
 .agent-chat__dock-content {
   --agent-chat-dock-ink-room: var(--sigvelo-spacing-5);
 
+  /* Match the transcript viewport on platforms with classic scrollbars,
+     even while this dock is short enough not to scroll. */
+  scrollbar-gutter: stable;
+
   min-block-size: 0;
   overflow: auto;
   margin: calc(-1 * var(--agent-chat-dock-ink-room));

package/dist/styles/app-icon.css

@@ -3,7 +3,7 @@
    silhouette, so a transparent favicon casts its shape, not an invisible box. */
 .avatar.app-icon {
   --sigvelo-recipe-app-icon-size: var(--sigvelo-spacing-8);
-  --sigvelo-recipe-app-icon-radius: 30%;
+  --sigvelo-recipe-app-icon-radius: var(--sigvelo-radius-md);
 
   position: relative;
   display: inline-flex;
@@ -28,7 +28,6 @@
 
 .app-icon[data-app-icon-size="sm"] {
   --sigvelo-recipe-app-icon-size: var(--sigvelo-spacing-6);
-  --sigvelo-recipe-app-icon-radius: 37.5%;
 }
 
 .app-icon[data-app-icon-size="lg"] {

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

@@ -95,8 +95,8 @@
 }
 
 .app-top-bar__button:is([aria-expanded="true"], [data-popup-open], [data-pressed]):not(
-  :focus-visible
-) {
+    :focus-visible
+  ) {
   box-shadow: none;
 }
 

package/dist/styles/base.css

@@ -27,33 +27,32 @@
  * `round` in the block below. audit:css-recipes fails if that list falls out of
  * sync with the stylesheets.
  */
-:where(*) {
+:where(*),
+:where(*)::before,
+:where(*)::after {
   corner-shape: var(--sigvelo-corner-shape);
 }
 
+/* Pseudo-elements follow :where(), since they are invalid inside its selector list. */
 /* sigvelo-pill-shapes:start */
 :where(
   .approval__key,
   .avatar[data-shape="circle"],
   .avatar-group__count,
   .browser-run-panel__tab-glyph,
+  .browser-replay .replayer-mouse.touch-device,
   .chain-of-thought__search-result,
   .chain-of-thought__step-indicator,
   .codex-model-selector__trigger,
-  .codex-model-selector__trigger::before,
   .empty-state__icon,
   .inline-citation__trigger,
   .media-preview-card__play,
   .manager-office__unread-dot,
-  .manager-office__employee-nav::-webkit-scrollbar-thumb,
-  :where([data-layout="chat"]) .manager-office__employee-link[aria-current="page"]::after,
-  .menu__radio-indicator::before,
   .message-scroller__button,
   .plan-summary__trigger,
   .plan__step-indicator,
   .prompt-input__button[data-responsive-label],
   .prompt-input__context-trigger,
-  .prompt-input__dictation[data-listening] .prompt-input__dictation-icon::before,
   .prompt-input__permissions-trigger,
   .prompt-input__recording-button,
   .prompt-input__stop,
@@ -62,24 +61,34 @@
   .radio,
   .radio__indicator,
   .scroll-area__thumb,
+  .sigvelo-floating-prompt > *,
   .slider__indicator,
   .slider__thumb,
   .slider__track,
   .stepper__indicator,
   .stepper__separator,
   .stepper__trigger,
-  .subagent-run__milestone::before,
   .switch,
   .switch__thumb,
-  .task__item::before,
   .test-results__test-status,
-  .think-full-app__resizer::before,
   .think-routine__routine-status,
+  .think-thread-status-dot,
   [data-slot="meter-indicator"],
   [data-slot="meter-track"],
   [data-slot="progress-indicator"],
   [data-slot="progress-track"]
-) {
+),
+:where(.browser-replay .replayer-mouse)::after,
+:where(.codex-model-selector__trigger)::before,
+:where(.github-motion-mark)::before,
+:where(.github-motion-mark)::after,
+:where(.manager-office__employee-nav)::-webkit-scrollbar-thumb,
+:where(:where([data-layout="chat"]) .manager-office__employee-link[aria-current="page"])::after,
+:where(.menu__radio-indicator)::before,
+:where(.prompt-input__dictation[data-listening] .prompt-input__dictation-icon)::before,
+:where(.subagent-run__milestone)::before,
+:where(.task__item)::before,
+:where(.think-full-app__resizer)::before {
   --sigvelo-corner-shape: round;
 }
 /* sigvelo-pill-shapes:end */

package/dist/styles/brand-loading.css

@@ -47,6 +47,20 @@
   text-align: center;
 }
 
+/* A brief pending mount should not flash a full-strength logo. Keep the
+   region and its announcement present; only the artwork and copy fade in. */
+.brand-loading__mark,
+.brand-loading__label {
+  transition: opacity var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-enter);
+}
+
+@starting-style {
+  .brand-loading__mark,
+  .brand-loading__label {
+    opacity: 0;
+  }
+}
+
 @media (prefers-reduced-motion: reduce), (forced-colors: active) {
   .brand-loading__mark::after {
     display: none;

package/dist/styles/brand.test.ts

@@ -156,3 +156,24 @@ test("OS-following mode uses the same Sigvelo palette", () => {
     matchMedia("(prefers-color-scheme: dark)").matches ? "rgb(23, 23, 22)" : "rgb(247, 247, 244)",
   );
 });
+
+test("shared Squircle corners preserve true circular pseudo-elements and button variant shape", () => {
+  root.removeAttribute("data-preset");
+  root.removeAttribute("data-style");
+  const primary = document.createElement("button");
+  primary.className = "button button--normal button--primary";
+  const destructive = document.createElement("button");
+  destructive.className = "button button--normal button--destructive";
+  const mark = document.createElement("span");
+  mark.className = "github-motion-mark";
+  document.body.append(primary, destructive, mark);
+  expect(getComputedStyle(destructive).borderRadius).toBe(getComputedStyle(primary).borderRadius);
+  if (CSS.supports("corner-shape", "superellipse(1.5)")) {
+    expect(getComputedStyle(primary).getPropertyValue("corner-shape")).toBe("superellipse(1.5)");
+    expect(getComputedStyle(primary, "::after").getPropertyValue("corner-shape")).toBe(
+      "superellipse(1.5)",
+    );
+    expect(getComputedStyle(mark, "::before").getPropertyValue("corner-shape")).toBe("round");
+    expect(getComputedStyle(mark, "::after").getPropertyValue("corner-shape")).toBe("round");
+  }
+});

package/dist/styles/browser-replay.css

@@ -96,7 +96,7 @@
   width: 20px;
   height: 20px;
   background: var(--sigvelo-color-focus);
-  border-radius: 100%;
+  border-radius: var(--sigvelo-radius-circle);
   transform: translate(-50%, -50%);
   opacity: 0.3;
 }
@@ -114,7 +114,7 @@
   border-color: transparent;
   border-style: solid;
   border-width: 4px;
-  border-radius: 100%;
+  border-radius: var(--sigvelo-radius-circle);
   transition:
     left 0s linear,
     top 0s linear,

package/dist/styles/button.css

@@ -83,8 +83,6 @@
 }
 
 .button--normal.button--destructive {
-  --sigvelo-recipe-button-radius: var(--sigvelo-radius-full);
-
   background-color: var(--sigvelo-color-danger-bg);
   color: var(--sigvelo-color-danger-text-on-bg);
 }

package/dist/styles/checkbox.css

@@ -9,7 +9,7 @@
   flex-shrink: 0;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-muted);
-  border-radius: calc(var(--sigvelo-radius-md) - 4px);
+  border-radius: calc(var(--sigvelo-radius-md) - var(--sigvelo-spacing-1));
   background-color: var(--sigvelo-color-canvas);
   outline: none;
   cursor: pointer;

package/dist/styles/composition-motion.css

@@ -50,7 +50,7 @@
   }
 }
 
-/* React owns native snapshots; the class comes from <ViewTransition>. */
+/* Snapshot ownership stays with the caller: Router for routes, React for local Suspense demos. */
 ::view-transition {
   pointer-events: none;
 }
@@ -60,12 +60,22 @@
   animation-timing-function: var(--sigvelo-motion-ease-change);
 }
 
+/* A single Router-owned crossfade. Streaming and refetches never start this type. */
+:root:active-view-transition-type(sigvelo-navigation)::view-transition-group(root) {
+  animation-duration: var(--sigvelo-motion-duration-disclosure);
+  animation-timing-function: var(--sigvelo-motion-ease-change);
+}
+
 @media (prefers-reduced-motion: reduce) {
-  ::view-transition-group(.sigvelo-layout-transition) {
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
     animation: none !important;
   }
 }
 
-:root[data-motion="reduce"]::view-transition-group(.sigvelo-layout-transition) {
+:root[data-motion="reduce"]::view-transition-group(*),
+:root[data-motion="reduce"]::view-transition-old(*),
+:root[data-motion="reduce"]::view-transition-new(*) {
   animation: none !important;
 }

package/dist/styles/github-motion-mark.css

@@ -26,7 +26,7 @@
 .github-motion-mark::before {
   inset: -0.22em;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width) currentColor;
-  border-radius: 999px;
+  border-radius: var(--sigvelo-radius-circle);
   opacity: 0.24;
   transform-origin: 50% 50%;
   animation: github-motion-mark-ring 2.6s ease-out infinite;
@@ -35,7 +35,7 @@
 .github-motion-mark::after {
   inline-size: 0.24em;
   block-size: 0.24em;
-  border-radius: 999px;
+  border-radius: var(--sigvelo-radius-circle);
   background: currentColor;
   opacity: 0.55;
   transform: translate(0.48em, -0.46em);