svelte-docsmith 0.1.0

package/dist/themes/nord.css

@@ -0,0 +1,79 @@
+/*
+ * svelte-docsmith theme — Nord. A cool, desaturated arctic palette; its dark
+ * mode is the signature mid-slate "polar night", not near-black.
+ *
+ *   @import 'svelte-docsmith/theme.css';
+ *   @import 'svelte-docsmith/themes/nord.css';
+ */
+
+:root {
+	--radius: 0.5rem;
+	--background: oklch(0.96 0.006 250);
+	--foreground: oklch(0.32 0.02 255);
+	--card: oklch(0.98 0.004 250);
+	--card-foreground: oklch(0.32 0.02 255);
+	--popover: oklch(0.98 0.004 250);
+	--popover-foreground: oklch(0.32 0.02 255);
+	--primary: oklch(0.55 0.07 245);
+	--primary-foreground: oklch(0.98 0.005 250);
+	--secondary: oklch(0.92 0.008 250);
+	--secondary-foreground: oklch(0.4 0.02 250);
+	--muted: oklch(0.93 0.006 250);
+	--muted-foreground: oklch(0.5 0.015 250);
+	--accent: oklch(0.88 0.03 220);
+	--accent-foreground: oklch(0.4 0.05 235);
+	--border: oklch(0.88 0.008 250);
+	--input: oklch(0.88 0.008 250);
+	--ring: oklch(0.55 0.07 245);
+	--destructive: oklch(0.6 0.13 25);
+	--destructive-foreground: oklch(0.98 0.005 250);
+	--chart-1: oklch(0.6 0.07 245);
+	--chart-2: oklch(0.68 0.08 200);
+	--chart-3: oklch(0.7 0.09 150);
+	--chart-4: oklch(0.74 0.1 90);
+	--chart-5: oklch(0.65 0.12 30);
+	--sidebar: oklch(0.93 0.008 250);
+	--sidebar-foreground: oklch(0.32 0.02 255);
+	--sidebar-primary: oklch(0.55 0.07 245);
+	--sidebar-primary-foreground: oklch(0.98 0.005 250);
+	--sidebar-accent: oklch(0.88 0.03 220);
+	--sidebar-accent-foreground: oklch(0.4 0.05 235);
+	--sidebar-border: oklch(0.88 0.008 250);
+	--sidebar-ring: oklch(0.55 0.07 245);
+}
+
+.dark {
+	--radius: 0.5rem;
+	--background: oklch(0.29 0.02 255);
+	--foreground: oklch(0.9 0.01 240);
+	--card: oklch(0.33 0.02 255);
+	--card-foreground: oklch(0.9 0.01 240);
+	--popover: oklch(0.32 0.02 255);
+	--popover-foreground: oklch(0.9 0.01 240);
+	--primary: oklch(0.72 0.08 235);
+	--primary-foreground: oklch(0.2 0.02 255);
+	--secondary: oklch(0.37 0.02 255);
+	--secondary-foreground: oklch(0.9 0.01 240);
+	--muted: oklch(0.37 0.02 255);
+	--muted-foreground: oklch(0.74 0.015 240);
+	--accent: oklch(0.42 0.04 220);
+	--accent-foreground: oklch(0.85 0.05 220);
+	--border: oklch(0.4 0.02 255);
+	--input: oklch(0.4 0.02 255);
+	--ring: oklch(0.72 0.08 235);
+	--destructive: oklch(0.64 0.15 25);
+	--destructive-foreground: oklch(0.2 0.02 255);
+	--chart-1: oklch(0.72 0.08 235);
+	--chart-2: oklch(0.75 0.08 200);
+	--chart-3: oklch(0.76 0.09 150);
+	--chart-4: oklch(0.8 0.1 90);
+	--chart-5: oklch(0.72 0.12 30);
+	--sidebar: oklch(0.31 0.02 255);
+	--sidebar-foreground: oklch(0.9 0.01 240);
+	--sidebar-primary: oklch(0.72 0.08 235);
+	--sidebar-primary-foreground: oklch(0.2 0.02 255);
+	--sidebar-accent: oklch(0.42 0.04 220);
+	--sidebar-accent-foreground: oklch(0.85 0.05 220);
+	--sidebar-border: oklch(0.4 0.02 255);
+	--sidebar-ring: oklch(0.72 0.08 235);
+}

