@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/theme-css.ts

@@ -0,0 +1,1049 @@
+/**
+ * Global editor stylesheet injector (editor-style-polish U0). Installs a
+ * single `<style id="vgai-editor-theme">` tag, idempotently, mirroring the
+ * one real precedent for runtime-injected CSS in this codebase
+ * (`ProjectScreen.tsx`'s own `<style>` tag — the only place today with real
+ * `:hover`/`:focus-visible`/`:disabled` support, per the audit's THEME L).
+ *
+ * Values are interpolated from `theme.ts` — the single source of truth — so
+ * this sheet can never drift from the plain-TS token module the way
+ * `ProjectScreen.tsx`'s own hand-retyped palette drifted from everyone else's.
+ *
+ * SCOPE FENCE: variables live on `.vgai-editor-theme`, component paint uses
+ * the reserved `.vgai-*` namespace, and scrollbar policy is scoped beneath
+ * the theme root. Game content is not a second consumer of this sheet.
+ */
+
+import {
+  chromeSize,
+  controlSize,
+  EDITOR_THEME_CLASS,
+  editorThemeVariables,
+  fontSize,
+  graphiteDarkEditorTheme,
+  space,
+  strokeWidth,
+  zIndex,
+} from './theme';
+
+const STYLE_TAG_ID = 'vgai-editor-theme';
+
+function buildCss(): string {
+  const themeDeclarations = Object.entries(editorThemeVariables(graphiteDarkEditorTheme))
+    .map(([name, value]) => `  ${name}: ${value};`)
+    .join('\n');
+  return `
+.${EDITOR_THEME_CLASS} {
+${themeDeclarations}
+
+  /* Legacy aliases. New code consumes the semantic variables above. */
+  --vgai-bg-0: var(--vgai-surface-shell);
+  --vgai-bg-1: var(--vgai-surface-panel);
+  --vgai-bg-2: var(--vgai-surface-chrome);
+  --vgai-bg-3: var(--vgai-surface-raised);
+  --vgai-bg-inset: var(--vgai-surface-inset);
+
+  /* Borders */
+  --vgai-border-1: var(--vgai-boundary-default);
+  --vgai-border-2: var(--vgai-boundary-strong);
+
+  /* Text */
+  --vgai-text-1: var(--vgai-content-primary);
+  --vgai-text-2: var(--vgai-content-muted);
+  --vgai-text-3: var(--vgai-content-dim);
+
+  /* Spacing scale */
+  --vgai-space-1: ${space[1]}px;
+  --vgai-space-2: ${space[2]}px;
+  --vgai-space-3: ${space[3]}px;
+  --vgai-space-4: ${space[4]}px;
+  --vgai-space-5: ${space[5]}px;
+  --vgai-space-6: ${space[6]}px;
+  --vgai-space-8: ${space[8]}px;
+  --vgai-space-10: ${space[10]}px;
+  --vgai-space-12: ${space[12]}px;
+
+  /* Semantic chrome + control dimensions */
+  --vgai-command-bar-height: ${chromeSize.commandBar}px;
+  --vgai-panel-header-height: ${chromeSize.panelHeader}px;
+  --vgai-local-toolbar-height: ${chromeSize.localToolbar}px;
+  --vgai-tree-row-height: ${chromeSize.treeRow}px;
+  --vgai-status-bar-height: ${chromeSize.statusBar}px;
+  --vgai-control-compact-height: ${controlSize.compact}px;
+  --vgai-control-default-height: ${controlSize.default}px;
+  --vgai-control-comfortable-height: ${controlSize.comfortable}px;
+  --vgai-stroke-resting: ${strokeWidth.resting}px;
+  --vgai-stroke-active: ${strokeWidth.active}px;
+
+  /* Type scale */
+  --vgai-font-xs: ${fontSize.xs}px;
+  --vgai-font-sm: ${fontSize.sm}px;
+  --vgai-font-base: ${fontSize.base}px;
+  --vgai-font-md: ${fontSize.md}px;
+  --vgai-font-lg: ${fontSize.lg}px;
+  --vgai-font-xl: ${fontSize.xl}px;
+  --vgai-font-2xl: ${fontSize['2xl']}px;
+  --vgai-font-heading: ${fontSize.heading}px;
+  /* Z-index scale */
+  --vgai-z-base: ${zIndex.base};
+  --vgai-z-overlay-low: ${zIndex.overlayLow};
+  --vgai-z-dropdown: ${zIndex.dropdown};
+  --vgai-z-sticky: ${zIndex.sticky};
+  --vgai-z-toast: ${zIndex.toast};
+  --vgai-z-modal: ${zIndex.modal};
+}
+
+/* Native controls otherwise fall back to the browser's unrelated UI font.
+ * Keep the reset scoped to the editor shell; component classes and inline
+ * styles can still opt into a different size or the monospace stack. */
+.vgai-editor-shell button,
+.vgai-editor-shell input,
+.vgai-editor-shell select,
+.vgai-editor-shell textarea {
+  font-family: inherit;
+}
+
+.vgai-editor-shell button {
+  font-size: inherit;
+}
+
+.vgai-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ---------------------------------------------------------------------- */
+/* Canonical editor button family. All product button paint and states live */
+/* here; solid remains only as a source-compatibility alias for tools.      */
+/* ---------------------------------------------------------------------- */
+
+.vgai-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--vgai-space-2);
+  font-family: var(--vgai-font-sans);
+  font-size: var(--vgai-font-md);
+  line-height: 1;
+  border-radius: var(--vgai-radius-sm);
+  cursor: pointer;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, filter 0.12s ease;
+}
+
+.vgai-btn[data-size='compact'] {
+  height: var(--vgai-control-compact-height);
+  padding-top: 0;
+  padding-bottom: 0;
+  font-size: var(--vgai-font-base);
+}
+.vgai-btn[data-size='default'] {
+  height: var(--vgai-control-default-height);
+  padding-top: 0;
+  padding-bottom: 0;
+  font-size: var(--vgai-font-base);
+}
+.vgai-btn[data-size='comfortable'] {
+  height: var(--vgai-control-comfortable-height);
+  padding-top: 0;
+  padding-bottom: 0;
+  font-size: var(--vgai-font-md);
+}
+
+.vgai-btn[data-variant='primary'],
+.vgai-btn[data-variant='solid'] {
+  background: var(--vgai-accent);
+  color: var(--vgai-content-on-accent);
+  border-color: var(--vgai-accent);
+  padding: var(--vgai-space-3) var(--vgai-space-6);
+  font-weight: 600;
+}
+.vgai-btn[data-variant='primary']:hover:not(:disabled),
+.vgai-btn[data-variant='solid']:hover:not(:disabled) { filter: brightness(1.08); }
+.vgai-btn[data-variant='primary']:active:not(:disabled),
+.vgai-btn[data-variant='solid']:active:not(:disabled) { filter: brightness(0.92); }
+
+.vgai-btn[data-variant='secondary'] {
+  background: var(--vgai-surface-raised);
+  color: var(--vgai-content-primary);
+  border-color: var(--vgai-boundary-strong);
+  padding-inline: var(--vgai-space-4);
+}
+.vgai-btn[data-variant='secondary']:hover:not(:disabled) {
+  background: var(--vgai-surface-chrome);
+  border-color: var(--vgai-accent);
+}
+.vgai-btn[data-variant='secondary']:active:not(:disabled) { background: var(--vgai-surface-inset); }
+
+.vgai-btn[data-variant='outline'] {
+  background: transparent;
+  color: var(--vgai-content-primary);
+  border-color: var(--vgai-boundary-default);
+  padding-inline: var(--vgai-space-4);
+}
+.vgai-btn[data-variant='outline']:hover:not(:disabled) {
+  background: var(--vgai-neutral-hover);
+  border-color: var(--vgai-boundary-strong);
+}
+.vgai-btn[data-variant='outline']:active:not(:disabled) { background: var(--vgai-neutral-active); }
+
+.vgai-btn[data-variant='ghost'] {
+  background: transparent;
+  color: var(--vgai-content-muted);
+  border-color: transparent;
+  padding-inline: var(--vgai-space-3);
+}
+.vgai-btn[data-variant='ghost']:hover:not(:disabled) {
+  color: var(--vgai-content-primary);
+  background: var(--vgai-neutral-hover);
+}
+.vgai-btn[data-variant='ghost']:active:not(:disabled) { background: var(--vgai-neutral-active); }
+
+.vgai-btn[data-variant='danger'] {
+  color: var(--vgai-danger);
+  background: var(--vgai-danger-muted);
+  border-color: var(--vgai-danger);
+  padding-inline: var(--vgai-space-4);
+}
+.vgai-btn[data-variant='danger']:hover:not(:disabled) { filter: brightness(1.12); }
+.vgai-btn[data-variant='danger']:active:not(:disabled) { filter: brightness(0.9); }
+
+.vgai-btn[data-variant='success'] {
+  color: var(--vgai-content-on-accent);
+  background: var(--vgai-success);
+  border-color: var(--vgai-success);
+  padding-inline: var(--vgai-space-4);
+  font-weight: 600;
+}
+.vgai-btn[data-variant='success']:hover:not(:disabled) { filter: brightness(1.1); }
+.vgai-btn[data-variant='success']:active:not(:disabled) { filter: brightness(0.92); }
+
+.vgai-btn[aria-pressed='true'] {
+  color: var(--vgai-accent);
+  background: var(--vgai-accent-muted);
+  border-color: var(--vgai-accent);
+}
+.vgai-btn[aria-busy='true'] { cursor: progress; }
+
+.vgai-btn[data-icon='true'] {
+  width: var(--vgai-control-default-height);
+  padding: 0;
+}
+.vgai-btn[data-icon='true'][data-size='compact'] {
+  width: var(--vgai-control-compact-height);
+}
+.vgai-btn[data-icon='true'][data-size='comfortable'] {
+  width: var(--vgai-control-comfortable-height);
+}
+
+.vgai-btn:disabled,
+.vgai-btn[aria-disabled='true'] {
+  opacity: 0.4;
+  cursor: not-allowed;
+  filter: none;
+}
+
+.vgai-btn:focus-visible {
+  outline: var(--vgai-focus-ring);
+  outline-offset: 1px;
+}
+
+.vgai-debugger-machine {
+  display: block;
+  width: 100%;
+  height: auto;
+  justify-content: flex-start;
+  border-left: var(--vgai-stroke-active) solid transparent;
+  padding: var(--vgai-space-3) var(--vgai-space-4);
+  text-align: left;
+}
+.vgai-debugger-machine[data-selected='true'] {
+  border-left-color: var(--vgai-accent);
+  background: var(--vgai-surface-chrome);
+}
+.vgai-performance-overlay {
+  pointer-events: auto;
+  display: grid;
+  grid-template-columns: repeat(5, auto);
+  width: auto;
+  height: auto;
+  gap: var(--vgai-space-5);
+  border-color: var(--vgai-boundary-strong);
+  background: var(--vgai-surface-overlay);
+  color: var(--vgai-content-primary);
+  padding: var(--vgai-space-3) var(--vgai-space-4);
+  font-family: var(--vgai-font-mono);
+  font-size: var(--vgai-font-sm);
+}
+.vgai-performance-overlay[data-enabled='true'] { border-color: var(--vgai-accent); }
+.vgai-field-trigger {
+  width: 100%;
+  justify-content: space-between;
+  overflow: hidden;
+  font-family: var(--vgai-font-mono);
+  text-align: left;
+}
+.vgai-inspector-group-trigger {
+  width: 100%;
+  height: auto;
+  justify-content: flex-start;
+  padding: var(--vgai-space-4);
+  font-weight: 600;
+  text-align: left;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+}
+.vgai-hierarchy-more {
+  width: 100%;
+  height: var(--vgai-tree-row-height);
+  justify-content: flex-start;
+  font-style: italic;
+  text-align: left;
+}
+.vgai-btn.vgai-tree-caret {
+  width: 12px;
+  height: 18px;
+  flex: 0 0 12px;
+  font-size: var(--vgai-font-xs);
+}
+.vgai-chat-icon {
+  width: var(--vgai-control-default-height);
+  padding-inline: 0;
+}
+.vgai-chat-session-row {
+  width: 100%;
+  height: auto;
+  justify-content: flex-start;
+  padding: var(--vgai-space-4);
+  text-align: left;
+}
+.vgai-chat-session-row[data-selected='true'] { background: var(--vgai-surface-raised); }
+.vgai-chat-harness-trigger {
+  max-width: 190px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.vgai-chat-header-trigger {
+  min-width: 0;
+  flex: 1;
+  justify-content: flex-start;
+  overflow: hidden;
+  text-align: left;
+}
+.vgai-chat-header-trigger[aria-expanded='true'] {
+  border-color: var(--vgai-boundary-strong);
+  background: var(--vgai-surface-chrome);
+}
+.vgai-save-status { gap: var(--vgai-space-3); }
+.vgai-save-status[data-save-state='unsaved'] { color: var(--vgai-warn); }
+.vgai-save-status[data-save-state='failed'] { color: var(--vgai-danger); }
+.vgai-save-status-dot {
+  width: 7px;
+  height: 7px;
+  flex: 0 0 7px;
+  border-radius: var(--vgai-radius-full);
+  background: currentColor;
+}
+.vgai-status-action { color: var(--vgai-content-dim); }
+.vgai-status-action[data-has-errors='true'],
+.vgai-status-action[data-connection-state='error'] { color: var(--vgai-danger); }
+.vgai-status-action[data-connection-state='connecting'] { color: var(--vgai-warn); }
+.vgai-status-action[data-connection-state='connected'] { color: var(--vgai-success); }
+
+/* ---------------------------------------------------------------------- */
+/* .vgai-input / .vgai-select / .vgai-checkbox — shared form-control       */
+/* classes.                                                                */
+/* ---------------------------------------------------------------------- */
+
+.vgai-input {
+  background: var(--vgai-bg-inset);
+  color: var(--vgai-text-1);
+  border: 1px solid var(--vgai-border-1);
+  border-radius: var(--vgai-radius-sm);
+  padding: var(--vgai-space-1) var(--vgai-space-3);
+  font-size: var(--vgai-font-base);
+  font-family: var(--vgai-font-sans);
+  outline: none;
+  min-width: 0;
+  min-height: var(--vgai-control-default-height);
+  box-sizing: border-box;
+}
+.vgai-input:hover:not(:disabled) { border-color: var(--vgai-border-2); }
+.vgai-input:focus-visible {
+  border-color: var(--vgai-accent);
+  outline: var(--vgai-focus-ring);
+  outline-offset: -1px;
+}
+.vgai-input[aria-invalid='true'] {
+  border-color: var(--vgai-danger);
+}
+.vgai-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.vgai-select {
+  appearance: none;
+  -webkit-appearance: none;
+  background-color: var(--vgai-bg-inset);
+  background-image: var(--vgai-select-chevron);
+  background-repeat: no-repeat;
+  background-position: right 6px center;
+  background-size: 8px 5px;
+  color: var(--vgai-text-1);
+  border: 1px solid var(--vgai-border-1);
+  border-radius: var(--vgai-radius-sm);
+  padding: var(--vgai-space-1) var(--vgai-space-6) var(--vgai-space-1) var(--vgai-space-3);
+  font-size: var(--vgai-font-base);
+  font-family: var(--vgai-font-sans);
+  outline: none;
+  min-height: var(--vgai-control-default-height);
+  box-sizing: border-box;
+  cursor: pointer;
+}
+.vgai-select:hover:not(:disabled) { border-color: var(--vgai-border-2); }
+.vgai-select:focus-visible {
+  border-color: var(--vgai-accent);
+  outline: var(--vgai-focus-ring);
+  outline-offset: -1px;
+}
+.vgai-select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.vgai-select option {
+  background: var(--vgai-bg-2);
+  color: var(--vgai-text-1);
+}
+
+.vgai-checkbox {
+  accent-color: var(--vgai-accent);
+  width: 13px;
+  height: 13px;
+  cursor: pointer;
+  margin: 0;
+}
+.vgai-checkbox:focus-visible {
+  outline: var(--vgai-focus-ring);
+  outline-offset: 2px;
+}
+.vgai-checkbox:indeterminate { accent-color: var(--vgai-warn); }
+.vgai-checkbox:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.vgai-color-swatch {
+  width: var(--vgai-control-compact-height);
+  height: var(--vgai-control-compact-height);
+  flex: 0 0 auto;
+  padding: 0;
+  overflow: hidden;
+  background: transparent;
+  border: var(--vgai-stroke-resting) solid var(--vgai-boundary-default);
+  border-radius: var(--vgai-radius-sm);
+  cursor: pointer;
+}
+.vgai-color-swatch:hover:not(:disabled) { border-color: var(--vgai-boundary-strong); }
+.vgai-color-swatch:focus-visible,
+.vgai-file-input:focus-visible,
+.vgai-range:focus-visible { outline: var(--vgai-focus-ring); outline-offset: 2px; }
+.vgai-color-swatch:disabled,
+.vgai-file-input:disabled,
+.vgai-range:disabled { opacity: 0.5; cursor: not-allowed; }
+.vgai-file-input { color: var(--vgai-content-muted); font: inherit; }
+.vgai-range { min-width: 0; accent-color: var(--vgai-accent); }
+
+.vgai-number-input,
+.vgai-color-input { display: flex; min-width: 0; align-items: center; gap: var(--vgai-space-2); }
+.vgai-number-input-label {
+  width: 12px;
+  flex: 0 0 auto;
+  color: var(--vgai-content-muted);
+  font-size: var(--vgai-font-sm);
+  font-weight: 600;
+  text-align: center;
+  user-select: none;
+}
+.vgai-number-input-editor,
+.vgai-number-input-scrub,
+.vgai-color-input > .vgai-input { width: 100%; min-width: 0; }
+.vgai-number-input-scrub {
+  box-sizing: border-box;
+  overflow: hidden;
+  padding: 2px 6px;
+  color: var(--vgai-content-primary);
+  background: var(--vgai-surface-inset);
+  border: var(--vgai-stroke-resting) solid var(--vgai-boundary-default);
+  border-radius: var(--vgai-radius-sm);
+  font-size: var(--vgai-font-base);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: ew-resize;
+  user-select: none;
+}
+.vgai-number-input-scrub:hover { border-color: var(--vgai-boundary-strong); }
+.vgai-scrub-label { transition: color 0.12s ease, filter 0.12s ease; }
+.vgai-scrub-label:hover:not([data-disabled='true']) { color: var(--vgai-content-primary) !important; }
+.vgai-number-input-scrub[data-mixed='true'],
+.vgai-color-input > .vgai-input[data-mixed='true'] { color: var(--vgai-content-dim); font-style: italic; }
+.vgai-color-input-mixed {
+  width: var(--vgai-control-compact-height);
+  height: var(--vgai-control-compact-height);
+  flex: 0 0 auto;
+  border: var(--vgai-stroke-resting) solid var(--vgai-boundary-default);
+  border-radius: var(--vgai-radius-sm);
+  background-color: var(--vgai-surface-inset);
+  background-image: linear-gradient(45deg, var(--vgai-content-dim) 25%, transparent 25%, transparent 75%, var(--vgai-content-dim) 75%), linear-gradient(45deg, var(--vgai-content-dim) 25%, transparent 25%, transparent 75%, var(--vgai-content-dim) 75%);
+  background-position: 0 0, 4px 4px;
+  background-size: 8px 8px;
+}
+
+.vgai-section { border-bottom: var(--vgai-stroke-resting) solid var(--vgai-boundary-default); }
+.vgai-section-header {
+  display: flex;
+  width: 100%;
+  min-height: var(--vgai-control-default-height);
+  align-items: center;
+  gap: var(--vgai-space-2);
+  padding: var(--vgai-space-2) var(--vgai-space-4);
+  color: var(--vgai-content-primary);
+  background: transparent;
+  border: 0;
+  font: inherit;
+  font-size: var(--vgai-font-base);
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+}
+.vgai-section-header:hover { background: var(--vgai-neutral-hover); }
+.vgai-section-header:focus-visible { outline: var(--vgai-focus-ring); outline-offset: -2px; }
+.vgai-section-body { padding: 0 var(--vgai-space-4) var(--vgai-space-4); }
+
+.vgai-xstate-node {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: var(--vgai-space-1);
+  padding: var(--vgai-space-3) var(--vgai-space-5);
+  color: var(--vgai-content-primary);
+  background: var(--vgai-surface-panel);
+  border: var(--vgai-stroke-resting) solid var(--vgai-boundary-strong);
+  font-size: var(--vgai-font-base);
+  text-align: left;
+  transition: background 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease;
+}
+.vgai-xstate-node:hover { background: var(--vgai-surface-chrome); }
+.vgai-xstate-node[data-active='true'] { border-color: var(--vgai-success); }
+.vgai-xstate-node[data-selected='true'] {
+  border-color: var(--vgai-accent);
+  box-shadow: 0 0 0 var(--vgai-stroke-resting) var(--vgai-accent);
+}
+.vgai-xstate-node-type { color: var(--vgai-content-dim); transition: color 0.1s ease; }
+.vgai-xstate-node:hover .vgai-xstate-node-type,
+.vgai-xstate-node[data-selected='true'] .vgai-xstate-node-type { color: var(--vgai-content-primary); }
+
+/* ---------------------------------------------------------------------- */
+/* Layout, typography, and surface primitives. Product code composes these */
+/* roles instead of restating their visual recipes in inline objects.      */
+/* ---------------------------------------------------------------------- */
+
+.vgai-stack { display: flex; min-width: 0; flex-direction: column; }
+.vgai-inline { display: flex; min-width: 0; }
+.vgai-spacer { min-width: 0; flex: 1 1 auto; }
+.vgai-actions { flex: 0 0 auto; }
+.vgai-divider { flex: 0 0 auto; background: var(--vgai-boundary-default); }
+.vgai-divider[data-orientation='horizontal'] { width: 100%; height: var(--vgai-stroke-resting); }
+.vgai-divider[data-orientation='vertical'] { width: var(--vgai-stroke-resting); height: 16px; }
+
+.vgai-text {
+  min-width: 0;
+  margin: 0;
+  color: var(--vgai-content-primary);
+  font-family: var(--vgai-font-sans);
+  font-size: var(--vgai-font-base);
+  font-weight: 400;
+  line-height: 1.35;
+}
+.vgai-text[data-variant='caption'] { font-size: var(--vgai-font-sm); }
+.vgai-text[data-variant='body'] { font-size: var(--vgai-font-base); }
+.vgai-text[data-variant='label'] { font-size: var(--vgai-font-base); font-weight: 600; }
+.vgai-text[data-variant='title'] { font-size: var(--vgai-font-md); font-weight: 600; }
+.vgai-text[data-variant='heading'] { font-size: var(--vgai-font-xl); font-weight: 600; }
+.vgai-text[data-variant='display'] { font-size: var(--vgai-font-heading); font-weight: 600; }
+.vgai-text[data-variant='code'] { font-family: var(--vgai-font-mono); font-size: var(--vgai-font-base); }
+.vgai-text[data-tone='muted'] { color: var(--vgai-content-muted); }
+.vgai-text[data-tone='dim'] { color: var(--vgai-content-dim); }
+.vgai-text[data-tone='accent'] { color: var(--vgai-accent); }
+.vgai-text[data-tone='danger'] { color: var(--vgai-danger); }
+.vgai-text[data-tone='warning'] { color: var(--vgai-warn); }
+.vgai-text[data-tone='success'] { color: var(--vgai-success); }
+.vgai-text[data-truncate='true'] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.vgai-text[data-selectable='true'] { user-select: text; }
+
+.vgai-surface {
+  min-width: 0;
+  color: var(--vgai-content-primary);
+  background: var(--vgai-surface-panel);
+  box-sizing: border-box;
+}
+.vgai-surface[data-variant='shell'] { background: var(--vgai-surface-shell); }
+.vgai-surface[data-variant='panel'] { background: var(--vgai-surface-panel); }
+.vgai-surface[data-variant='chrome'] { background: var(--vgai-surface-chrome); }
+.vgai-surface[data-variant='raised'] { background: var(--vgai-surface-raised); }
+.vgai-surface[data-variant='inset'] { background: var(--vgai-surface-inset); }
+.vgai-surface[data-variant='overlay'] { background: var(--vgai-surface-overlay); }
+.vgai-surface[data-border='true'] { border: var(--vgai-stroke-resting) solid var(--vgai-boundary-default); }
+.vgai-surface[data-scroll='true'] { min-height: 0; overflow: auto; }
+
+/* Modal composition. Product dialogs supply content; this family owns chrome. */
+.vgai-dialog-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: var(--vgai-z-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--vgai-space-10);
+  background: var(--vgai-scrim);
+  pointer-events: auto;
+  box-sizing: border-box;
+}
+.vgai-dialog {
+  display: flex;
+  width: min(520px, calc(100vw - 48px));
+  max-height: calc(100vh - 48px);
+  min-width: 360px;
+  flex-direction: column;
+  overflow: hidden;
+  color: var(--vgai-content-primary);
+  background: var(--vgai-surface-chrome);
+  border: var(--vgai-stroke-resting) solid var(--vgai-boundary-strong);
+  border-radius: var(--vgai-radius-lg);
+  box-shadow: var(--vgai-shadow-lg);
+  box-sizing: border-box;
+}
+.vgai-dialog[data-size='compact'] { width: min(420px, calc(100vw - 48px)); }
+.vgai-dialog[data-size='wide'] { width: min(920px, calc(100vw - 48px)); height: min(720px, calc(100vh - 48px)); }
+.vgai-dialog-header { padding: var(--vgai-space-8) var(--vgai-space-10); border-bottom: var(--vgai-stroke-resting) solid var(--vgai-boundary-default); }
+.vgai-dialog-body { min-height: 0; padding: var(--vgai-space-8) var(--vgai-space-10); overflow: auto; }
+.vgai-dialog-footer { justify-content: flex-end; padding: var(--vgai-space-6) var(--vgai-space-10); border-top: var(--vgai-stroke-resting) solid var(--vgai-boundary-default); }
+.vgai-dialog-field { display: grid; min-width: 0; gap: var(--vgai-space-2); }
+.vgai-dialog-field > .vgai-input { width: 100%; }
+.vgai-joined-field { align-items: stretch; gap: 0; }
+.vgai-joined-field > .vgai-input { width: 100%; border-top-right-radius: 0; border-bottom-right-radius: 0; }
+.vgai-joined-field-suffix { display: inline-flex; flex: 0 0 auto; align-items: center; padding: 0 var(--vgai-space-4); color: var(--vgai-content-dim); background: var(--vgai-surface-raised); border: var(--vgai-stroke-resting) solid var(--vgai-boundary-default); border-left: 0; border-radius: 0 var(--vgai-radius-sm) var(--vgai-radius-sm) 0; white-space: nowrap; }
+
+/* ---------------------------------------------------------------------- */
+/* .vgai-menu / .vgai-menu-item — shared floating-menu classes (optional,  */
+/* for later units).                                                      */
+/* ---------------------------------------------------------------------- */
+
+.vgai-menu {
+  background: var(--vgai-bg-2);
+  border: 1px solid var(--vgai-border-1);
+  border-radius: var(--vgai-radius-md);
+  box-shadow: var(--vgai-shadow-md);
+  padding: var(--vgai-space-2);
+  z-index: var(--vgai-z-toast);
+}
+.vgai-menu-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: var(--vgai-control-default-height);
+  box-sizing: border-box;
+  border: 0;
+  background: transparent;
+  padding: var(--vgai-space-2) var(--vgai-space-4);
+  border-radius: var(--vgai-radius-sm);
+  font-size: var(--vgai-font-base);
+  color: var(--vgai-text-1);
+  cursor: pointer;
+  user-select: none;
+  font-family: inherit;
+  text-align: left;
+  white-space: nowrap;
+}
+.vgai-menu-item:hover {
+  background: var(--vgai-accent-muted);
+}
+.vgai-menu-item:focus-visible {
+  outline: var(--vgai-focus-ring);
+  outline-offset: -1px;
+}
+.vgai-menu-item:disabled {
+  color: var(--vgai-text-3);
+  cursor: default;
+}
+.vgai-menu-item:disabled:hover {
+  background: transparent;
+}
+.vgai-menu-separator { height: var(--vgai-stroke-resting); margin: var(--vgai-space-1) var(--vgai-space-2); border: 0; background: var(--vgai-boundary-default); }
+
+.vgai-menu-trigger {
+  height: 100%;
+  border: 0;
+  border-radius: var(--vgai-radius-sm);
+  background: transparent;
+  color: var(--vgai-text-2);
+  padding: 0 var(--vgai-space-3);
+  cursor: pointer;
+  font: inherit;
+}
+.vgai-menu-trigger:hover,
+.vgai-menu-trigger[aria-expanded='true'] {
+  color: var(--vgai-text-1);
+  background: var(--vgai-bg-3);
+}
+.vgai-menu-trigger:focus-visible {
+  outline: var(--vgai-focus-ring);
+  outline-offset: -1px;
+}
+
+/* ---------------------------------------------------------------------- */
+/* Editor composition patterns: toolbars, tabs, trees, fields, and states. */
+/* ---------------------------------------------------------------------- */
+
+.vgai-toolbar {
+  display: flex;
+  min-width: 0;
+  min-height: var(--vgai-local-toolbar-height);
+  align-items: center;
+  gap: var(--vgai-space-2);
+  padding: 0 var(--vgai-space-3);
+  color: var(--vgai-content-primary);
+  background: var(--vgai-surface-panel);
+  border-bottom: var(--vgai-stroke-resting) solid var(--vgai-boundary-default);
+  box-sizing: border-box;
+}
+.vgai-toolbar[data-compact='true'] {
+  min-height: var(--vgai-control-default-height);
+  padding-inline: var(--vgai-space-2);
+}
+.vgai-toolbar-group {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--vgai-space-2);
+}
+.vgai-toolbar-divider {
+  width: 1px;
+  height: 16px;
+  flex: 0 0 auto;
+  margin: 0 var(--vgai-space-1);
+  background: var(--vgai-boundary-default);
+}
+.vgai-floating-toolbar {
+  min-height: auto;
+  padding: var(--vgai-space-2) var(--vgai-space-3);
+  border: var(--vgai-stroke-resting) solid var(--vgai-boundary-strong);
+  border-radius: var(--vgai-radius-md);
+  background: color-mix(in srgb, var(--vgai-surface-panel) 90%, transparent);
+  box-shadow: var(--vgai-shadow-sm);
+  backdrop-filter: blur(8px);
+  pointer-events: auto;
+}
+.vgai-split-button { display: inline-flex; min-width: 0; align-items: stretch; }
+.vgai-split-button > .vgai-btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
+.vgai-split-button > .vgai-btn + .vgai-btn { min-width: 20px; padding-inline: var(--vgai-space-1); border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
+.vgai-keycap { padding: 1px var(--vgai-space-2); color: var(--vgai-content-primary); background: var(--vgai-surface-raised); border: var(--vgai-stroke-resting) solid var(--vgai-boundary-default); border-radius: var(--vgai-radius-sm); font-family: var(--vgai-font-mono); font-size: var(--vgai-font-sm); }
+.vgai-viewport-toolbar { position: absolute; top: var(--vgai-space-4); z-index: var(--vgai-z-sticky); }
+.vgai-viewport-toolbar-left { left: var(--vgai-space-4); }
+.vgai-viewport-toolbar-right { right: var(--vgai-space-4); }
+.vgai-viewport-popover-anchor { position: relative; display: inline-flex; align-items: center; }
+.vgai-snap-popover { position: absolute; top: calc(100% + var(--vgai-space-2)); left: 0; z-index: var(--vgai-z-modal); width: 170px; padding: var(--vgai-space-4); }
+.vgai-helpers-menu { position: absolute; top: calc(100% + var(--vgai-space-2)); right: 0; z-index: var(--vgai-z-sticky); min-width: 140px; }
+.vgai-menu-check { display: inline-flex; width: 14px; flex: 0 0 auto; justify-content: center; margin-right: var(--vgai-space-2); }
+.vgai-selectable { transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease; }
+.vgai-selectable:hover { background: var(--vgai-neutral-hover); }
+.vgai-selectable[data-selected='true'] { background: var(--vgai-accent-muted); }
+.vgai-list-button { display: block; width: 100%; min-width: 0; border: 0; border-left: var(--vgai-stroke-active) solid transparent; background: transparent; color: var(--vgai-content-muted); padding: var(--vgai-space-3) var(--vgai-space-4); text-align: left; font: inherit; cursor: pointer; box-sizing: border-box; }
+.vgai-list-button:hover { color: var(--vgai-content-primary); background: var(--vgai-neutral-hover); }
+.vgai-list-button[data-selected='true'] { color: var(--vgai-content-primary); background: var(--vgai-accent-muted); }
+.vgai-list-button[data-selected='true'][data-accent='bar'] { border-left-color: var(--vgai-accent); }
+.vgai-list-button:disabled { opacity: 0.5; cursor: default; }
+.vgai-list-button:focus-visible { outline: var(--vgai-focus-ring); outline-offset: -2px; }
+.vgai-playbar { pointer-events: auto; }
+.vgai-playbar-popover-anchor { position: relative; }
+.vgai-resolution-menu { position: absolute; top: calc(100% + var(--vgai-space-2)); right: 0; z-index: var(--vgai-z-sticky); min-width: 220px; }
+.vgai-resolution-menu [aria-checked='true'] { color: var(--vgai-content-primary); background: var(--vgai-accent-muted); }
+.vgai-camera-info { position: absolute; right: var(--vgai-space-4); bottom: var(--vgai-space-4); padding: var(--vgai-space-2) var(--vgai-space-3); border-radius: var(--vgai-radius-md); backdrop-filter: blur(8px); pointer-events: none; }
+.vgai-react-canvas-controls { position: absolute; right: var(--vgai-space-6); bottom: var(--vgai-space-6); z-index: var(--vgai-z-sticky); overflow: visible; }
+.vgai-react-viewport-select { border-color: transparent; background-color: transparent; }
+
+.vgai-tabs {
+  display: flex;
+  height: var(--vgai-panel-header-height);
+  min-width: 0;
+  align-items: stretch;
+  gap: 2px;
+  padding-inline: var(--vgai-space-2);
+  overflow: hidden;
+  background: var(--vgai-surface-chrome);
+  border-bottom: var(--vgai-stroke-resting) solid var(--vgai-boundary-default);
+}
+.vgai-tab {
+  position: relative;
+  display: inline-flex;
+  min-width: 0;
+  max-width: 220px;
+  align-items: center;
+  gap: var(--vgai-space-2);
+  padding: 0 var(--vgai-space-4);
+  color: var(--vgai-content-muted);
+  background: transparent;
+  border: 0;
+  font: inherit;
+  cursor: pointer;
+}
+.vgai-tab:hover { color: var(--vgai-content-primary); background: var(--vgai-surface-raised); }
+.vgai-tab[data-selected='true'] { color: var(--vgai-content-primary); }
+.vgai-tab[data-selected='true']::after {
+  position: absolute;
+  right: var(--vgai-space-4);
+  bottom: 0;
+  left: var(--vgai-space-4);
+  height: var(--vgai-stroke-active);
+  border-radius: 2px 2px 0 0;
+  background: var(--vgai-accent);
+  content: '';
+}
+.vgai-tab:focus-visible { outline: var(--vgai-focus-ring); outline-offset: -2px; }
+.vgai-tab-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.vgai-tab-dirty {
+  width: 6px;
+  height: 6px;
+  flex: 0 0 auto;
+  border-radius: var(--vgai-radius-full);
+  background: var(--vgai-warn);
+}
+.vgai-tab-badge,
+.vgai-badge {
+  display: inline-flex;
+  min-width: 15px;
+  height: 15px;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--vgai-space-1);
+  border-radius: var(--vgai-radius-full);
+  color: var(--vgai-surface-shell);
+  background: var(--vgai-content-muted);
+  font-size: var(--vgai-font-xs);
+  line-height: 1;
+  box-sizing: border-box;
+}
+
+.vgai-tree { min-width: 0; color: var(--vgai-content-primary); }
+.vgai-tree-row {
+  display: flex;
+  height: var(--vgai-tree-row-height);
+  min-width: 0;
+  align-items: center;
+  gap: var(--vgai-space-2);
+  padding-right: var(--vgai-space-2);
+  color: var(--vgai-content-muted);
+  border-left: var(--vgai-stroke-active) solid transparent;
+  box-sizing: border-box;
+  cursor: default;
+  user-select: none;
+}
+.vgai-tree-row:hover { color: var(--vgai-content-primary); background: var(--vgai-neutral-hover); }
+.vgai-tree-row[data-selected='true'] {
+  color: var(--vgai-content-primary);
+  background: var(--vgai-accent-muted);
+  border-left-color: var(--vgai-accent);
+}
+.vgai-tree-row[data-muted='true'] { color: var(--vgai-content-dim); }
+.vgai-tree-row[data-dragging='true'] {
+  color: var(--vgai-content-muted);
+  background: var(--vgai-neutral-hover);
+  outline: 1px dashed var(--vgai-boundary-strong);
+  outline-offset: -1px;
+}
+.vgai-tree-row:focus-visible { outline: var(--vgai-focus-ring); outline-offset: -2px; }
+.vgai-tree-row-leading { display: inline-flex; width: 14px; flex: 0 0 auto; justify-content: center; }
+.vgai-tree-row-label { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.vgai-tree-row-actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: var(--vgai-space-1); }
+
+.vgai-field-group { display: grid; gap: var(--vgai-space-3); padding: var(--vgai-space-4); }
+.vgai-field-row {
+  display: grid;
+  grid-template-columns: minmax(64px, 84px) minmax(0, 1fr);
+  min-width: 0;
+  align-items: center;
+  gap: var(--vgai-space-3);
+}
+.vgai-field-row[data-compact='true'] { grid-template-columns: minmax(52px, 72px) minmax(0, 1fr); }
+.vgai-field-label { min-width: 0; color: var(--vgai-content-muted); font-size: var(--vgai-font-base); }
+.vgai-field-control { display: flex; min-width: 0; align-items: center; gap: var(--vgai-space-2); }
+.vgai-field-hint {
+  grid-column: 2;
+  color: var(--vgai-content-dim);
+  font-size: var(--vgai-font-sm);
+  line-height: 1.35;
+}
+
+.vgai-state-surface {
+  display: flex;
+  min-width: 0;
+  min-height: 120px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--vgai-space-3);
+  padding: var(--vgai-space-8);
+  color: var(--vgai-content-muted);
+  text-align: center;
+  box-sizing: border-box;
+}
+.vgai-state-surface[data-compact='true'] { min-height: 64px; padding: var(--vgai-space-4); }
+.vgai-state-surface[data-tone='error'] { color: var(--vgai-danger); }
+.vgai-state-surface[data-tone='success'] { color: var(--vgai-success); }
+.vgai-state-surface[data-tone='loading'] .vgai-state-surface-icon { animation: editor-spin 0.8s linear infinite; }
+.vgai-state-surface-icon { color: currentColor; font-size: var(--vgai-font-2xl); }
+.vgai-state-surface-title { color: var(--vgai-content-primary); font-size: var(--vgai-font-md); }
+.vgai-state-surface-description { max-width: 42ch; color: var(--vgai-content-dim); line-height: 1.45; }
+.vgai-state-surface-action { margin-top: var(--vgai-space-2); }
+
+.vgai-banner {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--vgai-space-3);
+  padding: var(--vgai-space-3) var(--vgai-space-5);
+  border-bottom: var(--vgai-stroke-resting) solid var(--vgai-accent);
+  color: var(--vgai-accent);
+  background: var(--vgai-accent-muted);
+  box-sizing: border-box;
+}
+.vgai-banner[data-tone='warning'] { color: var(--vgai-warn); border-color: var(--vgai-warn); background: var(--vgai-warn-muted); }
+.vgai-banner[data-tone='error'] { color: var(--vgai-danger); border-color: var(--vgai-danger); background: var(--vgai-danger-faint); }
+.vgai-banner[data-tone='success'] { color: var(--vgai-success); border-color: var(--vgai-success); background: var(--vgai-success-muted); }
+.vgai-banner-icon { display: inline-flex; flex: 0 0 auto; }
+.vgai-banner-content { min-width: 0; flex: 1; color: var(--vgai-content-primary); }
+.vgai-banner-actions { display: flex; flex: 0 0 auto; align-items: center; gap: var(--vgai-space-2); }
+
+.vgai-popover {
+  color: var(--vgai-content-primary);
+  background: var(--vgai-surface-chrome);
+  border: var(--vgai-stroke-resting) solid var(--vgai-boundary-strong);
+  border-radius: var(--vgai-radius-md);
+  box-shadow: var(--vgai-shadow-md);
+}
+.vgai-drop-indicator {
+  position: absolute;
+  z-index: var(--vgai-z-overlay-low);
+  pointer-events: none;
+  border: var(--vgai-stroke-active) solid var(--vgai-accent);
+  background: var(--vgai-accent-muted);
+  box-sizing: border-box;
+}
+.vgai-drop-indicator[data-position='before'] { inset: 0 0 auto; height: var(--vgai-stroke-active); }
+.vgai-drop-indicator[data-position='after'] { inset: auto 0 0; height: var(--vgai-stroke-active); }
+.vgai-drop-indicator[data-position='inside'] { inset: 1px; border-radius: var(--vgai-radius-sm); }
+
+.vgai-model-tree-item { text-align: left; }
+.vgai-operation-card {
+  display: block;
+  width: 100%;
+  margin-top: 10px;
+  padding: 10px;
+  border: var(--vgai-stroke-resting) solid var(--vgai-boundary-default);
+  border-radius: var(--vgai-radius-md);
+  background: var(--vgai-surface-panel);
+  text-align: left;
+}
+
+.vgai-resize-handle {
+  position: relative;
+  z-index: var(--vgai-z-overlay-low);
+  flex: 0 0 5px;
+  background: transparent;
+  touch-action: none;
+}
+.vgai-resize-handle[data-orientation='vertical'] { cursor: col-resize; }
+.vgai-resize-handle[data-orientation='horizontal'] { cursor: row-resize; }
+.vgai-resize-handle::before {
+  position: absolute;
+  background: var(--vgai-boundary-default);
+  content: '';
+  transition: background-color 80ms ease, transform 80ms ease;
+}
+.vgai-resize-handle[data-orientation='vertical']::before { inset: 0 auto 0 2px; width: 1px; }
+.vgai-resize-handle[data-orientation='horizontal']::before { inset: 2px 0 auto; height: 1px; }
+.vgai-resize-handle:hover::before,
+.vgai-resize-handle:focus-visible::before { background: var(--vgai-accent); }
+.vgai-resize-handle[data-orientation='vertical']:hover::before,
+.vgai-resize-handle[data-orientation='vertical']:focus-visible::before { transform: scaleX(2); }
+.vgai-resize-handle[data-orientation='horizontal']:hover::before,
+.vgai-resize-handle[data-orientation='horizontal']:focus-visible::before { transform: scaleY(2); }
+
+/* ---------------------------------------------------------------------- */
+/* Scrollbar policy (closes C-12, root cause of L-8/L-19) — REPLACES the   */
+/* old global *::-webkit-scrollbar{display:none} suppression. Thin, dark,   */
+/* themed; visible only where content actually overflows.                 */
+/* ---------------------------------------------------------------------- */
+
+.${EDITOR_THEME_CLASS},
+.${EDITOR_THEME_CLASS} * {
+  scrollbar-width: thin;
+  scrollbar-color: var(--vgai-bg-3) transparent;
+}
+.${EDITOR_THEME_CLASS}::-webkit-scrollbar,
+.${EDITOR_THEME_CLASS} *::-webkit-scrollbar {
+  width: 9px;
+  height: 9px;
+}
+.${EDITOR_THEME_CLASS}::-webkit-scrollbar-track,
+.${EDITOR_THEME_CLASS} *::-webkit-scrollbar-track {
+  background: transparent;
+}
+.${EDITOR_THEME_CLASS}::-webkit-scrollbar-thumb,
+.${EDITOR_THEME_CLASS} *::-webkit-scrollbar-thumb {
+  background-color: var(--vgai-bg-3);
+  border-radius: 999px;
+  border: 2px solid var(--vgai-bg-1);
+  background-clip: padding-box;
+}
+.${EDITOR_THEME_CLASS}::-webkit-scrollbar-thumb:hover,
+.${EDITOR_THEME_CLASS} *::-webkit-scrollbar-thumb:hover {
+  background-color: var(--vgai-border-2);
+}
+.${EDITOR_THEME_CLASS}::-webkit-scrollbar-corner,
+.${EDITOR_THEME_CLASS} *::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* ---------------------------------------------------------------------- */
+/* Keyframes — keep editor-spin as-is; add the missing blink keyframe      */
+/* (closes C-9, referenced by BuildPanel.tsx:325's build-log cursor).      */
+/* ---------------------------------------------------------------------- */
+
+@keyframes editor-spin { to { transform: rotate(360deg); } }
+@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
+`;
+}
+
+/**
+ * Injects the editor theme `<style>` tag into `document.head` exactly once
+ * (idempotent — safe to call from every SPA entry that mounts editor chrome
+ * without risking a duplicate tag on remount/HMR). No-ops outside a DOM
+ * environment (SSR/node import safety).
+ */
+export function ensureEditorTheme(): void {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById(STYLE_TAG_ID)) return;
+  const styleEl = document.createElement('style');
+  styleEl.id = STYLE_TAG_ID;
+  styleEl.textContent = buildCss();
+  document.head.appendChild(styleEl);
+}