framefields 2.4.3 → 2.5.1

package/dist/registry/annotate.json

@@ -0,0 +1,30 @@
+{
+	"name": "annotate",
+	"title": "Annotate",
+	"summary": "Marks that draw on to point at something: underline, circle, box, highlight, strike, cross, bracket, arrow or squiggle, clean or hand-drawn with a boil, with an optional label.",
+	"tags": [
+		"annotation",
+		"underline",
+		"highlight",
+		"arrow",
+		"hand-drawn",
+		"explainer"
+	],
+	"example": "Annotate({ target: { text: headline, match: \"faster\" }, mark: \"circle\" })",
+	"parts": [
+		"stroke-<n>",
+		"head",
+		"label"
+	],
+	"cues": [
+		"drawn",
+		"labelIn"
+	],
+	"registryDependencies": [],
+	"files": [
+		{
+			"path": "annotate/index.ts",
+			"content": "/**\n * Annotate: marks that draw on to point at something. Underline a phrase,\n * circle a number, strike a claim, box a region, draw an arrow; clean\n * geometry or hand-drawn, with a boil that keeps hand-drawn marks alive.\n *\n * Coordinates are the parent's: the root sits at 0, 0, so targets resolve\n * where they are drawn. Text targets give one mark per line.\n */\nimport { LayerAnimation, type LayoutNode } from \"framefields\";\nimport {\n\tanchorPoint,\n\ttype Animatable,\n\ttype ArrowCurve,\n\tarrowPaths,\n\tbindComponent,\n\tboilKeys,\n\tboundsOf,\n\tboxPath,\n\tcontrastRatio,\n\tdefineComponent,\n\tellipsePath,\n\tlinePath,\n\ttype Rect,\n\tresolveTarget,\n\tscaleFrames,\n\tsquigglePath,\n\ttype Target,\n\ttargetSchema,\n\tthemeFrames,\n\ttoPathData,\n\ttype Vec2,\n\twobblePoints,\n\tz,\n} from \"framefields/components\";\n\nexport const MARKS = [\n\t\"underline\",\n\t\"circle\",\n\t\"box\",\n\t\"highlight\",\n\t\"strike\",\n\t\"cross\",\n\t\"bracket\",\n\t\"arrow\",\n\t\"squiggle\",\n] as const;\nexport type Mark = (typeof MARKS)[number];\n\nconst TEXTURE = {\n\t/** Even, confident line. */\n\tink: { width: 1, opacity: 1 },\n\t/** Broad felt tip. */\n\tmarker: { width: 1.5, opacity: 0.94 },\n\t/** Thin and light. */\n\tpencil: { width: 0.55, opacity: 0.85 },\n} as const;\n\nexport interface AnnotateCues {\n\t[name: string]: ReadonlyArray<{ frame: number }>;\n\t/** The mark is fully drawn. */\n\tdrawn: ReadonlyArray<{ frame: number }>;\n\t/** The label starts to appear (empty without a label). */\n\tlabelIn: ReadonlyArray<{ frame: number }>;\n}\n\n/** One stroke of a mark: its path for a boil variant, and a length for pacing. */\ninterface Stroke {\n\tpath(variant: number): string;\n\tlength: number;\n\tkind: \"line\" | \"fill\" | \"head\";\n}\n\nexport const annotate = /* @__PURE__ */ defineComponent({\n\tname: \"Annotate\",\n\tprops: () => ({\n\t\t/** What to mark. Rects (e.g. `TextReveal.rects(\"word\")`) give one mark per rect for line marks. */\n\t\ttarget: z.union([\n\t\t\tz.array(\n\t\t\t\tz.object({\n\t\t\t\t\tx: z.number(),\n\t\t\t\t\ty: z.number(),\n\t\t\t\t\twidth: z.number(),\n\t\t\t\t\theight: z.number(),\n\t\t\t\t}),\n\t\t\t),\n\t\t\ttargetSchema(),\n\t\t]),\n\t\tmark: z.enum(MARKS).default(\"underline\"),\n\t\t/** Where an arrow starts (it points at `target`). */\n\t\tfrom: targetSchema().optional(),\n\t\tcurve: z.enum([\"straight\", \"arc\", \"swoop\"]).default(\"arc\"),\n\t\tcolor: z.string().optional(),\n\t\t/** Stroke width before the texture's factor. Default the theme's bold stroke. */\n\t\twidth: z.number().positive().optional(),\n\t\t/** `wobble` 0–1 (how loose the hand is); `boil`: frames between re-poses, 0 = still. */\n\t\thand: z\n\t\t\t.union([\n\t\t\t\tz.literal(false),\n\t\t\t\tz\n\t\t\t\t\t.object({\n\t\t\t\t\t\twobble: z.number().min(0).max(1).default(0.6),\n\t\t\t\t\t\tboil: z.number().int().min(0).default(4),\n\t\t\t\t\t\tseed: z.number().int().optional(),\n\t\t\t\t\t})\n\t\t\t\t\t.strict(),\n\t\t\t])\n\t\t\t.default({ wobble: 0.6, boil: 4 }),\n\t\ttexture: z.enum([\"ink\", \"marker\", \"pencil\"]).default(\"marker\"),\n\t\t/** Frames the mark takes to draw. Default the theme's base speed (× 1.5 for arrows). */\n\t\tdrawDuration: z.number().int().positive().optional(),\n\t\tlabel: z\n\t\t\t.union([\n\t\t\t\tz.string(),\n\t\t\t\tz\n\t\t\t\t\t.object({\n\t\t\t\t\t\ttext: z.string(),\n\t\t\t\t\t\tside: z\n\t\t\t\t\t\t\t.enum([\"auto\", \"top\", \"bottom\", \"left\", \"right\"])\n\t\t\t\t\t\t\t.default(\"auto\"),\n\t\t\t\t\t\tfont: z.string().optional(),\n\t\t\t\t\t\tsize: z.number().positive().optional(),\n\t\t\t\t\t})\n\t\t\t\t\t.strict(),\n\t\t\t])\n\t\t\t.optional(),\n\t\t/** Space between the target and the mark. */\n\t\tpadding: z.number().min(0).default(8),\n\t}),\n\tdefaults: { enter: false, exit: false, hold: 45 },\n\tbuild(ctx, props) {\n\t\tconst { host, theme, fps } = ctx;\n\t\tconst s = theme.scale;\n\t\tconst pad = props.padding * s;\n\t\tconst hand = props.hand === false ? null : props.hand;\n\t\tconst wobble = (hand?.wobble ?? 0) * 5 * s;\n\t\tconst seed = hand?.seed ?? ctx.seed;\n\t\tconst texture = TEXTURE[props.texture];\n\t\tconst strokeW = (props.width ?? theme.stroke.bold * s) * texture.width;\n\t\tconst color = props.color ?? theme.color.highlight;\n\n\t\t// ── Geometry ─────────────────────────────────────────────────────\n\t\tconst resolve = (t: Target) => {\n\t\t\tconst r = resolveTarget(t, { measure: host.measure, fps });\n\t\t\tif (r.kind !== \"static\")\n\t\t\t\tthrow new Error(\n\t\t\t\t\t\"Annotate: targets must be static (points, rects, nodes, text). Moving targets arrive with Callout.\",\n\t\t\t\t);\n\t\t\treturn r;\n\t\t};\n\t\tconst isRects =\n\t\t\tArray.isArray(props.target) && typeof props.target[0] === \"object\";\n\t\tconst resolved = isRects ? null : resolve(props.target as Target);\n\t\tconst rects: Rect[] = isRects\n\t\t\t? (props.target as Rect[])\n\t\t\t: (resolved?.rects ?? []);\n\t\tif (rects.length === 0)\n\t\t\tthrow new Error(\"Annotate: the target covers nothing.\");\n\t\tconst isText =\n\t\t\tisRects ||\n\t\t\t(typeof props.target === \"object\" &&\n\t\t\t\tprops.target !== null &&\n\t\t\t\t\"text\" in (props.target as object));\n\t\tconst b = boundsOf(rects);\n\t\tconst hw = { wobble, seed };\n\n\t\tconst strokes: Stroke[] = [];\n\t\t/** Points outside the target the strokes reach (an arrow's tail). */\n\t\tconst reach: Vec2[] = [];\n\t\tconst lineAt = (y: (r: Rect) => number, extend: number) =>\n\t\t\trects.forEach((r) => {\n\t\t\t\tconst from: Vec2 = [r.x - extend, y(r)];\n\t\t\t\tconst to: Vec2 = [r.x + r.width + extend, y(r)];\n\t\t\t\tstrokes.push({\n\t\t\t\t\tpath: (v) => linePath(from, to, hw, v + strokes.length * 7),\n\t\t\t\t\tlength: to[0] - from[0],\n\t\t\t\t\tkind: \"line\",\n\t\t\t\t});\n\t\t\t});\n\t\t// Text rects are a line tall: the baseline sits near 80 % of it.\n\t\tconst under = (r: Rect) =>\n\t\t\tisText ? r.y + r.height * 0.84 + pad * 0.4 : r.y + r.height + pad;\n\n\t\tswitch (props.mark) {\n\t\t\tcase \"underline\":\n\t\t\t\tlineAt(under, pad * 0.25);\n\t\t\t\tbreak;\n\t\t\tcase \"strike\":\n\t\t\t\tlineAt((r) => r.y + r.height * (isText ? 0.54 : 0.5), pad * 0.4);\n\t\t\t\tbreak;\n\t\t\tcase \"squiggle\":\n\t\t\t\trects.forEach((r, i) => {\n\t\t\t\t\tconst from: Vec2 = [r.x, under(r)];\n\t\t\t\t\tconst to: Vec2 = [r.x + r.width, under(r)];\n\t\t\t\t\tstrokes.push({\n\t\t\t\t\t\tpath: (v) =>\n\t\t\t\t\t\t\tsquigglePath(\n\t\t\t\t\t\t\t\tfrom,\n\t\t\t\t\t\t\t\tto,\n\t\t\t\t\t\t\t\t{ ...hw, amplitude: 4 * s + strokeW * 0.4 },\n\t\t\t\t\t\t\t\tv + i * 7,\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\tlength: r.width * 1.3,\n\t\t\t\t\t\tkind: \"line\",\n\t\t\t\t\t});\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\tcase \"highlight\":\n\t\t\t\trects.forEach((r, i) => {\n\t\t\t\t\tconst y = r.y + r.height * (isText ? 0.56 : 0.5);\n\t\t\t\t\tconst from: Vec2 = [r.x - pad * 0.4, y];\n\t\t\t\t\tconst to: Vec2 = [r.x + r.width + pad * 0.4, y];\n\t\t\t\t\tstrokes.push({\n\t\t\t\t\t\tpath: (v) =>\n\t\t\t\t\t\t\tlinePath(from, to, { ...hw, wobble: wobble * 0.5 }, v + i * 7),\n\t\t\t\t\t\tlength: to[0] - from[0],\n\t\t\t\t\t\tkind: \"fill\",\n\t\t\t\t\t});\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\tcase \"circle\":\n\t\t\t\tstrokes.push({\n\t\t\t\t\tpath: (v) => ellipsePath(b, { ...hw, padding: pad * 1.5 }, v),\n\t\t\t\t\tlength: Math.PI * (b.width + b.height + pad * 3),\n\t\t\t\t\tkind: \"line\",\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\tcase \"box\":\n\t\t\t\tstrokes.push({\n\t\t\t\t\tpath: (v) => boxPath(b, { ...hw, padding: pad }, v),\n\t\t\t\t\tlength: 2 * (b.width + b.height + pad * 4),\n\t\t\t\t\tkind: \"line\",\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\tcase \"cross\": {\n\t\t\t\tconst x0 = b.x - pad;\n\t\t\t\tconst y0 = b.y - pad;\n\t\t\t\tconst x1 = b.x + b.width + pad;\n\t\t\t\tconst y1 = b.y + b.height + pad;\n\t\t\t\tconst d = Math.hypot(x1 - x0, y1 - y0);\n\t\t\t\tstrokes.push(\n\t\t\t\t\t{\n\t\t\t\t\t\tpath: (v) => linePath([x0, y0], [x1, y1], hw, v),\n\t\t\t\t\t\tlength: d,\n\t\t\t\t\t\tkind: \"line\",\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tpath: (v) => linePath([x1, y0], [x0, y1], hw, v + 11),\n\t\t\t\t\t\tlength: d,\n\t\t\t\t\t\tkind: \"line\",\n\t\t\t\t\t},\n\t\t\t\t);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"bracket\": {\n\t\t\t\tconst x = b.x - pad * 1.5;\n\t\t\t\tconst lip = Math.min(18 * s, b.height * 0.2);\n\t\t\t\tconst pts: Vec2[] = [\n\t\t\t\t\t[x + lip, b.y - pad * 0.5],\n\t\t\t\t\t[x, b.y - pad * 0.5],\n\t\t\t\t\t[x, b.y + b.height + pad * 0.5],\n\t\t\t\t\t[x + lip, b.y + b.height + pad * 0.5],\n\t\t\t\t];\n\t\t\t\tstrokes.push({\n\t\t\t\t\tpath: (v) => toPathData(wobblePoints(densify(pts, 6), hw, v)),\n\t\t\t\t\tlength: b.height + lip * 2 + pad,\n\t\t\t\t\tkind: \"line\",\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"arrow\": {\n\t\t\t\tif (!props.from)\n\t\t\t\t\tthrow new Error('Annotate: mark \"arrow\" needs `from`.');\n\t\t\t\tconst start = resolve(props.from);\n\t\t\t\tconst tail = anchorPoint(boundsOf(start.rects), start.anchor);\n\t\t\t\tconst tip = edgeToward(b, tail, pad);\n\t\t\t\treach.push(tail);\n\t\t\t\tconst headSize =\n\t\t\t\t\t(14 * s + strokeW * 1.6) * (props.texture === \"pencil\" ? 0.8 : 1);\n\t\t\t\tconst geometry = (v: number) =>\n\t\t\t\t\tarrowPaths(\n\t\t\t\t\t\ttail,\n\t\t\t\t\t\ttip,\n\t\t\t\t\t\t{ ...hw, curve: props.curve as ArrowCurve, headSize },\n\t\t\t\t\t\tv,\n\t\t\t\t\t);\n\t\t\t\tconst length = Math.hypot(tip[0] - tail[0], tip[1] - tail[1]);\n\t\t\t\tstrokes.push(\n\t\t\t\t\t{ path: (v) => geometry(v).shaft, length, kind: \"line\" },\n\t\t\t\t\t{ path: (v) => geometry(v).head, length: headSize * 2, kind: \"head\" },\n\t\t\t\t);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\t// ── Timing ───────────────────────────────────────────────────────\n\t\tconst drawFrames =\n\t\t\tprops.drawDuration ??\n\t\t\tMath.round(\n\t\t\t\tthemeFrames(theme, \"base\", fps) * (props.mark === \"arrow\" ? 1.5 : 1.2),\n\t\t\t);\n\t\tconst bodies = strokes.filter((st) => st.kind !== \"head\");\n\t\tconst total = bodies.reduce((a, st) => a + Math.max(1, st.length), 0);\n\t\tlet cursor = 0;\n\t\tconst windows: Array<{ start: number; end: number }> = [];\n\t\tfor (const st of strokes) {\n\t\t\tconst prev = windows[windows.length - 1];\n\t\t\tif (st.kind === \"head\" && prev) {\n\t\t\t\t// The head flicks on as the shaft reaches 92 %.\n\t\t\t\tconst start = Math.round(prev.start + (prev.end - prev.start) * 0.92);\n\t\t\t\twindows.push({ start, end: start + Math.max(3, scaleFrames(5, fps)) });\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t\tconst start = Math.round(cursor);\n\t\t\tcursor += (drawFrames * Math.max(1, st.length)) / total;\n\t\t\twindows.push({ start, end: Math.max(start + 2, Math.round(cursor)) });\n\t\t}\n\t\tconst drawn = Math.max(...windows.map((w) => w.end));\n\n\t\t// ── Nodes ────────────────────────────────────────────────────────\n\t\tconst lightBg =\n\t\t\t(contrastRatio(theme.color.bg, \"#000000\") ?? 0) >\n\t\t\t(contrastRatio(theme.color.bg, \"#ffffff\") ?? 0);\n\t\t// The shapes' box must hold every stroke, or the renderer clips it.\n\t\tconst margin = pad * 4 + strokeW * 4;\n\t\tconst extentX = Math.max(b.x + b.width, ...reach.map((p) => p[0])) + margin;\n\t\tconst extentY =\n\t\t\tMath.max(b.y + b.height, ...reach.map((p) => p[1])) + margin;\n\t\tconst boil =\n\t\t\thand && hand.boil > 0 && wobble > 0 ? scaleFrames(hand.boil, fps) : 0;\n\t\t// Marks stay up: boil through the window, or a while past the hold.\n\t\tconst boilEnd =\n\t\t\t(props as { duration?: number }).duration ??\n\t\t\tdrawn + Math.max(ctx.hold, fps * 6);\n\t\tconst parts: Record<string, Animatable<LayoutNode>> = {};\n\t\tconst children: LayoutNode[] = [];\n\t\tlet maxX = extentX;\n\t\tlet maxY = extentY;\n\n\t\tstrokes.forEach((st, i) => {\n\t\t\tconst w = windows[i] as { start: number; end: number };\n\t\t\tconst fill = st.kind === \"fill\";\n\t\t\tconst rect = rects[i] ?? b;\n\t\t\tconst node = host.shape(\"path\", {\n\t\t\t\tid: ctx.partId(st.kind === \"head\" ? \"head\" : `stroke-${i}`),\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tx: 0,\n\t\t\t\ty: 0,\n\t\t\t\twidth: extentX,\n\t\t\t\theight: extentY,\n\t\t\t\td: st.path(0),\n\t\t\t\tfillType: \"none\",\n\t\t\t\tstrokeColor: color,\n\t\t\t\tstrokeWidth: fill ? rect.height * (isText ? 0.62 : 1) : strokeW,\n\t\t\t\tstrokeLineCap: fill ? \"butt\" : \"round\",\n\t\t\t\tstrokeLineJoin: \"round\",\n\t\t\t\ttrimEnd: 0,\n\t\t\t\topacity: fill ? (lightBg ? 0.9 : 0.38) : texture.opacity,\n\t\t\t\t...(fill && lightBg && { blendMode: \"multiply\" }),\n\t\t\t});\n\t\t\tconst anim = LayerAnimation.create().keys(\"trimEnd\", [\n\t\t\t\t[w.start, 0],\n\t\t\t\t[w.end, 1, st.kind === \"head\" ? \"power2.out\" : \"power2.inOut\"],\n\t\t\t]);\n\t\t\tif (boil > 0)\n\t\t\t\tanim.keys(\n\t\t\t\t\t\"d\",\n\t\t\t\t\tboilKeys(st.path, { start: 0, end: boilEnd, every: boil }),\n\t\t\t\t);\n\t\t\tnode.animate(anim);\n\t\t\tparts[st.kind === \"head\" ? \"head\" : `stroke-${i}`] = node;\n\t\t\tchildren.push(node);\n\t\t});\n\n\t\t// ── Label ────────────────────────────────────────────────────────\n\t\tlet labelIn: number | null = null;\n\t\tif (props.label !== undefined) {\n\t\t\tconst o =\n\t\t\t\ttypeof props.label === \"string\"\n\t\t\t\t\t? { text: props.label, side: \"auto\" as const }\n\t\t\t\t\t: props.label;\n\t\t\tconst font =\n\t\t\t\t(\"font\" in o && o.font) || theme.font.hand || theme.font.body;\n\t\t\tconst size = (\"size\" in o && o.size) || 34 * s;\n\t\t\tconst m = host.measure(o.text, { fontFamily: font, fontSize: size });\n\t\t\tconst gap = 10 * s + pad;\n\t\t\tlet x: number;\n\t\t\tlet y: number;\n\t\t\tif (props.mark === \"arrow\" && props.from) {\n\t\t\t\tconst start = resolve(props.from);\n\t\t\t\tconst tail = anchorPoint(boundsOf(start.rects), start.anchor);\n\t\t\t\tconst tip = edgeToward(b, tail, pad);\n\t\t\t\tconst len = Math.hypot(tip[0] - tail[0], tip[1] - tail[1]) || 1;\n\t\t\t\tconst dx = (tip[0] - tail[0]) / len;\n\t\t\t\tconst dy = (tip[1] - tail[1]) / len;\n\t\t\t\tconst reach =\n\t\t\t\t\tMath.abs(dx) * (m.width / 2) +\n\t\t\t\t\tMath.abs(dy) * (m.height / 2) +\n\t\t\t\t\tgap * 0.5;\n\t\t\t\tx = tail[0] - dx * reach - m.width / 2;\n\t\t\t\ty = tail[1] - dy * reach - m.height / 2;\n\t\t\t} else {\n\t\t\t\tconst side =\n\t\t\t\t\to.side === \"auto\"\n\t\t\t\t\t\t? b.y - gap - m.height >= 0\n\t\t\t\t\t\t\t? \"top\"\n\t\t\t\t\t\t\t: \"bottom\"\n\t\t\t\t\t\t: o.side;\n\t\t\t\tconst top = props.mark === \"circle\" ? pad * 1.5 : pad;\n\t\t\t\tx =\n\t\t\t\t\tside === \"left\"\n\t\t\t\t\t\t? b.x - top - gap - m.width\n\t\t\t\t\t\t: side === \"right\"\n\t\t\t\t\t\t\t? b.x + b.width + top + gap\n\t\t\t\t\t\t\t: b.x + b.width - m.width;\n\t\t\t\ty =\n\t\t\t\t\tside === \"top\"\n\t\t\t\t\t\t? b.y - top - gap - m.height\n\t\t\t\t\t\t: side === \"bottom\"\n\t\t\t\t\t\t\t? b.y + b.height + top + gap\n\t\t\t\t\t\t\t: b.y + (b.height - m.height) / 2;\n\t\t\t}\n\t\t\tconst label = host.text(o.text, {\n\t\t\t\tid: ctx.partId(\"label\"),\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tx,\n\t\t\t\ty,\n\t\t\t\tfontFamily: font,\n\t\t\t\tfontSize: size,\n\t\t\t\tfill: props.mark === \"highlight\" ? theme.color.ink : color,\n\t\t\t});\n\t\t\tlabelIn = Math.max(0, drawn - scaleFrames(4, fps));\n\t\t\tconst intro = scaleFrames(10, fps);\n\t\t\tlabel.animate(\n\t\t\t\tLayerAnimation.create()\n\t\t\t\t\t.keys(\"opacity\", [\n\t\t\t\t\t\t[labelIn, 0],\n\t\t\t\t\t\t[labelIn + intro, 1, \"power2.out\"],\n\t\t\t\t\t])\n\t\t\t\t\t.keys(\"y\", [\n\t\t\t\t\t\t[labelIn, y + 8 * s],\n\t\t\t\t\t\t[labelIn + intro, y, theme.motion.ease.enter],\n\t\t\t\t\t]),\n\t\t\t);\n\t\t\tparts.label = label;\n\t\t\tchildren.push(label);\n\t\t\tmaxX = Math.max(maxX, x + m.width + 8);\n\t\t\tmaxY = Math.max(maxY, y + m.height + 8);\n\t\t}\n\n\t\treturn {\n\t\t\tchildren,\n\t\t\twidth: maxX,\n\t\t\theight: maxY,\n\t\t\tduration: Math.max(\n\t\t\t\tdrawn,\n\t\t\t\tlabelIn === null ? 0 : labelIn + scaleFrames(10, fps),\n\t\t\t),\n\t\t\topenEnded: true,\n\t\t\torigin: [0, 0],\n\t\t\tcues: {\n\t\t\t\tdrawn: [{ frame: drawn }],\n\t\t\t\tlabelIn: labelIn === null ? [] : [{ frame: labelIn }],\n\t\t\t} as AnnotateCues,\n\t\t\tparts,\n\t\t};\n\t},\n});\n\n/** Where a mark around `rect` (+ gap) meets the line toward `from`. */\nfunction edgeToward(rect: Rect, from: Vec2, gap: number): Vec2 {\n\tconst cx = rect.x + rect.width / 2;\n\tconst cy = rect.y + rect.height / 2;\n\tconst dx = from[0] - cx;\n\tconst dy = from[1] - cy;\n\tconst hx = rect.width / 2 + gap;\n\tconst hy = rect.height / 2 + gap;\n\tconst t = Math.min(\n\t\tdx === 0 ? Number.POSITIVE_INFINITY : hx / Math.abs(dx),\n\t\tdy === 0 ? Number.POSITIVE_INFINITY : hy / Math.abs(dy),\n\t);\n\treturn Number.isFinite(t) ? [cx + dx * t, cy + dy * t] : [cx, cy - hy];\n}\n\n/** Extra points along each segment, so a wobble bends lines instead of corners only. */\nfunction densify(points: readonly Vec2[], per: number): Vec2[] {\n\tconst out: Vec2[] = [];\n\tpoints.forEach((p, i) => {\n\t\tconst next = points[i + 1];\n\t\tif (!next) {\n\t\t\tout.push(p);\n\t\t\treturn;\n\t\t}\n\t\tfor (let k = 0; k < per; k++) {\n\t\t\tconst t = k / per;\n\t\t\tout.push([p[0] + (next[0] - p[0]) * t, p[1] + (next[1] - p[1]) * t]);\n\t\t}\n\t});\n\treturn out;\n}\n\n/**\n * Marks that draw on to point at something: underline, circle, box, highlight,\n * strike, cross, bracket, arrow or squiggle, clean or hand-drawn with a boil,\n * with an optional label.\n */\nexport const Annotate = /* @__PURE__ */ bindComponent(annotate);\n"
+		}
+	]
+}

