@m3ui-vue/m3ui-vue 0.1.0

package/src/components/MSnackbar.vue

@@ -0,0 +1,244 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useToast } from "../composables/useToast";
+import MIcon from "./MIcon.vue";
+
+const { toasts, position, dismiss } = useToast();
+
+const isTop = computed(() => position.value.startsWith("top"));
+
+const containerClass = computed(() => {
+  const base = "pointer-events-none fixed z-[300] flex flex-col";
+  switch (position.value) {
+    case "top-left":
+      return `${base} top-4 left-4 items-start`;
+    case "top-center":
+      return `${base} top-4 left-1/2 -translate-x-1/2 items-center`;
+    case "top-right":
+      return `${base} top-4 right-4 items-end`;
+    case "bottom-left":
+      return `${base} bottom-4 left-4 items-start`;
+    case "bottom-right":
+      return `${base} bottom-4 right-4 items-end`;
+    default:
+      return `${base} bottom-4 left-1/2 -translate-x-1/2 items-center`;
+  }
+});
+
+type VariantStyle = {
+  container: string;
+  icon: string;
+  iconName: string;
+  action: string;
+  close: string;
+  progress: string;
+};
+
+const variantStyles: Record<string, VariantStyle> = {
+  info: {
+    // secondary-container tokens are adaptive light/dark out of the box
+    container:
+      "bg-secondary-container text-on-secondary-container ring-1 ring-inset ring-on-secondary-container/8",
+    icon: "text-on-secondary-container/70",
+    iconName: "info",
+    action: "text-on-secondary-container hover:bg-on-secondary-container/10",
+    close: "text-on-secondary-container/60 hover:bg-on-secondary-container/10",
+    progress: "bg-on-secondary-container/25",
+  },
+  success: {
+    container:
+      "bg-[#dcfce7] text-[#14532d] ring-1 ring-inset ring-[#14532d]/10 dark:bg-[#052e16] dark:text-[#bbf7d0] dark:ring-white/8",
+    icon: "text-[#16a34a] dark:text-[#4ade80]",
+    iconName: "check_circle",
+    action: "text-[#166534] hover:bg-[#14532d]/10 dark:text-[#86efac] dark:hover:bg-white/10",
+    close: "text-[#14532d]/50 hover:bg-[#14532d]/10 dark:text-[#bbf7d0]/50 dark:hover:bg-white/10",
+    progress: "bg-[#16a34a]/35 dark:bg-[#4ade80]/30",
+  },
+  warning: {
+    container:
+      "bg-[#fefce8] text-[#713f12] ring-1 ring-inset ring-[#713f12]/10 dark:bg-[#2d1a00] dark:text-[#fde68a] dark:ring-white/8",
+    icon: "text-[#d97706] dark:text-[#fcd34d]",
+    iconName: "warning",
+    action: "text-[#92400e] hover:bg-[#713f12]/10 dark:text-[#fcd34d] dark:hover:bg-white/10",
+    close: "text-[#713f12]/50 hover:bg-[#713f12]/10 dark:text-[#fde68a]/50 dark:hover:bg-white/10",
+    progress: "bg-[#d97706]/35 dark:bg-[#fcd34d]/30",
+  },
+  error: {
+    // error-container tokens are adaptive light/dark out of the box
+    container:
+      "bg-error-container text-on-error-container ring-1 ring-inset ring-on-error-container/8",
+    icon: "text-error dark:text-[#fca5a5]",
+    iconName: "error",
+    action: "text-on-error-container hover:bg-on-error-container/10",
+    close: "text-on-error-container/60 hover:bg-on-error-container/10",
+    progress: "bg-on-error-container/25",
+  },
+};
+
+const getVariantStyle = (variant: string): VariantStyle =>
+  variantStyles[variant] ?? variantStyles.info!;
+</script>
+
+<template>
+  <div :class="containerClass">
+    <TransitionGroup :name="isTop ? 'm3-toast-top' : 'm3-toast-bot'">
+      <div v-for="t in toasts" :key="t.id" class="toast-row w-full min-w-64 max-w-xs">
+        <div
+          class="toast-inner pointer-events-auto relative flex items-center gap-3 overflow-hidden rounded-2xl px-4 py-4 shadow-elevation-2"
+          :class="getVariantStyle(t.variant).container"
+        >
+          <MIcon
+            :name="getVariantStyle(t.variant).iconName"
+            :size="20"
+            class="shrink-0"
+            :class="getVariantStyle(t.variant).icon"
+          />
+
+          <p class="flex-1 text-body-medium leading-snug">{{ t.message }}</p>
+
+          <div class="flex shrink-0 items-center gap-0.5">
+            <button
+              v-if="t.action"
+              type="button"
+              class="cursor-pointer rounded px-2 py-1 text-label-medium font-semibold transition-colors"
+              :class="getVariantStyle(t.variant).action"
+              @click="
+                () => {
+                  t.action!.onClick();
+                  dismiss(t.id);
+                }
+              "
+            >
+              {{ t.action.label }}
+            </button>
+
+            <button
+              type="button"
+              class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full transition-colors"
+              :class="getVariantStyle(t.variant).close"
+              aria-label="Cerrar"
+              @click="dismiss(t.id)"
+            >
+              <MIcon name="close" :size="18" />
+            </button>
+          </div>
+
+          <!-- Countdown progress bar -->
+          <div
+            v-if="t.duration > 0"
+            class="absolute right-0 bottom-0 left-0 h-0.5 origin-left"
+            :class="getVariantStyle(t.variant).progress"
+            :style="{ animation: `m3-toast-progress ${t.duration}ms linear forwards` }"
+          />
+        </div>
+      </div>
+    </TransitionGroup>
+  </div>
+</template>
+
+<style scoped>
+/*
+  .toast-row is a grid container — animating grid-template-rows: 1fr → 0fr
+  collapses height smoothly without position:absolute, so sibling toasts
+  shift up gracefully instead of jumping.
+*/
+.toast-row {
+  display: grid;
+  grid-template-rows: 1fr;
+  padding-bottom: 8px;
+}
+.toast-row > .toast-inner {
+  min-height: 0; /* required for 0fr collapse */
+}
+
+/* ─── Bottom toasts ─────────────────────────────────────────────── */
+.m3-toast-bot-enter-active {
+  transition:
+    grid-template-rows 220ms cubic-bezier(0.2, 0, 0, 1),
+    padding-bottom 220ms cubic-bezier(0.2, 0, 0, 1);
+  overflow: hidden;
+}
+.m3-toast-bot-enter-active > .toast-inner {
+  transition:
+    opacity 180ms ease,
+    transform 220ms cubic-bezier(0.2, 0, 0, 1);
+}
+.m3-toast-bot-enter-from {
+  grid-template-rows: 0fr;
+  padding-bottom: 0;
+}
+.m3-toast-bot-enter-from > .toast-inner {
+  opacity: 0;
+  transform: translateY(20px) scale(0.94);
+}
+
+.m3-toast-bot-leave-active {
+  transition:
+    grid-template-rows 300ms cubic-bezier(0.2, 0, 0, 1),
+    padding-bottom 300ms cubic-bezier(0.2, 0, 0, 1);
+  overflow: hidden;
+}
+.m3-toast-bot-leave-active > .toast-inner {
+  transition:
+    opacity 180ms ease,
+    transform 180ms ease;
+}
+.m3-toast-bot-leave-to {
+  grid-template-rows: 0fr;
+  padding-bottom: 0;
+}
+.m3-toast-bot-leave-to > .toast-inner {
+  opacity: 0;
+  transform: scale(0.92);
+}
+
+/* ─── Top toasts ────────────────────────────────────────────────── */
+.m3-toast-top-enter-active {
+  transition:
+    grid-template-rows 220ms cubic-bezier(0.2, 0, 0, 1),
+    padding-bottom 220ms cubic-bezier(0.2, 0, 0, 1);
+  overflow: hidden;
+}
+.m3-toast-top-enter-active > .toast-inner {
+  transition:
+    opacity 180ms ease,
+    transform 220ms cubic-bezier(0.2, 0, 0, 1);
+}
+.m3-toast-top-enter-from {
+  grid-template-rows: 0fr;
+  padding-bottom: 0;
+}
+.m3-toast-top-enter-from > .toast-inner {
+  opacity: 0;
+  transform: translateY(-20px) scale(0.94);
+}
+
+.m3-toast-top-leave-active {
+  transition:
+    grid-template-rows 300ms cubic-bezier(0.2, 0, 0, 1),
+    padding-bottom 300ms cubic-bezier(0.2, 0, 0, 1);
+  overflow: hidden;
+}
+.m3-toast-top-leave-active > .toast-inner {
+  transition:
+    opacity 180ms ease,
+    transform 180ms ease;
+}
+.m3-toast-top-leave-to {
+  grid-template-rows: 0fr;
+  padding-bottom: 0;
+}
+.m3-toast-top-leave-to > .toast-inner {
+  opacity: 0;
+  transform: scale(0.92);
+}
+
+@keyframes m3-toast-progress {
+  from {
+    transform: scaleX(1);
+  }
+  to {
+    transform: scaleX(0);
+  }
+}
+</style>

