@morscherlab/mint-sdk 1.3.0-beta.1 → 1.3.0-beta.11

package/src/styles/components/app-page-selector.css

@@ -1,7 +1,7 @@
 /* AppTopBar page selector — left-side route/page dropdown.
-   Trigger speaks the field language (5a): 32px, hover changes the background
-   only, open = field focus, inline 12px chevron. Menu = .mint-popover +
-   .mint-menu-item (2d); __menu / __item stay as aliases. */
+   Trigger speaks the field language (5a): 36px (the identity tile height), hover changes the background
+   only, open = field focus, inline 12px chevron. The menu keeps the 1.2 panel
+   (own card, tinted active row) rather than .mint-popover + .mint-menu-item. */
 
 .mint-page-selector {
   position: relative;
@@ -13,8 +13,8 @@
   align-items: center;
   gap: 0.5rem;
   width: 100%;
-  height: 2rem;
-  padding: 0 0.5rem 0 0.3125rem;
+  height: 2.25rem;
+  padding: 0 0.5rem 0 0.4375rem;
   border: 1px solid var(--border-color);
   background: var(--bg-card);
   color: var(--text-primary);
@@ -101,44 +101,88 @@
 
 .mint-page-selector__menu {
   position: absolute;
-  top: calc(100% + 0.25rem);
+  top: calc(100% + 0.375rem);
   left: 0;
   width: 16.25rem;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  padding: 0.375rem;
   z-index: 50;
 }
 
 .mint-page-selector__menu-title {
-  padding: 0.25rem 0.5rem 0.375rem;
+  padding: 0.375rem 0.625rem 0.5rem;
   font-size: 0.75rem;
   font-weight: 500;
   color: var(--text-secondary);
 }
 
+.mint-page-selector__item {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+  padding: 0.5rem 0.625rem;
+  border: 0;
+  background: transparent;
+  border-radius: 0.4375rem;
+  color: var(--text-primary);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  font-family: inherit;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color var(--mint-transition);
+}
+
+.mint-page-selector__item:hover:not(.mint-page-selector__item--disabled) {
+  background: var(--bg-hover);
+}
+
+.mint-page-selector__item--active {
+  background: var(--bg-tertiary);
+  font-weight: 600;
+}
+
+.mint-page-selector__item--disabled {
+  opacity: var(--mint-disabled-opacity);
+  cursor: not-allowed;
+}
+
 .mint-page-selector__item-icon {
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: var(--radius-sm);
+  width: 1.375rem;
+  height: 1.375rem;
+  border-radius: 0.3125rem;
   background: var(--bg-tertiary);
-  color: var(--text-secondary-strong);
+  color: var(--text-secondary);
   display: grid;
   place-items: center;
   flex-shrink: 0;
 }
 
-.mint-page-selector__item-icon--metadata {
+.mint-page-selector__item--active .mint-page-selector__item-icon {
+  background: var(--color-primary-soft);
+  color: var(--color-primary);
+}
+
+.mint-page-selector__item-icon--metadata,
+.mint-page-selector__item--active .mint-page-selector__item-icon--metadata {
   background: transparent;
   color: inherit;
 }
 
 .mint-page-selector__item-icon svg {
-  width: 0.75rem;
-  height: 0.75rem;
+  width: 0.8125rem;
+  height: 0.8125rem;
 }
 
 .mint-page-selector__metadata-icon.mint-plugin-icon--sm {
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: var(--radius-sm);
+  width: 1.375rem;
+  height: 1.375rem;
+  border-radius: 0.3125rem;
 }
 
 .mint-page-selector__item-label {

package/src/styles/components/app-pill-nav.css

@@ -21,7 +21,7 @@
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
-  height: 1.625rem;
+  height: 1.75rem;
   border: 0;
   padding: 0 0.875rem;
   border-radius: 9999px;

package/src/styles/components/app-top-bar.css

@@ -9,7 +9,7 @@
 .mint-topbar {
   display: block;
   width: 100%;
-  padding: 0.625rem 0.75rem;
+  padding: 0.75rem 1rem;
   background-color: var(--bg-secondary);
   box-sizing: border-box;
 }
@@ -19,7 +19,7 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  min-height: 2rem;
+  min-height: 2.375rem;
   position: relative;
 }
 
@@ -31,35 +31,28 @@
 }
 
 .mint-topbar__identity {
-  width: 2rem;
-  height: 2rem;
+  width: 2.25rem;
+  height: 2.25rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }
 
-/* The 36px plugin tile would push the bar past 52px; the bar uses the 32px control height. */
-.mint-topbar__identity .mint-plugin-icon--topbar {
-  width: 2rem;
-  height: 2rem;
+/* Slotted logos sized above 36px shrink to fit instead of stretching the tile. */
+.mint-topbar__identity > * {
+  max-width: 100%;
+  max-height: 100%;
 }
 
-/* Integrated: the tile joins the static identity as a 20px mark (icon + name + version). */
-.mint-topbar__brand:has(+ .mint-topbar__plugin-identity) .mint-topbar__identity {
-  width: auto;
-  padding-left: 0.125rem;
+/* Left and right fields share the 36px identity tile height. */
+.mint-topbar .mint-experiment-popover__trigger,
+.mint-topbar .mint-experiment-popover__save-trigger {
+  height: 2.25rem;
 }
 
-.mint-topbar__brand:has(+ .mint-topbar__plugin-identity) .mint-plugin-icon--topbar {
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: var(--radius-sm);
-}
-
-.mint-topbar__brand:has(+ .mint-topbar__plugin-identity) .mint-plugin-icon--topbar :is(.mint-plugin-icon__svg, .mint-plugin-icon__img) {
-  width: 0.75rem;
-  height: 0.75rem;
+.mint-topbar .mint-experiment-popover__save-trigger {
+  width: 2.25rem;
 }
 
 /* Centered section — absolute so asymmetric left/right weight never shifts the
@@ -98,8 +91,8 @@
 }
 
 .mint-topbar__logo-icon {
-  width: 2rem;
-  height: 2rem;
+  width: 2.25rem;
+  height: 2.25rem;
   background-color: var(--color-primary);
   border-radius: var(--radius-md);
   display: flex;
@@ -118,7 +111,7 @@
   color: var(--text-primary);
 }
 
-/* Static plugin identity: name + mono version, not a control (5a) */
+/* Static plugin identity: name only, not a control (5a) */
 .mint-topbar__plugin-identity {
   display: inline-flex;
   align-items: baseline;
@@ -136,19 +129,6 @@
   text-overflow: ellipsis;
 }
 
-.mint-topbar__plugin-version {
-  font-family: var(--font-mono);
-  font-size: 0.6875rem;
-  color: var(--text-secondary);
-}
-
-.mint-topbar__divider {
-  width: 1px;
-  height: 1.25rem;
-  flex-shrink: 0;
-  background-color: var(--border-color);
-}
-
 /* Variant: card - inline card with margins and rounded corners */
 .mint-topbar--card {
   width: calc(100% - 2rem);
@@ -175,7 +155,7 @@
   opacity: 0.8;
 }
 
-/* Title + subtitle stay inside the 32px control row (5a: 52px bar). */
+/* Title + subtitle stay inside the 36px control row. */
 .mint-topbar-title-group {
   display: flex;
   flex-direction: column;

package/src/styles/components/empty-state.css

@@ -115,8 +115,9 @@
   color: var(--text-muted);
 }
 
-/* Action */
-.mint-empty-state--illustrated .mint-empty-state__action {
+/* Action — slotted content sits in a block so a child's own larger top margin collapses into this one. */
+.mint-empty-state--illustrated .mint-empty-state__action,
+.mint-empty-state--illustrated .mint-empty-state__content {
   margin-top: 0.625rem;
 }
 

package/src/styles/components/experiment-selector-modal.css

@@ -5,6 +5,7 @@
   align-items: center;
   gap: 0.5rem;
   flex-wrap: wrap;
+  padding: 0 1.25rem;
 }
 
 .mint-experiment-selector__filter-select {
@@ -65,14 +66,6 @@ html.dark .mint-experiment-selector__filters-toggle--active {
   flex-shrink: 0;
 }
 
-/* Advanced filters row */
-.mint-experiment-selector__filters-advanced {
-  padding: 0.625rem;
-  border: 1px solid var(--border-light);
-  border-radius: var(--radius-md);
-  background-color: color-mix(in srgb, var(--bg-secondary) 72%, transparent);
-}
-
 /* Group toggle checkbox label */
 .mint-experiment-selector__group-toggle {
   display: inline-flex;
@@ -103,7 +96,8 @@ html.dark .mint-experiment-selector__filters-toggle--active {
 .mint-experiment-selector__footer {
   display: flex;
   justify-content: flex-start;
-  padding-top: 0.25rem;
+  padding: 0.5rem 1.25rem 0.75rem;
+  border-top: 1px solid var(--border-light);
 }
 
 .mint-experiment-selector__clear-btn {

package/src/styles/components/file-picker.css

@@ -106,6 +106,7 @@
   white-space: nowrap;
 }
 .mint-picker__scope,
+.mint-picker__sort,
 .mint-picker__link {
   padding: 2px 6px;
   border: 0;
@@ -116,10 +117,20 @@
   cursor: pointer;
   transition: background-color 150ms ease;
 }
-.mint-picker__scope {
+.mint-picker__scope,
+.mint-picker__sort {
   flex-shrink: 0;
   color: var(--text-secondary-strong);
 }
+.mint-picker__sort {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+.mint-picker__sort svg {
+  width: 12px;
+  height: 12px;
+}
 .mint-picker__link {
   color: var(--_ink-primary);
 }
@@ -138,10 +149,13 @@
   cursor: not-allowed;
 }
 .mint-picker__scope:hover,
+.mint-picker__sort:hover,
+.mint-picker__sort[aria-expanded='true'],
 .mint-picker__link:hover {
   background: var(--bg-hover);
 }
 .mint-picker__scope:focus-visible,
+.mint-picker__sort:focus-visible,
 .mint-picker__link:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring-offset);
@@ -185,6 +199,14 @@
 .mint-picker__list-head > span:nth-child(n + 3) {
   text-align: right;
 }
+.mint-picker__truncated {
+  margin: 0;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--border-light);
+  background: var(--bg-secondary);
+  font-size: 12px;
+  color: var(--text-secondary);
+}
 .mint-picker__row {
   box-sizing: border-box;
   height: 34px;

package/src/styles/components/file-uploader.css

@@ -14,113 +14,80 @@
 
 .mint-file-uploader__dropzone {
   position: relative;
-  border: 1px dashed var(--_control-border-strong);
+  border: 2px dashed var(--border-color);
   border-radius: var(--radius-lg);
   cursor: pointer;
   background: var(--bg-secondary);
   transition: border-color 0.15s ease, background-color 0.15s ease;
 }
 
-/* 2g: hover only changes the surface; the border change is reserved for dragover. */
 .mint-file-uploader__dropzone:hover {
-  background: var(--bg-hover);
+  border-color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 3%, var(--bg-secondary));
 }
 
 .mint-file-uploader__dropzone:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring-offset);
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
 }
 
-.mint-file-uploader__dropzone--dragover,
-.mint-file-uploader__dropzone--dragover:hover {
-  border: 1.5px solid var(--color-primary);
-  background: var(--color-primary-soft);
+.mint-file-uploader__dropzone--dragover {
+  border-color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 5%, var(--bg-secondary));
 }
 
-.mint-file-uploader__dropzone--disabled,
-.mint-file-uploader__dropzone--disabled:hover {
-  background: var(--bg-tertiary);
+.mint-file-uploader__dropzone--disabled {
   opacity: var(--mint-disabled-opacity);
   cursor: not-allowed;
 }
 
 .mint-file-uploader__dropzone--sm {
-  padding: 0.75rem;
+  padding: 1.25rem;
 }
 
 .mint-file-uploader__dropzone--md {
-  padding: 1.125rem;
+  padding: 1.5rem;
 }
 
 .mint-file-uploader__dropzone--lg {
-  padding: 1.5rem;
+  padding: 2rem;
 }
 
 /* ==========================================================================
-   Content area — compact row: icon tile + prompt + accepted formats
+   Content area
    ========================================================================== */
 
 .mint-file-uploader__content {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 0.75rem;
+  text-align: center;
 }
 
 .mint-file-uploader__input {
   display: none;
 }
 
-.mint-file-uploader__icon-tile {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+.mint-file-uploader__icon {
   width: 2rem;
   height: 2rem;
-  border-radius: var(--radius-md);
-  background: var(--bg-tertiary);
-  color: var(--text-secondary);
-  transition: background-color 0.15s ease, color 0.15s ease;
-}
-
-.mint-file-uploader__dropzone--dragover .mint-file-uploader__icon-tile {
-  background: var(--color-primary);
-  color: white;
-}
-
-.mint-file-uploader__icon {
-  width: 1rem;
-  height: 1rem;
-  stroke-width: 1.8;
+  color: var(--text-muted);
+  margin-bottom: 0.5rem;
 }
 
-.mint-file-uploader__copy {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-  min-width: 0;
+.mint-file-uploader__dropzone:hover .mint-file-uploader__icon,
+.mint-file-uploader__dropzone--dragover .mint-file-uploader__icon {
+  color: var(--color-primary);
 }
 
 .mint-file-uploader__text {
-  color: var(--text-primary);
+  color: var(--text-secondary);
   font-size: 0.8125rem;
   font-weight: 500;
   margin: 0;
   padding: 0;
 }
 
-.mint-file-uploader__dropzone--dragover .mint-file-uploader__text {
-  color: var(--_ink-primary);
-}
-
-.mint-file-uploader__formats {
-  color: var(--text-secondary);
-  font-family: var(--font-mono);
-  font-size: 0.6875rem;
-  margin: 0;
-  padding: 0;
-}
-
 /* ==========================================================================
    Actions slot
    ========================================================================== */

package/src/styles/components/resource-picker-list.css

@@ -1,4 +1,16 @@
-/* ResourcePickerList (8b): shared list for ExperimentSelectorModal and ArtifactSelectorModal. */
+/* ResourcePickerList: shared list for ExperimentSelectorModal and ArtifactSelectorModal.
+   No frame of its own (the modal is the card); rows are inset and rounded, groups are
+   pinned bars. */
+
+/* The modal is the only card: the list runs edge to edge, and the toolbar, group
+   bars and row text keep the modal's 1.25rem gutter themselves. */
+.mint-modal__body:has(> .mint-resource-picker) {
+  padding: 0;
+}
+.mint-modal__container:has(.mint-resource-picker) .mint-modal__header {
+  border-bottom: none;
+  padding-bottom: 0.75rem;
+}
 
 .mint-resource-picker {
   display: flex;
@@ -11,6 +23,7 @@
   align-items: center;
   flex-wrap: wrap;
   gap: 0.5rem;
+  padding: 0 1.25rem;
 }
 .mint-resource-picker__search {
   flex: 1;
@@ -20,12 +33,10 @@
 .mint-resource-picker__frame {
   display: flex;
   flex-direction: column;
-  overflow: hidden;
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-md);
-  background-color: var(--bg-card);
+  border-top: 1px solid var(--border-color);
 }
 .mint-resource-picker__list {
+  padding-bottom: 0.5rem;
   max-height: min(28rem, calc(100vh - 16rem));
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -38,14 +49,17 @@
   gap: 0.5rem;
   flex-shrink: 0;
   width: 100%;
+  position: sticky;
+  top: 0;
+  z-index: 1;
   height: 30px;
-  padding: 0 12px;
+  padding: 0 1.25rem;
   border: 0;
   border-bottom: 1px solid var(--border-light);
   background-color: var(--bg-primary);
   font-family: inherit;
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 600;
   color: var(--text-secondary);
   text-align: left;
   cursor: pointer;
@@ -77,24 +91,25 @@
 .mint-resource-picker__group-count {
   font: 11px var(--font-mono);
   font-variant-numeric: tabular-nums;
+  color: var(--text-muted);
 }
 
 .mint-resource-picker__row {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto 14px;
+  grid-template-columns: minmax(0, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: auto;
   align-items: center;
-  gap: 10px;
+  gap: 12px;
   box-sizing: border-box;
   flex-shrink: 0;
-  min-height: 44px;
-  padding: 5px 12px;
-  border-bottom: 1px solid var(--border-light);
+  min-height: 56px;
+  margin: 2px 0.5rem;
+  padding: 10px 12px;
+  border-radius: var(--radius-md);
   cursor: pointer;
   transition: background-color 150ms ease;
 }
-.mint-resource-picker__row:last-child {
-  border-bottom: 0;
-}
 .mint-resource-picker__row:hover {
   background-color: var(--bg-hover);
 }
@@ -110,7 +125,7 @@
 .mint-resource-picker__text {
   display: flex;
   flex-direction: column;
-  gap: 1px;
+  gap: 4px;
   min-width: 0;
   line-height: 1.25;
 }
@@ -118,18 +133,49 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 13px;
-  font-weight: 500;
+  font-size: 15px;
+  font-weight: 600;
   color: var(--text-primary);
 }
 .mint-resource-picker__row--selected .mint-resource-picker__title {
   color: var(--_ink-primary);
 }
-.mint-resource-picker__code,
+.mint-resource-picker__code {
+  margin-right: 0.5rem;
+}
+.mint-resource-picker__aside {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  line-height: 1.25;
+  white-space: nowrap;
+}
 .mint-resource-picker__date {
-  font-family: var(--font-mono);
+  font: 12px var(--font-mono);
   font-variant-numeric: tabular-nums;
+  color: var(--text-muted);
+}
+.mint-resource-picker__status {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-secondary);
 }
+.mint-resource-picker__status::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: currentColor;
+}
+.mint-resource-picker__status--primary { color: var(--_ink-primary); }
+.mint-resource-picker__status--success { color: var(--mint-success); }
+.mint-resource-picker__status--warning { color: var(--mint-warning); }
+.mint-resource-picker__status--error { color: var(--mint-error); }
+.mint-resource-picker__status--info { color: var(--mint-info); }
 .mint-resource-picker__meta {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -142,29 +188,17 @@
   align-items: center;
   gap: 4px;
 }
-.mint-resource-picker__check-slot {
-  display: flex;
-  width: 14px;
-}
-.mint-resource-picker__check {
-  width: 14px;
-  height: 14px;
-  color: var(--color-primary);
-}
 
 .mint-resource-picker__skeleton-row {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: 6px;
-  min-height: 44px;
-  padding: 5px 12px;
-  border-bottom: 1px solid var(--border-light);
-}
-.mint-resource-picker__skeleton-row:last-child {
-  border-bottom: 0;
+  gap: 8px;
+  min-height: 56px;
+  padding: 10px 1.25rem;
 }
 .mint-resource-picker__error {
+  margin: 0 1.25rem 1.25rem;
   padding: 0.75rem;
   border: 1px solid var(--mint-error-border);
   border-radius: var(--radius-md);