@atmo-dev/kit 0.0.2 → 0.2.0

package/README.md

@@ -8,3 +8,102 @@ Svelte 5 and Tailwind CSS 4 components for Atmo apps.
 - Validate: `pnpm lint && pnpm check && pnpm test:ci && pnpm build`.
 - Releases: `pnpm changeset`, then merge the generated release PR. [Details](.changeset/README.md).
 - License: [MIT](LICENSE).
+
+## Login identifiers
+
+`LoginForm` and `LoginDialog` accept handles and DIDs by default. Handles are trimmed, stripped of leading `@` characters, and lowercased. DIDs are trimmed only: method-specific case and percent encoding are preserved. `initialHandle` also accepts a DID; its existing name is retained for compatibility.
+
+The `login(identifier, actor?, options?)` and `onSuccess(identifier, actor?)` callbacks receive that identifier unchanged after normalization. A manually entered DID does not fabricate profile data or a recent-account record. Optional permission review works the same for either identifier.
+
+Validation is syntactic, not proof that an account exists. Apps own DID resolution, supported DID methods, OAuth, and sessions. DID inputs bypass optional handle-search providers and cancel pending suggestions.
+
+For other login entry points, import `normalizeIdentifier` and `isValidIdentifier`. Existing `normalizeHandle` and `isValidHandle` remain handle-only helpers; do not use them on DIDs.
+
+## Legal pages and footer
+
+`LegalDocument` renders app-owned document data with readable typography and an optional app-reviewed revision date. Publication status is metadata, not a visible page label. `LegalFooter` renders only configured links. Preview the actual pages at `/legal`; authoring configuration and diagnostics have their own view.
+
+```svelte
+<script lang="ts">
+	import { LegalDocument, LegalFooter } from '@atmo-dev/kit';
+	import { privacy } from './reviewed-policies';
+</script>
+
+<LegalDocument document={privacy} />
+<LegalFooter
+	links={{
+		terms: '/terms',
+		privacy: '/privacy',
+		imprint: '/imprint',
+		moderation: false,
+		report: '/report',
+		source: { label: 'Source code', href: 'https://github.com/example/project' }
+	}}
+/>
+```
+
+Every destination is optional: omit it or set it to `false` to hide it. A string uses the default label; `{ label, href }` customizes it. Plain `mailto:` destinations are accepted for reporting. Unsafe URLs are not made clickable. No links/actions means no empty footer. The footer forwards native attributes and `class`.
+
+An app-owned `reportAction` snippet replaces `links.report` with a contextual button/dialog trigger. Setting `links.report: false` disables that action too. The footer owns no session, reporting subject, dialog, or network operation.
+
+### Author and review documents
+
+Import framework-free helpers from `@atmo-dev/kit/legal` in a script:
+
+```ts
+import { createLegalDrafts, getLegalDraftIssues } from '@atmo-dev/kit/legal';
+
+const config = {
+	app: { name: 'Example', url: 'https://example.com', description: 'an event app' },
+	operator: { name: 'Operator', email: 'hello@example.com', address: [] },
+	privacy: [
+		{
+			id: 'storage',
+			title: 'Data storage',
+			paragraphs: [
+				'Describe actual data, purposes, recipients, retention, legal bases, and safeguards.'
+			]
+		}
+	],
+	moderation: [
+		{
+			id: 'reports',
+			title: 'Reporting',
+			paragraphs: ['Describe the working report channel and review procedure.']
+		}
+	]
+};
+console.error(getLegalDraftIssues(config));
+console.log(JSON.stringify(createLegalDrafts(config), null, 2));
+```
+
+Save generated documents in the consuming app, review/edit their wording, and render that snapshot—not a runtime call to `createLegalDrafts`. **A Kit upgrade must not silently rewrite a published policy.** The templates are drafts, not legal advice or a guarantee of compliance. They infer no jurisdiction, age threshold, legal basis, retention period, processor agreement, acceptance flow, or notice commitment. Operator facts can be reused across apps; each app still needs its actual processing and terms reviewed.
+
+`LegalDocumentData` contains a `title`, `status: 'draft' | 'published'`, optional app-owned `updated` date, and `sections`. Each section has a unique `id`, `title`, and optional `paragraphs`, `items`, `address`, and `links`. Text is escaped, not rendered as HTML. Templates provide terms, privacy, imprint, and moderation drafts, but apps can supply their own text/documents and external policy links instead.
+
+Set `status: 'published'` and an ISO `updated` date only after review. `getLegalDocumentIssues` checks publication fields and section identifiers; `getLegalDraftIssues` checks authoring configuration. Neither determines legal compliance. Routes, page titles, indexing of draft pages, notice/acceptance mechanisms, and enforcement remain app-owned.
+
+## Reporting
+
+`ReportDialog` owns the reason/details form, pending and success states, and the signed-out email fallback. Apps own the trigger, sessions, subject references, canonical links, mailbox, and server submission.
+
+```svelte
+<ReportDialog
+	bind:open
+	isLoggedIn={viewer.isLoggedIn}
+	email="reports@example.com"
+	subjectUrl={canonicalUrl}
+	onsignin={showLogin}
+	submit={async (input) => {
+		try {
+			await sendReport({ subject, ...input });
+		} catch {
+			return { message: 'Reporting is unavailable. Please report by email.' };
+		}
+	}}
+/>
+```
+
+`submit` receives `{ reasonType, reason? }`, using the standard ATProto spam, violation, and other reason identifiers. Blank details are omitted; entered details are trimmed and limited to 2,000 characters. Resolve with no value after a successful save, or return `{ message, needsSignIn? }` for a safe, user-facing failure. `needsSignIn` offers a sign-in-again action. Unexpected rejections show a generic failure without exposing exception details.
+
+The email fallback prefills the subject link and any entered details. Opening a new dialog or changing `subjectUrl` resets its state; stale async results are ignored. The dialog does not import an app's auth singleton, contact a moderation service, or decide who can report a subject. Server authorization remains mandatory.

package/dist/components/legal/LegalDocument.svelte

