@vincentt-xr/sdk 2.0.0-alpha.0 → 2.0.0-alpha.1

package/GROUNDING.md

@@ -54,7 +54,9 @@ Coordinates are normalized: -1 to +1, with +y up. The center of the screen is `(
   <mesh name="frame"><planeGeometry args={[1, 1]} /><meshBasicMaterial map={frameTex} transparent /></mesh>
 </ScreenTransform>
 
-// Bottom-center prompt
+// Bottom-center prompt.
+// Prefer <ScreenText> for ordinary screen copy; use this low-level pairing only
+// when you need custom anchors.
 <ScreenTransform anchors={{ left: -0.4, right: 0.4, top: -0.5, bottom: -0.9 }}>
   <TextLabel name="prompt" text="Show your hand" fontSize={220} />
 </ScreenTransform>
@@ -84,6 +86,88 @@ const [sx, sy] = computeContainScale(rectAspect, 1200 / 800); // content w/h rat
 </mesh>;
 ```
 
+### `<ScreenImage>` — Effect House-style screen-space image object
+
+Use this for screen-space image planes such as logos, stickers, frames, badges,
+and photo placeholders. `ScreenImage` owns its `ScreenTransform`; for normal
+authoring prefer `position`, `size`, and `rotation`. `anchors` still exist as
+the lower-level layout escape hatch. If no source is provided, it renders the
+SDK-owned square default image.
+
+```tsx
+import { ScreenImage, ScreenSpaceUI } from "@vincentt-xr/sdk";
+
+<ScreenSpaceUI>
+  <ScreenImage
+    name="defaultSquareImage"
+    anchors={{ left: -0.35, right: 0.35, top: 0.35, bottom: -0.35 }}
+    fit="contain"
+  />
+</ScreenSpaceUI>
+
+<ScreenSpaceUI>
+  <ScreenImage
+    name="logo"
+    source={{ kind: "image", src: "https://cdn.../logo.png" }}
+    coordinateSpace="canvas"
+    canvasSize={{ width: 720, height: 1280 }}
+    position={[-180, 464]}
+    size={[216, 160]}
+    stretchMode="fit"
+    opacity={0.95}
+  />
+</ScreenSpaceUI>
+```
+
+Props:
+
+- `source`: `{ kind: "default" }`, `{ kind: "image", src }`, or `{ kind: "texture", texture }`.
+- `src`: shorthand for `{ kind: "image", src }`.
+- `fit`: `"stretch" | "contain" | "cover"`; default `"contain"`.
+- `coordinateSpace`: `"normalized" | "canvas"`; default `"normalized"`.
+- `canvasSize`: design canvas size for `coordinateSpace="canvas"`; default
+  `{ width: 720, height: 1280 }`.
+- `position`, `size`, `rotation`: author-facing screen-object transform.
+  In normalized mode, `position` is the rect center in normalized screen space
+  and `size` is normalized rect width/height. In canvas mode, `position` and
+  `size` are design-canvas pixels with center origin and +y up, matching the
+  Effect House 720x1280 Screen Transform convention.
+- `anchors`, `offsets`, `pivot`: forwarded to the owned `ScreenTransform`.
+- `opacity`, `color`, `flipX`, `flipY`, `renderOrder`, `transparent`, `alphaTest`, `overlay`, `visible`.
+
+Effect House transfer rule: Screen Transform `Size` is the screen-space
+bounding rectangle, not the image's natural pixel size. The image then fits
+inside that rectangle according to `stretchMode`. Fit/fill/stretch changes the
+texture content inside the rectangle; it must not change the object's rigid
+transform. Rotation rotates the whole rectangle around `pivot`.
+
+Settings:
+
+- `DEFAULT_SCREEN_IMAGE_SETTINGS.transformation`: coordinate space, canvas size,
+  position, size, rotation, pivot, render order, overlay/depth behavior, and visibility.
+- `DEFAULT_SCREEN_IMAGE_SETTINGS.image`: source kind, src, fit, opacity, color,
+  flips, transparency, and alpha test.
+- `sourceKind` includes future media categories (`video`, `sequence`, `gif`),
+  but the current component implementation supports `default`, static `image`,
+  and already-loaded Three `texture`.
+
+Use `<ScreenImage>` instead of hand-authoring `<ScreenTransform>` + `<mesh>`
+when the object is conceptually a 2D screen image. Use the lower-level mesh path
+only when you need custom geometry or material behavior.
+
+### Shared debug authoring surface for `ScreenImage`
+
+The SDK ships a dev-only inspector at `lib/debug-ui/screen-image-settings` for
+authoring `ScreenImage` settings in creator tooling and the v2 template
+preview. It exposes the image renderer, transform, material, and fit controls
+as one shared panel. End-user shipping surfaces should not include the debug
+chrome.
+
+The panel's transform copy button copies a JSON payload for the selected object
+including `name`, `kind: "screenImage"`, `transform`, `image`, `material`, and
+`screenSpaceUI`. The `transform` includes `coordinateSpace` and `canvasSize`.
+Use that payload as the handoff from human layout tuning back to code.
+
 ### `<SpriteAnimation sheet={{ url, cols, rows, frames, fps }}>` — Animated transparent overlay
 
 The primitive for an animated transparent overlay (a frame border, a gesture-instruction graphic, an animated sticker). One transparent WebP atlas of `cols`×`rows` cells; the first `frames` play left-to-right, top-to-bottom at `fps`. It is a single static GPU texture with a per-frame UV offset — no video decode — so it works in every native and in-app browser and costs ~zero heat.
