@revola-ai/video-craft 0.2.1

package/src/fixtures/double-shift/mechanism-prefix.tsx.txt

@@ -0,0 +1,458 @@
+import React, { useMemo } from "react";
+import { AbsoluteFill, useCurrentFrame, spring, interpolate, interpolateColors, Easing } from "remotion";
+import { FrameCam, CinematicStage, DustMotes, RingPulse, punchScale, rgba, type CamKey } from "@revola/video-kit/craft";
+import { RevolaWatermark, spr, lerp, window4, SPRING } from "@revola/video-kit/react";
+import {
+  windowFor,
+  cue,
+  expectCues,
+  WALL,
+  LIT_AT_OPEN,
+  DOCK_CELLS,
+  cellX,
+  cellY,
+  ZONE,
+  FOOTER_TEXT_X,
+  FPS,
+} from "../layout";
+import { EX } from "../tokens";
+import { TIER } from "../text";
+import { geometry } from "./scene.mechanism.geometry";
+
+expectCues("mechanism", 4);
+
+// VERTICAL ZONE MAP (declare-a-vertical-zone-map, values from ZONE in
+// src/layout.ts):
+//   copy band   ZONE.copy    - HUD kicker + headline, SCREEN SPACE only.
+//   breath band ZONE.breath  - nothing enters, ever.
+//   stage band  ZONE.stage   - the persistent GPU wall, the job ticket, the
+//                              hex mark, the dock ignition. Camera keys below
+//                              are chosen so the world never rises past the
+//                              breath band at any key's extreme.
+//   footer band ZONE.footer  - footnote (left) + Revola watermark (right),
+//                              SCREEN SPACE only.
+
+const SEC = "mechanism" as const;
+if (geometry.sectionId !== SEC) {
+  throw new Error(`mechanism: geometry sidecar declares "${geometry.sectionId}", scene renders "${SEC}"`);
+}
+
+// The ticket's authored (design-space) size and its two flight stations.
+const TICKET_W = 340;
+const TICKET_H = 224;
+const STATION = { x: 1400, y: 520 } as const; // scan station, right third of the stage band
+const ENTER = { x: 2320, y: 430 } as const; // off-frame right, above the station
+
+const WALL_W = WALL.cols * WALL.cellW + (WALL.cols - 1) * WALL.gapX;
+const WALL_H = WALL.rows * WALL.cellH + (WALL.rows - 1) * WALL.gapY;
+
+// The single receiving slot: the ticket docks flush into the first dark cell
+// of the cluster; the remaining cluster cells ignite in cascade from it.
+const SLOT = DOCK_CELLS[0];
+const slotCx = cellX(SLOT) + WALL.cellW / 2;
+const slotCy = cellY(SLOT) + WALL.cellH / 2;
+
+/** The Expanse hex-cluster mark, hand-authored from the committed brand SVG
+ *  (02_assets/brand/expanse-logo.svg, wheel only, no wordmark) so its spin-in
+ *  runs on the frame clock instead of the source file's CSS keyframes
+ *  (deterministic-scene-source). */
+const HexMark: React.FC<{ size: number; ink: string }> = ({ size, ink }) => (
+  <svg width={size} height={size} viewBox="0 0 100 100">
+    <circle cx="50" cy="50" r="35" stroke={ink} strokeWidth="4.5" fill="none" />
+    {[0, 60, 120, 180, 240, 300].map((deg) => (
+      <g key={deg} transform={`rotate(${deg} 50 50)`}>
+        <line x1="50" y1="50" x2="50" y2="15" stroke={ink} strokeWidth="4.5" />
+        <circle cx="50" cy="15" r="8" fill={ink} />
+      </g>
+    ))}
+    <circle cx="50" cy="50" r="16" fill={ink} />
+  </svg>
+);
+
+/** One wall cell. Same grid constants as every scene (the persistent set);
+ *  dock-cluster cells are the dark material the ticket lands in, and ignite
+ *  coral in a cascade after contact. */
+const Cell: React.FC<{ i: number; lf: number; landF: number }> = ({ i, lf, landF }) => {
+  const isLit = LIT_AT_OPEN.includes(i);
+  const dockIdx = DOCK_CELLS.indexOf(i);
+  const isDock = dockIdx >= 0;
+
+  const ignite = isDock
+    ? spring({ frame: Math.max(0, lf - landF - dockIdx * 4), fps: FPS, config: { damping: 13, mass: 0.7 } })
+    : 0;
+
+  // Idle living motion on lit cells: a slow phase-offset shimmer, seeded by
+  // index (no-static-holds without a second competing subject).
+  const shimmer = isLit ? 0.82 + 0.18 * Math.sin(lf * 0.06 + i * 1.7) : 0;
+
+  const base = isDock ? interpolateColors(ignite, [0, 1], [EX.buttonBg, EX.coral]) : isLit ? EX.coral : EX.cellUnlit;
+  const punch = isDock ? 1 + Math.sin(Math.min(1, ignite) * Math.PI) * 0.07 : 1;
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        left: cellX(i),
+        top: cellY(i),
+        width: WALL.cellW,
+        height: WALL.cellH,
+        transform: `scale(${punch})`,
+        borderRadius: 8,
+        backgroundColor: base,
+        border: `1px solid ${isLit || ignite > 0.3 ? rgba(EX.white, 0.45) : EX.hairline}`,
+        boxShadow:
+          ignite > 0.05
+            ? `0 10px 26px ${rgba(EX.ink, 0.16)}, 0 0 ${26 * ignite}px ${rgba(EX.coral, 0.55 * ignite)}`
+            : `0 10px 26px ${rgba(EX.ink, 0.1)}`,
+      }}
+    >
+      {/* Board detailing: dashed carrier outline, corner standoffs, die. */}
+      <svg width="100%" height="100%" style={{ position: "absolute", inset: 0, opacity: isLit ? 0.75 * shimmer : isDock ? 0.5 : 0.35 }}>
+        <rect
+          x="8"
+          y="8"
+          width={WALL.cellW - 16}
+          height={WALL.cellH - 16}
+          rx="3"
+          stroke={isLit || ignite > 0.3 ? EX.white : EX.inkMuted}
+          fill="none"
+          strokeWidth="1"
+          strokeDasharray="2 3"
+        />
+        {[
+          [14, 14],
+          [WALL.cellW - 14, 14],
+          [14, WALL.cellH - 14],
+          [WALL.cellW - 14, WALL.cellH - 14],
+        ].map(([x, y]) => (
+          <circle key={`${x}-${y}`} cx={x} cy={y} r="2" fill={isLit || ignite > 0.3 ? EX.white : EX.inkMuted} />
+        ))}
+        <rect
+          x={WALL.cellW / 2 - 34}
+          y={WALL.cellH / 2 - 26}
+          width={68}
+          height={52}
+          rx="3"
+          fill={isLit || ignite > 0.3 ? rgba(EX.white, 0.25) : rgba(EX.ink, 0.06)}
+        />
+      </svg>
+      {/* Top sheen so the slab reads as material, not flat fill. */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          borderRadius: 8,
+          background: `linear-gradient(180deg, ${rgba(EX.white, isLit ? 0.22 : 0.4)} 0%, transparent 38%)`,
+        }}
+      />
+    </div>
+  );
+};
+
+export const S2Mechanism: React.FC = () => {
+  const frame = useCurrentFrame();
+  const win = windowFor(SEC);
+  const lf = frame - win.from;
+
+  const c0 = cue(SEC, 0); // "Expanse predicts resource fit and failure risk"
+  const c1 = cue(SEC, 1); // "the" (breath cue) - hex mark docks, scan starts
+  const c2 = cue(SEC, 2); // "moment a job is submitted" - readouts + T+0ms
+  const c3 = cue(SEC, 3); // "so more work lands on the same hardware"
+  const endF = win.durationInFrames;
+
+  // ---- job-ticket flight, evaluated as a pure function of frame so motion
+  // blur samples the PREVIOUS frame's real position, never a curve-parameter
+  // delta (sample-velocity-from-previous-frame-position).
+  // Negative predraw start (predraw-content-present-at-the-cut): the elegant
+  // spring is slow and heavy, so the flight begins well before the window and
+  // the ticket is docked at the station, fully settled and inside the frame,
+  // before its own sentence (cue 0) starts speaking.
+  const tEnter = c0 - 64;
+  const dockScale = WALL.cellW / TICKET_W;
+  const ticketAt = (f: number) => {
+    const e = spr(f, tEnter, FPS, SPRING.elegant);
+    const d = spr(f, c3, FPS, SPRING.elegant);
+    const x = STATION.x + (1 - e) * (ENTER.x - STATION.x) + d * (slotCx - STATION.x);
+    const y =
+      STATION.y +
+      (1 - e) * (ENTER.y - STATION.y) -
+      Math.sin(e * Math.PI) * 70 +
+      d * (slotCy - STATION.y) -
+      Math.sin(d * Math.PI) * 120;
+    const rot = (1 - e) * 9 - Math.sin(d * Math.PI) * 6;
+    const scale = (0.92 + 0.08 * e) * (1 + d * (dockScale - 1));
+    return { x, y, rot, scale, d };
+  };
+  const tk = ticketAt(lf);
+  const tkPrev = ticketAt(lf - 1);
+  const tkSpeed = Math.hypot(tk.x - tkPrev.x, tk.y - tkPrev.y);
+  const tkBlur = tkSpeed > 16 ? Math.min(3.5, (tkSpeed - 16) * 0.09) : 0;
+
+  // Contact: the frame the dock spring has essentially landed. Squash +
+  // ring pulse + cascade all key off this one moment (impact-stack-on-payoffs).
+  const landF = c3 + 14;
+  const landSquash = punchScale(lf, landF, 0.06, 9);
+  // After contact the ticket fuses into the slot cell: it fades as the cell
+  // ignites, so the clicked object literally BECOMES the set's next state.
+  const tkFade = interpolate(lf, [landF + 4, landF + 16], [1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.inOut(Easing.quad),
+  });
+
+  // ---- hex mark: spins in beside the ticket on cue 1, then holds while the
+  // scanline it drives crosses the card.
+  // Enter early enough (overlapping cue 0) that the snappy spring is fully
+  // settled and the mark at opacity 1 before its breath cue (cue 1) begins.
+  const hex = spr(lf, c1 - 22, FPS, SPRING.snappy);
+  const hexSpin = (1 - hex) * -240;
+
+  // ---- scanline across the card (the scene's one focal glow, with the dock
+  // ignition: glow-is-a-focal-accent).
+  const scanT = interpolate(lf, [c1, c1 + 26], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.inOut(Easing.cubic),
+  });
+  const scanAlpha = window4(lf, c1 - 2, c1 + 4, c1 + 22, c1 + 30);
+
+  // ---- readout typing, staggered mono rows on cue 2.
+  const row1 = "RESOURCE FIT · PREDICTED";
+  const row2 = "FAILURE RISK · LOW";
+  // Typing overlaps the scan beat (lateness-is-structural-overlap-the-beats)
+  // so both rows are fully typed, opacity 1 and settled before cue 2 - the
+  // sentence that names the readout - starts speaking.
+  const typed1 = row1.slice(0, Math.round(lerp(lf, [c2 - 26, c2 - 10], [0, row1.length])));
+  const typed2 = row2.slice(0, Math.round(lerp(lf, [c2 - 20, c2 - 4], [0, row2.length])));
+  const rowSettled1 = spr(lf, c2 - 26, FPS, SPRING.snappy);
+  const rowSettled2 = spr(lf, c2 - 20, FPS, SPRING.snappy);
+
+  // ---- T+0ms stamp on the spoken submission beat (cue 2), gone by dock.
+  const stampIn = spr(lf, c2, FPS, SPRING.bouncy);
+  const stampOut = interpolate(lf, [c3, c3 + 8], [1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // ---- camera: open static (two equal keys), one committed push into the
+  // ticket while it is scanned (dwell), one follow to the slot, then the
+  // pull-back that unlock inherits (camera-is-the-narrator).
+  const camKeys: CamKey[] = [
+    { f: 0, scale: 1.24, cx: WALL.x + WALL_W / 2 + 180, cy: 560 },
+    { f: 12, scale: 1.24, cx: WALL.x + WALL_W / 2 + 180, cy: 560 },
+    { f: c1, scale: 1.52, cx: STATION.x - 70, cy: STATION.y + 40 },
+    { f: c3, scale: 1.52, cx: STATION.x - 70, cy: STATION.y + 40 },
+    { f: landF + 6, scale: 1.66, cx: slotCx + 60, cy: slotCy - 10 },
+    { f: endF, scale: 1.3, cx: WALL.x + WALL_W / 2, cy: WALL.y + WALL_H / 2 + 60 },
+  ];
+
+  const cells = useMemo(() => Array.from({ length: WALL.cols * WALL.rows }, (_, i) => i), []);
+
+  // Ruled body lines of the manifest (tiny-body-copy-as-ruled-lines), widths
+  // seeded by index - real text is reserved for the header and readout rows.
+  const ruled = [0.94, 0.72, 0.86, 0.6, 0.78];
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: EX.paper }}>
+      <FrameCam frame={lf} keys={camKeys} breathe>
+        <CinematicStage frame={lf} base={EX.paper} warmth={0.45} grid={false} />
+        <DustMotes frame={lf} color={EX.inkMuted} />
+
+        {/* The persistent GPU wall - on screen at frame 0, no re-entry. */}
+        <div
+          style={{
+            position: "absolute",
+            left: 0,
+            top: 0,
+            width: 1920,
+            height: 1080,
+          }}
+        >
+          {/* Long-throw ground shadow under the whole cluster. */}
+          <div
+            style={{
+              position: "absolute",
+              left: WALL.x - 50,
+              top: WALL.y - 30,
+              width: WALL_W + 100,
+              height: WALL_H + 110,
+              background: `radial-gradient(ellipse at 50% 55%, ${rgba(EX.ink, 0.1)} 0%, transparent 70%)`,
+            }}
+          />
+          {cells.map((i) => (
+            <Cell key={i} i={i} lf={lf} landF={landF} />
+          ))}
+          <RingPulse frame={lf} at={landF} x={slotCx} y={slotCy} maxRadius={260} color={rgba(EX.coral, 0.8)} />
+        </div>
+
+        {/* THE JOB TICKET - flies in from off-frame right, is scanned, then
+            slots flush into the dark cluster. */}
+        <div
+          data-radar="job-ticket"
+          style={{
+            position: "absolute",
+            left: tk.x - TICKET_W / 2,
+            top: tk.y - TICKET_H / 2,
+            width: TICKET_W,
+            height: TICKET_H,
+            transform: `rotate(${tk.rot}deg) scale(${tk.scale * landSquash})`,
+            transformOrigin: "50% 50%",
+            opacity: tkFade,
+            borderRadius: 14,
+            backgroundColor: EX.white,
+            // Premium layered surface: contact + ambient shadow, hairline
+            // ring; the top sheen is the gradient div below. Matte white -
+            // the glow budget belongs to the scanline and the ignition.
+            boxShadow: `0 2px 4px ${rgba(EX.ink, 0.08)}, 0 24px 48px ${rgba(EX.ink, 0.16)}, 0 0 0 1px ${EX.hairline}`,
+            filter: tkBlur > 0.3 ? `blur(${tkBlur}px)` : "none",
+            overflow: "hidden",
+          }}
+        >
+          <div
+            style={{
+              position: "absolute",
+              inset: 0,
+              borderRadius: 14,
+              background: `linear-gradient(175deg, ${rgba(EX.white, 0.9)} 0%, transparent 30%)`,
+              pointerEvents: "none",
+            }}
+          />
+          <div style={{ position: "absolute", inset: 0, padding: 22, display: "flex", flexDirection: "column" }}>
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+              <div style={{ ...TIER.label, fontSize: 17, color: EX.ink }}>JOB · SUBMIT</div>
+              <div style={{ ...TIER.label, fontSize: 13, color: EX.inkMuted }}>QUEUE · TRAIN</div>
+            </div>
+            {/* Manifest body: fine ruled lines only. */}
+            <div style={{ display: "flex", flexDirection: "column", gap: 11, marginTop: 20, flex: 1 }}>
+              {ruled.map((w, i) => (
+                <div
+                  key={i}
+                  style={{
+                    height: 3,
+                    width: `${w * 100}%`,
+                    borderRadius: 2,
+                    backgroundColor: EX.cellUnlit,
+                  }}
+                />
+              ))}
+            </div>
+            {/* The two prediction readouts, typed on in mono at cue 2. */}
+            <div data-radar="fit-risk-readout" style={{ display: "flex", flexDirection: "column", gap: 7 }}>
+              <div
+                style={{
+                  ...TIER.label,
+                  fontSize: 15,
+                  color: EX.ink,
+                  opacity: Math.min(1, rowSettled1 * 1.4),
+                  transform: `translateY(${(1 - rowSettled1) * 6}px)`,
+                }}
+              >
+                <span style={{ color: EX.coral }}>●</span> {typed1}
+              </div>
+              <div
+                style={{
+                  ...TIER.label,
+                  fontSize: 15,
+                  color: EX.ink,
+                  opacity: Math.min(1, rowSettled2 * 1.4),
+                  transform: `translateY(${(1 - rowSettled2) * 6}px)`,
+                }}
+              >
+                <span style={{ color: EX.coral }}>●</span> {typed2}
+              </div>
+            </div>
+          </div>
+          {/* The coral scanline the hex mark drives across the card. */}
+          {scanAlpha > 0 && (
+            <div
+              style={{
+                position: "absolute",
+                left: 0,
+                right: 0,
+                top: `${scanT * 100}%`,
+                height: 3,
+                backgroundColor: EX.coral,
+                boxShadow: `0 0 14px 2px ${rgba(EX.coral, 0.7)}`,
+                opacity: scanAlpha,
+              }}
+            />
+          )}
+          {scanAlpha > 0 && (
+            <div
+              style={{
+                position: "absolute",
+                left: 0,
+                right: 0,
+                top: 0,
+                height: `${scanT * 100}%`,
+                background: `linear-gradient(180deg, transparent 60%, ${rgba(EX.coral, 0.08)} 100%)`,
+                opacity: scanAlpha,
+              }}
+            />
+          )}
+        </div>
+
+        {/* The hex-cluster mark docks beside the ticket and scans it. It
+            rides the ticket's flight offset so the pair reads as one rig. */}
+        <div
+          data-radar="expanse-hex-mark"
+          style={{
+            position: "absolute",
+            left: tk.x - TICKET_W / 2 - 76,
+            top: tk.y - TICKET_H / 2 - 8,
+            width: 60,
+            height: 60,
+            opacity: Math.min(1, hex * 1.5) * tkFade,
+            transform: `rotate(${hexSpin}deg) scale(${(0.7 + 0.3 * hex) * tk.scale})`,
+            transformOrigin: "50% 50%",
+          }}
+        >
+          <HexMark size={60} ink={EX.ink} />
+        </div>
+
+        {/* T+0ms - the point IS submission time. Stamps on its spoken beat. */}
+        {stampIn > 0.01 && stampOut > 0.01 && (
+          <div
+            style={{
+              position: "absolute",
+              left: tk.x + TICKET_W / 2 + 18,
+              top: tk.y - 16,
+              transform: `scale(${stampIn})`,
+              transformOrigin: "0% 50%",
+              opacity: stampOut,
+              ...TIER.stat,
+              fontSize: 22,
+              color: EX.coral,
+              backgroundColor: EX.white,
+              padding: "6px 14px",
+              borderRadius: 8,
+              boxShadow: `0 6px 16px ${rgba(EX.ink, 0.12)}, 0 0 0 1px ${EX.hairline}`,
+            }}
+          >
+            T+0ms
+          </div>
+        )}
+      </FrameCam>
+
+      {/* HUD - screen space, outside the camera (titles-pinned-outside-camera-push). */}
+      <div style={{ position: "absolute", inset: 0, pointerEvents: "none" }}>
+        <div style={{ position: "absolute", left: 60, top: 60 }}>
+          <div style={{ ...TIER.label, color: EX.inkMuted, marginBottom: 10 }}>02/03 - THE MECHANISM</div>
+          <div style={{ ...TIER.label, fontSize: 24, color: EX.ink }}>PREDICT AT SUBMISSION</div>
+        </div>
+
+        <div style={{ position: "absolute", left: FOOTER_TEXT_X.left, top: ZONE.footer.top + 30 }}>
+          <div style={{ ...TIER.footnote, color: EX.inkMuted }}>
+            Expanse - cluster intelligence at job-submission time.
+          </div>
+        </div>
+
+        <div style={{ position: "absolute", left: FOOTER_TEXT_X.right, top: ZONE.footer.top + 10 }}>
+          <RevolaWatermark tone="onLight" />
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+export default S2Mechanism;

