@dryui/ui 0.2.2 → 0.4.0

package/dist/select/select-trigger.svelte

@@ -1,206 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { getSelectCtx } from './context.svelte.js';
-
-	const TRIGGER_SELECTOR = [
-		'button',
-		'[href]',
-		'input:not([type="hidden"])',
-		'select',
-		'textarea',
-		'[tabindex]:not([tabindex="-1"])',
-		'[contenteditable="true"]',
-		'summary'
-	].join(', ');
-
-	interface Props extends HTMLAttributes<HTMLButtonElement> {
-		size?: 'sm' | 'md' | 'lg';
-		children: Snippet;
-	}
-
-	let { class: className, size = 'md', children, ...rest }: Props = $props();
-
-	const ctx = getSelectCtx();
-
-	let wrapperEl = $state<HTMLDivElement>();
-
-	function getTriggerElement(wrapper: HTMLElement | null | undefined): HTMLElement | null {
-		if (!wrapper) return null;
-		if (wrapper.matches(TRIGGER_SELECTOR)) return wrapper;
-		return wrapper.querySelector<HTMLElement>(TRIGGER_SELECTOR);
-	}
-
-	function setDisabledState(triggerEl: HTMLElement, disabled: boolean) {
-		if (disabled) {
-			triggerEl.setAttribute('aria-disabled', 'true');
-			triggerEl.setAttribute('data-disabled', '');
-		} else {
-			triggerEl.removeAttribute('aria-disabled');
-			triggerEl.removeAttribute('data-disabled');
-		}
-
-		if (
-			triggerEl instanceof HTMLButtonElement ||
-			triggerEl instanceof HTMLInputElement ||
-			triggerEl instanceof HTMLSelectElement ||
-			triggerEl instanceof HTMLTextAreaElement
-		) {
-			triggerEl.disabled = disabled;
-		}
-	}
-
-	$effect(() => {
-		const triggerEl = getTriggerElement(wrapperEl);
-		if (!triggerEl) return;
-
-		ctx.triggerEl = triggerEl;
-		triggerEl.id = ctx.triggerId;
-		triggerEl.setAttribute('popovertarget', ctx.contentId);
-		triggerEl.setAttribute('aria-haspopup', 'listbox');
-		triggerEl.setAttribute('aria-expanded', String(ctx.open));
-		if (ctx.open) {
-			triggerEl.setAttribute('aria-controls', ctx.contentId);
-		} else {
-			triggerEl.removeAttribute('aria-controls');
-		}
-		triggerEl.setAttribute('data-state', ctx.open ? 'open' : 'closed');
-		setDisabledState(triggerEl, ctx.disabled);
-
-		return () => {
-			if (ctx.triggerEl === triggerEl) {
-				ctx.triggerEl = null;
-			}
-		};
-	});
-</script>
-
-<div bind:this={wrapperEl} data-select-trigger-wrap>
-	<button type="button" data-select-trigger data-size={size} class={className} {...rest}>
-		{@render children()}
-		<svg
-			data-indicator
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 24 24"
-			fill="none"
-			stroke="currentColor"
-			stroke-width="2"
-			aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg
-		>
-	</button>
-</div>
-
-<style>
-	[data-select-trigger-wrap] {
-		display: contents;
-	}
-
-	[data-select-trigger] {
-		--dry-select-bg: var(--dry-color-bg-raised);
-		--dry-select-border: var(--dry-color-stroke-strong);
-		--dry-select-color: var(--dry-color-text-strong);
-		--dry-select-padding-x: var(--dry-space-4);
-		--dry-select-padding-y: var(--dry-space-2);
-		--dry-select-font-size: var(--dry-type-small-size);
-
-		display: grid;
-		grid-template-columns: 1fr 1.5rem;
-		align-items: center;
-		gap: var(--dry-space-2);
-		min-height: var(--dry-space-12);
-		padding: var(--dry-select-padding-y) var(--dry-select-padding-x);
-		font-size: var(--dry-select-font-size);
-		line-height: var(--dry-type-small-leading);
-		font-family: var(--dry-font-sans);
-		color: var(--dry-select-color);
-		background: var(--dry-select-bg);
-		border: 1px solid var(--dry-select-border);
-		border-radius: var(--dry-select-radius, var(--dry-radius-md));
-		cursor: pointer;
-		text-align: left;
-		box-sizing: border-box;
-		appearance: none;
-		transition:
-			border-color var(--dry-duration-fast) var(--dry-ease-default),
-			box-shadow var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-select-trigger] [data-indicator] {
-		height: 1em;
-		aspect-ratio: 1;
-		place-self: center;
-		opacity: 0.5;
-		transition: transform var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-select-trigger][data-state='open'] [data-indicator] {
-		transform: rotate(180deg);
-	}
-
-	[data-select-trigger]:hover:not([data-disabled]) {
-		border-color: var(--dry-color-stroke-strong);
-	}
-
-	[data-select-trigger]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: -1px;
-		border-color: var(--dry-color-stroke-focus);
-	}
-
-	[data-select-trigger][data-disabled] {
-		--dry-select-bg: var(--dry-color-bg-sunken);
-		--dry-select-border: var(--dry-color-stroke-disabled);
-		--dry-select-color: var(--dry-color-text-disabled);
-		cursor: not-allowed;
-	}
-
-	[data-select-trigger][aria-invalid='true'],
-	[data-select-trigger][data-invalid] {
-		--dry-select-bg: color-mix(
-			in srgb,
-			var(--dry-color-fill-error-weak) 70%,
-			var(--dry-color-bg-raised)
-		);
-		--dry-select-border: var(--dry-color-stroke-error);
-	}
-
-	[data-select-trigger][aria-invalid='true']:hover:not([data-disabled]),
-	[data-select-trigger][data-invalid]:hover:not([data-disabled]) {
-		border-color: var(--dry-color-stroke-error-strong);
-	}
-
-	[data-select-trigger][aria-invalid='true']:focus-visible,
-	[data-select-trigger][data-invalid]:focus-visible {
-		outline-color: var(--dry-color-fill-error);
-		border-color: var(--dry-color-stroke-error);
-	}
-
-	/* Size variants */
-	[data-select-trigger][data-size='sm'] {
-		--dry-select-padding-x: var(--dry-space-2);
-		--dry-select-padding-y: var(--dry-space-1);
-		--dry-select-font-size: var(--dry-type-tiny-size);
-		min-height: var(--dry-space-8);
-		line-height: var(--dry-type-tiny-leading);
-	}
-
-	[data-select-trigger][data-size='md'] {
-		--dry-select-padding-x: var(--dry-space-3);
-		--dry-select-padding-y: var(--dry-space-2);
-		--dry-select-font-size: var(--dry-type-small-size);
-		line-height: var(--dry-type-small-leading);
-	}
-
-	[data-select-trigger][data-size='lg'] {
-		--dry-select-padding-x: var(--dry-space-4);
-		--dry-select-padding-y: var(--dry-space-2_5);
-		--dry-select-font-size: var(--dry-type-heading-4-size);
-		line-height: var(--dry-type-heading-4-leading);
-	}
-
-	@container (max-width: 200px) {
-		[data-select-trigger] {
-			--dry-select-padding-x: var(--dry-space-2);
-		}
-	}
-</style>

