auricui-skill 0.0.0-stage → 0.1.2

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

@@ -0,0 +1,28 @@
+import React from 'react';
+
+/**
+ * Records whether the last focus change came from Tab or from a pointer.
+ *
+ * The `:focus-visible` heuristic treats any key press as keyboard use, so pressing Space
+ * (play) would draw a focus ring on a button that was just clicked. Tracking the source
+ * ourselves lets CSS draw the ring only after a real Tab.
+ */
+export function FocusNav() {
+  React.useEffect(() => {
+    const root = document.documentElement;
+    root.setAttribute('data-focus-nav', 'pointer');
+    const onKey = (event: KeyboardEvent): void => {
+      if (event.key === 'Tab') root.setAttribute('data-focus-nav', 'tab');
+    };
+    const onPointer = (): void => {
+      root.setAttribute('data-focus-nav', 'pointer');
+    };
+    window.addEventListener('keydown', onKey, true);
+    window.addEventListener('pointerdown', onPointer, true);
+    return () => {
+      window.removeEventListener('keydown', onKey, true);
+      window.removeEventListener('pointerdown', onPointer, true);
+    };
+  }, []);
+  return null;
+}

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

@@ -0,0 +1,293 @@
+/**
+ * Picking a font in the inspector.
+ *
+ * The menu has "In this project" first (the families the project's pages declare with @font-face, and the ones the
+ * page in hand names), then the recent picks, then every font installed here by script — the CJK groups first when
+ * the layer's text is CJK. **Each row is set in its own face** (a project font through its own files), a CJK font
+ * whose name is in Latin letters with a small sample of its script beside it.
+ *
+ * Hovering a row or moving through the rows with ↑/↓ shows that family on the picture; Esc, a click elsewhere or
+ * closing without a pick takes it back; Enter or a click keeps it (one change). Typing filters by name and alias and
+ * highlights the best match; ↑/↓/Enter work from the search box. A name in no list can still be typed and picked.
+ *
+ * A family the page cannot draw (not installed, not declared for the page) shows in the field with a warning.
+ */
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { AlertTriangle, Check, ChevronDown } from 'lucide-react';
+
+import { useT } from '@/i18n';
+import { CJK_TEXT, fontMenu, knownAvailable, rowFontFamily, sampleOf, type FontRow, type SectionId } from '@/lib/font-menu';
+import { familyRenders, readRecentFonts, rememberRecentFont, useInstalledFonts, useProjectFonts } from '@/lib/use-fonts';
+import { Tooltip } from './Tooltip';
+
+const SECTION_LABEL: Record<SectionId, string> = {
+  project: 'inspector.fontGroupProject',
+  recent: 'inspector.fontGroupRecent',
+  'zh-CN': 'inspector.fontGroupZh',
+  'ja-JP': 'inspector.fontGroupJa',
+  'ko-KR': 'inspector.fontGroupKo',
+  latin: 'inspector.fontGroupLatin',
+};
+
+export function FontFamilyPicker({
+  label,
+  value,
+  sample,
+  missing,
+  onPreview,
+  onRevert,
+  onCommit,
+  className,
+}: {
+  label: string;
+  value: string;
+  /** The selected layer's text: decides whether the CJK groups come first. */
+  sample: string;
+  /** The page cannot draw `value`: the field warns. */
+  missing?: boolean;
+  /** Shows a family on the picture, nothing written. */
+  onPreview: (family: string) => void;
+  /** Takes the preview back off the picture. */
+  onRevert: () => void;
+  onCommit: (family: string) => void;
+  className: string;
+}) {
+  const t = useT();
+  const installed = useInstalledFonts();
+  const { fonts: project, page } = useProjectFonts();
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState('');
+  const [active, setActive] = React.useState(0);
+  const [recent, setRecent] = React.useState<string[]>([]);
+  const anchor = React.useRef<HTMLButtonElement>(null);
+  const listRef = React.useRef<HTMLDivElement>(null);
+  /* the layer's family when the menu opened: the stage reports a previewed family as the layer's own */
+  const origin = React.useRef(value);
+  /* the family shown on the picture now (null: the layer's own) */
+  const previewing = React.useRef<string | null>(null);
+  /* the highlight moved by the keys: scroll it into view (a hovered row is in view already) */
+  const keyed = React.useRef(false);
+  const [at, setAt] = React.useState<{ left: number; top: number; width: number; maxHeight: number } | null>(null);
+
+  const place = React.useCallback(() => {
+    const box = anchor.current?.getBoundingClientRect();
+    if (!box) return;
+    const below = window.innerHeight - box.bottom - 12;
+    const above = box.top - 12;
+    /* below when there is room for a good part of it, else on the roomier side; never past the window */
+    const down = below >= 320 || below >= above;
+    const maxHeight = Math.max(160, Math.min(460, down ? below : above));
+    const top = down ? box.bottom + 4 : box.top - 4 - maxHeight;
+    const width = Math.max(box.width, 260);
+    setAt({ left: Math.max(8, Math.min(box.left, window.innerWidth - width - 8)), top, width, maxHeight });
+  }, []);
+
+  React.useLayoutEffect(() => {
+    if (!open) return undefined;
+    place();
+    window.addEventListener('resize', place);
+    window.addEventListener('scroll', place, true);
+    return () => {
+      window.removeEventListener('resize', place);
+      window.removeEventListener('scroll', place, true);
+    };
+  }, [open, place]);
+
+  const sections = React.useMemo(
+    () => fontMenu({ installed: installed ?? [], project, page, recent, query, cjkFirst: CJK_TEXT.test(sample) }),
+    [installed, project, page, recent, query, sample],
+  );
+  const rows = React.useMemo(() => sections.flatMap((s) => s.rows), [sections]);
+  const typed = query.trim();
+  const custom = typed && !rows.some((r) => r.family.toLowerCase() === typed.toLowerCase()) ? typed : null;
+  const options = React.useMemo(() => (custom ? [...rows.map((r) => r.family), custom] : rows.map((r) => r.family)), [rows, custom]);
+
+  /* typing: the best match highlighted (not shown on the picture: that is for the hand on a row, or the arrows) */
+  React.useEffect(() => { setActive(0); keyed.current = true; }, [query]);
+  React.useEffect(() => {
+    if (!open) return;
+    /* open on the current family */
+    setRecent(readRecentFonts());
+    const i = rows.findIndex((r) => r.family === origin.current);
+    setActive(i >= 0 ? i : 0);
+    keyed.current = true;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+  React.useEffect(() => {
+    if (!open || !keyed.current) return;
+    keyed.current = false;
+    listRef.current?.querySelector(`[data-index="${active}"]`)?.scrollIntoView({ block: 'nearest' });
+  }, [active, open, at]);
+
+  const show = (family: string | undefined) => {
+    if (!family || family === origin.current) {
+      if (previewing.current != null) { previewing.current = null; onRevert(); }
+      return;
+    }
+    if (previewing.current === family) return;
+    previewing.current = family;
+    onPreview(family);
+  };
+  const close = () => {
+    setOpen(false);
+    setQuery('');
+    if (previewing.current != null) { previewing.current = null; onRevert(); }
+  };
+  const pick = (family: string) => {
+    setOpen(false);
+    setQuery('');
+    const was = previewing.current;
+    previewing.current = null;
+    if (!family || family === origin.current) { if (was != null) onRevert(); return; }
+    setRecent(rememberRecentFont(family));
+    onCommit(family);
+  };
+  const move = (by: number) => {
+    if (!options.length) return;
+    const next = Math.max(0, Math.min(options.length - 1, active + by));
+    keyed.current = true;
+    setActive(next);
+    show(options[next]);
+  };
+
+  /* the project's families the page cannot draw: marked in the menu as the field marks one */
+  const unavailable = (family: string) => {
+    if (installed == null) return false;
+    const known = knownAvailable(family, installed, project, page);
+    return known == null ? !familyRenders(family) : !known;
+  };
+
+  let index = -1;
+  const rowOf = (row: FontRow, section: SectionId) => {
+    index += 1;
+    const i = index;
+    const glyph = sampleOf(row);
+    const current = row.family === origin.current;
+    const gone = section === 'project' && unavailable(row.family);
+    return (
+      <button
+        key={`${section}:${row.family}`}
+        type="button"
+        role="option"
+        aria-selected={i === active}
+        data-index={i}
+        onPointerEnter={() => { setActive(i); show(row.family); }}
+        onClick={() => pick(row.family)}
+        className={`flex w-full items-center gap-2 px-2.5 py-1 text-left ${i === active ? 'bg-[var(--bg-hover)]' : ''}`}
+      >
+        <span className="flex w-3 shrink-0 justify-center">
+          {current ? <Check size={12} className="text-[var(--accent)]" aria-hidden /> : null}
+        </span>
+        <span
+          className={`min-w-0 flex-1 truncate text-[14px] ${row.elsewhere ? 'text-[var(--text-muted)]' : 'text-[var(--text)]'}`}
+          style={{ fontFamily: rowFontFamily(row) }}
+        >
+          {row.family}
+        </span>
+        {gone ? <AlertTriangle size={11} className="shrink-0 text-[var(--warn)]" aria-label={t('inspector.fontMissing')} /> : null}
+        {row.elsewhere ? <span className="shrink-0 text-[10px] text-[var(--text-faint)]">{t('inspector.fontElsewhere')}</span> : null}
+        {glyph ? (
+          <span aria-hidden className="shrink-0 text-[13px] text-[var(--text-faint)]" style={{ fontFamily: rowFontFamily(row) }}>{glyph}</span>
+        ) : null}
+      </button>
+    );
+  };
+
+  return (
+    <>
+      <button
+        ref={anchor}
+        type="button"
+        aria-label={label}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        onClick={() => {
+          if (open) { close(); return; }
+          origin.current = value;
+          setOpen(true);
+        }}
+        className={`${className} cursor-default text-left`}
+      >
+        <span className="w-2 shrink-0" />
+        <span
+          className={`min-w-0 flex-1 truncate text-[11px] ${missing ? 'text-[var(--text-muted)]' : 'text-[var(--text)]'}`}
+          style={value ? { fontFamily: rowFontFamily({ family: value, project: project.some((f) => f.family === value) }) } : undefined}
+        >
+          {value || '—'}
+        </span>
+        {missing ? (
+          <Tooltip label={t('inspector.fontMissing')}>
+            <span className="mr-1 flex shrink-0 items-center text-[var(--warn)]" aria-label={t('inspector.fontMissing')} role="img">
+              <AlertTriangle size={12} aria-hidden />
+            </span>
+          </Tooltip>
+        ) : null}
+        <ChevronDown size={12} className="mr-1.5 shrink-0 text-[var(--text-faint)]" aria-hidden />
+      </button>
+      {open && at && typeof document !== 'undefined' ? createPortal(
+        /* drawn on body, yet part of the inspector: the stage sees data-film-inspector and does not take a click or
+           Esc here as "clicked elsewhere, drop the selection" */
+        <div data-film-inspector="">
+          <div className="fixed inset-0 z-[10150]" onPointerDown={close} aria-hidden />
+          <div
+            role="dialog"
+            aria-label={label}
+            className="fixed z-[10151] flex flex-col overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--panel)] shadow-[var(--shadow-lg)]"
+            style={{ left: at.left, top: at.top, width: at.width, maxHeight: at.maxHeight }}
+          >
+            <input
+              autoFocus
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder={t('inspector.fontSearch')}
+              aria-label={t('inspector.fontSearch')}
+              onKeyDown={(e) => {
+                if (e.key === 'ArrowDown') { e.preventDefault(); move(1); }
+                else if (e.key === 'ArrowUp') { e.preventDefault(); move(-1); }
+                else if (e.key === 'Enter') { e.preventDefault(); const f = options[active]; if (f) pick(f); }
+                /* close the menu only: bubbling up, the stage would take it as "deselect" */
+                else if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); close(); }
+              }}
+              className="h-8 shrink-0 border-b border-[var(--border)] bg-transparent px-2.5 text-[12px] text-[var(--text)] outline-none placeholder:text-[var(--text-faint)]"
+            />
+            <div
+              ref={listRef}
+              role="listbox"
+              className="min-h-0 flex-1 overflow-y-auto py-1"
+              /* the hand left the rows: the picture shows the layer's own font again */
+              onPointerLeave={() => show(undefined)}
+            >
+              {installed == null && !rows.length ? (
+                <p className="px-2.5 py-2 text-[12px] text-[var(--text-faint)]">{t('inspector.fontLoading')}</p>
+              ) : null}
+              {sections.map((s) => (
+                <div key={s.id} role="group" aria-label={t(SECTION_LABEL[s.id])}>
+                  <div className="px-2.5 pb-0.5 pt-1.5 text-[10.5px] font-medium text-[var(--text-faint)]">{t(SECTION_LABEL[s.id])}</div>
+                  {s.rows.map((row) => rowOf(row, s.id))}
+                </div>
+              ))}
+              {custom ? (
+                <button
+                  type="button"
+                  role="option"
+                  aria-selected={active === options.length - 1}
+                  data-index={options.length - 1}
+                  onPointerEnter={() => { setActive(options.length - 1); show(custom); }}
+                  onClick={() => pick(custom)}
+                  className={`flex w-full items-center px-2.5 py-1.5 text-left text-[12px] text-[var(--text-muted)] ${active === options.length - 1 ? 'bg-[var(--bg-hover)]' : ''}`}
+                >
+                  {t('inspector.fontUse').replace('{name}', custom)}
+                </button>
+              ) : null}
+              {installed != null && !options.length ? (
+                <p className="px-2.5 py-2 text-[12px] text-[var(--text-faint)]">{t('inspector.fontNone')}</p>
+              ) : null}
+            </div>
+          </div>
+        </div>,
+        document.body,
+      ) : null}
+    </>
+  );
+}

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