package/src/fixtures/double-shift/wrapped.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { useCurrentFrame } from "remotion";
+import { SECTION_WINDOWS, windowFor } from "./layout";
+
+// Mutation: the `from` read hides inside helper wrappers - one over
+// windowFor(), one over SECTION_WINDOWS - and call sites only see a clean
+// function name.
+const sectionStart = () => windowFor("mechanism").from;
+const firstStart = () => SECTION_WINDOWS[0].from;
+
+export const Wrapped: React.FC = () => {
+  const frame = useCurrentFrame();
+  const lf = frame - sectionStart() + firstStart();
+  return <div style={{ opacity: lf > 0 ? 1 : 0 }} />;
+};

package/src/fixtures/geometry-sidecar-missing-export.ts

@@ -0,0 +1,10 @@
+// Missing violation: no `geometry` export at all, e.g. a sidecar file that
+// was scaffolded but never filled in, or a helper named something else.
+import type { SceneGeometry } from "@revola/video-kit/pure";
+
+const localOnly: SceneGeometry = {
+  sectionId: "once",
+  exit: { object: "instrument-card", x: 960, y: 540, scale: 1.18 },
+};
+
+export default localOnly;

package/src/fixtures/geometry-sidecar-missing-type.ts

@@ -0,0 +1,7 @@
+// Missing violation: exports `geometry`, but with no `SceneGeometry` type
+// annotation, so a shape drift at a call site would not be caught at compile
+// time.
+export const geometry = {
+  sectionId: "once",
+  exit: { object: "instrument-card", x: 960, y: 540, scale: 1.18 },
+};

