@aureuma/svelta 0.1.1 → 0.4.0

package/packages/core/dist/components/blog/ShareButtons.svelte

@@ -1,18 +1,53 @@
 <script lang="ts">
 	import { BROWSER } from 'esm-env';
+	import type { SharePlatform } from '../../types/blog';
+
+	type ShareLinkPlatform = Exclude<SharePlatform, 'copy'>;
 
 	export let title: string;
 	export let url: string;
 	export let label: string = 'Share this article';
 	export let testId: string | undefined = undefined;
+	export let platforms: SharePlatform[] = ['x', 'linkedin', 'facebook'];
 
 	let copied = false;
 
+	const shareBuilders: Record<ShareLinkPlatform, (pageUrl: string, pageTitle: string) => string> = {
+		x: (pageUrl, pageTitle) =>
+			`https://twitter.com/intent/tweet?text=${encodeURIComponent(pageTitle)}&url=${encodeURIComponent(pageUrl)}`,
+		linkedin: (pageUrl) =>
+			`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(pageUrl)}`,
+		facebook: (pageUrl) =>
+			`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(pageUrl)}`,
+		reddit: (pageUrl, pageTitle) =>
+			`https://www.reddit.com/submit?url=${encodeURIComponent(pageUrl)}&title=${encodeURIComponent(pageTitle)}`,
+		hackernews: (pageUrl, pageTitle) =>
+			`https://news.ycombinator.com/submitlink?u=${encodeURIComponent(pageUrl)}&t=${encodeURIComponent(pageTitle)}`
+	};
+
+	const shareLabels: Record<ShareLinkPlatform, string> = {
+		x: 'Share on X',
+		linkedin: 'Share on LinkedIn',
+		facebook: 'Share on Facebook',
+		reddit: 'Share on Reddit',
+		hackernews: 'Share on Hacker News'
+	};
+
 	function openShare(href: string) {
 		if (!BROWSER) return;
 		window.open(href, '_blank', 'noopener,noreferrer');
 	}
 
+	function isShareLinkPlatform(platform: SharePlatform): platform is ShareLinkPlatform {
+		return platform in shareBuilders;
+	}
+
+	function uniquePlatforms(input: SharePlatform[]): SharePlatform[] {
+		const deduped = new Set<SharePlatform>();
+		for (const platform of input) deduped.add(platform);
+		return Array.from(deduped);
+	}
+
 	async function copyLink() {
 		if (!BROWSER) return;
 		try {
@@ -20,7 +55,6 @@
 			copied = true;
 			window.setTimeout(() => (copied = false), 1200);
 		} catch {
-			// Fallback for older browsers.
 			const ta = document.createElement('textarea');
 			ta.value = url;
 			ta.style.position = 'fixed';
@@ -34,60 +68,59 @@
 		}
 	}
 
-	$: encodedUrl = encodeURIComponent(url);
-	$: encodedTitle = encodeURIComponent(title);
+	$: normalizedPlatforms = uniquePlatforms(platforms);
+	$: linkPlatforms = normalizedPlatforms.filter(isShareLinkPlatform);
 </script>
 
 <div data-testid={testId}>
 	<p class="text-xs font-mono uppercase tracking-[0.6px] text-text-muted">{label}</p>
 	<div class="mt-3 flex flex-wrap gap-2">
