@clipkit/patterns 1.0.0

package/dist/morph-shape.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"morph-shape.js","sourceRoot":"","sources":["../src/morph-shape.ts"],"names":[],"mappings":"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"}

package/dist/pie-card.d.ts

@@ -0,0 +1,35 @@
+import type { Element } from '@clipkit/protocol';
+import { type ColorName, type ThemeName } from './theme.js';
+export interface PieCardProps {
+    id: string;
+    /** Raw value backing the percentage + count display. */
+    value: number;
+    /** Total used to compute the displayed percentage. */
+    total: number;
+    /** Previous-period value. If set, a trend pill is rendered. */
+    previous?: number;
+    /** Bottom label (e.g. "Chrome"). */
+    label: string;
+    /**
+     * Optional logo image URL. If supplied, an image element is layered
+     * over the white logo background. The image is sized 100 × 100.
+     */
+    logoUrl?: string;
+    /**
+     * Color slot — drives the trend pill colors. The pie itself is drawn
+     * in white over a colored body background.
+     */
+    color: ColorName;
+    theme?: ThemeName;
+    /** Center x of the card. */
+    cx: number;
+    time: number;
+    duration: number;
+    /**
+     * Index used to stagger the entrance across multiple cards in a row.
+     */
+    staggerIndex?: number;
+    layerBase: number;
+}
+export declare function pieCard(props: PieCardProps): Element[];
+//# sourceMappingURL=pie-card.d.ts.map

package/dist/pie-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pie-card.d.ts","sourceRoot":"","sources":["../src/pie-card.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAwB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAGlF,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,4BAA4B;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;CACnB;AASD,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,OAAO,EAAE,CAmKtD"}

package/dist/pie-card.js

