motionloom 2.0.0

package/templates/framer-motion/ui-micro.tsx

@@ -0,0 +1,50 @@
+/**
+ * ui-micro.tsx — Canonical Framer Motion micro-interaction component.
+ * Durations and easings come from motion-spec.json / the project manifest,
+ * never from inline magic numbers.
+ */
+import { motion, type MotionProps, useReducedMotion } from "framer-motion";
+
+export interface MicroSpec {
+  duration: number;   // seconds, from motion-spec.json
+  easing: string;     // canonical easing name
+}
+
+const EASE_MAP: Record<string, [number, number, number, number]> = {
+  "ease-in-out": [0.42, 0, 0.58, 1],
+  "ease-out": [0, 0, 0.58, 1],
+  "ease-in": [0.42, 0, 1, 1],
+  spring: [0.34, 1.56, 0.64, 1] as unknown as [number, number, number, number],
+};
+
+/** Shared press-scale treatment for buttons/cards (the project-wide default). */
+export const pressable: MotionProps = {
+  whileHover: { scale: 1.03, transition: { type: "spring", stiffness: 400, damping: 25 } },
+  whileTap: { scale: 0.97 },
+};
+
+/**
+ * Wrap any child with the project's entrance motion. Use on cards, rows,
+ * and list items. The stagger offset is computed, not magic.
+ */
+export function entrance({ duration, easing }: MicroSpec, index = 0) {
+  return {
+    initial: { opacity: 0, y: 12 },
+    animate: { opacity: 1, y: 0 },
+    transition: {
+      duration,
+      ease: EASE_MAP[easing] ?? EASE_MAP["ease-in-out"],
+      delay: index * duration * 0.25,
+    },
+  };
+}
+
+/** Reduced-motion aware variant component. */
+export function MotionSafe(props: MotionProps & { as?: keyof JSX.IntrinsicElements }) {
+  const reduce = useReducedMotion();
+  const { as = "div", ...rest } = props;
+  return motion[as]({
+    ...rest,
+    transition: reduce ? { duration: 0 } : rest.transition,
+  });
+}

package/templates/gsap/scroll-scene.js

@@ -0,0 +1,54 @@
+/**
+ * scroll-scene.js — Canonical GSAP scroll-linked scene template.
+ * Uses ScrollTrigger with scrub; never attaches raw scroll listeners
+ * (ScrollTrigger already batches and rAF-schedules updates).
+ *
+ * Bind duration/easing to motion-spec.json; never hardcode magic numbers.
+ */
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+gsap.registerPlugin(ScrollTrigger);
+
+/**
+ * @param {string} trigger   CSS selector of the pin/trigger element
+ * @param {HTMLElement[]} targets  elements to animate, in motion order
+ * @param {object} spec      motion-spec.json values
+ */
+export function buildScrollScene(trigger, targets, spec) {
+  const tl = gsap.timeline({
+    scrollTrigger: {
+      trigger,
+      start: "top 80%",
+      end: "bottom 20%",
+      scrub: 0.6,             // smooth scrub; 0 for hard lock
+      toggleActions: "play none none reverse",
+    },
+  });
+
+  targets.forEach((el, i) => {
+    tl.to(
+      el,
+      {
+        opacity: 1,
+        y: 0,
+        duration: 0.25,
+        ease: spec.easing ?? "power2.out",
+      },
+      i * 0.08,               // stagger bound to scene, not magic
+    );
+  }, 0);
+
+  return tl;
+}
+
+/**
+ * Reduced-motion guard: collapse the whole timeline into a single fade.
+ * Call once at boot.
+ */
+export function honorReducedMotion(tl) {
+  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    tl.scrollTrigger.disable();
+    tl.progress(1);
+  }
+}

package/templates/lottie/README.md

