@mcp-b/react-components 0.1.1

package/dist/styles/conversation.css

@@ -0,0 +1,81 @@
+.conversation {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  font-family: var(--sigvelo-font-family);
+  color: var(--sigvelo-text-body);
+}
+
+.conversation__content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding-block: 1rem;
+  padding-inline: 1rem;
+  min-height: 100%;
+}
+
+.conversation__empty {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding-block: 3rem;
+  padding-inline: 1.5rem;
+  text-align: center;
+  color: var(--sigvelo-text-muted);
+}
+
+.conversation__empty-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+  border-radius: var(--sigvelo-border-radius-pill);
+  background-color: var(--sigvelo-neutral-fill-softer);
+  color: var(--sigvelo-text-muted);
+  margin-block-end: 0.25rem;
+}
+
+.conversation__empty-title {
+  font-size: 1rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  color: var(--sigvelo-text-body);
+}
+
+.conversation__empty-description {
+  max-width: 32ch;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--sigvelo-text-muted);
+}
+
+.conversation__scroll-button {
+  position: absolute;
+  inset-inline-end: 0.75rem;
+  inset-block-end: 0.75rem;
+  z-index: 1;
+  box-shadow: var(--sigvelo-shadow-soft);
+  background-color: var(--sigvelo-paper-color);
+}
+
+.conversation__download-button {
+  position: absolute;
+  inset-inline-end: 0.75rem;
+  inset-block-start: 0.75rem;
+  z-index: 1;
+  box-shadow: var(--sigvelo-shadow-softer);
+  background-color: var(--sigvelo-paper-color);
+}
+
+@media (forced-colors: active) {
+  .conversation__scroll-button,
+  .conversation__download-button {
+    border: 1px solid CanvasText;
+  }
+}

package/dist/styles/dialog.css

@@ -0,0 +1,98 @@
+.dialog__backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: rgb(0 0 0 / 0.5);
+  z-index: 50;
+}
+
+.dialog__backdrop[data-starting-style],
+.dialog__backdrop[data-ending-style] {
+  opacity: 0;
+}
+
+.dialog__popup {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 50;
+  width: calc(100% - 2rem);
+  max-width: 32rem;
+  max-height: calc(100vh - 4rem);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  background-color: var(--sigvelo-background-color);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
+  border-radius: var(--sigvelo-border-radius-md);
+  padding: 1.5rem;
+  box-shadow:
+    0 10px 15px -3px color-mix(in oklab, var(--sigvelo-text-body), transparent 90%),
+    0 4px 6px -4px color-mix(in oklab, var(--sigvelo-text-body), transparent 90%);
+}
+
+.dialog__popup[data-starting-style],
+.dialog__popup[data-ending-style] {
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0.95);
+}
+
+.dialog__popup--sm {
+  max-width: 24rem;
+}
+
+.dialog__popup--lg {
+  max-width: 48rem;
+}
+
+.dialog__popup--fullscreen {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: 0;
+}
+
+.dialog__title {
+  font-family: var(--sigvelo-font-family);
+  font-size: 1.125rem;
+  font-weight: var(--sigvelo-font-weight-bold);
+  line-height: 1.25;
+  color: var(--sigvelo-text-body);
+  margin-block-end: 0.5rem;
+}
+
+.dialog__description {
+  font-family: var(--sigvelo-font-family);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--sigvelo-text-muted);
+  margin-block-end: 1rem;
+}
+
+.dialog__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding-block: 0.5rem;
+  padding-inline: 1rem;
+  font-family: var(--sigvelo-font-family);
+  font-size: 0.875rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  color: var(--sigvelo-text-body);
+  background-color: var(--sigvelo-neutral-fill-softer);
+  border: none;
+  border-radius: var(--sigvelo-border-radius-md);
+  cursor: pointer;
+  transition: background-color 150ms ease;
+}
+
+.dialog__close:hover {
+  background-color: color-mix(in oklab, var(--sigvelo-neutral-fill-softer), transparent 20%);
+}
+
+.dialog__close:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--sigvelo-background-color),
+    0 0 0 4px var(--sigvelo-focus-color);
+}

package/dist/styles/environment-variables.css

