@gigo-ui/components 1.0.0-release → 1.0.1

package/dist/components/chaos/ShatterPane.svelte

@@ -0,0 +1,84 @@
+<!-- Glass shatter wrapper — Voronoi fracture engine -->
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import type { Snippet } from 'svelte';
+  import { captureSnapshot } from '../../utils/destruction-engine.js';
+
+  export interface ShatterPaneProps {
+    isShattered?: boolean;
+    shardCount?: number;
+    intensity?: number;
+    tint?: string;
+    debugMode?: boolean;
+    class?: string;
+    children: Snippet;
+  }
+
+  let {
+    isShattered = $bindable(false),
+    shardCount = 48,
+    intensity = 7,
+    tint = 'rgba(180,220,255,0.08)',
+    debugMode = false,
+    class: className = '',
+    children,
+  }: ShatterPaneProps = $props();
+
+  let wrapper: HTMLDivElement | undefined = $state();
+  let snapshotData: string | null         = $state(null);
+  let snapshotRect: DOMRect | null        = $state(null);
+  let isCapturing                         = $state(false);
+  let EngineComponent: any                = $state(null);
+  let hidden                              = $state(false);
+
+  $effect(() => {
+    if (isShattered && !snapshotData && !isCapturing && wrapper) {
+      doCapture();
+    }
+  });
+
+  async function doCapture() {
+    if (!wrapper || isCapturing) return;
+    isCapturing = true;
+    try {
+      const result = await captureSnapshot(wrapper);
+      snapshotRect = result.rect;
+      snapshotData = result.dataURL;
+      hidden = true;
+      const mod = await import('./internal/ShatterEngine.svelte');
+      EngineComponent = mod.default;
+    } catch (err) {
+      if (debugMode) console.error('[ShatterPane] capture failed', err);
+      hidden = false;
+    } finally {
+      isCapturing = false;
+    }
+  }
+
+  export function shatter() { if (wrapper) { isShattered = true; doCapture(); } }
+  export function restore() {
+    isShattered = false;
+    hidden = false; snapshotData = null; snapshotRect = null; EngineComponent = null;
+  }
+</script>
+
+<div
+  bind:this={wrapper}
+  class={className}
+  style:visibility={hidden ? 'hidden' : 'visible'}
+  data-gigo-shatter="true"
+>
+  {@render children()}
+</div>
+
+{#if EngineComponent && snapshotData && snapshotRect}
+  {@const Engine = EngineComponent}
+  <Engine
+    snapshot={snapshotData}
+    rect={snapshotRect}
+    {shardCount}
+    {intensity}
+    {tint}
+    {debugMode}
+  />
+{/if}

package/dist/components/chaos/ShatterPane.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+export interface ShatterPaneProps {
+    isShattered?: boolean;
+    shardCount?: number;
+    intensity?: number;
+    tint?: string;
+    debugMode?: boolean;
+    class?: string;
+    children: Snippet;
+}
+declare const ShatterPane: import("svelte").Component<ShatterPaneProps, {
+    shatter: () => void;
+    restore: () => void;
+}, "isShattered">;
+type ShatterPane = ReturnType<typeof ShatterPane>;
+export default ShatterPane;

package/dist/components/chaos/internal/BlackHoleEngine.svelte

@@ -0,0 +1,167 @@
+<!-- Gravitational singularity — Canvas2D particle warp -->
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { mountPortalCanvas, loadImage, rand } from '../../../utils/destruction-engine.js';
+
+  interface Props {
+    snapshot: string;
+    rect: DOMRect;
+    resolution?: number;
+    intensity?: number;   // 0–10 suck speed
+    glowColor?: string;   // CSS colour for the accretion ring
+    debugMode?: boolean;
+  }
+
+  let {
+    snapshot, rect,
+    resolution = 4,
+    intensity = 7,
+    glowColor = 'rgba(255,120,0,0.7)',
+    debugMode = false,
+  }: Props = $props();
+
+  let destroyed = false;
+  let rafId = 0;
+  let disposeCallbacks: Array<() => void> = [];
+
+  onMount(async () => {
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const dpr = window.devicePixelRatio ?? 1;
+
+    const canvas = mountPortalCanvas(vw * dpr, vh * dpr);
+    canvas.style.width  = '100vw';
+    canvas.style.height = '100vh';
+    disposeCallbacks.push(() => canvas.remove());
+
+    const ctx = canvas.getContext('2d')!;
+    ctx.scale(dpr, dpr);
+
+    const img = await loadImage(snapshot);
+
+    // Sample at resolution
+    const cols = Math.ceil(rect.width  / resolution);
+    const rows = Math.ceil(rect.height / resolution);
+
+    const offscreen  = new OffscreenCanvas(cols, rows);
+    const offCtx     = offscreen.getContext('2d')!;
+    offCtx.drawImage(img, 0, 0, cols, rows);
+    const imgData    = offCtx.getImageData(0, 0, cols, rows);
+    const pixels     = imgData.data;
+
+    // Singularity centre in canvas coords
+    const bx = rect.left + rect.width  / 2;
+    const by = rect.top  + rect.height / 2;
+
+    interface Particle {
+      x: number; y: number;
+      ox: number; oy: number; // origin
+      r: number; g: number; b: number; a: number;
+      alive: boolean;
+    }
+
+    const particles: Particle[] = [];
+
+    for (let row = 0; row < rows; row++) {
+      for (let col = 0; col < cols; col++) {
+        const pIdx = (row * cols + col) * 4;
+        if (pixels[pIdx + 3] < 10) continue;
+        const px = rect.left + col * resolution;
+        const py = rect.top  + row * resolution;
+        particles.push({
+          x: px, y: py, ox: px, oy: py,
+          r: pixels[pIdx], g: pixels[pIdx + 1], b: pixels[pIdx + 2],
+          a: pixels[pIdx + 3] / 255,
+          alive: true,
+        });
+      }
+    }
+
+    const pw = resolution;
+    let t = 0;  // normalised time 0→1
+
+    // Accretion glow ring radii
+    let ringR = Math.max(rect.width, rect.height) * 0.55;
+
+    function tick() {
+      if (destroyed) return;
+      ctx.clearRect(0, 0, vw, vh);
+
+      t += 0.012 * (1 + intensity * 0.08);
+
+      // Strength grows exponentially — slow suck at first, violent at end
+      const s = Math.pow(t, 2.2) * intensity * 0.18;
+
+      // ── Accretion disk glow ──────────────────────────────────────────────
+      ringR = Math.max(rect.width, rect.height) * 0.55 * (1 - t * 0.9);
+      if (ringR > 1) {
+        const grad = ctx.createRadialGradient(bx, by, ringR * 0.3, bx, by, ringR);
+        grad.addColorStop(0,   'transparent');
+        grad.addColorStop(0.6, glowColor);
+        grad.addColorStop(1,   'transparent');
+        ctx.globalAlpha = Math.min(t * 2, 1) * 0.8;
+        ctx.fillStyle = grad;
+        ctx.beginPath();
+        ctx.arc(bx, by, ringR, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.globalAlpha = 1;
+      }
+
+      // ── Dark core that grows ─────────────────────────────────────────────
+      const coreR = ringR * 0.25 * t;
+      if (coreR > 0.5) {
+        ctx.fillStyle = 'black';
+        ctx.beginPath();
+        ctx.arc(bx, by, coreR, 0, Math.PI * 2);
+        ctx.fill();
+      }
+
+      let anyAlive = false;
+
+      particles.forEach((p) => {
+        if (!p.alive) return;
+
+        const dx = bx - p.x;
+        const dy = by - p.y;
+        const dist = Math.sqrt(dx * dx + dy * dy) + 0.001;
+
+        // Gravitational acceleration (stronger near centre)
+        const accel = s * (1 / (dist * 0.05 + 1));
+        p.x += (dx / dist) * accel;
+        p.y += (dy / dist) * accel;
+
+        // Swirl tangential component (accretion disk spin)
+        const swirl = s * 0.5;
+        p.x += (-dy / dist) * swirl;
+        p.y +=  (dx / dist) * swirl;
+
+        // Fade as they approach centre
+        const newDist = Math.sqrt((bx - p.x) ** 2 + (by - p.y) ** 2);
+        p.a = Math.max(0, p.a - (newDist < 8 ? 0.1 : 0.002));
+
+        if (newDist < 3 || p.a <= 0) { p.alive = false; return; }
+
+        anyAlive = true;
+
+        // Particle redness increases near singularity (gravitational redshift effect)
+        const heat = Math.min((1 - newDist / Math.max(rect.width, rect.height)) * 2, 1);
+        const rs = Math.min(255, p.r + heat * 80);
+        const gs = Math.max(0, p.g  - heat * 60);
+        const bs = Math.max(0, p.b  - heat * 120);
+
+        ctx.fillStyle = `rgba(${rs|0},${gs|0},${bs|0},${p.a})`;
+        ctx.fillRect(p.x, p.y, pw, pw);
+      });
+
+      if (anyAlive || t < 1) rafId = requestAnimationFrame(tick);
+    }
+
+    rafId = requestAnimationFrame(tick);
+  });
+
+  onDestroy(() => {
+    destroyed = true;
+    cancelAnimationFrame(rafId);
+    disposeCallbacks.forEach((fn) => fn());
+  });
+</script>

package/dist/components/chaos/internal/BlackHoleEngine.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    snapshot: string;
+    rect: DOMRect;
+    resolution?: number;
+    intensity?: number;
+    glowColor?: string;
+    debugMode?: boolean;
+}
+declare const BlackHoleEngine: import("svelte").Component<Props, {}, "">;
+type BlackHoleEngine = ReturnType<typeof BlackHoleEngine>;
+export default BlackHoleEngine;

package/dist/components/chaos/internal/CompactorEngine.svelte

@@ -0,0 +1,195 @@
+<!-- Voxel crush engine — Three.js InstancedMesh + Rapier3D rigid bodies -->
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import {
+    mountPortalCanvas,
+    loadImage,
+    cellUV,
+    rand,
+    randSign,
+  } from '../../../utils/destruction-engine.js';
+
+  interface Props {
+    snapshot: string;
+    rect: DOMRect;
+    cols?: number;
+    rows?: number;
+    intensity?: number;
+    debugMode?: boolean;
+  }
+
+  let {
+    snapshot, rect,
+    cols = 20, rows = 20,
+    intensity = 7,
+    debugMode = false,
+  }: Props = $props();
+
+  let canvas: HTMLCanvasElement | null = null;
+  let rafId = 0;
+  let destroyed = false;
+  let cleanup: Array<() => void> = [];
+
+  onMount(async () => {
+    const [THREE, RAPIER] = await Promise.all([
+      import('three'),
+      import('@dimforge/rapier3d-compat'),
+    ]);
+    await RAPIER.init();
+    if (destroyed) return;
+
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const dpr = window.devicePixelRatio ?? 1;
+
+    // portal canvas — fixed overlay
+    canvas = mountPortalCanvas(vw * dpr, vh * dpr);
+    canvas.style.width = '100vw';
+    canvas.style.height = '100vh';
+
+    const renderer = new THREE.WebGLRenderer({
+      canvas, alpha: true, antialias: true, powerPreference: 'high-performance',
+    });
+    renderer.setPixelRatio(dpr);
+    renderer.setSize(vw, vh, false);
+    cleanup.push(() => renderer.dispose());
+
+    const scene = new THREE.Scene();
+    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 1000);
+    camera.position.z = 10;
+
+    // texture from snapshot
+    const img = await loadImage(snapshot);
+    const texture = new THREE.Texture(img);
+    texture.needsUpdate = true;
+    texture.minFilter = THREE.LinearFilter;
+    texture.magFilter = THREE.LinearFilter;
+    cleanup.push(() => texture.dispose());
+
+    // cell dimensions in NDC space
+    const cellW = (rect.width / vw) * 2 / cols;
+    const cellH = (rect.height / vh) * 2 / rows;
+    const depth = Math.min(cellW, cellH) * 0.5;
+    const total = cols * rows;
+
+    const geo = new THREE.BoxGeometry(cellW, cellH, depth);
+    cleanup.push(() => geo.dispose());
+
+    // per-instance UV data so each shard shows its own slice
+    const uvOff = new Float32Array(total * 2);
+    const uvRep = new Float32Array(total * 2);
+    for (let r = 0; r < rows; r++) {
+      for (let c = 0; c < cols; c++) {
+        const i = r * cols + c;
+        const uv = cellUV(c, r, cols, rows);
+        uvOff[i * 2] = uv.offsetX;
+        uvOff[i * 2 + 1] = uv.offsetY;
+        uvRep[i * 2] = uv.repeatX;
+        uvRep[i * 2 + 1] = uv.repeatY;
+      }
+    }
+
+    const material = new THREE.ShaderMaterial({
+      uniforms: { uTexture: { value: texture } },
+      vertexShader: `
+        attribute vec2 instanceUVOffset;
+        attribute vec2 instanceUVRepeat;
+        varying vec2 vUV;
+        void main() {
+          vUV = uv * instanceUVRepeat + instanceUVOffset;
+          gl_Position = projectionMatrix * modelViewMatrix * instanceMatrix * vec4(position, 1.0);
+        }`,
+      fragmentShader: `
+        uniform sampler2D uTexture;
+        varying vec2 vUV;
+        void main() {
+          gl_FragColor = texture2D(uTexture, vUV);
+          if (gl_FragColor.a < 0.01) discard;
+        }`,
+      transparent: true,
+    });
+    cleanup.push(() => material.dispose());
+
+    const mesh = new THREE.InstancedMesh(geo, material, total);
+    mesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
+    geo.setAttribute('instanceUVOffset', new THREE.InstancedBufferAttribute(uvOff, 2));
+    geo.setAttribute('instanceUVRepeat', new THREE.InstancedBufferAttribute(uvRep, 2));
+    scene.add(mesh);
+
+    // physics
+    const world = new RAPIER.World({ x: 0, y: -9.81 * (1 + intensity * 0.3), z: 0 });
+    cleanup.push(() => world.free());
+
+    // floor
+    world.createCollider(RAPIER.ColliderDesc.cuboid(10, 0.01, 10).setTranslation(0, -1.05, 0));
+
+    // rect origin in NDC
+    const ndcL = (rect.left / vw) * 2 - 1;
+    const ndcT = -((rect.top / vh) * 2 - 1);
+    const cx = ndcL + (rect.width / vw);
+    const cy = ndcT - (rect.height / vh);
+
+    const dummy = new THREE.Object3D();
+    const bodies: ReturnType<typeof world.createRigidBody>[] = [];
+
+    for (let r = 0; r < rows; r++) {
+      for (let c = 0; c < cols; c++) {
+        const x = ndcL + (c + 0.5) * cellW;
+        const y = ndcT - (r + 0.5) * cellH;
+
+        const body = world.createRigidBody(
+          RAPIER.RigidBodyDesc.dynamic()
+            .setTranslation(x, y, 0)
+            .setLinearDamping(0.2)
+            .setAngularDamping(0.3)
+        );
+
+        world.createCollider(
+          RAPIER.ColliderDesc.cuboid(cellW * 0.45, cellH * 0.45, depth * 0.45)
+            .setRestitution(0.25).setFriction(0.6),
+          body
+        );
+
+        // implosion toward centre
+        const dx = cx - x, dy = cy - y;
+        const dist = Math.sqrt(dx * dx + dy * dy) + 0.001;
+        const str = intensity * 0.8;
+        body.applyImpulse({ x: (dx / dist) * str, y: (dy / dist) * str, z: rand(-0.1, 0.1) }, true);
+        body.applyTorqueImpulse({ x: randSign() * rand(0, 0.05), y: randSign() * rand(0, 0.05), z: randSign() * rand(0, 0.3) }, true);
+
+        bodies.push(body);
+      }
+    }
+
+    // gravity kick after implosion phase
+    setTimeout(() => {
+      if (destroyed) return;
+      bodies.forEach((b) => b.applyImpulse({ x: 0, y: -intensity * 0.4, z: 0 }, true));
+    }, 500);
+
+    function tick() {
+      if (destroyed) return;
+      world.step();
+      for (let i = 0; i < total; i++) {
+        const t = bodies[i].translation();
+        const q = bodies[i].rotation();
+        dummy.position.set(t.x, t.y, t.z);
+        dummy.quaternion.set(q.x, q.y, q.z, q.w);
+        dummy.updateMatrix();
+        mesh.setMatrixAt(i, dummy.matrix);
+      }
+      mesh.instanceMatrix.needsUpdate = true;
+      renderer.render(scene, camera);
+      rafId = requestAnimationFrame(tick);
+    }
+
+    rafId = requestAnimationFrame(tick);
+  });
+
+  onDestroy(() => {
+    destroyed = true;
+    cancelAnimationFrame(rafId);
+    cleanup.forEach((fn) => fn());
+    canvas?.remove();
+  });
+</script>

