@fuzdev/fuz_ui 0.202.0 → 0.203.1

package/dist/ApiIndex.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import {library_context, type Library} from './library.svelte.js';
+	import {set_library_context_with_fallback, type Library} from './library.svelte.js';
 	import {tome_get_by_slug, type Tome} from './tome.js';
 	import TomeContent from './TomeContent.svelte';
 	import TomeLink from './TomeLink.svelte';
@@ -9,13 +9,13 @@
 	import {create_api_search} from './api_search.svelte.js';
 
 	const {
-		library = library_context.get(),
+		library: library_prop,
 		tome = tome_get_by_slug('api'),
 		minimal = false,
 	}: {
 		/**
 		 * The library instance to render API docs for.
-		 * Defaults to getting from library_context.
+		 * Defaults to getting from `library_context`.
 		 */
 		library?: Library;
 		/**
@@ -30,6 +30,9 @@
 		minimal?: boolean;
 	} = $props();
 
+	const get_library = set_library_context_with_fallback(() => library_prop, 'ApiIndex');
+	const library = $derived(get_library());
+
 	const search = $derived(create_api_search(library));
 </script>
 

package/dist/ApiIndex.svelte.d.ts

@@ -3,7 +3,7 @@ import { type Tome } from './tome.js';
 type $$ComponentProps = {
     /**
      * The library instance to render API docs for.
-     * Defaults to getting from library_context.
+     * Defaults to getting from `library_context`.
      */
     library?: Library;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"ApiIndex.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ApiIndex.svelte"],"names":[],"mappings":"AAGA,OAAO,EAAkB,KAAK,OAAO,EAAC,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAmB,KAAK,IAAI,EAAC,MAAM,WAAW,CAAC;AAQrD,KAAK,gBAAgB,GAAI;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAgDH,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ApiIndex.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ApiIndex.svelte"],"names":[],"mappings":"AAGA,OAAO,EAAoC,KAAK,OAAO,EAAC,MAAM,qBAAqB,CAAC;AACpF,OAAO,EAAmB,KAAK,IAAI,EAAC,MAAM,WAAW,CAAC;AAQrD,KAAK,gBAAgB,GAAI;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAmDH,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/ApiModule.svelte

@@ -1,18 +1,19 @@
 <script lang="ts">
-	import {library_context, type Library} from './library.svelte.js';
+	import {set_library_context_with_fallback, type Library} from './library.svelte.js';
 	import {tome_get_by_slug, type Tome} from './tome.js';
 	import TomeContent from './TomeContent.svelte';
 	import TomeSection from './TomeSection.svelte';
 	import TomeSectionHeader from './TomeSectionHeader.svelte';
 	import DocsSearch from './DocsSearch.svelte';
 	import ModuleLink from './ModuleLink.svelte';
