pixelweaver 0.1.0

package/src/lib/ui/NewProjectDialog.svelte

@@ -0,0 +1,803 @@
+<script lang="ts">
+  /**
+   * NewProjectDialog -- modal for creating a new project.
+   *
+   * Layout: Templates grid -> Recent Projects (if any) -> Custom size inputs.
+   * Resets canvas dimensions, clears all layers and frames, and
+   * optionally fills the initial buffer with a background color.
+   */
+
+  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';
+  import { hasUnsavedChanges, clearHistory } from '../core/dispatcher.js';
+  import { actionLog } from '../history/action-log.svelte.js';
+  import { saveState } from '../save/save-state.svelte.js';
+  import { getRecentProjects, type RecentProject } from '../save/recent-projects.js';
+  import { openProject } from '../save/storage.js';
+  import { applySnapshot } from '../save/project-snapshot.js';
+  import { addRecentProject } from '../save/recent-projects.js';
+  import { composite } from '../layers/compositor.js';
+  import { getLayers } from '../layers/layer-tree.svelte.js';
+  import { getCurrentFrame } from '../animation/frame-model.svelte.js';
+  import { setRenderBuffer } from '../canvas/render-state.svelte.js';
+
+  // --- Props ---
+
+  interface Props {
+    open: boolean;
+    onClose: () => void;
+  }
+
+  let { open, onClose }: Props = $props();
+
+  // --- Local state ---
+
+  let dialogEl: HTMLDialogElement | undefined = $state();
+
+  let width = $state(32);
+  let height = $state(32);
+  // "transparent" | "white" | "black"
+  let bgColor = $state<'transparent' | 'white' | 'black'>('transparent');
+
+  // Whether the unsaved-changes warning is shown instead of the main form
+  let showWarning = $state(false);
+  // When set, the warning will open the recent project instead of creating new
+  let pendingRecentProject = $state<RecentProject | null>(null);
+
+  let recentProjects = $state<RecentProject[]>([]);
+
+  // --- Templates ---
+
+  interface Template {
+    label: string;
+    w: number;
+    h: number;
+    bg: 'transparent' | 'white' | 'black';
+    /** Layer names to create (bottom to top). Omit for default single layer. */
+    layers?: string[];
+    /** Number of frames to create. Defaults to 1. */
+    frames?: number;
+  }
+
+  const templates: Template[] = [
+    { label: 'Character Sprite', w: 16, h: 32, bg: 'transparent', layers: ['fill', 'outline'], frames: 4 },
+    { label: 'Platformer Tile',  w: 16, h: 16, bg: 'transparent', layers: ['background', 'foreground'] },
+    { label: 'Icon',             w: 32, h: 32, bg: 'transparent', layers: ['base'] },
+    { label: 'Isometric Tile',   w: 64, h: 32, bg: 'transparent', layers: ['base', 'detail'] },
+    { label: 'HD Sprite',        w: 64, h: 64, bg: 'transparent', layers: ['fill', 'outline'], frames: 2 },
+    { label: 'Landscape',        w: 128, h: 64, bg: 'transparent', layers: ['sky', 'terrain', 'detail'] },
+  ];
+
+  // Track which template is currently selected (null = custom/preset)
+  let selectedTemplate = $state<Template | null>(null);
+
+  function applyTemplate(t: Template) {
+    width = t.w;
+    height = t.h;
+    bgColor = t.bg;
+    selectedTemplate = t;
+  }
+
+  // --- Size presets ---
+
+  const presets = [
+    { label: '8x8', w: 8, h: 8 },
+    { label: '16x16', w: 16, h: 16 },
+    { label: '32x32', w: 32, h: 32 },
+    { label: '64x64', w: 64, h: 64 },
+    { label: '128x128', w: 128, h: 128 },
+    { label: '256x256', w: 256, h: 256 },
+  ];
+
+  function applyPreset(w: number, h: number) {
+    width = w;
+    height = h;
+    selectedTemplate = null;
+  }
+
+  // --- Clamping helpers ---
+
+  function clampWidth(e: Event) {
+    const val = parseInt((e.target as HTMLInputElement).value, 10);
+    width = isNaN(val) ? 32 : Math.max(MIN_CANVAS_SIZE, Math.min(MAX_CANVAS_SIZE, val));
+    selectedTemplate = null;
+  }
+
+  function clampHeight(e: Event) {
+    const val = parseInt((e.target as HTMLInputElement).value, 10);
+    height = isNaN(val) ? 32 : Math.max(MIN_CANVAS_SIZE, Math.min(MAX_CANVAS_SIZE, val));
+    selectedTemplate = null;
+  }
+
+  // --- Create project ---
+
+  /**
+   * Gate creation behind an unsaved-changes check.
+   * If the undo stack has entries the project was modified; show warning first.
+   */
+  function handleCreateClick() {
+    if (hasUnsavedChanges()) {
+      pendingRecentProject = null;
+      showWarning = true;
+      return;
+    }
+    handleCreate();
+  }
+
+  function handleCreate() {
+    const tpl = selectedTemplate;
+    const layerNames = tpl?.layers ?? ['Layer 1'];
+    const frameCount = tpl?.frames ?? 1;
+
+    // 1. Set canvas dimensions
+    canvasState.canvasWidth = width;
+    canvasState.canvasHeight = height;
+
+    // 2. Reset layers to empty, then create template layers (bottom to top)
+    layerTree.deserialize({ layers: [], activeLayerId: '' });
+    const createdLayers = layerNames.map((name) => layerTree.addLayer(name));
+
+    // 3. Reset frames to empty, then create the required number of frames
+    //    with PixelBuffers for each layer
+    frameModel.deserialize({
+      frames: [],
+      currentFrameIndex: 0,
+      globalFps: 12,
+      originX: 0,
+      originY: 0,
+    });
+
+    for (let i = 0; i < frameCount; i++) {
+      const frame = frameModel.addFrame();
+      for (const layer of createdLayers) {
+        const buffer = new PixelBuffer(width, height);
+
+        // Fill background on the bottom-most layer only
+        if (layer === createdLayers[0]) {
+          if (bgColor === 'white') {
+            buffer.fill(255, 255, 255, 255);
+          } else if (bgColor === 'black') {
+            buffer.fill(0, 0, 0, 255);
+          }
+          // transparent: buffer is already zeroed
+        }
+
+        frame.pixelData.set(layer.id, buffer);
+      }
+    }
+
+    // 4. Clear undo/redo history and action log so stale commands from
+    //    the previous project don't trigger false unsaved-changes warnings
+    //    or corrupt state via undo replay.
+    clearHistory();
+    actionLog.clearAll();
+    saveState.reset();
+
+    // 5. Close the dialog
+    onClose();
+  }
+
+  // --- Open recent project ---
+
+  /** Flatten visible layers into the render buffer after loading a project. */
+  function recompositeAfterLoad(): void {
+    const currentFrame = getCurrentFrame();
+    const layers = getLayers();
+    const result = composite(
+      layers,
+      currentFrame.pixelData,
+      canvasState.canvasWidth,
+      canvasState.canvasHeight,
+    );
+    setRenderBuffer(result);
+  }
+
+  function handleRecentClick(project: RecentProject) {
+    if (hasUnsavedChanges()) {
+      pendingRecentProject = project;
+      showWarning = true;
+      return;
+    }
+    void openRecentProject(project);
+  }
+
+  async function openRecentProject(project: RecentProject) {
+    try {
+      // Use the storage open flow -- the path is stored but we need to
+      // re-read it from disk (desktop) or prompt (browser).
+      const result = await openProject();
+      if (!result) return; // user cancelled
+
+      applySnapshot(result.snapshot);
+      saveState.savePath = result.path;
+      saveState.saveFormat = result.format;
+      saveState.projectName = result.snapshot.name || 'Untitled';
+
+      recompositeAfterLoad();
+
+      const snap = result.snapshot;
+      addRecentProject({
+        name: snap.name || 'Untitled',
+        path: result.path,
+        timestamp: Date.now(),
+        dimensions: `${(snap.canvas as { width: number; height: number }).width}x${(snap.canvas as { width: number; height: number }).height}`,
+      });
+
+      onClose();
+    } catch (err) {
+      console.error('Failed to open recent project:', err);
+    }
+  }
+
+  /**
+   * Handle the warning confirmation -- either create new or open recent,
+   * depending on what triggered the warning.
+   */
+  function handleWarningConfirm() {
+    if (pendingRecentProject) {
+      const project = pendingRecentProject;
+      pendingRecentProject = null;
+      showWarning = false;
+      void openRecentProject(project);
+    } else {
+      handleCreate();
+    }
+  }
+
+  // --- Formatting helpers ---
+
+  function formatTimestamp(ts: number): string {
+    const now = Date.now();
+    const diffMs = now - ts;
+    const diffMin = Math.floor(diffMs / 60_000);
+    if (diffMin < 1) return 'Just now';
+    if (diffMin < 60) return `${diffMin}m ago`;
+    const diffHr = Math.floor(diffMin / 60);
+    if (diffHr < 24) return `${diffHr}h ago`;
+    const diffDay = Math.floor(diffHr / 24);
+    if (diffDay < 30) return `${diffDay}d ago`;
+    // Fall back to date string
+    return new Date(ts).toLocaleDateString();
+  }
+
+  // Reset form values and warning state when dialog opens
+  $effect(() => {
+    if (open) {
+      width = 32;
+      height = 32;
+      bgColor = 'transparent';
+      selectedTemplate = null;
+      showWarning = false;
+      pendingRecentProject = null;
+      recentProjects = getRecentProjects();
+    }
+  });
+
+  // Sync native <dialog> open state with the `open` prop.
+  // Calling showModal() on an already-open dialog throws; guard with `dialogEl.open`.
+  $effect(() => {
+    if (!dialogEl) return;
+    if (open && !dialogEl.open) {
+      dialogEl.showModal();
+    } else if (!open && dialogEl.open) {
+      dialogEl.close();
+    }
+  });
+
+  // Close on backdrop click: native <dialog> fires clicks on itself for the
+  // backdrop area (events on child content have a different target).
+  function handleDialogClick(e: MouseEvent) {
+    if (e.target === dialogEl) {
+      onClose();
+    }
+  }
+</script>
+
+<!--
+  The native <dialog> element handles focus trap, Escape key (cancel event),
+  and backdrop rendering for free. `onclose` fires on both user-initiated
+  (Escape) and programmatic close, which lets us keep the parent `open` prop
+  in sync. `onClose` is idempotent w.r.t. already-closed state, so the echo
+  from our own dialogEl.close() call is harmless.
+-->
+<dialog
+  bind:this={dialogEl}
+  class="pw-dialog"
+  onclick={handleDialogClick}
+  onclose={onClose}
+>
+  {#if open}
+    <div class="modal">
+      {#if showWarning}
+        <!-- Unsaved-changes confirmation step -->
+        <h2 class="modal-title">Unsaved Changes</h2>
+        <p class="warning-text">
+          You have unsaved changes. {pendingRecentProject ? 'Open this project' : 'Create new project'} anyway?
+        </p>
+        <div class="modal-actions">
+          <button class="btn btn--cancel" onclick={() => { showWarning = false; pendingRecentProject = null; }}>Cancel</button>
+          <button class="btn btn--danger" onclick={handleWarningConfirm}>
+            {pendingRecentProject ? 'Open' : 'Create'}
+          </button>
+        </div>
+      {:else}
+        <!-- Normal new-project form -->
+        <h2 class="modal-title">New Project</h2>
+
+        <!-- Templates -->
+        <div class="form-section">
+          <span class="section-heading">Templates</span>
+          <div class="template-grid">
+            {#each templates as t (t.label)}
+              <button
+                class="template-card"
+                class:template-card--active={selectedTemplate === t}
+                onclick={() => applyTemplate(t)}
+              >
+                <span class="template-name">{t.label}</span>
+                <span class="template-dims">{t.w}x{t.h}</span>
+                <span class="template-info">{t.layers?.length ?? 1}L / {t.frames ?? 1}F</span>
+              </button>
+            {/each}
+          </div>
+        </div>
+
+        <!-- Recent Projects -->
+        {#if recentProjects.length > 0}
+          <div class="form-section">
+            <span class="section-heading">Recent Projects</span>
+            <div class="recent-list">
+              {#each recentProjects as project (project.path)}
+                <button
+                  class="recent-item"
+                  onclick={() => handleRecentClick(project)}
+                  title={project.path}
+                >
+                  <span class="recent-name">{project.name}</span>
+                  <span class="recent-meta">
+                    <span class="recent-dims">{project.dimensions}</span>
+                    <span class="recent-time">{formatTimestamp(project.timestamp)}</span>
+                  </span>
+                </button>
+              {/each}
+            </div>
+          </div>
+        {/if}
+
+        <!-- Custom size heading -->
+        <span class="section-heading">Custom Size</span>
+
+        <!-- Dimensions -->
+        <div class="form-row">
+          <label class="form-label" for="np-width">Width</label>
+          <input
+            id="np-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="np-height">Height</label>
+          <input
+            id="np-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>
+
+        <!-- Presets -->
+        <div class="form-section">
+          <span class="form-label">Presets</span>
+          <div class="preset-group">
+            {#each presets as preset (preset.label)}
+              <button
+                class="preset-btn"
+                class:preset-btn--active={width === preset.w && height === preset.h}
+                onclick={() => { applyPreset(preset.w, preset.h); }}
+              >{preset.label}</button>
+            {/each}
+          </div>
+        </div>
+
+        <!-- Background color -->
+        <div class="form-section">
+          <span class="form-label">Background</span>
+          <div class="bg-options">
+            <button
+              class="bg-btn bg-btn--transparent"
+              class:bg-btn--active={bgColor === 'transparent'}
+              title="Transparent"
+              aria-label="Transparent background"
+              aria-pressed={bgColor === 'transparent'}
+              onclick={() => bgColor = 'transparent'}
+            >
+              <!-- Checkerboard pattern for transparent -->
+              <span class="checkerboard"></span>
+            </button>
+            <button
+              class="bg-btn bg-btn--white"
+              class:bg-btn--active={bgColor === 'white'}
+              title="White"
+              aria-label="White background"
+              aria-pressed={bgColor === 'white'}
+              onclick={() => bgColor = 'white'}
+            ></button>
+            <button
+              class="bg-btn bg-btn--black"
+              class:bg-btn--active={bgColor === 'black'}
+              title="Black"
+              aria-label="Black background"
+              aria-pressed={bgColor === 'black'}
+              onclick={() => bgColor = 'black'}
+            ></button>
+          </div>
+        </div>
+
+        <!-- Actions -->
+        <div class="modal-actions">
+          <button class="btn btn--cancel" onclick={onClose}>Cancel</button>
+          <button class="btn btn--primary" onclick={handleCreateClick}>Create</button>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</dialog>
+
+<style>
+  /* Reset native <dialog> UA styles so it fills the viewport and lets us
+     center the inner .modal via flexbox. The backdrop is styled separately. */
+  .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: 480px;
+    max-width: 90vw;
+    max-height: 85vh;
+    overflow-y: auto;
+    padding: 24px;
+    color: var(--text-primary);
+  }
+
+  .modal-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 20px;
+    color: var(--text-primary);
+  }
+
+  /* Section headings used for Templates, Recent, Custom Size */
+  .section-heading {
+    display: block;
+    font-size: var(--text-lg);
+    font-weight: 500;
+    color: var(--text-secondary);
+    margin-bottom: 8px;
+  }
+
+  /* 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);
+  }
+
+  /* Templates grid */
+  .template-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+  }
+
+  .template-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    padding: 10px 6px;
+    background: var(--bg-toolbar);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: background var(--transition-fast), border-color var(--transition-fast);
+  }
+
+  .template-card:hover {
+    background: var(--bg-primary);
+    border-color: var(--accent);
+  }
+
+  .template-card--active {
+    background: var(--accent);
+    border-color: var(--accent);
+  }
+
+  .template-card--active .template-name,
+  .template-card--active .template-dims,
+  .template-card--active .template-info {
+    color: #ffffff;
+  }
+
+  .template-name {
+    font-size: var(--text-base);
+    font-weight: 500;
+    color: var(--text-primary);
+    text-align: center;
+    line-height: 1.2;
+  }
+
+  .template-dims {
+    font-size: var(--text-sm, 11px);
+    color: var(--text-muted);
+  }
+
+  .template-info {
+    font-size: var(--text-sm, 11px);
+    color: var(--text-muted);
+  }
+
+  /* Recent projects list */
+  .recent-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    max-height: 160px;
+    overflow-y: auto;
+  }
+
+  .recent-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 6px 10px;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    text-align: left;
+    transition: background var(--transition-fast), border-color var(--transition-fast);
+  }
+
+  .recent-item:hover {
+    background: var(--bg-toolbar);
+    border-color: var(--border);
+  }
+
+  .recent-name {
+    font-size: var(--text-base);
+    color: var(--text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
+  .recent-meta {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+  }
+
+  .recent-dims {
+    font-size: var(--text-sm, 11px);
+    color: var(--text-muted);
+  }
+
+  .recent-time {
+    font-size: var(--text-sm, 11px);
+    color: var(--text-muted);
+  }
+
+  /* Presets */
+  .preset-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 6px;
+  }
+
+  .preset-btn {
+    background: var(--bg-toolbar);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    color: var(--text-secondary);
+    font-size: var(--text-base);
+    padding: 4px 10px;
+    cursor: pointer;
+    transition: background var(--transition-fast), border-color var(--transition-fast);
+  }
+
+  .preset-btn:hover {
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    border-color: var(--accent);
+  }
+
+  .preset-btn--active {
+    background: var(--accent);
+    color: #ffffff;
+    border-color: var(--accent);
+  }
+
+  .preset-btn--active:hover {
+    background: var(--accent-hover);
+  }
+
+  /* Background color options */
+  .bg-options {
+    display: flex;
+    gap: 8px;
+    margin-top: 6px;
+  }
+
+  .bg-btn {
+    width: 32px;
+    height: 32px;
+    border: 2px solid var(--border);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    padding: 0;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .bg-btn:hover {
+    border-color: var(--text-secondary);
+  }
+
+  .bg-btn--active {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 1px var(--accent);
+  }
+
+  .bg-btn--white {
+    background: #ffffff;
+  }
+
+  .bg-btn--black {
+    background: #000000;
+  }
+
+  .bg-btn--transparent {
+    background: #ffffff;
+  }
+
+  /* Checkerboard pattern for transparent indicator */
+  .checkerboard {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-image:
+      linear-gradient(45deg, #ccc 25%, transparent 25%),
+      linear-gradient(-45deg, #ccc 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, #ccc 75%),
+      linear-gradient(-45deg, transparent 75%, #ccc 75%);
+    background-size: 8px 8px;
+    background-position: 0 0, 0 4px, 4px -4px, -4px 0;
+  }
+
+  /* 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);
+  }
+
+  .btn--danger {
+    background: var(--danger, #d44);
+    color: #ffffff;
+  }
+
+  .btn--danger:hover {
+    background: var(--danger-hover, #b33);
+  }
+
+  .warning-text {
+    font-size: var(--text-lg);
+    color: var(--text-secondary);
+    margin-bottom: 16px;
+    line-height: 1.5;
+  }
+</style>