@getcortexlabs/mavis-web 0.1.0-alpha.1 → 0.1.0-alpha.3

package/src/components/MIcon.ts

@@ -0,0 +1,39 @@
+import { defineComponent, h, mergeProps } from 'vue'
+import { iconProps, useMavisTheme } from '@getcortexlabs/mavis-core/vue'
+import { iconFontFamily, iconGlyph, resolveIconSize } from '@getcortexlabs/mavis-core'
+import { webAttrs } from '../style.js'
+
+export const MIcon = defineComponent({
+  name: 'MIcon',
+  inheritAttrs: false,
+  props: iconProps,
+  setup(props, { attrs }) {
+    const { theme } = useMavisTheme()
+    return () => {
+      const size = `${resolveIconSize(props.size)}px`
+      return h(
+        'span',
+        mergeProps(
+          {
+            class: 'm-icon',
+            style: {
+              fontFamily: iconFontFamily,
+              fontSize: size,
+              width: size,
+              height: size,
+              lineHeight: 1,
+              color: theme.value.colors[props.tone],
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              flexShrink: 0,
+            },
+          },
+          webAttrs({ ...attrs, id: props.id }),
+          props.label ? { role: 'img', 'aria-label': props.label } : { 'aria-hidden': 'true' },
+        ),
+        iconGlyph(props.name),
+      )
+    }
+  },
+})

package/src/components/MInput.ts

@@ -19,9 +19,11 @@ import {
   nonNegative,
   resolveDimension,
   validateInput,
+  iconSizes,
   type InputHandle,
 } from '@getcortexlabs/mavis-core'
 import { length, webAttrs } from '../style.js'
