@realitycollective/xrblocks-uiextensions 0.1.0-preview.0

package/dist/panel-document.js

@@ -0,0 +1,72 @@
+/**
+ * UixPanelDocument - minimal spatial hosting for interpreted UIKitML on
+ * plain three.js (the XR Blocks scene graph is plain three.js).
+ *
+ * Mirrors the behaviour of IWSDK's UIKitDocument where it matters to the
+ * core: a `Group` wrapping the interpreted component tree, per-frame
+ * `update`, scale-to-fit via {@link fitScale}, and `getElementById` backed
+ * by the components' `userData.id` (where UIKitML places markup ids -
+ * the same `userData` surface the core's `UixElement` contract reads).
+ */
+import { Group } from 'three';
+import { interpret } from '@pmndrs/uikitml';
+import { fitScale } from './scale-math.js';
+function naturalSize(component) {
+    const value = component.size?.value;
+    if (Array.isArray(value) && value.length >= 2) {
+        return [value[0], value[1]];
+    }
+    return [undefined, undefined];
+}
+export class UixPanelDocument extends Group {
+    rootComponent;
+    targetWidth = 1;
+    targetHeight = 1;
+    unsubscribeSize;
+    constructor(configJson, kit) {
+        super();
+        const component = interpret(configJson, kit);
+        if (!component) {
+            throw new Error('UIKitML config produced no interpretable root element.');
+        }
+        this.rootComponent = component;
+        this.add(this.rootComponent);
+        // Re-fit whenever layout measures the panel (size arrives async).
+        this.unsubscribeSize = this.rootComponent.size?.subscribe?.(() => this.applyScale());
+    }
+    get root() {
+        return this.rootComponent;
+    }
+    getElementById(id) {
+        let found;
+        this.rootComponent.traverse((object) => {
+            if (!found && object.userData?.['id'] === id) {
+                found = object;
+            }
+        });
+        return found;
+    }
+    setTargetDimensions(width, height) {
+        this.targetWidth = width;
+        this.targetHeight = height;
+        this.applyScale();
+    }
+    /** Drive per-frame - uikit expects milliseconds. */
+    update(deltaSeconds) {
+        this.rootComponent.update?.(deltaSeconds * 1000);
+    }
+    dispose() {
+        this.unsubscribeSize?.();
+        this.unsubscribeSize = undefined;
+        this.removeFromParent();
+        this.rootComponent.dispose?.();
+    }
+    applyScale() {
+        const [naturalWidth, naturalHeight] = naturalSize(this.rootComponent);
+        const scale = fitScale(this.targetWidth, this.targetHeight, naturalWidth, naturalHeight);
+        if (scale !== undefined) {
+            this.scale.setScalar(scale);
+        }
+    }
+}
+//# sourceMappingURL=panel-document.js.map

