@hypertools/sdk 0.3.2 → 0.4.0

package/examples/react-landing/public/boids-flocking-project.js

@@ -0,0 +1,12 @@
+(()=>{var nt={birdCount:810,maxSpeed:5.5,separationRadius:40,alignmentRadius:50,cohesionRadius:50,separationWeight:.7000000000000001,alignmentWeight:.4,cohesionWeight:.6000000000000001,turnFactor:.9500000000000001,birdSize:2.9000000000000004,birdColor:"#ffc0cb",background:"#0a0a0a",showTrails:!1,trailOpacity:.16,liquidEffect:!1,mouseAction:2,rainbowMode:!0,colorSpeed:3.2,displayText:"\u0425 \u0423 \u0419"},V=!1,dt="transparent",X=null;async function ot(v){X=v;class n extends HTMLElement{_mount=null;_controlsContainer=null;_cleanup=void 0;_params={};_pane=null;constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){if(!this.shadowRoot||!X)return;let o=document.createElement("style");o.textContent=`
+        ${V&&typeof __THEME_CSS__<"u"?__THEME_CSS__:""}
+        :host { display: block; width: 100%; height: 100%; }
+        .mount {
+          width: 100%;
+          height: 100%;
+          position: relative;
+          overflow: hidden;
+          background: ${dt};
+        }
+        
+      `,this.shadowRoot.appendChild(o),this._mount=document.createElement("div"),this._mount.className="mount",this.shadowRoot.appendChild(this._mount),V&&(this._controlsContainer=document.createElement("div"),this._controlsContainer.className="controls-container",this.shadowRoot.appendChild(this._controlsContainer));let i=X.controls?.definitions||{};for(let[t,a]of Object.entries(i))this.getAttribute(t)!==null?this._params[t]=this._parseAttr(t,this.getAttribute(t),a):t in nt?this._params[t]=nt[t]:this._params[t]=a.value;let e=this;this._params=new Proxy(this._params,{set:(t,a,r)=>{let m=t[a];return t[a]=r,m!==r&&e.dispatchEvent(new CustomEvent("paramchange",{detail:{key:a,value:r,previousValue:m},bubbles:!0})),!0}});let l={mount:this._mount,params:this._params,exports:{setFilename:()=>{},useDefaultCanvasCapture:()=>{},captureImage:async()=>{let t=this._mount?.querySelector("canvas");if(!t)throw new Error("No canvas found");return new Promise((a,r)=>{t.toBlob(m=>m?a(m):r(new Error("Failed to capture")))})}},environment:{onResize:t=>{let a=new ResizeObserver(()=>t());return a.observe(this._mount),()=>a.disconnect()},window,document},controls:null};this._cleanup=X.setup(l),V&&this._controlsContainer&&typeof __createControls__=="function"&&__createControls__(this._params,i,this._controlsContainer,this.shadowRoot).then(t=>{this._pane=t,this._pane&&typeof __setupDraggable__=="function"&&__setupDraggable__(this._controlsContainer,this._pane)}),this.dispatchEvent(new CustomEvent("ready",{bubbles:!0}))}disconnectedCallback(){this._cleanup&&this._cleanup(),this._pane?.dispose&&this._pane.dispose()}_parseAttr(o,i,e){switch(e.type){case"number":return parseFloat(i);case"boolean":return i==="true"||i==="";default:return i}}setParam(o,i){this._params[o]=i,this._pane?.refresh()}setParams(o){for(let[i,e]of Object.entries(o))this._params[i]=e;this._pane?.refresh()}getParams(){return{...this._params}}getParamDefs(){return X?.controls?.definitions||{}}}customElements.get("boids-flocking-project")||customElements.define("boids-flocking-project",n)}var J={birdCount:{type:"number",label:"Bird Count",value:100,min:10,max:1e3,step:10},maxSpeed:{type:"number",label:"Max Speed",value:4,min:1,max:10,step:.5},separationRadius:{type:"number",label:"Separation Radius",value:25,min:10,max:100,step:5},alignmentRadius:{type:"number",label:"Alignment Radius",value:50,min:10,max:150,step:5},cohesionRadius:{type:"number",label:"Cohesion Radius",value:50,min:10,max:150,step:5},separationWeight:{type:"number",label:"Separation Weight",value:1.5,min:0,max:3,step:.1},alignmentWeight:{type:"number",label:"Alignment Weight",value:1,min:0,max:3,step:.1},cohesionWeight:{type:"number",label:"Cohesion Weight",value:1,min:0,max:3,step:.1},turnFactor:{type:"number",label:"Turn Factor",value:.2,min:.05,max:1,step:.05},birdSize:{type:"number",label:"Size Scale",value:1,min:.5,max:3,step:.1},birdColor:{type:"color",label:"Bird Color",value:"#ffc0cb"},background:{type:"color",label:"Background",value:"#0a0a0a"},showTrails:{type:"boolean",label:"Show Trails",value:!1},trailOpacity:{type:"number",label:"Trail Fade",value:.1,min:.01,max:.5,step:.01},liquidEffect:{type:"boolean",label:"Liquid Glass",value:!1},mouseAction:{type:"number",label:"Mouse: 0=Off 1=Attr 2=Repel",value:1,min:0,max:2,step:1},rainbowMode:{type:"boolean",label:"Rainbow Mode",value:!1},colorSpeed:{type:"number",label:"Color Cycle Speed",value:1,min:.1,max:10,step:.1},displayText:{type:"text",label:"Display Text",value:":==> \u0425 \u0423 \u0419 :==>"}};function it(v){v=v.replace(/^#/,"");let n=parseInt(v,16),s=n>>16&255,o=n>>8&255,i=n&255;return`${s}, ${o}, ${i}`}function q(v,n,s,o){let i=[],e=document.createElement("canvas"),l=2;e.width=s*l,e.height=o*l;let t=e.getContext("2d");if(!t)return i;let a=Math.min(s,o)*.15*l;t.font=`bold ${a}px Arial, sans-serif`,t.fillStyle="white",t.textAlign="center",t.textBaseline="middle",t.fillText(v,s*l/2,o*l/2);let m=t.getImageData(0,0,e.width,e.height).data,p=[];for(let c=0;c<e.height;c+=2)for(let d=0;d<e.width;d+=2){let _=(c*e.width+d)*4;m[_+3]>128&&p.push({x:d/l,y:c/l})}if(p.length>0)for(let c=0;c<n;c++){let d=p[Math.floor(Math.random()*p.length)];i.push({x:d.x,y:d.y})}if(i.length===0)for(let c=0;c<n;c++)i.push({x:Math.random()*s,y:Math.random()*o});return i}var I=class{x;y;vx;vy;targetX;targetY;constructor(n,s,o){o?(this.x=o.x,this.y=o.y,this.targetX=o.x,this.targetY=o.y):(this.x=Math.random()*n,this.y=Math.random()*s,this.targetX=this.x,this.targetY=this.y);let i=Math.random()*Math.PI*2,e=Math.random()*2+1;this.vx=Math.cos(i)*e,this.vy=Math.sin(i)*e}update(n,s,o,i,e=!1,l){let t=i.maxSpeed??4,a=i.separationRadius??25,r=i.alignmentRadius??50,m=i.cohesionRadius??50,p=i.separationWeight??1.5,c=i.alignmentWeight??1,d=i.cohesionWeight??1,_=i.turnFactor??.2,P=50;if(l&&l.mode!==0){let u=this.x-l.x,f=this.y-l.y,y=u*u+f*f,x=200;if(y<x*x){let A=Math.sqrt(y),k=(1-A/x)*.5;l.mode===1?(this.vx-=u/A*k*2,this.vy-=f/A*k*2):l.mode===2&&(this.vx+=u/A*k*4,this.vy+=f/A*k*4)}}if(e){let u=this.targetX-this.x,f=this.targetY-this.y,y=Math.sqrt(u*u+f*f);y>1&&(this.vx+=u/y*.5,this.vy+=f/y*.5)}let W=0,L=0,w=0,M=0,E=0,T=0,F=0,Y=0,H=0;for(let u of n){if(u===this)continue;let f=this.x-u.x,y=this.y-u.y,x=Math.sqrt(f*f+y*y);x<a&&x>0&&(W+=f/x,L+=y/x,w++),x<r&&(M+=u.vx,E+=u.vy,T++),x<m&&(F+=u.x,Y+=u.y,H++)}w>0&&(W/=w,L/=w,this.vx+=W*p*.05,this.vy+=L*p*.05),T>0&&(M/=T,E/=T,this.vx+=(M-this.vx)*c*.05,this.vy+=(E-this.vy)*c*.05),H>0&&(F/=H,Y/=H,this.vx+=(F-this.x)*d*.001,this.vy+=(Y-this.y)*d*.001),this.x<P&&(this.vx+=_),this.x>s-P&&(this.vx-=_),this.y<P&&(this.vy+=_),this.y>o-P&&(this.vy-=_);let z=Math.sqrt(this.vx*this.vx+this.vy*this.vy);z>t&&(this.vx=this.vx/z*t,this.vy=this.vy/z*t),this.x+=this.vx,this.y+=this.vy,this.x<0&&(this.x=s),this.x>s&&(this.x=0),this.y<0&&(this.y=o),this.y>o&&(this.y=0)}draw(n,s,o,i,e,l){let t=e?`hsl(${l}, 80%, 60%)`:s;if(i){n.beginPath(),n.arc(this.x,this.y,6*o,0,Math.PI*2),n.fillStyle=t,n.fill();return}let a=Math.atan2(this.vy,this.vx);n.save(),n.translate(this.x,this.y),n.rotate(a),n.fillStyle=t,n.strokeStyle=t,n.lineWidth=1*o;let r=15*o,m=5*o;n.fillRect(-r/2,-m/2,r,m);let p=4*o;n.beginPath(),n.arc(r/2,0,p,0,Math.PI*2),n.fill();let c=3*o,d=2*o;n.beginPath(),n.arc(-r/2-c/2,-d,c,0,Math.PI*2),n.fill(),n.beginPath(),n.arc(-r/2-c/2,d,c,0,Math.PI*2),n.fill(),n.restore()}};function st(v){let{mount:n,params:s,exports:o,environment:i}=v,e=document.createElement("canvas");e.style.width="100%",e.style.height="100%",e.style.display="block",n.appendChild(e);let l=e.getContext("2d");if(!l)throw new Error("Unable to obtain 2D rendering context");o.setFilename("boids-flocking"),o.useDefaultCanvasCapture(!0);let t=[],a=0,r=0,m=!1,p=!1,c=0,d=0,_=!1,P=s.displayText??"HYPERTOOL",W=0,L=0,w=100,M=[],E=0,T=0,F=()=>{let{clientWidth:b,clientHeight:R}=n,O=window.devicePixelRatio||1;e.width=Math.max(1,Math.floor(b*O)),e.height=Math.max(1,Math.floor(R*O)),l.resetTransform(),l.scale(O,O),a=e.clientWidth,r=e.clientHeight,E=Math.ceil(a/w),T=Math.ceil(r/w),M=new Array(E*T);for(let C=0;C<M.length;C++)M[C]=[];if(m){let C=Math.floor(s.birdCount??100);if(t.length!==C){let S=s.displayText??"HYPERTOOL",$=q(S,C,a,r);t=[];for(let B=0;B<C;B++)t.push(new I(a,r,$[B]))}}};F(),i.onResize(F);let Y=Math.floor(s.birdCount??100),H=s.displayText??"HYPERTOOL",z=q(H,Y,a,r);for(let b=0;b<Y;b++)t.push(new I(a,r,z[b]));m=!0;let u=()=>{_=!0,d=Date.now()},f=()=>{_=!1},y=()=>{_=!1},x=b=>{let R=e.getBoundingClientRect();W=b.clientX-R.left,L=b.clientY-R.top};e.addEventListener("mousedown",u),e.addEventListener("mouseup",f),e.addEventListener("mouseleave",y),e.addEventListener("mousemove",x);let A=()=>{if(_&&!p&&Date.now()-d>=500){p=!0,c=180,_=!1;let R=t.length,O=s.displayText??"HYPERTOOL",C=q(O,R,a,r);for(let S=0;S<t.length;S++)t[S].targetX=C[S].x,t[S].targetY=C[S].y}},k=0,Q=()=>{A(),p&&(c--,c<=0&&(p=!1));let b=s.displayText??"HYPERTOOL";if(b!==P){P=b;let h=q(b,t.length,a,r);for(let g=0;g<t.length;g++)t[g].targetX=h[g].x,t[g].targetY=h[g].y}let R=Math.floor(s.birdCount??100);if(t.length<R){let h=R-t.length,g=q(b,h,a,r);for(let D=0;D<h;D++)t.push(new I(a,r,g[D]))}else t.length>R&&(t=t.slice(0,R));let O=s.showTrails??!1,C=s.trailOpacity??.1,S=s.background??"#0a0a0a",$=s.birdColor??"#ffc0cb",B=s.birdSize??1;O?l.fillStyle=`rgba(${it(S)}, ${C})`:l.fillStyle=S,l.fillRect(0,0,a,r);let Z=s.liquidEffect??!1,at=s.rainbowMode??!1,rt=s.colorSpeed??1,lt=s.mouseAction??1,ct=Date.now()*.05*rt;Z?e.style.filter="blur(8px) contrast(15)":e.style.filter="none";for(let h=0;h<M.length;h++)M[h].length=0;for(let h of t){let g=Math.floor(h.x/w),D=Math.floor(h.y/w);g>=0&&g<E&&D>=0&&D<T&&M[D*E+g].push(h)}let ut={x:W,y:L,mode:lt};t.forEach((h,g)=>{let D=Math.floor(h.x/w),ht=Math.floor(h.y/w),tt=[];for(let j=-1;j<=1;j++)for(let N=-1;N<=1;N++){let G=D+N,U=ht+j;if(G>=0&&G<E&&U>=0&&U<T){let et=M[U*E+G];for(let K=0;K<et.length;K++)tt.push(et[K])}}h.update(tt,a,r,s,p,ut),h.draw(l,$,B,Z,at,ct+g*5)}),k=window.requestAnimationFrame(Q)};return k=window.requestAnimationFrame(Q),()=>{window.cancelAnimationFrame(k),e.removeEventListener("mousedown",u),e.removeEventListener("mouseup",f),e.removeEventListener("mouseleave",y),e.removeEventListener("mousemove",x),e.remove()}}ot({controls:{definitions:J,options:{title:"BOIDS Flocking"}},exportWidget:{filename:"boids-flocking",useCanvasCapture:!0,enabled:!0},setup:st}).catch(v=>{console.error("[boids] Failed to initialise sandbox",v)});})();

package/examples/react-landing/src/App.css

@@ -0,0 +1,379 @@
+/* Landing Page with Experience Background */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.landing-page {
+  position: relative;
+  width: 100vw;
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+/* Background Experience - full screen, behind everything */
+.experience-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+
+.experience-background boids-flocking-project {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* Foreground Content - fixed at bottom center */
+.landing-content {
+  position: fixed;
+  bottom: 2rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: white;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+/* Hero Section */
+.hero {
+  text-align: center;
+  padding: 4rem 2rem;
+  max-width: 800px;
+}
+
+.hero h1 {
+  font-size: clamp(2rem, 5vw, 4rem);
+  margin-bottom: 1rem;
+  font-weight: 700;
+}
+
+.tagline {
+  font-size: clamp(1rem, 2vw, 1.5rem);
+  opacity: 0.9;
+}
+
+/* Control Panel - for demo purposes */
+.control-panel {
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 2rem;
+  max-width: 400px;
+  width: 100%;
+}
+
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.panel-header h2 {
+  font-size: 1.25rem;
+  margin: 0;
+}
+
+.help-button {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  background: transparent;
+  color: white;
+  font-size: 0.8rem;
+  cursor: pointer;
+  opacity: 0.6;
+  transition: opacity 0.2s;
+}
+
+.help-button:hover {
+  opacity: 1;
+}
+
+.sdk-info {
+  font-size: 0.75rem;
+  opacity: 0.6;
+  text-align: center;
+  margin-bottom: 1rem;
+  font-family: monospace;
+}
+
+/* Preset buttons */
+.preset-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.preset-button {
+  flex: 1;
+  min-width: 60px;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.05);
+  color: white;
+  font-size: 0.75rem;
+  text-transform: capitalize;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.preset-button:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.preset-button.selected {
+  background: rgba(102, 126, 234, 0.4);
+  border-color: rgba(102, 126, 234, 0.8);
+  box-shadow: 0 0 8px rgba(102, 126, 234, 0.4);
+}
+
+.custom-config-hint {
+  font-size: 0.7rem;
+  opacity: 0.5;
+  text-align: center;
+  margin: -0.5rem 0 1rem;
+  font-style: italic;
+}
+
+.idle-indicator {
+  font-size: 0.7rem;
+  text-align: center;
+  margin-top: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  background: rgba(102, 126, 234, 0.3);
+  border-radius: 4px;
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 0.6; }
+  50% { opacity: 1; }
+}
+
+.control-group {
+  margin-bottom: 1.25rem;
+}
+
+.control-group label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  font-size: 0.9rem;
+}
+
+.control-group input[type="range"] {
+  width: 100%;
+  height: 6px;
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.2);
+  cursor: pointer;
+}
+
+.control-group input[type="text"] {
+  padding: 0.5rem;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+  font-size: 1rem;
+}
+
+.control-group input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  margin-right: 0.5rem;
+}
+
+.control-group label:has(input[type="checkbox"]) {
+  flex-direction: row;
+  align-items: center;
+}
+
+.button-group {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.action-button,
+.reset-button {
+  flex: 1;
+  padding: 0.75rem;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 8px;
+  background: transparent;
+  color: white;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.action-button {
+  background: rgba(102, 126, 234, 0.3);
+  border-color: rgba(102, 126, 234, 0.5);
+}
+
+.action-button:hover {
+  background: rgba(102, 126, 234, 0.5);
+}
+
+.action-button.active {
+  background: rgba(102, 126, 234, 0.6);
+  border-color: rgba(102, 126, 234, 0.8);
+  box-shadow: 0 0 8px rgba(102, 126, 234, 0.4);
+}
+
+.reset-button:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* Shortcuts overlay */
+.shortcuts-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+}
+
+.shortcuts-panel {
+  background: rgba(30, 30, 40, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 2rem;
+  max-width: 400px;
+  color: white;
+}
+
+.shortcuts-panel h3 {
+  font-size: 1.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.shortcuts-subtitle {
+  font-size: 0.75rem;
+  opacity: 0.6;
+  margin-bottom: 1.5rem;
+}
+
+.shortcuts-panel ul {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 1.5rem;
+}
+
+.shortcuts-panel li {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.shortcuts-panel kbd {
+  background: rgba(255, 255, 255, 0.1);
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 0.8rem;
+  min-width: 40px;
+  text-align: center;
+}
+
+.close-button {
+  width: 100%;
+  padding: 0.75rem;
+  border: none;
+  border-radius: 8px;
+  background: rgba(102, 126, 234, 0.5);
+  color: white;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.close-button:hover {
+  background: rgba(102, 126, 234, 0.7);
+}
+
+/* Features Section */
+.features {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 2rem;
+  padding: 3rem 0;
+  max-width: 900px;
+  width: 100%;
+}
+
+.feature {
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(10px);
+  border-radius: 12px;
+  padding: 1.5rem;
+  text-align: center;
+}
+
+.feature h3 {
+  font-size: 1.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.feature p {
+  opacity: 0.8;
+  font-size: 0.9rem;
+}
+
+/* CTA Section */
+.cta {
+  display: flex;
+  gap: 1rem;
+  padding: 2rem 0;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.primary-button,
+.secondary-button {
+  padding: 1rem 2rem;
+  border-radius: 8px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.primary-button {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border: none;
+  color: white;
+}
+
+.primary-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
+}
+
+.secondary-button {
+  background: transparent;
+  border: 2px solid white;
+  color: white;
+}
+
+.secondary-button:hover {
+  background: rgba(255, 255, 255, 0.1);
+  transform: translateY(-2px);
+}