creator-editing-studio 1.4.0 → 1.4.2

package/template/scripts/final-check.mjs

@@ -0,0 +1,69 @@
+#!/usr/bin/env node
+/**
+ * Check the FINISHED file — after every render, before saying it is done.
+ *
+ *   npm run final-check -- out/my-video/final.mp4 [--fps=30] [--frames=871]
+ *
+ * Writes <file>.check.jpg: one tile per second of the delivered video, so a word that is missing,
+ * cut off or pushed off-screen by a camera move shows up (it did, 2026-11-05: a word behind the
+ * speaker was scaled off the top by the push-in and appeared for 8 frames — no still of the edit
+ * showed it, only the finished file did). Then reports and fails on:
+ *   - frame count (against --frames when given) and a video + audio stream being present
+ *   - loudness outside -17…-15 LUFS, true peak above -0.9 dBTP
+ *   - silent gaps over 0.6 s while the video is still running (a dropped voice join)
+ * Look at the contact sheet: the numbers cannot see a misplaced word.
+ */
+import {existsSync} from 'node:fs';
+import {FFMPEG, FFPROBE, run} from './lib/media.mjs';
+
+const args = process.argv.slice(2);
+const file = args.find((a) => !a.startsWith('--'));
+const opt = (k) => args.find((a) => a.startsWith(`--${k}=`))?.split('=')[1];
+if (!file || !existsSync(file)) {
+  console.error('Usage: npm run final-check -- <rendered.mp4> [--frames=<expected>]');
+  process.exit(1);
+}
+const problems = [];
+
+// streams
+const info = JSON.parse(run(FFPROBE, ['-v', 'error', '-count_frames', '-show_entries', 'stream=codec_type,width,height,nb_read_frames,r_frame_rate:format=duration', '-of', 'json', file]).out);
+const v = info.streams.find((s) => s.codec_type === 'video');
+const a = info.streams.find((s) => s.codec_type === 'audio');
+const dur = +info.format.duration;
+if (!v) problems.push('no video stream');
+if (!a) problems.push('no audio stream');
+const frames = v ? +v.nb_read_frames : 0;
+const want = opt('frames') ? +opt('frames') : null;
+if (want && frames !== want) problems.push(`${frames} frames, expected ${want}`);
+console.log(`video  ${v ? `${v.width}×${v.height}, ${frames} frames, ${v.r_frame_rate} fps` : '—'} · ${dur.toFixed(2)} s`);
+
+// loudness + true peak
+if (a) {
+  const out = run(FFMPEG, ['-hide_banner', '-nostats', '-i', file, '-af', 'ebur128=peak=true', '-f', 'null', '-']).err;
+  const tail = out.slice(out.lastIndexOf('Summary:'));
+  const I = +(/I:\s+(-?[\d.]+) LUFS/.exec(tail)?.[1] ?? NaN);
+  const TP = +(/Peak:\s+(-?[\d.]+) dBFS/.exec(tail)?.[1] ?? NaN);
+  console.log(`audio  ${I} LUFS integrated · true peak ${TP} dBTP`);
+  if (!(I >= -17 && I <= -15)) problems.push(`loudness ${I} LUFS (deliver at -16)`);
+  if (!(TP <= -0.9)) problems.push(`true peak ${TP} dBTP (keep at or under -1)`);
+
+  // silences while the picture still runs (the last 4 s may be a silent end card)
+  const sil = run(FFMPEG, ['-hide_banner', '-nostats', '-i', file, '-af', 'silencedetect=n=-45dB:d=0.6', '-f', 'null', '-']).err;
+  const gaps = [...sil.matchAll(/silence_start: ([\d.]+)/g)].map((m) => +m[1]).filter((t) => t > 0.3 && t < dur - 4);
+  if (gaps.length) problems.push(`silent gap at ${gaps.map((t) => t.toFixed(2) + ' s').join(', ')} — check the voice joins`);
+}
+
+// contact sheet: one tile per second, 8 across, read left to right (tile n = second n; no burned-in
+// timestamps — ffmpeg's drawtext needs a fontconfig most Windows machines lack)
+const sheet = file.replace(/\.[^.]+$/, '') + '.check.jpg';
+const tiles = Math.ceil(dur);
+const rows = Math.ceil(tiles / 8);
+const made = run(FFMPEG, ['-y', '-v', 'error', '-i', file, '-vf', `fps=1,scale=240:-1,tile=8x${rows}`, '-frames:v', '1', sheet]);
+if (!made.ok) problems.push('contact sheet failed: ' + made.err.trim());
+console.log(`sheet  ${sheet} (${tiles} tiles) — LOOK AT IT before reporting`);
+
+if (problems.length) {
+  console.error('\n✗ Not ready:\n  - ' + problems.join('\n  - '));
+  process.exit(1);
+}
+console.log('\n✓ File checks pass. Now read the contact sheet.');

