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

package/dist/components/index.d.ts

@@ -3,15 +3,22 @@ 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 './Panel';
 export * from './PerspectiveCamera';
+export * from './ScreenImage';
 export * from './ScreenSpaceUI';
+export * from './ScreenText';
 export * from './Segmentation';
 export * from './SpriteAnimation';
 export * from './TextLabel';

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;