symbiote-ui 0.3.0-alpha.4

package/xr/scene-controller.js

@@ -0,0 +1,242 @@
+import {
+  WEBXR_FEATURES,
+  WEBXR_MODES,
+  createWebXRLayer,
+  createWebXRRenderLoop,
+  endWebXRSession,
+  listWebXRInputSources,
+  requestWebXRReferenceSpace,
+  requestWebXRSession,
+  syncWebXRCanvas,
+} from './webxr.js';
+import { applyXRThemeToPanel, createXRThemeSnapshot } from './theme-bridge.js';
+
+function initialState(options = {}) {
+  return {
+    status: 'idle',
+    mode: null,
+    scene: options.scene || null,
+    session: null,
+    referenceSpace: null,
+    layer: null,
+    inputSources: [],
+    frameCount: 0,
+    lastFrameTime: null,
+    reason: null,
+    themeSnapshot: options.themeSnapshot || null,
+    renderMode: 'dom-fallback',
+  };
+}
+
+export function createXRSceneDiagnostics(state = {}, options = {}) {
+  let scene = state.scene || null;
+  let panels = Array.isArray(scene?.panels) ? scene.panels : [];
+  let layer = state.layer || null;
+  let canvas = options.canvas || null;
+  let gl = options.gl || null;
+  return {
+    version: 'xr-scene-diagnostics-v1',
+    status: state.status || 'unknown',
+    mode: state.mode || null,
+    renderMode: state.renderMode || 'unknown',
+    reason: state.reason || null,
+    frameCount: Number(state.frameCount || 0),
+    lastFrameTime: state.lastFrameTime || null,
+    inputSources: Array.isArray(state.inputSources) ? state.inputSources.length : 0,
+    scene: scene
+      ? {
+        version: scene.version || null,
+        coordinateSystem: scene.coordinateSystem || null,
+        themeScope: scene.themeScope || null,
+        panelCount: panels.length,
+        panels: panels.map((panel) => ({
+          id: panel.id || null,
+          component: panel.component || panel.panelType || null,
+          anchor: panel.anchor || null,
+          size: Array.isArray(panel.size) ? [...panel.size] : null,
+          position: Array.isArray(panel.position) ? [...panel.position] : null,
+          rotation: Array.isArray(panel.rotation) ? [...panel.rotation] : null,
+          contentViewport: panel.contentViewport
+            ? {
+              width: panel.contentViewport.width,
+              height: panel.contentViewport.height,
+              scale: panel.contentViewport.scale,
+              source: panel.contentViewport.source,
+            }
+            : null,
+        })),
+      }
+      : null,
+    layer: layer
+      ? {
+        type: layer.constructor?.name || 'XRWebGLLayer',
+        framebufferWidth: Number(layer.framebufferWidth || 0),
+        framebufferHeight: Number(layer.framebufferHeight || 0),
+        hasFramebuffer: Boolean(layer.framebuffer),
+      }
+      : null,
+    canvas: canvas
+      ? {
+        width: Number(canvas.width || 0),
+        height: Number(canvas.height || 0),
+        clientWidth: Number(canvas.clientWidth || 0),
+        clientHeight: Number(canvas.clientHeight || 0),
+      }
+      : null,
+    gl: gl
+      ? {
+        hasContext: true,
+        drawingBufferWidth: Number(gl.drawingBufferWidth || 0),
+        drawingBufferHeight: Number(gl.drawingBufferHeight || 0),
+      }
+      : { hasContext: false },
+  };
+}
+
+export function createXRSceneController(options = {}) {
+  let target = options.globalThis || globalThis;
+  let referenceSpaceType = options.referenceSpaceType || WEBXR_FEATURES.localFloor;
+  let renderLoop = null;
+  let onFrame = options.onFrame || null;
+  let state = initialState(options);
+
+  function snapshotState() {
+    return {
+      ...state,
+      inputSources: [...state.inputSources],
+      scene: state.scene,
+      session: state.session,
+      referenceSpace: state.referenceSpace,
+      layer: state.layer,
+      themeSnapshot: state.themeSnapshot,
+    };
+  }
+
+  function setScene(scene, sceneOptions = {}) {
+    let themeSnapshot = sceneOptions.themeSnapshot || state.themeSnapshot || createXRThemeSnapshot(sceneOptions.themeRoot, {
+      themeScope: scene?.themeScope,
+    });
+    state = {
+      ...state,
+      scene: scene
+        ? {
+          ...scene,
+          panels: scene.panels.map((panel) => applyXRThemeToPanel(panel, themeSnapshot)),
+          themeScope: scene.themeScope || themeSnapshot.themeScope,
+        }
+        : null,
+      themeSnapshot,
+    };
+    return snapshotState();
+  }
+
+  async function start(mode = WEBXR_MODES.immersiveVr, sessionOptions = {}) {
+    if (state.status === 'running') {
+      return { ok: true, state: snapshotState() };
+    }
+
+    let sessionResult = await requestWebXRSession(target, mode, sessionOptions);
+    if (!sessionResult.ok) {
+      state = {
+        ...state,
+        status: 'fallback',
+        mode,
+        reason: sessionResult.reason || 'unsupported',
+        renderMode: 'dom-fallback',
+      };
+      return { ok: false, reason: state.reason, state: snapshotState() };
+    }
+
+    let layerResult = { ok: true, layer: null, reason: null };
+    if (sessionOptions.gl || sessionOptions.canvas) {
+      let gl = sessionOptions.gl || sessionOptions.canvas?.getContext?.('webgl', {
+        xrCompatible: true,
+        alpha: true,
+        antialias: true,
+      });
+      if (gl?.makeXRCompatible) await gl.makeXRCompatible();
+      layerResult = createWebXRLayer(target, sessionResult.session, gl, sessionOptions.layerOptions || {});
+      if (layerResult.ok) {
+        await sessionResult.session.updateRenderState?.({ baseLayer: layerResult.layer });
+        syncWebXRCanvas(sessionOptions.canvas, gl, sessionResult.session);
+      } else if (sessionOptions.requireLayer !== false) {
+        await endWebXRSession(sessionResult.session);
+        state = {
+          ...state,
+          status: 'fallback',
+          mode,
+          reason: layerResult.reason || 'layer-failed',
+          renderMode: 'dom-fallback',
+        };
+        return { ok: false, reason: state.reason, state: snapshotState() };
+      }
+    }
+
+    let referenceResult = await requestWebXRReferenceSpace(
+      sessionResult.session,
+      sessionOptions.referenceSpaceType || referenceSpaceType,
+    );
+    if (!referenceResult.ok) {
+      await endWebXRSession(sessionResult.session);
+      state = {
+        ...state,
+        status: 'fallback',
+        mode,
+        reason: referenceResult.reason || 'reference-space-failed',
+        renderMode: 'dom-fallback',
+      };
+      return { ok: false, reason: state.reason, state: snapshotState() };
+    }
+
+    state = {
+      ...state,
+      status: 'running',
+      mode,
+      session: sessionResult.session,
+      referenceSpace: referenceResult.referenceSpace,
+      layer: layerResult.layer,
+      inputSources: listWebXRInputSources(sessionResult.session),
+      reason: layerResult.ok ? null : layerResult.reason,
+      renderMode: 'webxr-session',
+    };
+
+    renderLoop = createWebXRRenderLoop(sessionResult.session, (time, frame, session) => {
+      state = {
+        ...state,
+        frameCount: state.frameCount + 1,
+        lastFrameTime: time,
+        inputSources: listWebXRInputSources(session),
+      };
+      onFrame?.(time, frame, snapshotState());
+    });
+
+    return { ok: true, state: snapshotState() };
+  }
+
+  async function stop() {
+    renderLoop?.stop();
+    renderLoop = null;
+    let session = state.session;
+    let ended = await endWebXRSession(session);
+    state = {
+      ...state,
+      status: 'stopped',
+      session: null,
+      referenceSpace: null,
+      layer: null,
+      inputSources: [],
+      renderMode: 'dom-fallback',
+    };
+    return { ok: ended, state: snapshotState() };
+  }
+
+  return {
+    setScene,
+    start,
+    stop,
+    getState: snapshotState,
+    getDiagnostics(options = {}) {
+      return createXRSceneDiagnostics(snapshotState(), options);
+    },
+  };
+}

