castle-web-cli 0.4.129 → 0.4.130

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

@@ -1,695 +0,0 @@
-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,
-  faExpand,
-  faExternalLinkAlt,
-  faEyeDropper,
-  faFile,
-  faFilm,
-  faFillDrip,
-  faGlobe,
-  faImage,
-  faLayerGroup,
-  faObjectGroup,
-  faPalette,
-  faPencilAlt,
-  faPlay,
-  faPlus,
-  faRedo,
-  faSearchMinus,
-  faSearchPlus,
-  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,
-  expand: faExpand,
-  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,
-  'zoom-in': faSearchPlus,
-  'zoom-out': faSearchMinus,
-  fit: faExpand,
-  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>
-  );
-}