@aaqu/fromcubes-portal-react 0.1.0-alpha.22 → 0.1.0-alpha.24

package/examples/006-pixi-portal-flow.json

@@ -1,86 +0,0 @@
-[
-  {
-    "id": "fc-pixi-flow",
-    "type": "tab",
-    "label": "PixiJS Demo",
-    "disabled": false
-  },
-  {
-    "id": "fc-pixi-comp-clicksprite",
-    "type": "fc-portal-component",
-    "z": "fc-pixi-flow",
-    "compName": "ClickableSprite",
-    "compCode": "import { Assets, Texture } from 'pixi.js';\nimport { useTick } from '@pixi/react';\n\nfunction ClickableSprite({ id, x, y, tint, onClick }) {\n  const ref = useRef(null);\n  const [texture, setTexture] = useState(Texture.EMPTY);\n  const [hovered, setHovered] = useState(false);\n  const clicks = useRef(0);\n  const time = useRef(Math.random() * Math.PI * 2);\n\n  useEffect(() => {\n    if (texture === Texture.EMPTY) {\n      Assets.load('https://pixijs.com/assets/bunny.png').then(setTexture);\n    }\n  }, [texture]);\n\n  useTick((t) => {\n    if (!ref.current) return;\n    time.current += t.deltaTime * 0.03;\n    ref.current.rotation = Math.sin(time.current) * 0.15;\n  });\n\n  return (\n    <pixiSprite\n      ref={ref}\n      texture={texture}\n      anchor={0.5}\n      x={x}\n      y={y}\n      tint={tint}\n      scale={hovered ? 2.2 : 1.8}\n      eventMode=\"static\"\n      cursor=\"pointer\"\n      onPointerOver={() => setHovered(true)}\n      onPointerOut={() => setHovered(false)}\n      onClick={() => {\n        clicks.current += 1;\n        onClick({ id, x, y, clicks: clicks.current });\n      }}\n    />\n  );\n}",
-    "compInputs": "id,x,y,tint,onClick",
-    "compOutputs": "",
-    "x": 160,
-    "y": 300,
-    "wires": []
-  },
-  {
-    "id": "fc-pixi-comp-statusbar",
-    "type": "fc-portal-component",
-    "z": "fc-pixi-flow",
-    "compName": "StatusBar",
-    "compCode": "function StatusBar({ spriteCount, totalClicks, lastClicked }) {\n  return (\n    <div className=\"px-6 py-4 bg-zinc-900/50 border-t border-zinc-800/50 flex items-center gap-6 flex-wrap\">\n      <Stat label=\"Sprites\">\n        <span className=\"text-sm font-mono text-cyan-400\">{spriteCount}</span>\n      </Stat>\n      <Stat label=\"Total clicks\">\n        <span className=\"text-sm font-mono text-emerald-400\">{totalClicks}</span>\n      </Stat>\n      <Stat label=\"Last clicked\">\n        <span className=\"text-sm font-mono text-zinc-300\">{lastClicked || '\\u2014'}</span>\n      </Stat>\n    </div>\n  );\n}",
-    "compInputs": "spriteCount,totalClicks,lastClicked",
-    "compOutputs": "",
-    "x": 360,
-    "y": 300,
-    "wires": []
-  },
-  {
-    "id": "fc-pixi-inject",
-    "type": "inject",
-    "z": "fc-pixi-flow",
-    "name": "Tick",
-    "props": [{ "p": "payload" }],
-    "repeat": "5",
-    "payload": "{}",
-    "payloadType": "json",
-    "x": 160,
-    "y": 160,
-    "wires": [["fc-pixi-func"]]
-  },
-  {
-    "id": "fc-pixi-func",
-    "type": "function",
-    "z": "fc-pixi-flow",
-    "name": "Random tint",
-    "func": "const tints = [0x22d3ee, 0xa78bfa, 0x34d399, 0xfbbf24, 0xf87171, 0x60a5fa, 0xfb923c, 0xe879f9];\nmsg.payload = {\n  tint: tints[Math.floor(Math.random() * tints.length)]\n};\nreturn msg;",
-    "outputs": 1,
-    "x": 360,
-    "y": 160,
-    "wires": [["fc-pixi-portal"]]
-  },
-  {
-    "id": "fc-pixi-portal",
-    "type": "portal-react",
-    "z": "fc-pixi-flow",
-    "name": "Pixi Portal",
-    "subPath": "pixi",
-    "pageTitle": "fromcubes Pixi",
-    "customHead": "",
-    "portalAuth": false,
-    "showWsStatus": false,
-    "libs": [
-      { "module": "pixi.js", "var": "PIXI" },
-      { "module": "@pixi/react", "var": "PixiReact" }
-    ],
-    "componentCode": "import { Sprite } from 'pixi.js';\nimport { Application, extend } from '@pixi/react';\nextend({ Sprite });\n\nfunction App() {\n  const { data, send } = useNodeRed();\n  const [sprites, setSprites] = useState([]);\n  const [totalClicks, setTotalClicks] = useState(0);\n  const [lastClicked, setLastClicked] = useState(null);\n  const idRef = useRef(0);\n\n  useEffect(() => {\n    if (!data) return;\n    setSprites(prev => {\n      const next = [...prev, {\n        id: idRef.current++,\n        x: 40 + Math.random() * 520,\n        y: 40 + Math.random() * 320,\n        tint: data.tint || 0x22d3ee\n      }];\n      return next.length > 12 ? next.slice(-12) : next;\n    });\n  }, [data]);\n\n  const handleClick = useCallback((info) => {\n    setTotalClicks(c => c + 1);\n    setLastClicked('#' + info.id);\n    send({\n      action: 'clicked',\n      spriteId: info.id,\n      x: Math.round(info.x),\n      y: Math.round(info.y),\n      spriteClicks: info.clicks,\n      timestamp: Date.now()\n    }, 'pixi/click');\n  }, [send]);\n\n  return (\n    <Page>\n      <Header title=\"fromcubes Pixi\" subtitle=\"click the bunnies\" />\n      <div className=\"flex-1 flex items-center justify-center p-6\">\n        <div className=\"rounded-xl overflow-hidden border border-zinc-800\">\n          <Application width={600} height={400} background={0x18181b} antialias>\n            {sprites.map(s => (\n              <ClickableSprite key={s.id} {...s} onClick={handleClick} />\n            ))}\n          </Application>\n        </div>\n      </div>\n      <StatusBar spriteCount={sprites.length} totalClicks={totalClicks} lastClicked={lastClicked} />\n    </Page>\n  );\n}",
-    "x": 560,
-    "y": 160,
-    "wires": [["fc-pixi-debug"]]
-  },
-  {
-    "id": "fc-pixi-debug",
-    "type": "debug",
-    "z": "fc-pixi-flow",
-    "name": "Pixi output",
-    "active": true,
-    "tosidebar": true,
-    "x": 750,
-    "y": 160,
-    "wires": []
-  }
-]

