@ewanc26/svelte-standard-site 0.2.2 → 0.2.4

package/src/lib/utils/native-comments.ts

@@ -0,0 +1,197 @@
+/**
+ * Native Comments utilities for pub.leaflet.comment records
+ */
+
+import type { CommentRecord, Facet, LinearDocumentQuote } from '../types.js';
+
+/** Collection name for comments */
+export const COMMENTS_COLLECTION = 'pub.leaflet.comment';
+
+/**
+ * Create a comment record
+ */
+export function createCommentRecord(params: {
+	subject: string; // AT-URI of the document being commented on
+	plaintext: string;
+	reply?: { parent: string }; // AT-URI of the parent comment if replying
+	facets?: Facet[];
+	onPage?: string; // Page ID if commenting on a specific page
+	attachment?: LinearDocumentQuote;
+}): CommentRecord {
+	const record: CommentRecord = {
+		$type: 'pub.leaflet.comment',
+		subject: params.subject,
+		plaintext: params.plaintext,
+		createdAt: new Date().toISOString()
+	};
+
+	if (params.reply) {
+		record.reply = {
+			$type: 'pub.leaflet.comment#replyRef',
+			parent: params.reply.parent
+		};
+	}
+
+	if (params.facets) {
+		record.facets = params.facets;
+	}
+
+	if (params.onPage) {
+		record.onPage = params.onPage;
+	}
+
+	if (params.attachment) {
+		record.attachment = {
+			$type: 'pub.leaflet.comment#linearDocumentQuote',
+			...params.attachment
+		};
+	}
+
+	return record;
+}
+
+/**
+ * Parse a comment AT-URI to extract components
+ */
+export function parseCommentUri(uri: string): {
+	did: string;
+	collection: string;
+	rkey: string;
+} | null {
+	const match = uri.match(/^at:\/\/([^/]+)\/([^/]+)\/([^/]+)$/);
+	if (!match) return null;
+
+	return {
+		did: match[1],
+		collection: match[2],
+		rkey: match[3]
+	};
+}
+
+/**
+ * Build a comment AT-URI
+ */
+export function buildCommentUri(did: string, rkey: string): string {
+	return `at://${did}/${COMMENTS_COLLECTION}/${rkey}`;
+}
+
+/**
+ * Fetch comments for a document
+ */
+export async function fetchComments(
+	subject: string,
+	service = 'https://public.api.bsky.app'
+): Promise<Array<CommentRecord & { uri: string; cid: string; author: { did: string } }>> {
+	try {
+		const response = await fetch(
+			`${service}/xrpc/com.atproto.repo.listRecords?collection=${COMMENTS_COLLECTION}&limit=100`
+		);
+
+		if (!response.ok) {
+			throw new Error(`Failed to fetch comments: ${response.status}`);
+		}
+
+		const data = await response.json();
+
+		// Filter comments for this subject
+		const comments = data.records
+			?.filter((record: any) => record.value?.subject === subject)
+			?.map((record: any) => ({
+				...record.value,
+				uri: record.uri,
+				cid: record.cid,
+				author: { did: record.uri.split('/')[2] }
+			})) ?? [];
+
+		return comments;
+	} catch (error) {
+		console.error('Error fetching comments:', error);
+		return [];
+	}
+}
+
+/**
+ * Organize comments into a threaded structure
+ */
+export function organizeCommentsIntoThreads(
+	comments: Array<CommentRecord & { uri: string; cid: string; author: { did: string } }>
+): Array<CommentRecord & { uri: string; cid: string; author: { did: string }; replies: any[] }> {
+	const byId = new Map<string, any>();
+	const rootComments: any[] = [];
+
+	// First pass: create all comment objects
+	for (const comment of comments) {
+		byId.set(comment.uri, { ...comment, replies: [] });
+	}
+
+	// Second pass: organize into threads
+	for (const comment of comments) {
+		const node = byId.get(comment.uri);
+		if (!node) continue;
+
+		if (comment.reply?.parent) {
+			const parent = byId.get(comment.reply.parent);
+			if (parent) {
+				parent.replies.push(node);
+			} else {
+				// Parent not found, treat as root
+				rootComments.push(node);
+			}
+		} else {
+			rootComments.push(node);
+		}
+	}
+
+	// Sort root comments by date (newest first)
+	rootComments.sort(
+		(a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+	);
+
+	return rootComments;
+}
+
+/**
+ * Count total comments in a thread
+ */
+export function countThreadComments(thread: { replies: any[] }): number {
+	let count = 1;
+	for (const reply of thread.replies) {
+		count += countThreadComments(reply);
+	}
+	return count;
+}
+
+/**
+ * Get quoted text from a document
+ */
+export function extractQuotedText(
+	document: any,
+	quote: LinearDocumentQuote['quote']
+): string | null {
+	if (!quote || !document?.content?.pages) return null;
+
+	// Find the linear document page
+	const page = document.content.pages.find((p: any) =>
+		quote.start.block.every((b, i) => b === p.id || i === 0)
+	);
+
+	if (!page) return null;
+
+	// Extract text based on block indices
+	const blocks = page.blocks || [];
+	const startBlockIndex = quote.start.block[quote.start.block.length - 1];
+	const endBlockIndex = quote.end.block[quote.end.block.length - 1];
+
+	if (startBlockIndex === undefined || endBlockIndex === undefined) return null;
+
+	// For simplicity, return the text from the first block
+	// In a real implementation, you'd handle multi-block quotes
+	const startBlock = blocks[startBlockIndex]?.block;
+	if (!startBlock) return null;
+
+	if (startBlock.plaintext) {
+		return startBlock.plaintext.slice(quote.start.offset, quote.end.offset);
+	}
+
+	return null;
+}

package/src/lib/utils/theme-helpers.ts

@@ -1,10 +1,14 @@
-import type { BasicTheme } from '../types.js';
-import { rgbToCSS } from './theme.js';
+import type { BasicTheme, ExtendedTheme, BackgroundImage } from '../types.js';
+import { rgbToCSS, colorToCSS, isRGBA } from './theme.js';
 
 /**
  * Generate color-mix CSS for theme colors with transparency
  */
-export function mixThemeColor(variable: string, opacity: number, fallback = 'transparent'): string {
+export function mixThemeColor(
+	variable: string,
+	opacity: number,
+	fallback = 'transparent'
+): string {
 	return `color-mix(in srgb, var(${variable}) ${opacity}%, ${fallback})`;
 }
 
@@ -72,6 +76,75 @@ export function getThemedAccent(
 	};
 }
 
+/**
+ * Get theme-aware page background
+ */
+export function getThemedPageBackground(
+	hasTheme: boolean,
+	showPageBackground?: boolean
+): {
+	backgroundColor?: string;
+} {
+	if (!hasTheme) return {};
+	if (showPageBackground === false) return {};
+	return { backgroundColor: 'var(--theme-page-background)' };
+}
+
+/**
+ * Get background image styles
+ */
+export function getBackgroundImageStyles(bgImage: BackgroundImage | undefined): {
+	backgroundImage?: string;
+	backgroundSize?: string;
+	backgroundPosition?: string;
+} {
+	if (!bgImage?.url) return {};
+
+	return {
+		backgroundImage: `url(${bgImage.url})`,
+		backgroundSize: 'cover',
+		backgroundPosition: 'center'
+	};
+}
+
+/**
+ * Get font styles from theme
+ */
+export function getFontStyles(theme: ExtendedTheme | undefined): {
+	fontFamily?: string;
+} {
+	if (!theme) return {};
+
+	const headingFont = theme.headingFont;
+	const bodyFont = theme.bodyFont;
+
+	if (bodyFont) {
+		return { fontFamily: `"${bodyFont}", system-ui, sans-serif` };
+	}
+
+	return {};
+}
+
+/**
+ * Get heading font styles from theme
+ */
+export function getHeadingFontStyles(theme: ExtendedTheme | undefined): {
+	fontFamily?: string;
+} {
+	if (!theme?.headingFont) return {};
+	return { fontFamily: `"${theme.headingFont}", system-ui, sans-serif` };
+}
+
+/**
+ * Get page width styles from theme
+ */
+export function getPageWidthStyles(theme: ExtendedTheme | undefined): {
+	maxWidth?: string;
+} {
+	if (!theme?.pageWidth) return {};
+	return { maxWidth: `${theme.pageWidth}px` };
+}
+
 /**
  * Convert BasicTheme to CSS custom properties
  */
@@ -85,3 +158,63 @@ export function themeToCssVars(theme?: BasicTheme): Record<string, string> {
 		'--theme-accent-foreground': rgbToCSS(theme.accentForeground)
 	};
 }
