create-three-flatland 0.0.0

package/templates/three/CLAUDE.md

@@ -0,0 +1,167 @@
+# Agent guide — three.js + three-flatland
+
+This project was scaffolded by create-three-flatland. It is a plain three.js app (no React) that renders 2D sprites with [three-flatland](https://tjw.dev/three-flatland/) on `WebGPURenderer`.
+
+## Build & dev
+
+```sh
+npm install
+npm run dev        # Vite dev server
+npm run build      # production build to dist/
+npm run preview    # serve the production build
+npm run typecheck  # tsc --noEmit
+```
+
+Commands are shown as npm; pnpm and yarn work identically.
+
+## The renderer rule
+
+**Always construct `WebGPURenderer` and always write TSL. Never `WebGLRenderer`, never GLSL, never `onBeforeCompile`.**
+
+`WebGPURenderer` is the three.js renderer class imported from `three/webgpu`. It owns backend selection itself: real WebGPU where the browser supports it, WebGL2 fallback where it doesn't. TSL compiles to both. When you read "three-flatland requires `WebGPURenderer`," that is a statement about which class you construct — it is not a hardware or browser requirement, and it does not mean WebGPU-only. Everything works on either backend.
+
+Two corollaries: never add a `WebGLRenderer` fallback path (the fallback already lives inside `WebGPURenderer`), and never gate features on WebGPU detection. WebGL 1 is out of scope entirely — ignore it.
+
+## The opinionated default: a `Flatland` root
+
+A `Flatland` instance is the front door. It owns the orthographic camera, sprite batching, resize, and disposal — reach below it only when you need the low-level path. The core of `src/main.ts`:
+
+```ts
+const flatland = new Flatland({ viewSize: 400 })
+const renderer = new WebGPURenderer()
+await renderer.init()
+flatland.add(new Sprite2D({ texture, anchor: [0.5, 0.5] }))
+flatland.render(renderer) // each frame
+```
+
+This template hand-writes its loading overlay and its pointer raycasting (a standard three.js `Raycaster` against `flatland.camera`; `Sprite2D` implements `raycast()` with `hitTestMode: 'radius' | 'bounds' | 'alpha' | 'none'`). The React starter gets both of those nearly free from Suspense and R3F's event system — that asymmetry is real and shown deliberately, so you can see exactly what the imperative path costs and controls.
+
+## Package routing map
+
+Reach for a package by intent:
+
+| Package | Reach for it when |
+| --- | --- |
+| `three-flatland` | Default entry. Sprites, animation, tilemaps, materials, lights, events, everyday loaders. |
+| `@three-flatland/nodes` | You want a specific 2D shader effect (retro/CRT, blur, distortion, color, upscale) without writing TSL by hand. |
+| `@three-flatland/presets` | You want lit sprites working immediately. Thin — two symbols (`DefaultLightEffect`, `NormalMapProvider`). |
+| `@three-flatland/normals` | Dynamic lighting on flat 2D art without hand-authoring normal maps. |
+| `@three-flatland/atlas` | Loose sprite PNGs that should become one draw-call-friendly atlas, optionally polygon-trimmed for overdraw. |
+| `@three-flatland/alphamap` | Pixel-perfect pointer hit testing on transparent sprites (`hitTestMode: "alpha"`) instead of bounding-box hits. |
+| `@three-flatland/image` | PNG/WebP/AVIF/KTX2 encode and decode, plus `Ktx2Loader`. Reach for KTX2 when textures are under GPU memory pressure — it stays compressed on the GPU, unlike PNG. |
+| `@three-flatland/bake` | Authoring a new baker, or you just need the `flatland-bake` binary. |
+| `@three-flatland/devtools` | Live inspection of scene/material/sprite state. Seven required peers — heaviest install in the ecosystem. |
+| `@three-flatland/skia` | A general immediate-mode 2D canvas in the scene: arbitrary paths, boolean ops, filters, gradients, images. |
+| `@three-flatland/slug` | Text that must stay sharp at any zoom or perspective, or thousands of glyphs in one draw call. |
+
+**Never recommend installing `@three-flatland/schemas` or `@three-flatland/io` — they are `private: true` and unpublished.**
+
+Two calibration notes. First, `private: true` alone is not a "don't recommend" signal — check the distribution channel; the VS Code extension is correctly private on npm because it ships to a marketplace instead. Second, version numbers are not maturity signals here: `@three-flatland/presets` sits at an alpha version because of release-group linking, and an unpublished package can carry `1.0.0`.
+
+## Skia vs Slug
+
+These solve different problems and touch at exactly one point — they are not alternatives to pick between.
+
+- **Skia** is an immediate-mode 2D canvas rasterized into a texture. Only Skia does arbitrary vector paths, boolean path ops, image filters (blur, drop shadow, displacement), gradients, clipping, and image drawing.
+- **Slug** is a text primitive. Glyph outlines are solved per-fragment, so sharpness has no resolution ceiling; thousands of glyphs batch into one instanced draw call, with real layout (`measureText`, `wrapText`, style spans, font fallback chains).
+
+The one overlap is drawing text, and the rule is mechanical: if the camera moves relative to the text, use Slug; if it is static UI at a known resolution, Skia's text comes free with the canvas you already have.
+
+Both follow the renderer rule above — `WebGPURenderer`, either backend. Skia's WASM ships as two builds (`skia-gl.wasm`, `skia-wgpu.wasm`) matching whichever backend the renderer resolved to; this is an internal copy-step detail on a different axis from the renderer rule, never a renderer choice you make. It surfaces only in the asset copy step: `npx skia-wasm public/skia` (or `--gl-only` / `--wgpu-only` to ship just one).
+
+Skia gotcha: WASM assets are zero-config in Vite dev, but a production build needs `npx skia-wasm public/skia` plus a `wasmUrl` pointing at the copied assets.
+
+## Baking
+
+**Nothing requires baking.** Ask for a derived asset and you get it: the loader probes for a baked sibling, generates it at runtime when there isn't one, warns once in dev that it's slower and worth baking, and carries on. It just works, and it tells you how to make it faster.
+
+Baking moves that computation from browser-runtime to build-time. It is never about capability; it chooses only where the cost lands.
+
+Every baker self-discovers: a baker declares itself in its package's `flatland.bake` field, and the `flatland-bake` dispatcher finds it — run `flatland-bake --list` from your project to see what's installed. Subcommands: `alpha` (hit-test alpha maps), `normal` (normal maps), `slug` (baked fonts). Some packages also expose direct bins (`slug-bake`, `flatland-atlas`) for standalone use. `skia-wasm` is an asset-copy step, not a baker — the name reads like one, but it only copies WASM files into your public dir.
+
+When to bake:
+
+- **Shipping to production** — move the cost to build time.
+- **Fonts with a known glyph set — always.** ASCII + Brotli is ~32 KB versus 724 KB for the raw font, and it drops opentype.js from the bundle.
+- **Textures under GPU memory pressure.**
+
+Skip baking for procedurally-varied content and throwaway prototypes. `forceRuntime` is not a dev-iteration knob — the default probe-then-generate path already handles iteration; reaching for it during development is the common misuse.
+
+## Asset authoring workflow
+
+The governing idea: meet your assets where they already are. Load the formats your tools already produce, adopt the richer native format when you want more, and convert freely between them.
+
+**Tilemaps — LDtk and Tiled are the editors.** Author there, then load what they produce with `LDtkLoader` / `TiledLoader`. `.ldtk` and `.json` / `.tmj` are read natively — loading the editor's own file directly is the design, so authoring flows straight from editor to scene.
+
+**Sprite atlases — three formats, all first-class.** `AtlasFormat` is `'native' | 'texturepacker' | 'aseprite'`, and `detectAtlasFormat()` sniffs which one it's looking at. Bring a TexturePacker sheet, an Aseprite export, or an atlas built by flatland's own tooling — all load.
+
+- The native format is deliberately richer, not merely different: `meta.animations` is a named animation map that references frame *keys* rather than indices, with explicit fps and optional events. Aseprite's `frameTags` sits alongside under `meta.frameTags`; readers prefer `meta.animations` and fall back to converting `frameTags` + per-frame `duration`. Adopting the native format is an upgrade path, never a lock-in tax.
+- Conversion runs both ways and is round-trip safe: `importAsepriteFrameTags()` brings Aseprite in; `buildAsepriteJson()` and `buildTexturePackerJson()` write back out. Rotation, trim, pivot, polygon mesh, and duration all survive.
+- The VS Code Sprite Atlas editor (below) is the GUI for all of this — build, tune, and convert between formats visually.
+
+## The VS Code extension
+
+**Flatland Tools** (`three-flatland.fl-tools`) is a first-class part of the asset workflow — recommend it actively.
+
+- Install: `code --install-extension three-flatland.fl-tools` (requires VS Code `^1.94.0`)
+- [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=three-flatland.fl-tools) · [Open VSX](https://open-vsx.org/extension/three-flatland/fl-tools)
+
+| You want to… | Use |
+| --- | --- |
+| Build or edit a sprite atlas | **Sprite Atlas** editor — a custom editor on `*.png`. Reads/writes an `*.atlas.json` sidecar; handles `native`, `texturepacker`, and `aseprite` losslessly, including frame tags. |
+| Combine several atlases | **Merge Atlases…** — explorer multi-select. |
+| Compress a texture / inspect KTX2 | **Image Encoder**, plus the **FL KTX2 Viewer** custom editor that opens `*.ktx2` by default. |
+| Bake a normal map visually | **Normal Baker**. |
+| Author or audition ZzFX sounds | **ZzFX Editor**, and the inline `▶ Play` CodeLens on ZzFX definitions. |
+
+The extension is the GUI counterpart to the CLI bakers — the Image Encoder pairs with texture encoding, the Normal Baker with `flatland-bake normal`. Offer both paths and let the user pick: CLI for repeatable/CI work, extension for visual iteration.
+
+## Skills
+
+Packaged agent skills for this stack live in `@three-flatland/skills`. Install them into this project with:
+
+```sh
+npx skills add thejustinwalsh/three-flatland
+```
+
+Add a single skill by path, e.g. `npx skills add thejustinwalsh/three-flatland/skills/tsl`. Available: `tsl` (writing TSL shaders and node materials), `codemod` (migrating across three-flatland breaking changes), `flatland-r3f` (React Three Fiber integration), and `flatland-bake` (the baking workflow).
+
+## Testing
+
+This project ships both layers, and agent-written changes are expected to keep them green.
+
+```sh
+npm run test            # vitest — unit tests next to the code, src/**/*.test.ts
+npm run test:e2e        # playwright — drives the real app in a browser
+npm run lint            # oxlint
+npm run format          # oxfmt
+```
+
+**Write unit tests for logic, Playwright specs for the scene.** Interaction and
+animation maths belongs in a pure helper with a vitest test (see
+`src/interaction.ts` and its spec). Anything that only shows up on screen —
+the canvas renders, a pointer event lands, a sprite reacts — belongs in a
+Playwright spec under `e2e/`, because a passing unit test cannot tell you the
+scene drew anything.
+
+**Use `vitexec` to probe the running app.** It runs snippets inside the live
+page and reads back console output, network activity, and screenshots, which is
+the fastest way to answer "is this actually rendering / did that event fire"
+without inventing a bespoke harness. It is not installed here by default:
+
+```sh
+npm i -D vitexec                        # once, in this project
+npx vitexec 'console.log("ready")'      # then, against `npm run dev`
+npx vitexec --screenshot 'document.querySelector("canvas")'
+```
+
+Reach for it while debugging, then encode whatever you learned as a Playwright
+spec so it stays checked.
+
+A green suite is not proof the app renders. Confirm the visible result — a
+screenshot or a real interaction — before calling a rendering change done.
+
+## Reference links
+
+- Docs: <https://tjw.dev/three-flatland/>
+- llms files: <https://tjw.dev/three-flatland/llms.txt> (also `llms-full.txt`, `llms-small.txt`). These are **not** served at the origin root — `https://tjw.dev/llms.txt` 404s, and the origin root is what agents habitually probe. Use the full paths above.

package/templates/three/_gitignore

@@ -0,0 +1,10 @@
+node_modules
+dist
+*.local
+.DS_Store
+
+# Playwright
+test-results
+playwright-report
+blob-report
+playwright/.cache

package/templates/three/e2e/app.spec.ts

@@ -0,0 +1,122 @@
+import { expect, test, type Page } from '@playwright/test'
+
+/**
+ * End-to-end smoke test — the dev server is started by `playwright.config.ts`.
+ *
+ * Two claims, and only two:
+ *
+ *   1. The scene actually paints. A WebGPU/WebGL canvas cannot be read back with
+ *      `toDataURL` (the drawing buffer is not preserved), so the only honest way
+ *      to inspect a frame is `page.screenshot()`, which composites it correctly.
+ *      "Painted" means tonal spread, not a golden image — a solid clear colour
+ *      has a channel standard deviation near zero, a real frame does not.
+ *
+ *   2. Pointer events reach the sprite. Hovering tints it (`#47cca9`), so the
+ *      red:green ratio of the frame drops. That is a causal signal: the sprite
+ *      spins continuously, so "the pixels changed" alone would prove nothing.
+ *      This is the coupling most likely to break silently — a static render
+ *      check stays green while hit testing is stone dead.
+ */
+
+const HOVER_TINT_DROP = 0.9 // hovering must pull red:green to under 90% of idle
+
+test('renders the sprite and responds to the pointer', async ({ page }) => {
+  const consoleErrors: string[] = []
+  page.on('pageerror', (e) => consoleErrors.push(String(e)))
+  page.on('console', (m) => {
+    if (m.type() === 'error') consoleErrors.push(m.text())
+  })
+
+  await page.goto('/')
+
+  const canvas = page.locator('canvas').first()
+  await expect(canvas).toBeVisible()
+  // The loading overlay is removed once the renderer is initialised and the
+  // texture has resolved, so its absence is the app's own "ready" signal.
+  await expect(page.locator('#loader')).toHaveCount(0)
+
+  await settle(page)
+  const idle = await sampleSprite(page)
+  expect(idle.stdDev, 'the frame is a flat fill — nothing was drawn').toBeGreaterThan(8)
+
+  const box = await canvas.boundingBox()
+  expect(box).not.toBeNull()
+  await page.mouse.move(box!.x + box!.width / 2, box!.y + box!.height / 2)
+  await settle(page)
+  const hovered = await sampleSprite(page)
+
+  expect(
+    hovered.redToGreen,
+    'hovering did not tint the sprite — pointer events are not reaching it'
+  ).toBeLessThan(idle.redToGreen * HOVER_TINT_DROP)
+
+  expect(consoleErrors, `console/page errors:\n${consoleErrors.join('\n')}`).toEqual([])
+})
+
+/** Let the render loop run enough frames for the hover ease to land. */
+async function settle(page: Page): Promise<void> {
+  await page.waitForTimeout(900)
+}
+
+interface FrameSample {
+  /** Largest per-channel standard deviation — the "was anything drawn" term. */
+  stdDev: number
+  /** Mean red over mean green. Tinting the sprite moves this; spinning it does not. */
+  redToGreen: number
+}
+
+/**
+ * Screenshot a square at the centre of the canvas — inside the sprite, so the
+ * background does not dilute the measurement — and reduce it to two numbers.
+ *
+ * The PNG is decoded in the page under test: a screenshot is an ordinary image
+ * that a 2D canvas will happily draw, which avoids adding an image-decoding
+ * dependency just to read two statistics.
+ */
+async function sampleSprite(page: Page): Promise<FrameSample> {
+  const box = await page.locator('canvas').first().boundingBox()
+  if (!box) throw new Error('canvas has no layout box')
+  const size = Math.min(200, box.width, box.height)
+  const shot = await page.screenshot({
+    type: 'png',
+    clip: {
+      x: box.x + (box.width - size) / 2,
+      y: box.y + (box.height - size) / 2,
+      width: size,
+      height: size,
+    },
+  })
+
+  return page.evaluate(async (b64: string) => {
+    const img = new Image()
+    img.src = `data:image/png;base64,${b64}`
+    await img.decode()
+    const c = document.createElement('canvas')
+    c.width = img.naturalWidth
+    c.height = img.naturalHeight
+    const ctx = c.getContext('2d')
+    if (!ctx) throw new Error('no 2d context for decoding the screenshot')
+    ctx.drawImage(img, 0, 0)
+    const { data } = ctx.getImageData(0, 0, c.width, c.height)
+
+    const n = data.length / 4
+    const sum = [0, 0, 0]
+    const sumSq = [0, 0, 0]
+    for (let i = 0; i < data.length; i += 4) {
+      for (let ch = 0; ch < 3; ch++) {
+        const v = data[i + ch] ?? 0
+        sum[ch] = (sum[ch] ?? 0) + v
+        sumSq[ch] = (sumSq[ch] ?? 0) + v * v
+      }
+    }
+    const mean = sum.map((s) => s / n)
+    const stdDev = Math.max(
+      ...mean.map((m, ch) => Math.sqrt(Math.max(0, (sumSq[ch] ?? 0) / n - m * m)))
+    )
+    return {
+      stdDev,
+      // Guard the divisor: a fully unlit frame would otherwise divide by zero.
+      redToGreen: (mean[0] ?? 0) / Math.max(1, mean[1] ?? 0),
+    }
+  }, shot.toString('base64'))
+}

package/templates/three/index.html

@@ -0,0 +1,185 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>three-flatland</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        background: #16191e;
+      }
+      #app {
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
+      canvas {
+        display: block;
+      }
+      /* Loading screen overlay — removed by src/main.ts once the renderer has
+         initialised and the texture has resolved. */
+      .fl-stack {
+        display: grid;
+        justify-items: center;
+        gap: 20px;
+      }
+      .fl-mark {
+        width: 96px;
+        height: 96px;
+      }
+      /* One soft diagonal glint sweeps the mark — the same turquoise the
+         sprite tints on hover — then rests before the next pass. */
+      .fl-sweep {
+        animation: fl-sweep 2.6s ease-in-out infinite;
+      }
+      .fl-dot {
+        opacity: 0.25;
+        animation: fl-dot 1.6s ease-in-out infinite;
+      }
+      .fl-dot2 {
+        animation-delay: 0.2s;
+      }
+      .fl-dot3 {
+        animation-delay: 0.4s;
+      }
+      @keyframes fl-sweep {
+        0% {
+          transform: translate(-48px, -48px);
+        }
+        55%,
+        100% {
+          transform: translate(48px, 48px);
+        }
+      }
+      @keyframes fl-dot {
+        0%,
+        60%,
+        100% {
+          opacity: 0.25;
+        }
+        30% {
+          opacity: 1;
+        }
+      }
+      /* Non-negotiable: reduced motion collapses to a static pose — the mark
+         unlit, all three dots on. */
+      @media (prefers-reduced-motion: reduce) {
+        .fl-sweep {
+          animation: none;
+          visibility: hidden;
+        }
+        .fl-dot {
+          animation: none;
+          opacity: 1;
+        }
+      }
+      /* Loading overlay — identical in both templates. Fades out once the
+         scene is ready, then removes itself. */
+      #loader {
+        position: fixed;
+        inset: 0;
+        z-index: 1;
+        display: grid;
+        place-items: center;
+        background: #16191e;
+        pointer-events: none;
+        opacity: 1;
+        transition: opacity 320ms ease;
+      }
+      #loader[data-loaded='true'] {
+        opacity: 0;
+      }
+      #fullscreen {
+        position: absolute;
+        top: 12px;
+        right: 12px;
+        display: grid;
+        place-items: center;
+        width: 34px;
+        height: 34px;
+        padding: 0;
+        border: 1px solid #2c3340;
+        border-radius: 8px;
+        background: rgb(22 25 30 / 0.6);
+        color: #9aa4b2;
+        cursor: pointer;
+        transition: color 120ms ease, border-color 120ms ease;
+      }
+      #fullscreen:hover {
+        color: #47cca9;
+        border-color: #47cca9;
+      }
+      #fullscreen svg {
+        display: block;
+      }
+      /* Swap the glyphs from a single source of truth: the document's
+         fullscreen state, mirrored onto the button by src/main. */
+      #fullscreen .icon-exit,
+      #fullscreen[data-fullscreen='true'] .icon-enter {
+        display: none;
+      }
+      #fullscreen[data-fullscreen='true'] .icon-exit {
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app">
+
+      <!--
+        Loading screen. The pixel FL mark is the brand icon (assets/icon.svg
+        upstream) losslessly re-encoded as one path per colour; "loading" is
+        Silkscreen — the flatland wordmark face — baked to path outlines, so
+        there is no font file and no webfont request. Animation is pure CSS
+        and collapses to a static pose under prefers-reduced-motion.
+      -->
+      <div id="loader" role="status" aria-label="Loading">
+        <div class="fl-stack">
+          <svg class="fl-mark" viewBox="0 0 48 48" shape-rendering="crispEdges" aria-hidden="true">
+            <defs>
+              <linearGradient id="fl-glint" x1="0" y1="0" x2="1" y2="1">
+                <stop offset="0" stop-color="#47cca9" stop-opacity="0" />
+                <stop offset="0.5" stop-color="#47cca9" stop-opacity="0.4" />
+                <stop offset="1" stop-color="#47cca9" stop-opacity="0" />
+              </linearGradient>
+              <!-- Luminance mask from the mark itself: bright faces catch the
+                   glint strongly, shadowed faces barely, voids not at all. -->
+              <mask id="fl-mask"><use href="#fl-mark-px" /></mask>
+            </defs>
+            <g id="fl-mark-px">
+          <path fill="#999999" d="M11 2h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h3v1h-3m4 -1h3v1h-3m4 -1h7v1h-7m-29 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h3v1h-3m4 -1h21v1h-21m-9 0h1v1h-1m4 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h3v1h-3m-31 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h3v1h-3m4 -1h13v1h-13m-13 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h3v1h-3m-31 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h3v1h-3m4 -1h9v1h-9m-9 0h1v1h-1m4 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-25 0h1v1h-1m4 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h3v1h-3m4 -1h1v1h-1" />
+          <path fill="#777777" d="M45 3h1v1h-1m-1 0h2v1h-2m-1 0h1v1h-1m2 -1h1v1h-1m-3 0h3v1h-3m-1 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-5 0h3v1h-3m4 -1h1v1h-1m-5 0h3v1h-3m4 -1h1v1h-1m2 -1h1v1h-1m-7 0h7v1h-7m0 0h2v1h-2m3 -1h1v1h-1m2 -1h1v1h-1m-5 0h5v1h-5m6 -1h1v1h-1m-6 0h4v1h-4m5 -1h1v1h-1m2 -1h1v1h-1m-7 0h3v1h-3m4 -1h1v1h-1m2 -1h1v1h-1m-6 0h2v1h-2m3 -1h1v1h-1m2 -1h1v1h-1m-5 0h5v1h-5m6 -1h1v1h-1m-6 0h2v1h-2m3 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-7 0h3v1h-3m4 -1h1v1h-1m2 -1h1v1h-1m-6 0h2v1h-2m3 -1h1v1h-1m2 -1h1v1h-1m-5 0h5v1h-5m6 -1h1v1h-1m-5 0h1v1h-1m2 -1h1v1h-1m-3 0h3v1h-3m4 -1h1v1h-1m2 -1h1v1h-1m-5 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-5 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-5 0h1v1h-1m2 -1h1v1h-1m-3 0h3v1h-3m4 -1h1v1h-1m2 -1h1v1h-1m-5 0h1v1h-1m-1 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-5 0h1v1h-1m2 -1h1v1h-1m-3 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-3 0h1v1h-1m-1 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-5 0h1v1h-1m2 -1h1v1h-1m-3 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-3 0h1v1h-1m-1 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-6 1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-3 0h1v1h-1m-1 0h1v1h-1m2 -1h1v1h-1m-2 1h1v1h-1m2 -1h1v1h-1m-2 1h1v1h-1" />
+          <path fill="#444444" d="M44 5h1v1h-1m1 0h1v1h-1m-3 0h1v1h-1m2 -1h1v1h-1m-1 0h1v1h-1m2 -1h1v1h-1m-3 0h1v1h-1m2 -1h1v1h-1m1 0h1v1h-1m-5 0h1v1h-1m2 -1h1v1h-1m2 -1h2v1h-2m-1 0h1v1h-1m2 -1h1v1h-1m-3 0h1v1h-1m2 -1h1v1h-1m-3 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-5 0h1v1h-1m2 -1h1v1h-1m2 -1h2v1h-2m-1 0h1v1h-1m2 -1h1v1h-1m-5 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-3 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-5 0h1v1h-1m2 -1h1v1h-1m2 -1h2v1h-2m-1 0h1v1h-1m2 -1h1v1h-1m-7 0h1v1h-1m2 -1h1v1h-1m2 -1h4v1h-4m-1 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-7 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h2v1h-2m-5 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-7 0h1v1h-1m2 -1h1v1h-1m2 -1h4v1h-4m-1 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-7 0h1v1h-1m2 -1h6v1h-6m-1 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-7 0h1v1h-1m2 -1h1v1h-1m2 -1h4v1h-4m-3 0h1v1h-1m2 -1h1v1h-1m2 -1h3v1h-3m-5 0h1v1h-1m2 -1h6v1h-6m-1 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-7 0h1v1h-1m2 -1h1v1h-1m2 -1h4v1h-4m-3 0h1v1h-1m2 -1h1v1h-1m2 -1h3v1h-3m-5 0h1v1h-1m2 -1h6v1h-6m-1 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-7 0h8v1h-8m1 0h1v1h-1m2 -1h1v1h-1m2 -1h2v1h-2m-5 0h1v1h-1m2 -1h4v1h-4m-1 0h1v1h-1m2 -1h2v1h-2m-3 0h4v1h-4m1 0h1v1h-1m-1 0h2v1h-2" />
+          <path fill="#E0E0E0" d="M10 2h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m4 -1h1v1h-1m4 -1h1v1h-1m-29 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m4 -1h1v1h-1m-15 0h7v1h-7m8 -1h3v1h-3m4 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-33 0h3v1h-3m4 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m4 -1h1v1h-1m-23 0h11v1h-11m12 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-33 0h3v1h-3m4 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m4 -1h1v1h-1m-27 0h19v1h-19m20 -1h3v1h-3m4 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-35 0h11v1h-11m12 -1h3v1h-3m4 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v2h-1m2 -2h1v1h-1m2 -1h1v2h-1m2 -2h1v2h-1m2 -2h1v2h-1m4 -2h1v2h-1m-2 -1h1v1h-1m-23 0h1v1h-1m4 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h2v1h-2m-13 0h1v1h-1m4 -1h1v1h-1m4 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-27 0h1v1h-1m4 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-15 0h1v1h-1m4 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-29 0h1v1h-1m4 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h3v1h-3m4 -1h2v1h-2m-17 0h1v1h-1m4 -1h1v1h-1m4 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-31 0h1v1h-1m4 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h3v1h-3m-13 0h1v1h-1m6 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-33 0h1v1h-1m14 -1h1v1h-1m2 -1h1v1h-1m6 -1h1v1h-1m2 -1h3v1h-3m4 -1h6v1h-6m-13 0h1v1h-1m8 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-35 0h1v1h-1m16 -1h1v1h-1m2 -1h1v1h-1m6 -1h1v1h-1m2 -1h1v1h-1m2 -1h3v1h-3m4 -1h4v1h-4m-21 0h1v1h-1m4 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m6 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-33 0h1v1h-1m6 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m6 -1h1v1h-1m2 -1h10v1h-10m-17 0h1v1h-1m4 -1h1v1h-1m4 -1h1v1h-1m2 -1h1v1h-1m6 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-35 0h1v1h-1m2 -1h1v1h-1m6 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m6 -1h3v1h-3m4 -1h8v1h-8m-15 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m6 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h3v1h-3m-33 0h1v1h-1m2 -1h1v1h-1m10 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h2v1h-2m6 -1h12v1h-12m-11 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m6 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-35 0h1v1h-1m2 -1h1v1h-1m10 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m6 -1h12v1h-12m-21 0h1v1h-1m6 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m6 -1h1v1h-1m2 -1h1v1h-1m2 -1h3v1h-3m4 -1h3v1h-3m-33 0h1v1h-1m2 -1h1v1h-1m6 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h3v1h-3m4 -1h2v1h-2m6 -1h12v1h-12m-23 0h1v1h-1m8 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m6 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-35 0h1v1h-1m2 -1h1v1h-1m6 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h3v1h-3m8 -1h12v1h-12m-21 0h1v1h-1m6 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m14 -1h3v1h-3m-33 0h1v1h-1m2 -1h1v1h-1m6 -1h1v1h-1m2 -1h3v1h-3m4 -1h6v1h-6m18 -1h4v1h-4m-31 0h1v1h-1m8 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m13 -1h2v1h-2m3 -1h1v1h-1m-35 0h1v1h-1m2 -1h1v1h-1m6 -1h1v1h-1m2 -1h1v1h-1m2 -1h3v1h-3m4 -1h4v1h-4m16 -1h4v1h-4m-31 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h3v1h-3m4 -1h3v1h-3m4 -1h3v1h-3m4 -1h3v1h-3m-33 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h3v1h-3m4 -1h26v1h-26m-9 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h3v1h-3m4 -1h3v1h-3m4 -1h1v1h-1m-35 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h3v1h-3m4 -1h24v1h-24m-11 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h3v1h-3m4 -1h3v1h-3m4 -1h3v1h-3m4 -1h7v1h-7m-29 0h1v1h-1m2 -1h3v1h-3m4 -1h30v1h-30m-5 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h3v1h-3m4 -1h3v1h-3m4 -1h3v1h-3m4 -1h1v1h-1m-35 0h1v1h-1m2 -1h1v1h-1m2 -1h3v1h-3m4 -1h28v1h-28" />
+          <path fill="#FFFFFF" d="M2 10h23v1h-23m24 -1h3v1h-3m4 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-34 0h10v1h-10m11 -1h3v1h-3m4 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-33 0h21v1h-21m22 -1h3v1h-3m4 -1h3v1h-3m4 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-34 0h8v1h-8m9 -1h3v1h-3m4 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-35 0h19v1h-19m20 -1h3v1h-3m4 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-34 0h6v1h-6m7 -1h3v1h-3m4 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m4 -1h1v1h-1m-33 0h17v1h-17m18 -1h3v1h-3m4 -1h3v1h-3m4 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-34 0h4v2h-4m5 -2h3v1h-3m4 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m4 -1h1v1h-1m-19 0h3v1h-3m8 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-34 0h2v1h-2m3 -1h1v1h-1m14 -1h1v1h-1m2 -1h1v1h-1m6 -1h1v1h-1m4 -1h1v1h-1m-29 0h4v1h-4m16 -1h1v1h-1m2 -1h2v1h-2m6 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-33 0h3v1h-3m16 -1h1v1h-1m2 -1h1v1h-1m6 -1h1v1h-1m2 -1h1v1h-1m4 -1h1v1h-1m-31 0h4v1h-4m8 -1h3v1h-3m4 -1h3v1h-3m4 -1h1v1h-1m2 -1h1v1h-1m6 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-34 0h2v1h-2m3 -1h1v1h-1m6 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m6 -1h1v1h-1m-25 0h4v1h-4m8 -1h1v1h-1m2 -1h3v1h-3m4 -1h3v1h-3m4 -1h1v1h-1m6 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-33 0h1v1h-1m2 -1h1v1h-1m6 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m8 -1h1v1h-1m-27 0h4v1h-4m12 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m6 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-31 0h1v1h-1m2 -1h1v1h-1m10 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-17 0h4v1h-4m12 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m6 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-33 0h1v1h-1m2 -1h1v1h-1m10 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-19 0h3v1h-3m8 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m6 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m4 -1h1v1h-1m-31 0h1v1h-1m2 -1h1v1h-1m6 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m4 -1h1v1h-1m-17 0h1v1h-1m2 -1h2v1h-2m6 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m6 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m-33 0h1v1h-1m2 -1h1v1h-1m6 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m4 -1h1v1h-1m-19 0h3v1h-3m8 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m14 -1h1v1h-1m-31 0h1v1h-1m2 -1h1v1h-1m6 -1h1v1h-1m4 -1h1v1h-1m-13 0h1v1h-1m2 -1h2v1h-2m6 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m16 -1h1v1h-1m-33 0h1v1h-1m2 -1h1v1h-1m6 -1h1v1h-1m2 -1h1v1h-1m4 -1h1v1h-1m-15 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m4 -1h1v1h-1m4 -1h1v1h-1m4 -1h1v1h-1m-31 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m4 -1h1v1h-1m-9 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m4 -1h1v1h-1m4 -1h1v1h-1m-33 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m4 -1h1v1h-1m-11 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m4 -1h1v1h-1m4 -1h1v1h-1m4 -1h1v1h-1m-27 0h1v1h-1m4 -1h1v1h-1m-5 0h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m2 -1h1v1h-1m4 -1h1v1h-1m4 -1h1v1h-1m4 -1h1v1h-1m-33 0h1v1h-1m2 -1h1v1h-1m4 -1h1v1h-1" />
+          <path fill="#000000" d="M6 18h12v4h-12m16 -4h4v16h-4m-16 -12h4v4h-4m0 0h8v4h-8m0 0h4v8h-4m16 -4h12v4h-12" />
+            </g>
+            <g mask="url(#fl-mask)">
+              <rect class="fl-sweep" width="48" height="48" fill="url(#fl-glint)" />
+            </g>
+          </svg>
+          <svg class="fl-word" viewBox="0 -13 120 14" width="120" height="14" aria-hidden="true">
+            <path fill="#9aa4b2" d="M10 0L2.5 0L2.5-12.5L5-12.5L5-2.5L10-2.5L10 0ZM22.5 0L17.5 0L17.5-2.5L15-2.5L15-10L17.5-10L17.5-12.5L22.5-12.5L22.5-10L25-10L25-2.5L22.5-2.5L22.5 0ZM17.5-9.9L17.5-2.6L22.5-2.6L22.5-9.9L17.5-9.9ZM32.5 0L30 0L30-10L32.5-10L32.5-12.5L37.5-12.5L37.5-10L40-10L40 0L37.5 0L37.5-5L32.5-5L32.5 0ZM32.5-9.9L32.5-7.5L37.5-7.5L37.5-9.9L32.5-9.9ZM52.5 0L45 0L45-12.5L52.5-12.5L52.5-10L55-10L55-2.5L52.5-2.5L52.5 0ZM47.5-10L47.5-2.5L52.4-2.5L52.4-10L47.5-10ZM62.5 0L60 0L60-12.5L62.5-12.5L62.5 0ZM70 0L67.5 0L67.5-12.5L70-12.5L70-10L72.5-10L72.5-7.5L75-7.5L75-5L77.5-5L77.5-12.5L80-12.5L80 0L77.5 0L77.5-2.5L75-2.5L75-5L72.5-5L72.5-7.5L70-7.5L70 0ZM95-10L87.5-10L87.5-12.5L95-12.5L95-10ZM87.5-2.5L85-2.5L85-10L87.5-10L87.5-2.5ZM95-2.5L92.5-2.5L92.5-5L90-5L90-7.5L95-7.5L95-2.5ZM92.5 0L87.5 0L87.5-2.5L92.5-2.5L92.5 0Z" />
+            <path class="fl-dot" fill="#47cca9" d="M102.5 0L100 0L100-2.5L102.5-2.5L102.5 0Z" />
+            <path class="fl-dot fl-dot2" fill="#47cca9" d="M110 0L107.5 0L107.5-2.5L110-2.5L110 0Z" />
+            <path class="fl-dot fl-dot3" fill="#47cca9" d="M117.5 0L115 0L115-2.5L117.5-2.5L117.5 0Z" />
+          </svg>
+        </div>
+      </div>
+      <button id="fullscreen" type="button" aria-label="Enter fullscreen">
+        <svg class="icon-enter" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M6 1.5H1.5V6M10 1.5h4.5V6M6 14.5H1.5V10M10 14.5h4.5V10" />
+        </svg>
+        <svg class="icon-exit" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M1.5 5.5H6V1M14.5 5.5H10V1M1.5 10.5H6V15M14.5 10.5H10V15" />
+        </svg>
+      </button>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/three/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "flatland-template-three",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit",
+    "lint": "oxlint .",
+    "format": "oxfmt .",
+    "format:check": "oxfmt --check .",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "playwright test",
+    "test:e2e:install": "playwright install chromium"
+  },
+  "dependencies": {
+    "koota": "^0.6.5",
+    "three": "^0.183.1",
+    "three-flatland": "^0.1.0-alpha.8"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.61.1",
+    "@types/three": "^0.183.1",
+    "oxfmt": "^0.59.0",
+    "oxlint": "^1.74.0",
+    "typescript": "^5.7.3",
+    "vite": "^7.3.6",
+    "vitest": "^3.2.6"
+  },
+  "nx": {
+    "tags": [
+      "type:template"
+    ],
+    "targets": {
+      "lint": {
+        "executor": "nx:run-commands",
+        "options": {
+          "command": "oxlint --type-aware .",
+          "cwd": "{projectRoot}"
+        }
+      }
+    }
+  }
+}