package/dist/registry/app-frame.json

@@ -0,0 +1,38 @@
+{
+	"name": "app-frame",
+	"title": "AppFrame",
+	"summary": "Window chrome around any content — desktop window, browser with a typed URL, terminal, or bare frame — and the coordinate system for pointing into it.",
+	"tags": [
+		"window",
+		"browser",
+		"mockup",
+		"ui",
+		"screen recording",
+		"device"
+	],
+	"example": "AppFrame({ kind: \"browser\", url: \"acme.dev\", content: \"assets/recording.mp4\" })",
+	"parts": [
+		"shadow",
+		"chrome",
+		"bar",
+		"divider",
+		"content",
+		"url-field",
+		"url",
+		"caret",
+		"load",
+		"tab-<n>",
+		"light-<n>"
+	],
+	"cues": [
+		"urlTyped",
+		"loaded"
+	],
+	"registryDependencies": [],
+	"files": [
+		{
+			"path": "app-frame/index.ts",
+			"content": "/**\n * AppFrame: window chrome around any content (a recording, a mock UI, a\n * still): a desktop window, a browser with a URL bar, a terminal, or a bare\n * rounded frame. It is also the coordinate system for what points at the\n * content: `frame.at(x, y)` maps content pixels to the parent's.\n */\nimport {\n\ttype AnimatableProp,\n\ttype KeyframeTuple,\n\tLayerAnimation,\n\ttype LayoutNode,\n} from \"framefields\";\nimport {\n\ttype Animatable,\n\tbindComponent,\n\tcontrastRatio,\n\tdefineComponent,\n\ttype Vec2,\n\tz,\n} from \"framefields/components\";\n\nconst KINDS = [\"window\", \"browser\", \"terminal\", \"minimal\"] as const;\nexport type AppFrameKind = (typeof KINDS)[number];\n\nexport interface AppFrameCues {\n\t[name: string]: ReadonlyArray<{ frame: number }>;\n\t/** The URL finished typing (browser with `url.typeAt`). */\n\turlTyped: ReadonlyArray<{ frame: number }>;\n\t/** The load bar finished. */\n\tloaded: ReadonlyArray<{ frame: number }>;\n}\n\nexport interface AppFrameApi {\n\t/** The content area in the parent's coordinates. */\n\treadonly contentRect: { x: number; y: number; width: number; height: number };\n\t/** Content-local (x, y) → the parent's coordinates. */\n\tat(x: number, y: number): Vec2;\n\t/** Add layers to the content area (after creation, e.g. once cues are known). */\n\tfill(...nodes: LayoutNode[]): AppFrameApi;\n}\n\n/** Chrome palettes, tuned to sit with real app UIs. */\nconst PALETTES = {\n\tdark: {\n\t\tchrome: \"#1b1c20\",\n\t\tfield: \"#26272c\",\n\t\tline: \"#2e3036\",\n\t\tedge: \"#3a3c44\",\n\t\ttext: \"#e8e8ec\",\n\t\tmuted: \"#8d8f99\",\n\t\tcontent: \"#111215\",\n\t},\n\tlight: {\n\t\tchrome: \"#f2f2f4\",\n\t\tfield: \"#ffffff\",\n\t\tline: \"#e1e1e6\",\n\t\tedge: \"#d4d4da\",\n\t\ttext: \"#1c1c1f\",\n\t\tmuted: \"#7d7e87\",\n\t\tcontent: \"#ffffff\",\n\t},\n} as const;\n\nconst LIGHTS = [\"#ff5f57\", \"#febc2e\", \"#28c840\"] as const;\n\nexport const appFrame = /* @__PURE__ */ defineComponent({\n\tname: \"AppFrame\",\n\tprops: () => ({\n\t\tkind: z.enum(KINDS).default(\"window\"),\n\t\t/** What the frame shows: layers (laid out in content pixels) or a media path. */\n\t\tcontent: z\n\t\t\t.custom<LayoutNode | LayoutNode[] | string>(\n\t\t\t\t(v) =>\n\t\t\t\t\ttypeof v === \"string\" ||\n\t\t\t\t\tArray.isArray(v) ||\n\t\t\t\t\t(typeof v === \"object\" && v !== null),\n\t\t\t\t{ message: \"Expected a layer, an array of layers, or a media path\" },\n\t\t\t)\n\t\t\t.optional(),\n\t\t/** How media content fits the content area. */\n\t\tfit: z.enum([\"cover\", \"contain\", \"fill\"]).default(\"cover\"),\n\t\ttitle: z.string().optional(),\n\t\t/** Browser address. `typeAt` (local frame) types it in and plays a load bar. */\n\t\turl: z\n\t\t\t.union([\n\t\t\t\tz.string(),\n\t\t\t\tz\n\t\t\t\t\t.object({\n\t\t\t\t\t\ttext: z.string(),\n\t\t\t\t\t\ttypeAt: z.number().int().min(0).optional(),\n\t\t\t\t\t\t/** Characters per second while typing. */\n\t\t\t\t\t\tcps: z.number().positive().default(22),\n\t\t\t\t\t})\n\t\t\t\t\t.strict(),\n\t\t\t])\n\t\t\t.optional(),\n\t\t/** Browser tabs; the first is active. */\n\t\ttabs: z.array(z.string()).optional(),\n\t\t/** Chrome colors. Default: follows the theme background. */\n\t\tappearance: z.enum([\"dark\", \"light\"]).optional(),\n\t\t/** Content-area background. Default: the appearance's. */\n\t\tcontentBackground: z.string().optional(),\n\t\t/** Shadow depth, 0 (flat) to 3 (floating). */\n\t\televation: z.number().int().min(0).max(3).default(2),\n\t\t/** Corner radius in px. Default 14 × theme.scale. */\n\t\tradius: z.number().min(0).optional(),\n\t\t/** Present the frame at a 3D angle. */\n\t\ttilt: z\n\t\t\t.union([\n\t\t\t\tz.literal(false),\n\t\t\t\tz\n\t\t\t\t\t.object({\n\t\t\t\t\t\trotateX: z.number().default(8),\n\t\t\t\t\t\trotateY: z.number().default(-12),\n\t\t\t\t\t})\n\t\t\t\t\t.strict(),\n\t\t\t])\n\t\t\t.default(false),\n\t}),\n\tdefaults: { enter: \"rise\" },\n\tbuild(ctx, props) {\n\t\tconst { host, theme, fps } = ctx;\n\t\tconst s = theme.scale;\n\t\tconst width = ctx.requested.width ?? 1440 * s;\n\t\tconst height = ctx.requested.height ?? 900 * s;\n\t\tconst dark =\n\t\t\tprops.appearance === \"dark\" ||\n\t\t\t(props.appearance === undefined &&\n\t\t\t\t(contrastRatio(theme.color.bg, \"#000000\") ?? 1) < 4);\n\t\tconst pal = dark ? PALETTES.dark : PALETTES.light;\n\t\tconst radius = props.radius ?? 14 * s;\n\t\tconst hasTabs = props.kind === \"browser\" && (props.tabs?.length ?? 0) > 0;\n\t\tconst barH =\n\t\t\tprops.kind === \"minimal\"\n\t\t\t\t? 0\n\t\t\t\t: props.kind === \"browser\"\n\t\t\t\t\t? (hasTabs ? 92 : 56) * s\n\t\t\t\t\t: props.kind === \"terminal\"\n\t\t\t\t\t\t? 40 * s\n\t\t\t\t\t\t: 46 * s;\n\n\t\tconst parts: Record<string, Animatable<LayoutNode>> = {};\n\t\tconst cues = {\n\t\t\turlTyped: [] as Array<{ frame: number }>,\n\t\t\tloaded: [] as Array<{ frame: number }>,\n\t\t};\n\t\tconst font = theme.font.body;\n\n\t\t// Content is laid out from the bar down, in content pixels.\n\t\tconst build = (W: number, H: number) => {\n\t\t\tconst bar: LayoutNode[] = [];\n\t\t\tconst lightsY = (hasTabs ? 46 * s : barH) / 2;\n\t\t\tif (props.kind !== \"minimal\") {\n\t\t\t\tLIGHTS.forEach((color, i) => {\n\t\t\t\t\tbar.push(\n\t\t\t\t\t\thost.shape(\"circle\", {\n\t\t\t\t\t\t\tid: ctx.partId(`light-${i}`),\n\t\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\t\tx: 20 * s + i * 20 * s,\n\t\t\t\t\t\t\ty: lightsY - 6 * s,\n\t\t\t\t\t\t\twidth: 12 * s,\n\t\t\t\t\t\t\theight: 12 * s,\n\t\t\t\t\t\t\tfillColor: color,\n\t\t\t\t\t\t}),\n\t\t\t\t\t);\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tif (props.kind === \"browser\") {\n\t\t\t\tconst rowY = hasTabs ? 46 * s : 0;\n\t\t\t\tconst rowH = hasTabs ? barH - 46 * s : barH;\n\t\t\t\tif (hasTabs)\n\t\t\t\t\tbar.push(\n\t\t\t\t\t\t...tabStrip(ctx, props.tabs ?? [], {\n\t\t\t\t\t\t\tx: 92 * s,\n\t\t\t\t\t\t\tH: 46 * s,\n\t\t\t\t\t\t\ts,\n\t\t\t\t\t\t\tpal,\n\t\t\t\t\t\t\tfont,\n\t\t\t\t\t\t\tW,\n\t\t\t\t\t\t}),\n\t\t\t\t\t);\n\t\t\t\t// Back / forward.\n\t\t\t\tconst navX = hasTabs ? 20 * s : 92 * s;\n\t\t\t\t[0, 1].forEach((i) => {\n\t\t\t\t\tconst cx = navX + i * 30 * s + 8 * s;\n\t\t\t\t\tconst cy = rowY + rowH / 2;\n\t\t\t\t\tconst dir = i === 0 ? -1 : 1;\n\t\t\t\t\tbar.push(\n\t\t\t\t\t\thost.shape(\"path\", {\n\t\t\t\t\t\t\tid: ctx.partId(`nav-${i}`),\n\t\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\t\tx: 0,\n\t\t\t\t\t\t\ty: 0,\n\t\t\t\t\t\t\twidth: W,\n\t\t\t\t\t\t\theight: barH,\n\t\t\t\t\t\t\td: `M${cx - dir * 3 * s} ${cy - 6 * s} L${cx + dir * 3 * s} ${cy} L${cx - dir * 3 * s} ${cy + 6 * s}`,\n\t\t\t\t\t\t\tfillType: \"none\",\n\t\t\t\t\t\t\tfillColor: pal.muted,\n\t\t\t\t\t\t\tstrokeColor: i === 0 ? pal.muted : pal.edge,\n\t\t\t\t\t\t\tstrokeWidth: 1.8 * s,\n\t\t\t\t\t\t\tstrokeLineCap: \"round\",\n\t\t\t\t\t\t\tstrokeLineJoin: \"round\",\n\t\t\t\t\t\t}),\n\t\t\t\t\t);\n\t\t\t\t});\n\t\t\t\tif (props.url !== undefined) {\n\t\t\t\t\tbar.push(\n\t\t\t\t\t\t...urlField(ctx, props.url, {\n\t\t\t\t\t\t\tW,\n\t\t\t\t\t\t\trowY,\n\t\t\t\t\t\t\trowH,\n\t\t\t\t\t\t\ts,\n\t\t\t\t\t\t\tpal,\n\t\t\t\t\t\t\tfont,\n\t\t\t\t\t\t\tfps,\n\t\t\t\t\t\t\tcues,\n\t\t\t\t\t\t\taccent: theme.color.accent,\n\t\t\t\t\t\t\tparts,\n\t\t\t\t\t\t}),\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} else if (props.title) {\n\t\t\t\tbar.push(\n\t\t\t\t\thost.text(props.title, {\n\t\t\t\t\t\tid: ctx.partId(\"title\"),\n\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\tx: 0,\n\t\t\t\t\t\ty: barH / 2 - 9 * s,\n\t\t\t\t\t\twidth: W,\n\t\t\t\t\t\talign: \"center\",\n\t\t\t\t\t\tfontFamily: props.kind === \"terminal\" ? theme.font.mono : font,\n\t\t\t\t\t\tfontSize: 13 * s,\n\t\t\t\t\t\tfontWeight: 500,\n\t\t\t\t\t\tfill: pal.muted,\n\t\t\t\t\t}),\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tconst contentChildren: LayoutNode[] =\n\t\t\t\tprops.content === undefined\n\t\t\t\t\t? []\n\t\t\t\t\t: typeof props.content === \"string\"\n\t\t\t\t\t\t? [\n\t\t\t\t\t\t\t\thost.media(props.content, {\n\t\t\t\t\t\t\t\t\tid: ctx.partId(\"media\"),\n\t\t\t\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\t\t\t\tx: 0,\n\t\t\t\t\t\t\t\t\ty: 0,\n\t\t\t\t\t\t\t\t\twidth: W,\n\t\t\t\t\t\t\t\t\theight: H - barH,\n\t\t\t\t\t\t\t\t\tfit: props.fit,\n\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t]\n\t\t\t\t\t\t: Array.isArray(props.content)\n\t\t\t\t\t\t\t? props.content\n\t\t\t\t\t\t\t: [props.content];\n\t\t\tconst content = host.box({\n\t\t\t\tid: ctx.partId(\"content\"),\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tx: 0,\n\t\t\t\ty: barH,\n\t\t\t\twidth: W,\n\t\t\t\theight: H - barH,\n\t\t\t\tbackground:\n\t\t\t\t\tprops.contentBackground ??\n\t\t\t\t\t(props.kind === \"terminal\" ? \"#0c0c0e\" : pal.content),\n\t\t\t\toverflow: \"hidden\",\n\t\t\t\tchildren: contentChildren,\n\t\t\t});\n\t\t\tconst chrome = host.box({\n\t\t\t\tid: ctx.partId(\"chrome\"),\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tx: 0,\n\t\t\t\ty: 0,\n\t\t\t\twidth: W,\n\t\t\t\theight: H,\n\t\t\t\tbackground: props.kind === \"terminal\" ? \"#16161a\" : pal.chrome,\n\t\t\t\tborderRadius: radius,\n\t\t\t\tborderColor: pal.edge,\n\t\t\t\tborderWidth: 1,\n\t\t\t\tstrokeAlign: \"inside\",\n\t\t\t\toverflow: \"hidden\",\n\t\t\t\tchildren: [\n\t\t\t\t\t...(barH > 0\n\t\t\t\t\t\t? [\n\t\t\t\t\t\t\t\thost.box({\n\t\t\t\t\t\t\t\t\tid: ctx.partId(\"bar\"),\n\t\t\t\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\t\t\t\tx: 0,\n\t\t\t\t\t\t\t\t\ty: 0,\n\t\t\t\t\t\t\t\t\twidth: W,\n\t\t\t\t\t\t\t\t\theight: barH,\n\t\t\t\t\t\t\t\t\tchildren: bar,\n\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t\thost.box({\n\t\t\t\t\t\t\t\t\tid: ctx.partId(\"divider\"),\n\t\t\t\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\t\t\t\tx: 0,\n\t\t\t\t\t\t\t\t\ty: barH - 1,\n\t\t\t\t\t\t\t\t\twidth: W,\n\t\t\t\t\t\t\t\t\theight: 1,\n\t\t\t\t\t\t\t\t\tbackground: pal.line,\n\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t]\n\t\t\t\t\t\t: []),\n\t\t\t\t\tcontent,\n\t\t\t\t],\n\t\t\t});\n\t\t\tconst children: LayoutNode[] = [];\n\t\t\tif (props.elevation > 0) {\n\t\t\t\tconst e = props.elevation;\n\t\t\t\t// The shadow lives on its own plate: the chrome clips its content.\n\t\t\t\tconst plate = host.box({\n\t\t\t\t\tid: ctx.partId(\"shadow\"),\n\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\tx: 0,\n\t\t\t\t\ty: 0,\n\t\t\t\t\twidth: W,\n\t\t\t\t\theight: H,\n\t\t\t\t\tbackground: pal.chrome,\n\t\t\t\t\tborderRadius: radius,\n\t\t\t\t});\n\t\t\t\thost.style(plate, {\n\t\t\t\t\tdropShadow: {\n\t\t\t\t\t\tcolor: \"#000000\",\n\t\t\t\t\t\topacity: [0, 0.3, 0.45, 0.6][e],\n\t\t\t\t\t\tangle: 90,\n\t\t\t\t\t\tdistance: [0, 8, 22, 40][e],\n\t\t\t\t\t\tsize: [0, 22, 48, 80][e],\n\t\t\t\t\t\tspread: 0,\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t\tchildren.push(plate);\n\t\t\t\tparts.shadow = plate;\n\t\t\t}\n\t\t\tchildren.push(chrome);\n\t\t\tObject.assign(parts, { chrome, content });\n\t\t\treturn { children, content };\n\t\t};\n\n\t\treturn {\n\t\t\twidth,\n\t\t\theight,\n\t\t\tduration: null,\n\t\t\tcues: cues as AppFrameCues,\n\t\t\tparts,\n\t\t\tchildren: props.tilt\n\t\t\t\t? [\n\t\t\t\t\t\t// The presentation angle: a perspective box round the whole frame.\n\t\t\t\t\t\thost.box({\n\t\t\t\t\t\t\tid: ctx.partId(\"tilt\"),\n\t\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\t\tx: 0,\n\t\t\t\t\t\t\ty: 0,\n\t\t\t\t\t\t\twidth,\n\t\t\t\t\t\t\theight,\n\t\t\t\t\t\t\tperspective: 1800 * s,\n\t\t\t\t\t\t\trotateX: props.tilt.rotateX,\n\t\t\t\t\t\t\trotateY: props.tilt.rotateY,\n\t\t\t\t\t\t\tchildren: build(width, height).children,\n\t\t\t\t\t\t}),\n\t\t\t\t\t]\n\t\t\t\t: build(width, height).children,\n\t\t\tapi: (placement): AppFrameApi => {\n\t\t\t\tconst content = parts.content as Animatable<LayoutNode> & {\n\t\t\t\t\tchildren?: LayoutNode[];\n\t\t\t\t};\n\t\t\t\tconst rect = {\n\t\t\t\t\tx: placement.x,\n\t\t\t\t\ty: placement.y + barH,\n\t\t\t\t\twidth: placement.width,\n\t\t\t\t\theight: placement.height - barH,\n\t\t\t\t};\n\t\t\t\tconst api: AppFrameApi = {\n\t\t\t\t\tcontentRect: rect,\n\t\t\t\t\tat: (x, y) => [rect.x + x, rect.y + y],\n\t\t\t\t\tfill: (...nodes) => {\n\t\t\t\t\t\tcontent.children = [...(content.children ?? []), ...nodes];\n\t\t\t\t\t\treturn api;\n\t\t\t\t\t},\n\t\t\t\t};\n\t\t\t\treturn api;\n\t\t\t},\n\t\t};\n\t},\n});\n\nfunction tabStrip(\n\tctx: Parameters<typeof appFrame.build>[0],\n\ttabs: string[],\n\to: {\n\t\tx: number;\n\t\tH: number;\n\t\ts: number;\n\t\tpal: (typeof PALETTES)[\"dark\" | \"light\"];\n\t\tfont: string;\n\t\tW: number;\n\t},\n): LayoutNode[] {\n\tconst { host } = ctx;\n\tconst out: LayoutNode[] = [];\n\tlet x = o.x;\n\ttabs.forEach((label, i) => {\n\t\tconst active = i === 0;\n\t\tconst fontSize = 12.5 * o.s;\n\t\tconst m = host.measure(label, {\n\t\t\tfontFamily: o.font,\n\t\t\tfontSize,\n\t\t\tfontWeight: 500,\n\t\t});\n\t\tconst w = Math.min(240 * o.s, Math.max(120 * o.s, m.width + 40 * o.s));\n\t\tout.push(\n\t\t\thost.box({\n\t\t\t\tid: ctx.partId(`tab-${i}`),\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tx,\n\t\t\t\ty: 8 * o.s,\n\t\t\t\twidth: w,\n\t\t\t\theight: o.H - 8 * o.s,\n\t\t\t\tbackground: active ? o.pal.field : \"transparent\",\n\t\t\t\tborderRadius: 9 * o.s,\n\t\t\t\tchildren: [\n\t\t\t\t\thost.text(label, {\n\t\t\t\t\t\tid: ctx.partId(`tab-${i}-text`),\n\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\tx: 14 * o.s,\n\t\t\t\t\t\ty: (o.H - 8 * o.s) / 2 - fontSize * 0.62,\n\t\t\t\t\t\twidth: w - 28 * o.s,\n\t\t\t\t\t\tfontFamily: o.font,\n\t\t\t\t\t\tfontSize,\n\t\t\t\t\t\tfontWeight: 500,\n\t\t\t\t\t\tfill: active ? o.pal.text : o.pal.muted,\n\t\t\t\t\t}),\n\t\t\t\t],\n\t\t\t}),\n\t\t);\n\t\tx += w + 4 * o.s;\n\t});\n\treturn out;\n}\n\nfunction urlField(\n\tctx: Parameters<typeof appFrame.build>[0],\n\turl: string | { text: string; typeAt?: number; cps: number },\n\to: {\n\t\tW: number;\n\t\trowY: number;\n\t\trowH: number;\n\t\ts: number;\n\t\tpal: (typeof PALETTES)[\"dark\" | \"light\"];\n\t\tfont: string;\n\t\tfps: number;\n\t\tcues: {\n\t\t\turlTyped: Array<{ frame: number }>;\n\t\t\tloaded: Array<{ frame: number }>;\n\t\t};\n\t\taccent: string;\n\t\tparts: Record<string, Animatable<LayoutNode>>;\n\t},\n): LayoutNode[] {\n\tconst { host } = ctx;\n\tconst text = typeof url === \"string\" ? url : url.text;\n\tconst fieldW = Math.min(620 * o.s, o.W * 0.46);\n\tconst fieldH = 32 * o.s;\n\tconst fieldX = (o.W - fieldW) / 2;\n\tconst fieldY = o.rowY + (o.rowH - fieldH) / 2;\n\tconst fontSize = 13.5 * o.s;\n\tconst m = host.measure(text, { fontFamily: o.font, fontSize });\n\tconst lockW = 14 * o.s;\n\tconst textX = (fieldW - m.width - lockW) / 2 + lockW;\n\tconst out: LayoutNode[] = [];\n\n\tconst label = host.text(text, {\n\t\tid: ctx.partId(\"url\"),\n\t\tposition: \"absolute\",\n\t\tx: textX,\n\t\ty: fieldH / 2 - m.lineHeight / 2,\n\t\tfontFamily: o.font,\n\t\tfontSize,\n\t\tfill: o.pal.text,\n\t});\n\t// A small padlock: shackle + body.\n\tconst lx = textX - lockW;\n\tconst ly = fieldH / 2;\n\tconst lock = host.shape(\"path\", {\n\t\tid: ctx.partId(\"lock\"),\n\t\tposition: \"absolute\",\n\t\tx: 0,\n\t\ty: 0,\n\t\twidth: fieldW,\n\t\theight: fieldH,\n\t\td: `M${lx + 2.2 * o.s} ${ly - 1 * o.s} L${lx + 2.2 * o.s} ${ly - 3.4 * o.s} C${lx + 2.2 * o.s} ${ly - 6.4 * o.s} ${lx + 7.8 * o.s} ${ly - 6.4 * o.s} ${lx + 7.8 * o.s} ${ly - 3.4 * o.s} L${lx + 7.8 * o.s} ${ly - 1 * o.s}`,\n\t\tfillType: \"none\",\n\t\tfillColor: o.pal.muted,\n\t\tstrokeColor: o.pal.muted,\n\t\tstrokeWidth: 1.4 * o.s,\n\t\tstrokeLineCap: \"round\",\n\t});\n\tconst lockBody = host.box({\n\t\tid: ctx.partId(\"lock-body\"),\n\t\tposition: \"absolute\",\n\t\tx: lx + 0.6 * o.s,\n\t\ty: ly - 1.4 * o.s,\n\t\twidth: 8.8 * o.s,\n\t\theight: 6.6 * o.s,\n\t\tbackground: o.pal.muted,\n\t\tborderRadius: 1.6 * o.s,\n\t});\n\tconst fieldChildren: LayoutNode[] = [lock, lockBody, label];\n\to.parts.url = label;\n\n\tif (typeof url === \"object\" && url.typeAt !== undefined) {\n\t\tconst perChar = Math.max(1, Math.round(o.fps / url.cps));\n\t\tconst start = url.typeAt;\n\t\t// The text track is a reveal amount: ≤ 1 is a fraction, > 1 a count.\n\t\tconst keys: KeyframeTuple[] = [[0, 0]];\n\t\tfor (let i = 1; i <= text.length; i++) {\n\t\t\tkeys.push([start + i * perChar, i === 1 ? 1 / text.length : i, \"hold\"]);\n\t\t}\n\t\tlabel.animate(LayerAnimation.keys(\"text\" as AnimatableProp, keys));\n\t\tconst typed = start + text.length * perChar;\n\t\t// Caret follows the last typed glyph, then blinks a few times.\n\t\tconst caretKeys: KeyframeTuple[] = [[0, textX]];\n\t\tfor (let i = 1; i <= text.length; i++)\n\t\t\tcaretKeys.push([start + i * perChar, textX + m.caretX(i), \"hold\"]);\n\t\tconst caret = host.box({\n\t\t\tid: ctx.partId(\"caret\"),\n\t\t\tposition: \"absolute\",\n\t\t\tx: textX,\n\t\t\ty: fieldH / 2 - fontSize * 0.7,\n\t\t\twidth: 1.6 * o.s,\n\t\t\theight: fontSize * 1.4,\n\t\t\tbackground: o.accent,\n\t\t});\n\t\tconst blink: KeyframeTuple[] = [\n\t\t\t[0, 0],\n\t\t\t[start, 1, \"hold\"],\n\t\t];\n\t\tconst half = Math.round(o.fps * 0.5);\n\t\tfor (\n\t\t\tlet f = typed + half, on = false;\n\t\t\tf < typed + half * 6;\n\t\t\tf += half, on = !on\n\t\t)\n\t\t\tblink.push([f, on ? 1 : 0, \"hold\"]);\n\t\tblink.push([typed + half * 6, 0, \"hold\"]);\n\t\tcaret.animate(\n\t\t\tLayerAnimation.keys(\"x\", caretKeys),\n\t\t\tLayerAnimation.keys(\"opacity\", blink),\n\t\t);\n\t\tfieldChildren.push(caret);\n\t\to.parts.caret = caret;\n\t\to.cues.urlTyped.push({ frame: typed });\n\n\t\t// Load bar along the bottom of the toolbar after \"enter\".\n\t\tconst loadStart = typed + Math.round(o.fps * 0.15);\n\t\tconst loadEnd = loadStart + Math.round(o.fps * 0.9);\n\t\tconst bar = host.box({\n\t\t\tid: ctx.partId(\"load\"),\n\t\t\tposition: \"absolute\",\n\t\t\tx: 0,\n\t\t\ty: o.rowY + o.rowH - 2 * o.s,\n\t\t\twidth: 0,\n\t\t\theight: 2 * o.s,\n\t\t\tbackground: o.accent,\n\t\t});\n\t\tbar.animate(\n\t\t\tLayerAnimation.keys(\"width\", [\n\t\t\t\t[0, 0],\n\t\t\t\t[loadStart, 0, \"hold\"],\n\t\t\t\t[loadStart + Math.round(o.fps * 0.35), o.W * 0.62, \"power2.out\"],\n\t\t\t\t[loadEnd, o.W, \"power3.inOut\"],\n\t\t\t]),\n\t\t\tLayerAnimation.keys(\"opacity\", [\n\t\t\t\t[0, 0],\n\t\t\t\t[loadStart, 1, \"hold\"],\n\t\t\t\t[loadEnd, 1],\n\t\t\t\t[loadEnd + Math.round(o.fps * 0.3), 0, \"power2.out\"],\n\t\t\t]),\n\t\t);\n\t\tout.push(bar);\n\t\to.parts.load = bar;\n\t\to.cues.loaded.push({ frame: loadEnd });\n\t}\n\n\tconst field = host.box({\n\t\tid: ctx.partId(\"url-field\"),\n\t\tposition: \"absolute\",\n\t\tx: fieldX,\n\t\ty: fieldY,\n\t\twidth: fieldW,\n\t\theight: fieldH,\n\t\tbackground: o.pal.field,\n\t\tborderRadius: 9 * o.s,\n\t\toverflow: \"hidden\",\n\t\tchildren: fieldChildren,\n\t});\n\to.parts[\"url-field\"] = field;\n\tout.unshift(field);\n\treturn out;\n}\n\n/**\n * Window chrome around any content — desktop window, browser with a typed URL,\n * terminal, or bare frame — and the coordinate system for pointing into it.\n */\nexport const AppFrame = /* @__PURE__ */ bindComponent(appFrame);\n"
+		}
+	]
+}

