@mcp-b/react-components 0.42.0 → 0.43.0

package/dist/components/agents-sdk/ThinkThreadPicker.js

@@ -4,9 +4,10 @@ import { Button, buttonVariants } from "../foundations/Button.js";
 import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
 import { n as isPlainPrimaryLinkActivation, t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
 import { ScrollArea } from "../foundations/ScrollArea.js";
-import { AlertDialog } from "../foundations/AlertDialog.js";
 import { EmptyState } from "../foundations/EmptyState.js";
+import { LinkButton } from "../foundations/LinkButton.js";
 import { SearchField } from "../foundations/SearchField.js";
+import { AlertDialog } from "../foundations/AlertDialog.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/ThinkThreadPicker.tsx
@@ -108,7 +109,7 @@ function ThinkThreadStatusIndicators({ summary, className }) {
 * notes beside the parent Think agent because
 * `listThreads()`/`createThread()`/`deleteThread()` are app-owned.
 */
-function ThinkThreadPicker({ threads, renderThreadLink, onCreate, onSelect, onDelete, className, title = "Recents", "aria-label": ariaLabel = "Threads", ref, ...props }) {
+function ThinkThreadPicker({ threads, renderThreadLink, createThreadLink, onSelect, onDelete, className, title = "Recents", "aria-label": ariaLabel = "Threads", ref, ...props }) {
 	const statusSummary = summarizeThinkThreads(threads);
 	const [query, setQuery] = React.useState("");
 	const [deleteOpen, setDeleteOpen] = React.useState(false);
@@ -258,16 +259,15 @@ function ThinkThreadPicker({ threads, renderThreadLink, onCreate, onSelect, onDe
 					})]
 				})
 			}),
