@morscherlab/mint-sdk 1.0.0-alpha.2

package/src/stores/settings.ts

@@ -0,0 +1,218 @@
+import { defineStore } from 'pinia'
+import { ref, watch } from 'vue'
+import type { ThemeMode, ColorPalette, TableDensity } from '../types'
+
+declare global {
+  interface ImportMetaEnv {
+    readonly VITE_API_PREFIX?: string
+  }
+
+  interface ImportMeta {
+    readonly env: ImportMetaEnv
+  }
+}
+
+export interface SettingsState {
+  serverHost: string
+  serverPort: number
+  requestTimeout: number
+  wsAutoReconnect: boolean
+  wsReconnectInterval: number
+  theme: ThemeMode
+  colorPalette: ColorPalette
+  tableDensity: TableDensity
+}
+
+const STORAGE_KEY = 'mld-settings'
+
+function getDefaultServerHost(): string {
+  if (typeof window !== 'undefined' && window.location.hostname !== 'localhost') {
+    return window.location.hostname
+  }
+  return 'localhost'
+}
+
+function getDefaultServerPort(): number {
+  if (typeof window !== 'undefined') {
+    if (window.location.port) {
+      return parseInt(window.location.port, 10)
+    }
+    // Standard ports: 443 for HTTPS, 80 for HTTP (browser omits from location.port)
+    return window.location.protocol === 'https:' ? 443 : 80
+  }
+  return 8000
+}
+
+const defaultSettings: SettingsState = {
+  serverHost: getDefaultServerHost(),
+  serverPort: getDefaultServerPort(),
+  requestTimeout: 120000,
+  wsAutoReconnect: true,
+  wsReconnectInterval: 5000,
+  theme: 'system',
+  colorPalette: 'default',
+  tableDensity: 'normal',
+}
+
+export const colorPalettes: Record<ColorPalette, { name: string; hues: [number, number] }> = {
+  default: { name: 'Default (Cyan-Pink)', hues: [180, 320] },
+  colorblind: { name: 'Colorblind-friendly', hues: [45, 260] },
+  viridis: { name: 'Viridis', hues: [280, 80] },
+  pastel: { name: 'Pastel', hues: [200, 340] },
+}
+
+function loadSettings(): SettingsState {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY)
+    if (stored) {
+      const parsed = JSON.parse(stored)
+      return { ...defaultSettings, ...parsed }
+    }
+  } catch (e) {
+    console.warn('Failed to load settings from localStorage:', e)
+  }
+  return { ...defaultSettings }
+}
+
+function saveSettings(settings: SettingsState): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(settings))
+  } catch (e) {
+    console.warn('Failed to save settings to localStorage:', e)
+  }
+}
+
+export const useSettingsStore = defineStore('mld-settings', () => {
+  // State
+  const serverHost = ref(defaultSettings.serverHost)
+  const serverPort = ref(defaultSettings.serverPort)
+  const requestTimeout = ref(defaultSettings.requestTimeout)
+  const wsAutoReconnect = ref(defaultSettings.wsAutoReconnect)
+  const wsReconnectInterval = ref(defaultSettings.wsReconnectInterval)
+  const theme = ref<ThemeMode>(defaultSettings.theme)
+  const colorPalette = ref<ColorPalette>(defaultSettings.colorPalette)
+  const tableDensity = ref<TableDensity>(defaultSettings.tableDensity)
+
+  // API prefix - can be configured via env variable VITE_API_PREFIX
+  const apiPrefix: string = (import.meta.env?.VITE_API_PREFIX as string | undefined) ?? '/api'
+
+  function _isSameOrigin(): { same: boolean; currentHost: string; currentPort: string } {
+    const currentHost = typeof window !== 'undefined' ? window.location.hostname : 'localhost'
+    const currentPort = typeof window !== 'undefined' ? window.location.port : '8000'
+    const effectivePort = currentPort || (window.location.protocol === 'https:' ? '443' : '80')
+    const same =
+      (serverHost.value === currentHost && String(serverPort.value) === effectivePort) ||
+      (serverHost.value === 'localhost' && currentHost !== 'localhost')
+    return { same, currentHost, currentPort }
+  }
+
+  function getApiBaseUrl(): string {
+    const { same } = _isSameOrigin()
+    if (same) return apiPrefix
+    return `http://${serverHost.value}:${serverPort.value}${apiPrefix}`
+  }
+
+  function getWsBaseUrl(): string {
+    const { same, currentHost, currentPort } = _isSameOrigin()
+    const protocol = typeof window !== 'undefined' && window.location.protocol === 'https:' ? 'wss:' : 'ws:'
+    if (same) return `${protocol}//${currentHost}${currentPort ? ':' + currentPort : ''}${apiPrefix}`
+    return `ws://${serverHost.value}:${serverPort.value}${apiPrefix}`
+  }
+
+  let _initialized = false
+
+  function initialize() {
+    if (_initialized) return
+    _initialized = true
+
+    const loaded = loadSettings()
+    serverHost.value = loaded.serverHost
+    serverPort.value = loaded.serverPort
+    requestTimeout.value = loaded.requestTimeout
+    wsAutoReconnect.value = loaded.wsAutoReconnect
+    wsReconnectInterval.value = loaded.wsReconnectInterval
+    theme.value = loaded.theme
+    colorPalette.value = loaded.colorPalette
+    tableDensity.value = loaded.tableDensity
+
+    applyTheme()
+  }
+
+  function applyTheme() {
+    const dark = theme.value === 'system'
+      ? window.matchMedia('(prefers-color-scheme: dark)').matches
+      : theme.value === 'dark'
+    document.documentElement.classList.toggle('dark', dark)
+  }
+
+  watch(theme, () => {
+    applyTheme()
+    persistSettings()
+  })
+
+  if (typeof window !== 'undefined') {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+      if (theme.value === 'system') {
+        applyTheme()
+      }
+    })
+  }
+
+  function persistSettings() {
+    saveSettings({
+      serverHost: serverHost.value,
+      serverPort: serverPort.value,
+      requestTimeout: requestTimeout.value,
+      wsAutoReconnect: wsAutoReconnect.value,
+      wsReconnectInterval: wsReconnectInterval.value,
+      theme: theme.value,
+      colorPalette: colorPalette.value,
+      tableDensity: tableDensity.value,
+    })
+  }
+
+  watch([serverHost, serverPort, requestTimeout, wsAutoReconnect, wsReconnectInterval, colorPalette, tableDensity], () => {
+    persistSettings()
+  })
+
+  function resetToDefaults() {
+    serverHost.value = defaultSettings.serverHost
+    serverPort.value = defaultSettings.serverPort
+    requestTimeout.value = defaultSettings.requestTimeout
+    wsAutoReconnect.value = defaultSettings.wsAutoReconnect
+    wsReconnectInterval.value = defaultSettings.wsReconnectInterval
+    theme.value = defaultSettings.theme
+    colorPalette.value = defaultSettings.colorPalette
+    tableDensity.value = defaultSettings.tableDensity
+  }
+
+  function getPaletteHues(): [number, number] {
+    return colorPalettes[colorPalette.value].hues
+  }
+
+  function isDark(): boolean {
+    if (theme.value === 'system') {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches
+    }
+    return theme.value === 'dark'
+  }
+
+  return {
+    serverHost,
+    serverPort,
+    requestTimeout,
+    wsAutoReconnect,
+    wsReconnectInterval,
+    theme,
+    colorPalette,
+    tableDensity,
+    initialize,
+    applyTheme,
+    persistSettings,
+    resetToDefaults,
+    getPaletteHues,
+    isDark,
+    getApiBaseUrl,
+    getWsBaseUrl,
+  }
+})

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

