@axerity/cli 0.1.4 → 0.2.1

package/src/lib/components/docs/Mermaid.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">
-	import { tick } from 'svelte';
-	import { afterNavigate } from '$app/navigation';
-	import { theme } from '$lib/state/theme.svelte';
-
-	type MermaidApi = typeof import('mermaid').default;
-	let mermaid: MermaidApi | null = null;
-
-	async function render(resolved: 'light' | 'dark') {
-		const blocks = Array.from(document.querySelectorAll('pre.mermaid')) as HTMLElement[];
-		if (!blocks.length) return;
-
-		if (!mermaid) mermaid = (await import('mermaid')).default;
-
-		for (const block of blocks) {
-			if (block.dataset.src === undefined) block.dataset.src = block.textContent ?? '';
-			block.removeAttribute('data-processed');
-			block.innerHTML = block.dataset.src;
-		}
-
-		mermaid.initialize({
-			startOnLoad: false,
-			securityLevel: 'strict',
-			theme: resolved === 'dark' ? 'dark' : 'neutral',
-			fontFamily: 'inherit'
-		});
-
-		await mermaid.run({ nodes: blocks });
-	}
-
-	$effect(() => {
-		const resolved = theme.resolved;
-		tick().then(() => render(resolved));
-	});
-
-	afterNavigate(() => {
-		tick().then(() => render(theme.resolved));
-	});
-</script>

package/src/lib/components/docs/Navbar.svelte