package/dist/registry/backdrop.json

@@ -0,0 +1,37 @@
+{
+	"name": "backdrop",
+	"title": "Backdrop",
+	"summary": "The surface behind a scene: a drifting mesh gradient, a grid or a dot field, with vignette and film grain, looping exactly.",
+	"tags": [
+		"background",
+		"backdrop",
+		"gradient",
+		"grid",
+		"dots",
+		"grain",
+		"loop"
+	],
+	"example": "Backdrop({ kind: \"mesh\" })",
+	"parts": [
+		"surface",
+		"background",
+		"blob-0",
+		"blob-0-x",
+		"pattern",
+		"pattern-lit",
+		"glow-matte",
+		"glow",
+		"vignette",
+		"grain"
+	],
+	"cues": [
+		"loops"
+	],
+	"registryDependencies": [],
+	"files": [
+		{
+			"path": "backdrop/index.ts",
+			"content": "/**\n * Backdrop: the surface behind a scene. A drifting mesh gradient, a grid or\n * a dot field, with a vignette and film grain. Every motion is periodic in\n * `loop`, so frame f and frame f + loop are the same picture and the\n * backdrop can sit under any length of scene.\n *\n * Keys sit on each motion's extremes with `sine.inOut` (an exact cosine\n * between extremes), so a loop costs a few keys per axis.\n *\n * Coordinates are the frame's: the root covers the video (default\n * 1920 × 1080 × theme scale, or the given width / height) from 0, 0.\n */\nimport {\n\ttype KeyframeTuple,\n\tLayerAnimation,\n\ttype LayoutNode,\n} from \"framefields\";\nimport {\n\ttype Animatable,\n\tbindComponent,\n\tdefineComponent,\n\tz,\n} from \"framefields/components\";\n\nexport const BACKDROP_KINDS = [\"mesh\", \"grid\", \"dots\", \"solid\"] as const;\nexport type BackdropKind = (typeof BACKDROP_KINDS)[number];\n\nexport interface BackdropCues {\n\t[name: string]: ReadonlyArray<{ frame: number }>;\n\t/** The first frame of every loop. */\n\tloops: ReadonlyArray<{ frame: number }>;\n}\n\n/**\n * Keys per track, to bound program size on very long scenes (past it the\n * last loop holds). A layer carries at most two looping tracks, so it stays\n * under the `large_animation` lint threshold of 2000.\n */\nconst MAX_KEYS = 960;\n\nexport const backdrop = /* @__PURE__ */ defineComponent({\n\tname: \"Backdrop\",\n\tprops: () => ({\n\t\tkind: z.enum(BACKDROP_KINDS).default(\"mesh\"),\n\t\t/** Blob colours (mesh); the first is the grid / dot colour. */\n\t\tcolors: z.array(z.string()).min(1).optional(),\n\t\tbackground: z.string().optional(),\n\t\t/** Frames of one loop. Default 10 seconds. */\n\t\tloop: z.number().int().min(2).optional(),\n\t\t/** Drift amplitude multiplier (the period stays `loop`). */\n\t\tspeed: z.number().min(0).default(1),\n\t\t/** Grid cell / dot pitch. */\n\t\tcell: z.number().positive().optional(),\n\t\tintensity: z.number().min(0).max(2).default(1),\n\t\t/** A soft light drifting over the grid or dots. */\n\t\tglow: z.boolean().optional(),\n\t\tvignette: z.number().min(0).max(1).default(0.45),\n\t\tgrain: z.union([z.number().min(0).max(1), z.literal(false)]).default(0.35),\n\t}),\n\tdefaults: { enter: false, exit: false },\n\tbuild(ctx, props) {\n\t\tconst { host, theme, fps } = ctx;\n\t\tconst s = theme.scale;\n\t\tconst W = ctx.requested.width ?? 1920 * s;\n\t\tconst H = ctx.requested.height ?? 1080 * s;\n\t\tconst c = theme.color;\n\t\tconst loop = props.loop ?? fps * 10;\n\t\tconst colors = props.colors ?? [c.accent, c.accent2, c.highlight];\n\t\tconst cell = props.cell ?? 64 * s;\n\t\t// Motion is keyed for the window, or a minute, in whole loops.\n\t\tconst span =\n\t\t\tMath.max(1, Math.ceil((ctx.requested.duration ?? fps * 60) / loop)) *\n\t\t\tloop;\n\t\tconst parts: Record<string, Animatable<LayoutNode>> = {};\n\t\tconst children: LayoutNode[] = [];\n\t\tconst add = (name: string, node: Animatable<LayoutNode>) => {\n\t\t\tparts[name] = node;\n\t\t\tchildren.push(node);\n\t\t\treturn node;\n\t\t};\n\n\t\tadd(\n\t\t\t\"background\",\n\t\t\thost.box({\n\t\t\t\tid: ctx.partId(\"background\"),\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tx: 0,\n\t\t\t\ty: 0,\n\t\t\t\twidth: W,\n\t\t\t\theight: H,\n\t\t\t\tbackground: props.background ?? c.bg,\n\t\t\t}),\n\t\t);\n\n\t\tif (props.kind === \"mesh\") {\n\t\t\tconst count = Math.max(3, colors.length + 1);\n\t\t\tconst r = ctx.rng(\"mesh\");\n\t\t\tfor (let i = 0; i < count; i++) {\n\t\t\t\tconst size = Math.max(W, H) * (0.75 + r.next() * 0.35);\n\t\t\t\tconst cx = W * (0.15 + 0.7 * ((i + r.next() * 0.6) / count));\n\t\t\t\tconst cy = H * (0.25 + r.next() * 0.5);\n\t\t\t\tconst ax = W * 0.16 * props.speed;\n\t\t\t\tconst ay = H * 0.14 * props.speed;\n\t\t\t\tconst color = colors[i % colors.length] as string;\n\t\t\t\tconst blob = host.box({\n\t\t\t\t\tid: ctx.partId(`blob-${i}`),\n\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\tx: 0,\n\t\t\t\t\ty: 0,\n\t\t\t\t\twidth: size,\n\t\t\t\t\theight: size,\n\t\t\t\t\tbackground: `radial-gradient(closest-side, ${color} 0%, ${transparent(color)} 100%)`,\n\t\t\t\t\topacity: Math.min(1, 0.6 * props.intensity),\n\t\t\t\t});\n\t\t\t\t// y on the blob, x on its carrier: one track each, each under the key limit.\n\t\t\t\tblob.animate(\n\t\t\t\t\tLayerAnimation.keys(\n\t\t\t\t\t\t\"y\",\n\t\t\t\t\t\tcosineKeys(\n\t\t\t\t\t\t\tcy - size / 2,\n\t\t\t\t\t\t\tay,\n\t\t\t\t\t\t\t2,\n\t\t\t\t\t\t\tr.next() * Math.PI * 2,\n\t\t\t\t\t\t\tloop,\n\t\t\t\t\t\t\tspan,\n\t\t\t\t\t\t),\n\t\t\t\t\t),\n\t\t\t\t);\n\t\t\t\tconst carrier = host.box({\n\t\t\t\t\tid: ctx.partId(`blob-${i}-x`),\n\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\tx: 0,\n\t\t\t\t\ty: 0,\n\t\t\t\t\twidth: W,\n\t\t\t\t\theight: H,\n\t\t\t\t\tchildren: [blob],\n\t\t\t\t});\n\t\t\t\tcarrier.animate(\n\t\t\t\t\tLayerAnimation.keys(\n\t\t\t\t\t\t\"x\",\n\t\t\t\t\t\tcosineKeys(\n\t\t\t\t\t\t\tcx - size / 2,\n\t\t\t\t\t\t\tax * (r.next() < 0.5 ? -1 : 1),\n\t\t\t\t\t\t\t1,\n\t\t\t\t\t\t\tr.next() * Math.PI * 2,\n\t\t\t\t\t\t\tloop,\n\t\t\t\t\t\t\tspan,\n\t\t\t\t\t\t),\n\t\t\t\t\t),\n\t\t\t\t);\n\t\t\t\tparts[`blob-${i}`] = blob;\n\t\t\t\tadd(`blob-${i}-x`, carrier);\n\t\t\t}\n\t\t}\n\n\t\tif (props.kind === \"grid\" || props.kind === \"dots\") {\n\t\t\tconst color = colors[0] as string;\n\t\t\t// Dots are bullet glyphs on a lattice: one text node draws hundreds\n\t\t\t// of them in a few milliseconds (a path of circles takes seconds).\n\t\t\tconst dotSize = Math.max(6, cell * 0.3);\n\t\t\tconst advance = host.measure(\"•\", {\n\t\t\t\tfontFamily: theme.font.body,\n\t\t\t\tfontSize: dotSize,\n\t\t\t}).width;\n\t\t\tconst dots = () => {\n\t\t\t\tconst cols = Math.ceil(W / cell) + 3;\n\t\t\t\tconst rows = Math.ceil(H / cell) + 3;\n\t\t\t\treturn Array.from({ length: rows }, () => \"•\".repeat(cols)).join(\"\\n\");\n\t\t\t};\n\t\t\tconst pattern = (name: string, opacity: number) => {\n\t\t\t\tconst place = {\n\t\t\t\t\tid: ctx.partId(name),\n\t\t\t\t\tposition: \"absolute\" as const,\n\t\t\t\t\tx: -cell,\n\t\t\t\t\ty: -cell,\n\t\t\t\t\topacity: Math.min(1, opacity * props.intensity),\n\t\t\t\t};\n\t\t\t\tconst node =\n\t\t\t\t\tprops.kind === \"grid\"\n\t\t\t\t\t\t? host.shape(\"path\", {\n\t\t\t\t\t\t\t\t...place,\n\t\t\t\t\t\t\t\twidth: W + cell * 2,\n\t\t\t\t\t\t\t\theight: H + cell * 2,\n\t\t\t\t\t\t\t\td: gridPath(W, H, cell),\n\t\t\t\t\t\t\t\tfillType: \"none\",\n\t\t\t\t\t\t\t\tstrokeColor: color,\n\t\t\t\t\t\t\t\tstrokeWidth: Math.max(1, s),\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t: host.text(dots(), {\n\t\t\t\t\t\t\t\t...place,\n\t\t\t\t\t\t\t\tfontFamily: theme.font.body,\n\t\t\t\t\t\t\t\tfontSize: dotSize,\n\t\t\t\t\t\t\t\tfill: color,\n\t\t\t\t\t\t\t\tletterSpacing: cell - advance,\n\t\t\t\t\t\t\t\tlineHeight: cell,\n\t\t\t\t\t\t\t});\n\t\t\t\t// One cell per loop, diagonally, snapping back on the loop frame.\n\t\t\t\tnode.animate(\n\t\t\t\t\tLayerAnimation.create()\n\t\t\t\t\t\t.keys(\"x\", slideKeys(-cell, cell, loop, span))\n\t\t\t\t\t\t.keys(\"y\", slideKeys(-cell, cell, loop, span)),\n\t\t\t\t);\n\t\t\t\treturn add(name, node);\n\t\t\t};\n\t\t\tpattern(\"pattern\", props.kind === \"grid\" ? 0.1 : 0.16);\n\t\t\tif (props.glow ?? true) {\n\t\t\t\t// A brighter copy of the pattern, seen through a drifting light.\n\t\t\t\tconst lit = pattern(\"pattern-lit\", 0.5);\n\t\t\t\tconst size = Math.max(W, H) * 0.7;\n\t\t\t\tconst r = ctx.rng(\"glow\");\n\t\t\t\tconst lightKeys = {\n\t\t\t\t\tx: cosineKeys(\n\t\t\t\t\t\tW / 2 - size / 2,\n\t\t\t\t\t\tW * 0.3 * props.speed,\n\t\t\t\t\t\t1,\n\t\t\t\t\t\tr.next() * Math.PI * 2,\n\t\t\t\t\t\tloop,\n\t\t\t\t\t\tspan,\n\t\t\t\t\t),\n\t\t\t\t\ty: cosineKeys(\n\t\t\t\t\t\tH / 2 - size / 2,\n\t\t\t\t\t\tH * 0.25 * props.speed,\n\t\t\t\t\t\t1,\n\t\t\t\t\t\tr.next() * Math.PI * 2,\n\t\t\t\t\t\tloop,\n\t\t\t\t\t\tspan,\n\t\t\t\t\t),\n\t\t\t\t};\n\t\t\t\tconst light = host.box({\n\t\t\t\t\tid: ctx.partId(\"glow-matte\"),\n\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\tx: lightKeys.x[0]?.[1] as number,\n\t\t\t\t\ty: lightKeys.y[0]?.[1] as number,\n\t\t\t\t\twidth: size,\n\t\t\t\t\theight: size,\n\t\t\t\t\tbackground:\n\t\t\t\t\t\t\"radial-gradient(closest-side, #fff 0%, rgba(255,255,255,0) 100%)\",\n\t\t\t\t});\n\t\t\t\tlight.animate(\n\t\t\t\t\tLayerAnimation.create().keys(\"x\", lightKeys.x).keys(\"y\", lightKeys.y),\n\t\t\t\t);\n\t\t\t\thost.matte(lit, light);\n\t\t\t\tparts[\"glow-matte\"] = light;\n\t\t\t\t// A faint halo of the pattern colour where the light is.\n\t\t\t\tconst halo = host.box({\n\t\t\t\t\tid: ctx.partId(\"glow\"),\n\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\tx: lightKeys.x[0]?.[1] as number,\n\t\t\t\t\ty: lightKeys.y[0]?.[1] as number,\n\t\t\t\t\twidth: size,\n\t\t\t\t\theight: size,\n\t\t\t\t\tbackground: `radial-gradient(closest-side, ${color} 0%, ${transparent(color)} 100%)`,\n\t\t\t\t\topacity: 0.18 * props.intensity,\n\t\t\t\t});\n\t\t\t\thalo.animate(\n\t\t\t\t\tLayerAnimation.create().keys(\"x\", lightKeys.x).keys(\"y\", lightKeys.y),\n\t\t\t\t);\n\t\t\t\tadd(\"glow\", halo);\n\t\t\t}\n\t\t}\n\n\t\tif (props.vignette > 0)\n\t\t\tadd(\n\t\t\t\t\"vignette\",\n\t\t\t\thost.box({\n\t\t\t\t\tid: ctx.partId(\"vignette\"),\n\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\tx: 0,\n\t\t\t\t\ty: 0,\n\t\t\t\t\twidth: W,\n\t\t\t\t\theight: H,\n\t\t\t\t\tbackground: `radial-gradient(rgba(0,0,0,0) 45%, rgba(0,0,0,${round(props.vignette)}) 100%)`,\n\t\t\t\t}),\n\t\t\t);\n\n\t\t// Grain is its own soft-light layer over everything else.\n\t\tif (props.grain !== false && props.grain > 0)\n\t\t\tadd(\n\t\t\t\t\"grain\",\n\t\t\t\thost.grain({\n\t\t\t\t\tid: ctx.partId(\"grain\"),\n\t\t\t\t\tx: 0,\n\t\t\t\t\ty: 0,\n\t\t\t\t\twidth: W,\n\t\t\t\t\theight: H,\n\t\t\t\t\tstrength: round(props.grain * 100),\n\t\t\t\t}),\n\t\t\t);\n\t\tconst surface = host.box({\n\t\t\tid: ctx.partId(\"surface\"),\n\t\t\tposition: \"absolute\",\n\t\t\tx: 0,\n\t\t\ty: 0,\n\t\t\twidth: W,\n\t\t\theight: H,\n\t\t\toverflow: \"hidden\",\n\t\t\tchildren,\n\t\t});\n\t\tparts.surface = surface;\n\n\t\treturn {\n\t\t\tchildren: [surface],\n\t\t\twidth: W,\n\t\t\theight: H,\n\t\t\tduration: null,\n\t\t\torigin: [0, 0],\n\t\t\tcues: {\n\t\t\t\tloops: Array.from({ length: span / loop }, (_, k) => ({\n\t\t\t\t\tframe: k * loop,\n\t\t\t\t})),\n\t\t\t} as BackdropCues,\n\t\t\tparts,\n\t\t};\n\t},\n});\n\nconst round = (v: number) => Math.round(v * 1000) / 1000;\n\n/** `#rrggbb` / `#rgb` at alpha 0 (same hue, so the fade has no dark fringe). */\nfunction transparent(color: string): string {\n\tconst hex = color.trim().replace(/^#/, \"\");\n\tconst full =\n\t\thex.length === 3\n\t\t\t? hex\n\t\t\t\t\t.split(\"\")\n\t\t\t\t\t.map((h) => h + h)\n\t\t\t\t\t.join(\"\")\n\t\t\t: hex.slice(0, 6);\n\tif (!/^[0-9a-f]{6}$/i.test(full)) return \"rgba(0,0,0,0)\";\n\tconst n = Number.parseInt(full, 16);\n\treturn `rgba(${(n >> 16) & 255},${(n >> 8) & 255},${n & 255},0)`;\n}\n\n/**\n * Keys for `centre + amplitude × cos(2π · cycles · f / loop + phase)` over\n * `span` frames (whole loops): the value at every loop start, and at each\n * extreme inside the loop. Between extremes `sine.inOut` is the cosine\n * exactly; the partial pieces at loop starts use `sine.out` / `sine.in`.\n * Every loop repeats the same keys, so the motion is exactly periodic.\n */\nexport function cosineKeys(\n\tcentre: number,\n\tamplitude: number,\n\tcycles: number,\n\tphase: number,\n\tloop: number,\n\tspan: number,\n): KeyframeTuple[] {\n\tconst at = (f: number) =>\n\t\tround(\n\t\t\tcentre + amplitude * Math.cos((2 * Math.PI * cycles * f) / loop + phase),\n\t\t);\n\tif (amplitude === 0) return [[0, round(centre)]];\n\t// Extremes: 2π·cycles·f/loop + phase = nπ.\n\tconst extremes: number[] = [];\n\tfor (let n = -2; n <= cycles * 2 + 2; n++) {\n\t\tconst f = Math.round(\n\t\t\t((n * Math.PI - phase) * loop) / (2 * Math.PI * cycles),\n\t\t);\n\t\tif (f > 0 && f < loop && !extremes.includes(f)) extremes.push(f);\n\t}\n\textremes.sort((a, b) => a - b);\n\tconst perLoop: KeyframeTuple[] = extremes.map((f, i) => [\n\t\tf,\n\t\tat(f),\n\t\ti === 0 ? \"sine.out\" : \"sine.inOut\",\n\t]);\n\tconst loops = Math.max(\n\t\t1,\n\t\tMath.min(span / loop, Math.floor(MAX_KEYS / (perLoop.length + 1))),\n\t);\n\tconst keys: KeyframeTuple[] = [];\n\tfor (let k = 0; k < loops; k++) {\n\t\tkeys.push(k === 0 ? [0, at(0)] : [k * loop, at(0), \"sine.in\"]);\n\t\tfor (const [f, v, e] of perLoop)\n\t\t\tkeys.push([k * loop + (f as number), v, e] as KeyframeTuple);\n\t}\n\tkeys.push([loops * loop, at(0), \"sine.in\"]);\n\treturn keys;\n}\n\n/** `from` → `from + by` linearly over each loop, snapping back on the loop frame. */\nexport function slideKeys(\n\tfrom: number,\n\tby: number,\n\tloop: number,\n\tspan: number,\n): KeyframeTuple[] {\n\tconst loops = Math.max(1, Math.min(span / loop, Math.floor(MAX_KEYS / 2)));\n\tconst keys: KeyframeTuple[] = [[0, from]];\n\tfor (let k = 0; k < loops; k++) {\n\t\tkeys.push([\n\t\t\t(k + 1) * loop - 1,\n\t\t\tround(from + (by * (loop - 1)) / loop),\n\t\t\t\"linear\",\n\t\t]);\n\t\tkeys.push([(k + 1) * loop, from, \"hold\"]);\n\t}\n\treturn keys;\n}\n\nfunction gridPath(W: number, H: number, cell: number): string {\n\tconst w = W + cell * 2;\n\tconst h = H + cell * 2;\n\tconst parts: string[] = [];\n\tfor (let x = 0; x <= w + 0.01; x += cell)\n\t\tparts.push(`M${round(x)} 0L${round(x)} ${round(h)}`);\n\tfor (let y = 0; y <= h + 0.01; y += cell)\n\t\tparts.push(`M0 ${round(y)}L${round(w)} ${round(y)}`);\n\treturn parts.join(\"\");\n}\n\n/**\n * The surface behind a scene: a drifting mesh gradient, a grid or a dot field,\n * with vignette and film grain, looping exactly.\n */\nexport const Backdrop = /* @__PURE__ */ bindComponent(backdrop);\n"
+		}
+	]
+}

