@morscherlab/mint-sdk 1.0.39 → 1.0.42

package/src/composables/usePluginClient.ts

@@ -1,18 +1,20 @@
-import { computed, shallowRef, watch, type ComputedRef, type Ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref, shallowRef, watch, type ComputedRef, type Ref } from 'vue'
 import { useApi } from './useApi'
 import { usePlatformContext } from './usePlatformContext'
 import { useRequestSyncState } from './useRequestSyncState'
+import { useAuthStore } from '../stores/auth'
 import {
   currentExperimentFromContext,
   getInjectedPlatformContext,
   resolveCurrentExperimentId,
 } from './platformContextHelpers'
 import {
+  buildPluginEndpointUrl,
   hasKeys,
   pluginEndpointRequestParts,
   requestBodyFromPayload,
 } from './pluginEndpointBuilder'
-import type { ExperimentSummary, PageSelectorItem } from '../types'
+import type { ExperimentSummary, PageSelectorItem, SettingsModalSchema, TopBarSettingsConfig } from '../types'
 
 export {
   buildPluginEndpointUrl,
@@ -66,6 +68,10 @@ export interface PluginContract {
     analysisResultReaders?: string[]
     capabilities?: Record<string, unknown>
   }
+  settings?: {
+    modelName?: string | null
+    schema?: SettingsModalSchema | null
+  }
   endpoints: PluginEndpointContract[]
   hash: string
 }
@@ -114,6 +120,84 @@ export interface DownloadBlobOptions {
   revokeObjectUrlDelayMs?: number
 }
 
+export type PluginSettingsValues<TSettings> = Partial<TSettings> & Record<string, unknown>
+
+export interface UsePluginSettingsOptions {
+  /** Plugin name for platform persistence. Defaults to the integrated platform plugin name. */
+  pluginName?: string
+  /** Plugin API base URL for standalone/local settings routes. Generated clients pass pluginApiPrefix. */
+  apiBaseUrl?: string
+  /** Platform API base URL for /plugins/{name}/config. Defaults to the injected platform API URL. */
+  platformApiBaseUrl?: string
+  /** SettingsModal schema generated from the backend settings_model. */
+  schema?: SettingsModalSchema | null
+  /** SettingsModal title when using settingsConfig. */
+  title?: string
+  /** Whether SettingsModal should include SDK appearance controls. */
+  showAppearance?: boolean
+  /** Load persisted values on component mount. */
+  loadOnMount?: boolean
+}
+
+export interface UsePluginSettingsReturn<TSettings = Record<string, unknown>> {
+  /** Current typed settings values. */
+  settings: ComputedRef<PluginSettingsValues<TSettings>>
+  /** Editable settings values for SettingsModal. */
+  values: Ref<PluginSettingsValues<TSettings>>
+  /** Alias for values, kept for callers that think in platform config terms. */
+  config: Ref<PluginSettingsValues<TSettings>>
+  /** Ready-to-pass AppTopBar/PluginWorkspaceView settingsConfig. */
+  settingsConfig: ComputedRef<TopBarSettingsConfig>
+  isLoading: Ref<boolean>
+  isSaving: Ref<boolean>
+  error: Ref<string | null>
+  lastLoadedAt: Ref<Date | null>
+  lastSavedAt: Ref<Date | null>
+  isDirty: ComputedRef<boolean>
+  setValues: (values: Record<string, unknown>) => void
+  load: () => Promise<void>
+  save: (values?: Record<string, unknown>) => Promise<boolean>
+  reset: () => void
+}
+
+export interface PluginEventStreamMessage<TData = string> {
+  event: string
+  data: TData
+  id?: string
+  retry?: number
+  raw: string
+}
+
+export interface PluginEventStreamOptions<TData = string> {
+  /** Override the generated or platform-injected API base URL. */
+  baseUrl?: string
+  /** Start the stream immediately. Defaults to true. */
+  immediate?: boolean
+  /** Reconnect after errors or server closes. Defaults to true. */
+  reconnect?: boolean
+  /** Delay before reconnecting after a stream failure or close. Defaults to 2000ms. */
+  reconnectDelayMs?: number
+  /** Parse `data:` as JSON before calling onMessage. */
+  parseJson?: boolean
+  /** Fetch credentials mode. Defaults to same-origin. */
+  credentials?: RequestCredentials
+  /** Extra request headers. Authorization is injected unless already supplied. */
+  headers?: Record<string, string>
+  onOpen?: () => void
+  onMessage?: (message: PluginEventStreamMessage<TData>) => void
+  onError?: (error: unknown) => void
+}
+
+export interface UsePluginEventStreamReturn<TData = string> {
+  isConnected: Ref<boolean>
+  isConnecting: Ref<boolean>
+  error: Ref<string | null>
+  lastMessage: Ref<PluginEventStreamMessage<TData> | null>
+  lastEventId: Ref<string | null>
+  start: () => void
+  stop: () => void
+}
+
 export type PluginFormDataValue =
   | string
   | number
