@mcp-b/react-components 0.41.0 → 0.42.0

package/dist/styles/task.css

@@ -5,7 +5,7 @@
   inline-size: 100%;
   min-block-size: var(--sigvelo-control-height-xs);
   padding-block: var(--sigvelo-spacing-0-5);
-  padding-inline: var(--sigvelo-spacing-2);
+  padding-inline: 0;
   /* Ploy-style: hairline outline on the canvas, plain content inside */
   background-color: transparent;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -13,7 +13,7 @@
   border-radius: var(--sigvelo-radius-md);
   color: var(--sigvelo-color-text-muted);
   font-family: inherit;
-  font-size: var(--sigvelo-text-compact);
+  font-size: var(--sigvelo-text-prose);
   font-weight: var(--sigvelo-font-weight-semibold);
   text-align: start;
   cursor: pointer;
@@ -55,7 +55,7 @@
   gap: var(--sigvelo-spacing-1-5);
   margin: 0;
   padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-3);
+  padding-inline: 0;
   list-style: none;
   /* Bounded so expanding never blows out the conversation scroll position */
   max-block-size: 20rem;
@@ -69,23 +69,11 @@
 }
 
 .task__item {
-  position: relative;
-  font-size: var(--sigvelo-text-compact);
+  font-size: var(--sigvelo-text-prose);
   color: var(--sigvelo-color-text);
   line-height: var(--sigvelo-leading-relaxed);
 }
 
-.task__item::before {
-  content: "";
-  position: absolute;
-  inset-inline-start: calc(-1 * var(--sigvelo-spacing-2));
-  inset-block-start: var(--sigvelo-spacing-2-5);
-  inline-size: var(--sigvelo-spacing-1);
-  block-size: var(--sigvelo-spacing-1);
-  border-radius: var(--sigvelo-radius-full);
-  background-color: var(--sigvelo-color-neutral-border-muted);
-}
-
 @media (any-pointer: coarse) {
   .task__trigger {
     min-block-size: var(--sigvelo-control-height-xl);
@@ -102,7 +90,7 @@
   background-color: var(--sigvelo-color-neutral-bg-subtle);
   border-radius: var(--sigvelo-radius-sm);
   font-family: var(--sigvelo-font-mono);
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-text-meta);
   color: var(--sigvelo-color-text);
   vertical-align: baseline;
 }

package/dist/styles/terminal.css

@@ -1,7 +1,7 @@
 .terminal {
   display: flex;
   flex-direction: column;
-  width: 100%;
+  inline-size: 100%;
   font-family: inherit;
   background-color: var(--sigvelo-color-neutral-950, var(--sigvelo-color-neutral-900));
   color: var(--sigvelo-color-neutral-100);
@@ -12,9 +12,9 @@
 .terminal__header {
   display: flex;
   align-items: center;
-  gap: var(--sigvelo-spacing-2);
-  padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-layout-cluster);
+  padding-block: var(--sigvelo-layout-cluster);
+  padding-inline: var(--sigvelo-layout-gutter);
   background-color: color-mix(in oklab, var(--sigvelo-color-neutral-950) 80%, white 20%);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     color-mix(in oklab, var(--sigvelo-color-neutral-700) 40%, transparent);
@@ -62,13 +62,13 @@
 
 .terminal__content {
   flex: 1;
-  max-height: 24rem;
-  min-height: 8rem;
+  max-block-size: 24rem;
+  min-block-size: 8rem;
 }
 
 .terminal__content-viewport {
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   padding-block: var(--sigvelo-spacing-2-5);
   padding-inline: var(--sigvelo-spacing-3-5);
   overflow: auto;
@@ -86,8 +86,8 @@
 
 .terminal__cursor {
   display: inline-block;
-  width: 0.5rem;
-  height: 1em;
+  inline-size: 0.5rem;
+  block-size: 1em;
   vertical-align: text-bottom;
   background-color: var(--sigvelo-color-neutral-100);
   margin-inline-start: var(--sigvelo-spacing-0-5);

package/dist/styles/test-results.css

@@ -1,9 +1,9 @@
 .test-results__header {
   display: flex;
   flex-direction: column;
-  gap: var(--sigvelo-spacing-2);
-  padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-layout-cluster);
+  padding-block: var(--sigvelo-layout-cluster);
+  padding-inline: var(--sigvelo-layout-gutter);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
 }
@@ -163,7 +163,7 @@
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
   padding-block: var(--sigvelo-spacing-1-5);
-  padding-inline: var(--sigvelo-spacing-4);
+  padding-inline: var(--sigvelo-layout-gutter);
   font-size: var(--sigvelo-text-compact);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
@@ -230,8 +230,8 @@
 
 .test-results__error-text {
   margin: 0;
-  padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-layout-cluster);
+  padding-inline: var(--sigvelo-layout-gutter);
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-2xs);
   line-height: var(--sigvelo-leading-normal);

package/dist/styles/think-execution-status.css

@@ -37,9 +37,9 @@
   min-inline-size: 0;
   inline-size: 100%;
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-columns: auto var(--sigvelo-layout-track-fill);
   align-items: center;
-  gap: var(--sigvelo-spacing-2);
+  gap: var(--sigvelo-layout-cluster);
   text-align: start;
 }
 