package/dist/registry/before-after.json

@@ -0,0 +1,33 @@
+{
+	"name": "before-after",
+	"title": "BeforeAfter",
+	"summary": "Two versions of one picture split by a moving divider with a grip and labels: a clip with and without an effect, a redesign, a cleanup.",
+	"tags": [
+		"before after",
+		"comparison",
+		"split",
+		"wipe",
+		"slider",
+		"effects"
+	],
+	"example": "BeforeAfter({ before: \"assets/raw.mp4\", after: graded })",
+	"parts": [
+		"after",
+		"before",
+		"before-clip",
+		"divider",
+		"handle",
+		"label-0",
+		"label-1"
+	],
+	"cues": [
+		"settled"
+	],
+	"registryDependencies": [],
+	"files": [
+		{
+			"path": "before-after/index.ts",
+			"content": "/**\n * BeforeAfter: two versions of one picture split by a moving divider. The\n * `before` side is clipped to the divider; both sides are laid out at the\n * full size, so they line up pixel for pixel. Give one clip twice, once\n * with an effect, to show what the effect does.\n */\nimport {\n\ttype KeyframeTuple,\n\tLayerAnimation,\n\ttype LayoutNode,\n} from \"framefields\";\nimport {\n\ttype Animatable,\n\tbakeSamples,\n\tbindComponent,\n\tdefineComponent,\n\tevaluateEase,\n\tscaleFrames,\n\tz,\n} from \"framefields/components\";\n\nexport interface BeforeAfterCues {\n\t[name: string]: ReadonlyArray<{ frame: number }>;\n\t/** The divider's last move ends. */\n\tsettled: ReadonlyArray<{ frame: number }>;\n}\n\nconst side = () =>\n\tz.custom<LayoutNode | LayoutNode[] | string>(\n\t\t(v) =>\n\t\t\ttypeof v === \"string\" ||\n\t\t\tArray.isArray(v) ||\n\t\t\t(typeof v === \"object\" && v !== null),\n\t\t{ message: \"Expected layers or a media path for this side\" },\n\t);\n\nexport const beforeAfter = /* @__PURE__ */ defineComponent({\n\tname: \"BeforeAfter\",\n\tprops: () => ({\n\t\tbefore: side(),\n\t\tafter: side(),\n\t\t/** Divider position 0–1, or keys `[frame, value, ease?]`. Default: a sweep. */\n\t\tsplit: z\n\t\t\t.union([\n\t\t\t\tz.number().min(0).max(1),\n\t\t\t\tz\n\t\t\t\t\t.array(\n\t\t\t\t\t\tz.union([\n\t\t\t\t\t\t\tz.tuple([z.number().int().min(0), z.number().min(0).max(1)]),\n\t\t\t\t\t\t\tz.tuple([\n\t\t\t\t\t\t\t\tz.number().int().min(0),\n\t\t\t\t\t\t\t\tz.number().min(0).max(1),\n\t\t\t\t\t\t\t\tz.string(),\n\t\t\t\t\t\t\t]),\n\t\t\t\t\t\t]),\n\t\t\t\t\t)\n\t\t\t\t\t.min(1),\n\t\t\t])\n\t\t\t.optional(),\n\t\tdirection: z.enum([\"horizontal\", \"vertical\"]).default(\"horizontal\"),\n\t\tlabels: z\n\t\t\t.union([z.tuple([z.string(), z.string()]), z.literal(false)])\n\t\t\t.default([\"Before\", \"After\"]),\n\t\thandle: z.boolean().default(true),\n\t\tfit: z.enum([\"cover\", \"contain\", \"fill\"]).default(\"cover\"),\n\t\tcolor: z.string().default(\"#ffffff\"),\n\t}),\n\tdefaults: { enter: false, exit: false },\n\tbuild(ctx, props) {\n\t\tconst { host, theme, fps } = ctx;\n\t\tconst s = theme.scale;\n\t\tconst W = ctx.requested.width ?? 1280 * s;\n\t\tconst H = ctx.requested.height ?? 720 * s;\n\t\tconst across = props.direction === \"horizontal\";\n\t\tconst L = across ? W : H;\n\t\tconst f = (n: number) => scaleFrames(n, fps);\n\t\tconst keys: KeyframeTuple[] =\n\t\t\ttypeof props.split === \"number\"\n\t\t\t\t? [[0, props.split]]\n\t\t\t\t: ((props.split as KeyframeTuple[] | undefined) ?? [\n\t\t\t\t\t\t[0, 0.5],\n\t\t\t\t\t\t[f(20), 0.5],\n\t\t\t\t\t\t[f(50), 0.15, \"power2.inOut\"],\n\t\t\t\t\t\t[f(100), 0.85, \"power2.inOut\"],\n\t\t\t\t\t\t[f(135), 0.5, \"power2.inOut\"],\n\t\t\t\t\t]);\n\t\tconst sorted = [...keys].sort(\n\t\t\t(a, b) => (a[0] as number) - (b[0] as number),\n\t\t);\n\t\tconst px = (k: KeyframeTuple[], by = 0): KeyframeTuple[] =>\n\t\t\tk.map(([fr, v, e]) =>\n\t\t\t\te\n\t\t\t\t\t? [fr, round((v as number) * L + by), e]\n\t\t\t\t\t: [fr, round((v as number) * L + by)],\n\t\t\t) as KeyframeTuple[];\n\t\tconst settled = sorted[sorted.length - 1]?.[0] as number;\n\n\t\tconst fill = (name: string, content: LayoutNode | LayoutNode[] | string) =>\n\t\t\ttypeof content === \"string\"\n\t\t\t\t? [\n\t\t\t\t\t\thost.media(content, {\n\t\t\t\t\t\t\tid: ctx.partId(`${name}-media`),\n\t\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\t\tx: 0,\n\t\t\t\t\t\t\ty: 0,\n\t\t\t\t\t\t\twidth: W,\n\t\t\t\t\t\t\theight: H,\n\t\t\t\t\t\t\tfit: props.fit,\n\t\t\t\t\t\t}),\n\t\t\t\t\t]\n\t\t\t\t: Array.isArray(content)\n\t\t\t\t\t? content\n\t\t\t\t\t: [content];\n\n\t\tconst parts: Record<string, Animatable<LayoutNode>> = {};\n\t\tconst add = <T extends Animatable<LayoutNode>>(name: string, node: T) => {\n\t\t\tparts[name] = node;\n\t\t\treturn node;\n\t\t};\n\t\tconst after = add(\n\t\t\t\"after\",\n\t\t\thost.box({\n\t\t\t\tid: ctx.partId(\"after\"),\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tx: 0,\n\t\t\t\ty: 0,\n\t\t\t\twidth: W,\n\t\t\t\theight: H,\n\t\t\t\toverflow: \"hidden\",\n\t\t\t\tchildren: fill(\"after\", props.after),\n\t\t\t}),\n\t\t);\n\t\tconst start = (sorted[0]?.[1] as number) * L;\n\t\tconst clip = add(\n\t\t\t\"before-clip\",\n\t\t\thost.box({\n\t\t\t\tid: ctx.partId(\"before-clip\"),\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tx: 0,\n\t\t\t\ty: 0,\n\t\t\t\twidth: across ? start : W,\n\t\t\t\theight: across ? H : start,\n\t\t\t\toverflow: \"hidden\",\n\t\t\t\tchildren: [\n\t\t\t\t\tadd(\n\t\t\t\t\t\t\"before\",\n\t\t\t\t\t\thost.box({\n\t\t\t\t\t\t\tid: ctx.partId(\"before\"),\n\t\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\t\tx: 0,\n\t\t\t\t\t\t\ty: 0,\n\t\t\t\t\t\t\twidth: W,\n\t\t\t\t\t\t\theight: H,\n\t\t\t\t\t\t\tchildren: fill(\"before\", props.before),\n\t\t\t\t\t\t}),\n\t\t\t\t\t),\n\t\t\t\t],\n\t\t\t}),\n\t\t);\n\t\tif (sorted.length > 1)\n\t\t\tclip.animate(\n\t\t\t\tLayerAnimation.keys(across ? \"width\" : \"height\", px(sorted)),\n\t\t\t);\n\t\tconst children: LayoutNode[] = [after, clip];\n\n\t\t// ── Divider and handle ───────────────────────────────────────────\n\t\tconst thick = Math.max(2, 3 * s);\n\t\tconst line = add(\n\t\t\t\"divider\",\n\t\t\thost.box({\n\t\t\t\tid: ctx.partId(\"divider\"),\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tx: across ? start - thick / 2 : 0,\n\t\t\t\ty: across ? 0 : start - thick / 2,\n\t\t\t\twidth: across ? thick : W,\n\t\t\t\theight: across ? H : thick,\n\t\t\t\tbackground: props.color,\n\t\t\t}),\n\t\t);\n\t\thost.style(line, {\n\t\t\tdropShadow: {\n\t\t\t\tcolor: \"#000000\",\n\t\t\t\topacity: 0.35,\n\t\t\t\tangle: 90,\n\t\t\t\tdistance: 0,\n\t\t\t\tsize: 12 * s,\n\t\t\t},\n\t\t});\n\t\tif (sorted.length > 1)\n\t\t\tline.animate(\n\t\t\t\tLayerAnimation.keys(across ? \"x\" : \"y\", px(sorted, -thick / 2)),\n\t\t\t);\n\t\tchildren.push(line);\n\t\tif (props.handle) {\n\t\t\tconst d = 52 * s;\n\t\t\tconst c = d / 2;\n\t\t\tconst a = d * 0.12;\n\t\t\tconst chevrons = across\n\t\t\t\t? `M${c - a * 1.2} ${c - a}L${c - a * 2.2} ${c}L${c - a * 1.2} ${c + a}M${c + a * 1.2} ${c - a}L${c + a * 2.2} ${c}L${c + a * 1.2} ${c + a}`\n\t\t\t\t: `M${c - a} ${c - a * 1.2}L${c} ${c - a * 2.2}L${c + a} ${c - a * 1.2}M${c - a} ${c + a * 1.2}L${c} ${c + a * 2.2}L${c + a} ${c + a * 1.2}`;\n\t\t\tconst grip = add(\n\t\t\t\t\"handle\",\n\t\t\t\thost.box({\n\t\t\t\t\tid: ctx.partId(\"handle\"),\n\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\tx: across ? start - c : W / 2 - c,\n\t\t\t\t\ty: across ? H / 2 - c : start - c,\n\t\t\t\t\twidth: d,\n\t\t\t\t\theight: d,\n\t\t\t\t\tbackground: props.color,\n\t\t\t\t\tborderRadius: c,\n\t\t\t\t\tchildren: [\n\t\t\t\t\t\thost.shape(\"path\", {\n\t\t\t\t\t\t\tid: ctx.partId(\"handle-arrows\"),\n\t\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\t\tx: 0,\n\t\t\t\t\t\t\ty: 0,\n\t\t\t\t\t\t\twidth: d,\n\t\t\t\t\t\t\theight: d,\n\t\t\t\t\t\t\td: chevrons,\n\t\t\t\t\t\t\tfillType: \"none\",\n\t\t\t\t\t\t\tstrokeColor: \"#111111\",\n\t\t\t\t\t\t\tstrokeWidth: Math.max(1.5, 2.4 * s),\n\t\t\t\t\t\t\tstrokeLineCap: \"round\",\n\t\t\t\t\t\t\tstrokeLineJoin: \"round\",\n\t\t\t\t\t\t}),\n\t\t\t\t\t],\n\t\t\t\t}),\n\t\t\t);\n\t\t\thost.style(grip, {\n\t\t\t\tdropShadow: {\n\t\t\t\t\tcolor: \"#000000\",\n\t\t\t\t\topacity: 0.4,\n\t\t\t\t\tangle: 90,\n\t\t\t\t\tdistance: 3 * s,\n\t\t\t\t\tsize: 14 * s,\n\t\t\t\t},\n\t\t\t});\n\t\t\tif (sorted.length > 1)\n\t\t\t\tgrip.animate(LayerAnimation.keys(across ? \"x\" : \"y\", px(sorted, -c)));\n\t\t\tchildren.push(grip);\n\t\t}\n\n\t\t// ── Labels: each fades as the divider covers it ─────────────────\n\t\tif (props.labels) {\n\t\t\tconst fs = 22 * s;\n\t\t\tconst pad = 14 * s;\n\t\t\tconst margin = 24 * s;\n\t\t\tconst length = Math.max(1, settled);\n\t\t\tconst splitAt = (fr: number) => valueAt(sorted, fr) * L;\n\t\t\tprops.labels.forEach((text, i) => {\n\t\t\t\tconst m = host.measure(text, {\n\t\t\t\t\tfontFamily: theme.font.body,\n\t\t\t\t\tfontSize: fs,\n\t\t\t\t\tfontWeight: 600,\n\t\t\t\t});\n\t\t\t\tconst w = m.width + pad * 2;\n\t\t\t\tconst h = m.height + pad * 0.9;\n\t\t\t\tconst x = across ? (i === 0 ? margin : W - margin - w) : margin;\n\t\t\t\tconst y = across ? margin : i === 0 ? margin : H - margin - h;\n\t\t\t\t// How far the label's far edge is inside its own side.\n\t\t\t\tconst visible = (fr: number) => {\n\t\t\t\t\tconst at = splitAt(fr);\n\t\t\t\t\tconst edge = across ? (i === 0 ? x + w : x) : i === 0 ? y + h : y;\n\t\t\t\t\tconst inside = i === 0 ? at - edge : edge - at;\n\t\t\t\t\treturn Math.max(0, Math.min(1, inside / (24 * s) + 1));\n\t\t\t\t};\n\t\t\t\tconst pill = add(\n\t\t\t\t\t`label-${i}`,\n\t\t\t\t\thost.box({\n\t\t\t\t\t\tid: ctx.partId(`label-${i}`),\n\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\tx,\n\t\t\t\t\t\ty,\n\t\t\t\t\t\twidth: w,\n\t\t\t\t\t\theight: h,\n\t\t\t\t\t\tbackground: \"rgba(0,0,0,0.55)\",\n\t\t\t\t\t\tborderRadius: h / 2,\n\t\t\t\t\t\topacity: visible(0),\n\t\t\t\t\t\tchildren: [\n\t\t\t\t\t\t\thost.text(text, {\n\t\t\t\t\t\t\t\tid: ctx.partId(`label-${i}-text`),\n\t\t\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\t\t\tx: pad,\n\t\t\t\t\t\t\t\ty: pad * 0.45,\n\t\t\t\t\t\t\t\tfontFamily: theme.font.body,\n\t\t\t\t\t\t\t\tfontSize: fs,\n\t\t\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\t\t\tfill: \"#ffffff\",\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t],\n\t\t\t\t\t}),\n\t\t\t\t);\n\t\t\t\tif (sorted.length > 1)\n\t\t\t\t\tpill.animate(\n\t\t\t\t\t\tLayerAnimation.keys(\n\t\t\t\t\t\t\t\"opacity\",\n\t\t\t\t\t\t\tbakeSamples(\n\t\t\t\t\t\t\t\tArray.from({ length: length + 1 }, (_, fr) => visible(fr)),\n\t\t\t\t\t\t\t\t0,\n\t\t\t\t\t\t\t\t{ tolerance: 0.02 },\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t),\n\t\t\t\t\t);\n\t\t\t\tchildren.push(pill);\n\t\t\t});\n\t\t}\n\n\t\treturn {\n\t\t\tchildren,\n\t\t\twidth: W,\n\t\t\theight: H,\n\t\t\tduration: null,\n\t\t\tcues: { settled: [{ frame: settled }] } as BeforeAfterCues,\n\t\t\tparts,\n\t\t};\n\t},\n});\n\nconst round = (v: number) => Math.round(v * 1000) / 1000;\n\n/** The split keys' value at frame `f` (each segment eased by its end key). */\nfunction valueAt(keys: readonly KeyframeTuple[], f: number): number {\n\tconst first = keys[0] as KeyframeTuple;\n\tif (f <= (first[0] as number)) return first[1] as number;\n\tfor (let i = 0; i < keys.length - 1; i++) {\n\t\tconst [f0, v0] = keys[i] as KeyframeTuple;\n\t\tconst [f1, v1, e] = keys[i + 1] as KeyframeTuple;\n\t\tif (f >= (f0 as number) && f <= (f1 as number)) {\n\t\t\tconst t = evaluateEase(\n\t\t\t\te as string | undefined,\n\t\t\t\t(f - (f0 as number)) / Math.max(1, (f1 as number) - (f0 as number)),\n\t\t\t);\n\t\t\treturn (v0 as number) + ((v1 as number) - (v0 as number)) * t;\n\t\t}\n\t}\n\treturn keys[keys.length - 1]?.[1] as number;\n}\n\n/**\n * Two versions of one picture split by a moving divider with a grip and labels:\n * a clip with and without an effect, a redesign, a cleanup.\n */\nexport const BeforeAfter = /* @__PURE__ */ bindComponent(beforeAfter);\n"
+		}
+	]
+}

package/dist/registry/callout.json

