@fuzdev/fuz_ui 0.169.0

package/dist/DocsSecondaryNav.svelte.d.ts

@@ -0,0 +1,9 @@
+import { Tome } from './tome.js';
+type $$ComponentProps = {
+    tomes: Array<Tome>;
+    sidebar?: boolean;
+};
+declare const DocsSecondaryNav: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsSecondaryNav = ReturnType<typeof DocsSecondaryNav>;
+export default DocsSecondaryNav;
+//# sourceMappingURL=DocsSecondaryNav.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DocsSecondaryNav.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DocsSecondaryNav.svelte"],"names":[],"mappings":"AAIA,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAC;AAE9B,KAAK,gBAAgB,GAAI;IACxB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAuBH,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/DocsTertiaryNav.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+	import {page} from '$app/state';
+
+	import DocsModulesList from './DocsModulesList.svelte';
+	import DocsPageLinks from './DocsPageLinks.svelte';
+	import {to_tome_pathname, Tome} from './tome.js';
+	import {docs_links_context, DOCS_API_PATH} from './docs_helpers.svelte.js';
+	import {library_context} from './library.svelte.js';
+	import TomeLink from './TomeLink.svelte';
+	import ModuleLink from './ModuleLink.svelte';
+	import DeclarationLink from './DeclarationLink.svelte';
+
+	const {
+		tomes,
+		tomes_by_name,
+		sidebar = true,
+	}: {
+		tomes: Array<Tome>;
+		tomes_by_name: Map<string, Tome>;
+		sidebar?: boolean; // TODO @many dialog navs (this shouldn't exist)
+	} = $props();
+
+	const selected_tome = $derived(tomes.find((t) => to_tome_pathname(t) === page.url.pathname));
+
+	const tomes_related_to_selected = $derived(
+		selected_tome?.related_tomes
+			.map((name) => tomes_by_name.get(name))
+			.filter((t) => t !== undefined) ?? [],
+	);
+
+	const library = library_context.get();
+
+	const modules_related_to_selected = $derived(
+		selected_tome?.related_modules
+			.map((path) => library.lookup_module(path))
+			.filter((m) => m !== undefined) ?? [],
+	);
+
+	const declarations_related_to_selected = $derived(
+		selected_tome?.related_declarations
+			.map((name) => library.lookup_declaration(name))
+			.filter((d) => d !== undefined) ?? [],
+	);
+
+	const docs_links = docs_links_context.get();
+
+	const should_show_page_links = $derived(docs_links.docs_links.length > 0);
+
+	const at_api_root = $derived(page.url.pathname === DOCS_API_PATH);
+	const at_module = $derived(page.url.pathname.startsWith(DOCS_API_PATH + '/'));
+</script>
+
+<!-- TODO probably add a `nav` wrapper? around which? -->
+<aside class="docs_tertiary_nav unstyled">
+	{#if should_show_page_links}
+		<DocsPageLinks {sidebar} expand_width />
+	{/if}
+	{#if at_api_root || at_module}
+		<DocsModulesList expand_width />
+	{/if}
+	{#if tomes_related_to_selected.length}
+		<section class="related_section">
+			<h4 class="mb_sm">related tomes</h4>
+			<ul class="unstyled">
+				{#each tomes_related_to_selected as tome (tome.name)}
+					<li><TomeLink name={tome.name} class="menu_item" /></li>
+				{/each}
+			</ul>
+		</section>
+	{/if}
+	{#if modules_related_to_selected.length}
+		<section class="related_section">
+			<h4 class="mb_sm">related modules</h4>
+			<ul class="unstyled">
+				{#each modules_related_to_selected as module (module.path)}
+					<li><ModuleLink module_path={module.path} class="menu_item" /></li>
+				{/each}
+			</ul>
+		</section>
+	{/if}
+	{#if declarations_related_to_selected.length}
+		<section class="related_section">
+			<h4 class="mb_sm">related declarations</h4>
+			<ul class="unstyled">
+				{#each declarations_related_to_selected as declaration (declaration.name)}
+					<li><DeclarationLink name={declaration.name} class="menu_item" /></li>
+				{/each}
+			</ul>
+		</section>
+	{/if}
+</aside>
+
+<style>
+	.docs_tertiary_nav {
+		/* TODO @many lots of duplicate code between `DocsSecondaryNav` and `DocsTertiaryNav` */
+		position: fixed;
+		right: 0;
+		top: var(--docs_primary_nav_height);
+		z-index: 1;
+		width: var(--docs_sidebar_width);
+		height: calc(100% - var(--docs_primary_nav_height));
+		padding: var(
+			--docs_secondary_nav_padding
+		); /* needed with `overflow: auto` to avoid cutting off outline */
+		overflow: auto;
+		scrollbar-width: thin;
+		background-color: var(--fg_1);
+	}
+
+	/* sync this breakpoint with `/docs/+layout` */
+	@media (max-width: 1000px) {
+		.docs_tertiary_nav {
+			position: static;
+			background-color: initial;
+			overflow: initial;
+		}
+	}
+</style>

package/dist/DocsTertiaryNav.svelte.d.ts

@@ -0,0 +1,10 @@
+import { Tome } from './tome.js';
+type $$ComponentProps = {
+    tomes: Array<Tome>;
+    tomes_by_name: Map<string, Tome>;
+    sidebar?: boolean;
+};
+declare const DocsTertiaryNav: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsTertiaryNav = ReturnType<typeof DocsTertiaryNav>;
+export default DocsTertiaryNav;
+//# sourceMappingURL=DocsTertiaryNav.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DocsTertiaryNav.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DocsTertiaryNav.svelte"],"names":[],"mappings":"AAOA,OAAO,EAAmB,IAAI,EAAC,MAAM,WAAW,CAAC;AAOhD,KAAK,gBAAgB,GAAI;IACxB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,aAAa,EAAE,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AA6FH,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/EcosystemLinks.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	const {
+		selected,
+	}: {
+		selected?: 'webdevladder.net' | 'ryanatkn.com'; // 'spiderspace.org' |
+	} = $props();
+</script>
+
+<ul>
+	<li>
+		<a rel="me" href="https://www.ryanatkn.com/" class:selected={selected === 'ryanatkn.com'}
+			>ryanatkn.com</a
+		>
+		- my homepage{#if selected === 'ryanatkn.com'}, you are here{/if}
+	</li>
+	<!-- <li>
+		<a rel="me" href="https://www.spiderspace.org/" class:selected={selected === 'spiderspace.org'}
+			>spiderspace.org</a
+		>
+		- nontechnical design videos where we'll make a social website together with
+		<a href="https://www.zzz.software/">Zzz</a> when it's ready, YouTube channel
+		<a rel="me" href="https://youtube.com/@spiderspace_8000">@spiderspace_8000</a
+		>{#if selected === 'spiderspace.org'}, you are here{/if}
+	</li> -->
+	<li>
+		GitHub as <a rel="me" href="https://github.com/ryanatkn">@ryanatkn</a> and Bluesky as
+		<a href="https://bsky.app/profile/ryanatkn.com">@ryanatkn.com</a>
+	</li>
+	<li>
+		Mastodon as
+		<a rel="me" href="https://fosstodon.org/@ryanatkn">@ryanatkn@fosstodon.org</a> and
+		<a rel="me" href="https://fosstodon.org/@webdevladder">@webdevladder@fosstodon.org</a>
+	</li>
+	<li>
+		<a
+			rel="me"
+			href="https://www.webdevladder.net/"
+			class:selected={selected === 'webdevladder.net'}>webdevladder.net</a
+		>
+		- realworld webdev with TypeScript and Svelte,
+		<a href="https://www.webdevladder.net/blog">blog</a>
+		and YouTube channels
+		<a rel="me" href="https://youtube.com/@webdevladder">@webdevladder</a>
+		and
+		<a rel="me" href="https://youtube.com/@webdevladder_vods">@webdevladder_vods</a>, also
+		@webdevladder on <a rel="me" href="https://www.reddit.com/user/webdevladder/">Reddit</a> and
+		<a href="https://news.ycombinator.com/user?id=webdevladder">Hacker News</a
+		>{#if selected === 'webdevladder.net'}, you are here{/if}
+	</li>
+	<!-- <li>
+		support me at <a href="https://www.ryanatkn.com/funding">ryanatkn.com/funding</a>
+	</li> -->
+</ul>

package/dist/EcosystemLinks.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    selected?: 'webdevladder.net' | 'ryanatkn.com';
+};
+declare const EcosystemLinks: import("svelte").Component<$$ComponentProps, {}, "">;
+type EcosystemLinks = ReturnType<typeof EcosystemLinks>;
+export default EcosystemLinks;
+//# sourceMappingURL=EcosystemLinks.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EcosystemLinks.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/EcosystemLinks.svelte"],"names":[],"mappings":"AAGC,KAAK,gBAAgB,GAAI;IACxB,QAAQ,CAAC,EAAE,kBAAkB,GAAG,cAAc,CAAC;CAC/C,CAAC;AAsCH,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/EcosystemLinksPanel.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte';
+
+	import EcosystemLinks from './EcosystemLinks.svelte';
+	import ProjectLinks from './ProjectLinks.svelte';
+
+	const {
+		children,
+	}: {
+		children?: Snippet;
+	} = $props();
+</script>
+
+<section class="panel p_lg">
+	{#if children}
+		{@render children()}
+	{:else}
+		<h2 class="mt_0 mb_lg">Links</h2>
+	{/if}
+	<EcosystemLinks />
+	<div class="box row"><ProjectLinks /></div>
+</section>

package/dist/EcosystemLinksPanel.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
+};
+declare const EcosystemLinksPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type EcosystemLinksPanel = ReturnType<typeof EcosystemLinksPanel>;
+export default EcosystemLinksPanel;
+//# sourceMappingURL=EcosystemLinksPanel.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EcosystemLinksPanel.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/EcosystemLinksPanel.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAKnC,KAAK,gBAAgB,GAAI;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAwBH,QAAA,MAAM,mBAAmB,sDAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/GithubLink.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import {strip_start} from '@fuzdev/fuz_util/string.js';
+	import type {SvelteHTMLElements} from 'svelte/elements';
+	import {DEV} from 'esm-env';
+
+	import Svg from './Svg.svelte';
+	import {github_logo} from './logos.js';
+
+	const {
+		path,
+		href: href_prop,
+		children,
+		class: class_prop,
+		...rest
+	}: SvelteHTMLElements['a'] & {
+		/**
+		 * GitHub path - can be a full URL or a relative path like `owner/repo` or `owner/repo/blob/main/file.ts`
+		 * @example ryanatkn/fuz
+		 * @example ryanatkn/fuz/blob/main/src/lib/Card.svelte
+		 * @example https://github.com/ryanatkn/fuz/issues/123
+		 */
+		path?: string;
+	} = $props();
+
+	if (DEV && !path && !href_prop) {
+		throw new Error('GithubLink requires either `path` or `href` prop');
+	}
+
+	const href = $derived(
+		href_prop ??
+			(path
+				? path.startsWith('https://')
+					? path
+					: `https://github.com/${strip_start(path, '/')}`
+				: ''),
+	);
+
+	// extract meaningful display text from the path
+	const final_children = $derived(
+		children ??
+			(() => {
+				if (!path) return href || '';
+				const path_part = strip_start(path.replace('https://github.com/', ''), '/');
+
+				// for file/tree paths like "owner/repo/blob/main/src/file.ts" -> "src/file.ts"
+				const blob_regex = /^[^/]+\/[^/]+\/(?:blob|tree)\/[^/]+\/(.+)$/;
+				const blob_match = blob_regex.exec(path_part);
+				if (blob_match) return blob_match[1]!;
+
+				// for issue/PR like "owner/repo/issues/123" -> "owner/repo#123"
+				const issue_regex = /^([^/]+\/[^/]+)\/(issues|pull)\/(\d+)/;
+				const issue_match = issue_regex.exec(path_part);
+				if (issue_match) return `${issue_match[1]}#${issue_match[3]}`;
+
+				// default to the full path (typically "owner/repo")
+				return path_part;
+			})(),
+	);
+</script>
+
+<!-- TODO -next-line doesnt work? -->
+<!-- eslint-disable svelte/no-navigation-without-resolve -->
+<a {...rest} {href} class="github_link chip white_space_nowrap {class_prop}" rel="noopener"
+	><Svg
+		data={github_logo}
+		inline
+		size="var(--icon_size_xs)"
+		attrs={{class: 'mx_xs3 vertical_align_middle'}}
+	/>
+	{#if typeof final_children === 'string'}
+		<span class="font_family_mono">{final_children}</span>
+	{:else if final_children}
+		{@render final_children()}
+	{/if}</a
+>

package/dist/GithubLink.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { SvelteHTMLElements } from 'svelte/elements';
+type $$ComponentProps = SvelteHTMLElements['a'] & {
+    /**
+     * GitHub path - can be a full URL or a relative path like `owner/repo` or `owner/repo/blob/main/file.ts`
+     * @example ryanatkn/fuz
+     * @example ryanatkn/fuz/blob/main/src/lib/Card.svelte
+     * @example https://github.com/ryanatkn/fuz/issues/123
+     */
+    path?: string;
+};
+declare const GithubLink: import("svelte").Component<$$ComponentProps, {}, "">;
+type GithubLink = ReturnType<typeof GithubLink>;
+export default GithubLink;
+//# sourceMappingURL=GithubLink.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GithubLink.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/GithubLink.svelte"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAMvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,GAAG,CAAC,GAAG;IAClD;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAgEH,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/Glyph.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type {SvelteHTMLElements} from 'svelte/elements';
+
+	const {
+		glyph,
+		size,
+		class: class_prop,
+		...rest
+	}: SvelteHTMLElements['span'] & {
+		glyph: string;
+		size?: string | undefined;
+	} = $props();
+
+	const DEFAULT_SIZE = 'var(--font_size, 1em)';
+	const DEFAULT_FONT_SIZE = 'var(--font_size, inherit)';
+
+	const final_size = $derived(size ?? DEFAULT_SIZE);
+</script>
+
+<span
+	{...rest}
+	class="glyph display_inline_block text_align_center line_height_1 white_space_nowrap font_weight_400 {class_prop}"
+	style:width={final_size}
+	style:height={final_size}
+	style:min-width={final_size}
+	style:min-height={final_size}
+	style:font-size={size ?? DEFAULT_FONT_SIZE}>{glyph}</span
+>

package/dist/Glyph.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { SvelteHTMLElements } from 'svelte/elements';
+type $$ComponentProps = SvelteHTMLElements['span'] & {
+    glyph: string;
+    size?: string | undefined;
+};
+declare const Glyph: import("svelte").Component<$$ComponentProps, {}, "">;
+type Glyph = ReturnType<typeof Glyph>;
+export default Glyph;
+//# sourceMappingURL=Glyph.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Glyph.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Glyph.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAEvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,MAAM,CAAC,GAAG;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC1B,CAAC;AAqBH,QAAA,MAAM,KAAK,sDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/Hashlink.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type {SvelteHTMLElements} from 'svelte/elements';
+
+	const {
+		fragment,
+		children,
+		class: class_prop,
+		...rest
+	}: SvelteHTMLElements['a'] & {fragment: string} = $props();
+</script>
+
+<a {...rest} class="hashlink {class_prop}" href="#{fragment}" aria-label="hashlink"
+	>{#if children}{@render children()}{:else}#{/if}</a
+>
+<span class="hashlink_scroll_target" id={fragment} aria-hidden="true"></span>
+
+<style>
+	/* TODO @many how can this be done generically so it's composable? currently using `:global` at usage site - ideally we'd continue to use :hover instead of JS */
+	/* .some_parent:hover :global(.hashlink) { opacity: 1; } .some_parent { position: relative; } */
+
+	.hashlink {
+		font-size: var(--font_size_lg);
+		padding: 0 var(--space_sm);
+		margin-left: var(--space_sm);
+		opacity: 0;
+		transition: opacity var(--duration_2);
+	}
+
+	.hashlink_scroll_target {
+		position: absolute;
+		top: calc(var(--font_size, var(--font_size_md)) * -4);
+		left: 0;
+	}
+
+	/* sync this breakpoint with `Docs` */
+	@media (max-width: 800px) {
+		.hashlink {
+			opacity: 1;
+		}
+	}
+</style>

package/dist/Hashlink.svelte.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Hashlink.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Hashlink.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAEvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,GAAG,CAAC,GAAG;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAC,CAAC;AAmBvE,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/HiddenPersonalLinks.svelte

@@ -0,0 +1,6 @@
+<div hidden>
+	@ryanatkn@hci.social on <a rel="me" href="https://hci.social/@ryanatkn">Mastodon</a>
+</div>
+<div hidden>
+	@webdevladder@fosstodon.org on <a rel="me" href="https://fosstodon.org/@webdevladder">Mastodon</a>
+</div>

package/dist/HiddenPersonalLinks.svelte.d.ts

@@ -0,0 +1,27 @@
+export default HiddenPersonalLinks;
+type HiddenPersonalLinks = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const HiddenPersonalLinks: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}
+//# sourceMappingURL=HiddenPersonalLinks.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HiddenPersonalLinks.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/HiddenPersonalLinks.svelte"],"names":[],"mappings":";;;;;;;;AAoBA;;;;mBAA+H;6CATlF,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,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,WAAW,OAAO,SAAS;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,eAAe,QAAQ,CAAC"}

package/dist/HueInput.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+	import type {Hue} from '@fuzdev/fuz_util/colors.js';
+	import type {Snippet} from 'svelte';
+
+	let {
+		value = $bindable(180),
+		oninput,
+		children,
+	}: {
+		value?: Hue;
+		oninput?: (hue: Hue) => void;
+		children?: Snippet;
+	} = $props();
+
+	// TODO probably upstream this to belt
+	const parse_hue = (v: any): Hue | null => {
+		const t = typeof v;
+		if (t === 'number') return v;
+		if (t !== 'string') return null;
+		const parsed = Number(v);
+		if (Number.isNaN(parsed)) return null;
+		return parsed;
+	};
+
+	const update_hue = (v: Hue) => {
+		value = v;
+		oninput?.(value);
+	};
+
+	const on_input_event = (e: Event & {currentTarget: EventTarget & HTMLInputElement}) => {
+		const parsed = parse_hue(e.currentTarget.value);
+		if (parsed === null) return;
+		update_hue(parsed);
+	};
+
+	let el: HTMLInputElement | undefined = $state();
+
+	const set_hue_from_minimap = (e: MouseEvent & {currentTarget: EventTarget & HTMLElement}) => {
+		const rect = e.currentTarget.getBoundingClientRect();
+		const pct = (e.clientX - rect.x) / rect.width;
+		update_hue(Math.floor(360 * pct));
+		el?.focus();
+	};
+</script>
+
+<!-- TODO consider making this a text input or otherwise editable directly -->
+<div class="hue_input" style:--hue={value}>
+	<label>
+		{#if children}<div class="title">{@render children()}</div>{/if}
+		<div class="preview">
+			hue
+			<input type="number" step="0" class="hue" {value} oninput={on_input_event} />
+		</div>
+	</label>
+	<div class="minimap_wrapper">
+		<div class="minimap" onclick={set_hue_from_minimap} aria-hidden="true"></div>
+	</div>
+	<input
+		bind:this={el}
+		type="range"
+		aria-label="hue"
+		{value}
+		oninput={on_input_event}
+		min="0"
+		max="359"
+	/>
+</div>
+
+<style>
+	.hue_input {
+		--outline_color: hsl(var(--hue) 50% 60%);
+		/* TODO @many figure these variables out so they're easily customized (similar pattern in a lot of places) */
+		/* --thumb_background_color: hsl(var(--hue) 50% 50%); */
+	}
+	.preview {
+		background-color: hsl(var(--hue) 50% 50%);
+		height: var(--space_xl5);
+		margin: 0;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		font-weight: 700;
+		color: var(--bg);
+		padding-left: var(--space_xl);
+		border-top-left-radius: var(--border_radius, var(--border_radius_md));
+		border-top-right-radius: var(--border_radius, var(--border_radius_md));
+	}
+	.minimap_wrapper {
+		padding: 0 var(--input_padding_x);
+		background: hsl(0 50% 50%) 0%;
+	}
+	.minimap {
+		background: linear-gradient(
+			90deg,
+			hsl(0 50% 50%) 0%,
+			hsl(36 50% 50%) 10%,
+			hsl(72 50% 50%) 20%,
+			hsl(108 50% 50%) 30%,
+			hsl(144 50% 50%) 40%,
+			hsl(180 50% 50%) 50%,
+			hsl(216 50% 50%) 60%,
+			hsl(252 50% 50%) 70%,
+			hsl(288 50% 50%) 80%,
+			hsl(324 50% 50%) 90%,
+			hsl(360 50% 50%) 100%
+		);
+		height: var(--space_lg);
+	}
+	/* TODO generic way to make this seamless? */
+	input {
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+	}
+	.hue {
+		width: 10rem;
+		min-width: 10rem;
+		margin-left: var(--space_lg);
+		font-size: var(--font_size_lg);
+		text-align: center;
+		background-color: transparent;
+		border: none;
+		border-radius: var(--border_radius, var(--border_radius_md));
+		/* TODO why is this necessary? */
+		height: var(--input_height);
+		color: var(--bg);
+	}
+</style>

package/dist/HueInput.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Hue } from '@fuzdev/fuz_util/colors.js';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    value?: Hue;
+    oninput?: (hue: Hue) => void;
+    children?: Snippet;
+};
+declare const HueInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type HueInput = ReturnType<typeof HueInput>;
+export default HueInput;
+//# sourceMappingURL=HueInput.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HueInput.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/HueInput.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,4BAA4B,CAAC;AACpD,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAEnC,KAAK,gBAAgB,GAAI;IACxB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA6DH,QAAA,MAAM,QAAQ,2DAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}