package/template/scripts/lib/plan-gate.mjs

@@ -16,7 +16,7 @@
  * Fixes to an approved edit render freely; only a NEW sheet (a new plan) asks for a new yes.
  */
 import {createHash} from 'node:crypto';
-import {existsSync, readFileSync} from 'node:fs';
+import {existsSync, readFileSync, readdirSync, statSync} from 'node:fs';
 import {join, resolve} from 'node:path';
 
 const EXEMPT = /(Test|Board|Sheet)$|^Sample$/;
@@ -69,5 +69,31 @@ export function checkPlanGate(argv) {
   if (hash !== approved.sheetHash) refuse('the motion sheet changed after it was approved — that is a new plan, and it needs a new yes.');
   // Then they must have SEEN it move: the live preview, opened after the yes (preview/server.mjs writes this).
   const previewed = join(dir, 'previewed.json');
-  if (!existsSync(previewed) || JSON.parse(readFileSync(previewed, 'utf8')).at < approved.at) refuse('they approved the plan but have not seen it in the live preview since — open it (preview_edit) and render only when they press Render.');
+  if (!existsSync(previewed)) refuse('they approved the plan but have not seen it in the live preview since — open it (preview_edit) and render only when they press Render.');
+  const seen = JSON.parse(readFileSync(previewed, 'utf8'));
+  if (seen.at < approved.at) refuse('they approved the plan but have not seen it in the live preview since — open it (preview_edit) and render only when they press Render.');
+  // A hard gate on the CURRENT edit, not just the plan (2026-11-05): any change to the video's files after the last
+  // preview means they have not seen what would render. tweaks.json is excluded — the preview itself writes it.
+  const changed = seen.project ? newestChange(resolve('src', 'videos', seen.project)) : null;
+  if (changed && changed.at > Date.parse(seen.at)) {
+    refuse(`the edit changed after they last saw it (${changed.file}) — open the live preview again (preview_edit) so they see this version, and render only when they press Render.`);
+  }
+}
+
+/** The most recently changed file of a video's source folder, ignoring the preview's own tweaks.json. */
+function newestChange(dir) {
+  if (!existsSync(dir)) return null;
+  let best = null;
+  const walk = (d) => {
+    for (const e of readdirSync(d, {withFileTypes: true})) {
+      const p = join(d, e.name);
+      if (e.isDirectory()) walk(p);
+      else if (e.name !== 'tweaks.json') {
+        const at = statSync(p).mtimeMs;
+        if (!best || at > best.at) best = {file: p, at};
+      }
+    }
+  };
+  walk(dir);
+  return best;
 }

package/template/src/lib/fontChoices.ts

