@morscherlab/mint-sdk 1.4.0-beta.2 → 1.4.0-beta.20

package/src/styles/variables.css

@@ -3,7 +3,11 @@
  * @import '@morscherlab/mint-sdk/styles';
  */
 
-@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap');
+@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
@@ -21,9 +25,9 @@
   /* Strong control border — unchecked checkbox/radio, toggle off track, dashed outlines (~3.2:1 light, ~4.2:1 dark). */
   --_control-border-strong: color-mix(in srgb, var(--text-secondary) 75%, var(--border-color));
   /* Field border on hover. */
-  --_field-border-hover: color-mix(in srgb, var(--text-secondary) 60%, var(--border-color));
-  /* Ink: primary / error text on card and tinted surfaces. The -hover tokens
-     have no dark value, so html.dark lifts these toward --text-primary. */
+  --_field-border-hover: var(--border-strong);
+  /* Ink: primary / error text on card and tinted surfaces. html.dark lifts
+     these toward --text-primary. */
   --_ink-primary: var(--color-primary-hover);
   --_ink-error: var(--mint-error-hover);
 
@@ -33,11 +37,12 @@
   --bg-tertiary: #F1F5F9;
   --bg-card: #FFFFFF;
   --bg-hover: #F1F5F9;
-  --border-color: #E5E7EB;
-  --border-light: #F3F4F6;
+  --border-color: #E2E8F0;
+  --border-light: #F1F5F9;
+  --border-strong: #CBD5E1;
 
   /* Text colors */
-  --text-primary: #1E293B;
+  --text-primary: #0F172A;
   --text-secondary: #64748B;
   --text-muted: #94A3B8;
   /* De-emphasized label for low-emphasis interactive controls (secondary/ghost
@@ -46,25 +51,31 @@
      where --text-secondary would drop to ~4.35:1. */
   --text-secondary-strong: #475569;
 
-  /* Brand colors */
-  --color-primary: #14B8A6;
-  --color-primary-hover: #0F766E;
-  --color-primary-soft: rgba(20, 184, 166, 0.12);
-  --color-cta: #06B6D4;
-  --color-cta-hover: #0891B2;
-  --color-purple: #8B5CF6;
-
-  /* Entity accent colors — experiments (cyan) and projects (sky), from the
-     MINT 1.1 card system. -soft backs icon chips and pills, -border outlines
-     pills that sit on a card surface. */
-  --color-experiment: #06B6D4;
-  --color-experiment-hover: #0891B2;
-  --color-experiment-soft: rgba(6, 182, 212, 0.12);
-  --color-experiment-border: rgba(6, 182, 212, 0.3);
-  --color-project: #0EA5E9;
-  --color-project-hover: #0284C7;
-  --color-project-soft: rgba(14, 165, 233, 0.12);
-  --color-project-border: rgba(14, 165, 233, 0.32);
+  /* 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;
+  --color-primary-500: #14B8A6;
+  --color-primary-600: #0D9488;
+  --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). */
+  --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
+     apart by icon and label, not by hue. Only -hover has no neutral token. */
+  --color-experiment: var(--text-secondary-strong);
+  --color-experiment-hover: #334155;
+  --color-experiment-soft: var(--bg-tertiary);
+  --color-experiment-border: var(--border-strong);
+  --color-project: var(--color-experiment);
+  --color-project-hover: var(--color-experiment-hover);
+  --color-project-soft: var(--color-experiment-soft);
+  --color-project-border: var(--color-experiment-border);
 
   /* MINT brand mark — used for browser theme-color, marketing chrome, app icon background */
   --mint-brand: #7BD0B5;
@@ -76,13 +87,14 @@
   --scrollbar-thumb: #D1D5DB;
   --scrollbar-hover: #9CA3AF;
 
-  /* Shadows */
-  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  /* The MINT 1.1 card system uses exactly one shadow for every card. */
-  --card-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 1px 3px 0 rgb(0 0 0 / 0.06);
+  /* Shadows — flat by default (borders, not shadows); only floating layers
+     (popovers, menus, dialogs) get one. */
+  --shadow-sm: none;
+  --shadow: none;
+  --card-shadow: none;
+  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.10), 0 1px 3px rgba(15, 23, 42, 0.06);
+  --shadow-lg: 0 16px 40px -8px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.06);
+  --mint-shadow-pop: 0 4px 12px -2px rgba(15, 23, 42, 0.10), 0 1px 3px rgba(15, 23, 42, 0.06);
 
   /* Categorical sample scale — mirrored by SAMPLE_COLOR_SCALE in
      src/utils/color.ts. The JS constant carries the same hexes as a
@@ -106,20 +118,24 @@
   /* Motion — the SDK's standard easing curve. */
   --mint-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
 
