pixelweaver 0.1.0

package/src/lib/variants/variant-randomizer.ts

@@ -0,0 +1,101 @@
+/**
+ * Variant Randomizer -- generates random palette variants via HSV shifts.
+ *
+ * Uses hue rotation, saturation shift, and value shift in HSV space for
+ * predictable and aesthetically coherent results. Optionally accepts a seed
+ * for reproducible random generation.
+ */
+
+import { hexToRgb, rgbToHex, rgbToHsv, hsvToRgb } from '../color/color-utils.js';
+import type { VariantPreset } from './variant-state.svelte.js';
+
+export interface RandomVariantOptions {
+  /** Max hue shift in degrees (default: 360) */
+  hueRange?: number;
+  /** Max saturation shift as percentage points (default: 30) */
+  satRange?: number;
+  /** Max value shift as percentage points (default: 20) */
+  valRange?: number;
+  /** Seed for reproducible randomness */
+  seed?: number;
+}
+
+/**
+ * Simple seeded PRNG (xorshift32).
+ * Returns a function that produces floats in [0, 1) on each call.
+ */
+function createRng(seed: number): () => number {
+  let state = seed | 0;
+  // Ensure non-zero state
+  if (state === 0) state = 1;
+  return () => {
+    state ^= state << 13;
+    state ^= state >> 17;
+    state ^= state << 5;
+    // Convert to unsigned 32-bit, then to [0, 1)
+    return (state >>> 0) / 4294967296;
+  };
+}
+
+/**
+ * Generate a random variant by shifting colors in each group.
+ *
+ * Each group gets a single uniform hue rotation (so all colors in a group
+ * shift together, preserving relative relationships). Saturation and value
+ * get per-color jitter within the specified range.
+ *
+ * @param groupPalettes - map of groupId -> extracted palette (hex strings)
+ * @param options - randomization parameters
+ * @returns a new VariantPreset with the randomized color overrides
+ */
+export function generateRandomVariant(
+  groupPalettes: Map<string, string[]>,
+  options?: RandomVariantOptions,
+): VariantPreset {
+  const hueRange = options?.hueRange ?? 360;
+  const satRange = options?.satRange ?? 30;
+  const valRange = options?.valRange ?? 20;
+
+  const rng =
+    options?.seed !== undefined
+      ? createRng(options.seed)
+      : () => Math.random();
+
+  const groupOverrides = new Map<string, Map<string, string>>();
+
+  for (const [groupId, palette] of groupPalettes) {
+    if (palette.length === 0) continue;
+
+    // One uniform hue rotation per group
+    const hueShift = (rng() - 0.5) * 2 * hueRange;
+    const colorMap = new Map<string, string>();
+
+    for (const hex of palette) {
+      const rgb = hexToRgb(hex);
+      const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
+
+      // Apply hue rotation (wraps around 0-360)
+      let newH = (hsv.h + hueShift) % 360;
+      if (newH < 0) newH += 360;
+
+      // Per-color saturation and value jitter
+      const satShift = (rng() - 0.5) * 2 * satRange;
+      const valShift = (rng() - 0.5) * 2 * valRange;
+      const newS = Math.max(0, Math.min(100, hsv.s + satShift));
+      const newV = Math.max(0, Math.min(100, hsv.v + valShift));
+
+      const newRgb = hsvToRgb(newH, newS, newV);
+      const newHex = rgbToHex(newRgb.r, newRgb.g, newRgb.b);
+
+      colorMap.set(hex, newHex);
+    }
+
+    groupOverrides.set(groupId, colorMap);
+  }
+
+  return {
+    id: crypto.randomUUID(),
+    name: 'Random Variant',
+    groupOverrides,
+  };
+}

package/src/lib/variants/variant-state.svelte.ts