package/dist/themes/ocean.css

@@ -0,0 +1,76 @@
+/*
+ * svelte-docsmith theme — Ocean. A cool teal-blue palette.
+ *
+ *   @import 'svelte-docsmith/theme.css';
+ *   @import 'svelte-docsmith/themes/ocean.css';
+ */
+
+:root {
+	--primary: oklch(0.55 0.11 220);
+	--primary-foreground: oklch(0.99 0 0);
+	--background: oklch(0.99 0.005 215);
+	--foreground: oklch(0.26 0.02 225);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.26 0.02 225);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.26 0.02 225);
+	--secondary: oklch(0.965 0.008 215);
+	--secondary-foreground: oklch(0.35 0.02 225);
+	--muted: oklch(0.97 0.006 215);
+	--muted-foreground: oklch(0.5 0.02 225);
+	--accent: oklch(0.93 0.03 210);
+	--accent-foreground: oklch(0.38 0.09 222);
+	--border: oklch(0.9 0.01 215);
+	--input: oklch(0.9 0.01 215);
+	--ring: oklch(0.55 0.11 220);
+	--destructive: oklch(0.637 0.208 25);
+	--destructive-foreground: oklch(1 0 0);
+	--chart-1: oklch(0.62 0.12 220);
+	--chart-2: oklch(0.7 0.1 195);
+	--chart-3: oklch(0.54 0.12 250);
+	--chart-4: oklch(0.68 0.09 175);
+	--chart-5: oklch(0.48 0.11 235);
+	--sidebar: oklch(0.975 0.007 215);
+	--sidebar-foreground: oklch(0.26 0.02 225);
+	--sidebar-primary: oklch(0.55 0.11 220);
+	--sidebar-primary-foreground: oklch(0.99 0 0);
+	--sidebar-accent: oklch(0.93 0.03 210);
+	--sidebar-accent-foreground: oklch(0.38 0.09 222);
+	--sidebar-border: oklch(0.9 0.01 215);
+	--sidebar-ring: oklch(0.55 0.11 220);
+}
+
+.dark {
+	--primary: oklch(0.72 0.12 210);
+	--primary-foreground: oklch(0.16 0.02 225);
+	--background: oklch(0.19 0.02 228);
+	--foreground: oklch(0.94 0.01 215);
+	--card: oklch(0.23 0.022 228);
+	--card-foreground: oklch(0.94 0.01 215);
+	--popover: oklch(0.22 0.022 228);
+	--popover-foreground: oklch(0.94 0.01 215);
+	--secondary: oklch(0.27 0.02 228);
+	--secondary-foreground: oklch(0.94 0.01 215);
+	--muted: oklch(0.27 0.02 228);
+	--muted-foreground: oklch(0.72 0.012 215);
+	--accent: oklch(0.32 0.055 216);
+	--accent-foreground: oklch(0.85 0.08 214);
+	--border: oklch(0.33 0.02 228);
+	--input: oklch(0.33 0.02 228);
+	--ring: oklch(0.72 0.12 210);
+	--destructive: oklch(0.637 0.208 25);
+	--destructive-foreground: oklch(1 0 0);
+	--chart-1: oklch(0.7 0.12 220);
+	--chart-2: oklch(0.77 0.1 195);
+	--chart-3: oklch(0.62 0.12 250);
+	--chart-4: oklch(0.75 0.09 175);
+	--chart-5: oklch(0.56 0.11 235);
+	--sidebar: oklch(0.21 0.02 228);
+	--sidebar-foreground: oklch(0.94 0.01 215);
+	--sidebar-primary: oklch(0.72 0.12 210);
+	--sidebar-primary-foreground: oklch(0.16 0.02 225);
+	--sidebar-accent: oklch(0.32 0.055 216);
+	--sidebar-accent-foreground: oklch(0.85 0.08 214);
+	--sidebar-border: oklch(0.33 0.02 228);
+	--sidebar-ring: oklch(0.72 0.12 210);
+}