package/src/fixtures/geometry-sidecar-valid.ts

@@ -0,0 +1,6 @@
+import type { SceneGeometry } from "@revola/video-kit/pure";
+
+export const geometry: SceneGeometry = {
+  sectionId: "once",
+  exit: { object: "instrument-card", x: 960, y: 540, scale: 1.18 },
+};

package/src/fixtures/interpolate-ascending.tsx

@@ -0,0 +1,6 @@
+// Strictly ascending literal ranges, including a negative start: clean.
+declare const interpolate: (frame: number, input: number[], output: number[]) => number;
+declare const frame: number;
+
+export const x = interpolate(frame, [0, 134, 136, 200], [0, 1, 1, 0]);
+export const y = interpolate(frame, [-20, -10, 0], [0, 0.5, 1]);

package/src/fixtures/interpolate-descending.tsx

@@ -0,0 +1,8 @@
+// A literal input range that is not strictly ascending: interpolate() throws
+// at runtime when this frame range is reached. The BUILD_NOTES_CRAFT case:
+// HERO_AT (134) retimed earlier than TILT_END (136) in a literal key array.
+declare const interpolate: (frame: number, input: number[], output: number[]) => number;
+declare const frame: number;
+
+export const x = interpolate(frame, [0, 136, 134, 200], [0, 1, 1, 0]);
+export const y = interpolate(frame, [-10, -20], [0, 1]);

