@morscherlab/mint-sdk 1.3.11 → 1.4.0-beta.10

package/src/stores/auth.ts

@@ -1,206 +1,70 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
-import type { AuthConfig, UserInfo } from '../types'
-import {
-  canAccessAdmin as canUserAccessAdmin,
-  canAccessPlugin as canUserAccessPlugin,
-  getAccessAudience,
-  getUserPermissions,
-  hasAllPermissions,
-  hasAnyPermission,
-  isAdminUser,
-} from '../permissions'
+import type { UserInfo } from '../types'
 
-const AUTH_TOKEN_KEY = 'mint-auth-token'
-const AUTH_EXPIRES_KEY = 'mint-auth-expires'
-
-function getLocalStorage(): Storage | null {
-  try {
-    const storage = globalThis.localStorage
-    return typeof storage?.getItem === 'function' ? storage : null
-  } catch {
-    return null
-  }
-}
+/** localStorage key of the platform session token. The platform owns the stored value. */
+export const AUTH_TOKEN_STORAGE_KEY = 'mint-auth-token'
+/** localStorage key of the platform session token expiry (ISO 8601). */
+export const AUTH_EXPIRES_STORAGE_KEY = 'mint-auth-expires'
 
 function readStoredItem(key: string): string | null {
   try {
-    return getLocalStorage()?.getItem(key) ?? null
+    const storage = globalThis.localStorage
+    return typeof storage?.getItem === 'function' ? storage.getItem(key) : null
   } catch {
     return null
   }
 }
 
