auricui-skill 0.0.0-stage → 0.1.2

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

@@ -0,0 +1,104 @@
+/**
+ * The update in Studio's top bar, beside the projects button. The app's (lib/host.ts `update`): once a new version is
+ * downloaded, Restart to install it; refused while an agent works or Studio exports, it says why beside it and stays,
+ * ready; quitting installs it too. Studio run with npm (WebUpdateButton): a newer openfilm on npm is offered, and Update
+ * runs it in the background; Studio starts again on it and the page reloads.
+ */
+import { useCallback, useEffect, useState } from 'react';
+import { CircleArrowDown, Loader2 } from 'lucide-react';
+
+import { useT } from '@/i18n';
+import { ApiError, api } from '../api';
+import { studioHost, useHostUpdate } from '../lib/host';
+import { refusedUpdate, webUpdateOf, type WebUpdate } from '../lib/web-update';
+import { Tooltip } from './Tooltip';
+
+const WAITING = { 'agent-busy': 'update.agentBusy', exporting: 'update.exporting', 'install-failed': 'update.installFailed' } as const;
+
+export function UpdateButton() {
+  const t = useT();
+  const host = useHostUpdate();
+  if (!host) return null;
+  const { update, restart } = host;
+  const words = (key: string) => t(key).replace('{version}', update.version);
+  if (update.status === 'installing') {
+    return (
+      <span role="status" className="flex h-[26px] shrink-0 items-center gap-1.5 rounded-md px-2 text-[12px] text-[var(--text-dim)]">
+        <Loader2 size={13} className="animate-spin" />
+        {t('update.installing')}
+      </span>
+    );
+  }
+  const waiting = update.waiting ? words(WAITING[update.waiting]) : null;
+  return (
+    <>
+      <Tooltip label={waiting ?? words('update.ready')} side="bottom">
+        <button type="button" onClick={() => void restart()}
+          className="flex h-[26px] shrink-0 items-center gap-1.5 rounded-md bg-[var(--accent-soft)] px-2 text-[12px] font-medium text-[var(--accent)] transition hover:brightness-110">
+          <CircleArrowDown size={14} />
+          {t('update.restart')}
+        </button>
+      </Tooltip>
+      {waiting ? <span role="status" className="min-w-0 truncate text-[12px] text-[var(--text-dim)]">{waiting}</span> : null}
+    </>
+  );
+}
+
+/* looked at as the page opens and every few hours (Studio asks npm at most daily); while updating, every two seconds */
+const LOOK_MS = 6 * 3_600_000;
+const UPDATING_MS = 2000;
+
+/**
+ * The newest openfilm for a Studio run with npm (none in the app, which updates itself, nor in a source checkout), and
+ * `start` to update to it. Shared by the top bar and Settings → About.
+ */
+export function useWebUpdate(): { update: WebUpdate | null; start: () => void } {
+  const [update, setUpdate] = useState<WebUpdate | null>(null);
+  const look = useCallback(() => { void api.version().then((v) => setUpdate(webUpdateOf(v))).catch(() => {}); }, []);
+  const updating = update?.status === 'updating';
+  useEffect(() => {
+    if (studioHost) return undefined;
+    if (!updating) look();
+    const timer = setInterval(look, updating ? UPDATING_MS : LOOK_MS);
+    return () => clearInterval(timer);
+  }, [look, updating]);
+  const start = useCallback(() => {
+    if (!update || update.status === 'updating') return;
+    const { version } = update;
+    setUpdate({ status: 'updating', version });
+    void api.update().catch((e: unknown) => setUpdate(e instanceof ApiError
+      ? refusedUpdate(version, e.body.code, e.message)
+      : { status: 'failed', version, error: e instanceof Error ? e.message : String(e) }));
+  }, [update]);
+  return { update, start };
+}
+
+/** Studio run with npm: Update when npm has a newer openfilm, its progress, or why it waits or failed. */
+export function WebUpdateButton() {
+  const t = useT();
+  const { update, start } = useWebUpdate();
+  if (!update) return null;
+  const words = (key: string) => t(key).replace('{version}', update.version);
+  if (update.status === 'updating') {
+    return (
+      <span role="status" className="flex h-[26px] shrink-0 items-center gap-1.5 rounded-md px-2 text-[12px] text-[var(--text-dim)]">
+        <Loader2 size={13} className="animate-spin" />
+        {t('update.webUpdating')}
+      </span>
+    );
+  }
+  const said = update.status === 'waiting' ? t(update.reason === 'exporting' ? 'update.webExporting' : 'update.webMaking')
+    : update.status === 'failed' ? t('update.webFailed').replace('{error}', update.error) : null;
+  return (
+    <>
+      <Tooltip label={said ?? words('update.webAvailable')} side="bottom">
+        <button type="button" onClick={start}
+          className="flex h-[26px] shrink-0 items-center gap-1.5 rounded-md bg-[var(--accent-soft)] px-2 text-[12px] font-medium text-[var(--accent)] transition hover:brightness-110">
+          <CircleArrowDown size={14} />
+          {t('update.webUpdate')}
+        </button>
+      </Tooltip>
+      {said ? <span role="status" className="min-w-0 truncate text-[12px] text-[var(--text-dim)]">{said}</span> : null}
+    </>
+  );
+}

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