@@ -0,0 +1,122 @@
+.environment-variables {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  font-family: var(--sigvelo-font-family);
+  color: var(--sigvelo-text-body);
+  background-color: var(--sigvelo-paper-color);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-neutral-stroke-softer);
+  border-radius: var(--sigvelo-border-radius-md);
+  overflow: hidden;
+}
+
+.environment-variables__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding-block: 0.625rem;
+  padding-inline: 0.875rem;
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-neutral-stroke-softer);
+}
+
+.environment-variables__title {
+  margin: 0;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: var(--sigvelo-font-weight-bold);
+  color: var(--sigvelo-text-body);
+}
+
+.environment-variables__toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  font-size: 0.75rem;
+  color: var(--sigvelo-text-muted);
+}
+
+.environment-variables__toggle-icon {
+  display: inline-flex;
+}
+
+.environment-variables__content {
+  display: flex;
+  flex-direction: column;
+}
+
+.environment-variables__group {
+  display: flex;
+  flex-direction: column;
+}
+
+.environment-variables__group-label {
+  padding-block: 0.375rem;
+  padding-inline: 0.875rem;
+  font-size: 0.6875rem;
+  font-weight: var(--sigvelo-font-weight-bold);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--sigvelo-text-muted);
+  background-color: var(--sigvelo-neutral-fill-softer);
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-neutral-stroke-softer);
+}
+
+.environment-variables__row {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding-block: 0.5rem;
+  padding-inline: 0.875rem;
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-neutral-stroke-softer);
+}
+
+.environment-variables__row:last-child {
+  border-block-end: none;
+}
+
+.environment-variables__name {
+  font-family: var(--sigvelo-font-family-code);
+  font-size: 0.75rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  color: var(--sigvelo-text-body);
+  flex-shrink: 0;
+  min-width: 10rem;
+}
+
+.environment-variables__value {
+  flex: 1;
+  min-width: 0;
+  padding-block: 0.3125rem;
+  padding-inline: 0.5rem;
+  font-family: var(--sigvelo-font-family-code);
+  font-size: 0.75rem;
+  color: var(--sigvelo-text-muted);
+  background-color: var(--sigvelo-neutral-fill-softer);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-neutral-stroke-softer);
+  border-radius: var(--sigvelo-border-radius-sm);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.environment-variables__required {
+  flex-shrink: 0;
+}
+
+.environment-variables__copy {
+  flex-shrink: 0;
+}
+
+@media (forced-colors: active) {
+  .environment-variables,
+  .environment-variables__row {
+    border: 1px solid CanvasText;
+  }
+}

package/dist/styles/field.css

@@ -0,0 +1,80 @@
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.field__label {
+  font-family: var(--sigvelo-font-family);
+  font-size: 0.875rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: 1;
+  color: var(--sigvelo-text-body);
+}
+
+.field__label[data-disabled] {
+  opacity: 0.5;
+  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-family);
+  font-size: 0.875rem;
+  line-height: 1.25;
+  color: var(--sigvelo-text-body);
+  background-color: var(--sigvelo-background-color);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
+  border-radius: var(--sigvelo-border-radius-md);
+  transition:
+    border-color 150ms ease,
+    box-shadow 150ms ease;
+}
+
+.field__control::placeholder {
+  color: var(--sigvelo-text-muted);
+}
+
+.field__control:focus-visible {
+  outline: none;
+  border-color: var(--sigvelo-focus-color);
+  box-shadow:
+    0 0 0 2px var(--sigvelo-background-color),
+    0 0 0 4px color-mix(in oklab, var(--sigvelo-focus-color), transparent 80%);
+}
+
+.field__control:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.field__control[data-invalid] {
+  border-color: var(--sigvelo-destructive-fill-mid);
+}
+
+.field__control[data-invalid]:focus-visible {
+  border-color: var(--sigvelo-destructive-fill-mid);
+  box-shadow:
+    0 0 0 2px var(--sigvelo-background-color),
+    0 0 0 4px color-mix(in oklab, var(--sigvelo-destructive-fill-mid), transparent 80%);
+}
+
+.field__description {
+  font-family: var(--sigvelo-font-family);
+  font-size: 0.75rem;
+  line-height: 1.4;
+  color: var(--sigvelo-text-muted);
+  margin: 0;
+}
+
+.field__error {
+  font-family: var(--sigvelo-font-family);
+  font-size: 0.75rem;
+  line-height: 1.4;
+  color: var(--sigvelo-destructive-fill-mid);
+  margin: 0;
+}

package/dist/styles/fieldset.css

