@volter/editor-core 0.5.57

package/src/components/LightExplorerPanel.tsx

@@ -0,0 +1,433 @@
+import { faArrowDown, faArrowUp } from '@fortawesome/free-solid-svg-icons';
+import {
+  Button,
+  Checkbox,
+  ColorSwatchInput,
+  EditorIcon,
+  NumberInput,
+  Select,
+  TextInput,
+} from '@volter/editor-sdk/widgets';
+import type { AuthoringAdapter } from '@volter/editor-project/adapter';
+import {
+  type MutableRefObject,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from 'react';
+import { activeAuthoringVersion, subscribeActiveAuthoring } from '../authoring/active-adapter';
+import { setAuthoringSelection } from '../authoring/consumer-actions';
+import { resolvePanelAuthoring } from '../authoring/panel-authoring';
+import { useEditorStore } from '../editor-runtime';
+import {
+  type LightExplorerField,
+  type LightExplorerRow,
+  lightExplorerRows,
+  setLightExplorerField,
+} from '../light-explorer-model';
+import {
+  subscribeWorkspaceDocuments,
+  workspaceDocumentRegistryVersion,
+} from '../workspace-document-registry';
+
+type SortKey = 'name' | 'type' | 'intensity' | 'range' | 'shadows';
+type SortDirection = 'ascending' | 'descending';
+
+function compareNullable(a: string | number | boolean | null, b: string | number | boolean | null) {
+  if (a === null && b === null) return 0;
+  if (a === null) return 1;
+  if (b === null) return -1;
+  if (typeof a === 'string' && typeof b === 'string') {
+    return a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
+  }
+  return Number(a) - Number(b);
+}
+
+function sortValue(row: LightExplorerRow, key: SortKey): string | number | boolean | null {
+  if (key === 'name' || key === 'type') return row[key];
+  return row[key].value;
+}
+
+function SortHeader({
+  label,
+  sortKey,
+  activeKey,
+  direction,
+  onSort,
+}: {
+  readonly label: string;
+  readonly sortKey: SortKey;
+  readonly activeKey: SortKey;
+  readonly direction: SortDirection;
+  readonly onSort: (key: SortKey) => void;
+}) {
+  const active = sortKey === activeKey;
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="compact"
+      className="vgai-light-explorer-sort"
+      aria-label={`Sort lights by ${label}`}
+      onClick={() => onSort(sortKey)}
+    >
+      {label}
+      {active ? (
+        <EditorIcon icon={direction === 'ascending' ? faArrowUp : faArrowDown} size="xs" />
+      ) : null}
+    </Button>
+  );
+}
+
+function UnsupportedCell() {
+  return <span className="vgai-light-explorer-unavailable">—</span>;
+}
+
+function EnabledCell({
+  row,
+  edit,
+}: {
+  readonly row: LightExplorerRow;
+  readonly edit: (field: LightExplorerField, value: unknown) => void;
+}) {
+  if (!row.enabled.supported) return <UnsupportedCell />;
+  return (
+    <Checkbox
+      aria-label={`${row.enabled.value ? 'Disable' : 'Enable'} ${row.name}`}
+      checked={row.enabled.value ?? false}
+      disabled={!row.enabled.writable}
+      onChange={(event) => edit('enabled', event.target.checked)}
+    />
+  );
+}
+
+function ColorCell({
+  row,
+  edit,
+}: {
+  readonly row: LightExplorerRow;
+  readonly edit: (field: LightExplorerField, value: unknown) => void;
+}) {
+  if (!row.color.supported || !row.color.value) return <UnsupportedCell />;
+  return (
+    <div className="vgai-light-explorer-color">
+      <ColorSwatchInput
+        aria-label={`Color for ${row.name}`}
+        value={row.color.value}
+        disabled={!row.color.writable}
+        onChange={(event) => edit('color', event.target.value)}
+      />
+      <span>{row.color.value}</span>
+    </div>
+  );
+}
+
+function NumericCell({
+  row,
+  field,
+  step,
+  edit,
+}: {
+  readonly row: LightExplorerRow;
+  readonly field: 'intensity' | 'range';
+  readonly step: number;
+  readonly edit: (field: LightExplorerField, value: unknown) => void;
+}) {
+  const cell = row[field];
+  if (!cell.supported) return <UnsupportedCell />;
+  return (
+    <NumberInput
+      value={cell.value}
+      disabled={!cell.writable}
+      precision={2}
+      step={step}
+      onChange={(value) => edit(field, value)}
+    />
+  );
+}
+
+function ShadowsCell({
+  row,
+  edit,
+}: {
+  readonly row: LightExplorerRow;
+  readonly edit: (field: LightExplorerField, value: unknown) => void;
+}) {
+  if (!row.shadows.supported) return <UnsupportedCell />;
+  return (
+    <Checkbox
+      aria-label={`Toggle shadows for ${row.name}`}
+      checked={row.shadows.value ?? false}
+      disabled={!row.shadows.writable}
+      onChange={(event) => edit('shadows', event.target.checked)}
+    />
+  );
+}
+
+function LightTableRow({
+  row,
+  adapter,
+  visibleRows,
+  selected,
+  selectionAnchor,
+  edit,
+}: {
+  readonly row: LightExplorerRow;
+  readonly adapter: AuthoringAdapter;
+  readonly visibleRows: readonly LightExplorerRow[];
+  readonly selected: ReadonlySet<string>;
+  readonly selectionAnchor: MutableRefObject<string | null>;
+  readonly edit: (row: LightExplorerRow, field: LightExplorerField, value: unknown) => void;
+}) {
+  const editRow = (field: LightExplorerField, value: unknown) => edit(row, field, value);
+  return (
+    <tr data-selected={selected.has(row.id) || undefined}>
+      <td>
+        <EnabledCell row={row} edit={editRow} />
+      </td>
+      <td>
+        <Button
+          type="button"
+          variant="ghost"
+          size="compact"
+          className="vgai-light-explorer-name"
+          aria-pressed={selected.has(row.id)}
+          onClick={(event) => {
+            selectRow(
+              adapter,
+              visibleRows,
+              row.id,
+              selectionAnchor.current,
+              event.shiftKey,
+              event.metaKey || event.ctrlKey,
+            );
+            if (!event.shiftKey) selectionAnchor.current = row.id;
+          }}
+        >
+          {row.name}
+        </Button>
+      </td>
+      <td className="vgai-light-explorer-type">{row.type}</td>
+      <td>
+        <ColorCell row={row} edit={editRow} />
+      </td>
+      <td>
+        <NumericCell row={row} field="intensity" step={0.1} edit={editRow} />
+      </td>
+      <td>
+        <NumericCell row={row} field="range" step={0.5} edit={editRow} />
+      </td>
+      <td>
+        <ShadowsCell row={row} edit={editRow} />
+      </td>
+    </tr>
+  );
+}
+
+function selectedTargets(
+  row: LightExplorerRow,
+  selected: ReadonlySet<string>,
+  visibleRows: readonly LightExplorerRow[],
+): string[] {
+  if (!selected.has(row.id)) return [row.id];
+  const selectedLights = visibleRows.filter((candidate) => selected.has(candidate.id));
+  return selectedLights.length > 1 ? selectedLights.map((candidate) => candidate.id) : [row.id];
+}
+
+function selectRow(
+  adapter: AuthoringAdapter,
+  visibleRows: readonly LightExplorerRow[],
+  rowId: string,
+  anchorId: string | null,
+  extend: boolean,
+  toggle: boolean,
+): void {
+  if (!adapter.selection) return;
+  const current = adapter.selection.get();
+  if (extend && anchorId) {
+    const anchor = visibleRows.findIndex((row) => row.id === anchorId);
+    const target = visibleRows.findIndex((row) => row.id === rowId);
+    if (anchor >= 0 && target >= 0) {
+      const range = visibleRows
+        .slice(Math.min(anchor, target), Math.max(anchor, target) + 1)
+        .map((row) => row.id);
+      setAuthoringSelection(adapter, toggle ? [...new Set([...current, ...range])] : range, {
+        intent: 'exact',
+      });
+      return;
+    }
+  }
+  if (toggle) {
+    setAuthoringSelection(
+      adapter,
+      current.includes(rowId) ? current.filter((id) => id !== rowId) : [...current, rowId],
+      { intent: 'exact' },
+    );
+    return;
+  }
+  setAuthoringSelection(adapter, [rowId], { intent: 'exact' });
+}
+
+export function LightExplorerPanel() {
+  const store = useEditorStore();
+  useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+  useSyncExternalStore(
+    subscribeWorkspaceDocuments,
+    workspaceDocumentRegistryVersion,
+    workspaceDocumentRegistryVersion,
+  );
+  useSyncExternalStore(subscribeActiveAuthoring, activeAuthoringVersion, activeAuthoringVersion);
+  const { adapter } = resolvePanelAuthoring(store);
+  const [, notifyAdapterChange] = useReducer((value: number) => value + 1, 0);
+  useEffect(() => adapter.subscribe?.(notifyAdapterChange), [adapter]);
+
+  const [query, setQuery] = useState('');
+  const [typeFilter, setTypeFilter] = useState('all');
+  const [sortKey, setSortKey] = useState<SortKey>('name');
+  const [sortDirection, setSortDirection] = useState<SortDirection>('ascending');
+  const selectionAnchor = useRef<string | null>(null);
+  const rows = lightExplorerRows(adapter);
+  const types = useMemo(
+    () => [...new Set(rows.map((row) => row.type))].sort((a, b) => a.localeCompare(b)),
+    [rows],
+  );
+  const normalizedQuery = query.trim().toLocaleLowerCase();
+  const visibleRows = rows
+    .filter(
+      (row) =>
+        (typeFilter === 'all' || row.type === typeFilter) &&
+        (!normalizedQuery ||
+          row.name.toLocaleLowerCase().includes(normalizedQuery) ||
+          row.type.toLocaleLowerCase().includes(normalizedQuery)),
+    )
+    .sort((a, b) => {
+      const compared = compareNullable(sortValue(a, sortKey), sortValue(b, sortKey));
+      return sortDirection === 'ascending' ? compared : -compared;
+    });
+  const selected = new Set(adapter.selection?.get() ?? []);
+  const selectedLightCount = rows.filter((row) => selected.has(row.id)).length;
+
+  const chooseSort = (next: SortKey) => {
+    if (next === sortKey) {
+      setSortDirection((direction) => (direction === 'ascending' ? 'descending' : 'ascending'));
+    } else {
+      setSortKey(next);
+      setSortDirection('ascending');
+    }
+  };
+  const edit = (row: LightExplorerRow, field: LightExplorerField, value: unknown) => {
+    const targets = selectedTargets(row, selected, visibleRows);
+    if (setLightExplorerField(adapter, targets, field, value) > 0) store.notifyIngestEdit();
+  };
+
+  return (
+    <section className="vgai-light-explorer" aria-label="Light Explorer">
+      <div className="vgai-light-explorer-toolbar">
+        <TextInput
+          aria-label="Search lights"
+          placeholder="Search lights…"
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+        />
+        <Select
+          aria-label="Filter lights by type"
+          value={typeFilter}
+          onChange={(event) => setTypeFilter(event.target.value)}
+        >
+          <option value="all">All types</option>
+          {types.map((type) => (
+            <option key={type} value={type}>
+              {type}
+            </option>
+          ))}
+        </Select>
+        <span className="vgai-light-explorer-summary">
+          {rows.length} {rows.length === 1 ? 'light' : 'lights'}
+          {selectedLightCount > 0 ? ` · ${selectedLightCount} selected` : ''}
+        </span>
+      </div>
+      {rows.length === 0 ? (
+        <div className="vgai-light-explorer-empty">
+          The active document does not expose any lights.
+        </div>
+      ) : (
+        <div className="vgai-light-explorer-scroll">
+          <table className="vgai-light-explorer-table">
+            <thead>
+              <tr>
+                <th className="vgai-light-explorer-check-column" scope="col">
+                  On
+                </th>
+                <th scope="col">
+                  <SortHeader
+                    label="Name"
+                    sortKey="name"
+                    activeKey={sortKey}
+                    direction={sortDirection}
+                    onSort={chooseSort}
+                  />
+                </th>
+                <th scope="col">
+                  <SortHeader
+                    label="Type"
+                    sortKey="type"
+                    activeKey={sortKey}
+                    direction={sortDirection}
+                    onSort={chooseSort}
+                  />
+                </th>
+                <th scope="col">Color</th>
+                <th scope="col">
+                  <SortHeader
+                    label="Intensity"
+                    sortKey="intensity"
+                    activeKey={sortKey}
+                    direction={sortDirection}
+                    onSort={chooseSort}
+                  />
+                </th>
+                <th scope="col">
+                  <SortHeader
+                    label="Range"
+                    sortKey="range"
+                    activeKey={sortKey}
+                    direction={sortDirection}
+                    onSort={chooseSort}
+                  />
+                </th>
+                <th scope="col">
+                  <SortHeader
+                    label="Shadows"
+                    sortKey="shadows"
+                    activeKey={sortKey}
+                    direction={sortDirection}
+                    onSort={chooseSort}
+                  />
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {visibleRows.map((row) => (
+                <LightTableRow
+                  key={row.id}
+                  row={row}
+                  adapter={adapter}
+                  visibleRows={visibleRows}
+                  selected={selected}
+                  selectionAnchor={selectionAnchor}
+                  edit={edit}
+                />
+              ))}
+            </tbody>
+          </table>
+          {visibleRows.length === 0 ? (
+            <div className="vgai-light-explorer-empty">No lights match the current filters.</div>
+          ) : null}
+        </div>
+      )}
+    </section>
+  );
+}

