framefields 2.4.3 → 2.5.1

package/dist/registry/index.json

@@ -0,0 +1,408 @@
+[
+	{
+		"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\" })",
+		"registryDependencies": []
+	},
+	{
+		"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\" })",
+		"registryDependencies": []
+	},
+	{
+		"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\" })",
+		"registryDependencies": []
+	},
+	{
+		"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 })",
+		"registryDependencies": []
+	},
+	{
+		"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\" })",
+		"registryDependencies": []
+	},
+	{
+		"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\"] })",
+		"registryDependencies": []
+	},
+	{
+		"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\" }] })",
+		"registryDependencies": []
+	},
+	{
+		"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: \"🎉\" }] })",
+		"registryDependencies": []
+	},
+	{
+		"name": "code-block",
+		"title": "CodeBlock",
+		"summary": "Code that reads like an editor and moves like an explanation: syntax colours, typing, a focus band that walks the lines, and diffs where kept lines glide to their new places.",
+		"tags": [
+			"code",
+			"syntax",
+			"diff",
+			"developer",
+			"tutorial",
+			"typing"
+		],
+		"example": "CodeBlock({ code, lang: \"ts\", focus: [{ at: 60, lines: [3] }] })",
+		"registryDependencies": [
+			"app-frame"
+		]
+	},
+	{
+		"name": "confetti",
+		"title": "Confetti",
+		"summary": "Celebration bursts of paper, ribbons and sparkles on the GPU that arc up, flutter down and can settle on a floor; bursts can follow cues.",
+		"tags": [
+			"confetti",
+			"celebration",
+			"particles",
+			"burst",
+			"success",
+			"party"
+		],
+		"example": "Confetti({ bursts: [{ at: 30, origin: [960, 900] }], floor: true })",
+		"registryDependencies": []
+	},
+	{
+		"name": "counter",
+		"title": "Counter",
+		"summary": "A number that counts to its value on odometer reels (or stepping digits), with format-aware separators, affixes and multi-step values.",
+		"tags": [
+			"number",
+			"counter",
+			"stat",
+			"odometer",
+			"data",
+			"price"
+		],
+		"example": "Counter({ to: 12480, format: \",d\", prefix: \"$\" })",
+		"registryDependencies": []
+	},
+	{
+		"name": "device-frame",
+		"title": "DeviceFrame",
+		"summary": "A phone, tablet or laptop around a screen; content is authored in device points and `at(x, y)` maps them for pointers and touches.",
+		"tags": [
+			"device",
+			"phone",
+			"mobile",
+			"tablet",
+			"laptop",
+			"mockup",
+			"screen",
+			"app"
+		],
+		"example": "DeviceFrame({ device: \"phone\", content: \"assets/app.mp4\" })",
+		"registryDependencies": []
+	},
+	{
+		"name": "focus-zoom",
+		"title": "FocusZoom",
+		"summary": "A camera over 2D content that pushes in on each burst of pointer clicks (or on given shots) and eases back out, clamped to the content.",
+		"tags": [
+			"camera",
+			"zoom",
+			"auto-zoom",
+			"screen recording",
+			"demo",
+			"focus"
+		],
+		"example": "FocusZoom({ content: [frame, pointer], follow: pointer })",
+		"registryDependencies": []
+	},
+	{
+		"name": "logo-reveal",
+		"title": "LogoReveal",
+		"summary": "The end-card lockup: a mark and a wordmark arriving as one move, drawn on, popped or wiped, with a glint across the name; names can be extruded in 3D.",
+		"tags": [
+			"logo",
+			"brand",
+			"lockup",
+			"end card",
+			"outro",
+			"wordmark",
+			"3d"
+		],
+		"example": "LogoReveal({ mark: \"assets/logo.svg\", name: \"framefields\", tagline: \"Motion in code\" })",
+		"registryDependencies": []
+	},
+	{
+		"name": "lower-third",
+		"title": "LowerThird",
+		"summary": "The name-and-role bar of interviews and talks: measured plates in the safe area that slide in and leave on their own.",
+		"tags": [
+			"lower third",
+			"name",
+			"interview",
+			"talk",
+			"caption",
+			"broadcast"
+		],
+		"example": "LowerThird({ name: \"Ada Lovelace\", role: \"Engineer\" })",
+		"registryDependencies": []
+	},
+	{
+		"name": "meter",
+		"title": "Meter",
+		"summary": "Progress and scores as a ring, arc gauge, bar, lit segments or star rating, filling on the same timeline as its counter.",
+		"tags": [
+			"progress",
+			"gauge",
+			"score",
+			"rating",
+			"stat",
+			"data"
+		],
+		"example": "Meter({ value: 72, kind: \"ring\", label: \"Coverage\" })",
+		"registryDependencies": [
+			"counter"
+		]
+	},
+	{
+		"name": "mouse-pointer",
+		"title": "MousePointer",
+		"summary": "An animated pointer that travels between targets, clicks, drags and changes shape, reporting every click as a cue.",
+		"tags": [
+			"pointer",
+			"cursor",
+			"demo",
+			"ui",
+			"interaction",
+			"screen recording"
+		],
+		"example": "MousePointer({ path: [{ to: [400, 300] }, { to: [900, 520], click: true }] })",
+		"registryDependencies": []
+	},
+	{
+		"name": "selection",
+		"title": "Selection",
+		"summary": "A text selection or a marquee driven by a MousePointer drag: it follows the pointer glyph by glyph, and lights up covered items.",
+		"tags": [
+			"selection",
+			"highlight",
+			"marquee",
+			"drag",
+			"editor",
+			"ui",
+			"pointer"
+		],
+		"example": "Selection({ target: { text: paragraph, match: \"the key line\" }, pointer })",
+		"registryDependencies": []
+	},
+	{
+		"name": "spotlight",
+		"title": "Spotlight",
+		"summary": "Dims the frame except a region that glides between targets, as a crisp rounded rect or a soft pool of light.",
+		"tags": [
+			"spotlight",
+			"focus",
+			"dim",
+			"highlight",
+			"tutorial",
+			"ui"
+		],
+		"example": "Spotlight({ targets: [{ at: 0, target: button }, { at: 60, target: menu }] })",
+		"registryDependencies": []
+	},
+	{
+		"name": "terminal",
+		"title": "Terminal",
+		"summary": "A scripted shell session: commands typed with a human rhythm, streaming output, spinners that resolve to check marks, progress bars and scrolling, with a cue for every keystroke.",
+		"tags": [
+			"terminal",
+			"shell",
+			"cli",
+			"developer",
+			"demo",
+			"typing"
+		],
+		"example": "Terminal({ script: [{ cmd: \"pnpm add framefields\" }, { spinner: \"Installing\", for: 40, done: \"1 package added\" }] })",
+		"registryDependencies": [
+			"app-frame",
+			"counter"
+		]
+	},
+	{
+		"name": "text-reveal",
+		"title": "TextReveal",
+		"summary": "Headlines and body copy that animate in and out by character, word or line: rise, blur, track, mask, slam, scatter, scramble, type, stream, wipe and flip, each ending on exactly the static text.",
+		"tags": [
+			"text",
+			"typography",
+			"kinetic type",
+			"title",
+			"reveal",
+			"typewriter"
+		],
+		"example": "TextReveal({ text: \"Ship it faster\", style: \"rise\", emphasis: [\"faster\"] })",
+		"registryDependencies": []
+	},
+	{
+		"name": "title-card",
+		"title": "TitleCard",
+		"summary": "Kicker, headline, rule and sub-line in designed layouts (center, left, stack, split), the headline in any reveal style, on one timeline.",
+		"tags": [
+			"title",
+			"headline",
+			"typography",
+			"opener",
+			"chapter"
+		],
+		"example": "TitleCard({ kicker: \"Chapter one\", title: \"Ship it faster\", subtitle: \"What changed in 2.5\" })",
+		"registryDependencies": [
+			"text-reveal"
+		]
+	},
+	{
+		"name": "toasts",
+		"title": "Toasts",
+		"summary": "Notifications arriving into a corner stack that pushes older ones away and compresses as it grows; each slides out when dismissed.",
+		"tags": [
+			"toast",
+			"notification",
+			"alert",
+			"ui",
+			"stack",
+			"demo"
+		],
+		"example": "Toasts({ items: [{ at: 0, title: \"Deployed\", kind: \"success\" }, { at: 40, title: \"3 new comments\" }] })",
+		"registryDependencies": []
+	},
+	{
+		"name": "touch-point",
+		"title": "TouchPoint",
+		"summary": "Fingers on glass: taps, double taps, long presses and swipes as soft discs with ripples, for mobile demos in a DeviceFrame.",
+		"tags": [
+			"touch",
+			"tap",
+			"swipe",
+			"mobile",
+			"gesture",
+			"demo",
+			"phone"
+		],
+		"example": "TouchPoint({ touches: [{ to: phone.at(196, 700) }, { to: phone.at(196, 600), swipe: phone.at(196, 200) }] })",
+		"registryDependencies": []
+	},
+	{
+		"name": "waveform",
+		"title": "Waveform",
+		"summary": "An audiogram: bars, mirrored bars, dots or a ring that move with a track's spectrum, analysed offline and bound as signals.",
+		"tags": [
+			"audio",
+			"waveform",
+			"audiogram",
+			"spectrum",
+			"podcast",
+			"music",
+			"visualizer"
+		],
+		"example": "Waveform({ audio: await analyzeAudio(\"voice.wav\", { fps: 30 }), kind: \"mirror\" })",
+		"registryDependencies": []
+	},
+	{
+		"name": "word-cycle",
+		"title": "WordCycle",
+		"summary": "One slot in a line cycles through words: rolled, faded, slid or retyped, while the slot resizes to each word and the line glides to fit.",
+		"tags": [
+			"text",
+			"headline",
+			"rotating word",
+			"kinetic type",
+			"launch",
+			"typography"
+		],
+		"example": "WordCycle({ text: \"Make videos {}\", words: [\"faster\", \"together\", \"in code\"] })",
+		"registryDependencies": []
+	}
+]

