refactor: delete orphan declarations flagged by fallow (#949)

* ci: run fallow audit in lefthook pre-commit

Mirrors the same `fallow audit --base ... --fail-on-issues` check that
runs in CI, but locally against HEAD so issues surface at commit time
instead of after the push round-trip.

Scoped to `packages/**` source files via the glob — non-code edits
(README, docs, top-level configs) skip the hook entirely.

Measured locally: ~5s in parallel with the existing lint/format/typecheck
checks. Doesn't extend wall-clock time because typecheck (~11s) is the
long pole, and lefthook runs commands in parallel.

The default `--gate new-only` means inherited findings don't block the
commit — same gate behavior as CI, so local pre-commit and PR audit
agree.

* refactor: delete orphan declarations flagged by fallow

After fallow's auto-fix de-exports unused symbols, oxlint surfaces them
as no-unused-vars. This PR deletes those orphan declarations outright.

Biggest cleanup: studio/src/icons/SystemIcons.tsx shrinks from 132 to 57
lines — 33 unused icon wrappers and their phosphor-icon imports deleted.

Other deletions across 14 more files covering paired getter/setters,
helper functions, dead env constants, internal components with no
callers, and cascading unused imports.

Cascade-causing files held back for follow-up PRs: renderOrchestrator
barrel of captureCost re-exports, telemetry/portUtils/remote barrels,
Button.tsx + ui/index.ts (would orphan whole file), studioMotion
type re-exports.

Test plan: typecheck clean across 8 packages, oxlint + oxfmt clean,
fallow audit exit 0 (remaining findings inherited), cli + studio
vitest suites pass.

packages/studio/src/components/editor/TimelineLayerPanel.tsx

@@ -1,14 +1,5 @@
-import { memo } from "react";
 import type { DomEditLayerItem } from "./domEditing";
 
-interface TimelineLayerPanelProps {
-  clipLabel: string;
-  layers: DomEditLayerItem[];
-  selectedLayerKey: string | null;
-  onSelectLayer: (layer: DomEditLayerItem) => void;
-  onClose: () => void;
-}
-
 const MEDIA_LAYER_TAGS = new Set(["audio", "canvas", "img", "picture", "svg", "video"]);
 
 export function getTimelineLayerPanelSummary(layers: readonly DomEditLayerItem[]): string {
@@ -22,92 +13,3 @@ export function getTimelineLayerPanelSummary(layers: readonly DomEditLayerItem[]
     ? "Single selectable media layer"
     : "Single selectable layer";
 }
-
-export const TimelineLayerPanel = memo(function TimelineLayerPanel({
-  clipLabel,
-  layers,
-  selectedLayerKey,
-  onSelectLayer,
-  onClose,
-}: TimelineLayerPanelProps) {
-  return (
-    <div className="flex h-full min-h-0 flex-col overflow-hidden bg-neutral-950">
-      <div className="flex items-start justify-between gap-3 border-b border-white/10 px-3 py-3">
-        <div className="min-w-0">
-          <div className="text-[9px] font-semibold uppercase tracking-[0.18em] text-neutral-500">
-            Clip layers
-          </div>
-          <div className="mt-1 truncate text-sm font-semibold text-neutral-100">{clipLabel}</div>
-        </div>
-        <button
-          type="button"
-          onPointerDown={(event) => {
-            event.stopPropagation();
-          }}
-          onClick={onClose}
-          className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md border border-white/10 bg-black/20 text-neutral-500 transition-colors hover:border-white/20 hover:text-neutral-200"
-          aria-label="Close clip layers"
-        >
-          <svg
-            width="14"
-            height="14"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="1.8"
-            strokeLinecap="round"
-            aria-hidden="true"
-          >
-            <path d="M18 6 6 18" />
-            <path d="m6 6 12 12" />
-          </svg>
-        </button>
-      </div>
-      <div className="border-b border-white/10 px-3 py-2 text-[11px] text-neutral-500">
-        {getTimelineLayerPanelSummary(layers)}
-      </div>
-      <div className="min-h-0 flex-1 overflow-y-auto py-1">
-        {layers.map((layer) => {
-          const selected = layer.key === selectedLayerKey;
-          return (
-            <button
-              key={layer.key}
-              type="button"
-              data-timeline-layer-row={layer.key}
-              onPointerDown={(event) => {
-                event.stopPropagation();
-                onSelectLayer(layer);
-              }}
-              onClick={(event) => {
-                event.stopPropagation();
-                onSelectLayer(layer);
-              }}
-              className={`group flex w-full items-center gap-2 px-2.5 py-1.5 text-left transition-colors ${
-                selected
-                  ? "bg-studio-accent/14 text-studio-accent"
-                  : "text-neutral-300 hover:bg-white/[0.04] hover:text-neutral-100"
-              }`}
-              style={{ paddingLeft: 10 + layer.depth * 14 }}
-            >
-              <span
-                className={`flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-md border text-[9px] font-bold uppercase ${
-                  selected
-                    ? "border-studio-accent/50 bg-studio-accent/18"
-                    : "border-white/10 bg-black/20 text-neutral-500 group-hover:text-neutral-300"
-                }`}
-              >
-                {layer.tagName.slice(0, 2)}
-              </span>
-              <span className="min-w-0 flex-1 truncate text-xs font-medium">{layer.label}</span>
-              {layer.childCount > 0 && (
-                <span className="rounded-full border border-white/10 bg-black/25 px-1.5 py-0.5 text-[9px] font-semibold tabular-nums text-neutral-500">
-                  {layer.childCount}
-                </span>
-              )}
-            </button>
-          );
-        })}
-      </div>
-    </div>
-  );
-});

packages/studio/src/components/editor/domEditingElement.ts

@@ -12,9 +12,7 @@ import type {
 import {
   buildStableSelector,
   escapeCssString,
-  findClosestByAttribute,
   getElementDepth,
-  getPreferredClassSelector,
   getSelectorIndex,
   getSourceFileForElement,
   isHtmlElement,
@@ -60,7 +58,7 @@ function isEmptyVisualContainer(el: HTMLElement): boolean {
   return true;
 }
 
-export function hasRenderedBox(el: HTMLElement): boolean {
+function hasRenderedBox(el: HTMLElement): boolean {
   const rect = el.getBoundingClientRect();
   if (rect.width <= 1 || rect.height <= 1) return false;
   if (!isElementComputedVisible(el)) return false;
@@ -324,7 +322,3 @@ export function getDirectLayerChildren(
       isHtmlElement(child) && getDomLayerPatchTarget(child, options.activeCompositionPath) !== null,
   );
 }
-
-// ─── Composition source helpers ───────────────────────────────────────────────
-
-export { findClosestByAttribute, getPreferredClassSelector, getSourceFileForElement };

packages/studio/src/components/editor/manualEditingAvailability.test.ts

@@ -23,37 +23,15 @@ describe("manual editing availability", () => {
     expect(availability.STUDIO_PREVIEW_SELECTION_ENABLED).toBe(true);
     expect(availability.STUDIO_INSPECTOR_PANELS_ENABLED).toBe(true);
     expect(availability.STUDIO_MOTION_PANEL_ENABLED).toBe(false);
-    expect(availability.STUDIO_TIMELINE_LAYER_INSPECTOR_ENABLED).toBe(true);
   });
 
-  it("keeps explicit truthy inspector env flags enabled", async () => {
-    const availability = await loadAvailabilityWithEnv({
-      VITE_STUDIO_ENABLE_INSPECTOR_PANELS: "1",
-      VITE_STUDIO_ENABLE_TIMELINE_LAYER_INSPECTOR: "true",
-    });
-
-    expect(availability.STUDIO_INSPECTOR_PANELS_ENABLED).toBe(true);
-    expect(availability.STUDIO_TIMELINE_LAYER_INSPECTOR_ENABLED).toBe(true);
-  });
-
-  it("allows explicit env flags to disable default-on inspector layers", async () => {
-    const availability = await loadAvailabilityWithEnv({
-      VITE_STUDIO_ENABLE_TIMELINE_LAYER_INSPECTOR: "off",
-    });
-
-    expect(availability.STUDIO_INSPECTOR_PANELS_ENABLED).toBe(true);
-    expect(availability.STUDIO_TIMELINE_LAYER_INSPECTOR_ENABLED).toBe(false);
-  });
-
-  it("keeps timeline layer inspection off when the parent inspector flag is off", async () => {
+  it("disables preview selection when the inspector panel flag is explicitly off", async () => {
     const availability = await loadAvailabilityWithEnv({
       VITE_STUDIO_ENABLE_INSPECTOR_PANELS: "0",
-      VITE_STUDIO_ENABLE_TIMELINE_LAYER_INSPECTOR: "true",
     });
 
     expect(availability.STUDIO_INSPECTOR_PANELS_ENABLED).toBe(false);
     expect(availability.STUDIO_PREVIEW_SELECTION_ENABLED).toBe(false);
-    expect(availability.STUDIO_TIMELINE_LAYER_INSPECTOR_ENABLED).toBe(false);
   });
 
   it("enables feature flags with explicit truthy env values", () => {

packages/studio/src/components/editor/manualEditingAvailability.ts

@@ -1,10 +1,8 @@
 export type StudioFeatureFlagEnv = Record<string, boolean | string | undefined>;
 
-export const STUDIO_PREVIEW_MANUAL_DRAGGING_ENV = "VITE_STUDIO_ENABLE_PREVIEW_MANUAL_DRAGGING";
-export const STUDIO_INSPECTOR_PANELS_ENV = "VITE_STUDIO_ENABLE_INSPECTOR_PANELS";
-export const STUDIO_MOTION_PANEL_ENV = "VITE_STUDIO_ENABLE_MOTION_PANEL";
-export const STUDIO_TIMELINE_LAYER_INSPECTOR_ENV = "VITE_STUDIO_ENABLE_TIMELINE_LAYER_INSPECTOR";
-
+const STUDIO_PREVIEW_MANUAL_DRAGGING_ENV = "VITE_STUDIO_ENABLE_PREVIEW_MANUAL_DRAGGING";
+const STUDIO_INSPECTOR_PANELS_ENV = "VITE_STUDIO_ENABLE_INSPECTOR_PANELS";
+const STUDIO_MOTION_PANEL_ENV = "VITE_STUDIO_ENABLE_MOTION_PANEL";
 const TRUTHY_ENV_VALUES = new Set(["1", "true", "yes", "on", "enabled"]);
 const FALSY_ENV_VALUES = new Set(["0", "false", "no", "off", "disabled"]);
 
@@ -52,14 +50,6 @@ export const STUDIO_MOTION_PANEL_ENABLED = resolveStudioBooleanEnvFlag(
   false,
 );
 
-export const STUDIO_TIMELINE_LAYER_INSPECTOR_ENABLED =
-  STUDIO_INSPECTOR_PANELS_ENABLED &&
-  resolveStudioBooleanEnvFlag(
-    env,
-    [STUDIO_TIMELINE_LAYER_INSPECTOR_ENV, "VITE_STUDIO_TIMELINE_LAYER_INSPECTOR_ENABLED"],
-    true,
-  );
-
 export const STUDIO_BLOCKS_PANEL_ENABLED = resolveStudioBooleanEnvFlag(
   env,
   ["VITE_STUDIO_ENABLE_BLOCKS_PANEL", "VITE_STUDIO_BLOCKS_PANEL_ENABLED"],
@@ -68,6 +58,4 @@ export const STUDIO_BLOCKS_PANEL_ENABLED = resolveStudioBooleanEnvFlag(
 
 export const STUDIO_PREVIEW_SELECTION_ENABLED = STUDIO_INSPECTOR_PANELS_ENABLED;
 
-export const STUDIO_MANUAL_EDITING_ENABLED = STUDIO_PREVIEW_MANUAL_EDITING_ENABLED;
-
 export const STUDIO_MANUAL_EDITING_DISABLED_TITLE = "Manual editing is temporarily disabled";

packages/studio/src/components/editor/manualEditsSnapshot.ts

@@ -11,7 +11,6 @@ import {
   STUDIO_HEIGHT_PROP,
   STUDIO_ROTATION_PROP,
   STUDIO_PATH_OFFSET_ATTR,
-  STUDIO_MANUAL_EDIT_GESTURE_ATTR,
   STUDIO_BOX_SIZE_ATTR,
   STUDIO_ROTATION_ATTR,
   STUDIO_ORIGINAL_TRANSLATE_ATTR,
@@ -33,7 +32,6 @@ import {
   STUDIO_ORIGINAL_INLINE_ROTATE_ATTR,
   STUDIO_ORIGINAL_ROTATION_TRANSFORM_ORIGIN_ATTR,
   STUDIO_ROTATION_DRAFT_ATTR,
-  STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR,
 } from "./manualEditsTypes";
 import type {
   StudioBoxSizeSnapshot,
@@ -187,38 +185,6 @@ export function restoreStudioPathOffset(
   );
 }
 
-/* ── DOM element collection ───────────────────────────────────────── */
-export function collectStudioManualEditElements(doc: Document): HTMLElement[] {
-  const htmlElement = doc.defaultView?.HTMLElement;
-  if (!htmlElement) return [];
-
-  const elements = [doc.documentElement, ...Array.from(doc.getElementsByTagName("*"))].filter(
-    (element): element is HTMLElement => element instanceof htmlElement,
-  );
-
-  return elements.filter(
-    (element) =>
-      element.hasAttribute(STUDIO_PATH_OFFSET_ATTR) ||
-      element.hasAttribute(STUDIO_MANUAL_EDIT_GESTURE_ATTR) ||
-      element.hasAttribute(STUDIO_BOX_SIZE_ATTR) ||
-      element.hasAttribute(STUDIO_ROTATION_ATTR) ||
-      element.hasAttribute(STUDIO_ROTATION_DRAFT_ATTR) ||
-      element.hasAttribute(STUDIO_ORIGINAL_TRANSLATE_ATTR) ||
-      element.hasAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR) ||
-      element.hasAttribute(STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR) ||
-      element.hasAttribute(STUDIO_ORIGINAL_MIN_WIDTH_ATTR) ||
-      element.hasAttribute(STUDIO_ORIGINAL_FLEX_BASIS_ATTR) ||
-      element.hasAttribute(STUDIO_ORIGINAL_SCALE_ATTR) ||
-      element.hasAttribute(STUDIO_ORIGINAL_ROTATE_ATTR) ||
-      element.hasAttribute(STUDIO_ORIGINAL_INLINE_ROTATE_ATTR) ||
-      Boolean(element.style.getPropertyValue(STUDIO_OFFSET_X_PROP)) ||
-      Boolean(element.style.getPropertyValue(STUDIO_OFFSET_Y_PROP)) ||
-      Boolean(element.style.getPropertyValue(STUDIO_WIDTH_PROP)) ||
-      Boolean(element.style.getPropertyValue(STUDIO_HEIGHT_PROP)) ||
-      Boolean(element.style.getPropertyValue(STUDIO_ROTATION_PROP)),
-  );
-}
-
 /* ── Clear functions ──────────────────────────────────────────────── */
 type BoxSizeProperty =
   | "width"