@impractical-ai/motion 0.1.5 → 0.1.7

package/assets/kits/sentence.ts

@@ -0,0 +1,218 @@
+// The live-sentence kit: a sentence is a stateful object, not a static block.
+// Words land into it, slots cycle, one accent color stresses the pivot, words
+// morph, and a word slot can hold a media chip. Evidence: Dropbox Dash,
+// Pitch 2.0, Apple News+ (see references/cards/ + docs/motion-vocabulary-log.md).
+//
+// Determinism: every state change is a tween on the master timeline. New
+// words are mounted at build time (hidden, holding layout space) so seeking
+// is pure; optional `recenter` shifts the container by half the added width
+// instead of re-flowing live.
+import { resolveTarget } from './kits'
+
+type Position = number | string | undefined
+
+const ENTER_EASE = 'ease-out-quint'
+const MOVE_EASE = 'ease-in-out-cubic'
+const DEFAULT_ACCENT = '#2f6bff'
+
+export type SentenceHandle = {
+  el: HTMLElement
+  append: (text: string, opts?: { stagger?: number; duration?: number; recenter?: boolean; stress?: boolean }, position?: Position) => { duration: number }
+  swap: (slot: string, alternatives: string[], opts?: { interval?: number; stress?: boolean; align?: 'anchor' | 'recenter' }, position?: Position) => { duration: number }
+  stress: (word: string, opts?: { color?: string; duration?: number }, position?: Position) => { duration: number }
+  morphWord: (from: string, to: string, opts?: { duration?: number }, position?: Position) => { duration: number }
+  chip: (word: string, media: HTMLElement, opts?: { height?: number; radius?: number }, position?: Position) => HTMLElement
+}
+
+export function createSentenceKit(deps: {
+  tl: any
+  gsap: any
+  stage: HTMLElement
+  accent?: string
+}) {
+  const { tl, gsap, stage } = deps
+  const accent = deps.accent ?? DEFAULT_ACCENT
+  const at = (position: Position): number => (typeof position === 'number' ? position : tl.duration())
+
+  const measureWith = (el: HTMLElement): ((s: string) => number) => {
+    const style = getComputedStyle(el)
+    const ctx = document.createElement('canvas').getContext('2d')!
+    ctx.font = `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`
+    return (s) => ctx.measureText(s).width
+  }
+
+  const wordSpan = (word: string): HTMLElement => {
+    const span = document.createElement('span')
+    span.dataset.word = word
+    span.style.cssText = 'display:inline-block;white-space:pre;'
+    span.textContent = word
+    return span
+  }
+
+  const sentence = (target: string | Element): SentenceHandle => {
+    const el = resolveTarget(stage, target, 'sentence')
+    // Take over: rebuild existing text as word spans so every word is a target.
+    const initial = (el.textContent ?? '').trim()
+    el.textContent = ''
+    const spans: HTMLElement[] = []
+    const mountWords = (text: string): HTMLElement[] => {
+      const out: HTMLElement[] = []
+      for (const word of text.split(/\s+/).filter(Boolean)) {
+        if (spans.length || out.length) {
+          const gap = document.createElement('span')
+          gap.textContent = ' '
+          gap.style.whiteSpace = 'pre'
+          el.appendChild(gap)
+        }
+        const span = wordSpan(word)
+        el.appendChild(span)
+        out.push(span)
+        spans.push(span)
+      }
+      return out
+    }
+    if (initial) mountWords(initial)
+
+    const find = (word: string): HTMLElement | null =>
+      spans.find((s) => s.dataset.word === word || s.textContent === word) ?? null
+
+    const handle: SentenceHandle = {
+      el,
+
+      append: (text, opts = {}, position) => {
+        const start = at(position)
+        const added = mountWords(text)
+        const stagger = opts.stagger ?? 0.14
+        const duration = opts.duration ?? 0.45
+        const measure = measureWith(el)
+        // Hidden from frame 0, holding space — entrance is a pure tween.
+        for (const [i, span] of added.entries()) {
+          gsap.set(span, { autoAlpha: 0, yPercent: 55 })
+          tl.to(span, { autoAlpha: 1, yPercent: 0, duration, ease: ENTER_EASE }, start + i * stagger)
+          if (opts.stress) tl.set(span, { color: accent }, start + i * stagger)
+        }
+        if (opts.recenter) {
+          // Visually re-center without live reflow: pre-shift by half the
+          // added width, then ease back to rest as the words land.
+          const addedWidth = added.reduce((w, s) => w + measure(`${s.textContent} `), 0)
+          gsap.set(el, { x: addedWidth / 2 })
+          tl.to(el, { x: 0, duration: duration + stagger * added.length, ease: MOVE_EASE }, start)
+        }
+        return { duration: duration + stagger * Math.max(0, added.length - 1) }
+      },
+
+      swap: (slot, alternatives, opts = {}, position) => {
+        const span = find(slot)
+        if (!span) return { duration: 0 }
+        const start = at(position)
+        const interval = opts.interval ?? 0.7
+        // 'anchor' (default): the slot reserves the WIDEST alternative up
+        // front, so a centered sentence never shifts as words cycle.
+        // 'recenter': the slot width animates and the line re-flows live.
+        const align = opts.align ?? 'anchor'
+        const measure = measureWith(el)
+        // The slot becomes a fixed-height window; alternates rise through it.
+        const holder = document.createElement('span')
+        holder.style.cssText = 'display:inline-block;position:relative;white-space:pre;vertical-align:baseline;'
+        span.parentElement?.insertBefore(holder, span)
+        holder.appendChild(span)
+        span.style.display = 'inline-block'
+        const layers: HTMLElement[] = [span]
+        for (const alt of alternatives) {
+          const layer = wordSpan(alt)
+          layer.style.cssText += 'position:absolute;left:0;top:0;'
+          if (opts.stress !== false) layer.style.color = accent
+          gsap.set(layer, { autoAlpha: 0 })
+          holder.appendChild(layer)
+          layers.push(layer)
+          // Later verbs must be able to find the word that ends up visible.
+          spans.push(layer)
+        }
+        if (opts.stress !== false) span.style.color = accent
+        const widths = [measure(span.textContent ?? ''), ...alternatives.map((a) => measure(a))]
+        if (align === 'anchor') {
+          gsap.set(holder, { width: Math.max(...widths) })
+        } else {
+          gsap.set(holder, { width: widths[0] })
+        }
+        for (let i = 1; i < layers.length; i += 1) {
+          const t = start + (i - 1) * interval
+          tl.to(layers[i - 1], { autoAlpha: 0, yPercent: -50, duration: 0.28, ease: 'ease-in-quad' }, t)
+          tl.fromTo(layers[i], { autoAlpha: 0, yPercent: 55 }, { autoAlpha: 1, yPercent: 0, duration: 0.34, ease: ENTER_EASE }, t + 0.06)
+          if (align === 'recenter') {
+            tl.to(holder, { width: widths[i], duration: 0.3, ease: MOVE_EASE }, t)
+          }
+        }
+        return { duration: (layers.length - 1) * interval + 0.4 }
+      },
+
+      stress: (word, opts = {}, position) => {
+        const span = find(word)
+        if (!span) return { duration: 0 }
+        const duration = opts.duration ?? 0.3
+        tl.to(span, { color: opts.color ?? accent, duration, ease: MOVE_EASE }, at(position))
+        return { duration }
+      },
+
+      morphWord: (from, to, opts = {}, position) => {
+        const span = find(from)
+        if (!span) return { duration: 0 }
+        const start = at(position)
+        const duration = opts.duration ?? 0.32
+        // Keep the shared prefix; crossfade only the differing tail, so
+        // "it!" → "it?" reads as the punctuation flipping.
+        const a = span.textContent ?? ''
+        let p = 0
+        while (p < a.length && p < to.length && a[p] === to[p]) p += 1
+        const prefix = a.slice(0, p)
+        span.textContent = ''
+        span.dataset.word = to
+        const stay = document.createElement('span')
+        stay.textContent = prefix
+        stay.style.whiteSpace = 'pre'
+        const holder = document.createElement('span')
+        holder.style.cssText = 'display:inline-block;position:relative;white-space:pre;'
+        const oldTail = document.createElement('span')
+        oldTail.textContent = a.slice(p)
+        oldTail.style.cssText = 'display:inline-block;white-space:pre;'
+        const newTail = document.createElement('span')
+        newTail.textContent = to.slice(p)
+        newTail.style.cssText = 'display:inline-block;white-space:pre;position:absolute;left:0;top:0;'
+        gsap.set(newTail, { autoAlpha: 0, yPercent: 45 })
+        holder.appendChild(oldTail)
+        holder.appendChild(newTail)
+        span.appendChild(stay)
+        span.appendChild(holder)
+        tl.to(oldTail, { autoAlpha: 0, yPercent: -45, duration, ease: 'ease-in-quad' }, start)
+        tl.to(newTail, { autoAlpha: 1, yPercent: 0, duration, ease: ENTER_EASE }, start + 0.05)
+        return { duration: duration + 0.05 }
+      },
+
+      chip: (word, media, opts = {}, position) => {
+        const span = find(word)
+        const start = at(position)
+        const height = opts.height ?? 1.05
+        const chipEl = document.createElement('span')
+        chipEl.dataset.chip = ''
+        chipEl.style.cssText =
+          `display:inline-block;vertical-align:-0.18em;height:${height}em;` +
+          `border-radius:${opts.radius ?? 0.28}em;overflow:hidden;position:relative;`
+        media.style.cssText += ';display:block;height:100%;width:auto;'
+        chipEl.appendChild(media)
+        if (span) {
+          span.parentElement?.insertBefore(chipEl, span)
+          // The word makes room, the chip pops in its place.
+          gsap.set(span, { display: 'none' })
+        } else {
+          el.appendChild(chipEl)
+        }
+        gsap.set(chipEl, { width: 0, autoAlpha: 0 })
+        tl.to(chipEl, { width: 'auto', autoAlpha: 1, duration: 0.4, ease: ENTER_EASE }, start)
+        return chipEl
+      },
+    }
+    return handle
+  }
+
+  return { sentence }
+}