@@ -0,0 +1,21 @@
+# Lottie / dotLottie Templates
+
+Scaffold every Lottie scene from this directory. The workflow: copy `scaffold/` into `src/output/<scene>/`, replace `assets/svg-source.svg` with the authoritative vector art, run the generation prompt against the spec, then convert the resulting `animation.json` into `animation.lottie` (see `scripts/to-dotlottie.sh`).
+
+## Files
+
+| File | Purpose |
+|---|---|
+| `scaffold/animation.json` | Minimal valid Bodymovin v5.12 document — the canonical shape every generated file must validate against |
+| `scaffold/character-rig.svg` | Cutout avatar ready for `src/rig/cutout_rig.py build` |
+| `player.html` | Standalone dotLottie player for quick local inspection (`open player.html`) |
+| `react-component.tsx` | Production React component using `@lottiefiles/dotlottie-react` with worker offload and reduced-motion support |
+| `vanilla.js` | Production vanilla-js bootstrap with `DotLottieWorker` and visibility freeze |
+
+## Generation prompt recipe (for coding agents)
+
+> Create a Lottie animation from the SVG path in `<source url>`. Reveal the path with an animation that follows the natural path direction. Apply a premium gradient bound to the project's primary/accent tokens. Use ease-in-out timing, a transparent background, preserve the original SVG geometry, 60 fps, total `<N>` frames. Expose the primary color as a dotLottie slot named `primary-color`.
+
+## Validation
+
+A generated file is accepted only if `scripts/validate-lottie.py` passes: version header, frame count vs. spec, layer count under budget, and slot names matching the brand spec.

package/templates/lottie/react-component.tsx

@@ -0,0 +1,82 @@
+/**
+ * production-dotlottie.tsx — Canonical React component for a dotLottie scene.
+ * Copied into the host project per scene. Binds brand theme slots at runtime,
+ * offloads rendering to a Web Worker, honors prefers-reduced-motion, and
+ * exposes a uniform seek() so the Dev Lab snapshot harness can drive it.
+ */
+import { useEffect, useRef, useState } from "react";
+import {
+  DotLottieReact,
+  type DotLottie,
+} from "@lottiefiles/dotlottie-react";
+
+interface SceneProps {
+  src: string;                 // /scenes/<name>/animation.lottie
+  ariaLabel?: string;          // required for accessibility
+  className?: string;
+  /** Runtime brand overrides: { slotId: color|value } */
+  theme?: Record<string, unknown>;
+}
+
+/** Uniform API consumed by the Dev Lab snapshot harness and tests. */
+export interface LabHandle {
+  seek: (pct: number) => void; // 0-1
+  play: () => void;
+  pause: () => void;
+}
+
+declare global {
+  interface Window {
+    __lab?: Record<string, LabHandle>;
+  }
+}
+
+export default function DotLottieScene({
+  src,
+  ariaLabel = "Animated illustration",
+  className,
+  theme = {},
+}: SceneProps) {
+  const ref = useRef<DotLottie | null>(null);
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    const d = ref.current;
+    if (!d) return;
+    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    d.setLoop(!reduced); // looping decorations pause under reduced motion
+    // Apply brand theme slots (see project-context.json brand.primary)
+    const rules = Object.entries(theme).map(([id, value]) => ({ id, value }));
+    if (rules.length) d.setThemeData(JSON.stringify({ rules }));
+    // Register the uniform lab handle for snapshot/testing harnesses
+    window.__lab = window.__lab || {};
+    window.__lab[src] = {
+      seek: (pct) => {
+        if (!d.isLoaded) return;
+        d.setLoop(false);
+        d.setFrame(pct * (d.totalFrames - 1));
+      },
+      play: () => d.play(),
+      pause: () => d.pause(),
+    };
+    return () => {
+      delete window.__lab?.[src];
+    };
+  }, [src, theme]);
+
+  return (
+    <div role="img" aria-label={ariaLabel} className={className}>
+      {!ready && <span aria-hidden className="sr-only" />}
+      <DotLottieReact
+        src={src}
+        autoplay
+        loop
+        style={{ width: "100%", height: "100%" }}
+        dotLottieRefCallback={(dotLottie) => {
+          ref.current = dotLottie;
+          dotLottie.addEventListener("load", () => setReady(true));
+        }}
+      />
+    </div>
+  );
+}

package/templates/lottie/scaffold/animation.json

