@morscherlab/mint-sdk 1.2.0-beta.3 → 1.2.0-beta.5

package/src/composables/useListSelection.ts

@@ -0,0 +1,158 @@
+import { computed, toValue, type ComputedRef, type Ref } from 'vue'
+import { useSelectionLimit, type SelectionLimitSource } from './useSelectionLimit'
+
+export type ListSelectionValue = string | number
+
+export type ListSelectionSource<T> =
+  | T
+  | Ref<T>
+  | ComputedRef<T>
+  | (() => T)
+
+export type WidenListSelectionValue<TValue extends ListSelectionValue> =
+  TValue extends string ? string : TValue extends number ? number : TValue
+
+export interface UseListSelectionOptions<
+  TItem,
+  TValue extends ListSelectionValue = ListSelectionValue,
+> {
+  selected: ListSelectionSource<readonly TValue[]>
+  items?: ListSelectionSource<readonly TItem[]>
+  getValue?: (item: TItem) => TValue
+  disabled?: ListSelectionSource<boolean | null | undefined>
+  max?: SelectionLimitSource<number | null | undefined>
+}
+
+export interface UseListSelectionReturn<TValue extends ListSelectionValue = ListSelectionValue> {
+  selectedValues: ComputedRef<TValue[]>
+  selectedSet: ComputedRef<Set<TValue>>
+  itemValues: ComputedRef<TValue[]>
+  selectedCount: ComputedRef<number>
+  itemCount: ComputedRef<number>
+  isAllSelected: ComputedRef<boolean>
+  isLimited: ComputedRef<boolean>
+  isAtLimit: ComputedRef<boolean>
+  canAddMore: ComputedRef<boolean>
+  remaining: ComputedRef<number | undefined>
+  isSelected: (value: TValue) => boolean
+  isFullySelected: (values: readonly TValue[]) => boolean
+  isPartiallySelected: (values: readonly TValue[]) => boolean
+  selectValues: (values: readonly TValue[]) => TValue[]
+  toggleValue: (value: TValue) => TValue[]
+  toggleValues: (values: readonly TValue[]) => TValue[]
+  selectAll: () => TValue[]
+  toggleAll: () => TValue[]
+  clear: () => TValue[]
+}
+
+/** Shared list-selection state for checkbox lists, sample selectors, and chip selectors. */
+export function useListSelection<
+  TItem = ListSelectionValue,
+  TValue extends ListSelectionValue = TItem extends ListSelectionValue ? TItem : ListSelectionValue,
+>(options: UseListSelectionOptions<TItem, TValue>): UseListSelectionReturn<WidenListSelectionValue<TValue>> {
+  type ResolvedValue = WidenListSelectionValue<TValue>
+
+  const disabled = computed(() => toValue(options.disabled) ?? false)
+  const selectedValues = computed<ResolvedValue[]>(() => [...toValue(options.selected)] as ResolvedValue[])
+  const selectedSet = computed(() => new Set(selectedValues.value))
+  const itemValues = computed<ResolvedValue[]>(() => {
+    const items = toValue(options.items) ?? []
+    return items.map(item => getItemValue(item, options.getValue) as ResolvedValue)
+  })
+
+  const selectedCount = computed(() => selectedValues.value.length)
+  const itemCount = computed(() => itemValues.value.length)
+  const isAllSelected = computed(() => (
+    itemValues.value.length > 0 && itemValues.value.every(value => selectedSet.value.has(value))
+  ))
+  const selectionLimit = useSelectionLimit({
+    count: selectedCount,
+    max: options.max,
+  })
+
+  function isSelected(value: ResolvedValue): boolean {
+    return selectedSet.value.has(value)
+  }
+
+  function isFullySelected(values: readonly ResolvedValue[]): boolean {
+    return values.length > 0 && values.every(value => selectedSet.value.has(value))
+  }
+
+  function isPartiallySelected(values: readonly ResolvedValue[]): boolean {
+    if (values.length === 0) return false
+    const selected = values.filter(value => selectedSet.value.has(value)).length
+    return selected > 0 && selected < values.length
+  }
+
+  function selectValues(values: readonly ResolvedValue[]): ResolvedValue[] {
+    if (disabled.value) return selectedValues.value
+    const missing = uniqueValues(values).filter(value => !selectedSet.value.has(value))
+    if (!selectionLimit.canAdd(missing.length)) return selectedValues.value
+    return [...selectedValues.value, ...missing]
+  }
+
+  function toggleValue(value: ResolvedValue): ResolvedValue[] {
+    if (disabled.value) return selectedValues.value
+    if (selectedSet.value.has(value)) {
+      return selectedValues.value.filter(selected => selected !== value)
+    }
+    if (!selectionLimit.canAddMore.value) return selectedValues.value
+    return [...selectedValues.value, value]
+  }
+
+  function toggleValues(values: readonly ResolvedValue[]): ResolvedValue[] {
+    if (disabled.value) return selectedValues.value
+    const unique = uniqueValues(values)
+    if (isFullySelected(unique)) {
+      const remove = new Set(unique)
+      return selectedValues.value.filter(value => !remove.has(value))
+    }
+    return selectValues(unique)
+  }
+
+  function selectAll(): ResolvedValue[] {
+    return selectValues(itemValues.value)
+  }
+
+  function toggleAll(): ResolvedValue[] {
+    if (isAllSelected.value) return clear()
+    return selectAll()
+  }
+
+  function clear(): ResolvedValue[] {
+    return disabled.value ? selectedValues.value : []
+  }
+
+  return {
+    selectedValues,
+    selectedSet,
+    itemValues,
+    selectedCount,
+    itemCount,
+    isAllSelected,
+    isLimited: selectionLimit.isLimited,
+    isAtLimit: selectionLimit.isAtLimit,
+    canAddMore: selectionLimit.canAddMore,
+    remaining: selectionLimit.remaining,
+    isSelected,
+    isFullySelected,
+    isPartiallySelected,
+    selectValues,
+    toggleValue,
+    toggleValues,
+    selectAll,
+    toggleAll,
+    clear,
+  }
+}
+
+function getItemValue<TItem, TValue extends ListSelectionValue>(
+  item: TItem,
+  getValue: ((item: TItem) => TValue) | undefined,
+): TValue {
+  return getValue ? getValue(item) : item as unknown as TValue
+}
+
+function uniqueValues<TValue extends ListSelectionValue>(values: readonly TValue[]): TValue[] {
+  return [...new Set(values)]
+}

