castle-web-cli 0.4.83 → 0.4.85

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

@@ -0,0 +1,688 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import {
+  faArrowsAlt,
+  faArrowsAltH,
+  faArrowsAltV,
+  faBars,
+  faChevronDown,
+  faChevronRight,
+  faChevronUp,
+  faCircle,
+  faClone,
+  faCode,
+  faCodeBranch,
+  faEraser,
+  faExternalLinkAlt,
+  faEyeDropper,
+  faFile,
+  faFilm,
+  faFillDrip,
+  faGlobe,
+  faImage,
+  faLayerGroup,
+  faObjectGroup,
+  faPalette,
+  faPencilAlt,
+  faPlay,
+  faPlus,
+  faRedo,
+  faShapes,
+  faSlash,
+  faVectorSquare,
+  faSquare,
+  faStamp,
+  faStop,
+  faSyncAlt,
+  faTimes,
+  faTrash,
+  faUndo,
+  faVideo,
+} from '@fortawesome/free-solid-svg-icons';
+import styles from './ui.module.css';
+export { styles };
+export const theme = {
+  transparentChecker:
+    '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>;
+}
+// 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>
+      {right ? <div className={styles.editorHeaderRight}>{right}</div> : null}
+    </header>
+  );
+  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} tabIndex={-1} onPointerDown={claimEditorFocus}>
+      {children}
+    </div>
+  );
+});
+export function Button({ children, active = false, variant = '', className = '', ...props }) {
+  return (
+    <button
+      className={cx(
+        styles.button,
+        active && styles.buttonActive,
+        variant === 'danger' && styles.buttonDanger,
+        className
+      )}
+      {...props}>
+      {children}
+    </button>
+  );
+}
+export function IconButton({ icon, label, active = false, variant = '', ...props }) {
+  return (
+    <Button
+      active={active}
+      variant={variant}
+      className={styles.iconButton}
+      aria-label={label}
+      title={label}
+      {...props}>
+      <Icon name={icon} />
+    </Button>
+  );
+}
+const icons = {
+  bars: faBars,
+  camera: faVideo,
+  'chevron-down': faChevronDown,
+  'chevron-right': faChevronRight,
+  'chevron-up': faChevronUp,
+  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,
+  external: faExternalLinkAlt,
+  eyedropper: faEyeDropper,
+  fill: faFillDrip,
+  'flip-h': faArrowsAltH,
+  'flip-v': faArrowsAltV,
+  file: faFile,
+  film: faFilm,
+  globe: faGlobe,
+  image: faImage,
+  'layer-group': faLayerGroup,
+  marquee: faVectorSquare,
+  move: faArrowsAlt,
+  'object-group': faObjectGroup,
+  palette: faPalette,
+  pencil: faPencilAlt,
+  play: faPlay,
+  plus: faPlus,
+  redo: faRedo,
+  rotate: faSyncAlt,
+  shapes: faShapes,
+  slash: faSlash,
+  square: faSquare,
+  stamp: faStamp,
+  stop: faStop,
+  times: faTimes,
+  // Hand-rolled equilateral-ish triangle glyph (FA free-solid has no plain
+  // triangle); shaped to match the filled-glyph look of the imported icons.
+  triangle: { icon: [512, 512, [], '', 'M256 64 L496 448 L16 448 Z'] },
+  trash: faTrash,
+  undo: faUndo,
+};
+export function Icon({ name }) {
+  const def = icons[name];
+  if (!def) return null;
+  const [width, height, , , path] = def.icon;
+  const d = Array.isArray(path) ? path.join(' ') : path;
+  return (
+    <svg
+      viewBox={`0 0 ${width} ${height}`}
+      aria-hidden="true"
+      style={{ width: '1em', height: '1em', display: 'inline-block', fill: 'currentColor' }}>
+      <path d={d} />
+    </svg>
+  );
+}
+export function Panel({ title, action, children, overridden = false }) {
+  return (
+    <section className={styles.panel}>
+      {title ? (
+        <div className={styles.panelHeader}>
+          <span className={cx(overridden && styles.panelTitleOverridden)}>{title}</span>
+          {action}
+        </div>
+      ) : null}
+      <div className={styles.panelBody}>{children}</div>
+    </section>
+  );
+}
+// Render the "Default: X" value in an instance override's sub-line.
+function formatFieldDefault(value) {
+  if (typeof value === 'boolean') return value ? 'On' : 'Off';
+  if (value == null || value === '') return 'none';
+  return String(value);
+}
+export function FieldRow({ label, overridden, defaultValue, onReset, children }) {
+  const row = (
+    <label className={cx(styles.fieldRow, overridden && styles.fieldRowOverridden)}>
+      <span className={cx(styles.fieldLabel, overridden && styles.fieldLabelOverridden)}>{label}</span>
+      {children}
+    </label>
+  );
+  if (!overridden) return row;
+  return (
+    <div className={styles.fieldOverride}>
+      {row}
+      <div className={styles.fieldDefault}>
+        <div className={styles.fieldDefaultInner}>
+          <span>Default: {formatFieldDefault(defaultValue)}</span>
+          {onReset ? (
+            <button type="button" className={styles.fieldResetBtn} onClick={onReset}>
+              Reset
+            </button>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}
+export function TextField({ label, value, onChange, overridden, defaultValue, onReset }) {
+  return (
+    <FieldRow label={label} overridden={overridden} defaultValue={defaultValue} onReset={onReset}>
+      <input
+        className={styles.input}
+        value={value ?? ''}
+        onChange={(event) => onChange(event.target.value)}
+      />
+    </FieldRow>
+  );
+}
+export function NumberField({ label, value, onChange, min, max, step = 1, overridden, defaultValue, onReset }) {
+  const current = Number.isFinite(value) ? (value ?? 0) : 0;
+  const [draft, setDraft] = useState(String(current));
+  const editingRef = useRef(false);
+  const cancelRef = useRef(false);
+  // keep the draft in sync with the committed value while not editing
+  if (!editingRef.current && draft !== String(current)) {
+    setDraft(String(current));
+  }
+  function commit(raw) {
+    let next = Number(raw);
+    if (!Number.isFinite(next)) next = current;
+    if (min != null && next < min) next = min;
+    if (max != null && next > max) next = max;
+    setDraft(String(next));
+    onChange(next);
+  }
+  function stepBy(delta) {
+    let next = current + delta;
+    if (min != null && next < min) next = min;
+    if (max != null && next > max) next = max;
+    setDraft(String(next));
+    onChange(next);
+  }
+  return (
+    <FieldRow label={label} overridden={overridden} defaultValue={defaultValue} onReset={onReset}>
+      <div className={styles.numberField}>
+        <input
+          className={cx(styles.input, styles.numberInput)}
+          type="number"
+          min={min}
+          max={max}
+          step={step}
+          value={draft}
+          onFocus={() => {
+            editingRef.current = true;
+          }}
+          onChange={(event) => setDraft(event.target.value)}
+          onBlur={(event) => {
+            editingRef.current = false;
+            if (cancelRef.current) {
+              cancelRef.current = false;
+              setDraft(String(current));
+              return;
+            }
+            commit(event.target.value);
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              event.preventDefault();
+              commit(event.currentTarget.value);
+              event.currentTarget.blur();
+            } else if (event.key === 'Escape') {
+              event.preventDefault();
+              cancelRef.current = true;
+              setDraft(String(current));
+              event.currentTarget.blur();
+            }
+          }}
+        />
+        <div className={styles.numberSteppers}>
+          <button
+            type="button"
+            className={styles.numberStepper}
+            tabIndex={-1}
+            aria-label="Increment"
+            disabled={max != null && current >= max}
+            onClick={() => stepBy(step)}>
+            <Icon name="chevron-up" />
+          </button>
+          <button
+            type="button"
+            className={styles.numberStepper}
+            tabIndex={-1}
+            aria-label="Decrement"
+            disabled={min != null && current <= min}
+            onClick={() => stepBy(-step)}>
+            <Icon name="chevron-down" />
+          </button>
+        </div>
+      </div>
+    </FieldRow>
+  );
+}
+export function CheckboxField({ label, checked, onChange, overridden, defaultValue, onReset }) {
+  return (
+    <FieldRow label={label} overridden={overridden} defaultValue={defaultValue} onReset={onReset}>
+      <button
+        type="button"
+        className={cx(styles.toggle, checked && styles.toggleOn)}
+        role="switch"
+        aria-checked={!!checked}
+        onClick={() => onChange(!checked)}>
+        <span className={styles.toggleKnob} />
+      </button>
+    </FieldRow>
+  );
+}
+export function ColorField({ label, value, onChange, overridden, defaultValue, onReset }) {
+  const hex = normalizeHex(value);
+  const alpha = hex.length === 9 ? hex.slice(7) : '';
+  const rgb = hex.slice(0, 7);
+  return (
+    <FieldRow label={label} overridden={overridden} defaultValue={defaultValue} onReset={onReset}>
+      <input
+        className={styles.colorInput}
+        type="color"
+        value={rgb}
+        onChange={(event) => onChange(event.target.value + alpha)}
+      />
+    </FieldRow>
+  );
+}
+function normalizeHex(value) {
+  const raw = (value ?? '').trim();
+  if (/^#[0-9a-fA-F]{3}$/.test(raw)) {
+    return '#' + raw.slice(1).replace(/./g, (c) => c + c);
+  }
+  if (/^#[0-9a-fA-F]{6}([0-9a-fA-F]{2})?$/.test(raw)) return raw;
+  return '#000000';
+}
+export function isHexColor(value) {
+  return (
+    typeof value === 'string' && /^#[0-9a-fA-F]{3}([0-9a-fA-F]{3}([0-9a-fA-F]{2})?)?$/.test(value)
+  );
+}
+// --- 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;
+}
+// Persist a sheet's resting height across reloads (an agent's CODE edit
+// triggers requestReload, which would otherwise reset every sheet to the
+// default size). Keyed per sheet via `storageKey`; sessionStorage-scoped and
+// best-effort, the same degrade-to-memory-only contract as editorHistory.
+function sheetHeightStorageKey(key) {
+  return `castle-sheet-height:${key}`;
+}
+function loadStoredSheetHeight(key) {
+  if (!key || typeof sessionStorage === 'undefined') return null;
+  try {
+    const raw = sessionStorage.getItem(sheetHeightStorageKey(key));
+    if (raw === null) return null;
+    const px = Number(raw);
+    return Number.isFinite(px) && px > 0 ? px : null;
+  } catch {
+    return null;
+  }
+}
+function saveStoredSheetHeight(key, px) {
+  if (!key || typeof sessionStorage === 'undefined') return;
+  try {
+    sessionStorage.setItem(sheetHeightStorageKey(key), String(Math.round(px)));
+  } catch {
+    // storage full/unavailable -- height still works in-memory this session
+  }
+}
+export function useMobileSheet({ open = true, baseClassName, storageKey }) {
+  const [height, setHeightState] = useState(() =>
+    clampSheetHeight(loadStoredSheetHeight(storageKey) ?? sheetSizes().expanded)
+  );
+  const [dragging, setDragging] = useState(false);
+  const heightRef = useRef(height);
+  // Last height above the peek, for tap-restore: seed from the restored height
+  // when it isn't collapsed, else the default expanded size.
+  const expandedRef = useRef(height > sheetSizes().peek + 2 ? height : sheetSizes().expanded);
+  const dragRef = useRef(null);
+  const didOpenMountRef = useRef(false);
+  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. Skip the initial mount
+  // so a height restored from storage (including a collapsed peek) is kept
+  // rather than immediately overwritten by the default expanded size.
+  useEffect(() => {
+    if (!didOpenMountRef.current) {
+      didOpenMountRef.current = true;
+      return;
+    }
+    if (open) setHeight(expandedRef.current);
+  }, [open]);
+  useEffect(() => {
+    const onResize = () => setHeight(heightRef.current);
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  }, []);
+  // Persist the resting height (never mid-drag, so a drag doesn't spam storage)
+  // so it survives a reload.
+  useEffect(() => {
+    if (!dragging) saveStoredSheetHeight(storageKey, height);
+  }, [dragging, height, storageKey]);
+  function onPointerDown(event) {
+    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) {
+    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(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: 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),
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: endDrag,
+      onPointerCancel: endDrag,
+    },
+  };
+}
+// Just the drag-affordance pill for the mobile sheet. The label/hint header
+// this used to render was dropped -- it duplicated each inspector's own header
+// (blueprint name input, "<name> Actor", scene settings, etc.).
+export function SheetGrabHandle() {
+  return <div className={styles.sheetGrabBar} />;
+}
+// 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>
+  );
+}
+// 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, overridden, defaultValue, onReset }) {
+  return (
+    <FieldRow label={label} overridden={overridden} defaultValue={defaultValue} onReset={onReset}>
+      <select
+        className={styles.select}
+        value={value ?? ''}
+        onChange={(event) => onChange(event.target.value)}>
+        {options.map((option) => {
+          const value = typeof option === 'string' ? option : option.value;
+          const label = typeof option === 'string' ? option : option.label;
+          return (
+            <option key={value} value={value}>
+              {label}
+            </option>
+          );
+        })}
+      </select>
+    </FieldRow>
+  );
+}