package/dist/registry/logo-reveal.json

@@ -0,0 +1,37 @@
+{
+	"name": "logo-reveal",
+	"title": "LogoReveal",
+	"summary": "The end-card lockup: a mark and a wordmark arriving as one move, drawn on, popped or wiped, with a glint across the name; names can be extruded in 3D.",
+	"tags": [
+		"logo",
+		"brand",
+		"lockup",
+		"end card",
+		"outro",
+		"wordmark",
+		"3d"
+	],
+	"example": "LogoReveal({ mark: \"assets/logo.svg\", name: \"framefields\", tagline: \"Motion in code\" })",
+	"parts": [
+		"mark",
+		"mark-clip",
+		"mark-image",
+		"mark-fill",
+		"mark-outline",
+		"name",
+		"name-clip",
+		"tagline"
+	],
+	"cues": [
+		"hit",
+		"revealed",
+		"glint"
+	],
+	"registryDependencies": [],
+	"files": [
+		{
+			"path": "logo-reveal/index.ts",
+			"content": "/**\n * LogoReveal: the end-card lockup. A mark (image, SVG or path data) and a\n * wordmark arrive as one move, then a light sweeps across the name. Path\n * marks can draw themselves on; names can be extruded in 3D.\n */\nimport {\n\ttype KeyframeTuple,\n\tLayerAnimation,\n\ttype LayoutNode,\n} from \"framefields\";\nimport {\n\ttype Animatable,\n\tbindComponent,\n\tdefineComponent,\n\tdrawOnKeys,\n\tglyphAnimator,\n\trendererChars,\n\tscheduleExpression,\n\tspringKeys,\n\tthemeFrames,\n\ttransformPathData,\n\tz,\n} from \"framefields/components\";\n\nexport const LOGO_STYLES = [\"slide\", \"pop\", \"draw\", \"rise\"] as const;\nexport type LogoStyle = (typeof LOGO_STYLES)[number];\nexport const LOGO_LAYOUTS = [\"row\", \"stack\"] as const;\nexport type LogoLayout = (typeof LOGO_LAYOUTS)[number];\n\nexport interface LogoRevealCues {\n\t[name: string]: ReadonlyArray<{ frame: number }>;\n\t/** The mark lands. */\n\thit: ReadonlyArray<{ frame: number }>;\n\t/** The lockup is complete. */\n\trevealed: ReadonlyArray<{ frame: number }>;\n\t/** The glint starts (empty without `glint`). */\n\tglint: ReadonlyArray<{ frame: number }>;\n}\n\nconst POP = { stiffness: 260, damping: 14 };\nconst SWING = { stiffness: 120, damping: 14 };\n\nexport const logoReveal = /* @__PURE__ */ defineComponent({\n\tname: \"LogoReveal\",\n\tprops: () => ({\n\t\t/** An image / SVG file, or path data in its own viewBox. */\n\t\tmark: z\n\t\t\t.union([\n\t\t\t\tz.string().min(1),\n\t\t\t\tz\n\t\t\t\t\t.object({\n\t\t\t\t\t\td: z.string().min(1),\n\t\t\t\t\t\tviewBox: z.tuple([z.number().positive(), z.number().positive()]),\n\t\t\t\t\t\tcolor: z.string().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\tname: z.string().min(1).optional(),\n\t\ttagline: z.string().min(1).optional(),\n\t\tlayout: z.enum(LOGO_LAYOUTS).default(\"row\"),\n\t\tstyle: z.enum(LOGO_STYLES).default(\"slide\"),\n\t\tglint: z.boolean().default(true),\n\t\t/** Above 0, the name is extruded text this deep (px). */\n\t\tdepth: z.number().min(0).default(0),\n\t\tmaterial: z.enum([\"lit\", \"chrome\", \"glass\"]).default(\"lit\"),\n\t\tmarkSize: z.number().positive().optional(),\n\t\tnameSize: z.number().positive().optional(),\n\t\tgap: z.number().min(0).optional(),\n\t\tcolor: z.string().optional(),\n\t\taccent: z.string().optional(),\n\t\tfontFamily: z.string().optional(),\n\t\tfontWeight: z.number().int().min(100).max(900).default(800),\n\t}),\n\tdefaults: { enter: false, exit: false, hold: 60 },\n\tbuild(ctx, props) {\n\t\tconst { host, theme, fps } = ctx;\n\t\tif (!props.mark && !props.name)\n\t\t\tthrow new Error(\"LogoReveal: give a `mark`, a `name`, or both.\");\n\t\tconst s = theme.scale;\n\t\tconst base = themeFrames(theme, \"base\", fps);\n\t\tconst ease = theme.motion.ease.move;\n\t\tconst accent = props.accent ?? theme.color.accent;\n\t\tconst ink = props.color ?? theme.color.ink;\n\t\tconst fontFamily = props.fontFamily ?? theme.font.display;\n\t\tconst ns = props.nameSize ?? 120 * s;\n\t\tconst m = props.mark ? (props.markSize ?? 150 * s) : 0;\n\t\tconst gap = props.mark && props.name ? (props.gap ?? ns * 0.32) : 0;\n\t\tconst stack = props.layout === \"stack\";\n\t\tconst solid = props.depth > 0;\n\t\tconst pathMark = typeof props.mark === \"object\" ? props.mark : null;\n\t\t// Image marks can't draw on: they pop.\n\t\tconst style: LogoStyle =\n\t\t\tprops.style === \"draw\" && !pathMark ? \"pop\" : props.style;\n\n\t\t// ── Geometry ─────────────────────────────────────────────────────\n\t\tconst nameM = props.name\n\t\t\t? host.measure(props.name, {\n\t\t\t\t\tfontFamily,\n\t\t\t\t\tfontSize: ns,\n\t\t\t\t\tfontWeight: props.fontWeight,\n\t\t\t\t})\n\t\t\t: { width: 0, height: 0 };\n\t\tconst tagSize = Math.max(18 * s, ns * 0.26);\n\t\tconst tagM = props.tagline\n\t\t\t? host.measure(props.tagline, {\n\t\t\t\t\tfontFamily: theme.font.body,\n\t\t\t\t\tfontSize: tagSize,\n\t\t\t\t})\n\t\t\t: { width: 0, height: 0 };\n\t\tconst tagGap = props.tagline ? ns * 0.12 : 0;\n\t\tconst textW = Math.max(nameM.width, tagM.width);\n\t\tconst textH = nameM.height + tagGap + tagM.height;\n\t\tconst W = stack ? Math.max(m, textW) : m + gap + textW;\n\t\tconst H = stack ? m + gap + textH : Math.max(m, textH);\n\t\tconst markAt = stack ? { x: (W - m) / 2, y: 0 } : { x: 0, y: (H - m) / 2 };\n\t\tconst nameAt = stack\n\t\t\t? { x: (W - nameM.width) / 2, y: m + gap }\n\t\t\t: { x: m + gap, y: (H - textH) / 2 };\n\t\tconst tagAt = stack\n\t\t\t? { x: (W - tagM.width) / 2, y: nameAt.y + nameM.height + tagGap }\n\t\t\t: { x: nameAt.x, y: nameAt.y + nameM.height + tagGap };\n\n\t\t// ── Timeline ─────────────────────────────────────────────────────\n\t\tconst drawFrames = Math.round(base * 2.2);\n\t\tconst glide = Math.round(base * 1.5);\n\t\tconst glideAt = style === \"slide\" ? Math.round(base * 1.1) : 0;\n\t\tconst hit = !props.mark\n\t\t\t? 0\n\t\t\t: style === \"draw\"\n\t\t\t\t? drawFrames\n\t\t\t\t: style === \"rise\"\n\t\t\t\t\t? base\n\t\t\t\t\t: Math.round(base * 0.75);\n\t\tconst nameStart = !props.mark\n\t\t\t? 0\n\t\t\t: style === \"slide\"\n\t\t\t\t? glideAt\n\t\t\t\t: style === \"draw\"\n\t\t\t\t\t? Math.round(drawFrames * 0.6)\n\t\t\t\t\t: style === \"rise\"\n\t\t\t\t\t\t? Math.round(base * 0.35)\n\t\t\t\t\t\t: Math.round(base * 0.55);\n\t\tconst chars = props.name?.length ?? 0;\n\t\tconst stagger = Math.max(1, Math.round(fps / 30) * 1.5);\n\t\tconst letters = style === \"pop\" || style === \"draw\";\n\t\tconst nameDone = !props.name\n\t\t\t? hit\n\t\t\t: solid\n\t\t\t\t? nameStart + base * 2\n\t\t\t\t: style === \"slide\"\n\t\t\t\t\t? glideAt + glide\n\t\t\t\t\t: letters\n\t\t\t\t\t\t? nameStart + Math.round(stagger * Math.max(0, chars - 1)) + base\n\t\t\t\t\t\t: nameStart + base;\n\t\tconst tagStart = Math.max(nameStart, nameDone - Math.round(base * 0.4));\n\t\tconst revealed = Math.max(\n\t\t\thit,\n\t\t\tnameDone,\n\t\t\tprops.tagline ? tagStart + base : 0,\n\t\t);\n\t\tconst glintAt = revealed + Math.round(base * 0.3);\n\t\tconst glintFrames = Math.round(base * 1.8);\n\t\tconst glints = props.glint && props.name && !solid;\n\t\tconst end = glints ? glintAt + glintFrames : revealed;\n\n\t\tconst parts: Record<string, Animatable<LayoutNode>> = {};\n\t\tconst children: LayoutNode[] = [];\n\t\t// Drawn last: the name wipes out from behind it.\n\t\tlet markNode: LayoutNode | undefined;\n\n\t\t// ── Mark ─────────────────────────────────────────────────────────\n\t\tif (props.mark) {\n\t\t\tconst markColor = pathMark?.color ?? accent;\n\t\t\tconst markKids: LayoutNode[] = [];\n\t\t\tif (pathMark) {\n\t\t\t\tconst [vw, vh] = pathMark.viewBox;\n\t\t\t\tconst k = m / Math.max(vw, vh);\n\t\t\t\tconst d = transformPathData(\n\t\t\t\t\tpathMark.d,\n\t\t\t\t\tk,\n\t\t\t\t\t(m - vw * k) / 2,\n\t\t\t\t\t(m - vh * k) / 2,\n\t\t\t\t);\n\t\t\t\tconst fill = host.shape(\"path\", {\n\t\t\t\t\tid: ctx.partId(\"mark-fill\"),\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: m,\n\t\t\t\t\theight: m,\n\t\t\t\t\td,\n\t\t\t\t\tfillType: \"solid\",\n\t\t\t\t\tfillColor: markColor,\n\t\t\t\t});\n\t\t\t\tparts[\"mark-fill\"] = fill;\n\t\t\t\tif (style === \"draw\") {\n\t\t\t\t\tconst outline = host.shape(\"path\", {\n\t\t\t\t\t\tid: ctx.partId(\"mark-outline\"),\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: m,\n\t\t\t\t\t\theight: m,\n\t\t\t\t\t\td,\n\t\t\t\t\t\tfillType: \"none\",\n\t\t\t\t\t\tstrokeColor: markColor,\n\t\t\t\t\t\tstrokeWidth: Math.max(2, 3 * s),\n\t\t\t\t\t\tstrokeLineCap: \"round\",\n\t\t\t\t\t\tstrokeLineJoin: \"round\",\n\t\t\t\t\t});\n\t\t\t\t\toutline.animate(\n\t\t\t\t\t\tLayerAnimation.create()\n\t\t\t\t\t\t\t.keys(\"trimEnd\", drawOnKeys(0, drawFrames, \"power2.inOut\"))\n\t\t\t\t\t\t\t.keys(\"opacity\", [\n\t\t\t\t\t\t\t\t[drawFrames, 1],\n\t\t\t\t\t\t\t\t[drawFrames + base, 0, \"power2.out\"],\n\t\t\t\t\t\t\t]),\n\t\t\t\t\t);\n\t\t\t\t\tfill.animate(\n\t\t\t\t\t\tLayerAnimation.keys(\"opacity\", [\n\t\t\t\t\t\t\t[Math.round(drawFrames * 0.7), 0],\n\t\t\t\t\t\t\t[drawFrames, 1, \"power2.out\"],\n\t\t\t\t\t\t]),\n\t\t\t\t\t);\n\t\t\t\t\tmarkKids.push(fill, outline);\n\t\t\t\t\tparts[\"mark-outline\"] = outline;\n\t\t\t\t} else markKids.push(fill);\n\t\t\t} else {\n\t\t\t\tconst image = host.media(props.mark as string, {\n\t\t\t\t\tid: ctx.partId(\"mark-image\"),\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: m,\n\t\t\t\t\theight: m,\n\t\t\t\t\tfit: \"contain\",\n\t\t\t\t});\n\t\t\t\tmarkKids.push(image);\n\t\t\t\tparts[\"mark-image\"] = image;\n\t\t\t}\n\t\t\tconst centred = stack\n\t\t\t\t? { x: markAt.x, y: (H - m) / 2 }\n\t\t\t\t: { x: (W - m) / 2, y: markAt.y };\n\t\t\tconst slide = style === \"slide\" && !!props.name;\n\t\t\tconst mark = host.box({\n\t\t\t\tid: ctx.partId(\"mark\"),\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tx: slide ? centred.x : markAt.x,\n\t\t\t\ty: slide ? centred.y : markAt.y,\n\t\t\t\twidth: m,\n\t\t\t\theight: m,\n\t\t\t\tchildren: markKids,\n\t\t\t});\n\t\t\tconst anim = LayerAnimation.create();\n\t\t\tconst scale: KeyframeTuple[] = [];\n\t\t\tif (style === \"slide\" || style === \"pop\")\n\t\t\t\tscale.push(...(springKeys(0, 0, 1, fps, POP) as KeyframeTuple[]));\n\t\t\tif (glints) {\n\t\t\t\t// A small bump as the light passes.\n\t\t\t\tif (scale.length === 0) scale.push([0, 1]);\n\t\t\t\tscale.push(\n\t\t\t\t\t[glintAt, 1],\n\t\t\t\t\t[glintAt + Math.round(base * 0.4), 1.06, \"power2.out\"],\n\t\t\t\t\t[glintAt + Math.round(base * 1.2), 1, \"power2.inOut\"],\n\t\t\t\t);\n\t\t\t}\n\t\t\tif (scale.length > 0) anim.keys(\"scale\", scale);\n\t\t\tif (slide) {\n\t\t\t\tanim.keys(stack ? \"y\" : \"x\", [\n\t\t\t\t\t[glideAt, stack ? centred.y : centred.x],\n\t\t\t\t\t[glideAt + glide, stack ? markAt.y : markAt.x, ease],\n\t\t\t\t]);\n\t\t\t}\n\t\t\tif (style === \"rise\") {\n\t\t\t\tanim.keys(\"opacity\", [\n\t\t\t\t\t[0, 0],\n\t\t\t\t\t[Math.round(base * 0.6), 1, \"power2.out\"],\n\t\t\t\t]);\n\t\t\t}\n\t\t\tmark.animate(anim);\n\t\t\tparts.mark = mark;\n\t\t\tif (style === \"rise\") {\n\t\t\t\t// Rises through its own clip.\n\t\t\t\tmark.y = m;\n\t\t\t\tmark.x = 0;\n\t\t\t\tmark.animate(\n\t\t\t\t\tLayerAnimation.keys(\"y\", [\n\t\t\t\t\t\t[0, m],\n\t\t\t\t\t\t[base, 0, theme.motion.ease.enter],\n\t\t\t\t\t]),\n\t\t\t\t);\n\t\t\t\tconst clip = host.box({\n\t\t\t\t\tid: ctx.partId(\"mark-clip\"),\n\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\tx: markAt.x,\n\t\t\t\t\ty: markAt.y,\n\t\t\t\t\twidth: m,\n\t\t\t\t\theight: m,\n\t\t\t\t\toverflow: \"hidden\",\n\t\t\t\t\tchildren: [mark],\n\t\t\t\t});\n\t\t\t\tparts[\"mark-clip\"] = clip;\n\t\t\t\tmarkNode = clip;\n\t\t\t} else markNode = mark;\n\t\t}\n\n\t\t// ── Name ─────────────────────────────────────────────────────────\n\t\tif (props.name) {\n\t\t\tif (solid) {\n\t\t\t\tconst chrome = props.material === \"chrome\";\n\t\t\t\tconst name = host.extrudedText({\n\t\t\t\t\tid: ctx.partId(\"name\"),\n\t\t\t\t\ttext: props.name,\n\t\t\t\t\tx: nameAt.x + nameM.width / 2,\n\t\t\t\t\ty: nameAt.y + nameM.height / 2,\n\t\t\t\t\tdepth: props.depth,\n\t\t\t\t\tfontFamily,\n\t\t\t\t\tfontSize: ns,\n\t\t\t\t\tfontWeight: props.fontWeight,\n\t\t\t\t\tfill: chrome ? \"#e8ecf2\" : ink,\n\t\t\t\t\tbevelColor: chrome ? \"#9aa3ad\" : accent,\n\t\t\t\t\tmaterial: props.material === \"glass\" ? \"glass\" : \"lit\",\n\t\t\t\t\t...(chrome && { metallic: 1, roughness: 0.18, shininess: 96 }),\n\t\t\t\t});\n\t\t\t\tname.animate(\n\t\t\t\t\tLayerAnimation.create()\n\t\t\t\t\t\t.keys(\n\t\t\t\t\t\t\t\"rotateY\",\n\t\t\t\t\t\t\tspringKeys(nameStart, -70, 0, fps, SWING) as KeyframeTuple[],\n\t\t\t\t\t\t)\n\t\t\t\t\t\t.keys(\"opacity\", [\n\t\t\t\t\t\t\t[nameStart, 0],\n\t\t\t\t\t\t\t[nameStart + Math.round(base * 0.5), 1, \"power2.out\"],\n\t\t\t\t\t\t]),\n\t\t\t\t);\n\t\t\t\tparts.name = name;\n\t\t\t\tchildren.push(name);\n\t\t\t} else {\n\t\t\t\tconst animators =\n\t\t\t\t\tletters || glints\n\t\t\t\t\t\t? [\n\t\t\t\t\t\t\t\t...(letters\n\t\t\t\t\t\t\t\t\t? [\n\t\t\t\t\t\t\t\t\t\t\tglyphAnimator(\n\t\t\t\t\t\t\t\t\t\t\t\t\"rise\",\n\t\t\t\t\t\t\t\t\t\t\t\tscheduleExpression(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"char\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstarts: rendererChars(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tprops.name,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tArray.from({ length: chars }, (_, i) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tMath.round(i * stagger),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tduration: base,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tease: theme.motion.ease.enter,\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"enter\",\n\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\t{ y: ns * 0.35, opacity: 0 },\n\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t\t\t: []),\n\t\t\t\t\t\t\t\t...(glints\n\t\t\t\t\t\t\t\t\t? [\n\t\t\t\t\t\t\t\t\t\t\tglyphAnimator(\n\t\t\t\t\t\t\t\t\t\t\t\t\"glint\",\n\t\t\t\t\t\t\t\t\t\t\t\tglintExpression(\n\t\t\t\t\t\t\t\t\t\t\t\t\tprops.name,\n\t\t\t\t\t\t\t\t\t\t\t\t\tglintAt - nameStart,\n\t\t\t\t\t\t\t\t\t\t\t\t\tglintFrames,\n\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\t{ fillColor: \"#ffffff\" },\n\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t\t\t: []),\n\t\t\t\t\t\t\t]\n\t\t\t\t\t\t: undefined;\n\t\t\t\tconst wipe = style === \"slide\" && !!props.mark;\n\t\t\t\tconst text = host.text(props.name, {\n\t\t\t\t\tid: ctx.partId(\"name\"),\n\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\tx: wipe ? (stack ? 0 : -nameM.width - gap) : 0,\n\t\t\t\t\ty: wipe && stack ? -nameM.height : 0,\n\t\t\t\t\tfontFamily,\n\t\t\t\t\tfontSize: ns,\n\t\t\t\t\tfontWeight: props.fontWeight,\n\t\t\t\t\tfill: ink,\n\t\t\t\t\t...(animators && { animators: animators as never }),\n\t\t\t\t\tstartFrame: nameStart,\n\t\t\t\t});\n\t\t\t\tif (wipe)\n\t\t\t\t\ttext.animate(\n\t\t\t\t\t\tLayerAnimation.keys(stack ? \"y\" : \"x\", [\n\t\t\t\t\t\t\t[0, stack ? -nameM.height : -nameM.width - gap],\n\t\t\t\t\t\t\t[glide, 0, ease],\n\t\t\t\t\t\t]),\n\t\t\t\t\t);\n\t\t\t\telse if (style === \"rise\" || (!props.mark && style === \"slide\"))\n\t\t\t\t\ttext.animate(\n\t\t\t\t\t\tLayerAnimation.keys(\"y\", [\n\t\t\t\t\t\t\t[0, nameM.height],\n\t\t\t\t\t\t\t[base, 0, theme.motion.ease.enter],\n\t\t\t\t\t\t]),\n\t\t\t\t\t);\n\t\t\t\t// The name sits in a clip: it wipes out from behind the mark or rises.\n\t\t\t\tconst clip = host.box({\n\t\t\t\t\tid: ctx.partId(\"name-clip\"),\n\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\tx: nameAt.x,\n\t\t\t\t\ty: nameAt.y,\n\t\t\t\t\twidth: nameM.width,\n\t\t\t\t\theight: nameM.height,\n\t\t\t\t\t...(!letters && { overflow: \"hidden\" as const }),\n\t\t\t\t\tchildren: [text],\n\t\t\t\t});\n\t\t\t\tparts.name = text;\n\t\t\t\tparts[\"name-clip\"] = clip;\n\t\t\t\tchildren.push(clip);\n\t\t\t}\n\t\t}\n\n\t\t// ── Tagline ──────────────────────────────────────────────────────\n\t\tif (props.tagline) {\n\t\t\tconst tag = host.text(props.tagline, {\n\t\t\t\tid: ctx.partId(\"tagline\"),\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tx: tagAt.x,\n\t\t\t\ty: tagAt.y,\n\t\t\t\tfontFamily: theme.font.body,\n\t\t\t\tfontSize: tagSize,\n\t\t\t\tfill: theme.color.muted,\n\t\t\t});\n\t\t\ttag.animate(\n\t\t\t\tLayerAnimation.create()\n\t\t\t\t\t.keys(\"opacity\", [\n\t\t\t\t\t\t[tagStart, 0],\n\t\t\t\t\t\t[tagStart + base, 1, \"power2.out\"],\n\t\t\t\t\t])\n\t\t\t\t\t.keys(\"y\", [\n\t\t\t\t\t\t[tagStart, tagAt.y + 12 * s],\n\t\t\t\t\t\t[tagStart + base, tagAt.y, theme.motion.ease.enter],\n\t\t\t\t\t]),\n\t\t\t);\n\t\t\tparts.tagline = tag;\n\t\t\tchildren.push(tag);\n\t\t}\n\t\tif (markNode) children.push(markNode);\n\n\t\treturn {\n\t\t\tchildren,\n\t\t\twidth: W,\n\t\t\theight: H,\n\t\t\tduration: end,\n\t\t\topenEnded: true,\n\t\t\tcues: {\n\t\t\t\thit: props.mark ? [{ frame: hit }] : [],\n\t\t\t\trevealed: [{ frame: revealed }],\n\t\t\t\tglint: glints ? [{ frame: glintAt }] : [],\n\t\t\t} as LogoRevealCues,\n\t\t\tparts,\n\t\t};\n\t},\n});\n\n/**\n * A soft band of light crossing the name left to right: each character\n * peaks as the band passes its position (frame is the name's local frame).\n */\nfunction glintExpression(text: string, start: number, frames: number): string {\n\tconst n = Math.max(1, text.length - 1);\n\tconst peaks = rendererChars(\n\t\ttext,\n\t\tArray.from(\n\t\t\t{ length: text.length },\n\t\t\t(_, i) => Math.round((start + (i / n) * frames * 0.7) * 100) / 100,\n\t\t),\n\t);\n\tconst width = Math.max(2, frames * 0.18);\n\treturn `((P)=>{const d=abs(frame-(P[textIndex]??-999));return d<${width}?(1-d/${width})*0.85:0;})([${peaks.join(\",\")}])`;\n}\n\n/**\n * The end-card lockup: a mark and a wordmark arriving as one move, drawn on,\n * popped or wiped, with a glint across the name; names can be extruded in 3D.\n */\nexport const LogoReveal = /* @__PURE__ */ bindComponent(logoReveal);\n"
+		}
+	]
+}

package/dist/registry/lower-third.json

@@ -0,0 +1,34 @@
+{
+	"name": "lower-third",
+	"title": "LowerThird",
+	"summary": "The name-and-role bar of interviews and talks: measured plates in the safe area that slide in and leave on their own.",
+	"tags": [
+		"lower third",
+		"name",
+		"interview",
+		"talk",
+		"caption",
+		"broadcast"
+	],
+	"example": "LowerThird({ name: \"Ada Lovelace\", role: \"Engineer\" })",
+	"parts": [
+		"plate",
+		"edge",
+		"name-plate",
+		"role-plate",
+		"tag",
+		"line",
+		"text"
+	],
+	"cues": [
+		"in",
+		"out"
+	],
+	"registryDependencies": [],
+	"files": [
+		{
+			"path": "lower-third/index.ts",
+			"content": "/**\n * LowerThird: the name-and-role bar of interviews and talks. Plates are\n * measured to their text, placed in the safe area's bottom corner, slide in\n * through their own box, and leave on their own after `hold`.\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\ttype Rect,\n\tthemeFrames,\n\tz,\n} from \"framefields/components\";\n\nexport const LOWER_THIRD_LAYOUTS = [\"bar\", \"stacked\", \"tag\", \"line\"] as const;\nexport type LowerThirdLayout = (typeof LOWER_THIRD_LAYOUTS)[number];\n\nexport interface LowerThirdCues {\n\t[name: string]: ReadonlyArray<{ frame: number }>;\n\t/** Fully on screen. */\n\tin: ReadonlyArray<{ frame: number }>;\n\t/** Starts to leave (empty with `stay`). */\n\tout: ReadonlyArray<{ frame: number }>;\n}\n\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.1, width: W * 0.84, height: H * 0.66 }\n\t\t: { x: W * 0.06, y: H * 0.08, width: W * 0.88, height: H * 0.82 };\n}\n\nexport const lowerThird = /* @__PURE__ */ defineComponent({\n\tname: \"LowerThird\",\n\tprops: () => ({\n\t\tname: z.string().min(1),\n\t\trole: z.string().optional(),\n\t\tlayout: z.enum(LOWER_THIRD_LAYOUTS).default(\"bar\"),\n\t\tside: z.enum([\"left\", \"right\"]).default(\"left\"),\n\t\tsafeArea: z\n\t\t\t.union([\n\t\t\t\tz.enum([\"portrait\", \"landscape\"]),\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\t.optional(),\n\t\t/** Stay on screen instead of leaving after `hold`. */\n\t\tstay: z.boolean().default(false),\n\t\taccent: z.string().optional(),\n\t\tplate: z.string().optional(),\n\t\tnameSize: z.number().positive().optional(),\n\t\tfontFamily: z.string().optional(),\n\t}),\n\tdefaults: { enter: false, exit: false, hold: 90 },\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 safe = safeArea(W, H, props.safeArea);\n\t\tconst fontFamily = props.fontFamily ?? theme.font.display;\n\t\tconst nameSize = props.nameSize ?? 44 * s;\n\t\tconst roleSize = nameSize * 0.62;\n\t\tconst accent = props.accent ?? theme.color.accent;\n\t\tconst plateColor = props.plate ?? theme.color.surface;\n\t\tconst right = props.side === \"right\";\n\t\tconst base = themeFrames(theme, \"base\", fps);\n\t\tconst fast = themeFrames(theme, \"fast\", fps);\n\t\tconst enter = theme.motion.ease.enter;\n\n\t\tconst nameM = host.measure(props.name, {\n\t\t\tfontFamily,\n\t\t\tfontSize: nameSize,\n\t\t\tfontWeight: 700,\n\t\t});\n\t\tconst roleM = props.role\n\t\t\t? host.measure(props.role, {\n\t\t\t\t\tfontFamily,\n\t\t\t\t\tfontSize: roleSize,\n\t\t\t\t\tfontWeight: 500,\n\t\t\t\t})\n\t\t\t: null;\n\t\tconst padX = nameSize * 0.55;\n\t\tconst padY = nameSize * 0.36;\n\t\tconst children: LayoutNode[] = [];\n\t\tconst parts: Record<string, Animatable<LayoutNode>> = {};\n\t\t/** Keys per node and prop, merged into one track each at the end. */\n\t\tconst tracks = new Map<\n\t\t\tAnimatable<LayoutNode>,\n\t\t\tMap<string, KeyframeTuple[]>\n\t\t>();\n\t\tconst key = (\n\t\t\tnode: Animatable<LayoutNode>,\n\t\t\tprop: string,\n\t\t\tkeys: KeyframeTuple[],\n\t\t) => {\n\t\t\tconst byProp = tracks.get(node) ?? new Map<string, KeyframeTuple[]>();\n\t\t\ttracks.set(node, byProp);\n\t\t\tbyProp.set(prop, [...(byProp.get(prop) ?? []), ...keys]);\n\t\t};\n\n\t\tconst text = (\n\t\t\tid: string,\n\t\t\tcontent: string,\n\t\t\tsize: number,\n\t\t\tweight: number,\n\t\t\tfill: string,\n\t\t\tx: number,\n\t\t\ty: number,\n\t\t) =>\n\t\t\thost.text(content, {\n\t\t\t\tid: ctx.partId(id),\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tx,\n\t\t\t\ty,\n\t\t\t\tfontFamily,\n\t\t\t\tfontSize: size,\n\t\t\t\tfontWeight: weight,\n\t\t\t\tfill,\n\t\t\t});\n\n\t\t/**\n\t\t * A plate that slides in through its own box: the background travels\n\t\t * in from the side, its text rises a beat later. Returns the timing.\n\t\t */\n\t\tconst plate = (\n\t\t\tid: string,\n\t\t\trect: Rect,\n\t\t\tbackground: string,\n\t\t\tradius: number,\n\t\t\tcontent: Array<Animatable<LayoutNode>>,\n\t\t\tat: number,\n\t\t) => {\n\t\t\tconst fill = host.box({\n\t\t\t\tid: ctx.partId(`${id}-fill`),\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tx: 0,\n\t\t\t\ty: 0,\n\t\t\t\twidth: rect.width,\n\t\t\t\theight: rect.height,\n\t\t\t\tbackground,\n\t\t\t\tborderRadius: radius,\n\t\t\t});\n\t\t\tconst travel = rect.width * (right ? 1 : -1);\n\t\t\tconst slide = Math.round(base * 1.1);\n\t\t\tkey(fill, \"x\", [\n\t\t\t\t[at, travel],\n\t\t\t\t[at + slide, 0, enter],\n\t\t\t]);\n\t\t\tconst textAt = at + Math.round(fast * 0.7);\n\t\t\tfor (const node of content) {\n\t\t\t\tconst y0 = (node as unknown as { y: number }).y;\n\t\t\t\tkey(node, \"y\", [\n\t\t\t\t\t[textAt, y0 + rect.height * 0.5],\n\t\t\t\t\t[textAt + base, y0, enter],\n\t\t\t\t]);\n\t\t\t\tkey(node, \"opacity\", [\n\t\t\t\t\t[textAt, 0],\n\t\t\t\t\t[textAt + Math.round(base * 0.6), 1, \"power2.out\"],\n\t\t\t\t]);\n\t\t\t}\n\t\t\tconst clip = host.box({\n\t\t\t\tid: ctx.partId(id),\n\t\t\t\tposition: \"absolute\",\n\t\t\t\t...rect,\n\t\t\t\toverflow: \"hidden\",\n\t\t\t\tborderRadius: radius,\n\t\t\t\tchildren: [fill, ...content],\n\t\t\t});\n\t\t\tchildren.push(clip);\n\t\t\tparts[id] = clip;\n\t\t\treturn {\n\t\t\t\tclip,\n\t\t\t\tfill,\n\t\t\t\tcontent,\n\t\t\t\ttravel,\n\t\t\t\tsettled: Math.max(at + slide, textAt + base),\n\t\t\t};\n\t\t};\n\n\t\t// ── Layouts ───────────────────────────────────────────────────────\n\t\tconst bottom = safe.y + safe.height;\n\t\tconst xFor = (width: number) =>\n\t\t\tright ? safe.x + safe.width - width : safe.x;\n\t\tconst plates: Array<ReturnType<typeof plate>> = [];\n\t\tlet accentLine: Animatable<LayoutNode> | null = null;\n\t\tconst lineW = Math.max(3, nameSize * 0.09);\n\n\t\tswitch (props.layout) {\n\t\t\tcase \"bar\": {\n\t\t\t\tconst edge = Math.max(4, nameSize * 0.14);\n\t\t\t\tconst innerW = Math.max(nameM.width, roleM?.width ?? 0);\n\t\t\t\tconst h = padY * 2 + nameM.height + (roleM ? roleM.height * 0.95 : 0);\n\t\t\t\tconst w = innerW + padX * 2 + edge;\n\t\t\t\tconst rect = { x: xFor(w), y: bottom - h, width: w, height: h };\n\t\t\t\tconst tx = right ? padX : padX + edge;\n\t\t\t\tconst content = [\n\t\t\t\t\ttext(\"name\", props.name, nameSize, 700, theme.color.ink, tx, padY),\n\t\t\t\t];\n\t\t\t\tif (props.role && roleM)\n\t\t\t\t\tcontent.push(\n\t\t\t\t\t\ttext(\n\t\t\t\t\t\t\t\"role\",\n\t\t\t\t\t\t\tprops.role,\n\t\t\t\t\t\t\troleSize,\n\t\t\t\t\t\t\t500,\n\t\t\t\t\t\t\ttheme.color.muted,\n\t\t\t\t\t\t\ttx,\n\t\t\t\t\t\t\tpadY + nameM.height * 0.95,\n\t\t\t\t\t\t),\n\t\t\t\t\t);\n\t\t\t\tconst p = plate(\"plate\", rect, plateColor, theme.radius.sm, content, 0);\n\t\t\t\tconst strip = host.box({\n\t\t\t\t\tid: ctx.partId(\"edge\"),\n\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\tx: right ? rect.x + rect.width - edge : rect.x,\n\t\t\t\t\ty: rect.y + rect.height,\n\t\t\t\t\twidth: edge,\n\t\t\t\t\theight: 0,\n\t\t\t\t\tbackground: accent,\n\t\t\t\t\tborderRadius: theme.radius.sm,\n\t\t\t\t});\n\t\t\t\tconst grow = Math.round(base * 0.8);\n\t\t\t\tkey(strip, \"height\", [\n\t\t\t\t\t[0, 0],\n\t\t\t\t\t[grow, rect.height, enter],\n\t\t\t\t]);\n\t\t\t\tkey(strip, \"y\", [\n\t\t\t\t\t[0, rect.y + rect.height],\n\t\t\t\t\t[grow, rect.y, enter],\n\t\t\t\t]);\n\t\t\t\tchildren.push(strip);\n\t\t\t\tparts.edge = strip;\n\t\t\t\tplates.push(p);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"stacked\": {\n\t\t\t\tconst nameW = nameM.width + padX * 2;\n\t\t\t\tconst nameH = nameM.height + padY * 2;\n\t\t\t\tconst roleH = roleM ? roleM.height + padY * 1.2 : 0;\n\t\t\t\tconst roleW = roleM ? roleM.width + padX * 1.6 : 0;\n\t\t\t\tconst inset = nameSize * 0.4;\n\t\t\t\tconst total = nameH + (roleM ? roleH * 0.9 : 0);\n\t\t\t\tconst top = bottom - total;\n\t\t\t\tplates.push(\n\t\t\t\t\tplate(\n\t\t\t\t\t\t\"name-plate\",\n\t\t\t\t\t\t{ x: xFor(nameW), y: top, width: nameW, height: nameH },\n\t\t\t\t\t\tplateColor,\n\t\t\t\t\t\ttheme.radius.sm,\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\ttext(\n\t\t\t\t\t\t\t\t\"name\",\n\t\t\t\t\t\t\t\tprops.name,\n\t\t\t\t\t\t\t\tnameSize,\n\t\t\t\t\t\t\t\t700,\n\t\t\t\t\t\t\t\ttheme.color.ink,\n\t\t\t\t\t\t\t\tpadX,\n\t\t\t\t\t\t\t\tpadY,\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t],\n\t\t\t\t\t\t0,\n\t\t\t\t\t),\n\t\t\t\t);\n\t\t\t\tif (props.role && roleM)\n\t\t\t\t\tplates.push(\n\t\t\t\t\t\tplate(\n\t\t\t\t\t\t\t\"role-plate\",\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tx: right ? xFor(roleW) - inset : xFor(roleW) + inset,\n\t\t\t\t\t\t\t\ty: top + nameH - roleH * 0.1,\n\t\t\t\t\t\t\t\twidth: roleW,\n\t\t\t\t\t\t\t\theight: roleH,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\taccent,\n\t\t\t\t\t\t\ttheme.radius.sm,\n\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\ttext(\n\t\t\t\t\t\t\t\t\t\"role\",\n\t\t\t\t\t\t\t\t\tprops.role,\n\t\t\t\t\t\t\t\t\troleSize,\n\t\t\t\t\t\t\t\t\t600,\n\t\t\t\t\t\t\t\t\ttheme.color.bg,\n\t\t\t\t\t\t\t\t\tpadX * 0.8,\n\t\t\t\t\t\t\t\t\tpadY * 0.6,\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\tMath.round(fast * 0.8),\n\t\t\t\t\t\t),\n\t\t\t\t\t);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"tag\": {\n\t\t\t\t// One line, one node: bold name, a dot, the role a size down.\n\t\t\t\tconst sep = \"  ·  \";\n\t\t\t\tconst sepW = props.role\n\t\t\t\t\t? host.measure(sep, { fontFamily, fontSize: roleSize }).width\n\t\t\t\t\t: 0;\n\t\t\t\tconst h = nameM.height + padY * 1.4;\n\t\t\t\tconst w = nameM.width + (roleM ? sepW + roleM.width : 0) + h;\n\t\t\t\tconst line = host.text(\n\t\t\t\t\tprops.role ? `${props.name}${sep}${props.role}` : props.name,\n\t\t\t\t\t{\n\t\t\t\t\t\tid: ctx.partId(\"name\"),\n\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\tx: h / 2,\n\t\t\t\t\t\ty: padY * 0.7,\n\t\t\t\t\t\tfontFamily,\n\t\t\t\t\t\tfontSize: nameSize,\n\t\t\t\t\t\tfill: theme.color.ink,\n\t\t\t\t\t\tspans: [\n\t\t\t\t\t\t\t{ text: props.name, fontWeight: 700, fill: theme.color.ink },\n\t\t\t\t\t\t\t...(props.role\n\t\t\t\t\t\t\t\t? [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\ttext: `${sep}${props.role}`,\n\t\t\t\t\t\t\t\t\t\t\tfontSize: roleSize,\n\t\t\t\t\t\t\t\t\t\t\tfontWeight: 500,\n\t\t\t\t\t\t\t\t\t\t\tfill: theme.color.muted,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t]\n\t\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\tplates.push(\n\t\t\t\t\tplate(\n\t\t\t\t\t\t\"tag\",\n\t\t\t\t\t\t{ x: xFor(w), y: bottom - h, width: w, height: h },\n\t\t\t\t\t\tplateColor,\n\t\t\t\t\t\ttheme.radius.pill,\n\t\t\t\t\t\t[line],\n\t\t\t\t\t\t0,\n\t\t\t\t\t),\n\t\t\t\t);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"line\": {\n\t\t\t\tconst innerW = Math.max(nameM.width, roleM?.width ?? 0);\n\t\t\t\tconst h = nameM.height + (roleM ? roleM.height : 0);\n\t\t\t\tconst gap = nameSize * 0.4;\n\t\t\t\tconst w = innerW + gap + lineW;\n\t\t\t\tconst x = xFor(w);\n\t\t\t\tconst lineX = right ? x + w - lineW : x;\n\t\t\t\tconst tx = right ? 0 : lineW + gap;\n\t\t\t\taccentLine = host.box({\n\t\t\t\t\tid: ctx.partId(\"line\"),\n\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\tx: lineX,\n\t\t\t\t\ty: bottom,\n\t\t\t\t\twidth: lineW,\n\t\t\t\t\theight: 0,\n\t\t\t\t\tbackground: accent,\n\t\t\t\t\tborderRadius: lineW / 2,\n\t\t\t\t});\n\t\t\t\tconst grow = Math.round(base * 1.1);\n\t\t\t\tkey(accentLine, \"height\", [\n\t\t\t\t\t[0, 0],\n\t\t\t\t\t[grow, h, enter],\n\t\t\t\t]);\n\t\t\t\tkey(accentLine, \"y\", [\n\t\t\t\t\t[0, bottom],\n\t\t\t\t\t[grow, bottom - h, enter],\n\t\t\t\t]);\n\t\t\t\tchildren.push(accentLine);\n\t\t\t\tparts.line = accentLine;\n\t\t\t\tconst content = [\n\t\t\t\t\ttext(\"name\", props.name, nameSize, 700, theme.color.ink, tx, 0),\n\t\t\t\t];\n\t\t\t\tif (props.role && roleM)\n\t\t\t\t\tcontent.push(\n\t\t\t\t\t\ttext(\n\t\t\t\t\t\t\t\"role\",\n\t\t\t\t\t\t\tprops.role,\n\t\t\t\t\t\t\troleSize,\n\t\t\t\t\t\t\t500,\n\t\t\t\t\t\t\ttheme.color.muted,\n\t\t\t\t\t\t\ttx,\n\t\t\t\t\t\t\tnameM.height,\n\t\t\t\t\t\t),\n\t\t\t\t\t);\n\t\t\t\t// No plate: the text rises through a clear box.\n\t\t\t\tplates.push(\n\t\t\t\t\tplate(\n\t\t\t\t\t\t\"text\",\n\t\t\t\t\t\t{ x, y: bottom - h, width: w, height: h },\n\t\t\t\t\t\t\"rgba(0,0,0,0)\",\n\t\t\t\t\t\t0,\n\t\t\t\t\t\tcontent,\n\t\t\t\t\t\tMath.round(fast * 0.6),\n\t\t\t\t\t),\n\t\t\t\t);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\tconst settled = Math.max(...plates.map((p) => p.settled));\n\t\t// ── Out: text first, then the plates slide back the way they came ──\n\t\tlet afterHold = 0;\n\t\tconst outAt = settled + ctx.hold;\n\t\tif (!props.stay) {\n\t\t\tconst fadeOut = Math.round(fast * 0.9);\n\t\t\tconst slide = Math.round(base * 0.9);\n\t\t\tplates.forEach((p, k) => {\n\t\t\t\tconst at = outAt + k * Math.round(fast * 0.4);\n\t\t\t\tfor (const node of p.content)\n\t\t\t\t\tkey(node, \"opacity\", [\n\t\t\t\t\t\t[at, 1],\n\t\t\t\t\t\t[at + fadeOut, 0, \"power2.in\"],\n\t\t\t\t\t]);\n\t\t\t\tkey(p.fill, \"x\", [\n\t\t\t\t\t[at + fadeOut - 2, 0],\n\t\t\t\t\t[at + fadeOut - 2 + slide, p.travel, theme.motion.ease.exit],\n\t\t\t\t]);\n\t\t\t\tafterHold = Math.max(afterHold, at + fadeOut - 2 + slide - outAt);\n\t\t\t});\n\t\t\tfor (const node of [accentLine, parts.edge])\n\t\t\t\tif (node)\n\t\t\t\t\tkey(node, \"opacity\", [\n\t\t\t\t\t\t[outAt, 1],\n\t\t\t\t\t\t[outAt + afterHold, 0, \"power2.in\"],\n\t\t\t\t\t]);\n\t\t}\n\t\tfor (const [node, byProp] of tracks) {\n\t\t\tconst a = LayerAnimation.create();\n\t\t\tfor (const [prop, keys] of byProp)\n\t\t\t\ta.keys(\n\t\t\t\t\tprop as \"x\",\n\t\t\t\t\t[...keys].sort((x, y) => x[0] - y[0]),\n\t\t\t\t);\n\t\t\tnode.animate(a);\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: settled,\n\t\t\topenEnded: props.stay,\n\t\t\tafterHold,\n\t\t\torigin: [0, 0],\n\t\t\tcues: {\n\t\t\t\tin: [{ frame: settled }],\n\t\t\t\tout: props.stay ? [] : [{ frame: outAt }],\n\t\t\t} as LowerThirdCues,\n\t\t\tparts,\n\t\t};\n\t},\n});\n\n/**\n * The name-and-role bar of interviews and talks: measured plates in the safe\n * area that slide in and leave on their own.\n */\nexport const LowerThird = /* @__PURE__ */ bindComponent(lowerThird);\n"
+		}
+	]
+}

package/dist/registry/meter.json

@@ -0,0 +1,35 @@
+{
+	"name": "meter",
+	"title": "Meter",
+	"summary": "Progress and scores as a ring, arc gauge, bar, lit segments or star rating, filling on the same timeline as its counter.",
+	"tags": [
+		"progress",
+		"gauge",
+		"score",
+		"rating",
+		"stat",
+		"data"
+	],
+	"example": "Meter({ value: 72, kind: \"ring\", label: \"Coverage\" })",
+	"parts": [
+		"track",
+		"fill",
+		"counter",
+		"label",
+		"cell-<n>",
+		"star-<n>"
+	],
+	"cues": [
+		"settled",
+		"crossings"
+	],
+	"registryDependencies": [
+		"counter"
+	],
+	"files": [
+		{
+			"path": "meter/index.ts",
+			"content": "/**\n * Meter: progress and scores as a ring, an arc gauge, a bar, lit segments or\n * a star rating, filling on the same value timeline as its `Counter`.\n */\nimport {\n\ttype KeyframeTuple,\n\tLayerAnimation,\n\ttype LayoutNode,\n} from \"framefields\";\nimport {\n\ttype Animatable,\n\tbakeSamples,\n\tbind,\n\tbindComponent,\n\tdefineComponent,\n\tthemeFrames,\n\ttoPathData,\n\ttype Vec2,\n\tz,\n} from \"framefields/components\";\nimport { counter } from \"../counter/index.js\";\nimport { type ValueKey, valueAt } from \"../counter/plan.js\";\n\nexport const METER_KINDS = [\"ring\", \"arc\", \"bar\", \"segments\", \"stars\"] as const;\nexport type MeterKind = (typeof METER_KINDS)[number];\n\nexport interface MeterCues {\n\t[name: string]: ReadonlyArray<{ frame: number }>;\n\t/** The fill (and counter) is at rest. */\n\tsettled: ReadonlyArray<{ frame: number }>;\n\t/** Each segment or star completing (fills only; empties are not cued). */\n\tcrossings: ReadonlyArray<{ frame: number; segment: number }>;\n}\n\n/** Points along a circular arc, angles in degrees (0 = right, clockwise). */\nfunction arcPoints(c: Vec2, r: number, from: number, to: number): Vec2[] {\n\tconst steps = Math.max(8, Math.ceil(Math.abs(to - from) / 6));\n\treturn Array.from({ length: steps + 1 }, (_, k) => {\n\t\tconst a = ((from + ((to - from) * k) / steps) * Math.PI) / 180;\n\t\treturn [c[0] + Math.cos(a) * r, c[1] + Math.sin(a) * r] as Vec2;\n\t});\n}\n\n/** A five-point star inside a `size` box. */\nfunction starPath(size: number): string {\n\tconst c = size / 2;\n\tconst pts: Vec2[] = Array.from({ length: 10 }, (_, k) => {\n\t\tconst r = k % 2 === 0 ? size * 0.5 : size * 0.21;\n\t\tconst a = -Math.PI / 2 + (k * Math.PI) / 5;\n\t\treturn [c + Math.cos(a) * r, c + Math.sin(a) * r * 1.02 + size * 0.03];\n\t});\n\treturn toPathData(pts, true);\n}\n\nexport const meter = /* @__PURE__ */ defineComponent({\n\tname: \"Meter\",\n\tprops: () => ({\n\t\tvalue: z.number().optional(),\n\t\t/** Multi-step values: `[frame, value, ease?]`, frames ascending. */\n\t\tvalues: z\n\t\t\t.array(\n\t\t\t\tz.union([\n\t\t\t\t\tz.tuple([z.number().int().min(0), z.number()]),\n\t\t\t\t\tz.tuple([z.number().int().min(0), z.number(), z.string()]),\n\t\t\t\t]),\n\t\t\t)\n\t\t\t.min(1)\n\t\t\t.optional(),\n\t\tfrom: z.number().default(0),\n\t\t/** Default 100 (5 for stars). */\n\t\tmax: z.number().optional(),\n\t\tkind: z.enum(METER_KINDS).default(\"ring\"),\n\t\t/** Cells for `segments` (default 10), stars for `stars` (default `max`). */\n\t\tsegments: z.number().int().positive().optional(),\n\t\t/** Width (bar, segments, stars) or diameter (ring, arc). */\n\t\tsize: z.number().positive().optional(),\n\t\tthickness: z.number().positive().optional(),\n\t\tcounter: z.boolean().optional(),\n\t\tformat: z.string().default(\",d\"),\n\t\tsuffix: z.string().optional(),\n\t\tlabel: z.string().optional(),\n\t\tcolor: z.string().optional(),\n\t\ttrack: z.string().optional(),\n\t\tcountDuration: z.number().int().positive().optional(),\n\t\tease: z.string().optional(),\n\t\tfontFamily: 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 s = theme.scale;\n\t\tconst kind = props.kind;\n\t\tconst max = props.max ?? (kind === \"stars\" ? 5 : 100);\n\t\tconst from = props.from;\n\t\tconst ease = props.ease ?? theme.motion.ease.move;\n\t\tconst color = props.color ?? theme.color.accent;\n\t\tconst trackColor = props.track ?? theme.color.line;\n\t\tconst fontFamily = props.fontFamily ?? theme.font.display;\n\t\tif (props.value === undefined && !props.values)\n\t\t\tthrow new Error(\"Meter: give `value` (or `values`).\");\n\t\tconst keys: ValueKey[] = props.values\n\t\t\t? props.values.map((v) => [...v] as unknown as ValueKey)\n\t\t\t: [\n\t\t\t\t\t[0, from],\n\t\t\t\t\t[\n\t\t\t\t\t\tprops.countDuration ?? themeFrames(theme, \"slow\", fps) * 2,\n\t\t\t\t\t\tprops.value as number,\n\t\t\t\t\t\tease,\n\t\t\t\t\t],\n\t\t\t\t];\n\t\tconst last = (keys[keys.length - 1] as ValueKey)[0];\n\t\tconst fraction = (v: number) =>\n\t\t\tMath.max(0, Math.min(1, (v - from) / (max - from || 1)));\n\t\t/** Keys of `f(fraction)`, on exactly the value's keyframes and eases. */\n\t\tconst fillKeys = (f: (x: number) => number): KeyframeTuple[] =>\n\t\t\tkeys.map((k, i) =>\n\t\t\t\ti === 0\n\t\t\t\t\t? [k[0], f(fraction(k[1]))]\n\t\t\t\t\t: [k[0], f(fraction(k[1])), k[2] ?? ease],\n\t\t\t);\n\t\tconst perFrame = Array.from({ length: last + 1 }, (_, t) =>\n\t\t\tvalueAt(keys, t, ease),\n\t\t);\n\n\t\tconst showCounter = props.counter ?? kind !== \"stars\";\n\t\tconst suffix = props.suffix ?? (max === 100 ? \"%\" : \"\");\n\t\tconst makeCounter = bind(host, counter);\n\t\tconst number = (size: number, align: \"start\" | \"center\" | \"end\") =>\n\t\t\tmakeCounter({\n\t\t\t\tid: ctx.partId(\"counter\"),\n\t\t\t\tvalues: keys.map((k) => [...k]) as never,\n\t\t\t\tformat: props.format,\n\t\t\t\tsuffix,\n\t\t\t\taffixScale: 0.6,\n\t\t\t\tdigitStagger: 0,\n\t\t\t\tease,\n\t\t\t\tfontFamily,\n\t\t\t\tfontSize: size,\n\t\t\t\tfontWeight: 700,\n\t\t\t\talign,\n\t\t\t\tx: 0,\n\t\t\t\ty: 0,\n\t\t\t\ttheme,\n\t\t\t\tfps,\n\t\t\t});\n\t\tconst label = (text: string, size: number) =>\n\t\t\thost.text(text, {\n\t\t\t\tid: ctx.partId(\"label\"),\n\t\t\t\tposition: \"absolute\",\n\t\t\t\tfontFamily,\n\t\t\t\tfontSize: size,\n\t\t\t\tfill: theme.color.muted,\n\t\t\t});\n\n\t\tconst children: LayoutNode[] = [];\n\t\tconst parts: Record<string, Animatable<LayoutNode>> = {};\n\t\tconst crossings: Array<{ frame: number; segment: number }> = [];\n\t\tlet W = 0;\n\t\tlet H = 0;\n\n\t\tconst stroke = (\n\t\t\tid: string,\n\t\t\td: string,\n\t\t\tw: number,\n\t\t\th: number,\n\t\t\tpaint: string,\n\t\t\tthickness: number,\n\t\t) =>\n\t\t\thost.shape(\"path\", {\n\t\t\t\tid: ctx.partId(id),\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\td,\n\t\t\t\tfillType: \"none\",\n\t\t\t\tstrokeColor: paint,\n\t\t\t\tstrokeWidth: thickness,\n\t\t\t\tstrokeLineCap: \"round\",\n\t\t\t});\n\n\t\tswitch (kind) {\n\t\t\tcase \"ring\":\n\t\t\tcase \"arc\": {\n\t\t\t\tconst D = props.size ?? 260 * s;\n\t\t\t\tconst T = props.thickness ?? D * (kind === \"ring\" ? 0.085 : 0.1);\n\t\t\t\tconst r = (D - T) / 2;\n\t\t\t\tconst c: Vec2 = [D / 2, D / 2];\n\t\t\t\t// Ring: a full turn from the top. Arc: 240° from lower left, over the top.\n\t\t\t\tconst [a0, a1] = kind === \"ring\" ? [-90, 269.9] : [150, 390];\n\t\t\t\tconst path = toPathData(arcPoints(c, r, a0, a1));\n\t\t\t\tW = D;\n\t\t\t\tH = kind === \"ring\" ? D : D * 0.86;\n\t\t\t\tconst track = stroke(\"track\", path, W, H, trackColor, T);\n\t\t\t\tconst fill = stroke(\"fill\", path, W, H, color, T);\n\t\t\t\tfill.animate(\n\t\t\t\t\tLayerAnimation.keys(\n\t\t\t\t\t\t\"trimEnd\",\n\t\t\t\t\t\tfillKeys((x) => x),\n\t\t\t\t\t),\n\t\t\t\t);\n\t\t\t\tchildren.push(track, fill);\n\t\t\t\tparts.track = track;\n\t\t\t\tparts.fill = fill;\n\t\t\t\tif (showCounter) {\n\t\t\t\t\tconst n = number(D * (kind === \"ring\" ? 0.24 : 0.22), \"center\");\n\t\t\t\t\tconst nn = n as unknown as {\n\t\t\t\t\t\tx: number;\n\t\t\t\t\t\ty: number;\n\t\t\t\t\t\twidth: number;\n\t\t\t\t\t\theight: number;\n\t\t\t\t\t};\n\t\t\t\t\tnn.x = (W - nn.width) / 2;\n\t\t\t\t\tnn.y =\n\t\t\t\t\t\t(kind === \"ring\" ? D / 2 : D * 0.48) -\n\t\t\t\t\t\tnn.height / 2 -\n\t\t\t\t\t\t(props.label ? D * 0.04 : 0);\n\t\t\t\t\tchildren.push(n);\n\t\t\t\t\tparts.counter = n;\n\t\t\t\t\tif (props.label) {\n\t\t\t\t\t\tconst size = D * 0.075;\n\t\t\t\t\t\tconst m = host.measure(props.label, { fontFamily, fontSize: size });\n\t\t\t\t\t\tconst l = label(props.label, size);\n\t\t\t\t\t\tObject.assign(l, { x: (W - m.width) / 2, y: nn.y + nn.height });\n\t\t\t\t\t\tchildren.push(l);\n\t\t\t\t\t\tparts.label = l;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"bar\": {\n\t\t\t\tconst w = props.size ?? 640 * s;\n\t\t\t\tconst T = props.thickness ?? 16 * s;\n\t\t\t\tconst top = props.label ? 34 * s : 0;\n\t\t\t\tconst track = host.box({\n\t\t\t\t\tid: ctx.partId(\"track\"),\n\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\tx: 0,\n\t\t\t\t\ty: top,\n\t\t\t\t\twidth: w,\n\t\t\t\t\theight: T,\n\t\t\t\t\tbackground: trackColor,\n\t\t\t\t\tborderRadius: T / 2,\n\t\t\t\t});\n\t\t\t\tconst fill = host.box({\n\t\t\t\t\tid: ctx.partId(\"fill\"),\n\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\tx: 0,\n\t\t\t\t\ty: top,\n\t\t\t\t\twidth: 0,\n\t\t\t\t\theight: T,\n\t\t\t\t\tbackground: color,\n\t\t\t\t\tborderRadius: T / 2,\n\t\t\t\t});\n\t\t\t\tfill.animate(\n\t\t\t\t\tLayerAnimation.keys(\n\t\t\t\t\t\t\"width\",\n\t\t\t\t\t\tfillKeys((x) => x * w),\n\t\t\t\t\t),\n\t\t\t\t);\n\t\t\t\tchildren.push(track, fill);\n\t\t\t\tparts.track = track;\n\t\t\t\tparts.fill = fill;\n\t\t\t\tW = w;\n\t\t\t\tH = top + T;\n\t\t\t\tif (props.label) {\n\t\t\t\t\tconst l = label(props.label, 24 * s);\n\t\t\t\t\tObject.assign(l, { x: 0, y: 0 });\n\t\t\t\t\tchildren.push(l);\n\t\t\t\t\tparts.label = l;\n\t\t\t\t}\n\t\t\t\tif (showCounter) {\n\t\t\t\t\tconst n = number(Math.max(T * 2.2, 30 * s), \"end\");\n\t\t\t\t\tconst nn = n as unknown as {\n\t\t\t\t\t\tx: number;\n\t\t\t\t\t\ty: number;\n\t\t\t\t\t\twidth: number;\n\t\t\t\t\t\theight: number;\n\t\t\t\t\t};\n\t\t\t\t\tnn.x = w + 18 * s;\n\t\t\t\t\tnn.y = top + T / 2 - nn.height / 2;\n\t\t\t\t\tW = nn.x + nn.width;\n\t\t\t\t\tH = Math.max(H, nn.y + nn.height);\n\t\t\t\t\tchildren.push(n);\n\t\t\t\t\tparts.counter = n;\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"segments\":\n\t\t\tcase \"stars\": {\n\t\t\t\tconst n = props.segments ?? (kind === \"stars\" ? Math.round(max) : 10);\n\t\t\t\tconst w = props.size ?? (kind === \"stars\" ? 300 : 640) * s;\n\t\t\t\tconst gap = kind === \"stars\" ? w * 0.03 : w * 0.012;\n\t\t\t\tconst cell = (w - gap * (n - 1)) / n;\n\t\t\t\tconst h = kind === \"stars\" ? cell : (props.thickness ?? 22 * s);\n\t\t\t\t// How full each cell is, per frame.\n\t\t\t\tconst fill = (k: number) =>\n\t\t\t\t\tperFrame.map((v) => Math.max(0, Math.min(1, fraction(v) * n - k)));\n\t\t\t\tfor (let k = 0; k < n; k++) {\n\t\t\t\t\tconst x = k * (cell + gap);\n\t\t\t\t\tconst amount = fill(k);\n\t\t\t\t\tconst full = amount.findIndex((a) => a >= 1);\n\t\t\t\t\tif (full >= 0) crossings.push({ frame: full, segment: k });\n\t\t\t\t\tif (kind === \"segments\") {\n\t\t\t\t\t\tconst base = host.box({\n\t\t\t\t\t\t\tid: ctx.partId(`cell-${k}`),\n\t\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\t\tx,\n\t\t\t\t\t\t\ty: 0,\n\t\t\t\t\t\t\twidth: cell,\n\t\t\t\t\t\t\theight: h,\n\t\t\t\t\t\t\tbackground: trackColor,\n\t\t\t\t\t\t\tborderRadius: Math.min(h, cell) * 0.25,\n\t\t\t\t\t\t});\n\t\t\t\t\t\tconst lit = host.box({\n\t\t\t\t\t\t\tid: ctx.partId(`lit-${k}`),\n\t\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\t\tx,\n\t\t\t\t\t\t\ty: 0,\n\t\t\t\t\t\t\twidth: cell,\n\t\t\t\t\t\t\theight: h,\n\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\tborderRadius: Math.min(h, cell) * 0.25,\n\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t});\n\t\t\t\t\t\t// Lights on the frame the value reaches the cell, with a small pop.\n\t\t\t\t\t\tconst on = amount.map((a) => (a >= 1 ? 1 : 0));\n\t\t\t\t\t\tconst opacity: KeyframeTuple[] = [[0, on[0] ?? 0]];\n\t\t\t\t\t\tconst scale: KeyframeTuple[] = [[0, 1]];\n\t\t\t\t\t\ton.forEach((v, t) => {\n\t\t\t\t\t\t\tif (t > 0 && v !== on[t - 1]) {\n\t\t\t\t\t\t\t\topacity.push([t, v, \"hold\"]);\n\t\t\t\t\t\t\t\tif (v === 1) scale.push([t, 1.18], [t + 6, 1, \"power2.out\"]);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\n\t\t\t\t\t\tlit.animate(\n\t\t\t\t\t\t\tLayerAnimation.create()\n\t\t\t\t\t\t\t\t.keys(\"opacity\", opacity)\n\t\t\t\t\t\t\t\t.keys(\"scale\", ascending(scale)),\n\t\t\t\t\t\t);\n\t\t\t\t\t\tchildren.push(base, lit);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tconst d = starPath(cell);\n\t\t\t\t\t\tconst base = host.shape(\"path\", {\n\t\t\t\t\t\t\tid: ctx.partId(`star-${k}`),\n\t\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\t\tx,\n\t\t\t\t\t\t\ty: 0,\n\t\t\t\t\t\t\twidth: cell,\n\t\t\t\t\t\t\theight: cell,\n\t\t\t\t\t\t\td,\n\t\t\t\t\t\t\tfillType: \"solid\",\n\t\t\t\t\t\t\tfillColor: trackColor,\n\t\t\t\t\t\t});\n\t\t\t\t\t\tconst star = host.shape(\"path\", {\n\t\t\t\t\t\t\tid: ctx.partId(`star-${k}-fill`),\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: cell,\n\t\t\t\t\t\t\theight: cell,\n\t\t\t\t\t\t\td,\n\t\t\t\t\t\t\tfillType: \"solid\",\n\t\t\t\t\t\t\tfillColor: color,\n\t\t\t\t\t\t});\n\t\t\t\t\t\t// Fractional ratings fill a star partway: a clip that widens.\n\t\t\t\t\t\tconst clip = host.box({\n\t\t\t\t\t\t\tid: ctx.partId(`star-${k}-clip`),\n\t\t\t\t\t\t\tposition: \"absolute\",\n\t\t\t\t\t\t\tx,\n\t\t\t\t\t\t\ty: 0,\n\t\t\t\t\t\t\twidth: 0,\n\t\t\t\t\t\t\theight: cell,\n\t\t\t\t\t\t\toverflow: \"hidden\",\n\t\t\t\t\t\t\tchildren: [star],\n\t\t\t\t\t\t});\n\t\t\t\t\t\tclip.animate(\n\t\t\t\t\t\t\tLayerAnimation.keys(\n\t\t\t\t\t\t\t\t\"width\",\n\t\t\t\t\t\t\t\tbakeSamples(\n\t\t\t\t\t\t\t\t\tamount.map((a) => a * cell),\n\t\t\t\t\t\t\t\t\t0,\n\t\t\t\t\t\t\t\t\t{ tolerance: 0.2 },\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\t\tchildren.push(base, clip);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tW = w;\n\t\t\t\tH = h;\n\t\t\t\tif (showCounter) {\n\t\t\t\t\tconst c = number(Math.max(h * 1.4, 30 * s), \"end\");\n\t\t\t\t\tconst cc = c as unknown as {\n\t\t\t\t\t\tx: number;\n\t\t\t\t\t\ty: number;\n\t\t\t\t\t\twidth: number;\n\t\t\t\t\t\theight: number;\n\t\t\t\t\t};\n\t\t\t\t\tcc.x = w + 18 * s;\n\t\t\t\t\tcc.y = h / 2 - cc.height / 2;\n\t\t\t\t\tW = cc.x + cc.width;\n\t\t\t\t\tH = Math.max(H, cc.y + cc.height);\n\t\t\t\t\tchildren.push(c);\n\t\t\t\t\tparts.counter = c;\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\tconst settled = Math.max(\n\t\t\tlast,\n\t\t\t(\n\t\t\t\tparts.counter as unknown as {\n\t\t\t\t\tcues?: { settled: Array<{ frame: number }> };\n\t\t\t\t}\n\t\t\t)?.cues?.settled[0]?.frame ?? 0,\n\t\t);\n\t\treturn {\n\t\t\tchildren,\n\t\t\twidth: W,\n\t\t\theight: H,\n\t\t\tduration: settled + 1,\n\t\t\topenEnded: true,\n\t\t\tcues: { settled: [{ frame: settled }], crossings } as MeterCues,\n\t\t\tparts,\n\t\t};\n\t},\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 * Progress and scores as a ring, arc gauge, bar, lit segments or star rating,\n * filling on the same timeline as its counter.\n */\nexport const Meter = /* @__PURE__ */ bindComponent(meter);\n"
+		}
+	]
+}