@@ -0,0 +1,57 @@
+{
+  "v": "5.12.0",
+  "fr": 60,
+  "ip": 0,
+  "op": 60,
+  "w": 512,
+  "h": 512,
+  "nm": "generated-scene",
+  "ddd": 0,
+  "assets": [],
+  "layers": [
+    {
+      "ddd": 0,
+      "ind": 1,
+      "ty": 4,
+      "nm": "shape-layer",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100 },
+        "r": { "a": 0, "k": 0 },
+        "p": { "a": 0, "k": [256, 256, 0] },
+        "a": { "a": 0, "k": [0, 0, 0] },
+        "s": {
+          "a": 1,
+          "k": [
+            { "t": 0,  "s": [80, 80, 100], "i": { "x": [0.4], "y": [1] }, "o": { "x": [0.6], "y": [0] } },
+            { "t": 30, "s": [105, 105, 100], "i": { "x": [0.4], "y": [1] }, "o": { "x": [0.6], "y": [0] } },
+            { "t": 60, "s": [100, 100, 100] }
+          ]
+        }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            { "ty": "el", "p": { "a": 0, "k": [0, 0] }, "s": { "a": 0, "k": [120, 120] } },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.145, 0.388, 0.922, 1] },
+              "o": { "a": 0, "k": 100 },
+              "r": 1
+            },
+            { "ty": "tr", "p": { "a": 0, "k": [0, 0] }, "a": { "a": 0, "k": [0, 0] }, "s": { "a": 0, "k": [100, 100] }, "r": { "a": 0, "k": 0 }, "o": { "a": 0, "k": 100 } }
+          ]
+        }
+      ],
+      "ip": 0,
+      "op": 60,
+      "st": 0
+    }
+  ],
+  "markers": [
+    { "cm": "loop-start", "tm": 0, "dr": 30 },
+    { "cm": "loop-end", "tm": 30, "dr": 30 }
+  ]
+}

package/templates/lottie/scaffold/character-rig.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 450">
+  <!-- Authoritative base art. Replace shapes below with licensed/owned character art.
+       Part names MUST match the bone list in src/rig/cutout_rig.py:
+       head, chest, l/r_upper_arm, l/r_forearm, l/r_thigh, l/r_shin, l/r_foot -->
+  <g id="parts">
+    <circle data-part="head" cx="250" cy="90" r="42" fill="#2d2d3a"/>
+    <rect data-part="chest" x="208" y="140" width="84" height="96" rx="22" fill="#2d2d3a"/>
+    <rect data-part="l_upper_arm" x="178" y="148" width="26" height="78" rx="13" fill="#45455a"/>
+    <rect data-part="r_upper_arm" x="296" y="148" width="26" height="78" rx="13" fill="#45455a"/>
+    <rect data-part="l_forearm" x="176" y="228" width="22" height="70" rx="11" fill="#45455a"/>
+    <rect data-part="r_forearm" x="302" y="228" width="22" height="70" rx="11" fill="#45455a"/>
+    <rect data-part="l_thigh" x="216" y="238" width="30" height="84" rx="15" fill="#37374a"/>
+    <rect data-part="r_thigh" x="254" y="238" width="30" height="84" rx="15" fill="#37374a"/>
+    <rect data-part="l_shin" x="218" y="324" width="26" height="80" rx="13" fill="#37374a"/>
+    <rect data-part="r_shin" x="256" y="324" width="26" height="80" rx="13" fill="#37374a"/>
+    <ellipse data-part="l_foot" cx="231" cy="408" rx="24" ry="10" fill="#1f1f2e"/>
+    <ellipse data-part="r_foot" cx="269" cy="408" rx="24" ry="10" fill="#1f1f2e"/>
+  </g>
+</svg>

package/templates/lottie/vanilla.js

