@atmo-dev/kit 0.6.0 → 0.7.0

package/README.md

@@ -9,6 +9,13 @@ 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).
 
+## Navigation
+
+`IconRail` items accept a `variant` from `Button` (`primary`, `secondary`, `ghost`,
+`link`); omitted variants remain `ghost`. Use `primary: true, variant: 'primary'`
+for a separated, filled creation action in the rail, mobile bar or drawer. The
+existing `primary` flag alone retains its subtle accent/spacing behavior.
+
 ## AT record metadata (AT Tags)
 
 Use `AtTags` to let other clients discover which AT Protocol records and identities
@@ -114,6 +121,8 @@ The event UI formerly in `@atmo-dev/events-ui` lives in this package:
 - `@atmo-dev/kit/events-data`: structural event types, adapter contracts, conference/date helpers, URL helpers, theme values, linked-record types and thumbnail selection. This entry is safe in plain Node and server routes: no Svelte, CSS, maps or players are loaded. Browser helpers such as `compressImage` only access browser APIs when called.
 - `@atmo-dev/kit/events/editor`: `buildEventRecord` and `buildThumbnailMedia` for hosts that need explicit record construction. This separate entry includes browser-oriented thumbnail code; it is not part of the pure data API.
 
+Event cards and covers prefer native `media` images, then an HTTPS `poster.url`, then a URI named `Event Image` (laugh.town compatibility). `getEventExternalImage(event)` from `events-data` returns `{ url, alt, aspectRatio? }` or `null`, validating URLs and optional poster dimensions. It performs no IO; apps must apply their own allowlist/redirect policy before fetching an external image server-side.
+
 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):

package/dist/components/IconRail.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
 	import type { IconNode } from '@sketchyicons/svelte';
 	import type { ButtonProps } from './Button.svelte';
-	export type IconRailItem = Pick<ButtonProps, 'href' | 'onclick' | 'disabled'> & {
+	export type IconRailItem = Pick<ButtonProps, 'href' | 'onclick' | 'disabled' | 'variant'> & {
 		label: string;
 		icon: IconNode;
 		active?: boolean;
@@ -77,7 +77,7 @@
 					<Button
 						href={item.href}
 						disabled={item.disabled}
-						variant="ghost"
+						variant={item.variant ?? 'ghost'}
 						aria-current={item.active ? 'page' : undefined}
 						data-part="item"
 						onclick={(event) => {
@@ -85,8 +85,11 @@
 							item.onclick?.(event);
 						}}
 						class={cn(
-							'min-h-11 w-full justify-start gap-3 px-3 py-3 text-sm aria-[current=page]:bg-recess aria-[current=page]:text-action',
-							item.primary && 'mt-3 text-action'
+							'min-h-11 w-full justify-start gap-3 px-3 py-3 text-sm',
+							(!item.variant || item.variant === 'ghost') &&
+								'aria-[current=page]:bg-recess aria-[current=page]:text-action',
+							item.primary && 'mt-3',
+							item.primary && (!item.variant || item.variant === 'ghost') && 'text-action'
 						)}
 					>
 						<Icon img={item.icon} size={22} />
@@ -128,15 +131,22 @@
 									{...props}
 									href={item.href}
 									disabled={item.disabled}
-									variant="ghost"
+									variant={item.variant ?? 'ghost'}
 									size="icon"
 									aria-label={`${item.label}${item.badge ? (typeof item.badge === 'number' ? `, ${item.badge} unread` : ', unread') : ''}`}
 									aria-current={item.active ? 'page' : undefined}
 									data-part="item"
 									class={cn(
-										'relative size-11 rounded-(--atmo-radius-button) text-muted hover:bg-recess/55 aria-[current=page]:text-action max-sm:size-10',
-										item.primary && 'mt-2 text-action hover:text-action max-sm:mt-0',
-										backed && 'bg-recess/45 hover:bg-recess/75'
+										'relative size-11 rounded-(--atmo-radius-button) max-sm:size-10',
+										(!item.variant || item.variant === 'ghost') &&
+											'text-muted hover:bg-recess/55 aria-[current=page]:text-action',
+										item.primary && 'mt-2 max-sm:mt-0',
+										item.primary &&
+											(!item.variant || item.variant === 'ghost') &&
+											'text-action hover:text-action',
+										backed &&
+											(!item.variant || item.variant === 'ghost') &&
+											'bg-recess/45 hover:bg-recess/75'
 									)}
 								>
 									<Icon img={item.icon} size={22} />{#if item.badge}<span

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

@@ -1,6 +1,6 @@
 import type { IconNode } from '@sketchyicons/svelte';
 import type { ButtonProps } from './Button.svelte';
-export type IconRailItem = Pick<ButtonProps, 'href' | 'onclick' | 'disabled'> & {
+export type IconRailItem = Pick<ButtonProps, 'href' | 'onclick' | 'disabled' | 'variant'> & {
     label: string;
     icon: IconNode;
     active?: boolean;

package/dist/events/EventCard.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getCDNImageBlobUrl } from './atproto-helpers.js';
-	import { getEventThumbnail } from './event-media.js';
+	import { getEventThumbnail, getEventExternalImage } from './event-media.js';
 	import { eventUrl, isEventOngoing, type FlatEventRecord } from './contrail.js';
 	import Avatar from 'svelte-boring-avatars';
 	import { Badge, Icon } from '../index.js';
@@ -75,7 +75,7 @@
 			if (url) return { url, alt: banner.alt || event.name };
 		}
 
-		return null;
+		return getEventExternalImage(event);
 	}
 
 	let thumbnail = $derived(getThumbnail(event));

package/dist/events/EventView.svelte

@@ -2,7 +2,7 @@
 	import { eventUrl, isEventOngoing, type FlatEventRecord } from './contrail.js';
 	import type { EventViewData } from './view-data.js';
 	import { getCDNImageBlobUrl } from './atproto-helpers.js';
-	import { getEventThumbnail } from './event-media.js';
+	import { getEventThumbnail, getEventExternalImage } from './event-media.js';
 	import { Button, ToggleGroup, ToggleGroupItem } from '../index.js';
 	import ShareModal from './ShareModal.svelte';
 	import EventComments from './EventComments.svelte';
@@ -159,8 +159,8 @@
 		return { url, alt: media.alt || eventData.name, aspectRatio: media.aspect_ratio };
 	});
 
