@gigo-ui/components 1.0.0 → 1.0.1

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

@@ -0,0 +1,208 @@
+<!-- Voronoi glass shatter — Canvas2D physics -->
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import {
+    mountPortalCanvas,
+    loadImage,
+    rand,
+    randSign,
+  } from '../../../utils/destruction-engine.js';
+
+  interface Props {
+    snapshot: string;
+    rect: DOMRect;
+    shardCount?: number;
+    intensity?: number;
+    tint?: string;        // CSS colour for glass tint overlay
+    debugMode?: boolean;
+  }
+
+  let {
+    snapshot,
+    rect,
+    shardCount = 48,
+    intensity = 7,
+    tint = 'rgba(180,220,255,0.08)',
+    debugMode = false,
+  }: Props = $props();
+
+  let destroyed = false;
+  let rafId = 0;
+  let disposeCallbacks: Array<() => void> = [];
+
+  // approximate Voronoi cells from random seeds
+  function generateShards(w: number, h: number, n: number) {
+    // Random seed points
+    const seeds = Array.from({ length: n }, () => ({ x: rand(0, w), y: rand(0, h) }));
+
+    // Simple Lloyd's relaxation (1 pass) for better distribution
+    const relaxed = seeds.map((s) => {
+      const neighbors = seeds.filter((o) => {
+        const dx = o.x - s.x, dy = o.y - s.y;
+        return dx * dx + dy * dy < (w * h) / n * 4;
+      });
+      const cx = neighbors.reduce((a, b) => a + b.x, 0) / neighbors.length;
+      const cy = neighbors.reduce((a, b) => a + b.y, 0) / neighbors.length;
+      return { x: (s.x + cx) / 2, y: (s.y + cy) / 2 };
+    });
+
+    // For each seed, approximate its Voronoi cell with 16 boundary samples
+    return relaxed.map((seed) => {
+      const angles = Array.from({ length: 16 }, (_, i) => (i / 16) * Math.PI * 2);
+      const verts = angles.map((angle) => {
+        // March outward until we're closer to another seed
+        let r = 2;
+        const step = Math.max(w, h) / 100;
+        while (r < Math.max(w, h)) {
+          const px = seed.x + Math.cos(angle) * r;
+          const py = seed.y + Math.sin(angle) * r;
+          const distSelf = (px - seed.x) ** 2 + (py - seed.y) ** 2;
+          const closerExists = relaxed.some((other) => {
+            if (other === seed) return false;
+            return (px - other.x) ** 2 + (py - other.y) ** 2 < distSelf;
+          });
+          if (closerExists) return { x: seed.x + Math.cos(angle) * (r - step), y: seed.y + Math.sin(angle) * (r - step) };
+          r += step;
+        }
+        return { x: seed.x + Math.cos(angle) * r, y: seed.y + Math.sin(angle) * r };
+      });
+      return { seed, verts };
+    });
+  }
+
+
+  interface PhysicsShard {
+    verts: Array<{ x: number; y: number }>;
+    cx: number; cy: number;
+    vx: number; vy: number;
+    angV: number;
+    angle: number;
+    opacity: number;
+    // snapshot clip region for this shard
+    imgOffX: number; imgOffY: number;
+  }
+
+  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);
+
+    // Scale rect to fit canvas coord space (canvas is already dpr-scaled via ctx.scale)
+    const rx = rect.left, ry = rect.top, rw = rect.width, rh = rect.height;
+
+    const rawShards = generateShards(rw, rh, shardCount);
+    const g = intensity / 10;  // gravity multiplier 0–1
+
+    // Build physics state
+    const shards: PhysicsShard[] = rawShards.map(({ seed, verts }) => {
+      const cx = rx + seed.x;
+      const cy = ry + seed.y;
+      // Outward impulse from element centre
+      const ecx = rx + rw / 2;
+      const ecy = ry + rh / 2;
+      const dx = cx - ecx, dy = cy - ecy;
+      const dist = Math.sqrt(dx * dx + dy * dy) + 0.001;
+      const speed = rand(1, 5) * (1 + g * 3);
+      return {
+        verts: verts.map((v) => ({ x: rx + v.x, y: ry + v.y })),
+        cx, cy,
+        vx: (dx / dist) * speed,
+        vy: (dy / dist) * speed * 0.5 - rand(0, 3),
+        angV: randSign() * rand(0.005, 0.04) * (1 + g),
+        angle: 0,
+        opacity: 1,
+        imgOffX: rx,
+        imgOffY: ry,
+      };
+    });
+
+    let startTime: number | null = null;
+
+    function tick(ts: number) {
+      if (destroyed) return;
+      if (startTime === null) startTime = ts;
+
+      const elapsed = (ts - startTime) / 1000; // seconds
+
+      ctx.clearRect(0, 0, vw, vh);
+
+      let allSettled = true;
+
+      shards.forEach((s) => {
+        // Physics step
+        s.vy += 9.81 * intensity * 0.05;  // gravity
+        s.cx += s.vx;
+        s.cy += s.vy;
+        s.angle += s.angV;
+        s.vx *= 0.995;  // air resistance
+        s.vy *= 0.995;
+        s.angV *= 0.99;
+
+        // Floor bounce-then-settle
+        if (s.cy > vh + 200) {
+          s.opacity = Math.max(0, s.opacity - 0.02);
+        }
+
+        if (s.opacity > 0) allSettled = false;
+
+        if (s.opacity <= 0) return;
+
+        ctx.save();
+        ctx.translate(s.cx, s.cy);
+        ctx.rotate(s.angle);
+        ctx.translate(-s.cx, -s.cy);
+        ctx.globalAlpha = s.opacity;
+
+        // Clip to shard polygon
+        ctx.beginPath();
+        s.verts.forEach((v, i) => {
+          if (i === 0) ctx.moveTo(v.x, v.y);
+          else ctx.lineTo(v.x, v.y);
+        });
+        ctx.closePath();
+        ctx.clip();
+
+        // Draw snapshot slice
+        ctx.drawImage(img, -s.imgOffX + s.cx - s.cx, -s.imgOffY + s.cy - s.cy,
+          // Actually simply draw full image and let clip do the work
+          rw, rh,
+          rx - s.imgOffX + 0, ry - s.imgOffY + 0, // offset is already in verts
+          rw, rh
+        );
+
+        // Tint overlay (glass effect)
+        ctx.fillStyle = tint;
+        ctx.fill();
+
+        // Crack line highlight
+        ctx.strokeStyle = 'rgba(255,255,255,0.35)';
+        ctx.lineWidth = 0.8;
+        ctx.stroke();
+
+        ctx.restore();
+      });
+
+      if (!allSettled) {
+        rafId = requestAnimationFrame(tick);
+      }
+    }
+
+    rafId = requestAnimationFrame(tick);
+  });
+
+  onDestroy(() => {
+    destroyed = true;
+    cancelAnimationFrame(rafId);
+    disposeCallbacks.forEach((fn) => fn());
+  });
+</script>

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

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

