@gigo-ui/components 1.0.0-release → 1.0.1

package/README.md

@@ -1,132 +1,158 @@
-# 🌀 @gigo-ui/components
-
-### _High-Performance Components for Low-Performance Experiences._
-
-[![Svelte](https://img.shields.io/badge/Svelte-5.0+-FF3E00?logo=svelte&logoColor=white)](https://svelte.dev)
-[![SvelteKit](https://img.shields.io/badge/SvelteKit-2.0+-FF3E00?logo=svelte&logoColor=white)](https://svelte.dev)
-[![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-3178C6?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
-[![Tailwind](https://img.shields.io/badge/Tailwind_CSS-4.0+-06B6D4?logo=tailwindcss&logoColor=white)](https://tailwindcss.com/)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-
-A Svelte 5 component library of intentionally terrible UI patterns. Every component is production-quality code implementing the worst UX ideas imaginable.
-
-Built with modern runes (`$state`, `$derived`, `$effect`, `$bindable`), TypeScript, and Tailwind CSS 4.
-
----
-
-## Install
-
-```bash
-pnpm add @gigo-ui/components
-```
-
-## Quick Start
-
-```svelte
-<script lang="ts">
-  import { ShatterPane, CatchSubmit } from '@gigo-ui/components';
-
-  let broken = $state(false);
-</script>
-
-<ShatterPane bind:isShattered={broken}>
-  <div class="card">
-    <h2>Fragile Content</h2>
-    <CatchSubmit label="Submit" />
-  </div>
-</ShatterPane>
-
-<button onclick={() => broken = true}>Break it</button>
-```
-
----
-
-## Components
-
-### 🌪 Chaos (Destruction Overlays)
-
-Wrap any component. One function call and it's physically destroyed.
-
-| Component         | Effect                           | Engine                                 |
-| :---------------- | :------------------------------- | :------------------------------------- |
-| **GigoCompactor** | Voxel crush implosion            | Three.js InstancedMesh + Rapier3D WASM |
-| **ShatterPane**   | Voronoi glass fracture           | Canvas2D + physics sim                 |
-| **PixelDissolve** | Per-pixel wave contagion         | Canvas2D particle system               |
-| **BlackHoleSink** | Gravitational singularity        | Canvas2D warp + accretion glow         |
-| **ChaosButton**   | Button with random chaos effects | CSS transforms                         |
-| **ChaosForm**     | Form that fights back            | DOM manipulation                       |
-
-### 😈 BadUI (Hostile Interactions)
-
-Technically functional. Emotionally devastating.
-
-| Component            | What it does                              |
-| :------------------- | :---------------------------------------- |
-| **RotaryDial**       | Rotary phone dial for number input        |
-| **GravityInput**     | Characters fall with gravity as you type  |
-| **PasswordPeekhole** | Tiny draggable circle to view password    |
-| **ProgressDoom**     | Progress bar that regresses randomly      |
-| **CatchSubmit**      | Submit button that runs from your cursor  |
-| **SliderPhone**      | Single slider for entering phone numbers  |
-| **GhostCard**        | Cards that vanish and reappear corrupted  |
-| **DropdownCalc**     | Dropdown menus for basic arithmetic       |
-| **VolumeSlider**     | Deliberately confusing volume control     |
-| **ColorPickerWrong** | Color picker that picks the wrong color   |
-| **TermsSidescroll**  | Terms of service in a horizontal scroller |
-
-### 🛠 Standard (The Bait)
-
-Normal, usable components to lull users into a false sense of security.
-
-| Component      | Purpose         |
-| :------------- | :-------------- |
-| **Button**     | Standard button |
-| **Card**       | Content card    |
-| **Carousel**   | Image carousel  |
-| **Form**       | Form container  |
-| **Input**      | Text input      |
-| **Modal**      | Dialog overlay  |
-| **Navigation** | Nav component   |
-
----
-
-## Breaker Overlays
-
-The destruction overlays are the flagship feature. They snapshot any wrapped content, then destroy it with real physics:
-
-```svelte
-<script lang="ts">
-  import { GigoCompactor } from '@gigo-ui/components';
-
-  let compactor: GigoCompactor;
-</script>
-
-<GigoCompactor bind:this={compactor} cols={20} rows={20} intensity={8}>
-  <div class="card">This will be voxelized</div>
-</GigoCompactor>
-
-<button onclick={() => compactor.crush()}>Crush</button>
-<button onclick={() => compactor.restore()}>Restore</button>
-```
-
-Each overlay lazy-loads its engine only when triggered. Three.js, Rapier WASM, and html-to-image are all dynamically imported — zero cost until destruction begins.
-
-| Overlay       | Method                     | Prop          | Size                  |
-| :------------ | :------------------------- | :------------ | :-------------------- |
-| GigoCompactor | `crush()` / `restore()`    | `isGarbage`   | ~180KB (Three+Rapier) |
-| ShatterPane   | `shatter()` / `restore()`  | `isShattered` | ~2KB                  |
-| PixelDissolve | `dissolve()` / `restore()` | `isDead`      | ~2KB                  |
-| BlackHoleSink | `consume()` / `restore()`  | `isConsumed`  | ~2KB                  |
-
----
-
-## Requirements
-
-- Svelte 5.0+
-- SvelteKit 2.0+
-- Tailwind CSS 4.0+
-- TypeScript 5.0+
-
-## License
-
-MIT
+# 🌀 @gigo-ui/components
+
+### _High-Performance Components for Low-Performance Experiences._
+
+[![Svelte](https://img.shields.io/badge/Svelte-5.0+-FF3E00?logo=svelte&logoColor=white)](https://svelte.dev)
+[![SvelteKit](https://img.shields.io/badge/SvelteKit-2.0+-FF3E00?logo=svelte&logoColor=white)](https://svelte.dev)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-3178C6?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
+[![Tailwind](https://img.shields.io/badge/Tailwind_CSS-4.0+-06B6D4?logo=tailwindcss&logoColor=white)](https://tailwindcss.com/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+A Svelte 5 component library of intentionally terrible UI patterns. Every component is production-quality code implementing the worst UX ideas imaginable.
+
+Built with modern runes (`$state`, `$derived`, `$effect`, `$bindable`), TypeScript, and Tailwind CSS 4.
+
+---
+
+## Install
+
+```bash
+pnpm add @gigo-ui/components
+```
+
+## Styles (Required)
+
+Import the package stylesheet once near your app root:
+
+```svelte
+<script lang="ts">
+  import '@gigo-ui/components/globals.css';
+</script>
+```
+
+The stylesheet includes Tailwind v4 directives and `@source` scanning for this package, so utility classes used inside components are generated in consumer builds.
+
+To customize theme tokens, override variables after importing the package CSS:
+
+```css
+/* app.css */
+@import "@gigo-ui/components/globals.css";
+
+:root {
+  --primary: #2563eb;
+  --background: #ffffff;
+  --foreground: #111827;
+}
+```
+
+## Quick Start
+
+```svelte
+<script lang="ts">
+  import '@gigo-ui/components/globals.css';
+  import { ShatterPane, CatchSubmit } from '@gigo-ui/components';
+
+  let broken = $state(false);
+</script>
+
+<ShatterPane bind:isShattered={broken}>
+  <div class="card">
+    <h2>Fragile Content</h2>
+    <CatchSubmit label="Submit" />
+  </div>
+</ShatterPane>
+
+<button onclick={() => broken = true}>Break it</button>
+```
+
+---
+
+## Components
+
+### 🌪 Chaos (Destruction Overlays)
+
+Wrap any component. One function call and it's physically destroyed.
+
+| Component         | Effect                           | Engine                                 |
+| :---------------- | :------------------------------- | :------------------------------------- |
+| **GigoCompactor** | Voxel crush implosion            | Three.js InstancedMesh + Rapier3D WASM |
+| **ShatterPane**   | Voronoi glass fracture           | Canvas2D + physics sim                 |
+| **PixelDissolve** | Per-pixel wave contagion         | Canvas2D particle system               |
+| **BlackHoleSink** | Gravitational singularity        | Canvas2D warp + accretion glow         |
+| **ChaosButton**   | Button with random chaos effects | CSS transforms                         |
+| **ChaosForm**     | Form that fights back            | DOM manipulation                       |
+
+### 😈 BadUI (Hostile Interactions)
+
+Technically functional. Emotionally devastating.
+
+| Component            | What it does                              |
+| :------------------- | :---------------------------------------- |
+| **RotaryDial**       | Rotary phone dial for number input        |
+| **GravityInput**     | Characters fall with gravity as you type  |
+| **PasswordPeekhole** | Tiny draggable circle to view password    |
+| **ProgressDoom**     | Progress bar that regresses randomly      |
+| **CatchSubmit**      | Submit button that runs from your cursor  |
+| **SliderPhone**      | Single slider for entering phone numbers  |
+| **GhostCard**        | Cards that vanish and reappear corrupted  |
+| **DropdownCalc**     | Dropdown menus for basic arithmetic       |
+| **VolumeSlider**     | Deliberately confusing volume control     |
+| **ColorPickerWrong** | Color picker that picks the wrong color   |
+| **TermsSidescroll**  | Terms of service in a horizontal scroller |
+
+### 🛠 Standard (The Bait)
+
+Normal, usable components to lull users into a false sense of security.
+
+| Component      | Purpose         |
+| :------------- | :-------------- |
+| **Button**     | Standard button |
+| **Card**       | Content card    |
+| **Carousel**   | Image carousel  |
+| **Form**       | Form container  |
+| **Input**      | Text input      |
+| **Modal**      | Dialog overlay  |
+| **Navigation** | Nav component   |
+
+---
+
+## Breaker Overlays
+
+The destruction overlays are the flagship feature. They snapshot any wrapped content, then destroy it with real physics:
+
+```svelte
+<script lang="ts">
+  import { GigoCompactor } from '@gigo-ui/components';
+
+  let compactor: GigoCompactor;
+</script>
+
+<GigoCompactor bind:this={compactor} cols={20} rows={20} intensity={8}>
+  <div class="card">This will be voxelized</div>
+</GigoCompactor>
+
+<button onclick={() => compactor.crush()}>Crush</button>
+<button onclick={() => compactor.restore()}>Restore</button>
+```
+
+Each overlay lazy-loads its engine only when triggered. Three.js, Rapier WASM, and html-to-image are all dynamically imported — zero cost until destruction begins.
+
+| Overlay       | Method                     | Prop          | Size                  |
+| :------------ | :------------------------- | :------------ | :-------------------- |
+| GigoCompactor | `crush()` / `restore()`    | `isGarbage`   | ~180KB (Three+Rapier) |
+| ShatterPane   | `shatter()` / `restore()`  | `isShattered` | ~2KB                  |
+| PixelDissolve | `dissolve()` / `restore()` | `isDead`      | ~2KB                  |
+| BlackHoleSink | `consume()` / `restore()`  | `isConsumed`  | ~2KB                  |
+
+---
+
+## Requirements
+
+- Svelte 5.0+
+- SvelteKit 2.0+
+- Tailwind CSS 4.0+
+- TypeScript 5.0+
+
+## License
+
+MIT

package/dist/components/chaos/BlackHoleSink.svelte

@@ -0,0 +1,81 @@
+<!-- Black hole wrapper — singularity + accretion engine -->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { captureSnapshot } from '../../utils/destruction-engine.js';
+
+  export interface BlackHoleSinkProps {
+    isConsumed?: boolean;
+    resolution?: number;
+    intensity?: number;
+    glowColor?: string;
+    debugMode?: boolean;
+    class?: string;
+    children: Snippet;
+  }
+
+  let {
+    isConsumed = $bindable(false),
+    resolution = 4,
+    intensity = 7,
+    glowColor = 'rgba(255,120,0,0.7)',
+    debugMode = false,
+    class: className = '',
+    children,
+  }: BlackHoleSinkProps = $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 (isConsumed && !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/BlackHoleEngine.svelte');
+      EngineComponent = mod.default;
+    } catch (err) {
+      if (debugMode) console.error('[BlackHoleSink] capture failed', err);
+      hidden = false;
+    } finally {
+      isCapturing = false;
+    }
+  }
+
+  export function consume() { if (wrapper) { isConsumed = true; doCapture(); } }
+  export function restore() {
+    isConsumed = false;
+    hidden = false; snapshotData = null; snapshotRect = null; EngineComponent = null;
+  }
+</script>
+
+<div
+  bind:this={wrapper}
+  class={className}
+  style:visibility={hidden ? 'hidden' : 'visible'}
+  data-gigo-blackhole="true"
+>
+  {@render children()}
+</div>
+
+{#if EngineComponent && snapshotData && snapshotRect}
+  {@const Engine = EngineComponent}
+  <Engine
+    snapshot={snapshotData}
+    rect={snapshotRect}
+    {resolution}
+    {intensity}
+    {glowColor}
+    {debugMode}
+  />
+{/if}

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+export interface BlackHoleSinkProps {
+    isConsumed?: boolean;
+    resolution?: number;
+    intensity?: number;
+    glowColor?: string;
+    debugMode?: boolean;
+    class?: string;
+    children: Snippet;
+}
+declare const BlackHoleSink: import("svelte").Component<BlackHoleSinkProps, {
+    consume: () => void;
+    restore: () => void;
+}, "isConsumed">;
+type BlackHoleSink = ReturnType<typeof BlackHoleSink>;
+export default BlackHoleSink;

package/dist/components/chaos/GigoCompactor.svelte

@@ -0,0 +1,103 @@
+
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import type { Snippet } from 'svelte';
+  import { captureSnapshot } from '../../utils/destruction-engine.js';
+
+  export interface GigoCompactorProps {
+    isGarbage?: boolean;
+    cols?: number;
+    rows?: number;
+    intensity?: number;   // 0–10
+    debugMode?: boolean;
+    class?: string;
+    children: Snippet;
+  }
+
+  let {
+    isGarbage = $bindable(false),
+    cols = 20,
+    rows = 20,
+    intensity = 7,
+    debugMode = false,
+    class: className = '',
+    children,
+  }: GigoCompactorProps = $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 (isGarbage && !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; // preserve layout, hide original
+
+      // Lazy-load the engine only now
+      const mod = await import('./internal/CompactorEngine.svelte');
+      EngineComponent = mod.default;
+    } catch (err) {
+      if (debugMode) console.error('[GigoCompactor] capture failed', err);
+      // fail-safe: show original again
+      hidden = false;
+    } finally {
+      isCapturing = false;
+    }
+  }
+
+  export function crush() { if (wrapper) { isGarbage = true; doCapture(); } }
+  export function restore() {
+    isGarbage = false;
+    hidden = false; snapshotData = null; snapshotRect = null; EngineComponent = null;
+  }
+
+  onDestroy(() => {
+    restore()
+  });
+</script>
+
+<!-- Original slot content — hidden once physics takes over -->
+<div
+  bind:this={wrapper}
+  class={className}
+  style:visibility={hidden ? 'hidden' : 'visible'}
+  data-gigo-compactor="true"
+>
+  {@render children()}
+</div>
+
+{#if debugMode}
+  <div class="
+    fixed inset-0 pointer-events-none z-10000
+    ring-2 ring-offset-[-2px] ring-red-500/60
+  "></div>
+{/if}
+
+<!-- Physics engine — mounted lazily after snapshot is ready -->
+{#if EngineComponent && snapshotData && snapshotRect}
+  {@const Engine = EngineComponent}
+  <Engine
+    snapshot={snapshotData}
+    rect={snapshotRect}
+    {cols}
+    {rows}
+    {intensity}
+    {debugMode}
+  />
+{/if}

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+export interface GigoCompactorProps {
+    isGarbage?: boolean;
+    cols?: number;
+    rows?: number;
+    intensity?: number;
+    debugMode?: boolean;
+    class?: string;
+    children: Snippet;
+}
+declare const GigoCompactor: import("svelte").Component<GigoCompactorProps, {
+    crush: () => void;
+    restore: () => void;
+}, "isGarbage">;
+type GigoCompactor = ReturnType<typeof GigoCompactor>;
+export default GigoCompactor;

package/dist/components/chaos/PixelDissolve.svelte

@@ -0,0 +1,81 @@
+<!-- Pixel dissolve wrapper — wave contagion engine -->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { captureSnapshot } from '../../utils/destruction-engine.js';
+
+  export interface PixelDissolveProps {
+    isDead?: boolean;
+    resolution?: number;
+    waveSeed?: number;
+    intensity?: number;
+    debugMode?: boolean;
+    class?: string;
+    children: Snippet;
+  }
+
+  let {
+    isDead = $bindable(false),
+    resolution = 3,
+    waveSeed = 8,
+    intensity = 7,
+    debugMode = false,
+    class: className = '',
+    children,
+  }: PixelDissolveProps = $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 (isDead && !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/PixelDissolveEngine.svelte');
+      EngineComponent = mod.default;
+    } catch (err) {
+      if (debugMode) console.error('[PixelDissolve] capture failed', err);
+      hidden = false;
+    } finally {
+      isCapturing = false;
+    }
+  }
+
+  export function dissolve() { if (wrapper) { isDead = true; doCapture(); } }
+  export function restore() {
+    isDead = false;
+    hidden = false; snapshotData = null; snapshotRect = null; EngineComponent = null;
+  }
+</script>
+
+<div
+  bind:this={wrapper}
+  class={className}
+  style:visibility={hidden ? 'hidden' : 'visible'}
+  data-gigo-dissolve="true"
+>
+  {@render children()}
+</div>
+
+{#if EngineComponent && snapshotData && snapshotRect}
+  {@const Engine = EngineComponent}
+  <Engine
+    snapshot={snapshotData}
+    rect={snapshotRect}
+    {resolution}
+    {waveSeed}
+    {intensity}
+    {debugMode}
+  />
+{/if}

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+export interface PixelDissolveProps {
+    isDead?: boolean;
+    resolution?: number;
+    waveSeed?: number;
+    intensity?: number;
+    debugMode?: boolean;
+    class?: string;
+    children: Snippet;
+}
+declare const PixelDissolve: import("svelte").Component<PixelDissolveProps, {
+    dissolve: () => void;
+    restore: () => void;
+}, "isDead">;
+type PixelDissolve = ReturnType<typeof PixelDissolve>;
+export default PixelDissolve;