package/src/components/MSpinner.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    size?: number;
+    wavy?: boolean;
+  }>(),
+  { size: 20, wavy: false },
+);
+
+const STROKE = 3;
+const BUMPS = 9;
+
+// amp fraction of r = 0.25 → max radius = r * 1.25
+// Constrain so that max_r + STROKE/2 ≤ size/2 - 1 (1px margin from edge)
+const r = computed(() => (props.size / 2 - 1 - STROKE / 2) / 1.25);
+const cx = computed(() => props.size / 2);
+
+// Build the full bumpy-circle path and its total length.
+const wavyData = computed(() => {
+  const CX = cx.value;
+  const R = r.value;
+  const amp = R * 0.08;
+  const segs = BUMPS * 24; // smooth curve
+
+  const pts: string[] = [];
+  let len = 0;
+  let px = 0,
+    py = 0;
+
+  for (let i = 0; i <= segs; i++) {
+    const theta = (2 * Math.PI * i) / segs - Math.PI / 2;
+    const rr = R + amp * Math.sin(BUMPS * theta);
+    const x = CX + rr * Math.cos(theta);
+    const y = CX + rr * Math.sin(theta);
+    if (i > 0) len += Math.sqrt((x - px) ** 2 + (y - py) ** 2);
+    pts.push(`${i === 0 ? "M" : "L"}${x.toFixed(2)},${y.toFixed(2)}`);
+    px = x;
+    py = y;
+  }
+
+  // Visible arc ~58% of the circumference, gap fills the rest.
+  const visible = len * 0.58;
+  const gap = len - visible;
+  const dash = `${visible.toFixed(1)} ${gap.toFixed(1)}`;
+
+  // The wave "travels" by shifting dashoffset over exactly one full length,
+  // so the crests slide around the path independently of the rotation.
+  return { path: pts.join("") + "Z", dash, len: len.toFixed(1) };
+});
+</script>
+
+<template>
+  <span
+    class="inline-flex shrink-0 items-center justify-center"
+    :style="{ width: `${size}px`, height: `${size}px` }"
+    role="status"
+    aria-label="Cargando"
+  >
+    <!-- Standard circular spinner -->
+    <span
+      v-if="!wavy"
+      class="block h-full w-full animate-spin rounded-full border-2 border-current border-t-transparent"
+    />
+
+    <!-- Wavy spinner (M3 Expressive): the whole shape rotates AND the wave
+         travels along the stroke via dashoffset, giving the snake-like flow. -->
+    <svg
+      v-else
+      :width="size"
+      :height="size"
+      :viewBox="`0 0 ${size} ${size}`"
+      fill="none"
+      class="animate-[m3-wavy-spin_2.8s_linear_infinite]"
+      :style="`transform-origin: ${cx}px ${cx}px`"
+    >
+      <path
+        :d="wavyData.path"
+        stroke="currentColor"
+        :stroke-width="STROKE"
+        stroke-linecap="round"
+        :stroke-dasharray="wavyData.dash"
+        class="animate-[m3-wavy-travel_2s_linear_infinite]"
+        :style="{ '--m3-wave-len': wavyData.len }"
+      />
+    </svg>
+  </span>
+</template>
+
+<style>
+/* The SVG element rotates the whole bumpy circle. */
+@keyframes m3-wavy-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* The stroke's dashoffset slides by one full path length, so the crests
+   appear to crawl along the circle — the "snake" motion of M3 Expressive.
+   Negative direction makes the wave travel forward relative to the spin. */
+@keyframes m3-wavy-travel {
+  from {
+    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: m3-wavy-spin 2.8s linear infinite;
+  }
+  .animate-\[m3-wavy-travel_2s_linear_infinite\] {
+    animation: none !important;
+  }
+}
+</style>

