@clipkit/patterns 1.0.0

package/dist/beat-sync.js

@@ -0,0 +1,145 @@
+// beat-sync — turn a BeatMap into motion.
+//
+// This is the MAPPING layer. @clipkit/music-analysis produces the facts (where
+// the beats are); these helpers turn them into ordinary keyframes / pure
+// expressions that drop onto any element. Nothing here reaches the runtime as a
+// new concept — the output is plain protocol data, so renders stay deterministic
+// with no audio dependency. (The agent supplies the taste: WHICH element gets
+// WHICH accent.)
+//
+// Two tiers, matching the architecture:
+//   • pulseToTempo  — Tier 1: a pure expression that breathes on the beat from
+//                     just bpm + phase. Cheap, continuous, no per-beat data.
+//   • accentOnBeats — Tier 2: keyframes that punch a property on each detected
+//                     beat (or downbeat), with anticipation and settle.
+const round = (n) => Math.round(n * 1000) / 1000;
+/**
+ * A pure Tier-A expression that pulses on the beat — a sharp rise exactly on
+ * each beat that decays before the next. Needs only `bpm` + `phase`, so it works
+ * off a synthesized {@link beatGrid} as happily as a detected map. Drop the
+ * result on any numeric property (`scale`, `opacity`, `blur_radius`, …):
+ *
+ * ```ts
+ * { ...logo, scale: pulseToTempo(map, { amp: 0.06 }) }
+ * ```
+ */
+export function pulseToTempo(map, opts = {}) {
+    const baseline = opts.baseline ?? 1;
+    const amp = opts.amp ?? 0.08;
+    const decay = opts.decay ?? 6;
+    const rate = round((map.bpm / 60) * (opts.subdivision ?? 1)); // pulses/sec
+    const phase = round(map.phase);
+    // fract((t - phase)·rate) is the saw 0→1 across each pulse; exp(-decay·saw)
+    // is 1 at the beat, decaying after → a percussive pump.
+    return {
+        expr: `${round(baseline)} + ${round(amp)}*exp(-${round(decay)}*fract((t-${phase})*${rate}))`,
+    };
+}
+/**
+ * Keyframes that punch a property on each beat — the discrete "hit" sync. Each
+ * marker gets an anticipation keyframe, a peak ON the beat (scaled by the
+ * marker's strength so downbeats land bigger), and a settle back to rest.
+ *
+ * Returns one {@link KeyframeAnimation}; push it onto an element's
+ * `keyframe_animations`. Times are in the element's local seconds — put the
+ * accented element at `time: 0` so they line up with the beat map's clock.
+ *
+ * ```ts
+ * { ...title, keyframe_animations: [accentOnBeats(map, { on: 'downbeats', amp: 0.22 })] }
+ * ```
+ */
+export function accentOnBeats(map, opts = {}) {
+    const property = opts.property ?? 'scale';
+    const base = opts.base ?? 1;
+    const amp = opts.amp ?? 0.18;
+    const easing = opts.easing ?? 'ease-out-cubic';
+    const minStrength = opts.minStrength ?? 0;
+    const markers = opts.on === 'downbeats' ? map.downbeats : map.beats;
+    // Keep the rise + settle inside one beat so adjacent accents never collide.
+    const interval = map.bpm > 0 ? 60 / map.bpm : Infinity;
+    const attack = Math.min(opts.attack ?? 0.05, interval * 0.3);
+    const settle = Math.min(opts.settle ?? 0.2, interval * 0.6);
+    const keyframes = [];
+    let lastTime = -Infinity;
+    // Push only if it keeps times strictly increasing and non-negative, so the
+    // sequence stays monotonic even for a beat sitting exactly at t=0.
+    const push = (time, value) => {
+        const t = round(time);
+        if (t < 0 || t <= lastTime)
+            return;
+        keyframes.push({ time: t, value: round(value), easing });
+        lastTime = t;
+    };
+    for (const m of markers) {
+        if (m.strength < minStrength)
+            continue;
+        // Anticipation seat at rest just before the hit (keeps the value flat
+        // between beats instead of ramping up across the whole gap), then the peak
+        // ON the beat, then the settle back to rest.
+        push(m.time - attack, base);
+        push(m.time, base + amp * m.strength);
+        push(m.time + settle, base);
+    }
+    // Seed a resting keyframe at t=0 so the value holds at `base` before the
+    // first hit (unless a beat already owns t=0).
+    if (keyframes.length === 0 || keyframes[0].time !== 0) {
+        keyframes.unshift({ time: 0, value: round(base), easing });
+    }
+    return { property, keyframes };
+}
+// ── Tier 2 (transitions): land MOTION EVENTS on the beat ─────────────────────
+// This is the heart of "hit-syncing": entrances, exits, and screen-to-screen
+// cuts whose moment of impact lands ON a beat. Unlike pulseToTempo (continuous,
+// for music-visualizer pulsing), these sync the EVENTS a piece already needs —
+// a logo arriving, a list ticking in, a screen changing — and otherwise leave
+// the element still. They return plain {expr} / numbers (protocol values), so
+// they drop straight onto an element's opacity / x / y.
+/** Snap a time (seconds) to the nearest beat — or downbeat — in the map, so an
+ *  authored moment locks to the grid instead of drifting near it. */
+export function snapToBeat(map, t, which = 'beat') {
+    const markers = which === 'downbeat' ? map.downbeats : map.beats;
+    let best = t;
+    let bestD = Infinity;
+    for (const m of markers) {
+        const d = Math.abs(t - m.time);
+        if (d < bestD) {
+            best = m.time;
+            bestD = d;
+        }
+    }
+    return best;
+}
+/**
+ * Opacity {expr} that is fully present ON beat `enter` and (optionally) fully
+ * CLEARED by beat `exit` — both edges land on a beat. On a shared boundary the
+ * old screen is gone exactly as the new one arrives: a clean cut, not a muddy
+ * overlap. Pair with {@link slideOnBeat} for a slide arriving on the same beat.
+ */
+export function revealOnBeat(enter, opts = {}) {
+    const fi = opts.fadeIn ?? 0.28;
+    const inExpr = `linear(t,${round(enter - fi)},${round(enter)},0,1)`;
+    if (opts.exit == null)
+        return { expr: inExpr };
+    const fo = opts.fadeOut ?? 0.28;
+    return { expr: `(${inExpr} - linear(t,${round(opts.exit - fo)},${round(opts.exit)},0,1))` };
+}
+/**
+ * A coordinate {expr} for a slide that ARRIVES at `target` px on beat `enter`
+ * (coming from `target + from`), and optionally pushes back out so it has fully
+ * left BY beat `exit`. Use directly as an element's `x` or `y`. The arrival/
+ * departure — not a wobble — is the sync, so it reads on the beat without
+ * distracting while the element rests.
+ */
+export function slideOnBeat(target, enter, opts = {}) {
+    const from = opts.from ?? 60;
+    const dur = opts.dur ?? 0.45;
+    let expr = `${round(target)} + ${round(from)}*(1 - ease(t,${round(enter - dur)},${round(enter)},0,1))`;
+    if (opts.exit != null) {
+        const exitTo = opts.exitTo ?? from;
+        const exitDur = opts.exitDur ?? 0.4;
+        // push completes BY the exit beat (window ends on it) — leaves on the beat
+        expr += ` + ${round(exitTo)}*ease(t,${round(opts.exit - exitDur)},${round(opts.exit)},0,1)`;
+    }
+    return { expr };
+}
+//# sourceMappingURL=beat-sync.js.map