package/src/composables/useMenuKeyboard.ts

@@ -0,0 +1,90 @@
+import { nextTick } from 'vue'
+
+export interface UseMenuKeyboardOptions {
+  /** Returns the currently navigable items inside the open panel, in DOM order. */
+  items: () => HTMLElement[]
+  /** True while the panel is open. */
+  isOpen: () => boolean
+  /** Opens the panel. */
+  open: () => void
+  /** Closes the panel. When `returnFocus` is true, focus should return to the trigger. */
+  close: (returnFocus?: boolean) => void
+}
+
+export interface UseMenuKeyboardReturn {
+  /**
+   * Bind to the trigger's `@keydown`. ArrowDown/Enter/Space open the panel (when
+   * closed) and focus its first item; ArrowUp opens it focused on the last item.
+   */
+  handleTriggerKeydown: (event: KeyboardEvent) => void
+  /**
+   * Bind to the open panel's `@keydown`. ArrowUp/ArrowDown cycle focus with
+   * wraparound, Home/End jump to the first/last item, Escape closes and returns
+   * focus to the trigger, and Tab closes without moving focus.
+   */
+  handlePanelKeydown: (event: KeyboardEvent) => void
+}
+
+/**
+ * Shared keyboard contract for menu- and listbox-style disclosure panels (the
+ * WAI-ARIA menu button pattern). Used by AppAvatarMenu and DropdownButton; ActionMenu
+ * implements the same contract inline.
+ */
+export function useMenuKeyboard(options: UseMenuKeyboardOptions): UseMenuKeyboardReturn {
+  function focusItem(position: 'first' | 'last') {
+    void nextTick(() => {
+      const items = options.items()
+      const target = position === 'first' ? items[0] : items[items.length - 1]
+      target?.focus()
+    })
+  }
+
+  function handleTriggerKeydown(event: KeyboardEvent) {
+    if (options.isOpen()) return
+
+    if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault()
+      options.open()
+      focusItem('first')
+      return
+    }
+    if (event.key === 'ArrowUp') {
+      event.preventDefault()
+      options.open()
+      focusItem('last')
+    }
+  }
+
+  function handlePanelKeydown(event: KeyboardEvent) {
+    const items = options.items()
+    const currentIndex = items.indexOf(document.activeElement as HTMLElement)
+
+    if (event.key === 'Escape') {
+      event.preventDefault()
+      options.close(true)
+      return
+    }
+    if (event.key === 'Tab') {
+      options.close()
+      return
+    }
+    if (event.key === 'Home') {
+      event.preventDefault()
+      items[0]?.focus()
+      return
+    }
+    if (event.key === 'End') {
+      event.preventDefault()
+      items[items.length - 1]?.focus()
+      return
+    }
+    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return
+
+    event.preventDefault()
+    const direction = event.key === 'ArrowDown' ? 1 : -1
+    const nextIndex = (Math.max(currentIndex, 0) + direction + items.length) % items.length
+    items[nextIndex]?.focus()
+  }
+
+  return { handleTriggerKeydown, handlePanelKeydown }
+}

