@mcp-b/react-components 0.48.0 → 0.49.1

package/dist/styles/{think-routine-library.css → think-routine.css}

@@ -1,10 +1,5 @@
-/* The shell is the library's root element; only its overrides live here. */
-.think-routine-library {
-  min-block-size: 38rem;
-  background: var(--sigvelo-color-canvas);
-}
-
-.think-routine-library__editor {
+/* Shared routine browser, detail, history, and editor anatomy. */
+.think-routine__editor {
   position: relative;
   block-size: 100%;
   min-block-size: 0;
@@ -13,7 +8,7 @@
   background: var(--sigvelo-color-canvas);
 }
 
-.think-routine-library__editor-error {
+.think-routine__editor-error {
   position: absolute;
   z-index: 2;
   inset-block-start: calc(var(--sigvelo-layout-chrome) + var(--sigvelo-layout-gutter));
@@ -41,14 +36,14 @@
   block-size: 100%;
 }
 
-.think-routine-library__detail-header h1,
-.think-routine-library__create-header h1 {
+.think-routine__detail-header h1,
+.think-routine__create-header h1 {
   margin: 0;
   font-weight: 600;
   letter-spacing: -0.025em;
 }
 
-.think-routine-library__eyebrow {
+.think-routine__eyebrow {
   margin: 0 0 var(--sigvelo-spacing-0-5);
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-xs);
@@ -57,7 +52,7 @@
   text-transform: uppercase;
 }
 
-.think-routine-library__browser {
+.think-routine__browser {
   min-inline-size: 0;
   min-block-size: 0;
   overflow: auto;
@@ -71,7 +66,7 @@
   );
 }
 
-.think-routine-library__browser-toolbar {
+.think-routine__browser-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -79,19 +74,11 @@
   margin-block-end: var(--sigvelo-spacing-2);
 }
 
-.think-routine-library[data-sidebar-open="true"] .think-routine-library__browser-toolbar {
-  padding-inline-start: var(--sigvelo-spacing-12);
-}
-
-.think-routine-library[data-sidebar-open="false"] .think-routine-library__detail {
-  padding-block-start: clamp(3.75rem, 6vw, 4.5rem);
-}
-
-.think-routine-library__filters {
+.think-routine__filters {
   inline-size: fit-content;
 }
 
-.think-routine-library__search {
+.think-routine__search {
   --sigvelo-recipe-control-radius: var(--sigvelo-radius-full);
 
   display: grid;
@@ -99,7 +86,7 @@
   margin-block-end: var(--sigvelo-spacing-2);
 }
 
-.think-routine-library__routine-list {
+.think-routine__routine-list {
   display: grid;
   gap: var(--sigvelo-spacing-1);
   margin: 0;
@@ -107,13 +94,13 @@
   list-style: none;
 }
 
-.think-routine-library__routine-list li {
+.think-routine__routine-list li {
   border-radius: var(--sigvelo-radius-md);
   transition: background-color var(--sigvelo-motion-duration-interaction)
     var(--sigvelo-motion-ease-change);
 }
 
-.think-routine-library__routine-list li[data-selected="true"] {
+.think-routine__routine-list li[data-selected="true"] {
   background: var(--sigvelo-color-neutral-bg-subtle);
 }
 
@@ -129,7 +116,7 @@
   text-align: start;
 }
 
-.think-routine-library__routine-status {
+.think-routine__routine-status {
   inline-size: 0.5rem;
   block-size: 0.5rem;
   border: var(--sigvelo-border-style) 1.5px var(--sigvelo-color-neutral-border);
@@ -139,85 +126,85 @@
     border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
-.think-routine-library__routine-status[data-enabled="true"] {
+.think-routine__routine-status[data-enabled="true"] {
   border-color: var(--sigvelo-color-success-border);
   background: var(--sigvelo-color-success-bg);
 }
 
-.think-routine-library__routine-copy {
+.think-routine__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 {
+.think-routine__routine-copy strong,
+.think-routine__routine-copy span,
+.think-routine__routine-copy small {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.think-routine-library__routine-copy strong {
+.think-routine__routine-copy strong {
   font-size: var(--sigvelo-text-compact);
 }
 
-.think-routine-library__routine-copy span,
-.think-routine-library__routine-copy small {
+.think-routine__routine-copy span,
+.think-routine__routine-copy small {
   color: color-mix(in oklab, var(--sigvelo-color-text-muted), var(--sigvelo-color-text) 12%);
   font-size: var(--sigvelo-text-xs);
 }
 
-.think-routine-library__main {
+.think-routine__main {
   min-inline-size: 0;
   min-block-size: 0;
   overflow: auto;
 }
 
-.think-routine-library__detail {
+.think-routine__detail {
   inline-size: min(100%, var(--sigvelo-layout-content));
   margin-inline: auto;
   padding: clamp(var(--sigvelo-layout-stack), 3vw, var(--sigvelo-spacing-8));
 }
 
-.think-routine-library__detail-header,
-.think-routine-library__create-header {
+.think-routine__detail-header,
+.think-routine__create-header {
   display: flex;
   align-items: flex-start;
   gap: var(--sigvelo-layout-stack);
 }
 
-.think-routine-library__detail-header {
+.think-routine__detail-header {
   justify-content: space-between;
   padding-block-end: clamp(var(--sigvelo-layout-stack), 3vw, var(--sigvelo-spacing-8));
 }
 
-.think-routine-library__detail-heading {
+.think-routine__detail-heading {
   min-inline-size: 0;
 }
 
-.think-routine-library__detail-header h1,
-.think-routine-library__create-header h1 {
+.think-routine__detail-header h1,
+.think-routine__create-header h1 {
   font-size: clamp(var(--sigvelo-text-lg), 2.5vw, var(--sigvelo-text-2xl));
   line-height: var(--sigvelo-leading-tight);
 }
 
-.think-routine-library__detail-heading > p:last-child,
-.think-routine-library__create-header > div > p:last-child {
+.think-routine__detail-heading > p:last-child,
+.think-routine__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 {
+.think-routine__detail-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.65fr);
   gap: clamp(var(--sigvelo-spacing-4), 3vw, var(--sigvelo-spacing-8));
   padding-block-end: clamp(var(--sigvelo-spacing-4), 3vw, var(--sigvelo-spacing-8));
 }
 
-.think-routine-library__section-heading {
+.think-routine__section-heading {
   min-block-size: var(--sigvelo-spacing-8);
   display: flex;
   align-items: flex-start;
@@ -226,13 +213,13 @@
   margin-block-end: var(--sigvelo-spacing-3);
 }
 
-.think-routine-library__section-heading h2 {
+.think-routine__section-heading h2 {
   margin: 0;
   font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-semibold);
 }
 
-.think-routine-library__instructions {
+.think-routine__instructions {
   margin: 0;
   color: var(--sigvelo-color-text);
   font-size: var(--sigvelo-text-sm);
@@ -240,11 +227,11 @@
   white-space: pre-wrap;
 }
 
-.think-routine-library__facts {
+.think-routine__facts {
   margin: 0;
 }
 
-.think-routine-library__facts > div {
+.think-routine__facts > div {
   display: grid;
   grid-template-columns: 5.5rem var(--sigvelo-layout-track-fill);
   gap: var(--sigvelo-spacing-3);
@@ -254,17 +241,17 @@
   font-size: var(--sigvelo-text-compact);
 }
 
-.think-routine-library__facts dt {
+.think-routine__facts dt {
   color: var(--sigvelo-color-text-muted);
 }
 
-.think-routine-library__facts dd {
+.think-routine__facts dd {
   margin: 0;
   overflow-wrap: anywhere;
   text-align: end;
 }
 
-.think-routine-library__status-control {
+.think-routine__status-control {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -272,20 +259,20 @@
   padding-block-start: var(--sigvelo-spacing-4);
 }
 
-.think-routine-library__status-control > div {
+.think-routine__status-control > div {
   display: grid;
   gap: var(--sigvelo-spacing-0-5);
 }
 
-.think-routine-library__status-control strong {
+.think-routine__status-control strong {
   font-size: var(--sigvelo-text-compact);
 }
 
-.think-routine-library__runs {
+.think-routine__runs {
   padding-block-end: clamp(var(--sigvelo-spacing-4), 3vw, var(--sigvelo-spacing-8));
 }
 
-.think-routine-library__run-list {
+.think-routine__run-list {
   display: grid;
   gap: var(--sigvelo-spacing-0-5);
   margin: 0;
@@ -293,18 +280,18 @@
   list-style: none;
 }
 
-.think-routine-library__run-list li {
+.think-routine__run-list li {
   min-inline-size: 0;
 }
 
-.think-routine-library__run {
+.think-routine__run {
   inline-size: 100%;
   justify-content: flex-start;
   text-align: start;
 }
 
 /* One rule, not two — this selector was declared twice in this file. */
-.think-routine-library__empty-runs {
+.think-routine__empty-runs {
   --sigvelo-recipe-empty-state-padding-block: var(--sigvelo-layout-stack);
 
   border-block: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -313,48 +300,45 @@
 
 /* Filling the pane is all this adds — the muted, centred anatomy inside it is
    `EmptyState`, which already centres itself and spaces its own action. */
-.think-routine-library__empty-detail {
-  min-block-size: 100%;
-}
 
-.think-routine-library__create {
+.think-routine__create {
   min-block-size: 0;
   overflow: auto;
   padding: clamp(var(--sigvelo-spacing-4), 3vw, var(--sigvelo-spacing-8));
 }
 
-.think-routine-library__create-header,
-.think-routine-library__form {
+.think-routine__create-header,
+.think-routine__form {
   inline-size: min(100%, var(--sigvelo-layout-content));
   margin-inline: auto;
 }
 
-.think-routine-library__create-header {
+.think-routine__create-header {
   margin-block-end: clamp(var(--sigvelo-spacing-4), 3vw, var(--sigvelo-spacing-8));
 }
 
-.think-routine-library__create-header > div {
+.think-routine__create-header > div {
   min-inline-size: 0;
 }
 
-.think-routine-library__form {
+.think-routine__form {
   display: grid;
   gap: var(--sigvelo-layout-gutter);
 }
 
-.think-routine-library__form-row {
+.think-routine__form-row {
   display: grid;
   grid-template-columns: repeat(2, var(--sigvelo-layout-track-fill));
   gap: var(--sigvelo-layout-stack);
 }
 
-.think-routine-library__select-field {
+.think-routine__select-field {
   min-inline-size: 0;
   display: grid;
   gap: var(--sigvelo-layout-gutter);
 }
 
-.think-routine-library__form-actions {
+.think-routine__form-actions {
   display: flex;
   justify-content: flex-end;
   gap: var(--sigvelo-layout-cluster);
@@ -365,26 +349,26 @@
 
 /* Local wrap. Not --sigvelo-layout-break-compact. */
 @container (inline-size < 52rem) {
-  .think-routine-library__detail-grid {
+  .think-routine__detail-grid {
     grid-template-columns: var(--sigvelo-layout-track-fill);
   }
 }
 
 /* Local wrap. Not --sigvelo-layout-break-compact. */
 @container (inline-size < 40rem) {
-  .think-routine-library__detail-header,
-  .think-routine-library__create-header {
+  .think-routine__detail-header,
+  .think-routine__create-header {
     flex-wrap: wrap;
   }
 
-  .think-routine-library__form-row {
+  .think-routine__form-row {
     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 {
+  .think-routine__browser {
     inline-size: 100%;
     /* Narrow enough that the browser stops being a column beside the detail
        and starts covering it, so it takes the overlay stack. */
@@ -394,11 +378,11 @@
 }
 
 @media (forced-colors: active) {
-  .think-routine-library__routine-list li[data-selected="true"] {
+  .think-routine__routine-list li[data-selected="true"] {
     outline: 2px solid highlight;
   }
 
-  .think-routine-library__routine-status[data-enabled="true"] {
+  .think-routine__routine-status[data-enabled="true"] {
     background: highlight;
   }
 }

package/dist/styles/web-preview.css

@@ -1,3 +1,8 @@
+.web-preview:where([data-surface="plain"]) {
+  border: 0;
+  border-radius: 0;
+}
+
 /* The card's chrome row (the Ploy bar): one bar height everywhere, muted
    controls resting directly on whatever plane hosts the preview, separated
    from the scrolling content by one hairline and a breath of shadow. */
@@ -14,6 +19,14 @@
   box-shadow: var(--sigvelo-elevation-bar);
 }
 
+.web-preview__nav[data-variant="tabs"] {
+  gap: 0;
+  padding-block: 0;
+  padding-inline: var(--sigvelo-spacing-1-5);
+  border-block-end: 0;
+  box-shadow: none;
+}
+
 .web-preview__nav-button {
   flex-shrink: 0;
 }
@@ -30,6 +43,7 @@
 }
 
 .web-preview__body {
+  display: flex;
   flex: 1;
   /* Preview canvas floor. Not --sigvelo-layout-sidebar. */
   min-block-size: 16rem;
@@ -41,7 +55,7 @@
   pointer-events: none;
 }
 
-.web-preview__body--empty {
+.web-preview__empty {
   display: flex;
   align-items: center;
   justify-content: center;

package/dist/utils/codex-model-catalog.d.ts

@@ -52,18 +52,37 @@ type CodexModelListResponse = {
   data: CodexModel[]; /** Opaque cursor for the next `model/list` request. */
   nextCursor: string | null;
 };
-/** Current visible model ids in upstream Codex's checked-in catalog. */
-declare const CODEX_MODEL_IDS: readonly ["gpt-5.6-sol", "gpt-5.6-terra", "gpt-5.6-luna", "gpt-5.5", "gpt-5.4", "gpt-5.4-mini", "gpt-5.2"];
+/** Known visible model ids from upstream Codex and its desktop catalog. */
+declare const CODEX_MODEL_IDS: readonly ["gpt-6-astra", "gpt-5.6-sol", "gpt-5.6-terra", "gpt-5.6-luna", "gpt-5.5", "gpt-5.4", "gpt-5.4-mini", "gpt-5.2"];
 type CodexModelId = (typeof CODEX_MODEL_IDS)[number];
 /** Preserves literal ids and capability values for checked-in Codex catalogs. */
 declare function defineCodexModels<const Models extends readonly CodexModel[]>(models: Models): Models;
 /**
- * Checked-in snapshot of upstream Codex's visible model catalog
- * (`codex-rs/models-manager/models.json`). Display data for hosts without a
- * live `model/list`; runtime account catalogs remain authoritative because
- * availability differs by account and rollout.
+ * Checked-in snapshot of Codex's upstream and desktop model catalogs.
+ * Display data for hosts without a live `model/list`; runtime account catalogs
+ * remain authoritative because availability differs by account and rollout.
  */
 declare const CHECKED_IN_CODEX_MODELS: readonly [{
+  readonly id: "gpt-6-astra";
+  readonly model: "gpt-6-astra";
+  readonly displayName: "GPT-6 Astra";
+  readonly description: "Our most capable model for complex, demanding work.";
+  readonly supportedReasoningEfforts: [...CodexReasoningEffortOption[], CodexReasoningEffortOption, {
+    readonly reasoningEffort: "ultra";
+    readonly description: "Maximum reasoning with automatic task delegation";
+  }];
+  readonly defaultReasoningEffort: "medium";
+  readonly isDefault: false;
+  readonly upgrade: null;
+  readonly upgradeInfo: null;
+  readonly availabilityNux: null;
+  readonly hidden: boolean;
+  readonly inputModalities: ("text" | "image")[];
+  readonly supportsPersonality: boolean;
+  readonly additionalSpeedTiers: never[];
+  readonly serviceTiers: never[];
+  readonly defaultServiceTier: null;
+}, {
   readonly id: "gpt-5.6-sol";
   readonly model: "gpt-5.6-sol";
   readonly displayName: "GPT-5.6-Sol";

package/dist/utils/codex-model-catalog.js

@@ -1,6 +1,7 @@
 //#region src/utils/codex-model-catalog.ts
-/** Current visible model ids in upstream Codex's checked-in catalog. */
+/** Known visible model ids from upstream Codex and its desktop catalog. */
 const CODEX_MODEL_IDS = [
+	"gpt-6-astra",
 	"gpt-5.6-sol",
 	"gpt-5.6-terra",
 	"gpt-5.6-luna",
@@ -47,12 +48,28 @@ const checkedInModelMetadata = {
 	defaultServiceTier: null
 };
 /**
-* Checked-in snapshot of upstream Codex's visible model catalog
-* (`codex-rs/models-manager/models.json`). Display data for hosts without a
-* live `model/list`; runtime account catalogs remain authoritative because
-* availability differs by account and rollout.
+* Checked-in snapshot of Codex's upstream and desktop model catalogs.
+* Display data for hosts without a live `model/list`; runtime account catalogs
+* remain authoritative because availability differs by account and rollout.
 */
 const CHECKED_IN_CODEX_MODELS = defineCodexModels([
+	{
+		...checkedInModelMetadata,
+		id: "gpt-6-astra",
+		model: "gpt-6-astra",
+		displayName: "GPT-6 Astra",
+		description: "Our most capable model for complex, demanding work.",
+		supportedReasoningEfforts: [
+			...standardReasoningEfforts,
+			maxReasoningEffort,
+			{
+				reasoningEffort: "ultra",
+				description: "Maximum reasoning with automatic task delegation"
+			}
+		],
+		defaultReasoningEffort: "medium",
+		isDefault: false
+	},
 	{
 		...checkedInModelMetadata,
 		id: "gpt-5.6-sol",