castle-web-cli 0.4.71 → 0.4.73

package/kits/basic-2d/editors/pxArtTimeline.module.css

@@ -0,0 +1,506 @@
+/* Layers x frames timeline panel for the PxArt editor. Sits below the artboard
+   in the editor's left column: a toolbar row, a horizontally-scrolling
+   layers(rows) x frames(columns) grid, then the tags panel. Colors reuse the
+   shared inspector CSS variables from engine/ui.module.css. */
+
+/* The editor's left column: artboard region stacked above the timeline. Takes
+   grid column 1 of the shared .drawingEditor grid (the inspector is column 2). */
+.editorLeft {
+  grid-column: 1;
+  grid-row: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+.artboardRegion {
+  flex: 1 1 0;
+  min-height: 0;
+  display: flex;
+  overflow: hidden;
+}
+
+@container editor (max-width: 620px) {
+  .barLabel {
+    display: none;
+  }
+}
+
+/* Height is driven by an inline style from the resize handle (see
+   pxArtTimeline.jsx); flex-shrink stays 0 so the artboard region above keeps
+   the remainder. */
+.timeline {
+  position: relative;
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border-top: 1px solid var(--castle-inspector-divider);
+  background: var(--castle-workspace-bg);
+  color: var(--castle-inspector-text);
+  font-size: 13px;
+  overflow: hidden;
+}
+
+/* Drag target sitting over the top divider. Absolute so it consumes no layout.
+   Neutral hover/active treatment (no accent/purple highlight) to stay
+   consistent with the editor's existing chrome. */
+.resizeHandle {
+  position: absolute;
+  top: -3px;
+  left: 0;
+  right: 0;
+  height: 7px;
+  cursor: row-resize;
+  background: transparent;
+  z-index: 5;
+  touch-action: none;
+}
+
+.resizeHandle:hover {
+  background: var(--castle-inspector-border);
+}
+
+.resizeHandleActive,
+.resizeHandleActive:hover {
+  background: var(--castle-inspector-muted);
+}
+
+.bar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 14px;
+  padding: 8px;
+  border-bottom: 1px solid var(--castle-inspector-divider);
+}
+
+.barGroup {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.barLabel {
+  color: var(--castle-inspector-muted);
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.barSpacer {
+  flex: 1 1 auto;
+}
+
+.barUnit {
+  color: var(--castle-inspector-muted);
+  font-size: 11px;
+}
+
+.globalDuration {
+  width: 56px;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: var(--castle-radius);
+  background: var(--castle-inspector-input-bg);
+  color: var(--castle-inspector-text);
+  padding: 4px 6px;
+  text-align: center;
+}
+
+/* Icon-only label (stopwatch) sitting next to the global duration input, in
+   place of the old "Duration … ms · all frames" text. */
+.durationIcon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--castle-inspector-muted);
+}
+
+.durationGlyph {
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
+
+.miniInput {
+  width: 64px;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: var(--castle-radius);
+  background: var(--castle-inspector-input-bg);
+  color: var(--castle-inspector-text);
+  padding: 4px 6px;
+}
+
+.scroll {
+  flex: 1 1 0;
+  min-height: 0;
+  overflow: auto;
+}
+
+.grid {
+  display: inline-flex;
+  flex-direction: column;
+  min-width: 100%;
+}
+
+.row {
+  display: flex;
+  align-items: stretch;
+}
+
+/* Grid separators: every grid element (corner, frame headers, layer headers,
+   and art cells) draws a SINGLE 1px right+bottom divider. Interior edges are
+   each owned by exactly one element (no two borders meet), so there are no
+   doubled/thicker seams. The grid's outer top is the toolbar's existing bottom
+   divider; outer right/bottom come from the last cells. */
+.corner {
+  flex: 0 0 168px;
+  border-right: 1px solid var(--castle-inspector-divider);
+  border-bottom: 1px solid var(--castle-inspector-divider);
+  background: var(--castle-workspace-bg);
+  position: sticky;
+  left: 0;
+  z-index: 2;
+}
+
+.frameHead {
+  flex: 0 0 52px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 3px;
+  border-right: 1px solid var(--castle-inspector-divider);
+  border-bottom: 1px solid var(--castle-inspector-divider);
+  background: transparent;
+  color: var(--castle-inspector-muted);
+  cursor: pointer;
+}
+
+.frameHeadActive {
+  background: var(--castle-black);
+  color: var(--castle-text);
+}
+
+.frameNum {
+  font-variant-numeric: tabular-nums;
+  font-size: 12px;
+}
+
+.durationInput {
+  width: 44px;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: 3px;
+  background: var(--castle-inspector-input-bg);
+  color: var(--castle-inspector-text);
+  padding: 1px 3px;
+  font-size: 11px;
+  text-align: center;
+}
+
+/* An OVERRIDDEN frame duration: accented + bold so it reads distinctly from the
+   greyed placeholder shown by frames that inherit the global. */
+.durationOverride {
+  color: var(--castle-text);
+  font-weight: 600;
+  border-color: var(--castle-blue);
+}
+
+.layerHead {
+  flex: 0 0 168px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border-right: 1px solid var(--castle-inspector-divider);
+  border-bottom: 1px solid var(--castle-inspector-divider);
+  background: var(--castle-workspace-bg);
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  cursor: pointer;
+}
+
+.layerHeadActive {
+  background: var(--castle-black);
+}
+
+.layerTopRow {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.visBtn {
+  flex: 0 0 auto;
+  width: 22px;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: var(--castle-radius);
+  background: var(--castle-inspector-button-bg);
+  color: var(--castle-inspector-text);
+  cursor: pointer;
+  padding: 0;
+}
+
+.visBtn:hover {
+  background: var(--castle-inspector-input-bg);
+}
+
+.visBtn svg {
+  width: 12px;
+  height: 12px;
+}
+
+/* Inline FA eye / eye-slash glyph for the visibility toggle (see FaGlyph). */
+.visGlyph {
+  width: 12px;
+  height: 12px;
+  fill: currentColor;
+}
+
+/* Hidden layer: the visibility toggle borrows the standard disabled LOOK
+   (0.35 dimming, matching the undo button) without being disabled -- this
+   button stays interactive and toggles default <-> disabled-look. */
+.visOff {
+  opacity: 0.35;
+}
+
+/* Static layer-name label (rename was removed from the UI). */
+.name {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: none;
+  border: 0;
+  color: inherit;
+  text-align: left;
+  padding: 0;
+}
+
+/* Slim opacity slider: a thin custom track + small thumb so the layer header
+   cell stays no taller than the art (thumbnail) cells in its row. */
+.opacity {
+  width: 100%;
+  height: 12px;
+  margin: 0;
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  background: transparent;
+  accent-color: var(--castle-selected);
+}
+
+.opacity::-webkit-slider-runnable-track {
+  height: 3px;
+  border-radius: 2px;
+  background: var(--castle-inspector-border);
+}
+
+.opacity::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 10px;
+  height: 10px;
+  margin-top: -3.5px;
+  border-radius: 50%;
+  background: var(--castle-selected);
+}
+
+.opacity::-moz-range-track {
+  height: 3px;
+  border-radius: 2px;
+  background: var(--castle-inspector-border);
+}
+
+.opacity::-moz-range-thumb {
+  width: 10px;
+  height: 10px;
+  border: 0;
+  border-radius: 50%;
+  background: var(--castle-selected);
+}
+
+/* The cell is a real <button>, so wipe the UA button chrome first. Crucially
+   `border: 0` clears the default TOP/LEFT borders the UA otherwise keeps (we only
+   override right/bottom below) — those surviving defaults were the "heavier /
+   doubled" top-left edge. The reset comes BEFORE the divider longhands so our
+   right+bottom separators still apply; the selected-cell inset stroke lives on
+   .cellActive (box-shadow) and is unaffected by this border reset. */
+.cell {
+  appearance: none;
+  -webkit-appearance: none;
+  margin: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  color: inherit;
+  text-align: center;
+  box-sizing: border-box;
+  flex: 0 0 52px;
+  height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  border-right: 1px solid var(--castle-inspector-divider);
+  border-bottom: 1px solid var(--castle-inspector-divider);
+  cursor: pointer;
+  position: relative;
+}
+
+.cellActive {
+  background: rgb(141 183 255 / 0.16);
+  box-shadow: inset 0 0 0 2px var(--castle-blue);
+}
+
+.thumb {
+  width: 100%;
+  height: 100%;
+}
+
+.thumbCanvas {
+  width: 100%;
+  height: 100%;
+  image-rendering: pixelated;
+  display: block;
+}
+
+/* Empty/absent cell: plain and empty. The cell's own grid separators (see the
+   .corner/.cell border rules) still bound it; there's no dashed interior. */
+.empty {
+  width: 100%;
+  height: 100%;
+  background: transparent;
+}
+
+.linkBadge {
+  position: absolute;
+  left: 5px;
+  top: 5px;
+  width: 14px;
+  height: 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /* Match the thumb/.linkRing corner rounding (2px). A larger radius left a
+     sliver of the parent's rounded corner peeking behind the badge. */
+  border-radius: 2px;
+  background: var(--castle-blue);
+  color: var(--castle-selected-ink);
+}
+
+.linkBadge svg {
+  width: 9px;
+  height: 9px;
+}
+
+.linkRing {
+  box-shadow: inset 0 0 0 1px var(--castle-blue);
+  border-radius: 2px;
+}
+
+/* Fade only the linked cell's thumbnail IMAGE (the canvas) to signal a shared
+   image. Scoped to the canvas inside a linked thumb, so the blue ring
+   (.linkRing box-shadow) and the link badge (.linkBadge) stay full opacity. */
+.linkRing .thumbCanvas {
+  opacity: 0.5;
+}
+
+.tags {
+  flex: 0 0 auto;
+  max-height: 38%;
+  overflow: auto;
+  border-top: 1px solid var(--castle-inspector-divider);
+  padding: 8px 12px;
+}
+
+.tagsHead {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.tagRow {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+
+.tagName {
+  flex: 1 1 90px;
+  min-width: 0;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: 3px;
+  background: var(--castle-inspector-input-bg);
+  color: var(--castle-inspector-text);
+  padding: 3px 6px;
+}
+
+.tagNum {
+  width: 46px;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: 3px;
+  background: var(--castle-inspector-input-bg);
+  color: var(--castle-inspector-text);
+  padding: 3px 4px;
+  text-align: center;
+}
+
+.tagSelect {
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: 3px;
+  background: var(--castle-inspector-input-bg);
+  color: var(--castle-inspector-text);
+  padding: 3px 4px;
+}
+
+.tagDefault {
+  flex: 0 0 auto;
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: var(--castle-radius);
+  background: var(--castle-inspector-button-bg);
+  color: var(--castle-inspector-muted);
+  cursor: pointer;
+  padding: 0;
+}
+
+.tagDefault:hover {
+  background: var(--castle-inspector-input-bg);
+}
+
+.tagDefaultOn,
+.tagDefaultOn:hover {
+  background: var(--castle-selected);
+  border-color: var(--castle-selected);
+  color: var(--castle-selected-ink);
+}
+
+.tagDefault svg {
+  width: 12px;
+  height: 12px;
+}
+
+.muted {
+  color: var(--castle-inspector-muted);
+  font-size: 12px;
+}
+
+/* Disabled right-click menu item (reuses the shared selArrangeItem chrome). */
+.menuItemDisabled {
+  opacity: 0.4;
+  cursor: default;
+}

package/kits/basic-2d/editors/pxArtTools.js

@@ -0,0 +1,124 @@
+import { EDG64, KEY_ALPHABET, normalizeHex, TRANSPARENT } from '../engine/pxart';
+import { forEachDab, forEachLinePoint } from './pixelGeometry';
+
+// The PxArt editor paints over the FIXED full Endesga-64 palette (no free color
+// picking). Each palette color gets a stable single-char key (KEY_ALPHABET, 64
+// distinct keys); the transparent cell is the reserved "." (TRANSPARENT).
+export const EDITOR_KEYS = EDG64.map((_, index) => KEY_ALPHABET[index]);
+
+// key -> "#rrggbb" record, in palette order. Passed to the SDK's fromCells so
+// serialized files carry only the palette entries actually used.
+export const EDITOR_PALETTE = Object.fromEntries(
+  EDG64.map((hex, index) => [EDITOR_KEYS[index], hex])
+);
+
+// hex -> palette key, for mapping a loaded sprite's colors onto the swatch.
+const KEY_BY_HEX = new Map(EDG64.map((hex, index) => [hex, EDITOR_KEYS[index]]));
+
+// Build a `height x width` matrix of "." (transparent) cells.
+export function blankCells(width, height) {
+  return Array.from({ length: height }, () => Array.from({ length: width }, () => TRANSPARENT));
+}
+
+// Snap an arbitrary hex color to the nearest palette key by RGB distance, so a
+// loaded sprite whose palette isn't exactly the Endesga-64 set still maps onto
+// the fixed swatch. Returns "." for invalid/transparent input.
+export function editorKeyForHex(hex) {
+  const norm = typeof hex === 'string' ? normalizeHex(hex) : null;
+  if (!norm) return TRANSPARENT;
+  const exact = KEY_BY_HEX.get('#' + norm.slice(1, 7));
+  if (exact) return exact;
+  const r = parseInt(norm.slice(1, 3), 16);
+  const g = parseInt(norm.slice(3, 5), 16);
+  const b = parseInt(norm.slice(5, 7), 16);
+  let bestKey = EDITOR_KEYS[0];
+  let bestDist = Infinity;
+  EDG64.forEach((swatch, index) => {
+    const dist =
+      (r - parseInt(swatch.slice(1, 3), 16)) ** 2 +
+      (g - parseInt(swatch.slice(3, 5), 16)) ** 2 +
+      (b - parseInt(swatch.slice(5, 7), 16)) ** 2;
+    if (dist < bestDist) {
+      bestDist = dist;
+      bestKey = EDITOR_KEYS[index];
+    }
+  });
+  return bestKey;
+}
+
+function isInside(cells, x, y) {
+  return y >= 0 && y < cells.length && x >= 0 && x < (cells[0]?.length ?? 0);
+}
+
+function copyCells(cells) {
+  return cells.map((row) => row.slice());
+}
+
+// Paint a single cell in a working matrix; returns true when it changed.
+function writeCell(cells, x, y, key) {
+  if (!isInside(cells, x, y) || cells[y][x] === key) return false;
+  cells[y][x] = key;
+  return true;
+}
+
+// Paint `key` along the segment from `from` to `to` with a brush of `size`
+// cells (1 = single cell). Returns a new matrix when anything changed, else the
+// original (so callers can skip no-op commits).
+export function paintLine(cells, from, to, key, size = 1) {
+  const next = copyCells(cells);
+  let changed = false;
+  forEachLinePoint(from, to, (cx, cy) => {
+    forEachDab(size, (dx, dy) => {
+      changed = writeCell(next, cx + dx, cy + dy, key) || changed;
+    });
+  });
+  return changed ? next : cells;
+}
+
+// Both region tools share the same guard: bail when the start is out of bounds
+// or already the target key, else return a working copy plus the key to replace.
+function beginKeyReplace(cells, start, key) {
+  if (!isInside(cells, start.x, start.y)) return null;
+  const target = cells[start.y][start.x];
+  if (target === key) return null;
+  return { next: copyCells(cells), target };
+}
+
+// Flood-fill the contiguous region matching the start cell's key with `key`.
+// Passing TRANSPARENT erases the contiguous region (the "fill mode" eraser).
+export function fillRegion(cells, start, key) {
+  const begin = beginKeyReplace(cells, start, key);
+  if (!begin) return cells;
+  const { next, target } = begin;
+  const queue = [start];
+  while (queue.length) {
+    const { x, y } = queue.pop();
+    if (!isInside(next, x, y) || next[y][x] !== target) continue;
+    next[y][x] = key;
+    queue.push({ x: x + 1, y }, { x: x - 1, y }, { x, y: y + 1 }, { x, y: y - 1 });
+  }
+  return next;
+}
+
+// Recolor EVERY cell matching the start cell's key to `key` (global swap): a
+// fixed-palette palette-swap fill mode.
+export function swapKey(cells, start, key) {
+  const begin = beginKeyReplace(cells, start, key);
+  if (!begin) return cells;
+  const { next, target } = begin;
+  let changed = false;
+  for (let y = 0; y < next.length; y++) {
+    const row = next[y];
+    for (let x = 0; x < row.length; x++) {
+      if (row[x] !== target) continue;
+      row[x] = key;
+      changed = true;
+    }
+  }
+  return changed ? next : cells;
+}
+
+// The palette key under a cell (for the eyedropper), or "." when transparent.
+export function sampleKey(cells, point) {
+  return isInside(cells, point.x, point.y) ? cells[point.y][point.x] : TRANSPARENT;
+}