pixelweaver 0.1.0

package/src/lib/ui/RecoveryDialog.svelte

@@ -0,0 +1,295 @@
+<script lang="ts">
+  /**
+   * RecoveryDialog -- modal shown on startup when crash recovery data
+   * is available in IndexedDB.
+   *
+   * Reads recoveryState reactively. When `.available` is true, shows a
+   * dialog with the recovery timestamp and Restore / Discard buttons.
+   * "Restore" loads the snapshot and applies it to canvas, layer, and
+   * frame state. "Discard" clears the IDB data. Both close the dialog.
+   */
+
+  import { recoveryState } from '../recovery/recovery-state.svelte.js';
+  import {
+    loadSnapshot,
+    clearSnapshot,
+  } from '../recovery/idb-store.js';
+  import { canvasState } from '../canvas/canvas-state.svelte.js';
+  import * as layerTree from '../layers/layer-tree.svelte.js';
+  import * as frameModel from '../animation/frame-model.svelte.js';
+  import { PixelBuffer } from '../canvas/pixel-buffer.js';
+  import { SvelteMap } from 'svelte/reactivity';
+
+  // --- Local state ---
+
+  let dialogEl: HTMLDialogElement | undefined = $state();
+  let restoring = $state(false);
+  let errorMessage = $state('');
+
+  let open = $derived(recoveryState.available);
+
+  /** Format the recovery timestamp for display. */
+  let formattedTime = $derived.by(() => {
+    const ts = recoveryState.timestamp;
+    if (!ts) return 'Unknown';
+    const d = new Date(ts);
+    return d.toLocaleString();
+  });
+
+  /** Close the dialog by clearing the recovery-available flag. */
+  function close() {
+    recoveryState.setRecoveryAvailable(false);
+  }
+
+  /** Restore the snapshot: load from IDB, apply to app state, then close. */
+  async function handleRestore() {
+    if (restoring) return;
+    restoring = true;
+    errorMessage = '';
+
+    try {
+      const snapshot = await loadSnapshot();
+      if (!snapshot) {
+        throw new Error('Recovery data could not be loaded.');
+      }
+
+      // Apply the first (and currently only) canvas state from the snapshot.
+      const canvasId = Object.keys(snapshot.canvasStates)[0];
+      if (!canvasId) {
+        throw new Error('Recovery snapshot contains no canvas data.');
+      }
+
+      const saved = snapshot.canvasStates[canvasId];
+      if (!saved) throw new Error(`Recovery snapshot missing canvas "${canvasId}".`);
+
+      // 1. Restore canvas dimensions
+      canvasState.canvasWidth = saved.width;
+      canvasState.canvasHeight = saved.height;
+
+      // 2. Restore layer tree
+      layerTree.deserialize(saved.layerTree as Parameters<typeof layerTree.deserialize>[0]);
+
+      // 3. Rebuild frames with PixelBuffer instances from raw ArrayBuffers.
+      //    The snapshot stores one frame's worth of pixelData as
+      //    Record<string, ArrayBuffer> (raw RGBA bytes). We wrap each in a
+      //    PixelBuffer and construct a single frame.
+      const pixelData = new SvelteMap<string, PixelBuffer>();
+      for (const [layerId, rawBuffer] of Object.entries(saved.pixelData)) {
+        const bytes = new Uint8ClampedArray(rawBuffer);
+        pixelData.set(layerId, new PixelBuffer(saved.width, saved.height, bytes));
+      }
+
+      // Deserialize to empty state, then add a frame with the recovered data
+      frameModel.deserialize({
+        frames: [],
+        currentFrameIndex: 0,
+        globalFps: 12,
+        originX: 0,
+        originY: 0,
+      });
+
+      const frame = frameModel.addFrame();
+      for (const [layerId, buffer] of pixelData) {
+        frame.pixelData.set(layerId, buffer);
+      }
+
+      // 4. Clear the IDB data now that it has been restored
+      await clearSnapshot();
+      close();
+    } catch (err) {
+      errorMessage = err instanceof Error ? err.message : 'Restore failed.';
+    } finally {
+      restoring = false;
+    }
+  }
+
+  /** Discard the recovery data and close the dialog. */
+  async function handleDiscard() {
+    try {
+      await clearSnapshot();
+    } catch (err) {
+      errorMessage = err instanceof Error ? err.message : 'Failed to discard recovery data.';
+      return;
+    }
+    close();
+  }
+
+  // Sync native <dialog> open state with the derived `open` flag.
+  $effect(() => {
+    if (!dialogEl) return;
+    if (open && !dialogEl.open) {
+      dialogEl.showModal();
+    } else if (!open && dialogEl.open) {
+      dialogEl.close();
+    }
+  });
+
+  // Close on backdrop click without destroying recovery data -- the user
+  // may have clicked accidentally. Data stays in IDB for next launch.
+  function handleDialogClick(e: MouseEvent) {
+    if (e.target === dialogEl) {
+      close();
+    }
+  }
+</script>
+
+<dialog
+  bind:this={dialogEl}
+  class="pw-dialog"
+  onclick={handleDialogClick}
+  onclose={close}
+>
+  {#if open}
+    <div class="modal">
+      <h2 class="modal-title">Recover Unsaved Work</h2>
+
+      <p class="modal-message">
+        Recovery data was found from a previous session. Would you like to
+        restore it?
+      </p>
+
+      <div class="timestamp-row">
+        <span class="timestamp-label">Saved at</span>
+        <span class="timestamp-value">{formattedTime}</span>
+      </div>
+
+      {#if errorMessage}
+        <div class="error-msg">{errorMessage}</div>
+      {/if}
+
+      <div class="modal-actions">
+        <button class="btn btn--cancel" onclick={handleDiscard}>Discard</button>
+        <button
+          class="btn btn--primary"
+          onclick={handleRestore}
+          disabled={restoring}
+        >
+          {restoring ? 'Restoring...' : 'Restore'}
+        </button>
+      </div>
+    </div>
+  {/if}
+</dialog>
+
+<style>
+  .pw-dialog {
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    max-width: none;
+    max-height: none;
+    width: 100vw;
+    height: 100vh;
+    color: inherit;
+  }
+
+  .pw-dialog[open] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .pw-dialog::backdrop {
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  .modal {
+    background: var(--bg-panel);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    box-shadow: var(--shadow-md);
+    width: 420px;
+    max-width: 90vw;
+    padding: 24px;
+    color: var(--text-primary);
+  }
+
+  .modal-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 12px;
+    color: var(--text-primary);
+  }
+
+  .modal-message {
+    font-size: var(--text-lg);
+    color: var(--text-secondary);
+    line-height: 1.5;
+    margin-bottom: 16px;
+  }
+
+  .timestamp-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 16px;
+    padding: 10px 12px;
+    background: var(--bg-toolbar);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+  }
+
+  .timestamp-label {
+    font-size: var(--text-base);
+    color: var(--text-muted);
+    flex-shrink: 0;
+  }
+
+  .timestamp-value {
+    font-size: var(--text-lg);
+    color: var(--text-primary);
+    font-weight: 500;
+  }
+
+  .error-msg {
+    background: rgba(255, 74, 106, 0.1);
+    border: 1px solid var(--error);
+    border-radius: var(--radius-md);
+    color: var(--error);
+    font-size: var(--text-base);
+    padding: 8px 10px;
+    margin-bottom: 12px;
+  }
+
+  .modal-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-top: 20px;
+  }
+
+  .btn {
+    border: none;
+    border-radius: var(--radius-md);
+    font-size: var(--text-lg);
+    padding: 8px 20px;
+    cursor: pointer;
+    font-weight: 500;
+  }
+
+  .btn:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  .btn--cancel {
+    background: var(--bg-toolbar);
+    color: var(--text-secondary);
+    border: 1px solid var(--border);
+  }
+
+  .btn--cancel:hover {
+    background: var(--bg-primary);
+    color: var(--text-primary);
+  }
+
+  .btn--primary {
+    background: var(--accent);
+    color: #ffffff;
+  }
+
+  .btn--primary:hover:not(:disabled) {
+    background: var(--accent-hover);
+  }
+</style>