package/src/components/MSplitter.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { ref, computed, onBeforeUnmount } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    direction?: 'horizontal' | 'vertical'
+    initialSplit?: number
+    min?: number
+    max?: number
+  }>(),
+  { direction: 'horizontal', initialSplit: 50, min: 10, max: 90 },
+)
+
+const split = ref(props.initialSplit)
+const dragging = ref(false)
+const containerRef = ref<HTMLElement | null>(null)
+
+const isHorizontal = computed(() => props.direction === 'horizontal')
+
+const panelAStyle = computed(() =>
+  isHorizontal.value
+    ? { width: `${split.value}%` }
+    : { height: `${split.value}%` },
+)
+
+const panelBStyle = computed(() =>
+  isHorizontal.value
+    ? { width: `${100 - split.value}%` }
+    : { height: `${100 - split.value}%` },
+)
+
+function onPointerDown(e: PointerEvent) {
+  dragging.value = true
+  ;(e.target as HTMLElement).setPointerCapture(e.pointerId)
+}
+
+function onPointerMove(e: PointerEvent) {
+  if (!dragging.value || !containerRef.value) return
+
+  const rect = containerRef.value.getBoundingClientRect()
+  let pct: number
+
+  if (isHorizontal.value) {
+    pct = ((e.clientX - rect.left) / rect.width) * 100
+  } else {
+    pct = ((e.clientY - rect.top) / rect.height) * 100
+  }
+
+  split.value = Math.min(props.max, Math.max(props.min, pct))
+}
+
+function onPointerUp() {
+  dragging.value = false
+}
+
+onBeforeUnmount(() => {
+  dragging.value = false
+})
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    class="flex overflow-hidden"
+    :class="[
+      isHorizontal ? 'flex-row' : 'flex-col',
+      dragging && 'select-none',
+    ]"
+    style="height: 100%"
+  >
+    <div class="overflow-auto" :style="panelAStyle">
+      <slot name="first" />
+    </div>
+
+    <div
+      class="z-10 flex shrink-0 items-center justify-center transition-colors"
+      :class="[
+        isHorizontal
+          ? 'w-2 cursor-col-resize flex-col'
+          : 'h-2 cursor-row-resize flex-row',
+        dragging ? 'bg-primary/20' : 'bg-outline-variant/40 hover:bg-primary/12',
+      ]"
+      @pointerdown="onPointerDown"
+      @pointermove="onPointerMove"
+      @pointerup="onPointerUp"
+    >
+      <div
+        class="rounded-full bg-outline"
+        :class="isHorizontal ? 'h-6 w-1' : 'h-1 w-6'"
+      />
+    </div>
+
+    <div class="overflow-auto" :style="panelBStyle">
+      <slot name="second" />
+    </div>
+  </div>
+</template>

