@morscherlab/mint-sdk 1.0.0-alpha.2

package/src/components/AlertBox.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+/** Inline alert banner with semantic icon, title, message slot, optional action button, and optional dismiss button. */
+import { useSlots } from 'vue'
+import type { AlertType } from '../types'
+
+interface Props {
+  type?: AlertType
+  title?: string
+  dismissible?: boolean
+  actionLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'info',
+  dismissible: false,
+})
+
+const emit = defineEmits<{
+  dismiss: []
+  action: []
+}>()
+
+const slots = useSlots()
+const hasActions = () => !!props.actionLabel || !!slots.actions
+</script>
+
+<template>
+  <div
+    class="mld-alert"
+    :class="`mld-alert--${props.type}`"
+    role="alert"
+  >
+    <!-- Lucide circle-check -->
+    <svg v-if="props.type === 'success'" class="mld-alert__icon mld-alert__icon--success" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" />
+    </svg>
+    <!-- Lucide circle-x -->
+    <svg v-else-if="props.type === 'error'" class="mld-alert__icon mld-alert__icon--error" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="12" cy="12" r="10" /><path d="m15 9-6 6" /><path d="m9 9 6 6" />
+    </svg>
+    <!-- Lucide triangle-alert -->
+    <svg v-else-if="props.type === 'warning'" class="mld-alert__icon mld-alert__icon--warning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <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" />
+    </svg>
+    <!-- Lucide info -->
+    <svg v-else class="mld-alert__icon mld-alert__icon--info" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />
+    </svg>
+
+    <div class="mld-alert__content">
+      <h4 v-if="props.title" class="mld-alert__title">
+        {{ props.title }}
+      </h4>
+      <div class="mld-alert__message">
+        <slot />
+      </div>
+    </div>
+
+    <div v-if="hasActions()" class="mld-alert__actions">
+      <slot name="actions">
+        <button
+          type="button"
+          class="mld-alert__action-btn"
+          :class="`mld-alert__action-btn--${props.type}`"
+          @click="emit('action')"
+        >
+          {{ props.actionLabel }}
+        </button>
+      </slot>
+    </div>
+
+    <button
+      v-if="props.dismissible"
+      type="button"
+      class="mld-alert__dismiss"
+      aria-label="Dismiss"
+      @click="emit('dismiss')"
+    >
+      <svg class="mld-alert__dismiss-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/alert-box.css';
+</style>