+	import DeclarationLink from './DeclarationLink.svelte';
 	import Mdz from './Mdz.svelte';
 	import ApiDeclarationList from './ApiDeclarationList.svelte';
 	import {create_module_declaration_search} from './api_search.svelte.js';
 
 	const {
 		module_path: module_path_param,
-		library = library_context.get(),
+		library: library_prop,
 		tome = tome_get_by_slug('api'),
 	}: {
 		/**
@@ -21,7 +22,7 @@
 		module_path: string | Array<string>;
 		/**
 		 * The library instance to render API docs for.
-		 * Defaults to getting from library_context.
+		 * Defaults to getting from `library_context`.
 		 */
 		library?: Library;
 		/**
@@ -31,6 +32,9 @@
 		tome?: Tome;
 	} = $props();
 
+	const get_library = set_library_context_with_fallback(() => library_prop, 'ApiModule');
+	const library = $derived(get_library());
+
 	// normalize module_path to string (could be array from [...module_path] route param)
 	const module_path = $derived(
 		Array.isArray(module_path_param) ? module_path_param.join('/') : module_path_param,
@@ -89,30 +93,77 @@
 				<Mdz content={module.module_comment} />
 			</section>
 		{/if}
+		{#if source_url}
+			<section>
+				<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+				<a href={source_url} class="chip" target="_blank" rel="noopener">view source</a>
+			</section>
+		{/if}
 		<!-- Declarations section -->
-		<TomeSection>
-			<TomeSectionHeader text="Declarations" />
+		{#if module.has_declarations}
+			<TomeSection>
+				<TomeSectionHeader text="Declarations" />
 
-			<section>
 				{#if search.all.length > 1}
-					<DocsSearch
-						placeholder="search declarations in this module..."
-						declaration_count={search.all.length}
-						filtered_declaration_count={search.query.trim() ? search.filtered.length : undefined}
-						bind:search_query={search.query}
-					/>
+					<section>
+						<DocsSearch
+							placeholder="search declarations in this module..."
+							declaration_count={search.all.length}
+							filtered_declaration_count={search.query.trim() ? search.filtered.length : undefined}
+							bind:search_query={search.query}
+						/>
+					</section>
 				{/if}
 
-				{#if source_url}
-					<p>
-						<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
-						<a href={source_url} class="chip" target="_blank" rel="noopener">view source</a>
-					</p>
-				{/if}
-			</section>
+				<ApiDeclarationList declarations={search.filtered} search_query={search.query} />
+			</TomeSection>
+		{/if}
 
-			<ApiDeclarationList declarations={search.filtered} search_query={search.query} />
-		</TomeSection>
+		<!-- Re-exports section -->
+		{#if module.has_any_re_exports}
+			<TomeSection>
+				<TomeSectionHeader text="Re-exports" />
+				<ul class="unstyled">
+					{#each module.star_exports as star_path (star_path)}
+						<li class="mb_lg">
+							<p class="mb_sm">everything from <ModuleLink module_path={star_path} /></p>
+						</li>
+					{/each}
+					{#each module.external_star_exports as specifier (specifier)}
+						<li class="mb_lg">
+							<p class="mb_sm">everything from <code>{specifier}</code></p>
+						</li>
+					{/each}
+					{#each module.re_exports_by_module as [from_path, entries] (from_path)}
+						<li class="mb_lg">
+							<p class="mb_sm">from <ModuleLink module_path={from_path} /></p>
+							<div class="row gap_md flex-wrap:wrap">
+								{#each entries as entry (entry.name)}
+									<DeclarationLink name={entry.name} module_path={from_path}>
+										{#if entry.typeOnly}<small>type</small>
+										{/if}{entry.name}
+									</DeclarationLink>
+								{/each}
+							</div>
+						</li>
+					{/each}
+					{#each module.external_re_exports_by_specifier as [specifier, entries] (specifier)}
+						<li class="mb_lg">
+							<p class="mb_sm">from <code>{specifier}</code></p>
+							<div class="row gap_md flex-wrap:wrap">
+								{#each entries as entry (entry.name)}
+									<span class="chip">
+										{#if entry.typeOnly}<small>type</small>
+										{/if}{#if entry.originalName}<small>{entry.originalName} as</small>
+										{/if}{entry.name}
+									</span>
+								{/each}
+							</div>
+						</li>
+					{/each}
+				</ul>
+			</TomeSection>
+		{/if}
 
 		<!-- Depends on section -->
 		{#if module.has_dependencies}

package/dist/ApiModule.svelte.d.ts

@@ -7,7 +7,7 @@ type $$ComponentProps = {
     module_path: string | Array<string>;
     /**
      * The library instance to render API docs for.
-     * Defaults to getting from library_context.
+     * Defaults to getting from `library_context`.
      */
     library?: Library;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"ApiModule.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ApiModule.svelte"],"names":[],"mappings":"AAGA,OAAO,EAAkB,KAAK,OAAO,EAAC,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAmB,KAAK,IAAI,EAAC,MAAM,WAAW,CAAC;AAUrD,KAAK,gBAAgB,GAAI;IACxB;;OAEG;IACH,WAAW,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;CACZ,CAAC;AAiIH,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"ApiModule.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ApiModule.svelte"],"names":[],"mappings":"AAGA,OAAO,EAAoC,KAAK,OAAO,EAAC,MAAM,qBAAqB,CAAC;AACpF,OAAO,EAAmB,KAAK,IAAI,EAAC,MAAM,WAAW,CAAC;AAWrD,KAAK,gBAAgB,GAAI;IACxB;;OAEG;IACH,WAAW,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;CACZ,CAAC;AAoLH,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/ContextmenuEntry.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
-	import type {Snippet} from 'svelte';
+	import {onDestroy, type Snippet} from 'svelte';
 	import {swallow} from '@fuzdev/fuz_util/dom.js';
 
 	import PendingAnimation from './PendingAnimation.svelte';
 	import {contextmenu_context, type ContextmenuRun} from './contextmenu_state.svelte.js';
