@mcp-b/react-components 0.16.1 → 0.18.0

package/dist/styles/toolbar.css

@@ -1,9 +1,13 @@
 .toolbar {
+  --sigvelo-toolbar-control-height: var(--sigvelo-control-height-sm);
+  --sigvelo-toolbar-control-padding-inline: var(--sigvelo-control-padding-inline-sm);
+  --sigvelo-toolbar-control-font-size: var(--sigvelo-control-text-sm);
+
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 0.25rem;
-  padding: 0.25rem;
-  container-type: inline-size;
+  gap: var(--sigvelo-spacing-1);
+  padding: var(--sigvelo-spacing-1);
   background-color: var(--sigvelo-color-canvas);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-muted);
@@ -23,9 +27,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0.5rem;
+  min-block-size: var(--sigvelo-toolbar-control-height);
+  padding-block: 0;
+  padding-inline: var(--sigvelo-toolbar-control-padding-inline);
   font-family: inherit;
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-toolbar-control-font-size);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text);
   background-color: transparent;
@@ -33,8 +39,8 @@
   border-radius: var(--sigvelo-radius-sm);
   cursor: pointer;
   transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .toolbar__button:hover {
@@ -61,16 +67,18 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0.5rem;
+  min-block-size: var(--sigvelo-toolbar-control-height);
+  padding-block: 0;
+  padding-inline: var(--sigvelo-toolbar-control-padding-inline);
   font-family: inherit;
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-toolbar-control-font-size);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text);
   text-decoration: none;
   border-radius: var(--sigvelo-radius-sm);
   transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .toolbar__link:hover {
@@ -94,16 +102,16 @@
 }
 
 .toolbar__separator {
-  width: 1px;
-  height: 1.5rem;
-  margin-inline: 0.25rem;
+  inline-size: var(--sigvelo-border-width);
+  block-size: var(--sigvelo-spacing-6);
+  margin-inline: var(--sigvelo-spacing-1);
   background-color: var(--sigvelo-color-neutral-border-muted);
 }
 
 .toolbar[data-orientation="vertical"] .toolbar__separator {
-  width: 100%;
-  height: 1px;
-  margin-block: 0.25rem;
+  inline-size: 100%;
+  block-size: var(--sigvelo-border-width);
+  margin-block: var(--sigvelo-spacing-1);
 }
 
 .toolbar__input {
@@ -117,13 +125,3 @@
   border-color: var(--sigvelo-color-focus);
   box-shadow: var(--sigvelo-recipe-focus-shadow-subtle);
 }
-
-@container (max-width: 20rem) {
-  .toolbar {
-    flex-wrap: wrap;
-  }
-
-  .toolbar__separator {
-    display: none;
-  }
-}

package/dist/styles/tooltip.css

@@ -1,41 +1,11 @@
 .tooltip__popup {
+  --sigvelo-recipe-popup-arrow-size: var(--sigvelo-spacing-2);
   --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-1) var(--sigvelo-spacing-2);
   --sigvelo-recipe-surface-shadow: var(--sigvelo-shadow-sm);
 
   z-index: 50;
   max-inline-size: min(20rem, var(--available-width));
-  overflow-y: auto;
+  overflow-block: auto;
   font-size: var(--sigvelo-text-xs);
   line-height: 1.25;
 }
-
-.tooltip__arrow {
-  width: 0.5rem;
-  height: 0.5rem;
-  background-color: var(--sigvelo-color-surface);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
-  border-right: none;
-  border-bottom: none;
-  transform: rotate(45deg);
-}
-
-[data-side="top"] .tooltip__arrow {
-  bottom: -0.25rem;
-  transform: rotate(-135deg);
-}
-
-[data-side="bottom"] .tooltip__arrow {
-  top: -0.25rem;
-  transform: rotate(45deg);
-}
-
-[data-side="left"] .tooltip__arrow {
-  right: -0.25rem;
-  transform: rotate(135deg);
-}
-
-[data-side="right"] .tooltip__arrow {
-  left: -0.25rem;
-  transform: rotate(-45deg);
-}

package/dist/styles/transition-surface.css