package/src/fixtures/interpolate-identifier-keys.tsx

@@ -0,0 +1,9 @@
+// Identifier-composed ranges are out of scope: proving them monotonic would
+// need constant folding across declarations, so the check stays literal-only.
+declare const interpolate: (frame: number, input: number[], output: number[]) => number;
+declare const frame: number;
+
+const TILT_END = 136;
+const HERO_AT = 134;
+
+export const x = interpolate(frame, [0, TILT_END, HERO_AT, 200], [0, 1, 1, 0]);

package/src/fixtures/nested-filters-broken.tsx

@@ -0,0 +1,11 @@
+// Reproduction of the bug in revola-video BUILD_NOTES_CRAFT.md, S2 pass 2:
+// "a CSS-filtered <g> wrapping children that ALSO have CSS filters makes Chrome
+// drop those children silently - the first cursor build rendered nothing while
+// its group rendered fine".
+export const Cursor = () => (
+  <svg viewBox="0 0 100 100">
+    <g style={{ filter: "drop-shadow(0 0 6px #9C33FF)" }}>
+      <path d="M0 0 L10 30" style={{ filter: "blur(2px)" }} />
+    </g>
+  </svg>
+);

package/src/fixtures/nested-filters-fixed.tsx

@@ -0,0 +1,8 @@
+// The fix: one flat filter on one layer.
+export const Cursor = () => (
+  <svg viewBox="0 0 100 100">
+    <g style={{ filter: "drop-shadow(0 0 6px #9C33FF)" }}>
+      <path d="M0 0 L10 30" />
+    </g>
+  </svg>
+);

