@volter/editor-core 0.5.57

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

@@ -0,0 +1,281 @@
+import { themeVars } from '@volter/editor-sdk/widgets';
+import { resolveUrl } from '@volter/editor-threejs/loader';
+import { useEffect, useState } from 'react';
+import { assetCapabilities } from '../../asset-workflow/asset-capabilities';
+import { getCurrentProject } from '../../project-manager';
+import {
+  projectModuleChangeMatches,
+  subscribeProjectModuleChange,
+} from '../../project-module-changes';
+import { AssetEditorShell } from '../AssetEditorShell';
+import { CodeView, codeViewLanguage } from '../CodeView';
+import { AudioViewer } from './AudioViewer';
+import { EnvironmentAssetDocument } from './EnvironmentAssetDocument';
+import { ImageViewer } from './ImageViewer';
+import { JsonAssetDocument } from './JsonAssetDocument';
+import { LiveModuleDocument } from './LiveModuleDocument';
+import { LutAssetDocument } from './LutAssetDocument';
+import { ModelAssetDocument } from './ModelAssetDocument';
+import { ShaderAssetDocument } from './ShaderAssetDocument';
+
+export type SourceAssetRoute =
+  | 'model'
+  | 'image'
+  | 'audio'
+  | 'json'
+  | 'environment'
+  | 'lut'
+  | 'shader'
+  | 'module'
+  | 'text'
+  | 'binary';
+
+/**
+ * A project script the editor can EXECUTE, and therefore a candidate live
+ * model module (`LiveModuleDocument`). The bound is the dev server's own: only
+ * `src/**` scripts are classified, HMR-stamped and re-served on save
+ * (`server/project-hmr-files.ts`'s `classifyProjectHotUpdate` returns `ignore`
+ * for everything else), so a script outside `src/` could be imported once but
+ * never re-executed — a live document that silently stops being live. Whether
+ * such a module actually BUILDS an `Object3D` is decided by running it, never
+ * by its name.
+ */
+function isProjectScriptPath(assetPath: string): boolean {
+  const clean = (assetPath.split(/[?#]/, 1)[0] ?? '').replace(/^\//, '');
+  return clean.startsWith('src/') && /\.(?:[cm]?[jt]sx?)$/.test(clean);
+}
+
+export function sourceAssetRoute(assetPath: string): SourceAssetRoute {
+  const capability = assetCapabilities(assetPath);
+  if (capability.editor === 'model') return 'model';
+  if (capability.editor === 'image') return 'image';
+  if (capability.editor === 'audio') return 'audio';
+  if (capability.editor === 'data') return 'json';
+  if (capability.editor === 'environment') return 'environment';
+  if (capability.format === 'cube') return 'lut';
+  if (capability.format === 'glsl' || capability.format === 'vert' || capability.format === 'frag')
+    return 'shader';
+  if (isProjectScriptPath(assetPath)) return 'module';
+  if (capability.editor === 'source' && capability.previewable) return 'text';
+  return 'binary';
+}
+
+/**
+ * THE FILE IS THE SUBJECT.
+ *
+ * A source/module document had no selection context of its own, and
+ * `waitForAssetDocumentInspector` waits for exactly that — so
+ * `editor.openAsset('/src/foo.ts', 'source')` opened the document, showed the
+ * code, and then sat until the relay's budget ran out and reported a
+ * `play-stall`: a timeout about the tab for a document that was already on
+ * screen. (The JSON route acked because `JsonAssetDocument` goes through
+ * `AssetEditorShell`.)
+ *
+ * There is no invented subject here and nothing new to publish: a source
+ * document's subject is the FILE, its identity row is the filename and the
+ * kind, and its note is the Info the shell already shows for every other
+ * asset — so it registers through the SAME holder every Asset Lab document
+ * uses (`AssetEditorShell` → `AssetEditorSubject`) rather than growing a
+ * second one.
+ */
+function TextSourcePreview({
+  documentId,
+  assetPath,
+  active = true,
+}: {
+  readonly documentId: string;
+  readonly assetPath: string;
+  readonly active?: boolean;
+}) {
+  const [content, setContent] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const fileName = assetPath.split('/').pop() ?? assetPath;
+  useEffect(() => {
+    let cancelled = false;
+    setContent(null);
+    setError(null);
+    const path = assetPath.replace(/^\//, '');
+    let revision = 0;
+    async function read() {
+      const request = ++revision;
+      try {
+        const value = await fetch(resolveUrl(assetPath), { cache: 'no-store' }).then((response) => {
+          if (!response.ok) throw new Error(`HTTP ${response.status}`);
+          return response.text();
+        });
+        if (!cancelled && request === revision) {
+          setContent(value);
+          setError(null);
+        }
+      } catch (reason) {
+        if (!cancelled && request === revision)
+          setError(reason instanceof Error ? reason.message : String(reason));
+      }
+    }
+    const refresh = (changed: string) => {
+      if (projectModuleChangeMatches(changed, path)) void read();
+    };
+    const stop = subscribeProjectModuleChange(refresh);
+    void read();
+    return () => {
+      cancelled = true;
+      stop();
+    };
+  }, [assetPath]);
+  return (
+    <AssetEditorShell
+      documentId={documentId}
+      active={active}
+      type="source"
+      title={fileName}
+      sections={[]}
+      status={`source · ${assetPath}`}
+      fill
+    >
+      <div
+        style={{
+          padding: 12,
+          height: '100%',
+          minHeight: 0,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 8,
+        }}
+      >
+        <div
+          style={{
+            padding: 8,
+            // The well GROWS to the panel instead of stopping at a fixed
+            // budget: this document is a whole tab, and CodeView virtualizes,
+            // so there is nothing to buy by capping it. (It inherited a
+            // 560px ceiling from the small in-panel preview it was cut from,
+            // which left most of a full-tab source document empty.)
+            flex: 1,
+            minHeight: 0,
+            display: 'flex',
+            overflow: 'hidden',
+            background: themeVars.surface.inset,
+            border: `1px solid ${themeVars.boundary.default}`,
+            borderRadius: themeVars.shape.small,
+          }}
+        >
+          {error !== null || content === null ? (
+            <div
+              style={{
+                fontFamily: themeVars.typography.mono,
+                fontSize: 11,
+                lineHeight: 1.5,
+                color: error ? themeVars.semantic.danger : themeVars.content.muted,
+                padding: 4,
+              }}
+            >
+              {error ?? 'Loading…'}
+            </div>
+          ) : (
+            <CodeView
+              value={content}
+              followChanges
+              language={codeViewLanguage(assetPath)}
+              fontSize={11}
+              maxHeight="100%"
+              ariaLabel={`Source of ${assetPath}`}
+            />
+          )}
+        </div>
+      </div>
+    </AssetEditorShell>
+  );
+}
+
+/** Viewer for downloaded catalog source/animation files without a magic fallback. */
+export function SourceAssetViewer({
+  documentId,
+  assetPath,
+  active = true,
+}: {
+  documentId: string;
+  assetPath: string;
+  active?: boolean;
+}) {
+  switch (sourceAssetRoute(assetPath)) {
+    case 'model':
+      return (
+        <ModelAssetDocument
+          documentId={documentId}
+          assetPath={assetPath}
+          displayName={assetPath.split('/').pop() ?? assetPath}
+          active={active}
+        />
+      );
+    case 'image':
+      return <ImageViewer assetPath={assetPath} />;
+    case 'audio':
+      return <AudioViewer assetPath={assetPath} />;
+    case 'json':
+      // Content-routed: a native three.quarks document opens as the particle
+      // editor, any other JSON keeps the generic viewer.
+      return (
+        <JsonAssetDocument
+          documentId={documentId}
+          assetPath={assetPath}
+          displayName={assetPath.split('/').pop() ?? assetPath}
+          active={active}
+          sections={[]}
+          status={`json · ${assetPath}`}
+        />
+      );
+    case 'environment':
+      return (
+        <EnvironmentAssetDocument documentId={documentId} assetPath={assetPath} active={active} />
+      );
+    case 'lut':
+      return <LutAssetDocument documentId={documentId} assetPath={assetPath} active={active} />;
+    case 'shader':
+      return <ShaderAssetDocument documentId={documentId} assetPath={assetPath} active={active} />;
+    case 'module': {
+      // Content-routed, like the quarks JSON above: a project script that
+      // BUILDS an Object3D opens as the live modeling document; anything else
+      // keeps this viewer's text preview.
+      const projectRoot = getCurrentProject()?.rootPath;
+      const preview = (
+        <TextSourcePreview documentId={documentId} assetPath={assetPath} active={active} />
+      );
+      if (!projectRoot) return preview;
+      return (
+        <LiveModuleDocument
+          documentId={documentId}
+          projectRoot={projectRoot}
+          modulePath={(assetPath.split(/[?#]/, 1)[0] ?? assetPath).replace(/^\//, '')}
+          displayName={assetPath.split('/').pop() ?? assetPath}
+          active={active}
+          fallback={preview}
+        />
+      );
+    }
+    case 'text':
+      return <TextSourcePreview documentId={documentId} assetPath={assetPath} active={active} />;
+    case 'binary':
+      // Same subject rule as the text route above — the FILE. A document that
+      // publishes nothing is a document `editor.openAsset` can only time out
+      // against, and "no renderer" is not "no identity".
+      return (
+        <AssetEditorShell
+          documentId={documentId}
+          active={active}
+          type="binary source"
+          title={assetPath.split('/').pop() ?? assetPath}
+          sections={[]}
+          status={`binary · ${assetPath}`}
+        >
+          <div style={{ padding: 16, color: themeVars.content.muted, fontSize: 12 }}>
+            <div style={{ color: themeVars.content.primary, fontWeight: 600, marginBottom: 6 }}>
+              {assetPath.split('/').pop()}
+            </div>
+            This binary source is available in the project, but it has no safe in-editor renderer.
+            Its file remains selectable and referenceable without being misidentified as another
+            format.
+          </div>
+        </AssetEditorShell>
+      );
+  }
+}

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

@@ -0,0 +1,102 @@
+/**
+ * One sprite from a packed atlas — Aseprite's cel / Unity's Sprite /
+ * Godot's AtlasTexture. The sheet is the source texture; this paints the
+ * named frame onto the untrimmed canvas at nearest-neighbor.
+ */
+import { useEffect, useRef } from 'react';
+import { integerFitScale } from '../../asset-workflow/image-view-scale';
+import { type PixiSpritesheetFrame, packedFrameRect } from '../../asset-workflow/pixi-spritesheet';
+
+export function paintSpriteFrame(
+  canvas: HTMLCanvasElement,
+  image: CanvasImageSource,
+  frame: PixiSpritesheetFrame,
+): void {
+  const destWidth = Math.max(1, frame.sourceWidth ?? frame.width);
+  const destHeight = Math.max(1, frame.sourceHeight ?? frame.height);
+  canvas.width = destWidth;
+  canvas.height = destHeight;
+  const context = canvas.getContext('2d');
+  if (!context) return;
+  context.imageSmoothingEnabled = false;
+  context.clearRect(0, 0, destWidth, destHeight);
+  const packed = packedFrameRect(frame);
+  if (frame.rotated) {
+    context.save();
+    context.translate(frame.trimX, frame.trimY + packed.width);
+    context.rotate(-Math.PI / 2);
+    context.drawImage(
+      image,
+      packed.x,
+      packed.y,
+      packed.width,
+      packed.height,
+      0,
+      0,
+      packed.width,
+      packed.height,
+    );
+    context.restore();
+    return;
+  }
+  context.drawImage(
+    image,
+    packed.x,
+    packed.y,
+    packed.width,
+    packed.height,
+    frame.trimX,
+    frame.trimY,
+    packed.width,
+    packed.height,
+  );
+}
+
+export function SpritesheetSpriteView({
+  sheetUrl,
+  frame,
+  scale,
+  maxEdge,
+}: {
+  sheetUrl: string;
+  frame: PixiSpritesheetFrame;
+  scale?: number;
+  maxEdge?: number;
+}) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const destWidth = Math.max(1, frame.sourceWidth ?? frame.width);
+  const destHeight = Math.max(1, frame.sourceHeight ?? frame.height);
+  const resolved =
+    maxEdge != null ? integerFitScale(destWidth, destHeight, maxEdge, maxEdge) : (scale ?? 1);
+  const displayWidth = Math.max(1, Math.round(destWidth * resolved));
+  const displayHeight = Math.max(1, Math.round(destHeight * resolved));
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const image = new Image();
+    let cancelled = false;
+    image.onload = () => {
+      if (!cancelled) paintSpriteFrame(canvas, image, frame);
+    };
+    image.src = sheetUrl;
+    return () => {
+      cancelled = true;
+    };
+  }, [frame, sheetUrl]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      width={destWidth}
+      height={destHeight}
+      aria-hidden
+      style={{
+        width: displayWidth,
+        height: displayHeight,
+        imageRendering: 'pixelated',
+        display: 'block',
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,101 @@
+/**
+ * Video Asset Lab document: the clip itself, with the browser's own controls.
+ *
+ * Deliberately no custom transport, no autoplay and no muting — a reference
+ * clip is watched, and `<video controls>` is already the control surface every
+ * person on this machine knows. The bytes come from the session, which serves
+ * the project's own files.
+ */
+
+import { Text, text } from '@volter/editor-sdk/widgets';
+import { useCallback, useEffect, useState } from 'react';
+
+export function VideoViewer({ assetPath }: { assetPath: string }) {
+  const [failed, setFailed] = useState(false);
+  const [size, setSize] = useState<{ w: number; h: number } | null>(null);
+  const source = assetPath;
+  useEffect(() => {
+    setFailed(false);
+  }, [source]);
+  const name = assetPath.split('/').pop() ?? assetPath;
+  const measure = useCallback((element: HTMLVideoElement | null) => {
+    if (!element) return;
+    if (element.error) {
+      setFailed(true);
+      return;
+    }
+    if (element.videoWidth <= 0) return;
+    setSize((current) =>
+      current && current.w === element.videoWidth && current.h === element.videoHeight
+        ? current
+        : { w: element.videoWidth, h: element.videoHeight },
+    );
+  }, []);
+
+  return (
+    <div
+      data-testid="video-asset-document"
+      style={{
+        height: '100%',
+        minHeight: 240,
+        display: 'flex',
+        flexDirection: 'column',
+        minWidth: 0,
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '6px 8px' }}>
+        <Text tone="dim" variant="label">
+          {name}
+        </Text>
+        {size && (
+          <Text tone="muted" variant="code">
+            {size.w} × {size.h}
+          </Text>
+        )}
+      </div>
+      <div
+        className="vgai-asset-transparency-well"
+        style={{
+          flex: 1,
+          minHeight: 0,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 12,
+        }}
+      >
+        {failed ? (
+          <div style={{ color: text[2], fontSize: 12, textAlign: 'center' }}>
+            {name} could not be played from {source}. The file may be missing, or its codec may not
+            be one this browser decodes.
+          </div>
+        ) : (
+          <video
+            key={source}
+            src={source}
+            controls
+            playsInline
+            preload="metadata"
+            // MEASURED, not just listened for: a clip whose metadata is already
+            // decoded when React attaches (a cached file, a reopened document)
+            // fires `loadedmetadata` BEFORE the listener exists, and the header
+            // then reported no dimensions over a video the layout had already
+            // sized from real ones. The ref reads the element's own state on
+            // attach; the event covers everything that arrives later.
+            //
+            // `measure` is STABLE and its write is a no-change guard, both for
+            // the same reason: an inline ref is a new function every render, so
+            // React detaches and re-runs it every render, and a `setSize` that
+            // writes a fresh object each time is then an infinite update loop.
+            // Measured here — it took the editor's chrome down with
+            // "Maximum update depth exceeded".
+            ref={measure}
+            onError={() => setFailed(true)}
+            onLoadedMetadata={(event) => measure(event.currentTarget)}
+            style={{ maxWidth: '100%', maxHeight: '100%', display: 'block' }}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/asset-viewers/shader-source.ts

@@ -0,0 +1,144 @@
+/** Native GLSL document helpers. GLSL remains the artifact; these functions
+ * only describe it for Asset Lab and never serialize a VGAI shader shape. */
+
+export type ShaderStage = 'vertex' | 'fragment';
+
+export interface ShaderUniformDescriptor {
+  readonly name: string;
+  readonly type: string;
+  readonly arraySize?: number | undefined;
+  readonly stages: readonly ShaderStage[];
+}
+
+export interface ShaderDiagnostic {
+  readonly stage: ShaderStage | 'program';
+  readonly severity: 'error' | 'warning';
+  readonly message: string;
+  readonly line?: number | undefined;
+  readonly column?: number | undefined;
+}
+
+const VERTEX_SUFFIXES = ['.vert', '.vert.glsl'] as const;
+const FRAGMENT_SUFFIXES = ['.frag', '.frag.glsl'] as const;
+
+function cleanPath(path: string): string {
+  return path.split(/[?#]/, 1)[0]!.toLowerCase();
+}
+
+export function shaderStageFromPath(path: string, source = ''): ShaderStage {
+  const clean = cleanPath(path);
+  if (VERTEX_SUFFIXES.some((suffix) => clean.endsWith(suffix))) return 'vertex';
+  if (FRAGMENT_SUFFIXES.some((suffix) => clean.endsWith(suffix))) return 'fragment';
+  return /\bgl_Position\b/.test(source) ? 'vertex' : 'fragment';
+}
+
+/** Conventional sibling only. A standalone `.glsl` file stays standalone. */
+export function shaderCompanionPath(path: string): string | null {
+  const clean = path.split(/[?#]/, 1)[0]!;
+  if (/\.vert\.glsl$/i.test(clean)) return clean.replace(/\.vert\.glsl$/i, '.frag.glsl');
+  if (/\.frag\.glsl$/i.test(clean)) return clean.replace(/\.frag\.glsl$/i, '.vert.glsl');
+  if (/\.vert$/i.test(clean)) return clean.replace(/\.vert$/i, '.frag');
+  if (/\.frag$/i.test(clean)) return clean.replace(/\.frag$/i, '.vert');
+  return null;
+}
+
+function withoutComments(source: string): string {
+  // Preserve newlines so reflection never perturbs source-line diagnostics.
+  return source
+    .replace(/\/\*[\s\S]*?\*\//g, (comment) => comment.replace(/[^\n]/g, ' '))
+    .replace(/\/\/[^\n]*/g, '');
+}
+
+function declarations(source: string, stage: ShaderStage): ShaderUniformDescriptor[] {
+  const result: ShaderUniformDescriptor[] = [];
+  const pattern =
+    /\buniform\s+(?:(?:lowp|mediump|highp)\s+)?([A-Za-z_]\w*)\s+([A-Za-z_]\w*)\s*(?:\[\s*(\d+)\s*\])?\s*;/g;
+  for (const match of withoutComments(source).matchAll(pattern)) {
+    const type = match[1];
+    const name = match[2];
+    if (!type || !name) continue;
+    const arraySize = match[3] ? Number.parseInt(match[3], 10) : undefined;
+    result.push({ name, type, ...(arraySize ? { arraySize } : {}), stages: [stage] });
+  }
+  return result;
+}
+
+export function reflectShaderUniforms(
+  vertexSource: string,
+  fragmentSource: string,
+): ShaderUniformDescriptor[] {
+  const reflected = new Map<string, ShaderUniformDescriptor>();
+  for (const uniform of [
+    ...declarations(vertexSource, 'vertex'),
+    ...declarations(fragmentSource, 'fragment'),
+  ]) {
+    const current = reflected.get(uniform.name);
+    if (!current) {
+      reflected.set(uniform.name, uniform);
+      continue;
+    }
+    reflected.set(uniform.name, {
+      ...current,
+      stages: [...new Set([...current.stages, ...uniform.stages])],
+    });
+  }
+  return [...reflected.values()];
+}
+
+export function parseShaderDiagnostics(
+  log: string,
+  stage: ShaderDiagnostic['stage'],
+): ShaderDiagnostic[] {
+  const diagnostics = log
+    .split('\n')
+    .map((line) => parseDiagnosticLine(line.trim(), stage))
+    .filter((diagnostic): diagnostic is ShaderDiagnostic => diagnostic !== null);
+  if (diagnostics.length === 0 && log.trim()) {
+    diagnostics.push({ stage, severity: 'error', message: log.trim() });
+  }
+  return diagnostics;
+}
+
+function parseDiagnosticLine(
+  text: string,
+  stage: ShaderDiagnostic['stage'],
+): ShaderDiagnostic | null {
+  if (!text) return null;
+  const colon = text.match(/^(ERROR|WARNING):\s*\d+:(\d+)(?::|\((\d+)\):)\s*(.*)$/i);
+  if (colon) {
+    return {
+      stage,
+      severity: colon[1]!.toLowerCase() === 'warning' ? 'warning' : 'error',
+      line: Number.parseInt(colon[2]!, 10),
+      ...(colon[3] ? { column: Number.parseInt(colon[3], 10) } : {}),
+      message: colon[4] || text,
+    };
+  }
+  const paren = text.match(/^\d+:(\d+)\((\d+)\):\s*(?:(error|warning)\s*:?)?\s*(.*)$/i);
+  if (!paren) return null;
+  return {
+    stage,
+    severity: paren[3]?.toLowerCase() === 'warning' ? 'warning' : 'error',
+    line: Number.parseInt(paren[1]!, 10),
+    column: Number.parseInt(paren[2]!, 10),
+    message: paren[4] || text,
+  };
+}
+
+/** Reset driver-reported lines after Three's injected ShaderMaterial prefix. */
+export function previewShaderSource(source: string): string {
+  return `#line 1\n${source}`;
+}
+
+export const FALLBACK_VERTEX_SHADER = `varying vec2 vUv;
+
+void main() {
+  vUv = uv;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}`;
+
+export const FALLBACK_FRAGMENT_SHADER = `varying vec2 vUv;
+
+void main() {
+  gl_FragColor = vec4(vUv, 0.55, 1.0);
+}`;