@atmo-dev/kit 0.4.0 → 0.6.0

package/README.md

@@ -9,6 +9,125 @@ Svelte 5 and Tailwind CSS 4 components for Atmo apps.
 - Releases: `pnpm changeset`, then merge the generated release PR. [Details](.changeset/README.md).
 - License: [MIT](LICENSE).
 
+## AT record metadata (AT Tags)
+
+Use `AtTags` to let other clients discover which AT Protocol records and identities
+an HTML page represents. It renders server-side `<meta name="at:…" content="at://…">`
+tags in the document head and updates/removes them when its props change. It needs
+no theme, styles, network requests, or app state.
+
+The [AT Tags proposal](https://tangled.org/chrisshank.com/at-tags) is a draft. Its four
+standard relationships are:
+
+| Property    | Meaning                                                                  | Content         |
+| ----------- | ------------------------------------------------------------------------ | --------------- |
+| `canonical` | The record this page represents; deleting it would remove the page.      | A record AT URI |
+| `alternate` | Auxiliary records shown or referenced; the page survives their deletion. | A record AT URI |
+| `author`    | Account(s) who authored the page's content.                              | `at://<DID>`    |
+| `me`        | Account(s) this site or section belongs to.                              | `at://<DID>`    |
+
+Each property accepts an array; multiple values produce separate tags, with exact
+duplicates removed within each property. Use meta **names**, not Open Graph
+`property` attributes or `<link href="at://…">`. These tags supplement—not
+replace—your title, description, HTTPS canonical URL and Open Graph metadata.
+
+For a page backed by one record authored by its repository owner, use the
+framework-free `recordAtTags` helper in your server loader:
+
+```ts
+import { recordAtTags } from '@atmo-dev/kit/at-tags';
+
+// After app-owned loading, visibility/moderation checks and handle resolution:
+return {
+	atTags: recordAtTags(record, relatedRecords)
+};
+```
+
+`record` and each optional `relatedRecords` entry only need `{ uri: string }`.
+The helper sets `canonical`, derives `author` from the record's repository DID,
+and lists related records as `alternate`, excluding the canonical URI. It throws
+`SyntaxError` for non-record or handle-based URIs: pass resolved DID-based record
+URIs, not a URL path or viewer parameter. It does not resolve or fetch anything.
+
+Render the metadata once in a SvelteKit root layout (covering embeds too):
+
+```svelte
+<script lang="ts">
+	import { page } from '$app/state';
+	import { AtTags } from '@atmo-dev/kit';
+
+	let { children } = $props();
+</script>
+
+<AtTags tags={page.error ? undefined : page.data.atTags} />
+{@render children()}
+```
+
+Add `atTags?: import('@atmo-dev/kit/at-tags').AtTagMetadata` to `App.PageData`.
+In other Svelte apps, pass the current page's metadata directly; set `tags` to
+`undefined` on pages with no relationships. Do not mount competing tag owners.
+
+You can supply `AtTagMetadata` directly for multiple canonical records, different
+or additional authors, or an account section:
+
+```ts
+import type { AtTagMetadata } from '@atmo-dev/kit/at-tags';
+
+const atTags: AtTagMetadata = {
+	me: [`at://${profile.did}`],
+	alternate: profile.uri ? [profile.uri] : []
+};
+```
+
+An account's events page might survive deletion of its optional Bluesky profile,
+so that profile record is an alternate, not necessarily canonical. Likewise,
+embedded comments are alternate records, not the page's authors. `me` is not the
+signed-in viewer or every record author; do not assign it site-wide unless the
+site actually belongs to that account. Ordinary discovery and creation pages
+usually have no canonical record.
+
+Apps own these semantic choices, record loading, identity resolution, visibility,
+and error-page suppression. The component escapes attributes but does not validate
+raw metadata or verify record existence. Use record URIs with collection and rkey,
+and bare `at://<DID>` identity URIs without a trailing slash. Only the four standard
+properties are supported; parsing/scraping pages and draft custom namespaces are
+outside this API.
+
+## Events
+
+The event UI formerly in `@atmo-dev/events-ui` lives in this package:
+
+```svelte
+<script lang="ts">
+	import { EventEditor, EventView, EventCard } from '@atmo-dev/kit/events';
+	import type { EditorAdapter, EditorViewer } from '@atmo-dev/kit/events-data';
+
+	let { adapter, viewer, event, data, pageUrl } = $props();
+</script>
+
+<EventCard {event} />
+<EventEditor {adapter} {viewer} eventData={event} actorDid={event.did} rkey={event.rkey} />
+<EventView {adapter} {viewer} {data} {pageUrl} />
+```
+
+- `@atmo-dev/kit/events`: event cards, views, editor, RSVP/attendee/comment UI, starter-pack actions, conference timetable, VOD player/transcript and date/time/image controls. Event backgrounds and editor sections stay internal.
+- `@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.
+
+Apps implement `EditorAdapter` for authentication prompts, repository IO, uploads, save/delete navigation, and optional linked-record transport/indexing notifications. Keep sessions, Cloudflare bindings, app routes, server endpoints, caching and moderation in the app. The editor/view never imports a consumer's app state. Existing `EventView` page-data shape and RSVP behavior are preserved in this migration.
+
+Full event UI requires optional peers (ordinary Kit consumers do not):
+
+```sh
+pnpm add maplibre-gl@^6.16.0 svelte-maplibre-gl@^2.2.1 plyr@^3.8.5
+```
+
+Import `theme.css` as above; it scans the packaged event components too, so no separate Tailwind source path is needed. Event exports are intentionally absent from the main Kit entry.
+
+The initial move preserves legacy defaults: `/p/:actor/e/:rkey` event and `/p/:actor` profile links, `/api/geocoding`, Bluesky's public comments API, the `?created` share flow and RSVP's `createdWith` identifier. Hosts currently need compatible routes/endpoints; `shareUrlOverride` changes outbound share links. These defaults are not a new universal routing contract. Further host-policy extraction can happen independently of the package move.
+
+Event browser tests are in `src/tests/events`; run `pnpm test:unit --run --project events`. `pnpm test:package` checks the actual built server entry and its runtime import graph without Vite aliases.
+
 ## Photos, Grain albums and Streamplace
 
 `PhotoGrid` and `PhotoLightbox` work with provider-neutral `Photo[]` data (`src`, optional `thumbnail`, `alt`, dimensions and `contentWarning`). The grid preserves natural image proportions in responsive masonry columns, with a subtle 2% hover zoom disabled for reduced motion. It gates warned images before mounting them and opens a borderless fullscreen viewer. The viewer has a dimmed backdrop, previous/next arrows, close and a small photo-position counter; native horizontal scrolling with CSS scroll snap makes photos follow your finger or trackpad, with inertia rather than switching only on release. Mouse/pen drags also move the track directly. Swipes loop like the arrows; vertical pans do not navigate and controls are separate from the drag surface. Native pinch zoom, arrow keys, Escape, focus trapping and restoration are preserved; release animations respect reduced motion. `PhotoLightbox` also works independently with `bind:open` and `bind:index`; callers using it directly must first filter or reveal any warned photos. Apps own URL validation and moderation policy.

package/dist/at-tags.d.ts

@@ -0,0 +1,18 @@
+/** Standard AT Tags draft properties. Identity values are `at://<DID>` URIs. */
+export interface AtTagMetadata {
+    canonical?: readonly string[];
+    alternate?: readonly string[];
+    author?: readonly string[];
+    me?: readonly string[];
+}
+/** A resolved record reference; no lexicon-specific fields are needed. */
+export interface AtTagRecordRef {
+    uri: string;
+}
+/**
+ * Metadata for a page backed by one record, authored by its repository owner.
+ * Supply only auxiliary records represented on the page. Throws SyntaxError for
+ * non-record or non-DID-based URIs; resolve handles before calling this helper.
+ * For multiple canonical records or different authors, supply metadata directly.
+ */
+export declare function recordAtTags(record: AtTagRecordRef, alternates?: readonly AtTagRecordRef[]): AtTagMetadata;

