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

package/dist/index.js

@@ -1,5 +1,5 @@
-import { mavis } from '@getcortexlabs/mavis-core';
-import { createThemeContext, themeKey } from '@getcortexlabs/mavis-core/vue';
+import { createThemeContext, themeKey, } 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';
@@ -7,14 +7,18 @@ 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';
-export { MScreen, MBox, MRow, MColumn, MCard, MText, MButton, MSlider, MInput, MReveal };
+export { MScreen, MBox, MRow, MColumn, MCard, MText, MButton, MSlider, MInput, MIcon, MReveal };
 export { useMavisTheme } from '@getcortexlabs/mavis-core/vue';
 export * from '@getcortexlabs/mavis-core';
+/** Create one plugin per application; `system` appearance follows `prefers-color-scheme`. */
 export function createMavis(options = {}) {
     return {
         install(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,
@@ -25,6 +29,7 @@ export function createMavis(options = {}) {
                 MButton,
                 MSlider,
                 MInput,
+                MIcon,
                 MReveal,
             })) {
                 app.component(name, component);

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAmB,MAAM,2BAA2B,CAAA;AAClE,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAC5E,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AAEjD,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAA;AACxF,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAG7D,cAAc,2BAA2B,CAAA;AAEzC,MAAM,UAAU,WAAW,CAAC,UAAkC,EAAE;IAC9D,OAAO;QACL,OAAO,CAAC,GAAQ;YACd,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,kBAAkB,CAAC,OAAO,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC,CAAA;YACjE,KAAK,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC;gBAC7C,OAAO;gBACP,IAAI;gBACJ,IAAI;gBACJ,OAAO;gBACP,KAAK;gBACL,KAAK;gBACL,OAAO;gBACP,OAAO;gBACP,MAAM;gBACN,OAAO;aACR,CAAC,EAAE,CAAC;gBACH,GAAG,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,CAAA;YAChC,CAAC;QACH,CAAC;KACF,CAAA;AACH,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,kBAAkB,EAClB,QAAQ,GAET,MAAM,+BAA+B,CAAA;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AAEjD,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,CAAA;AAC/F,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAQ7D,cAAc,2BAA2B,CAAA;AAIzC,6FAA6F;AAC7F,MAAM,UAAU,WAAW,CAAC,UAAwB,EAAE;IACpD,OAAO;QACL,OAAO,CAAC,GAAQ;YACd,MAAM,OAAO,GAAG,kBAAkB,CAAC,EAAE,GAAG,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,EAAE,CAAC,CAAA;YAC9E,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;YAC9B,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,CAAA;YACtC,KAAK,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC;gBAC7C,OAAO;gBACP,IAAI;gBACJ,IAAI;gBACJ,OAAO;gBACP,KAAK;gBACL,KAAK;gBACL,OAAO;gBACP,OAAO;gBACP,MAAM;gBACN,KAAK;gBACL,OAAO;aACR,CAAC,EAAE,CAAC;gBACH,GAAG,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,CAAA;YAChC,CAAC;QACH,CAAC;KACF,CAAA;AACH,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getcortexlabs/mavis-web",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.2",
   "description": "Mavis components for Vue Web.",
   "type": "module",
   "sideEffects": [
@@ -26,7 +26,7 @@
     "build": "tsc -p tsconfig.build.json"
   },
   "dependencies": {
-    "@getcortexlabs/mavis-core": "0.1.0-alpha.1"
+    "@getcortexlabs/mavis-core": "0.1.0-alpha.2"
   },
   "peerDependencies": {
     "vue": "^3.5.42"

package/src/appearance.ts

@@ -0,0 +1,23 @@
+import type { AppearanceSource } from '@getcortexlabs/mavis-core/vue'
+
+function query() {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return undefined
+  return window.matchMedia('(prefers-color-scheme: dark)')
+}
+
+/** `prefers-color-scheme`, read only when called so server builds never touch `window`. */
+export function systemAppearance(): AppearanceSource {
+  return {
+    current() {
+      const media = query()
+      return media ? (media.matches ? 'dark' : 'light') : undefined
+    },
+    observe(listener) {
+      const media = query()
+      if (!media) return () => {}
+      const handler = (event: MediaQueryListEvent) => listener(event.matches ? 'dark' : 'light')
+      media.addEventListener('change', handler)
+      return () => media.removeEventListener('change', handler)
+    },
+  }
+}

package/src/components/MButton.ts

@@ -7,7 +7,13 @@ import {
   useDefaultShrink,
   viewAttrs,
 } from '@getcortexlabs/mavis-core/vue'
-import { nonNegative } from '@getcortexlabs/mavis-core'
+import {
+  nonNegative,
+  iconGlyph,
+  iconFontFamily,
+  iconSizes,
+  checkIconOnly,
+} from '@getcortexlabs/mavis-core'
 import { webAttrs } from '../style.js'
 
 export const MButton = defineComponent({
@@ -25,6 +31,32 @@ export const MButton = defineComponent({
       const text = props.loading
         ? props.loadingText
         : (props.text ?? textContent(slots.default?.()))
+      const hasIcon = Boolean(props.icon || props.trailingIcon)
+      checkIconOnly(text, hasIcon, props.accessibilityLabel)
+      const iconSize = iconSizes[props.size]
+      const paddingX = hasIcon && !text ? Math.round((size.height - iconSize) / 2) : size.padding
+      const span = (name: typeof props.icon) =>
+        name
+          ? h(
+              'span',
+              {
+                class: 'm-icon',
+                'aria-hidden': 'true',
+                style: {
+                  fontFamily: iconFontFamily,
+                  fontSize: `${iconSize}px`,
+                  width: `${iconSize}px`,
+                  height: `${iconSize}px`,
+                  lineHeight: 1,
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  flexShrink: 0,
+                },
+              },
+              iconGlyph(name),
+            )
+          : null
       return h(
         'button',
         mergeProps(
@@ -32,8 +64,12 @@ export const MButton = defineComponent({
             class: 'm-button',
             style: {
               boxSizing: 'border-box',
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: hasIcon ? '8px' : undefined,
               minHeight: `${size.height}px`,
-              padding: `12px ${size.padding}px`,
+              padding: `12px ${paddingX}px`,
               fontSize: `${size.fontSize}px`,
               fontWeight: 600,
               fontFamily: 'inherit',
@@ -66,7 +102,9 @@ export const MButton = defineComponent({
             },
           },
         ),
-        text,
+        hasIcon
+          ? [span(props.icon), text ? h('span', {}, text) : null, span(props.trailingIcon)]
+          : text,
       )
     }
   },

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/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,29 @@ 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'
 
-export { MScreen, MBox, MRow, MColumn, MCard, MText, MButton, MSlider, MInput, MReveal }
+export { MScreen, MBox, MRow, MColumn, MCard, MText, MButton, MSlider, MInput, MIcon, MReveal }
 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,6 +45,7 @@ export function createMavis(options: { theme?: MavisTheme } = {}) {
         MButton,
         MSlider,
         MInput,
+        MIcon,
         MReveal,
       })) {
         app.component(name, component)

package/src/style.css

@@ -1,3 +1,11 @@
+@font-face {
+  font-family: 'lucide';
+  src: url('./fonts/lucide.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
 .m-screen {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -137,3 +145,12 @@
   -webkit-text-fill-color: currentColor;
   opacity: 1;
 }
+
+.m-icon {
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  user-select: none;
+  -webkit-font-smoothing: antialiased;
+}