package/dist/docs/component-data.js

@@ -12,6 +12,10 @@ import { colorPickerWrong } from "./components/badui/color-picker-wrong.js";
 import { termsSidescroll } from "./components/badui/terms-sidescroll.js";
 import { chaosButton } from "./components/chaos/chaos-button.js";
 import { chaosForm } from "./components/chaos/chaos-form.js";
+import { gigoCompactor } from "./components/chaos/gigo-compactor.js";
+import { shatterPane } from "./components/chaos/shatter-pane.js";
+import { pixelDissolve } from "./components/chaos/pixel-dissolve.js";
+import { blackHoleSink } from "./components/chaos/black-hole-sink.js";
 import { button } from "./components/standard/button.js";
 import { input } from "./components/standard/input.js";
 import { modal } from "./components/standard/modal.js";
@@ -33,6 +37,10 @@ export const componentDocs = [
     termsSidescroll,
     chaosButton,
     chaosForm,
+    gigoCompactor,
+    shatterPane,
+    pixelDissolve,
+    blackHoleSink,
     button,
     input,
     modal,

package/dist/docs/components/chaos/black-hole-sink.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDoc } from "../../types.js";
+export declare const blackHoleSink: ComponentDoc;

package/dist/docs/components/chaos/black-hole-sink.js

