@mcp-b/react-components 0.11.0 → 0.13.0

package/dist/styles/dialog.css

@@ -1,8 +1,7 @@
 .dialog__backdrop {
-  position: fixed;
-  inset: 0;
-  background-color: rgb(0 0 0 / 0.5);
+  background-color: var(--sigvelo-color-backdrop);
   z-index: 50;
+  transition: opacity var(--sigvelo-duration-medium) var(--sigvelo-ease-standard);
 }
 
 .dialog__backdrop[data-starting-style],
@@ -11,24 +10,21 @@
 }
 
 .dialog__popup {
+  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-6);
+
   position: fixed;
-  top: 50%;
-  left: 50%;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
   transform: translate(-50%, -50%);
   z-index: 50;
-  width: calc(100% - 2rem);
-  max-width: 32rem;
-  max-height: calc(100vh - 4rem);
+  inline-size: calc(100% - 2rem);
+  max-inline-size: 32rem;
+  max-block-size: calc(100dvb - 4rem);
   overflow-y: auto;
   overscroll-behavior: contain;
-  background-color: var(--sigvelo-color-canvas);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
-  border-radius: var(--sigvelo-radius-md);
-  padding: 1.5rem;
-  box-shadow:
-    0 10px 15px -3px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%),
-    0 4px 6px -4px color-mix(in oklab, var(--sigvelo-color-text), transparent 90%);
+  transition:
+    opacity var(--sigvelo-duration-medium) var(--sigvelo-ease-standard),
+    transform var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized);
 }
 
 .dialog__popup[data-starting-style],
@@ -38,24 +34,30 @@
 }
 
 .dialog__popup--sm {
-  max-width: 24rem;
+  max-inline-size: 24rem;
 }
 
 .dialog__popup--lg {
-  max-width: 48rem;
+  max-inline-size: 48rem;
 }
 
 .dialog__popup--fullscreen {
-  width: 100%;
-  height: 100%;
-  max-width: 100%;
-  max-height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
+  max-inline-size: 100%;
+  max-block-size: 100%;
   border-radius: 0;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .dialog__popup[data-starting-style],
+  .dialog__popup[data-ending-style] {
+    transform: translate(-50%, -50%);
+  }
+}
+
 .dialog__title {
-  font-family: var(--sigvelo-font-sans);
-  font-size: 1.125rem;
+  font-size: var(--sigvelo-text-lg);
   font-weight: var(--sigvelo-font-weight-bold);
   line-height: 1.25;
   color: var(--sigvelo-color-text);
@@ -63,8 +65,7 @@
 }
 
 .dialog__description {
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
+  font-size: var(--sigvelo-text-sm);
   line-height: 1.5;
   color: var(--sigvelo-color-text-muted);
   margin-block-end: 1rem;
@@ -80,7 +81,7 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
-  gap: 0.75rem;
+  gap: var(--sigvelo-spacing-3);
   margin-block-start: 1.5rem;
 }
 
@@ -88,10 +89,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding-block: 0.5rem;
-  padding-inline: 1rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
+  min-block-size: var(--sigvelo-recipe-control-height);
+  padding-block: 0;
+  padding-inline: var(--sigvelo-recipe-control-padding-inline);
+  font-family: inherit;
+  font-size: var(--sigvelo-recipe-control-font-size);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
@@ -107,28 +109,5 @@
 
 .dialog__close:focus-visible {
   outline: none;
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
-}
-
-.dialog__close--icon {
-  position: absolute;
-  inset-block-start: 1rem;
-  inset-inline-end: 1rem;
-  inline-size: 2rem;
-  block-size: 2rem;
-  padding: 0;
-}
-
-.dialog__close-label {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border: 0;
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
 }

