@ewanc26/svelte-standard-site 0.2.2 → 0.2.4

package/dist/components/Toast.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+
+	export type ToastType = 'success' | 'error' | 'info' | 'warning';
+
+	export interface ToastMessage {
+		id: string;
+		message: string;
+		type: ToastType;
+		duration?: number;
+	}
+
+	interface Props {
+		toasts: ToastMessage[];
+		position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+		hasTheme?: boolean;
+	}
+
+	const { toasts, position = 'bottom-right', hasTheme = false }: Props = $props();
+
+	const dispatch = createEventDispatcher<{ dismiss: string }>();
+
+	function dismiss(id: string) {
+		dispatch('dismiss', id);
+	}
+</script>
+
+<div class="toast-container {position}" class:themed={hasTheme}>
+	{#each toasts as toast}
+		<div
+			class="toast {toast.type}"
+			class:themed={hasTheme}
+			role="alert"
+			aria-live="polite"
+		>
+			<div class="toast-icon">
+				{#if toast.type === 'success'}
+					<svg viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+						<path
+							fill-rule="evenodd"
+							d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+				{:else if toast.type === 'error'}
+					<svg viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+						<path
+							fill-rule="evenodd"
+							d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+				{:else if toast.type === 'warning'}
+					<svg viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+						<path
+							fill-rule="evenodd"
+							d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.63-1.516 2.63H3.72c-1.347 0-2.189-1.463-1.516-2.63l6.28-10.875zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+				{:else}
+					<svg viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+						<path
+							fill-rule="evenodd"
+							d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+				{/if}
+			</div>
+			<span class="toast-message">{toast.message}</span>
+			<button class="toast-dismiss" onclick={() => dismiss(toast.id)} aria-label="Dismiss">
+				<svg viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
+					<path
+						d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+					/>
+				</svg>
+			</button>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.toast-container {
+		position: fixed;
+		z-index: 9999;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		max-width: 24rem;
+	}
+
+	.top-right {
+		top: 1rem;
+		right: 1rem;
+	}
+
+	.top-left {
+		top: 1rem;
+		left: 1rem;
+	}
+
+	.bottom-right {
+		bottom: 1rem;
+		right: 1rem;
+	}
+
+	.bottom-left {
+		bottom: 1rem;
+		left: 1rem;
+	}
+
+	.toast {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		padding: 0.75rem 1rem;
+		border-radius: 0.5rem;
+		box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+		animation: slide-in 0.2s ease-out;
+	}
+
+	@keyframes slide-in {
+		from {
+			transform: translateX(100%);
+			opacity: 0;
+		}
+		to {
+			transform: translateX(0);
+			opacity: 1;
+		}
+	}
+
+	.toast.success {
+		background-color: rgb(220 252 231);
+		color: rgb(22 101 52);
+	}
+
+	.toast.error {
+		background-color: rgb(254 226 226);
+		color: rgb(185 28 28);
+	}
+
+	.toast.warning {
+		background-color: rgb(254 249 195);
+		color: rgb(161 98 7);
+	}
+
+	.toast.info {
+		background-color: rgb(239 246 255);
+		color: rgb(30 64 175);
+	}
+
+	.toast-icon {
+		flex-shrink: 0;
+	}
+
+	.toast-message {
+		flex: 1;
+		font-size: 0.875rem;
+	}
+
+	.toast-dismiss {
+		flex-shrink: 0;
+		padding: 0.25rem;
+		border-radius: 0.25rem;
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		opacity: 0.6;
+		transition: opacity 0.15s;
+	}
+
+	.toast-dismiss:hover {
+		opacity: 1;
+	}
+</style>

package/dist/components/Toast.svelte.d.ts

@@ -0,0 +1,32 @@
+export type ToastType = 'success' | 'error' | 'info' | 'warning';
+export interface ToastMessage {
+    id: string;
+    message: string;
+    type: ToastType;
+    duration?: number;
+}
+interface Props {
+    toasts: ToastMessage[];
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+    hasTheme?: boolean;
+}
+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 Toast: $$__sveltets_2_IsomorphicComponent<Props, {
+    dismiss: CustomEvent<string>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Toast = InstanceType<typeof Toast>;
+export default Toast;

package/dist/components/Watermark.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	interface Props {
+		/** Text to display as watermark */
+		text?: string;
+		/** Publication name */
+		publicationName?: string;
+		/** Publication URL */
+		publicationUrl?: string;
+		/** Position of watermark */
+		position?: 'bottom-right' | 'bottom-left' | 'bottom-center';
+		/** Opacity (0-1) */
+		opacity?: number;
+		/** Has theme applied */
+		hasTheme?: boolean;
+	}
+
+	const {
+		text,
+		publicationName,
+		publicationUrl,
+		position = 'bottom-right',
+		opacity = 0.6,
+		hasTheme = false
+	}: Props = $props();
+
+	// Display text - prefer explicit text, then publication name
+	const displayText = $derived(text || publicationName || 'Leaflet');
+</script>
+
+<div
+	class="watermark {position}"
+	class:themed={hasTheme}
+	style:opacity={opacity}
+>
+	{#if publicationUrl && !text}
+		<a
+			href={publicationUrl}
+			target="_blank"
+			rel="noopener noreferrer"
+			class="watermark-link"
+		>
+			{displayText}
+		</a>
+	{:else}
+		<span class="watermark-text">{displayText}</span>
+	{/if}
+</div>
+
+<style>
+	.watermark {
+		position: fixed;
+		padding: 0.5rem 1rem;
+		font-size: 0.75rem;
+		font-weight: 500;
+		letter-spacing: 0.05em;
+		text-transform: uppercase;
+		pointer-events: none;
+		z-index: 100;
+	}
+
+	.bottom-right {
+		bottom: 1rem;
+		right: 1rem;
+	}
+
+	.bottom-left {
+		bottom: 1rem;
+		left: 1rem;
+	}
+
+	.bottom-center {
+		bottom: 1rem;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+
+	.watermark-text {
+		color: rgb(107 114 128);
+	}
+
+	.watermark-link {
+		color: rgb(107 114 128);
+		text-decoration: none;
+		pointer-events: auto;
+		transition: color 0.15s;
+	}
+
+	.watermark-link:hover {
+		color: rgb(0 0 225);
+	}
+
+	.watermark.themed .watermark-text,
+	.watermark.themed .watermark-link {
+		color: var(--theme-foreground);
+	}
+
+	.watermark.themed .watermark-link:hover {
+		color: var(--theme-accent);
+	}
+</style>

package/dist/components/Watermark.svelte.d.ts

@@ -0,0 +1,17 @@
+interface Props {
+    /** Text to display as watermark */
+    text?: string;
+    /** Publication name */
+    publicationName?: string;
+    /** Publication URL */
+    publicationUrl?: string;
+    /** Position of watermark */
+    position?: 'bottom-right' | 'bottom-left' | 'bottom-center';
+    /** Opacity (0-1) */
+    opacity?: number;
+    /** Has theme applied */
+    hasTheme?: boolean;
+}
+declare const Watermark: import("svelte").Component<Props, {}, "">;
+type Watermark = ReturnType<typeof Watermark>;
+export default Watermark;

package/dist/components/common/ThemedCard.svelte

@@ -9,9 +9,14 @@
 		children: Snippet;
 		class?: string;
 		href?: string;
+		/**
+		 * If true, renders only the themed wrapper without default styles.
+		 * Useful for custom layouts — pass your own classes via `class`.
+		 */
+		headless?: boolean;
 	}
 
-	let { theme, children, class: className = '', href }: Props = $props();
+	let { theme, children, class: className = '', href, headless = false }: Props = $props();
 
 	const themeVars = $derived(theme ? getThemeVars(theme) : {});
 	const hasTheme = $derived(!!theme);
@@ -30,20 +35,19 @@
 		}
 		return base;
 	});
+
+	// Default styles for non-headless mode
+	const defaultStyles = $derived(
+		headless
+			? ''
+			: 'rounded-lg border p-6 transition-all bg-canvas-50 dark:bg-canvas-950 border-canvas-200 dark:border-canvas-800 hover:border-primary-300 dark:hover:border-primary-700 focus-within:border-primary-300 dark:focus-within:border-primary-700'
+	);
 </script>
 
 {#if href}
 	<a {href} class="group block">
 		<article
-			class="rounded-lg border p-6 transition-all {className}"
-			class:bg-canvas-50={!hasTheme}
-			class:dark:bg-canvas-950={!hasTheme}
-			class:border-canvas-200={!hasTheme}
-			class:dark:border-canvas-800={!hasTheme}
-			class:hover:border-primary-300={!hasTheme}
-			class:dark:hover:border-primary-700={!hasTheme}
-			class:focus-within:border-primary-300={!hasTheme}
-			class:dark:focus-within:border-primary-700={!hasTheme}
+			class="{defaultStyles} {className}"
 			style:background-color={hasTheme ? 'var(--theme-background)' : undefined}
 			style={allStyles()}
 		>
@@ -52,11 +56,7 @@
 	</a>
 {:else}
 	<article
-		class="rounded-lg border p-6 transition-all {className}"
-		class:bg-canvas-50={!hasTheme}
-		class:dark:bg-canvas-950={!hasTheme}
-		class:border-canvas-200={!hasTheme}
-		class:dark:border-canvas-800={!hasTheme}
+		class="{defaultStyles} {className}"
 		style:background-color={hasTheme ? 'var(--theme-background)' : undefined}
 		style={allStyles()}
 	>

package/dist/components/common/ThemedCard.svelte.d.ts

@@ -5,6 +5,11 @@ interface Props {
     children: Snippet;
     class?: string;
     href?: string;
+    /**
+     * If true, renders only the themed wrapper without default styles.
+     * Useful for custom layouts — pass your own classes via `class`.
+     */
+    headless?: boolean;
 }
 declare const ThemedCard: import("svelte").Component<Props, {}, "">;
 type ThemedCard = ReturnType<typeof ThemedCard>;

package/dist/components/document/BlockRenderer.svelte

@@ -6,6 +6,7 @@
 	import CodeBlock from './blocks/CodeBlock.svelte';
 	import MathBlock from './blocks/MathBlock.svelte';
 	import UnorderedListBlock from './blocks/UnorderedListBlock.svelte';
+	import OrderedListBlock from './blocks/OrderedListBlock.svelte';
 	import HorizontalRuleBlock from './blocks/HorizontalRuleBlock.svelte';
 	import IframeBlock from './blocks/IframeBlock.svelte';
 	import WebsiteBlock from './blocks/WebsiteBlock.svelte';
@@ -38,6 +39,8 @@
 	<MathBlock {block} {hasTheme} />
 {:else if block.$type === 'pub.leaflet.blocks.unorderedList'}
 	<UnorderedListBlock {block} {hasTheme} />
+{:else if block.$type === 'pub.leaflet.blocks.orderedList'}
+	<OrderedListBlock {block} {hasTheme} {did} {pds} />
 {:else if block.$type === 'pub.leaflet.blocks.horizontalRule'}
 	<HorizontalRuleBlock {hasTheme} />
 {:else if block.$type === 'pub.leaflet.blocks.iframe'}

package/dist/components/document/DocumentRenderer.svelte

@@ -1,9 +1,17 @@
 <script lang="ts">
+	import { setContext, getContext } from 'svelte';
 	import type { Document } from '../../types.js';
 	import LeafletContentRenderer from './LeafletContentRenderer.svelte';
 	import MarkdownRenderer from './MarkdownRenderer.svelte';
+	import Footnotes from '../Footnotes.svelte';
 	import { mixThemeColor } from '../../utils/theme-helpers.js';
 
+	interface FootnoteData {
+		footnoteId: string;
+		contentPlaintext: string;
+		contentFacets?: any[];
+	}
+
 	interface Props {
 		document: Document;
 		/** DID of the record author — needed to resolve blob URLs */
@@ -20,6 +28,34 @@
 
 	const { document, did = '', pds = '', hasTheme = false, prerenderedHtml }: Props = $props();
 
+	// Footnote collection state
+	let footnoteCounter = $state(0);
+	let footnotes = $state<Array<FootnoteData & { number: number }>>([]);
+
+	// Reset footnotes when document changes
+	$effect(() => {
+		footnoteCounter = 0;
+		footnotes = [];
+	});
+
+	// Set up footnote context for child components
+	function registerFootnote(footnote: FootnoteData): number {
+		// Check if footnote already registered
+		const existing = footnotes.find((f) => f.footnoteId === footnote.footnoteId);
+		if (existing) {
+			return existing.number;
+		}
+		footnoteCounter++;
+		const newFootnote = { ...footnote, number: footnoteCounter };
+		footnotes = [...footnotes, newFootnote];
+		return footnoteCounter;
+	}
+
+	setContext('footnotes', {
+		registerFootnote,
+		getFootnotes: () => footnotes
+	});
+
 	// Content priority:
 	//  1. pub.leaflet.content — rich Leaflet block tree
 	//  2. textContent — stored as (possibly markdown) text; render via MarkdownRenderer
@@ -60,9 +96,13 @@
 					document.content,
 					null,
 					2
-				)}</pre>
+				)}</pre
+			>
 		</div>
 	{:else}
 		<p class="italic opacity-50">No content available</p>
 	{/if}