@@ -0,0 +1,168 @@
+// PieCard — a vertical card with an animated pie chart on top, percentage
+// + supporting count, optional trend pill, optional logo placeholder,
+// and a label at the bottom. The unit used in the Mux "Top browsers"
+// scene.
+//
+// The pie chart uses the path shape stroke-evolution trick: a circle path
+// with stroke_progress animated 0 → percentage/100 and a stroke width
+// equal to the circle's radius (so the "stroke" fills the entire disc as
+// a growing pie slice).
+import { getFonts, getPalette } from './theme.js';
+import { trendPct, trendPill } from './trend-pill.js';
+const FRAME = 1 / 30;
+// One decimal, trailing ".0" stripped (e.g. 64.2 → "64.2", 50 → "50").
+function formatPct(p) {
+    return p.toFixed(1).replace(/\.0$/, '');
+}
+export function pieCard(props) {
+    const { id, value, total, previous, label, logoUrl, color, cx, time, duration, layerBase, } = props;
+    const theme = props.theme ?? 'mux';
+    const palette = getPalette(theme, color);
+    const fonts = getFonts(theme);
+    const i = props.staggerIndex ?? 0;
+    const stagger = (10 + 5 * i) * FRAME;
+    const pct = total > 0 ? (value / total) * 100 : 0;
+    const out = [];
+    // Pie chart — circle path with growing stroke. ViewBox is 20 × 20 so
+    // stroke-width 10 fills the entire disc when stroke_progress = 1.
+    out.push({
+        id: `${id}-pie`,
+        type: 'shape',
+        layer: layerBase,
+        time: time + stagger,
+        duration: duration - stagger,
+        x: cx,
+        y: 460,
+        x_anchor: '50%',
+        y_anchor: '50%',
+        width: 320,
+        height: 320,
+        view_box: [0, 0, 20, 20],
+        paths: [
+            {
+                // Circle starting at top (12 o'clock), sweeping clockwise.
+                d: 'M 10 5 A 5 5 0 1 0 10 15 A 5 5 0 1 0 10 5 Z',
+                stroke: palette.measure,
+                stroke_width: 10,
+                stroke_progress: [
+                    { time: 0, value: 0 },
+                    { time: 0.8, value: pct / 100, easing: 'ease-out-cubic' },
+                ],
+            },
+        ],
+    });
+    // Percentage centered on the pie.
+    out.push({
+        id: `${id}-pct`,
+        type: 'text',
+        layer: layerBase + 1,
+        time: time + stagger,
+        duration: duration - stagger,
+        text: `${formatPct(pct)}%`,
+        x: cx,
+        y: 440,
+        x_anchor: '50%',
+        y_anchor: '50%',
+        font_family: fonts.sans,
+        font_size: 64,
+        font_weight: '400',
+        fill_color: palette.text,
+        animations: [{ type: 'fade-in', duration: 0.4 }],
+    });
+    // Supporting view count under the percentage.
+    out.push({
+        id: `${id}-count`,
+        type: 'text',
+        layer: layerBase + 2,
+        time: time + stagger + 5 * FRAME,
+        duration: duration - (stagger + 5 * FRAME),
+        text: `${new Intl.NumberFormat('en-US').format(value)} views`,
+        x: cx,
+        y: 510,
+        x_anchor: '50%',
+        y_anchor: '50%',
+        font_family: fonts.sans,
+        font_size: 32,
+        font_weight: '400',
+        fill_color: palette.text,
+        animations: [{ type: 'fade-in', duration: 0.4 }],
+    });
+    // Trend pill.
+    if (typeof previous === 'number') {
+        out.push(...trendPill({
+            id: `${id}-pill`,
+            layerBase: layerBase + 4,
+            time: time + stagger + 10 * FRAME,
+            duration: duration - (stagger + 10 * FRAME),
+            cx,
+            cy: 700,
+            color,
+            theme,
+            delta: trendPct(value, previous),
+            width: 380,
+            height: 50,
+        }));
+    }
+    // White rounded-square background for the logo.
+    out.push({
+        id: `${id}-logo-bg`,
+        type: 'shape',
+        layer: layerBase + 8,
+        time: time + stagger + 15 * FRAME,
+        duration: duration - (stagger + 15 * FRAME),
+        shape: 'rectangle',
+        x: cx,
+        y: 850,
+        x_anchor: '50%',
+        y_anchor: '50%',
+        width: 132,
+        height: 132,
+        fill_color: '#ffffff',
+        border_radius: 16,
+        animations: [
+            { type: 'fade-in', duration: 0.4 },
+            { type: 'scale-in', duration: 0.5, easing: 'ease-out-back' },
+        ],
+    });
+    // Logo image (if URL given).
+    if (logoUrl) {
+        out.push({
+            id: `${id}-logo`,
+            type: 'image',
+            layer: layerBase + 9,
+            time: time + stagger + 17 * FRAME,
+            duration: duration - (stagger + 17 * FRAME),
+            source: logoUrl,
+            x: cx,
+            y: 850,
+            x_anchor: '50%',
+            y_anchor: '50%',
+            width: 100,
+            height: 100,
+            animations: [
+                { type: 'fade-in', duration: 0.4 },
+                { type: 'scale-in', duration: 0.5, easing: 'ease-out-back' },
+            ],
+        });
+    }
+    // Card label at bottom.
+    out.push({
+        id: `${id}-label`,
+        type: 'text',
+        layer: layerBase + 10,
+        time: time + stagger + 18 * FRAME,
+        duration: duration - (stagger + 18 * FRAME),
+        text: label,
+        x: cx,
+        y: 980,
+        x_anchor: '50%',
+        y_anchor: '50%',
+        font_family: fonts.sans,
+        font_size: 36,
+        font_weight: '400',
+        fill_color: palette.text,
+        animations: [{ type: 'fade-in', duration: 0.4 }],
+    });
+    return out;
+}
+//# sourceMappingURL=pie-card.js.map

package/dist/pie-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pie-card.js","sourceRoot":"","sources":["../src/pie-card.ts"],"names":[],"mappings":"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"}

package/dist/promo.d.ts

@@ -0,0 +1,38 @@
+import type { Camera, Element, Source } from '@clipkit/protocol';
+import { type ThemeName } from './theme.js';
+export interface SceneCtx {
+    id: string;
+    theme: ThemeName;
+    canvasWidth: number;
+    canvasHeight: number;
+    /** Start time (s) the composer assigned this scene. */
+    time: number;
+    /** Visible duration (s) of this scene, including crossfade tails. */
+    duration: number;
+    /** Layer the composer assigned (scenes stack so crossfades overlap). */
+    layer: number;
+}
+export interface Scene {
+    /** On-screen length in seconds (before crossfade overlap). */
+    duration: number;
+    /** Build the scene's root element from composer-assigned timing/dims. */
+    build: (ctx: SceneCtx) => Element;
+}
+export interface PromoOptions {
+    scenes: Scene[];
+    theme?: ThemeName;
+    width?: number;
+    height?: number;
+    frameRate?: number;
+    /** Crossfade overlap between consecutive scenes, seconds. Default 0.4. */
+    crossfade?: number;
+    /** Shared scene camera (e.g. from cameraOrbit). */
+    camera?: Camera;
+    /** Supersampled motion-blur sample count (≥2 enables it). */
+    motionBlur?: number;
+    /** Background color override (defaults to the theme's canvas color). */
+    background?: string;
+}
+/** Compose scenes + theme into one renderable Source. */
+export declare function promo(opts: PromoOptions): Source;
+//# sourceMappingURL=promo.d.ts.map