package/src/components/AppAvatarMenu.story.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import AppAvatarMenu from './AppAvatarMenu.vue'
+import type { AccountMenuItem } from '../types'
+
+function handleSelect(item: AccountMenuItem) {
+  console.log('Selected:', item.id)
+}
+
+function handleSignOut() {
+  console.log('Sign out')
+}
+
+const basicItems: AccountMenuItem[] = [
+  { id: 'profile', label: 'Profile' },
+  { id: 'settings', label: 'Settings' },
+]
+
+const richItems: AccountMenuItem[] = [
+  { id: 'profile', label: 'Profile' },
+  { id: 'settings', label: 'Settings' },
+  { id: 'divider-1', divider: true, label: '' },
+  { id: 'admin', label: 'Admin panel' },
+  { id: 'billing', label: 'Billing', rightLabel: 'Pro' },
+]
+
+const devToolsItems: AccountMenuItem[] = [
+  { id: 'profile', label: 'Profile' },
+  { id: 'divider-1', divider: true, label: '' },
+  { id: 'api-keys', label: 'API keys' },
+  { id: 'webhooks', label: 'Webhooks' },
+  { id: 'docs', label: 'Documentation', href: 'https://docs.morscher.lab' },
+]
+
+function initState() {
+  return {
+    userName: 'Estrella',
+    userInitial: '',
+    userEmail: 'estrella@morscher.lab',
+    showSignOut: true,
+    signOutLabel: 'Sign out',
+  }
+}
+</script>
+
+<template>
+  <Story title="Layout/AppAvatarMenu">
+    <Variant title="Pill with name (primary)">
+      <!-- Default pattern used in the platform topbar: avatar circle +
+           username text, matching GitHub / Linear / Notion conventions. -->
+      <div style="padding: 2rem; display: flex; justify-content: flex-start; background: var(--bg-primary); min-height: 8rem;">
+        <AppAvatarMenu
+          user-name="Estrella"
+          user-email="estrella@morscher.lab"
+          :items="basicItems"
+          @select="handleSelect"
+          @sign-out="handleSignOut"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Avatar only (no username)">
+      <!-- What renders in dev/signed-out mode — the name span v-if hides
+           when `user-name` is absent, leaving just the gradient chip. -->
+      <div style="padding: 2rem; display: flex; justify-content: flex-start; background: var(--bg-primary); min-height: 8rem;">
+        <AppAvatarMenu
+          :items="basicItems"
+          :show-sign-out="false"
+          @select="handleSelect"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With email in panel header">
+      <div style="padding: 2rem; display: flex; justify-content: flex-start; background: var(--bg-primary); min-height: 12rem;">
+        <AppAvatarMenu
+          user-name="Estrella"
+          user-email="estrella@morscher.lab"
+          :items="richItems"
+          @select="handleSelect"
+          @sign-out="handleSignOut"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With divider + right-labels">
+      <div style="padding: 2rem; display: flex; justify-content: flex-start; background: var(--bg-primary); min-height: 12rem;">
+        <AppAvatarMenu
+          user-name="Ada Lovelace"
+          user-initial="AL"
+          user-email="ada@morscher.lab"
+          :items="richItems"
+          @select="handleSelect"
+          @sign-out="handleSignOut"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Developer tools menu">
+      <!-- Menu items with `href` render as anchor tags that open external
+           documentation links in a new tab. -->
+      <div style="padding: 2rem; display: flex; justify-content: flex-start; background: var(--bg-primary); min-height: 12rem;">
+        <AppAvatarMenu
+          user-name="Marie Curie"
+          user-email="marie@morscher.lab"
+          :items="devToolsItems"
+          sign-out-label="End session"
+          @select="handleSelect"
+          @sign-out="handleSignOut"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Custom avatar slot">
+      <!-- Consumers can override the avatar chip content (e.g., an image,
+           an emoji, an icon) while keeping the pill trigger + dropdown. -->
+      <div style="padding: 2rem; display: flex; justify-content: flex-start; background: var(--bg-primary); min-height: 8rem;">
+        <AppAvatarMenu
+          user-name="Rosalind Franklin"
+          :items="basicItems"
+          @select="handleSelect"
+          @sign-out="handleSignOut"
+        >
+          <template #avatar>
+            <span style="font-size: 0.875rem;">🧬</span>
+          </template>
+        </AppAvatarMenu>
+      </div>
+    </Variant>
+
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; display: flex; justify-content: flex-start; background: var(--bg-primary); min-height: 10rem;">
+          <AppAvatarMenu
+            :user-name="state.userName"
+            :user-initial="state.userInitial"
+            :user-email="state.userEmail"
+            :items="basicItems"
+            :show-sign-out="state.showSignOut"
+            :sign-out-label="state.signOutLabel"
+            @select="handleSelect"
+            @sign-out="handleSignOut"
+          />
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.userName" title="User name" />
+        <HstText v-model="state.userInitial" title="User initial (override)" />
+        <HstText v-model="state.userEmail" title="User email" />
+        <HstCheckbox v-model="state.showSignOut" title="Show sign out" />
+        <HstText v-model="state.signOutLabel" title="Sign out label" />
+      </template>
+    </Variant>
+  </Story>
+</template>

package/src/components/AppAvatarMenu.vue

