@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/AssetEditorShell.tsx

@@ -0,0 +1,141 @@
+import type { ReactNode } from 'react';
+import { useEffect, useState } from 'react';
+import { Button, border, TextInput, text } from '../design-system';
+import { getCurrentProject } from '../project-manager';
+
+export interface AssetEditorLayout {
+  structureCollapsed: boolean;
+  detailsCollapsed: boolean;
+  structureWidth: number;
+  detailsWidth: number;
+}
+
+const defaults: AssetEditorLayout = {
+  structureCollapsed: false,
+  detailsCollapsed: false,
+  structureWidth: 240,
+  detailsWidth: 300,
+};
+
+export function assetEditorLayoutKey(
+  type: string,
+  projectId = getCurrentProject()?.rootPath ?? '__unscoped__',
+): string {
+  return `vgai:asset-editor-layout:${projectId}:${type}`;
+}
+
+export function readAssetEditorLayout(type: string): AssetEditorLayout {
+  if (typeof localStorage === 'undefined') return defaults;
+  try {
+    return { ...defaults, ...JSON.parse(localStorage.getItem(assetEditorLayoutKey(type)) ?? '{}') };
+  } catch {
+    return defaults;
+  }
+}
+
+export function AssetEditorShell({
+  type,
+  title,
+  toolbar,
+  structure,
+  details,
+  status,
+  children,
+}: {
+  type: string;
+  title: string;
+  toolbar?: ReactNode;
+  structure?: ReactNode;
+  details?: ReactNode;
+  status?: ReactNode;
+  children: ReactNode;
+}) {
+  const [layout, setLayout] = useState(() => readAssetEditorLayout(type));
+  useEffect(() => {
+    localStorage.setItem(assetEditorLayoutKey(type), JSON.stringify(layout));
+  }, [layout, type]);
+  return (
+    <section
+      className="vgai-asset-editor"
+      data-testid={`asset-editor:${type}`}
+      data-structure-collapsed={layout.structureCollapsed}
+      data-details-collapsed={layout.detailsCollapsed}
+      style={
+        {
+          '--asset-editor-structure-width': `${layout.structureWidth}px`,
+          '--asset-editor-details-width': `${layout.detailsWidth}px`,
+        } as React.CSSProperties
+      }
+    >
+      <header className="vgai-asset-editor__toolbar">
+        <strong title={title}>{title}</strong>
+        <div className="vgai-asset-editor__commands">{toolbar}</div>
+        {structure && (
+          <Button
+            type="button"
+            aria-pressed={!layout.structureCollapsed}
+            onClick={() =>
+              setLayout((value) => ({ ...value, structureCollapsed: !value.structureCollapsed }))
+            }
+          >
+            Structure
+          </Button>
+        )}
+        {details && (
+          <Button
+            type="button"
+            aria-pressed={!layout.detailsCollapsed}
+            onClick={() =>
+              setLayout((value) => ({ ...value, detailsCollapsed: !value.detailsCollapsed }))
+            }
+          >
+            Details
+          </Button>
+        )}
+      </header>
+      {structure && (
+        <aside className="vgai-asset-editor__structure" aria-label="Asset structure">
+          {structure}
+          <label className="vgai-asset-editor__resize">
+            Structure width
+            <TextInput
+              aria-label="Asset structure pane width"
+              type="range"
+              min={180}
+              max={420}
+              value={layout.structureWidth}
+              onChange={(event) =>
+                setLayout((value) => ({ ...value, structureWidth: Number(event.target.value) }))
+              }
+            />
+          </label>
+        </aside>
+      )}
+      <main className="vgai-asset-editor__viewport">{children}</main>
+      {details && (
+        <aside className="vgai-asset-editor__details" aria-label="Asset details">
+          {details}
+          <label className="vgai-asset-editor__resize">
+            Details width
+            <TextInput
+              aria-label="Asset details pane width"
+              type="range"
+              min={220}
+              max={480}
+              value={layout.detailsWidth}
+              onChange={(event) =>
+                setLayout((value) => ({ ...value, detailsWidth: Number(event.target.value) }))
+              }
+            />
+          </label>
+        </aside>
+      )}
+      <footer
+        className="vgai-asset-editor__status"
+        style={{ borderColor: border[1], color: text[2] }}
+      >
+        {status}
+      </footer>
+    </section>
+  );
+}

package/src/components/AssetImportDetails.tsx