@@ -0,0 +1,30 @@
+{
+	"name": "callout",
+	"title": "Callout",
+	"summary": "A label with a leader line pinned to a point, node, text or a moving tracked object; picks the open side and stays inside the frame.",
+	"tags": [
+		"callout",
+		"label",
+		"leader line",
+		"annotation",
+		"tracking",
+		"explainer"
+	],
+	"example": "Callout({ target: [820, 410], title: \"New\", text: \"Faster renderer\" })",
+	"parts": [
+		"leader",
+		"leader-2",
+		"dot",
+		"label"
+	],
+	"cues": [
+		"in"
+	],
+	"registryDependencies": [],
+	"files": [
+		{
+			"path": "callout/index.ts",
+			"content": "/**\n * Callout: a label with a leader line pinned to a point, a node, text, or a\n * moving tracked object. It picks the open side, keeps the label inside the\n * frame, and follows moving targets smoothly (decisions are eased, never\n * snapped).\n *\n * Coordinates are the frame's: the root covers the video (default\n * 1920 × 1080 × theme scale, or the given width / height) from 0, 0.\n */\nimport { LayerAnimation, type LayoutNode } from \"framefields\";\nimport {\n\ttype Animatable,\n\tbakeSamples,\n\tbindComponent,\n\tdefineComponent,\n\tevaluateEase,\n\tresolveTarget,\n\tspringAt,\n\ttargetPoint,\n\ttargetSchema,\n\tthemeFrames,\n\ttype Vec2,\n\tz,\n} from \"framefields/components\";\n\nexport const CALLOUT_SIDES = [\n\t\"auto\",\n\t\"top\",\n\t\"bottom\",\n\t\"left\",\n\t\"right\",\n\t\"top-left\",\n\t\"top-right\",\n\t\"bottom-left\",\n\t\"bottom-right\",\n] as const;\nexport type CalloutSide = (typeof CALLOUT_SIDES)[number];\n\nexport interface CalloutCues {\n\t[name: string]: ReadonlyArray<{ frame: number }>;\n\t/** Fully drawn. */\n\tin: ReadonlyArray<{ frame: number }>;\n}\n\nconst DIRECTION: Record<Exclude<CalloutSide, \"auto\">, Vec2> = {\n\ttop: [0, -1],\n\tbottom: [0, 1],\n\tleft: [-1, 0],\n\tright: [1, 0],\n\t\"top-left\": [-1, -1],\n\t\"top-right\": [1, -1],\n\t\"bottom-left\": [-1, 1],\n\t\"bottom-right\": [1, 1],\n};\n\nexport const callout = /* @__PURE__ */ defineComponent({\n\tname: \"Callout\",\n\tprops: () => ({\n\t\ttarget: targetSchema(),\n\t\ttext: z.string().min(1),\n\t\t/** A bolder first line above `text`. */\n\t\ttitle: z.string().optional(),\n\t\tside: z.enum(CALLOUT_SIDES).default(\"auto\"),\n\t\t/** Leader length (px). */\n\t\tdistance: z.number().positive().optional(),\n\t\t/** A bend: out on the diagonal, then level into the label. */\n\t\telbow: z.boolean().default(true),\n\t\tdot: z.boolean().default(true),\n\t\tcolor: z.string().optional(),\n\t\t/** Frames to follow a moving target. Default 6 seconds. */\n\t\tlength: z.number().int().positive().optional(),\n\t\tfontFamily: z.string().optional(),\n\t\tfontSize: z.number().positive().optional(),\n\t}),\n\tdefaults: { enter: false, exit: false },\n\tbuild(ctx, props) {\n\t\tconst { host, theme, fps } = ctx;\n\t\tconst s = theme.scale;\n\t\tconst W = ctx.requested.width ?? 1920 * s;\n\t\tconst H = ctx.requested.height ?? 1080 * s;\n\t\tconst fs = props.fontSize ?? 26 * s;\n\t\tconst fontFamily = props.fontFamily ?? theme.font.body;\n\t\tconst color = props.color ?? theme.color.accent;\n\t\tconst reach = props.distance ?? 120 * s;\n\t\tconst margin = 24 * s;\n\t\tconst thick = Math.max(2, 2.5 * s);\n\t\tconst dotR = 7 * s;\n\n\t\tconst resolved = resolveTarget(props.target, {\n\t\t\tmeasure: host.measure,\n\t\t\tfps,\n\t\t});\n\t\tconst moving = resolved.kind === \"dynamic\";\n\t\tconst base = themeFrames(theme, \"base\", fps);\n\t\tconst intro = Math.round(base * 1.8);\n\t\tconst length = moving ? (props.length ?? fps * 6) : intro + 1;\n\n\t\t// ── Label size ────────────────────────────────────────────────────\n\t\tconst padX = fs * 0.6;\n\t\tconst padY = fs * 0.42;\n\t\tconst titleM = props.title\n\t\t\t? host.measure(props.title, { fontFamily, fontSize: fs, fontWeight: 700 })\n\t\t\t: null;\n\t\tconst textM = host.measure(props.text, {\n\t\t\tfontFamily,\n\t\t\tfontSize: fs * (props.title ? 0.85 : 1),\n\t\t});\n\t\tconst lw = Math.max(titleM?.width ?? 0, textM.width) + padX * 2;\n\t\tconst lh = (titleM?.height ?? 0) + textM.height + padY * 2;\n\n\t\t// ── Geometry per frame ────────────────────────────────────────────\n\t\tconst sideAt = (p: Vec2): Vec2 =>\n\t\t\tprops.side === \"auto\"\n\t\t\t\t? [p[0] < W / 2 ? 1 : -1, p[1] < H * 0.4 ? 1 : -1]\n\t\t\t\t: DIRECTION[props.side];\n\t\t// Side decisions ease over a few frames, so a target crossing the\n\t\t// middle swings its label across instead of snapping.\n\t\tlet dir: Vec2 | null = null;\n\t\tconst follow = 1 - Math.exp(-6 / fps);\n\t\tconst frames = Array.from({ length: length + 1 }, (_, f) => {\n\t\t\tconst anchor = targetPoint(resolved, f);\n\t\t\tconst want = sideAt(anchor);\n\t\t\tdir = dir\n\t\t\t\t? [\n\t\t\t\t\t\tdir[0] + (want[0] - dir[0]) * follow,\n\t\t\t\t\t\tdir[1] + (want[1] - dir[1]) * follow,\n\t\t\t\t\t]\n\t\t\t\t: want;\n\t\t\tconst [dx, dy] = dir;\n\t\t\tconst diagonal = props.elbow && Math.abs(dx) > 0.01;\n\t\t\tconst bend: Vec2 = diagonal\n\t\t\t\t? [anchor[0] + dx * reach * 0.55, anchor[1] + dy * reach * 0.55]\n\t\t\t\t: [anchor[0] + dx * reach, anchor[1] + dy * reach];\n\t\t\tconst end: Vec2 = diagonal\n\t\t\t\t? [bend[0] + Math.sign(dx) * reach * 0.45 * Math.abs(dx), bend[1]]\n\t\t\t\t: bend;\n\t\t\t// The label hangs off the leader's end, on its side.\n\t\t\tlet lx =\n\t\t\t\tMath.abs(dx) < 0.5 ? end[0] - lw / 2 : dx > 0 ? end[0] : end[0] - lw;\n\t\t\tlet ly =\n\t\t\t\tMath.abs(dx) < 0.5 ? (dy > 0 ? end[1] : end[1] - lh) : end[1] - lh / 2;\n\t\t\t// Stay inside the frame.\n\t\t\tlx = Math.min(W - margin - lw, Math.max(margin, lx));\n\t\t\tly = Math.min(H - margin - lh, Math.max(margin, ly));\n\t\t\tconst join: Vec2 =\n\t\t\t\tMath.abs(dx) < 0.5\n\t\t\t\t\t? [lx + lw / 2, dy > 0 ? ly : ly + lh]\n\t\t\t\t\t: [dx > 0 ? lx : lx + lw, ly + lh / 2];\n\t\t\treturn {\n\t\t\t\tanchor,\n\t\t\t\tbend: diagonal ? bend : join,\n\t\t\t\tend: join,\n\t\t\t\tlabel: [lx, ly] as Vec2,\n\t\t\t};\n\t\t});\n\n\t\t// ── Intro: dot pops, leader draws, label arrives ──────────────────\n\t\tconst draw = (f: number, from: number, to: number) =>\n\t\t\tevaluateEase(\n\t\t\t\ttheme.motion.ease.move,\n\t\t\t\tMath.min(1, Math.max(0, (f - from) / Math.max(1, to - from))),\n\t\t\t);\n\t\tconst seg1 = [Math.round(base * 0.3), Math.round(base * 1.0)] as const;\n\t\tconst seg2 = [seg1[1], Math.round(base * 1.4)] as const;\n\t\tconst labelAt = Math.round(base * 1.1);\n\n\t\tconst segment = (\n\t\t\tid: string,\n\t\t\tpick: (k: (typeof frames)[number]) => [Vec2, Vec2],\n\t\t\twindow: readonly [number, number],\n\t\t) => {\n\t\t\tconst xs: number[] = [];\n\t\t\tconst ys: number[] = [];\n\t\t\tconst ws: number[] = [];\n\t\t\tconst rs: number[] = [];\n\t\t\tframes.forEach((k, f) => {\n\t\t\t\tconst [a, b] = pick(k);\n\t\t\t\tconst len = Math.hypot(b[0] - a[0], b[1] - a[1]);\n\t\t\t\txs.push(a[0]);\n\t\t\t\tys.push(a[1] - thick / 2);\n\t\t\t\tws.push(len * draw(f, window[0], window[1]));\n\t\t\t\trs.push((Math.atan2(b[1] - a[1], b[0] - a[0]) * 180) / Math.PI);\n\t\t\t});\n\t\t\tconst node = host.box({\n\t\t\t\tid: ctx.partId(id),\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tx: xs[0] ?? 0,\n\t\t\t\ty: ys[0] ?? 0,\n\t\t\t\twidth: 0,\n\t\t\t\theight: thick,\n\t\t\t\tbackground: color,\n\t\t\t\tborderRadius: thick / 2,\n\t\t\t\tanchorX: 0,\n\t\t\t\tanchorY: 0.5,\n\t\t\t});\n\t\t\tnode.animate(\n\t\t\t\tLayerAnimation.create()\n\t\t\t\t\t.keys(\"x\", bakeSamples(xs, 0, { tolerance: 0.2 }))\n\t\t\t\t\t.keys(\"y\", bakeSamples(ys, 0, { tolerance: 0.2 }))\n\t\t\t\t\t.keys(\"width\", bakeSamples(ws, 0, { tolerance: 0.2 }))\n\t\t\t\t\t.keys(\"rotation\", bakeSamples(rs, 0, { tolerance: 0.05 })),\n\t\t\t);\n\t\t\treturn node;\n\t\t};\n\n\t\tconst parts: Record<string, Animatable<LayoutNode>> = {};\n\t\tconst children: LayoutNode[] = [];\n\t\tconst leader1 = segment(\"leader\", (k) => [k.anchor, k.bend], seg1);\n\t\tchildren.push(leader1);\n\t\tparts.leader = leader1;\n\t\tif (props.elbow) {\n\t\t\tconst leader2 = segment(\"leader-2\", (k) => [k.bend, k.end], seg2);\n\t\t\tchildren.push(leader2);\n\t\t\tparts[\"leader-2\"] = leader2;\n\t\t}\n\t\tif (props.dot) {\n\t\t\tconst dot = host.box({\n\t\t\t\tid: ctx.partId(\"dot\"),\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tx: (frames[0]?.anchor[0] ?? 0) - dotR,\n\t\t\t\ty: (frames[0]?.anchor[1] ?? 0) - dotR,\n\t\t\t\twidth: dotR * 2,\n\t\t\t\theight: dotR * 2,\n\t\t\t\tbackground: color,\n\t\t\t\tborderRadius: dotR,\n\t\t\t\tborderColor: theme.color.bg,\n\t\t\t\tborderWidth: Math.max(2, 2 * s),\n\t\t\t});\n\t\t\tconst pop = Array.from({ length: Math.min(length, intro) + 1 }, (_, f) =>\n\t\t\t\tspringAt(f / fps, { stiffness: 320, damping: 16 }),\n\t\t\t);\n\t\t\tdot.animate(\n\t\t\t\tLayerAnimation.create()\n\t\t\t\t\t.keys(\n\t\t\t\t\t\t\"x\",\n\t\t\t\t\t\tbakeSamples(\n\t\t\t\t\t\t\tframes.map((k) => k.anchor[0] - dotR),\n\t\t\t\t\t\t\t0,\n\t\t\t\t\t\t\t{ tolerance: 0.2 },\n\t\t\t\t\t\t),\n\t\t\t\t\t)\n\t\t\t\t\t.keys(\n\t\t\t\t\t\t\"y\",\n\t\t\t\t\t\tbakeSamples(\n\t\t\t\t\t\t\tframes.map((k) => k.anchor[1] - dotR),\n\t\t\t\t\t\t\t0,\n\t\t\t\t\t\t\t{ tolerance: 0.2 },\n\t\t\t\t\t\t),\n\t\t\t\t\t)\n\t\t\t\t\t.keys(\"scale\", bakeSamples(pop, 0, { tolerance: 0.005 })),\n\t\t\t);\n\t\t\tchildren.push(dot);\n\t\t\tparts.dot = dot;\n\t\t}\n\t\tconst labelKids: LayoutNode[] = [];\n\t\tif (props.title && titleM)\n\t\t\tlabelKids.push(\n\t\t\t\thost.text(props.title, {\n\t\t\t\t\tid: ctx.partId(\"title\"),\n\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\tx: padX,\n\t\t\t\t\ty: padY,\n\t\t\t\t\tfontFamily,\n\t\t\t\t\tfontSize: fs,\n\t\t\t\t\tfontWeight: 700,\n\t\t\t\t\tfill: theme.color.ink,\n\t\t\t\t}),\n\t\t\t);\n\t\tlabelKids.push(\n\t\t\thost.text(props.text, {\n\t\t\t\tid: ctx.partId(\"text\"),\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tx: padX,\n\t\t\t\ty: padY + (titleM?.height ?? 0),\n\t\t\t\tfontFamily,\n\t\t\t\tfontSize: fs * (props.title ? 0.85 : 1),\n\t\t\t\tfill: props.title ? theme.color.muted : theme.color.ink,\n\t\t\t}),\n\t\t);\n\t\tconst label = host.box({\n\t\t\tid: ctx.partId(\"label\"),\n\t\t\tposition: \"absolute\",\n\t\t\tx: frames[0]?.label[0] ?? 0,\n\t\t\ty: frames[0]?.label[1] ?? 0,\n\t\t\twidth: lw,\n\t\t\theight: lh,\n\t\t\tbackground: theme.color.raised,\n\t\t\tborderRadius: theme.radius.md,\n\t\t\tborderColor: color,\n\t\t\tborderWidth: Math.max(1.5, 1.5 * s),\n\t\t\tchildren: labelKids,\n\t\t});\n\t\tconst rise = 10 * s;\n\t\tlabel.animate(\n\t\t\tLayerAnimation.create()\n\t\t\t\t.keys(\n\t\t\t\t\t\"x\",\n\t\t\t\t\tbakeSamples(\n\t\t\t\t\t\tframes.map((k) => k.label[0]),\n\t\t\t\t\t\t0,\n\t\t\t\t\t\t{ tolerance: 0.2 },\n\t\t\t\t\t),\n\t\t\t\t)\n\t\t\t\t.keys(\n\t\t\t\t\t\"y\",\n\t\t\t\t\tbakeSamples(\n\t\t\t\t\t\tframes.map(\n\t\t\t\t\t\t\t(k, f) =>\n\t\t\t\t\t\t\t\tk.label[1] + rise * (1 - draw(f, labelAt, labelAt + base)),\n\t\t\t\t\t\t),\n\t\t\t\t\t\t0,\n\t\t\t\t\t\t{ tolerance: 0.2 },\n\t\t\t\t\t),\n\t\t\t\t)\n\t\t\t\t.keys(\"opacity\", [\n\t\t\t\t\t[0, 0],\n\t\t\t\t\t[labelAt, 0],\n\t\t\t\t\t[labelAt + Math.round(base * 0.7), 1, \"power2.out\"],\n\t\t\t\t]),\n\t\t);\n\t\tchildren.push(label);\n\t\tparts.label = label;\n\n\t\treturn {\n\t\t\tchildren,\n\t\t\twidth: W,\n\t\t\theight: H,\n\t\t\tduration: moving ? length : intro,\n\t\t\topenEnded: !moving,\n\t\t\torigin: [0, 0],\n\t\t\tcues: { in: [{ frame: labelAt + base }] } as CalloutCues,\n\t\t\tparts,\n\t\t};\n\t},\n});\n\n/**\n * A label with a leader line pinned to a point, node, text or a moving tracked\n * object; picks the open side and stays inside the frame.\n */\nexport const Callout = /* @__PURE__ */ bindComponent(callout);\n"
+		}
+	]
+}

package/dist/registry/captions.json