+
+	<!-- Footnotes section -->
+	<Footnotes {footnotes} {hasTheme} />
 </div>

package/dist/components/document/RichText.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import InlineMath from './InlineMath.svelte';
 	import { UnicodeString } from '@atproto/api';
+	import { getContext, setContext } from 'svelte';
 
 	interface Facet {
 		index: {
@@ -13,13 +14,32 @@
 		}>;
 	}
 
+	interface FootnoteData {
+		footnoteId: string;
+		contentPlaintext: string;
+		contentFacets?: Facet[];
+	}
+
 	interface Props {
 		plaintext: string;
 		facets?: Facet[];
 		hasTheme?: boolean;
+		/** Footnote index in the document (for numbering) */
+		footnoteIndex?: number;
+	}
+
+	const { plaintext, facets = [], hasTheme = false, footnoteIndex = 0 }: Props = $props();
+
+	// Footnote context - allows parent components to collect footnotes
+	interface FootnoteContext {
+		registerFootnote: (footnote: FootnoteData) => number;
+		getFootnotes: () => Array<FootnoteData & { number: number }>;
 	}
 
-	const { plaintext, facets = [], hasTheme = false }: Props = $props();
+	const footnoteContext = getContext<FootnoteContext | undefined>('footnotes');
+
+	// Track footnotes found in this text
+	const foundFootnotes: Map<string, number> = new Map();
 
 	interface RichTextSegment {
 		text: string;
@@ -96,10 +116,13 @@
 		isMath: boolean;
 		isDidMention: boolean;
 		isAtMention: boolean;
+		isFootnote: boolean;
 		link?: string;
 		id?: string;
 		did?: string;
 		atURI?: string;
+		footnote?: FootnoteData;
+		footnoteNumber?: number;
 	}
 
 	function processSegments(): ProcessedSegment[] {
@@ -131,6 +154,26 @@
 			);
 			const isMath = segment.facet?.some((f) => f.$type === 'pub.leaflet.richtext.facet#math');
 
