@scenoco-three/editor 0.5.0 → 0.6.0

package/app/ui-react/Tree.tsx

@@ -1,106 +0,0 @@
-import { useMemo } from 'react';
-import { Tree as Arborist } from 'react-arborist';
-import type { NodeRendererProps } from 'react-arborist';
-import type { Object3D } from 'three';
-import { ChevronDown, ChevronRight } from 'lucide-react';
-import { getDeps, useUI } from './store.js';
-import { isEditorOnly } from '../meta.js';
-import { useSize } from './useSize.js';
-import { cx } from './cx.js';
-import styles from './ui.module.css';
-
-/** One scene node projected into the tree (react-arborist reads `id`/`children`). */
-interface TNode {
-  id: string;
-  name: string;
-  type: string;
-  obj: Object3D;
-  children: TNode[];
-}
-
-/**
- * The element name the document wrote, not three.js's class.
- *
- * Every `@scenoco-three/ui` element is a `Mesh` subclass whose `.type` reads "Mesh", so a whole
- * HUD would otherwise be an indistinguishable stack of them.
- */
-function typeName(node: Object3D): string {
-  return getDeps().getDoc()?.tagNameOf(node) ?? node.type ?? node.constructor.name;
-}
-
-function build(obj: Object3D): TNode {
-  const children = obj.children.filter((c) => !isEditorOnly(c)).map(build);
-  const id = getDeps().getDoc()?.nodeAttr(obj, 'id');
-  return { id: obj.uuid, name: id ? `#${id}` : `(${typeName(obj)})`, type: typeName(obj), obj, children };
-}
-
-/**
- * The scene hierarchy as a react-arborist tree — touch-friendly rows, virtualized,
- * with drag scaffolding ready for reparenting (wired to `onMove`, a no-op until the
- * document gains structural edits). Selecting a row selects the node everywhere.
- */
-export function Tree(): React.JSX.Element {
-  const rev = useUI((s) => s.rev);
-  const selected = useUI((s) => s.selected);
-  const select = useUI((s) => s.select);
-  const { getScene, reparent } = getDeps();
-  // Re-derive whenever the scene changes (rev bumps on open/edit/reload).
-  const data = useMemo(() => {
-    const scene = getScene();
-    return scene ? [build(scene)] : [];
-  }, [rev, getScene]);
-  const [ref, { width, height }] = useSize<HTMLDivElement>();
-
-  return (
-    <div ref={ref} className={styles.tree} style={{ height: '100%' }}>
-      <Arborist<TNode>
-        data={data}
-        openByDefault
-        width={width}
-        height={height}
-        indent={16}
-        rowHeight={30}
-        selection={selected?.uuid}
-        onSelect={(nodes) => {
-          const n = nodes[0];
-          if (n) select(n.data.obj);
-        }}
-        onMove={({ dragNodes, parentNode, index }) => {
-          // Reparent under the drop target (the scene root when dropped at top level),
-          // recorded as an undoable move + persisted comment-preservingly on save.
-          const obj = dragNodes[0]?.data.obj;
-          const root = parentNode?.data.obj ?? getScene();
-          if (obj && root) reparent(obj, root, index);
-        }}
-      >
-        {Node}
-      </Arborist>
-    </div>
-  );
-}
-
-function Node({ node, style, dragHandle }: NodeRendererProps<TNode>): React.JSX.Element {
-  const selectedUuid = useUI((s) => s.selected)?.uuid;
-  const d = node.data;
-  const hasKids = d.children.length > 0;
-  return (
-    <div
-      style={style}
-      ref={dragHandle}
-      className={cx(styles.node, selectedUuid === node.id && styles.sel, node.willReceiveDrop && styles.drop)}
-      onClick={() => node.select()}
-    >
-      <span
-        className={styles.caret}
-        onClick={(e) => {
-          e.stopPropagation();
-          node.toggle();
-        }}
-      >
-        {hasKids ? node.isOpen ? <ChevronDown /> : <ChevronRight /> : null}
-      </span>
-      <span className={styles.nodeName}>{d.name}</span>
-      {d.name.startsWith('#') ? <span className={styles.nodeType}>{d.type}</span> : null}
-    </div>
-  );
-}

