@scenoco-three/editor 0.4.0 → 0.5.4

package/app/ui-react/types.ts

@@ -0,0 +1,88 @@
+import type { Object3D, Scene } from 'three';
+import type { Engine } from '@scenoco-three/core';
+import type { ProjectModel } from '@scenoco-three/compiler';
+import type { SceneDocument } from '../document.js';
+import type { GizmoMode, GizmoSpace } from '../gizmo.js';
+
+/**
+ * The transport/gizmo/edit actions the top bar drives, plus a `state()` snapshot
+ * it polls to style itself. Structurally identical to what `main.ts` already
+ * builds — moved here from the old `toolbar.ts` so the React chrome owns the type.
+ */
+export interface ToolbarHandlers {
+  // transport
+  play(): void;
+  pause(): void;
+  step(): void;
+  stop(): void;
+  // gizmo + edit
+  getMode(): GizmoMode;
+  setMode(mode: GizmoMode): void;
+  /** Handles along the world's axes, or the object's own — Unity's Global/Local. */
+  getSpace(): GizmoSpace;
+  setSpace(space: GizmoSpace): void;
+  /** Whether the editor camera is showing the scene's screen-space UI. */
+  getShowUi(): boolean;
+  setShowUi(on: boolean): void;
+  undo(): void;
+  redo(): void;
+  save(): void;
+  /** Current state, re-read on each refresh. */
+  state(): {
+    mode: 'edit' | 'play';
+    playing: boolean;
+    canUndo: boolean;
+    canRedo: boolean;
+    dirty: boolean;
+    saving: boolean;
+    /** True when something the document owns is selected — the gizmo has a target. */
+    enabled: boolean;
+    /** A short-lived message — a save, or why one was refused. */
+    status?: string;
+  };
+}
+
+/**
+ * Everything the React chrome needs from the host page (`main.ts`): live getters
+ * for the engine/document, the toolbar handlers, a selection callback (viewport
+ * highlight + framing), and a "focus the current selection" action.
+ */
+export interface EditorDeps {
+  getEngine: () => Engine;
+  getDoc: () => SceneDocument | undefined;
+  /** What the project's TypeScript declares — the inspector's and the picker's schema. */
+  getModel: () => ProjectModel | undefined;
+  /** The live scene, which the editor owns rather than `Engine` (it drives its own loop). */
+  getScene: () => Scene | null;
+  handlers: ToolbarHandlers;
+  /** Called whenever selection changes (from the tree or the viewport) — host highlights/frames it. */
+  onSelect: (node: Object3D | null) => void;
+  /** Reframe the camera on a node (the node-list "focus" action). */
+  focusSelected: (node: Object3D) => void;
+  /** Reparent a node under a new parent (tree drag) — records an undoable move. */
+  reparent: (node: Object3D, newParent: Object3D, index?: number) => void;
+  /** Copy a node's subtree to the clipboard. */
+  copy: (node: Object3D) => void;
+  /** Cut (copy + delete) a node's subtree. */
+  cut: (node: Object3D) => void;
+  /** Paste the clipboard subtree under `parent` (the scene root when null). */
+  paste: (parent: Object3D | null) => void;
+  /** Delete a node's subtree (undoable). */
+  remove: (node: Object3D) => void;
+  /** Rename (or set) a node's scene id. */
+  setId: (node: Object3D, id: string) => void;
+  /** Whether the clipboard holds a subtree (for Paste's enabled state). */
+  hasClipboard: () => boolean;
+  /** Every document in the project — what the open dialog lists. */
+  listDocuments: () => Promise<Array<{ kind: string; path: string; stem: string }>>;
+  /** Open one, by project-relative path. Rejects with why, which the dialog shows. */
+  openDocument: (path: string) => Promise<void>;
+}
+
+/** The tiny imperative surface `main.ts` keeps a handle to (mirrors the old panels/toolbar). */
+export interface EditorUIHandle {
+  /** Re-read the live engine/document into the tree, inspector, and top bar. */
+  refresh(): void;
+  /** Select a node from outside (a viewport pick) — syncs tree + inspector. */
+  select(node: Object3D | null): void;
+}

package/app/ui-react/ui.module.css