@@ -0,0 +1,72 @@
+/**
+ * The fonts the live preview offers beside the brand's own (2026-11-05, his ask: "click on the text, a dropdown of
+ * fonts, brand on top"). The brand's fonts are whatever the edit and tokens.ts load; these are the extras.
+ *
+ * Two halves, one family name:
+ *   - the preview (a Claude chat, no internet) carries small copies of these files inside its page and registers
+ *     them under exactly these names (preview/ui/gen, made from @fontsource by preview/ui/make-assets.mjs);
+ *   - the final render loads the same family from Google Fonts here, but only the ones a tweak actually uses.
+ * Keep the names identical in both, or the render falls back to a system font.
+ */
+import {loadFont as anton} from '@remotion/google-fonts/Anton';
+import {loadFont as bebasNeue} from '@remotion/google-fonts/BebasNeue';
+import {loadFont as bricolage} from '@remotion/google-fonts/BricolageGrotesque';
+import {loadFont as caveat} from '@remotion/google-fonts/Caveat';
+import {loadFont as cormorant} from '@remotion/google-fonts/CormorantGaramond';
+import {loadFont as dmSans} from '@remotion/google-fonts/DMSans';
+import {loadFont as dmSerif} from '@remotion/google-fonts/DMSerifDisplay';
+import {loadFont as instrumentSerif} from '@remotion/google-fonts/InstrumentSerif';
+import {loadFont as inter} from '@remotion/google-fonts/Inter';
+import {loadFont as montserrat} from '@remotion/google-fonts/Montserrat';
+import {loadFont as playfair} from '@remotion/google-fonts/PlayfairDisplay';
+import {loadFont as tiro} from '@remotion/google-fonts/TiroDevanagariHindi';
+
+type Loader = (style?: 'normal' | 'italic', opts?: {weights?: string[]; subsets?: string[]}) => unknown;
+export type FontChoice = {family: string; kind: string; generic: string; load: () => void};
+
+const W = ['400', '500', '600', '700', '800'];
+const make = (family: string, kind: string, generic: string, loader: Loader, weights: string[], subsets: string[], italic = false): FontChoice => ({
+  family,
+  kind,
+  generic,
+  load: () => {
+    loader('normal', {weights, subsets});
+    if (italic) loader('italic', {weights, subsets});
+  },
+});
+
+/** In the order the dropdown shows them, after the brand's fonts. */
+export const FONT_CHOICES: FontChoice[] = [
+  make('Inter', 'Clean sans', 'sans-serif', inter as Loader, W, ['latin']),
+  make('DM Sans', 'Clean sans', 'sans-serif', dmSans as Loader, W, ['latin']),
+  make('Montserrat', 'Bold sans', 'sans-serif', montserrat as Loader, W, ['latin']),
+  make('Bricolage Grotesque', 'Editorial sans', 'sans-serif', bricolage as Loader, W, ['latin']),
+  make('Playfair Display', 'Serif', 'serif', playfair as Loader, W, ['latin']),
+  make('Cormorant Garamond', 'Serif', 'serif', cormorant as Loader, ['400', '500', '600', '700'], ['latin']),
+  make('Instrument Serif', 'Serif', 'serif', instrumentSerif as Loader, ['400'], ['latin'], true),
+  make('DM Serif Display', 'Serif', 'serif', dmSerif as Loader, ['400'], ['latin'], true),
+  make('Anton', 'Tall & loud', 'sans-serif', anton as Loader, ['400'], ['latin']),
+  make('Bebas Neue', 'Tall & loud', 'sans-serif', bebasNeue as Loader, ['400'], ['latin']),
+  make('Caveat', 'Handwritten', 'cursive', caveat as Loader, ['400', '500', '600', '700'], ['latin']),
+  make('Tiro Devanagari Hindi', 'Hindi / Sanskrit', 'serif', tiro as Loader, ['400'], ['latin', 'devanagari']),
+];
+
+const loaded = new Set<string>();
+/** Inside the live preview the files come with the page — never reach for Google there (the chat blocks it). */
+const inPreview = () => typeof window !== 'undefined' && !!(window as unknown as {__LP_DATA?: unknown}).__LP_DATA;
+
+/** Load the chosen families for a render or the Remotion studio. Safe to call on every frame. */
+export function loadFontChoices(families: Iterable<string>) {
+  if (inPreview()) return;
+  for (const f of families) {
+    if (loaded.has(f)) continue;
+    loaded.add(f);
+    FONT_CHOICES.find((c) => c.family === f)?.load();
+  }
+}
+
+/** The CSS font-family for a chosen family: the family, then a sensible fallback of the same kind. */
+export const fontStack = (family: string) => {
+  const c = FONT_CHOICES.find((x) => x.family === family);
+  return `"${family}", ${c?.generic ?? 'sans-serif'}`;
+};

package/template/src/lib/swaps.ts

