Per-glyph layers with Figma-style move tool

src/config/index.ts

@@ -1,6 +1,7 @@
 export * from './atlas';
 export * from './editor-layout';
 export * from './editor-state';
+export * from './layers';
 export * from './pixel-editor';
 export * from './preview';
 export * from './project-defaults';

src/config/layers.ts

@@ -0,0 +1,12 @@
+export const MAX_LAYERS_PER_GLYPH = 5;
+
+// Editor tints for layers. Index 0 is white so the auto-created base layer
+// renders identically to the final exported ink; subsequent indices are
+// distinct hues so additional layers stand out from each other and the base.
+export const DEFAULT_LAYER_PALETTE = [
+  'rgb(255,255,255)',
+  'oklch(0.78 0.17 30)',
+  'oklch(0.80 0.16 200)',
+  'oklch(0.83 0.18 120)',
+  'oklch(0.75 0.18 270)',
+] as const;

src/core/atlas/pack.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
+import { makeBaseLayerFromBitmap } from '../project/layers';
 import type { Glyph } from '../project/types';
 import { chooseAtlasSize, packGlyphs } from './pack';
 
@@ -18,6 +19,7 @@ function makeGlyph(
   return {
     codePoint,
     projectId: 'project-1',
+    layers: [makeBaseLayerFromBitmap({ pixels, width, height, xoffset: 0, yoffset: 0 })],
     pixels,
     width,
     height,
@@ -34,6 +36,7 @@ function filledGlyph(codePoint: number, width: number, height: number): Glyph {
   return {
     codePoint,
     projectId: 'project-1',
+    layers: [makeBaseLayerFromBitmap({ pixels, width, height, xoffset: 0, yoffset: 0 })],
     pixels,
     width,
     height,

src/core/atlas/pack.ts

@@ -1,5 +1,6 @@
 import { ATLAS_CANDIDATES } from '@/config';
 
+import { flattenGlyph } from '../project/layers';
 import { effectiveThreshold } from '../project/threshold';
 import type { FontSettings, Glyph, GlyphPlacement } from '../project/types';
 import { pack } from './maxrects';
@@ -27,7 +28,10 @@ interface TrimmedGlyph {
 }
 
 function trimGlyph(glyph: Glyph, threshold: number): TrimmedGlyph {
-  const { width, height, pixels } = glyph;
+  // Flatten the layer stack first — the export pipeline only cares about the
+  // composited result, not how the user organised their layers.
+  const flat = flattenGlyph(glyph);
+  const { width, height, pixels } = flat;
 
   let minX = width,
     maxX = -1,

src/core/project/glyphs.ts

@@ -1,3 +1,4 @@
+import { makeBlankLayer } from './layers';
 import type { Glyph } from './types';
 
 export function makeBlankGlyph(
@@ -9,6 +10,7 @@ export function makeBlankGlyph(
   return {
     codePoint,
     projectId,
+    layers: [makeBlankLayer()],
     pixels: new Uint8Array(width * height),
     width,
     height,

src/core/project/index.ts

@@ -1,4 +1,5 @@
 export * from './glyphs';
+export * from './layers';
 export * from './portable';
 export * from './project';
 export * from './threshold';