auricui-skill 0.0.0-stage → 0.1.2

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

@@ -0,0 +1,291 @@
+/**
+ * Settings › Keyboard shortcuts: the editor's actions (lib/keymap) in tabs (Timeline, Player, Basic, Other), two
+ * columns of an action and its keys, and the scheme they come from: OpenFilm, Premiere Pro, Final Cut Pro X, or one of
+ * three custom ones.
+ *
+ * A built-in scheme is read-only: clicking a key there copies the scheme into a free custom slot first, and says so.
+ * In a custom scheme a click records the next keys pressed (Esc cancels); keys another action has are offered to it
+ * only after "Replace". Restore defaults sets the custom scheme back to the scheme it was copied from. Nothing is kept
+ * until Save; Cancel lets the changes go.
+ */
+import React from 'react';
+import { X } from 'lucide-react';
+import { useT } from '@/i18n';
+import { studioHost } from '@/lib/host';
+import {
+  ACTIONS, BUILT_IN_SCHEMES, comboCaps, comboOf, conflictOf, copyOf, CUSTOM_SLOTS, editable, FIXED_KEYS, isBuiltIn, KEY_TABS,
+  keymapFor, restoreDefaults, withKey, withoutKeys, type ActionId, type CustomSlot, type KeyPrefs, type KeyTab, type SchemeId,
+} from '@/lib/keymap';
+import { MAC, saveKeyPrefs, useKeyPrefs } from '@/lib/keymap-store';
+import { SettingsSelect } from './SettingsSelect';
+import { SettingsButton, SettingsPage, SettingsSegmented, settingsError } from './ui';
+
+/** The built-in schemes are named for the app whose keys they give. */
+const SCHEME_NAMES: Record<(typeof BUILT_IN_SCHEMES)[number], string> = { openfilm: 'OpenFilm', premiere: 'Premiere Pro', fcp: 'Final Cut Pro X' };
+
+/** A row: its words and keys; `held`: combinations pressed while another is held (K, then J). */
+type Row = { id: string; label: string; keys: readonly string[]; action?: ActionId; held?: readonly (readonly string[])[] };
+
+/** A combination as key caps: its modifiers, then its key. */
+function Caps({ combo }: { combo: string }) {
+  return (
+    <span className="inline-flex items-center gap-1">
+      {comboCaps(combo, MAC).map((cap, i) => (
+        <kbd key={i} className="inline-flex h-6 min-w-6 items-center justify-center rounded-[5px] border border-[var(--border)] bg-[var(--dock-pane)] px-1.5 font-sans text-[12.5px] leading-none text-[var(--text-dim)]">
+          {cap}
+        </kbd>
+      ))}
+    </span>
+  );
+}
+
+/** An action's keys, one combination after another. */
+function KeyList({ keys, none }: { keys: readonly string[]; none: string }) {
+  if (!keys.length) return <span className="text-[13px] text-[var(--text-faint)]">{none}</span>;
+  return (
+    <span className="flex flex-wrap items-center justify-end gap-x-1.5 gap-y-1">
+      {keys.map((combo, i) => (
+        <React.Fragment key={combo}>
+          {i > 0 ? <span className="text-[12px] text-[var(--text-faint)]">/</span> : null}
+          <Caps combo={combo} />
+        </React.Fragment>
+      ))}
+    </span>
+  );
+}
+
+export function ShortcutsSection() {
+  const t = useT();
+  const saved = useKeyPrefs();
+  const [draft, setDraft] = React.useState<KeyPrefs>(saved);
+  const [tab, setTab] = React.useState<KeyTab>('timeline');
+  const [recording, setRecording] = React.useState<ActionId | null>(null);
+  const [pending, setPending] = React.useState<{ id: ActionId; combo: string; other: ActionId } | null>(null);
+  const [notice, setNotice] = React.useState<string | null>(null);
+  const [error, setError] = React.useState<string | null>(null);
+  const [saving, setSaving] = React.useState(false);
+  const dirty = JSON.stringify(draft) !== JSON.stringify(saved);
+  /* the schemes kept changed elsewhere while nothing here is changed: show them */
+  const dirtyRef = React.useRef(dirty);
+  dirtyRef.current = dirty;
+  React.useEffect(() => { if (!dirtyRef.current) setDraft(saved); }, [saved]);
+
+  const schemeName = React.useCallback((id: SchemeId) => (isBuiltIn(id) ? SCHEME_NAMES[id] : t('settings.shortcuts.customName').replace('{n}', id.slice(-1))), [t]);
+  const actionName = React.useCallback((id: ActionId) => t(`settings.shortcuts.actions.${id}`), [t]);
+  const keymap = React.useMemo(() => keymapFor(draft, draft.scheme, MAC), [draft]);
+  const custom = isBuiltIn(draft.scheme) ? null : draft.scheme as CustomSlot;
+
+  /* a key pressed while recording is the action's new key; Esc stops recording, a click anywhere else too */
+  const recordRef = React.useRef<(combo: string) => void>(() => {});
+  recordRef.current = (combo) => {
+    if (!recording || !custom) return;
+    setRecording(null);
+    const other = conflictOf(keymap, recording, combo, MAC);
+    if (other) setPending({ id: recording, combo, other });
+    else setDraft((d) => withKey(d, custom, recording, combo, MAC));
+  };
+  React.useEffect(() => {
+    if (!recording) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Tab') return;
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      if (e.key === 'Escape' && !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey) { setRecording(null); return; }
+      const combo = comboOf(e, MAC);
+      if (combo) recordRef.current(combo);
+    };
+    const onDown = (e: PointerEvent) => {
+      if (!(e.target as Element | null)?.closest?.(`[data-recording]`)) setRecording(null);
+    };
+    window.addEventListener('keydown', onKey, true);
+    window.addEventListener('pointerdown', onDown, true);
+    return () => { window.removeEventListener('keydown', onKey, true); window.removeEventListener('pointerdown', onDown, true); };
+  }, [recording]);
+
+  const chooseScheme = (id: SchemeId) => {
+    setRecording(null);
+    setPending(null);
+    setError(null);
+    if (!isBuiltIn(id) && !draft.custom[id]) {
+      /* an empty custom slot starts as a copy of the scheme shown */
+      setDraft({ scheme: id, custom: { ...draft.custom, [id]: copyOf(draft, draft.scheme, MAC) } });
+      setNotice(t('settings.shortcuts.started').replace('{to}', schemeName(id)).replace('{from}', schemeName(draft.scheme)));
+      return;
+    }
+    setDraft({ ...draft, scheme: id });
+    setNotice(null);
+  };
+
+  const startRecording = (id: ActionId) => {
+    setPending(null);
+    setError(null);
+    if (custom) { setNotice(null); setRecording(id); return; }
+    const ready = editable(draft, MAC);
+    if (!ready) { setNotice(t('settings.shortcuts.full')); return; }
+    setDraft(ready.prefs);
+    setNotice(t('settings.shortcuts.copied').replace('{from}', schemeName(draft.scheme)).replace('{to}', schemeName(ready.slot)));
+    setRecording(id);
+  };
+
+  const replace = () => {
+    if (!pending || !custom) return;
+    setDraft((d) => withKey(d, custom, pending.id, pending.combo, MAC));
+    setPending(null);
+  };
+
+  const restore = () => {
+    if (!custom) return;
+    setRecording(null);
+    setPending(null);
+    setNotice(null);
+    setDraft((d) => restoreDefaults(d, custom, MAC));
+  };
+
+  const cancel = () => {
+    setDraft(saved);
+    setRecording(null);
+    setPending(null);
+    setNotice(null);
+    setError(null);
+  };
+
+  const save = async () => {
+    setRecording(null);
+    setPending(null);
+    setSaving(true);
+    try {
+      await saveKeyPrefs(draft);
+      setNotice(null);
+      setError(null);
+    } catch (e) {
+      setError(t('settings.shortcuts.saveFailed').replace('{error}', e instanceof Error ? e.message : String(e)));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const actionRows: Row[] = ACTIONS
+    .filter((a) => a.tab === tab && (a.id !== 'refer' || studioHost?.refer))
+    .map((a) => ({ id: a.id, label: actionName(a.id), keys: keymap[a.id], action: a.id }));
+  /* Other: the keys that are always the same, after the actions */
+  const fixedRows: Row[] = tab !== 'other' ? [] : [
+    ...(studioHost?.settings ? [{ id: 'settings', label: t('settings.title'), keys: ['mod+,'] }] : []),
+    ...(() => {
+      /* stop held, then back or forward: a frame that way */
+      const stop = keymap['shuttle-stop'][0];
+      const held = [keymap['shuttle-back'][0], keymap['shuttle-forward'][0]].flatMap((step) => (stop && step ? [[stop, step]] : []));
+      return [{ id: 'shuttle-hold', label: t('settings.shortcuts.shuttleHold'), keys: [], held }];
+    })(),
+    ...FIXED_KEYS.map((row) => ({ id: row.label, label: t(`settings.shortcuts.${row.label}`), keys: row.keys })),
+  ];
+
+  const renderRow = (row: Row) => {
+    const id = row.action;
+    const on = id && recording === id;
+    const caps = row.held
+      ? (
+        <span className="flex flex-wrap items-center justify-end gap-x-1.5 gap-y-1">
+          {row.held.map((combos, i) => (
+            <React.Fragment key={combos.join(' ')}>
+              {i > 0 ? <span className="text-[12px] text-[var(--text-faint)]">/</span> : null}
+              <span className="inline-flex items-center gap-1">
+                {combos.flatMap((combo, j) => [
+                  ...(j > 0 ? [<span key={`p${j}`} className="text-[12px] text-[var(--text-faint)]">+</span>] : []),
+                  <Caps key={j} combo={combo} />,
+                ])}
+              </span>
+            </React.Fragment>
+          ))}
+        </span>
+      )
+      : <KeyList keys={row.keys} none={t('settings.shortcuts.none')} />;
+    const conflict = pending && pending.id === id ? pending : null;
+    return (
+      <div key={row.id} className="py-1">
+        <div className="group flex min-h-[36px] items-center justify-between gap-4">
+          <span className="min-w-0 text-[14px] leading-snug text-[var(--text)]">{row.label}</span>
+          {id ? (
+            <span className="flex shrink-0 items-center gap-1">
+              {custom && row.keys.length && !on ? (
+                <button type="button" aria-label={`${t('settings.shortcuts.clear')}: ${row.label}`} title={t('settings.shortcuts.clear')}
+                  onClick={() => { setPending(null); setDraft((d) => withoutKeys(d, custom, id, MAC)); }}
+                  className="flex h-6 w-6 items-center justify-center rounded-[5px] text-[var(--text-faint)] opacity-0 transition hover:bg-[var(--bg-hover)] hover:text-[var(--text)] focus-visible:opacity-100 group-hover:opacity-100">
+                  <X size={13} />
+                </button>
+              ) : null}
+              <button type="button" data-recording={on ? '' : undefined}
+                aria-label={`${row.label}: ${custom ? t('settings.shortcuts.change') : t('settings.shortcuts.editCopy')}`}
+                title={custom ? t('settings.shortcuts.change') : t('settings.shortcuts.editCopy')}
+                onClick={() => (on ? setRecording(null) : startRecording(id))}
+                className={`flex min-h-8 max-w-[220px] items-center justify-end rounded-[7px] px-2 py-1 transition ${
+                  on ? 'bg-[var(--bg-active)] ring-1 ring-[var(--accent)]' : pending?.id === id ? 'ring-1 ring-[var(--err)]' : 'hover:bg-[var(--bg-hover)]'
+                }`}>
+                {on ? <span className="text-[13px] text-[var(--text-muted)]">{t('settings.shortcuts.recording')}</span> : conflict ? <Caps combo={conflict.combo} /> : caps}
+              </button>
+            </span>
+          ) : <span className="flex max-w-[220px] shrink-0 justify-end px-2">{caps}</span>}
+        </div>
+        {/* the keys pressed are another action's: replace, or keep things as they are */}
+        {conflict ? (
+          <div role="alert" className="mb-1 mt-1.5 flex flex-col gap-2 rounded-[8px] border border-[var(--border)] bg-[var(--dock-pane)] px-3 py-2.5">
+            <span className="text-[13.5px] leading-snug text-[var(--text)]">
+              {t('settings.shortcuts.conflict').replace('{keys}', comboCaps(conflict.combo, MAC).join(MAC ? '' : '+')).replace('{action}', actionName(conflict.other))}
+            </span>
+            <span className="flex justify-end gap-2">
+              <SettingsButton className="h-8" onClick={() => setPending(null)}>{t('settings.shortcuts.cancel')}</SettingsButton>
+              <SettingsButton className="h-8" variant="primary" onClick={replace}>{t('settings.shortcuts.replace')}</SettingsButton>
+            </span>
+          </div>
+        ) : null}
+      </div>
+    );
+  };
+
+  /* two columns, filled top to bottom, the left one first */
+  const columns = (rows: Row[]) => {
+    const half = Math.ceil(rows.length / 2);
+    return [rows.slice(0, half), rows.slice(half)];
+  };
+
+  const schemeOptions = [...BUILT_IN_SCHEMES, ...CUSTOM_SLOTS].map((id) => ({ value: id as SchemeId, label: schemeName(id) }));
+
+  return (
+    <SettingsPage note={t('settings.shortcuts.hint')}>
+      <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
+        <SettingsSegmented<KeyTab>
+          label={t('settings.sections.shortcuts')}
+          value={tab}
+          onChange={(next) => { setTab(next); setRecording(null); }}
+          options={KEY_TABS.map((id) => ({ value: id, label: t(`settings.shortcuts.tabs.${id}`) }))}
+        />
+        <SettingsSelect<SchemeId> label={t('settings.shortcuts.scheme')} value={draft.scheme} options={schemeOptions} onChange={chooseScheme} width={200} />
+      </div>
+      {notice ? <p role="status" className="mb-3 text-[13.5px] leading-relaxed text-[var(--text-muted)]">{notice}</p> : null}
+      <div className="@container">
+        <div className="grid grid-cols-1 gap-x-8 @xl:grid-cols-2">
+          {columns(actionRows).map((rows, i) => (
+            <div key={i} className={`flex flex-col ${i === 1 ? '@xl:border-l @xl:border-[var(--border)] @xl:pl-8' : ''}`}>{rows.map(renderRow)}</div>
+          ))}
+        </div>
+        {fixedRows.length ? (
+          <>
+            <p className="mt-3 border-t border-[var(--border)] pt-3 text-[13px] text-[var(--text-faint)]">{t('settings.shortcuts.fixed')}</p>
+            <div className="grid grid-cols-1 gap-x-8 @xl:grid-cols-2">
+              {columns(fixedRows).map((rows, i) => (
+                <div key={i} className={`flex flex-col ${i === 1 ? '@xl:border-l @xl:border-[var(--border)] @xl:pl-8' : ''}`}>{rows.map(renderRow)}</div>
+              ))}
+            </div>
+          </>
+        ) : null}
+      </div>
+      {error ? <p className={`mt-3 ${settingsError}`}>{error}</p> : null}
+      <div className="mt-5 flex items-center justify-between gap-3">
+        <SettingsButton onClick={restore} disabled={!custom}>{t('settings.shortcuts.restore')}</SettingsButton>
+        <span className="flex gap-2">
+          <SettingsButton onClick={cancel} disabled={!dirty || saving}>{t('settings.shortcuts.cancel')}</SettingsButton>
+          <SettingsButton variant="primary" onClick={() => { void save(); }} disabled={!dirty || saving}>{t('settings.shortcuts.save')}</SettingsButton>
+        </span>
+      </div>
+    </SettingsPage>
+  );
+}

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

@@ -0,0 +1,119 @@
+/**
+ * Settings → General → Storage: the projects library, the folder every project is a folder of (studio/server's
+ * locations, src/locations.mjs). It shows its folder and the free space on its disk, and can be changed (the system's
+ * folder dialog), opened in the file manager, or set back to its default. When projects are in it, a change asks
+ * whether they move too; left behind, they stay where they are, and in the list. Exports have no setting: the export
+ * dialog picks the folder and keeps the last one.
+ */
+import React from 'react';
+import { useT } from '@/i18n';
+import { api, type StudioLocation, type StudioLocations } from '@/api';
+import { studioHost } from '@/lib/host';
+import { ConfirmDialog } from '../ConfirmDialog';
+import { SettingsButton, SettingsField, SettingsGroup, SettingsItem, settingsError } from './ui';
+
+type Which = keyof StudioLocations;
+
+/** Bytes as the person reads a disk's free space: GB, or MB below one. */
+function size(bytes: number): string {
+  return bytes >= 1e9 ? `${(bytes / 1e9).toFixed(bytes >= 1e11 ? 0 : 1)} GB` : `${Math.max(1, Math.round(bytes / 1e6))} MB`;
+}
+
+export function StorageGroup() {
+  const t = useT();
+  const [where, setWhere] = React.useState<StudioLocations | null>(null);
+  const [busy, setBusy] = React.useState<Which | null>(null);
+  const [error, setError] = React.useState<{ which: Which; text: string } | null>(null);
+  /* where no folder dialog can open (a browser on another system), the path is typed */
+  const [typing, setTyping] = React.useState<{ which: Which; text: string } | null>(null);
+  /* a new folder for a library with projects in it: whether they move too */
+  const [asking, setAsking] = React.useState<{ which: Which; folder: string | null } | null>(null);
+  const [note, setNote] = React.useState<{ which: Which; text: string } | null>(null);
+  const load = React.useCallback(() => { void api.locations().then(setWhere).catch(() => {}); }, []);
+  React.useEffect(load, [load]);
+  if (!where) return null;
+
+  const apply = async (which: Which, folder: string | null, move: boolean) => {
+    setBusy(which);
+    setError(null);
+    setNote(null);
+    try {
+      const done = await api.moveLibrary(folder, move);
+      setTyping(null);
+      setWhere(done.locations);
+      if (done.failed.length) setError({ which, text: t('settings.storage.moveFailed').replace('{names}', done.failed.map((f) => f.name).join(', ')) });
+      if (done.moved) setNote({ which, text: t('settings.storage.moved').replace('{count}', String(done.moved)) });
+    } catch (e) {
+      setError({ which, text: e instanceof Error ? e.message : String(e) });
+    } finally {
+      setBusy(null);
+    }
+  };
+  const keep = (which: Which, folder: string | null) => {
+    const now = where[which];
+    if (now.count > 0 && (folder ?? now.default) !== now.path) setAsking({ which, folder });
+    else void apply(which, folder, false);
+  };
+  const change = async (which: Which) => {
+    const ask = { title: t(`settings.storage.${which}Pick`), button: t('settings.storage.pickButton'), at: where[which].path };
+    try {
+      const pick = studioHost?.folders?.pick;
+      const picked = pick ? await pick(ask) : await api.pickFolder(ask.title, ask.at);
+      if (picked) keep(which, picked);
+    } catch {
+      setTyping({ which, text: where[which].path });
+    }
+  };
+
+  const row = (which: Which, place: StudioLocation) => (
+    <SettingsItem
+      key={which}
+      title={t(`settings.storage.${which}`)}
+      description={(
+        <>
+          {typing?.which === which ? (
+            <form className="mt-2 flex items-center gap-2" onSubmit={(e) => { e.preventDefault(); if (typing.text.trim()) keep(which, typing.text.trim()); }}>
+              <SettingsField autoFocus value={typing.text} onChange={(e) => setTyping({ which, text: e.target.value })} spellCheck={false}
+                aria-label={t(`settings.storage.${which}`)} className="font-mono text-[13px]"
+                onKeyDown={(e) => { if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); setTyping(null); } }} />
+              <SettingsButton type="submit" variant="primary" disabled={busy === which || !typing.text.trim()}>{t('settings.storage.save')}</SettingsButton>
+            </form>
+          ) : (
+            <span className="mt-1 block break-all font-mono text-[13px]" title={place.path}>{place.path}</span>
+          )}
+          {place.free != null ? <span className="mt-0.5 block text-[13px]">{t('settings.storage.free').replace('{size}', size(place.free))}</span> : null}
+          {note?.which === which ? <span className="mt-1 block text-[13px]" role="status">{note.text}</span> : null}
+          {error?.which === which ? <span className={`mt-1 block ${settingsError}`} role="alert">{error.text}</span> : null}
+        </>
+      )}
+      control={(
+        <>
+          {place.chosen ? (
+            <SettingsButton variant="quiet" disabled={busy === which} onClick={() => keep(which, null)} title={place.default}>{t('settings.storage.reset')}</SettingsButton>
+          ) : null}
+          <SettingsButton onClick={() => void api.openLocation(which).catch(() => {})}>{t('settings.storage.show')}</SettingsButton>
+          <SettingsButton disabled={busy === which} onClick={() => void change(which)}>{t('settings.storage.change')}</SettingsButton>
+        </>
+      )}
+    />
+  );
+
+  return (
+    <SettingsGroup title={t('settings.storage.group')}>
+      {row('projects', where.projects)}
+      <ConfirmDialog
+        open={!!asking}
+        title={t('settings.storage.moveTitle')}
+        description={asking ? t('settings.storage.moveDesc')
+          .replace('{count}', String(where[asking.which].count))
+          .replace('{from}', where[asking.which].path)
+          .replace('{to}', asking.folder ?? where[asking.which].default) : undefined}
+        confirmLabel={t('settings.storage.moveYes')}
+        altLabel={t('settings.storage.moveNo')}
+        onConfirm={() => { const a = asking; setAsking(null); if (a) void apply(a.which, a.folder, true); }}
+        onAlt={() => { const a = asking; setAsking(null); if (a) void apply(a.which, a.folder, false); }}
+        onCancel={() => setAsking(null)}
+      />
+    </SettingsGroup>
+  );
+}

