@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/src/auto/auto-init.ts

@@ -0,0 +1,151 @@
+import { ScrollTrigger } from '../core/gsap';
+import { warnOnce, type Instance } from '../core/types';
+import { createSpringCards } from '../recipes/spring-cards/create-spring-cards';
+import { createCurvedCarousel } from '../recipes/curved-carousel/create-curved-carousel';
+import { createPile } from '../recipes/pile/create-pile';
+import { createWords } from '../recipes/words/create-words';
+import { createFlow } from '../recipes/flow/create-flow';
+import { createPop } from '../recipes/pop/create-pop';
+import { createFitText } from '../recipes/fit-text/create-fit-text';
+import { createStretchFooter } from '../recipes/stretch-footer/create-stretch-footer';
+import { createRadialMenu } from '../recipes/radial-menu/create-radial-menu';
+import { createTabs } from '../recipes/tabs/create-tabs';
+import { createCounter } from '../recipes/counter/create-counter';
+import { createDetails } from '../recipes/details/create-details';
+import { createReveal } from '../recipes/reveal/create-reveal';
+import { createReflow } from '../recipes/reflow/create-reflow';
+import { createSlotText } from '../recipes/slot-text/create-slot-text';
+import { createSortable } from '../recipes/sortable/create-sortable';
+import { createMaskText } from '../recipes/mask-text/create-mask-text';
+import { createCascade } from '../recipes/cascade/create-cascade';
+import { createTextRoll } from '../recipes/text-roll/create-text-roll';
+import { createLetters } from '../recipes/letters/create-letters';
+import { createParallax } from '../recipes/parallax/create-parallax';
+import { createDepthGrid } from '../recipes/depth-grid/create-depth-grid';
+import { createFrameZoom } from '../recipes/frame-zoom/create-frame-zoom';
+import { createContrast } from '../recipes/contrast/create-contrast';
+import { createMarquee } from '../recipes/marquee/create-marquee';
+import { createCardDock } from '../recipes/card-dock/create-card-dock';
+import { createSnapStrip } from '../recipes/snap-strip/create-snap-strip';
+import { createFillText } from '../recipes/fill-text/create-fill-text';
+import { parseOptions } from './parse-options';
+import { createTicketMenu } from '../recipes/ticket-menu/create-ticket-menu';
+import { createInfiniteReel } from '../recipes/infinite-reel/create-infinite-reel';
+import { createRepelBento } from '../recipes/repel-bento/create-repel-bento';
+import { createRotator } from '../recipes/rotator/create-rotator';
+import { createDragRuler } from '../recipes/drag-ruler/create-drag-ruler';
+import { createDockPill } from '../recipes/dock-pill/create-dock-pill';
+
+type Factory = (el: HTMLElement, options: Record<string, unknown>) => Instance;
+
+const factories = {
+  'spring-cards': createSpringCards,
+  'curved-carousel': (el, options) =>
+    createCurvedCarousel(el, {
+      ...options,
+      onSelect: (index, slide) => el.dispatchEvent(new CustomEvent('mk:select', { detail: { index, slide }, bubbles: true })),
+    }),
+  pile: createPile,
+  words: createWords,
+  flow: createFlow,
+  pop: createPop,
+  'fit-text': createFitText,
+  'stretch-footer': createStretchFooter,
+  'radial-menu': createRadialMenu,
+  tabs: createTabs,
+  counter: createCounter,
+  details: (el) => createDetails(el),
+  reveal: createReveal,
+  reflow: createReflow,
+  'slot-text': createSlotText,
+  sortable: createSortable,
+  'mask-text': createMaskText,
+  cascade: createCascade,
+  'text-roll': createTextRoll,
+  letters: createLetters,
+  parallax: createParallax,
+  'depth-grid': createDepthGrid,
+  'frame-zoom': createFrameZoom,
+  contrast: createContrast,
+  marquee: createMarquee,
+  'card-dock': createCardDock,
+  'snap-strip': createSnapStrip,
+  'fill-text': createFillText,
+  'ticket-menu': createTicketMenu,
+  'infinite-reel': createInfiniteReel,
+  'repel-bento': createRepelBento,
+  'rotator': createRotator,
+  'drag-ruler': createDragRuler,
+  'dock-pill': createDockPill,
+} satisfies Record<string, Factory>;
+
+export type RecipeName = keyof typeof factories;
+export const recipeNames = Object.keys(factories) as RecipeName[];
+
+/** Measured text: wait for web fonts, fit before splitting into words. */
+const AFTER_FONTS: RecipeName[] = ['fit-text', 'words', 'slot-text'];
+
+const instances = new WeakMap<HTMLElement, Map<RecipeName, Instance>>();
+
+export interface AutoInitOptions {
+  /** Only start these recipes. */
+  only?: RecipeName[];
+}
+
+/**
+ * Start every `[data-mk]` recipe inside `root` (an element may list several:
+ * `data-mk="fit-text words"`). Options come from `data-mk-*` attributes.
+ * Returns a function that destroys what this call created. Safe to call again:
+ * elements that already run a recipe are skipped.
+ */
+export function autoInit(root: ParentNode = document, { only }: AutoInitOptions = {}): () => void {
+  if (typeof window === 'undefined') return () => {};
+  const created: Array<[HTMLElement, RecipeName, Instance]> = [];
+  let cancelled = false;
+
+  const elements = [...root.querySelectorAll<HTMLElement>('[data-mk]')];
+  if (root instanceof HTMLElement && root.matches('[data-mk]')) elements.unshift(root);
+
+  const start = (el: HTMLElement, name: RecipeName) => {
+    if (cancelled) return;
+    const running = instances.get(el) ?? new Map<RecipeName, Instance>();
+    if (running.has(name)) return;
+    const instance = (factories[name] as Factory)(el, parseOptions(el));
+    running.set(name, instance);
+    instances.set(el, running);
+    created.push([el, name, instance]);
+  };
+
+  const now: Array<[HTMLElement, RecipeName]> = [];
+  const later: Array<[HTMLElement, RecipeName]> = [];
+  for (const el of elements) {
+    for (const raw of (el.dataset.mk ?? '').split(/\s+/).filter(Boolean)) {
+      if (!(raw in factories)) {
+        warnOnce(`autoInit: unknown recipe "${raw}" (known: ${recipeNames.join(', ')})`);
+        continue;
+      }
+      const name = raw as RecipeName;
+      if (only && !only.includes(name)) continue;
+      (AFTER_FONTS.includes(name) ? later : now).push([el, name]);
+    }
+  }
+
+  now.forEach(([el, name]) => start(el, name));
+  if (later.length) {
+    later.sort((a, b) => AFTER_FONTS.indexOf(a[1]) - AFTER_FONTS.indexOf(b[1]));
+    const fonts = document.fonts?.ready ?? Promise.resolve();
+    void Promise.race([fonts, new Promise((resolve) => setTimeout(resolve, 1500))]).then(() => {
+      later.forEach(([el, name]) => start(el, name));
+      if (!cancelled) ScrollTrigger.refresh();
+    });
+  }
+
+  return () => {
+    cancelled = true;
+    for (const [el, name, instance] of created.reverse()) {
+      instance.destroy();
+      instances.get(el)?.delete(name);
+    }
+    created.length = 0;
+  };
+}

