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

package/dist/shell.js

@@ -1,8 +1,8 @@
 import { i as useEventListener, r as useFocusTrap } from "./useDropdownState-uFIz6Yv8.js";
-import { E as useMenuKeyboard, H as useListSelection, R as useRovingFocus, U as useSelectionLimit } from "./records-CWRztE5M.js";
-import { B as compareSortValues, V as useSortedItems, i as useReorderAnnouncer, n as reorderList, r as useListReorder, t as REORDER_ANNOUNCER_STYLE } from "./useListReorder-QqJc1dpX.js";
-import { C as usePluginWorkspace, S as AppLayout_default, _ as provideOnboarding, f as AppTopBar_default, g as defineOnboarding, h as ONBOARDING_KEY, m as ANCHOR_WAIT_MS, t as AppSidebar_default, v as useOnboarding } from "./AppSidebar-BDrd7Kwn.js";
+import { E as useMenuKeyboard, H as useListSelection, R as useRovingFocus, U as useSelectionLimit } from "./records-BAymyHAn.js";
+import { B as compareSortValues, V as useSortedItems, i as useReorderAnnouncer, n as reorderList, r as useListReorder, t as REORDER_ANNOUNCER_STYLE } from "./useListReorder-W1bzK_bo.js";
+import { C as usePluginWorkspace, S as AppLayout_default, _ as provideOnboarding, f as AppTopBar_default, g as defineOnboarding, h as ONBOARDING_KEY, m as ANCHOR_WAIT_MS, t as AppSidebar_default, v as useOnboarding } from "./AppSidebar-FxlF5_dI.js";
 import { t as useDebouncedWatch } from "./useDebouncedWatch-BPwyl6eS.js";
 import { t as useExpansionSet } from "./useExpansionSet-CvoNMZJi.js";
-import { a as useManualLayoutResize, i as resizedVerticalSplitPercent, n as resizedLeadingPanelWidth, o as LayoutResizeHandle_default, r as resizedTrailingPanelWidth } from "./shell-Ch7cJnjo.js";
+import { a as useManualLayoutResize, i as resizedVerticalSplitPercent, n as resizedLeadingPanelWidth, o as LayoutResizeHandle_default, r as resizedTrailingPanelWidth } from "./shell-CWZi97nW.js";
 export { ANCHOR_WAIT_MS, AppLayout_default as AppLayout, AppSidebar_default as AppSidebar, AppTopBar_default as AppTopBar, LayoutResizeHandle_default as LayoutResizeHandle, ONBOARDING_KEY, REORDER_ANNOUNCER_STYLE, compareSortValues, defineOnboarding, provideOnboarding, reorderList, resizedLeadingPanelWidth, resizedTrailingPanelWidth, resizedVerticalSplitPercent, useDebouncedWatch, useEventListener, useExpansionSet, useFocusTrap, useListReorder, useListSelection, useManualLayoutResize, useMenuKeyboard, useOnboarding, usePluginWorkspace, useReorderAnnouncer, useRovingFocus, useSelectionLimit, useSortedItems };

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-90271c34] {
   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-90271c34] {
   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-90271c34] {
+  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-90271c34] {
+  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;
@@ -1848,8 +1806,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 +2078,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 +2178,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 +2201,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,
@@ -2759,17 +2717,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 +2964,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 +3193,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 +3842,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 +4116,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 +5734,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 +6093,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 +6859,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 +6878,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 +6887,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 +6973,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 +6995,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 +7030,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 +7363,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 +8174,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 +11179,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 +12303,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 +12460,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 +12556,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 +13106,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 +14802,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 +18312,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); }

package/dist/styles.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/types/index.d.ts

@@ -4,7 +4,7 @@ export type { AnalysisArtifactStatus, AnalysisArtifactStatusFilter, AnalysisArti
 export { ANALYSIS_FILE_ARTIFACT_SCHEMA } from './analysisArtifactTypes';
 export type { FileBrowserLocation, FileBrowserSortKey, FileDirectoryListing, FileDirectoryTree, FileEntry, FileEntryKind, FilePathCrumb, FileSearchResult, FileSelection, ServerMount, } from './fileBrowserTypes';
 export type { JobListPayload, JobProgress, JobSnapshotPayload, JobState, JobStateInput, JobStatus, JobStreamData, TopBarJob, } from './jobs';
-export type { InjectionMetricSeries, InstrumentAlert, InstrumentAlertLevel, InstrumentAlertList, InstrumentBadgeState, InstrumentLiveProgress, InstrumentLiveStatus, InstrumentState, InstrumentStatus, InstrumentStatusReporter, SampleInfo, SampleInfo as InstrumentSampleInfo, SequenceProgress, StatusPanel, } from './instrument';
+export type { InjectionMetricSeries, InstrumentAlert, InstrumentAlertLevel, InstrumentAlertList, InstrumentBadgeState, InstrumentLiveProgress, InstrumentLiveStatus, InstrumentState, InstrumentStatusReporter, SampleInfo, SampleInfo as InstrumentSampleInfo, SequenceProgress, StatusPanel, } from './instrument';
 export type { AccessAudience, AccessAudienceInput, AccessPolicy, AccessControlled, PermissionUser, RoleInfo, } from '../permissions';
 export type { FormFieldType, FieldCondition, FieldValidation, FormFieldSchema, FormOptionInput, FormSectionSchema, FormStepSchema, FormSchema, FieldEnhancement, FormEnhancements, UseFormBuilderReturn, } from './form-builder';
 export type { OutlierAction, InputMode, OutlierInfo, ColumnInfo, MetadataRow, AutoGroupResult, ParsedCsvData, } from './auto-group';