package/dist/beat-sync.js.map

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

package/dist/camera-orbit.d.ts

@@ -0,0 +1,22 @@
+import type { Camera } from '@clipkit/protocol';
+export interface CameraOrbitProps {
+    /** Focal distance in px; smaller = stronger perspective. Default 1500. */
+    perspective?: number;
+    /** Yaw sweep: y_rotation runs from −yaw to +yaw degrees. Default 40. */
+    yaw?: number;
+    /** Constant downward tilt (x_rotation degrees) held through the move. Default 0. */
+    pitch?: number;
+    /** Dolly: z runs 0 → dolly px (+ = toward the viewer). Default 0. */
+    dolly?: number;
+    /** Truck: x runs 0 → truck px. Default 0. */
+    truck?: number;
+    /** Move length in seconds (the keyframe span). */
+    duration: number;
+    /** Ease the sweep in/out. Default true. */
+    ease?: boolean;
+    /** Projection origin (vanishing point). Defaults to canvas center. */
+    origin_x?: number | string;
+    origin_y?: number | string;
+}
+export declare function cameraOrbit(props: CameraOrbitProps): Camera;
+//# sourceMappingURL=camera-orbit.d.ts.map

package/dist/camera-orbit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"camera-orbit.d.ts","sourceRoot":"","sources":["../src/camera-orbit.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,MAAM,EAAY,MAAM,mBAAmB,CAAC;AAE1D,MAAM,WAAW,gBAAgB;IAC/B,0EAA0E;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wEAAwE;IACxE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,QAAQ,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B;AAQD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,MAAM,CAa3D"}

