@yewdiel21/motion-kit 0.14.0 → 0.16.0

package/src/components/tree-view/tree-view.css

@@ -207,3 +207,82 @@ mk-tree-view {
     animation: none;
   }
 }
+
+/* Folder and page icons (icons option): the folder's front opens like a lid with its branch, or under a dragged card. */
+:is([data-mk-tree-folder], [data-mk-tree-page]) {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  width: 1.15rem;
+  height: 1.15rem;
+}
+
+:is([data-mk-tree-folder], [data-mk-tree-page]) svg {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+[data-mk-tree-folder-back] {
+  fill: color-mix(in srgb, var(--mk-accent) 70%, var(--mk-surface-1));
+}
+
+[data-mk-tree-folder-front] {
+  fill: var(--mk-accent);
+  transform-box: fill-box;
+  transform-origin: 50% 100%;
+  transition: transform 0.35s cubic-bezier(0.38, 0.49, 0, 1.5);
+}
+
+[role='treeitem'][aria-expanded='true'] > [data-mk-tree-row] [data-mk-tree-folder-front],
+[role='treeitem'][data-mk-tree-over] > [data-mk-tree-row] [data-mk-tree-folder-front] {
+  transform: skewX(-14deg) scaleY(0.78);
+}
+
+[data-mk-tree-sheet] {
+  fill: var(--mk-surface-3);
+  stroke: var(--mk-outline);
+  stroke-width: 2;
+}
+
+[data-mk-tree-fold] {
+  fill: var(--mk-outline);
+}
+
+/* Dragging: the source row fades, the branch under the card lights up, the card floats with a shadow. */
+[role='treeitem'][data-mk-tree-dragging] > [data-mk-tree-row] {
+  opacity: 0.4;
+}
+
+[role='treeitem'][data-mk-tree-over] > [data-mk-tree-row] {
+  background: color-mix(in srgb, var(--mk-accent) 14%, transparent);
+  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mk-accent) 55%, transparent);
+}
+
+[data-mk-tree-drag] {
+  position: fixed;
+  z-index: 2147483646;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  max-width: 16rem;
+  padding: 0.45rem 0.75rem;
+  overflow: hidden;
+  border-radius: 10px;
+  background: var(--mk-surface-1);
+  box-shadow:
+    0 0 0 1px var(--mk-outline-soft),
+    0 14px 30px -10px color-mix(in srgb, var(--mk-shadow-color, #000) 45%, transparent);
+  color: var(--mk-text);
+  font-size: 0.875rem;
+  font-weight: 500;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-tree-folder-front] {
+    transition: none;
+  }
+}

package/src/components/voice-dots/README.md

@@ -0,0 +1,48 @@
+# voice-dots
+
+Puntos que respiran, escuchan, piensan y hablan; pueden seguir el nivel real de una fuente de audio.
+
+## Instalación
+
+```tsx
+import '@yewdiel21/motion-kit/css';
+import { VoiceDots } from '@yewdiel21/motion-kit/react';
+```
+
+```sh
+npx @yewdiel21/motion-kit add voice-dots --react --elements
+```
+
+## React
+
+```tsx
+<VoiceDots state="listening" source={stream} level={level} />
+```
+
+Los callbacks del ejemplo (`ask`, `run`, `setTool`, `setVolume`) pertenecen a tu aplicación. React acepta `className`, `style` y atributos HTML. Los componentes con estado exponen `instanceRef` (excepto PillButton).
+
+## HTML / Astro
+
+```html
+<mk-voice-dots state="listening" size="12"></mk-voice-dots>
+<script type="module">
+  import { defineElements } from '@yewdiel21/motion-kit/elements';
+  defineElements(['mk-voice-dots']);
+</script>
+```
+
+En Astro usa un `<script>` procesado por Astro. En HTML directo el import requiere bundler o import map. También puedes usar `import { createVoiceDots } from '@yewdiel21/motion-kit'` y llamar a la factory con el contenedor y las mismas opciones. Al desmontar, llama a `instance.destroy()`.
+
+## Opciones
+
+state: idle, listening, thinking o speaking. count: 4 (3 a 6). size: 12 px. colorful: false. labels: textos de estado. En React source acepta MediaStream o HTMLMediaElement; level acepta 0…1 o un array. Instancia: setState(), setLevel(), listen(source), stop(), state.
+
+El componente no solicita acceso al micrófono por sí solo. Obtén el stream tras una acción del usuario con `navigator.mediaDevices.getUserMedia({audio:true})`. `await instance.listen(stream)` devuelve una función para desconectar el análisis; la aplicación debe detener sus tracks al terminar. La fuente se analiza localmente. `stop()` desconecta la fuente. Sin audio, listening acepta `setLevel()` y speaking usa una onda de demostración.
+
+Los nombres camelCase se escriben como atributos kebab-case. Los arrays y objetos se pasan como JSON. Los booleanos aceptan atributo vacío o `"false"`.
+
+## Estilos y accesibilidad
+
+Variables: --mk-voice-size; colores semánticos del tema..
+
+Respeta los colores del tema, foco visible y `prefers-reduced-motion`. Los gráficos incluyen una tabla accesible y selección con flechas, Home, End y Escape. Heatmap usa arriba/abajo para un día e izquierda/derecha para una semana. Toolbar usa flechas y Home/End; OrbitMenu cierra con Escape y devuelve el foco. Los controles conservan nombres accesibles; VoiceDots anuncia los estados sin leer cada fotograma.

package/src/components/voice-dots/element.ts

@@ -0,0 +1,45 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createVoiceDots, type VoiceDotsInstance, type VoiceState } from './engine';
+
+/**
+ * <mk-voice-dots class="mk-voice-dots" state="listening"></mk-voice-dots>
+ * Dots that move with a voice. element.listen(stream) follows a microphone; emits mk:state ({state}).
+ */
+export class MkVoiceDotsElement extends MkElement<VoiceDotsInstance> {
+  static options: Record<string, OptionType> = { state: 'string', count: 'number', colorful: 'boolean', size: 'number' };
+
+  protected create(options: Record<string, unknown>) {
+    return createVoiceDots(this, options);
+  }
+
+  /** A new state flows from where the dots are (the engine, and the audio it follows, stay). */
+  attributeChangedCallback(name: string, previous: string | null, next: string | null) {
+    if (name === 'state' && this.instance) {
+      this.instance.setState((next ?? 'idle') as VoiceState);
+      return;
+    }
+    super.attributeChangedCallback(name, previous, next);
+  }
+
+  get state() {
+    return this.instance?.state ?? 'idle';
+  }
+
+  set state(next: VoiceState) {
+    this.setAttribute('state', next);
+  }
+
+  setLevel(level: number | number[]) {
+    this.instance?.setLevel(level);
+  }
+
+  listen(source: MediaStream | HTMLMediaElement) {
+    return this.instance?.listen(source) ?? Promise.resolve(() => {});
+  }
+
+  stop() {
+    this.instance?.stop();
+  }
+}
+
+export const defineVoiceDots = () => defineElement('mk-voice-dots', MkVoiceDotsElement);

