@atmo-dev/kit 0.7.2 → 0.9.0

package/README.md

@@ -16,6 +16,67 @@ Svelte 5 and Tailwind CSS 4 components for Atmo apps.
 for a separated, filled creation action in the rail, mobile bar or drawer. The
 existing `primary` flag alone retains its subtle accent/spacing behavior.
 
+### Sidebar account menu
+
+Use `AccountMenu` in a signed-in sidebar footer. Its avatar button opens just
+**Go to profile** and **Sign out**; there is no account switching. `expanded`
+adds the name and optional handle for wider sidebars and mobile drawers.
+
+```svelte
+<IconRail label="Navigation" {items}>
+	{#snippet footer({ expanded, close })}
+		{#if viewer}
+			<AccountMenu
+				name={viewer.displayName || viewer.handle}
+				handle={viewer.handle}
+				avatar={viewer.avatar}
+				profileHref={`/p/${encodeURIComponent(viewer.did)}`}
+				{expanded}
+				onprofile={close}
+				onsignout={() => {
+					close();
+					signOut();
+				}}
+			/>
+		{/if}
+	{/snippet}
+</IconRail>
+```
+
+Both components are exported from `@atmo-dev/kit`. Use `profileHref` for a native
+link, or omit it and supply `onprofile` for app-owned navigation. Apps own the
+profile route, session, sign-out request, and signed-out UI. The menu handles
+keyboard navigation, dismissal, focus restoration and portaled theme inheritance.
+
+## Safe link destinations
+
+Use the dependency-free `@atmo-dev/kit/urls` entry in server loaders and components:
+
+```ts
+import { safeHttpUrl, safeLinkHref } from '@atmo-dev/kit/urls';
+
+const website = safeHttpUrl(record.url);
+const navigation = safeLinkHref(card.href);
+```
+
+- `safeHttpUrl(unknown)` accepts absolute HTTP(S) URLs without usernames/passwords
+  and returns their normalized URL. Use it for untrusted external record URLs.
+- `safeLinkHref(unknown)` additionally allows root-relative app paths, fragments,
+  `mailto:` and `tel:` actions. Protocol-relative paths and backslash/control-character
+  local/contact links are rejected. It does not resolve `./` or `../` relative paths.
+- Invalid input returns `undefined`: pass the result to `href`, or omit the link.
+  Never fall back to the original untrusted value. `target="_blank"` is not URL validation.
+
+The helpers perform no IO and import no Svelte, DOM or Markdown parser. They are also
+exported from the main Kit entry. Existing `safeWebUrl` exports from richtext remain
+aliases of `safeHttpUrl`. Rich-text mention callbacks and legal links retain their
+stricter destination policies. Generic UI primitives such as Button still accept
+app-owned routes; validate untrusted values before passing them in.
+
+These are **navigation** policies, not HTML sanitizers or SSRF protection. Image,
+iframe and media sources may require tighter policies. Server-side fetching needs
+separate host/IP, DNS, redirect and response-content checks.
+
 ## AT record metadata (AT Tags)
 
 Use `AtTags` to let other clients discover which AT Protocol records and identities
@@ -121,7 +182,19 @@ The event UI formerly in `@atmo-dev/events-ui` lives in this package:
 - `@atmo-dev/kit/events-data`: structural event types, adapter contracts, conference/date helpers, URL helpers, theme values, linked-record types and thumbnail selection. This entry is safe in plain Node and server routes: no Svelte, CSS, maps or players are loaded. Browser helpers such as `compressImage` only access browser APIs when called.
 - `@atmo-dev/kit/events/editor`: `buildEventRecord` and `buildThumbnailMedia` for hosts that need explicit record construction. This separate entry includes browser-oriented thumbnail code; it is not part of the pure data API.
 