@@ -0,0 +1,71 @@
+export const blackHoleSink = {
+    name: "BlackHoleSink",
+    slug: "black-hole-sink",
+    emoji: "🌑",
+    category: "chaos",
+    tagline: "Swallows your UI into a gravitational singularity",
+    description: "Captures the slot element as pixels and draws each one as a particle that spirals inward toward the element's centre with exponentially growing gravitational pull. Features a shimmering accretion-disk glow ring, a growing dark core, and gravitational redshift colouring (particles heat to orange-red as they approach the event horizon). Pure Canvas2D — broad compatibility, zero WebGL.",
+    usage: `<script lang="ts">
+  import { BlackHoleSink } from '@gigo-ui/components';
+
+  let hole: BlackHoleSink;
+  let eaten = $state(false);
+</script>
+
+<!-- Reactive -->
+<BlackHoleSink bind:isConsumed={eaten} intensity={8} glowColor="rgba(255,120,0,0.7)">
+  <Dashboard />
+</BlackHoleSink>
+<button onclick={() => eaten = true}>Consume</button>
+
+<!-- Imperative -->
+<BlackHoleSink bind:this={hole}>
+  <Widget />
+</BlackHoleSink>
+<button onclick={() => hole.consume()}>Eat</button>
+<button onclick={() => hole.restore()}>Restore</button>`,
+    props: [
+        {
+            name: "isConsumed",
+            type: "boolean",
+            default: "false",
+            description: "Trigger event horizon",
+        },
+        {
+            name: "resolution",
+            type: "number",
+            default: "4",
+            description: "Pixel sampling density",
+        },
+        {
+            name: "intensity",
+            type: "number",
+            default: "7",
+            description: "Gravitational pull 0–10",
+        },
+        {
+            name: "glowColor",
+            type: "string",
+            default: "'rgba(255,120,0,0.7)'",
+            description: "Accretion disk CSS colour",
+        },
+        {
+            name: "debugMode",
+            type: "boolean",
+            default: "false",
+            description: "Debug logging",
+        },
+        {
+            name: "class",
+            type: "string",
+            default: "''",
+            description: "Additional CSS classes",
+        },
+        {
+            name: "children",
+            type: "Snippet",
+            default: "required",
+            description: "Slot content to consume",
+        },
+    ],
+};

package/dist/docs/components/chaos/gigo-compactor.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDoc } from "../../types.js";
+export declare const gigoCompactor: ComponentDoc;

package/dist/docs/components/chaos/gigo-compactor.js