-			onCreate ? /* @__PURE__ */ jsx("div", {
+			createThreadLink ? /* @__PURE__ */ jsx("div", {
 				className: "think-thread-picker__footer",
-				children: /* @__PURE__ */ jsxs(Button, {
+				children: /* @__PURE__ */ jsxs(LinkButton, {
 					ref: createButtonRef,
-					type: "button",
 					variant: "normal",
 					color: "neutral",
 					size: "sm",
 					className: "think-thread-picker__create",
-					onClick: () => void onCreate(),
+					render: createThreadLink,
 					children: [/* @__PURE__ */ jsx(PlusIcon, {}), /* @__PURE__ */ jsx("span", { children: "New thread" })]
 				})
 			}) : null,

package/dist/components/agents-sdk/Workspace.d.ts

@@ -1,140 +1,2 @@
-import { a as WorkspaceMediaInfo, i as WorkspaceFileState, r as WorkspaceFileAssetResolver, t as WorkspaceFileAsset } from "../../WorkspaceFile-BLaFmMrt.js";
-import { DataTag, QueryKey, UnusedSkipTokenOptions } from "@tanstack/react-query";
-import { WorkspaceLike } from "@cloudflare/think";
-import { FileInfo, Workspace } from "@cloudflare/shell";
-
-//#region src/components/agents-sdk/Workspace.d.ts
-/** Workspace summary, as returned by `Workspace.getWorkspaceInfo()` upstream. */
-type WorkspaceInfo = Awaited<ReturnType<Workspace["getWorkspaceInfo"]>>;
-/** Whole upstream workspace shapes, accepted without narrowing or mirroring. */
-type WorkspaceSource = Workspace | WorkspaceLike;
-interface UseWorkspaceOptions {
-  /** Must be referentially stable (memoize in the app). */
-  source: WorkspaceSource;
-  /**
-   * Stable, non-secret identity for the endpoint/account/tenant/workspace
-   * behind `source`. Change it whenever that backing workspace changes.
-   */
-  sourceKey: string;
-  /** Root directory to list first. Defaults to "/". */
-  root?: string;
-  /** Route-owned selected file path. */
-  selectedPath: string | null;
-  /** Called when a non-link browser asks the app to select a file. */
-  onSelectedPathChange?: (path: string | null) => void;
-  /**
-   * Optional host adapter called before text/binary reads. Return `null` for
-   * ordinary text files and prefer signed/range-friendly URLs for large media.
-   * The configured root scopes navigation; hosts must enforce authorization
-   * atomically when resolving assets across a trust boundary.
-   * Keep this resolver semantically stable for a given `sourceKey`; function
-   * identity is intentionally excluded from serializable query keys.
-   */
-  resolveFileAsset?: WorkspaceFileAssetResolver;
-  /** Maximum size for the built-in buffered-byte fallback. Defaults to 32 MiB. */
-  maxInlineAssetBytes?: number;
-}
-interface WorkspaceState {
-  root: string;
-  /** Loaded directory listings, keyed by directory path. */
-  entriesByDirectory: Readonly<Record<string, readonly FileInfo[]>>;
-  /** Every loaded entry, keyed by its path. */
-  entryByPath: ReadonlyMap<string, FileInfo>;
-  expandedPaths: ReadonlySet<string>;
-  /** Update expansion; newly expanded directories load lazily. */
-  setExpandedPaths: (next: Set<string>) => void;
-  selectedPath: string | null;
-  /** Ask the route owner to select a file. */
-  selectFile: (path: string | null) => void;
-  /** The selected file once its read settles; null while loading. */
-  selectedFile: WorkspaceFileState | null;
-  /** Initial root/info load or explicit refresh in flight. */
-  isLoading: boolean;
-  /** Directory and file paths with a query in flight. */
-  loadingPaths: ReadonlySet<string>;
-  /** Root/directory listing failure. Per-file read errors live on the file state. */
-  error: string | null;
-  /** Workspace summary, when the source provides `getWorkspaceInfo`. */
-  info: WorkspaceInfo | null;
-  /** Reload the root, every expanded directory, and the selected file. */
-  refresh: () => void;
-}
-interface WorkspaceFileReadTarget {
-  requestedPath: string;
-  readPath: string;
-  info: FileInfo;
-  media: WorkspaceMediaInfo | null;
-}
-interface WorkspaceResolvedAsset {
-  asset: WorkspaceFileAsset;
-  media: WorkspaceMediaInfo;
-}
-type WorkspaceQueryOptions<TData, TQueryKey extends QueryKey> = UnusedSkipTokenOptions<TData, Error, TData, TQueryKey> & {
-  queryKey: DataTag<TQueryKey, TData, Error>;
-};
-/**
- * Source/root prefix for cache inspection, cancellation, or removal.
- * Do not broadly invalidate this prefix: active file queries must refresh in
- * stat → resolver → content order. Use a resource option key or `refresh()`.
- */
-declare function workspaceQueryKey(sourceKey: string, root: string): readonly ["workspace", string, string];
-type WorkspaceQueryKey = ReturnType<typeof workspaceQueryKey>;
-/** Directory-listing prefix for targeted cache invalidation. */
-declare function workspaceDirectoryQueryPrefix(sourceKey: string, root: string): readonly ["workspace", string, string, "directory"];
-/** Exact directory-listing key shared by query options and live hosts. */
-declare function workspaceDirectoryQueryKey(sourceKey: string, root: string, path: string): readonly ["workspace", string, string, "directory", string];
-type WorkspaceDirectoryQueryKey = ReturnType<typeof workspaceDirectoryQueryKey>;
-declare function workspaceFileQueryKey(sourceKey: string, root: string, requestedPath: string): readonly ["workspace", string, string, "file", string];
-type WorkspaceFileQueryKey = ReturnType<typeof workspaceFileQueryKey>;
-declare function workspaceFileVersion(target: WorkspaceFileReadTarget): {
-  readonly path: string;
-  readonly name: string;
-  readonly type: import("@cloudflare/shell").EntryType;
-  readonly mimeType: string;
-  readonly size: number;
-  readonly createdAt: number;
-  readonly updatedAt: number;
-  readonly target: string | null;
-};
-type WorkspaceFileVersion = ReturnType<typeof workspaceFileVersion>;
-type WorkspaceDirectoryQueryOptions = WorkspaceQueryOptions<readonly FileInfo[], WorkspaceDirectoryQueryKey>;
-type WorkspaceInfoQueryKey = readonly [...WorkspaceQueryKey, "info"];
-type WorkspaceInfoQueryOptions = WorkspaceQueryOptions<WorkspaceInfo | null, WorkspaceInfoQueryKey>;
-type WorkspaceFileStatQueryKey = readonly [...WorkspaceFileQueryKey, "stat"];
-type WorkspaceFileStatQueryOptions = WorkspaceQueryOptions<WorkspaceFileReadTarget, WorkspaceFileStatQueryKey>;
-type WorkspaceFileAssetQueryKey = readonly [...WorkspaceFileQueryKey, "asset", WorkspaceFileVersion];
-type WorkspaceFileAssetQueryOptions = WorkspaceQueryOptions<WorkspaceResolvedAsset | null, WorkspaceFileAssetQueryKey>;
-type WorkspaceTextFileQueryKey = readonly [...WorkspaceFileQueryKey, "text", WorkspaceFileVersion];
-type WorkspaceTextFileQueryOptions = WorkspaceQueryOptions<string | null, WorkspaceTextFileQueryKey>;
-type WorkspaceBinaryFileQueryKey = readonly [...WorkspaceFileQueryKey, "bytes", WorkspaceFileVersion, {
-  readonly maxInlineAssetBytes: number;
-}];
-type WorkspaceBinaryFileQueryOptions = WorkspaceQueryOptions<WorkspaceResolvedAsset | null, WorkspaceBinaryFileQueryKey>;
-/** Shared directory options for workspace components and route loaders. */
-declare function workspaceDirectoryQueryOptions(source: WorkspaceSource, sourceKey: string, root: string, path: string): WorkspaceDirectoryQueryOptions;
-/** Shared workspace-summary options for workspace components and route loaders. */
-declare function workspaceInfoQueryOptions(source: WorkspaceSource, sourceKey: string, root: string): WorkspaceInfoQueryOptions;
-/** Re-stat and validate a requested path before any resolver or file read. */
-declare function workspaceFileStatQueryOptions(source: WorkspaceSource, sourceKey: string, root: string, requestedPath: string): WorkspaceFileStatQueryOptions;
-/** Optional host asset resolution, scoped to the current stat result. */
-declare function workspaceFileAssetQueryOptions(sourceKey: string, root: string, target: WorkspaceFileReadTarget, resolveFileAsset: WorkspaceFileAssetResolver): WorkspaceFileAssetQueryOptions;
-/** Cached text read options, scoped to the validated stat result. */
-declare function workspaceTextFileQueryOptions(source: WorkspaceSource, sourceKey: string, root: string, target: WorkspaceFileReadTarget): WorkspaceTextFileQueryOptions;
-/** Active-file-only buffered asset options, scoped to the validated stat result. */
-declare function workspaceBinaryFileQueryOptions(source: WorkspaceSource, sourceKey: string, root: string, target: WorkspaceFileReadTarget, maxInlineAssetBytes: number): WorkspaceBinaryFileQueryOptions;
-/**
- * Headless state for browsing a Think workspace. TanStack Query owns remote
- * directory, metadata, resolver, text, and byte lifecycles; the route owns
- * selection, while this hook only keeps local tree expansion state.
- */
-declare function useWorkspace({
-  source,
-  sourceKey,
-  root,
-  selectedPath,
-  onSelectedPathChange,
-  resolveFileAsset,
-  maxInlineAssetBytes
-}: UseWorkspaceOptions): WorkspaceState;
-//#endregion
+import { A as workspaceQueryKey, C as workspaceBinaryFileQueryOptions, D as workspaceFileAssetQueryOptions, E as workspaceDirectoryQueryPrefix, O as workspaceFileStatQueryOptions, S as useWorkspace, T as workspaceDirectoryQueryOptions, _ as WorkspaceResolvedAsset, a as WorkspaceDirectoryQueryOptions, b as WorkspaceTextFileQueryKey, c as WorkspaceFileQueryKey, d as WorkspaceFileStatQueryOptions, f as WorkspaceFileVersion, g as WorkspaceQueryKey, h as WorkspaceInfoQueryOptions, i as WorkspaceDirectoryQueryKey, j as workspaceTextFileQueryOptions, k as workspaceInfoQueryOptions, l as WorkspaceFileReadTarget, m as WorkspaceInfoQueryKey, n as WorkspaceBinaryFileQueryKey, o as WorkspaceFileAssetQueryKey, p as WorkspaceInfo, r as WorkspaceBinaryFileQueryOptions, s as WorkspaceFileAssetQueryOptions, t as UseWorkspaceOptions, u as WorkspaceFileStatQueryKey, v as WorkspaceSource, w as workspaceDirectoryQueryKey, x as WorkspaceTextFileQueryOptions, y as WorkspaceState } from "../../Workspace-F3raHdYV.js";
 export { UseWorkspaceOptions, WorkspaceBinaryFileQueryKey, WorkspaceBinaryFileQueryOptions, WorkspaceDirectoryQueryKey, WorkspaceDirectoryQueryOptions, WorkspaceFileAssetQueryKey, WorkspaceFileAssetQueryOptions, WorkspaceFileQueryKey, WorkspaceFileReadTarget, WorkspaceFileStatQueryKey, WorkspaceFileStatQueryOptions, WorkspaceFileVersion, WorkspaceInfo, WorkspaceInfoQueryKey, WorkspaceInfoQueryOptions, WorkspaceQueryKey, WorkspaceResolvedAsset, WorkspaceSource, WorkspaceState, WorkspaceTextFileQueryKey, WorkspaceTextFileQueryOptions, useWorkspace, workspaceBinaryFileQueryOptions, workspaceDirectoryQueryKey, workspaceDirectoryQueryOptions, workspaceDirectoryQueryPrefix, workspaceFileAssetQueryOptions, workspaceFileStatQueryOptions, workspaceInfoQueryOptions, workspaceQueryKey, workspaceTextFileQueryOptions };

package/dist/components/agents-sdk/WorkspaceBrowser.d.ts

@@ -1,4 +1,4 @@
-import { WorkspaceState } from "./Workspace.js";
+import { y as WorkspaceState } from "../../Workspace-F3raHdYV.js";
 import * as React from "react";
 
 //#region src/components/agents-sdk/WorkspaceBrowser.d.ts

package/dist/components/agents-sdk/WorkspaceExplorer.d.ts

@@ -1,5 +1,5 @@
 import { l as WorkspaceNavigationAdapter } from "../../WorkspaceLink-Bh9-Jo1r.js";
-import { WorkspaceState } from "./Workspace.js";
+import { y as WorkspaceState } from "../../Workspace-F3raHdYV.js";
 import * as React from "react";
 
 //#region src/components/agents-sdk/WorkspaceExplorer.d.ts

package/dist/components/agents-sdk/WorkspaceExplorer.js

@@ -2,7 +2,7 @@ import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
 import { a as WorkspaceNavigationRestorationBoundary, n as WorkspaceNavigationProvider, o as useRequiredWorkspaceNavigationRestoration, r as resolveWorkspaceLink } from "../../WorkspaceLink-DtH66bAY.js";
 import { WorkspaceBrowser } from "./WorkspaceBrowser.js";
-import { t as WorkspaceFileView } from "../../WorkspaceFileView-DwdXiKku.js";
+import { t as WorkspaceFileView } from "../../WorkspaceFileView-DWMKxX_u.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/agents-sdk/WorkspaceExplorer.tsx
@@ -70,12 +70,12 @@ function WorkspaceExplorerContent({ workspace, navigation, className, title = "W
 		const surface = explorerRef.current;
 		const target = [...surface?.querySelectorAll(".file-tree__node") ?? []].find((candidate) => candidate.dataset.workspacePath === pending.path);
 		if (target) {
-			target.focus();
+			target.focus({ preventScroll: true });
 			pendingTreeFocusRef.current = null;
 			return;
 		}
 		if (isLoading || ancestors.some((path) => loadingPaths.has(path))) return;
-		(surface?.querySelector(".file-tree__node") ?? surface?.querySelector("[data-workspace-browser-focus-target]"))?.focus();
+		(surface?.querySelector(".file-tree__node") ?? surface?.querySelector("[data-workspace-browser-focus-target]"))?.focus({ preventScroll: true });
 		pendingTreeFocusRef.current = null;
 	}, [
 		entriesByDirectory,

package/dist/components/agents-sdk/WorkspaceFileView.js

@@ -1,2 +1,2 @@
-import { t as WorkspaceFileView } from "../../WorkspaceFileView-DwdXiKku.js";
+import { t as WorkspaceFileView } from "../../WorkspaceFileView-DWMKxX_u.js";
 export { WorkspaceFileView };

package/dist/components/ai-sdk/AgentChatStartScreen.d.ts

@@ -1,2 +1,2 @@
-import { a as AgentChatStarterList, i as AgentChatStarterItem, n as AgentChatStartScreenProps, o as AgentChatStarterListProps, r as AgentChatStarter, s as AgentChatStarterProps, t as AgentChatStartScreen } from "../../AgentChatStartScreen-CO49yepa.js";
+import { a as AgentChatStarterList, i as AgentChatStarterItem, n as AgentChatStartScreenProps, o as AgentChatStarterListProps, r as AgentChatStarter, s as AgentChatStarterProps, t as AgentChatStartScreen } from "../../AgentChatStartScreen-Bkv7Avni.js";
 export { AgentChatStartScreen, AgentChatStartScreenProps, AgentChatStarter, AgentChatStarterItem, AgentChatStarterList, AgentChatStarterListProps, AgentChatStarterProps };

package/dist/components/ai-sdk/AgentChatStartScreen.js

@@ -13,7 +13,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * the same live composer moves from the center of the empty view to the pinned
 * transcript position after the first message.
 */
-function AgentChatStartScreen({ heading = "What should we work on?", composer, composerTray, starters, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
+function AgentChatStartScreen({ heading = "What should we work on?", composer, composerTray, lead, starters, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
 	const headingId = React.useId();
 	return /* @__PURE__ */ jsx("section", {
 		"data-slot": "agent-chat-start-screen",
@@ -37,7 +37,10 @@ function AgentChatStartScreen({ heading = "What should we work on?", composer, c
 						children: composerTray
 					}) : null]
 				})]
-			}), starters?.items.length ? /* @__PURE__ */ jsx("div", {
+			}), lead ? /* @__PURE__ */ jsx("div", {
+				className: "agent-chat-start-screen__lead",
+				children: lead
+			}) : starters?.items.length ? /* @__PURE__ */ jsx("div", {
 				className: "agent-chat-start-screen__starters",
 				children: /* @__PURE__ */ jsx(AgentChatStarterList, { ...starters })
 			}) : null]

package/dist/components/foundations/ToggleGroup.d.ts

@@ -1,7 +1,7 @@
 import { r as ToggleVariantsOptions } from "../../Toggle-DLrIf5YH.js";
 import * as React from "react";
-import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
+import { Toggle } from "@base-ui/react/toggle";
 
 //#region src/components/foundations/ToggleGroup.d.ts
 type ToggleGroupSize = ToggleVariantsOptions["size"];

package/dist/components/foundations/ToggleGroup.js

@@ -3,8 +3,8 @@ import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
 import { toggleVariants } from "./Toggle.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
+import { Toggle } from "@base-ui/react/toggle";
 //#region src/components/foundations/ToggleGroup.tsx
 /**
 * Tracks the pressed item's box so the segmented thumb can slide to it instead

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/PricingUsageCalculator.js

@@ -1,8 +1,8 @@
 import { t as cx } from "../../class-names-BiMDVpUo.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 { Progress } from "../foundations/Progress.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.d.ts

@@ -1,105 +1,2 @@
-import * as React from "react";
-
-//#region src/components/general-purpose/ResponsiveSidebarShell.d.ts
-interface ResponsiveSidebarShellControls {
-  /** Close the sidebar and move focus to the main content. */
-  closeSidebar: () => void;
-  /** Close only when the shell is currently using its compact drawer layout. */
-  closeSidebarOnCompact: () => void;
-}
-/**
- * Bar slot content shared by every shell-owning surface's `bar` prop, so an
- * app writes one shape whether it is configuring ThinkFullApp, the routine
- * library, or the shell directly.
- */
-interface AppBarSlots {
-  /**
-   * App-owned route element rendered as a labelled back control. Back owns
-   * the leading slot the same way `leading` does: the shell's own sidebar
-   * toggle stands down and compact sidebars stay reachable through
-   * `compactTitleTrigger`.
-   */
-  back?: {
-    label: string;
-    link: React.ReactElement;
-  };
-  /** App-owned leading navigation that owns the leading slot at every width. */
-  leading?: React.ReactNode;
-  /** Compact-only navigation that replaces the drawer trigger without hiding the wide rail toggle. */
-  compactLeading?: React.ReactNode;
-  /** Bar title content. Hidden at compact widths when `compactTitleTrigger` stands in. */
-  title?: React.ReactNode;
-  /** Content placed in the bar's trailing group. */
-  actions?: React.ReactNode;
-}
-interface ResponsiveSidebarShellBar extends AppBarSlots {
-  /** Element the bar title renders into, e.g. `<h1 id={…}/>` for a labelled page. */
-  titleRender?: React.ReactElement<Record<string, unknown>>;
-  /**
-   * Label content for a compact-width drawer trigger that replaces the plain
-   * title and the icon toggle: the title itself becomes the control that opens
-   * the sidebar. The shell renders the button and the disclosure chevron.
-   */
-  compactTitleTrigger?: React.ReactNode;
-  /** Accessible name for the bar toolbar. Defaults to "Application controls". */
-  label?: string;
-  /** Class for the bar root, the owning surface's styling hook. */
-  className?: string;
-  /**
-   * No bar row at all — for content that brings its own application bar.
-   * Distinct from passing no slots: an empty shell with a sidebar still shows
-   * a bar carrying the toggle.
-   */
-  hidden?: boolean;
-}
-interface ResponsiveSidebarShellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "title"> {
-  /**
-   * Navigation or other secondary surface shown beside the selected content.
-   * Omit for a shell that is only a bar row over content — the app bar then
-   * has one mount point whether or not a sidebar exists.
-   *
-   * Open/closed is shell-internal: it is ephemeral presentation state, not a
-   * route, so no host controls it and no resize ever writes into a router.
-   */
-  sidebar?: React.ReactNode | ((controls: ResponsiveSidebarShellControls) => React.ReactNode);
-  /** Main content. */
-  children?: React.ReactNode;
-  /** Short noun used by the toggle and resize control, such as “threads” or “schedules”. */
-  sidebarLabel?: string;
-  /** Initial desktop sidebar width in CSS pixels. */
-  defaultSidebarWidth?: number;
-  /** Shell-owned application bar composed from slots. */
-  bar?: ResponsiveSidebarShellBar;
-  /**
-   * Host-owned error shown in the main column above the content, without
-   * replacing it. The shell renders the alert anatomy; pass the message.
-   */
-  error?: React.ReactNode;
-  /** Accessible name for the mobile peek target that returns to the main content. */
-  showMainLabel?: string;
-}
-/**
- * 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.
- */
-declare function ResponsiveSidebarShell({
-  sidebar,
-  sidebarLabel,
-  defaultSidebarWidth,
-  bar,
-  error,
-  showMainLabel,
-  className,
-  children,
-  ref,
-  style,
-  ...props
-}: ResponsiveSidebarShellProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
-//#endregion
+import { a as ResponsiveSidebarShellProps, i as ResponsiveSidebarShellControls, n as ResponsiveSidebarShell, r as ResponsiveSidebarShellBar, t as AppBarSlots } from "../../ResponsiveSidebarShell-DOXd5T-d.js";
 export { AppBarSlots, ResponsiveSidebarShell, ResponsiveSidebarShellBar, ResponsiveSidebarShellControls, ResponsiveSidebarShellProps };

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

@@ -84,7 +84,7 @@ function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", defaultSide
 	}) : sidebar;
 	const hasAppLeading = bar?.back != null || bar?.leading != null;
 	const hasTitleTrigger = hasSidebar && bar?.compactTitleTrigger != null && bar?.compactLeading == null;
-	const hasTopBar = !bar?.hidden && (hasSidebar || bar?.back != null || bar?.leading != null || bar?.compactLeading != null || bar?.title != null || bar?.actions != null);
+	const hasTopBar = !bar?.hidden && (hasSidebar || bar?.back != null || bar?.leading != null || bar?.compactLeading != null || bar?.title != null || bar?.actions != null || bar?.primary != null);
 	const compactLeadingMode = hasTitleTrigger ? "trigger" : !hasAppLeading && bar?.compactLeading != null ? "custom" : void 0;
 	return /* @__PURE__ */ jsx("div", {
 		ref: mergeRefs(rootRef, ref),
@@ -167,7 +167,7 @@ function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", defaultSide
 										children: [bar?.compactTitleTrigger, /* @__PURE__ */ jsx(ChevronDownIcon, { "aria-hidden": "true" })]
 									}) : null]
 								}) : null,
