pixelweaver 0.1.0

package/src/lib/leveleditor/MapPropertiesPanel.svelte

@@ -0,0 +1,266 @@
+<script lang="ts">
+  /**
+   * MapPropertiesPanel -- dockable right-sidebar panel for editing
+   * level editor map properties: grid dimensions (cols/rows),
+   * tile size (width/height in px), and grid projection mode (iso/ortho).
+   *
+   * Reads from and writes to mapState reactive properties.
+   */
+
+  import { mapState, type GridMode } from './map-state.svelte.js';
+
+  // --- Clamping constants ---
+
+  const MIN_GRID = 1;
+  const MAX_GRID = 256;
+  const MIN_TILE = 4;
+  const MAX_TILE = 256;
+
+  // --- Clamping helpers ---
+
+  /** Clamp a parsed integer to [min, max], falling back to `fallback` on NaN. */
+  function clampInt(raw: string, min: number, max: number, fallback: number): number {
+    const v = parseInt(raw, 10);
+    return isNaN(v) ? fallback : Math.max(min, Math.min(max, v));
+  }
+
+  function handleCols(e: Event) {
+    mapState.gridCols = clampInt((e.target as HTMLInputElement).value, MIN_GRID, MAX_GRID, mapState.gridCols);
+  }
+
+  function handleRows(e: Event) {
+    mapState.gridRows = clampInt((e.target as HTMLInputElement).value, MIN_GRID, MAX_GRID, mapState.gridRows);
+  }
+
+  function handleTileWidth(e: Event) {
+    mapState.tileWidth = clampInt((e.target as HTMLInputElement).value, MIN_TILE, MAX_TILE, mapState.tileWidth);
+  }
+
+  function handleTileHeight(e: Event) {
+    mapState.tileHeight = clampInt((e.target as HTMLInputElement).value, MIN_TILE, MAX_TILE, mapState.tileHeight);
+  }
+
+  function setGridMode(mode: GridMode) {
+    mapState.gridMode = mode;
+  }
+</script>
+
+<div class="map-props">
+  <!-- Header -->
+  <div class="map-props__header">
+    <span class="map-props__title">Map Properties</span>
+  </div>
+
+  <div class="map-props__body">
+    <!-- Grid Dimensions -->
+    <section class="map-props__section">
+      <h3 class="map-props__section-title">Grid Dimensions</h3>
+
+      <div class="map-props__field">
+        <label class="map-props__label" for="mp-cols">Columns</label>
+        <input
+          id="mp-cols"
+          class="map-props__input"
+          type="number"
+          min={MIN_GRID}
+          max={MAX_GRID}
+          step="1"
+          value={mapState.gridCols}
+          onchange={handleCols}
+        />
+      </div>
+
+      <div class="map-props__field">
+        <label class="map-props__label" for="mp-rows">Rows</label>
+        <input
+          id="mp-rows"
+          class="map-props__input"
+          type="number"
+          min={MIN_GRID}
+          max={MAX_GRID}
+          step="1"
+          value={mapState.gridRows}
+          onchange={handleRows}
+        />
+      </div>
+    </section>
+
+    <!-- Tile Size -->
+    <section class="map-props__section">
+      <h3 class="map-props__section-title">Tile Size</h3>
+
+      <div class="map-props__field">
+        <label class="map-props__label" for="mp-tw">Width</label>
+        <input
+          id="mp-tw"
+          class="map-props__input"
+          type="number"
+          min={MIN_TILE}
+          max={MAX_TILE}
+          step="1"
+          value={mapState.tileWidth}
+          onchange={handleTileWidth}
+        />
+        <span class="map-props__unit">px</span>
+      </div>
+
+      <div class="map-props__field">
+        <label class="map-props__label" for="mp-th">Height</label>
+        <input
+          id="mp-th"
+          class="map-props__input"
+          type="number"
+          min={MIN_TILE}
+          max={MAX_TILE}
+          step="1"
+          value={mapState.tileHeight}
+          onchange={handleTileHeight}
+        />
+        <span class="map-props__unit">px</span>
+      </div>
+    </section>
+
+    <!-- Grid Mode -->
+    <section class="map-props__section">
+      <h3 class="map-props__section-title">Grid Mode</h3>
+
+      <div class="map-props__toggle-group">
+        <button
+          class="map-props__toggle"
+          class:map-props__toggle--active={mapState.gridMode === 'ortho'}
+          onclick={() => setGridMode('ortho')}
+        >Orthogonal</button>
+        <button
+          class="map-props__toggle"
+          class:map-props__toggle--active={mapState.gridMode === 'iso'}
+          onclick={() => setGridMode('iso')}
+        >Isometric</button>
+      </div>
+    </section>
+  </div>
+</div>
+
+<style>
+  .map-props {
+    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;
+  }
+
+  .map-props__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;
+  }
+
+  .map-props__title {
+    font-weight: 600;
+    font-size: var(--text-sm);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-secondary);
+  }
+
+  .map-props__body {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: var(--space-2) var(--space-3);
+  }
+
+  .map-props__section {
+    margin-bottom: var(--space-3);
+  }
+
+  .map-props__section-title {
+    margin: 0 0 var(--space-2) 0;
+    font-size: var(--text-sm);
+    font-weight: 600;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+  }
+
+  .map-props__field {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    margin-bottom: var(--space-2);
+  }
+
+  .map-props__label {
+    width: 64px;
+    flex-shrink: 0;
+    font-size: var(--text-sm);
+    color: var(--text-secondary);
+  }
+
+  .map-props__input {
+    flex: 1;
+    max-width: 80px;
+    background: var(--bg-toolbar);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    color: var(--text-primary);
+    font-size: var(--text-sm);
+    padding: 4px 6px;
+  }
+
+  .map-props__input:focus-visible {
+    border-color: var(--accent);
+    outline: none;
+  }
+
+  .map-props__unit {
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+  }
+
+  /* Segmented toggle for grid mode */
+  .map-props__toggle-group {
+    display: flex;
+    gap: 0;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+  }
+
+  .map-props__toggle {
+    flex: 1;
+    background: var(--bg-toolbar);
+    border: none;
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+    padding: 5px 8px;
+    cursor: pointer;
+    transition: background 150ms ease, color 150ms ease;
+  }
+
+  .map-props__toggle:not(:last-child) {
+    border-right: 1px solid var(--border);
+  }
+
+  .map-props__toggle:hover {
+    background: var(--bg-primary);
+    color: var(--text-primary);
+  }
+
+  .map-props__toggle--active {
+    background: var(--accent);
+    color: #ffffff;
+  }
+
+  .map-props__toggle--active:hover {
+    background: var(--accent-hover);
+    color: #ffffff;
+  }
+</style>