package/dist/themes/rose.css

@@ -0,0 +1,78 @@
+/*
+ * svelte-docsmith theme — Rosé. A warm rose palette with softer, rounder corners.
+ *
+ *   @import 'svelte-docsmith/theme.css';
+ *   @import 'svelte-docsmith/themes/rose.css';
+ */
+
+:root {
+	--radius: 1rem;
+	--primary: oklch(0.58 0.17 13);
+	--primary-foreground: oklch(0.99 0 0);
+	--background: oklch(0.99 0.006 12);
+	--foreground: oklch(0.28 0.02 12);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.28 0.02 12);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.28 0.02 12);
+	--secondary: oklch(0.967 0.008 12);
+	--secondary-foreground: oklch(0.4 0.03 12);
+	--muted: oklch(0.972 0.007 12);
+	--muted-foreground: oklch(0.52 0.02 12);
+	--accent: oklch(0.94 0.03 12);
+	--accent-foreground: oklch(0.42 0.13 13);
+	--border: oklch(0.91 0.012 12);
+	--input: oklch(0.91 0.012 12);
+	--ring: oklch(0.58 0.17 13);
+	--destructive: oklch(0.637 0.208 25);
+	--destructive-foreground: oklch(1 0 0);
+	--chart-1: oklch(0.62 0.16 13);
+	--chart-2: oklch(0.7 0.12 38);
+	--chart-3: oklch(0.54 0.14 350);
+	--chart-4: oklch(0.68 0.1 60);
+	--chart-5: oklch(0.48 0.15 3);
+	--sidebar: oklch(0.975 0.008 12);
+	--sidebar-foreground: oklch(0.28 0.02 12);
+	--sidebar-primary: oklch(0.58 0.17 13);
+	--sidebar-primary-foreground: oklch(0.99 0 0);
+	--sidebar-accent: oklch(0.94 0.03 12);
+	--sidebar-accent-foreground: oklch(0.42 0.13 13);
+	--sidebar-border: oklch(0.91 0.012 12);
+	--sidebar-ring: oklch(0.58 0.17 13);
+}
+
+.dark {
+	--radius: 1rem;
+	--primary: oklch(0.72 0.15 13);
+	--primary-foreground: oklch(0.18 0.02 12);
+	--background: oklch(0.2 0.02 14);
+	--foreground: oklch(0.95 0.01 12);
+	--card: oklch(0.24 0.022 14);
+	--card-foreground: oklch(0.95 0.01 12);
+	--popover: oklch(0.23 0.022 14);
+	--popover-foreground: oklch(0.95 0.01 12);
+	--secondary: oklch(0.27 0.02 14);
+	--secondary-foreground: oklch(0.95 0.01 12);
+	--muted: oklch(0.27 0.02 14);
+	--muted-foreground: oklch(0.72 0.012 12);
+	--accent: oklch(0.32 0.05 13);
+	--accent-foreground: oklch(0.86 0.07 12);
+	--border: oklch(0.33 0.02 14);
+	--input: oklch(0.33 0.02 14);
+	--ring: oklch(0.72 0.15 13);
+	--destructive: oklch(0.637 0.208 25);
+	--destructive-foreground: oklch(1 0 0);
+	--chart-1: oklch(0.7 0.16 13);
+	--chart-2: oklch(0.77 0.12 38);
+	--chart-3: oklch(0.62 0.14 350);
+	--chart-4: oklch(0.75 0.1 60);
+	--chart-5: oklch(0.56 0.15 3);
+	--sidebar: oklch(0.21 0.02 14);
+	--sidebar-foreground: oklch(0.95 0.01 12);
+	--sidebar-primary: oklch(0.72 0.15 13);
+	--sidebar-primary-foreground: oklch(0.18 0.02 12);
+	--sidebar-accent: oklch(0.32 0.05 13);
+	--sidebar-accent-foreground: oklch(0.86 0.07 12);
+	--sidebar-border: oklch(0.33 0.02 14);
+	--sidebar-ring: oklch(0.72 0.15 13);
+}