@@ -0,0 +1,150 @@
+/* AlertBox Component Styles */
+
+.mld-alert {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.875rem 1rem;
+  border: 1px solid;
+  border-radius: var(--radius-md);
+}
+
+.mld-alert--success {
+  background-color: var(--mint-success-bg);
+  border-color: var(--mint-success-border);
+}
+
+.mld-alert--error {
+  background-color: var(--mint-error-bg);
+  border-color: var(--mint-error-border);
+}
+
+.mld-alert--warning {
+  background-color: var(--mint-warning-bg);
+  border-color: var(--mint-warning-border);
+}
+
+.mld-alert--info {
+  background-color: var(--mint-info-bg);
+  border-color: var(--mint-info-border);
+}
+
+.mld-alert__icon {
+  width: 1.125rem;
+  height: 1.125rem;
+  flex-shrink: 0;
+}
+
+.mld-alert__icon--success { color: var(--mint-success-hover); }
+.mld-alert__icon--error   { color: var(--mint-error-hover); }
+.mld-alert__icon--warning { color: var(--mint-warning-hover); }
+.mld-alert__icon--info    { color: var(--color-primary-hover); }
+
+.mld-alert__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.mld-alert__title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  line-height: 1.4;
+  margin-top: 0 !important;
+  margin-bottom: 0.25rem !important;
+  padding: 0 !important;
+}
+
+.mld-alert--success .mld-alert__title { color: var(--mint-success-hover); }
+.mld-alert--error   .mld-alert__title { color: var(--mint-error-hover); }
+.mld-alert--warning .mld-alert__title { color: var(--mint-warning-hover); }
+.mld-alert--info    .mld-alert__title { color: var(--color-primary-hover); }
+
+.mld-alert__message {
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: var(--text-secondary);
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  padding: 0 !important;
+}
+
+.mld-alert__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  align-self: center;
+  flex-shrink: 0;
+}
+
+.mld-alert__action-btn {
+  padding: 0.25rem 0.625rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: var(--radius-sm);
+  border: 1px solid;
+  background: transparent;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+  white-space: nowrap;
+}
+
+.mld-alert__action-btn--success {
+  color: var(--mint-success);
+  border-color: var(--mint-success);
+}
+
+.mld-alert__action-btn--success:hover {
+  background-color: var(--mint-success);
+  color: white;
+}
+
+.mld-alert__action-btn--error {
+  color: var(--mint-error);
+  border-color: var(--mint-error);
+}
+
+.mld-alert__action-btn--error:hover {
+  background-color: var(--mint-error);
+  color: white;
+}
+
+.mld-alert__action-btn--warning {
+  color: var(--mint-warning);
+  border-color: var(--mint-warning);
+}
+
+.mld-alert__action-btn--warning:hover {
+  background-color: var(--mint-warning);
+  color: white;
+}
+
+.mld-alert__action-btn--info {
+  color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+.mld-alert__action-btn--info:hover {
+  background-color: var(--color-primary);
+  color: white;
+}
+
+.mld-alert__dismiss {
+  padding: 0.25rem;
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: color 0.15s ease, background-color 0.15s ease;
+}
+
+.mld-alert__dismiss:hover {
+  color: var(--text-primary);
+  background-color: var(--bg-tertiary);
+}
+
+.mld-alert__dismiss-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}

