@fuzdev/fuz_ui 0.199.0 → 0.201.0

package/README.md

@@ -1,4 +1,4 @@
-# Fuz
+# fuz_ui
 
 [<img src="static/logo.svg" alt="a friendly brown spider facing you" align="right" width="192" height="192">](https://ui.fuz.dev/)
 
@@ -6,7 +6,7 @@
 
 fuz_ui is a Svelte UI library with components and helpers for making zippy
 websites. It's built on [fuz_css](https://css.fuz.dev/)
-and provides includes a documentation system built on
+and provides a documentation system built on
 [svelte-docinfo](https://svelte-docinfo.fuz.dev/).
 It's in early alpha with breaking changes ahead.
 

package/dist/ApiDeclarationList.svelte

@@ -24,6 +24,7 @@
 {:else}
 	{#each declarations as declaration (`${declaration.module_path}:${declaration.name}`)}
 		<TomeSection>
+			<!-- Show the bare name; generic parameters are documented in the detail below (generics/type signature). -->
 			<TomeSectionHeader text={declaration.name}>
 				<div class="word-break:break-all">{declaration.name}</div>
 			</TomeSectionHeader>

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

@@ -1 +1 @@
-{"version":3,"file":"ApiDeclarationList.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ApiDeclarationList.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAKxD,KAAK,gBAAgB,GAAI;IACxB,YAAY,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAoCH,QAAA,MAAM,kBAAkB,sDAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"ApiDeclarationList.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ApiDeclarationList.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAKxD,KAAK,gBAAgB,GAAI;IACxB,YAAY,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAqCH,QAAA,MAAM,kBAAkB,sDAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/ApiModule.svelte

@@ -115,7 +115,7 @@
 		</TomeSection>
 
 		<!-- Depends on section -->
-		{#if module.dependencies}
+		{#if module.has_dependencies}
 			<TomeSection>
 				<TomeSectionHeader text="Depends on" />
 				<ul>
@@ -129,7 +129,7 @@
 		{/if}
 
 		<!-- Imported by section -->
-		{#if module.dependents}
+		{#if module.has_dependents}
 			<TomeSection>
 				<TomeSectionHeader text="Imported by" />
 				<ul>

package/dist/DeclarationDetail.svelte

@@ -11,6 +11,7 @@ including parameters, props, members, overloads, intersects, and more.
 -->
 <script lang="ts">
 	import Code from '@fuzdev/fuz_code/Code.svelte';
+	import type {ParameterJsonInput} from 'svelte-docinfo/types.js';
 
 	import type {Declaration} from './declaration.svelte.js';
 	import TypeLink from './TypeLink.svelte';
@@ -19,8 +20,106 @@ including parameters, props, members, overloads, intersects, and more.
 	import {tsdoc_see_to_mdz} from './tsdoc_mdz.js';
 
 	const {declaration}: {declaration: Declaration} = $props();
+
+	// Optional prose metadata shared by component props and nested members,
+	// rendered in a compact form (the top-level declaration uses prominent
+	// sections for the same fields instead).
+	interface DocExtras {
+		deprecatedMessage?: string;
+		since?: string;
+		examples?: Array<string>;
+		seeAlso?: Array<string>;
+		throws?: Array<{type?: string; description: string}>;
+	}
 </script>
 
+<!-- A single function/method parameter: name, description, type, and optional/default. -->
+{#snippet param_detail(param: ParameterJsonInput)}
+	<section>
+		<h4>
+			<code
+				>{param.name}{#if param.optional}<strong>?</strong>{/if}</code
+			>
+		</h4>
+		{#if param.description}
+			<Mdz content={param.description} />
+		{/if}
+		<div class="row gap_md mb_sm">
+			<strong>type</strong>
+			<TypeLink type={param.type} />
+		</div>
+		{#if param.optional || param.defaultValue}
+			<div class="row gap_md">
+				{#if param.optional}
+					<strong>optional</strong>
+				{/if}
+				{#if param.defaultValue}
+					<strong>default</strong>
+					<Code lang="ts" content={param.defaultValue} />
+				{/if}
+			</div>
+		{/if}
+	</section>
+{/snippet}
+
+<!-- A compact parameter row: name (with optional marker) and type, for snippet params and overloads. -->
+{#snippet param_row(param: ParameterJsonInput)}
+	<div class="row gap_md">
+		<code
+			>{param.name}{#if param.optional}?{/if}</code
+		>
+		<TypeLink type={param.type} />
+	</div>
+{/snippet}
+
+<!-- Compact prose metadata for props and members (deprecated, since, examples, see also, throws). -->
+{#snippet doc_extras(item: DocExtras)}
+	<!-- eslint-disable-next-line @typescript-eslint/no-deprecated -->
+	{#if item.deprecatedMessage !== undefined}
+		<p class="row gap_md">
+			<span class="chip">⚠️ deprecated</span>
+			<!-- eslint-disable-next-line @typescript-eslint/no-deprecated -->
+			{#if item.deprecatedMessage}{item.deprecatedMessage}{/if}
+		</p>
+	{/if}
+	{#if item.since}
+		<p><strong>since</strong> {item.since}</p>
+	{/if}
+	{#if item.examples?.length}
+		{#each item.examples as example (example)}
+			<Mdz content={example} />
+		{/each}
+	{/if}
+	{#if item.seeAlso?.length}
+		<p><strong>see also</strong></p>
+		<ul>
+			{#each item.seeAlso as ref (ref)}
+				<li><Mdz content={tsdoc_see_to_mdz(ref)} /></li>
+			{/each}
+		</ul>
+	{/if}
+	{#if item.throws?.length}
+		<p><strong>throws</strong></p>
+		<ul>
+			{#each item.throws as thrown (thrown)}
+				<li>
+					{#if thrown.type}
+						<code>{thrown.type}</code> - {thrown.description}
+					{:else}
+						{thrown.description}
+					{/if}
+				</li>
+			{/each}
+		</ul>
+	{/if}
+{/snippet}
+
+<!-- A comma-separated inline list of type links (extends, implements, intersects are rarely more than one). -->
+{#snippet type_list(types: Array<string>)}
+	{#each types as type, i (type)}{#if i > 0},
+		{/if}<TypeLink {type} />{/each}
+{/snippet}
+
 <!-- Metadata -->
 <p class="row justify-content:space-between">
 	<ModuleLink module_path={declaration.module_path} />
@@ -31,21 +130,37 @@ including parameters, props, members, overloads, intersects, and more.
 </p>
 
 <!-- chips -->
-<div class="row gap_md">
-	<!-- eslint-disable-next-line @typescript-eslint/no-deprecated -->
-	{#if declaration.is_deprecated}
-		<span class="chip">⚠️ deprecated</span>
-	{/if}
-	{#if declaration.accepts_children}
-		<span class="chip">accepts children</span>
-	{/if}
-	{#if declaration.alias_of}
-		<span class="chip"
-			>alias of {declaration.alias_of.name}{#if declaration.alias_of.module}
-				in {declaration.alias_of.module}{/if}</span
-		>
-	{/if}
-</div>
+<!-- eslint-disable-next-line @typescript-eslint/no-deprecated -->
+{#if declaration.is_deprecated || declaration.reactivity || declaration.accepts_children || declaration.alias_of}
+	<p class="row gap_md flex-wrap:wrap">
+		<!-- eslint-disable-next-line @typescript-eslint/no-deprecated -->
+		{#if declaration.is_deprecated}
+			<span class="chip">⚠️ deprecated</span>
+		{/if}
+		{#if declaration.reactivity}
+			<span class="chip">{declaration.reactivity}</span>
+		{/if}
+		{#if declaration.accepts_children}
+			<span class="chip">accepts children</span>
+		{/if}
+		{#if declaration.alias_of}
+			<span class="chip"
+				>alias of {declaration.alias_of.name}{#if declaration.alias_of.module}
+					in {declaration.alias_of.module}{/if}</span
+			>
+		{/if}
+	</p>
+{/if}
+
+<!-- also exported from -->
+{#if declaration.also_exported_from?.length}
+	<p class="row gap_md flex-wrap:wrap">
+		<strong>also exported from</strong>
+		{#each declaration.also_exported_from as module_path (module_path)}
+			<ModuleLink {module_path} />
+		{/each}
+	</p>
+{/if}
 
 <!-- eslint-disable-next-line @typescript-eslint/no-deprecated -->
 {#if declaration.deprecated_message}
@@ -60,6 +175,9 @@ including parameters, props, members, overloads, intersects, and more.
 	<Code lang="ts" content={declaration.type_signature} />
 {/if}
 
+<!-- import statement -->
+<Code lang="ts" content={declaration.import_statement} />
+
 <!-- documentation -->
 {#if declaration.has_documentation}
 	<Mdz content={declaration.doc_comment!} />
@@ -69,31 +187,7 @@ including parameters, props, members, overloads, intersects, and more.
 {#if declaration.parameters?.length}
 	<section>
 		{#each declaration.parameters as param (param)}
-			<section>
-				<h4>
-					<code
-						>{param.name}{#if param.optional}<strong>?</strong>{/if}</code
-					>
-				</h4>
-				{#if param.description}
-					<Mdz content={param.description} />
-				{/if}
-				<div class="row gap_md">
-					<strong>type</strong>
-					<TypeLink type={param.type} />
-				</div>
-				{#if param.optional || param.defaultValue}
-					<div class="row gap_md">
-						{#if param.optional}
-							<span class="chip">optional</span>
-						{/if}
-						{#if param.defaultValue}
-							<strong>default</strong>
-							<Code lang="ts" content={param.defaultValue} />
-						{/if}
-					</div>
-				{/if}
-			</section>
+			{@render param_detail(param)}
 		{/each}
 	</section>
 {/if}
@@ -111,17 +205,17 @@ including parameters, props, members, overloads, intersects, and more.
 				{#if prop.description}
 					<Mdz content={prop.description} />
 				{/if}
-				<div class="row gap_md mb_lg">
+				<div class="row gap_md mb_sm">
 					<strong>type</strong>
 					<TypeLink type={prop.type} />
 				</div>
 				{#if prop.optional || prop.bindable || prop.defaultValue}
 					<div class="row gap_md">
 						{#if prop.optional}
-							<span class="chip">optional</span>
+							<strong>optional</strong>
 						{/if}
 						{#if prop.bindable}
-							<span class="chip">bindable</span>
+							<strong>bindable</strong>
 						{/if}
 						{#if prop.defaultValue}
 							<strong>default</strong>
@@ -133,15 +227,11 @@ including parameters, props, members, overloads, intersects, and more.
 					<section>
 						<h5>snippet parameters</h5>
 						{#each prop.parameters as param (param)}
-							<div class="row gap_md">
-								<code
-									>{param.name}{#if param.optional}?{/if}</code
-								>
-								<TypeLink type={param.type} />
-							</div>
+							{@render param_row(param)}
 						{/each}
 					</section>
 				{/if}
+				{@render doc_extras(prop)}
 			</section>
 		{/each}
 	</section>
@@ -159,12 +249,7 @@ including parameters, props, members, overloads, intersects, and more.
 				{/if}
 				{#if overload.parameters?.length}
 					{#each overload.parameters as param (param)}
-						<div class="row gap_md">
-							<code
-								>{param.name}{#if param.optional}?{/if}</code
-							>
-							<TypeLink type={param.type} />
-						</div>
+						{@render param_row(param)}
 					{/each}
 				{/if}
 				{#if overload.returnType}
@@ -185,11 +270,9 @@ including parameters, props, members, overloads, intersects, and more.
 {#if declaration.intersects?.length}
 	<section>
 		<h4>intersects</h4>
-		<ul>
-			{#each declaration.intersects as type (type)}
-				<li><TypeLink {type} /></li>
-			{/each}
-		</ul>
+		<div class="row gap_md flex-wrap:wrap">
+			{@render type_list(declaration.intersects)}
+		</div>
 	</section>
 {/if}
 
@@ -207,10 +290,13 @@ including parameters, props, members, overloads, intersects, and more.
 <!-- generics -->
 {#if declaration.generic_params.length}
 	<section>
-		<h4>generics</h4>
+		<div class="row gap_md">
+			<h4>generics</h4>
+			<TypeLink type={declaration.display_name} />
+		</div>
 		{#each declaration.generic_params as generic (generic)}
 			<section>
-				<h4><code>{generic.name}</code></h4>
+				<h5><code>{generic.name}</code></h5>
 				{#if generic.constraint}
 					<div class="row gap_md">
 						<strong>constraint</strong>
@@ -233,27 +319,19 @@ including parameters, props, members, overloads, intersects, and more.
 	<section>
 		<h4>inheritance</h4>
 		{#if declaration.extends_type}
-			<div>
+			<div class="row gap_md flex-wrap:wrap">
 				<strong>extends:</strong>
-				{#if Array.isArray(declaration.extends_type)}
-					<ul>
-						{#each declaration.extends_type as ext (ext)}
-							<li><TypeLink type={ext} /></li>
-						{/each}
-					</ul>
-				{:else}
-					<TypeLink type={declaration.extends_type} />
-				{/if}
+				{@render type_list(
+					Array.isArray(declaration.extends_type)
+						? declaration.extends_type
+						: [declaration.extends_type],
+				)}
 			</div>
 		{/if}
 		{#if declaration.implements_types?.length}
-			<div>
+			<div class="row gap_md flex-wrap:wrap">
 				<strong>implements:</strong>
-				<ul>
-					{#each declaration.implements_types as impl (impl)}
-						<li><TypeLink type={impl} /></li>
-					{/each}
-				</ul>
+				{@render type_list(declaration.implements_types)}
 			</div>
 		{/if}
 	</section>
@@ -326,7 +404,12 @@ including parameters, props, members, overloads, intersects, and more.
 	<section>
 		{#each declaration.members as member (member)}
 			<section>
-				<h4><code>{member.name}</code></h4>
+				<h4>
+					<code
+						>{member.name}{#if member.kind !== 'constructor' && member.optional}<strong>?</strong
+							>{/if}</code
+					>
+				</h4>
 				{#if member.docComment}
 					<Mdz content={member.docComment} />
 				{/if}
@@ -340,42 +423,29 @@ including parameters, props, members, overloads, intersects, and more.
 						/>
 					</p>
 				{/if}
-				{#if member.modifiers?.length}
+				{#if member.modifiers?.length || (member.kind === 'variable' && member.reactivity)}
+					<div class="row gap_md flex-wrap:wrap">
+						{#if member.modifiers?.length}
+							{#each member.modifiers as modifier (modifier)}
+								<span class="chip">{modifier}</span>
+							{/each}
+						{/if}
+						{#if member.kind === 'variable' && member.reactivity}
+							<span class="chip">{member.reactivity}</span>
+						{/if}
+					</div>
+				{/if}
+				{#if member.kind === 'variable' && member.defaultValue}
 					<div class="row gap_md">
-						{#each member.modifiers as modifier (modifier)}
-							<span class="chip">{modifier}</span>
-						{/each}
+						<strong>default</strong>
+						<Code lang="ts" content={member.defaultValue} />
 					</div>
 				{/if}
 				<!-- parameters for methods and constructors -->
 				{#if (member.kind === 'function' || member.kind === 'constructor') && member.parameters?.length}
 					<section>
 						{#each member.parameters as param (param)}
-							<section>
-								<h5>
-									<code
-										>{param.name}{#if param.optional}<strong>?</strong>{/if}</code
-									>
-								</h5>
-								{#if param.description}
-									<Mdz content={param.description} />
-								{/if}
-								<div class="row gap_md">
-									<strong>type</strong>
-									<TypeLink type={param.type} />
-								</div>
-								{#if param.optional || param.defaultValue}
-									<div class="row gap_md">
-										{#if param.optional}
-											<span class="chip">optional</span>
-										{/if}
-										{#if param.defaultValue}
-											<strong>default</strong>
-											<Code lang="ts" content={param.defaultValue} />
-										{/if}
-									</div>
-								{/if}
-							</section>
+							{@render param_detail(param)}
 						{/each}
 					</section>
 				{/if}
@@ -389,24 +459,14 @@ including parameters, props, members, overloads, intersects, and more.
 						<Mdz content={member.returnDescription} />
 					{/if}
 				{/if}
-				<!-- throws for methods and constructors -->
-				{#if member.throws?.length}
-					<div>
-						<strong>throws</strong>
-						<ul>
-							{#each member.throws as thrown (thrown)}
-								<li>
-									{#if thrown.type}
-										<code>{thrown.type}</code> - {thrown.description}
-									{:else}
-										{thrown.description}
-									{/if}
-								</li>
-							{/each}
-						</ul>
-					</div>
-				{/if}
+				{@render doc_extras(member)}
 			</section>
 		{/each}
 	</section>
 {/if}
+
+<style>
+	section section:not(:last-child) {
+		margin-bottom: var(--space_xl4);
+	}
+</style>

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":"AAKA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAMxD,KAAK,gBAAgB,GAAI;IAAC,WAAW,EAAE,WAAW,CAAA;CAAC,CAAC;AAuYrD;;;;;;;;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":"AAMA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAiBxD,KAAK,gBAAgB,GAAI;IAAC,WAAW,EAAE,WAAW,CAAA;CAAC,CAAC;AAqbrD;;;;;;;;GAQG;AACH,QAAA,MAAM,iBAAiB,sDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}