@@ -240,7 +324,6 @@ export function getPluginPageSelectorItems(contract: PluginContract): PageSelect
     label: item.label,
     to: normalizePluginNavPath(item.path),
     icon: item.icon || pluginIcon || undefined,
-    hint: item.description || contract.plugin.name,
   }))
 }
 
@@ -337,11 +420,373 @@ export function usePluginClient<TClient>(client: TClient): TClient {
   return client
 }
 
-/** Read plugin settings exposed through the platform context. */
-export function usePluginSettings<TSettings = Record<string, unknown>>() {
-  const { plugin } = usePlatformContext()
-  const settings = computed(() => plugin.value?.settings as TSettings | undefined)
-  return { settings }
+function normalizePluginSettingsOptions(options: UsePluginSettingsOptions | string = {}): UsePluginSettingsOptions {
+  return typeof options === 'string' ? { pluginName: options } : options
+}
+
+function cloneRecord(value: Record<string, unknown>): Record<string, unknown> {
+  return { ...value }
+}
+
+function responseSettingsPayload(response: unknown): Record<string, unknown> {
+  if (!response || typeof response !== 'object') return {}
+  const data = response as {
+    config?: unknown
+    settings?: unknown
+  }
+  if (data.config && typeof data.config === 'object') {
+    return cloneRecord(data.config as Record<string, unknown>)
+  }
+  if (data.settings && typeof data.settings === 'object') {
+    return cloneRecord(data.settings as Record<string, unknown>)
+  }
+  return {}
+}
+
+/** Load, edit, and persist plugin settings from platform config or the plugin-local settings router. */
+export function usePluginSettings<TSettings = Record<string, unknown>>(
+  options: UsePluginSettingsOptions | string = {},
+): UsePluginSettingsReturn<TSettings> {
+  const resolvedOptions = normalizePluginSettingsOptions(options)
+  const injectedContext = getInjectedPlatformContext()
+  const { plugin, isIntegrated } = usePlatformContext()
+  const platformApi = useApi({ baseUrl: resolvedOptions.platformApiBaseUrl ?? injectedContext?.platformApiUrl })
+  const pluginApi = useApi({ baseUrl: resolvedOptions.apiBaseUrl ?? injectedContext?.plugin?.api_prefix })
+
+  const values = shallowRef<PluginSettingsValues<TSettings>>({} as PluginSettingsValues<TSettings>)
+  const savedValues = shallowRef<Record<string, unknown>>({})
+  const request = useRequestSyncState('Plugin settings request failed.')
+  const isLoading = ref(false)
+  const isSaving = ref(false)
+
+  const resolvedPluginName = computed(() =>
+    resolvedOptions.pluginName ?? plugin.value?.name ?? injectedContext?.plugin?.name ?? '',
+  )
+  const usesPlatformConfig = computed(() =>
+    Boolean((isIntegrated.value || injectedContext?.isIntegrated) && resolvedPluginName.value),
+  )
+  const settings = computed(() => values.value)
+  const isDirty = computed(() => JSON.stringify(values.value) !== JSON.stringify(savedValues.value))
+  const settingsConfig = computed<TopBarSettingsConfig>(() => ({
+    title: resolvedOptions.title,
+    schema: resolvedOptions.schema ?? undefined,
+    showAppearance: resolvedOptions.showAppearance,
+    values: values.value,
+  }))
+
+  function setValues(nextValues: Record<string, unknown>): void {
+    values.value = cloneRecord(nextValues) as PluginSettingsValues<TSettings>
+  }
+
+  function applyLoaded(nextValues: Record<string, unknown>): void {
+    const cloned = cloneRecord(nextValues)
+    values.value = cloned as PluginSettingsValues<TSettings>
+    savedValues.value = cloneRecord(cloned)
+  }
+
+  async function load(): Promise<void> {
+    isLoading.value = true
+    try {
+      const response = usesPlatformConfig.value
+        ? await request.run(
+          () => platformApi.get<{ plugin_name: string; config: Record<string, unknown> }>(
+            `/plugins/${encodeURIComponent(resolvedPluginName.value)}/config`,
+          ),
+          { success: 'load', errorMessage: 'Failed to load plugin settings' },
+        )
+        : await request.run(
+          () => pluginApi.get<{ settings: Record<string, unknown>; mode?: string }>('/settings'),
+          { success: 'load', errorMessage: 'Failed to load plugin settings' },
+        )
+      applyLoaded(responseSettingsPayload(response))
+    } catch {
+      // Error state is handled by request.run().
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  async function save(nextValues?: Record<string, unknown>): Promise<boolean> {
+    if (nextValues) {
+      setValues(nextValues)
+    }
+
+    isSaving.value = true
+    try {
+      const payload = cloneRecord(values.value)
+      const response = usesPlatformConfig.value
+        ? await request.run(
+          () => platformApi.patch<{ plugin_name: string; config: Record<string, unknown> }>(
+            `/plugins/${encodeURIComponent(resolvedPluginName.value)}/config`,
+            { config: payload },
+          ),
+          { success: 'save', errorMessage: 'Failed to save plugin settings' },
+        )
+        : await request.run(
+          () => pluginApi.put<{ settings: Record<string, unknown>; mode?: string }>('/settings', payload),
+          { success: 'save', errorMessage: 'Failed to save plugin settings' },
+        )
+      applyLoaded(responseSettingsPayload(response))
+      return true
+    } catch {
+      return false
+    } finally {
+      isSaving.value = false
+    }
+  }
+
+  function reset(): void {
+    values.value = cloneRecord(savedValues.value) as PluginSettingsValues<TSettings>
+    request.clearError()
+  }
+
+  onMounted(() => {
+    if (resolvedOptions.loadOnMount !== false) {
+      void load()
+    }
+  })
+
+  return {
+    settings,
+    values,
+    config: values,
+    settingsConfig,
+    isLoading,
+    isSaving,
+    error: request.error,
+    lastLoadedAt: request.lastLoadedAt,
+    lastSavedAt: request.lastSavedAt,
+    isDirty,
+    setValues,
+    load,
+    save,
+    reset,
+  }
+}
+
+function streamHeaders(options: PluginEventStreamOptions<unknown>): Headers {
+  const headers = new Headers(options.headers)
+  const authStore = useAuthStore()
+  if (!authStore.isInitialized) {
+    authStore.initialize()
+  }
+  if (authStore.token && !headers.has('Authorization')) {
+    headers.set('Authorization', `Bearer ${authStore.token}`)
+  }
+  headers.set('Accept', 'text/event-stream')
+  return headers
+}
+
+function parseSseEvent<TData>(
+  block: string,
+  parseJson: boolean,
+): PluginEventStreamMessage<TData> | null {
+  let event = 'message'
+  let id: string | undefined
+  let retry: number | undefined
+  const dataLines: string[] = []
+
+  for (const line of block.split(/\r?\n/)) {
+    if (!line || line.startsWith(':')) continue
+    const separator = line.indexOf(':')
+    const field = separator === -1 ? line : line.slice(0, separator)
+    const value = separator === -1
+      ? ''
+      : line.slice(separator + 1).replace(/^ /, '')
+
+    if (field === 'event') event = value || 'message'
+    if (field === 'data') dataLines.push(value)
+    if (field === 'id') id = value
+    if (field === 'retry') {
+      const parsed = Number(value)
+      if (Number.isFinite(parsed)) retry = parsed
+    }
+  }
+
+  if (!dataLines.length && !id && retry === undefined) return null
+  const data = dataLines.join('\n')
+  return {
+    event,
+    data: (parseJson && data ? JSON.parse(data) : data) as TData,
+    id,
+    retry,
+    raw: block,
+  }
+}
+
+function looksLikeEventStreamOptions(value: unknown): value is PluginEventStreamOptions {
+  if (!value || typeof value !== 'object') return false
+  const candidate = value as Record<string, unknown>
+  return [
+    'baseUrl',
+    'immediate',
+    'reconnect',
+    'reconnectDelayMs',
+    'parseJson',
+    'credentials',
+    'headers',
+    'onOpen',
+    'onMessage',
+    'onError',
+  ].some(key => key in candidate)
+}
+
+/** Consume a generated plugin SSE endpoint with auth headers, reconnect, and teardown. */
+export function usePluginEventStream<TData = string>(
+  contract: PluginContract,
+  endpoint: PluginEndpointDefinition,
+  options?: PluginEventStreamOptions<TData>,
+): UsePluginEventStreamReturn<TData>
+export function usePluginEventStream<TData = string>(
+  contract: PluginContract,
+  endpoint: PluginEndpointDefinition,
+  payload?: unknown,
+  options?: PluginEventStreamOptions<TData>,
+): UsePluginEventStreamReturn<TData>
+export function usePluginEventStream<TData = string>(
+  contract: PluginContract,
+  endpoint: PluginEndpointDefinition,
+  payloadOrOptions?: unknown,
+  maybeOptions?: PluginEventStreamOptions<TData>,
+): UsePluginEventStreamReturn<TData> {
+  const payload = maybeOptions === undefined && looksLikeEventStreamOptions(payloadOrOptions)
+    ? undefined
+    : payloadOrOptions
+  const options = (
+    maybeOptions === undefined && looksLikeEventStreamOptions(payloadOrOptions)
+      ? payloadOrOptions
+      : maybeOptions ?? {}
+  ) as PluginEventStreamOptions<TData>
+  const isConnected = ref(false)
+  const isConnecting = ref(false)
+  const error = ref<string | null>(null)
+  const lastMessage = shallowRef<PluginEventStreamMessage<TData> | null>(null)
+  const lastEventId = ref<string | null>(null)
+  let controller: AbortController | null = null
+  let reconnectTimer: ReturnType<typeof setTimeout> | null = null
+  let stopped = true
+
+  function clearReconnectTimer(): void {
+    if (reconnectTimer !== null) {
+      clearTimeout(reconnectTimer)
+      reconnectTimer = null
+    }
+  }
+
+  function scheduleReconnect(): void {
+    if (stopped || options.reconnect === false) return
+    clearReconnectTimer()
+    reconnectTimer = setTimeout(() => {
+      void connect()
+    }, options.reconnectDelayMs ?? 2000)
+  }
+
+  async function connect(): Promise<void> {
+    if (endpoint.method !== 'get') {
+      throw new Error(`[MINT SDK] Plugin event streams must use GET; got ${endpoint.method}`)
+    }
+    if (typeof fetch !== 'function') {
+      throw new Error('[MINT SDK] fetch is required for plugin event streams.')
+    }
+
+    controller?.abort()
+    controller = new AbortController()
+    isConnecting.value = true
+    error.value = null
+
+    try {
+      const url = buildPluginEndpointUrl(contract, endpoint, payload, {
+        baseUrl: options.baseUrl,
+      })
+      const response = await fetch(url, {
+        method: 'GET',
+        headers: streamHeaders(options as PluginEventStreamOptions<unknown>),
+        credentials: options.credentials ?? 'same-origin',
+        signal: controller.signal,
+      })
+
+      if (!response.ok) {
+        throw new Error(`Plugin event stream failed with HTTP ${response.status}`)
+      }
+      if (!response.body) {
+        throw new Error('Plugin event stream response did not include a readable body.')
+      }
+
+      options.onOpen?.()
+      isConnected.value = true
+      const reader = response.body.getReader()
+      const decoder = new TextDecoder()
+      let buffer = ''
+
+      for (;;) {
+        const { value, done } = await reader.read()
+        if (done) break
+        buffer += decoder.decode(value, { stream: true })
+
+        let boundary = buffer.search(/\r?\n\r?\n/)
+        while (boundary !== -1) {
+          const block = buffer.slice(0, boundary)
+          buffer = buffer.slice(buffer[boundary] === '\r' ? boundary + 4 : boundary + 2)
+          const message = parseSseEvent<TData>(block, options.parseJson === true)
+          if (message) {
+            lastMessage.value = message
+            if (message.id !== undefined) {
+              lastEventId.value = message.id
+            }
+            if (message.retry !== undefined) {
+              options.reconnectDelayMs = message.retry
+            }
+            options.onMessage?.(message)
+          }
+          boundary = buffer.search(/\r?\n\r?\n/)
+        }
+      }
+    } catch (err) {
+      if (!stopped && !(err instanceof DOMException && err.name === 'AbortError')) {
+        const message = err instanceof Error ? err.message : 'Plugin event stream failed'
+        error.value = message
+        options.onError?.(err)
+      }
+    } finally {
+      isConnecting.value = false
+      isConnected.value = false
+      scheduleReconnect()
+    }
+  }
+
+  function start(): void {
+    stopped = false
+    clearReconnectTimer()
+    void connect()
+  }
+
+  function stop(): void {
+    stopped = true
+    clearReconnectTimer()
+    controller?.abort()
+    controller = null
+    isConnecting.value = false
+    isConnected.value = false
+  }
+
+  if (options.immediate !== false && typeof window === 'undefined') {
+    onMounted(start)
+  }
+  onUnmounted(stop)
+
+  if (options.immediate !== false && typeof window !== 'undefined') {
+    start()
+  }
+
+  return {
+    isConnected,
+    isConnecting,
+    error,
+    lastMessage,
+    lastEventId,
+    start,
+    stop,
+  }
 }
 
 /** Read and optionally load the current platform experiment for integrated plugin views. */

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

@@ -205,10 +205,8 @@
 
 .mint-page-selector__item-label {
   flex: 1;
-}
-
-.mint-page-selector__item-hint {
-  font-size: 0.65625rem;
-  color: var(--text-muted);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }

package/src/styles/components/auto-group-modal.css

@@ -866,7 +866,7 @@
   font-size: 0.8125rem;
   color: var(--mint-error);
   background: var(--mint-error-bg);
-  border: 1px solid rgba(239, 68, 68, 0.3);
+  border: 1px solid var(--mint-error-border);
   border-radius: var(--radius);
 }
 
@@ -889,7 +889,7 @@
 
 .mint-auto-group__experiment-error {
   padding: 1.5rem;
-  border: 1px solid rgba(239, 68, 68, 0.3);
+  border: 1px solid var(--mint-error-border);
   border-radius: var(--radius-md);
   background: var(--mint-error-bg);
   font-size: 0.8125rem;
@@ -925,7 +925,7 @@
 .mint-auto-group__link-btn:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: 1px;
-  border-radius: 2px;
+  border-radius: var(--radius-sm);
 }
 
 .mint-auto-group__experiment-loaded {
@@ -1258,14 +1258,10 @@
 .mint-auto-group__preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
 .mint-auto-group__preview-panel { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
 .mint-auto-group__preview-panel h4 { margin: 0 0 10px; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
-.mint-auto-group__preview-group { border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; }
-.mint-auto-group__preview-group[open] { background: var(--bg-secondary); }
-.mint-auto-group__preview-group summary { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; padding: 0.5rem 0.875rem; }
-.mint-auto-group__preview-group[open] summary { border-bottom: 1px solid var(--border); }
-.mint-auto-group__preview-dot { width: 10px; height: 10px; border-radius: 9999px; flex-shrink: 0; }
-.mint-auto-group__preview-count { margin-left: auto; font-family: 'Fira Code', monospace; font-size: 12px; color: var(--text-secondary); background: var(--bg-primary); border: 1px solid var(--border); padding: 2px 8px; border-radius: 9999px; }
-.mint-auto-group__preview-samples { display: flex; flex-wrap: wrap; gap: 6px; padding: 0.5rem 0.875rem 0.625rem; }
-.mint-auto-group__preview-sample { font-family: 'Fira Code', monospace; font-size: 11.5px; color: var(--text-primary); background: var(--bg-primary); border: 1px solid var(--border); padding: 3px 8px; border-radius: 9999px; }
+/* Nested experimental groups render as a collapsible SampleHierarchyTree; cap
+   its height so a large batch scrolls inside the panel instead of the modal. */
+.mint-auto-group__preview-tree { max-height: 320px; overflow-y: auto; }
+.mint-auto-group__preview-empty { margin: 0; font-size: 13px; color: var(--text-muted); }
 .mint-auto-group__qc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
 .mint-auto-group__qc-chip { background: var(--mint-warning-bg); color: #92400E; border: 1px solid var(--mint-warning-border); padding: 4px 10px; border-radius: 9999px; font-size: 12px; }
 .mint-auto-group__fingerprint { margin-top: 14px; }

package/src/styles/components/button.css

@@ -78,10 +78,11 @@
 
 .mint-button--secondary {
   background-color: var(--bg-secondary);
-  color: var(--text-primary);
+  color: var(--text-secondary-strong);
   border: 1px solid var(--border-color);
-  /* Intentionally tighter + fainter than the colored variants —
-     secondary shouldn't "float" the way filled buttons do. */
+  /* Secondary is lower-emphasis through surface, border, and shadow, but keeps
+     medium label weight so it still reads as an actionable button. */
+  font-weight: 500;
   box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
 }
 
@@ -125,7 +126,9 @@
 
 .mint-button--ghost {
   background-color: transparent;
-  color: var(--text-primary);
+  color: var(--text-secondary-strong);
+  /* Lowest-emphasis variant: regular (400) weight, below secondary. */
+  font-weight: 400;
 }
 
 .mint-button--ghost:hover:not(.mint-button--disabled) {
@@ -136,9 +139,16 @@
 .mint-button--sm {
   padding: 0.375rem 0.75rem;
   font-size: 0.875rem;
+  /* Small buttons live in dense/secondary contexts — regular (400) weight
+     keeps the compact label from reading too heavy. Applies to all variants. */
+  font-weight: 400;
   min-height: var(--form-height-sm);
 }
 
+.mint-button--secondary.mint-button--sm {
+  font-weight: 500;
+}
+
 .mint-button--md {
   padding: 0.5rem 1rem;
   font-size: 0.875rem;

package/src/styles/components/modal.css

@@ -165,6 +165,9 @@
 
 .mint-modal__close {
   flex-shrink: 0;
+  /* Always pin the close affordance to the right edge of the header, even when
+     there is no title/subtitle (no flex-1 header-text to push it over). */
+  margin-left: auto;
   width: 1.75rem;
   height: 1.75rem;
   padding: 0;

package/src/styles/components/sample-selector.css

@@ -239,6 +239,11 @@
   background-color: var(--bg-hover);
 }
 
+.mint-sample-selector__expand-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
 .mint-sample-selector__expand-icon {
   width: 0.875rem;
   height: 0.875rem;
@@ -363,6 +368,11 @@
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 0 0 3px rgba(0, 0, 0, 0.06);
 }
 
+.mint-sample-selector__color-dot--clickable:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
 /* Count Badge */
 .mint-sample-selector__count-badge {
   font-size: 0.625rem;
@@ -396,6 +406,13 @@
   color: var(--mint-error);
 }
 
+/* Reveal the hover-hidden delete button when reached by keyboard, and ring it. */
+.mint-sample-selector__delete-btn:focus-visible {
+  outline: none;
+  opacity: 1;
+  box-shadow: var(--focus-ring);
+}
+
 .mint-sample-selector__delete-btn--hidden {
   opacity: 0;
 }

package/src/styles/variables.css

@@ -22,6 +22,11 @@
   --text-primary: #1E293B;
   --text-secondary: #64748B;
   --text-muted: #94A3B8;
+  /* De-emphasized label for low-emphasis interactive controls (secondary/ghost
+     buttons). A true dark gray — softer than --text-primary's near-black — that
+     still clears WCAG AA (4.5:1) on the secondary hover surface (--bg-tertiary),
+     where --text-secondary would drop to ~4.35:1. */
+  --text-secondary-strong: #475569;
 
   /* Brand colors */
   --color-primary: #6366F1;
@@ -129,6 +134,9 @@ html.dark {
   --text-primary: #F8FAFC;
   --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). */
+  --text-secondary-strong: #CBD5E1;
 
   /* Scrollbar */
   --scrollbar-track: #1E293B;