package/src/auto/index.ts

@@ -0,0 +1,3 @@
+export { autoInit, recipeNames, type AutoInitOptions, type RecipeName } from './auto-init';
+export { parseOptions } from './parse-options';
+export { MK_HEAD_SCRIPT } from '../core/reduced';

package/src/auto/parse-options.ts

@@ -0,0 +1,68 @@
+/** Attributes the recipes write themselves or use for children; never options. */
+const RESERVED = new Set([
+  '',
+  'ready',
+  'inview',
+  'carousel',
+  'open',
+  'card',
+  'slide',
+  'toggle',
+  'item',
+  'phantom',
+  'footerTitle',
+  'tab',
+  'indicator',
+  'chevron',
+  'text',
+  'role',
+  'motion',
+  'veil',
+  'swatch',
+  'part',
+  'sorting',
+  'sortableGroup',
+  'sortableLocked',
+  'cascade',
+  'on',
+  'tone',
+  'cursorZone',
+  'hidden',
+  'pressed',
+  'parallaxTarget',
+  'spread',
+  'expanded',
+  'settled',
+  'mode',
+  'active',
+  'islandToggle',
+  'islandPanel',
+  'islandItem',
+  'islandClose',
+  'reelTrack',
+  'reelCopy',
+  'dragging',
+  'dockItem',
+]);
+
+const coerce = (value: string): unknown => {
+  if (value === '' || value === 'true') return true;
+  if (value === 'false') return false;
+  if (/^-?\d*\.?\d+$/.test(value)) return Number(value);
+  return value;
+};
+
+/**
+ * `data-mk-<option>` attributes → options object.
+ * `data-mk-throw-boost="2.5"` → `{ throwBoost: 2.5 }`, `data-mk-trigger="load"` → `{ trigger: 'load' }`.
+ */
+export function parseOptions(el: HTMLElement): Record<string, unknown> {
+  const options: Record<string, unknown> = {};
+  for (const [key, raw] of Object.entries(el.dataset)) {
+    if (!key.startsWith('mk') || key.length === 2) continue;
+    const name = key.charAt(2).toLowerCase() + key.slice(3);
+    if (RESERVED.has(name)) continue;
+    options[name] = coerce(raw ?? '');
+  }
+  return options;
+}