-								bar?.actions != null ? /* @__PURE__ */ jsx(AppTopBar.Trailing, { children: bar.actions }) : null
+								bar?.actions != null || bar?.primary != null ? /* @__PURE__ */ jsxs(AppTopBar.Trailing, { children: [bar.actions, bar.primary] }) : null
 							]
 						}) : null,
 						error != null ? /* @__PURE__ */ jsxs("div", {

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

@@ -1,77 +1,2 @@
-import { n as mergeBaseClassName } from "../../class-names-BiMDVpUo.js";
-import { $ as WarningIcon, B as PlusIcon, d as CheckIcon, f as ChevronDownIcon } from "../../icons-CVFSeTJn.js";
-import { Button } from "../foundations/Button.js";
-import { Menu } from "../foundations/Menu.js";
-import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/_internal/MenuDisclosureGroup.tsx
-/**
-* A menu-native disclosure: its trigger stays in the menu roving-focus model,
-* while its rows mount only after the user expands the section.
-*/
-function MenuDisclosureGroup({ children, className, defaultOpen = false, label, triggerClassName, ...props }) {
-	const [open, setOpen] = React.useState(defaultOpen);
-	return /* @__PURE__ */ jsxs(Menu.Group, {
-		className: mergeBaseClassName("menu-disclosure-group", className),
-		...props,
-		children: [/* @__PURE__ */ jsxs(Menu.Item, {
-			"aria-expanded": open,
-			className: mergeBaseClassName("menu-disclosure-group__trigger", triggerClassName),
-			closeOnClick: false,
-			onClick: () => setOpen((current) => !current),
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "sigvelo-truncate-grow",
-				children: label
-			}), /* @__PURE__ */ jsx(ChevronDownIcon, { "aria-hidden": "true" })]
-		}), open ? /* @__PURE__ */ jsx("div", {
-			className: "menu-disclosure-group__items",
-			children
-		}) : null]
-	});
-}
-//#endregion
-//#region src/components/general-purpose/SetupChecklist.tsx
-/** Checklist rows for any Menu surface (composer plus menu, tray menu). */
-function SetupChecklistGroup({ label, entries, defaultOpen = false, onSelect }) {
-	return /* @__PURE__ */ jsx(MenuDisclosureGroup, {
-		label,
-		defaultOpen,
-		children: entries.map((entry) => /* @__PURE__ */ jsxs(Menu.Item, {
-			"aria-label": `${entry.name}, ${entry.complete ? "complete" : "not set up"}`,
-			onClick: () => onSelect(entry.id),
-			children: [
-				entry.icon,
-				/* @__PURE__ */ jsx("span", {
-					className: "sigvelo-truncate-grow",
-					children: entry.description
-				}),
-				entry.complete ? /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(PlusIcon, { "aria-hidden": "true" })
-			]
-		}, entry.id))
-	});
-}
-/** Progress-aware tray trigger opening the checklist in its own menu. */
-function SetupChecklistAction({ actionLabel, label, entries, onSelect }) {
-	const completed = entries.filter((entry) => entry.complete).length;
-	return /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsxs(Button, {
-		type: "button",
-		variant: "ghost",
-		color: "neutral",
-		size: "md",
-		"aria-label": `${actionLabel} — ${completed} of ${entries.length} set up`,
-		render: /* @__PURE__ */ jsx(Menu.Trigger, { unstyled: true }),
-		children: [completed === entries.length ? /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(WarningIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", { children: actionLabel })]
-	}), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
-		side: "bottom",
-		align: "start",
-		sideOffset: 4,
-		children: /* @__PURE__ */ jsx(Menu.Popup, { children: /* @__PURE__ */ jsx(SetupChecklistGroup, {
-			defaultOpen: true,
-			label,
-			entries,
-			onSelect
-		}) })
-	}) })] });
-}
-//#endregion
+import { n as SetupChecklistGroup, t as SetupChecklistAction } from "../../SetupChecklist-H1JRCIIe.js";
 export { SetupChecklistAction, SetupChecklistGroup };

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