@@ -0,0 +1,218 @@
+import { useEffect, useMemo, useState } from 'react';
+import {
+  type AssetImportPlan,
+  assetImportPlanSchema,
+  importRecipePath,
+} from '../asset-workflow/import-contract';
+import { Button, danger, SectionHeader, Select, TextInput, text } from '../design-system';
+import { getStorageBackend } from '../storage';
+import { 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);
+  useEffect(() => {
+    let cancelled = false;
+    const path = importRecipePath(assetPath);
+    getStorageBackend()
+      .read(path)
+      .then(
+        (content) => {
+          if (cancelled) return;
+          const plan = assetImportPlanSchema.parse(JSON.parse(content));
+          setSaved(plan);
+          setDraft(plan);
+          setError(null);
+        },
+        () => {
+          if (!cancelled) {
+            setSaved(null);
+            setDraft(null);
+          }
+        },
+      );
+    return () => {
+      cancelled = true;
+    };
+  }, [assetPath]);
+  const changes = useMemo(() => {
+    if (!saved || !draft) return [];
+    return Object.entries(draft.settings)
+      .filter(
+        ([key, value]) =>
+          JSON.stringify(value) !==
+          JSON.stringify(saved.settings[key as keyof typeof saved.settings]),
+      )
+      .map(([key]) => key);
+  }, [draft, saved]);
+  if (!draft)
+    return (
+      <SectionHeader label="Import">
+        <div>No saved import recipe. Native project asset.</div>
+      </SectionHeader>
+    );
+  const setSetting = <K extends keyof AssetImportPlan['settings']>(
+    key: K,
+    value: AssetImportPlan['settings'][K],
+  ) =>
+    setDraft((current) =>
+      current ? { ...current, settings: { ...current.settings, [key]: value } } : current,
+    );
+  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>
+        <div style={{ color: changes.length ? text[1] : text[3] }}>
+          Dry-run impact:{' '}
+          {changes.length ? `rebuild output; changed ${changes.join(', ')}` : 'no output changes'}
+        </div>
+        <div style={{ display: 'flex', gap: 5 }}>
+          <Button type="button" disabled={!changes.length} onClick={() => setDraft(saved)}>
+            Reset
+          </Button>
+          <Button
+            type="button"
+            disabled={!changes.length}
+            onClick={async () => {
+              const ok = await writeProjectAsset(
+                importRecipePath(assetPath),
+                JSON.stringify(draft, null, 2),
+                { label: `Update import recipe ${assetPath}`, kind: 'project-file' },
+              );
+              if (ok) setSaved(draft);
+            }}
+          >
+            Save settings
+          </Button>
+          <Button
+            type="button"
+            onClick={() =>
+              window.dispatchEvent(
+                new CustomEvent('editor:reimport-project-asset', {
+                  detail: { path: assetPath, plan: draft },
+                }),
+              )
+            }
+          >
+            Reimport
+          </Button>
+        </div>
+        {error && <div style={{ color: danger }}>{error}</div>}
+      </SectionHeader>
+      <SectionHeader label="Provenance">
+        <dl>
+          <dt>Catalog identity</dt>
+          <dd>
+            {draft.identity.familyId} / {draft.identity.variantId} / {draft.identity.deliveryId}
+          </dd>
+          <dt>Author</dt>
+          <dd>{draft.attribution.author}</dd>
+          <dt>License</dt>
+          <dd>{draft.attribution.license}</dd>
+          <dt>Attribution</dt>
+          <dd>{draft.attribution.text}</dd>
+          <dt>Source</dt>
+          <dd>
+            <a href={draft.attribution.sourceUrl} target="_blank" rel="noreferrer">
+              {draft.attribution.sourceUrl}
+            </a>
+          </dd>
+          <dt>Original</dt>
+          <dd>{draft.sourceFiles.map((file) => file.path).join(', ')}</dd>
+          <dt>Source hash</dt>
+          <dd>{draft.sourceHash}</dd>
+          <dt>Generated</dt>
+          <dd>{draft.generatedFiles.join(', ') || draft.destination}</dd>
+        </dl>
+        <Button
+          type="button"
+          onClick={() => navigator.clipboard?.writeText(draft.attribution.text)}
+        >
+          Copy attribution
+        </Button>
+      </SectionHeader>
+    </>
+  );
+}

package/src/components/AssetLibraryPanel.tsx

@@ -0,0 +1,14 @@
+import { OnlineAssetBrowser } from './OnlineAssetBrowser';
+
+/**
+ * The external catalog is a permanent project navigator beside Assets.
+ * Opening an individual result still creates a center asset document; the
+ * catalog itself stays anchored so acquisition is always discoverable.
+ */
+export function AssetLibraryPanel() {
+  return (
+    <div className="vgai-asset-library-panel" data-testid="asset-library-panel">
+      <OnlineAssetBrowser />
+    </div>
+  );
+}

package/src/components/CameraInfo.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { EditorSurface, Inline, Text } from '../design-system';
 import { useEditorStats } from '../EditorContext';
 
 function fmt(n: number): string {
@@ -32,25 +33,15 @@ export function CameraInfo() {
   }, [stats]);
 
   return (
-    <div
-      style={{
-        position: 'absolute',
-        bottom: 6,
-        right: 10,
-        display: 'flex',
-        alignItems: 'center',
-        gap: 16,
-        fontSize: 11,
-        color: '#c5c8ce',
-        textShadow: '0 1px 3px rgba(0,0,0,0.8)',
-      }}
-    >
-      <span>
-        Pos {fmt(pos.x)} {fmt(pos.y)} {fmt(pos.z)}
-      </span>
-      <span>
-        Target {fmt(target.x)} {fmt(target.y)} {fmt(target.z)}
-      </span>
-    </div>
+    <EditorSurface variant="overlay" border className="vgai-camera-info">
+      <Inline gap={8} align="center">
+        <Text variant="code">
+          Pos {fmt(pos.x)} {fmt(pos.y)} {fmt(pos.z)}
+        </Text>
+        <Text variant="code">
+          Target {fmt(target.x)} {fmt(target.y)} {fmt(target.z)}
+        </Text>
+      </Inline>
+    </EditorSurface>
   );
 }