package/src/components/MSpotlightSearch.vue

@@ -0,0 +1,244 @@
+<script setup lang="ts">
+import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import MIcon from './MIcon.vue'
+import MSpinner from './MSpinner.vue'
+
+export interface SpotlightResult {
+  id: string | number
+  title: string
+  description?: string
+  icon?: string
+  category?: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    results?: SpotlightResult[]
+    placeholder?: string
+    loading?: boolean
+    noResultsText?: string
+    hotkey?: string
+    debounce?: number
+  }>(),
+  {
+    results: () => [],
+    placeholder: 'Buscar...',
+    loading: false,
+    noResultsText: 'No se encontraron resultados',
+    hotkey: '/',
+    debounce: 0,
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [boolean]
+  search: [string]
+  select: [SpotlightResult]
+}>()
+
+const query = ref('')
+const activeIndex = ref(0)
+const inputRef = ref<HTMLInputElement | null>(null)
+let debounceTimer: ReturnType<typeof setTimeout> | null = null
+
+const hasQuery = computed(() => query.value.trim().length > 0)
+
+const grouped = computed(() => {
+  const map = new Map<string, SpotlightResult[]>()
+  for (const r of props.results) {
+    const cat = r.category ?? ''
+    if (!map.has(cat)) map.set(cat, [])
+    map.get(cat)!.push(r)
+  }
+  return map
+})
+
+function close() {
+  query.value = ''
+  activeIndex.value = 0
+  emit('update:modelValue', false)
+}
+
+function selectResult(result: SpotlightResult) {
+  emit('select', result)
+  close()
+}
+
+function emitSearch() {
+  if (debounceTimer) clearTimeout(debounceTimer)
+  if (props.debounce > 0) {
+    debounceTimer = setTimeout(() => emit('search', query.value), props.debounce)
+  } else {
+    emit('search', query.value)
+  }
+}
+
+function onKeydown(e: KeyboardEvent) {
+  const len = props.results.length
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    activeIndex.value = len ? (activeIndex.value + 1) % len : 0
+    scrollToActive()
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    activeIndex.value = len ? (activeIndex.value - 1 + len) % len : 0
+    scrollToActive()
+  } else if (e.key === 'Enter' && len) {
+    e.preventDefault()
+    selectResult(props.results[activeIndex.value]!)
+  } else if (e.key === 'Escape') {
+    close()
+  }
+}
+
+function scrollToActive() {
+  nextTick(() => {
+    const el = document.querySelector('[data-spot-active="true"]')
+    el?.scrollIntoView({ block: 'nearest' })
+  })
+}
+
+function onGlobalKeydown(e: KeyboardEvent) {
+  const tag = (e.target as HTMLElement).tagName
+  if (tag === 'INPUT' || tag === 'TEXTAREA' || (e.target as HTMLElement).isContentEditable) return
+  if (e.key === props.hotkey && !e.metaKey && !e.ctrlKey && !e.altKey) {
+    e.preventDefault()
+    emit('update:modelValue', true)
+  }
+}
+
+watch(
+  () => props.modelValue,
+  (open) => {
+    if (open) {
+      document.body.style.overflow = 'hidden'
+      nextTick(() => inputRef.value?.focus())
+    } else {
+      document.body.style.overflow = ''
+    }
+  },
+)
+
+watch(query, () => {
+  activeIndex.value = 0
+  emitSearch()
+})
+
+onMounted(() => document.addEventListener('keydown', onGlobalKeydown))
+onBeforeUnmount(() => {
+  document.removeEventListener('keydown', onGlobalKeydown)
+  if (debounceTimer) clearTimeout(debounceTimer)
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="m3-spot">
+      <div
+        v-if="modelValue"
+        class="fixed inset-0 z-50 flex items-start justify-center bg-black/50 pt-[12vh]"
+        @click.self="close"
+      >
+        <div class="spot-box flex w-full max-w-xl flex-col overflow-hidden rounded-2xl bg-surface-container-high shadow-elevation-3">
+          <!-- Search bar -->
+          <div class="flex items-center gap-3 px-5 py-1">
+            <MIcon name="search" :size="24" class="shrink-0 text-primary" />
+            <input
+              ref="inputRef"
+              v-model="query"
+              type="text"
+              :placeholder="placeholder"
+              class="h-14 flex-1 bg-transparent text-title-medium text-on-surface outline-none placeholder:text-on-surface-variant/50"
+              @keydown="onKeydown"
+            />
+            <MSpinner v-if="loading" :size="20" class="shrink-0 text-primary" />
+            <button
+              v-else-if="hasQuery"
+              type="button"
+              class="flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-full text-on-surface-variant hover:bg-on-surface/8"
+              @click="query = ''"
+            >
+              <MIcon name="close" :size="18" />
+            </button>
+          </div>
+
+          <!-- Results -->
+          <div v-if="hasQuery" class="max-h-96 overflow-y-auto border-t border-outline-variant">
+            <template v-if="results.length">
+              <template v-for="[category, items] in grouped" :key="category">
+                <p v-if="category" class="px-5 pt-4 pb-1 text-label-small font-medium tracking-wide text-on-surface-variant uppercase">
+                  {{ category }}
+                </p>
+                <button
+                  v-for="item in items"
+                  :key="item.id"
+                  type="button"
+                  :data-spot-active="results.indexOf(item) === activeIndex || undefined"
+                  class="flex w-full cursor-pointer items-center gap-3 px-5 py-3 text-left transition-colors"
+                  :class="results.indexOf(item) === activeIndex ? 'bg-primary/12' : 'hover:bg-on-surface/4'"
+                  @click="selectResult(item)"
+                  @pointerenter="activeIndex = results.indexOf(item)"
+                >
+                  <div
+                    v-if="item.icon"
+                    class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-primary-container"
+                  >
+                    <MIcon :name="item.icon" :size="20" class="text-on-primary-container" />
+                  </div>
+                  <div class="min-w-0 flex-1">
+                    <p class="truncate text-body-medium text-on-surface">{{ item.title }}</p>
+                    <p v-if="item.description" class="truncate text-body-small text-on-surface-variant">
+                      {{ item.description }}
+                    </p>
+                  </div>
+                  <MIcon name="arrow_forward" :size="16" class="shrink-0 text-on-surface-variant/40" />
+                </button>
+              </template>
+            </template>
+            <div v-else-if="!loading" class="flex flex-col items-center gap-2 py-10">
+              <MIcon name="search_off" :size="40" class="text-on-surface-variant/40" />
+              <p class="text-body-medium text-on-surface-variant">{{ noResultsText }}</p>
+            </div>
+          </div>
+
+          <!-- Hints -->
+          <div class="flex items-center gap-4 border-t border-outline-variant px-5 py-2">
+            <span class="flex items-center gap-1 text-label-small text-on-surface-variant">
+              <kbd class="rounded bg-surface-container px-1 py-0.5">↑↓</kbd> navegar
+            </span>
+            <span class="flex items-center gap-1 text-label-small text-on-surface-variant">
+              <kbd class="rounded bg-surface-container px-1 py-0.5">↵</kbd> abrir
+            </span>
+            <span class="flex items-center gap-1 text-label-small text-on-surface-variant">
+              <kbd class="rounded bg-surface-container px-1 py-0.5">esc</kbd> cerrar
+            </span>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.m3-spot-enter-active,
+.m3-spot-leave-active {
+  transition: opacity 0.15s ease;
+}
+.m3-spot-enter-from,
+.m3-spot-leave-to {
+  opacity: 0;
+}
+.m3-spot-enter-active .spot-box,
+.m3-spot-leave-active .spot-box {
+  transition: transform 0.15s ease, opacity 0.15s ease;
+}
+.m3-spot-enter-from .spot-box {
+  transform: scale(0.96) translateY(-8px);
+  opacity: 0;
+}
+.m3-spot-leave-to .spot-box {
+  transform: scale(0.98);
+  opacity: 0;
+}
+</style>