@@ -0,0 +1,250 @@
+/* Editor chrome styles (CSS Module — class names are scoped/hashed, referenced as
+   `styles.x` from the TSX). Shares the dark theme vars from index.html. */
+
+/* ── top bar ─────────────────────────────────────────────────────────────── */
+.topbar {
+  position: fixed; top: 8px; left: 8px; right: 8px; margin: 0 auto;
+  width: max-content; max-width: calc(100% - 16px);
+  display: flex; align-items: center; gap: 2px;
+  padding: 5px; border-radius: 12px;
+  background: var(--panel); border: 1px solid var(--edge);
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(6px); pointer-events: auto;
+  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
+  -webkit-overflow-scrolling: touch;
+}
+.topbar::-webkit-scrollbar { height: 0; }
+
+.tbtn {
+  position: relative; flex: 0 0 auto;
+  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
+  padding: 0; border: 1px solid transparent; border-radius: 9px;
+  background: transparent; color: #cfe0f2; cursor: pointer;
+}
+.tbtn svg { width: 21px; height: 21px; display: block; }
+.tbtn:hover:not(:disabled) { background: rgba(74, 240, 224, 0.12); color: #eafdff; }
+.tbtn.active { background: rgba(74, 240, 224, 0.2); border-color: var(--accent); color: #eafdff; }
+.tbtn:disabled { opacity: 0.3; cursor: default; }
+.tbtn.save.dirty { color: var(--accent); }
+.tbtn.save.dirty::after {
+  content: ''; position: absolute; top: 7px; right: 7px;
+  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
+}
+.tbtn.save.saving { opacity: 0.5; }
+.sep { flex: 0 0 auto; width: 1px; height: 24px; background: var(--line); margin: 0 3px; }
+
+/* ── bottom launcher ─────────────────────────────────────────────────────── */
+.launcher {
+  position: fixed; left: 12px; bottom: 12px; z-index: 6;
+  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
+  padding: 0; border-radius: 14px; cursor: pointer; pointer-events: auto;
+  background: var(--panel); border: 1px solid var(--edge); color: #cfe0f2;
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(6px); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
+}
+.launcher:hover { color: #eafdff; border-color: var(--accent); }
+.launcher svg { width: 24px; height: 24px; }
+
+/* ── bottom sheets (node list + inspector) ───────────────────────────────── */
+.sheet {
+  position: fixed; z-index: 7; display: flex; flex-direction: column;
+  background: var(--panel); border: 1px solid var(--edge);
+  backdrop-filter: blur(10px); pointer-events: auto;
+  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.55);
+  animation: sheet-in 0.18s ease;
+}
+@keyframes sheet-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
+
+/* Portrait / narrow: a bottom-docked sheet that sits a bit lower (leaves more of
+   the viewport visible above it); one at a time. */
+.sheet {
+  left: 0; right: 0; bottom: 0;
+  height: min(50vh, 460px);
+  border-radius: 16px 16px 0 0;
+  padding-bottom: env(safe-area-inset-bottom, 0);
+}
+/* Landscape: full-height side columns (top→bottom) — node list left, inspector
+   right, both may coexist. */
+@media (orientation: landscape) {
+  .sheet { top: 12px; bottom: 12px; height: auto; border-radius: 16px; width: min(400px, 44vw); }
+  .sheetNodes { left: 12px; right: auto; }
+  .sheetInspector { right: 12px; left: auto; }
+}
+
+.head {
+  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
+  padding: 9px 10px 9px 14px; border-bottom: 1px solid var(--line);
+}
+.title {
+  flex: 0 1 auto; min-width: 0; font: 700 11px/1 ui-monospace, monospace; color: #9fe7ff;
+  letter-spacing: 0.08em; text-transform: uppercase;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+/* Many actions on a narrow phone: let the row scroll horizontally rather than overflow. */
+/* The button group sits against the right edge; `auto` only consumes spare
+   space, so a crowded header still lets the group shrink and scroll. */
+.actions { display: flex; align-items: center; gap: 2px; margin-left: auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
+.actions::-webkit-scrollbar { display: none; }
+.headBtn {
+  flex: 0 0 auto;
+  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
+  padding: 0; border: 1px solid transparent; border-radius: 8px;
+  background: transparent; color: #cfe0f2; cursor: pointer;
+}
+.headBtn svg { width: 18px; height: 18px; }
+.headBtn:hover:not(:disabled) { background: rgba(74, 240, 224, 0.12); color: #eafdff; }
+.headBtn:disabled { opacity: 0.32; cursor: default; }
+.body { flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; }
+
+/* ── tree (react-arborist rows) ──────────────────────────────────────────── */
+.tree { padding: 4px 0; }
+.node {
+  display: flex; align-items: center; gap: 4px; height: 100%;
+  padding-right: 8px; cursor: pointer; white-space: nowrap;
+  font: 12px/1.4 ui-monospace, monospace; color: #d6e2f0; border-radius: 6px;
+}
+.node:hover { background: rgba(74, 240, 224, 0.08); }
+.node.sel { background: rgba(74, 240, 224, 0.18); color: #eafdff; }
+.node.drop { background: rgba(74, 240, 224, 0.14); box-shadow: inset 0 0 0 1px var(--accent); }
+.caret {
+  flex: 0 0 18px; width: 18px; height: 100%; display: flex; align-items: center; justify-content: center;
+  color: #6f93b8; user-select: none;
+}
+.caret svg { width: 14px; height: 14px; }
+.nodeName { overflow: hidden; text-overflow: ellipsis; }
+.nodeType { color: #6f93b8; margin-left: 6px; }
+
+/* ── inspector rows + sections ───────────────────────────────────────────── */
+.inspector { padding: 6px 12px 16px; font: 12px/1.5 ui-monospace, monospace; }
+.section { margin-top: 4px; }
+.secHead {
+  display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 10px 0 4px;
+  color: #9fe7ff; font-weight: 700; border-bottom: 1px solid var(--line);
+  padding-bottom: 3px; cursor: pointer; user-select: none;
+  text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px;
+}
+.secHeadPlain { cursor: default; }
+/* The registry description of a section's tag/component: a subtle, lower-case
+   caption beside the uppercase title. Truncates rather than wrapping so a long
+   description never pushes the rows down; the full text is in the row tooltips. */
+.secDesc {
+  /* Own line, full width, wrapping: the description explains what the section is
+     for and is usually worth more than the property names under it. */
+  flex: 1 0 100%; margin: 2px 0 1px 20px;
+  color: #8a9db5; font-weight: 400; font-size: 10px; line-height: 1.45;
+  text-transform: none; letter-spacing: 0;
+  white-space: normal; overflow-wrap: anywhere;
+}
+.secCaret { flex: 0 0 14px; width: 14px; display: inline-flex; align-items: center; color: #6f93b8; }
+.secCaret svg { width: 13px; height: 13px; }
+.secBody { padding: 1px 0 2px; }
+
+/* Per-component/attachment toolbar (move up / move down / delete). Pushed to the
+   right of the section header; the buttons stop propagation so a click doesn't
+   also fold the section. */
+.secActions { margin-left: auto; display: inline-flex; align-items: center; gap: 1px; }
+.memberBtn {
+  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
+  padding: 0; border: 0; border-radius: 5px;
+  background: transparent; color: #7d90a8; cursor: pointer;
+}
+.memberBtn:hover:not(:disabled) { background: rgba(74, 240, 224, 0.14); color: #eafdff; }
+.memberBtn:disabled { opacity: 0.28; cursor: default; }
+.memberDelete:hover:not(:disabled) { background: rgba(255, 120, 120, 0.16); color: #ff9b9b; }
+.memberBtn svg { width: 13px; height: 13px; }
+/* The identity row: an active tick and the id, on one line, as Unity's inspector opens. */
+.identity { display: flex; align-items: center; gap: 8px; padding: 6px 0 8px; }
+.identityId { flex: 1 1 auto; min-width: 0; text-align: left; font-weight: 700; color: #eafdff; }
+
+.row { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 30px; padding: 2px 0; }
+.k { color: #8fa6c4; flex: 0 0 auto; }
+.v { color: #e7f0fb; text-align: right; word-break: break-word; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
+.empty { color: #6f8099; padding: 16px 4px; }
+
+/* An attribute that is NOT written in the source: the widget shows the value the
+   node will build with, dimmed, so "no attribute in the XML" reads differently
+   from "explicitly set to this". Typing in it writes the attribute. */
+.unsetRow .k { color: #61708a; }
+.unsetRow .input, .unsetRow .swatch, .unsetRow .toggle { opacity: 0.45; }
+.unsetRow:focus-within .input, .unsetRow:focus-within .swatch, .unsetRow:focus-within .toggle { opacity: 1; }
+
+/* Clears the attribute (removes it from the file). Only rendered when written. */
+.clearBtn {
+  flex: 0 0 auto; width: 20px; height: 20px; margin-left: 2px;
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 0; border: 0; border-radius: 5px;
+  background: transparent; color: #6f8099; cursor: pointer;
+}
+.clearBtn:hover { background: rgba(255, 120, 120, 0.14); color: #ff9b9b; }
+.clearBtn svg { width: 12px; height: 12px; }
+
+/* A disabled/locked row: dimmed value + a small lock glyph (reason in the title). */
+.locked { cursor: help; }
+.locked .k { color: #6f8099; }
+.locked .lockVal { color: #7c8ba3; }
+.lockIcon { width: 12px; height: 12px; color: #6f8099; flex: 0 0 auto; opacity: 0.85; }
+
+/* ── editable field widgets (16px font avoids iOS tap-zoom; roomy touch targets) ── */
+.input {
+  background: #0e1219; color: #e7f0fb; border: 1px solid var(--line); border-radius: 5px;
+  padding: 4px 6px; font: 16px ui-monospace, monospace; min-height: 28px;
+}
+.input:focus { outline: none; border-color: var(--accent); }
+.num { width: 64px; text-align: right; }
+.axes { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
+.axis { display: flex; align-items: center; gap: 2px; }
+.axisK { color: #6f93b8; font-size: 11px; width: 12px; text-align: center; }
+.scrub { cursor: ew-resize; touch-action: none; }
+.toggle { width: 22px; height: 22px; accent-color: var(--accent); }
+.color { display: flex; align-items: center; gap: 5px; }
+.swatch { width: 30px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: none; cursor: pointer; }
+.hex { width: 78px; }
+.select { min-width: 96px; cursor: pointer; }
+
+/* ── add component / attachment picker ─────────────────────────────────────── */
+/* Centred modal over a dimming backdrop. Above the sheets (z 7) so it is never
+   occluded, and capped in height so a long registry scrolls instead of overflowing. */
+.modalBackdrop {
+  position: fixed; inset: 0; z-index: 9;
+  display: flex; align-items: center; justify-content: center;
+  background: rgba(4, 8, 14, 0.55); backdrop-filter: blur(2px);
+  pointer-events: auto;
+}
+.modal {
+  width: min(460px, calc(100vw - 32px)); max-height: min(70vh, 560px);
+  display: flex; flex-direction: column;
+  background: var(--panel); border: 1px solid var(--edge); border-radius: 12px;
+  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
+  overflow: hidden;
+}
+.modalHead {
+  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
+  padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--line);
+}
+.modalHead .clearBtn { margin-left: auto; }
+.modalFilter { flex: 0 0 auto; margin: 10px 12px 6px; }
+.modalList { flex: 1 1 auto; overflow-y: auto; padding: 2px 6px 8px; }
+.modalItem {
+  width: 100%; display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
+  padding: 7px 8px; border: 0; border-radius: 6px;
+  background: transparent; color: #e7f0fb; text-align: left; cursor: pointer;
+  font: inherit;
+}
+.modalItem:hover { background: rgba(74, 240, 224, 0.12); }
+.modalItemTag { font-weight: 700; color: #9fe7ff; }
+.modalItemDesc { color: #8a9db5; font-size: 10px; line-height: 1.45; }
+/* The kind chip on a file-picker row — `scene` / `prefab` beside the name. */
+.pickKind {
+  margin-left: 8px; padding: 1px 6px; border-radius: 999px;
+  background: rgba(74, 240, 224, 0.12); color: #7fd8cf;
+  font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
+}
+
+/* The "+ Add …" row that opens the picker, one per area. */
+.addRow {
+  width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
+  margin: 6px 0 2px; padding: 5px 0; border: 1px dashed var(--line); border-radius: 6px;
+  background: transparent; color: #7d90a8; cursor: pointer; font: inherit; font-size: 11px;
+}
+.addRow:hover { border-color: var(--accent); color: #eafdff; }
+.addRow svg { width: 13px; height: 13px; }

package/app/ui-react/useSize.ts

@@ -0,0 +1,20 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+
+/**
+ * Track an element's content size via ResizeObserver — react-arborist needs
+ * explicit pixel width/height, so we measure its (flex) container and feed them in.
+ */
+export function useSize<T extends HTMLElement>(): readonly [React.RefObject<T>, { width: number; height: number }] {
+  const ref = useRef<T>(null);
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const measure = (): void => setSize({ width: el.clientWidth, height: el.clientHeight });
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    measure();
+    return () => ro.disconnect();
+  }, []);
+  return [ref, size] as const;
+}

package/app/values.ts

@@ -0,0 +1,137 @@
+import type { PropInfo, ValueShape } from '@scenoco-three/compiler';
+
+/**
+ * A value as the inspector's widgets handle it: a number, a flag, some text, or a list of axes.
+ *
+ * The document stores attribute **text**, and the widgets — the number scrubber, the vector row,
+ * the colour swatch — work in typed values. This is the pair of functions between them, and it
+ * speaks the DSL's own grammar in both directions: `x: 1; y: 2` for a vector, `#rrggbb` for a
+ * colour, degrees for a rotation. So what a widget writes is what a person would have written.
+ */
+export type Scalar = number | boolean | string | number[];
+
+/** Attribute text → a value a widget can edit, or undefined when there is nothing to show. */
+export function parseValue(shape: ValueShape, text: string | undefined): Scalar | undefined {
+  if (text === undefined) return undefined;
+  switch (shape) {
+    case 'number': {
+      const n = Number(text.trim());
+      return Number.isFinite(n) ? n : 0;
+    }
+    case 'boolean':
+      return text.trim() === 'true';
+    case 'color':
+      return colorToNumber(text);
+    case 'vector2':
+      return axes(text, 2);
+    case 'vector3':
+    case 'euler':
+      return axes(text, 3);
+    case 'vector4':
+      return axes(text, 4);
+    default:
+      return text;
+  }
+}
+
+/** A value from a widget → the text the document gets. */
+export function formatValue(shape: ValueShape, value: Scalar): string {
+  switch (shape) {
+    case 'number':
+      return String(round(Number(value)));
+    case 'boolean':
+      return value ? 'true' : 'false';
+    case 'color':
+      return `#${Math.max(0, Math.round(Number(value))).toString(16).padStart(6, '0').slice(-6)}`;
+    case 'vector2':
+      return named(value as number[], ['x', 'y']);
+    case 'vector3':
+    case 'euler':
+      return named(value as number[], ['x', 'y', 'z']);
+    case 'vector4':
+      return named(value as number[], ['x', 'y', 'z', 'w']);
+    default:
+      return String(value);
+  }
+}
+
+/**
+ * Something to render for an attribute the document does not write.
+ *
+ * The row still has to draw, and setting it is the whole point of it being there — so an unwritten
+ * optional shows its declared default when it has one, and a neutral value when it does not.
+ */
+export function shownValue(prop: PropInfo, written: string | undefined): Scalar {
+  return parseValue(prop.shape, written) ?? parseValue(prop.shape, prop.default?.replace(/^['"]|['"]$/g, '')) ?? neutral(prop.shape);
+}
+
+function neutral(shape: ValueShape): Scalar {
+  switch (shape) {
+    case 'boolean':
+      return false;
+    case 'string':
+    case 'enum':
+    case 'nodeRef':
+    case 'assetRef':
+      return '';
+    case 'vector2':
+      return [0, 0];
+    case 'vector3':
+    case 'euler':
+      return [0, 0, 0];
+    case 'vector4':
+      return [0, 0, 0, 0];
+    default:
+      return 0;
+  }
+}
+
+/** Which widget renders a shape, or `null` for one no widget can edit. */
+export function widgetFor(prop: PropInfo): ValueShape | null {
+  switch (prop.shape) {
+    case 'number':
+    case 'boolean':
+    case 'string':
+    case 'color':
+    case 'vector2':
+    case 'vector3':
+    case 'vector4':
+    case 'euler':
+    case 'enum':
+    case 'nodeRef':
+    case 'assetRef':
+      return prop.shape;
+    default:
+      return null; // an array, or something the DSL cannot express
+  }
+}
+
+function axes(text: string, arity: number): number[] {
+  const out = new Array<number>(arity).fill(0);
+  const names = ['x', 'y', 'z', 'w'];
+  // The one spelling a document uses. A value that is not in it reads as zeroes, which is what
+  // the compiler would have rejected anyway — the widget then writes it back correctly.
+  for (const part of text.split(';')) {
+    const [axis, value] = part.split(':');
+    const index = names.indexOf((axis ?? '').trim());
+    const n = Number((value ?? '').trim());
+    if (index !== -1 && index < arity && Number.isFinite(n)) out[index] = n;
+  }
+  return out;
+}
+
+function named(values: number[], names: string[]): string {
+  return names.map((name, i) => `${name}: ${round(values[i] ?? 0)}`).join('; ');
+}
+
+function colorToNumber(text: string): number {
+  const hex = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.exec(text.trim());
+  if (!hex) return 0;
+  const digits = hex[1]!;
+  return parseInt(digits.length === 3 ? digits.replace(/./g, (c) => c + c) : digits, 16);
+}
+
+/** Three decimals: a scrubbed number should not write `0.30000000000000004` into someone's file. */
+function round(n: number): number {
+  return Math.round(n * 1000) / 1000;
+}