pixelweaver 0.1.0

package/src/lib/ui/LayerPanel.svelte

@@ -0,0 +1,810 @@
+<script lang="ts">
+  /**
+   * LayerPanel -- right sidebar panel for managing layers.
+   *
+   * Displays layers in reverse visual order (top layer first) with controls
+   * for visibility, opacity, locking, renaming, and drag-to-reorder.
+   * All mutations dispatch commands through the dispatcher for undo/redo.
+   */
+
+  import type { CommandType, ParamsOf } from '../core/command-params.js';
+  import type { Layer } from '../layers/layer-types.js';
+  import { dispatch } from '../core/dispatcher.js';
+  import {
+    getLayers,
+    getActiveLayerId,
+    getFlatList,
+  } from '../layers/layer-tree.svelte.js';
+  import { getCurrentFrame } from '../animation/frame-model.svelte.js';
+  import { canvasState } from '../canvas/canvas-state.svelte.js';
+  import ContextMenu from './ContextMenu.svelte';
+  import PlusIcon from '~icons/lucide/plus';
+  import CopyIcon from '~icons/lucide/copy-plus';
+  import TrashIcon from '~icons/lucide/trash-2';
+  import ChevronDown from '~icons/lucide/chevron-down';
+  import ChevronRight from '~icons/lucide/chevron-right';
+
+  // --- 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/layers',
+      version: '1.0.0',
+      params,
+      id: crypto.randomUUID(),
+      timestamp: Date.now(),
+    });
+  }
+
+  // --- Local UI state ---
+
+  let editingLayerId = $state<string | null>(null);
+  let editingName = $state('');
+  let editInputEl = $state<HTMLInputElement | null>(null);
+
+  // Drag state
+  let dragLayerId = $state<string | null>(null);
+  let dragOverLayerId = $state<string | null>(null);
+  let dragInsertPosition = $state<'above' | 'below' | null>(null);
+
+  // --- Layer thumbnail rendering ---
+
+  /** Thumbnail canvas size in CSS/device pixels. */
+  const THUMB_SIZE = 24;
+
+  /**
+   * Map of layer ID -> canvas element ref for thumbnails.
+   * Populated by bind:this in the template.
+   */
+  let thumbCanvasEls = $state<Map<string, HTMLCanvasElement>>(new Map());
+
+  /**
+   * Render a single layer's thumbnail onto its canvas element.
+   * Reads the layer's PixelBuffer from the current frame, converts to
+   * ImageData, and scales down with nearest-neighbor interpolation.
+   */
+  function renderLayerThumb(layerId: string, canvasEl: HTMLCanvasElement) {
+    const w = canvasState.canvasWidth;
+    const h = canvasState.canvasHeight;
+
+    canvasEl.width = THUMB_SIZE;
+    canvasEl.height = THUMB_SIZE;
+    const ctx = canvasEl.getContext('2d');
+    if (!ctx) return;
+    ctx.imageSmoothingEnabled = false;
+    ctx.clearRect(0, 0, THUMB_SIZE, THUMB_SIZE);
+
+    const frame = getCurrentFrame();
+    const buffer = frame.pixelData.get(layerId);
+    if (!buffer) return;
+
+    const imgData = buffer.toImageData();
+
+    // Draw full-size onto an offscreen canvas, then scale down
+    const offscreen = new OffscreenCanvas(w, h);
+    const offCtx = offscreen.getContext('2d');
+    if (!offCtx) return;
+    offCtx.putImageData(imgData, 0, 0);
+
+    // Scale proportionally to fit within THUMB_SIZE, centered
+    const scale = Math.min(THUMB_SIZE / w, THUMB_SIZE / h);
+    const dw = Math.round(w * scale);
+    const dh = Math.round(h * scale);
+    const dx = Math.round((THUMB_SIZE - dw) / 2);
+    const dy = Math.round((THUMB_SIZE - dh) / 2);
+
+    ctx.drawImage(offscreen, 0, 0, w, h, dx, dy, dw, dh);
+  }
+
+  /**
+   * Svelte action that registers a canvas element in the thumbCanvasEls map
+   * on mount and removes it on destroy. Used via use:trackThumbCanvas={layerId}.
+   */
+  function trackThumbCanvas(node: HTMLCanvasElement, layerId: string) {
+    thumbCanvasEls.set(layerId, node);
+    return {
+      destroy() {
+        thumbCanvasEls.delete(layerId);
+      },
+    };
+  }
+
+  /**
+   * Re-render all layer thumbnails when frame data, layer list, or
+   * canvas dimensions change. Follows the same $effect pattern as
+   * FrameStrip.svelte.
+   */
+  $effect(() => {
+    // Read reactive deps to trigger re-runs
+    const _layers = getLayers();
+    const _frame = getCurrentFrame();
+    const _pixelData = _frame.pixelData;
+    const _w = canvasState.canvasWidth;
+    const _h = canvasState.canvasHeight;
+
+    for (const [layerId, el] of thumbCanvasEls) {
+      renderLayerThumb(layerId, el);
+    }
+  });
+
+  // --- Derived state ---
+
+  // Layers in visual order (reversed: last array element = top layer shown first)
+  let reversedLayers = $derived([...getLayers()].reverse());
+
+  // Total pixel layer count (to prevent deleting the last one)
+  let pixelLayerCount = $derived(
+    getFlatList().filter((l) => l.type === 'pixel').length,
+  );
+
+  // --- Actions ---
+
+  function handleAddLayer() {
+    const count = getFlatList().length;
+    dispatchCmd('add_layer', { name: `Layer ${String(count + 1)}` });
+  }
+
+  function handleDeleteLayer() {
+    const activeId = getActiveLayerId();
+    if (!activeId) return;
+    // Prevent deleting the last pixel layer
+    if (pixelLayerCount <= 1) return;
+    dispatchCmd('remove_layer', { id: activeId });
+  }
+
+  function handleDuplicateLayer() {
+    const activeId = getActiveLayerId();
+    if (!activeId) return;
+    dispatchCmd('duplicate_layer', { id: activeId });
+  }
+
+  function handleSelectLayer(layer: Layer) {
+    if (layer.type === 'pixel') {
+      dispatchCmd('set_active_layer', { id: layer.id });
+    }
+  }
+
+  function handleToggleVisibility(e: MouseEvent, layer: Layer) {
+    e.stopPropagation();
+    dispatchCmd('set_layer_visibility', {
+      id: layer.id,
+      visible: !layer.visible,
+    });
+  }
+
+  function handleToggleLocked(e: MouseEvent, layer: Layer) {
+    e.stopPropagation();
+    dispatchCmd('set_layer_locked', { id: layer.id, locked: !layer.locked });
+  }
+
+  function handleToggleExpanded(e: MouseEvent, layer: Layer) {
+    e.stopPropagation();
+    dispatchCmd('toggle_expanded', { id: layer.id });
+  }
+
+  function handleOpacityChange(e: Event, layer: Layer) {
+    e.stopPropagation();
+    const value = parseInt((e.target as HTMLInputElement).value, 10);
+    dispatchCmd('set_layer_opacity', { id: layer.id, opacity: value });
+  }
+
+  function handleBlendModeChange(e: Event, layer: Layer) {
+    e.stopPropagation();
+    const mode = (e.target as HTMLSelectElement).value;
+    dispatchCmd('set_layer_blend_mode', { id: layer.id, mode });
+  }
+
+  // --- Inline rename ---
+
+  function startRename(layer: Layer) {
+    editingLayerId = layer.id;
+    editingName = layer.name;
+    // Focus the input after it renders
+    queueMicrotask(() => {
+      editInputEl?.focus();
+      editInputEl?.select();
+    });
+  }
+
+  function commitRename() {
+    if (editingLayerId && editingName.trim()) {
+      dispatchCmd('rename_layer', {
+        id: editingLayerId,
+        name: editingName.trim(),
+      });
+    }
+    editingLayerId = null;
+    editingName = '';
+  }
+
+  function handleRenameKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      commitRename();
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      editingLayerId = null;
+      editingName = '';
+    }
+  }
+
+  // --- Drag and drop reordering ---
+
+  /**
+   * Compute the actual array index from a visual (reversed) position.
+   * Visual index 0 = top of panel = last element in the layers array.
+   * We need to map to the real array index for move_layer.
+   */
+
+  function handlePointerDown(e: PointerEvent, layer: Layer) {
+    // Only start drag on primary button, and not on interactive child elements
+    if (e.button !== 0) return;
+    const target = e.target as HTMLElement;
+    if (target.closest('button, input, select')) return;
+
+    dragLayerId = layer.id;
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+  }
+
+  function handlePointerMove(e: PointerEvent, layer: Layer) {
+    if (!dragLayerId || dragLayerId === layer.id) {
+      // Compute insertion position relative to the row midpoint
+      if (dragLayerId && dragLayerId !== layer.id) {
+        const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+        const midY = rect.top + rect.height / 2;
+        dragOverLayerId = layer.id;
+        dragInsertPosition = e.clientY < midY ? 'above' : 'below';
+      }
+      return;
+    }
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    const midY = rect.top + rect.height / 2;
+    dragOverLayerId = layer.id;
+    dragInsertPosition = e.clientY < midY ? 'above' : 'below';
+  }
+
+  function handlePointerUp(_e: PointerEvent) {
+    if (dragLayerId && dragOverLayerId && dragInsertPosition) {
+      // Determine the target index in the real (non-reversed) layers array.
+      // The visual list is reversed, so "above" in the UI means a higher
+      // index in the real array, and "below" means a lower index.
+      const realLayers = getLayers();
+      const targetRealIndex = realLayers.findIndex(
+        (l) => l.id === dragOverLayerId,
+      );
+
+      if (targetRealIndex !== -1) {
+        // "above" visually = after in the real array (higher index)
+        // "below" visually = at the target's position in the real array
+        let newIndex: number;
+        if (dragInsertPosition === 'above') {
+          newIndex = targetRealIndex + 1;
+        } else {
+          newIndex = targetRealIndex;
+        }
+
+        // Adjust: if dragging from below the target (lower real index),
+        // the removal shifts indices down by 1
+        const sourceRealIndex = realLayers.findIndex(
+          (l) => l.id === dragLayerId,
+        );
+        if (sourceRealIndex < targetRealIndex) {
+          newIndex -= 1;
+        }
+
+        // Only dispatch if position actually changes
+        if (sourceRealIndex !== newIndex) {
+          dispatchCmd('move_layer', {
+            id: dragLayerId,
+            newParentId: null,
+            newIndex,
+          });
+        }
+      }
+    }
+
+    dragLayerId = null;
+    dragOverLayerId = null;
+    dragInsertPosition = null;
+  }
+
+  // --- 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 };
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="layer-panel" oncontextmenu={handleContextMenu}>
+  <!-- Header -->
+  <div class="layer-header">
+    <span class="layer-title">Layers</span>
+    <div class="layer-actions">
+      <button
+        class="action-btn"
+        title="Add Layer"
+        aria-label="Add Layer"
+        onclick={handleAddLayer}
+      ><PlusIcon /></button>
+      <button
+        class="action-btn"
+        title="Duplicate Layer"
+        aria-label="Duplicate Layer"
+        onclick={handleDuplicateLayer}
+        disabled={!getActiveLayerId()}
+      ><CopyIcon /></button>
+      <button
+        class="action-btn"
+        title="Delete Layer"
+        aria-label="Delete Layer"
+        onclick={handleDeleteLayer}
+        disabled={!getActiveLayerId() || pixelLayerCount <= 1}
+      ><TrashIcon /></button>
+    </div>
+  </div>
+
+  <!-- Layer list -->
+  <div class="layer-list">
+    {#each reversedLayers as layer (layer.id)}
+      <!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+      {@render layerRow(layer, 0)}
+    {/each}
+  </div>
+</div>
+
+{#if contextMenu}
+  <ContextMenu
+    menuPath="context/layer"
+    x={contextMenu.x}
+    y={contextMenu.y}
+    onClose={() => contextMenu = null}
+  />
+{/if}
+
+<!-- Recursive layer row snippet (handles groups and nesting) -->
+{#snippet layerRow(layer: Layer, depth: number)}
+  <div
+    class="layer-row"
+    class:layer-row--active={layer.id === getActiveLayerId()}
+    class:layer-row--drag-above={dragOverLayerId === layer.id && dragInsertPosition === 'above'}
+    class:layer-row--drag-below={dragOverLayerId === layer.id && dragInsertPosition === 'below'}
+    class:layer-row--dragging={dragLayerId === layer.id}
+    style:padding-left="{8 + depth * 16}px"
+    role="option"
+    aria-selected={layer.id === getActiveLayerId()}
+    tabindex="0"
+    onclick={() => { handleSelectLayer(layer); }}
+    ondblclick={() => { startRename(layer); }}
+    onpointerdown={(e) => { handlePointerDown(e, layer); }}
+    onpointermove={(e) => { handlePointerMove(e, layer); }}
+    onpointerup={handlePointerUp}
+  >
+    <!-- Layer thumbnail preview -->
+    {#if layer.type === 'pixel'}
+      <canvas
+        class="layer-thumb"
+        width={THUMB_SIZE}
+        height={THUMB_SIZE}
+        use:trackThumbCanvas={layer.id}
+      ></canvas>
+    {:else}
+      <!-- Group: small folder icon placeholder -->
+      <div class="layer-thumb layer-thumb--group">
+        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5">
+          <path d="M3 7v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-6l-2-2H5a2 2 0 0 0-2 2z"/>
+        </svg>
+      </div>
+    {/if}
+
+    <!-- Group expand/collapse arrow -->
+    {#if layer.type === 'group'}
+      <button
+        class="expand-btn"
+        title={layer.expanded ? 'Collapse' : 'Expand'}
+        aria-label={layer.expanded ? 'Collapse group' : 'Expand group'}
+        onclick={(e) => { handleToggleExpanded(e, layer); }}
+      >
+        {#if layer.expanded}
+          <ChevronDown />
+        {:else}
+          <ChevronRight />
+        {/if}
+      </button>
+    {/if}
+
+    <!-- Visibility toggle -->
+    <button
+      class="vis-btn"
+      title={layer.visible ? 'Hide' : 'Show'}
+      aria-label={layer.visible ? `Hide layer ${layer.name}` : `Show layer ${layer.name}`}
+      aria-pressed={layer.visible}
+      onclick={(e) => { handleToggleVisibility(e, layer); }}
+    >
+      {#if layer.visible}
+        <svg class="icon" viewBox="0 0 16 16" width="14" height="14">
+          <path d="M8 3C4 3 1 8 1 8s3 5 7 5 7-5 7-5-3-5-7-5z" fill="none" stroke="currentColor" stroke-width="1.5"/>
+          <circle cx="8" cy="8" r="2" fill="currentColor"/>
+        </svg>
+      {:else}
+        <svg class="icon" viewBox="0 0 16 16" width="14" height="14">
+          <path d="M8 3C4 3 1 8 1 8s3 5 7 5 7-5 7-5-3-5-7-5z" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.3"/>
+          <line x1="2" y1="2" x2="14" y2="14" stroke="currentColor" stroke-width="1.5"/>
+        </svg>
+      {/if}
+    </button>
+
+    <!-- Layer name (inline edit on double-click) -->
+    {#if editingLayerId === layer.id}
+      <input
+        bind:this={editInputEl}
+        class="rename-input"
+        type="text"
+        bind:value={editingName}
+        onblur={commitRename}
+        onkeydown={handleRenameKeydown}
+        onclick={(e) => { e.stopPropagation(); }}
+      />
+    {:else}
+      <span class="layer-name" class:layer-name--group={layer.type === 'group'}>
+        {layer.name}
+      </span>
+    {/if}
+
+    <!-- Blend mode and opacity (only for pixel layers) -->
+    {#if layer.type === 'pixel'}
+      <select
+        class="blend-select"
+        value={layer.blendMode}
+        title="Blend mode: {layer.blendMode}"
+        onchange={(e) => { handleBlendModeChange(e, layer); }}
+        onclick={(e) => { e.stopPropagation(); }}
+      >
+        <option value="normal">Normal</option>
+        <option value="multiply">Multiply</option>
+        <option value="screen">Screen</option>
+        <option value="overlay">Overlay</option>
+      </select>
+      <input
+        class="opacity-slider"
+        type="range"
+        min="0"
+        max="100"
+        value={layer.opacity}
+        title="Opacity: {layer.opacity}%"
+        oninput={(e) => { handleOpacityChange(e, layer); }}
+        onclick={(e) => { e.stopPropagation(); }}
+      />
+      <span class="opacity-value">{layer.opacity}</span>
+    {/if}
+
+    <!-- Lock toggle -->
+    <button
+      class="lock-btn"
+      title={layer.locked ? 'Unlock' : 'Lock'}
+      aria-label={layer.locked ? `Unlock layer ${layer.name}` : `Lock layer ${layer.name}`}
+      aria-pressed={layer.locked}
+      onclick={(e) => { handleToggleLocked(e, layer); }}
+    >
+      {#if layer.locked}
+        <svg class="icon" viewBox="0 0 16 16" width="12" height="12">
+          <rect x="3" y="7" width="10" height="7" rx="1" fill="currentColor" opacity="0.7"/>
+          <path d="M5 7V5a3 3 0 0 1 6 0v2" fill="none" stroke="currentColor" stroke-width="1.5"/>
+        </svg>
+      {:else}
+        <svg class="icon" viewBox="0 0 16 16" width="12" height="12">
+          <rect x="3" y="7" width="10" height="7" rx="1" fill="none" stroke="currentColor" stroke-width="1" opacity="0.3"/>
+          <path d="M5 7V5a3 3 0 0 1 6 0" fill="none" stroke="currentColor" stroke-width="1" opacity="0.3"/>
+        </svg>
+      {/if}
+    </button>
+  </div>
+
+  <!-- Render group children (also reversed for visual order) -->
+  {#if layer.type === 'group' && layer.expanded && layer.children}
+    {#each [...layer.children].reverse() as child (child.id)}
+      <!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+      {@render layerRow(child, depth + 1)}
+    {/each}
+  {/if}
+{/snippet}
+
+<style>
+  .layer-panel {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background: var(--bg-panel);
+    color: var(--text-primary);
+    font-size: var(--text-base);
+    user-select: none;
+  }
+
+  .layer-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px var(--space-3);
+    border-bottom: 1px solid var(--border);
+    background: var(--bg-toolbar);
+    flex-shrink: 0;
+  }
+
+  .layer-title {
+    font-weight: 600;
+    font-size: var(--text-sm);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-secondary);
+  }
+
+  .layer-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;
+  }
+
+  /* Layer list container -- scrollable */
+  .layer-list {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  /* Individual layer row */
+  .layer-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    height: 34px;
+    padding-right: 6px;
+    cursor: pointer;
+    border-bottom: 1px solid transparent;
+    border-top: 1px solid transparent;
+    transition: background var(--transition-fast);
+  }
+
+  .layer-row:hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+
+  :global([data-theme="light"]) .layer-row:hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+
+  .layer-row--active {
+    background: var(--accent);
+    color: #ffffff;
+  }
+
+  .layer-row--active:hover {
+    background: var(--accent-hover);
+  }
+
+  .layer-row--dragging {
+    opacity: 0.4;
+  }
+
+  .layer-row--drag-above {
+    border-top: 2px solid var(--accent);
+  }
+
+  .layer-row--drag-below {
+    border-bottom: 2px solid var(--accent);
+  }
+
+  /* Expand/collapse button for groups */
+  .expand-btn {
+    background: none;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 8px;
+    padding: 0;
+    flex-shrink: 0;
+  }
+
+  /* Visibility button */
+  .vis-btn {
+    background: none;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    flex-shrink: 0;
+  }
+
+  .vis-btn:hover {
+    color: var(--accent);
+  }
+
+  .layer-row--active .vis-btn:hover {
+    color: #ffffff;
+  }
+
+  /* Layer name */
+  .layer-name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--text-base);
+    min-width: 0;
+  }
+
+  .layer-name--group {
+    font-weight: 600;
+  }
+
+  /* Inline rename input */
+  .rename-input {
+    flex: 1;
+    background: var(--bg-primary);
+    border: 1px solid var(--accent);
+    border-radius: var(--radius-sm);
+    color: var(--text-primary);
+    font-size: var(--text-base);
+    padding: 1px var(--space-2);
+    height: 22px;
+    min-width: 0;
+  }
+
+  /* Blend mode dropdown */
+  .blend-select {
+    flex-shrink: 0;
+    width: 56px;
+    height: 18px;
+    font-size: var(--text-xs);
+    background: var(--bg-surface);
+    color: var(--text-primary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 0 2px;
+    cursor: pointer;
+    appearance: none;
+    -webkit-appearance: none;
+    /* Tiny dropdown arrow via inline SVG */
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 3L4 5.5L6.5 3' stroke='%23999' fill='none' stroke-width='1.2'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 2px center;
+    padding-right: 12px;
+  }
+
+  .blend-select:hover {
+    border-color: var(--accent);
+  }
+
+  .blend-select:focus {
+    outline: 1px solid var(--accent);
+    outline-offset: -1px;
+  }
+
+  .layer-row--active .blend-select {
+    background: rgba(255, 255, 255, 0.15);
+    color: #ffffff;
+    border-color: rgba(255, 255, 255, 0.3);
+  }
+
+  /* Opacity slider */
+  .opacity-slider {
+    width: 40px;
+    height: 12px;
+    flex-shrink: 0;
+    accent-color: var(--accent);
+    cursor: pointer;
+  }
+
+  .opacity-value {
+    width: 22px;
+    text-align: right;
+    font-size: var(--text-xs);
+    color: var(--text-secondary);
+    flex-shrink: 0;
+  }
+
+  .layer-row--active .opacity-value {
+    color: rgba(255, 255, 255, 0.7);
+  }
+
+  /* Lock button */
+  .lock-btn {
+    background: none;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    flex-shrink: 0;
+  }
+
+  .lock-btn:hover {
+    color: var(--accent);
+  }
+
+  .layer-row--active .lock-btn:hover {
+    color: #ffffff;
+  }
+
+  /* SVG icons */
+  .icon {
+    display: block;
+  }
+
+  .action-btn :global(svg) {
+    width: 14px;
+    height: 14px;
+  }
+
+  .expand-btn :global(svg) {
+    width: 12px;
+    height: 12px;
+  }
+
+  /* Layer thumbnail preview */
+  .layer-thumb {
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    image-rendering: pixelated;
+    background: var(--bg-canvas);
+  }
+
+  .layer-thumb--group {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-secondary);
+    background: none;
+    border-color: transparent;
+  }
+</style>