package/dist/promo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"promo.d.ts","sourceRoot":"","sources":["../src/promo.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAU,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAEpD,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,uDAAuD;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,qEAAqE;IACrE,QAAQ,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,KAAK;IACpB,8DAA8D;IAC9D,QAAQ,EAAE,MAAM,CAAC;IACjB,yEAAyE;IACzE,KAAK,EAAE,CAAC,GAAG,EAAE,QAAQ,KAAK,OAAO,CAAC;CACnC;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6DAA6D;IAC7D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wEAAwE;IACxE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,yDAAyD;AACzD,wBAAgB,KAAK,CAAC,IAAI,EAAE,YAAY,GAAG,MAAM,CA+ChD"}

package/dist/promo.js

@@ -0,0 +1,61 @@
+// promo() — the Source-level composer.
+//
+// Component patterns return scene FRAGMENTS (one group each). `promo`
+// assembles an ordered list of scenes into a complete, renderable Source:
+// it sequences them on the timeline with a crossfade overlap, registers
+// the theme's webfonts, and wires the shared camera + motion blur. This is
+// where the *sequence-level* taste lives (timing, crossfades, one camera,
+// motion blur on) — the part an agent gets wrong when hand-assembling.
+//
+// Each scene is a builder that receives the timing/layer/dims the composer
+// assigns, so callers (or an agent) only choose patterns + content + a
+// duration — never the bookkeeping.
+import { THEMES } from './theme.js';
+/** Compose scenes + theme into one renderable Source. */
+export function promo(opts) {
+    const theme = opts.theme ?? 'cinematic';
+    const W = opts.width ?? 1280;
+    const H = opts.height ?? 720;
+    const crossfade = opts.crossfade ?? 0.4;
+    const themeDef = THEMES[theme];
+    // Lay scenes end-to-end, overlapping each by `crossfade` so the patterns'
+    // built-in fade-out/fade-in produce a dissolve. Each on its own layer so
+    // the overlap actually composites.
+    const elements = [];
+    let cursor = 0;
+    opts.scenes.forEach((scene, i) => {
+        const time = i === 0 ? 0 : cursor - crossfade;
+        elements.push(scene.build({
+            id: `s${i}`,
+            theme,
+            canvasWidth: W,
+            canvasHeight: H,
+            time,
+            duration: scene.duration,
+            // Later scenes sit in FRONT (lower layer) so a crossfade dissolves
+            // INTO the incoming scene. Unique 1..N across the scene list.
+            layer: opts.scenes.length - i,
+        }));
+        cursor = time + scene.duration;
+    });
+    const total = cursor;
+    const source = {
+        clipkit_version: '1.0',
+        output_format: 'mp4',
+        width: W,
+        height: H,
+        duration: total,
+        frame_rate: opts.frameRate ?? 30,
+        background_color: opts.background ?? themeDef.palettes.gray.bg,
+        elements,
+    };
+    if (themeDef.fontFaces && themeDef.fontFaces.length)
+        source.fonts = themeDef.fontFaces;
+    if (opts.camera)
+        source.camera = opts.camera;
+    if (opts.motionBlur && opts.motionBlur >= 2) {
+        source.motion_blur = { samples: opts.motionBlur, shutter: 0.6 };
+    }
+    return source;
+}
+//# sourceMappingURL=promo.js.map

