@mcp-b/react-components 0.56.0 → 0.56.1

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

@@ -1,5 +1,5 @@
-import { Field } from "../foundations/Field.js";
 import { Dialog } from "../foundations/Dialog.js";
+import { Field } from "../foundations/Field.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/AccountSignInDialog.tsx

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

@@ -1,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { S as FileIcon, p as ChevronRightIcon } from "../../icons-cuEtsgj9.js";
 import { Collapsible } from "../foundations/Collapsible.js";
-import { S as FileIcon, p as ChevronRightIcon } from "../../icons-CeGfXO21.js";
-import { t as CopyButton } from "../../copy-button-Dk2vRe9j.js";
+import { t as CopyButton } from "../../copy-button-CSDuDfdP.js";
 import { Avatar } from "../foundations/Avatar.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,6 +1,6 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { b as EyeIcon, x as EyeOffIcon } from "../../icons-CeGfXO21.js";
-import { t as CopyButton } from "../../copy-button-Dk2vRe9j.js";
+import { b as EyeIcon, x as EyeOffIcon } from "../../icons-cuEtsgj9.js";
+import { t as CopyButton } from "../../copy-button-CSDuDfdP.js";
 import { Switch } from "../foundations/Switch.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,2 +1,2 @@
-import { a as FileTreeIcon, i as FileTreeFolder, n as FileTreeActions, o as FileTreeName, r as FileTreeFile, t as FileTree } from "../../FileTree-okaLnS5j.js";
+import { a as FileTreeIcon, i as FileTreeFolder, n as FileTreeActions, o as FileTreeName, r as FileTreeFile, t as FileTree } from "../../FileTree-DruTQ-oa.js";
 export { FileTree, FileTreeActions, FileTreeFile, FileTreeFolder, FileTreeIcon, FileTreeName };

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

@@ -1,6 +1,6 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { Switch } from "../foundations/Switch.js";
 import { ToggleGroup } from "../foundations/ToggleGroup.js";
+import { Switch } from "../foundations/Switch.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/PricingBillingToggle.tsx
 /** Controlled billing-period selector composed from the shared Switch or ToggleGroup. */

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

@@ -1,9 +1,9 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { N as MinusIcon, T as InfoIcon, d as CheckIcon } from "../../icons-CeGfXO21.js";
+import { N as MinusIcon, T as InfoIcon, d as CheckIcon } from "../../icons-cuEtsgj9.js";
 import { Button } from "../foundations/Button.js";
 import { IconButton } from "../foundations/IconButton.js";
-import { Card } from "../foundations/Card.js";
 import { Separator } from "../foundations/Separator.js";
+import { Card } from "../foundations/Card.js";
 import { getPlanPrice, getPlanYearlySavings } from "./Pricing.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/PricingPlanCard.tsx

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

@@ -1,8 +1,8 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { Card } from "../foundations/Card.js";
+import { Slider } from "../foundations/Slider.js";
 import { Separator } from "../foundations/Separator.js";
+import { Card } from "../foundations/Card.js";
 import { Progress } from "../foundations/Progress.js";
-import { Slider } from "../foundations/Slider.js";
 import { formatPricingUsage, getUsagePrice } from "./Pricing.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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-CeGfXO21.js";
+import { W as SidebarIcon, et as WarningIcon, f as ChevronDownIcon, r as ArrowLeftIcon } from "../../icons-cuEtsgj9.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";

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

@@ -1,8 +1,8 @@
 import { Button } from "../foundations/Button.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 { Field } from "../foundations/Field.js";
+import { Form } from "../foundations/Form.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-DWyifWWg.js";
+import { n as SetupChecklistGroup, t as SetupChecklistAction } from "../../SetupChecklist-BiWQkKEq.js";
 export { SetupChecklistAction, SetupChecklistGroup };

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-CeGfXO21.js";
+import { Z as TerminalIcon, nt as XIcon } from "../../icons-cuEtsgj9.js";
 import { IconButton } from "../foundations/IconButton.js";
-import { t as CopyButton } from "../../copy-button-Dk2vRe9j.js";
+import { t as CopyButton } from "../../copy-button-CSDuDfdP.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,6 +1,6 @@
-import { F as MoonIcon, P as MonitorIcon, Y as SunIcon } from "../../icons-CeGfXO21.js";
-import { Radio, RadioGroup } from "../foundations/RadioGroup.js";
+import { F as MoonIcon, P as MonitorIcon, Y as SunIcon } from "../../icons-cuEtsgj9.js";
 import { useTheme } from "../foundations/ThemeProvider.js";
