auricui-skill 0.0.0-stage → 0.1.2

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

@@ -0,0 +1,418 @@
+/**
+ * A page clip's Properties: what its page offers to change, each a property the person made of one of its layers (its
+ * words, its picture, whether it shows) or of one of its CSS variables (lib/component-props), as a design tool's
+ * component offers its properties. Only those, none worked out on their own. Each field paints first and writes when
+ * let go, as every inspector field does; what a clip fills in is an override, and a property can go back to its
+ * default. Its name is the person's: renamed with a double-click, removed from its menu. A pointer on a row outlines
+ * its layer on the picture.
+ */
+import * as React from 'react';
+import { HardDriveUpload, ImageIcon, Plus, RotateCcw } from 'lucide-react';
+
+import { useT } from '@/i18n';
+import type { FilmOverride } from '@/lib/film';
+import {
+  ROOT, fieldOf, isFontVar, labelOf, relativeTo, valueOf, type TemplateControls, type VarField,
+} from '@/lib/template-controls';
+import {
+  propOf, propValue, renamedProp, withProp, withPropValue, withPropsReset, withoutProp, type ComponentProp, type PropValue,
+} from '@/lib/component-props';
+import { joinFontFamily, splitFontFamily } from '@/lib/font-styles';
+import { readResourceDragData, RESOURCE_DRAG_TYPE } from '@/lib/resource-drag';
+import { ColorField, FIELD, INPUT, NumField, Section, SectionAction } from './inspector-fields';
+import { FontFamilyPicker } from './FontFamilyPicker';
+import { ContextMenu, type ContextMenuEntry } from './ContextMenu';
+import { pictureThumb } from './stage-menu';
+import { Tooltip } from './Tooltip';
+
+type T = ReturnType<typeof useT>;
+
+/** What the section needs of the clip: its page as it is on the picture, its overrides and properties, the picture. */
+export interface PropsHost {
+  /** What the page shows now (its variables, words and pictures); null when the clip is not on the picture now. */
+  read: () => Promise<TemplateControls | null>;
+  overrides: () => readonly FilmOverride[] | undefined;
+  /** The clip's properties (its data-props). */
+  props: () => readonly ComponentProp[];
+  /** Write the clip's properties. */
+  setProps: (next: readonly ComponentProp[]) => void;
+  /** Paints a change without writing it; null takes it back. */
+  preview: (target: { at: string; n?: number }, patch: { style?: Record<string, string>; text?: string } | null) => void;
+  /** The page's file, by its place in the project: a picture put in is named from its folder. */
+  page: string;
+  /** The project's pictures, by their place in the project, each with where its thumbnail is read from. */
+  pictures: () => Array<{ path: string; name: string; url?: string }>;
+  /** One from this computer, brought into the project: its place there (null: none picked). */
+  pickPicture?: () => Promise<string | null>;
+  /** Outline a layer of the page on the picture (a row pointed at); null: none. */
+  point?: (target: { at: string; n?: number } | null) => void;
+}
+
+const PICTURE = /\.(png|jpe?g|gif|webp|avif|svg|bmp)$/i;
+
+/* a page clip off the picture is read again now and then: the playhead may come to it */
+const OFF_PICTURE_EVERY_MS = 1500;
+
+const isNamedColor = (v: string) => typeof CSS !== 'undefined' && typeof CSS.supports === 'function' && CSS.supports('color', v);
+
+const sameAt = (a: { at: string; n?: number }, b: { at: string; n?: number }) => a.at === b.at && (a.n ?? null) === (b.n ?? null);
+
+export function PropertiesSection({ host, commit }: {
+  host: PropsHost;
+  /** Writes the clip's next overrides (null: none left). */
+  commit: (next: FilmOverride[] | null) => void;
+}) {
+  const t = useT();
+  const [controls, setControls] = React.useState<TemplateControls | null | undefined>(undefined);
+  const [menu, setMenu] = React.useState<{ x: number; y: number; items: ContextMenuEntry[] } | null>(null);
+  const [renaming, setRenaming] = React.useState<string | null>(null);
+  const overrides = host.overrides();
+  const props = host.props();
+  const kept = JSON.stringify(overrides ?? []);
+  React.useEffect(() => {
+    let live = true;
+    let timer = 0;
+    const read = () => {
+      void host.read().catch(() => null).then((next) => {
+        if (!live) return;
+        setControls((prev) => (JSON.stringify(prev) === JSON.stringify(next) ? prev : next));
+        if (!next) timer = window.setTimeout(read, OFF_PICTURE_EVERY_MS);
+      });
+    };
+    /* the picture shows a written change a moment after it is kept */
+    timer = window.setTimeout(read, 120);
+    return () => { live = false; window.clearTimeout(timer); };
+  }, [host, kept]);
+  /* nothing stays outlined once the section goes (another clip in hand) */
+  React.useEffect(() => () => { host.point?.(null); }, [host]);
+
+  const set = (prop: ComponentProp, value: PropValue | null) => commit(withPropValue(overrides, prop, value));
+  const changed = props.filter((p) => propValue(overrides, p) != null);
+  /* the page's variables not offered yet: what the + offers */
+  const vars = (controls?.vars ?? []).filter((v) => !propOf(props, 'var', v.name));
+  const add = (e: React.MouseEvent<HTMLButtonElement>) => {
+    const r = e.currentTarget.getBoundingClientRect();
+    setMenu({
+      x: r.left, y: r.bottom + 4,
+      items: vars.length
+        ? vars.map((v) => ({ id: `var:${v.name}`, label: labelOf(v.name), hint: v.name, onSelect: () => host.setProps(withProp(props, { name: labelOf(v.name), type: 'var', var: v.name })) }))
+        : [{ id: 'no-vars', label: t('inspector.propsNoVars'), disabled: true, onSelect: () => {} }],
+    });
+  };
+  const rowMenu = (e: React.MouseEvent, prop: ComponentProp) => {
+    e.preventDefault();
+    setMenu({
+      x: e.clientX, y: e.clientY,
+      items: [
+        { id: 'rename', label: t('inspector.propRename'), onSelect: () => setRenaming(prop.name) },
+        { id: 'remove', label: t('inspector.propRemove'), onSelect: () => host.setProps(withoutProp(props, prop.name)) },
+      ],
+    });
+  };
+  const pointing = (prop: ComponentProp) => {
+    const target = prop.type === 'var' ? null : { at: prop.at, ...(prop.n ? { n: prop.n } : {}) };
+    return target ? {
+      onPointerEnter: () => host.point?.(target),
+      onPointerLeave: () => host.point?.(null),
+      onFocus: () => host.point?.(target),
+      onBlur: () => host.point?.(null),
+    } : {};
+  };
+
+  const field = (prop: ComponentProp): React.ReactNode => {
+    const value = propValue(overrides, prop);
+    switch (prop.type) {
+      case 'text': {
+        const own = controls?.texts.find((x) => sameAt(x, prop))?.value ?? '';
+        const target = { at: prop.at, ...(prop.n ? { n: prop.n } : {}) };
+        return (
+          <WordsInput
+            label={prop.name}
+            value={typeof value === 'string' ? value : own}
+            onCommit={(next) => set(prop, next === own ? null : next)}
+            onPreview={(next) => host.preview(target, next == null ? null : { text: next })}
+          />
+        );
+      }
+      case 'image': {
+        const own = controls?.images?.find((x) => sameAt(x, prop))?.src ?? '';
+        /* what it draws now: the picture put in, read from the page's folder, else the page's own */
+        const src = typeof value === 'string' && controls?.page ? new URL(value, controls.page).href : own;
+        return <PictureInput src={src} host={host} label={prop.name} onPick={(path) => set(prop, relativeTo(host.page, path))} t={t} />;
+      }
+      case 'boolean':
+        return <Switch label={prop.name} on={value !== false} onChange={(on) => set(prop, on ? null : false)} />;
+      case 'var': {
+        const own = controls?.vars.find((v) => v.name === prop.var)?.value ?? '';
+        const now = typeof value === 'string' ? value : own;
+        const paint = (next: string | null) => host.preview({ at: ROOT }, next == null ? null : { style: { [prop.var]: next } });
+        return isFontVar(prop.var, now)
+          ? <FontInput label={prop.name} value={now} onCommit={(next) => set(prop, next)} onPreview={paint} />
+          : <VarInput name={prop.name} field={fieldOf(now, isNamedColor)} onCommit={(next) => set(prop, next)} onPreview={paint} />;
+      }
+    }
+  };
+
+  return (
+    <Section
+      id="properties"
+      title={t('inspector.props')}
+      aside={(
+        <span className="flex items-center">
+          {changed.length ? (
+            <SectionAction label={t('inspector.propsResetAll')} onClick={() => commit(withPropsReset(overrides, props))}><RotateCcw size={11} /></SectionAction>
+          ) : null}
+          <Tooltip label={t('inspector.propsAdd')}>
+            <button type="button" aria-label={t('inspector.propsAdd')} onClick={add} className="flex h-5 w-5 items-center justify-center rounded-[4px] text-[var(--text-muted)] transition hover:bg-[var(--bg-hover)] hover:text-[var(--text)]">
+              <Plus size={12} />
+            </button>
+          </Tooltip>
+        </span>
+      )}
+    >
+      {!props.length ? (
+        <p className="text-[10.5px] leading-[15px] text-[var(--text-faint)]">{t('inspector.propsEmpty')}</p>
+      ) : props.map((prop) => (
+        <div key={prop.name} {...pointing(prop)} onContextMenu={(e) => rowMenu(e, prop)}>
+          <Line
+            label={renaming === prop.name ? (
+              <NameInput
+                value={prop.name}
+                onDone={(next) => { setRenaming(null); host.setProps(renamedProp(props, prop.name, next)); }}
+                onCancel={() => setRenaming(null)}
+              />
+            ) : prop.name}
+            title={t('inspector.propRenameHint')}
+            onRename={() => setRenaming(prop.name)}
+            changed={propValue(overrides, prop) != null}
+            onReset={() => set(prop, null)}
+            t={t}
+          >
+            {field(prop)}
+          </Line>
+        </div>
+      ))}
+      {!controls && props.length ? (
+        <p className="text-[10.5px] leading-[15px] text-[var(--text-faint)]">{t('inspector.templateOffPicture')}</p>
+      ) : null}
+      {menu ? <ContextMenu x={menu.x} y={menu.y} items={menu.items} onClose={() => setMenu(null)} /> : null}
+    </Section>
+  );
+}
+
+/** A property's name typed anew: kept on Enter or when left, Esc gives up. */
+function NameInput({ value, onDone, onCancel }: { value: string; onDone: (next: string) => void; onCancel: () => void }) {
+  const [raw, setRaw] = React.useState(value);
+  const done = React.useRef(false);
+  return (
+    <input
+      autoFocus
+      value={raw}
+      spellCheck={false}
+      onFocus={(e) => e.currentTarget.select()}
+      onChange={(e) => setRaw(e.target.value)}
+      onBlur={() => { if (!done.current) { done.current = true; onDone(raw); } }}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' && !e.nativeEvent.isComposing) { done.current = true; onDone(raw); }
+        if (e.key === 'Escape') { done.current = true; onCancel(); }
+      }}
+      className="h-5 w-full min-w-0 rounded-[4px] bg-[var(--bg)] px-1 text-[11px] text-[var(--text)] outline-none ring-1 ring-[var(--accent)]"
+    />
+  );
+}
+
+/** Shown or not: a switch. */
+function Switch({ label, on, onChange }: { label: string; on: boolean; onChange: (on: boolean) => void }) {
+  return (
+    <button type="button" role="switch" aria-checked={on} aria-label={label} onClick={() => onChange(!on)} className="flex h-6 items-center">
+      <span aria-hidden className={`relative h-[16px] w-[28px] shrink-0 rounded-full transition-colors ${on ? 'bg-[var(--text)]' : 'bg-[var(--surface-2)] ring-1 ring-inset ring-[var(--border)]'}`}>
+        <span className={`absolute top-[3px] h-2.5 w-2.5 rounded-full transition-all ${on ? 'left-[15px] bg-[var(--bg)]' : 'left-[3px] bg-[var(--text-faint)]'}`} />
+      </span>
+    </button>
+  );
+}
+
+/** A picture: its thumbnail and name; clicked, the project's pictures and one from this computer; a picture dropped. */
+export function PictureInput({ src, host, label, onPick, t }: {
+  src: string; host: Pick<PropsHost, 'pictures' | 'pickPicture'>; label: string; onPick: (path: string) => void; t: T;
+}) {
+  const [menu, setMenu] = React.useState<{ x: number; y: number } | null>(null);
+  const [over, setOver] = React.useState(false);
+  const name = decodeURIComponent(src.split(/[?#]/)[0]!.split('/').pop() ?? '');
+  const entries = (): ContextMenuEntry[] => {
+    const list = host.pictures().slice(0, 40);
+    const pick = host.pickPicture;
+    return [
+      ...list.map((f) => ({ id: `pic:${f.path}`, label: f.name, icon: pictureThumb(f.url), onSelect: () => onPick(f.path) })),
+      ...(pick ? [
+        ...(list.length ? [{ id: 'pic-sep', separator: true as const }] : []),
+        { id: 'pic-computer', label: t('inspector.templatePictureComputer'), icon: <HardDriveUpload size={14} />, onSelect: () => { void pick().then((path) => { if (path && PICTURE.test(path)) onPick(path); }); } },
+      ] : []),
+    ];
+  };
+  return (
+    <>
+      <button
+        type="button"
+        aria-label={`${label}: ${t('inspector.templatePictureReplace')}`}
+        title={t('inspector.templatePictureReplace')}
+        onClick={(e) => { const r = e.currentTarget.getBoundingClientRect(); setMenu({ x: r.left, y: r.bottom + 4 }); }}
+        onDragOver={(e) => { if (e.dataTransfer.types.includes(RESOURCE_DRAG_TYPE)) { e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; setOver(true); } }}
+        onDragLeave={() => setOver(false)}
+        onDrop={(e) => {
+          setOver(false);
+          const file = readResourceDragData(e.dataTransfer);
+          if (!file || file.saved || !PICTURE.test(file.path)) return;
+          e.preventDefault();
+          onPick(file.path);
+        }}
+        className={`${FIELD} gap-1.5 px-1 text-left ${over ? 'ring-[1.5px] ring-[var(--accent)]' : ''}`}
+      >
+        <span className="flex h-[18px] w-[28px] shrink-0 items-center justify-center overflow-hidden rounded-[3px] bg-[var(--bg-hover)]">
+          {src ? <img src={src} alt="" className="h-full w-full object-cover" draggable={false} /> : <ImageIcon size={12} />}
+        </span>
+        <span className="min-w-0 flex-1 truncate text-[11px] text-[var(--text)]">{name}</span>
+      </button>
+      {menu ? <ContextMenu x={menu.x} y={menu.y} items={entries()} onClose={() => setMenu(null)} /> : null}
+    </>
+  );
+}
+
+/** A custom property that names a font: the font picker over its first family, the fallbacks after it kept. */
+function FontInput({ label, value, onCommit, onPreview }: {
+  label: string; value: string; onCommit: (value: string) => void; onPreview: (value: string | null) => void;
+}) {
+  const [family, rest] = splitFontFamily(value);
+  return (
+    <FontFamilyPicker
+      label={label}
+      value={family}
+      sample=""
+      onPreview={(next) => onPreview(joinFontFamily(next, rest))}
+      onRevert={() => onPreview(null)}
+      onCommit={(next) => onCommit(joinFontFamily(next, rest))}
+      className={FIELD}
+    />
+  );
+}
+
+/** A property: its name on the left (a double-click renames it), its field, and going back to its default. */
+function Line({ label, title, changed, onReset, onRename, t, children }: {
+  label: React.ReactNode; title: string; changed: boolean; onReset: () => void; onRename: () => void; t: T; children: React.ReactNode;
+}) {
+  const reset = changed ? (
+    <SectionAction label={t('inspector.propReset')} onClick={onReset}><RotateCcw size={11} /></SectionAction>
+  ) : <span className="w-5" />;
+  const name = (
+    <span className="min-w-0 truncate text-[11px] text-[var(--text-muted)]" title={title} onDoubleClick={onRename}>
+      {changed ? <span aria-hidden className="mr-1 inline-block h-1.5 w-1.5 rounded-full bg-[var(--accent)] align-middle" /> : null}
+      {label}
+    </span>
+  );
+  return (
+    <div className="grid grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)_20px] items-center gap-1.5">
+      {name}
+      <div className="min-w-0">{children}</div>
+      {reset}
+    </div>
+  );
+}
+
+/** A custom property's field by its kind: a color, a number with its unit, or words. */
+function VarInput({ name, field, onCommit, onPreview }: {
+  name: string;
+  field: VarField;
+  onCommit: (value: string) => void;
+  onPreview: (value: string | null) => void;
+}) {
+  const label = labelOf(name);
+  if (field.kind === 'color') {
+    return <ColorField label={label} value={field.value} onCommit={onCommit} onPreview={onPreview} />;
+  }
+  if (field.kind === 'number') {
+    const step = Number.isInteger(field.value) && Math.abs(field.value) >= 2 ? 1 : 0.1;
+    return (
+      <NumField
+        label={label}
+        bare
+        value={field.value}
+        step={step}
+        {...(field.unit ? { unit: field.unit } : {})}
+        onCommit={(n) => onCommit(valueOf({ ...field, value: n }))}
+        onPreview={(n) => onPreview(valueOf({ ...field, value: n }))}
+        onRevert={() => onPreview(null)}
+      />
+    );
+  }
+  return (
+    <TypedInput
+      label={label}
+      value={field.value}
+      onCommit={(v) => onCommit(valueOf({ ...field, value: v }))}
+    />
+  );
+}
+
+/** One line typed and kept when left or on Enter; Esc gives up. */
+function TypedInput({ label, value, onCommit }: { label: string; value: string; onCommit: (value: string) => void }) {
+  const [raw, setRaw] = React.useState(value);
+  React.useEffect(() => setRaw(value), [value]);
+  const cancelled = React.useRef(false);
+  return (
+    <div className={FIELD}>
+      <input
+        aria-label={label}
+        value={raw}
+        spellCheck={false}
+        onChange={(e) => setRaw(e.target.value)}
+        onBlur={() => {
+          if (cancelled.current) { cancelled.current = false; return; }
+          if (raw.trim() && raw !== value) onCommit(raw);
+          else setRaw(value);
+        }}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && !e.nativeEvent.isComposing) (e.target as HTMLInputElement).blur();
+          if (e.key === 'Escape') { cancelled.current = true; setRaw(value); (e.target as HTMLInputElement).blur(); }
+        }}
+        className={`${INPUT} pl-2`}
+      />
+    </div>
+  );
+}
+
+/** A layer's words: the picture follows as they are typed, kept when left or on Enter (Shift+Enter: a new line). */
+function WordsInput({ label, value, onCommit, onPreview }: {
+  label: string;
+  value: string;
+  onCommit: (value: string) => void;
+  onPreview: (value: string | null) => void;
+}) {
+  const [raw, setRaw] = React.useState(value);
+  const typing = React.useRef(false);
+  React.useEffect(() => { if (!typing.current) setRaw(value); }, [value]);
+  const cancelled = React.useRef(false);
+  return (
+    <textarea
+      aria-label={label}
+      value={raw}
+      rows={Math.min(4, Math.max(1, raw.split('\n').length))}
+      onChange={(e) => { typing.current = true; setRaw(e.target.value); onPreview(e.target.value); }}
+      onBlur={() => {
+        typing.current = false;
+        if (cancelled.current) { cancelled.current = false; return; }
+        if (raw !== value) onCommit(raw);
+      }}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) { e.preventDefault(); (e.target as HTMLTextAreaElement).blur(); }
+        if (e.key === 'Escape') {
+          cancelled.current = true;
+          typing.current = false;
+          setRaw(value);
+          onPreview(null);
+          (e.target as HTMLTextAreaElement).blur();
+        }
+      }}
+      className="w-full resize-none rounded-[5px] bg-[var(--fill-tsp)] px-2 py-1 text-[11.5px] leading-[1.5] text-[var(--text)] outline-none ring-1 ring-inset ring-transparent transition hover:ring-[var(--border)] focus:bg-[var(--bg)] focus:ring-[1.5px] focus:ring-[var(--accent)]"
+    />
+  );
+}

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