package/src/fixtures/nested-filters-html-wrapper.tsx

@@ -0,0 +1,14 @@
+// The false-positive shape corpus calibration hit three times (Scene4_Mechanism,
+// S2Turn, S4Proof): a CSS-filtered HTML wrapper around a whole <svg> whose child
+// carries its own filter. The wrapper's filter composites the rendered svg at the
+// HTML level, so nothing is dropped - all three shipped scenes render correctly.
+// Only a filtered ancestor INSIDE the <svg> subtree triggers the Chrome bug.
+export const Hero = () => (
+  <div style={{ filter: "blur(4px)" }}>
+    <svg viewBox="0 0 100 100">
+      <text x="50" y="50" style={{ filter: "drop-shadow(0 0 6px #9C33FF)" }}>
+        hi
+      </text>
+    </svg>
+  </div>
+);

package/src/fixtures/nested-filters-html.tsx

@@ -0,0 +1,7 @@
+// Nested CSS filters in plain HTML render fine - the silent-drop bug is
+// SVG-specific. The rule must not fire outside an <svg>.
+export const Card = () => (
+  <div style={{ filter: "drop-shadow(0 0 6px #9C33FF)" }}>
+    <span style={{ filter: "blur(2px)" }}>hello</span>
+  </div>
+);

package/src/fixtures/nested-filters-siblings.tsx