package/dist/camera-orbit.js

@@ -0,0 +1,32 @@
+// cameraOrbit — a ready-made scene camera move (CKP/1.0). Unlike the
+// other patterns (which return an Element), this returns a `Camera` for
+// `source.camera`: a keyframed pose that sweeps the viewpoint — orbit
+// (yaw), tilt (pitch), dolly (z), truck (x) — over the composition.
+// Pair it with content at varied `z` for parallax, depth-correct
+// occlusion handles itself (§4.4.3).
+function ramp(from, to, duration, easing) {
+    const end = { time: Math.max(0.1, duration), value: to };
+    if (easing)
+        end.easing = easing;
+    return [{ time: 0, value: from }, end];
+}
+export function cameraOrbit(props) {
+    const { duration } = props;
+    const easing = (props.ease ?? true) ? 'ease-in-out' : undefined;
+    const yaw = props.yaw ?? 40;
+    const cam = { perspective: props.perspective ?? 1500 };
+    if (props.origin_x !== undefined)
+        cam.origin_x = props.origin_x;
+    if (props.origin_y !== undefined)
+        cam.origin_y = props.origin_y;
+    if (yaw)
+        cam.y_rotation = ramp(-yaw, yaw, duration, easing);
+    if (props.pitch)
+        cam.x_rotation = props.pitch; // constant tilt
+    if (props.dolly)
+        cam.z = ramp(0, props.dolly, duration, easing);
+    if (props.truck)
+        cam.x = ramp(0, props.truck, duration, easing);
+    return cam;
+}
+//# sourceMappingURL=camera-orbit.js.map

package/dist/camera-orbit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"camera-orbit.js","sourceRoot":"","sources":["../src/camera-orbit.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,wEAAwE;AACxE,sEAAsE;AACtE,oEAAoE;AACpE,iEAAiE;AACjE,qCAAqC;AAwBrC,SAAS,IAAI,CAAC,IAAY,EAAE,EAAU,EAAE,QAAgB,EAAE,MAAe;IACvE,MAAM,GAAG,GAAa,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE,EAAc,CAAC;IAC/E,IAAI,MAAM;QAAG,GAA2B,CAAC,MAAM,GAAG,MAAM,CAAC;IACzD,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAc,EAAE,GAAG,CAAC,CAAC;AACrD,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC3B,MAAM,MAAM,GAAG,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;IAChE,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,EAAE,CAAC;IAE5B,MAAM,GAAG,GAAW,EAAE,WAAW,EAAE,KAAK,CAAC,WAAW,IAAI,IAAI,EAAE,CAAC;IAC/D,IAAI,KAAK,CAAC,QAAQ,KAAK,SAAS;QAAE,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;IAChE,IAAI,KAAK,CAAC,QAAQ,KAAK,SAAS;QAAE,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;IAChE,IAAI,GAAG;QAAE,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;IAC5D,IAAI,KAAK,CAAC,KAAK;QAAE,GAAG,CAAC,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,gBAAgB;IAC/D,IAAI,KAAK,CAAC,KAAK;QAAE,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;IAChE,IAAI,KAAK,CAAC,KAAK;QAAE,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;IAChE,OAAO,GAAG,CAAC;AACb,CAAC"}

