style: apply oxfmt baseline formatting across all source files (#25)

## Summary - Run `oxfmt .` across the entire codebase to establish formatted baseline - 299 files changed — mechanical formatting only, no logic changes - Double quotes, semicolons, 2-space indent, trailing commas, 100 print width Part 3/4 of [VA-851](https://linear.app/heygen/issue/VA-851/pre-migration-configure-eslint-prettier-and-conventional-commits) ## Test plan - [x] `pnpm format:check` — all 426 files pass - [x] `pnpm -r typecheck` — all packages pass - [x] `pnpm build` — all packages build - [x] All 348 tests pass
2026-09-03 23:03:09 +00:00 · 2026-03-23 17:15:14 -07:00
parent 323ff8f860
commit 20be2ea1c2
299 changed files with 27750 additions and 16792 deletions
@@ -14,7 +14,15 @@ interface PropertyPanelProps {
  onSetText?: (text: string) => void;
 }

-function PropertyRow({ label, value, onChange }: { label: string; value: string; onChange: (v: string) => void }) {
+function PropertyRow({
+  label,
+  value,
+  onChange,
+}: {
+  label: string;
+  value: string;
+  onChange: (v: string) => void;
+}) {
  return (
    <div className="flex items-center gap-2">
      <span className="text-2xs text-neutral-600 w-16 flex-shrink-0 text-right">{label}</span>
@@ -28,12 +36,23 @@ function PropertyRow({ label, value, onChange }: { label: string; value: string;
  );
 }

-function ColorRow({ label, value, onChange }: { label: string; value: string; onChange: (v: string) => void }) {
+function ColorRow({
+  label,
+  value,
+  onChange,
+}: {
+  label: string;
+  value: string;
+  onChange: (v: string) => void;
+}) {
  return (
    <div className="flex items-center gap-2">
      <span className="text-2xs text-neutral-600 w-16 flex-shrink-0 text-right">{label}</span>
      <div className="flex items-center gap-1 flex-1">
-        <div className="w-5 h-5 rounded border border-neutral-700 flex-shrink-0" style={{ backgroundColor: value }} />
+        <div
+          className="w-5 h-5 rounded border border-neutral-700 flex-shrink-0"
+          style={{ backgroundColor: value }}
+        />
        <input
          type="text"
          value={value}
@@ -49,7 +68,9 @@ function SectionHeader({ icon: Icon, label }: { icon: typeof Move; label: string
  return (
    <div className="flex items-center gap-1.5 mt-2 mb-1">
      <Icon size={10} className="text-neutral-600" />
-      <span className="text-2xs font-medium text-neutral-500 uppercase tracking-wider">{label}</span>
+      <span className="text-2xs font-medium text-neutral-500 uppercase tracking-wider">
+        {label}
+      </span>
    </div>
  );
 }
@@ -98,7 +119,12 @@ export const PropertyPanel = memo(function PropertyPanel({
            onClick={isPickMode ? onDisablePick : onEnablePick}
            className={isPickMode ? "text-blue-400 bg-blue-500/10" : ""}
          />
-          <IconButton icon={<X size={11} />} aria-label="Clear selection" size="sm" onClick={onClearPick} />
+          <IconButton
+            icon={<X size={11} />}
+            aria-label="Clear selection"
+            size="sm"
+            onClick={onClearPick}
+          />
        </div>
      </div>

@@ -113,10 +139,26 @@ export const PropertyPanel = memo(function PropertyPanel({
        {/* Position & Size */}
        <SectionHeader icon={Move} label="Position & Size" />
        <div className="grid grid-cols-2 gap-1">
-          <PropertyRow label="X" value={s["left"] ?? "auto"} onChange={(v) => onSetStyle("left", v)} />
-          <PropertyRow label="Y" value={s["top"] ?? "auto"} onChange={(v) => onSetStyle("top", v)} />
-          <PropertyRow label="W" value={s["width"] ?? "auto"} onChange={(v) => onSetStyle("width", v)} />
-          <PropertyRow label="H" value={s["height"] ?? "auto"} onChange={(v) => onSetStyle("height", v)} />
+          <PropertyRow
+            label="X"
+            value={s["left"] ?? "auto"}
+            onChange={(v) => onSetStyle("left", v)}
+          />
+          <PropertyRow
+            label="Y"
+            value={s["top"] ?? "auto"}
+            onChange={(v) => onSetStyle("top", v)}
+          />
+          <PropertyRow
+            label="W"
+            value={s["width"] ?? "auto"}
+            onChange={(v) => onSetStyle("width", v)}
+          />
+          <PropertyRow
+            label="H"
+            value={s["height"] ?? "auto"}
+            onChange={(v) => onSetStyle("height", v)}
+          />
        </div>

        {/* Typography */}
@@ -127,8 +169,16 @@ export const PropertyPanel = memo(function PropertyPanel({
          element.tagName === "h2") && (
          <>
            <SectionHeader icon={Type} label="Typography" />
-            <PropertyRow label="Size" value={s["font-size"] ?? ""} onChange={(v) => onSetStyle("font-size", v)} />
-            <PropertyRow label="Weight" value={s["font-weight"] ?? ""} onChange={(v) => onSetStyle("font-weight", v)} />
+            <PropertyRow
+              label="Size"
+              value={s["font-size"] ?? ""}
+              onChange={(v) => onSetStyle("font-size", v)}
+            />
+            <PropertyRow
+              label="Weight"
+              value={s["font-weight"] ?? ""}
+              onChange={(v) => onSetStyle("font-weight", v)}
+            />
            <PropertyRow
              label="Family"
              value={s["font-family"]?.split(",")[0] ?? ""}
@@ -139,7 +189,11 @@ export const PropertyPanel = memo(function PropertyPanel({

        {/* Colors */}
        <SectionHeader icon={Palette} label="Colors" />
-        <ColorRow label="Color" value={s["color"] ?? "#fff"} onChange={(v) => onSetStyle("color", v)} />
+        <ColorRow
+          label="Color"
+          value={s["color"] ?? "#fff"}
+          onChange={(v) => onSetStyle("color", v)}
+        />
        <ColorRow
          label="Background"
          value={s["background-color"] ?? "transparent"}
@@ -148,14 +202,26 @@ export const PropertyPanel = memo(function PropertyPanel({

        {/* Appearance */}
        <SectionHeader icon={Eye} label="Appearance" />
-        <PropertyRow label="Opacity" value={s["opacity"] ?? "1"} onChange={(v) => onSetStyle("opacity", v)} />
+        <PropertyRow
+          label="Opacity"
+          value={s["opacity"] ?? "1"}
+          onChange={(v) => onSetStyle("opacity", v)}
+        />
        <PropertyRow
          label="Radius"
          value={s["border-radius"] ?? "0"}
          onChange={(v) => onSetStyle("border-radius", v)}
        />
-        <PropertyRow label="Z-index" value={s["z-index"] ?? "auto"} onChange={(v) => onSetStyle("z-index", v)} />
-        <PropertyRow label="Transform" value={s["transform"] ?? "none"} onChange={(v) => onSetStyle("transform", v)} />
+        <PropertyRow
+          label="Z-index"
+          value={s["z-index"] ?? "auto"}
+          onChange={(v) => onSetStyle("z-index", v)}
+        />
+        <PropertyRow
+          label="Transform"
+          value={s["transform"] ?? "none"}
+          onChange={(v) => onSetStyle("transform", v)}
+        />

        {/* Timing */}
        {(element.dataAttributes["start"] || element.dataAttributes["duration"]) && (
@@ -1,5 +1,11 @@
 import { useRef, useCallback, memo } from "react";
-import { EditorView, keymap, lineNumbers, highlightActiveLine, highlightActiveLineGutter } from "@codemirror/view";
+import {
+  EditorView,
+  keymap,
+  lineNumbers,
+  highlightActiveLine,
+  highlightActiveLineGutter,
+} from "@codemirror/view";
 import { EditorState } from "@codemirror/state";
 import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
 import { bracketMatching, foldGutter, indentOnInput } from "@codemirror/language";
@@ -90,12 +96,7 @@ export const SourceEditor = memo(function SourceEditor({
          bracketMatching(),
          closeBrackets(),
          highlightSelectionMatches(),
-          keymap.of([
-            ...closeBracketsKeymap,
-            ...defaultKeymap,
-            ...searchKeymap,
-            ...historyKeymap,
-          ]),
+          keymap.of([...closeBracketsKeymap, ...defaultKeymap, ...searchKeymap, ...historyKeymap]),
          getLanguageExtension(lang),
          oneDark,
          updateListener,
@@ -32,7 +32,13 @@ export const NLELayout = memo(function NLELayout({
  activeCompositionPath,
  onIframeRef,
 }: NLELayoutProps) {
-  const { iframeRef, togglePlay, seek, onIframeLoad: baseOnIframeLoad, saveSeekPosition } = useTimelinePlayer();
+  const {
+    iframeRef,
+    togglePlay,
+    seek,
+    onIframeLoad: baseOnIframeLoad,
+    saveSeekPosition,
+  } = useTimelinePlayer();

  // Preserve seek position when refreshKey changes (iframe will remount via key prop).
  const prevRefreshKeyRef = useRef(refreshKey);
@@ -55,7 +61,8 @@ export const NLELayout = memo(function NLELayout({
      .then((data: { content?: string }) => {
        const html = data.content || "";
        const map = new Map<string, string>();
-        const re = /data-composition-id=["']([^"']+)["'][^>]*data-composition-src=["']([^"']+)["']|data-composition-src=["']([^"']+)["'][^>]*data-composition-id=["']([^"']+)["']/g;
+        const re =
+          /data-composition-id=["']([^"']+)["'][^>]*data-composition-src=["']([^"']+)["']|data-composition-src=["']([^"']+)["'][^>]*data-composition-id=["']([^"']+)["']/g;
        let match;
        while ((match = re.exec(html)) !== null) {
          const id = match[1] || match[4];
@@ -98,12 +105,16 @@ export const NLELayout = memo(function NLELayout({
        try {
          const doc = iframeRef_.current?.contentDocument;
          if (doc) {
-            const host = doc.querySelector(`[data-composition-id="${compId}"][data-composition-src]`);
+            const host = doc.querySelector(
+              `[data-composition-id="${compId}"][data-composition-src]`,
+            );
            if (host) {
              resolvedPath = host.getAttribute("data-composition-src") || undefined;
            }
          }
-        } catch { /* cross-origin */ }
+        } catch {
+          /* cross-origin */
+        }
      }
      if (!resolvedPath) {
        // Strip full URL to relative path if needed
@@ -121,7 +132,11 @@ export const NLELayout = memo(function NLELayout({
          return prev.slice(0, -1);
        }
        // Extract a clean label from the path (strip directories and extension)
-        const label = resolvedPath.split("/").pop()?.replace(/\.html$/, "") || resolvedPath;
+        const label =
+          resolvedPath
+            .split("/")
+            .pop()
+            ?.replace(/\.html$/, "") || resolvedPath;
        const previewUrl = `/api/projects/${projectId}/preview/comp/${resolvedPath}`;
        return [...prev, { id: resolvedPath, label, previewUrl }];
      });
@@ -131,13 +146,10 @@ export const NLELayout = memo(function NLELayout({
  );

  // Navigate back to a specific breadcrumb level
-  const handleNavigateComposition = useCallback(
-    (index: number) => {
-      usePlayerStore.getState().setElements([]);
-      setCompositionStack((prev) => prev.slice(0, index + 1));
-    },
-    [],
-  );
+  const handleNavigateComposition = useCallback((index: number) => {
+    usePlayerStore.getState().setElements([]);
+    setCompositionStack((prev) => prev.slice(0, index + 1));
+  }, []);

  // Navigate to a composition when activeCompositionPath changes
  const prevActiveCompRef = useRef<string | null>(null);
@@ -145,7 +157,7 @@ export const NLELayout = memo(function NLELayout({
    prevActiveCompRef.current = activeCompositionPath;
    queueMicrotask(() => usePlayerStore.getState().setElements([]));
    if (activeCompositionPath === "index.html") {
-      setCompositionStack((prev) => prev.length > 1 ? [prev[0]] : prev);
+      setCompositionStack((prev) => (prev.length > 1 ? [prev[0]] : prev));
    } else if (activeCompositionPath.startsWith("compositions/")) {
      const label = activeCompositionPath.replace(/^compositions\//, "").replace(/\.html$/, "");
      const previewUrl = `/api/projects/${projectId}/preview/comp/${activeCompositionPath}`;
@@ -229,7 +241,10 @@ export const NLELayout = memo(function NLELayout({
        {/* Breadcrumb + Player controls */}
        <div className="bg-neutral-950 border-t border-neutral-800/50 flex-shrink-0">
          {compositionStack.length > 1 && (
-            <CompositionBreadcrumb stack={compositionStack} onNavigate={handleNavigateComposition} />
+            <CompositionBreadcrumb
+              stack={compositionStack}
+              onNavigate={handleNavigateComposition}
+            />
          )}
          <PlayerControls onTogglePlay={togglePlay} onSeek={seek} />
        </div>
@@ -39,10 +39,14 @@ const variantStyles: Record<ButtonVariant, string> = {
    "hover:bg-surface-hover hover:text-white hover:border-border-strong",
    "active:scale-[0.98]",
  ].join(" "),
-  danger: ["bg-accent-red text-white font-medium", "hover:bg-red-600", "active:scale-[0.97]"].join(" "),
-  ghost: ["bg-transparent text-neutral-400", "hover:bg-surface-hover hover:text-white", "active:scale-[0.98]"].join(
+  danger: ["bg-accent-red text-white font-medium", "hover:bg-red-600", "active:scale-[0.97]"].join(
    " ",
  ),
+  ghost: [
+    "bg-transparent text-neutral-400",
+    "hover:bg-surface-hover hover:text-white",
+    "active:scale-[0.98]",
+  ].join(" "),
 };

 const sizeStyles: Record<ButtonSize, string> = {
@@ -52,7 +56,19 @@ const sizeStyles: Record<ButtonSize, string> = {
 };

 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ variant = "secondary", size = "md", loading, icon, children, className = "", disabled, ...props }, ref) => {
+  (
+    {
+      variant = "secondary",
+      size = "md",
+      loading,
+      icon,
+      children,
+      className = "",
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
    return (
      <button
        ref={ref}
@@ -70,8 +86,19 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
      >
        {loading ? (
          <svg className="animate-spin h-3.5 w-3.5" viewBox="0 0 24 24" fill="none">
-            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+            />
          </svg>
        ) : icon ? (
          <span className="flex-shrink-0">{icon}</span>