@@ -0,0 +1,37 @@
+{
+	"name": "captions",
+	"title": "Captions",
+	"summary": "Word-timed captions from words or a transcript (SRT, WebVTT, word JSON) in eight published styles, highlighting each word on its exact frame, optionally tucked behind the speaker.",
+	"tags": [
+		"captions",
+		"subtitles",
+		"social",
+		"talking head",
+		"transcript",
+		"karaoke"
+	],
+	"example": "Captions({ transcript: srt, style: \"karaoke\", emphasis: [\"faster\"] })",
+	"parts": [
+		"phrase-<n>",
+		"behind"
+	],
+	"cues": [
+		"words",
+		"phrases"
+	],
+	"registryDependencies": [],
+	"files": [
+		{
+			"path": "captions/index.ts",
+			"content": "/**\n * Captions: word-timed captions for talking-head and social video, in the\n * styles people publish, with exact word highlighting. Each phrase is one\n * text node; per-word colour, pops and markers are GPU glyph animators and\n * keyed plates, timed to the word's own frame.\n *\n * Coordinates are the frame's: the root covers the video (default\n * 1920 × 1080 × theme scale, or the given width / height) from 0, 0.\n */\nimport {\n\ttype KeyframeTuple,\n\tLayerAnimation,\n\ttype LayoutNode,\n\ttype TextNode,\n} from \"framefields\";\nimport {\n\ttype Animatable,\n\taudioLevelsSchema,\n\tbindComponent,\n\tconstantExpression,\n\tcontrastRatio,\n\tdefineComponent,\n\ttype GlyphAnimator,\n\tglyphAnimator,\n\ttype MeasureOptions,\n\trangeRects,\n\ttype Rect,\n\trendererChars,\n\tscheduleExpression,\n\tstepExpression,\n\tthemeFrames,\n\twindowExpression,\n\tz,\n} from \"framefields/components\";\nimport { parseTranscript, type Word } from \"./parse.js\";\nimport { buildPhrases, type GroupOptions, type Phrase } from \"./phrases.js\";\n\nexport type { Word } from \"./parse.js\";\n\nexport const CAPTION_STYLES = [\n\t\"clean\",\n\t\"karaoke\",\n\t\"highlight\",\n\t\"pop\",\n\t\"bold\",\n\t\"outline\",\n\t\"pill\",\n\t\"gradient\",\n] as const;\nexport type CaptionStyle = (typeof CAPTION_STYLES)[number];\n\nexport interface CaptionsCues {\n\t[name: string]: ReadonlyArray<{ frame: number }>;\n\t/** Each word, from its first frame to its last. */\n\twords: ReadonlyArray<{\n\t\tframe: number;\n\t\tend: number;\n\t\tindex: number;\n\t\ttext: string;\n\t\temphasised: boolean;\n\t}>;\n\t/** Each phrase on screen. */\n\tphrases: ReadonlyArray<{ frame: number; end: number; text: string }>;\n}\n\n/** Per-style grouping and placement defaults. */\nconst GROUP: Record<CaptionStyle, Partial<GroupOptions>> = {\n\tclean: { maxChars: 36, maxLines: 2 },\n\tkaraoke: {},\n\thighlight: {},\n\tpop: { maxChars: 22 },\n\tbold: { maxChars: 14, maxWords: 2, maxLines: 1 },\n\toutline: { maxChars: 22 },\n\tpill: { maxChars: 24, maxLines: 1 },\n\tgradient: {},\n};\n\nconst BASE_GROUP: GroupOptions = {\n\tmaxChars: 28,\n\tmaxWords: 12,\n\tmaxLines: 2,\n\tbreakOnPunctuation: true,\n\tminGap: 0.6,\n};\n\n/** The area captions stay inside: clear of edges and, in portrait, platform overlays. */\nfunction safeArea(\n\tW: number,\n\tH: number,\n\tarea: \"portrait\" | \"landscape\" | Rect | undefined,\n): Rect {\n\tif (area && typeof area === \"object\") return area;\n\tconst portrait = area ? area === \"portrait\" : H > W;\n\treturn portrait\n\t\t? { x: W * 0.08, y: H * 0.12, width: W * 0.84, height: H * 0.66 }\n\t\t: { x: W * 0.1, y: H * 0.08, width: W * 0.8, height: H * 0.82 };\n}\n\nexport const captions = /* @__PURE__ */ defineComponent({\n\tname: \"Captions\",\n\tprops: () => ({\n\t\t/** `{ text, start, end }` in seconds. Or `transcript`. */\n\t\twords: z\n\t\t\t.array(\n\t\t\t\tz\n\t\t\t\t\t.object({\n\t\t\t\t\t\ttext: z.string(),\n\t\t\t\t\t\tstart: z.number().min(0),\n\t\t\t\t\t\tend: z.number().min(0),\n\t\t\t\t\t})\n\t\t\t\t\t.strict(),\n\t\t\t)\n\t\t\t.optional(),\n\t\t/** SRT, WebVTT, or word-level JSON (`[{ word | text, start, end }]`). */\n\t\ttranscript: z.string().optional(),\n\t\tstyle: z.enum(CAPTION_STYLES).default(\"karaoke\"),\n\t\t/** The voice's levels (`analyzeAudio`): the active word swells with it. Frame 0 = the component's first frame. */\n\t\tpulse: z.union([audioLevelsSchema(), z.literal(false)]).default(false),\n\t\t/** Scale added at full level. */\n\t\tpulseAmount: z.number().min(0).default(0.12),\n\t\tgroup: z\n\t\t\t.object({\n\t\t\t\tmaxChars: z.number().int().positive().optional(),\n\t\t\t\tmaxWords: z.number().int().positive().optional(),\n\t\t\t\tmaxLines: z.number().int().positive().optional(),\n\t\t\t\tbreakOnPunctuation: z.boolean().optional(),\n\t\t\t\tminGap: z.number().min(0).optional(),\n\t\t\t})\n\t\t\t.strict()\n\t\t\t.default({}),\n\t\t/** Words or patterns in the accent colour, or a test per word. */\n\t\temphasis: z\n\t\t\t.union([\n\t\t\t\tz.array(z.union([z.string(), z.instanceof(RegExp)])),\n\t\t\t\tz.custom<(word: string, index: number) => boolean>(\n\t\t\t\t\t(v) => typeof v === \"function\",\n\t\t\t\t),\n\t\t\t])\n\t\t\t.default([]),\n\t\tcase: z.enum([\"as-is\", \"upper\", \"lower\"]).optional(),\n\t\tplacement: z\n\t\t\t.object({\n\t\t\t\tanchor: z.enum([\"bottom\", \"center\", \"top\"]).optional(),\n\t\t\t\tsafeArea: z\n\t\t\t\t\t.union([\n\t\t\t\t\t\tz.enum([\"portrait\", \"landscape\"]),\n\t\t\t\t\t\tz.object({\n\t\t\t\t\t\t\tx: z.number(),\n\t\t\t\t\t\t\ty: z.number(),\n\t\t\t\t\t\t\twidth: z.number(),\n\t\t\t\t\t\t\theight: z.number(),\n\t\t\t\t\t\t}),\n\t\t\t\t\t])\n\t\t\t\t\t.optional(),\n\t\t\t\t/** Extra px from the anchor edge, toward the centre. */\n\t\t\t\toffset: z.number().default(0),\n\t\t\t})\n\t\t\t.strict()\n\t\t\t.default({ offset: 0 }),\n\t\t/** A clip whose person / subject is cut out and drawn over the captions. */\n\t\tbehind: z\n\t\t\t.object({\n\t\t\t\tvideo: z.string(),\n\t\t\t\tmode: z.enum([\"person\", \"subject\"]).default(\"person\"),\n\t\t\t})\n\t\t\t.strict()\n\t\t\t.optional(),\n\t\t/** A backing plate behind each phrase (`clean`, `karaoke`). */\n\t\tplate: z.boolean().default(false),\n\t\tfontFamily: z.string().optional(),\n\t\t/** Default: fits `group.maxChars` across the safe area. */\n\t\tfontSize: z.number().positive().optional(),\n\t\tfontWeight: z.union([z.number(), z.string()]).optional(),\n\t\tfill: z.string().optional(),\n\t\taccent: z.string().optional(),\n\t}),\n\tdefaults: { enter: false, exit: false },\n\tbuild(ctx, props) {\n\t\tconst { host, theme, fps } = ctx;\n\t\tconst W = ctx.requested.width ?? 1920 * theme.scale;\n\t\tconst H = ctx.requested.height ?? 1080 * theme.scale;\n\t\tconst style = props.style;\n\n\t\t// ── Words ─────────────────────────────────────────────────────────\n\t\tlet words: Word[];\n\t\tif (props.words) words = props.words.map((w) => ({ ...w }));\n\t\telse if (props.transcript) words = parseTranscript(props.transcript);\n\t\telse throw new Error(\"Captions: give `words` or a `transcript`.\");\n\t\tconst casing = props.case ?? (style === \"bold\" ? \"upper\" : \"as-is\");\n\t\tif (casing !== \"as-is\")\n\t\t\twords = words.map((w) => ({\n\t\t\t\t...w,\n\t\t\t\ttext: casing === \"upper\" ? w.text.toUpperCase() : w.text.toLowerCase(),\n\t\t\t}));\n\t\tconst emphasised = words.map((w, i) =>\n\t\t\ttypeof props.emphasis === \"function\"\n\t\t\t\t? props.emphasis(w.text, i)\n\t\t\t\t: props.emphasis.some((p) =>\n\t\t\t\t\t\ttypeof p === \"string\"\n\t\t\t\t\t\t\t? w.text.toLowerCase().replace(/[^\\p{L}\\p{N}%]/gu, \"\") ===\n\t\t\t\t\t\t\t\tp.toLowerCase()\n\t\t\t\t\t\t\t: new RegExp(p.source, p.flags.replace(\"g\", \"\")).test(w.text),\n\t\t\t\t\t),\n\t\t);\n\n\t\t// ── Layout ────────────────────────────────────────────────────────\n\t\tconst group: GroupOptions = {\n\t\t\t...BASE_GROUP,\n\t\t\t...GROUP[style],\n\t\t\t...stripUndefined(props.group),\n\t\t};\n\t\tconst safe = safeArea(W, H, props.placement.safeArea);\n\t\tconst fontFamily = props.fontFamily ?? theme.font.display;\n\t\tconst weight = props.fontWeight ?? (style === \"clean\" ? undefined : 800);\n\t\tconst measureAt = (text: string, size: number, width?: number) =>\n\t\t\thost.measure(text, {\n\t\t\t\tfontFamily,\n\t\t\t\tfontSize: size,\n\t\t\t\tfontWeight: weight,\n\t\t\t\t...(width !== undefined && { width, align: \"center\" as const }),\n\t\t\t} satisfies MeasureOptions);\n\t\t// Auto size: a line of `maxChars` average glyphs spans the safe width.\n\t\tconst sample = \"nonsense words\".repeat(4).slice(0, group.maxChars);\n\t\tconst fs =\n\t\t\tprops.fontSize ??\n\t\t\tMath.min(\n\t\t\t\t(safe.width / Math.max(1, measureAt(sample, 100).width)) * 100 * 0.94,\n\t\t\t\tsafe.height / (group.maxLines * 1.6),\n\t\t\t);\n\t\tconst fits = (line: string) => measureAt(line, fs).width <= safe.width;\n\t\tconst phrases = buildPhrases(words, group, fits);\n\n\t\tconst ink = props.fill ?? theme.color.ink;\n\t\tconst accent = props.accent ?? theme.color.accent;\n\t\tconst anchor =\n\t\t\tprops.placement.anchor ?? (style === \"bold\" ? \"center\" : \"bottom\");\n\t\tconst frameOf = (seconds: number) => Math.round(seconds * fps);\n\t\tif (props.pulse && Math.abs(props.pulse.fps - fps) > 1e-6)\n\t\t\tthrow new Error(\n\t\t\t\t`Captions: \\`pulse\\` was analysed at ${props.pulse.fps} fps but the component runs at ${fps}. Analyse with { fps: ${fps} }.`,\n\t\t\t);\n\t\tconst fast = themeFrames(theme, \"fast\", fps);\n\t\tconst children: LayoutNode[] = [];\n\t\tconst parts: Record<string, Animatable<LayoutNode>> = {};\n\t\tconst wordCues: Array<CaptionsCues[\"words\"][number]> = [];\n\t\tconst phraseCues: Array<CaptionsCues[\"phrases\"][number]> = [];\n\n\t\tphrases.forEach((phrase, p) => {\n\t\t\tconst layout = phraseLayout(phrase, words);\n\t\t\tconst m = measureAt(layout.text, fs, safe.width);\n\t\t\tconst options: MeasureOptions = {\n\t\t\t\tfontFamily,\n\t\t\t\tfontSize: fs,\n\t\t\t\tfontWeight: weight,\n\t\t\t\twidth: safe.width,\n\t\t\t\talign: \"center\",\n\t\t\t};\n\t\t\tconst y =\n\t\t\t\tanchor === \"bottom\"\n\t\t\t\t\t? safe.y + safe.height - m.height - props.placement.offset\n\t\t\t\t\t: anchor === \"top\"\n\t\t\t\t\t\t? safe.y + props.placement.offset\n\t\t\t\t\t\t: safe.y + (safe.height - m.height) / 2;\n\t\t\tconst start = frameOf(phrase.start);\n\t\t\tconst end = Math.max(start + 1, frameOf(phrase.end));\n\t\t\t// Word windows, local to the phrase (its box starts at `start`).\n\t\t\tconst wStart = layout.words.map(\n\t\t\t\t(w) => frameOf((words[w.index] as Word).start) - start,\n\t\t\t);\n\t\t\tconst wEnd = layout.words.map((w, k) =>\n\t\t\t\tk + 1 < layout.words.length\n\t\t\t\t\t? (wStart[k + 1] as number)\n\t\t\t\t\t: Math.max(\n\t\t\t\t\t\t\t(wStart[k] as number) + 1,\n\t\t\t\t\t\t\tframeOf((words[w.index] as Word).end) - start,\n\t\t\t\t\t\t),\n\t\t\t);\n\t\t\tconst rects = layout.words.map(\n\t\t\t\t(w) => rangeRects(m, w.from, w.to, options)[0] as Rect,\n\t\t\t);\n\t\t\tconst animators: GlyphAnimator[] = [];\n\n\t\t\tconst emphasisWeights = layout.words.map((w) =>\n\t\t\t\temphasised[w.index] ? 1 : 0,\n\t\t\t);\n\t\t\tif (emphasisWeights.some(Boolean))\n\t\t\t\tanimators.push(\n\t\t\t\t\tglyphAnimator(\n\t\t\t\t\t\t\"emphasis\",\n\t\t\t\t\t\tconstantExpression(\"word\", emphasisWeights),\n\t\t\t\t\t\t{ fillColor: accent },\n\t\t\t\t\t),\n\t\t\t\t);\n\n\t\t\tconst node: Partial<TextNode> = {\n\t\t\t\tid: ctx.partId(`phrase-${p}`),\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tx: 0,\n\t\t\t\ty: 0,\n\t\t\t\twidth: safe.width,\n\t\t\t\talign: \"center\",\n\t\t\t\tfontFamily,\n\t\t\t\tfontSize: fs,\n\t\t\t\tfill: ink,\n\t\t\t\t...(weight !== undefined && { fontWeight: weight }),\n\t\t\t};\n\t\t\tconst plates: LayoutNode[] = [];\n\t\t\tconst box = (\n\t\t\t\tid: string,\n\t\t\t\tr: Rect,\n\t\t\t\tpad: number,\n\t\t\t\tbackground: string,\n\t\t\t\tradius: number,\n\t\t\t\textra = {},\n\t\t\t) =>\n\t\t\t\thost.box({\n\t\t\t\t\tid: ctx.partId(`phrase-${p}-${id}`),\n\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\tx: r.x - pad,\n\t\t\t\t\ty: r.y - pad * 0.5,\n\t\t\t\t\twidth: r.width + pad * 2,\n\t\t\t\t\theight: r.height + pad,\n\t\t\t\t\tbackground,\n\t\t\t\t\tborderRadius: radius,\n\t\t\t\t\t...extra,\n\t\t\t\t});\n\t\t\tconst blockRect: Rect = {\n\t\t\t\tx: Math.min(...rects.map((r) => r.x)),\n\t\t\t\ty: 0,\n\t\t\t\twidth:\n\t\t\t\t\tMath.max(...rects.map((r) => r.x + r.width)) -\n\t\t\t\t\tMath.min(...rects.map((r) => r.x)),\n\t\t\t\theight: m.height,\n\t\t\t};\n\n\t\t\tswitch (style) {\n\t\t\t\tcase \"clean\":\n\t\t\t\t\tbreak;\n\t\t\t\tcase \"karaoke\":\n\t\t\t\t\t// Spoken words turn from muted to ink on their exact frame.\n\t\t\t\t\tanimators.push(\n\t\t\t\t\t\tglyphAnimator(\"spoken\", stepExpression(\"word\", wStart), {\n\t\t\t\t\t\t\tfillColor: theme.color.muted,\n\t\t\t\t\t\t}),\n\t\t\t\t\t);\n\t\t\t\t\tbreak;\n\t\t\t\tcase \"highlight\":\n\t\t\t\tcase \"pill\": {\n\t\t\t\t\tconst pad = fs * (style === \"pill\" ? 0.22 : 0.16);\n\t\t\t\t\tconst glide = Math.max(2, Math.round(fast * 0.4));\n\t\t\t\t\tif (style === \"pill\")\n\t\t\t\t\t\tplates.push(\n\t\t\t\t\t\t\tbox(\n\t\t\t\t\t\t\t\t\"plate\",\n\t\t\t\t\t\t\t\tblockRect,\n\t\t\t\t\t\t\t\tfs * 0.5,\n\t\t\t\t\t\t\t\ttheme.color.surface,\n\t\t\t\t\t\t\t\ttheme.radius.pill,\n\t\t\t\t\t\t\t\t{ opacity: 0.92 },\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t);\n\t\t\t\t\tconst marker = box(\n\t\t\t\t\t\t\"marker\",\n\t\t\t\t\t\trects[0] as Rect,\n\t\t\t\t\t\tpad,\n\t\t\t\t\t\taccent,\n\t\t\t\t\t\tstyle === \"pill\" ? theme.radius.pill : theme.radius.md,\n\t\t\t\t\t);\n\t\t\t\t\tmarker.animate(markerKeys(rects, wStart, pad, glide));\n\t\t\t\t\tplates.push(marker);\n\t\t\t\t\t// Text on the marker reads in the background colour when ink wouldn't.\n\t\t\t\t\tif ((contrastRatio(ink, accent) ?? 21) < 3)\n\t\t\t\t\t\tanimators.push(\n\t\t\t\t\t\t\tglyphAnimator(\n\t\t\t\t\t\t\t\t\"on-marker\",\n\t\t\t\t\t\t\t\t// Switch as the marker lands under the word.\n\t\t\t\t\t\t\t\twindowExpression(\n\t\t\t\t\t\t\t\t\t\"word\",\n\t\t\t\t\t\t\t\t\twStart.map((f) => f + Math.ceil(glide / 2)),\n\t\t\t\t\t\t\t\t\twEnd.map((f) => f + Math.ceil(glide / 2)),\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t{ fillColor: theme.color.bg },\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t);\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t\tcase \"pop\":\n\t\t\t\t\tanimators.push(\n\t\t\t\t\t\tglyphAnimator(\n\t\t\t\t\t\t\t\"pop\",\n\t\t\t\t\t\t\tscheduleExpression(\n\t\t\t\t\t\t\t\t\"word\",\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tstarts: wStart,\n\t\t\t\t\t\t\t\t\tduration: Math.max(3, Math.round(fast * 0.9)),\n\t\t\t\t\t\t\t\t\tease: \"back.out(2.2)\",\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\"enter\",\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t{ opacity: 0, scale: 0.72, y: fs * 0.12 },\n\t\t\t\t\t\t),\n\t\t\t\t\t);\n\t\t\t\t\tbreak;\n\t\t\t\tcase \"bold\":\n\t\t\t\tcase \"outline\":\n\t\t\t\t\tanimators.push(\n\t\t\t\t\t\tglyphAnimator(\"active\", windowExpression(\"word\", wStart, wEnd), {\n\t\t\t\t\t\t\tfillColor: accent,\n\t\t\t\t\t\t}),\n\t\t\t\t\t);\n\t\t\t\t\tbreak;\n\t\t\t\tcase \"gradient\": {\n\t\t\t\t\t// Active word: accent → accent2 across its letters.\n\t\t\t\t\tconst chars = layout.text.length;\n\t\t\t\t\tconst starts = new Array<number>(chars).fill(-1);\n\t\t\t\t\tconst ends = new Array<number>(chars).fill(-1);\n\t\t\t\t\tconst along = new Array<number>(chars).fill(0);\n\t\t\t\t\tlayout.words.forEach((w, k) => {\n\t\t\t\t\t\tfor (let c = w.from; c < w.to; c++) {\n\t\t\t\t\t\t\tstarts[c] = wStart[k] as number;\n\t\t\t\t\t\t\tends[c] = wEnd[k] as number;\n\t\t\t\t\t\t\talong[c] =\n\t\t\t\t\t\t\t\tw.to - w.from > 1 ? (c - w.from) / (w.to - w.from - 1) : 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t\tanimators.push(\n\t\t\t\t\t\tglyphAnimator(\n\t\t\t\t\t\t\t\"active\",\n\t\t\t\t\t\t\twindowExpression(\n\t\t\t\t\t\t\t\t\"char\",\n\t\t\t\t\t\t\t\trendererChars(layout.text, starts),\n\t\t\t\t\t\t\t\trendererChars(layout.text, ends),\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tfillColor: accent,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t),\n\t\t\t\t\t\tglyphAnimator(\n\t\t\t\t\t\t\t\"active-end\",\n\t\t\t\t\t\t\twindowExpression(\n\t\t\t\t\t\t\t\t\"char\",\n\t\t\t\t\t\t\t\trendererChars(layout.text, starts),\n\t\t\t\t\t\t\t\trendererChars(layout.text, ends),\n\t\t\t\t\t\t\t\trendererChars(layout.text, along),\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t{ fillColor: theme.color.accent2 },\n\t\t\t\t\t\t),\n\t\t\t\t\t);\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (props.plate && (style === \"clean\" || style === \"karaoke\"))\n\t\t\t\tplates.unshift(\n\t\t\t\t\tbox(\n\t\t\t\t\t\t\"plate\",\n\t\t\t\t\t\tblockRect,\n\t\t\t\t\t\tfs * 0.35,\n\t\t\t\t\t\t\"rgba(0,0,0,0.55)\",\n\t\t\t\t\t\ttheme.radius.md,\n\t\t\t\t\t),\n\t\t\t\t);\n\n\t\t\tif (props.pulse) {\n\t\t\t\t// The phrase's slice of the voice level, indexed by its local frame.\n\t\t\t\tconst level = props.pulse.level.slice(start, end);\n\t\t\t\tanimators.push(\n\t\t\t\t\tglyphAnimator(\"pulse\", pulseExpression(wStart, wEnd, level), {\n\t\t\t\t\t\tscale: 1 + props.pulseAmount,\n\t\t\t\t\t}),\n\t\t\t\t);\n\t\t\t}\n\t\t\tif (animators.length > 0) node.animators = animators as never;\n\t\t\tconst text = host.text(layout.text, node);\n\t\t\t// A heavy outline around the glyphs, never over them.\n\t\t\tif (style === \"outline\")\n\t\t\t\thost.style(text, {\n\t\t\t\t\tstroke: { size: fs * 0.08, position: \"outside\", color: \"#000000\" },\n\t\t\t\t});\n\t\t\tconst holder = host.box({\n\t\t\t\tid: ctx.partId(`phrase-${p}-box`),\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tx: safe.x,\n\t\t\t\ty,\n\t\t\t\twidth: safe.width,\n\t\t\t\theight: m.height,\n\t\t\t\tstartFrame: start,\n\t\t\t\tdurationFrames: end - start,\n\t\t\t\tchildren: [...plates, text],\n\t\t\t});\n\t\t\tholder.animate(\n\t\t\t\tphraseMotion(style, p, end - start, fs, fast, { x: safe.x, y }),\n\t\t\t);\n\t\t\tparts[`phrase-${p}`] = holder;\n\t\t\tchildren.push(holder);\n\n\t\t\tphraseCues.push({\n\t\t\t\tframe: start,\n\t\t\t\tend,\n\t\t\t\ttext: layout.text.replace(/\\n/g, \" \"),\n\t\t\t});\n\t\t\tlayout.words.forEach((w, k) => {\n\t\t\t\twordCues.push({\n\t\t\t\t\tframe: start + (wStart[k] as number),\n\t\t\t\t\tend: start + (wEnd[k] as number),\n\t\t\t\t\tindex: w.index,\n\t\t\t\t\ttext: (words[w.index] as Word).text,\n\t\t\t\t\temphasised: emphasised[w.index] ?? false,\n\t\t\t\t});\n\t\t\t});\n\t\t});\n\n\t\tif (props.behind) {\n\t\t\tconst cut = host.cutout(props.behind.video, {\n\t\t\t\tid: ctx.partId(\"behind\"),\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tx: 0,\n\t\t\t\ty: 0,\n\t\t\t\twidth: W,\n\t\t\t\theight: H,\n\t\t\t\tfit: \"cover\",\n\t\t\t\tmode: props.behind.mode,\n\t\t\t});\n\t\t\tparts.behind = cut;\n\t\t\tchildren.push(cut);\n\t\t}\n\n\t\tconst last = phraseCues[phraseCues.length - 1]?.end ?? 1;\n\t\treturn {\n\t\t\tchildren,\n\t\t\twidth: W,\n\t\t\theight: H,\n\t\t\tduration: last,\n\t\t\torigin: [0, 0],\n\t\t\tcues: { words: wordCues, phrases: phraseCues } as CaptionsCues,\n\t\t\tparts,\n\t\t};\n\t},\n});\n\n/** A phrase's text and each word's character range in it. */\nfunction phraseLayout(phrase: Phrase, words: readonly Word[]) {\n\tconst out: Array<{ index: number; from: number; to: number }> = [];\n\tlet text = \"\";\n\tphrase.lines.forEach((line, l) => {\n\t\tif (l > 0) text += \"\\n\";\n\t\tline.forEach((index, k) => {\n\t\t\tif (k > 0) text += \" \";\n\t\t\tconst from = text.length;\n\t\t\ttext += (words[index] as Word).text;\n\t\t\tout.push({ index, from, to: text.length });\n\t\t});\n\t});\n\treturn { text, words: out };\n}\n\n/** A marker that glides onto each word, arriving on the frame it is spoken. */\nfunction markerKeys(\n\trects: readonly Rect[],\n\tstarts: readonly number[],\n\tpad: number,\n\tglide: number,\n): LayerAnimation {\n\tconst keyed = (value: (r: Rect) => number) => {\n\t\tconst keys: KeyframeTuple[] = [[0, value(rects[0] as Rect)]];\n\t\trects.forEach((r, k) => {\n\t\t\tconst prev = rects[k - 1];\n\t\t\tif (!prev) return;\n\t\t\tconst at = starts[k] as number;\n\t\t\tconst last = (keys[keys.length - 1] as KeyframeTuple)[0];\n\t\t\t// Leave on the word's first frame and land a few frames in: the\n\t\t\t// marker never runs ahead of the voice.\n\t\t\tkeys.push([Math.max(last + 1, at), value(prev)]);\n\t\t\tkeys.push([Math.max(last + 2, at + glide), value(r), \"power3.out\"]);\n\t\t});\n\t\treturn keys;\n\t};\n\treturn LayerAnimation.create()\n\t\t.keys(\n\t\t\t\"x\",\n\t\t\tkeyed((r) => r.x - pad),\n\t\t)\n\t\t.keys(\n\t\t\t\"y\",\n\t\t\tkeyed((r) => r.y - pad * 0.5),\n\t\t)\n\t\t.keys(\n\t\t\t\"width\",\n\t\t\tkeyed((r) => r.width + pad * 2),\n\t\t)\n\t\t.keys(\n\t\t\t\"height\",\n\t\t\tkeyed((r) => r.height + pad),\n\t\t)\n\t\t.keys(\"opacity\", [\n\t\t\t[0, 0],\n\t\t\t[starts[0] ?? 0, 1, \"hold\"],\n\t\t]);\n}\n\n/** How a phrase arrives and leaves. `bold` alternates sides; the rest fade up. */\nfunction phraseMotion(\n\tstyle: CaptionStyle,\n\tindex: number,\n\tlength: number,\n\tfs: number,\n\tfast: number,\n\tat: { x: number; y: number },\n): LayerAnimation {\n\tconst anim = LayerAnimation.create();\n\tconst inF = Math.min(\n\t\tMath.max(2, Math.round(fast * 0.6)),\n\t\tMath.floor(length / 2),\n\t);\n\tconst out = Math.min(\n\t\tMath.max(2, Math.round(fast * 0.5)),\n\t\tMath.floor(length / 3),\n\t);\n\tanim.keys(\"opacity\", [\n\t\t[0, 0],\n\t\t[inF, 1, \"power2.out\"],\n\t\t[length - out, 1],\n\t\t[length, 0, \"power2.in\"],\n\t]);\n\tif (style === \"bold\") {\n\t\tconst side = index % 2 === 0 ? -1 : 1;\n\t\tanim.keys(\"x\", [\n\t\t\t[0, at.x + side * fs * 0.6],\n\t\t\t[inF + 2, at.x, \"back.out(1.8)\"],\n\t\t]);\n\t\tanim.keys(\"scale\", [\n\t\t\t[0, 0.86],\n\t\t\t[inF + 2, 1, \"back.out(1.8)\"],\n\t\t]);\n\t} else if (style !== \"pop\") {\n\t\tanim.keys(\"y\", [\n\t\t\t[0, at.y + fs * 0.14],\n\t\t\t[inF, at.y, \"power3.out\"],\n\t\t]);\n\t}\n\treturn anim;\n}\n\nfunction stripUndefined<T extends object>(o: T): Partial<T> {\n\treturn Object.fromEntries(\n\t\tObject.entries(o).filter(([, v]) => v !== undefined),\n\t) as Partial<T>;\n}\n\n/** The active word's weight is the voice level on that frame (0 elsewhere). */\nfunction pulseExpression(\n\tstarts: readonly number[],\n\tends: readonly number[],\n\tlevel: readonly number[],\n): string {\n\tconst list = (v: readonly number[]) =>\n\t\t`[${v.map((x) => Math.round(x * 1000) / 1000).join(\",\")}]`;\n\treturn `((S,E,L)=>{const s=S[wordIndex];if(s===undefined||frame<s||frame>=E[wordIndex])return 0;return L[floor(frame)]??0;})(${list(starts)},${list(ends)},${list(level)})`;\n}\n\n/**\n * Word-timed captions from words or a transcript (SRT, WebVTT, word JSON) in\n * eight published styles, highlighting each word on its exact frame, optionally\n * tucked behind the speaker.\n */\nexport const Captions = /* @__PURE__ */ bindComponent(captions);\n"
+		},
+		{
+			"path": "captions/parse.ts",
+			"content": "/**\n * Transcripts to timed words. Word-level JSON keeps its times; cue-level\n * formats (SRT, WebVTT) split each cue into words and share the cue's time\n * between them by length, so longer words are on screen longer.\n */\n\n/** A spoken word, times in seconds. */\nexport interface Word {\n\ttext: string;\n\tstart: number;\n\tend: number;\n}\n\n/** `01:02:03,456`, `02:03.456` or `3.456` → seconds. */\nexport function parseTimestamp(value: string): number {\n\tconst parts = value.trim().replace(\",\", \".\").split(\":\");\n\tlet seconds = 0;\n\tfor (const p of parts) {\n\t\tconst n = Number(p);\n\t\tif (!Number.isFinite(n))\n\t\t\tthrow new Error(`Captions: bad timestamp \"${value}\".`);\n\t\tseconds = seconds * 60 + n;\n\t}\n\treturn seconds;\n}\n\n/** Spread a cue's [start, end) over its words, weighted by length. */\nexport function splitCue(text: string, start: number, end: number): Word[] {\n\tconst tokens = text.split(/\\s+/).filter(Boolean);\n\tconst weights = tokens.map((t) => t.length + 1);\n\tconst total = weights.reduce((a, b) => a + b, 0) || 1;\n\tlet t = start;\n\treturn tokens.map((token, i) => {\n\t\tconst span = ((end - start) * (weights[i] as number)) / total;\n\t\tconst word = { text: token, start: t, end: t + span };\n\t\tt += span;\n\t\treturn word;\n\t});\n}\n\nconst ARROW = /^\\s*([\\d:.,]+)\\s*-->\\s*([\\d:.,]+)/;\n\n/** SRT or WebVTT cues → words. Markup tags (`<i>`, `<c.x>`, `{\\an8}`) are dropped. */\nfunction parseCues(source: string): Word[] {\n\tconst words: Word[] = [];\n\tconst blocks = source.replace(/\\r/g, \"\").split(/\\n\\s*\\n/);\n\tfor (const block of blocks) {\n\t\tconst lines = block.split(\"\\n\");\n\t\tconst at = lines.findIndex((l) => ARROW.test(l));\n\t\tif (at < 0) continue;\n\t\tconst m = (lines[at] as string).match(ARROW) as RegExpMatchArray;\n\t\tconst text = lines\n\t\t\t.slice(at + 1)\n\t\t\t.join(\" \")\n\t\t\t.replace(/<[^>]+>|\\{[^}]*\\}/g, \"\")\n\t\t\t.trim();\n\t\tif (text)\n\t\t\twords.push(\n\t\t\t\t...splitCue(\n\t\t\t\t\ttext,\n\t\t\t\t\tparseTimestamp(m[1] as string),\n\t\t\t\t\tparseTimestamp(m[2] as string),\n\t\t\t\t),\n\t\t\t);\n\t}\n\treturn words;\n}\n\n/** `[{ word | text, start, end }]` (seconds). */\nfunction parseWordJson(source: string): Word[] {\n\tconst data = JSON.parse(source) as unknown;\n\tconst list = Array.isArray(data)\n\t\t? data\n\t\t: ((data as { words?: unknown[] })?.words ?? []);\n\treturn (list as Array<Record<string, unknown>>).map((w, i) => {\n\t\tconst text = (w.word ?? w.text) as unknown;\n\t\tif (\n\t\t\ttypeof text !== \"string\" ||\n\t\t\ttypeof w.start !== \"number\" ||\n\t\t\ttypeof w.end !== \"number\"\n\t\t)\n\t\t\tthrow new Error(\n\t\t\t\t`Captions: word ${i} needs \\`word\\` (or \\`text\\`), \\`start\\` and \\`end\\`.`,\n\t\t\t);\n\t\treturn { text: text.trim(), start: w.start, end: w.end };\n\t});\n}\n\n/** Any supported transcript (word JSON, WebVTT or SRT), detected from its content. */\nexport function parseTranscript(source: string): Word[] {\n\tconst trimmed = source.trim();\n\tconst words =\n\t\ttrimmed.startsWith(\"[\") || trimmed.startsWith(\"{\")\n\t\t\t? parseWordJson(trimmed)\n\t\t\t: parseCues(trimmed.replace(/^WEBVTT[^\\n]*\\n/, \"\"));\n\tif (words.length === 0)\n\t\tthrow new Error(\"Captions: the transcript has no words.\");\n\treturn words.filter((w) => w.text.length > 0);\n}\n"
+		},
+		{
+			"path": "captions/phrases.ts",
+			"content": "/**\n * Words to on-screen phrases: what is shown together, broken into lines.\n * A phrase never splits a word, prefers to end at punctuation or a pause,\n * and every line fits the safe area as measured (not just by characters).\n */\nimport type { Word } from \"./parse.js\";\n\nexport interface GroupOptions {\n\tmaxChars: number;\n\tmaxWords: number;\n\tmaxLines: number;\n\tbreakOnPunctuation: boolean;\n\t/** A silence this long (seconds) always starts a new phrase. */\n\tminGap: number;\n}\n\nexport interface Phrase {\n\t/** Indices into the words, per line. */\n\tlines: number[][];\n\t/** First and last word index (inclusive). */\n\tfirst: number;\n\tlast: number;\n\t/** Seconds. */\n\tstart: number;\n\tend: number;\n}\n\nconst STRONG = /[.!?…][\"')\\]]*$/;\nconst SOFT = /[,;:—–][\"')\\]]*$/;\n\n/** Group words into phrases. `fits(line)` says whether a line of text fits the width. */\nexport function buildPhrases(\n\twords: readonly Word[],\n\to: GroupOptions,\n\tfits: (line: string) => boolean = () => true,\n\t/** Seconds a phrase lingers after its last word, if nothing follows sooner. */\n\tlinger = 0.6,\n): Phrase[] {\n\tconst phrases: Phrase[] = [];\n\tlet lines: number[][] = [];\n\tconst lineText = (line: number[]) =>\n\t\tline.map((i) => words[i]?.text ?? \"\").join(\" \");\n\tconst count = () => lines.reduce((a, l) => a + l.length, 0);\n\tconst chars = () => lines.map(lineText).join(\" \").length;\n\n\tconst close = () => {\n\t\tif (lines.length === 0) return;\n\t\tconst flat = lines.flat();\n\t\tconst first = flat[0] as number;\n\t\tconst last = flat[flat.length - 1] as number;\n\t\tphrases.push({\n\t\t\tlines,\n\t\t\tfirst,\n\t\t\tlast,\n\t\t\tstart: (words[first] as Word).start,\n\t\t\tend: (words[last] as Word).end,\n\t\t});\n\t\tlines = [];\n\t};\n\n\twords.forEach((word, i) => {\n\t\tconst prev = words[i - 1];\n\t\tif (prev && lines.length > 0) {\n\t\t\tconst pause = word.start - prev.end >= o.minGap;\n\t\t\tconst strong = o.breakOnPunctuation && STRONG.test(prev.text);\n\t\t\tconst soft =\n\t\t\t\to.breakOnPunctuation &&\n\t\t\t\tSOFT.test(prev.text) &&\n\t\t\t\tchars() >= o.maxChars * 0.6;\n\t\t\tif (pause || strong || soft || count() >= o.maxWords) close();\n\t\t}\n\t\tconst line = lines[lines.length - 1];\n\t\tif (line) {\n\t\t\tconst candidate = `${lineText(line)} ${word.text}`;\n\t\t\tif (candidate.length <= o.maxChars && fits(candidate)) {\n\t\t\t\tline.push(i);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (lines.length >= o.maxLines) close();\n\t\t}\n\t\tlines.push([i]);\n\t});\n\tclose();\n\n\t// On screen until the next phrase starts, lingering a little after the last word.\n\tphrases.forEach((p, k) => {\n\t\tconst next = phrases[k + 1];\n\t\tp.end = next ? Math.min(next.start, p.end + linger) : p.end + linger;\n\t});\n\treturn phrases;\n}\n\n/** The text a phrase shows, lines joined with newlines. */\nexport function phraseText(p: Phrase, words: readonly Word[]): string {\n\treturn p.lines\n\t\t.map((l) => l.map((i) => words[i]?.text ?? \"\").join(\" \"))\n\t\t.join(\"\\n\");\n}\n"
+		}
+	]
+}