package/dist/themes/tangerine.css

@@ -0,0 +1,81 @@
+/*
+ * svelte-docsmith theme — Tangerine (the default).
+ *
+ * These are the same tokens baked into theme.css, extracted as a named preset
+ * so you can re-apply the default explicitly or use it as a starting point:
+ *
+ *   @import 'svelte-docsmith/theme.css';
+ *   @import 'svelte-docsmith/themes/tangerine.css';
+ *
+ * Warm terracotta primary on calm, faintly-cool neutrals.
+ */
+
+:root {
+	--primary: oklch(0.6397 0.172 36.4421);
+	--primary-foreground: oklch(1 0 0);
+	--background: oklch(0.9383 0.0042 236.4993);
+	--foreground: oklch(0.3211 0 0);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.3211 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.3211 0 0);
+	--secondary: oklch(0.967 0.0029 264.5419);
+	--secondary-foreground: oklch(0.4461 0.0263 256.8018);
+	--muted: oklch(0.9846 0.0017 247.8389);
+	--muted-foreground: oklch(0.551 0.0234 264.3637);
+	--accent: oklch(0.9119 0.0222 243.8174);
+	--accent-foreground: oklch(0.3791 0.1378 265.5222);
+	--border: oklch(0.9022 0.0052 247.8822);
+	--input: oklch(0.97 0.0029 264.542);
+	--ring: oklch(0.6397 0.172 36.4421);
+	--destructive: oklch(0.6368 0.2078 25.3313);
+	--destructive-foreground: oklch(1 0 0);
+	--chart-1: oklch(0.7156 0.0605 248.6845);
+	--chart-2: oklch(0.7875 0.0917 35.9616);
+	--chart-3: oklch(0.5778 0.0759 254.1573);
+	--chart-4: oklch(0.5016 0.0849 259.4902);
+	--chart-5: oklch(0.4241 0.0952 264.0306);
+	--sidebar: oklch(0.903 0.0046 258.3257);
+	--sidebar-foreground: oklch(0.3211 0 0);
+	--sidebar-primary: oklch(0.6397 0.172 36.4421);
+	--sidebar-primary-foreground: oklch(1 0 0);
+	--sidebar-accent: oklch(0.9119 0.0222 243.8174);
+	--sidebar-accent-foreground: oklch(0.3791 0.1378 265.5222);
+	--sidebar-border: oklch(0.9276 0.0058 264.5313);
+	--sidebar-ring: oklch(0.6397 0.172 36.4421);
+}
+
+.dark {
+	--primary: oklch(0.6397 0.172 36.4421);
+	--primary-foreground: oklch(1 0 0);
+	--background: oklch(0.2598 0.0306 262.6666);
+	--foreground: oklch(0.9219 0 0);
+	--card: oklch(0.3106 0.0301 268.6365);
+	--card-foreground: oklch(0.9219 0 0);
+	--popover: oklch(0.29 0.0249 268.3986);
+	--popover-foreground: oklch(0.9219 0 0);
+	--secondary: oklch(0.3095 0.0266 266.7132);
+	--secondary-foreground: oklch(0.9219 0 0);
+	--muted: oklch(0.3095 0.0266 266.7132);
+	--muted-foreground: oklch(0.7155 0 0);
+	--accent: oklch(0.338 0.0589 267.5867);
+	--accent-foreground: oklch(0.8823 0.0571 254.1284);
+	--border: oklch(0.3843 0.0301 269.7337);
+	--input: oklch(0.3843 0.0301 269.7337);
+	--ring: oklch(0.6397 0.172 36.4421);
+	--destructive: oklch(0.6368 0.2078 25.3313);
+	--destructive-foreground: oklch(1 0 0);
+	--chart-1: oklch(0.7156 0.0605 248.6845);
+	--chart-2: oklch(0.7693 0.0876 34.1875);
+	--chart-3: oklch(0.5778 0.0759 254.1573);
+	--chart-4: oklch(0.5016 0.0849 259.4902);
+	--chart-5: oklch(0.4241 0.0952 264.0306);
+	--sidebar: oklch(0.31 0.0283 267.7408);
+	--sidebar-foreground: oklch(0.9219 0 0);
+	--sidebar-primary: oklch(0.6397 0.172 36.4421);
+	--sidebar-primary-foreground: oklch(1 0 0);
+	--sidebar-accent: oklch(0.338 0.0589 267.5867);
+	--sidebar-accent-foreground: oklch(0.8823 0.0571 254.1284);
+	--sidebar-border: oklch(0.3843 0.0301 269.7337);
+	--sidebar-ring: oklch(0.6397 0.172 36.4421);
+}