package/src/components/chat/README.md

@@ -0,0 +1,90 @@
+# chat
+
+El chat de Stepbro (PrettyChat): burbujas de cristal sobre el fondo vivo, desvanecido de 64 px abajo, composer de 64 px que crece con el texto.
+
+- **Mensaje nuevo:** la burbuja crece desde el lado de quien habla (`scale .5 → 1`, blur 24 px, 0.7 s curva firma, 60 ms entre burbujas) y sus palabras suben (16 px, blur 6, 0.25 s, 50 ms, `back.out`). La conversación baja al último (0.35 s).
+- **Pensando:** `pending()` muestra "Pensando…" solo si la respuesta tarda más de 500 ms (con brillo que barre en 1.1 s). La respuesta se transforma desde ese hueco (Flip 0.7 s, sin escalar el texto) mientras sus palabras suben.
+- **Composer:** crece/encoge con el texto (0.18 s, `power2.out`, desde 64 px). Enter envía, Shift+Enter salta de línea.
+- **Confirmación:** una barra entra con flow y sus palabras suben (100 ms entre palabras).
+- **Grabando:** el botón de micrófono pulsa (1.5 s).
+
+Origen: Stepbro `pretty-chat`, `chat-message-enter`, `chat-pending-to-reply`, `chat-composer-resize`, `chat-confirm` (kit Money).
+
+## HTML / Astro
+
+```html
+<div style="height: 520px">
+  <mk-chat background mic placeholder="Escribe un mensaje...">
+    <div data-mk-message data-mk-role="assistant"><span data-mk-text>Hola, ¿qué hacemos hoy?</span></div>
+  </mk-chat>
+</div>
+
+<script>
+  import { defineElements } from '@yewdiel21/motion-kit/elements';
+  defineElements(['mk-chat']);
+  const chat = document.querySelector('mk-chat');
+  chat.addEventListener('mk:send', async (event) => {
+    chat.add('user', event.detail.text);
+    chat.pending();
+    const answer = await miApi(event.detail.text);
+    chat.reply(answer);
+  });
+</script>
+```
+
+Vacío, `<mk-chat>` construye la lista y el composer; los `[data-mk-message]` hijos pasan a la lista como historial (quietos, salvo `animate-existing`). Con tu propio marcado: `[data-mk-part="messages"]`, `[data-mk-part="composer"]` (un `<form>`), `[data-mk-part="input"]`, `[data-mk-part="send"]`, `[data-mk-part="mic"]`; y `createChat(root, opciones)`.
+
+## React
+
+```tsx
+const [messages, setMessages] = useState<{ id: string; role: 'user' | 'assistant'; text: string }[]>([]);
+const [pending, setPending] = useState(false);
+
+<div style={{ height: 520 }}>
+  <Chat.Root
+    onSend={async (text) => {
+      setMessages((m) => [...m, { id: crypto.randomUUID(), role: 'user', text }]);
+      setPending(true);
+      const answer = await miApi(text);
+      setMessages((m) => [...m, { id: crypto.randomUUID(), role: 'assistant', text: answer }]);
+      setPending(false); // en el mismo render que el mensaje: así se transforma desde "Pensando…"
+    }}
+  >
+    <ChatBackground />
+    <Chat.Messages pending={pending}>
+      {messages.map((m) => (
+        <Chat.Message key={m.id} role={m.role}>{m.text}</Chat.Message>
+      ))}
+    </Chat.Messages>
+    <Chat.Composer />
+  </Chat.Root>
+</div>
+```
+
+`useChat()` (dentro de `Chat.Root`) da el motor: `setRecording(on)`, `scrollToLatest()`. `<Chat.Confirm>` anima al montarse.
+
+## API
+
+`createChat(root, { animateExisting, clearOnSend, labels: { thinking }, onSend })` →
+
+| Método | Qué hace |
+|---|---|
+| `add(role, texto)` | Añade un mensaje de texto (entra solo) |
+| `pending()` | "Pensando…" a los 500 ms |
+| `reply(el \| texto)` | La respuesta: se transforma desde "Pensando…" o entra normal |
+| `confirm(barra)` | Barra de confirmación con flow + palabras |
+| `setRecording(on)` | Pulso en `[data-mk-part="mic"]` |
+| `scrollToLatest()` | Baja al último mensaje |
+| `adopt(el)` | Marca un mensaje como ya animado (para frameworks) |
+
+Cualquier `[data-mk-message]` que entre en la lista (tuyo, de un framework o de `add`) se anima solo. Evento `mk:send` (`detail.text`, cancelable) antes de `onSend`.
+
+Para otros frameworks: `capturePending(placeholder)` antes de cambiar el DOM y `morphPendingToReply(estado, respuesta, lista)` después.
+
+## Variables CSS
+
+`--mk-chat-radius` (40px), `--mk-chat-bubble-radius` (32px), `--mk-chat-user-bg`, `--mk-chat-user-fg`, `--mk-chat-assistant-bg`, `--mk-chat-assistant-fg`.
+
+## Accesibilidad
+
+La lista es `role="log"` con `aria-live="polite"`. El textarea y los botones tienen nombre (placeholder, "Enviar", "Micrófono"). Con movimiento reducido los mensajes aparecen sin animar y el brillo y el pulso se paran.