@@ -115,6 +199,39 @@ import { SpriteAnimation, ScreenSpaceUI } from "@vincentt-xr/sdk";
 
 Mount the tracker component; it registers the underlying ML model automatically. No `registerXRPipeline` call needed.
 
+### 3D face warp — FBX head binding and face proportion deformation
+
+Use `faceWarp3D` on `<CanonicalFaceMeshRenderer>` to deform the live canonical
+face mesh before projection. Defaults are no-op; pass `FACE_WARP_3D_PRESET` for
+a visible starter look, or provide partial settings.
+
+```tsx
+import { CanonicalFaceMeshRenderer, FACE_WARP_3D_PRESET } from "@vincentt-xr/sdk/face-effects";
+
+<CanonicalFaceMeshRenderer
+  materialType="shader"
+  shaderPreset="originalFace"
+  textureMap="none"
+  alphaMap="canonical"
+  alphaOpacity={1}
+  baseColor="#ffffff"
+  opacity={1}
+  side="front"
+  faceAlphaMaskUrl="https://cdn.vincentt.studio/assets/sdk/face/v1/Canonical_Face_Color_Mask.png"
+  faceWarp3D={FACE_WARP_3D_PRESET}
+/>;
+```
+
+Settings (`FaceWarp3DSettings`) include `faceWidth`, `faceHeight`,
+`foreheadHeight`, `cheekWidth`, `eyeSize`, `eyeDistance`, `noseSize`,
+`noseLength`, `mouthWidth`, `mouthHeight`, `jawWidth`, `chinHeight`, plus
+`enabled` and `strength`. Setting values are normalized around zero; typical UI
+sliders map `-100..100` to `-1..1`.
+
+For local tuning, import `FaceWarp3DSettingsPanel` from
+`@vincentt-xr/sdk/debug-ui`. It is a draggable debug panel and should not
+be included in the final production scene.
+
 ### `<FaceTracker>` — Face tracking (468 landmarks)
 
 Detects faces and provides face transform to children via context. Supports `faceIndex` (default 0) and `scaleWithFace`.