+	import type {SvgData} from './svg.js';
+	import ContextmenuIcon from './ContextmenuIcon.svelte';
 
 	const {
 		run,
@@ -12,7 +14,7 @@
 		disabled: disabled_prop = false,
 	}: {
 		run: ContextmenuRun;
-		icon?: string | Snippet;
+		icon?: SvgData | string | Snippet;
 		children: Snippet;
 		disabled?: boolean;
 	} = $props();
@@ -28,6 +30,11 @@
 
 	const {selected, pending, error_message} = $derived(entry);
 	const disabled = $derived(entry.disabled());
+
+	let activate_timeout: NodeJS.Timeout | null = null;
+	onDestroy(() => {
+		if (activate_timeout !== null) clearTimeout(activate_timeout);
+	});
 </script>
 
 <!-- disabling the a11y warning because a parent element handles keyboard events -->
@@ -37,7 +44,6 @@
 	class:selected
 	class:disabled
 	role="menuitem"
-	aria-label="contextmenu entry"
 	aria-disabled={disabled}
 	tabindex="-1"
 	title={error_message ? `Error: ${error_message}` : undefined}
@@ -46,7 +52,11 @@
 		: () => {
 				// This timeout lets event handlers react to the current DOM
 				// before the item's changes are applied.
-				setTimeout(() => contextmenu.activate(entry));
+				if (activate_timeout !== null) clearTimeout(activate_timeout);
+				activate_timeout = setTimeout(() => {
+					activate_timeout = null;
+					void contextmenu.activate(entry);
+				});
 			}}
 	onmouseenter={disabled
 		? undefined
@@ -57,20 +67,9 @@
 >
 	<div class="content">
 		<div class="icon">
-			{#if typeof icon === 'string'}
-				{icon}
-			{:else if icon}
-				{@render icon()}
-			{/if}
+			<ContextmenuIcon {icon} />
 		</div>
 		<div class="title">{@render children()}</div>
 		{#if pending}<PendingAnimation />{:else if error_message}⚠️{/if}
 	</div>
 </li>
-
-<style>
-	/* TODO hacky, needed because the base `.menuitem` added z-index */
-	.menuitem {
-		z-index: unset;
-	}
-</style>

package/dist/ContextmenuEntry.svelte.d.ts

@@ -1,8 +1,9 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 import { type ContextmenuRun } from './contextmenu_state.svelte.js';
+import type { SvgData } from './svg.js';
 type $$ComponentProps = {
     run: ContextmenuRun;
-    icon?: string | Snippet;
+    icon?: SvgData | string | Snippet;
     children: Snippet;
     disabled?: boolean;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ContextmenuEntry.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ContextmenuEntry.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAIpC,OAAO,EAAsB,KAAK,cAAc,EAAC,MAAM,+BAA+B,CAAC;AAEtF,KAAK,gBAAgB,GAAI;IACxB,GAAG,EAAE,cAAc,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA2DH,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"ContextmenuEntry.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ContextmenuEntry.svelte"],"names":[],"mappings":"AAGA,OAAO,EAAY,KAAK,OAAO,EAAC,MAAM,QAAQ,CAAC;AAI/C,OAAO,EAAsB,KAAK,cAAc,EAAC,MAAM,+BAA+B,CAAC;AACvF,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,UAAU,CAAC;AAGrC,KAAK,gBAAgB,GAAI;IACxB,GAAG,EAAE,cAAc,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAClC,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAgEH,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/ContextmenuIcon.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte';
+
+	import type {SvgData} from './svg.js';
+	import Svg from './Svg.svelte';
+
+	/**
+	 * Renders a contextmenu entry's `icon` value, shared by `ContextmenuEntry`,
+	 * `ContextmenuSubmenu`, and `ContextmenuLinkEntry`. Renders nothing when
+	 * `icon` is `undefined`.
+	 *
+	 * @module
+	 */
+
+	const {
+		icon,
+	}: {
+		icon?: SvgData | string | Snippet;
+	} = $props();
+</script>
+
+{#if typeof icon === 'string'}
+	{icon}
+{:else if typeof icon === 'object'}
+	<!-- `SvgData` is a plain object; detect it positively by shape rather than
+	     introspecting the snippet (whose runtime form is opaque/unsupported). -->
+	<Svg data={icon} />
+{:else if icon}
+	{@render icon()}
+{/if}

package/dist/ContextmenuIcon.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { SvgData } from './svg.js';
+type $$ComponentProps = {
+    icon?: SvgData | string | Snippet;
+};
+declare const ContextmenuIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type ContextmenuIcon = ReturnType<typeof ContextmenuIcon>;
+export default ContextmenuIcon;
+//# sourceMappingURL=ContextmenuIcon.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContextmenuIcon.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ContextmenuIcon.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAEpC,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,UAAU,CAAC;AAGrC,KAAK,gBAAgB,GAAI;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;CAClC,CAAC;AA+BH,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/ContextmenuLinkEntry.svelte

@@ -5,6 +5,10 @@
 	import {page} from '$app/state';
 
 	import {contextmenu_context} from './contextmenu_state.svelte.js';
+	import {icon_external_link, icon_link} from './icons.js';
+	import type {SvgData} from './svg.js';
+	import Svg from './Svg.svelte';
+	import ContextmenuIcon from './ContextmenuIcon.svelte';
 
 	const {
 		href,
@@ -14,7 +18,7 @@
 		external_rel = 'noreferrer', // TODO smarter defaults
 	}: {
 		href: string;
-		icon?: string | Snippet; // TODO @many rethink this API, add svg icon fallback
+		icon?: SvgData | string | Snippet;
 		children?: Snippet; // TODO @many rethink this API
 		disabled?: boolean;
 		external_rel?: string;
@@ -35,22 +39,27 @@
 		() => disabled_prop,
 	);
 
+	// keyboard selection, like `ContextmenuEntry` - distinct from `current_page` below
+	const {selected} = $derived(entry);
 	const disabled = $derived(entry.disabled());
 
-	// TODO move or upstream? rename? `print_url`?
-	const format_url = (url: string, host: string = location.host): string => {
+	// TODO move or upstream?
+	const print_url = (url: string, host: string = location.host): string => {
 		const formatted = strip_start(strip_start(url, 'https://'), 'http://');
 		return formatted.startsWith(host + '/') ? strip_start(formatted, host) : formatted;
 	};
 
-	const text = $derived(format_url(href));
+	const text = $derived(print_url(href));
 	const external = $derived(!(text[0] === '.' || (text[0] === '/' && text[1] !== '/')));
 	const rel = $derived(external ? external_rel : undefined);
 
-	const selected = $derived(page.url.pathname === href);
+	const current_page = $derived(page.url.pathname === href);
 </script>
 
 <li role="none">
+	<!-- `deselectable` is a hack to recover `cursor: pointer` when selected: these links always
+	     navigate, but `.menuitem.selected` forces `cursor: default`. The real fix is a `.menuitem`
+	     semantics cleanup (selected-as-active vs selected-as-highlight) - TODO @many -->
 	<!-- TODO -next-line doesnt work? -->
 	<!-- eslint-disable svelte/no-navigation-without-resolve -->
 	<a
@@ -58,8 +67,10 @@
 		class="menuitem plain"
 		class:selected
 		class:disabled
+		class:deselectable={!disabled}
 		role="menuitem"
 		aria-disabled={disabled}
+		aria-current={current_page ? 'page' : undefined}
 		tabindex="-1"
 		{href}
 		{rel}
@@ -81,10 +92,10 @@
 	>
 		<div class="content">
 			<div class="icon">
-				{#if typeof icon === 'string'}
-					{icon}
-				{:else if icon}
-					{@render icon()}
+				{#if icon}
+					<ContextmenuIcon {icon} />
+				{:else}
+					<Svg data={external ? icon_external_link : icon_link} />
 				{/if}
 			</div>
 			<div class="title">
@@ -107,8 +118,8 @@
 	a:hover .text {
 		text-decoration: underline;
 	}
-	/* TODO hacky, needed because the base `.menuitem` added z-index */
-	.menuitem {
-		z-index: unset;
+	/* Mark the current page distinctly from the keyboard selection highlight. */
+	a[aria-current='page'] .text {
+		font-weight: 700;
 	}
 </style>

package/dist/ContextmenuLinkEntry.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
+import type { SvgData } from './svg.js';
 type $$ComponentProps = {
     href: string;
-    icon?: string | Snippet;
+    icon?: SvgData | string | Snippet;
     children?: Snippet;
     disabled?: boolean;
     external_rel?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"ContextmenuLinkEntry.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ContextmenuLinkEntry.svelte"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAKnC,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAkFH,QAAA,MAAM,oBAAoB,sDAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"ContextmenuLinkEntry.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ContextmenuLinkEntry.svelte"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAKpC,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,UAAU,CAAC;AAIrC,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAyFH,QAAA,MAAM,oBAAoB,sDAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/ContextmenuMenu.svelte

@@ -0,0 +1,207 @@
+<script module lang="ts">
+	// The default entry snippets are shared by `ContextmenuRoot.svelte`
+	// and `ContextmenuRootForSafariCompatibility.svelte`.
+	export {link_entry_default, text_entry_default, separator_entry_default};
+</script>
+
+<script lang="ts">
+	/**
+	 * The menu surface shared by `ContextmenuRoot.svelte` and
+	 * `ContextmenuRootForSafariCompatibility.svelte`. Owns everything that happens
+	 * while the menu is open - positioning, keyboard navigation, dismissal on
+	 * outside presses, popover top-layer promotion, and entry rendering - while
+	 * the roots own gesture detection, i.e. how the menu opens. Holds no gesture
+	 * state of its own; the `open_guard` it consults is owned and armed by the root.
+	 */
+	import {swallow} from '@fuzdev/fuz_util/dom.js';
+	import type {ComponentProps, Snippet} from 'svelte';
+
+	import {
+		contextmenu_dimensions_context,
+		type ContextmenuState,
+	} from './contextmenu_state.svelte.js';
+	import ContextmenuLinkEntry from './ContextmenuLinkEntry.svelte';
+	import ContextmenuTextEntry from './ContextmenuTextEntry.svelte';
+	import ContextmenuSeparator from './ContextmenuSeparator.svelte';
+	import {
+		contextmenu_create_keyboard_handlers,
+		contextmenu_create_keydown_handler,
+		contextmenu_create_mousedown_handler,
+		contextmenu_calculate_constrained_x,
+		contextmenu_calculate_constrained_y,
+		contextmenu_popover_attachment,
+		type ContextmenuOpenGuard,
+	} from './contextmenu_helpers.js';
+
+	let {
+		contextmenu,
+		open_guard,
+		link_entry,
+		text_entry,
+		separator_entry,
+		el = $bindable(),
+	}: {
+		/**
+		 * The contextmenu state owned by the root.
+		 */
+		contextmenu: ContextmenuState;
+		/**
+		 * Guards the menu from the residual events of the gesture that opened it.
+		 * Owned by the root, which arms it when its gesture detection opens the menu.
+		 */
+		open_guard: ContextmenuOpenGuard;
+		/**
+		 * Snippet for rendering link entries, or `null` to disable them.
+		 */
+		link_entry: Snippet<[ComponentProps<typeof ContextmenuLinkEntry>]> | null;
+		/**
+		 * Snippet for rendering copy text entries, or `null` to disable them.
+		 */
+		text_entry: Snippet<[ComponentProps<typeof ContextmenuTextEntry>]> | null;
+		/**
+		 * Snippet for rendering separator entries, or `null` to disable them.
+		 */
+		separator_entry: Snippet<[ComponentProps<typeof ContextmenuSeparator>]> | null;
+		/**
+		 * The menu element while opened - bound by the roots for their gesture handlers.
+		 */
+		el?: HTMLElement;
+	} = $props();
+
+	const {layout} = $derived(contextmenu);
+
+	const dimensions = contextmenu_dimensions_context.set();
+
+	const x = $derived(
+		contextmenu_calculate_constrained_x(contextmenu.x, dimensions.width, layout.width),
+	);
+	const y = $derived(
+		contextmenu_calculate_constrained_y(contextmenu.y, dimensions.height, layout.height),
+	);
+
+	// Closes the contextmenu on presses outside of it.
+	const mousedown = $derived(
+		contextmenu_create_mousedown_handler(contextmenu, () => el, open_guard),
+	);
+
+	const keyboard_handlers = $derived(contextmenu_create_keyboard_handlers(contextmenu));
+	const keydown = $derived(contextmenu_create_keydown_handler(keyboard_handlers));
+</script>
+
+<svelte:window
+	onmousedown={!contextmenu.opened ? undefined : mousedown}
+	onkeydown={!contextmenu.opened ? undefined : keydown}
+	onmouseupcapture={(e) => open_guard.track_mouseup(e)}
+/>
+
+{#if !contextmenu.has_custom_layout}
+	<div
+		class="contextmenu-layout"
+		bind:clientWidth={layout.width}
+		bind:clientHeight={layout.height}
+		aria-hidden="true"
+	></div>
+{/if}
+
+<!-- TODO animate the contextmenu as it appears somehow, maybe a subtle highlight -->
+<!-- TODO implement focus management per APG: store `document.activeElement` when opening, focus menu on mount, restore focus on close if element `isConnected` -->
+{#if contextmenu.opened}
+	<!-- Keyed on `params` (a fresh array every open) so reopening while open - which swaps
+	`params` without toggling `opened` - remounts the menu: entries register fresh state and
+	the popover attachment re-resolves its host (e.g. a modal dialog opened since the first
+	open). -->
+	{#key contextmenu.params}
+		<ul
+			class="contextmenu unstyled pane"
+			role="menu"
+			aria-label="context menu"
+			tabindex="-1"
+			popover="manual"
+			{@attach contextmenu_popover_attachment(contextmenu)}
+			bind:this={el}
+			bind:offsetWidth={dimensions.width}
+			bind:offsetHeight={dimensions.height}
+			style:transform="translate3d({x}px, {y}px, 0)"
+			onclickcapture={(e) => {
+				// blocks a click synthesized from the touch gesture that opened the menu,
+				// which would activate the first item (iOS can synthesize it even when
+				// the release was swallowed)
+				if (open_guard.consume_blocked_click()) swallow(e);
+			}}
+		>
+			<!-- TODO maybe this should be generic? -->
+			<!-- Index-keyed deliberately: `params` is immutable for the life of the key block
+			above, and identity keys would collide when the same snippet registers on nested
+			elements. -->
+			{#each contextmenu.params as p, i (i)}
+				{#if typeof p === 'function'}
+					{@render p()}
+				{:else if p.snippet === 'link'}
+					{@render link_entry?.(p.props)}
+				{:else if p.snippet === 'text'}
+					{@render text_entry?.(p.props)}
+				{:else if p.snippet === 'separator'}
+					{@render separator_entry?.(p.props)}
+				{/if}
+			{/each}
+		</ul>
+	{/key}
+{/if}
+
+{#snippet link_entry_default(props: ComponentProps<typeof ContextmenuLinkEntry>)}
+	<ContextmenuLinkEntry {...props} />
+{/snippet}
+
+{#snippet text_entry_default(props: ComponentProps<typeof ContextmenuTextEntry>)}
+	<ContextmenuTextEntry {...props} />
+{/snippet}
+
+{#snippet separator_entry_default(props: ComponentProps<typeof ContextmenuSeparator>)}
+	<ContextmenuSeparator {...props} />
+{/snippet}
+
+<style>
+	.contextmenu {
+		--icon_size: var(--icon_size_xs);
+		/* TODO maybe make this responsive or a max of the page width
+		minus some space to tap items covered by the menu on the side,
+		or consider a totally different design for small screens (more dialog-like)  */
+		--contextmenu_width: 320px;
+		position: fixed;
+		left: 0;
+		top: 0;
+		/* the z-index is the fallback for browsers without the Popover API,
+		where the menu can't layer over modal dialogs */
+		z-index: var(--contextmenu_z_index, 200);
+		max-width: var(--contextmenu_width);
+		width: 100%;
+		/* reset the UA `[popover]` styles; positioning stays transform-based */
+		right: auto;
+		bottom: auto;
+		margin: 0;
+		padding: 0;
+		color: inherit;
+		/* the UA popover style sets `overflow: auto`, which would clip submenu flyouts */
+		overflow: visible;
+		/* Re-enable callouts on the menu itself to allow the native contextmenu (for dev
+		   tools) and prevent the menu from being selected. Only meaningful under
+		   `ContextmenuRootForSafariCompatibility`'s `body.contextmenu-pending` blocking -
+		   inert under `ContextmenuRoot`, which never renders on iOS Safari. */
+		-webkit-touch-callout: initial !important;
+	}
+	/* TODO hacky */
+	.contextmenu,
+	.contextmenu :global(menu.pane) {
+		border: var(--contextmenu_border_width, var(--border_width))
+			var(--contextmenu_border_style, var(--border_style))
+			var(--contextmenu_border_color, var(--border_color));
+		border-radius: var(--contextmenu_border_radius, var(--border_radius_xs));
+	}
+
+	/* TODO better way to do this? */
+	.contextmenu-layout {
+		z-index: -200;
+		position: fixed;
+		inset: 0;
+	}
+</style>