@m3ui-vue/m3ui-vue 0.1.0 → 0.1.2

package/src/components/MMarkdown.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import MarkdownIt from 'markdown-it'
+import { computed, ref, onMounted } from 'vue'
 
 const props = withDefaults(
   defineProps<{
@@ -11,23 +10,31 @@ const props = withDefaults(
   { breaks: true, linkify: true },
 )
 
-const md = new MarkdownIt({
-  html: false,
-  breaks: props.breaks,
-  linkify: props.linkify,
-  typographer: true,
-})
-
-md.renderer.rules.link_open = (tokens, idx, options, _env, self) => {
-  const token = tokens[idx]
-  if (token) {
-    token.attrSet('target', '_blank')
-    token.attrSet('rel', 'noopener noreferrer')
+const md = ref<any>(null)
+
+onMounted(async () => {
+  const { default: MarkdownIt } = await import('markdown-it')
+
+  const instance = new MarkdownIt({
+    html: false,
+    breaks: props.breaks,
+    linkify: props.linkify,
+    typographer: true,
+  })
+
+  instance.renderer.rules.link_open = (tokens: any, idx: number, options: any, _env: any, self: any) => {
+    const token = tokens[idx]
+    if (token) {
+      token.attrSet('target', '_blank')
+      token.attrSet('rel', 'noopener noreferrer')
+    }
+    return self.renderToken(tokens, idx, options)
   }
-  return self.renderToken(tokens, idx, options)
-}
 
-const rendered = computed(() => md.render(props.source))
+  md.value = instance
+})
+
+const rendered = computed(() => md.value ? md.value.render(props.source) : '')
 </script>
 
 <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/MRichTextEditor.vue

@@ -1,15 +1,5 @@
 <script setup lang="ts">
-import { watch } from 'vue'
-import { useEditor, EditorContent } from '@tiptap/vue-3'
-import StarterKit from '@tiptap/starter-kit'
-import Underline from '@tiptap/extension-underline'
-import TextAlign from '@tiptap/extension-text-align'
-import Link from '@tiptap/extension-link'
-import Image from '@tiptap/extension-image'
-import Highlight from '@tiptap/extension-highlight'
-import Placeholder from '@tiptap/extension-placeholder'
-import { TextStyle } from '@tiptap/extension-text-style'
-import Color from '@tiptap/extension-color'
+import { ref, watch, onMounted, onBeforeUnmount, shallowRef } from 'vue'
 import MIcon from './MIcon.vue'
 
 const props = withDefaults(
@@ -24,28 +14,9 @@ const props = withDefaults(
 
 const emit = defineEmits<{ 'update:modelValue': [string] }>()
 
-const editor = useEditor({
-  content: props.modelValue,
-  editable: !props.disabled,
-  extensions: [
-    StarterKit,
-    Underline,
-    TextAlign.configure({ types: ['heading', 'paragraph'] }),
-    Link.configure({ openOnClick: false }),
-    Image,
-    Highlight.configure({ multicolor: true }),
-    Placeholder.configure({ placeholder: props.placeholder }),
-    TextStyle,
-    Color,
-  ],
-  onUpdate: ({ editor: e }) => emit('update:modelValue', e.getHTML()),
-})
-
-watch(() => props.modelValue, (val) => {
-  if (editor.value && editor.value.getHTML() !== val) editor.value.commands.setContent(val)
-})
-
-watch(() => props.disabled, (v) => editor.value?.setEditable(!v))
+const ready = ref(false)
+const editorRef = shallowRef<any>(null)
+const editorContainer = ref<HTMLElement | null>(null)
 
 interface ToolBtn {
   icon: string
@@ -54,43 +25,106 @@ interface ToolBtn {
   active?: () => boolean
 }
 
-const toolGroups: ToolBtn[][] = [
-  [
-    { icon: 'format_bold', label: 'Negrita', action: () => editor.value?.chain().focus().toggleBold().run(), active: () => !!editor.value?.isActive('bold') },
-    { icon: 'format_italic', label: 'Cursiva', action: () => editor.value?.chain().focus().toggleItalic().run(), active: () => !!editor.value?.isActive('italic') },
-    { icon: 'format_underlined', label: 'Subrayado', action: () => editor.value?.chain().focus().toggleUnderline().run(), active: () => !!editor.value?.isActive('underline') },
-    { icon: 'format_strikethrough', label: 'Tachado', action: () => editor.value?.chain().focus().toggleStrike().run(), active: () => !!editor.value?.isActive('strike') },
-    { icon: 'ink_highlighter', label: 'Resaltar', action: () => editor.value?.chain().focus().toggleHighlight().run(), active: () => !!editor.value?.isActive('highlight') },
-  ],
-  [
-    { icon: 'format_list_bulleted', label: 'Lista', action: () => editor.value?.chain().focus().toggleBulletList().run(), active: () => !!editor.value?.isActive('bulletList') },
-    { icon: 'format_list_numbered', label: 'Lista numerada', action: () => editor.value?.chain().focus().toggleOrderedList().run(), active: () => !!editor.value?.isActive('orderedList') },
-    { icon: 'format_quote', label: 'Cita', action: () => editor.value?.chain().focus().toggleBlockquote().run(), active: () => !!editor.value?.isActive('blockquote') },
-    { icon: 'code', label: 'Código', action: () => editor.value?.chain().focus().toggleCode().run(), active: () => !!editor.value?.isActive('code') },
-  ],
-  [
-    { icon: 'format_align_left', label: 'Izquierda', action: () => editor.value?.chain().focus().setTextAlign('left').run(), active: () => !!editor.value?.isActive({ textAlign: 'left' }) },
-    { icon: 'format_align_center', label: 'Centro', action: () => editor.value?.chain().focus().setTextAlign('center').run(), active: () => !!editor.value?.isActive({ textAlign: 'center' }) },
-    { icon: 'format_align_right', label: 'Derecha', action: () => editor.value?.chain().focus().setTextAlign('right').run(), active: () => !!editor.value?.isActive({ textAlign: 'right' }) },
-  ],
-  [
-    { icon: 'undo', label: 'Deshacer', action: () => editor.value?.chain().focus().undo().run() },
-    { icon: 'redo', label: 'Rehacer', action: () => editor.value?.chain().focus().redo().run() },
-  ],
-]
+const toolGroups = ref<ToolBtn[][]>([])
+
+onMounted(async () => {
+  const [
+    { useEditor, EditorContent },
+    { default: StarterKit },
+    { default: Underline },
+    { default: TextAlign },
+    { default: Link },
+    { default: Image },
+    { default: Highlight },
+    { default: Placeholder },
+    { TextStyle },
+    { default: Color },
+  ] = await Promise.all([
+    import('@tiptap/vue-3'),
+    import('@tiptap/starter-kit'),
+    import('@tiptap/extension-underline'),
+    import('@tiptap/extension-text-align'),
+    import('@tiptap/extension-link'),
+    import('@tiptap/extension-image'),
+    import('@tiptap/extension-highlight'),
+    import('@tiptap/extension-placeholder'),
+    import('@tiptap/extension-text-style'),
+    import('@tiptap/extension-color'),
+  ])
+
+  const editor = useEditor({
+    content: props.modelValue,
+    editable: !props.disabled,
+    extensions: [
+      StarterKit,
+      Underline,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+      Link.configure({ openOnClick: false }),
+      Image,
+      Highlight.configure({ multicolor: true }),
+      Placeholder.configure({ placeholder: props.placeholder }),
+      TextStyle,
+      Color,
+    ],
+    onUpdate: ({ editor: e }) => emit('update:modelValue', e.getHTML()),
+  })
+
+  editorRef.value = editor
+
+  toolGroups.value = [
+    [
+      { icon: 'format_bold', label: 'Negrita', action: () => editor.value?.chain().focus().toggleBold().run(), active: () => !!editor.value?.isActive('bold') },
+      { icon: 'format_italic', label: 'Cursiva', action: () => editor.value?.chain().focus().toggleItalic().run(), active: () => !!editor.value?.isActive('italic') },
+      { icon: 'format_underlined', label: 'Subrayado', action: () => editor.value?.chain().focus().toggleUnderline().run(), active: () => !!editor.value?.isActive('underline') },
+      { icon: 'format_strikethrough', label: 'Tachado', action: () => editor.value?.chain().focus().toggleStrike().run(), active: () => !!editor.value?.isActive('strike') },
+      { icon: 'ink_highlighter', label: 'Resaltar', action: () => editor.value?.chain().focus().toggleHighlight().run(), active: () => !!editor.value?.isActive('highlight') },
+    ],
+    [
+      { icon: 'format_list_bulleted', label: 'Lista', action: () => editor.value?.chain().focus().toggleBulletList().run(), active: () => !!editor.value?.isActive('bulletList') },
+      { icon: 'format_list_numbered', label: 'Lista numerada', action: () => editor.value?.chain().focus().toggleOrderedList().run(), active: () => !!editor.value?.isActive('orderedList') },
+      { icon: 'format_quote', label: 'Cita', action: () => editor.value?.chain().focus().toggleBlockquote().run(), active: () => !!editor.value?.isActive('blockquote') },
+      { icon: 'code', label: 'Código', action: () => editor.value?.chain().focus().toggleCode().run(), active: () => !!editor.value?.isActive('code') },
+    ],
+    [
+      { icon: 'format_align_left', label: 'Izquierda', action: () => editor.value?.chain().focus().setTextAlign('left').run(), active: () => !!editor.value?.isActive({ textAlign: 'left' }) },
+      { icon: 'format_align_center', label: 'Centro', action: () => editor.value?.chain().focus().setTextAlign('center').run(), active: () => !!editor.value?.isActive({ textAlign: 'center' }) },
+      { icon: 'format_align_right', label: 'Derecha', action: () => editor.value?.chain().focus().setTextAlign('right').run(), active: () => !!editor.value?.isActive({ textAlign: 'right' }) },
+    ],
+    [
+      { icon: 'undo', label: 'Deshacer', action: () => editor.value?.chain().focus().undo().run() },
+      { icon: 'redo', label: 'Rehacer', action: () => editor.value?.chain().focus().redo().run() },
+    ],
+  ]
+
+  // Mount EditorContent manually since we can't use the component from dynamic import in template
+  if (editorContainer.value) {
+    const app = await import('vue')
+    const editorApp = app.createApp(EditorContent, { editor: editor.value })
+    editorApp.mount(editorContainer.value)
+    onBeforeUnmount(() => editorApp.unmount())
+  }
+
+  watch(() => props.modelValue, (val) => {
+    if (editor.value && editor.value.getHTML() !== val) editor.value.commands.setContent(val)
+  })
+
+  watch(() => props.disabled, (v) => editor.value?.setEditable(!v))
+
+  ready.value = true
+})
 
 function insertLink() {
   const url = window.prompt('URL del enlace:')
-  if (url) editor.value?.chain().focus().setLink({ href: url }).run()
+  if (url) editorRef.value?.value?.chain().focus().setLink({ href: url }).run()
 }
 
 function insertImage() {
   const url = window.prompt('URL de la imagen:')
-  if (url) editor.value?.chain().focus().setImage({ src: url }).run()
+  if (url) editorRef.value?.value?.chain().focus().setImage({ src: url }).run()
 }
 
 function setHeading(level: 1 | 2 | 3) {
-  editor.value?.chain().focus().toggleHeading({ level }).run()
+  editorRef.value?.value?.chain().focus().toggleHeading({ level }).run()
 }
 </script>
 
@@ -100,19 +134,19 @@ function setHeading(level: 1 | 2 | 3) {
     :class="disabled ? 'border-outline-variant/50 opacity-60' : 'border-outline-variant focus-within:border-primary'"
   >
     <!-- Toolbar -->
-    <div class="flex flex-wrap items-center gap-0.5 border-b border-outline-variant bg-surface-container px-2 py-1.5">
+    <div v-if="ready" class="flex flex-wrap items-center gap-0.5 border-b border-outline-variant bg-surface-container px-2 py-1.5">
       <!-- Heading select -->
       <select
         class="h-8 cursor-pointer rounded bg-transparent px-2 text-label-large text-on-surface-variant outline-none hover:bg-on-surface/8"
         :value="
-          editor?.isActive('heading', { level: 1 }) ? '1'
-          : editor?.isActive('heading', { level: 2 }) ? '2'
-          : editor?.isActive('heading', { level: 3 }) ? '3'
+          editorRef?.value?.isActive('heading', { level: 1 }) ? '1'
+          : editorRef?.value?.isActive('heading', { level: 2 }) ? '2'
+          : editorRef?.value?.isActive('heading', { level: 3 }) ? '3'
           : '0'
         "
         @change="(e: Event) => {
           const v = (e.target as HTMLSelectElement).value
-          if (v === '0') editor?.chain().focus().setParagraph().run()
+          if (v === '0') editorRef?.value?.chain().focus().setParagraph().run()
           else setHeading(Number(v) as 1 | 2 | 3)
         }"
       >
@@ -160,8 +194,8 @@ function setHeading(level: 1 | 2 | 3) {
     </div>
 
     <!-- Editor content -->
-    <EditorContent
-      :editor="editor"
+    <div
+      ref="editorContainer"
       class="rte-content bg-surface px-4 py-3 text-body-large text-on-surface"
       :style="{ minHeight: minHeight }"
     />

package/src/components/MTerminal.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
-import { Terminal } from '@xterm/xterm'
-import { FitAddon } from '@xterm/addon-fit'
 import MIcon from './MIcon.vue'
 
 const props = withDefaults(
@@ -25,8 +23,8 @@ const emit = defineEmits<{
 }>()
 
 const containerRef = ref<HTMLElement | null>(null)
-let terminal: Terminal | null = null
-let fitAddon: FitAddon | null = null
+let terminal: any = null
+let fitAddon: any = null
 let resizeObserver: ResizeObserver | null = null
 let lineBuffer = ''
 
@@ -44,11 +42,16 @@ function getThemeColors() {
 onMounted(async () => {
   if (!containerRef.value) return
 
+  const [xtermMod, fitMod] = await Promise.all([
+    import('@xterm/xterm'),
+    import('@xterm/addon-fit'),
+  ])
+
   try { await import('@xterm/xterm/css/xterm.css') } catch { /* consumer will provide styles */ }
 
   const colors = getThemeColors()
 
-  terminal = new Terminal({
+  terminal = new xtermMod.Terminal({
     fontFamily: "'JetBrains Mono', 'Fira Code', 'Consolas', monospace",
     fontSize: 14,
     lineHeight: 1.4,
@@ -65,7 +68,7 @@ onMounted(async () => {
     convertEol: true,
   })
 
-  fitAddon = new FitAddon()
+  fitAddon = new fitMod.FitAddon()
   terminal.loadAddon(fitAddon)
   terminal.open(containerRef.value)
 
@@ -76,7 +79,7 @@ onMounted(async () => {
   }
 
   if (!props.readonly) {
-    terminal.onData((data) => {
+    terminal.onData((data: string) => {
       emit('input', data)
 
       if (data === '\r') {
@@ -143,4 +146,3 @@ defineExpose({
     />
   </div>
 </template>
-

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-13fd6808] .cm-editor{height:100%;min-height:inherit;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:.875rem}.code-editor-container[data-v-13fd6808] .cm-editor.cm-focused{outline:none}.code-editor-container[data-v-13fd6808] .cm-scroller{min-height:inherit}.code-editor-container[data-v-13fd6808] .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-13fd6808] .cm-activeLineGutter{background:var(--color-surface-container-high)}.code-editor-container[data-v-13fd6808] .cm-activeLine{background:var(--color-surface-container-lowest)}.code-editor-container[data-v-13fd6808] .cm-selectionBackground{background:var(--color-primary-container)!important}.code-editor-container[data-v-13fd6808] .cm-cursor{border-left-color:var(--color-primary)}.code-editor-container[data-v-13fd6808] .cm-matchingBracket{background:var(--color-tertiary-container);color:var(--color-on-tertiary-container)}.code-editor-container[data-v-13fd6808] .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-34ce7e42] 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-34ce7e42] 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-34ce7e42] 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-34ce7e42] 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-34ce7e42] p{margin:.5em 0}.m3-markdown[data-v-34ce7e42] a{color:var(--color-primary);text-underline-offset:2px;text-decoration:underline}.m3-markdown[data-v-34ce7e42] a:hover{opacity:.8}.m3-markdown[data-v-34ce7e42] strong{color:var(--color-on-surface);font-weight:600}.m3-markdown[data-v-34ce7e42] em{font-style:italic}.m3-markdown[data-v-34ce7e42] ul,.m3-markdown[data-v-34ce7e42] ol{margin:.5em 0;padding-left:1.5em}.m3-markdown[data-v-34ce7e42] li{margin:.25em 0}.m3-markdown[data-v-34ce7e42] li::marker{color:var(--color-on-surface-variant)}.m3-markdown[data-v-34ce7e42] 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-34ce7e42] 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-34ce7e42] 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-34ce7e42] pre code{color:var(--color-on-surface);background:0 0;padding:0}.m3-markdown[data-v-34ce7e42] hr{border:none;border-top:1px solid var(--color-outline-variant);margin:1.5em 0}.m3-markdown[data-v-34ce7e42] table{border-collapse:collapse;width:100%;margin:.75em 0}.m3-markdown[data-v-34ce7e42] 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-34ce7e42] td{border-bottom:1px solid var(--color-outline-variant);padding:.5em .75em}.m3-markdown[data-v-34ce7e42] 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-bff72fc5] .tiptap{min-height:inherit;outline:none}.rte-content[data-v-bff72fc5] .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-bff72fc5] 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-bff72fc5] 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-bff72fc5] 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-bff72fc5] p{margin:.5em 0}.rte-content[data-v-bff72fc5] ul,.rte-content[data-v-bff72fc5] ol{margin:.5em 0;padding-left:1.5em}.rte-content[data-v-bff72fc5] blockquote{border-left:3px solid var(--color-primary);color:var(--color-on-surface-variant);margin:.5em 0;padding-left:1em}.rte-content[data-v-bff72fc5] code{background:var(--color-surface-container-highest);border-radius:4px;padding:.15em .4em;font-size:.875em}.rte-content[data-v-bff72fc5] pre{background:var(--color-surface-container-highest);border-radius:8px;margin:.5em 0;padding:1em;overflow-x:auto}.rte-content[data-v-bff72fc5] pre code{background:0 0;padding:0}.rte-content[data-v-bff72fc5] a{color:var(--color-primary);text-decoration:underline}.rte-content[data-v-bff72fc5] mark{background:var(--color-tertiary-container);color:var(--color-on-tertiary-container);border-radius:2px;padding:.1em .2em}.rte-content[data-v-bff72fc5] 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*/