@@ -154,6 +271,10 @@ import { HandTracker } from "@vincentt-xr/sdk/tracking";
 <HandTracker />;
 ```
 
+Supports multiple detected hands: `hand` selects `"left"` or `"right"` when that
+hand is available; `handIndex` falls back to positional selection. Existing
+one-hand scenes keep working via the default first-hand selection.
+
 ### `<GestureTracker>` — Named gestures
 
 The gesture door — the component that recognizes named gestures. Its `node.gesture` is one of these exact strings (copy verbatim — these are the only valid values):
@@ -373,29 +494,126 @@ const tex = useTexture("https://cdn.../badge.webp");
 
 ---
 
+## `<ScreenText>` — Standard screen-space text
+
+Import from `@vincentt-xr/sdk`. Use this when you want the standard
+screen-text lane instead of wiring `ScreenTransform` + `TextLabel` yourself.
+For future Vincentt scenes, prefer `ScreenText` over raw `TextLabel` for end-user
+screen copy such as prompts, captions, banners, badges, and titles.
+
+`ScreenText` composes:
+
+- full-width screen-space lane presets
+- `verticalAlign: "top" | "center" | "bottom"`
+- `TextLabel` rendering props such as `textAlign`, overflow, background, stroke, and shadow
+
+```tsx
+import { ScreenSpaceUI, ScreenText } from "@vincentt-xr/sdk";
+
+<ScreenSpaceUI>
+  <ScreenText
+    name="headline"
+    text="Head-Tilt Trivia"
+    coordinateSpace="canvas"
+    canvasSize={{ width: 720, height: 1280 }}
+    position={[0, 500]}
+    size={[620, 140]}
+    textAlign="center"
+    fontSize={270}
+    bgFit="text"
+    bgColor="transparent"
+  />
+</ScreenSpaceUI>;
+```
+
+`ScreenText` supports the same screen coordinate contract as `ScreenImage`:
+`coordinateSpace="normalized"` uses normalized screen units, while
+`coordinateSpace="canvas"` uses Effect House-style design-canvas pixels
+(`720x1280` by default, center origin, +y up). Its `size` is the text bounding
+rectangle. The text renderer then aligns, shrinks, clips, or backgrounds the
+text inside that rectangle.
+
+Use `ScreenText` when:
+
+- you want top / center / bottom screen placement
+- you want wide-lane text alignment without hand-authoring anchors
+- you want the default end-user screen text behavior
+
+Use `TextLabel` when:
+
+- you need raw text rendering outside the screen-text presets
+- you want to place text manually in world space or inside a custom transform
+- you are building a lower-level composite where another component owns layout
+
+### Shared debug authoring surface for `ScreenText`
+
+The SDK also ships a dev-only inspector at `lib/debug-ui/screen-text-settings`
+for `ScreenText` authoring. It groups the text renderer, transform, style, and
+background controls into separate sections so creators can inspect the lane
+without shipping the debug chrome in production.
+
+The panel's transform copy button copies a JSON payload for the selected object
+including `name`, `kind: "screenText"`, `transform`, `content`, `style`,
+`layout`, and `screenSpaceUI`. The `transform` includes `coordinateSpace` and
+`canvasSize`. Use that payload as the handoff from human layout tuning back to
+code.
+
+### Shared debug layer panel
+
+The SDK ships a reusable `LayerPanel` in `lib/debug-ui/layer-panel` for
+Photoshop-style stack management. It is intended for dev / creator tooling
+only and is currently used by the template preview to manage `ScreenImage` and
+`ScreenText` layers. Production shipping surfaces should not include the panel.
+
+---
+
 ## `<TextLabel>` — Canvas-rendered text panel
 
 Import from `@vincentt-xr/sdk`. Billboarded in 3D space.
 
-| prop           | type                | default                | notes                                                                                         |
-| -------------- | ------------------- | ---------------------- | --------------------------------------------------------------------------------------------- |
-| `text`         | `string`            | **required**           | The text to render.                                                                           |
-| `color`        | `string`            | `#ffffff`              | Text color.                                                                                   |
-| `fontSize`     | `number`            | `48`                   | Canvas px at the default 512px canvas — NOT world units. Chips/badges typically need 200-320. |
-| `bgColor`      | `string`            | `rgba(20,40,110,0.88)` | Panel background; use `"transparent"` for text-only.                                          |
-| `borderColor`  | `string`            | —                      | Border color; omit for no border.                                                             |
-| `borderRadius` | `number`            | `24`                   | Corner radius; 0 for square.                                                                  |
-| `aspect`       | `number`            | `2.5`                  | Panel shape (width ÷ height). >1 = wide/banner, <1 = tall.                                    |
-| `scale`        | `[x,y,z] \| number` | `1`                    | World size. Combine with `aspect` to make wide banners.                                       |
-| `position`     | `[x,y,z]`           | `[0,0,0]`              | World position. +Y up, -Y down.                                                               |
-| `name`         | `string`            | —                      | Set on every element you create.                                                              |
+| prop            | type                                              | default                | notes                                                                                         |
+| --------------- | ------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------- |
+| `text`          | `string`                                          | **required**           | The text to render.                                                                           |
+| `lines`         | `string[]`                                        | —                      | Optional precomputed lines. Skips automatic word wrapping.                                    |
+| `color`         | `string`                                          | `#ffffff`              | Text color.                                                                                   |
+| `strokeLayers`  | `{ color, width, opacity? }[]`                    | —                      | Optional multi-stroke stack, drawn outer-to-inner.                                            |
+| `strokeColor`   | `string`                                          | —                      | Optional text stroke color. Pair with `strokeWidth`.                                          |
+| `strokeWidth`   | `number`                                          | `0`                    | Text stroke thickness in canvas px.                                                           |
+| `shadowLayers`  | `{ color, blur, offsetX?, offsetY?, opacity? }[]` | —                      | Optional multi-shadow/glow stack, drawn back-to-front.                                        |
+| `shadowColor`   | `string`                                          | —                      | Optional text shadow / glow color.                                                            |
+| `shadowBlur`    | `number`                                          | `0`                    | Shadow blur radius in canvas px.                                                              |
+| `shadowOffsetX` | `number`                                          | `0`                    | Shadow X offset in canvas px.                                                                 |
+| `shadowOffsetY` | `number`                                          | `0`                    | Shadow Y offset in canvas px.                                                                 |
+| `fontSize`      | `number`                                          | `48`                   | Canvas px at the default 512px canvas — NOT world units. Chips/badges typically need 200-320. |
+| `textAlign`     | `"left" \| "center" \| "right"`                   | `"center"`             | Horizontal text alignment inside the available lane.                                          |
+| `overflow`      | `"clip" \| "clamp" \| "ellipsis" \| "shrink"`     | —                      | Overflow behavior. `clamp` keeps full visible lines, `clip` allows canvas-edge clipping.      |
+| `resizeToFit`   | `boolean`                                         | —                      | Keep shrinking until the text fits or `minFontSize` is reached.                               |
+| `minFontSize`   | `number`                                          | `12`                   | Minimum shrink target in canvas px.                                                           |
+| `bgColor`       | `string`                                          | `rgba(20,40,110,0.88)` | Panel background; use `"transparent"` for text-only.                                          |
+| `bgFit`         | `"full" \| "text"`                                | `"full"`               | Background fit mode. Use `"text"` for pill/capsule backgrounds that hug the text block.       |
+| `borderColor`   | `string`                                          | —                      | Border color; omit for no border.                                                             |
+| `borderRadius`  | `number`                                          | `24`                   | Corner radius; 0 for square.                                                                  |
+| `aspect`        | `number`                                          | `2.5`                  | Panel shape (width ÷ height). >1 = wide/banner, <1 = tall.                                    |
+| `scale`         | `[x,y,z] \| number`                               | `1`                    | World size. Combine with `aspect` to make wide banners.                                       |
+| `position`      | `[x,y,z]`                                         | `[0,0,0]`              | World position. +Y up, -Y down.                                                               |
+| `name`          | `string`                                          | —                      | Set on every element you create.                                                              |
 
 **Gotchas:**
 
 - `fontSize` is canvas px, not world units. Chips/badges need 200-320, not 16-48.
 - `fontSize` does not change panel shape — use `aspect` (shape) and `scale` (size).