@@ -0,0 +1,69 @@
+/**
+ * The canvas's shapes (the inspector's Stage menu) and a ratio typed by hand (the export's delivery frame). Picking a
+ * shape changes the canvas itself: the film is scaled whole into it, centered, until the agent lays it out again.
+ */
+import * as React from 'react';
+import { Check } from 'lucide-react';
+import { useT } from '@/i18n';
+import { customFilmFrame, type FilmFrameId } from '@/lib/film-frame';
+
+/** The shapes a canvas is offered in: landscape, then portrait. */
+export const CANVAS_RATIOS: { group: 'wide' | 'tall'; id: FilmFrameId; phone?: true }[] = [
+  { group: 'wide', id: '16:9' },
+  { group: 'wide', id: '21:9' },
+  { group: 'wide', id: '4:3' },
+  { group: 'wide', id: '2.35:1' },
+  { group: 'wide', id: '2:1' },
+  { group: 'wide', id: '1.85:1' },
+  { group: 'tall', id: '9:16' },
+  { group: 'tall', id: '3:4' },
+  { group: 'tall', id: '9:19.5', phone: true },
+  { group: 'tall', id: '1:1' },
+  { group: 'tall', id: '1:2' },
+];
+
+/** A ratio's name in the menu: "9:16", or "5.8″ phone" for a phone's screen. */
+export function canvasRatioLabel(t: (key: string) => string, item: { id: FilmFrameId; phone?: true }): string {
+  return item.phone ? t('viewer.ratioPhone') : item.id;
+}
+
+/**
+ * A ratio of the person's own, typed as width and height ("2.39" by "1", "5" by "4"), from 1:4 to 4:1: Enter or the
+ * check puts it in use. Starts from the frame in use.
+ */
+export function CustomFrame({ value, disabled, onPick, className = '', chip = false }: {
+  value: FilmFrameId;
+  disabled?: boolean;
+  onPick: (id: FilmFrameId) => void;
+  className?: string;
+  /** as one of a row of frame chips (the export dialog): the same height, border and corners, its fields capsules
+      inside it with an even gap; else a menu's row */
+  chip?: boolean;
+}) {
+  const t = useT();
+  const [w0, h0] = value === 'native' ? ['16', '9'] : value.split(':');
+  const [w, setW] = React.useState(w0 ?? '16');
+  const [h, setH] = React.useState(h0 ?? '9');
+  const id = customFilmFrame(Number(w), Number(h));
+  const apply = () => { if (id) onPick(id); };
+  const field = chip
+    ? 'h-6 w-9 rounded-full bg-[var(--fill-tsp)] text-center text-[12px] font-medium tabular-nums text-[var(--text)] outline-none ring-[var(--text-faint)] focus:ring-1'
+    : 'h-6 w-12 rounded-[5px] border border-[var(--border)] bg-[var(--bg)] px-1.5 text-center text-[12px] tabular-nums text-[var(--text)] outline-none focus:border-[var(--accent)]';
+  return (
+    <div className={chip
+      ? `flex items-center gap-1 rounded-lg border border-[var(--border)] py-[4px] pl-2.5 pr-[4px] ${className}`
+      : `flex items-center gap-1.5 px-2 py-1 ${className}`}>
+      <span className={chip ? 'mr-1 text-[12px] font-medium text-[var(--text-muted)]' : 'mr-auto text-[11.5px] text-[var(--text-muted)]'}>{t('viewer.frameCustom')}</span>
+      <input aria-label={t('viewer.frameCustomW')} inputMode="decimal" value={w} disabled={disabled}
+        onChange={(e) => setW(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') apply(); }} className={field} />
+      <span className="text-[12px] text-[var(--text-faint)]">:</span>
+      <input aria-label={t('viewer.frameCustomH')} inputMode="decimal" value={h} disabled={disabled}
+        onChange={(e) => setH(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') apply(); }} className={field} />
+      <button type="button" disabled={disabled || !id} onClick={apply} aria-label={t('viewer.frameCustomApply')}
+        title={id ? undefined : t('viewer.frameCustomRange')}
+        className={`flex h-6 w-6 items-center justify-center ${chip ? 'rounded-full' : 'rounded-[5px]'} text-[var(--text-muted)] transition hover:bg-[var(--bg-hover)] hover:text-[var(--text)] disabled:opacity-30`}>
+        <Check size={13} />
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { X } from 'lucide-react';
+import { useT } from '@/i18n';
+import { PANE_BAR, PANE_TITLE, PANE_BTN, PANE_ICON } from './dock-pane-bar';
+import { Tooltip } from './Tooltip';
+
+/** The inspector's pane for anything that is not a film selection (a media file's properties). */
+export function InspectorPanel({ title, width, onClose, children }: {
+  title: string; width: number; onClose: () => void; children: React.ReactNode;
+}) {
+  const t = useT();
+  return (
+    <aside aria-label={title} data-inspector-panel data-film-inspector className="relative flex min-h-0 min-w-0 shrink-0 flex-col overflow-hidden rounded-[7px] bg-[var(--dock-pane)] text-[var(--text)]" style={{ width }} onKeyDown={event => {
+      if ((event.target as Element).closest('input, select, textarea, button')) event.stopPropagation();
+    }}>
+      <div className={PANE_BAR}>
+        <span className={`${PANE_TITLE} flex-1 px-1`}>{title}</span>
+        <Tooltip label={t('inspector.hide')} side="bottom">
+          <button type="button" aria-label={t('inspector.hide')} onClick={onClose} className={PANE_BTN}><X size={PANE_ICON} /></button>
+        </Tooltip>
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-3 pb-5">{children}</div>
+    </aside>
+  );
+}

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

@@ -0,0 +1,38 @@
+/**
+ * The window of an app with tabs (lib/host.ts `tabs`) when no tab is open: an empty window (its top bar still drags
+ * it) and the projects window over it, as `+` opens it, only with nothing behind to close it to. The project picked
+ * opens in its tab. Shown while tabs are open too (a tab's page that could not load), its top bar has them, so they
+ * can always be reached. The top bar stays above the projects window's shade, in the window's color like the system's
+ * window buttons beside it: its logo opens Settings, as a project's does.
+ */
+import { useT } from '@/i18n';
+import { BrandLogo } from './BrandLogo';
+import { ProjectsPopover } from './ProjectsLibrary';
+import { SettingsModal } from './settings/SettingsModal';
+import { useSettings } from './settings/use-settings';
+import { TabStrip, useHostTabs } from './TabStrip';
+import { Tooltip } from './Tooltip';
+
+export function Launcher({ onOpen }: { onOpen: (projectId: string) => void }) {
+  const t = useT();
+  const [settings, setSettings] = useSettings();
+  const { tabs } = useHostTabs();
+  return (
+    <>
+      <div className="workspace-shell bg-[var(--dock-shell)]" />
+      {/* not inside the shell: a fixed box is a layer of its own, which would keep this bar under the shade */}
+      <div data-titlebar className="fixed inset-x-0 top-0 z-[10045] flex h-8 min-w-0 items-center gap-1 bg-[var(--dock-shell)] px-[6px]">
+        <div aria-hidden className="shrink-0 self-stretch" style={{ width: 'var(--titlebar-logo-x)' }} />
+        <Tooltip label={t('project.appMenu')} side="bottom">
+          <button type="button" aria-label={t('project.appMenu')} aria-haspopup="dialog" onClick={() => setSettings('general')}
+            className="flex h-[26px] w-[26px] shrink-0 items-center justify-center rounded-md text-[var(--text-dim)] transition hover:bg-[var(--bg-hover)]">
+            <BrandLogo size={15} />
+          </button>
+        </Tooltip>
+        {tabs.length ? <TabStrip /> : null}
+      </div>
+      <ProjectsPopover open currentProjectId="" onOpen={onOpen} onCurrentRemoved={() => {}} />
+      <SettingsModal open={settings !== null} section={settings ?? undefined} onClose={() => setSettings(null)} />
+    </>
+  );
+}