@zyncat/ui 0.8.0

package/src/engine/ease.ts

@@ -0,0 +1,155 @@
+import type { Bezier, MotionTransition } from '../tokens/motion-tokens';
+
+const NAMED: Record<string, Bezier> = {
+  linear: [0, 0, 1, 1],
+  easeIn: [0.42, 0, 1, 1],
+  easeOut: [0, 0, 0.58, 1],
+  easeInOut: [0.42, 0, 0.58, 1],
+  circIn: [0.55, 0, 1, 0.45],
+  circOut: [0, 0.55, 0.45, 1],
+  circInOut: [0.85, 0, 0.15, 1],
+  backIn: [0.36, 0, 0.66, -0.56],
+  backOut: [0.34, 1.56, 0.64, 1],
+  backInOut: [0.68, -0.6, 0.32, 1.6],
+  anticipate: [0.38, -0.4, 0.88, 1.08],
+};
+
+const bezierCurve = (a: number, b: number, t: number) => {
+  const u = 1 - t;
+  return 3 * a * u * u * t + 3 * b * u * t * t + t * t * t;
+};
+
+const bezierSlope = (a: number, b: number, t: number) => {
+  const u = 1 - t;
+  return 3 * a * (u * u - 2 * t * u) + 3 * b * (2 * t * u - t * t) + 3 * t * t;
+};
+
+export function bezierAt(b: Bezier, x: number): number {
+  const [x1, y1, x2, y2] = b;
+  if (x1 === y1 && x2 === y2) return x;
+  if (x <= 0) return 0;
+  if (x >= 1) return 1;
+  let t = x;
+  for (let i = 0; i < 8; i++) {
+    const err = bezierCurve(x1, x2, t) - x;
+    if (err < 1e-4 && err > -1e-4) break;
+    const slope = bezierSlope(x1, x2, t);
+    if (slope < 1e-6 && slope > -1e-6) break;
+    t -= err / slope;
+  }
+  return bezierCurve(y1, y2, t);
+}
+
+export type EaseValue = NonNullable<MotionTransition['ease']>;
+
+export const toBezier = (ease: EaseValue): Bezier =>
+  typeof ease === 'string' ? (NAMED[ease] ?? NAMED.easeInOut) : ease;
+
+export const cssBezier = (ease: EaseValue): string => `cubic-bezier(${toBezier(ease).join(',')})`;
+
+export const isSegmented = (ease: unknown): ease is EaseValue[] =>
+  Array.isArray(ease) && (Array.isArray(ease[0]) || typeof ease[0] === 'string');
+
+const ARRIVAL = 0.99;
+const SETTLE_BAND = 0.002;
+const MAX_SPRING_SECONDS = 4;
+const SETTLE_LIMIT = 2.5;
+const SETTLE_STEP = 1 / 240;
+const OMEGA_PROBE = 0.1;
+const OMEGA_CEILING = 1e5;
+
+function springAt(zeta: number, omega: number, t: number): number {
+  const decay = Math.exp(-zeta * omega * t);
+  if (zeta < 1) {
+    const damped = omega * Math.sqrt(1 - zeta * zeta);
+    return 1 - decay * (Math.cos(damped * t) + ((zeta * omega) / damped) * Math.sin(damped * t));
+  }
+  return 1 - decay * (1 + omega * t);
+}
+
+function omegaForArrival(zeta: number, visual: number): number {
+  let hi = OMEGA_PROBE / visual;
+  while (hi < OMEGA_CEILING && springAt(zeta, hi, visual) < ARRIVAL) hi *= 2;
+  let lo = hi / 2;
+  for (let i = 0; i < 40; i++) {
+    const mid = (lo + hi) / 2;
+    if (springAt(zeta, mid, visual) < ARRIVAL) lo = mid;
+    else hi = mid;
+  }
+  return hi;
+}
+
+function settleSeconds(zeta: number, omega: number, visual: number): number {
+  let last = SETTLE_STEP;
+  for (let t = SETTLE_STEP; t < MAX_SPRING_SECONDS; t += SETTLE_STEP) {
+    if (Math.abs(springAt(zeta, omega, t) - 1) >= SETTLE_BAND) last = t;
+  }
+  return Math.min(MAX_SPRING_SECONDS, visual * SETTLE_LIMIT, last + SETTLE_STEP);
+}
+
+const SAMPLE_MS = 4;
+const MIN_SAMPLES = 24;
+const MAX_SAMPLES = 120;
+
+const trim = (n: number) => Math.round(n * 1e4) / 1e4;
+
+function toLinearEasing(at: (progress: number) => number, durationMs: number): string {
+  const steps = Math.min(MAX_SAMPLES, Math.max(MIN_SAMPLES, Math.round(durationMs / SAMPLE_MS)));
+  const points: string[] = [];
+  for (let i = 0; i <= steps; i++) points.push(String(trim(at(i / steps))));
+  return `linear(${points.join(',')})`;
+}
+
+interface SpringCurve {
+  duration: number;
+  easing: string;
+  at(progress: number): number;
+}
+
+const springCache = new Map<string, SpringCurve>();
+
+function springCurve(visual: number, bounce: number): SpringCurve {
+  const key = `${visual}:${bounce}`;
+  const cached = springCache.get(key);
+  if (cached) return cached;
+  const zeta = Math.min(1, Math.max(0.05, 1 - bounce));
+  const omega = omegaForArrival(zeta, visual);
+  const seconds = settleSeconds(zeta, omega, visual);
+  const duration = seconds * 1000;
+  const at = (progress: number) => (progress >= 1 ? 1 : springAt(zeta, omega, progress * seconds));
+  const curve: SpringCurve = { duration, easing: toLinearEasing(at, duration), at };
+  springCache.set(key, curve);
+  return curve;
+}
+
+export interface Timing extends Omit<MotionTransition, 'ease'> {
+  ease?: EaseValue | EaseValue[];
+  times?: number[];
+  fill?: FillMode;
+}
+
+export interface ResolvedTiming {
+  duration: number;
+  delay: number;
+  easing: string;
+  segments: string[] | null;
+  at(progress: number): number;
+}
+
+export function resolveTiming(timing: Timing = {}): ResolvedTiming {
+  const delay = (timing.delay ?? 0) * 1000;
+  const spring = timing.type === 'spring' || (timing.visualDuration != null && !timing.type);
+  if (spring) {
+    const visual = Math.max(timing.visualDuration ?? timing.duration ?? 0.3, 0.01);
+    const curve = springCurve(visual, timing.bounce ?? 0);
+    return { duration: curve.duration, delay, easing: curve.easing, segments: null, at: curve.at };
+  }
+  const duration = (timing.duration ?? 0.3) * 1000;
+  const ease = timing.ease;
+  if (isSegmented(ease)) {
+    const first = toBezier(ease[0]);
+    return { duration, delay, easing: 'linear', segments: ease.map(cssBezier), at: (p) => bezierAt(first, p) };
+  }
+  const bezier = ease === undefined ? NAMED.easeInOut : toBezier(ease);
+  return { duration, delay, easing: cssBezier(bezier), segments: null, at: (p) => bezierAt(bezier, p) };
+}

