@volter/editor-game 0.5.68 → 0.5.70

package/src/build/BuildProfilesPanel.tsx

@@ -1,7 +1,7 @@
 /**
  * THE BUILD PROFILES PANEL — the configuration surface the `build-profiles`
  * document draws: the project's build-role configurations as a target list,
- * the name/resolution/app-id fields it writes back into `vgai.project.json`
+ * the name/resolution/app-id fields it writes back into `volter.project.json`
  * through the project's file history, the Build trigger, and the finished
  * build's report. The LOG is not here: it streams into the Build Output tab
  * (the native Output panel’s Build channel), which is the whole point of the split — a
@@ -49,7 +49,7 @@ interface ProjectConfig {
   appId: string;
 }
 
-const MANIFEST_PATH = 'vgai.project.json';
+const MANIFEST_PATH = 'volter.project.json';
 
 const DEFAULT_CONFIG: ProjectConfig = {
   name: 'My Game',
@@ -216,7 +216,7 @@ export function BuildProfilesPanel() {
         <div style={fieldRowStyle}>
           <label style={labelStyle}>Name</label>
           <TextInput
-            className="vgai-input"
+            className="volter-input"
             style={{ flex: 1 }}
             value={config.name}
             onChange={(e) => updateConfig({ name: e.target.value })}
@@ -228,7 +228,7 @@ export function BuildProfilesPanel() {
           <div style={{ display: 'flex', alignItems: 'center', gap: spaceVar[2], flex: 1 }}>
             <TextInput
               type="number"
-              className="vgai-input"
+              className="volter-input"
               style={{ width: 0, flex: 1 }}
               value={config.resolution.width}
               onChange={(e) => {
@@ -239,7 +239,7 @@ export function BuildProfilesPanel() {
             <span style={{ fontSize: fontSizeVar.sm, color: text[3] }}>&times;</span>
             <TextInput
               type="number"
-              className="vgai-input"
+              className="volter-input"
               style={{ width: 0, flex: 1 }}
               value={config.resolution.height}
               onChange={(e) => {
@@ -253,7 +253,7 @@ export function BuildProfilesPanel() {
         <div style={fieldRowStyle}>
           <label style={labelStyle}>App ID</label>
           <TextInput
-            className="vgai-input"
+            className="volter-input"
             style={{ flex: 1 }}
             value={config.appId}
             onChange={(e) => updateConfig({ appId: e.target.value })}
@@ -309,7 +309,7 @@ export function BuildProfilesPanel() {
                 <a
                   href={getDownloadUrl(artifact)}
                   download={artifact}
-                  className="vgai-btn"
+                  className="volter-btn"
                   data-variant="secondary"
                   data-size="default"
                   style={{
@@ -394,7 +394,7 @@ function BuildReportSummary({ report }: { report: BuildReport }) {
                   position: 'absolute',
                   inset: 0,
                   width: `${Math.max(2, (file.bytes / largest) * 100)}%`,
-                  background: 'color-mix(in srgb, var(--vgai-accent) 16%, transparent)',
+                  background: 'color-mix(in srgb, var(--volter-accent) 16%, transparent)',
                 }}
               />
               <div

package/src/canvas/canvas-board/CanvasBoardDocument.tsx

@@ -552,8 +552,8 @@ function CanvasBoardContent({ active }: WorkspaceDocumentContentProps) {
   return (
     <div
       data-testid="canvas-board"
-      data-vgai-backdrop-color={active ? REACT_DESIGN_CANVAS_COLOR : undefined}
-      data-vgai-backdrop-policy={active ? 'dark-frost' : undefined}
+      data-volter-backdrop-color={active ? REACT_DESIGN_CANVAS_COLOR : undefined}
+      data-volter-backdrop-policy={active ? 'dark-frost' : undefined}
       style={{
         position: 'absolute',
         inset: 0,

package/src/canvas/canvas-board/canvas-component-board.ts

@@ -51,6 +51,6 @@ export const canvasComponentBoard: ComponentBoard = {
     `This project has no ${CANVAS_COMPONENTS_TITLE} board (${CANVAS_COMPONENTS_DOCUMENT_ID}): ` +
     "board presence keys on STORIES, not on roots, and none of this project's stories declares " +
     'the "canvas" medium. Declare it — a manifest root entry naming the story\'s module, or a ' +
-    '`vgai.adapter.ts` regionInclude that covers it — and the board appears. `vgai console` ' +
+    '`volter.adapter.ts` regionInclude that covers it — and the board appears. `volter-game-editor console` ' +
     'names every story it could not place.',
 };

package/src/canvas/canvas-design-mount.ts

@@ -120,7 +120,7 @@ function createDesignGame(): GameInternal {
  * which part of the unbounded authored plane is visible. */
 function createDesignCanvas(): HTMLCanvasElement {
   const canvas = document.createElement('canvas');
-  canvas.dataset['vgaiCanvasSceneSurface'] = 'true';
+  canvas.dataset['volterCanvasSceneSurface'] = 'true';
   canvas.style.position = 'absolute';
   canvas.style.inset = '0';
   canvas.style.width = '100%';

package/src/coverage/live-project-verbs.ts

@@ -4,7 +4,7 @@
  *
  * It reads the session's own singletons plus two project files the browser
  * cannot read for itself, and hands the facts to the pure derivation. The
- * report goes out the doors coverage already uses — `vgai status`'s
+ * report goes out the doors coverage already uses — `volter-game-editor status`'s
  * `projectCoverage` facet, and the editor console via
  * `coverage/session-coverage.ts`, which unions this family with the other two
  * so one headline counts them all. No new transport, no new panel: the console
@@ -59,7 +59,7 @@ let _filesFor: string | null = null;
 
 /**
  * Drop the cached file facts so the next read re-asks the dev server. Called
- * on `vgai restart` (a restart is precisely "my project's files changed —
+ * on `volter-game-editor restart` (a restart is precisely "my project's files changed —
  * re-read them"; the probe-measured failure was the dependency detector
  * grading rows against a package.json edit two restarts old) and by tests.
  */
@@ -148,7 +148,7 @@ export function projectVerbFacts(): ProjectVerbFacts | null {
 
 /**
  * The `project.*` report for the open project, re-derived on every read — the
- * scripts a project declares change while it is open (`vgai add` writes them),
+ * scripts a project declares change while it is open (`volter-game-editor add` writes them),
  * so a cached answer would start lying.
  */
 export function projectVerbCoverage(): CapabilityCoverageReport | null {

package/src/coverage/native-system-coverage.ts

@@ -4,7 +4,7 @@
  *
  * It reads the session's own singletons and hands the facts to the pure
  * derivation. The report goes out the two doors coverage already uses —
- * `vgai status`'s `systemCoverage` facet, and the editor console via
+ * `volter-game-editor status`'s `systemCoverage` facet, and the editor console via
  * `coverage/session-coverage.ts`, which unions this family with the others so
  * one headline counts them all — so an unbound slot becomes a STANDING
  * condition rather than a one-off line. No new transport, no new panel, and no
@@ -129,8 +129,8 @@ export function nativeSystemCoverage(): CapabilityCoverageReport | null {
       // NetworkingAdapter for a single-player game, telling its author to
       // register one because "this project declares a `server` block" when it
       // declares nothing of the sort. A matchmaker is a listener; no port, no
-      // server. (`vgai edit`'s auto-boot had the identical bug — see
-      // `packages/vgai-cli/src/colyseus-autoboot.ts`'s `readDeclaredProcess`.)
+      // server. (`volter-game-editor edit`'s auto-boot had the identical bug — see
+      // `packages/volter-cli/src/colyseus-autoboot.ts`'s `readDeclaredProcess`.)
       declaresServer: (project.config.configurations ?? []).some(
         (c) => c.kind === 'process' && typeof (c as { port?: unknown }).port === 'number',
       ),

package/src/coverage/root-coverage.ts

@@ -23,13 +23,13 @@
  * Two doors, one derivation — the same shape `ingest/mount-coverage.ts` already
  * uses:
  *
- *  - `vgai status`, through {@link rootCoverageFacet}, so an agent reads the
+ *  - `volter-game-editor status`, through {@link rootCoverageFacet}, so an agent reads the
  *    same answer without opening the editor;
  *  - the editor console, through `coverage/session-coverage.ts`, which unions
  *    this family with the game- and project-scoped ones so the warning's
  *    headline counts every seam rather than this family's 21. The console
  *    ledger turns that into a standing unresolved condition, loud on every
- *    `vgai` command until it is closed.
+ *    `volter` command until it is closed.
  */
 
 import { measureAdapter } from '../host/adapter-reach';

package/src/coverage/session-coverage.ts

@@ -24,7 +24,7 @@
  *
  * It owns assembly and the console door. Every family still derives itself, in
  * its own file, from its own facts; nothing here decides a verdict. The
- * per-family facets on `vgai status` (`command-listener.ts`) stay separate for
+ * per-family facets on `volter-game-editor status` (`command-listener.ts`) stay separate for
  * the same reason they always were — a machine reader wants the rows keyed by
  * subject, and it is the HUMAN-facing sentence that has to be a union.
  */
@@ -90,7 +90,7 @@ export function sessionCoverageReport(
  *
  * Keyed on the rendered TEXT rather than a mount or project token, because the
  * union's inputs come and go inside one session (a root mounts, a design
- * session attaches, `vgai add` lands a script) and the honest rule is "say it
+ * session attaches, `volter-game-editor add` lands a script) and the honest rule is "say it
  * when the answer changes". A recurrence after a real change is a new condition
  * and gets said again; the server ledger sums repeats of an unchanged one.
  */

package/src/design-system-stories/InspectorNarrowBodies.stories.tsx

@@ -73,10 +73,10 @@ function RailColumn({ children }: { readonly children: ReactNode }) {
         width: RAIL_WIDTH,
         height: 600,
         display: 'flex',
-        border: '1px solid var(--vgai-border-2)',
+        border: '1px solid var(--volter-border-2)',
         borderRadius: 8,
         overflow: 'hidden',
-        background: 'var(--vgai-bg-1)',
+        background: 'var(--volter-bg-1)',
       }}
     >
       {children}

package/src/game-document/DevicePresetPicker.tsx

@@ -2,7 +2,7 @@
  * W2c (F13) — Game-tab device preset dropdown. Chrome-device-mode-style:
  * picking a preset constrains the game mount to that device's CSS resolution
  * + DPR (letterboxed/scaled by `GamePanel`), phone/tablet presets add the
- * safe-area overlay + `--vgai-safe-area-inset-*` CSS vars and auto-enable
+ * safe-area overlay + `--volter-safe-area-inset-*` CSS vars and auto-enable
  * pointer-as-touch. State lives in `../device-preview.ts`; this component is
  * pure UI over it.
  */
@@ -30,18 +30,18 @@ export function DevicePresetPicker({
   const isFit = active.kind === 'fit';
 
   return (
-    <div className="vgai-playbar-popover-anchor">
+    <div className="volter-playbar-popover-anchor">
       <Button
         ref={ref}
         variant="ghost"
         size="comfortable"
         aria-haspopup="menu"
         aria-expanded={open}
-        aria-controls={open ? 'vgai-device-preset-menu' : undefined}
+        aria-controls={open ? 'volter-device-preset-menu' : undefined}
         data-testid="device-preset-picker"
         onClick={() => setOpen((value) => !value)}
         title={
-          'Device preview — constrain the game to a device resolution + DPR. Phone/tablet presets show the safe area, set --vgai-safe-area-inset-top/right/bottom/left CSS vars on the game mount, and send mouse input as touch.'
+          'Device preview — constrain the game to a device resolution + DPR. Phone/tablet presets show the safe area, set --volter-safe-area-inset-top/right/bottom/left CSS vars on the game mount, and send mouse input as touch.'
         }
       >
         <EditorIcon icon={faMobileScreenButton} size="md" />
@@ -49,9 +49,9 @@ export function DevicePresetPicker({
       </Button>
       {open && (
         <AnchoredMenu
-          id="vgai-device-preset-menu"
+          id="volter-device-preset-menu"
           anchorRef={ref}
-          className="vgai-resolution-menu"
+          className="volter-resolution-menu"
           gap={4}
           onDismiss={() => setOpen(false)}
         >

package/src/game-document/GameCaptureFrameButton.tsx

@@ -27,7 +27,7 @@ export function GameCaptureFrameButton() {
       size="compact"
       variant="ghost"
       data-testid="game-capture-frame"
-      className="vgai-frame-capture-game-button"
+      className="volter-frame-capture-game-button"
       disabled={!available}
       title={
         available

package/src/game-document/GameDocument.tsx

@@ -60,7 +60,7 @@ function GameDebugMenu() {
         data-testid="game-debug-menu"
         aria-haspopup="menu"
         aria-expanded={open}
-        aria-controls={open ? 'vgai-game-debug-menu' : undefined}
+        aria-controls={open ? 'volter-game-debug-menu' : undefined}
         onClick={() => setOpen((value) => !value)}
       >
         <span>Debug</span>
@@ -68,7 +68,7 @@ function GameDebugMenu() {
       </Button>
       {open && (
         <AnchoredMenu
-          id="vgai-game-debug-menu"
+          id="volter-game-debug-menu"
           anchorRef={ref}
           gap={3}
           onDismiss={() => setOpen(false)}

package/src/game-document/GamePanel.tsx

@@ -74,7 +74,7 @@ import {
  * surfaces (stacked canvases + React DOM layers). */
 export function collectGameSurfaces(container: HTMLElement): Element[] {
   return Array.from(container.children).filter(
-    (node) => (node as HTMLElement).dataset?.['vgaiRootSurface'] === 'true',
+    (node) => (node as HTMLElement).dataset?.['volterRootSurface'] === 'true',
   );
 }
 
@@ -250,7 +250,7 @@ function InstanceViewport({ index }: { index: number }) {
       focused={mountedId != null && focused === mountedId}
       onFocus={mountedId ? () => setFocusedInstance(mountedId) : undefined}
     >
-      <div ref={ref} data-vgai-instance-viewport="" style={{ position: 'absolute', inset: 0 }} />
+      <div ref={ref} data-volter-instance-viewport="" style={{ position: 'absolute', inset: 0 }} />
     </InstanceSlot>
   );
 }
@@ -355,7 +355,7 @@ export function GamePanel({ style }: { style?: React.CSSProperties }) {
   // the same call — and switching resolution DURING play would silently drop
   // the running game's canvases with the removed element. Only nodes the game
   // HOST mounted are
-  // stashed (world surfaces carry `data-vgai-root-surface`): the fill/device branches are keyed below so
+  // stashed (world surfaces carry `data-volter-root-surface`): the fill/device branches are keyed below so
   // React really remounts, but if it ever aliases the container DOM node
   // again, a blind childNodes copy would capture React-owned children too —
   // that exact aliasing put the incoming inner div in the stash and made
@@ -412,7 +412,7 @@ export function GamePanel({ style }: { style?: React.CSSProperties }) {
   // which consults `deviceEmulatedPixelRatio()` once the session exists.)
   // What size this game is PRESENTED at. Two things can name one and the precedence lives in
   // `resolvePresentedSize`: a device preset the user picked wins, and otherwise the project's own
-  // declared `resolution` (`vgai.project.json`) puts the game on screen at its authored logical
+  // declared `resolution` (`volter.project.json`) puts the game on screen at its authored logical
   // size, uniformly scaled and letterboxed by the branch below — presentation scaling, never a
   // stretch mode. A project that declares neither fills the panel exactly as before.
   const declaredResolution = project?.config.resolution;
@@ -474,16 +474,16 @@ export function GamePanel({ style }: { style?: React.CSSProperties }) {
 
   // Safe-area contract: the game MOUNT container always carries the
   // inset CSS vars (0px unless the active preset declares insets), so game
-  // UI can style with `var(--vgai-safe-area-inset-top, 0px)` etc. Real
+  // UI can style with `var(--volter-safe-area-inset-top, 0px)` etc. Real
   // `env(safe-area-inset-*)` cannot be injected from a same-document host
   // (env() is UA-supplied for the top-level viewport only) — the vars + the
   // visual overlay below ARE the emulation.
   const safeArea = preset.safeArea;
   const safeAreaVars = {
-    '--vgai-safe-area-inset-top': `${safeArea?.top ?? 0}px`,
-    '--vgai-safe-area-inset-right': `${safeArea?.right ?? 0}px`,
-    '--vgai-safe-area-inset-bottom': `${safeArea?.bottom ?? 0}px`,
-    '--vgai-safe-area-inset-left': `${safeArea?.left ?? 0}px`,
+    '--volter-safe-area-inset-top': `${safeArea?.top ?? 0}px`,
+    '--volter-safe-area-inset-right': `${safeArea?.right ?? 0}px`,
+    '--volter-safe-area-inset-bottom': `${safeArea?.bottom ?? 0}px`,
+    '--volter-safe-area-inset-left': `${safeArea?.left ?? 0}px`,
   } as React.CSSProperties;
 
   return (

package/src/game-document/InstanceInspectorPicker.tsx

@@ -138,7 +138,7 @@ export function InstanceInspectorPicker() {
   const warning = (diagnostics?.loop.firedWhileHeld ?? 0) > 0;
 
   return (
-    <div className="vgai-playbar-popover-anchor">
+    <div className="volter-playbar-popover-anchor">
       <Button
         ref={ref}
         variant="ghost"

package/src/game-document/device-preview.ts

@@ -12,8 +12,8 @@
  *    sets CSS custom properties on the game mount container
  *    (`data-testid="game-runtime-container"`), the element game canvases and
  *    react-world DOM layers mount into:
- *      --vgai-safe-area-inset-top / -right / -bottom / -left   (CSS px)
- *    Game UI reads them with `var(--vgai-safe-area-inset-top, 0px)`.
+ *      --volter-safe-area-inset-top / -right / -bottom / -left   (CSS px)
+ *    Game UI reads them with `var(--volter-safe-area-inset-top, 0px)`.
  *    Recorded choice: real `env(safe-area-inset-*)` injection is NOT
  *    possible from a same-document host (env() values come from the UA for
  *    the top-level viewport only), so the overlay + CSS vars ARE the
@@ -41,7 +41,7 @@
  *    event before the clone.
  *
  * Persistence: preset + touch override are the PROJECT settings layer's
- * `devicePreview` (`settings-store.ts` → `.vgai/settings.json`, committed):
+ * `devicePreview` (`settings-store.ts` → `.volter/settings.json`, committed):
  * the frame a game is designed for is a fact about the project, shared by
  * everyone who opens it.
  */
@@ -331,5 +331,5 @@ function _stateForE2E() {
 }
 
 if (typeof window !== 'undefined') {
-  (window as unknown as Record<string, unknown>)['__vgaiDevicePreview'] = _stateForE2E;
+  (window as unknown as Record<string, unknown>)['__volterDevicePreview'] = _stateForE2E;
 }

package/src/game-document/physics-debug.ts

@@ -136,7 +136,7 @@ function _updateContactPoints(group: THREE.Group, contacts: Float32Array | null)
 }
 
 /**
- * e2e hook (mirrors the world root's stage's `__vgaiViewport`): mechanical state for
+ * e2e hook (mirrors the world root's stage's `__volterViewport`): mechanical state for
  * The question this answers — is the Rapier debug wireframe live in the
  * game scene with real geometry, and how many contact markers are drawn.
  */
@@ -167,7 +167,7 @@ function _stateForE2E(): {
   };
 }
 if (typeof window !== 'undefined') {
-  (window as unknown as Record<string, unknown>)['__vgaiPhysicsDebug'] = _stateForE2E;
+  (window as unknown as Record<string, unknown>)['__volterPhysicsDebug'] = _stateForE2E;
 }
 
 function _teardown(): void {

package/src/generation/GenerationActivity.tsx

@@ -70,13 +70,13 @@ function OutputPreview({
 
   if (src && output.kind === 'image') {
     const preview = (
-      <img className="vgai-generation-output-media" src={src} alt={output.name} loading="lazy" />
+      <img className="volter-generation-output-media" src={src} alt={output.name} loading="lazy" />
     );
     return onOpen ? (
       // The preview itself opens the asset — the gesture a gallery implies.
       <Button
         variant="ghost"
-        className="vgai-generation-output-open"
+        className="volter-generation-output-open"
         onClick={onOpen}
         aria-label={`Open ${output.name}`}
       >
@@ -91,7 +91,7 @@ function OutputPreview({
       // Deliberately no autoplay and no `muted` autoplay trick: a gallery that
       // starts sound is the failure this panel is replacing.
       <video
-        className="vgai-generation-output-media"
+        className="volter-generation-output-media"
         src={src}
         controls
         preload="metadata"
@@ -102,7 +102,7 @@ function OutputPreview({
   }
   if (src && output.kind === 'audio') {
     return (
-      <div className="vgai-generation-output-audio">
+      <div className="volter-generation-output-audio">
         <AudioAssetThumb url={src} name={output.name} />
         <audio src={src} controls preload="metadata" title={output.name} />
       </div>
@@ -112,7 +112,7 @@ function OutputPreview({
     return <ModelThumbnail url={output.url} />;
   }
   return (
-    <div className="vgai-generation-output-file">
+    <div className="volter-generation-output-file">
       <EditorIcon icon={output.kind === 'model' ? faFile : faFileLines} />
       <Text variant="caption" tone="muted">
         {output.name}
@@ -160,7 +160,7 @@ function StateMedia({ job, state }: { job: GenerationJob; state: GenerationCardS
   const pending = state === 'queued' || state === 'running' || state === 'saving';
   const failing = state === 'failed' || state === 'save-failed';
   return (
-    <div className="vgai-generation-state-media" data-state={state}>
+    <div className="volter-generation-state-media" data-state={state}>
       <StateSurface
         compact
         tone={STATE_TONE[state]}
@@ -172,7 +172,7 @@ function StateMedia({ job, state }: { job: GenerationJob; state: GenerationCardS
         // Determinate ONLY when the provider reported progress; otherwise the
         // native indeterminate bar, which claims nothing.
         <progress
-          className="vgai-generation-progress"
+          className="volter-generation-progress"
           aria-label={`${job.label} progress`}
           {...(state === 'running' && job.progress !== undefined
             ? { value: job.progress, max: 1 }
@@ -195,7 +195,7 @@ function CardActions({
   run: (action: () => Promise<void>) => void;
 }) {
   return (
-    <div className="vgai-generation-card-actions">
+    <div className="volter-generation-card-actions">
       {generationSaveRetryable(job, error) && (
         // There is NO add-to-project gate: the server accepts a finished
         // output on its own. This appears only once a save has actually
@@ -250,7 +250,7 @@ function GenerationCard({
 
   return (
     <article
-      className="vgai-generation-card"
+      className="volter-generation-card"
       data-state={state}
       aria-busy={generationJobIsActive(job)}
       aria-label={generationTitle(job)}
@@ -265,31 +265,31 @@ function GenerationCard({
         }
       }}
     >
-      <div className="vgai-generation-card-media" data-outputs={Math.min(outputs.length, 4)}>
+      <div className="volter-generation-card-media" data-outputs={Math.min(outputs.length, 4)}>
         {outputs.length === 0 ? (
           <StateMedia job={job} state={state} />
         ) : (
           outputs.map((output) => (
-            <div className="vgai-generation-output" key={output.path} title={output.path}>
+            <div className="volter-generation-output" key={output.path} title={output.path}>
               <OutputPreview output={output} onOpen={openOutput(output)} />
             </div>
           ))
         )}
       </div>
 
-      <div className="vgai-generation-card-body">
-        <div className="vgai-generation-card-heading">
+      <div className="volter-generation-card-body">
+        <div className="volter-generation-card-heading">
           <Text variant="label" truncate title={generationTitle(job)}>
             {generationTitle(job)}
           </Text>
-          <EditorBadge className="vgai-generation-chip" data-state={state}>
+          <EditorBadge className="volter-generation-chip" data-state={state}>
             {GENERATION_STATE_LABEL[state]}
             {state === 'running' && job.progress !== undefined
               ? ` · ${Math.round(job.progress * 100)}%`
               : ''}
           </EditorBadge>
           {unread && (
-            <EditorBadge className="vgai-generation-chip" data-state="new">
+            <EditorBadge className="volter-generation-chip" data-state="new">
               New
             </EditorBadge>
           )}
@@ -305,7 +305,7 @@ function GenerationCard({
         </Text>
 
         {prompt && (
-          <p className="vgai-generation-card-prompt" title={prompt}>
+          <p className="volter-generation-card-prompt" title={prompt}>
             {prompt}
           </p>
         )}
@@ -317,7 +317,7 @@ function GenerationCard({
           // text promises nothing and the retry button carries it instead.
           <EditorBanner
             tone={error || state === 'save-failed' ? 'error' : 'warning'}
-            className="vgai-generation-card-alert"
+            className="volter-generation-card-alert"
           >
             {error ??
               (state === 'save-failed'
@@ -363,8 +363,8 @@ export function GenerationActivity() {
   const storeError = generationJobsError();
 
   return (
-    <div className="vgai-generation-gallery">
-      <EditorToolbar label="Generations" compact className="vgai-generation-gallery-bar">
+    <div className="volter-generation-gallery">
+      <EditorToolbar label="Generations" compact className="volter-generation-gallery-bar">
         <Text variant="label">Generations</Text>
         <Text variant="caption" tone="muted">
           {jobs.length} {jobs.length === 1 ? 'generation' : 'generations'}
@@ -385,14 +385,14 @@ export function GenerationActivity() {
       </EditorToolbar>
 
       {storeError && (
-        <EditorBanner tone="error" className="vgai-generation-gallery-alert">
+        <EditorBanner tone="error" className="volter-generation-gallery-alert">
           {storeError}
         </EditorBanner>
       )}
 
       {jobs.length === 0 ? (
         <StateSurface
-          className="vgai-generation-gallery-empty"
+          className="volter-generation-gallery-empty"
           title="No generated assets yet"
           description="Preview generated images, video, audio and models here. Create an asset to get started."
           action={
@@ -402,7 +402,7 @@ export function GenerationActivity() {
           }
         />
       ) : (
-        <section className="vgai-generation-grid" aria-label="Generated assets">
+        <section className="volter-generation-grid" aria-label="Generated assets">
           {jobs.map((job) => (
             <GenerationCard
               key={job.id}