@mcp-b/react-components 0.42.0 → 0.43.0

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

@@ -137,6 +137,10 @@
 /* 56rem matches --sigvelo-layout-break-compact. Container queries cannot read var(). */
 @container responsive-sidebar-shell (inline-size <= 56rem) {
   .responsive-sidebar-shell__frame {
+    --responsive-sidebar-compact-bar-size: calc(
+      var(--app-top-bar-block-size, var(--sigvelo-layout-chrome)) + env(safe-area-inset-top, 0px)
+    );
+
     grid-template-columns: var(--sigvelo-layout-track-fill);
   }
 
@@ -153,9 +157,13 @@
     inline-size: min(calc(100cqi - var(--sigvelo-layout-gutter)), 34rem);
     max-inline-size: none;
     block-size: auto;
-    max-block-size: min(32rem, calc(100% - var(--sigvelo-layout-gutter)));
+    max-block-size: min(
+      32rem,
+      calc(100% - var(--responsive-sidebar-compact-bar-size) - var(--sigvelo-layout-gutter))
+    );
     align-self: start;
-    margin-block-start: var(--sigvelo-spacing-1);
+    /* Sit under the title trigger. Covering it ate the click that closes it. */
+    margin-block-start: calc(var(--responsive-sidebar-compact-bar-size) + var(--sigvelo-spacing-1));
     overflow: hidden;
     border-radius: var(--sigvelo-radius-lg);
     background-color: var(--sigvelo-color-surface-raised);
@@ -232,17 +240,12 @@
     transition-timing-function: var(--sigvelo-motion-ease-exit);
   }
 
-  .responsive-sidebar-shell[data-sidebar-open="true"]
-    > .responsive-sidebar-shell__frame
-    > .responsive-sidebar-shell__main {
-    pointer-events: none;
-  }
-
   .responsive-sidebar-shell[data-sidebar-open="true"]
     > .responsive-sidebar-shell__frame
     > .responsive-sidebar-shell__peek {
     position: absolute;
-    inset-block: 0;
+    inset-block-start: var(--responsive-sidebar-compact-bar-size);
+    inset-block-end: 0;
     inset-inline: 0;
     z-index: calc(var(--sigvelo-z-chrome) + 2);
     display: block;

package/dist/styles/think-sidepanel.css

@@ -0,0 +1,74 @@
+.think-sidepanel {
+  block-size: 100%;
+  min-block-size: 0;
+  min-inline-size: 0;
+  display: grid;
+  grid-template-rows: var(--sigvelo-layout-track-fill);
+}
+
+.think-sidepanel > .think-full-app-shell,
+.think-sidepanel > .think-routine-library {
+  min-block-size: 0;
+}
+
+.think-sidepanel__gate {
+  box-sizing: border-box;
+  block-size: 100%;
+  display: grid;
+  align-content: center;
+  justify-items: center;
+  gap: var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-layout-gutter);
+}
+
+.think-sidepanel__live {
+  block-size: 100%;
+  min-block-size: 0;
+  display: grid;
+  grid-template-rows: auto var(--sigvelo-layout-track-fill);
+}
+
+.think-sidepanel__editor {
+  block-size: 100%;
+  min-block-size: 0;
+  min-inline-size: 0;
+}
+
+.think-sidepanel__run-title {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-2);
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  margin: 0;
+  font: inherit;
+}
+
+.think-sidepanel__run-title > svg,
+.think-sidepanel__run-title > .nanite-mark {
+  flex: none;
+}
+
+.think-sidepanel__menu-switch-item {
+  justify-content: space-between;
+  gap: var(--sigvelo-spacing-3);
+}
+
+.think-sidepanel__menu-group-label {
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-1-5);
+}
+
+.think-sidepanel__menu-hint {
+  display: inline-flex;
+  color: var(--sigvelo-color-text-muted);
+}
+
+@media (forced-colors: active) {
+  .think-sidepanel,
+  .think-sidepanel__gate {
+    background: canvas;
+    color: canvastext;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.42.0",
+  "version": "0.43.0",
   "description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
   "homepage": "https://design-system.sigvelo.com",
   "bugs": {
@@ -53,7 +53,7 @@
     "streamdown": "^2.5.0",
     "unist-util-visit": "^5.1.0",
     "yet-another-react-lightbox": "^3.32.2",
-    "@mcp-b/design-tokens": "0.42.0"
+    "@mcp-b/design-tokens": "0.43.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.249",

package/dist/{ThinkChat-DkA4Wr71.js → ThinkChat-BES_3Mb-.js}

@@ -1,6 +1,6 @@
 import { TransitionSurface } from "./components/foundations/TransitionSurface.js";
-import { AgentToolRunsProvider, useOptionalAgentToolRuns, useSourceScopedAgentToolEvents } from "./components/agents-sdk/AgentToolRunsContext.js";
 import { AgentChat, compactingNotice } from "./components/agents-sdk/AgentChat.js";
+import { AgentToolRunsProvider, useOptionalAgentToolRuns, useSourceScopedAgentToolEvents } from "./components/agents-sdk/AgentToolRunsContext.js";
 import { SubagentRunList } from "./components/agents-sdk/SubagentRunList.js";
 import { ThinkChatContext, ThinkChatLiveContext, useOptionalThinkChatContext, useThinkChatContext } from "./components/agents-sdk/ThinkChatContext.js";
 import { ThinkChatActivity, createThinkChatActivityRenderer, renderThinkChatActivityPart } from "./components/agents-sdk/ThinkChatActivity.js";