@@ -0,0 +1,152 @@
+/**
+ * Font and icon swaps from the live preview (2026-11-05, his ask: a Photoshop-style bar on whatever is clicked —
+ * change the font, swap the icon, "just replace and move on, and if you don't like it just undo").
+ *
+ * Both work on what the edit DREW, after every frame, like the colour swaps (recolor.ts), so any edit responds without
+ * being written for it, and the final render applies the same tweaks.json:
+ *
+ *   refontTree(root, {your display typeface: 'Playfair Display'})   every text drawn in your display typeface inside root is set in Playfair instead
+ *                                                     (the original is remembered per element, so it never drifts)
+ *   iconPass(root, {<sig>: {body, w, h}})            an <svg> the edit drew is hidden and the chosen icon is drawn in
+ *                                                     exactly its place, its colour and its glow kept. <sig> is a short
+ *                                                     signature of the original drawing, so every copy of that icon in
+ *                                                     the graphic swaps, whichever frame it appears on.
+ *
+ * The edit's own elements are never rewritten (React owns them): the swapped icon is a sibling the edit doesn't know
+ * about, and the original is only hidden with an attribute.
+ */
+import {fontStack} from './fontChoices';
+
+export type IconPick = {name: string; body: string; w: number; h: number};
+export type IconSwaps = Record<string, IconPick>;
+export type FontSwaps = Record<string, string>;
+
+/* ----------------------------------------------------------------------------- fonts */
+
+const primary = (ff: string) => (ff.split(',')[0] ?? '').trim().replace(/^["']|["']$/g, '');
+/** The family each element was drawn in before any swap (computed, so inherited fonts count). */
+const origFamily = new WeakMap<Element, string>();
+const origInline = new WeakMap<Element, string>();
+const hasOwnText = (el: Element) => Array.from(el.childNodes).some((n) => n.nodeType === 3 && n.textContent?.trim());
+
+export function familyOf(el: Element): string {
+  const known = origFamily.get(el);
+  if (known) return known;
+  const f = primary(getComputedStyle(el).fontFamily);
+  origFamily.set(el, f);
+  return f;
+}
+
+/** The family the text inside an element was drawn in (its first piece of text), before any swap. */
+export function textFamilyIn(root: Element): string | null {
+  for (const el of [root, ...Array.from(root.querySelectorAll('*'))]) if (hasOwnText(el)) return familyOf(el);
+  return null;
+}
+
+/**
+ * Apply font swaps to every text inside root. `swapFor(el)` gives the swaps that hold where el is (a graphic's own,
+ * then the whole video's), so one pass serves both. Safe to call every frame; empty swaps put the originals back.
+ */
+export function refontTree(root: Element, swapFor: (el: Element) => FontSwaps | undefined) {
+  for (const el of [root, ...Array.from(root.querySelectorAll('*'))]) {
+    if (!(el instanceof HTMLElement) || !hasOwnText(el)) continue;
+    const swap = swapFor(el);
+    if (!swap && !origInline.has(el)) continue;
+    const from = familyOf(el);
+    const to = swap?.[from];
+    if (!origInline.has(el)) origInline.set(el, el.style.fontFamily);
+    const want = to ? fontStack(to) : origInline.get(el)!;
+    if (el.style.fontFamily !== want) el.style.fontFamily = want;
+  }
+}
+
+/* ----------------------------------------------------------------------------- icons */
+
+const sigs = new WeakMap<Element, string>();
+/** A short signature of an icon's drawing: same picture → same signature, on any frame. */
+export function iconSig(svg: Element): string {
+  const known = sigs.get(svg);
+  if (known) return known;
+  const src = (svg.getAttribute('viewBox') ?? '') + svg.innerHTML.replace(/\s+/g, ' ');
+  let h = 5381;
+  for (let i = 0; i < src.length; i++) h = ((h << 5) + h + src.charCodeAt(i)) | 0;
+  const s = 'i' + (h >>> 0).toString(36);
+  sigs.set(svg, s);
+  return s;
+}
+
+const CLONE = 'data-lp-icon-clone';
+const HIDDEN = 'data-lp-iconed';
+/** The svgs the edit drew inside root (never our swapped-in copies, never tiny decorations). */
+export function iconsIn(root: Element): SVGSVGElement[] {
+  return Array.from(root.querySelectorAll('svg')).filter((s) => !s.hasAttribute(CLONE) && !s.parentElement?.closest('svg') && s.getBoundingClientRect().width >= 10);
+}
+
+/** The colour an icon is painted in: its first visible fill or stroke, else its text colour. */
+function paintOf(svg: SVGSVGElement): string {
+  for (const el of Array.from(svg.querySelectorAll('path, circle, rect, ellipse, line, polyline, polygon'))) {
+    const cs = getComputedStyle(el);
+    for (const v of [cs.fill, cs.stroke]) if (v && v !== 'none' && !v.startsWith('url') && !/rgba\([^)]*,\s*0\)/.test(v)) return v;
+  }
+  return getComputedStyle(svg).color;
+}
+
+export function iconPass(root: Element, swaps: IconSwaps | undefined) {
+  const want = swaps ?? {};
+  for (const svg of Array.from(root.querySelectorAll<SVGSVGElement>(`svg:not([${CLONE}])`))) {
+    if (svg.parentElement?.closest('svg')) continue;
+    const pick = want[iconSig(svg)];
+    let clone = svg.nextElementSibling?.hasAttribute(CLONE) ? (svg.nextElementSibling as SVGSVGElement) : null;
+    if (!pick) {
+      if (svg.hasAttribute(HIDDEN)) svg.removeAttribute(HIDDEN);
+      clone?.remove();
+      continue;
+    }
+    if (!clone) {
+      clone = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      clone.setAttribute(CLONE, '');
+      svg.after(clone);
+    }
+    if (clone.dataset.name !== pick.name) {
+      clone.dataset.name = pick.name;
+      clone.setAttribute('viewBox', `0 0 ${pick.w} ${pick.h}`);
+      clone.innerHTML = pick.body;
+    }
+    if (!svg.hasAttribute(HIDDEN)) svg.setAttribute(HIDDEN, '');
+    // its look: colour, glow, opacity, blend — the things that make it sit in the design
+    const cs = getComputedStyle(svg);
+    const st = clone.style;
+    st.color = paintOf(svg);
+    st.filter = cs.filter === 'none' ? '' : cs.filter;
+    st.opacity = cs.opacity;
+    st.mixBlendMode = cs.mixBlendMode;
+    st.pointerEvents = 'none';
+    st.overflow = 'visible';
+    // its place: measure where it lands at 0,0 and move it onto the original (works through any scaling around it)
+    const o = svg.getBoundingClientRect();
+    if (!o.width || !o.height) {
+      st.display = 'none';
+      continue;
+    }
+    st.display = '';
+    st.position = 'absolute';
+    st.left = '0px';
+    st.top = '0px';
+    st.margin = '0';
+    st.width = '100px';
+    st.height = '100px';
+    const c = clone.getBoundingClientRect();
+    const k = c.width / 100 || 1;
+    st.left = `${(o.left - c.left) / k}px`;
+    st.top = `${(o.top - c.top) / k}px`;
+    st.width = `${o.width / k}px`;
+    st.height = `${o.height / k}px`;
+  }
+}
+
+/** Hides an icon that was swapped (its copy is drawn instead). Rendered once by the TweaksProvider. */
+export const SWAP_CSS = `svg[${HIDDEN}] { visibility: hidden !important; }`;
+
+// The preview's player is a separate bundle: it reads original families and icon signatures through the edit's copy,
+// which remembers the originals.
+if (typeof window !== 'undefined') (window as unknown as {__lpSwaps?: unknown}).__lpSwaps = {textFamilyIn, iconsIn, iconSig};

package/template/src/lib/tweaks.tsx

@@ -18,6 +18,8 @@ import {createPortal} from 'react-dom';
 import {AbsoluteFill, Sequence, useCurrentFrame} from 'remotion';
 import {followTransform, type TrackFile} from './track';
 import {recolorTree, type Swap} from './recolor';
+import {loadFontChoices} from './fontChoices';
+import {iconPass, refontTree, SWAP_CSS, type FontSwaps, type IconSwaps} from './swaps';
 
 /**
  * One beat's adjustments. All optional.
@@ -34,6 +36,14 @@ export type Tweak = {
   /** colour swaps, {from: to}: each moves the whole shade family of `from` (src/lib/recolor.ts). Under the key
    * ALL they apply to the whole video; on a <Part> they apply to that graphic first. */
   recolor?: Swap;
+  /** font swaps, {from: to}: every text drawn in `from` is set in `to` (a brand family or one of
+   * src/lib/fontChoices.ts). On a graphic only inside it; under ALL in the whole video. */
+  fonts?: FontSwaps;
+  /** icons swapped inside a graphic: {<signature of the drawn icon>: the chosen icon} (src/lib/swaps.ts) */
+  icons?: IconSwaps;
+  /** under ALL: files the preview swapped, {old name: new name}. The preview shows it at once; Claude makes it real
+   * by changing the name in the edit's code (and copying an uploaded file in), then removes the entry. */
+  files?: Record<string, string>;
 };
 export type Tweaks = Record<string, Tweak>; // keyed by beat index, or a <Part>'s id
 /** The tweaks key whose `recolor` applies to the whole video. */
