@crievo/omni 0.0.0-stage → 0.1.0

package/studio/web/components/VoiceProfilePicker.tsx

@@ -0,0 +1,107 @@
+/* The voice picker of the new video and of the Voice stage: the active voice comes checked.
+   Making another one active writes it to the config (applies to the next videos). */
+
+import { useEffect, useRef } from "react";
+import { Link } from "@tanstack/react-router";
+import { useAvatarAudioReactive } from "../hooks/useAvatarAudioReactive";
+import { useSaveAction } from "../hooks/useSaveAction";
+import { api } from "../lib/api";
+import { useVoiceProfilePreview } from "../hooks/useVoiceProfilePreview";
+import type { VoiceProfile } from "../types/api";
+import { Check, MicrophoneSlash, Plus } from "./icons";
+import { ResultMessage } from "./ResultMessage";
+import { VoiceProfileCard } from "./VoiceProfileCard";
+
+export function VoiceProfilePicker({
+  profiles,
+  defaultId,
+  value,
+  onChange,
+  onDefaultChange,
+  silent,
+  onSilentChange,
+}: {
+  profiles: VoiceProfile[];
+  defaultId: string | null;
+  value: string;
+  onChange: (id: string) => void;
+  onDefaultChange: () => void;
+  /* the new video's "Sem narração e voz" card, to the left of the voices: with `onSilentChange` it shows, and
+     `silent` says it is the chosen one (no voice then) */
+  silent?: boolean;
+  onSilentChange?: (silent: boolean) => void;
+}) {
+  const { result, saving, save } = useSaveAction(onDefaultChange);
+  const current = profiles.find(p => p.id === value);
+  const { listening, listeningId, error: sampleError, listen, stop, analyser, clearError } = useVoiceProfilePreview();
+  const strip = useRef<HTMLDivElement>(null);
+  /* the playing voice's avatar moves faster */
+  useAvatarAudioReactive(listening === "playing", strip, analyser, r =>
+    listeningId
+      ? Array.from(r.querySelectorAll<HTMLElement>(".voice-profile-card"))
+          .filter(c => c.getAttribute("data-voice") === listeningId)
+          .flatMap(c => Array.from(c.querySelectorAll<HTMLCanvasElement>(".voice-avatar")))
+      : [],
+  );
+  /* switched voice: the previous one's sample does not keep playing */
+  useEffect(() => {
+    stop();
+    clearError();
+  }, [value]);
+  return (
+    <div className="field">
+      <span>Voz</span>
+      <div ref={strip} className="profiles-strip" role="radiogroup" aria-label="Voz">
+        {onSilentChange && (
+          <button
+            type="button"
+            className={`voice-profile silent${silent ? " chosen" : ""}`}
+            onClick={() => onSilentChange(!silent)}
+            aria-pressed={!!silent}
+            title="Pula o roteiro falado, a narração e a voz: vai direto para o roteiro de motion, a composição e o editor"
+          >
+            <span className="avatar-silent">
+              <MicrophoneSlash />
+            </span>
+            <b>Sem narração e voz</b>
+            <small>Só motion</small>
+          </button>
+        )}
+        {profiles.map(p => (
+          <VoiceProfileCard
+            key={p.id}
+            profile={p}
+            chosen={!silent && p.id === value}
+            onChoose={() => {
+              onSilentChange?.(false);
+              onChange(p.id);
+            }}
+            listening={listeningId === p.id ? listening : null}
+            onListen={() => listen(p.id)}
+          />
+        ))}
+        <Link to="/settings/$category" params={{ category: "voice" }} className="voice-profile more">
+          <span className="avatar-more">
+            <Plus />
+          </span>
+          <b>Nova voz</b>
+          <small>Em Configurações</small>
+        </Link>
+      </div>
+      {!silent && current && current.id !== defaultId && (
+        <div className="profile-actions">
+          <button
+            type="button"
+            className="button small"
+            disabled={saving}
+            onClick={() => save(() => api.settings["voice-profile"].default.$post({ json: { id: current.id } }))}
+          >
+            <Check className="ic" /> {saving ? "Gravando…" : `Usar “${current.name}” como voz ativa`}
+          </button>
+        </div>
+      )}
+      {sampleError && <p className="response error">{sampleError}</p>}
+      <ResultMessage result={result} />
+    </div>
+  );
+}

