@m3ui-vue/m3ui-vue 0.1.0

package/src/components/MTreeTable.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import MIcon from './MIcon.vue'
+
+export interface TreeTableColumn {
+  key: string
+  label: string
+  width?: string
+  align?: 'left' | 'center' | 'right'
+}
+
+export interface TreeTableRow {
+  [key: string]: any
+  children?: TreeTableRow[]
+}
+
+const props = withDefaults(defineProps<{
+  columns: TreeTableColumn[]
+  rows: TreeTableRow[]
+  rowKey?: string
+  defaultExpanded?: boolean
+  indent?: number
+  dense?: boolean
+}>(), {
+  rowKey: 'id',
+  defaultExpanded: false,
+  indent: 24,
+  dense: false,
+})
+
+const emit = defineEmits<{ rowClick: [TreeTableRow] }>()
+
+const expanded = ref<Set<any>>(new Set(
+  props.defaultExpanded ? collectIds(props.rows) : []
+))
+
+function collectIds(rows: TreeTableRow[]): any[] {
+  const ids: any[] = []
+  for (const r of rows) {
+    if (r.children?.length) {
+      ids.push(r[props.rowKey])
+      ids.push(...collectIds(r.children))
+    }
+  }
+  return ids
+}
+
+function toggleExpand(row: TreeTableRow) {
+  const id = row[props.rowKey]
+  const next = new Set(expanded.value)
+  next.has(id) ? next.delete(id) : next.add(id)
+  expanded.value = next
+}
+
+function isExpanded(row: TreeTableRow) { return expanded.value.has(row[props.rowKey]) }
+
+interface FlatRow {
+  row: TreeTableRow
+  depth: number
+  hasChildren: boolean
+  isExpanded: boolean
+}
+
+const flatRows = computed(() => {
+  const result: FlatRow[] = []
+  function walk(rows: TreeTableRow[], depth: number) {
+    for (const row of rows) {
+      const hasChildren = !!row.children?.length
+      const exp = isExpanded(row)
+      result.push({ row, depth, hasChildren, isExpanded: exp })
+      if (hasChildren && exp) walk(row.children!, depth + 1)
+    }
+  }
+  walk(props.rows, 0)
+  return result
+})
+
+function expandAll() {
+  expanded.value = new Set(collectIds(props.rows))
+}
+function collapseAll() {
+  expanded.value = new Set()
+}
+
+function alignClass(a?: string) { return a === 'center' ? 'text-center' : a === 'right' ? 'text-right' : 'text-left' }
+</script>
+
+<template>
+  <div class="flex flex-col overflow-hidden rounded-sm border border-outline-variant">
+    <!-- Toolbar -->
+    <div v-if="$slots.toolbar" class="flex items-center gap-2 border-b border-outline-variant bg-surface-container-lowest px-4 py-2">
+      <slot name="toolbar" :expand-all="expandAll" :collapse-all="collapseAll" />
+    </div>
+
+    <div class="overflow-x-auto">
+      <table class="w-full border-collapse">
+        <thead>
+          <tr class="bg-surface-container-high">
+            <th
+              v-for="(col, ci) in columns"
+              :key="col.key"
+              :style="col.width ? { width: col.width } : undefined"
+              :class="[
+                'whitespace-nowrap text-label-medium font-medium text-on-surface-variant',
+                dense ? 'px-3 py-2' : 'px-4 py-3',
+                alignClass(col.align),
+              ]"
+            >
+              {{ col.label }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="(item, i) in flatRows"
+            :key="item.row[rowKey] ?? i"
+            class="border-t border-outline-variant transition-colors duration-100 hover:bg-on-surface/[0.04]"
+            :class="item.depth > 0 ? 'bg-surface-container-lowest/50' : ''"
+            @click="emit('rowClick', item.row)"
+          >
+            <td
+              v-for="(col, ci) in columns"
+              :key="col.key"
+              :class="['text-body-medium text-on-surface', alignClass(col.align), dense ? 'px-3 py-1.5' : 'px-4 py-3']"
+            >
+              <!-- First column gets indent + expand icon -->
+              <div v-if="ci === 0" class="flex items-center gap-1" :style="{ paddingLeft: `${item.depth * indent}px` }">
+                <button
+                  v-if="item.hasChildren"
+                  type="button"
+                  class="flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-full text-on-surface-variant transition-transform duration-200 hover:bg-on-surface/8"
+                  :class="item.isExpanded ? 'rotate-90' : ''"
+                  @click.stop="toggleExpand(item.row)"
+                >
+                  <MIcon name="chevron_right" :size="18" />
+                </button>
+                <span v-else class="w-6 shrink-0" />
+                <slot :name="`cell-${col.key}`" :row="item.row" :value="item.row[col.key]" :depth="item.depth">
+                  <span :class="item.hasChildren ? 'font-medium' : ''">{{ item.row[col.key] ?? '—' }}</span>
+                </slot>
+              </div>
+              <template v-else>
+                <slot :name="`cell-${col.key}`" :row="item.row" :value="item.row[col.key]" :depth="item.depth">
+                  {{ item.row[col.key] ?? '—' }}
+                </slot>
+              </template>
+            </td>
+          </tr>
+          <tr v-if="!flatRows.length">
+            <td :colspan="columns.length" class="border-t border-outline-variant px-4 py-10 text-center">
+              <MIcon name="account_tree" :size="36" class="mb-2 text-on-surface-variant opacity-30" />
+              <p class="text-body-medium text-on-surface-variant">Sin datos</p>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>

package/src/components/MVirtualTable.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import MIcon from './MIcon.vue'
+
+export interface VTableColumn {
+  key: string
+  label: string
+  width?: string
+  align?: 'left' | 'center' | 'right'
+  sortable?: boolean
+}
+
+const props = withDefaults(defineProps<{
+  columns: VTableColumn[]
+  rows: Record<string, any>[]
+  rowHeight?: number
+  rowKey?: string
+  overscan?: number
+  maxHeight?: string
+}>(), {
+  rowHeight: 44,
+  rowKey: 'id',
+  overscan: 5,
+  maxHeight: '500px',
+})
+
+const emit = defineEmits<{ rowClick: [Record<string, any>] }>()
+
+const scrollEl = ref<HTMLElement>()
+const scrollTop = ref(0)
+const containerH = ref(400)
+
+const sortKey = ref('')
+const sortDir = ref<'asc' | 'desc' | ''>('')
+
+function toggleSort(key: string) {
+  if (sortKey.value !== key) { sortKey.value = key; sortDir.value = 'asc' }
+  else if (sortDir.value === 'asc') sortDir.value = 'desc'
+  else { sortKey.value = ''; sortDir.value = '' }
+}
+
+const sortedRows = computed(() => {
+  if (!sortKey.value || !sortDir.value) return props.rows
+  const key = sortKey.value, dir = sortDir.value
+  return [...props.rows].sort((a, b) => {
+    const cmp = String(a[key] ?? '').localeCompare(String(b[key] ?? ''), undefined, { numeric: true, sensitivity: 'base' })
+    return dir === 'asc' ? cmp : -cmp
+  })
+})
+
+const totalHeight = computed(() => sortedRows.value.length * props.rowHeight)
+
+const visibleRange = computed(() => {
+  const start = Math.max(0, Math.floor(scrollTop.value / props.rowHeight) - props.overscan)
+  const end = Math.min(
+    sortedRows.value.length,
+    Math.ceil((scrollTop.value + containerH.value) / props.rowHeight) + props.overscan
+  )
+  return { start, end }
+})
+
+const visibleRows = computed(() =>
+  sortedRows.value.slice(visibleRange.value.start, visibleRange.value.end).map((row, i) => ({
+    row,
+    index: visibleRange.value.start + i,
+    top: (visibleRange.value.start + i) * props.rowHeight,
+  }))
+)
+
+function onScroll() {
+  if (!scrollEl.value) return
+  scrollTop.value = scrollEl.value.scrollTop
+}
+
+let ro: ResizeObserver | null = null
+onMounted(() => {
+  if (scrollEl.value) {
+    containerH.value = scrollEl.value.clientHeight
+    ro = new ResizeObserver((entries) => { containerH.value = entries[0]!.contentRect.height })
+    ro.observe(scrollEl.value)
+  }
+})
+onBeforeUnmount(() => ro?.disconnect())
+
+function alignClass(a?: string) { return a === 'center' ? 'text-center' : a === 'right' ? 'text-right' : 'text-left' }
+</script>
+
+<template>
+  <div class="flex flex-col overflow-hidden rounded-sm border border-outline-variant">
+    <!-- Header -->
+    <div class="flex bg-surface-container-high">
+      <div
+        v-for="col in columns"
+        :key="col.key"
+        :style="{ width: col.width || 'auto', flex: col.width ? 'none' : '1' }"
+        :class="[
+          'px-4 py-3 text-label-medium font-medium text-on-surface-variant whitespace-nowrap',
+          alignClass(col.align),
+          col.sortable ? 'cursor-pointer select-none hover:text-on-surface transition-colors' : '',
+        ]"
+        @click="col.sortable ? toggleSort(col.key) : undefined"
+      >
+        <span class="inline-flex items-center gap-1">
+          {{ col.label }}
+          <span v-if="col.sortable" class="inline-flex">
+            <MIcon v-if="sortKey === col.key && sortDir === 'asc'" name="arrow_upward" :size="14" class="text-primary" />
+            <MIcon v-else-if="sortKey === col.key && sortDir === 'desc'" name="arrow_downward" :size="14" class="text-primary" />
+            <MIcon v-else name="unfold_more" :size="14" class="opacity-30" />
+          </span>
+        </span>
+      </div>
+    </div>
+
+    <!-- Virtual scroll body -->
+    <div
+      ref="scrollEl"
+      class="overflow-y-auto"
+      :style="{ maxHeight }"
+      @scroll="onScroll"
+    >
+      <div class="relative" :style="{ height: `${totalHeight}px` }">
+        <div
+          v-for="{ row, index, top } in visibleRows"
+          :key="row[rowKey] ?? index"
+          class="absolute left-0 right-0 flex border-t border-outline-variant transition-colors duration-75 hover:bg-on-surface/[0.04]"
+          :class="index % 2 === 0 ? '' : 'bg-surface-container-lowest/50'"
+          :style="{ top: `${top}px`, height: `${rowHeight}px` }"
+          @click="emit('rowClick', row)"
+        >
+          <div
+            v-for="col in columns"
+            :key="col.key"
+            class="flex items-center overflow-hidden px-4 text-body-medium text-on-surface"
+            :style="{ width: col.width || 'auto', flex: col.width ? 'none' : '1' }"
+            :class="alignClass(col.align)"
+          >
+            <slot :name="`cell-${col.key}`" :row="row" :value="row[col.key]">
+              <span class="truncate">{{ row[col.key] ?? '—' }}</span>
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="border-t border-outline-variant bg-surface-container-lowest px-4 py-2">
+      <span class="text-label-small text-on-surface-variant">
+        {{ sortedRows.length.toLocaleString() }} filas
+        <template v-if="visibleRange.end - visibleRange.start < sortedRows.length">
+          · mostrando {{ visibleRange.start + 1 }}–{{ visibleRange.end }}
+        </template>
+      </span>
+    </div>
+  </div>
+</template>