+import { MIcon } from './MIcon.js'
 
 export const MInput = defineComponent({
   name: 'MInput',
@@ -98,6 +100,22 @@ export const MInput = defineComponent({
       const message = props.error || props.helperText
       const text = props.type === 'text' || props.type === 'search'
       const border = props.error ? colors.danger : focused.value ? colors.primary : colors.border
+      const inset = 16 + iconSizes.md + 10
+      const icon = (name: typeof props.icon, trailing: boolean) =>
+        name
+          ? h(MIcon, {
+              name,
+              size: 'md',
+              tone: props.error ? 'danger' : 'muted',
+              style: {
+                position: 'absolute',
+                [trailing ? 'right' : 'left']: '16px',
+                top: props.multiline ? '16px' : '50%',
+                transform: props.multiline ? undefined : 'translateY(-50%)',
+                pointerEvents: 'none',
+              },
+            })
+          : null
       return h(
         'div',
         mergeProps(
@@ -131,70 +149,76 @@ export const MInput = defineComponent({
             },
             props.label,
           ),
-          h(props.multiline ? 'textarea' : 'input', {
-            ref: editor,
-            id,
-            class: 'm-input-editor',
-            type: props.multiline ? undefined : props.type,
-            rows: props.multiline ? props.rows : undefined,
-            value: props.modelValue,
-            placeholder: props.placeholder,
-            disabled: props.disabled,
-            readonly: props.readonly,
-            maxlength: props.maxLength,
-            autocapitalize: props.autocapitalize ?? (text ? 'sentences' : 'none'),
-            autocorrect: (props.autocorrect ?? text) ? 'on' : 'off',
-            spellcheck: props.autocorrect ?? text,
-            enterkeyhint: props.multiline ? 'enter' : props.returnKey,
-            'aria-invalid': props.error ? 'true' : undefined,
-            'aria-describedby': message ? `${id}-message` : undefined,
-            style: {
-              boxSizing: 'border-box',
-              width: '100%',
-              minWidth: 0,
-              minHeight: `${props.multiline ? props.rows * typography.body.fontSize * 1.5 + 30 : control.md.height}px`,
-              margin: 0,
-              padding: '14px 16px',
-              border: `1px solid ${border}`,
-              borderRadius: `${radius.md}px`,
-              outline: 'none',
-              boxShadow: focused.value ? `0 0 0 2px ${border}` : 'none',
-              fontFamily: 'inherit',
-              fontSize: `${typography.body.fontSize}px`,
-              lineHeight: '1.5',
-              backgroundColor: props.readonly ? colors.elevated : colors.surface,
-              color: colors.text,
-              caretColor: colors.primary,
-              resize: 'none',
-              overflow: props.multiline ? 'hidden' : undefined,
-            },
-            onInput: (event: Event) => {
-              if (props.disabled || props.readonly) return
-              const value = (event.target as HTMLInputElement).value
-              if (value !== props.modelValue) emit('update:modelValue', value)
-              resize()
-            },
-            onFocus: () => {
-              focused.value = true
-              emit('focus')
-            },
-            onBlur: () => {
-              focused.value = false
-              emit('blur')
-            },
-            onKeydown: (event: KeyboardEvent) => {
-              if (
-                event.key !== 'Enter' ||
-                event.isComposing ||
-                event.keyCode === 229 ||
-                props.multiline
-              )
-                return
-              event.preventDefault()
-              if (!props.disabled && !props.readonly)
-                emit('submit', (event.target as HTMLInputElement).value)
-            },
-          }),
+          h('div', { class: 'm-input-field', style: { position: 'relative', display: 'flex' } }, [
+            h(props.multiline ? 'textarea' : 'input', {
+              ref: editor,
+              id,
+              class: 'm-input-editor',
+              type: props.multiline ? undefined : props.type,
+              rows: props.multiline ? props.rows : undefined,
+              value: props.modelValue,
+              placeholder: props.placeholder,
+              disabled: props.disabled,
+              readonly: props.readonly,
+              maxlength: props.maxLength,
+              autocapitalize: props.autocapitalize ?? (text ? 'sentences' : 'none'),
+              autocorrect: (props.autocorrect ?? text) ? 'on' : 'off',
+              spellcheck: props.autocorrect ?? text,
+              enterkeyhint: props.multiline ? 'enter' : props.returnKey,
+              'aria-invalid': props.error ? 'true' : undefined,
+              'aria-describedby': message ? `${id}-message` : undefined,
+              style: {
+                boxSizing: 'border-box',
+                width: '100%',
+                minWidth: 0,
+                minHeight: `${props.multiline ? props.rows * typography.body.fontSize * 1.5 + 30 : control.md.height}px`,
+                margin: 0,
+                padding: '14px 16px',
+                paddingLeft: props.icon ? `${inset}px` : undefined,
+                paddingRight: props.trailingIcon ? `${inset}px` : undefined,
+                border: `1px solid ${border}`,
+                borderRadius: `${radius.md}px`,
+                outline: 'none',
+                boxShadow: focused.value ? `0 0 0 2px ${border}` : 'none',
+                fontFamily: 'inherit',
+                fontSize: `${typography.body.fontSize}px`,
+                lineHeight: '1.5',
+                backgroundColor: props.readonly ? colors.elevated : colors.surface,
+                color: colors.text,
+                caretColor: colors.primary,
+                resize: 'none',
+                overflow: props.multiline ? 'hidden' : undefined,
+              },
+              onInput: (event: Event) => {
+                if (props.disabled || props.readonly) return
+                const value = (event.target as HTMLInputElement).value
+                if (value !== props.modelValue) emit('update:modelValue', value)
+                resize()
+              },
+              onFocus: () => {
+                focused.value = true
+                emit('focus')
+              },
+              onBlur: () => {
+                focused.value = false
+                emit('blur')
+              },
+              onKeydown: (event: KeyboardEvent) => {
+                if (
+                  event.key !== 'Enter' ||
+                  event.isComposing ||
+                  event.keyCode === 229 ||
+                  props.multiline
+                )
+                  return
+                event.preventDefault()
+                if (!props.disabled && !props.readonly)
+                  emit('submit', (event.target as HTMLInputElement).value)
+              },
+            }),
+            icon(props.icon, false),
+            icon(props.trailingIcon, true),
+          ]),
           message
             ? h(
                 'p',

package/src/components/MScreen.ts

@@ -16,6 +16,19 @@ export const MScreen = defineComponent({
     const { theme } = useMavisTheme()
     const element = useScreenViewport(() => props.scroll)
     provide(layoutDirection, 'column')
+    // Browsers already move focus away on a tap outside the editor; a drag keeps the keyboard.
+    const releaseKeyboard = (event: TouchEvent) => {
+      if (!props.dismissKeyboard || !props.scroll) return
+      const screen = element.value
+      const active = document.activeElement
+      if (!(active instanceof HTMLElement) || !screen || active === screen) return
+      if (!screen.contains(active) || active.contains(event.target as Node)) return
+      const editor =
+        active instanceof HTMLInputElement ||
+        active instanceof HTMLTextAreaElement ||
+        active.isContentEditable
+      if (editor) active.blur()
+    }
     return () =>
       h(
         'main',
@@ -24,6 +37,7 @@ export const MScreen = defineComponent({
             ref: element,
             class: 'm-screen',
             tabindex: props.scroll ? 0 : -1,
+            onTouchmovePassive: releaseKeyboard,
             style: {
               display: 'flex',
               flexDirection: 'column',

package/src/components/MSheet.ts

@@ -0,0 +1,268 @@
+import {
+  defineComponent,
+  h,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  provide,
+  ref,
+  useId,
+  watch,
+} from 'vue'
+import {
+  sheetProps,
+  sheetEmits,
+  useMavisTheme,
+  layoutDirection,
+} from '@getcortexlabs/mavis-core/vue'
+import { checkSheetName, resolveSpace, type SheetCloseReason } from '@getcortexlabs/mavis-core'
+import { MRow, MColumn, MBox } from './layout.js'
+import { MText } from './MText.js'
+import { MButton } from './MButton.js'
+
+/** The longest duration in a `transition-duration` list, in milliseconds. */
+function longestDuration(value: string) {
+  return Math.max(
+    0,
+    ...value.split(',').map((part) => {
+      const trimmed = part.trim()
+      const number = Number.parseFloat(trimmed)
+      if (!Number.isFinite(number)) return 0
+      return trimmed.endsWith('ms') ? number : number * 1000
+    }),
+  )
+}
+
+export const MSheet = defineComponent({
+  name: 'MSheet',
+  inheritAttrs: false,
+  props: sheetProps,
+  emits: sheetEmits,
+  setup(props, { slots, emit }) {
+    const { theme } = useMavisTheme()
+    provide(layoutDirection, 'column')
+    const titleId = `m-sheet-${useId()}`
+    const dialog = ref<HTMLDialogElement>()
+    const presented = ref(false)
+    const shown = ref(false)
+    let closing: SheetCloseReason | undefined
+    let generation = 0
+    let timer: ReturnType<typeof setTimeout> | undefined
+    let outside = false
+    let opener: HTMLElement | undefined
+
+    const announce = (reason: SheetCloseReason) => {
+      closing = reason
+      emit('update:open', false)
+      emit('close', reason)
+    }
+    const request = (reason: SheetCloseReason) => {
+      if (props.open && !closing) announce(reason)
+    }
+
+    const focusable = (element: HTMLElement) =>
+      [
+        ...element.querySelectorAll<HTMLElement>(
+          'button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])',
+        ),
+      ].filter((control) => !control.closest('[inert]'))
+    // Engines differ on which control a modal dialog focuses first; start at the first control,
+    // or the panel itself, unless the content asked for focus with `autofocus`.
+    function focusInitial(element: HTMLDialogElement) {
+      if (typeof document === 'undefined') return
+      const active = document.activeElement
+      if (active && active !== element && element.contains(active)) return
+      const panel = element.querySelector<HTMLElement>('.m-sheet-panel')
+      if (panel) panel.tabIndex = -1
+      ;(focusable(element)[0] ?? panel)?.focus({ preventScroll: true })
+    }
+    // A modal dialog makes the page inert, yet Tab can still leave for the browser's own controls.
+    function trapTab(event: KeyboardEvent) {
+      const element = dialog.value
+      if (event.key !== 'Tab' || !element) return
+      const controls = focusable(element)
+      const first = controls[0]
+      const last = controls[controls.length - 1]
+      if (!first || !last) return
+      const active = document.activeElement
+      if (event.shiftKey && (active === first || active === element)) {
+        event.preventDefault()
+        last.focus()
+      } else if (!event.shiftKey && active === last) {
+        event.preventDefault()
+        first.focus()
+      }
+    }
+    // The dialog restores focus when it closes; some engines leave it on the body instead.
+    function restoreFocus() {
+      const target = opener
+      opener = undefined
+      const active = typeof document === 'undefined' ? null : document.activeElement
+      if (target?.isConnected && (!active || active === document.body))
+        target.focus({ preventScroll: true })
+    }
+    function present() {
+      const current = ++generation
+      clearTimeout(timer)
+      presented.value = true
+      if (typeof document !== 'undefined' && document.activeElement instanceof HTMLElement)
+        opener = document.activeElement
+      nextTick(() => {
+        const element = dialog.value
+        if (generation !== current || !element) return
+        if (typeof element.showModal === 'function' && !element.open) element.showModal()
+        focusInitial(element)
+        // Resolve the offscreen position before the open class so the entrance transitions.
+        element.getBoundingClientRect?.()
+        shown.value = true
+      })
+    }
+    function leave() {
+      const element = dialog.value
+      const current = ++generation
+      shown.value = false
+      let release = () => {}
+      const finish = () => {
+        if (generation !== current) return
+        clearTimeout(timer)
+        release()
+        if (element?.open) element.close()
+        presented.value = false
+        closing = undefined
+        restoreFocus()
+      }
+      const duration =
+        element && typeof getComputedStyle === 'function'
+          ? longestDuration(getComputedStyle(element).transitionDuration)
+          : 0
+      if (!duration || !element) {
+        finish()
+        return
+      }
+      const ended = (event: Event) => {
+        if (event.target === element) finish()
+      }
+      element.addEventListener('transitionend', ended)
+      release = () => element.removeEventListener('transitionend', ended)
+      timer = setTimeout(finish, duration + 100)
+    }
+
+    watch(
+      () => props.open,
+      (open) => {
+        if (open) {
+          closing = undefined
+          present()
+        } else if (presented.value) {
+          if (!closing) {
+            closing = 'program'
+            emit('close', 'program')
+          }
+          leave()
+        }
+      },
+    )
+    onMounted(() => {
+      if (props.open) present()
+    })
+    onBeforeUnmount(() => {
+      generation++
+      clearTimeout(timer)
+    })
+
+    return () => {
+      checkSheetName(props.title, props.accessibilityLabel)
+      const { colors, radius, space } = theme.value
+      const header =
+        props.title || props.dismissible
+          ? h(
+              MRow,
+              { gap: 'sm', justify: 'between' },
+              {
+                default: () => [
+                  props.title
+                    ? h(MText, {
+                        as: 'h2',
+                        variant: 'heading',
+                        grow: 1,
+                        id: titleId,
+                        text: props.title,
+                      })
+                    : h(MBox, { grow: 1 }),
+                  props.dismissible
+                    ? h(MButton, {
+                        variant: 'ghost',
+                        size: 'sm',
+                        icon: 'x',
+                        shrink: 0,
+                        accessibilityLabel: props.closeLabel,
+                        onClick: () => request('button'),
+                      })
+                    : null,
+                ],
+              },
+            )
+          : null
+      return h(
+        'dialog',
+        {
+          ref: dialog,
+          id: props.id,
+          class: ['m-sheet', { 'm-sheet-open': shown.value, 'm-sheet-full': props.fullscreen }],
+          'aria-labelledby': props.title ? titleId : undefined,
+          'aria-label': props.title ? undefined : props.accessibilityLabel,
+          style: {
+            '--m-sheet-surface': colors.surface,
+            '--m-sheet-radius': `${radius.lg}px`,
+            '--m-focus': colors.primary,
+            color: colors.text,
+            colorScheme: theme.value.appearance,
+          },
+          onCancel: (event: Event) => {
+            // The browser would close at once; the sheet leaves through its own transition.
+            event.preventDefault()
+            if (props.dismissible) request('escape')
+          },
+          onClose: () => {
+            // Closed by the browser itself: keep the bound state in step.
+            if (props.open && !closing) announce('escape')
+            shown.value = false
+            presented.value = false
+            restoreFocus()
+          },
+          onKeydown: trapTab,
+          onPointerdown: (event: Event) => {
+            outside = event.target === event.currentTarget
+          },
+          onClick: (event: Event) => {
+            if (outside && event.target === event.currentTarget && props.dismissible)
+              request('backdrop')
+            outside = false
+          },
+        },
+        presented.value
+          ? [
+              h(
+                'div',
+                {
+                  class: 'm-sheet-panel',
+                  style: {
+                    padding: `${resolveSpace(theme.value, props.padding ?? 'lg')}px`,
+                    gap: `${space.md}px`,
+                  },
+                },
+                [
+                  header,
+                  h(
+                    MColumn,
+                    { class: 'm-sheet-body', shrink: 1, gap: props.gap, align: props.align },
+                    { default: () => slots.default?.() },
+                  ),
+                ],
+              ),
+            ]
+          : undefined,
+      )
+    }
+  },
+})

package/src/fonts/LICENSE

@@ -0,0 +1,45 @@
+Lucide icon font 1.65.0
+
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+---
+
+The following Lucide icons are derived from the Feather project:
+
+airplay, alert-circle, alert-octagon, alert-triangle, aperture, arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down, arrow-left-circle, arrow-left, arrow-right-circle, arrow-right, arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign, calendar, cast, check, chevron-down, chevron-left, chevron-right, chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up, circle, clipboard, clock, code, columns, command, compass, corner-down-left, corner-down-right, corner-left-down, corner-left-up, corner-right-down, corner-right-up, corner-up-left, corner-up-right, crosshair, database, divide-circle, divide-square, dollar-sign, download, external-link, feather, frown, hash, headphones, help-circle, info, italic, key, layout, life-buoy, link-2, link, loader, lock, log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle, minus-square, minus, monitor, moon, more-horizontal, more-vertical, move, music, navigation-2, navigation, octagon, pause-circle, percent, plus-circle, plus-square, plus, power, radio, rss, search, server, share, shopping-bag, sidebar, smartphone, smile, square, table-2, tablet, target, terminal, trash-2, trash, triangle, tv, type, upload, x-circle, x-octagon, x-square, x, zoom-in, zoom-out
+
+The MIT License (MIT) (for the icons listed above)
+
+Copyright (c) 2013-present Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/src/index.ts

@@ -1,6 +1,10 @@
 import type { App } from 'vue'
-import { mavis, type MavisTheme } from '@getcortexlabs/mavis-core'
-import { createThemeContext, themeKey } from '@getcortexlabs/mavis-core/vue'
+import {
+  createThemeContext,
+  themeKey,
+  type ThemeContextOptions,
+} from '@getcortexlabs/mavis-core/vue'
+import { systemAppearance } from './appearance.js'
 import { MScreen } from './components/MScreen.js'
 import { MBox, MRow, MColumn } from './components/layout.js'
 import { MCard } from './components/MCard.js'
@@ -8,18 +12,43 @@ import { MText } from './components/MText.js'
 import { MButton } from './components/MButton.js'
 import { MSlider } from './components/MSlider.js'
 import { MInput } from './components/MInput.js'
+import { MIcon } from './components/MIcon.js'
 import { MReveal } from './components/MReveal.js'
+import { MSheet } from './components/MSheet.js'
 
-export { MScreen, MBox, MRow, MColumn, MCard, MText, MButton, MSlider, MInput, MReveal }
+export {
+  MScreen,
+  MBox,
+  MRow,
+  MColumn,
+  MCard,
+  MText,
+  MButton,
+  MSlider,
+  MInput,
+  MIcon,
+  MReveal,
+  MSheet,
+}
 export { useMavisTheme } from '@getcortexlabs/mavis-core/vue'
-export type { MavisThemeContext } from '@getcortexlabs/mavis-core/vue'
+export type {
+  MavisThemeContext,
+  Appearance,
+  AppearanceMode,
+  AppearanceSource,
+} from '@getcortexlabs/mavis-core/vue'
 export type { Align, Justify } from './components/layout.js'
 export * from '@getcortexlabs/mavis-core'
 
-export function createMavis(options: { theme?: MavisTheme } = {}) {
+export type MavisOptions = Omit<ThemeContextOptions, 'source'>
+
+/** Create one plugin per application; `system` appearance follows `prefers-color-scheme`. */
+export function createMavis(options: MavisOptions = {}) {
   return {
     install(app: App) {
-      app.provide(themeKey, createThemeContext(options.theme ?? mavis))
+      const context = createThemeContext({ ...options, source: systemAppearance() })
+      app.provide(themeKey, context)
+      app.onUnmount(() => context.dispose())
       for (const [name, component] of Object.entries({
         MScreen,
         MBox,
@@ -30,7 +59,9 @@ export function createMavis(options: { theme?: MavisTheme } = {}) {
         MButton,
         MSlider,
         MInput,
+        MIcon,
         MReveal,
+        MSheet,
       })) {
         app.component(name, component)
       }