@m3ui-vue/m3ui-vue 0.1.1 → 0.1.2

package/src/components/MCodeEditor.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { ref, watch, onMounted, onBeforeUnmount, computed } from 'vue'
+import MIcon from './MIcon.vue'
 
-type Language = 'javascript' | 'typescript' | 'json' | 'html' | 'css' | 'python' | 'plain'
+type Language = 'javascript' | 'typescript' | 'json' | 'html' | 'css' | 'python' | 'vue' | 'plain'
 
 const props = withDefaults(
   defineProps<{
@@ -13,6 +14,7 @@ const props = withDefaults(
     minHeight?: string
     maxHeight?: string
     placeholder?: string
+    wrap?: boolean
   }>(),
   {
     language: 'javascript',
@@ -21,6 +23,7 @@ const props = withDefaults(
     theme: 'light',
     minHeight: '200px',
     maxHeight: '600px',
+    wrap: true,
   },
 )
 
@@ -29,6 +32,13 @@ const emit = defineEmits<{ 'update:modelValue': [string] }>()
 const containerRef = ref<HTMLElement | null>(null)
 let view: any = null
 let cmModules: any = null
+const copied = ref(false)
+
+async function copyCode() {
+  await navigator.clipboard.writeText(props.modelValue)
+  copied.value = true
+  setTimeout(() => { copied.value = false }, 1500)
+}
 
 const langLabel = computed(() => {
   const labels: Record<Language, string> = {
@@ -38,6 +48,7 @@ const langLabel = computed(() => {
     html: 'HTML',
     css: 'CSS',
     python: 'Python',
+    vue: 'Vue',
     plain: 'Texto',
   }
   return labels[props.language]
@@ -46,23 +57,71 @@ const langLabel = computed(() => {
 async function loadModules() {
   if (cmModules) return cmModules
 
-  const [viewMod, stateMod, commandsMod, languageMod, oneDarkMod, jsMod, jsonMod, htmlMod, cssMod, pyMod] = await Promise.all([
+  const [viewMod, stateMod, commandsMod, languageMod, highlightMod, oneDarkMod, jsMod, jsonMod, htmlMod, cssMod, pyMod, vueMod] = await Promise.all([
     import('@codemirror/view'),
     import('@codemirror/state'),
     import('@codemirror/commands'),
     import('@codemirror/language'),
+    import('@lezer/highlight'),
     import('@codemirror/theme-one-dark'),
     import('@codemirror/lang-javascript'),
     import('@codemirror/lang-json'),
     import('@codemirror/lang-html'),
     import('@codemirror/lang-css'),
     import('@codemirror/lang-python'),
+    import('@codemirror/lang-vue'),
   ])
 
-  cmModules = { viewMod, stateMod, commandsMod, languageMod, oneDarkMod, jsMod, jsonMod, htmlMod, cssMod, pyMod }
+  cmModules = { viewMod, stateMod, commandsMod, languageMod, highlightMod, oneDarkMod, jsMod, jsonMod, htmlMod, cssMod, pyMod, vueMod }
   return cmModules
 }
 
+function buildM3HighlightStyle(languageMod: any, tags: any) {
+  return languageMod.HighlightStyle.define([
+    { tag: tags.keyword, color: 'var(--color-primary)' },
+    { tag: tags.controlKeyword, color: 'var(--color-primary)', fontWeight: '500' },
+    { tag: tags.operatorKeyword, color: 'var(--color-primary)' },
+    { tag: tags.definitionKeyword, color: 'var(--color-primary)' },
+    { tag: tags.moduleKeyword, color: 'var(--color-primary)' },
+
+    { tag: tags.string, color: 'var(--color-tertiary)' },
+    { tag: tags.regexp, color: 'var(--color-tertiary)' },
+
+    { tag: tags.number, color: 'var(--color-error)' },
+    { tag: tags.bool, color: 'var(--color-error)' },
+
+    { tag: tags.function(tags.variableName), color: 'var(--color-secondary)' },
+    { tag: tags.function(tags.definition(tags.variableName)), color: 'var(--color-secondary)', fontWeight: '500' },
+
+    { tag: tags.typeName, color: 'var(--color-primary)', fontStyle: 'italic' },
+    { tag: tags.className, color: 'var(--color-primary)', fontStyle: 'italic' },
+    { tag: tags.namespace, color: 'var(--color-on-surface-variant)' },
+
+    { tag: tags.propertyName, color: 'var(--color-on-surface)' },
+    { tag: tags.definition(tags.propertyName), color: 'var(--color-on-surface)' },
+
+    { tag: tags.variableName, color: 'var(--color-on-surface)' },
+    { tag: tags.definition(tags.variableName), color: 'var(--color-on-surface)' },
+
+    { tag: tags.comment, color: 'var(--color-outline)', fontStyle: 'italic' },
+    { tag: tags.lineComment, color: 'var(--color-outline)', fontStyle: 'italic' },
+    { tag: tags.blockComment, color: 'var(--color-outline)', fontStyle: 'italic' },
+
+    { tag: tags.meta, color: 'var(--color-on-surface-variant)' },
+    { tag: tags.tagName, color: 'var(--color-primary)' },
+    { tag: tags.attributeName, color: 'var(--color-tertiary)' },
+    { tag: tags.attributeValue, color: 'var(--color-secondary)' },
+
+    { tag: tags.atom, color: 'var(--color-error)' },
+    { tag: tags.null, color: 'var(--color-error)' },
+
+    { tag: tags.punctuation, color: 'var(--color-on-surface-variant)' },
+    { tag: tags.bracket, color: 'var(--color-on-surface-variant)' },
+    { tag: tags.operator, color: 'var(--color-on-surface-variant)' },
+    { tag: tags.separator, color: 'var(--color-on-surface-variant)' },
+  ])
+}
+
 function getLangExtension(mods: any) {
   switch (props.language) {
     case 'javascript': return mods.jsMod.javascript()
@@ -71,12 +130,15 @@ function getLangExtension(mods: any) {
     case 'html': return mods.htmlMod.html()
     case 'css': return mods.cssMod.css()
     case 'python': return mods.pyMod.python()
+    case 'vue': return mods.vueMod.vue()
     default: return []
   }
 }
 
 function buildExtensions(mods: any) {
-  const { viewMod, stateMod, commandsMod, languageMod, oneDarkMod } = mods
+  const { viewMod, stateMod, commandsMod, languageMod, highlightMod, oneDarkMod } = mods
+
+  const m3Style = buildM3HighlightStyle(languageMod, highlightMod.tags)
 
   const exts = [
     viewMod.keymap.of([...commandsMod.defaultKeymap, ...commandsMod.historyKeymap, commandsMod.indentWithTab]),
@@ -86,6 +148,7 @@ function buildExtensions(mods: any) {
     languageMod.foldGutter(),
     viewMod.highlightActiveLine(),
     viewMod.highlightActiveLineGutter(),
+    languageMod.syntaxHighlighting(m3Style),
     languageMod.syntaxHighlighting(languageMod.defaultHighlightStyle, { fallback: true }),
     getLangExtension(mods),
     viewMod.EditorView.updateListener.of((update: any) => {
@@ -94,6 +157,7 @@ function buildExtensions(mods: any) {
     stateMod.EditorState.readOnly.of(props.readonly),
   ]
 
+  if (props.wrap) exts.push(viewMod.EditorView.lineWrapping)
   if (props.lineNumbers) exts.push(viewMod.lineNumbers())
   if (props.theme === 'dark') exts.push(oneDarkMod.oneDark)
 
@@ -124,7 +188,7 @@ watch(() => props.modelValue, (val) => {
   }
 })
 
-watch([() => props.language, () => props.theme, () => props.readonly, () => props.lineNumbers], createEditor)
+watch([() => props.language, () => props.theme, () => props.readonly, () => props.lineNumbers, () => props.wrap], createEditor)
 
 onBeforeUnmount(() => view?.destroy())
 </script>
@@ -134,13 +198,24 @@ onBeforeUnmount(() => view?.destroy())
     <!-- Header bar -->
     <div class="flex items-center justify-between border-b border-outline-variant bg-surface-container px-4 py-2">
       <span class="text-label-medium text-on-surface-variant">{{ langLabel }}</span>
-      <slot name="actions" />
+      <div class="flex items-center gap-2">
+        <slot name="actions" />
+        <button
+          type="button"
+          class="flex h-7 cursor-pointer items-center gap-1.5 rounded-md px-2 text-label-medium text-on-surface-variant transition-colors hover:bg-on-surface/8"
+          :title="copied ? 'Copied!' : 'Copy code'"
+          @click="copyCode"
+        >
+          <MIcon :name="copied ? 'check' : 'content_copy'" :size="16" :class="copied ? 'text-primary' : ''" />
+          <span v-if="copied" class="text-primary">Copied</span>
+        </button>
+      </div>
     </div>
 
     <!-- Editor -->
     <div
       ref="containerRef"
-      class="code-editor-container overflow-auto bg-surface"
+      class="code-editor-container overflow-auto bg-surface text-on-surface"
       :style="{ minHeight, maxHeight }"
     />
   </div>
@@ -150,8 +225,9 @@ onBeforeUnmount(() => view?.destroy())
 .code-editor-container :deep(.cm-editor) {
   height: 100%;
   min-height: inherit;
-  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
-  font-size: 0.875rem;
+  font-family: 'Roboto Mono', 'Fira Code', 'Consolas', monospace;
+  font-size: 0.8125rem;
+  line-height: 1.6;
 }
 
 .code-editor-container :deep(.cm-editor.cm-focused) {
@@ -162,14 +238,25 @@ onBeforeUnmount(() => view?.destroy())
   min-height: inherit;
 }
 
+.code-editor-container :deep(.cm-content) {
+  padding: 12px 0;
+}
+
+.code-editor-container :deep(.cm-line) {
+  padding: 0 16px;
+}
+
 .code-editor-container :deep(.cm-gutters) {
   background: var(--color-surface-container);
   border-right: 1px solid var(--color-outline-variant);
-  color: var(--color-on-surface-variant);
+  color: var(--color-outline);
+  font-size: 0.75rem;
+  padding: 0 4px;
 }
 
 .code-editor-container :deep(.cm-activeLineGutter) {
   background: var(--color-surface-container-high);
+  color: var(--color-on-surface-variant);
 }
 
 .code-editor-container :deep(.cm-activeLine) {
@@ -182,11 +269,13 @@ onBeforeUnmount(() => view?.destroy())
 
 .code-editor-container :deep(.cm-cursor) {
   border-left-color: var(--color-primary);
+  border-left-width: 2px;
 }
 
 .code-editor-container :deep(.cm-matchingBracket) {
   background: var(--color-tertiary-container);
   color: var(--color-on-tertiary-container);
+  border-radius: 2px;
 }
 
 .code-editor-container :deep(.cm-foldGutter span) {

package/src/components/MFab.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch, nextTick } from 'vue'
 import MIcon from './MIcon.vue'
 
 export interface SpeedDialItem {
@@ -15,9 +15,7 @@ const props = withDefaults(
     color?: 'primary' | 'secondary' | 'tertiary' | 'surface'
     size?: 'small' | 'regular' | 'large'
     disabled?: boolean
-    /** Speed-dial child items. If provided, clicking the FAB toggles them instead of emitting click. */
     items?: SpeedDialItem[]
-    /** Direction the speed-dial items expand toward. */
     direction?: 'up' | 'down' | 'left' | 'right' | 'radial'
   }>(),
   {
@@ -31,7 +29,7 @@ const props = withDefaults(
 const emit = defineEmits<{ click: [MouseEvent] }>()
 
 const open = ref(false)
-const containerEl = ref<HTMLElement>()
+const fabEl = ref<HTMLElement>()
 
 const hasItems = computed(() => !!props.items?.length)
 
@@ -60,7 +58,6 @@ const fabIconSize = computed(() => {
   }
 })
 
-// FAB height in px — used to position items relative to the container
 const fabPx = computed(() => {
   if (props.label) return 56
   switch (props.size) {
@@ -70,17 +67,24 @@ const fabPx = computed(() => {
   }
 })
 
-// Item size (always small-FAB-sized): 40px
 const ITEM_PX = 40
 const ITEM_GAP = 8
 
+function getRect(): DOMRect | null {
+  return fabEl.value?.getBoundingClientRect() ?? null
+}
+
 function itemStyle(index: number): Record<string, string> {
+  const rect = getRect()
+  if (!rect) return { position: 'fixed', opacity: '0', pointerEvents: 'none' }
+
+  const cx = rect.left + rect.width / 2
+  const cy = rect.top + rect.height / 2
   const count = props.items?.length ?? 0
-  // Stagger delay: open = forward order, close = reverse order
+
   const delay = open.value
     ? `${index * 35}ms`
     : `${(count - 1 - index) * 35}ms`
-
   const transition = `transform 220ms cubic-bezier(0.2,0,0,1) ${delay}, opacity 180ms ease ${delay}`
 
   if (props.direction === 'radial') {
@@ -89,27 +93,25 @@ function itemStyle(index: number): Record<string, string> {
     const dx = (Math.cos(angle) * r).toFixed(1)
     const dy = (Math.sin(angle) * r).toFixed(1)
     return {
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      marginTop: `${-ITEM_PX / 2}px`,
-      marginLeft: `${-ITEM_PX / 2}px`,
+      position: 'fixed',
+      top: `${cy - ITEM_PX / 2}px`,
+      left: `${cx - ITEM_PX / 2}px`,
       transform: open.value ? `translate(${dx}px, ${dy}px) scale(1)` : 'translate(0,0) scale(0)',
       opacity: open.value ? '1' : '0',
       transition,
       pointerEvents: open.value ? 'auto' : 'none',
+      zIndex: '1000',
     }
   }
 
-  // Linear directions: offset from the container edge
   const step = ITEM_PX + ITEM_GAP
-  const base = fabPx.value + ITEM_GAP + index * step
+  const offset = fabPx.value / 2 + ITEM_GAP + ITEM_PX / 2 + index * step
 
-  const offsetMap: Record<string, Record<string, string>> = {
-    up:    { bottom: `${base}px`, left: '50%', marginLeft: `${-ITEM_PX / 2}px` },
-    down:  { top:    `${base}px`, left: '50%', marginLeft: `${-ITEM_PX / 2}px` },
-    left:  { right:  `${base}px`, top:  '50%', marginTop:  `${-ITEM_PX / 2}px` },
-    right: { left:   `${base}px`, top:  '50%', marginTop:  `${-ITEM_PX / 2}px` },
+  const posMap: Record<string, { top: string; left: string }> = {
+    up:    { top: `${cy - offset - ITEM_PX / 2}px`, left: `${cx - ITEM_PX / 2}px` },
+    down:  { top: `${cy + offset - ITEM_PX / 2}px`, left: `${cx - ITEM_PX / 2}px` },
+    left:  { top: `${cy - ITEM_PX / 2}px`, left: `${cx - offset - ITEM_PX / 2}px` },
+    right: { top: `${cy - ITEM_PX / 2}px`, left: `${cx + offset - ITEM_PX / 2}px` },
   }
 
   const translateFrom: Record<string, string> = {
@@ -119,19 +121,27 @@ function itemStyle(index: number): Record<string, string> {
     right: 'translateX(-12px) scale(0.75)',
   }
 
+  const pos = posMap[props.direction] ?? posMap.up
+
   return {
-    position: 'absolute',
-    ...offsetMap[props.direction] ?? offsetMap.up,
+    position: 'fixed',
+    ...pos,
     transform: open.value ? 'translate(0,0) scale(1)' : (translateFrom[props.direction] ?? 'scale(0.75)'),
     opacity: open.value ? '1' : '0',
     transition,
     pointerEvents: open.value ? 'auto' : 'none',
+    zIndex: '1000',
   }
 }
 
-// Label only makes sense for up/down; placed to the left of the item button
 const showLabel = computed(() => props.direction === 'up' || props.direction === 'down')
 
+// Force re-render to recalculate positions on scroll
+const scrollTick = ref(0)
+function onScroll() {
+  if (open.value) scrollTick.value++
+}
+
 function createRipple(event: PointerEvent | MouseEvent, target?: HTMLElement) {
   const button = (target ?? event.currentTarget) as HTMLElement
   const rect = button.getBoundingClientRect()
@@ -159,19 +169,44 @@ function handleItemClick(e: PointerEvent, item: SpeedDialItem, buttonEl: HTMLEle
 
 function onDocClick(e: MouseEvent) {
   if (!open.value) return
-  if (containerEl.value && !containerEl.value.contains(e.target as Node)) {
+  if (fabEl.value && !fabEl.value.contains(e.target as Node)) {
     open.value = false
   }
 }
 
-onMounted(() => document.addEventListener('click', onDocClick, true))
-onUnmounted(() => document.removeEventListener('click', onDocClick, true))
+onMounted(() => {
+  document.addEventListener('click', onDocClick, true)
+  window.addEventListener('scroll', onScroll, true)
+})
+onUnmounted(() => {
+  document.removeEventListener('click', onDocClick, true)
+  window.removeEventListener('scroll', onScroll, true)
+})
 </script>
 
 <template>
-  <div ref="containerEl" class="relative inline-flex items-center justify-center">
-    <!-- Speed-dial items (absolutely positioned outside the container) -->
+  <div ref="fabEl" class="relative inline-flex items-center justify-center">
+    <button
+      type="button"
+      class="relative inline-flex cursor-pointer items-center justify-center overflow-hidden shadow-elevation-1 transition-shadow duration-150 hover:shadow-elevation-2 active:shadow-elevation-1 disabled:cursor-not-allowed disabled:opacity-[0.38] before:content-[''] before:pointer-events-none before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:duration-150 hover:before:opacity-[0.08] active:before:opacity-[0.12]"
+      :class="[colorMap[color], fabSizeClasses]"
+      :disabled="disabled"
+      @pointerdown="(e) => { createRipple(e); handleFabClick(e) }"
+    >
+      <MIcon
+        :name="icon"
+        :size="fabIconSize"
+        class="transition-transform duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)]"
+        :class="hasItems && open ? 'rotate-45' : ''"
+      />
+      <span v-if="label" class="text-label-large font-medium">{{ label }}</span>
+    </button>
+  </div>
+
+  <Teleport to="body">
     <template v-if="hasItems">
+      <!-- hidden dep on scrollTick to force style recalc -->
+      <span :data-tick="scrollTick" class="hidden" />
       <div
         v-for="(item, i) in items"
         :key="i"
@@ -179,7 +214,6 @@ onUnmounted(() => document.removeEventListener('click', onDocClick, true))
         class="flex items-center gap-3"
         :class="showLabel ? 'flex-row-reverse' : ''"
       >
-        <!-- Label pill (up/down only) -->
         <span
           v-if="item.label && showLabel"
           class="whitespace-nowrap rounded-md bg-surface-container-high px-3 py-1.5 text-label-medium text-on-surface shadow-elevation-1"
@@ -187,7 +221,6 @@ onUnmounted(() => document.removeEventListener('click', onDocClick, true))
           {{ item.label }}
         </span>
 
-        <!-- Mini FAB button -->
         <button
           type="button"
           class="relative flex cursor-pointer items-center justify-center overflow-hidden rounded-lg shadow-elevation-1 transition-shadow duration-150 hover:shadow-elevation-2 active:shadow-elevation-1 before:content-[''] before:pointer-events-none before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:duration-150 hover:before:opacity-[0.08] active:before:opacity-[0.12]"
@@ -199,22 +232,5 @@ onUnmounted(() => document.removeEventListener('click', onDocClick, true))
         </button>
       </div>
     </template>
-
-    <!-- Main FAB -->
-    <button
-      type="button"
-      class="relative inline-flex cursor-pointer items-center justify-center overflow-hidden shadow-elevation-1 transition-shadow duration-150 hover:shadow-elevation-2 active:shadow-elevation-1 disabled:cursor-not-allowed disabled:opacity-[0.38] before:content-[''] before:pointer-events-none before:absolute before:inset-0 before:bg-current before:opacity-0 before:transition-opacity before:duration-150 hover:before:opacity-[0.08] active:before:opacity-[0.12]"
-      :class="[colorMap[color], fabSizeClasses]"
-      :disabled="disabled"
-      @pointerdown="(e) => { createRipple(e); handleFabClick(e) }"
-    >
-      <MIcon
-        :name="icon"
-        :size="fabIconSize"
-        class="transition-transform duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)]"
-        :class="hasItems && open ? 'rotate-45' : ''"
-      />
-      <span v-if="label" class="text-label-large font-medium">{{ label }}</span>
-    </button>
-  </div>
+  </Teleport>
 </template>

package/src/components/MMultiSelect.vue

@@ -147,7 +147,8 @@ const triggerClasses = computed(() => {
 
   return [
     ...base,
-    'rounded-t-sm bg-surface-container-highest border-b pt-7 pb-2',
+    'rounded-t-sm bg-surface-container-highest border-b pb-2',
+    hasValue.value || open.value ? 'pt-7' : 'pt-4',
     open.value
       ? (props.error ? 'border-b-2 border-error' : 'border-b-2 border-primary')
       : (props.error ? 'border-error' : 'border-on-surface-variant hover:border-on-surface'),
@@ -161,7 +162,7 @@ const labelClasses = computed(() => {
 
   const floated = props.variant === 'outlined'
     ? '-top-2.5 translate-y-0 text-label-small bg-[var(--field-bg)] px-1 right-auto max-w-[calc(100%-1.5rem)]'
-    : 'top-3.5 translate-y-0 text-label-small'
+    : 'top-2 translate-y-0 text-label-small'
 
   const unFloated = 'top-1/2 -translate-y-1/2 text-body-large'
   const active = open.value || hasValue.value

package/src/components/MTooltip.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { nextTick, ref } from 'vue'
+import { nextTick, onMounted, onUnmounted, ref } from 'vue'
 
 const props = withDefaults(defineProps<{
   text: string
@@ -27,6 +27,10 @@ function hide() {
   visible.value = false
 }
 
+function onScroll() {
+  if (visible.value) hide()
+}
+
 function reposition() {
   if (!triggerEl.value || !tipEl.value) return
   const tr = triggerEl.value.getBoundingClientRect()
@@ -45,6 +49,9 @@ function reposition() {
   left = Math.max(6, Math.min(left, window.innerWidth  - tt.width  - 6))
   tipStyle.value = { top: `${top}px`, left: `${left}px` }
 }
+
+onMounted(() => window.addEventListener('scroll', onScroll, true))
+onUnmounted(() => window.removeEventListener('scroll', onScroll, true))
 </script>
 
 <template>

package/src/index.ts

@@ -21,10 +21,10 @@ export { default as MBreadcrumbs } from './components/MBreadcrumbs.vue'
 export { default as MButton } from './components/MButton.vue'
 export { default as MCalendar } from './components/MCalendar.vue'
 export { default as MCard } from './components/MCard.vue'
-export { default as MChart } from './components/MChart.vue'
+// MChart — import from '@m3ui-vue/m3ui-vue/chart'
 export { default as MCheckbox } from './components/MCheckbox.vue'
 export { default as MChip } from './components/MChip.vue'
-export { default as MCodeEditor } from './components/MCodeEditor.vue'
+// MCodeEditor — import from '@m3ui-vue/m3ui-vue/code-editor'
 export { default as MColorPicker } from './components/MColorPicker.vue'
 export { default as MCommandPalette } from './components/MCommandPalette.vue'
 export { default as MConfirmDialog } from './components/MConfirmDialog.vue'
@@ -45,11 +45,11 @@ export { default as MHotkeys } from './components/MHotkeys.vue'
 export { default as MIcon } from './components/MIcon.vue'
 export { default as MIconButton } from './components/MIconButton.vue'
 export { default as MInfiniteScroll } from './components/MInfiniteScroll.vue'
-export { default as MJsonEditor } from './components/MJsonEditor.vue'
+// MJsonEditor — import from '@m3ui-vue/m3ui-vue/code-editor'
 export { default as MJsonViewer } from './components/MJsonViewer.vue'
 export { default as MKanban } from './components/MKanban.vue'
 export { default as MLoadingOverlay } from './components/MLoadingOverlay.vue'
-export { default as MMarkdown } from './components/MMarkdown.vue'
+// MMarkdown — import from '@m3ui-vue/m3ui-vue/markdown'
 export { default as MMasonry } from './components/MMasonry.vue'
 export { default as MMenu } from './components/MMenu.vue'
 export { default as MMenuItem } from './components/MMenuItem.vue'
@@ -63,7 +63,7 @@ export { default as MRadio } from './components/MRadio.vue'
 export { default as MRadioGroup } from './components/MRadioGroup.vue'
 export { default as MRating } from './components/MRating.vue'
 export { default as MResult } from './components/MResult.vue'
-export { default as MRichTextEditor } from './components/MRichTextEditor.vue'
+// MRichTextEditor — import from '@m3ui-vue/m3ui-vue/rich-text-editor'
 export { default as MScheduler } from './components/MScheduler.vue'
 export { default as MSegmentedButton } from './components/MSegmentedButton.vue'
 export { default as MSelect } from './components/MSelect.vue'
@@ -80,7 +80,7 @@ export { default as MStepper } from './components/MStepper.vue'
 export { default as MSwitch } from './components/MSwitch.vue'
 export { default as MTable } from './components/MTable.vue'
 export { default as MTabs } from './components/MTabs.vue'
-export { default as MTerminal } from './components/MTerminal.vue'
+// MTerminal — import from '@m3ui-vue/m3ui-vue/terminal'
 export { default as MTextField } from './components/MTextField.vue'
 export { default as MTimeline } from './components/MTimeline.vue'
 export { default as MTimePicker } from './components/MTimePicker.vue'

package/src/markdown.ts

@@ -0,0 +1 @@
+export { default as MMarkdown } from './components/MMarkdown.vue'

package/src/rich-text-editor.ts

@@ -0,0 +1 @@
+export { default as MRichTextEditor } from './components/MRichTextEditor.vue'

package/src/styles/theme.css

@@ -1,3 +1,6 @@
+/* Scan the library's components so Tailwind generates the needed utilities */
+@source '..';
+
 /* Enable class-based dark mode for Tailwind v4 */
 @custom-variant dark (&:where(.dark, .dark *));
 

package/src/terminal.ts

@@ -0,0 +1 @@
+export { default as MTerminal } from './components/MTerminal.vue'

package/dist/m3ui.css

@@ -1,2 +0,0 @@
-.bs-scrim[data-v-941a89e7]{transition:opacity .3s}.bs-enter-from .bs-scrim[data-v-941a89e7],.bs-leave-to .bs-scrim[data-v-941a89e7]{opacity:0}.bs-panel[data-v-941a89e7]{transition:transform .32s cubic-bezier(.2,0,0,1),opacity .24s}.bs-enter-from .bs-panel[data-v-941a89e7]{opacity:0;transform:translateY(40%)}.bs-leave-to .bs-panel[data-v-941a89e7]{opacity:0;transform:translateY(100%)!important}@keyframes m3-wavy-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes m3-wavy-travel{0%{stroke-dashoffset:0}to{stroke-dashoffset:calc(var(--m3-wave-len) * -1px)}}@media (prefers-reduced-motion:reduce){.animate-\[m3-wavy-spin_2\.8s_linear_infinite\]{animation:2.8s linear infinite m3-wavy-spin}.animate-\[m3-wavy-travel_2s_linear_infinite\]{animation:none!important}}.code-editor-container[data-v-5274a428] .cm-editor{height:100%;min-height:inherit;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:.875rem}.code-editor-container[data-v-5274a428] .cm-editor.cm-focused{outline:none}.code-editor-container[data-v-5274a428] .cm-scroller{min-height:inherit}.code-editor-container[data-v-5274a428] .cm-gutters{background:var(--color-surface-container);border-right:1px solid var(--color-outline-variant);color:var(--color-on-surface-variant)}.code-editor-container[data-v-5274a428] .cm-activeLineGutter{background:var(--color-surface-container-high)}.code-editor-container[data-v-5274a428] .cm-activeLine{background:var(--color-surface-container-lowest)}.code-editor-container[data-v-5274a428] .cm-selectionBackground{background:var(--color-primary-container)!important}.code-editor-container[data-v-5274a428] .cm-cursor{border-left-color:var(--color-primary)}.code-editor-container[data-v-5274a428] .cm-matchingBracket{background:var(--color-tertiary-container);color:var(--color-on-tertiary-container)}.code-editor-container[data-v-5274a428] .cm-foldGutter span{color:var(--color-on-surface-variant)}.hue-slider[data-v-9ee0043f]{background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}.hue-slider[data-v-9ee0043f]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0006}.hue-slider[data-v-9ee0043f]::-moz-range-thumb{cursor:pointer;background:#fff;border:none;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0006}.m3-cmd-enter-active[data-v-da578f14],.m3-cmd-leave-active[data-v-da578f14]{transition:opacity .15s}.m3-cmd-enter-from[data-v-da578f14],.m3-cmd-leave-to[data-v-da578f14]{opacity:0}.m3-cmd-enter-active .cmd-box[data-v-da578f14],.m3-cmd-leave-active .cmd-box[data-v-da578f14]{transition:transform .15s}.m3-cmd-enter-from .cmd-box[data-v-da578f14],.m3-cmd-leave-to .cmd-box[data-v-da578f14]{transform:scale(.95)translateY(-10px)}.m3-dialog-enter-active[data-v-e7dfca29],.m3-dialog-leave-active[data-v-e7dfca29]{transition:opacity .15s}.m3-dialog-enter-from[data-v-e7dfca29],.m3-dialog-leave-to[data-v-e7dfca29]{opacity:0}.m3-dialog-enter-active .dialog-box[data-v-e7dfca29],.m3-dialog-leave-active .dialog-box[data-v-e7dfca29]{transition:transform .15s}.m3-dialog-enter-from .dialog-box[data-v-e7dfca29],.m3-dialog-leave-to .dialog-box[data-v-e7dfca29]{transform:scale(.95)}.expand-grid[data-v-89e4475b]{grid-template-rows:1fr;display:grid}.expand-body[data-v-89e4475b]{min-height:0;overflow:hidden}.expand-enter-active[data-v-89e4475b]{transition:grid-template-rows .28s cubic-bezier(.2,0,0,1)}.expand-enter-active>.expand-body[data-v-89e4475b]{transition:opacity .22s}.expand-enter-from[data-v-89e4475b]{grid-template-rows:0fr}.expand-enter-from>.expand-body[data-v-89e4475b]{opacity:0}.expand-leave-active[data-v-89e4475b]{transition:grid-template-rows .22s cubic-bezier(.4,0,1,1)}.expand-leave-active>.expand-body[data-v-89e4475b]{transition:opacity .15s}.expand-leave-to[data-v-89e4475b]{grid-template-rows:0fr}.expand-leave-to>.expand-body[data-v-89e4475b]{opacity:0}.m3-file-enter-active[data-v-34a862f0],.m3-file-leave-active[data-v-34a862f0]{transition:all .2s}.m3-file-enter-from[data-v-34a862f0],.m3-file-leave-to[data-v-34a862f0]{opacity:0;transform:translateY(-8px)}.m3-markdown[data-v-6e4dc2b6] h1{font-size:var(--text-headline-large);line-height:var(--text-headline-large--line-height);color:var(--color-on-surface);margin:1em 0 .5em;font-weight:600}.m3-markdown[data-v-6e4dc2b6] h2{font-size:var(--text-headline-medium);line-height:var(--text-headline-medium--line-height);color:var(--color-on-surface);margin:1em 0 .5em;font-weight:600}.m3-markdown[data-v-6e4dc2b6] h3{font-size:var(--text-headline-small);line-height:var(--text-headline-small--line-height);color:var(--color-on-surface);margin:.75em 0 .25em;font-weight:600}.m3-markdown[data-v-6e4dc2b6] h4{font-size:var(--text-title-large);line-height:var(--text-title-large--line-height);color:var(--color-on-surface);margin:.75em 0 .25em;font-weight:600}.m3-markdown[data-v-6e4dc2b6] p{margin:.5em 0}.m3-markdown[data-v-6e4dc2b6] a{color:var(--color-primary);text-underline-offset:2px;text-decoration:underline}.m3-markdown[data-v-6e4dc2b6] a:hover{opacity:.8}.m3-markdown[data-v-6e4dc2b6] strong{color:var(--color-on-surface);font-weight:600}.m3-markdown[data-v-6e4dc2b6] em{font-style:italic}.m3-markdown[data-v-6e4dc2b6] ul,.m3-markdown[data-v-6e4dc2b6] ol{margin:.5em 0;padding-left:1.5em}.m3-markdown[data-v-6e4dc2b6] li{margin:.25em 0}.m3-markdown[data-v-6e4dc2b6] li::marker{color:var(--color-on-surface-variant)}.m3-markdown[data-v-6e4dc2b6] blockquote{border-left:3px solid var(--color-primary);background:var(--color-surface-container);color:var(--color-on-surface-variant);border-radius:0 8px 8px 0;margin:.75em 0;padding:.5em 1em}.m3-markdown[data-v-6e4dc2b6] code{background:var(--color-surface-container-highest);color:var(--color-primary);border-radius:4px;padding:.15em .4em;font-family:JetBrains Mono,Fira Code,monospace;font-size:.875em}.m3-markdown[data-v-6e4dc2b6] pre{background:var(--color-surface-container-highest);border:1px solid var(--color-outline-variant);border-radius:12px;margin:.75em 0;padding:1em;overflow-x:auto}.m3-markdown[data-v-6e4dc2b6] pre code{color:var(--color-on-surface);background:0 0;padding:0}.m3-markdown[data-v-6e4dc2b6] hr{border:none;border-top:1px solid var(--color-outline-variant);margin:1.5em 0}.m3-markdown[data-v-6e4dc2b6] table{border-collapse:collapse;width:100%;margin:.75em 0}.m3-markdown[data-v-6e4dc2b6] th{background:var(--color-surface-container);text-align:left;border-bottom:2px solid var(--color-outline-variant);font-weight:600;font-size:var(--text-label-large);color:var(--color-on-surface);padding:.5em .75em}.m3-markdown[data-v-6e4dc2b6] td{border-bottom:1px solid var(--color-outline-variant);padding:.5em .75em}.m3-markdown[data-v-6e4dc2b6] img{border-radius:12px;max-width:100%;height:auto;margin:.5em 0}.nd-scrim[data-v-98c11a62]{transition:opacity .28s}.nd-enter-from .nd-scrim[data-v-98c11a62],.nd-leave-to .nd-scrim[data-v-98c11a62]{opacity:0}.nd-panel[data-v-98c11a62]{transition:transform .3s cubic-bezier(.2,0,0,1)}.nd-enter-from .nd-panel[data-v-98c11a62],.nd-leave-to .nd-panel[data-v-98c11a62]{transform:translate(-100%)}@keyframes m3-wave-flow{0%{transform:translate(0)}to{transform:translate(-20px)}}@keyframes m3-progress-indeterminate{0%{left:-40%}to{left:100%}}@media (prefers-reduced-motion:reduce){.animate-\[m3-wave-flow_1\.2s_linear_infinite\],.animate-\[m3-wave-flow_0\.9s_linear_infinite\],.animate-\[m3-progress-indeterminate_1\.6s_ease-in-out_infinite\]{animation:none!important}}.m3-radio-dot[data-v-cdb650b5]{transform-box:fill-box;transform-origin:50%;transition:transform .15s;transform:scale(0)}.m3-radio-dot.is-checked[data-v-cdb650b5]{transform:scale(1)}.rte-content[data-v-89c08c83] .tiptap{min-height:inherit;outline:none}.rte-content[data-v-89c08c83] .tiptap p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;color:var(--color-on-surface-variant);opacity:.5;pointer-events:none;height:0}.rte-content[data-v-89c08c83] h1{font-size:var(--text-headline-large);line-height:var(--text-headline-large--line-height);margin:.75em 0 .25em;font-weight:600}.rte-content[data-v-89c08c83] h2{font-size:var(--text-headline-medium);line-height:var(--text-headline-medium--line-height);margin:.75em 0 .25em;font-weight:600}.rte-content[data-v-89c08c83] h3{font-size:var(--text-headline-small);line-height:var(--text-headline-small--line-height);margin:.75em 0 .25em;font-weight:600}.rte-content[data-v-89c08c83] p{margin:.5em 0}.rte-content[data-v-89c08c83] ul,.rte-content[data-v-89c08c83] ol{margin:.5em 0;padding-left:1.5em}.rte-content[data-v-89c08c83] blockquote{border-left:3px solid var(--color-primary);color:var(--color-on-surface-variant);margin:.5em 0;padding-left:1em}.rte-content[data-v-89c08c83] code{background:var(--color-surface-container-highest);border-radius:4px;padding:.15em .4em;font-size:.875em}.rte-content[data-v-89c08c83] pre{background:var(--color-surface-container-highest);border-radius:8px;margin:.5em 0;padding:1em;overflow-x:auto}.rte-content[data-v-89c08c83] pre code{background:0 0;padding:0}.rte-content[data-v-89c08c83] a{color:var(--color-primary);text-decoration:underline}.rte-content[data-v-89c08c83] mark{background:var(--color-tertiary-container);color:var(--color-on-tertiary-container);border-radius:2px;padding:.1em .2em}.rte-content[data-v-89c08c83] img{border-radius:8px;max-width:100%;height:auto;margin:.5em 0}.ss-scrim[data-v-f8751672]{transition:opacity .28s}.ss-enter-from .ss-scrim[data-v-f8751672],.ss-leave-to .ss-scrim[data-v-f8751672]{opacity:0}.ss-panel[data-v-f8751672]{transition:transform .32s cubic-bezier(.2,0,0,1),opacity .24s}.ss-enter-from .ss-panel[data-v-f8751672]{opacity:0;transform:translate(40%)}.ss-leave-to .ss-panel[data-v-f8751672]{opacity:0;transform:translate(100%)!important}@keyframes skeleton-wave-move-32ecf05b{0%{transform:translate(-100%)}60%{transform:translate(100%)}to{transform:translate(100%)}}.skeleton-wave[data-v-32ecf05b]{position:relative;overflow:hidden}.skeleton-wave[data-v-32ecf05b]:after{content:"";background:linear-gradient(90deg, transparent 0%, var(--color-on-surface) 50%, transparent 100%);opacity:.06;animation:1.8s ease-in-out infinite skeleton-wave-move-32ecf05b;position:absolute;inset:0}.toast-row[data-v-e83a5c10]{grid-template-rows:1fr;padding-bottom:8px;display:grid}.toast-row>.toast-inner[data-v-e83a5c10]{min-height:0}.m3-toast-bot-enter-active[data-v-e83a5c10]{transition:grid-template-rows .22s cubic-bezier(.2,0,0,1),padding-bottom .22s cubic-bezier(.2,0,0,1);overflow:hidden}.m3-toast-bot-enter-active>.toast-inner[data-v-e83a5c10]{transition:opacity .18s,transform .22s cubic-bezier(.2,0,0,1)}.m3-toast-bot-enter-from[data-v-e83a5c10]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-bot-enter-from>.toast-inner[data-v-e83a5c10]{opacity:0;transform:translateY(20px)scale(.94)}.m3-toast-bot-leave-active[data-v-e83a5c10]{transition:grid-template-rows .3s cubic-bezier(.2,0,0,1),padding-bottom .3s cubic-bezier(.2,0,0,1);overflow:hidden}.m3-toast-bot-leave-active>.toast-inner[data-v-e83a5c10]{transition:opacity .18s,transform .18s}.m3-toast-bot-leave-to[data-v-e83a5c10]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-bot-leave-to>.toast-inner[data-v-e83a5c10]{opacity:0;transform:scale(.92)}.m3-toast-top-enter-active[data-v-e83a5c10]{transition:grid-template-rows .22s cubic-bezier(.2,0,0,1),padding-bottom .22s cubic-bezier(.2,0,0,1);overflow:hidden}.m3-toast-top-enter-active>.toast-inner[data-v-e83a5c10]{transition:opacity .18s,transform .22s cubic-bezier(.2,0,0,1)}.m3-toast-top-enter-from[data-v-e83a5c10]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-top-enter-from>.toast-inner[data-v-e83a5c10]{opacity:0;transform:translateY(-20px)scale(.94)}.m3-toast-top-leave-active[data-v-e83a5c10]{transition:grid-template-rows .3s cubic-bezier(.2,0,0,1),padding-bottom .3s cubic-bezier(.2,0,0,1);overflow:hidden}.m3-toast-top-leave-active>.toast-inner[data-v-e83a5c10]{transition:opacity .18s,transform .18s}.m3-toast-top-leave-to[data-v-e83a5c10]{grid-template-rows:0fr;padding-bottom:0}.m3-toast-top-leave-to>.toast-inner[data-v-e83a5c10]{opacity:0;transform:scale(.92)}@keyframes m3-toast-progress-e83a5c10{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.m3-spot-enter-active[data-v-51b103ff],.m3-spot-leave-active[data-v-51b103ff]{transition:opacity .15s}.m3-spot-enter-from[data-v-51b103ff],.m3-spot-leave-to[data-v-51b103ff]{opacity:0}.m3-spot-enter-active .spot-box[data-v-51b103ff],.m3-spot-leave-active .spot-box[data-v-51b103ff]{transition:transform .15s,opacity .15s}.m3-spot-enter-from .spot-box[data-v-51b103ff]{opacity:0;transform:scale(.96)translateY(-8px)}.m3-spot-leave-to .spot-box[data-v-51b103ff]{opacity:0;transform:scale(.98)}.m3-tour-highlight{box-shadow:0 0 0 4px var(--color-primary), 0 0 0 9999px #0006;border-radius:8px;position:relative;z-index:101!important}.m3-tour-enter-active,.m3-tour-leave-active{transition:opacity .2s}.m3-tour-enter-from,.m3-tour-leave-to{opacity:0}
-/*$vite$:1*/