package/app/ui-react/cx.ts

@@ -1,4 +0,0 @@
-/** Join truthy class names (tiny clsx). */
-export function cx(...parts: (string | false | null | undefined)[]): string {
-  return parts.filter(Boolean).join(' ');
-}

package/app/ui-react/fields.tsx

@@ -1,407 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import type { PointerEvent as ReactPointerEvent } from 'react';
-import { Lock, X } from 'lucide-react';
-import { fmtNum } from './format.js';
-import { cx } from './cx.js';
-import styles from './ui.module.css';
-
-// React inspector field widgets (one per value shape). Each owns local editing
-// state and commits through the caller's `commit` closure (which routes to the
-// live SceneDocument). Ported from the old vanilla fields.ts, scrub logic intact.
-
-type Commit = (value: number, opts?: { coalesce?: boolean }) => void;
-
-/**
- * Every row accepts the registry `description` of the thing it edits and shows it
- * as the row's tooltip. Descriptions are mandatory on `@property`/`@node`/
- * `@attachment`, so this surfaces documentation the codebase already guarantees.
- */
-type Described<T> = T & {
-  description?: string;
-  /** The value is not written in the source — render it as a placeholder, not a value. */
-  unset?: boolean;
-  /** Present only for a clearable (source-written) attribute; renders the × button. */
-  onClear?: () => void;
-};
-
-/** Removes an attribute from the source. Only rendered when the value is actually written. */
-function ClearBtn({ onClear }: { onClear: () => void }): React.JSX.Element {
-  return (
-    <button
-      type="button"
-      className={styles.clearBtn}
-      title="Clear — remove this attribute from the file"
-      aria-label="Clear value"
-      onClick={onClear}
-    >
-      <X />
-    </button>
-  );
-}
-
-/** A read-only label/value row (purely informational — no "disabled" affordance). */
-export function ReadRow({ label, value, description, unset }: Described<{ label: string; value: string }>): React.JSX.Element {
-  return (
-    <div className={cx(styles.row, unset && styles.unsetRow)} title={description}>
-      <span className={styles.k}>{label}</span>
-      <span className={styles.v}>{value}</span>
-    </div>
-  );
-}
-
-/**
- * A read-only row for a value that *would* be editable but is disabled — decorated
- * with a lock and a `reason` tooltip so it reads as intentionally locked (prefab
- * content, a `src`-loaded asset, or a value type the inspector can't edit yet)
- * rather than a plain fact.
- */
-export function LockRow({ label, value, reason, description, unset }: Described<{ label: string; value: string; reason: string }>): React.JSX.Element {
-  return (
-    <div className={cx(styles.row, styles.locked)} title={description ? `${description}\n\n${reason}` : reason}>
-      <span className={styles.k}>{label}</span>
-      <span className={styles.v}>
-        <Lock className={styles.lockIcon} aria-label={reason} />
-        <span className={styles.lockVal}>{value}</span>
-      </span>
-    </div>
-  );
-}
-
-/** A standalone scalar (no scrub handle). */
-export function NumberRow({
-  label,
-  value,
-  commit,
-  int,
-  description,
-  unset,
-  onClear,
-}: Described<{
-  label: string;
-  value: number;
-  /** `coalesce` folds a drag's many steps into one undo, as the vector rows do. */
-  commit: (v: number, opts?: { coalesce?: boolean }) => void;
-  int?: boolean;
-}>): React.JSX.Element {
-  const [text, setText] = useState(() => fmtNum(value));
-  const focused = useRef(false);
-  useEffect(() => {
-    if (!focused.current) setText(fmtNum(value));
-  }, [value]);
-  const doCommit = (): void => {
-    if (text === fmtNum(value)) return; // untouched — never write on a bare focus/blur
-    const v = parseFloat(text);
-    if (Number.isFinite(v)) commit(int ? Math.round(v) : v);
-    else setText(fmtNum(value));
-  };
-  return (
-    <div className={cx(styles.row, unset && styles.unsetRow)} title={description}>
-      <span className={styles.k}>{label}</span>
-      <div className={styles.v}>
-        <input
-          type="number"
-          inputMode={int ? 'numeric' : 'decimal'}
-          className={cx(styles.input, styles.num)}
-          value={text}
-          onChange={(e) => setText(e.target.value)}
-          onFocus={() => (focused.current = true)}
-          onBlur={() => {
-            focused.current = false;
-            doCommit();
-          }}
-          onKeyDown={(e) => e.key === 'Enter' && (e.target as HTMLInputElement).blur()}
-        />
-        {onClear ? <ClearBtn onClear={onClear} /> : null}
-      </div>
-    </div>
-  );
-}
-
-export function TextRow({
-  label,
-  value,
-  commit,
-  description,
-  unset,
-  onClear,
-}: Described<{
-  label: string;
-  value: string;
-  commit: (v: string) => void;
-}>): React.JSX.Element {
-  const [text, setText] = useState(() => value);
-  const focused = useRef(false);
-  useEffect(() => {
-    if (!focused.current) setText(value);
-  }, [value]);
-  return (
-    <div className={cx(styles.row, unset && styles.unsetRow)} title={description}>
-      <span className={styles.k}>{label}</span>
-      <div className={styles.v}>
-        <input
-          type="text"
-          className={styles.input}
-          value={text}
-          onChange={(e) => setText(e.target.value)}
-          onFocus={() => (focused.current = true)}
-          onBlur={() => {
-            focused.current = false;
-            if (text !== value) commit(text); // untouched → no write
-          }}
-          onKeyDown={(e) => e.key === 'Enter' && (e.target as HTMLInputElement).blur()}
-        />
-        {onClear ? <ClearBtn onClear={onClear} /> : null}
-      </div>
-    </div>
-  );
-}
-
-export function BoolRow({
-  label,
-  value,
-  commit,
-  description,
-  unset,
-  onClear,
-}: Described<{
-  label: string;
-  value: boolean;
-  commit: (v: boolean) => void;
-}>): React.JSX.Element {
-  return (
-    <div className={cx(styles.row, unset && styles.unsetRow)} title={description}>
-      <span className={styles.k}>{label}</span>
-      <div className={styles.v}>
-        <input type="checkbox" className={styles.toggle} checked={value} onChange={(e) => commit(e.target.checked)} />
-        {onClear ? <ClearBtn onClear={onClear} /> : null}
-      </div>
-    </div>
-  );
-}
-
-/** A dropdown of enum member names; maps the live native value ↔ its name. */
-export function EnumRow({
-  label,
-  options,
-  value,
-  commit,
-  description,
-  unset,
-  onClear,
-}: Described<{
-  label: string;
-  /** The member names, which are also the values a document writes. */
-  options: readonly string[];
-  value: string;
-  commit: (v: string) => void;
-}>): React.JSX.Element {
-  const current = value;
-  return (
-    <div className={cx(styles.row, unset && styles.unsetRow)} title={description}>
-      <span className={styles.k}>{label}</span>
-      <div className={styles.v}>
-        <select
-          className={cx(styles.input, styles.select)}
-          value={current}
-          onChange={(e) => commit(e.target.value)}
-        >
-          {/* A blank first option is how a value gets cleared back to the default. */}
-          <option value="">—</option>
-          {options.map((n) => (
-            <option key={n} value={n}>
-              {n}
-            </option>
-          ))}
-        </select>
-        {onClear ? <ClearBtn onClear={onClear} /> : null}
-      </div>
-    </div>
-  );
-}
-
-export function ColorRow({
-  label,
-  value,
-  commit,
-  description,
-  unset,
-  onClear,
-}: Described<{
-  label: string;
-  value: number;
-  commit: (hex: number) => void;
-}>): React.JSX.Element {
-  // Defensive: the inspector has no error boundary, so a bad value here would
-  // blank the entire panel rather than one row.
-  const hex24 = Number.isFinite(value) ? (value as number) & 0xffffff : 0;
-  const css = '#' + hex24.toString(16).padStart(6, '0');
-  const [hex, setHex] = useState(css);
-  const focused = useRef(false);
-  useEffect(() => {
-    if (!focused.current) setHex(css);
-  }, [css]);
-  return (
-    <div className={cx(styles.row, unset && styles.unsetRow)} title={description}>
-      <span className={styles.k}>{label}</span>
-      <div className={styles.v}>
-        <div className={styles.color}>
-          <input
-            type="color"
-            className={styles.swatch}
-            value={css}
-            onChange={(e) => {
-              setHex(e.target.value);
-              commit(parseInt(e.target.value.slice(1), 16));
-            }}
-          />
-          <input
-            type="text"
-            className={cx(styles.input, styles.hex)}
-            value={hex}
-            onChange={(e) => setHex(e.target.value)}
-            onFocus={() => (focused.current = true)}
-            onBlur={() => {
-              focused.current = false;
-              if (hex === css) return; // untouched → no write
-              const v = parseInt(hex.replace(/^#/, ''), 16);
-              if (Number.isFinite(v)) commit(v);
-              else setHex(css);
-            }}
-            onKeyDown={(e) => e.key === 'Enter' && (e.target as HTMLInputElement).blur()}
-          />
-        </div>
-        {onClear ? <ClearBtn onClear={onClear} /> : null}
-      </div>
-    </div>
-  );
-}
-
-/** A multi-axis vector editor (x/y/z), each axis a scrub handle + number input. */
-export function VecRow({
-  label,
-  value,
-  commit,
-  labels = ['x', 'y', 'z'],
-  description,
-  unset,
-  onClear,
-}: Described<{
-  label: string;
-  value: number[];
-  commit: (v: number[], opts?: { coalesce?: boolean }) => void;
-  labels?: string[];
-}>): React.JSX.Element {
-  return (
-    <div className={cx(styles.row, unset && styles.unsetRow)} title={description}>
-      <span className={styles.k}>{label}</span>
-      <div className={cx(styles.v, styles.axes)}>
-        {labels.map((axis, i) => (
-          <AxisField
-            key={axis}
-            label={axis}
-            value={value[i] ?? 0}
-            commit={(v, opts) => {
-              const next = value.slice();
-              next[i] = v;
-              commit(next, opts);
-            }}
-          />
-        ))}
-        {onClear ? <ClearBtn onClear={onClear} /> : null}
-      </div>
-    </div>
-  );
-}
-
-/**
- * Euler editor — **degrees in, degrees out**, matching the authored DSL and the
- * compiled model (`transform.eulerAngles`, `ValueType.Euler` props). Callers
- * holding a live `THREE.Euler` (radians) convert at their own boundary, e.g. via
- * `node.eulerAngles.toArray()` or `eulerDeg(...)`; this row never converts, so
- * there is exactly one place per call site where units change.
- */
-export function EulerRow({
-  label,
-  value,
-  commit,
-  description,
-  unset,
-  onClear,
-}: Described<{
-  label: string;
-  value: number[]; // degrees
-  commit: (degrees: number[], opts?: { coalesce?: boolean }) => void;
-}>): React.JSX.Element {
-  return <VecRow label={label} value={value} commit={commit} description={description} />;
-}
-
-/** One axis: a draggable letter (scrub) + a number input. */
-function AxisField({ label, value, commit }: { label: string; value: number; commit: Commit }): React.JSX.Element {
-  const [text, setText] = useState(() => fmtNum(value));
-  const focused = useRef(false);
-  useEffect(() => {
-    if (!focused.current) setText(fmtNum(value));
-  }, [value]);
-  const doCommit = (): void => {
-    if (text === fmtNum(value)) return; // untouched → no write
-    const v = parseFloat(text);
-    if (Number.isFinite(v)) commit(v);
-    else setText(fmtNum(value));
-  };
-  const scrub = useScrub(
-    () => parseFloat(text) || 0,
-    (v) => {
-      setText(fmtNum(v));
-      commit(v, { coalesce: true });
-    },
-  );
-  return (
-    <div className={styles.axis}>
-      <span className={cx(styles.axisK, styles.scrub)} {...scrub}>
-        {label}
-      </span>
-      <input
-        type="number"
-        inputMode="decimal"
-        className={cx(styles.input, styles.num)}
-        value={text}
-        onChange={(e) => setText(e.target.value)}
-        onFocus={() => (focused.current = true)}
-        onBlur={() => {
-          focused.current = false;
-          doCommit();
-        }}
-        onKeyDown={(e) => e.key === 'Enter' && (e.target as HTMLInputElement).blur()}
-      />
-    </div>
-  );
-}
-
-/** Drag horizontally on an element to scrub a numeric value (pointer + touch). */
-function useScrub(getValue: () => number, onScrub: (v: number) => void, step = 0.05) {
-  const start = useRef({ x: 0, v: 0 });
-  const active = useRef(false);
-  const end = (e: ReactPointerEvent): void => {
-    if (!active.current) return;
-    active.current = false;
-    try {
-      (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
-    } catch {
-      /* capture already gone */
-    }
-  };
-  return {
-    onPointerDown: (e: ReactPointerEvent) => {
-      active.current = true;
-      start.current = { x: e.clientX, v: getValue() };
-      (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
-      e.preventDefault();
-    },
-    onPointerMove: (e: ReactPointerEvent) => {
-      if (!active.current) return;
-      onScrub(start.current.v + (e.clientX - start.current.x) * step);
-    },
-    onPointerUp: end,
-    onPointerCancel: end,
-  };
-}

package/app/ui-react/format.ts

@@ -1,30 +0,0 @@
-import type { Color, Euler, Object3D, Vector2, Vector3 } from 'three';
-import { round, toDeg } from '../meta.js';
-
-// Pure value formatters for the inspector's read-only rows (ported unchanged from
-// the old fields.ts). No DOM — just value → display string.
-
-export function fmt(v: unknown): string {
-  if (v == null) return '—';
-  if (typeof v === 'number') return fmtNum(v);
-  if (typeof v === 'boolean' || typeof v === 'string') return String(v);
-  if (Array.isArray(v)) return `[${v.map(fmt).join(', ')}]`;
-  const o = v as Record<string, unknown> & {
-    isVector3?: boolean; isVector2?: boolean; isColor?: boolean; isEuler?: boolean; isObject3D?: boolean;
-  };
-  if (o.isVector3 || o.isVector2) return vec(o as unknown as Vector3);
-  if (o.isEuler) return euler(o as unknown as Euler);
-  if (o.isColor) return `#${(o as unknown as Color).getHexString()}`;
-  // A reference to another node or component: its class is the useful thing to show, since the
-  // document refers to it by an id the inspector already renders on its own row.
-  if (o.isObject3D) return `(${(v as Object3D).type})`;
-  if ('object3D' in o) return `(${(v as object).constructor.name})`;
-  return String(v);
-}
-
-export const vec = (v: Vector3 | Vector2): string =>
-  'z' in v ? `${round(v.x)} ${round(v.y)} ${round((v as Vector3).z)}` : `${round(v.x)} ${round(v.y)}`;
-export const euler = (e: Euler): string => `${toDeg(e.x)} ${toDeg(e.y)} ${toDeg(e.z)}`;
-/** A live `Euler` (radians) as the degrees triple the DSL and inspector use. */
-export const eulerDeg = (e: Euler): number[] => [toDeg(e.x), toDeg(e.y), toDeg(e.z)];
-export const fmtNum = (n: number): string => String(round(n));

package/app/ui-react/mount.tsx

@@ -1,31 +0,0 @@
-import { createRoot } from 'react-dom/client';
-import { EditorUI } from './EditorUI.js';
-import { initStore, useUI } from './store.js';
-import type { EditorDeps, EditorUIHandle } from './types.js';
-
-/**
- * Mount the React editor chrome into `#sc-ui` and return the tiny imperative
- * surface `main.ts` drives — `refresh()` (re-read live engine/document state) and
- * `select(node)` (a viewport pick). Mirrors the old `buildPanels`/`buildToolbar`
- * handles so the host wiring stays minimal.
- */
-export function mountEditorUI(deps: EditorDeps): EditorUIHandle {
-  initStore(deps);
-
-  const host = document.getElementById('sc-ui');
-  if (!host) throw new Error('#sc-ui root missing');
-  // No StrictMode: its dev double-mount makes react-arborist (react-dnd HTML5
-  // backend) throw "Cannot have two HTML5 backends at the same time".
-  createRoot(host).render(<EditorUI />);
-
-  // Track orientation so the store can enforce one-sheet-at-a-time on phones.
-  const mq = window.matchMedia('(orientation: portrait)');
-  const syncOrientation = (): void => useUI.getState().setPortrait(mq.matches);
-  syncOrientation();
-  mq.addEventListener('change', syncOrientation);
-
-  return {
-    refresh: () => useUI.getState().bump(),
-    select: (node) => useUI.getState().select(node),
-  };
-}

package/app/ui-react/store.ts

@@ -1,80 +0,0 @@
-import { create } from 'zustand';
-import type { Object3D } from 'three';
-import type { EditorDeps } from './types.js';
-
-/**
- * The editor chrome's UI state. There's exactly one editor per page, so the store
- * is a module singleton — `initStore` injects the host deps once (before the React
- * tree renders) and the actions relay to them.
- *
- * `rev` is a monotonic counter bumped on every `refresh()`: components that read
- * live engine/document values subscribe to it so an external change, an edit, or a
- * playback transition re-renders them without threading the data through props.
- */
-interface UIState {
-  selected: Object3D | null;
-  nodesOpen: boolean;
-  inspectorOpen: boolean;
-  /** Portrait forces the two sheets to be mutually exclusive (phones); landscape allows both. */
-  portrait: boolean;
-  /** The node the "add component" picker is open for, if any. */
-  adding: Object3D | null;
-  rev: number;
-  select: (node: Object3D | null) => void;
-  openNodes: () => void;
-  closeNodes: () => void;
-  openInspector: () => void;
-  closeInspector: () => void;
-  setPortrait: (portrait: boolean) => void;
-  openAdd: (node: Object3D) => void;
-  closeAdd: () => void;
-  bump: () => void;
-}
-
-let deps: EditorDeps | undefined;
-
-/** Inject the host deps. Called by `mountEditorUI` before the first render. */
-export function initStore(d: EditorDeps): void {
-  deps = d;
-}
-
-/** The host deps, once injected (actions run only after mount, so this is set). */
-export function getDeps(): EditorDeps {
-  if (!deps) throw new Error('editor UI store used before initStore()');
-  return deps;
-}
-
-export const useUI = create<UIState>((set, get) => ({
-  selected: null,
-  nodesOpen: false,
-  inspectorOpen: false,
-  portrait: false,
-  adding: null,
-  rev: 0,
-
-  // `rev` moves with the selection because the toolbar's state is derived from it: the transform
-  // modes are only meaningful with something selected, and `handlers.state()` is read at render
-  // time rather than subscribed to. Without the bump, TopBar (which subscribes to `rev` alone)
-  // keeps the enablement it was last drawn with, and Move/Rotate/Scale stay grey over a node
-  // the gizmo is visibly attached to.
-  select: (node) => {
-    set((s) => ({ selected: node, rev: s.rev + 1 }));
-    getDeps().onSelect(node); // host highlights + frames it in the viewport
-  },
-
-  // Opening one sheet closes the other only in portrait (a phone can't show both);
-  // in landscape they coexist.
-  openNodes: () => set((s) => ({ nodesOpen: true, inspectorOpen: s.portrait ? false : s.inspectorOpen })),
-  closeNodes: () => set({ nodesOpen: false }),
-  openInspector: () => set((s) => ({ inspectorOpen: true, nodesOpen: s.portrait ? false : s.nodesOpen })),
-  closeInspector: () => set({ inspectorOpen: false }),
-
-  openAdd: (node) => set({ adding: node }),
-  closeAdd: () => set({ adding: null }),
-
-  // On rotating to portrait with both open, drop the node list (keep the inspector focused).
-  setPortrait: (portrait) =>
-    set((s) => ({ portrait, nodesOpen: portrait && s.inspectorOpen ? false : s.nodesOpen })),
-
-  bump: () => set({ rev: get().rev + 1 }),
-}));