@voithos-labs/aragonite 0.10.2 → 0.10.4

package/dist/components/menu/BlockMenu.svelte

@@ -0,0 +1,315 @@
+<script lang="ts" module>
+	/**
+	 * A limestone-styled list menu the editor opens at a point: the block picker behind the
+	 * bottom `+` (rows insert Markdown at the caret) and a block's context menu (rows run that
+	 * kind's registered actions). Pointer- and keyboard-driven without ever taking focus, so the
+	 * caret it acts on stays exactly where it is.
+	 */
+	import { isPluginInstalled } from '../../schema/plugin-install';
+	import type { MenuIconName } from './MenuIcon.svelte';
+
+	interface BlockMenuItem {
+		id: string;
+		label: string;
+		icon: MenuIconName;
+		md: string;
+	}
+
+	export interface MenuEntry {
+		id: string;
+		label: string;
+		icon?: MenuIconName;
+		danger?: boolean;
+		disabled?: boolean;
+		/** A separator row; nothing else on the entry is read. */
+		divider?: boolean;
+		/** A flyout: hover or ArrowRight opens these beside the row; a pick is one of THEIR ids. */
+		children?: MenuEntry[];
+	}
+
+	// Blocks that stand on their own when empty. A heading is not one — it is text turned into a
+	// heading, which the selection popover offers — so it is deliberately not here.
+	const BUILT_IN: readonly BlockMenuItem[] = [
+		{ id: 'bullet', label: 'Bulleted list', icon: 'list', md: '- ' },
+		{ id: 'numbered', label: 'Numbered list', icon: 'list-ordered', md: '1. ' },
+		{ id: 'todo', label: 'To-do list', icon: 'square-check', md: '- [ ] ' },
+		{ id: 'quote', label: 'Quote', icon: 'text-quote', md: '> ' },
+		{ id: 'divider', label: 'Divider', icon: 'minus', md: '---\n' },
+		{ id: 'code', label: 'Code block', icon: 'code', md: '```\n\n```\n' },
+		{
+			id: 'table',
+			label: 'Table',
+			icon: 'table',
+			md: '| Column | Column |\n| --- | --- |\n|  |  |\n'
+		}
+	];
+	// Listed only while the plugin that reads the syntax is installed.
+	const FROM_PLUGINS: readonly { plugin: string; item: BlockMenuItem }[] = [
+		{ plugin: 'latex', item: { id: 'math', label: 'Math block', icon: 'sigma', md: '$$\n\n$$\n' } },
+		{
+			plugin: 'admonitions',
+			item: { id: 'note', label: 'Note', icon: 'info', md: ':::note\n\n:::\n' }
+		}
+	];
+
+	/** Every insertable block, keyed by id, for resolving a pick from either level of the menu. */
+	export function insertSnippets(): Map<string, string> {
+		const all = [
+			...BUILT_IN,
+			...FROM_PLUGINS.filter((entry) => isPluginInstalled(entry.plugin)).map((entry) => entry.item)
+		];
+		return new Map(all.map((item) => [item.id, item.md]));
+	}
+
+	/** Every insertable block as one flat list, for a flyout that is already a level down. */
+	export function insertFlyoutEntries(): MenuEntry[] {
+		return [
+			...BUILT_IN,
+			...FROM_PLUGINS.filter((entry) => isPluginInstalled(entry.plugin)).map((entry) => entry.item)
+		].map(({ id, label, icon }) => ({ id, label, icon }));
+	}
+
+	const COMMON = new Set(['bullet', 'numbered', 'todo', 'code', 'table', 'math']);
+
+	/** The insert menu: the common blocks, the rest behind "More blocks". */
+	export function insertMenuEntries(): MenuEntry[] {
+		const all = [
+			...BUILT_IN,
+			...FROM_PLUGINS.filter((entry) => isPluginInstalled(entry.plugin)).map((entry) => entry.item)
+		];
+		const row = ({ id, label, icon }: BlockMenuItem): MenuEntry => ({ id, label, icon });
+		const common = all.filter((item) => COMMON.has(item.id)).map(row);
+		const more = all.filter((item) => !COMMON.has(item.id)).map(row);
+		return more.length
+			? [...common, { id: 'more', label: 'More blocks', icon: 'plus', children: more }]
+			: common;
+	}
+</script>
+
+<script lang="ts">
+	import { clampMenuToViewport } from '../blocks/table/table-menu-model';
+	import { BLOCK_MENU_LABEL } from '../../a11y-strings';
+	import { keepFlyoutOnScreen } from './flyout-placement';
+	import MenuIcon from './MenuIcon.svelte';
+
+	let {
+		x,
+		y,
+		anchor,
+		items,
+		label = BLOCK_MENU_LABEL,
+		onPick,
+		onClose
+	}: {
+		x: number;
+		y: number;
+		/** Where the open point is NOW, re-read on scroll and resize so the menu stays on it. */
+		anchor?: () => { x: number; y: number } | null;
+		items: MenuEntry[];
+		label?: string;
+		onPick: (id: string) => void;
+		onClose: () => void;
+	} = $props();
+
+	let menuEl: HTMLDivElement | undefined = $state();
+	let activeIndex = $state(0);
+	/** The open flyout: the index of its parent row, and the active child inside it. */
+	let flyout = $state<{ row: number; child: number } | null>(null);
+	const selectable = $derived(items.map((item, i) => (item.divider || item.disabled ? -1 : i)));
+	function step(from: number, delta: number): number {
+		const n = items.length;
+		let i = from;
+		for (let k = 0; k < n; k++) {
+			i = (i + delta + n) % n;
+			if (selectable[i] !== -1) return i;
+		}
+		return from;
+	}
+	function pick(entry: MenuEntry): void {
+		if (entry.disabled || entry.divider) return;
+		if (entry.children) {
+			flyout = { row: items.indexOf(entry), child: 0 };
+			return;
+		}
+		onPick(entry.id);
+	}
+
+	// Same anchoring as the table's menu: follows the content, clamped once when first sized.
+	// svelte-ignore state_referenced_locally
+	let at = $state({ x, y });
+	let shift = $state<{ x: number; y: number } | null>(null);
+	$effect(() => {
+		const follow = () => {
+			const next = anchor?.();
+			if (next) at = next;
+		};
+		window.addEventListener('scroll', follow, { capture: true, passive: true });
+		window.addEventListener('resize', follow, { passive: true });
+		return () => {
+			window.removeEventListener('scroll', follow, { capture: true });
+			window.removeEventListener('resize', follow);
+		};
+	});
+	$effect(() => {
+		if (!menuEl || shift) return;
+		const rect = menuEl.getBoundingClientRect();
+		const clamped = clampMenuToViewport(
+			{ x, y },
+			{ width: rect.width, height: rect.height },
+			{ width: window.innerWidth, height: window.innerHeight }
+		);
+		shift = { x: clamped.x - x, y: clamped.y - y };
+	});
+	const left = $derived(at.x + (shift?.x ?? 0));
+	const top = $derived(at.y + (shift?.y ?? 0));
+
+	// Keys are read at the document, capture phase: the caret's surface keeps focus, and the
+	// menu answers first while it is open. Anything it does not claim reaches the editor as usual.
+	$effect(() => {
+		const onPointerDown = (e: PointerEvent) => {
+			if (menuEl && e.target instanceof Node && menuEl.contains(e.target)) return;
+			onClose();
+		};
+		// Claimed keys stop here: the caret's surface would otherwise take the same press (an
+		// Enter splitting the block the menu is about to insert into).
+		const claim = (e: KeyboardEvent) => {
+			e.preventDefault();
+			e.stopImmediatePropagation();
+		};
+		const onKeyDown = (e: KeyboardEvent) => {
+			if (e.altKey || e.ctrlKey || e.metaKey) return;
+			const open = flyout;
+			const children = open ? (items[open.row].children ?? []) : [];
+			switch (e.key) {
+				case 'Escape':
+					claim(e);
+					if (open) flyout = null;
+					else onClose();
+					return;
+				case 'ArrowDown':
+				case 'ArrowUp': {
+					claim(e);
+					const delta = e.key === 'ArrowDown' ? 1 : -1;
+					if (open)
+						flyout = { ...open, child: (open.child + delta + children.length) % children.length };
+					else activeIndex = step(activeIndex, delta);
+					return;
+				}
+				case 'ArrowRight':
+					if (items[activeIndex]?.children) {
+						claim(e);
+						flyout = { row: activeIndex, child: 0 };
+					}
+					return;
+				case 'ArrowLeft':
+					if (open) {
+						claim(e);
+						flyout = null;
+					}
+					return;
+				case 'Enter':
+					claim(e);
+					if (open) onPick(children[open.child].id);
+					else pick(items[activeIndex]);
+					return;
+			}
+		};
+		document.addEventListener('pointerdown', onPointerDown, true);
+		document.addEventListener('keydown', onKeyDown, true);
+		return () => {
+			document.removeEventListener('pointerdown', onPointerDown, true);
+			document.removeEventListener('keydown', onKeyDown, true);
+		};
+	});
+</script>
+
+<div
+	bind:this={menuEl}
+	class="md-menu block-menu"
+	role="menu"
+	aria-label={label}
+	style:left="{left}px"
+	style:top="{top}px"
+>
+	{#each items as item, i (item.id)}
+		{#if item.divider}
+			<div class="md-menu-divider" role="separator"></div>
+		{:else}
+			<div class="block-menu-row" role="presentation">
+				<button
+					type="button"
+					role="menuitem"
+					tabindex="-1"
+					class="md-menu-item block-menu-item"
+					class:block-menu-danger={item.danger}
+					disabled={item.disabled}
+					data-active={i === activeIndex ? 'true' : undefined}
+					data-testid="block-menu-{item.id}"
+					aria-haspopup={item.children ? 'menu' : undefined}
+					aria-expanded={item.children ? flyout?.row === i : undefined}
+					onmousedown={(e) => e.preventDefault()}
+					onpointerenter={() => {
+						activeIndex = i;
+						flyout = item.children ? { row: i, child: 0 } : null;
+					}}
+					onclick={() => pick(item)}
+				>
+					{#if item.icon}<span class="md-menu-icon"><MenuIcon name={item.icon} /></span>{/if}
+					<span class="block-menu-label">{item.label}</span>
+					{#if item.children}<span class="md-menu-icon"
+							><MenuIcon name="chevron-right" size={13} /></span
+						>{/if}
+				</button>
+				{#if item.children && flyout?.row === i}
+					<div
+						class="md-menu block-menu block-menu-flyout"
+						role="menu"
+						{@attach keepFlyoutOnScreen}
+					>
+						{#each item.children as child, j (child.id)}
+							<button
+								type="button"
+								role="menuitem"
+								tabindex="-1"
+								class="md-menu-item block-menu-item"
+								data-active={flyout.child === j ? 'true' : undefined}
+								data-testid="block-menu-{child.id}"
+								onmousedown={(e) => e.preventDefault()}
+								onpointerenter={() => (flyout = { row: i, child: j })}
+								onclick={() => onPick(child.id)}
+							>
+								{#if child.icon}<span class="md-menu-icon"><MenuIcon name={child.icon} /></span
+									>{/if}
+								<span class="block-menu-label">{child.label}</span>
+							</button>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		{/if}
+	{/each}
+</div>
+
+<style>
+	/* Surface and rows are the shared `.md-menu` family (editor.css). */
+	.block-menu {
+		min-width: 188px;
+	}
+	.block-menu-row {
+		position: relative;
+	}
+	.block-menu-label {
+		flex: 1;
+	}
+	/* limestone's submenu: a second surface hung off the row's right edge. */
+	.block-menu-flyout {
+		position: absolute;
+		left: 100%;
+		top: -4px;
+		margin-left: 4px;
+	}
+	.block-menu-danger,
+	.block-menu-danger .md-menu-icon {
+		color: var(--color-error, #d03025);
+	}
+</style>

package/dist/components/menu/BlockMenu.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { MenuIconName } from './MenuIcon.svelte';
+export interface MenuEntry {
+    id: string;
+    label: string;
+    icon?: MenuIconName;
+    danger?: boolean;
+    disabled?: boolean;
+    /** A separator row; nothing else on the entry is read. */
+    divider?: boolean;
+    /** A flyout: hover or ArrowRight opens these beside the row; a pick is one of THEIR ids. */
+    children?: MenuEntry[];
+}
+/** Every insertable block, keyed by id, for resolving a pick from either level of the menu. */
+export declare function insertSnippets(): Map<string, string>;
+/** Every insertable block as one flat list, for a flyout that is already a level down. */
+export declare function insertFlyoutEntries(): MenuEntry[];
+/** The insert menu: the common blocks, the rest behind "More blocks". */
+export declare function insertMenuEntries(): MenuEntry[];
+type $$ComponentProps = {
+    x: number;
+    y: number;
+    /** Where the open point is NOW, re-read on scroll and resize so the menu stays on it. */
+    anchor?: () => {
+        x: number;
+        y: number;
+    } | null;
+    items: MenuEntry[];
+    label?: string;
+    onPick: (id: string) => void;
+    onClose: () => void;
+};
+declare const BlockMenu: import("svelte").Component<$$ComponentProps, {}, "">;
+type BlockMenu = ReturnType<typeof BlockMenu>;
+export default BlockMenu;

package/dist/components/menu/MenuIcon.svelte

@@ -0,0 +1,153 @@
+<script lang="ts" module>
+	/**
+	 * Lucide glyphs the editor's own chrome draws (menus, the selection bar, table affordances),
+	 * inlined as path data so the library carries no icon dependency. Every shape is a path so
+	 * the stroke styling below covers all of them.
+	 */
+	const GLYPHS = {
+		plus: ['M5 12h14', 'M12 5v14'],
+		type: ['M4 7V4h16v3', 'M9 20h6', 'M12 4v16'],
+		trash: [
+			'M3 6h18',
+			'M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6',
+			'M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2',
+			'M10 11v6',
+			'M14 11v6'
+		],
+		'arrow-up': ['m5 12 7-7 7 7', 'M12 19V5'],
+		'arrow-down': ['M12 5v14', 'm19 12-7 7-7-7'],
+		'arrow-left': ['m12 19-7-7 7-7', 'M19 12H5'],
+		'arrow-right': ['M5 12h14', 'm12 5 7 7-7 7'],
+		scissors: [
+			'M9 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0',
+			'M8.12 8.12 12 12',
+			'M20 4 8.12 15.88',
+			'M9 18a3 3 0 1 1-6 0 3 3 0 0 1 6 0',
+			'M14.8 14.8 20 20'
+		],
+		copy: [
+			'M10 8h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2z',
+			'M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'
+		],
+		clipboard: [
+			'M9 2h6a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z',
+			'M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'
+		],
+		'align-left': ['M15 12H3', 'M17 18H3', 'M21 6H3'],
+		'align-center': ['M17 12H7', 'M19 18H5', 'M21 6H3'],
+		'align-right': ['M21 12H9', 'M21 18H7', 'M21 6H3'],
+		bold: ['M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8'],
+		italic: ['M19 4h-9', 'M14 20H5', 'M15 4 9 20'],
+		strikethrough: ['M16 4H9a3 3 0 0 0-2.83 4', 'M14 12a4 4 0 0 1 0 8H6', 'M4 12h16'],
+		code: ['m16 18 6-6-6-6', 'm8 6-6 6 6 6'],
+		link: [
+			'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71',
+			'M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'
+		],
+		heading: ['M6 12h12', 'M6 20V4', 'M18 20V4'],
+		list: ['M3 12h.01', 'M3 18h.01', 'M3 6h.01', 'M8 12h13', 'M8 18h13', 'M8 6h13'],
+		'list-ordered': [
+			'M10 12h11',
+			'M10 18h11',
+			'M10 6h11',
+			'M4 10h2',
+			'M4 6h1v4',
+			'M6 18H4c0-1 2-2 2-3s-1-1.5-2-1'
+		],
+		'square-check': [
+			'M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z',
+			'm9 12 2 2 4-4'
+		],
+		'text-quote': ['M17 6H3', 'M21 12H8', 'M21 18H8', 'M3 12v6'],
+		minus: ['M5 12h14'],
+		table: [
+			'M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z',
+			'M12 3v18',
+			'M3 9h18',
+			'M3 15h18'
+		],
+		sigma: [
+			'M18 7V5a1 1 0 0 0-1-1H6.5a.5.5 0 0 0-.4.8l4.5 6a2 2 0 0 1 0 2.4l-4.5 6a.5.5 0 0 0 .4.8H17a1 1 0 0 0 1-1v-2'
+		],
+		info: ['M22 12a10 10 0 1 1-20 0 10 10 0 0 1 20 0', 'M12 16v-4', 'M12 8h.01'],
+		'chevron-right': ['m9 18 6-6-6-6'],
+		'chevron-down': ['m6 9 6 6 6-6'],
+		'rows-2': [
+			'M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z',
+			'M3 12h18'
+		],
+		'columns-2': [
+			'M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z',
+			'M12 3v18'
+		],
+		check: ['M20 6 9 17l-5-5'],
+		crop: ['M6 2v14a2 2 0 0 0 2 2h14', 'M18 22V8a2 2 0 0 0-2-2H2'],
+		captions: [
+			'M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z',
+			'M7 15h4',
+			'M15 15h2',
+			'M7 11h2',
+			'M13 11h4'
+		],
+		x: ['M18 6 6 18', 'm6 6 12 12'],
+		'grip-vertical': [
+			'M10 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0',
+			'M10 12a1 1 0 1 1-2 0 1 1 0 0 1 2 0',
+			'M10 19a1 1 0 1 1-2 0 1 1 0 0 1 2 0',
+			'M16 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0',
+			'M16 12a1 1 0 1 1-2 0 1 1 0 0 1 2 0',
+			'M16 19a1 1 0 1 1-2 0 1 1 0 0 1 2 0'
+		]
+	} as const;
+
+	/**
+	 * The marks as LETTERS, the way a formatting bar draws them: a bold B, a slanted I, an S with
+	 * its own line through it. Lucide's stroked outlines of these read as clip art at 16px.
+	 */
+	const LETTERS = {
+		bold: { text: 'B', weight: 800, italic: false, strike: false },
+		italic: { text: 'I', weight: 500, italic: true, strike: false },
+		strikethrough: { text: 'S', weight: 600, italic: false, strike: true }
+	} as const;
+
+	export type MenuIconName = keyof typeof GLYPHS;
+</script>
+
+<script lang="ts">
+	let { name, size = 14 }: { name: MenuIconName; size?: number } = $props();
+	const letter = $derived(name in LETTERS ? LETTERS[name as keyof typeof LETTERS] : null);
+</script>
+
+{#if letter}
+	<svg viewBox="0 0 24 24" width={size} height={size} aria-hidden="true">
+		<text
+			x="12"
+			y="17.5"
+			text-anchor="middle"
+			font-family="Georgia, 'Times New Roman', serif"
+			font-size="17"
+			font-weight={letter.weight}
+			font-style={letter.italic ? 'italic' : 'normal'}
+			fill="currentColor">{letter.text}</text
+		>
+		{#if letter.strike}
+			<path d="M5 12.5h14" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
+		{/if}
+	</svg>
+{:else}
+	<svg
+		viewBox="0 0 24 24"
+		width={size}
+		height={size}
+		fill="none"
+		stroke="currentColor"
+		stroke-width="1.75"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		aria-hidden="true"
+	>
+		{#each GLYPHS[name] as d (d)}
+			<path {d} />
+		{/each}
+	</svg>
+{/if}

package/dist/components/menu/MenuIcon.svelte.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Lucide glyphs the editor's own chrome draws (menus, the selection bar, table affordances),
+ * inlined as path data so the library carries no icon dependency. Every shape is a path so
+ * the stroke styling below covers all of them.
+ */
+declare const GLYPHS: {
+    readonly plus: readonly ["M5 12h14", "M12 5v14"];
+    readonly type: readonly ["M4 7V4h16v3", "M9 20h6", "M12 4v16"];
+    readonly trash: readonly ["M3 6h18", "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6", "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2", "M10 11v6", "M14 11v6"];
+    readonly 'arrow-up': readonly ["m5 12 7-7 7 7", "M12 19V5"];
+    readonly 'arrow-down': readonly ["M12 5v14", "m19 12-7 7-7-7"];
+    readonly 'arrow-left': readonly ["m12 19-7-7 7-7", "M19 12H5"];
+    readonly 'arrow-right': readonly ["M5 12h14", "m12 5 7 7-7 7"];
+    readonly scissors: readonly ["M9 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0", "M8.12 8.12 12 12", "M20 4 8.12 15.88", "M9 18a3 3 0 1 1-6 0 3 3 0 0 1 6 0", "M14.8 14.8 20 20"];
+    readonly copy: readonly ["M10 8h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2z", "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"];
+    readonly clipboard: readonly ["M9 2h6a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z", "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"];
+    readonly 'align-left': readonly ["M15 12H3", "M17 18H3", "M21 6H3"];
+    readonly 'align-center': readonly ["M17 12H7", "M19 18H5", "M21 6H3"];
+    readonly 'align-right': readonly ["M21 12H9", "M21 18H7", "M21 6H3"];
+    readonly bold: readonly ["M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"];
+    readonly italic: readonly ["M19 4h-9", "M14 20H5", "M15 4 9 20"];
+    readonly strikethrough: readonly ["M16 4H9a3 3 0 0 0-2.83 4", "M14 12a4 4 0 0 1 0 8H6", "M4 12h16"];
+    readonly code: readonly ["m16 18 6-6-6-6", "m8 6-6 6 6 6"];
+    readonly link: readonly ["M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71", "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"];
+    readonly heading: readonly ["M6 12h12", "M6 20V4", "M18 20V4"];
+    readonly list: readonly ["M3 12h.01", "M3 18h.01", "M3 6h.01", "M8 12h13", "M8 18h13", "M8 6h13"];
+    readonly 'list-ordered': readonly ["M10 12h11", "M10 18h11", "M10 6h11", "M4 10h2", "M4 6h1v4", "M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"];
+    readonly 'square-check': readonly ["M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z", "m9 12 2 2 4-4"];
+    readonly 'text-quote': readonly ["M17 6H3", "M21 12H8", "M21 18H8", "M3 12v6"];
+    readonly minus: readonly ["M5 12h14"];
+    readonly table: readonly ["M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z", "M12 3v18", "M3 9h18", "M3 15h18"];
+    readonly sigma: readonly ["M18 7V5a1 1 0 0 0-1-1H6.5a.5.5 0 0 0-.4.8l4.5 6a2 2 0 0 1 0 2.4l-4.5 6a.5.5 0 0 0 .4.8H17a1 1 0 0 0 1-1v-2"];
+    readonly info: readonly ["M22 12a10 10 0 1 1-20 0 10 10 0 0 1 20 0", "M12 16v-4", "M12 8h.01"];
+    readonly 'chevron-right': readonly ["m9 18 6-6-6-6"];
+    readonly 'chevron-down': readonly ["m6 9 6 6 6-6"];
+    readonly 'rows-2': readonly ["M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z", "M3 12h18"];
+    readonly 'columns-2': readonly ["M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z", "M12 3v18"];
+    readonly check: readonly ["M20 6 9 17l-5-5"];
+    readonly crop: readonly ["M6 2v14a2 2 0 0 0 2 2h14", "M18 22V8a2 2 0 0 0-2-2H2"];
+    readonly captions: readonly ["M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z", "M7 15h4", "M15 15h2", "M7 11h2", "M13 11h4"];
+    readonly x: readonly ["M18 6 6 18", "m6 6 12 12"];
+    readonly 'grip-vertical': readonly ["M10 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0", "M10 12a1 1 0 1 1-2 0 1 1 0 0 1 2 0", "M10 19a1 1 0 1 1-2 0 1 1 0 0 1 2 0", "M16 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0", "M16 12a1 1 0 1 1-2 0 1 1 0 0 1 2 0", "M16 19a1 1 0 1 1-2 0 1 1 0 0 1 2 0"];
+};
+export type MenuIconName = keyof typeof GLYPHS;
+type $$ComponentProps = {
+    name: MenuIconName;
+    size?: number;
+};
+declare const MenuIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type MenuIcon = ReturnType<typeof MenuIcon>;
+export default MenuIcon;