@clipkit/patterns 1.0.0

package/dist/kinetic-headline.js

@@ -0,0 +1,39 @@
+// kineticHeadline — a bold headline that flies in letter-by-letter
+// (text-fly), with an optional accent rule. Pair with source motion blur
+// for the smeared, professional look.
+//
+// COMPONENT pattern: returns ONE plain `group`.
+import { assignLayers } from './layers.js';
+import { getFonts, getPalette } from './theme.js';
+export function kineticHeadline(props) {
+    const { id, text, subtitle, 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 children = [
+        {
+            id: `${id}-headline`, type: 'text', text, x: cx, y: cy, x_anchor: '50%', y_anchor: '50%',
+            font_family: fonts.sans, font_size: 112, font_weight: '800', fill_color: palette.text,
+            animations: [{ type: 'text-fly', split: 'letter', stagger: props.stagger ?? 0.05, distance: 160, direction: 'up', duration: 0.6, time: 0.2 }],
+        },
+        {
+            id: `${id}-rule`, type: 'shape', shape: 'rectangle', x: cx, y: cy + 86, x_anchor: '50%', y_anchor: '50%', width: 200, height: 6, border_radius: 3,
+            fill_color: palette.accent, time: 0.5,
+            keyframe_animations: [{ property: 'x_scale', keyframes: [{ time: 0, value: 0 }, { time: 0.5, value: 1, easing: 'ease-out' }] }],
+        },
+    ];
+    if (subtitle) {
+        children.push({
+            id: `${id}-sub`, type: 'text', text: subtitle, x: cx, y: cy + 130, x_anchor: '50%', y_anchor: '50%', time: 0.7,
+            font_family: fonts.sans, font_size: 26, letter_spacing: 1, fill_color: palette.textMuted,
+            animations: [{ type: 'fade-in', duration: 0.5 }],
+        });
+    }
+    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=kinetic-headline.js.map

package/dist/kinetic-headline.js.map

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

package/dist/layers.d.ts

@@ -0,0 +1,13 @@
+import type { Element } from '@clipkit/protocol';
+/** Distribute Omit across the Element union so each member keeps its own fields. */
+type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+/** An element as authored by a builder, before its `layer` is stamped. */
+export type UnlayeredElement = DistributiveOmit<Element, 'layer'>;
+/**
+ * Stamp dense, unique `layer` values onto an ordered (back-to-front)
+ * child list: index 0 (drawn first / behind) → layer N, the last entry
+ * (drawn last / in front) → layer 1. Returns fully-typed `Element`s.
+ */
+export declare function assignLayers(elements: readonly UnlayeredElement[]): Element[];
+export {};
+//# sourceMappingURL=layers.d.ts.map

package/dist/layers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layers.d.ts","sourceRoot":"","sources":["../src/layers.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,oFAAoF;AACpF,KAAK,gBAAgB,CAAC,CAAC,EAAE,CAAC,SAAS,WAAW,IAAI,CAAC,SAAS,OAAO,GAAG,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC;AAEzF,0EAA0E;AAC1E,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;AAElE;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,SAAS,gBAAgB,EAAE,GAAG,OAAO,EAAE,CAG7E"}

package/dist/layers.js

@@ -0,0 +1,19 @@
+// Generation-time layer assignment for builder children.
+//
+// Under the layer model every element in a container owns a UNIQUE
+// `layer` (1..1000) and LOWER numbers draw in FRONT (layer 1 on top) —
+// the After Effects convention. Builders author their children in
+// BACK-TO-FRONT array order (the natural "paint in order" reading), so
+// the helper stamps the LAST (front-most) child layer 1 and the FIRST
+// (back-most) child layer N. This preserves the authored stacking and
+// satisfies the per-container uniqueness invariant by construction.
+/**
+ * Stamp dense, unique `layer` values onto an ordered (back-to-front)
+ * child list: index 0 (drawn first / behind) → layer N, the last entry
+ * (drawn last / in front) → layer 1. Returns fully-typed `Element`s.
+ */
+export function assignLayers(elements) {
+    const n = elements.length;
+    return elements.map((el, i) => ({ ...el, layer: n - i }));
+}
+//# sourceMappingURL=layers.js.map

package/dist/layers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layers.js","sourceRoot":"","sources":["../src/layers.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,EAAE;AACF,mEAAmE;AACnE,uEAAuE;AACvE,kEAAkE;AAClE,uEAAuE;AACvE,sEAAsE;AACtE,sEAAsE;AACtE,oEAAoE;AAUpE;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,QAAqC;IAChE,MAAM,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC;IAC1B,OAAO,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,EAAE,CAAY,CAAC,CAAC;AACvE,CAAC"}

package/dist/liquid-morph.d.ts

@@ -0,0 +1,62 @@
+import type { Element, Easing } from '@clipkit/protocol';
+type Pt = [number, number];
+/** One waypoint in the flow. */
+export interface MorphShape {
+    /**
+     * Corner points (clockwise) in `view_box` units. EVERY shape in the flow
+     * MUST have the same number of corners so they morph role-for-role. For a
+     * triangle/arrow, repeat a collinear point to pad to the shared count.
+     */
+    corners: Pt[];
+    /** Corner radius (view_box units). Clamped per corner to half the shorter edge. */
+    radius?: number;
+    /** Comp time (seconds) at which this shape is fully formed. */
+    at: number;
+    /** Hold this shape for N seconds after `at` before morphing onward. Default 0. */
+    hold?: number;
+    /** Easing as this shape settles. Default `'ease-out-sine'` (a flow-through). */
+    easing?: Easing;
+}
+export interface LiquidMorphProps {
+    id: string;
+    /** Shapes to flow through, in order. Need at least 2. */
+    shapes: MorphShape[];
+    /** Fill color (hex) or `"url(#id)"`. */
+    fill: string;
+    /** Center + box (the path's `view_box` maps onto this). */
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    /** Path coordinate space. Default `[0, 0, width, height]`. */
+    view_box?: [number, number, number, number];
+    layer?: number;
+    /** Element start time. Default 0 (so `at` values read as comp time). */
+    time?: number;
+    duration: number;
+    /**
+     * How liquid the in-between is: 0 = straight morph (no blob), 1 = maximally
+     * round blob swell. Default 1.
+     */
+    liquidity?: number;
+    /** Extra fields merged onto the element (e.g. `opacity`, `keyframe_animations`). */
+    extra?: Partial<Element>;
+}
+/**
+ * Flow a path-form `shape` through `shapes`, liquid morphs between each.
+ *
+ * @example
+ * // a triangle → a line that streaks off-screen left → a play arrow
+ * liquidMorph({
+ *   id: 'flow', fill: '#EF4444',
+ *   x: 960, y: 540, width: 1920, height: 1080, duration: 6,
+ *   shapes: [
+ *     { corners: TRIANGLE, radius: 16, at: 0, hold: 1 },
+ *     { corners: LINE,     radius: 20, at: 1.5, hold: 0.5 },  // the "moving path"
+ *     { corners: PLAY,     radius: 16, at: 2.7 },
+ *   ],
+ * });
+ */
+export declare function liquidMorph(props: LiquidMorphProps): Element;
+export {};
+//# sourceMappingURL=liquid-morph.d.ts.map

package/dist/liquid-morph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"liquid-morph.d.ts","sourceRoot":"","sources":["../src/liquid-morph.ts"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,OAAO,EAAY,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAEnE,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAE3B,gCAAgC;AAChC,MAAM,WAAW,UAAU;IACzB;;;;OAIG;IACH,OAAO,EAAE,EAAE,EAAE,CAAC;IACd,mFAAmF;IACnF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+DAA+D;IAC/D,EAAE,EAAE,MAAM,CAAC;IACX,kFAAkF;IAClF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,yDAAyD;IACzD,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,wCAAwC;IACxC,IAAI,EAAE,MAAM,CAAC;IACb,2DAA2D;IAC3D,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oFAAoF;IACpF,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;CAC1B;AAkCD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,OAAO,CAwD5D"}

package/dist/liquid-morph.js

@@ -0,0 +1,113 @@
+// liquidMorph — flow ONE path-form `shape` through a sequence of shapes, so a
+// shape stretches into a travelling path and reforms as the next shape (the
+// "shape → moving path → shape" move from the Transition Tour).
+//
+// The motion reads as LIQUID because each morph passes through a "blob": the
+// half-way corners rounded as much as possible, so the path swells and flows
+// instead of sliding in a straight line. The blob is a flow-THROUGH waypoint
+// (accelerate in, decelerate out) — never a stop — so a hop A→B is one
+// continuous motion, not two.
+//
+// Every shape is a rounded polygon with the SAME number of corners in the same
+// order, so any two morph point-for-point with no twist (a triangle/arrow uses
+// a hidden collinear corner to reach the shared count). The end shapes are
+// exact; only the in-between is liquid.
+//
+// Emits ONE primitive `shape` element with a keyframed `paths[].d`. The runtime
+// never sees "liquidMorph" — it's authoring-time sugar over the protocol.
+const unit = (a, b) => {
+    const dx = b[0] - a[0], dy = b[1] - a[1], L = Math.hypot(dx, dy) || 1;
+    return [dx / L, dy / L];
+};
+const r1 = (x) => Math.round(x * 10) / 10;
+// Corners + radius → `M + N·(L Q) + Z`. Same N ⇒ two paths morph. Each corner
+// is one smooth quadratic; radius clamps to half the shorter edge so tight
+// corners can't overlap (no balls/nubs).
+function roundPoly(corners, radius) {
+    const n = corners.length;
+    const s = corners.map((c, i) => {
+        const prev = corners[(i - 1 + n) % n], next = corners[(i + 1) % n];
+        const rr = Math.min(radius, Math.hypot(c[0] - prev[0], c[1] - prev[1]) / 2, Math.hypot(c[0] - next[0], c[1] - next[1]) / 2);
+        const di = unit(c, prev), doo = unit(c, next);
+        return { i: [c[0] + di[0] * rr, c[1] + di[1] * rr], c, o: [c[0] + doo[0] * rr, c[1] + doo[1] * rr] };
+    });
+    let d = `M ${r1(s[0].o[0])} ${r1(s[0].o[1])}`;
+    for (let k = 1; k <= n; k++) {
+        const v = s[k % n];
+        d += ` L ${r1(v.i[0])} ${r1(v.i[1])} Q ${r1(v.c[0])} ${r1(v.c[1])} ${r1(v.o[0])} ${r1(v.o[1])}`;
+    }
+    return d + ' Z';
+}
+const lerpC = (a, b, t) => a.map((p, i) => [p[0] + (b[i][0] - p[0]) * t, p[1] + (b[i][1] - p[1]) * t]);
+// The liquid in-between: the half-way corners rounded by `liquidity` (1 = max).
+const blob = (a, b, liquidity) => roundPoly(lerpC(a, b, 0.5), 999 * liquidity);
+/**
+ * Flow a path-form `shape` through `shapes`, liquid morphs between each.
+ *
+ * @example
+ * // a triangle → a line that streaks off-screen left → a play arrow
+ * liquidMorph({
+ *   id: 'flow', fill: '#EF4444',
+ *   x: 960, y: 540, width: 1920, height: 1080, duration: 6,
+ *   shapes: [
+ *     { corners: TRIANGLE, radius: 16, at: 0, hold: 1 },
+ *     { corners: LINE,     radius: 20, at: 1.5, hold: 0.5 },  // the "moving path"
+ *     { corners: PLAY,     radius: 16, at: 2.7 },
+ *   ],
+ * });
+ */
+export function liquidMorph(props) {
+    const { id, shapes, fill, x, y, width, height, duration, view_box = [0, 0, width, height], layer = 1, time = 0, liquidity = 1, extra, } = props;
+    if (shapes.length < 2)
+        throw new Error('liquidMorph: need at least 2 shapes');
+    const n = shapes[0].corners.length;
+    for (const s of shapes) {
+        if (s.corners.length !== n) {
+            throw new Error(`liquidMorph: every shape needs ${n} corners (got ${s.corners.length}); pad triangles/arrows with a collinear point`);
+        }
+    }
+    const d = [];
+    const first = shapes[0];
+    const d0 = roundPoly(first.corners, first.radius ?? 0);
+    d.push({ time: first.at, value: d0 });
+    let prevEnd = first.at;
+    if (first.hold) {
+        prevEnd = first.at + first.hold;
+        d.push({ time: prevEnd, value: d0 });
+    }
+    for (let i = 1; i < shapes.length; i++) {
+        const s = shapes[i], p = shapes[i - 1];
+        const dTarget = roundPoly(s.corners, s.radius ?? 0);
+        if (liquidity > 0) {
+            // Flow through a blob at the time-midpoint: accelerate in, decelerate out.
+            const mid = (prevEnd + s.at) / 2;
+            d.push({ time: mid, value: blob(p.corners, s.corners, liquidity), easing: 'ease-in-sine' });
+            d.push({ time: s.at, value: dTarget, easing: s.easing ?? 'ease-out-sine' });
+        }
+        else {
+            d.push({ time: s.at, value: dTarget, easing: s.easing ?? 'ease-in-out-sine' });
+        }
+        prevEnd = s.at;
+        if (s.hold) {
+            prevEnd = s.at + s.hold;
+            d.push({ time: prevEnd, value: dTarget });
+        }
+    }
+    return {
+        id,
+        type: 'shape',
+        layer,
+        time,
+        duration,
+        x,
+        y,
+        x_anchor: '50%',
+        y_anchor: '50%',
+        width,
+        height,
+        view_box,
+        paths: [{ fill, d }],
+        ...extra,
+    };
+}
+//# sourceMappingURL=liquid-morph.js.map

package/dist/liquid-morph.js.map

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

package/dist/lit-surface.d.ts

@@ -0,0 +1,38 @@
+import type { Element, Material } from '@clipkit/protocol';
+export interface LitSurfaceProps {
+    /** Id prefix for produced elements. */
+    id: string;
+    /** Card center in canvas px. */
+    x: number;
+    y: number;
+    /** Card size in px. Default 1200×720. */
+    width?: number;
+    height?: number;
+    /**
+     * Card content — primitive elements positioned RELATIVE to the card's
+     * top-left (0,0 = card corner). They flatten into the lit plane.
+     */
+    elements: Element[];
+    /** Fill painted behind the content. Default a dark slate. */
+    background?: string;
+    /** Corner radius in px. Default 36. */
+    borderRadius?: number;
+    /**
+     * PBR material. Default a glossy dark-UI look (medium-low roughness,
+     * fairly metallic) so a key light reads as a soft sweeping sheen.
+     */
+    material?: Material;
+    /**
+     * Peak y-rotation in degrees; the card swings ±tilt (ping-pong) over
+     * its lifetime so the highlight sweeps. Default 0 (static — drive it
+     * with a Source camera instead). Pair with `camera.perspective`.
+     */
+    tilt?: number;
+    /** Push toward (+) / away from (−) the camera, px. Default 0. */
+    z?: number;
+    time: number;
+    duration: number;
+    layer: number;
+}
+export declare function litSurface(props: LitSurfaceProps): Element;
+//# sourceMappingURL=lit-surface.d.ts.map

package/dist/lit-surface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lit-surface.d.ts","sourceRoot":"","sources":["../src/lit-surface.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE3D,MAAM,WAAW,eAAe;IAC9B,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,gCAAgC;IAChC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,6DAA6D;IAC7D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uCAAuC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AAID,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,OAAO,CAiD1D"}

package/dist/lit-surface.js

@@ -0,0 +1,63 @@
+// litSurface — a UI card that responds to scene light (LIGHTING §4.8).
+//
+// COMPONENT pattern: returns ONE `clip: true` group carrying a `material`.
+// The §4.4.3 flattening rule composites the children into a single layer,
+// and the runtime then shades that layer as ONE lit plane — so a
+// view-dependent sheen / environment reflection sweeps across the whole
+// card as the camera moves (textured-surface lighting).
+//
+// Pair with Source-level lighting to see anything:
+//   source.lights       — ambient fill + a directional key
+//   source.environment  — a gradient "sky" the surface mirrors (optional)
+// Without lights and without an environment the card renders unlit (the
+// material is simply ignored — opt-in, zero cost).
+const DEFAULT_MATERIAL = { roughness: 0.38, metalness: 0.8, reflectivity: 1 };
+export function litSurface(props) {
+    const { id, x, y, elements, time, duration, layer } = props;
+    const W = props.width ?? 1200;
+    const H = props.height ?? 720;
+    const radius = props.borderRadius ?? 36;
+    const tilt = props.tilt ?? 0;
+    const body = {
+        id: `${id}-bg`,
+        type: 'shape',
+        shape: 'rectangle',
+        layer: 0,
+        x: 0,
+        y: 0,
+        width: W,
+        height: H,
+        fill_color: props.background ?? '#161f38',
+    };
+    return {
+        id,
+        type: 'group',
+        layer,
+        time,
+        duration,
+        x,
+        y,
+        x_anchor: '50%',
+        y_anchor: '50%',
+        width: W,
+        height: H,
+        clip: true,
+        border_radius: radius,
+        material: props.material ?? DEFAULT_MATERIAL,
+        ...(props.z !== undefined ? { z: props.z } : {}),
+        ...(tilt !== 0
+            ? {
+                keyframe_animations: [{
+                        property: 'y_rotation',
+                        loop: 'ping-pong',
+                        keyframes: [
+                            { time: 0, value: -tilt },
+                            { time: Math.max(0.1, duration / 2), value: tilt, easing: 'ease-in-out' },
+                        ],
+                    }],
+            }
+            : {}),
+        elements: [body, ...elements],
+    };
+}
+//# sourceMappingURL=lit-surface.js.map

package/dist/lit-surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lit-surface.js","sourceRoot":"","sources":["../src/lit-surface.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,EAAE;AACF,2EAA2E;AAC3E,0EAA0E;AAC1E,iEAAiE;AACjE,wEAAwE;AACxE,wDAAwD;AACxD,EAAE;AACF,mDAAmD;AACnD,2DAA2D;AAC3D,0EAA0E;AAC1E,wEAAwE;AACxE,mDAAmD;AAwCnD,MAAM,gBAAgB,GAAa,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC;AAExF,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAC5D,MAAM,CAAC,GAAG,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC;IAC9B,MAAM,CAAC,GAAG,KAAK,CAAC,MAAM,IAAI,GAAG,CAAC;IAC9B,MAAM,MAAM,GAAG,KAAK,CAAC,YAAY,IAAI,EAAE,CAAC;IACxC,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAE7B,MAAM,IAAI,GAAY;QACpB,EAAE,EAAE,GAAG,EAAE,KAAK;QACd,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,WAAW;QAClB,KAAK,EAAE,CAAC;QACR,CAAC,EAAE,CAAC;QACJ,CAAC,EAAE,CAAC;QACJ,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,UAAU,EAAE,KAAK,CAAC,UAAU,IAAI,SAAS;KAC1C,CAAC;IAEF,OAAO;QACL,EAAE;QACF,IAAI,EAAE,OAAO;QACb,KAAK;QACL,IAAI;QACJ,QAAQ;QACR,CAAC;QACD,CAAC;QACD,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,IAAI,EAAE,IAAI;QACV,aAAa,EAAE,MAAM;QACrB,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,gBAAgB;QAC5C,GAAG,CAAC,KAAK,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAChD,GAAG,CAAC,IAAI,KAAK,CAAC;YACZ,CAAC,CAAC;gBACE,mBAAmB,EAAE,CAAC;wBACpB,QAAQ,EAAE,YAAY;wBACtB,IAAI,EAAE,WAAoB;wBAC1B,SAAS,EAAE;4BACT,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,IAAI,EAAE;4BACzB,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,QAAQ,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE;yBAC1E;qBACF,CAAC;aACH;YACH,CAAC,CAAC,EAAE,CAAC;QACP,QAAQ,EAAE,CAAC,IAAI,EAAE,GAAG,QAAQ,CAAC;KAC9B,CAAC;AACJ,CAAC"}

package/dist/lower-third.d.ts

@@ -0,0 +1,26 @@
+import type { Element } from '@clipkit/protocol';
+import { type ColorName, type ThemeName } from './theme.js';
+export interface LowerThirdProps {
+    /** Used as the id prefix for every produced element. */
+    id: string;
+    /** Speaker / subject name — the bold line. */
+    name: string;
+    /** Optional role / title line under the name. */
+    role?: string;
+    /** Accent color slot — drives the leading bar. */
+    color: ColorName;
+    theme?: ThemeName;
+    /**
+     * Position of the strip's LEFT EDGE / vertical center, in canvas px.
+     * Typical: x = 80, y = canvasHeight - 180.
+     */
+    x: number;
+    y: number;
+    time: number;
+    duration: number;
+    layer: number;
+    /** Panel width in px. Default 560. */
+    width?: number;
+}
+export declare function lowerThird(props: LowerThirdProps): Element;
+//# sourceMappingURL=lower-third.d.ts.map

package/dist/lower-third.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lower-third.d.ts","sourceRoot":"","sources":["../src/lower-third.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAwB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAElF,MAAM,WAAW,eAAe;IAC9B,wDAAwD;IACxD,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,OAAO,CA6F1D"}

package/dist/lower-third.js

@@ -0,0 +1,101 @@
+// LowerThird — the broadcast name/role strip: an accent bar, a white
+// panel with the speaker's name and an optional role line, sliding in
+// from the left and exiting before the element window closes.
+//
+// COMPONENT pattern: returns a single `group` element so the strip is
+// positioned, animated, or time-remapped as one unit, and expands to
+// plain primitives only (no nested-composition schema element exists —
+// reuse is an authoring-function concern, §5.8.3 covers nested time).
+import { assignLayers } from './layers.js';
+import { getFonts, getPalette } from './theme.js';
+export function lowerThird(props) {
+    const { id, name, role, color, x, y, time, duration, layer } = props;
+    const theme = props.theme ?? 'mux';
+    const palette = getPalette(theme, color);
+    const fonts = getFonts(theme);
+    const W = props.width ?? 560;
+    const H = role ? 124 : 96;
+    const BAR_W = 12;
+    const PAD = 28;
+    const SLIDE = 0.45;
+    // Children are in group-local coordinates ((0,0) = panel top-left).
+    const children = [
+        {
+            id: `${id}-panel`,
+            type: 'shape',
+            shape: 'rectangle',
+            x: W / 2,
+            y: H / 2,
+            x_anchor: '50%',
+            y_anchor: '50%',
+            width: W,
+            height: H,
+            fill_color: '#ffffff',
+            border_radius: 8,
+        },
+        {
+            id: `${id}-bar`,
+            type: 'shape',
+            shape: 'rectangle',
+            x: BAR_W / 2,
+            y: H / 2,
+            x_anchor: '50%',
+            y_anchor: '50%',
+            width: BAR_W,
+            height: H,
+            fill_color: palette.accent,
+            border_radius: 4,
+        },
+        {
+            id: `${id}-name`,
+            type: 'text',
+            time: 0.15,
+            text: name,
+            x: BAR_W + PAD,
+            y: role ? H / 2 - 22 : H / 2,
+            x_anchor: 0,
+            y_anchor: '50%',
+            font_family: fonts.sans,
+            font_size: 40,
+            font_weight: '700',
+            fill_color: palette.text,
+            animations: [{ type: 'fade-in', duration: 0.4 }],
+        },
+    ];
+    if (role) {
+        children.push({
+            id: `${id}-role`,
+            type: 'text',
+            time: 0.3,
+            text: role,
+            x: BAR_W + PAD,
+            y: H / 2 + 26,
+            x_anchor: 0,
+            y_anchor: '50%',
+            font_family: fonts.sans,
+            font_size: 28,
+            fill_color: palette.textMuted,
+            animations: [{ type: 'fade-in', duration: 0.4 }],
+        });
+    }
+    return {
+        id,
+        type: 'group',
+        layer,
+        time,
+        duration,
+        x,
+        y,
+        x_anchor: 0,
+        y_anchor: 0.5,
+        width: W,
+        height: H,
+        animations: [
+            { type: 'fade-in', duration: SLIDE },
+            { type: 'slide-left-in', duration: SLIDE, easing: 'ease-out' },
+            { type: 'fade-out', time: 'end', duration: 0.4 },
+        ],
+        elements: assignLayers(children),
+    };
+}
+//# sourceMappingURL=lower-third.js.map

package/dist/lower-third.js.map

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

package/dist/morph-shape.d.ts

@@ -0,0 +1,42 @@
+import type { Element } from '@clipkit/protocol';
+export interface MorphFrame {
+    /** SVG path data. Use `morphPaths.*` (or any path) — all frames must share the
+     *  same command structure to morph rather than snap. */
+    d: string;
+    /** Time (seconds, element-local) this shape is reached. */
+    at: number;
+    /** Easing into this frame (e.g. 'ease-in-out'). */
+    easing?: string;
+}
+export interface MorphShapeProps {
+    id: string;
+    /** Shapes to morph through, in order (≥1). */
+    frames: MorphFrame[];
+    /** SVG user space the paths are drawn in. Default [0,0,200,200]. */
+    viewBox?: [number, number, number, number];
+    /** On-canvas size + centre. */
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    time: number;
+    duration: number;
+    track: number;
+}
+export declare function morphShape(props: MorphShapeProps): Element;
+export declare function morphPaths(V?: number): {
+    /** A fat horizontal line / pill body. */
+    bar: (t?: number) => string;
+    /** A tapered wedge (thin left → thick right). */
+    wedge: (t?: number) => string;
+    /** A right-pointing play arrow (▶) — tip vertex doubled. */
+    arrow: () => string;
+    /** A diamond / rotated square. */
+    diamond: () => string;
+    /** A parallelogram (slab). */
+    slab: (skew?: number) => string;
+};
+//# sourceMappingURL=morph-shape.d.ts.map

package/dist/morph-shape.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"morph-shape.d.ts","sourceRoot":"","sources":["../src/morph-shape.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,MAAM,WAAW,UAAU;IACzB;4DACwD;IACxD,CAAC,EAAE,MAAM,CAAC;IACV,2DAA2D;IAC3D,EAAE,EAAE,MAAM,CAAC;IACX,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,oEAAoE;IACpE,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3C,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,OAAO,CAuB1D;AASD,wBAAgB,UAAU,CAAC,CAAC,SAAM;IAI9B,yCAAyC;;IAEzC,iDAAiD;;IAEjD,4DAA4D;;IAE5D,kCAAkC;;IAElC,8BAA8B;;EAGjC"}

package/dist/morph-shape.js

@@ -0,0 +1,57 @@
+// morphShape — an SVG element whose path `d` morphs through a sequence of shapes
+// over time. The runtime interpolates `d` keyframes point-by-point ONLY when the
+// two paths share the same command structure (same letters, same argument
+// counts) — mismatched paths snap instead of morph, and arcs (A) never morph.
+//
+// So the value here is `morphPaths`: a family of shape builders that ALL emit the
+// same 4-point `M·L·L·L·Z` structure on a shared viewBox, guaranteeing any two
+// morph smoothly (bar → wedge → arrow → diamond, etc.). Combine with travel by
+// dropping the result in a group with an animated `x`, and push in on it with a
+// `zoomRig` for the full "button becomes a line, travels, becomes something else"
+// gesture.
+export function morphShape(props) {
+    const { id, frames, width, height, x, y, fill, stroke, strokeWidth, time, duration, track } = props;
+    const viewBox = props.viewBox ?? [0, 0, 200, 200];
+    const path = {
+        d: frames.map((fr) => ({ time: fr.at, value: fr.d, ...(fr.easing ? { easing: fr.easing } : {}) })),
+        ...(fill ? { fill } : {}),
+        ...(stroke ? { stroke } : {}),
+        ...(strokeWidth ? { stroke_width: strokeWidth } : {}),
+    };
+    return {
+        id,
+        type: 'svg',
+        track,
+        time,
+        duration,
+        view_box: viewBox,
+        width,
+        height,
+        x,
+        y,
+        paths: [path],
+    };
+}
+// ── compatible shape builders ─────────────────────────────────────────────────
+// Every builder returns a 4-point `M x y L x y L x y L x y Z` path on a V×V box,
+// so ANY pair morphs point-by-point. Shapes that are "really" triangles repeat a
+// vertex to keep the 4-point count. `t` = stroke/line half-thickness (px in VB).
+const f = (n) => Math.round(n * 100) / 100;
+const quad = (p) => `M${f(p[0][0])} ${f(p[0][1])} L${f(p[1][0])} ${f(p[1][1])} L${f(p[2][0])} ${f(p[2][1])} L${f(p[3][0])} ${f(p[3][1])} Z`;
+export function morphPaths(V = 200) {
+    const c = V / 2;
+    const pad = V * 0.12;
+    return {
+        /** A fat horizontal line / pill body. */
+        bar: (t = V * 0.06) => quad([[pad, c - t], [V - pad, c - t], [V - pad, c + t], [pad, c + t]]),
+        /** A tapered wedge (thin left → thick right). */
+        wedge: (t = V * 0.12) => quad([[pad, c - t * 0.25], [V - pad, c - t], [V - pad, c + t], [pad, c + t * 0.25]]),
+        /** A right-pointing play arrow (▶) — tip vertex doubled. */
+        arrow: () => quad([[pad, pad], [V - pad, c], [V - pad, c], [pad, V - pad]]),
+        /** A diamond / rotated square. */
+        diamond: () => quad([[c, pad], [V - pad, c], [c, V - pad], [pad, c]]),
+        /** A parallelogram (slab). */
+        slab: (skew = V * 0.16) => quad([[pad + skew, c - V * 0.18], [V - pad, c - V * 0.18], [V - pad - skew, c + V * 0.18], [pad, c + V * 0.18]]),
+    };
+}
+//# sourceMappingURL=morph-shape.js.map