package/dist/promo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"promo.js","sourceRoot":"","sources":["../src/promo.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,EAAE;AACF,sEAAsE;AACtE,0EAA0E;AAC1E,wEAAwE;AACxE,2EAA2E;AAC3E,0EAA0E;AAC1E,uEAAuE;AACvE,EAAE;AACF,2EAA2E;AAC3E,uEAAuE;AACvE,oCAAoC;AAGpC,OAAO,EAAE,MAAM,EAAkB,MAAM,YAAY,CAAC;AAsCpD,yDAAyD;AACzD,MAAM,UAAU,KAAK,CAAC,IAAkB;IACtC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,WAAW,CAAC;IACxC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC;IAC7B,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,IAAI,GAAG,CAAC;IAC7B,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,GAAG,CAAC;IACxC,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAE/B,0EAA0E;IAC1E,yEAAyE;IACzE,mCAAmC;IACnC,MAAM,QAAQ,GAAc,EAAE,CAAC;IAC/B,IAAI,MAAM,GAAG,CAAC,CAAC;IACf,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;QAC/B,MAAM,IAAI,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,SAAS,CAAC;QAC9C,QAAQ,CAAC,IAAI,CACX,KAAK,CAAC,KAAK,CAAC;YACV,EAAE,EAAE,IAAI,CAAC,EAAE;YACX,KAAK;YACL,WAAW,EAAE,CAAC;YACd,YAAY,EAAE,CAAC;YACf,IAAI;YACJ,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,mEAAmE;YACnE,8DAA8D;YAC9D,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;SAC9B,CAAC,CACH,CAAC;QACF,MAAM,GAAG,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAC;IACjC,CAAC,CAAC,CAAC;IACH,MAAM,KAAK,GAAG,MAAM,CAAC;IAErB,MAAM,MAAM,GAAW;QACrB,eAAe,EAAE,KAAK;QACtB,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,QAAQ,EAAE,KAAK;QACf,UAAU,EAAE,IAAI,CAAC,SAAS,IAAI,EAAE;QAChC,gBAAgB,EAAE,IAAI,CAAC,UAAU,IAAI,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;QAC9D,QAAQ;KACT,CAAC;IACF,IAAI,QAAQ,CAAC,SAAS,IAAI,QAAQ,CAAC,SAAS,CAAC,MAAM;QAAE,MAAM,CAAC,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC;IACvF,IAAI,IAAI,CAAC,MAAM;QAAE,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;IAC7C,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,EAAE,CAAC;QAC5C,MAAM,CAAC,WAAW,GAAG,EAAE,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC;IAClE,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC"}

package/dist/ranked-list.d.ts

@@ -0,0 +1,38 @@
+import type { Element } from '@clipkit/protocol';
+import { type ColorName, type ThemeName } from './theme.js';
+export interface RankedListItem {
+    /** Label shown after the rank number. */
+    label: string;
+    /** Numeric value driving the measure-bar width + the displayed value. */
+    value: number;
+}
+export interface RankedListProps {
+    id: string;
+    items: RankedListItem[];
+    /**
+     * Maximum used to normalize bar widths. Defaults to items[0].value.
+     * Pass explicitly if the list is sorted by some other metric.
+     */
+    max?: number;
+    color: ColorName;
+    theme?: ThemeName;
+    /** Top-left x of the list (the leftmost column starts here). */
+    x: number;
+    /** Top y of the list. */
+    y: number;
+    /** Total width available across all columns. */
+    width: number;
+    /** Number of columns. Default 1; 2 splits items left half / right half. */
+    columns?: 1 | 2;
+    /** Gap between columns when columns=2. Default 40. */
+    columnGap?: number;
+    /** Row height. Default 130. */
+    rowHeight?: number;
+    /** Font size for rank, name, value. Default 46. */
+    fontSize?: number;
+    time: number;
+    duration: number;
+    layerBase: number;
+}
+export declare function rankedList(props: RankedListProps): Element[];
+//# sourceMappingURL=ranked-list.d.ts.map

package/dist/ranked-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ranked-list.d.ts","sourceRoot":"","sources":["../src/ranked-list.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAwB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAElF,MAAM,WAAW,cAAc;IAC7B,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gEAAgE;IAChE,CAAC,EAAE,MAAM,CAAC;IACV,yBAAyB;IACzB,CAAC,EAAE,MAAM,CAAC;IACV,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAChB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB;AAID,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,OAAO,EAAE,CAiI5D"}

package/dist/ranked-list.js