package/dist/toc/from-content.d.ts

@@ -0,0 +1,11 @@
+import type { TocItem } from './types.js';
+/**
+ * Scan a rendered content element for `h2`/`h3` headings and return a flat
+ * {@link TocItem} list (with a `depth` so the renderer can indent `h3`s). Only
+ * headings with an `id` are included, since ids (from rehype-slug) are what the
+ * in-page links point at.
+ *
+ * Pure and DOM-only, so it is trivially testable and safe to re-run after every
+ * navigation.
+ */
+export declare function tocFromContent(container: HTMLElement, selector?: string): TocItem[];

package/dist/toc/from-content.js

@@ -0,0 +1,18 @@
+/**
+ * Scan a rendered content element for `h2`/`h3` headings and return a flat
+ * {@link TocItem} list (with a `depth` so the renderer can indent `h3`s). Only
+ * headings with an `id` are included, since ids (from rehype-slug) are what the
+ * in-page links point at.
+ *
+ * Pure and DOM-only, so it is trivially testable and safe to re-run after every
+ * navigation.
+ */
+export function tocFromContent(container, selector = 'h2, h3') {
+    return Array.from(container.querySelectorAll(selector))
+        .filter((h) => h.id)
+        .map((h) => ({
+        id: h.id,
+        title: h.textContent?.trim() ?? '',
+        depth: h.tagName === 'H3' ? 3 : 2
+    }));
+}

package/dist/toc/index.d.ts

@@ -0,0 +1,3 @@
+export * from './types.js';
+export * from './from-content.js';
+export * from './toc.svelte.js';

package/dist/toc/index.js

@@ -0,0 +1,3 @@
+export * from './types.js';
+export * from './from-content.js';
+export * from './toc.svelte.js';

package/dist/toc/toc.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { TocItem } from './types.js';
+/**
+ * A live table of contents: the headings scanned from the current page, plus
+ * the id of the section currently in view.
+ */
+export type Toc = {
+    /** Headings of the current page, in document order. */
+    readonly items: TocItem[];
+    /** Id of the heading whose section is currently in view, or `null`. */
+    readonly activeId: string | null;
+    /** Re-scan the content element. Call after each navigation. */
+    refresh: () => Promise<void>;
+};
+/**
+ * Create a table of contents bound to a content element.
+ *
+ * Two jobs, both re-run whenever the page changes:
+ * - `refresh()` re-scans the rendered headings (call it from `afterNavigate` so
+ *   client-side navigation updates the list, not just a full reload).
+ * - a single `IntersectionObserver` tracks which heading is in view for
+ *   scroll-spy highlighting, re-observing the new headings after each refresh.
+ *
+ * Deliberately small: no section wrappers, no multi-threshold ratio math, no
+ * parent-highlight bookkeeping. One observer, one active id.
+ */
+export declare function createToc(contentFn: () => HTMLElement | null): Toc;