-  /* Typography — Fira Sans for UI text, Fira Code for data, code and routes. */
-  --font-sans: 'Fira Sans', system-ui, -apple-system, sans-serif;
-  --font-mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;
-
-  /* Border radius */
-  --radius-sm: 0.25rem;
-  --radius: 0.375rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-
-  /* Form element heights */
-  --form-height-sm: 2rem;
-  --form-height-md: 2.25rem;
-  --form-height-lg: 3rem;
+  /* Typography — Geist for UI text, Geist Mono for codes, m/z, RT, counts and timestamps. */
+  --font-sans: 'Geist', system-ui, -apple-system, sans-serif;
+  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+
+  /* Border radius — code badges, tags, buttons/inputs, cards/dialogs. */
+  --radius-sm: 3px;
+  --radius: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+
+  /* Form element heights and page gutter — compact (normal and compact
+     density); [data-density="comfortable"] below restores the larger set. */
+  --form-height-sm: 1.75rem;
+  --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;
@@ -141,20 +157,20 @@
   --mint-info-border: rgba(59, 130, 246, 0.3);
 
   /* Extended brand tokens */
-  --color-primary-light: #93C5FD;
+  --color-primary-light: #5EEAD4;
 
   /* Shared component tokens */
   --mint-disabled-opacity: 0.6;
 
   /* Focus ring tokens */
   --focus-ring: 0 0 0 2px var(--color-primary);
-  --focus-ring-offset: 0 0 0 2px white, 0 0 0 4px var(--color-primary);
+  --focus-ring-offset: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--color-primary);
   --focus-ring-error: 0 0 0 2px var(--mint-error);
 
   /* 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(20, 184, 166, 0.20);
+  --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);
 
@@ -174,7 +190,8 @@
   --mint-text-inverse: #FFFFFF;
   --mint-border: var(--border-color);
   --mint-border-focus: var(--color-primary);
-  --mint-transition: 150ms ease;
+  /* Colour-only transitions; no lift, bounce or glow. */
+  --mint-transition: 120ms ease;
 }
 
 /* ==========================================================================
@@ -182,24 +199,30 @@
    ========================================================================== */
 html.dark {
   /* Background colors */
-  --bg-primary: #0F172A;
-  --bg-secondary: #1E293B;
-  --bg-tertiary: #334155;
-  --bg-card: #1E293B;
-  --bg-hover: #334155;
-  --border-color: #334155;
-  --border-light: #1E293B;
+  --bg-primary: #0B1120;
+  --bg-secondary: #111827;
+  --bg-tertiary: #1E293B;
+  --bg-card: #111827;
+  --bg-hover: #1E293B;
+  --border-color: #1F2937;
+  --border-light: #172033;
+  --border-strong: #334155;
+
+  /* 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;
 
   /* Ink aliases (see :root): ~7:1 on --bg-card, tints included. */
   --_ink-primary: color-mix(in srgb, var(--color-primary) 50%, var(--text-primary));
   --_ink-error: color-mix(in srgb, var(--mint-error) 50%, var(--text-primary));
 
   /* Text colors */
-  --text-primary: #F8FAFC;
+  --text-primary: #F1F5F9;
   --text-secondary: #94A3B8;
   --text-muted: #64748B;
-  /* Dark-mode analog: soft light-gray instead of near-white, AA-safe (7.2:1)
-     on the dark secondary hover surface (--bg-tertiary #334155). */
+  /* Dark-mode analog: soft light-gray instead of near-white, AA-safe (9.9:1)
+     on the dark secondary hover surface (--bg-tertiary #1E293B). */
   --text-secondary-strong: #CBD5E1;
 
   /* Scrollbar */
@@ -207,22 +230,10 @@ html.dark {
   --scrollbar-thumb: #475569;
   --scrollbar-hover: #64748B;
 
-  /* Shadows - Dark mode */
-  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.2);
-  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.2);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.2);
-  --card-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.24), 0 1px 3px 0 rgb(0 0 0 / 0.32);
-
-  /* Entity accent colors - Dark mode */
-  --color-experiment: #22D3EE;
-  --color-experiment-hover: #67E8F9;
-  --color-experiment-soft: rgba(34, 211, 238, 0.16);
-  --color-experiment-border: rgba(34, 211, 238, 0.36);
-  --color-project: #38BDF8;
-  --color-project-hover: #7DD3FC;
-  --color-project-soft: rgba(56, 189, 248, 0.16);
-  --color-project-border: rgba(56, 189, 248, 0.38);
+  /* Shadows - Dark mode (floating layers only; --shadow-sm/--shadow/--card-shadow stay none) */
+  --shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.6);
+  --shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, 0.7);
+  --mint-shadow-pop: 0 6px 16px -4px rgba(0, 0, 0, 0.6);
 
   /* Semantic colors - Dark mode */
   --mint-success-bg: rgba(16, 185, 129, 0.15);
@@ -233,7 +244,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(129, 140, 248, 0.28);
+  --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 */
@@ -243,6 +254,131 @@ 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"] {
+  --form-height-sm: 2rem;
+  --form-height-md: 2.25rem;
+  --form-height-lg: 3rem;
+  --mint-gutter: 0.75rem;
+}
+
 /* ==========================================================================
    Base Styles
    ========================================================================== */
@@ -257,10 +393,33 @@ 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);
 }
 
+/* Links: accent ink. In the base layer, so Tailwind utilities and component
+   rules (both win over a layered element rule) keep their own link colours. */
+@layer base {
+  a { color: var(--color-primary-hover); }
+  a:hover { color: var(--color-primary-pressed); }
+}
+
 /* Native controls do not inherit the page font; Tailwind preflight covers this
    in the platform, but SDK consumers without it render buttons and selects in
    the UA font. */