package/assets/kits/streamkit.ts

@@ -0,0 +1,195 @@
+// Streaming states — the choreographed WAITING that AI products live in.
+// Mined from Dropbox Dash, Pitch 2.0 and Notion AI (3/3 films treat the wait
+// as a beat, not a gap): an answer arrives word by word, placeholders shimmer
+// while work happens, and a status line names what is being done.
+//
+// Determinism: every state is a pure function of timeline position — word
+// reveal runs on a stepped proxy, the shimmer is a tweened background offset,
+// status phases are value tweens. Nothing reads a clock, nothing is random,
+// and every element ends at an exact final state (fully revealed / removed).
+import { resolveTarget } from './kits'
+
+type Position = number | string | undefined
+
+export type StreamKit = {
+  /** An answer arrives WORD BY WORD, LLM-style. The element's text is split
+   * into word spans at build time (layout is therefore stable from frame 0);
+   * the reveal is a stepped proxy, so seeking anywhere lands on the exact
+   * word count for that time. No caret — this is a machine writing, not a
+   * person typing (use `typeInto` for a person). */
+  answer: (
+    target: string | Element,
+    text?: string,
+    opts?: { wps?: number; duration?: number; rise?: number },
+    position?: Position
+  ) => { duration: number }
+  /** Placeholder lines that shimmer while work happens, then resolve into
+   * the real content. Mounts over the target, so the target's own layout is
+   * untouched. `lines` defaults to 3; `resolve` is how long the crossfade to
+   * real content takes. */
+  skeleton: (
+    target: string | Element,
+    opts?: { lines?: number; duration?: number; resolve?: number; widths?: number[] },
+    position?: Position
+  ) => { duration: number }
+  /** A status line naming the work: 'Analyzing' → 'Searching 3 sources' →
+   * 'Writing'. Each phase holds `interval` seconds; the last one stays until
+   * the caller hides it. Phases rise in place, so the line never jumps. */
+  status: (
+    target: string | Element,
+    phases: string[],
+    opts?: { interval?: number; done?: boolean },
+    position?: Position
+  ) => { duration: number }
+}
+
+export function createStreamKit(deps: {
+  tl: any
+  gsap: any
+  stage: HTMLElement
+}): StreamKit {
+  const { tl, gsap, stage } = deps
+  const at = (position: Position): number => (typeof position === 'number' ? position : tl.duration())
+
+  const answer: StreamKit['answer'] = (target, text, opts = {}, position) => {
+    const el = resolveTarget(stage, target, 'stream.answer')
+    const source = (text ?? el.textContent ?? '').trim()
+    const words = source.split(/\s+/).filter(Boolean)
+    if (!words.length) return { duration: 0 }
+    const wps = opts.wps ?? 9
+    const duration = opts.duration ?? words.length / wps
+    const rise = opts.rise ?? 6
+    const start = at(position)
+
+    // Words are mounted (and therefore laid out) at build time; only their
+    // visibility animates, so nothing reflows mid-stream.
+    el.textContent = ''
+    const spans: HTMLElement[] = words.map((w, i) => {
+      const span = document.createElement('span')
+      span.textContent = i === 0 ? w : ` ${w}`
+      span.style.cssText = 'display:inline-block;white-space:pre;'
+      el.appendChild(span)
+      return span
+    })
+    for (const s of spans) gsap.set(s, { autoAlpha: 0, y: rise })
+
+    const proxy = { n: 0 }
+    let shown = 0
+    tl.to(
+      proxy,
+      {
+        n: words.length,
+        duration,
+        ease: `steps(${words.length})`,
+        onUpdate: () => {
+          const n = Math.max(0, Math.min(words.length, Math.round(proxy.n)))
+          if (n === shown) return
+          // Seek-safe: recompute every word's state from n, never increment.
+          for (let i = 0; i < words.length; i += 1) {
+            gsap.set(spans[i], { autoAlpha: i < n ? 1 : 0, y: i < n ? 0 : rise })
+          }
+          shown = n
+        },
+      },
+      start
+    )
+    // Exact end state for cold-seeking export workers.
+    tl.set(spans, { autoAlpha: 1, y: 0 }, start + duration)
+    return { duration }
+  }
+
+  /** Nearest painted background, so placeholders can pick a contrasting tone.
+   * A dark-surface skeleton drawn in black ink is invisible — the bug this
+   * exists to prevent. */
+  const surfaceIsDark = (el: HTMLElement): boolean => {
+    let node: HTMLElement | null = el
+    while (node) {
+      const bg = getComputedStyle(node).backgroundColor
+      const m = bg.match(/rgba?\(([^)]+)\)/)
+      if (m) {
+        const [r, g, b, a] = m[1].split(',').map((v) => parseFloat(v))
+        if (a === undefined || a > 0.05) {
+          return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255 < 0.5
+        }
+      }
+      node = node.parentElement
+    }
+    return false
+  }
+
+  const skeleton: StreamKit['skeleton'] = (target, opts = {}, position) => {
+    const el = resolveTarget(stage, target, 'stream.skeleton')
+    const ink = surfaceIsDark(el) ? '255,255,255' : '0,0,0'
+    const lines = opts.lines ?? 3
+    const duration = opts.duration ?? 1.4
+    const resolve = opts.resolve ?? 0.3
+    const widths = opts.widths ?? [1, 0.82, 0.64]
+    const start = at(position)
+
+    if (getComputedStyle(el).position === 'static') el.style.position = 'relative'
+    const holder = document.createElement('div')
+    holder.dataset.skeleton = ''
+    holder.style.cssText = 'position:absolute;inset:0;pointer-events:none;'
+    const bars: HTMLElement[] = []
+    for (let i = 0; i < lines; i += 1) {
+      const bar = document.createElement('div')
+      bar.style.cssText =
+        `position:absolute;left:0;top:${i * 34}px;height:16px;border-radius:8px;` +
+        `width:${Math.round((widths[i % widths.length] ?? 0.7) * 100)}%;` +
+        // A soft moving gradient — never a 1px pattern (those alias in H.264).
+        `background:linear-gradient(90deg, rgba(${ink},0.10) 0%, rgba(${ink},0.22) 45%, rgba(${ink},0.10) 100%);` +
+        `background-size:220% 100%;`
+      holder.appendChild(bar)
+      bars.push(bar)
+    }
+    el.appendChild(holder)
+
+    // Real content is hidden behind the skeleton, then crossfaded in.
+    const content = Array.from(el.children).filter((c) => c !== holder) as HTMLElement[]
+    gsap.set(content, { autoAlpha: 0 })
+    gsap.set(holder, { autoAlpha: 1 })
+    for (const [i, bar] of bars.entries()) {
+      tl.fromTo(
+        bar,
+        { backgroundPosition: '120% 0' },
+        { backgroundPosition: '-120% 0', duration: duration * 0.55, ease: 'none', repeat: 1 },
+        start + i * 0.08
+      )
+    }
+    tl.to(holder, { autoAlpha: 0, duration: resolve, ease: 'ease-in-quad' }, start + duration)
+    tl.to(content, { autoAlpha: 1, duration: resolve, ease: 'ease-out-quad' }, start + duration)
+    return { duration: duration + resolve }
+  }
+
+  const status: StreamKit['status'] = (target, phases, opts = {}, position) => {
+    const el = resolveTarget(stage, target, 'stream.status')
+    if (!phases.length) return { duration: 0 }
+    const interval = opts.interval ?? 1.1
+    const start = at(position)
+    el.textContent = ''
+    if (getComputedStyle(el).position === 'static') el.style.position = 'relative'
+    const layers = phases.map((p) => {
+      const span = document.createElement('span')
+      span.textContent = p
+      span.style.cssText = 'position:absolute;left:0;top:0;white-space:pre;'
+      el.appendChild(span)
+      return span
+    })
+    // The line keeps its box: the element holds the widest phase.
+    el.style.minHeight = '1em'
+    gsap.set(layers, { autoAlpha: 0, y: 8 })
+    gsap.set(layers[0], { autoAlpha: 1, y: 0 })
+    for (let i = 1; i < layers.length; i += 1) {
+      const t = start + i * interval
+      tl.to(layers[i - 1], { autoAlpha: 0, y: -8, duration: 0.22, ease: 'ease-in-quad' }, t)
+      tl.fromTo(layers[i], { autoAlpha: 0, y: 8 }, { autoAlpha: 1, y: 0, duration: 0.26, ease: 'ease-out-quint' }, t + 0.05)
+    }
+    const total = phases.length * interval
+    if (opts.done !== false) {
+      tl.to(layers[layers.length - 1], { autoAlpha: 0, duration: 0.22, ease: 'ease-in-quad' }, start + total)
+    }
+    return { duration: total }
+  }
+
+  return { answer, skeleton, status }
+}

package/dist/{api-KD6BNKBQ.js → api-DR3NJ7TI.js}

@@ -2,6 +2,7 @@
 import {
   ApiContractError,
   ApiError,
+  ApiTransportError,
   admitMcpCall,
   delay,
   invoke,
@@ -12,11 +13,13 @@ import {
   waitForJobs,
   withAdmissionReceipt,
   withMeteredCall
-} from "./chunk-7724464Z.js";
-import "./chunk-JDN3QHCX.js";
+} from "./chunk-MQKW7NFI.js";
+import "./chunk-Z74SLKEU.js";
+import "./chunk-77HVPD4G.js";
 export {
   ApiContractError,
   ApiError,
+  ApiTransportError,
   admitMcpCall,
   delay,
   invoke,

package/dist/chunk-77HVPD4G.js

@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+var __commonJS = (cb, mod) => function __require2() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+export {
+  __require,
+  __commonJS,
+  __export,
+  __toESM
+};