@@ -0,0 +1,18 @@
+.fieldset {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.5rem;
+  margin: 0;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-neutral-stroke-soft);
+  border-radius: var(--sigvelo-border-radius-md);
+}
+
+.fieldset__legend {
+  padding: 0 0.5rem;
+  margin: 0 -0.5rem;
+  font-family: var(--sigvelo-font-family);
+  font-size: 0.875rem;
+  font-weight: var(--sigvelo-font-weight-bold);
+  color: var(--sigvelo-text-body);
+}

package/dist/styles/file-tree.css

@@ -0,0 +1,128 @@
+.file-tree {
+  width: 100%;
+  font-family: var(--sigvelo-font-family);
+  color: var(--sigvelo-text-body);
+  background-color: var(--sigvelo-paper-color);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-neutral-stroke-softer);
+  border-radius: var(--sigvelo-border-radius-md);
+  padding-block: 0.375rem;
+  overflow: auto;
+}
+
+.file-tree__list {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.file-tree__folder,
+.file-tree__file {
+  display: flex;
+  flex-direction: column;
+}
+
+.file-tree__node {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  width: 100%;
+  padding-block: 0.25rem;
+  padding-inline-end: 0.5rem;
+  background-color: transparent;
+  border: none;
+  color: var(--sigvelo-text-body);
+  font-family: inherit;
+  font-size: 0.8125rem;
+  text-align: start;
+  cursor: pointer;
+  border-radius: var(--sigvelo-border-radius-sm);
+  transition: background-color 120ms ease;
+}
+
+.file-tree__node:hover:not([data-disabled]) {
+  background-color: var(--sigvelo-neutral-fill-softer);
+}
+
+.file-tree__node[data-focused],
+.file-tree__node:focus-visible {
+  outline: none;
+  background-color: var(--sigvelo-neutral-fill-soft);
+  box-shadow:
+    0 0 0 2px var(--sigvelo-background-color),
+    0 0 0 4px var(--sigvelo-focus-color);
+}
+
+.file-tree__node[data-selected] {
+  background-color: var(--sigvelo-primary-fill-softer);
+  color: var(--sigvelo-primary-text-colorful);
+  font-weight: var(--sigvelo-font-weight-semibold);
+}
+
+.file-tree__node[data-selected]:hover {
+  background-color: var(--sigvelo-primary-fill-soft);
+}
+
+.file-tree__chevron {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--sigvelo-text-muted);
+  transition: transform 150ms ease;
+  width: 1rem;
+  justify-content: center;
+}
+
+.file-tree__chevron--expanded {
+  transform: rotate(90deg);
+}
+
+.file-tree__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--sigvelo-text-muted);
+}
+
+.file-tree__node--folder .file-tree__icon {
+  color: var(--sigvelo-primary-text-colorful);
+}
+
+.file-tree__name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-tree__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125rem;
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 150ms ease;
+}
+
+.file-tree__node:hover .file-tree__actions,
+.file-tree__actions:focus-within {
+  opacity: 1;
+}
+
+@media (forced-colors: active) {
+  .file-tree {
+    border: 1px solid CanvasText;
+  }
+
+  .file-tree__node:focus-visible,
+  .file-tree__node[data-focused] {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+
+  .file-tree__node[data-selected] {
+    background-color: Highlight;
+    color: HighlightText;
+  }
+}

package/dist/styles/form.css

@@ -0,0 +1,5 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}

package/dist/styles/github-motion-mark.css