package/xr/spatial-scene.js

@@ -0,0 +1,212 @@
+import {
+  adjustXRPanelPoseForComfort,
+  adjustXRPanelRotationForViewer,
+  createXRPanelContentViewport,
+  projectLayoutToXR,
+} from './layout-projection.js';
+
+export const XR_SPATIAL_SCENE_VERSION = 'xr-spatial-scene-v1';
+
+export const XR_SPATIAL_SPACE = Object.freeze({
+  localFloor: 'webxr-local-floor',
+  viewer: 'webxr-viewer',
+});
+
+export const XR_SCENE_ROOT_TRANSFORM_VERSION = 'xr-scene-root-transform-v1';
+
+const DEFAULT_USER_SPACE = Object.freeze({
+  eyeHeight: 1.6,
+  comfortRadius: 1.8,
+  near: 0.35,
+  far: 3.6,
+});
+
+const DEFAULT_PREVIEW = Object.freeze({
+  renderer: 'dom-perspective-preview',
+  pixelsPerMeter: 118,
+  origin: [0.5, 0.5],
+});
+
+function numberOr(value, fallback) {
+  let number = Number(value);
+  return Number.isFinite(number) ? number : fallback;
+}
+
+function vectorOr(value, fallback) {
+  if (!Array.isArray(value)) return [...fallback];
+  return fallback.map((item, index) => numberOr(value[index], item));
+}
+
+function vectorLikeOr(value, fallback) {
+  if (Array.isArray(value)) return vectorOr(value, fallback);
+  if (!value || typeof value !== 'object') return [...fallback];
+  return fallback.map((item, index) => {
+    let key = index === 0 ? 'x' : index === 1 ? 'y' : 'z';
+    return numberOr(value[key], item);
+  });
+}
+
+function firstVector(...values) {
+  for (let value of values) {
+    if (Array.isArray(value)) return value;
+    if (value && typeof value === 'object' && ['x', 'y', 'z'].some((key) => key in value)) return value;
+  }
+  return null;
+}
+
+function yawDegreesFromQuaternion(value) {
+  if (!value || typeof value !== 'object') return null;
+  let x = numberOr(value.x, 0);
+  let y = numberOr(value.y, 0);
+  let z = numberOr(value.z, 0);
+  let w = numberOr(value.w, 1);
+  let siny = 2 * (w * y + x * z);
+  let cosy = 1 - 2 * (y * y + x * x);
+  return Math.atan2(siny, cosy) * 180 / Math.PI;
+}
+
+function normalizeViewerPose(input = {}) {
+  let transform = input.transform || {};
+  let position = firstVector(input.position, transform.position, input.translation);
+  let rotation = firstVector(input.rotation, transform.rotation);
+  let yaw = input.yawDegrees ?? input.yaw ?? transform.yawDegrees ?? transform.yaw ?? yawDegreesFromQuaternion(input.orientation || transform.orientation);
+  if (!rotation && yaw != null) {
+    rotation = [0, numberOr(yaw, 0), 0];
+  }
+  return {
+    position: position ? vectorLikeOr(position, [0, 0, 0]) : null,
+    rotation: rotation ? vectorLikeOr(rotation, [0, 0, 0]) : null,
+  };
+}
+
+export function createXRViewerPoseSnapshot(viewerPose = {}, options = {}) {
+  let normalized = normalizeViewerPose(viewerPose);
+  let hasPose = Boolean(normalized.position || normalized.rotation);
+  return {
+    version: 'xr-viewer-pose-snapshot-v1',
+    source: hasPose ? options.source || 'xr-frame-viewer-pose' : 'missing-viewer-pose',
+    position: normalized.position,
+    rotation: normalized.rotation,
+  };
+}
+
+export function createXRSceneRootTransform(scene = {}, options = {}) {
+  let viewerPose = normalizeViewerPose(options.viewerPose || {});
+  let origin = scene.origin || {};
+  let hasViewerPose = Boolean(viewerPose.position || viewerPose.rotation);
+  let lockFloorY = options.lockFloorY !== false;
+  let position = viewerPose.position ||
+    vectorOr(options.position || origin.position, [0, 0, 0]);
+  let rotation = viewerPose.rotation ||
+    vectorOr(options.rotation || origin.rotation, [0, 0, 0]);
+
+  if (lockFloorY) {
+    position = [position[0], 0, position[2]];
+    rotation = [0, rotation[1], 0];
+  }
+
+  return {
+    version: XR_SCENE_ROOT_TRANSFORM_VERSION,
+    policy: options.policy || 'body-space-front',
+    mode: options.mode || scene.mode || null,
+    referenceSpaceType: options.referenceSpaceType || options.referenceSpace || scene.referenceSpaceType || null,
+    originSource: hasViewerPose ? 'viewer-pose' : origin.type ? `scene-origin:${origin.type}` : 'provider-default',
+    lockFloorY,
+    position,
+    rotation,
+  };
+}
+
+function normalizeUserSpace(input = {}) {
+  return {
+    eyeHeight: numberOr(input.eyeHeight, DEFAULT_USER_SPACE.eyeHeight),
+    comfortRadius: numberOr(input.comfortRadius, DEFAULT_USER_SPACE.comfortRadius),
+    near: numberOr(input.near, DEFAULT_USER_SPACE.near),
+    far: numberOr(input.far, DEFAULT_USER_SPACE.far),
+  };
+}
+
+function normalizePreview(input = {}) {
+  return {
+    renderer: input.renderer || DEFAULT_PREVIEW.renderer,
+    pixelsPerMeter: numberOr(input.pixelsPerMeter, DEFAULT_PREVIEW.pixelsPerMeter),
+    origin: vectorOr(input.origin, DEFAULT_PREVIEW.origin),
+  };
+}
+
+export function createXRSpatialScene(root, options = {}) {
+  let layout = projectLayoutToXR(root, options);
+  let userSpace = normalizeUserSpace(options.userSpace);
+  let preview = normalizePreview(options.preview);
+
+  return {
+    version: XR_SPATIAL_SCENE_VERSION,
+    unit: 'meter',
+    coordinateSystem: options.coordinateSystem || XR_SPATIAL_SPACE.localFloor,
+    origin: {
+      type: 'viewer',
+      position: vectorOr(options.origin?.position, [0, 0, 0]),
+      rotation: vectorOr(options.origin?.rotation, [0, 0, 0]),
+    },
+    userSpace,
+    preview,
+    layout,
+    panels: layout.panels.map((sourcePanel) => {
+      let panel = options.adjustComfort === false
+        ? sourcePanel
+        : adjustXRPanelPoseForComfort(sourcePanel, { userSpace });
+      panel = options.adjustFacing === false
+        ? panel
+        : adjustXRPanelRotationForViewer(panel, { userSpace });
+      let previewPixels = {
+        width: panel.size[0] * preview.pixelsPerMeter,
+        height: panel.size[1] * preview.pixelsPerMeter,
+      };
+      return {
+        ...panel,
+        contentViewport: createXRPanelContentViewport(panel, { previewPixels }),
+        spatialRole: panel.anchor === 'front' ? 'primary-surface' : 'support-surface',
+        distanceFromUser: Math.abs(panel.position[2] || 0),
+      };
+    }),
+    interaction: {
+      pointerModel: 'ray-to-panel-normalized',
+      eventSpace: 'panel-normalized-0-1',
+      supportsMouseFallback: true,
+    },
+    placement: createXRSceneRootTransform({
+      origin: options.origin,
+      referenceSpaceType: options.referenceSpaceType,
+    }, {
+      mode: options.mode,
+      referenceSpaceType: options.referenceSpaceType,
+      viewerPose: options.viewerPose,
+    }),
+    themeScope: options.themeScope || layout.themeScope,
+  };
+}
+
+export function createXRSpatialPreview(panel, scene, options = {}) {
+  let pixelsPerMeter = numberOr(options.pixelsPerMeter, scene?.preview?.pixelsPerMeter || DEFAULT_PREVIEW.pixelsPerMeter);
+  let depthScale = numberOr(options.depthScale, 1);
+  let eyeHeight = numberOr(scene?.userSpace?.eyeHeight, DEFAULT_USER_SPACE.eyeHeight);
+  let left = panel.position[0] * pixelsPerMeter;
+  let top = (eyeHeight - panel.position[1]) * pixelsPerMeter;
+  let depth = panel.position[2] * pixelsPerMeter * depthScale;
+
+  return {
+    panelId: panel.id,
+    left,
+    top,
+    depth,
+    width: panel.size[0] * pixelsPerMeter,
+    height: panel.size[1] * pixelsPerMeter,
+    opacity: panel.opacity,
+    transform: [
+      `translate3d(calc(-50% + ${left}px), calc(-50% + ${top}px), ${depth}px)`,
+      `rotateX(${panel.rotation[0]}deg)`,
+      `rotateY(${panel.rotation[1]}deg)`,
+      `rotateZ(${panel.rotation[2]}deg)`,
+    ].join(' '),
+  };
+}