+
+/**
+ * Convert ExtendedTheme to CSS custom properties
+ */
+export function extendedThemeToCssVars(theme?: ExtendedTheme): Record<string, string> {
+	if (!theme) return {};
+
+	const vars: Record<string, string> = {};
+
+	if (theme.backgroundColor) {
+		vars['--theme-background'] = colorToCSS(theme.backgroundColor);
+	}
+
+	// Extended theme uses different property names
+	if (theme.pageBackground) {
+		vars['--theme-page-background'] = colorToCSS(theme.pageBackground);
+	}
+
+	if (theme.primary) {
+		vars['--theme-accent'] = colorToCSS(theme.primary);
+	}
+
+	if (theme.accentBackground) {
+		vars['--theme-accent-background'] = colorToCSS(theme.accentBackground);
+	}
+
+	if (theme.accentText) {
+		vars['--theme-accent-foreground'] = colorToCSS(theme.accentText);
+	}
+
+	if (theme.headingFont) {
+		vars['--theme-heading-font'] = `"${theme.headingFont}", system-ui, sans-serif`;
+	}
+
+	if (theme.bodyFont) {
+		vars['--theme-body-font'] = `"${theme.bodyFont}", system-ui, sans-serif`;
+	}
+
+	if (theme.pageWidth) {
+		vars['--theme-page-width'] = `${theme.pageWidth}px`;
+	}
+
+	return vars;
+}
+
+/**
+ * Convert any theme to CSS custom properties
+ */
+export function anyThemeToCssVars(
+	theme?: BasicTheme | ExtendedTheme
+): Record<string, string> {
+	if (!theme) return {};
+
+	// Check for basic theme properties
+	if ('background' in theme && 'foreground' in theme) {
+		return themeToCssVars(theme as BasicTheme);
+	}
+
+	return extendedThemeToCssVars(theme as ExtendedTheme);
+}

