@vgai/editor 0.2.0

package/src/authoring/first-party-inspector/HeaderSection.tsx

@@ -0,0 +1,329 @@
+/**
+ * First-party HeaderSection (C2, docs/unified-world-editor/26-unified-
+ * editor-spec.md §4 C2) — entity name field, multi-select header, prefab
+ * Open/Unpack banner, and Tags. Verbatim from the deleted
+ * `components/InspectorPanel.tsx` (former `EntityNameField` :57-109, the
+ * name/multi-header/prefab-banner block :146-217, `TagsSection` :341-490).
+ *
+ * Registered by `register.tsx` for a first-party selection; its
+ * registration `suppresses` the generic shell's `header`/`transform`/
+ * `properties`/`components` built-ins (the rich first-party sections below
+ * it in registration order replace them).
+ */
+
+import { resolveUrl } from '@engine/loader';
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useEffect, useState } from 'react';
+import { getActiveAuthoring } from '../../authoring/active-adapter';
+import { resolveNameCommit } from '../../components/entity-name-commit';
+import type { SectionProps } from '../../components/inspectors/multi-edit-utils';
+import { useEditorStore } from '../../EditorContext';
+import type { EditorStore } from '../../editor-store';
+
+type Entity = SectionProps['entities'][number];
+
+const btnStyle: React.CSSProperties = {
+  background: '#333',
+  color: '#c5c8ce',
+  border: '1px solid #444',
+  borderRadius: 3,
+  padding: '3px 8px',
+  cursor: 'pointer',
+  fontSize: 11,
+};
+
+/**
+ * Entity name field — local draft state, commits (and thus pushes an undo
+ * snapshot) only on blur or Enter, not per keystroke (T1.12b). Mirrors
+ * ColorInput's hex-text-field pattern. Keyed by entity id from the caller so
+ * switching selection remounts it with a fresh draft.
+ */
+function EntityNameField({
+  store,
+  entityId,
+  name,
+}: {
+  store: EditorStore;
+  entityId: string;
+  name: string;
+}) {
+  const [draft, setDraft] = useState(name);
+
+  // Keep the draft in sync if the underlying name changes externally
+  // (undo/redo, another panel, multiplayer sync) while this field isn't focused.
+  useEffect(() => {
+    setDraft(name);
+  }, [name]);
+
+  const commit = () => {
+    const toCommit = resolveNameCommit(draft, name);
+    if (toCommit) {
+      getActiveAuthoring(store).inspector?.set(entityId, 'name', toCommit);
+    } else {
+      setDraft(name);
+    }
+  };
+
+  return (
+    <input
+      value={draft}
+      onChange={(e) => setDraft(e.target.value)}
+      onBlur={commit}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') {
+          commit();
+          (e.target as HTMLInputElement).blur();
+        } else if (e.key === 'Escape') {
+          setDraft(name);
+          (e.target as HTMLInputElement).blur();
+        }
+      }}
+      style={{
+        width: '100%',
+        background: '#1e1e1e',
+        color: '#c5c8ce',
+        border: '1px solid #333',
+        borderRadius: 2,
+        padding: '4px 6px',
+        fontSize: 13,
+        fontWeight: 600,
+      }}
+    />
+  );
+}
+
+export function HeaderSection({ entities, ids }: SectionProps) {
+  const store = useEditorStore();
+  const multi = ids.length > 1;
+  const entity = entities[0]!;
+
+  return (
+    <>
+      {/* Entity name — single entity only */}
+      {!multi && (
+        <div style={{ padding: '8px', borderBottom: '1px solid #333' }}>
+          <EntityNameField key={entity.id} store={store} entityId={entity.id!} name={entity.name} />
+        </div>
+      )}
+
+      {/* Multi-entity header */}
+      {multi && (
+        <div style={{ padding: '8px', borderBottom: '1px solid #333' }}>
+          <div style={{ fontWeight: 600, fontSize: 13 }}>{ids.length} entities selected</div>
+        </div>
+      )}
+
+      {/* Prefab banner — single entity only */}
+      {!multi && entity.prefab && (
+        <div
+          style={{
+            padding: '6px 8px',
+            borderBottom: '1px solid #333',
+            background: '#1e3a5f',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 6,
+          }}
+        >
+          <span style={{ fontSize: 11, color: '#93c5fd', fontWeight: 600 }}>Prefab</span>
+          <span
+            style={{
+              fontSize: 10,
+              color: '#60a5fa',
+              flex: 1,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+            title={entity.prefab}
+          >
+            {entity.prefab.split('/').pop()?.replace('.prefab.json', '')}
+          </span>
+          <button
+            type="button"
+            style={{ ...btnStyle, fontSize: 10, padding: '2px 6px', color: '#60a5fa' }}
+            onClick={() => {
+              window.dispatchEvent(
+                new CustomEvent('editor:open-asset', { detail: { path: entity.prefab } }),
+              );
+            }}
+          >
+            Open
+          </button>
+          <button
+            type="button"
+            style={{ ...btnStyle, fontSize: 10, padding: '2px 6px' }}
+            onClick={async () => {
+              try {
+                const res = await fetch(resolveUrl(entity.prefab!));
+                if (res.ok) {
+                  const prefab = await res.json();
+                  store.unpackPrefab(entity.id!, prefab.root);
+                }
+              } catch {
+                /* ignore */
+              }
+            }}
+          >
+            Unpack
+          </button>
+        </div>
+      )}
+
+      {/* Tags — single entity only */}
+      {!multi && <TagsSection entity={entity} store={store} />}
+    </>
+  );
+}
+
+// --- Tags Section ---
+
+function TagsSection({ entity, store }: { entity: Entity; store: EditorStore }) {
+  const [inputValue, setInputValue] = useState('');
+  const [showInput, setShowInput] = useState(false);
+  const tags = entity.tags ?? [];
+  const allTags = store.allTags();
+  const suggestions = allTags.filter(
+    (t) => !tags.includes(t) && t.toLowerCase().includes(inputValue.toLowerCase()),
+  );
+
+  const addTag = (tag: string) => {
+    if (entity.id && tag.trim()) {
+      store.addTag(entity.id, tag.trim());
+      setInputValue('');
+    }
+  };
+
+  return (
+    <div style={{ padding: '4px 8px 6px', borderBottom: '1px solid #333' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' }}>
+        <span style={{ fontSize: 10, color: '#8c8c8c', fontWeight: 600 }}>Tags</span>
+        {tags.map((tag) => (
+          <span
+            key={tag}
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: 2,
+              background: '#3a3a3a',
+              border: '1px solid #555',
+              borderRadius: 10,
+              padding: '1px 6px',
+              fontSize: 10,
+              color: '#c5c8ce',
+            }}
+          >
+            {tag}
+            <span
+              role="button"
+              tabIndex={0}
+              onClick={() => entity.id && store.removeTag(entity.id, tag)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') entity.id && store.removeTag(entity.id, tag);
+              }}
+              style={{ cursor: 'pointer', opacity: 0.6, fontSize: 9, marginLeft: 2 }}
+            >
+              <FontAwesomeIcon icon={faXmark} />
+            </span>
+          </span>
+        ))}
+        {!showInput && (
+          <span
+            role="button"
+            tabIndex={0}
+            onClick={() => setShowInput(true)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') setShowInput(true);
+            }}
+            style={{
+              fontSize: 10,
+              color: '#579EFF',
+              cursor: 'pointer',
+              padding: '1px 4px',
+            }}
+          >
+            + tag
+          </span>
+        )}
+      </div>
+      {showInput && (
+        <div style={{ marginTop: 4, position: 'relative' }}>
+          <input
+            autoFocus
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && inputValue.trim()) {
+                addTag(inputValue);
+                setShowInput(false);
+              }
+              if (e.key === 'Escape') {
+                setInputValue('');
+                setShowInput(false);
+              }
+            }}
+            onBlur={() => {
+              if (inputValue.trim()) addTag(inputValue);
+              setInputValue('');
+              setShowInput(false);
+            }}
+            placeholder="Add tag..."
+            style={{
+              width: '100%',
+              background: '#1e1e1e',
+              border: '1px solid #579EFF',
+              borderRadius: 3,
+              color: '#c5c8ce',
+              fontSize: 11,
+              padding: '2px 6px',
+              outline: 'none',
+            }}
+          />
+          {inputValue && suggestions.length > 0 && (
+            <div
+              style={{
+                position: 'absolute',
+                top: '100%',
+                left: 0,
+                right: 0,
+                background: '#2c2c2c',
+                border: '1px solid #444',
+                borderRadius: 3,
+                zIndex: 100,
+                maxHeight: 100,
+                overflowY: 'auto',
+                scrollbarWidth: 'none',
+              }}
+            >
+              {suggestions.slice(0, 5).map((s) => (
+                <div
+                  key={s}
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    addTag(s);
+                    setShowInput(false);
+                  }}
+                  style={{
+                    padding: '3px 8px',
+                    fontSize: 11,
+                    color: '#c5c8ce',
+                    cursor: 'pointer',
+                  }}
+                  onMouseEnter={(e) => {
+                    (e.currentTarget as HTMLDivElement).style.background = '#3a3a3a';
+                  }}
+                  onMouseLeave={(e) => {
+                    (e.currentTarget as HTMLDivElement).style.background = 'transparent';
+                  }}
+                >
+                  {s}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/authoring/first-party-inspector/is-first-party-selection.ts

@@ -0,0 +1,44 @@
+/**
+ * The first-party inspector-section match predicate (C2, docs/unified-
+ * world-editor/26-unified-editor-spec.md §4 C2) — ported verbatim from the
+ * deleted `components/inspector-dispatch.ts`'s `isFirstPartyNode` (A3).
+ *
+ * Deliberately its OWN tiny module, separate from `register.tsx` (which
+ * pulls in the full first-party section component tree via `EditorContext`
+ * — and, transitively, `command-listener.ts` → `play-mode.ts`, which
+ * touches `window` unconditionally at module scope under `import.meta.env.DEV`,
+ * true in vitest's default node environment): same "test the pure logic
+ * headlessly" constraint `inspector-dispatch.ts`'s own doc comment
+ * documented (this repo's `vitest.config.ts` runs `environment: 'node'`,
+ * no jsdom/testing-library), now preserved one file over instead of lost.
+ */
+
+import type { AuthoringAdapter, EditorNode } from '@engine/adapter';
+import { CompositeAuthoringAdapter } from '../composite-authoring-adapter';
+import { VgaiSceneAuthoringAdapter } from '../vgai-scene-authoring-adapter';
+
+/**
+ * True when `node` (or, if `null`, the "no selection" case) is owned by a
+ * first-party `VgaiSceneAuthoringAdapter` — INCLUDING the null-selection
+ * fallback: a composite with no selected node falls back to "does a
+ * first-party child exist at all" (in every production shape there is at
+ * most one — the edit-mode composite's focused threejs world — so this is
+ * equivalent to "the focused/first-party child exists" without needing a
+ * separate "focused" concept).
+ */
+export function isFirstPartySelection(node: EditorNode | null, adapter: AuthoringAdapter): boolean {
+  const id = node?.id ?? null;
+  if (adapter instanceof CompositeAuthoringAdapter) {
+    if (id === null) {
+      return adapter.childAdapters().some((c) => c.adapter instanceof VgaiSceneAuthoringAdapter);
+    }
+    const owner = adapter.ownerOf(id);
+    if (owner === null) return false; // world:<id> group node or unrecognized id -> generic
+    const child = adapter.childAdapters().find((c) => c.worldId === owner);
+    return child?.adapter instanceof VgaiSceneAuthoringAdapter;
+  }
+  // Bare (non-composite) adapter: first-party-ness doesn't depend on
+  // selection at all — a bare `VgaiSceneAuthoringAdapter` is first-party
+  // whether or not anything is selected; a bare ingest/module override never is.
+  return adapter instanceof VgaiSceneAuthoringAdapter;
+}

package/src/authoring/first-party-inspector/register.tsx

@@ -0,0 +1,108 @@
+/**
+ * First-party inspector section registrations (C2, docs/unified-world-
+ * editor/26-unified-editor-spec.md §4 C2) — the threejs/`.vscn` adapter
+ * module's contribution to the ONE inspector shell via
+ * `inspector-section-registry.ts`. Uses `isFirstPartySelection`
+ * (`is-first-party-selection.ts` — the deleted A3 dispatch seam's
+ * predicate, ported) as the `match` every registration below shares.
+ *
+ * Registers, in the deleted `InspectorPanel.tsx`'s original render order:
+ * Header (name/multi-header/prefab banner/tags — suppresses the shell's
+ * generic `header`/`transform`/`properties`/`components` built-ins) → the
+ * 14 typed sections (Transform…Components) → AddSectionMenu; and, for the
+ * no-selection state, the scene Environment panel (suppresses the shell's
+ * generic `environment` built-in).
+ *
+ * Imported once for its side effect at boot (`main.tsx`) — the UI harness
+ * is NOT needed here (see `ui-inspector-sections.tsx` for the UI adapter's
+ * own sibling registrations).
+ */
+
+import type { AuthoringAdapter, EditorNode } from '@engine/adapter';
+import type { ComponentType } from 'react';
+import { AnimationSection } from '../../components/inspectors/AnimationSection';
+import { AudioSection } from '../../components/inspectors/AudioSection';
+import { BoneAttachmentSection } from '../../components/inspectors/BoneAttachmentSection';
+import { CameraSection } from '../../components/inspectors/CameraSection';
+import { ComponentsSection } from '../../components/inspectors/ComponentsSection';
+import { JointsSection } from '../../components/inspectors/JointsSection';
+import { LightSection } from '../../components/inspectors/LightSection';
+import { MaterialSection } from '../../components/inspectors/MaterialSection';
+import { MeshSection } from '../../components/inspectors/MeshSection';
+import type { SectionProps } from '../../components/inspectors/multi-edit-utils';
+import { NavigationSection } from '../../components/inspectors/NavigationSection';
+import { ParticleSection } from '../../components/inspectors/ParticleSection';
+import { PhysicsSection } from '../../components/inspectors/PhysicsSection';
+import { ShadowSection } from '../../components/inspectors/ShadowSection';
+import { SplineSection } from '../../components/inspectors/SplineSection';
+import { TransformSection } from '../../components/inspectors/TransformSection';
+import { useEditorStore } from '../../EditorContext';
+import {
+  type InspectorSectionProps,
+  registerInspectorSections,
+} from '../../inspector-section-registry';
+import { AddSectionMenu } from './AddSectionMenu';
+import { EnvironmentSection } from './EnvironmentSection';
+import { HeaderSection } from './HeaderSection';
+import { isFirstPartySelection } from './is-first-party-selection';
+
+export { isFirstPartySelection };
+
+/** A first-party selection (an actual node, not the deselect state). */
+const isSelected = (node: EditorNode | null, adapter: AuthoringAdapter): boolean =>
+  node !== null && isFirstPartySelection(node, adapter);
+
+/** The first-party deselect (environment) state. */
+const isDeselected = (node: EditorNode | null, adapter: AuthoringAdapter): boolean =>
+  node === null && isFirstPartySelection(node, adapter);
+
+/**
+ * Adapt a `SectionProps`-based typed section (the existing
+ * `components/inspectors/*.tsx` components, which already read the live
+ * multi-selection from the store themselves — see e.g.
+ * `ComponentsSection.tsx`) into a registry `Section` — adapter-owned module
+ * privilege to reach into the store (mirrors `first-party-hierarchy-menu.ts`).
+ * Multi-select is preserved: the section reads the FULL selection, not just
+ * the shell's single `nodeId`.
+ */
+function wrap(Section: ComponentType<SectionProps>): ComponentType<InspectorSectionProps> {
+  return function FirstPartySection() {
+    const store = useEditorStore();
+    return <Section entities={store.selectedEntities} ids={[...store.selectedEntityIds]} />;
+  };
+}
+
+registerInspectorSections({
+  match: isSelected,
+  Section: wrap(HeaderSection),
+  suppresses: ['header', 'transform', 'properties', 'components'],
+  panelName: 'Inspector',
+});
+registerInspectorSections({ match: isSelected, Section: wrap(TransformSection) });
+registerInspectorSections({ match: isSelected, Section: wrap(BoneAttachmentSection) });
+registerInspectorSections({ match: isSelected, Section: wrap(MeshSection) });
+registerInspectorSections({ match: isSelected, Section: wrap(AnimationSection) });
+registerInspectorSections({ match: isSelected, Section: wrap(MaterialSection) });
+registerInspectorSections({ match: isSelected, Section: wrap(LightSection) });
+registerInspectorSections({ match: isSelected, Section: wrap(CameraSection) });
+registerInspectorSections({ match: isSelected, Section: wrap(PhysicsSection) });
+registerInspectorSections({ match: isSelected, Section: wrap(JointsSection) });
+registerInspectorSections({ match: isSelected, Section: wrap(ShadowSection) });
+registerInspectorSections({ match: isSelected, Section: wrap(AudioSection) });
+registerInspectorSections({ match: isSelected, Section: wrap(ParticleSection) });
+registerInspectorSections({ match: isSelected, Section: wrap(SplineSection) });
+registerInspectorSections({ match: isSelected, Section: wrap(NavigationSection) });
+registerInspectorSections({ match: isSelected, Section: wrap(ComponentsSection) });
+registerInspectorSections({ match: isSelected, Section: wrap(AddSectionMenu) });
+
+registerInspectorSections({
+  match: isDeselected,
+  Section: EnvironmentSection,
+  suppresses: ['environment'],
+  // Parity with the deleted `InspectorPanel.tsx`'s deselect branch
+  // (`<Panel name="Inspector">`, count===0): a first-party session's
+  // no-selection panel is titled "Inspector", NOT the shell's ingest-only
+  // fallback "Environment (ingested game)". Without this the editor's default
+  // idle state would falsely label a non-ingested project as ingested.
+  panelName: 'Inspector',
+});