@fuzdev/fuz_ui 0.198.1 → 0.200.0

package/dist/ApiDeclarationList.svelte

@@ -24,8 +24,9 @@
 {:else}
 	{#each declarations as declaration (`${declaration.module_path}:${declaration.name}`)}
 		<TomeSection>
+			<!-- `text` drives the slug/anchor (bare name); display shows generics via `display_name` -->
 			<TomeSectionHeader text={declaration.name}>
-				<div class="word-break:break-all">{declaration.name}</div>
+				<div class="word-break:break-all">{declaration.display_name}</div>
 			</TomeSectionHeader>
 			<article id={declaration.name}>
 				<DeclarationDetail {declaration} />

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/ApiIndex.svelte

@@ -34,7 +34,7 @@
 </script>
 
 <svelte:head>
-	<title>API docs - {library.package_json.name}</title>
+	<title>API docs - {library.pkg_json.name}</title>
 </svelte:head>
 
 <TomeContent {tome}>
@@ -44,7 +44,7 @@
 		</section>
 	{:else}
 		<section>
-			<p>{library.package_json.description}</p>
+			<p>{library.pkg_json.description}</p>
 
 			{#if search.modules.all.length + search.declarations.all.length > 1}
 				<DocsSearch

package/dist/ApiModule.svelte

@@ -54,7 +54,7 @@
 </script>
 
 <svelte:head>
-	<title>{module_name} - API docs - {library.package_json.name}</title>
+	<title>{module_name} - API docs - {library.pkg_json.name}</title>
 </svelte:head>
 
 <TomeContent {tome}>
@@ -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,90 @@ 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}
+
+<!-- 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}
+
 <!-- Metadata -->
 <p class="row justify-content:space-between">
 	<ModuleLink module_path={declaration.module_path} />
@@ -31,21 +114,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 +159,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 +171,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 +189,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>
@@ -142,6 +220,7 @@ including parameters, props, members, overloads, intersects, and more.
 						{/each}
 					</section>
 				{/if}
+				{@render doc_extras(prop)}
 			</section>
 		{/each}
 	</section>
@@ -326,7 +405,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 +424,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,23 +460,7 @@ 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>

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;AAmbrD;;;;;;;;GAQG;AACH,QAAA,MAAM,iBAAiB,sDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/LibraryDetail.svelte

@@ -16,7 +16,7 @@ with file-type coloring. Uses svelte-docinfo's file type predicates for module c
 	import ImgOrSvg from './ImgOrSvg.svelte';
 	import DeclarationLink from './DeclarationLink.svelte';
 	import ModuleLink from './ModuleLink.svelte';