package/src/components/_MContextMenuPanel.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { ref, onMounted, nextTick } from 'vue'
+import MIcon from './MIcon.vue'
+import MContextMenuPanel from './_MContextMenuPanel.vue'
+import type { ContextMenuItem } from './MContextMenu.vue'
+
+const props = defineProps<{
+  items: ContextMenuItem[]
+  x: number
+  y: number
+}>()
+
+const emit = defineEmits<{ close: [] }>()
+
+const panel = ref<HTMLElement | null>(null)
+const panelX = ref(props.x)
+const panelY = ref(props.y)
+const activeIndex = ref<number | null>(null)
+const subPos = ref({ x: 0, y: 0 })
+
+onMounted(async () => {
+  await nextTick()
+  if (!panel.value) return
+  const el = panel.value
+  panelX.value = Math.min(props.x, window.innerWidth - el.offsetWidth - 8)
+  panelY.value = Math.min(props.y, window.innerHeight - el.offsetHeight - 8)
+})
+
+function onItemMouseEnter(index: number, item: ContextMenuItem, e: MouseEvent) {
+  if (item.divider || item.disabled) {
+    activeIndex.value = null
+    return
+  }
+  if (!item.children?.length) {
+    activeIndex.value = null
+    return
+  }
+
+  activeIndex.value = index
+  const itemEl = e.currentTarget as HTMLElement
+  const itemRect = itemEl.getBoundingClientRect()
+  const panelRect = panel.value!.getBoundingClientRect()
+
+  let x = panelRect.right
+  let y = itemRect.top
+  if (x + 220 > window.innerWidth) x = panelRect.left - 220
+  if (y + 300 > window.innerHeight) y = Math.max(8, window.innerHeight - 300)
+
+  subPos.value = { x, y }
+}
+
+function onItemClick(item: ContextMenuItem) {
+  if (item.disabled || item.divider || item.children?.length) return
+  item.onClick?.()
+  emit('close')
+}
+
+function onPanelMouseLeave(e: MouseEvent) {
+  // Don't close if the mouse moved to another context menu panel (sibling sub-panel)
+  const related = e.relatedTarget as Element | null
+  if (related?.closest('.m3-ctx-panel')) return
+  activeIndex.value = null
+}
+</script>
+
+<template>
+  <div
+    ref="panel"
+    class="m3-ctx-panel absolute z-[201] min-w-[200px] rounded-sm bg-surface-container shadow-elevation-2"
+    :style="{ left: `${panelX}px`, top: `${panelY}px` }"
+    @mouseleave="onPanelMouseLeave"
+  >
+    <div class="overflow-hidden rounded-sm py-1">
+      <template v-for="(item, i) in items" :key="i">
+        <hr v-if="item.divider" class="my-1 border-outline-variant" />
+
+        <div
+          v-else
+          class="relative flex cursor-default select-none items-center gap-3 px-4 py-2.5 text-body-large"
+          :class="[
+            item.disabled
+              ? 'cursor-not-allowed opacity-38 text-on-surface'
+              : item.danger
+                ? 'cursor-pointer text-error hover:bg-error/8'
+                : 'cursor-pointer text-on-surface hover:bg-on-surface/8',
+            activeIndex === i && !item.disabled
+              ? (item.danger ? 'bg-error/8' : 'bg-on-surface/8')
+              : '',
+          ]"
+          @mouseenter="onItemMouseEnter(i, item, $event)"
+          @click="onItemClick(item)"
+        >
+          <MIcon
+            v-if="item.icon"
+            :name="item.icon"
+            :size="18"
+            class="shrink-0"
+            :class="item.danger ? 'text-error' : 'text-on-surface-variant'"
+          />
+          <span v-else class="w-[18px] shrink-0" />
+
+          <span class="flex-1">{{ item.label }}</span>
+
+          <span v-if="item.shortcut" class="text-label-small text-on-surface-variant">
+            {{ item.shortcut }}
+          </span>
+
+          <MIcon
+            v-if="item.children?.length"
+            name="chevron_right"
+            :size="18"
+            class="shrink-0 text-on-surface-variant"
+          />
+        </div>
+      </template>
+    </div>
+  </div>
+
+  <!-- Sub-panel: sibling in the same Teleport layer.
+       No <Transition> wrapper — MContextMenuPanel is a fragment and cannot be
+       animated by Vue's Transition (produces a console warning). -->
+  <MContextMenuPanel
+    v-if="activeIndex !== null && items[activeIndex]?.children?.length"
+    :items="items[activeIndex]!.children!"
+    :x="subPos.x"
+    :y="subPos.y"
+    @close="emit('close')"
+  />
+</template>