@@ -0,0 +1,98 @@
+/**
+ * The transport bar under the picture: the timecode on the left, play in the center, the playback settings and full
+ * screen on the right. As tall (32px) as the pane bar above the picture, so the picture sits evenly between two equal edges.
+ */
+import type React from 'react';
+import { Expand, Pause, Play } from 'lucide-react';
+import { useT } from '@/i18n';
+import { formatTimecode, useTimecodeFps } from '@/lib/timecode';
+import { PANE_BTN, PANE_ICON } from './dock-pane-bar';
+import { LiveText, type PlaybackClock } from './LiveTime';
+import { PlaybackMenu, type PlaybackSettings } from './PlaybackMenu';
+import { Tooltip } from './Tooltip';
+import { useKeyHint } from '@/lib/keymap-store';
+
+/** The bar's buttons: the pane-bar size (22×22, icon 14) plus a keyboard focus ring (Tab must show where it is). */
+const VIEW_BTN = `${PANE_BTN} outline-none focus-visible:ring-1 focus-visible:ring-[var(--accent)]`;
+
+export function ViewerBar({
+  timeMs,
+  clock,
+  totalMs,
+  playing,
+  onPlayPause,
+  onFullscreen,
+  playback,
+  extra,
+}: {
+  timeMs: number;
+  /** The time on the clock (playing, scrubbing): only the timecode follows it, the rest of the bar stays still. */
+  clock?: PlaybackClock | null;
+  totalMs: number;
+  playing: boolean;
+  onPlayPause: () => void;
+  /** Full screen; the button is disabled while the film has no length. */
+  onFullscreen?: () => void;
+  /** Loop and speed (see PlaybackMenu). Without it there is no settings button. */
+  playback?: PlaybackSettings | null;
+  /** Shown before the buttons on the right (the source viewer: the part marked). */
+  extra?: React.ReactNode;
+}) {
+  const t = useT();
+  const keyHint = useKeyHint();
+  /* frames are counted at the project's rate: shown anew when it changes */
+  useTimecodeFps();
+  const playable = totalMs > 0;
+  const hours = totalMs >= 3_600_000;
+
+  /* `minmax(0,1fr)` rather than `1fr`: a 1fr column will not shrink below its content, and two full timecodes are 25
+     characters — a narrow pane would push the play button over the timecode. These columns shrink and clip. */
+  return (
+    <div className="grid h-8 shrink-0 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-2 px-2">
+      {/* where we are is read constantly: body color, 12px; the length one step fainter. One line, never wrapped:
+          when it does not fit, the length is clipped first. No hour field for a film under an hour. */}
+      <span className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-[12px] tabular-nums text-[var(--text)]">
+        <LiveText clock={clock} timeMs={timeMs} format={(ms) => formatTimecode(ms, { hours })} />
+        <span className="text-[11px] text-[var(--text-faint)]">
+          {' / '}{formatTimecode(totalMs, { hours })}
+        </span>
+      </span>
+      <Tooltip label={playing ? t('viewer.pause') : t('viewer.play')} shortcut={keyHint('play-pause')}>
+        <button
+          type="button"
+          onClick={onPlayPause}
+          disabled={!playable}
+          /* no focus on click: the next Space would land on the button and draw a focus ring; Tab focus is kept */
+          onMouseDown={(e) => e.preventDefault()}
+          className={`${VIEW_BTN} disabled:pointer-events-none disabled:opacity-30`}
+          aria-label={playing ? t('viewer.pause') : t('viewer.play')}
+        >
+          {playing ? <Pause size={PANE_ICON} fill="currentColor" /> : <Play size={PANE_ICON} fill="currentColor" />}
+        </button>
+      </Tooltip>
+      <span className="flex items-center justify-end gap-1">
+        {extra}
+        {playback ? (
+          <PlaybackMenu
+            settings={playback}
+            disabled={!playable}
+            className={`${VIEW_BTN} !w-auto min-w-[22px] gap-1 px-1 disabled:pointer-events-none disabled:opacity-30`}
+          />
+        ) : null}
+        {onFullscreen ? (
+          <Tooltip label={t('viewer.fullscreen')}>
+            <button
+              type="button"
+              onClick={onFullscreen}
+              disabled={!playable}
+              className={`${VIEW_BTN} disabled:pointer-events-none disabled:opacity-30`}
+              aria-label={t('viewer.fullscreen')}
+            >
+              <Expand size={PANE_ICON} />
+            </button>
+          </Tooltip>
+        ) : null}
+      </span>
+    </div>
+  );
+}

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