@@ -0,0 +1,71 @@
+export const gigoCompactor = {
+    name: "GigoCompactor",
+    slug: "gigo-compactor",
+    emoji: "💥",
+    category: "chaos",
+    tagline: "Voxel-crushes your UI into 3-D physics debris",
+    description: "Renders any slot content normally. On activation it captures a pixel-perfect screenshot, hides the original DOM node (preserving layout), then teleports an instanced Three.js mesh onto document.body and simulates a demolition implosion followed by gravity-driven collapse. Shards persist on scroll — once broken, stays broken. Uses Rapier3D for realistic rigid-body physics and a custom GLSL shader so every shard displays its exact slice of your UI texture.",
+    usage: `<script lang="ts">
+  import { GigoCompactor } from '@gigo-ui/components';
+
+  let compactor: GigoCompactor;
+  let crushed = $state(false);
+</script>
+
+<!-- Reactive: setting the prop triggers the effect -->
+<GigoCompactor bind:isGarbage={crushed} cols={24} rows={24} intensity={8}>
+  <div class="card">Fragile content</div>
+</GigoCompactor>
+<button onclick={() => crushed = true}>Demolish</button>
+
+<!-- Imperative: call methods directly -->
+<GigoCompactor bind:this={compactor}>
+  <div class="card">Also fragile</div>
+</GigoCompactor>
+<button onclick={() => compactor.crush()}>Crush</button>
+<button onclick={() => compactor.restore()}>Restore</button>`,
+    props: [
+        {
+            name: "isGarbage",
+            type: "boolean",
+            default: "false",
+            description: "Trigger the crush",
+        },
+        {
+            name: "cols",
+            type: "number",
+            default: "20",
+            description: "Voxel grid columns",
+        },
+        {
+            name: "rows",
+            type: "number",
+            default: "20",
+            description: "Voxel grid rows",
+        },
+        {
+            name: "intensity",
+            type: "number",
+            default: "7",
+            description: "Crush force 0–10",
+        },
+        {
+            name: "debugMode",
+            type: "boolean",
+            default: "false",
+            description: "Show bounding box ring",
+        },
+        {
+            name: "class",
+            type: "string",
+            default: "''",
+            description: "Additional CSS classes",
+        },
+        {
+            name: "children",
+            type: "Snippet",
+            default: "required",
+            description: "Slot content to wrap and destroy",
+        },
+    ],
+};

package/dist/docs/components/chaos/pixel-dissolve.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDoc } from "../../types.js";
+export declare const pixelDissolve: ComponentDoc;

package/dist/docs/components/chaos/pixel-dissolve.js

@@ -0,0 +1,71 @@
+export const pixelDissolve = {
+    name: "PixelDissolve",
+    slug: "pixel-dissolve",
+    emoji: "✨",
+    category: "chaos",
+    tagline: "Snaps your UI into drifting pixel dust",
+    description: "Samples the slot content at configurable resolution and treats every pixel as an independent particle. Dissolution spreads as a contagion wave from random seed points — neighbouring pixels crumble in sequence for an organic, sand-eroding effect. Particles drift with gravity and fade out. Pure Canvas2D with OffscreenCanvas sampling — no WebGL needed.",
+    usage: `<script lang="ts">
+  import { PixelDissolve } from '@gigo-ui/components';
+
+  let snap: PixelDissolve;
+  let gone = $state(false);
+</script>
+
+<!-- Reactive -->
+<PixelDissolve bind:isDead={gone} resolution={2} waveSeed={12} intensity={6}>
+  <ProfileCard />
+</PixelDissolve>
+<button onclick={() => gone = true}>Snap</button>
+
+<!-- Imperative -->
+<PixelDissolve bind:this={snap}>
+  <ProfileCard />
+</PixelDissolve>
+<button onclick={() => snap.dissolve()}>Dissolve</button>
+<button onclick={() => snap.restore()}>Restore</button>`,
+    props: [
+        {
+            name: "isDead",
+            type: "boolean",
+            default: "false",
+            description: "Trigger dissolution",
+        },
+        {
+            name: "resolution",
+            type: "number",
+            default: "3",
+            description: "Pixel group size (1=full quality, 6=coarse)",
+        },
+        {
+            name: "waveSeed",
+            type: "number",
+            default: "8",
+            description: "Number of initial infection origins",
+        },
+        {
+            name: "intensity",
+            type: "number",
+            default: "7",
+            description: "Gravity / drift speed 0–10",
+        },
+        {
+            name: "debugMode",
+            type: "boolean",
+            default: "false",
+            description: "Debug logging",
+        },
+        {
+            name: "class",
+            type: "string",
+            default: "''",
+            description: "Additional CSS classes",
+        },
+        {
+            name: "children",
+            type: "Snippet",
+            default: "required",
+            description: "Slot content to dissolve",
+        },
+    ],
+};

package/dist/docs/components/chaos/shatter-pane.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDoc } from "../../types.js";
+export declare const shatterPane: ComponentDoc;

package/dist/docs/components/chaos/shatter-pane.js