@@ -0,0 +1,130 @@
+// RankedList — a list of N entries with rank numbers, names, animated
+// measure bars, and values. Renders as 1 or 2 columns. Composes on top
+// of the same primitives BarChartRow uses, but the rendering is
+// simpler (no icon, no trend pill, no count-up) since this is meant
+// for "top-10" style scenes.
+//
+// Used in the Mux "Top 10 videos" and "Top 5 states" scenes.
+import { getFonts, getPalette } from './theme.js';
+const FRAME = 1 / 30;
+export function rankedList(props) {
+    const { id, items, color, x, y, width, time, duration, layerBase, } = props;
+    const theme = props.theme ?? 'mux';
+    const palette = getPalette(theme, color);
+    const fonts = getFonts(theme);
+    const cols = props.columns ?? 1;
+    const colGap = props.columnGap ?? 40;
+    const rowH = props.rowHeight ?? 130;
+    const fontSize = props.fontSize ?? 46;
+    const max = props.max ?? (items.length > 0 ? items[0].value : 1);
+    const colW = cols === 2 ? (width - colGap) / 2 : width;
+    const out = [];
+    const itemsPerCol = cols === 2 ? Math.ceil(items.length / 2) : items.length;
+    for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        const colIdx = i < itemsPerCol ? 0 : 1;
+        const rowIdx = i % itemsPerCol;
+        const rowTop = y + rowIdx * rowH;
+        const rowX = x + colIdx * (colW + colGap);
+        const rowRight = rowX + colW;
+        const rowLayer = layerBase + i * 10;
+        const stagger = (10 + 6 * i) * FRAME;
+        // Animated measure bar.
+        const measurePct = max > 0 ? (item.value / max) * 100 : 0;
+        const measureFullW = (colW * measurePct) / 100;
+        out.push({
+            id: `${id}-measure-${i}`,
+            type: 'shape',
+            layer: rowLayer,
+            time: time + stagger,
+            duration: duration - stagger,
+            shape: 'rectangle',
+            x: rowX,
+            y: rowTop,
+            x_anchor: 0,
+            y_anchor: 0,
+            width: measureFullW,
+            height: rowH,
+            fill_color: palette.measure,
+            keyframe_animations: [
+                {
+                    property: 'width',
+                    keyframes: [
+                        { time: 0, value: 0 },
+                        { time: 1.6, value: measureFullW, easing: 'ease-out-quart' },
+                    ],
+                },
+            ],
+        });
+        // Top border.
+        out.push({
+            id: `${id}-border-${i}`,
+            type: 'shape',
+            layer: rowLayer + 1,
+            time,
+            duration,
+            shape: 'rectangle',
+            x: rowX + colW / 2,
+            y: rowTop,
+            x_anchor: '50%',
+            y_anchor: '50%',
+            width: colW,
+            height: 3,
+            fill_color: palette.accent,
+        });
+        // Rank ("01.", "02.", ...).
+        const rankStr = items.length >= 10 ? `${i + 1}.` : `0${i + 1}.`;
+        out.push({
+            id: `${id}-rank-${i}`,
+            type: 'text',
+            layer: rowLayer + 2,
+            time: time + stagger,
+            duration: duration - stagger,
+            text: rankStr,
+            x: rowX + 30,
+            y: rowTop + rowH / 2,
+            x_anchor: 0,
+            font_family: fonts.sans,
+            font_size: fontSize,
+            font_weight: '400',
+            fill_color: palette.accentDark,
+            animations: [{ type: 'fade-in', duration: 0.4 }],
+        });
+        // Label.
+        out.push({
+            id: `${id}-label-${i}`,
+            type: 'text',
+            layer: rowLayer + 3,
+            time: time + stagger + 2 * FRAME,
+            duration: duration - (stagger + 2 * FRAME),
+            text: item.label,
+            x: rowX + 100,
+            y: rowTop + rowH / 2,
+            x_anchor: 0,
+            font_family: fonts.sans,
+            font_size: fontSize,
+            font_weight: '400',
+            fill_color: palette.text,
+            animations: [{ type: 'fade-in', duration: 0.4 }],
+        });
+        // Value (right-aligned).
+        out.push({
+            id: `${id}-value-${i}`,
+            type: 'text',
+            layer: rowLayer + 4,
+            time: time + stagger + 4 * FRAME,
+            duration: duration - (stagger + 4 * FRAME),
+            text: new Intl.NumberFormat('en-US').format(item.value),
+            x: rowRight - 30,
+            y: rowTop + rowH / 2,
+            x_anchor: 1,
+            font_family: fonts.sans,
+            font_size: fontSize,
+            font_weight: '400',
+            fill_color: palette.text,
+            animations: [{ type: 'fade-in', duration: 0.4 }],
+        });
+    }
+    return out;
+}
+//# sourceMappingURL=ranked-list.js.map