@@ -0,0 +1,147 @@
+/**
+ * "What's new" after an update (lib/whats-new.ts): once Studio runs a newer version than the one whose notes were last
+ * shown, the notes since then, in the language shown, grouped as new, improved and fixed, with the full changelog a
+ * click away. Closing it marks this version seen. A new install shows nothing (it only remembers the version).
+ * Settings › About shows this release's notes again, and Developer previews the newest (WHATS_NEW_EVENT).
+ */
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { ArrowUpRight, Sparkles, Wrench, Zap, X } from 'lucide-react';
+import { api } from '@/api';
+import { useLanguage, useT } from '@/i18n';
+import { RELEASES, WHATS_NEW_EVENT, compareVersions, notesToShow, releaseNotes, type NoteKind, type ReleaseNotes } from '@/lib/whats-new';
+
+const CHANGELOG = 'https://github.com/openfilm/openfilm/releases';
+const KINDS: readonly NoteKind[] = ['new', 'improved', 'fixed'];
+const KIND_ICON: Record<NoteKind, React.ReactNode> = {
+  new: <Sparkles size={14} aria-hidden />,
+  improved: <Zap size={14} aria-hidden />,
+  fixed: <Wrench size={14} aria-hidden />,
+};
+
+export function WhatsNew() {
+  const t = useT();
+  const language = useLanguage();
+  const [shown, setShown] = React.useState<ReleaseNotes[] | null>(null);
+  /** the version to mark seen when closed (after an update), null when opened on asking */
+  const [marking, setMarking] = React.useState<string | null>(null);
+
+  /* after an update: the notes since the version last shown; a new install only remembers its version */
+  React.useEffect(() => {
+    let live = true;
+    void Promise.all([api.version(), api.prefs()]).then(([v, prefs]) => {
+      if (!live) return;
+      const current = v.version;
+      if (!prefs.seenVersion) { void api.setPrefs({ seenVersion: current }).catch(() => {}); return; }
+      if (compareVersions(prefs.seenVersion, current) >= 0) return;
+      const list = notesToShow(prefs.seenVersion, current);
+      if (list.length) { setShown(list); setMarking(current); } else void api.setPrefs({ seenVersion: current }).catch(() => {});
+    }).catch(() => {});
+    return () => { live = false; };
+  }, []);
+
+  /* asked for (Settings › About, Developer): those versions' notes */
+  React.useEffect(() => {
+    const onAsk = (event: Event) => {
+      const versions = (event as CustomEvent<string[]>).detail ?? [];
+      const list = versions.map((v) => releaseNotes(v)).filter((r): r is ReleaseNotes => r !== null);
+      if (list.length) setShown(list);
+    };
+    window.addEventListener(WHATS_NEW_EVENT, onAsk);
+    return () => window.removeEventListener(WHATS_NEW_EVENT, onAsk);
+  }, []);
+
+  const close = React.useCallback(() => {
+    if (marking) void api.setPrefs({ seenVersion: marking }).catch(() => {});
+    setMarking(null);
+    setShown(null);
+  }, [marking]);
+
+  React.useEffect(() => {
+    if (!shown) return undefined;
+    /* Escape closes this alone: Settings, under it, leaves a key already handled */
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); close(); } };
+    window.addEventListener('keydown', onKey, true);
+    return () => window.removeEventListener('keydown', onKey, true);
+  }, [shown, close]);
+
+  if (!shown || typeof document === 'undefined') return null;
+  const newest = shown[0];
+  const date = (iso: string) => {
+    const d = new Date(`${iso}T12:00:00`);
+    return Number.isNaN(d.getTime()) ? iso : d.toLocaleDateString(language, { year: 'numeric', month: 'long', day: 'numeric' });
+  };
+
+  return createPortal(
+    /* over Settings (z 10050), where About and Developer open it */
+    <div className="fixed inset-0 z-[10100] flex items-center justify-center bg-black/45 p-4 backdrop-blur-[2px]" onClick={close}>
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="whats-new-title"
+        onClick={(e) => e.stopPropagation()}
+        className="flex max-h-[min(640px,88vh)] w-full max-w-[520px] flex-col overflow-hidden rounded-2xl border border-[var(--border)] bg-[var(--surface)] shadow-[var(--shadow-lg)]"
+      >
+        <div className="flex items-start gap-3 px-6 pb-2 pt-6">
+          <div className="min-w-0 flex-1">
+            <p className="text-[12px] font-medium uppercase tracking-[0.08em] text-[var(--text-faint)]">{t('whatsNew.eyebrow')}</p>
+            <h2 id="whats-new-title" className="mt-1 text-[20px] font-semibold text-[var(--text)]">
+              {t('whatsNew.title').replace('{version}', newest.version)}
+            </h2>
+          </div>
+          <button type="button" onClick={close} aria-label={t('whatsNew.close')}
+            className="-mr-2 -mt-1 rounded-lg p-1.5 text-[var(--text-faint)] transition hover:bg-[var(--bg-hover)] hover:text-[var(--text)]">
+            <X size={16} />
+          </button>
+        </div>
+        <div className="min-h-0 flex-1 overflow-y-auto px-6 pb-2">
+          {shown.map((release) => {
+            const notes = release.notes[language] ?? release.notes.en;
+            return (
+              <section key={release.version} className="py-3">
+                <p className="mb-2.5 text-[12.5px] text-[var(--text-muted)]">
+                  {shown.length > 1 ? `OpenFilm ${release.version} · ` : ''}{date(release.date)}
+                </p>
+                <div className="flex flex-col gap-3.5">
+                  {KINDS.map((kind) => {
+                    const items = notes.filter((n) => n.kind === kind);
+                    if (!items.length) return null;
+                    return (
+                      <div key={kind}>
+                        <p className="mb-1.5 flex items-center gap-1.5 text-[12.5px] font-semibold text-[var(--text)]">
+                          <span className="text-[var(--text-muted)]">{KIND_ICON[kind]}</span>
+                          {t(`whatsNew.kind.${kind}`)}
+                        </p>
+                        <ul className="flex flex-col gap-1.5 pl-5">
+                          {items.map((n, i) => (
+                            <li key={i} className="list-disc text-[13.5px] leading-[1.6] text-[var(--text-muted)] marker:text-[var(--text-faint)]">{n.text}</li>
+                          ))}
+                        </ul>
+                      </div>
+                    );
+                  })}
+                </div>
+              </section>
+            );
+          })}
+        </div>
+        <div className="flex items-center gap-3 border-t border-[var(--border)] px-6 py-4">
+          <a href={CHANGELOG} target="_blank" rel="noreferrer"
+            className="inline-flex items-center gap-1 text-[13px] text-[var(--text-muted)] transition hover:text-[var(--text)]">
+            {t('whatsNew.changelog')}<ArrowUpRight size={14} aria-hidden />
+          </a>
+          <button type="button" onClick={close} autoFocus
+            className="ml-auto inline-flex h-9 items-center justify-center rounded-[8px] bg-[var(--text)] px-5 text-[14px] font-medium text-[var(--bg)] transition hover:opacity-90">
+            {t('whatsNew.ok')}
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+/** Whether this release has notes to show again (Settings › About). */
+export const hasNotes = (version: string | undefined) => Boolean(version && releaseNotes(version));
+/** The newest release's notes, for a preview before it ships (Developer). */
+export const newestVersion = () => RELEASES[0]?.version ?? null;

package/skill/assets/upstream/packages/openfilm/studio/ui/src/components/dock-pane-bar.ts

@@ -0,0 +1,16 @@
+/**
+ * The shared styling for the bar at the top of each of the workspace's three panes; the side
+ * pane's bar is the original, and the viewer and inspector bars follow it.
+ *
+ * If any one pane changes its font size, colors, button box or spacing, the three bars stop
+ * lining up, so the styles live in one place.
+ */
+export const PANE_BAR = 'flex h-8 shrink-0 items-center gap-1 px-1.5';
+export const PANE_TITLE = 'min-w-0 truncate text-[12px] font-medium text-[var(--text-muted)]';
+export const PANE_BTN =
+  'flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-md text-[var(--text-dim)] transition hover:bg-[var(--bg-hover)] hover:text-[var(--text)]';
+export const PANE_BTN_ON = 'bg-[var(--bg-hover)] text-[var(--text)]';
+export const PANE_ICON = 14;
+/** The viewer's two panel switches (assets, inspector): the buttons a person reaches for most, one size up. */
+export const PANE_TOGGLE = PANE_BTN.replace('h-[22px] w-[22px]', 'h-7 w-7');
+export const PANE_TOGGLE_ICON = 16;