package/dist/panel-document.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-document.js","sourceRoot":"","sources":["../src/panel-document.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * UixPanelDocument - minimal spatial hosting for interpreted UIKitML on\n * plain three.js (the XR Blocks scene graph is plain three.js).\n *\n * Mirrors the behaviour of IWSDK's UIKitDocument where it matters to the\n * core: a `Group` wrapping the interpreted component tree, per-frame\n * `update`, scale-to-fit via {@link fitScale}, and `getElementById` backed\n * by the components' `userData.id` (where UIKitML places markup ids -\n * the same `userData` surface the core's `UixElement` contract reads).\n */\nimport { Group, type Object3D } from 'three';\nimport { interpret, type Kit } from '@pmndrs/uikitml';\nimport type { PanelHandle, UixElement } from '@realitycollective/webxr-uiextensions';\nimport { fitScale } from './scale-math.js';\n\n/** The slice of a uikit component this adapter relies on. */\ninterface UikitComponentLike extends Object3D {\n  update?(deltaMs: number): void;\n  size?: {\n    value: unknown;\n    subscribe?(listener: () => void): () => void;\n  };\n  dispose?(): void;\n}\n\nfunction naturalSize(\n  component: UikitComponentLike,\n): [number | undefined, number | undefined] {\n  const value = component.size?.value;\n  if (Array.isArray(value) && value.length >= 2) {\n    return [value[0] as number, value[1] as number];\n  }\n  return [undefined, undefined];\n}\n\nexport class UixPanelDocument extends Group implements PanelHandle {\n  readonly rootComponent: UikitComponentLike;\n  private targetWidth = 1;\n  private targetHeight = 1;\n  private unsubscribeSize: (() => void) | undefined;\n\n  constructor(configJson: unknown, kit?: Kit) {\n    super();\n    const component = interpret(\n      configJson as Parameters<typeof interpret>[0],\n      kit,\n    );\n    if (!component) {\n      throw new Error('UIKitML config produced no interpretable root element.');\n    }\n    this.rootComponent = component as unknown as UikitComponentLike;\n    this.add(this.rootComponent);\n    // Re-fit whenever layout measures the panel (size arrives async).\n    this.unsubscribeSize = this.rootComponent.size?.subscribe?.(() =>\n      this.applyScale(),\n    );\n  }\n\n  get root(): UixElement {\n    return this.rootComponent as unknown as UixElement;\n  }\n\n  getElementById(id: string): UixElement | undefined {\n    let found: UixElement | undefined;\n    this.rootComponent.traverse((object: Object3D) => {\n      if (!found && object.userData?.['id'] === id) {\n        found = object as unknown as UixElement;\n      }\n    });\n    return found;\n  }\n\n  setTargetDimensions(width: number, height: number): void {\n    this.targetWidth = width;\n    this.targetHeight = height;\n    this.applyScale();\n  }\n\n  /** Drive per-frame - uikit expects milliseconds. */\n  update(deltaSeconds: number): void {\n    this.rootComponent.update?.(deltaSeconds * 1000);\n  }\n\n  dispose(): void {\n    this.unsubscribeSize?.();\n    this.unsubscribeSize = undefined;\n    this.removeFromParent();\n    this.rootComponent.dispose?.();\n  }\n\n  private applyScale(): void {\n    const [naturalWidth, naturalHeight] = naturalSize(this.rootComponent);\n    const scale = fitScale(\n      this.targetWidth,\n      this.targetHeight,\n      naturalWidth,\n      naturalHeight,\n    );\n    if (scale !== undefined) {\n      this.scale.setScalar(scale);\n    }\n  }\n}\n"]}

package/dist/pointer-forward.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Minimal pointer forwarding - turns engine raycast hits into uikit events.
+ *
+ * XR Blocks (and any plain three.js app) raycasts with its own machinery;
+ * uikit components are ordinary three.js Meshes, so they appear in those
+ * intersections. This module picks the correct interactive element from a
+ * hit list and dispatches DOM-ish events to it. v1 forwards clicks and
+ * hover enter/leave - enough for window chrome and `data-uix` controls.
+ * (Full pointer capture / poke semantics: use `@pmndrs/pointer-events`,
+ * which is what IWSDK itself builds on.)
+ */
+import type { Object3D } from 'three';
+/** The event surface uikit components expose (three.js EventDispatcher). */
+interface InteractiveLike {
+    dispatchEvent?(event: {
+        type: string;
+        [key: string]: unknown;
+    }): void;
+    userData?: Record<string, unknown>;
+    parent?: unknown;
+}
+/**
+ * Walk up from a hit object to the nearest ancestor that can receive
+ * events and belongs to a uikit tree (identified by the `dataUid` UIKitML
+ * stamps into userData). Pure - testable with stub objects.
+ */
+export declare function pickInteractive(hit: unknown): InteractiveLike | undefined;
+/**
+ * Dispatch a click to the interactive element (if any) under the first hit
+ * of an intersection list (`Raycaster.intersectObject(panel, true)` order).
+ * Returns the element that received the event, for host-side bookkeeping.
+ */
+export declare function forwardClick(intersections: ReadonlyArray<{
+    object: Object3D;
+}>): InteractiveLike | undefined;
+export {};

package/dist/pointer-forward.js

@@ -0,0 +1,32 @@
+/**
+ * Walk up from a hit object to the nearest ancestor that can receive
+ * events and belongs to a uikit tree (identified by the `dataUid` UIKitML
+ * stamps into userData). Pure - testable with stub objects.
+ */
+export function pickInteractive(hit) {
+    let current = hit;
+    while (current) {
+        if (typeof current.dispatchEvent === 'function' &&
+            current.userData &&
+            current.userData['dataUid'] !== undefined) {
+            return current;
+        }
+        current = current.parent;
+    }
+    return undefined;
+}
+/**
+ * Dispatch a click to the interactive element (if any) under the first hit
+ * of an intersection list (`Raycaster.intersectObject(panel, true)` order).
+ * Returns the element that received the event, for host-side bookkeeping.
+ */
+export function forwardClick(intersections) {
+    const first = intersections[0];
+    if (!first) {
+        return undefined;
+    }
+    const target = pickInteractive(first.object);
+    target?.dispatchEvent?.({ type: 'click' });
+    return target;
+}
+//# sourceMappingURL=pointer-forward.js.map

package/dist/pointer-forward.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pointer-forward.js","sourceRoot":"","sources":["../src/pointer-forward.ts"],"names":[],"mappings":"AAoBA;;;;GAIG;AACH,MAAM,UAAU,eAAe,CAAC,GAAY;IAC1C,IAAI,OAAO,GAAG,GAAkC,CAAC;IACjD,OAAO,OAAO,EAAE,CAAC;QACf,IACE,OAAO,OAAO,CAAC,aAAa,KAAK,UAAU;YAC3C,OAAO,CAAC,QAAQ;YAChB,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,KAAK,SAAS,EACzC,CAAC;YACD,OAAO,OAAO,CAAC;QACjB,CAAC;QACD,OAAO,GAAG,OAAO,CAAC,MAAqC,CAAC;IAC1D,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAC1B,aAAkD;IAElD,MAAM,KAAK,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC;IAC/B,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,SAAS,CAAC;IACnB,CAAC;IACD,MAAM,MAAM,GAAG,eAAe,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC7C,MAAM,EAAE,aAAa,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;IAC3C,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["/**\n * Minimal pointer forwarding - turns engine raycast hits into uikit events.\n *\n * XR Blocks (and any plain three.js app) raycasts with its own machinery;\n * uikit components are ordinary three.js Meshes, so they appear in those\n * intersections. This module picks the correct interactive element from a\n * hit list and dispatches DOM-ish events to it. v1 forwards clicks and\n * hover enter/leave - enough for window chrome and `data-uix` controls.\n * (Full pointer capture / poke semantics: use `@pmndrs/pointer-events`,\n * which is what IWSDK itself builds on.)\n */\nimport type { Object3D } from 'three';\n\n/** The event surface uikit components expose (three.js EventDispatcher). */\ninterface InteractiveLike {\n  dispatchEvent?(event: { type: string; [key: string]: unknown }): void;\n  userData?: Record<string, unknown>;\n  parent?: unknown;\n}\n\n/**\n * Walk up from a hit object to the nearest ancestor that can receive\n * events and belongs to a uikit tree (identified by the `dataUid` UIKitML\n * stamps into userData). Pure - testable with stub objects.\n */\nexport function pickInteractive(hit: unknown): InteractiveLike | undefined {\n  let current = hit as InteractiveLike | undefined;\n  while (current) {\n    if (\n      typeof current.dispatchEvent === 'function' &&\n      current.userData &&\n      current.userData['dataUid'] !== undefined\n    ) {\n      return current;\n    }\n    current = current.parent as InteractiveLike | undefined;\n  }\n  return undefined;\n}\n\n/**\n * Dispatch a click to the interactive element (if any) under the first hit\n * of an intersection list (`Raycaster.intersectObject(panel, true)` order).\n * Returns the element that received the event, for host-side bookkeeping.\n */\nexport function forwardClick(\n  intersections: ReadonlyArray<{ object: Object3D }>,\n): InteractiveLike | undefined {\n  const first = intersections[0];\n  if (!first) {\n    return undefined;\n  }\n  const target = pickInteractive(first.object);\n  target?.dispatchEvent?.({ type: 'click' });\n  return target;\n}\n"]}

