symbiote-ui 0.3.0-alpha.4

package/xr/panel-frame.js

@@ -0,0 +1,128 @@
+function numberOr(value, fallback) {
+  let number = Number(value);
+  return Number.isFinite(number) ? number : fallback;
+}
+
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+
+function normalizePoint(point = {}) {
+  return {
+    x: clamp(numberOr(point.x, 0), 0, 1),
+    y: clamp(numberOr(point.y, 0), 0, 1),
+  };
+}
+
+function bool(value) {
+  return value === true;
+}
+
+export function createXRPanelFrame(panel = {}, options = {}) {
+  let handleSize = clamp(numberOr(options.handleSize, 0.055), 0.02, 0.16);
+  let headerHeight = clamp(numberOr(options.headerHeight, 0.09), 0.04, 0.22);
+  let actionSize = clamp(numberOr(options.actionSize, handleSize), 0.02, 0.16);
+  let state = options.state || panel.state || {};
+  return {
+    version: 'xr-panel-frame-v1',
+    panelId: String(panel.id || ''),
+    component: panel.component || panel.panelType || 'panel',
+    tokens: {
+      background: 'var(--sn-xr-panel-bg)',
+      border: 'var(--sn-xr-panel-border)',
+      radius: 'var(--sn-xr-panel-radius)',
+      shadow: 'var(--sn-xr-panel-shadow)',
+      pointer: 'var(--sn-xr-pointer-color)',
+    },
+    zones: {
+      move: { x: 0, y: 0, width: 1, height: headerHeight },
+      content: { x: handleSize, y: headerHeight, width: 1 - handleSize * 2, height: 1 - headerHeight - handleSize },
+      resize: {
+        north: { x: handleSize, y: 0, width: 1 - handleSize * 2, height: handleSize },
+        east: { x: 1 - handleSize, y: headerHeight, width: handleSize, height: 1 - headerHeight - handleSize },
+        south: { x: handleSize, y: 1 - handleSize, width: 1 - handleSize * 2, height: handleSize },
+        west: { x: 0, y: headerHeight, width: handleSize, height: 1 - headerHeight - handleSize },
+        northWest: { x: 0, y: 0, width: handleSize, height: handleSize },
+        northEast: { x: 1 - handleSize, y: 0, width: handleSize, height: handleSize },
+        southEast: { x: 1 - handleSize, y: 1 - handleSize, width: handleSize, height: handleSize },
+        southWest: { x: 0, y: 1 - handleSize, width: handleSize, height: handleSize },
+      },
+      actions: {
+        pin: { x: 1 - actionSize * 3, y: 0, width: actionSize, height: headerHeight },
+        reset: { x: 1 - actionSize * 2, y: 0, width: actionSize, height: headerHeight },
+        close: { x: 1 - actionSize, y: 0, width: actionSize, height: headerHeight },
+      },
+    },
+    state: {
+      hovered: bool(state.hovered || options.hovered),
+      selected: bool(state.selected || options.selected),
+      dragging: bool(state.dragging || options.dragging),
+      resizing: bool(state.resizing || options.resizing),
+      pinned: bool(state.pinned || options.pinned),
+    },
+  };
+}
+
+function contains(zone, point) {
+  return point.x >= zone.x &&
+    point.x <= zone.x + zone.width &&
+    point.y >= zone.y &&
+    point.y <= zone.y + zone.height;
+}
+
+export function hitTestXRPanelFrame(frameOrPanel = {}, point = {}, options = {}) {
+  let frame = frameOrPanel.version === 'xr-panel-frame-v1'
+    ? frameOrPanel
+    : createXRPanelFrame(frameOrPanel, options);
+  let normalizedPoint = normalizePoint(point);
+
+  for (let [action, zone] of Object.entries(frame.zones.actions || {})) {
+    if (contains(zone, normalizedPoint)) {
+      return {
+        version: 'xr-panel-frame-target-v1',
+        panelId: frame.panelId,
+        zone: 'action',
+        action,
+        operation: 'action',
+        handle: null,
+        point: normalizedPoint,
+      };
+    }
+  }
+
+  for (let [handle, zone] of Object.entries(frame.zones.resize || {})) {
+    if (contains(zone, normalizedPoint)) {
+      return {
+        version: 'xr-panel-frame-target-v1',
+        panelId: frame.panelId,
+        zone: 'resize',
+        action: null,
+        operation: 'resize',
+        handle,
+        point: normalizedPoint,
+      };
+    }
+  }
+
+  if (contains(frame.zones.move, normalizedPoint)) {
+    return {
+      version: 'xr-panel-frame-target-v1',
+      panelId: frame.panelId,
+      zone: 'move',
+      action: null,
+      operation: 'move',
+      handle: null,
+      point: normalizedPoint,
+    };
+  }
+
+  return {
+    version: 'xr-panel-frame-target-v1',
+    panelId: frame.panelId,
+    zone: 'content',
+    action: null,
+    operation: options.defaultContentOperation || 'focus',
+    handle: null,
+    point: normalizedPoint,
+  };
+}