package/src/lib/utils/theme.ts

@@ -1,4 +1,11 @@
-import type { RGBColor } from '../types.js';
+import type { RGBColor, RGBAColor, Color, BasicTheme, ExtendedTheme, BackgroundImage } from '../types.js';
+
+/**
+ * Type guard for RGBA color
+ */
+export function isRGBA(color: Color): color is RGBAColor {
+	return 'a' in color;
+}
 
 /**
  * Convert RGB color object to CSS rgb() string
@@ -7,6 +14,25 @@ export function rgbToCSS(color: RGBColor): string {
 	return `rgb(${color.r}, ${color.g}, ${color.b})`;
 }
 
+/**
+ * Convert RGBA color object to CSS rgba() string
+ */
+export function rgbaToCSS(color: RGBAColor): string {
+	// Alpha is 0-100, convert to 0-1
+	const alpha = color.a / 100;
+	return `rgba(${color.r}, ${color.g}, ${color.b}, ${alpha})`;
+}
+
+/**
+ * Convert Color (RGB or RGBA) to CSS string
+ */
+export function colorToCSS(color: Color): string {
+	if (isRGBA(color)) {
+		return rgbaToCSS(color);
+	}
+	return rgbToCSS(color);
+}
+
 /**
  * Convert RGB color object to hex string
  */
@@ -15,6 +41,15 @@ export function rgbToHex(color: RGBColor): string {
 	return `#${toHex(color.r)}${toHex(color.g)}${toHex(color.b)}`;
 }
 
+/**
+ * Convert RGBA color object to hex string with alpha
+ */
+export function rgbaToHex(color: RGBAColor): string {
+	const toHex = (n: number) => n.toString(16).padStart(2, '0');
+	const alpha = Math.round((color.a / 100) * 255);
+	return `#${toHex(color.r)}${toHex(color.g)}${toHex(color.b)}${toHex(alpha)}`;
+}
+
 /**
  * Get theme CSS variables from BasicTheme
  */
@@ -31,3 +66,156 @@ export function getThemeVars(theme: {
 		'--theme-accent-foreground': rgbToCSS(theme.accentForeground)
 	};
 }