package/src/composables/useMobileSupportGate.ts

@@ -0,0 +1,80 @@
+import { computed, onMounted, onUnmounted, ref, unref, watch, type ComputedRef, type Ref } from 'vue'
+
+export const DEFAULT_MOBILE_VIEWPORT_QUERY = '(max-width: 767px)'
+
+export type MobileSupportSource = boolean | Ref<boolean> | ComputedRef<boolean>
+export type MobileViewportQuerySource = string | Ref<string> | ComputedRef<string>
+
+export interface UseMobileSupportGateOptions {
+  supported?: MobileSupportSource
+  mediaQuery?: MobileViewportQuerySource
+}
+
+export interface UseMobileSupportGateReturn {
+  isMobileViewport: Ref<boolean>
+  isSupported: ComputedRef<boolean>
+  shouldShowUnsupported: ComputedRef<boolean>
+}
+
+export function useMobileSupportGate(options: UseMobileSupportGateOptions = {}): UseMobileSupportGateReturn {
+  const isMobileViewport = ref(false)
+
+  const mediaQuery = computed(() => {
+    const value = unref(options.mediaQuery)
+    return value?.trim() || DEFAULT_MOBILE_VIEWPORT_QUERY
+  })
+
+  const isSupported = computed(() => {
+    if (options.supported === undefined) return true
+    return Boolean(unref(options.supported))
+  })
+
+  const shouldShowUnsupported = computed(() => isMobileViewport.value && !isSupported.value)
+
+  let mediaQueryList: MediaQueryList | null = null
+  let removeMediaListener: (() => void) | undefined
+
+  const syncMobileState = (event?: MediaQueryListEvent | MediaQueryList) => {
+    isMobileViewport.value = Boolean(event?.matches ?? mediaQueryList?.matches)
+  }
+
+  const unbindMediaQuery = () => {
+    removeMediaListener?.()
+    removeMediaListener = undefined
+    mediaQueryList = null
+  }
+
+  const bindMediaQuery = () => {
+    unbindMediaQuery()
+
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      isMobileViewport.value = false
+      return
+    }
+
+    const queryList = window.matchMedia(mediaQuery.value)
+    mediaQueryList = queryList
+    syncMobileState(queryList)
+
+    const handleChange = (event: MediaQueryListEvent) => syncMobileState(event)
+
+    if (typeof queryList.addEventListener === 'function') {
+      queryList.addEventListener('change', handleChange)
+      removeMediaListener = () => queryList.removeEventListener('change', handleChange)
+      return
+    }
+
+    queryList.addListener(handleChange)
+    removeMediaListener = () => queryList.removeListener(handleChange)
+  }
+
+  onMounted(bindMediaQuery)
+  watch(mediaQuery, bindMediaQuery, { flush: 'post' })
+  onUnmounted(unbindMediaQuery)
+
+  return {
+    isMobileViewport,
+    isSupported,
+    shouldShowUnsupported,
+  }
+}

package/src/composables/useOptimisticMutation.ts