@@ -313,6 +472,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);
 }
@@ -688,6 +850,7 @@ button, input, select, textarea {
 .max-w-sm {
   max-width: 24rem;
 }
+} /* @layer utilities */
 
 /* ==========================================================================
    Reduced Motion

package/src/types/componentWorkflowTypes.ts

@@ -184,5 +184,7 @@ export interface ExperimentFilters {
   project?: string | null
   experimentType?: string | null
   datePreset?: DatePreset | null
+  /** Only experiments the caller authored (`?mine=true`). */
+  mine?: boolean
 }
 

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/generated/platformContext.ts

@@ -21,6 +21,7 @@ export interface PlatformContextPlugin {
   route_prefix: string
   api_prefix: string
   settings_api: "plugin" | "platform"
+  subtitle?: string
   description?: string
   icon?: string
   color?: string

package/src/types/generated-ui.ts

@@ -151,7 +151,11 @@ export interface GeneratedAnalysisManifest {
   }
   ui: {
     title: string
+    /** Second top-bar line; the top bar falls back to `description`. */
+    subtitle?: string
     description: string
+    /** Plugin icon for the standalone top bar. */
+    icon?: string
   }
   jobs: GeneratedJobDefinition[]
 }

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'

package/src/utils/time.ts

@@ -122,6 +122,27 @@ export function findNearestTimeSlotIndex(time: string, slots: readonly string[])
   return bestIndex
 }
 