-	import {url_github_file, repo_url_parse} from './package_helpers.js';
+	import {url_github_file} from '@fuzdev/fuz_util/package_helpers.js';
 	import {isTypescript, isSvelte, isCss, isJson} from 'svelte-docinfo/source.js';
 
 	const {
@@ -46,11 +46,10 @@ with file-type coloring. Uses svelte-docinfo's file type predicates for module c
 
 	// TODO show other data (lines of code)
 
-	const {package_json} = $derived(library);
+	const {pkg_json} = $derived(library);
 
-	const repository_url = $derived(repo_url_parse(package_json.repository));
 	const license_url = $derived(
-		package_json.license && repository_url ? url_github_file(repository_url, 'LICENSE') : null,
+		pkg_json.license ? url_github_file(library.repo_url, 'LICENSE') : null,
 	);
 </script>
 
@@ -67,30 +66,30 @@ with file-type coloring. Uses svelte-docinfo's file type predicates for module c
 						{@render repo_name(library.repo_name)}
 					{:else}
 						<div class="repo-name">
-							{library.repo_name}{#if package_json.glyph}&nbsp;{package_json.glyph}{/if}
+							{library.repo_name}{#if pkg_json.glyph}&nbsp;{pkg_json.glyph}{/if}
 						</div>
 					{/if}
 				</header>
 				{@render children?.(library)}
-				{#if package_json.description}
+				{#if pkg_json.description}
 					{#if description}
-						{@render description(package_json.description)}
+						{@render description(pkg_json.description)}
 					{:else}
-						<div class="description">{package_json.description}</div>
+						<div class="description">{pkg_json.description}</div>
 					{/if}
 				{/if}
-				{#if package_json.tagline}
+				{#if pkg_json.tagline}
 					{#if tagline}
-						{@render tagline(package_json.tagline)}
+						{@render tagline(pkg_json.tagline)}
 					{:else}
-						<div class="tagline">{package_json.tagline}</div>
+						<div class="tagline">{pkg_json.tagline}</div>
 					{/if}
 				{/if}
 				{#if library.npm_url}
 					{#if npm_url}
 						{@render npm_url(library.npm_url)}
 					{:else}
-						<blockquote class="npm-url">npm i -D {package_json.name}</blockquote>
+						<blockquote class="npm-url">npm i -D {pkg_json.name}</blockquote>
 					{/if}
 				{/if}
 				<!-- TODO accessible HTML -->
@@ -130,20 +129,19 @@ with file-type coloring. Uses svelte-docinfo's file type predicates for module c
 					{#if library.npm_url}
 						<span class="title">npm</span>
 						<div class="content">
-							<a class="chip" title="npm" href={library.npm_url}>{package_json.name}</a>
+							<a class="chip" title="npm" href={library.npm_url}>{pkg_json.name}</a>
 						</div>
 					{/if}
 					{#if library.changelog_url}
 						<span class="title">version</span>
 						<div class="content">
-							<a class="chip" title="version" href={library.changelog_url}>{package_json.version}</a
-							>
+							<a class="chip" title="version" href={library.changelog_url}>{pkg_json.version}</a>
 						</div>
 					{/if}
 					{#if license_url}
 						<span class="title">license</span>
 						<div class="content">
-							<a class="chip" title="license" href={license_url}>{package_json.license}</a>
+							<a class="chip" title="license" href={license_url}>{pkg_json.license}</a>
 						</div>
 					{/if}
 				</section>

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

@@ -1 +1 @@
-{"version":3,"file":"LibraryDetail.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/LibraryDetail.svelte"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAEpC,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,qBAAqB,CAAC;AAOhD,KAAK,gBAAgB,GAAI;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;CACvC,CAAC;AAkKH;;;;;;GAMG;AACH,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"LibraryDetail.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/LibraryDetail.svelte"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAEpC,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,qBAAqB,CAAC;AAOhD,KAAK,gBAAgB,GAAI;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;CACvC,CAAC;AAiKH;;;;;;GAMG;AACH,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/LibrarySummary.svelte

@@ -26,7 +26,7 @@
 		children?: Snippet;
 	} = $props();
 
-	const {package_json} = $derived(library);
+	const {pkg_json} = $derived(library);
 </script>
 
 <div class="library-summary">
@@ -51,24 +51,24 @@
 			{/if}
 		{/if}
 	</header>
-	{#if package_json.tagline}
+	{#if pkg_json.tagline}
 		{#if tagline}
-			{@render tagline(package_json.tagline, package_json.glyph)}
+			{@render tagline(pkg_json.tagline, pkg_json.glyph)}
 		{:else}
 			<p class="panel py_md px_xl">
-				{package_json.tagline}
-				{package_json.glyph}
+				{pkg_json.tagline}
+				{pkg_json.glyph}
 			</p>
 		{/if}
 	{/if}
-	{#if package_json.description}
+	{#if pkg_json.description}
 		{#if description}
-			{@render description(package_json.description, package_json.glyph)}
+			{@render description(pkg_json.description, pkg_json.glyph)}
 		{:else}
 			<p class="text-align:center">
-				{package_json.description}
-				{#if !package_json.tagline}
-					{package_json.glyph}
+				{pkg_json.description}
+				{#if !pkg_json.tagline}
+					{pkg_json.glyph}
 				{/if}
 			</p>
 		{/if}
@@ -96,7 +96,7 @@
 		{/if}
 		{#if library.changelog_url}
 			<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
-			<a class="chip" title="version" href={library.changelog_url}>{package_json.version}</a>
+			<a class="chip" title="version" href={library.changelog_url}>{pkg_json.version}</a>
 		{/if}
 		{#if library.npm_url}
 			<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
@@ -108,7 +108,7 @@
 			{@render npm_url(library.npm_url)}
 		{:else}
 			<p class="panel py_md px_xl font_family_mono text-align:center">
-				npm i -D {package_json.name}
+				npm i -D {pkg_json.name}
 			</p>
 		{/if}
 	{/if}

package/dist/Mdz.svelte

@@ -3,7 +3,7 @@
 
 	import {mdz_parse} from './mdz.js';
 	import MdzNodeView from './MdzNodeView.svelte';
-	import {mdz_base_context} from './mdz_components.js';
+	import {mdz_base_context, set_mdz_context_with_fallback} from './mdz_components.js';
 
 	const {
 		content,
@@ -18,7 +18,7 @@
 		base?: string;
 	} = $props();
 
-	mdz_base_context.set(() => base);
+	set_mdz_context_with_fallback(mdz_base_context, () => base);
 
 	const nodes = $derived(mdz_parse(content));
 </script>

package/dist/MdzNodeView.svelte

@@ -3,7 +3,7 @@
 	import {resolve} from '$app/paths';
 
 	import type {MdzNode} from './mdz.js';
-	import {resolve_relative_path} from './mdz_helpers.js';
+	import {resolve_relative_path, mdz_is_safe_reference} from './mdz_helpers.js';
 	import DocsLink from './DocsLink.svelte';
 	import MdzNodeView from './MdzNodeView.svelte';
 	import {
@@ -18,14 +18,14 @@
 		node: MdzNode;
 	} = $props();
 
-	const components = mdz_components_context.get_maybe();
-	const elements = mdz_elements_context.get_maybe();
+	const get_components = mdz_components_context.get_maybe();
+	const get_elements = mdz_elements_context.get_maybe();
 	const get_mdz_base = mdz_base_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)}
+	{@const element_config = get_elements?.()?.get(node.name)}
 	{#if element_config !== undefined}
 		<svelte:element this={node.name}>
 			{#if node.children.length > 0}
@@ -36,7 +36,7 @@
 		{@render render_unregistered_tag(node.name, node.children)}
 	{/if}
 {:else if node.type === 'Component'}
-	{@const Component = components?.get(node.name)}
+	{@const Component = get_components?.()?.get(node.name)}
 	{#if Component}
 		<Component>
 			{#if node.children.length > 0}
@@ -58,7 +58,9 @@
 	<s>{@render render_children(node.children)}</s>
 {:else if node.type === 'Link'}
 	{@const {reference} = node}
-	{#if node.link_type === 'internal'}
+	{#if !mdz_is_safe_reference(reference)}
+		{@render render_children(node.children)}
+	{:else if node.link_type === 'internal'}
 		{@const skip_resolve = reference.startsWith('#') || reference.startsWith('?')}
 		{@const mdz_base = get_mdz_base?.()}
 		{#if reference.startsWith('.') && mdz_base}

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

@@ -1 +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;AAGtC,OAAO,WAAW,MAAM,sBAAsB,CAAC;AAO9C,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,OAAO,CAAC;CACd,CAAC;AAqGH,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"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;AAGtC,OAAO,WAAW,MAAM,sBAAsB,CAAC;AAO9C,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,OAAO,CAAC;CACd,CAAC;AAuGH,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/MdzRoot.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte';
+
+	import {
+		mdz_base_context,
+		mdz_components_context,
+		mdz_elements_context,
+		set_mdz_context_with_fallback,
+		type MdzComponents,
+		type MdzElements,
+	} from './mdz_components.js';
+
+	const {
+		base,
+		components,
+		elements,
+		children,
+	}: {
+		base?: string;
+		components?: MdzComponents;
+		elements?: MdzElements;
+		children: Snippet;
+	} = $props();
+
+	set_mdz_context_with_fallback(mdz_base_context, () => base);
+	set_mdz_context_with_fallback(mdz_components_context, () => components);
+	set_mdz_context_with_fallback(mdz_elements_context, () => elements);
+</script>
+
+{@render children()}

package/dist/MdzRoot.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import { type MdzComponents, type MdzElements } from './mdz_components.js';
+type $$ComponentProps = {
+    base?: string;
+    components?: MdzComponents;
+    elements?: MdzElements;
+    children: Snippet;
+};
+declare const MdzRoot: import("svelte").Component<$$ComponentProps, {}, "">;
+type MdzRoot = ReturnType<typeof MdzRoot>;
+export default MdzRoot;
+//# sourceMappingURL=MdzRoot.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MdzRoot.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/MdzRoot.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAEpC,OAAO,EAKL,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,MAAM,qBAAqB,CAAC;AAE7B,KAAK,gBAAgB,GAAI;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AAsBH,QAAA,MAAM,OAAO,sDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}