@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/dist/chunk-RFDIZYFX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/timing.ts","../src/core/loop.ts","../src/core/reduced.ts","../src/core/scope.ts"],"sourcesContent":["/**\n * Every Stepbro duration in one place (seconds, like GSAP, unless the name says\n * ms). Recipes and components take their defaults from here, so a timing is\n * changed once. Sources: Stepbro replication kit, tasks/especificacion-replicacion.json\n * and money/replication-catalog.json.\n */\nexport const TIMING = Object.freeze({\n  flow: 0.5,\n  flowStagger: 0.05,\n  stepChange: 0.5,\n  reveal: Object.freeze({\n    fast: [0.5, 0.25],\n    normal: [0.7, 0.35],\n    slow: [1.05, 0.5],\n    slower: [1.6, 0.75],\n  } as const),\n  details: 0.32,\n  chevron: 0.25,\n  indicator: 0.45,\n  number: 0.6,\n  numberPricing: 0.7,\n  revealCounter: 0.9,\n  layoutTravel: 0.62,\n  /** New items in a reflow enter in this share of the travel time. */\n  layoutEnterFactor: 0.6,\n  menu: Object.freeze({ duration: 0.35, stagger: 0.04, delay: 0.1 }),\n  palette: Object.freeze({ duration: 0.1, stagger: 0.01 }),\n  form: Object.freeze({ duration: 0.35, stagger: 0.04 }),\n  landing: Object.freeze({ duration: 0.4, stagger: 0.05, delay: 0.15 }),\n  content: Object.freeze({ duration: 0.6, stagger: 0.06 }),\n  bubble: 0.7,\n  bubbleStagger: 0.06,\n  word: 0.25,\n  wordStagger: 0.05,\n  chatScroll: 0.35,\n  composer: 0.18,\n  slot: Object.freeze({ durationMs: 300, staggerMs: 45, exitOffsetMs: 50, colorFadeMs: 280, maxTilt: 5, minResizeMs: 140 }),\n  swatch: 0.5,\n  swatchLight: 3.5,\n  swatchBackground: 4.5,\n  /** ModalHost (modal-origin, modal-close-origin, modal-fallback, modal-auto-resize). */\n  dialog: Object.freeze({\n    /** The surface travels from its opener. */\n    open: 0.7,\n    /** The opener's colour hands over to the surface's. */\n    surfaceColor: 0.3,\n    /** Back into the opener. */\n    close: 0.5,\n    /** While closing, the content heads for the opener on a 2 s path cut at `close`. */\n    contentReturn: 2,\n    originHide: 0.08,\n    originShow: 0.3,\n    originShowDelay: 0.2,\n    /** No opener on screen: scale .92 → 1. */\n    fallback: 0.35,\n    autoResize: 0.45,\n    /** Backdrop tint on the signature curve. */\n    backdrop: 0.5,\n    /** Items of a list that opens from its control. */\n    list: 0.25,\n  }),\n  /** modal-liquid (spring channels; springs are stiffness/damping, not times). */\n  liquid: Object.freeze({\n    size: 0.3,\n    radius: 0.7,\n    content: 0.3,\n    color: 0.4,\n    colorDelay: 0.15,\n    ghost: 0.25,\n    ghostDelay: 0.05,\n    closeSize: 0.25,\n    closeContent: 0.3,\n    originRestore: 0.3,\n    originRestoreDelay: 0.2,\n    safetyMs: 1100,\n  }),\n  /** modal-drag: the spring back when a drag is not far enough. */\n  drag: Object.freeze({ restore: 0.5, radiusRestore: 0.3 }),\n  /** modal-float. */\n  float: Object.freeze({ shadow: 0.45, glideDecay: 0.18, sizeSmoothing: 0.08 }),\n  /** chat-loader-delay, chat-confirmation-bar. */\n  chat: Object.freeze({ pendingDelayMs: 500, confirmWordStagger: 0.1 }),\n  /** onboarding-busy-background, step-change, onboarding-reveal-counter. */\n  onboarding: Object.freeze({ busy: 0.8, idle: 0.6, step: 0.5, counter: 0.9 }),\n  /** task-drag: lift, land (FA .62), crossfade (66 % of the land), neighbours shifting (FA .52). */\n  sortable: Object.freeze({ lift: 0.18, land: 0.42, landFade: 0.42 * 0.66, shift: 0.62 }),\n  /** toast-deck, toast-morph, toast-character-reveal. */\n  toast: Object.freeze({\n    relayout: 0.6,\n    expand: 0.55,\n    expandStagger: 0.06,\n    enter: 0.5,\n    exit: 0.3,\n    collapseDelayMs: 150,\n    morphSize: 0.32,\n    morphRadius: 0.7,\n    morphContent: 0.32,\n    morphColor: 0.4,\n    morphColorDelay: 0.15,\n    morphShadow: 0.6,\n    morphShadowDelay: 0.05,\n    safetyMs: 1100,\n    chars: 0.4,\n    charsDelay: 0.225,\n    charsStagger: 0.02,\n  }),\n  /** Dousan's glass (CSS): surface/shadow transitions, ring and shine. */\n  glass: Object.freeze({ hover: 0.4, ring: 0.5 }),\n  /** Stepbro's utility animations (css/effects/anim.css), by name. */\n  effects: Object.freeze({\n    out: 0.5,\n    'out-left': 0.5,\n    'out-bottom': 0.5,\n    collapse: 0.25,\n    highlight: 1,\n    shake: 0.5,\n    'shake-strong': 0.4,\n    fade: 0.3,\n    wipe: 0.7,\n    'progress-in': 1,\n  }),\n  /** Dousan's success confetti, per 60 fps frame. */\n  confetti: Object.freeze({\n    count: 45,\n    speed: [2, 8] as const,\n    lift: 2,\n    radius: [3, 7] as const,\n    decay: [0.015, 0.03] as const,\n    gravity: 0.15,\n    drag: 0.98,\n    spin: 2.5,\n  }),\n  /** Dousan's project sheet. */\n  sheet: Object.freeze({ open: 0.72, close: 0.72, underlayScale: 0.98, underlayOpacity: 0.4 }),\n  /** Dousan's springs as Motion declares them: [stiffness, damping]. */\n  springs: Object.freeze({\n    press: [400, 10] as const,\n    success: [260, 18] as const,\n    underlay: [300, 30] as const,\n    letters: [300, 10] as const,\n    cursorFollow: [800, 35] as const,\n    cursorAppear: [500, 30] as const,\n    bentoEnter: [60, 15] as const,\n    bentoRepel: [300, 25] as const,\n    dockPill: [380, 30] as const,\n  }),\n  /** OFFFICE's masked type (Siena's case titles start at 120 %). */\n  maskText: Object.freeze({ duration: 1.2, delay: 0.1, stagger: 0.02, exitStagger: 0.002, y: 100, threshold: 0.8 }),\n  /** Siena's reveal group (rules, fades, rises). */\n  cascade: Object.freeze({ duration: 1.2, step: 0.03, rise: 200, threshold: 0.3 }),\n  /** Siena's slot title: each letter turns 8–14 times inside a 2 s expo.out envelope. */\n  textRoll: Object.freeze({ duration: 2, stagger: 0.04, turns: [8, 14] as const, interval: 6000, quietMs: 1000 }),\n  /** Dousan's hero letters: scale on hover, pastel blink. */\n  letters: Object.freeze({\n    scale: 1.3,\n    y: -5,\n    step: 0.03,\n    blink: 0.6,\n    blinkStart: 0.6,\n    blinkRepeatDelay: 0.1,\n    blinkDelays: [0.1, 0.6, 0.2, 1, 0.4, 1.2, 0.15, 0.8, 0.3] as const,\n  }),\n  /** Siena's image parallax. */\n  parallax: Object.freeze({ travel: 10, scale: 1.2, strongScale: 1.3, lerp: 1 }),\n  /** Siena's About grid gathering from depth. */\n  depthGrid: Object.freeze({\n    perspective: 600,\n    distance: 900,\n    depth: -3000,\n    rotate: -160,\n    opacity: 0.05,\n    scale: 0.4,\n    stagger: 0.15,\n    lerp: 1,\n  }),\n  /** Siena's video mask: the frame and the picture inside scale in opposite directions. */\n  frameZoom: Object.freeze({\n    outer: [80, 20] as const,\n    inner: [130, 20] as const,\n    phoneOuter: [95, 5] as const,\n    phoneInner: [105, 5] as const,\n    open: 1,\n    lerp: 1,\n  }),\n  /** Siena's marquee: seconds per item, at most 14 counted. */\n  marquee: Object.freeze({ perItem: 2, maxItems: 14 }),\n  /** Dousan's glass chip and Siena's dot cursor. */\n  cursor: Object.freeze({ gutter: 10, circle: 96, dotLerp: 0.2, light: 180 }),\n  /** iyo.ai's floating navbar: enters from −300 % over 1.8 s; rows follow 0.15 s + 0.025 s each. */\n  island: Object.freeze({ entrance: 1.8, offset: -300, delay: 0.15, step: 0.025, focus: 150 }),\n  /** iyo.ai's product dock: spread for 1.6 s on load; tablet range re-checked 250 ms after a resize. */\n  cardDock: Object.freeze({ intro: 1600, resizeDebounce: 250 }),\n  /** iyo.ai's phone cards: 5 s a card, 2 s wait after a touch, 0.5 s after it shows. */\n  snapStrip: Object.freeze({ interval: 5000, resume: 2000, delay: 500 }),\n  /** iyo.ai's fill-text: letters from .2, 0.5 s each, 0.1 s apart, top 90 % → centre 40 %. */\n  fillText: Object.freeze({ from: 0.2, duration: 0.5, stagger: 0.1, start: 'top 90%', end: 'center 40%' }),\n  /** iyo.ai's particle hero (adapted): fade in 1 s after 0.3 s, morph cycles, pointer push. */\n  particleHero: Object.freeze({ fadeIn: 1, fadeDelay: 0.3, size: 128, pointSize: 1.7, maxDpr: 1.5, stillSteps: 110 }),\n  ticketMenu: Object.freeze({ open: 0.9, content: 1.1, stagger: 0.02, from: 150 }),\n  infiniteReel: Object.freeze({ friction: 0.95, wheel: 0.05, dragThreshold: 5 }),\n  repelBento: Object.freeze({ offset: 0.6, stagger: 0.006, strength: 5000, distance: 30, breakpoint: 1024 }),\n  rotator: Object.freeze({ interval: 8000, duration: 0.25, y: 5 }),\n  dragRuler: Object.freeze({ min: 0, max: 8, step: 0.1, pixelsPerUnit: 60 }),\n});\n","import { gsap } from 'gsap';\n\n/** Called every frame with dt = 1 at 60 Hz. */\nexport type Tick = (dt: number) => void;\n\nconst subscribers = new Set<Tick>();\nconst FRAME_MS = 1000 / 60;\n\nfunction tick(_time: number, deltaMs: number) {\n  // Capped so a backgrounded tab does not explode the springs.\n  const dt = Math.min(deltaMs / FRAME_MS, 3);\n  subscribers.forEach((fn) => fn(dt));\n}\n\n/** One shared ticker callback for every recipe (spencergabor.com's single rAF loop). */\nexport function subscribe(fn: Tick): () => void {\n  if (!subscribers.size) gsap.ticker.add(tick);\n  subscribers.add(fn);\n  return () => {\n    subscribers.delete(fn);\n    if (!subscribers.size) gsap.ticker.remove(tick);\n  };\n}\n\n/** Run `fn` every frame only while `el` is near the viewport. */\nexport function whileVisible(el: Element, fn: Tick, rootMargin = '100px'): () => void {\n  let stop: (() => void) | null = null;\n  const io = new IntersectionObserver(\n    ([entry]) => {\n      if (entry?.isIntersecting) stop ??= subscribe(fn);\n      else {\n        stop?.();\n        stop = null;\n      }\n    },\n    { rootMargin },\n  );\n  io.observe(el);\n  return () => {\n    io.disconnect();\n    stop?.();\n    stop = null;\n  };\n}\n","/** `prefers-reduced-motion: reduce`. Always false during SSR. */\nexport function reduced(): boolean {\n  return typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n/**\n * Entrance animations run only with motion allowed and when the head safety net\n * (see MK_HEAD_SCRIPT) has not given up on JavaScript.\n */\nexport function entrances(): boolean {\n  if (reduced()) return false;\n  return !(typeof document !== 'undefined' && document.documentElement.classList.contains('mk-failed'));\n}\n\n/**\n * Inline this in <head> (before CSS paints). It enables the hidden entrance states\n * (`.mk-js`) and reveals everything again (`.mk-failed`) if no recipe has started\n * within 2.5 s — e.g. the bundle failed to load.\n */\nexport const MK_HEAD_SCRIPT =\n  \"(function(){var r=document.documentElement;r.classList.add('mk-js');setTimeout(function(){if(!r.classList.contains('mk-ready'))r.classList.add('mk-failed')},2500)})();\";\n","import type { Cleanup } from './types';\n\nexport interface Scope {\n  /** Register any cleanup; returns it for convenience. */\n  add(fn: Cleanup): Cleanup;\n  /** addEventListener that is removed on dispose. */\n  on<K extends keyof HTMLElementEventMap>(\n    target: EventTarget,\n    type: K | (string & {}),\n    listener: (event: HTMLElementEventMap[K]) => void,\n    options?: AddEventListenerOptions | boolean,\n  ): void;\n  /** Disconnects the observer on dispose and returns it. */\n  observe<O extends { disconnect(): void }>(observer: O): O;\n  /** setTimeout that is cleared on dispose. */\n  timeout(fn: () => void, ms: number): void;\n  /** Set (or remove, with null) an attribute; dispose puts the original value back. */\n  attr(el: Element, name: string, value: string | null): void;\n  /** Run every cleanup once, newest first. */\n  dispose(): void;\n  readonly disposed: boolean;\n}\n\n/** Collects the side effects of one recipe instance so `destroy()` can undo all of them. */\nexport function createScope(): Scope {\n  const cleanups: Cleanup[] = [];\n  const originals = new Map<Element, Map<string, string | null>>();\n  let disposed = false;\n  return {\n    add(fn) {\n      cleanups.push(fn);\n      return fn;\n    },\n    on(target, type, listener, options) {\n      target.addEventListener(type, listener as EventListener, options);\n      cleanups.push(() => target.removeEventListener(type, listener as EventListener, options));\n    },\n    observe(observer) {\n      cleanups.push(() => observer.disconnect());\n      return observer;\n    },\n    timeout(fn, ms) {\n      const id = setTimeout(fn, ms);\n      cleanups.push(() => clearTimeout(id));\n    },\n    attr(el, name, value) {\n      let saved = originals.get(el);\n      if (!saved) originals.set(el, (saved = new Map()));\n      if (!saved.has(name)) {\n        saved.set(name, el.getAttribute(name));\n        cleanups.push(() => {\n          const original = saved.get(name);\n          if (original === null || original === undefined) el.removeAttribute(name);\n          else el.setAttribute(name, original);\n        });\n      }\n      if (value === null) el.removeAttribute(name);\n      else el.setAttribute(name, value);\n    },\n    dispose() {\n      if (disposed) return;\n      disposed = true;\n      for (const fn of cleanups.reverse()) fn();\n      cleanups.length = 0;\n    },\n    get disposed() {\n      return disposed;\n    },\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-TGV27ZWM.js

@@ -0,0 +1,17 @@
+// src/core/types.ts
+function inert(extra) {
+  return { destroy() {
+  }, ...extra };
+}
+var warned = /* @__PURE__ */ new Set();
+function warnOnce(message) {
+  if (warned.has(message)) return;
+  warned.add(message);
+  console.warn(`[motion-kit] ${message}`);
+}
+
+export {
+  inert,
+  warnOnce
+};
+//# sourceMappingURL=chunk-TGV27ZWM.js.map

package/dist/chunk-TGV27ZWM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/types.ts"],"sourcesContent":["/** Every recipe returns at least this. `destroy()` is idempotent and leaves the DOM as it found it. */\r\nexport interface Instance {\r\n  destroy(): void;\r\n}\r\n\r\nexport type Cleanup = () => void;\r\n\r\n/** Instance returned when a recipe cannot start (missing root or children). */\r\nexport function inert<T extends Instance = Instance>(extra?: Omit<T, 'destroy'>): T {\r\n  return { destroy() {}, ...extra } as T;\r\n}\r\n\r\nconst warned = new Set<string>();\r\n\r\n/** Warn once per message, so a misconfigured recipe inside a loop does not flood the console. */\r\nexport function warnOnce(message: string) {\r\n  if (warned.has(message)) return;\r\n  warned.add(message);\r\n  console.warn(`[motion-kit] ${message}`);\r\n}\r\n"],"mappings":";AAQO,SAAS,MAAqC,OAA+B;AAClF,SAAO,EAAE,UAAU;AAAA,EAAC,GAAG,GAAG,MAAM;AAClC;AAEA,IAAM,SAAS,oBAAI,IAAY;AAGxB,SAAS,SAAS,SAAiB;AACxC,MAAI,OAAO,IAAI,OAAO,EAAG;AACzB,SAAO,IAAI,OAAO;AAClB,UAAQ,KAAK,gBAAgB,OAAO,EAAE;AACxC;","names":[]}

package/dist/confetti-BSX1CLLV.d.ts

@@ -0,0 +1,41 @@
+import { Flip } from 'gsap/Flip';
+
+interface CapturedLayout {
+    state: ReturnType<typeof Flip.getState>;
+    ids: Set<string | undefined>;
+}
+declare function captureLayout(root: Element, selector: string): CapturedLayout;
+declare function reflowLayout(root: Element, selector: string, captured: CapturedLayout, { duration }?: {
+    duration?: number;
+}): gsap.core.Timeline | null;
+
+declare const ANIMATIONS: readonly ["out", "out-left", "out-bottom", "collapse", "highlight", "shake", "shake-strong", "fade", "wipe", "progress-in"];
+type AnimationName = (typeof ANIMATIONS)[number];
+type ExitName = 'out' | 'out-left' | 'out-bottom' | 'collapse';
+interface AnimateOptions {
+    signal?: AbortSignal;
+}
+declare function animate(el: Element, name: AnimationName, { signal }?: AnimateOptions): Promise<void>;
+interface LeaveOptions {
+    /** Remove the element (default) or hide it. */
+    remove?: boolean;
+}
+declare function leave(el: Element, name: ExitName, { remove }?: LeaveOptions): Promise<void>;
+
+interface ConfettiOptions {
+    count?: number;
+    /** Default: the theme's primary, tertiary, secondary and containers. */
+    colors?: string[];
+    /** Draw inside this (positioned) element instead of over the whole window. */
+    container?: HTMLElement | null;
+}
+interface ConfettiHandle {
+    stop(): void;
+    finished: Promise<void>;
+}
+declare function confetti(origin?: Element | {
+    x: number;
+    y: number;
+} | null, options?: ConfettiOptions): ConfettiHandle;
+
+export { ANIMATIONS as A, type CapturedLayout as C, type ExitName as E, type LeaveOptions as L, type AnimateOptions as a, type AnimationName as b, type ConfettiHandle as c, type ConfettiOptions as d, animate as e, captureLayout as f, confetti as g, leave as l, reflowLayout as r };

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

@@ -0,0 +1,87 @@
+/* components/chat-background/chat-background.css */
+/* chat-background — Stepbro's PrettyBackground: two orbiting blobs and a grain, driven by energy. */
+.mk-chat-background,
+mk-chat-background {
+  --mk-chat-orbit-1: 10s;
+  --mk-chat-orbit-2: 15s;
+  --mk-chat-blob-opacity: 0.5;
+  --mk-chat-scale: 1;
+  --mk-chat-background-opacity: 1;
+  --mk-chat-blob-1: var(--md-sys-color-primary-container);
+  --mk-chat-blob-2: var(--md-sys-color-tertiary-container);
+  position: absolute;
+  inset: 0;
+  display: block;
+  overflow: hidden;
+  border-radius: inherit;
+  opacity: var(--mk-chat-background-opacity);
+  pointer-events: none;
+}
+
+.mk-chat-background::before,
+.mk-chat-background::after,
+mk-chat-background::before,
+mk-chat-background::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 800px;
+  height: 800px;
+  content: '';
+  opacity: var(--mk-chat-blob-opacity);
+  translate: -50% -50%;
+  scale: var(--mk-chat-scale);
+  filter: saturate(150%);
+  transition: opacity 1s ease;
+}
+
+.mk-chat-background::before,
+mk-chat-background::before {
+  background: radial-gradient(circle at center, var(--mk-chat-blob-1) 0%, transparent 70%);
+  animation: mk-chat-blob-1 var(--mk-chat-orbit-1) linear infinite;
+}
+
+.mk-chat-background::after,
+mk-chat-background::after {
+  background: radial-gradient(circle at center, var(--mk-chat-blob-2) 0%, transparent 70%);
+  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 %). */
+.mk-chat-background__noise {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  opacity: 0.3;
+  mix-blend-mode: overlay;
+}
+
+@keyframes mk-chat-blob-1 {
+  from {
+    transform: rotate(0) translate(150px) rotate(0);
+  }
+
+  to {
+    transform: rotate(360deg) translate(150px) rotate(-360deg);
+  }
+}
+
+@keyframes mk-chat-blob-2 {
+  from {
+    transform: rotate(180deg) translateY(120px) rotate(-180deg);
+  }
+
+  to {
+    transform: rotate(-180deg) translateY(120px) rotate(180deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-chat-background::before,
+  .mk-chat-background::after,
+  mk-chat-background::before,
+  mk-chat-background::after {
+    animation: none;
+  }
+}

package/dist/css/components/chat.css

@@ -0,0 +1,237 @@
+/* components/chat/chat.css */
+/* 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/dist/css/components/cursor.css

@@ -0,0 +1,178 @@
+/* components/cursor/cursor.css */
+/* cursor — Dousan's glass chip and Siena's dot. The layer follows the pointer; the engine writes its transform. */
+.mk-cursor {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2147483000;
+  pointer-events: none;
+  will-change: transform;
+}
+
+/* chip (Dousan): a .mk-glass label; ink follows the background under it. */
+.mk-cursor__chip {
+  --mk-glass-fg: #fff;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  font-family: var(--mk-font);
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  transition: color 0.15s;
+}
+
+.mk-cursor__chip[data-mk-tone='light'] {
+  --mk-glass-fg: var(--mk-cursor-light-ink, var(--md-sys-color-primary));
+}
+
+.mk-cursor__chip--circle {
+  flex-direction: column;
+  justify-content: center;
+  width: var(--mk-cursor-circle, 96px);
+  height: var(--mk-cursor-circle, 96px);
+  padding: 8px;
+  line-height: 1.15;
+  text-align: center;
+  white-space: normal;
+}
+
+.mk-cursor__icon {
+  font-size: 0.875rem;
+}
+
+.mk-cursor__icon:empty {
+  display: none;
+}
+
+/* dot (Siena): 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);
+}
+
+.mk-cursor__dot {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: var(--mk-cursor-size);
+  height: var(--mk-cursor-size);
+  color: var(--mk-cursor-ink, var(--md-sys-color-background));
+}
+
+.mk-cursor--dot[data-mk-arrows='x'] .mk-cursor__dot {
+  flex-direction: row;
+}
+
+.mk-cursor__circle {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: var(--mk-cursor-fill, var(--md-sys-color-on-background));
+  transition: transform 0.5s var(--mk-ease-quint);
+}
+
+.mk-cursor__text {
+  position: relative;
+  overflow: hidden;
+  font-family: var(--mk-font);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 0.9;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.mk-cursor__word {
+  display: block;
+  transition: transform 0.5s var(--mk-ease-quint);
+}
+
+.mk-cursor__arrow {
+  position: relative;
+  display: grid;
+  overflow: hidden;
+}
+
+.mk-cursor__arrow > svg {
+  transition: transform 0.3s var(--mk-ease-quint);
+}
+
+.mk-cursor__arrow--start > svg {
+  transform: translateY(130%);
+}
+
+.mk-cursor__arrow--end > svg {
+  transform: translateY(-130%) rotate(180deg);
+}
+
+.mk-cursor--dot[data-mk-arrows='x'] .mk-cursor__arrow--start > svg {
+  transform: translateX(130%) rotate(-90deg);
+}
+
+.mk-cursor--dot[data-mk-arrows='x'] .mk-cursor__arrow--end > svg {
+  transform: translateX(-130%) rotate(90deg);
+}
+
+.mk-cursor[data-mk-pressed] .mk-cursor__circle {
+  transform: scale(0.7);
+}
+
+.mk-cursor[data-mk-pressed] .mk-cursor__word {
+  transform: translateY(150%);
+  transition-duration: 0.2s;
+}
+
+.mk-cursor[data-mk-pressed] .mk-cursor__arrow > svg {
+  transition-delay: 0.1s;
+}
+
+.mk-cursor[data-mk-pressed] .mk-cursor__arrow--start > svg {
+  transform: translateY(0);
+}
+
+.mk-cursor[data-mk-pressed] .mk-cursor__arrow--end > svg {
+  transform: translateY(0) rotate(180deg);
+}
+
+.mk-cursor--dot[data-mk-arrows='x'][data-mk-pressed] .mk-cursor__arrow--start > svg {
+  transform: translateX(0) rotate(-90deg);
+}
+
+.mk-cursor--dot[data-mk-arrows='x'][data-mk-pressed] .mk-cursor__arrow--end > svg {
+  transform: translateX(0) rotate(90deg);
+}
+
+.mk-cursor--dot[data-mk-hidden] {
+  opacity: 0;
+}
+
+.mk-cursor--dot[data-mk-hidden] .mk-cursor__circle {
+  transform: scale(0);
+}
+
+/* The dot replaces the system cursor inside its zone. */
+[data-mk-cursor-zone],
+[data-mk-cursor-zone] * {
+  cursor: none;
+}
+
+mk-cursor {
+  display: block;
+}
+
+@media (pointer: coarse), (prefers-reduced-motion: reduce) {
+  .mk-cursor {
+    display: none;
+  }
+
+  [data-mk-cursor-zone],
+  [data-mk-cursor-zone] * {
+    cursor: auto;
+  }
+}