package/studio/web/components/VoiceProfilesSettings.tsx

@@ -0,0 +1,150 @@
+/* Configurações → Voz. The page is just the voice carousel: from it a voice becomes the active one
+   or opens to edit, and the last item adds a voice.
+
+   Adding opens the clone modal (CloneVoiceDialog), which also leads to "já tenho voz criada nos
+   provedores"; editing opens the same frame, in the view of the existing voice. Both paths are
+   EditVoiceDialog: avatar and name on the right, providers on the left (details in
+   EditVoiceDialog/index.tsx).
+
+   "Refazer voz" (only on an existing voice, with a clone on some provider) swaps this frame for
+   the clone one, in the redo view: the stored recording comes attached and more can be recorded,
+   or everything deleted and recorded again. The voice stays the same (name, avatar, order); the
+   clone is created again on each provider. */
+
+import { useEffect, useState, type ReactNode } from "react";
+import { api, send } from "../lib/api";
+import type { Settings } from "../types/api";
+import { CloneVoiceDialog } from "./CloneVoiceDialog";
+import { EditVoiceDialog } from "./EditVoiceDialog";
+import { VoiceCarousel } from "./VoiceCarousel";
+
+/* `aside` is the card next to the carousel (70 % the carousel, the rest the card) */
+export function VoiceProfilesSettings({
+  settings,
+  reload,
+  aside,
+}: {
+  settings: Settings;
+  reload: () => void;
+  aside?: ReactNode;
+}) {
+  const profiles = settings.voice.profiles;
+  /* "Adicionar voz" opens the clone modal; from there, "já tenho voz criada nos provedores"
+     switches to the Voice IDs form. Editing a voice opens only the form. */
+  const [cloning, setCloning] = useState(false);
+  const [editing, setEditing] = useState<{ id: string | null; warnings?: string[] } | null>(null);
+  /* the id of the voice being redone: opens the clone modal with its recording attached */
+  const [redoing, setRedoing] = useState<string | null>(null);
+  const [focus, setFocus] = useState<string | null>(null);
+  /* what the removal did on each provider; stays under the carousel until the next action */
+  const [message, setMessage] = useState<string | null>(null);
+  /* the clone creates the voice by itself: when the new profile shows up, it comes to the center.
+     If some provider failed, the voice opens in edit with the warning, to create again only there */
+  const [cloned, setCloned] = useState<{ before: string[]; warnings: string[] } | null>(null);
+  useEffect(() => {
+    if (!cloned) return;
+    const added = profiles.find(p => !cloned.before.includes(p.id));
+    if (!added) return;
+    setFocus(added.id);
+    setCloned(null);
+    setCloning(false);
+    setEditing(cloned.warnings.length ? { id: added.id, warnings: cloned.warnings } : null);
+  }, [profiles, cloned]);
+
+  const activate = async (id: string) => {
+    const r = await send(api.settings["voice-profile"].default.$post({ json: { id } }));
+    if (r.ok) reload();
+    return r;
+  };
+
+  return (
+    <>
+      <div className="voice-grid">
+        <section className="panel">
+          <VoiceCarousel
+            profiles={profiles}
+            defaultId={settings.voice.default_profile}
+            focus={focus}
+            onActivate={activate}
+            onEdit={id => {
+              setMessage(null);
+              setEditing({ id });
+            }}
+            onAdd={() => {
+              setMessage(null);
+              setCloning(true);
+            }}
+          />
+          {message && <p className="response ok center">{message}</p>}
+        </section>
+        {aside}
+      </div>
+      {cloning && (
+        <CloneVoiceDialog
+          settings={settings}
+          reload={reload}
+          onClose={() => setCloning(false)}
+          onAlreadyHave={() => {
+            setCloning(false);
+            setEditing({ id: null });
+          }}
+          onCreate={warnings => {
+            setCloned({ before: profiles.map(p => p.id), warnings });
+            reload();
+          }}
+        />
+      )}
+      {redoing &&
+        (() => {
+          const profile = profiles.find(p => p.id === redoing);
+          return (
+            profile && (
+              <CloneVoiceDialog
+                key={profile.id}
+                settings={settings}
+                reload={reload}
+                redo={profile}
+                onClose={() => setRedoing(null)}
+                onRedone={output => {
+                  setRedoing(null);
+                  setFocus(profile.id);
+                  setMessage(output);
+                  reload();
+                }}
+              />
+            )
+          );
+        })()}
+      {editing &&
+        (() => {
+          const profile = profiles.find(p => p.id === editing.id);
+          return (
+            <EditVoiceDialog
+              key={profile?.id ?? "new"}
+              settings={settings}
+              profile={profile}
+              reload={reload}
+              warnings={editing.warnings}
+              onClose={() => setEditing(null)}
+              onSave={id => {
+                setFocus(id);
+                setEditing(null);
+              }}
+              onCloneInstead={() => {
+                setEditing(null);
+                setCloning(true);
+              }}
+              onRedo={() => {
+                setEditing(null);
+                setRedoing(editing.id);
+              }}
+              onRemove={output => {
+                setEditing(null);
+                setMessage(output);
+              }}
+            />
+          );
+        })()}
+    </>
+  );
+}