package/dist/select/select-trigger.svelte.d.ts

@@ -1,9 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLButtonElement> {
-	size?: 'sm' | 'md' | 'lg';
-	children: Snippet;
-}
-declare const SelectTrigger: import('svelte').Component<Props, {}, ''>;
-type SelectTrigger = ReturnType<typeof SelectTrigger>;
-export default SelectTrigger;

package/dist/sidebar/sidebar-trigger.svelte

@@ -1,76 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { getSidebarCtx } from './context.svelte.js';
-
-	interface Props extends HTMLButtonAttributes {
-		children?: Snippet;
-	}
-
-	let { class: className, children, ...rest }: Props = $props();
-
-	const ctx = getSidebarCtx();
-</script>
-
-<button
-	type="button"
-	aria-label="Toggle sidebar"
-	aria-expanded={!ctx.collapsed}
-	data-sidebar-trigger
-	data-side={ctx.side}
-	class={className}
-	onclick={() => ctx.toggle()}
-	{...rest}
->
-	{#if children}
-		{@render children()}
-	{/if}
-</button>
-
-<style>
-	[data-sidebar-trigger] {
-		display: grid;
-		place-items: center;
-		gap: var(--dry-space-2);
-		min-height: var(--dry-space-12);
-		padding: var(--dry-space-2) var(--dry-space-3);
-		border: 1px solid var(--dry-sidebar-border, var(--dry-color-stroke-weak));
-		border-radius: var(--dry-radius-md);
-		background: transparent;
-		color: var(--dry-color-text-strong);
-		font-family: var(--dry-font-sans);
-		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
-		cursor: pointer;
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			color var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-sidebar-trigger]::before {
-		content: '>';
-		display: inline-grid;
-		place-items: center;
-		transition: transform var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-sidebar-trigger]:hover {
-		background: var(--dry-color-fill);
-	}
-
-	[data-sidebar-trigger]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 2px;
-	}
-
-	[data-sidebar-trigger][aria-expanded='true']::before {
-		transform: rotate(180deg);
-	}
-
-	[data-sidebar-trigger][data-side='right']::before {
-		transform: rotate(180deg);
-	}
-
-	[data-sidebar-trigger][data-side='right'][aria-expanded='true']::before {
-		transform: none;
-	}
-</style>

