@mcp-b/react-components 0.14.2 → 0.16.0

package/dist/styles/think-routine-library.css

@@ -0,0 +1,491 @@
+.think-routine-library {
+  position: relative;
+  min-inline-size: 0;
+  min-block-size: 38rem;
+  block-size: 100%;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  overflow: hidden;
+  color: var(--sigvelo-color-text);
+  background: var(--sigvelo-color-canvas);
+  container-type: inline-size;
+}
+
+.think-routine-detail,
+.think-routine-form {
+  container-type: inline-size;
+}
+
+.think-routine-browser {
+  block-size: 100%;
+}
+
+.think-routine-library__error {
+  position: absolute;
+  z-index: 2;
+  inset-block-start: var(--sigvelo-spacing-3);
+  inset-inline: 50% auto;
+  max-inline-size: min(32rem, calc(100% - 2rem));
+  padding: var(--sigvelo-spacing-2) var(--sigvelo-spacing-3);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-danger-border-subtle);
+  border-radius: var(--sigvelo-radius-sm);
+  translate: -50% 0;
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-2);
+  color: var(--sigvelo-color-danger-text);
+  background: var(--sigvelo-color-danger-bg-subtle);
+  font-size: var(--sigvelo-text-compact);
+}
+
+.think-routine-library__detail-header h1,
+.think-routine-library__create-header h1 {
+  margin: 0;
+  font-weight: 600;
+  letter-spacing: -0.025em;
+}
+
+.think-routine-library__eyebrow {
+  margin: 0 0 var(--sigvelo-spacing-0-5);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  font-weight: var(--sigvelo-font-weight-semibold);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.think-routine-library__status,
+.think-routine-library__title {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.think-routine-library__layout {
+  grid-row: 1 / -1;
+  min-block-size: 0;
+  block-size: 100%;
+}
+
+.think-routine-library__browser {
+  min-inline-size: 0;
+  min-block-size: 0;
+  overflow: auto;
+  padding: var(--sigvelo-spacing-4) var(--sigvelo-spacing-3);
+  border-inline-end: 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-neutral-bg-subtle) 22%
+  );
+}
+
+.think-routine-library__browser-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sigvelo-spacing-2);
+  margin-block-end: var(--sigvelo-spacing-4);
+}
+
+.think-routine-library__layout
+  .responsive-sidebar-shell__frame[data-sidebar-open="true"]
+  .think-routine-library__browser-toolbar {
+  padding-inline-start: var(--sigvelo-spacing-12);
+}
+
+.think-routine-library__layout
+  .responsive-sidebar-shell__frame[data-sidebar-open="false"]
+  .think-routine-library__detail {
+  padding-block-start: clamp(3.75rem, 6vw, 4.5rem);
+}
+
+.think-routine-library__filters {
+  inline-size: fit-content;
+}
+
+.think-routine-library__search {
+  display: grid;
+  gap: var(--sigvelo-spacing-1-5);
+  margin-block-end: var(--sigvelo-spacing-4);
+}
+
+.think-routine-library__search > div {
+  position: relative;
+}
+
+.think-routine-library__search svg {
+  position: absolute;
+  z-index: 1;
+  inset-block-start: 50%;
+  inset-inline-start: var(--sigvelo-spacing-2-5);
+  translate: 0 -50%;
+  color: var(--sigvelo-color-text-muted);
+  pointer-events: none;
+}
+
+.think-routine-browser__search-control {
+  inline-size: 100%;
+  padding-inline-start: 2.125rem;
+  border-radius: var(--sigvelo-radius-full);
+}
+
+.think-routine-library__routine-list {
+  display: grid;
+  gap: var(--sigvelo-spacing-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.think-routine-library__routine-list li {
+  border-radius: var(--sigvelo-radius-md);
+}
+
+.think-routine-library__routine-list li[data-selected="true"] {
+  background: var(--sigvelo-color-neutral-bg-subtle);
+}
+
+.think-routine-browser__routine {
+  inline-size: 100%;
+  min-block-size: 5.75rem;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: var(--sigvelo-spacing-2-5);
+  padding: var(--sigvelo-spacing-3);
+  border-radius: inherit;
+  text-align: start;
+}
+
+.think-routine-library__routine-status {
+  inline-size: 0.5rem;
+  block-size: 0.5rem;
+  border: var(--sigvelo-border-style) 1.5px var(--sigvelo-color-neutral-border);
+  border-radius: var(--sigvelo-radius-full);
+}
+
+.think-routine-library__routine-status[data-enabled="true"] {
+  border-color: var(--sigvelo-color-success-border);
+  background: var(--sigvelo-color-success-bg);
+}
+
+.think-routine-library__routine-copy {
+  min-inline-size: 0;
+  display: grid;
+  gap: var(--sigvelo-spacing-0-5);
+}
+
+.think-routine-library__routine-copy strong,
+.think-routine-library__routine-copy span,
+.think-routine-library__routine-copy small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.think-routine-library__routine-copy strong {
+  font-size: var(--sigvelo-text-compact);
+}
+
+.think-routine-library__routine-copy span,
+.think-routine-library__routine-copy small {
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+}
+
+.think-routine-library__main {
+  min-inline-size: 0;
+  min-block-size: 0;
+  overflow: auto;
+}
+
+.think-routine-library__detail {
+  inline-size: min(100%, 64rem);
+  margin-inline: auto;
+  padding: clamp(1.5rem, 4vw, 3.5rem);
+}
+
+.think-routine-library__detail-header,
+.think-routine-library__create-header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--sigvelo-spacing-4);
+}
+
+.think-routine-library__detail-header {
+  justify-content: space-between;
+  padding-block-end: clamp(2rem, 5vw, 4rem);
+}
+
+.think-routine-library__detail-heading {
+  min-inline-size: 0;
+}
+
+.think-routine-library__state {
+  margin-block-end: var(--sigvelo-spacing-2);
+}
+
+.think-routine-library__detail-header h1,
+.think-routine-library__create-header h1 {
+  font-size: clamp(1.5rem, 3vw, 2.125rem);
+  line-height: 1.12;
+}
+
+.think-routine-library__detail-heading > p:last-child,
+.think-routine-library__create-header > div > p:last-child {
+  max-inline-size: 42rem;
+  margin: var(--sigvelo-spacing-2) 0 0;
+  color: var(--sigvelo-color-text-muted);
+  line-height: var(--sigvelo-leading-relaxed);
+}
+
+.think-routine-library__detail-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.65fr);
+  gap: clamp(2rem, 6vw, 5rem);
+  padding-block-end: clamp(2.5rem, 6vw, 5rem);
+}
+
+.think-routine-library__section-heading {
+  min-block-size: 2rem;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--sigvelo-spacing-3);
+  margin-block-end: var(--sigvelo-spacing-3);
+}
+
+.think-routine-library__section-heading h2 {
+  margin: 0;
+  font-size: var(--sigvelo-text-sm);
+  font-weight: var(--sigvelo-font-weight-semibold);
+}
+
+.think-routine-library__instructions {
+  margin: 0;
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-sm);
+  line-height: 1.7;
+  white-space: pre-wrap;
+}
+
+.think-routine-library__facts {
+  margin: 0;
+}
+
+.think-routine-library__facts > div {
+  display: grid;
+  grid-template-columns: 5.5rem minmax(0, 1fr);
+  gap: var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-spacing-2-5);
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  font-size: var(--sigvelo-text-compact);
+}
+
+.think-routine-library__facts dt {
+  color: var(--sigvelo-color-text-muted);
+}
+
+.think-routine-library__facts dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+  text-align: end;
+}
+
+.think-routine-library__status-control {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sigvelo-spacing-4);
+  padding-block-start: var(--sigvelo-spacing-4);
+}
+
+.think-routine-library__status-control > div {
+  display: grid;
+  gap: var(--sigvelo-spacing-0-5);
+}
+
+.think-routine-library__status-control strong {
+  font-size: var(--sigvelo-text-compact);
+}
+
+.think-routine-library__runs {
+  padding-block-end: clamp(2.5rem, 6vw, 5rem);
+}
+
+.think-routine-library__run-list {
+  display: grid;
+  gap: var(--sigvelo-spacing-0-5);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.think-routine-library__run-list li {
+  min-inline-size: 0;
+}
+
+.think-routine-library__run {
+  inline-size: 100%;
+  justify-content: flex-start;
+  text-align: start;
+}
+
+.think-routine-library__run-marker {
+  inline-size: 1rem;
+  block-size: 1rem;
+  flex: 0 0 auto;
+}
+
+.think-routine-library__run-marker svg {
+  display: block;
+  inline-size: 1rem;
+  block-size: 1rem;
+}
+
+.think-routine-library__run > span {
+  min-inline-size: 0;
+  flex: 1;
+}
+
+.think-routine-library__run-list strong {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.think-routine-library__empty-runs {
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+}
+
+.think-routine-library__run-kind {
+  text-transform: capitalize;
+}
+
+.think-routine-library__empty-runs {
+  margin: 0;
+  padding-block: var(--sigvelo-spacing-4);
+  border-block: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+.think-routine-library__empty-list,
+.think-routine-library__empty-detail {
+  color: var(--sigvelo-color-text-muted);
+  text-align: center;
+}
+
+.think-routine-library__empty-list {
+  padding: var(--sigvelo-spacing-6) var(--sigvelo-spacing-3);
+}
+
+.think-routine-library__empty-list p,
+.think-routine-library__empty-detail p {
+  margin: var(--sigvelo-spacing-1) 0 0;
+  font-size: var(--sigvelo-text-compact);
+}
+
+.think-routine-library__empty-detail {
+  min-block-size: 100%;
+  display: grid;
+  place-content: center;
+  padding: var(--sigvelo-spacing-6);
+}
+
+.think-routine-library__empty-detail h1 {
+  margin: 0;
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-xl);
+}
+
+.think-routine-library__create {
+  min-block-size: 0;
+  overflow: auto;
+  padding: clamp(1.5rem, 5vw, 4rem);
+}
+
+.think-routine-library__create-header,
+.think-routine-library__form {
+  inline-size: min(100%, 46rem);
+  margin-inline: auto;
+}
+
+.think-routine-library__create-header {
+  margin-block-end: clamp(2rem, 5vw, 3.5rem);
+}
+
+.think-routine-library__create-header > div {
+  min-inline-size: 0;
+}
+
+.think-routine-library__form {
+  display: grid;
+  gap: var(--sigvelo-spacing-6);
+}
+
+.think-routine-library__form-row {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--sigvelo-spacing-4);
+}
+
+.think-routine-library__select-field {
+  min-inline-size: 0;
+  display: grid;
+  gap: var(--sigvelo-spacing-3);
+}
+
+.think-routine-library__form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--sigvelo-spacing-2);
+  padding-block-start: var(--sigvelo-spacing-4);
+  border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+}
+
+@container (width < 52rem) {
+  .think-routine-library__detail-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@container (width < 40rem) {
+  .think-routine-library__detail-header,
+  .think-routine-library__create-header {
+    flex-wrap: wrap;
+  }
+
+  .think-routine-library__form-row {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@container responsive-sidebar-shell (inline-size <= 56rem) {
+  .think-routine-library__browser {
+    inline-size: 100%;
+    border-inline-end: 0;
+    box-shadow: var(--sigvelo-shadow-lg);
+  }
+}
+
+@media (forced-colors: active) {
+  .think-routine-library__routine-list li[data-selected="true"] {
+    outline: 2px solid highlight;
+  }
+
+  .think-routine-library__routine-status[data-enabled="true"] {
+    background: highlight;
+  }
+}

package/dist/styles/think-thread-picker.css

@@ -5,9 +5,8 @@
   display: grid;
   grid-template-rows: auto minmax(0, 1fr) auto;
   overflow: hidden;
-  border-inline-end: 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-surface) 55%);
+  border-inline-end: 0;
+  background: var(--sigvelo-color-surface);
   color: var(--sigvelo-color-text);
 }
 