@@ -0,0 +1,68 @@
+/**
+ * production-vanilla.js — Canonical vanilla-JS bootstrap for a dotLottie scene.
+ * Uses DotLottieWorker to keep the main thread free, freezes when offscreen,
+ * honors prefers-reduced-motion, and registers the uniform window.__lab handle.
+ */
+import { DotLottieWorker } from "@lottiefiles/dotlottie-web";
+
+/**
+ * @param {HTMLCanvasElement} canvas
+ * @param {string} src
+ * @param {object} [opts]
+ * @param {Record<string, unknown>} [opts.theme]  brand slot overrides
+ * @param {string} [opts.ariaLabel]
+ */
+export function mountLottieScene(canvas, src, opts = {}) {
+  const dotLottie = new DotLottieWorker({
+    canvas,
+    src,
+    autoplay: true,
+    loop: true,
+    renderConfig: { autoResize: true },
+  });
+
+  const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+  dotLottie.addEventListener("load", () => {
+    if (reduced) dotLottie.setLoop(false);
+    if (opts.theme) {
+      const rules = Object.entries(opts.theme).map(([id, value]) => ({ id, value }));
+      dotLottie.setThemeData(JSON.stringify({ rules }));
+    }
+    // Uniform lab handle for the Dev Lab snapshot harness
+    window.__lab = window.__lab || {};
+    window.__lab[src] = {
+      seek: (pct) => {
+        dotLottie.setLoop(false);
+        dotLottie.setFrame(pct * (dotLottie.totalFrames - 1));
+      },
+      play: () => dotLottie.play(),
+      pause: () => dotLottie.pause(),
+    };
+  });
+
+  // Interactive hooks: hover plays, click restarts
+  canvas.addEventListener("mouseenter", () => dotLottie.play());
+  canvas.addEventListener("mouseleave", () => dotLottie.pause());
+  canvas.addEventListener("click", () => {
+    dotLottie.setFrame(0);
+    dotLottie.setLoop(false);
+    dotLottie.play();
+  });
+
+  // Cleanup on removal
+  const observer = new MutationObserver((records) => {
+    for (const r of records) {
+      for (const node of r.removedNodes) {
+        if (node === canvas) {
+          dotLottie.destroy();
+          observer.disconnect();
+          delete window.__lab?.[src];
+        }
+      }
+    }
+  });
+  observer.observe(canvas.parentElement ?? document.body, { childList: true });
+
+  return dotLottie;
+}

package/templates/rive/README.md

@@ -0,0 +1,36 @@
+# Rive Templates
+
+Rive scenes are editor-authored, so this template set covers the runtime side: the React component with state-machine inputs bound to project tokens, and the rules for naming inputs so the analyzer can drive them.
+
+## Runtime component pattern
+
+```tsx
+import { useRive, StateMachineInput, InputType } from "@rive-app/react-canvas";
+
+export default function RiveScene({ src, theme }: { src: string; theme?: Record<string, unknown> }) {
+  const { RiveComponent, rive } = useRive({
+    src,
+    stateMachines: "Main",
+    autoplay: true,
+  });
+
+  useEffect(() => {
+    if (!rive) return;
+    // Inputs follow the canonical naming: <token>_<slot> (e.g. primary_color)
+    for (const [name, value] of Object.entries(theme ?? {})) {
+      const input = rive.stateMachineInputs("Main")?.find((i) => i.name === name);
+      if (input?.type === InputType.Number) input.value = Number(value);
+    }
+  }, [rive, theme]);
+
+  return <RiveComponent style={{ width: "100%", height: "100%" }} />;
+}
+```
+
+## Rules for editor authors
+
+Name every color-controlling input `<token>_<slot>` so the analyzer's brand tokens map automatically. Keep the state machine flat (≤6 states) for UI assets. Export at 60 fps from the Rive editor; keep the .riv under 300 KB for UI scenes.
+
+## License note
+
+Rive runtimes are Apache-2.0 and free to bundle. The Rive editor is subject to Rive's own terms — record this in the scene manifest `license_note`.

package/tests/evals/intelligence-cases.json

