castle-web-cli 0.4.77 → 0.4.79

package/kits/basic-2d/engine/pxartSmooth.js

@@ -0,0 +1,222 @@
+// ============================================================================
+// "Smooth" (Animal-Crossing-style) rendering for `.pxart` sprites.
+// ============================================================================
+//
+// Sprites with a file-level `cornerRadius` > 0 (see pxart.js /
+// docs/pxart-format.md) render through `renderSmoothSpriteFrame` instead of
+// the normal 1px/cell `renderSpriteFrame`.
+//
+// This is a LOCAL, per-pixel kernel filter — the same shape of algorithm as
+// Animal Crossing's actual smoothing (xBRZ-style template matching), not the
+// global boundary-trace-and-round approach this file used to implement. That
+// approach traced each region's FULL pixel-boundary loop and could detect
+// long straight/staircase runs across the whole loop; it looked fine on
+// blocky shapes but flattened organic curves it decided were "too regular",
+// which isn't fixable by tuning since the run detection itself is the
+// problem. This version never looks past a pixel's immediate 3x3
+// neighborhood, so there is no run/regularity detection to mis-fire — it
+// physically cannot flatten a curve, because it has no notion of a curve at
+// all, only of each corner in isolation.
+//
+// Approach, per source pixel P:
+//   1. Composite the frame normally (`renderSpriteFrame` — this already
+//      handles layer visibility/opacity/blend), then read back the native
+//      resolution raster. Regions are exact-RGBA-equality color runs, same as
+//      before.
+//   2. Supersample: P gets its own `scale` x `scale` block of the output
+//      canvas (plain grid subdivision — every output pixel belongs to
+//      exactly one source pixel's block, so there is no possibility of a
+//      gap or overlap between neighboring pixels' rendering).
+//   3. Fill P's whole block with its own color, then independently classify
+//      each of P's 4 corners against ONLY the 3 pixels touching that corner
+//      (2 edge-adjacent neighbors + 1 diagonal) and, for genuine convex
+//      corners, paint a `cornerRadius`-sized quarter-circle "cut" over that
+//      corner revealing the relevant neighbor's color (see `cornerFill`).
+// Because every pixel only ever paints within its OWN block, this recoloring
+// can never create a gap: it's the same guarantee a supersampled nearest-
+// neighbor render already has, just with a softened corner instead of a hard
+// one.
+//
+// Kept as a sibling of pxart.js (rather than inside it) so the format
+// parser/serializer stays focused on the on-disk shape.
+// ============================================================================
+
+import { MAX_CORNER_RADIUS, renderSpriteFrame } from './pxart';
+
+export const DEFAULT_SMOOTH_SCALE = 8;
+
+// Fallback only for a caller that omits `cornerRadius` entirely; every real
+// caller passes the sprite's own file-level `cornerRadius` value (see
+// docs/pxart-format.md and Sprite.jsx/PxArtEditor.jsx), which is how the
+// corner radius ends up being a portable, per-sprite part of the format
+// rather than a fixed constant every smooth sprite is stuck with.
+const FALLBACK_CORNER_RADIUS = 0.25;
+
+/** Render one frame of a Sprite with locally corner-rounded fills,
+ *  supersampled into `canvas` (sized to width*scale x height*scale). Reuses
+ *  `renderSpriteFrame` for compositing (layers, opacity, visibility, blend),
+ *  so those keep working unchanged. `cornerRadius` is in native-pixel units,
+ *  clamped to `MAX_CORNER_RADIUS` (two cuts on the same edge must not
+ *  overlap). */
+export function renderSmoothSpriteFrame(
+  sprite,
+  frameIndex,
+  canvas,
+  { scale = DEFAULT_SMOOTH_SCALE, cornerRadius = FALLBACK_CORNER_RADIUS } = {}
+) {
+  const clampedRadius = Math.min(MAX_CORNER_RADIUS, Math.max(0, cornerRadius));
+  const { width, height } = sprite.resolution;
+  canvas.width = Math.max(1, Math.round(width * scale));
+  canvas.height = Math.max(1, Math.round(height * scale));
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  if (width <= 0 || height <= 0) return;
+
+  const native = document.createElement('canvas');
+  renderSpriteFrame(sprite, frameIndex, native);
+  const nctx = native.getContext('2d');
+  const data = nctx?.getImageData(0, 0, width, height).data;
+  if (!data) return;
+
+  // null = out of canvas OR fully transparent; both read as "not this pixel's
+  // color" to every classification below, same as the old mask's treatment
+  // of out-of-canvas/transparent as background.
+  const colorAt = (x, y) => {
+    if (x < 0 || x >= width || y < 0 || y >= height) return null;
+    const i = (y * width + x) * 4;
+    const a = data[i + 3];
+    return a === 0 ? null : `${data[i]},${data[i + 1]},${data[i + 2]},${a}`;
+  };
+
+  ctx.save();
+  ctx.scale(scale, scale);
+  // Every pixel is processed, including transparent ones: a fully-enclosed
+  // transparent "hole" is, from its own corners' point of view, exactly the
+  // same kind of convex corner as an opaque pixel poking out of a
+  // background — it needs to cut (and round) its OWN corners the same way,
+  // or an enclosed 1px hole would stay a hard square forever (its opaque
+  // neighbors never round toward it, by the same-neighbor rule below).
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) drawPixelBlock(ctx, colorAt, x, y, colorAt(x, y), clampedRadius);
+  }
+  ctx.restore();
+}
+
+// ---------------------------------------------------------------------------
+// per-pixel local corner kernel
+// ---------------------------------------------------------------------------
+
+const NO_CUT = undefined;
+
+// Fill pixel (x, y)'s own unit square [x, x+1] x [y, y+1] with `color` (a
+// no-op when `color` is null — transparent, nothing to fill), then paint a
+// small rounded cut over each of its 4 corners that qualifies (see
+// `cornerFill`). Uses ONLY the 3x3 neighborhood of (x, y) — genuinely local,
+// unlike the old global loop trace.
+function drawPixelBlock(ctx, colorAt, x, y, color, cornerRadius) {
+  const north = colorAt(x, y - 1);
+  const south = colorAt(x, y + 1);
+  const west = colorAt(x - 1, y);
+  const east = colorAt(x + 1, y);
+
+  const cuts = [
+    ['TL', cornerFill(color, west, north, colorAt(x - 1, y - 1))],
+    ['TR', cornerFill(color, east, north, colorAt(x + 1, y - 1))],
+    ['BL', cornerFill(color, west, south, colorAt(x - 1, y + 1))],
+    ['BR', cornerFill(color, east, south, colorAt(x + 1, y + 1))],
+  ];
+
+  if (color) {
+    ctx.fillStyle = rgbaFillStyle(color);
+    ctx.fillRect(x, y, 1, 1);
+  }
+
+  if (cornerRadius <= 0) return;
+  for (const [corner, reveal] of cuts) {
+    if (reveal === NO_CUT) continue;
+    ctx.beginPath();
+    tracePixelWedge(ctx, corner, x, y, cornerRadius);
+    if (reveal === null) {
+      // Revealing transparency: clip to the wedge and clear it, rather than
+      // fill it, since there's no color to paint.
+      ctx.save();
+      ctx.clip();
+      ctx.clearRect(x, y, 1, 1);
+      ctx.restore();
+    } else {
+      ctx.fillStyle = rgbaFillStyle(reveal);
+      ctx.fill();
+    }
+  }
+}
+
+// Classify one corner of pixel `color`, given its two edge-adjacent
+// neighbors (`a`, `b`) and its diagonal neighbor (`g`). Returns the neighbor
+// color to reveal at that corner's rounded cut, or `NO_CUT` to leave the
+// corner sharp:
+//   - `a` or `b` matches `color`: either a flat/interior corner, or (when
+//     they don't BOTH match) a straight edge passing by rather than a real
+//     corner. Either way, nothing to round from P's side — a matching
+//     neighbor's OWN corner classification (evaluated independently, when
+//     IT is P) is what rounds the opposite case; the physical wedge that
+//     gets cut always lives entirely inside whichever pixel's corner is
+//     convex, so there's no double-handling.
+//   - neither `a` nor `b` matches, but `g` DOES: a diagonal touch between
+//     two same-colored pixels (the "checkerboard" case). Left uncut, so a
+//     smoothed diagonal stroke doesn't get visually pinched off at every
+//     step.
+//   - neither `a`, `b`, nor `g` matches, and `a` and `b` are THE SAME color:
+//     a genuine, unambiguous convex corner of P's own region touching one
+//     other region. Cut it, revealing that color.
+//   - neither `a`, `b`, nor `g` matches, and `a` and `b` DIFFER: three (or
+//     four, counting `g`) distinct colors meet at this exact point — e.g. a
+//     "T" where one region's straight edge is crossed by the boundary
+//     between two others. Left uncut. Rounding here would have to guess
+//     which of `a`/`b` "wins", and since the pixel on the OTHER side of
+//     that guess is classifying this same point independently — and would
+//     guess differently — a pair of pixels each revealing the OTHER's
+//     color produces a little criss-crossed notch instead of one clean
+//     curve. Leaving every pixel at a 3+-way point sharp keeps it a single
+//     consistent (if unrounded) vertex.
+function cornerFill(color, a, b, g) {
+  if (a === color || b === color) return NO_CUT;
+  if (g === color) return NO_CUT;
+  return a === b ? a : NO_CUT;
+}
+
+// `color` is always a `"r,g,b,a"` string (0-255 channels, alpha 0-255) —
+// see `colorAt` — never the transparent sentinel (only opaque colors ever
+// reach this function as `color`, only ever as `reveal`).
+function rgbaFillStyle(color) {
+  const [r, g, b, a] = color.split(',').map(Number);
+  return `rgba(${r}, ${g}, ${b}, ${a / 255})`;
+}
+
+// Trace the small corner wedge that gets cut from pixel (x, y)'s unit square
+// at `corner` (one of 'TL' | 'TR' | 'BL' | 'BR'): the sliver between the
+// exact corner point and the quarter-circle of radius `r` tangent to both
+// adjacent edges at distance `r` from the corner — i.e. exactly the piece a
+// standard rounded-rect corner removes from a sharp one. `ctx.arcTo`'s
+// corner-point-as-control-point form draws that same tangent arc without
+// hand-computed sweep angles.
+function tracePixelWedge(ctx, corner, x, y, r) {
+  if (corner === 'TL') {
+    ctx.moveTo(x, y);
+    ctx.lineTo(x + r, y);
+    ctx.arcTo(x, y, x, y + r, r);
+  } else if (corner === 'TR') {
+    ctx.moveTo(x + 1, y);
+    ctx.lineTo(x + 1, y + r);
+    ctx.arcTo(x + 1, y, x + 1 - r, y, r);
+  } else if (corner === 'BL') {
+    ctx.moveTo(x, y + 1);
+    ctx.lineTo(x, y + 1 - r);
+    ctx.arcTo(x, y + 1, x + r, y + 1, r);
+  } else {
+    ctx.moveTo(x + 1, y + 1);
+    ctx.lineTo(x + 1 - r, y + 1);
+    ctx.arcTo(x + 1, y + 1, x + 1, y + 1 - r, r);
+  }
+  ctx.closePath();
+}