-function writeStoredItem(key: string, value: string): void {
-  try {
-    getLocalStorage()?.setItem(key, value)
-  } catch {
-    // Keep auth usable in-memory when browser storage is blocked.
-  }
-}
-
-function removeStoredItem(key: string): void {
-  try {
-    getLocalStorage()?.removeItem(key)
-  } catch {
-    // Keep auth cleanup usable in-memory when browser storage is blocked.
-  }
-}
-
+/**
+ * Read-only session bridge between the platform and SDK code.
+ *
+ * SDK clients read the session token from here. Only the platform writes the
+ * session, through `@morscherlab/mint-sdk/host`. The SDK never writes or removes
+ * the stored platform token.
+ */
 export const useAuthStore = defineStore('mint-auth', () => {
-  // State
   const token = ref<string | null>(null)
   const tokenExpires = ref<Date | null>(null)
-  const username = ref<string | null>(null)
   const userInfo = ref<UserInfo | null>(null)
-  const authConfig = ref<AuthConfig>({
-    authRequired: true,
-    passkeyEnabled: false,
-    passkeyRegistered: false,
-    registrationEnabled: false,
-    databaseMode: 'none',
-    experimentVisibilityMode: 'open',
-  })
+  const authRequired = ref(true)
   const isInitialized = ref(false)
-  const isLoading = ref(false)
-  const error = ref<string | null>(null)
 
-  // Computed
   const isAuthenticated = computed(() => {
-    if (!authConfig.value.authRequired) {
-      return true
-    }
-    if (!token.value) {
-      return false
-    }
-    if (tokenExpires.value && tokenExpires.value < new Date()) {
-      return false
-    }
-    return true
-  })
-
-  const needsAuth = computed(() => {
-    return authConfig.value.authRequired && !isAuthenticated.value
-  })
-
-  const isAdmin = computed(() => isAdminUser(userInfo.value))
-  const userType = computed(() => getAccessAudience(userInfo.value))
-  const permissions = computed(() => getUserPermissions(userInfo.value))
-  const canAccessAdmin = computed(() => canUserAccessAdmin(userInfo.value))
-
-  const canRegister = computed(() => {
-    return authConfig.value.registrationEnabled
+    if (!authRequired.value) return true
+    if (!token.value) return false
+    return !(tokenExpires.value && tokenExpires.value < new Date())
   })
 
-  // Actions
+  /** Read the stored platform session token, once per page. */
   function initialize() {
-    const storedToken = readStoredItem(AUTH_TOKEN_KEY)
-    const storedExpires = readStoredItem(AUTH_EXPIRES_KEY)
+    const storedToken = readStoredItem(AUTH_TOKEN_STORAGE_KEY)
+    const storedExpires = readStoredItem(AUTH_EXPIRES_STORAGE_KEY)
+    const expires = storedExpires ? new Date(storedExpires) : null
 
-    if (storedToken) {
+    if (storedToken && !(expires && expires <= new Date())) {
       token.value = storedToken
-
-      if (storedExpires) {
-        const expires = new Date(storedExpires)
-        if (expires > new Date()) {
-          tokenExpires.value = expires
-        } else {
-          clearToken()
-        }
-      }
+      tokenExpires.value = expires
     }
 
     isInitialized.value = true
   }
 
-  function setToken(accessToken: string, expiresIn: number) {
-    token.value = accessToken
-    const expires = new Date(Date.now() + expiresIn * 1000)
-    tokenExpires.value = expires
-
-    writeStoredItem(AUTH_TOKEN_KEY, accessToken)
-    writeStoredItem(AUTH_EXPIRES_KEY, expires.toISOString())
-  }
-
+  /** Forget the session in memory after the server rejected its token. */
   function clearToken() {
     token.value = null
     tokenExpires.value = null
-    username.value = null
     userInfo.value = null
-
-    removeStoredItem(AUTH_TOKEN_KEY)
-    removeStoredItem(AUTH_EXPIRES_KEY)
-  }
-
-  function setUserInfo(info: UserInfo) {
-    userInfo.value = info
-    username.value = info.username
-  }
-
-  function hasPermission(...perms: string[]): boolean {
-    return hasAllPermissions(userInfo.value, perms)
-  }
-
-  function hasAnyPermissionForUser(...perms: string[]): boolean {
-    return hasAnyPermission(userInfo.value, perms)
-  }
-
-  function canAccessPlugin(pluginName: string): boolean {
-    return canUserAccessPlugin(userInfo.value, pluginName)
-  }
-
-  function setAuthConfig(config: AuthConfig) {
-    authConfig.value = config
-  }
-
-  function setUsername(name: string) {
-    username.value = name
-  }
-
-  function setError(message: string | null) {
-    error.value = message
-  }
-
-  function setLoading(loading: boolean) {
-    isLoading.value = loading
-  }
-
-  function logout() {
-    clearToken()
   }
 
   return {
-    // State
     token,
     tokenExpires,
-    username,
     userInfo,
-    authConfig,
+    authRequired,
     isInitialized,
-    isLoading,
-    error,
-
-    // Computed
     isAuthenticated,
-    needsAuth,
-    isAdmin,
-    userType,
-    permissions,
-    canAccessAdmin,
-    canRegister,
-
-    // Actions
     initialize,
-    setToken,
     clearToken,
-    setAuthConfig,
-    setUsername,
-    setUserInfo,
-    setError,
-    setLoading,
-    hasPermission,
-    hasAnyPermission: hasAnyPermissionForUser,
-    canAccessPlugin,
-    logout,
   }
 })

package/src/stores/experiment.ts

@@ -1,7 +1,8 @@
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { useApi } from '../composables/useApi'
 import { readErrorMessage } from '../utils/errors'
+import { integrationHost } from '../utils/integrationHost'
 import type { ExperimentSummary, PlatformContext } from '../types'
 
 function getPlatformApiUrl(): string | undefined {
@@ -17,6 +18,9 @@ function getPlatformApiUrl(): string | undefined {
  * record the platform already returned, and deep links call `selectById()` with
  * nothing but an id. Because a name can only ever arrive from the platform,
  * there is no code path in which a caller can invent one.
+ *
+ * In a platform-served plugin page the platform integration script keeps the
+ * store and the `experiment_id` URL parameter in step.
  */
 export const useExperimentStore = defineStore('mint-experiment', () => {
   const current = ref<ExperimentSummary | null>(null)
@@ -93,6 +97,21 @@ export const useExperimentStore = defineStore('mint-experiment', () => {
     }
   }
 
+  /** Read the selected experiment again. The selection and its record stay in place. */
+  async function refresh(): Promise<void> {
+    const id = currentId.value
+    if (id === null) return
+    const token = selectionToken
+    try {
+      const experiment = await fetchExperiment(id)
+      if (token !== selectionToken) return
+      current.value = experiment
+      error.value = null
+    } catch (err) {
+      if (token === selectionToken) error.value = readErrorMessage(err, 'Failed to load experiment')
+    }
+  }
+
   function clear(): void {
     // Supersede any in-flight resolve so a detached experiment cannot be
     // repopulated by a response that was already on its way.
@@ -103,6 +122,12 @@ export const useExperimentStore = defineStore('mint-experiment', () => {
     isResolving.value = false
   }
 
+  integrationHost()?.bindExperimentStore({
+    currentId: () => currentId.value,
+    selectById,
+    onChange: (listener) => { watch(currentId, listener) },
+  })
+
   return {
     current,
     currentId,
@@ -110,6 +135,7 @@ export const useExperimentStore = defineStore('mint-experiment', () => {
     error,
     select,
     selectById,
+    refresh,
     clear,
   }
 })

package/src/styles/components/action-menu.css

@@ -7,11 +7,6 @@
   flex-shrink: 0;
 }
 
-.mint-action-menu__trigger-icon {
-  width: 1rem;
-  height: 1rem;
-}
-
 .mint-action-menu__panel {
   position: fixed;
   z-index: 1000;

package/src/styles/components/adduct-text.css

@@ -6,14 +6,14 @@
   overflow: hidden;
   color: var(--text-muted);
   font-variant-numeric: tabular-nums;
-  font-weight: 600;
+  font-weight: 400;
   letter-spacing: 0;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .mint-adduct-text--mono { font-family: var(--font-mono); font-feature-settings: 'liga' 0, 'calt' 0; }
-.mint-adduct-text--sans { font-family: var(--font-sans); font-feature-settings: 'liga' 1, 'calt' 1; font-weight: 650; }
+.mint-adduct-text--sans { font-family: var(--font-sans); font-feature-settings: 'liga' 1, 'calt' 1; }
 
 .mint-adduct-text--xs {
   font-size: 0.6875rem;
@@ -26,9 +26,16 @@
 }
 
 .mint-adduct-text--badge {
-  padding: 0.125rem 0.25rem;
+  height: 1.25rem;
+  padding: 0 0.375rem;
   border-radius: var(--radius-sm);
   background: var(--bg-tertiary);
+  color: var(--text-secondary-strong);
+}
+
+.mint-adduct-text--badge.mint-adduct-text--xs {
+  font-size: 0.75rem;
+  line-height: 1.25rem;
 }
 
 /* On a filled surface the text inherits that surface's ink (9c: the old
@@ -44,8 +51,9 @@
 /* Charge as a superscript by relative offset, so the line box keeps its height. */
 .mint-adduct-text__charge {
   position: relative;
-  top: -0.5em;
-  font-size: 0.72em;
+  top: -0.45em;
+  margin-left: 1px;
+  font-size: 0.78em;
   line-height: 0;
   vertical-align: baseline;
   color: inherit;

package/src/styles/components/alert-box.css

@@ -1,66 +1,58 @@
-/* AlertBox Component Styles */
+/* AlertBox Component Styles — neutral card; tone lives only in the 22px icon tile (v2 callout). */
 
 .mint-alert {
   display: flex;
   align-items: flex-start;
   gap: 0.625rem;
-  padding: 0.75rem 0.875rem;
-  border: 1px solid;
+  padding: 0.625rem 0.75rem;
+  background-color: var(--bg-card);
+  border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
 }
 
-.mint-alert--success {
-  background-color: var(--mint-success-bg);
-  border-color: var(--mint-success-border);
-}
-
-.mint-alert--error {
-  background-color: var(--mint-error-bg);
-  border-color: var(--mint-error-border);
-}
-
-.mint-alert--warning {
-  background-color: var(--mint-warning-bg);
-  border-color: var(--mint-warning-border);
-}
-
-.mint-alert--info {
-  background-color: var(--mint-info-bg);
-  border-color: var(--mint-info-border);
-}
-
-/* Semantic color stays in the surface and the icon only (1h, same rule as Toast). */
 .mint-alert__icon {
-  width: 1rem;
-  height: 1rem;
-  margin-top: 0.125rem;   /* centers on the first 13px/1.5 text line */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.375rem;
+  height: 1.375rem;
   flex-shrink: 0;
+  border-radius: var(--radius);
+}
+
+.mint-alert__icon svg {
+  width: 0.875rem;
+  height: 0.875rem;
 }
 
-.mint-alert__icon--success { color: var(--mint-success-hover); }
-.mint-alert__icon--error   { color: var(--_ink-error); }
-.mint-alert__icon--warning { color: var(--mint-warning-text); }
-.mint-alert__icon--info    { color: var(--mint-info); }
+.mint-alert__icon--success { background-color: var(--mint-success-bg); color: var(--mint-success-hover); }
+.mint-alert__icon--error   { background-color: var(--mint-error-bg);   color: var(--_ink-error); }
+.mint-alert__icon--warning { background-color: var(--mint-warning-bg); color: var(--mint-warning-text); }
+.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__content {
   flex: 1;
   min-width: 0;
+  padding-top: 0.125rem;
 }
 
 .mint-alert__title {
   font-size: 0.8125rem;
   font-weight: 600;
   color: var(--text-primary);
-  line-height: 1.5;
+  line-height: 1.35;
   margin-top: 0 !important;
-  margin-bottom: 0.125rem !important;
+  margin-bottom: 0.0625rem !important;
   padding: 0 !important;
 }
 
 .mint-alert__message {
   font-size: 0.8125rem;
-  line-height: 1.5;
-  color: var(--text-secondary-strong);
+  line-height: 1.45;
+  color: var(--text-secondary);
   margin-top: 0 !important;
   margin-bottom: 0 !important;
   padding: 0 !important;
@@ -68,24 +60,31 @@
 
 .mint-alert__actions {
   display: flex;
+  align-self: center;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.375rem;
   flex-shrink: 0;
 }
 
 .mint-alert__dismiss {
-  padding: 0.25rem;
-  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.375rem;
+  height: 1.375rem;
+  flex-shrink: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius);
   color: var(--text-muted);
   background: transparent;
-  border: none;
   cursor: pointer;
   transition: color 0.15s ease, background-color 0.15s ease;
 }
 
 .mint-alert__dismiss:hover {
   color: var(--text-primary);
-  background-color: var(--bg-tertiary);
+  background-color: var(--bg-hover);
 }
 
 .mint-alert__dismiss:focus-visible {

package/src/styles/components/app-layout.css

@@ -59,11 +59,12 @@
   border-bottom: 1px solid var(--border-color);
 }
 
-/* Floating variant: all sections appear as separate cards on a background */
+/* Floating variant: all sections appear as separate cards on a background,
+   spaced by the density gutter (8px, 12px comfortable). */
 .mint-layout--floating {
   background-color: var(--bg-primary);
-  padding: 1rem;
-  gap: 1rem;
+  padding: var(--mint-gutter);
+  gap: var(--mint-gutter);
 }
 
 .mint-layout--floating .mint-layout__topbar {
@@ -73,7 +74,7 @@
 }
 
 .mint-layout--floating .mint-layout__body {
-  gap: 1rem;
+  gap: var(--mint-gutter);
 }
 
 .mint-layout--floating .mint-layout__sidebar {
@@ -85,7 +86,7 @@
 }
 
 .mint-layout--floating .mint-layout__main {
-  gap: 1rem;
+  gap: var(--mint-gutter);
 }
 
 /* In floating mode, inner components don't need borders since the wrapper provides them */

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

@@ -3,9 +3,10 @@
    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. */
 
+/* Shrinks down to its inline min-width (11.25rem) so a crowded bar truncates the label instead of overlapping the nav. */
 .mint-page-selector {
   position: relative;
-  flex-shrink: 0;
+  flex-shrink: 1;
 }
 
 .mint-page-selector__trigger {
@@ -76,6 +77,7 @@
 
 .mint-page-selector__label {
   flex: 1;
+  min-width: 0;
   text-align: left;
   white-space: nowrap;
   overflow: hidden;

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

@@ -1,14 +1,14 @@
-/* AppTopBar pillNav — centered top-level navigation pills.
-   Keeps the pill shape (the only pill in the bar, 5a); items are 26px to fit
-   the 52px bar. Dropdown = .mint-popover + .mint-menu-item (2d). */
+/* AppTopBar pillNav — centred top-level navigation as a segmented track:
+   26px items + 2px track padding + 1px border = 32px.
+   Dropdown = .mint-popover + .mint-menu-item (2d). */
 
 .mint-pill-nav {
   display: inline-flex;
-  gap: 2px;
-  padding: 0.1875rem;
-  border-radius: 9999px;
+  gap: 0;
+  padding: 2px;
+  border-radius: var(--radius-lg);
   background: var(--bg-tertiary);
-  border: 1px solid var(--border-light);
+  border: 1px solid transparent;
   flex-shrink: 0;
 }
 
@@ -21,10 +21,10 @@
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
-  height: 1.75rem;
+  height: 1.625rem;
   border: 0;
-  padding: 0 0.875rem;
-  border-radius: 9999px;
+  padding: 0 0.75rem;
+  border-radius: var(--radius-md);
   font-size: 0.8125rem;
   font-weight: 500;
   font-family: inherit;
@@ -52,8 +52,7 @@
 .mint-pill-nav__item--active {
   color: var(--text-primary);
   background: var(--bg-card);
-  box-shadow: var(--shadow-sm);
-  font-weight: 600;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 1px var(--border-color);
 }
 
 .mint-pill-nav__item--disabled {

package/src/styles/components/app-sidebar.css

@@ -96,7 +96,7 @@
   flex-shrink: 0;
   min-width: 1.375rem;
   padding: 0.125rem 0.375rem;
-  border-radius: 9999px;
+  border-radius: var(--radius);
   background: color-mix(in srgb, var(--color-cta) 14%, transparent);
   color: var(--color-cta);
   font-size: 0.6875rem;
@@ -277,7 +277,7 @@
   min-width: 1.125rem;
   height: 1rem;
   padding: 0 0.25rem;
-  border-radius: 0.1875rem;
+  border-radius: var(--radius-sm);
   background: color-mix(in srgb, var(--mint-sidebar-tone) 14%, transparent);
   color: var(--mint-sidebar-tone);
   font-family: var(--font-mono);
@@ -428,14 +428,11 @@
   color: var(--text-secondary);
   background: transparent;
   cursor: pointer;
-  transition:
-    background-color 150ms ease,
-    transform 150ms ease;
+  transition: background-color var(--mint-transition);
 }
 
 .mint-sidebar__rail-item:hover {
   background: var(--bg-tertiary);
-  transform: translateY(-1px);
 }
 
 .mint-sidebar__rail-item:focus-visible {
@@ -450,11 +447,6 @@
   width: 1.75rem;
   height: 1.75rem;
   border-radius: var(--radius-md);
-  transition: transform 150ms ease;
-}
-
-.mint-sidebar__rail-item:hover .mint-sidebar__rail-icon {
-  transform: scale(1.04);
 }
 
 .mint-sidebar__rail-svg {
@@ -475,7 +467,7 @@
   min-width: 1rem;
   height: 1rem;
   padding: 0 0.25rem;
-  border-radius: 9999px;
+  border-radius: var(--radius);
   background: var(--mint-sidebar-tone);
   color: white;
   font-size: 0.6875rem;
@@ -485,6 +477,11 @@
   font-variant-numeric: tabular-nums;
 }
 
+.mint-sidebar__rail-badge--primary,
+.mint-sidebar__rail-badge--cta {
+  color: var(--text-on-accent);
+}
+
 /* Semantic tones shared by the rail badge, the inline tag and section actions. */
 .mint-sidebar__rail-badge--primary,
 .mint-sidebar__tag--primary,
@@ -539,15 +536,9 @@
 @media (prefers-reduced-motion: reduce) {
   .mint-sidebar,
   .mint-sidebar__rail-item,
-  .mint-sidebar__rail-icon,
   .mint-sidebar__chevron,
   .mint-sidebar__switch,
   .mint-sidebar__switch-knob {
     transition: none;
   }
-
-  .mint-sidebar__rail-item:hover,
-  .mint-sidebar__rail-item:hover .mint-sidebar__rail-icon {
-    transform: none;
-  }
 }