@@ -49,6 +59,17 @@ const useRecolor = (swap: Swap | undefined, skipParts: boolean) => {
   return ref;
 };
 
+/** Swapped icons inside an element, after every render (once any was set, so clearing them puts the originals back). */
+const useIcons = (ref: React.RefObject<HTMLElement | null>, icons: IconSwaps | undefined) => {
+  const used = useRef(false);
+  useLayoutEffect(() => {
+    if (icons && Object.keys(icons).length) used.current = true;
+    if (ref.current && used.current) iconPass(ref.current, icons);
+  });
+};
+/** A graphic's own text colour, as one style rule scoped to it. */
+const ownStyle = (sel: string, t: Tweak) => (t.color ? <style>{`${sel}, ${sel} * { color: ${t.color} !important; }`}</style> : null);
+
 /** Where scale grows from, as a share of the frame. The preview's resize handle works from the same point. */
 export const TWEAK_ORIGIN = '50% 55%';
 export const TWEAK_LIMITS = {scale: [0.7, 1.4], dy: [-300, 300], shift: [-12, 12], gain: [-12, 6]} as const;
@@ -77,10 +98,28 @@ export const TweaksProvider: React.FC<{tweaks?: Tweaks; beatStarts: number[]; tr
   const slotCtx = useMemo(() => ({slots, set}), [slots, set]);
   // the whole video's colour swaps; a graphic with its own swaps does both itself (see Part)
   const whole = useRecolor(tweaks[ALL]?.recolor, true);
+  // fonts chosen in the preview: loaded for the render (the preview carries its own copies)
+  const families = new Set<string>();
+  for (const t of Object.values(tweaks)) for (const f of Object.values(t.fonts ?? {})) families.add(f);
+  loadFontChoices(families);
+  const fontsUsed = useRef(false);
+  useLayoutEffect(() => {
+    if (families.size) fontsUsed.current = true;
+    if (!whole.current || !fontsUsed.current) return;
+    // a graphic's own swaps first, then the whole video's
+    refontTree(whole.current, (el) => {
+      const owner = el.closest<HTMLElement>('[data-lp-key], [data-lp-beat]');
+      const key = owner?.dataset.lpKey ?? owner?.dataset.lpBeat;
+      const own = key !== undefined ? tweaks[key]?.fonts : undefined;
+      const all = tweaks[ALL]?.fonts;
+      return own || all ? {...(all ?? {}), ...(own ?? {})} : undefined;
+    });
+  });
   return (
     <All.Provider value={{tweaks, beatAt, beatStarts, track, toSource}}>
       <Slots.Provider value={slotCtx}>
         <div ref={whole} data-lp-root="" style={{display: 'contents'}}>
+          <style>{SWAP_CSS}</style>
           {children}
         </div>
       </Slots.Provider>
@@ -123,6 +162,7 @@ export const Part: React.FC<{id: string; children: React.ReactNode}> = ({id, chi
   const swap = own || t.layer ? {...(all[ALL]?.recolor ?? {}), ...(own ?? {})} : undefined;
   const order = own ? {...own, ...Object.fromEntries(Object.entries(all[ALL]?.recolor ?? {}).filter(([k]) => !(k in own)))} : swap;
   const ref = useRecolor(order, false);
+  useIcons(ref, t.icons);
   const placed = t.scale || t.dy || t.dx;
   // display: contents with nothing applied — the layout is exactly as built. Always the same <div>, so a drag never
   // rebuilds what is inside it.
@@ -132,7 +172,7 @@ export const Part: React.FC<{id: string; children: React.ReactNode}> = ({id, chi
   if (t.hide) style.visibility = 'hidden';
   const el = (
     <div ref={ref} data-lp-key={id} data-lp-recolor={order ? '' : undefined} style={style}>
-      {t.color ? <style>{`[data-lp-key="${id}"], [data-lp-key="${id}"] * { color: ${t.color} !important; }`}</style> : null}
+      {ownStyle(`[data-lp-key="${id}"]`, t)}
       {children}
     </div>
   );
@@ -170,10 +210,14 @@ export const Tweaked: React.FC<{move?: boolean; children: React.ReactNode}> = ({
   // video. With nothing to apply it is display: contents — no box, so the layout is exactly as built. Both are the
   // same <div>, so starting a drag never rebuilds what is inside it (the preview's selection would lose it).
   const beat = ctx.beatAt(f);
+  const own = useRef<HTMLDivElement>(null);
+  useIcons(own, move ? t.icons : undefined);
   const placed = (
     <Here.Provider value={t}>
+      {move ? ownStyle(`[data-lp-beat="${beat}"]`, t) : null}
       {move ? (
         <div
+          ref={own}
           data-lp-beat={beat}
           style={
             t.scale || t.dy || t.dx