package/examples/007-webgpu-tsl-flow.json

@@ -1,85 +0,0 @@
-[
-  {
-    "id": "fc-webgpu-flow",
-    "type": "tab",
-    "label": "WebGPU TSL Demo",
-    "disabled": false
-  },
-  {
-    "id": "fc-webgpu-comp-canvas",
-    "type": "fc-portal-component",
-    "z": "fc-webgpu-flow",
-    "compName": "TSLCanvas",
-    "compCode": "import { AmbientLight, Color, Mesh, MeshStandardNodeMaterial, PerspectiveCamera, PointLight, Scene, Timer, TorusKnotGeometry, WebGPURenderer } from 'three/webgpu';\nimport { uniform, sin, cos, time, uv, vec3, mix, float, positionLocal, normalLocal } from 'three/tsl';\n\nfunction TSLCanvas({ params }) {\n  const mountRef = useRef(null);\n  const stateRef = useRef(null);\n\n  useEffect(() => {\n    const el = mountRef.current;\n    const w = el.clientWidth;\n    const h = el.clientHeight;\n\n    const scene = new Scene();\n    const camera = new PerspectiveCamera(50, w / h, 0.1, 100);\n    camera.position.z = 4;\n\n    const renderer = new WebGPURenderer({ antialias: true });\n    renderer.setSize(w, h);\n    renderer.setPixelRatio(window.devicePixelRatio);\n    el.appendChild(renderer.domElement);\n\n    scene.add(new AmbientLight(0xffffff, 0.5));\n    const point = new PointLight(0xffffff, 1.5, 100);\n    point.position.set(5, 5, 5);\n    scene.add(point);\n\n    const colorAU = uniform(new Color(0x22d3ee));\n    const colorBU = uniform(new Color(0xa78bfa));\n\n    const t = time;\n    const uvNode = uv();\n    const wave = sin(uvNode.x.mul(6.28).add(t)).mul(0.5).add(0.5);\n    const pulse = cos(t.mul(0.7)).mul(0.5).add(0.5);\n    const blend = mix(vec3(colorAU), vec3(colorBU), wave.mul(pulse));\n\n    const mat = new MeshStandardNodeMaterial();\n    mat.colorNode = blend;\n    mat.roughnessNode = float(0.3);\n    mat.metalnessNode = float(0.7);\n\n    const displaceAmount = sin(positionLocal.y.mul(4.0).add(t)).mul(0.08);\n    mat.positionNode = positionLocal.add(normalLocal.mul(displaceAmount));\n\n    const geo = new TorusKnotGeometry(1, 0.35, 128, 32);\n    const mesh = new Mesh(geo, mat);\n    scene.add(mesh);\n\n    const targetA = new Color(0x22d3ee);\n    const targetB = new Color(0xa78bfa);\n    const st = { mesh, scene, camera, renderer, colorAU, colorBU, targetA, targetB };\n    stateRef.current = st;\n\n    let raf;\n    const timer = new Timer();\n    function animate() {\n      raf = requestAnimationFrame(animate);\n      timer.update();\n      const dt = timer.getDelta();\n      mesh.rotation.x += 0.3 * dt;\n      mesh.rotation.y += 0.6 * dt;\n      st.colorAU.value.lerp(st.targetA, Math.min(1, 2.5 * dt));\n      st.colorBU.value.lerp(st.targetB, Math.min(1, 2.5 * dt));\n      renderer.render(scene, camera);\n    }\n\n    renderer.init().then(() => animate());\n\n    const onResize = () => {\n      const w2 = el.clientWidth;\n      const h2 = el.clientHeight;\n      camera.aspect = w2 / h2;\n      camera.updateProjectionMatrix();\n      renderer.setSize(w2, h2);\n    };\n    window.addEventListener('resize', onResize);\n\n    return () => {\n      cancelAnimationFrame(raf);\n      window.removeEventListener('resize', onResize);\n      renderer.dispose();\n      geo.dispose();\n      mat.dispose();\n      el.removeChild(renderer.domElement);\n    };\n  }, []);\n\n  useEffect(() => {\n    const s = stateRef.current;\n    if (!s) return;\n    s.targetA.set(params.colorA);\n    s.targetB.set(params.colorB);\n  }, [params.colorA, params.colorB]);\n\n  return <div ref={mountRef} className=\"flex-1\" />;\n}",
-    "compInputs": "params",
-    "compOutputs": "",
-    "x": 160,
-    "y": 300,
-    "wires": []
-  },
-  {
-    "id": "fc-webgpu-comp-statusbar",
-    "type": "fc-portal-component",
-    "z": "fc-webgpu-flow",
-    "compName": "TSLStatusBar",
-    "compCode": "function TSLStatusBar({ params }) {\n  return (\n    <div className=\"px-6 py-4 bg-zinc-900/50 border-t border-zinc-800/50 flex items-center gap-6 flex-wrap\">\n      <Stat label=\"Color A\">\n        <span className=\"w-4 h-4 rounded-full border border-zinc-700\" style={{backgroundColor: params.colorA}} />\n      </Stat>\n      <Stat label=\"Color B\">\n        <span className=\"w-4 h-4 rounded-full border border-zinc-700\" style={{backgroundColor: params.colorB}} />\n      </Stat>\n      <Stat label=\"Backend\">\n        <span className=\"text-xs font-mono px-2 py-0.5 rounded bg-violet-500/20 text-violet-300\">WebGPU / TSL</span>\n      </Stat>\n    </div>\n  );\n}",
-    "compInputs": "params",
-    "compOutputs": "",
-    "x": 360,
-    "y": 300,
-    "wires": []
-  },
-  {
-    "id": "fc-webgpu-inject",
-    "type": "inject",
-    "z": "fc-webgpu-flow",
-    "name": "Tick",
-    "props": [{ "p": "payload" }],
-    "repeat": "3",
-    "payload": "{}",
-    "payloadType": "json",
-    "x": 160,
-    "y": 160,
-    "wires": [["fc-webgpu-func"]]
-  },
-  {
-    "id": "fc-webgpu-func",
-    "type": "function",
-    "z": "fc-webgpu-flow",
-    "name": "Random TSL params",
-    "func": "const pairs = [\n  ['#22d3ee','#a78bfa'],\n  ['#a78bfa','#f97316'],\n  ['#34d399','#e879f9'],\n  ['#f97316','#60a5fa'],\n  ['#f87171','#34d399'],\n  ['#e879f9','#22d3ee'],\n  ['#fbbf24','#f87171']\n];\nconst p = pairs[Math.floor(Math.random() * pairs.length)];\nmsg.payload = { colorA: p[0], colorB: p[1] };\nreturn msg;",
-    "outputs": 1,
-    "x": 360,
-    "y": 160,
-    "wires": [["fc-webgpu-portal"]]
-  },
-  {
-    "id": "fc-webgpu-portal",
-    "type": "portal-react",
-    "z": "fc-webgpu-flow",
-    "name": "WebGPU Portal",
-    "subPath": "webgpu",
-    "pageTitle": "fromcubes WebGPU",
-    "customHead": "",
-    "portalAuth": false,
-    "showWsStatus": false,
-    "libs": [
-      { "module": "three", "var": "THREE" }
-    ],
-    "componentCode": "function App() {\n  const { data } = useNodeRed();\n  const params = data || { colorA: '#22d3ee', colorB: '#a78bfa' };\n\n  return (\n    <Page>\n      <Header title=\"fromcubes WebGPU\" subtitle=\"Three.js TSL + live Node-RED data\" />\n      <TSLCanvas params={params} />\n      <TSLStatusBar params={params} />\n    </Page>\n  );\n}",
-    "x": 560,
-    "y": 160,
-    "wires": [["fc-webgpu-debug"]]
-  },
-  {
-    "id": "fc-webgpu-debug",
-    "type": "debug",
-    "z": "fc-webgpu-flow",
-    "name": "WebGPU output",
-    "active": true,
-    "tosidebar": true,
-    "x": 750,
-    "y": 160,
-    "wires": []
-  }
-]