package/xr/theme-bridge.js

@@ -0,0 +1,105 @@
+const XR_THEME_TOKEN_MAP = Object.freeze({
+  panelBackground: '--sn-xr-panel-bg',
+  panelBorder: '--sn-xr-panel-border',
+  panelRadius: '--sn-xr-panel-radius',
+  panelShadow: '--sn-xr-panel-shadow',
+  pointerColor: '--sn-xr-pointer-color',
+  textColor: '--sn-text',
+  mutedTextColor: '--sn-text-dim',
+  motionDuration: '--sn-duration-fast',
+  motionEasing: '--sn-ease-standard',
+  gap: '--sn-layout-resizer-size',
+});
+
+const XR_THEME_FALLBACKS = Object.freeze({
+  '--sn-xr-panel-bg': 'var(--sn-panel-bg)',
+  '--sn-xr-panel-border': 'var(--sn-node-border)',
+  '--sn-xr-panel-radius': 'var(--sn-node-radius)',
+  '--sn-xr-panel-shadow': 'var(--sn-node-shadow)',
+  '--sn-xr-pointer-color': 'var(--sn-node-selected)',
+  '--sn-text': 'var(--sn-text)',
+  '--sn-text-dim': 'var(--sn-text-dim)',
+  '--sn-duration-fast': '120ms',
+  '--sn-ease-standard': 'ease',
+  '--sn-layout-resizer-size': '6px',
+});
+
+function resolveThemeRoot(rootOrDocument) {
+  if (!rootOrDocument) return null;
+  if (rootOrDocument.documentElement) return rootOrDocument.documentElement;
+  return rootOrDocument;
+}
+
+function readCssToken(root, cssVar, computedStyle) {
+  if (!root || !computedStyle) return XR_THEME_FALLBACKS[cssVar] || '';
+  let value = computedStyle.getPropertyValue(cssVar).trim();
+  return value || XR_THEME_FALLBACKS[cssVar] || '';
+}
+
+function resolveCssProperty(root, cssVar, property) {
+  let documentRef = root?.ownerDocument || root?.documentElement?.ownerDocument || null;
+  let parent = documentRef?.body || root;
+  if (!documentRef?.createElement || !parent?.append || typeof globalThis.getComputedStyle !== 'function') return '';
+  let probe = documentRef.createElement('span');
+  probe.style.position = 'absolute';
+  probe.style.pointerEvents = 'none';
+  probe.style.opacity = '0';
+  probe.style[property] = `var(${cssVar})`;
+  parent.append(probe);
+  let value = globalThis.getComputedStyle(probe).getPropertyValue(property).trim();
+  probe.remove?.();
+  return value;
+}
+
+export function createXRThemeSnapshot(rootOrDocument = globalThis.document, options = {}) {
+  let root = resolveThemeRoot(rootOrDocument);
+  let computedStyle = root && typeof globalThis.getComputedStyle === 'function'
+    ? globalThis.getComputedStyle(root)
+    : null;
+  let tokens = {};
+
+  for (let cssVar of Object.values(XR_THEME_TOKEN_MAP)) {
+    tokens[cssVar] = readCssToken(root, cssVar, computedStyle);
+  }
+
+  return {
+    version: 'xr-theme-snapshot-v1',
+    themeScope: options.themeScope || root?.dataset?.themeScope || 'default-provider',
+    tokens,
+    material: {
+      background: tokens['--sn-xr-panel-bg'],
+      backgroundColor: resolveCssProperty(root, '--sn-xr-panel-bg', 'background-color') || tokens['--sn-xr-panel-bg'],
+      border: tokens['--sn-xr-panel-border'],
+      borderColor: resolveCssProperty(root, '--sn-xr-panel-border', 'border-color') || tokens['--sn-xr-panel-border'],
+      radius: tokens['--sn-xr-panel-radius'],
+      shadow: tokens['--sn-xr-panel-shadow'],
+      pointer: tokens['--sn-xr-pointer-color'],
+      pointerColor: resolveCssProperty(root, '--sn-xr-pointer-color', 'color') || tokens['--sn-xr-pointer-color'],
+      text: tokens['--sn-text'],
+      textColor: resolveCssProperty(root, '--sn-text', 'color') || tokens['--sn-text'],
+      textDim: tokens['--sn-text-dim'],
+      textDimColor: resolveCssProperty(root, '--sn-text-dim', 'color') || tokens['--sn-text-dim'],
+      gap: tokens['--sn-layout-resizer-size'],
+      motion: {
+        duration: tokens['--sn-duration-fast'],
+        easing: tokens['--sn-ease-standard'],
+      },
+    },
+  };
+}
+
+export function applyXRThemeToPanel(panel, themeSnapshot) {
+  let snapshot = themeSnapshot || createXRThemeSnapshot(null);
+  return {
+    ...panel,
+    themeScope: panel.themeScope || snapshot.themeScope,
+    material: {
+      ...snapshot.material,
+      ...(panel.material || {}),
+    },
+  };
+}
+
+export function getXRThemeTokenMap() {
+  return { ...XR_THEME_TOKEN_MAP };
+}