@@ -0,0 +1,91 @@
+.github-motion-mark {
+  position: relative;
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  inline-size: 1.625em;
+  block-size: 1.625em;
+  color: currentColor;
+  line-height: 0;
+}
+
+.github-motion-mark svg {
+  grid-area: 1 / 1;
+  transform-origin: 50% 50%;
+  animation: github-motion-mark-breathe 2.6s ease-in-out infinite;
+}
+
+.github-motion-mark::before,
+.github-motion-mark::after {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+}
+
+.github-motion-mark::before {
+  inset: -0.22em;
+  border: 1px solid currentColor;
+  border-radius: 999px;
+  opacity: 0.24;
+  transform-origin: 50% 50%;
+  animation: github-motion-mark-ring 2.6s ease-out infinite;
+}
+
+.github-motion-mark::after {
+  inline-size: 0.24em;
+  block-size: 0.24em;
+  border-radius: 999px;
+  background: currentColor;
+  opacity: 0.55;
+  transform: translate(0.48em, -0.46em);
+  animation: github-motion-mark-dot 2.6s ease-in-out infinite;
+}
+
+@keyframes github-motion-mark-breathe {
+  0%,
+  100% {
+    transform: translateY(0) scale(1);
+  }
+
+  42% {
+    transform: translateY(-0.08em) scale(1.05);
+  }
+}
+
+@keyframes github-motion-mark-ring {
+  0% {
+    opacity: 0;
+    transform: scale(0.72);
+  }
+
+  26% {
+    opacity: 0.24;
+  }
+
+  72%,
+  100% {
+    opacity: 0;
+    transform: scale(1.18);
+  }
+}
+
+@keyframes github-motion-mark-dot {
+  0%,
+  100% {
+    opacity: 0.45;
+    transform: translate(0.48em, -0.46em) scale(0.85);
+  }
+
+  42% {
+    opacity: 0.85;
+    transform: translate(0.58em, -0.56em) scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .github-motion-mark svg,
+  .github-motion-mark::before,
+  .github-motion-mark::after {
+    animation: none;
+  }
+}

package/dist/styles/index.css

@@ -0,0 +1,79 @@
+@layer reset, tokens, base, components, utilities, overrides;
+
+/* Design Tokens */
+@import "./tokens.css" layer(tokens);
+
+/* Base Styles */
+@import "./base.css" layer(base);
+
+/* Components */
+@import "./accordion.css" layer(components);
+@import "./agent-connection.css" layer(components);
+@import "./alert-dialog.css" layer(components);
+@import "./autocomplete.css" layer(components);
+@import "./avatar.css" layer(components);
+@import "./badge.css" layer(components);
+@import "./button.css" layer(components);
+@import "./card.css" layer(components);
+@import "./checkbox.css" layer(components);
+@import "./checkbox-group.css" layer(components);
+@import "./collapsible.css" layer(components);
+@import "./combobox.css" layer(components);
+@import "./context-menu.css" layer(components);
+@import "./dialog.css" layer(components);
+@import "./field.css" layer(components);
+@import "./fieldset.css" layer(components);
+@import "./form.css" layer(components);
+@import "./github-motion-mark.css" layer(components);
+@import "./input.css" layer(components);
+@import "./label.css" layer(components);
+@import "./menu.css" layer(components);
+@import "./menubar.css" layer(components);
+@import "./meter.css" layer(components);
+@import "./navigation-menu.css" layer(components);
+@import "./nanite-scene.css" layer(components);
+@import "./number-field.css" layer(components);
+@import "./popover.css" layer(components);
+@import "./preview-card.css" layer(components);
+@import "./progress.css" layer(components);
+@import "./radio.css" layer(components);
+@import "./scroll-area.css" layer(components);
+@import "./scrollbars.css" layer(components);
+@import "./select.css" layer(components);
+@import "./separator.css" layer(components);
+@import "./slider.css" layer(components);
+@import "./stepper.css" layer(components);
+@import "./switch.css" layer(components);
+@import "./tabs.css" layer(components);
+@import "./toast.css" layer(components);
+@import "./toggle.css" layer(components);
+@import "./toggle-group.css" layer(components);
+@import "./toolbar.css" layer(components);
+@import "./tooltip.css" layer(components);
+
+/* AI Chat & Code Components */
+@import "./artifact.css" layer(components);
+@import "./chain-of-thought.css" layer(components);
+@import "./code-block.css" layer(components);
+@import "./commit.css" layer(components);
+@import "./context.css" layer(components);
+@import "./conversation.css" layer(components);
+@import "./environment-variables.css" layer(components);
+@import "./file-tree.css" layer(components);
+@import "./message.css" layer(components);
+@import "./model-selector.css" layer(components);
+@import "./prompt-input.css" layer(components);
+@import "./queue.css" layer(components);
+@import "./reasoning.css" layer(components);
+@import "./sources.css" layer(components);
+@import "./task.css" layer(components);
+@import "./terminal.css" layer(components);
+@import "./test-results.css" layer(components);
+@import "./tool.css" layer(components);
+@import "./web-preview.css" layer(components);
+
+/* Layout Components */
+@import "./shell.css" layer(components);
+
+/* Page Components */
+@import "./pricing-page.css" layer(components);