-		<button
-			type="button"
-			class="inline-flex size-8 items-center justify-center rounded-full border border-border-soft/10 bg-background-soft text-text-sub transition hover:bg-background-main/60 hover:text-text-main"
-			on:click={() =>
-				openShare(`https://twitter.com/intent/tweet?text=${encodedTitle}&url=${encodedUrl}`)}
-			aria-label="Share on X"
-		>
-			<svg viewBox="0 0 24 24" class="size-4" aria-hidden="true">
-				<path
-					fill="currentColor"
-					d="M18.9 2H22l-6.8 7.8L23 22h-6.8l-5.3-6.9L4.9 22H2l7.4-8.6L1.5 2h7l4.8 6.2L18.9 2Zm-1.2 18h1.7L7.8 3.9H6.1L17.7 20Z"
-				/>
-			</svg>
-		</button>
-
-		<button
-			type="button"
-			class="inline-flex size-8 items-center justify-center rounded-full border border-border-soft/10 bg-background-soft text-text-sub transition hover:bg-background-main/60 hover:text-text-main"
-			on:click={() =>
-				openShare(`https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`)}
-			aria-label="Share on LinkedIn"
-		>
-			<svg viewBox="0 0 24 24" class="size-4" aria-hidden="true">
-				<path
-					fill="currentColor"
-					d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5ZM0.5 23.5h4V7.98h-4V23.5ZM8 7.98h3.84v2.12h.05c.53-1 1.83-2.12 3.77-2.12 4.03 0 4.78 2.65 4.78 6.1v9.42h-4v-8.36c0-1.99-.03-4.55-2.77-4.55-2.77 0-3.2 2.16-3.2 4.4v8.5H8V7.98Z"
-				/>
-			</svg>
-		</button>
-
-		<button
-			type="button"
-			class="inline-flex size-8 items-center justify-center rounded-full border border-border-soft/10 bg-background-soft text-text-sub transition hover:bg-background-main/60 hover:text-text-main"
-			on:click={() => openShare(`https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`)}
-			aria-label="Share on Facebook"
-		>
-			<svg viewBox="0 0 24 24" class="size-4" aria-hidden="true">
-				<path
-					fill="currentColor"
-					d="M13.5 22v-8h2.7l.4-3H13.5V9.1c0-.9.3-1.6 1.7-1.6h1.6V4.8c-.3 0-1.4-.1-2.7-.1-2.7 0-4.5 1.6-4.5 4.6V11H7v3h2.6v8h3.9Z"
-				/>
-			</svg>
-		</button>
+		{#each linkPlatforms as platform (platform)}
+			<button
+				type="button"
+				class="inline-flex size-8 items-center justify-center rounded-full border border-border-soft/10 bg-background-soft/45 text-text-sub/65 transition-all duration-200 hover:bg-background-main/75 hover:text-text-main"
+				on:click={() => openShare(shareBuilders[platform](url, title))}
+				aria-label={shareLabels[platform]}
+			>
+				{#if platform === 'x'}
+					<svg viewBox="0 0 24 24" class="size-4" aria-hidden="true">
+						<path
+							fill="currentColor"
+							d="M18.9 2H22l-6.8 7.8L23 22h-6.8l-5.3-6.9L4.9 22H2l7.4-8.6L1.5 2h7l4.8 6.2L18.9 2Zm-1.2 18h1.7L7.8 3.9H6.1L17.7 20Z"
+						/>
+					</svg>
+				{:else if platform === 'linkedin'}
+					<svg viewBox="0 0 24 24" class="size-4" aria-hidden="true">
+						<path
+							fill="currentColor"
+							d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5ZM0.5 23.5h4V7.98h-4V23.5ZM8 7.98h3.84v2.12h.05c.53-1 1.83-2.12 3.77-2.12 4.03 0 4.78 2.65 4.78 6.1v9.42h-4v-8.36c0-1.99-.03-4.55-2.77-4.55-2.77 0-3.2 2.16-3.2 4.4v8.5H8V7.98Z"
+						/>
+					</svg>
+				{:else if platform === 'facebook'}
+					<svg viewBox="0 0 24 24" class="size-4" aria-hidden="true">
+						<path
+							fill="currentColor"
+							d="M13.5 22v-8h2.7l.4-3H13.5V9.1c0-.9.3-1.6 1.7-1.6h1.6V4.8c-.3 0-1.4-.1-2.7-.1-2.7 0-4.5 1.6-4.5 4.6V11H7v3h2.6v8h3.9Z"
+						/>
+					</svg>
+				{:else if platform === 'reddit'}
+					<svg viewBox="0 0 24 24" class="size-4" aria-hidden="true">
+						<path
+							fill="currentColor"
+							d="M14.8 14.4a1.2 1.2 0 1 0 1.2 1.2 1.2 1.2 0 0 0-1.2-1.2Zm-5.6 0a1.2 1.2 0 1 0 1.2 1.2 1.2 1.2 0 0 0-1.2-1.2ZM12 21c3.9 0 7-2.2 7-4.9a3 3 0 0 0-.9-2.1 2 2 0 1 0-3.2-2.2 10.6 10.6 0 0 0-5.8 0 2 2 0 1 0-3.2 2.2A3 3 0 0 0 5 16.1C5 18.8 8.1 21 12 21Zm0-1.6c-3 0-5.4-1.5-5.4-3.3s2.4-3.3 5.4-3.3 5.4 1.5 5.4 3.3-2.4 3.3-5.4 3.3Zm2.6-2.3a.8.8 0 1 1 0 1.6h-5.2a.8.8 0 1 1 0-1.6h5.2Z"
+						/>
+					</svg>
+				{:else if platform === 'hackernews'}
+					<svg viewBox="0 0 24 24" class="size-4" aria-hidden="true">
+						<path fill="currentColor" d="M3 3h18v18H3V3Zm6.8 4.2 2.2 4 2.2-4h2l-3.1 5.4V17h-2v-4.4L7.8 7.2h2Z" />
+					</svg>
+				{/if}
+			</button>
+		{/each}
 
 		<button
 			type="button"
-			class="inline-flex size-8 items-center justify-center rounded-full border border-border-soft/10 bg-background-soft text-text-sub transition hover:bg-background-main/60 hover:text-text-main"
+			class="inline-flex size-8 items-center justify-center rounded-full border border-border-soft/10 bg-background-soft/45 text-text-sub/65 transition-all duration-200 hover:bg-background-main/75 hover:text-text-main"
 			on:click={copyLink}
 			aria-label="Copy link"
 		>
@@ -111,3 +144,4 @@
 		<p class="mt-2 text-xs font-mono uppercase tracking-[0.6px] text-brand">Copied</p>
 	{/if}
 </div>
+

package/packages/core/dist/components/blog/ShareButtons.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { SharePlatform } from '../../types/blog';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -16,6 +17,7 @@ declare const ShareButtons: $$__sveltets_2_IsomorphicComponent<{
     url: string;
     label?: string;
     testId?: string | undefined;
+    platforms?: SharePlatform[];
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/packages/core/dist/components/blog/TagTabs.svelte

@@ -1,32 +1,85 @@
 <script lang="ts">
-	import type { BlogCategory } from '../../types/blog';
+	import { onMount, tick } from 'svelte';
 
-	export let categories: BlogCategory[];
+	type TagTab = { label: string; slug: string };
+	export let categories: TagTab[];
 	export let selected: string; // "" means all
 	export let onSelect: (slug: string) => void;
 	$: items = [{ label: 'All articles', slug: '' }, ...categories];
+
+	let railEl: HTMLDivElement | null = null;
+	let buttonEls: HTMLButtonElement[] = [];
+	let indicatorLeft = 0;
+	let indicatorWidth = 0;
+	let indicatorReady = false;
+
+	async function syncIndicator(scroll = false) {
+		await tick();
+		const index = Math.max(
+			0,
+			items.findIndex((item) => item.slug === selected)
+		);
+		const button = buttonEls[index];
+		if (!button) {
+			indicatorReady = false;
+			return;
+		}
+
+		indicatorLeft = button.offsetLeft;
+		indicatorWidth = button.offsetWidth;
+		indicatorReady = true;
+
+		if (scroll) {
+			button.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+		}
+	}
+
+	$: {
+		void selected;
+		void items;
+		syncIndicator(true);
+	}
+
+	onMount(() => {
+		syncIndicator(false);
+		const ro = new ResizeObserver(() => syncIndicator(false));
+		if (railEl) ro.observe(railEl);
+		return () => ro.disconnect();
+	});
 </script>
 
 <div class="relative" data-testid="blog-tags">
 	<div
-		class="fade-mask-x no-scrollbar flex gap-2 overflow-x-auto py-2 md:flex-wrap md:overflow-visible md:[-webkit-mask-image:none] md:[mask-image:none]"
+		class="fade-mask-x no-scrollbar overflow-x-auto py-2"
 		role="tablist"
 		aria-label="Blog categories"
 	>
-		{#each items as item (item.slug)}
-			<button
-				type="button"
-				role="tab"
-				aria-selected={selected === item.slug}
-				class="h-[31px] whitespace-nowrap rounded-full border px-3 text-xs font-mono uppercase tracking-[0.6px] transition
-					hover:bg-background-main/60
-					{selected === item.slug
-						? 'border-border-soft/15 bg-background-main text-text-main'
-						: 'border-border-soft/10 bg-background-soft text-text-sub'}"
-				on:click={() => onSelect(item.slug)}
-			>
-				{item.label}
-			</button>
-		{/each}
+		<div bind:this={railEl} class="relative inline-flex min-w-max items-center gap-1 whitespace-nowrap pr-3">
+			{#if indicatorReady}
+				<span
+					class="pointer-events-none absolute bottom-[2px] top-[2px] z-[0] rounded-full border border-border-soft/15 bg-background-soft/90 shadow-[0_10px_20px_-14px_rgba(8,14,24,0.75)] transition-[left,width] duration-500 ease-[cubic-bezier(0.2,0.9,0.2,1)]"
+					style={`left:${indicatorLeft}px;width:${indicatorWidth}px;`}
+				></span>
+				<span
+					class="pointer-events-none absolute bottom-[3px] top-[3px] z-[0] rounded-full bg-background-main/60 blur-[7px] transition-[left,width] duration-500 ease-[cubic-bezier(0.2,0.9,0.2,1)]"
+					style={`left:${indicatorLeft}px;width:${indicatorWidth}px;`}
+				></span>
+			{/if}
+
+			{#each items as item, index (item.slug)}
+				<button
+					bind:this={buttonEls[index]}
+					type="button"
+					role="tab"
+					aria-selected={selected === item.slug}
+					class="relative z-[2] h-[30px] whitespace-nowrap px-3 text-xs font-mono uppercase tracking-[0.7px] transition-colors duration-200
+						hover:text-text-main
+						{selected === item.slug ? 'text-text-main' : 'text-text-sub'}"
+					on:click={() => onSelect(item.slug)}
+				>
+					{item.label}
+				</button>
+			{/each}
+		</div>
 	</div>
 </div>

package/packages/core/dist/components/blog/TagTabs.svelte.d.ts

@@ -1,4 +1,3 @@
-import type { BlogCategory } from '../../types/blog';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -13,7 +12,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const TagTabs: $$__sveltets_2_IsomorphicComponent<{
-    categories: BlogCategory[];
+    categories: {
+        label: string;
+        slug: string;
+    }[];
     selected: string;
     onSelect: (slug: string) => void;
 }, {

package/packages/core/dist/components/docs/DocsPager.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { DocsPage } from '../../types/docs';
+
+	export let previous: DocsPage | null = null;
+	export let next: DocsPage | null = null;
+</script>
+
+<div class="mt-12 grid grid-cols-1 gap-3 border-t border-border-soft/10 pt-6 md:grid-cols-2" data-testid="docs-pager">
+	<a
+		href={previous ? `/docs/${previous.slug}` : '#'}
+		class="rounded-2xl border border-border-soft/10 bg-background-soft p-4 transition hover:bg-background-main/60 {previous
+			? ''
+			: 'pointer-events-none opacity-45'}"
+	>
+		<p class="text-[11px] font-mono uppercase tracking-[0.6px] text-text-muted">Previous</p>
+		<p class="mt-1 text-sm font-medium text-text-main">{previous?.navTitle || 'None'}</p>
+	</a>
+
+	<a
+		href={next ? `/docs/${next.slug}` : '#'}
+		class="rounded-2xl border border-border-soft/10 bg-background-soft p-4 text-left transition hover:bg-background-main/60 {next
+			? ''
+			: 'pointer-events-none opacity-45'}"
+	>
+		<p class="text-[11px] font-mono uppercase tracking-[0.6px] text-text-muted">Next</p>
+		<p class="mt-1 text-sm font-medium text-text-main">{next?.navTitle || 'None'}</p>
+	</a>
+</div>

package/packages/core/dist/{theme/ThemeSwitcher.svelte.d.ts → components/docs/DocsPager.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { ThemeController } from './store';
+import type { DocsPage } from '../../types/docs';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,10 +12,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ThemeSwitcher: $$__sveltets_2_IsomorphicComponent<{
-    controller: ThemeController;
+declare const DocsPager: $$__sveltets_2_IsomorphicComponent<{
+    previous?: DocsPage | null;
+    next?: DocsPage | null;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type ThemeSwitcher = InstanceType<typeof ThemeSwitcher>;
-export default ThemeSwitcher;
+type DocsPager = InstanceType<typeof DocsPager>;
+export default DocsPager;

package/packages/core/dist/components/docs/DocsSectionGrid.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { DocsSidebarSection } from '../../types/docs';
+
+	export let sections: DocsSidebarSection[] = [];
+</script>
+
+<div class="grid grid-cols-1 gap-6 md:grid-cols-2" data-testid="docs-section-grid">
+	{#each sections as section (section.id)}
+		<section class="rounded-3xl border border-border-soft/10 bg-background-soft p-6">
+			<p class="text-xs font-mono uppercase tracking-[0.6px] text-text-muted">{section.label}</p>
+			<ul class="mt-4 space-y-2">
+				{#each section.pages as page (page.slug)}
+					<li>
+						<a
+							href={`/docs/${page.slug}`}
+							class="inline-flex items-center gap-2 text-sm text-text-sub transition hover:text-text-main"
+						>
+							<span class="inline-block size-1.5 rounded-full bg-brand"></span>
+							{page.navTitle}
+						</a>
+					</li>
+				{/each}
+			</ul>
+		</section>
+	{/each}
+</div>

package/packages/core/dist/components/docs/DocsSectionGrid.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { DocsSidebarSection } from '../../types/docs';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DocsSectionGrid: $$__sveltets_2_IsomorphicComponent<{
+    sections?: DocsSidebarSection[];
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DocsSectionGrid = InstanceType<typeof DocsSectionGrid>;
+export default DocsSectionGrid;

package/packages/core/dist/components/docs/DocsShell.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { DocsSidebarSection } from '../../types/docs';
+	import Container from '../blog/Container.svelte';
+	import DocsSidebar from './DocsSidebar.svelte';
+
+	export let sections: DocsSidebarSection[] = [];
+	export let currentSlug = '';
+</script>
+
+<Container>
+	<div class="grid grid-cols-1 gap-10 pb-24 pt-12 lg:grid-cols-[260px_minmax(0,1fr)] lg:gap-14">
+		<aside class="lg:sticky lg:top-20 lg:self-start">
+			<DocsSidebar {sections} {currentSlug} />
+		</aside>
+		<div class="min-w-0">
+			<slot />
+		</div>
+	</div>
+</Container>

package/packages/core/dist/components/docs/DocsShell.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { DocsSidebarSection } from '../../types/docs';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const DocsShell: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    sections?: DocsSidebarSection[];
+    currentSlug?: string;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type DocsShell = InstanceType<typeof DocsShell>;
+export default DocsShell;

package/packages/core/dist/components/docs/DocsSidebar.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { DocsSidebarSection } from '../../types/docs';
+
+	export let sections: DocsSidebarSection[] = [];
+	export let currentSlug = '';
+</script>
+
+<nav aria-label="Documentation" class="space-y-8" data-testid="docs-sidebar">
+	{#each sections as section (section.id)}
+		<section>
+			<h2 class="text-[11px] font-mono uppercase tracking-[0.6px] text-text-muted">
+				{section.label}
+			</h2>
+			<ul class="mt-3 space-y-1">
+				{#each section.pages as page (page.slug)}
+					<li>
+						<a
+							href={`/docs/${page.slug}`}
+							class="block rounded-lg px-3 py-2 text-sm transition hover:bg-background-soft hover:text-text-main
+								{currentSlug === page.slug
+									? 'bg-background-soft text-text-main'
+									: 'text-text-sub'}"
+						>
+							{page.navTitle}
+						</a>
+					</li>
+				{/each}
+			</ul>
+		</section>
+	{/each}
+</nav>

package/packages/core/dist/components/docs/DocsSidebar.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { DocsSidebarSection } from '../../types/docs';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DocsSidebar: $$__sveltets_2_IsomorphicComponent<{
+    sections?: DocsSidebarSection[];
+    currentSlug?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DocsSidebar = InstanceType<typeof DocsSidebar>;
+export default DocsSidebar;

package/packages/core/dist/experience/index.d.ts

@@ -0,0 +1,9 @@
+import type { ExperienceCatalog, ExperienceDefinition, ExperienceKind } from '../types/experience';
+import { createBlogPatternConfig, createDocsPatternConfig, createSveltaPatternConfig, DEFAULT_BLOG_PATTERN_CONFIG, DEFAULT_DOCS_PATTERN_CONFIG, resolveDocsEditUrl } from './patterns';
+export type { ExperienceCatalog, ExperienceDefinition, ExperienceKind, SveltaBlogPatternConfig, SveltaDocsPatternConfig, SveltaNavItem, SveltaPatternConfig } from '../types/experience';
+export { createBlogPatternConfig, createDocsPatternConfig, createSveltaPatternConfig, DEFAULT_BLOG_PATTERN_CONFIG, DEFAULT_DOCS_PATTERN_CONFIG, resolveDocsEditUrl };
+export declare function parseExperienceKind(input: string | null | undefined, fallback?: ExperienceKind): ExperienceKind;
+export declare function createExperienceCatalog(opts?: {
+    defaultKind?: ExperienceKind;
+    overrides?: Partial<Record<ExperienceKind, Partial<ExperienceDefinition>>>;
+}): ExperienceCatalog;

package/packages/core/dist/experience/index.js

@@ -0,0 +1,45 @@
+import { createBlogPatternConfig, createDocsPatternConfig, createSveltaPatternConfig, DEFAULT_BLOG_PATTERN_CONFIG, DEFAULT_DOCS_PATTERN_CONFIG, resolveDocsEditUrl } from './patterns';
+export { createBlogPatternConfig, createDocsPatternConfig, createSveltaPatternConfig, DEFAULT_BLOG_PATTERN_CONFIG, DEFAULT_DOCS_PATTERN_CONFIG, resolveDocsEditUrl };
+const DEFAULTS = {
+    docs: {
+        kind: 'docs',
+        label: 'Documentation',
+        description: 'Structured guides with sections, side navigation, and next/previous links.',
+        href: '/docs'
+    },
+    blog: {
+        kind: 'blog',
+        label: 'Blog',
+        description: 'Editorial posts with categories, summaries, and RSS distribution.',
+        href: '/blog'
+    }
+};
+export function parseExperienceKind(input, fallback = 'docs') {
+    if (input === 'docs' || input === 'blog')
+        return input;
+    return fallback;
+}
+export function createExperienceCatalog(opts) {
+    const defaultKind = opts?.defaultKind ?? 'docs';
+    const docs = {
+        ...DEFAULTS.docs,
+        ...(opts?.overrides?.docs ?? {}),
+        kind: 'docs'
+    };
+    const blog = {
+        ...DEFAULTS.blog,
+        ...(opts?.overrides?.blog ?? {}),
+        kind: 'blog'
+    };
+    const byKind = { docs, blog };
+    const items = [docs, blog];
+    return {
+        defaultKind,
+        items,
+        byKind,
+        resolve(kind) {
+            const parsed = parseExperienceKind(kind, defaultKind);
+            return byKind[parsed];
+        }
+    };
+}

package/packages/core/dist/experience/patterns.d.ts

@@ -0,0 +1,26 @@
+import type { SveltaBlogPatternConfig, SveltaDocsPatternConfig, SveltaPatternConfig } from '../types/experience';
+type DocsPatternOverrides = Partial<Omit<SveltaDocsPatternConfig, 'kind' | 'navigation' | 'search' | 'toc' | 'feedback'>> & {
+    navigation?: Partial<SveltaDocsPatternConfig['navigation']> & {
+        header?: SveltaDocsPatternConfig['navigation']['header'];
+        footer?: SveltaDocsPatternConfig['navigation']['footer'];
+    };
+    search?: Partial<SveltaDocsPatternConfig['search']>;
+    toc?: Partial<SveltaDocsPatternConfig['toc']>;
+    feedback?: Partial<SveltaDocsPatternConfig['feedback']>;
+};
+type BlogPatternOverrides = Partial<Omit<SveltaBlogPatternConfig, 'kind' | 'navigation'>> & {
+    navigation?: Partial<SveltaBlogPatternConfig['navigation']> & {
+        header?: SveltaBlogPatternConfig['navigation']['header'];
+        footer?: SveltaBlogPatternConfig['navigation']['footer'];
+    };
+};
+export declare const DEFAULT_DOCS_PATTERN_CONFIG: SveltaDocsPatternConfig;
+export declare const DEFAULT_BLOG_PATTERN_CONFIG: SveltaBlogPatternConfig;
+export declare function createDocsPatternConfig(overrides?: DocsPatternOverrides): SveltaDocsPatternConfig;
+export declare function createBlogPatternConfig(overrides?: BlogPatternOverrides): SveltaBlogPatternConfig;
+export declare function createSveltaPatternConfig(overrides?: {
+    docs?: DocsPatternOverrides;
+    blog?: BlogPatternOverrides;
+}): SveltaPatternConfig;
+export declare function resolveDocsEditUrl(config: SveltaDocsPatternConfig, slug: string): string;
+export {};