-Event descriptions are plain text with AT Protocol facets, rendered by the shared `RichText` component using Svelte text and links—not HTML. Markdown and raw HTML are displayed literally; existing records are not rewritten. Line breaks are preserved. Facet mentions link to local profiles, hashtags use the viewer's preferred social client, and link facets accept only HTTP(S) URLs without credentials. Malformed, overlapping or invalid UTF-8 facet ranges are ignored without dropping text. Descriptions without facets detect plain-text links, mentions and hashtags, with no network requests or Markdown interpretation. There is no sanitizer or asynchronous browser-only fallback.
+Event descriptions are Markdown with AT Protocol facets. Parse them on the server and pass the result as `data.description`, so the Markdown parser stays out of the client bundle:
+
+```ts
+import { parseRichText } from '@atmo-dev/kit/richtext';
+
+const description = event.description
+	? parseRichText(event.description, { facets: event.facets, markdown: true, detectLinks: true })
+	: null;
+```
+
+Without `data.description`, `EventView` shows the description as plain text with facet links. Description headings render one level below the event title, and the Bluesky share card uses `richTextToPlainText(description)`. Conference schedules show talk descriptions as short previews: pass `conferenceTalkDescriptions`, plain text keyed by talk URI, so Markdown syntax does not appear there. See [Rich text](#rich-text) for what is supported.
+
+Event components read Bluesky's public AppView and CDN by default. Apps using other services call `configureAtproto({ appview, cdn })` from `events-data` once, before rendering, on both the server and the client (for example at the top of the root layout).
 
 Event cards and covers prefer native `media` images, then an HTTPS `poster.url`, then a URI named `Event Image` (laugh.town compatibility). `getEventExternalImage(event)` from `events-data` returns `{ url, alt, aspectRatio? }` or `null`, validating URLs and optional poster dimensions. It performs no IO; apps must apply their own allowlist/redirect policy before fetching an external image server-side.
 
@@ -194,25 +267,43 @@ For now, `createGrainXrpcClient(fetchImpl?)` provides the Grain.social implement
 
 Use `blueskyPostToPostData(postView)` to convert public AppView posts, including `repostCount`. `PostContent` supports images, galleries, external link cards, HLS video, quoted posts (including their embeds), record-with-media combinations, feeds, lists, starter packs, and moderation-service cards. Missing, blocked, and detached quotes have readable placeholders; unknown embed variants show an unavailable fallback. Quote nesting is capped at three levels. Non-post record cards use Bluesky routes, since other clients may not implement them. Apps still own fetching and moderation.
 
-### Plain text and facets
+### Rich text
 
-`RichText` is the text renderer shared by posts and event descriptions:
+`RichText` renders text shared by posts, event descriptions and other user content. Plain text can be passed directly:
 
 ```svelte
-<script lang="ts">
-	import { RichText } from '@atmo-dev/kit';
-</script>
-
 <RichText
-	text={description}
-	{facets}
+	text={post.text}
+	facets={post.facets}
 	{socialClient}
 	mentionUrl={(actor) => `/p/${encodeURIComponent(actor)}`}
-	detectLinks
 />
 ```
 
-Only `text` is required. By default, only explicit facets become links. `detectLinks` enables plain-text URL, mention and hashtag detection when no facets are supplied. `socialClient` selects mention/hashtag destinations; `mentionUrl` overrides mention routing with an app-owned HTTP(S) URL or root-relative path. Local links stay in the same tab; external links use `noopener noreferrer nofollow ugc`. The component renders a paragraph, preserves whitespace, wraps long text, and accepts `class`. Text is never parsed as HTML or Markdown. Post text retains Bluesky facet destinations by default.
+For Markdown, parse with `@atmo-dev/kit/richtext` (no Svelte or DOM; works in Workers) and pass `content`:
+
+```ts
+// +page.server.ts
+import { parseRichText } from '@atmo-dev/kit/richtext';
+
+const content = parseRichText(text, { facets, markdown: true, detectLinks: true });
+```
+
+```svelte
+<RichText {content} {socialClient} headingOffset={1} />
+```
+
+Each feature can be turned on separately:
+
+- `markdown`: CommonMark plus `~~strikethrough~~`. Single newlines are line breaks. Raw HTML is shown as written. Images are never loaded; they become links labeled by their alt text. Tables and other extensions stay literal text. Text over 10,000 characters, with more than 1,000 `*`, `_`, `~` or `[` characters, or with more than 8 nested quote or list markers on a line, is rendered as plain text, because the parser slows down quadratically on some inputs. Without `markdown`, text is plain and whitespace is preserved.
+- `facets`: record facets are validated at runtime. Malformed, overlapping or mid-character ranges are ignored without dropping text. In Markdown, facets apply to formatted text such as `**@alice**`; facets in code, inside Markdown links, across Markdown syntax or on text changed by escapes or entities are ignored.
+- `detectLinks`: detects URLs, mentions and hashtags when there are no facets, outside code and existing links. Detection uses the mention, hashtag and URL rules of `@atcute/bluesky-richtext-parser` in one linear pass. Its `tokenize` also parses emphasis and backtracks badly on runs of `*` (a hundred take minutes), so do not run it on untrusted text; `detectTokens` from `@atmo-dev/kit/richtext` returns compatible tokens.
+
+Links accept only HTTP(S) URLs without credentials. `socialClient` selects mention and hashtag destinations; `mentionUrl` overrides mention routing with an HTTP(S) URL or root-relative path. Local links stay in the same tab; external links use `noopener noreferrer nofollow ugc`. Post text keeps Bluesky destinations by default.
+
+The parsed `RichTextDocument` is plain JSON with a `version`, independent of the viewer, so it can be sent in page data and cached publicly. `RichText` still treats it as untrusted: it renders only known elements, checks every link again and shows unknown nodes as text. Prefer parsing per request (a few milliseconds) over storing documents. `richTextToPlainText(content)` returns text without Markdown syntax for meta descriptions and previews.
+
+To parse in the browser, for example in an editor preview, load the parser on demand with `await import('@atmo-dev/kit/richtext')` so it is not part of the initial bundle.
 
 ### Special link embeds
 

package/dist/components/AccountMenu.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import { DropdownMenu } from 'bits-ui';
+	import { UserRound, LogOut } from '@sketchyicons/svelte';
+	import Avatar from './Avatar.svelte';
+	import Button from './Button.svelte';
+	import Icon from './Icon.svelte';
+	import { cn } from '../utils.js';
+	import { readTheme, observeTheme } from '../theme.js';
+
+	let {
+		name,
+		handle,
+		avatar,
+		profileHref,
+		onprofile,
+		onsignout,
+		expanded = false,
+		open = $bindable(false),
+		label = 'Account menu',
+		class: className
+	}: {
+		name: string;
+		handle?: string;
+		avatar?: string;
+		onsignout: () => void;
+		expanded?: boolean;
+		open?: boolean;
+		label?: string;
+		class?: string;
+	} & (
+		| { profileHref: string; onprofile?: () => void }
+		| { profileHref?: undefined; onprofile: () => void }
+	) = $props();
+
+	let origin = $state<HTMLButtonElement | HTMLAnchorElement | null>(null);
+	let inherited = $state('');
+	$effect(() => {
+		if (!open || !origin) return;
+		const sync = () => (inherited = readTheme(origin!));
+		sync();
+		return observeTheme(origin, sync);
+	});
+	const itemClass =
+		'min-h-11 w-full justify-start gap-3 px-3 text-sm text-ink outline-none data-highlighted:bg-recess data-highlighted:text-ink';
+</script>
+
+<DropdownMenu.Root bind:open>
+	<DropdownMenu.Trigger>
+		{#snippet child({ props })}
+			<Button
+				{...props}
+				bind:ref={origin}
+				variant="ghost"
+				aria-label={label}
+				data-account-menu-trigger
+				class={cn(
+					'gap-3 p-1.5 data-[state=open]:bg-recess',
+					expanded ? 'w-full justify-start px-2' : 'size-11 max-sm:size-10',
+					className
+				)}
+			>
+				<Avatar {name} src={avatar} size={30} aria-hidden="true" />
+				{#if expanded}
+					<span class="min-w-0 text-left">
+						<span class="block truncate text-sm text-ink">{name}</span>
+						{#if handle}<span class="block truncate text-xs text-muted"
+								>@{handle.replace(/^@/, '')}</span
+							>{/if}
+					</span>
+				{/if}
+			</Button>
+		{/snippet}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Portal>
+		<DropdownMenu.Content
+			side="top"
+			align="start"
+			sideOffset={8}
+			collisionPadding={12}
+			loop
+			aria-label={label}
+			data-slot="account-menu"
+			style={inherited}
+			class="z-60 w-56 max-w-[calc(100vw-1.5rem)] rounded-panel border border-line bg-page p-1.5 font-sans text-ink outline-none"
+		>
+			<DropdownMenu.Item onSelect={onprofile} textValue="Go to profile">
+				{#snippet child({ props })}
+					<Button {...props} href={profileHref} variant="ghost" class={itemClass}>
+						<Icon img={UserRound} size={20} class="text-muted" />Go to profile
+					</Button>
+				{/snippet}
+			</DropdownMenu.Item>
+			<DropdownMenu.Item onSelect={onsignout} textValue="Sign out">
+				{#snippet child({ props })}
+					<Button {...props} variant="ghost" class={itemClass}>
+						<Icon img={LogOut} size={20} class="text-muted" />Sign out
+					</Button>
+				{/snippet}
+			</DropdownMenu.Item>
+		</DropdownMenu.Content>
+	</DropdownMenu.Portal>
+</DropdownMenu.Root>

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

@@ -0,0 +1,19 @@
+type $$ComponentProps = {
+    name: string;
+    handle?: string;
+    avatar?: string;
+    onsignout: () => void;
+    expanded?: boolean;
+    open?: boolean;
+    label?: string;
+    class?: string;
+} & ({
+    profileHref: string;
+    onprofile?: () => void;
+} | {
+    profileHref?: undefined;
+    onprofile: () => void;
+});
+declare const AccountMenu: import("svelte").Component<$$ComponentProps, {}, "open">;
+type AccountMenu = ReturnType<typeof AccountMenu>;
+export default AccountMenu;

package/dist/components/Button.svelte

@@ -61,7 +61,7 @@
 		{...rest}
 		bind:this={ref}
 		href={disabled || loading ? undefined : href}
-		role={disabled || loading ? 'link' : undefined}
+		role={disabled || loading ? 'link' : rest.role}
 		class={classes}
 		data-slot="button"
 		data-variant={variant}

package/dist/components/ExternalEmbed.svelte

@@ -6,7 +6,7 @@
 		type ExternalEmbedProvider,
 		type ExternalPostEmbed
 	} from '../social/external-embeds.js';
-	import { safeWebUrl } from '../social/richtext.js';
+	import { safeHttpUrl as safeWebUrl } from '../urls.js';
 	import { focus } from '../styles.js';
 	import Icon from './Icon.svelte';
 	import LinkCard from './LinkCard.svelte';

package/dist/components/LinkCard.svelte

@@ -2,7 +2,7 @@
 	import type { HTMLAnchorAttributes } from 'svelte/elements';
 	import { cn } from '../utils.js';
 	import { focus } from '../styles.js';
-	import { safeWebUrl } from '../social/richtext.js';
+	import { safeHttpUrl as safeWebUrl } from '../urls.js';
 	let {
 		href,
 		meta,

package/dist/components/NestedComments.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { PostData } from '../social/posts.js';
 	import type { ExternalEmbedProvider } from '../social/external-embeds.js';
-	import { safeWebUrl } from '../social/richtext.js';
+	import { safeHttpUrl as safeWebUrl } from '../urls.js';
 	import { socialPostUrl, socialProfileUrl } from '../social/urls.js';
 	import type { PreferredSocialClient } from '../social/preferred-client.js';
 	import { Heart, MessageCircle, Repeat2 } from '@sketchyicons/svelte';

package/dist/components/PostContent.svelte

@@ -5,7 +5,7 @@
 	import { socialPostUrl } from '../social/urls.js';
 	import { focus } from '../styles.js';
 	import Icon from './Icon.svelte';
-	import { safeWebUrl } from '../social/richtext.js';
+	import { safeHttpUrl as safeWebUrl } from '../urls.js';
 	import RichText from './RichText.svelte';
 	import type { ExternalEmbedProvider } from '../social/external-embeds.js';
 	import ExternalEmbed from './ExternalEmbed.svelte';

package/dist/components/PostVideo.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { safeWebUrl } from '../social/richtext.js';
+	import { safeHttpUrl as safeWebUrl } from '../urls.js';
 	import Icon from './Icon.svelte';
 	import { ArrowUpRight } from '@sketchyicons/svelte';
 	let {

package/dist/components/RichText.svelte

@@ -1,33 +1,146 @@
 <script lang="ts">
-	import { richTextSegments, type RichTextOptions } from '../social/richtext.js';
+	import {
+		inlineHref,
+		inlineText,
+		MAX_RENDER_DEPTH,
+		type RichTextDocument,
+		type RichTextLinkOptions
+	} from '../richtext/document.js';
+	import { parsePlainText } from '../richtext/plain.js';
 	import { cn } from '../utils.js';
 
-	export type RichTextProps = RichTextOptions & {
-		text: string;
+	export type RichTextProps = RichTextLinkOptions & {
+		/** From `parseRichText`, usually on the server. Takes precedence over `text`. */
+		content?: RichTextDocument | null;
+		/** Plain text, parsed here; Markdown requires `content`. */
+		text?: string;
 		/** Public record data is validated at runtime, including malformed facets. */
 		facets?: unknown;
+		/** Detect plain-text links, mentions and hashtags when there are no facets. */
+		detectLinks?: boolean;
+		/** Added to Markdown heading levels, e.g. 1 renders `#` as h2 below a page's h1. */
+		headingOffset?: number;
 		class?: string;
 	};
 
 	let {
-		text,
+		content,
+		text = '',
 		facets,
+		detectLinks = false,
 		socialClient,
 		mentionUrl,
-		detectLinks = false,
+		headingOffset = 0,
 		class: className
 	}: RichTextProps = $props();
-	let segments = $derived(
-		richTextSegments(text, facets, { socialClient, mentionUrl, detectLinks })
-	);
+
+	let doc = $derived(content ?? parsePlainText(text, { facets, detectLinks }));
+
+	type Node = Record<string, unknown>;
+
+	function isNode(value: unknown): value is Node {
+		return value !== null && typeof value === 'object' && !Array.isArray(value);
+	}
+	function nodes(value: unknown): Node[] {
+		return Array.isArray(value) ? value.filter(isNode) : [];
+	}
+	function items(value: unknown): unknown[] {
+		return Array.isArray(value) ? value.filter(Array.isArray) : [];
+	}
+	function string(value: unknown): string {
+		return typeof value === 'string' ? value : '';
+	}
+
+	function href(node: Node): string | undefined {
+		return inlineHref(node, { socialClient, mentionUrl });
+	}
+
+	function heading(depth: unknown): string {
+		const level = (Number.isInteger(depth) ? (depth as number) : 6) + Math.trunc(headingOffset);
+		return `h${Math.min(6, Math.max(1, level))}`;
+	}
+
+	const linkClass =
+		'text-action underline decoration-action/40 underline-offset-2 hover:decoration-action';
+	const codeClass = 'rounded bg-recess px-1 py-0.5 font-mono text-[0.875em]';
 </script>
 
-<p class={cn('leading-relaxed wrap-anywhere whitespace-pre-wrap text-ink', className)}>
-	{#each segments as segment, index (index)}{#if segment.href}<a
-				href={segment.href}
-				target={segment.href.startsWith('/') ? undefined : '_blank'}
-				rel={segment.href.startsWith('/') ? undefined : 'noopener noreferrer nofollow ugc'}
-				class="text-action underline decoration-action/40 underline-offset-2 hover:decoration-action"
-				>{segment.text}</a
-			>{:else}{segment.text}{/if}{/each}
-</p>
+{#snippet inlines(children: unknown, inLink: boolean, depth: number)}
+	{#each nodes(children) as node, index (index)}
+		{#if depth > MAX_RENDER_DEPTH}{inlineText(node, depth)}
+		{:else if node.type === 'text'}{string(node.value)}
+		{:else if node.type === 'break'}<br />
+		{:else if node.type === 'strong'}<strong class="font-semibold"
+				>{@render inlines(node.children, inLink, depth + 1)}</strong
+			>
+		{:else if node.type === 'emphasis'}<em>{@render inlines(node.children, inLink, depth + 1)}</em>
+		{:else if node.type === 'delete'}<del>{@render inlines(node.children, inLink, depth + 1)}</del>
+		{:else if node.type === 'code'}<code class={codeClass}>{string(node.value)}</code>
+		{:else if node.type === 'link' || node.type === 'mention' || node.type === 'tag'}
+			{@const url = inLink ? undefined : href(node)}
+			{#if url}<a
+					href={url}
+					target={url.startsWith('/') ? undefined : '_blank'}
+					rel={url.startsWith('/') ? undefined : 'noopener noreferrer nofollow ugc'}
+					class={linkClass}
+					>{#if node.type === 'link'}{@render inlines(
+							node.children,
+							true,
+							depth + 1
+						)}{:else}{string(node.text)}{/if}</a
+				>
+			{:else if node.type === 'link'}{@render inlines(node.children, inLink, depth + 1)}
+			{:else}{string(node.text)}{/if}
+		{:else}{inlineText(node, depth)}{/if}
+	{/each}
+{/snippet}
+
+{#snippet blocks(children: unknown, depth: number)}
+	{#each nodes(children) as node, index (index)}
+		{#if depth > MAX_RENDER_DEPTH}<p>{inlineText(node, depth)}</p>
+		{:else if node.type === 'paragraph'}<p>{@render inlines(node.children, false, depth + 1)}</p>
+		{:else if node.type === 'heading'}<svelte:element
+				this={heading(node.depth)}
+				class="{node.depth === 1
+					? 'text-xl'
+					: node.depth === 2
+						? 'text-lg'
+						: 'text-base'} leading-snug font-semibold"
+				>{@render inlines(node.children, false, depth + 1)}</svelte:element
+			>
+		{:else if node.type === 'blockquote'}<blockquote class="space-y-3 border-l-2 border-line pl-4">
+				{@render blocks(node.children, depth + 1)}
+			</blockquote>
+		{:else if node.type === 'list'}<svelte:element
+				this={node.ordered === true ? 'ol' : 'ul'}
+				start={node.ordered === true && Number.isInteger(node.start)
+					? (node.start as number)
+					: undefined}
+				class={cn('space-y-1 pl-6', node.ordered === true ? 'list-decimal' : 'list-disc')}
+			>
+				{#each items(node.items) as item, itemIndex (itemIndex)}
+					<li class="space-y-3">{@render blocks(item, depth + 1)}</li>
+				{/each}
+			</svelte:element>
+		{:else if node.type === 'codeBlock'}<pre
+				class="overflow-x-auto rounded-md bg-recess p-3 font-mono text-[0.875em]"><code
+					>{string(node.value)}</code
+				></pre>
+		{:else if node.type === 'thematicBreak'}<hr class="border-line" />
+		{:else}<p>{inlineText(node, depth)}</p>{/if}
+	{/each}
+{/snippet}
+
+{#if doc.markdown}
+	<div class={cn('space-y-3 leading-relaxed wrap-anywhere text-ink', className)}>
+		{@render blocks(doc.children, 0)}
+	</div>
+{:else}
+	<p class={cn('leading-relaxed wrap-anywhere whitespace-pre-wrap text-ink', className)}>
+		{#each nodes(doc.children) as block, index (index)}{@render inlines(
+				block.children,
+				false,
+				1
+			)}{/each}
+	</p>
+{/if}

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

@@ -1,8 +1,15 @@
-import { type RichTextOptions } from '../social/richtext.js';
-export type RichTextProps = RichTextOptions & {
-    text: string;
+import { type RichTextDocument, type RichTextLinkOptions } from '../richtext/document.js';
+export type RichTextProps = RichTextLinkOptions & {
+    /** From `parseRichText`, usually on the server. Takes precedence over `text`. */
+    content?: RichTextDocument | null;
+    /** Plain text, parsed here; Markdown requires `content`. */
+    text?: string;
     /** Public record data is validated at runtime, including malformed facets. */
     facets?: unknown;
+    /** Detect plain-text links, mentions and hashtags when there are no facets. */
+    detectLinks?: boolean;
+    /** Added to Markdown heading levels, e.g. 1 renders `#` as h2 below a page's h1. */
+    headingOffset?: number;
     class?: string;
 };
 declare const RichText: import("svelte").Component<RichTextProps, {}, "">;

package/dist/components/legal/links.js

@@ -1,3 +1,4 @@
+import { safeHttpUrl } from '../../urls.js';
 /** Same-origin absolute paths and web URLs only. Never executable, credentialed,
  * protocol-relative, or backslash-normalized URLs. Mail is allowed explicitly. */
 export function safeLegalHref(value, allowMail = false) {
@@ -9,15 +10,7 @@ export function safeLegalHref(value, allowMail = false) {
         return value;
     if (allowMail && /^mailto:[^@<>?&#%]+@[^@<>?&#%]+\.[^@<>?&#%]+$/.test(value))
         return value;
-    try {
-        const url = new URL(value);
-        if (['http:', 'https:'].includes(url.protocol) && !url.username && !url.password)
-            return url.href;
-    }
-    catch {
-        /* Invalid URLs remain non-clickable. */
-    }
-    return undefined;
+    return safeHttpUrl(value);
 }
 const labels = {
     terms: 'Terms',

package/dist/events/EventComments.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { NestedComments, blueskyPostToPostData, type PostData } from '../index.js';
+	import { appviewUrl } from './atproto-helpers.js';
 
 	import { socialClientInfo, socialPostUrl, type PreferredSocialClient } from '../social.js';
 
@@ -34,7 +35,7 @@
 		errorMessage = null;
 		try {
 			const res = await fetch(
-				`https://public.api.bsky.app/xrpc/app.bsky.feed.getPostThread?uri=${encodeURIComponent(uri)}&depth=6`,
+				`${appviewUrl()}/xrpc/app.bsky.feed.getPostThread?uri=${encodeURIComponent(uri)}&depth=6`,
 				{ signal }
 			);
 			if (!res.ok) throw new Error(`Failed to load thread (${res.status})`);

package/dist/events/EventView.svelte

@@ -32,6 +32,7 @@
 	import AddToCalendarButton from './event-view/AddToCalendarButton.svelte';
 	import ExternalRsvpNotice from './event-view/ExternalRsvpNotice.svelte';
 	import RichText from '../components/RichText.svelte';
+	import { richTextToPlainText } from '../richtext/document.js';
 	import { getLocalProfileUrl } from './profile-url.js';
 	import { getLocations, resolveGeoLocation, type GeoLocation } from './event-view/locations.js';
 
@@ -109,7 +110,7 @@
 	let canSetEventComments = $state(false);
 	let isHost = $derived(!!viewer.did && viewer.did === did);
 	let hasComments = $derived(!!eventData.bskyPostRef?.showComments && !!eventData.bskyPostRef?.uri);
-	let hasDescription = $derived(!!eventData.description);
+	let hasDescription = $derived(!!eventData.description?.trim());
 	let aboutCommentsTab = $state<string>('about');
 	let photoLinks = $derived(eventData.uris?.filter((link) => parseGrainLink(link.uri)) ?? []);
 	let contentTabs = $derived([
@@ -203,7 +204,9 @@
 	let eventActor = $derived(hostProfile?.handle || did);
 	let conferenceRooms = $derived(getConferenceRooms(eventData));
 	let scheduleEvents = $derived(
-		isConference ? toScheduleEvents(data.conferenceTalks ?? [], eventUri) : []
+		isConference
+			? toScheduleEvents(data.conferenceTalks ?? [], eventUri, data.conferenceTalkDescriptions)
+			: []
 	);
 
 	// Imported events can opt out of atmo's own RSVPs (rsvpMode === 'external_only').
@@ -390,11 +393,13 @@
 						{/if}
 						{#if activeTab === 'about'}
 							<RichText
+								content={data.description}
 								text={eventData.description ?? ''}
 								facets={eventData.facets}
 								mentionUrl={getLocalProfileUrl}
 								socialClient={viewer.preferredSocialClient}
 								detectLinks
+								headingOffset={1}
 								class="text-base-700 dark:text-base-300"
 							/>
 						{:else if activeTab === 'comments' && eventData.bskyPostRef?.uri}
@@ -482,7 +487,9 @@
 	{canSetEventComments}
 	eventDid={did}
 	eventRkey={rkey}
-	eventDescription={eventData.description}
+	eventDescription={data.description
+		? richTextToPlainText(data.description)
+		: eventData.description}
 	{adapter}
 	{viewer}
 />

package/dist/events/PostToBlueskyModal.svelte

@@ -12,8 +12,9 @@
 		graphemeLength,
 		type Editor
 	} from '../index.js';
-	import { tokenize } from '@atcute/bluesky-richtext-parser';
+	import { detectTokens } from '../richtext/detect.js';
 	import { tokensToFacets } from './editor/save.js';
+	import { appviewUrl } from './atproto-helpers.js';
 	import type { EditorAdapter, EditorViewer } from './editor/adapter.js';
 
 	let {
@@ -44,7 +45,7 @@
 		onPosted?: (ref: { uri: string; cid: string; showComments: boolean }) => void;
 	} = $props();
 
-	const searchActors = createActorSearch();
+	const searchActors = createActorSearch({ host: appviewUrl() });
 	let text = $state('');
 	let editor = $state<Editor | null>(null);
 	let prefilledForOpen = $state(false);
@@ -104,7 +105,7 @@
 				return;
 			}
 			// Also recognize handles typed or pasted without selecting a suggestion.
-			const detected = await tokensToFacets(tokenize(text), (handle) =>
+			const detected = await tokensToFacets(detectTokens(text), (handle) =>
 				adapter.resolveHandle(handle)
 			);
 			for (const facet of detected) {

package/dist/events/atproto-helpers.d.ts

@@ -2,6 +2,12 @@
  * Pure browser-safe atproto helpers used by the UI components. Does not depend
  * on any session/client state — those flow through the EditorAdapter.
  */
+/** Configure shared event components before rendering on the server and in the browser. */
+export declare function configureAtproto(options: {
+    appview?: string;
+    cdn?: string;
+}): void;
+export declare function appviewUrl(): string;
 export declare function getCDNImageBlobUrl({ did, blob, format }: {
     did: string;
     blob: {