package/studio/web/components/VoiceProviderCard.tsx

@@ -0,0 +1,118 @@
+/* The provider card: priority arrows on the left (only with more than one checked), the logo, the
+   name and the status; on the right the play (the voice's sample on that provider, when `listen`
+   comes) and "Configurar". Without a key, or without the voice created on the provider, there is
+   no checkbox; VoiceStudio with the app closed is dimmed. */
+
+import type { ReactNode } from "react";
+import { PROVIDER_NAME, type VoiceProviderId } from "../lib/providers";
+import { ArrowDown, ArrowUp, Gear, Pause, Play } from "./icons";
+import { ProviderCard } from "./ProviderCard";
+
+export function VoiceProviderCard({
+  id,
+  checked,
+  has,
+  closed = false,
+  noClone = false,
+  noVoice = false,
+  position,
+  total,
+  disabled,
+  onToggle,
+  onMove,
+  onConfigure,
+  listen,
+}: {
+  id: VoiceProviderId;
+  checked: boolean;
+  has: boolean;
+  closed?: boolean;
+  /* on edit: the voice doesn't exist on this provider yet (no Voice ID). It can't be checked;
+     "Configurar" is where it gets cloned or the Voice ID pasted, and then it comes checked */
+  noVoice?: boolean;
+  /* on clone creation: the key is fine, but the provider plan doesn't allow cloning through the API */
+  noClone?: boolean;
+  /* the position among the checked ones (-1 if not checked) and how many are checked */
+  position: number;
+  total: number;
+  disabled?: boolean;
+  onToggle: () => void;
+  onMove: (d: -1 | 1) => void;
+  onConfigure: () => void;
+  listen?: { playing: boolean; busy: boolean; onListen: () => void };
+}) {
+  const name = PROVIDER_NAME[id];
+  const subtitle = closed
+    ? "Abra o app na máquina"
+    : id === "voicestudio"
+      ? "Local, precisa do app aberto"
+      : has && noClone
+        ? "Conectado, mas o plano não deixa clonar"
+        : has && noVoice
+          ? "Conectado, sem esta voz criada"
+          : has
+            ? "Provider conectado"
+            : "Provider não conectado";
+  let start: ReactNode = null;
+  if (total > 1) {
+    start = (
+      <span className="provider-card-order">
+        {checked && (
+          <>
+            <button
+              type="button"
+              className="button small"
+              disabled={disabled || position === 0}
+              onClick={() => onMove(-1)}
+              aria-label={`Subir ${name}`}
+            >
+              <ArrowUp weight="bold" />
+            </button>
+            <button
+              type="button"
+              className="button small"
+              disabled={disabled || position === total - 1}
+              onClick={() => onMove(1)}
+              aria-label={`Descer ${name}`}
+            >
+              <ArrowDown weight="bold" />
+            </button>
+          </>
+        )}
+      </span>
+    );
+  }
+  return (
+    <ProviderCard
+      id={id}
+      name={name}
+      checked={checked}
+      has={has}
+      disabled={disabled}
+      subtitle={subtitle}
+      alert={has && noClone && !closed}
+      inactive={closed}
+      selectable={(has && !closed && !noVoice) || checked}
+      onToggle={onToggle}
+      start={start}
+      end={
+        <>
+          {listen && (
+            <button
+              type="button"
+              className="button small"
+              disabled={disabled || closed || listen.busy}
+              onClick={listen.onListen}
+              aria-label={`Ouvir a voz em ${name}`}
+            >
+              {listen.playing ? <Pause weight="fill" /> : <Play weight="fill" />}
+            </button>
+          )}
+          <button type="button" className="button small" disabled={disabled || closed} onClick={onConfigure}>
+            <Gear className="ic" /> Configurar
+          </button>
+        </>
+      }
+    />
+  );
+}