package/xr/panel-host.js

@@ -0,0 +1,267 @@
+import { createXRPanelContentViewport } from './layout-projection.js';
+import { createXRPanelPointerTarget } from './pointer.js';
+
+function defaultComponentResolver(name) {
+  return name;
+}
+
+function defaultPropsResolver(node = {}, panel = {}) {
+  return {
+    ...(panel.state || {}),
+    ...(node.props || {}),
+  };
+}
+
+function toKebabName(value) {
+  return String(value || '').trim();
+}
+
+function applyAttributes(element, attrs = {}) {
+  for (let [name, value] of Object.entries(attrs || {})) {
+    if (value === false || value == null) continue;
+    if (value === true) {
+      element.setAttribute(name, '');
+    } else {
+      element.setAttribute(name, String(value));
+    }
+  }
+}
+
+function applyProps(element, props = {}) {
+  for (let [name, value] of Object.entries(props || {})) {
+    element[name] = value;
+  }
+}
+
+function applyThemeScope(element, node = {}, panel = {}) {
+  let scope = node.theme?.name || node.themeScope || panel.themeScope;
+  if (scope) {
+    element.dataset.themeScope = scope;
+    element.setAttribute('data-theme-scope', scope);
+  }
+}
+
+function setStyleProperty(element, name, value) {
+  if (!element?.style) return;
+  if (typeof element.style.setProperty === 'function') {
+    element.style.setProperty(name, value);
+    return;
+  }
+  element.style[name] = value;
+}
+
+function applyPanelViewport(element, panel) {
+  let viewport = panel.contentViewport || createXRPanelContentViewport(panel);
+  setStyleProperty(element, '--sn-xr-content-width', `${viewport.width}px`);
+  setStyleProperty(element, '--sn-xr-content-height', `${viewport.height}px`);
+  setStyleProperty(element, '--sn-xr-content-scale', String(viewport.scale));
+  setStyleProperty(element, '--sn-xr-panel-meter-width', `${panel.size?.[0] || 0}m`);
+  setStyleProperty(element, '--sn-xr-panel-meter-height', `${panel.size?.[1] || 0}m`);
+  setStyleProperty(element, 'width', `${viewport.width}px`);
+  setStyleProperty(element, 'height', `${viewport.height}px`);
+  return viewport;
+}
+
+function appendChildren(host, node, context) {
+  for (let child of node.children || []) {
+    host.append(createComponentElement(child, context));
+  }
+}
+
+function fallbackElement(documentRef, panel, reason) {
+  let element = documentRef.createElement('section');
+  element.className = 'sn-xr-panel-fallback';
+  element.dataset.reason = reason;
+  element.textContent = `XR panel fallback: ${reason}`;
+  element.setAttribute('role', 'note');
+  return element;
+}
+
+function resolveComponentTarget(node, panel, context) {
+  let requested = node.component || panel.component || panel.panelType;
+  let resolved = context.componentResolver(requested, node, panel);
+  if (typeof resolved === 'string') {
+    return { tagName: toKebabName(resolved), ComponentClass: null };
+  }
+  if (typeof resolved === 'function') {
+    return { tagName: toKebabName(resolved.tagName || node.component || panel.component), ComponentClass: resolved };
+  }
+  if (resolved && typeof resolved === 'object') {
+    return {
+      tagName: toKebabName(resolved.tagName || resolved.name || node.component || panel.component),
+      ComponentClass: typeof resolved.ComponentClass === 'function' ? resolved.ComponentClass : null,
+    };
+  }
+  return { tagName: '', ComponentClass: null };
+}
+
+function createComponentElement(node, context, panel = node) {
+  let documentRef = context.document;
+  let target = resolveComponentTarget(node, panel, context);
+  if (!target.tagName) {
+    return fallbackElement(documentRef, panel, 'component-unresolved');
+  }
+  if (
+    target.ComponentClass &&
+    typeof context.customElements?.define === 'function' &&
+    !context.customElements.get(target.tagName)
+  ) {
+    context.customElements.define(target.tagName, target.ComponentClass);
+  }
+
+  let element = documentRef.createElement(target.tagName);
+  applyProps(element, context.propsResolver(node, panel));
+  applyAttributes(element, node.attrs);
+  applyThemeScope(element, node, panel);
+  if (Array.isArray(node.children) && node.children.length) {
+    appendChildren(element, node, context);
+  }
+  return element;
+}
+
+function createContext(options = {}) {
+  let documentRef = options.document || globalThis.document;
+  if (!documentRef?.createElement) {
+    throw new Error('createXRPanelHost requires a document with createElement().');
+  }
+  return {
+    document: documentRef,
+    globalThis: options.globalThis || documentRef.defaultView || globalThis,
+    customElements: options.customElements || documentRef.defaultView?.customElements || globalThis.customElements,
+    componentResolver: options.componentResolver || defaultComponentResolver,
+    propsResolver: options.propsResolver || defaultPropsResolver,
+  };
+}
+
+function createHostEvent(context, type, detail) {
+  let EventCtor = context.globalThis?.CustomEvent;
+  if (typeof EventCtor === 'function') {
+    return new EventCtor(type, { bubbles: true, composed: true, detail });
+  }
+  return {
+    type,
+    bubbles: true,
+    composed: true,
+    detail,
+  };
+}
+
+function createPointerDomEvent(context, pointerEvent, target) {
+  let EventCtor = context.globalThis?.PointerEvent;
+  if (typeof EventCtor !== 'function') return null;
+  return new EventCtor(pointerEvent.type || 'pointermove', {
+    bubbles: false,
+    composed: false,
+    clientX: target.contentPoint.x,
+    clientY: target.contentPoint.y,
+    buttons: pointerEvent.buttons?.primary ? 1 : 0,
+    button: pointerEvent.buttons?.primary ? 0 : -1,
+    pointerType: pointerEvent.source === 'mouse-fallback' ? 'mouse' : 'xr',
+    isPrimary: true,
+  });
+}
+
+export function createXRPanelHost(options = {}) {
+  let context = createContext(options);
+  let panels = new Map();
+  let scene = null;
+  let themeSnapshot = options.themeSnapshot || null;
+  let dispatchDepth = 0;
+
+  function getState() {
+    return {
+      scene,
+      themeSnapshot,
+      mounted: panels.size,
+      panelIds: [...panels.keys()],
+    };
+  }
+
+  function setScene(nextScene, sceneOptions = {}) {
+    scene = nextScene || null;
+    themeSnapshot = sceneOptions.themeSnapshot || themeSnapshot || null;
+    panels.clear();
+    return getState();
+  }
+
+  function mountPanel(panel, container) {
+    if (!panel || !container?.replaceChildren) {
+      throw new Error('mountPanel(panel, container) requires a panel and a DOM container.');
+    }
+
+    let node = panel.layoutNode || panel;
+    let element = createComponentElement(node, context, panel);
+    element.dataset.xrPanelId = panel.id;
+    element.classList.add('sn-xr-panel-live-root');
+    let contentViewport = applyPanelViewport(element, panel);
+    applyPanelViewport(container, { ...panel, contentViewport });
+    container.replaceChildren(element);
+    panels.set(panel.id, { panel, container, element, contentViewport });
+    return element;
+  }
+
+  function unmountPanel(panelId) {
+    let record = panels.get(panelId);
+    if (!record) return false;
+    record.container.replaceChildren();
+    panels.delete(panelId);
+    return true;
+  }
+
+  function getPanelElement(panelId) {
+    return panels.get(panelId)?.element || null;
+  }
+
+  function dispatchPointerEvent(pointerEvent, options = {}) {
+    if (!pointerEvent) return { ok: false, reason: 'missing-pointer-event' };
+    let panelId = pointerEvent.targetId || pointerEvent.panelId;
+    if (dispatchDepth > 0) {
+      return { ok: false, reason: 'pointer-dispatch-reentrant', panelId };
+    }
+    let record = panels.get(panelId);
+    if (!record?.element?.dispatchEvent) {
+      return { ok: false, reason: 'panel-not-mounted', panelId };
+    }
+    let target = createXRPanelPointerTarget({
+      panelId,
+      point: pointerEvent.point,
+      panel: record.panel,
+    }, {
+      ...options,
+      contentViewport: record.contentViewport,
+      source: pointerEvent.source,
+    });
+    let detail = {
+      ...pointerEvent,
+      targetId: panelId,
+      contentPoint: target.contentPoint,
+      contentViewport: target.contentViewport,
+    };
+    let domEvent = createPointerDomEvent(context, detail, target);
+    dispatchDepth += 1;
+    try {
+      if (domEvent) {
+        domEvent.xrPanelPointer = detail;
+        record.element.dispatchEvent(domEvent);
+      }
+      record.element.dispatchEvent(createHostEvent(context, 'xr-panel-pointer', detail));
+    } finally {
+      dispatchDepth -= 1;
+    }
+    return {
+      ok: true,
+      panelId,
+      target,
+      dispatched: domEvent ? [detail.type, 'xr-panel-pointer'] : ['xr-panel-pointer'],
+    };
+  }
+
+  return {
+    setScene,
+    mountPanel,
+    unmountPanel,
+    getPanelElement,
+    dispatchPointerEvent,
+    getState,
+  };
+}