package/dist/renderer-setup.d.ts

@@ -0,0 +1,6 @@
+/** The slice of `WebGLRenderer` this needs - keeps the helper testable. */
+export interface UikitRenderer {
+    localClippingEnabled: boolean;
+    setTransparentSort(method: (a: unknown, b: unknown) => number): void;
+}
+export declare function configureRendererForUikit(renderer: UikitRenderer): void;

package/dist/renderer-setup.js

@@ -0,0 +1,29 @@
+/**
+ * Renderer configuration required by uikit.
+ *
+ * uikit draws every panel - background plates, borders, images AND text
+ * glyphs - as TRANSPARENT meshes, and relies on `renderOrder` to stack them
+ * correctly. three.js's default transparent sort orders by distance to the
+ * camera, which is meaningless for coplanar UI layers: at grazing angles or
+ * close range the panel background can sort in front of its own text, so
+ * labels silently vanish while the panel still renders. `reversePainterSortStable`
+ * sorts by `renderOrder` instead, which is what uikit assigns.
+ *
+ * IWSDK applies exactly this configuration in its own UI system, which is
+ * why panels look right there; any hand-rolled three.js host (desktop, XR
+ * Blocks, tests) must do the same or it will hit the disappearing-text bug.
+ *
+ * Call once, right after creating the renderer:
+ *
+ *   const renderer = new WebGLRenderer({ antialias: true });
+ *   configureRendererForUikit(renderer);
+ */
+import { reversePainterSortStable } from '@pmndrs/uikit';
+export function configureRendererForUikit(renderer) {
+    // Stack UI layers by renderOrder, not by camera distance.
+    renderer.setTransparentSort(reversePainterSortStable);
+    // uikit clips panel content (scroll areas, overflow) with local clipping
+    // planes; three.js ignores those unless this is enabled.
+    renderer.localClippingEnabled = true;
+}
+//# sourceMappingURL=renderer-setup.js.map

