pixelweaver 0.1.0

package/src/lib/ui/FrameStrip.svelte

@@ -0,0 +1,854 @@
+<script lang="ts">
+  /**
+   * FrameStrip -- horizontal animation timeline below the canvas.
+   *
+   * Shows one thumbnail per frame, frame tags as colored bars, action
+   * buttons for frame management, and a global FPS control. Supports
+   * drag-to-reorder via pointer events.
+   *
+   * Thumbnails are composited from visible layers using the compositor
+   * and cached in a Map keyed by frame ID + a generation counter.
+   */
+
+  import type { CommandType, ParamsOf } from '../core/command-params.js';
+  import { dispatch } from '../core/dispatcher.js';
+  import ContextMenu from './ContextMenu.svelte';
+  import {
+    getFrames,
+    getCurrentFrameIndex,
+    setCurrentFrame,
+    getGlobalFps,
+    getFrameDuration,
+  } from '../animation/frame-model.svelte.js';
+  import { getTags } from '../animation/frame-tags.svelte.js';
+  import { getLayers } from '../layers/layer-tree.svelte.js';
+  import { composite } from '../layers/compositor.js';
+  import { canvasState } from '../canvas/canvas-state.svelte.js';
+  import { frameSelection } from '../animation/frame-selection.svelte.js';
+  import type { FrameTag } from '../animation/frame-tags.svelte.js';
+  import PlusIcon from '~icons/lucide/plus';
+  import TrashIcon from '~icons/lucide/trash-2';
+
+  // --- Constants ---
+
+  /** Maximum thumbnail dimension in pixels. */
+  const THUMB_SIZE = 48;
+
+  // --- Command dispatch helper ---
+
+  // Typed overload: compile-time param validation for known commands
+  function dispatchCmd<T extends CommandType>(type: T, params: ParamsOf<T>): void;
+  // String fallback: for dynamic dispatch where command type is a variable
+  function dispatchCmd(type: string, params?: Record<string, unknown>): void;
+  function dispatchCmd(type: string, params: Record<string, unknown> = {}) {
+    dispatch({
+      type,
+      plugin: 'ui/animation',
+      version: '1.0.0',
+      params,
+      id: crypto.randomUUID(),
+      timestamp: Date.now(),
+    });
+  }
+
+  // --- Thumbnail cache ---
+
+  /**
+   * Cached thumbnail canvases keyed by frame ID. Each entry stores an
+   * offscreen canvas with the composited preview already drawn on it.
+   * A generation counter tracks staleness -- when the frame's pixel data
+   * changes, the generation in the frame model will differ from the cached
+   * one, triggering a re-composite.
+   */
+  // eslint-disable-next-line svelte/prefer-svelte-reactivity -- render cache, not reactive
+  let thumbCache = new Map<string, { canvas: OffscreenCanvas; gen: number }>();
+
+  /** Global generation counter; bumped whenever we detect state changes. */
+  let generation = $state(0);
+
+  // --- Thumbnail dimensions (proportionally scaled to fit THUMB_SIZE) ---
+
+  let thumbWidth = $derived((() => {
+    const w = canvasState.canvasWidth;
+    const h = canvasState.canvasHeight;
+    if (w >= h) return THUMB_SIZE;
+    return Math.max(1, Math.round((w / h) * THUMB_SIZE));
+  })());
+
+  let thumbHeight = $derived((() => {
+    const w = canvasState.canvasWidth;
+    const h = canvasState.canvasHeight;
+    if (h >= w) return THUMB_SIZE;
+    return Math.max(1, Math.round((h / w) * THUMB_SIZE));
+  })());
+
+  // --- Derived state ---
+
+  let frames = $derived(getFrames());
+  let currentIndex = $derived(getCurrentFrameIndex());
+  let globalFps = $derived(getGlobalFps());
+  let tags = $derived(getTags());
+
+  // --- Canvas element refs for each frame thumbnail ---
+
+  let canvasEls: (HTMLCanvasElement | null)[] = $state([]);
+
+  // --- Drag-to-reorder state ---
+
+  let dragFromIndex = $state<number | null>(null);
+  let dragOverIndex = $state<number | null>(null);
+  let dragInsertSide = $state<'left' | 'right' | null>(null);
+
+  // --- Inline duration editing state ---
+
+  /** Index of the frame currently being edited for duration, or null if none. */
+  let editingDurationIndex = $state<number | null>(null);
+  /** Current value in the duration input field during editing. */
+  let editDurationValue = $state('');
+
+  // --- FPS input state ---
+
+  // Writable-but-derived: user typing diverges from globalFps until commit.
+  // eslint-disable-next-line svelte/prefer-writable-derived -- diverges during user input
+  let fpsInputValue = $state(String(getGlobalFps()));
+
+  // Keep fpsInputValue in sync when globalFps changes externally
+  $effect(() => {
+    fpsInputValue = String(globalFps);
+  });
+
+  // --- Tag helpers ---
+
+  /**
+   * Build a list of top-level tag bars to display above the frame strip.
+   * Each bar spans from tag.startFrame to tag.endFrame.
+   */
+  function getVisibleTags(): FrameTag[] {
+    // Flatten the tag tree to get all tags (including nested)
+    const result: FrameTag[] = [];
+    function walk(list: FrameTag[]) {
+      for (const tag of list) {
+        result.push(tag);
+        if (tag.children.length > 0) walk(tag.children);
+      }
+    }
+    walk(tags);
+    return result;
+  }
+
+  let visibleTags = $derived(getVisibleTags());
+
+  // --- Thumbnail rendering ---
+
+  /**
+   * Render a single frame's thumbnail onto its canvas element.
+   * Composites all visible layers for that frame, scales the result
+   * down to thumbnail size, and draws it.
+   */
+  function renderThumbnail(frameIndex: number, canvasEl: HTMLCanvasElement) {
+    const frame = frames[frameIndex];
+    if (!frame) return;
+
+    const w = canvasState.canvasWidth;
+    const h = canvasState.canvasHeight;
+    const layerTree = getLayers();
+
+    // Composite all visible layers for this frame
+    const composited = composite(layerTree, frame.pixelData, w, h);
+
+    // Create ImageData from the composited buffer
+    const imgData = new ImageData(
+      new Uint8ClampedArray(composited.data),
+      w,
+      h,
+    );
+
+    // Use an offscreen canvas to scale the composite down to thumbnail size
+    const offscreen = new OffscreenCanvas(w, h);
+    const offCtx = offscreen.getContext('2d');
+    if (!offCtx) return;
+    offCtx.putImageData(imgData, 0, 0);
+
+    // Draw scaled onto the visible canvas
+    canvasEl.width = thumbWidth;
+    canvasEl.height = thumbHeight;
+    const ctx = canvasEl.getContext('2d');
+    if (!ctx) return;
+    ctx.imageSmoothingEnabled = false;
+    ctx.clearRect(0, 0, thumbWidth, thumbHeight);
+    ctx.drawImage(offscreen, 0, 0, thumbWidth, thumbHeight);
+
+    // Update cache
+    thumbCache.set(frame.id, {
+      canvas: offscreen,
+      gen: generation,
+    });
+  }
+
+  /**
+   * Re-render all thumbnails. Called from $effect when frames, layers,
+   * or canvas dimensions change.
+   */
+  $effect(() => {
+    // Read reactive dependencies to trigger re-runs:
+    // frame list, current index, layer tree, canvas size, and generation
+    const _frames = frames;
+    const _currentIdx = currentIndex;
+    const _layers = getLayers();
+    const _w = canvasState.canvasWidth;
+    const _h = canvasState.canvasHeight;
+    const _gen = generation;
+
+    // Render each frame thumbnail
+    for (let i = 0; i < _frames.length; i++) {
+      const el = canvasEls[i];
+      if (el) {
+        renderThumbnail(i, el);
+      }
+    }
+  });
+
+  // --- Sync selection with current frame ---
+
+  // If nothing is selected (e.g. on init or after reset), select current frame
+  $effect(() => {
+    if (frameSelection.count === 0) {
+      frameSelection.selectOne(getCurrentFrameIndex());
+    }
+  });
+
+  // --- Actions ---
+
+  function handleSelectFrame(index: number, e: PointerEvent | MouseEvent) {
+    if (e.shiftKey) {
+      frameSelection.extendTo(index);
+    } else if (e.ctrlKey || e.metaKey) {
+      frameSelection.toggle(index);
+    } else {
+      frameSelection.selectOne(index);
+    }
+    setCurrentFrame(index);
+  }
+
+  function handleAddFrame() {
+    dispatchCmd('add_frame', { afterIndex: currentIndex });
+    frameSelection.reset();
+    generation++;
+  }
+
+  function handleDuplicateFrame() {
+    dispatchCmd('duplicate_frame', { index: currentIndex });
+    frameSelection.reset();
+    generation++;
+  }
+
+  function handleDeleteFrame() {
+    if (frames.length <= 1) return;
+    dispatchCmd('delete_selected_frames', {});
+    generation++;
+  }
+
+  function handleFpsChange() {
+    const value = parseInt(fpsInputValue, 10);
+    if (!isNaN(value) && value >= 1 && value <= 120) {
+      dispatchCmd('set_global_fps', { fps: value });
+    } else {
+      // Reset to current value if invalid
+      fpsInputValue = String(globalFps);
+    }
+  }
+
+  function handleFpsKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleFpsChange();
+      (e.target as HTMLInputElement).blur();
+    }
+  }
+
+  // --- Drag-to-reorder handlers ---
+
+  function handleDragPointerDown(e: PointerEvent, index: number) {
+    if (e.button !== 0) return;
+    dragFromIndex = index;
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+  }
+
+  function handleDragPointerMove(e: PointerEvent, index: number) {
+    if (dragFromIndex === null) return;
+    if (dragFromIndex === index) {
+      // Moving within the same frame -- check if cursor left the element
+      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+      if (e.clientX < rect.left || e.clientX > rect.right) {
+        dragOverIndex = index;
+      }
+      return;
+    }
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    const midX = rect.left + rect.width / 2;
+    dragOverIndex = index;
+    dragInsertSide = e.clientX < midX ? 'left' : 'right';
+  }
+
+  function handleDragPointerUp() {
+    if (dragFromIndex !== null && dragOverIndex !== null && dragInsertSide !== null) {
+      let toIndex = dragOverIndex;
+      if (dragInsertSide === 'right') {
+        toIndex = dragOverIndex + 1;
+      }
+
+      // Bulk move: when multiple frames are selected and the dragged frame
+      // is part of that selection, move the entire selection as a group.
+      if (frameSelection.hasMultiple && frameSelection.isSelected(dragFromIndex)) {
+        const fromIndices = frameSelection.sortedIndices;
+        // Skip if the drop target is already within the selected range
+        // and wouldn't result in any movement
+        const minSel = fromIndices[0]!;
+        const maxSel = fromIndices[fromIndices.length - 1]!;
+        if (toIndex < minSel || toIndex > maxSel + 1) {
+          dispatchCmd('reorder_frames', {
+            fromIndices,
+            toIndex,
+          });
+          frameSelection.reset();
+          generation++;
+        }
+      } else {
+        // Single frame reorder (original behavior)
+        // Adjust for removal shift: if dragging from before the target,
+        // the removal shifts target indices down
+        if (dragFromIndex < toIndex) {
+          toIndex -= 1;
+        }
+        if (dragFromIndex !== toIndex && toIndex >= 0 && toIndex < frames.length) {
+          dispatchCmd('reorder_frame', {
+            fromIndex: dragFromIndex,
+            toIndex,
+          });
+          frameSelection.reset();
+          generation++;
+        }
+      }
+    }
+    dragFromIndex = null;
+    dragOverIndex = null;
+    dragInsertSide = null;
+  }
+
+  /**
+   * Check whether a frame has a custom (per-frame) duration override.
+   */
+  function hasCustomDuration(index: number): boolean {
+    const frame = frames[index];
+    return frame != null && frame.durationMs !== null;
+  }
+
+  /**
+   * Get the display duration string for a frame (always shown).
+   * Uses per-frame override if set, otherwise derives from global FPS.
+   */
+  function displayDuration(index: number): string {
+    return `${String(getFrameDuration(index))}ms`;
+  }
+
+  // --- Inline duration editing handlers ---
+
+  function startDurationEdit(index: number) {
+    editingDurationIndex = index;
+    editDurationValue = String(getFrameDuration(index));
+  }
+
+  function commitDurationEdit(index: number) {
+    editingDurationIndex = null;
+    const value = parseInt(editDurationValue, 10);
+    const globalDefault = Math.round(1000 / globalFps);
+
+    if (isNaN(value) || value <= 0) {
+      // Invalid input -- discard, no change
+      return;
+    }
+
+    if (value === globalDefault) {
+      // Matches global default -- reset to null (remove per-frame override)
+      dispatchCmd('set_frame_duration', { index, durationMs: null });
+    } else {
+      dispatchCmd('set_frame_duration', { index, durationMs: value });
+    }
+  }
+
+  function cancelDurationEdit() {
+    editingDurationIndex = null;
+  }
+
+  function handleDurationKeydown(e: KeyboardEvent, index: number) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      commitDurationEdit(index);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      cancelDurationEdit();
+    }
+  }
+
+  // --- Svelte action: auto-focus and select input contents on mount ---
+
+  function autoFocusSelect(node: HTMLInputElement) {
+    // Use a microtask to ensure the DOM is settled before focusing
+    queueMicrotask(() => {
+      node.focus();
+      node.select();
+    });
+  }
+
+  // --- Context menu state ---
+  let contextMenu = $state<{ x: number; y: number } | null>(null);
+
+  function handleContextMenu(e: MouseEvent) {
+    e.preventDefault();
+    contextMenu = { x: e.clientX, y: e.clientY };
+  }
+
+  // --- Keyboard shortcuts (active when frame strip has focus) ---
+
+  function handleKeyDown(e: KeyboardEvent) {
+    const mod = e.ctrlKey || e.metaKey;
+
+    if (mod && e.key === 'c') {
+      e.preventDefault();
+      dispatchCmd('copy_frame', {});
+    } else if (mod && e.key === 'v') {
+      e.preventDefault();
+      dispatchCmd('paste_frame', {});
+    } else if (e.key === 'Delete') {
+      e.preventDefault();
+      if (frames.length > 1) {
+        dispatchCmd('delete_selected_frames', {});
+        generation++;
+      }
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class="frame-strip"
+  tabindex="0"
+  oncontextmenu={handleContextMenu}
+  onkeydown={handleKeyDown}
+>
+  <!-- Tag bars row -->
+  {#if visibleTags.length > 0}
+    <div class="tag-row">
+      {#each visibleTags as tag (tag.id)}
+        {@const startPx = tag.startFrame * (thumbWidth + 4)}
+        {@const spanPx = (tag.endFrame - tag.startFrame + 1) * (thumbWidth + 4) - 4}
+        <div
+          class="tag-bar"
+          style="left: {startPx}px; width: {Math.max(spanPx, 4)}px; background: {tag.color};"
+          title="{tag.name} (frames {tag.startFrame + 1}-{tag.endFrame + 1})"
+        >
+          <span class="tag-label">{tag.name}</span>
+        </div>
+      {/each}
+    </div>
+  {/if}
+
+  <!-- Main strip: scrollable frames + fixed controls -->
+  <div class="strip-body">
+    <!-- Scrollable frame list -->
+    <div class="frame-scroll" role="listbox" aria-label="Animation frames">
+      {#each frames as frame, i (frame.id)}
+        <div
+          class="frame-cell"
+          class:frame-cell--active={i === currentIndex}
+          class:frame-cell--selected={frameSelection.isSelected(i)}
+          class:frame-cell--drag-left={dragOverIndex === i && dragInsertSide === 'left'}
+          class:frame-cell--drag-right={dragOverIndex === i && dragInsertSide === 'right'}
+          class:frame-cell--dragging={dragFromIndex === i}
+          role="option"
+          aria-selected={i === currentIndex}
+          tabindex="-1"
+          onclick={(e) => { handleSelectFrame(i, e); }}
+          onpointerdown={(e) => { handleDragPointerDown(e, i); }}
+          onpointermove={(e) => { handleDragPointerMove(e, i); }}
+          onpointerup={handleDragPointerUp}
+        >
+          <canvas
+            bind:this={canvasEls[i]}
+            class="frame-thumb"
+            width={thumbWidth}
+            height={thumbHeight}
+          ></canvas>
+          <span class="frame-number">{i + 1}</span>
+          {#if editingDurationIndex === i}
+            <!-- Inline duration editor: input + "ms" suffix -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <span
+              class="duration-editor"
+              onclick={(e) => { e.stopPropagation(); }}
+              onpointerdown={(e) => { e.stopPropagation(); }}
+            >
+              <input
+                class="duration-input"
+                type="number"
+                min="1"
+                bind:value={editDurationValue}
+                onblur={() => { commitDurationEdit(i); }}
+                onkeydown={(e) => { handleDurationKeydown(e, i); }}
+                use:autoFocusSelect
+              />
+              <span class="duration-suffix">ms</span>
+            </span>
+          {:else}
+            <!-- Duration display: always shown, styled differently for custom overrides -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <span
+              class="frame-duration"
+              class:frame-duration--custom={hasCustomDuration(i)}
+              ondblclick={(e) => { e.stopPropagation(); startDurationEdit(i); }}
+            >{displayDuration(i)}</span>
+          {/if}
+        </div>
+      {/each}
+    </div>
+
+    <!-- Fixed controls -->
+    <div class="strip-controls">
+      <div class="frame-actions">
+        <button
+          class="action-btn"
+          title="Add Frame"
+          aria-label="Add Frame"
+          onclick={handleAddFrame}
+        ><PlusIcon /></button>
+        <button
+          class="action-btn"
+          title="Duplicate Frame"
+          aria-label="Duplicate Frame"
+          onclick={handleDuplicateFrame}
+        >
+          <svg class="icon" viewBox="0 0 16 16" width="14" height="14">
+            <rect x="1" y="3" width="10" height="10" rx="1" fill="none" stroke="currentColor" stroke-width="1.2"/>
+            <rect x="5" y="1" width="10" height="10" rx="1" fill="none" stroke="currentColor" stroke-width="1.2"/>
+          </svg>
+        </button>
+        <button
+          class="action-btn"
+          title="Delete Frame"
+          aria-label="Delete Frame"
+          onclick={handleDeleteFrame}
+          disabled={frames.length <= 1}
+        ><TrashIcon /></button>
+      </div>
+      <div class="fps-control">
+        <label class="fps-label" for="fps-input">FPS</label>
+        <input
+          id="fps-input"
+          class="fps-input"
+          type="number"
+          min="1"
+          max="120"
+          bind:value={fpsInputValue}
+          onblur={handleFpsChange}
+          onkeydown={handleFpsKeydown}
+        />
+      </div>
+    </div>
+  </div>
+</div>
+
+{#if contextMenu}
+  <ContextMenu
+    menuPath="context/frame"
+    x={contextMenu.x}
+    y={contextMenu.y}
+    onClose={() => contextMenu = null}
+  />
+{/if}
+
+<style>
+  .frame-strip {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background: var(--bg-toolbar);
+    border-top: 1px solid var(--border);
+    user-select: none;
+    font-size: var(--text-sm);
+    color: var(--text-primary);
+    outline: none;
+  }
+
+  /* --- Tag row --- */
+
+  .tag-row {
+    position: relative;
+    height: 14px;
+    flex-shrink: 0;
+    overflow: hidden;
+    margin: var(--space-1) 0 0 0;
+    padding-left: var(--space-2);
+  }
+
+  .tag-bar {
+    position: absolute;
+    top: 0;
+    height: 12px;
+    border-radius: var(--radius-sm);
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    opacity: 0.75;
+  }
+
+  .tag-label {
+    font-size: 9px;
+    font-weight: 600;
+    color: #fff;
+    padding: 0 var(--space-2);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+  }
+
+  /* --- Main body: scrollable frames + fixed controls --- */
+
+  .strip-body {
+    display: flex;
+    align-items: stretch;
+    height: 82px;
+  }
+
+  .frame-scroll {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2);
+    overflow-x: auto;
+    overflow-y: hidden;
+    flex: 1;
+    min-width: 0;
+  }
+
+  /* --- Individual frame cell --- */
+
+  .frame-cell {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-1);
+    padding: 3px;
+    border: 2px solid transparent;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    flex-shrink: 0;
+    position: relative;
+    transition: border-color var(--transition-fast);
+  }
+
+  .frame-cell:hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+
+  :global([data-theme="light"]) .frame-cell:hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+
+  .frame-cell--active {
+    border-color: var(--accent);
+    background: rgba(74, 158, 255, 0.1);
+  }
+
+  .frame-cell--selected:not(.frame-cell--active) {
+    outline: 2px solid var(--accent);
+    outline-offset: -2px;
+  }
+
+  .frame-cell--dragging {
+    opacity: 0.35;
+  }
+
+  /* Insertion indicator: a vertical accent-colored line shown between
+     frames during drag-to-reorder. Uses pseudo-elements positioned in
+     the gap between frame cells (offset by half the gap width). */
+
+  .frame-cell--drag-left::before,
+  .frame-cell--drag-right::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background: var(--accent);
+    border-radius: 1px;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .frame-cell--drag-left::before {
+    left: -5px;
+  }
+
+  .frame-cell--drag-right::after {
+    right: -5px;
+  }
+
+  .frame-thumb {
+    image-rendering: pixelated;
+    background: var(--bg-canvas);
+    border-radius: var(--radius-sm);
+  }
+
+  .frame-number {
+    font-size: 9px;
+    color: var(--text-secondary);
+    line-height: 1;
+  }
+
+  .frame-cell--active .frame-number {
+    color: var(--accent);
+    font-weight: 600;
+  }
+
+  .frame-duration {
+    font-size: 8px;
+    color: var(--text-secondary);
+    line-height: 1;
+    cursor: default;
+  }
+
+  .frame-duration--custom {
+    color: var(--accent);
+    font-weight: 700;
+  }
+
+  /* --- Inline duration editor --- */
+
+  .duration-editor {
+    display: flex;
+    align-items: center;
+    gap: 1px;
+  }
+
+  .duration-input {
+    width: 40px;
+    height: 16px;
+    background: var(--bg-primary);
+    border: 1px solid var(--accent);
+    border-radius: var(--radius-sm);
+    color: var(--text-primary);
+    font-size: 8px;
+    text-align: center;
+    padding: 0 2px;
+    /* Hide number input spinner arrows */
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
+
+  .duration-input::-webkit-inner-spin-button,
+  .duration-input::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  .duration-suffix {
+    font-size: 8px;
+    color: var(--text-secondary);
+    line-height: 1;
+  }
+
+  /* --- Fixed controls on the right --- */
+
+  .strip-controls {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-2) var(--space-3);
+    flex-shrink: 0;
+    border-left: 1px solid var(--border);
+  }
+
+  .frame-actions {
+    display: flex;
+    gap: var(--space-1);
+  }
+
+  .action-btn {
+    background: none;
+    border: 1px solid transparent;
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--text-xl);
+    padding: 0;
+    line-height: 1;
+  }
+
+  .action-btn:hover:not(:disabled) {
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    border-color: var(--border);
+  }
+
+  .action-btn:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+
+  .icon {
+    display: block;
+  }
+
+  .action-btn :global(svg) {
+    width: 14px;
+    height: 14px;
+  }
+
+  /* --- FPS control --- */
+
+  .fps-control {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .fps-label {
+    font-size: var(--text-xs);
+    font-weight: 600;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+  }
+
+  .fps-input {
+    width: 40px;
+    height: 22px;
+    background: var(--bg-primary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    color: var(--text-primary);
+    font-size: var(--text-sm);
+    text-align: center;
+    padding: 0 var(--space-1);
+    /* Hide number input spinner arrows */
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
+
+  .fps-input::-webkit-inner-spin-button,
+  .fps-input::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  .fps-input:focus-visible {
+    border-color: var(--accent);
+  }
+</style>