package/src/components/_MTreeNode.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import MTreeNode from './_MTreeNode.vue'
+import MCheckbox from './MCheckbox.vue'
+import MIcon from './MIcon.vue'
+import type { TreeContext, TreeNode } from './MTree.vue'
+
+const props = defineProps<{ node: TreeNode; depth: number }>()
+
+const tree = inject<TreeContext>('m-tree')!
+
+const hasChildren = computed(() => !!props.node.children?.length)
+const isExpanded  = computed(() => tree.expandedIds.value.has(props.node.id))
+const isSelected  = computed(() => tree.selected.value === props.node.id)
+
+// Use only leaf ids for checkbox visual state (branch ids are never stored in checkedSet)
+const leafIds = computed(() => tree.getLeafIds(props.node))
+const checkedLeafCount = computed(() => leafIds.value.filter(id => tree.checkedSet.value.has(id)).length)
+const isChecked       = computed(() => leafIds.value.length > 0 && checkedLeafCount.value === leafIds.value.length)
+const isIndeterminate = computed(() => checkedLeafCount.value > 0 && !isChecked.value)
+
+function onRowClick() {
+  if (props.node.disabled) return
+  tree.selectNode(props.node)
+  if (hasChildren.value) tree.toggleExpand(props.node.id)
+}
+
+function onChevronClick(e: MouseEvent) {
+  e.stopPropagation()
+  if (props.node.disabled) return
+  tree.toggleExpand(props.node.id)
+}
+
+function onCheck() {
+  if (props.node.disabled) return
+  tree.toggleCheck(props.node)
+}
+
+// ── Height transition hooks ────────────────────────────────────────────────
+function onEnter(el: Element) {
+  const e = el as HTMLElement
+  e.style.height = '0'
+  e.style.opacity = '0'
+  e.style.overflow = 'hidden'
+  e.offsetHeight // force reflow
+  e.style.transition = 'height 200ms cubic-bezier(0.4,0,0.2,1), opacity 150ms ease'
+  e.style.height = e.scrollHeight + 'px'
+  e.style.opacity = '1'
+}
+function onAfterEnter(el: Element) {
+  const e = el as HTMLElement
+  e.style.height = ''
+  e.style.overflow = ''
+  e.style.transition = ''
+  e.style.opacity = ''
+}
+function onLeave(el: Element) {
+  const e = el as HTMLElement
+  e.style.height = e.scrollHeight + 'px'
+  e.style.overflow = 'hidden'
+  e.offsetHeight // force reflow
+  e.style.transition = 'height 180ms cubic-bezier(0.4,0,0.2,1), opacity 120ms ease'
+  e.style.height = '0'
+  e.style.opacity = '0'
+}
+function onAfterLeave(el: Element) {
+  const e = el as HTMLElement
+  e.style.height = ''
+  e.style.overflow = ''
+  e.style.transition = ''
+  e.style.opacity = ''
+}
+</script>
+
+<template>
+  <div role="treeitem" :aria-expanded="hasChildren ? isExpanded : undefined" :aria-selected="isSelected">
+    <!-- ── Row ─────────────────────────────────────────────────────────────── -->
+    <div
+      :class="[
+        'flex items-center gap-1 rounded-sm py-1 pr-2 transition-colors duration-100 select-none',
+        node.disabled
+          ? 'cursor-not-allowed opacity-38'
+          : 'cursor-pointer',
+        !node.disabled && isSelected
+          ? 'bg-primary/[0.10]'
+          : !node.disabled
+            ? 'hover:bg-on-surface/[0.04]'
+            : '',
+      ]"
+      @click="onRowClick"
+    >
+      <!-- Indent spacer (no lines for depth 0, lines provided by parent's border-l) -->
+      <div class="flex w-6 shrink-0 items-center justify-center">
+        <!-- Chevron for branch nodes -->
+        <button
+          v-if="hasChildren"
+          type="button"
+          class="flex h-5 w-5 items-center justify-center rounded text-on-surface-variant transition-transform duration-200"
+          :class="isExpanded ? 'rotate-90' : ''"
+          :disabled="node.disabled || undefined"
+          @click="onChevronClick"
+        >
+          <MIcon name="chevron_right" :size="16" />
+        </button>
+      </div>
+
+      <!-- Checkbox (checkable mode) -->
+      <div v-if="tree.checkable.value" class="shrink-0" @click.stop="onCheck">
+        <MCheckbox
+          :model-value="isChecked"
+          :indeterminate="isIndeterminate"
+          :disabled="node.disabled"
+          @update:model-value="onCheck"
+        />
+      </div>
+
+      <!-- Node icon -->
+      <MIcon
+        v-if="node.icon"
+        :name="node.icon"
+        :size="16"
+        class="shrink-0 transition-colors"
+        :class="isSelected ? 'text-primary' : 'text-on-surface-variant'"
+      />
+
+      <!-- Label -->
+      <span
+        class="min-w-0 flex-1 truncate text-body-medium transition-colors"
+        :class="isSelected ? 'font-medium text-primary' : 'text-on-surface'"
+      >
+        <slot name="label" :node="node">{{ node.label }}</slot>
+      </span>
+
+      <!-- Check count badge (branch + checkable) -->
+      <span
+        v-if="hasChildren && tree.checkable.value"
+        class="shrink-0 text-label-small tabular-nums text-on-surface-variant"
+      >
+        {{ checkedLeafCount }}/{{ leafIds.length }}
+      </span>
+
+      <!-- Optional trailing slot -->
+      <slot name="trailing" :node="node" />
+    </div>
+
+    <!-- ── Children ───────────────────────────────────────────────────────── -->
+    <Transition
+      @enter="onEnter"
+      @after-enter="onAfterEnter"
+      @leave="onLeave"
+      @after-leave="onAfterLeave"
+    >
+      <div
+        v-if="isExpanded && hasChildren"
+        class="ml-3 border-l border-outline-variant pl-2"
+      >
+        <MTreeNode
+          v-for="child in node.children"
+          :key="child.id"
+          :node="child"
+          :depth="depth + 1"
+        >
+          <!-- @vue-ignore -->
+          <template v-for="(_, name) in $slots" #[name]="sp">
+            <slot :name="name" v-bind="sp ?? {}" />
+          </template>
+        </MTreeNode>
+      </div>
+    </Transition>
+  </div>
+</template>

package/src/composables/useColorPalette.ts

@@ -0,0 +1,60 @@
+import { ref, watchEffect } from 'vue'
+
+export interface Palette {
+  id: string
+  label: string
+  seed: string
+}
+
+export const palettes: Palette[] = [
+  { id: 'purple',      label: 'Morado',        seed: '#6750A4' },
+  { id: 'indigo',      label: 'Índigo',        seed: '#4355B9' },
+  { id: 'navy',        label: 'Marino',        seed: '#354BA0' },
+  { id: 'blue',        label: 'Azul',          seed: '#005AC1' },
+  { id: 'cyan',        label: 'Cian',          seed: '#006874' },
+  { id: 'teal',        label: 'Teal',          seed: '#006B5F' },
+  { id: 'green',       label: 'Verde',         seed: '#386A20' },
+  { id: 'lime',        label: 'Lima',          seed: '#4C6706' },
+  { id: 'olive',       label: 'Oliva',         seed: '#636118' },
+  { id: 'amber',       label: 'Ámbar',         seed: '#785900' },
+  { id: 'sand',        label: 'Arena',         seed: '#715C2E' },
+  { id: 'orange',      label: 'Naranja',       seed: '#8B5000' },
+  { id: 'deep-orange', label: 'Naranja oscuro', seed: '#96480A' },
+  { id: 'brown',       label: 'Marrón',        seed: '#6E4C32' },
+  { id: 'red',         label: 'Rojo',          seed: '#B82000' },
+  { id: 'coral',       label: 'Coral',         seed: '#A03530' },
+  { id: 'crimson',     label: 'Carmesí',       seed: '#9C4068' },
+  { id: 'pink',        label: 'Rosa',          seed: '#9C4057' },
+  { id: 'violet',      label: 'Violeta',       seed: '#7C39A4' },
+  { id: 'slate',       label: 'Pizarra',       seed: '#4A6269' },
+]
+
+const current = ref(localStorage.getItem('m3-palette') ?? 'purple')
+
+export function useColorPalette() {
+  watchEffect(() => {
+    const id = current.value
+    localStorage.setItem('m3-palette', id)
+
+    if (id === 'purple') {
+      document.documentElement.removeAttribute('data-palette')
+    } else {
+      document.documentElement.setAttribute('data-palette', id)
+    }
+  })
+
+  function set(id: string) {
+    document.documentElement.classList.add('theme-transitioning')
+    void document.documentElement.offsetHeight
+    current.value = id
+    setTimeout(() => document.documentElement.classList.remove('theme-transitioning'), 300)
+  }
+
+  return { palette: current, palettes, set }
+}
+
+// Apply on module load so palette is visible before any component mounts
+const saved = localStorage.getItem('m3-palette')
+if (saved && saved !== 'purple') {
+  document.documentElement.setAttribute('data-palette', saved)
+}