@realitycollective/iwsdk-uiextensions 0.1.0-preview.0

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# Changelog
+
+Change log for the Reality Collective WebXR UI Extensions packages. All four packages are versioned and released together; the version below is the one carried by the `v<version>` release tag.
+
+The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and the project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). Preview builds are not listed separately. The entry for a version accumulates while its previews are published, and is dated when that version is released.
+
+## [0.1.0]
+
+### Added
+
+- `@realitycollective/webxr-uiextensions` - engine-free core: window manager, dock state and regions, drag maths, hold-to-drag, control models (stepper/toggle/expandable/log), the `SceneDescriptor` scene format, window chrome conventions and the platform-adapter contract.
+- `@realitycollective/iwsdk-uiextensions` - Meta IWSDK adapter binding the core onto IWSDK's ECS, UIKitML and interaction systems, with shipped examples.
+- `@realitycollective/xrblocks-uiextensions` - EXPERIMENTAL Google XR Blocks / plain three.js adapter: panel document, window host, follow and scale maths, desktop controls and locomotion, pointer forwarding.
+- `@realitycollective/uix-devtools` - dev-only tooling: edit-session launch gate, runtime UIKitML compilation, and the `uix-dev` CLI (Cloudflare quick tunnel, QR onboarding, environment doctor).
+- Demo clients: the IWSDK showcase, the devtools playground, and the multiplatform lab that picks its pipeline from the hardware.
+
+[0.1.0]: https://github.com/realitycollective/WebXR-UIExtensions/commits/main

package/Examples/README.md

@@ -0,0 +1,13 @@
+# Examples
+
+Copy-paste starting points, shipped inside the npm package (Unity-style `Examples/` convention, as used across Reality Collective packages).
+
+| Example | Shows |
+| --- | --- |
+| [`basic-window/`](./basic-window) | A managed window with chrome, pin/minimize/close and body-follow |
+| [`dock-regions/`](./dock-regions) | Layout regions, drop-to-dock, a follow-region "toolbar" |
+| [`controls/`](./controls) | `data-uix` stepper, toggle, expandable label and log view |
+
+Each example assumes an IWSDK app created with `npm create @iwsdk@latest` (so the UIKitML Vite plugin is already wired: `.uikitml` files in `ui/` compile to `public/ui/*.json`).
+
+For a complete integrated application - five windows, two regions, a registration form, event log, and horizon-kit Slider - see the `showcase/` client in the repository, which deploys to Cloudflare Pages from CI.

package/Examples/basic-window/main.ts

@@ -0,0 +1,31 @@
+/**
+ * Basic window - chrome, focus, docking and drag with one call.
+ * Put window.uikitml in your app's ui/ folder (compiles to /ui/window.json).
+ */
+import { World } from '@iwsdk/core';
+import {
+  DockMode,
+  createUIWindow,
+  registerUIExtensions,
+} from '@realitycollective/iwsdk-uiextensions';
+
+export async function start(container: HTMLDivElement) {
+  const world = await World.create(container, {
+    features: { spatialUI: true },
+  });
+
+  const windows = registerUIExtensions(world);
+
+  createUIWindow(world, {
+    id: 'hello',
+    title: 'Hello Window',
+    config: './ui/window.json',
+    dockMode: DockMode.BodyFollow, // follows until pinned or dragged
+    followOffset: [0, -0.15, -1.2],
+  });
+
+  windows.events.on('dockChanged', ({ window, previous }) => {
+    console.log(`[uix] ${window.title}: ${previous} → ${window.dockMode}`);
+  });
+  windows.events.on('closed', (w) => console.log(`[uix] ${w.title} closed`));
+}

package/Examples/basic-window/window.uikitml

