@vgai/editor 0.4.0 → 0.4.1

package/src/components/AssetImportDetails.tsx

@@ -4,14 +4,16 @@ import {
   assetImportPlanSchema,
   importRecipePath,
 } from '../asset-workflow/import-contract';
-import { Button, danger, SectionHeader, Select, TextInput, text } from '../design-system';
+import { Button, Checkbox, danger, SectionHeader, Select, TextInput, text } from '../design-system';
+import { revealInFinder } from '../editor-api';
 import { getStorageBackend } from '../storage';
-import { writeProjectAsset } from './asset-editor-persistence';
+import { reimportProjectAssetWithHistory, writeProjectAsset } from './asset-editor-persistence';
 
 export function AssetImportDetails({ assetPath }: { assetPath: string }) {
   const [saved, setSaved] = useState<AssetImportPlan | null>(null);
   const [draft, setDraft] = useState<AssetImportPlan | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [reimporting, setReimporting] = useState(false);
   useEffect(() => {
     let cancelled = false;
     const path = importRecipePath(assetPath);
@@ -77,91 +79,185 @@ export function AssetImportDetails({ assetPath }: { assetPath: string }) {
     setDraft((current) =>
       current ? { ...current, settings: { ...current.settings, [key]: value } } : current,
     );
+  const conversionSettingsSupported = draft.backend === 'threejs';
   return (
     <>
       <SectionHeader label="Import settings">
-        <label>
-          Scale{' '}
-          <TextInput
-            aria-label="Import scale"
-            type="number"
-            min="0.0001"
-            step="0.01"
-            value={draft.settings.scale}
-            onChange={(event) => setSetting('scale', Number(event.target.value))}
-          />
-        </label>
-        <label>
-          Units{' '}
-          <Select
-            value={draft.settings.sourceUnits}
-            onChange={(event) =>
-              setSetting(
-                'sourceUnits',
-                event.target.value as AssetImportPlan['settings']['sourceUnits'],
-              )
-            }
-          >
-            {['auto', 'mm', 'cm', 'm', 'in', 'ft'].map((value) => (
-              <option key={value}>{value}</option>
-            ))}
-          </Select>
-        </label>
-        <label>
-          Up axis{' '}
-          <Select
-            value={draft.settings.upAxis}
-            onChange={(event) =>
-              setSetting('upAxis', event.target.value as AssetImportPlan['settings']['upAxis'])
-            }
-          >
-            {['auto', 'x', 'y', 'z'].map((value) => (
-              <option key={value}>{value}</option>
-            ))}
-          </Select>
-        </label>
-        <label>
-          Normals{' '}
-          <Select
-            value={draft.settings.normals}
-            onChange={(event) =>
-              setSetting('normals', event.target.value as AssetImportPlan['settings']['normals'])
-            }
-          >
-            {['preserve', 'generate', 'recalculate'].map((value) => (
-              <option key={value}>{value}</option>
-            ))}
-          </Select>
-        </label>
-        <label>
-          Textures{' '}
-          <Select
-            value={draft.settings.textures}
-            onChange={(event) =>
-              setSetting('textures', event.target.value as AssetImportPlan['settings']['textures'])
-            }
-          >
-            {['copy', 'embed', 'discard'].map((value) => (
-              <option key={value}>{value}</option>
-            ))}
-          </Select>
-        </label>
-        <label>
-          Optimization{' '}
-          <Select
-            value={draft.settings.meshOptimization}
-            onChange={(event) =>
-              setSetting(
-                'meshOptimization',
-                event.target.value as AssetImportPlan['settings']['meshOptimization'],
-              )
-            }
-          >
-            {['none', 'safe', 'aggressive'].map((value) => (
-              <option key={value}>{value}</option>
-            ))}
-          </Select>
-        </label>
+        {conversionSettingsSupported ? (
+          <>
+            <label>
+              Scale{' '}
+              <TextInput
+                aria-label="Import scale"
+                type="number"
+                min="0.0001"
+                step="0.01"
+                value={draft.settings.scale}
+                onChange={(event) => setSetting('scale', Number(event.target.value))}
+              />
+            </label>
+            <label>
+              Units{' '}
+              <Select
+                aria-label="Source units"
+                value={draft.settings.sourceUnits}
+                onChange={(event) =>
+                  setSetting(
+                    'sourceUnits',
+                    event.target.value as AssetImportPlan['settings']['sourceUnits'],
+                  )
+                }
+              >
+                {['auto', 'mm', 'cm', 'm', 'in', 'ft'].map((value) => (
+                  <option key={value}>{value}</option>
+                ))}
+              </Select>
+            </label>
+            <label>
+              Up axis{' '}
+              <Select
+                aria-label="Source up axis"
+                value={draft.settings.upAxis}
+                onChange={(event) =>
+                  setSetting('upAxis', event.target.value as AssetImportPlan['settings']['upAxis'])
+                }
+              >
+                {['auto', 'x', 'y', 'z'].map((value) => (
+                  <option key={value}>{value}</option>
+                ))}
+              </Select>
+            </label>
+            <label>
+              Forward axis{' '}
+              <Select
+                aria-label="Source forward axis"
+                value={draft.settings.forwardAxis}
+                onChange={(event) =>
+                  setSetting(
+                    'forwardAxis',
+                    event.target.value as AssetImportPlan['settings']['forwardAxis'],
+                  )
+                }
+              >
+                {['auto', 'x', '-x', 'y', '-y', 'z', '-z'].map((value) => (
+                  <option key={value}>{value}</option>
+                ))}
+              </Select>
+            </label>
+            <label>
+              Normals{' '}
+              <Select
+                aria-label="Normal handling"
+                value={draft.settings.normals}
+                onChange={(event) =>
+                  setSetting(
+                    'normals',
+                    event.target.value as AssetImportPlan['settings']['normals'],
+                  )
+                }
+              >
+                {['preserve', 'generate', 'recalculate'].map((value) => (
+                  <option key={value}>{value}</option>
+                ))}
+              </Select>
+            </label>
+            <label>
+              Tangents{' '}
+              <Select
+                aria-label="Tangent handling"
+                value={draft.settings.tangents}
+                onChange={(event) =>
+                  setSetting(
+                    'tangents',
+                    event.target.value as AssetImportPlan['settings']['tangents'],
+                  )
+                }
+              >
+                {['preserve', 'generate', 'discard'].map((value) => (
+                  <option key={value}>{value}</option>
+                ))}
+              </Select>
+            </label>
+            <label>
+              Materials{' '}
+              <Select
+                aria-label="Material handling"
+                value={draft.settings.materials}
+                onChange={(event) =>
+                  setSetting(
+                    'materials',
+                    event.target.value as AssetImportPlan['settings']['materials'],
+                  )
+                }
+              >
+                {['import', 'discard'].map((value) => (
+                  <option key={value}>{value}</option>
+                ))}
+              </Select>
+            </label>
+            <label>
+              Textures{' '}
+              <Select
+                aria-label="Texture handling"
+                value={draft.settings.textures}
+                onChange={(event) =>
+                  setSetting(
+                    'textures',
+                    event.target.value as AssetImportPlan['settings']['textures'],
+                  )
+                }
+              >
+                {['copy', 'embed', 'discard'].map((value) => (
+                  <option key={value}>{value}</option>
+                ))}
+              </Select>
+            </label>
+            <label>
+              Animation clips{' '}
+              <TextInput
+                aria-label="Animation clips"
+                placeholder="All clips"
+                value={draft.settings.animations.join(', ')}
+                onChange={(event) =>
+                  setSetting(
+                    'animations',
+                    event.target.value
+                      .split(',')
+                      .map((value) => value.trim())
+                      .filter(Boolean),
+                  )
+                }
+              />
+            </label>
+            <label>
+              Optimization{' '}
+              <Select
+                aria-label="Mesh optimization"
+                value={draft.settings.meshOptimization}
+                onChange={(event) =>
+                  setSetting(
+                    'meshOptimization',
+                    event.target.value as AssetImportPlan['settings']['meshOptimization'],
+                  )
+                }
+              >
+                {['none', 'safe', 'aggressive'].map((value) => (
+                  <option key={value}>{value}</option>
+                ))}
+              </Select>
+            </label>
+            <label>
+              <Checkbox
+                aria-label="Retain source files"
+                checked={draft.settings.retainSource}
+                onChange={(event) => setSetting('retainSource', event.target.checked)}
+              />{' '}
+              Retain source files
+            </label>
+          </>
+        ) : (
+          <div>This runtime-native asset is copied without conversion settings.</div>
+        )}
         <div style={{ color: changes.length ? text[1] : text[3] }}>
           Dry-run impact:{' '}
           {changes.length ? `rebuild output; changed ${changes.join(', ')}` : 'no output changes'}
@@ -186,15 +282,34 @@ export function AssetImportDetails({ assetPath }: { assetPath: string }) {
           </Button>
           <Button
             type="button"
-            onClick={() =>
-              window.dispatchEvent(
-                new CustomEvent('editor:reimport-project-asset', {
-                  detail: { path: assetPath, plan: draft },
-                }),
-              )
-            }
+            disabled={reimporting}
+            onClick={async () => {
+              setReimporting(true);
+              setError(null);
+              try {
+                await reimportProjectAssetWithHistory(assetPath, draft);
+                setSaved(draft);
+              } catch (cause) {
+                setError(cause instanceof Error ? cause.message : String(cause));
+              } finally {
+                setReimporting(false);
+              }
+            }}
+          >
+            {reimporting ? 'Reimporting…' : 'Reimport'}
+          </Button>
+          <Button
+            type="button"
+            onClick={async () => {
+              setError(null);
+              try {
+                await revealInFinder(assetPath);
+              } catch (cause) {
+                setError(cause instanceof Error ? cause.message : String(cause));
+              }
+            }}
           >
-            Reimport
+            Reveal source
           </Button>
         </div>
         {error && <div style={{ color: danger }}>{error}</div>}

package/src/components/AssetImportJobStatus.tsx

@@ -0,0 +1,55 @@
+import { useSyncExternalStore } from 'react';
+import {
+  assetImportJobs,
+  assetImportJobsVersion,
+  cancelAssetImportJob,
+  clearFinishedAssetImportJobs,
+  subscribeAssetImportJobs,
+} from '../asset-workflow/asset-import-jobs';
+import { Button } from '../design-system';
+
+export function AssetImportJobStatus() {
+  useSyncExternalStore(subscribeAssetImportJobs, assetImportJobsVersion);
+  const jobs = assetImportJobs();
+  if (!jobs.length) return null;
+  const summary: Record<string, number> = {};
+  for (const job of jobs) summary[job.status] = (summary[job.status] ?? 0) + 1;
+  return (
+    <div role="status" aria-live="polite" className="vgai-asset-import-jobs">
+      <strong>Imports</strong> ·{' '}
+      {Object.entries(summary)
+        .map(([status, count]) => `${count} ${status}`)
+        .join(' · ')}
+      {jobs.map((job) => (
+        <span key={job.id} title={job.message} data-status={job.status}>
+          {job.label}: {job.stage}{' '}
+          {job.total ? `${Math.round((job.loaded / job.total) * 100)}%` : job.status}
+          {job.status === 'running' && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="compact"
+              aria-label={`Cancel ${job.label}`}
+              onClick={() => cancelAssetImportJob(job.id)}
+            >
+              Cancel
+            </Button>
+          )}
+          {(job.status === 'failed' || job.status === 'cancelled') && job.retry && (
+            <Button type="button" variant="ghost" size="compact" onClick={job.retry}>
+              Retry {job.label}
+            </Button>
+          )}
+          {job.status === 'failed' && job.message && (
+            <span className="vgai-asset-import-error">{job.message}</span>
+          )}
+        </span>
+      ))}
+      {jobs.some((job) => job.status !== 'running') && (
+        <Button type="button" variant="ghost" size="compact" onClick={clearFinishedAssetImportJobs}>
+          Clear
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/components/CenterDocuments.tsx

@@ -47,7 +47,19 @@ import {
 import { DisclosureIcon } from '../design-system';
 import { useEditorStore } from '../EditorContext';
 import { editorConsole } from '../editor-console';
-import { getGameProfiler, resizeGame, setGameContainer } from '../play-mode';
+import {
+  gameViewportShadingMode,
+  gameViewportShadingVersion,
+  setGameDocumentShadingMode,
+  subscribeGameViewportShading,
+} from '../game-viewport-state';
+import {
+  gameViewportShadingSupported,
+  getGameProfiler,
+  resizeGame,
+  setGameContainer,
+  setGameViewportShadingMode,
+} from '../play-mode';
 import { GAME_DOCUMENT_ID, SCENE_DOCUMENT_ID } from '../workspace-document-ids';
 import {
   activateWorkspaceDocument,
@@ -64,6 +76,7 @@ import { openDebuggerPanel } from './debugger-panel-state';
 import { GamePerformanceOverlay } from './GamePerformanceOverlay';
 import { MuteButton, type Resolution, ResolutionPicker } from './PlayBar';
 import { ViewportPanel } from './ViewportPanel';
+import { ViewportShadingMenu } from './ViewportShadingMenu';
 
 /** Stable identity (§7.1) of the single active-scene center document. The
  *  SLOT is stable while the scene it shows can change (root activation,
@@ -286,7 +299,10 @@ function GameStatsMenu() {
  * Transport (play/pause/stop) deliberately stays in the global `PlayBar`.
  */
 export function GameDocumentToolbar(_props: WorkspaceDocumentContentProps) {
+  const store = useEditorStore();
+  useSyncExternalStore(store.subscribe, store.getSnapshot);
   useSyncExternalStore(subscribeGameView, gameViewVersion);
+  useSyncExternalStore(subscribeGameViewportShading, gameViewportShadingVersion);
   return (
     <div
       data-testid="game-doc-toolbar"
@@ -304,6 +320,11 @@ export function GameDocumentToolbar(_props: WorkspaceDocumentContentProps) {
         scale={_gameScale}
         title="Change game resolution"
       />
+      <ViewportShadingMenu
+        mode={gameViewportShadingMode()}
+        onChange={setGameDocumentShadingMode}
+        disabled={store.playState !== 'stopped' && !gameViewportShadingSupported()}
+      />
       <MuteButton />
       <GameStatsMenu />
     </div>
@@ -372,6 +393,12 @@ function GamePanel({ style }: { style?: React.CSSProperties }) {
     setGameScale(scale);
   }, [scale]);
 
+  // A new play session mounts fresh adapter instances. Re-apply this Game
+  // viewport's own session-local diagnostic mode after every stopped→running edge.
+  useEffect(() => {
+    if (isRunning) setGameViewportShadingMode(gameViewportShadingMode());
+  }, [isRunning]);
+
   return (
     <div style={{ overflow: 'hidden', position: 'relative', flexDirection: 'column', ...style }}>
       <div

package/src/components/CommandPalette.tsx

@@ -22,7 +22,7 @@ import {
 import { useEditorStore, useHistoryCommandSnapshot, useHistoryCommands } from '../EditorContext';
 import { zIndex } from '../z-index';
 import { buildDataAssetActions } from './data-documents';
-import { buildProjectOperationActions } from './project-operation-documents';
+import { buildProjectToolActions } from './project-tool-documents';
 import { buildStoryActions } from './story-documents';
 import { buildToolActions } from './tool-documents';
 import { buildXStateMachineActions } from './xstate-documents';
@@ -70,7 +70,7 @@ export function CommandPalette({ onClose }: CommandPaletteProps) {
     // machines. All read live snapshots; the palette mounts fresh per open.
     const documents = [
       ...buildDataAssetActions(store),
-      ...buildProjectOperationActions(store),
+      ...buildProjectToolActions(store),
       ...buildStoryActions(store),
       ...buildToolActions(store),
       ...buildXStateMachineActions(),

package/src/components/DefaultEditorLayout.tsx

@@ -9,6 +9,7 @@ import {
   decideExternalSceneChangeAction,
 } from '../asset-events';
 import { installAssetSelectionAutoClear } from '../asset-selection';
+import { connectAssetImportProgressEvents } from '../asset-workflow/asset-import-jobs';
 import { getActiveAuthoring, hasAuthoringOverride } from '../authoring/active-adapter';
 import {
   switchFocusedWorld,
@@ -32,6 +33,7 @@ import { getProjectFileHistory } from '../history/project-file-history';
 import { getStorageBackend } from '../storage';
 import { installAuxiliaryEvents } from '../workspace-aux-commands';
 import { installUtilityAutoOpen, installUtilityEvents } from '../workspace-utility-commands';
+import { connectProjectAssetReimportEvents } from './asset-editor-persistence';
 import { ensureBuildContributionsRegistered } from './build-documents';
 import { useCenterDocuments } from './CenterDocuments';
 import { CommandPalette } from './CommandPalette';
@@ -168,6 +170,8 @@ export function DefaultEditorLayout({
   // W2 (§5.1) — an ENTITY selection change drops the asset selection, so the
   // Inspector goes back to being purely entity-contextual (asset-selection.ts).
   useEffect(() => installAssetSelectionAutoClear(store), [store]);
+  useEffect(() => connectAssetImportProgressEvents(), []);
+  useEffect(() => connectProjectAssetReimportEvents(), []);
   const [prefabSaveState, setPrefabSaveState] = useState<{ entityId: string; name: string } | null>(
     null,
   );

package/src/components/InspectorToolSection.tsx

@@ -1,11 +1,11 @@
-import { themeVars } from '../design-system';
+import { EditorIcon, editorIcons, themeVars } from '../design-system';
 /**
  * Inspector-tool section host (W3, docs/DATA-TOOLS-DESIGN.md §3.2/§3.4) —
  * renders one project tool (`placement: 'inspector'`) as a section in the
  * ONE inspector shell (`Inspector.tsx`), via `inspector-section-registry`.
  *
- * The chrome is the editor's (§3.4): a bordered section with the ⚙-marked
- * title row (the same project-tool marker the dock tabs use, §3.5), matching
+ * The chrome is the editor's (§3.4): a bordered section with a semantic tool
+ * icon in its title row, matching
  * the shell's own section styling (`Inspector.tsx`'s Stories block). What the
  * tool renders inside is its own business — plain React, ideally built from
  * `@editor/widgets` so fields sit flush with the built-in sections.
@@ -26,20 +26,23 @@ import { themeVars } from '../design-system';
 
 import type { AuthoringAdapter } from '@engine/adapter';
 import { EditorSelectionProvider } from '@engine/react/use-selection';
-import type { InspectorToolProps } from '@engine/tools/define-tool';
+import type { ToolInspectorContributionProps } from '@vgai/editor-sdk/contributions';
 import type { ComponentType } from 'react';
+import type { ProjectToolCatalogEntry } from '../project-tools';
+import { getToolContributionClient } from '../tool-loader';
 import { groupLabelStyle } from './inspector-widgets/shared';
 import { ToolErrorBoundary } from './ToolHost';
 
 export interface InspectorToolSectionProps {
   /** `ToolConfig.id` — the section's `data-testid` suffix (`inspector-tool-<id>`). */
   id: string;
-  /** `ToolConfig.title` — the section header, after the ⚙ marker. */
+  /** Contribution title shown after the semantic tool icon. */
   title: string;
   /** Project-relative source file, shown in crash/teaching messages. */
   file: string;
   /** The tool module's default export. */
-  Component: ComponentType<InspectorToolProps>;
+  tool: ProjectToolCatalogEntry;
+  Component: ComponentType<ToolInspectorContributionProps>;
   /** Live adapter + selection, as the section registry hands them over. */
   adapter: AuthoringAdapter;
   nodeId: string | null;
@@ -50,6 +53,7 @@ export function InspectorToolSection({
   id,
   title,
   file,
+  tool,
   Component,
   adapter,
   nodeId,
@@ -61,14 +65,12 @@ export function InspectorToolSection({
       style={{ padding: '8px', borderTop: `1px solid ${themeVars.boundary.default}`, marginTop: 4 }}
     >
       <div style={{ ...groupLabelStyle, marginBottom: 4 }}>
-        <span aria-hidden="true" style={{ marginRight: 4 }}>
-          ⚙
-        </span>
+        <EditorIcon icon={editorIcons.tool.extension} tone="muted" style={{ marginRight: 4 }} />
         {title}
       </div>
       <ToolErrorBoundary file={file}>
         <EditorSelectionProvider adapter={adapter} nodeId={nodeId}>
-          <Component node={node} nodeId={nodeId} />
+          <Component tool={tool} client={getToolContributionClient()} node={node} nodeId={nodeId} />
         </EditorSelectionProvider>
       </ToolErrorBoundary>
     </div>