+
+/**
+ * Get CSS for background image
+ */
+export function getBackgroundImageCSS(bgImage: BackgroundImage | undefined): Record<string, string> {
+	if (!bgImage?.url) return {};
+
+	const styles: Record<string, string> = {
+		'background-image': `url(${bgImage.url})`,
+		'background-size': 'cover',
+		'background-position': 'center',
+		'background-repeat': 'no-repeat'
+	};
+
+	if (bgImage.opacity !== undefined) {
+		// For opacity, we need to use a pseudo-element or overlay
+		// This is handled separately in the component
+	}
+
+	if (bgImage.blur !== undefined) {
+		styles['background-blur'] = `${bgImage.blur}px`;
+	}
+
+	return styles;
+}
+
+/**
+ * Convert BasicTheme to CSS custom properties
+ */
+export function basicThemeToCssVars(theme: BasicTheme): Record<string, string> {
+	return {
+		'--theme-background': rgbToCSS(theme.background),
+		'--theme-foreground': rgbToCSS(theme.foreground),
+		'--theme-accent': rgbToCSS(theme.accent),
+		'--theme-accent-foreground': rgbToCSS(theme.accentForeground)
+	};
+}
+
+/**
+ * Convert ExtendedTheme to CSS custom properties
+ */
+export function extendedThemeToCssVars(theme: ExtendedTheme): Record<string, string> {
+	const vars: Record<string, string> = {};
+
+	if (theme.backgroundColor) {
+		vars['--theme-background'] = colorToCSS(theme.backgroundColor);
+	}
+
+	if (theme.pageBackground) {
+		vars['--theme-page-background'] = colorToCSS(theme.pageBackground);
+	}
+
+	if (theme.primary) {
+		vars['--theme-primary'] = colorToCSS(theme.primary);
+	}
+
+	if (theme.accentBackground) {
+		vars['--theme-accent-background'] = colorToCSS(theme.accentBackground);
+	}
+
+	if (theme.accentText) {
+		vars['--theme-accent-text'] = colorToCSS(theme.accentText);
+	}
+
+	if (theme.headingFont) {
+		vars['--theme-heading-font'] = theme.headingFont;
+	}
+
+	if (theme.bodyFont) {
+		vars['--theme-body-font'] = theme.bodyFont;
+	}
+
+	if (theme.pageWidth) {
+		vars['--theme-page-width'] = `${theme.pageWidth}px`;
+	}
+
+	// Map extended theme properties to standard theme variables for compatibility
+	if (theme.backgroundColor) {
+		vars['--theme-background'] = colorToCSS(theme.backgroundColor);
+	}
+
+	// Use primary as accent if accent is not defined
+	if (theme.primary && !theme.accentBackground) {
+		vars['--theme-accent'] = colorToCSS(theme.primary);
+	}
+
+	return vars;
+}
+
+/**
+ * Convert any theme (Basic or Extended) to CSS custom properties
+ */
+export function themeToCssVars(theme: BasicTheme | ExtendedTheme | undefined): Record<string, string> {
+	if (!theme) return {};
+
+	// Check if it's a basic theme
+	if ('background' in theme && 'foreground' in theme && 'accent' in theme && 'accentForeground' in theme) {
+		return basicThemeToCssVars(theme as BasicTheme);
+	}
+
+	// Otherwise treat as extended theme
+	return extendedThemeToCssVars(theme as ExtendedTheme);
+}
+
+/**
+ * Get font family CSS with fallbacks
+ */
+export function getFontFamilyCSS(fontName: string | undefined, fallback: string): string {
+	if (!fontName) return fallback;
+	return `"${fontName}", ${fallback}`;
+}
+
+/**
+ * Generate Google Fonts URL for custom fonts
+ */
+export function getGoogleFontsUrl(fonts: { headingFont?: string; bodyFont?: string }): string | null {
+	const families: string[] = [];
+
+	if (fonts.headingFont) {
+		families.push(`${encodeURIComponent(fonts.headingFont)}:wght@400;600;700`);
+	}
+
+	if (fonts.bodyFont) {
+		families.push(`${encodeURIComponent(fonts.bodyFont)}:wght@400;500;600`);
+	}
+
+	if (families.length === 0) return null;
+
+	return `https://fonts.googleapis.com/css2?family=${families.join('&family=')}&display=swap`;
+}
+
+/**
+ * Get all theme CSS variables including defaults
+ */
+export function getAllThemeVars(theme?: BasicTheme | ExtendedTheme): Record<string, string> {
+	const defaults: Record<string, string> = {
+		'--theme-background': 'rgb(255, 255, 255)',
+		'--theme-foreground': 'rgb(0, 0, 0)',
+		'--theme-accent': 'rgb(0, 0, 225)',
+		'--theme-accent-foreground': 'rgb(255, 255, 255)',
+		'--theme-page-background': 'rgb(255, 255, 255)',
+		'--theme-primary': 'rgb(0, 0, 225)',
+		'--theme-accent-background': 'rgb(0, 0, 225)',
+		'--theme-accent-text': 'rgb(255, 255, 255)',
+		'--theme-heading-font': 'system-ui, -apple-system, sans-serif',
+		'--theme-body-font': 'system-ui, -apple-system, sans-serif',
+		'--theme-page-width': '800px'
+	};
+
+	const themeVars = themeToCssVars(theme);
+
+	return { ...defaults, ...themeVars };
+}

package/dist/components/document/blocks/UnorderedListBlock.svelte.d.ts

@@ -1,9 +0,0 @@
-import UnorderedListBlock from './UnorderedListBlock.svelte';
-declare const UnorderedListBlock: import("svelte").Component<{
-    block: {
-        children: ListItem[];
-    };
-    hasTheme?: boolean;
-}, {}, "">;
-type UnorderedListBlock = ReturnType<typeof UnorderedListBlock>;
-export default UnorderedListBlock;