package/studio/web/components/VoiceProvidersCard.tsx

@@ -0,0 +1,26 @@
+/* The whole card leads to Provedores de voz; "Configurar" is only the button look inside it */
+
+import { Link } from "@tanstack/react-router";
+import { Gear } from "./icons";
+import { ProviderLogo } from "./ProviderLogo";
+
+export function VoiceProvidersCard() {
+  return (
+    <Link to="/settings/$category" params={{ category: "providers" }} className="providers-card">
+      <span className="avatar-group" aria-hidden="true">
+        {["elevenlabs", "cartesia", "fish"].map(id => (
+          <ProviderLogo key={id} id={id} size={48} />
+        ))}
+      </span>
+      <b>Provedores de voz</b>
+      <p>
+        Provedores são os serviços que transformam o texto de cada fala em áudio com a voz clonada do canal: ElevenLabs,
+        Fish Audio e Cartesia, na nuvem, e o VoiceStudio, que roda nesta máquina. Cada um tem a sua chave e o seu
+        modelo, e o studio tenta na ordem de prioridade, passando ao próximo se um falhar.
+      </p>
+      <span className="button large">
+        <Gear className="ic" /> Configurar
+      </span>
+    </Link>
+  );
+}

package/studio/web/components/WaitList.tsx

@@ -0,0 +1,21 @@
+import { useNow } from "../hooks/useNow";
+import { formatElapsed, ticketOrigin, toMs } from "../lib/format";
+import type { Ticket } from "../types/api";
+import { TaskName } from "./TaskName";
+
+/* the position is in the whole machine queue, even when the list shows one video only */
+export function WaitList({ queue, all }: { queue: Ticket[]; all: Ticket[] }) {
+  const now = useNow();
+  return (
+    <ol className="wait-list">
+      {queue.map(t => (
+        <li key={t.id}>
+          <span className="wait-list-pos">{all.findIndex(x => x.id === t.id) + 1}º</span>
+          <TaskName ticket={t} />
+          <span className="subtle">{ticketOrigin(t)}</span>
+          <span className="time">Esperando há {formatElapsed(now - (toMs(t.arrived_at) ?? now))}</span>
+        </li>
+      ))}
+    </ol>
+  );
+}

package/studio/web/components/icons.tsx