package/src/engine/flip.ts

@@ -0,0 +1,59 @@
+import { animate, type Layer, type Playback } from './animate';
+import type { Timing } from './ease';
+
+export interface Box {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+const MOVE_EPSILON = 0.5;
+const SCALE_EPSILON = 0.01;
+
+export function measure(el: HTMLElement): Box {
+  const rect = el.getBoundingClientRect();
+  return { left: rect.left + window.scrollX, top: rect.top + window.scrollY, width: rect.width, height: rect.height };
+}
+
+const shared = new Map<string, Box>();
+
+export function keepShared(key: string, box: Box): void {
+  shared.set(key, box);
+}
+
+export function readShared(key: string): Box | null {
+  return shared.get(key) ?? null;
+}
+
+export function dropShared(key: string): void {
+  shared.delete(key);
+}
+
+export interface FlipOptions {
+  scale?: boolean;
+  timing?: Timing;
+}
+
+export function flip(el: HTMLElement, from: Box, options: FlipOptions = {}): Playback | null {
+  const to = measure(el);
+  if (!to.width || !to.height) return null;
+
+  const dx = from.left - to.left;
+  const dy = from.top - to.top;
+  const sx = options.scale === false ? 1 : from.width / to.width;
+  const sy = options.scale === false ? 1 : from.height / to.height;
+
+  const moved = Math.abs(dx) > MOVE_EPSILON || Math.abs(dy) > MOVE_EPSILON;
+  const scaled = Math.abs(sx - 1) > SCALE_EPSILON || Math.abs(sy - 1) > SCALE_EPSILON;
+  if (!moved && !scaled) return null;
+
+  const layer: Layer = { x: [dx, 0], y: [dy, 0], timing: { ...options.timing, fill: 'none' } };
+  if (scaled)
+    layer.scale = [
+      [sx, sy],
+      [1, 1],
+    ];
+
+  return animate(el, layer);
+}

package/src/engine/index.ts

@@ -0,0 +1,13 @@
+export { animate, clock, type Layer, type Playback, type Size } from './animate';
+export {
+  bezierAt,
+  cssBezier,
+  isSegmented,
+  resolveTiming,
+  toBezier,
+  type EaseValue,
+  type ResolvedTiming,
+  type Timing,
+} from './ease';
+export { flip, measure, keepShared, readShared, dropShared, type Box, type FlipOptions } from './flip';
+export { startDrag, type PanInfo } from './drag';

package/src/mcp/server.ts

@@ -0,0 +1,420 @@
+import { existsSync, readFileSync, readdirSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+function findRoot(): string {
+  let dir = dirname(fileURLToPath(import.meta.url));
+  for (;;) {
+    const pj = join(dir, 'package.json');
+    if (existsSync(pj)) {
+      try {
+        if (JSON.parse(readFileSync(pj, 'utf8')).name === '@zyncat/ui') return dir;
+      } catch {}
+    }
+    const parent = dirname(dir);
+    if (parent === dir) throw new Error('@zyncat/ui package root not found');
+    dir = parent;
+  }
+}
+
+interface LlmsEntry {
+  title: string;
+  subpath: string;
+  section: string;
+  lines: string[];
+}
+interface LlmsSection {
+  title: string;
+  body: string[];
+}
+interface Db {
+  root: string;
+  version: string;
+  subpaths: string[];
+  preamble: string[];
+  sections: LlmsSection[];
+  entries: LlmsEntry[];
+}
+
+const SECTION_RE = /^=+\s+(.+?)\s*$/;
+const HEADING_RE = /^([A-Za-z][\w /]*?) - @zyncat\/ui\/([a-z][a-z0-9-]*)\b.*$/;
+
+let cached: Db | null = null;
+function db(): Db {
+  if (cached) return cached;
+  const root = findRoot();
+  const pkg = JSON.parse(readFileSync(join(root, 'package.json'), 'utf8'));
+  const subpaths = Object.entries(pkg.exports ?? {})
+    .filter(([, v]) => typeof v === 'object' && v !== null && 'types' in (v as object))
+    .map(([k]) => k.replace(/^\.\//, ''));
+
+  const preamble: string[] = [];
+  const sections: LlmsSection[] = [];
+  const entries: LlmsEntry[] = [];
+  let section: LlmsSection | null = null;
+  let entry: LlmsEntry | null = null;
+  const close = (e: LlmsEntry | null) => {
+    if (!e) return;
+    while (e.lines.length && !e.lines[e.lines.length - 1].trim()) e.lines.pop();
+    entries.push(e);
+  };
+  for (const line of readFileSync(join(root, 'llms.txt'), 'utf8').split('\n')) {
+    const sec = line.match(SECTION_RE);
+    const head = line.match(HEADING_RE);
+    if (sec) {
+      close(entry);
+      entry = null;
+      section = { title: sec[1], body: [] };
+      sections.push(section);
+    } else if (head) {
+      close(entry);
+      entry = { title: head[1].trim(), subpath: head[2], section: section?.title ?? '', lines: [line] };
+    } else if (entry) {
+      entry.lines.push(line);
+    } else if (section) {
+      section.body.push(line);
+    } else {
+      preamble.push(line);
+    }
+  }
+  close(entry);
+  for (const s of sections) {
+    while (s.body.length && !s.body[s.body.length - 1].trim()) s.body.pop();
+    while (s.body.length && !s.body[0].trim()) s.body.shift();
+  }
+  while (preamble.length && !preamble[preamble.length - 1].trim()) preamble.pop();
+
+  cached = { root, version: String(pkg.version ?? '0'), subpaths, preamble, sections, entries };
+  return cached;
+}
+
+const norm = (s: string) =>
+  s
+    .toLowerCase()
+    .replace(/^@zyncat\/ui\//, '')
+    .replace(/[^a-z0-9]/g, '');
+
+function resolveSubpath(input: string): string {
+  const d = db();
+  const q = norm(input);
+  if (!q) throw new Error('Pass a component name or subpath, e.g. "Button" or "text-field".');
+  const candidates = new Map<string, string>();
+  for (const sub of d.subpaths) candidates.set(norm(sub), sub);
+  for (const e of d.entries) for (const part of e.title.split('/')) candidates.set(norm(part), e.subpath);
+  const exact = candidates.get(q);
+  if (exact) return exact;
+  const loose = new Set<string>();
+  for (const [name, sub] of candidates) if (name.includes(q) || q.includes(name)) loose.add(sub);
+  if (loose.size === 1) return [...loose][0];
+  const all = d.entries.map((e) => `${e.title} (${e.subpath})`).join(', ');
+  const extras = d.subpaths.filter((s) => !d.entries.some((e) => e.subpath === s)).join(', ');
+  throw new Error(
+    (loose.size ? `"${input}" is ambiguous: ${[...loose].join(', ')}. ` : `No component matches "${input}". `) +
+      `Available: ${all}${extras ? `; types-only modules: ${extras}` : ''}.`,
+  );
+}
+
+function readTypes(root: string, subpath: string): string {
+  const out: string[] = [];
+  const seen = new Set<string>();
+  const walk = (base: string) => {
+    if (seen.has(base)) return;
+    seen.add(base);
+    const p = join(root, 'dist', `${base}.d.ts`);
+    if (!existsSync(p)) return;
+    const text = readFileSync(p, 'utf8');
+    out.push(`--- dist/${base}.d.ts ---\n${text.trimEnd()}`);
+    for (const m of text.matchAll(/from\s+['"]\.\/([\w.-]+)\.js['"]/g)) walk(m[1]);
+  };
+  walk(subpath);
+  if (!out.length) {
+    throw new Error(
+      `dist/${subpath}.d.ts not found - the package is not built. In the zyncat-ui repo run "pnpm build"; in a consumer, reinstall the package.`,
+    );
+  }
+  return out.join('\n\n');
+}
+
+const tokenFiles = (root: string): string[] =>
+  existsSync(join(root, 'src/tokens'))
+    ? readdirSync(join(root, 'src/tokens'))
+        .filter((f) => f.endsWith('.css'))
+        .sort()
+    : [];
+
+const CODE_LINE_RE = /^(?:[<{]|import\s|const\s|let\s|function\s)/;
+
+function entryTeaser(e: LlmsEntry): string {
+  const parts: string[] = [];
+  for (let i = 1; i < e.lines.length; i++) {
+    const line = e.lines[i].trim();
+    if (!line) break;
+    if (i > 1 && CODE_LINE_RE.test(line)) break;
+    parts.push(line);
+  }
+  return parts.join(' ');
+}
+
+function listComponents(): string {
+  const d = db();
+  const out: string[] = [...d.preamble, ''];
+  for (const s of d.sections) {
+    const inSection = d.entries.filter((e) => e.section === s.title);
+    if (!inSection.length && !s.body.length) continue;
+    out.push(`== ${s.title} ==`);
+    out.push(...s.body);
+    for (const e of inSection) {
+      const first = entryTeaser(e);
+      out.push(`${e.title} - @zyncat/ui/${e.subpath}${first ? ` - ${first}` : ''}`);
+    }
+    out.push('');
+  }
+  const extras = d.subpaths.filter((sub) => !d.entries.some((e) => e.subpath === sub));
+  if (extras.length) {
+    out.push('== SUPPORTING MODULES (no llms.txt entry - full docs live in their types) ==');
+    for (const sub of extras) out.push(`@zyncat/ui/${sub} - call get_component("${sub}")`);
+  }
+  return out.join('\n').trim();
+}
+
+function getComponent(input: string): string {
+  const d = db();
+  const sub = resolveSubpath(input);
+  const entry = d.entries.find((e) => e.subpath === sub);
+
+  const out: string[] = [`# ${entry ? entry.title : sub} - @zyncat/ui/${sub}`, ''];
+  if (entry) {
+    const note = d.sections.find((s) => s.title === entry.section)?.body ?? [];
+    if (note.length) out.push(`Applies to every ${entry.section} component:`, ...note, '');
+    out.push('## Usage (llms.txt)', ...entry.lines, '');
+  } else {
+    out.push('No llms.txt entry - this module is documented by its types below.', '');
+  }
+  out.push('## Types (entry .d.ts + the shared chunks it imports)', readTypes(d.root, sub));
+  return out.join('\n');
+}
+
+function searchApi(query: string): string {
+  const d = db();
+  const words = query.toLowerCase().split(/\s+/).filter(Boolean);
+  if (!words.length) throw new Error('Pass one or more keywords, e.g. "searchable" or "drag dismiss".');
+  const hits = new Map<string, string[]>();
+  const scan = (label: string, text: string, lineLabel?: (line: string, i: number) => string) => {
+    text.split('\n').forEach((line, i) => {
+      const l = line.toLowerCase();
+      if (!words.every((w) => l.includes(w))) return;
+      const key = lineLabel ? lineLabel(line, i) : label;
+      if (!hits.has(key)) hits.set(key, []);
+      hits.get(key)!.push(`  L${i + 1}: ${line.trim()}`);
+    });
+  };
+
+  {
+    const raw = readFileSync(join(d.root, 'llms.txt'), 'utf8');
+    const labels: string[] = [];
+    let current = 'llms.txt';
+    for (const line of raw.split('\n')) {
+      const sec = line.match(SECTION_RE);
+      const head = line.match(HEADING_RE);
+      if (sec) current = `llms.txt » ${sec[1]}`;
+      else if (head) current = `llms.txt » ${head[1].trim()}`;
+      labels.push(current);
+    }
+    scan('llms.txt', raw, (_line, i) => labels[i]);
+  }
+  const distDir = join(d.root, 'dist');
+  const dts = existsSync(distDir)
+    ? readdirSync(distDir)
+        .filter((f) => f.endsWith('.d.ts'))
+        .sort()
+    : [];
+  for (const f of dts) scan(`dist/${f}`, readFileSync(join(distDir, f), 'utf8'));
+  for (const f of tokenFiles(d.root)) scan(`src/tokens/${f}`, readFileSync(join(d.root, 'src/tokens', f), 'utf8'));
+
+  const out: string[] = [];
+  let shown = 0;
+  let total = 0;
+  for (const [, lines] of hits) total += lines.length;
+  for (const [label, lines] of hits) {
+    if (shown >= 60) break;
+    out.push(`## ${label}`);
+    for (const l of lines) {
+      if (shown >= 60) break;
+      out.push(l);
+      shown++;
+    }
+  }
+  if (!total) return `No matches for "${query}". Try a shorter keyword, or list_components for the full index.`;
+  if (total > shown) out.push(`... +${total - shown} more matching lines - narrow the query.`);
+  if (!dts.length) out.push('(note: dist/ is not built, so type definitions were not searched)');
+  out.push('', 'Follow up with get_component(<name>) for the full picture.');
+  return out.join('\n');
+}
+
+function getTokens(group?: string): string {
+  const d = db();
+  const files = tokenFiles(d.root);
+  if (!files.length) throw new Error('src/tokens/*.css not found in the installed package.');
+  let picked = files;
+  if (group) {
+    const q = norm(group);
+    picked = files.filter((f) => {
+      const name = norm(f.replace(/\.css$/, ''));
+      return name.includes(q) || q.includes(name);
+    });
+    if (!picked.length) {
+      throw new Error(
+        `No token group matches "${group}". Groups: ${files.map((f) => f.replace(/\.css$/, '')).join(', ')}.`,
+      );
+    }
+  }
+  const out = picked.map(
+    (f) => `/* ==== src/tokens/${f} ==== */\n${readFileSync(join(d.root, 'src/tokens', f), 'utf8').trimEnd()}`,
+  );
+  const theming = d.sections.find((s) => s.title.includes('THEMING'));
+  if (theming?.body.length) out.push(['/* ==== theming ==== */', ...theming.body].join('\n'));
+  return out.join('\n\n');
+}
+
+const TOOLS = [
+  {
+    name: 'list_components',
+    description:
+      'Every Zyncat UI component: name, import subpath and one-line purpose, grouped by category, plus package setup and usage conventions. Start here instead of exploring node_modules.',
+    inputSchema: { type: 'object', properties: {}, additionalProperties: false },
+  },
+  {
+    name: 'get_component',
+    description:
+      "Full API for one component: the maintainers' usage notes and example plus the complete TypeScript prop types with doc comments (shared type chunks inlined). Cheaper and more accurate than reading node_modules/@zyncat/ui yourself.",
+    inputSchema: {
+      type: 'object',
+      properties: {
+        component: {
+          type: 'string',
+          description: 'Component name or subpath - "Button", "TextField", "text-field", "@zyncat/ui/select".',
+        },
+      },
+      required: ['component'],
+      additionalProperties: false,
+    },
+  },
+  {
+    name: 'search_api',
+    description:
+      'Keyword search across all component docs, type definitions and design-token CSS. Finds which component owns a prop, type, token or behavior (e.g. "searchable", "DurationToken", "drag dismiss", "--accent"). Every word must match a line; follow up with get_component.',
+    inputSchema: {
+      type: 'object',
+      properties: { query: { type: 'string', description: 'One or more keywords.' } },
+      required: ['query'],
+      additionalProperties: false,
+    },
+  },
+  {
+    name: 'get_tokens',
+    description:
+      'The design-token vocabulary as CSS custom properties with their real values - color, semantic, spacing, typography, radius, elevation, motion, icons, layers, glass, avatar, fonts. Optionally pass one group name; omit for all. Use for theming/overrides and for reading exact values.',
+    inputSchema: {
+      type: 'object',
+      properties: {
+        group: { type: 'string', description: 'One token group, e.g. "color" or "motion". Omit for all.' },
+      },
+      additionalProperties: false,
+    },
+  },
+];
+
+const INSTRUCTIONS =
+  'Zyncat UI design-system API. Before writing Zyncat UI code, use these tools instead of reading ' +
+  'node_modules or guessing props: list_components (what exists + setup and conventions), get_component ' +
+  '(one component: usage docs + complete prop types), search_api (find the component/prop/token for a ' +
+  'keyword), get_tokens (CSS custom-property vocabulary with real values, for theming). Imports are ' +
+  'per-subpath (@zyncat/ui/button - no barrel); link @zyncat/ui/styles.css once at the root.';
+
+function callTool(name: string, args: Record<string, unknown>): string {
+  const str = (k: string) => (typeof args[k] === 'string' ? (args[k] as string) : undefined);
+  switch (name) {
+    case 'list_components':
+      return listComponents();
+    case 'get_component': {
+      const component = str('component');
+      if (!component) throw new Error('Missing required argument "component".');
+      return getComponent(component);
+    }
+    case 'search_api': {
+      const query = str('query');
+      if (!query) throw new Error('Missing required argument "query".');
+      return searchApi(query);
+    }
+    case 'get_tokens':
+      return getTokens(str('group'));
+    default:
+      throw new Error(`Unknown tool: ${name}`);
+  }
+}
+
+type RpcId = number | string | null;
+function send(msg: object): void {
+  try {
+    process.stdout.write(`${JSON.stringify(msg)}\n`);
+  } catch {
+    process.exit(0);
+  }
+}
+const reply = (id: RpcId, result: object) => send({ jsonrpc: '2.0', id, result });
+const replyError = (id: RpcId, code: number, message: string) => send({ jsonrpc: '2.0', id, error: { code, message } });
+
+function handle(req: { id?: RpcId; method?: string; params?: Record<string, unknown> }): void {
+  const { id, method, params } = req;
+  const isNotification = id === undefined;
+  switch (method) {
+    case 'initialize': {
+      let version = '0.0.0';
+      try {
+        version = db().version;
+      } catch {}
+      return reply(id!, {
+        protocolVersion: typeof params?.protocolVersion === 'string' ? params.protocolVersion : '2025-06-18',
+        capabilities: { tools: {} },
+        serverInfo: { name: 'zyncat-ui', version },
+        instructions: INSTRUCTIONS,
+      });
+    }
+    case 'ping':
+      return reply(id!, {});
+    case 'tools/list':
+      return reply(id!, { tools: TOOLS });
+    case 'tools/call': {
+      try {
+        const name = typeof params?.name === 'string' ? params.name : '';
+        const args = (params?.arguments ?? {}) as Record<string, unknown>;
+        const text = callTool(name, args);
+        return reply(id!, { content: [{ type: 'text', text }], isError: false });
+      } catch (e) {
+        const text = e instanceof Error ? e.message : String(e);
+        return reply(id!, { content: [{ type: 'text', text }], isError: true });
+      }
+    }
+    default:
+      if (!isNotification) replyError(id ?? null, -32601, `Method not found: ${method}`);
+  }
+}
+
+let buffer = '';
+process.stdin.setEncoding('utf8');
+process.stdin.on('data', (chunk: string) => {
+  buffer += chunk;
+  let nl: number;
+  while ((nl = buffer.indexOf('\n')) !== -1) {
+    const line = buffer.slice(0, nl).trim();
+    buffer = buffer.slice(nl + 1);
+    if (!line) continue;
+    try {
+      handle(JSON.parse(line));
+    } catch {
+      replyError(null, -32700, 'Parse error');
+    }
+  }
+});
+process.stdin.on('end', () => process.exit(0));
+process.stdout.on('error', () => process.exit(0));

package/src/motion/element.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { createElement, useCallback, useRef, type ReactNode, type Ref } from 'react';
+import { useSelfFlip, useSharedFlip, type FlipTuning } from './flip';
+import { useMotion, type MotionSpecs } from './use-motion';
+
+export interface MotionProps extends MotionSpecs {
+  /** Tag for the element this renders. @default 'div' */
+  as?: string;
+  /** FLIP this element from its previous box on every render; an object tunes the timing. */
+  layout?: boolean | FlipTuning;
+  /** FLIP from whatever element last held this id, so the box travels between nodes. */
+  layoutId?: string;
+  ref?: Ref<HTMLElement | null>;
+  children?: ReactNode;
+  [prop: string]: unknown;
+}
+
+export function Motion({
+  as = 'div',
+  animate,
+  exit,
+  initial,
+  deps,
+  layout,
+  layoutId,
+  ref,
+  children,
+  ...rest
+}: MotionProps) {
+  const tuning = typeof layout === 'object' ? layout : {};
+  const selfRef = useSelfFlip<HTMLElement>(tuning, !!layout && !layoutId);
+  const sharedRef = useSharedFlip<HTMLElement>(layoutId ?? '', tuning, !!layoutId);
+  const host = useRef<HTMLElement | null>(null);
+  const forwarded = useRef(ref);
+  forwarded.current = ref;
+
+  useMotion(host, { animate, exit, initial, deps });
+
+  const attach = useCallback(
+    (el: HTMLElement | null) => {
+      host.current = el;
+      selfRef.current = el;
+      sharedRef.current = el;
+      const outer = forwarded.current;
+      if (typeof outer === 'function') outer(el);
+      else if (outer) outer.current = el;
+    },
+    [selfRef, sharedRef],
+  );
+
+  return createElement(as, { ...rest, ref: attach }, children);
+}