package/dist/cta-outro.d.ts

@@ -0,0 +1,18 @@
+import type { Element } from '@clipkit/protocol';
+import { type ColorName, type ThemeName } from './theme.js';
+export interface CtaOutroProps {
+    id: string;
+    wordmark: string;
+    tagline?: string;
+    /** Button label, e.g. "Start free". */
+    cta: string;
+    color: ColorName;
+    theme?: ThemeName;
+    canvasWidth: number;
+    canvasHeight: number;
+    time: number;
+    duration: number;
+    layer: number;
+}
+export declare function ctaOutro(props: CtaOutroProps): Element;
+//# sourceMappingURL=cta-outro.d.ts.map

package/dist/cta-outro.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cta-outro.d.ts","sourceRoot":"","sources":["../src/cta-outro.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAwB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAElF,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CA0CtD"}

package/dist/cta-outro.js

@@ -0,0 +1,44 @@
+// ctaOutro — closing card: serif wordmark, tagline, and a glass CTA pill.
+//
+// COMPONENT pattern: returns ONE plain `group`.
+import { assignLayers } from './layers.js';
+import { getFonts, getPalette } from './theme.js';
+export function ctaOutro(props) {
+    const { id, wordmark, tagline, cta, color, canvasWidth: W, canvasHeight: H, time, duration, layer } = props;
+    const theme = props.theme ?? 'cinematic';
+    const palette = getPalette(theme, color);
+    const fonts = getFonts(theme);
+    const cx = W / 2, cy = H / 2;
+    const btnW = 220, btnH = 62;
+    const children = [
+        {
+            id: `${id}-wordmark`, type: 'text', text: wordmark, x: cx, y: cy - 60, x_anchor: '50%', y_anchor: '50%',
+            font_family: fonts.display, font_size: 88, font_weight: '700', letter_spacing: 8, fill_color: palette.text,
+            animations: [{ type: 'scale-in', duration: 1.0, easing: 'ease-out' }, { type: 'fade-in', duration: 0.6 }],
+        },
+    ];
+    if (tagline) {
+        children.push({
+            id: `${id}-tagline`, type: 'text', text: tagline, x: cx, y: cy + 6, x_anchor: '50%', y_anchor: '50%', time: 0.3,
+            font_family: fonts.sans, font_size: 24, letter_spacing: 2, fill_color: palette.textMuted,
+            animations: [{ type: 'fade-in', duration: 0.6 }],
+        });
+    }
+    // glass CTA pill (refracts the dark backdrop) + label
+    children.push({
+        id: `${id}-btn`, type: 'shape', shape: 'rectangle', x: cx, y: cy + 84, x_anchor: '50%', y_anchor: '50%', width: btnW, height: btnH, border_radius: btnH / 2,
+        fill_color: '#ffffff', time: 0.6,
+        effects: [{ type: 'glass', blur_radius: 6, refraction: 14, edge_highlight: 1, tint: palette.accent }],
+        animations: [{ type: 'scale-in', duration: 0.5, easing: 'ease-out-back' }, { type: 'fade-in', duration: 0.4 }],
+    }, {
+        id: `${id}-btn-label`, type: 'text', text: cta, x: cx, y: cy + 84, x_anchor: '50%', y_anchor: '50%', time: 0.75,
+        font_family: fonts.sans, font_size: 22, font_weight: '700', fill_color: palette.text,
+        animations: [{ type: 'fade-in', duration: 0.4 }],
+    });
+    return {
+        id, type: 'group', layer, time, duration, x: 0, y: 0, width: W, height: H,
+        animations: [{ type: 'fade-out', time: 'end', duration: 0.5 }],
+        elements: assignLayers(children),
+    };
+}
+//# sourceMappingURL=cta-outro.js.map

package/dist/cta-outro.js.map

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

package/dist/data-scenes.d.ts