package/src/styles/components/app-avatar-menu.css

@@ -0,0 +1,155 @@
+/* AppAvatarMenu — avatar button + dropdown */
+
+.mld-avatar-menu {
+  position: relative;
+  flex-shrink: 0;
+}
+
+/* Pill trigger — avatar circle + username text on the right. Matches the
+   legacy `.mld-topbar__profile-btn` convention (GitHub/Linear-style). */
+.mld-avatar-menu__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.75rem 0.25rem 0.25rem;
+  border: none;
+  background: transparent;
+  border-radius: var(--radius);
+  font-family: inherit;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.mld-avatar-menu__trigger:hover,
+.mld-avatar-menu__trigger--open {
+  background: var(--bg-hover);
+}
+
+.mld-avatar-menu__trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* Gradient avatar chip inside the trigger */
+.mld-avatar-menu__avatar {
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: white;
+  background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 100%);
+  flex-shrink: 0;
+}
+
+/* Username next to the avatar — hidden below 640px to preserve space */
+.mld-avatar-menu__name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+
+@media (max-width: 640px) {
+  .mld-avatar-menu__name {
+    display: none;
+  }
+
+  .mld-avatar-menu__trigger {
+    padding: 0.25rem;
+  }
+}
+
+.mld-avatar-menu__panel {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  right: 0;
+  width: 13.75rem;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  padding: 0.375rem;
+  z-index: 60;
+}
+
+.mld-avatar-menu__header {
+  padding: 0.5rem 0.625rem 0.625rem;
+  border-bottom: 1px solid var(--border-light);
+  margin-bottom: 0.25rem;
+}
+
+.mld-avatar-menu__user-name {
+  font-size: 0.78125rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  line-height: 1.25;
+}
+
+.mld-avatar-menu__user-email {
+  font-size: 0.6875rem;
+  color: var(--text-secondary);
+  margin-top: 0.0625rem;
+  line-height: 1.25;
+  word-break: break-all;
+}
+
+.mld-avatar-menu__item {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+  padding: 0.4375rem 0.625rem;
+  border: 0;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--text-primary);
+  font-size: 0.78125rem;
+  font-family: inherit;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color var(--mint-transition);
+}
+
+.mld-avatar-menu__item:hover {
+  background: var(--bg-hover);
+}
+
+.mld-avatar-menu__item--danger {
+  color: var(--mint-error);
+}
+
+.mld-avatar-menu__item-icon {
+  display: grid;
+  place-items: center;
+  color: var(--text-secondary);
+  flex-shrink: 0;
+}
+
+.mld-avatar-menu__item-icon svg {
+  width: 0.8125rem;
+  height: 0.8125rem;
+}
+
+.mld-avatar-menu__item--danger .mld-avatar-menu__item-icon {
+  color: var(--mint-error);
+}
+
+.mld-avatar-menu__item-label {
+  flex: 1;
+}
+
+.mld-avatar-menu__item-right {
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+}
+
+.mld-avatar-menu__divider {
+  height: 1px;
+  background: var(--border-light);
+  margin: 0.25rem 0;
+}

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