@@ -0,0 +1,12 @@
+// Two filtered SIBLINGS are fine - only a filtered ancestor wrapping a
+// filtered descendant triggers the Chrome bug. This fixture guards the
+// most likely false-positive shape: the check matching an element against
+// itself or against a non-ancestor.
+export const Cursor = () => (
+  <svg viewBox="0 0 100 100">
+    <g>
+      <path d="M0 0 L10 30" style={{ filter: "blur(2px)" }} />
+      <path d="M10 0 L20 30" style={{ filter: "drop-shadow(0 0 6px #9C33FF)" }} />
+    </g>
+  </svg>
+);

package/src/fixtures/nondeterministic-scene.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+export const Jitter: React.FC = () => {
+  const seed = Math.random();
+  const now = Date.now();
+  const stamp = new Date();
+  const bare = new Date; // no parens: still an argless construction
+  void bare;
+  return (
+    <div style={{ opacity: seed }}>
+      {now} {stamp.toISOString()}
+    </div>
+  );
+};

package/src/fixtures/nondeterministic-variants.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+// Evasion spellings the check deliberately does NOT flag (see the rule's
+// "Deliberate limitation" note). This fixture pins that boundary: if the
+// check is ever extended to resolve these, the companion test must flip.
+const M = Math;
+const { random } = Math;
+
+export const Variants: React.FC = () => {
+  const a = M.random();
+  const b = random();
+  const c = Math["random"]();
+  const d = globalThis.Date.now();
+  const e = new Date(undefined as unknown as number);
+  return <div>{a + b + c + d + e.getTime()}</div>;
+};