package/dist/sidebar/sidebar-trigger.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLButtonAttributes } from 'svelte/elements';
-interface Props extends HTMLButtonAttributes {
-	children?: Snippet;
-}
-declare const SidebarTrigger: import('svelte').Component<Props, {}, ''>;
-type SidebarTrigger = ReturnType<typeof SidebarTrigger>;
-export default SidebarTrigger;

package/dist/slider/slider.svelte.d.ts

@@ -1,13 +0,0 @@
-import type { HTMLInputAttributes } from 'svelte/elements';
-interface Props extends Omit<HTMLInputAttributes, 'size'> {
-	value?: number;
-	min?: number;
-	max?: number;
-	step?: number;
-	size?: 'sm' | 'md' | 'lg';
-	disabled?: boolean;
-	orientation?: 'horizontal' | 'vertical';
-}
-declare const Slider: import('svelte').Component<Props, {}, 'value'>;
-type Slider = ReturnType<typeof Slider>;
-export default Slider;

package/dist/stepper/stepper-step.svelte.d.ts

@@ -1,12 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends Omit<HTMLAttributes<HTMLLIElement>, 'onclick'> {
-	step: number;
-	clickable?: boolean;
-	error?: boolean;
-	onclick?: (index: number) => void;
-	children: Snippet;
-}
-declare const StepperStep: import('svelte').Component<Props, {}, ''>;
-type StepperStep = ReturnType<typeof StepperStep>;
-export default StepperStep;

package/dist/system-map/index.d.ts

@@ -1,17 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-import type { DolphinEdgeType, DolphinGraph, DolphinLayer, DolphinNodeKind, DolphinPackage, DolphinVisibility } from './types.js';
-export type { DolphinCluster, DolphinEdge, DolphinEdgeType, DolphinGraph, DolphinLayer, DolphinMismatch, DolphinMismatchKind, DolphinNode, DolphinNodeKind, DolphinPackage, DolphinSignals, DolphinSummary, DolphinVisibility, SystemMapEdge, SystemMapEdgeKind, SystemMapGraph, SystemMapLayer, SystemMapNode, SystemMapNodeKind, SystemMapVisibility } from './types.js';
-export interface SystemMapProps extends HTMLAttributes<HTMLDivElement> {
-    graph: DolphinGraph;
-    focusId?: string | null;
-    layerFilter?: readonly DolphinLayer[];
-    kindFilter?: readonly DolphinNodeKind[];
-    edgeFilter?: readonly DolphinEdgeType[];
-    packageFilter?: readonly DolphinPackage[];
-    visibilityFilter?: readonly DolphinVisibility[];
-    categoryFilter?: readonly string[];
-    showLegend?: boolean;
-    showThumbnails?: boolean;
-    showEdgeLabels?: boolean;
-}
-export { default as SystemMap } from './system-map.svelte';