+const relativeTimeFormat = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
+
+/**
+ * "in 5 minutes" / "2 hours ago" up to a week, then a locale date.
+ * With `weeks`, times up to five weeks away read as a week count first.
+ */
+export function formatRelativeTime(value: Date | string, { weeks = false }: { weeks?: boolean } = {}): string {
+  const date = value instanceof Date ? value : new Date(value)
+  const diffSec = Math.round((date.getTime() - Date.now()) / 1000)
+  const diffMin = Math.round(diffSec / 60)
+  const diffHr = Math.round(diffMin / 60)
+  const diffDay = Math.round(diffHr / 24)
+  const diffWeek = Math.round(diffDay / 7)
+  if (Math.abs(diffSec) < 60) return relativeTimeFormat.format(diffSec, 'second')
+  if (Math.abs(diffMin) < 60) return relativeTimeFormat.format(diffMin, 'minute')
+  if (Math.abs(diffHr) < 24) return relativeTimeFormat.format(diffHr, 'hour')
+  if (Math.abs(diffDay) < 7) return relativeTimeFormat.format(diffDay, 'day')
+  if (weeks && Math.abs(diffWeek) < 5) return relativeTimeFormat.format(diffWeek, 'week')
+  return date.toLocaleDateString()
+}
+
 export function toMinutes(time: string): number {
   const { hour, minute } = parseTime(time)
   return hour * 60 + minute

package/dist/ActionMenu-CScINahU.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ActionMenu-CScINahU.js","names":[],"sources":["../src/composables/useTextSearch.ts","../src/components/LoadingSpinner.vue","../src/components/LoadingSpinner.vue","../src/components/internal/DataStateInternal.vue","../src/components/internal/DataStateInternal.vue","../src/components/AlertBox.vue","../src/components/AlertBox.vue","../src/components/ActionMenu.vue","../src/components/ActionMenu.vue"],"sourcesContent":["import { computed, toValue, type ComputedRef, type Ref } from 'vue'\n\nexport type TextSearchSource<T> =\n  | T\n  | Ref<T>\n  | ComputedRef<T>\n  | (() => T)\n\nexport type TextSearchCandidate = unknown | readonly unknown[]\n\nexport interface UseTextSearchOptions<TItem> {\n  items: TextSearchSource<readonly TItem[]>\n  query: TextSearchSource<string | null | undefined>\n  enabled?: TextSearchSource<boolean | null | undefined>\n  getText: (item: TItem) => TextSearchCandidate\n}\n\nexport interface UseTextSearchReturn<TItem> {\n  query: ComputedRef<string>\n  filteredItems: ComputedRef<TItem[]>\n  matches: (item: TItem, query?: string | null | undefined) => boolean\n}\n\n/** Shared text-search filtering for tables, lists, selectors, and chip inputs. */\nexport function useTextSearch<TItem>(options: UseTextSearchOptions<TItem>): UseTextSearchReturn<TItem> {\n  const query = computed(() => normalizeSearchQuery(toValue(options.query)))\n  const enabled = computed(() => toValue(options.enabled) ?? true)\n\n  function matches(item: TItem, overrideQuery?: string | null | undefined): boolean {\n    const activeQuery = overrideQuery === undefined ? query.value : normalizeSearchQuery(overrideQuery)\n    if (!activeQuery) return true\n    return candidateMatchesSearch(options.getText(item), activeQuery)\n  }\n\n  const filteredItems = computed(() => {\n    const items = [...toValue(options.items)]\n    if (!enabled.value || !query.value) return items\n    return items.filter(item => matches(item))\n  })\n\n  return {\n    query,\n    filteredItems,\n    matches,\n  }\n}\n\nexport function normalizeSearchQuery(value: string | null | undefined): string {\n  return (value ?? '').trim().toLowerCase()\n}\n\nexport function candidateMatchesSearch(candidate: TextSearchCandidate, query: string): boolean {\n  const normalizedQuery = normalizeSearchQuery(query)\n  if (!normalizedQuery) return true\n  const values = Array.isArray(candidate) ? candidate : [candidate]\n  return values.some((value) => {\n    if (value === null || value === undefined) return false\n    return String(value).toLowerCase().includes(normalizedQuery)\n  })\n}\n","<script setup lang=\"ts\">\n/** Animated SVG spinner with size and tone, and a visually hidden status label for screen readers. `tone=\"inherit\"` takes the parent's text color. */\nimport type { Tone } from '../types'\n\ninterface Props {\n  size?: 'xs' | 'sm' | 'md' | 'lg'\n  tone?: Tone | 'inherit'\n  label?: string\n}\n\nwithDefaults(defineProps<Props>(), {\n  size: 'md',\n  tone: 'primary',\n  label: 'Loading',\n})\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'mint-spinner',\n      `mint-spinner--${size}`,\n      `mint-spinner--${tone}`,\n    ]\"\n    role=\"status\"\n  >\n    <svg\n      class=\"mint-spinner__svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n    >\n      <circle\n        style=\"opacity: 0.25\"\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        stroke-width=\"4\"\n      />\n      <path\n        style=\"opacity: 0.75\"\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n      />\n    </svg>\n    <span class=\"mint-spinner__label\">{{ label }}</span>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/** Animated SVG spinner with size and tone, and a visually hidden status label for screen readers. `tone=\"inherit\"` takes the parent's text color. */\nimport type { Tone } from '../types'\n\ninterface Props {\n  size?: 'xs' | 'sm' | 'md' | 'lg'\n  tone?: Tone | 'inherit'\n  label?: string\n}\n\nwithDefaults(defineProps<Props>(), {\n  size: 'md',\n  tone: 'primary',\n  label: 'Loading',\n})\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'mint-spinner',\n      `mint-spinner--${size}`,\n      `mint-spinner--${tone}`,\n    ]\"\n    role=\"status\"\n  >\n    <svg\n      class=\"mint-spinner__svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n    >\n      <circle\n        style=\"opacity: 0.25\"\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        stroke-width=\"4\"\n      />\n      <path\n        style=\"opacity: 0.75\"\n        fill=\"currentColor\"\n        d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n      />\n    </svg>\n    <span class=\"mint-spinner__label\">{{ label }}</span>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Shared loading / error / empty presentation for the SDK data components.\n *\n * Internal: not exported from the package entrypoints. Data components render\n * this instead of hand-rolling their own placeholder markup so that the\n * loading, error and empty states look the same everywhere.\n */\nimport { computed } from 'vue'\nimport EmptyState from '../EmptyState.vue'\nimport LoadingSpinner from '../LoadingSpinner.vue'\n\n/** Single-path warning triangle used for the error state. */\nconst ERROR_ICON_PATH\n  = 'M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'\n  + 'M12 9v4M12 17h.01'\n\ninterface Props {\n  /** Which of the three placeholder states to render. */\n  state: 'loading' | 'error' | 'empty'\n  /** Headline for the empty/error state. */\n  title?: string\n  /** Supporting copy for the empty/error state. */\n  description?: string\n  /** Custom `<path d>` for the empty state icon (the error state has its own). */\n  iconPath?: string\n  /** Placeholder scale; also drives the loading spinner size. */\n  size?: 'sm' | 'md' | 'lg'\n  /** `EmptyState` layout variant. */\n  variant?: 'illustrated' | 'inline'\n  /** Accessible label (and visible caption) for the loading state. */\n  loadingLabel?: string\n  /** Optional call-to-action rendered under the empty/error copy. */\n  actionLabel?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  size: 'md',\n  variant: 'illustrated',\n  loadingLabel: 'Loading',\n})\n\nconst emit = defineEmits<{\n  action: []\n}>()\n\nconst spinnerSize = computed(() => (props.size === 'sm' ? 'sm' : props.size === 'lg' ? 'lg' : 'md'))\n</script>\n\n<template>\n  <div\n    :class=\"['mint-data-state', `mint-data-state--${state}`, `mint-data-state--${size}`]\"\n    :data-state=\"state\"\n  >\n    <template v-if=\"state === 'loading'\">\n      <LoadingSpinner :size=\"spinnerSize\" :label=\"loadingLabel\" />\n      <p class=\"mint-data-state__loading-text\" aria-hidden=\"true\">{{ loadingLabel }}</p>\n    </template>\n    <EmptyState\n      v-else\n      :title=\"title\"\n      :description=\"description\"\n      :icon-path=\"state === 'error' ? ERROR_ICON_PATH : iconPath\"\n      :tone=\"state === 'error' ? 'error' : 'neutral'\"\n      :size=\"size\"\n      :variant=\"variant\"\n      :action-label=\"actionLabel\"\n      @action=\"emit('action')\"\n    >\n      <slot />\n    </EmptyState>\n  </div>\n</template>\n\n","<script setup lang=\"ts\">\n/**\n * Shared loading / error / empty presentation for the SDK data components.\n *\n * Internal: not exported from the package entrypoints. Data components render\n * this instead of hand-rolling their own placeholder markup so that the\n * loading, error and empty states look the same everywhere.\n */\nimport { computed } from 'vue'\nimport EmptyState from '../EmptyState.vue'\nimport LoadingSpinner from '../LoadingSpinner.vue'\n\n/** Single-path warning triangle used for the error state. */\nconst ERROR_ICON_PATH\n  = 'M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'\n  + 'M12 9v4M12 17h.01'\n\ninterface Props {\n  /** Which of the three placeholder states to render. */\n  state: 'loading' | 'error' | 'empty'\n  /** Headline for the empty/error state. */\n  title?: string\n  /** Supporting copy for the empty/error state. */\n  description?: string\n  /** Custom `<path d>` for the empty state icon (the error state has its own). */\n  iconPath?: string\n  /** Placeholder scale; also drives the loading spinner size. */\n  size?: 'sm' | 'md' | 'lg'\n  /** `EmptyState` layout variant. */\n  variant?: 'illustrated' | 'inline'\n  /** Accessible label (and visible caption) for the loading state. */\n  loadingLabel?: string\n  /** Optional call-to-action rendered under the empty/error copy. */\n  actionLabel?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  size: 'md',\n  variant: 'illustrated',\n  loadingLabel: 'Loading',\n})\n\nconst emit = defineEmits<{\n  action: []\n}>()\n\nconst spinnerSize = computed(() => (props.size === 'sm' ? 'sm' : props.size === 'lg' ? 'lg' : 'md'))\n</script>\n\n<template>\n  <div\n    :class=\"['mint-data-state', `mint-data-state--${state}`, `mint-data-state--${size}`]\"\n    :data-state=\"state\"\n  >\n    <template v-if=\"state === 'loading'\">\n      <LoadingSpinner :size=\"spinnerSize\" :label=\"loadingLabel\" />\n      <p class=\"mint-data-state__loading-text\" aria-hidden=\"true\">{{ loadingLabel }}</p>\n    </template>\n    <EmptyState\n      v-else\n      :title=\"title\"\n      :description=\"description\"\n      :icon-path=\"state === 'error' ? ERROR_ICON_PATH : iconPath\"\n      :tone=\"state === 'error' ? 'error' : 'neutral'\"\n      :size=\"size\"\n      :variant=\"variant\"\n      :action-label=\"actionLabel\"\n      @action=\"emit('action')\"\n    >\n      <slot />\n    </EmptyState>\n  </div>\n</template>\n\n","<script setup lang=\"ts\">\n/** Inline alert banner with semantic icon, title, message slot, optional action button, and optional dismiss button. */\nimport { useSlots } from 'vue'\nimport type { Tone } from '../types'\nimport BaseButton from './BaseButton.vue'\n\ninterface Props {\n  tone?: Tone\n  title?: string\n  dismissible?: boolean\n  actionLabel?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  tone: 'info',\n  dismissible: false,\n})\n\nconst emit = defineEmits<{\n  dismiss: []\n  action: []\n}>()\n\nconst slots = useSlots()\nconst hasActions = () => !!props.actionLabel || !!slots.actions\n</script>\n\n<template>\n  <div\n    class=\"mint-alert\"\n    :class=\"`mint-alert--${props.tone}`\"\n    role=\"alert\"\n  >\n    <!-- Lucide circle-check -->\n    <svg v-if=\"props.tone === 'success'\" class=\"mint-alert__icon mint-alert__icon--success\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n      <circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"m9 12 2 2 4-4\" />\n    </svg>\n    <!-- Lucide circle-x -->\n    <svg v-else-if=\"props.tone === 'error'\" class=\"mint-alert__icon mint-alert__icon--error\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n      <circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"m15 9-6 6\" /><path d=\"m9 9 6 6\" />\n    </svg>\n    <!-- Lucide triangle-alert -->\n    <svg v-else-if=\"props.tone === 'warning'\" class=\"mint-alert__icon mint-alert__icon--warning\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n      <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" /><path d=\"M12 9v4\" /><path d=\"M12 17h.01\" />\n    </svg>\n    <!-- Lucide info -->\n    <svg v-else :class=\"['mint-alert__icon', `mint-alert__icon--${props.tone}`]\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n      <circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"M12 16v-4\" /><path d=\"M12 8h.01\" />\n    </svg>\n\n    <div class=\"mint-alert__content\">\n      <h4 v-if=\"props.title\" class=\"mint-alert__title\">\n        {{ props.title }}\n      </h4>\n      <div class=\"mint-alert__message\">\n        <slot />\n      </div>\n    </div>\n\n    <div v-if=\"hasActions()\" class=\"mint-alert__actions\">\n      <slot name=\"actions\">\n        <BaseButton variant=\"secondary\" size=\"sm\" @click=\"emit('action')\">\n          {{ props.actionLabel }}\n        </BaseButton>\n      </slot>\n    </div>\n\n    <button\n      v-if=\"props.dismissible\"\n      type=\"button\"\n      class=\"mint-alert__dismiss\"\n      aria-label=\"Dismiss\"\n      @click=\"emit('dismiss')\"\n    >\n      <svg class=\"mint-alert__dismiss-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M18 6 6 18\" /><path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/** Inline alert banner with semantic icon, title, message slot, optional action button, and optional dismiss button. */\nimport { useSlots } from 'vue'\nimport type { Tone } from '../types'\nimport BaseButton from './BaseButton.vue'\n\ninterface Props {\n  tone?: Tone\n  title?: string\n  dismissible?: boolean\n  actionLabel?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  tone: 'info',\n  dismissible: false,\n})\n\nconst emit = defineEmits<{\n  dismiss: []\n  action: []\n}>()\n\nconst slots = useSlots()\nconst hasActions = () => !!props.actionLabel || !!slots.actions\n</script>\n\n<template>\n  <div\n    class=\"mint-alert\"\n    :class=\"`mint-alert--${props.tone}`\"\n    role=\"alert\"\n  >\n    <!-- Lucide circle-check -->\n    <svg v-if=\"props.tone === 'success'\" class=\"mint-alert__icon mint-alert__icon--success\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n      <circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"m9 12 2 2 4-4\" />\n    </svg>\n    <!-- Lucide circle-x -->\n    <svg v-else-if=\"props.tone === 'error'\" class=\"mint-alert__icon mint-alert__icon--error\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n      <circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"m15 9-6 6\" /><path d=\"m9 9 6 6\" />\n    </svg>\n    <!-- Lucide triangle-alert -->\n    <svg v-else-if=\"props.tone === 'warning'\" class=\"mint-alert__icon mint-alert__icon--warning\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n      <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" /><path d=\"M12 9v4\" /><path d=\"M12 17h.01\" />\n    </svg>\n    <!-- Lucide info -->\n    <svg v-else :class=\"['mint-alert__icon', `mint-alert__icon--${props.tone}`]\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n      <circle cx=\"12\" cy=\"12\" r=\"10\" /><path d=\"M12 16v-4\" /><path d=\"M12 8h.01\" />\n    </svg>\n\n    <div class=\"mint-alert__content\">\n      <h4 v-if=\"props.title\" class=\"mint-alert__title\">\n        {{ props.title }}\n      </h4>\n      <div class=\"mint-alert__message\">\n        <slot />\n      </div>\n    </div>\n\n    <div v-if=\"hasActions()\" class=\"mint-alert__actions\">\n      <slot name=\"actions\">\n        <BaseButton variant=\"secondary\" size=\"sm\" @click=\"emit('action')\">\n          {{ props.actionLabel }}\n        </BaseButton>\n      </slot>\n    </div>\n\n    <button\n      v-if=\"props.dismissible\"\n      type=\"button\"\n      class=\"mint-alert__dismiss\"\n      aria-label=\"Dismiss\"\n      @click=\"emit('dismiss')\"\n    >\n      <svg class=\"mint-alert__dismiss-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <path d=\"M18 6 6 18\" /><path d=\"m6 6 12 12\" />\n      </svg>\n    </button>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/** Compact overflow actions with an icon-only BaseButton trigger and a viewport-safe teleported menu. */\nimport { computePosition, flip, offset, shift } from '@floating-ui/dom'\nimport { Check, Ellipsis } from 'lucide-vue-next'\nimport { nextTick, onMounted, ref, watch } from 'vue'\nimport { useDropdownState } from '../composables/useDropdownState'\nimport { useMenuKeyboard } from '../composables/useMenuKeyboard'\nimport type { ActionMenuItem } from '../types/components'\nimport BaseButton from './BaseButton.vue'\n\ninterface Props {\n  label: string\n  items: ActionMenuItem[]\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  disabled: false,\n})\n\nconst emit = defineEmits<{\n  select: [item: ActionMenuItem]\n  open: []\n  close: []\n}>()\n\ndefineSlots<{\n  /** Replaces the ellipsis button; `toggle` and `keydown` go on the slotted button. */\n  trigger?: (props: { open: boolean; toggle: () => void; keydown: (event: KeyboardEvent) => void }) => unknown\n}>()\n\nconst panelRef = ref<HTMLElement | null>(null)\nconst panelStyle = ref<Record<string, string>>({ visibility: 'hidden' })\n\n// Disclosure state (outside-click, Escape, scroll/resize closing, focus return)\n// comes from the shared composable; only floating-ui placement stays local.\nconst { isOpen, rootRef, triggerRef, open, close } = useDropdownState({\n  closeOnScroll: true,\n  insideRefs: [panelRef],\n  onOpen: () => {\n    panelStyle.value = { visibility: 'hidden' }\n    emit('open')\n  },\n  onClose: () => emit('close'),\n})\n\n// BaseButton owns the actual <button>, so the trigger element is resolved from\n// the wrapper once mounted rather than bound with a template ref.\nonMounted(() => {\n  triggerRef.value = rootRef.value?.querySelector('button') ?? null\n})\n\nfunction menuItems(): HTMLElement[] {\n  if (!panelRef.value) return []\n  return Array.from(\n    panelRef.value.querySelectorAll<HTMLElement>('.mint-action-menu__item:not(:disabled)'),\n  )\n}\n\nasync function positionPanel() {\n  const trigger = triggerRef.value\n  const panel = panelRef.value\n  if (!trigger || !panel) return\n\n  const position = await computePosition(trigger, panel, {\n    placement: 'bottom-end',\n    strategy: 'fixed',\n    middleware: [\n      offset(4),\n      flip(),\n      shift({ padding: 8 }),\n    ],\n  })\n  panelStyle.value = {\n    left: `${position.x}px`,\n    top: `${position.y}px`,\n    visibility: 'visible',\n  }\n}\n\n/** `focusFirst` is false when the keyboard composable owns the initial focus. */\nfunction openMenu(focusFirst = true) {\n  if (props.disabled || isOpen.value) return\n  open()\n  if (focusFirst) {\n    void nextTick(() => menuItems()[0]?.focus())\n  }\n}\n\nfunction toggleMenu() {\n  if (props.disabled) return\n  if (isOpen.value) close()\n  else openMenu()\n}\n\nconst { handleTriggerKeydown, handlePanelKeydown } = useMenuKeyboard({\n  items: menuItems,\n  isOpen: () => isOpen.value,\n  open: () => openMenu(false),\n  close,\n})\n\nfunction handleSelect(item: ActionMenuItem) {\n  if (item.disabled) return\n  emit('select', item)\n  close()\n}\n\nwatch(isOpen, async (opened) => {\n  if (!opened) return\n  await nextTick()\n  await positionPanel()\n})\n</script>\n\n<template>\n  <span ref=\"rootRef\" class=\"mint-action-menu\">\n    <!-- A custom trigger must render one <button> and wire toggle + keydown to it. -->\n    <slot name=\"trigger\" :open=\"isOpen\" :toggle=\"toggleMenu\" :keydown=\"handleTriggerKeydown\">\n      <BaseButton\n        variant=\"secondary\"\n        size=\"sm\"\n        :icon=\"Ellipsis\"\n        :label=\"label\"\n        :disabled=\"disabled\"\n        aria-haspopup=\"menu\"\n        :aria-expanded=\"isOpen\"\n        @click=\"toggleMenu\"\n        @keydown=\"handleTriggerKeydown\"\n      />\n    </slot>\n  </span>\n\n  <Teleport to=\"body\">\n    <div\n      v-if=\"isOpen\"\n      ref=\"panelRef\"\n      class=\"mint-popover mint-action-menu__panel\"\n      :style=\"panelStyle\"\n      role=\"menu\"\n      @keydown=\"handlePanelKeydown\"\n    >\n      <template v-for=\"(item, index) in items\" :key=\"item.id\">\n        <div\n          v-if=\"item.danger && index > 0 && !items[index - 1].danger\"\n          class=\"mint-menu-separator\"\n          role=\"separator\"\n        />\n        <a\n          v-if=\"item.href !== undefined && !item.disabled\"\n          :href=\"item.href\"\n          :target=\"item.target\"\n          :rel=\"item.target === '_blank' ? 'noopener noreferrer' : undefined\"\n          :class=\"['mint-menu-item mint-action-menu__item', { 'mint-menu-item--danger mint-action-menu__item--danger': item.danger }]\"\n          role=\"menuitem\"\n          @click=\"handleSelect(item)\"\n        >\n          {{ item.label }}\n        </a>\n        <button\n          v-else\n          type=\"button\"\n          :class=\"['mint-menu-item mint-action-menu__item', { 'mint-menu-item--danger mint-action-menu__item--danger': item.danger }]\"\n          :role=\"item.checked === undefined ? 'menuitem' : 'menuitemradio'\"\n          :aria-checked=\"item.checked\"\n          :disabled=\"item.disabled\"\n          @click=\"handleSelect(item)\"\n        >\n          <Check\n            v-if=\"item.checked !== undefined\"\n            class=\"mint-action-menu__check\"\n            :class=\"{ 'mint-action-menu__check--off': !item.checked }\"\n            :size=\"14\"\n            aria-hidden=\"true\"\n          />\n          {{ item.label }}\n        </button>\n      </template>\n    </div>\n  </Teleport>\n</template>\n","<script setup lang=\"ts\">\n/** Compact overflow actions with an icon-only BaseButton trigger and a viewport-safe teleported menu. */\nimport { computePosition, flip, offset, shift } from '@floating-ui/dom'\nimport { Check, Ellipsis } from 'lucide-vue-next'\nimport { nextTick, onMounted, ref, watch } from 'vue'\nimport { useDropdownState } from '../composables/useDropdownState'\nimport { useMenuKeyboard } from '../composables/useMenuKeyboard'\nimport type { ActionMenuItem } from '../types/components'\nimport BaseButton from './BaseButton.vue'\n\ninterface Props {\n  label: string\n  items: ActionMenuItem[]\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  disabled: false,\n})\n\nconst emit = defineEmits<{\n  select: [item: ActionMenuItem]\n  open: []\n  close: []\n}>()\n\ndefineSlots<{\n  /** Replaces the ellipsis button; `toggle` and `keydown` go on the slotted button. */\n  trigger?: (props: { open: boolean; toggle: () => void; keydown: (event: KeyboardEvent) => void }) => unknown\n}>()\n\nconst panelRef = ref<HTMLElement | null>(null)\nconst panelStyle = ref<Record<string, string>>({ visibility: 'hidden' })\n\n// Disclosure state (outside-click, Escape, scroll/resize closing, focus return)\n// comes from the shared composable; only floating-ui placement stays local.\nconst { isOpen, rootRef, triggerRef, open, close } = useDropdownState({\n  closeOnScroll: true,\n  insideRefs: [panelRef],\n  onOpen: () => {\n    panelStyle.value = { visibility: 'hidden' }\n    emit('open')\n  },\n  onClose: () => emit('close'),\n})\n\n// BaseButton owns the actual <button>, so the trigger element is resolved from\n// the wrapper once mounted rather than bound with a template ref.\nonMounted(() => {\n  triggerRef.value = rootRef.value?.querySelector('button') ?? null\n})\n\nfunction menuItems(): HTMLElement[] {\n  if (!panelRef.value) return []\n  return Array.from(\n    panelRef.value.querySelectorAll<HTMLElement>('.mint-action-menu__item:not(:disabled)'),\n  )\n}\n\nasync function positionPanel() {\n  const trigger = triggerRef.value\n  const panel = panelRef.value\n  if (!trigger || !panel) return\n\n  const position = await computePosition(trigger, panel, {\n    placement: 'bottom-end',\n    strategy: 'fixed',\n    middleware: [\n      offset(4),\n      flip(),\n      shift({ padding: 8 }),\n    ],\n  })\n  panelStyle.value = {\n    left: `${position.x}px`,\n    top: `${position.y}px`,\n    visibility: 'visible',\n  }\n}\n\n/** `focusFirst` is false when the keyboard composable owns the initial focus. */\nfunction openMenu(focusFirst = true) {\n  if (props.disabled || isOpen.value) return\n  open()\n  if (focusFirst) {\n    void nextTick(() => menuItems()[0]?.focus())\n  }\n}\n\nfunction toggleMenu() {\n  if (props.disabled) return\n  if (isOpen.value) close()\n  else openMenu()\n}\n\nconst { handleTriggerKeydown, handlePanelKeydown } = useMenuKeyboard({\n  items: menuItems,\n  isOpen: () => isOpen.value,\n  open: () => openMenu(false),\n  close,\n})\n\nfunction handleSelect(item: ActionMenuItem) {\n  if (item.disabled) return\n  emit('select', item)\n  close()\n}\n\nwatch(isOpen, async (opened) => {\n  if (!opened) return\n  await nextTick()\n  await positionPanel()\n})\n</script>\n\n<template>\n  <span ref=\"rootRef\" class=\"mint-action-menu\">\n    <!-- A custom trigger must render one <button> and wire toggle + keydown to it. -->\n    <slot name=\"trigger\" :open=\"isOpen\" :toggle=\"toggleMenu\" :keydown=\"handleTriggerKeydown\">\n      <BaseButton\n        variant=\"secondary\"\n        size=\"sm\"\n        :icon=\"Ellipsis\"\n        :label=\"label\"\n        :disabled=\"disabled\"\n        aria-haspopup=\"menu\"\n        :aria-expanded=\"isOpen\"\n        @click=\"toggleMenu\"\n        @keydown=\"handleTriggerKeydown\"\n      />\n    </slot>\n  </span>\n\n  <Teleport to=\"body\">\n    <div\n      v-if=\"isOpen\"\n      ref=\"panelRef\"\n      class=\"mint-popover mint-action-menu__panel\"\n      :style=\"panelStyle\"\n      role=\"menu\"\n      @keydown=\"handlePanelKeydown\"\n    >\n      <template v-for=\"(item, index) in items\" :key=\"item.id\">\n        <div\n          v-if=\"item.danger && index > 0 && !items[index - 1].danger\"\n          class=\"mint-menu-separator\"\n          role=\"separator\"\n        />\n        <a\n          v-if=\"item.href !== undefined && !item.disabled\"\n          :href=\"item.href\"\n          :target=\"item.target\"\n          :rel=\"item.target === '_blank' ? 'noopener noreferrer' : undefined\"\n          :class=\"['mint-menu-item mint-action-menu__item', { 'mint-menu-item--danger mint-action-menu__item--danger': item.danger }]\"\n          role=\"menuitem\"\n          @click=\"handleSelect(item)\"\n        >\n          {{ item.label }}\n        </a>\n        <button\n          v-else\n          type=\"button\"\n          :class=\"['mint-menu-item mint-action-menu__item', { 'mint-menu-item--danger mint-action-menu__item--danger': item.danger }]\"\n          :role=\"item.checked === undefined ? 'menuitem' : 'menuitemradio'\"\n          :aria-checked=\"item.checked\"\n          :disabled=\"item.disabled\"\n          @click=\"handleSelect(item)\"\n        >\n          <Check\n            v-if=\"item.checked !== undefined\"\n            class=\"mint-action-menu__check\"\n            :class=\"{ 'mint-action-menu__check--off': !item.checked }\"\n            :size=\"14\"\n            aria-hidden=\"true\"\n          />\n          {{ item.label }}\n        </button>\n      </template>\n    </div>\n  </Teleport>\n</template>\n"],"mappings":"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"}