auricui-skill 0.0.0-stage → 0.1.2

package/skill/assets/upstream/packages/openfilm/studio/ui/src/components/AudioMeters.tsx

@@ -0,0 +1,188 @@
+/**
+ * The audio meters: the film's sound as it plays, left and right, peak (the light bar, with a mark that
+ * holds the loudest of late) and RMS (the solid bar inside it), on a dBFS scale. A channel that reached 0 dBFS lights
+ * its clip light at the top until it is clicked.
+ *
+ * Drawn on a canvas once a frame while the film plays, from the player's mix (editor/player.ts levels); paused, the
+ * bars fall back and then nothing runs at all.
+ */
+import * as React from 'react';
+
+import { useT } from '@/i18n';
+import {
+  channelLevel, fallTo, formatDb, holdPeak, meterPosition, METER_FLOOR_DB, METER_MARKS, type HeldPeak,
+} from '@/lib/audio-levels';
+import type { MixSamples } from '@/editor/player';
+import { useThemeChanges } from '@/lib/theme-changes';
+
+/** How wide the meters are, px: two bars and their scale. */
+export const METERS_W = 44;
+
+const CLIP_H = 7;
+const TOP = CLIP_H + 5;
+const BOTTOM = 6;
+const BAR_W = 6;
+const BAR_GAP = 2;
+const BARS_X = 4;
+
+/** The bar's colors along the scale: green, yellow from −18 dB, red from −6 dB. */
+function paint(ctx: CanvasRenderingContext2D, top: number, height: number, alpha: number) {
+  const g = ctx.createLinearGradient(0, top + height, 0, top);
+  const at = (db: number) => meterPosition(db);
+  g.addColorStop(0, `rgba(63,191,111,${alpha})`);
+  g.addColorStop(at(-18), `rgba(63,191,111,${alpha})`);
+  g.addColorStop(at(-17), `rgba(232,197,71,${alpha})`);
+  g.addColorStop(at(-7), `rgba(232,197,71,${alpha})`);
+  g.addColorStop(at(-6), `rgba(229,72,77,${alpha})`);
+  g.addColorStop(1, `rgba(229,72,77,${alpha})`);
+  return g;
+}
+
+type Shown = { peak: number; rms: number; held: HeldPeak & { shown: number } };
+const quiet = (): Shown => ({ peak: METER_FLOOR_DB, rms: METER_FLOOR_DB, held: { db: METER_FLOOR_DB, at: 0, shown: METER_FLOOR_DB } });
+
+export function AudioMeters({ levels, playing }: {
+  /** The mix's latest samples, or null when nothing plays (see Player.levels). */
+  levels: () => MixSamples | null;
+  playing: boolean;
+}) {
+  const t = useT();
+  const canvasRef = React.useRef<HTMLCanvasElement | null>(null);
+  const boxRef = React.useRef<HTMLDivElement | null>(null);
+  const shown = React.useRef<[Shown, Shown]>([quiet(), quiet()]);
+  const [clipped, setClipped] = React.useState<[boolean, boolean]>([false, false]);
+  const clippedRef = React.useRef(clipped);
+  clippedRef.current = clipped;
+  const [size, setSize] = React.useState({ w: METERS_W, h: 0 });
+  const [peakText, setPeakText] = React.useState(METER_FLOOR_DB);
+
+  React.useLayoutEffect(() => {
+    const el = boxRef.current;
+    if (!el) return undefined;
+    const ro = new ResizeObserver(() => setSize({ w: el.clientWidth, h: el.clientHeight }));
+    ro.observe(el);
+    setSize({ w: el.clientWidth, h: el.clientHeight });
+    return () => ro.disconnect();
+  }, []);
+
+  /** One picture of the bars and the scale. */
+  const draw = React.useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || size.h <= TOP + BOTTOM) return;
+    const dpr = window.devicePixelRatio || 1;
+    if (canvas.width !== Math.round(size.w * dpr) || canvas.height !== Math.round(size.h * dpr)) {
+      canvas.width = Math.round(size.w * dpr);
+      canvas.height = Math.round(size.h * dpr);
+    }
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, size.w, size.h);
+    const h = size.h - TOP - BOTTOM;
+    const y = (db: number) => TOP + h * (1 - meterPosition(db));
+    const styles = getComputedStyle(canvas);
+    const faint = styles.getPropertyValue('--tl-faint').trim() || 'rgba(128,128,128,0.6)';
+    const lane = styles.getPropertyValue('--tl-lane').trim() || 'rgba(128,128,128,0.15)';
+    /* the scale: a line and a number every 6 dB, a number every 12 */
+    ctx.font = '8px ui-sans-serif, system-ui, sans-serif';
+    ctx.textBaseline = 'middle';
+    const scaleX = BARS_X + 2 * BAR_W + BAR_GAP + 3;
+    for (const mark of METER_MARKS) {
+      const my = Math.round(y(mark)) + 0.5;
+      ctx.fillStyle = faint;
+      ctx.fillRect(scaleX, my, 3, 1);
+      if (mark % 12 === 0) ctx.fillText(String(Math.abs(mark)), scaleX + 5, my);
+    }
+    shown.current.forEach((ch, i) => {
+      const x = BARS_X + i * (BAR_W + BAR_GAP);
+      ctx.fillStyle = lane;
+      ctx.fillRect(x, TOP, BAR_W, h);
+      /* peak: the light bar; RMS: the solid one */
+      ctx.fillStyle = paint(ctx, TOP, h, 0.45);
+      ctx.fillRect(x, y(ch.peak), BAR_W, TOP + h - y(ch.peak));
+      ctx.fillStyle = paint(ctx, TOP, h, 1);
+      ctx.fillRect(x, y(ch.rms), BAR_W, TOP + h - y(ch.rms));
+      if (ch.held.shown > METER_FLOOR_DB) {
+        ctx.fillStyle = ch.held.shown >= -6 ? '#e5484d' : ch.held.shown >= -18 ? '#e8c547' : '#d9f2e2';
+        ctx.fillRect(x, Math.round(y(ch.held.shown)), BAR_W, 2);
+      }
+    });
+  }, [size]);
+
+  /* its colors are the theme's, read as it draws: when the theme changes it draws again, or it would keep the old
+     theme's bars until the film plays */
+  const theme = useThemeChanges();
+  React.useEffect(() => { draw(); }, [draw, theme]);
+
+  /* while playing (and while the bars fall back after), once a frame; nothing otherwise */
+  React.useEffect(() => {
+    let frame = 0;
+    let last = performance.now();
+    const tick = () => {
+      const now = performance.now();
+      const dt = now - last;
+      last = now;
+      const samples = playing ? levels() : null;
+      let moving = false;
+      const clips: [boolean, boolean] = [...clippedRef.current];
+      shown.current = shown.current.map((ch, i) => {
+        const level = samples ? channelLevel(samples[i as 0 | 1]) : { peakDb: METER_FLOOR_DB, rmsDb: METER_FLOOR_DB, clipped: false };
+        if (level.clipped) clips[i] = true;
+        /* stopped, the bars drop four times as fast: what is left of them says nothing */
+        const fall = samples ? dt : dt * 4;
+        const next: Shown = {
+          peak: fallTo(ch.peak, level.peakDb, fall),
+          rms: fallTo(ch.rms, level.rmsDb, fall),
+          held: holdPeak(ch.held, level.peakDb, now),
+        };
+        if (next.peak > METER_FLOOR_DB || next.held.shown > METER_FLOOR_DB) moving = true;
+        return next;
+      }) as [Shown, Shown];
+      if (clips[0] !== clippedRef.current[0] || clips[1] !== clippedRef.current[1]) setClipped(clips);
+      draw();
+      if (playing || moving) frame = requestAnimationFrame(tick);
+      else setPeakText(METER_FLOOR_DB);
+    };
+    frame = requestAnimationFrame(tick);
+    /* the readout: the loudest held peak, a few times a second (a number that changes every frame cannot be read) */
+    const readout = playing ? window.setInterval(() => setPeakText(Math.max(shown.current[0].held.shown, shown.current[1].held.shown)), 250) : 0;
+    return () => { cancelAnimationFrame(frame); window.clearInterval(readout); };
+  }, [playing, levels, draw]);
+
+  const clipLabel = t('editorTools.metersClip');
+  return (
+    <div
+      className="flex h-full shrink-0 flex-col border-l"
+      style={{ width: METERS_W, borderColor: 'var(--tl-line)', background: 'var(--tl-head)' }}
+      data-audio-meters=""
+      aria-label={t('editorTools.meters')}
+      role="group"
+    >
+      <div className="flex h-[34px] shrink-0 items-center justify-center font-mono text-[9px] tabular-nums" style={{ color: peakText >= -0.05 ? '#e5484d' : 'var(--tl-faint)' }}
+        title={t('editorTools.metersPeak')}>
+        {formatDb(peakText)}
+      </div>
+      <div ref={boxRef} className="relative min-h-0 flex-1">
+        <canvas ref={canvasRef} className="absolute inset-0 h-full w-full" style={{ width: size.w, height: size.h }} />
+        {/* the clip lights: lit when a channel reached 0 dBFS; a click puts them out */}
+        {([0, 1] as const).map((i) => (
+          <button
+            key={i}
+            type="button"
+            aria-label={`${clipLabel} (${i ? 'R' : 'L'})`}
+            title={clipLabel}
+            data-meter-clip={clipped[i] ? '1' : '0'}
+            onClick={() => setClipped([false, false])}
+            className="absolute top-0 rounded-[1px]"
+            style={{
+              left: BARS_X + i * (BAR_W + BAR_GAP),
+              width: BAR_W,
+              height: CLIP_H,
+              background: clipped[i] ? '#e5484d' : 'var(--tl-lane)',
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/skill/assets/upstream/packages/openfilm/studio/ui/src/components/BlockThumbs.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+
+import { THUMB_CELL_PX } from '@/lib/thumb-cache';
+import { thumbCellStyle } from '@/lib/thumb-cell';
+import { pickShot } from '@/lib/thumb-pick';
+import { retryImage } from '@/lib/retry-image';
+
+/**
+ * The row of thumbnails on a picture clip. The pictures come from outside (the `thumbs` prop); this only lays them
+ * out, on the source's own time grid (cells at whole steps from the source's start), cut by the clip's edges — as in
+ * any editor: trimming a clip crops its first and last pictures, it does not start the row again at its new edge.
+ * Laid out from the clip's left edge instead, a trim drew the first picture whole and the next one over it, and the
+ * row jumped to a new grid on every release.
+ *
+ * Every cell gets a picture, even one shot for another cell: zooming changes which time each cell stands for, and
+ * waiting for exact shots would blank the row on every zoom. So each cell takes the nearest shot (lib/thumb-pick:
+ * the cell straddling the clip's start stands for that start, and a shot from inside the clip comes first), with no
+ * distance limit — a far picture beats a half-empty clip that looks broken; exact shots replace it as they arrive.
+ */
+export function BlockThumbs({
+  thumbs, startMs, endMs, pxPerMs, height, topOffset = 0, thumbWidthPx = THUMB_CELL_PX, visiblePx,
+}: {
+  thumbs: ReadonlyMap<number, string>;
+  startMs: number;
+  endMs: number;
+  pxPerMs: number;
+  height: number;
+  /** How far below the clip's top to start: the info strip (name + length) is there and must stay visible. */
+  topOffset?: number;
+  thumbWidthPx?: number;
+  /**
+   * The stretch worth drawing (px from the clip's left edge); the whole clip without. A long source zoomed in is
+   * hundreds of cells while a screen shows dozens. The window is rounded to whole screens (see Timeline thumbWindow).
+   */
+  visiblePx?: { from: number; to: number } | undefined;
+}): React.ReactElement | null {
+  /* the shot times, sorted: the one for each cell is found by binary search */
+  const times = React.useMemo(
+    () => [...thumbs.keys()].sort((a, b) => a - b),
+    [thumbs],
+  );
+
+  const cells = React.useMemo(() => {
+    if (!(pxPerMs > 0) || height <= 0 || !times.length) return [];
+    const stepMs = thumbWidthPx / pxPerMs;
+    const out: { left: number; url: string }[] = [];
+    /* the cell straddling the clip's start begins before it (a negative left) and is cut by the clip's edge */
+    const first = Math.floor(startMs / stepMs) * stepMs;
+    for (let t = first; t < endMs; t += stepMs) {
+      const left = (t - startMs) * pxPerMs;
+      if (visiblePx && (left + thumbWidthPx < visiblePx.from || left > visiblePx.to)) continue;
+      const shot = pickShot(times, Math.round(t), startMs, endMs);
+      const url = shot == null ? undefined : thumbs.get(shot);
+      if (!url) continue;
+      out.push({ left, url });
+    }
+    return out;
+  }, [thumbs, times, startMs, endMs, pxPerMs, height, thumbWidthPx, visiblePx]);
+
+  if (!cells.length) return null;
+
+  return (
+    <div
+      className="pointer-events-none absolute inset-x-0 bottom-0 overflow-hidden"
+      style={{ top: topOffset }}
+    >
+      {/* keyed by index: on zoom every cell's left changes, and keying by it would remount the whole row */}
+      {cells.map((cell, i) => (
+        <img
+          key={i}
+          src={cell.url}
+          alt=""
+          draggable={false}
+          className="absolute top-0 object-cover"
+          style={thumbCellStyle(cell.left, thumbWidthPx, height)}
+          /* a picture that fails is hidden (the clip color shows), better than a broken-image icon, and asked for
+             again a little later; it comes back when it loads */
+          onError={(e) => { e.currentTarget.style.visibility = 'hidden'; retryImage(e.currentTarget); }}
+          onLoad={(e) => { e.currentTarget.style.visibility = ''; }}
+        />
+      ))}
+    </div>
+  );
+}

package/skill/assets/upstream/packages/openfilm/studio/ui/src/components/BlockWaveform.tsx

@@ -0,0 +1,201 @@
+/**
+ * The waveform on a clip. Without it a sound track is plain bars: no telling where someone speaks, where they breathe,
+ * where it is silent — and "did this cut land mid-word" can only be seen on the waveform.
+ *
+ * Drawn from the bottom, not mirrored: sound rows are short, and a mirrored waveform leaves half the height each way.
+ * A skyline still reads when low. On a canvas, not hundreds of divs: dozens of clips with
+ * hundreds of peaks each would be tens of thousands of nodes.
+ *
+ * Peaks come from the server: GET media?what=wave&path= → `{ duration (s), peaks }`, 40 peaks a second, 0..1;
+ * 503 while the file is still being written.
+ */
+import * as React from 'react';
+import { normalizeWavePeaks, waveformColumns } from '@/lib/waveform-columns';
+import { mediaFetch } from '@/lib/media-queue';
+import { useThemeChanges } from '@/lib/theme-changes';
+
+/** A sound's envelope: the whole file's peaks and its length (to turn peak indexes into ms). */
+interface Wave {
+  peaks: number[];
+  durationMs: number;
+}
+
+/** Peaks per second the server sends; the length when the answer has none. */
+const PEAKS_PER_SECOND = 40;
+
+/** At most this many device pixels per canvas: past the browser's limit a canvas goes blank. */
+const MAX_CANVAS_PX = 4096;
+/** A change this soon after the last drawing is drawn once the changes stop for as long (ms). */
+const BURST_MS = 150;
+
+/*
+ * Drawings waiting, done a few a frame (FRAME_BUDGET_MS of them at most): a zoom of a film with hundreds of sounds redrew
+ * them all in one go, a long freeze. A newer drawing of a canvas replaces its older one; the stretched old bitmap holds
+ * until it is done.
+ */
+const FRAME_BUDGET_MS = 6;
+const waiting = new Map<HTMLCanvasElement, () => void>();
+let drawing = 0;
+function drawSoon(el: HTMLCanvasElement, draw: () => void) {
+  waiting.set(el, draw);
+  if (!drawing) drawing = requestAnimationFrame(drawSome);
+}
+function drawSome() {
+  drawing = 0;
+  const start = performance.now();
+  for (const [el, draw] of waiting) {
+    waiting.delete(el);
+    draw();
+    if (performance.now() - start > FRAME_BUDGET_MS) break;
+  }
+  if (waiting.size) drawing = requestAnimationFrame(drawSome);
+}
+
+/* the color a waveform is drawn in, read once per color and theme: read from each canvas, each drawing laid out the
+   page's styles again */
+const colors = new Map<string, string>();
+function colorOf(el: HTMLCanvasElement, color: string, theme: unknown): string {
+  const key = `${String(theme)}\0${color}`;
+  let c = colors.get(key);
+  if (!c) {
+    c = getComputedStyle(el).color || color;
+    if (colors.size > 64) colors.clear();
+    colors.set(key, c);
+  }
+  return c;
+}
+
+/** Waveforms already fetched: the same sound is drawn again on every drag and zoom. */
+const CACHE = new Map<string, Wave>();
+const PENDING = new Map<string, Promise<Wave | null>>();
+
+/**
+ * The waveform, asked again while the server says it is not ready yet (503: a file an agent has just written).
+ * About half a minute at most; after that the block stays plain until its address changes.
+ */
+async function fetchWhenReady(url: string, tries = 30): Promise<Response> {
+  const res = await mediaFetch(url);
+  if (res.status !== 503 || tries <= 1) return res;
+  const wait = Math.min(Math.max(Number(res.headers.get('retry-after')) || 1, 0.5), 5) * 1000;
+  await new Promise((done) => setTimeout(done, wait));
+  return fetchWhenReady(url, tries - 1);
+}
+
+async function loadWave(url: string): Promise<Wave | null> {
+  if (CACHE.has(url)) return CACHE.get(url) ?? null;
+  const already = PENDING.get(url);
+  if (already) return already;
+  const task = fetchWhenReady(url)
+    .then(async (r) => {
+      if (!r.ok) return null;
+      const body = (await r.json()) as { peaks?: number[]; duration?: number; durationMs?: number };
+      if (!body.peaks?.length) return null;
+      const durationMs = typeof body.durationMs === 'number' ? body.durationMs
+        : typeof body.duration === 'number' ? body.duration * 1000
+          : (body.peaks.length / PEAKS_PER_SECOND) * 1000;
+      return { peaks: normalizeWavePeaks(body.peaks), durationMs };
+    })
+    .catch(() => null)
+    .then((wave) => {
+      if (wave) {
+        CACHE.set(url, wave);
+        while (CACHE.size > 256) CACHE.delete(CACHE.keys().next().value!);
+      }
+      PENDING.delete(url);
+      return wave;
+    });
+  PENDING.set(url, task);
+  return task;
+}
+
+export function BlockWaveform({
+  url, width, height, color, inMs = 0, durMs, visiblePx,
+}: {
+  url: string;
+  width: number;
+  height: number;
+  /**
+   * The waveform's color; may be a CSS variable (`var(--tl-wave)`): a canvas cannot read variables, so it is set as
+   * the element's `color` and read back computed, following the theme.
+   */
+  color: string;
+  /**
+   * Draw only this stretch (px within the clip). Zoomed in, a clip can be tens of thousands of pixels wide and only a
+   * slice is on screen: a canvas over the whole clip would be stretched past the limit (blurry) or burn memory on what
+   * cannot be seen.
+   */
+  visiblePx?: { from: number; to: number };
+  /**
+   * Where in the source the clip starts and how much it plays. The envelope is the whole file's; without taking off
+   * the in point the whole file is squeezed into the clip and the waveform lies about where the sound is.
+   */
+  inMs?: number;
+  durMs: number;
+}): React.ReactElement | null {
+  const ref = React.useRef<HTMLCanvasElement | null>(null);
+  const [loaded, setLoaded] = React.useState(() => ({ url, wave: CACHE.get(url) ?? null }));
+  // A new edit must never display the previous arrangement while its request is in flight.
+  const wave = loaded.url === url ? loaded.wave : CACHE.get(url) ?? null;
+
+  React.useEffect(() => {
+    let alive = true;
+    /* the same wave already in hand (from the cache) renders nothing: a clip drawn as it scrolls into view is not
+       drawn twice */
+    void loadWave(url).then((wave) => { if (alive) setLoaded((cur) => (cur.url === url && cur.wave === wave ? cur : { url, wave })); });
+    return () => { alive = false; };
+  }, [url]);
+
+  /* its color is read as it draws: a theme changed, it draws again */
+  const theme = useThemeChanges();
+  const from = Math.max(0, Math.min(width, Math.floor(visiblePx?.from ?? 0)));
+  const to = Math.max(from, Math.min(width, Math.ceil(visiblePx?.to ?? width)));
+  const sliceW = to - from;
+
+  /* when it was last drawn: a change soon after is part of a burst (a zoom, a scroll) */
+  const drawnAt = React.useRef(-Infinity);
+  React.useEffect(() => {
+    const el = ref.current;
+    if (!el || !wave?.peaks.length || sliceW <= 0 || height <= 0) return undefined;
+    /* drawn soon (see drawSoon); in a burst of zoom or scroll steps, once the burst stops (the stretched old bitmap
+       holds meanwhile): redrawn at every step, the waveforms were most of what a zoom cost */
+    const draw = () => {
+      drawnAt.current = performance.now();
+      /* capped in device pixels, not CSS pixels: capping CSS pixels would also drop Retina's 2×, and this layer is
+         thin enough that blur makes it useless. Full ratio while it fits, down to 1× at the cap. */
+      const drawW = Math.min(Math.round(sliceW), MAX_CANVAS_PX);
+      const dpr = Math.max(1, Math.min(window.devicePixelRatio || 1, MAX_CANVAS_PX / drawW));
+      el.width = Math.max(1, Math.round(drawW * dpr));
+      el.height = Math.max(1, Math.round(height * dpr));
+      const ctx = el.getContext('2d');
+      if (!ctx) return;
+      ctx.scale(dpr, dpr);
+      ctx.clearRect(0, 0, drawW, height);
+      ctx.fillStyle = colorOf(el, color, theme);
+
+      /* one column per pixel: more peaks than pixels takes the maximum (sampling would miss a drum hit and draw
+         silence); fewer peaks than pixels interpolates (nearest-peak steps are the sampling grid, not the sound) */
+      const sliceIn = inMs + (width > 0 ? (from / width) * durMs : 0);
+      const sliceDur = width > 0 ? (sliceW / width) * durMs : durMs;
+      const columns = waveformColumns(wave, sliceIn, sliceDur, drawW);
+      /* one path, one fill: thousands of fillRect calls would be thousands of draws */
+      ctx.beginPath();
+      for (let x = 0; x < drawW; x += 1) {
+        const v = columns[x]!;
+        const h = Math.max(1, v * height);
+        ctx.rect(x, height - h, 1, h);
+      }
+      ctx.fill();
+    };
+    const timer = window.setTimeout(() => drawSoon(el, draw), performance.now() - drawnAt.current < BURST_MS ? BURST_MS : 0);
+    return () => { window.clearTimeout(timer); waiting.delete(el); };
+  }, [wave, width, height, color, inMs, durMs, from, sliceW, theme]);
+
+  if (!wave?.peaks.length || sliceW <= 0) return null;
+  return (
+    <canvas
+      ref={ref}
+      className="pointer-events-none absolute bottom-0"
+      style={{ left: from, width: sliceW, height, color }}
+    />
+  );
+}

package/skill/assets/upstream/packages/openfilm/studio/ui/src/components/BrandLoadingScreen.tsx

@@ -0,0 +1,56 @@
+/**
+ * Full-screen loading: the logo and a moving bar, while a project opens.
+ *
+ * Opening a project means finding (or making) it and then reading its film. Both involve a
+ * noticeable wait, and during that wait **the screen must change**: when the UI sits still,
+ * people do not think "it is loading", they think "did I miss the click?" and click again.
+ *
+ * So no skeleton is drawn here. A skeleton guesses what will appear, and a wrong guess is
+ * costly: a new project lands on an empty picture, while a skeleton would first show blocks
+ * that are not there, making the page flash when loading ends. A full-screen background with
+ * the logo guesses nothing; what lands is covered up, not corrected.
+ *
+ * Two places show it in turn: App while it finds the project to open, then ProjectView while
+ * that project loads. Both look identical, so the handoff has no visible seam; the user sees
+ * one loading screen that stays lit throughout, not two that flash in turn.
+ */
+import { useT } from '@/i18n';
+import { BrandLogo } from './BrandLogo';
+
+export function BrandLoadingScreen({
+  labelKey,
+}: {
+  /** What is being done (an i18n key): both callers pass the same one and get the same sentence. */
+  labelKey?: string;
+}) {
+  const t = useT();
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      aria-busy
+      /* No entrance animation. This screen is mounted twice (App first, then ProjectView), and
+         the second mount would replay the entrance, flashing the whole screen at the handoff,
+         which is worse than having no loading screen. */
+      /* The background is --panel, the same as the workspace's when it lands, so when the loading
+         screen gives way the content just grows in and the base color never moves. */
+      className="workspace-shell z-[9000] flex flex-col items-center justify-center bg-[var(--panel)]"
+    >
+      {/* Kept small: an enlarged logo in the middle of the screen looks like a splash ad, while
+          this screen only means "one moment". The bar below is what moves. */}
+      <span className="text-[var(--text)]"><BrandLogo size={34} /></span>
+
+      {labelKey ? (
+        <p className="mt-6 text-[14px] font-medium tracking-[-0.01em] text-[var(--text)]">
+          {t(labelKey)}
+        </p>
+      ) : null}
+
+      {/* The bar is fake: opening a project cannot report a percentage. It only says one thing
+          here: something is still moving. A line frozen in one place would look stuck. */}
+      <div className="mt-5 h-[3px] w-[180px] overflow-hidden rounded-full bg-[var(--border)]">
+        <div className="openfilm-loading-bar h-full w-1/3 rounded-full bg-[var(--text)]/60" />
+      </div>
+    </div>
+  );
+}

package/skill/assets/upstream/packages/openfilm/studio/ui/src/components/BrandLogo.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+/*
+ * The mark: a playhead over two clips, forming an F, in the surrounding text's color. The clips are cut away around
+ * the playhead (a real gap, so whatever is behind shows through), which keeps the playhead's shape in one color.
+ */
+const VIEWBOX = '8 6 84 92';
+const PLAYHEAD = 'M17 12H37Q40 12 40 15V27Q40 29 38.5 30.5L31 37V88Q31 92 27 92Q23 92 23 88V37L15.5 30.5Q14 29 14 27V15Q14 12 17 12Z';
+
+export function BrandLogo({ size = 18 }: { size?: number }) {
+  const gap = `openfilm-gap-${React.useId().replace(/:/g, '')}`;
+  return (
+    <svg width={size} height={size} viewBox={VIEWBOX} fill="currentColor" className="block shrink-0" role="img" aria-label="OpenFilm">
+      <mask id={gap} maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
+        <rect width="100" height="100" fill="#fff" />
+        <path d={PLAYHEAD} stroke="#000" strokeWidth="7" strokeLinejoin="round" />
+      </mask>
+      <g mask={`url(#${gap})`}>
+        <rect x="22" y="12" width="64" height="20" rx="5" />
+        <rect x="25" y="44" width="47" height="19" rx="5" />
+      </g>
+      <path d={PLAYHEAD} />
+    </svg>
+  );
+}

package/skill/assets/upstream/packages/openfilm/studio/ui/src/components/Card.tsx

@@ -0,0 +1,89 @@
+/**
+ * The one card shell (confirmations, notices) and its buttons: background and border follow the theme, radius 12,
+ * one button height (28) in three weights — primary (filled), secondary (outlined), quiet (text only) — plus danger.
+ */
+import React from 'react';
+import { X } from 'lucide-react';
+import { useT } from '@/i18n';
+
+/** The shell of things that float up (menus, dropdowns): the card's shadow on the floating surface. */
+export const POPOVER_CHROME: React.CSSProperties = {
+  background: 'var(--bg-surface)',
+  border: '1px solid var(--border-strong)',
+  borderRadius: 12,
+  boxShadow: '0 16px 40px -8px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.18)',
+};
+
+export function Card({
+  icon,
+  title,
+  body,
+  onClose,
+  children,
+  role,
+  className = '',
+}: {
+  icon?: React.ReactNode;
+  title: React.ReactNode;
+  body?: React.ReactNode;
+  onClose?: () => void;
+  children?: React.ReactNode;
+  role?: React.AriaRole;
+  className?: string;
+}) {
+  const t = useT();
+  return (
+    <div
+      {...(role ? { role } : {})}
+      className={`relative rounded-[12px] border border-[var(--card-border)] bg-[var(--card-bg)] px-3.5 pb-3 pt-3 shadow-[0_8px_24px_-12px_rgba(0,0,0,0.35)] ${className}`}
+    >
+      {onClose ? (
+        <div className="absolute right-2 top-2 flex items-center gap-0.5">
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label={t('project.close')}
+            className="flex h-6 w-6 items-center justify-center rounded-md text-[var(--text-faint)] transition hover:bg-[var(--bg-hover)] hover:text-[var(--text)]"
+          >
+            <X size={14} strokeWidth={1.75} />
+          </button>
+        </div>
+      ) : null}
+      <div className={`flex items-start gap-2 ${onClose ? 'pr-7' : ''}`}>
+        {icon ? <span className="mt-[2px] shrink-0 text-[var(--text-muted)]">{icon}</span> : null}
+        <div className="min-w-0 flex-1">
+          <h3 className="text-[13px] font-medium leading-snug text-[var(--text)]">{title}</h3>
+          {body ? <div className="mt-1 whitespace-pre-line break-words text-[12.5px] leading-relaxed text-[var(--text-muted)]">{body}</div> : null}
+        </div>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export function CardActions({ children, className = '' }: { children: React.ReactNode; className?: string }) {
+  return <div className={`mt-3 flex items-center justify-end gap-2 ${className}`}>{children}</div>;
+}
+
+type Weight = 'primary' | 'secondary' | 'quiet' | 'danger';
+
+const WEIGHT: Record<Weight, string> = {
+  primary: 'bg-[var(--text)] text-[var(--panel)] hover:opacity-90',
+  secondary: 'text-[var(--text)] ring-1 ring-inset ring-[var(--border-strong)] hover:bg-[var(--bg-hover)]',
+  quiet: 'text-[var(--text-muted)] hover:text-[var(--text)]',
+  danger: 'bg-[var(--err)] text-white hover:brightness-110',
+};
+
+export const CardButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement> & { weight?: Weight }
+>(function CardButton({ weight = 'secondary', className = '', type = 'button', ...props }, ref) {
+  return (
+    <button
+      {...props}
+      ref={ref}
+      type={type}
+      className={`inline-flex h-7 shrink-0 items-center justify-center gap-1.5 rounded-lg px-3 text-[12px] font-medium outline-none transition focus-visible:ring-2 focus-visible:ring-[var(--text)]/30 disabled:pointer-events-none disabled:opacity-50 ${WEIGHT[weight]} ${className}`}
+    />
+  );
+});