@@ -0,0 +1,59 @@
+<style>
+  .uix-window {
+    display: flex;
+    flex-direction: column;
+    width: 300;
+    background-color: #101a26;
+    background-opacity: 0.92;
+    border-radius: 12.5;
+    border-color: #2e4a66;
+    border-width: 0.75;
+  }
+  .uix-titlebar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 8;
+    background-color: #1b2c40;
+    border-top-left-radius: 12.5;
+    border-top-right-radius: 12.5;
+    cursor: pointer;
+  }
+  .uix-title { flex-shrink: 1; font-size: 12; font-weight: bold; color: #dce9f7; }
+  .uix-titlebar-buttons { display: flex; flex-direction: row; flex-shrink: 0; }
+  .uix-titlebar-button {
+    width: 34;
+    height: 20;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    margin-left: 4;
+    font-size: 9;
+    color: #9fb8d4;
+    background-color: #223850;
+    border-radius: 6;
+    cursor: pointer;
+  }
+  .uix-titlebar-button:hover { background-color: #33547a; color: #ffffff; }
+  .uix-content { display: flex; flex-direction: column; width: 100%; padding: 10; }
+  .body-text { font-size: 11; color: #c4d6ea; }
+</style>
+<div id="uix-window" class="uix-window">
+  <div id="uix-titlebar" class="uix-titlebar">
+    <span id="uix-title" class="uix-title">.</span>
+    <div class="uix-titlebar-buttons">
+      <div id="uix-pin" class="uix-titlebar-button">PIN</div>
+      <div id="uix-dock" class="uix-titlebar-button">DOCK</div>
+      <div id="uix-minimize" class="uix-titlebar-button">MIN</div>
+      <div id="uix-close" class="uix-titlebar-button">X</div>
+    </div>
+  </div>
+  <div id="uix-content" class="uix-content">
+    <span class="body-text">
+      Drag my title bar to move me. PIN toggles between following you and
+      staying put. MIN collapses me to the title bar.
+    </span>
+  </div>
+</div>

package/Examples/controls/controls.uikitml

@@ -0,0 +1,50 @@
+<style>
+  .panel {
+    display: flex;
+    flex-direction: column;
+    width: 300;
+    padding: 10;
+    background-color: #101a26;
+    background-opacity: 0.92;
+    border-radius: 12.5;
+  }
+  .row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; margin-top: 7; }
+  .label { font-size: 11; color: #9fb8d4; }
+  .stepper { display: flex; flex-direction: row; align-items: center; }
+  .stepper-button { padding: 4; font-size: 13; color: #eaf6ff; background-color: #2c4a6b; border-radius: 6; cursor: pointer; }
+  .stepper-value { font-size: 13; color: #ffffff; margin-left: 7; margin-right: 7; }
+  .toggle { padding: 5.5; border-radius: 7; cursor: pointer; }
+  .toggle-label { font-size: 11; font-weight: bold; color: #ffffff; }
+  .long { display: flex; flex-direction: column; width: 100%; margin-top: 8; }
+  .long-text { font-size: 9.5; color: #c4d6ea; }
+  .long-toggle { margin-top: 3; font-size: 9.5; color: #6fb4ff; cursor: pointer; }
+  .log { display: flex; flex-direction: column; width: 100%; margin-top: 8; }
+  .log-line { font-size: 9; color: #9fe0a8; margin-top: 2; }
+</style>
+<div class="panel">
+  <div class="row">
+    <span class="label">Volume</span>
+    <div data-uix="stepper" data-uix-id="volume" data-uix-min="0" data-uix-max="10" class="stepper">
+      <div data-uix-role="decrement" class="stepper-button">-</div>
+      <span data-uix-role="value" class="stepper-value">.</span>
+      <div data-uix-role="increment" class="stepper-button">+</div>
+    </div>
+  </div>
+  <div class="row">
+    <span class="label">Music</span>
+    <div data-uix="toggle" data-uix-id="music" data-uix-on-color="#1f6d3d" data-uix-off-color="#5a3037" class="toggle">
+      <span data-uix-role="label" class="toggle-label">.</span>
+    </div>
+  </div>
+  <div data-uix="expandable-label" data-uix-id="details" data-uix-lines="2" data-uix-chars-per-line="40"
+       data-uix-text="Long descriptive text collapses to two lines with an ellipsis, and the more/less affordance expands it in place - no scrolling, no clipping."
+       class="long">
+    <span data-uix-role="text" class="long-text">.</span>
+    <div data-uix-role="toggle" class="long-toggle">more</div>
+  </div>
+  <div data-uix="log-view" data-uix-id="log" class="log">
+    <span data-uix-role="line" class="log-line">.</span>
+    <span data-uix-role="line" class="log-line">.</span>
+    <span data-uix-role="line" class="log-line">.</span>
+  </div>
+</div>

package/Examples/controls/main.ts

@@ -0,0 +1,44 @@
+/**
+ * Controls - data-uix markup upgrades on any IWSDK panel.
+ *
+ * The controls work in plain panels too (no window required): the
+ * UIControlsSystem upgrades every loaded PanelDocument.
+ */
+import { PanelDocument, PanelUI, UIKitDocument, World, createSystem, eq } from '@iwsdk/core';
+import {
+  registerUIExtensions,
+  upgradePanel,
+  type UixElement,
+} from '@realitycollective/iwsdk-uiextensions';
+
+export async function start(container: HTMLDivElement) {
+  const world = await World.create(container, {
+    features: { spatialUI: true },
+  });
+  registerUIExtensions(world);
+
+  const panel = world
+    .createTransformEntity()
+    .addComponent(PanelUI, { config: './ui/controls.json', maxWidth: 0.8, maxHeight: 1 });
+  panel.object3D!.position.set(0, 1.5, -1.2);
+
+  // Wire the handles once the panel loads.
+  class WireSystem extends createSystem({
+    panel: {
+      required: [PanelUI, PanelDocument],
+      where: [eq(PanelUI, 'config', './ui/controls.json')],
+    },
+  }) {
+    override init(): void {
+      this.queries.panel.subscribe('qualify', (entity) => {
+        const document = PanelDocument.data.document[entity.index] as UIKitDocument;
+        // upgradePanel is idempotent - safe regardless of system order.
+        const controls = upgradePanel(document, document.rootElement as unknown as UixElement);
+        const log = controls.logView('log');
+        controls.stepper('volume').events.on('change', (v) => log.push(`volume ${v}`));
+        controls.toggle('music').events.on('change', (on) => log.push(`music ${on ? 'on' : 'off'}`));
+      });
+    }
+  }
+  world.registerSystem(WireSystem);
+}

package/Examples/dock-regions/main.ts

@@ -0,0 +1,55 @@
+/**
+ * Dock regions - snap windows into named layout regions.
+ *
+ * A region is an anchor entity with slot layout (row / column / grid).
+ * Drop a window inside its snap radius to dock it; drag it out to undock.
+ * Regions can follow the player, turning their contents into a toolbar.
+ */
+import { World } from '@iwsdk/core';
+import {
+  createDockRegion,
+  createUIWindow,
+  registerUIExtensions,
+} from '@realitycollective/iwsdk-uiextensions';
+
+export async function start(container: HTMLDivElement) {
+  const world = await World.create(container, {
+    features: { spatialUI: true },
+  });
+  registerUIExtensions(world);
+
+  // A world-locked column on the wall - drop windows to stack them.
+  createDockRegion(world, {
+    id: 'wall',
+    flow: 'column',
+    pitch: 0.6,
+    capacity: 3,
+    snapRadius: 0.65,
+    position: [1.6, 1.9, -1.5],
+  });
+
+  // A row that follows the player - a floating toolbar.
+  createDockRegion(world, {
+    id: 'toolbar',
+    flow: 'row',
+    pitch: 0.55,
+    follow: true,
+    followOffset: [0, -0.7, -1.1],
+  });
+
+  // Spawn a window straight into a region…
+  createUIWindow(world, {
+    id: 'docked',
+    title: 'Docked Window',
+    config: './ui/window.json',
+    region: 'wall',
+  });
+
+  // …and one free-floating to drag into either region.
+  createUIWindow(world, {
+    id: 'floating',
+    title: 'Drag Me Into A Region',
+    config: './ui/window.json',
+    position: [0, 1.5, -1.4],
+  });
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Reality Collective
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,117 @@
+# @realitycollective/iwsdk-uiextensions
+
+Windowing, docking, layout regions and extra controls for [Meta's Immersive Web SDK](https://iwsdk.dev) (`@iwsdk/core`).
+
+**This is the Meta IWSDK adapter** - and the reference implementation - for the engine-free [`@realitycollective/webxr-uiextensions`](../webxr-uiextensions/README.md) core, which it re-exports in full: one dependency gets IWSDK apps the whole surface. (A sibling [`@realitycollective/xrblocks-uiextensions`](../xrblocks-uiextensions/README.md) adapter binds the same core to Google XR Blocks, experimentally.)
+
+**Reuse, not recreation.** The IWSDK already ships an excellent spatial UI stack - UIKitML markup, `@pmndrs/uikit` rendering, `Follower`/`ScreenSpace` anchoring, grab/ray/poke interaction. This package adds the missing layer above it:
+
+| Feature | What you get |
+| --- | --- |
+| **Windows** | Title-bar chrome (pin / minimize / close), focus & z-ordering, a per-world `WindowManager` with typed events |
+| **Dock states** | `world-locked` (place in space) ⇄ `body-follow` (lazy follow) ⇄ `head-locked`, realised with the IWSDK's own `Follower`/`ScreenSpace` |
+| **Manipulation** | Drag windows by the title bar (powered by `@pmndrs/handle`, the same library behind IWSDK grabbing), billboard-while-dragging, drop-to-dock |
+| **Layout regions** | Named regions (row / column / grid slots) windows snap into; regions can themselves follow the player |
+| **Controls** | `data-uix` markup upgrades: **stepper**, **toggle**, **expandable multi-line label**, **log/list view** - plus everything UIKitML already has (buttons, inputs, textareas, images, and the horizon kit's Slider/Checkbox/…) |
+
+Everything is authored in plain UIKitML (HTML/CSS-like) - no new markup language, no custom renderer, no wrapper widgets around things the IWSDK already does.
+
+## Install
+
+```bash
+npm install @realitycollective/iwsdk-uiextensions
+# peer: @iwsdk/core >= 0.4
+```
+
+## Quick start
+
+```ts
+import { World } from '@iwsdk/core';
+import {
+  registerUIExtensions,
+  createUIWindow,
+  createDockRegion,
+  DockMode,
+} from '@realitycollective/iwsdk-uiextensions';
+
+const world = await World.create(container, {
+  features: { spatialUI: true },
+});
+
+const windows = registerUIExtensions(world); // registers all systems, returns the WindowManager
+
+createDockRegion(world, { id: 'wall', flow: 'column', position: [1.5, 1.8, -1.5] });
+
+createUIWindow(world, {
+  id: 'status',
+  title: 'Player Status',
+  config: './ui/status.json',      // compiled UIKitML
+  dockMode: DockMode.BodyFollow,   // follows until the user pins it
+});
+
+windows.events.on('closed', (w) => console.log(`${w.title} closed`));
+```
+
+### Window markup
+
+Windows are ordinary UIKitML panels; the chrome is discovered by well-known element ids (only the ids are contractual - restyle freely):
+
+```html
+<div id="uix-window" class="my-window">
+  <div id="uix-titlebar" class="my-titlebar">      <!-- drag surface -->
+    <span id="uix-title" class="my-title">.</span>
+    <div id="uix-pin">PIN</div>                    <!-- follow ⇄ placed; label auto-syncs to PIN/UNPIN -->
+    <div id="uix-dock">DOCK</div>                  <!-- return to home (spawn region / placement) -->
+    <div id="uix-minimize">MIN</div>
+    <div id="uix-close">X</div>
+  </div>
+  <div id="uix-content">
+    <!-- window body -->
+  </div>
+</div>
+```
+
+> Use `<div>`s (not `<button>`s) for chrome buttons: with a component kit registered, lowercase `<button>` resolves to the kit's Button component, whose intrinsic sizing fights compact title-bar chrome.
+
+### Controls markup
+
+Annotate any element with `data-uix` and the `UIControlsSystem` upgrades it - in any panel, not just windows:
+
+```html
+<div data-uix="stepper" data-uix-id="health" data-uix-min="0" data-uix-max="100" data-uix-step="10">
+  <button data-uix-role="decrement">-</button>
+  <span data-uix-role="value">.</span>
+  <button data-uix-role="increment">+</button>
+</div>
+```
+
+```ts
+import { panelControlsFor } from '@realitycollective/iwsdk-uiextensions';
+
+const controls = panelControlsFor(document); // the panel's UIKitDocument
+controls.stepper('health').events.on('change', (hp) => setHealth(hp));
+```
+
+> UIKitML note: every dynamic-text element needs a literal placeholder child (`<span data-uix-role="value">.</span>`) or no Text node is created.
+
+### Interaction model
+
+- **Drag** the title bar with the ray (or mouse on desktop) to move a window; it billboards toward you while dragging and settles facing you when released. A press only becomes a drag after `dragDelay` seconds (default 0.3, per-window on `UIWindow`) - shorter presses stay clicks, and the chrome buttons swallow their presses entirely, so PIN/DOCK/MIN/X never fight the drag gesture.
+- **Drop** a window inside a region's snap radius to dock it into the next slot; drag it out again to undock.
+- **Pin** toggles `body-follow` ⇄ `world-locked` ("place in space").
+- Dragging a following window implicitly places it - pin re-attaches it.
+
+See `Examples/` (shipped in this package) and the deployable showcase client in the repository for complete, working demonstrations of every feature.
+
+## Headless core
+
+All decision logic (window manager, dock state machine, region slot math, drag math, control models) lives in `@realitycollective/webxr-uiextensions` - pure TypeScript with no engine imports, tested at 100% coverage. The ECS systems in this package are thin appliers of that core onto `@iwsdk/core` components.
+
+## Live demos
+
+- Showcase: **[webxr-uiextensions.pages.dev](https://webxr-uiextensions.pages.dev)**
+- Multiplatform lab: **[webxr-uix-lab.pages.dev](https://webxr-uix-lab.pages.dev)**
+
+## License
+
+MIT © Reality Collective

package/dist/components.d.ts

@@ -0,0 +1,189 @@
+/**
+ * ECS components for UI Extensions.
+ *
+ * These compose with the IWSDK's own components - a window entity typically
+ * carries `PanelUI` (the IWSDK loads/renders the panel), `UIWindow` (ours),
+ * and the IWSDK interaction tags (`RayInteractable`, `PokeInteractable`).
+ * The systems in this package add/remove the IWSDK `Follower` / `ScreenSpace`
+ * components to realise dock modes rather than re-implementing them.
+ */
+import { Types } from '@iwsdk/core';
+/** Region flow options mirrored as an enum object for the component schema. */
+export declare const RegionFlowType: {
+    readonly Row: "row";
+    readonly Column: "column";
+    readonly Grid: "grid";
+};
+/**
+ * Marks a panel entity as a managed window with chrome, focus, docking and
+ * drag behaviour. Pair with `PanelUI` whose markup contains the window chrome
+ * elements (see `WINDOW_CHROME_IDS` / the Examples folder).
+ */
+export declare const UIWindow: import("elics").Component<{
+    /** Stable id; auto-generated when empty. */
+    windowId: {
+        type: Types.String;
+        default: string;
+    };
+    /** Title text written into the `uix-title` element. */
+    title: {
+        type: Types.String;
+        default: string;
+    };
+    /** Current dock state. */
+    dockMode: {
+        type: Types.Enum;
+        enum: {
+            readonly WorldLocked: "world-locked";
+            readonly BodyFollow: "body-follow";
+            readonly HeadLocked: "head-locked";
+        };
+        default: "world-locked";
+    };
+    /** Whether the title bar drags the window. */
+    movable: {
+        type: Types.Boolean;
+        default: true;
+    };
+    /** Show/enable the close affordance. */
+    closable: {
+        type: Types.Boolean;
+        default: true;
+    };
+    /** Show/enable the minimize affordance. */
+    minimizable: {
+        type: Types.Boolean;
+        default: true;
+    };
+    /** Show/enable the pin (body-follow ⇄ world-locked) affordance. */
+    pinnable: {
+        type: Types.Boolean;
+        default: true;
+    };
+    /** Keep the window yawed toward the viewer while it is being dragged. */
+    billboardWhileDragging: {
+        type: Types.Boolean;
+        default: true;
+    };
+    /**
+     * Seconds a title-bar press must be held before it becomes a drag.
+     * Shorter presses stay clicks, so title-bar buttons don't fight the drag.
+     */
+    dragDelay: {
+        type: Types.Float32;
+        default: number;
+    };
+    /** Head-relative offset used in `body-follow` mode (meters). */
+    followOffset: {
+        type: Types.Vec3;
+        default: [number, number, number];
+    };
+    /** `Follower` lerp speed for body-follow. */
+    followSpeed: {
+        type: Types.Float32;
+        default: number;
+    };
+    /** `Follower` positional deadzone for body-follow (meters). */
+    followTolerance: {
+        type: Types.Float32;
+        default: number;
+    };
+    /** Meters the focused window is nudged toward the viewer per focus depth. */
+    focusBias: {
+        type: Types.Float32;
+        default: number;
+    };
+    /**
+     * World size box in meters, applied via `UIKitDocument.setTargetDimensions`
+     * once the document loads. IWSDK 0.5 removed `PanelUI.maxWidth/maxHeight`;
+     * this is the supported replacement. `0` leaves the document at its
+     * intrinsic markup size, scaled only by the entity transform.
+     */
+    targetWidth: {
+        type: Types.Float32;
+        default: number;
+    };
+    targetHeight: {
+        type: Types.Float32;
+        default: number;
+    };
+}>;
+/**
+ * Internal bookkeeping the systems keep on window entities - which dock mode
+ * has actually been applied to engine components, and whether chrome wiring
+ * has run for the current PanelDocument.
+ */
+export declare const UIWindowState: import("elics").Component<{
+    appliedDockMode: {
+        type: Types.String;
+        default: string;
+    };
+    chromeWired: {
+        type: Types.Boolean;
+        default: false;
+    };
+    /** "Home" snapshot captured on adoption - the DOCK button returns here. */
+    homeDockMode: {
+        type: Types.String;
+        default: string;
+    };
+    homeRegion: {
+        type: Types.String;
+        default: string;
+    };
+    homePosition: {
+        type: Types.Vec3;
+        default: [number, number, number];
+    };
+    homeYaw: {
+        type: Types.Float32;
+        default: number;
+    };
+}>;
+/**
+ * A named layout region that docked windows snap to and are laid out within.
+ * Place the entity where the region should live (it can itself carry a
+ * `Follower` to make a body-locked region).
+ */
+export declare const UIDockRegion: import("elics").Component<{
+    regionId: {
+        type: Types.String;
+        default: string;
+    };
+    flow: {
+        type: Types.Enum;
+        enum: {
+            readonly Row: "row";
+            readonly Column: "column";
+            readonly Grid: "grid";
+        };
+        default: "column";
+    };
+    /** Distance between slot origins (meters). */
+    pitch: {
+        type: Types.Float32;
+        default: number;
+    };
+    /** Columns per row (grid flow only). */
+    columns: {
+        type: Types.Float32;
+        default: number;
+    };
+    /** Max docked windows (0 = unlimited). */
+    capacity: {
+        type: Types.Float32;
+        default: number;
+    };
+    /** Drop-capture radius (meters). */
+    snapRadius: {
+        type: Types.Float32;
+        default: number;
+    };
+}>;
+/** Present on a window entity while it is docked into a region. */
+export declare const UIDockedTo: import("elics").Component<{
+    regionId: {
+        type: Types.String;
+        default: string;
+    };
+}>;