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

package/dist/components/index.d.ts

@@ -1,21 +1,40 @@
 export * from './AspectRatioContainer';
+export * from './Axes';
 export * from './BodyTracker';
 export * from './FaceTracker';
 export * from './FaceMesh';
 export * from './FaceRetouch';
+export * from './FaceWarp3D';
 export * from './GestureTracker';
 export * from './GestureTrigger';
 export * from './HandTracker';
+export * from './HandTracking3D';
+export * from './HandTracking2DController';
+export * from './HandTracking2D';
+export * from './HandJoints2D';
 export * from './HeadBinding';
 export * from './HeadBindingOccluder';
 export * from './HeadOccluder';
+export * from './MeshRenderer';
+export * from './LightObject';
+export * from './LookAt';
 export * from './Panel';
+export * from './PinToMesh';
 export * from './PerspectiveCamera';
+export * from './RenderGroupLayer';
+export * from './ScreenImage';
+export * from './ScreenGradient';
+export * from './ScreenGlass';
+export * from './ScreenShape';
+export * from './SceneObjectRenderer';
+export * from './SequentialRenderPasses';
 export * from './ScreenSpaceUI';
+export * from './ScreenText';
 export * from './Segmentation';
 export * from './SpriteAnimation';
 export * from './TextLabel';
 export * from './TrackingAnchor';
+export * from './Transform3D';
 export * from './VideoBackground';
 export * from './XRProvider';
 export * from './XRCompositor';

package/dist/contexts-BKvTIayr.cjs

