@atmo-dev/kit 0.8.0 → 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

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/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/event-view/EventLinksList.svelte

@@ -1,14 +1,23 @@
 <script lang="ts">
 	import { Icon } from '../../index.js';
 	import { Link } from '@sketchyicons/svelte';
+	import { safeHttpUrl } from '../../urls.js';
 	let { uris = [] }: { uris?: Array<{ uri: string; name?: string }> } = $props();
+	let links = $derived(
+		uris.flatMap((link) => {
+			const uri = safeHttpUrl(link?.uri);
+			return uri ? [{ ...link, uri }] : [];
+		})
+	);
 </script>
 
-{#if uris.length}
+{#if links.length}
 	<div>
 		<p class="mb-3 text-xs font-medium text-muted">Links</p>
 		<div class="space-y-3">
-			{#each uris as link (link.name + link.uri)}
+			<!-- These rows are stateless; equivalent URLs and exact duplicate entries are valid. -->
+			<!-- eslint-disable-next-line svelte/require-each-key -->
+			{#each links as link}
 				<a
 					href={link.uri}
 					target="_blank"

package/dist/events/event-view/ExternalRsvpNotice.svelte

@@ -1,34 +1,38 @@
 <script lang="ts">
 	import { ArrowUpRight } from '@sketchyicons/svelte';
 	import { Button, Icon } from '../../index.js';
+	import { safeHttpUrl } from '../../urls.js';
 
 	// Shown in place of the RSVP controls for imported events whose host opted out
 	// of atmo RSVPs (additionalData.externalSource.rsvpMode === 'external_only').
 	// Directs attendees to the original event page instead.
 	let { url }: { url: string } = $props();
 
+	let href = $derived(safeHttpUrl(url));
 	let host = $derived.by(() => {
 		try {
-			return new URL(url).hostname.replace(/^www\./, '');
+			return new URL(href ?? '').hostname.replace(/^www\./, '');
 		} catch {
 			return null;
 		}
 	});
 </script>
 
-<div
-	class="mt-8 mb-2 flex flex-col gap-3 rounded-2xl border border-base-200 bg-base-100 p-4 sm:flex-row sm:items-center sm:justify-between dark:border-base-800 dark:bg-base-950/50"
->
-	<div class="min-w-0">
-		<p class="text-sm font-semibold text-base-900 dark:text-base-50">RSVP on the original page</p>
-		<p class="mt-0.5 text-xs text-base-600 dark:text-base-400">
-			{host
-				? `This event is hosted on ${host}. Head there to RSVP.`
-				: 'This event is hosted elsewhere. Open the original page to RSVP.'}
-		</p>
+{#if href}
+	<div
+		class="mt-8 mb-2 flex flex-col gap-3 rounded-2xl border border-base-200 bg-base-100 p-4 sm:flex-row sm:items-center sm:justify-between dark:border-base-800 dark:bg-base-950/50"
+	>
+		<div class="min-w-0">
+			<p class="text-sm font-semibold text-base-900 dark:text-base-50">RSVP on the original page</p>
+			<p class="mt-0.5 text-xs text-base-600 dark:text-base-400">
+				{host
+					? `This event is hosted on ${host}. Head there to RSVP.`
+					: 'This event is hosted elsewhere. Open the original page to RSVP.'}
+			</p>
+		</div>
+		<Button {href} target="_blank" rel="noopener noreferrer" class="shrink-0">
+			{host ? `RSVP on ${host}` : 'Open original event'}
+			<Icon img={ArrowUpRight} size={16} class="shrink-0" />
+		</Button>
 	</div>
-	<Button href={url} target="_blank" rel="noopener noreferrer" class="shrink-0">
-		{host ? `RSVP on ${host}` : 'Open original event'}
-		<Icon img={ArrowUpRight} size={16} class="shrink-0" />
-	</Button>
-</div>
+{/if}

package/dist/events/event-view/locations.js

@@ -1,3 +1,4 @@
+import { safeHttpUrl as webUrl } from '../../urls.js';
 function text(record, key) {
     const value = record[key];
     return typeof value === 'string' ? value.trim() || undefined : undefined;
@@ -20,17 +21,6 @@ function coordinateLabel({ lat, lng }) {
 function mapsUrl(query) {
     return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(query)}`;
 }
-function webUrl(uri) {
-    try {
-        const url = new URL(uri);
-        if (url.protocol === 'https:' || url.protocol === 'http:')
-            return url.href;
-    }
-    catch {
-        // Invalid URLs render as non-interactive location text.
-    }
-    return undefined;
-}
 function formatLocation(value) {
     if (!value || typeof value !== 'object')
         return null;

package/dist/index.d.ts

@@ -54,6 +54,7 @@ export type { IconNode, SketchyIconProps } from '@sketchyicons/svelte';
 export { default as IconRail } from './components/IconRail.svelte';
 export type { IconRailItem } from './components/IconRail.svelte';
 export { default as WorkspaceSidebar } from './components/WorkspaceSidebar.svelte';
+export { default as AccountMenu } from './components/AccountMenu.svelte';
 export { default as LoginForm } from './components/login/LoginForm.svelte';
 export type { LoginFormProps } from './components/login/LoginForm.svelte';
 export { default as LoginDialog } from './components/login/LoginDialog.svelte';
@@ -76,6 +77,7 @@ export { default as InlineEditor } from './components/InlineEditor.svelte';
 export { default as PostComposer } from './components/PostComposer.svelte';
 export { default as NestedComments } from './components/NestedComments.svelte';
 export { default as PostContent } from './components/PostContent.svelte';
+export { safeHttpUrl, safeLinkHref } from './urls.js';
 export { default as RichText } from './components/RichText.svelte';
 export type { RichTextProps } from './components/RichText.svelte';
 export type { RichTextDocument, RichTextLinkOptions } from './richtext/document.js';

package/dist/index.js

@@ -34,6 +34,7 @@ export { default as Tabs } from './components/Tabs.svelte';
 export { default as Icon } from './components/Icon.svelte';
 export { default as IconRail } from './components/IconRail.svelte';
 export { default as WorkspaceSidebar } from './components/WorkspaceSidebar.svelte';
+export { default as AccountMenu } from './components/AccountMenu.svelte';
 export { default as LoginForm } from './components/login/LoginForm.svelte';
 export { default as LoginDialog } from './components/login/LoginDialog.svelte';
 export { default as SignupPermissions } from './components/login/SignupPermissions.svelte';
@@ -51,6 +52,7 @@ export { default as InlineEditor } from './components/InlineEditor.svelte';
 export { default as PostComposer } from './components/PostComposer.svelte';
 export { default as NestedComments } from './components/NestedComments.svelte';
 export { default as PostContent } from './components/PostContent.svelte';
+export { safeHttpUrl, safeLinkHref } from './urls.js';
 export { default as RichText } from './components/RichText.svelte';
 export { default as ExternalEmbed } from './components/ExternalEmbed.svelte';
 export { defaultExternalEmbedProviders, youtubeEmbedProvider, klipyEmbedProvider, resolveExternalEmbed } from './social/external-embeds.js';

package/dist/richtext/document.d.ts

@@ -1,4 +1,6 @@
 import type { PreferredSocialClient } from '../social/preferred-client.js';
+import { safeHttpUrl as safeWebUrl } from '../urls.js';
+export { safeWebUrl };
 /**
  * Parsed rich text. It is plain JSON, so it can be produced on the server and sent in page
  * data. Renderers still treat it as untrusted and validate every node and destination.
@@ -61,7 +63,6 @@ export type RichTextLinkOptions = {
     /** App-owned mention destination; defaults to the selected social client. */
     mentionUrl?: (identifier: string) => string;
 };
-export declare function safeWebUrl(url: unknown): string | undefined;
 /** Only app-relative paths or HTTP(S), including for app-owned mention callbacks. */
 export declare function mentionHref(actor: unknown, options: RichTextLinkOptions): string | undefined;
 export declare function tagHref(tag: unknown, options: RichTextLinkOptions): string | undefined;

package/dist/richtext/document.js

@@ -1,18 +1,8 @@
 import { isActorIdentifier } from '@atcute/lexicons/syntax';
 import { socialHashtagUrl, socialProfileUrl } from '../social/urls.js';
-export function safeWebUrl(url) {
-    if (typeof url !== 'string' || !url)
-        return undefined;
-    try {
-        const parsed = new URL(url);
-        return ['https:', 'http:'].includes(parsed.protocol) && !parsed.username && !parsed.password
-            ? parsed.href
-            : undefined;
-    }
-    catch {
-        return undefined;
-    }
-}
+import { safeHttpUrl as safeWebUrl } from '../urls.js';
+// Backwards-compatible export for existing richtext and social consumers.
+export { safeWebUrl };
 /** Only app-relative paths or HTTP(S), including for app-owned mention callbacks. */
 export function mentionHref(actor, options) {
     if (typeof actor !== 'string' || !isActorIdentifier(actor))

package/dist/social/external-embeds.js

@@ -1,4 +1,4 @@
-import { safeWebUrl } from './richtext.js';
+import { safeHttpUrl as safeWebUrl } from '../urls.js';
 function youtubeStart(value) {
     if (!value)
         return 0;

package/dist/social/profile.js

@@ -1,5 +1,5 @@
 import { detectTokens } from '../richtext/detect.js';
-import { safeWebUrl } from './richtext.js';
+import { safeHttpUrl as safeWebUrl } from '../urls.js';
 import { socialHashtagUrl, socialProfileUrl } from './urls.js';
 /** Only web URLs; never accept executable schemes or disguised credentials. */
 export function safeProfileUrl(value) {

package/dist/urls.d.ts

@@ -0,0 +1,9 @@
+/** Untrusted external destinations: absolute HTTP(S) URLs without credentials.
+ * This validates browser destinations, not hosts for server-side fetching (SSRF).
+ */
+export declare function safeHttpUrl(value: unknown): string | undefined;
+/** Navigation also supports root-relative app paths, fragments and mail/phone actions.
+ * Use safeHttpUrl instead when a record field must contain an external website.
+ * Invalid destinations return undefined so renderers omit href rather than falling back to it.
+ */
+export declare function safeLinkHref(value: unknown): string | undefined;

package/dist/urls.js

@@ -0,0 +1,39 @@
+/** Untrusted external destinations: absolute HTTP(S) URLs without credentials.
+ * This validates browser destinations, not hosts for server-side fetching (SSRF).
+ */
+export function safeHttpUrl(value) {
+    if (typeof value !== 'string' || !value)
+        return undefined;
+    try {
+        const url = new URL(value);
+        return (url.protocol === 'https:' || url.protocol === 'http:') && !url.username && !url.password
+            ? url.href
+            : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+/** Navigation also supports root-relative app paths, fragments and mail/phone actions.
+ * Use safeHttpUrl instead when a record field must contain an external website.
+ * Invalid destinations return undefined so renderers omit href rather than falling back to it.
+ */
+export function safeLinkHref(value) {
+    const http = safeHttpUrl(value);
+    if (http)
+        return http;
+    if (typeof value !== 'string' || !value)
+        return undefined;
+    // Never normalize an ambiguous local/contact link into a different destination.
+    if (Array.from(value).some((c) => c === '\\' || c.charCodeAt(0) <= 0x20 || c.charCodeAt(0) === 0x7f))
+        return undefined;
+    if (value.startsWith('#') || (value.startsWith('/') && !value.startsWith('//')))
+        return value;
+    try {
+        const url = new URL(value);
+        return url.protocol === 'mailto:' || url.protocol === 'tel:' ? url.href : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atmo-dev/kit",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "The shared UI foundation for Atmo apps.",
   "license": "MIT",
   "repository": {
@@ -56,6 +56,10 @@
       "types": "./dist/media.d.ts",
       "default": "./dist/media.js"
     },
+    "./urls": {
+      "types": "./dist/urls.d.ts",
+      "default": "./dist/urls.js"
+    },
     "./richtext": {
       "types": "./dist/richtext.d.ts",
       "default": "./dist/richtext.js"