package/dist/renderer-setup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer-setup.js","sourceRoot":"","sources":["../src/renderer-setup.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,UAAU,yBAAyB,CAAC,QAAuB;IAC/D,0DAA0D;IAC1D,QAAQ,CAAC,kBAAkB,CACzB,wBAAyE,CAC1E,CAAC;IACF,yEAAyE;IACzE,yDAAyD;IACzD,QAAQ,CAAC,oBAAoB,GAAG,IAAI,CAAC;AACvC,CAAC","sourcesContent":["/**\n * Renderer configuration required by uikit.\n *\n * uikit draws every panel - background plates, borders, images AND text\n * glyphs - as TRANSPARENT meshes, and relies on `renderOrder` to stack them\n * correctly. three.js's default transparent sort orders by distance to the\n * camera, which is meaningless for coplanar UI layers: at grazing angles or\n * close range the panel background can sort in front of its own text, so\n * labels silently vanish while the panel still renders. `reversePainterSortStable`\n * sorts by `renderOrder` instead, which is what uikit assigns.\n *\n * IWSDK applies exactly this configuration in its own UI system, which is\n * why panels look right there; any hand-rolled three.js host (desktop, XR\n * Blocks, tests) must do the same or it will hit the disappearing-text bug.\n *\n * Call once, right after creating the renderer:\n *\n *   const renderer = new WebGLRenderer({ antialias: true });\n *   configureRendererForUikit(renderer);\n */\nimport { reversePainterSortStable } from '@pmndrs/uikit';\n\n/** The slice of `WebGLRenderer` this needs - keeps the helper testable. */\nexport interface UikitRenderer {\n  localClippingEnabled: boolean;\n  setTransparentSort(method: (a: unknown, b: unknown) => number): void;\n}\n\nexport function configureRendererForUikit(renderer: UikitRenderer): void {\n  // Stack UI layers by renderOrder, not by camera distance.\n  renderer.setTransparentSort(\n    reversePainterSortStable as unknown as (a: unknown, b: unknown) => number,\n  );\n  // uikit clips panel content (scroll areas, overflow) with local clipping\n  // planes; three.js ignores those unless this is enabled.\n  renderer.localClippingEnabled = true;\n}\n"]}

package/dist/scale-math.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Panel fit math - mirrors the IWSDK adapter's behaviour exactly so the same
+ * UIKitML renders at the same world size on both platforms: UIKit units are
+ * centimeters; the panel group is uniformly scaled to fit the requested
+ * width × height (meters) while preserving aspect ratio.
+ */
+/**
+ * Uniform scale that fits a panel of `naturalWidth × naturalHeight` (UIKit
+ * cm units) into `targetWidth × targetHeight` meters. Returns undefined
+ * when any input is not yet usable (layout not measured, zero target).
+ */
+export declare function fitScale(targetWidth: number, targetHeight: number, naturalWidth: number | undefined, naturalHeight: number | undefined): number | undefined;

package/dist/scale-math.js

@@ -0,0 +1,25 @@
+/**
+ * Panel fit math - mirrors the IWSDK adapter's behaviour exactly so the same
+ * UIKitML renders at the same world size on both platforms: UIKit units are
+ * centimeters; the panel group is uniformly scaled to fit the requested
+ * width × height (meters) while preserving aspect ratio.
+ */
+/**
+ * Uniform scale that fits a panel of `naturalWidth × naturalHeight` (UIKit
+ * cm units) into `targetWidth × targetHeight` meters. Returns undefined
+ * when any input is not yet usable (layout not measured, zero target).
+ */
+export function fitScale(targetWidth, targetHeight, naturalWidth, naturalHeight) {
+    if (!(targetWidth > 0) ||
+        !(targetHeight > 0) ||
+        typeof naturalWidth !== 'number' ||
+        typeof naturalHeight !== 'number' ||
+        !(naturalWidth > 0) ||
+        !(naturalHeight > 0)) {
+        return undefined;
+    }
+    const widthMeters = naturalWidth / 100;
+    const heightMeters = naturalHeight / 100;
+    return Math.min(targetWidth / widthMeters, targetHeight / heightMeters);
+}
+//# sourceMappingURL=scale-math.js.map

package/dist/scale-math.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scale-math.js","sourceRoot":"","sources":["../src/scale-math.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CACtB,WAAmB,EACnB,YAAoB,EACpB,YAAgC,EAChC,aAAiC;IAEjC,IACE,CAAC,CAAC,WAAW,GAAG,CAAC,CAAC;QAClB,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC;QACnB,OAAO,YAAY,KAAK,QAAQ;QAChC,OAAO,aAAa,KAAK,QAAQ;QACjC,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC;QACnB,CAAC,CAAC,aAAa,GAAG,CAAC,CAAC,EACpB,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IACD,MAAM,WAAW,GAAG,YAAY,GAAG,GAAG,CAAC;IACvC,MAAM,YAAY,GAAG,aAAa,GAAG,GAAG,CAAC;IACzC,OAAO,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,WAAW,EAAE,YAAY,GAAG,YAAY,CAAC,CAAC;AAC1E,CAAC","sourcesContent":["/**\n * Panel fit math - mirrors the IWSDK adapter's behaviour exactly so the same\n * UIKitML renders at the same world size on both platforms: UIKit units are\n * centimeters; the panel group is uniformly scaled to fit the requested\n * width × height (meters) while preserving aspect ratio.\n */\n\n/**\n * Uniform scale that fits a panel of `naturalWidth × naturalHeight` (UIKit\n * cm units) into `targetWidth × targetHeight` meters. Returns undefined\n * when any input is not yet usable (layout not measured, zero target).\n */\nexport function fitScale(\n  targetWidth: number,\n  targetHeight: number,\n  naturalWidth: number | undefined,\n  naturalHeight: number | undefined,\n): number | undefined {\n  if (\n    !(targetWidth > 0) ||\n    !(targetHeight > 0) ||\n    typeof naturalWidth !== 'number' ||\n    typeof naturalHeight !== 'number' ||\n    !(naturalWidth > 0) ||\n    !(naturalHeight > 0)\n  ) {\n    return undefined;\n  }\n  const widthMeters = naturalWidth / 100;\n  const heightMeters = naturalHeight / 100;\n  return Math.min(targetWidth / widthMeters, targetHeight / heightMeters);\n}\n"]}

package/dist/xrblocks.d.ts

@@ -0,0 +1,37 @@
+/**
+ * XR Blocks glue.
+ *
+ * XR Blocks (https://github.com/google/xrblocks) is three.js-based: a
+ * Script's `scene`/`camera` are ordinary three.js objects, and `update()`
+ * runs per frame. This module binds a {@link UixWindowHost} to that shape
+ * WITHOUT importing `xrblocks` (loose structural types), so the package
+ * works identically in an XR Blocks Script and in any hand-rolled three.js
+ * WebXR app.
+ *
+ * Typical XR Blocks usage:
+ *
+ *   import * as xb from 'xrblocks';
+ *   import { connectUIExtensions } from '@realitycollective/xrblocks-uiextensions';
+ *
+ *   class MyScript extends xb.Script {
+ *     init() { this.uix = connectUIExtensions({ scene: this, camera: xb.core.camera }); }
+ *     update() { this.uix.update(xb.core.timer.getDelta()); }
+ *   }
+ */
+import { type Object3D, type PerspectiveCamera } from 'three';
+import type { HeadPoseSource } from '@realitycollective/webxr-uiextensions';
+import type { Kit } from '@pmndrs/uikitml';
+import { UixWindowHost } from './host.js';
+/** The slice of an XR Blocks Script / three.js app the host binds to. */
+export interface EngineContext {
+    /** Where windows are parented - an XR Blocks Script IS an Object3D. */
+    scene: Object3D;
+    /** The rendering camera; in XR the engine keeps it at the viewer pose. */
+    camera: Pick<PerspectiveCamera, 'getWorldPosition' | 'getWorldQuaternion'>;
+    /** Optional UIKitML component kit(s). */
+    kit?: Kit;
+}
+/** HeadPoseSource backed by a three.js camera. */
+export declare function cameraHeadPoseSource(camera: EngineContext['camera']): HeadPoseSource;
+/** Create a window host bound to an XR Blocks Script / three.js context. */
+export declare function connectUIExtensions(context: EngineContext): UixWindowHost;

package/dist/xrblocks.js

@@ -0,0 +1,46 @@
+/**
+ * XR Blocks glue.
+ *
+ * XR Blocks (https://github.com/google/xrblocks) is three.js-based: a
+ * Script's `scene`/`camera` are ordinary three.js objects, and `update()`
+ * runs per frame. This module binds a {@link UixWindowHost} to that shape
+ * WITHOUT importing `xrblocks` (loose structural types), so the package
+ * works identically in an XR Blocks Script and in any hand-rolled three.js
+ * WebXR app.
+ *
+ * Typical XR Blocks usage:
+ *
+ *   import * as xb from 'xrblocks';
+ *   import { connectUIExtensions } from '@realitycollective/xrblocks-uiextensions';
+ *
+ *   class MyScript extends xb.Script {
+ *     init() { this.uix = connectUIExtensions({ scene: this, camera: xb.core.camera }); }
+ *     update() { this.uix.update(xb.core.timer.getDelta()); }
+ *   }
+ */
+import { Quaternion, Vector3 } from 'three';
+import { UixWindowHost } from './host.js';
+/** HeadPoseSource backed by a three.js camera. */
+export function cameraHeadPoseSource(camera) {
+    const position = new Vector3();
+    const quaternion = new Quaternion();
+    return {
+        getHeadPose() {
+            camera.getWorldPosition(position);
+            camera.getWorldQuaternion(quaternion);
+            return {
+                position: [position.x, position.y, position.z],
+                quaternion: [quaternion.x, quaternion.y, quaternion.z, quaternion.w],
+            };
+        },
+    };
+}
+/** Create a window host bound to an XR Blocks Script / three.js context. */
+export function connectUIExtensions(context) {
+    return new UixWindowHost({
+        scene: context.scene,
+        headPose: cameraHeadPoseSource(context.camera),
+        ...(context.kit ? { kit: context.kit } : {}),
+    });
+}
+//# sourceMappingURL=xrblocks.js.map

package/dist/xrblocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xrblocks.js","sourceRoot":"","sources":["../src/xrblocks.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,UAAU,EAAE,OAAO,EAAyC,MAAM,OAAO,CAAC;AAGnF,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAY1C,kDAAkD;AAClD,MAAM,UAAU,oBAAoB,CAClC,MAA+B;IAE/B,MAAM,QAAQ,GAAG,IAAI,OAAO,EAAE,CAAC;IAC/B,MAAM,UAAU,GAAG,IAAI,UAAU,EAAE,CAAC;IACpC,OAAO;QACL,WAAW;YACT,MAAM,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;YAClC,MAAM,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAC;YACtC,OAAO;gBACL,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC;gBAC9C,UAAU,EAAE,CAAC,UAAU,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC;aACrE,CAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC;AAED,4EAA4E;AAC5E,MAAM,UAAU,mBAAmB,CAAC,OAAsB;IACxD,OAAO,IAAI,aAAa,CAAC;QACvB,KAAK,EAAE,OAAO,CAAC,KAAK;QACpB,QAAQ,EAAE,oBAAoB,CAAC,OAAO,CAAC,MAAM,CAAC;QAC9C,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;KAC7C,CAAC,CAAC;AACL,CAAC","sourcesContent":["/**\n * XR Blocks glue.\n *\n * XR Blocks (https://github.com/google/xrblocks) is three.js-based: a\n * Script's `scene`/`camera` are ordinary three.js objects, and `update()`\n * runs per frame. This module binds a {@link UixWindowHost} to that shape\n * WITHOUT importing `xrblocks` (loose structural types), so the package\n * works identically in an XR Blocks Script and in any hand-rolled three.js\n * WebXR app.\n *\n * Typical XR Blocks usage:\n *\n *   import * as xb from 'xrblocks';\n *   import { connectUIExtensions } from '@realitycollective/xrblocks-uiextensions';\n *\n *   class MyScript extends xb.Script {\n *     init() { this.uix = connectUIExtensions({ scene: this, camera: xb.core.camera }); }\n *     update() { this.uix.update(xb.core.timer.getDelta()); }\n *   }\n */\nimport { Quaternion, Vector3, type Object3D, type PerspectiveCamera } from 'three';\nimport type { HeadPose, HeadPoseSource } from '@realitycollective/webxr-uiextensions';\nimport type { Kit } from '@pmndrs/uikitml';\nimport { UixWindowHost } from './host.js';\n\n/** The slice of an XR Blocks Script / three.js app the host binds to. */\nexport interface EngineContext {\n  /** Where windows are parented - an XR Blocks Script IS an Object3D. */\n  scene: Object3D;\n  /** The rendering camera; in XR the engine keeps it at the viewer pose. */\n  camera: Pick<PerspectiveCamera, 'getWorldPosition' | 'getWorldQuaternion'>;\n  /** Optional UIKitML component kit(s). */\n  kit?: Kit;\n}\n\n/** HeadPoseSource backed by a three.js camera. */\nexport function cameraHeadPoseSource(\n  camera: EngineContext['camera'],\n): HeadPoseSource {\n  const position = new Vector3();\n  const quaternion = new Quaternion();\n  return {\n    getHeadPose(): HeadPose {\n      camera.getWorldPosition(position);\n      camera.getWorldQuaternion(quaternion);\n      return {\n        position: [position.x, position.y, position.z],\n        quaternion: [quaternion.x, quaternion.y, quaternion.z, quaternion.w],\n      };\n    },\n  };\n}\n\n/** Create a window host bound to an XR Blocks Script / three.js context. */\nexport function connectUIExtensions(context: EngineContext): UixWindowHost {\n  return new UixWindowHost({\n    scene: context.scene,\n    headPose: cameraHeadPoseSource(context.camera),\n    ...(context.kit ? { kit: context.kit } : {}),\n  });\n}\n"]}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@realitycollective/xrblocks-uiextensions",
+  "version": "0.1.0-preview.0",
+  "description": "EXPERIMENTAL Google XR Blocks / plain three.js adapter for the Reality Collective UI Extensions - hosts the engine-free @realitycollective/webxr-uiextensions windowing core (UIKitML panels, window chrome, follow mode) in any three.js WebXR scene, including XR Blocks Scripts.",
+  "keywords": [
+    "realitycollective",
+    "xrblocks",
+    "androidxr",
+    "webxr",
+    "threejs",
+    "ui",
+    "windowing",
+    "spatial-ui",
+    "uikitml",
+    "typescript"
+  ],
+  "license": "MIT",
+  "author": "Reality Collective",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "@pmndrs/uikitml": "^0.1.12",
+    "@realitycollective/webxr-uiextensions": "^0.1.0-preview.0"
+  },
+  "peerDependencies": {
+    "three": ">=0.170.0"
+  },
+  "devDependencies": {
+    "three": "npm:super-three@0.181.0",
+    "@types/three": "*",
+    "typescript": "^5.5.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/realitycollective/WebXR-UIExtensions.git",
+    "directory": "packages/xrblocks-uiextensions"
+  },
+  "homepage": "https://github.com/realitycollective/WebXR-UIExtensions#readme",
+  "bugs": {
+    "url": "https://github.com/realitycollective/WebXR-UIExtensions/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20.19.0 <21.0.0-0 || >=22.12.0 <23.0.0-0 || >=24.0.0"
+  }
+}