package/dist/toc/toc.svelte.js

@@ -0,0 +1,74 @@
+import { BROWSER } from 'esm-env';
+import { tick } from 'svelte';
+import { tocFromContent } from './from-content.js';
+/**
+ * Create a table of contents bound to a content element.
+ *
+ * Two jobs, both re-run whenever the page changes:
+ * - `refresh()` re-scans the rendered headings (call it from `afterNavigate` so
+ *   client-side navigation updates the list, not just a full reload).
+ * - a single `IntersectionObserver` tracks which heading is in view for
+ *   scroll-spy highlighting, re-observing the new headings after each refresh.
+ *
+ * Deliberately small: no section wrappers, no multi-threshold ratio math, no
+ * parent-highlight bookkeeping. One observer, one active id.
+ */
+export function createToc(contentFn) {
+    let items = $state([]);
+    let activeId = $state(null);
+    async function refresh() {
+        // Wait for the navigated-to content to be in the DOM before scanning.
+        await tick();
+        const el = contentFn();
+        items = el ? tocFromContent(el) : [];
+    }
+    $effect(() => {
+        if (!BROWSER)
+            return;
+        const el = contentFn();
+        const headingItems = items; // re-run this effect when the heading set changes
+        if (!el || headingItems.length === 0) {
+            activeId = null;
+            return;
+        }
+        const headings = headingItems
+            .map((item) => el.querySelector(`#${CSS.escape(item.id)}`))
+            .filter((node) => node !== null);
+        const visible = new Set();
+        function recompute() {
+            // The first heading (in document order) inside the active band wins.
+            const firstVisible = headingItems.find((item) => visible.has(item.id));
+            if (firstVisible) {
+                activeId = firstVisible.id;
+            }
+            else if (activeId === null) {
+                // Nothing in the band yet (top of page): default to the first heading.
+                activeId = headingItems[0].id;
+            }
+            // Else keep the last active id — we're mid-section, between bands.
+        }
+        const observer = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting)
+                    visible.add(entry.target.id);
+                else
+                    visible.delete(entry.target.id);
+            }
+            recompute();
+        }, 
+        // Active band: just below the sticky header down to ~a third of the
+        // viewport, so the highlighted entry matches what you're reading.
+        { rootMargin: '-72px 0px -66% 0px', threshold: 0 });
+        headings.forEach((heading) => observer.observe(heading));
+        return () => observer.disconnect();
+    });
+    return {
+        get items() {
+            return items;
+        },
+        get activeId() {
+            return activeId;
+        },
+        refresh
+    };
+}

package/dist/toc/types.d.ts

@@ -0,0 +1,11 @@
+/**
+ * A table-of-contents entry: one heading scanned from the rendered page.
+ */
+export type TocItem = {
+    /** The heading's `id` (from rehype-slug); the in-page link is `#${id}`. */
+    id: string;
+    /** Heading text. */
+    title: string;
+    /** Heading level: `2` for an `h2`, `3` for an `h3`. */
+    depth: 2 | 3;
+};

package/dist/toc/types.js

@@ -0,0 +1 @@
+export {};

package/dist/types.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+/**
+ * Adds a required `children` snippet to a props type.
+ */
+export type WithChildren<T> = T & {
+    children: Snippet;
+};
+/**
+ * Adds an optional `children` snippet to a props type.
+ */
+export type WithChildrenOptional<T> = T & {
+    children?: Snippet;
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/accordion-item.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import * as AccordionPrimitive from './shadcn/accordion/index.js';
+	import { nextAccordionValue } from './accordion.svelte';
+	import type { Snippet } from 'svelte';
+
+	const {
+		title,
+		children
+	}: {
+		/** The always-visible summary that toggles the panel. */
+		title: string;
+		children: Snippet;
+	} = $props();
+
+	// Claimed once at init, in document order, so it stays stable across renders.
+	const value = nextAccordionValue();
+</script>
+
+<AccordionPrimitive.Item {value}>
+	<AccordionPrimitive.Trigger>{title}</AccordionPrimitive.Trigger>
+	<AccordionPrimitive.Content>
+		{@render children()}
+	</AccordionPrimitive.Content>
+</AccordionPrimitive.Item>

package/dist/ui/accordion-item.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** The always-visible summary that toggles the panel. */
+    title: string;
+    children: Snippet;
+};
+declare const AccordionItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
+export default AccordionItem;