@@ -0,0 +1,184 @@
+<script setup lang="ts">
+/** Avatar-triggered dropdown with user name/email header, configurable menu items, dividers, and a sign-out action. */
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import type { AccountMenuItem } from '../types/components'
+
+interface Props {
+  userName?: string
+  userInitial?: string
+  userEmail?: string
+  items?: AccountMenuItem[]
+  showSignOut?: boolean
+  signOutLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [] as AccountMenuItem[],
+  showSignOut: true,
+  signOutLabel: 'Sign out',
+})
+
+const emit = defineEmits<{
+  select: [item: AccountMenuItem]
+  'sign-out': []
+  'menu-open': []
+  'menu-close': []
+}>()
+
+const isOpen = ref(false)
+const rootRef = ref<HTMLElement | null>(null)
+
+const initials = computed(() => {
+  if (props.userInitial) return props.userInitial.slice(0, 2).toUpperCase()
+  if (props.userName) {
+    const parts = props.userName.trim().split(/\s+/)
+    if (parts.length >= 2) return (parts[0]!.charAt(0) + parts[1]!.charAt(0)).toUpperCase()
+    return parts[0]!.slice(0, 2).toUpperCase()
+  }
+  return 'U'
+})
+
+function toggle() {
+  isOpen.value = !isOpen.value
+  if (isOpen.value) {
+    emit('menu-open')
+  } else {
+    emit('menu-close')
+  }
+}
+
+function handleSelect(item: AccountMenuItem) {
+  if (item.divider) return
+  emit('select', item)
+  isOpen.value = false
+  emit('menu-close')
+}
+
+function handleSignOut() {
+  emit('sign-out')
+  isOpen.value = false
+  emit('menu-close')
+}
+
+function handleClickOutside(event: MouseEvent) {
+  if (!isOpen.value) return
+  const target = event.target as Node
+  if (rootRef.value && !rootRef.value.contains(target)) {
+    isOpen.value = false
+    emit('menu-close')
+  }
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && isOpen.value) {
+    isOpen.value = false
+    emit('menu-close')
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+  document.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+  document.removeEventListener('keydown', handleKeydown)
+})
+</script>
+
+<template>
+  <div ref="rootRef" class="mld-avatar-menu">
+    <button
+      type="button"
+      class="mld-avatar-menu__trigger"
+      :class="{ 'mld-avatar-menu__trigger--open': isOpen }"
+      :aria-expanded="isOpen"
+      aria-haspopup="menu"
+      :title="userName ? `${userName} · Account menu` : 'Account menu'"
+      @click.stop="toggle"
+    >
+      <span class="mld-avatar-menu__avatar">
+        <slot name="avatar" :initials="initials">
+          {{ initials }}
+        </slot>
+      </span>
+      <span v-if="userName" class="mld-avatar-menu__name">{{ userName }}</span>
+    </button>
+
+    <div v-if="isOpen" class="mld-avatar-menu__panel" role="menu">
+      <div v-if="userName || userEmail" class="mld-avatar-menu__header">
+        <div v-if="userName" class="mld-avatar-menu__user-name">{{ userName }}</div>
+        <div v-if="userEmail" class="mld-avatar-menu__user-email">{{ userEmail }}</div>
+      </div>
+
+      <slot name="items" :close="() => (isOpen = false)">
+        <template v-for="item in items" :key="item.id">
+          <div v-if="item.divider" class="mld-avatar-menu__divider" role="separator" />
+          <a
+            v-else-if="item.href"
+            :href="item.href"
+            :class="['mld-avatar-menu__item', { 'mld-avatar-menu__item--danger': item.danger }]"
+            role="menuitem"
+            @click="handleSelect(item)"
+          >
+            <span v-if="item.icon" class="mld-avatar-menu__item-icon">
+              <slot name="item-icon" :item="item" />
+            </span>
+            <span class="mld-avatar-menu__item-label">{{ item.label }}</span>
+            <span v-if="item.rightLabel" class="mld-avatar-menu__item-right">{{ item.rightLabel }}</span>
+          </a>
+          <router-link
+            v-else-if="item.to"
+            :to="item.to"
+            :class="['mld-avatar-menu__item', { 'mld-avatar-menu__item--danger': item.danger }]"
+            role="menuitem"
+            @click="handleSelect(item)"
+          >
+            <span v-if="item.icon" class="mld-avatar-menu__item-icon">
+              <slot name="item-icon" :item="item" />
+            </span>
+            <span class="mld-avatar-menu__item-label">{{ item.label }}</span>
+            <span v-if="item.rightLabel" class="mld-avatar-menu__item-right">{{ item.rightLabel }}</span>
+          </router-link>
+          <button
+            v-else
+            type="button"
+            :class="['mld-avatar-menu__item', { 'mld-avatar-menu__item--danger': item.danger }]"
+            role="menuitem"
+            @click="handleSelect(item)"
+          >
+            <span v-if="item.icon" class="mld-avatar-menu__item-icon">
+              <slot name="item-icon" :item="item" />
+            </span>
+            <span class="mld-avatar-menu__item-label">{{ item.label }}</span>
+            <span v-if="item.rightLabel" class="mld-avatar-menu__item-right">{{ item.rightLabel }}</span>
+          </button>
+        </template>
+      </slot>
+
+      <template v-if="showSignOut">
+        <div class="mld-avatar-menu__divider" role="separator" />
+        <button
+          type="button"
+          class="mld-avatar-menu__item mld-avatar-menu__item--danger"
+          role="menuitem"
+          @click="handleSignOut"
+        >
+          <span class="mld-avatar-menu__item-icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+              <polyline points="16 17 21 12 16 7" />
+              <line x1="21" y1="12" x2="9" y2="12" />
+            </svg>
+          </span>
+          <span class="mld-avatar-menu__item-label">{{ signOutLabel }}</span>
+        </button>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/app-avatar-menu.css';
+</style>