@@ -0,0 +1,66 @@
+import type { Element } from '@clipkit/protocol';
+import { type RankedListItem } from './ranked-list.js';
+import type { ColorName, ThemeName } from './theme.js';
+interface SceneBase {
+    /** Id prefix for every produced element. */
+    id: string;
+    /** Accent / body color slot. */
+    color: ColorName;
+    theme?: ThemeName;
+    canvasWidth: number;
+    canvasHeight: number;
+    time: number;
+    duration: number;
+    layer: number;
+    /** Header title (e.g. "Top 10 videos"). */
+    title?: string;
+    /** Optional right-aligned date range in the header. */
+    dateRange?: string;
+}
+export interface StatItem {
+    label: string;
+    /** Counts 0 → this over ~1s. */
+    current: number;
+    /** Previous-period value; if set, a trend pill is shown. */
+    previous?: number;
+}
+export interface StatsSceneProps extends SceneBase {
+    /** 1–4 hero stats, laid out in a centered 1- or 2-column grid. */
+    stats: StatItem[];
+}
+/** Hero-stat scene: headerBar + a centered grid of spring-counted statBlocks. */
+export declare function statsScene(props: StatsSceneProps): Element;
+export interface BarItem {
+    label: string;
+    value: number;
+    previous?: number;
+}
+export interface BarsSceneProps extends SceneBase {
+    /** 1–6 rows; bar widths normalize to the largest value. */
+    bars: BarItem[];
+}
+/** Bar-chart scene: headerBar + a centered vertical stack of barChartRows. */
+export declare function barsScene(props: BarsSceneProps): Element;
+export interface RankingSceneProps extends SceneBase {
+    /** Ranked entries; 1 column up to 6, then 2 columns. */
+    items: RankedListItem[];
+}
+/** Ranked-list scene: headerBar + a centered rankedList (auto 1/2 columns). */
+export declare function rankingScene(props: RankingSceneProps): Element;
+export interface PieItem {
+    label: string;
+    value: number;
+    /** Total the value is a share of (drives the displayed percentage). */
+    total: number;
+    previous?: number;
+    /** Optional logo image URL shown under the pie. */
+    logoUrl?: string;
+}
+export interface PieSceneProps extends SceneBase {
+    /** 1–4 pie cards laid out in a row. Assumes a ~1080-tall canvas. */
+    cards: PieItem[];
+}
+/** Pie-card scene: headerBar + a row of pieCards. Tuned for H≈1080. */
+export declare function pieScene(props: PieSceneProps): Element;
+export {};
+//# sourceMappingURL=data-scenes.d.ts.map

package/dist/data-scenes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-scenes.d.ts","sourceRoot":"","sources":["../src/data-scenes.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAIjD,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGnE,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAKvD,UAAU,SAAS;IACjB,4CAA4C;IAC5C,EAAE,EAAE,MAAM,CAAC;IACX,gCAAgC;IAChC,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyCD,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,kEAAkE;IAClE,KAAK,EAAE,QAAQ,EAAE,CAAC;CACnB;AAED,iFAAiF;AACjF,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,OAAO,CAwC1D;AAED,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,2DAA2D;IAC3D,IAAI,EAAE,OAAO,EAAE,CAAC;CACjB;AAED,8EAA8E;AAC9E,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO,CAwCxD;AAED,MAAM,WAAW,iBAAkB,SAAQ,SAAS;IAClD,wDAAwD;IACxD,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED,+EAA+E;AAC/E,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,OAAO,CAkC9D;AAED,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,oEAAoE;IACpE,KAAK,EAAE,OAAO,EAAE,CAAC;CAClB;AAED,uEAAuE;AACvE,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CA+BtD"}

package/dist/data-scenes.js