package/dist/ui/accordion.svelte

@@ -0,0 +1,45 @@
+<script lang="ts" module>
+	import { getContext, setContext } from 'svelte';
+
+	const KEY = Symbol('docsmith-accordion');
+
+	type AccordionCtx = { count: number };
+
+	/**
+	 * Called by each <AccordionItem> at init to claim a stable, sequential value
+	 * so authors never have to pass one. Falls back to a random id when used
+	 * outside an <Accordion> (still valid for bits-ui, just not grouped).
+	 */
+	export function nextAccordionValue(): string {
+		const ctx = getContext<AccordionCtx | undefined>(KEY);
+		if (!ctx) return `item-${Math.random().toString(36).slice(2)}`;
+		ctx.count += 1;
+		return `item-${ctx.count}`;
+	}
+</script>
+
+<script lang="ts">
+	import * as AccordionPrimitive from './shadcn/accordion/index.js';
+	import type { Snippet } from 'svelte';
+
+	const {
+		multiple = false,
+		children
+	}: {
+		/** Allow several items open at once. Default: one at a time. */
+		multiple?: boolean;
+		children: Snippet;
+	} = $props();
+
+	setContext<AccordionCtx>(KEY, { count: 0 });
+</script>
+
+{#if multiple}
+	<AccordionPrimitive.Root type="multiple" class="my-6">
+		{@render children()}
+	</AccordionPrimitive.Root>
+{:else}
+	<AccordionPrimitive.Root type="single" class="my-6">
+		{@render children()}
+	</AccordionPrimitive.Root>
+{/if}

package/dist/ui/accordion.svelte.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Called by each <AccordionItem> at init to claim a stable, sequential value
+ * so authors never have to pass one. Falls back to a random id when used
+ * outside an <Accordion> (still valid for bits-ui, just not grouped).
+ */
+export declare function nextAccordionValue(): string;
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** Allow several items open at once. Default: one at a time. */
+    multiple?: boolean;
+    children: Snippet;
+};
+declare const Accordion: import("svelte").Component<$$ComponentProps, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/ui/background-pattern.svelte

@@ -0,0 +1,17 @@
+<!-- Decorative page background: a faint grid fading out from the top, with two
+soft primary/accent glows. Render it inside a `relative isolate` container. -->
+<div
+	class="pointer-events-none absolute inset-0 -z-10 h-full w-full overflow-hidden"
+	aria-hidden="true"
+>
+	<div
+		class="fixed inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-size-[24px_24px] mask-[radial-gradient(ellipse_80%_80%_at_50%_0%,#000_70%,transparent_100%)]"
+	></div>
+
+	<div
+		class="bg-primary/20 pointer-events-none fixed top-0 left-1/2 h-[500px] w-[800px] -translate-x-1/2 rounded-full opacity-40 mix-blend-screen blur-[120px] dark:opacity-20 dark:mix-blend-normal"
+	></div>
+	<div
+		class="bg-accent/25 pointer-events-none fixed top-28 left-1/2 h-[400px] w-[600px] -translate-x-1/2 rounded-full opacity-30 mix-blend-screen blur-[100px] dark:opacity-20 dark:mix-blend-normal"
+	></div>
+</div>

package/dist/ui/background-pattern.svelte.d.ts

@@ -0,0 +1,26 @@
+export default BackgroundPattern;
+type BackgroundPattern = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const BackgroundPattern: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}