@fuzdev/fuz_ui 0.206.8 → 0.207.0

package/dist/DeclarationDetail.svelte

@@ -4,7 +4,7 @@
 Renders the full detail view for an exported declaration.
 Handles all svelte-docinfo declaration kinds (function, class, interface,
 type, variable, enum, component, snippet) and their kind-specific fields
-including parameters, props, members, overloads, intersects, and more.
+including parameters, props, members, overloads, external types, and more.
 
 @see `declaration.svelte.ts` for the `Declaration` wrapper class
 @see {@link https://github.com/ryanatkn/svelte-docinfo svelte-docinfo} for the analysis library
@@ -22,11 +22,24 @@ including parameters, props, members, overloads, intersects, and more.
 
 	import type { Declaration } from './declaration.svelte.js';
 	import TypeLink from './TypeLink.svelte';
+	import TypeJsonView from './TypeJsonView.svelte';
 	import ModuleLink from './ModuleLink.svelte';
 	import DocsLink from './DocsLink.svelte';
 
 	const { declaration }: { declaration: Declaration } = $props();
 
+	// external types not already shown in the inheritance section — on direct
+	// heritage (`interface Props extends HTMLButtonAttributes`) the producer
+	// deliberately records the same name in both fields, so the external-types
+	// section keeps only what heritage doesn't already display
+	const external_types_not_inherited = $derived.by(() => {
+		const external_types = declaration.external_types;
+		if (!external_types?.length) return undefined;
+		const heritage = (declaration.extends_types ?? []).concat(declaration.implements_types ?? []);
+		const filtered = external_types.filter((t) => !heritage.includes(t));
+		return filtered.length ? filtered : undefined;
+	});
+
 	// render mdz inline `code` as API-linking `DocsLink` and fenced blocks as syntax-highlighted
 	// `Code`, matching the rest of the docs — the injection mdz core leaves open
 	mdz_set_context_with_fallback(mdz_code_context, () => DocsLink);
@@ -57,7 +70,7 @@ including parameters, props, members, overloads, intersects, and more.
 		{/if}
 		<div class="row gap_md mb_sm">
 			<strong>type</strong>
-			<TypeLink type={param.type} />
+			<TypeLink type={param.type} type_info={param.typeInfo} />
 		</div>
 		{#if param.optional || param.defaultValue}
 			<div class="row gap_md">
@@ -79,7 +92,7 @@ including parameters, props, members, overloads, intersects, and more.
 		<code>
 			{param.name}{#if param.optional}?{/if}
 		</code>
-		<TypeLink type={param.type} />
+		<TypeLink type={param.type} type_info={param.typeInfo} />
 	</div>
 {/snippet}
 
@@ -125,7 +138,7 @@ including parameters, props, members, overloads, intersects, and more.
 	{/if}
 {/snippet}
 
-<!-- A comma-separated inline list of type links (extends, implements, intersects are rarely more than one). -->
+<!-- A comma-separated inline list of type links (extends, implements, external types are rarely more than one). -->
 {#snippet type_list(types: Array<string>)}
 	{#each types as type, i (type)}
 		{#if i > 0}
@@ -194,6 +207,23 @@ including parameters, props, members, overloads, intersects, and more.
 	<Code lang="ts" content={declaration.type_signature} />
 {/if}
 
+<!-- structured type (variables and type aliases; carries what the flat
+	signature lost — union members, recovered alias names — with links) -->
+{#if declaration.type_info}
+	<p class="row gap_md">
+		<strong>type</strong>
+		<TypeJsonView type_info={declaration.type_info} title={declaration.type_signature} />
+	</p>
+{/if}
+
+<!-- default (top-level variables; params, props, and members render theirs inline) -->
+{#if declaration.default_value}
+	<p class="row gap_md">
+		<strong>default</strong>
+		<Code lang="ts" content={declaration.default_value} />
+	</p>
+{/if}
+
 <!-- import statement -->
 <Code lang="ts" content={declaration.import_statement} />
 
@@ -226,7 +256,7 @@ including parameters, props, members, overloads, intersects, and more.
 				{/if}
 				<div class="row gap_md mb_sm">
 					<strong>type</strong>
-					<TypeLink type={prop.type} />
+					<TypeLink type={prop.type} type_info={prop.typeInfo} />
 				</div>
 				{#if prop.optional || prop.bindable || prop.defaultValue}
 					<div class="row gap_md">
@@ -274,7 +304,7 @@ including parameters, props, members, overloads, intersects, and more.
 				{#if overload.returnType}
 					<div class="row gap_md">
 						<strong>returns</strong>
-						<TypeLink type={overload.returnType} />
+						<TypeLink type={overload.returnType} type_info={overload.returnTypeInfo} />
 					</div>
 					{#if overload.returnDescription}
 						<Mdz content={overload.returnDescription} />
@@ -285,12 +315,13 @@ including parameters, props, members, overloads, intersects, and more.
 	</section>
 {/if}
 
-<!-- intersects (component/type intersection types) -->
-{#if declaration.intersects?.length}
+<!-- external types whose contributions are filtered out of (or, on
+	interfaces/classes, never enumerated in) props/members -->
+{#if external_types_not_inherited}
 	<section>
-		<h4>intersects</h4>
+		<h4>external types</h4>
 		<div class="row gap_md flex-wrap:wrap">
-			{@render type_list(declaration.intersects)}
+			{@render type_list(external_types_not_inherited)}
 		</div>
 	</section>
 {/if}
@@ -299,7 +330,14 @@ including parameters, props, members, overloads, intersects, and more.
 {#if declaration.return_type}
 	<section>
 		<h4>returns</h4>
-		<Code lang="ts" content={declaration.return_type} />
+		{#if declaration.return_type_info}
+			<!-- the flat expansion stays visible in the type signature above -->
+			<p>
+				<TypeJsonView type_info={declaration.return_type_info} title={declaration.return_type} />
+			</p>
+		{:else}
+			<Code lang="ts" content={declaration.return_type} />
+		{/if}
 		{#if declaration.return_description}
 			<Mdz content={declaration.return_description} />
 		{/if}
@@ -334,17 +372,13 @@ including parameters, props, members, overloads, intersects, and more.
 {/if}
 
 <!-- Extends/Implements -->
-{#if declaration.extends_type || declaration.implements_types?.length}
+{#if declaration.extends_types?.length || declaration.implements_types?.length}
 	<section>
 		<h4>inheritance</h4>
-		{#if declaration.extends_type}
+		{#if declaration.extends_types?.length}
 			<div class="row gap_md flex-wrap:wrap">
 				<strong>extends:</strong>
-				{@render type_list(
-					Array.isArray(declaration.extends_type)
-						? declaration.extends_type
-						: [declaration.extends_type]
-				)}
+				{@render type_list(declaration.extends_types)}
 			</div>
 		{/if}
 		{#if declaration.implements_types?.length}
@@ -440,6 +474,7 @@ including parameters, props, members, overloads, intersects, and more.
 							type={member.kind === 'constructor'
 								? `new ${member.typeSignature}`
 								: member.typeSignature}
+							type_info={member.kind === 'variable' ? member.typeInfo : undefined}
 						/>
 					</p>
 				{/if}
@@ -455,7 +490,7 @@ including parameters, props, members, overloads, intersects, and more.
 						{/if}
 					</div>
 				{/if}
-				{#if member.kind === 'variable' && member.defaultValue}
+				{#if (member.kind === 'variable' || member.kind === 'function') && member.defaultValue}
 					<div class="row gap_md">
 						<strong>default</strong>
 						<Code lang="ts" content={member.defaultValue} />
@@ -475,7 +510,7 @@ including parameters, props, members, overloads, intersects, and more.
 				{#if member.kind === 'function' && member.returnType}
 					<div class="row gap_md">
 						<strong>returns</strong>
-						<TypeLink type={member.returnType} />
+						<TypeLink type={member.returnType} type_info={member.returnTypeInfo} />
 					</div>
 					{#if member.returnDescription}
 						<Mdz content={member.returnDescription} />

package/dist/DeclarationDetail.svelte.d.ts

@@ -6,7 +6,7 @@ type $$ComponentProps = {
  * Renders the full detail view for an exported declaration.
  * Handles all svelte-docinfo declaration kinds (function, class, interface,
  * type, variable, enum, component, snippet) and their kind-specific fields
- * including parameters, props, members, overloads, intersects, and more.
+ * including parameters, props, members, overloads, external types, and more.
  *
  * @see `declaration.svelte.ts` for the `Declaration` wrapper class
  * @see {@link https://github.com/ryanatkn/svelte-docinfo svelte-docinfo} for the analysis library

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

@@ -1 +1 @@
-{"version":3,"file":"DeclarationDetail.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DeclarationDetail.svelte"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAgB1D,KAAK,gBAAgB,GAAI;IAAE,WAAW,EAAE,WAAW,CAAA;CAAE,CAAC;AA+cvD;;;;;;;;GAQG;AACH,QAAA,MAAM,iBAAiB,sDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"DeclarationDetail.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DeclarationDetail.svelte"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAiB1D,KAAK,gBAAgB,GAAI;IAAE,WAAW,EAAE,WAAW,CAAA;CAAE,CAAC;AA+evD;;;;;;;;GAQG;AACH,QAAA,MAAM,iBAAiB,sDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/ProjectActivityChart.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+	import type { OmitStrict } from '@fuzdev/fuz_util/types.ts';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+
+	import { project_items } from './projects.js';
+	import { project_stats_data } from './project_stats_data.js';
+	import { project_stats_label, project_stats_to_weekly_series } from './project_stats.js';
+	import { sparkline_geometry, type SparklineScale } from './sparkline.js';
+
+	/**
+	 * A large line chart of weekly commit activity with every fuz.dev project
+	 * drawn over one another, sharing one time window and one scale.
+	 *
+	 * Each project's line uses its `color_class` from `project_items` (the
+	 * `ProjectLinks` grid doubles as the legend), with the same per-point alpha
+	 * fade and end dot as `Sparkline`. Hovering a line shows the project's
+	 * stats via a native `title`. The svg scales to its container's width.
+	 *
+	 * The background is a light wash of `currentColor` (the inherited text
+	 * color), overridable with the `--sparkline_bg` custom property.
+	 *
+	 * @module
+	 */
+
+	const {
+		width = 800,
+		height = 160,
+		scale = 1 / 3,
+		stroke_width = 2,
+		alpha_floor = 0.4,
+		label = 'weekly commit activity for all projects, drawn over one another at a shared scale',
+		...rest
+	}: OmitStrict<SvelteHTMLElements['svg'], 'width' | 'height' | 'scale'> & {
+		/**
+		 * Width of the svg's coordinate space in px; rendering stretches to the container.
+		 */
+		width?: number;
+		/**
+		 * Height of the svg's coordinate space in px.
+		 */
+		height?: number;
+		/**
+		 * Vertical scale for the lines' geometry — see `SparklineScale`.
+		 */
+		scale?: SparklineScale;
+		stroke_width?: number;
+		/**
+		 * Stroke alpha at a value of 0, scaling linearly to 1 at the shared max.
+		 */
+		alpha_floor?: number;
+		/**
+		 * Accessible label for the chart.
+		 */
+		label?: string;
+	} = $props();
+
+	const chart_id = $props.id();
+
+	const { series, max } = project_stats_to_weekly_series(project_stats_data);
+	const color_class_by_name = new Map(project_items.map((p) => [p.name, p.color_class]));
+	const label_by_name = new Map(
+		project_stats_data.projects.map((p) => [p.name, project_stats_label(p)])
+	);
+
+	const lines = $derived(
+		series.flatMap(({ name, counts }) => {
+			const geometry = sparkline_geometry(counts, {
+				width,
+				height,
+				max,
+				scale,
+				stroke_width,
+				alpha_floor,
+				end_dot: true
+			});
+			return geometry
+				? [
+						{
+							name,
+							geometry,
+							color_class: color_class_by_name.get(name),
+							title: label_by_name.get(name)
+						}
+					]
+				: [];
+		})
+	);
+</script>
+
+<svg {...rest} viewBox="0 0 {width} {height}" role="img" aria-label={label}>
+	<defs>
+		{#each lines as line, index (line.name)}
+			<linearGradient
+				id="{chart_id}-{index}"
+				class={line.color_class}
+				gradientUnits="userSpaceOnUse"
+				x1="0"
+				y1="0"
+				x2={width}
+				y2="0"
+			>
+				{#each line.geometry.stops as stop, stop_index (stop_index)}
+					<stop offset={stop.offset} stop-color="currentColor" stop-opacity={stop.opacity} />
+				{/each}
+			</linearGradient>
+		{/each}
+	</defs>
+	{#each lines as line, index (line.name)}
+		<g class={line.color_class}>
+			<title>{line.title}</title>
+			<polyline
+				points={line.geometry.points}
+				fill="none"
+				stroke="url(#{chart_id}-{index})"
+				stroke-width={stroke_width}
+				stroke-linejoin="round"
+				stroke-linecap="round"
+			/>
+			<circle
+				cx={line.geometry.end_x}
+				cy={line.geometry.end_y}
+				r={line.geometry.dot_radius}
+				fill="currentColor"
+				fill-opacity={line.geometry.end_alpha}
+			/>
+		</g>
+	{/each}
+</svg>
+
+<style>
+	svg {
+		width: 100%;
+		height: auto;
+		background: var(--sparkline_bg, color-mix(in hsl, currentColor 8%, transparent));
+		border-radius: var(--border_radius_xs);
+	}
+</style>

package/dist/ProjectActivityChart.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { OmitStrict } from '@fuzdev/fuz_util/types.ts';
+import type { SvelteHTMLElements } from 'svelte/elements';
+import { type SparklineScale } from './sparkline.js';
+type $$ComponentProps = OmitStrict<SvelteHTMLElements['svg'], 'width' | 'height' | 'scale'> & {
+    /**
+     * Width of the svg's coordinate space in px; rendering stretches to the container.
+     */
+    width?: number;
+    /**
+     * Height of the svg's coordinate space in px.
+     */
+    height?: number;
+    /**
+     * Vertical scale for the lines' geometry — see `SparklineScale`.
+     */
+    scale?: SparklineScale;
+    stroke_width?: number;
+    /**
+     * Stroke alpha at a value of 0, scaling linearly to 1 at the shared max.
+     */
+    alpha_floor?: number;
+    /**
+     * Accessible label for the chart.
+     */
+    label?: string;
+};
+declare const ProjectActivityChart: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProjectActivityChart = ReturnType<typeof ProjectActivityChart>;
+export default ProjectActivityChart;
+//# sourceMappingURL=ProjectActivityChart.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectActivityChart.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ProjectActivityChart.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAK1D,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAExE,KAAK,gBAAgB,GAAI,UAAU,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG;IAC9F;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AA2FH,QAAA,MAAM,oBAAoB,sDAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/ProjectLinks.svelte

@@ -1,49 +1,15 @@
 <script lang="ts">
 	import Svg from './Svg.svelte';
-	import type { SvgData } from './svg.js';
-	import {
-		// TODO when fuz.dev is ready
-		// logo_fuz,
-		logo_fuz_ui,
-		logo_fuz_code,
-		logo_fuz_blog,
-		logo_fuz_mastodon,
-		logo_fuz_gitops,
-		logo_fuz_template,
-		logo_fuz_css,
-		logo_fuz_util,
-		logo_gro,
-		logo_svelte_docinfo,
-		logo_fuz_app,
-		logo_tsv
-	} from './logos.js';
+	import Sparkline from './Sparkline.svelte';
+	import { project_items, type ProjectItem } from './projects.js';
+	import { project_stats_data } from './project_stats_data.js';
+	import { project_stats_label, project_stats_to_monthly_series } from './project_stats.js';
 
-	// TODO refactor
-	interface ProjectItem {
-		name: string;
-		url: string;
-		logo: SvgData;
-		description: string;
-		glyph: string;
-		color_class: string;
-	}
-
-	// TODO ideally this wouldn't duplicate metadata like descriptions, but adding fuz_gitops to this repo is heavy
-	// prettier-ignore
-	const project_items: Array<ProjectItem> = [
-		{name: 'fuz_app', url: 'https://app.fuz.dev/', logo: logo_fuz_app, description: '[pre-alpha] fullstack app library', glyph: '🗝', color_class: 'color_j_50'},
-		{name: 'fuz_css', url: 'https://css.fuz.dev/', logo: logo_fuz_css, description: 'semantic-first CSS framework and design system', glyph: '🌿', color_class: 'color_b_50'},
-		{name: 'fuz_ui', url: 'https://ui.fuz.dev/', logo: logo_fuz_ui, description: 'Svelte UI library', glyph: '🧶', color_class: 'color_c_50'},
-		{name: 'fuz_template', url: 'https://template.fuz.dev/', logo: logo_fuz_template, description: 'a static web app and Node library template with TypeScript, Svelte, SvelteKit, Vite, esbuild, Gro, and Fuz', glyph: '❄', color_class: 'color_h_50'},
-		{name: 'fuz_blog', url: 'https://blog.fuz.dev/', logo: logo_fuz_blog, description: 'blog software from scratch with SvelteKit', glyph: '🖊️', color_class: 'color_e_50'},
-		{name: 'fuz_code', url: 'https://code.fuz.dev/', logo: logo_fuz_code, description: 'syntax styling utilities and components for TypeScript, Svelte, Markdown, and more', glyph: '🎨', color_class: 'color_g_50'},
-		{name: 'fuz_mastodon', url: 'https://mastodon.fuz.dev/', logo: logo_fuz_mastodon, description: 'Mastodon components and helpers for Svelte, SvelteKit, and Fuz', glyph: '🦣', color_class: 'color_d_50'},
-		{name: 'fuz_gitops', url: 'https://gitops.fuz.dev/', logo: logo_fuz_gitops, description: 'a tool for managing many repos', glyph: '🪄', color_class: 'color_a_50'},
-		{name: 'svelte-docinfo', url: 'https://svelte-docinfo.fuz.dev/', logo: logo_svelte_docinfo, description: 'static analysis for TypeScript and Svelte', glyph: '📜', color_class: 'color_i_50'},
-		{name: 'fuz_util', url: 'https://util.fuz.dev/', logo: logo_fuz_util, description: 'utility belt for JS', glyph: '🦕', color_class: 'color_f_50'},
-		{name: 'gro', url: 'https://github.com/fuzdev/gro', logo: logo_gro, description: 'task runner and toolkit extending SvelteKit', glyph: '🌰', color_class: 'color_f_50'},
-		{name: 'tsv', url: 'https://tsv.fuz.dev/', logo: logo_tsv, description: 'precise language tools for TypeScript/JS, CSS, and Svelte in Rust', glyph: '🪶', color_class: 'color_h_50'},
-	];
+	const { series, max } = project_stats_to_monthly_series(project_stats_data);
+	const series_by_name = new Map(series.map((s) => [s.name, s.counts]));
+	const label_by_name = new Map(
+		project_stats_data.projects.map((p) => [p.name, project_stats_label(p)])
+	);
 </script>
 
 <h2 class="mt_0 mb_xl2">Packages</h2>
@@ -52,19 +18,35 @@
 		{@render package_thumbnail(project_item)}
 	{/each}
 </menu>
+<small class="display:block text-align:right">
+	the charts show public commit activity<br />since Gro planted on August 7, 2019
+</small>
 
 {#snippet package_thumbnail(project_item: ProjectItem)}
-	<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
-	<a class="thumbnail row shade_00 px_md py_xs border_radius_sm mb_lg" href={project_item.url}>
+	{@const counts = series_by_name.get(project_item.name)}
+	<!-- eslint-disable svelte/no-navigation-without-resolve -->
+	<a
+		class="thumbnail row align-items:start shade_00 px_md py_xs border_radius_sm mb_lg"
+		href={project_item.url}
+	>
 		<Svg shrink={false} data={project_item.logo} size="var(--icon_size_lg)" />
 		<div class="pl_lg width_atmost_sm">
-			<div class="thumbnail-name {project_item.color_class}">{project_item.name}</div>
+			<div class="thumbnail-name row {project_item.color_class}">
+				{project_item.name}
+				{#if counts}
+					{@const stats_label = label_by_name.get(project_item.name)}
+					<div class="thumbnail-sparkline pl_md {project_item.color_class}" title={stats_label}>
+						<Sparkline values={counts} {max} scale={1 / 3} end_dot label={stats_label} />
+					</div>
+				{/if}
+			</div>
 			<div class="thumbnail-description font_size_md text_70 font-weight:500">
 				{project_item.description}
 				{project_item.glyph}
 			</div>
 		</div>
 	</a>
+	<!-- eslint-enable svelte/no-navigation-without-resolve -->
 {/snippet}
 
 <style>
@@ -101,4 +83,7 @@
 				transparent
 			);
 	}
+	.thumbnail-sparkline {
+		margin-left: auto;
+	}
 </style>

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

@@ -1 +1 @@
-{"version":3,"file":"ProjectLinks.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ProjectLinks.svelte"],"names":[],"mappings":"AAgFA,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"}
+{"version":3,"file":"ProjectLinks.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ProjectLinks.svelte"],"names":[],"mappings":"AA6DA,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/Sparkline.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+	import type { OmitStrict } from '@fuzdev/fuz_util/types.ts';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+
+	import { sparkline_geometry, type SparklineScale } from './sparkline.js';
+
+	/**
+	 * Renders values as a small inline SVG line graph.
+	 *
+	 * Designed for comparable small multiples: pass a shared `max` so a set of
+	 * sparklines renders at the same vertical scale instead of each stretching
+	 * to fit. The stroke uses `currentColor`, so color it by setting `color` on
+	 * the component or a parent (e.g. a fuz_css `color_*` class). Each point's
+	 * stroke alpha scales with its value, from `alpha_floor` at 0 up to 1 at
+	 * `max`, de-emphasizing quiet stretches.
+	 *
+	 * `scale` controls only the geometry: the nonlinear options compress the
+	 * top of the range so small values stay legible under a large shared
+	 * `max`, while the alpha fade keeps tracking the linear ratio so it still
+	 * encodes true magnitude.
+	 *
+	 * The background is a light wash of `currentColor`, overridable with the
+	 * `--sparkline_bg` custom property.
+	 *
+	 * @module
+	 */
+
+	const {
+		values,
+		max,
+		scale = 'linear',
+		width = 100,
+		height = 24,
+		stroke_width = 2,
+		alpha_floor = 0.4,
+		end_dot = false,
+		label,
+		...rest
+	}: OmitStrict<SvelteHTMLElements['svg'], 'values' | 'width' | 'height' | 'scale'> & {
+		values: Array<number>;
+		/**
+		 * The value rendered at full height and full alpha.
+		 * Pass a shared max across sparklines for comparable scales.
+		 * Defaults to the local max of `values`.
+		 */
+		max?: number;
+		/**
+		 * Vertical scale for the line's geometry — see `SparklineScale`.
+		 * The alpha fade always tracks the linear ratio regardless of `scale`.
+		 */
+		scale?: SparklineScale;
+		/**
+		 * Width of the svg in px.
+		 */
+		width?: number;
+		/**
+		 * Height of the svg in px.
+		 */
+		height?: number;
+		stroke_width?: number;
+		/**
+		 * Stroke alpha at a value of 0, scaling linearly to 1 at `max`.
+		 */
+		alpha_floor?: number;
+		/**
+		 * Renders a dot at the final point, anchoring the "now" end of the line.
+		 */
+		end_dot?: boolean;
+		/**
+		 * Accessible label. When omitted the svg is `aria-hidden`.
+		 */
+		label?: string;
+	} = $props();
+
+	const gradient_id = $props.id();
+
+	const geometry = $derived(
+		sparkline_geometry(values, { width, height, max, scale, stroke_width, alpha_floor, end_dot })
+	);
+</script>
+
+<svg
+	{...rest}
+	{width}
+	{height}
+	viewBox="0 0 {width} {height}"
+	role={label ? 'img' : undefined}
+	aria-label={label}
+	aria-hidden={label ? undefined : true}
+>
+	{#if geometry}
+		<defs>
+			<linearGradient
+				id={gradient_id}
+				gradientUnits="userSpaceOnUse"
+				x1="0"
+				y1="0"
+				x2={width}
+				y2="0"
+			>
+				{#each geometry.stops as stop, index (index)}
+					<stop offset={stop.offset} stop-color="currentColor" stop-opacity={stop.opacity} />
+				{/each}
+			</linearGradient>
+		</defs>
+		<polyline
+			points={geometry.points}
+			fill="none"
+			stroke="url(#{gradient_id})"
+			stroke-width={stroke_width}
+			stroke-linejoin="round"
+			stroke-linecap="round"
+		/>
+		{#if end_dot}
+			<circle
+				cx={geometry.end_x}
+				cy={geometry.end_y}
+				r={geometry.dot_radius}
+				fill="currentColor"
+				fill-opacity={geometry.end_alpha}
+			/>
+		{/if}
+	{/if}
+</svg>
+
+<style>
+	svg {
+		background: var(--sparkline_bg, color-mix(in hsl, currentColor 8%, transparent));
+		border-radius: var(--border_radius_xs);
+	}
+</style>

package/dist/Sparkline.svelte.d.ts

@@ -0,0 +1,42 @@
+import type { OmitStrict } from '@fuzdev/fuz_util/types.ts';
+import type { SvelteHTMLElements } from 'svelte/elements';
+import { type SparklineScale } from './sparkline.js';
+type $$ComponentProps = OmitStrict<SvelteHTMLElements['svg'], 'values' | 'width' | 'height' | 'scale'> & {
+    values: Array<number>;
+    /**
+     * The value rendered at full height and full alpha.
+     * Pass a shared max across sparklines for comparable scales.
+     * Defaults to the local max of `values`.
+     */
+    max?: number;
+    /**
+     * Vertical scale for the line's geometry — see `SparklineScale`.
+     * The alpha fade always tracks the linear ratio regardless of `scale`.
+     */
+    scale?: SparklineScale;
+    /**
+     * Width of the svg in px.
+     */
+    width?: number;
+    /**
+     * Height of the svg in px.
+     */
+    height?: number;
+    stroke_width?: number;
+    /**
+     * Stroke alpha at a value of 0, scaling linearly to 1 at `max`.
+     */
+    alpha_floor?: number;
+    /**
+     * Renders a dot at the final point, anchoring the "now" end of the line.
+     */
+    end_dot?: boolean;
+    /**
+     * Accessible label. When omitted the svg is `aria-hidden`.
+     */
+    label?: string;
+};
+declare const Sparkline: import("svelte").Component<$$ComponentProps, {}, "">;
+type Sparkline = ReturnType<typeof Sparkline>;
+export default Sparkline;
+//# sourceMappingURL=Sparkline.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sparkline.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Sparkline.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAExE,KAAK,gBAAgB,GAAI,UAAU,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG;IACzG,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACtB;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAoEH,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}