@@ -0,0 +1,55 @@
+.transition-surface {
+  --transition-surface-inline: 0;
+  --transition-surface-block: 0;
+  --transition-surface-scale: 1;
+
+  opacity: 1;
+  translate: 0;
+  scale: 1;
+  transition:
+    display var(--sigvelo-motion-duration-presence),
+    opacity var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-enter),
+    translate var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-enter),
+    scale var(--sigvelo-motion-duration-presence) var(--sigvelo-motion-ease-enter);
+  transition-behavior: allow-discrete;
+}
+
+.transition-surface[data-variant="scale"] {
+  --transition-surface-scale: var(--sigvelo-motion-presence-scale);
+}
+
+.transition-surface[data-variant="slide-block"] {
+  --transition-surface-block: var(--sigvelo-motion-distance-sm);
+}
+
+.transition-surface[data-variant="slide-inline"] {
+  --transition-surface-inline: var(--sigvelo-motion-distance-sm);
+}
+
+.transition-surface[hidden] {
+  display: none;
+  opacity: 0;
+  translate: var(--transition-surface-inline) var(--transition-surface-block);
+  scale: var(--transition-surface-scale);
+  transition-timing-function: var(--sigvelo-motion-ease-exit);
+}
+
+@starting-style {
+  .transition-surface {
+    opacity: 0;
+    translate: var(--transition-surface-inline) var(--transition-surface-block);
+    scale: var(--transition-surface-scale);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .transition-surface {
+    translate: none;
+    scale: 1;
+  }
+}
+
+:root[data-motion="reduce"] .transition-surface {
+  translate: none;
+  scale: 1;
+}

package/dist/styles/utilities.css

@@ -0,0 +1,31 @@
+/*
+ * Small, intentional composition helpers. Utilities describe one reusable
+ * behavior and must not carry component anatomy or product-specific visuals.
+ */
+.sigvelo-visually-hidden {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.sigvelo-stack-list {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sigvelo-truncate {
+  min-inline-size: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/styles/web-preview.css

@@ -1,16 +1,3 @@
-.web-preview {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  font-family: inherit;
-  color: var(--sigvelo-color-text);
-  background-color: var(--sigvelo-color-surface);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-md);
-  overflow: hidden;
-}
-
 .web-preview__nav {
   display: flex;
   align-items: center;
@@ -107,14 +94,6 @@
   overflow: auto;
 }
 
-.web-preview__console-list {
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
 .web-preview__console-empty {
   padding-block: var(--sigvelo-spacing-3);
   padding-inline: var(--sigvelo-spacing-3);

package/dist/styles/workspace-explorer.css

@@ -5,8 +5,8 @@
   display: flex;
   flex-direction: column;
   inline-size: 100%;
-  min-height: 0;
-  height: 100%;
+  min-block-size: 0;
+  block-size: 100%;
   overflow: hidden;
   font-family: inherit;
   color: var(--sigvelo-color-text);
@@ -18,9 +18,70 @@
   container-type: inline-size;
 }
 
+.workspace-explorer:has(> .workspace-explorer__file[data-appearance="canvas"]) {
+  block-size: auto;
+  overflow: visible;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.workspace-explorer__file[data-appearance="canvas"] {
+  overflow: visible;
+}
+
+.workspace-explorer__file[data-appearance="canvas"] > .workspace-explorer__header {
+  padding-inline: 0;
+  background: transparent;
+  border-block-end: 0;
+}
+
+.workspace-explorer__file[data-appearance="canvas"] .workspace-explorer__markdown-scroll {
+  overflow: visible;
+  background: transparent;
+}
+
+.workspace-explorer__file[data-appearance="canvas"] .workspace-explorer__markdown {
+  inline-size: 100%;
+  margin-inline: 0;
+  padding-block: var(--sigvelo-spacing-6) var(--sigvelo-spacing-8);
+  padding-inline: 0;
+}
+
+.workspace-explorer__file[data-appearance="canvas"] .workspace-explorer__skill {
+  margin-block-end: var(--sigvelo-spacing-4);
+  padding-block-end: 0;
+  border-block-end: 0;
+}
+
+.workspace-explorer__file[data-appearance="canvas"]
+  .workspace-explorer__skill:not([data-skill-identity])
+  .workspace-explorer__skill-status {
+  margin-block-start: 0;
+}
+
+.workspace-explorer__file[data-appearance="canvas"]
+  .workspace-explorer__markdown-content
+  [data-streamdown="heading-1"] {
+  margin-block-start: var(--sigvelo-spacing-4);
+}
+
+.workspace-explorer__file[data-appearance="canvas"]
+  .workspace-explorer__markdown-content
+  [data-streamdown="heading-2"] {
+  margin-block-start: var(--sigvelo-spacing-6);
+}
+
+.workspace-explorer__file[data-appearance="canvas"]
+  .workspace-explorer__markdown-content
+  :is([data-streamdown="heading-3"], [data-streamdown="heading-4"]) {
+  margin-block-start: var(--sigvelo-spacing-4);
+}
+
 .workspace-explorer__header {
   flex: 0 0 auto;
-  min-block-size: var(--sigvelo-control-height-sm);
+  min-block-size: var(--sigvelo-density-compact-control-height);
   padding-block: var(--sigvelo-spacing-0-5);
   padding-inline: var(--sigvelo-spacing-1-5);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -28,27 +89,27 @@
 }
 
 .workspace-explorer__header .app-top-bar__button {
-  inline-size: var(--sigvelo-control-height-xs);
-  min-inline-size: var(--sigvelo-control-height-xs);
-  block-size: var(--sigvelo-control-height-xs);
-  min-block-size: var(--sigvelo-control-height-xs);
+  inline-size: var(--sigvelo-density-compact-control-height);
+  min-inline-size: var(--sigvelo-density-compact-control-height);
+  block-size: var(--sigvelo-density-compact-control-height);
+  min-block-size: var(--sigvelo-density-compact-control-height);
   padding: var(--sigvelo-spacing-1-5);
 }
 
 .workspace-explorer__header .app-top-bar__button svg {
-  inline-size: var(--sigvelo-text-sm);
-  block-size: var(--sigvelo-text-sm);
+  inline-size: var(--sigvelo-density-compact-control-icon-size);
+  block-size: var(--sigvelo-density-compact-control-icon-size);
 }
 
 .workspace-explorer__heading {
   display: flex;
   align-items: baseline;
   gap: var(--sigvelo-spacing-1);
-  font-size: var(--sigvelo-text-compact);
+  font-size: var(--sigvelo-density-compact-control-font-size);
 }
 
 .workspace-explorer__count {
-  font-size: var(--sigvelo-text-2xs);
+  font-size: var(--sigvelo-density-compact-control-font-size);
   font-weight: var(--sigvelo-font-weight-normal);
   color: var(--sigvelo-color-text-muted);
 }
@@ -57,59 +118,41 @@
   display: block;
   overflow: hidden;
   font-family: var(--sigvelo-font-mono);
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-density-compact-control-font-size);
   font-weight: var(--sigvelo-font-weight-normal);
   text-overflow: ellipsis;
 }
 
-.workspace-explorer__body {
+.workspace-explorer__body,
+.workspace-explorer__file {
   display: flex;
   flex-direction: column;
-  min-height: 0;
+  min-block-size: 0;
   flex: 1;
   overflow: auto;
 }
 
-.workspace-explorer__filter {
-  inline-size: auto;
-  gap: 0;
-  margin-block: var(--sigvelo-spacing-1);
-  margin-inline: var(--sigvelo-spacing-2);
-}
-
-.workspace-explorer__filter-label {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  border: 0;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
-.workspace-explorer__filter-control {
+.workspace-explorer__file {
   position: relative;
 }
 
-.workspace-explorer__filter-control > svg {
+.workspace-explorer__file-close {
   position: absolute;
-  inset-block-start: 50%;
-  inset-inline-start: var(--sigvelo-spacing-1-5);
-  z-index: 1;
-  inline-size: var(--sigvelo-text-sm);
-  block-size: var(--sigvelo-text-sm);
-  translate: 0 -50%;
-  color: var(--sigvelo-color-text-muted);
-  pointer-events: none;
+  z-index: 2;
+  inset-block-start: calc(var(--sigvelo-density-compact-control-height) + var(--sigvelo-spacing-2));
+  inset-inline-end: var(--sigvelo-spacing-2);
+  background-color: var(--sigvelo-color-surface);
+  box-shadow: var(--sigvelo-shadow-xs);
 }
 
-.workspace-explorer__filter-control > [data-slot="field-control"] {
-  block-size: var(--sigvelo-control-height-xs);
-  min-block-size: var(--sigvelo-control-height-xs);
-  padding-inline-start: calc(var(--sigvelo-spacing-1-5) + 1rem + var(--sigvelo-spacing-1));
-  font-size: var(--sigvelo-control-text-sm);
+.workspace-explorer__filter {
+  --sigvelo-recipe-control-height: var(--sigvelo-density-compact-control-height);
+  --sigvelo-recipe-control-font-size: var(--sigvelo-density-compact-control-font-size);
+
+  inline-size: auto;
+  gap: 0;
+  margin-block: var(--sigvelo-spacing-1);
+  margin-inline: var(--sigvelo-spacing-2);
 }
 
 .workspace-explorer__tree {
@@ -123,23 +166,23 @@
 }
 
 .workspace-explorer__tree .file-tree__node {
-  min-block-size: var(--sigvelo-control-height-xs);
-  gap: var(--sigvelo-spacing-1);
+  min-block-size: var(--sigvelo-density-compact-control-height);
+  gap: var(--sigvelo-density-compact-control-gap);
   padding-block: var(--sigvelo-spacing-0-5);
   padding-inline-end: var(--sigvelo-spacing-1-5);
   border-radius: var(--sigvelo-radius-sm);
   color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-compact);
+  font-size: var(--sigvelo-density-compact-control-font-size);
   line-height: var(--sigvelo-leading-snug);
 }
 
 .workspace-explorer__tree :is(.file-tree__chevron, .file-tree__icon) svg {
-  inline-size: var(--sigvelo-text-sm);
-  block-size: var(--sigvelo-text-sm);
+  inline-size: var(--sigvelo-density-compact-control-icon-size);
+  block-size: var(--sigvelo-density-compact-control-icon-size);
 }
 
 .workspace-explorer__tree .file-tree__chevron {
-  inline-size: var(--sigvelo-text-sm);
+  inline-size: var(--sigvelo-density-compact-control-icon-size);
 }
 
 .workspace-explorer__tree .file-tree__node--folder .file-tree__icon {
@@ -163,21 +206,13 @@
   flex: 1;
   align-items: center;
   justify-content: center;
-  padding: 1.5rem var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-spacing-6);
+  padding-inline: var(--sigvelo-spacing-3);
   font-size: var(--sigvelo-text-compact);
   color: var(--sigvelo-color-text-muted);
   text-align: center;
 }
 
-/* File preview fills the pane flush — no card-in-pane inset. */
-.workspace-explorer__file {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  flex: 1;
-  overflow: auto;
-}
-
 .workspace-explorer__code {
   flex: 1;
   min-block-size: 100%;
@@ -233,18 +268,6 @@
   cursor: not-allowed;
 }
 
-.workspace-link__visually-hidden {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  border: 0;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
 .workspace-explorer__markdown-content
   :is(
     [data-streamdown="code-block"],
@@ -314,7 +337,8 @@
   color: var(--sigvelo-color-text-muted);
 }
 
-.workspace-explorer__skill-metadata dd {
+.workspace-explorer__skill-metadata dd,
+.workspace-explorer__media-details dd {
   min-inline-size: 0;
   margin: 0;
   overflow-wrap: anywhere;
@@ -466,13 +490,6 @@
   color: var(--sigvelo-color-text-muted);
 }
 
-.workspace-explorer__media-details dd {
-  min-inline-size: 0;
-  margin: 0;
-  overflow-wrap: anywhere;
-  font-family: var(--sigvelo-font-mono);
-}
-
 .workspace-explorer__media-transcript,
 .workspace-explorer__media-fallback a {
   color: var(--sigvelo-color-primary-text);
@@ -498,18 +515,6 @@
   display: none;
 }
 
-.workspace-explorer__visually-hidden {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  border: 0;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
 .workspace-media-lightbox {
   --yarl__color_backdrop: var(--sigvelo-color-surface);
   --yarl__color_button: var(--sigvelo-color-text-muted);
@@ -521,13 +526,13 @@
   --yarl__button_filter: none;
   --yarl__button_margin: var(--sigvelo-spacing-1);
   --yarl__button_padding: var(--sigvelo-spacing-2);
-  --yarl__icon_size: 1.25rem;
+  --yarl__icon_size: var(--sigvelo-control-icon-size-xl);
   --yarl__toolbar_padding: var(--sigvelo-spacing-2);
 }
 
 .workspace-media-lightbox .yarl__button {
-  min-inline-size: 2.75rem;
-  min-block-size: 2.75rem;
+  min-inline-size: var(--sigvelo-control-height-xl);
+  min-block-size: var(--sigvelo-control-height-xl);
   border-radius: var(--sigvelo-radius-md);
 }
 

package/dist/summarize-tool-input-CqTcGRYy.js

@@ -0,0 +1,15 @@
+//#region src/components/_internal/summarize-tool-input.ts
+/** Explicit summary, or the first non-empty salient string input. */
+function summarizeToolInput(input) {
+	if (!input || typeof input !== "object") return null;
+	const summary = Reflect.get(input, "summary");
+	if (typeof summary === "string" && summary.trim()) return truncate(summary);
+	for (const value of Object.values(input)) if (typeof value === "string" && value.trim()) return truncate(value);
+	return null;
+}
+function truncate(value) {
+	const line = value.trim().split("\n", 1)[0] ?? "";
+	return line.length > 64 ? `${line.slice(0, 64)}…` : line;
+}
+//#endregion
+export { summarizeToolInput as t };

package/dist/think-agent-Cip5KAPj.d.ts

@@ -0,0 +1,7 @@
+import { Think } from "@cloudflare/think";
+
+//#region src/components/_internal/think-agent.d.ts
+/** Shared complete Think specialization for stateful React agent hooks. */
+type ThinkAgent<State = unknown> = Think<object, State>;
+//#endregion
+export { ThinkAgent as t };

package/dist/utils/codex-model-catalog.d.ts

@@ -78,7 +78,7 @@ declare const CHECKED_IN_CODEX_MODELS: readonly [{
   readonly upgradeInfo: null;
   readonly availabilityNux: null;
   readonly hidden: boolean;
-  readonly inputModalities: ("image" | "text")[];
+  readonly inputModalities: ("text" | "image")[];
   readonly supportsPersonality: boolean;
   readonly additionalSpeedTiers: never[];
   readonly serviceTiers: never[];
@@ -98,7 +98,7 @@ declare const CHECKED_IN_CODEX_MODELS: readonly [{
   readonly upgradeInfo: null;
   readonly availabilityNux: null;
   readonly hidden: boolean;
-  readonly inputModalities: ("image" | "text")[];
+  readonly inputModalities: ("text" | "image")[];
   readonly supportsPersonality: boolean;
   readonly additionalSpeedTiers: never[];
   readonly serviceTiers: never[];
@@ -115,7 +115,7 @@ declare const CHECKED_IN_CODEX_MODELS: readonly [{
   readonly upgradeInfo: null;
   readonly availabilityNux: null;
   readonly hidden: boolean;
-  readonly inputModalities: ("image" | "text")[];
+  readonly inputModalities: ("text" | "image")[];
   readonly supportsPersonality: boolean;
   readonly additionalSpeedTiers: never[];
   readonly serviceTiers: never[];
@@ -132,7 +132,7 @@ declare const CHECKED_IN_CODEX_MODELS: readonly [{
   readonly upgradeInfo: null;
   readonly availabilityNux: null;
   readonly hidden: boolean;
-  readonly inputModalities: ("image" | "text")[];
+  readonly inputModalities: ("text" | "image")[];
   readonly supportsPersonality: boolean;
   readonly additionalSpeedTiers: never[];
   readonly serviceTiers: never[];