package/dist/styles/think-execution-workbench.css

@@ -32,10 +32,10 @@
 .think-execution-workbench__error {
   position: absolute;
   z-index: 2;
-  inset-block-start: var(--sigvelo-spacing-3);
+  inset-block-start: var(--sigvelo-layout-gutter);
   inset-inline: 50% auto;
-  max-inline-size: min(32rem, calc(100% - 2rem));
-  padding: var(--sigvelo-spacing-2) var(--sigvelo-spacing-3);
+  max-inline-size: min(32rem, calc(100% - var(--sigvelo-layout-gutter) * 2));
+  padding: var(--sigvelo-layout-cluster) var(--sigvelo-layout-gutter);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-danger-border-subtle);
   border-radius: var(--sigvelo-radius-sm);
@@ -52,7 +52,7 @@
   min-block-size: 0;
   display: grid;
   flex: 1;
-  grid-template-rows: minmax(0, 1fr);
+  grid-template-rows: var(--sigvelo-layout-track-fill);
   overflow: hidden;
 }
 
@@ -68,7 +68,7 @@
 .think-execution-workbench__list-header,
 .think-execution-workbench__list,
 .think-execution-workbench__empty {
-  inline-size: min(100%, 50rem);
+  inline-size: min(100%, var(--sigvelo-layout-content));
   margin-inline: auto;
 }
 
@@ -76,9 +76,9 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--sigvelo-spacing-2);
+  gap: var(--sigvelo-layout-cluster);
   min-block-size: var(--sigvelo-control-height-lg);
