From 622725c392272decc4606e9f8f518165f82a5a22 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 13 Mar 2026 16:37:22 +0000
Subject: [PATCH 1/5] feat(sveltekit-helper): add TableOfContents component
 with scrollspy

Adds a new TableOfContents Svelte 5 component that wraps Sidebar with
scrollspy logic. Headings are auto-discovered from the DOM using
data-sidebar-content / data-sidebar-selector attributes by default, with
contentSelector and headingSelector props for explicit overrides.

https://claude.ai/code/session_01Qrcz9fPxJBQk2GD1G3ZAug
---
 .changeset/add-table-of-contents-component.md |   5 +
 .../src/components/TableOfContents.svelte     | 200 ++++++++++++++++++
 .../sveltekit-helper/src/components/index.ts  |   2 +
 3 files changed, 207 insertions(+)
 create mode 100644 .changeset/add-table-of-contents-component.md
 create mode 100644 packages/sveltekit-helper/src/components/TableOfContents.svelte

diff --git a/.changeset/add-table-of-contents-component.md b/.changeset/add-table-of-contents-component.md
new file mode 100644
index 00000000..c8d2486f
--- /dev/null
+++ b/.changeset/add-table-of-contents-component.md
@@ -0,0 +1,5 @@
+---
+"@ainsleydev/sveltekit-helper": patch
+---
+
+Add TableOfContents component with scrollspy and auto-discovery of headings via data attributes or CSS selector props
diff --git a/packages/sveltekit-helper/src/components/TableOfContents.svelte b/packages/sveltekit-helper/src/components/TableOfContents.svelte
new file mode 100644
index 00000000..d573ee88
--- /dev/null
+++ b/packages/sveltekit-helper/src/components/TableOfContents.svelte
@@ -0,0 +1,200 @@
+<script lang="ts" module>
+	export type TOCItem = {
+		label: string
+		href: string
+	}
+
+	export type TableOfContentsProps = {
+		/**
+		 * Optional heading displayed above the TOC list.
+		 */
+		heading?: string
+		/**
+		 * Optional pre-generated items. If omitted, items are auto-discovered
+		 * from the DOM using contentSelector + headingSelector on mount.
+		 */
+		items?: TOCItem[]
+		/**
+		 * Adds a left border to the TOC on tablet and above.
+		 */
+		displayBorder?: boolean
+		/**
+		 * CSS selector used to find the content element containing headings.
+		 * Defaults to `[data-sidebar-content="true"]`.
+		 */
+		contentSelector?: string
+		/**
+		 * CSS selector for headings within the content element.
+		 * Falls back to the `data-sidebar-selector` attribute on the content
+		 * element, then `h2`.
+		 *
+		 * Priority: prop > data-sidebar-selector attribute > 'h2'
+		 */
+		headingSelector?: string
+		/**
+		 * Scroll offset in pixels applied to scrollspy detection.
+		 * @default 80
+		 */
+		scrollOffset?: number
+	}
+</script>
+
+<script lang="ts">
+	import { onMount } from 'svelte'
+	import Sidebar from './Sidebar.svelte'
+
+	let {
+		heading = '',
+		items: itemsProp,
+		displayBorder = false,
+		contentSelector = '[data-sidebar-content="true"]',
+		headingSelector,
+		scrollOffset = 80,
+	}: TableOfContentsProps = $props()
+
+	let activeId = $state<string | null>(null)
+	let items = $state<TOCItem[]>(itemsProp ?? [])
+
+	onMount(() => {
+		const content = document.querySelector(contentSelector)
+		if (!content) return
+
+		// Priority: prop > data-sidebar-selector attribute > 'h2'
+		const resolvedHeadingSelector =
+			headingSelector ?? content.getAttribute('data-sidebar-selector') ?? 'h2'
+
+		// Auto-generate items from DOM if not provided as props.
+		if (!itemsProp) {
+			items = Array.from(content.querySelectorAll<HTMLElement>(resolvedHeadingSelector))
+				.filter((el) => el.id)
+				.map((el) => ({ label: el.textContent?.trim() ?? '', href: el.id }))
+		}
+
+		const sections = Array.from(
+			content.querySelectorAll<HTMLElement>(resolvedHeadingSelector),
+		).filter((el) => el.id)
+
+		if (sections.length === 0) return
+
+		const onScroll = () => {
+			const scrollPosition = window.scrollY + scrollOffset
+			let activeSection = sections[0]
+
+			for (const section of sections) {
+				if (section.offsetTop > scrollPosition) break
+				activeSection = section
+			}
+
+			const bottomThreshold = 10
+			const scrolledToBottom =
+				window.innerHeight + window.scrollY >= document.body.scrollHeight - bottomThreshold
+			if (scrolledToBottom) {
+				activeSection = sections[sections.length - 1]
+			}
+
+			activeId = activeSection?.id ?? null
+		}
+
+		window.addEventListener('scroll', onScroll, { passive: true })
+		onScroll()
+
+		return () => window.removeEventListener('scroll', onScroll)
+	})
+</script>
+
+<!--
+	@component
+
+	Table of Contents with scrollspy, designed to be used alongside a richtext
+	or content area that has headings with `id` attributes.
+
+	By default the component discovers the content element via a
+	`data-sidebar-content="true"` attribute and uses the `data-sidebar-selector`
+	attribute (defaulting to `h2`) to determine which headings to track.
+
+	@example
+	```svelte
+	<!-- Attach data attributes to the content element -->
+	<RichText content={data.body} data-sidebar-content="true" data-sidebar-selector="h3" />
+
+	<!-- TOC auto-discovers headings -->
+	<TableOfContents heading="On this page" />
+	```
+
+	@example
+	```svelte
+	<!-- Explicit prop overrides -->
+	<TableOfContents
+		contentSelector=".article-body"
+		headingSelector="h2, h3"
+		heading="Contents"
+		displayBorder
+	/>
+	```
+
+	@example
+	```svelte
+	<!-- Manual items (scrollspy still driven by DOM) -->
+	<TableOfContents items={[{ label: 'Intro', href: 'intro' }]} />
+	```
+-->
+<Sidebar>
+	<div class="toc" class:toc--border={displayBorder}>
+		{#if heading !== ''}
+			<p class="toc__heading">
+				{heading}
+			</p>
+		{/if}
+		<menu class="toc__items">
+			{#each items as item, index (index)}
+				<li class="toc__item">
+					<a
+						class="toc__link"
+						class:toc__link--active={activeId ===
+							(item.href.startsWith('#') ? item.href.slice(1) : item.href)}
+						href="#{item.href}"
+					>
+						<small>{item.label}</small>
+					</a>
+				</li>
+			{/each}
+		</menu>
+	</div>
+</Sidebar>
+
+<style lang="scss">
+	@use '../scss/abstracts' as a;
+
+	.toc {
+		$self: &;
+
+		&__item {
+			margin-bottom: a.$size-8;
+		}
+
+		&__link {
+			text-decoration: none;
+			font-weight: var(--font-weight-normal);
+			color: var(--token-colour-text);
+			transition: color 100ms ease;
+			will-change: color;
+
+			&--active {
+				color: var(--token-text-action);
+				font-weight: var(--font-weight-medium);
+			}
+
+			&:hover {
+				color: var(--token-text-action);
+			}
+		}
+
+		@include a.mq(tab) {
+			&--border {
+				margin-left: a.$size-48;
+				padding-left: a.$size-48;
+				border-left: 1px solid var(--colour-light-600);
+			}
+		}
+	}
+</style>
diff --git a/packages/sveltekit-helper/src/components/index.ts b/packages/sveltekit-helper/src/components/index.ts
index 305e3f68..4d10128a 100644
--- a/packages/sveltekit-helper/src/components/index.ts
+++ b/packages/sveltekit-helper/src/components/index.ts
@@ -1,6 +1,8 @@
 export { default as Modal } from './Modal.svelte';
 export { default as Sidebar } from './Sidebar.svelte';
 export { default as Hamburger } from './Hamburger.svelte';
+export { default as TableOfContents } from './TableOfContents.svelte';
 export { Alert, Notice } from './notifications';
 export type { ModalProps, TransitionFn } from './Modal.svelte';
 export type { AlertProps, AlertType, NoticeProps, NoticeType } from './notifications';
+export type { TableOfContentsProps, TOCItem } from './TableOfContents.svelte';

From e3bb1d6135a51cb75757df499ccc2b7237c3222d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 13 Mar 2026 16:38:59 +0000
Subject: [PATCH 2/5] fix(payload-helper): remove unsupported style prop from
 Payload Button in Slug component

The Button component from @payloadcms/ui dropped the style prop, causing
a TS2322 type error during build. Wrap the button in a span to preserve
the margin/padding styles.

https://claude.ai/code/session_01Qrcz9fPxJBQk2GD1G3ZAug
---
 .changeset/fix-slug-button-style-prop.md             |  5 +++++
 .../payload-helper/src/fields/Slug/Component.tsx     | 12 +++++-------
 2 files changed, 10 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/fix-slug-button-style-prop.md

diff --git a/.changeset/fix-slug-button-style-prop.md b/.changeset/fix-slug-button-style-prop.md
new file mode 100644
index 00000000..151fc54a
--- /dev/null
+++ b/.changeset/fix-slug-button-style-prop.md
@@ -0,0 +1,5 @@
+---
+"@ainsleydev/payload-helper": patch
+---
+
+Fix Slug field component build error by removing unsupported style prop from Payload Button
diff --git a/packages/payload-helper/src/fields/Slug/Component.tsx b/packages/payload-helper/src/fields/Slug/Component.tsx
index 550bde6b..de974cab 100644
--- a/packages/payload-helper/src/fields/Slug/Component.tsx
+++ b/packages/payload-helper/src/fields/Slug/Component.tsx
@@ -81,13 +81,11 @@ export const Component: React.FC<SlugComponentProps> = ({
 		<div className='field-type slug-field-component'>
 			<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
 				<FieldLabel htmlFor={`field-${resolvedPath}`} label={label} />
-				<Button
-					style={{ margin: 0, paddingBottom: '0.3125rem' }}
-					buttonStyle='none'
-					onClick={handleLock}
-				>
-					{checkboxValue ? 'Unlock' : 'Lock'}
-				</Button>
+				<span style={{ margin: 0, paddingBottom: '0.3125rem' }}>
+					<Button buttonStyle='none' onClick={handleLock}>
+						{checkboxValue ? 'Unlock' : 'Lock'}
+					</Button>
+				</span>
 			</div>
 			<TextInput
 				value={value}

From 95a4164662af71bac263b72fa9b1c27bb5ce3a6e Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 13 Mar 2026 17:15:02 +0000
Subject: [PATCH 3/5] Fix TableOfContents: correct SCSS import path and add
 Biome-required semicolons

---
 .../src/components/TableOfContents.svelte     | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/sveltekit-helper/src/components/TableOfContents.svelte b/packages/sveltekit-helper/src/components/TableOfContents.svelte
index d573ee88..d10d4d4a 100644
--- a/packages/sveltekit-helper/src/components/TableOfContents.svelte
+++ b/packages/sveltekit-helper/src/components/TableOfContents.svelte
@@ -1,28 +1,28 @@
 <script lang="ts" module>
 	export type TOCItem = {
-		label: string
-		href: string
-	}
+		label: string;
+		href: string;
+	};
 
 	export type TableOfContentsProps = {
 		/**
 		 * Optional heading displayed above the TOC list.
 		 */
-		heading?: string
+		heading?: string;
 		/**
 		 * Optional pre-generated items. If omitted, items are auto-discovered
 		 * from the DOM using contentSelector + headingSelector on mount.
 		 */
-		items?: TOCItem[]
+		items?: TOCItem[];
 		/**
 		 * Adds a left border to the TOC on tablet and above.
 		 */
-		displayBorder?: boolean
+		displayBorder?: boolean;
 		/**
 		 * CSS selector used to find the content element containing headings.
 		 * Defaults to `[data-sidebar-content="true"]`.
 		 */
-		contentSelector?: string
+		contentSelector?: string;
 		/**
 		 * CSS selector for headings within the content element.
 		 * Falls back to the `data-sidebar-selector` attribute on the content
@@ -30,13 +30,13 @@
 		 *
 		 * Priority: prop > data-sidebar-selector attribute > 'h2'
 		 */
-		headingSelector?: string
+		headingSelector?: string;
 		/**
 		 * Scroll offset in pixels applied to scrollspy detection.
 		 * @default 80
 		 */
-		scrollOffset?: number
-	}
+		scrollOffset?: number;
+	};
 </script>
 
 <script lang="ts">
@@ -163,7 +163,7 @@
 </Sidebar>
 
 <style lang="scss">
-	@use '../scss/abstracts' as a;
+	@use '../scss' as a;
 
 	.toc {
 		$self: &;

From d226c630d4545503e884c776ac69f0f67ea1b177 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 13 Mar 2026 17:19:21 +0000
Subject: [PATCH 4/5] Fix TableOfContents: remove extra indent level from
 module script block for Biome

---
 .../src/components/TableOfContents.svelte     | 76 +++++++++----------
 1 file changed, 38 insertions(+), 38 deletions(-)

diff --git a/packages/sveltekit-helper/src/components/TableOfContents.svelte b/packages/sveltekit-helper/src/components/TableOfContents.svelte
index d10d4d4a..714fdaef 100644
--- a/packages/sveltekit-helper/src/components/TableOfContents.svelte
+++ b/packages/sveltekit-helper/src/components/TableOfContents.svelte
@@ -1,42 +1,42 @@
 <script lang="ts" module>
-	export type TOCItem = {
-		label: string;
-		href: string;
-	};
-
-	export type TableOfContentsProps = {
-		/**
-		 * Optional heading displayed above the TOC list.
-		 */
-		heading?: string;
-		/**
-		 * Optional pre-generated items. If omitted, items are auto-discovered
-		 * from the DOM using contentSelector + headingSelector on mount.
-		 */
-		items?: TOCItem[];
-		/**
-		 * Adds a left border to the TOC on tablet and above.
-		 */
-		displayBorder?: boolean;
-		/**
-		 * CSS selector used to find the content element containing headings.
-		 * Defaults to `[data-sidebar-content="true"]`.
-		 */
-		contentSelector?: string;
-		/**
-		 * CSS selector for headings within the content element.
-		 * Falls back to the `data-sidebar-selector` attribute on the content
-		 * element, then `h2`.
-		 *
-		 * Priority: prop > data-sidebar-selector attribute > 'h2'
-		 */
-		headingSelector?: string;
-		/**
-		 * Scroll offset in pixels applied to scrollspy detection.
-		 * @default 80
-		 */
-		scrollOffset?: number;
-	};
+export type TOCItem = {
+	label: string;
+	href: string;
+};
+
+export type TableOfContentsProps = {
+	/**
+	 * Optional heading displayed above the TOC list.
+	 */
+	heading?: string;
+	/**
+	 * Optional pre-generated items. If omitted, items are auto-discovered
+	 * from the DOM using contentSelector + headingSelector on mount.
+	 */
+	items?: TOCItem[];
+	/**
+	 * Adds a left border to the TOC on tablet and above.
+	 */
+	displayBorder?: boolean;
+	/**
+	 * CSS selector used to find the content element containing headings.
+	 * Defaults to `[data-sidebar-content="true"]`.
+	 */
+	contentSelector?: string;
+	/**
+	 * CSS selector for headings within the content element.
+	 * Falls back to the `data-sidebar-selector` attribute on the content
+	 * element, then `h2`.
+	 *
+	 * Priority: prop > data-sidebar-selector attribute > 'h2'
+	 */
+	headingSelector?: string;
+	/**
+	 * Scroll offset in pixels applied to scrollspy detection.
+	 * @default 80
+	 */
+	scrollOffset?: number;
+};
 </script>
 
 <script lang="ts">

From 9218ceb1476f9d38bed3f3c5407bea92b0f4095a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 13 Mar 2026 17:32:47 +0000
Subject: [PATCH 5/5] fix: Correcting mq breakpoint key from 'tab' to 'tablet'
 in TableOfContents

---
 packages/sveltekit-helper/src/components/TableOfContents.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sveltekit-helper/src/components/TableOfContents.svelte b/packages/sveltekit-helper/src/components/TableOfContents.svelte
index 714fdaef..6e66d179 100644
--- a/packages/sveltekit-helper/src/components/TableOfContents.svelte
+++ b/packages/sveltekit-helper/src/components/TableOfContents.svelte
@@ -189,7 +189,7 @@ export type TableOfContentsProps = {
 			}
 		}
 
-		@include a.mq(tab) {
+		@include a.mq(tablet) {
 			&--border {
 				margin-left: a.$size-48;
 				padding-left: a.$size-48;