@@ -0,0 +1,111 @@
+import { computed, ref, shallowRef, type ComputedRef, type Ref, type ShallowRef } from 'vue'
+
+export interface OptimisticMutationContext<TVariables, TSnapshot> {
+  variables: TVariables
+  snapshot: TSnapshot | undefined
+}
+
+export interface UseOptimisticMutationOptions<TVariables, TData, TSnapshot = unknown> {
+  mutation: (variables: TVariables) => Promise<TData>
+  snapshot?: (variables: TVariables) => TSnapshot
+  apply?: (variables: TVariables, snapshot: TSnapshot | undefined) => void
+  commit?: (data: TData, context: OptimisticMutationContext<TVariables, TSnapshot>) => void
+  rollback?: (
+    snapshot: TSnapshot | undefined,
+    variables: TVariables,
+    error: unknown,
+  ) => void
+  onSuccess?: (data: TData, context: OptimisticMutationContext<TVariables, TSnapshot>) => void
+  onError?: (error: unknown, context: OptimisticMutationContext<TVariables, TSnapshot>) => void
+  onSettled?: (context: OptimisticMutationContext<TVariables, TSnapshot>) => void
+  readErrorMessage?: (error: unknown) => string
+}
+
+export interface UseOptimisticMutationReturn<TVariables, TData, TSnapshot = unknown> {
+  loading: ShallowRef<boolean>
+  error: Ref<string | null>
+  data: Ref<TData | null>
+  lastSnapshot: Ref<TSnapshot | undefined>
+  isIdle: ComputedRef<boolean>
+  run: (variables: TVariables) => Promise<TData>
+  clearError: () => void
+  reset: () => void
+}
+
+/**
+ * Run async mutations with optional optimistic local updates and rollback.
+ *
+ * @deprecated Unused by the MINT platform and scheduled for removal in MINT 1.3; use `useRequestSyncState()` instead.
+ */
+export function useOptimisticMutation<TVariables, TData, TSnapshot = unknown>(
+  options: UseOptimisticMutationOptions<TVariables, TData, TSnapshot>,
+): UseOptimisticMutationReturn<TVariables, TData, TSnapshot> {
+  const loading = shallowRef(false)
+  const error = ref<string | null>(null)
+  const data = ref<TData | null>(null) as Ref<TData | null>
+  const lastSnapshot = ref<TSnapshot | undefined>(undefined) as Ref<TSnapshot | undefined>
+  const isIdle = computed(() => !loading.value && data.value === null && error.value === null)
+
+  function clearError(): void {
+    error.value = null
+  }
+
+  function reset(): void {
+    loading.value = false
+    error.value = null
+    data.value = null
+    lastSnapshot.value = undefined
+  }
+
+  async function run(variables: TVariables): Promise<TData> {
+    const snapshot = options.snapshot?.(variables)
+    const context: OptimisticMutationContext<TVariables, TSnapshot> = { variables, snapshot }
+
+    loading.value = true
+    error.value = null
+    lastSnapshot.value = snapshot
+    options.apply?.(variables, snapshot)
+
+    try {
+      const result = await options.mutation(variables)
+      data.value = result
+      options.commit?.(result, context)
+      options.onSuccess?.(result, context)
+      return result
+    } catch (err) {
+      options.rollback?.(snapshot, variables, err)
+      error.value = options.readErrorMessage?.(err) ?? readErrorMessage(err)
+      options.onError?.(err, context)
+      throw err
+    } finally {
+      loading.value = false
+      options.onSettled?.(context)
+    }
+  }
+
+  return {
+    loading,
+    error,
+    data,
+    lastSnapshot,
+    isIdle,
+    run,
+    clearError,
+    reset,
+  }
+}
+
+function readErrorMessage(value: unknown): string {
+  if (value instanceof Error && value.message) return value.message
+  if (typeof value === 'string' && value.trim()) return value
+  if (
+    typeof value === 'object'
+    && value !== null
+    && 'message' in value
+    && typeof (value as { message?: unknown }).message === 'string'
+    && (value as { message: string }).message.trim()
+  ) {
+    return (value as { message: string }).message
+  }
+  return 'Request failed.'
+}

package/src/composables/usePasskey.ts