+			// Handle footnote
+			const footnoteFeature = segment.facet?.find(
+				(f) => f.$type === 'pub.leaflet.richtext.facet#footnote'
+			) as FootnoteFeature | undefined;
+
+			let footnoteNumber: number | undefined;
+			if (footnoteFeature && footnoteContext) {
+				if (!foundFootnotes.has(footnoteFeature.footnoteId)) {
+					const num = footnoteContext.registerFootnote({
+						footnoteId: footnoteFeature.footnoteId,
+						contentPlaintext: footnoteFeature.contentPlaintext,
+						contentFacets: footnoteFeature.contentFacets
+					});
+					foundFootnotes.set(footnoteFeature.footnoteId, num);
+					footnoteNumber = num;
+				} else {
+					footnoteNumber = foundFootnotes.get(footnoteFeature.footnoteId);
+				}
+			}
+
 			// Split text by newlines and mark br elements - handle undefined segment.text
 			const segmentText = segment.text || '';
 			const textParts = segmentText.split('\n');
@@ -154,10 +197,19 @@
 				isMath: isMath || false,
 				isDidMention: !!isDidMention,
 				isAtMention: !!isAtMention,
+				isFootnote: !!footnoteFeature,
 				link: link?.uri,
 				id: id?.id,
 				did: isDidMention?.did,