package/examples/008-utility-debounce-flow.json

@@ -1,72 +0,0 @@
-[
-  {
-    "id": "fc-util-flow",
-    "type": "tab",
-    "label": "Utility: useDebounce",
-    "disabled": false
-  },
-  {
-    "id": "fc-util-tick",
-    "type": "inject",
-    "z": "fc-util-flow",
-    "name": "Fast tick (10Hz)",
-    "props": [{ "p": "payload" }],
-    "repeat": "0.1",
-    "payload": "",
-    "payloadType": "date",
-    "x": 160,
-    "y": 160,
-    "wires": [["fc-util-noisy"]]
-  },
-  {
-    "id": "fc-util-noisy",
-    "type": "function",
-    "z": "fc-util-flow",
-    "name": "Noisy signal",
-    "func": "// Random walk between 0..120 with bursts of noise — exactly the sort of\n// fast-changing input where a debounced display is much more readable\n// than the raw value.\nconst prev = context.get('v') ?? 50;\nconst drift = (Math.random() - 0.5) * 8;\nconst noise = Math.random() < 0.15 ? (Math.random() - 0.5) * 30 : 0;\nconst v = Math.max(0, Math.min(120, prev + drift + noise));\ncontext.set('v', v);\nmsg.payload = { value: +v.toFixed(2), ts: Date.now() };\nreturn msg;",
-    "outputs": 1,
-    "x": 360,
-    "y": 160,
-    "wires": [["fc-util-portal"]]
-  },
-  {
-    "id": "fc-util-helpers",
-    "type": "fc-portal-utility",
-    "z": "fc-util-flow",
-    "name": "math helpers + useDebounce",
-    "utilName": "mathHelpers",
-    "utilCode": "// Constants — bundled once, shared across portals that reference them.\nconst CLAMP_MIN = 0;\nconst CLAMP_MAX = 100;\n\n// Pure helper.\nfunction clamp(n, min, max) {\n  return Math.max(min, Math.min(max, n));\n}\n\n// Custom React hook — name MUST start with `use` for React's rules of hooks.\n// This node groups a constant + a helper + a hook in one block; portals that\n// reference any of `clamp`, `useDebounce`, `CLAMP_MIN`, `CLAMP_MAX` pull in\n// the whole node.\nfunction useDebounce(value, ms = 300) {\n  const [v, setV] = React.useState(value);\n  React.useEffect(() => {\n    const t = setTimeout(() => setV(value), ms);\n    return () => clearTimeout(t);\n  }, [value, ms]);\n  return v;\n}",
-    "x": 160,
-    "y": 280,
-    "wires": []
-  },
-  {
-    "id": "fc-util-bar",
-    "type": "fc-portal-component",
-    "z": "fc-util-flow",
-    "name": "Bar",
-    "compName": "Bar",
-    "compCode": "function Bar({ value = 0, label = '' }) {\n  // Component uses `clamp` from the utility node — selective inclusion picks\n  // up the dependency through the components' code, not just the user JSX.\n  const pct = clamp(value, CLAMP_MIN, CLAMP_MAX);\n  const color = pct > 80 ? 'bg-red-500' : pct > 50 ? 'bg-amber-500' : 'bg-emerald-500';\n  return (\n    <div className=\"flex items-center gap-3\">\n      <div className=\"w-24 text-xs text-zinc-400 uppercase tracking-wider\">{label}</div>\n      <div className=\"flex-1 h-3 bg-zinc-800 rounded-full overflow-hidden\">\n        <div className={`h-full ${color} transition-all duration-150`} style={{ width: pct + '%' }} />\n      </div>\n      <div className=\"w-14 text-right font-mono text-sm tabular-nums text-zinc-200\">\n        {value.toFixed(1)}\n      </div>\n    </div>\n  );\n}",
-    "compInputs": "value,label",
-    "compOutputs": "",
-    "x": 360,
-    "y": 280,
-    "wires": []
-  },
-  {
-    "id": "fc-util-portal",
-    "type": "portal-react",
-    "z": "fc-util-flow",
-    "name": "Debounce demo",
-    "subPath": "debounce",
-    "pageTitle": "useDebounce demo",
-    "customHead": "",
-    "componentCode": "function App() {\n  const { data } = useNodeRed();\n  const raw = data?.value ?? 0;\n\n  // Live raw signal vs debounced views at three different windows.\n  // `useDebounce` is declared in the fc-portal-utility node — no import.\n  const slow100 = useDebounce(raw, 100);\n  const slow400 = useDebounce(raw, 400);\n  const slow1500 = useDebounce(raw, 1500);\n\n  return (\n    <div className=\"min-h-screen bg-zinc-950 text-zinc-100 p-8 font-sans\">\n      <h1 className=\"text-2xl font-light text-amber-400 mb-2\">useDebounce</h1>\n      <p className=\"text-sm text-zinc-500 mb-8\">\n        Custom hook from <code className=\"text-amber-300\">fc-portal-utility</code>. Same noisy 10 Hz input fed through different debounce windows.\n      </p>\n      <div className=\"max-w-xl space-y-4\">\n        <Bar value={raw} label=\"raw\" />\n        <Bar value={slow100} label=\"100 ms\" />\n        <Bar value={slow400} label=\"400 ms\" />\n        <Bar value={slow1500} label=\"1500 ms\" />\n      </div>\n    </div>\n  );\n}",
-    "libs": [],
-    "portalAuth": false,
-    "showWsStatus": false,
-    "x": 580,
-    "y": 160,
-    "wires": [[]]
-  }
-]