@@ -1,6 +1,6 @@
 import { N as MonitorIcon, P as MoonIcon, Y as SunIcon } from "../../icons-CVFSeTJn.js";
-import { Radio, RadioGroup } from "../foundations/RadioGroup.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/nanites/AgentToolDetail.js

@@ -2,10 +2,10 @@ import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { r as ArrowLeftIcon } from "../../icons-CVFSeTJn.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 { SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
-import { t as ThinkChat } from "../../ThinkChat-DkA4Wr71.js";
+import { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.js";
+import { NaniteMark } from "./NaniteScene.js";
+import { t as ThinkChat } from "../../ThinkChat-BES_3Mb-.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useAgentChat } from "@cloudflare/think/react";

package/dist/styles/agent-chat.css

@@ -93,6 +93,7 @@
   );
 
   display: grid;
+  align-content: start;
   grid-template-rows: var(--sigvelo-layout-track-fill) auto var(--sigvelo-layout-track-fill);
   inline-size: min(
     100%,
@@ -109,6 +110,7 @@
 .agent-chat-start-screen__primary {
   grid-row: 2;
   display: grid;
+  align-content: start;
   gap: var(--sigvelo-spacing-6);
   min-inline-size: 0;
 }
@@ -126,6 +128,7 @@
 
 .agent-chat-start-screen__composer {
   display: grid;
+  align-content: start;
   min-inline-size: 0;
 }
 
@@ -153,9 +156,15 @@
 }
 
 /* The first-turn utility tray owns its buttons' treatment so every host gets
-   the same quiet look without per-app classes. Space-between seats one action
-   per slot — left, middle, right. */
+   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. */
 .agent-chat-start-screen__composer-tray {
+  align-self: start;
+  justify-content: start;
+}
+
+.agent-chat-start-screen__composer-tray:has(> :nth-child(3):last-child) {
   justify-content: space-between;
 }
 