package/skill/assets/upstream/packages/openfilm/studio/ui/src/components/settings/theme.ts

@@ -0,0 +1,47 @@
+/**
+ * The theme: light, dark or the system's, dark until the person chooses. The choice is kept in localStorage `openfilm.theme` and shown as
+ * `<html data-theme>`; index.html applies it before the first paint, this keeps it current afterwards, in every page
+ * of Studio that is open.
+ */
+import React from 'react';
+
+export type ThemeMode = 'light' | 'dark' | 'system';
+
+const KEY = 'openfilm.theme';
+const dark = () => window.matchMedia('(prefers-color-scheme: dark)');
+
+function saved(): ThemeMode {
+  try {
+    const value = localStorage.getItem(KEY);
+    return value === 'light' || value === 'system' ? value : 'dark';
+  } catch { return 'dark'; }
+}
+
+function apply(mode: ThemeMode) {
+  document.documentElement.dataset.theme = mode === 'system' ? (dark().matches ? 'dark' : 'light') : mode;
+}
+
+const listeners = new Set<() => void>();
+
+/* "System" follows the system while Studio is open, not only when it starts */
+if (typeof window !== 'undefined') dark().addEventListener('change', () => { if (saved() === 'system') apply('system'); });
+/* a theme chosen in another of Studio's pages (another tab of the app, another window) is this one's too */
+if (typeof window !== 'undefined') {
+  window.addEventListener('storage', (event) => {
+    if (event.key !== KEY) return;
+    apply(saved());
+    for (const listener of listeners) listener();
+  });
+}
+
+export function setThemeMode(mode: ThemeMode) {
+  try { localStorage.setItem(KEY, mode); } catch { /* not kept past this page */ }
+  apply(mode);
+  for (const listener of listeners) listener();
+}
+
+/** The chosen theme and a way to change it; every user of it sees the change. */
+export function useThemeMode(): [ThemeMode, (mode: ThemeMode) => void] {
+  const mode = React.useSyncExternalStore((on) => { listeners.add(on); return () => listeners.delete(on); }, saved, () => 'dark' as ThemeMode);
+  return [mode, setThemeMode];
+}

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

