@ewanc26/pds-landing 0.1.2 → 2.0.0

package/README.md

@@ -1,22 +1,132 @@
-# pds-landing
+# @ewanc26/pds-landing
 
-Static landing page for [pds.ewancroft.uk](https://pds.ewancroft.uk) — a personal ATProto PDS.
+Composable Svelte 5 components for an ATProto PDS landing page — terminal aesthetic, live status fetching, zero config to drop in.
 
-Built with SvelteKit, Svelte 5, TypeScript, and Tailwind CSS v4.
+## Install
 
-Displays live PDS status by querying `/xrpc/_health` and
-`/xrpc/com.atproto.server.describeServer` on load.
+```bash
+pnpm add @ewanc26/pds-landing @ewanc26/ui
+```
+
+## Quick start — full page
+
+```svelte
+<script>
+  import { PDSPage } from '@ewanc26/pds-landing';
+</script>
+
+<!-- Drop-in: renders the complete terminal landing page -->
+<PDSPage
+  cardTitle="ewan's pds"
+  promptUser="server"
+  promptHost="pds.ewancroft.uk"
+  tagline="Bluesky-compatible ATProto PDS · personal instance"
+  blueskyHandle="ewancroft.uk"
+/>
+```
+
+Import the PDS design tokens and base styles once in your layout:
+
+```css
+/* app.css / layout.css */
+@import '@ewanc26/ui/styles/pds-tokens.css';
+```
+
+---
+
+## Mix-and-match — primitives
+
+All primitives are exported individually so you can compose custom layouts.
+
+```svelte
+<script>
+  import {
+    TerminalCard,
+    PromptLine,
+    Tagline,
+    SectionLabel,
+    Divider,
+    StatusGrid,
+    LinkList,
+    ContactSection,
+    PDSFooter,
+  } from '@ewanc26/pds-landing';
+</script>
+
+<TerminalCard title="my pds">
+  <PromptLine user="server" host="pds.example.com" />
+  <Tagline text="My custom tagline" />
+
+  <SectionLabel label="status" />
+  <StatusGrid />          <!-- fetches live from same origin -->
+
+  <Divider />
 
-## Build
+  <SectionLabel label="links" />
+  <LinkList links={[
+    { href: 'https://bsky.app', label: 'Bluesky' },
+    { href: 'https://atproto.com', label: 'ATProto docs' },
+  ]} />
 
-```sh
-pnpm build
+  <Divider />
+
+  <SectionLabel label="contact" />
+  <ContactSection blueskyHandle="you.bsky.social" />
+</TerminalCard>
+
+<PDSFooter />
+```
+
+### Use raw KV data
+
+```svelte
+<script>
+  import { KVGrid } from '@ewanc26/pds-landing';
+  import type { KVItem } from '@ewanc26/pds-landing';
+
+  const items: KVItem[] = [
+    { key: 'status', value: '✓ online', status: 'ok' },
+    { key: 'region', value: 'eu-west-1' },
+    { key: 'invite', value: 'required', status: 'warn' },
+  ];
+</script>
+
+<KVGrid {items} />
 ```
 
-Output is in `build/` — a directory of static files suitable for serving with Caddy or any file server.
+### Fetch status yourself
 
-## Dev
+```ts
+import { fetchPDSStatus } from '@ewanc26/pds-landing';
 
-```sh
-pnpm dev
+const { health, description, accountCount } = await fetchPDSStatus('https://pds.example.com');
+```
+
+---
+
+## Components
+
+| Component | Description |
+|---|---|
+| `PDSPage` | Full assembled landing page (convenience) |
+| `TerminalCard` | Terminal window shell with traffic-light dots titlebar |
+| `PromptLine` | `user@host:path $` bash prompt header |
+| `Tagline` | Dimmed subtitle beneath the prompt |
+| `SectionLabel` | Uppercase section heading |
+| `Divider` | Thin green-tinted `<hr>` |
+| `KVGrid` | Key-value grid with ok/warn/err/loading states |
+| `StatusGrid` | Live-fetching PDS status grid (wraps `KVGrid`) |
+| `LinkList` | `→ link` list |
+| `ContactSection` | Bluesky mention + optional email |
+| `PDSFooter` | Footer with nixpkgs / atproto links |
+
+## Design tokens
+
+All components consume CSS custom properties from `@ewanc26/ui/styles/pds-tokens.css`:
+
+```
+--pds-font-mono
+--pds-color-crust / mantle / base / surface-0 / surface-1 / overlay-0
+--pds-color-text / subtext-0
+--pds-color-green / red / yellow / shadow
 ```

package/dist/components/ContactSection.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	interface Props {
+		/**
+		 * Bluesky handle (without @) to link to.
+		 * Example: `'ewancroft.uk'`
+		 */
+		blueskyHandle?: string;
+		/**
+		 * Base URL of the Bluesky web client used to build the profile link.
+		 * Defaults to `'https://bsky.app'`.
+		 */
+		blueskyClientUrl?: string;
+		/** Contact email address. Rendered only when provided. */
+		email?: string;
+	}
+
+	let {
+		blueskyHandle,
+		blueskyClientUrl = 'https://bsky.app',
+		email
+	}: Props = $props();
+
+	let profileUrl = $derived(
+		blueskyHandle ? `${blueskyClientUrl}/profile/${blueskyHandle}` : null
+	);
+</script>
+
+{#if blueskyHandle && profileUrl}
+	<p class="pds-contact-note">
+		Send a mention on Bluesky to
+		<a href={profileUrl} target="_blank" rel="noopener">@{blueskyHandle}</a>
+	</p>
+{/if}
+
+{#if email}
+	<p class="pds-contact-note pds-contact-email-row">
+		Email: <a href="mailto:{email}">{email}</a>
+	</p>
+{/if}
+
+<style>
+	.pds-contact-note {
+		font-size: 0.88em;
+		color: var(--pds-color-subtext-0);
+	}
+
+	.pds-contact-email-row {
+		margin-top: 0.4rem;
+	}
+
+	.pds-contact-note a {
+		text-decoration: none;
+		color: var(--pds-color-green);
+	}
+
+	.pds-contact-note a:hover {
+		text-decoration: underline;
+	}
+</style>

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

@@ -0,0 +1,17 @@
+interface Props {
+    /**
+     * Bluesky handle (without @) to link to.
+     * Example: `'ewancroft.uk'`
+     */
+    blueskyHandle?: string;
+    /**
+     * Base URL of the Bluesky web client used to build the profile link.
+     * Defaults to `'https://bsky.app'`.
+     */
+    blueskyClientUrl?: string;
+    /** Contact email address. Rendered only when provided. */
+    email?: string;
+}
+declare const ContactSection: import("svelte").Component<Props, {}, "">;
+type ContactSection = ReturnType<typeof ContactSection>;
+export default ContactSection;

package/dist/components/Divider.svelte

@@ -0,0 +1,9 @@
+<hr class="pds-divider" />
+
+<style>
+	.pds-divider {
+		border: none;
+		border-top: 1px solid color-mix(in srgb, var(--pds-color-green) 12%, transparent);
+		margin: 1.2rem 0;
+	}
+</style>

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

@@ -0,0 +1,26 @@
+export default Divider;
+type Divider = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Divider: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/KVGrid.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	/** A single row in the key-value status grid. */
+	export interface KVItem {
+		key: string;
+		value: string;
+		/** Visual state applied to the value cell. */
+		status?: 'ok' | 'warn' | 'err' | 'loading';
+	}
+
+	interface Props {
+		items: KVItem[];
+	}
+
+	let { items }: Props = $props();
+</script>
+
+<div class="pds-kv-grid" role="list">
+	{#each items as item (item.key)}
+		<span class="pds-kv-key" role="term">{item.key}</span>
+		<span class="pds-kv-val {item.status ?? ''}" role="definition">{item.value}</span>
+	{/each}
+</div>
+
+<style>
+	.pds-kv-grid {
+		display: grid;
+		grid-template-columns: max-content 1fr;
+		gap: 0.25rem 1.2rem;
+		font-size: 0.88em;
+		margin-bottom: 1.4rem;
+	}
+
+	.pds-kv-key {
+		color: var(--pds-color-green);
+		opacity: 0.6;
+		white-space: nowrap;
+	}
+
+	.pds-kv-val {
+		color: var(--pds-color-text);
+		word-break: break-all;
+		min-width: 0;
+	}
+
+	.pds-kv-val.ok {
+		color: var(--pds-color-green);
+	}
+	.pds-kv-val.warn {
+		color: var(--pds-color-yellow);
+	}
+	.pds-kv-val.err {
+		color: var(--pds-color-red);
+	}
+	.pds-kv-val.loading {
+		color: var(--pds-color-surface-1);
+		animation: pds-kv-pulse 1.2s ease-in-out infinite;
+	}
+
+	@keyframes pds-kv-pulse {
+		0%,
+		100% {
+			opacity: 0.4;
+		}
+		50% {
+			opacity: 1;
+		}
+	}
+
+	@media (max-width: 440px) {
+		.pds-kv-grid {
+			grid-template-columns: 1fr;
+			gap: 0;
+		}
+
+		.pds-kv-key {
+			text-transform: uppercase;
+			opacity: 1;
+			font-size: 0.7em;
+			letter-spacing: 0.1em;
+			margin-top: 0.7rem;
+		}
+
+		.pds-kv-key:first-child {
+			margin-top: 0;
+		}
+	}
+</style>

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

@@ -0,0 +1,13 @@
+/** A single row in the key-value status grid. */
+export interface KVItem {
+    key: string;
+    value: string;
+    /** Visual state applied to the value cell. */
+    status?: 'ok' | 'warn' | 'err' | 'loading';
+}
+interface Props {
+    items: KVItem[];
+}
+declare const KVGrid: import("svelte").Component<Props, {}, "">;
+type KVGrid = ReturnType<typeof KVGrid>;
+export default KVGrid;

package/dist/components/LinkList.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	/** A single entry in a link list. */
+	export interface LinkItem {
+		href: string;
+		label: string;
+		/**
+		 * Whether to open in a new tab.
+		 * Defaults to `true` — set to `false` for internal navigation.
+		 */
+		external?: boolean;
+	}
+
+	interface Props {
+		links: LinkItem[];
+	}
+
+	let { links }: Props = $props();
+</script>
+
+<ul class="pds-link-list">
+	{#each links as link (link.href)}
+		<li>
+			<a
+				href={link.href}
+				target={link.external !== false ? '_blank' : undefined}
+				rel={link.external !== false ? 'noopener' : undefined}
+			>
+				{link.label}
+			</a>
+		</li>
+	{/each}
+</ul>
+
+<style>
+	.pds-link-list {
+		list-style: none;
+		display: flex;
+		flex-direction: column;
+		gap: 0.35rem;
+		font-size: 0.88em;
+		padding: 0;
+		margin: 0;
+	}
+
+	.pds-link-list li::before {
+		content: '→ ';
+		color: var(--pds-color-green);
+	}
+
+	.pds-link-list a {
+		text-decoration: none;
+		color: var(--pds-color-green);
+		opacity: 0.85;
+		transition: opacity 0.15s;
+	}
+
+	.pds-link-list a:hover {
+		opacity: 1;
+	}
+</style>

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

@@ -0,0 +1,16 @@
+/** A single entry in a link list. */
+export interface LinkItem {
+    href: string;
+    label: string;
+    /**
+     * Whether to open in a new tab.
+     * Defaults to `true` — set to `false` for internal navigation.
+     */
+    external?: boolean;
+}
+interface Props {
+    links: LinkItem[];
+}
+declare const LinkList: import("svelte").Component<Props, {}, "">;
+type LinkList = ReturnType<typeof LinkList>;
+export default LinkList;

package/dist/components/PDSFooter.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	interface Props {
+		/** Show the `nixpkgs#bluesky-pds` credit. Defaults to `true`. */
+		showNixpkg?: boolean;
+		/** Show the `atproto.com` link. Defaults to `true`. */
+		showAtproto?: boolean;
+	}
+
+	let { showNixpkg = true, showAtproto = true }: Props = $props();
+</script>
+
+<footer class="pds-footer">
+	{#if showNixpkg}
+		powered by
+		<a href="https://search.nixos.org/packages?show=bluesky-pds" target="_blank" rel="noopener"
+			>nixpkgs#bluesky-pds</a
+		>
+	{/if}
+	{#if showNixpkg && showAtproto}
+		&nbsp;·&nbsp;
+	{/if}
+	{#if showAtproto}
+		<a href="https://atproto.com" target="_blank" rel="noopener">atproto.com</a>
+	{/if}
+</footer>
+
+<style>
+	.pds-footer {
+		text-align: center;
+		color: color-mix(in srgb, var(--pds-color-green) 35%, transparent);
+		font-size: 0.75em;
+	}
+
+	.pds-footer a {
+		text-decoration: underline;
+		color: color-mix(in srgb, var(--pds-color-green) 35%, transparent);
+		transition: color 0.15s;
+	}
+
+	.pds-footer a:hover {
+		color: var(--pds-color-green);
+	}
+</style>

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

@@ -0,0 +1,9 @@
+interface Props {
+    /** Show the `nixpkgs#bluesky-pds` credit. Defaults to `true`. */
+    showNixpkg?: boolean;
+    /** Show the `atproto.com` link. Defaults to `true`. */
+    showAtproto?: boolean;
+}
+declare const PDSFooter: import("svelte").Component<Props, {}, "">;
+type PDSFooter = ReturnType<typeof PDSFooter>;
+export default PDSFooter;

package/dist/components/PDSPage.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+	/**
+	 * PDSPage — a fully assembled ATProto PDS landing page.
+	 *
+	 * All sections (status, endpoints, links, contact) are included by default.
+	 * Each section can be individually disabled via boolean props, and the
+	 * individual primitives (TerminalCard, StatusGrid, LinkList, …) can be
+	 * composed manually for bespoke layouts.
+	 */
+	import { onMount } from 'svelte';
+	import TerminalCard from './TerminalCard.svelte';
+	import PromptLine from './PromptLine.svelte';
+	import Tagline from './Tagline.svelte';
+	import SectionLabel from './SectionLabel.svelte';
+	import Divider from './Divider.svelte';
+	import StatusGrid from './StatusGrid.svelte';
+	import LinkList from './LinkList.svelte';
+	import ContactSection from './ContactSection.svelte';
+	import PDSFooter from './PDSFooter.svelte';
+	import type { LinkItem } from './LinkList.svelte';
+	import { fetchPDSStatus } from '../utils/fetchPDSStatus.js';
+
+	interface Props {
+		// ── Card chrome ──────────────────────────────────────────────────────
+		/** Text shown in the terminal titlebar. */
+		cardTitle?: string;
+
+		// ── Prompt ───────────────────────────────────────────────────────────
+		promptUser?: string;
+		promptHost?: string;
+		promptPath?: string;
+		tagline?: string;
+
+		// ── API ──────────────────────────────────────────────────────────────
+		/**
+		 * Origin prepended to `/xrpc/…` calls.
+		 * Leave empty (`''`) to use the current page's origin (default).
+		 */
+		baseUrl?: string;
+
+		// ── Sections ─────────────────────────────────────────────────────────
+		showStatus?: boolean;
+		showEndpoints?: boolean;
+		showLinks?: boolean;
+		showContact?: boolean;
+		showFooter?: boolean;
+
+		// ── Links section ────────────────────────────────────────────────────
+		/**
+		 * Static links always shown in the Links section.
+		 * Dynamic links (privacy policy / ToS) from `describeServer` are
+		 * appended automatically.
+		 */
+		staticLinks?: LinkItem[];
+
+		// ── Contact section ──────────────────────────────────────────────────
+		blueskyHandle?: string;
+		blueskyClientUrl?: string;
+
+		// ── Footer ───────────────────────────────────────────────────────────
+		showNixpkg?: boolean;
+		showAtproto?: boolean;
+	}
+
+	let {
+		cardTitle = "ewan's pds",
+		promptUser = 'server',
+		promptHost = 'pds.ewancroft.uk',
+		promptPath = '~',
+		tagline = 'Bluesky-compatible ATProto PDS · personal instance',
+		baseUrl = '',
+		showStatus = true,
+		showEndpoints = true,
+		showLinks = true,
+		showContact = true,
+		showFooter = true,
+		staticLinks = [{ href: 'https://witchsky.app', label: 'Witchsky Web Client' }],
+		blueskyHandle = 'ewancroft.uk',
+		blueskyClientUrl = 'https://witchsky.app',
+		showNixpkg = true,
+		showAtproto = true
+	}: Props = $props();
+
+	const ENDPOINT_LINKS: LinkItem[] = [
+		{ href: 'https://github.com/bluesky-social/atproto', label: 'atproto source code' },
+		{ href: 'https://github.com/bluesky-social/pds', label: 'self-hosting guide' },
+		{ href: 'https://atproto.com', label: 'protocol docs' }
+	];
+
+	// Dynamic state populated from describeServer
+	let extraLinks: LinkItem[] = $state([]);
+	let dynamicLinks: LinkItem[] = $derived([...staticLinks, ...extraLinks]);
+	let contactEmail: string | null = $state(null);
+
+	onMount(async () => {
+		try {
+			const { description } = await fetchPDSStatus(baseUrl);
+			const extras: LinkItem[] = [];
+			if (description.links?.privacyPolicy) {
+				extras.push({ href: description.links.privacyPolicy, label: 'Privacy Policy' });
+			}
+			if (description.links?.termsOfService) {
+				extras.push({ href: description.links.termsOfService, label: 'Terms of Service' });
+			}
+			if (extras.length) extraLinks = extras;
+			if (description.contact?.email) contactEmail = description.contact.email;
+		} catch {
+			// silently fall back to static defaults
+		}
+	});
+</script>
+
+<div class="pds-page">
+	<TerminalCard title={cardTitle}>
+		<PromptLine user={promptUser} host={promptHost} path={promptPath} />
+		<Tagline text={tagline} />
+
+		{#if showStatus}
+			<SectionLabel label="status" />
+			<StatusGrid {baseUrl} />
+		{/if}
+
+		{#if showEndpoints}
+			<Divider />
+			<SectionLabel label="endpoints" />
+			<p class="pds-endpoints-note">
+				Most API routes are under <span class="pds-highlight">/xrpc/</span>
+			</p>
+			<LinkList links={ENDPOINT_LINKS} />
+		{/if}
+
+		{#if showLinks}
+			<Divider />
+			<SectionLabel label="links" />
+			<LinkList links={dynamicLinks} />
+		{/if}
+
+		{#if showContact}
+			<Divider />
+			<SectionLabel label="contact" />
+			<ContactSection
+				{blueskyHandle}
+				{blueskyClientUrl}
+				email={contactEmail ?? undefined}
+			/>
+		{/if}
+	</TerminalCard>
+
+	{#if showFooter}
+		<PDSFooter {showNixpkg} {showAtproto} />
+	{/if}
+</div>
+
+<style>
+	.pds-page {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 2rem;
+		width: 100%;
+	}
+
+	.pds-endpoints-note {
+		font-size: 0.88em;
+		color: var(--pds-color-subtext-0);
+		margin-bottom: 0.7rem;
+	}
+
+	.pds-highlight {
+		color: var(--pds-color-green);
+	}
+</style>

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

@@ -0,0 +1,32 @@
+import type { LinkItem } from './LinkList.svelte';
+interface Props {
+    /** Text shown in the terminal titlebar. */
+    cardTitle?: string;
+    promptUser?: string;
+    promptHost?: string;
+    promptPath?: string;
+    tagline?: string;
+    /**
+     * Origin prepended to `/xrpc/…` calls.
+     * Leave empty (`''`) to use the current page's origin (default).
+     */
+    baseUrl?: string;
+    showStatus?: boolean;
+    showEndpoints?: boolean;
+    showLinks?: boolean;
+    showContact?: boolean;
+    showFooter?: boolean;
+    /**
+     * Static links always shown in the Links section.
+     * Dynamic links (privacy policy / ToS) from `describeServer` are
+     * appended automatically.
+     */
+    staticLinks?: LinkItem[];
+    blueskyHandle?: string;
+    blueskyClientUrl?: string;
+    showNixpkg?: boolean;
+    showAtproto?: boolean;
+}
+declare const PDSPage: import("svelte").Component<Props, {}, "">;
+type PDSPage = ReturnType<typeof PDSPage>;
+export default PDSPage;

package/dist/components/PromptLine.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	interface Props {
+		/** Username portion (before the @). */
+		user: string;
+		/** Hostname (after the @). */
+		host: string;
+		/** Shell path shown after the colon. Defaults to `~`. */
+		path?: string;
+	}
+
+	let { user, host, path = '~' }: Props = $props();
+</script>
+
+<div class="pds-prompt-line">
+	<span class="pds-user-marker">{user}@{host}</span><span class="pds-prompt-path">:{path}</span
+	><span class="pds-prompt-char" aria-hidden="true"> $</span>
+</div>
+
+<style>
+	.pds-prompt-line {
+		display: flex;
+		align-items: baseline;
+		margin-bottom: 0.3rem;
+	}
+
+	.pds-user-marker {
+		color: var(--pds-color-green);
+		font-weight: 700;
+		word-break: break-all;
+		font-size: clamp(0.95em, 4vw, 1.15em);
+		letter-spacing: -0.01em;
+	}
+
+	.pds-prompt-path {
+		color: var(--pds-color-subtext-0);
+		font-weight: 700;
+		font-size: clamp(0.95em, 4vw, 1.15em);
+		opacity: 0.6;
+		user-select: none;
+	}
+
+	.pds-prompt-char {
+		color: var(--pds-color-subtext-0);
+		font-weight: 700;
+		font-size: clamp(0.95em, 4vw, 1.15em);
+		user-select: none;
+	}
+</style>

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

@@ -0,0 +1,11 @@
+interface Props {
+    /** Username portion (before the @). */
+    user: string;
+    /** Hostname (after the @). */
+    host: string;
+    /** Shell path shown after the colon. Defaults to `~`. */
+    path?: string;
+}
+declare const PromptLine: import("svelte").Component<Props, {}, "">;
+type PromptLine = ReturnType<typeof PromptLine>;
+export default PromptLine;

package/dist/components/SectionLabel.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		label?: string;
+		children?: Snippet;
+	}
+
+	let { label, children }: Props = $props();
+</script>
+
+<div class="pds-section-label">
+	{#if children}{@render children()}{:else}{label ?? ''}{/if}
+</div>
+
+<style>
+	.pds-section-label {
+		font-weight: 700;
+		text-transform: uppercase;
+		font-size: 0.72em;
+		letter-spacing: 0.12em;
+		color: var(--pds-color-green);
+		margin-bottom: 0.7rem;
+	}
+</style>

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    label?: string;
+    children?: Snippet;
+}
+declare const SectionLabel: import("svelte").Component<Props, {}, "">;
+type SectionLabel = ReturnType<typeof SectionLabel>;
+export default SectionLabel;

package/dist/components/StatusGrid.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import KVGrid from './KVGrid.svelte';
+	import type { KVItem } from './KVGrid.svelte';
+	import { fetchPDSStatus, type PDSHealth, type PDSDescription } from '../utils/fetchPDSStatus.js';
+
+	interface Props {
+		/**
+		 * Base URL to prepend to `/xrpc/…` calls.
+		 * Defaults to `''` (same origin — correct for in-browser use).
+		 */
+		baseUrl?: string;
+	}
+
+	let { baseUrl = '' }: Props = $props();
+
+	const LOADING_ITEMS: KVItem[] = [
+		{ key: 'reachable', value: '…', status: 'loading' },
+		{ key: 'version', value: '…', status: 'loading' },
+		{ key: 'did', value: '…', status: 'loading' },
+		{ key: 'accounts', value: '…', status: 'loading' },
+		{ key: 'invite required', value: '…', status: 'loading' }
+	];
+
+	let items: KVItem[] = $state([...LOADING_ITEMS]);
+
+	function buildItems(
+		health: PDSHealth,
+		description: PDSDescription,
+		accountCount: number
+	): KVItem[] {
+		const result: KVItem[] = [
+			{
+				key: 'reachable',
+				value: health.reachable ? '✓ online' : '✗ unreachable',
+				status: health.reachable ? 'ok' : 'err'
+			},
+			{
+				key: 'version',
+				value: health.version ?? (health.reachable ? 'unknown' : '—'),
+				status: health.reachable ? undefined : 'err'
+			},
+			{
+				key: 'did',
+				value: description.did ?? '—'
+			},
+			{
+				key: 'accounts',
+				value: accountCount >= 0 ? accountCount.toString() : '—'
+			},
+			{
+				key: 'invite required',
+				value:
+					description.inviteCodeRequired === null
+						? '—'
+						: description.inviteCodeRequired
+							? 'yes'
+							: 'no',
+				status:
+					description.inviteCodeRequired === null
+						? undefined
+						: description.inviteCodeRequired
+							? 'warn'
+							: 'ok'
+			}
+		];
+
+		if (description.phoneVerificationRequired !== null) {
+			result.push({
+				key: 'phone verify',
+				value: description.phoneVerificationRequired ? 'yes' : 'no',
+				status: description.phoneVerificationRequired ? 'warn' : 'ok'
+			});
+		}
+
+		if (description.availableUserDomains.length > 0) {
+			result.push({
+				key: 'user domains',
+				value: description.availableUserDomains.join(', ')
+			});
+		}
+
+		return result;
+	}
+
+	onMount(async () => {
+		const { health, description, accountCount } = await fetchPDSStatus(baseUrl);
+		items = buildItems(health, description, accountCount);
+	});
+</script>
+
+<KVGrid {items} />

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

@@ -0,0 +1,10 @@
+interface Props {
+    /**
+     * Base URL to prepend to `/xrpc/…` calls.
+     * Defaults to `''` (same origin — correct for in-browser use).
+     */
+    baseUrl?: string;
+}
+declare const StatusGrid: import("svelte").Component<Props, {}, "">;
+type StatusGrid = ReturnType<typeof StatusGrid>;
+export default StatusGrid;

package/dist/components/Tagline.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		text?: string;
+		children?: Snippet;
+	}
+
+	let { text, children }: Props = $props();
+</script>
+
+<p class="pds-tagline">
+	{#if children}{@render children()}{:else}{text ?? ''}{/if}
+</p>
+
+<style>
+	.pds-tagline {
+		color: var(--pds-color-overlay-0);
+		font-size: 0.82em;
+		margin-top: 0.2rem;
+		margin-bottom: 1.4rem;
+		line-height: 1.5;
+	}
+</style>

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    text?: string;
+    children?: Snippet;
+}
+declare const Tagline: import("svelte").Component<Props, {}, "">;
+type Tagline = ReturnType<typeof Tagline>;
+export default Tagline;

package/dist/components/TerminalCard.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		/** Text shown in the titlebar after the traffic-light dots. */
+		title?: string;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { title = 'terminal', class: cls = '', children }: Props = $props();
+</script>
+
+<div class="pds-card {cls}">
+	<div class="pds-card-titlebar">
+		<span class="pds-dot" aria-hidden="true"></span>
+		<span class="pds-dot" aria-hidden="true"></span>
+		<span class="pds-dot" aria-hidden="true"></span>
+		<span class="pds-card-title">{title}</span>
+	</div>
+	<div class="pds-card-body">
+		{#if children}{@render children()}{/if}
+	</div>
+</div>
+
+<style>
+	.pds-card {
+		width: 100%;
+		max-width: 680px;
+		overflow: hidden;
+		border-radius: 0.5rem;
+		background-color: var(--pds-color-mantle);
+		border: 1px solid var(--pds-color-surface-1);
+		box-shadow:
+			0 0 0 1px color-mix(in srgb, var(--pds-color-green) 6%, transparent),
+			0 8px 32px color-mix(in srgb, var(--pds-color-shadow) 50%, transparent);
+	}
+
+	.pds-card-titlebar {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.55rem 1rem;
+		background-color: var(--pds-color-surface-0);
+		color: var(--pds-color-green);
+		border-bottom: 1px solid color-mix(in srgb, var(--pds-color-green) 15%, transparent);
+		font-size: 0.75rem;
+		min-width: 0;
+	}
+
+	.pds-card-title {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		min-width: 0;
+		margin-left: 0.4rem;
+	}
+
+	.pds-dot {
+		width: 10px;
+		height: 10px;
+		border-radius: 50%;
+		flex-shrink: 0;
+		background-color: color-mix(in srgb, var(--pds-color-green) 25%, transparent);
+		border: 1px solid color-mix(in srgb, var(--pds-color-green) 40%, transparent);
+	}
+
+	.pds-card-body {
+		padding: 1.4rem 1.6rem;
+	}
+
+	@media (max-width: 440px) {
+		.pds-card-body {
+			padding: 1.1rem;
+		}
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Text shown in the titlebar after the traffic-light dots. */
+    title?: string;
+    class?: string;
+    children?: Snippet;
+}
+declare const TerminalCard: import("svelte").Component<Props, {}, "">;
+type TerminalCard = ReturnType<typeof TerminalCard>;
+export default TerminalCard;

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+export { fetchPDSStatus } from './utils/fetchPDSStatus.js';
+export type { PDSHealth, PDSDescription, PDSStatusResult } from './utils/fetchPDSStatus.js';
+export { default as TerminalCard } from './components/TerminalCard.svelte';
+export { default as PromptLine } from './components/PromptLine.svelte';
+export { default as Tagline } from './components/Tagline.svelte';
+export { default as SectionLabel } from './components/SectionLabel.svelte';
+export { default as Divider } from './components/Divider.svelte';
+export { default as KVGrid } from './components/KVGrid.svelte';
+export type { KVItem } from './components/KVGrid.svelte';
+export { default as LinkList } from './components/LinkList.svelte';
+export type { LinkItem } from './components/LinkList.svelte';
+export { default as StatusGrid } from './components/StatusGrid.svelte';
+export { default as ContactSection } from './components/ContactSection.svelte';
+export { default as PDSFooter } from './components/PDSFooter.svelte';
+export { default as PDSPage } from './components/PDSPage.svelte';

package/dist/index.js

@@ -0,0 +1,17 @@
+// ─── Utilities ────────────────────────────────────────────────────────────────
+export { fetchPDSStatus } from './utils/fetchPDSStatus.js';
+// ─── Primitive components ─────────────────────────────────────────────────────
+export { default as TerminalCard } from './components/TerminalCard.svelte';
+export { default as PromptLine } from './components/PromptLine.svelte';
+export { default as Tagline } from './components/Tagline.svelte';
+export { default as SectionLabel } from './components/SectionLabel.svelte';
+export { default as Divider } from './components/Divider.svelte';
+export { default as KVGrid } from './components/KVGrid.svelte';
+export { default as LinkList } from './components/LinkList.svelte';
+// ─── Smart / data-fetching components ────────────────────────────────────────
+export { default as StatusGrid } from './components/StatusGrid.svelte';
+// ─── Compound / section components ───────────────────────────────────────────
+export { default as ContactSection } from './components/ContactSection.svelte';
+export { default as PDSFooter } from './components/PDSFooter.svelte';
+// ─── Full-page convenience component ─────────────────────────────────────────
+export { default as PDSPage } from './components/PDSPage.svelte';

package/dist/utils/fetchPDSStatus.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Types and utilities for fetching live status from an ATProto PDS.
+ */
+export interface PDSHealth {
+    reachable: boolean;
+    /** Reported software version, or null if unreachable / not exposed. */
+    version: string | null;
+}
+export interface PDSDescription {
+    did: string | null;
+    inviteCodeRequired: boolean | null;
+    phoneVerificationRequired: boolean | null;
+    availableUserDomains: string[];
+    links: {
+        privacyPolicy?: string;
+        termsOfService?: string;
+    } | null;
+    contact: {
+        email?: string;
+    } | null;
+}
+export interface PDSStatusResult {
+    health: PDSHealth;
+    description: PDSDescription;
+    /** Total repo count, or -1 if the fetch failed. */
+    accountCount: number;
+}
+/**
+ * Fetch live status from a PDS.
+ *
+ * @param baseUrl - Origin to prepend to `/xrpc/…` paths.
+ *                  Defaults to `''` (same origin, works in-browser).
+ */
+export declare function fetchPDSStatus(baseUrl?: string): Promise<PDSStatusResult>;

package/dist/utils/fetchPDSStatus.js

@@ -0,0 +1,65 @@
+/**
+ * Types and utilities for fetching live status from an ATProto PDS.
+ */
+async function fetchJSON(url) {
+    const r = await fetch(url);
+    if (!r.ok)
+        throw new Error(`HTTP ${r.status}`);
+    return r.json();
+}
+/**
+ * Fetch live status from a PDS.
+ *
+ * @param baseUrl - Origin to prepend to `/xrpc/…` paths.
+ *                  Defaults to `''` (same origin, works in-browser).
+ */
+export async function fetchPDSStatus(baseUrl = '') {
+    // ── health ────────────────────────────────────────────────────────────────
+    let health = { reachable: false, version: null };
+    try {
+        const h = (await fetchJSON(`${baseUrl}/xrpc/_health`));
+        health = { reachable: true, version: h.version ?? null };
+    }
+    catch {
+        // leave defaults
+    }
+    // ── description ───────────────────────────────────────────────────────────
+    let description = {
+        did: null,
+        inviteCodeRequired: null,
+        phoneVerificationRequired: null,
+        availableUserDomains: [],
+        links: null,
+        contact: null
+    };
+    try {
+        const d = (await fetchJSON(`${baseUrl}/xrpc/com.atproto.server.describeServer`));
+        description = {
+            did: d.did ?? null,
+            inviteCodeRequired: d.inviteCodeRequired ?? null,
+            phoneVerificationRequired: d.phoneVerificationRequired ?? null,
+            availableUserDomains: d.availableUserDomains ?? [],
+            links: d.links ?? null,
+            contact: d.contact ?? null
+        };
+    }
+    catch {
+        // leave defaults
+    }
+    // ── account count (paginated) ─────────────────────────────────────────────
+    let accountCount = 0;
+    try {
+        let cursor;
+        do {
+            const url = `${baseUrl}/xrpc/com.atproto.sync.listRepos?limit=1000` +
+                (cursor ? `&cursor=${encodeURIComponent(cursor)}` : '');
+            const r = (await fetchJSON(url));
+            accountCount += (r.repos ?? []).length;
+            cursor = r.cursor;
+        } while (cursor);
+    }
+    catch {
+        accountCount = -1;
+    }
+    return { health, description, accountCount };
+}

package/package.json

@@ -1,45 +1,69 @@
 {
 	"name": "@ewanc26/pds-landing",
-	"version": "0.1.2",
-	"description": "SvelteKit landing page for Ewan's personal ATProto PDS at pds.ewancroft.uk",
-	"author": "Ewan Croft",
-	"license": "AGPL-3.0-only",
-	"private": false,
-	"publishConfig": {
-		"access": "public"
-	},
-	"files": [
-		"build",
-		"README.md"
-	],
-	"type": "module",
+	"version": "2.0.0",
+	"description": "Composable Svelte components for an ATProto PDS landing page — terminal-aesthetic UI with live status fetching.",
 	"scripts": {
 		"dev": "vite dev",
-		"build": "vite build",
+		"build": "vite build && npm run prepack",
 		"preview": "vite preview",
 		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --check .",
-		"format": "prettier --write .",
-		"prepublishOnly": "pnpm build"
+		"format": "prettier --write ."
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js",
+			"default": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"@sveltejs/kit": ">=2.0.0",
+		"svelte": "^5.0.0",
+		"tailwindcss": ">=4.0.0"
 	},
 	"dependencies": {
 		"@ewanc26/ui": "workspace:*"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/adapter-static": "^3.0.10",
 		"@sveltejs/kit": "^2.50.2",
+		"@sveltejs/package": "^2.5.7",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
 		"@tailwindcss/typography": "^0.5.19",
 		"@tailwindcss/vite": "^4.1.18",
 		"prettier": "^3.8.1",
 		"prettier-plugin-svelte": "^3.4.1",
 		"prettier-plugin-tailwindcss": "^0.7.2",
+		"publint": "^0.3.17",
 		"svelte": "^5.51.0",
 		"svelte-check": "^4.4.2",
 		"tailwindcss": "^4.1.18",
 		"typescript": "^5.9.3",
 		"vite": "^7.3.1"
+	},
+	"keywords": [
+		"svelte",
+		"atproto",
+		"bluesky",
+		"pds",
+		"landing-page"
+	],
+	"publishConfig": {
+		"access": "public"
 	}
 }