@mcp-b/react-components 0.35.0 → 0.36.0

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

@@ -3,12 +3,19 @@ import { Dialog } from "../foundations/Dialog.js";
 import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
 import { Field } from "../foundations/Field.js";
 import { Form } from "../foundations/Form.js";
+import { Checkbox } from "../foundations/Checkbox.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/SettingsFormDialog.tsx
+/**
+* A checked box submits this, an unchecked one submits the empty string, so
+* `SettingsFormValues` stays all-strings for every field type.
+*/
+const SETTINGS_FORM_CHECKED = "true";
 function readSettingsValues(data, fields) {
 	return Object.fromEntries(fields.map((field) => {
 		const value = data[field.name];
+		if (field.type === "checkbox") return [field.name, value === true ? SETTINGS_FORM_CHECKED : ""];
 		return [field.name, typeof value === "string" ? value.trim() : ""];
 	}));
 }
@@ -51,7 +58,15 @@ function SettingsFormDialogContent({ fields, initialValues, submitLabel, submitt
 	return /* @__PURE__ */ jsxs(Form, {
 		onFormSubmit: submit,
 		children: [
-			fields.map((field) => /* @__PURE__ */ jsxs(Field.Root, {
+			fields.map((field) => field.type === "checkbox" ? /* @__PURE__ */ jsxs(Field.Root, {
+				name: field.name,
+				orientation: "horizontal",
+				children: [/* @__PURE__ */ jsx(Checkbox.Root, {
+					defaultChecked: initialValues?.[field.name] === SETTINGS_FORM_CHECKED,
+					disabled: field.readOnly,
+					children: /* @__PURE__ */ jsx(Checkbox.Indicator, {})
+				}), /* @__PURE__ */ jsxs(Field.Content, { children: [/* @__PURE__ */ jsx(Field.Label, { children: field.label }), field.description ? /* @__PURE__ */ jsx(Field.Description, { children: field.description }) : null] })]
+			}, field.name) : /* @__PURE__ */ jsxs(Field.Root, {
 				name: field.name,
 				children: [
 					/* @__PURE__ */ jsx(Field.Label, { children: field.label }),
@@ -108,4 +123,4 @@ function SettingsFormDialog({ open, onOpenChange, title, description, ...content
 	});
 }
 //#endregion
-export { SettingsFormDialog };
+export { SETTINGS_FORM_CHECKED, SettingsFormDialog };

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

@@ -1,9 +1,9 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { $ as TerminalIcon, rt as XIcon } from "../../icons-B1Qw05te.js";
 import { IconButton } from "../foundations/IconButton.js";
-import { t as CopyButton } from "../../copy-button-CsNSSKYG.js";
 import { Badge } from "../foundations/Badge.js";
 import { ScrollArea } from "../foundations/ScrollArea.js";
+import { t as CopyButton } from "../../copy-button-CsNSSKYG.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import Anser from "anser";
@@ -175,7 +175,7 @@ function TerminalContent({ className, ref, ...props }) {
 			ref: viewportRef,
 			className: "terminal__content-viewport",
 			onScroll: handleScroll,
-			children: /* @__PURE__ */ jsxs("pre", {
+			children: /* @__PURE__ */ jsx(ScrollArea.Content, { children: /* @__PURE__ */ jsxs("pre", {
 				className: "terminal__output",
 				children: [segments.map((seg, i) => /* @__PURE__ */ jsx("span", {
 					style: {
@@ -191,7 +191,7 @@ function TerminalContent({ className, ref, ...props }) {
 					className: "terminal__cursor",
 					"aria-hidden": "true"
 				}) : null]
-			})
+			}) })
 		}), /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
 			orientation: "vertical",
 			children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {})

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

@@ -33,7 +33,7 @@ function ThemeModeControl({ showLabels = true, "aria-label": ariaLabel = "Theme"
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(RadioGroup.Root, {
 		value: preference,
-		onValueChange: (nextValue) => setPreference(nextValue),
+		onValueChange: setPreference,
 		name,
 		disabled,
 		orientation: "horizontal",

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

@@ -3,8 +3,8 @@ import { W as RefreshIcon, f as ChevronDownIcon, i as ArrowRightIcon, r as Arrow
 import { Collapsible } from "../foundations/Collapsible.js";
 import { IconButton } from "../foundations/IconButton.js";
 import { Badge } from "../foundations/Badge.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";
 //#region src/components/general-purpose/WebPreview.tsx
@@ -262,9 +262,9 @@ function WebPreviewConsole({ className, logs = [], children, ref, ...props }) {
 			unstyled: true,
 			children: /* @__PURE__ */ jsxs(ScrollArea.Root, {
 				className: "web-preview__console-scroll",
-				children: [/* @__PURE__ */ jsxs(ScrollArea.Viewport, {
+				children: [/* @__PURE__ */ jsx(ScrollArea.Viewport, {
 					className: "web-preview__console-viewport",
-					children: [/* @__PURE__ */ jsx("ul", {
+					children: /* @__PURE__ */ jsxs(ScrollArea.Content, { children: [/* @__PURE__ */ jsx("ul", {
 						className: "web-preview__console-list sigvelo-stack-list",
 						children: logs.length === 0 ? /* @__PURE__ */ jsx("li", {
 							className: "web-preview__console-empty",
@@ -287,7 +287,7 @@ function WebPreviewConsole({ className, logs = [], children, ref, ...props }) {
 								})
 							]
 						}, index))
-					}), children]
+					}), children] })
 				}), /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
 					orientation: "vertical",
 					children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {})

package/dist/components/nanites/AgentConnection.js

@@ -2,7 +2,8 @@ import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { k as LinkIcon } from "../../icons-B1Qw05te.js";
 import { Button } from "../foundations/Button.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-CM5gfmdq.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-Bk4nn7l-.js";
+import { ToggleGroup } from "../foundations/ToggleGroup.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/nanites/AgentConnection.tsx
@@ -103,6 +104,7 @@ function AgentConnectionPanel({ className, commands: commandsProp, defaultTarget
 	const Heading = headingLevel === 3 ? "h3" : "h2";
 	const Wrapper = section ? "section" : "div";
 	if (!selected) return null;
+	const selectedIndex = commands.indexOf(selected);
 	return /* @__PURE__ */ jsxs(Wrapper, {
 		className: cx("agent-connect", className),
 		children: [
@@ -120,21 +122,24 @@ function AgentConnectionPanel({ className, commands: commandsProp, defaultTarget
 					children: [/* @__PURE__ */ jsx(Heading, { children: "Connect Agent" }), /* @__PURE__ */ jsx("p", { children: selected.description })]
 				})]
 			}),
-			/* @__PURE__ */ jsxs("fieldset", {
+			/* @__PURE__ */ jsxs(ToggleGroup.Root, {
+				render: /* @__PURE__ */ jsx("fieldset", {}),
 				className: "agent-connect__targets",
+				size: "sm",
+				spacing: 1,
+				value: [String(selectedIndex)],
+				onValueChange: (nextValue) => {
+					const nextIndex = nextValue[0];
+					const nextCommand = nextIndex === void 0 ? void 0 : commands[Number(nextIndex)];
+					if (nextCommand) setTarget(nextCommand.target);
+				},
 				children: [/* @__PURE__ */ jsx("legend", {
 					className: "agent-connect__legend sigvelo-visually-hidden",
 					children: "Agent connection target"
-				}), commands.map((command) => /* @__PURE__ */ jsx(Button, {
-					variant: "ghost",
-					color: "neutral",
-					size: "sm",
-					"aria-pressed": command.target === selected.target,
-					"data-selected": command.target === selected.target,
+				}), commands.map((command, index) => /* @__PURE__ */ jsx(ToggleGroup.Item, {
+					type: "button",
+					value: String(index),
 					className: "agent-connect__target",
-					onClick: () => {
-						setTarget(command.target);
-					},
 					children: command.label
 				}, command.target))]
 			}),

package/dist/components/nanites/AgentToolDetail.js

@@ -3,7 +3,7 @@ import { r as ArrowLeftIcon } from "../../icons-B1Qw05te.js";
 import { TransitionSurface } from "../foundations/TransitionSurface.js";
 import { SubagentRunActions, SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
 import { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.js";
-import { t as ThinkChat } from "../../ThinkChat-DbzqSTBt.js";
+import { t as ThinkChat } from "../../ThinkChat-ByR-QT_D.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { NaniteMark } from "./NaniteScene.js";
 import * as React from "react";

package/dist/{mcp-server-U71zhxFF.js → mcp-server-SD_S-IpB.js}

@@ -1,4 +1,4 @@
-import { getMcpServerIconSrc, getMcpServerRuntimeState } from "./utils/mcp-server-catalog.js";
+import { getMcpServerEntry, getMcpServerIconSrc, getMcpServerRuntimeState } from "./utils/mcp-server-catalog.js";
 import { AppIcon } from "./components/foundations/AppIcon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/_internal/mcp-server.tsx
@@ -9,6 +9,22 @@ function getMcpServerConnectionKind(server) {
 	if (state === "connecting" || state === "discovering" || state === "connected" && !server.error) return "connecting";
 	return "reconnect";
 }
+/**
+* Resolve one catalog card to the exact Agents SDK entry that owns its live
+* connection state. An explicit server ID is authoritative for authorization
+* flows and deliberately never falls back to a matching catalog entry.
+*/
+function getMcpServerProjection(card, mcp, serverId) {
+	const assignedServer = serverId === void 0 ? void 0 : mcp?.servers[serverId];
+	const entry = serverId === void 0 ? getMcpServerEntry(card, mcp) : assignedServer ? [serverId, assignedServer] : void 0;
+	const server = entry?.[1];
+	return {
+		connectionKind: getMcpServerConnectionKind(server),
+		runtimeState: server ? getMcpServerRuntimeState(server) : void 0,
+		server,
+		serverId: entry?.[0]
+	};
+}
 function McpServerIcon({ server, size = "lg", variant }) {
 	const src = getMcpServerIconSrc(server);
 	return /* @__PURE__ */ jsxs(AppIcon.Root, {
@@ -23,4 +39,4 @@ function McpServerIcon({ server, size = "lg", variant }) {
 	});
 }
 //#endregion
-export { getMcpServerConnectionKind as n, McpServerIcon as t };
+export { getMcpServerProjection as n, McpServerIcon as t };

package/dist/message-scroller-C8cplcQO.js

@@ -0,0 +1,32 @@
+//#region src/components/_internal/message-scroller.ts
+const messageScrollerContract = {
+	root: {
+		className: "message-scroller",
+		slot: "message-scroller"
+	},
+	viewport: {
+		ariaLabel: "Messages",
+		className: "message-scroller__viewport",
+		role: "region",
+		slot: "message-scroller-viewport",
+		tabIndex: 0
+	},
+	content: {
+		ariaRelevant: "additions",
+		className: "message-scroller__content",
+		role: "log",
+		slot: "message-scroller-content",
+		virtualClassName: "message-scroller__virtual-content"
+	},
+	item: {
+		className: "message-scroller__item",
+		slot: "message-scroller-item",
+		virtualClassName: "message-scroller__virtual-item"
+	},
+	button: {
+		className: "message-scroller__button",
+		slot: "message-scroller-button"
+	}
+};
+//#endregion
+export { messageScrollerContract as t };

package/dist/provider-logos-zjZycgV6.js

@@ -0,0 +1,74 @@
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/_internal/provider-logos.tsx
+function Svg({ children, size = 16, ...props }) {
+	return /* @__PURE__ */ jsx("svg", {
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "currentColor",
+		xmlns: "http://www.w3.org/2000/svg",
+		"aria-hidden": "true",
+		focusable: "false",
+		...props,
+		children
+	});
+}
+const OpenAILogo = (props) => /* @__PURE__ */ jsx(Svg, {
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M22.28 9.81a5.99 5.99 0 0 0-.52-4.91 6.05 6.05 0 0 0-6.52-2.9A6.05 6.05 0 0 0 10.58 0a6.05 6.05 0 0 0-5.77 4.18 5.99 5.99 0 0 0-4 2.9 6.05 6.05 0 0 0 .74 7.09 5.99 5.99 0 0 0 .52 4.91 6.05 6.05 0 0 0 6.52 2.9A5.99 5.99 0 0 0 13.25 24a6.05 6.05 0 0 0 5.77-4.19 5.99 5.99 0 0 0 4-2.9 6.05 6.05 0 0 0-.74-7.1ZM13.25 22.44a4.48 4.48 0 0 1-2.88-1.04l.14-.08 4.79-2.76a.78.78 0 0 0 .39-.68v-6.75l2.02 1.17c.02 0 .04.03.04.05v5.58a4.5 4.5 0 0 1-4.5 4.5ZM3.57 18.3a4.5 4.5 0 0 1-.54-3.03l.14.09 4.79 2.76a.78.78 0 0 0 .78 0l5.85-3.37v2.33c0 .02 0 .04-.03.06L9.72 19.94a4.5 4.5 0 0 1-6.15-1.64ZM2.31 7.88a4.48 4.48 0 0 1 2.35-1.97v5.69a.78.78 0 0 0 .39.67l5.83 3.36-2.02 1.17a.07.07 0 0 1-.07 0l-4.83-2.8A4.5 4.5 0 0 1 2.3 7.9Zm16.64 3.87L13.1 8.37l2.02-1.17c.02 0 .05-.01.07 0l4.83 2.8a4.5 4.5 0 0 1-.67 8.11V12.4a.77.77 0 0 0-.4-.66Zm2-3.03-.14-.09-4.78-2.78a.78.78 0 0 0-.79 0L9.4 9.25V6.92c0-.02 0-.04.02-.05l4.83-2.79a4.5 4.5 0 0 1 6.68 4.66Zm-12.68 4.17-2.02-1.17a.07.07 0 0 1-.04-.06V6.1a4.5 4.5 0 0 1 7.38-3.45l-.14.08L8.66 5.5a.78.78 0 0 0-.4.68v6.74Zm1.1-2.36 2.6-1.5 2.61 1.5v3l-2.6 1.5-2.6-1.5Z" })
+});
+const AnthropicLogo = (props) => /* @__PURE__ */ jsxs(Svg, {
+	...props,
+	children: [/* @__PURE__ */ jsx("path", { d: "M13.83 4H17.3L24 20h-3.47l-1.37-3.52h-7L10.82 20H7.36ZM13.25 13.58h4.8l-2.4-6.15Z" }), /* @__PURE__ */ jsx("path", { d: "M0 4h3.47l6.7 16H6.7Z" })]
+});
+const GoogleLogo = (props) => /* @__PURE__ */ jsx(Svg, {
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 2a8 8 0 0 1 5.34 2.05l-2.2 2.2A5 5 0 1 0 17 12.6h-5v-2.6h7.9A8 8 0 0 1 12 20 8 8 0 0 1 12 4Z" })
+});
+const MetaLogo = (props) => /* @__PURE__ */ jsx(Svg, {
+	...props,
+	children: /* @__PURE__ */ jsx("path", { d: "M2 12.5c0-3.5 1.8-6.5 4.4-6.5 1.8 0 3.2 1.3 4.9 3.8 2.2 3.2 3.3 5 4.6 5 1 0 1.5-.8 1.5-2.3 0-2.1-1-4.3-2.7-4.3-1 0-2 .6-3.2 2l-1.3-1.7C11.5 6.8 12.9 6 14.5 6c3 0 5.5 3.3 5.5 7 0 3.3-1.6 5-3.8 5-2.3 0-3.6-1.6-6-5.3C8.9 10.4 8 9.2 6.8 9.2 5.4 9.2 4.3 10.6 4.3 13c0 1.8.5 3 1.3 3 .6 0 1.1-.3 1.8-1.1l1.3 1.7C7.6 17.6 6.3 18 5.3 18 3.3 18 2 16 2 12.5Z" })
+});
+const KimiLogo = (props) => /* @__PURE__ */ jsxs(Svg, {
+	...props,
+	children: [/* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "9.5",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5"
+	}), /* @__PURE__ */ jsx("path", {
+		d: "M8 7.5v9M8 12l4.5-4.5M8 12l5 4.5M14 7.5h2.5v9H14z",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round"
+	})]
+});
+const FallbackLogo = (props) => /* @__PURE__ */ jsx(Svg, {
+	...props,
+	children: /* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "3"
+	})
+});
+/**
+* Resolves a provider string to its logo component.
+* Unknown providers get a neutral dot fallback.
+*/
+function ProviderLogo({ provider, ...props }) {
+	switch (provider.toLowerCase()) {
+		case "openai": return /* @__PURE__ */ jsx(OpenAILogo, { ...props });
+		case "anthropic": return /* @__PURE__ */ jsx(AnthropicLogo, { ...props });
+		case "google": return /* @__PURE__ */ jsx(GoogleLogo, { ...props });
+		case "meta": return /* @__PURE__ */ jsx(MetaLogo, { ...props });
+		case "kimi": return /* @__PURE__ */ jsx(KimiLogo, { ...props });
+		default: return /* @__PURE__ */ jsx(FallbackLogo, { ...props });
+	}
+}
+//#endregion
+export { ProviderLogo as t };

package/dist/styles/agent-chat.css

@@ -436,6 +436,15 @@
   block-size: var(--sigvelo-text-sm);
 }
 
+.agent-chat__queued-content {
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.agent-chat__queued-actions {
+  opacity: 1;
+}
+
 .agent-chat__queued-action {
   flex: none;
   font-weight: var(--sigvelo-font-weight-normal);

package/dist/styles/agent-connection.css

@@ -49,35 +49,18 @@
   text-wrap: pretty;
 }
 
-.agent-connect__targets {
+.agent-connect .agent-connect__targets {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: var(--sigvelo-spacing-1);
   min-inline-size: 0;
   margin: 0;
   padding: var(--sigvelo-spacing-1);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-md);
-  background: var(--sigvelo-color-neutral-bg-subtle);
 }
 
 .agent-connect__target {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-block-size: var(--sigvelo-spacing-7);
   min-inline-size: 0;
-  padding: 0 var(--sigvelo-spacing-2);
-  border: 0;
-  border-radius: var(--sigvelo-radius-sm);
-  background: transparent;
-  color: var(--sigvelo-color-text-muted);
-  cursor: pointer;
-  font: inherit;
-  font-size: var(--sigvelo-text-xs);
-  font-weight: var(--sigvelo-font-weight-semibold);
-  line-height: var(--sigvelo-leading-tight);
   overflow-wrap: anywhere;
   text-align: center;
 }
@@ -92,23 +75,13 @@
 }
 
 @media (pointer: coarse) {
-  .agent-connect__target {
+  .agent-connect .agent-connect__target {
     min-block-size: var(--sigvelo-spacing-10);
     padding-inline: var(--sigvelo-spacing-3);
   }
 }
 
-.agent-connect__target:hover {
-  color: var(--sigvelo-color-text);
-  background: color-mix(in oklab, var(--sigvelo-color-neutral-bg-muted), transparent 38%);
-}
-
-.agent-connect__target:focus-visible {
-  outline: none;
-  box-shadow: var(--sigvelo-recipe-focus-shadow);
-}
-
-.agent-connect__target[data-selected="true"] {
+.agent-connect .agent-connect__target[data-pressed] {
   border-color: var(--sigvelo-color-primary-border-muted);
   background: var(--sigvelo-color-surface);
   color: var(--sigvelo-color-text);
@@ -174,7 +147,7 @@
     border-color: ButtonText;
   }
 
-  .agent-connect__target[data-selected="true"] {
+  .agent-connect .agent-connect__target[data-pressed] {
     outline: var(--sigvelo-focus-ring-forced);
     outline-offset: -2px;
   }

package/dist/styles/alert-dialog.css

@@ -3,7 +3,6 @@
 .alert-dialog__backdrop {
   background-color: var(--sigvelo-color-backdrop);
   backdrop-filter: var(--sigvelo-glass-filter);
-  z-index: var(--sigvelo-z-overlay);
 }
 
 .alert-dialog__popup {
@@ -13,7 +12,6 @@
   inset-block-start: 50%;
   inset-inline-start: 50%;
   translate: -50% -50%;
-  z-index: var(--sigvelo-z-overlay);
   inline-size: calc(100% - var(--sigvelo-control-height-sm));
   max-inline-size: 28rem;
   max-block-size: calc(100dvb - var(--sigvelo-control-height-sm));

package/dist/styles/base-ui-motion.css

@@ -2,7 +2,9 @@
  * Base UI exposes presence state on popup parts. Keep its state contract in
  * CSS so all anchored surfaces enter, exit, and respect reduced motion alike.
  */
-.base-ui-positioner {
+.base-ui-positioner,
+.base-ui-backdrop,
+.base-ui-modal-popup {
   z-index: var(--sigvelo-z-overlay);
 }
 
@@ -170,26 +172,26 @@
 .base-ui-adaptive-viewport[data-activation-direction~="left"] > [data-current][data-starting-style],
 .base-ui-adaptive-viewport[data-activation-direction~="right"]
   > [data-previous][data-ending-style] {
-  translate: 25% 0;
+  translate: -25% 0;
   opacity: 0;
 }
 
 .base-ui-adaptive-viewport[data-activation-direction~="right"]
   > [data-current][data-starting-style],
 .base-ui-adaptive-viewport[data-activation-direction~="left"] > [data-previous][data-ending-style] {
-  translate: -25% 0;
+  translate: 25% 0;
   opacity: 0;
 }
 
 .base-ui-adaptive-viewport[data-activation-direction~="up"] > [data-current][data-starting-style],
 .base-ui-adaptive-viewport[data-activation-direction~="down"] > [data-previous][data-ending-style] {
-  translate: 0 25%;
+  translate: 0 -25%;
   opacity: 0;
 }
 
 .base-ui-adaptive-viewport[data-activation-direction~="down"] > [data-current][data-starting-style],
 .base-ui-adaptive-viewport[data-activation-direction~="up"] > [data-previous][data-ending-style] {
-  translate: 0 -25%;
+  translate: 0 25%;
   opacity: 0;
 }
 

package/dist/styles/chatgpt-sign-in-screen.css

@@ -96,8 +96,7 @@
   line-height: var(--sigvelo-leading-compact);
 }
 
-.chatgpt-sign-in__brand-mark,
-.chatgpt-sign-in__logo {
+.chatgpt-sign-in__brand-mark {
   display: inline-flex;
 }
 
@@ -198,7 +197,10 @@
   scale: 1.06;
 }
 
-.chatgpt-sign-in__logo {
+.chatgpt-sign-in__button .chatgpt-sign-in__logo {
+  display: block;
+  inline-size: var(--sigvelo-control-icon-size-sm);
+  block-size: var(--sigvelo-control-icon-size-sm);
   color: inherit;
 }
 

package/dist/styles/dialog.css

@@ -15,7 +15,6 @@
 .dialog__backdrop {
   background-color: var(--sigvelo-color-backdrop);
   backdrop-filter: var(--sigvelo-glass-filter);
-  z-index: var(--sigvelo-z-overlay);
 }
 
 .dialog__popup {
@@ -25,7 +24,6 @@
   inset-block-start: 50%;
   inset-inline-start: 50%;
   translate: -50% -50%;
-  z-index: var(--sigvelo-z-overlay);
   inline-size: calc(100% - var(--sigvelo-control-height-sm));
   max-inline-size: 32rem;
   max-block-size: calc(100dvb - var(--sigvelo-spacing-8));

package/dist/styles/model-selector.css

@@ -40,12 +40,16 @@
   color: var(--sigvelo-color-text-muted);
 }
 
-.model-selector__input.input {
+.model-selector__input {
+  box-sizing: border-box;
   flex: 1;
   min-inline-size: 0;
+  inline-size: 100%;
   block-size: auto;
+  margin: 0;
   padding: 0;
   border: none;
+  border-radius: 0;
   outline: none;
   background-color: transparent;
   color: var(--sigvelo-color-text);
@@ -53,7 +57,7 @@
   font-size: var(--sigvelo-text-sm);
 }
 
-.model-selector__input.input:focus-visible {
+.model-selector__input:focus-visible {
   box-shadow: none;
 }
 
@@ -66,9 +70,28 @@
 }
 
 .model-selector__list {
-  flex: 1;
-  overflow: auto;
+  position: relative;
+  display: flex;
+  flex: 0 1 auto;
+  min-block-size: 0;
+  max-block-size: min(26rem, calc(100dvb - var(--sigvelo-spacing-24)));
+  overflow: hidden;
+}
+
+.model-selector__list-viewport {
+  flex: 1 1 auto;
+  min-block-size: 0;
+  overscroll-behavior: contain;
+  scroll-padding-block: var(--sigvelo-spacing-1);
+}
+
+.model-selector__list-content {
+  min-inline-size: 100%;
+}
+
+.model-selector__options {
   padding-block: var(--sigvelo-spacing-1);
+  outline: none;
 }
 
 .model-selector__group {
@@ -106,11 +129,11 @@
 }
 
 .model-selector__item:hover:not(:disabled):not([data-disabled]),
-.model-selector__item:focus-visible {
+.model-selector__item[data-highlighted] {
   background-color: var(--sigvelo-color-neutral-bg-subtle);
 }
 
-.model-selector__item:focus-visible {
+.model-selector__item[data-highlighted] {
   outline: none;
   box-shadow: var(--sigvelo-recipe-focus-shadow-inset);
 }
@@ -135,11 +158,6 @@
   }
 }
 
-/* Hide empty state when any group sibling has visible items. */
-.model-selector__list:has(.model-selector__group) .model-selector__empty {
-  display: none;
-}
-
 .model-selector__separator {
   margin-block: var(--sigvelo-spacing-1);
   margin-inline: 0;
@@ -176,7 +194,7 @@
 }
 
 @media (forced-colors: active) {
-  .model-selector__item:focus-visible,
+  .model-selector__item[data-highlighted],
   .model-selector__item:hover {
     outline: var(--sigvelo-focus-ring-forced);
     outline-offset: -2px;

package/dist/styles/popover.css

@@ -1,5 +1,4 @@
 .popover__backdrop {
-  z-index: var(--sigvelo-z-overlay);
   background-color: color-mix(in oklab, var(--sigvelo-color-text), transparent 50%);
 }
 

package/dist/styles/preview-card.css

@@ -16,10 +16,6 @@
   border-radius: var(--sigvelo-radius-sm);
 }
 
-.preview-card__backdrop {
-  z-index: var(--sigvelo-z-overlay);
-}
-
 .preview-card__popup {
   --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-3);
 

package/dist/styles/pricing-page.css

@@ -33,19 +33,7 @@
 
 .pricing-page__billing-toggle {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--sigvelo-spacing-4);
-}
-
-.pricing-page__toggle-options {
-  display: flex;
-  align-items: center;
-  gap: var(--sigvelo-spacing-2);
-}
-
-.pricing-page__toggle-label {
-  font-size: var(--sigvelo-text-xs);
+  justify-content: center;
 }
 
 .pricing-page__switch-container {