@@ -0,0 +1,166 @@
+/**
+ * Variant State -- reactive Svelte 5 state for variant presets.
+ *
+ * A variant preset defines per-group color overrides (palette swaps).
+ * Multiple presets can coexist; only one is "active" for preview at a time.
+ *
+ * Uses $state runes for reactivity within the Svelte app.
+ */
+
+import { SvelteMap } from 'svelte/reactivity';
+
+// --- Types ---
+
+export interface VariantPreset {
+  id: string;
+  name: string;
+  /** Map of layer group ID -> color overrides for that group */
+  groupOverrides: Map<string, Map<string, string>>; // groupId -> (original hex -> replacement hex)
+}
+
+interface SerializedPreset {
+  id: string;
+  name: string;
+  groupOverrides: Record<string, Record<string, string>>;
+}
+
+interface SerializedState {
+  presets: SerializedPreset[];
+  activePresetId: string | null;
+}
+
+// --- Reactive state ---
+
+let presets = $state<VariantPreset[]>([]);
+let activePresetId = $state<string | null>(null);
+
+// --- Queries ---
+
+export function getPresets(): VariantPreset[] {
+  return presets;
+}
+
+export function getActivePresetId(): string | null {
+  return activePresetId;
+}
+
+export function getActivePreset(): VariantPreset | null {
+  if (activePresetId === null) return null;
+  return presets.find((p) => p.id === activePresetId) ?? null;
+}
+
+export function getPreset(id: string): VariantPreset | undefined {
+  return presets.find((p) => p.id === id);
+}
+
+// --- Mutations ---
+
+export function addPreset(name: string): VariantPreset {
+  const preset: VariantPreset = {
+    id: crypto.randomUUID(),
+    name,
+    groupOverrides: new SvelteMap(),
+  };
+  presets.push(preset);
+  return preset;
+}
+
+export function removePreset(id: string): void {
+  const index = presets.findIndex((p) => p.id === id);
+  if (index === -1) return;
+  presets.splice(index, 1);
+  if (activePresetId === id) {
+    activePresetId = null;
+  }
+}
+
+export function renamePreset(id: string, name: string): void {
+  const preset = presets.find((p) => p.id === id);
+  if (!preset) throw new Error(`Preset "${id}" not found.`);
+  preset.name = name;
+}
+
+export function setColorOverride(
+  presetId: string,
+  groupId: string,
+  originalColor: string,
+  newColor: string,
+): void {
+  const preset = presets.find((p) => p.id === presetId);
+  if (!preset) throw new Error(`Preset "${presetId}" not found.`);
+
+  let groupMap = preset.groupOverrides.get(groupId);
+  if (!groupMap) {
+    groupMap = new SvelteMap();
+    preset.groupOverrides.set(groupId, groupMap);
+  }
+  groupMap.set(originalColor, newColor);
+}
+
+export function removeColorOverride(
+  presetId: string,
+  groupId: string,
+  originalColor: string,
+): void {
+  const preset = presets.find((p) => p.id === presetId);
+  if (!preset) throw new Error(`Preset "${presetId}" not found.`);
+
+  const groupMap = preset.groupOverrides.get(groupId);
+  if (!groupMap) return;
+  groupMap.delete(originalColor);
+
+  // Clean up empty group maps
+  if (groupMap.size === 0) {
+    preset.groupOverrides.delete(groupId);
+  }
+}
+
+export function setActivePreset(id: string | null): void {
+  if (id !== null) {
+    const exists = presets.some((p) => p.id === id);
+    if (!exists) throw new Error(`Preset "${id}" not found.`);
+  }
+  activePresetId = id;
+}
+
+// --- Serialization ---
+
+export function serialize(): SerializedState {
+  return {
+    presets: presets.map((preset) => {
+      const groupOverrides: Record<string, Record<string, string>> = {};
+      for (const [groupId, colorMap] of preset.groupOverrides) {
+        groupOverrides[groupId] = Object.fromEntries(colorMap);
+      }
+      return {
+        id: preset.id,
+        name: preset.name,
+        groupOverrides,
+      };
+    }),
+    activePresetId,
+  };
+}
+
+export function deserialize(data: SerializedState): void {
+  presets = data.presets.map((sp) => {
+    const groupOverrides = new SvelteMap<string, Map<string, string>>();
+    for (const [groupId, overrides] of Object.entries(sp.groupOverrides)) {
+      groupOverrides.set(groupId, new SvelteMap(Object.entries(overrides)));
+    }
+    return {
+      id: sp.id,
+      name: sp.name,
+      groupOverrides,
+    };
+  });
+  activePresetId = data.activePresetId;
+}
+
+/**
+ * Reset all variant state. Intended for tests only.
+ */
+export function _resetForTesting(): void {
+  presets = [];
+  activePresetId = null;
+}

package/src/lib/variants/variant-state.test.ts

