castle-web-cli 0.4.183 → 0.4.185

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

@@ -2,14 +2,18 @@ import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { icons } from './icons';
 import { FieldRow, useMediaQuery } from './fields/fields';
+import fieldStyles from './fields/fields.module.css';
 import styles from './ui.module.css';
-export { styles };
+export { fieldStyles, styles };
 export {
   CheckboxField,
   ColorField,
   FieldNote,
   FieldRow,
+  FileField,
+  followAnchor,
   NumberField,
+  SelectField,
   TextField,
   useCoarsePointer,
 } from './fields/fields';
@@ -629,279 +633,3 @@ export function ConfirmDialog({ title, message, confirmLabel = 'Delete', danger
     </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>
-  );
-}
-
-function basenameOf(path) {
-  if (!path) return '';
-  return path.slice(path.lastIndexOf('/') + 1);
-}
-
-let measureCanvasCtx;
-function measureTextWidth(text, font) {
-  if (!measureCanvasCtx) {
-    measureCanvasCtx = document.createElement('canvas').getContext('2d');
-  }
-  measureCanvasCtx.font = font;
-  return measureCanvasCtx.measureText(text).width;
-}
-
-// Keep the filename intact; the directory is what yields. Binary-search the
-// prefix of the directory until `{prefix}…/{basename}` fits `maxWidth`.
-function fitPathKeepBasename(path, maxWidth, font) {
-  const measure = (text) => measureTextWidth(text, font);
-  if (maxWidth <= 0 || measure(path) <= maxWidth) return path;
-  const slash = path.lastIndexOf('/');
-  const dir = slash > 0 ? path.slice(0, slash) : '';
-  const base = slash > 0 ? path.slice(slash + 1) : path;
-  const ellipsed = `…/${base}`;
-  if (!dir || measure(ellipsed) > maxWidth) return fitKeepEnd(base, maxWidth, measure);
-  let lo = 0;
-  let hi = dir.length;
-  let best = ellipsed;
-  while (lo <= hi) {
-    const mid = (lo + hi) >> 1;
-    const candidate = `${dir.slice(0, mid)}…/${base}`;
-    if (measure(candidate) <= maxWidth) {
-      best = candidate;
-      lo = mid + 1;
-    } else {
-      hi = mid - 1;
-    }
-  }
-  return best;
-}
-
-function fitKeepEnd(text, maxWidth, measure) {
-  if (measure(text) <= maxWidth) return text;
-  if (measure('…') > maxWidth) return '';
-  let lo = 0;
-  let hi = text.length;
-  let best = '…';
-  while (lo <= hi) {
-    const mid = (lo + hi) >> 1;
-    const candidate = `…${text.slice(text.length - mid)}`;
-    if (measure(candidate) <= maxWidth) {
-      best = candidate;
-      lo = mid + 1;
-    } else {
-      hi = mid - 1;
-    }
-  }
-  return best;
-}
-
-function FilePathLabel({ path }) {
-  const ref = useRef(null);
-  const [shown, setShown] = useState(path);
-  useLayoutEffect(() => {
-    const node = ref.current;
-    if (!node) return undefined;
-    function fit() {
-      const max = node.clientWidth;
-      if (max <= 0) return;
-      const cs = getComputedStyle(node);
-      const font = cs.font && cs.font !== '0px' ? cs.font : `${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`;
-      setShown(fitPathKeepBasename(path, max, font));
-    }
-    fit();
-    const observer = new ResizeObserver(fit);
-    observer.observe(node);
-    return () => observer.disconnect();
-  }, [path]);
-  return (
-    <span ref={ref} className={styles.filePickerPath} title={path}>
-      {shown}
-    </span>
-  );
-}
-
-function pickerRowChrome(list) {
-  if (!list) return 26;
-  const box = getComputedStyle(list);
-  const opt = list.querySelector('button');
-  const op = opt ? getComputedStyle(opt) : null;
-  return (
-    (parseFloat(box.paddingLeft) || 0) +
-    (parseFloat(box.paddingRight) || 0) +
-    (parseFloat(box.borderLeftWidth) || 0) +
-    (parseFloat(box.borderRightWidth) || 0) +
-    (op ? (parseFloat(op.paddingLeft) || 0) + (parseFloat(op.paddingRight) || 0) : 16)
-  );
-}
-
-function longestPathWidth(list, paths) {
-  if (!list || !paths.length) return 0;
-  const probe = document.createElement('span');
-  probe.style.cssText = 'position:absolute;left:-9999px;white-space:nowrap;pointer-events:none;';
-  const opt = list.querySelector('button');
-  if (opt) {
-    const s = getComputedStyle(opt);
-    probe.style.font = s.font && s.font !== '0px' ? s.font : `${s.fontWeight} ${s.fontSize} ${s.fontFamily}`;
-  }
-  list.appendChild(probe);
-  let max = 0;
-  for (const path of paths) {
-    probe.textContent = path || 'None';
-    max = Math.max(max, probe.offsetWidth);
-  }
-  probe.remove();
-  return max;
-}
-
-// Place a body-portaled popover now and again on every resize or scroll, so it
-// keeps to its anchor. Scroll is captured because it doesn't bubble, and the
-// anchor can sit in any scrolling ancestor. Returns the cleanup.
-export function followAnchor(place) {
-  place();
-  window.addEventListener('resize', place);
-  window.addEventListener('scroll', place, true);
-  return () => {
-    window.removeEventListener('resize', place);
-    window.removeEventListener('scroll', place, true);
-  };
-}
-
-// File path field. Closed chrome shows the basename; the open list shows full
-// paths. Callers pass the candidate paths — this does not decide what a sprite
-// or sound is. `allowEmpty` adds a None row that writes ''.
-export function FileField({
-  label,
-  value,
-  onChange,
-  files = [],
-  allowEmpty = false,
-  overridden,
-  defaultValue,
-  onReset,
-}) {
-  const current = value ?? '';
-  const [open, setOpen] = useState(false);
-  const buttonRef = useRef(null);
-  const listRef = useRef(null);
-  const [pos, setPos] = useState(null);
-
-  const paths = [];
-  if (allowEmpty) paths.push('');
-  for (const path of files) {
-    if (path && !paths.includes(path)) paths.push(path);
-  }
-  if (current && !paths.includes(current)) paths.splice(allowEmpty ? 1 : 0, 0, current);
-
-  useLayoutEffect(() => {
-    if (!open || !buttonRef.current) return undefined;
-    function place() {
-      const anchor = buttonRef.current.getBoundingClientRect();
-      const list = listRef.current;
-      const margin = 8;
-      const maxWidth = window.innerWidth - margin * 2;
-      const needed = longestPathWidth(list, paths) + pickerRowChrome(list) + 4;
-      const width = Math.min(Math.max(needed, anchor.width), maxWidth);
-      // Grow left from the field if the paths need more than the control width.
-      let left = anchor.right - width;
-      if (left < margin) left = margin;
-      if (left + width > window.innerWidth - margin) {
-        left = Math.max(margin, window.innerWidth - width - margin);
-      }
-      const gap = 4;
-      const height = list?.getBoundingClientRect().height ?? 0;
-      let top = anchor.bottom + gap;
-      if (height && top + height > window.innerHeight - margin) {
-        top = Math.max(margin, anchor.top - gap - height);
-      }
-      setPos({ top, left, width });
-    }
-    return followAnchor(place);
-  }, [open, paths.length]);
-
-  useEffect(() => {
-    if (!open) return undefined;
-    function onKeyDown(event) {
-      if (event.key === 'Escape') setOpen(false);
-    }
-    function onPointerDown(event) {
-      if (listRef.current?.contains(event.target) || buttonRef.current?.contains(event.target)) {
-        return;
-      }
-      setOpen(false);
-    }
-    window.addEventListener('keydown', onKeyDown);
-    window.addEventListener('pointerdown', onPointerDown);
-    return () => {
-      window.removeEventListener('keydown', onKeyDown);
-      window.removeEventListener('pointerdown', onPointerDown);
-    };
-  }, [open]);
-
-  return (
-    <FieldRow
-      label={label}
-      overridden={overridden}
-      defaultValue={defaultValue ? basenameOf(defaultValue) : defaultValue}
-      onReset={onReset}>
-      <button
-        ref={buttonRef}
-        type="button"
-        className={cx(styles.select, styles.fileField)}
-        aria-haspopup="listbox"
-        aria-expanded={open}
-        onClick={() => setOpen((next) => !next)}>
-        <span className={cx(styles.fileFieldLabel, !current && styles.fileFieldEmpty)}>
-          {current ? basenameOf(current) : 'None'}
-        </span>
-      </button>
-      {open
-        ? createPortal(
-            <div
-              ref={listRef}
-              className={styles.filePicker}
-              role="listbox"
-              aria-label={label}
-              style={pos ?? { visibility: 'hidden' }}>
-              {paths.map((path) => {
-                const selected = path === current;
-                return (
-                  <button
-                    key={path || '__none'}
-                    type="button"
-                    role="option"
-                    aria-selected={selected}
-                    className={cx(
-                      styles.filePickerOption,
-                      selected && styles.filePickerOptionSelected,
-                      !path && styles.fileFieldEmpty
-                    )}
-                    title={path || 'None'}
-                    onClick={() => {
-                      onChange(path);
-                      setOpen(false);
-                    }}>
-                    {path ? <FilePathLabel path={path} /> : 'None'}
-                  </button>
-                );
-              })}
-            </div>,
-            document.body
-          )
-        : null}
-    </FieldRow>
-  );
-}