@@ -0,0 +1,131 @@
+{
+  "schema_version": "0.1",
+  "suite": "motionloom-intelligence-core",
+  "cases": [
+    {
+      "id": "verified-runtime-selection",
+      "class": "positive",
+      "assertion": "A verified runtime with fresh matching evidence can be selected."
+    },
+    {
+      "id": "scaffold-runtime-blocked",
+      "class": "negative",
+      "assertion": "A scaffold-only runtime cannot be selected as production verified."
+    },
+    {
+      "id": "stale-capability-evidence",
+      "class": "negative",
+      "assertion": "A verified capability whose evidence is older than policy is rejected."
+    },
+    {
+      "id": "tampered-capability-evidence",
+      "class": "negative",
+      "assertion": "A capability with a mismatched evidence hash is rejected."
+    },
+    {
+      "id": "graph-edge-corruption",
+      "class": "negative",
+      "assertion": "A graph edge referencing an unknown node is rejected."
+    },
+    {
+      "id": "replay-artifact-tamper",
+      "class": "negative",
+      "assertion": "A replay bundle fails after a bound artifact is changed."
+    },
+    {
+      "id": "foreign-task-candidate",
+      "class": "negative",
+      "assertion": "A browser-review candidate belonging to another task is rejected."
+    },
+    {
+      "id": "p1-human-review-warning-preserved",
+      "class": "positive",
+      "assertion": "A human-review semantic warning remains visible and is not converted into approval."
+    },
+    {
+      "id": "p1-generic-intent-warning",
+      "class": "negative",
+      "assertion": "A generic Motion IR intent produces a deterministic low-specificity warning."
+    },
+    {
+      "id": "p1-continuity-context-drift",
+      "class": "negative",
+      "assertion": "A context hash change between adjacent scenes is reported as continuity drift."
+    },
+    {
+      "id": "p1-fix-plan-selective-rerun",
+      "class": "positive",
+      "assertion": "A fix plan is handoff-bound and contains a selective rerun scope for its findings."
+    },
+    {
+      "id": "p1-perf-duration-budget-warning",
+      "class": "negative",
+      "assertion": "A UI-context animation over 500 ms produces a non-blocking performance budget warning."
+    },
+    {
+      "id": "p1-perf-fps-warning",
+      "class": "negative",
+      "assertion": "A Motion IR below 30 FPS produces a non-blocking frame-rate warning."
+    },
+    {
+      "id": "p1-perceptual-easing-linear-warning",
+      "class": "negative",
+      "assertion": "Linear easing in a UI-context track produces a non-blocking perceptual warning."
+    },
+    {
+      "id": "p1-perceptual-reduced-motion-warning",
+      "class": "negative",
+      "assertion": "An explicit none reduced-motion policy produces a non-blocking accessibility risk warning."
+    },
+    {
+      "id": "p1-benchmark-execution-time",
+      "class": "positive",
+      "assertion": "The semantic lint benchmark records rule coverage and passes when p95 execution remains below threshold."
+    },
+    {
+      "id": "p2-runtime-verifier-clean",
+      "class": "positive",
+      "assertion": "The external verifier accepts internally consistent runtime telemetry while keeping approval false."
+    },
+    {
+      "id": "p2-runtime-verifier-tamper",
+      "class": "negative",
+      "assertion": "A changed telemetry file is rejected when its bound SHA-256 no longer matches."
+    },
+    {
+      "id": "p2-runtime-verifier-cross-task",
+      "class": "negative",
+      "assertion": "Telemetry bound to a different task identity is rejected."
+    },
+    {
+      "id": "p2-runtime-verifier-symlink",
+      "class": "negative",
+      "assertion": "A telemetry path traversing a symlink is rejected before evidence is trusted."
+    },
+    {
+      "id": "p2-attestation-clean",
+      "class": "positive",
+      "assertion": "A DSSE-compatible attestation signed by an active trusted Ed25519 key verifies without granting approval."
+    },
+    {
+      "id": "p2-attestation-payload-tamper",
+      "class": "negative",
+      "assertion": "A signed attestation whose payload bytes are changed fails with the stable payload mismatch exit code."
+    },
+    {
+      "id": "p2-attestation-binding-mismatch",
+      "class": "negative",
+      "assertion": "An attestation presented for a different expected task identity is rejected before trust is granted."
+    },
+    {
+      "id": "p2-attestation-revoked-signer",
+      "class": "negative",
+      "assertion": "A mathematically valid signature from a revoked signer is rejected by fail-closed trust policy."
+    },
+    {
+      "id": "p2-attestation-unknown-signer",
+      "class": "negative",
+      "assertion": "A signature whose key id is absent from the configured trust policy is rejected."
+    }
+  ]
+}