@vgai/editor 0.4.0 → 0.4.1

package/src/components/asset-editor-persistence.ts

@@ -1,8 +1,166 @@
+import {
+  type AssetImportPlan,
+  assetImportPlanSchema,
+  importRecipePath,
+} from '../asset-workflow/import-contract';
+import {
+  type AppliedAssetImportHistory,
+  captureProjectAssetHistory,
+  type DownloadOnlineAssetResult,
+  downloadOnlineAsset,
+  reimportProjectAsset,
+  restoreProjectAssetHistory,
+} from '../editor-api';
+import { editorConsole } from '../editor-console';
+import type { HistoryService } from '../history/history-service';
 import { getProjectFileHistory } from '../history/project-file-history';
-import type { ResourceKind } from '../history/types';
+import { sha256Hex } from '../history/snapshot-store';
+import type { ResourceDriver, ResourceKind } from '../history/types';
 import { getStorageBackend } from '../storage';
 import { workspaceHistoryService } from './workspace-history';
 
+interface ImportedAssetHistoryResource {
+  driver: ResourceDriver;
+  revision: number;
+}
+
+const importedAssetHistoryResources = new WeakMap<
+  HistoryService,
+  Map<string, ImportedAssetHistoryResource>
+>();
+
+function notifyAssetChanged(assetPath: string): void {
+  if (typeof window === 'undefined') return;
+  window.dispatchEvent(
+    new CustomEvent('editor:assets-changed', {
+      detail: { paths: [projectAssetPath(assetPath)] },
+    }),
+  );
+  window.dispatchEvent(
+    new CustomEvent('editor:asset-mutation', {
+      detail: { type: 'change', paths: [projectAssetPath(assetPath)] },
+    }),
+  );
+}
+
+function importedAssetHistoryResource(
+  history: HistoryService,
+  assetPath: string,
+): ImportedAssetHistoryResource {
+  const normalized = projectAssetPath(assetPath);
+  let resources = importedAssetHistoryResources.get(history);
+  if (!resources) {
+    resources = new Map();
+    importedAssetHistoryResources.set(history, resources);
+  }
+  const existing = resources.get(normalized);
+  if (existing) return existing;
+  const descriptor = history.registry.registerProject(
+    'project-file',
+    `.vgai/history/imported-assets/${normalized}`,
+    normalized.split('/').pop(),
+  );
+  const resource: ImportedAssetHistoryResource = {
+    revision: 0,
+    driver: undefined as unknown as ResourceDriver,
+  };
+  const capture = async () => {
+    const token = await captureProjectAssetHistory(normalized);
+    const bytes = new TextEncoder().encode(token);
+    return {
+      revision: resource.revision,
+      contentType: 'application/vnd.vgai.asset-history-token',
+      bytes,
+      sha256: await sha256Hex(bytes),
+    };
+  };
+  resource.driver = {
+    descriptor,
+    capture,
+    preflight: async (expected) => {
+      const current = await capture();
+      return current.sha256 === expected.sha256
+        ? { ok: true }
+        : {
+            ok: false,
+            reason: 'content-conflict',
+            actualRevision: resource.revision,
+            actualSha256: current.sha256,
+          };
+    },
+    restore: async (snapshot) => {
+      const token = new TextDecoder().decode(history.snapshots.read(snapshot).bytes);
+      await restoreProjectAssetHistory(normalized, token);
+      resource.revision++;
+      notifyAssetChanged(normalized);
+    },
+    estimateBytes: (snapshot) => snapshot.byteLength,
+  };
+  history.registerDriver(resource.driver);
+  resources.set(normalized, resource);
+  return resource;
+}
+
+function historyTokenBytes(token: string): Uint8Array {
+  return new TextEncoder().encode(token);
+}
+
+/** Journal already-committed server acquisitions as one exact project transaction. */
+export async function recordAppliedAssetImportsWithHistory(
+  imports: readonly AppliedAssetImportHistory[],
+  label: string,
+): Promise<void> {
+  if (imports.length === 0) return;
+  const history = workspaceHistoryService();
+  if (!history) return;
+  const resources = imports.map((entry) => ({
+    entry,
+    resource: importedAssetHistoryResource(history, entry.assetPath),
+  }));
+  try {
+    await history.recordAppliedTransaction(
+      {
+        label,
+        detail: imports.map((entry) => projectAssetPath(entry.assetPath)).join(', '),
+        resources: resources.map(({ resource }) => resource.driver.descriptor.key),
+        scope: 'project',
+      },
+      resources.map(({ entry, resource }) => ({
+        resource: resource.driver.descriptor.key,
+        beforeBytes: historyTokenBytes(entry.beforeToken),
+        afterBytes: historyTokenBytes(entry.afterToken),
+        contentType: 'application/vnd.vgai.asset-history-token',
+      })),
+    );
+  } catch (error) {
+    const compensation = await Promise.allSettled(
+      imports.map((entry) => restoreProjectAssetHistory(entry.assetPath, entry.beforeToken)),
+    );
+    for (const entry of imports) notifyAssetChanged(entry.assetPath);
+    const compensationFailure = compensation.find((result) => result.status === 'rejected');
+    if (compensationFailure?.status === 'rejected') {
+      throw new Error(
+        `Project history could not record undo/redo and rollback failed: ${compensationFailure.reason instanceof Error ? compensationFailure.reason.message : String(compensationFailure.reason)}`,
+      );
+    }
+    throw new Error(
+      `Assets were rolled back because project history could not record undo/redo: ${error instanceof Error ? error.message : String(error)}`,
+    );
+  }
+}
+
+/** Acquire one catalog asset and add the committed mutation to project history. */
+export async function downloadOnlineAssetWithHistory(
+  params: Parameters<typeof downloadOnlineAsset>[0],
+  label = `Import ${params.name}`,
+): Promise<DownloadOnlineAssetResult> {
+  const result = await downloadOnlineAsset(params);
+  if (result.ok && result.history) {
+    await recordAppliedAssetImportsWithHistory([result.history], label);
+  }
+  return result;
+}
+
 /** Convert an asset's public serving URL into the StorageBackend path. */
 export function projectAssetPath(assetPath: string): string {
   const path = assetPath.split(/[?#]/, 1)[0]!.replace(/^\/+/, '');
@@ -10,6 +168,122 @@ export function projectAssetPath(assetPath: string): string {
   return path;
 }
 
+/** Load and validate the durable recipe adjacent to an imported project asset. */
+export async function readProjectAssetImportPlan(assetPath: string): Promise<AssetImportPlan> {
+  const recipe = await getStorageBackend().read(importRecipePath(projectAssetPath(assetPath)));
+  return assetImportPlanSchema.parse(JSON.parse(recipe));
+}
+
+/** Reacquire and atomically rebuild a project asset from its durable recipe. */
+export async function reimportStoredProjectAsset(assetPath: string): Promise<{
+  path?: string;
+  provenanceOperationId?: string;
+}> {
+  const plan = await readProjectAssetImportPlan(assetPath);
+  return reimportProjectAssetWithHistory(assetPath, plan);
+}
+
+/** Reimport multiple recipe-backed assets as one compensating history transaction. */
+export async function reimportStoredProjectAssets(assetPaths: readonly string[]): Promise<void> {
+  const paths = [...new Set(assetPaths.map(projectAssetPath))];
+  if (paths.length === 0) return;
+  const plans = await Promise.all(paths.map(readProjectAssetImportPlan));
+  const beforeTokens = await Promise.all(paths.map(captureProjectAssetHistory));
+  try {
+    for (let index = 0; index < paths.length; index++) {
+      const result = await reimportProjectAsset(paths[index]!, plans[index]!);
+      if (!result.ok) throw new Error(result.error ?? `Reimport failed for ${paths[index]}.`);
+    }
+    const afterTokens = await Promise.all(paths.map(captureProjectAssetHistory));
+    await recordAppliedAssetImportsWithHistory(
+      paths.map((assetPath, index) => ({
+        assetPath,
+        beforeToken: beforeTokens[index]!,
+        afterToken: afterTokens[index]!,
+      })),
+      `Reimport ${paths.length} assets`,
+    );
+  } catch (error) {
+    await Promise.allSettled(
+      paths.map((assetPath, index) => restoreProjectAssetHistory(assetPath, beforeTokens[index]!)),
+    );
+    throw error;
+  }
+  for (const path of paths) notifyAssetChanged(path);
+}
+
+/** Reimport a validated draft and journal the already-applied server mutation. */
+export async function reimportProjectAssetWithHistory(
+  assetPath: string,
+  plan: AssetImportPlan,
+): Promise<{ path?: string; provenanceOperationId?: string }> {
+  const normalized = projectAssetPath(assetPath);
+  const history = workspaceHistoryService();
+  const resource = history ? importedAssetHistoryResource(history, normalized) : null;
+  const before = resource ? await resource.driver.capture() : null;
+  const result = await reimportProjectAsset(normalized, plan);
+  if (!result.ok) throw new Error(result.error ?? 'Reimport was rejected.');
+  if (history && resource && before) {
+    const after = await resource.driver.capture();
+    try {
+      await history.recordAppliedTransaction(
+        {
+          label: `Reimport ${plan.identity.displayName ?? plan.identity.familyId}`,
+          detail: normalized,
+          resources: [resource.driver.descriptor.key],
+          scope: 'project',
+        },
+        [
+          {
+            resource: resource.driver.descriptor.key,
+            beforeBytes: before.bytes,
+            afterBytes: after.bytes,
+            contentType: after.contentType,
+          },
+        ],
+      );
+    } catch (error) {
+      throw new Error(
+        `Reimport committed, but project history could not record undo/redo: ${error instanceof Error ? error.message : String(error)}`,
+      );
+    }
+  }
+  notifyAssetChanged(normalized);
+  return {
+    ...(result.path ? { path: result.path } : {}),
+    ...(result.provenanceOperationId
+      ? { provenanceOperationId: result.provenanceOperationId }
+      : {}),
+  };
+}
+
+/** Install the shared command/event bridge used by Project Assets and the Inspector. */
+export function connectProjectAssetReimportEvents(): () => void {
+  if (typeof window === 'undefined') return () => {};
+  const onReimport = (event: Event) => {
+    const detail = (event as CustomEvent<{ path?: string; plan?: unknown }>).detail;
+    if (!detail?.path) return;
+    const path = detail.path;
+    void (async () => {
+      try {
+        if (detail.plan) {
+          await reimportProjectAssetWithHistory(path, assetImportPlanSchema.parse(detail.plan));
+        } else {
+          await reimportStoredProjectAsset(path);
+        }
+        editorConsole.log(`Reimported ${projectAssetPath(path)}.`, 'assets');
+      } catch (error) {
+        editorConsole.error(
+          `Could not reimport ${projectAssetPath(path)}: ${error instanceof Error ? error.message : String(error)}`,
+          'assets',
+        );
+      }
+    })();
+  };
+  window.addEventListener('editor:reimport-project-asset', onReimport);
+  return () => window.removeEventListener('editor:reimport-project-asset', onReimport);
+}
+
 /** Persist one authored asset through the project-wide undo history. */
 export async function writeProjectAsset(
   assetPath: string,
@@ -36,9 +310,30 @@ export async function writeProjectAsset(
 /** Refresh an open editor after undo/redo or another surface writes its file. */
 export function subscribeProjectAsset(assetPath: string, listener: () => void): () => void {
   const history = workspaceHistoryService();
-  if (!history) return () => {};
   const path = projectAssetPath(assetPath);
-  return getProjectFileHistory(history).subscribeAll((changedPath) => {
-    if (changedPath === path) listener();
-  });
+  let queued = false;
+  const notify = () => {
+    if (queued) return;
+    queued = true;
+    queueMicrotask(() => {
+      queued = false;
+      listener();
+    });
+  };
+  const unsubscribeHistory = history
+    ? getProjectFileHistory(history).subscribeAll((changedPath) => {
+        if (changedPath === path) notify();
+      })
+    : () => {};
+  const onAssetChanged = (event: Event) => {
+    const paths = (event as CustomEvent<{ paths?: readonly string[] }>).detail?.paths;
+    if (!paths || paths.some((candidate) => projectAssetPath(candidate) === path)) notify();
+  };
+  if (typeof window !== 'undefined')
+    window.addEventListener('editor:assets-changed', onAssetChanged);
+  return () => {
+    unsubscribeHistory();
+    if (typeof window !== 'undefined')
+      window.removeEventListener('editor:assets-changed', onAssetChanged);
+  };
 }

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

@@ -25,9 +25,10 @@ import { useEffect, useState } from 'react';
 import { getSelectedAsset, type SelectedAsset, setSelectedAsset } 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 { Button, bg, border, danger, radius, text } from '../design-system';
 import { registerInspectorSections } from '../inspector-section-registry';
 import { getModelThumbnailRenderer } from '../model-thumbnail';
+import { reimportStoredProjectAsset } from './asset-editor-persistence';
 import { validateInputMapForViewer } from './asset-viewers/InputMapViewer';
 import { OnlineAssetDetail } from './asset-viewers/OnlineAssetDetail';
 
@@ -226,6 +227,12 @@ function MaterialSummary({ asset }: { asset: SelectedAsset }) {
  *  (the registration's `match` gates on the same store read). */
 export function AssetSelectionSection() {
   const asset = getSelectedAsset();
+  const [reimportStatus, setReimportStatus] = useState<'idle' | 'running' | 'done'>('idle');
+  const [reimportError, setReimportError] = useState<string | null>(null);
+  useEffect(() => {
+    setReimportStatus('idle');
+    setReimportError(null);
+  }, [asset?.path]);
   if (!asset) return null;
   const ext = asset.name.includes('.') ? (asset.name.split('.').pop() ?? '') : '';
   if (asset.online) {
@@ -244,6 +251,7 @@ export function AssetSelectionSection() {
         <OnlineAssetDetail
           online={online}
           mode="inspector"
+          showPreview
           onResolved={(localPath) => setSelectedAsset({ ...asset, path: localPath })}
         />
         <div style={{ padding: '0 8px 8px' }}>
@@ -286,7 +294,15 @@ export function AssetSelectionSection() {
       )}
       <MetaRow label="Path" value={asset.path} />
       {asset.selectionCount && asset.selectionCount > 1 && (
-        <MetaRow label="Selection" value={`${asset.selectionCount} assets`} />
+        <>
+          <MetaRow label="Selection" value={`${asset.selectionCount} assets`} />
+          {asset.selectionTotalBytes !== undefined && (
+            <MetaRow label="Total size" value={formatSize(asset.selectionTotalBytes)} />
+          )}
+          {asset.selectionFormats && (
+            <MetaRow label="Formats" value={asset.selectionFormats.join(', ')} />
+          )}
+        </>
       )}
       {ext && <MetaRow label="Format" value={ext.toUpperCase()} />}
       {asset.sizeBytes !== undefined && (
@@ -342,17 +358,75 @@ export function AssetSelectionSection() {
         <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 } }),
-            )
+          disabled={
+            asset.selectionCount && asset.selectionCount > 1
+              ? !asset.selectionReimportableCount
+              : !asset.sourcePath || reimportStatus === 'running'
           }
+          title={asset.sourcePath ? 'Run the saved import recipe again' : 'No import recipe'}
+          onClick={async () => {
+            if (asset.selectionCount && asset.selectionCount > 1) {
+              window.dispatchEvent(
+                new CustomEvent('editor:project-asset-command', {
+                  detail: { id: PROJECT_ASSET_COMMANDS.reimport.id },
+                }),
+              );
+              return;
+            }
+            setReimportStatus('running');
+            setReimportError(null);
+            try {
+              await reimportStoredProjectAsset(asset.path);
+              setReimportStatus('done');
+            } catch (cause) {
+              setReimportStatus('idle');
+              setReimportError(cause instanceof Error ? cause.message : String(cause));
+            }
+          }}
         >
-          Reimport
+          {reimportStatus === 'running'
+            ? 'Reimporting…'
+            : asset.selectionCount && asset.selectionCount > 1
+              ? `Reimport ${asset.selectionReimportableCount ?? 0}`
+              : 'Reimport'}
         </Button>
+        {asset.selectionCount && asset.selectionCount > 1 && (
+          <>
+            <Button
+              type="button"
+              data-command-id={PROJECT_ASSET_COMMANDS.move.id}
+              onClick={() =>
+                window.dispatchEvent(
+                  new CustomEvent('editor:project-asset-command', {
+                    detail: { id: PROJECT_ASSET_COMMANDS.move.id },
+                  }),
+                )
+              }
+            >
+              Move selected
+            </Button>
+            <Button
+              type="button"
+              data-command-id={PROJECT_ASSET_COMMANDS.delete.id}
+              onClick={() =>
+                window.dispatchEvent(
+                  new CustomEvent('editor:project-asset-command', {
+                    detail: { id: PROJECT_ASSET_COMMANDS.delete.id },
+                  }),
+                )
+              }
+            >
+              Delete selected
+            </Button>
+          </>
+        )}
       </div>
+      {reimportStatus === 'done' && <div role="status">Reimport committed.</div>}
+      {reimportError && (
+        <div role="alert" style={{ color: danger, fontSize: 11 }}>
+          {reimportError}
+        </div>
+      )}
       <div style={{ fontSize: 10, color: text[3] }}>
         Double-click (or press Enter) in the asset browser to open the full viewer.
       </div>

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

@@ -69,12 +69,10 @@ 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" />
+          <rect x="3" y="3" width="18" height="18" rx="2" fill="var(--asset-icon-audio)" />
           <path
             d="M9 8l4-2v12l-4-2H7V10h2zm6 1v6m2-5v4"
-            stroke="#fff"
+            stroke="var(--vgai-text-1)"
             strokeWidth="1.5"
             fill="none"
             strokeLinecap="round"
@@ -116,8 +114,7 @@ export function AudioViewer({ assetPath }: { assetPath: string }) {
               style={{
                 width: `${(currentTime / duration) * 100}%`,
                 height: '100%',
-                // Same category-audio green as the icon above.
-                background: '#34d399',
+                background: 'var(--asset-icon-audio)',
                 borderRadius: themeVars.shape.small,
               }}
             />
@@ -137,7 +134,7 @@ export function AudioViewer({ assetPath }: { assetPath: string }) {
               style={{
                 flex: 1,
                 height: `${20 + ((index * 37) % 75)}%`,
-                background: '#34d399',
+                background: 'var(--asset-icon-audio)',
                 opacity: index / 48 <= currentTime / (duration || 1) ? 1 : 0.3,
               }}
             />