@mcp-b/react-components 0.7.0 → 0.8.0

package/dist/styles/think-full-app.css

@@ -0,0 +1,731 @@
+.think-full-app {
+  position: relative;
+  block-size: 100%;
+  min-block-size: 32rem;
+  min-inline-size: 0;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1fr) var(--think-full-app-workbench-w, 21.25rem);
+  background: var(--sigvelo-color-canvas);
+  color: var(--sigvelo-color-text);
+  font-family: var(--sigvelo-font-sans);
+  transition: grid-template-columns 160ms ease;
+}
+
+.think-full-app[data-has-workbench="false"] {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.think-full-app[data-has-workbench-topbar="true"] {
+  grid-template-rows: 2.75rem minmax(0, 1fr);
+}
+
+.think-full-app__mobile-header {
+  display: none;
+}
+
+.think-full-app__topbar {
+  grid-column: 1 / -1;
+  grid-row: 1;
+  z-index: 20;
+  min-inline-size: 0;
+  min-block-size: 2.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding-inline: 0.5rem;
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    color-mix(in srgb, var(--sigvelo-color-neutral-border-subtle) 52%, transparent);
+  background: var(--sigvelo-color-surface);
+}
+
+.think-full-app__topbar[data-mobile-only="true"] {
+  display: none;
+}
+
+.think-full-app__chat-surface {
+  grid-column: 1;
+  grid-row: 1;
+  min-inline-size: 0;
+  min-block-size: 0;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
+  overflow: hidden;
+  background: var(--sigvelo-color-surface);
+}
+
+.think-full-app__chat,
+.think-full-app__chat-inner {
+  min-inline-size: 0;
+  min-block-size: 0;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
+  overflow: hidden;
+}
+
+.think-full-app__chat-inner {
+  grid-template-rows: minmax(0, 1fr) auto;
+}
+
+.think-full-app__chat .conversation__content {
+  inline-size: min(100%, 46rem);
+  margin-inline: auto;
+  gap: 0.375rem;
+  padding-inline: clamp(0.75rem, 2vw, 1.25rem);
+}
+
+.think-full-app__chat .message__content {
+  max-inline-size: min(42rem, 94%);
+}
+
+.think-full-app__chat .message[data-from="assistant"] .message__content {
+  inline-size: min(42rem, 96%);
+}
+
+.think-full-app__chat .agent-chat__composer {
+  padding-inline: 1rem;
+}
+
+.think-full-app__chat .agent-chat__composer .prompt-input {
+  inline-size: min(100%, 46rem);
+  margin-inline: auto;
+}
+
+.think-full-app__error {
+  inline-size: min(100%, 46rem);
+  margin: 0 auto 0.375rem;
+  padding: 0.4375rem 0.625rem;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-danger-border-subtle);
+  border-radius: var(--sigvelo-radius-sm);
+  background: var(--sigvelo-color-danger-bg-subtle);
+  color: var(--sigvelo-color-danger-text);
+  font-size: 0.75rem;
+}
+
+.think-full-app__error-dismiss {
+  margin-inline-start: 0.5rem;
+  min-height: auto;
+  padding: 0;
+  color: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  text-decoration: underline;
+}
+
+.think-full-app__aside {
+  grid-column: 2;
+  grid-row: 1;
+  min-inline-size: 0;
+  min-block-size: 0;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
+  overflow: hidden;
+  border-inline-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  background: color-mix(
+    in oklab,
+    var(--sigvelo-color-canvas),
+    var(--sigvelo-color-primary-bg-subtle) 18%
+  );
+}
+
+.think-full-app[data-has-workbench-topbar="true"] .think-full-app__chat-surface,
+.think-full-app[data-has-workbench-topbar="true"] .think-full-app__aside {
+  grid-row: 2;
+}
+
+.think-full-app__resizer {
+  position: absolute;
+  z-index: 5;
+  inset-block: 0;
+  inset-inline-end: var(--think-full-app-workbench-w, 21.25rem);
+  inline-size: 0.625rem;
+  margin-inline-end: -0.3125rem;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: col-resize;
+  touch-action: pan-y;
+  appearance: none;
+}
+
+.think-full-app[data-has-workbench-topbar="true"] .think-full-app__resizer {
+  inset-block-start: 2.75rem;
+}
+
+.think-full-app__resizer::before {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 50%;
+  inline-size: 1px;
+  transform: translateX(-50%);
+  background: transparent;
+  transition: background 120ms ease;
+}
+
+.think-full-app__resizer:hover::before,
+.think-full-app__resizer:focus-visible::before,
+body.is-resizing-columns .think-full-app__resizer::before {
+  background: color-mix(in srgb, var(--sigvelo-color-primary-text) 38%, transparent);
+}
+
+.think-full-app__resizer:focus-visible {
+  outline: 2px solid var(--sigvelo-color-focus);
+  outline-offset: -2px;
+}
+
+body.is-resizing-columns {
+  cursor: col-resize;
+  user-select: none;
+}
+
+body.is-resizing-columns .think-full-app {
+  transition: none;
+}
+
+.think-full-app__workbench-slot,
+.think-full-app__workbench,
+.think-full-app__workbench-panel,
+.think-execution-workbench {
+  min-inline-size: 0;
+  min-block-size: 0;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.think-full-app__workbench,
+.think-execution-workbench {
+  background: color-mix(
+    in oklab,
+    var(--sigvelo-color-canvas),
+    var(--sigvelo-color-primary-bg-subtle) 18%
+  );
+}
+
+.think-full-app__workbench-view-switch {
+  margin-inline-start: auto;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    color-mix(in srgb, var(--sigvelo-color-neutral-border-subtle) 58%, transparent);
+  border-radius: 0.75rem;
+  background: color-mix(
+    in srgb,
+    color-mix(in oklab, var(--sigvelo-color-canvas), var(--sigvelo-color-primary-bg-subtle) 18%) 72%,
+    var(--sigvelo-color-surface)
+  );
+}
+
+.think-full-app__workbench-view-item {
+  min-block-size: 1.625rem;
+  min-inline-size: 1.75rem;
+  padding: 0.1875rem;
+  border-radius: 0.5rem;
+}
+
+.think-full-app__workbench-view-item svg {
+  display: block;
+}
+
+.think-full-app__workbench-panel {
+  padding: 0;
+}
+
+.think-full-app__workbench .workspace-explorer__header {
+  min-block-size: 2.75rem;
+  padding-block: 0.375rem;
+  padding-inline: 0.75rem 0.625rem;
+  border-block-end-color: var(--sigvelo-color-neutral-border-subtle);
+}
+
+.think-full-app__workbench .workspace-explorer__title {
+  font-size: 0.875rem;
+  font-weight: 650;
+  line-height: 1;
+}
+
+.think-full-app__workbench .workspace-explorer__count {
+  font-size: 0.8125rem;
+  line-height: 1;
+}
+
+.think-full-app__workbench .workspace-explorer__actions .button,
+.think-full-app__workbench .workspace-explorer__header > .button {
+  inline-size: 1.75rem;
+  min-block-size: 1.75rem;
+  padding: 0;
+  border-radius: 0.5rem;
+}
+
+.think-full-app__workspace-back {
+  display: none;
+}
+
+.think-execution-workbench {
+  container-type: inline-size;
+  color: var(--sigvelo-color-text);
+}
+
+.think-execution-workbench__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  flex: 0 0 auto;
+  min-block-size: 2.75rem;
+  padding-block: 0.375rem;
+  padding-inline: 0.75rem 0.625rem;
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.think-execution-workbench__heading {
+  display: inline-flex;
+  align-items: center;
+  min-inline-size: 0;
+  gap: 0.375rem;
+}
+
+.think-execution-workbench__title {
+  min-inline-size: 0;
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 650;
+  line-height: 1;
+}
+
+.think-execution-workbench__refresh {
+  flex: 0 0 auto;
+}
+
+.think-execution-workbench__error {
+  margin: 0.75rem 0.75rem 0;
+  padding: 0.4375rem 0.625rem;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-danger-border-subtle);
+  border-radius: var(--sigvelo-radius-sm);
+  background: var(--sigvelo-color-danger-bg-subtle);
+  color: var(--sigvelo-color-danger-text);
+  font-size: 0.75rem;
+}
+
+.think-execution-workbench__sections {
+  min-block-size: 0;
+  display: grid;
+  align-content: start;
+  gap: 0.75rem;
+  overflow: auto;
+  padding: 0.75rem;
+}
+
+.think-execution-workbench__lists {
+  min-inline-size: 0;
+  display: grid;
+  align-content: start;
+  gap: 0.875rem;
+}
+
+.think-execution-workbench__section + .think-execution-workbench__section {
+  margin-block-start: 0;
+}
+
+.think-execution-workbench__section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-block-end: 0.5rem;
+}
+
+.think-execution-workbench__section-header h3 {
+  margin: 0;
+  font-size: 0.8125rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-leading-tight);
+}
+
+.think-execution-workbench__empty {
+  margin: 0;
+  padding: 0.625rem 0.75rem;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-sm);
+  background: var(--sigvelo-color-surface);
+  color: var(--sigvelo-color-text-muted);
+  font-size: 0.8125rem;
+}
+
+.think-execution-workbench__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.think-execution-workbench__item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.5rem;
+  min-inline-size: 0;
+  padding: 0.5rem 0.25rem;
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.think-execution-workbench__item[data-selected="true"] {
+  margin-inline: -0.375rem;
+  padding-inline: 0.625rem;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-primary-border-muted);
+  border-radius: var(--sigvelo-radius-sm);
+  background: color-mix(
+    in oklab,
+    var(--sigvelo-color-primary-bg-subtle),
+    var(--sigvelo-color-surface) 70%
+  );
+  box-shadow: inset 3px 0 0 var(--sigvelo-color-primary-border-muted);
+}
+
+.think-execution-workbench__row-main {
+  min-inline-size: 0;
+  display: grid;
+  gap: 0.25rem;
+}
+
+.think-execution-workbench__item-topline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  min-inline-size: 0;
+}
+
+.think-execution-workbench__item-topline code,
+.think-execution-workbench__detail h3 code {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+  font-family: var(--sigvelo-font-mono);
+  font-size: 0.75rem;
+}
+
+.think-execution-workbench__row-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.125rem 0.5rem;
+  margin: 0;
+  color: var(--sigvelo-color-text-muted);
+  font-size: 0.75rem;
+  line-height: var(--sigvelo-leading-snug);
+}
+
+.think-execution-workbench__status {
+  flex: 0 0 auto;
+  gap: 0.25rem;
+}
+
+.think-execution-workbench__status svg {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+
+.think-execution-workbench__meta {
+  display: grid;
+  gap: 0.375rem;
+  margin: 0;
+  color: var(--sigvelo-color-text-muted);
+  font-size: 0.75rem;
+}
+
+.think-execution-workbench__meta div {
+  display: grid;
+  grid-template-columns: minmax(5rem, max-content) minmax(0, 1fr);
+  gap: 0.5rem;
+}
+
+.think-execution-workbench__meta dt {
+  color: var(--sigvelo-color-text-muted);
+}
+
+.think-execution-workbench__meta dd {
+  min-inline-size: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.think-execution-workbench__item-error {
+  margin: 0;
+  color: var(--sigvelo-color-danger-text);
+  font-size: 0.75rem;
+}
+
+.think-execution-workbench__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.125rem;
+  opacity: 0.72;
+}
+
+.think-execution-workbench__item:hover .think-execution-workbench__actions,
+.think-execution-workbench__item:focus-within .think-execution-workbench__actions,
+.think-execution-workbench__item[data-selected="true"] .think-execution-workbench__actions {
+  opacity: 1;
+}
+
+.think-execution-workbench__detail {
+  min-inline-size: 0;
+  display: grid;
+  align-content: start;
+  gap: 0.625rem;
+  padding: 0.75rem;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-sm);
+  background: var(--sigvelo-color-surface);
+}
+
+.think-execution-workbench__detail-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+  min-inline-size: 0;
+}
+
+.think-execution-workbench__detail-header > div {
+  min-inline-size: 0;
+}
+
+.think-execution-workbench__detail h3 {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  line-height: var(--sigvelo-leading-tight);
+}
+
+.think-execution-workbench__eyebrow {
+  margin: 0 0 0.1875rem;
+  color: var(--sigvelo-color-text-muted);
+  font-size: 0.6875rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.think-execution-workbench__meta--detail {
+  padding-block-start: 0.25rem;
+}
+
+.think-execution-workbench__empty--detail {
+  border-style: dashed;
+  background: color-mix(in oklab, var(--sigvelo-color-canvas), transparent 30%);
+}
+
+.think-execution-workbench__inspection {
+  display: grid;
+  gap: 0.375rem;
+  padding: 0.625rem;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-sm);
+  background: color-mix(
+    in oklab,
+    var(--sigvelo-color-canvas),
+    var(--sigvelo-color-primary-bg-subtle) 10%
+  );
+}
+
+.think-execution-workbench__inspection h4 {
+  margin: 0;
+  font-size: 0.75rem;
+  font-weight: var(--sigvelo-font-weight-semibold);
+}
+
+.think-execution-workbench__inspection pre {
+  max-block-size: 14rem;
+  margin: 0;
+  overflow: auto;
+  font-family: var(--sigvelo-font-mono);
+  font-size: 0.75rem;
+  white-space: pre-wrap;
+}
+
+@container (width >= 44rem) {
+  .think-execution-workbench__sections {
+    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.9fr);
+    align-items: start;
+  }
+}
+
+@media (width <= 56rem) {
+  .think-full-app {
+    min-block-size: 0;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr);
+  }
+
+  .think-full-app[data-has-workbench="false"] {
+    grid-template-rows: minmax(0, 1fr);
+  }
+
+  .think-full-app[data-mobile-view="workbench"] {
+    grid-template-rows: calc(2.75rem + env(safe-area-inset-top, 0px)) minmax(0, 1fr);
+  }
+
+  .think-full-app__topbar,
+  .think-full-app__topbar[data-mobile-only="true"] {
+    display: none;
+  }
+
+  .think-full-app[data-mobile-view="workbench"] .think-full-app__topbar,
+  .think-full-app[data-mobile-view="workbench"] .think-full-app__topbar[data-mobile-only="true"] {
+    grid-column: 1;
+    grid-row: 1;
+    min-block-size: calc(2.75rem + env(safe-area-inset-top, 0px));
+    display: flex;
+    padding-block: calc(0.25rem + env(safe-area-inset-top, 0px)) 0.25rem;
+    padding-inline: calc(0.625rem + env(safe-area-inset-left, 0px))
+      calc(0.625rem + env(safe-area-inset-right, 0px));
+  }
+
+  .think-full-app[data-has-thread-sidebar="true"][data-mobile-view="workbench"]
+    .think-full-app__topbar {
+    padding-inline-start: calc(3.5rem + env(safe-area-inset-left, 0px));
+  }
+
+  .think-full-app__mobile-header {
+    position: absolute;
+    z-index: 30;
+    inset-block-start: 0;
+    inset-inline: 0;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    min-block-size: calc(2.5rem + env(safe-area-inset-top, 0px));
+    padding-block: calc(0.25rem + env(safe-area-inset-top, 0px)) 0.25rem;
+    padding-inline: calc(0.625rem + env(safe-area-inset-left, 0px))
+      calc(0.625rem + env(safe-area-inset-right, 0px));
+    pointer-events: none;
+  }
+
+  .think-full-app__mobile-action {
+    pointer-events: auto;
+    border-radius: 999rem;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+      color-mix(in oklab, var(--sigvelo-color-neutral-border-subtle), transparent 36%);
+    background: color-mix(in oklab, var(--sigvelo-color-surface), transparent 26%);
+    color: var(--sigvelo-color-text);
+    box-shadow: var(--sigvelo-shadow-xs);
+    backdrop-filter: blur(14px) saturate(1.18);
+    -webkit-backdrop-filter: blur(14px) saturate(1.18);
+  }
+
+  .think-full-app__mobile-action:hover:not([data-disabled]),
+  .think-full-app__mobile-action:focus-visible {
+    background: color-mix(in oklab, var(--sigvelo-color-surface), transparent 12%);
+    color: var(--sigvelo-color-primary-text);
+  }
+
+  .think-full-app[data-mobile-view="workbench"] .think-full-app__workspace-back {
+    display: inline-flex;
+    flex: 0 0 auto;
+    border-radius: 999rem;
+    background: transparent;
+    color: var(--sigvelo-color-text);
+  }
+
+  .think-full-app[data-mobile-view="workbench"]
+    .think-full-app__workspace-back:hover:not([data-disabled]),
+  .think-full-app[data-mobile-view="workbench"] .think-full-app__workspace-back:focus-visible {
+    background: color-mix(in srgb, var(--sigvelo-color-surface) 76%, transparent);
+    color: var(--sigvelo-color-primary-text);
+  }
+
+  .think-full-app__chat-surface,
+  .think-full-app__workbench-slot,
+  .think-full-app__workbench {
+    grid-column: 1;
+    grid-row: 1;
+    min-block-size: 0;
+    display: none;
+  }
+
+  .think-full-app[data-mobile-view="workbench"] .think-full-app__workbench-slot,
+  .think-full-app[data-mobile-view="workbench"] .think-full-app__workbench {
+    grid-row: 2;
+  }
+
+  .think-full-app__aside {
+    display: contents;
+    border-inline-start: 0;
+  }
+
+  .think-full-app__resizer {
+    display: none;
+  }
+
+  .think-full-app[data-mobile-view="chat"] .think-full-app__chat-surface {
+    display: grid;
+  }
+
+  .think-full-app[data-has-workbench="false"] .think-full-app__chat-surface {
+    grid-row: 1;
+  }
+
+  .think-full-app[data-mobile-view="workbench"] .think-full-app__workbench-slot,
+  .think-full-app[data-mobile-view="workbench"] .think-full-app__workbench {
+    display: flex;
+  }
+
+  .think-full-app__chat .conversation__content {
+    inline-size: min(100%, 34rem);
+    padding-inline: 1.5rem;
+  }
+
+  .think-full-app[data-has-workbench="true"] .think-full-app__chat .message-scroller__viewport {
+    --message-scroller-fade-t-size: 3rem;
+    --message-scroller-fade-b-size: 3rem;
+  }
+
+  .think-full-app[data-has-workbench="true"]
+    .think-full-app__chat
+    .message-scroller__viewport[data-scrollable~="start"] {
+    --message-scroller-fade-t: var(--message-scroller-fade-t-size);
+  }
+
+  .think-full-app[data-has-workbench="true"] .think-full-app__chat .agent-chat__transcript-content {
+    padding-block-start: calc(2.5rem + env(safe-area-inset-top, 0px));
+  }
+
+  .think-full-app__chat .message__content,
+  .think-full-app__chat .message[data-from="assistant"] .message__content {
+    max-inline-size: 100%;
+    inline-size: min(100%, 34rem);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .think-full-app,
+  .think-full-app__resizer::before {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .think-full-app__chat-surface,
+  .think-full-app__aside,
+  .think-full-app__workbench,
+  .think-full-app__topbar,
+  .think-full-app__workbench-view-switch,
+  .think-execution-workbench {
+    border: 1px solid canvastext;
+    background: canvas;
+    color: canvastext;
+    box-shadow: none;
+  }
+}