package/src/components/voice-dots/engine.ts

@@ -0,0 +1,243 @@
+import { registerMotion } from '../../core/gsap';
+import { whileVisible } from '../../core/loop';
+import { reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+
+/*
+ * Voice dots: four dots that show a voice conversation, like an assistant's.
+ * Idle, they breathe one after another. Listening, each dot stretches into a
+ * pill with its band of the voice (from a microphone or a playing element
+ * through an AnalyserNode, or levels the app gives), springing up fast and
+ * settling slower so syllables read as a bounce. Thinking, they gather into a
+ * ring and orbit. Speaking, they ride a travelling wave (with the playing
+ * audio's level when there is one). Every change of state flows from where the
+ * dots are, so nothing jumps; the frame loop only runs while the dots are on
+ * screen. Monochrome (the text colour) by default, or the chart colours. A
+ * status line says the state to assistive tech; with reduced motion the dots
+ * stay still and only their colour and the status change.
+ */
+
+export type VoiceState = 'idle' | 'listening' | 'thinking' | 'speaking';
+
+export interface VoiceDotsOptions {
+  /** Default 'idle'. */
+  state?: VoiceState;
+  /** Dots (default 4, 3…6). */
+  count?: number;
+  /** The chart colours instead of the text colour. */
+  colorful?: boolean;
+  /** Dot size in px (default 12). */
+  size?: number;
+  /** The status text for each state. */
+  labels?: Partial<Record<VoiceState, string>>;
+}
+
+export interface VoiceDotsInstance extends Instance {
+  setState(state: VoiceState): void;
+  readonly state: VoiceState;
+  /** The voice's level, 0…1: one for all dots or one per dot (from your own analysis). */
+  setLevel(level: number | number[]): void;
+  /** Follow a microphone stream or a playing <audio>/<video>; resolves to a function that stops following. */
+  listen(source: MediaStream | HTMLMediaElement): Promise<() => void>;
+  /** Stop following the audio (the state stays). */
+  stop(): void;
+}
+
+const LABELS: Record<VoiceState, string> = { idle: 'Asistente en espera', listening: 'Escuchando…', thinking: 'Pensando…', speaking: 'Hablando…' };
+const STATES: VoiceState[] = ['idle', 'listening', 'thinking', 'speaking'];
+/** One AudioContext source per media element: the platform allows only one. */
+const mediaSources = new WeakMap<HTMLMediaElement, MediaElementAudioSourceNode>();
+let audio: AudioContext | null = null;
+
+export function createVoiceDots(root: HTMLElement | null, options: VoiceDotsOptions = {}): VoiceDotsInstance {
+  if (!root) return inert({ setState() {}, state: 'idle' as VoiceState, setLevel() {}, listen: async () => () => {}, stop() {} });
+  registerMotion();
+  const scope = createScope();
+  const count = Math.max(3, Math.min(6, Math.round(options.count ?? 4)));
+  const size = Math.max(4, options.size ?? 12);
+  const labels = { ...LABELS, ...options.labels };
+  let state: VoiceState = STATES.includes(options.state as VoiceState) ? options.state! : 'idle';
+
+  const row = document.createElement('span');
+  row.dataset.mkVoiceRow = '';
+  row.setAttribute('aria-hidden', 'true');
+  const dots = Array.from({ length: count }, (_, i) => {
+    const dot = document.createElement('span');
+    dot.dataset.mkVoiceDot = String(i + 1);
+    row.append(dot);
+    return dot;
+  });
+  const status = document.createElement('span');
+  status.className = 'mk-sr-only';
+  status.setAttribute('role', 'status');
+  root.append(row, status);
+  scope.add(() => {
+    row.remove();
+    status.remove();
+  });
+  scope.attr(root, 'data-mk-ready', '');
+  scope.attr(root, 'data-mk-state', state);
+  if (options.colorful) scope.attr(root, 'data-mk-colorful', '');
+  root.style.setProperty('--mk-voice-size', `${size}px`);
+  scope.add(() => {
+    root.style.removeProperty('--mk-voice-size');
+    if (!root.getAttribute('style')) root.removeAttribute('style');
+  });
+
+  // Per dot: what is drawn (height, x, y) and the level it follows.
+  const drawn = dots.map(() => ({ h: size, x: 0, y: 0, vh: 0 }));
+  const levels = dots.map(() => 0);
+  let time = 0;
+  const gap = size * 0.9;
+  const home = (i: number) => (i - (count - 1) / 2) * (size + gap);
+
+  const draw = () => {
+    dots.forEach((dot, i) => {
+      const d = drawn[i]!;
+      dot.style.height = `${d.h.toFixed(2)}px`;
+      dot.style.transform = `translate(${d.x.toFixed(2)}px, ${d.y.toFixed(2)}px)`;
+    });
+  };
+  const still = () => {
+    dots.forEach((_, i) => Object.assign(drawn[i]!, { h: size, x: 0, y: 0, vh: 0 }));
+    draw();
+  };
+
+  let analyser: AnalyserNode | null = null;
+  let bins: Uint8Array<ArrayBuffer> | null = null;
+  let release: (() => void) | null = null;
+  let listening = 0;
+  /** The voice's bands (about 120 Hz – 3 kHz) into one level per dot. */
+  const sample = () => {
+    if (!analyser || !bins) return;
+    analyser.getByteFrequencyData(bins);
+    const hz = (audio?.sampleRate ?? 48000) / 2 / bins.length;
+    const low = Math.max(1, Math.floor(120 / hz));
+    const high = Math.min(bins.length - 1, Math.ceil(3000 / hz));
+    const span = (high - low) / count;
+    for (let i = 0; i < count; i++) {
+      let sum = 0;
+      const from = Math.floor(low + span * i);
+      const to = Math.max(from + 1, Math.floor(low + span * (i + 1)));
+      for (let k = from; k < to; k++) sum += bins[k]!;
+      // Higher bands are quieter in a voice: they get a lift.
+      levels[i] = Math.min(1, (sum / (to - from) / 255) * (1.4 + i * 0.35));
+    }
+  };
+
+  const tick = (dt: number) => {
+    if (reduced()) return;
+    time += dt / 60;
+    sample();
+    const k = 1 - Math.exp(-dt * 0.35);
+    dots.forEach((_, i) => {
+      const d = drawn[i]!;
+      let h = size;
+      let x = 0;
+      let y = 0;
+      if (state === 'idle') {
+        h = size * (1 + 0.18 * Math.max(0, Math.sin(time * 3.2 - i * 0.7)));
+        y = -2 * Math.max(0, Math.sin(time * 3.2 - i * 0.7));
+      } else if (state === 'listening') {
+        h = size + levels[i]! * size * 3.2;
+      } else if (state === 'thinking') {
+        // A ring around the middle, turning.
+        const angle = time * 4 + (i / count) * Math.PI * 2;
+        const ring = size * 1.2;
+        x = Math.cos(angle) * ring - home(i);
+        y = Math.sin(angle) * ring;
+      } else {
+        const wave = 0.5 + 0.5 * Math.sin(time * 9 - i * 0.9);
+        const voice = analyser ? levels[i]! : 0.55;
+        h = size + wave * voice * size * 2.4;
+      }
+      // Height on a spring that rises fast and falls slower (a bounce per syllable); position eases.
+      const stiffness = h > d.h ? 0.5 : 0.18;
+      d.vh = (d.vh + (h - d.h) * stiffness) * 0.6;
+      d.h = Math.max(size * 0.8, d.h + d.vh * dt);
+      d.x += (x - d.x) * k;
+      d.y += (y - d.y) * k;
+    });
+    draw();
+  };
+  const stopLoop = whileVisible(root, tick);
+  scope.add(stopLoop);
+
+  const stop = () => {
+    listening++;
+    release?.();
+    release = null;
+    analyser = null;
+    bins = null;
+    levels.fill(0);
+  };
+  scope.add(stop);
+
+  const setState = (next: VoiceState) => {
+    if (!STATES.includes(next)) return;
+    state = next;
+    root.setAttribute('data-mk-state', next);
+    status.textContent = next === 'idle' ? '' : labels[next];
+    if (reduced()) still();
+    root.dispatchEvent(new CustomEvent('mk:state', { bubbles: true, detail: { state: next } }));
+  };
+
+  draw();
+  if (state !== 'idle') status.textContent = labels[state];
+
+  return {
+    setState,
+    get state() {
+      return state;
+    },
+    setLevel(level) {
+      const list = Array.isArray(level) ? level : dots.map(() => level);
+      dots.forEach((_, i) => {
+        const value = Number(list[i % Math.max(1, list.length)]);
+        levels[i] = Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 0;
+      });
+    },
+    async listen(source) {
+      stop();
+      const request = listening;
+      const Context = globalThis.AudioContext ?? (globalThis as unknown as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;
+      if (!Context || scope.disposed) return () => {};
+      audio ??= new Context();
+      if (audio.state === 'suspended') await audio.resume().catch(() => {});
+      if (scope.disposed || request !== listening) return () => {};
+      const node = audio.createAnalyser();
+      node.fftSize = 256;
+      node.smoothingTimeConstant = 0.55;
+      let input: AudioNode;
+      if (source instanceof HTMLMediaElement) {
+        const existing = mediaSources.get(source) ?? audio.createMediaElementSource(source);
+        mediaSources.set(source, existing);
+        // Followed before: its direct line to the speakers goes, the analyser's takes over.
+        existing.disconnect();
+        input = existing;
+        // A playing element must still be heard.
+        node.connect(audio.destination);
+      } else input = audio.createMediaStreamSource(source);
+      input.connect(node);
+      analyser = node;
+      bins = new Uint8Array(new ArrayBuffer(node.frequencyBinCount));
+      const mine = () => {
+        try {
+          input.disconnect(node);
+          node.disconnect();
+        } catch {
+          // Already disconnected.
+        }
+        // The element keeps playing through the speakers.
+        if (source instanceof HTMLMediaElement && audio) input.connect(audio.destination);
+      };
+      release = mine;
+      return () => {
+        if (release === mine) stop();
+      };
+    },
+    stop,
+    destroy: () => scope.dispose(),
+  };
+}

package/src/components/voice-dots/react.tsx

@@ -0,0 +1,52 @@
+'use client';
+import { useRef, type HTMLAttributes, type MutableRefObject } from 'react';
+import { useIsomorphicLayoutEffect } from '../../react/use-recipe';
+import { createVoiceDots, type VoiceDotsInstance, type VoiceDotsOptions } from './engine';
+
+export interface VoiceDotsProps extends HTMLAttributes<HTMLDivElement>, VoiceDotsOptions {
+  /** A microphone stream or a playing <audio>/<video> to follow. */
+  source?: MediaStream | HTMLMediaElement | null;
+  /** The voice's level, 0…1 (one or one per dot), when the app measures it. */
+  level?: number | number[];
+  instanceRef?: MutableRefObject<VoiceDotsInstance | null>;
+}
+
+/** <VoiceDots state={listening ? 'listening' : 'idle'} source={micStream} /> */
+export function VoiceDots({ state = 'idle', count, colorful, size, labels, source, level, instanceRef, className, ...props }: VoiceDotsProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const instance = useRef<VoiceDotsInstance | null>(null);
+  useIsomorphicLayoutEffect(() => {
+    const created = createVoiceDots(ref.current, { state, count, colorful, size, labels });
+    instance.current = created;
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      created.destroy();
+      instance.current = null;
+      if (instanceRef) instanceRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [count, colorful, size]);
+  useIsomorphicLayoutEffect(() => {
+    if (instance.current && instance.current.state !== state) instance.current.setState(state);
+  }, [state]);
+  useIsomorphicLayoutEffect(() => {
+    const dots = instance.current;
+    if (!dots || !source) return;
+    let stop: (() => void) | null = null;
+    let gone = false;
+    void dots.listen(source).then((done) => {
+      if (gone) done();
+      else stop = done;
+    }).catch((error: unknown) => {
+      if (!gone) ref.current?.dispatchEvent(new CustomEvent('mk:error', { bubbles: true, detail: { error } }));
+    });
+    return () => {
+      gone = true;
+      stop?.();
+    };
+  }, [source, count, colorful, size]);
+  useIsomorphicLayoutEffect(() => {
+    if (level !== undefined) instance.current?.setLevel(level);
+  }, [level]);
+  return <div {...props} ref={ref} className={['mk-voice-dots', className].filter(Boolean).join(' ')} />;
+}

package/src/components/voice-dots/voice-dots.css

@@ -0,0 +1,69 @@
+/* voice-dots — round dots in the text colour (or the chart colours) that stretch into pills with the voice.
+   The row is tall enough for the tallest pill, so the layout around it never moves. */
+.mk-voice-dots,
+mk-voice-dots {
+  --mk-voice-size: 12px;
+  --mk-voice-dot: var(--mk-text);
+  display: inline-grid;
+  place-items: center;
+  min-width: calc(var(--mk-voice-size) * 8);
+  height: calc(var(--mk-voice-size) * 4.6);
+}
+
+[data-mk-voice-row] {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--mk-voice-size) * 0.9);
+  height: 100%;
+}
+
+[data-mk-voice-dot] {
+  display: block;
+  width: var(--mk-voice-size);
+  height: var(--mk-voice-size);
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-voice-dot);
+  transition:
+    background-color 0.3s ease,
+    opacity 0.3s ease;
+  will-change: transform, height;
+}
+
+:is(.mk-voice-dots, mk-voice-dots)[data-mk-state='idle'] [data-mk-voice-dot] {
+  opacity: 0.55;
+}
+
+:is(.mk-voice-dots, mk-voice-dots)[data-mk-colorful] [data-mk-voice-dot='1'] {
+  --mk-voice-dot: var(--mk-chart-1, #2a78d6);
+}
+:is(.mk-voice-dots, mk-voice-dots)[data-mk-colorful] [data-mk-voice-dot='2'] {
+  --mk-voice-dot: var(--mk-chart-8, #e34948);
+}
+:is(.mk-voice-dots, mk-voice-dots)[data-mk-colorful] [data-mk-voice-dot='3'] {
+  --mk-voice-dot: var(--mk-chart-4, #eda100);
+}
+:is(.mk-voice-dots, mk-voice-dots)[data-mk-colorful] [data-mk-voice-dot='4'] {
+  --mk-voice-dot: var(--mk-chart-3, #1baf7a);
+}
+:is(.mk-voice-dots, mk-voice-dots)[data-mk-colorful] [data-mk-voice-dot='5'] {
+  --mk-voice-dot: var(--mk-chart-7, #6250d6);
+}
+:is(.mk-voice-dots, mk-voice-dots)[data-mk-colorful] [data-mk-voice-dot='6'] {
+  --mk-voice-dot: var(--mk-chart-2, #eb6834);
+}
+
+/* Without motion the state shows in the dots' colour. */
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-voice-dots, mk-voice-dots)[data-mk-state='listening'] [data-mk-voice-dot] {
+    --mk-voice-dot: var(--mk-accent);
+  }
+  :is(.mk-voice-dots, mk-voice-dots)[data-mk-state='thinking'] [data-mk-voice-dot] {
+    opacity: 0.75;
+  }
+}
+
+@media (forced-colors: active) {
+  [data-mk-voice-dot] {
+    background: CanvasText;
+  }
+}

package/src/elements/index.ts

@@ -66,6 +66,19 @@ import { MkSplitViewElement } from '../components/split-view/element';
 import { MkDataTableElement } from '../components/data-table/element';
 import { MkEditableTableElement } from '../components/editable-table/element';
 import { MkRichTextEditorElement } from '../components/rich-text-editor/element';
+import { MkSelectElement } from '../components/select/element';
+import { MkAddToCartElement } from '../components/add-to-cart/element';
+import { MkScrollIslandElement } from '../components/scroll-island/element';
+import { MkPillButtonElement } from '../components/pill-button/element';
+import { MkToolbarElement } from '../components/toolbar/element';
+import { MkBidirectionalSliderElement } from '../components/bidirectional-slider/element';
+import { MkVoiceDotsElement } from '../components/voice-dots/element';
+import { MkPieChartElement } from '../components/pie-chart/element';
+import { MkRadarChartElement } from '../components/radar-chart/element';
+import { MkRadialChartElement } from '../components/radial-chart/element';
+import { MkSankeyChartElement } from '../components/sankey-chart/element';
+import { MkHeatmapChartElement } from '../components/heatmap-chart/element';
+import { MkOrbitMenuElement } from '../components/orbit-menu/element';
 // new-component:imports (scripts/new-component.mjs inserts above this line)
 
 export { MkElement, SafeHTMLElement, defineElement, type OptionType } from './base';
@@ -137,6 +150,19 @@ export { MkSplitViewElement } from '../components/split-view/element';
 export { MkDataTableElement } from '../components/data-table/element';
 export { MkEditableTableElement } from '../components/editable-table/element';
 export { MkRichTextEditorElement } from '../components/rich-text-editor/element';
+export { MkSelectElement } from '../components/select/element';
+export { MkAddToCartElement } from '../components/add-to-cart/element';
+export { MkScrollIslandElement } from '../components/scroll-island/element';
+export { MkPillButtonElement } from '../components/pill-button/element';
+export { MkToolbarElement } from '../components/toolbar/element';
+export { MkBidirectionalSliderElement } from '../components/bidirectional-slider/element';
+export { MkVoiceDotsElement } from '../components/voice-dots/element';
+export { MkPieChartElement } from '../components/pie-chart/element';
+export { MkRadarChartElement } from '../components/radar-chart/element';
+export { MkRadialChartElement } from '../components/radial-chart/element';
+export { MkSankeyChartElement } from '../components/sankey-chart/element';
+export { MkHeatmapChartElement } from '../components/heatmap-chart/element';
+export { MkOrbitMenuElement } from '../components/orbit-menu/element';
 // new-component:exports
 
 /** Tag name → element class, for every component. */
@@ -208,6 +234,19 @@ export const ELEMENTS = {
   'mk-data-table': MkDataTableElement,
   'mk-editable-table': MkEditableTableElement,
   'mk-rich-text-editor': MkRichTextEditorElement,
+  'mk-select': MkSelectElement,
+  'mk-add-to-cart': MkAddToCartElement,
+  'mk-scroll-island': MkScrollIslandElement,
+  'mk-pill-button': MkPillButtonElement,
+  'mk-toolbar': MkToolbarElement,
+  'mk-bidirectional-slider': MkBidirectionalSliderElement,
+  'mk-voice-dots': MkVoiceDotsElement,
+  'mk-pie-chart': MkPieChartElement,
+  'mk-radar-chart': MkRadarChartElement,
+  'mk-radial-chart': MkRadialChartElement,
+  'mk-sankey-chart': MkSankeyChartElement,
+  'mk-heatmap-chart': MkHeatmapChartElement,
+  'mk-orbit-menu': MkOrbitMenuElement,
   // new-component:entries
 } as const;
 

package/src/index.ts

@@ -153,9 +153,12 @@ export {
   createNav,
   revealShell,
   NAV_STYLES,
+  NAV_STYLE_ALIASES,
+  toNavStyle,
   type NavOptions,
   type NavInstance,
   type NavStyle,
+  type NavStyleAlias,
   type NavigateDetail,
 } from './components/nav/engine';
 export { createSteps, type StepsOptions, type StepsInstance, type StepDetail } from './components/steps/engine';
@@ -272,3 +275,16 @@ export {
 } from './components/data-table/engine';
 export { createEditableTable, type EditableTableOptions, type EditableTableInstance, type EditableColumn, type RowChange, type EditorKind } from './components/editable-table/engine';
 export { createRichTextEditor, sanitizeHtml, type RichTextEditorOptions, type RichTextEditorInstance, type RichCommand } from './components/rich-text-editor/engine';
+export { createSelect, type SelectOptions, type SelectInstance, type SelectOption } from './components/select/engine';
+export { createAddToCart, type AddToCartOptions, type AddToCartInstance } from './components/add-to-cart/engine';
+export { createScrollIsland, type ScrollIslandOptions, type ScrollIslandInstance } from './components/scroll-island/engine';
+export { createPillButton, type PillButtonOptions, type PillButtonInstance } from './components/pill-button/engine';
+export { createToolbar, type ToolbarOptions, type ToolbarInstance } from './components/toolbar/engine';
+export { createBidirectionalSlider, type BidirectionalSliderOptions, type BidirectionalSliderInstance } from './components/bidirectional-slider/engine';
+export { createVoiceDots, type VoiceDotsOptions, type VoiceDotsInstance, type VoiceState } from './components/voice-dots/engine';
+export { createPieChart, type PieChartOptions, type PieChartInstance, type PieSlice } from './components/pie-chart/engine';
+export { createRadarChart, type RadarChartOptions, type RadarChartInstance, type RadarSeries } from './components/radar-chart/engine';
+export { createRadialChart, type RadialChartOptions, type RadialChartInstance, type RadialDatum } from './components/radial-chart/engine';
+export { createSankeyChart, type SankeyChartOptions, type SankeyChartInstance, type SankeyNode, type SankeyLink } from './components/sankey-chart/engine';
+export { createHeatmapChart, type HeatmapChartOptions, type HeatmapChartInstance, type HeatmapDatum } from './components/heatmap-chart/engine';
+export { createOrbitMenu, type OrbitMenuOptions, type OrbitMenuInstance } from './components/orbit-menu/engine';