@morscherlab/mint-sdk 1.4.0-beta.9 → 1.4.0

package/src/styles/variables.css

@@ -5,6 +5,10 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');
 
+/* Tailwind v4's layer order, declared first so the SDK's base and utilities
+   layers sort the same way with or without Tailwind in the host. */
+@layer theme, base, components, utilities;
+
 /* ==========================================================================
    CSS Variables - Light Mode
    ========================================================================== */
@@ -47,13 +51,8 @@
      where --text-secondary would drop to ~4.35:1. */
   --text-secondary-strong: #475569;
 
-  /* Brand colors — one teal accent: teal-600 fills, teal-700 hover + ink,
-     teal-800 pressed. White on #0D9488 is 3.74:1, a known AA exception. */
-  --color-primary: #0D9488;
-  --color-primary-hover: #0F766E;
-  --color-primary-pressed: #115E59;
-  --color-primary-soft: rgba(13, 148, 136, 0.10);
-  --color-primary-border: #99F6E4;
+  /* Brand colors: the accent (--color-primary*) comes from the palette
+     blocks below the dark block (html[data-palette], default teal). */
   /* Fixed teal scale, the same in both themes. */
   --color-primary-50: #F0FDFA;
   --color-primary-100: #CCFBF1;
@@ -135,6 +134,8 @@
   --form-height-md: 2rem;
   --form-height-lg: 2.5rem;
   --mint-gutter: 0.5rem;
+  /* Distance from the outermost cards to the window edge, in every density. */
+  --mint-page-inset: 1rem;
 
   /* Semantic colors */
   --mint-success: #10B981;
@@ -169,7 +170,7 @@
   /* Soft focus rings — 3px translucent. Used by all form primitives
      post-0.16 visual refresh. Solid variants above kept for legacy
      components that haven't migrated yet. */
-  --focus-ring-soft: 0 0 0 3px rgba(13, 148, 136, 0.18);
+  --focus-ring-soft: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
   /* Red is perceptually brighter than teal at equal alpha; drop 2pp to keep visual weight matched. */
   --focus-ring-soft-error: 0 0 0 3px rgba(239, 68, 68, 0.18);
 
@@ -191,6 +192,12 @@
   --mint-border-focus: var(--color-primary);
   /* Colour-only transitions; no lift, bounce or glow. */
   --mint-transition: 120ms ease;
+  /* Stacking layers: modal < jobs tray < onboarding tour < floating panels < tooltips and toasts. */
+  --mint-z-modal: 50;
+  --mint-z-tray: 1000;
+  --mint-z-tour: 1100;
+  --mint-z-popover: 1200;
+  --mint-z-toast: 9999;
 }
 
 /* ==========================================================================
@@ -207,12 +214,7 @@ html.dark {
   --border-light: #172033;
   --border-strong: #334155;
 
-  /* Brand colors - Dark mode (CTA, purple and entity aliases follow) */
-  --color-primary: #2DD4BF;
-  --color-primary-hover: #5EEAD4;
-  --color-primary-pressed: #99F6E4;
-  --color-primary-soft: rgba(45, 212, 191, 0.12);
-  --color-primary-border: rgba(45, 212, 191, 0.35);
+  /* Brand colors - Dark mode: the accent comes from the palette blocks below. */
   /* Dark ink on the light accent fill (10.1:1 on #2DD4BF). */
   --text-on-accent: #0B1120;
   --color-experiment-hover: #E2E8F0;
@@ -248,7 +250,7 @@ html.dark {
 
   /* Focus ring - dark mode offset uses bg-primary instead of white */
   --focus-ring-offset: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--color-primary);
-  --focus-ring-soft: 0 0 0 3px rgba(45, 212, 191, 0.22);
+  --focus-ring-soft: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
   --focus-ring-soft-error: 0 0 0 3px rgba(248, 113, 113, 0.26);
 
   /* Legacy aliases */
@@ -258,6 +260,122 @@ html.dark {
   color-scheme: dark;
 }
 