package/kits/basic-2d/engine/scene.js

@@ -1,4 +1,5 @@
 import { initialFiles, parseJsonFile } from './files';
+import { getBlueprintTemplate, mergeComponents } from './blueprint';
 
 const CARD_WIDTH = 500;
 const CARD_HEIGHT = 700;
@@ -25,9 +26,14 @@ function resolveSceneFileKey(name) {
 }
 
 export class SceneRuntime {
-  constructor(sceneData, behaviors, sprites) {
+  // `files` is the live deck files map (path -> text), used to resolve every
+  // actor's `blueprint` ref against the CURRENT blueprint file content -- not
+  // a load-time snapshot -- so a blueprint edit propagates to every scene that
+  // places it, in both the editor and play mode / `PlayOnly`.
+  constructor(sceneData, behaviors, sprites, files) {
     this.behaviors = new Map(behaviors.map((Behavior) => [Behavior.behaviorName, Behavior]));
     this.sprites = sprites ?? {};
+    this.files = files ?? {};
     this.time = 0;
     this.keys = new Set();
     this.pointer = { x: 0, y: 0, down: false };
@@ -43,6 +49,10 @@ export class SceneRuntime {
     this.actors = new Map();
     for (const actor of this.data.actors ?? []) {
       actor.runtime = {};
+      if (actor.blueprint) {
+        const template = getBlueprintTemplate(this.files, actor.blueprint);
+        actor.components = mergeComponents(template?.components, actor.components);
+      }
       this.actors.set(actor.id, actor);
       for (const [behaviorName, Behavior] of this.behaviors) {
         const component = actor.components[behaviorName];
@@ -77,7 +87,7 @@ export class SceneRuntime {
   }
 
   clone() {
-    return new SceneRuntime(this.serialize(), [...this.behaviors.values()], this.sprites);
+    return new SceneRuntime(this.serialize(), [...this.behaviors.values()], this.sprites, this.files);
   }
 
   serialize() {
@@ -126,6 +136,10 @@ export class SceneRuntime {
     return Boolean(a && b && intersects(a, b));
   }
 
+  // Raw spawn: `actor.components` is used as-is (already-resolved values),
+  // just filled out with each behavior's defaultProps. Internal use -- prefer
+  // `spawnFromBlueprint` so a runtime-spawned actor is a blueprint instance
+  // like every other actor.
   spawnActor(actor) {
     const id = actor.id ?? mintActorId(new Set(this.actors.keys()));
     const components = {};
@@ -139,6 +153,16 @@ export class SceneRuntime {
     return next;
   }
 
+  // The blessed spawn path: resolve `blueprintPath` from the live `files`,
+  // merge with `overrides.components` (sparse, same shape as a placed
+  // instance's file overrides), and spawn the result. `overrides.id`, when
+  // given, is used as the new actor's id.
+  spawnFromBlueprint(blueprintPath, overrides = {}) {
+    const template = getBlueprintTemplate(this.files, blueprintPath);
+    const components = mergeComponents(template?.components, overrides.components);
+    return this.spawnActor({ id: overrides.id, blueprint: blueprintPath, components });
+  }
+
   despawnActor(actorId) {
     const actor = this.actors.get(actorId);
     if (!actor) return false;
@@ -261,8 +285,8 @@ export class SceneRuntime {
   }
 }
 
-export function makeScene(sceneData, behaviors, sprites) {
-  return new SceneRuntime(sceneData, behaviors, sprites);
+export function makeScene(sceneData, behaviors, sprites, files) {
+  return new SceneRuntime(sceneData, behaviors, sprites, files);
 }
 
 export function setActorComponent(sceneData, actorId, behaviorName, nextProps) {
@@ -437,31 +461,7 @@ export function getSelectionBounds(sceneData, actorIds) {
   return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
 }
 
-export function addActor(sceneData, _files, sprites) {
-  const next = structuredClone(sceneData);
-  const existingIds = new Set(next.actors.map((actor) => actor.id));
-  const id = mintActorId(existingIds);
-  const width = 64;
-  const height = 64;
-  const layout = {
-    x: Math.round((CARD_WIDTH - width) / 2),
-    y: Math.round((CARD_HEIGHT - height) / 2),
-    width,
-    height,
-    z: 0,
-    rotation: 0,
-  };
-  const components = { Layout: layout };
-  // Give a fresh actor the first available .pxart sprite so it shows art.
-  const spritePath = Object.keys(sprites ?? {}).sort()[0];
-  if (spritePath) {
-    components.Sprite = { file: spritePath };
-  }
-  next.actors.push({ id, components });
-  return { sceneData: next, newId: id };
-}
-
-function mintActorId(existing) {
+export function mintActorId(existing) {
   for (let attempt = 0; attempt < 64; attempt++) {
     const candidate = Math.floor(Math.random() * 0xffffffff)
       .toString(16)

package/kits/basic-2d/engine/ui.jsx

@@ -11,6 +11,7 @@ import {
   faCircle,
   faClone,
   faCode,
+  faCodeBranch,
   faEraser,
   faEyeDropper,
   faFile,
@@ -115,9 +116,26 @@ export function EditorHeader({ title, subtitle, right, onToggleFiles, filesOpen,
   if (!headerHost) return null;
   return createPortal(header, headerHost);
 }
+// Safari only moves keyboard focus into an iframe -- at the browser level,
+// not just document.activeElement -- when the click lands on something
+// Safari itself focuses on click (a text input; NOT a button, div, or
+// canvas). PxArtEditor/SceneEditor each already focus their own canvas on
+// pointer-down for exactly this reason, but that only covers clicks that
+// land on the canvas: clicking a tool button, a palette swatch, the
+// timeline, etc. does nothing, so Safari's frame focus can stay wherever it
+// was and the NEXT keyboard shortcut or Cmd+Z falls through to the browser
+// -- reproducing right after the user just clicked in the editor. Claiming
+// focus here, once, for every pointer-down anywhere in the editor body
+// closes that gap for both editors without duplicating the fix. Real text
+// inputs still win focus normally right after: the browser's own
+// click-focuses-inputs behavior runs as mousedown's default action, which
+// fires AFTER this pointerdown handler.
+function claimEditorFocus(event) {
+  event.currentTarget.focus({ preventScroll: true });
+}
 export const EditorBody = React.forwardRef(function EditorBody({ children }, ref) {
   return (
-    <div ref={ref} className={styles.editorBody}>
+    <div ref={ref} className={styles.editorBody} tabIndex={-1} onPointerDown={claimEditorFocus}>
       {children}
     </div>
   );
@@ -158,6 +176,8 @@ const icons = {
   circle: faCircle,
   clone: faClone,
   code: faCode,
+  // FA5 has no faCodeFork (that's the FA6 name); faCodeBranch is the fork glyph.
+  'code-fork': faCodeBranch,
   eraser: faEraser,
   eyedropper: faEyeDropper,
   fill: faFillDrip,
@@ -361,33 +381,125 @@ export function isHexColor(value) {
     typeof value === 'string' && /^#[0-9a-fA-F]{3}([0-9a-fA-F]{3}([0-9a-fA-F]{2})?)?$/.test(value)
   );
 }
-export function useMobileSheet({ snap, baseClassName, onTransition }) {
-  const startY = useRef(0);
-  const lastDy = useRef(0);
-  const dragging = useRef(false);
+// --- Bottom-sheet sizing (mobile only) -------------------------------------
+// The inspector / file sheets are docked panels on desktop; below the CSS
+// breakpoint they become drag-resizable bottom sheets. `useMobileSheet` owns a
+// continuous pixel height so the sheet tracks the finger 1:1 and can rest at
+// any height (the old version only read the drag delta at release and jumped
+// between two fixed snaps, which felt dead mid-drag).
+const SHEET_PEEK_FRACTION = 0.18; // collapsed "peek" height, fraction of viewport
+const SHEET_DEFAULT_FRACTION = 0.62; // expanded default height
+const SHEET_MAX_FRACTION = 0.92; // never quite cover the whole screen
+const SHEET_MIN_PX = 96; // floor so the grab handle always fits
+const SHEET_TAP_PX = 6; // release movement under this reads as a tap, not a drag
+const SHEET_FLICK_VELOCITY = 0.6; // px/ms; a faster release flings to an end
+function sheetViewportHeight() {
+  return typeof window !== 'undefined' ? window.innerHeight : 800;
+}
+function sheetSizes() {
+  const vh = sheetViewportHeight();
+  const peek = Math.max(SHEET_MIN_PX, vh * SHEET_PEEK_FRACTION);
+  const max = vh * SHEET_MAX_FRACTION;
+  const expanded = Math.min(max, Math.max(peek, vh * SHEET_DEFAULT_FRACTION));
+  return { peek, expanded, max };
+}
+function clampSheetHeight(px) {
+  const { peek, max } = sheetSizes();
+  return Math.min(max, Math.max(peek, px));
+}
+function releasePointer(event, pointerId) {
+  try {
+    event.currentTarget.releasePointerCapture(pointerId);
+  } catch {
+    // Capture may already be gone after a cancel / blur.
+  }
+}
+// Decide where the sheet rests when the finger lifts: a stationary press toggles
+// between the peek and the last expanded height; a fast flick flings to the
+// nearest end; otherwise it stays exactly where it was dragged (free resize).
+function settleSheet(drag, setHeight, expandedRef) {
+  const { peek, expanded, max } = sheetSizes();
+  if (drag.moved < SHEET_TAP_PX) {
+    const wasCollapsed = drag.startHeight <= peek + 2;
+    if (!wasCollapsed) expandedRef.current = drag.startHeight;
+    setHeight(wasCollapsed ? expandedRef.current || expanded : peek);
+    return;
+  }
+  if (drag.velocity > SHEET_FLICK_VELOCITY) {
+    setHeight(peek);
+    return;
+  }
+  if (drag.velocity < -SHEET_FLICK_VELOCITY) {
+    expandedRef.current = max;
+    setHeight(max);
+    return;
+  }
+  const settled = setHeight(drag.startHeight - (drag.lastY - drag.startY));
+  if (settled > peek + 2) expandedRef.current = settled;
+}
+export function useMobileSheet({ open = true, baseClassName }) {
+  const [height, setHeightState] = useState(() => sheetSizes().expanded);
+  const [dragging, setDragging] = useState(false);
+  const heightRef = useRef(height);
+  const expandedRef = useRef(height); // last height above the peek, for tap-restore
+  const dragRef = useRef(null);
+  const setHeight = (px) => {
+    const next = clampSheetHeight(px);
+    heightRef.current = next;
+    setHeightState(next);
+    return next;
+  };
+  // Restore the last expanded height whenever the sheet (re)opens, and keep the
+  // height in range across viewport resize / rotation.
+  useEffect(() => {
+    if (open) setHeight(expandedRef.current);
+  }, [open]);
+  useEffect(() => {
+    const onResize = () => setHeight(heightRef.current);
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  }, []);
   function onPointerDown(event) {
-    startY.current = event.clientY;
-    lastDy.current = 0;
-    dragging.current = true;
-    event.currentTarget.setPointerCapture(event.pointerId);
+    dragRef.current = {
+      pointerId: event.pointerId,
+      startY: event.clientY,
+      startHeight: heightRef.current,
+      lastY: event.clientY,
+      lastT: event.timeStamp,
+      velocity: 0,
+      moved: 0,
+    };
+    setDragging(true);
+    try {
+      event.currentTarget.setPointerCapture(event.pointerId);
+    } catch {
+      // No active pointer to capture (e.g. synthetic events) -- drag still works.
+    }
   }
   function onPointerMove(event) {
-    if (!dragging.current) return;
-    lastDy.current = event.clientY - startY.current;
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    const dy = event.clientY - drag.startY; // down is positive
+    drag.moved = Math.max(drag.moved, Math.abs(dy));
+    const dt = event.timeStamp - drag.lastT;
+    if (dt > 0) drag.velocity = (event.clientY - drag.lastY) / dt;
+    drag.lastY = event.clientY;
+    drag.lastT = event.timeStamp;
+    setHeight(drag.startHeight - dy); // dragging up grows the sheet
   }
-  function endDrag() {
-    if (!dragging.current) return;
-    dragging.current = false;
-    const dy = lastDy.current;
-    lastDy.current = 0;
-    if (Math.abs(dy) < 6) onTransition('tap');
-    else if (dy > 30) onTransition('down');
-    else if (dy < -30) onTransition('up');
+  function endDrag(event) {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    dragRef.current = null;
+    setDragging(false);
+    releasePointer(event, drag.pointerId);
+    settleSheet(drag, setHeight, expandedRef);
   }
   return {
     rootProps: {
-      className: baseClassName,
-      'data-sheet-snap': snap,
+      className: cx(baseClassName, dragging && styles.sheetDragging),
+      'data-sheet-open': open ? 'true' : 'false',
+      style: { '--sheet-h': `${Math.round(height)}px` },
     },
     grabProps: {
       className: cx(styles.sheetGrab, styles.mobileOnly),
@@ -466,6 +578,33 @@ export function ContextMenu({ x, y, items, onClose }) {
     </div>
   );
 }
+// Cursor-independent modal confirm (unlike `ContextMenu`, which anchors to a
+// click point) -- for actions with real consequences, like the blueprint
+// library's cascade delete. Dismisses on Escape or a backdrop click, same as
+// cancelling.
+export function ConfirmDialog({ title, message, confirmLabel = 'Delete', danger = true, onConfirm, onCancel }) {
+  useEffect(() => {
+    const onKeyDown = (event) => {
+      if (event.key === 'Escape') onCancel();
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [onCancel]);
+  return (
+    <div className={styles.confirmBackdrop} onPointerDown={onCancel}>
+      <div className={styles.confirmDialog} role="alertdialog" onPointerDown={(event) => event.stopPropagation()}>
+        <div className={styles.confirmTitle}>{title}</div>
+        <div className={styles.confirmMessage}>{message}</div>
+        <div className={styles.confirmActions}>
+          <Button onClick={onCancel}>Cancel</Button>
+          <Button variant={danger ? 'danger' : ''} onClick={onConfirm}>
+            {confirmLabel}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
 export function SelectField({ label, value, onChange, options }) {
   return (
     <FieldRow label={label}>