@@ -194,7 +203,8 @@
   white-space: nowrap;
 }
 
-.agent-chat-start-screen__starters {
+.agent-chat-start-screen__starters,
+.agent-chat-start-screen__lead {
   grid-row: 3;
   align-self: start;
   min-inline-size: 0;
@@ -332,7 +342,8 @@
  * need to.
  */
 .agent-chat-start-screen__heading,
-.agent-chat-start-screen__starters {
+.agent-chat-start-screen__starters,
+.agent-chat-start-screen__lead {
   transition:
     opacity var(--sigvelo-motion-duration-disclosure) var(--sigvelo-ease-snappy),
     translate var(--sigvelo-motion-duration-disclosure) var(--sigvelo-ease-snappy),
@@ -348,7 +359,9 @@
 /* Starters are buttons, so fading them is not enough — invisible controls that
    still take a click or a Tab stop are worse than visible ones. */
 .agent-chat-start-screen__content:has(textarea:not(:placeholder-shown))
-  .agent-chat-start-screen__starters {
+  .agent-chat-start-screen__starters,
+.agent-chat-start-screen__content:has(textarea:not(:placeholder-shown))
+  .agent-chat-start-screen__lead {
   visibility: hidden;
   opacity: 0;
 }
@@ -594,15 +607,6 @@
   }
 }
 
-/* Side-panel widths: tray labels yield to the icons; each action keeps its
-   accessible name. */
-/* Local wrap. Not --sigvelo-layout-break-compact. */
-@container agent-chat (inline-size <= 30rem) {
-  .agent-chat-start-screen__composer-tray > .button > span:not(.app-icon-stack) {
-    display: none;
-  }
-}
-
 @media (max-height: 40rem) {
   .agent-chat-start-screen__content {
     --agent-chat-start-screen-padding-block: var(--sigvelo-spacing-5);
@@ -614,7 +618,8 @@
     grid-row: 1;
   }
 
-  .agent-chat-start-screen__starters {
+  .agent-chat-start-screen__starters,
+  .agent-chat-start-screen__lead {
     grid-row: 2;
   }
 }

package/dist/styles/index.css

@@ -122,6 +122,7 @@
 @import "./think-execution-workbench.css" layer(components);
 @import "./think-full-app.css" layer(components);
 @import "./think-routine-library.css" layer(components);
+@import "./think-sidepanel.css" layer(components);
 @import "./think-thread-picker.css" layer(components);
 @import "./web-preview.css" layer(components);
 @import "./workspace-explorer.css" layer(components);