@fuzdev/fuz_ui 0.169.0

package/dist/ImgOrSvg.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import type {SvelteHTMLElements} from 'svelte/elements';
+
+	const {
+		src,
+		label,
+		size,
+		width,
+		height,
+		svg_attrs,
+		img_attrs,
+		attrs,
+	}: {
+		src: string;
+		label?: string;
+		/**
+		 * Sets both the `width` and `height` of the svg. Overridden by the `width` and `height` props.
+		 */
+		size?: string;
+		/**
+		 * Sets the `width` of the svg. Overrides `size`.
+		 */
+		width?: string;
+		/**
+		 * Sets the `height` of the svg. Overrides `size`.
+		 */
+		height?: string;
+		svg_attrs?: SvelteHTMLElements['svg'];
+		img_attrs?: SvelteHTMLElements['img'];
+		/** Shared attributes for both img and svg. */
+		attrs?: Pick<SvelteHTMLElements['div'], 'class' | 'style'>; // TODO more shared attributes? can't use `div` directly for svg, users can always assert the type as a hacky workaround
+	} = $props();
+
+	const final_width = $derived(width ?? size);
+	const final_height = $derived(height ?? size);
+</script>
+
+{#if src.endsWith('.svg')}
+	<svg
+		role="img"
+		{...attrs}
+		{...svg_attrs}
+		aria-label={label}
+		style:width={final_width}
+		style:height={final_height}
+	>
+		<image href={src} class="width_100 height_100" />
+	</svg>
+{:else}
+	<img
+		{...attrs}
+		{...img_attrs}
+		{src}
+		alt={label}
+		style:width={final_width}
+		style:height={final_height}
+	/>
+{/if}

package/dist/ImgOrSvg.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { SvelteHTMLElements } from 'svelte/elements';
+type $$ComponentProps = {
+    src: string;
+    label?: string;
+    /**
+     * Sets both the `width` and `height` of the svg. Overridden by the `width` and `height` props.
+     */
+    size?: string;
+    /**
+     * Sets the `width` of the svg. Overrides `size`.
+     */
+    width?: string;
+    /**
+     * Sets the `height` of the svg. Overrides `size`.
+     */
+    height?: string;
+    svg_attrs?: SvelteHTMLElements['svg'];
+    img_attrs?: SvelteHTMLElements['img'];
+    /** Shared attributes for both img and svg. */
+    attrs?: Pick<SvelteHTMLElements['div'], 'class' | 'style'>;
+};
+declare const ImgOrSvg: import("svelte").Component<$$ComponentProps, {}, "">;
+type ImgOrSvg = ReturnType<typeof ImgOrSvg>;
+export default ImgOrSvg;
+//# sourceMappingURL=ImgOrSvg.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImgOrSvg.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ImgOrSvg.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAEvD,KAAK,gBAAgB,GAAI;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;IACtC,8CAA8C;IAC9C,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC;CAC3D,CAAC;AA6BH,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/LibraryDetail.svelte

@@ -0,0 +1,297 @@
+<script lang="ts">
+	import {page} from '$app/state';
+	import {format_url} from '@fuzdev/fuz_util/url.js';
+	import type {Snippet} from 'svelte';
+
+	import type {Library} from './library.svelte.js';
+	import ImgOrSvg from './ImgOrSvg.svelte';
+	import DeclarationLink from './DeclarationLink.svelte';
+	import ModuleLink from './ModuleLink.svelte';
+	import {url_github_file, repo_url_parse, url_well_known} from './library_helpers.js';
+	import {
+		module_is_typescript,
+		module_is_svelte,
+		module_is_css,
+		module_is_json,
+	} from './module_helpers.js';
+
+	const {
+		library,
+		repo_name,
+		description,
+		motto,
+		npm_url,
+		homepage_url,
+		children,
+	}: {
+		library: Library;
+		repo_name?: Snippet<[repo_name: string]>;
+		description?: Snippet<[description: string]>;
+		motto?: Snippet<[description: string]>;
+		npm_url?: Snippet<[npm_url: string]>;
+		homepage_url?: Snippet<[homepage_url: string]>;
+		children?: Snippet<[library: Library]>;
+	} = $props();
+
+	// TODO show other data (lines of code)
+
+	const {package_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,
+	);
+</script>
+
+<!-- eslint-disable svelte/no-navigation-without-resolve -->
+
+<div class="library_detail">
+	<!-- TODO maybe continue this snippet pattern, or maybe simplify? -->
+	<div class="info">
+		<div class="display_flex flex_1">
+			<!-- add yet another wrapper so it flows like we want -->
+			<div>
+				<header>
+					{#if repo_name}
+						{@render repo_name(library.repo_name)}
+					{:else}
+						<div class="repo_name">
+							{library.repo_name}{#if package_json.glyph}&nbsp;{package_json.glyph}{/if}
+						</div>
+					{/if}
+				</header>
+				{@render children?.(library)}
+				{#if package_json.description}
+					{#if description}
+						{@render description(package_json.description)}
+					{:else}
+						<div class="description">{package_json.description}</div>
+					{/if}
+				{/if}
+				{#if package_json.motto}
+					{#if motto}
+						{@render motto(package_json.motto)}
+					{:else}
+						<div class="motto">{package_json.motto}</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>
+					{/if}
+				{/if}
+				<!-- TODO accessible HTML -->
+				<section class="properties">
+					{#if library.homepage_url}
+						{#if homepage_url}
+							{@render homepage_url(library.homepage_url)}
+						{:else}
+							<span class="title">homepage</span>
+							<div class="content">
+								<a
+									class="chip"
+									class:selected={library.homepage_url === page.url.href}
+									href={library.homepage_url}
+								>
+									{#if library.logo_url}
+										<ImgOrSvg
+											src={library.logo_url}
+											label={library.logo_alt}
+											size="16px"
+											attrs={{class: 'mr_xs'}}
+										/>
+									{/if}
+									{format_url(library.homepage_url)}
+								</a>
+							</div>
+						{/if}
+					{/if}
+					{#if library.repo_url}
+						<span class="title">repo</span>
+						<div class="content">
+							<a class="chip" title="repo" href={library.repo_url}
+								>{library.owner_name}/{library.repo_name}</a
+							>
+						</div>
+					{/if}
+					{#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>
+						</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
+							>
+						</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>
+						</div>
+					{/if}
+					{#if library.homepage_url}
+						<span class="title">data</span>
+						<div class="content">
+							<a
+								class="chip"
+								title="data"
+								href={url_well_known(library.homepage_url, 'package.json')}>package.json</a
+							>
+							<a class="chip" title="data" href={url_well_known(library.homepage_url, 'src.json')}
+								>src.json</a
+							>
+						</div>
+					{/if}
+				</section>
+			</div>
+		</div>
+		{#if library.logo_url}
+			<div class="logo">
+				<ImgOrSvg
+					src={library.logo_url}
+					label={library.logo_alt}
+					size="var(--font_size, var(--icon_size_xl2))"
+				/>
+			</div>
+		{/if}
+	</div>
+	{#if library.modules.length > 0 && library.repo_url}
+		<section>
+			<menu class="unstyled">
+				{#each library.modules as module (module.path)}
+					<!-- TODO improve rendering and enrich data - start with the type (not just extension - mime?) -->
+					<li
+						class="module"
+						class:ts={module_is_typescript(module.path)}
+						class:svelte={module_is_svelte(module.path)}
+						class:css={module_is_css(module.path)}
+						class:json={module_is_json(module.path)}
+					>
+						<div class="module_content">
+							<span class="font_size_xl">
+								<ModuleLink module_path={module.path}>
+									{module.path}
+								</ModuleLink>
+							</span>
+							{#if module.declarations.length > 0}
+								<ul class="declarations unstyled">
+									{#each module.declarations as declaration (declaration.name)}
+										<li>
+											<DeclarationLink name={declaration.name} />
+										</li>
+									{/each}
+								</ul>
+							{/if}
+						</div>
+					</li>
+				{/each}
+			</menu>
+		</section>
+	{/if}
+
+	<!-- TODO maybe add more details, possibly behind a `<details>`, including author -->
+	<!-- TODO render exports, then link to source, then tomes -->
+</div>
+
+<!-- TODO better rendering, also show author, etc -->
+
+<style>
+	.library_detail {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		width: 100%;
+		max-width: var(--max_width, var(--distance_md));
+	}
+
+	.info {
+		width: 100%;
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.logo {
+		flex-shrink: 0;
+		padding: 0 var(--space_xl);
+	}
+
+	header {
+		margin-bottom: var(--space_lg);
+	}
+
+	section {
+		width: 100%;
+		margin-bottom: var(--space_lg);
+	}
+	.repo_name {
+		font-family: var(--font_family_serif);
+		font-size: var(--font_size_xl2);
+		font-weight: 400;
+	}
+	.npm_url {
+		font-family: var(--font_family_mono);
+		text-align: center;
+		margin-bottom: var(--space_lg);
+	}
+	.description {
+		margin-bottom: var(--space_lg);
+	}
+	.motto {
+		margin-bottom: var(--space_lg);
+	}
+	.properties {
+		display: grid;
+		grid-template-columns: 80px 1fr;
+		gap: var(--space_xs2);
+		margin-bottom: var(--space_lg);
+	}
+	.title {
+		text-align: right;
+	}
+	.content {
+		display: flex;
+	}
+	.content a {
+		display: flex;
+		align-items: center;
+		margin-left: var(--space_xs);
+	}
+	.module {
+		margin-bottom: var(--space_xs);
+		--link_color: var(--text_color_3);
+	}
+	.module_content {
+		background-color: var(--bg_3);
+		border-radius: var(--border_radius_sm);
+		padding: var(--space_xs);
+	}
+	/* TODO probably add variables/classes for these */
+	.ts {
+		--link_color: var(--color_a_5);
+	}
+	.svelte {
+		--link_color: var(--color_h_5);
+	}
+	.css {
+		--link_color: var(--color_b_5);
+	}
+	.json {
+		--link_color: var(--color_f_5);
+	}
+	/* TODO extract */
+	.declarations {
+		display: flex;
+		flex: 1;
+		flex-direction: row;
+		flex-wrap: wrap;
+		align-items: flex-start;
+		gap: var(--space_xs) 0;
+		padding-top: var(--space_xs);
+	}
+</style>

package/dist/LibraryDetail.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { Library } from './library.svelte.js';
+type $$ComponentProps = {
+    library: Library;
+    repo_name?: Snippet<[repo_name: string]>;
+    description?: Snippet<[description: string]>;
+    motto?: Snippet<[description: string]>;
+    npm_url?: Snippet<[npm_url: string]>;
+    homepage_url?: Snippet<[homepage_url: string]>;
+    children?: Snippet<[library: Library]>;
+};
+declare const LibraryDetail: import("svelte").Component<$$ComponentProps, {}, "">;
+type LibraryDetail = ReturnType<typeof LibraryDetail>;
+export default LibraryDetail;
+//# sourceMappingURL=LibraryDetail.svelte.d.ts.map

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

@@ -0,0 +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;AAYhD,KAAK,gBAAgB,GAAI;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,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,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IACvC,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;AAuKH,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/LibrarySummary.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+	import {page} from '$app/state';
+	import type {Snippet} from 'svelte';
+	import {format_url} from '@fuzdev/fuz_util/url.js';
+
+	import type {Library} from './library.svelte.js';
+	import ImgOrSvg from './ImgOrSvg.svelte';
+
+	const {
+		library,
+		repo_name,
+		logo,
+		motto,
+		description,
+		npm_url,
+		homepage_url,
+		children,
+	}: {
+		library: Library;
+		repo_name?: Snippet<[repo_name: string]>;
+		logo?: Snippet<[logo_url: string, logo_alt: string]>;
+		motto?: Snippet<[motto: string, glyph?: string]>;
+		description?: Snippet<[description: string, glyph?: string]>;
+		npm_url?: Snippet<[npm_url: string]>;
+		homepage_url?: Snippet<[homepage_url: string]>;
+		children?: Snippet;
+	} = $props();
+
+	const {package_json} = $derived(library);
+</script>
+
+<div class="library_summary">
+	<!-- TODO maybe continue this snippet pattern, or maybe simplify? -->
+	<header class="box">
+		{#if repo_name}
+			{@render repo_name(library.repo_name)}
+		{:else}
+			<div class="repo_name">{library.repo_name}</div>
+		{/if}
+		<!-- TODO maybe add `icon_alt` to package.json -->
+		<!-- TODO what about svg logos? maybe a package.json logo url that defaults to favicon? -->
+		{#if library.logo_url}
+			{#if logo}
+				{@render logo(library.logo_url, library.logo_alt)}
+			{:else}
+				<ImgOrSvg
+					src={library.logo_url}
+					label={library.logo_alt}
+					size="var(--font_size, var(--icon_size_xl2))"
+				/>
+			{/if}
+		{/if}
+	</header>
+	{#if package_json.motto}
+		{#if motto}
+			{@render motto(package_json.motto, package_json.glyph)}
+		{:else}
+			<blockquote class="px_xl">
+				{package_json.motto}
+				{package_json.glyph}
+			</blockquote>
+		{/if}
+	{/if}
+	{#if package_json.description}
+		{#if description}
+			{@render description(package_json.description, package_json.glyph)}
+		{:else}
+			<p class="text_align_center">
+				{package_json.description}
+				{#if !package_json.motto}
+					{package_json.glyph}
+				{/if}
+			</p>
+		{/if}
+	{/if}
+	{@render children?.()}
+	{#if library.homepage_url}
+		{#if homepage_url}
+			{@render homepage_url(library.homepage_url)}
+		{:else}
+			<div class="homepage_url">
+				<!-- eslint-disable svelte/no-navigation-without-resolve -->
+				<a
+					class="chip"
+					class:selected={library.homepage_url === page.url.href}
+					href={library.homepage_url}>{format_url(library.homepage_url)}</a
+				>
+				<!-- eslint-enable svelte/no-navigation-without-resolve -->
+			</div>
+		{/if}
+	{/if}
+	<div class="links">
+		{#if library.repo_url}
+			<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+			<a class="chip" href={library.repo_url}>repo</a>
+		{/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>
+		{/if}
+		{#if library.npm_url}
+			<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+			<a class="chip" href={library.npm_url}>npm</a>
+		{/if}
+	</div>
+	{#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>
+		{/if}
+	{/if}
+	<!-- TODO more details behind a `<details>`, including author -->
+</div>
+
+<!-- TODO better rendering, also show author, etc -->
+
+<style>
+	.library_summary {
+		padding: var(--space_lg);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		max-width: var(--max_width, var(--distance_sm));
+	}
+	header {
+		margin-bottom: var(--space_lg);
+	}
+	.links {
+		display: flex;
+		margin-bottom: var(--space_lg);
+	}
+	.homepage_url {
+		margin-bottom: var(--space_lg);
+	}
+	.repo_name {
+		font-family: var(--font_family_serif);
+		font-size: var(--font_size_xl2);
+		font-weight: 400;
+		text-align: center;
+		margin-bottom: var(--space_lg);
+	}
+	.npm_url {
+		font-family: var(--font_family_mono);
+		text-align: center;
+	}
+	.chip {
+		margin-left: var(--space_xs2);
+		margin-right: var(--space_xs2);
+	}
+</style>

package/dist/LibrarySummary.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { Library } from './library.svelte.js';
+type $$ComponentProps = {
+    library: Library;
+    repo_name?: Snippet<[repo_name: string]>;
+    logo?: Snippet<[logo_url: string, logo_alt: string]>;
+    motto?: Snippet<[motto: string, glyph?: string]>;
+    description?: Snippet<[description: string, glyph?: string]>;
+    npm_url?: Snippet<[npm_url: string]>;
+    homepage_url?: Snippet<[homepage_url: string]>;
+    children?: Snippet;
+};
+declare const LibrarySummary: import("svelte").Component<$$ComponentProps, {}, "">;
+type LibrarySummary = ReturnType<typeof LibrarySummary>;
+export default LibrarySummary;
+//# sourceMappingURL=LibrarySummary.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LibrarySummary.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/LibrarySummary.svelte"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAGpC,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,qBAAqB,CAAC;AAGhD,KAAK,gBAAgB,GAAI;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;IACrD,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;IAC7D,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;CACnB,CAAC;AAyGH,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/MdnLink.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import {strip_end, strip_start} from '@fuzdev/fuz_util/string.js';
+	import type {SvelteHTMLElements} from 'svelte/elements';
+
+	import Svg from './Svg.svelte';
+	import {mdn_logo} from './logos.js';
+
+	const {
+		path,
+		children,
+		class: class_prop,
+		...rest
+	}: SvelteHTMLElements['a'] & {
+		path: string;
+	} = $props();
+
+	const href = $derived(
+		path.startsWith('https://')
+			? path
+			: `https://developer.mozilla.org/en-US/docs/${strip_start(path, '/')}`,
+	);
+
+	const final_children = $derived(children ?? strip_end(path, '/').split('/').at(-1)!);
+</script>
+
+<!-- TODO -next-line doesnt work? -->
+<!-- eslint-disable svelte/no-navigation-without-resolve -->
+<a {...rest} {href} class="mdn_link chip white_space_nowrap {class_prop}" rel="noopener"
+	><Svg
+		data={mdn_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}
+		{@render final_children()}
+	{/if}</a
+>

package/dist/MdnLink.svelte.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MdnLink.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/MdnLink.svelte"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAKvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,GAAG,CAAC,GAAG;IAClD,IAAI,EAAE,MAAM,CAAC;CACb,CAAC;AAmCH,QAAA,MAAM,OAAO,sDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/Mdz.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type {SvelteHTMLElements} from 'svelte/elements';
+
+	import {mdz_parse} from './mdz.js';
+	import MdzNodeView from './MdzNodeView.svelte';
+
+	const {
+		content,
+		inline = false,
+		nowrap = false,
+		...rest
+	}: (SvelteHTMLElements['div'] | SvelteHTMLElements['span']) & {
+		content: string;
+		inline?: boolean;
+		nowrap?: boolean;
+	} = $props();
+
+	const nodes = $derived(mdz_parse(content));
+</script>
+
+<svelte:element
+	this={inline ? 'span' : 'div'}
+	{...rest}
+	class:white_space_pre={nowrap}
+	class:white_space_pre_wrap={!nowrap}
+>
+	{#each nodes as node (node)}
+		<MdzNodeView {node} />
+	{/each}
+</svelte:element>

package/dist/Mdz.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { SvelteHTMLElements } from 'svelte/elements';
+type $$ComponentProps = (SvelteHTMLElements['div'] | SvelteHTMLElements['span']) & {
+    content: string;
+    inline?: boolean;
+    nowrap?: boolean;
+};
+declare const Mdz: import("svelte").Component<$$ComponentProps, {}, "">;
+type Mdz = ReturnType<typeof Mdz>;
+export default Mdz;
+//# sourceMappingURL=Mdz.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Mdz.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Mdz.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAKvD,KAAK,gBAAgB,GAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,GAAG;IACnF,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAyBH,QAAA,MAAM,GAAG,sDAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}