package/src/lib/leveleditor/TilePickerPanel.svelte

@@ -0,0 +1,324 @@
+<!--
+  TilePickerPanel -- right-sidebar dock panel that displays all tile sources
+  as a scrollable grid of thumbnails.
+
+  Auto-registers every canvas frame from the current project as a tile source
+  in the tile-source-registry. Clicking a thumbnail sets mapState.activeTile
+  so the level editor viewport paints with it.
+-->
+<script lang="ts">
+  import { getFrames } from '../animation/frame-model.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 { tileSourceRegistry, tileRefId } from './tile-source-registry.svelte.js';
+  import { mapState, type TilePlacement } from './map-state.svelte.js';
+  import { placementToTileRefId } from './tile-source-registry.svelte.js';
+
+  // Thumbnail canvas size in CSS pixels.
+  const THUMB_SIZE = 48;
+
+  // --- Auto-registration of canvas frames as tile sources ---
+
+  /**
+   * Reactively register every frame in the current project as a tile source.
+   * Each frame at index i is registered under id "default:canvas:{i}".
+   * The getter composites all visible layers for that frame, so edits to the
+   * sprite propagate live to the level editor.
+   *
+   * Also cleans up stale registrations when frames are removed.
+   */
+  $effect(() => {
+    const frames = getFrames();
+    const w = canvasState.canvasWidth;
+    const h = canvasState.canvasHeight;
+
+    // Register (or re-register) each frame.
+    for (let i = 0; i < frames.length; i++) {
+      const frame = frames[i];
+      if (!frame) continue;
+      const id = tileRefId({ projectRef: 'default', canvasRef: 'canvas', frameIndex: i });
+
+      // The getter captures the frame reference and reads layers at call time,
+      // so it always returns the freshest composite.
+      tileSourceRegistry.register(id, () => {
+        return composite(getLayers(), frame.pixelData, w, h);
+      });
+    }
+
+    // Unregister tile sources for frames that no longer exist (e.g. if the
+    // user deleted a frame, the old higher-index entries become stale).
+    for (const existingId of tileSourceRegistry.list()) {
+      if (!existingId.startsWith('default:canvas:')) continue;
+      const part = existingId.split(':')[2];
+      if (part === undefined) continue;
+      const idx = parseInt(part, 10);
+      if (idx >= frames.length) {
+        tileSourceRegistry.unregister(existingId);
+      }
+    }
+  });
+
+  // --- Thumbnail rendering ---
+
+  /**
+   * Map of tile ref id -> canvas element for thumbnail rendering.
+   * Populated via the Svelte action below.
+   */
+  let thumbCanvasEls = $state<Map<string, HTMLCanvasElement>>(new Map());
+
+  /**
+   * Svelte action that registers a canvas element in the thumbCanvasEls map
+   * on mount and removes it on destroy.
+   */
+  function trackThumbCanvas(node: HTMLCanvasElement, tileId: string) {
+    thumbCanvasEls.set(tileId, node);
+    return {
+      destroy() {
+        thumbCanvasEls.delete(tileId);
+      },
+    };
+  }
+
+  /**
+   * Render a tile thumbnail onto a canvas element using nearest-neighbor
+   * scaling to preserve pixel art crispness.
+   */
+  function renderThumb(tileId: string, canvasEl: HTMLCanvasElement): void {
+    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 buffer = tileSourceRegistry.get(tileId);
+    if (!buffer) return;
+
+    const imgData = buffer.toImageData();
+
+    // Draw at native size onto an offscreen canvas, then scale down.
+    const offscreen = new OffscreenCanvas(buffer.width, buffer.height);
+    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 / buffer.width, THUMB_SIZE / buffer.height);
+    const dw = Math.round(buffer.width * scale);
+    const dh = Math.round(buffer.height * scale);
+    const dx = Math.round((THUMB_SIZE - dw) / 2);
+    const dy = Math.round((THUMB_SIZE - dh) / 2);
+
+    ctx.drawImage(offscreen, 0, 0, buffer.width, buffer.height, dx, dy, dw, dh);
+  }
+
+  /**
+   * Re-render all thumbnails reactively. Triggers when frames, layers,
+   * canvas dimensions, or the registry contents change.
+   */
+  $effect(() => {
+    // Read reactive dependencies to trigger re-runs.
+    const _frames = getFrames();
+    const _layers = getLayers();
+    const _w = canvasState.canvasWidth;
+    const _h = canvasState.canvasHeight;
+    // Touch the registry to react to registration changes.
+    const _all = tileSourceRegistry.getAll();
+
+    for (const [tileId, el] of thumbCanvasEls) {
+      renderThumb(tileId, el);
+    }
+  });
+
+  // --- Derived state ---
+
+  /** List of tile source ids that belong to the current project's canvases. */
+  let canvasTileIds = $derived.by(() => {
+    // Touch reactive dependencies so the derivation re-runs.
+    const _all = tileSourceRegistry.getAll();
+    return tileSourceRegistry
+      .list()
+      .filter((id) => id.startsWith('default:canvas:'))
+      .sort((a, b) => {
+        const ai = parseInt(a.split(':')[2] ?? '0', 10);
+        const bi = parseInt(b.split(':')[2] ?? '0', 10);
+        return ai - bi;
+      });
+  });
+
+  /** The ref id of the currently active tile (or null). */
+  let activeTileRefId = $derived(
+    mapState.activeTile ? placementToTileRefId(mapState.activeTile) : null,
+  );
+
+  // --- Selection ---
+
+  /**
+   * Select a tile by frame index, setting mapState.activeTile to the
+   * corresponding TilePlacement.
+   */
+  function selectTile(tileId: string): void {
+    // Parse the frame index from the tile id ("default:canvas:N").
+    const parts = tileId.split(':');
+    const frameIndex = parseInt(parts[2] ?? '0', 10);
+    const placement: TilePlacement = {
+      projectRef: 'default',
+      canvasRef: 'canvas',
+      frameIndex,
+      height: 0,
+    };
+    mapState.activeTile = placement;
+  }
+
+  /**
+   * Extract a human-readable label from a tile id.
+   * "default:canvas:0" -> "Frame 0", etc.
+   */
+  function tileLabel(tileId: string): string {
+    const idx = parseInt(tileId.split(':')[2] ?? '0', 10);
+    return `Frame ${String(idx)}`;
+  }
+</script>
+
+<div class="tile-picker">
+  <div class="tile-picker__header">
+    <span class="tile-picker__title">Tiles</span>
+  </div>
+
+  {#if canvasTileIds.length === 0}
+    <div class="tile-picker__empty">
+      <p class="tile-picker__empty-text">Draw sprites to use as tiles</p>
+    </div>
+  {:else}
+    <div class="tile-picker__grid">
+      {#each canvasTileIds as tileId (tileId)}
+        <button
+          class="tile-picker__item"
+          class:tile-picker__item--active={activeTileRefId === tileId}
+          title={tileLabel(tileId)}
+          onclick={() => { selectTile(tileId); }}
+        >
+          <canvas
+            class="tile-picker__thumb"
+            width={THUMB_SIZE}
+            height={THUMB_SIZE}
+            use:trackThumbCanvas={tileId}
+          ></canvas>
+          <span class="tile-picker__label">{tileLabel(tileId)}</span>
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .tile-picker {
+    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;
+  }
+
+  .tile-picker__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;
+  }
+
+  .tile-picker__title {
+    font-weight: 600;
+    font-size: var(--text-sm);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-secondary);
+  }
+
+  .tile-picker__empty {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-4);
+    text-align: center;
+  }
+
+  .tile-picker__empty-text {
+    margin: 0;
+    font-size: var(--text-sm);
+    color: var(--text-muted);
+    line-height: 1.4;
+  }
+
+  .tile-picker__grid {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: var(--space-2);
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
+    gap: var(--space-2);
+    align-content: start;
+  }
+
+  .tile-picker__item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
+    padding: 3px;
+    background: none;
+    border: 2px solid transparent;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    transition: border-color 150ms ease, background 150ms ease;
+  }
+
+  .tile-picker__item:hover {
+    background: rgba(255, 255, 255, 0.06);
+    border-color: var(--border);
+  }
+
+  :global([data-theme="light"]) .tile-picker__item:hover {
+    background: rgba(0, 0, 0, 0.06);
+  }
+
+  .tile-picker__item--active {
+    border-color: var(--accent);
+    background: rgba(74, 158, 255, 0.1);
+  }
+
+  .tile-picker__item--active:hover {
+    border-color: var(--accent-hover);
+  }
+
+  .tile-picker__thumb {
+    width: 48px;
+    height: 48px;
+    image-rendering: pixelated;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    background: var(--bg-canvas);
+  }
+
+  .tile-picker__label {
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+
+  .tile-picker__item--active .tile-picker__label {
+    color: var(--accent);
+  }
+</style>

package/src/lib/leveleditor/depth-sort.test.ts

@@ -0,0 +1,70 @@
+import { describe, it, expect } from 'vitest';
+import { depthSort, type RenderItem } from './depth-sort.js';
+
+describe('depthSort', () => {
+  it('should sort items by isometric depth (col+row sum)', () => {
+    const items: RenderItem[] = [
+      { type: 'tile', col: 3, row: 3, height: 0, layerIndex: 0, data: {} as never },
+      { type: 'tile', col: 0, row: 0, height: 0, layerIndex: 0, data: {} as never },
+      { type: 'tile', col: 1, row: 1, height: 0, layerIndex: 0, data: {} as never },
+    ];
+
+    const sorted = depthSort(items);
+    // (0,0) sum=0, (1,1) sum=2, (3,3) sum=6
+    expect(sorted[0]?.col).toBe(0);
+    expect(sorted[1]?.col).toBe(1);
+    expect(sorted[2]?.col).toBe(3);
+  });
+
+  it('should sort by height when col+row sums are equal', () => {
+    const items: RenderItem[] = [
+      { type: 'tile', col: 2, row: 2, height: 3, layerIndex: 0, data: {} as never },
+      { type: 'tile', col: 2, row: 2, height: 0, layerIndex: 0, data: {} as never },
+      { type: 'tile', col: 2, row: 2, height: 1, layerIndex: 0, data: {} as never },
+    ];
+
+    const sorted = depthSort(items);
+    expect(sorted[0]?.height).toBe(0);
+    expect(sorted[1]?.height).toBe(1);
+    expect(sorted[2]?.height).toBe(3);
+  });
+
+  it('should sort by layer index when depth and height are equal', () => {
+    const items: RenderItem[] = [
+      { type: 'tile', col: 1, row: 1, height: 0, layerIndex: 2, data: {} as never },
+      { type: 'tile', col: 1, row: 1, height: 0, layerIndex: 0, data: {} as never },
+      { type: 'tile', col: 1, row: 1, height: 0, layerIndex: 1, data: {} as never },
+    ];
+
+    const sorted = depthSort(items);
+    expect(sorted[0]?.layerIndex).toBe(0);
+    expect(sorted[1]?.layerIndex).toBe(1);
+    expect(sorted[2]?.layerIndex).toBe(2);
+  });
+
+  it('should not mutate the input array', () => {
+    const items: RenderItem[] = [
+      { type: 'tile', col: 5, row: 5, height: 0, layerIndex: 0, data: {} as never },
+      { type: 'tile', col: 0, row: 0, height: 0, layerIndex: 0, data: {} as never },
+    ];
+    const original = [...items];
+    depthSort(items);
+    expect(items[0]).toBe(original[0]);
+    expect(items[1]).toBe(original[1]);
+  });
+
+  it('should handle mixed tile and entity items', () => {
+    const items: RenderItem[] = [
+      { type: 'entity', col: 3, row: 0, height: 0, layerIndex: 1, data: {} as never },
+      { type: 'tile', col: 0, row: 3, height: 0, layerIndex: 0, data: {} as never },
+      { type: 'tile', col: 0, row: 0, height: 0, layerIndex: 0, data: {} as never },
+    ];
+
+    const sorted = depthSort(items);
+    // (0,0) sum=0 first, then (3,0) and (0,3) sum=3 -- sorted by layerIndex
+    expect(sorted[0]?.col).toBe(0);
+    expect(sorted[0]?.row).toBe(0);
+    expect(sorted[1]?.type).toBe('tile');   // layerIndex 0
+    expect(sorted[2]?.type).toBe('entity'); // layerIndex 1
+  });
+});

package/src/lib/leveleditor/depth-sort.ts

@@ -0,0 +1,39 @@
+/**
+ * Depth Sort -- sorts isometric render items for correct painter's-order rendering.
+ *
+ * Combines tile and entity items from visible map layers and sorts them so that
+ * farther objects (smaller col + row sum) render first, with layer index and
+ * height as tiebreakers.
+ */
+
+import type { TilePlacement, EntityPlacement } from './map-state.svelte.js';
+import { isoDepthCompare } from '../iso/iso-math.js';
+
+/** A single renderable item ready for depth sorting. */
+export interface RenderItem {
+  type: 'tile' | 'entity';
+  col: number;
+  row: number;
+  height: number;
+  layerIndex: number;   // map layer index for secondary sort
+  data: TilePlacement | EntityPlacement;
+}
+
+/**
+ * Sort all visible items for correct isometric rendering.
+ *
+ * Primary sort: isometric depth (col + row sum, then height via isoDepthCompare).
+ * Secondary sort: layer index (lower layers render first).
+ *
+ * Returns a new sorted array; does not mutate the input.
+ */
+export function depthSort(items: RenderItem[]): RenderItem[] {
+  return [...items].sort((a, b) => {
+    // Primary: isometric depth (farther from camera renders first)
+    const depthCmp = isoDepthCompare(a, b);
+    if (depthCmp !== 0) return depthCmp;
+
+    // Secondary: layer ordering (lower index = rendered first = behind)
+    return a.layerIndex - b.layerIndex;
+  });
+}