@@ -0,0 +1,188 @@
+// Data-viz SCENES — full-frame compositions that turn the element-level
+// data patterns (headerBar + statBlock / barChartRow / rankedList / pieCard)
+// into single `group` scenes the promo() composer can sequence, the same shape
+// as introCard / heroReveal. This is what makes "make me a stats / chart /
+// top-10 video" reachable: the caller supplies data, these handle the layout.
+//
+// Each returns ONE full-frame identity group (x:W/2, y:H/2, W×H) whose children
+// use canvas coordinates — exactly like introCard — so the data patterns' own
+// absolute x/y land correctly. headerBar frames every scene (white header strip
+// + colored body); the data sits in the body area below it.
+//
+// Tuned for a 1920×1080 canvas (the create_promo default). pieScene in
+// particular relies on pieCard's 1080-based vertical layout.
+import { headerBar } from './header-bar.js';
+import { statBlock } from './stat-block.js';
+import { barChartRow } from './bar-chart-row.js';
+import { rankedList } from './ranked-list.js';
+import { pieCard } from './pie-card.js';
+import { assignLayers } from './layers.js';
+const HEADER_H = 216; // matches headerBar
+const MARGIN = 80;
+/** Wrap composed children in a full-frame identity group (cf. introCard). */
+function sceneGroup(base, children) {
+    const W = base.canvasWidth;
+    const H = base.canvasHeight;
+    return {
+        id: base.id,
+        type: 'group',
+        layer: base.layer,
+        time: base.time,
+        duration: base.duration,
+        x: 0,
+        y: 0,
+        width: W,
+        height: H,
+        animations: [{ type: 'fade-out', time: 'end', duration: 0.5 }],
+        // The composer owns layer assignment: `children` is built back-to-front
+        // (frame behind, data pushed on top), so stamp dense layers with the
+        // front-most = layer 1. This overrides the builders' relative layerBase
+        // offsets with a correct, unique-per-container ordering (layer 1 = top).
+        elements: assignLayers(children),
+    };
+}
+/** The white header strip + colored body fill that frames every data scene. */
+function frame(base) {
+    return headerBar({
+        id: `${base.id}-hdr`,
+        title: base.title ?? '',
+        ...(base.dateRange ? { dateRange: base.dateRange } : {}),
+        bodyColor: base.color,
+        ...(base.theme ? { theme: base.theme } : {}),
+        canvasWidth: base.canvasWidth,
+        canvasHeight: base.canvasHeight,
+        time: 0,
+        duration: base.duration,
+        layerBase: 1,
+    });
+}
+/** Hero-stat scene: headerBar + a centered grid of spring-counted statBlocks. */
+export function statsScene(props) {
+    const { canvasWidth: W, canvasHeight: H, color, theme, duration } = props;
+    const contentX = MARGIN;
+    const contentW = W - 2 * MARGIN;
+    const bodyTop = HEADER_H;
+    const bodyH = H - HEADER_H;
+    const children = [...frame(props)];
+    const n = props.stats.length;
+    const cols = n === 1 ? 1 : 2;
+    const rows = Math.ceil(n / cols);
+    const colGap = 80;
+    const rowStride = 340;
+    const blockW = cols === 1 ? contentW : (contentW - colGap) / 2;
+    const gridH = rows * rowStride;
+    const startY = bodyTop + (bodyH - gridH) / 2;
+    props.stats.forEach((s, i) => {
+        const col = i % cols;
+        const row = Math.floor(i / cols);
+        children.push(...statBlock({
+            id: `${props.id}-stat${i}`,
+            current: s.current,
+            ...(s.previous !== undefined ? { previous: s.previous } : {}),
+            label: s.label,
+            color,
+            ...(theme ? { theme } : {}),
+            x: contentX + col * (blockW + colGap),
+            y: startY + row * rowStride,
+            width: blockW,
+            time: 0,
+            duration,
+            layerBase: 20 + i * 10,
+        }));
+    });
+    return sceneGroup(props, children);
+}
+/** Bar-chart scene: headerBar + a centered vertical stack of barChartRows. */
+export function barsScene(props) {
+    const { canvasWidth: W, canvasHeight: H, color, theme, duration } = props;
+    const contentX = MARGIN;
+    const contentW = W - 2 * MARGIN;
+    const bodyTop = HEADER_H;
+    const bodyH = H - HEADER_H;
+    const children = [...frame(props)];
+    const n = props.bars.length;
+    const max = Math.max(...props.bars.map((b) => b.value), 1);
+    const rowH = 168;
+    const gap = 48;
+    const rowStride = rowH + gap;
+    const totalH = n * rowStride - gap;
+    const startY = bodyTop + (bodyH - totalH) / 2;
+    props.bars.forEach((b, i) => {
+        children.push(...barChartRow({
+            id: `${props.id}-bar${i}`,
+            value: b.value,
+            max,
+            ...(b.previous !== undefined ? { previous: b.previous } : {}),
+            label: b.label,
+            color,
+            ...(theme ? { theme } : {}),
+            x: contentX,
+            y: startY + i * rowStride,
+            width: contentW,
+            height: rowH,
+            time: 0,
+            duration,
+            staggerIndex: i,
+            layerBase: 20 + i * 10,
+        }));
+    });
+    return sceneGroup(props, children);
+}
+/** Ranked-list scene: headerBar + a centered rankedList (auto 1/2 columns). */
+export function rankingScene(props) {
+    const { canvasWidth: W, canvasHeight: H, color, theme, duration } = props;
+    const contentX = MARGIN;
+    const contentW = W - 2 * MARGIN;
+    const bodyTop = HEADER_H;
+    const bodyH = H - HEADER_H;
+    const children = [...frame(props)];
+    const n = props.items.length;
+    const cols = n > 6 ? 2 : 1;
+    const rowH = 130;
+    const itemsPerCol = cols === 2 ? Math.ceil(n / 2) : n;
+    const totalH = itemsPerCol * rowH;
+    const startY = bodyTop + (bodyH - totalH) / 2;
+    children.push(...rankedList({
+        id: `${props.id}-rank`,
+        items: props.items,
+        color,
+        ...(theme ? { theme } : {}),
+        x: contentX,
+        y: startY,
+        width: contentW,
+        columns: cols,
+        rowHeight: rowH,
+        time: 0,
+        duration,
+        layerBase: 20,
+    }));
+    return sceneGroup(props, children);
+}
+/** Pie-card scene: headerBar + a row of pieCards. Tuned for H≈1080. */
+export function pieScene(props) {
+    const { canvasWidth: W, color, theme, duration } = props;
+    const contentX = MARGIN;
+    const contentW = W - 2 * MARGIN;
+    const children = [...frame(props)];
+    const m = props.cards.length;
+    const slot = contentW / m;
+    props.cards.forEach((c, i) => {
+        children.push(...pieCard({
+            id: `${props.id}-pie${i}`,
+            value: c.value,
+            total: c.total,
+            ...(c.previous !== undefined ? { previous: c.previous } : {}),
+            ...(c.logoUrl ? { logoUrl: c.logoUrl } : {}),
+            label: c.label,
+            color,
+            ...(theme ? { theme } : {}),
+            cx: contentX + slot * (i + 0.5),
+            time: 0,
+            duration,
+            staggerIndex: i,
+            layerBase: 20 + i * 20,
+        }));
+    });
+    return sceneGroup(props, children);
+}
+//# sourceMappingURL=data-scenes.js.map

