@vit-foundation/ui 0.1.0 → 0.2.1

package/dist/components/account/AccountPanel.svelte

@@ -0,0 +1,224 @@
+<script module lang="ts">
+	import type { FormResultOf, RemoteField, RemoteFormInstance } from '../../forms/types.js';
+
+	/** The preflighted display-name form. */
+	export type UpdateNameFormInstance = RemoteFormInstance<{ displayName: RemoteField }>;
+
+	/**
+	 * The newsletter toggle; a success names which way it toggled. The reason
+	 * is typed open — the host's result union may carry other successes.
+	 */
+	export type NewsletterToggleFormInstance = RemoteFormInstance<
+		{ action: RemoteField; locale: RemoteField },
+		FormResultOf<{ reason: string }>
+	>;
+
+	export type DeleteAccountFormInstance = RemoteFormInstance<{
+		confirm: RemoteField;
+		locale: RemoteField;
+	}>;
+
+	export type LogoutFormInstance = RemoteFormInstance<{ locale: RemoteField }>;
+</script>
+
+<script lang="ts">
+	import { getUiConfig } from '../../config/context.js';
+	import { DISPLAY_NAME } from '../../forms/constraints.js';
+	import Button from '../ui/Button.svelte';
+	import Field from '../ui/Field.svelte';
+	import FormErrorFeedback from '../ui/FormErrorFeedback.svelte';
+	import FormResultSlot from '../ui/FormResultSlot.svelte';
+	import Link from '../ui/Link.svelte';
+	import LocaleField from '../ui/LocaleField.svelte';
+
+	interface Props {
+		displayName: string;
+		email: string | null;
+		isSubscribed: boolean;
+		/** False when the server lacks the admin key for account deletion. */
+		canDelete: boolean;
+		/** The remote forms, passed by the host page (updateName preflighted). */
+		updateNameForm: UpdateNameFormInstance;
+		newsletterToggleForm: NewsletterToggleFormInstance;
+		deleteAccountForm: DeleteAccountFormInstance;
+		logoutForm: LogoutFormInstance;
+	}
+
+	let {
+		displayName,
+		email,
+		isSubscribed,
+		canDelete,
+		updateNameForm,
+		newsletterToggleForm,
+		deleteAccountForm,
+		logoutForm
+	}: Props = $props();
+
+	const config = getUiConfig();
+	const msg = $derived(config.messages);
+
+	const name = $derived(updateNameForm);
+	const newsletter = $derived(newsletterToggleForm);
+	const del = $derived(deleteAccountForm);
+
+	const newsletterSuccess = $derived(
+		newsletter.result?.ok && newsletter.result.reason === 'subscribed'
+			? msg.account_newsletterSuccessOn()
+			: msg.account_newsletterSuccessOff()
+	);
+</script>
+
+<div class="panel">
+	<section aria-labelledby="account-name-heading">
+		<h2 class="subsection-heading" id="account-name-heading">{msg.account_nameHeading()}</h2>
+		<form class="form-stack" {...name}>
+			<Field
+				id="account-name"
+				label={msg.account_nameLabel()}
+				field={name.fields.displayName}
+				constraint={DISPLAY_NAME}
+			>
+				{#snippet children(attrs)}
+					<input
+						class="control"
+						required
+						autocomplete="nickname"
+						{...attrs}
+						{...name.fields.displayName.as('text', displayName)}
+					/>
+				{/snippet}
+			</Field>
+			<div class="actions">
+				<Button type="submit" pending={name.pending}>{msg.account_nameSubmit()}</Button>
+			</div>
+			<FormResultSlot result={name.result} successMessage={msg.account_nameSuccess()} />
+		</form>
+	</section>
+
+	{#if email}
+		<section aria-labelledby="account-newsletter-heading">
+			<h2 class="subsection-heading" id="account-newsletter-heading">
+				{msg.account_newsletterHeading()}
+			</h2>
+			<p class="status">
+				{isSubscribed
+					? msg.account_newsletterStatusOn({ email })
+					: msg.account_newsletterStatusOff()}
+			</p>
+			<form class="form-stack" {...newsletter}>
+				<input
+					{...newsletter.fields.action.as('hidden', isSubscribed ? 'unsubscribe' : 'subscribe')}
+				/>
+				<LocaleField field={newsletter.fields.locale} />
+				<div class="actions">
+					<Button type="submit" pending={newsletter.pending}>
+						{isSubscribed ? msg.account_newsletterUnsubscribe() : msg.account_newsletterSubscribe()}
+					</Button>
+				</div>
+				<FormResultSlot result={newsletter.result} successMessage={newsletterSuccess} />
+			</form>
+		</section>
+	{/if}
+
+	<section aria-labelledby="account-data-heading">
+		<h2 class="subsection-heading" id="account-data-heading">{msg.account_dataHeading()}</h2>
+		<p class="status">{msg.account_dataDescription()}</p>
+		<p>
+			<Link class="download" href="/account/data" download>{msg.account_dataDownload()}</Link>
+		</p>
+	</section>
+
+	<section aria-labelledby="account-logout-heading">
+		<h2 class="subsection-heading" id="account-logout-heading">{msg.account_logout()}</h2>
+		<form class="form-stack" {...logoutForm}>
+			<LocaleField field={logoutForm.fields.locale} />
+			<div class="actions">
+				<Button type="submit" pending={logoutForm.pending}>{msg.account_logout()}</Button>
+			</div>
+			<!-- Success redirects, so only a failure ever renders here — and a
+			logout that failed leaves the reader signed in with nothing said. -->
+			<FormErrorFeedback result={logoutForm.result} />
+		</form>
+	</section>
+
+	<section class="danger" aria-labelledby="account-delete-heading">
+		<h2 class="subsection-heading" id="account-delete-heading">{msg.account_deleteHeading()}</h2>
+		<p class="status">{msg.account_deleteWarning()}</p>
+		{#if canDelete}
+			<form class="form-stack" {...del}>
+				<label class="confirm">
+					<input required {...del.fields.confirm.as('checkbox')} />
+					{msg.account_deleteConfirmLabel()}
+				</label>
+				<LocaleField field={del.fields.locale} />
+				<div class="actions">
+					<Button type="submit" pending={del.pending}>{msg.account_deleteSubmit()}</Button>
+				</div>
+				<FormErrorFeedback
+					result={del.result}
+					messages={{ unavailable: msg.account_error_unavailable() }}
+				/>
+			</form>
+		{:else}
+			<p class="status">{msg.account_error_unavailable()}</p>
+		{/if}
+	</section>
+</div>
+
+<style>
+	.panel {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-5);
+		max-width: 32rem;
+	}
+
+	section {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-2);
+	}
+
+	/* Size is the declared one; only the rhythm is this panel's. */
+	.subsection-heading {
+		margin: 0;
+	}
+
+	input {
+		padding: var(--space-2);
+	}
+
+	.status {
+		color: var(--color-ink-secondary);
+		margin: 0;
+	}
+
+	/* Link renders the anchor, so the scope class cannot land on it — the same
+	   :global reach ProjectCard and the home page's CTAs use. */
+	section :global(a.download) {
+		color: var(--color-brand);
+	}
+
+	.confirm {
+		display: flex;
+		align-items: baseline;
+		gap: var(--space-2);
+		font-weight: 400;
+		font-size: var(--text-base);
+	}
+
+	.confirm input {
+		padding: 0;
+	}
+
+	.danger {
+		border: 1px solid var(--series-8);
+		border-radius: var(--radius);
+		padding: var(--space-3);
+	}
+
+	.danger h2 {
+		color: var(--series-8);
+	}
+</style>

package/dist/components/account/AccountPanel.svelte.d.ts

@@ -0,0 +1,37 @@
+import type { FormResultOf, RemoteField, RemoteFormInstance } from '../../forms/types.js';
+/** The preflighted display-name form. */
+export type UpdateNameFormInstance = RemoteFormInstance<{
+    displayName: RemoteField;
+}>;
+/**
+ * The newsletter toggle; a success names which way it toggled. The reason
+ * is typed open — the host's result union may carry other successes.
+ */
+export type NewsletterToggleFormInstance = RemoteFormInstance<{
+    action: RemoteField;
+    locale: RemoteField;
+}, FormResultOf<{
+    reason: string;
+}>>;
+export type DeleteAccountFormInstance = RemoteFormInstance<{
+    confirm: RemoteField;
+    locale: RemoteField;
+}>;
+export type LogoutFormInstance = RemoteFormInstance<{
+    locale: RemoteField;
+}>;
+interface Props {
+    displayName: string;
+    email: string | null;
+    isSubscribed: boolean;
+    /** False when the server lacks the admin key for account deletion. */
+    canDelete: boolean;
+    /** The remote forms, passed by the host page (updateName preflighted). */
+    updateNameForm: UpdateNameFormInstance;
+    newsletterToggleForm: NewsletterToggleFormInstance;
+    deleteAccountForm: DeleteAccountFormInstance;
+    logoutForm: LogoutFormInstance;
+}
+declare const AccountPanel: import("svelte").Component<Props, {}, "">;
+type AccountPanel = ReturnType<typeof AccountPanel>;
+export default AccountPanel;

package/dist/components/account/NewsletterSignup.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import { getUiConfig } from '../../config/context.js';
+	import { withNewsletterIntent } from '../../forms/transport.js';
+	import type { NewsletterToggleFormInstance } from './AccountPanel.svelte';
+	import Button from '../ui/Button.svelte';
+	import FormResultSlot from '../ui/FormResultSlot.svelte';
+	import Link from '../ui/Link.svelte';
+	import LocaleField from '../ui/LocaleField.svelte';
+
+	interface Props {
+		/** From the root layout: null when logged out. */
+		account?: { displayName: string; newsletterSubscribed: boolean } | null;
+		/** The remote form the host layout passes in. */
+		newsletterToggleForm: NewsletterToggleFormInstance;
+	}
+
+	let { account = null, newsletterToggleForm }: Props = $props();
+
+	const config = getUiConfig();
+	const msg = $derived(config.messages);
+
+	// The newsletter is registered-users-only (the account email is already
+	// verified — no app mail needed). Logged out, the band routes to the auth
+	// pages carrying the intent as ?newsletter=1 (never an email in a URL).
+	const f = $derived(newsletterToggleForm);
+</script>
+
+<section class="newsletter" aria-labelledby="newsletter-title">
+	<div class="inner band">
+		<h2 id="newsletter-title">{msg.newsletter_title()}</h2>
+		<p>{msg.newsletter_intro()}</p>
+
+		{#if account === null}
+			<p class="prompt">
+				{msg.newsletter_promptLoggedOut()}
+				<Link href={withNewsletterIntent('/signup')}>{msg.comments_signupLink()}</Link>
+				·
+				<Link href={withNewsletterIntent('/login')}>{msg.comments_loginLink()}</Link>
+			</p>
+		{:else if account.newsletterSubscribed}
+			<p class="prompt">
+				{msg.newsletter_subscribedNote()}
+				<Link href="/account">{msg.account_navLabel()}</Link>
+			</p>
+		{:else}
+			<form {...f}>
+				<input {...f.fields.action.as('hidden', 'subscribe')} />
+				<LocaleField field={f.fields.locale} />
+				<Button type="submit" pending={f.pending}>
+					{msg.account_newsletterSubscribe()}
+				</Button>
+			</form>
+			{#if f.result}
+				<div class="feedback-slot">
+					<FormResultSlot result={f.result} successMessage={msg.account_newsletterSuccessOn()} />
+				</div>
+			{/if}
+		{/if}
+	</div>
+</section>
+
+<style>
+	.newsletter {
+		background: var(--color-band-grey);
+	}
+
+	.inner {
+		text-align: center;
+	}
+
+	h2 {
+		text-transform: uppercase;
+		letter-spacing: 0.15em;
+		font-size: var(--text-lg);
+	}
+
+	.prompt {
+		color: var(--color-ink-secondary);
+	}
+
+	form {
+		display: flex;
+		justify-content: center;
+		gap: var(--space-2);
+		flex-wrap: wrap;
+	}
+
+	.feedback-slot {
+		margin-top: var(--space-3);
+	}
+</style>

package/dist/components/account/NewsletterSignup.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { NewsletterToggleFormInstance } from './AccountPanel.svelte';
+interface Props {
+    /** From the root layout: null when logged out. */
+    account?: {
+        displayName: string;
+        newsletterSubscribed: boolean;
+    } | null;
+    /** The remote form the host layout passes in. */
+    newsletterToggleForm: NewsletterToggleFormInstance;
+}
+declare const NewsletterSignup: import("svelte").Component<Props, {}, "">;
+type NewsletterSignup = ReturnType<typeof NewsletterSignup>;
+export default NewsletterSignup;

package/dist/components/account/index.d.ts

@@ -0,0 +1,3 @@
+export { default as AccountPanel } from './AccountPanel.svelte';
+export type { DeleteAccountFormInstance, LogoutFormInstance, NewsletterToggleFormInstance, UpdateNameFormInstance } from './AccountPanel.svelte';
+export { default as NewsletterSignup } from './NewsletterSignup.svelte';

package/dist/components/account/index.js

@@ -0,0 +1,2 @@
+export { default as AccountPanel } from './AccountPanel.svelte';
+export { default as NewsletterSignup } from './NewsletterSignup.svelte';

package/dist/components/auth/AuthPageShell.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { getUiConfig } from '../../config/context.js';
+	import { hasNewsletterIntent, withNewsletterIntent } from '../../forms/transport.js';
+	import PageShell from '../layout/PageShell.svelte';
+	import Link from '../ui/Link.svelte';
+
+	/**
+	 * The /login and /signup chrome: heading, intro, the tab pair that
+	 * preserves the newsletter intent, and the legal note. Those two pages
+	 * differ in which forms they compose and in how consent is mirrored into
+	 * the Google flow — not in any of this.
+	 *
+	 * The legal note is here rather than per page because it is the no-JS
+	 * fallback for the consent copy, and it must appear on both.
+	 */
+	interface Props {
+		/** Browser title. */
+		title: string;
+		heading: string;
+		intro: string;
+		/**
+		 * The URL the tab pair reads. Defaulted to the config's router URL;
+		 * only tests and stories pass one. The current tab is derived from its
+		 * canonical pathname, so locale prefixes don't break highlighting.
+		 */
+		url?: URL;
+		/** The email form and the Google button. */
+		children: Snippet;
+	}
+
+	let { title, heading, intro, url = undefined, children }: Props = $props();
+
+	const config = getUiConfig();
+	const msg = $derived(config.messages);
+
+	const currentUrl = $derived(url ?? config.url() ?? new URL('http://localhost/'));
+	const currentPath = $derived(config.canonicalPathname(currentUrl));
+
+	// Real links, not client-side tabs: mode switching works without JS and each
+	// mode keeps its own URL. The newsletter intent survives the switch.
+	const tabPath = (path: string): string =>
+		hasNewsletterIntent(currentUrl) ? withNewsletterIntent(path) : path;
+
+	const tabs = $derived([
+		{ href: tabPath('/login'), label: msg.login_title(), current: currentPath === '/login' },
+		{ href: tabPath('/signup'), label: msg.signup_title(), current: currentPath === '/signup' }
+	]);
+</script>
+
+<PageShell {title} variant="form">
+	<h1>{heading}</h1>
+	<p class="intro">{intro}</p>
+	<nav class="tabs" aria-label={msg.auth_tabsLabel()}>
+		{#each tabs as tab (tab.href)}
+			<Link href={tab.href} aria-current={tab.current ? 'page' : undefined}>{tab.label}</Link>
+		{/each}
+	</nav>
+	{@render children()}
+	<p class="legal-note">
+		{msg.auth_legalNotePre()}
+		<Link href="/legal">{msg.signup_termsLink()}</Link>
+	</p>
+</PageShell>
+
+<style>
+	h1 {
+		margin: 0;
+	}
+
+	.tabs {
+		display: flex;
+		gap: var(--space-3);
+		border-bottom: 1px solid var(--color-hairline);
+		margin-bottom: var(--space-4);
+		max-width: 24rem;
+	}
+
+	.tabs :global(a) {
+		text-decoration: none;
+		color: var(--color-ink-secondary);
+		padding: var(--space-2) 0;
+		border-bottom: 2px solid transparent;
+		font-weight: 600;
+	}
+
+	.tabs :global(a:hover) {
+		color: var(--color-ink);
+	}
+
+	.tabs :global(a[aria-current='page']) {
+		color: var(--color-ink);
+		border-bottom-color: var(--color-brand);
+	}
+
+	.intro {
+		color: var(--color-ink-secondary);
+		margin: 0;
+		max-width: 40rem;
+	}
+
+	.legal-note {
+		color: var(--color-ink-muted);
+		font-size: var(--text-sm);
+		margin: 0;
+		max-width: 24rem;
+	}
+</style>

package/dist/components/auth/AuthPageShell.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+/**
+ * The /login and /signup chrome: heading, intro, the tab pair that
+ * preserves the newsletter intent, and the legal note. Those two pages
+ * differ in which forms they compose and in how consent is mirrored into
+ * the Google flow — not in any of this.
+ *
+ * The legal note is here rather than per page because it is the no-JS
+ * fallback for the consent copy, and it must appear on both.
+ */
+interface Props {
+    /** Browser title. */
+    title: string;
+    heading: string;
+    intro: string;
+    /**
+     * The URL the tab pair reads. Defaulted to the config's router URL;
+     * only tests and stories pass one. The current tab is derived from its
+     * canonical pathname, so locale prefixes don't break highlighting.
+     */
+    url?: URL;
+    /** The email form and the Google button. */
+    children: Snippet;
+}
+declare const AuthPageShell: import("svelte").Component<Props, {}, "">;
+type AuthPageShell = ReturnType<typeof AuthPageShell>;
+export default AuthPageShell;

package/dist/components/auth/GoogleAuthForm.svelte

@@ -0,0 +1,72 @@
+<script module lang="ts">
+	import type { RemoteField, RemoteFormInstance } from '../../forms/types.js';
+
+	/** The Google-login remote form (no preflight: it has no typed fields to check). */
+	export type GoogleLoginFormInstance = RemoteFormInstance<{
+		newsletter: RemoteField;
+		locale: RemoteField;
+	}>;
+</script>
+
+<script lang="ts">
+	import { getUiConfig } from '../../config/context.js';
+	import Button from '../ui/Button.svelte';
+	import FormErrorFeedback from '../ui/FormErrorFeedback.svelte';
+	import LocaleField from '../ui/LocaleField.svelte';
+	import NewsletterIntentField from '../ui/NewsletterIntentField.svelte';
+
+	interface Props {
+		/**
+		 * Newsletter intent to carry: the band's ?newsletter=1 on /login, or
+		 * the live state of the signup page's single consent block.
+		 */
+		newsletterIntent?: boolean;
+		/**
+		 * Refuse the submission until consent is given (signup page, mirroring
+		 * the shared terms checkbox). Whether consent is owed *yet* is the
+		 * signup consent gate's question, not this module's — it reports false
+		 * before hydration so the no-JS fallback stays usable. /login has no
+		 * consent block and passes nothing.
+		 */
+		requireConsent?: boolean;
+		/** The remote form the host page passes in. */
+		googleLoginForm: GoogleLoginFormInstance;
+	}
+
+	let { newsletterIntent = false, requireConsent = false, googleLoginForm }: Props = $props();
+
+	const config = getUiConfig();
+	const msg = $derived(config.messages);
+
+	// One button for both journeys: with public signups open, a first-time
+	// Google sign-in creates the account, a returning one just logs in.
+	const google = $derived(googleLoginForm);
+</script>
+
+<div class="google">
+	<p class="divider" role="separator">{msg.login_divider()}</p>
+
+	<form class="form-stack" {...google}>
+		{#if newsletterIntent}
+			<!-- Mirrors the single consent block (signup) or the band's intent
+			     (login); the field module owns the encoding. -->
+			<NewsletterIntentField field={google.fields.newsletter} />
+		{/if}
+		<LocaleField field={google.fields.locale} />
+		<div class="actions">
+			<Button type="submit" pending={google.pending} disabled={requireConsent}>
+				{msg.login_googleSubmit()}
+			</Button>
+		</div>
+		<FormErrorFeedback result={google.result} />
+	</form>
+</div>
+
+<style>
+	.google {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-3);
+		max-width: 24rem;
+	}
+</style>

package/dist/components/auth/GoogleAuthForm.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { RemoteField, RemoteFormInstance } from '../../forms/types.js';
+/** The Google-login remote form (no preflight: it has no typed fields to check). */
+export type GoogleLoginFormInstance = RemoteFormInstance<{
+    newsletter: RemoteField;
+    locale: RemoteField;
+}>;
+interface Props {
+    /**
+     * Newsletter intent to carry: the band's ?newsletter=1 on /login, or
+     * the live state of the signup page's single consent block.
+     */
+    newsletterIntent?: boolean;
+    /**
+     * Refuse the submission until consent is given (signup page, mirroring
+     * the shared terms checkbox). Whether consent is owed *yet* is the
+     * signup consent gate's question, not this module's — it reports false
+     * before hydration so the no-JS fallback stays usable. /login has no
+     * consent block and passes nothing.
+     */
+    requireConsent?: boolean;
+    /** The remote form the host page passes in. */
+    googleLoginForm: GoogleLoginFormInstance;
+}
+declare const GoogleAuthForm: import("svelte").Component<Props, {}, "">;
+type GoogleAuthForm = ReturnType<typeof GoogleAuthForm>;
+export default GoogleAuthForm;