package/kits/physics-2d/engine/ui.module.css

@@ -1742,7 +1742,6 @@
 }
 
 /* --field-border is set by an overridden FieldRow (fields/fields.module.css). */
-.select,
 .textarea {
   width: 100%;
   border: 1px solid var(--field-border, var(--castle-inspector-border));
@@ -1753,35 +1752,6 @@
   outline: 0;
 }
 
-.select {
-  appearance: none;
-  -webkit-appearance: none;
-  padding-right: 26px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%23888888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  text-overflow: ellipsis;
-}
-
-.fileField {
-  display: flex;
-  align-items: center;
-  font: inherit;
-  box-shadow: none;
-  cursor: pointer;
-}
-
-.fileFieldLabel {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.fileFieldEmpty {
-  color: var(--castle-inspector-muted);
-}
-
 /* PaletteColorField: swatch + hex in the closed chrome. */
 .paletteColorField {
   gap: 8px;
@@ -1920,45 +1890,6 @@
   font-size: 5.5px;
 }
 
-.filePicker {
-  position: fixed;
-  z-index: 200;
-  box-sizing: border-box;
-  max-height: min(240px, calc(100vh - 16px));
-  overflow: auto;
-  padding: 4px;
-  border: 1px solid var(--castle-inspector-border);
-  border-radius: var(--castle-radius);
-  background: var(--castle-workspace-bg);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
-}
-
-.filePickerOption {
-  display: block;
-  width: 100%;
-  overflow: hidden;
-  text-align: left;
-  border: 0;
-  border-radius: 3px;
-  background: transparent;
-  color: var(--castle-inspector-text);
-  font: inherit;
-  font-size: 13px;
-  padding: 6px 8px;
-  cursor: pointer;
-}
-
-.filePickerPath {
-  display: block;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.filePickerOption:hover,
-.filePickerOptionSelected {
-  background: var(--castle-inspector-input-bg);
-}
-
 .textarea {
   min-height: 0;
   resize: vertical;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "castle-web-cli",
-  "version": "0.4.183",
+  "version": "0.4.185",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/castle-xyz/castle-experimental-web.git"