@@ -0,0 +1,138 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import * as vs from './variant-state.svelte.js';
+
+beforeEach(() => {
+  vs._resetForTesting();
+});
+
+describe('addPreset', () => {
+  it('should add a preset with the given name', () => {
+    const preset = vs.addPreset('Fire');
+    expect(preset.name).toBe('Fire');
+    expect(preset.id).toBeTruthy();
+    expect(preset.groupOverrides.size).toBe(0);
+    expect(vs.getPresets()).toHaveLength(1);
+  });
+
+  it('should add multiple presets', () => {
+    vs.addPreset('Fire');
+    vs.addPreset('Ice');
+    expect(vs.getPresets()).toHaveLength(2);
+  });
+});
+
+describe('removePreset', () => {
+  it('should remove an existing preset', () => {
+    const preset = vs.addPreset('Fire');
+    vs.removePreset(preset.id);
+    expect(vs.getPresets()).toHaveLength(0);
+  });
+
+  it('should clear active preset if the removed preset was active', () => {
+    const preset = vs.addPreset('Fire');
+    vs.setActivePreset(preset.id);
+    expect(vs.getActivePresetId()).toBe(preset.id);
+    vs.removePreset(preset.id);
+    expect(vs.getActivePresetId()).toBeNull();
+  });
+
+  it('should be a no-op for non-existent ID', () => {
+    vs.addPreset('Fire');
+    vs.removePreset('nonexistent');
+    expect(vs.getPresets()).toHaveLength(1);
+  });
+});
+
+describe('renamePreset', () => {
+  it('should rename an existing preset', () => {
+    const preset = vs.addPreset('Fire');
+    vs.renamePreset(preset.id, 'Inferno');
+    expect(vs.getPreset(preset.id)?.name).toBe('Inferno');
+  });
+
+  it('should throw for non-existent preset', () => {
+    expect(() => { vs.renamePreset('bad-id', 'Oops'); }).toThrow();
+  });
+});
+
+describe('color overrides', () => {
+  it('should set and get a color override', () => {
+    const preset = vs.addPreset('Fire');
+    vs.setColorOverride(preset.id, 'g1', '#FF0000', '#FFAA00');
+    const groupMap = preset.groupOverrides.get('g1');
+    expect(groupMap).toBeDefined();
+    expect(groupMap?.get('#FF0000')).toBe('#FFAA00');
+  });
+
+  it('should remove a color override', () => {
+    const preset = vs.addPreset('Fire');
+    vs.setColorOverride(preset.id, 'g1', '#FF0000', '#FFAA00');
+    vs.removeColorOverride(preset.id, 'g1', '#FF0000');
+    // The group map should be cleaned up entirely
+    expect(preset.groupOverrides.has('g1')).toBe(false);
+  });
+
+  it('should handle removing a non-existent override gracefully', () => {
+    const preset = vs.addPreset('Fire');
+    // Should not throw
+    vs.removeColorOverride(preset.id, 'g1', '#FF0000');
+    expect(preset.groupOverrides.size).toBe(0);
+  });
+});
+
+describe('activePreset', () => {
+  it('should start with no active preset', () => {
+    expect(vs.getActivePresetId()).toBeNull();
+    expect(vs.getActivePreset()).toBeNull();
+  });
+
+  it('should set and get active preset', () => {
+    const preset = vs.addPreset('Fire');
+    vs.setActivePreset(preset.id);
+    expect(vs.getActivePresetId()).toBe(preset.id);
+    expect(vs.getActivePreset()).toStrictEqual(preset);
+  });
+
+  it('should clear active preset with null', () => {
+    const preset = vs.addPreset('Fire');
+    vs.setActivePreset(preset.id);
+    vs.setActivePreset(null);
+    expect(vs.getActivePresetId()).toBeNull();
+  });
+
+  it('should throw when setting non-existent preset as active', () => {
+    expect(() => { vs.setActivePreset('bad-id'); }).toThrow();
+  });
+});
+
+describe('serialization', () => {
+  it('should roundtrip serialize/deserialize', () => {
+    const preset = vs.addPreset('Fire');
+    vs.setColorOverride(preset.id, 'g1', '#FF0000', '#FFAA00');
+    vs.setColorOverride(preset.id, 'g1', '#00FF00', '#AAFF00');
+    vs.setColorOverride(preset.id, 'g2', '#0000FF', '#00AAFF');
+    vs.setActivePreset(preset.id);
+
+    const serialized = vs.serialize();
+    vs._resetForTesting();
+    expect(vs.getPresets()).toHaveLength(0);
+
+    vs.deserialize(serialized);
+
+    expect(vs.getPresets()).toHaveLength(1);
+    const restored = vs.getPresets()[0];
+    if (!restored) throw new Error('missing restored preset');
+    expect(restored.name).toBe('Fire');
+    expect(restored.id).toBe(preset.id);
+    expect(restored.groupOverrides.get('g1')?.get('#FF0000')).toBe('#FFAA00');
+    expect(restored.groupOverrides.get('g1')?.get('#00FF00')).toBe('#AAFF00');
+    expect(restored.groupOverrides.get('g2')?.get('#0000FF')).toBe('#00AAFF');
+    expect(vs.getActivePresetId()).toBe(preset.id);
+  });
+
+  it('should serialize empty state correctly', () => {
+    const serialized = vs.serialize();
+    expect(serialized.presets).toEqual([]);
+    expect(serialized.activePresetId).toBeNull();
+  });
+});

package/src/main.ts

@@ -0,0 +1,14 @@
+import './app.css';
+import { mount } from 'svelte';
+import App from './App.svelte';
+import { bootstrap } from './lib/core/bootstrap.js';
+
+// Initialize the plugin system -- discovers and loads all plugins,
+// sets up tools, commands, shortcuts, sync, recovery, etc.
+bootstrap();
+
+const target = document.getElementById('app');
+if (!target) throw new Error('Mount target #app not found in document');
+const app = mount(App, { target });
+
+export default app;

package/src/vite-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
+/// <reference types="unplugin-icons/types/svelte" />

package/svelte.config.js

@@ -0,0 +1,2 @@
+/** @type {import("@sveltejs/vite-plugin-svelte").SvelteConfig} */
+export default {}