@scenoco-three/editor 0.5.0 → 0.6.0

package/app/ui-react/AddMemberPopup.tsx

@@ -1,114 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { X } from 'lucide-react';
-import { getDeps, useUI } from './store.js';
-import { cx } from './cx.js';
-import styles from './ui.module.css';
-
-/** One offerable tag with the registry description shown beside it. */
-interface Candidate {
-  tag: string;
-  description: string;
-}
-
-/**
- * The "add component" picker: a centred modal with a case-insensitive filter over name and
- * description.
- *
- * What it offers is every component class the project declares, read from `ProjectModel` — which
- * is read from the source. v1 asked a runtime registry that decorators populated, so a component
- * only appeared here if it had been registered; a class is the registration now.
- *
- * There is no attachment half any more: a geometry and a material are assets a mesh points at,
- * so they are attributes rather than members to add.
- */
-export function AddMemberPopup(): React.JSX.Element | null {
-  const adding = useUI((s) => s.adding);
-  const closeAdd = useUI((s) => s.closeAdd);
-  useUI((s) => s.rev);
-  const [query, setQuery] = useState('');
-  const input = useRef<HTMLInputElement>(null);
-
-  // Reopening for a different target starts from an empty filter.
-  useEffect(() => {
-    if (adding) {
-      setQuery('');
-      input.current?.focus();
-    }
-  }, [adding]);
-
-  const candidates = useMemo(() => (adding ? offerings() : []), [adding]);
-  if (!adding) return null;
-
-  const needle = query.trim().toLowerCase();
-  const matches = needle
-    ? candidates.filter((c) => c.tag.toLowerCase().includes(needle) || c.description.toLowerCase().includes(needle))
-    : candidates;
-
-  const { getDoc } = getDeps();
-  const add = (tag: string): void => {
-    getDoc()?.addComponent(adding, tag);
-    closeAdd();
-    useUI.getState().bump(); // re-read the inspector against the new member
-  };
-
-  const label = 'Add component';
-  return (
-    // Clicking the backdrop dismisses; clicks inside must not bubble to it.
-    <div className={styles.modalBackdrop} onClick={closeAdd}>
-      <div className={styles.modal} onClick={(e) => e.stopPropagation()}>
-        <div className={styles.modalHead}>
-          <span className={styles.title}>{label}</span>
-          <button type="button" className={styles.clearBtn} title="Close" aria-label="Close" onClick={closeAdd}>
-            <X />
-          </button>
-        </div>
-        <input
-          ref={input}
-          type="text"
-          className={cx(styles.input, styles.modalFilter)}
-          placeholder="Filter…"
-          value={query}
-          autoFocus
-          onChange={(e) => setQuery(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === 'Escape') closeAdd();
-            // Enter commits the only remaining match — the fast path once you've typed.
-            if (e.key === 'Enter' && matches.length === 1) add(matches[0]!.tag);
-          }}
-        />
-        <div className={styles.modalList}>
-          {matches.length === 0 ? (
-            <div className={styles.empty}>
-              {candidates.length === 0
-                ? 'This project declares no components yet.'
-                : 'Nothing matches that filter.'}
-            </div>
-          ) : (
-            matches.map((c) => (
-              <button key={c.tag} type="button" className={styles.modalItem} onClick={() => add(c.tag)}>
-                <span className={styles.modalItemTag}>{c.tag}</span>
-                <span className={styles.modalItemDesc}>{c.description}</span>
-              </button>
-            ))
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/** What this node may still receive, straight from the registry. */
-/**
- * Every component the project declares.
- *
- * A component with a `requiresNode` — `class Flicker extends Component<PointLight>` — is only
- * offered on a node it can actually work on. Almost none declare one: like a MonoBehaviour on a
- * GameObject, a component goes on anything, and the constraint exists for the rare one that
- * reads a host-specific member.
- */
-function offerings(): Candidate[] {
-  const model = getDeps().getModel();
-  return (model?.components ?? [])
-    .map((c) => ({ tag: c.name, description: c.description ?? '' }))
-    .sort((a, b) => a.tag.localeCompare(b.tag));
-}

package/app/ui-react/BottomLauncher.tsx

@@ -1,15 +0,0 @@
-import { ListTree } from 'lucide-react';
-import { useUI } from './store.js';
-import styles from './ui.module.css';
-
-/** The small bottom-right button that opens the node list. Hidden while it's open. */
-export function BottomLauncher(): React.JSX.Element | null {
-  const nodesOpen = useUI((s) => s.nodesOpen);
-  const openNodes = useUI((s) => s.openNodes);
-  if (nodesOpen) return null;
-  return (
-    <button className={styles.launcher} title="Node list" aria-label="Node list" onClick={openNodes}>
-      <ListTree />
-    </button>
-  );
-}

package/app/ui-react/EditorUI.tsx

@@ -1,22 +0,0 @@
-import { TopBar } from './TopBar.js';
-import { BottomLauncher } from './BottomLauncher.js';
-import { NodeListSheet } from './NodeListSheet.js';
-import { InspectorSheet } from './InspectorSheet.js';
-import { AddMemberPopup } from './AddMemberPopup.js';
-import { FilePicker } from './FilePicker.js';
-
-/** The whole editor chrome: a responsive top bar, a bottom launcher, the two bottom sheets
- *  (node list + inspector), and the open dialog that stands in for all of it until a document
- *  is open. */
-export function EditorUI(): React.JSX.Element {
-  return (
-    <>
-      <TopBar />
-      <BottomLauncher />
-      <NodeListSheet />
-      <InspectorSheet />
-      <AddMemberPopup />
-      <FilePicker />
-    </>
-  );
-}

package/app/ui-react/FilePicker.tsx

@@ -1,80 +0,0 @@
-import { useEffect, useState } from 'react';
-import { getDeps, useUI } from './store.js';
-import styles from './ui.module.css';
-
-/** A document the picker offers — the scenes and prefabs the server found in the project. */
-interface Pickable {
-  kind: string;
-  /** Project-relative path, which is what `open` takes. */
-  path: string;
-  /** File name without its kind suffix — `main` from `main.scene.xml`. */
-  stem: string;
-}
-
-/** Only these two are a thing to *open*: the rest are referenced by path from inside one. */
-const OPENABLE = new Set(['scene', 'prefab']);
-
-/**
- * The start-up open dialog, shown whenever no document is open — which is what a bare
- * `scenoco-editor` means.
- *
- * Opening the first scene it happened to find instead would be a guess, and a wrong one in any
- * project with more than one scene: the editor would come up on something the person has to
- * navigate away from, with no way to see what else there is.
- */
-export function FilePicker(): React.JSX.Element | null {
-  useUI((s) => s.rev); // an open (or a failed one) changes whether this shows at all
-  const { getDoc, listDocuments, openDocument } = getDeps();
-  const [files, setFiles] = useState<Pickable[] | null>(null);
-  const [failed, setFailed] = useState<string | null>(null);
-  const open = getDoc() !== undefined;
-
-  useEffect(() => {
-    if (open) return;
-    let live = true;
-    void listDocuments().then(
-      (all) => live && setFiles(all.filter((f) => OPENABLE.has(f.kind))),
-      () => live && setFiles([]),
-    );
-    return () => {
-      live = false;
-    };
-  }, [open, listDocuments]);
-
-  if (open) return null;
-
-  const pick = (file: Pickable): void => {
-    setFailed(null);
-    void openDocument(file.path).catch((error: unknown) =>
-      setFailed(error instanceof Error ? error.message : String(error)),
-    );
-  };
-
-  return (
-    <div className={styles.modalBackdrop}>
-      <div className={styles.modal}>
-        <div className={styles.modalHead}>
-          <span className={styles.title}>Open a document</span>
-        </div>
-        <div className={styles.modalList}>
-          {files === null ? (
-            <div className={styles.empty}>Scanning the project…</div>
-          ) : files.length === 0 ? (
-            <div className={styles.empty}>No .scene.xml or .prefab.xml documents in this project.</div>
-          ) : (
-            files.map((file) => (
-              <button key={file.path} type="button" className={styles.modalItem} onClick={() => pick(file)}>
-                <span className={styles.modalItemTag}>
-                  {file.stem}
-                  <span className={styles.pickKind}>{file.kind}</span>
-                </span>
-                <span className={styles.modalItemDesc}>{file.path}</span>
-              </button>
-            ))
-          )}
-          {failed !== null && <div className={styles.empty}>{failed}</div>}
-        </div>
-      </div>
-    </div>
-  );
-}

package/app/ui-react/HeadBtn.tsx

@@ -1,21 +0,0 @@
-import type { ReactNode } from 'react';
-import styles from './ui.module.css';
-
-/** An icon button in a sheet header (actions row / close). */
-export function HeadBtn({
-  label,
-  onClick,
-  disabled,
-  children,
-}: {
-  label: string;
-  onClick: () => void;
-  disabled?: boolean;
-  children: ReactNode;
-}): React.JSX.Element {
-  return (
-    <button className={styles.headBtn} title={label} aria-label={label} onClick={onClick} disabled={disabled}>
-      {children}
-    </button>
-  );
-}