package/src/components/chat/chat.css

@@ -0,0 +1,236 @@
+/* chat — Stepbro's PrettyChat: glass bubbles over the live background, a soft fade at the bottom, a 64 px composer. */
+.mk-chat,
+mk-chat {
+  --mk-chat-radius: var(--mk-radius-2xl);
+  --mk-chat-bubble-radius: var(--mk-radius-bubble);
+  --mk-chat-user-bg: color-mix(in srgb, var(--md-sys-color-on-background) 62%, transparent);
+  --mk-chat-user-fg: var(--md-sys-color-background);
+  --mk-chat-assistant-bg: color-mix(in srgb, var(--md-sys-color-background) 58%, transparent);
+  --mk-chat-assistant-fg: var(--md-sys-color-on-surface);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  border-radius: var(--mk-chat-radius);
+  color: var(--mk-text);
+  font-family: var(--mk-font);
+}
+
+.mk-chat > .mk-chat-background,
+mk-chat > .mk-chat-background,
+mk-chat > mk-chat-background {
+  z-index: 0;
+}
+
+:is(.mk-chat, mk-chat) [data-mk-part='messages'] {
+  --mk-chat-fade: 64px;
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 0;
+  padding: 16px 16px 80px;
+  overflow-y: auto;
+  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--mk-chat-fade)), transparent 100%);
+  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--mk-chat-fade)), transparent 100%);
+  overscroll-behavior: contain;
+}
+
+:is(.mk-chat, mk-chat) [data-mk-message] {
+  position: relative;
+  z-index: 10;
+  display: block;
+  flex: 0 0 auto;
+  width: fit-content;
+  max-width: 80%;
+  padding: 16px 24px;
+  overflow: hidden;
+  border-radius: var(--mk-chat-bubble-radius);
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.3;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+:is(.mk-chat, mk-chat) [data-mk-message][data-mk-role='user'] {
+  align-self: flex-end;
+  background: var(--mk-chat-user-bg);
+  color: var(--mk-chat-user-fg);
+  -webkit-backdrop-filter: blur(16px);
+  backdrop-filter: blur(16px);
+}
+
+:is(.mk-chat, mk-chat) [data-mk-message][data-mk-role='assistant'] {
+  align-self: flex-start;
+  background: var(--mk-chat-assistant-bg);
+  color: var(--mk-chat-assistant-fg);
+  -webkit-backdrop-filter: blur(16px);
+  backdrop-filter: blur(16px);
+}
+
+:is(.mk-chat, mk-chat) [data-mk-message][data-mk-role='system'] {
+  align-self: center;
+  max-width: 90%;
+  padding: 8px 16px;
+  background: none;
+  color: color-mix(in srgb, var(--md-sys-color-on-background) 62%, transparent);
+  font-size: 14px;
+  text-align: center;
+}
+
+@media (max-width: 679px) {
+  :is(.mk-chat, mk-chat) [data-mk-message][data-mk-role='assistant'] {
+    max-width: 100%;
+  }
+}
+
+:is(.mk-chat, mk-chat) [data-mk-text] {
+  display: block;
+  white-space: pre-wrap;
+}
+
+:is(.mk-chat, mk-chat) .mk-split-word {
+  white-space: pre;
+}
+
+/* The thinking placeholder and its glow sweep (1.1 s). */
+:is(.mk-chat, mk-chat) [data-mk-pending] {
+  position: relative;
+}
+
+:is(.mk-chat, mk-chat) [data-mk-pending]::after {
+  position: absolute;
+  inset: 0 auto 0 0;
+  z-index: 2;
+  width: 50%;
+  background: radial-gradient(ellipse at center, var(--md-sys-color-background), transparent 70%);
+  content: '';
+  animation: mk-chat-glow 1.1s ease-in-out infinite;
+}
+
+.mk-chat__thinking {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+@keyframes mk-chat-glow {
+  from {
+    transform: translate(-100%);
+  }
+
+  to {
+    transform: translate(200%);
+  }
+}
+
+/* Composer: the textarea grows from 64 px; round 64 px buttons. */
+:is(.mk-chat, mk-chat) [data-mk-part='composer'] {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  margin: 0;
+  padding: 8px;
+}
+
+:is(.mk-chat, mk-chat) [data-mk-part='input'],
+:is(.mk-chat, mk-chat) [data-mk-part='composer'] textarea {
+  flex: 1;
+  min-width: 0;
+  min-height: 64px;
+  max-height: 40vh;
+  margin: 0;
+  padding: 18px 16px;
+  overflow: hidden;
+  box-sizing: border-box;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 24px;
+  line-height: 1.3;
+  resize: none;
+  outline: none;
+}
+
+:is(.mk-chat, mk-chat) [data-mk-part='input']::placeholder {
+  color: var(--md-sys-color-on-background);
+  opacity: 0.5;
+}
+
+:is(.mk-chat, mk-chat) [data-mk-part='buttons'] {
+  display: flex;
+  gap: 8px;
+}
+
+:is(.mk-chat, mk-chat) :is([data-mk-part='mic'], [data-mk-part='send']) {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 64px;
+  height: 64px;
+  padding: 0;
+  border: 0;
+  border-radius: 32px;
+  background: color-mix(in srgb, var(--md-sys-color-background) 40%, transparent);
+  color: inherit;
+  cursor: pointer;
+  -webkit-backdrop-filter: blur(16px);
+  backdrop-filter: blur(16px);
+}
+
+:is(.mk-chat, mk-chat) :is([data-mk-part='mic'], [data-mk-part='send']):disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+:is(.mk-chat, mk-chat) :is([data-mk-part='mic'], [data-mk-part='send']):focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+:is(.mk-chat, mk-chat) [data-mk-recording] {
+  background: color-mix(in srgb, var(--md-sys-color-error) 50%, transparent);
+  animation: mk-chat-recording 1.5s ease-in-out infinite;
+}
+
+@keyframes mk-chat-recording {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.6;
+  }
+}
+
+/* A confirmation bar above the composer. */
+:is(.mk-chat, mk-chat) [data-mk-part='confirm'] {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin: 0 16px 8px;
+  padding: 12px 16px;
+  border-radius: var(--mk-radius-lg);
+  background: var(--mk-chat-assistant-bg);
+  -webkit-backdrop-filter: blur(16px);
+  backdrop-filter: blur(16px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-chat, mk-chat) [data-mk-pending]::after,
+  :is(.mk-chat, mk-chat) [data-mk-recording] {
+    animation: none;
+  }
+}

package/src/components/chat/element.ts

@@ -0,0 +1,98 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import type { Instance } from '../../core/types';
+import { iconSvg } from '../icons';
+import { defineChatBackground } from '../chat-background/element';
+import { createChat, type ChatInstance, type ChatRole } from './engine';
+
+/**
+ * <mk-chat placeholder="Escribe un mensaje..." [background] [mic] [animate-existing]>
+ *   (optional) your own [data-mk-part="messages"] / composer markup
+ * </mk-chat>
+ * Empty, it builds the messages list and the composer. Listen to `mk:send`
+ * (detail.text) and answer with `element.reply(text)` after `element.pending()`.
+ */
+export class MkChatElement extends MkElement<Instance> {
+  static options: Record<string, OptionType> = {
+    placeholder: 'string',
+    background: 'boolean',
+    mic: 'boolean',
+    animateExisting: 'boolean',
+    thinking: 'string',
+  };
+
+  chat: ChatInstance | null = null;
+
+  protected create(options: Record<string, unknown>): Instance {
+    const made: Element[] = [];
+    if (!this.querySelector('[data-mk-part="messages"]')) {
+      if (options.background && !this.querySelector('.mk-chat-background, mk-chat-background')) {
+        defineChatBackground();
+        const background = document.createElement('mk-chat-background');
+        this.prepend(background);
+        made.push(background);
+      }
+      const messages = document.createElement('div');
+      messages.dataset.mkPart = 'messages';
+      // Messages written inside the element (history) move into the list.
+      messages.append(...[...this.children].filter((child) => child.matches('[data-mk-message]')));
+      const composer = document.createElement('form');
+      composer.dataset.mkPart = 'composer';
+      const input = document.createElement('textarea');
+      input.dataset.mkPart = 'input';
+      input.rows = 1;
+      input.placeholder = (options.placeholder as string | undefined) ?? 'Escribe un mensaje...';
+      input.setAttribute('aria-label', input.placeholder);
+      const buttons = document.createElement('div');
+      buttons.dataset.mkPart = 'buttons';
+      if (options.mic) {
+        const mic = document.createElement('button');
+        mic.type = 'button';
+        mic.dataset.mkPart = 'mic';
+        mic.setAttribute('aria-label', 'Micrófono');
+        mic.innerHTML = iconSvg('mic', 22);
+        buttons.append(mic);
+      }
+      const send = document.createElement('button');
+      send.type = 'submit';
+      send.dataset.mkPart = 'send';
+      send.setAttribute('aria-label', 'Enviar');
+      send.innerHTML = iconSvg('send', 22);
+      buttons.append(send);
+      composer.append(input, buttons);
+      this.append(messages, composer);
+      made.push(messages, composer);
+    }
+    const chat = createChat(this, {
+      animateExisting: Boolean(options.animateExisting),
+      labels: { thinking: options.thinking as string | undefined },
+    });
+    this.chat = chat;
+    return {
+      destroy: () => {
+        chat.destroy();
+        const messages = made.find((node) => node instanceof HTMLElement && node.dataset.mkPart === 'messages');
+        if (messages) this.append(...[...messages.children]);
+        for (const node of made) node.remove();
+        this.chat = null;
+      },
+    };
+  }
+
+  add(role: ChatRole, text: string) {
+    return this.chat?.add(role, text);
+  }
+
+  pending() {
+    this.chat?.pending();
+  }
+
+  reply(message: HTMLElement | string) {
+    return this.chat?.reply(message);
+  }
+
+  setRecording(on: boolean) {
+    this.chat?.setRecording(on);
+  }
+}
+
+export const defineChat = () => defineElement('mk-chat', MkChatElement);