package/dist/registry/card-stack.json

@@ -0,0 +1,30 @@
+{
+	"name": "card-stack",
+	"title": "CardStack",
+	"summary": "Cards in a depth stack that shuffle: the front card flies off and returns to the back, or cards are dealt onto the pile.",
+	"tags": [
+		"cards",
+		"stack",
+		"deck",
+		"carousel",
+		"testimonials",
+		"features",
+		"3d"
+	],
+	"example": "CardStack({ cards: [{ title: \"Fast\" }, { title: \"Typed\" }, { title: \"Yours\" }] })",
+	"parts": [
+		"card-0",
+		"card-0-clip",
+		"tilt"
+	],
+	"cues": [
+		"changes"
+	],
+	"registryDependencies": [],
+	"files": [
+		{
+			"path": "card-stack/index.ts",
+			"content": "/**\n * CardStack: cards in a depth stack that shuffle. In `cycle` the front card\n * flies off and returns to the back while the rest step forward; in `deal`\n * cards land one at a time on top of the pile.\n *\n * Draw order is fixed by the tree (the renderer has no animated z-order), so\n * in `cycle` every card sits in a clip that shows only the strip peeking out\n * above the card in front of it: whichever card is drawn later, a card\n * behind can never paint over one in front. The leaving card flies sideways,\n * clear of the stack, before it slots in at the back.\n */\nimport {\n\ttype KeyframeTuple,\n\tLayerAnimation,\n\ttype LayoutNode,\n} from \"framefields\";\nimport {\n\ttype Animatable,\n\tbindComponent,\n\tdefineComponent,\n\tthemeFrames,\n\tz,\n} from \"framefields/components\";\n\nexport interface CardStackCues {\n\t[name: string]: ReadonlyArray<{ frame: number }>;\n\t/** A move starts; `index` is the card coming to the front. */\n\tchanges: ReadonlyArray<{ frame: number; index: number }>;\n}\n\nconst SIMPLE = z\n\t.object({\n\t\ttitle: z.string(),\n\t\tbody: z.string().optional(),\n\t\timage: z.string().optional(),\n\t\taccent: z.string().optional(),\n\t})\n\t.strict();\ntype SimpleCard = z.infer<typeof SIMPLE>;\n\n/** Slot geometry: card k behind the front is this much smaller and higher. */\nexport const SHRINK = 0.06;\n\nexport const cardStack = /* @__PURE__ */ defineComponent({\n\tname: \"CardStack\",\n\tprops: () => ({\n\t\tcards: z\n\t\t\t.array(\n\t\t\t\tz.union([\n\t\t\t\t\tSIMPLE,\n\t\t\t\t\tz.custom<LayoutNode>(\n\t\t\t\t\t\t(v) => typeof v === \"object\" && v !== null && \"kind\" in v,\n\t\t\t\t\t\t{ message: \"Expected a layer or { title, body?, image? }\" },\n\t\t\t\t\t),\n\t\t\t\t]),\n\t\t\t)\n\t\t\t.min(2),\n\t\tmode: z.enum([\"cycle\", \"deal\"]).default(\"cycle\"),\n\t\t/** Frames between moves. Default 1.5 seconds. */\n\t\tevery: z.number().int().positive().optional(),\n\t\tcycles: z.number().int().positive().default(1),\n\t\t/** Cards shown behind the front one. */\n\t\tvisible: z.number().int().min(0).max(8).default(3),\n\t\tflyTo: z.enum([\"up\", \"left\", \"right\"]).default(\"left\"),\n\t\tcardWidth: z.number().positive().optional(),\n\t\tcardHeight: z.number().positive().optional(),\n\t\ttilt: z\n\t\t\t.union([\n\t\t\t\tz.literal(false),\n\t\t\t\tz\n\t\t\t\t\t.object({\n\t\t\t\t\t\trotateX: z.number().default(12),\n\t\t\t\t\t\trotateY: z.number().default(0),\n\t\t\t\t\t})\n\t\t\t\t\t.strict(),\n\t\t\t])\n\t\t\t.default({ rotateX: 12, rotateY: 0 }),\n\t}),\n\tdefaults: { enter: false, exit: false, hold: 30 },\n\tbuild(ctx, props) {\n\t\tconst { host, theme, fps } = ctx;\n\t\tconst s = theme.scale;\n\t\tconst cw = props.cardWidth ?? 640 * s;\n\t\tconst ch = props.cardHeight ?? 400 * s;\n\t\tconst n = props.cards.length;\n\t\tconst every = props.every ?? Math.round(fps * 1.5);\n\t\tconst base = themeFrames(theme, \"base\", fps);\n\t\tconst tr = Math.min(every - 1, Math.round(base * 1.8));\n\t\tconst ease = theme.motion.ease.move;\n\t\tconst step = 26 * s;\n\t\tconst depth = Math.min(props.visible, n - 1);\n\t\tconst W = ctx.requested.width ?? cw * 1.5;\n\t\tconst H = ctx.requested.height ?? ch + step * depth + ch * 0.4;\n\t\tconst front = { x: (W - cw) / 2, y: H - ch - ch * 0.2 };\n\t\tconst pose = (k: number) => {\n\t\t\tconst shown = Math.min(k, depth);\n\t\t\treturn {\n\t\t\t\ty: front.y - shown * step,\n\t\t\t\tscale: 1 - SHRINK * shown,\n\t\t\t\topacity: k <= depth ? 1 : 0,\n\t\t\t\tdim: Math.min(0.6, 0.14 * shown),\n\t\t\t\t// Local height of the strip that peeks above the card in front.\n\t\t\t\tclip: k === 0 ? ch : step / (1 - SHRINK * shown),\n\t\t\t};\n\t\t};\n\n\t\t// ── Timeline: each card's slot at each move ──────────────────────\n\t\tconst cycle = props.mode === \"cycle\";\n\t\tconst moves = cycle ? n * props.cycles : n - 1;\n\t\tconst changes = Array.from({ length: moves }, (_, m) => ({\n\t\t\tframe: (m + 1) * every,\n\t\t\tindex: cycle ? (m + 1) % n : m + 1,\n\t\t}));\n\t\tconst fly =\n\t\t\tprops.flyTo === \"up\"\n\t\t\t\t? { x: 0, y: -ch * 1.3, rotation: -4 }\n\t\t\t\t: {\n\t\t\t\t\t\tx: (props.flyTo === \"left\" ? -1 : 1) * cw * 1.1,\n\t\t\t\t\t\ty: -ch * 0.15,\n\t\t\t\t\t\trotation: props.flyTo === \"left\" ? -10 : 10,\n\t\t\t\t\t};\n\n\t\tconst parts: Record<string, Animatable<LayoutNode>> = {};\n\t\tconst nodes: LayoutNode[] = [];\n\t\tprops.cards.forEach((card, c) => {\n\t\t\tconst tracks = {\n\t\t\t\tx: [] as KeyframeTuple[],\n\t\t\t\ty: [] as KeyframeTuple[],\n\t\t\t\tscale: [] as KeyframeTuple[],\n\t\t\t\trotation: [] as KeyframeTuple[],\n\t\t\t\topacity: [] as KeyframeTuple[],\n\t\t\t\tdim: [] as KeyframeTuple[],\n\t\t\t\tclip: [] as KeyframeTuple[],\n\t\t\t};\n\t\t\tconst put = (\n\t\t\t\tf: number,\n\t\t\t\tk: number,\n\t\t\t\te?: string,\n\t\t\t\talso?: Partial<Record<keyof typeof tracks, number>>,\n\t\t\t) => {\n\t\t\t\tconst p = pose(k);\n\t\t\t\tconst v = {\n\t\t\t\t\tx: front.x,\n\t\t\t\t\ty: p.y,\n\t\t\t\t\tscale: p.scale,\n\t\t\t\t\trotation: 0,\n\t\t\t\t\topacity: p.opacity,\n\t\t\t\t\tdim: p.dim,\n\t\t\t\t\tclip: p.clip,\n\t\t\t\t\t...also,\n\t\t\t\t};\n\t\t\t\tfor (const key of Object.keys(tracks) as Array<keyof typeof tracks>)\n\t\t\t\t\ttracks[key].push(e ? [f, round(v[key]), e] : [f, round(v[key])]);\n\t\t\t};\n\t\t\tif (cycle) {\n\t\t\t\tput(0, c);\n\t\t\t\tchanges.forEach(({ frame: t }, m) => {\n\t\t\t\t\tconst k = (((c - m) % n) + n) % n;\n\t\t\t\t\tif (k === 0) {\n\t\t\t\t\t\t// Leaves: flies clear, then slots in at the back unseen and fades up.\n\t\t\t\t\t\tconst away = t + Math.round(tr * 0.55);\n\t\t\t\t\t\tput(t, 0);\n\t\t\t\t\t\tput(away, 0, \"power2.in\", {\n\t\t\t\t\t\t\tx: front.x + fly.x,\n\t\t\t\t\t\t\ty: front.y + fly.y,\n\t\t\t\t\t\t\trotation: fly.rotation,\n\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t});\n\t\t\t\t\t\tput(away + 1, n - 1, \"hold\", { opacity: 0 });\n\t\t\t\t\t\tput(t + tr, n - 1, \"power2.out\");\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Steps forward once the leaving card is half way out.\n\t\t\t\t\t\tput(t + Math.round(tr * 0.3), k);\n\t\t\t\t\t\tput(t + tr, k - 1, ease);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\t// Deal: card c lands on top at move c (card 0 is already down).\n\t\t\t\tconst landAt = c === 0 ? 0 : (changes[c - 1]?.frame as number);\n\t\t\t\tif (c > 0) {\n\t\t\t\t\tput(0, 0, undefined, {\n\t\t\t\t\t\ty: front.y - ch * 1.4,\n\t\t\t\t\t\trotation: 9,\n\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t});\n\t\t\t\t\tput(landAt, 0, \"hold\", {\n\t\t\t\t\t\ty: front.y - ch * 1.4,\n\t\t\t\t\t\trotation: 9,\n\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t});\n\t\t\t\t\tput(landAt + tr, 0, theme.motion.ease.enter);\n\t\t\t\t} else put(0, 0);\n\t\t\t\t// Pushed back one slot by every later card.\n\t\t\t\tchanges.slice(c).forEach(({ frame: t }, j) => {\n\t\t\t\t\tput(t, j);\n\t\t\t\t\tput(t + tr, j + 1, ease);\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tconst content = isSimple(card) ? simpleCard(ctx, card, c, cw, ch) : card;\n\t\t\tconst dim = host.box({\n\t\t\t\tid: ctx.partId(`card-${c}-dim`),\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tx: 0,\n\t\t\t\ty: 0,\n\t\t\t\twidth: cw,\n\t\t\t\theight: ch,\n\t\t\t\tbackground: \"#000000\",\n\t\t\t\tborderRadius: theme.radius.lg,\n\t\t\t\topacity: 0,\n\t\t\t});\n\t\t\tdim.animate(LayerAnimation.keys(\"opacity\", ascending(tracks.dim)));\n\t\t\tconst clip = host.box({\n\t\t\t\tid: ctx.partId(`card-${c}-clip`),\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tx: 0,\n\t\t\t\ty: 0,\n\t\t\t\twidth: cw,\n\t\t\t\theight: ch,\n\t\t\t\toverflow: \"hidden\",\n\t\t\t\tborderRadius: theme.radius.lg,\n\t\t\t\tchildren: [content, dim],\n\t\t\t});\n\t\t\tif (cycle)\n\t\t\t\tclip.animate(LayerAnimation.keys(\"height\", ascending(tracks.clip)));\n\t\t\tconst node = host.box({\n\t\t\t\tid: ctx.partId(`card-${c}`),\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tx: front.x,\n\t\t\t\ty: pose(c).y,\n\t\t\t\twidth: cw,\n\t\t\t\theight: ch,\n\t\t\t\tanchorX: 0.5,\n\t\t\t\tanchorY: 0,\n\t\t\t\tchildren: [clip],\n\t\t\t});\n\t\t\tconst anim = LayerAnimation.create()\n\t\t\t\t.keys(\"y\", ascending(tracks.y))\n\t\t\t\t.keys(\"scale\", ascending(tracks.scale))\n\t\t\t\t.keys(\"opacity\", ascending(tracks.opacity));\n\t\t\tif (tracks.x.some((k) => k[1] !== front.x))\n\t\t\t\tanim.keys(\"x\", ascending(tracks.x));\n\t\t\tif (tracks.rotation.some((k) => k[1] !== 0))\n\t\t\t\tanim.keys(\"rotation\", ascending(tracks.rotation));\n\t\t\tnode.animate(anim);\n\t\t\thost.style(node, {\n\t\t\t\tdropShadow: {\n\t\t\t\t\tcolor: \"#000000\",\n\t\t\t\t\topacity: 0.35,\n\t\t\t\t\tangle: 90,\n\t\t\t\t\tdistance: 12 * s,\n\t\t\t\t\tsize: 34 * s,\n\t\t\t\t},\n\t\t\t});\n\t\t\tparts[`card-${c}`] = node;\n\t\t\tparts[`card-${c}-clip`] = clip;\n\t\t\tnodes.push(node);\n\t\t});\n\t\t// Front-most last: cycle starts with card 0 in front, deal ends with the last on top.\n\t\tconst ordered = cycle ? [...nodes].reverse() : nodes;\n\t\tconst children = props.tilt\n\t\t\t? [\n\t\t\t\t\thost.box({\n\t\t\t\t\t\tid: ctx.partId(\"tilt\"),\n\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\tx: 0,\n\t\t\t\t\t\ty: 0,\n\t\t\t\t\t\twidth: W,\n\t\t\t\t\t\theight: H,\n\t\t\t\t\t\tperspective: 1600 * s,\n\t\t\t\t\t\trotateX: props.tilt.rotateX,\n\t\t\t\t\t\trotateY: props.tilt.rotateY,\n\t\t\t\t\t\tchildren: ordered,\n\t\t\t\t\t}),\n\t\t\t\t]\n\t\t\t: ordered;\n\t\tif (props.tilt) parts.tilt = children[0] as Animatable<LayoutNode>;\n\n\t\treturn {\n\t\t\tchildren,\n\t\t\twidth: W,\n\t\t\theight: H,\n\t\t\tduration: (changes.at(-1)?.frame ?? 0) + tr,\n\t\t\topenEnded: true,\n\t\t\tcues: { changes } as CardStackCues,\n\t\t\tparts,\n\t\t};\n\t},\n});\n\nconst round = (v: number) => Math.round(v * 1000) / 1000;\n\nconst isSimple = (card: unknown): card is SimpleCard =>\n\ttypeof card === \"object\" &&\n\tcard !== null &&\n\t\"title\" in card &&\n\t!(\"kind\" in card);\n\n/** Later keys on a shared frame win; frames ascend. */\nfunction ascending(keys: KeyframeTuple[]): KeyframeTuple[] {\n\tconst byFrame = new Map<number, KeyframeTuple>();\n\tfor (const k of keys) byFrame.set(k[0] as number, k);\n\treturn [...byFrame.values()].sort(\n\t\t(a, b) => (a[0] as number) - (b[0] as number),\n\t);\n}\n\n/** A card drawn from the theme: optional image on top, title, body, accent bar. */\nfunction simpleCard(\n\tctx: Parameters<(typeof cardStack)[\"build\"]>[0],\n\tcard: SimpleCard,\n\tc: number,\n\tw: number,\n\th: number,\n): LayoutNode {\n\tconst { host, theme } = ctx;\n\tconst s = theme.scale;\n\tconst pad = 36 * s;\n\tconst imageH = card.image ? h * 0.48 : 0;\n\tconst kids: LayoutNode[] = [];\n\tif (card.image)\n\t\tkids.push(\n\t\t\thost.media(card.image, {\n\t\t\t\tid: ctx.partId(`card-${c}-image`),\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tx: 0,\n\t\t\t\ty: 0,\n\t\t\t\twidth: w,\n\t\t\t\theight: imageH,\n\t\t\t\tfit: \"cover\",\n\t\t\t}),\n\t\t);\n\tkids.push(\n\t\thost.box({\n\t\t\tid: ctx.partId(`card-${c}-accent`),\n\t\t\tposition: \"absolute\",\n\t\t\tx: pad,\n\t\t\ty: imageH + pad,\n\t\t\twidth: 44 * s,\n\t\t\theight: 5 * s,\n\t\t\tbackground: card.accent ?? theme.color.accent,\n\t\t\tborderRadius: 3 * s,\n\t\t}),\n\t\thost.text(card.title, {\n\t\t\tid: ctx.partId(`card-${c}-title`),\n\t\t\tposition: \"absolute\",\n\t\t\tx: pad,\n\t\t\ty: imageH + pad + 22 * s,\n\t\t\twidth: w - pad * 2,\n\t\t\tfontFamily: theme.font.display,\n\t\t\tfontSize: 40 * s,\n\t\t\tfontWeight: 700,\n\t\t\tfill: theme.color.ink,\n\t\t}),\n\t);\n\tif (card.body)\n\t\tkids.push(\n\t\t\thost.text(card.body, {\n\t\t\t\tid: ctx.partId(`card-${c}-body`),\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tx: pad,\n\t\t\t\ty: imageH + pad + 80 * s,\n\t\t\t\twidth: w - pad * 2,\n\t\t\t\tfontFamily: theme.font.body,\n\t\t\t\tfontSize: 24 * s,\n\t\t\t\tfill: theme.color.muted,\n\t\t\t}),\n\t\t);\n\treturn host.box({\n\t\tid: ctx.partId(`card-${c}-face`),\n\t\tposition: \"absolute\",\n\t\tx: 0,\n\t\ty: 0,\n\t\twidth: w,\n\t\theight: h,\n\t\tbackground: theme.color.raised,\n\t\tborderRadius: theme.radius.lg,\n\t\tborderColor: theme.color.line,\n\t\tborderWidth: Math.max(1, s),\n\t\tstrokeAlign: \"inside\",\n\t\tchildren: kids,\n\t});\n}\n\n/**\n * Cards in a depth stack that shuffle: the front card flies off and returns to\n * the back, or cards are dealt onto the pile.\n */\nexport const CardStack = /* @__PURE__ */ bindComponent(cardStack);\n"
+		}
+	]
+}

package/dist/registry/chat-thread.json