package/dist/system-map/index.js

@@ -1 +0,0 @@
-export { default as SystemMap } from './system-map.svelte';

package/dist/system-map/system-map.svelte

@@ -1,311 +0,0 @@
-<script lang="ts">
-	import { SvelteSet } from 'svelte/reactivity';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { Text } from '../text/index.js';
-	import type {
-		DolphinPackage,
-		SystemMapEdgeKind,
-		SystemMapGraph,
-		SystemMapLayer,
-		SystemMapNode,
-		SystemMapNodeKind,
-		SystemMapVisibility
-	} from './types.js';
-
-	interface Props extends HTMLAttributes<HTMLDivElement> {
-		graph: SystemMapGraph;
-		focusId?: string | null;
-		layerFilter?: readonly SystemMapLayer[];
-		kindFilter?: readonly SystemMapNodeKind[];
-		edgeFilter?: readonly SystemMapEdgeKind[];
-		packageFilter?: readonly DolphinPackage[];
-		visibilityFilter?: readonly SystemMapVisibility[];
-		categoryFilter?: readonly string[];
-		showLegend?: boolean;
-		showThumbnails?: boolean;
-		showEdgeLabels?: boolean;
-	}
-
-	interface ViewNode {
-		id: string;
-		label: string;
-		sublabel: string;
-		helper: string;
-		isFocused: boolean;
-	}
-
-	interface EdgeRow {
-		id: string;
-		source: ViewNode;
-		target: ViewNode;
-		label: string;
-	}
-
-	const layerOrder: SystemMapLayer[] = [
-		'primitive',
-		'ui-wrapper',
-		'ui-composite',
-		'part',
-		'catalog',
-		'cluster'
-	];
-
-	const packageLabels: Record<DolphinPackage, string> = {
-		primitives: 'Primitives',
-		ui: 'UI',
-		docs: 'Docs',
-		audit: 'Audit'
-	};
-
-	const edgeLabels: Record<SystemMapEdgeKind, string> = {
-		wraps: 'wraps',
-		composes: 'composes',
-		compound_part: 'part of',
-		related: 'related',
-		docs: 'docs',
-		duplication_cluster: 'duplicates'
-	};
-
-	let {
-		graph,
-		focusId = null,
-		layerFilter,
-		kindFilter,
-		edgeFilter,
-		packageFilter,
-		visibilityFilter,
-		categoryFilter,
-		showLegend = true,
-		showThumbnails = true,
-		showEdgeLabels = false,
-		class: className,
-		...rest
-	}: Props = $props();
-
-	function compareStrings(left: string, right: string): number {
-		return left.localeCompare(right, undefined, { sensitivity: 'base' });
-	}
-
-	function formatTokenLabel(value: string): string {
-		return value
-			.replace(/[-_]+/g, ' ')
-			.replace(/\s+/g, ' ')
-			.trim()
-			.replace(/\b\w/g, (match) => match.toUpperCase());
-	}
-
-	function sublabelFor(node: SystemMapNode): string {
-		const labels = [packageLabels[node.package], formatTokenLabel(node.kind)];
-		if (node.visibility) labels.push(formatTokenLabel(node.visibility));
-		return labels.join(' \u2022 ');
-	}
-
-	function helperFor(node: SystemMapNode): string {
-		if (node.kind === 'part') return node.description || 'Public part export.';
-		if (node.layer === 'cluster') return node.description || 'Audit cluster.';
-		if (node.layer === 'catalog') return node.sourcePath || node.description || 'Catalog asset.';
-		const metrics: string[] = [];
-		if (node.parts.length > 0) metrics.push(`${node.parts.length} parts`);
-		if (node.componentImportCount && node.componentImportCount > 0)
-			metrics.push(`${node.componentImportCount} links`);
-		if (metrics.length > 0) return metrics.join(' \u2022 ');
-		return node.description || node.category || 'Public surface.';
-	}
-
-	function toViewNode(node: SystemMapNode): ViewNode {
-		return {
-			id: node.id,
-			label: node.label,
-			sublabel: sublabelFor(node),
-			helper: helperFor(node),
-			isFocused: focusId === node.id
-		};
-	}
-
-	const normalizedNodes = $derived(
-		[...graph.nodes].sort((left, right) => {
-			const layerDelta = layerOrder.indexOf(left.layer) - layerOrder.indexOf(right.layer);
-			if (layerDelta !== 0) return layerDelta;
-			return compareStrings(left.label, right.label);
-		})
-	);
-
-	const filteredNodes = $derived(
-		(() => {
-			const allowedLayers = layerFilter ? new Set(layerFilter) : null;
-			const allowedKinds = kindFilter ? new Set(kindFilter) : null;
-			const allowedPackages = packageFilter ? new Set(packageFilter) : null;
-			const allowedVisibility = visibilityFilter ? new Set(visibilityFilter) : null;
-			const allowedCategories = categoryFilter ? new Set(categoryFilter) : null;
-			return normalizedNodes.filter((node) => {
-				if (allowedLayers && !allowedLayers.has(node.layer)) return false;
-				if (allowedKinds && !allowedKinds.has(node.kind)) return false;
-				if (allowedPackages && !allowedPackages.has(node.package)) return false;
-				if (allowedVisibility && (!node.visibility || !allowedVisibility.has(node.visibility)))
-					return false;
-				if (allowedCategories && !allowedCategories.has(node.category)) return false;
-				return true;
-			});
-		})()
-	);
-
-	const filteredNodeIds = $derived(new SvelteSet(filteredNodes.map((n) => n.id)));
-
-	const filteredEdges = $derived(
-		(() => {
-			const allowedEdges = edgeFilter ? new Set(edgeFilter) : null;
-			return graph.edges
-				.filter((e) => filteredNodeIds.has(e.from) && filteredNodeIds.has(e.to))
-				.filter((e) => !allowedEdges || allowedEdges.has(e.type))
-				.sort((a, b) => compareStrings(a.id, b.id));
-		})()
-	);
-
-	const visibleNodeIds = $derived(
-		(() => {
-			if (!focusId || !filteredNodeIds.has(focusId)) return filteredNodeIds;
-			const ids = new SvelteSet<string>([focusId]);
-			for (const edge of filteredEdges) {
-				if (edge.from === focusId || edge.to === focusId) {
-					ids.add(edge.from);
-					ids.add(edge.to);
-				}
-			}
-			return ids;
-		})()
-	);
-
-	const visibleNodes = $derived(filteredNodes.filter((n) => visibleNodeIds.has(n.id)));
-	const visibleEdges = $derived(
-		filteredEdges.filter((e) => visibleNodeIds.has(e.from) && visibleNodeIds.has(e.to))
-	);
-
-	const edgeRows = $derived(
-		visibleEdges
-			.map((edge) => {
-				const source = visibleNodes.find((n) => n.id === edge.from);
-				const target = visibleNodes.find((n) => n.id === edge.to);
-				if (!source || !target) return null;
-				return {
-					id: edge.id,
-					source: toViewNode(source),
-					target: toViewNode(target),
-					label: edgeLabels[edge.type]
-				} satisfies EdgeRow;
-			})
-			.filter((row): row is EdgeRow => row !== null)
-	);
-
-	const connectedNodeIds = $derived(new Set(visibleEdges.flatMap((e) => [e.from, e.to])));
-
-	const orphanNodes = $derived(
-		visibleNodes.filter((n) => !connectedNodeIds.has(n.id)).map(toViewNode)
-	);
-</script>
-
-<div data-system-map class={className} {...rest}>
-	{#if edgeRows.length === 0 && orphanNodes.length === 0}
-		<div data-empty>
-			<Text as="p" color="muted">No nodes match the active filters.</Text>
-		</div>
-	{:else}
-		{#each edgeRows as row (row.id)}
-			<div data-edge-row>
-				<div data-node data-focused={row.source.isFocused || undefined}>
-					<Text as="p" data-node-name>{row.source.label}</Text>
-					<Text as="p" size="xs" color="muted">{row.source.sublabel}</Text>
-					<Text as="p" size="xs" color="muted" data-node-helper>{row.source.helper}</Text>
-				</div>
-
-				<div data-connector>
-					<span data-connector-line></span>
-					<Text as="span" size="xs" color="muted" data-connector-label>{row.label}</Text>
-					<span data-connector-line></span>
-				</div>
-
-				<div data-node data-focused={row.target.isFocused || undefined}>
-					<Text as="p" data-node-name>{row.target.label}</Text>
-					<Text as="p" size="xs" color="muted">{row.target.sublabel}</Text>
-					<Text as="p" size="xs" color="muted" data-node-helper>{row.target.helper}</Text>
-				</div>
-			</div>
-		{/each}
-
-		{#if orphanNodes.length > 0}
-			<div data-orphans>
-				{#each orphanNodes as node (node.id)}
-					<div data-node data-focused={node.isFocused || undefined}>
-						<Text as="p" data-node-name>{node.label}</Text>
-						<Text as="p" size="xs" color="muted">{node.sublabel}</Text>
-						<Text as="p" size="xs" color="muted" data-node-helper>{node.helper}</Text>
-					</div>
-				{/each}
-			</div>
-		{/if}
-	{/if}
-</div>
-
-<style>
-	[data-system-map] {
-		display: grid;
-		gap: var(--dry-space-3);
-		color: var(--dry-color-text-strong);
-	}
-
-	[data-empty] {
-		display: grid;
-		place-items: center;
-		padding: var(--dry-space-8);
-	}
-
-	[data-edge-row] {
-		display: grid;
-		grid-template-columns: 1fr auto 1fr;
-		gap: var(--dry-space-3);
-		align-items: center;
-	}
-
-	[data-node] {
-		display: grid;
-		gap: var(--dry-space-1);
-		padding: var(--dry-space-3);
-		border-radius: var(--dry-radius-lg);
-		background: var(--dry-color-bg-raised);
-		border: 1px solid var(--dry-color-stroke-weak);
-	}
-
-	[data-node][data-focused] {
-		border-color: var(--dry-color-stroke-strong);
-	}
-
-	[data-node-name] {
-		font-weight: 600;
-	}
-
-	[data-node-helper] {
-		opacity: 0.7;
-	}
-
-	[data-connector] {
-		display: grid;
-		grid-template-columns: 1fr auto 1fr;
-		gap: var(--dry-space-2);
-		align-items: center;
-	}
-
-	[data-connector-line] {
-		display: grid;
-		height: 0;
-		border-top: 1px solid var(--dry-color-stroke-weak);
-	}
-
-	[data-connector-label] {
-		white-space: nowrap;
-	}
-
-	[data-orphans] {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
-		gap: var(--dry-space-3);
-	}
-</style>

package/dist/system-map/system-map.svelte.d.ts

@@ -1,25 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-import type {
-	DolphinPackage,
-	SystemMapEdgeKind,
-	SystemMapGraph,
-	SystemMapLayer,
-	SystemMapNodeKind,
-	SystemMapVisibility
-} from './types.js';
-interface Props extends HTMLAttributes<HTMLDivElement> {
-	graph: SystemMapGraph;
-	focusId?: string | null;
-	layerFilter?: readonly SystemMapLayer[];
-	kindFilter?: readonly SystemMapNodeKind[];
-	edgeFilter?: readonly SystemMapEdgeKind[];
-	packageFilter?: readonly DolphinPackage[];
-	visibilityFilter?: readonly SystemMapVisibility[];
-	categoryFilter?: readonly string[];
-	showLegend?: boolean;
-	showThumbnails?: boolean;
-	showEdgeLabels?: boolean;
-}
-declare const SystemMap: import('svelte').Component<Props, {}, ''>;
-type SystemMap = ReturnType<typeof SystemMap>;
-export default SystemMap;