@@ -0,0 +1,247 @@
+/* Studio icons: Hugeicons (@hugeicons/react + @hugeicons/core-free-icons, rounded stroke).
+   Every icon comes out of here with the same props (`weight`, `size`, `className`), so pages
+   don't know the library. Hugeicons measure 1em here, so the size comes from the font-size
+   where the icon sits; `.ic` aligns it inside a line. `weight="bold"` thickens the stroke and
+   `weight="fill"` fills the shape (play, pause, stop, circle). */
+
+import type { ReactNode, SVGProps } from "react";
+import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/react";
+import {
+  Add01Icon,
+  ArrowTurnBackwardIcon,
+  Mail01Icon,
+  SecurityCheckIcon,
+  SubtitleIcon,
+  CallEnd01Icon,
+  MicOff01Icon,
+  ThumbsDownIcon,
+  ThumbsUpIcon,
+  MessageMultiple01Icon,
+  ArrowDown01Icon,
+  Copy01Icon,
+  Download01Icon,
+  Exchange01Icon,
+  FloppyDiskIcon,
+  FolderOpenIcon,
+  ImageDone01Icon,
+  Link01Icon,
+  Plug01Icon,
+  PowerIcon,
+  SentIcon,
+  ShuffleIcon,
+  SidebarRightIcon,
+  Undo02Icon,
+  ArrowDownLeft01Icon,
+  ArrowDownRight01Icon,
+  ArrowLeft01Icon,
+  ArrowRight01Icon,
+  ArrowUp01Icon,
+  ArrowUpLeft01Icon,
+  ArrowUpRight01Icon,
+  ArrowExpand01Icon,
+  BlockedIcon,
+  Calendar01Icon,
+  Cancel01Icon,
+  MinusSignIcon,
+  Chart01Icon,
+  Chat01Icon,
+  DashboardSquare01Icon,
+  ViewIcon,
+  Radar01Icon,
+  FavouriteIcon,
+  Forward01Icon,
+  Bookmark01Icon,
+  Share08Icon,
+  UserMultipleIcon,
+  Table01Icon,
+  Idea01Icon,
+  TaskDone01Icon,
+  Target01Icon,
+  MicroscopeIcon,
+  FilmRoll01Icon,
+  Flag01Icon,
+  NoteIcon,
+  Activity01Icon,
+  CircleIcon,
+  Clock01Icon,
+  HistoryIcon,
+  Delete02Icon,
+  Key01Icon,
+  Layers01Icon,
+  LeftToRightListBulletIcon,
+  Mic01Icon,
+  PauseIcon,
+  PencilEdit01Icon,
+  PlayCircleIcon,
+  PlayIcon,
+  RefreshIcon,
+  Settings01Icon,
+  SlidersHorizontalIcon,
+  SparklesIcon,
+  StopIcon,
+  Tick02Icon,
+  Upload01Icon,
+  Video01Icon,
+  InformationCircleIcon,
+  ChartIncreaseIcon,
+  ChartDecreaseIcon,
+  ColumnInsertIcon,
+  ScissorIcon,
+  Cursor01Icon,
+  BoundingBoxIcon,
+  VolumeHighIcon,
+  VolumeOffIcon,
+  SidebarLeftIcon,
+  Knife01Icon,
+  CarouselHorizontalIcon,
+  ArrowLeft02Icon,
+  ArrowRight02Icon,
+} from "@hugeicons/core-free-icons";
+
+type Props = Omit<SVGProps<SVGSVGElement>, "ref" | "strokeWidth" | "size"> & {
+  weight?: "regular" | "bold" | "fill" | "duotone";
+  size?: string | number;
+};
+
+function icon(svg: IconSvgElement, name: string) {
+  const Icon = ({ weight = "regular", size = "1em", ...rest }: Props) => (
+    <HugeiconsIcon
+      icon={svg}
+      size={size}
+      strokeWidth={weight === "bold" ? 2.2 : 1.6}
+      {...(weight === "fill" ? { fill: "currentColor" } : {})}
+      {...rest}
+    />
+  );
+  Icon.displayName = name;
+  return Icon;
+}
+
+/* Claude's mark (the official svg of the Claude Code extension), in the brand color */
+export function ClaudeMark({
+  size = "1em",
+  ...rest
+}: Omit<SVGProps<SVGSVGElement>, "ref"> & { size?: string | number }) {
+  return (
+    <svg viewBox="0 0 24 24" width={size} height={size} aria-hidden="true" {...rest}>
+      <path
+        fill="#D97757"
+        fillRule="nonzero"
+        d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z"
+      />
+    </svg>
+  );
+}
+
+export const ArrowClockwise = icon(RefreshIcon, "ArrowClockwise");
+export const ArrowCounterClockwise = icon(Undo02Icon, "ArrowCounterClockwise");
+export const ArrowDown = icon(ArrowDown01Icon, "ArrowDown");
+export const ArrowDownLeft = icon(ArrowDownLeft01Icon, "ArrowDownLeft");
+export const ArrowDownRight = icon(ArrowDownRight01Icon, "ArrowDownRight");
+export const ArrowLeft = icon(ArrowLeft01Icon, "ArrowLeft");
+export const ArrowRight = icon(ArrowRight01Icon, "ArrowRight");
+export const ArrowUp = icon(ArrowUp01Icon, "ArrowUp");
+export const ArrowUpLeft = icon(ArrowUpLeft01Icon, "ArrowUpLeft");
+export const ArrowUpRight = icon(ArrowUpRight01Icon, "ArrowUpRight");
+export const ArrowExpand = icon(ArrowExpand01Icon, "ArrowExpand");
+export const CalendarBlank = icon(Calendar01Icon, "CalendarBlank");
+export const Chart = icon(Chart01Icon, "Chart");
+export const Dashboard = icon(DashboardSquare01Icon, "Dashboard");
+/* the Dashboard tabs: metrics and sections */
+export const Eye = icon(ViewIcon, "Eye");
+export const Radar = icon(Radar01Icon, "Radar");
+export const Heart = icon(FavouriteIcon, "Heart");
+export const FastForward = icon(Forward01Icon, "FastForward");
+export const Bookmark = icon(Bookmark01Icon, "Bookmark");
+export const ShareNetwork = icon(Share08Icon, "ShareNetwork");
+export const Users = icon(UserMultipleIcon, "Users");
+export const Table = icon(Table01Icon, "Table");
+export const Lightbulb = icon(Idea01Icon, "Lightbulb");
+export const ListChecks = icon(TaskDone01Icon, "ListChecks");
+export const Target = icon(Target01Icon, "Target");
+export const Microscope = icon(MicroscopeIcon, "Microscope");
+export const FilmStrip = icon(FilmRoll01Icon, "FilmStrip");
+export const Flag = icon(Flag01Icon, "Flag");
+export const Notepad = icon(NoteIcon, "Notepad");
+export const Activity = icon(Activity01Icon, "Activity");
+export const ChatCircleText = icon(Chat01Icon, "ChatCircleText");
+export const Envelope = icon(Mail01Icon, "Envelope");
+export const ArrowBendUpLeft = icon(ArrowTurnBackwardIcon, "ArrowBendUpLeft");
+export const ChatsCircle = icon(MessageMultiple01Icon, "ChatsCircle");
+export const Check = icon(Tick02Icon, "Check");
+export const Circle = icon(CircleIcon, "Circle");
+export const Clock = icon(Clock01Icon, "Clock");
+export const History = icon(HistoryIcon, "History");
+export const Copy = icon(Copy01Icon, "Copy");
+export const Dot = icon(CircleIcon, "Dot");
+export const DownloadSimple = icon(Download01Icon, "DownloadSimple");
+export const Exchange = icon(Exchange01Icon, "Exchange");
+export const FloppyDisk = icon(FloppyDiskIcon, "FloppyDisk");
+export const FolderOpen = icon(FolderOpenIcon, "FolderOpen");
+export const ImageSquare = icon(ImageDone01Icon, "ImageSquare");
+export const Key = icon(Key01Icon, "Key");
+export const ShieldCheck = icon(SecurityCheckIcon, "ShieldCheck");
+export const LinkSimple = icon(Link01Icon, "LinkSimple");
+export const Microphone = icon(Mic01Icon, "Microphone");
+export const MicrophoneSlash = icon(MicOff01Icon, "MicrophoneSlash");
+export const PhoneDisconnect = icon(CallEnd01Icon, "PhoneDisconnect");
+export const ThumbsUp = icon(ThumbsUpIcon, "ThumbsUp");
+export const ThumbsDown = icon(ThumbsDownIcon, "ThumbsDown");
+export const PaperPlane = icon(SentIcon, "PaperPlane");
+export const Pause = icon(PauseIcon, "Pause");
+export const Gear = icon(Settings01Icon, "Gear");
+export const Play = icon(PlayIcon, "Play");
+export const PlayCircle = icon(PlayCircleIcon, "PlayCircle");
+export const Plug = icon(Plug01Icon, "Plug");
+export const Plus = icon(Add01Icon, "Plus");
+export const Power = icon(PowerIcon, "Power");
+export const Prohibit = icon(BlockedIcon, "Prohibit");
+export const Queue = icon(LeftToRightListBulletIcon, "Queue");
+export const Shuffle = icon(ShuffleIcon, "Shuffle");
+export const SidebarRight = icon(SidebarRightIcon, "SidebarRight");
+export const SlidersHorizontal = icon(SlidersHorizontalIcon, "SlidersHorizontal");
+export const Sparkle = icon(SparklesIcon, "Sparkle");
+export const Stack = icon(Layers01Icon, "Stack");
+export const Stop = icon(StopIcon, "Stop");
+export const SidebarLeft = icon(SidebarLeftIcon, "SidebarLeft");
+export const Razor = icon(Knife01Icon, "Razor");
+export const Scissors = icon(ScissorIcon, "Scissors");
+export const SelectionArea = icon(BoundingBoxIcon, "SelectionArea");
+export const Cursor = icon(Cursor01Icon, "Cursor");
+export const Trash = icon(Delete02Icon, "Trash");
+export const Pencil = icon(PencilEdit01Icon, "Pencil");
+export const UploadSimple = icon(Upload01Icon, "UploadSimple");
+export const Carousel = icon(CarouselHorizontalIcon, "Carousel");
+export const CaretLeft = icon(ArrowLeft02Icon, "CaretLeft");
+export const CaretRight = icon(ArrowRight02Icon, "CaretRight");
+export const Subtitles = icon(SubtitleIcon, "Subtitles");
+export const VideoCamera = icon(Video01Icon, "VideoCamera");
+export const VolumeHigh = icon(VolumeHighIcon, "VolumeHigh");
+export const VolumeOff = icon(VolumeOffIcon, "VolumeOff");
+export const X = icon(Cancel01Icon, "X");
+export const Minus = icon(MinusSignIcon, "Minus");
+export const Info = icon(InformationCircleIcon, "Info");
+export const TrendUp = icon(ChartIncreaseIcon, "TrendUp");
+export const TrendDown = icon(ChartDecreaseIcon, "TrendDown");
+export const Columns = icon(ColumnInsertIcon, "Columns");
+
+/* the state of a queue run (ok, error, interrupted, waiting) */
+export const STATE_ICON: Record<string, ReactNode> = {
+  ok: <Check weight="bold" />,
+  error: <X weight="bold" />,
+  interrupted: <Prohibit weight="bold" />,
+  waiting: <Clock weight="bold" />,
+};
+
+/* the 3 × 3 caption position grid */
+export const ANCHOR_ARROW: Record<string, ReactNode> = {
+  "top-left": <ArrowUpLeft weight="bold" />,
+  "top-center": <ArrowUp weight="bold" />,
+  "top-right": <ArrowUpRight weight="bold" />,
+  "middle-left": <ArrowLeft weight="bold" />,
+  "middle-center": <Dot weight="fill" size="0.5em" />,
+  "middle-right": <ArrowRight weight="bold" />,
+  "bottom-left": <ArrowDownLeft weight="bold" />,
+  "bottom-center": <ArrowDown weight="bold" />,
+  "bottom-right": <ArrowDownRight weight="bold" />,
+};