package/xr/pointer.js

@@ -0,0 +1,258 @@
+import { createXRPanelContentViewport } from './layout-projection.js';
+
+function dot(a, b) {
+  return a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+}
+
+function subtract(a, b) {
+  return [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
+}
+
+function add(a, b) {
+  return [a[0] + b[0], a[1] + b[1], a[2] + b[2]];
+}
+
+function scale(v, s) {
+  return [v[0] * s, v[1] * s, v[2] * s];
+}
+
+function normalize(v) {
+  let length = Math.hypot(v[0], v[1], v[2]);
+  if (!length) return [0, 0, -1];
+  return [v[0] / length, v[1] / length, v[2] / length];
+}
+
+function numberOr(value, fallback) {
+  let number = Number(value);
+  return Number.isFinite(number) ? number : fallback;
+}
+
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+
+function roundMetric(value) {
+  return Math.round(value * 1_000_000) / 1_000_000;
+}
+
+function degToRad(value) {
+  return Number(value || 0) * Math.PI / 180;
+}
+
+function panelAxes(panel) {
+  let yaw = degToRad(panel.rotation?.[1] || 0);
+  let right = [Math.cos(yaw), 0, -Math.sin(yaw)];
+  let up = [0, 1, 0];
+  let normal = normalize([Math.sin(yaw), 0, Math.cos(yaw)]);
+  return { right, up, normal };
+}
+
+export function hitTestXRPanel(ray, panel) {
+  if (!ray || !panel) return null;
+  let origin = ray.origin || [0, 0, 0];
+  let direction = normalize(ray.direction || [0, 0, -1]);
+  let center = panel.position || [0, 0, -1];
+  let [width, height] = panel.size || [1, 1];
+  let { right, up, normal } = panelAxes(panel);
+  let denom = dot(normal, direction);
+  if (Math.abs(denom) < 0.000001) return null;
+  let t = dot(normal, subtract(center, origin)) / denom;
+  if (t < 0) return null;
+
+  let hitPoint = add(origin, scale(direction, t));
+  let local = subtract(hitPoint, center);
+  let xMeters = dot(local, right);
+  let yMeters = dot(local, up);
+  let x = xMeters / width + 0.5;
+  let y = 0.5 - yMeters / height;
+  if (x < 0 || x > 1 || y < 0 || y > 1) return null;
+
+  return {
+    panelId: panel.id,
+    point: { x, y },
+    worldPoint: hitPoint,
+    distance: t,
+    panel,
+  };
+}
+
+export function hitTestXRPanels(ray, panels = []) {
+  return panels
+    .map((panel) => hitTestXRPanel(ray, panel))
+    .filter(Boolean)
+    .sort((a, b) => a.distance - b.distance)[0] || null;
+}
+
+export function createXRPointerEvent(hit, input = {}, type = 'pointermove') {
+  if (!hit) return null;
+  let target = createXRPanelPointerTarget(hit, input);
+  return {
+    type,
+    source: input.source || 'xr-controller',
+    targetId: hit.panelId,
+    point: hit.point,
+    contentPoint: target.contentPoint,
+    contentViewport: target.contentViewport,
+    worldPoint: hit.worldPoint,
+    distance: hit.distance,
+    buttons: {
+      primary: Boolean(input.primary),
+      secondary: Boolean(input.secondary),
+    },
+    ray: input.ray || null,
+  };
+}
+
+export function createXRPanelPointerTarget(hit, options = {}) {
+  if (!hit) return null;
+  let panel = options.panel || hit.panel || {};
+  let point = {
+    x: clamp(numberOr(hit.point?.x, 0), 0, 1),
+    y: clamp(numberOr(hit.point?.y, 0), 0, 1),
+  };
+  let contentViewport = options.contentViewport || panel.contentViewport || createXRPanelContentViewport(panel);
+  return {
+    panelId: String(hit.panelId || panel.id || ''),
+    targetId: String(hit.panelId || panel.id || ''),
+    point,
+    contentPoint: {
+      x: roundMetric(point.x * contentViewport.width),
+      y: roundMetric(point.y * contentViewport.height),
+    },
+    contentViewport,
+    source: options.source || 'xr-controller',
+  };
+}
+
+export function createXRPointerHit(panel, point = {}, options = {}) {
+  if (!panel) return null;
+  let normalizedPoint = {
+    x: clamp(numberOr(point.x, 0), 0, 1),
+    y: clamp(numberOr(point.y, 0), 0, 1),
+  };
+  return {
+    panelId: panel.id,
+    point: normalizedPoint,
+    worldPoint: options.worldPoint || null,
+    distance: numberOr(options.distance, 0),
+    panel,
+  };
+}
+
+export function createXRPointerHitFromDomEvent(panel, element, event, options = {}) {
+  if (!panel || !element?.getBoundingClientRect || !event) return null;
+  let rect = element.getBoundingClientRect();
+  return createXRPointerHit(panel, {
+    x: (numberOr(event.clientX, rect.left) - rect.left) / Math.max(rect.width, 1),
+    y: (numberOr(event.clientY, rect.top) - rect.top) / Math.max(rect.height, 1),
+  }, options);
+}
+
+export function createXRPointerRayFromDomEvent(event, element, options = {}) {
+  if (!event || !element?.getBoundingClientRect) return null;
+  let rect = element.getBoundingClientRect();
+  let width = Math.max(numberOr(rect.width, 0), 1);
+  let height = Math.max(numberOr(rect.height, 0), 1);
+  let normalizedX = (numberOr(event.clientX, rect.left) - rect.left) / width - 0.5;
+  let normalizedY = 0.5 - (numberOr(event.clientY, rect.top) - rect.top) / height;
+  let horizontalMeters = numberOr(options.horizontalMeters, 1.4);
+  let verticalMeters = numberOr(options.verticalMeters, 0.72);
+  let eyeHeight = numberOr(options.eyeHeight, 1.32);
+  let horizontalSkew = numberOr(options.horizontalSkew, 0.28);
+  let verticalSkew = numberOr(options.verticalSkew, 0.18);
+
+  return {
+    version: 'xr-dom-pointer-ray-v1',
+    source: options.source || 'dom-pointer',
+    origin: [
+      roundMetric(normalizedX * horizontalMeters),
+      roundMetric(eyeHeight + normalizedY * verticalMeters),
+      numberOr(options.originZ, 0),
+    ],
+    direction: normalize([
+      -normalizedX * horizontalSkew,
+      -normalizedY * verticalSkew,
+      -1,
+    ]),
+    normalized: {
+      x: roundMetric(normalizedX + 0.5),
+      y: roundMetric(0.5 - normalizedY),
+    },
+  };
+}
+
+export function normalizeXRInputRay(inputSource, frame, referenceSpace) {
+  let pose = frame?.getPose?.(inputSource?.targetRaySpace, referenceSpace);
+  let transform = pose?.transform;
+  if (!transform) return null;
+  let matrix = transform.matrix;
+  if (Array.isArray(matrix) || ArrayBuffer.isView(matrix)) {
+    return {
+      origin: [matrix[12], matrix[13], matrix[14]],
+      direction: normalize([-matrix[8], -matrix[9], -matrix[10]]),
+    };
+  }
+  return null;
+}
+
+function inputSourceKind(inputSource = {}) {
+  let mode = inputSource.targetRayMode || '';
+  let profiles = Array.isArray(inputSource.profiles) ? inputSource.profiles.join(' ') : '';
+  if (inputSource.hand) return 'hand';
+  if (mode === 'gaze') return 'gaze';
+  if (mode === 'screen') return 'screen';
+  if (/hand|pinch/i.test(profiles)) return 'hand';
+  return 'controller';
+}
+
+export function createXRInputSourceSummary(inputSource = {}, options = {}) {
+  let profiles = Array.isArray(inputSource.profiles) ? [...inputSource.profiles].map(String) : [];
+  return {
+    version: 'xr-input-source-summary-v1',
+    id: options.id || inputSource.id || null,
+    handedness: inputSource.handedness || 'none',
+    targetRayMode: inputSource.targetRayMode || null,
+    kind: inputSourceKind(inputSource),
+    primary: options.primary === true,
+    profiles,
+    capabilities: {
+      targetRay: Boolean(inputSource.targetRaySpace),
+      grip: Boolean(inputSource.gripSpace),
+      hand: Boolean(inputSource.hand),
+      gamepad: Boolean(inputSource.gamepad),
+      squeeze: Boolean(inputSource.gamepad || inputSource.profiles?.length),
+    },
+  };
+}
+
+function inputScore(summary, options = {}) {
+  let score = 0;
+  if (summary.targetRayMode === 'tracked-pointer') score += 40;
+  if (summary.kind === 'controller') score += options.preferHands ? 8 : 20;
+  if (summary.kind === 'hand') score += options.preferHands ? 24 : 12;
+  if (summary.handedness === (options.dominantHand || 'right')) score += 8;
+  if (summary.capabilities.targetRay) score += 8;
+  if (summary.capabilities.gamepad) score += 4;
+  return score;
+}
+
+export function selectPrimaryXRInputSource(inputSources = [], options = {}) {
+  let sources = [...inputSources].map((source, index) => ({
+    source,
+    summary: createXRInputSourceSummary(source, { id: source?.id || `input-${index}` }),
+  }));
+  let selected = sources
+    .map((item) => ({ ...item, score: inputScore(item.summary, options) }))
+    .sort((a, b) => b.score - a.score)[0] || null;
+  return {
+    version: 'xr-primary-input-source-v1',
+    selected: selected ? {
+      ...selected.summary,
+      primary: true,
+      score: selected.score,
+    } : null,
+    source: selected?.source || null,
+    summaries: sources.map((item) => item.summary),
+    reason: selected ? 'best-target-ray-score' : 'no-input-sources',
+  };
+}