package/dist/styles/environment-variables.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  font-family: var(--sigvelo-font-sans);
+  font-family: inherit;
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-surface);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -15,8 +15,8 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.75rem;
-  padding-block: 0.625rem;
+  gap: var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-spacing-2-5);
   padding-inline: 0.875rem;
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
@@ -25,7 +25,7 @@
 .environment-variables__title {
   margin: 0;
   font-family: inherit;
-  font-size: 0.875rem;
+  font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-bold);
   color: var(--sigvelo-color-text);
 }
@@ -35,7 +35,7 @@
   align-items: center;
   gap: 0.5rem;
   cursor: pointer;
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
 }
 
@@ -54,9 +54,9 @@
 }
 
 .environment-variables__group-label {
-  padding-block: 0.375rem;
+  padding-block: var(--sigvelo-spacing-1-5);
   padding-inline: 0.875rem;
-  font-size: 0.6875rem;
+  font-size: var(--sigvelo-text-2xs);
   font-weight: var(--sigvelo-font-weight-bold);
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -69,7 +69,7 @@
 .environment-variables__row {
   display: flex;
   align-items: center;
-  gap: 0.625rem;
+  gap: var(--sigvelo-spacing-2-5);
   padding-block: 0.5rem;
   padding-inline: 0.875rem;
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -82,7 +82,7 @@
 
 .environment-variables__name {
   font-family: var(--sigvelo-font-mono);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text);
   flex-shrink: 0;
@@ -95,7 +95,7 @@
   padding-block: 0.3125rem;
   padding-inline: 0.5rem;
   font-family: var(--sigvelo-font-mono);
-  font-size: 0.75rem;
+  font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)

package/dist/styles/field.css

@@ -2,7 +2,7 @@
   display: flex;
   width: 100%;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: var(--sigvelo-spacing-3);
 }
 
 .field:is([data-invalid="true"], [data-invalid=""]) .field__label,
@@ -54,8 +54,8 @@
   display: flex;
   width: fit-content;
   gap: 0.5rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
+  font-family: inherit;
+  font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: 1;
   color: var(--sigvelo-color-text);
@@ -81,68 +81,26 @@
 .field[data-disabled] .field__label,
 .field[data-disabled] .field-title,
 .field__label[data-disabled] {
-  opacity: 0.5;
+  opacity: var(--sigvelo-recipe-disabled-opacity);
   cursor: not-allowed;
 }
 
 .field__control {
   display: flex;
   width: 100%;
-  height: 2.5rem;
-  padding-block: 0.5rem;
-  padding-inline: 0.75rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
-  line-height: 1.25;
-  color: var(--sigvelo-color-text);
-  background-color: var(--sigvelo-color-canvas);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
-  border-radius: var(--sigvelo-radius-md);
-  transition:
-    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-.field__control::placeholder {
-  color: var(--sigvelo-color-text-muted);
-}
-
-.field__control:focus-visible {
-  outline: none;
-  border-color: var(--sigvelo-color-focus);
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px color-mix(in oklab, var(--sigvelo-color-focus), transparent 80%);
-}
-
-.field__control:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.field__control:is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]) {
-  border-color: var(--sigvelo-color-danger-bg);
-}
-
-.field__control:is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]):focus-visible {
-  border-color: var(--sigvelo-color-danger-bg);
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px color-mix(in oklab, var(--sigvelo-color-danger-bg), transparent 80%);
 }
 
 .field__description {
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.75rem;
+  font-family: inherit;
+  font-size: var(--sigvelo-text-xs);
   line-height: 1.4;
   color: var(--sigvelo-color-text-muted);
   margin: 0;
 }
 
 .field__error {
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.75rem;
+  font-family: inherit;
+  font-size: var(--sigvelo-text-xs);
   line-height: 1.4;
   color: var(--sigvelo-color-danger-bg);
   margin: 0;
@@ -169,7 +127,7 @@
 }
 
 .field-set:has(> [data-slot="checkbox-group"], > [data-slot="radio-group"]) {
-  gap: 0.75rem;
+  gap: var(--sigvelo-spacing-3);
 }
 
 .field-group {
@@ -183,12 +141,12 @@
 }
 
 .field-group:is([data-slot="checkbox-group"], [data-slot="radio-group"]) {
-  gap: 0.75rem;
+  gap: var(--sigvelo-spacing-3);
 }
 
 .field-content {
   flex: 1;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
   line-height: 1.375;
 }
 
