@volter/editor-core 0.5.57

package/src/components/CollaborationHeaderControl.css

@@ -0,0 +1,74 @@
+.vgai-collaboration-header {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+}
+
+.vgai-collaboration-header-trigger {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: var(--vgai-space-2);
+}
+
+.vgai-collaboration-header-count {
+  min-width: 1ch;
+  color: var(--vgai-content-dim);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+
+.vgai-collaboration-header-menu {
+  width: min(360px, calc(100vw - 24px));
+  padding: var(--vgai-space-2);
+}
+
+.vgai-session-access-control {
+  padding: var(--vgai-space-2);
+}
+
+.vgai-collaboration-header-label {
+  padding: var(--vgai-space-2) var(--vgai-space-3);
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.vgai-collaboration-header-person {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--vgai-space-2);
+  padding-block: var(--vgai-space-2);
+}
+
+.vgai-collaboration-header-elsewhere {
+  padding-inline: var(--vgai-space-3);
+}
+
+.vgai-collaboration-header-dot {
+  width: 9px;
+  height: 9px;
+  flex: 0 0 auto;
+  border-radius: var(--vgai-radius-full);
+}
+
+.vgai-collaboration-header-copy {
+  display: grid;
+  min-width: 0;
+  flex: 1;
+}
+
+.vgai-collaboration-header-copy > span {
+  overflow: hidden;
+  color: var(--vgai-content-dim);
+  font-size: var(--vgai-font-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vgai-collaboration-header-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--vgai-space-2);
+  padding: var(--vgai-space-2);
+}

package/src/components/CompactInspectorCard.tsx

@@ -0,0 +1,190 @@
+/**
+ * The MINI card's physical home (`inspector-presentation.ts`): a card that is
+ * PART OF THE VIEWPORT — positioned and clamped inside the center group's live
+ * rect (`workspace-viewport-rect.ts`), so it rides the view as panels resize
+ * instead of floating over the whole workspace. Rendered by the workspace host
+ * while the ACTIVE SURFACE resolves the `card` presentation — the space-tight
+ * fallback the user opts into, the case in which the narrow-column
+ * `workspace:inspector` panel does not exist. Deliberately NOT a panel of the
+ * host's: it belongs to the viewport, not the grid.
+ *
+ * Like the other viewport islands it has a SEMANTIC corner, rather than a
+ * free-floating workspace position: bottom-right with the shared viewport
+ * margin. Dock/layout changes recompute that placement from the active
+ * center group's live rect, so an old drag offset can never strand it in the
+ * middle of a resized Asset Lab or under a neighboring dock.
+ *
+ * MINIMIZED it is a pill (`InspectorPill`), and pressing the pill restores the
+ * card. `minimized` lives here, above the projection, so the pill is always
+ * rendered and the card is never unrestorable.
+ *
+ * The mini card and the pill show the same subject the box itself is showing
+ * (`inspection/use-active-inspection.ts`), never from a second derivation over
+ * the selection stores. The pill used to have one, and it disagreed — it
+ * described the asset browser's selection while the box described a scene node.
+ */
+
+import { zIndex } from '@volter/editor-sdk/widgets';
+import { useCallback, useState, useSyncExternalStore } from 'react';
+import {
+  assetSelectionVersion,
+  clearSelectedAsset,
+  subscribeAssetSelection,
+} from '../asset-selection';
+import { setAuthoringSelection } from '../authoring/consumer-actions';
+import { resolvePanelAuthoring } from '../authoring/panel-authoring';
+import { useEditorStore } from '../editor-runtime';
+import { useActiveInspection } from '../inspection/use-active-inspection';
+import {
+  subscribeWorkspaceDocuments,
+  workspaceDocumentRegistryVersion,
+} from '../workspace-document-registry';
+import {
+  resolveViewportOverlayPlacement,
+  subscribeWorkspaceViewportRect,
+  type ViewportOverlayAnchor,
+  type WorkspaceViewportRect,
+  workspaceViewportRect,
+  workspaceViewportRectVersion,
+} from '../workspace-viewport-rect';
+import { CompactInspectorHostProvider } from './CompactInspectorShell';
+import { InspectorPill } from './InspectionProjection';
+import { Inspector } from './Inspector';
+
+/**
+ * The compact inspector BOX's physical size family. It is size only — WHERE
+ * the box sits is this host's business (it clamps against
+ * `workspace-viewport-rect.ts`).
+ *
+ * `CARD_MAX_HEIGHT` is a CEILING, not a height: the mini card is preview + name
+ * + icon strip + open-for-edit, content-driven, so a fixed height would leave
+ * dead space beneath it. The card is bottom-anchored and its body scrolls once
+ * it reaches this ceiling.
+ */
+const CARD_WIDTH = 260;
+const CARD_MAX_HEIGHT = 360;
+/** Breathing room kept between the box and every edge of the viewport. */
+const CARD_MARGIN = 16;
+/** Floor when the viewport is too small for the full size. */
+const CARD_MIN_SIZE = 200;
+const FAB_WIDTH = 220;
+const FAB_HEIGHT = 54;
+/** Fallback when no viewport rect is published yet (pre-first-layout):
+ *  dock-root bottom-right, clear of the global status/conversation row. */
+const FALLBACK_BOTTOM = 52;
+
+type CardAnchor = ViewportOverlayAnchor;
+
+const CARD_SIZING = {
+  maxWidth: CARD_WIDTH,
+  maxHeight: CARD_MAX_HEIGHT,
+  minSize: CARD_MIN_SIZE,
+  margin: CARD_MARGIN,
+} as const;
+
+const DEFAULT_ANCHOR: CardAnchor = { right: CARD_MARGIN, bottom: CARD_MARGIN };
+
+const FAB_SIZING = {
+  maxWidth: FAB_WIDTH,
+  maxHeight: FAB_HEIGHT,
+  minSize: FAB_HEIGHT,
+  margin: CARD_MARGIN,
+} as const;
+
+function cardPlacement(viewport: WorkspaceViewportRect, anchor: CardAnchor, minimized: boolean) {
+  return resolveViewportOverlayPlacement(viewport, minimized ? FAB_SIZING : CARD_SIZING, anchor);
+}
+
+export function CompactInspectorCard() {
+  const store = useEditorStore();
+  useSyncExternalStore(store.subscribe, store.getShellSnapshot);
+  useSyncExternalStore(
+    subscribeWorkspaceDocuments,
+    workspaceDocumentRegistryVersion,
+    workspaceDocumentRegistryVersion,
+  );
+  useSyncExternalStore(subscribeAssetSelection, assetSelectionVersion, assetSelectionVersion);
+  useSyncExternalStore(
+    subscribeWorkspaceViewportRect,
+    workspaceViewportRectVersion,
+    workspaceViewportRectVersion,
+  );
+  const viewport = workspaceViewportRect();
+  const [minimized, setMinimized] = useState(false);
+  // THE subject — the same one `<Inspector/>` below renders. The pill is a
+  // miniature of it, so there is nothing here to derive.
+  const { subject } = useActiveInspection(store);
+
+  // The PILL's clear, and the only one left: the title bar's X is gone (owner,
+  // 2026-08-07 — "the x does deselect? may not be necessary either"), because
+  // clicking empty viewport space already deselects. The pill keeps one,
+  // because minimized there is no viewport gesture that reaches this box.
+  const clearSelection = useCallback(() => {
+    // Clear whatever produced the subject: the browser's asset selection is
+    // its own producer (`inspection/active-subject.ts`), so clearing it is
+    // what "no selection" means while it is showing.
+    clearSelectedAsset();
+    const { adapter } = resolvePanelAuthoring(store);
+    if (!setAuthoringSelection(adapter, [])) store.select(null);
+  }, [store]);
+
+  const placement = viewport ? cardPlacement(viewport, DEFAULT_ANCHOR, minimized) : null;
+  return (
+    // Two elements, one box: the OUTER one is the clamped maximum rect for the
+    // semantic bottom-right anchor, and the visible card inside it is
+    // bottom-aligned with an intrinsic height. That lets a collapsed card be
+    // exactly as tall as its own chrome while its bottom edge stays fixed.
+    // The outer box is inert; the inner one owns all visible interaction.
+    <div
+      style={{
+        position: 'absolute',
+        ...(placement
+          ? {
+              left: placement.left,
+              top: placement.top,
+              width: placement.width,
+              height: placement.height,
+            }
+          : {
+              right: CARD_MARGIN,
+              bottom: FALLBACK_BOTTOM,
+              width: minimized ? FAB_WIDTH : CARD_WIDTH,
+              height: minimized ? FAB_HEIGHT : CARD_MAX_HEIGHT,
+            }),
+        display: 'flex',
+        alignItems: 'flex-end',
+        zIndex: zIndex.sticky,
+        pointerEvents: 'none',
+      }}
+    >
+      <div
+        data-testid="compact-inspector-card"
+        style={{
+          display: 'flex',
+          width: '100%',
+          // The pill is a fixed lozenge; the open card is content-driven up to
+          // the outer box's ceiling, beyond which its panel body scrolls.
+          ...(minimized ? { height: '100%' } : { maxHeight: '100%' }),
+          borderRadius: minimized ? 999 : 'var(--dv-group-border-radius, 8px)',
+          overflow: minimized ? ('hidden' as const) : ('clip' as const),
+          border: 'var(--dv-floating-border, 1px solid var(--vgai-border-2))',
+          boxShadow: 'var(--dv-floating-box-shadow, var(--vgai-shadow-lg))',
+          background: 'var(--dv-group-view-background-color, var(--vgai-bg-1))',
+          pointerEvents: 'auto',
+        }}
+      >
+        {minimized ? (
+          <InspectorPill
+            subject={subject}
+            onExpand={() => setMinimized(false)}
+            onClear={clearSelection}
+          />
+        ) : (
+          <CompactInspectorHostProvider actions={{ minimize: () => setMinimized(true) }}>
+            <Inspector />
+          </CompactInspectorHostProvider>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/CompactInspectorShell.tsx

@@ -0,0 +1,39 @@
+/**
+ * The viewport host's handle into the MINI card (`inspector-presentation.ts`):
+ * the one action a projected mini card needs from its physical home — collapse
+ * to the pill. The host (`components/CompactInspectorCard.tsx`) provides it; a
+ * bounded design-system host provides none, so the card renders without a
+ * minimize control.
+ *
+ * The mini card and pill chrome itself lives with the projections in
+ * `components/InspectionProjection.tsx` — this module is only the context seam
+ * between them and the viewport host.
+ */
+
+import { createContext, type ReactNode, useContext } from 'react';
+
+interface CompactInspectorHostActions {
+  readonly minimize: () => void;
+}
+
+const CompactInspectorHostContext = createContext<CompactInspectorHostActions | null>(null);
+
+export function CompactInspectorHostProvider({
+  actions,
+  children,
+}: {
+  readonly actions: CompactInspectorHostActions;
+  readonly children: ReactNode;
+}) {
+  return (
+    <CompactInspectorHostContext.Provider value={actions}>
+      {children}
+    </CompactInspectorHostContext.Provider>
+  );
+}
+
+/** The mini card's handle to its viewport host — `null` in a bounded host,
+ *  where there is nothing to minimize into. */
+export function useCompactInspectorHost(): CompactInspectorHostActions | null {
+  return useContext(CompactInspectorHostContext);
+}

package/src/components/ConsolePanel.css

@@ -0,0 +1,55 @@
+.vgai-console {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+}
+.vgai-console .vgai-toolbar {
+  flex: 0 0 auto;
+}
+.vgai-console-filter {
+  width: 140px;
+  margin-left: auto;
+}
+.vgai-console-list {
+  min-height: 0;
+  flex: 1;
+  overflow-y: auto;
+  font-family: var(--vgai-font-mono);
+  font-size: var(--vgai-font-base);
+  line-height: 18px;
+}
+.vgai-console-empty {
+  padding: var(--vgai-space-6) var(--vgai-space-4);
+  color: var(--vgai-content-dim);
+  font-style: italic;
+}
+.vgai-console-row {
+  display: flex;
+  align-items: flex-start;
+  padding: 1px var(--vgai-space-4);
+  border-bottom: var(--vgai-stroke-resting) solid var(--vgai-boundary-default);
+}
+.vgai-console-row[data-level="error"] {
+  background: var(--vgai-danger-faint);
+}
+.vgai-console-row:hover {
+  background: var(--vgai-neutral-hover);
+}
+.vgai-console-count {
+  flex: 0 0 auto;
+  margin-left: var(--vgai-space-3);
+  padding: 0 var(--vgai-space-2);
+  color: var(--vgai-content-muted);
+  background: var(--vgai-surface-raised);
+  border-radius: var(--vgai-radius-lg);
+  font-size: var(--vgai-font-sm);
+}
+.vgai-console [data-console-level="info"][aria-pressed="true"] {
+  color: var(--vgai-content-primary);
+}
+.vgai-console [data-console-level="warn"][aria-pressed="true"] {
+  color: var(--vgai-warn);
+}
+.vgai-console [data-console-level="error"][aria-pressed="true"] {
+  color: var(--vgai-danger);
+}

package/src/components/ConsolePanel.tsx

@@ -0,0 +1,270 @@
+import {
+  faCircleInfo,
+  faCube,
+  faExclamationTriangle,
+  faTimesCircle,
+  faTrash,
+} from '@fortawesome/free-solid-svg-icons';
+import {
+  Button,
+  EditorIcon,
+  EditorSurface,
+  EditorToolbar,
+  IconButton,
+  Select,
+  TextInput,
+  ToolbarDivider,
+  themeVars,
+} from '@volter/editor-sdk/widgets';
+import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { getActiveAuthoring } from '../authoring/active-adapter';
+import { setAuthoringSelection } from '../authoring/consumer-actions';
+import { type ConsoleLevel, editorConsole } from '../editor-console';
+import { useEditorStore } from '../editor-runtime';
+
+const LEVEL_COLORS: Record<ConsoleLevel, string> = {
+  info: themeVars.content.primary,
+  warn: themeVars.semantic.warning,
+  error: themeVars.semantic.danger,
+};
+
+const SUBSYSTEM_COLORS: Record<string, string> = {
+  scene: '#78dce8',
+  physics: '#ff6188',
+  animation: '#a9dc76',
+  network: '#fc9867',
+  audio: '#ab9df2',
+  ai: '#ffd866',
+  input: '#78dce8',
+  core: themeVars.content.primary,
+};
+
+const LEVEL_ICONS = {
+  info: faCircleInfo,
+  warn: faExclamationTriangle,
+  error: faTimesCircle,
+};
+
+export function ConsolePanel() {
+  const store = useEditorStore();
+  useSyncExternalStore(editorConsole.subscribe, editorConsole.getSnapshot);
+
+  const [filter, setFilter] = useState('');
+  const [instanceFilter, setInstanceFilter] = useState('all');
+  const [showLevels, setShowLevels] = useState<Record<ConsoleLevel, boolean>>({
+    info: true,
+    warn: true,
+    error: true,
+  });
+  const listRef = useRef<HTMLDivElement>(null);
+  const [autoScroll, setAutoScroll] = useState(true);
+
+  const entries = editorConsole.getEntries();
+  const instances = new Map<string, string>();
+  for (const entry of entries) {
+    const id = entry.metadata?.['instanceId'];
+    if (typeof id !== 'string' || id.length === 0) continue;
+    const name = entry.metadata?.['instanceName'];
+    instances.set(id, typeof name === 'string' && name.length > 0 ? name : `Instance ${id}`);
+  }
+  const filtered = entries.filter((e) => {
+    if (!showLevels[e.level]) return false;
+    if (instanceFilter !== 'all' && e.metadata?.['instanceId'] !== instanceFilter) return false;
+    if (filter && !e.message.toLowerCase().includes(filter.toLowerCase())) return false;
+    return true;
+  });
+
+  // Auto-scroll to bottom when new entries arrive
+  useEffect(() => {
+    if (autoScroll && listRef.current) {
+      listRef.current.scrollTop = listRef.current.scrollHeight;
+    }
+  }, [entries.length, autoScroll]);
+
+  const handleScroll = () => {
+    if (!listRef.current) return;
+    const { scrollTop, scrollHeight, clientHeight } = listRef.current;
+    // Pin auto-scroll if within 20px of bottom
+    setAutoScroll(scrollHeight - scrollTop - clientHeight < 20);
+  };
+
+  const toggleLevel = (level: ConsoleLevel) => {
+    setShowLevels((prev) => ({ ...prev, [level]: !prev[level] }));
+  };
+
+  const formatTime = (ts: number) => {
+    const d = new Date(ts);
+    return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}:${d.getSeconds().toString().padStart(2, '0')}`;
+  };
+
+  const selectAndFocusEntity = (entityId: string) => {
+    setAuthoringSelection(getActiveAuthoring(store), [entityId]);
+    store.focusOnEntity(entityId);
+  };
+
+  const counts = editorConsole.counts;
+
+  return (
+    <EditorSurface className="vgai-console">
+      {/* Toolbar */}
+      <EditorToolbar label="Console filters" compact>
+        {/* Clear button */}
+        <IconButton
+          aria-label="Clear console"
+          size="compact"
+          onClick={() => editorConsole.clear()}
+          title="Clear console"
+        >
+          <EditorIcon icon={faTrash} size="xs" />
+        </IconButton>
+
+        <ToolbarDivider />
+
+        <Select
+          aria-label="Filter console by game instance"
+          title="Show messages from all game instances or one inspected instance"
+          value={instanceFilter}
+          onChange={(event) => setInstanceFilter(event.target.value)}
+          style={{ width: 'auto', minWidth: 74, height: 24, fontSize: 11 }}
+        >
+          <option value="all">All instances</option>
+          {[...instances].map(([id, name]) => (
+            <option key={id} value={id}>
+              {name}
+            </option>
+          ))}
+        </Select>
+
+        <ToolbarDivider />
+
+        {/* Level filter toggles */}
+        {(['info', 'warn', 'error'] as const).map((level) => (
+          <Button
+            key={level}
+            variant="ghost"
+            size="compact"
+            aria-label={`Toggle ${level} messages`}
+            aria-pressed={showLevels[level]}
+            data-console-level={level}
+            onClick={() => toggleLevel(level)}
+          >
+            <EditorIcon icon={LEVEL_ICONS[level]} size="xs" />
+            {counts[level]}
+          </Button>
+        ))}
+
+        {/* Search filter */}
+        {/* B-4: the one dock text-input style (`.vgai-input` — real hover/focus
+            states from the U0 sheet) instead of this file's own variant. */}
+        <TextInput
+          placeholder="Filter..."
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+          className="vgai-console-filter"
+        />
+      </EditorToolbar>
+
+      {/* Message list */}
+      <div ref={listRef} onScroll={handleScroll} className="vgai-console-list vgai-selectable-text">
+        {filtered.length === 0 && <div className="vgai-console-empty">No messages</div>}
+        {filtered.map((entry) => {
+          const entityId =
+            entry.metadata?.['entityId'] != null ? String(entry.metadata['entityId']) : null;
+          // The live Object3D's own name is the entity's name.
+          const entityName = (entityId ? store.objectMap.get(entityId)?.name : null) || entityId;
+          const instanceId =
+            typeof entry.metadata?.['instanceId'] === 'string'
+              ? entry.metadata['instanceId']
+              : null;
+          const instanceName =
+            typeof entry.metadata?.['instanceName'] === 'string'
+              ? entry.metadata['instanceName']
+              : instanceId
+                ? `Instance ${instanceId}`
+                : null;
+
+          // dangerFaint (NOT dangerMuted): resting row tint stays deliberately
+          // low-emphasis so stacked error rows read as a list, not a red wall.
+          return (
+            <div
+              key={entry.id}
+              className="vgai-console-row"
+              data-level={entry.level}
+              style={{ color: LEVEL_COLORS[entry.level] }}
+            >
+              <span style={{ color: themeVars.content.dim, marginRight: 6, flexShrink: 0 }}>
+                {formatTime(entry.timestamp)}
+              </span>
+              <EditorIcon
+                icon={LEVEL_ICONS[entry.level]}
+                style={{ fontSize: 9, marginTop: 4, marginRight: 6, flexShrink: 0 }}
+              />
+              {instanceName && (
+                <span
+                  title={instanceId ? `Runtime instance ${instanceId}` : undefined}
+                  style={{
+                    background: themeVars.accent.muted,
+                    color: themeVars.accent.default,
+                    borderRadius: themeVars.shape.small,
+                    padding: '0 4px',
+                    fontSize: 10,
+                    marginRight: 6,
+                    flexShrink: 0,
+                  }}
+                >
+                  {instanceName}
+                </span>
+              )}
+              {entry.subsystem && (
+                <span
+                  style={{
+                    background: `${SUBSYSTEM_COLORS[entry.subsystem] ?? themeVars.content.muted}22`,
+                    color: SUBSYSTEM_COLORS[entry.subsystem] ?? themeVars.content.muted,
+                    borderRadius: themeVars.shape.small,
+                    padding: '0 4px',
+                    fontSize: 10,
+                    marginRight: 6,
+                    flexShrink: 0,
+                  }}
+                >
+                  {entry.subsystem}
+                </span>
+              )}
+              <span style={{ flex: 1, wordBreak: 'break-word' }}>
+                {entry.message}
+                {entityId && (
+                  <span
+                    onClick={() => selectAndFocusEntity(entityId)}
+                    style={{
+                      background: themeVars.semantic.successMuted,
+                      color: themeVars.semantic.success,
+                      borderRadius: themeVars.shape.small,
+                      padding: '0 5px',
+                      fontSize: 10,
+                      marginLeft: 6,
+                      cursor: 'pointer',
+                      pointerEvents: 'auto',
+                      display: 'inline-flex',
+                      alignItems: 'center',
+                      gap: 3,
+                    }}
+                    title={`Select and focus "${entityName}"`}
+                  >
+                    <EditorIcon icon={faCube} style={{ fontSize: 8 }} />
+                    {entityName}
+                  </span>
+                )}
+                {entry.source && (
+                  <span style={{ color: themeVars.content.dim, marginLeft: 6 }}>
+                    [{entry.source}]
+                  </span>
+                )}
+              </span>
+              {entry.count > 1 && <span className="vgai-console-count">{entry.count}</span>}
+            </div>
+          );
+        })}
+      </div>
+    </EditorSurface>
+  );
+}