package/src/components/AppContainer.story.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import AppContainer from './AppContainer.vue'
+</script>
+
+<template>
+  <Story title="Layout/AppContainer">
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem;">
+          <AppContainer
+            :scrollable="state.scrollable"
+            :direction="state.direction || undefined"
+            :gap="state.gap"
+          >
+            <div style="padding: 1.5rem;">
+              <h3 style="margin: 0 0 0.5rem; color: var(--text-primary, #1e293b);">Container Content</h3>
+              <p style="margin: 0; color: var(--text-muted, #94a3b8);">
+                This content is wrapped in an AppContainer component.
+              </p>
+            </div>
+          </AppContainer>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstCheckbox v-model="state.scrollable" title="Scrollable" />
+        <HstSelect
+          v-model="state.direction"
+          title="Direction"
+          :options="[
+            { label: 'none (card)', value: '' },
+            { label: 'row', value: 'row' },
+            { label: 'column', value: 'column' },
+          ]"
+        />
+        <HstText v-model="state.gap" title="Gap" />
+      </template>
+    </Variant>
+
+    <Variant title="Card Mode (Default)">
+      <div style="padding: 2rem;">
+        <AppContainer>
+          <div style="padding: 1.5rem;">
+            <h3 style="margin: 0 0 0.5rem; color: var(--text-primary, #1e293b);">Card Container</h3>
+            <p style="margin: 0; color: var(--text-muted, #94a3b8);">
+              Default card mode with background and border styling.
+            </p>
+          </div>
+        </AppContainer>
+      </div>
+    </Variant>
+
+    <Variant title="Row Layout">
+      <div style="padding: 2rem;">
+        <AppContainer direction="row" gap="1rem">
+          <div style="padding: 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.5rem; flex: 1;">
+            <p style="margin: 0; color: var(--text-primary, #1e293b);">Panel 1</p>
+          </div>
+          <div style="padding: 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.5rem; flex: 1;">
+            <p style="margin: 0; color: var(--text-primary, #1e293b);">Panel 2</p>
+          </div>
+          <div style="padding: 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.5rem; flex: 1;">
+            <p style="margin: 0; color: var(--text-primary, #1e293b);">Panel 3</p>
+          </div>
+        </AppContainer>
+      </div>
+    </Variant>
+
+    <Variant title="Column Layout">
+      <div style="padding: 2rem;">
+        <AppContainer direction="column" gap="0.75rem">
+          <div style="padding: 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.5rem;">
+            <p style="margin: 0; color: var(--text-primary, #1e293b);">Section A</p>
+          </div>
+          <div style="padding: 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.5rem;">
+            <p style="margin: 0; color: var(--text-primary, #1e293b);">Section B</p>
+          </div>
+          <div style="padding: 1rem; background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.5rem;">
+            <p style="margin: 0; color: var(--text-primary, #1e293b);">Section C</p>
+          </div>
+        </AppContainer>
+      </div>
+    </Variant>
+
+    <Variant title="Scrollable">
+      <div style="padding: 2rem;">
+        <AppContainer :scrollable="true">
+          <div style="padding: 1.5rem; height: 200px; overflow: hidden;">
+            <h3 style="margin: 0 0 1rem; color: var(--text-primary, #1e293b);">Scrollable Container</h3>
+            <div style="height: 400px;">
+              <p style="color: var(--text-muted, #94a3b8);">This container has more content than its visible area. Scroll to see more.</p>
+              <p style="color: var(--text-muted, #94a3b8);">Line 1 of many...</p>
+              <p style="color: var(--text-muted, #94a3b8);">Line 2 of many...</p>
+              <p style="color: var(--text-muted, #94a3b8);">Line 3 of many...</p>
+              <p style="color: var(--text-muted, #94a3b8);">Line 4 of many...</p>
+              <p style="color: var(--text-muted, #94a3b8);">Line 5 of many...</p>
+              <p style="color: var(--text-muted, #94a3b8);">Line 6 of many...</p>
+            </div>
+          </div>
+        </AppContainer>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/AppContainer.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+/** Content card with optional scroll lock, or a transparent flex layout shell with configurable direction and gap. */
+import { computed } from 'vue'
+
+interface Props {
+  /** Makes the container scrollable (overflow-y: auto). Ignored when direction is set. */
+  scrollable?: boolean
+  /** Renders as a transparent flex container instead of a card. */
+  direction?: 'row' | 'column'
+  /** Flex gap between children. Only applies when direction is set. */
+  gap?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  scrollable: false,
+  gap: '1rem',
+})
+
+const isLayout = computed(() => !!props.direction)
+</script>
+
+<template>
+  <div
+    class="mld-container"
+    :class="
+      isLayout
+        ? ['mld-container--layout', direction === 'row' ? 'mld-container--row' : 'mld-container--column']
+        : ['mld-container--card', scrollable ? 'mld-container--scrollable' : '']
+    "
+    :style="isLayout ? { gap } : undefined"
+  >
+    <slot />
+  </div>
+</template>