castle-web-cli 0.4.72 → 0.4.74

package/kits/basic-2d/behaviors/tint.js

@@ -0,0 +1,47 @@
+// Tint helpers for the pixel-art Sprite behavior. A tint is a hex color
+// (#rrggbb / #rrggbbaa) multiplied channel-wise into each source pixel. White
+// (#ffffffff) means "no change".
+
+// Parse a hex color into [r, g, b, a] channels (0-255). Returns null when the
+// string is not a hex color so callers can fall back to the raw color.
+export function parseHexColor(color) {
+  const hex = String(color).trim().replace(/^#/, '');
+  if (hex.length !== 6 && hex.length !== 8) return null;
+  if (!/^[0-9a-fA-F]+$/.test(hex)) return null;
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  const a = hex.length === 8 ? parseInt(hex.slice(6, 8), 16) : 255;
+  return [r, g, b, a];
+}
+
+// Returns the tint as [r, g, b, a] channels, or null when there is no tint or
+// the tint is white (#ffffffff) -- both meaning "no change".
+export function parseTint(tint) {
+  if (!tint) return null;
+  const rgba = parseHexColor(tint);
+  if (!rgba) return null;
+  if (rgba[0] === 255 && rgba[1] === 255 && rgba[2] === 255 && rgba[3] === 255) {
+    return null;
+  }
+  return rgba;
+}
+
+// Multiply each channel of a pixel color (hex string) by the tint (0-255).
+export function applyTint(color, tint) {
+  const rgba = parseHexColor(color);
+  if (!rgba) return color;
+  const out = rgba.map((channel, i) => Math.round((channel * tint[i]) / 255));
+  return '#' + out.map((channel) => channel.toString(16).padStart(2, '0')).join('');
+}
+
+// Multiply an ImageData buffer's RGBA channels in place by the tint (0-255).
+// Used to tint an already-rendered offscreen canvas (the Sprite path).
+export function tintImageData(data, tint) {
+  for (let i = 0; i < data.length; i += 4) {
+    data[i] = Math.round((data[i] * tint[0]) / 255);
+    data[i + 1] = Math.round((data[i + 1] * tint[1]) / 255);
+    data[i + 2] = Math.round((data[i + 2] * tint[2]) / 255);
+    data[i + 3] = Math.round((data[i + 3] * tint[3]) / 255);
+  }
+}

package/kits/basic-2d/docs/pxart-format.md

@@ -0,0 +1,298 @@
+# `.pxart` Pixel-Art Format (basic-2d kit)
+
+This documents the `.pxart` sprite format as integrated into the `basic-2d`
+kit. The format and its parser/serializer/renderer live in the kit itself, in
+`engine/pxart.js` (`parseFull`, `serializeFull`, `renderSpriteFrame`, plus
+the compact-form helpers `parseCompact` / `serializeCompact` / `renderToCanvas`).
+`.pxart` is a pure kit-layer concern — the harness (`castle-web-sdk`, the CLI)
+has no knowledge of it.
+
+A sprite is modeled on Aseprite conventions: a `layers × frames` spreadsheet of
+cells, one resolution per sprite, an ordered indexed palette, named animation
+tags, and Aseprite-style linked cells. A `.pxart` file is a single JSON object.
+
+The format has two **coexisting on-disk forms** — capability tiers, *not*
+temporal versions — that the kit treats as one in-memory model:
+
+- **full** — the full layered/animated `Sprite` (`"format": "full"`).
+- **compact** — a flat `{ palette, grid }` object (`"format": "compact"`, or
+  absent). The parser upgrades it into a degenerate one-layer / one-frame
+  Sprite in memory.
+
+> Files in this kit use the extension `.pxart`. They live under `drawings/`
+> and are discovered by `engine/files.js`.
+
+---
+
+## 1. Form discriminator
+
+- Every canonical file carries a top-level string `format`.
+  - `"format": "full"` — the layered/animated sprite.
+  - `"format": "compact"` (or absent) — the flat-grid shorthand (see
+    [§9](#9-compact-shorthand)). The parser upgrades it in memory.
+- `serializeFull` always stamps `"format": "full"`. `serializeCompact` (the
+  compact path the kit's `PxArtEditor` and the `draw` generator use) always
+  stamps `"format": "compact"`.
+- **The two forms are capability tiers, not versions** — `full` is a superset of
+  `compact`. Files of both kinds coexist; a sprite is written in whichever form
+  loses nothing (see [§9](#9-compact-shorthand)).
+- **Detection is by STRUCTURE, not the field.** The parser recognizes the
+  compact form by an object `palette` + a `grid`, and the full form by a
+  `resolution` / array `palette` / `frames` / `layers`. The `format` field is a
+  hint used only to disambiguate genuinely ambiguous shapes; clear structure
+  always wins, so a file with a missing or even mislabeled discriminator still
+  parses (without silent mis-detection). Unknown top-level fields are ignored
+  (forward compatibility).
+
+---
+
+## 2. Resolution
+
+```json
+"resolution": { "width": 16, "height": 16 }
+```
+
+- **Default resolution is 16×16** (`DEFAULT_RESOLUTION`). New/empty sprites and
+  generated art start at 16×16, and the kit's `PxArtEditor` opens a blank canvas
+  at this size.
+- **Power-of-two only**, from **16 to 512**: one of `16, 32, 64, 128, 256, 512`.
+- **One resolution per sprite.** There is no per-layer or per-frame resolution.
+- **Parser policy:**
+  - **Explicit full-form `resolution`:** each dimension is **snapped** to the
+    valid set (clamped to `[16, 512]`, then rounded to the nearest power of two,
+    ties round up). Out-of-range values snap rather than reject, keeping the
+    parser tolerant.
+  - **compact shorthand upgrade:** resolution is inferred from the grid's
+    **native dimensions verbatim** and is **not** snapped, so arbitrary-size
+    compact grids round-trip faithfully.
+
+---
+
+## 3. Palette
+
+```json
+"palette": [
+  { "key": "o", "hex": "#e8b800" },
+  { "key": "y", "hex": "#ffe11a" }
+]
+```
+
+- An **ORDERED array** of `{ key, hex }` entries (indexed-with-hex color mode).
+  - `key`: a **single character** used in packed grid strings.
+  - `hex`: a normalized `#rrggbb` or `#rrggbbaa`.
+- **Ordering is meaningful** — it is the stable index, preserved on parse and
+  serialize.
+- **`.` is reserved for transparent** and is **never** a palette entry. A grid
+  character of `.` (or any char with no matching palette key) renders
+  transparent.
+- Indexed-with-hex only: **not** RGBA-per-pixel, **not** grayscale.
+
+### Two-tier palette system (Endesga-64)
+
+The kit uses a **two-tier** fixed palette, both tiers drawn from Lospec's
+[Endesga 64](https://lospec.com/palette-list/endesga-64). There is no free color
+picking at either tier.
+
+**Full palette — Endesga 64 (`EDG64`, all 64 colors): what USERS paint with.**
+The kit's `PxArtEditor` exposes the **full 64-color swatch** (canonical Lospec
+order). The editor assigns each color a stable single-char key (`KEY_ALPHABET`,
+64 distinct keys) plus `.` for transparent. When an existing sprite is opened for
+editing, each cell's resolved color is **snapped to the nearest Endesga-64
+color** by RGB distance, so editing always stays on the fixed swatch. (Sprites
+still *render* with their own stored palette via `renderSpriteFrame`; the snap
+only affects what the editor writes back.) The swatch UI renders as an 8-column
+grid (8 rows for the 64 colors) that scrolls within the inspector.
+
+**Agent subset — 16 colors (`AGENT_PALETTE_16`): what the LLM generates with.**
+The agent generation path (the `draw` svg-rect → `.pxart` quantizer and the
+prompt the model receives) is constrained to a **fixed 16-color subset of
+Endesga-64**, so generated art stays coherent. Every color below is a member of
+`EDG64`. In order:
+
+```
+#e69c69 #bf6f4a #8a4836 #391f21 #891e2b #ea323c #ffa214 #ffeb57
+#5ac54f #1e6f50 #134c4c #657392 #c7cfdd #ffffff #0cf1ff #0098dc
+```
+
+So: the editor offers all 64 to people; the agent generation path snaps to these
+16. Both constants (`EDG64`, `AGENT_PALETTE_16`) live in the kit's
+`engine/pxart.js`.
+
+---
+
+## 4. Frames & timing
+
+```json
+"frames": [{ "durationMs": 120 }, { "durationMs": 120 }, { "durationMs": 240 }],
+"defaultDurationMs": 120
+```
+
+- `frames`: an array of `{ durationMs }`. Its length is the **frame count**.
+  Frame indices are 0-based.
+- `defaultDurationMs`: applied to any frame missing an explicit `durationMs`
+  (the kit default is 100ms).
+- **No global `fps` field** (matches Aseprite). Holding a frame longer is just a
+  larger `durationMs`.
+
+The kit's `Sprite` behavior advances frames in its `update(dt)` using each
+frame's `durationMs`.
+
+---
+
+## 5. Tags
+
+```json
+"tags": [
+  { "name": "idle",  "from": 0, "to": 1, "direction": "pingpong", "repeat": 0 },
+  { "name": "blink", "from": 2, "to": 2, "direction": "forward",  "repeat": 1 }
+],
+"defaultTag": "idle"
+```
+
+- `tags`: named, inclusive 0-based frame ranges. Each tag has:
+  - `name`: stable handle.
+  - `from`, `to`: inclusive frame indices.
+  - `direction`: `"forward" | "reverse" | "pingpong"`.
+  - `repeat`: play count; **`0` = loop forever**.
+- `defaultTag`: name of the tag that plays by default.
+
+**Animation lives in the file** — ranges and timing are the asset's intrinsic
+property. The placement/runtime layer may override *which* tag plays:
+
+### Actor-side tag override (this kit)
+
+The `Sprite` behavior exposes a `tag` prop. Resolution order:
+
+1. If `tag` is a non-empty string naming a tag in the file, that tag plays.
+2. Otherwise the file's `defaultTag` plays.
+3. Otherwise the whole timeline plays forward, looping.
+
+`direction` and `repeat` come from the tag (a whole-timeline fallback loops
+forever, forward). When `repeat` is exhausted the behavior holds the last frame.
+When the `playing` prop is `false`, the behavior holds frame 0.
+
+---
+
+## 6. Layers
+
+```json
+"layers": [
+  {
+    "id": "body", "name": "Body", "visible": true, "opacity": 1.0,
+    "blendMode": "normal", "kind": "pixel",
+    "cells": [ ... ]
+  }
+]
+```
+
+- `layers`: an **ordered** array, **bottom → top** (`layers[0]` drawn first).
+- Each layer: `id`, `name`, `visible` (skipped when hidden), `opacity`
+  (`0.0`–`1.0`), `blendMode` (**`"normal"` only** for now), `kind`
+  (**`"pixel"` only** for now), and `cells` (its row of the spreadsheet).
+
+`renderSpriteFrame` composites visible layers bottom→top, applying per-layer
+opacity, at 1px/cell with `imageSmoothingEnabled = false`.
+
+---
+
+## 7. Cells
+
+`cells` is **dense-with-`null`**: `layer.cells.length == frames.length`, and
+cell index `f` is the layer's content for frame `f`. A cell is one of:
+
+| Form | Meaning |
+| --- | --- |
+| `{ "grid": ["...", "..."] }` | An image: packed strings using palette keys, one per row. `.` = transparent. |
+| `{ "link": <frameIndex> }` | Aseprite-style **same-layer** reference; shares the image of `cells[frameIndex]`. Edits to the source propagate. |
+| `null` | Empty / fully transparent for this (layer, frame). |
+
+- A `link` must point at a cell index on the **same layer**; the resolver
+  (`resolveCellGrid`) follows the chain to the underlying `{ grid }`, guarding
+  against cycles and invalid indices (resolving to `null` if it can't reach a
+  grid).
+- **Faithful storage:** grids are stored as **packed strings** of palette keys.
+  Generation-only emission shapes (svg-rect, etc.) normalize into this packed
+  form and are never the thing of record.
+
+---
+
+## 8. Coordinates
+
+- **Origin is top-left.** `grid[0]` is the top row; char index 0 is the leftmost
+  column.
+- Units are **pixels** within the sprite's `resolution`. Scaling/placement
+  happen **outside** the file — in this kit, the actor's `Layout` box. The
+  `Sprite` behavior blits the native-resolution frame into the Layout rectangle
+  with smoothing disabled and an optional `tint` multiply.
+
+---
+
+## 9. compact shorthand
+
+A file with a top-level `palette` (an **object** map) + `grid` (no `layers` /
+`frames`) is the **compact flat-grid shorthand**:
+
+```json
+{
+  "format": "compact",
+  "palette": { "y": "#ffe11a", "o": "#e8b800", ".": null },
+  "grid": ["..ooyyoo..", ".oyyyyyyo.", "oyyyyyyyyo"]
+}
+```
+
+It is **sugar for one layer / one frame**, upgraded in memory by `parseFull`
+(via `upgradeCompactToFull`):
+
+- `resolution` ← the grid's native `{ width, height }` (not snapped).
+- `palette` ← the compact record as an ordered array (insertion order), dropping
+  the `.`/null transparent entry.
+- one `frame` using `defaultDurationMs`.
+- one `pixel` layer whose single cell is `{ grid: <the grid> }`.
+
+This keeps cold-start generation tiny: emit just `{ palette, grid }` and the
+system treats it as a full (degenerate) Sprite.
+
+### Single-layer / single-frame generation contract
+
+The **generation contract** for this kit is to emit the **compact shorthand**: a
+single 16×16 (default) `{ palette, grid }` sprite over the agent 16-color subset
+(`AGENT_PALETTE_16`).
+The CLI generation worker and the kit's `PxArtEditor` both produce/store this
+compact form when nothing is lost by it. Multi-layer / multi-frame structure is
+authored by tools later, not hand-generated — and the minimal `PxArtEditor`
+opens such files **read-only** (it only edits the single-layer / single-frame
+case).
+
+### compact ↔ full relationship
+
+- `full` is a **superset** of `compact`; the compact functions keep their exact
+  behavior.
+- A compact file is equivalent to a full sprite with one `pixel` layer and one
+  frame.
+- `parseFull` accepts **both** forms and always yields a full `Sprite`.
+- On save, the kit picks the form **structurally**: it serializes the working
+  sprite to the candidate compact form, re-parses it, and keeps the compact
+  output only when that round-trip reproduces the sprite exactly (`serializeModel`
+  in `editors/pxArtEditorModel.js`). A single fully-opaque visible layer / single
+  inheriting frame / no tags / all on-canvas content round-trips losslessly, so
+  it is stored compact. Anything the compact form can't carry — extra
+  layers/frames/tags, per-layer opacity or visibility, cel offsets, or off-canvas
+  content — forces `serializeFull`. This is a derived fact, not a hand-maintained
+  checklist, so it stays correct as new full-form features are added.
+
+---
+
+## 10. Reserved / out of scope
+
+Named so the format can grow without a breaking change, but **not built**:
+tilemap/tileset layers (a future `kind`), slices, layer groups, vector/avatar
+layers, and rich blend modes (beyond `"normal"`). Reserving the `kind` and
+`blendMode` discriminators keeps these additive later, not breaking.
+
+---
+
+## Appendix — sample
+
+`drawings/pig.pxart` is a 16×16 single-layer sprite referenced by the
+`pig_sprite` actor in `scenes/main.scene` through the `Sprite` behavior — a
+working rendered example of the format in this kit.

package/kits/basic-2d/drawings/pig.pxart

@@ -0,0 +1,59 @@
+{
+  "format": "full",
+  "resolution": {
+    "width": 16,
+    "height": 16
+  },
+  "palette": [
+    {
+      "key": "q",
+      "hex": "#391f21"
+    },
+    {
+      "key": "v",
+      "hex": "#f6ca9f"
+    },
+    {
+      "key": "6",
+      "hex": "#f5555d"
+    }
+  ],
+  "frames": [
+    {}
+  ],
+  "defaultDurationMs": 100,
+  "tags": [],
+  "layers": [
+    {
+      "id": "layer-0",
+      "name": "Layer 1",
+      "visible": true,
+      "opacity": 1,
+      "blendMode": "normal",
+      "kind": "pixel",
+      "cells": [
+        {
+          "grid": [
+            "................",
+            "................",
+            "........q..q....",
+            "....qqqqvqqvq...",
+            "...qvvvvvvvvq...",
+            "..qvvvvvvvvvvq..",
+            ".qvvvvvvvqvvqvq.",
+            ".qvvvvvvvqvvqvq.",
+            "q6vvvvvvvvv666q.",
+            "q6vvvvvvvv6q6q6q",
+            ".qvvvvvvvv66666q",
+            ".qvvvvvvvvv666q.",
+            "..qvvvvvvvvvqq..",
+            "..q66qqqq6q6q...",
+            "..q6q...q6q.....",
+            "................",
+            "................"
+          ]
+        }
+      ]
+    }
+  ]
+}

package/kits/basic-2d/editors/App.jsx

@@ -1,32 +1,44 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { onBeforeRestart, writeFile } from 'castle-web-sdk';
-import {
-  flatFileOrder,
-  formatJson,
-  getFileKind,
-  initialFiles,
-  parseJsonFile,
-} from '../engine/files';
-import { AppShell, cx, MainEditor, styles } from '../engine/ui';
+import { flatFileOrder, formatJson, getFileKind, initialFiles } from '../engine/files';
+import { collectAssets } from '../engine/assets';
+import { AppShell, cx, MainEditor, styles, useCompactViewport } from '../engine/ui';
 import { CodeEditor } from './CodeEditor';
-import { DrawingEditor } from './DrawingEditor';
+import { PxArtEditor } from './PxArtEditor';
 import { FileBrowser } from './FileBrowser';
 import { SceneEditor } from './SceneEditor';
+// Desktop file-list open/closed state persists across reloads; the bottom
+// sheet (compact) is always session-only.
+const FILES_OPEN_KEY = 'castle-basic2d-files-open';
+const SELECTED_PATH_KEY = 'castle-basic2d-selected-path';
+function readFilesOpen() {
+  try {
+    return localStorage.getItem(FILES_OPEN_KEY) !== '0';
+  } catch {
+    return true;
+  }
+}
+function readSelectedPath() {
+  try {
+    const saved = localStorage.getItem(SELECTED_PATH_KEY);
+    return saved && initialFiles[saved] !== undefined ? saved : 'scenes/main.scene';
+  } catch {
+    return 'scenes/main.scene';
+  }
+}
 export function App() {
   const [files, setFiles] = useState(initialFiles);
-  const [selectedPath, setSelectedPath] = useState('scenes/main.scene');
+  const [selectedPath, setSelectedPath] = useState(readSelectedPath);
   const [filesSheetOpen, setFilesSheetOpen] = useState(false);
+  const [filesOpenDesktop, setFilesOpenDesktop] = useState(readFilesOpen);
+  const [headerHost, setHeaderHost] = useState(null);
+  const isCompact = useCompactViewport();
   const [selectedActorIds, setSelectedActorIds] = useState([]);
   const [multiSelectMode, setMultiSelectMode] = useState(false);
   const saveTimersRef = useRef({});
   const saveVersionsRef = useRef({});
   const pendingWritesRef = useRef({});
-  const drawings = {};
-  for (const [path, text] of Object.entries(files)) {
-    if (!path.endsWith('.drawing')) continue;
-    const parsed = parseJsonFile(path, text);
-    if (parsed.value) drawings[path] = parsed.value;
-  }
+  const { sprites } = collectAssets(files);
   function updateSelectedFile(nextText) {
     const path = selectedPath;
     setFiles((current) => ({
@@ -75,17 +87,47 @@ export function App() {
   }, []);
   const kind = getFileKind(selectedPath);
   const text = files[selectedPath] ?? '';
-  function selectFile(path) {
+  // The PxArt pixel editor handles `.pxart` files; pick it by kind and render a
+  // single block.
+  const PixelEditor = kind === 'pxart' ? PxArtEditor : null;
+  // Move selection to `path` and persist it, without the extra resets
+  // selectFile applies. Used by file ops that should keep the same item
+  // selected across a rename or pick a neighbor after a delete.
+  function rememberSelected(path) {
     setSelectedPath(path);
+    try {
+      localStorage.setItem(SELECTED_PATH_KEY, path);
+    } catch {
+      // Debug convenience only; selecting files still works in-session.
+    }
+  }
+  function selectFile(path) {
+    rememberSelected(path);
     setFilesSheetOpen(false);
     setSelectedActorIds([]);
     setMultiSelectMode(false);
   }
+  // One toggle, two behaviors: compact opens/closes the file-list bottom
+  // sheet (and deselects, since the sheet covers the canvas); desktop collapses
+  // the 236px file-list column and persists that to localStorage.
   const onToggleFiles = () => {
-    setFilesSheetOpen((previous) => !previous);
-    setSelectedActorIds([]);
-    setMultiSelectMode(false);
+    if (isCompact) {
+      setFilesSheetOpen((previous) => !previous);
+      setSelectedActorIds([]);
+      setMultiSelectMode(false);
+      return;
+    }
+    setFilesOpenDesktop((previous) => {
+      const next = !previous;
+      try {
+        localStorage.setItem(FILES_OPEN_KEY, next ? '1' : '0');
+      } catch {
+        // localStorage may be unavailable; the toggle still works in-session.
+      }
+      return next;
+    });
   };
+  const filesShown = isCompact ? filesSheetOpen : filesOpenDesktop;
   // Alt+Up / Alt+Down steps through files in file-browser sidebar order.
   useEffect(() => {
     function onKeyDown(event) {
@@ -114,64 +156,71 @@ export function App() {
     return () => window.removeEventListener('keydown', onKeyDown);
   }, [files, selectedPath]);
   return (
-    <AppShell>
-      <FileBrowser
-        files={files}
-        selectedPath={selectedPath}
-        onSelect={selectFile}
-        sheetOpen={filesSheetOpen}
-        onSheetOpenChange={setFilesSheetOpen}
-      />
-      {filesSheetOpen ? (
-        <div
-          className={cx(styles.sheetBackdrop, styles.mobileOnly)}
-          onClick={() => setFilesSheetOpen(false)}
+    <div className={cx(styles.editorRoot, !isCompact && !filesOpenDesktop && styles.filesHidden)}>
+      <div ref={setHeaderHost} className={styles.editorHeaderHost} />
+      <AppShell>
+        <FileBrowser
+          files={files}
+          selectedPath={selectedPath}
+          onSelect={selectFile}
+          sheetOpen={filesSheetOpen}
+          onSheetOpenChange={setFilesSheetOpen}
         />
-      ) : null}
-      <MainEditor>
-        {kind === 'scene' ? (
-          <SceneEditor
-            path={selectedPath}
-            text={text}
-            files={files}
-            drawings={drawings}
-            onChange={updateSelectedFile}
-            onToggleFiles={onToggleFiles}
-            filesOpen={filesSheetOpen}
-            selectedActorIds={selectedActorIds}
-            onSelectActorIds={setSelectedActorIds}
-            multiSelectMode={multiSelectMode}
-            onSetMultiSelectMode={setMultiSelectMode}
-          />
-        ) : null}
-        {kind === 'drawing' ? (
-          <DrawingEditor
-            path={selectedPath}
-            text={text}
-            onChange={updateSelectedFile}
-            onToggleFiles={onToggleFiles}
-            filesOpen={filesSheetOpen}
-          />
-        ) : null}
-        {kind === 'code' ? (
-          <CodeEditor
-            path={selectedPath}
-            text={text}
-            onChange={updateSelectedFile}
-            onToggleFiles={onToggleFiles}
-            filesOpen={filesSheetOpen}
-          />
-        ) : null}
-        {kind === 'text' ? (
-          <CodeEditor
-            path={selectedPath}
-            text={formatJson(text)}
-            onChange={updateSelectedFile}
-            onToggleFiles={onToggleFiles}
-            filesOpen={filesSheetOpen}
+        {filesSheetOpen ? (
+          <div
+            className={cx(styles.sheetBackdrop, styles.mobileOnly)}
+            onClick={() => setFilesSheetOpen(false)}
           />
         ) : null}
-      </MainEditor>
-    </AppShell>
+        <MainEditor>
+          {kind === 'scene' ? (
+            <SceneEditor
+              path={selectedPath}
+              text={text}
+              files={files}
+              sprites={sprites}
+              onChange={updateSelectedFile}
+              onToggleFiles={onToggleFiles}
+              filesOpen={filesShown}
+              headerHost={headerHost}
+              selectedActorIds={selectedActorIds}
+              onSelectActorIds={setSelectedActorIds}
+              multiSelectMode={multiSelectMode}
+              onSetMultiSelectMode={setMultiSelectMode}
+            />
+          ) : null}
+          {PixelEditor ? (
+            <PixelEditor
+              path={selectedPath}
+              text={text}
+              onChange={updateSelectedFile}
+              onToggleFiles={onToggleFiles}
+              filesOpen={filesShown}
+              headerHost={headerHost}
+            />
+          ) : null}
+          {kind === 'code' ? (
+            <CodeEditor
+              path={selectedPath}
+              text={text}
+              onChange={updateSelectedFile}
+              onToggleFiles={onToggleFiles}
+              filesOpen={filesShown}
+              headerHost={headerHost}
+            />
+          ) : null}
+          {kind === 'text' ? (
+            <CodeEditor
+              path={selectedPath}
+              text={formatJson(text)}
+              onChange={updateSelectedFile}
+              onToggleFiles={onToggleFiles}
+              filesOpen={filesShown}
+              headerHost={headerHost}
+            />
+          ) : null}
+        </MainEditor>
+      </AppShell>
+    </div>
   );
 }