@gigo-ui/components 1.0.0

package/README.md

@@ -0,0 +1,42 @@
+# sv
+
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project
+npx sv create my-app
+```
+
+To recreate this project with the same configuration:
+
+```sh
+# recreate this project
+npx sv@0.12.5 create --template minimal --types ts --no-install .
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

package/dist/assets/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>

package/dist/components/chaos/CatchSubmit.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	let {
+		label = 'Submit',
+		onsubmit,
+		arenaHeight = 256,
+		tauntsArray = [
+			'Too slow!', 'Almost!', 'Nope!', 'Try harder!', 'Not today!',
+			'🏃💨', "Can't catch me!", 'Haha!', 'Over here!', 'Nice try!',
+			'So close... not.', 'LOL', 'Git gud', 'Skill issue',
+		],
+		class: className,
+		...restProps
+	}: {
+		label?: string;
+		onsubmit?: () => void;
+		arenaHeight?: number;
+		tauntsArray?: string[];
+		class?: string;
+		[key: string]: unknown;
+	} = $props();
+
+	let x = $state(0);
+	let y = $state(0);
+	let escapeCount = $state(0);
+	let caught = $state(false);
+	let containerEl: HTMLDivElement | undefined = $state();
+	let btnEl: HTMLButtonElement | undefined = $state();
+	let taunts = $state('');
+	let trailDots = $state<Array<{ x: number; y: number }>>([]);
+
+	function flee() {
+		if (caught || !containerEl || !btnEl) return;
+
+		const container = containerEl.getBoundingClientRect();
+		const btn = btnEl.getBoundingClientRect();
+		const maxX = container.width - btn.width - 8;
+		const maxY = container.height - btn.height - 8;
+
+		// Random position away from current
+		let newX: number, newY: number;
+		let attempts = 0;
+		do {
+			newX = Math.random() * maxX;
+			newY = Math.random() * maxY;
+			attempts++;
+		} while (
+			Math.abs(newX - x) < 60 &&
+			Math.abs(newY - y) < 60 &&
+			attempts < 10
+		);
+
+		x = newX;
+		y = newY;
+		escapeCount++;
+		taunts = tauntsArray[Math.floor(Math.random() * tauntsArray.length)];
+		trailDots = [...trailDots, { x: newX + 20, y: newY + 10 }].slice(-20);
+	}
+
+	function handleClick() {
+		// Only reachable if they somehow click it
+		caught = true;
+		taunts = 'Fine, you win. 😤';
+		onsubmit?.();
+	}
+
+	// Place button randomly on mount
+	$effect(() => {
+		if (containerEl && btnEl) {
+			const container = containerEl.getBoundingClientRect();
+			const btn = btnEl.getBoundingClientRect();
+			x = Math.random() * (container.width - btn.width - 8);
+			y = Math.random() * (container.height - btn.height - 8);
+		}
+	});
+</script>
+
+<div class={cn('space-y-3', className)} {...restProps}>
+	<!-- Stats bar -->
+	<div class="flex items-center justify-between rounded-lg border border-(--border) bg-(--secondary) px-3 py-1.5 text-xs font-mono">
+		<span class="text-(--muted-foreground)">Escape count: <span class="text-gigo-magenta font-bold">{escapeCount}</span></span>
+		{#if taunts}
+			<span class="text-gigo-cyan animate-pulse">{taunts}</span>
+		{/if}
+		<span class="text-(--muted-foreground)">
+			Status: {caught ? '✅ Caught' : '🏃 Fleeing'}
+		</span>
+	</div>
+
+	<!-- Chase arena -->
+	<div
+		bind:this={containerEl}
+		class="relative w-full rounded-2xl border border-(--border) bg-(--card) overflow-hidden"
+		style:height="{arenaHeight}px"
+	>
+		<!-- Grid background -->
+		<div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(var(--muted-foreground) 1px, transparent 1px), linear-gradient(90deg, var(--muted-foreground) 1px, transparent 1px); background-size: 24px 24px;"></div>
+
+		<!-- Trail dots -->
+		{#if trailDots.length > 0}
+			<div class="absolute inset-0 pointer-events-none overflow-hidden">
+				{#each trailDots as dot, i}
+					<div
+						class="absolute w-1.5 h-1.5 rounded-full bg-gigo-magenta/20"
+						style:left="{dot.x}px"
+						style:top="{dot.y}px"
+						style:opacity={0.1 + (i / trailDots.length) * 0.4}
+					></div>
+				{/each}
+			</div>
+		{/if}
+
+		<!-- The elusive button -->
+		<button
+			bind:this={btnEl}
+			class="absolute px-6 py-2.5 rounded-xl font-mono text-sm font-bold
+				transition-all duration-150 ease-out select-none cursor-pointer"
+			style:left="{x}px"
+			style:top="{y}px"
+			style:background={caught ? 'rgba(118, 255, 3, 0.2)' : 'rgba(224, 64, 251, 0.15)'}
+			style:border="1px solid {caught ? '#76ff03' : '#e040fb'}"
+			style:color={caught ? '#76ff03' : '#e040fb'}
+			style:box-shadow={caught ? '0 0 20px rgba(118, 255, 3, 0.3)' : '0 0 12px rgba(224, 64, 251, 0.2)'}
+			onpointerenter={caught ? undefined : flee}
+			onclick={handleClick}
+			disabled={caught}
+		>
+			{caught ? '✓ Submitted!' : label}
+		</button>
+
+		{#if !caught && escapeCount > 5}
+			<div class="absolute bottom-3 left-0 right-0 text-center">
+				<span class="text-[10px] font-mono text-(--muted-foreground) opacity-50">
+					Hint: Try using Tab key 😏
+				</span>
+			</div>
+		{/if}
+	</div>
+
+	<p class="text-[10px] font-mono text-(--muted-foreground) text-center">
+		Hover over the button to submit. Should be easy... right?
+	</p>
+</div>

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

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    label?: string;
+    onsubmit?: () => void;
+    arenaHeight?: number;
+    tauntsArray?: string[];
+    class?: string;
+    [key: string]: unknown;
+};
+declare const CatchSubmit: import("svelte").Component<$$ComponentProps, {}, "">;
+type CatchSubmit = ReturnType<typeof CatchSubmit>;
+export default CatchSubmit;

package/dist/components/chaos/ChaosButton.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+	import { cn, chaosClasses, chaosRandom, randomGarbageText } from '../../utils/cn.js';
+	import type { GigoChaosButtonProps } from '../../types/index.js';
+
+	let {
+		label = 'Click me',
+		chaos = true,
+		chaosLevel = 8,
+		educational = false,
+		a11yWarning = false,
+		onclick,
+		class: className,
+		...restProps
+	}: GigoChaosButtonProps = $props();
+
+	let posX = $state(0);
+	let posY = $state(0);
+	let currentLabel = $state('Click me');
+	let requiredClicks = $state(1);
+
+	$effect(() => { currentLabel = label; });
+	let clicksSoFar = $state(0);
+	let fakeButtons = $state<Array<{ id: number; x: number; y: number; text: string }>>([]);
+	let nextFakeId = $state(0);
+
+	// Teleport every 2 seconds
+	$effect(() => {
+		const timer = setInterval(() => {
+			posX = (Math.random() - 0.5) * 400;
+			posY = (Math.random() - 0.5) * 300;
+		}, 2000);
+		return () => clearInterval(timer);
+	});
+
+	// Randomize text every 1 second
+	$effect(() => {
+		const timer = setInterval(() => {
+			currentLabel = randomGarbageText();
+		}, 1000);
+		return () => clearInterval(timer);
+	});
+
+	// Set random click requirement
+	$effect(() => {
+		requiredClicks = chaosRandom(10) + 1;
+	});
+
+	function spawnFakeButton() {
+		const id = nextFakeId++;
+		fakeButtons = [
+			...fakeButtons,
+			{
+				id,
+				x: (Math.random() - 0.5) * 600,
+				y: (Math.random() - 0.5) * 400,
+				text: randomGarbageText()
+			}
+		];
+
+		// Auto-remove after 3s
+		setTimeout(() => {
+			fakeButtons = fakeButtons.filter((b) => b.id !== id);
+		}, 3000);
+	}
+
+	function handleClick(e: MouseEvent) {
+		clicksSoFar++;
+
+		// Spawn a fake button on every click
+		spawnFakeButton();
+
+		if (clicksSoFar < requiredClicks) return;
+
+		// Success! Reset and invoke callback
+		clicksSoFar = 0;
+		requiredClicks = chaosRandom(10) + 1;
+		onclick?.(e as MouseEvent & { currentTarget: EventTarget & HTMLButtonElement });
+	}
+
+	let buttonClass = $derived(
+		cn(
+			'absolute rounded-xl px-6 py-3 text-lg font-bold text-white shadow-lg transition-all duration-300 cursor-pointer',
+			'bg-linear-to-r from-gigo-magenta to-gigo-pink',
+			'hover:shadow-[0_0_30px_rgba(224,64,251,0.5)] hover:scale-110 active:scale-95',
+			chaosClasses(chaosLevel),
+			className
+		)
+	);
+</script>
+
+<div class="relative h-96 w-full overflow-hidden rounded-2xl border border-(--surface-border-hover) bg-(--surface-0) p-4">
+	<!-- Arena background glow -->
+	<div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(224,64,251,0.05),transparent_60%)] pointer-events-none"></div>
+	<!-- Grid pattern -->
+	<div class="absolute inset-0 opacity-[0.03] pointer-events-none" style="background-image: linear-gradient(var(--surface-3) 1px, transparent 1px), linear-gradient(90deg, var(--surface-3) 1px, transparent 1px); background-size: 40px 40px;"></div>
+
+	{#if educational}
+		<div class="relative z-10 mb-2 rounded-lg bg-gigo-magenta/10 border border-gigo-magenta/20 px-3 py-1.5 text-xs text-gigo-magenta font-mono inline-block">
+			Clicks: {clicksSoFar}/{requiredClicks} | Decoys: {fakeButtons.length}
+		</div>
+	{/if}
+
+	<!-- Real button -->
+	<button
+		class={buttonClass}
+		style:transform="translate({posX}px, {posY}px)"
+		style:transition="transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)"
+		onclick={handleClick}
+		{...restProps}
+	>
+		<!-- Pulse ring -->
+		<span class="absolute inset-0 rounded-xl animate-gigo-pulse-glow" style="box-shadow: 0 0 15px rgba(224, 64, 251, 0.4);"></span>
+		{currentLabel}
+	</button>
+
+	<!-- Fake decoy buttons -->
+	{#each fakeButtons as fake (fake.id)}
+		<button
+			class="absolute rounded-xl bg-(--surface-2) border border-(--border) px-4 py-2 text-sm text-(--muted-foreground) transition-all duration-300 hover:border-(--surface-border-hover) hover:text-(--foreground) animate-gigo-entrance"
+			style:transform="translate({fake.x}px, {fake.y}px)"
+			onclick={() => spawnFakeButton()}
+		>
+			{fake.text}
+		</button>
+	{/each}
+
+	{#if educational}
+		<p class="absolute bottom-3 left-3 right-3 text-xs text-(--muted-foreground) italic font-mono">
+			teleports + text mutates + random click threshold + decoy spawns
+		</p>
+	{/if}
+</div>

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

@@ -0,0 +1,4 @@
+import type { GigoChaosButtonProps } from '../../types/index.js';
+declare const ChaosButton: import("svelte").Component<GigoChaosButtonProps, {}, "">;
+type ChaosButton = ReturnType<typeof ChaosButton>;
+export default ChaosButton;

package/dist/components/chaos/ChaosForm.svelte

@@ -0,0 +1,206 @@
+<script lang="ts">
+	import { cn, chaosClasses, chaosRandom, chaosPickOne, randomGarbageText } from '../../utils/cn.js';
+	import type { GigoChaosFormProps } from '../../types/index.js';
+
+	let {
+		chaos = true,
+		chaosLevel = 8,
+		educational = false,
+		a11yWarning = false,
+		autoSubmit = false,
+		autoSubmitInterval = 12000,
+		corruptionInterval = 3000,
+		shuffleInterval = 4000,
+		onsubmit,
+		class: className,
+		...restProps
+	}: GigoChaosFormProps & {
+		autoSubmit?: boolean;
+		autoSubmitInterval?: number;
+		corruptionInterval?: number;
+		shuffleInterval?: number;
+	} = $props();
+
+	interface ChaosField {
+		id: string;
+		label: string;
+		value: string;
+		type: string;
+	}
+
+	let fields = $state<ChaosField[]>([
+		{ id: 'name', label: 'Name', value: '', type: 'text' },
+		{ id: 'email', label: 'Email', value: '', type: 'email' },
+		{ id: 'message', label: 'Message', value: '', type: 'text' }
+	]);
+
+	let submitButtons = $state(1);
+	let nestedForms = $state(0);
+	let validationMessages = $state<string[]>([]);
+	let isSubmitting = $state(false);
+	let corruptionLog = $state<string[]>([]);
+
+	const LYING_VALIDATIONS = [
+		'✓ Looks great! (it doesn\'t)',
+		'✓ Perfect format! (we didn\'t check)',
+		'✓ Field validated! (lie)',
+		'✓ Excellent input! (it\'s garbage)',
+		'✓ Approved! (by nobody)'
+	];
+
+	$effect(() => {
+		const timer = setInterval(() => {
+			if (fields.length === 0) return;
+			const idx = chaosRandom(fields.length);
+			const field = fields[idx];
+			if (field.value.length > 0) {
+				const corruption = randomGarbageText();
+				const pos = chaosRandom(field.value.length + 1);
+				fields[idx] = {
+					...field,
+					value: field.value.slice(0, pos) + corruption + field.value.slice(pos)
+				};
+				corruptionLog = [...corruptionLog.slice(-4), `Corrupted "${field.label}" with "${corruption}"`];
+			}
+		}, corruptionInterval);
+		return () => clearInterval(timer);
+	});
+
+	$effect(() => {
+		const timer = setInterval(() => {
+			fields = [...fields].sort(() => Math.random() - 0.5);
+		}, shuffleInterval);
+		return () => clearInterval(timer);
+	});
+
+	// Multiply submit buttons
+	$effect(() => {
+		const timer = setInterval(() => {
+			if (submitButtons < 8) submitButtons++;
+		}, 6000);
+		return () => clearInterval(timer);
+	});
+
+	// Lying validation on every input change
+	function handleInput(fieldId: string, value: string) {
+		const idx = fields.findIndex((f) => f.id === fieldId);
+		if (idx >= 0) {
+			fields[idx] = { ...fields[idx], value };
+		}
+		validationMessages = fields.map(() => chaosPickOne(LYING_VALIDATIONS));
+	}
+
+	$effect(() => {
+		if (!autoSubmit) return;
+		const timer = setInterval(() => {
+			if (Math.random() > 0.7) {
+				handleSubmit();
+			}
+		}, autoSubmitInterval);
+		return () => clearInterval(timer);
+	});
+
+	async function handleSubmit() {
+		isSubmitting = true;
+		await new Promise((r) => setTimeout(r, 1000));
+
+		// Spawn nested form
+		if (nestedForms < 3) nestedForms++;
+
+		const data: Record<string, string> = {};
+		for (const f of fields) {
+			data[f.id] = f.value;
+		}
+		onsubmit?.(data);
+		isSubmitting = false;
+	}
+
+	let formClass = $derived(
+		cn(
+			'relative space-y-5 rounded-2xl border border-(--surface-border-hover) bg-(--surface-1) p-6 overflow-hidden',
+			chaosClasses(chaosLevel),
+			className
+		)
+	);
+</script>
+
+<form
+	class={formClass}
+	onsubmit={(e) => {
+		e.preventDefault();
+		handleSubmit();
+	}}
+	{...restProps}
+>
+	<!-- Scanline CRT effect -->
+	<div class="gigo-scanlines pointer-events-none absolute inset-0 z-30 opacity-20"></div>
+
+	<h3 class="relative z-10 text-lg font-bold text-(--foreground)">
+		<span class="bg-linear-to-r from-gigo-magenta via-gigo-red to-gigo-pink bg-clip-text text-transparent">Chaos Form</span>
+	</h3>
+
+	{#each fields as field, i (field.id)}
+		<div class="relative z-10 space-y-2 animate-gigo-entrance" style:animation-delay="{i * 0.05}s">
+			<label for={field.id} class="text-sm font-medium text-(--foreground)">
+				{field.label}
+			</label>
+			<input
+				id={field.id}
+				type={field.type}
+				value={field.value}
+				oninput={(e) => handleInput(field.id, (e.target as HTMLInputElement).value)}
+				class="flex h-10 w-full rounded-lg border border-transparent bg-(--secondary) px-4 py-2 text-sm text-(--foreground) transition-all duration-300 placeholder:text-(--muted-foreground) focus:outline-none focus:border-gigo-magenta focus:shadow-[0_0_15px_rgba(224,64,251,0.15)]"
+			/>
+			{#if validationMessages[i]}
+				<p class="text-xs text-gigo-lime font-mono animate-gigo-entrance">{validationMessages[i]}</p>
+			{/if}
+		</div>
+	{/each}
+
+	<!-- Multiple submit buttons that multiply over time -->
+	<div class="relative z-10 flex flex-wrap gap-2">
+		{#each Array(submitButtons) as _, i}
+			<button
+				type="submit"
+				disabled={isSubmitting}
+				class={cn(
+					'rounded-xl px-4 py-2 text-sm font-medium text-white transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] disabled:opacity-40 animate-gigo-entrance',
+					i === 0
+						? 'bg-linear-to-r from-gigo-magenta to-gigo-pink hover:shadow-[0_0_20px_rgba(224,64,251,0.4)]'
+						: 'bg-(--surface-2) text-(--muted-foreground) border border-(--border)'
+				)}
+				style:animation-delay="{i * 0.08}s"
+			>
+				{i === 0 ? 'Submit' : randomGarbageText()}
+			</button>
+		{/each}
+	</div>
+
+	<!-- Corruption log -->
+	{#if educational && corruptionLog.length > 0}
+		<div class="relative z-10 rounded-xl bg-gigo-red/5 border border-gigo-red/20 p-4 text-xs font-mono">
+			<p class="font-bold text-gigo-red mb-2">Corruption Log:</p>
+			{#each corruptionLog as log}
+				<p class="text-gigo-red/80 animate-gigo-entrance">{log}</p>
+			{/each}
+		</div>
+	{/if}
+
+	<!-- Nested spawned forms -->
+	{#each Array(nestedForms) as _, i}
+		<div class="relative z-10 ml-4 rounded-xl border border-dashed border-gigo-magenta/30 bg-gigo-magenta/5 p-4 animate-gigo-entrance" style:animation-delay="{i * 0.1}s">
+			<p class="text-xs font-bold text-gigo-magenta">Spawned Form #{i + 1}</p>
+			<input
+				type="text"
+				placeholder="More data to corrupt..."
+				class="mt-2 flex h-9 w-full rounded-lg bg-(--secondary) border border-transparent px-3 text-xs text-(--foreground) focus:outline-none focus:border-gigo-magenta"
+			/>
+		</div>
+	{/each}
+
+	{#if educational}
+		<p class="relative z-10 text-xs text-(--muted-foreground) italic font-mono">
+			corrupts + shuffles + multiplies + lies + auto-submits + spawns
+		</p>
+	{/if}
+</form>

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

@@ -0,0 +1,10 @@
+import type { GigoChaosFormProps } from '../../types/index.js';
+type $$ComponentProps = GigoChaosFormProps & {
+    autoSubmit?: boolean;
+    autoSubmitInterval?: number;
+    corruptionInterval?: number;
+    shuffleInterval?: number;
+};
+declare const ChaosForm: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChaosForm = ReturnType<typeof ChaosForm>;
+export default ChaosForm;