@@ -0,0 +1,216 @@
+import axios from 'axios'
+import { useAuthStore } from '../stores/auth'
+import { useSettingsStore } from '../stores/settings'
+import type { CredentialInfo } from '../types'
+
+// Lazy-load @simplewebauthn/browser so plugins that never call usePasskey
+// don't need the optional peer dep installed (avoids build failures).
+async function loadWebAuthn() {
+  try {
+    return await import('@simplewebauthn/browser')
+  } catch {
+    throw new Error(
+      '@simplewebauthn/browser is required for passkey support. Install it: bun add @simplewebauthn/browser',
+    )
+  }
+}
+
+interface PasskeyLoginResponse {
+  access_token: string
+  token_type: string
+  expires_in: number
+}
+
+/** Registers and authenticates passkeys using WebAuthn, lazily loading the browser dependency. */
+export function usePasskey() {
+  const authStore = useAuthStore()
+  const settingsStore = useSettingsStore()
+
+  function getApiBaseUrl(): string {
+    return settingsStore.getApiBaseUrl()
+  }
+
+  async function isSupported(): Promise<boolean> {
+    try {
+      const { browserSupportsWebAuthn } = await loadWebAuthn()
+      return browserSupportsWebAuthn()
+    } catch {
+      return false
+    }
+  }
+
+  async function registerPasskey(deviceName?: string): Promise<boolean> {
+    const webauthn = await loadWebAuthn()
+    if (!webauthn.browserSupportsWebAuthn()) {
+      authStore.setError('WebAuthn is not supported in this browser')
+      return false
+    }
+
+    authStore.setLoading(true)
+    authStore.setError(null)
+
+    try {
+      const optionsResponse = await axios.get<{ options: string }>(
+        `${getApiBaseUrl()}/auth/passkey/register/options`,
+        {
+          headers: { Authorization: `Bearer ${authStore.token}` },
+          withCredentials: true,
+        }
+      )
+
+      const options = JSON.parse(optionsResponse.data.options)
+
+      const credential = await webauthn.startRegistration(options)
+
+      await axios.post(
+        `${getApiBaseUrl()}/auth/passkey/register/verify`,
+        {
+          credential: JSON.stringify(credential),
+          device_name: deviceName,
+        },
+        {
+          headers: { Authorization: `Bearer ${authStore.token}` },
+          withCredentials: true,
+        }
+      )
+
+      authStore.setAuthConfig({
+        ...authStore.authConfig,
+        passkeyRegistered: true,
+      })
+
+      return true
+    } catch (error) {
+      if (axios.isAxiosError(error) && error.response) {
+        authStore.setError(error.response.data.detail || 'Passkey registration failed')
+      } else if (error instanceof Error) {
+        if (error.name === 'NotAllowedError') {
+          authStore.setError('Registration was cancelled or timed out')
+        } else if (error.name === 'InvalidStateError') {
+          authStore.setError('This authenticator is already registered')
+        } else {
+          authStore.setError(error.message)
+        }
+      } else {
+        authStore.setError('Passkey registration failed')
+      }
+      return false
+    } finally {
+      authStore.setLoading(false)
+    }
+  }
+
+  async function loginWithPasskey(): Promise<boolean> {
+    const webauthn = await loadWebAuthn()
+    if (!webauthn.browserSupportsWebAuthn()) {
+      authStore.setError('WebAuthn is not supported in this browser')
+      return false
+    }
+
+    authStore.setLoading(true)
+    authStore.setError(null)
+
+    try {
+      const optionsResponse = await axios.get<{ options: string }>(
+        `${getApiBaseUrl()}/auth/passkey/login/options`,
+        { withCredentials: true }
+      )
+
+      const options = JSON.parse(optionsResponse.data.options)
+
+      const credential = await webauthn.startAuthentication(options)
+
+      const response = await axios.post<PasskeyLoginResponse>(
+        `${getApiBaseUrl()}/auth/passkey/login/verify`,
+        { credential: JSON.stringify(credential) },
+        { withCredentials: true }
+      )
+
+      authStore.setToken(response.data.access_token, response.data.expires_in)
+
+      return true
+    } catch (error) {
+      if (axios.isAxiosError(error) && error.response) {
+        if (error.response.status === 404) {
+          authStore.setError('No passkeys registered. Please login with password first.')
+        } else {
+          authStore.setError(error.response.data.detail || 'Passkey login failed')
+        }
+      } else if (error instanceof Error) {
+        if (error.name === 'NotAllowedError') {
+          authStore.setError('Authentication was cancelled or timed out')
+        } else {
+          authStore.setError(error.message)
+        }
+      } else {
+        authStore.setError('Passkey login failed')
+      }
+      return false
+    } finally {
+      authStore.setLoading(false)
+    }
+  }
+
+  async function listCredentials(): Promise<CredentialInfo[]> {
+    try {
+      const response = await axios.get<{ credentials: CredentialInfo[] }>(
+        `${getApiBaseUrl()}/auth/passkey/credentials`,
+        {
+          headers: { Authorization: `Bearer ${authStore.token}` },
+        }
+      )
+      return response.data.credentials
+    } catch {
+      return []
+    }
+  }
+
+  async function deleteCredential(credentialId: string): Promise<boolean> {
+    try {
+      await axios.delete(
+        `${getApiBaseUrl()}/auth/passkey/credentials/${encodeURIComponent(credentialId)}`,
+        {
+          headers: { Authorization: `Bearer ${authStore.token}` },
+        }
+      )
+
+      const remaining = await listCredentials()
+      if (remaining.length === 0) {
+        authStore.setAuthConfig({
+          ...authStore.authConfig,
+          passkeyRegistered: false,
+        })
+      }
+
+      return true
+    } catch {
+      return false
+    }
+  }
+
+  async function deleteAllCredentials(): Promise<boolean> {
+    try {
+      await axios.delete(`${getApiBaseUrl()}/auth/passkey/credentials`, {
+        headers: { Authorization: `Bearer ${authStore.token}` },
+      })
+
+      authStore.setAuthConfig({
+        ...authStore.authConfig,
+        passkeyRegistered: false,
+      })
+
+      return true
+    } catch {
+      return false
+    }
+  }
+
+  return {
+    isSupported,
+    registerPasskey,
+    loginWithPasskey,
+    listCredentials,
+    deleteCredential,
+    deleteAllCredentials,
+  }
+}