@@ -0,0 +1,32 @@
+{
+	"name": "chat-thread",
+	"title": "ChatThread",
+	"summary": "A messaging conversation: bubbles that spring in from either side, typing dots before replies, names, timestamps, reactions, images and auto-scroll.",
+	"tags": [
+		"chat",
+		"messages",
+		"conversation",
+		"social",
+		"ui",
+		"demo"
+	],
+	"example": "ChatThread({ messages: [{ from: \"me\", text: \"Shipped?\" }, { from: \"sam\", text: \"Live!\", reaction: \"🎉\" }] })",
+	"parts": [
+		"viewport",
+		"column",
+		"bubble-<n>",
+		"typing-<n>",
+		"reaction-<n>"
+	],
+	"cues": [
+		"messages",
+		"typing"
+	],
+	"registryDependencies": [],
+	"files": [
+		{
+			"path": "chat-thread/index.ts",
+			"content": "/**\n * ChatThread: a messaging conversation. Bubbles arrive from either side\n * with a spring, the other side types first (three bouncing dots), and the\n * thread scrolls to keep the newest message in view. Names, timestamps,\n * reactions and images included.\n */\nimport {\n\ttype KeyframeTuple,\n\tLayerAnimation,\n\ttype LayoutNode,\n} from \"framefields\";\nimport {\n\ttype Animatable,\n\tbindComponent,\n\tdefineComponent,\n\trangeRects,\n\tspringKeys,\n\tz,\n} from \"framefields/components\";\n\nexport interface ChatThreadCues {\n\t[name: string]: ReadonlyArray<{ frame: number }>;\n\t/** Each message as it lands. */\n\tmessages: ReadonlyArray<{ frame: number; index: number; from: string }>;\n\t/** Each typing indicator, shown to removed. */\n\ttyping: ReadonlyArray<{ frame: number; end: number; from: string }>;\n}\n\nfunction messageSchema() {\n\treturn z\n\t\t.object({\n\t\t\tfrom: z.string(),\n\t\t\ttext: z.string().optional(),\n\t\t\t/** An image (path or URL) instead of, or above, text. */\n\t\t\timage: z.string().optional(),\n\t\t\t/** Image width / height. */\n\t\t\taspect: z\n\t\t\t\t.number()\n\t\t\t\t.positive()\n\t\t\t\t.default(4 / 3),\n\t\t\t/** Frame it lands. Default: after the previous one has been read. */\n\t\t\tat: z.number().int().min(0).optional(),\n\t\t\t/** A reaction pinned to the bubble (an emoji or short text). */\n\t\t\treaction: z.string().optional(),\n\t\t\t/** A small timestamp under the bubble. */\n\t\t\ttime: z.string().optional(),\n\t\t})\n\t\t.strict()\n\t\t.refine((m) => m.text !== undefined || m.image !== undefined, {\n\t\t\tmessage: \"A message needs `text` or `image`.\",\n\t\t});\n}\n\nconst SPRING = { stiffness: 260, damping: 20 };\n\nexport const chatThread = /* @__PURE__ */ defineComponent({\n\tname: \"ChatThread\",\n\tprops: () => ({\n\t\tmessages: z.array(messageSchema()).min(1),\n\t\t/** Who is \"me\" (right side, accent bubbles). Default the first sender. */\n\t\tme: z.string().optional(),\n\t\t/** Display names and bubble colours per sender. */\n\t\tparticipants: z\n\t\t\t.record(\n\t\t\t\tz.string(),\n\t\t\t\tz\n\t\t\t\t\t.object({ name: z.string().optional(), color: z.string().optional() })\n\t\t\t\t\t.strict(),\n\t\t\t)\n\t\t\t.default({}),\n\t\t/** Names above the first bubble of each run (default: when more than two people talk). */\n\t\tnames: z.boolean().optional(),\n\t\t/** Others type before they send. */\n\t\ttyping: z.boolean().default(true),\n\t\t/** Reading speed between messages, characters a second. */\n\t\treadCps: z.number().positive().default(28),\n\t\tfontFamily: z.string().optional(),\n\t\tfontSize: z.number().positive().optional(),\n\t}),\n\tdefaults: { enter: false, exit: false },\n\tbuild(ctx, props) {\n\t\tconst { host, theme, fps } = ctx;\n\t\tconst s = theme.scale;\n\t\tconst W = ctx.requested.width ?? 720 * s;\n\t\tconst H = ctx.requested.height ?? 960 * s;\n\t\tconst fs = props.fontSize ?? 30 * s;\n\t\tconst fontFamily = props.fontFamily ?? theme.font.body;\n\t\tconst me = props.me ?? props.messages[0]?.from ?? \"me\";\n\t\tconst senders = [...new Set(props.messages.map((m) => m.from))];\n\t\tconst showNames = props.names ?? senders.length > 2;\n\t\tconst pad = fs * 0.8;\n\t\tconst padX = fs * 0.62;\n\t\tconst padY = fs * 0.42;\n\t\tconst maxW = W * 0.74;\n\t\tconst radius = fs * 0.9;\n\t\tconst smallFs = fs * 0.62;\n\n\t\t// ── Timing ────────────────────────────────────────────────────────\n\t\tconst landed: number[] = [];\n\t\tconst typingWindows: Array<{\n\t\t\tframe: number;\n\t\t\tend: number;\n\t\t\tfrom: string;\n\t\t\tindex: number;\n\t\t}> = [];\n\t\tlet t = Math.round(fps * 0.2);\n\t\tprops.messages.forEach((m, i) => {\n\t\t\tconst prev = props.messages[i - 1];\n\t\t\tif (prev && m.at === undefined) {\n\t\t\t\tconst read = ((prev.text?.length ?? 12) / props.readCps) * fps;\n\t\t\t\tt += Math.round(Math.min(fps * 2.5, Math.max(fps * 0.5, read)));\n\t\t\t}\n\t\t\tlet at = m.at ?? t;\n\t\t\tif (props.typing && m.from !== me && m.at === undefined) {\n\t\t\t\tconst typingFor = Math.round(\n\t\t\t\t\tMath.min(2.2, Math.max(0.7, (m.text?.length ?? 10) / 14)) * fps,\n\t\t\t\t);\n\t\t\t\ttypingWindows.push({\n\t\t\t\t\tframe: at,\n\t\t\t\t\tend: at + typingFor,\n\t\t\t\t\tfrom: m.from,\n\t\t\t\t\tindex: i,\n\t\t\t\t});\n\t\t\t\tat += typingFor;\n\t\t\t}\n\t\t\tlanded.push(at);\n\t\t\tt = at;\n\t\t});\n\n\t\t// ── Layout (top to bottom) ────────────────────────────────────────\n\t\tconst measure = (text: string, size: number, width?: number) =>\n\t\t\thost.measure(text, {\n\t\t\t\tfontFamily,\n\t\t\t\tfontSize: size,\n\t\t\t\t...(width !== undefined && { width }),\n\t\t\t});\n\t\tinterface Slot {\n\t\t\tindex: number;\n\t\t\ty: number;\n\t\t\twidth: number;\n\t\t\theight: number;\n\t\t\tright: boolean;\n\t\t\tnameY?: number;\n\t\t\ttimeY?: number;\n\t\t\ttextH: number;\n\t\t\timageH: number;\n\t\t}\n\t\tconst slots: Slot[] = [];\n\t\tlet y = pad;\n\t\tprops.messages.forEach((m, i) => {\n\t\t\tconst prev = props.messages[i - 1];\n\t\t\tconst right = m.from === me;\n\t\t\tconst newRun = !prev || prev.from !== m.from;\n\t\t\tif (prev) y += newRun ? fs * 0.75 : fs * 0.22;\n\t\t\tlet nameY: number | undefined;\n\t\t\tif (showNames && newRun && !right) {\n\t\t\t\tnameY = y;\n\t\t\t\ty += measure(\"Ag\", smallFs).height + fs * 0.12;\n\t\t\t}\n\t\t\tconst inner = maxW - padX * 2;\n\t\t\tlet textW = 0;\n\t\t\tlet textH = 0;\n\t\t\tif (m.text) {\n\t\t\t\tconst one = measure(m.text, fs);\n\t\t\t\tif (one.width <= inner) {\n\t\t\t\t\ttextW = one.width;\n\t\t\t\t\ttextH = one.height;\n\t\t\t\t} else {\n\t\t\t\t\tconst wrapped = measure(m.text, fs, inner);\n\t\t\t\t\ttextW = Math.max(\n\t\t\t\t\t\t...rangeRects(wrapped, 0, m.text.length, {\n\t\t\t\t\t\t\tfontFamily,\n\t\t\t\t\t\t\tfontSize: fs,\n\t\t\t\t\t\t\twidth: inner,\n\t\t\t\t\t\t}).map((r) => r.width),\n\t\t\t\t\t);\n\t\t\t\t\ttextH = wrapped.height;\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst imageW = m.image ? maxW : 0;\n\t\t\tconst imageH = m.image ? imageW / m.aspect : 0;\n\t\t\tconst width = m.image ? maxW : textW + padX * 2;\n\t\t\tconst height = imageH + (m.text ? textH + padY * 2 : 0);\n\t\t\tslots.push({ index: i, y, width, height, right, nameY, textH, imageH });\n\t\t\ty += height;\n\t\t\tif (m.time) {\n\t\t\t\t(slots[slots.length - 1] as Slot).timeY = y + fs * 0.12;\n\t\t\t\ty += measure(m.time, smallFs * 0.9).height + fs * 0.12;\n\t\t\t}\n\t\t});\n\n\t\t// ── Nodes ─────────────────────────────────────────────────────────\n\t\tconst parts: Record<string, Animatable<LayoutNode>> = {};\n\t\tconst content: LayoutNode[] = [];\n\t\tconst colorOf = (from: string) =>\n\t\t\tprops.participants[from]?.color ??\n\t\t\t(from === me ? theme.color.accent : theme.color.raised);\n\t\tconst ink = (from: string) =>\n\t\t\tfrom === me && !props.participants[from]?.color\n\t\t\t\t? \"#ffffff\"\n\t\t\t\t: theme.color.ink;\n\t\tconst entry = (node: Animatable<LayoutNode>, at: number, baseY: number) =>\n\t\t\tnode.animate(\n\t\t\t\tLayerAnimation.create()\n\t\t\t\t\t.keys(\"scale\", springKeys(at, 0.6, 1, fps, SPRING))\n\t\t\t\t\t.keys(\"y\", springKeys(at, baseY + fs * 0.5, baseY, fps, SPRING))\n\t\t\t\t\t.keys(\"opacity\", [\n\t\t\t\t\t\t[at, 0],\n\t\t\t\t\t\t[at + Math.max(2, Math.round(fps * 0.12)), 1, \"power2.out\"],\n\t\t\t\t\t]),\n\t\t\t);\n\n\t\tslots.forEach((slot) => {\n\t\t\tconst m = props.messages[slot.index] as (typeof props.messages)[number];\n\t\t\tconst at = landed[slot.index] as number;\n\t\t\tconst x = slot.right ? W - pad - slot.width : pad;\n\t\t\tconst children: LayoutNode[] = [];\n\t\t\tif (m.image) {\n\t\t\t\tchildren.push(\n\t\t\t\t\thost.box({\n\t\t\t\t\t\tid: ctx.partId(`image-${slot.index}`),\n\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\tx: 0,\n\t\t\t\t\t\ty: 0,\n\t\t\t\t\t\twidth: slot.width,\n\t\t\t\t\t\theight: slot.imageH,\n\t\t\t\t\t\toverflow: \"hidden\",\n\t\t\t\t\t\tborderRadius: radius,\n\t\t\t\t\t\tchildren: [\n\t\t\t\t\t\t\thost.media(m.image, {\n\t\t\t\t\t\t\t\tid: ctx.partId(`media-${slot.index}`),\n\t\t\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\t\t\tx: 0,\n\t\t\t\t\t\t\t\ty: 0,\n\t\t\t\t\t\t\t\twidth: slot.width,\n\t\t\t\t\t\t\t\theight: slot.imageH,\n\t\t\t\t\t\t\t\tfit: \"cover\",\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t],\n\t\t\t\t\t}),\n\t\t\t\t);\n\t\t\t}\n\t\t\tif (m.text)\n\t\t\t\tchildren.push(\n\t\t\t\t\thost.text(m.text, {\n\t\t\t\t\t\tid: ctx.partId(`text-${slot.index}`),\n\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\tx: padX,\n\t\t\t\t\t\ty: slot.imageH + padY,\n\t\t\t\t\t\twidth: slot.width - padX * 2 + 1,\n\t\t\t\t\t\tfontFamily,\n\t\t\t\t\t\tfontSize: fs,\n\t\t\t\t\t\tfill: ink(m.from),\n\t\t\t\t\t}),\n\t\t\t\t);\n\t\t\tconst bubble = host.box({\n\t\t\t\tid: ctx.partId(`bubble-${slot.index}`),\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tx,\n\t\t\t\ty: slot.y,\n\t\t\t\twidth: slot.width,\n\t\t\t\theight: slot.height,\n\t\t\t\tbackground: m.image && !m.text ? \"rgba(0,0,0,0)\" : colorOf(m.from),\n\t\t\t\tborderRadius: radius,\n\t\t\t\t// Springs grow from the corner the bubble comes from.\n\t\t\t\tanchorX: slot.right ? 1 : 0,\n\t\t\t\tanchorY: 1,\n\t\t\t\tchildren,\n\t\t\t});\n\t\t\tentry(bubble, at, slot.y);\n\t\t\tcontent.push(bubble);\n\t\t\tparts[`bubble-${slot.index}`] = bubble;\n\n\t\t\tconst small = (\n\t\t\t\tid: string,\n\t\t\t\ttext: string,\n\t\t\t\tsize: number,\n\t\t\t\ttx: number,\n\t\t\t\tty: number,\n\t\t\t) => {\n\t\t\t\tconst node = host.text(text, {\n\t\t\t\t\tid: ctx.partId(id),\n\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\tx: tx,\n\t\t\t\t\ty: ty,\n\t\t\t\t\tfontFamily,\n\t\t\t\t\tfontSize: size,\n\t\t\t\t\tfill: theme.color.muted,\n\t\t\t\t});\n\t\t\t\tnode.animate(\n\t\t\t\t\tLayerAnimation.keys(\"opacity\", [\n\t\t\t\t\t\t[0, 0],\n\t\t\t\t\t\t[at, 0],\n\t\t\t\t\t\t[at + Math.round(fps * 0.25), 1, \"power2.out\"],\n\t\t\t\t\t]),\n\t\t\t\t);\n\t\t\t\tcontent.push(node);\n\t\t\t};\n\t\t\tif (slot.nameY !== undefined)\n\t\t\t\tsmall(\n\t\t\t\t\t`name-${slot.index}`,\n\t\t\t\t\tprops.participants[m.from]?.name ?? m.from,\n\t\t\t\t\tsmallFs,\n\t\t\t\t\tx + padX * 0.5,\n\t\t\t\t\tslot.nameY,\n\t\t\t\t);\n\t\t\tif (slot.timeY !== undefined && m.time) {\n\t\t\t\tconst tw = measure(m.time, smallFs * 0.9).width;\n\t\t\t\tsmall(\n\t\t\t\t\t`time-${slot.index}`,\n\t\t\t\t\tm.time,\n\t\t\t\t\tsmallFs * 0.9,\n\t\t\t\t\tslot.right ? x + slot.width - tw - padX * 0.3 : x + padX * 0.3,\n\t\t\t\t\tslot.timeY,\n\t\t\t\t);\n\t\t\t}\n\t\t\tif (m.reaction) {\n\t\t\t\t// Hearts are drawn (most fonts have no emoji); anything else is text.\n\t\t\t\tconst heart = /^(❤️?|♥️?|heart)$/u.test(m.reaction.trim());\n\t\t\t\tconst rm = measure(heart ? \"M\" : m.reaction, fs * 0.7);\n\t\t\t\tconst rh = rm.height + fs * 0.16;\n\t\t\t\tconst rw = heart ? rh * 1.3 : rm.width + fs * 0.5;\n\t\t\t\tconst rAt = at + Math.round(fps * 0.6);\n\t\t\t\tconst pill = host.box({\n\t\t\t\t\tid: ctx.partId(`reaction-${slot.index}`),\n\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\tx: slot.right ? x - rw * 0.35 : x + slot.width - rw * 0.65,\n\t\t\t\t\ty: slot.y + slot.height - rh * 0.45,\n\t\t\t\t\twidth: rw,\n\t\t\t\t\theight: rh,\n\t\t\t\t\tbackground: theme.color.surface,\n\t\t\t\t\tborderRadius: rh / 2,\n\t\t\t\t\tborderColor: theme.color.bg,\n\t\t\t\t\tborderWidth: Math.max(2, fs * 0.08),\n\t\t\t\t\tchildren: [\n\t\t\t\t\t\theart\n\t\t\t\t\t\t\t? host.shape(\"path\", {\n\t\t\t\t\t\t\t\t\tid: ctx.partId(`reaction-${slot.index}-heart`),\n\t\t\t\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\t\t\t\tx: (rw - rh * 0.56) / 2,\n\t\t\t\t\t\t\t\t\ty: rh * 0.24,\n\t\t\t\t\t\t\t\t\twidth: rh * 0.56,\n\t\t\t\t\t\t\t\t\theight: rh * 0.52,\n\t\t\t\t\t\t\t\t\td: heartPath(rh * 0.56),\n\t\t\t\t\t\t\t\t\tfillType: \"solid\",\n\t\t\t\t\t\t\t\t\tfillColor: theme.color.negative,\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t: host.text(m.reaction, {\n\t\t\t\t\t\t\t\t\tid: ctx.partId(`reaction-${slot.index}-text`),\n\t\t\t\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\t\t\t\tx: fs * 0.25,\n\t\t\t\t\t\t\t\t\ty: fs * 0.08,\n\t\t\t\t\t\t\t\t\tfontFamily,\n\t\t\t\t\t\t\t\t\tfontSize: fs * 0.7,\n\t\t\t\t\t\t\t\t\tfill: theme.color.ink,\n\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t],\n\t\t\t\t});\n\t\t\t\tpill.animate(\n\t\t\t\t\tLayerAnimation.create()\n\t\t\t\t\t\t.keys(\n\t\t\t\t\t\t\t\"scale\",\n\t\t\t\t\t\t\tspringKeys(rAt, 0, 1, fps, { stiffness: 320, damping: 14 }),\n\t\t\t\t\t\t)\n\t\t\t\t\t\t.keys(\"opacity\", [\n\t\t\t\t\t\t\t[0, 0],\n\t\t\t\t\t\t\t[rAt, 1, \"hold\"],\n\t\t\t\t\t\t]),\n\t\t\t\t);\n\t\t\t\tcontent.push(pill);\n\t\t\t}\n\t\t});\n\n\t\t// Typing indicators sit where the message will land.\n\t\tconst dot = fs * 0.24;\n\t\ttypingWindows.forEach((w, k) => {\n\t\t\tconst slot = slots[w.index] as Slot;\n\t\t\tconst bw = dot * 3 + dot * 1.1 * 2 + padX * 2;\n\t\t\tconst bh = Math.max(fs + padY * 2 - fs * 0.3, dot + padY * 2);\n\t\t\tconst dots: LayoutNode[] = [0, 1, 2].map((d) => {\n\t\t\t\tconst node = host.box({\n\t\t\t\t\tid: ctx.partId(`typing-${k}-dot-${d}`),\n\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\tx: padX + d * dot * 2.1,\n\t\t\t\t\ty: (bh - dot) / 2,\n\t\t\t\t\twidth: dot,\n\t\t\t\t\theight: dot,\n\t\t\t\t\tbackground: theme.color.muted,\n\t\t\t\t\tborderRadius: dot / 2,\n\t\t\t\t});\n\t\t\t\t// A wave through the dots, one bounce every 0.6 s.\n\t\t\t\tconst period = Math.round(fps * 0.6);\n\t\t\t\tconst keys: KeyframeTuple[] = [[0, (bh - dot) / 2]];\n\t\t\t\tfor (\n\t\t\t\t\tlet f = w.frame + d * Math.round(period / 5);\n\t\t\t\t\tf < w.end;\n\t\t\t\t\tf += period\n\t\t\t\t)\n\t\t\t\t\tkeys.push(\n\t\t\t\t\t\t[f, (bh - dot) / 2],\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\tf + Math.round(period / 4),\n\t\t\t\t\t\t\t(bh - dot) / 2 - dot * 0.7,\n\t\t\t\t\t\t\t\"sine.out\",\n\t\t\t\t\t\t],\n\t\t\t\t\t\t[f + Math.round(period / 2), (bh - dot) / 2, \"sine.in\"],\n\t\t\t\t\t);\n\t\t\t\tnode.animate(LayerAnimation.keys(\"y\", ascending(keys)));\n\t\t\t\treturn node;\n\t\t\t});\n\t\t\tconst bubble = host.box({\n\t\t\t\tid: ctx.partId(`typing-${k}`),\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tx: pad,\n\t\t\t\ty: slot.y,\n\t\t\t\twidth: bw,\n\t\t\t\theight: bh,\n\t\t\t\tbackground: colorOf(w.from),\n\t\t\t\tborderRadius: bh / 2,\n\t\t\t\tanchorX: 0,\n\t\t\t\tanchorY: 1,\n\t\t\t\tchildren: dots,\n\t\t\t});\n\t\t\tbubble.animate(\n\t\t\t\tLayerAnimation.create()\n\t\t\t\t\t.keys(\"scale\", springKeys(w.frame, 0.5, 1, fps, SPRING))\n\t\t\t\t\t.keys(\"opacity\", [\n\t\t\t\t\t\t[0, 0],\n\t\t\t\t\t\t[w.frame, 1, \"hold\"],\n\t\t\t\t\t\t[w.end, 0, \"hold\"],\n\t\t\t\t\t]),\n\t\t\t);\n\t\t\tcontent.push(bubble);\n\t\t});\n\n\t\t// ── Scroll: keep the newest bubble (or typing dots) in view ───────\n\t\tconst events = [\n\t\t\t...slots.map((sl) => ({\n\t\t\t\tframe: landed[sl.index] as number,\n\t\t\t\tbottom: sl.y + sl.height + (sl.timeY !== undefined ? fs : 0),\n\t\t\t})),\n\t\t\t...typingWindows.map((w) => ({\n\t\t\t\tframe: w.frame,\n\t\t\t\tbottom: (slots[w.index] as Slot).y + fs * 1.6,\n\t\t\t})),\n\t\t].sort((a, b) => a.frame - b.frame);\n\t\tconst scroll: KeyframeTuple[] = [[0, 0]];\n\t\tlet top = 0;\n\t\tconst glide = Math.round(fps * 0.35);\n\t\tfor (const e of events) {\n\t\t\tconst want = Math.min(0, H - pad - e.bottom);\n\t\t\tif (want >= top) continue;\n\t\t\tconst last = scroll[scroll.length - 1] as KeyframeTuple;\n\t\t\tif (e.frame > last[0]) scroll.push([e.frame, top]);\n\t\t\tscroll.push([Math.max(e.frame, last[0]) + glide, want, \"power3.out\"]);\n\t\t\ttop = want;\n\t\t}\n\t\tconst column = host.box({\n\t\t\tid: ctx.partId(\"column\"),\n\t\t\tposition: \"absolute\",\n\t\t\tx: 0,\n\t\t\ty: 0,\n\t\t\twidth: W,\n\t\t\theight: Math.max(H, y + pad),\n\t\t\tchildren: content,\n\t\t});\n\t\tcolumn.animate(LayerAnimation.keys(\"y\", ascending(scroll)));\n\t\tconst viewport = host.box({\n\t\t\tid: ctx.partId(\"viewport\"),\n\t\t\tposition: \"absolute\",\n\t\t\tx: 0,\n\t\t\ty: 0,\n\t\t\twidth: W,\n\t\t\theight: H,\n\t\t\toverflow: \"hidden\",\n\t\t\tchildren: [column],\n\t\t});\n\t\tparts.column = column;\n\t\tparts.viewport = viewport;\n\n\t\tconst lastAt = Math.max(...landed);\n\t\treturn {\n\t\t\tchildren: [viewport],\n\t\t\twidth: W,\n\t\t\theight: H,\n\t\t\tduration: lastAt + Math.round(fps * 0.8),\n\t\t\topenEnded: true,\n\t\t\tcues: {\n\t\t\t\tmessages: landed.map((frame, index) => ({\n\t\t\t\t\tframe,\n\t\t\t\t\tindex,\n\t\t\t\t\tfrom: props.messages[index]?.from ?? \"\",\n\t\t\t\t})),\n\t\t\t\ttyping: typingWindows.map(({ frame, end, from }) => ({\n\t\t\t\t\tframe,\n\t\t\t\t\tend,\n\t\t\t\t\tfrom,\n\t\t\t\t})),\n\t\t\t} as ChatThreadCues,\n\t\t\tparts,\n\t\t};\n\t},\n});\n\n/** A heart `size` wide, top-left at 0, 0 (two lobes and a point). */\nfunction heartPath(size: number): string {\n\tconst w = size;\n\tconst h = size * 0.92;\n\treturn [\n\t\t`M${w / 2} ${h}`,\n\t\t`C${w * 0.18} ${h * 0.72} 0 ${h * 0.5} 0 ${h * 0.28}`,\n\t\t`C0 ${h * 0.1} ${w * 0.14} 0 ${w * 0.28} 0`,\n\t\t`C${w * 0.39} 0 ${w * 0.47} ${h * 0.07} ${w / 2} ${h * 0.16}`,\n\t\t`C${w * 0.53} ${h * 0.07} ${w * 0.61} 0 ${w * 0.72} 0`,\n\t\t`C${w * 0.86} 0 ${w} ${h * 0.1} ${w} ${h * 0.28}`,\n\t\t`C${w} ${h * 0.5} ${w * 0.82} ${h * 0.72} ${w / 2} ${h} Z`,\n\t].join(\" \");\n}\n\nfunction ascending(keys: KeyframeTuple[]): KeyframeTuple[] {\n\tconst out: KeyframeTuple[] = [];\n\tfor (const k of [...keys].sort((a, b) => a[0] - b[0])) {\n\t\twhile (out.length > 0 && (out[out.length - 1] as KeyframeTuple)[0] >= k[0])\n\t\t\tout.pop();\n\t\tout.push(k);\n\t}\n\treturn out;\n}\n\n/**\n * A messaging conversation: bubbles that spring in from either side, typing\n * dots before replies, names, timestamps, reactions, images and auto-scroll.\n */\nexport const ChatThread = /* @__PURE__ */ bindComponent(chatThread);\n"
+		}
+	]
+}