@@ -200,12 +158,12 @@
 }
 
 .field-legend {
-  margin-block-end: 0.75rem;
-  font-size: 1rem;
+  margin-block-end: var(--sigvelo-spacing-3);
+  font-size: var(--sigvelo-text-base);
 }
 
 .field-legend[data-variant="label"] {
-  font-size: 0.875rem;
+  font-size: var(--sigvelo-text-sm);
 }
 
 .field-title {
@@ -213,7 +171,7 @@
   width: fit-content;
   align-items: center;
   gap: 0.5rem;
-  font-size: 0.875rem;
+  font-size: var(--sigvelo-text-sm);
 }
 
 .field-separator {
@@ -223,7 +181,7 @@
   justify-content: center;
   min-height: 1.25rem;
   color: var(--sigvelo-color-text-muted);
-  font-size: 0.875rem;
+  font-size: var(--sigvelo-text-sm);
 }
 
 .field-separator__line {

package/dist/styles/fieldset.css

@@ -12,8 +12,8 @@
 .fieldset__legend {
   padding: 0 0.5rem;
   margin: 0 -0.5rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
+  font-family: inherit;
+  font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-bold);
   color: var(--sigvelo-color-text);
 }

package/dist/styles/file-tree.css

@@ -1,12 +1,12 @@
 .file-tree {
   width: 100%;
-  font-family: var(--sigvelo-font-sans);
+  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);
-  padding-block: 0.375rem;
+  padding-block: var(--sigvelo-spacing-1-5);
   overflow: auto;
 }
 