@@ -1,144 +0,0 @@
-<script lang="ts">
-	import { page } from '$app/state';
-	import Menu from '@lucide/svelte/icons/menu';
-	import Search from '@lucide/svelte/icons/search';
-	import type { SiteConfig } from '$lib/types';
-	import { activeFor } from '$lib/nav-match';
-	import DynamicIcon from '$lib/components/DynamicIcon.svelte';
-	import ThemeToggle from './ThemeToggle.svelte';
-	import VersionSwitcher from './VersionSwitcher.svelte';
-	import { searchState } from '$lib/state/search.svelte';
-
-	let {
-		site,
-		onMenuClick,
-		resolveVersion
-	}: {
-		site: SiteConfig;
-		onMenuClick?: () => void;
-		resolveVersion?: (pathname: string, versionPath: string) => string;
-	} = $props();
-
-	const innerClass = $derived(
-		(site.layout ?? 'flat') === 'boxed'
-			? 'mx-auto flex h-full max-w-400 items-center gap-4 px-4 sm:px-6'
-			: 'flex h-full items-center gap-4 px-4 sm:px-6'
-	);
-
-	const activeDropdown = $derived(
-		site.dropdowns && site.dropdowns.length
-			? (activeFor(page.url.pathname, site.dropdowns) ?? site.dropdowns[0])
-			: undefined
-	);
-
-	const tabs = $derived(activeDropdown?.tabs ?? site.topNav);
-	const activeTab = $derived(activeFor(page.url.pathname, tabs));
-</script>
-
-<header
-	class="sticky top-0 z-40 h-(--spacing-header) border-b border-border bg-header/80 backdrop-blur-md"
->
-	<div class={innerClass}>
-		<!-- Mobile sidebar toggle -->
-		<button
-			type="button"
-			onclick={onMenuClick}
-			class="-ml-1 inline-flex h-9 w-9 items-center justify-center rounded-lg text-fg-muted hover:bg-bg-subtle hover:text-fg lg:hidden"
-			aria-label="Open navigation"
-		>
-			<Menu size={20} />
-		</button>
-
-		<a
-			href={site.logo?.href ?? '/'}
-			class="flex shrink-0 items-center gap-2"
-			aria-label={site.logo?.alt ?? site.name}
-		>
-			{#if site.logo?.light || site.logo?.dark}
-				{#if site.logo.light}
-					<img
-						src={site.logo.light}
-						alt={site.logo.alt ?? site.name}
-						class="h-6 w-auto dark:hidden"
-					/>
-				{/if}
-				{#if site.logo.dark}
-					<img
-						src={site.logo.dark}
-						alt={site.logo.alt ?? site.name}
-						class="hidden h-6 w-auto dark:block"
-					/>
-				{/if}
-			{:else}
-				<span class="text-base font-semibold text-fg">{site.name}</span>
-			{/if}
-		</a>
-
-		{#if site.versions && site.versions.length}
-			<VersionSwitcher versions={site.versions} {resolveVersion} />
-		{/if}
-
-		<nav class="hidden items-center gap-1 md:flex" aria-label="Main">
-			{#each tabs as tab (tab.href)}
-				<a
-					href={tab.href}
-					target={tab.external ? '_blank' : undefined}
-					rel={tab.external ? 'noreferrer' : undefined}
-					aria-current={tab === activeTab ? 'page' : undefined}
-					class="flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition
-						{tab === activeTab ? 'text-accent' : 'text-fg-muted hover:text-fg'}"
-				>
-					{#if tab.icon}
-						<DynamicIcon name={tab.icon} size={15} />
-					{/if}
-					{tab.title}
-				</a>
-			{/each}
-		</nav>
-
-		<div class="flex flex-1 items-center justify-end gap-2">
-			<!-- Search (full pill on sm+, icon-only on mobile) -->
-			<button
-				type="button"
-				onclick={() => (searchState.open = true)}
-				class="hidden w-56 items-center gap-2 rounded-lg border border-border bg-surface px-3 py-1.5 text-sm text-fg-subtle transition hover:border-border-strong hover:text-fg-muted sm:flex lg:w-72"
-				aria-label="Search documentation"
-			>
-				<Search size={15} />
-				<span>Search</span>
-				<kbd
-					class="ml-auto rounded border border-border bg-bg-subtle px-1.5 py-0.5 font-mono text-[10px] text-fg-subtle"
-				>
-					⌘K
-				</kbd>
-			</button>
-			<button
-				type="button"
-				onclick={() => (searchState.open = true)}
-				class="inline-flex h-9 w-9 items-center justify-center rounded-lg text-fg-muted transition hover:bg-bg-subtle hover:text-fg sm:hidden"
-				aria-label="Search documentation"
-			>
-				<Search size={18} />
-			</button>
-
-			{#if site.github}
-				<a
-					href={site.github}
-					target="_blank"
-					rel="noreferrer"
-					class="inline-flex h-9 w-9 items-center justify-center rounded-lg text-fg-muted transition hover:bg-bg-subtle hover:text-fg"
-					aria-label="GitHub repository"
-				>
-					<!-- Lucide dropped brand marks, so the GitHub glyph is inlined. -->
-					<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-						<path
-							d="M12 1.27a11 11 0 0 0-3.48 21.46c.55.09.73-.24.73-.53v-1.85c-3.03.66-3.67-1.45-3.67-1.45-.5-1.27-1.21-1.61-1.21-1.61-.99-.68.07-.66.07-.66 1.1.08 1.67 1.13 1.67 1.13.97 1.67 2.55 1.19 3.17.91.1-.71.38-1.19.69-1.46-2.42-.28-4.96-1.21-4.96-5.38 0-1.19.42-2.16 1.13-2.92-.11-.28-.49-1.39.11-2.89 0 0 .92-.3 3.02 1.12a10.4 10.4 0 0 1 5.5 0c2.1-1.42 3.02-1.12 3.02-1.12.6 1.5.22 2.61.11 2.89.71.76 1.13 1.73 1.13 2.92 0 4.18-2.55 5.1-4.98 5.37.39.34.74 1 .74 2.03v3.01c0 .29.18.63.74.52A11 11 0 0 0 12 1.27"
-						/>
-					</svg>
-				</a>
-			{/if}
-
-			<ThemeToggle />
-		</div>
-	</div>
-</header>

package/src/lib/components/docs/PageMeta.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-	import PencilLine from '@lucide/svelte/icons/pencil-line';
-
-	let { editUrl, updated }: { editUrl?: string; updated?: string } = $props();
-
-	const formatted = $derived.by(() => {
-		if (!updated) return undefined;
-		const date = new Date(updated);
-		if (Number.isNaN(date.getTime())) return updated;
-		return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
-	});
-</script>
-
-{#if editUrl || formatted}
-	<div
-		class="mt-8 flex flex-wrap items-center justify-between gap-2 border-t border-border pt-4 text-sm text-fg-subtle"
-	>
-		{#if formatted}
-			<span>Last updated {formatted}</span>
-		{:else}
-			<span></span>
-		{/if}
-		{#if editUrl}
-			<a
-				href={editUrl}
-				target="_blank"
-				rel="noreferrer"
-				class="inline-flex items-center gap-1.5 transition hover:text-fg"
-			>
-				<PencilLine size={14} />
-				Edit this page
-			</a>
-		{/if}
-	</div>
-{/if}

package/src/lib/components/docs/PageNav.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-	import { page } from '$app/state';
-	import ChevronLeft from '@lucide/svelte/icons/chevron-left';
-	import ChevronRight from '@lucide/svelte/icons/chevron-right';
-	import type { NavLink } from '$lib/types';
-
-	let { pages }: { pages: NavLink[] } = $props();
-
-	const index = $derived(pages.findIndex((entry) => entry.href === page.url.pathname));
-	const prev = $derived(index > 0 ? pages[index - 1] : undefined);
-	const next = $derived(index >= 0 && index < pages.length - 1 ? pages[index + 1] : undefined);
-</script>
-
-{#if prev || next}
-	<nav class="mt-12 grid gap-3 border-t border-border pt-6 sm:grid-cols-2" aria-label="Pagination">
-		{#if prev}
-			<a
-				href={prev.href}
-				class="flex items-center gap-3 rounded-lg border border-border p-4 transition hover:border-border-strong hover:bg-bg-subtle"
-			>
-				<ChevronLeft size={18} class="shrink-0 text-fg-subtle" />
-				<span class="min-w-0">
-					<span class="block text-xs text-fg-subtle">Previous</span>
-					<span class="block truncate text-sm font-medium text-fg">{prev.title}</span>
-				</span>
-			</a>
-		{:else}
-			<span class="hidden sm:block"></span>
-		{/if}
-
-		{#if next}
-			<a
-				href={next.href}
-				class="flex items-center justify-end gap-3 rounded-lg border border-border p-4 text-right transition hover:border-border-strong hover:bg-bg-subtle"
-			>
-				<span class="min-w-0">
-					<span class="block text-xs text-fg-subtle">Next</span>
-					<span class="block truncate text-sm font-medium text-fg">{next.title}</span>
-				</span>
-				<ChevronRight size={18} class="shrink-0 text-fg-subtle" />
-			</a>
-		{/if}
-	</nav>
-{/if}

package/src/lib/components/docs/SearchDialog.svelte

@@ -1,182 +0,0 @@
-<script lang="ts">
-	import { goto } from '$app/navigation';
-	import { fade, scale } from 'svelte/transition';
-	import { create, insertMultiple, search } from '@orama/orama';
-	import SearchIcon from '@lucide/svelte/icons/search';
-	import FileText from '@lucide/svelte/icons/file-text';
-	import CornerDownLeft from '@lucide/svelte/icons/corner-down-left';
-	import { searchState } from '$lib/state/search.svelte';
-
-	interface Doc {
-		title: string;
-		section: string;
-		description: string;
-		href: string;
-	}
-
-	let term = $state('');
-	let results = $state<Doc[]>([]);
-	let activeIndex = $state(0);
-	let loaded = $state(false);
-	let input = $state<HTMLInputElement>();
-
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	const orama: { db: any } = { db: null };
-
-	const schema = {
-		title: 'string',
-		section: 'string',
-		description: 'string',
-		content: 'string',
-		href: 'string'
-	} as const;
-
-	async function ensureLoaded() {
-		if (orama.db) return;
-		const docs = await (await fetch('/search.json')).json();
-		orama.db = create({ schema });
-		await insertMultiple(orama.db, docs);
-		loaded = true;
-	}
-
-	$effect(() => {
-		function onKey(event: KeyboardEvent) {
-			if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
-				event.preventDefault();
-				searchState.toggle();
-			} else if (event.key === 'Escape' && searchState.open) {
-				searchState.open = false;
-			}
-		}
-		window.addEventListener('keydown', onKey);
-		return () => window.removeEventListener('keydown', onKey);
-	});
-
-	$effect(() => {
-		if (searchState.open) {
-			ensureLoaded();
-			setTimeout(() => input?.focus(), 0);
-		} else {
-			term = '';
-			results = [];
-			activeIndex = 0;
-		}
-	});
-
-	$effect(() => {
-		const query = term.trim();
-		if (!query || !loaded || !orama.db) {
-			results = [];
-			return;
-		}
-		Promise.resolve(
-			search(orama.db, {
-				term: query,
-				properties: ['title', 'description', 'content', 'section'],
-				boost: { title: 4, description: 2 },
-				tolerance: 1,
-				limit: 8
-			})
-		).then((response) => {
-			results = response.hits.map((hit: { document: Doc }) => hit.document);
-			activeIndex = 0;
-		});
-	});
-
-	function go(href: string) {
-		searchState.open = false;
-		goto(href);
-	}
-
-	function onInputKey(event: KeyboardEvent) {
-		if (event.key === 'ArrowDown') {
-			event.preventDefault();
-			activeIndex = Math.min(activeIndex + 1, results.length - 1);
-		} else if (event.key === 'ArrowUp') {
-			event.preventDefault();
-			activeIndex = Math.max(activeIndex - 1, 0);
-		} else if (event.key === 'Enter' && results[activeIndex]) {
-			event.preventDefault();
-			go(results[activeIndex].href);
-		}
-	}
-</script>
-
-{#if searchState.open}
-	<div class="fixed inset-0 z-60 flex items-start justify-center px-4 pt-[12vh]">
-		<button
-			type="button"
-			class="absolute inset-0 cursor-default bg-black/50 backdrop-blur-sm"
-			aria-label="Close search"
-			onclick={() => (searchState.open = false)}
-			transition:fade={{ duration: 120 }}
-		></button>
-
-		<div
-			class="relative w-full max-w-xl overflow-hidden rounded-xl border border-border bg-surface shadow-2xl"
-			transition:scale={{ duration: 130, start: 0.97 }}
-		>
-			<div class="flex items-center gap-3 border-b border-border px-4">
-				<SearchIcon size={18} class="shrink-0 text-fg-subtle" />
-				<input
-					bind:this={input}
-					bind:value={term}
-					onkeydown={onInputKey}
-					type="text"
-					placeholder="Search documentation…"
-					class="w-full border-0 bg-transparent py-3.5 text-sm text-fg shadow-none outline-none placeholder:text-fg-subtle focus:border-0 focus:ring-0 focus:outline-none"
-				/>
-				<kbd
-					class="rounded border border-border bg-bg-subtle px-1.5 py-0.5 font-mono text-[10px] text-fg-subtle"
-				>
-					Esc
-				</kbd>
-			</div>
-
-			<div class="max-h-[60vh] overflow-y-auto p-2">
-				{#if term.trim() && results.length === 0}
-					<p class="px-3 py-8 text-center text-sm text-fg-subtle">
-						No results for “{term.trim()}”.
-					</p>
-				{:else if !term.trim()}
-					<p class="px-3 py-8 text-center text-sm text-fg-subtle">
-						Start typing to search the docs.
-					</p>
-				{:else}
-					<ul class="flex flex-col gap-0.5">
-						{#each results as result, index (result.href)}
-							<li>
-								<button
-									type="button"
-									onmouseenter={() => (activeIndex = index)}
-									onclick={() => go(result.href)}
-									class="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left transition
-										{activeIndex === index ? 'bg-accent/10' : ''}"
-								>
-									<FileText size={16} class="shrink-0 text-fg-subtle" />
-									<span class="min-w-0 flex-1">
-										<span class="block truncate text-sm font-medium text-fg">{result.title}</span>
-										<span class="block truncate text-xs text-fg-subtle">
-											{result.section}{result.description ? ` · ${result.description}` : ''}
-										</span>
-									</span>
-									{#if activeIndex === index}
-										<CornerDownLeft size={14} class="shrink-0 text-fg-subtle" />
-									{/if}
-								</button>
-							</li>
-						{/each}
-					</ul>
-				{/if}
-			</div>
-
-			<div
-				class="flex items-center gap-3 border-t border-border px-4 py-2 text-[11px] text-fg-subtle"
-			>
-				<span><kbd class="font-mono">↑↓</kbd> navigate</span>
-				<span><kbd class="font-mono">↵</kbd> select</span>
-				<span class="ml-auto">Search by Orama</span>
-			</div>
-		</div>
-	</div>
-{/if}

package/src/lib/components/docs/Sidebar.svelte

@@ -1,85 +0,0 @@
-<script lang="ts">
-	import { page } from '$app/state';
-	import type { Dropdown, NavEntry, NavSection, TopNavLink } from '$lib/types';
-	import { activeFor } from '$lib/nav-match';
-	import DynamicIcon from '$lib/components/DynamicIcon.svelte';
-	import SidebarLink from './SidebarLink.svelte';
-	import SidebarGroup from './SidebarGroup.svelte';
-	import SidebarDropdown from './SidebarDropdown.svelte';
-
-	let { sections, dropdowns }: { sections: NavSection[]; dropdowns?: Dropdown[] } = $props();
-
-	const activeDropdown = $derived(
-		dropdowns && dropdowns.length
-			? (activeFor(page.url.pathname, dropdowns) ?? dropdowns[0])
-			: undefined
-	);
-
-	const tabs = $derived(activeDropdown?.tabs ?? []);
-	const activeTab = $derived(
-		tabs.length ? (activeFor(page.url.pathname, tabs) ?? tabs[0]) : undefined
-	);
-
-	function firstHref(entries: NavEntry[]): string | undefined {
-		for (const entry of entries) {
-			const href = 'href' in entry ? entry.href : firstHref(entry.items);
-			if (href) return href;
-		}
-		return undefined;
-	}
-
-	function pruneByTab(entries: NavEntry[], tabList: TopNavLink[], target: TopNavLink): NavEntry[] {
-		const result: NavEntry[] = [];
-		for (const entry of entries) {
-			if ('href' in entry) {
-				if (activeFor(entry.href, tabList) === target) result.push(entry);
-			} else {
-				const items = pruneByTab(entry.items, tabList, target);
-				if (items.length) result.push({ ...entry, items });
-			}
-		}
-		return result;
-	}
-
-	const visibleSections = $derived.by(() => {
-		let result = sections;
-		if (dropdowns && activeDropdown) {
-			result = result.filter((section) => {
-				const href = firstHref(section.items);
-				return !href || activeFor(href, dropdowns) === activeDropdown;
-			});
-		}
-		if (tabs.length && activeTab) {
-			result = result
-				.map((section) => ({ ...section, items: pruneByTab(section.items, tabs, activeTab) }))
-				.filter((section) => section.items.length);
-		}
-		return result;
-	});
-</script>
-
-<nav class="flex flex-col gap-6" aria-label="Documentation">
-	{#if dropdowns && dropdowns.length && activeDropdown}
-		<SidebarDropdown {dropdowns} active={activeDropdown} />
-	{/if}
-
-	{#each visibleSections as section (section.title)}
-		<div class="flex flex-col gap-0.5">
-			<h2
-				class="mb-1 flex items-center gap-2 px-3 text-xs font-semibold tracking-wide text-fg-subtle uppercase"
-			>
-				{#if section.icon}
-					<DynamicIcon name={section.icon} size={14} />
-				{/if}
-				{section.title}
-			</h2>
-			{#each section.items as entry ('href' in entry ? entry.href : entry.title)}
-				{#if 'href' in entry}
-					<SidebarLink item={entry} />
-				{:else}
-					<SidebarGroup group={entry} />
-				{/if}
-			{/each}
-		</div>
-	{/each}
-</nav>

package/src/lib/components/docs/SidebarDropdown.svelte

@@ -1,56 +0,0 @@
-<script lang="ts">
-	import { fade } from 'svelte/transition';
-	import ChevronDown from '@lucide/svelte/icons/chevron-down';
-	import Check from '@lucide/svelte/icons/check';
-	import DynamicIcon from '$lib/components/DynamicIcon.svelte';
-	import type { Dropdown } from '$lib/types';
-
-	let { dropdowns, active }: { dropdowns: Dropdown[]; active: Dropdown } = $props();
-
-	let open = $state(false);
-</script>
-
-<div class="relative mb-5">
-	<button
-		type="button"
-		onclick={() => (open = !open)}
-		aria-expanded={open}
-		class="flex w-full items-center gap-2.5 rounded-lg border border-border bg-surface px-3 py-2.5 text-sm font-medium text-fg transition hover:border-border-strong"
-	>
-		{#if active.icon}
-			<DynamicIcon name={active.icon} size={16} class="text-fg-muted" />
-		{/if}
-		<span class="flex-1 text-left">{active.label}</span>
-		<ChevronDown size={15} class="text-fg-subtle transition-transform {open ? 'rotate-180' : ''}" />
-	</button>
-
-	{#if open}
-		<button
-			type="button"
-			class="fixed inset-0 z-40 cursor-default"
-			aria-label="Close"
-			onclick={() => (open = false)}
-		></button>
-		<div
-			class="absolute right-0 left-0 z-50 mt-1.5 overflow-hidden rounded-lg border border-border bg-surface-raised p-1 shadow-lg"
-			transition:fade={{ duration: 100 }}
-		>
-			{#each dropdowns as dropdown (dropdown.label)}
-				<a
-					href={dropdown.href}
-					onclick={() => (open = false)}
-					class="flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm transition hover:bg-bg-subtle
-						{dropdown === active ? 'font-medium text-fg' : 'text-fg-muted'}"
-				>
-					{#if dropdown.icon}
-						<DynamicIcon name={dropdown.icon} size={16} />
-					{/if}
-					<span class="flex-1">{dropdown.label}</span>
-					{#if dropdown === active}
-						<Check size={15} class="text-fg-subtle" />
-					{/if}
-				</a>
-			{/each}
-		</div>
-	{/if}
-</div>

package/src/lib/components/docs/SidebarFooterLinks.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-	import ArrowUpRight from '@lucide/svelte/icons/arrow-up-right';
-
-	let { links }: { links: { title: string; href: string }[] } = $props();
-</script>
-
-<div class="flex flex-col gap-0.5 border-t border-border pt-3">
-	{#each links as link (link.href)}
-		<a
-			href={link.href}
-			target="_blank"
-			rel="noreferrer"
-			class="group flex items-center justify-between gap-2 rounded-md px-3 py-1.5 text-sm text-fg-muted transition hover:bg-bg-subtle hover:text-fg"
-		>
-			<span>{link.title}</span>
-			<ArrowUpRight size={14} class="text-fg-subtle transition group-hover:text-fg-muted" />
-		</a>
-	{/each}
-</div>

package/src/lib/components/docs/SidebarGroup.svelte

@@ -1,54 +0,0 @@
-<script lang="ts">
-	import { untrack } from 'svelte';
-	import { slide } from 'svelte/transition';
-	import { page } from '$app/state';
-	import ChevronRight from '@lucide/svelte/icons/chevron-right';
-	import type { NavEntry, NavGroup } from '$lib/types';
-	import DynamicIcon from '$lib/components/DynamicIcon.svelte';
-	import SidebarLink from './SidebarLink.svelte';
-	import Self from './SidebarGroup.svelte';
-
-	let { group, depth = 0 }: { group: NavGroup; depth?: number } = $props();
-
-	function containsActive(items: NavEntry[], path: string): boolean {
-		return items.some((entry) =>
-			'href' in entry ? entry.href === path : containsActive(entry.items, path)
-		);
-	}
-
-	// Open when the meta sets `defaultOpen`, or when a descendant is the current
-	// page (so the active page is never hidden).
-	let open = $state(
-		untrack(() => group.defaultOpen === true || containsActive(group.items, page.url.pathname))
-	);
-
-	const key = (entry: NavEntry) => ('href' in entry ? entry.href : entry.title);
-</script>
-
-<div>
-	<button
-		type="button"
-		onclick={() => (open = !open)}
-		aria-expanded={open}
-		style="padding-left: {0.75 + depth * 0.75}rem"
-		class="group flex w-full items-center gap-2.5 rounded-md py-1.5 pr-3 text-sm font-medium text-fg-muted transition hover:bg-bg-subtle hover:text-fg"
-	>
-		{#if group.icon}
-			<DynamicIcon name={group.icon} size={16} class="text-fg-subtle" />
-		{/if}
-		<span class="flex-1 text-left">{group.title}</span>
-		<ChevronRight size={14} class="text-fg-subtle transition-transform {open ? 'rotate-90' : ''}" />
-	</button>
-
-	{#if open}
-		<div transition:slide={{ duration: 150 }} class="mt-0.5 flex flex-col gap-0.5">
-			{#each group.items as entry (key(entry))}
-				{#if 'href' in entry}
-					<SidebarLink item={entry} depth={depth + 1} />
-				{:else}
-					<Self group={entry} depth={depth + 1} />
-				{/if}
-			{/each}
-		</div>
-	{/if}
-</div>