PulseBeam

<script lang="ts">
	import { PulseBeam } from "$lib/fancy-ui/pulse-beam";
	import ArrowUp from "@lucide/svelte/icons/arrow-up";
	import Bot from "@lucide/svelte/icons/bot";
	import Sparkles from "@lucide/svelte/icons/sparkles";
</script>

<!-- The child owns the surface: opaque background + the same radius as the beam. -->
<PulseBeam radius={20} class="mx-auto w-full max-w-md">
	<div class="bg-card rounded-[20px] p-4">
		<p class="text-muted-foreground text-sm">Build anything…</p>
		<div class="mt-8 flex items-center gap-2">
			<span
				class="bg-muted text-muted-foreground inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs"
			>
				<Bot class="size-3.5" />
				Agent
			</span>
			<span
				class="bg-muted text-muted-foreground inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs"
			>
				<Sparkles class="size-3.5" />
				Auto
			</span>
			<span
				class="bg-foreground text-background ml-auto inline-flex size-8 items-center justify-center rounded-full"
			>
				<ArrowUp class="size-4" />
			</span>
		</div>
	</div>
</PulseBeam>

<script lang="ts">
	import { PulseBeam } from "$lib/fancy-ui/pulse-beam";
	import LoaderCircle from "@lucide/svelte/icons/loader-circle";
	import Check from "@lucide/svelte/icons/check";

	const tasks = [
		"Generate color palettes",
		"Recommend font pairings",
		"Create layout templates",
		"Build section engine",
		"Generate hero variants",
	];

	let working = $state(true);
	let status = $state("fading in…");
</script>

<div class="flex flex-col items-center gap-4">
	<PulseBeam
		active={working}
		radius={20}
		class="w-full max-w-sm"
		onfadein={() => (status = "glow settled")}
		onfadeout={() => (status = "glow off, loop stopped")}
	>
		<div class="bg-card rounded-[20px] p-5">
			<p class="text-muted-foreground text-sm">
				{working ? "Working…" : "Done"}
			</p>
			<ul class="mt-4 space-y-3 text-sm">
				{#each tasks as task (task)}
					<li class="flex items-center gap-3">
						{#if working}
							<LoaderCircle class="text-muted-foreground size-4 animate-spin" />
						{:else}
							<Check class="size-4 text-emerald-500" />
						{/if}
						<span>{task}</span>
					</li>
				{/each}
			</ul>
		</div>
	</PulseBeam>

	<div class="flex items-center gap-3">
		<button
			class="bg-primary text-primary-foreground rounded-md px-3 py-1.5 text-sm"
			onclick={() => (working = !working)}
		>
			{working ? "Finish" : "Start again"}
		</button>
		<span class="text-muted-foreground text-xs">{status}</span>
	</div>
</div>

<script lang="ts">
	import { PulseBeam } from "$lib/fancy-ui/pulse-beam";
</script>

<!--
  `outside` keeps the 1px ring and paints a blurred halo *behind* the content,
  so the child must be opaque — otherwise the halo shows through it.
-->
<div class="py-8">
	<PulseBeam variant="outside" radius={16} class="mx-auto w-full max-w-md">
		<div class="bg-card rounded-2xl border p-5">
			<p class="text-sm font-medium">Deploying preview</p>
			<p class="text-muted-foreground mt-1 text-sm">
				Building 3 of 5 routes — the glow bleeds past the card edge.
			</p>
		</div>
	</PulseBeam>
</div>

<script lang="ts">
	import { PulseBeam, type PulseBeamPalette } from "$lib/fancy-ui/pulse-beam";

	const palettes: PulseBeamPalette[] = ["colorful", "mono", "ocean", "sunset"];
</script>

<div class="grid w-full max-w-lg grid-cols-2 gap-4">
	{#each palettes as palette (palette)}
		<PulseBeam {palette} radius={14}>
			<div class="bg-card rounded-[14px] p-4">
				<p class="text-sm font-medium capitalize">{palette}</p>
				<p class="text-muted-foreground mt-1 text-xs">
					{palette === "mono" ? "Halved opacity, no hue drift" : "Full palette with hue drift"}
				</p>
			</div>
		</PulseBeam>
	{/each}
</div>

<script lang="ts">
	import { PulseBeam } from "$lib/fancy-ui/pulse-beam";
</script>

<!-- Small boxes scale the outside halo down automatically. -->
<div class="py-6">
	<PulseBeam variant="outside" radius={999} class="mx-auto w-fit">
		<button class="bg-card rounded-full border px-5 py-2 text-sm font-medium">Subscribe</button>
	</PulseBeam>
</div>

<script lang="ts">
	import { PulseBeam, type PulseBeamProps } from "$lib/fancy-ui/pulse-beam";
	import PropsPlayground from "$lib/components/PropsPlayground.svelte";
</script>

<PropsPlayground
	controls={[
		{
			key: "variant",
			type: "select",
			label: "Type",
			options: [
				{ value: "inner", label: "Pulse inner" },
				{ value: "outside", label: "Pulse outside" },
			],
		},
		{
			key: "palette",
			type: "select",
			label: "Color",
			options: [
				{ value: "colorful", label: "Colorful" },
				{ value: "mono", label: "Mono" },
				{ value: "ocean", label: "Ocean" },
				{ value: "sunset", label: "Sunset" },
			],
		},
		{ key: "strength", type: "range", label: "Strength", min: 0, max: 1, step: 0.05 },
		{ key: "speed", type: "range", label: "Speed", min: 0.25, max: 3, step: 0.25 },
		{ key: "radius", type: "range", label: "Radius", min: 0, max: 40, step: 2 },
		{ key: "active", type: "boolean", label: "Active" },
		{ key: "hueShift", type: "boolean", label: "Hue drift" },
		{
			key: "tone",
			type: "select",
			label: "Tone",
			options: [
				{ value: "dark", label: "Dark surface" },
				{ value: "light", label: "Light surface" },
			],
		},
	]}
	initialValues={{
		variant: "inner",
		palette: "colorful",
		strength: 0.7,
		speed: 1,
		radius: 16,
		active: true,
		hueShift: true,
		tone: "dark",
	}}
>
	{#snippet preview(values)}
		<div class="py-8">
			<PulseBeam {...values as PulseBeamProps} class="mx-auto w-full max-w-md">
				<div class="bg-card p-5" style:border-radius="{values.radius}px">
					<p class="text-muted-foreground text-sm">Build anything…</p>
					<p class="mt-6 text-sm">
						Drag the controls — the loop keeps running, only the look changes.
					</p>
				</div>
			</PulseBeam>
		</div>
	{/snippet}
</PropsPlayground>