package/dist/data-scenes.js.map

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

package/dist/flow-line.d.ts

@@ -0,0 +1,27 @@
+import type { Element } from '@clipkit/protocol';
+export interface FlowLineProps {
+    id: string;
+    /** Strip centre (canvas coords). */
+    x: number;
+    y: number;
+    /** Strip length and thickness (px). */
+    length: number;
+    thickness: number;
+    /** Strip background colour. */
+    baseColor: string;
+    /** Moving stripe colour. */
+    stripeColor: string;
+    /** Scroll speed, px/s. Positive = stripes move left (bar appears to go right). Default 220. */
+    speed?: number;
+    /** Stripe slant in degrees. Default 22. */
+    angle?: number;
+    /** Stripe width (px); the gap matches it. Default 30. */
+    stripeWidth?: number;
+    /** Corner radius (px). Default = thickness/2 (full pill ends). */
+    radius?: number;
+    time: number;
+    duration: number;
+    track: number;
+}
+export declare function flowLine(props: FlowLineProps): Element;
+//# sourceMappingURL=flow-line.d.ts.map

package/dist/flow-line.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flow-line.d.ts","sourceRoot":"","sources":["../src/flow-line.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAIjD,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,oCAAoC;IACpC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,uCAAuC;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,+BAA+B;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,4BAA4B;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,+FAA+F;IAC/F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kEAAkE;IAClE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CA4CtD"}