package/dist/ranked-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ranked-list.js","sourceRoot":"","sources":["../src/ranked-list.ts"],"names":[],"mappings":"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"}

package/dist/stat-block.d.ts

@@ -0,0 +1,26 @@
+import type { Element } from '@clipkit/protocol';
+import { type ColorName, type ThemeName } from './theme.js';
+export interface StatBlockProps {
+    id: string;
+    /** The number being revealed; counts from 0 → this over ~1s. */
+    current: number;
+    /** Previous-period value. If set, a trend pill is rendered to the right. */
+    previous?: number;
+    /** Sub-label under the number ("Total views"). */
+    label: string;
+    /** Color slot — drives the top border + trend pill. */
+    color: ColorName;
+    theme?: ThemeName;
+    /** Top-left x of the block. */
+    x: number;
+    /** Top-left y of the block. */
+    y: number;
+    /** Block width — usually the body content width. */
+    width: number;
+    /** Scene-local start time + duration. */
+    time: number;
+    duration: number;
+    layerBase: number;
+}
+export declare function statBlock(props: StatBlockProps): Element[];
+//# sourceMappingURL=stat-block.d.ts.map

package/dist/stat-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat-block.d.ts","sourceRoot":"","sources":["../src/stat-block.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAwB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAGlF,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,gEAAgE;IAChE,OAAO,EAAE,MAAM,CAAC;IAChB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+BAA+B;IAC/B,CAAC,EAAE,MAAM,CAAC;IACV,+BAA+B;IAC/B,CAAC,EAAE,MAAM,CAAC;IACV,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO,EAAE,CA4F1D"}

package/dist/stat-block.js

@@ -0,0 +1,92 @@
+// StatBlock — themed border line, a big number, label below, optional
+// trend pill on the right.
+//
+// Used for hero stats in a dashboard-style scene. The number is rendered as
+// plain comma-grouped text that fades + rises into place — the protocol has
+// no text-content animation, so there is no per-digit count-up.
+import { getFonts, getPalette } from './theme.js';
+import { trendPct, trendPill } from './trend-pill.js';
+export function statBlock(props) {
+    const { id, current, previous, label, color, x, y, width, time, duration, layerBase, } = props;
+    const theme = props.theme ?? 'mux';
+    const palette = getPalette(theme, color);
+    const fonts = getFonts(theme);
+    const out = [];
+    // 3-px top border in the dark accent (the "rule" above each stat).
+    out.push({
+        id: `${id}-border`,
+        type: 'shape',
+        layer: layerBase,
+        time,
+        duration,
+        shape: 'rectangle',
+        x: x + width / 2,
+        y,
+        x_anchor: '50%',
+        y_anchor: '50%',
+        width,
+        height: 3,
+        fill_color: palette.accent,
+    });
+    // Big number, anchored top-left 50 px below the border; fades + rises in.
+    out.push({
+        id: `${id}-value`,
+        type: 'text',
+        layer: layerBase + 1,
+        time,
+        duration,
+        text: new Intl.NumberFormat('en-US').format(current),
+        x: x + 60,
+        y: y + 50,
+        x_anchor: 0,
+        y_anchor: 0,
+        font_family: fonts.sans,
+        font_size: 160,
+        font_weight: '300',
+        fill_color: palette.text,
+        animations: [{ type: 'fade-in', duration: 0.5 }],
+        keyframe_animations: [
+            {
+                property: 'y',
+                keyframes: [
+                    { time: 0, value: y + 50 + 30 },
+                    { time: 0.6, value: y + 50, easing: 'ease-out' },
+                ],
+            },
+        ],
+    });
+    // Sub-label.
+    out.push({
+        id: `${id}-label`,
+        type: 'text',
+        layer: layerBase + 2,
+        time: time + 10 / 30,
+        duration: duration - 10 / 30,
+        text: label,
+        x: x + 60,
+        y: y + 240,
+        x_anchor: 0,
+        y_anchor: 0,
+        font_family: fonts.sans,
+        font_size: 36,
+        font_weight: '400',
+        fill_color: palette.text,
+        animations: [{ type: 'fade-in', duration: 0.4 }],
+    });
+    // Optional trend pill on the right.
+    if (typeof previous === 'number') {
+        out.push(...trendPill({
+            id: `${id}-pill`,
+            layerBase: layerBase + 3,
+            time: time + 15 / 30,
+            duration: duration - 15 / 30,
+            cx: x + width - 280,
+            cy: y + 50,
+            color,
+            theme,
+            delta: trendPct(current, previous),
+        }));
+    }
+    return out;
+}
+//# sourceMappingURL=stat-block.js.map