@@ -34,6 +33,46 @@
   white-space: nowrap;
 }
 
+.think-thread-status-indicators {
+  min-inline-size: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-1);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--sigvelo-font-weight-normal);
+  line-height: 1;
+}
+
+.think-thread-status-indicators__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-0-5);
+  min-inline-size: 1rem;
+}
+
+.think-thread-status-indicators__item svg {
+  inline-size: 0.75rem;
+  block-size: 0.75rem;
+}
+
+.think-thread-status-indicators__item[data-status="running"] {
+  color: var(--sigvelo-color-primary-text);
+}
+
+.think-thread-status-indicators__item[data-status="running"] svg {
+  animation: think-thread-picker-spin 900ms linear infinite;
+}
+
+.think-thread-status-indicators__item[data-status="attention"] {
+  color: var(--sigvelo-color-warning-text);
+}
+
+.think-thread-status-indicators__item[data-status="failed"] {
+  color: var(--sigvelo-color-danger-text);
+}
+
 .think-thread-picker__nav {
   min-inline-size: 0;
   min-block-size: 0;
@@ -200,6 +239,11 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
+  .think-thread-status-indicators__item[data-status="running"] svg,
+  .think-thread-picker__thread[data-status="pending"] .think-thread-picker__thread-status svg,
+  .think-thread-picker__thread[data-status="running"] .think-thread-picker__thread-status svg,
+  .think-thread-picker__thread[data-status="starting"] .think-thread-picker__thread-status svg,
+  .think-thread-picker__thread[data-status="streaming"] .think-thread-picker__thread-status svg,
   .think-thread-picker__thread[data-status="submitted"] .think-thread-picker__thread-status svg,
   .think-thread-picker__thread[data-status="recovering"] .think-thread-picker__thread-status svg {
     animation: none;

package/dist/styles/toggle-group.css

@@ -71,3 +71,10 @@
   opacity: var(--sigvelo-recipe-disabled-opacity);
   cursor: not-allowed;
 }
+
+@media (forced-colors: active) {
+  .toggle-group__item[data-pressed] {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+}