@autumnsgrove/groveengine 0.1.0

package/dist/components/custom/GutterItem.svelte

@@ -0,0 +1,201 @@
+<script>
+	import Lightbox from '../gallery/Lightbox.svelte';
+	import ImageGallery from '../gallery/ImageGallery.svelte';
+	import { sanitizeHTML } from '../../utils/sanitize.js';
+
+	let { item = {} } = $props();
+
+	let lightboxOpen = $state(false);
+	let lightboxSrc = $state('');
+	let lightboxAlt = $state('');
+	let lightboxCaption = $state('');
+
+	function openLightbox(src, alt, caption = '') {
+		lightboxSrc = src;
+		lightboxAlt = alt;
+		lightboxCaption = caption;
+		lightboxOpen = true;
+	}
+
+	function closeLightbox() {
+		lightboxOpen = false;
+	}
+
+	// Handle clicks on images within markdown content
+	function handleContentClick(event) {
+		if (event.target.tagName === 'IMG') {
+			openLightbox(event.target.src, event.target.alt);
+		}
+	}
+</script>
+
+<div class="gutter-item" data-anchor={item.anchor || ''}>
+	{#if item.type === 'comment' || item.type === 'markdown'}
+		<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+		<div class="gutter-comment" onclick={handleContentClick}>
+			{@html sanitizeHTML(item.content)}
+		</div>
+	{:else if item.type === 'photo' || item.type === 'image'}
+		{@const imageSrc = item.src || item.url || item.file}
+		<figure class="gutter-photo">
+			<button class="image-button" onclick={() => openLightbox(imageSrc, item.caption || 'Gutter image', item.caption || '')}>
+				<img src={imageSrc} alt={item.caption || 'Gutter image'} />
+			</button>
+			{#if item.caption}
+				<figcaption>{item.caption}</figcaption>
+			{/if}
+		</figure>
+	{:else if item.type === 'gallery'}
+		<div class="gutter-gallery">
+			<ImageGallery images={item.images} />
+		</div>
+	{:else if item.type === 'emoji'}
+		<div class="gutter-emoji">
+			<img src={item.src} alt={item.alt || 'Emoji'} title={item.alt || ''} />
+		</div>
+	{/if}
+</div>
+
+<Lightbox
+	src={lightboxSrc}
+	alt={lightboxAlt}
+	caption={lightboxCaption}
+	isOpen={lightboxOpen}
+	onClose={closeLightbox}
+/>
+
+<style>
+	.gutter-item {
+		margin-bottom: 1.5rem;
+		font-size: 0.875rem;
+		line-height: 1.5;
+	}
+	.gutter-comment {
+		padding: 0.75rem;
+		background: #f8f8f8;
+		border-left: 3px solid #2c5f2d;
+		border-radius: 0 6px 6px 0;
+		color: var(--light-text-secondary);
+		transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
+	}
+	:global(.dark) .gutter-comment {
+		background: var(--light-bg-primary);
+		border-left-color: var(--accent-success);
+		color: var(--light-text-tertiary);
+	}
+	.gutter-comment :global(p) {
+		margin: 0 0 0.5rem 0;
+	}
+	.gutter-comment :global(p:last-child) {
+		margin-bottom: 0;
+	}
+	.gutter-comment :global(a) {
+		color: #2c5f2d;
+		text-decoration: underline;
+	}
+	:global(.dark) .gutter-comment :global(a) {
+		color: var(--accent-success);
+	}
+	.gutter-photo {
+		margin: 0;
+	}
+	.image-button {
+		padding: 0;
+		border: none;
+		background: none;
+		cursor: pointer;
+		display: block;
+	}
+	.image-button:hover img {
+		opacity: 0.9;
+	}
+	.gutter-photo img {
+		width: 100%;
+		max-width: 160px;
+		height: auto;
+		border-radius: 6px;
+		display: block;
+		transition: opacity 0.2s;
+	}
+	/* Also constrain images in markdown comments */
+	.gutter-comment :global(img) {
+		max-width: 160px;
+		height: auto;
+		border-radius: 6px;
+		display: block;
+		margin-bottom: 0.5rem;
+		cursor: pointer;
+		transition: opacity 0.2s;
+	}
+	.gutter-comment :global(img:hover) {
+		opacity: 0.9;
+	}
+	.gutter-photo figcaption {
+		margin-top: 0.5rem;
+		font-size: 0.75rem;
+		color: #666;
+		font-style: italic;
+		text-align: center;
+		transition: color 0.3s ease;
+	}
+	/* Gallery styles for gutter - compact version */
+	.gutter-gallery {
+		width: 100%;
+		max-width: 160px;
+	}
+	.gutter-gallery :global(.gallery-container) {
+		margin: 0;
+	}
+	.gutter-gallery :global(.gallery-image) {
+		max-height: 120px;
+	}
+	.gutter-gallery :global(.nav-button) {
+		width: 24px;
+		height: 24px;
+	}
+	.gutter-gallery :global(.nav-button svg) {
+		width: 12px;
+		height: 12px;
+	}
+	.gutter-gallery :global(.nav-prev) {
+		left: 4px;
+	}
+	.gutter-gallery :global(.nav-next) {
+		right: 4px;
+	}
+	.gutter-gallery :global(.gallery-info) {
+		padding: 4px;
+	}
+	.gutter-gallery :global(.gallery-progress) {
+		padding: 6px 0 4px;
+	}
+	.gutter-gallery :global(.progress-dot) {
+		width: 8px;
+		height: 8px;
+	}
+	.gutter-gallery :global(.progress-dot.active) {
+		width: 16px;
+	}
+	.gutter-gallery :global(.gallery-counter) {
+		font-size: 0.7rem;
+		padding-bottom: 4px;
+	}
+	.gutter-gallery :global(.gallery-caption) {
+		font-size: 0.75rem;
+		padding: 6px 8px;
+	}
+	/* Emoji styles */
+	.gutter-emoji {
+		display: flex;
+		justify-content: center;
+		padding: 0.5rem 0;
+	}
+	.gutter-emoji img {
+		width: 48px;
+		height: 48px;
+		transition: transform 0.2s;
+	}
+	.gutter-emoji img:hover {
+		transform: scale(1.15);
+	}
+</style>

package/dist/components/custom/GutterItem.svelte.d.ts

@@ -0,0 +1,11 @@
+export default GutterItem;
+type GutterItem = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const GutterItem: import("svelte").Component<{
+    item?: Record<string, any>;
+}, {}, "">;
+type $$ComponentProps = {
+    item?: Record<string, any>;
+};

package/dist/components/custom/LeftGutter.svelte

@@ -0,0 +1,271 @@
+<script>
+	import { tick } from 'svelte';
+	import GutterItem from './GutterItem.svelte';
+
+	let { items = [], headers = [], contentHeight = 0, onOverflowChange = () => {} } = $props();
+
+	let gutterElement = $state();
+	let itemPositions = $state({});
+	let anchorGroupElements = $state({});
+	let overflowingAnchors = $state([]);
+
+	/**
+	 * Parse anchor string to determine anchor type and value
+	 */
+	function parseAnchor(anchor) {
+		if (!anchor) {
+			return { type: 'none', value: null };
+		}
+
+		// Check for paragraph anchor: "paragraph:N"
+		const paragraphMatch = anchor.match(/^paragraph:(\d+)$/);
+		if (paragraphMatch) {
+			return { type: 'paragraph', value: parseInt(paragraphMatch[1], 10) };
+		}
+
+		// Check for tag anchor: "anchor:tagname"
+		const tagMatch = anchor.match(/^anchor:(\w+)$/);
+		if (tagMatch) {
+			return { type: 'tag', value: tagMatch[1] };
+		}
+
+		// Check for header anchor: "## Header Text"
+		const headerMatch = anchor.match(/^(#{1,6})\s+(.+)$/);
+		if (headerMatch) {
+			return { type: 'header', value: anchor };
+		}
+
+		// Unknown format - treat as header for backwards compatibility
+		return { type: 'header', value: anchor };
+	}
+
+	/**
+	 * Generate a unique key for an anchor (used for grouping and positioning)
+	 */
+	function getAnchorKey(anchor) {
+		const parsed = parseAnchor(anchor);
+		switch (parsed.type) {
+			case 'header':
+				// For headers, use the header ID
+				const headerText = anchor.replace(/^#+\s*/, '');
+				const header = headers.find(h => h.text === headerText);
+				return header ? `header:${header.id}` : `header:${anchor}`;
+			case 'paragraph':
+				return `paragraph:${parsed.value}`;
+			case 'tag':
+				return `tag:${parsed.value}`;
+			default:
+				return `unknown:${anchor}`;
+		}
+	}
+
+	/**
+	 * Get all unique anchors from items (preserving order)
+	 */
+	function getUniqueAnchors() {
+		const seen = new Set();
+		const anchors = [];
+		for (const item of items) {
+			if (item.anchor && !seen.has(item.anchor)) {
+				seen.add(item.anchor);
+				anchors.push(item.anchor);
+			}
+		}
+		return anchors;
+	}
+
+	// Group items by their anchor
+	function getItemsForAnchor(anchor) {
+		return items.filter(item => item.anchor === anchor);
+	}
+
+	// Get items that don't have a valid anchor (show at top)
+	function getOrphanItems() {
+		return items.filter(item => {
+			if (!item.anchor) return true;
+			const parsed = parseAnchor(item.anchor);
+			if (parsed.type === 'header') {
+				const headerText = item.anchor.replace(/^#+\s*/, '');
+				return !headers.find(h => h.text === headerText);
+			}
+			// Paragraph and tag anchors are valid if they have values
+			return parsed.type === 'none';
+		});
+	}
+
+	/**
+	 * Find the DOM element for an anchor
+	 */
+	function findAnchorElement(anchor) {
+		const parsed = parseAnchor(anchor);
+		const contentEl = document.querySelector('.content-body');
+		if (!contentEl) return null;
+
+		switch (parsed.type) {
+			case 'header': {
+				const headerText = anchor.replace(/^#+\s*/, '');
+				const header = headers.find(h => h.text === headerText);
+				if (header) {
+					return document.getElementById(header.id);
+				}
+				return null;
+			}
+			case 'paragraph': {
+				const paragraphs = contentEl.querySelectorAll('p');
+				const index = parsed.value - 1; // Convert to 0-based index
+				if (index >= 0 && index < paragraphs.length) {
+					return paragraphs[index];
+				}
+				return null;
+			}
+			case 'tag': {
+				return contentEl.querySelector(`[data-anchor="${parsed.value}"]`);
+			}
+			default:
+				return null;
+		}
+	}
+
+	// Calculate positions based on anchor locations, with collision detection
+	async function updatePositions() {
+		if (!gutterElement) return;
+
+		await tick(); // Wait for DOM to update
+
+		const gutterTop = gutterElement.offsetTop;
+		const minGap = 16; // Minimum gap between items in pixels
+		const bottomPadding = 32; // Padding from bottom of content
+
+		let lastBottom = 0; // Track the bottom edge of the last positioned item
+		const newOverflowingAnchors = [];
+
+		// Get all unique anchors that have items
+		const anchors = getUniqueAnchors();
+
+		// Sort anchors by their position in the document
+		const anchorPositions = anchors.map(anchor => {
+			const el = findAnchorElement(anchor);
+			return {
+				anchor,
+				key: getAnchorKey(anchor),
+				element: el,
+				top: el ? el.offsetTop : Infinity
+			};
+		}).sort((a, b) => a.top - b.top);
+
+		anchorPositions.forEach(({ anchor, key, element }) => {
+			const groupEl = anchorGroupElements[key];
+
+			if (element && groupEl) {
+				// Desired position (aligned with anchor element)
+				let desiredTop = element.offsetTop - gutterTop;
+
+				// Get the height of this gutter group
+				const groupHeight = groupEl.offsetHeight;
+
+				// Check for collision with previous item
+				if (desiredTop < lastBottom + minGap) {
+					// Push down to avoid overlap
+					desiredTop = lastBottom + minGap;
+				}
+
+				// Check if this item would overflow past the content
+				const effectiveContentHeight = contentHeight > 0 ? contentHeight : Infinity;
+				if (desiredTop + groupHeight > effectiveContentHeight - bottomPadding) {
+					// This item overflows - mark it and hide it in the gutter
+					newOverflowingAnchors.push(key);
+					itemPositions[key] = -9999; // Hide off-screen
+				} else {
+					itemPositions[key] = desiredTop;
+					// Update lastBottom for next iteration
+					lastBottom = desiredTop + groupHeight;
+				}
+			} else if (groupEl) {
+				// Element not found - hide this group
+				itemPositions[key] = -9999;
+			}
+		});
+
+		// Update overflowing anchors and notify parent
+		overflowingAnchors = newOverflowingAnchors;
+		onOverflowChange(newOverflowingAnchors);
+	}
+
+	$effect(() => {
+		// Update on resize
+		window.addEventListener('resize', updatePositions);
+		return () => {
+			window.removeEventListener('resize', updatePositions);
+		};
+	});
+
+	// Handle initial positioning and re-calculate when items, headers, or contentHeight change
+	$effect(() => {
+		// Explicitly reference dependencies to track changes
+		items;
+		headers;
+		contentHeight;
+		// Delay slightly to allow DOM updates
+		const timeout = setTimeout(updatePositions, 150);
+		return () => clearTimeout(timeout);
+	});
+</script>
+
+<aside class="left-gutter" bind:this={gutterElement}>
+	{#if items.length > 0}
+		<!-- Show orphan items at the top -->
+		{#each getOrphanItems() as item, index (index)}
+			<div class="gutter-item-wrapper">
+				<GutterItem {item} />
+			</div>
+		{/each}
+
+		<!-- Show items positioned by anchor -->
+		{#each getUniqueAnchors() as anchor (anchor)}
+			{@const anchorKey = getAnchorKey(anchor)}
+			{@const anchorItems = getItemsForAnchor(anchor)}
+			{#if anchorItems.length > 0}
+				<div
+					class="anchor-group"
+					data-for-anchor={anchorKey}
+					style="top: {itemPositions[anchorKey] || 0}px"
+					bind:this={anchorGroupElements[anchorKey]}
+				>
+					{#each anchorItems as item, index (index)}
+						<GutterItem {item} />
+					{/each}
+				</div>
+			{/if}
+		{/each}
+	{/if}
+</aside>
+
+<style>
+	.left-gutter {
+		position: relative;
+		padding: 1rem;
+		min-height: 100%;
+	}
+	.gutter-item-wrapper {
+		margin-bottom: 1rem;
+	}
+	.anchor-group {
+		position: absolute;
+		left: 1rem;
+		right: 1rem;
+	}
+	/* Scrollbar styling */
+	.left-gutter::-webkit-scrollbar {
+		width: 4px;
+	}
+	.left-gutter::-webkit-scrollbar-track {
+		background: transparent;
+	}
+	.left-gutter::-webkit-scrollbar-thumb {
+		background: var(--light-text-secondary);
+		border-radius: 2px;
+	}
+	:global(.dark) .left-gutter::-webkit-scrollbar-thumb {
+		background: var(--light-border-light);
+	}
+</style>

package/dist/components/custom/LeftGutter.svelte.d.ts

@@ -0,0 +1,17 @@
+export default LeftGutter;
+type LeftGutter = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const LeftGutter: import("svelte").Component<{
+    items?: any[];
+    headers?: any[];
+    contentHeight?: number;
+    onOverflowChange?: Function;
+}, {}, "">;
+type $$ComponentProps = {
+    items?: any[];
+    headers?: any[];
+    contentHeight?: number;
+    onOverflowChange?: Function;
+};