package/dist/components/chaos/internal/CompactorEngine.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    snapshot: string;
+    rect: DOMRect;
+    cols?: number;
+    rows?: number;
+    intensity?: number;
+    debugMode?: boolean;
+}
+declare const CompactorEngine: import("svelte").Component<Props, {}, "">;
+type CompactorEngine = ReturnType<typeof CompactorEngine>;
+export default CompactorEngine;

package/dist/components/chaos/internal/PixelDissolveEngine.svelte

@@ -0,0 +1,168 @@
+<!-- Per-pixel dissolution with wave contagion — Canvas2D -->
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { mountPortalCanvas, loadImage, rand, randSign } from '../../../utils/destruction-engine.js';
+
+  interface Props {
+    snapshot: string;
+    rect: DOMRect;
+    resolution?: number;   // pixel sample step (1 = full, 2 = half, 4 = quarter)
+    waveSeed?: number;     // number of initial wave-infection seeds
+    intensity?: number;
+    debugMode?: boolean;
+  }
+
+  let {
+    snapshot, rect,
+    resolution = 3,
+    waveSeed = 8,
+    intensity = 7,
+    debugMode = false,
+  }: Props = $props();
+
+  let destroyed = false;
+  let rafId = 0;
+  let disposeCallbacks: Array<() => void> = [];
+
+  onMount(async () => {
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const dpr = window.devicePixelRatio ?? 1;
+
+    const canvas = mountPortalCanvas(vw * dpr, vh * dpr);
+    canvas.style.width  = '100vw';
+    canvas.style.height = '100vh';
+    disposeCallbacks.push(() => canvas.remove());
+
+    const ctx   = canvas.getContext('2d')!;
+    ctx.scale(dpr, dpr);
+
+    // Sample the snapshot at reduced resolution
+    const offscreen   = new OffscreenCanvas(Math.ceil(rect.width / resolution), Math.ceil(rect.height / resolution));
+    const offCtx      = offscreen.getContext('2d')!;
+    const img         = await loadImage(snapshot);
+    offCtx.drawImage(img, 0, 0, offscreen.width, offscreen.height);
+    const imgData     = offCtx.getImageData(0, 0, offscreen.width, offscreen.height);
+    const pixels      = imgData.data;
+
+    const cols = offscreen.width;
+    const rows = offscreen.height;
+
+    interface Particle {
+      x: number; y: number;       // canvas coords
+      vx: number; vy: number;
+      r: number; g: number; b: number; a: number;
+      alive: boolean;
+      dissolving: boolean;
+      dissolveDelay: number;      // frames before it starts moving
+    }
+
+    // Build particle grid
+    const grid: (Particle | null)[] = new Array(cols * rows).fill(null);
+
+    for (let row = 0; row < rows; row++) {
+      for (let col = 0; col < cols; col++) {
+        const pIdx = (row * cols + col) * 4;
+        const a = pixels[pIdx + 3];
+        if (a < 10) continue;
+        grid[row * cols + col] = {
+          x: rect.left + col * resolution,
+          y: rect.top  + row * resolution,
+          vx: 0, vy: 0,
+          r: pixels[pIdx],
+          g: pixels[pIdx + 1],
+          b: pixels[pIdx + 2],
+          a: a / 255,
+          alive: true,
+          dissolving: false,
+          dissolveDelay: 0,
+        };
+      }
+    }
+
+    // Infect initial seeds
+    function infect(idx: number, delay = 0) {
+      const p = grid[idx];
+      if (!p || p.dissolving) return;
+      p.dissolving = true;
+      p.dissolveDelay = delay;
+      const angle = rand(0, Math.PI * 2);
+      const speed = rand(0.3, 2.5) * (1 + intensity * 0.15);
+      p.vx = Math.cos(angle) * speed * 0.3 + randSign() * rand(0, 0.2);
+      p.vy = rand(-speed * 0.5, 0);  // slight upward burst then gravity
+    }
+
+    // Wave propagation — spread infection to neighbours each frame
+    let infectionFrontiers: number[] = [];
+
+    for (let i = 0; i < waveSeed; i++) {
+      const idx = Math.floor(rand(0, cols * rows));
+      infect(idx);
+      infectionFrontiers.push(idx);
+    }
+
+    let frame = 0;
+    const gravAccel = 0.12 * (1 + intensity * 0.1);
+    const spread = Math.max(1, Math.round(intensity * 0.6));
+
+    function tick() {
+      if (destroyed) return;
+      frame++;
+      ctx.clearRect(0, 0, vw, vh);
+
+      // Spread infection
+      const nextFrontier: number[] = [];
+      infectionFrontiers.forEach((idx) => {
+        const row = Math.floor(idx / cols);
+        const col = idx % cols;
+        const delayBase = rand(2, 8);
+        [[-1, 0], [1, 0], [0, -1], [0, 1]].forEach(([dr, dc]) => {
+          if (Math.random() > 0.6) return; // stochastic — looks organic
+          const nr = row + dr, nc = col + dc;
+          if (nr < 0 || nr >= rows || nc < 0 || nc >= cols) return;
+          const nIdx = nr * cols + nc;
+          const n = grid[nIdx];
+          if (n && !n.dissolving) {
+            infect(nIdx, delayBase);
+            nextFrontier.push(nIdx);
+          }
+        });
+      });
+      infectionFrontiers = nextFrontier;
+
+      let anyAlive = false;
+      const pw = resolution;
+
+      for (let i = 0; i < grid.length; i++) {
+        const p = grid[i];
+        if (!p || !p.alive) continue;
+
+        if (p.dissolving) {
+          if (p.dissolveDelay > 0) { p.dissolveDelay--; }
+          else {
+            p.vy += gravAccel;
+            p.vx *= 0.98;
+            p.x  += p.vx;
+            p.y  += p.vy;
+            p.a  -= 0.004;
+            if (p.a <= 0 || p.y > vh + 20) { p.alive = false; continue; }
+          }
+        }
+
+        anyAlive = true;
+        ctx.fillStyle = `rgba(${p.r},${p.g},${p.b},${p.a})`;
+        ctx.fillRect(p.x, p.y, pw, pw);
+      }
+
+      if (anyAlive) rafId = requestAnimationFrame(tick);
+    }
+
+    rafId = requestAnimationFrame(tick);
+  });
+
+  onDestroy(() => {
+    destroyed = true;
+    cancelAnimationFrame(rafId);
+    disposeCallbacks.forEach((fn) => fn());
+  });
+</script>

package/dist/components/chaos/internal/PixelDissolveEngine.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    snapshot: string;
+    rect: DOMRect;
+    resolution?: number;
+    waveSeed?: number;
+    intensity?: number;
+    debugMode?: boolean;
+}
+declare const PixelDissolveEngine: import("svelte").Component<Props, {}, "">;
+type PixelDissolveEngine = ReturnType<typeof PixelDissolveEngine>;
+export default PixelDissolveEngine;