-	// Prefer thumbnail, then flyer; fall back to header/banner image.
-	let displayImage = $derived(thumbnailImage ?? bannerImage);
+	// Prefer native media, then external posters.
+	let displayImage = $derived(thumbnailImage ?? bannerImage ?? getEventExternalImage(eventData));
 	let imageAspectRatio = $derived.by(() => {
 		const ratio = displayImage?.aspectRatio;
 		if (!ratio || ratio.width <= 0 || ratio.height <= 0) return null;

package/dist/events/event-media.d.ts

@@ -2,3 +2,19 @@
 export declare function getEventThumbnail<T extends {
     role?: unknown;
 }>(media: readonly T[] | null | undefined): T | undefined;
+export type ExternalEventImage = {
+    url: string;
+    alt: string;
+    aspectRatio?: {
+        width: number;
+        height: number;
+    };
+};
+/** External poster compatibility (e.g. laugh.town). Prefer native media first.
+ * Validates display URLs only; apps must apply their own server-fetch policy.
+ */
+export declare function getEventExternalImage(event: {
+    name: string;
+    poster?: unknown;
+    uris?: unknown;
+}): ExternalEventImage | null;

package/dist/events/event-media.js

@@ -2,3 +2,48 @@
 export function getEventThumbnail(media) {
     return media?.find((m) => m.role === 'thumbnail') ?? media?.find((m) => m.role === 'flyer');
 }
+function imageUrl(value) {
+    if (typeof value !== 'string')
+        return null;
+    try {
+        const url = new URL(value);
+        if (url.protocol !== 'https:' || url.username || url.password)
+            return null;
+        return url.href;
+    }
+    catch {
+        return null;
+    }
+}
+/** External poster compatibility (e.g. laugh.town). Prefer native media first.
+ * Validates display URLs only; apps must apply their own server-fetch policy.
+ */
+export function getEventExternalImage(event) {
+    const poster = event.poster;
+    if (poster && typeof poster === 'object' && 'url' in poster) {
+        const url = imageUrl(poster.url);
+        if (url) {
+            const width = 'width' in poster ? poster.width : undefined;
+            const height = 'height' in poster ? poster.height : undefined;
+            const aspectRatio = typeof width === 'number' &&
+                Number.isFinite(width) &&
+                width > 0 &&
+                typeof height === 'number' &&
+                Number.isFinite(height) &&
+                height > 0
+                ? { width, height }
+                : undefined;
+            return { url, alt: event.name, aspectRatio };
+        }
+    }
+    if (Array.isArray(event.uris)) {
+        for (const link of event.uris) {
+            if (!link || typeof link !== 'object' || link.name !== 'Event Image')
+                continue;
+            const url = imageUrl(link.uri);
+            if (url)
+                return { url, alt: event.name };
+        }
+    }
+    return null;
+}

package/dist/events/event-types.d.ts

@@ -35,6 +35,8 @@ export type EventData = EventLexiconMain & {
         uri: string;
         name?: string;
     }>;
+    /** External poster extension used by laugh.town; validated when displayed. */
+    poster?: unknown;
     media?: Array<{
         role: string;
         alt?: string;

package/dist/events-data.d.ts

@@ -9,7 +9,7 @@ export * from './events/conference.js';
 export * from './events/linked-records.js';
 export * from './events/date-format.js';
 export * from './events/theme.js';
-export { getEventThumbnail } from './events/event-media.js';
+export { getEventThumbnail, getEventExternalImage, type ExternalEventImage } from './events/event-media.js';
 export { getCDNImageBlobUrl, compressImage } from './events/atproto-helpers.js';
 export { getProfileUrl, getLocalProfileUrl } from './events/profile-url.js';
 export { normalizeCountryCode, normalizeEventLocations, LocationValidationError } from './events/editor/location.js';

package/dist/events-data.js

@@ -3,7 +3,7 @@ export * from './events/conference.js';
 export * from './events/linked-records.js';
 export * from './events/date-format.js';
 export * from './events/theme.js';
-export { getEventThumbnail } from './events/event-media.js';
+export { getEventThumbnail, getEventExternalImage } from './events/event-media.js';
 export { getCDNImageBlobUrl, compressImage } from './events/atproto-helpers.js';
 export { getProfileUrl, getLocalProfileUrl } from './events/profile-url.js';
 export { normalizeCountryCode, normalizeEventLocations, LocationValidationError } from './events/editor/location.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atmo-dev/kit",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "The shared UI foundation for Atmo apps.",
   "license": "MIT",
   "repository": {