-				atURI: isAtMention?.atURI
+				atURI: isAtMention?.atURI,
+				footnote: footnoteFeature
+					? {
+							footnoteId: footnoteFeature.footnoteId,
+							contentPlaintext: footnoteFeature.contentPlaintext,
+							contentFacets: footnoteFeature.contentFacets
+						}
+					: undefined,
+				footnoteNumber
 			});
 		}
 
@@ -165,12 +217,30 @@
 	}
 
 	const segments = $derived(processSegments());
+
+	// Footnote feature type
+	interface FootnoteFeature {
+		$type: 'pub.leaflet.richtext.facet#footnote';
+		footnoteId: string;
+		contentPlaintext: string;
+		contentFacets?: Facet[];
+	}
 </script>
 
 {#each segments as segment, i}
 	{#each segment.parts as part, j}
 		{#if part.isBr}
 			<br />
+		{:else if segment.isFootnote}
+			<!-- Footnote reference -->
+			<a
+				href="#{segment.footnote?.footnoteId}"
+				class="footnote-ref"
+				class:themed={hasTheme}
+				id="{segment.footnote?.footnoteId}-ref"
+			>
+				<sup>{segment.footnoteNumber ?? '*'}</sup>
+			</a>
 		{:else if segment.isMath}
 			<InlineMath tex={part.text} {hasTheme} />
 		{:else}
@@ -269,4 +339,19 @@
 		-webkit-box-decoration-break: clone;
 		background-color: rgb(255, 177, 177);
 	}
+
+	.footnote-ref {
+		text-decoration: none;
+		color: rgb(0 0 225);
+		font-size: 0.75em;
+		padding: 0 0.1em;
+	}
+
+	.footnote-ref.themed {
+		color: var(--theme-accent);
+	}
+
+	.footnote-ref:hover {
+		text-decoration: underline;
+	}
 </style>

package/dist/components/document/RichText.svelte.d.ts

@@ -12,6 +12,8 @@ interface Props {
     plaintext: string;
     facets?: Facet[];
     hasTheme?: boolean;
+    /** Footnote index in the document (for numbering) */
+    footnoteIndex?: number;
 }
 declare const RichText: import("svelte").Component<Props, {}, "">;
 type RichText = ReturnType<typeof RichText>;