@ossclip/scenes 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ossclip/scenes",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "ossclip's scene library and stage geometry — React components shared by preview and render",
   "type": "module",
   "license": "MIT",
@@ -19,7 +19,7 @@
   ],
   "dependencies": {
     "zod": "^3.25.0",
-    "@ossclip/core": "0.1.4"
+    "@ossclip/core": "0.1.6"
   },
   "peerDependencies": {
     "react": ">=18",

package/src/CaptionTrack.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { AbsoluteFill, Sequence, useCurrentFrame, useVideoConfig } from "remotion";
 import type { CaptionLine, SceneCue } from "@ossclip/core/browser";
 import { safeAreaFor, activeCueAt } from "./stage";
+import { frameWindow } from "./frames";
 import { captionAnchorAvoiding, regionsDuring, type OccupiedRegion } from "./source-fit";
 
 export interface CaptionTrackProps {
@@ -186,8 +187,11 @@ export const CaptionTrack: React.FC<CaptionTrackProps> = ({
                   frame,
                 )
               : verticalAnchor;
-        const from = Math.round(line.start * fps);
-        const durationInFrames = Math.max(1, Math.round((line.end - line.start) * fps));
+        // End frame from the end TIME, never from a rounded duration — see
+        // frameWindow. Two lines either side of a cue boundary resolve to
+        // different anchors, so a one-frame overlap there renders as two
+        // captions stacked at two heights (§115).
+        const { from, durationInFrames } = frameWindow(line.start, line.end, fps);
         return (
           <Sequence key={i} from={from} durationInFrames={durationInFrames}>
             <LineView

package/src/EdlVideo.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from "react";
 import { AbsoluteFill, OffthreadVideo, Sequence, useVideoConfig } from "remotion";
 import type { KeptSpan } from "@ossclip/core/browser";
+import { frameWindow } from "./frames";
 
 export interface EdlVideoProps {
   src: string;
@@ -54,8 +55,10 @@ export const EdlVideo: React.FC<EdlVideoProps> = ({
   return (
     <AbsoluteFill style={{ backgroundColor: background }}>
       {spans.map((sp, i) => {
-        const from = Math.round(sp.outIn * fps);
-        const durationInFrames = Math.max(1, Math.round((sp.outOut - sp.outIn) * fps));
+        // §115: from the end TIME. Beyond stacking two spans for a frame, a
+        // duration that is one frame long also skews the fade ramp below,
+        // which measures against `durationInFrames`.
+        const { from, durationInFrames } = frameWindow(sp.outIn, sp.outOut, fps);
         return (
           <Sequence key={i} from={from} durationInFrames={durationInFrames} premountFor={fps}>
             <AbsoluteFill style={{ transform: `scale(${scales[i]})` }}>

package/src/SceneLayer.tsx

@@ -3,6 +3,7 @@ import { AbsoluteFill, Sequence, useCurrentFrame, useVideoConfig } from "remotio
 import type { SceneCue, Theme } from "@ossclip/core/browser";
 import { graphicSlotFor } from "./stage";
 import { fitScale } from "./fit";
+import { frameWindow } from "./frames";
 import { TitleCard } from "./components/TitleCard";
 import { StatCard } from "./components/StatCard";
 import { RuleCard } from "./components/RuleCard";
@@ -106,8 +107,9 @@ export const SceneLayer: React.FC<{ cues: SceneCue[]; theme: Theme }> = ({ cues,
         // not veto the component.
         const slot = graphicSlotFor(cue, { width, height });
         const Component = COMPONENTS[cue.component];
-        const from = Math.round(cue.startSec * fps);
-        const durationInFrames = Math.max(1, Math.round((cue.endSec - cue.startSec) * fps));
+        // §115: from the end TIME — a rounded duration can reach a frame past
+        // the cue and put two graphics on screen at once.
+        const { from, durationInFrames } = frameWindow(cue.startSec, cue.endSec, fps);
         const slotW = slot.w * width;
         const slotH = slot.h * height;
         // Over-video bands keep breathing room (R21 §100): the scrim fills

package/src/components/BulletList.tsx

@@ -55,7 +55,7 @@ export const BulletList: React.FC<{
   heightPx?: number;
   edits?: ElementEdits;
 }> = ({ props, theme, widthPx, heightPx, edits }) => {
-  const fontSize = bulletMetrics(props.items, widthPx, heightPx, Boolean(props.title));
+  const fontSize = bulletMetrics(props.items, widthPx, heightPx, Boolean(props.title), props.title);
   const titleEnter = useEnter(0);
   return (
     <div

package/src/fit.ts

@@ -175,7 +175,7 @@ export function estimateHeightPx(
       // Self-fitting like the reveal: rows of nowrap uppercase text. Same
       // model bulletMetrics solves against — the two cannot disagree.
       const items = arr(props.items).map((i) => str(i));
-      const font = bulletMetrics(items, widthPx, heightPx, Boolean(str(props.title)));
+      const font = bulletMetrics(items, widthPx, heightPx, Boolean(str(props.title)), str(props.title));
       return bulletStackHeightPx(items.length, font, Boolean(str(props.title)));
     }
   }
@@ -257,7 +257,21 @@ const BULLET_MIN_FONT = 36;
 const BULLET_MAX_FONT = 120;
 /** Row: 1.15 line-height + 0.45em gap; the kicker title ≈ one smaller row. */
 const BULLET_ROW_H = 1.6;
-const BULLET_TITLE_H = 1.1;
+/**
+ * The kicker title's real height (R27 §121). It renders at `fontSize * 0.36`
+ * (`BulletList.tsx:75`) plus the column's `0.45em` gap — 0.36x1.2 + 0.45 ≈
+ * 0.88em, not the 1.1em this used to charge. Over-charging the title shrinks
+ * `heightFit`, so a titled list was solved against a budget ~0.2em smaller
+ * than the one it actually occupies.
+ */
+const BULLET_TITLE_H = 0.88;
+/**
+ * Per-character advance of the kicker, in ems of the BASE font: its own
+ * 0.36em type times (glyph + the 0.28em tracking it is set with). Letter
+ * spacing was not modelled at all, so a long title could overrun the slot
+ * width unbudgeted.
+ */
+const BULLET_TITLE_CHAR_W = (CHAR_W_UPPER + 0.28) * 0.36;
 /** Glyph column: the ▸ plus its gap, in ems. */
 const BULLET_GLYPH_W = 1.1;
 
@@ -276,10 +290,15 @@ export function bulletMetrics(
   widthPx = 831,
   heightPx = Infinity,
   hasTitle = false,
+  title = "",
 ): number {
   const longest = items.reduce((max, t) => Math.max(max, t.length), 0);
   if (longest === 0) return BULLET_MIN_FONT;
-  const widthFit = widthPx / (longest * CHAR_W_UPPER + BULLET_GLYPH_W);
+  // Whichever of the longest bullet and the tracked-out kicker needs more room.
+  const widthFit = Math.min(
+    widthPx / (longest * CHAR_W_UPPER + BULLET_GLYPH_W),
+    title ? widthPx / (title.length * BULLET_TITLE_CHAR_W) : Infinity,
+  );
   const heightFit =
     (heightPx * FILL_TARGET) /
     (Math.max(1, items.length) * BULLET_ROW_H + (hasTitle ? BULLET_TITLE_H : 0));

package/src/frames.ts

@@ -0,0 +1,30 @@
+/**
+ * Output seconds → a `<Sequence>` frame window.
+ *
+ * The invariant: **the end frame comes from the end TIME**, never from a
+ * rounded duration. `Math.round(start · fps) + Math.round((end - start) · fps)`
+ * is not `Math.round(end · fps)` — the two roundings are independent, so a
+ * window whose start rounds down and whose duration rounds up reaches one
+ * frame past where it should, and lands on top of the next window's first
+ * frame (FINDINGS §115).
+ *
+ * That off-by-one is invisible in the timings — the seconds never overlap —
+ * and shows up only in the render, as one frame with two things on it. Every
+ * adjacent-`<Sequence>` track wants this: captions (two lines at once, and at
+ * two different anchors when the pair straddles a cue boundary), scene cues
+ * (two graphics at once), and the EDL (two video spans, plus a fade ramp
+ * measured against the wrong length).
+ *
+ * Sub-frame windows still get one frame — a zero-length `<Sequence>` renders
+ * nothing, and a caption that vanishes entirely is worse than one that
+ * briefly shares a frame.
+ */
+export function frameWindow(
+  startSec: number,
+  endSec: number,
+  fps: number,
+): { from: number; durationInFrames: number } {
+  const from = Math.round(startSec * fps);
+  const to = Math.round(endSec * fps);
+  return { from, durationInFrames: Math.max(1, to - from) };
+}