-  padding-inline: var(--sigvelo-spacing-3);
+  padding-inline: var(--sigvelo-layout-gutter);
 }
 
 .think-execution-workbench__list-header h3 {
@@ -90,7 +90,7 @@
 
 /* Same hairline-bounded band the routine library gives its empty run section. */
 .think-execution-workbench__empty {
-  --sigvelo-recipe-empty-state-padding-block: var(--sigvelo-spacing-4);
+  --sigvelo-recipe-empty-state-padding-block: var(--sigvelo-layout-stack);
 
   border-block: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
@@ -107,7 +107,7 @@
 
 .think-execution-workbench__list > li {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-columns: var(--sigvelo-layout-track-fill) auto;
   align-items: center;
   min-inline-size: 0;
   border-radius: var(--sigvelo-radius-md);
@@ -134,12 +134,9 @@
 .think-execution-detail {
   display: grid;
   align-content: start;
-  gap: var(--sigvelo-spacing-4);
-  /* The routine library's single-column measure and page padding. */
-  inline-size: min(100%, 46rem);
-  min-inline-size: 0;
-  margin-inline: auto;
-  padding: clamp(var(--sigvelo-spacing-4), 3vw, var(--sigvelo-spacing-8));
+  gap: var(--sigvelo-layout-stack);
+  /* `page` owns the measure and gutter; keep the roomier first-read block pad. */
+  --sigvelo-recipe-layout-stack: clamp(var(--sigvelo-layout-stack), 3vw, var(--sigvelo-spacing-8));
 }
 
 /* Only the container concerns — the block inside is `EmptyState`, and this

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

@@ -1,18 +1,8 @@
-/* The app names the shell's own container so bar rules below can measure the
-   whole app, rail included — the bar lives in the shell's row, outside the
-   `.think-full-app` container. */
-.think-full-app-shell {
-  container-name: responsive-sidebar-shell think-full-app;
-}
-
 .think-full-app {
   position: relative;
   container: think-full-app / inline-size;
-  block-size: 100%;
-  min-block-size: 0;
-  min-inline-size: 0;
   display: grid;
-  grid-template-rows: minmax(0, 1fr);
+  grid-template-rows: var(--sigvelo-layout-track-fill);
   background: var(--sigvelo-color-surface);
   color: var(--sigvelo-color-text);
   font-family: inherit;
@@ -25,13 +15,9 @@
   min-block-size: 0;
   display: grid;
   /* Conversation first and sized, workbench second and greedy. */
-  grid-template-columns: auto minmax(0, 1fr);
-  grid-template-rows: minmax(0, 1fr);
-  margin: var(--sigvelo-spacing-3);
-}
-
-.think-full-app__mobile-view-switch {
-  display: none;
+  grid-template-columns: auto var(--sigvelo-layout-track-fill);
+  grid-template-rows: var(--sigvelo-layout-track-fill);
+  margin: var(--sigvelo-layout-gutter);
 }
 
 .think-full-app__view-switch {
@@ -40,28 +26,17 @@
   background: transparent;
 }
 
-.think-full-app__app-bar {
-  /* Line the bar's controls up with the plane inset below it. */
-  padding-inline: var(--sigvelo-spacing-3);
-}
-
-/* Without host chrome the bar carries only the compact view switch, and that
-   is hidden above the breakpoint — reserve no room for it. */
-.think-full-app__app-bar[data-app-chrome="false"] {
-  display: none;
-}
-
 .think-full-app__chat-surface {
   grid-column: 1;
   grid-row: 1;
   /* The conversation carries the resize, so the workbench can simply take the
      rest of the row. */
-  inline-size: var(--resizable-side-panel-size, 24.5rem);
+  inline-size: var(--think-full-app-conversation-size, var(--sigvelo-layout-conversation));
   min-inline-size: 0;
   min-block-size: 0;
   display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  grid-template-rows: minmax(0, 1fr);
+  grid-template-columns: var(--sigvelo-layout-track-fill);
+  grid-template-rows: var(--sigvelo-layout-track-fill);
   overflow: hidden;
   transition: inline-size var(--sigvelo-motion-duration-layout) var(--sigvelo-motion-ease-change);
 }
@@ -69,7 +44,7 @@
 /* A length rather than `auto`: closing has to interpolate from the open width,
    and a length-to-auto transition never finishes. */
 .think-full-app[data-has-workbench="false"] .think-full-app__chat-surface {
-  inline-size: calc(100cqi - var(--sigvelo-spacing-3) * 2);
+  inline-size: calc(100cqi - var(--sigvelo-layout-gutter) * 2);
 }
 
 body.is-resizing-side-panel .think-full-app__chat-surface {
@@ -78,17 +53,17 @@ body.is-resizing-side-panel .think-full-app__chat-surface {
 
 .think-full-app__chat,
 .think-full-app__chat-inner {
-  --agent-chat-content-max-inline-size: 46rem;
+  --agent-chat-content-max-inline-size: var(--sigvelo-measure-wide-block);
   min-inline-size: 0;
   min-block-size: 0;
   display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  grid-template-rows: minmax(0, 1fr);
+  grid-template-columns: var(--sigvelo-layout-track-fill);
+  grid-template-rows: var(--sigvelo-layout-track-fill);
   overflow: hidden;
 }
 
 .think-full-app__chat-inner {
-  grid-template-rows: minmax(0, 1fr) auto;
+  grid-template-rows: var(--sigvelo-layout-track-fill) auto;
 }
 
 /* Transparent column: the aside positions the plane, it is not a material of
@@ -99,17 +74,17 @@ body.is-resizing-side-panel .think-full-app__chat-surface {
   min-inline-size: 0;
   min-block-size: 0;
   display: grid;
-  grid-template-rows: minmax(0, 1fr);
+  grid-template-rows: var(--sigvelo-layout-track-fill);
   /* A margin, not a column gap: with no panels at all the aside is absent and
      a gap would still hold its track open. */
-  margin-inline-start: var(--sigvelo-spacing-3);
+  margin-inline-start: var(--sigvelo-layout-gap);
 }
 
 .think-full-app__resizer {
   z-index: 5;
   /* Centre the handle in the column gap rather than on the grid edge: the
      conversation is inset by the gutter and the gap sits beyond its edge. */
-  translate: calc(var(--sigvelo-spacing-3) * 1.5) 0;
+  translate: calc(var(--sigvelo-layout-gap) * 1.5) 0;
 }
 
 .think-full-app__workbench-slot,
@@ -152,12 +127,13 @@ body.is-resizing-side-panel .think-full-app__chat-surface {
   outline-offset: -2px;
 }
 
+/* 56rem matches --sigvelo-layout-break-compact. Container queries cannot read var(). */
 @container think-full-app (inline-size <= 56rem) {
   /* A side panel or phone has no desktop chrome around the app, so an inset
      plane reads as a card in a frame. Flatten to one edge-to-edge surface,
      app bar included — the frame never shows. */
   .think-full-app__view-scope {
-    grid-template-columns: minmax(0, 1fr);
+    grid-template-columns: var(--sigvelo-layout-track-fill);
     margin: 0;
     overflow: hidden;
   }
@@ -167,9 +143,10 @@ body.is-resizing-side-panel .think-full-app__chat-surface {
   }
 
   /* Compact swaps between the two rather than seating them side by side, so
-     neither carries the desktop split's width. The extra class matches the
-     closed-workbench rule this has to beat. */
-  .think-full-app .think-full-app__chat-surface {
+     neither carries the desktop split's width. Repeat the closed-workbench
+     attribute so this beats `.think-full-app[data-has-workbench="false"]`. */
+  .think-full-app .think-full-app__chat-surface,
+  .think-full-app[data-has-workbench="false"] .think-full-app__chat-surface {
     inline-size: auto;
     transition: none;
   }
@@ -183,20 +160,6 @@ body.is-resizing-side-panel .think-full-app__chat-surface {
     box-shadow: none;
   }
 
-  .think-full-app__app-bar[data-app-chrome="false"] {
-    display: grid;
-  }
-
-  /* One switch at a time: compact swaps the whole view rather than opening a
-     panel beside the conversation. */
-  .think-full-app__workbench-view-switch {
-    display: none;
-  }
-
-  .think-full-app__mobile-view-switch {
-    display: flex;
-  }
-
   .think-full-app__chat-surface,
   .think-full-app__workbench-slot,
   .think-full-app__workbench {
@@ -226,12 +189,11 @@ body.is-resizing-side-panel .think-full-app__chat-surface {
 
   .think-full-app__chat,
   .think-full-app__chat-inner {
-    --agent-chat-content-max-inline-size: 34rem;
-  }
-
-  /* An immersive workbench view owns the whole viewport. */
-  .think-full-app__app-bar[data-hide-in-workbench][data-mobile-view="workbench"] {
-    display: none;
+    /* Codex side panel: --thread-content-max-width: 100% and
+       --padding-toolbar: spacing*2 (8px). A 68ch cap left the transcript
+       as a start-aligned island in the pane. */
+    --agent-chat-content-max-inline-size: 100%;
+    --agent-chat-column-inset: var(--sigvelo-spacing-2);
   }
 }
 

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

@@ -1,14 +1,7 @@
+/* The shell is the library's root element; only its overrides live here. */
 .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,
@@ -20,25 +13,6 @@
   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;
@@ -55,17 +29,11 @@
   text-transform: uppercase;
 }
 
-.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-3) var(--sigvelo-spacing-2);
+  padding: var(--sigvelo-layout-gutter) var(--sigvelo-layout-cluster);
   border-inline-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
   background: color-mix(
@@ -79,15 +47,15 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--sigvelo-spacing-2);
+  gap: var(--sigvelo-layout-cluster);
   margin-block-end: var(--sigvelo-spacing-2);
 }
 
-.think-routine-library__layout[data-sidebar-open="true"] .think-routine-library__browser-toolbar {
+.think-routine-library[data-sidebar-open="true"] .think-routine-library__browser-toolbar {
   padding-inline-start: var(--sigvelo-spacing-12);
 }
 
-.think-routine-library__layout[data-sidebar-open="false"] .think-routine-library__detail {
+.think-routine-library[data-sidebar-open="false"] .think-routine-library__detail {
   padding-block-start: clamp(3.75rem, 6vw, 4.5rem);
 }
 
@@ -125,7 +93,7 @@
   inline-size: 100%;
   min-block-size: var(--sigvelo-spacing-14);
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-columns: auto var(--sigvelo-layout-track-fill);
   align-items: center;
   gap: var(--sigvelo-spacing-2);
   padding: var(--sigvelo-spacing-2);
@@ -179,21 +147,21 @@
 }
 
 .think-routine-library__detail {
-  inline-size: min(100%, 64rem);
+  inline-size: min(100%, var(--sigvelo-layout-content));
   margin-inline: auto;
-  padding: clamp(var(--sigvelo-spacing-4), 3vw, var(--sigvelo-spacing-8));
+  padding: clamp(var(--sigvelo-layout-stack), 3vw, var(--sigvelo-spacing-8));
 }
 
 .think-routine-library__detail-header,
 .think-routine-library__create-header {
   display: flex;
   align-items: flex-start;
-  gap: var(--sigvelo-spacing-4);
+  gap: var(--sigvelo-layout-stack);
 }
 
 .think-routine-library__detail-header {
   justify-content: space-between;
-  padding-block-end: clamp(var(--sigvelo-spacing-4), 3vw, var(--sigvelo-spacing-8));
+  padding-block-end: clamp(var(--sigvelo-layout-stack), 3vw, var(--sigvelo-spacing-8));
 }
 
 .think-routine-library__detail-heading {
@@ -250,7 +218,7 @@
 
 .think-routine-library__facts > div {
   display: grid;
-  grid-template-columns: 5.5rem minmax(0, 1fr);
+  grid-template-columns: 5.5rem var(--sigvelo-layout-track-fill);
   gap: var(--sigvelo-spacing-3);
   padding-block: var(--sigvelo-spacing-2-5);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -309,7 +277,7 @@
 
 /* One rule, not two — this selector was declared twice in this file. */
 .think-routine-library__empty-runs {
-  --sigvelo-recipe-empty-state-padding-block: var(--sigvelo-spacing-4);
+  --sigvelo-recipe-empty-state-padding-block: var(--sigvelo-layout-stack);
 
   border-block: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
@@ -329,7 +297,7 @@
 
 .think-routine-library__create-header,
 .think-routine-library__form {
-  inline-size: min(100%, 46rem);
+  inline-size: min(100%, var(--sigvelo-layout-content));
   margin-inline: auto;
 }
 
@@ -343,47 +311,50 @@
 
 .think-routine-library__form {
   display: grid;
-  gap: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-layout-gutter);
 }
 
 .think-routine-library__form-row {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--sigvelo-spacing-4);
+  grid-template-columns: repeat(2, var(--sigvelo-layout-track-fill));
+  gap: var(--sigvelo-layout-stack);
 }
 
 .think-routine-library__select-field {
   min-inline-size: 0;
   display: grid;
-  gap: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-layout-gutter);
 }
 
 .think-routine-library__form-actions {
   display: flex;
   justify-content: flex-end;
-  gap: var(--sigvelo-spacing-2);
-  padding-block-start: var(--sigvelo-spacing-4);
+  gap: var(--sigvelo-layout-cluster);
+  padding-block-start: var(--sigvelo-layout-stack);
   border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
 }
 
-@container (width < 52rem) {
+/* Local wrap. Not --sigvelo-layout-break-compact. */
+@container (inline-size < 52rem) {
   .think-routine-library__detail-grid {
-    grid-template-columns: minmax(0, 1fr);
+    grid-template-columns: var(--sigvelo-layout-track-fill);
   }
 }
 
-@container (width < 40rem) {
+/* Local wrap. Not --sigvelo-layout-break-compact. */
+@container (inline-size < 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);
+    grid-template-columns: var(--sigvelo-layout-track-fill);
   }
 }
 
+/* 56rem matches --sigvelo-layout-break-compact. Container queries cannot read var(). */
 @container responsive-sidebar-shell (inline-size <= 56rem) {
   .think-routine-library__browser {
     inline-size: 100%;

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

@@ -3,7 +3,7 @@
   block-size: 100%;
   min-block-size: 0;
   display: grid;
-  grid-template-rows: auto auto minmax(0, 1fr) auto;
+  grid-template-rows: auto auto var(--sigvelo-layout-track-fill) auto;
   overflow: hidden;
   border-inline-end: 0;
   /* No material of its own: it fills whatever holds it — the shell's rail, the
@@ -20,10 +20,8 @@
   align-items: center;
   gap: var(--sigvelo-density-compact-control-gap);
   padding-block: var(--sigvelo-spacing-1);
-  padding-inline: calc(
-      var(--sigvelo-density-compact-control-padding-inline) + env(safe-area-inset-left, 0px)
-    )
-    var(--sigvelo-density-compact-control-padding-inline);
+  padding-inline: calc(var(--sigvelo-layout-gutter) + env(safe-area-inset-left, 0px))
+    var(--sigvelo-layout-gutter);
 }
 
 .think-thread-picker__title {
@@ -94,7 +92,7 @@
 }
 
 .think-thread-picker__viewport {
-  padding: var(--sigvelo-spacing-1-5) var(--sigvelo-spacing-2) var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-layout-cluster) var(--sigvelo-layout-gutter) var(--sigvelo-layout-gutter);
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
 }
@@ -118,9 +116,9 @@
   min-inline-size: 0;
   min-block-size: var(--sigvelo-density-compact-control-height);
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-columns: var(--sigvelo-layout-track-fill) auto;
   padding-block: 0;
-  padding-inline: var(--sigvelo-density-compact-control-padding-inline);
+  padding-inline: var(--sigvelo-layout-gutter);
   align-items: center;
   justify-content: flex-start;
   column-gap: var(--sigvelo-spacing-1);
@@ -132,7 +130,7 @@
 
 .think-thread-picker__item:has(.think-thread-picker__delete) .think-thread-picker__thread {
   grid-template-columns:
-    minmax(0, 1fr)
+    var(--sigvelo-layout-track-fill)
     minmax(var(--sigvelo-density-compact-control-height), max-content);
 }
 
@@ -301,6 +299,7 @@
   flex: 0 0 auto;
 }
 
+/* 56rem matches --sigvelo-layout-break-compact. Container queries cannot read var(). */
 @container responsive-sidebar-shell (inline-size <= 56rem) {
   .think-thread-picker {
     block-size: auto;
@@ -331,6 +330,7 @@
   .think-thread-picker__scroll,
   .think-thread-picker__viewport {
     block-size: auto;
+    /* Compact drawer list cap. Not --sigvelo-layout-sidebar. */
     max-block-size: min(16rem, 42dvh);
   }