castle-web-cli 0.4.177 → 0.4.179

package/kits/physics-2d/editors/SceneEditor.jsx

@@ -27,12 +27,14 @@ import {
   screenToCard,
   setActorComponent,
 } from '../engine/scene';
+import { fontsReady, ensureOfficialFace } from '../engine/fonts';
 import {
   addActorWithBlueprint,
   blueprintDropXY,
   cascadeDeleteBlueprint,
   countBlueprintInstances,
   createBlueprint,
+  forkBlueprint,
   getBlueprintTemplate,
   importAliasOf,
   isBlueprintPath,
@@ -679,6 +681,22 @@ export function SceneEditor({
     void writeFile(result.blueprintFile.path, result.blueprintFile.text);
     commitScene(result.sceneData);
   };
+  const onForkBlueprint = () => {
+    // New deck-owned file from the selected blueprint's template. Instances of
+    // the source are untouched — unlike new-from-actor, which reparents one.
+    if (!selectedBlueprintPath) return;
+    const result = forkBlueprint(files, selectedBlueprintPath);
+    if (!result) return;
+    if (onChangeFile) {
+      if (result.drawingFile) onChangeFile(result.drawingFile.path, result.drawingFile.text);
+      onChangeFile(result.blueprintFile.path, result.blueprintFile.text);
+    } else {
+      if (result.drawingFile) void writeFile(result.drawingFile.path, result.drawingFile.text);
+      void writeFile(result.blueprintFile.path, result.blueprintFile.text);
+    }
+    onSelectBlueprint(result.blueprintFile.path);
+    setFocusName(result.blueprintFile.path);
+  };
   return (
     <>
       <EditorHeader
@@ -846,6 +864,7 @@ export function SceneEditor({
                   files={files}
                   onEditSprite={onEditSprite}
                   onViewSource={onViewSource}
+                  onFork={onForkBlueprint}
                   autoFocusName={focusName === selectedBlueprintPath}
                   onNameFocused={() => setFocusName(null)}
                   onRename={blueprintActions.rename}
@@ -1745,6 +1764,17 @@ function useScenePlayLoop({
     const canvas = canvasRef.current;
     const ctx = canvas.getContext('2d');
     if (!ctx) return undefined;
+    // Play pane awaits this before the first frame; the editor must kick the
+    // same install or canvas text (Text actors, badges) keeps the fallback face.
+    // The loop keeps drawing, so the face snaps in once document.fonts settles.
+    void fontsReady();
+    // Faces chosen mid-session (or present on actors before fonts.generated.js
+    // was reloaded) are not in the eager module fontsReady reads — pull those
+    // in so edit mode matches play without a panel reload.
+    for (const actor of sceneData.actors ?? []) {
+      const font = actor?.components?.Text?.font;
+      if (font) void ensureOfficialFace(font);
+    }
     const viewport = isPlaying ? undefined : editViewportForZoom(editCameraRef.current.zoom);
     configureSceneCanvas(canvas, ctx, viewport);
     let raf = 0;
@@ -1956,6 +1986,7 @@ function BlueprintInspector({
   files,
   onEditSprite,
   onViewSource,
+  onFork,
   autoFocusName,
   onNameFocused,
   onRename,
@@ -2028,6 +2059,16 @@ function BlueprintInspector({
             </span>
           </div>
         </div>
+        {onFork ? (
+          <button
+            type="button"
+            className={styles.instanceForkButton}
+            onClick={onFork}
+            title="New deck blueprint copied from this one">
+            <Icon name="clone" />
+            <span>Fork blueprint</span>
+          </button>
+        ) : null}
       </div>
       <ActorInspector
         ownerKey={blueprintPath}

package/kits/physics-2d/editors/deckFont.js

@@ -1,18 +1,24 @@
-// Writing the deck's font: the generated module, and keeping it honest.
+// Writing the deck's fonts: the generated module, and keeping it honest.
 //
-// `theme.style` records WHICH face; `fonts.generated.js` carries its bytes into
-// the bundle (engine/fonts.js explains why it takes two files). The picker
-// writes both together, so they agree the moment a font is chosen.
+// `theme.style` records the PRIMARY face; `fonts.generated.js` carries bytes
+// for that face plus any `Text.font` values used in the deck (engine/fonts.js).
+// The Theme picker writes both together for the primary; the Text inspector
+// rewrites the module when a per-actor face is chosen.
 //
 // They can still drift -- someone edits `theme.style` in the code editor, or
 // takes a scene file from another deck. `syncDeckFontModule` is the repair, run
-// once per edit-mode panel load: it compares what the module carries against
-// what the record asks for and rewrites the module when they disagree. Play
-// mode never repairs, and never needs to: a published deck's module was on disk
-// when `save-deck` bundled it.
+// once per edit-mode panel load.
 
 import * as castleSdk from 'castle-web-sdk';
-import { DECK_FONT_MODULE, generatedFontName, themeFontName } from '../engine/fonts';
+import {
+  DECK_FONT_MODULE,
+  collectTextFontsFromFiles,
+  fontsGeneratedSource,
+  generatedFontName,
+  generatedFontNames,
+  orderedDeckFonts,
+  themeFontName,
+} from '../engine/fonts';
 import { initialFiles } from '../engine/files';
 import { parseThemeData, THEME_STYLE_PATH } from '../engine/palettes';
 
@@ -22,67 +28,71 @@ import { parseThemeData, THEME_STYLE_PATH } from '../engine/palettes';
 // nothing, which renders the same and just leaves a stale file behind.
 const deleteFile = castleSdk.deleteFile ?? null;
 
-/** The whole content of `fonts.generated.js` for one face. */
-export function deckFontModuleSource(name) {
-  return `// Generated by the Theme editor. Do not edit -- picking a font rewrites it.
-//
-// \`theme.style\` records that this deck's font is ${name}; this module is what
-// puts ${name}'s bytes in the published bundle. It has to name the face in a
-// static import: reaching it through the name in \`theme.style\` instead would
-// inline all nine Castle faces into the deck, since no bundler can tell which
-// one a runtime lookup reads.
-export { install${name} as installDeckFont } from 'castle-web-fonts';
-export const deckFont = '${name}';
-`;
+/** The whole content of `fonts.generated.js` for a primary + extras. */
+export function deckFontModuleSource(name, extras = []) {
+  return fontsGeneratedSource(name, extras);
 }
 
-/** An empty module, for the SDK too old to delete a file. Renders as no deck
- * font, same as the file being absent. */
 function emptyModuleSource() {
-  return `// Generated by the Theme editor. Do not edit.
-//
-// This deck has no font of its own; text renders in the default sans stack.
-export const deckFont = null;
-`;
+  return fontsGeneratedSource(null, []);
 }
 
-/** Point the deck at `name`, or at no font when it is null. Writes the module
- * through the host's debounced saver, the same path every other editor edit
- * takes. */
+function textFontsFromDeck() {
+  return collectTextFontsFromFiles(initialFiles);
+}
+
+/** Point the deck at `name` as primary, or at no primary when null. Preserves
+ * faces Text actors already use. Writes through the host's debounced saver. */
 export function writeDeckFontModule(onChangeFile, name) {
+  const extras = textFontsFromDeck();
   if (name) {
-    onChangeFile(DECK_FONT_MODULE, deckFontModuleSource(name));
+    onChangeFile(DECK_FONT_MODULE, deckFontModuleSource(name, extras));
+    return;
+  }
+  // Primary cleared: keep Text-only faces if any, else remove / empty the module.
+  const remaining = orderedDeckFonts(null, extras);
+  if (remaining.length) {
+    onChangeFile(DECK_FONT_MODULE, deckFontModuleSource(remaining[0], remaining));
     return;
   }
   if (deleteFile) void deleteFile(DECK_FONT_MODULE);
   else onChangeFile(DECK_FONT_MODULE, emptyModuleSource());
 }
 
-/** Edit mode only: make `fonts.generated.js` say what `theme.style` asks for.
- *
- * Both sides are read from the build-time snapshot, so they are compared as the
- * running page actually has them -- the write lands, the panel reloads, and the
- * next load agrees. Returns what it did, for the log, or null when there was
- * nothing to do, which is every load but the one after a hand-edit.
+/** After a Text.font change: ensure that face (plus theme + other Text fonts)
+ * is in fonts.generated.js. `pendingFont` covers the value not yet on disk. */
+export function ensureTextFontsInModule(files, pendingFont) {
+  const primary = themeFontName(parseThemeData(files?.[THEME_STYLE_PATH])) ?? generatedFontName;
+  const extras = collectTextFontsFromFiles(files);
+  if (pendingFont) extras.push(pendingFont);
+  const next = orderedDeckFonts(primary, extras);
+  const prev = generatedFontNames;
+  if (next.length === prev.length && next.every((name, i) => name === prev[i])) {
+    if ((primary ?? null) === (generatedFontName ?? null)) return null;
+  }
+  const source = next.length
+    ? fontsGeneratedSource(primary ?? next[0], next)
+    : emptyModuleSource();
+  void castleSdk.writeFile(DECK_FONT_MODULE, source).catch(() => {});
+  return `Text fonts -- rewriting ${DECK_FONT_MODULE} (${next.join(', ') || 'none'})`;
+}
+
+/** Edit mode only: make `fonts.generated.js` match theme primary + Text fonts.
  *
- * It only ever WRITES, never deletes, and that is not a shortcut. Clearing the
- * font by hand is repaired with the empty module rather than by removing the
- * file, so the repair goes through the durable save queue like every other
- * write -- see below. Picking "None" in the editor still deletes the file
- * outright; that is a person clicking, with a connection that is up. */
+ * Both sides are read from the build-time snapshot. Returns what it did, or
+ * null when there was nothing to do. */
 export function syncDeckFontModule() {
   const wanted = themeFontName(parseThemeData(initialFiles[THEME_STYLE_PATH]));
-  if (wanted === generatedFontName) return null;
-  // Deliberately not awaited. `writeFile` is durable and its promise settles
-  // with the FIRST attempt -- which here is at module scope, usually before the
-  // dev-server socket is even open, so awaiting it reports "not yet" as a
-  // failure. The queue holds the text and writes it as soon as the connection
-  // is there.
-  void castleSdk.writeFile(
-    DECK_FONT_MODULE,
-    wanted ? deckFontModuleSource(wanted) : emptyModuleSource(),
-  ).catch(() => {});
-  return wanted
-    ? `${THEME_STYLE_PATH} asks for ${wanted} -- rewriting ${DECK_FONT_MODULE}`
+  const extras = textFontsFromDeck();
+  const next = orderedDeckFonts(wanted, extras);
+  const prev = generatedFontNames;
+  const primaryMatch = (wanted ?? null) === (generatedFontName ?? null);
+  const listMatch = next.length === prev.length && next.every((name, i) => name === prev[i]);
+  if (primaryMatch && listMatch) return null;
+  void castleSdk
+    .writeFile(DECK_FONT_MODULE, next.length ? fontsGeneratedSource(wanted ?? next[0], next) : emptyModuleSource())
+    .catch(() => {});
+  return next.length
+    ? `fonts -- rewriting ${DECK_FONT_MODULE} (primary ${wanted ?? next[0]}; ${next.join(', ')})`
     : `${THEME_STYLE_PATH} sets no font -- clearing ${DECK_FONT_MODULE}`;
 }

package/kits/physics-2d/editors/fontPreview.js

@@ -4,48 +4,16 @@
 // deck must never do: importing all nine would inline 495 KB into every
 // published deck, and the whole physics-2d bundle is under 900 KB.
 //
-// So the specimens are not imported, they are FETCHED. The dev server serves
-// the deck's `node_modules` as static files, and `castle-web-fonts` ships the
-// raw woff2 alongside its modules, so a plain URL reaches every face at no cost
-// to the bundle. That only works while editing locally — which is the only
-// place an editor runs, so nothing is lost. A face that doesn't arrive leaves
-// its card in the UI font, and the picker still picks.
+// So the specimens are not imported, they are FETCHED (see ensureOfficialFace).
+// That only works while editing locally — which is the only place an editor
+// runs, so nothing is lost. A face that doesn't arrive leaves its card in the
+// UI font, and the picker still picks.
 
 import { useEffect, useState } from 'react';
-import { OFFICIAL_FONTS } from '../engine/fonts';
+import { OFFICIAL_FONTS, ensureOfficialFace } from '../engine/fonts';
 
 const FACE_NAMES = OFFICIAL_FONTS.map((face) => face.name);
 
-const faceUrl = (name) => `/node_modules/castle-web-fonts/woff2/${name}.woff2`;
-
-// Module-scope so the panel's re-renders don't refetch, and so switching files
-// and back is instant. Values are promises resolving to true / false.
-const requests = new Map();
-
-function request(name) {
-  const pending = requests.get(name);
-  if (pending) return pending;
-  const load = loadFace(name);
-  requests.set(name, load);
-  return load;
-}
-
-async function loadFace(name) {
-  if (typeof FontFace === 'undefined') return false;
-  try {
-    // Registered under the face's real family name, so a card just asks for
-    // `font-family: Tektur`. When the deck's own font is already installed this
-    // adds a second face for that family from the identical bytes — which
-    // renders identically, and costs one entry in document.fonts.
-    const face = new FontFace(name, `url("${faceUrl(name)}") format("woff2")`);
-    await face.load();
-    document.fonts.add(face);
-    return true;
-  } catch {
-    return false; // no serve, or an install without the package: no specimen.
-  }
-}
-
 /** Load every Castle face's specimen and report which have arrived. Cards
  * re-render into their own face as each one lands. */
 export function usePreviewFaces() {
@@ -53,7 +21,7 @@ export function usePreviewFaces() {
   useEffect(() => {
     let live = true;
     for (const name of FACE_NAMES) {
-      void request(name).then((ok) => {
+      void ensureOfficialFace(name).then((ok) => {
         if (!ok || !live) return;
         setLoaded((current) => (current.has(name) ? current : new Set(current).add(name)));
       });

package/kits/physics-2d/editors/pixelInspector.jsx

@@ -1,8 +1,10 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
+import React, { useRef, useState } from 'react';
 import { GRID_RENDERER, RESOLUTION_STEPS, VECTOR_RENDERER } from '../engine/pxart';
+import { PaletteGrid, PalettePager, PalettePopover } from '../engine/paletteField';
 import { cx, Icon, IconButton, Panel, styles } from '../engine/ui';
 
+export { NoneSwatch, PaletteGrid, PalettePager, PalettePopover, sameHex } from '../engine/paletteField';
+
 // Brush/erase diameters offered by the pixel editors' size sliders.
 export const BRUSH_SIZES = [1, 2, 3, 4, 6, 8, 12, 16, 24, 32];
 
@@ -223,86 +225,6 @@ function ResolutionSelect({ label, value, onChange, disabled = false }) {
   );
 }
 
-function sameHex(a, b) {
-  return !!a && !!b && a.toLowerCase() === b.toLowerCase();
-}
-
-function NoneSwatch({ selected, onSelect }) {
-  return (
-    <button
-      type="button"
-      className={cx(styles.swatch, selected && styles.swatchSelected)}
-      title="None"
-      aria-label="None"
-      style={{ position: 'relative', background: 'transparent' }}
-      onClick={onSelect}>
-      <span
-        aria-hidden
-        style={{
-          position: 'absolute',
-          inset: 4,
-          background:
-            'linear-gradient(to top right, transparent calc(50% - 1px), #e66 calc(50% - 1px), #e66 calc(50% + 1px), transparent calc(50% + 1px))',
-        }}
-      />
-    </button>
-  );
-}
-
-// Swatch strip shared by the docked sidebar and the compact popover.
-// `keys` paints a sprite's working palette; `hexes` paints a picker list.
-// `wrap` is the unlabeled sprite row; the named official page is an 8-col grid.
-export function PaletteGrid({
-  keys,
-  hexes,
-  palette,
-  activeKey,
-  activeHex,
-  onSelectKey,
-  onSelectHex,
-  allowNone = false,
-  noneSelected = false,
-  onSelectNone,
-  wrap = false,
-}) {
-  const items = hexes
-    ? hexes.map((hex) => ({ id: hex, hex, selected: sameHex(activeHex, hex), onClick: () => onSelectHex?.(hex) }))
-    : (keys ?? []).map((key) => ({
-        id: key,
-        hex: palette?.[key],
-        selected: activeKey === key || sameHex(activeHex, palette?.[key]),
-        onClick: () => onSelectKey?.(key),
-      }));
-  if (!allowNone && !items.length) return null;
-  return (
-    <div className={wrap ? styles.paletteSpriteRow : styles.palette}>
-      {allowNone ? <NoneSwatch selected={noneSelected} onSelect={onSelectNone} /> : null}
-      {items.map((item) => (
-        <button
-          key={item.id}
-          type="button"
-          className={cx(styles.swatch, item.selected && styles.swatchSelected)}
-          title={item.hex}
-          style={{ background: item.hex }}
-          onClick={item.onClick}
-        />
-      ))}
-    </div>
-  );
-}
-
-function PalettePager({ name, onPage }) {
-  return (
-    <div className={styles.palettePager}>
-      <span className={styles.palettePagerName}>{name}</span>
-      <div className={styles.palettePagerBtns}>
-        <IconButton icon="chevron-left" label="Previous palette" onClick={() => onPage(-1)} />
-        <IconButton icon="chevron-right" label="Next palette" onClick={() => onPage(1)} />
-      </div>
-    </div>
-  );
-}
-
 // Unlabeled sprite-color row (when the sprite has colors, or when fill/stroke
 // needs a none swatch) plus a paged official-palette grid. Paging only changes
 // which named page is shown — it does not write theme.style.
@@ -349,78 +271,6 @@ export function PaletteSections({
   );
 }
 
-// Anchored palette + eyedropper popover for compact/mobile paint-strip color tap.
-export function PalettePopover({ open, anchorRef, onClose, children }) {
-  const popoverRef = useRef(null);
-  const [position, setPosition] = useState({ top: 0, left: 0 });
-
-  useLayoutEffect(() => {
-    if (!open || !anchorRef.current) return;
-
-    function positionPopover() {
-      const anchor = anchorRef.current.getBoundingClientRect();
-      const rect = popoverRef.current?.getBoundingClientRect();
-      const margin = 8;
-      const width = rect?.width ?? 231;
-      const height = rect?.height ?? 320;
-      const maxLeft = Math.max(margin, window.innerWidth - width - margin);
-      const maxTop = Math.max(margin, window.innerHeight - height - margin);
-      const leftSide = anchor.left - width - margin;
-      const rightSide = anchor.right + margin;
-      // Prefer the side with room, then clamp a too-wide picker inside this
-      // iframe rather than sending it beyond either viewport edge.
-      const left =
-        leftSide >= margin
-          ? leftSide
-          : rightSide <= maxLeft
-            ? rightSide
-            : Math.min(maxLeft, Math.max(margin, anchor.left + anchor.width / 2 - width / 2));
-      const top = Math.min(maxTop, Math.max(margin, anchor.top));
-      setPosition({ top, left });
-    }
-
-    positionPopover();
-    window.addEventListener('resize', positionPopover);
-    window.addEventListener('scroll', positionPopover, true);
-    return () => {
-      window.removeEventListener('resize', positionPopover);
-      window.removeEventListener('scroll', positionPopover, true);
-    };
-  }, [open, anchorRef]);
-
-  useEffect(() => {
-    if (!open) return undefined;
-    function onKeyDown(event) {
-      if (event.key === 'Escape') onClose();
-    }
-    function onPointerDown(event) {
-      if (popoverRef.current?.contains(event.target) || anchorRef.current?.contains(event.target)) {
-        return;
-      }
-      onClose();
-    }
-    window.addEventListener('keydown', onKeyDown);
-    window.addEventListener('pointerdown', onPointerDown);
-    return () => {
-      window.removeEventListener('keydown', onKeyDown);
-      window.removeEventListener('pointerdown', onPointerDown);
-    };
-  }, [open, onClose, anchorRef]);
-
-  if (!open) return null;
-  return createPortal(
-    <div
-      ref={popoverRef}
-      className={styles.palettePopover}
-      style={{ top: position.top, left: position.left }}
-      role="dialog"
-      aria-label="Palette">
-      {children}
-    </div>,
-    document.body
-  );
-}
-
 // The shape tool's sub-mode picker, shared by the compact paint strip and the
 // wide-layout settings panel. `buttonClass` styles each glyph button for its
 // host strip; `radio` switches the a11y semantics to a radiogroup.

package/kits/physics-2d/engine/blueprint.js

@@ -696,6 +696,34 @@ export function newBlueprintFromActor(files, behaviors, sceneData, actorId) {
   return { sceneData: next, blueprintFile };
 }
 
+// "Fork blueprint": mint a NEW deck-owned blueprint whose template is a copy of
+// the selected one. Additive — existing instances keep pointing at the source.
+// An import's art is copied into the deck (same as creating from a kit preset)
+// so the fork is editable; a deck-owned source keeps sharing its art refs.
+export function forkBlueprint(files, blueprintPath) {
+  const template = getBlueprintTemplate(files, blueprintPath);
+  if (!template) return null;
+  const existingPaths = new Set(Object.keys(files ?? {}));
+  const existingNames = listBlueprints(files)
+    .filter((blueprint) => !isImportedPath(blueprint.path))
+    .map((blueprint) => blueprint.name);
+  const base = `${template.name || 'Blueprint'} (forked)`;
+  const name = mintNameFromBase(existingNames, base);
+  const path =
+    mintPathFromName(existingPaths, name, BLUEPRINTS_DIR, '.scene') ??
+    mintBlueprintPath([...existingPaths]);
+  const components = structuredClone(template.components ?? {});
+  let drawingFile = null;
+  if (isImportedPath(blueprintPath)) {
+    drawingFile = adoptBuiltinArt(files, components, existingPaths, name);
+  }
+  for (const props of Object.values(components ?? {})) reprojectRefsIn(props, files, path);
+  return {
+    blueprintFile: { path, name, components, text: formatBlueprintFileText(name, components) },
+    drawingFile,
+  };
+}
+
 // Every `scenes/*.scene` file's parsed data, for callers that need to scan
 // every scene in the deck (cascade delete, the instance-count badge/confirm).
 // Skips unparseable files rather than throwing -- a mid-edit scene with