@@ -0,0 +1,71 @@
+export const shatterPane = {
+    name: "ShatterPane",
+    slug: "shatter-pane",
+    emoji: "🪟",
+    category: "chaos",
+    tagline: "Fractures your UI into Voronoi glass shards",
+    description: "Renders slot content normally. On trigger, captures a DOM snapshot and shatters it into irregular Voronoi polygons — each clipped with its own texture slice, highlighted with a glass-crack edge and an iridescent tint. Shards explode outward from their centre, spin, and fall. Pure Canvas2D (no WebGL dependency) for fast load and broad compatibility.",
+    usage: `<script lang="ts">
+  import { ShatterPane } from '@gigo-ui/components';
+
+  let pane: ShatterPane;
+  let broken = $state(false);
+</script>
+
+<!-- Reactive -->
+<ShatterPane bind:isShattered={broken} shardCount={60} intensity={8}>
+  <div class="card">Glass content</div>
+</ShatterPane>
+<button onclick={() => broken = true}>Shatter</button>
+
+<!-- Imperative -->
+<ShatterPane bind:this={pane}>
+  <div class="card">Also glass</div>
+</ShatterPane>
+<button onclick={() => pane.shatter()}>Break</button>
+<button onclick={() => pane.restore()}>Fix</button>`,
+    props: [
+        {
+            name: "isShattered",
+            type: "boolean",
+            default: "false",
+            description: "Trigger fracture",
+        },
+        {
+            name: "shardCount",
+            type: "number",
+            default: "48",
+            description: "Number of Voronoi polygons",
+        },
+        {
+            name: "intensity",
+            type: "number",
+            default: "7",
+            description: "Explosion force 0–10",
+        },
+        {
+            name: "tint",
+            type: "string",
+            default: "'rgba(180,220,255,0.08)'",
+            description: "Glass iridescence CSS colour",
+        },
+        {
+            name: "debugMode",
+            type: "boolean",
+            default: "false",
+            description: "Debug logging",
+        },
+        {
+            name: "class",
+            type: "string",
+            default: "''",
+            description: "Additional CSS classes",
+        },
+        {
+            name: "children",
+            type: "Snippet",
+            default: "required",
+            description: "Slot content to wrap and shatter",
+        },
+    ],
+};

package/dist/index.d.ts

@@ -18,5 +18,9 @@ export { default as VolumeSlider } from "./components/chaos/VolumeSlider.svelte"
 export { default as ProgressDoom } from "./components/chaos/ProgressDoom.svelte";
 export { default as ColorPickerWrong } from "./components/chaos/ColorPickerWrong.svelte";
 export { default as TermsSidescroll } from "./components/chaos/TermsSidescroll.svelte";
-export type { GigoBaseProps, GigoButtonProps, GigoInputProps, GigoModalProps, GigoCardProps, GigoCarouselProps, GigoFormProps, GigoNavProps, GigoChaosButtonProps, GigoChaosFormProps, GigoGhostCardProps, GigoGravityInputProps, GigoRotaryDialProps, GigoSliderPhoneProps, GigoCatchSubmitProps, GigoDropdownCalcProps, GigoPasswordPeepholeProps, GigoVolumeSliderProps, GigoProgressDoomProps, GigoColorPickerWrongProps, GigoTermsSidescrollProps, ButtonVariant, ButtonSize, InputType, CarouselSlide, FormField, NavItem, ChaosIntensity, } from "./types/index.js";
+export { default as GigoCompactor } from "./components/chaos/GigoCompactor.svelte";
+export { default as ShatterPane } from "./components/chaos/ShatterPane.svelte";
+export { default as PixelDissolve } from "./components/chaos/PixelDissolve.svelte";
+export { default as BlackHoleSink } from "./components/chaos/BlackHoleSink.svelte";
+export type { GigoBaseProps, GigoButtonProps, GigoInputProps, GigoModalProps, GigoCardProps, GigoCarouselProps, GigoFormProps, GigoNavProps, GigoChaosButtonProps, GigoChaosFormProps, GigoGhostCardProps, GigoGravityInputProps, GigoRotaryDialProps, GigoSliderPhoneProps, GigoCatchSubmitProps, GigoDropdownCalcProps, GigoPasswordPeepholeProps, GigoVolumeSliderProps, GigoProgressDoomProps, GigoColorPickerWrongProps, GigoTermsSidescrollProps, GigoCompactorProps, ShatterPaneProps, PixelDissolveProps, BlackHoleSinkProps, ButtonVariant, ButtonSize, InputType, CarouselSlide, FormField, NavItem, ChaosIntensity, } from "./types/index.js";
 export { cn, chaosClasses, chaosRandom, chaosPickOne, randomGarbageText, } from "./utils/cn.js";