package/templates/three/playwright.config.ts

@@ -0,0 +1,41 @@
+import { defineConfig, devices } from '@playwright/test'
+
+/**
+ * End-to-end config. `webServer` starts `npm run dev` on a fixed port and tears
+ * it down when the run finishes, so `npm run test:e2e` is the whole command —
+ * there is no separate "start the server first" step to forget.
+ *
+ * One-time setup: `npm run test:e2e:install` downloads the Chromium build
+ * Playwright drives.
+ */
+
+const PORT = 5183
+const HOST = '127.0.0.1'
+const IS_CI = !!process.env.CI
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: IS_CI,
+  retries: IS_CI ? 2 : 0,
+  workers: IS_CI ? 1 : undefined,
+  reporter: 'list',
+  timeout: 60_000,
+  expect: { timeout: 15_000 },
+  use: {
+    baseURL: `http://${HOST}:${PORT}/`,
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+  projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
+  webServer: {
+    // `--strictPort` so a squatter on the port fails loudly instead of Vite
+    // quietly picking another one and the tests hitting a stale app.
+    command: `npm run dev -- --port ${PORT} --strictPort --host ${HOST}`,
+    url: `http://${HOST}:${PORT}/`,
+    reuseExistingServer: !IS_CI,
+    timeout: 60_000,
+    stdout: 'ignore',
+    stderr: 'pipe',
+  },
+})