+/* Accent palettes (Settings → Color palette). The settings store writes
+   html[data-palette]; the palette swatches set the same attribute on their
+   strip to preview a palette. Each palette is one accent in both themes: white
+   text on the light-mode fill, dark text (--text-on-accent) on the dark-mode
+   fill. Hues come from the biology plot-style palettes. */
+
+/* Teal (default): teal-600 fill, teal-700 hover + ink, teal-800 pressed.
+   White on #0D9488 is 3.74:1, a known AA exception. */
+:root,
+[data-palette="default"] {
+  --color-primary: #0D9488;
+  --color-primary-hover: #0F766E;
+  --color-primary-pressed: #115E59;
+  --color-primary-soft: rgba(13, 148, 136, 0.10);
+  --color-primary-border: #99F6E4;
+}
+html.dark,
+html.dark [data-palette="default"] {
+  --color-primary: #2DD4BF;
+  --color-primary-hover: #5EEAD4;
+  --color-primary-pressed: #99F6E4;
+  --color-primary-soft: rgba(45, 212, 191, 0.12);
+  --color-primary-border: rgba(45, 212, 191, 0.35);
+}
+
+/* Colour-blind safe: Okabe-Ito blue accent, and Okabe-Ito bluish green,
+   vermilion and orange for status, so success and error differ for every
+   colour-vision type. White on #0072B2 is 5.19:1. */
+:root[data-palette="colorblind"],
+[data-palette="colorblind"] {
+  --color-primary: #0072B2;
+  --color-primary-hover: #005F94;
+  --color-primary-pressed: #004C77;
+  --color-primary-soft: rgba(0, 114, 178, 0.10);
+  --color-primary-border: #B3D5EA;
+  --mint-success: #009E73;
+  --mint-success-hover: #00805D;
+  --mint-success-bg: rgba(0, 158, 115, 0.1);
+  --mint-success-border: rgba(0, 158, 115, 0.3);
+  --mint-error: #D55E00;
+  --mint-error-hover: #B34E00;
+  --mint-error-bg: rgba(213, 94, 0, 0.1);
+  --mint-error-border: rgba(213, 94, 0, 0.3);
+  --mint-warning: #E69F00;
+  --mint-warning-hover: #C78800;
+  --mint-warning-bg: rgba(230, 159, 0, 0.1);
+  --mint-warning-border: rgba(230, 159, 0, 0.3);
+  --mint-warning-text: #8F5F00;
+}
+html.dark[data-palette="colorblind"],
+html.dark [data-palette="colorblind"] {
+  --color-primary: #56B4E9;
+  --color-primary-hover: #7CC5EE;
+  --color-primary-pressed: #A3D6F3;
+  --color-primary-soft: rgba(86, 180, 233, 0.14);
+  --color-primary-border: rgba(86, 180, 233, 0.38);
+  --mint-success-bg: rgba(0, 158, 115, 0.15);
+  --mint-error-bg: rgba(213, 94, 0, 0.15);
+  --mint-warning-bg: rgba(230, 159, 0, 0.15);
+  --mint-warning-text: #FCD34D;
+}
+
+/* Purple: plot-style purple #8781bd, deepened so white text is 5.15:1. */
+:root[data-palette="purple"],
+[data-palette="purple"] {
+  --color-primary: #6B64B0;
+  --color-primary-hover: #5A539E;
+  --color-primary-pressed: #4A448A;
+  --color-primary-soft: rgba(107, 100, 176, 0.10);
+  --color-primary-border: #D3D0EC;
+}
+html.dark[data-palette="purple"],
+html.dark [data-palette="purple"] {
+  --color-primary: #A9A3DB;
+  --color-primary-hover: #C2BDE7;
+  --color-primary-pressed: #D8D4F1;
+  --color-primary-soft: rgba(169, 163, 219, 0.14);
+  --color-primary-border: rgba(169, 163, 219, 0.38);
+}
+
+/* Ocean: plot-style ocean ramp, #2171B5 fill (white 5.13:1), #6BAED6 dark. */
+:root[data-palette="ocean"],
+[data-palette="ocean"] {
+  --color-primary: #2171B5;
+  --color-primary-hover: #1B5F99;
+  --color-primary-pressed: #164E7E;
+  --color-primary-soft: rgba(33, 113, 181, 0.10);
+  --color-primary-border: #BBD7EE;
+}
+html.dark[data-palette="ocean"],
+html.dark [data-palette="ocean"] {
+  --color-primary: #6BAED6;
+  --color-primary-hover: #8EC2E2;
+  --color-primary-pressed: #B0D5EC;
+  --color-primary-soft: rgba(107, 174, 214, 0.14);
+  --color-primary-border: rgba(107, 174, 214, 0.38);
+}
+
+/* Forest: plot-style forest_clay, #2F6B4F fill (white 6.29:1), #7AA874 dark. */
+:root[data-palette="forest"],
+[data-palette="forest"] {
+  --color-primary: #2F6B4F;
+  --color-primary-hover: #275A42;
+  --color-primary-pressed: #1F4935;
+  --color-primary-soft: rgba(47, 107, 79, 0.10);
+  --color-primary-border: #BFD8C6;
+}
+html.dark[data-palette="forest"],
+html.dark [data-palette="forest"] {
+  --color-primary: #7AA874;
+  --color-primary-hover: #95BC90;
+  --color-primary-pressed: #B1CFAD;
+  --color-primary-soft: rgba(122, 168, 116, 0.14);
+  --color-primary-border: rgba(122, 168, 116, 0.38);
+}
+
 /* Comfortable density (html[data-density], written by the settings store):
    the pre-v2 control heights and a wider gutter. */
 [data-density="comfortable"] {
@@ -281,6 +399,22 @@ body {
   transition: background-color 0.15s, color 0.15s;
 }
 
+/* No page-level rubber-band bounce or pull-to-refresh; overflow: hidden does
+   not stop it. Panels still scroll, and their overscroll stops at their own
+   edge. A browser tab keeps the horizontal swipe for back and forward; an
+   installed PWA has no history swipe, so it drops both axes. */
+html,
+body {
+  overscroll-behavior-y: none;
+}
+
+@media (display-mode: standalone) {
+  html,
+  body {
+    overscroll-behavior: none;
+  }
+}
+
 code, pre {
   font-family: var(--font-mono);
 }
@@ -344,6 +478,9 @@ button, input, select, textarea {
 /* ==========================================================================
    MINT Utility Classes (for Tailwind v4 compatibility)
    ========================================================================== */
+/* In Tailwind's utilities layer: unlayered, these beat every layered rule, so a
+   host's responsive variant (`lg:flex-row`) lost to the SDK's `.flex-col`. */
+@layer utilities {
 .bg-bg-hover {
   background-color: var(--bg-tertiary);
 }
@@ -719,6 +856,7 @@ button, input, select, textarea {
 .max-w-sm {
   max-width: 24rem;
 }
+} /* @layer utilities */
 
 /* ==========================================================================
    Reduced Motion

package/src/types/components.ts

@@ -317,6 +317,8 @@ export interface PluginWorkspaceViewSpec {
     disabled?: import('vue').MaybeRefOrGetter<boolean>
     reason?: import('vue').MaybeRefOrGetter<string | undefined>
   }
+  /** Job source: the top bar shows the viewer's job and opens a JobsStatusTray. Read once at setup, like `experiment`. */
+  jobs?: import('vue').MaybeRefOrGetter<import('../composables/useJobCenter').PluginJobCenterSource | undefined>
 }
 
 

package/src/types/index.ts

@@ -207,6 +207,7 @@ export type {
   JobStateInput,
   JobStatus,
   JobStreamData,
+  TopBarJob,
 } from './jobs'
 
 export type {

package/src/types/jobs.ts

@@ -68,3 +68,13 @@ export interface JobSnapshotPayload {
 }
 
 export type JobStreamData = JobStateInput | JobSnapshotPayload
+
+/** What the top-bar run slot shows for the viewer's own job. The plugin picks the job. */
+export interface TopBarJob {
+  /** Lifecycle of the shown job; sets the icon and the tone. */
+  status: JobStatus
+  /** Tooltip and accessible name, e.g. "Extracting", "Saved to EXP-0142". Not shown as text. */
+  label: string
+  /** 0-100; drawn as a small bar after the icon. */
+  percent?: number | null
+}

package/src/types/platform.ts

@@ -66,5 +66,5 @@ export type PlatformContext = Partial<Omit<PlatformFrontendContext, 'plugin'>> &
 
 // Settings state types
 export type ThemeMode = 'light' | 'dark' | 'system'
-export type ColorPalette = 'default' | 'colorblind' | 'viridis' | 'pastel'
+export type ColorPalette = 'default' | 'colorblind' | 'purple' | 'ocean' | 'forest'
 export type TableDensity = 'compact' | 'normal' | 'comfortable'