@yewdiel21/motion-kit 0.9.0 → 0.10.0

package/src/components/calendar/engine.ts

@@ -0,0 +1,412 @@
+import { gsap, registerMotion } from '../../core/gsap';
+import { reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+import {
+  addDays, addMonths, capitalize, clampFirstDay, dayKey, monthWeeks, safeFormat, sameDay, sameMonth,
+  fromJson, startOfWeek, toDate, toDateTime, weekDays, weekdayNames, type DateInput,
+} from '../../core/dates';
+import { flowIn } from '../../motion/flow';
+
+/*
+ * Calendar (Melon Mind, section-calendar-test): month and week grids with
+ * event chips. Motion from the reference: on first load the day cells flow in
+ * (search-result-item-in: y −20, blur 16, .5 s) 5 ms apart and the events
+ * 20 ms apart (CalendarComponent eventsSet → flowChilds). Changing month or
+ * week slides the grid like Melon Mind's time slots: out −30 px / in +30 px,
+ * .25 s ease-out (schedulePicker.css view transitions); the old grid leaves
+ * first (.12 s) so two dense months never overlap. Keyboard: an ARIA grid
+ * with a roving day button.
+ */
+
+export type CalendarView = 'month' | 'week';
+export type CalendarEventStatus = 'pending' | 'done' | 'cancelled';
+
+export interface CalendarEvent {
+  id: string | number;
+  title: string;
+  start: DateInput;
+  end?: DateInput;
+  allDay?: boolean;
+  status?: CalendarEventStatus;
+  /** Any CSS colour for the chip. */
+  color?: string;
+}
+
+export interface CalendarRange { start: Date; end: Date; view: CalendarView }
+
+export interface CalendarLabels {
+  more?: (count: number) => string;
+  events?: (count: number) => string;
+  status?: Partial<Record<CalendarEventStatus, string>>;
+}
+
+export interface CalendarOptions {
+  /** Date the calendar opens on. */
+  date?: DateInput;
+  view?: CalendarView;
+  /** 0 = Sunday … 6 = Saturday. */
+  firstDay?: number;
+  locale?: string;
+  events?: CalendarEvent[];
+  /** Chips per day in the month view before "+N". */
+  maxEvents?: number;
+  selected?: DateInput | null;
+  /** Override "today" (tests, demos in another zone). */
+  today?: DateInput;
+  labels?: CalendarLabels;
+  onSelect?: (date: Date) => void;
+  onEventClick?: (event: CalendarEvent) => void;
+  onNavigate?: (range: CalendarRange) => void;
+}
+
+export interface CalendarInstance extends Instance {
+  next(): void;
+  prev(): void;
+  goToday(): void;
+  setDate(date: DateInput): void;
+  setView(view: CalendarView): void;
+  setEvents(events: CalendarEvent[]): void;
+  select(date: DateInput | null, notify?: boolean): void;
+  readonly date: Date;
+  readonly view: CalendarView;
+  readonly selected: Date | null;
+  readonly range: CalendarRange;
+}
+
+const SLIDE = 30;
+const SLIDE_OUT = 0.12;
+const SLIDE_GAP = 0.1;
+const SLIDE_DURATION = 0.25;
+const CELL_STAGGER = 0.005;
+const EVENT_STAGGER = 0.02;
+
+export function createCalendar(root: HTMLElement | null, options: CalendarOptions = {}): CalendarInstance {
+  const grid = root?.querySelector<HTMLElement>('[data-mk-calendar-grid]');
+  if (!root || !grid) {
+    const now = toDate(null);
+    return inert({
+      next() {}, prev() {}, goToday() {}, setDate() {}, setView() {}, setEvents() {}, select() {},
+      date: now, view: 'month' as CalendarView, selected: null, range: { start: now, end: now, view: 'month' as CalendarView },
+    });
+  }
+  registerMotion();
+  const scope = createScope();
+  const ctx = gsap.context(() => {});
+  scope.add(() => ctx.revert());
+  const locale = options.locale ?? 'es';
+  const firstDay = clampFirstDay(options.firstDay);
+  const maxEvents = Number.isFinite(options.maxEvents) ? Math.max(0, Math.floor(options.maxEvents!)) : 3;
+  const labels = {
+    more: options.labels?.more ?? ((n: number) => `+${n} más`),
+    events: options.labels?.events ?? ((n: number) => (n === 1 ? '1 evento' : `${n} eventos`)),
+    status: { pending: 'pendiente', done: 'completado', cancelled: 'cancelado', ...options.labels?.status },
+  };
+  let date = toDate(options.date);
+  let view: CalendarView = options.view === 'week' ? 'week' : 'month';
+  let selected: Date | null = options.selected ? toDate(options.selected) : null;
+  let focusDay: Date = selected ?? date;
+  let events: CalendarEvent[] = [];
+  let byDay = new Map<string, CalendarEvent[]>();
+  let first = true;
+  const today = () => toDate(options.today ?? null);
+
+  const title = root.querySelector<HTMLElement>('[data-mk-calendar-title]');
+  const prevButton = root.querySelector<HTMLButtonElement>('[data-mk-calendar-prev]');
+  const nextButton = root.querySelector<HTMLButtonElement>('[data-mk-calendar-next]');
+  const todayButton = root.querySelector<HTMLButtonElement>('[data-mk-calendar-today]');
+  const viewButtons = [...root.querySelectorAll<HTMLButtonElement>('[data-mk-calendar-view]')];
+
+  const originalGrid = [...grid.childNodes];
+  const originalTitle = title ? [...title.childNodes] : [];
+  scope.add(() => {
+    grid.replaceChildren(...originalGrid);
+    title?.replaceChildren(...originalTitle);
+  });
+  scope.attr(root, 'data-mk-ready', '');
+  scope.attr(grid, 'role', 'grid');
+  if (title) {
+    if (!title.id) scope.attr(title, 'id', `mk-calendar-${Math.random().toString(36).slice(2, 8)}`);
+    scope.attr(grid, 'aria-labelledby', title.id);
+  }
+
+  const monthTitle = safeFormat(locale, { month: 'long', year: 'numeric' });
+  const rangeTitle = safeFormat(locale, { day: 'numeric', month: 'short', year: 'numeric' });
+  const fullDay = safeFormat(locale, { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
+  const timeFormat = safeFormat(locale, { hour: 'numeric', minute: '2-digit' });
+
+  const index = (list: CalendarEvent[]) => {
+    events = Array.isArray(list) ? list.filter((e) => e && toDateTime(e.start)) : [];
+    byDay = new Map();
+    const sorted = [...events].sort((a, b) => toDateTime(a.start)!.getTime() - toDateTime(b.start)!.getTime());
+    for (const event of sorted) {
+      const start = toDate(toDateTime(event.start)!);
+      const endTime = event.end ? toDateTime(event.end) : null;
+      const end = endTime && endTime > start ? toDate(endTime) : start;
+      // Multi-day events show on every day they cover (at most two months).
+      for (let day = start, n = 0; day <= end && n < 62; day = addDays(day, 1), n++) {
+        const key = dayKey(day);
+        byDay.set(key, [...(byDay.get(key) ?? []), event]);
+      }
+    }
+  };
+  index(fromJson<CalendarEvent[]>(options.events) ?? []);
+
+  const days = () => (view === 'week' ? [weekDays(date, firstDay)] : monthWeeks(date, firstDay));
+  const range = (): CalendarRange => {
+    const weeks = days();
+    return { start: weeks[0][0], end: weeks[weeks.length - 1][6], view };
+  };
+  const inRange = (day: Date) => {
+    const r = range();
+    return day >= r.start && day <= r.end;
+  };
+
+  const header = () => {
+    const row = document.createElement('div');
+    row.className = 'mk-calendar__head';
+    row.setAttribute('role', 'row');
+    const long = weekdayNames(locale, firstDay, 'short');
+    const narrow = weekdayNames(locale, firstDay, 'narrow');
+    long.forEach((name, i) => {
+      const cell = document.createElement('div');
+      cell.className = 'mk-calendar__weekday';
+      cell.setAttribute('role', 'columnheader');
+      cell.innerHTML = '<span class="mk-calendar__weekday-long"></span><span class="mk-calendar__weekday-narrow" aria-hidden="true"></span>';
+      cell.firstElementChild!.textContent = name;
+      cell.lastElementChild!.textContent = narrow[i];
+      row.append(cell);
+    });
+    return row;
+  };
+
+  const chip = (event: CalendarEvent) => {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'mk-calendar__event';
+    button.dataset.mkEvent = String(event.id);
+    const status = event.status ?? 'pending';
+    button.dataset.state = status;
+    if (event.color) button.style.setProperty('--mk-calendar-event-color', event.color);
+    const start = toDateTime(event.start)!;
+    const time = event.allDay ? '' : timeFormat.format(start);
+    button.innerHTML = '<span class="mk-calendar__status" aria-hidden="true"></span><span class="mk-calendar__event-title"></span><span class="mk-calendar__event-time"></span>';
+    button.children[1].textContent = event.title;
+    button.children[2].textContent = time;
+    button.setAttribute('aria-label', [event.title, time, labels.status[status]].filter(Boolean).join(', '));
+    return button;
+  };
+
+  const body = () => {
+    const wrap = document.createElement('div');
+    wrap.className = 'mk-calendar__body';
+    wrap.dataset.view = view;
+    wrap.setAttribute('role', 'rowgroup');
+    const now = today();
+    const focusKey = dayKey(focusDay);
+    for (const week of days()) {
+      const row = document.createElement('div');
+      row.className = 'mk-calendar__week';
+      row.setAttribute('role', 'row');
+      for (const day of week) {
+        const key = dayKey(day);
+        const cell = document.createElement('div');
+        cell.className = 'mk-calendar__day';
+        cell.setAttribute('role', 'gridcell');
+        cell.dataset.mkDate = key;
+        if (view === 'month' && !sameMonth(day, date)) cell.dataset.outside = '';
+        if (sameDay(day, now)) cell.dataset.today = '';
+        const isSelected = sameDay(day, selected);
+        cell.setAttribute('aria-selected', String(isSelected));
+        const list = byDay.get(key) ?? [];
+        const number = document.createElement('button');
+        number.type = 'button';
+        number.className = 'mk-calendar__number';
+        number.dataset.mkDay = key;
+        number.textContent = view === 'week' ? `${day.getDate()}` : String(day.getDate());
+        number.tabIndex = key === focusKey ? 0 : -1;
+        number.setAttribute('aria-label', `${capitalize(fullDay.format(day))}${list.length ? `, ${labels.events(list.length)}` : ''}`);
+        if (sameDay(day, now)) number.setAttribute('aria-current', 'date');
+        cell.append(number);
+        if (list.length) {
+          const box = document.createElement('div');
+          box.className = 'mk-calendar__events';
+          const shown = view === 'week' ? list : list.slice(0, maxEvents);
+          for (const event of shown) box.append(chip(event));
+          if (shown.length < list.length) {
+            const more = document.createElement('button');
+            more.type = 'button';
+            more.className = 'mk-calendar__more';
+            more.dataset.mkMore = key;
+            more.textContent = labels.more(list.length - shown.length);
+            box.append(more);
+          }
+          cell.append(box);
+        }
+        row.append(cell);
+      }
+      wrap.append(row);
+    }
+    return wrap;
+  };
+
+  let current: HTMLElement | null = null;
+  const leaving = new Set<HTMLElement>();
+  scope.add(() => leaving.forEach((el) => el.remove()));
+
+  const syncChrome = () => {
+    if (title) {
+      const r = range();
+      let text = capitalize(monthTitle.format(date));
+      if (view === 'week') {
+        const format = rangeTitle as Intl.DateTimeFormat & { formatRange?: (a: Date, b: Date) => string };
+        text = format.formatRange ? format.formatRange(r.start, r.end) : `${rangeTitle.format(r.start)} – ${rangeTitle.format(r.end)}`;
+      }
+      title.textContent = text;
+    }
+    for (const button of viewButtons) {
+      scope.attr(button, 'aria-pressed', String(button.dataset.mkCalendarView === view));
+    }
+  };
+
+  const render = (direction: number) => {
+    const next = body();
+    const motion = !reduced();
+    if (!current) {
+      grid.replaceChildren(header(), next);
+    } else if (motion && direction !== 0) {
+      const old = current;
+      old.style.top = `${old.offsetTop}px`;
+      old.classList.add('mk-calendar__body--leaving');
+      old.setAttribute('aria-hidden', 'true');
+      old.querySelectorAll('button').forEach((b) => (b.tabIndex = -1));
+      leaving.add(old);
+      grid.append(next);
+      ctx.add(() => {
+        // Out, then in: two dense month grids crossfading read as noise.
+        gsap.to(old, { x: -SLIDE * direction, opacity: 0, duration: SLIDE_OUT, ease: 'power1.in', onComplete: () => { old.remove(); leaving.delete(old); } });
+        gsap.fromTo(next, { x: SLIDE * direction, opacity: 0 }, { x: 0, opacity: 1, duration: SLIDE_DURATION, delay: SLIDE_GAP, ease: 'power2.out', clearProps: 'transform,opacity' });
+      });
+    } else {
+      current.replaceWith(next);
+    }
+    current = next;
+    syncChrome();
+    if (motion) {
+      ctx.add(() => {
+        if (first) flowIn(next, { target: '.mk-calendar__day', stagger: CELL_STAGGER });
+        flowIn(next, { target: '.mk-calendar__event, .mk-calendar__more', stagger: EVENT_STAGGER, delay: first ? 0.1 : direction ? SLIDE_GAP + SLIDE_DURATION * 0.5 : 0 });
+      });
+    }
+    first = false;
+  };
+
+  const focusButton = () => grid.querySelector<HTMLButtonElement>(`.mk-calendar__body:not(.mk-calendar__body--leaving) [data-mk-day="${dayKey(focusDay)}"]`);
+  const navigate = (to: Date, focus = false) => {
+    if (scope.disposed) return;
+    const from = date;
+    const moved = view === 'week' ? !sameDay(startOfWeek(to, firstDay), startOfWeek(from, firstDay)) : !sameMonth(to, from);
+    date = to;
+    focusDay = to;
+    if (moved) {
+      render(to > from ? 1 : -1);
+      const r = range();
+      options.onNavigate?.(r);
+      root.dispatchEvent(new CustomEvent('mk:navigate', { bubbles: true, detail: r }));
+    } else {
+      grid.querySelectorAll<HTMLButtonElement>('[data-mk-day]').forEach((b) => (b.tabIndex = b.dataset.mkDay === dayKey(to) ? 0 : -1));
+    }
+    if (focus) focusButton()?.focus();
+  };
+
+  const select = (value: DateInput | null, notify = true) => {
+    if (scope.disposed) return;
+    selected = value === null ? null : toDate(value);
+    grid.querySelectorAll<HTMLElement>('.mk-calendar__day').forEach((cell) => cell.setAttribute('aria-selected', String(!!selected && cell.dataset.mkDate === dayKey(selected))));
+    if (selected && notify) {
+      options.onSelect?.(selected);
+      root.dispatchEvent(new CustomEvent('mk:select', { bubbles: true, detail: { date: selected, key: dayKey(selected) } }));
+    }
+  };
+
+  scope.on(root, 'click', (e) => {
+    const target = (e.target as Element).closest<HTMLElement>('button');
+    if (!target || !root.contains(target) || (target as HTMLButtonElement).disabled) return;
+    if (target === prevButton) navigate(view === 'week' ? addDays(date, -7) : addMonths(date, -1));
+    else if (target === nextButton) navigate(view === 'week' ? addDays(date, 7) : addMonths(date, 1));
+    else if (target === todayButton) navigate(today(), true);
+    else if (target.dataset.mkCalendarView) setView(target.dataset.mkCalendarView as CalendarView);
+    else if (target.dataset.mkEvent !== undefined) {
+      const event = events.find((ev) => String(ev.id) === target.dataset.mkEvent);
+      if (event) {
+        options.onEventClick?.(event);
+        root.dispatchEvent(new CustomEvent('mk:event', { bubbles: true, detail: { event } }));
+      }
+    } else if (target.dataset.mkDay || target.dataset.mkMore) {
+      const day = toDate(target.dataset.mkDay ?? target.dataset.mkMore);
+      focusDay = day;
+      grid.querySelectorAll<HTMLButtonElement>('[data-mk-day]').forEach((b) => (b.tabIndex = b.dataset.mkDay === dayKey(day) ? 0 : -1));
+      select(day);
+    }
+  });
+
+  scope.on(grid, 'keydown', (e) => {
+    const event = e as KeyboardEvent;
+    const target = event.target as HTMLElement;
+    if (!target.dataset?.mkDay) return;
+    const day = toDate(target.dataset.mkDay);
+    const map: Record<string, () => Date> = {
+      ArrowLeft: () => addDays(day, -1),
+      ArrowRight: () => addDays(day, 1),
+      ArrowUp: () => addDays(day, -7),
+      ArrowDown: () => addDays(day, 7),
+      Home: () => startOfWeek(day, firstDay),
+      End: () => addDays(startOfWeek(day, firstDay), 6),
+      PageUp: () => addMonths(day, event.shiftKey ? -12 : -1),
+      PageDown: () => addMonths(day, event.shiftKey ? 12 : 1),
+    };
+    const to = map[event.key]?.();
+    if (!to) return;
+    event.preventDefault();
+    if (!event.key.startsWith('Page') && inRange(to)) {
+      focusDay = to;
+      grid.querySelectorAll<HTMLButtonElement>('[data-mk-day]').forEach((b) => (b.tabIndex = b.dataset.mkDay === dayKey(to) ? 0 : -1));
+      focusButton()?.focus();
+    } else navigate(to, true);
+  });
+
+  const setView = (next: CalendarView) => {
+    if (scope.disposed || (next !== 'month' && next !== 'week') || next === view) return;
+    view = next;
+    date = focusDay;
+    render(0);
+    const r = range();
+    options.onNavigate?.(r);
+    root.dispatchEvent(new CustomEvent('mk:navigate', { bubbles: true, detail: r }));
+  };
+
+  render(0);
+
+  return {
+    next: () => navigate(view === 'week' ? addDays(date, 7) : addMonths(date, 1)),
+    prev: () => navigate(view === 'week' ? addDays(date, -7) : addMonths(date, -1)),
+    goToday: () => navigate(today()),
+    setDate: (value) => navigate(toDate(value, date)),
+    setView,
+    setEvents(list) {
+      if (scope.disposed) return;
+      const hadFocus = grid.contains(document.activeElement);
+      index(fromJson<CalendarEvent[]>(list) ?? []);
+      const fresh = body();
+      current?.replaceWith(fresh);
+      current = fresh;
+      if (hadFocus) focusButton()?.focus();
+    },
+    select,
+    get date() { return date; },
+    get view() { return view; },
+    get selected() { return selected; },
+    get range() { return range(); },
+    destroy: () => scope.dispose(),
+  };
+}

package/src/components/calendar/react.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { useRef, type HTMLAttributes } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createCalendar, type CalendarInstance, type CalendarOptions, type CalendarView } from './engine';
+import type { DateInput } from '../../core/dates';
+
+export interface CalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'>, CalendarOptions {
+  /** Hide the month/week switch. */
+  hideViews?: boolean;
+  labels?: CalendarOptions['labels'] & { previous?: string; next?: string; today?: string; month?: string; week?: string };
+}
+
+export function Calendar({
+  date, view, firstDay, locale, events, maxEvents, selected, today, labels, onSelect, onEventClick, onNavigate,
+  hideViews, className, ...props
+}: CalendarProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const instance = useRef<CalendarInstance | null>(null);
+  const kept = useRef<{ date?: DateInput; view?: CalendarView; selected?: DateInput | null }>({});
+  const select = useLatest(onSelect);
+  const eventClick = useLatest(onEventClick);
+  const navigate = useLatest(onNavigate);
+  useIsomorphicLayoutEffect(() => {
+    const created = createCalendar(ref.current, {
+      date: date ?? kept.current.date,
+      view: view ?? kept.current.view,
+      selected: selected !== undefined ? selected : kept.current.selected,
+      firstDay, locale, events, maxEvents, today, labels,
+      onSelect: (d) => select.current?.(d),
+      onEventClick: (e) => eventClick.current?.(e),
+      onNavigate: (r) => navigate.current?.(r),
+    });
+    instance.current = created;
+    return () => {
+      kept.current = { date: created.date, view: created.view, selected: created.selected };
+      created.destroy();
+      instance.current = null;
+    };
+    // Events and selection update in place; the rest recreates the grid.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [date, view, firstDay, locale, maxEvents, today]);
+  // Re-index only when the events' content changes, not on every new array identity.
+  const eventsKey = JSON.stringify(events ?? []);
+  const firstEvents = useRef(true);
+  useIsomorphicLayoutEffect(() => {
+    if (firstEvents.current) { firstEvents.current = false; return; }
+    instance.current?.setEvents(events ?? []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [eventsKey]);
+  useIsomorphicLayoutEffect(() => { if (selected !== undefined) instance.current?.select(selected, false); }, [selected]);
+  return (
+    <div {...props} ref={ref} className={['mk-calendar', className].filter(Boolean).join(' ')}>
+      <div className="mk-calendar__header">
+        <h3 className="mk-calendar__title" data-mk-calendar-title />
+        {!hideViews && (
+          <div className="mk-calendar__views" role="group" aria-label="Vista">
+            <button type="button" data-mk-calendar-view="month">{labels?.month ?? 'Mes'}</button>
+            <button type="button" data-mk-calendar-view="week">{labels?.week ?? 'Semana'}</button>
+          </div>
+        )}
+        <button type="button" className="mk-calendar__nav" data-mk-calendar-prev aria-label={labels?.previous ?? 'Anterior'}>←</button>
+        <button type="button" className="mk-calendar__nav" data-mk-calendar-today>{labels?.today ?? 'Hoy'}</button>
+        <button type="button" className="mk-calendar__nav" data-mk-calendar-next aria-label={labels?.next ?? 'Siguiente'}>→</button>
+      </div>
+      <div data-mk-calendar-grid />
+    </div>
+  );
+}

package/src/components/chat/README.md

@@ -1,6 +1,6 @@
 # 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.
+El chat: 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.
@@ -8,8 +8,6 @@ El chat de Stepbro (PrettyChat): burbujas de cristal sobre el fondo vivo, desvan
 - **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

package/src/components/chat/chat.css

@@ -1,4 +1,4 @@
-/* chat — Stepbro's PrettyChat: glass bubbles over the live background, a soft fade at the bottom, a 64 px composer. */
+/* chat — Chat: 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);

package/src/components/chat/engine.ts

@@ -9,7 +9,7 @@ import { flowIn } from '../../motion/flow';
 import { iconSvg } from '../icons';
 
 /*
- * Stepbro's PrettyChat: new bubbles grow from their speaker's side while their
+ * Chat: new bubbles grow from their speaker's side while their
  * words rise (enterMessages); the conversation scrolls to the newest one
  * (0.35 s). A "Pensando…" placeholder shows only if the answer takes more than
  * 500 ms, and then morphs (Flip, 0.7 s, no scaling of the text) into the reply.

package/src/components/chat/react.tsx

@@ -183,7 +183,7 @@ function Confirm({ children, ...props }: HTMLAttributes<HTMLDivElement>) {
 }
 
 /**
- * Stepbro's chat: <Chat.Root onSend><ChatBackground /><Chat.Messages pending>{messages.map(m =>
+ * chat: <Chat.Root onSend><ChatBackground /><Chat.Messages pending>{messages.map(m =>
  * <Chat.Message role>)}</Chat.Messages><Chat.Composer /></Chat.Root>.
  */
 export const Chat = { Root, Messages, Message, Composer, Confirm };

package/src/components/chat-background/README.md

@@ -1,11 +1,9 @@
 # chat-background
 
-El fondo vivo del chat de Stepbro: dos manchas suaves (primary-container y tertiary-container, degradados radiales de 800 px, saturación 150 %) que orbitan detrás del chat, con grano encima. La energía (0…1, por ejemplo la del micrófono) acelera las órbitas (`10 − 3.5·e` s y `15 − 4.5·e` s), sube su opacidad (`.5 + .15·e`) y las agranda (`(1 + .1·e)·scale`).
+El fondo vivo del chat: dos manchas suaves (primary-container y tertiary-container, degradados radiales de 800 px, saturación 150 %) que orbitan detrás del chat, con grano encima. La energía (0…1, por ejemplo la del micrófono) acelera las órbitas (`10 − 3.5·e` s y `15 − 4.5·e` s), sube su opacidad (`.5 + .15·e`) y las agranda (`(1 + .1·e)·scale`).
 
 El estado "ocupado" del onboarding la lleva a energía 1.6 y escala 1.8 en 0.8 s (`power2.out`) y la devuelve en 0.6 s (`power2.inOut`).
 
-Origen: Stepbro PrettyBackground (`chat-background`, `background-audio-energy`, `onboarding-busy-background` en el kit). El grano es un SVG `feTurbulence` en lugar del PNG de Stepbro.
-
 ## HTML / Astro
 
 ```html

package/src/components/chat-background/audio.ts

@@ -1,5 +1,5 @@
 /*
- * Microphone energy for the chat background (Stepbro's analyser): FFT 256,
+ * Microphone energy for the chat background: FFT 256,
  * smoothing .3, −90…−10 dB; the lowest 40 % of the bins, ×3, clamped to 1, with
  * attack .8 and release .15. The caller passes a MediaStream it already has
  * permission for: this never asks for the microphone.

package/src/components/chat-background/chat-background.css

@@ -1,4 +1,4 @@
-/* chat-background — Stepbro's PrettyBackground: two orbiting blobs and a grain, driven by energy. */
+/* chat-background — Chat background: two orbiting blobs and a grain, driven by energy. */
 .mk-chat-background,
 mk-chat-background {
   --mk-chat-orbit-1: 10s;
@@ -46,7 +46,7 @@ mk-chat-background::after {
   animation: mk-chat-blob-2 var(--mk-chat-orbit-2) linear infinite;
 }
 
-/* Grain on top (Stepbro ships a PNG; this is SVG turbulence at the same 30 %). */
+/* Grain overlay using SVG turbulence at 30 %. */
 .mk-chat-background__noise {
   position: absolute;
   inset: 0;

package/src/components/chat-background/engine.ts

@@ -5,7 +5,7 @@ import { TIMING } from '../../core/timing';
 import { inert, warnOnce, type Instance } from '../../core/types';
 
 /*
- * Stepbro's PrettyBackground: two soft blobs (primary-container and
+ * Chat background: two soft blobs (primary-container and
  * tertiary-container, 800 px radial gradients, saturate 150 %) orbit behind the
  * chat and a grain sits on top. Energy (0…1, e.g. the microphone's) speeds the
  * orbits up (10 − 3.5·e s and 15 − 4.5·e s), brightens the blobs (.5 + .15·e) and

package/src/components/chat-background/react.tsx

@@ -12,7 +12,7 @@ export interface ChatBackgroundProps {
   style?: CSSProperties;
 }
 
-/** Stepbro's chat background. Put it first inside a positioned container. */
+/** chat background. Put it first inside a positioned container. */
 export function ChatBackground({ energy = 0, scale = 1, className, style }: ChatBackgroundProps) {
   const ref = useRef<HTMLDivElement>(null);
   const instance = useRef<ChatBackgroundInstance | null>(null);

package/src/components/cursor/README.md

@@ -2,13 +2,11 @@
 
 Dos cursores:
 
-- **`chip`** (Dousan Miao, por defecto): el cursor del sistema se queda. Sobre un elemento con `data-mk-cursor="Texto"` aparece un chip de cristal (`.mk-glass`) con el texto que sigue al puntero con un resorte (Motion 800/35) y entra desde `scale .8` (500/30). `data-mk-cursor-shape="circle"` lo convierte en un círculo de 96 px. Se queda a 10 px de los bordes de la ventana. El texto es del color acento sobre fondos claros y blanco sobre oscuros (luminancia `(299R + 587G + 114B) / 1000 > 180`, como Dousan).
-- **`dot`** (Siena Film Foundation): dentro de su zona un círculo sustituye al cursor y lo sigue (20 % de la distancia por frame) con una palabra (`text` o el `data-mk-cursor` de lo que hay debajo). Al presionar encoge a .7, la palabra cae y entran dos flechas (0.2–0.5 s, `easeOutQuint`). `data-mk-cursor-hide` lo oculta sobre enlaces o botones.
+- **`chip`**: el cursor del sistema se queda. Sobre un elemento con `data-mk-cursor="Texto"` aparece un chip de cristal (`.mk-glass`) con el texto que sigue al puntero con un resorte (Motion 800/35) y entra desde `scale .8` (500/30). `data-mk-cursor-shape="circle"` lo convierte en un círculo de 96 px. Se queda a 10 px de los bordes de la ventana. El texto es del color acento sobre fondos claros y blanco sobre oscuros (luminancia `(299R + 587G + 114B) / 1000 > 180`).
+- **`dot`**: dentro de su zona un círculo sustituye al cursor y lo sigue (20 % de la distancia por frame) con una palabra (`text` o el `data-mk-cursor` de lo que hay debajo). Al presionar encoge a .7, la palabra cae y entran dos flechas (0.2–0.5 s, `easeOutQuint`). `data-mk-cursor-hide` lo oculta sobre enlaces o botones.
 
 Los dos se apagan en pantallas táctiles y con movimiento reducido.
 
-Origen: dousanmiao.com (cursor `kd`), siena.film (`[data-cursor]`, lerp .2).
-
 ## HTML / Astro
 
 ```html
@@ -29,7 +27,7 @@ Sin custom element: `createCursor(capa, { variant, zone, text, arrows })` sobre
 ## React
 
 ```tsx
-<Cursor />                                   // en el layout
+<Cursor /> // en el layout
 <section><Cursor variant="dot" text="Drag" arrows="x" /></section>
 ```
 

package/src/components/cursor/cursor.css

@@ -1,4 +1,4 @@
-/* cursor — Dousan's glass chip and Siena's dot. The layer follows the pointer; the engine writes its transform. */
+/* cursor — glass chip and dot. The layer follows the pointer; the engine writes its transform. */
 .mk-cursor {
   position: fixed;
   top: 0;
@@ -8,7 +8,7 @@
   will-change: transform;
 }
 
-/* chip (Dousan): a .mk-glass label; ink follows the background under it. */
+/* chip: a .mk-glass label; ink follows the background under it. */
 .mk-cursor__chip {
   --mk-glass-fg: #fff;
   display: inline-flex;
@@ -46,7 +46,7 @@
   display: none;
 }
 
-/* dot (Siena): a disc with a word and two arrows that slide in when pressed. */
+/* dot: a disc with a word and two arrows that slide in when pressed. */
 .mk-cursor--dot {
   --mk-cursor-size: 88px;
   transition: opacity 0.15s var(--mk-ease-quint);

package/src/components/cursor/element.ts

@@ -2,8 +2,8 @@ import { MkElement, defineElement, type OptionType } from '../../elements/base';
 import { createCursor, type CursorInstance, type CursorOptions, type CursorVariant } from './engine';
 
 /**
- * <mk-cursor></mk-cursor>                                   Dousan's glass chip (once per page)
- * <mk-cursor variant="dot" text="Scroll" arrows="y"></mk-cursor>  Siena's dot, inside its parent
+ * <mk-cursor></mk-cursor>                                   glass chip (once per page)
+ * <mk-cursor variant="dot" text="Scroll" arrows="y"></mk-cursor>  dot, inside its parent
  * zone="#hero" picks another zone.
  */
 export class MkCursorElement extends MkElement<CursorInstance> {