@fuzdev/fuz_ui 0.169.0

package/dist/MdzNodeView.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import Code from '@fuzdev/fuz_code/Code.svelte';
+	import {resolve} from '$app/paths';
+
+	import type {MdzNode} from './mdz.js';
+	import DocsLink from './DocsLink.svelte';
+	import MdzNodeView from './MdzNodeView.svelte';
+	import {mdz_components_context, mdz_elements_context} from './mdz_components.js';
+
+	const {
+		node,
+	}: {
+		node: MdzNode;
+	} = $props();
+
+	const components = mdz_components_context.get_maybe();
+	const elements = mdz_elements_context.get_maybe();
+	// TODO make `Code` customizable via context, maybe registered as component Codeblock?
+</script>
+
+{#if node.type === 'Element'}
+	{@const element_config = elements?.get(node.name)}
+	{#if element_config !== undefined}
+		<svelte:element this={node.name}>
+			{#if node.children.length > 0}
+				{@render render_children(node.children)}
+			{/if}
+		</svelte:element>
+	{:else}
+		{@render render_unregistered_tag(node.name, node.children)}
+	{/if}
+{:else if node.type === 'Component'}
+	{@const Component = components?.get(node.name)}
+	{#if Component}
+		<Component>
+			{#if node.children.length > 0}
+				{@render render_children(node.children)}
+			{/if}
+		</Component>
+	{:else}
+		{@render render_unregistered_tag(node.name, node.children)}
+	{/if}
+{:else if node.type === 'Text'}
+	{node.content}
+{:else if node.type === 'Code'}
+	<DocsLink reference={node.content} />
+{:else if node.type === 'Bold'}
+	<strong>{@render render_children(node.children)}</strong>
+{:else if node.type === 'Italic'}
+	<em>{@render render_children(node.children)}</em>
+{:else if node.type === 'Strikethrough'}
+	<s>{@render render_children(node.children)}</s>
+{:else if node.type === 'Link'}
+	{@const {reference} = node}
+	{#if node.link_type === 'internal'}
+		{@const is_fragment_or_query_only = reference.startsWith('#') || reference.startsWith('?')}
+		<!-- Fragment/query-only links skip resolve() to avoid unwanted `/` prefix -->
+		<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+		<a href={is_fragment_or_query_only ? reference : resolve(reference as any)}
+			>{@render render_children(node.children)}</a
+		>
+	{:else}
+		<!-- external link -->
+		<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+		<a href={reference} target="_blank" rel="noopener">{@render render_children(node.children)}</a>
+	{/if}
+{:else if node.type === 'Paragraph'}
+	<p>{@render render_children(node.children)}</p>
+{:else if node.type === 'Hr'}
+	<hr />
+{:else if node.type === 'Heading'}
+	<svelte:element this={`h${node.level}`}>
+		{@render render_children(node.children)}
+	</svelte:element>
+{:else if node.type === 'Codeblock'}
+	<Code lang={node.lang} content={node.content} />
+{/if}
+
+{#snippet render_children(nodes: Array<MdzNode>)}
+	{#each nodes as node (node)}
+		<MdzNodeView {node} />
+	{/each}
+{/snippet}
+
+{#snippet render_unregistered_tag(name: string, children: Array<MdzNode>)}
+	{#if children.length > 0}
+		<code class="color_c_5">&lt;{name}&gt;</code>{@render render_children(children)}<code
+			class="color_c_5">&lt;/{name}&gt;</code
+		>
+	{:else}
+		<code class="color_c_5">&lt;{name} /&gt;</code>
+	{/if}
+{/snippet}

package/dist/MdzNodeView.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { MdzNode } from './mdz.js';
+import MdzNodeView from './MdzNodeView.svelte';
+type $$ComponentProps = {
+    node: MdzNode;
+};
+declare const MdzNodeView: import("svelte").Component<$$ComponentProps, {}, "">;
+type MdzNodeView = ReturnType<typeof MdzNodeView>;
+export default MdzNodeView;
+//# sourceMappingURL=MdzNodeView.svelte.d.ts.map

package/dist/MdzNodeView.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MdzNodeView.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/MdzNodeView.svelte"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,UAAU,CAAC;AAEtC,OAAO,WAAW,MAAM,sBAAsB,CAAC;AAG9C,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,OAAO,CAAC;CACd,CAAC;AA2FH,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/ModuleLink.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type {SvelteHTMLElements} from 'svelte/elements';
+
+	import {library_context} from './library.svelte.js';
+	import {contextmenu_attachment} from './contextmenu_state.svelte.js';
+	import {create_module_contextmenu} from './module_contextmenu.js';
+
+	const {
+		module_path,
+		children,
+		class: class_prop = 'chip',
+		...rest
+	}: SvelteHTMLElements['a'] & {
+		module_path: string; // TODO maybe rename?
+	} = $props();
+
+	const library = library_context.get();
+
+	const module = $derived(library.lookup_module(module_path));
+
+	const contextmenu_entries = $derived(module ? create_module_contextmenu(module) : undefined);
+
+	// TODO @many support full https:// url variants - automatic detection? library prop?
+</script>
+
+{#if module}
+	<!-- eslint-disable svelte/no-navigation-without-resolve -->
+	<a
+		{...rest}
+		class="module_link {class_prop}"
+		href={module.url_api}
+		{@attach contextmenu_attachment(contextmenu_entries)}
+	>
+		<!-- eslint-enable svelte/no-navigation-without-resolve -->
+		{#if children}
+			{@render children()}
+		{:else}
+			{module_path}
+		{/if}
+	</a>
+{:else}
+	<!-- Fallback to plain text if not found -->
+	{#if children}
+		{@render children()}
+	{:else}
+		{module_path}
+	{/if}
+{/if}

package/dist/ModuleLink.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { SvelteHTMLElements } from 'svelte/elements';
+type $$ComponentProps = SvelteHTMLElements['a'] & {
+    module_path: string;
+};
+declare const ModuleLink: import("svelte").Component<$$ComponentProps, {}, "">;
+type ModuleLink = ReturnType<typeof ModuleLink>;
+export default ModuleLink;
+//# sourceMappingURL=ModuleLink.svelte.d.ts.map

package/dist/ModuleLink.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModuleLink.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ModuleLink.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAMvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,GAAG,CAAC,GAAG;IAClD,WAAW,EAAE,MAAM,CAAC;CACpB,CAAC;AA6CH,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/PasteFromClipboard.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type {SvelteHTMLElements} from 'svelte/elements';
+
+	// TODO @many should this have the Button suffix?
+
+	const {
+		onclipboardtext,
+		onerror,
+		children,
+		class: class_prop,
+		...rest
+	}: SvelteHTMLElements['button'] & {
+		onclipboardtext: (text: string) => void;
+		onerror?: (error: Error) => void;
+	} = $props();
+
+	// TODO add docs entry, see also CopyToClipboard.svelte
+</script>
+
+<button
+	type="button"
+	title="paste from clipboard"
+	{...rest}
+	class="paste_from_clipboard {class_prop}"
+	onclick={async () => {
+		try {
+			const text = await navigator.clipboard.readText();
+			onclipboardtext(text);
+		} catch (error) {
+			onerror?.(error);
+		}
+	}}
+>
+	{#if children}{@render children()}{:else}paste{/if}
+</button>

package/dist/PasteFromClipboard.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { SvelteHTMLElements } from 'svelte/elements';
+type $$ComponentProps = SvelteHTMLElements['button'] & {
+    onclipboardtext: (text: string) => void;
+    onerror?: (error: Error) => void;
+};
+declare const PasteFromClipboard: import("svelte").Component<$$ComponentProps, {}, "">;
+type PasteFromClipboard = ReturnType<typeof PasteFromClipboard>;
+export default PasteFromClipboard;
+//# sourceMappingURL=PasteFromClipboard.svelte.d.ts.map

package/dist/PasteFromClipboard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasteFromClipboard.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/PasteFromClipboard.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAEvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,QAAQ,CAAC,GAAG;IACvD,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACjC,CAAC;AA8BH,QAAA,MAAM,kBAAkB,sDAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/PendingAnimation.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type {OmitStrict} from '@fuzdev/fuz_util/types.js';
+	import type {Snippet} from 'svelte';
+	import type {SvelteHTMLElements} from 'svelte/elements';
+
+	const {
+		inline,
+		running = true,
+		item_attrs,
+		class: class_prop,
+		children,
+		...rest
+	}: OmitStrict<SvelteHTMLElements['span'], 'children'> & {
+		inline?: boolean;
+		running?: boolean;
+		item_attrs?: SvelteHTMLElements['span'];
+		children?: Snippet<[index: number]>;
+	} = $props();
+
+	// TODO maybe switch to an `inline` class instead of setting multiple classes
+</script>
+
+<span
+	{...rest}
+	class="pending_animation {class_prop}"
+	class:running
+	class:display_flex={!inline}
+	class:display_inline_flex={inline}
+	class:align_items_center={inline}
+	><span {...item_attrs} style:animation-delay="0s"
+		>{#if children}{@render children(0)}{:else}•{/if}</span
+	><span {...item_attrs} style:animation-delay="0.09s"
+		>{#if children}{@render children(1)}{:else}•{/if}</span
+	><span {...item_attrs} style:animation-delay="0.3s"
+		>{#if children}{@render children(2)}{:else}•{/if}</span
+	></span
+>
+
+<style>
+	.pending_animation span {
+		font-size: var(--font_size, inherit);
+		display: inline-block;
+		transform: scale3d(var(--scale_x, 0.4), var(--scale_y, 0.4), var(--scale_z, 0.4));
+		animation: dot var(--animation_duration, var(--duration_5, 1.5s)) infinite paused;
+	}
+
+	.running span {
+		animation-play-state: running;
+	}
+
+	@keyframes dot {
+		0% {
+			transform: scale3d(var(--scale_x, 0.4), var(--scale_y, 0.4), var(--scale_z, 0.4));
+		}
+		71% {
+			transform: scale3d(1, 1, 1);
+		}
+		100% {
+			transform: scale3d(var(--scale_x, 0.4), var(--scale_y, 0.4), var(--scale_z, 0.4));
+		}
+	}
+</style>

package/dist/PendingAnimation.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { OmitStrict } from '@fuzdev/fuz_util/types.js';
+import type { Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
+type $$ComponentProps = OmitStrict<SvelteHTMLElements['span'], 'children'> & {
+    inline?: boolean;
+    running?: boolean;
+    item_attrs?: SvelteHTMLElements['span'];
+    children?: Snippet<[index: number]>;
+};
+declare const PendingAnimation: import("svelte").Component<$$ComponentProps, {}, "">;
+type PendingAnimation = ReturnType<typeof PendingAnimation>;
+export default PendingAnimation;
+//# sourceMappingURL=PendingAnimation.svelte.d.ts.map

package/dist/PendingAnimation.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PendingAnimation.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/PendingAnimation.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAC1D,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAEvD,KAAK,gBAAgB,GAAI,UAAU,CAAC,kBAAkB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAC7E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;CACpC,CAAC;AAwBH,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/PendingButton.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte';
+
+	import PendingAnimation from './PendingAnimation.svelte';
+	import type {SvelteHTMLElements} from 'svelte/elements';
+
+	const {
+		pending,
+		onclick,
+		running,
+		title: title_prop,
+		disabled: disabled_prop,
+		animation,
+		children,
+		class: class_prop,
+		...rest
+	}: SvelteHTMLElements['button'] & {
+		pending: boolean;
+		onclick: () => void;
+		running?: boolean;
+		title?: string;
+		disabled?: boolean;
+		animation?: Snippet;
+		children: Snippet;
+	} = $props();
+
+	let el: HTMLButtonElement | undefined = $state();
+
+	export const focus = (options?: FocusOptions): void => el?.focus(options);
+
+	// TODO maybe this shouldn't disable? just visually look disabled, maybe with `.disabled`?
+</script>
+
+<button
+	bind:this={el}
+	type="button"
+	{...rest}
+	class="pending_button {class_prop}"
+	disabled={disabled_prop ?? pending}
+	title={title_prop}
+	class:pending
+	{onclick}
+>
+	<span class="content">
+		{@render children()}
+	</span>
+	{#if pending}
+		<span class="animation">
+			{#if animation}
+				{@render animation()}
+			{:else}
+				<PendingAnimation {running} />
+			{/if}
+		</span>
+	{/if}
+</button>
+
+<style>
+	button {
+		position: relative;
+	}
+	.content {
+		display: contents;
+	}
+	.pending .content {
+		visibility: hidden; /* preserve the size */
+	}
+	.animation {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+</style>

package/dist/PendingButton.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
+type $$ComponentProps = SvelteHTMLElements['button'] & {
+    pending: boolean;
+    onclick: () => void;
+    running?: boolean;
+    title?: string;
+    disabled?: boolean;
+    animation?: Snippet;
+    children: Snippet;
+};
+declare const PendingButton: import("svelte").Component<$$ComponentProps, {
+    focus: (options?: FocusOptions) => void;
+}, "">;
+type PendingButton = ReturnType<typeof PendingButton>;
+export default PendingButton;
+//# sourceMappingURL=PendingButton.svelte.d.ts.map

package/dist/PendingButton.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PendingButton.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/PendingButton.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAGpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAEvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,QAAQ,CAAC,GAAG;IACvD,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AA6CH,QAAA,MAAM,aAAa;sBAxBQ,YAAY,KAAG,IAAI;MAwBa,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/ProjectLinks.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import Svg from './Svg.svelte';
+	import {gro_logo, fuz_logo, moss_logo, fuz_template_logo} from './logos.js';
+
+	const size = 'var(--icon_size_lg)';
+</script>
+
+<!--<a href="https://www.spiderspace.org/"></a>--><!--<a href="https://www.webdevladder.net/"></a>-->
+<!-- <a
+	class="project_link"
+	title="Zzz - bot control hq"
+	href="https://www.zzz.software/"><Svg data={zzz_logo} {size} /><span class="name">Zzz</span></a
+> -->
+<a
+	class="project_link"
+	title="Gro - task runner and toolkit extending SvelteKit"
+	href="https://gro.ryanatkn.com/"><Svg data={gro_logo} {size} /><span class="name">Gro</span></a
+>
+<a class="project_link" title="Moss - CSS framework" href="https://moss.ryanatkn.com/"
+	><Svg data={moss_logo} {size} /><span class="name">Moss</span></a
+>
+<a class="project_link" title="Fuz - Svelte UI library" href="https://www.fuz.dev/"
+	><Svg data={fuz_logo} {size} /><span class="name">Fuz</span></a
+>
+<a
+	class="project_link"
+	title="fuz_template - a static web app and Node library template with TypeScript, Svelte, SvelteKit, Vite, esbuild, Fuz, and Gro"
+	href="https://template.fuz.dev/"
+	><Svg data={fuz_template_logo} {size} /><span class="name">fuz_template</span></a
+>
+
+<style>
+	.project_link {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: var(--space_md);
+		text-align: center;
+	}
+
+	.project_link:hover {
+		text-decoration: none;
+	}
+	.project_link:hover .name {
+		text-decoration: underline;
+	}
+
+	.project_link .name {
+		display: block;
+		margin-top: var(--font_size_sm);
+		font-size: var(--font_size_lg);
+		font-weight: 400;
+	}
+</style>

package/dist/ProjectLinks.svelte.d.ts

@@ -0,0 +1,19 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ProjectLinks: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ProjectLinks = InstanceType<typeof ProjectLinks>;
+export default ProjectLinks;
+//# sourceMappingURL=ProjectLinks.svelte.d.ts.map

package/dist/ProjectLinks.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectLinks.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ProjectLinks.svelte"],"names":[],"mappings":"AAwBA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,YAAY;;kBAA+E,CAAC;AAChF,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AACxD,eAAe,YAAY,CAAC"}

package/dist/Redirect.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import {page} from '$app/state';
+	import {strip_start} from '@fuzdev/fuz_util/string.js';
+	import {goto} from '$app/navigation';
+	import type {Snippet} from 'svelte';
+	import {BROWSER} from 'esm-env';
+
+	const {
+		host = '',
+		path = page.url.pathname,
+		auto = true,
+		children,
+	}: {
+		/**
+		 * The target host to redirect to. Defaults to the current `location.host`.
+		 * @nonreactive
+		 */
+		host?: string;
+		/**
+		 * The target path to redirect to. Defaults to the current `location.pathname`.
+		 * @nonreactive
+		 */
+		path?: string;
+		/**
+		 * Should the redirect happen automatically without user input? Defaults to `true`.
+		 * @nonreactive
+		 */
+		auto?: boolean;
+		children?: Snippet<[url: string]>;
+	} = $props();
+
+	const url = host + path;
+
+	if (auto && BROWSER) void goto(url, {replaceState: true}); // eslint-disable-line svelte/no-navigation-without-resolve
+</script>
+
+<svelte:head>
+	{#if auto}<meta http-equiv="refresh" content="0; URL={url}" />{/if}
+</svelte:head>
+
+{#if children}{@render children(url)}{:else}<p>
+		<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+		redirect to <a href={url}>{strip_start(url, 'https://')}</a>
+	</p>{/if}

package/dist/Redirect.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /**
+     * The target host to redirect to. Defaults to the current `location.host`.
+     * @nonreactive
+     */
+    host?: string;
+    /**
+     * The target path to redirect to. Defaults to the current `location.pathname`.
+     * @nonreactive
+     */
+    path?: string;
+    /**
+     * Should the redirect happen automatically without user input? Defaults to `true`.
+     * @nonreactive
+     */
+    auto?: boolean;
+    children?: Snippet<[url: string]>;
+};
+declare const Redirect: import("svelte").Component<$$ComponentProps, {}, "">;
+type Redirect = ReturnType<typeof Redirect>;
+export default Redirect;
+//# sourceMappingURL=Redirect.svelte.d.ts.map

package/dist/Redirect.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Redirect.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Redirect.svelte"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAGnC,KAAK,gBAAgB,GAAI;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC;CAClC,CAAC;AA+BH,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/Spiders.svelte

@@ -0,0 +1,57 @@
+<script module lang="ts">
+	const minute_of_day = (): number => {
+		const now = new Date();
+		return now.getHours() * 60 + now.getMinutes();
+	};
+</script>
+
+<script lang="ts">
+	import {random_int, shuffle} from '@fuzdev/fuz_util/random.js';
+	import {create_random_alea} from '@fuzdev/fuz_util/random_alea.js';
+
+	import Svg from './Svg.svelte';
+	import {fuz_logo} from './logos.js';
+
+	const {
+		spiders = [
+			'var(--color_a_5)',
+			'var(--color_b_5)',
+			'var(--color_c_5)',
+			'var(--color_d_5)',
+			'var(--color_e_5)',
+			'var(--color_f_5)',
+			'var(--color_g_5)',
+			'var(--color_h_5)',
+			'var(--color_i_5)',
+			'var(--color_j_5)',
+		],
+		seed = minute_of_day(),
+		random = create_random_alea(seed),
+	}: {
+		spiders?: Array<string>; // for now, just colors
+		seed?: unknown;
+		random?: typeof Math.random;
+	} = $props();
+
+	const shuffled = $derived(shuffle(spiders.slice(), (min, max) => random_int(min, max, random)));
+	const rotations = $derived(shuffled.map(() => random_int(0, 359, random)));
+</script>
+
+<!-- TODO animate each in randomly -->
+<!-- TODO show when intersected in viewport, maybe inline `svelte-intersect` in Fuz? -->
+<div class="spiders" style:--spider_count={spiders.length}>
+	{#each shuffled as color, i (color)}
+		<Svg data={fuz_logo} fill={color} attrs={{style: `transform: rotate(${rotations[i]}deg)`}} />
+	{/each}
+</div>
+
+<style>
+	.spiders {
+		--width: calc(100% / var(--spider_count));
+		position: relative;
+		z-index: -1;
+		overflow: hidden;
+		display: grid;
+		grid-template-columns: repeat(var(--spider_count), 1fr);
+	}
+</style>

package/dist/Spiders.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    spiders?: Array<string>;
+    seed?: unknown;
+    random?: typeof Math.random;
+};
+declare const Spiders: import("svelte").Component<$$ComponentProps, {}, "">;
+type Spiders = ReturnType<typeof Spiders>;
+export default Spiders;
+//# sourceMappingURL=Spiders.svelte.d.ts.map

package/dist/Spiders.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spiders.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Spiders.svelte"],"names":[],"mappings":"AAeC,KAAK,gBAAgB,GAAI;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,IAAI,CAAC,MAAM,CAAC;CAC5B,CAAC;AA2CH,QAAA,MAAM,OAAO,sDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}