@volter/editor-threejs 0.5.212 → 0.5.213

package/package.json

@@ -2,7 +2,7 @@
   "name": "@volter/editor-threejs",
   "publisher": "volter",
   "author": "Volter AI, Inc.",
-  "version": "0.5.212",
+  "version": "0.5.213",
   "engines": {
     "vscode": "*"
   },
@@ -416,11 +416,11 @@
     }
   },
   "dependencies": {
-    "@volter/project": "0.5.212",
+    "@volter/project": "0.5.213",
     "@sparkjsdev/spark": "^2.1.0",
     "three.quarks": "^0.16.0",
     "typescript": "5.9.3",
-    "@volter/sdk": "0.5.212",
+    "@volter/sdk": "0.5.213",
     "postprocessing": "6.39.5",
     "quarks.core": "0.16.0",
     "@fortawesome/free-solid-svg-icons": "^7.2.0"

package/src/kit/components/Object3DDocumentViewport.tsx

@@ -9,7 +9,7 @@
 import { lazy, Suspense, useEffect } from 'react';
 import { announceDocumentStage } from '@volter/sdk/document-viewports';
 import type { Object3DDocumentViewportProps } from './StageHost';
-import { OBJECT3D_SURFACE_BUILDING, ViewportSurfaceStatus } from '../viewport-surface-status';
+import { Progress } from '@volter/sdk/progress';
 
 const LazyObject3DDocumentViewport = lazy(async () => {
   const module = await import('./StageHost');
@@ -26,9 +26,7 @@ export function Object3DDocumentViewport(props: Object3DDocumentViewportProps) {
   return (
     <Suspense
       fallback={
-        <ViewportSurfaceStatus testId="object3d-document-loading">
-          {OBJECT3D_SURFACE_BUILDING}
-        </ViewportSurfaceStatus>
+        props.chromeless ? null : <Progress documentId={props.documentId} title="Preparing the viewport" />
       }
     >
       <LazyObject3DDocumentViewport {...props} />

package/src/kit/components/StageHost.tsx

@@ -3,7 +3,7 @@ import { ShellStore } from '@volter/sdk/shell-store';
 import type { ToolObject3DAuthoringProps, ToolObject3DDocumentAuthoring, ToolObject3DPreviewSource } from '../../object3d-contributions';
 import { invalidateStages, stageGeneration } from '@volter/sdk/stage-invalidation';
 import type { StageTransportSnapshot } from '@volter/sdk/host';
-import { EditorIcon, editorIcons, IconButton, themeVars } from '@volter/sdk/widgets';
+import { EditorBanner, EditorIcon, editorIcons, IconButton, themeVars } from '@volter/sdk/widgets';
 import type { AuthoringAdapter } from '@volter/project/adapter';
 import { contentWorldBounds } from '@volter/editor-threejs/viewport/content-bounds';
 import { isInEditorOwnedSubtree } from '@volter/editor-threejs/viewport/editor-layers';
@@ -105,7 +105,7 @@ import {
   watchPaletteBackdrop,
 } from './standard-viewport-dressing';
 import { ViewportFurniture } from './ViewportFurniture';
-import { OBJECT3D_SURFACE_BUILDING, ViewportSurfaceStatus } from '../viewport-surface-status';
+import { Progress } from '@volter/sdk/progress';
 import { workspaceHistoryService } from '@volter/sdk/components/workspace-history';
 import {
   bindViewPresentation,
@@ -2346,34 +2346,10 @@ export function Object3DDocumentViewport({
         ) : null}
         {/* Show a dismissible error notice over any stage that remains available. */}
         {error && (
-          <div
-            role="alert"
-            style={{
-              position: 'absolute',
-              insetInline: 0,
-              top: 0,
-              display: 'flex',
-              justifyContent: 'center',
-              padding: 'var(--volter-space-3)',
-              pointerEvents: 'none',
-            }}
-          >
-            <div
-              className="volter-chrome-island"
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: 'var(--volter-space-3)',
-                maxWidth: '80%',
-                padding: 'var(--volter-space-2) var(--volter-space-3)',
-                borderRadius: 'var(--volter-radius-md)',
-                border: `var(--volter-stroke-resting) solid ${themeVars.semantic.danger}`,
-                background: themeVars.surface.raised,
-                color: themeVars.semantic.danger,
-                pointerEvents: 'auto',
-              }}
-            >
-              <span>{error}</span>
+          <EditorBanner
+            tone="error"
+            style={{ position: 'absolute', insetInline: 0, top: 0 }}
+            actions={
               <IconButton
                 size="compact"
                 aria-label="Dismiss"
@@ -2382,13 +2358,13 @@ export function Object3DDocumentViewport({
               >
                 <EditorIcon icon={editorIcons.action.close} />
               </IconButton>
-            </div>
-          </div>
+            }
+          >
+            {error}
+          </EditorBanner>
         )}
-        {!error && surfaceStatus === 'building' && (
-          <ViewportSurfaceStatus testId="object3d-document-status">
-            {OBJECT3D_SURFACE_BUILDING}
-          </ViewportSurfaceStatus>
+        {!error && !chromeless && surfaceStatus === 'building' && (
+          <Progress documentId={documentId} title="Preparing the viewport" />
         )}
         {/* Inset furniture by the canvas bleed so chrome stays inside the visible panel. */}
         <div

package/src/kit/components/asset-viewers/EntityModelDocument.tsx

@@ -1,5 +1,5 @@
 import { threeStateOf } from '../../three-state';
-import { themeVars } from '@volter/sdk/widgets';
+import { StateSurface } from '@volter/sdk/widgets';
 import { liveMixerFor } from '@volter/editor-threejs/animation/live-mixers';
 import { useCallback, useSyncExternalStore } from 'react';
 import type * as THREE from 'three';
@@ -94,9 +94,7 @@ export function EntityModelDocument({
 
   if (!source)
     return (
-      <div role="alert" style={{ padding: 20, color: themeVars.semantic.danger }}>
-        Scene entity {entityId} is no longer available.
-      </div>
+      <StateSurface tone="error" title={`Scene entity ${entityId} is no longer available`} />
     );
   return (
     <Object3DSnapshotDocument

package/src/kit/components/asset-viewers/EnvironmentAssetDocument.tsx

@@ -1,6 +1,7 @@
 import { editorHost } from '@volter/sdk/host';
 import { faCloudSun, faSliders } from '@fortawesome/free-solid-svg-icons';
-import { NumberInput, themeVars } from '@volter/sdk/widgets';
+import { NumberInput, StateSurface, themeVars } from '@volter/sdk/widgets';
+import { Progress } from '@volter/sdk/progress';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import * as THREE from 'three';
 import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
@@ -386,9 +387,7 @@ export function EnvironmentAssetDocument({
         title={title}
         status="HDR image unavailable"
       >
-        <div role="alert" style={{ padding: 20, color: themeVars.semantic.danger }}>
-          {loadError}
-        </div>
+        <StateSurface tone="error" title={`Could not load ${title}`} detail={loadError} />
       </AssetEditorShell>
     );
   }
@@ -400,9 +399,8 @@ export function EnvironmentAssetDocument({
         active={active}
         type="environment image"
         title={title}
-        status="Loading HDR image"
       >
-        <div style={{ padding: 20, color: themeVars.content.muted }}>Loading environment…</div>
+        <Progress documentId={documentId} title={`Loading ${title}`} />
       </AssetEditorShell>
     );
   }

package/src/kit/components/asset-viewers/LiveModuleDocument.tsx

@@ -11,7 +11,7 @@
  */
 
 import { beginLiveModuleRevision } from '@volter/sdk/project-module-url';
-import { themeVars } from '@volter/sdk/widgets';
+import { EditorBanner, themeVars } from '@volter/sdk/widgets';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import * as THREE from 'three';
 import { disposeProjectAssetModel } from '../../asset-preview';
@@ -281,37 +281,13 @@ export function LiveModuleDocument({
  *  and never a toast — the document itself has to say why it is stale. */
 function BuildFailureBanner({ failure }: { readonly failure: BuildFailure }) {
   return (
-    <div
-      role="alert"
+    <EditorBanner
+      tone="error"
       data-testid="live-module-error"
-      style={{
-        position: 'absolute',
-        top: 8,
-        left: 8,
-        right: 8,
-        zIndex: 2,
-        maxHeight: '60%',
-        overflow: 'auto',
-        padding: '8px 10px',
-        borderRadius: themeVars.shape.small,
-        background: themeVars.surface.raised,
-        border: `1px solid ${themeVars.semantic.danger}`,
-        color: themeVars.semantic.danger,
-        fontFamily: themeVars.typography.mono,
-        fontSize: 11,
-        lineHeight: 1.5,
-        whiteSpace: 'pre-wrap',
-        wordBreak: 'break-word',
-        pointerEvents: 'auto',
-      }}
+      style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 2 }}
+      detail={failure.stack ? `${failure.message}\n${failure.stack}` : failure.message}
     >
-      <div style={{ fontWeight: 600 }}>
-        This module did not build — showing the last good model.
-      </div>
-      <div style={{ marginTop: 4 }}>{failure.message}</div>
-      {failure.stack ? (
-        <div style={{ marginTop: 6, color: themeVars.content.muted }}>{failure.stack}</div>
-      ) : null}
-    </div>
+      This module did not build — showing the last good model.
+    </EditorBanner>
   );
 }

package/src/kit/components/asset-viewers/LutAssetDocument.tsx

@@ -1,6 +1,7 @@
 import { editorHost } from '@volter/sdk/host';
 import { faCircleHalfStroke, faSliders } from '@fortawesome/free-solid-svg-icons';
-import { Checkbox, NumberInput, themeVars } from '@volter/sdk/widgets';
+import { Checkbox, NumberInput, StateSurface, themeVars } from '@volter/sdk/widgets';
+import { Progress } from '@volter/sdk/progress';
 import { EffectComposer, EffectPass, LUT3DEffect, RenderPass } from 'postprocessing';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import * as THREE from 'three';
@@ -367,9 +368,7 @@ export function LutAssetDocument({
         title={basename(assetPath)}
         status="CUBE LUT unavailable"
       >
-        <div role="alert" style={{ padding: 20, color: themeVars.semantic.danger }}>
-          {loadError}
-        </div>
+        <StateSurface tone="error" title={`Could not load ${basename(assetPath)}`} detail={loadError} />
       </AssetEditorShell>
     );
   }
@@ -381,9 +380,8 @@ export function LutAssetDocument({
         active={active}
         type="color grade"
         title={basename(assetPath)}
-        status="Loading CUBE LUT"
       >
-        <div style={{ padding: 20, color: themeVars.content.muted }}>Loading color grade…</div>
+        <Progress documentId={documentId} title={`Loading ${basename(assetPath)}`} />
       </AssetEditorShell>
     );
   }

package/src/kit/components/asset-viewers/ModelAssetDocument.tsx

@@ -1,4 +1,5 @@
-import { themeVars } from '@volter/sdk/widgets';
+import { StateSurface } from '@volter/sdk/widgets';
+import { Progress } from '@volter/sdk/progress';
 import { useCallback, useEffect, useState } from 'react';
 import type * as THREE from 'three';
 import {
@@ -83,14 +84,9 @@ export function ModelAssetDocument({
   }, [assetPath, model]);
   if (error)
     return (
-      <div role="alert" style={{ padding: 20, color: themeVars.semantic.danger }}>
-        {error}
-      </div>
-    );
-  if (!model)
-    return (
-      <div style={{ padding: 20, color: themeVars.content.muted }}>Loading {displayName}…</div>
+      <StateSurface tone="error" title={`Could not load ${displayName}`} detail={error} />
     );
+  if (!model) return <Progress documentId={documentId} title={`Loading ${displayName}`} />;
   return (
     <Object3DDocumentViewport
       documentId={documentId}

package/src/kit/components/asset-viewers/Object3DPreview.tsx

@@ -1,5 +1,5 @@
 import type { ToolObject3DPreviewContext, ToolObject3DPreviewExtension } from '../../../object3d-contributions';
-import { themeVars } from '@volter/sdk/widgets';
+import { StateSurface, themeVars } from '@volter/sdk/widgets';
 import { useEffect, useRef, useState } from 'react';
 import * as THREE from 'three';
 import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
@@ -294,24 +294,8 @@ export function Object3DPreview({
         background: themeVars.surface.inset,
       }}
     >
-      {loading && !error ? (
-        <span style={{ position: 'absolute', padding: 10, color: themeVars.content.muted }}>
-          Loading…
-        </span>
-      ) : null}
-      {!active ? (
-        <span style={{ position: 'absolute', padding: 10, color: themeVars.content.muted }}>
-          Preview suspended while inactive.
-        </span>
-      ) : null}
-      {error ? (
-        <div
-          role="alert"
-          style={{ position: 'absolute', padding: 10, color: themeVars.semantic.danger }}
-        >
-          {error}
-        </div>
-      ) : null}
+      {!active ? <StateSurface fill compact title="Preview suspended while inactive." /> : null}
+      {error ? <StateSurface fill compact tone="error" title={`${displayName} could not be previewed`} detail={error} /> : null}
     </div>
   );
 }

package/src/kit/components/asset-viewers/QuarksAssetDocument.tsx

@@ -1,5 +1,6 @@
 import type { ToolObject3DDocumentAuthoringFactory } from '../../../object3d-contributions';
-import { themeVars } from '@volter/sdk/widgets';
+import { StateSurface } from '@volter/sdk/widgets';
+import { Progress } from '@volter/sdk/progress';
 import type {
   AuthoringAdapter,
   InspectorProvider,
@@ -503,14 +504,9 @@ export function QuarksAssetDocument({
 
   if (error)
     return (
-      <div role="alert" style={{ padding: 20, color: themeVars.semantic.danger }}>
-        {error}
-      </div>
-    );
-  if (!artifact)
-    return (
-      <div style={{ padding: 20, color: themeVars.content.muted }}>Loading {displayName}…</div>
+      <StateSurface tone="error" title={`Could not load ${displayName}`} detail={error} />
     );
+  if (!artifact) return <Progress documentId={documentId} title={`Loading ${displayName}`} />;
   return (
     <Object3DDocumentViewport
       documentId={documentId}

package/src/kit/components/asset-viewers/ShaderAssetDocument.tsx

@@ -1,6 +1,7 @@
 import { editorHost } from '@volter/sdk/host';
 import { faCode, faSliders, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
-import { Checkbox, ColorInput, NumberInput, Select, themeVars } from '@volter/sdk/widgets';
+import { Checkbox, ColorInput, EditorBanner, NumberInput, Select, spaceVar, StateSurface, Text, themeVars } from '@volter/sdk/widgets';
+import { Progress } from '@volter/sdk/progress';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import * as THREE from 'three';
 import { readProjectTextFile } from '@volter/sdk/api/project-source';
@@ -449,6 +450,14 @@ function UniformControlRow({
   );
 }
 
+/** One diagnostic as a line: where (the file, its line and column) and what. */
+function diagnosticLine(diagnostic: ShaderDiagnostic, files: ShaderFiles): string {
+  const file = diagnostic.stage === 'program' ? null : files[diagnostic.stage];
+  const where = file?.available ? basename(file.path) : diagnostic.stage;
+  const at = diagnostic.line ? `:${diagnostic.line}${diagnostic.column ? `:${diagnostic.column}` : ''}` : '';
+  return `${where}${at} · ${diagnostic.message}`;
+}
+
 function DiagnosticList({
   diagnostics,
   files,
@@ -457,37 +466,21 @@ function DiagnosticList({
   files: ShaderFiles;
 }) {
   if (diagnostics.length === 0) {
-    return (
-      <div style={{ color: themeVars.semantic.success, fontSize: 11, padding: 4 }}>
-        Shader program compiled successfully.
-      </div>
-    );
+    return <StateSurface inline tone="success" title="Shader program compiled successfully." />;
   }
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, padding: 4 }}>
-      {diagnostics.map((diagnostic, index) => {
-        const file = diagnostic.stage === 'program' ? null : files[diagnostic.stage];
-        return (
-          <div
-            key={`${diagnostic.stage}:${diagnostic.line ?? 0}:${diagnostic.message}:${index}`}
-            style={{
-              color:
-                diagnostic.severity === 'warning'
-                  ? themeVars.semantic.warning
-                  : themeVars.semantic.danger,
-              fontSize: 10,
-              lineHeight: 1.45,
-            }}
-          >
-            {file?.available ? basename(file.path) : diagnostic.stage}
-            {diagnostic.line
-              ? `:${diagnostic.line}${diagnostic.column ? `:${diagnostic.column}` : ''}`
-              : ''}
-            {' · '}
-            {diagnostic.message}
-          </div>
-        );
-      })}
+    <div style={{ display: 'flex', flexDirection: 'column', gap: spaceVar[2] }}>
+      {diagnostics.map((diagnostic, index) => (
+        <Text
+          key={`${diagnostic.stage}:${diagnostic.line ?? 0}:${diagnostic.message}:${index}`}
+          as="div"
+          variant="code"
+          selectable
+          tone={diagnostic.severity === 'warning' ? 'warning' : 'danger'}
+        >
+          {diagnosticLine(diagnostic, files)}
+        </Text>
+      ))}
     </div>
   );
 }
@@ -589,17 +582,18 @@ export function ShaderAssetDocument({
         order: PROPERTIES_SECTION_ORDER,
         body: {
           kind: 'custom',
-          render: () => (
+          // (shown once the files are read: the document passes its sections only then)
+          render: () => files && (
             <div
               style={{ display: 'flex', flexDirection: 'column', gap: 5, padding: 4, fontSize: 10 }}
             >
               <span>
-                Vertex · {files ? basename(files.vertex.path) : 'Loading…'}
-                {files && !files.vertex.available ? ' (preview fallback)' : ''}
+                Vertex · {basename(files.vertex.path)}
+                {!files.vertex.available ? ' (preview fallback)' : ''}
               </span>
               <span>
-                Fragment · {files ? basename(files.fragment.path) : 'Loading…'}
-                {files && !files.fragment.available ? ' (preview fallback)' : ''}
+                Fragment · {basename(files.fragment.path)}
+                {!files.fragment.available ? ' (preview fallback)' : ''}
               </span>
               <span style={{ color: themeVars.content.muted }}>
                 Ordinary sibling GLSL files; runtime composition stays in TS/TSX.
@@ -658,9 +652,7 @@ export function ShaderAssetDocument({
         title={basename(assetPath)}
         status="Shader unavailable"
       >
-        <div role="alert" style={{ padding: 20, color: themeVars.semantic.danger }}>
-          {loadError}
-        </div>
+        <StateSurface tone="error" title={`Could not load ${basename(assetPath)}`} detail={loadError} />
       </AssetEditorShell>
     );
   }
@@ -671,9 +663,8 @@ export function ShaderAssetDocument({
         active={active}
         type="shader"
         title={basename(assetPath)}
-        status="Loading GLSL"
       >
-        <div style={{ padding: 20, color: themeVars.content.muted }}>Loading shader files…</div>
+        <Progress documentId={documentId} title={`Loading ${basename(assetPath)}`} />
       </AssetEditorShell>
     );
   }
@@ -721,22 +712,13 @@ export function ShaderAssetDocument({
           </Select>
         </div>
         {diagnostics.length > 0 && (
-          <div
-            style={{
-              position: 'absolute',
-              left: 12,
-              right: 12,
-              bottom: 12,
-              maxHeight: 120,
-              overflow: 'auto',
-              padding: 8,
-              border: `1px solid ${themeVars.semantic.danger}`,
-              borderRadius: 6,
-              background: themeVars.surface.overlay,
-            }}
+          <EditorBanner
+            tone={diagnostics.some((diagnostic) => diagnostic.severity !== 'warning') ? 'error' : 'warning'}
+            style={{ position: 'absolute', left: 0, right: 0, bottom: 0 }}
+            detail={diagnostics.map((diagnostic) => diagnosticLine(diagnostic, files)).join('\n')}
           >
-            <DiagnosticList diagnostics={diagnostics} files={files} />
-          </div>
+            {`${diagnostics.length} issue${diagnostics.length === 1 ? '' : 's'}`}
+          </EditorBanner>
         )}
       </div>
     </AssetEditorShell>

package/src/kit/components/object3d-contribution-surfaces.tsx

@@ -1,4 +1,5 @@
 import { announceDocumentStage } from '@volter/sdk/document-viewports';
+import { Progress } from '@volter/sdk/progress';
 import { lazy, Suspense, useEffect } from 'react';
 import type { ToolObject3DAuthoringProps, ToolObject3DPreviewProps } from '../../object3d-contributions';
 
@@ -12,7 +13,8 @@ const Authoring = lazy(async () => ({ default: (await import('./StageHost')).Too
 
 export function Object3DPreviewSurface(props: ToolObject3DPreviewProps) {
   return (
-    <Suspense fallback={<div style={{ minHeight: 240 }}>Loading 3D preview…</div>}>
+    // (a preview card reports no wait: it is a card in a panel or a catalog, neither a document nor a view)
+    <Suspense fallback={null}>
       <Preview {...props} />
     </Suspense>
   );
@@ -26,7 +28,7 @@ export function Object3DAuthoringSurface(props: ToolObject3DAuthoringProps) {
   // `workspace.document` contributions do not, and which is which belongs to the PROJECT.
   useEffect(() => announceDocumentStage(props.documentId), [props.documentId]);
   return (
-    <Suspense fallback={<div style={{ minHeight: 240 }}>Loading 3D authoring surface…</div>}>
+    <Suspense fallback={<Progress documentId={props.documentId} title="Loading 3D authoring surface" />}>
       <Authoring {...props} />
     </Suspense>
   );

package/src/kit/editor-viewport.ts

@@ -477,6 +477,14 @@ const _gridQuat = new THREE.Quaternion();
 const _gridEye = new THREE.Vector3();
 const _gridUp = new THREE.Vector3(0, 1, 0);
 
+/**
+ * What the floor's overlays (its grid and its axes) are drawn with: a surface in their own plane, a level's ground at
+ * 0, shows them on it, as Blender's grid passes its depth test on a tie (`DRW_STATE_DEPTH_LESS_EQUAL`,
+ * overlay_grid.hh). three's depth test passes a tie too; the offset keeps it where the two surfaces' depths round
+ * apart, which would split it pixel by pixel.
+ */
+const ON_THE_FLOOR = { polygonOffset: true, polygonOffsetFactor: -1, polygonOffsetUnits: -1 } as const;
+
 /**
  * The floor grid as a shader over one plane (`extent` metres square, y = 0).
  * Lines are `fwidth`-antialiased so they keep one on-screen width at every
@@ -604,6 +612,7 @@ function createFloorGrid(extent: number): THREE.Mesh<THREE.PlaneGeometry, THREE.
     transparent: true,
     depthWrite: false,
     side: THREE.DoubleSide,
+    ...ON_THE_FLOOR,
   });
   const mesh = new THREE.Mesh(geometry, material);
   mesh.name = 'editor-floor-grid';
@@ -1000,6 +1009,7 @@ export class EditorViewport {
         opacity: 1,
         depthWrite: false,
         toneMapped: false,
+        ...ON_THE_FLOOR,
       }),
     );
     // Share the floor's grazing fade. LineMaterial interpolates the segment endpoints with

package/src/kit/viewport-surface-status.tsx

@@ -1,44 +0,0 @@
-/**
- * The 3D board's empty-viewport vocabulary, reused by every other design
- * surface that would otherwise sit blank while it builds. Scene's root-aware
- * loading/failure/empty states live in `SurfaceStateOverlay`; this compact
- * label remains for object/board construction whose subject is already known.
- *
- * Idle / building / ready is viewport STATE, not a new overlay channel —
- * the board already owns this shape (`ThreeBoardDocument`: idle "Open this
- * tab…", building "Settling N stories…"). Scene's first design
- * mount and `Object3DDocumentViewport`'s first construct are the same wait
- * with different subjects. Copy names the subject being prepared; it does not
- * claim a narrower phase (such as physics settling) while indexing, mounting,
- * bounds/layout, or renderer setup is actually in flight.
- */
-
-import { themeVars } from '@volter/sdk/widgets';
-import type { ReactNode } from 'react';
-
-/** Fixed construct tail after the board scene exists — viewport-bind, not settle. */
-export const OBJECT3D_SURFACE_BUILDING = 'Preparing the viewport…';
-
-export function ViewportSurfaceStatus({
-  testId,
-  children,
-}: {
-  readonly testId: string;
-  readonly children: ReactNode;
-}) {
-  return (
-    <div
-      data-testid={testId}
-      style={{
-        position: 'absolute',
-        inset: 0,
-        padding: 16,
-        fontSize: 12,
-        color: themeVars.content.muted,
-        pointerEvents: 'none',
-      }}
-    >
-      {children}
-    </div>
-  );
-}