@morscherlab/mint-sdk 1.5.0-beta.1 → 1.5.0-beta.10

package/dist/styles.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');
+
 .mint-generated-path-input[data-v-85f805b3] {
   display: grid;
   gap: 0.75rem;
@@ -18,7 +18,7 @@
   background: transparent;
 }
 
-.mint-plotly-chart__plot[data-v-ec8df4f1] {
+.mint-plotly-chart__plot[data-v-8d1b6790] {
   width: 100%;
   min-height: 24rem;
 }
@@ -26,18 +26,18 @@
 /* Plotly fills the hover label's trace-name box from plot/paper bgcolor combined over
    white (inline style, no hoverlabel option), so it stays light in dark mode. The token
    follows the theme; in light mode it resolves to the same white. */
-.mint-plotly-chart__plot[data-v-ec8df4f1] .hovertext rect {
+.mint-plotly-chart__plot[data-v-8d1b6790] .hovertext rect {
   fill: var(--bg-card) !important;
 }
-.mint-plotly-chart__error[data-v-ec8df4f1] {
+.mint-plotly-chart__error[data-v-8d1b6790] {
   margin: 0;
   padding: 1rem;
   border: 1px solid var(--mint-error-border);
-  border-radius: 0.75rem;
+  border-radius: var(--radius-lg);
   background: var(--mint-error-bg);
   color: var(--mint-error-hover);
 }
-.mint-plotly-chart__error[data-v-ec8df4f1] p {
+.mint-plotly-chart__error[data-v-8d1b6790] p {
   margin: 0;
 }
 
@@ -48,57 +48,58 @@
   margin: 0 auto;
 }
 
-.mint-generated-result[data-v-f242a75c] {
+.mint-generated-result[data-v-2406c0cc] {
   width: 100%;
 }
-.mint-generated-result__text[data-v-f242a75c],
-.mint-generated-result__json[data-v-f242a75c] {
+.mint-generated-result__text[data-v-2406c0cc],
+.mint-generated-result__json[data-v-2406c0cc] {
   margin: 0;
   color: var(--text-primary);
 }
-.mint-generated-result__text[data-v-f242a75c] {
+.mint-generated-result__text[data-v-2406c0cc] {
   max-width: 72ch;
   white-space: pre-wrap;
   line-height: 1.65;
 }
-.mint-generated-result__json[data-v-f242a75c] {
+.mint-generated-result__json[data-v-2406c0cc] {
   overflow: auto;
   padding: 0.75rem 1rem;
   border-radius: var(--radius-md);
   background: var(--bg-tertiary);
+  font-family: var(--font-mono);
   font-size: 0.8125rem;
   line-height: 1.55;
   white-space: pre-wrap;
 }
-.mint-generated-result__image[data-v-f242a75c] {
+.mint-generated-result__image[data-v-2406c0cc] {
   display: block;
   max-width: 100%;
   height: auto;
   margin: 0 auto;
 }
-.mint-generated-result__artifact[data-v-f242a75c] {
+.mint-generated-result__artifact[data-v-2406c0cc] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   padding: 1rem;
   border: 1px solid var(--border-color);
-  border-radius: 0.75rem;
+  border-radius: var(--radius-lg);
   color: var(--color-primary);
   text-decoration: none;
 }
 
-.mint-status-panels__tabs[data-v-3c05755e] { padding: 0 1rem;
+.mint-status-panels__tabs[data-v-1a9246f6] { padding: 0 var(--mint-section-card-inset);
 }
-.mint-status-panels__body[data-v-3c05755e] { padding: 0.75rem 1rem;
+.mint-status-panels__body[data-v-1a9246f6] { padding: 0.75rem var(--mint-section-card-inset);
 }
-.mint-status-panels__bar[data-v-3c05755e] { display: flex; flex-direction: column; gap: 0.5rem;
+.mint-status-panels__bar[data-v-1a9246f6] { display: flex; flex-direction: column; gap: 0.5rem;
 }
-.mint-status-panels__series[data-v-3c05755e] { align-self: flex-end;
+.mint-status-panels__series[data-v-1a9246f6] { align-self: flex-end;
 }
-.mint-status-panels__kv[data-v-3c05755e] { margin: 0; padding: 0.25rem 1rem 0.5rem;
+.mint-status-panels__kv[data-v-1a9246f6] { margin: 0; padding: 0.25rem var(--mint-section-card-inset) 0.5rem;
 }
-.mint-status-panels__kv-row[data-v-3c05755e] {
+.mint-status-panels__kv-row[data-v-1a9246f6] {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
@@ -106,11 +107,11 @@
   padding: 0.4375rem 0;
   border-bottom: 1px solid var(--border-light);
 }
-.mint-status-panels__kv-row[data-v-3c05755e]:last-child { border-bottom: 0;
+.mint-status-panels__kv-row[data-v-1a9246f6]:last-child { border-bottom: 0;
 }
-.mint-status-panels__kv-key[data-v-3c05755e] { font-size: 0.75rem; color: var(--text-secondary);
+.mint-status-panels__kv-key[data-v-1a9246f6] { font-size: 0.75rem; color: var(--text-secondary);
 }
-.mint-status-panels__kv-value[data-v-3c05755e] {
+.mint-status-panels__kv-value[data-v-1a9246f6] {
   margin: 0;
   min-width: 0;
   font-family: var(--font-mono);
@@ -121,77 +122,27 @@
   overflow-wrap: anywhere;
 }
 
-.mint-generated-workspace[data-v-c8ff991b] {
-  position: relative;
+.mint-generated-workspace[data-v-7ba9e342] {
   min-width: 0;
-  min-height: calc(100vh - 5rem);
-  padding: clamp(1rem, 2.5vw, 2.5rem);
-  background: var(--bg-primary);
+  min-height: 0;
+  overflow-y: auto;
 }
-.mint-generated-workspace__loading[data-v-c8ff991b] {
+.mint-generated-workspace__loading[data-v-7ba9e342] {
   display: flex;
-  min-height: 24rem;
+  flex: 1;
   align-items: center;
   justify-content: center;
   gap: 0.75rem;
   color: var(--text-secondary);
 }
-.mint-generated-workspace__header[data-v-c8ff991b] {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 1.5rem;
-  max-width: 76rem;
-  margin: 0 auto 1.25rem;
-}
-.mint-generated-workspace__header h1[data-v-c8ff991b] {
-  margin: 0;
-  color: var(--text-primary);
-  font-size: clamp(1.35rem, 2vw, 1.8rem);
-  line-height: 1.2;
-}
-.mint-generated-workspace__header p[data-v-c8ff991b]:not(.mint-generated-workspace__eyebrow) {
-  margin: 0.4rem 0 0;
-  color: var(--text-secondary);
-}
-.mint-generated-workspace__eyebrow[data-v-c8ff991b] {
-  margin: 0 0 0.35rem;
-  color: var(--text-secondary);
-  font-size: 0.72rem;
-  font-weight: 700;
-}
-.mint-generated-workspace__resources[data-v-c8ff991b] {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 0.4rem;
-}
-.mint-generated-workspace__resources span[data-v-c8ff991b] {
-  padding: 0.3rem 0.55rem;
-  border: 1px solid var(--border-color);
-  border-radius: 999px;
-  background: var(--bg-secondary);
-  color: var(--text-secondary);
+.mint-generated-workspace__resources[data-v-7ba9e342] {
+  color: var(--text-muted);
+  font-family: var(--font-mono);
   font-size: 0.75rem;
-  font-weight: 600;
-}
-.mint-generated-workspace__result[data-v-c8ff991b] {
-  max-width: 76rem;
-  min-height: 24rem;
-  margin: 0 auto;
-  padding: clamp(1rem, 2vw, 1.75rem);
-  border: 1px solid var(--border-color);
-  border-radius: 1rem;
-  background: var(--bg-secondary);
-  box-shadow: var(--shadow-sm);
-}
-@media (max-width: 640px) {
-.mint-generated-workspace__header[data-v-c8ff991b] {
-    flex-direction: column;
-}
-.mint-generated-workspace__resources[data-v-c8ff991b] {
-    justify-content: flex-start;
 }
+.mint-generated-workspace__description[data-v-7ba9e342] {
+  margin: 0 0 var(--mint-gutter);
+  color: var(--text-secondary);
 }
 
 .mint-component-binding-renderer[data-v-eeb93cc7] {
@@ -300,9 +251,8 @@
   cursor: pointer;
 }
 
-
-
 @layer theme, base, components, utilities;
+
 /* MINT SDK Styles - Main entry point
  * This file combines all SDK styles for proper bundling
  */
@@ -369,12 +319,16 @@
   --mint-primary: var(--color-primary);
   /* Text and icons on an accent fill (filled buttons, Save). */
   --text-on-accent: #FFFFFF;
-  /* Retired hues, aliased to the accent until 1.5 (mint doctor warns on use). */
+  /* Text on a --mint-error fill (danger buttons); white in both themes, 3.76:1 on #EF4444. */
+  --text-on-danger: #FFFFFF;
+  /* Knob of a toggle or slider, and the mark of a disabled checkbox; white in both themes. */
+  --control-knob: #FFFFFF;
+  /* Retired hues, aliased to the accent until 2.0 (mint doctor warns on use). */
   --color-cta: var(--color-primary);
   --color-cta-hover: var(--color-primary-hover);
   --color-purple: var(--color-primary);
 
-  /* Entity colors — retired hues, aliased to slate until 1.5. Entities are told
+  /* Entity colors — retired hues, aliased to slate until 2.0. Entities are told
      apart by icon and label, not by hue. Only -hover has no neutral token. */
   --color-experiment: var(--text-secondary-strong);
   --color-experiment-hover: #334155;
@@ -444,6 +398,9 @@
   --mint-gutter: 0.5rem;
   /* Distance from the outermost cards to the window edge, in every density. */
   --mint-page-inset: 1rem;
+  /* Text inset of a SectionCard: its title, row text and table edge columns
+     start here, and page chrome over a card (breadcrumbs) can line up with it. */
+  --mint-section-card-inset: 0.75rem;
 
   /* Semantic colors */
   --mint-success: #10B981;
@@ -687,6 +644,7 @@ html.dark [data-palette="forest"] {
 /* Comfortable density (html[data-density], written by the settings store):
    the pre-v2 control heights and a wider gutter. */
 [data-density="comfortable"] {
+  --mint-section-card-inset: 0.875rem;
   --form-height-sm: 2rem;
   --form-height-md: 2.25rem;
   --form-height-lg: 3rem;
@@ -1464,7 +1422,7 @@ button, input, select, textarea {
 .mint-alert__icon--info    { background-color: var(--mint-info-bg);    color: var(--mint-info); }
 .mint-alert__icon--neutral { background-color: var(--bg-tertiary);     color: var(--text-secondary); }
 .mint-alert__icon--primary { background-color: var(--color-primary-soft); color: var(--color-primary); }
-.mint-alert__icon--cta     { background-color: var(--color-primary-soft); color: var(--color-cta-hover); }
+.mint-alert__icon--cta     { background-color: var(--color-primary-soft); color: var(--_ink-primary); }
 
 .mint-alert__content {
   flex: 1;
@@ -1749,6 +1707,10 @@ button, input, select, textarea {
   }
 }
 
+/* An AppTopBar in the layout renders the drawer button itself. */
+.mint-layout--responsive-sidebar:has(.mint-topbar__sidebar-toggle) .mint-layout__sidebar-toggle {
+  display: none;
+}
 /* AppSidebar Component Styles */
 
 .mint-sidebar {
@@ -1848,8 +1810,8 @@ button, input, select, textarea {
   min-width: 1.375rem;
   padding: 0.125rem 0.375rem;
   border-radius: var(--radius);
-  background: color-mix(in srgb, var(--color-cta) 14%, transparent);
-  color: var(--color-cta);
+  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
+  color: var(--color-primary);
   font-size: 0.6875rem;
   font-weight: 700;
   line-height: 1.1;
@@ -2120,7 +2082,7 @@ button, input, select, textarea {
   width: 11px;
   height: 11px;
   border-radius: 9999px;
-  background: white;
+  background: var(--control-knob);
   box-shadow: var(--shadow-sm);
   transition: left 180ms var(--mint-ease-out-quart);
 }
@@ -2220,7 +2182,7 @@ button, input, select, textarea {
   padding: 0 0.25rem;
   border-radius: var(--radius);
   background: var(--mint-sidebar-tone);
-  color: white;
+  color: var(--text-on-accent);
   font-size: 0.6875rem;
   font-weight: 700;
   line-height: 1rem;
@@ -2243,7 +2205,7 @@ button, input, select, textarea {
 .mint-sidebar__rail-badge--cta,
 .mint-sidebar__tag--cta,
 .mint-sidebar__group-action--cta {
-  --mint-sidebar-tone: var(--color-cta);
+  --mint-sidebar-tone: var(--color-primary);
 }
 
 .mint-sidebar__rail-badge--success,
@@ -2308,6 +2270,8 @@ button, input, select, textarea {
   padding: 0.75rem 1rem;
   background-color: var(--bg-secondary);
   box-sizing: border-box;
+  /* The two-row layout follows the bar's own width, not the window's. */
+  container: mint-topbar / inline-size;
 }
 
 /* Main container layout — equal side columns keep the centre nav on the bar
@@ -2368,11 +2332,62 @@ button, input, select, textarea {
   grid-column: 3;
   display: flex;
   align-items: center;
-  gap: 0.125rem;
+  gap: 0.375rem;
   min-width: 0;
   justify-content: flex-end;
 }
 
+/* Context group (standalone badge, run slot, onboarding, plugin buttons), then
+   the fixed tail: theme, settings and the host's account controls, always last. */
+.mint-topbar__context,
+.mint-topbar__tail {
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+  min-width: 0;
+}
+
+.mint-topbar__tail {
+  flex-shrink: 0;
+}
+
+/* The deprecated #actions slot keeps a fixed width, so its content cannot push the bar. */
+.mint-topbar__legacy-actions {
+  display: inline-flex;
+  align-items: center;
+  max-width: 16rem;
+  overflow: hidden;
+}
+
+/* Below 1024px of bar width: row 1 is identity + tail, row 2 the pills + context.
+   Row 1 never holds more than the identity, so the tail never moves. */
+@container mint-topbar (max-width: 1023.98px) {
+  .mint-topbar__container--stackable {
+    /* The pills keep their width while it fits; the context group takes the rest and its experiment
+       name truncates. On a bar narrower than the pills they overflow their cell, never the tail. */
+    grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto;
+    grid-template-areas:
+      "start start tail"
+      "center context context";
+    row-gap: 0.375rem;
+  }
+
+  .mint-topbar__container--stackable .mint-topbar__start { grid-area: start; }
+  .mint-topbar__container--stackable .mint-topbar__right { display: contents; }
+  .mint-topbar__container--stackable .mint-topbar__tail { grid-area: tail; }
+
+  .mint-topbar__container--stackable .mint-topbar__center {
+    grid-area: center;
+    justify-content: flex-start;
+  }
+
+  .mint-topbar__container--stackable .mint-topbar__context {
+    /* Stretch, not justify-self: end, which would size the group to its nowrap min-content. */
+    grid-area: context;
+    justify-content: flex-end;
+  }
+}
+
 /* Logo styles */
 .mint-topbar__logo {
   display: flex;
@@ -2466,17 +2481,20 @@ button, input, select, textarea {
 .mint-topbar__plugin-name,
 .mint-topbar__plugin-subtitle,
 .mint-topbar-title,
-.mint-topbar-subtitle {
+.mint-topbar-subtitle,
+.mint-topbar__title-only {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-/* The settings button has the IconButton ghost look: 32px, --radius-md,
-   16px icon, neutral ink, offset focus ring. */
-.mint-topbar__settings-btn {
+/* The settings button, plugin icon buttons and the drawer button have the
+   IconButton ghost look: 32px, --radius-md, 16px icon, neutral ink, offset focus ring. */
+.mint-topbar__settings-btn,
+.mint-topbar__icon-btn {
   position: relative;
   display: inline-flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
   width: 2rem;
@@ -2491,23 +2509,62 @@ button, input, select, textarea {
   transition: background-color var(--mint-transition), color var(--mint-transition);
 }
 
-.mint-topbar__settings-btn:hover {
+.mint-topbar__settings-btn:hover,
+.mint-topbar__icon-btn:hover:not(:disabled) {
   background: var(--bg-hover);
   color: var(--text-primary);
 }
 
-.mint-topbar__settings-btn:focus-visible {
+.mint-topbar__settings-btn:focus-visible,
+.mint-topbar__icon-btn:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring-offset);
 }
 
-.mint-topbar__settings-icon {
+.mint-topbar__icon-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.mint-topbar__settings-icon,
+.mint-topbar__icon-btn-icon {
   width: 1rem;
   height: 1rem;
 }
 
+/* Status dot of a plugin icon button (TopBarAction.dot). */
+.mint-topbar__icon-btn-dot {
+  position: absolute;
+  top: 0.3125rem;
+  right: 0.3125rem;
+  width: 0.4375rem;
+  height: 0.4375rem;
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px var(--bg-secondary);
+  background: var(--text-muted);
+}
+
+.mint-topbar__icon-btn-dot--primary,
+.mint-topbar__icon-btn-dot--cta { background: var(--color-primary); }
+.mint-topbar__icon-btn-dot--success { background: var(--mint-success); }
+.mint-topbar__icon-btn-dot--warning { background: var(--mint-warning); }
+.mint-topbar__icon-btn-dot--error { background: var(--mint-error); }
+.mint-topbar__icon-btn-dot--info { background: var(--mint-info); }
+
+/* The drawer button shows only while the AppLayout sidebar is a drawer. */
+.mint-topbar__sidebar-toggle {
+  display: none;
+}
+
+@media (max-width: 1023.98px) {
+  .mint-topbar__sidebar-toggle {
+    display: inline-flex;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
-  .mint-topbar__settings-btn {
+  .mint-topbar__settings-btn,
+  .mint-topbar__icon-btn {
     transition: none;
   }
 }
@@ -2689,6 +2746,32 @@ button, input, select, textarea {
   clip-path: inset(50%);
   white-space: nowrap;
 }
+
+/* ─── Labels or icons, by fit ───
+   Save and Jobs show their words while the content fits; AppTopBar.compact.ts
+   sets --compact when it does not (a name is cut, the experiment chip is
+   squeezed or a group overflows), and they keep only their icons. Plugin
+   buttons with an icon are always icon-only. Accessible names and tooltips
+   keep the words. */
+.mint-topbar--compact .mint-experiment-popover__save {
+  width: 32px;
+  padding: 0;
+  justify-content: center;
+}
+
+.mint-topbar--compact .mint-experiment-popover__save-label,
+.mint-topbar--compact .mint-topbar__job-label {
+  display: none;
+}
+
+.mint-topbar--compact .mint-topbar__job--idle {
+  padding-inline: 0.5rem;
+}
+
+/* One total width cap for the experiment chip, code and chevron included. */
+.mint-topbar .mint-experiment-popover__trigger {
+  max-width: 16rem;
+}
 /* BaseButton Component Styles */
 
 .mint-button {
@@ -2759,17 +2842,17 @@ button, input, select, textarea {
 }
 
 .mint-button--cta {
-  background-color: var(--color-cta);
+  background-color: var(--color-primary);
   color: var(--text-on-accent);
 }
 
 .mint-button--cta:hover:not(.mint-button--disabled) {
-  background-color: var(--color-cta-hover);
+  background-color: var(--color-primary-hover);
 }
 
 .mint-button--danger {
   background-color: var(--mint-error);
-  color: white;
+  color: var(--text-on-danger);
 }
 
 .mint-button--danger:hover:not(.mint-button--disabled) {
@@ -3006,7 +3089,7 @@ button, input, select, textarea {
 .mint-checkbox__native:disabled + .mint-checkbox__box.mint-checkbox__box--indeterminate {
   background-color: var(--text-muted);
   border-color: var(--text-muted);
-  color: #FFFFFF;
+  color: var(--control-knob);
 }
 
 .mint-checkbox__box--sm {
@@ -3235,7 +3318,7 @@ button, input, select, textarea {
 
 .mint-collapsible-card__badge--cta,
 .mint-collapsible-card__action--cta {
-  --mint-sidebar-badge-color: var(--color-cta);
+  --mint-sidebar-badge-color: var(--color-primary);
 }
 
 .mint-collapsible-card__badge--success,
@@ -3884,9 +3967,9 @@ button, input, select, textarea {
   font-size: 0.6875rem;
   font-weight: 700;
   font-family: var(--font-mono);
-  color: var(--badge-color);
-  background-color: color-mix(in srgb, var(--badge-color) 10%, transparent);
-  border: 1px solid color-mix(in srgb, var(--badge-color) 20%, transparent);
+  color: var(--text-secondary);
+  background-color: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
 }
 
 .mint-file-uploader__file-meta {
@@ -4158,17 +4241,17 @@ button, input, select, textarea {
 }
 
 .mint-icon-button--cta {
-  background-color: var(--color-cta);
+  background-color: var(--color-primary);
   color: var(--text-on-accent);
 }
 
 .mint-icon-button--cta:hover:not(.mint-icon-button--disabled) {
-  background-color: var(--color-cta-hover);
+  background-color: var(--color-primary-hover);
 }
 
 .mint-icon-button--danger {
   background-color: var(--mint-error);
-  color: white;
+  color: var(--text-on-danger);
 }
 
 .mint-icon-button--danger:hover:not(.mint-icon-button--disabled) {
@@ -5776,6 +5859,44 @@ html.dark {
   transition: background-color var(--mint-transition), border-color var(--mint-transition);
 }
 
+/* The close button sits inside the chip border, so the chip keeps room for it. */
+.mint-onboarding-help__chip-group {
+  position: relative;
+  display: inline-flex;
+}
+
+.mint-onboarding-help__chip-group .mint-onboarding-help__chip {
+  padding-right: 2rem;
+}
+
+.mint-onboarding-help__chip-close {
+  position: absolute;
+  top: 50%;
+  right: 0.25rem;
+  display: grid;
+  place-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  transform: translateY(-50%);
+  transition: background-color var(--mint-transition), color var(--mint-transition);
+}
+
+.mint-onboarding-help__chip-close:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.mint-onboarding-help__chip-close:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-offset);
+}
+
 .mint-onboarding-help__chip:hover {
   background: var(--bg-hover);
 }
@@ -6097,6 +6218,7 @@ html.dark {
 
 @media (prefers-reduced-motion: reduce) {
   .mint-onboarding-help__chip,
+  .mint-onboarding-help__chip-close,
   .mint-onboarding-help__bar > span,
   .mint-onboarding-help__progress > span,
   .mint-onboarding__hole {
@@ -6862,6 +6984,11 @@ html.dark {
   min-height: 0;
 }
 
+/* A collapsed fill card gives its track back to its siblings. */
+.mint-section-card--fill.mint-section-card--collapsed {
+  flex: none;
+}
+
 .mint-section-card--fill .mint-section-card__body {
   flex: 1;
   min-height: 0;
@@ -6876,7 +7003,7 @@ html.dark {
   min-height: 2.5rem;
   /* 4px block padding: a 28px header control plus padding plus the 1px rule
      stays inside the 40px strip (6px made it 41px). */
-  padding: 0.25rem 0.625rem 0.25rem 0.75rem;
+  padding: 0.25rem 0.625rem 0.25rem var(--mint-section-card-inset);
   border-bottom: 1px solid var(--border-color);
   flex-shrink: 0;
 }
@@ -6885,6 +7012,45 @@ html.dark {
   border-bottom-color: var(--border-light);
 }
 
+/* A collapsed card is its header alone: no rule under it. */
+.mint-section-card__header--collapsed {
+  border-bottom-color: transparent;
+}
+
+.mint-section-card__toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mint-section-card-gap);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.mint-section-card__toggle:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-offset);
+  border-radius: var(--radius-sm);
+}
+
+.mint-section-card__chevron {
+  width: 0.875rem;
+  height: 0.875rem;
+  color: var(--text-muted);
+  transition: transform var(--mint-transition);
+}
+
+.mint-section-card__toggle[aria-expanded="false"] .mint-section-card__chevron {
+  transform: rotate(-90deg);
+}
+
+.mint-section-card__toggle:hover .mint-section-card__chevron {
+  color: var(--text-secondary);
+}
+
 /* Muted icon, no tinted chip: every accent renders the same. */
 .mint-section-card__icon-chip {
   display: inline-flex;
@@ -6932,7 +7098,8 @@ html.dark {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.5rem 1rem;
+  /* Text starts on the card inset; controls end where the header's do. */
+  padding: 0.5rem 0.625rem 0.5rem var(--mint-section-card-inset);
   border-top: 1px solid var(--border-color);
   background: var(--bg-primary);
   font-size: 0.75rem;
@@ -6953,7 +7120,7 @@ html.dark {
   display: flex;
   align-items: center;
   gap: var(--mint-section-card-gap);
-  padding: 0.375rem 0.75rem;
+  padding: 0.375rem var(--mint-section-card-inset);
   background: var(--bg-secondary);
   transition: background-color var(--mint-transition);
 }
@@ -6988,14 +7155,28 @@ button.mint-section-card__row:hover {
 /* Comfortable density gives the header and rows back their height. */
 [data-density="comfortable"] .mint-section-card__header {
   min-height: 2.75rem;
-  padding: 0.25rem 0.75rem 0.25rem 0.875rem;
+  padding-right: 0.75rem;
+}
+
+[data-density="comfortable"] .mint-section-card__footer {
+  padding-right: 0.75rem;
 }
 
 [data-density="comfortable"] .mint-section-card__row {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  /* Same left inset as the header, so row content lines up under the header. */
-  padding-left: 0.875rem;
+}
+
+/* A table that is the card body's own child starts and ends on the card's text
+   inset, so its first column lines up under the header title. A table inside a
+   padded wrapper keeps its padding, and the checkbox and actions columns stay
+   centred controls. The table's size padding uses !important, so this must too. */
+.mint-section-card__body > .mint-dataframe :is(.mint-dataframe__th, .mint-dataframe__td):first-child:not(.mint-dataframe__th--checkbox, .mint-dataframe__td--checkbox) {
+  padding-left: var(--mint-section-card-inset) !important;
+}
+
+.mint-section-card__body > .mint-dataframe :is(.mint-dataframe__th, .mint-dataframe__td):last-child:not(.mint-dataframe__th--actions, .mint-dataframe__td--actions) {
+  padding-right: var(--mint-section-card-inset) !important;
 }
 
 /* SecretInput — plugin secret settings field with a set / not set / environment status.
@@ -7307,7 +7488,7 @@ button.mint-section-card__row:hover {
   box-sizing: border-box;
   transform: translateX(-50%) translateY(-50%);
   border-radius: 9999px;
-  background-color: #FFFFFF;
+  background-color: var(--control-knob);
   border: 1px solid color-mix(in srgb, var(--text-secondary) 40%, transparent);
   box-shadow: var(--shadow-sm);
   pointer-events: none;
@@ -8118,7 +8299,7 @@ html.dark .mint-toast__item {
   top: 50%;
   left: 2px;
   border-radius: 9999px;
-  background-color: #FFFFFF;
+  background-color: var(--control-knob);
   box-shadow: var(--shadow-sm);
   transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1);
   pointer-events: none;
@@ -11123,7 +11304,7 @@ html.dark .sg-summary code { background: rgba(255, 255, 255, 0.1); }
    (soft-tint background, dot, outline border); `--mint-pill-ink` the text. A
    `color` prop sets `--mint-pill-tone` inline. */
 .mint-pill--primary { --mint-pill-tone: var(--color-primary); --mint-pill-ink: var(--color-primary-hover); }
-.mint-pill--cta     { --mint-pill-tone: var(--color-cta);     --mint-pill-ink: var(--color-cta-hover); }
+.mint-pill--cta     { --mint-pill-tone: var(--color-primary);     --mint-pill-ink: var(--color-primary-hover); }
 .mint-pill--success { --mint-pill-tone: var(--mint-success);  --mint-pill-ink: var(--mint-success-hover); }
 .mint-pill--warning { --mint-pill-tone: var(--mint-warning);  --mint-pill-ink: var(--mint-warning-text); }
 .mint-pill--error   { --mint-pill-tone: var(--mint-error);    --mint-pill-ink: var(--mint-error-hover); }
@@ -12247,7 +12428,7 @@ html.dark .mint-dataframe__loading {
 
 /* Tones */
 .mint-spinner--primary { color: var(--color-primary); }
-.mint-spinner--cta     { color: var(--color-cta); }
+.mint-spinner--cta     { color: var(--color-primary); }
 .mint-spinner--success { color: var(--mint-success); }
 .mint-spinner--warning { color: var(--mint-warning); }
 .mint-spinner--error   { color: var(--mint-error); }
@@ -12404,7 +12585,7 @@ html.dark .mint-dataframe__loading {
 .mint-progress__bar--success { background-color: var(--mint-success); }
 .mint-progress__bar--warning { background-color: var(--mint-warning); }
 .mint-progress__bar--error   { background-color: var(--mint-error); }
-.mint-progress__bar--cta     { background-color: var(--color-cta); }
+.mint-progress__bar--cta     { background-color: var(--color-primary); }
 .mint-progress__bar--neutral { background-color: var(--text-muted); }
 .mint-progress__bar--info    { background-color: var(--color-primary); } /* 6b: progress fill is always primary; --mint-info is for the running dot */
 
@@ -12500,19 +12681,19 @@ html.dark .mint-dataframe__loading {
 .mint-avatar__status--offline { background-color: var(--text-muted); }
 /* PresenceAvatars: an avatar stack that opens a list of who is here.
  * The editing cue is a ring plus a pencil badge, so it does not depend on
- * colour only. Light mode uses --color-cta-hover (3:1 on the card), dark
- * mode --color-cta. --mint-presence-surface is the colour the avatars are
+ * colour only. Light mode uses --color-primary-hover (3:1 on the card), dark
+ * mode --color-primary. --mint-presence-surface is the colour the avatars are
  * cut out of; set it when the stack sits on another surface. */
 
 .mint-presence {
-  --mint-presence-editing: var(--color-cta-hover);
+  --mint-presence-editing: var(--color-primary-hover);
   --mint-presence-surface: var(--bg-secondary);
   position: relative;
   display: inline-flex;
 }
 
 :where(html.dark) .mint-presence {
-  --mint-presence-editing: var(--color-cta);
+  --mint-presence-editing: var(--color-primary);
 }
 
 .mint-presence__trigger {
@@ -13050,8 +13231,8 @@ html.dark .mint-dataframe__loading {
 }
 
 .mint-confirm__icon--cta {
-  background-color: color-mix(in srgb, var(--color-cta) 12%, transparent);
-  color: var(--color-cta);
+  background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+  color: var(--color-primary);
 }
 
 .mint-confirm__icon--neutral {
@@ -14746,7 +14927,7 @@ html.dark .mint-stale-banner {
 .mint-sequence-input__problem--error .mint-sequence-input__problem-shape { fill: var(--mint-error); }
 
 .mint-sequence-input__problem-mark {
-  stroke: white;
+  stroke: var(--text-on-danger);
   stroke-width: 1.6;
   stroke-linecap: round;
 }
@@ -18256,10 +18437,10 @@ button.mint-unit-input__unit:focus-visible {
 .mint-plugin-icon--topbar { width: 2.25rem; height: 2.25rem; }
 .mint-plugin-icon--lg { width: 3rem;   height: 3rem;   }
 
-/* Tones (deprecated with the tone/color props, removed in 1.5): the v2 tile no longer reads the variable. */
+/* Tones (deprecated with the tone/color props, removed in 2.0): the v2 tile no longer reads the variable. */
 .mint-plugin-icon--neutral { --mint-plugin-icon-tone: var(--text-secondary); }
 .mint-plugin-icon--primary { --mint-plugin-icon-tone: var(--color-primary); }
-.mint-plugin-icon--cta     { --mint-plugin-icon-tone: var(--color-cta); }
+.mint-plugin-icon--cta     { --mint-plugin-icon-tone: var(--color-primary); }
 .mint-plugin-icon--success { --mint-plugin-icon-tone: var(--mint-success); }
 .mint-plugin-icon--warning { --mint-plugin-icon-tone: var(--mint-warning); }
 .mint-plugin-icon--error   { --mint-plugin-icon-tone: var(--mint-error); }