+import { Radio, RadioGroup } from "../foundations/RadioGroup.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/ThemeModeControl.tsx
 const modes = [

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 { Input } from "../foundations/Input.js";
 import { ScrollArea } from "../foundations/ScrollArea.js";
+import { Input } from "../foundations/Input.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-CeGfXO21.js";
+import { D as LinkIcon } from "../../icons-cuEtsgj9.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-Bl-q7wMc.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,13 +1,13 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { r as ArrowLeftIcon } from "../../icons-CeGfXO21.js";
+import { r as ArrowLeftIcon } from "../../icons-cuEtsgj9.js";
 import { MessageActions } from "../ai-sdk/Message.js";
-import { TransitionSurface } from "../foundations/TransitionSurface.js";
-import { AppTopBar } from "../general-purpose/AppTopBar.js";
-import { NaniteMark } from "./NaniteScene.js";
 import { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.js";
-import { SubagentRunMetadata } from "../agents-sdk/SubagentRunDetails.js";
+import { NaniteMark } from "./NaniteScene.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";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useAgentChat } from "@cloudflare/think/react";

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

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

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/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);

package/dist/styles/responsive-sidebar-shell.css

@@ -272,6 +272,16 @@
     display: contents;
   }
 
+  /* Rich title triggers need the space left by the actual controls, rather
+     than the plain title's 45vw cap, to keep activity counts and a readable name. */
+  .app-top-bar[data-compact-leading="trigger"] {
+    grid-template-columns: auto var(--sigvelo-layout-track-fill) auto;
+  }
+
+  .app-top-bar[data-compact-leading="trigger"] .app-top-bar__title {
+    max-inline-size: 100%;
+  }
+
   .responsive-sidebar-shell__title-trigger {
     inline-size: auto;
     max-inline-size: 100%;
@@ -290,7 +300,7 @@
     box-shadow: var(--sigvelo-recipe-focus-shadow-inset);
   }
 
-  .responsive-sidebar-shell__title-trigger span {
+  .responsive-sidebar-shell__title-trigger > span {
     min-inline-size: 0;
     overflow: hidden;
     text-overflow: ellipsis;

package/dist/styles/search-field.css

@@ -4,7 +4,7 @@
   --sigvelo-recipe-control-font-size: var(--sigvelo-density-compact-control-font-size);
   --sigvelo-recipe-control-line-height: var(--sigvelo-density-compact-control-line-height);
   --sigvelo-recipe-control-icon-size: var(--sigvelo-density-compact-control-icon-size);
-  --sigvelo-recipe-control-radius: var(--sigvelo-radius-sm);
+  --sigvelo-recipe-control-radius: var(--sigvelo-radius-xl);
   --sigvelo-recipe-focus-shadow: var(--sigvelo-recipe-focus-shadow-inset);
   --sigvelo-focus-offset: -2px;
 }

package/dist/styles/tabs.css

@@ -148,7 +148,7 @@
 
 .tabs--bordered .tabs__tab {
   border-block-end: none;
-  border-radius: calc(var(--sigvelo-radius-md) - 2px);
+  border-radius: calc(var(--sigvelo-radius-md) - var(--sigvelo-spacing-0-5));
   margin-block-end: 0;
 }
 

package/dist/styles/think-routine.css

@@ -79,8 +79,6 @@
 }
 
 .think-routine__search {
-  --sigvelo-recipe-control-radius: var(--sigvelo-radius-full);
-
   display: grid;
   gap: var(--sigvelo-spacing-1-5);
   margin-block-end: var(--sigvelo-spacing-2);

package/dist/styles/think-thread-picker.css

@@ -43,6 +43,7 @@
 }
 
 .think-thread-status-indicators {
+  flex: 0 0 auto;
   min-inline-size: 0;
   display: inline-flex;
   align-items: center;
@@ -66,6 +67,18 @@
   block-size: var(--sigvelo-density-compact-control-icon-size);
 }
 
+.think-thread-status-dot {
+  flex: none;
+  inline-size: var(--sigvelo-spacing-1-5);
+  block-size: var(--sigvelo-spacing-1-5);
+  border-radius: var(--sigvelo-radius-full);
+  background: currentColor;
+}
+
+.think-thread-status-indicators__item .think-thread-status-dot {
+  margin-inline: var(--sigvelo-spacing-1);
+}
+
 .think-thread-status-indicators__item[data-status="running"] {
   color: var(--sigvelo-color-primary-text);
 }
@@ -260,11 +273,6 @@
   color: var(--sigvelo-color-primary-text);
 }
 
-/* The six statuses this rule used to list were `isThreadBusy` written out a
-   second time, and those are exactly the ones that render SpinnerIcon, which
-   spins itself. A DotIcon never needed the rule and would have started turning
-   the moment the two lists disagreed. */
-
 .think-thread-picker__thread[data-thread-status="error"] .think-thread-picker__thread-status {
   color: var(--sigvelo-color-danger-text);
 }
@@ -343,6 +351,11 @@
 }
 
 @media (forced-colors: active) {
+  .think-thread-status-dot {
+    forced-color-adjust: none;
+    background: CanvasText;
+  }
+
   .think-thread-picker {
     border-inline-end: var(--sigvelo-border-style) var(--sigvelo-border-width) canvastext;
     background: canvas;