package/src/lib/ui/ResizeDialog.svelte

@@ -0,0 +1,416 @@
+<script lang="ts">
+  /**
+   * ResizeDialog -- modal for resizing the canvas with anchor placement.
+   *
+   * Allows the user to set new width/height and choose where the old
+   * content is anchored within the new canvas (3x3 grid). All pixel
+   * buffers across all frames and layers are resized accordingly.
+   */
+
+  import { canvasState, MAX_CANVAS_SIZE, MIN_CANVAS_SIZE } from '../canvas/canvas-state.svelte.js';
+  import { PixelBuffer } from '../canvas/pixel-buffer.js';
+  import * as layerTree from '../layers/layer-tree.svelte.js';
+  import * as frameModel from '../animation/frame-model.svelte.js';
+
+  // --- Props ---
+
+  interface Props {
+    open: boolean;
+    onClose: () => void;
+  }
+
+  let { open, onClose }: Props = $props();
+
+  // --- Anchor type ---
+
+  type Anchor =
+    | 'top-left' | 'top-center' | 'top-right'
+    | 'middle-left' | 'center' | 'middle-right'
+    | 'bottom-left' | 'bottom-center' | 'bottom-right';
+
+  // --- Local state ---
+
+  let dialogEl: HTMLDialogElement | undefined = $state();
+
+  let width = $state(32);
+  let height = $state(32);
+  let anchor = $state<Anchor>('center');
+
+  // --- Anchor grid definition ---
+
+  const anchorRows: Anchor[][] = [
+    ['top-left', 'top-center', 'top-right'],
+    ['middle-left', 'center', 'middle-right'],
+    ['bottom-left', 'bottom-center', 'bottom-right'],
+  ];
+
+  // --- Clamping helpers ---
+
+  function clampWidth(e: Event) {
+    const val = parseInt((e.target as HTMLInputElement).value, 10);
+    width = isNaN(val)
+      ? canvasState.canvasWidth
+      : Math.max(MIN_CANVAS_SIZE, Math.min(MAX_CANVAS_SIZE, val));
+  }
+
+  function clampHeight(e: Event) {
+    const val = parseInt((e.target as HTMLInputElement).value, 10);
+    height = isNaN(val)
+      ? canvasState.canvasHeight
+      : Math.max(MIN_CANVAS_SIZE, Math.min(MAX_CANVAS_SIZE, val));
+  }
+
+  // --- Anchor offset calculation ---
+
+  /**
+   * Compute the (x, y) offset where the old content should be placed
+   * in the new canvas, based on the anchor selection.
+   */
+  function getAnchorOffset(
+    oldW: number, oldH: number, newW: number, newH: number, a: Anchor,
+  ): { x: number; y: number } {
+    let x = 0;
+    let y = 0;
+
+    // Horizontal placement
+    if (a.includes('left')) {
+      x = 0;
+    } else if (a.includes('right')) {
+      x = newW - oldW;
+    } else {
+      // center
+      x = Math.floor((newW - oldW) / 2);
+    }
+
+    // Vertical placement
+    if (a.startsWith('top')) {
+      y = 0;
+    } else if (a.startsWith('bottom')) {
+      y = newH - oldH;
+    } else {
+      // middle / center
+      y = Math.floor((newH - oldH) / 2);
+    }
+
+    return { x, y };
+  }
+
+  // --- Resize logic ---
+
+  function handleResize() {
+    const oldW = canvasState.canvasWidth;
+    const oldH = canvasState.canvasHeight;
+    const newW = width;
+    const newH = height;
+
+    // Nothing to do if dimensions unchanged
+    if (newW === oldW && newH === oldH) {
+      onClose();
+      return;
+    }
+
+    const offset = getAnchorOffset(oldW, oldH, newW, newH, anchor);
+
+    // Resize all pixel buffers across all frames and layers
+    const allFrames = frameModel.getFrames();
+    const allPixelLayers = layerTree.getAllPixelLayers();
+
+    for (const frame of allFrames) {
+      for (const layer of allPixelLayers) {
+        const oldBuffer = frame.pixelData.get(layer.id);
+        if (!oldBuffer) continue;
+
+        const newBuffer = new PixelBuffer(newW, newH);
+
+        // Copy old pixels into the new buffer at the anchor offset.
+        // We iterate over old buffer pixels and place them at the
+        // offset position, clipping to new buffer bounds.
+        for (let sy = 0; sy < oldBuffer.height; sy++) {
+          for (let sx = 0; sx < oldBuffer.width; sx++) {
+            const dx = sx + offset.x;
+            const dy = sy + offset.y;
+            if (dx < 0 || dx >= newW || dy < 0 || dy >= newH) continue;
+            const [r, g, b, a] = oldBuffer.getPixel(sx, sy);
+            newBuffer.setPixel(dx, dy, r, g, b, a);
+          }
+        }
+
+        frame.pixelData.set(layer.id, newBuffer);
+      }
+    }
+
+    // Update canvas dimensions
+    canvasState.canvasWidth = newW;
+    canvasState.canvasHeight = newH;
+
+    onClose();
+  }
+
+  // Reset form values when dialog opens
+  $effect(() => {
+    if (open) {
+      width = canvasState.canvasWidth;
+      height = canvasState.canvasHeight;
+      anchor = 'center';
+    }
+  });
+
+  // Sync native <dialog> open state with the `open` prop.
+  $effect(() => {
+    if (!dialogEl) return;
+    if (open && !dialogEl.open) {
+      dialogEl.showModal();
+    } else if (!open && dialogEl.open) {
+      dialogEl.close();
+    }
+  });
+
+  // Close on backdrop click
+  function handleDialogClick(e: MouseEvent) {
+    if (e.target === dialogEl) {
+      onClose();
+    }
+  }
+</script>
+
+<dialog
+  bind:this={dialogEl}
+  class="pw-dialog"
+  onclick={handleDialogClick}
+  onclose={onClose}
+>
+  {#if open}
+    <div class="modal">
+      <h2 class="modal-title">Resize Canvas</h2>
+
+      <!-- Dimensions -->
+      <div class="form-row">
+        <label class="form-label" for="rc-width">Width</label>
+        <input
+          id="rc-width"
+          class="form-input"
+          type="number"
+          min={MIN_CANVAS_SIZE}
+          max={MAX_CANVAS_SIZE}
+          step="1"
+          bind:value={width}
+          onchange={clampWidth}
+        />
+        <span class="form-unit">px</span>
+      </div>
+
+      <div class="form-row">
+        <label class="form-label" for="rc-height">Height</label>
+        <input
+          id="rc-height"
+          class="form-input"
+          type="number"
+          min={MIN_CANVAS_SIZE}
+          max={MAX_CANVAS_SIZE}
+          step="1"
+          bind:value={height}
+          onchange={clampHeight}
+        />
+        <span class="form-unit">px</span>
+      </div>
+
+      <!-- Anchor selector -->
+      <div class="form-section">
+        <span class="form-label">Anchor</span>
+        <div class="anchor-grid">
+          {#each anchorRows as row, rowIdx (rowIdx)}
+            {#each row as cell (cell)}
+              <button
+                class="anchor-btn"
+                class:anchor-btn--active={anchor === cell}
+                title={cell}
+                aria-label={cell}
+                aria-pressed={anchor === cell}
+                onclick={() => anchor = cell}
+              >
+                <span class="anchor-dot"></span>
+              </button>
+            {/each}
+          {/each}
+        </div>
+      </div>
+
+      <!-- Actions -->
+      <div class="modal-actions">
+        <button class="btn btn--cancel" onclick={onClose}>Cancel</button>
+        <button class="btn btn--primary" onclick={handleResize}>Resize</button>
+      </div>
+    </div>
+  {/if}
+</dialog>
+
+<style>
+  /* Reuse the same dialog reset pattern as NewProjectDialog */
+  .pw-dialog {
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    max-width: none;
+    max-height: none;
+    width: 100vw;
+    height: 100vh;
+    color: inherit;
+  }
+
+  .pw-dialog[open] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .pw-dialog::backdrop {
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  .modal {
+    background: var(--bg-panel);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    box-shadow: var(--shadow-md);
+    width: 420px;
+    max-width: 90vw;
+    padding: 24px;
+    color: var(--text-primary);
+  }
+
+  .modal-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 20px;
+    color: var(--text-primary);
+  }
+
+  /* Form layout */
+  .form-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 12px;
+  }
+
+  .form-section {
+    margin-bottom: 16px;
+  }
+
+  .form-label {
+    width: 80px;
+    flex-shrink: 0;
+    font-size: var(--text-lg);
+    color: var(--text-secondary);
+  }
+
+  .form-input {
+    flex: 1;
+    background: var(--bg-toolbar);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    color: var(--text-primary);
+    font-size: var(--text-lg);
+    padding: 6px 8px;
+    max-width: 120px;
+  }
+
+  .form-input:focus-visible {
+    border-color: var(--accent);
+  }
+
+  .form-unit {
+    font-size: var(--text-base);
+    color: var(--text-muted);
+  }
+
+  /* 3x3 anchor grid */
+  .anchor-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 28px);
+    grid-template-rows: repeat(3, 28px);
+    gap: 4px;
+    margin-top: 6px;
+  }
+
+  .anchor-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    background: var(--bg-toolbar);
+    cursor: pointer;
+    padding: 0;
+    transition: background var(--transition-fast), border-color var(--transition-fast);
+  }
+
+  .anchor-btn:hover {
+    background: var(--bg-primary);
+    border-color: var(--accent);
+  }
+
+  .anchor-btn--active {
+    background: var(--accent);
+    border-color: var(--accent);
+  }
+
+  .anchor-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--text-muted);
+  }
+
+  .anchor-btn--active .anchor-dot {
+    background: #ffffff;
+  }
+
+  .anchor-btn:hover .anchor-dot {
+    background: var(--text-primary);
+  }
+
+  .anchor-btn--active:hover .anchor-dot {
+    background: #ffffff;
+  }
+
+  /* Action buttons */
+  .modal-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-top: 20px;
+  }
+
+  .btn {
+    border: none;
+    border-radius: var(--radius-md);
+    font-size: var(--text-lg);
+    padding: 8px 20px;
+    cursor: pointer;
+    font-weight: 500;
+  }
+
+  .btn--cancel {
+    background: var(--bg-toolbar);
+    color: var(--text-secondary);
+    border: 1px solid var(--border);
+  }
+
+  .btn--cancel:hover {
+    background: var(--bg-primary);
+    color: var(--text-primary);
+  }
+
+  .btn--primary {
+    background: var(--accent);
+    color: #ffffff;
+  }
+
+  .btn--primary:hover {
+    background: var(--accent-hover);
+  }
+</style>