@@ -27,7 +27,7 @@
 .file-tree__node {
   display: flex;
   align-items: center;
-  gap: 0.375rem;
+  gap: var(--sigvelo-spacing-1-5);
   width: 100%;
   padding-block: 0.25rem;
   padding-inline-end: 0.5rem;
@@ -35,11 +35,11 @@
   border: none;
   color: var(--sigvelo-color-text);
   font-family: inherit;
-  font-size: 0.8125rem;
+  font-size: var(--sigvelo-text-compact);
   text-align: start;
   cursor: pointer;
   border-radius: var(--sigvelo-radius-sm);
-  transition: background-color 120ms ease;
+  transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
 }
 
 .file-tree__node:hover:not([data-disabled]) {
@@ -50,9 +50,7 @@
 .file-tree__node:focus-visible {
   outline: none;
   background-color: var(--sigvelo-color-neutral-bg-muted);
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
 .file-tree__node[data-selected] {
@@ -99,7 +97,7 @@
 .file-tree__actions {
   display: inline-flex;
   align-items: center;
-  gap: 0.125rem;
+  gap: var(--sigvelo-spacing-0-5);
   flex-shrink: 0;
   opacity: 0;
   transition: opacity var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);

package/dist/styles/index.css

@@ -1,10 +1,14 @@
-@layer reset, tokens, base, components, utilities, overrides;
+@layer reset, tokens, base, recipes, components, utilities, overrides;
 
 /* Design Tokens */
 @import "./tokens.css" layer(tokens);
 
 /* Base Styles */
 @import "./base.css" layer(base);
+@import "./base-ui-motion.css" layer(base);
+
+/* Shared visual contracts */
+@import "./recipes.css" layer(recipes);
 
 /* Components */
 @import "./accordion.css" layer(components);
@@ -39,7 +43,6 @@
 @import "./nanite-scene.css" layer(components);
 @import "./number-field.css" layer(components);
 @import "./popover.css" layer(components);
-@import "./mcp-server-connections.css" layer(components);
 @import "./mcp-server-picker.css" layer(components);
 @import "./preview-card.css" layer(components);
 @import "./progress.css" layer(components);
@@ -70,6 +73,7 @@
 @import "./commit.css" layer(components);
 @import "./context.css" layer(components);
 @import "./conversation.css" layer(components);
+@import "./codex-model-selector.css" layer(components);
 @import "./environment-variables.css" layer(components);
 @import "./file-tree.css" layer(components);
 @import "./message.css" layer(components);
@@ -82,8 +86,11 @@
 @import "./task.css" layer(components);
 @import "./terminal.css" layer(components);
 @import "./test-results.css" layer(components);
+@import "./think-execution-workbench.css" layer(components);
+@import "./think-resize-handle.css" layer(components);
 @import "./think-full-app.css" layer(components);
 @import "./think-thread-picker.css" layer(components);
+@import "./think-thread-shell.css" layer(components);
 @import "./web-preview.css" layer(components);
 @import "./workspace-explorer.css" layer(components);
 
@@ -92,3 +99,6 @@
 
 /* Page Components */
 @import "./pricing-page.css" layer(components);
+
+/* Accessibility system overrides */
+@import "./accessibility.css" layer(overrides);

package/dist/styles/input.css

@@ -1,27 +1,6 @@
 .input {
   display: flex;
   width: 100%;
-  min-width: 0;
-  height: var(--sigvelo-control-height-md);
-  padding-block: 0.5rem;
-  padding-inline: 0.75rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: var(--sigvelo-control-text-md);
-  line-height: 1.25;
-  color: var(--sigvelo-color-text);
-  background-color: var(--sigvelo-color-canvas);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
-  border-radius: var(--sigvelo-radius-md);
-  transition:
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    box-shadow var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
-}
-
-/* :where keeps specificity below the invalid rules so danger borders win on hover */
-.input:where(:hover:not(:disabled)) {
-  border-color: var(--sigvelo-color-focus);
 }
 
 .input::selection {
@@ -29,15 +8,11 @@
   background-color: var(--sigvelo-color-selection-bg);
 }
 
-.input::placeholder {
-  color: var(--sigvelo-color-text-muted);
-}
-
 .input::file-selector-button {
   display: inline-flex;
   align-items: center;
   height: 1.75rem;
-  margin-inline-end: 0.75rem;
+  margin-inline-end: var(--sigvelo-spacing-3);
   padding: 0;
   font: inherit;
   font-size: var(--sigvelo-text-sm);
@@ -46,28 +21,3 @@
   background-color: transparent;
   border: 0;
 }
-
-.input:focus-visible {
-  outline: none;
-  border-color: var(--sigvelo-color-focus);
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px color-mix(in oklab, var(--sigvelo-color-focus), transparent 80%);
-}
-
-.input:disabled {
-  pointer-events: none;
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.input:is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]) {
-  border-color: var(--sigvelo-color-danger-bg);
-}
-
-.input:is([aria-invalid="true"], [data-invalid="true"], [data-invalid=""]):focus-visible {
-  border-color: var(--sigvelo-color-danger-bg);
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px color-mix(in oklab, var(--sigvelo-color-danger-bg), transparent 80%);
-}

package/dist/styles/label.css

@@ -2,8 +2,8 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  font-family: var(--sigvelo-font-sans);
-  font-size: 0.875rem;
+  font-family: inherit;
+  font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: 1;
   color: var(--sigvelo-color-text);

package/dist/styles/marker.css

@@ -5,7 +5,7 @@
   gap: 0.5rem;
   width: 100%;
   min-height: 1rem;
-  font-family: var(--sigvelo-font-sans);
+  font-family: inherit;
   font-size: var(--sigvelo-text-sm);
   line-height: 1.5;
   color: var(--sigvelo-color-text-muted);
@@ -32,9 +32,7 @@
 .marker:where(a, button):focus-visible {
   outline: none;
   border-radius: var(--sigvelo-radius-sm);
-  box-shadow:
-    0 0 0 2px var(--sigvelo-color-canvas),
-    0 0 0 4px var(--sigvelo-color-focus);
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
 }
 
 .marker--separator::before,