package/dist/stat-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat-block.js","sourceRoot":"","sources":["../src/stat-block.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,2BAA2B;AAC3B,EAAE;AACF,4EAA4E;AAC5E,4EAA4E;AAC5E,gEAAgE;AAGhE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAkC,MAAM,YAAY,CAAC;AAClF,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAyBtD,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,EACJ,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,GAC5E,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC;IACnC,MAAM,OAAO,GAAG,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IACzC,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9B,MAAM,GAAG,GAAc,EAAE,CAAC;IAE1B,mEAAmE;IACnE,GAAG,CAAC,IAAI,CAAC;QACP,EAAE,EAAE,GAAG,EAAE,SAAS;QAClB,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,SAAS;QAChB,IAAI;QACJ,QAAQ;QACR,KAAK,EAAE,WAAW;QAClB,CAAC,EAAE,CAAC,GAAG,KAAK,GAAG,CAAC;QAChB,CAAC;QACD,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,KAAK;QACL,MAAM,EAAE,CAAC;QACT,UAAU,EAAE,OAAO,CAAC,MAAM;KAC3B,CAAC,CAAC;IAEH,0EAA0E;IAC1E,GAAG,CAAC,IAAI,CAAC;QACP,EAAE,EAAE,GAAG,EAAE,QAAQ;QACjB,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,SAAS,GAAG,CAAC;QACpB,IAAI;QACJ,QAAQ;QACR,IAAI,EAAE,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;QACpD,CAAC,EAAE,CAAC,GAAG,EAAE;QACT,CAAC,EAAE,CAAC,GAAG,EAAE;QACT,QAAQ,EAAE,CAAC;QACX,QAAQ,EAAE,CAAC;QACX,WAAW,EAAE,KAAK,CAAC,IAAI;QACvB,SAAS,EAAE,GAAG;QACd,WAAW,EAAE,KAAK;QAClB,UAAU,EAAE,OAAO,CAAC,IAAI;QACxB,UAAU,EAAE,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC;QAChD,mBAAmB,EAAE;YACnB;gBACE,QAAQ,EAAE,GAAG;gBACb,SAAS,EAAE;oBACT,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE;oBAC/B,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,GAAG,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE;iBACjD;aACF;SACF;KACF,CAAC,CAAC;IAEH,aAAa;IACb,GAAG,CAAC,IAAI,CAAC;QACP,EAAE,EAAE,GAAG,EAAE,QAAQ;QACjB,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,SAAS,GAAG,CAAC;QACpB,IAAI,EAAE,IAAI,GAAG,EAAE,GAAG,EAAE;QACpB,QAAQ,EAAE,QAAQ,GAAG,EAAE,GAAG,EAAE;QAC5B,IAAI,EAAE,KAAK;QACX,CAAC,EAAE,CAAC,GAAG,EAAE;QACT,CAAC,EAAE,CAAC,GAAG,GAAG;QACV,QAAQ,EAAE,CAAC;QACX,QAAQ,EAAE,CAAC;QACX,WAAW,EAAE,KAAK,CAAC,IAAI;QACvB,SAAS,EAAE,EAAE;QACb,WAAW,EAAE,KAAK;QAClB,UAAU,EAAE,OAAO,CAAC,IAAI;QACxB,UAAU,EAAE,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC;KACjD,CAAC,CAAC;IAEH,oCAAoC;IACpC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;QACjC,GAAG,CAAC,IAAI,CACN,GAAG,SAAS,CAAC;YACX,EAAE,EAAE,GAAG,EAAE,OAAO;YAChB,SAAS,EAAE,SAAS,GAAG,CAAC;YACxB,IAAI,EAAE,IAAI,GAAG,EAAE,GAAG,EAAE;YACpB,QAAQ,EAAE,QAAQ,GAAG,EAAE,GAAG,EAAE;YAC5B,EAAE,EAAE,CAAC,GAAG,KAAK,GAAG,GAAG;YACnB,EAAE,EAAE,CAAC,GAAG,EAAE;YACV,KAAK;YACL,KAAK;YACL,KAAK,EAAE,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC;SACnC,CAAC,CACH,CAAC;IACJ,CAAC;IAED,OAAO,GAAG,CAAC;AACb,CAAC"}