@@ -0,0 +1 @@
+"use strict";const p=require("react/jsx-runtime"),y=require("@react-three/fiber"),l=require("react"),N=require("three"),M=require("./renderLayers-lDtL0_43.cjs"),X=require("./selectors-2QvO5RYY.cjs"),j=require("./index-D4bLzBr6.cjs"),D=require("./index-CEc1CAmB.cjs");function U(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const o in t)if(o!=="default"){const c=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(n,o,c.get?c:{enumerable:!0,get:()=>t[o]})}}return n.default=t,Object.freeze(n)}const S=U(N),A={display:"flex",alignItems:"center",justifyContent:"center",height:"100%",background:"#363636",color:"white",fontFamily:"monospace"},$=()=>p.jsx("div",{style:A,children:"Loading..."}),H=t=>p.jsx("div",{style:A,children:t.error}),_={position:"absolute",top:0,left:0,width:"100%",height:"100%",zIndex:10},F={sceneColorTexture:null,sceneDepthTexture:null},G=({onRenderOutputs:t,renderOutputs:n,size:o})=>{const{gl:c,scene:a,size:x}=y.useThree(),{session:s}=j.useXRContext(),r=Math.max(1,Math.round((o==null?void 0:o.width)??x.width)),h=Math.max(1,Math.round((o==null?void 0:o.height)??x.height)),u=!!(n.sceneColor||n.sceneDepth),i=l.useMemo(()=>{if(!u)return null;const e=new S.WebGLRenderTarget(r,h,{colorSpace:S.SRGBColorSpace,depthBuffer:!0,stencilBuffer:!1});return n.sceneDepth&&(e.depthTexture=new S.DepthTexture(r,h),e.depthTexture.format=S.DepthFormat,e.depthTexture.type=S.UnsignedShortType),e},[u,h,n.sceneDepth,r]);return l.useEffect(()=>{if(!i){t==null||t(F);return}return t==null||t({sceneColorTexture:n.sceneColor?i.texture:null,sceneDepthTexture:n.sceneDepth&&i.depthTexture?i.depthTexture:null}),()=>{var e;i.dispose(),(e=i.depthTexture)==null||e.dispose(),t==null||t(F)}},[t,n.sceneColor,n.sceneDepth,i]),y.useFrame(()=>{if(!i)return;const e=[];n.excludeScreenUI!==!1&&a.traverse(d=>{d.visible&&d.renderOrder>=M.RENDER_LAYERS.SCREEN_UI&&(e.push(d),d.visible=!1)});const g=c.getRenderTarget(),f=c.xr.enabled;c.xr.enabled=!1,c.setRenderTarget(i),c.clear(),s._renderFrame(),c.setRenderTarget(g),c.xr.enabled=f,e.forEach(d=>{d.visible=!0})},-100),null},W=({style:t,canvasProps:n,children:o,loadingComponent:c,loadingTransitionDuration:a,errorComponent:x,renderTargetSize:s,renderOutputs:r={},onRenderOutputs:h})=>{const u=l.useRef(null),i=l.useRef(null),e=l.useRef(null),g=l.useRef(!1),{session:f}=j.useXRContext(),d=X.useXRReady(),T=X.useXRError(),[C,v]=l.useState(!0);return l.useEffect(()=>{if(s){f._setRenderSize(Math.round(s.width),Math.round(s.height));return}const m=(w,R)=>{w<=0||R<=0||f._setRenderSize(Math.round(w),Math.round(R))},b=()=>{!i.current||g.current||(g.current=!0,f._setRenderTarget(i.current))},B=(w,R)=>{e.current!==null&&cancelAnimationFrame(e.current),e.current=requestAnimationFrame(()=>{e.current=null,m(w,R)})},E=new ResizeObserver(w=>{const R=w[0];if(!R)return;const{width:Y,height:I}=R.contentRect;b(),B(Y,I)});return u.current&&E.observe(u.current),b(),()=>{E.disconnect(),e.current!==null&&(cancelAnimationFrame(e.current),e.current=null),g.current=!1}},[s,f]),l.useEffect(()=>{d&&(a?setTimeout(()=>{v(!1)},a):v(!1))},[d,a]),p.jsxs("div",{id:"vincentt-xr-container",ref:u,style:{width:"100%",height:"100%",...t,position:"relative"},children:[C&&p.jsx("div",{style:_,children:c||p.jsx($,{})}),T&&p.jsx("div",{style:_,children:x||p.jsx(H,{error:T.message})}),p.jsxs(y.Canvas,{id:"vincentt-xr-canvas",ref:i,dpr:[1,3],gl:{alpha:!0,preserveDrawingBuffer:!1,antialias:!0,premultipliedAlpha:!1,toneMapping:S.NoToneMapping},...n,onCreated:m=>{s?f._setRenderSize(Math.round(s.width),Math.round(s.height)):f._setRenderTarget(i.current),f._setR3FState({renderer:m.gl,scene:m.scene,camera:m.camera}),m.gl.outputColorSpace=S.SRGBColorSpace,n!=null&&n.onCreated&&n.onCreated(m)},children:[p.jsx(G,{onRenderOutputs:h,renderOutputs:r,size:s}),o]})]})},L=(t,n,o,c,a)=>{const x=t/2,s=n/2,r=o.left*x+c.left,h=o.right*x-c.right,u=o.bottom*s+c.bottom,i=o.top*s-c.top,e=h-r,g=i-u,f=(r+h)/2,d=(u+i)/2,T=a[0]*e/2,C=a[1]*g/2;return{centerX:f,centerY:d,width:e,height:g,pivotX:T,pivotY:C}},k={left:0,right:0,top:0,bottom:0},J={left:0,right:0,top:0,bottom:0},K=[0,0],Q=({anchors:t,offsets:n,pivot:o=K,children:c})=>{const{width:a,height:x}=D.useScreenSpace(),s=l.useMemo(()=>({anchors:{...k,...t??{}},offsets:{...J,...n??{}}}),[t,n]),r=l.useMemo(()=>L(a,x,s.anchors,s.offsets,o),[a,x,s,o]);l.useEffect(()=>{const e=s.anchors;e.left>e.right&&console.warn(`[ScreenTransform] inverted X axis: anchors.left (${e.left}) > anchors.right (${e.right})`),e.bottom>e.top&&console.warn(`[ScreenTransform] inverted Y axis: anchors.bottom (${e.bottom}) > anchors.top (${e.top})`),r.width<=0&&console.warn(`[ScreenTransform] zero or negative width (${r.width.toFixed(3)}) — anchors + offsets collapse the X extent`),r.height<=0&&console.warn(`[ScreenTransform] zero or negative height (${r.height.toFixed(3)}) — anchors + offsets collapse the Y extent`)},[s,r.width,r.height]);const h=o[0]!==0||o[1]!==0,u=h?[1,1,1]:[r.width,r.height,1],i=!h&&r.width>0&&r.height>0?r.width/r.height:null;return p.jsx("group",{position:[r.centerX-r.pivotX,r.centerY-r.pivotY,0],scale:u,renderOrder:M.RENDER_LAYERS.SCREEN_UI,children:p.jsx(D.ScreenRectAspectContext.Provider,{value:i,children:c})})},q=l.createContext(null),V=l.createContext(null),Z=()=>l.useContext(q),P=()=>l.useContext(V);exports.ScreenTransform=Q;exports.XRScene=W;exports.XRViewportRenderOutputsContext=V;exports.XRViewportStateContext=q;exports.computeScreenTransform=L;exports.useXRViewportRenderOutputs=P;exports.useXRViewportState=Z;

package/dist/contexts-Bk5zz_VR.js