package/dist/index.js

@@ -18,4 +18,8 @@ export { default as VolumeSlider } from "./components/chaos/VolumeSlider.svelte"
 export { default as ProgressDoom } from "./components/chaos/ProgressDoom.svelte";
 export { default as ColorPickerWrong } from "./components/chaos/ColorPickerWrong.svelte";
 export { default as TermsSidescroll } from "./components/chaos/TermsSidescroll.svelte";
+export { default as GigoCompactor } from "./components/chaos/GigoCompactor.svelte";
+export { default as ShatterPane } from "./components/chaos/ShatterPane.svelte";
+export { default as PixelDissolve } from "./components/chaos/PixelDissolve.svelte";
+export { default as BlackHoleSink } from "./components/chaos/BlackHoleSink.svelte";
 export { cn, chaosClasses, chaosRandom, chaosPickOne, randomGarbageText, } from "./utils/cn.js";

package/dist/styles/globals.css

@@ -1,6 +1,9 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap");
 @import "tailwindcss";
 
+/* Include utility candidates from the published package when this file is imported by consumers. */
+@source "../**/*.{svelte,js,ts}";
+
 @theme {
   --radius-sm: 0.25rem;
   --radius-md: 0.5rem;

package/dist/types/index.d.ts

@@ -175,3 +175,35 @@ export interface GigoTermsSidescrollProps {
     class?: string;
 }
 export type ChaosIntensity = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+export interface GigoCompactorProps {
+    isGarbage?: boolean;
+    cols?: number;
+    rows?: number;
+    intensity?: number;
+    debugMode?: boolean;
+    class?: string;
+}
+export interface ShatterPaneProps {
+    isShattered?: boolean;
+    shardCount?: number;
+    intensity?: number;
+    tint?: string;
+    debugMode?: boolean;
+    class?: string;
+}
+export interface PixelDissolveProps {
+    isDead?: boolean;
+    resolution?: number;
+    waveSeed?: number;
+    intensity?: number;
+    debugMode?: boolean;
+    class?: string;
+}
+export interface BlackHoleSinkProps {
+    isConsumed?: boolean;
+    resolution?: number;
+    intensity?: number;
+    glowColor?: string;
+    debugMode?: boolean;
+    class?: string;
+}

package/dist/utils/destruction-engine.d.ts

@@ -0,0 +1,26 @@
+export interface DOMRect4 {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+export declare function domToNDC(x: number, y: number, viewportW: number, viewportH: number): [number, number];
+export declare function cellToNDC(rect: DOMRect4, col: number, row: number, cols: number, rows: number, viewportW: number, viewportH: number): [number, number];
+export declare function scrollAwareY(domY: number, scrollY: number): number;
+export declare function cellUV(col: number, row: number, cols: number, rows: number): {
+    offsetX: number;
+    offsetY: number;
+    repeatX: number;
+    repeatY: number;
+};
+export interface SnapshotResult {
+    dataURL: string;
+    width: number;
+    height: number;
+    rect: DOMRect;
+}
+export declare function captureSnapshot(el: HTMLElement): Promise<SnapshotResult>;
+export declare function loadImage(src: string): Promise<HTMLImageElement>;
+export declare function mountPortalCanvas(width: number, height: number, zIndex?: number): HTMLCanvasElement;
+export declare function rand(min: number, max: number): number;
+export declare function randSign(): number;