@@ -0,0 +1,139 @@
+/**
+ * The parts every section of Settings is made of. A page reads like a document: titled groups with room between them,
+ * and in each a list of rows parted by hairlines, each its title and what it does on the left, its control on the
+ * right. Controls are quiet until pointed at: a choice of two or three is a segmented control, on/off a switch, a
+ * longer list a select.
+ */
+import React from 'react';
+
+/** A section's body: an optional note, then its groups. */
+export function SettingsPage({ note, children }: { note?: React.ReactNode; children: React.ReactNode }) {
+  return (
+    <div className="flex max-w-[880px] flex-col">
+      {note ? <p className="mb-8 text-[14.5px] leading-relaxed text-[var(--text-muted)]">{note}</p> : null}
+      {children}
+    </div>
+  );
+}
+
+/** A titled group of rows; `footnote` goes under it. */
+export function SettingsGroup({ title, footnote, children }: { title?: React.ReactNode; footnote?: React.ReactNode; children: React.ReactNode }) {
+  return (
+    <section className="mb-10 last:mb-0">
+      {title ? <h3 className="mb-1 text-[17px] font-semibold tracking-[-0.01em] text-[var(--text)]">{title}</h3> : null}
+      <div className="flex flex-col divide-y divide-[var(--border)]">{children}</div>
+      {footnote ? <p className="pt-2 text-[13.5px] leading-relaxed text-[var(--text-faint)]">{footnote}</p> : null}
+    </section>
+  );
+}
+
+/** One row: a mark, a title (with a badge beside it), what it does, its control; `children` open under it. */
+export function SettingsItem({ mark, title, badge, description, control, children }: {
+  mark?: React.ReactNode;
+  title: React.ReactNode;
+  badge?: React.ReactNode;
+  description?: React.ReactNode;
+  control?: React.ReactNode;
+  children?: React.ReactNode;
+}) {
+  return (
+    <div className="py-4">
+      <div className="flex min-h-10 items-center gap-4">
+        {mark ? <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-[8px] bg-[var(--fill-tsp)] text-[var(--text)]">{mark}</span> : null}
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
+            <span className="text-[15px] text-[var(--text)]">{title}</span>
+            {badge}
+          </div>
+          {description ? <div className="mt-1 text-[14px] leading-[1.55] text-[var(--text-muted)]">{description}</div> : null}
+        </div>
+        {control ? <div className="flex shrink-0 items-center gap-2">{control}</div> : null}
+      </div>
+      {children ? <div className="pt-3">{children}</div> : null}
+    </div>
+  );
+}
+
+/** "Connected", with a green dot and whatever tells which connection it is. */
+export function SettingsStatus({ tone = 'ok', children }: { tone?: 'ok' | 'muted'; children: React.ReactNode }) {
+  return (
+    <span className="inline-flex items-center gap-1.5 text-[13.5px] text-[var(--text-muted)]">
+      <span className={`h-1.5 w-1.5 rounded-full ${tone === 'ok' ? 'bg-[var(--ok)]' : 'bg-[var(--text-faint)]'}`} aria-hidden />
+      {children}
+    </span>
+  );
+}
+
+const BUTTON = {
+  default: 'border border-[var(--border)] text-[var(--text)] hover:bg-[var(--bg-hover)]',
+  primary: 'border border-transparent bg-[var(--text)] text-[var(--bg)] hover:opacity-90',
+  quiet: 'border border-transparent text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text)]',
+};
+
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & { variant?: keyof typeof BUTTON };
+
+export function SettingsButton({ variant = 'default', className = '', ...props }: ButtonProps) {
+  return (
+    <button type="button" {...props}
+      className={`inline-flex h-9 shrink-0 items-center justify-center gap-1.5 rounded-[8px] px-3.5 text-[14px] font-medium transition disabled:pointer-events-none disabled:opacity-50 ${BUTTON[variant]} ${className}`} />
+  );
+}
+
+/** A link that looks like a button (an install page, a key page). */
+export function SettingsLinkButton({ className = '', ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
+  return (
+    <a target="_blank" rel="noreferrer" {...props}
+      className={`inline-flex h-9 shrink-0 items-center justify-center gap-1.5 rounded-[8px] px-3.5 text-[14px] font-medium transition ${BUTTON.default} ${className}`} />
+  );
+}
+
+/** On or off. */
+export function SettingsSwitch({ checked, onChange, label, disabled }: { checked: boolean; onChange: (v: boolean) => void; label: string; disabled?: boolean }) {
+  return (
+    <button type="button" role="switch" aria-checked={checked} aria-label={label} title={label} disabled={disabled} onClick={() => onChange(!checked)}
+      className={`relative h-6 w-10 shrink-0 rounded-full transition-colors disabled:opacity-50 ${checked ? 'bg-[var(--text)]' : 'bg-[var(--surface-3)]'}`}>
+      <span className={`absolute top-[3px] h-[18px] w-[18px] rounded-full bg-[var(--bg)] shadow-[0_1px_2px_rgba(0,0,0,0.2)] transition-all ${checked ? 'left-[19px]' : 'left-[3px]'}`} />
+    </button>
+  );
+}
+
+/** One of two or three, all in view: the chosen one raised out of a quiet track. */
+export function SettingsSegmented<T extends string>({ label, value, options, onChange }: {
+  label: string;
+  value: T;
+  options: Array<{ value: T; label: string; icon?: React.ReactNode }>;
+  onChange: (value: T) => void;
+}) {
+  return (
+    <div role="radiogroup" aria-label={label} className="inline-flex shrink-0 gap-0.5 rounded-[10px] bg-[var(--fill-tsp)] p-[3px]">
+      {options.map((option) => {
+        const on = option.value === value;
+        return (
+          <button key={option.value} type="button" role="radio" aria-checked={on} onClick={() => { if (!on) onChange(option.value); }}
+            className={`inline-flex h-[30px] items-center gap-1.5 whitespace-nowrap rounded-[7px] px-3 text-[14px] transition ${
+              on ? 'bg-[var(--dock-pane)] text-[var(--text)] shadow-[0_1px_2px_rgba(0,0,0,0.08)] ring-1 ring-[var(--border)]' : 'text-[var(--text-muted)] hover:text-[var(--text)]'
+            }`}>
+            {option.icon ? <span className="flex shrink-0">{option.icon}</span> : null}
+            {option.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+/** A text field. */
+export const SettingsField = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(function SettingsField({ className = '', ...props }, ref) {
+  return (
+    <input ref={ref} {...props}
+      className={`h-10 w-full min-w-0 rounded-[8px] border border-[var(--border)] bg-transparent px-3 text-[14px] text-[var(--text)] outline-none transition placeholder:text-[var(--text-faint)] hover:border-[var(--border-strong)] focus:border-[var(--text-muted)] ${className}`} />
+  );
+});
+
+/** A form that opened under a row. */
+export function SettingsInset({ children }: { children: React.ReactNode }) {
+  return <div className="flex flex-col gap-2.5 rounded-[10px] border border-[var(--border)] p-4">{children}</div>;
+}
+
+export const settingsLink = 'inline-flex items-center gap-1 text-[var(--text-muted)] underline-offset-2 hover:text-[var(--text)] hover:underline';
+export const settingsError = 'text-[13.5px] leading-relaxed text-[var(--err)]';

package/skill/assets/upstream/packages/openfilm/studio/ui/src/components/settings/use-settings.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { studioHost } from '../../lib/host';
+import type { SettingsSection } from './SettingsModal';
+
+/** Both editor and launcher follow the native Settings command; each page has its own dialog. */
+export function useSettings() {
+  const [section, setSection] = React.useState<SettingsSection | null>(null);
+  React.useEffect(() => studioHost?.settings?.onOpen(() => setSection('general')), []);
+  return [section, setSection] as const;
+}