@@ -0,0 +1,33 @@
+/* Base: shared by both roles */
+.mld-container {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* Card role (default — no direction prop) */
+.mld-container--card {
+  border-radius: var(--radius-lg, 0.75rem);
+  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
+  border: 1px solid var(--border-color, var(--mint-border, #e5e7eb));
+  background-color: var(--bg-card, var(--mint-bg-card, #ffffff));
+  padding: 1rem;
+}
+
+.mld-container--scrollable {
+  overflow-y: auto;
+}
+
+/* Layout role (direction prop set) */
+.mld-container--layout {
+  display: flex;
+}
+
+.mld-container--row {
+  flex-direction: row;
+}
+
+.mld-container--column {
+  flex-direction: column;
+}

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

@@ -0,0 +1,98 @@
+/* AppLayout Component Styles */
+
+.mld-layout {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.mld-layout__topbar {
+  flex-shrink: 0;
+}
+
+.mld-layout__body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.mld-layout--sidebar-right .mld-layout__body {
+  flex-direction: row-reverse;
+}
+
+.mld-layout__sidebar {
+  flex-shrink: 0;
+  overflow: hidden;
+  max-width: 24rem;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Hide layout wrapper when inner sidebar is hidden (no panels for active view) */
+.mld-layout__sidebar:has(.mld-sidebar--hidden) {
+  display: none;
+}
+
+.mld-layout__main {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Strip topbar card variant inside layout — layout handles containment */
+.mld-layout .mld-topbar--card {
+  margin: 0;
+  width: 100%;
+  border-radius: 0;
+  box-shadow: none;
+  border: none;
+  border-bottom: 1px solid var(--border-color, var(--mint-border, #e5e7eb));
+}
+
+/* Floating variant: all sections appear as separate cards on a background */
+.mld-layout--floating {
+  background-color: var(--bg-primary, var(--mint-bg-primary, #f8fafc));
+  padding: 1rem;
+  gap: 1rem;
+}
+
+.mld-layout--floating .mld-layout__topbar {
+  border-radius: var(--radius-lg, 0.75rem);
+  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
+  border: 1px solid var(--border-color, var(--mint-border, #e5e7eb));
+}
+
+.mld-layout--floating .mld-layout__body {
+  gap: 1rem;
+}
+
+.mld-layout--floating .mld-layout__sidebar {
+  border-radius: var(--radius-lg, 0.75rem);
+  overflow: hidden;
+  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
+  border: 1px solid var(--border-color, var(--mint-border, #e5e7eb));
+  background-color: var(--bg-secondary, var(--mint-bg-secondary, #f8f9fb));
+}
+
+.mld-layout--floating .mld-layout__main {
+  gap: 1rem;
+}
+
+/* In floating mode, inner components don't need borders since the wrapper provides them */
+.mld-layout--floating .mld-sidebar {
+  border-right: none;
+  border-left: none;
+}
+
+.mld-layout--floating .mld-topbar {
+  border: none;
+  border-bottom: none;
+  margin: 0;
+  width: 100%;
+  border-radius: var(--radius-lg, 0.75rem);
+  box-shadow: none;
+}