@@ -0,0 +1,100 @@
+import { Download, File as FileIcon } from 'lucide-react';
+import { useT } from '@/i18n';
+import { formatClipDuration, formatFileSize, type WorkspaceResource, type WorkspaceResourceKind } from '@/lib/workspace-resources';
+import { InspectorPanel } from './InspectorPanel';
+import { KIND_ICON } from './MediaPreview';
+
+/** A media file's properties, in the inspector's place. `url` is the file itself on the film origin (Download). */
+export function ResourceInspector({ file, url, width, onClose }: {
+  file: WorkspaceResource; url: string; width: number; onClose: () => void;
+}) {
+  const t = useT();
+  const Icon = KIND_ICON[file.kind] ?? FileIcon;
+  return (
+    <InspectorPanel title={t('assets.props')} width={width} onClose={onClose}>
+      <div className="flex items-start gap-2.5 border-b border-[var(--border)] py-4">
+        <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-[var(--fill-tsp)] text-[var(--text-muted)]"><Icon size={18} /></span>
+        <div className="min-w-0"><p className="whitespace-pre-wrap break-words text-[12px] font-medium">{file.name}</p><p className="mt-1 break-all text-[10px] leading-relaxed text-[var(--text-muted)]">{file.path}</p></div>
+      </div>
+      <AssetFields file={file} />
+      <div className="mt-3 flex flex-wrap gap-2 border-t border-[var(--border)] pt-4 text-[11px]">
+        <a href={url} download={file.name} className="flex items-center gap-1.5 rounded-md bg-[var(--fill-tsp)] px-2.5 py-2 hover:bg-[var(--bg-hover)]"><Download size={13} />{t('assets.download')}</a>
+      </div>
+    </InspectorPanel>
+  );
+}
+
+function fileExtension(name: string): string {
+  const cut = name.lastIndexOf('.');
+  return cut <= 0 ? '' : name.slice(cut + 1).toLowerCase();
+}
+
+function assetTypeText(file: WorkspaceResource, t: (path: string) => string): string {
+  const label = assetKindLabel(file.kind, t);
+  if (file.kind === 'mg') return label;
+  const ext = fileExtension(file.name);
+  return ext ? `${label} · ${ext.toUpperCase()}` : label;
+}
+
+function assetKindLabel(kind: WorkspaceResourceKind, t: (path: string) => string): string {
+  if (kind === 'mg') return t('assets.kindPage');
+  if (kind === 'video') return t('assets.catVideo');
+  if (kind === 'image') return t('assets.catImage');
+  if (kind === 'audio') return t('assets.kindAudio');
+  return t('assets.catOther');
+}
+
+/** Frame rate as people say it: 29.97 keeps two decimals, 30 is 30. */
+function formatFps(fps: number): string {
+  return Number.isInteger(fps) ? String(fps) : fps.toFixed(2).replace(/\.?0+$/, '');
+}
+
+/**
+ * A file's facts, read-only: one per row and not drawn as inputs — anything that looks like an input gets clicked,
+ * and none of these can be changed. Everything comes from props, so the panel opens without a request.
+ */
+function AssetFields({ file }: { file: WorkspaceResource }) {
+  const t = useT();
+  const rows: { label: string; value: string }[] = [
+    { label: t('assets.propType'), value: assetTypeText(file, t) },
+    { label: t('assets.propSize'), value: formatFileSize(file.size) },
+  ];
+  if (file.durationMs) {
+    rows.push({ label: t('assets.propDuration'), value: formatClipDuration(file.durationMs) });
+  }
+  if (file.w && file.h) {
+    rows.push({ label: t('assets.propDimensions'), value: `${file.w} × ${file.h}` });
+  }
+  /* only footage has a frame rate; 25 and 30 mixed in one film repeat a frame every few on export, and this is
+     where it shows before then */
+  if (file.kind === 'video' && file.fps) {
+    rows.push({ label: t('assets.propFps'), value: `${formatFps(file.fps)} fps` });
+  }
+  if (file.mtimeMs) {
+    rows.push({ label: t('assets.propModified'), value: new Date(file.mtimeMs).toLocaleString() });
+  }
+  /* heavy footage's proxy for the preview: being made, ready, or not to be */
+  if (file.proxy) {
+    const { state, ratio } = file.proxy;
+    rows.push({
+      label: t('assets.propProxy'),
+      value: state === 'making' ? t('media.proxyMaking').replace('{p}', String(Math.round((ratio ?? 0) * 100)))
+        : state === 'waiting' ? t('media.proxyWaiting') : state === 'failed' ? t('media.proxyFailed') : t('media.proxyReady'),
+    });
+  }
+  /* a link to media kept elsewhere (a NAS): where it is, or that it cannot be reached now */
+  if (file.link) {
+    rows.push({ label: t('assets.propLinked'), value: file.link.missing ? `${file.link.to} (${t('media.linkMissing')})` : file.link.to });
+  }
+
+  return (
+    <dl className="py-2">
+      {rows.map((row) => (
+        <div key={row.label} className="border-t border-[var(--border)] py-2 first:border-t-0 first:pt-1">
+          <dt className="text-[11px] leading-none text-[var(--text-muted)]">{row.label}</dt>
+          <dd className="mt-1 break-all text-[12px] leading-[1.45] text-[var(--text)]">{row.value}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}

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

@@ -0,0 +1,157 @@
+/**
+ * The small bar that comes up beside what is selected (clips on the timeline, a layer or a clip on the picture, a
+ * range or a moment on the ruler): a row of icon buttons for what can be done to it there, the first always
+ * "Add to chat" when the app around Studio has one. The actions are the ones the menus already have; the bar only
+ * puts the usual few a click away.
+ *
+ *   · **Beside it, never over it** (lib/selection-toolbar placeToolbar): above, else below, inside the area it belongs
+ *     to, and clear of what its owner says it must not cover (the other clips on the timeline); placed again on every
+ *     render of its owner, so it follows a scroll or a moved frame.
+ *   · **At once.** It shows with the selection's own frame, in the same paint, and stays away while `hidden` (a
+ *     marquee, dragging, trimming, cropping, typing, playing): its owner says when the selection is still moving.
+ *   · **Esc puts it away** until the selection changes.
+ *   · **On body**, like the menus: the timeline and the picture clip what spills out of them. Presses on it reach
+ *     neither (they would select or drag what is under it in the component tree), and take no focus (Space plays).
+ *   · `data-capture-hide`: the app hides it when it takes a picture of the viewer for a reference.
+ */
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+
+import { Tooltip } from '@/components/Tooltip';
+import { inHostPanel } from '@/components/typing-target';
+import { placeToolbar, type ScreenBox, type ToolbarPlacement } from '@/lib/selection-toolbar';
+
+export interface SelectionTool {
+  id: string;
+  label: string;
+  icon: React.ReactNode;
+  /** Its key, already formatted by shortcutHint. */
+  shortcut?: string;
+  disabled?: boolean;
+  /** Why it cannot be pressed (said in its tooltip). */
+  hint?: string;
+  danger?: boolean;
+  /** `button`: where a menu it opens hangs from. */
+  onSelect: (button: HTMLButtonElement) => void;
+}
+
+export type SelectionToolEntry = SelectionTool | { id: string; separator: true };
+
+export function SelectionToolbar({
+  selection, measure, hidden = false, lead, label, tools, ariaLabel,
+}: {
+  /** What is selected, as a key (null: nothing). Esc hides the bar until it changes. */
+  selection: string | null;
+  /**
+   * Where the selection is on screen and the area the bar stays in (and the room between, when not the usual; what it
+   * must not cover); null when it cannot be seen.
+   */
+  measure: () => { anchor: ScreenBox; bounds: ScreenBox; gap?: number; avoid?: readonly ScreenBox[] } | null;
+  /** Kept away for now (a drag, playback): shown again when it ends. */
+  hidden?: boolean;
+  /** The first button, always: "Add to chat" (none without a chat). */
+  lead?: SelectionTool | null;
+  /** Said after the first button: how many are selected ("3 clips"). */
+  label?: string;
+  /** The rest, after a separator. */
+  tools: readonly SelectionToolEntry[];
+  ariaLabel: string;
+}) {
+  const ref = React.useRef<HTMLDivElement | null>(null);
+  const [dismissed, setDismissed] = React.useState<string | null>(null);
+  const [pos, setPos] = React.useState<ToolbarPlacement | null>(null);
+  const [, setTick] = React.useState(0);
+
+  React.useEffect(() => { if (dismissed && dismissed !== selection) setDismissed(null); }, [dismissed, selection]);
+
+  const shown = !hidden && selection != null && dismissed !== selection && (Boolean(lead) || tools.length > 0);
+
+  React.useEffect(() => {
+    if (!shown) return undefined;
+    /* an Esc pressed in an app's own panel is the app's (its chat's: stop the agent) */
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape' && !inHostPanel(e.target)) setDismissed(selection); };
+    const again = () => setTick((n) => n + 1);
+    window.addEventListener('keydown', onKey);
+    window.addEventListener('resize', again);
+    window.addEventListener('scroll', again, true);
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      window.removeEventListener('resize', again);
+      window.removeEventListener('scroll', again, true);
+    };
+  }, [shown, selection]);
+
+  /* placed after every render (the owner re-renders as what it is about moves), measured first */
+  React.useLayoutEffect(() => {
+    if (!shown) { setPos(null); return; }
+    const m = measure();
+    const el = ref.current;
+    const next = m ? placeToolbar({
+      anchor: m.anchor, size: { width: el?.offsetWidth ?? 0, height: el?.offsetHeight ?? 0 }, bounds: m.bounds,
+      ...(m.gap != null ? { gap: m.gap } : {}), ...(m.avoid ? { avoid: m.avoid } : {}),
+    }) : null;
+    setPos((cur) => (cur && next && cur.left === next.left && cur.top === next.top && cur.side === next.side ? cur : next));
+  });
+
+  if (!shown || typeof document === 'undefined') return null;
+  const stop = (e: React.SyntheticEvent) => e.stopPropagation();
+  const side = pos?.side === 'below' ? 'bottom' : 'top';
+  const sep = (key: string) => <span key={key} aria-hidden className="mx-[3px] h-4 w-px shrink-0 bg-[var(--border)]" />;
+
+  return createPortal(
+    <div
+      ref={ref}
+      role="toolbar"
+      aria-label={ariaLabel}
+      data-selection-toolbar=""
+      data-capture-hide=""
+      onPointerDown={stop}
+      onPointerUp={stop}
+      onPointerMove={stop}
+      onClick={stop}
+      onDoubleClick={stop}
+      onContextMenu={(e) => { e.stopPropagation(); e.preventDefault(); }}
+      /* above the workspace, below menus and dialogs (starting at z-110) */
+      className="fixed z-[100] flex h-[28px] items-center gap-px rounded-[8px] border border-[var(--border)] bg-[var(--surface)] px-[2px] shadow-[var(--shadow-lg)]"
+      style={{
+        left: pos?.left ?? 0,
+        top: pos?.top ?? 0,
+        /* shown at once, where it goes: a rise would trail the click */
+        visibility: pos ? 'visible' : 'hidden',
+      }}
+    >
+      {lead ? <ToolbarButton tool={lead} side={side} /> : null}
+      {label ? <span className="shrink-0 whitespace-nowrap px-1.5 text-[11.5px] tabular-nums text-[var(--text-muted)]">{label}</span> : null}
+      {(lead || label) && tools.length ? sep('lead-sep') : null}
+      {tools.map((entry) => ('separator' in entry ? sep(entry.id) : <ToolbarButton key={entry.id} tool={entry} side={side} />))}
+    </div>,
+    document.body,
+  );
+}
+
+function ToolbarButton({ tool, side }: { tool: SelectionTool; side: 'top' | 'bottom' }) {
+  const tip = tool.disabled && tool.hint ? `${tool.label} · ${tool.hint}` : tool.label;
+  return (
+    <Tooltip label={tip} side={side} {...(tool.shortcut ? { shortcut: tool.shortcut } : {})}>
+      <button
+        type="button"
+        aria-label={tool.label}
+        /* aria-disabled, not disabled: a disabled button gets no hover, and its tooltip says why it cannot be pressed */
+        aria-disabled={tool.disabled || undefined}
+        data-tool={tool.id}
+        /* no focus from a click: the next Space plays instead of pressing this again */
+        onMouseDown={(e) => e.preventDefault()}
+        onClick={(e) => { if (!tool.disabled) tool.onSelect(e.currentTarget); }}
+        className={`flex h-[24px] w-[24px] shrink-0 items-center justify-center rounded-[6px] outline-none transition focus-visible:ring-1 focus-visible:ring-[var(--border-strong)] ${
+          tool.disabled
+            ? 'cursor-default text-[var(--text-faint)]'
+            : tool.danger
+              ? 'text-[var(--text-dim)] hover:bg-[var(--bg-hover)] hover:text-[var(--err)]'
+              : 'text-[var(--text-dim)] hover:bg-[var(--bg-hover)] hover:text-[var(--text)]'
+        }`}
+      >
+        {tool.icon}
+      </button>
+    </Tooltip>
+  );
+}