package/src/fixtures/raw-hex-scene.tsx

@@ -0,0 +1,10 @@
+// A scene that hard-codes palette hexes instead of referencing the token
+// module. One in a plain string prop, one inside a template-literal gradient.
+// The pure-white drop-shadow is NOT a violation: white/black glint constants
+// are not palette (the dark regrade shipped with them unchanged).
+export const Panel = () => (
+  <div style={{ background: "#0E1420" }}>
+    <div style={{ backgroundImage: `linear-gradient(180deg, #9C33FF 0%, transparent 100%)` }} />
+    <div style={{ boxShadow: "0 0 12px #fff", borderColor: "#000000" }} />
+  </div>
+);

package/src/fixtures/scene-root-declared/SceneHook.tsx

@@ -0,0 +1,9 @@
+// The convention: no whole-scene camera transform, so the root AbsoluteFill
+// declares data-radar-scene-root="static".
+export default function SceneHook() {
+  return (
+    <div data-radar-scene-root="static" style={{ position: "absolute", inset: 0 }}>
+      <div data-radar="hero" style={{ width: 900, height: 500 }} />
+    </div>
+  );
+}

package/src/fixtures/scene-root-declared/plan.fixture.yaml

@@ -0,0 +1,10 @@
+doctrine: 1
+sections:
+  - id: hook
+    kind: motion
+    component: SceneHook
+    vo: "The hero image opens the film."
+    names:
+      - cue: 0
+        element: hero
+        says: "the hero image"

package/src/fixtures/scene-root-missing/SceneHook.tsx

@@ -0,0 +1,11 @@
+// A radar-adopting scene (its plan declares a names: binding) whose source
+// nowhere carries the scene-space contract tag: radar:scene refuses this at
+// setup. (The tag's literal name must not appear even in a comment here -
+// the check is textual containment over the whole project's source.)
+export default function SceneHook() {
+  return (
+    <div style={{ position: "absolute", inset: 0 }}>
+      <div data-radar="hero" style={{ width: 900, height: 500 }} />
+    </div>
+  );
+}