-- `TextLabel` ignores the `visible` prop — wrap in `<group visible={false}>` to start hidden.
+- `textAlign` affects both glyph placement and `bgFit="text"` background placement.
+- `TextLabel` respects the `visible` prop.
+- For text-first 2D treatments, prefer `strokeColor` + `strokeWidth` and `shadowColor` + `shadowBlur` before stacking multiple `TextLabel`s. Native text effects keep the glyph edges aligned and resize cleanly.
+- Use `strokeLayers` / `shadowLayers` when you need richer looks like sticker text, double-outline, or offset-drop-shadow. The single `stroke*` / `shadow*` props are shorthand for one layer and can coexist with the arrays.
+- `TextLabel` now owns real overflow behavior. If you need exact authored line breaks, pass `text` with `\n` or provide `lines` directly; those lines will be rendered as the source layout instead of being re-wrapped from one flattened string.
+- Overflow semantics:
+  - `clip`: draw all resolved lines and let the canvas bounds crop them, including partial last lines.
+  - `clamp`: keep only full visible lines within the line budget.
+  - `ellipsis`: same as clamp, but ellipsize the last visible line.
+  - `shrink`: reduce font size until the content fits or `minFontSize` is reached, then clamp if it still overflows.
 - **Inside a `<ScreenTransform>`, the parent stretches the label to fill the anchor rect — `aspect` must equal the rect's aspect or the banner distorts and leaves dead space around the text.** The rect's aspect is `(right − left) / (top − bottom)`. So for a full-width top banner `anchors={{ left: -1, right: 1, top: 1, bottom: 0.76 }}` → aspect `= 2 / 0.24 ≈ 8.3`. Set `borderRadius={0}` for a true edge-to-edge banner. (The rect controls size + placement — don't add `scale`/`position` to fill it; set the anchors instead.)
+- If you want the SDK to own that anchor math, use `<ScreenText>` instead of pairing `<ScreenTransform>` with `<TextLabel>` manually.
 
 ```tsx
 // Full-width banner pinned to the top, INSIDE a ScreenTransform.

package/dist/{DebuggerUI-CEfdddkZ.cjs → DebuggerUI-CatYc-RG.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),x=require("react"),C=require("react-dom"),s=require("./internal-DH5d1Xnq.cjs"),P={position:"fixed",top:"10px",left:"10px",zIndex:9999,fontFamily:"'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace",fontSize:"12px",color:"#fff",pointerEvents:"auto",userSelect:"none"},h={background:"rgba(0, 0, 0, 0.85)",borderRadius:"6px",padding:"12px 16px",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.5)",backdropFilter:"blur(10px)",border:"1px solid rgba(255, 255, 255, 0.1)",minWidth:"240px"},k={...h,padding:"8px 12px",minWidth:"auto"},F={display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:"12px",paddingBottom:"8px",borderBottom:"1px solid rgba(255, 255, 255, 0.2)"},M={fontSize:"13px",fontWeight:"bold",color:"#00ff9f",letterSpacing:"0.5px",textTransform:"uppercase"},z={display:"flex",gap:"6px"},f={background:"rgba(255, 255, 255, 0.1)",border:"1px solid rgba(255, 255, 255, 0.2)",borderRadius:"4px",color:"#fff",padding:"4px 8px",fontSize:"11px",cursor:"pointer",transition:"all 0.2s"},R={display:"grid",gridTemplateColumns:"1fr 1fr",gap:"10px"},i={display:"flex",flexDirection:"column",gap:"4px"},o={fontSize:"10px",color:"rgba(255, 255, 255, 0.6)",textTransform:"uppercase",letterSpacing:"0.5px"},d={fontSize:"16px",fontWeight:"bold",color:"#fff"},u={...d,color:"#00ff9f"},g={...d,color:"#ffaa00"},m={...d,color:"#ff4444"},l={fontSize:"11px",color:"rgba(255, 255, 255, 0.5)",marginLeft:"4px"},N={width:"100%",height:"4px",background:"rgba(255, 255, 255, 0.2)",borderRadius:"2px",overflow:"hidden",marginTop:"4px"},w=t=>({width:`${t}%`,height:"100%",background:t>90?"#ff4444":t>70?"#ffaa00":"#00ff9f",transition:"width 0.3s ease, background 0.3s ease"}),D={fontSize:"9px",color:"rgba(255, 255, 255, 0.4)",marginTop:"8px",textAlign:"center",fontStyle:"italic"};function a(t,n){return n==="fps"?t>=30?u:t>=20?g:m:t<=40?u:t<=60?g:m}function B({metrics:t,collapsed:n,onCollapse:y,onClose:b,position:c="top-left",keyboardShortcut:j="ctrl+shift+d"}){const[p,v]=x.useState(null);if(x.useEffect(()=>{const r=document.createElement("div");return r.id="xr-debugger-overlay",document.body.appendChild(r),v(r),()=>{document.body.removeChild(r)}},[]),!p)return null;const S={...P,...c==="top-right"&&{left:"auto",right:"10px"},...c==="bottom-left"&&{top:"auto",bottom:"10px"},...c==="bottom-right"&&{top:"auto",bottom:"10px",left:"auto",right:"10px"}};return C.createPortal(e.jsx("div",{style:S,children:e.jsxs("div",{style:n?k:h,children:[e.jsxs("div",{style:F,children:[e.jsx("div",{style:M,children:n?"AR Debugger":"AR Performance"}),e.jsxs("div",{style:z,children:[e.jsx("button",{style:f,onClick:()=>y(!n),onMouseEnter:r=>{r.currentTarget.style.background="rgba(255, 255, 255, 0.2)"},onMouseLeave:r=>{r.currentTarget.style.background="rgba(255, 255, 255, 0.1)"},children:n?"+":"−"}),e.jsx("button",{style:f,onClick:b,onMouseEnter:r=>{r.currentTarget.style.background="rgba(255, 255, 255, 0.2)"},onMouseLeave:r=>{r.currentTarget.style.background="rgba(255, 255, 255, 0.1)"},children:"✕"})]})]}),!n&&e.jsxs(e.Fragment,{children:[e.jsxs("div",{style:R,children:[e.jsxs("div",{style:i,children:[e.jsx("div",{style:o,children:"Camera FPS"}),e.jsxs("div",{children:[e.jsx("span",{style:a(t.cameraFPS,"fps"),children:s.formatNumber(t.cameraFPS,0)}),e.jsx("span",{style:l,children:"fps"})]})]}),e.jsxs("div",{style:i,children:[e.jsx("div",{style:o,children:"Resolution"}),e.jsx("span",{style:d,children:t.resolution})]}),e.jsxs("div",{style:i,children:[e.jsx("div",{style:o,children:"Detection"}),e.jsxs("div",{children:[e.jsx("span",{style:a(t.detectionTime,"time"),children:s.formatNumber(t.detectionTime,1)}),e.jsx("span",{style:l,children:"ms"})]})]}),e.jsxs("div",{style:i,children:[e.jsx("div",{style:o,children:"Rendering"}),e.jsxs("div",{children:[e.jsx("span",{style:a(t.renderTime,"time"),children:s.formatNumber(t.renderTime,1)}),e.jsx("span",{style:l,children:"ms"})]})]}),e.jsxs("div",{style:i,children:[e.jsx("div",{style:o,children:"Effective FPS"}),e.jsxs("div",{children:[e.jsx("span",{style:a(t.effectiveFPS,"fps"),children:s.formatNumber(t.effectiveFPS,0)}),e.jsx("span",{style:l,children:"fps"})]})]}),e.jsxs("div",{style:i,children:[e.jsx("div",{style:o,children:"Memory"}),t.memory?e.jsxs(e.Fragment,{children:[e.jsxs("div",{children:[e.jsx("span",{style:d,children:s.formatNumber(t.memory.used,0)}),e.jsxs("span",{style:l,children:["/ ",s.formatNumber(t.memory.total,0)," MB"]})]}),e.jsx("div",{style:N,children:e.jsx("div",{style:w(t.memory.percentage)})})]}):e.jsx("span",{style:d,children:"N/A"})]})]}),t.modelPerformance.length>0&&e.jsx(e.Fragment,{children:e.jsxs("div",{style:{borderTop:"1px solid rgba(255, 255, 255, 0.15)",marginTop:"12px",paddingTop:"12px"},children:[e.jsx("div",{style:o,children:"Model Performance"}),e.jsx("div",{style:{marginTop:"8px",display:"flex",flexDirection:"column",gap:"6px"},children:t.modelPerformance.map((r,T)=>e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",fontSize:"11px"},children:[e.jsx("span",{style:{color:"rgba(255, 255, 255, 0.7)"},children:r.name}),e.jsxs("div",{children:[e.jsx("span",{style:a(r.processingTime,"time"),children:s.formatNumber(r.processingTime,1)}),e.jsx("span",{style:l,children:"ms"})]})]},T))})]})}),e.jsxs("div",{style:D,children:["Press ",j.toUpperCase()," to toggle"]})]})]})}),p)}exports.DebuggerUI=B;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),x=require("react"),C=require("react-dom"),s=require("./internal-BjyhBP8i.cjs"),P={position:"fixed",top:"10px",left:"10px",zIndex:9999,fontFamily:"'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace",fontSize:"12px",color:"#fff",pointerEvents:"auto",userSelect:"none"},h={background:"rgba(0, 0, 0, 0.85)",borderRadius:"6px",padding:"12px 16px",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.5)",backdropFilter:"blur(10px)",border:"1px solid rgba(255, 255, 255, 0.1)",minWidth:"240px"},k={...h,padding:"8px 12px",minWidth:"auto"},F={display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:"12px",paddingBottom:"8px",borderBottom:"1px solid rgba(255, 255, 255, 0.2)"},M={fontSize:"13px",fontWeight:"bold",color:"#00ff9f",letterSpacing:"0.5px",textTransform:"uppercase"},z={display:"flex",gap:"6px"},f={background:"rgba(255, 255, 255, 0.1)",border:"1px solid rgba(255, 255, 255, 0.2)",borderRadius:"4px",color:"#fff",padding:"4px 8px",fontSize:"11px",cursor:"pointer",transition:"all 0.2s"},R={display:"grid",gridTemplateColumns:"1fr 1fr",gap:"10px"},i={display:"flex",flexDirection:"column",gap:"4px"},o={fontSize:"10px",color:"rgba(255, 255, 255, 0.6)",textTransform:"uppercase",letterSpacing:"0.5px"},d={fontSize:"16px",fontWeight:"bold",color:"#fff"},u={...d,color:"#00ff9f"},g={...d,color:"#ffaa00"},m={...d,color:"#ff4444"},l={fontSize:"11px",color:"rgba(255, 255, 255, 0.5)",marginLeft:"4px"},N={width:"100%",height:"4px",background:"rgba(255, 255, 255, 0.2)",borderRadius:"2px",overflow:"hidden",marginTop:"4px"},w=t=>({width:`${t}%`,height:"100%",background:t>90?"#ff4444":t>70?"#ffaa00":"#00ff9f",transition:"width 0.3s ease, background 0.3s ease"}),B={fontSize:"9px",color:"rgba(255, 255, 255, 0.4)",marginTop:"8px",textAlign:"center",fontStyle:"italic"};function a(t,n){return n==="fps"?t>=30?u:t>=20?g:m:t<=40?u:t<=60?g:m}function D({metrics:t,collapsed:n,onCollapse:y,onClose:b,position:c="top-left",keyboardShortcut:j="ctrl+shift+d"}){const[p,v]=x.useState(null);if(x.useEffect(()=>{const r=document.createElement("div");return r.id="xr-debugger-overlay",document.body.appendChild(r),v(r),()=>{document.body.removeChild(r)}},[]),!p)return null;const S={...P,...c==="top-right"&&{left:"auto",right:"10px"},...c==="bottom-left"&&{top:"auto",bottom:"10px"},...c==="bottom-right"&&{top:"auto",bottom:"10px",left:"auto",right:"10px"}};return C.createPortal(e.jsx("div",{style:S,children:e.jsxs("div",{style:n?k:h,children:[e.jsxs("div",{style:F,children:[e.jsx("div",{style:M,children:n?"AR Debugger":"AR Performance"}),e.jsxs("div",{style:z,children:[e.jsx("button",{style:f,onClick:()=>y(!n),onMouseEnter:r=>{r.currentTarget.style.background="rgba(255, 255, 255, 0.2)"},onMouseLeave:r=>{r.currentTarget.style.background="rgba(255, 255, 255, 0.1)"},children:n?"+":"−"}),e.jsx("button",{style:f,onClick:b,onMouseEnter:r=>{r.currentTarget.style.background="rgba(255, 255, 255, 0.2)"},onMouseLeave:r=>{r.currentTarget.style.background="rgba(255, 255, 255, 0.1)"},children:"✕"})]})]}),!n&&e.jsxs(e.Fragment,{children:[e.jsxs("div",{style:R,children:[e.jsxs("div",{style:i,children:[e.jsx("div",{style:o,children:"Camera FPS"}),e.jsxs("div",{children:[e.jsx("span",{style:a(t.cameraFPS,"fps"),children:s.formatNumber(t.cameraFPS,0)}),e.jsx("span",{style:l,children:"fps"})]})]}),e.jsxs("div",{style:i,children:[e.jsx("div",{style:o,children:"Resolution"}),e.jsx("span",{style:d,children:t.resolution})]}),e.jsxs("div",{style:i,children:[e.jsx("div",{style:o,children:"Detection"}),e.jsxs("div",{children:[e.jsx("span",{style:a(t.detectionTime,"time"),children:s.formatNumber(t.detectionTime,1)}),e.jsx("span",{style:l,children:"ms"})]})]}),e.jsxs("div",{style:i,children:[e.jsx("div",{style:o,children:"Rendering"}),e.jsxs("div",{children:[e.jsx("span",{style:a(t.renderTime,"time"),children:s.formatNumber(t.renderTime,1)}),e.jsx("span",{style:l,children:"ms"})]})]}),e.jsxs("div",{style:i,children:[e.jsx("div",{style:o,children:"Effective FPS"}),e.jsxs("div",{children:[e.jsx("span",{style:a(t.effectiveFPS,"fps"),children:s.formatNumber(t.effectiveFPS,0)}),e.jsx("span",{style:l,children:"fps"})]})]}),e.jsxs("div",{style:i,children:[e.jsx("div",{style:o,children:"Memory"}),t.memory?e.jsxs(e.Fragment,{children:[e.jsxs("div",{children:[e.jsx("span",{style:d,children:s.formatNumber(t.memory.used,0)}),e.jsxs("span",{style:l,children:["/ ",s.formatNumber(t.memory.total,0)," MB"]})]}),e.jsx("div",{style:N,children:e.jsx("div",{style:w(t.memory.percentage)})})]}):e.jsx("span",{style:d,children:"N/A"})]})]}),t.modelPerformance.length>0&&e.jsx(e.Fragment,{children:e.jsxs("div",{style:{borderTop:"1px solid rgba(255, 255, 255, 0.15)",marginTop:"12px",paddingTop:"12px"},children:[e.jsx("div",{style:o,children:"Model Performance"}),e.jsx("div",{style:{marginTop:"8px",display:"flex",flexDirection:"column",gap:"6px"},children:t.modelPerformance.map((r,T)=>e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",fontSize:"11px"},children:[e.jsx("span",{style:{color:"rgba(255, 255, 255, 0.7)"},children:r.name}),e.jsxs("div",{children:[e.jsx("span",{style:a(r.processingTime,"time"),children:s.formatNumber(r.processingTime,1)}),e.jsx("span",{style:l,children:"ms"})]})]},T))})]})}),e.jsxs("div",{style:B,children:["Press ",j.toUpperCase()," to toggle"]})]})]})}),p)}exports.DebuggerUI=D;

package/dist/{DebuggerUI-Dgop6Q6o.js → DebuggerUI-gLMKiVwJ.js}

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as r, Fragment as f } from "react/jsx-runtime";
 import { useState as P, useEffect as M } from "react";
 import { createPortal as F } from "react-dom";
-import { f as i } from "./internal-KOKJDxCG.js";
+import { f as i } from "./internal-Cae1ps15.js";
 const z = {
   position: "fixed",
   top: "10px",

package/dist/MediaSourceSwitcher-C-xYg0nQ.js

@@ -0,0 +1,317 @@
+import { l as z } from "./index-CY3bUAcW.js";
+import { jsx as o, jsxs as l } from "react/jsx-runtime";
+import { createPortal as L } from "react-dom";
+import { useState as p, useRef as R, useMemo as W, useEffect as b } from "react";
+import { c as i, X as $ } from "./x-Co8jPhP0.js";
+const w = (t, r) => new URL(`/assets/sdk/debug-ui/v1/${t}/${r}`, z.assetStorageEndpoint).href, v = (t) => t.replace(/\.[^.]+$/, "").replace(/[_-]+/g, " ").replace(/\s+/g, " ").trim().replace(/\b\w/g, (r) => r.toUpperCase()), E = [
+  "person_fullbody.mp4",
+  "person_looking.mp4",
+  "person_shaking_head.mp4",
+  "person_thumbUp.mp4",
+  "two_people_smiling.mp4"
+], D = [
+  "person_fist_sign.jpg",
+  "person_fullbody.jpg",
+  "person_peace_sign.jpg",
+  "person_portrait.jpg",
+  "person_side_portrait.jpg",
+  "three_people_smiling.jpg",
+  "two_people_smiling.jpg"
+], N = (t, r) => ({
+  id: `sdk-video-${r + 1}`,
+  kind: "video",
+  label: v(t),
+  url: w("videos", t)
+}), P = (t, r) => ({
+  id: `sdk-image-${r + 1}`,
+  kind: "image",
+  label: v(t),
+  url: w("images", t)
+}), V = E.map(N), U = D.map(P), he = [
+  { id: "webcam", kind: "webcam", label: "Webcam" },
+  ...V,
+  ...U
+];
+/**
+ * @license lucide-react v1.17.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const F = [
+  [
+    "path",
+    {
+      d: "M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z",
+      key: "18u6gg"
+    }
+  ],
+  ["circle", { cx: "12", cy: "13", r: "3", key: "1vg3eu" }]
+], B = i("camera", F);
+/**
+ * @license lucide-react v1.17.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const K = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], O = i("chevron-down", K);
+/**
+ * @license lucide-react v1.17.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const X = [
+  ["circle", { cx: "9", cy: "12", r: "1", key: "1vctgf" }],
+  ["circle", { cx: "9", cy: "5", r: "1", key: "hp0tcf" }],
+  ["circle", { cx: "9", cy: "19", r: "1", key: "fkjjf6" }],
+  ["circle", { cx: "15", cy: "12", r: "1", key: "1tmaij" }],
+  ["circle", { cx: "15", cy: "5", r: "1", key: "19l28e" }],
+  ["circle", { cx: "15", cy: "19", r: "1", key: "f4zoj3" }]
+], A = i("grip-vertical", X);
+/**
+ * @license lucide-react v1.17.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const G = [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", key: "1m3agn" }],
+  ["circle", { cx: "9", cy: "9", r: "2", key: "af1f0g" }],
+  ["path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21", key: "1xmnt7" }]
+], H = i("image", G);
+/**
+ * @license lucide-react v1.17.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const T = [
+  ["path", { d: "M4 5h16", key: "1tepv9" }],
+  ["path", { d: "M4 12h16", key: "1lakjw" }],
+  ["path", { d: "M4 19h16", key: "1djgab" }]
+], Y = i("menu", T);
+/**
+ * @license lucide-react v1.17.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const q = [
+  [
+    "path",
+    {
+      d: "m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5",
+      key: "ftymec"
+    }
+  ],
+  ["rect", { x: "2", y: "6", width: "14", height: "12", rx: "2", key: "158x01" }]
+], J = i("video", q), Q = (t) => t === "webcam" ? "📷 " : t === "image" ? "🖼 " : "▶ ", Z = {
+  position: "fixed",
+  zIndex: 2e4,
+  pointerEvents: "none"
+}, _ = {
+  pointerEvents: "auto",
+  border: "1px solid rgba(255, 255, 255, 0.12)",
+  background: "rgba(8, 15, 28, 0.58)",
+  boxShadow: "0 12px 32px rgba(0, 0, 0, 0.28)",
+  backdropFilter: "blur(20px) saturate(1.15)",
+  WebkitBackdropFilter: "blur(20px) saturate(1.15)",
+  color: "#f8fafc",
+  display: "flex"
+}, ee = {
+  ..._,
+  width: 34,
+  height: 34,
+  borderRadius: 17,
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  transition: "transform 150ms ease"
+}, te = {
+  ..._,
+  flexDirection: "column",
+  borderRadius: 12,
+  overflow: "hidden",
+  padding: 4,
+  gap: 4
+}, oe = {
+  display: "flex",
+  alignItems: "center",
+  gap: 3
+}, ne = {
+  width: 1,
+  height: 12,
+  background: "rgba(255, 255, 255, 0.12)",
+  margin: "0 3px"
+}, re = {
+  display: "flex",
+  width: 16,
+  height: 24,
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "grab",
+  color: "rgba(148, 163, 184, 0.8)",
+  flex: "0 0 auto"
+}, x = (t = !1) => ({
+  display: "flex",
+  width: 24,
+  height: 24,
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: 8,
+  border: `1px solid ${t ? "rgba(255, 255, 255, 0.12)" : "transparent"}`,
+  background: t ? "rgba(255, 255, 255, 0.08)" : "transparent",
+  color: t ? "#f8fafc" : "rgba(226, 232, 240, 0.72)",
+  cursor: "pointer",
+  flex: "0 0 auto",
+  transition: "background 120ms ease, color 120ms ease"
+}), ie = {
+  position: "relative",
+  display: "flex",
+  alignItems: "center"
+}, se = {
+  width: "100%",
+  minWidth: 140,
+  height: 24,
+  borderRadius: 8,
+  border: "1px solid rgba(255, 255, 255, 0.10)",
+  background: "rgba(15, 23, 42, 0.65)",
+  color: "#f8fafc",
+  fontSize: 11,
+  outline: "none",
+  paddingLeft: 7,
+  paddingRight: 20,
+  appearance: "none",
+  cursor: "pointer"
+}, ae = {
+  pointerEvents: "none",
+  position: "absolute",
+  right: 5,
+  top: 0,
+  bottom: 0,
+  display: "flex",
+  alignItems: "center",
+  color: "rgba(148, 163, 184, 0.9)"
+}, ce = {
+  height: 24,
+  display: "flex",
+  alignItems: "center",
+  padding: "0 8px",
+  borderRadius: 8,
+  border: "1px solid rgba(255, 255, 255, 0.08)",
+  background: "rgba(255, 255, 255, 0.04)",
+  color: "rgba(226, 232, 240, 0.72)",
+  fontSize: 11
+}, k = { width: 14, height: 14 }, me = ({
+  value: t,
+  onChange: r,
+  sources: s,
+  style: S
+}) => {
+  const [M, g] = p(!1), [u, j] = p({ x: 16, y: 16 }), [a, h] = p(t.kind), c = R(null), m = W(
+    () => ({
+      webcam: s.filter((e) => e.kind === "webcam"),
+      image: s.filter((e) => e.kind === "image"),
+      video: s.filter((e) => e.kind === "video")
+    }),
+    [s]
+  ), y = m[a];
+  b(() => {
+    h(t.kind);
+  }, [t.kind]);
+  const C = (e) => {
+    h(e);
+    const n = m[e][0];
+    n && r(n);
+  };
+  b(() => {
+    const e = (d) => {
+      c.current && j({
+        x: Math.max(8, d.clientX - c.current.x),
+        y: Math.max(8, d.clientY - c.current.y)
+      });
+    }, n = () => {
+      c.current = null, document.body.classList.remove("select-none");
+    };
+    return window.addEventListener("pointermove", e), window.addEventListener("pointerup", n), () => {
+      window.removeEventListener("pointermove", e), window.removeEventListener("pointerup", n);
+    };
+  }, []);
+  const f = (e) => {
+    const n = e.currentTarget.getBoundingClientRect();
+    c.current = {
+      x: e.clientX - n.left,
+      y: e.clientY - n.top
+    }, document.body.classList.add("select-none"), e.currentTarget.setPointerCapture(e.pointerId);
+  }, I = () => y.length === 0 ? /* @__PURE__ */ o("div", { style: ce, children: a === "webcam" ? "No camera source" : a === "image" ? "No image preview" : "No video preview" }) : /* @__PURE__ */ l("div", { style: ie, children: [
+    /* @__PURE__ */ o(
+      "select",
+      {
+        value: t.id,
+        onChange: (e) => {
+          const n = s.find((d) => d.id === e.target.value);
+          n && r(n);
+        },
+        style: se,
+        children: y.map((e) => /* @__PURE__ */ l("option", { value: e.id, children: [
+          Q(a),
+          e.label
+        ] }, e.id))
+      }
+    ),
+    /* @__PURE__ */ o("div", { style: ae, children: /* @__PURE__ */ o("span", { style: { width: 10, height: 10 }, children: /* @__PURE__ */ o(O, { size: 10, strokeWidth: 1.8 }) }) })
+  ] });
+  return typeof document > "u" ? null : L(
+    /* @__PURE__ */ o("div", { style: { ...Z, left: u.x, top: u.y, ...S }, children: M ? (
+      // --- Expanded State ---
+      /* @__PURE__ */ l("div", { style: te, children: [
+        /* @__PURE__ */ l("div", { style: oe, children: [
+          /* @__PURE__ */ o("div", { onPointerDown: f, style: re, title: "Drag to move", children: /* @__PURE__ */ o(A, { size: 11, strokeWidth: 2 }) }),
+          /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              onClick: () => g(!1),
+              style: x(!1),
+              title: "Close Menu",
+              children: /* @__PURE__ */ o("span", { style: k, children: /* @__PURE__ */ o($, { size: 14, strokeWidth: 1.8 }) })
+            }
+          ),
+          /* @__PURE__ */ o("div", { style: ne }),
+          ["webcam", "image", "video"].map((e) => /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              onClick: () => C(e),
+              style: x(a === e),
+              title: e.charAt(0).toUpperCase() + e.slice(1),
+              children: /* @__PURE__ */ o("span", { style: k, children: e === "webcam" ? /* @__PURE__ */ o(B, { size: 14, strokeWidth: 1.8 }) : e === "image" ? /* @__PURE__ */ o(H, { size: 14, strokeWidth: 1.8 }) : /* @__PURE__ */ o(J, { size: 14, strokeWidth: 1.8 }) })
+            },
+            e
+          ))
+        ] }),
+        I()
+      ] })
+    ) : (
+      // --- Collapsed State (Minimal FAB) ---
+      /* @__PURE__ */ o(
+        "div",
+        {
+          style: ee,
+          onClick: () => g(!0),
+          onPointerDown: f,
+          title: "Open Media Menu",
+          children: /* @__PURE__ */ o("span", { style: { width: 16, height: 16 }, children: /* @__PURE__ */ o(Y, { size: 14, strokeWidth: 1.8 }) })
+        }
+      )
+    ) }),
+    document.body
+  );
+};
+export {
+  me as M,
+  V as a,
+  he as d,
+  U as s
+};