castle-web-cli 0.4.71 → 0.4.73

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

@@ -2,6 +2,12 @@ import { initialFiles, parseJsonFile } from './files';
 
 const CARD_WIDTH = 500;
 const CARD_HEIGHT = 700;
+const DEFAULT_VIEWPORT = {
+  width: CARD_WIDTH,
+  height: CARD_HEIGHT,
+  originX: 0,
+  originY: 0,
+};
 
 export const cardSize = { width: CARD_WIDTH, height: CARD_HEIGHT };
 
@@ -19,9 +25,9 @@ function resolveSceneFileKey(name) {
 }
 
 export class SceneRuntime {
-  constructor(sceneData, behaviors, drawings) {
+  constructor(sceneData, behaviors, sprites) {
     this.behaviors = new Map(behaviors.map((Behavior) => [Behavior.behaviorName, Behavior]));
-    this.drawings = drawings;
+    this.sprites = sprites ?? {};
     this.time = 0;
     this.keys = new Set();
     this.pointer = { x: 0, y: 0, down: false };
@@ -71,7 +77,7 @@ export class SceneRuntime {
   }
 
   clone() {
-    return new SceneRuntime(this.serialize(), [...this.behaviors.values()], this.drawings);
+    return new SceneRuntime(this.serialize(), [...this.behaviors.values()], this.sprites);
   }
 
   serialize() {
@@ -171,25 +177,40 @@ export class SceneRuntime {
   }
 
   draw(ctx, options = {}) {
-    ctx.clearRect(0, 0, CARD_WIDTH, CARD_HEIGHT);
-    ctx.fillStyle = this.data.background ?? '#0f2a1d';
-    ctx.fillRect(0, 0, CARD_WIDTH, CARD_HEIGHT);
+    const viewport = options.viewport ?? DEFAULT_VIEWPORT;
+    ctx.clearRect(0, 0, viewport.width, viewport.height);
+    const camera = options.useCamera && this.camera ? this.camera : { x: 0, y: 0 };
+    if (options.showCropOutline) {
+      ctx.fillStyle = this.data.background ?? '#0f2a1d';
+      ctx.fillRect(0, 0, viewport.width, viewport.height);
+    } else {
+      ctx.fillStyle = this.data.background ?? '#0f2a1d';
+      ctx.fillRect(0, 0, CARD_WIDTH, CARD_HEIGHT);
+    }
 
     ctx.save();
-    if (options.useCamera && this.camera) {
-      ctx.translate(-Math.round(this.camera.x ?? 0), -Math.round(this.camera.y ?? 0));
+    if (options.useCamera && camera) {
+      ctx.translate(
+        Math.round(viewport.originX - (camera.x ?? 0)),
+        Math.round(viewport.originY - (camera.y ?? 0))
+      );
     }
+    if (options.showGrid) drawDotGrid(ctx, options.gridSize, viewport, camera);
+    const editSelectedIds = options.editPlaceholders
+      ? new Set(options.editSelectedActorIds ?? [])
+      : null;
     for (const actor of this.getActors()) {
       // Per-actor transform: Layout's `rotation` (degrees) rotates every draw
       // behavior of the actor about its center.
       ctx.save();
       applyLayoutRotation(ctx, getLayout(actor));
-      if (options.editPlaceholders) drawEditPlaceholder(ctx, actor);
+      if (options.editPlaceholders && shouldDrawEditPlaceholder(actor, editSelectedIds)) {
+        drawEditPlaceholder(ctx, actor);
+      }
       this.forEachBehavior(actor, (instance) => instance.draw?.(actor, this, ctx, options));
       ctx.restore();
     }
 
-    if (options.showGrid) drawGrid(ctx);
     if (options.selectedActorIds) {
       for (const id of options.selectedActorIds) {
         const actor = this.getActor(id);
@@ -197,6 +218,7 @@ export class SceneRuntime {
       }
     }
     if (options.marquee) drawMarquee(ctx, options.marquee);
+    if (options.showCropOutline) drawCropOutline(ctx);
     ctx.restore();
   }
 
@@ -239,8 +261,8 @@ export class SceneRuntime {
   }
 }
 
-export function makeScene(sceneData, behaviors, drawings) {
-  return new SceneRuntime(sceneData, behaviors, drawings);
+export function makeScene(sceneData, behaviors, sprites) {
+  return new SceneRuntime(sceneData, behaviors, sprites);
 }
 
 export function setActorComponent(sceneData, actorId, behaviorName, nextProps) {
@@ -292,6 +314,7 @@ export function duplicateActors(sceneData, actorIds) {
   if (actorIds.length === 0) return { sceneData, newIds: [] };
   const next = structuredClone(sceneData);
   const existingIds = new Set(next.actors.map((actor) => actor.id));
+  const offset = duplicateOffset(sceneData);
   const newIds = [];
   for (const id of actorIds) {
     const source = next.actors.find((candidate) => candidate.id === id);
@@ -303,8 +326,8 @@ export function duplicateActors(sceneData, actorIds) {
     if (layout) {
       copy.components.Layout = {
         ...layout,
-        x: Math.round(layout.x + 1),
-        y: Math.round(layout.y + 1),
+        x: Math.round(layout.x + offset),
+        y: Math.round(layout.y + offset),
       };
     }
     next.actors.push(copy);
@@ -313,7 +336,108 @@ export function duplicateActors(sceneData, actorIds) {
   return { sceneData: next, newIds };
 }
 
-export function addActor(sceneData, _files, drawings) {
+function duplicateOffset(sceneData) {
+  const gridSize = sceneData.editor?.gridSize;
+  return Number.isFinite(gridSize) && gridSize > 0 ? gridSize : 50;
+}
+
+export function arrangeActors(sceneData, actorIds, action) {
+  if (actorIds.length === 0) return sceneData;
+  const selected = new Set(actorIds);
+  const ordered = sceneData.actors
+    .map((actor, index) => ({ actor, index, layout: getLayout(actor) }))
+    .filter((entry) => entry.layout)
+    .sort((a, b) => (a.layout.z ?? 0) - (b.layout.z ?? 0) || a.index - b.index);
+  if (!ordered.some((entry) => selected.has(entry.actor.id))) return sceneData;
+  const arranged = arrangeOrderedActors(ordered, selected, action);
+  if (arranged === ordered) return sceneData;
+  return applyActorOrder(sceneData, arranged);
+}
+
+function arrangeOrderedActors(ordered, selected, action) {
+  if (action === 'front') return moveSelectionToEdge(ordered, selected, 'front');
+  if (action === 'back') return moveSelectionToEdge(ordered, selected, 'back');
+  if (action === 'forward') return moveSelectionOneStep(ordered, selected, 1);
+  if (action === 'backward') return moveSelectionOneStep(ordered, selected, -1);
+  return ordered;
+}
+
+function moveSelectionToEdge(ordered, selected, edge) {
+  const picked = ordered.filter((entry) => selected.has(entry.actor.id));
+  const rest = ordered.filter((entry) => !selected.has(entry.actor.id));
+  const next = edge === 'front' ? [...rest, ...picked] : [...picked, ...rest];
+  return sameActorOrder(ordered, next) ? ordered : next;
+}
+
+function moveSelectionOneStep(ordered, selected, direction) {
+  const next = [...ordered];
+  if (direction > 0) {
+    for (let index = next.length - 2; index >= 0; index--) {
+      if (!selected.has(next[index].actor.id) || selected.has(next[index + 1].actor.id)) continue;
+      [next[index], next[index + 1]] = [next[index + 1], next[index]];
+    }
+  } else {
+    for (let index = 1; index < next.length; index++) {
+      if (!selected.has(next[index].actor.id) || selected.has(next[index - 1].actor.id)) continue;
+      [next[index], next[index - 1]] = [next[index - 1], next[index]];
+    }
+  }
+  return sameActorOrder(ordered, next) ? ordered : next;
+}
+
+function sameActorOrder(a, b) {
+  return a.length === b.length && a.every((entry, index) => entry.actor.id === b[index].actor.id);
+}
+
+function applyActorOrder(sceneData, ordered) {
+  const zById = new Map(ordered.map((entry, index) => [entry.actor.id, index]));
+  const next = structuredClone(sceneData);
+  let changed = false;
+  for (const actor of next.actors) {
+    const z = zById.get(actor.id);
+    const layout = getLayout(actor);
+    if (z === undefined || !layout || layout.z === z) continue;
+    actor.components.Layout = { ...layout, z };
+    changed = true;
+  }
+  return changed ? next : sceneData;
+}
+
+// Axis-aligned layout box of a single actor in world (card) units, or null.
+// Ignores Layout.rotation -- v1 selection bounds are axis-aligned (the canvas
+// `drawSelection` still draws the rotated outline for per-actor feedback).
+export function getLayoutRect(actor) {
+  const layout = getLayout(actor);
+  if (!layout) return null;
+  return { x: layout.x, y: layout.y, width: layout.width, height: layout.height };
+}
+
+// Union axis-aligned bounding box of the given actors in world units, or null
+// when none of them have a Layout. Used to anchor the on-canvas selection
+// toolbar to the whole multi-selection.
+export function getSelectionBounds(sceneData, actorIds) {
+  if (!sceneData || !actorIds || actorIds.length === 0) return null;
+  const wanted = new Set(actorIds);
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  let found = false;
+  for (const actor of sceneData.actors) {
+    if (!wanted.has(actor.id)) continue;
+    const rect = getLayoutRect(actor);
+    if (!rect) continue;
+    found = true;
+    minX = Math.min(minX, rect.x);
+    minY = Math.min(minY, rect.y);
+    maxX = Math.max(maxX, rect.x + rect.width);
+    maxY = Math.max(maxY, rect.y + rect.height);
+  }
+  if (!found) return null;
+  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);
@@ -328,9 +452,10 @@ export function addActor(sceneData, _files, drawings) {
     rotation: 0,
   };
   const components = { Layout: layout };
-  const drawingPath = Object.keys(drawings).sort()[0];
-  if (drawingPath) {
-    components.Drawing = { file: drawingPath };
+  // 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 };
@@ -348,13 +473,14 @@ function mintActorId(existing) {
 
 export function screenToCard(canvas, clientX, clientY) {
   const rect = canvas.getBoundingClientRect();
+  const viewport = readCanvasViewport(canvas);
   return {
-    x: ((clientX - rect.left) / rect.width) * CARD_WIDTH,
-    y: ((clientY - rect.top) / rect.height) * CARD_HEIGHT,
+    x: ((clientX - rect.left) / rect.width) * viewport.width - viewport.originX,
+    y: ((clientY - rect.top) / rect.height) * viewport.height - viewport.originY,
   };
 }
 
-export function configureSceneCanvas(canvas, ctx = canvas.getContext('2d')) {
+export function configureSceneCanvas(canvas, ctx = canvas.getContext('2d'), viewport = DEFAULT_VIEWPORT) {
   if (!ctx) return null;
   const rect = canvas.getBoundingClientRect();
   const dpr = window.devicePixelRatio || 1;
@@ -364,30 +490,54 @@ export function configureSceneCanvas(canvas, ctx = canvas.getContext('2d')) {
   const pixelHeight = Math.max(1, Math.round(displayHeight * dpr));
   if (canvas.width !== pixelWidth) canvas.width = pixelWidth;
   if (canvas.height !== pixelHeight) canvas.height = pixelHeight;
-  ctx.setTransform(pixelWidth / CARD_WIDTH, 0, 0, pixelHeight / CARD_HEIGHT, 0, 0);
+  canvas.dataset.viewportWidth = String(viewport.width);
+  canvas.dataset.viewportHeight = String(viewport.height);
+  canvas.dataset.viewportOriginX = String(viewport.originX);
+  canvas.dataset.viewportOriginY = String(viewport.originY);
+  ctx.setTransform(pixelWidth / viewport.width, 0, 0, pixelHeight / viewport.height, 0, 0);
   ctx.imageSmoothingEnabled = true;
   return ctx;
 }
 
-function drawGrid(ctx) {
+function readCanvasViewport(canvas) {
+  return {
+    width: Number(canvas.dataset.viewportWidth) || CARD_WIDTH,
+    height: Number(canvas.dataset.viewportHeight) || CARD_HEIGHT,
+    originX: Number(canvas.dataset.viewportOriginX) || 0,
+    originY: Number(canvas.dataset.viewportOriginY) || 0,
+  };
+}
+
+function drawDotGrid(ctx, gridSize = 25, viewport = DEFAULT_VIEWPORT, camera = { x: 0, y: 0 }) {
+  const size = Number.isFinite(gridSize) && gridSize > 0 ? gridSize : 25;
+  const minX = (camera.x ?? 0) - viewport.originX;
+  const minY = (camera.y ?? 0) - viewport.originY;
+  const maxX = minX + viewport.width;
+  const maxY = minY + viewport.height;
+  const startX = Math.floor(minX / size) * size;
+  const startY = Math.floor(minY / size) * size;
   ctx.save();
-  ctx.strokeStyle = 'rgba(255, 255, 255, 0.08)';
-  ctx.lineWidth = 1;
-  for (let x = 0; x <= CARD_WIDTH; x += 25) {
-    ctx.beginPath();
-    ctx.moveTo(x + 0.5, 0);
-    ctx.lineTo(x + 0.5, CARD_HEIGHT);
-    ctx.stroke();
-  }
-  for (let y = 0; y <= CARD_HEIGHT; y += 25) {
-    ctx.beginPath();
-    ctx.moveTo(0, y + 0.5);
-    ctx.lineTo(CARD_WIDTH, y + 0.5);
-    ctx.stroke();
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.18)';
+  for (let x = startX; x <= maxX; x += size) {
+    for (let y = startY; y <= maxY; y += size) {
+      ctx.beginPath();
+      ctx.arc(x, y, 1.35, 0, Math.PI * 2);
+      ctx.fill();
+    }
   }
   ctx.restore();
 }
 
+// Per-actor edit bounding box visibility: show it only when the actor lacks a
+// real sprite to look at (no Sprite behavior, or a Sprite with no .pxart file)
+// or when the actor is currently selected. A Sprite-backed, unselected actor
+// shows its art instead of the box.
+function shouldDrawEditPlaceholder(actor, selectedIds) {
+  if (selectedIds && selectedIds.has(actor.id)) return true;
+  const sprite = actor?.components?.Sprite;
+  return !sprite || !sprite.file;
+}
+
 function drawEditPlaceholder(ctx, actor) {
   const layout = getLayout(actor);
   if (!layout) return;
@@ -405,13 +555,42 @@ function drawMarquee(ctx, rect) {
   ctx.save();
   ctx.fillStyle = 'rgba(255, 255, 255, 0.12)';
   ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
-  ctx.strokeStyle = 'rgba(255, 255, 255, 0.85)';
+  ctx.strokeStyle = 'rgba(255, 255, 255, 0.4)';
   ctx.lineWidth = 1;
   ctx.setLineDash([4, 3]);
   ctx.strokeRect(rect.x + 0.5, rect.y + 0.5, rect.width - 1, rect.height - 1);
   ctx.restore();
 }
 
+function drawCropOutline(ctx) {
+  ctx.save();
+  ctx.strokeStyle = 'rgba(255, 255, 255, 0.4)';
+  ctx.lineWidth = 2;
+  ctx.setLineDash([]);
+  const transform = ctx.getTransform();
+  const dpr = window.devicePixelRatio || 1;
+  const cssRadius = 12;
+  const radius = transform.a ? (cssRadius * dpr) / transform.a : cssRadius;
+  roundedRect(ctx, 1, 1, CARD_WIDTH - 2, CARD_HEIGHT - 2, radius);
+  ctx.stroke();
+  ctx.restore();
+}
+
+function roundedRect(ctx, x, y, width, height, radius) {
+  const r = Math.min(radius, width / 2, height / 2);
+  ctx.beginPath();
+  ctx.moveTo(x + r, y);
+  ctx.lineTo(x + width - r, y);
+  ctx.quadraticCurveTo(x + width, y, x + width, y + r);
+  ctx.lineTo(x + width, y + height - r);
+  ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height);
+  ctx.lineTo(x + r, y + height);
+  ctx.quadraticCurveTo(x, y + height, x, y + height - r);
+  ctx.lineTo(x, y + r);
+  ctx.quadraticCurveTo(x, y, x + r, y);
+  ctx.closePath();
+}
+
 function drawSelection(ctx, actor) {
   const layout = getLayout(actor);
   if (!layout) return;
@@ -442,11 +621,13 @@ function getColliderRect(actor) {
   const layout = getLayout(actor);
   const collider = actor?.components?.Collider;
   if (!layout || !collider) return null;
+  const width = collider.width ?? layout.width;
+  const height = collider.height ?? layout.height;
   return {
-    x: layout.x + (collider.offsetX ?? 0),
-    y: layout.y + (collider.offsetY ?? 0),
-    width: collider.width ?? layout.width,
-    height: collider.height ?? layout.height,
+    x: layout.x + (layout.width - width) / 2 + (collider.offsetX ?? 0),
+    y: layout.y + (layout.height - height) / 2 + (collider.offsetY ?? 0),
+    width,
+    height,
   };
 }
 

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

@@ -1,16 +1,31 @@
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import {
+  faArrowsAlt,
   faBars,
   faChevronDown,
   faChevronRight,
   faChevronUp,
   faClone,
+  faCode,
+  faEraser,
+  faEyeDropper,
+  faFile,
+  faFilm,
+  faFillDrip,
+  faGlobe,
+  faImage,
+  faLayerGroup,
   faObjectGroup,
   faPalette,
+  faPencilAlt,
   faPlay,
   faPlus,
   faRedo,
+  faSquare,
+  faStamp,
   faStop,
+  faSyncAlt,
   faTimes,
   faTrash,
   faUndo,
@@ -20,55 +35,93 @@ import styles from './ui.module.css';
 export { styles };
 export const theme = {
   transparentChecker:
-    'repeating-linear-gradient(45deg, #050505, #050505 4px, #252525 4px, #252525 8px)',
+    'repeating-linear-gradient(45deg, #121212, #121212 4px, #1a1a1a 4px, #1a1a1a 8px)',
 };
 export function cx(...parts) {
   return parts.filter(Boolean).join(' ');
 }
+// Track an element's content box via ResizeObserver. Shared by the canvas
+// overlays (SceneUI, SelectionOverlay) that scale a card-unit layer onto the
+// live canvas size.
+export function useElementSize(ref) {
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return undefined;
+    const measure = () => setSize({ width: node.clientWidth, height: node.clientHeight });
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    measure();
+    return () => observer.disconnect();
+  }, [ref]);
+  return size;
+}
+// True when the viewport is in the compact (≤600px) layout, where the file
+// list and inspector become bottom sheets. Mirrors the `@media (max-width:
+// 600px)` breakpoint so JS behavior (toggle target) tracks the CSS layout.
+export function useCompactViewport() {
+  const query = '(max-width: 600px)';
+  const [compact, setCompact] = useState(
+    () => typeof window !== 'undefined' && window.matchMedia(query).matches
+  );
+  useEffect(() => {
+    const mql = window.matchMedia(query);
+    const onChange = (event) => setCompact(event.matches);
+    mql.addEventListener('change', onChange);
+    setCompact(mql.matches);
+    return () => mql.removeEventListener('change', onChange);
+  }, []);
+  return compact;
+}
 export function AppShell({ children }) {
   return <div className={styles.appShell}>{children}</div>;
 }
 export function MainEditor({ children }) {
   return <main className={styles.mainEditor}>{children}</main>;
 }
-export function EditorHeader({ title, subtitle, right, onToggleFiles, filesOpen }) {
-  const hasRight = !!right || !!onToggleFiles;
-  return (
+// The header is a full-width row spanning the file list + workspace. Each
+// editor still owns its header content (title/subtitle/right controls depend
+// on per-editor state), so EditorHeader portals its DOM into the editor-root
+// header slot (`headerHost`) that App renders above the `[files | workspace]`
+// grid. The files toggle lives on the left and works on every viewport.
+export function EditorHeader({ title, subtitle, right, onToggleFiles, filesOpen, headerHost }) {
+  const header = (
     <header className={styles.editorHeader}>
       <div className={styles.editorHeaderLeft}>
+        {onToggleFiles ? (
+          <IconButton
+            icon="bars"
+            label="Files"
+            title="Toggle file list"
+            active={filesOpen}
+            aria-pressed={filesOpen ? 'true' : 'false'}
+            onClick={onToggleFiles}
+          />
+        ) : null}
         <div>
           <div className={styles.editorTitle}>{title}</div>
           {subtitle ? <div className={styles.muted}>{subtitle}</div> : null}
         </div>
       </div>
-      {hasRight ? (
-        <div className={styles.editorHeaderRight}>
-          {right}
-          {onToggleFiles ? (
-            <button
-              type="button"
-              className={cx(styles.headerFilesButton, styles.mobileOnly)}
-              onClick={onToggleFiles}
-              aria-label="Files"
-              aria-pressed={filesOpen ? 'true' : 'false'}>
-              <Icon name="bars" />
-            </button>
-          ) : null}
-        </div>
-      ) : null}
+      {right ? <div className={styles.editorHeaderRight}>{right}</div> : null}
     </header>
   );
+  if (!headerHost) return null;
+  return createPortal(header, headerHost);
 }
-export function EditorBody({ children }) {
-  return <div className={styles.editorBody}>{children}</div>;
-}
+export const EditorBody = React.forwardRef(function EditorBody({ children }, ref) {
+  return (
+    <div ref={ref} className={styles.editorBody}>
+      {children}
+    </div>
+  );
+});
 export function Button({ children, active = false, variant = '', className = '', ...props }) {
   return (
     <button
       className={cx(
         styles.button,
         active && styles.buttonActive,
-        variant === 'primary' && styles.buttonPrimary,
         variant === 'danger' && styles.buttonDanger,
         className
       )}
@@ -97,11 +150,25 @@ const icons = {
   'chevron-right': faChevronRight,
   'chevron-up': faChevronUp,
   clone: faClone,
+  code: faCode,
+  eraser: faEraser,
+  eyedropper: faEyeDropper,
+  fill: faFillDrip,
+  file: faFile,
+  film: faFilm,
+  globe: faGlobe,
+  image: faImage,
+  'layer-group': faLayerGroup,
+  move: faArrowsAlt,
   'object-group': faObjectGroup,
   palette: faPalette,
+  pencil: faPencilAlt,
   play: faPlay,
   plus: faPlus,
   redo: faRedo,
+  rotate: faSyncAlt,
+  square: faSquare,
+  stamp: faStamp,
   stop: faStop,
   times: faTimes,
   trash: faTrash,
@@ -121,10 +188,15 @@ export function Icon({ name }) {
     </svg>
   );
 }
-export function Panel({ title, children }) {
+export function Panel({ title, action, children }) {
   return (
     <section className={styles.panel}>
-      {title ? <div className={styles.panelHeader}>{title}</div> : null}
+      {title ? (
+        <div className={styles.panelHeader}>
+          <span>{title}</span>
+          {action}
+        </div>
+      ) : null}
       <div className={styles.panelBody}>{children}</div>
     </section>
   );
@@ -322,6 +394,63 @@ export function SheetGrabHandle({ label, hint }) {
     </>
   );
 }
+// Cursor-anchored right-click menu reusing the scene editor's "Arrange" menu
+// chrome (the shared `selArrangeMenu`/`selArrangeItem` classes). Opens at the
+// given client point, clamps into the viewport, and closes on outside-click or
+// Escape. Items are `{ key, label, disabled?, onClick }` descriptors. The
+// timeline keeps its own inline copy; this one backs the FileBrowser menus.
+export function ContextMenu({ x, y, items, onClose }) {
+  const ref = useRef(null);
+  const [pos, setPos] = useState({ left: x, top: y });
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const { width, height } = el.getBoundingClientRect();
+    const margin = 8;
+    const maxLeft = Math.max(margin, window.innerWidth - width - margin);
+    const maxTop = Math.max(margin, window.innerHeight - height - margin);
+    setPos({ left: Math.min(x, maxLeft), top: Math.min(y, maxTop) });
+  }, [x, y]);
+  useEffect(() => {
+    const dismiss = (event) => {
+      if (event.type === 'keydown' && event.key !== 'Escape') return;
+      if (event.type === 'pointerdown' && ref.current?.contains(event.target)) return;
+      onClose();
+    };
+    window.addEventListener('pointerdown', dismiss);
+    window.addEventListener('keydown', dismiss);
+    return () => {
+      window.removeEventListener('pointerdown', dismiss);
+      window.removeEventListener('keydown', dismiss);
+    };
+  }, [onClose]);
+  const pick = (item) => {
+    if (item.disabled) return;
+    item.onClick();
+    onClose();
+  };
+  const menuStyle = { position: 'fixed', left: pos.left, top: pos.top, transform: 'none' };
+  return (
+    <div
+      ref={ref}
+      role="menu"
+      style={menuStyle}
+      onContextMenu={(event) => event.preventDefault()}
+      className={styles.selArrangeMenu}>
+      {items.map((item) => (
+        <button
+          type="button"
+          key={item.key}
+          disabled={item.disabled}
+          onClick={() => pick(item)}
+          className={cx(styles.selArrangeItem, item.disabled && styles.selArrangeItemDisabled)}
+          role="menuitem">
+          {item.label}
+        </button>
+      ))}
+    </div>
+  );
+}
 export function SelectField({ label, value, onChange, options }) {
   return (
     <FieldRow label={label}>