package/src/components/MediaProperties.tsx

@@ -0,0 +1,145 @@
+import { text } from '@volter/editor-sdk/widgets';
+import { useEffect, useState } from 'react';
+import { listAssets } from '../api/assets';
+import { projectPathForAssetUrl } from '../asset-workflow/project-asset-roots';
+
+type MediaKind = 'image' | 'video' | 'audio';
+type MediaFacts = { width?: number; height?: number; duration?: number };
+
+/** File properties shared by Content selection and the open media document. */
+export function MediaProperties({
+  assetPath,
+  kind,
+  sizeBytes,
+}: {
+  assetPath: string;
+  kind: MediaKind;
+  sizeBytes?: number | undefined;
+}) {
+  // The key also resets failed/loaded state when another file is selected.
+  return (
+    <MediaFileProperties key={assetPath} assetPath={assetPath} kind={kind} sizeBytes={sizeBytes} />
+  );
+}
+
+function MediaFileProperties({
+  assetPath,
+  kind,
+  sizeBytes,
+}: {
+  assetPath: string;
+  kind: MediaKind;
+  sizeBytes?: number | undefined;
+}) {
+  const path = assetPath.split('#')[0]!;
+  const source = path.startsWith('/') || /^(?:data|blob|https?):/.test(path) ? path : `/${path}`;
+  const projectPath = projectPathForAssetUrl(path);
+  const [size, setSize] = useState(sizeBytes);
+  const [facts, setFacts] = useState<MediaFacts | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (sizeBytes !== undefined) {
+      setSize(sizeBytes);
+      return;
+    }
+    let cancelled = false;
+    const [root, ...segments] = projectPath.split('/');
+    const name = segments.pop();
+    void listAssets(root!, segments.join('/')).then((result) => {
+      if (!cancelled && result.ok)
+        setSize(result.entries.find((entry) => entry.name === name)?.size);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [projectPath, sizeBytes]);
+
+  useEffect(() => {
+    setFacts(null);
+    setError(null);
+    if (kind === 'image') {
+      const image = new Image();
+      image.onload = () => setFacts({ width: image.naturalWidth, height: image.naturalHeight });
+      image.onerror = () => setError('Image properties could not be read.');
+      image.src = source;
+      return () => {
+        image.onload = null;
+        image.onerror = null;
+      };
+    }
+    const media = document.createElement(kind);
+    media.preload = 'metadata';
+    media.onloadedmetadata = () =>
+      setFacts({
+        ...(Number.isFinite(media.duration) ? { duration: media.duration } : {}),
+        ...(media instanceof HTMLVideoElement
+          ? { width: media.videoWidth, height: media.videoHeight }
+          : {}),
+      });
+    media.onerror = () =>
+      setError('Media properties could not be read. The file may be missing or unsupported.');
+    media.src = source;
+    return () => {
+      media.onloadedmetadata = null;
+      media.onerror = null;
+      media.removeAttribute('src');
+      media.load();
+    };
+  }, [source, kind]);
+
+  const width = facts?.width;
+  const height = facts?.height;
+  const rows: Array<[string, string]> = [];
+  if (width && height) {
+    let a = width;
+    let b = height;
+    while (b) [a, b] = [b, a % b];
+    rows.push(
+      ['Dimensions', `${width} × ${height} px`],
+      ['Aspect ratio', `${width / a}:${height / a}`],
+    );
+  }
+  if (facts?.duration !== undefined)
+    rows.push(['Duration', `${Number(facts.duration.toFixed(3))} s`]);
+  const extension = path.split('?')[0]!.match(/\.([^./]+)$/)?.[1];
+  if (extension) rows.push(['Format', extension.toUpperCase()]);
+  if (size !== undefined)
+    rows.push([
+      'File size',
+      size < 1024
+        ? `${size} B`
+        : `${(size / (size < 1024 * 1024 ? 1024 : 1024 * 1024)).toFixed(1)} ${size < 1024 * 1024 ? 'KB' : 'MB'}`,
+    ]);
+  rows.push(['Location', projectPath]);
+  return (
+    <div data-testid="media-properties" style={{ padding: 8, fontSize: 12 }}>
+      {error ? (
+        <p role="status" style={{ color: text[2] }}>
+          {error}
+        </p>
+      ) : (
+        !facts && (
+          <p role="status" style={{ color: text[3] }}>
+            Reading media properties…
+          </p>
+        )
+      )}
+      <dl
+        style={{
+          margin: 0,
+          display: 'grid',
+          gridTemplateColumns: 'auto minmax(0, 1fr)',
+          gap: '10px 12px',
+        }}
+      >
+        {rows.map(([label, value]) => (
+          <div key={label} style={{ display: 'contents' }}>
+            <dt style={{ color: text[3] }}>{label}</dt>
+            <dd style={{ margin: 0, color: text[1], overflowWrap: 'anywhere' }}>{value}</dd>
+          </div>
+        ))}
+      </dl>
+    </div>
+  );
+}

package/src/components/NonThreeAuthoringBootstrap.tsx

@@ -0,0 +1,19 @@
+/** Project authoring outlives its open viewport tabs, including an empty tab set. */
+import { useEffect } from 'react';
+import { retainProjectAuthoringSession } from '../authoring/project-authoring-session';
+import { editorConsole } from '../editor-console';
+import type { EditorShellStore } from '../editor-shell-store';
+
+export function ProjectAuthoringBootstrap({ store }: { store: EditorShellStore }) {
+  useEffect(() => {
+    const session = retainProjectAuthoringSession(store);
+    void session.ready.catch((error: unknown) => {
+      editorConsole.error(
+        `Authoring session failed: ${error instanceof Error ? error.message : String(error)}`,
+        'authoring',
+      );
+    });
+    return session.dispose;
+  }, [store]);
+  return null;
+}

package/src/components/Object3DDocumentToolbar.css

@@ -0,0 +1,100 @@
+/* Compound with the shared floating-toolbar class so this document-local
+ * geometry outranks theme.css's later, intentionally generic
+ * `.vgai-floating-toolbar { position: relative }` paint rule. Without the
+ * extra specificity the toolbar participates in flow after the full-height
+ * canvas and lands below the viewport — mounted and agent-queryable, but
+ * invisible to the person using Asset Lab. */
+/* THE 3D DOCUMENT'S CONTROLS LIVE IN THE HOST'S HEADER STRIP now
+   (`WorkspaceDocumentSurface`), not floating over the stage: one row, the
+   view group first and the preview group pushed to the trailing edge. The
+   strip supplies the divider and height; these groups are plain in-flow
+   toolbars inside it. */
+.vgai-model-document-header {
+  display: flex;
+  align-items: center;
+  gap: var(--vgai-space-2);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.vgai-model-viewport-toolbar {
+  position: static;
+  min-height: auto;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.vgai-model-viewport-toolbar--preview {
+  margin-left: auto;
+}
+
+.vgai-model-viewport-toolbar > * {
+  flex: 0 0 auto;
+}
+
+.vgai-model-toolbar-labelled-control {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--vgai-space-1);
+  white-space: nowrap;
+}
+
+.vgai-model-preview-menu {
+  width: 250px;
+  padding: var(--vgai-space-3);
+  gap: var(--vgai-space-3);
+}
+
+.vgai-model-preview-menu > label {
+  display: grid;
+  grid-template-columns: 68px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--vgai-space-2);
+  color: var(--vgai-text-2);
+  font-size: var(--vgai-font-xs);
+}
+
+.vgai-model-preview-menu select {
+  grid-column: 2 / -1;
+}
+
+.vgai-model-preview-menu input[type="range"] {
+  width: 120px;
+}
+
+.vgai-model-capture-preview {
+  position: absolute;
+  z-index: var(--vgai-z-sticky);
+  top: calc(var(--vgai-space-3) + var(--vgai-control-default-height) + var(--vgai-space-2));
+  right: var(--vgai-space-3);
+  width: min(420px, calc(100% - 2 * var(--vgai-space-3)));
+  padding: var(--vgai-space-3);
+}
+
+.vgai-model-capture-preview > div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--vgai-space-3);
+}
+
+.vgai-model-capture-preview img {
+  display: block;
+  width: 100%;
+}
+
+.vgai-model-toolbar-error {
+  position: absolute;
+  z-index: var(--vgai-z-sticky);
+  right: var(--vgai-space-3);
+  bottom: var(--vgai-space-3);
+  max-width: 420px;
+}
+
+@media (width <= 720px) {
+  .vgai-model-toolbar-labelled-control > span {
+    display: none;
+  }
+}