package/dist/at-tags.js

@@ -0,0 +1,18 @@
+import { parseCanonicalResourceUri } from '@atcute/lexicons/syntax';
+/**
+ * Metadata for a page backed by one record, authored by its repository owner.
+ * Supply only auxiliary records represented on the page. Throws SyntaxError for
+ * non-record or non-DID-based URIs; resolve handles before calling this helper.
+ * For multiple canonical records or different authors, supply metadata directly.
+ */
+export function recordAtTags(record, alternates = []) {
+    const { repo } = parseCanonicalResourceUri(record.uri);
+    const alternate = [...new Set(alternates.map(({ uri }) => uri))].filter((uri) => uri !== record.uri);
+    for (const uri of alternate)
+        parseCanonicalResourceUri(uri);
+    return {
+        canonical: [record.uri],
+        author: [`at://${repo}`],
+        alternate
+    };
+}

package/dist/components/AtTags.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { AtTagMetadata } from '../at-tags.js';
+
+	export interface AtTagsProps {
+		tags?: AtTagMetadata;
+	}
+
+	let { tags }: AtTagsProps = $props();
+</script>
+
+<svelte:head>
+	{#each ['canonical', 'alternate', 'author', 'me'] as property (property)}
+		{#each [...new Set(tags?.[property as keyof AtTagMetadata] ?? [])] as uri (uri)}
+			<meta name={`at:${property}`} content={uri} />
+		{/each}
+	{/each}
+</svelte:head>

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

@@ -0,0 +1,7 @@
+import type { AtTagMetadata } from '../at-tags.js';
+export interface AtTagsProps {
+    tags?: AtTagMetadata;
+}
+declare const AtTags: import("svelte").Component<AtTagsProps, {}, "">;
+type AtTags = ReturnType<typeof AtTags>;
+export default AtTags;

package/dist/events/DatePicker.svelte

@@ -0,0 +1,222 @@
+<script lang="ts">
+	// @ts-nocheck
+	import { DatePicker } from 'bits-ui';
+	import { CalendarDate, type DateValue } from '@internationalized/date';
+	import { untrack } from 'svelte';
+	import { Icon } from '../index.js';
+	import { ChevronLeft, ChevronRight } from '@sketchyicons/svelte';
+
+	let {
+		value = $bindable(''),
+		required = false,
+		label = 'Date',
+		minValue = '',
+		locale = 'en',
+		onSelect
+	}: {
+		value: string;
+		required?: boolean;
+		label?: string;
+		minValue?: string;
+		locale?: string;
+		onSelect?: () => void;
+	} = $props();
+
+	let isOpen = $state(false);
+
+	const now = new Date();
+	const currentYear = now.getFullYear();
+	const yearRange = Array.from({ length: 7 }, (_, i) => currentYear - 1 + i);
+	const today = new Date();
+	const todayDay = today.getDate();
+	const todayMonth = today.getMonth() + 1;
+	const todayYear = today.getFullYear();
+
+	let internalValue: CalendarDate | undefined = $state(undefined);
+
+	function parseDateStr(str: string): CalendarDate | undefined {
+		if (!str) return undefined;
+		const [yearStr, monthStr, dayStr] = str.split('-');
+		const year = parseInt(yearStr, 10);
+		const month = parseInt(monthStr, 10);
+		const day = parseInt(dayStr, 10);
+		if (isNaN(year) || isNaN(month) || isNaN(day)) return undefined;
+		return new CalendarDate(year, month, day);
+	}
+
+	function formatDateStr(dt: CalendarDate): string {
+		const y = String(dt.year).padStart(4, '0');
+		const m = String(dt.month).padStart(2, '0');
+		const d = String(dt.day).padStart(2, '0');
+		return `${y}-${m}-${d}`;
+	}
+
+	let internalMinValue: CalendarDate | undefined = $derived.by(() => {
+		return parseDateStr(minValue);
+	});
+
+	$effect(() => {
+		const parsed = parseDateStr(value);
+		untrack(() => {
+			if (parsed) {
+				if (
+					!internalValue ||
+					parsed.year !== internalValue.year ||
+					parsed.month !== internalValue.month ||
+					parsed.day !== internalValue.day
+				) {
+					internalValue = parsed;
+					previousValue = parsed;
+				}
+			} else {
+				internalValue = undefined;
+			}
+		});
+	});
+
+	let previousValue: CalendarDate | undefined = $state(undefined);
+
+	function handleValueChange(newVal: DateValue | undefined) {
+		if (newVal && newVal instanceof CalendarDate) {
+			previousValue = newVal;
+			internalValue = newVal;
+			value = formatDateStr(newVal);
+		} else if (!newVal && previousValue) {
+			// Prevent deselection — restore previous value
+			internalValue = previousValue;
+		}
+	}
+
+	function handleOpenChangeComplete(open: boolean) {
+		if (!open && internalValue) {
+			onSelect?.();
+		}
+	}
+
+	function formatDisplayDate(compact: boolean) {
+		if (!internalValue) return '';
+		const date = new Date(internalValue.year, internalValue.month - 1, internalValue.day);
+		const opts: Intl.DateTimeFormatOptions = {
+			...(compact ? {} : { weekday: 'short' }),
+			month: 'short',
+			day: 'numeric'
+		};
+		if (internalValue.year !== currentYear) {
+			opts.year = 'numeric';
+		}
+		return date.toLocaleDateString(locale, opts);
+	}
+	let displayText = $derived(formatDisplayDate(false));
+	let compactText = $derived(formatDisplayDate(true));
+</script>
+
+<DatePicker.Root
+	bind:value={internalValue}
+	bind:open={isOpen}
+	onValueChange={handleValueChange}
+	onOpenChangeComplete={handleOpenChangeComplete}
+	minValue={internalMinValue}
+	granularity="day"
+	fixedWeeks={true}
+	weekdayFormat="short"
+	{locale}
+	{required}
+>
+	<DatePicker.Trigger
+		aria-label={`${label}: ${displayText || 'Select date'}`}
+		class="flex h-11 min-w-0 flex-1 cursor-pointer items-center rounded-ui border border-line bg-recess px-2 text-xs text-ink shadow-(--ui-recess-shadow) transition-colors hover:border-control-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus min-[360px]:px-3 min-[360px]:text-sm"
+	>
+		<span class="truncate select-none">
+			{#if displayText}
+				<span class="min-[360px]:hidden">{compactText}</span>
+				<span class="hidden min-[360px]:inline">{displayText}</span>
+			{:else}
+				<span class="text-base-400 dark:text-base-500">Select date</span>
+			{/if}
+		</span>
+	</DatePicker.Trigger>
+
+	<DatePicker.Content
+		sideOffset={8}
+		class="z-50 max-w-[calc(100vw-2rem)] rounded-panel border border-line bg-page p-3 text-ink"
+	>
+		<DatePicker.Calendar>
+			{#snippet children({ months, weekdays })}
+				<DatePicker.Header class="flex items-center justify-between">
+					<DatePicker.PrevButton
+						class="inline-flex size-8 items-center justify-center rounded-lg text-base-500 hover:bg-base-200 dark:text-base-400 dark:hover:bg-base-700"
+					>
+						<Icon img={ChevronLeft} size={20} />
+					</DatePicker.PrevButton>
+
+					<div class="flex items-center gap-1.5">
+						<DatePicker.MonthSelect
+							monthFormat="long"
+							class="cursor-pointer border-0 bg-transparent text-sm font-medium text-base-900 outline-none hover:text-accent-500 focus:ring-0 focus:outline-none dark:text-base-100 dark:hover:text-accent-400"
+						/>
+						<DatePicker.YearSelect
+							years={yearRange}
+							class="cursor-pointer border-0 bg-transparent text-sm font-medium text-base-900 outline-none hover:text-accent-500 focus:ring-0 focus:outline-none dark:text-base-100 dark:hover:text-accent-400"
+						/>
+					</div>
+
+					<DatePicker.NextButton
+						class="inline-flex size-8 items-center justify-center rounded-lg text-base-500 hover:bg-base-200 dark:text-base-400 dark:hover:bg-base-700"
+					>
+						<Icon img={ChevronRight} size={20} />
+					</DatePicker.NextButton>
+				</DatePicker.Header>
+
+				{#each months as month (month.value.month)}
+					<DatePicker.Grid class="mt-3 w-full">
+						<DatePicker.GridHead>
+							<DatePicker.GridRow class="flex w-full">
+								{#each weekdays as weekday, i (i)}
+									<DatePicker.HeadCell
+										class="flex-1 text-center text-xs font-medium text-base-400 dark:text-base-500"
+									>
+										{weekday}
+									</DatePicker.HeadCell>
+								{/each}
+							</DatePicker.GridRow>
+						</DatePicker.GridHead>
+
+						<DatePicker.GridBody>
+							{#each month.weeks as week, weekIndex (weekIndex)}
+								<DatePicker.GridRow class="flex w-full">
+									{#each week as day (day.toString())}
+										<DatePicker.Cell date={day} month={month.value} class="flex-1 p-0.5">
+											<DatePicker.Day>
+												{#snippet children({ selected, disabled, day: dayText })}
+													<div
+														class="relative flex size-9 items-center justify-center rounded-lg text-sm
+														{selected
+															? 'bg-accent-400 font-medium text-base-950'
+															: disabled
+																? 'pointer-events-none text-base-300 dark:text-base-600'
+																: day.month !== month.value.month
+																	? 'text-base-300 dark:text-base-600'
+																	: 'text-base-700 hover:bg-base-200 dark:text-base-300 dark:hover:bg-base-700'}"
+													>
+														{dayText}
+														{#if day.day === todayDay && day.month === todayMonth && day.year === todayYear}
+															<span
+																class="absolute bottom-1 left-1/2 size-1 -translate-x-1/2 rounded-full {selected
+																	? 'bg-base-950'
+																	: 'bg-accent-500'}"
+															></span>
+														{/if}
+													</div>
+												{/snippet}
+											</DatePicker.Day>
+										</DatePicker.Cell>
+									{/each}
+								</DatePicker.GridRow>
+							{/each}
+						</DatePicker.GridBody>
+					</DatePicker.Grid>
+				{/each}
+			{/snippet}
+		</DatePicker.Calendar>
+	</DatePicker.Content>
+</DatePicker.Root>

package/dist/events/DatePicker.svelte.d.ts

@@ -0,0 +1,12 @@
+import { DatePicker } from 'bits-ui';
+type $$ComponentProps = {
+    value: string;
+    required?: boolean;
+    label?: string;
+    minValue?: string;
+    locale?: string;
+    onSelect?: () => void;
+};
+declare const DatePicker: import("svelte").Component<$$ComponentProps, {}, "value">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/events/DateTimePicker.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	// @ts-nocheck
+	import DatePickerField from './DatePicker.svelte';
+	import TimePicker from './TimePicker.svelte';
+	import { untrack } from 'svelte';
+	import { BROWSER as browser } from 'esm-env';
+
+	let {
+		value = $bindable(''),
+		required = false,
+		label = '',
+		minValue = '',
+		referenceTime = ''
+	}: {
+		value: string;
+		required?: boolean;
+		label?: string;
+		minValue?: string;
+		referenceTime?: string;
+	} = $props();
+
+	let datePart = $state('');
+	let timePart = $state('00:00');
+	let timeEl: HTMLDivElement | undefined = $state(undefined);
+
+	const locale = browser ? navigator.language || 'en' : 'en';
+	let minDatePart = $derived(minValue ? minValue.split('T')[0] || '' : '');
+	let refTimePart = $derived.by(() => {
+		if (!referenceTime) return '';
+		const [refDate, refTime] = referenceTime.split('T');
+		if (refDate && refDate === datePart && refTime) return refTime;
+		return '';
+	});
+
+	// Default to current date/time rounded up to the next hour when no initial value
+	if (browser && !value) {
+		const now = new Date();
+		// Local calculation only, not component state.
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
+		const rounded = new Date(now);
+		rounded.setMinutes(0, 0, 0);
+		rounded.setHours(rounded.getHours() + 1);
+
+		const yyyy = rounded.getFullYear();
+		const mm = String(rounded.getMonth() + 1).padStart(2, '0');
+		const dd = String(rounded.getDate()).padStart(2, '0');
+		const hh = String(rounded.getHours()).padStart(2, '0');
+		const min = String(rounded.getMinutes()).padStart(2, '0');
+
+		const defaultDate = `${yyyy}-${mm}-${dd}`;
+		const defaultTime = `${hh}:${min}`;
+		datePart = defaultDate;
+		timePart = defaultTime;
+		value = `${defaultDate}T${defaultTime}`;
+	}
+
+	// Sync external value -> date/time parts
+	$effect(() => {
+		const v = value;
+		untrack(() => {
+			if (v) {
+				const [d, t] = v.split('T');
+				if (d && d !== datePart) datePart = d;
+				if (t && t !== timePart) timePart = t;
+			}
+		});
+	});
+
+	// Sync date/time parts -> external value
+	$effect(() => {
+		const d = datePart;
+		const t = timePart;
+		untrack(() => {
+			if (d) {
+				const newVal = `${d}T${t || '00:00'}`;
+				if (newVal !== value) value = newVal;
+			}
+		});
+	});
+
+	function focusTime() {
+		// Small delay to let the popover finish closing
+		setTimeout(() => {
+			if (timeEl) {
+				const segment = timeEl.querySelector('[data-segment]');
+				if (segment instanceof HTMLElement) {
+					segment.focus();
+				}
+			}
+		}, 50);
+	}
+</script>
+
+<div class="flex min-w-0 flex-1 items-center gap-2">
+	<DatePickerField
+		bind:value={datePart}
+		label={label ? `${label} date` : 'Date'}
+		{required}
+		minValue={minDatePart}
+		{locale}
+		onSelect={focusTime}
+	/>
+	<div bind:this={timeEl} class="shrink-0">
+		<TimePicker
+			bind:value={timePart}
+			label={label ? `${label} time` : 'Time'}
+			{required}
+			{locale}
+			referenceTime={refTimePart}
+		/>
+	</div>
+</div>

package/dist/events/DateTimePicker.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    value: string;
+    required?: boolean;
+    label?: string;
+    minValue?: string;
+    referenceTime?: string;
+};
+declare const DateTimePicker: import("svelte").Component<$$ComponentProps, {}, "value">;
+type DateTimePicker = ReturnType<typeof DateTimePicker>;
+export default DateTimePicker;