@@ -0,0 +1,58 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { LegalDocumentData } from './types.js';
+	export type LegalDocumentProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'title'> & {
+		document: LegalDocumentData;
+	};
+</script>
+
+<script lang="ts">
+	import { cn } from '../../utils.js';
+	import { safeLegalHref } from './links.js';
+	let { document, class: className, ...rest }: LegalDocumentProps = $props();
+	const uid = $props.id();
+</script>
+
+<article {...rest} class={cn('mx-auto max-w-3xl px-6 py-10 text-sm leading-7 text-ink', className)}>
+	<header class="mb-8">
+		<h1 class="m-0 text-3xl font-semibold tracking-tight">{document.title}</h1>
+		{#if document.updated}
+			<p class="mt-3 text-muted">
+				Last updated: <time datetime={document.updated}>{document.updated}</time>
+			</p>
+		{/if}
+	</header>
+	<div class="space-y-8">
+		{#each document.sections as section (section.id)}
+			<section aria-labelledby={`${uid}-${section.id}`}>
+				<h2 id={`${uid}-${section.id}`} class="mb-3 text-lg font-semibold">{section.title}</h2>
+				<div class="space-y-3">
+					{#each section.paragraphs ?? [] as paragraph, index (index)}<p>{paragraph}</p>{/each}
+					{#if section.address?.length}
+						<address class="not-italic">
+							{#each section.address as line, index (index)}{#if index}<br />{/if}{line}{/each}
+						</address>
+					{/if}
+					{#if section.items?.length}
+						<ul class="list-disc space-y-2 pl-5">
+							{#each section.items as item, index (index)}<li>{item}</li>{/each}
+						</ul>
+					{/if}
+					{#if section.links?.length}
+						<ul class="list-none space-y-2 p-0">
+							{#each section.links as link, index (index)}
+								<li>
+									{#if safeLegalHref(link.href, true)}<a
+											href={safeLegalHref(link.href, true)}
+											class="rounded underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-focus"
+											>{link.label}</a
+										>{:else}{link.label}{/if}
+								</li>
+							{/each}
+						</ul>
+					{/if}
+				</div>
+			</section>
+		{/each}
+	</div>
+</article>

package/dist/components/legal/LegalDocument.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { LegalDocumentData } from './types.js';
+export type LegalDocumentProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'title'> & {
+    document: LegalDocumentData;
+};
+declare const LegalDocument: import("svelte").Component<LegalDocumentProps, {}, "">;
+type LegalDocument = ReturnType<typeof LegalDocument>;
+export default LegalDocument;

package/dist/components/legal/LegalFooter.svelte

@@ -0,0 +1,34 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { LegalFooterLinks } from './types.js';
+
+	export type LegalFooterProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+		links?: LegalFooterLinks;
+		/** App-owned contextual report action; replaces links.report when supplied. */
+		reportAction?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	import { cn } from '../../utils.js';
+	import { legalFooterItems } from './links.js';
+	let { links = {}, reportAction, class: className, ...rest }: LegalFooterProps = $props();
+	const showReportAction = $derived(links.report !== false && !!reportAction);
+	const items = $derived(legalFooterItems(showReportAction ? { ...links, report: false } : links));
+	const linkClass =
+		'rounded text-inherit underline-offset-4 hover:text-ink hover:underline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-focus';
+</script>
+
+{#if items.length || showReportAction}
+	<footer {...rest} class={cn('py-8 text-xs text-muted', className)}>
+		<nav aria-label="Legal and contact">
+			<ul class="m-0 flex list-none flex-wrap items-center justify-center gap-x-5 gap-y-3 p-0">
+				{#each items as item, index (index)}
+					<li><a href={item.href} class={linkClass}>{item.label}</a></li>
+				{/each}
+				{#if showReportAction}<li>{@render reportAction?.()}</li>{/if}
+			</ul>
+		</nav>
+	</footer>
+{/if}

package/dist/components/legal/LegalFooter.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { LegalFooterLinks } from './types.js';
+export type LegalFooterProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    links?: LegalFooterLinks;
+    /** App-owned contextual report action; replaces links.report when supplied. */
+    reportAction?: Snippet;
+};
+declare const LegalFooter: import("svelte").Component<LegalFooterProps, {}, "">;
+type LegalFooter = ReturnType<typeof LegalFooter>;
+export default LegalFooter;

package/dist/components/legal/drafts.d.ts

@@ -0,0 +1,10 @@
+import type { LegalDocumentData, LegalDocumentKind, LegalDraftConfig } from './types.js';
+/** Completeness checks only, never legal approval. Run during authoring/review. */
+export declare function getLegalDraftIssues(config: LegalDraftConfig): string[];
+/** Publication completeness only. A passing check is not legal approval. */
+export declare function getLegalDocumentIssues(document: LegalDocumentData): string[];
+/** Starter text, not legal advice. Save the result in the app and review it.
+ * Never use this as a runtime policy generator: a package update must not silently
+ * change published commitments. No jurisdiction, age, retention, or legal basis
+ * is inferred. Every generated document is a draft with no publication date. */
+export declare function createLegalDrafts(config: LegalDraftConfig): Record<LegalDocumentKind, LegalDocumentData>;

package/dist/components/legal/drafts.js

@@ -0,0 +1,134 @@
+import { safeLegalHref } from './links.js';
+/** Completeness checks only, never legal approval. Run during authoring/review. */
+export function getLegalDraftIssues(config) {
+    const issues = [];
+    if (!config.app.name.trim())
+        issues.push('App name is missing.');
+    if (!safeLegalHref(config.app.url)?.startsWith('http'))
+        issues.push('A valid public app URL is required.');
+    if (!config.app.description.trim())
+        issues.push('Service description is missing.');
+    if (!config.operator.name.trim())
+        issues.push('Operator name is missing.');
+    if (!config.operator.address.length || config.operator.address.some((line) => !line.trim())) {
+        issues.push('The operator postal address must be supplied and reviewed.');
+    }
+    if (!safeLegalHref(`mailto:${config.operator.email}`, true))
+        issues.push('A valid operator contact email is required.');
+    if (!config.privacy.length)
+        issues.push('Describe actual data processing, recipients, storage, retention, transfers, and legal bases.');
+    if (!config.moderation.length)
+        issues.push('Describe actual reporting, moderation, and review procedures.');
+    return issues;
+}
+/** Publication completeness only. A passing check is not legal approval. */
+export function getLegalDocumentIssues(document) {
+    const issues = [];
+    if (!document.title.trim())
+        issues.push('Document title is missing.');
+    if (document.status !== 'published')
+        issues.push('Document is still a draft.');
+    if (!document.updated ||
+        !/^\d{4}-\d{2}-\d{2}$/.test(document.updated) ||
+        !Number.isFinite(Date.parse(document.updated)) ||
+        new Date(document.updated).toISOString().slice(0, 10) !== document.updated) {
+        issues.push('A valid app-reviewed revision date is required.');
+    }
+    if (!document.sections.length)
+        issues.push('Document sections are missing.');
+    const ids = new Set();
+    for (const section of document.sections) {
+        if (!section.id || ids.has(section.id))
+            issues.push('Section IDs must be nonempty and unique.');
+        ids.add(section.id);
+        if (!section.title.trim())
+            issues.push('Section title is missing.');
+    }
+    return issues;
+}
+/** Starter text, not legal advice. Save the result in the app and review it.
+ * Never use this as a runtime policy generator: a package update must not silently
+ * change published commitments. No jurisdiction, age, retention, or legal basis
+ * is inferred. Every generated document is a draft with no publication date. */
+export function createLegalDrafts(config) {
+    const { app, operator } = config;
+    const contact = {
+        id: 'contact',
+        title: 'Contact',
+        links: [{ label: operator.email, href: `mailto:${operator.email}` }]
+    };
+    const owner = {
+        id: 'operator',
+        title: 'Operator',
+        address: [operator.name, ...operator.address],
+        links: [{ label: app.name, href: app.url }]
+    };
+    const draft = (title, sections) => ({
+        title,
+        status: 'draft',
+        sections: structuredClone(sections)
+    });
+    // Copy per document, so editing one never changes another or the source config.
+    return {
+        terms: draft('Terms of service', [
+            {
+                id: 'service',
+                title: 'About the service',
+                paragraphs: [`${app.name} is ${app.description}.`]
+            },
+            {
+                id: 'account',
+                title: 'Your account',
+                paragraphs: [
+                    'Keep your account secure and only grant permissions you are comfortable with. Your account provider has its own terms.'
+                ]
+            },
+            {
+                id: 'content',
+                title: 'Your content',
+                paragraphs: [
+                    'You own your content and must have the right to publish it. Public AT Protocol records can be copied by other services. Hiding content here does not remove those copies.'
+                ]
+            },
+            {
+                id: 'conduct',
+                title: 'Acceptable use',
+                items: [
+                    'Do not publish illegal content or violate the rights of others.',
+                    'Do not use the service for harassment, threats, scams, spam, or malicious software.',
+                    'Do not disrupt the service or bypass access restrictions.'
+                ]
+            },
+            {
+                id: 'availability',
+                title: 'Availability and ending use',
+                paragraphs: [
+                    'The service may change or be unavailable. You can stop using it and revoke its permissions through your account provider. We may restrict access to address misuse or legal requirements. Your statutory rights remain unaffected.'
+                ]
+            },
+            contact
+        ]),
+        privacy: draft('Privacy policy', [
+            {
+                id: 'overview',
+                title: 'About this policy',
+                paragraphs: [
+                    `This policy covers data handled by ${app.name}. Your account provider and other AT Protocol services have their own policies.`
+                ]
+            },
+            owner,
+            ...config.privacy,
+            {
+                id: 'rights',
+                title: 'Your choices and rights',
+                paragraphs: [
+                    'Contact us to request access, correction, deletion, or restriction of your personal data, or to object to processing. You can also complain to a data-protection authority where applicable.',
+                    'Delete public records or revoke app access through your account provider. We cannot remove copies held by other services.'
+                ]
+            },
+            contact
+        ]),
+        imprint: draft('Imprint', [owner, contact]),
+        moderation: draft('Moderation policy', [...config.moderation, contact])
+    };
+}

package/dist/components/legal/links.d.ts

@@ -0,0 +1,5 @@
+import type { LegalFooterLinks, LegalLink } from './types.js';
+/** Same-origin absolute paths and web URLs only. Never executable, credentialed,
+ * protocol-relative, or backslash-normalized URLs. Mail is allowed explicitly. */
+export declare function safeLegalHref(value: string, allowMail?: boolean): string | undefined;
+export declare function legalFooterItems(links: LegalFooterLinks): LegalLink[];

package/dist/components/legal/links.js

@@ -0,0 +1,39 @@
+/** 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) {
+    if (!value ||
+        /\s/.test(value) ||
+        [...value].some((character) => character === '\\' || character.charCodeAt(0) < 32 || character.charCodeAt(0) === 127))
+        return undefined;
+    if (value.startsWith('/') && !value.startsWith('//'))
+        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;
+}
+const labels = {
+    terms: 'Terms',
+    privacy: 'Privacy',
+    imprint: 'Imprint',
+    moderation: 'Moderation',
+    report: 'Report',
+    source: 'Source'
+};
+export function legalFooterItems(links) {
+    return Object.keys(labels).flatMap((key) => {
+        const item = links[key];
+        if (!item)
+            return [];
+        const link = typeof item === 'string' ? { label: labels[key], href: item } : item;
+        const href = safeLegalHref(link.href, key === 'report');
+        return href ? [{ label: link.label, href }] : [];
+    });
+}

package/dist/components/legal/types.d.ts

@@ -0,0 +1,39 @@
+export type LegalDocumentKind = 'terms' | 'privacy' | 'imprint' | 'moderation';
+export interface LegalLink {
+    label: string;
+    href: string;
+}
+export interface LegalSection {
+    id: string;
+    title: string;
+    paragraphs?: readonly string[];
+    items?: readonly string[];
+    address?: readonly string[];
+    links?: readonly LegalLink[];
+}
+/** App-owned, serializable text. Kit upgrades do not change a saved document. */
+export interface LegalDocumentData {
+    title: string;
+    status: 'draft' | 'published';
+    /** The app's reviewed revision date, not a Kit release date. */
+    updated?: string;
+    sections: readonly LegalSection[];
+}
+/** Omit a link, or set it to false, to hide it. */
+export type LegalFooterLink = string | false | LegalLink;
+export type LegalFooterLinks = Partial<Record<LegalDocumentKind | 'report' | 'source', LegalFooterLink>>;
+export interface LegalDraftConfig {
+    app: {
+        name: string;
+        url: string;
+        description: string;
+    };
+    operator: {
+        name: string;
+        email: string;
+        address: readonly string[];
+    };
+    /** Explicitly describe deployed behavior; templates infer no legal basis. */
+    privacy: readonly LegalSection[];
+    moderation: readonly LegalSection[];
+}

package/dist/components/legal/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/login/ActorSearchField.svelte

@@ -16,7 +16,7 @@
 		searchActors,
 		onSelect,
 		label = 'Your handle',
-		placeholder = 'yourname.bsky.social',
+		placeholder = 'Handle',
 		id,
 		name = 'handle',
 		disabled = false,
@@ -51,9 +51,9 @@
 	let dismissedQuery = '';
 	const message = $derived(
 		status === 'error'
-			? 'Search unavailable. Enter your full handle to continue.'
+			? 'Search unavailable. Enter your full handle or DID to continue.'
 			: status === 'ready' && !results.length
-				? 'No suggestions. You can still enter a full handle.'
+				? 'No suggestions. You can still enter a full handle or DID.'
 				: ''
 	);
 	const announcement = $derived(
@@ -67,7 +67,8 @@
 	$effect(() => {
 		const query = value.trim().replace(/^@+/, '');
 		const provider = searchActors;
-		if (disabled || !provider || query.length < 2) {
+		// DIDs go directly to the app's login adapter, never to handle typeahead.
+		if (disabled || !provider || query.length < 2 || /^did:/i.test(query)) {
 			results = [];
 			status = 'idle';
 			open = false;

package/dist/components/login/AtmosphereApps.svelte

@@ -4,16 +4,17 @@
 	import graze from './brands/graze.svg?url';
 	import leaflet from './brands/leaflet.svg?url';
 	import tangled from './brands/tangled.svg?url';
-	import bookhive from './brands/bookhive.svg?url';
+	import muSocial from './brands/mu-social.svg?url';
 	import surf from './brands/surf.svg?url';
 	import pckt from './brands/pckt.svg?url';
-	const apps = [bluesky, blacksky, graze, leaflet, tangled, bookhive, surf, pckt];
+	const apps = [bluesky, blacksky, graze, leaflet, tangled, muSocial, surf, pckt];
 </script>
 
 <!-- Existing brand marks, not replacement UI icons. Static: no endless decorative motion. -->
 <div class="flex items-center justify-between gap-2 py-2" aria-hidden="true">
 	{#each apps as src (src)}<span
 			class="size-5 shrink-0 bg-muted [mask-size:contain] [mask-position:center] [mask-repeat:no-repeat] opacity-70 sm:size-6"
+			class:scale-125={src === muSocial}
 			style:mask-image={`url("${src}")`}
 		></span>{/each}
 </div>

package/dist/components/login/LoginDialog.svelte

@@ -36,7 +36,7 @@
 	);
 	const dialogDescription = $derived(
 		step === 'permissions'
-			? 'Choose what this app can access. Required permissions stay on.'
+			? 'Choose what this app can access.'
 			: step === 'signup'
 				? 'You can use a Bluesky, Blacksky, or other Atmosphere account here. Otherwise, continue to create one.'
 				: description
@@ -52,9 +52,9 @@
 			document.getElementById(uid)?.querySelector<HTMLElement>('h2')?.focus();
 		}
 	}
-	function completed(handle: string, actor?: ActorSummary) {
+	function completed(identifier: string, actor?: ActorSummary) {
 		if (closeOnSuccess) open = false;
-		onSuccess?.(handle, actor);
+		onSuccess?.(identifier, actor);
 	}
 </script>
 

package/dist/components/login/LoginForm.svelte

@@ -17,6 +17,7 @@
 		login: LoginCallback;
 		signup?: () => LoginResult | Promise<LoginResult>;
 		searchActors?: ActorSearch;
+		/** Initial handle or DID; retained under this name for compatibility. */
 		initialHandle?: string;
 		loginOnSelect?: boolean;
 		recentAccounts?: ActorSummary[];
@@ -28,7 +29,7 @@
 		description?: string;
 		showHeader?: boolean;
 		showApps?: boolean;
-		onSuccess?: (handle: string, actor?: ActorSummary) => void;
+		onSuccess?: (identifier: string, actor?: ActorSummary) => void;
 		onStepChange?: (step: LoginStep) => void;
 		children?: Snippet;
 		footer?: Snippet<[LoginStep]>;
@@ -38,20 +39,20 @@
 
 <script lang="ts">
 	import { onMount, onDestroy, tick, untrack } from 'svelte';
-	import { X, ShieldCheck, TriangleAlert, ArrowRight } from '@sketchyicons/svelte';
+	import { X, TriangleAlert, ArrowRight } from '@sketchyicons/svelte';
 	import Button from '../Button.svelte';
 	import IconButton from '../IconButton.svelte';
 	import Icon from '../Icon.svelte';
 	import Avatar from '../Avatar.svelte';
-	import Checkbox from '../Checkbox.svelte';
+	import PermissionFields from './PermissionFields.svelte';
 	import Label from '../Label.svelte';
 	import Heading from '../Heading.svelte';
 	import ActorSearchField from './ActorSearchField.svelte';
 	import RecentAccounts from './RecentAccounts.svelte';
 	import AtmosphereApps from './AtmosphereApps.svelte';
 	import { actorName } from './types.js';
-	import { handleError, normalizeHandle } from './handle.js';
-	import { isPermissionSelected, resolveLoginOptions } from './permissions.js';
+	import { identifierError, normalizeHandle, normalizeIdentifier } from './handle.js';
+	import { resolveLoginOptions } from './permissions.js';
 	import {
 		loadRecentAccounts,
 		writeRecentAccounts,
@@ -89,7 +90,7 @@
 	let error = $state('');
 	let useRecent = $state(true);
 	let choices = $state<Record<string, boolean>>({});
-	let pending = $state<{ handle: string; actor?: ActorSummary }>();
+	let pending = $state<{ identifier: string; actor?: ActorSummary }>();
 	let input = $state<HTMLInputElement | null>(null);
 	let submitRef = $state<HTMLButtonElement | HTMLAnchorElement | null>(null);
 	let heading = $state<HTMLHeadingElement | null>(null);
@@ -108,7 +109,7 @@
 	);
 	const descriptionText = $derived(
 		step === 'permissions'
-			? 'Choose what this app can access. Required permissions stay on.'
+			? 'Choose what this app can access.'
 			: step === 'signup'
 				? 'You can use a Bluesky, Blacksky, or other Atmosphere account here. Otherwise, continue to create one.'
 				: description
@@ -122,7 +123,7 @@
 		if (next !== previous) {
 			previous = next;
 			error = '';
-			if (selected && normalizeHandle(selected.handle) !== normalizeHandle(next))
+			if (selected && normalizeHandle(selected.handle) !== normalizeIdentifier(next))
 				selected = undefined;
 		}
 	});
@@ -153,32 +154,32 @@
 		if (next === 'login') await focusAccount();
 		else if (showHeader) heading?.focus();
 	}
-	async function authenticate(request: { handle: string; actor?: ActorSummary }) {
+	async function authenticate(request: { identifier: string; actor?: ActorSummary }) {
 		if (busy) return;
 		busy = true;
 		error = '';
 		try {
 			const result = permissions.length
 				? await login(
-						request.handle,
+						request.identifier,
 						request.actor,
 						resolveLoginOptions(permissions, choices, baseScopes)
 					)
-				: await login(request.handle, request.actor);
+				: await login(request.identifier, request.actor);
 			if (!alive) return;
 			if (result === false) return;
 			if (request.actor?.did) {
 				const next = [
 					{ ...request.actor, lastUsedAt: new Date().toISOString() },
 					...recentAccounts.filter(
-						(actor) => actor.did !== request.actor?.did && actor.handle !== request.handle
+						(actor) => actor.did !== request.actor?.did && actor.handle !== request.identifier
 					)
 				].slice(0, recentLimit);
 				recentAccounts = persistRecentAccounts
 					? writeRecentAccounts(next, recentAccountOptions)
 					: next;
 			}
-			onSuccess?.(request.handle, request.actor);
+			onSuccess?.(request.identifier, request.actor);
 		} catch (caught) {
 			if (alive)
 				error = caught instanceof Error ? caught.message : 'Login failed. Please try again.';
@@ -190,10 +191,10 @@
 			}
 		}
 	}
-	async function beginLogin(handle = value, actor = selected) {
+	async function beginLogin(identifier = value, actor = selected) {
 		if (busy) return;
-		const normalized = normalizeHandle(handle);
-		const problem = handleError(normalized);
+		const normalized = normalizeIdentifier(identifier);
+		const problem = identifierError(normalized);
 		if (problem) {
 			error = problem;
 			await focusAccount();
@@ -202,7 +203,7 @@
 		previous = normalized;
 		value = normalized;
 		const request = {
-			handle: normalized,
+			identifier: normalized,
 			actor: actor && normalizeHandle(actor.handle) === normalized ? actor : undefined
 		};
 		pending = request;
@@ -285,7 +286,7 @@
 				onclick={() => {
 					useRecent = false;
 					void focusAccount();
-				}}>Use another handle</Button
+				}}>Use another account</Button
 			>
 		{:else}
 			{#if selected}<div
@@ -345,41 +346,17 @@
 				>
 			</div>{/if}
 	{:else if step === 'permissions'}
-		{#if pending}<div class="flex items-center gap-3">
+		{#if pending}<p class="flex min-w-0 items-center gap-2 text-xs text-muted">
+				<span class="shrink-0">Logging in as</span>
 				{#if pending.actor}<Avatar
 						name={actorName(pending.actor)}
 						src={pending.actor.avatar}
-						size={32}
+						size={20}
 						aria-hidden="true"
 					/>{/if}
-				<p class="min-w-0 truncate text-xs text-muted">Logging in as @{pending.handle}</p>
-			</div>{/if}
-		<fieldset class="grid min-w-0 gap-5 border-0 py-1" disabled={busy}>
-			<legend class="sr-only">Requested permissions</legend>
-			{#each permissions as permission, index (permission.id)}<div class="flex items-start gap-3">
-					<Icon img={permission.icon ?? ShieldCheck} size={20} class="mt-1 shrink-0 text-muted" />
-					<div class="min-w-0 flex-1 space-y-1.5">
-						<Label for={`${uid}-permission-${index}`} class="leading-snug"
-							>{permission.label}{permission.required ? ' (required)' : ''}</Label
-						>
-						<p
-							id={`${uid}-permission-${index}-description`}
-							class="text-xs leading-relaxed text-muted"
-						>
-							{permission.description}
-						</p>
-					</div>
-					<Checkbox
-						id={`${uid}-permission-${index}`}
-						class="mt-1"
-						checked={isPermissionSelected(permission, choices)}
-						disabled={busy || permission.required}
-						aria-describedby={`${uid}-permission-${index}-description`}
-						onchange={(event) =>
-							(choices = { ...choices, [permission.id]: event.currentTarget.checked })}
-					/>
-				</div>{/each}
-		</fieldset>
+				<span class="min-w-0 break-words">{pending.identifier}</span>
+			</p>{/if}
+		<PermissionFields {permissions} bind:choices disabled={busy} />
 		<Button type="submit" bind:ref={submitRef} loading={busy} class="w-full"
 			>{busy ? 'Logging in…' : 'Continue to log in'}</Button
 		><Button variant="secondary" disabled={busy} class="w-full" onclick={() => changeStep('login')}

package/dist/components/login/LoginForm.svelte.d.ts

@@ -6,6 +6,7 @@ export type LoginFormProps = Omit<HTMLFormAttributes, 'children' | 'onsubmit' |
     login: LoginCallback;
     signup?: () => LoginResult | Promise<LoginResult>;
     searchActors?: ActorSearch;
+    /** Initial handle or DID; retained under this name for compatibility. */
     initialHandle?: string;
     loginOnSelect?: boolean;
     recentAccounts?: ActorSummary[];
@@ -17,7 +18,7 @@ export type LoginFormProps = Omit<HTMLFormAttributes, 'children' | 'onsubmit' |
     description?: string;
     showHeader?: boolean;
     showApps?: boolean;
-    onSuccess?: (handle: string, actor?: ActorSummary) => void;
+    onSuccess?: (identifier: string, actor?: ActorSummary) => void;
     onStepChange?: (step: LoginStep) => void;
     children?: Snippet;
     footer?: Snippet<[LoginStep]>;

package/dist/components/login/PermissionFields.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { ShieldCheck } from '@sketchyicons/svelte';
+	import Checkbox from '../Checkbox.svelte';
+	import Icon from '../Icon.svelte';
+	import Label from '../Label.svelte';
+	import { cn } from '../../utils.js';
+	import { isPermissionSelected } from './permissions.js';
+	import type { LoginPermission } from './types.js';
+
+	let {
+		permissions,
+		choices = $bindable({}),
+		disabled = false
+	}: {
+		permissions: readonly LoginPermission[];
+		choices?: Record<string, boolean>;
+		disabled?: boolean;
+	} = $props();
+	const uid = $props.id();
+</script>
+
+<fieldset class="grid min-w-0 gap-5 border-0 py-1" {disabled}>
+	<legend class="sr-only">Requested permissions</legend>
+	{#each permissions as permission, index (permission.id)}
+		<div class="flex items-start gap-3">
+			<Icon img={permission.icon ?? ShieldCheck} size={20} class="mt-1 shrink-0 text-muted" />
+			<div class="min-w-0 flex-1 space-y-1.5">
+				<Label
+					id={`${uid}-${index}-label`}
+					for={permission.required ? undefined : `${uid}-${index}`}
+					class={cn('leading-snug', permission.required && 'cursor-default')}
+				>
+					{permission.label}{permission.required ? ' (required)' : ''}
+				</Label>
+				<p id={`${uid}-${index}-description`} class="text-xs leading-relaxed text-muted">
+					{permission.description}
+				</p>
+			</div>
+			<Checkbox
+				id={`${uid}-${index}`}
+				class={cn('mt-1', permission.required && 'pointer-events-none')}
+				checked={isPermissionSelected(permission, choices)}
+				{disabled}
+				aria-disabled={permission.required || undefined}
+				aria-labelledby={`${uid}-${index}-label`}
+				aria-describedby={`${uid}-${index}-description`}
+				tabindex={permission.required ? -1 : undefined}
+				onclick={(event) => {
+					if (permission.required) event.preventDefault();
+				}}
+				onchange={(event) =>
+					(choices = { ...choices, [permission.id]: event.currentTarget.checked })}
+			/>
+		</div>
+	{/each}
+</fieldset>

package/dist/components/login/PermissionFields.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { LoginPermission } from './types.js';
+type $$ComponentProps = {
+    permissions: readonly LoginPermission[];
+    choices?: Record<string, boolean>;
+    disabled?: boolean;
+};
+declare const PermissionFields: import("svelte").Component<$$ComponentProps, {}, "choices">;
+type PermissionFields = ReturnType<typeof PermissionFields>;
+export default PermissionFields;

package/dist/components/login/SignupPermissions.svelte

@@ -0,0 +1,51 @@
+<script lang="ts" module>
+	import type { LoginOptions, LoginPermission, LoginResult } from './types.js';
+
+	export type SignupPermissionsProps = {
+		open?: boolean;
+		permissions: readonly LoginPermission[];
+		baseScopes?: readonly string[];
+		signup: (options: LoginOptions) => LoginResult | Promise<LoginResult>;
+	};
+</script>
+
+<script lang="ts">
+	import Modal from '../Modal.svelte';
+	import Button from '../Button.svelte';
+	import PermissionFields from './PermissionFields.svelte';
+	import { resolveLoginOptions } from './permissions.js';
+
+	let {
+		open = $bindable(false),
+		permissions,
+		baseScopes = ['atproto'],
+		signup
+	}: SignupPermissionsProps = $props();
+	let choices = $state<Record<string, boolean>>({});
+	let busy = $state(false);
+	let error = $state('');
+
+	async function continueSignup() {
+		if (busy) return;
+		busy = true;
+		error = '';
+		try {
+			const result = await signup(resolveLoginOptions(permissions, choices, baseScopes));
+			if (result !== false) open = false;
+		} catch (caught) {
+			error = caught instanceof Error ? caught.message : 'Signup failed. Please try again.';
+		} finally {
+			busy = false;
+		}
+	}
+</script>
+
+<Modal bind:open title="Requested permissions" dismissible={!busy}>
+	<div class="space-y-5">
+		<PermissionFields {permissions} bind:choices disabled={busy} />
+		{#if error}<p role="alert" class="text-sm">{error}</p>{/if}
+		<Button class="w-full" disabled={busy} onclick={continueSignup}>
+			{busy ? 'Continuing…' : 'Continue'}
+		</Button>
+	</div>
+</Modal>

package/dist/components/login/SignupPermissions.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { LoginOptions, LoginPermission, LoginResult } from './types.js';
+export type SignupPermissionsProps = {
+    open?: boolean;
+    permissions: readonly LoginPermission[];
+    baseScopes?: readonly string[];
+    signup: (options: LoginOptions) => LoginResult | Promise<LoginResult>;
+};
+declare const SignupPermissions: import("svelte").Component<SignupPermissionsProps, {}, "open">;
+type SignupPermissions = ReturnType<typeof SignupPermissions>;
+export default SignupPermissions;

package/dist/components/login/brands/README.md

@@ -1,6 +1,8 @@
 # Atmosphere brand marks
 
-Bluesky, Blacksky, Graze, Leaflet, Tangled, BookHive, Surf, and Pckt marks were copied from Florian’s existing Atmo UI login assets (`11-atmo-ui/codebase/src/lib/login/icons/`). The login implementation is covered by the package's root MIT `LICENSE`, which retains the original copyright notice.
+Bluesky, Blacksky, Graze, Leaflet, Tangled, Surf, and Pckt marks were copied from Florian’s existing Atmo UI login assets (`11-atmo-ui/codebase/src/lib/login/icons/`). The login implementation is covered by the package's root MIT `LICENSE`, which retains the original copyright notice.
+
+The mu.social mark comes from the supplied Eurosky brand package: `branding/mu-brand-package/logos/svg/mu-logos_mu_logo_base-01.svg`. Its geometry is unchanged.
 
 Brand marks remain the property of their respective owners; the source-code license is not a grant of trademark rights. They are used only as decorative examples of compatible Atmosphere services, not to imply endorsement. Surf’s opaque background rectangle was removed so the existing mark can render transparently like its neighbors. The other geometry is unchanged.
 

package/dist/components/login/brands/mu-social.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="1000" height="658.9381" viewBox="0 0 1000 658.9381">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #202020;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M584.2062,303.3777v198.5049l-119.4809,21.0622v-219.5671c0-17.6445-14.3654-32.0098-32.0098-32.0098s-32.0097,14.3653-32.0097,32.0098v230.8485l-119.4809,21.0615v-220.4836c0-17.6445-14.3378-32.0098-32.0098-32.0098-17.6442,0-31.982,14.3653-31.982,32.0098v231.7928l-119.4809,21.0622v-252.855c0-60.4073,35.5109-112.6456,86.7488-136.9586,19.6449-9.3087,41.5681-14.5322,64.7141-14.5322,4.7515,0,9.4196.2222,14.0598.639,20.673,1.9171,40.1512,8.0021,57.5732,17.3942,14.0598-15.3937,31.2039-27.8697,50.4876-36.4559,18.7557-8.3359,39.5398-13.0038,61.3798-13.0038,3.4733,0,6.9189.1113,10.3366.3612,78.7185,5.3073,141.1542,71.0771,141.1542,151.1295Z"/>
+  <path class="cls-1" d="M902.2478,71.279v251.1879c0,62.7691-38.3728,116.7579-92.9173,139.7091h-.0278c-18.0054,7.5859-37.7892,11.7817-58.5457,11.7817-2.3896,0-4.7792-.0556-7.1411-.1665h-.0833c-80.1913-3.7792-144.2664-70.2159-144.2664-151.3242V124.7119l119.4809-21.0897v218.8446c0,17.6442,14.3656,32.0098,32.0098,32.0098s32.0098-14.3656,32.0098-32.0098V92.3412l119.4809-21.0622Z"/>
+</svg>

package/dist/components/login/handle.d.ts

@@ -1,3 +1,8 @@
 export declare const normalizeHandle: (value: string) => string;
 export declare const isValidHandle: (value: string) => boolean;
 export declare function handleError(value: string): string | undefined;
+/** Normalize handles only; DID method-specific identifiers are case-sensitive. */
+export declare function normalizeIdentifier(value: string): string;
+/** Syntax validation only. The app's login adapter resolves the account. */
+export declare function isValidIdentifier(value: string): boolean;
+export declare function identifierError(value: string): string | undefined;

package/dist/components/login/handle.js

@@ -1,4 +1,4 @@
-import { isHandle } from '@atcute/lexicons/syntax';
+import { isDid, isHandle } from '@atcute/lexicons/syntax';
 export const normalizeHandle = (value) => value.trim().replace(/^@+/, '').toLowerCase();
 export const isValidHandle = (value) => isHandle(normalizeHandle(value));
 export function handleError(value) {
@@ -9,3 +9,21 @@ export function handleError(value) {
         return 'Enter a valid handle, such as alice.bsky.social.';
     return undefined;
 }
+/** Normalize handles only; DID method-specific identifiers are case-sensitive. */
+export function normalizeIdentifier(value) {
+    const identifier = value.trim();
+    // Preserve malformed DID inputs too: never turn @did:… or DID:… into a valid DID.
+    return /^@*did:/i.test(identifier) ? identifier : normalizeHandle(identifier);
+}
+/** Syntax validation only. The app's login adapter resolves the account. */
+export function isValidIdentifier(value) {
+    const identifier = normalizeIdentifier(value);
+    return isDid(identifier) || isHandle(identifier);
+}
+export function identifierError(value) {
+    if (!value.trim())
+        return 'Enter your handle or DID.';
+    if (!isValidIdentifier(value))
+        return 'Enter a valid handle or DID.';
+    return undefined;
+}

package/dist/components/login/types.d.ts

@@ -23,5 +23,6 @@ export type LoginOptions = {
     scopes: string[];
 };
 export type LoginResult = boolean | void;
-export type LoginCallback = (handle: string, actor?: ActorSummary, options?: LoginOptions) => LoginResult | Promise<LoginResult>;
+/** Receives a normalized handle or a trimmed, case-preserved DID. Resolution belongs to the app. */
+export type LoginCallback = (identifier: string, actor?: ActorSummary, options?: LoginOptions) => LoginResult | Promise<LoginResult>;
 export declare const actorName: (actor: ActorSummary) => string;

package/dist/components/report/ReportDialog.svelte

@@ -0,0 +1,140 @@
+<script lang="ts" module>
+	import type { ReportSubmit } from './types.js';
+
+	export interface ReportDialogProps {
+		open?: boolean;
+		isLoggedIn: boolean;
+		/** App-owned report mailbox, not the subject's email address. */
+		email: string;
+		/** Canonical event/account link for the email fallback. */
+		subjectUrl: string;
+		submit: ReportSubmit;
+		onsignin: () => void;
+		class?: string;
+	}
+</script>
+
+<script lang="ts">
+	import Button from '../Button.svelte';
+	import Modal from '../Modal.svelte';
+	import Textarea from '../Textarea.svelte';
+	import { cn } from '../../utils.js';
+	import { control } from '../../styles.js';
+	import { reportEmailHref } from './email.js';
+	import type { ReportReasonType } from './types.js';
+
+	let {
+		open = $bindable(false),
+		isLoggedIn,
+		email,
+		subjectUrl,
+		submit,
+		onsignin,
+		class: className
+	}: ReportDialogProps = $props();
+	let reasonType = $state<ReportReasonType>('com.atproto.moderation.defs#reasonSpam');
+	let reason = $state('');
+	let pending = $state(false);
+	let message = $state('');
+	let sent = $state(false);
+	let needsSignIn = $state(false);
+	let generation = 0;
+	const id = $props.id();
+	const emailHref = $derived(reportEmailHref(email, subjectUrl, reason));
+
+	// Each opening/subject starts fresh. Ignore a late result from a closed or
+	// retargeted dialog rather than showing success for a different subject.
+	$effect(() => {
+		void open;
+		void subjectUrl;
+		generation += 1;
+		reasonType = 'com.atproto.moderation.defs#reasonSpam';
+		reason = '';
+		pending = false;
+		message = '';
+		sent = false;
+		needsSignIn = false;
+	});
+
+	function signIn() {
+		open = false;
+		onsignin();
+	}
+
+	async function send(event: SubmitEvent) {
+		event.preventDefault();
+		if (pending || !isLoggedIn) return;
+		const current = ++generation;
+		pending = true;
+		message = '';
+		needsSignIn = false;
+		try {
+			const failure = await submit({
+				reasonType,
+				...(reason.trim() ? { reason: reason.trim() } : {})
+			});
+			if (current !== generation) return;
+			if (failure) {
+				message = failure.message;
+				needsSignIn = failure.needsSignIn ?? false;
+			} else {
+				sent = true;
+			}
+		} catch {
+			if (current === generation) {
+				message = 'Report could not be sent. Try again or report by email.';
+			}
+		} finally {
+			if (current === generation) pending = false;
+		}
+	}
+</script>
+
+<Modal
+	bind:open
+	title="Report"
+	description={isLoggedIn ? 'Only the moderators can see your report.' : undefined}
+	dismissible={!pending}
+	class={cn('max-w-md', className)}
+>
+	{#if !isLoggedIn}
+		<div class="space-y-4">
+			<p>
+				Sign in to report directly, or email
+				<a class="underline" href={emailHref}>{email}</a>. Please include a link to the event or
+				account and your reason for reporting.
+			</p>
+			<Button onclick={signIn}>Sign in</Button>
+		</div>
+	{:else if sent}
+		<p role="status" class="mb-4">Report sent.</p>
+		<Button onclick={() => (open = false)}>Done</Button>
+	{:else}
+		<form onsubmit={send} class="space-y-4">
+			<label for={`${id}-reason`} class="block text-sm">Reason</label>
+			<select id={`${id}-reason`} bind:value={reasonType} disabled={pending} class={control}>
+				<option value="com.atproto.moderation.defs#reasonSpam">Spam</option>
+				<option value="com.atproto.moderation.defs#reasonViolation"
+					>Harmful or illegal content</option
+				>
+				<option value="com.atproto.moderation.defs#reasonOther">Other</option>
+			</select>
+			<label for={`${id}-details`} class="block text-sm">Details (optional)</label>
+			<Textarea
+				id={`${id}-details`}
+				bind:value={reason}
+				maxlength={2000}
+				rows={4}
+				disabled={pending}
+			/>
+			{#if message}
+				<div class="space-y-2 text-sm">
+					<p role="alert">{message}</p>
+					<a class="underline" href={emailHref}>Email {email} instead</a>
+					{#if needsSignIn}<Button variant="ghost" onclick={signIn}>Sign in again</Button>{/if}
+				</div>
+			{/if}
+			<Button type="submit" disabled={pending}>{pending ? 'Sending…' : 'Send report'}</Button>
+		</form>
+	{/if}
+</Modal>

package/dist/components/report/ReportDialog.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { ReportSubmit } from './types.js';
+export interface ReportDialogProps {
+    open?: boolean;
+    isLoggedIn: boolean;
+    /** App-owned report mailbox, not the subject's email address. */
+    email: string;
+    /** Canonical event/account link for the email fallback. */
+    subjectUrl: string;
+    submit: ReportSubmit;
+    onsignin: () => void;
+    class?: string;
+}
+declare const ReportDialog: import("svelte").Component<ReportDialogProps, {}, "open">;
+type ReportDialog = ReturnType<typeof ReportDialog>;
+export default ReportDialog;

package/dist/components/report/email.d.ts

@@ -0,0 +1,3 @@
+/** The app owns the destination and canonical subject URL. Encode details as
+ * body text, never additional mail headers. Use %20 rather than form-style +. */
+export declare function reportEmailHref(email: string, subjectUrl: string, reason?: string): string;

package/dist/components/report/email.js

@@ -0,0 +1,6 @@
+/** The app owns the destination and canonical subject URL. Encode details as
+ * body text, never additional mail headers. Use %20 rather than form-style +. */
+export function reportEmailHref(email, subjectUrl, reason = '') {
+    const body = `Event or account: ${subjectUrl}\n\nReason: ${reason.trim()}`;
+    return `mailto:${email}?subject=Content%20report&body=${encodeURIComponent(body)}`;
+}

package/dist/components/report/types.d.ts

@@ -0,0 +1,11 @@
+export type ReportReasonType = 'com.atproto.moderation.defs#reasonSpam' | 'com.atproto.moderation.defs#reasonViolation' | 'com.atproto.moderation.defs#reasonOther';
+export interface ReportInput {
+    reasonType: ReportReasonType;
+    reason?: string;
+}
+/** Return a user-facing failure from the app's submission adapter. */
+export interface ReportFailure {
+    message: string;
+    needsSignIn?: boolean;
+}
+export type ReportSubmit = (input: ReportInput) => Promise<void | ReportFailure>;

package/dist/components/report/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -15,6 +15,15 @@ export { default as Avatar } from './components/Avatar.svelte';
 export { default as InsetImage } from './components/InsetImage.svelte';
 export { default as Badge } from './components/Badge.svelte';
 export { default as Modal } from './components/Modal.svelte';
+export { default as LegalDocument } from './components/legal/LegalDocument.svelte';
+export type { LegalDocumentProps } from './components/legal/LegalDocument.svelte';
+export { default as LegalFooter } from './components/legal/LegalFooter.svelte';
+export type { LegalFooterProps } from './components/legal/LegalFooter.svelte';
+export { createLegalDrafts, getLegalDraftIssues, getLegalDocumentIssues } from './components/legal/drafts.js';
+export type { LegalDocumentKind, LegalDocumentData, LegalSection, LegalLink, LegalFooterLink, LegalFooterLinks, LegalDraftConfig } from './components/legal/types.js';
+export { default as ReportDialog } from './components/report/ReportDialog.svelte';
+export type { ReportDialogProps } from './components/report/ReportDialog.svelte';
+export type { ReportReasonType, ReportInput, ReportFailure, ReportSubmit } from './components/report/types.js';
 export { default as Tabs } from './components/Tabs.svelte';
 export type { TabItem } from './components/Tabs.svelte';
 export { default as Icon } from './components/Icon.svelte';
@@ -26,11 +35,13 @@ 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';
 export type { LoginDialogProps } from './components/login/LoginDialog.svelte';
+export { default as SignupPermissions } from './components/login/SignupPermissions.svelte';
+export type { SignupPermissionsProps } from './components/login/SignupPermissions.svelte';
 export { default as ActorSearchField } from './components/login/ActorSearchField.svelte';
 export { default as RecentAccounts } from './components/login/RecentAccounts.svelte';
 export type { ActorSummary, ActorSearch, LoginCallback, LoginResult, LoginPermission, LoginOptions, LoginStep } from './components/login/types.js';
 export { createActorSearch } from './components/login/search.js';
-export { normalizeHandle, isValidHandle } from './components/login/handle.js';
+export { normalizeHandle, isValidHandle, normalizeIdentifier, isValidIdentifier } from './components/login/handle.js';
 export { resolveLoginOptions, isPermissionSelected } from './components/login/permissions.js';
 export { loadRecentAccounts, writeRecentAccounts, saveRecentAccount, removeRecentAccount, RECENT_ACCOUNTS_STORAGE_KEY } from './components/login/recent-accounts.js';
 export type { RecentAccount, RecentAccountStorage, RecentAccountStorageOptions } from './components/login/recent-accounts.js';

package/dist/index.js

@@ -13,16 +13,21 @@ export { default as Avatar } from './components/Avatar.svelte';
 export { default as InsetImage } from './components/InsetImage.svelte';
 export { default as Badge } from './components/Badge.svelte';
 export { default as Modal } from './components/Modal.svelte';
+export { default as LegalDocument } from './components/legal/LegalDocument.svelte';
+export { default as LegalFooter } from './components/legal/LegalFooter.svelte';
+export { createLegalDrafts, getLegalDraftIssues, getLegalDocumentIssues } from './components/legal/drafts.js';
+export { default as ReportDialog } from './components/report/ReportDialog.svelte';
 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 LoginForm } from './components/login/LoginForm.svelte';
 export { default as LoginDialog } from './components/login/LoginDialog.svelte';
+export { default as SignupPermissions } from './components/login/SignupPermissions.svelte';
 export { default as ActorSearchField } from './components/login/ActorSearchField.svelte';
 export { default as RecentAccounts } from './components/login/RecentAccounts.svelte';
 export { createActorSearch } from './components/login/search.js';
-export { normalizeHandle, isValidHandle } from './components/login/handle.js';
+export { normalizeHandle, isValidHandle, normalizeIdentifier, isValidIdentifier } from './components/login/handle.js';
 export { resolveLoginOptions, isPermissionSelected } from './components/login/permissions.js';
 export { loadRecentAccounts, writeRecentAccounts, saveRecentAccount, removeRecentAccount, RECENT_ACCOUNTS_STORAGE_KEY } from './components/login/recent-accounts.js';
 export { default as ToggleGroup } from './components/ToggleGroup.svelte';

package/dist/legal.d.ts

@@ -0,0 +1,3 @@
+/** Framework-free authoring helpers for scripts; UI components use the main entry. */
+export { createLegalDrafts, getLegalDraftIssues, getLegalDocumentIssues } from './components/legal/drafts.js';
+export type { LegalDocumentData, LegalDocumentKind, LegalDraftConfig, LegalSection, LegalFooterLinks } from './components/legal/types.js';

package/dist/legal.js

@@ -0,0 +1,2 @@
+/** Framework-free authoring helpers for scripts; UI components use the main entry. */
+export { createLegalDrafts, getLegalDraftIssues, getLegalDocumentIssues } from './components/legal/drafts.js';

package/dist/theme.css

@@ -1,4 +1,5 @@
 @import '@fontsource-variable/figtree';
+@import '@fontsource-variable/figtree/wght-italic.css';
 
 /* Resolve relative to this stylesheet in src/lib or the packaged dist directory. */
 @source './';

package/dist/theme.js

@@ -19,5 +19,12 @@ export function observeTheme(element, update) {
         });
         parent = parent.parentElement;
     }
-    return () => observer.disconnect();
+    // readTheme snapshots computed semantic colors for portals. Those colors
+    // change with the system scheme even when no ancestor attribute changes.
+    const scheme = window.matchMedia('(prefers-color-scheme: dark)');
+    scheme.addEventListener('change', update);
+    return () => {
+        observer.disconnect();
+        scheme.removeEventListener('change', update);
+    };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atmo-dev/kit",
-  "version": "0.0.2",
+  "version": "0.2.0",
   "description": "The shared UI foundation for Atmo apps.",
   "license": "MIT",
   "repository": {
@@ -27,6 +27,10 @@
       "svelte": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./legal": {
+      "types": "./dist/legal.d.ts",
+      "default": "./dist/legal.js"
+    },
     "./theme.css": "./dist/theme.css"
   },
   "peerDependencies": {

package/dist/components/login/brands/bookhive.svg

@@ -1,3 +0,0 @@
-<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M52.0483 0.93099C53.1501 0.921438 53.8535 1.06037 54.7446 1.75893C55.4873 2.51347 56.0296 3.42362 56.0224 4.50009C56.0668 18.0153 55.9707 31.5308 56.0122 45.0458C56.0104 47.5675 54.4686 47.3201 54.4661 47.3197C54.4917 50.3233 54.4674 53.3311 54.5447 56.3337C54.5377 57.548 54.2466 58.5049 52.4863 58.5064L25.7792 58.5727C25.5946 58.5638 25.5946 58.5638 25.5037 58.6744C25.4938 58.9353 25.556 61.6779 25.5561 61.6808C25.5465 62.144 25.5531 62.9893 24.5112 63C22.8066 63.0173 21.1565 60.7507 20.2706 60.7471C19.5918 60.7443 17.8008 63.0001 15.9265 62.9913C15.4985 62.9893 15.1922 62.6836 15.0376 62.3692C14.9527 62.0605 14.9636 61.7672 14.9759 61.4491C14.9864 60.4343 15.009 59.4184 15.0376 58.404L14.8658 58.4065C13.433 58.4097 7.98682 58.5339 7.98736 52.2753C7.9386 37.3459 7.96021 22.4163 7.93185 7.48695C7.91841 0.890681 13.5317 0.96174 14.244 0.963904L14.2441 0.963816C26.8455 0.919962 39.4471 1.04933 52.0483 0.93099ZM17.2031 59.9361C18.0694 59.417 18.9226 58.7165 19.8728 58.3675C20.4465 58.2263 20.8562 58.4527 21.3546 58.7478C21.6127 58.9016 23.0463 59.846 23.3384 60.0262V52.8169H17.2031V59.9361ZM15.4946 47.828C14.4598 47.8221 13.5842 47.8236 12.6684 48.3886C11.3934 49.2216 10.5772 50.4986 10.5146 52.0667C10.5581 55.439 12.7708 56.2239 14.2018 56.2472C14.4503 56.2452 14.6988 56.2438 14.9473 56.2413C14.9699 54.7203 14.992 53.1994 15.0191 51.6785C15.0259 51.2477 15.0446 51.1028 15.3475 50.7816C15.661 50.5291 15.9258 50.5093 16.3203 50.5029C18.8985 50.5305 21.4781 50.5048 24.0565 50.5057C24.4337 50.5016 24.7923 50.479 25.1362 50.6507C25.3693 50.8243 25.4919 50.9727 25.5717 51.2522L25.5841 55.4208C25.5834 55.6761 25.5701 55.8331 25.6842 56.061C25.8799 56.1848 26.0249 56.2391 26.256 56.2636C34.8173 56.2573 43.3785 56.2521 51.9398 56.2413V56.061C50.6253 53.3866 50.8985 50.5477 51.9398 47.8604C47.2275 47.8544 16.0841 47.8265 15.4946 47.828ZM13.3397 3.28933C12.4325 3.36836 10.0574 3.73972 10.1655 7.98162C10.1696 8.15242 10.2369 41.5329 10.2557 47.3197V47.4099C11.1579 46.5988 11.6431 46.0768 13.2331 45.7878C13.2331 30.2549 13.3397 17.9797 13.3397 3.28933ZM50.3365 3.15107C48.4414 3.15161 17.5151 3.18598 15.5332 3.25861L15.5516 45.7417C21.1475 45.811 50.6824 45.7303 51.4888 45.6977C53.3652 45.6221 53.7518 45.0956 53.7449 43.0277C53.7162 34.341 53.665 9.58593 53.6781 6.36745C53.6894 3.60523 53.4421 3.15009 50.3365 3.15107ZM29.9248 4.69475C30.8644 4.69476 31.6539 5.51957 31.5369 6.46232C32.4026 7.41817 33.0369 8.63188 33.5401 9.78791C33.6893 10.1309 33.8146 10.4575 33.99 10.7738C34.5922 10.398 37.7986 10.5099 38.1152 10.8594L38.1807 10.4479C38.4829 9.04123 39.2361 7.92084 40.3014 7.08591C40.2725 6.14568 41.1018 5.41571 42.015 5.41568C42.9618 5.41569 43.7293 6.14192 43.7293 7.03778C43.7293 8.19237 42.4891 8.91219 41.4507 8.56984C40.8876 8.99859 40.7576 9.09367 40.1033 10.6914C40.0479 10.8267 39.9062 11.0117 40.043 11.094C45.13 14.151 45.7123 16.9707 45.7682 20.076L45.9645 20.0541C49.3503 19.1903 51.9897 19.8251 52.4776 22.7094C52.5577 23.7237 52.3694 24.602 51.9236 25.506C50.8378 27.5413 46.4796 30.5203 44.1957 29.951L44.2067 30.3422C43.9504 46.0599 29.3295 40.2729 29.3091 40.2648C29.3009 40.27 27.3183 41.5417 26.9916 41.4083C26.6049 41.336 27.4322 39.6021 27.5268 39.2773L27.3114 39.0357C24.4702 37.2377 23.9692 34.9197 23.8575 32.8038L23.6004 32.9106C17.0555 35.3729 18.0353 26.8788 21.5512 26.001L21.3218 25.7609C11.2829 15.4735 20.5036 10.6607 27.422 16.7844C27.4229 16.7794 28.1502 12.7938 32.0348 11.2983C31.5022 10.0545 30.8877 8.99646 30.2278 7.82128C29.2712 7.99657 28.3007 7.27154 28.3007 6.27179C28.3007 5.40083 29.0279 4.69477 29.9248 4.69475ZM26.8979 30.0607C23.5884 38.2578 40.4533 43.2877 41.8894 33.6816C39.6793 34.3829 31.953 36.0684 27.0351 30.2549L26.8979 30.0607ZM24.7736 27.2341C23.3243 26.9989 22.1689 27.7022 22.0472 27.765C20.2551 28.6908 19.4806 33.3183 23.2802 31.4185C23.8598 31.217 23.9631 30.0229 24.2466 29.456C24.3874 29.1715 25.036 27.8224 25.4301 27.3177C25.1065 27.2496 25.0382 27.277 24.7736 27.2341ZM30.2526 25.3427C28.9557 25.9328 28.2918 27.8003 28.2906 27.8038C28.3011 27.8227 31.6274 33.7806 41.8894 30.7191C42.0919 29.6972 41.7578 27.5658 41.1546 27.118C35.5948 28.8958 31.9491 27.1244 30.2526 25.3427ZM50.8069 22.1813C48.742 19.9078 45.4885 22.4437 45.2873 22.7107C44.95 24.1274 43.9692 25.058 43.0228 25.8091C42.8865 25.905 42.7532 26.0057 42.6231 26.1107C42.6232 26.3302 43.7375 28.4638 43.929 28.7153C43.9383 28.715 46.1981 28.6274 48.7523 26.4433C48.7653 26.4318 52.0258 23.5235 50.8069 22.1813ZM41.2457 14.5195C37.3692 10.7942 29.9837 12.9105 29.3624 17.939C29.1447 19.7002 29.6713 21.3039 30.672 22.7094L30.8816 22.9289C31.7128 23.8894 32.8151 24.6313 33.962 25.1032C36.2257 25.8783 38.5669 25.7495 40.7078 24.6468C42.1238 23.8195 43.0442 22.8138 43.579 20.8295C44.1959 16.7171 41.61 14.833 41.2457 14.5195ZM23.8765 16.9841C18.1211 13.6901 16.1166 20.3808 25.4116 24.9413C25.4169 24.9451 26.4861 25.7192 27.5192 25.2656C28.0798 24.9605 28.6565 24.5529 28.8896 23.9164C28.0922 22.8984 27.4276 21.8552 27.232 20.5424C27.1994 20.2719 27.1609 20.0146 27.1075 19.7469C26.4768 18.4447 24.9091 17.5788 23.8765 16.9841ZM36.6935 22.4214C36.1914 21.7363 37.1875 21.1485 37.4735 21.7041C37.7164 22.176 38.2534 22.4599 38.7605 22.4398C39.307 22.4181 39.7609 22.1519 40.0795 21.7229C40.3222 21.3958 41.1377 21.8847 40.8264 22.341C39.8869 23.718 37.5936 23.6497 36.6935 22.4214ZM36.4843 17.9797C37.0215 17.9797 37.457 18.5762 37.457 19.312C37.457 20.0478 37.0215 20.6442 36.4843 20.6443C35.9471 20.6443 35.5115 20.0478 35.5115 19.312C35.5115 18.5762 35.9471 17.9797 36.4843 17.9797ZM40.77 17.9797C41.2324 17.9797 41.6074 18.5359 41.6074 19.2219C41.6074 19.9079 41.2324 20.464 40.77 20.464C40.3075 20.464 39.9326 19.9079 39.9326 19.2219C39.9326 18.5359 40.3075 17.9797 40.77 17.9797Z" fill="#210E03"/>
-</svg>