@mcp-b/react-components 0.48.0 → 0.49.0

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;