@@ -0,0 +1,214 @@
+import { jsx as p, jsxs as F } from "react/jsx-runtime";
+import { Canvas as N, useThree as V, useFrame as H } from "@react-three/fiber";
+import { useRef as T, useState as G, useEffect as v, useMemo as y, useContext as _, createContext as A } from "react";
+import * as S from "three";
+import { R as L } from "./renderLayers-zrK2pv5O.js";
+import { u as W, a as j } from "./selectors-Dw3C-gSk.js";
+import { u as B } from "./index-JygePOwo.js";
+import { u as k, S as q } from "./index-CTHeBQOs.js";
+const I = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  height: "100%",
+  background: "#363636",
+  color: "white",
+  fontFamily: "monospace"
+}, J = () => /* @__PURE__ */ p("div", { style: I, children: "Loading..." }), K = (n) => /* @__PURE__ */ p("div", { style: I, children: n.error }), D = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  width: "100%",
+  height: "100%",
+  zIndex: 10
+}, M = {
+  sceneColorTexture: null,
+  sceneDepthTexture: null
+}, Q = ({
+  onRenderOutputs: n,
+  renderOutputs: r,
+  size: s
+}) => {
+  const { gl: i, scene: a, size: u } = V(), { session: o } = B(), t = Math.max(1, Math.round((s == null ? void 0 : s.width) ?? u.width)), l = Math.max(1, Math.round((s == null ? void 0 : s.height) ?? u.height)), h = !!(r.sceneColor || r.sceneDepth), c = y(() => {
+    if (!h) return null;
+    const e = new S.WebGLRenderTarget(t, l, {
+      colorSpace: S.SRGBColorSpace,
+      depthBuffer: !0,
+      stencilBuffer: !1
+    });
+    return r.sceneDepth && (e.depthTexture = new S.DepthTexture(t, l), e.depthTexture.format = S.DepthFormat, e.depthTexture.type = S.UnsignedShortType), e;
+  }, [h, l, r.sceneDepth, t]);
+  return v(() => {
+    if (!c) {
+      n == null || n(M);
+      return;
+    }
+    return n == null || n({
+      sceneColorTexture: r.sceneColor ? c.texture : null,
+      sceneDepthTexture: r.sceneDepth && c.depthTexture ? c.depthTexture : null
+    }), () => {
+      var e;
+      c.dispose(), (e = c.depthTexture) == null || e.dispose(), n == null || n(M);
+    };
+  }, [n, r.sceneColor, r.sceneDepth, c]), H(() => {
+    if (!c) return;
+    const e = [];
+    r.excludeScreenUI !== !1 && a.traverse((f) => {
+      f.visible && f.renderOrder >= L.SCREEN_UI && (e.push(f), f.visible = !1);
+    });
+    const m = i.getRenderTarget(), d = i.xr.enabled;
+    i.xr.enabled = !1, i.setRenderTarget(c), i.clear(), o._renderFrame(), i.setRenderTarget(m), i.xr.enabled = d, e.forEach((f) => {
+      f.visible = !0;
+    });
+  }, -100), null;
+}, le = ({
+  style: n,
+  canvasProps: r,
+  children: s,
+  loadingComponent: i,
+  loadingTransitionDuration: a,
+  errorComponent: u,
+  renderTargetSize: o,
+  renderOutputs: t = {},
+  onRenderOutputs: l
+}) => {
+  const h = T(null), c = T(null), e = T(null), m = T(!1), { session: d } = B(), f = W(), w = j(), [C, b] = G(!0);
+  return v(() => {
+    if (o) {
+      d._setRenderSize(
+        Math.round(o.width),
+        Math.round(o.height)
+      );
+      return;
+    }
+    const g = (R, x) => {
+      R <= 0 || x <= 0 || d._setRenderSize(Math.round(R), Math.round(x));
+    }, E = () => {
+      !c.current || m.current || (m.current = !0, d._setRenderTarget(c.current));
+    }, U = (R, x) => {
+      e.current !== null && cancelAnimationFrame(e.current), e.current = requestAnimationFrame(() => {
+        e.current = null, g(R, x);
+      });
+    }, X = new ResizeObserver((R) => {
+      const x = R[0];
+      if (!x) return;
+      const { width: Y, height: $ } = x.contentRect;
+      E(), U(Y, $);
+    });
+    return h.current && X.observe(h.current), E(), () => {
+      X.disconnect(), e.current !== null && (cancelAnimationFrame(e.current), e.current = null), m.current = !1;
+    };
+  }, [o, d]), v(() => {
+    f && (a ? setTimeout(() => {
+      b(!1);
+    }, a) : b(!1));
+  }, [f, a]), /* @__PURE__ */ F(
+    "div",
+    {
+      id: "vincentt-xr-container",
+      ref: h,
+      style: {
+        width: "100%",
+        height: "100%",
+        ...n,
+        position: "relative"
+      },
+      children: [
+        C && /* @__PURE__ */ p("div", { style: D, children: i || /* @__PURE__ */ p(J, {}) }),
+        w && /* @__PURE__ */ p("div", { style: D, children: u || /* @__PURE__ */ p(K, { error: w.message }) }),
+        /* @__PURE__ */ F(
+          N,
+          {
+            id: "vincentt-xr-canvas",
+            ref: c,
+            dpr: [1, 3],
+            gl: {
+              alpha: !0,
+              // Keep the framebuffer transient by default so resize/layout changes
+              // do not leave an old frame hanging around. Apps that need capture
+              // can opt back in via `canvasProps.gl`.
+              preserveDrawingBuffer: !1,
+              antialias: !0,
+              premultipliedAlpha: !1,
+              // Disable alpha premultiplication
+              toneMapping: S.NoToneMapping
+              // Disable tone mapping for accurate video colors
+            },
+            ...r,
+            onCreated: (g) => {
+              o ? d._setRenderSize(
+                Math.round(o.width),
+                Math.round(o.height)
+              ) : d._setRenderTarget(c.current), d._setR3FState({
+                renderer: g.gl,
+                scene: g.scene,
+                camera: g.camera
+              }), g.gl.outputColorSpace = S.SRGBColorSpace, r != null && r.onCreated && r.onCreated(g);
+            },
+            children: [
+              /* @__PURE__ */ p(
+                Q,
+                {
+                  onRenderOutputs: l,
+                  renderOutputs: t,
+                  size: o
+                }
+              ),
+              s
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, Z = (n, r, s, i, a) => {
+  const u = n / 2, o = r / 2, t = s.left * u + i.left, l = s.right * u - i.right, h = s.bottom * o + i.bottom, c = s.top * o - i.top, e = l - t, m = c - h, d = (t + l) / 2, f = (h + c) / 2, w = a[0] * e / 2, C = a[1] * m / 2;
+  return { centerX: d, centerY: f, width: e, height: m, pivotX: w, pivotY: C };
+}, z = { left: 0, right: 0, top: 0, bottom: 0 }, P = { left: 0, right: 0, top: 0, bottom: 0 }, O = [0, 0], he = ({
+  anchors: n,
+  offsets: r,
+  pivot: s = O,
+  children: i
+}) => {
+  const { width: a, height: u } = k(), o = y(
+    () => ({
+      anchors: { ...z, ...n ?? {} },
+      offsets: { ...P, ...r ?? {} }
+    }),
+    [n, r]
+  ), t = y(
+    () => Z(a, u, o.anchors, o.offsets, s),
+    [a, u, o, s]
+  );
+  v(() => {
+    const e = o.anchors;
+    e.left > e.right && console.warn(
+      `[ScreenTransform] inverted X axis: anchors.left (${e.left}) > anchors.right (${e.right})`
+    ), e.bottom > e.top && console.warn(
+      `[ScreenTransform] inverted Y axis: anchors.bottom (${e.bottom}) > anchors.top (${e.top})`
+    ), t.width <= 0 && console.warn(
+      `[ScreenTransform] zero or negative width (${t.width.toFixed(3)}) — anchors + offsets collapse the X extent`
+    ), t.height <= 0 && console.warn(
+      `[ScreenTransform] zero or negative height (${t.height.toFixed(3)}) — anchors + offsets collapse the Y extent`
+    );
+  }, [o, t.width, t.height]);
+  const l = s[0] !== 0 || s[1] !== 0, h = l ? [1, 1, 1] : [t.width, t.height, 1], c = !l && t.width > 0 && t.height > 0 ? t.width / t.height : null;
+  return /* @__PURE__ */ p(
+    "group",
+    {
+      position: [t.centerX - t.pivotX, t.centerY - t.pivotY, 0],
+      scale: h,
+      renderOrder: L.SCREEN_UI,
+      children: /* @__PURE__ */ p(q.Provider, { value: c, children: i })
+    }
+  );
+}, ee = A(null), te = A(null), de = () => _(ee), fe = () => _(te);
+export {
+  he as S,
+  le as X,
+  ee as a,
+  te as b,
+  Z as c,
+  fe as d,
+  de as u
+};

package/dist/debug-ui/component-editor/index.d.ts

@@ -0,0 +1,19 @@
+import { ComponentType } from 'react';
+import { SceneComponent, SceneComponentId, SceneComponentType } from '../../scene-object';
+export type ComponentEditorProps<TType extends SceneComponentType = SceneComponentType> = {
+    component: SceneComponent<TType>;
+    onChange?: (next: SceneComponent<TType>) => void;
+};
+export type ComponentEditorRegistry = Partial<{
+    [TType in SceneComponentType]: ComponentType<ComponentEditorProps<TType>>;
+}>;
+export type ComponentEditorPropsForLookup = {
+    component: SceneComponent;
+    editors?: ComponentEditorRegistry;
+    onChange?: (next: SceneComponent) => void;
+};
+export declare const ComponentEditorFallback: ({ component }: {
+    component: SceneComponent;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ComponentEditor: ({ component, editors, onChange, }: ComponentEditorPropsForLookup) => import("react/jsx-runtime").JSX.Element;
+export declare const createComponentIdLabel: (componentId: SceneComponentId) => string;

package/dist/debug-ui/default-setting/index.d.ts

@@ -0,0 +1,37 @@
+import { CSSProperties, ReactNode } from 'react';
+import { ScreenAnchorEdges, ScreenOffsetEdges } from '../../components/ScreenSpaceUI/ScreenTransform';
+type SectionState = {
+    enabled: boolean;
+};
+export type DefaultSettingValue = {
+    transform: SectionState & {
+        anchors: Required<ScreenAnchorEdges>;
+        offsets: Required<ScreenOffsetEdges>;
+        pivot: [number, number];
+    };
+    material: SectionState & {
+        text: string;
+        fontSize: number;
+        color: string;
+        bgColor: string;
+        borderRadius: number;
+        aspect: number;
+        opacity: number;
+        padding: number;
+        borderWidth: number;
+        borderColor: string;
+    };
+    textLabel: SectionState & {
+        position: [number, number, number];
+        rotation: [number, number, number];
+        scale: [number, number, number];
+    };
+};
+export type DefaultSettingPanelProps = {
+    style?: CSSProperties;
+    value?: DefaultSettingValue;
+    onChange?: (value: DefaultSettingValue) => void;
+    children?: ReactNode;
+};
+export declare const DefaultSettingPanel: ({ style, value, onChange, children, }: DefaultSettingPanelProps) => import('react').ReactPortal | null;
+export {};

package/dist/debug-ui/default-setting.cjs

@@ -0,0 +1,21 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),V=require("react-dom"),g=require("react"),j=require("../x-KC8E4Gaj.cjs");/**
+ * @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=[["path",{d:"m7 15 5 5 5-5",key:"1hf1tw"}],["path",{d:"m7 9 5-5 5 5",key:"sgt6xg"}]],A=j.createLucideIcon("chevrons-up-down",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 F=[["rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2",key:"17jyea"}],["path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2",key:"zix9uf"}]],O=j.createLucideIcon("copy",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 $=[["path",{d:"M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z",key:"e79jfc"}],["circle",{cx:"13.5",cy:"6.5",r:".5",fill:"currentColor",key:"1okk4w"}],["circle",{cx:"17.5",cy:"10.5",r:".5",fill:"currentColor",key:"f64h9f"}],["circle",{cx:"6.5",cy:"12.5",r:".5",fill:"currentColor",key:"qy21gx"}],["circle",{cx:"8.5",cy:"7.5",r:".5",fill:"currentColor",key:"fotxhn"}]],q=j.createLucideIcon("palette",$);/**
+ * @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 U=[["path",{d:"M12 2v10",key:"mnfbl"}],["path",{d:"M18.4 6.6a9 9 0 1 1-12.77.04",key:"obofu9"}]],K=j.createLucideIcon("power",U),Y={transform:{enabled:!0,anchors:{left:-.5,right:.5,top:.2,bottom:-.2},offsets:{left:0,right:0,top:0,bottom:0},pivot:[0,0]},material:{enabled:!0,text:"Hello from Vincentt",fontSize:220,color:"#ffffff",bgColor:"#14286e",borderRadius:24,aspect:3,opacity:1,padding:32,borderWidth:0,borderColor:"transparent"},textLabel:{enabled:!0,position:[0,0,0],rotation:[0,0,0],scale:[1,1,1]}},G={position:"fixed",left:14,top:104,zIndex:2e4,pointerEvents:"none"},N={pointerEvents:"auto",width:298,borderRadius:16,border:"1px solid rgba(255,255,255,0.12)",background:"rgba(8, 15, 28, 0.58)",boxShadow:"0 16px 36px rgba(0,0,0,0.28)",backdropFilter:"blur(20px) saturate(1.1)",WebkitBackdropFilter:"blur(20px) saturate(1.1)",color:"#f8fafc",overflow:"hidden"},Z={...N,width:32,height:32,borderRadius:16,display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer"},H={display:"flex",width:14,height:14,alignItems:"center",justifyContent:"center",color:"#f8fafc"},J={display:"flex",alignItems:"center",gap:7,padding:"7px 8px",borderBottom:"1px solid rgba(255,255,255,0.08)"},Q={width:16,height:16,display:"flex",alignItems:"center",justifyContent:"center",cursor:"grab",color:"rgba(148,163,184,0.82)",flex:"0 0 auto"},ee={display:"flex",alignItems:"center",gap:6,fontSize:11,fontWeight:600,letterSpacing:.2,minWidth:0},z={display:"flex",width:18,height:18,alignItems:"center",justifyContent:"center",borderRadius:6,background:"rgba(255,255,255,0.08)",border:"1px solid rgba(255,255,255,0.08)",color:"#e2e8f0",flex:"0 0 auto"},te={display:"inline-flex",alignItems:"center",justifyContent:"center",height:24,padding:"0 8px 0 7px",borderRadius:8,border:"1px solid rgba(255,255,255,0.10)",background:"rgba(255,255,255,0.05)",color:"#e2e8f0",fontSize:10,cursor:"pointer",gap:5},le={display:"inline-flex",alignItems:"center",justifyContent:"center",width:24,height:24,borderRadius:8,border:"1px solid rgba(255,255,255,0.10)",background:"rgba(255,255,255,0.05)",color:"#e2e8f0",cursor:"pointer",padding:0,flex:"0 0 auto"},se={display:"flex",flexDirection:"column",gap:6,padding:7},ae={borderRadius:12,border:"1px solid rgba(255,255,255,0.08)",background:"rgba(255,255,255,0.03)",overflow:"hidden"},ie={display:"flex",alignItems:"center",gap:7,padding:"6px 7px"},oe={display:"flex",alignItems:"center",gap:6,fontSize:11,fontWeight:500,flex:"1 1 auto",minWidth:0},ne={width:28,height:16,borderRadius:999,border:"1px solid rgba(255,255,255,0.10)",background:"rgba(255,255,255,0.08)",padding:2,display:"flex",alignItems:"center",cursor:"pointer",flex:"0 0 auto"},re=r=>({width:10,height:10,borderRadius:999,background:r?"#f8fafc":"rgba(148,163,184,0.7)",transform:r?"translateX(12px)":"translateX(0)",transition:"transform 140ms ease, background 140ms ease"}),de={display:"grid",gap:7,padding:"0 7px 7px"},I={display:"grid",gap:5},v={fontSize:9,color:"rgba(226,232,240,0.66)",letterSpacing:.4,textTransform:"uppercase"},S={display:"grid",gridTemplateColumns:"repeat(2, minmax(0, 1fr))",gap:6},i={display:"flex",flexDirection:"column",gap:4},o={fontSize:9,color:"rgba(226,232,240,0.72)",letterSpacing:.2},M={width:"100%",height:24,borderRadius:7,border:"1px solid rgba(255,255,255,0.10)",background:"rgba(15,23,42,0.68)",color:"#f8fafc",fontSize:10.5,outline:"none",padding:"0 7px",boxSizing:"border-box"},C={width:"100%",height:24,borderRadius:7,border:"1px solid rgba(255,255,255,0.10)",background:"rgba(15,23,42,0.68)",color:"#f8fafc",fontSize:10.5,outline:"none",padding:2,boxSizing:"border-box",cursor:"pointer"},ce={...M,fontVariantNumeric:"tabular-nums"},R={width:12,height:12,display:"flex"},D=()=>e.jsx(K,{size:12,strokeWidth:1.9}),xe=()=>e.jsx(q,{size:12,strokeWidth:1.9}),pe=()=>e.jsx(O,{size:12,strokeWidth:1.9}),be=()=>e.jsx("svg",{width:"11",height:"15",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{d:"M8 6a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM8 12a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM8 18a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM16 6a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM16 12a2 2 0 1 1-4 0 2 2 0 0 1 4 0zM16 18a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"})}),ye=r=>/^-?\d*(\.\d*)?$/.test(r),d=({value:r,onChange:h,step:x=1})=>{const[b,y]=g.useState(String(r));return g.useEffect(()=>{y(String(r))},[r]),e.jsx("input",{type:"text",inputMode:"decimal",pattern:"-?[0-9]*[.,]?[0-9]*",style:ce,value:b,onChange:n=>{const c=n.target.value;if(!ye(c)||(y(c),c===""||c==="-"||c==="."||c==="-."))return;const p=Number(c);Number.isNaN(p)||h(p)},onBlur:()=>{if(b===""||b==="-"||b==="."||b==="-."){y(String(r));return}const n=Number(b);if(Number.isNaN(n)){y(String(r));return}y(String(n)),n!==r&&h(n)},onKeyDown:n=>{if(n.key!=="ArrowUp"&&n.key!=="ArrowDown")return;n.preventDefault();const c=n.shiftKey?x*10:n.altKey?x/10:x,p=n.key==="ArrowUp"?r+c:r-c,u=Number.isInteger(p)?p:Number(p.toFixed(6));y(String(u)),h(u)}})},ge=({style:r,value:h,onChange:x,children:b})=>{const[y,n]=g.useState(!0),[c,p]=g.useState(!1),[u,T]=g.useState({x:14,y:104}),[W,E]=g.useState(Y),f=g.useRef(null),s=h??W,a=l=>{const t=l(s);h||E(t),x==null||x(t)};g.useEffect(()=>{const l=m=>{f.current&&T({x:Math.max(8,m.clientX-f.current.x),y:Math.max(8,m.clientY-f.current.y)})},t=()=>{f.current=null,document.body.classList.remove("select-none")};return window.addEventListener("pointermove",l),window.addEventListener("pointerup",t),()=>{window.removeEventListener("pointermove",l),window.removeEventListener("pointerup",t)}},[]);const P=async()=>{await navigator.clipboard.writeText(JSON.stringify(s,null,2)),p(!0),window.setTimeout(()=>p(!1),1200)},B=l=>{const t=l.currentTarget.getBoundingClientRect();f.current={x:l.clientX-t.left,y:l.clientY-t.top},document.body.classList.add("select-none"),l.currentTarget.setPointerCapture(l.pointerId)},w=(l,t,m,_,k)=>e.jsxs("div",{style:ae,children:[e.jsxs("div",{style:ie,children:[e.jsx("button",{type:"button",onClick:()=>a(L=>({...L,[l]:{...L[l],enabled:!L[l].enabled}})),style:ne,"aria-label":`Toggle ${t}`,children:e.jsx("div",{style:re(k)})}),e.jsxs("div",{style:oe,children:[e.jsx("span",{style:z,children:m}),e.jsx("span",{children:t})]})]}),k?e.jsx("div",{style:de,children:_}):null]},l);return typeof document>"u"?null:V.createPortal(e.jsx("div",{style:{...G,left:u.x,top:u.y,...r},children:y?e.jsxs("div",{style:N,children:[e.jsxs("div",{style:J,children:[e.jsx("div",{onPointerDown:B,style:Q,title:"Drag to move",children:e.jsx(be,{})}),e.jsxs("div",{style:ee,children:[e.jsx("span",{style:z,children:e.jsx(D,{})}),e.jsx("span",{children:"Default Setting"})]}),e.jsx("div",{style:{flex:"1 1 auto"}}),e.jsxs("button",{type:"button",onClick:P,style:te,title:"Copy config",children:[e.jsx("span",{style:R,children:e.jsx(pe,{})}),c?"Copied":"Copy"]}),e.jsx("button",{type:"button",onClick:()=>n(!1),style:le,title:"Collapse","aria-label":"Collapse Default Setting",children:e.jsx("span",{style:R,children:e.jsx(j.X,{size:12,strokeWidth:1.9})})})]}),e.jsx("div",{style:se,children:b??e.jsxs(e.Fragment,{children:[w("material","Material",e.jsx(xe,{}),e.jsx("div",{style:I,children:e.jsxs("div",{style:S,children:[e.jsxs("label",{style:i,children:[e.jsx("span",{style:o,children:"Text"}),e.jsx("input",{style:M,value:s.material.text,onChange:l=>a(t=>({...t,material:{...t.material,text:l.target.value}}))})]}),e.jsxs("label",{style:i,children:[e.jsx("span",{style:o,children:"Font Size (1)"}),e.jsx(d,{value:s.material.fontSize,onChange:l=>a(t=>({...t,material:{...t.material,fontSize:l}}))})]}),e.jsxs("label",{style:i,children:[e.jsx("span",{style:o,children:"Color"}),e.jsx("input",{type:"color",style:C,value:s.material.color,onChange:l=>a(t=>({...t,material:{...t.material,color:l.target.value}}))})]}),e.jsxs("label",{style:i,children:[e.jsx("span",{style:o,children:"BG"}),e.jsx("input",{type:"color",style:C,value:s.material.bgColor,onChange:l=>a(t=>({...t,material:{...t.material,bgColor:l.target.value}}))})]}),e.jsxs("label",{style:i,children:[e.jsx("span",{style:o,children:"Radius (1)"}),e.jsx(d,{value:s.material.borderRadius,onChange:l=>a(t=>({...t,material:{...t.material,borderRadius:l}}))})]}),e.jsxs("label",{style:i,children:[e.jsx("span",{style:o,children:"Aspect (1)"}),e.jsx(d,{value:s.material.aspect,onChange:l=>a(t=>({...t,material:{...t.material,aspect:l}}))})]}),e.jsxs("label",{style:i,children:[e.jsx("span",{style:o,children:"Padding (1)"}),e.jsx(d,{value:s.material.padding,onChange:l=>a(t=>({...t,material:{...t.material,padding:l}}))})]}),e.jsxs("label",{style:i,children:[e.jsx("span",{style:o,children:"Opacity"}),e.jsx(d,{value:s.material.opacity,onChange:l=>a(t=>({...t,material:{...t.material,opacity:l}}))})]}),e.jsxs("label",{style:i,children:[e.jsx("span",{style:o,children:"Border"}),e.jsx("input",{type:"color",style:C,value:s.material.borderColor,onChange:l=>a(t=>({...t,material:{...t.material,borderColor:l.target.value}}))})]}),e.jsxs("label",{style:i,children:[e.jsx("span",{style:o,children:"Border W (1)"}),e.jsx(d,{value:s.material.borderWidth,onChange:l=>a(t=>({...t,material:{...t.material,borderWidth:l}}))})]})]})}),s.material.enabled),w("textLabel","TextLabel",e.jsx(D,{}),e.jsxs("div",{style:I,children:[e.jsx("div",{style:v,children:"Position (0.1)"}),e.jsxs("div",{style:S,children:[e.jsxs("label",{style:i,children:[e.jsx("span",{style:o,children:"X (0.1)"}),e.jsx(d,{value:s.textLabel.position[0],step:.1,onChange:l=>a(t=>({...t,textLabel:{...t.textLabel,position:[l,t.textLabel.position[1],t.textLabel.position[2]]}}))})]}),e.jsxs("label",{style:i,children:[e.jsx("span",{style:o,children:"Y (0.1)"}),e.jsx(d,{value:s.textLabel.position[1],step:.1,onChange:l=>a(t=>({...t,textLabel:{...t.textLabel,position:[t.textLabel.position[0],l,t.textLabel.position[2]]}}))})]}),e.jsxs("label",{style:i,children:[e.jsx("span",{style:o,children:"Z (0.1)"}),e.jsx(d,{value:s.textLabel.position[2],step:.1,onChange:l=>a(t=>({...t,textLabel:{...t.textLabel,position:[t.textLabel.position[0],t.textLabel.position[1],l]}}))})]})]}),e.jsx("div",{style:v,children:"Rotation (deg)"}),e.jsxs("div",{style:S,children:[e.jsxs("label",{style:i,children:[e.jsx("span",{style:o,children:"X (deg)"}),e.jsx(d,{value:s.textLabel.rotation[0],step:1,onChange:l=>a(t=>({...t,textLabel:{...t.textLabel,rotation:[l,t.textLabel.rotation[1],t.textLabel.rotation[2]]}}))})]}),e.jsxs("label",{style:i,children:[e.jsx("span",{style:o,children:"Y (deg)"}),e.jsx(d,{value:s.textLabel.rotation[1],step:1,onChange:l=>a(t=>({...t,textLabel:{...t.textLabel,rotation:[t.textLabel.rotation[0],l,t.textLabel.rotation[2]]}}))})]}),e.jsxs("label",{style:i,children:[e.jsx("span",{style:o,children:"Z (deg)"}),e.jsx(d,{value:s.textLabel.rotation[2],step:1,onChange:l=>a(t=>({...t,textLabel:{...t.textLabel,rotation:[t.textLabel.rotation[0],t.textLabel.rotation[1],l]}}))})]})]}),e.jsx("div",{style:v,children:"Scale (1)"}),e.jsxs("div",{style:S,children:[e.jsxs("label",{style:i,children:[e.jsx("span",{style:o,children:"X (1)"}),e.jsx(d,{value:s.textLabel.scale[0],step:1,onChange:l=>a(t=>({...t,textLabel:{...t.textLabel,scale:[l,t.textLabel.scale[1],t.textLabel.scale[2]]}}))})]}),e.jsxs("label",{style:i,children:[e.jsx("span",{style:o,children:"Y (1)"}),e.jsx(d,{value:s.textLabel.scale[1],step:1,onChange:l=>a(t=>({...t,textLabel:{...t.textLabel,scale:[t.textLabel.scale[0],l,t.textLabel.scale[2]]}}))})]}),e.jsxs("label",{style:i,children:[e.jsx("span",{style:o,children:"Z (1)"}),e.jsx(d,{value:s.textLabel.scale[2],step:1,onChange:l=>a(t=>({...t,textLabel:{...t.textLabel,scale:[t.textLabel.scale[0],t.textLabel.scale[1],l]}}))})]})]})]}),s.textLabel.enabled)]})})]}):e.jsx("div",{role:"button",tabIndex:0,onClick:()=>n(!0),onKeyDown:l=>{(l.key==="Enter"||l.key===" ")&&(l.preventDefault(),n(!0))},style:Z,title:"Open Default Setting","aria-label":"Open Default Setting",children:e.jsx("span",{style:H,children:e.jsx(A,{size:14,strokeWidth:1.8})})})}),document.body)};exports.DefaultSettingPanel=ge;