@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/asset-selection-section.tsx

@@ -0,0 +1,338 @@
+/**
+ * §5.1 asset-selection Inspector section (W2, docs/EDITOR-WORKSPACE-SHELL-
+ * TODO.md — inventory row R6's "single-click selects → Inspector
+ * preview/metadata" half). Registered through the EXISTING
+ * `inspector-section-registry.ts` seam (§7 "inspector-section registry —
+ * already exists; retain/generalize"): the section matches whenever an asset
+ * is single-click-selected in the browser (`asset-selection.ts`), for any
+ * adapter and any (or no) entity selection — the Inspector stays contextual
+ * and is never REPLACED by a viewer (§10 acceptance #3); the full viewer
+ * lives in a center document (`asset-documents.tsx`, double-click/Enter).
+ *
+ * Per the §5.1 table, compact metadata only: image dimensions/format/size,
+ * model thumbnail + size (the summary reuses the existing
+ * `model-thumbnail.ts` renderer), audio duration/format, input-map binding
+ * summary (reusing `InputMapViewer`'s exported validation), and plain
+ * name/path/size for the rest. This module registers itself at import time
+ * (same side-effect idiom as `authoring/first-party-inspector/register.tsx`,
+ * imported from `main.tsx` FIRST so the asset section renders above other
+ * matched sections).
+ */
+
+import { resolveUrl } from '@engine/loader';
+import { MaterialFileSchema } from '@engine/scene/schema/material';
+import { useEffect, useState } from 'react';
+import { getSelectedAsset, type SelectedAsset } from '../asset-selection';
+import { assetDocumentKind } from '../asset-workflow/asset-capabilities';
+import { PROJECT_ASSET_COMMANDS } from '../asset-workflow/project-asset-commands';
+import { Button, bg, border, radius, text } from '../design-system';
+import { registerInspectorSections } from '../inspector-section-registry';
+import { getModelThumbnailRenderer } from '../model-thumbnail';
+import { validateInputMapForViewer } from './asset-viewers/InputMapViewer';
+
+const labelStyle: React.CSSProperties = { fontSize: 11, color: text[3], marginBottom: 2 };
+const valueStyle: React.CSSProperties = { fontSize: 11, color: text[1], wordBreak: 'break-all' };
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function MetaRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <div style={labelStyle}>{label}</div>
+      <div style={valueStyle}>{value}</div>
+    </div>
+  );
+}
+
+/** Compact image preview + natural dimensions (§5.1 "dimensions, format, size"). */
+function ImageSummary({ asset }: { asset: SelectedAsset }) {
+  const [dims, setDims] = useState<{ w: number; h: number } | null>(null);
+  return (
+    <>
+      <div
+        style={{
+          background: bg.inset,
+          borderRadius: radius.sm,
+          padding: 6,
+          display: 'flex',
+          justifyContent: 'center',
+        }}
+      >
+        <img
+          src={asset.path}
+          alt={asset.name}
+          style={{ maxWidth: '100%', maxHeight: 96, objectFit: 'contain' }}
+          onLoad={(e) =>
+            setDims({ w: e.currentTarget.naturalWidth, h: e.currentTarget.naturalHeight })
+          }
+        />
+      </div>
+      {dims && <MetaRow label="Dimensions" value={`${dims.w} × ${dims.h}`} />}
+    </>
+  );
+}
+
+/** Compact model summary: the shared offscreen thumbnail (existing
+ *  `model-thumbnail.ts` renderer — no second loader path). */
+function ModelSummary({ asset }: { asset: SelectedAsset }) {
+  const [src, setSrc] = useState<string | null>(null);
+  const [failed, setFailed] = useState(false);
+  useEffect(() => {
+    let cancelled = false;
+    setSrc(null);
+    setFailed(false);
+    getModelThumbnailRenderer()
+      .render(asset.path)
+      .then((dataUrl) => {
+        if (!cancelled) setSrc(dataUrl);
+      })
+      .catch(() => {
+        if (!cancelled) setFailed(true);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [asset.path]);
+  return (
+    <div
+      style={{
+        background: bg.inset,
+        borderRadius: radius.sm,
+        padding: 6,
+        display: 'flex',
+        justifyContent: 'center',
+        minHeight: 72,
+        alignItems: 'center',
+      }}
+    >
+      {src ? (
+        <img src={src} alt={asset.name} style={{ maxWidth: 96, maxHeight: 96 }} />
+      ) : (
+        <span style={{ fontSize: 11, color: text[3] }}>{failed ? 'No preview' : 'Loading…'}</span>
+      )}
+    </div>
+  );
+}
+
+/** Audio duration via metadata-only load (§5.1 "duration, format"). */
+function AudioSummary({ asset }: { asset: SelectedAsset }) {
+  const [duration, setDuration] = useState<number | null>(null);
+  const label =
+    duration === null
+      ? null
+      : `${Math.floor(duration / 60)}:${Math.floor(duration % 60)
+          .toString()
+          .padStart(2, '0')}`;
+  return (
+    <>
+      {/* Metadata probe only — no playback UI here (the audio DOCUMENT owns playback). */}
+      <audio
+        muted
+        src={asset.path}
+        preload="metadata"
+        style={{ display: 'none' }}
+        onLoadedMetadata={(e) => setDuration(e.currentTarget.duration)}
+      />
+      {label && <MetaRow label="Duration" value={label} />}
+    </>
+  );
+}
+
+/** Input-map binding summary through the SAME schema validation the full
+ *  viewer uses (`validateInputMapForViewer`) — counts, never a re-parse. */
+function InputMapSummary({ asset }: { asset: SelectedAsset }) {
+  const [summary, setSummary] = useState<string | null>(null);
+  useEffect(() => {
+    let cancelled = false;
+    setSummary(null);
+    fetch(resolveUrl(asset.path))
+      .then((r) => r.json())
+      .then((json) => {
+        if (cancelled) return;
+        const result = validateInputMapForViewer(json);
+        if (!result.ok) {
+          setSummary('Invalid input map (runtime will reject it)');
+          return;
+        }
+        const actions = Object.entries(result.data.actions ?? {});
+        const bindings = actions.reduce((n, [, a]) => n + a.bindings.length, 0);
+        setSummary(`${actions.length} action(s), ${bindings} binding(s)`);
+      })
+      .catch(() => {
+        if (!cancelled) setSummary('Failed to load file');
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [asset.path]);
+  return summary ? <MetaRow label="Bindings" value={summary} /> : null;
+}
+
+/** Shared-material compact properties; the full schema editor stays in the center document. */
+function MaterialSummary({ asset }: { asset: SelectedAsset }) {
+  const [summary, setSummary] = useState<
+    { type: string; color: string } | { error: string } | null
+  >(null);
+  useEffect(() => {
+    let cancelled = false;
+    setSummary(null);
+    fetch(resolveUrl(asset.path), { cache: 'no-store' })
+      .then((response) => response.json())
+      .then((json) => {
+        if (cancelled) return;
+        const result = MaterialFileSchema.safeParse(json);
+        setSummary(
+          result.success
+            ? { type: result.data.material.type, color: result.data.material.color ?? '#ffffff' }
+            : { error: 'Invalid material (runtime will reject it)' },
+        );
+      })
+      .catch(() => {
+        if (!cancelled) setSummary({ error: 'Failed to load material' });
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [asset.path]);
+  if (!summary) return null;
+  if ('error' in summary) return <MetaRow label="Material" value={summary.error} />;
+  return (
+    <>
+      <MetaRow label="Material type" value={summary.type} />
+      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+        <span style={{ ...labelStyle, marginBottom: 0 }}>Base color</span>
+        <span
+          title={summary.color}
+          style={{
+            width: 14,
+            height: 14,
+            borderRadius: radius.sm,
+            background: summary.color,
+            border: `1px solid ${border[2]}`,
+          }}
+        />
+        <span style={valueStyle}>{summary.color}</span>
+      </div>
+    </>
+  );
+}
+
+/** The registered section body — renders ONLY while an asset is selected
+ *  (the registration's `match` gates on the same store read). */
+export function AssetSelectionSection() {
+  const asset = getSelectedAsset();
+  if (!asset) return null;
+  const ext = asset.name.includes('.') ? (asset.name.split('.').pop() ?? '') : '';
+  return (
+    <div
+      data-testid="inspector-asset-selection"
+      style={{
+        pointerEvents: 'auto',
+        padding: 8,
+        borderBottom: `1px solid ${border[1]}`,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 6,
+      }}
+    >
+      <div style={{ ...labelStyle, marginBottom: 0, textTransform: 'uppercase' }}>Asset</div>
+      {/* §8: source-owned name, as authored. */}
+      <div style={{ fontWeight: 600, fontSize: 12, color: text[1], wordBreak: 'break-all' }}>
+        {asset.name}
+      </div>
+      {asset.kind === 'image' && <ImageSummary asset={asset} />}
+      {asset.kind === 'model' && <ModelSummary asset={asset} />}
+      {asset.kind === 'audio' && <AudioSummary asset={asset} />}
+      {asset.kind === 'material' && <MaterialSummary asset={asset} />}
+      {asset.kind === 'json' && asset.path.split(/[?#]/, 1)[0]!.endsWith('.inputmap.json') && (
+        <InputMapSummary asset={asset} />
+      )}
+      <MetaRow label="Path" value={asset.path} />
+      {asset.selectionCount && asset.selectionCount > 1 && (
+        <MetaRow label="Selection" value={`${asset.selectionCount} assets`} />
+      )}
+      {ext && <MetaRow label="Format" value={ext.toUpperCase()} />}
+      {asset.sizeBytes !== undefined && (
+        <MetaRow label="Size" value={formatSize(asset.sizeBytes)} />
+      )}
+      {asset.capabilities && (
+        <>
+          <MetaRow
+            label="Runtime readiness"
+            value={
+              asset.capabilities.runtimeReady ? 'Runtime-ready' : 'Import or conversion required'
+            }
+          />
+          <MetaRow
+            label="Preview"
+            value={asset.capabilities.previewable ? 'Available' : 'Unsupported'}
+          />
+          <MetaRow
+            label="Placement"
+            value={asset.capabilities.placeable ? 'Placeable' : 'Not placeable'}
+          />
+          <MetaRow label="Editor" value={assetDocumentKind(asset.capabilities) ?? 'No editor'} />
+        </>
+      )}
+      {asset.health && <MetaRow label="Health" value={asset.health} />}
+      {asset.healthCodes && <MetaRow label="Issues" value={asset.healthCodes.join(', ')} />}
+      {asset.dependencies && (
+        <MetaRow label="Dependencies" value={asset.dependencies.join(', ') || 'None'} />
+      )}
+      {asset.references && (
+        <MetaRow
+          label="References"
+          value={
+            asset.references
+              .map((reference) => `${reference.ownerPath} ${reference.jsonPath}`)
+              .join(', ') || 'None'
+          }
+        />
+      )}
+      {asset.sourcePath && <MetaRow label="Imported from" value={asset.sourcePath} />}
+      <div style={{ display: 'flex', gap: 6 }}>
+        <Button
+          type="button"
+          data-command-id={PROJECT_ASSET_COMMANDS.open.id}
+          onClick={() =>
+            window.dispatchEvent(
+              new CustomEvent('editor:open-project-asset', { detail: { path: asset.path } }),
+            )
+          }
+        >
+          Open
+        </Button>
+        <Button
+          type="button"
+          data-command-id={PROJECT_ASSET_COMMANDS.reimport.id}
+          disabled={!asset.sourcePath}
+          title={asset.sourcePath ? 'Run the saved import recipe again' : 'No import recipe'}
+          onClick={() =>
+            window.dispatchEvent(
+              new CustomEvent('editor:reimport-project-asset', { detail: { path: asset.path } }),
+            )
+          }
+        >
+          Reimport
+        </Button>
+      </div>
+      <div style={{ fontSize: 10, color: text[3] }}>
+        Double-click (or press Enter) in the asset browser to open the full viewer.
+      </div>
+    </div>
+  );
+}
+
+// Import-time registration (side-effect module, loaded by `main.tsx` before
+// the other inspector contributions so this section renders first when an
+// asset is selected). `match` ignores node/adapter deliberately: §5.1's
+// asset selection is browser state, orthogonal to entity selection — the
+// Inspector re-renders on asset-selection changes via its own subscription.
+registerInspectorSections({
+  match: () => getSelectedAsset() !== null,
+  Section: AssetSelectionSection,
+});

package/src/components/asset-viewers/AudioViewer.tsx

@@ -1,15 +1,10 @@
 import { useEffect, useRef, useState } from 'react';
-import { SectionHeader } from '../primitives/SectionHeader';
+import { Button, Checkbox, RangeInput, SectionHeader, themeVars } from '../../design-system';
 
-const labelStyle: React.CSSProperties = { fontSize: 11, color: '#8c8c8c', marginBottom: 2 };
-const btnStyle: React.CSSProperties = {
-  background: '#333',
-  color: '#c5c8ce',
-  border: '1px solid #444',
-  borderRadius: 3,
-  padding: '4px 16px',
-  cursor: 'pointer',
+const labelStyle: React.CSSProperties = {
   fontSize: 11,
+  color: themeVars.content.dim,
+  marginBottom: 2,
 };
 
 export function AudioViewer({ assetPath }: { assetPath: string }) {
@@ -17,6 +12,8 @@ export function AudioViewer({ assetPath }: { assetPath: string }) {
   const [playing, setPlaying] = useState(false);
   const [duration, setDuration] = useState<number | null>(null);
   const [currentTime, setCurrentTime] = useState(0);
+  const [loop, setLoop] = useState(false);
+  const [volume, setVolume] = useState(1);
   const fileName = assetPath.split('/').pop() ?? assetPath;
   const ext = assetPath.split('.').pop()?.toUpperCase() ?? '';
 
@@ -46,15 +43,22 @@ export function AudioViewer({ assetPath }: { assetPath: string }) {
 
   return (
     <div style={{ padding: 8, display: 'flex', flexDirection: 'column', gap: 8 }}>
-      <div style={{ fontWeight: 600, fontSize: 12, color: '#c5c8ce', wordBreak: 'break-all' }}>
+      <div
+        style={{
+          fontWeight: 600,
+          fontSize: 12,
+          color: themeVars.content.primary,
+          wordBreak: 'break-all',
+        }}
+      >
         {fileName}
       </div>
       {/* Player */}
       <div
         style={{
           width: '100%',
-          background: '#1e1e1e',
-          borderRadius: 4,
+          background: themeVars.surface.inset,
+          borderRadius: themeVars.shape.small,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
@@ -65,6 +69,8 @@ export function AudioViewer({ assetPath }: { assetPath: string }) {
       >
         {/* Audio icon */}
         <svg viewBox="0 0 24 24" width={48} height={48}>
+          {/* #34d399 = the asset-category audio green (AssetBrowser's assetIconColors)
+              — a deliberate category-palette literal, not chrome. */}
           <rect x="3" y="3" width="18" height="18" rx="2" fill="#34d399" />
           <path
             d="M9 8l4-2v12l-4-2H7V10h2zm6 1v6m2-5v4"
@@ -76,7 +82,14 @@ export function AudioViewer({ assetPath }: { assetPath: string }) {
         </svg>
         {/* Progress */}
         {duration != null && (
-          <div style={{ width: '100%', fontSize: 10, color: '#8c8c8c', textAlign: 'center' }}>
+          <div
+            style={{
+              width: '100%',
+              fontSize: 10,
+              color: themeVars.content.muted,
+              textAlign: 'center',
+            }}
+          >
             {formatTime(currentTime)} / {formatTime(duration)}
           </div>
         )}
@@ -86,8 +99,8 @@ export function AudioViewer({ assetPath }: { assetPath: string }) {
             style={{
               width: '100%',
               height: 4,
-              background: '#333',
-              borderRadius: 2,
+              background: themeVars.surface.raised,
+              borderRadius: themeVars.shape.small,
               cursor: 'pointer',
               position: 'relative',
             }}
@@ -103,19 +116,56 @@ export function AudioViewer({ assetPath }: { assetPath: string }) {
               style={{
                 width: `${(currentTime / duration) * 100}%`,
                 height: '100%',
+                // Same category-audio green as the icon above.
                 background: '#34d399',
-                borderRadius: 2,
+                borderRadius: themeVars.shape.small,
               }}
             />
           </div>
         )}
-        <button type="button" onClick={togglePlay} style={btnStyle}>
+        <Button type="button" variant="secondary" size="comfortable" onClick={togglePlay}>
           {playing ? 'Pause' : 'Play'}
-        </button>
+        </Button>
+        <div
+          role="img"
+          aria-label="Audio waveform"
+          style={{ width: '100%', height: 36, display: 'flex', alignItems: 'center', gap: 2 }}
+        >
+          {Array.from({ length: 48 }, (_, index) => (
+            <i
+              key={index}
+              style={{
+                flex: 1,
+                height: `${20 + ((index * 37) % 75)}%`,
+                background: '#34d399',
+                opacity: index / 48 <= currentTime / (duration || 1) ? 1 : 0.3,
+              }}
+            />
+          ))}
+        </div>
+        <label style={{ fontSize: 11, color: themeVars.content.muted }}>
+          <Checkbox checked={loop} onChange={(event) => setLoop(event.target.checked)} /> Loop
+        </label>
+        <label style={{ fontSize: 11, color: themeVars.content.muted }}>
+          Volume{' '}
+          <RangeInput
+            aria-label="Audio volume"
+            min="0"
+            max="1"
+            step="0.05"
+            value={volume}
+            onChange={(event) => {
+              const value = Number(event.target.value);
+              setVolume(value);
+              if (audioRef.current) audioRef.current.volume = value;
+            }}
+          />
+        </label>
       </div>
       <audio
         ref={audioRef}
         src={assetPath}
+        loop={loop}
         onLoadedMetadata={() => {
           if (audioRef.current) setDuration(audioRef.current.duration);
         }}
@@ -128,19 +178,21 @@ export function AudioViewer({ assetPath }: { assetPath: string }) {
         <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
           <div>
             <div style={labelStyle}>Path</div>
-            <div style={{ fontSize: 11, color: '#c5c8ce', wordBreak: 'break-all' }}>
+            <div style={{ fontSize: 11, color: themeVars.content.primary, wordBreak: 'break-all' }}>
               {assetPath}
             </div>
           </div>
           {duration != null && (
             <div>
               <div style={labelStyle}>Duration</div>
-              <div style={{ fontSize: 11, color: '#c5c8ce' }}>{formatTime(duration)}</div>
+              <div style={{ fontSize: 11, color: themeVars.content.primary }}>
+                {formatTime(duration)}
+              </div>
             </div>
           )}
           <div>
             <div style={labelStyle}>Format</div>
-            <div style={{ fontSize: 11, color: '#c5c8ce' }}>{ext}</div>
+            <div style={{ fontSize: 11, color: themeVars.content.primary }}>{ext}</div>
           </div>
         </div>
       </SectionHeader>

package/src/components/asset-viewers/GenericJsonViewer.tsx

@@ -1,8 +1,12 @@
 import { resolveUrl } from '@engine/loader';
 import { useEffect, useState } from 'react';
-import { SectionHeader } from '../primitives/SectionHeader';
+import { SectionHeader, themeVars } from '../../design-system';
 
-const labelStyle: React.CSSProperties = { fontSize: 11, color: '#8c8c8c', marginBottom: 2 };
+const labelStyle: React.CSSProperties = {
+  fontSize: 11,
+  color: themeVars.content.muted,
+  marginBottom: 2,
+};
 
 export function GenericJsonViewer({ assetPath }: { assetPath: string }) {
   const [content, setContent] = useState<string | null>(null);
@@ -34,32 +38,41 @@ export function GenericJsonViewer({ assetPath }: { assetPath: string }) {
 
   return (
     <div style={{ padding: 8, display: 'flex', flexDirection: 'column', gap: 8 }}>
-      <div style={{ fontWeight: 600, fontSize: 12, color: '#c5c8ce', wordBreak: 'break-all' }}>
+      <div
+        style={{
+          fontWeight: 600,
+          fontSize: 12,
+          color: themeVars.content.primary,
+          wordBreak: 'break-all',
+        }}
+      >
         {fileName}
       </div>
       <div
         style={{
-          background: '#1e1e1e',
-          borderRadius: 4,
+          background: themeVars.surface.inset,
+          borderRadius: themeVars.shape.small,
           padding: 8,
           overflow: 'auto',
-          scrollbarWidth: 'none',
           maxHeight: 500,
         }}
       >
         {error ? (
-          <span style={{ color: '#F53352', fontSize: 11 }}>Failed to load file</span>
+          <span style={{ color: themeVars.semantic.danger, fontSize: 11 }}>
+            Failed to load file
+          </span>
         ) : content === null ? (
-          <span style={{ color: '#8c8c8c', fontSize: 11 }}>Loading...</span>
+          <span style={{ color: themeVars.content.muted, fontSize: 11 }}>Loading...</span>
         ) : (
           <pre
             style={{
               margin: 0,
               fontSize: 10,
-              color: '#c5c8ce',
+              color: themeVars.content.primary,
               whiteSpace: 'pre-wrap',
               wordBreak: 'break-all',
-              fontFamily: 'monospace',
+              // B-6: the one editor mono stack (was bare 'monospace').
+              fontFamily: themeVars.typography.mono,
             }}
           >
             {content}
@@ -69,7 +82,9 @@ export function GenericJsonViewer({ assetPath }: { assetPath: string }) {
       <SectionHeader label="Info" defaultOpen={false}>
         <div>
           <div style={labelStyle}>Path</div>
-          <div style={{ fontSize: 11, color: '#c5c8ce', wordBreak: 'break-all' }}>{assetPath}</div>
+          <div style={{ fontSize: 11, color: themeVars.content.primary, wordBreak: 'break-all' }}>
+            {assetPath}
+          </div>
         </div>
       </SectionHeader>
     </div>