@vit-foundation/ui 0.1.0 → 0.2.1

package/dist/components/auth/LoginForm.svelte

@@ -0,0 +1,176 @@
+<script module lang="ts">
+	import type { FormResultOf, RemoteField, RemoteFormInstance } from '../../forms/types.js';
+
+	/** The preflighted password-login form the host page passes in. */
+	export type LoginFormInstance = RemoteFormInstance<
+		{ email: RemoteField; password: RemoteField; newsletter: RemoteField; locale: RemoteField },
+		FormResultOf<object, 'invalidCredentials'>
+	>;
+
+	/** The preflighted magic-link form. */
+	export type MagicLinkFormInstance = RemoteFormInstance<{
+		email: RemoteField;
+		locale: RemoteField;
+		website: RemoteField;
+	}>;
+</script>
+
+<script lang="ts">
+	import { getUiConfig } from '../../config/context.js';
+	import { EMAIL, LOGIN_PASSWORD } from '../../forms/constraints.js';
+	import Button from '../ui/Button.svelte';
+	import Field from '../ui/Field.svelte';
+	import FormErrorFeedback from '../ui/FormErrorFeedback.svelte';
+	import FormFeedback from '../ui/FormFeedback.svelte';
+	import Honeypot from '../ui/Honeypot.svelte';
+	import LocaleField from '../ui/LocaleField.svelte';
+	import NewsletterIntentField from '../ui/NewsletterIntentField.svelte';
+
+	interface Props {
+		/**
+		 * One finished sentence for a bounced auth landing, or null when the
+		 * visitor arrived normally. The host app owns the closed set of landing
+		 * failures and the copy for each; this component only renders the one
+		 * that applies.
+		 */
+		redirectErrorMessage?: string | null;
+		/** True when arriving from the newsletter band (?newsletter=1). */
+		newsletterIntent?: boolean;
+		/**
+		 * The remote forms, already preflighted against the host app's schemas
+		 * — validation belongs to the app's server contract, so the call site
+		 * runs `form.preflight(schema)` and hands the result in. Progressive
+		 * enhancement is unchanged: without JavaScript each form posts natively
+		 * and the page re-renders with the result.
+		 */
+		loginForm: LoginFormInstance;
+		magicLinkForm: MagicLinkFormInstance;
+	}
+
+	let {
+		redirectErrorMessage = null,
+		newsletterIntent = false,
+		loginForm,
+		magicLinkForm
+	}: Props = $props();
+
+	const config = getUiConfig();
+	const msg = $derived(config.messages);
+	const login = $derived(loginForm);
+	const magic = $derived(magicLinkForm);
+</script>
+
+<div class="login">
+	<form class="form-stack" {...login}>
+		<Field
+			id="login-email"
+			label={msg.login_emailLabel()}
+			field={login.fields.email}
+			constraint={EMAIL}
+		>
+			{#snippet children(attrs)}
+				<input
+					class="control"
+					required
+					autocomplete="email"
+					{...attrs}
+					{...login.fields.email.as('email')}
+				/>
+			{/snippet}
+		</Field>
+
+		<Field
+			id="login-password"
+			label={msg.login_passwordLabel()}
+			field={login.fields.password}
+			constraint={LOGIN_PASSWORD}
+		>
+			{#snippet children(attrs)}
+				<input
+					class="control"
+					required
+					autocomplete="current-password"
+					{...attrs}
+					{...login.fields.password.as('password')}
+				/>
+			{/snippet}
+		</Field>
+
+		{#if newsletterIntent}
+			<NewsletterIntentField field={login.fields.newsletter} />
+		{/if}
+		<LocaleField field={login.fields.locale} />
+
+		<div class="actions">
+			<Button type="submit" pending={login.pending}>{msg.login_submit()}</Button>
+		</div>
+
+		{#if login.result && !login.result.ok}
+			<FormErrorFeedback
+				result={login.result}
+				messages={{ invalidCredentials: msg.login_error_invalidCredentials() }}
+			/>
+		{:else if redirectErrorMessage}
+			<!-- One sentence per landing, mapped by the host app off its closed
+			     set of landing failures — a new code fails the build there, not in
+			     an else arm here. Neither sentence reveals whether an address has
+			     an account: both are reachable only with a token in hand and
+			     describe the token's fate, not the address's. -->
+			<FormFeedback kind="error">{redirectErrorMessage}</FormFeedback>
+		{/if}
+	</form>
+
+	<p class="divider" role="separator">{msg.login_divider()}</p>
+
+	{#if magic.result?.ok}
+		<FormFeedback kind="success">{msg.login_magicLinkSuccess()}</FormFeedback>
+	{:else}
+		<form class="form-stack" {...magic}>
+			<Field
+				id="magic-email"
+				label={msg.login_emailLabel()}
+				field={magic.fields.email}
+				constraint={EMAIL}
+			>
+				{#snippet children(attrs)}
+					<input
+						class="control"
+						required
+						autocomplete="email"
+						{...attrs}
+						{...magic.fields.email.as('email')}
+					/>
+				{/snippet}
+			</Field>
+
+			<!-- Localizes the /auth/confirm landing via the roundtrip cookie. -->
+			<LocaleField field={magic.fields.locale} />
+
+			<!-- Honeypot: invisible to humans, tempting to bots. This form mails an
+			     attacker-chosen address unauthenticated, and a tripped trap returns
+			     the same value a real request does — so the success branch above
+			     renders identically either way. The password form above carries no
+			     trap: its success is a redirect, so there is no value to fake. -->
+			<Honeypot form={magic.fields} id="magic-website" />
+
+			<div class="actions">
+				<Button type="submit" pending={magic.pending}>{msg.login_magicLinkSubmit()}</Button>
+			</div>
+
+			<FormErrorFeedback result={magic.result} />
+		</form>
+	{/if}
+</div>
+
+<style>
+	.login {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-3);
+		max-width: 24rem;
+	}
+
+	input {
+		padding: var(--space-2);
+	}
+</style>

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

@@ -0,0 +1,37 @@
+import type { FormResultOf, RemoteField, RemoteFormInstance } from '../../forms/types.js';
+/** The preflighted password-login form the host page passes in. */
+export type LoginFormInstance = RemoteFormInstance<{
+    email: RemoteField;
+    password: RemoteField;
+    newsletter: RemoteField;
+    locale: RemoteField;
+}, FormResultOf<object, 'invalidCredentials'>>;
+/** The preflighted magic-link form. */
+export type MagicLinkFormInstance = RemoteFormInstance<{
+    email: RemoteField;
+    locale: RemoteField;
+    website: RemoteField;
+}>;
+interface Props {
+    /**
+     * One finished sentence for a bounced auth landing, or null when the
+     * visitor arrived normally. The host app owns the closed set of landing
+     * failures and the copy for each; this component only renders the one
+     * that applies.
+     */
+    redirectErrorMessage?: string | null;
+    /** True when arriving from the newsletter band (?newsletter=1). */
+    newsletterIntent?: boolean;
+    /**
+     * The remote forms, already preflighted against the host app's schemas
+     * — validation belongs to the app's server contract, so the call site
+     * runs `form.preflight(schema)` and hands the result in. Progressive
+     * enhancement is unchanged: without JavaScript each form posts natively
+     * and the page re-renders with the result.
+     */
+    loginForm: LoginFormInstance;
+    magicLinkForm: MagicLinkFormInstance;
+}
+declare const LoginForm: import("svelte").Component<Props, {}, "">;
+type LoginForm = ReturnType<typeof LoginForm>;
+export default LoginForm;

package/dist/components/auth/SignupForm.svelte

@@ -0,0 +1,157 @@
+<script module lang="ts">
+	import type { RemoteField, RemoteFormInstance } from '../../forms/types.js';
+
+	/** The preflighted signup form the host page passes in. */
+	export type SignupFormInstance = RemoteFormInstance<{
+		displayName: RemoteField;
+		email: RemoteField;
+		password: RemoteField;
+		terms: RemoteField;
+		newsletter: RemoteField;
+		locale: RemoteField;
+		website: RemoteField;
+	}>;
+</script>
+
+<script lang="ts">
+	import { getUiConfig } from '../../config/context.js';
+	import { DISPLAY_NAME, EMAIL, PASSWORD } from '../../forms/constraints.js';
+	import Button from '../ui/Button.svelte';
+	import Field from '../ui/Field.svelte';
+	import FormErrorFeedback from '../ui/FormErrorFeedback.svelte';
+	import FormFeedback from '../ui/FormFeedback.svelte';
+	import Honeypot from '../ui/Honeypot.svelte';
+	import Link from '../ui/Link.svelte';
+	import LocaleField from '../ui/LocaleField.svelte';
+
+	interface Props {
+		/** True when arriving from the newsletter band (?newsletter=1). */
+		newsletterIntent?: boolean;
+		/**
+		 * Callbacks for the single consent block's live state, so the page can
+		 * mirror it into the Google flow — one set of checkboxes for both
+		 * signup methods (callback props per the foundation's convention).
+		 */
+		onTermsChange?: (accepted: boolean) => void;
+		onNewsletterChange?: (checked: boolean) => void;
+		/** The remote form, preflighted by the host page against its schema. */
+		signupForm: SignupFormInstance;
+	}
+
+	let { newsletterIntent = false, onTermsChange, onNewsletterChange, signupForm }: Props = $props();
+
+	const config = getUiConfig();
+	const msg = $derived(config.messages);
+	const f = $derived(signupForm);
+</script>
+
+{#if f.result?.ok}
+	<FormFeedback kind="success">{msg.signup_success()}</FormFeedback>
+{:else}
+	<form class="form-stack" {...f}>
+		<Field
+			id="signup-name"
+			label={msg.signup_nameLabel()}
+			field={f.fields.displayName}
+			constraint={DISPLAY_NAME}
+		>
+			{#snippet children(attrs)}
+				<input
+					class="control"
+					required
+					autocomplete="nickname"
+					{...attrs}
+					{...f.fields.displayName.as('text')}
+				/>
+			{/snippet}
+		</Field>
+
+		<Field
+			id="signup-email"
+			label={msg.login_emailLabel()}
+			field={f.fields.email}
+			constraint={EMAIL}
+		>
+			{#snippet children(attrs)}
+				<input
+					class="control"
+					required
+					autocomplete="email"
+					{...attrs}
+					{...f.fields.email.as('email')}
+				/>
+			{/snippet}
+		</Field>
+
+		<Field
+			id="signup-password"
+			label={msg.signup_passwordLabel()}
+			field={f.fields.password}
+			constraint={PASSWORD}
+		>
+			{#snippet children(attrs)}
+				<input
+					class="control"
+					required
+					autocomplete="new-password"
+					{...attrs}
+					{...f.fields.password.as('password')}
+				/>
+			{/snippet}
+		</Field>
+
+		<label class="checkbox">
+			<input
+				required
+				onchange={(event) => onTermsChange?.(event.currentTarget.checked)}
+				{...f.fields.terms.as('checkbox')}
+			/>
+			<span>
+				{msg.signup_termsPre()}
+				<Link href="/legal">{msg.signup_termsLink()}</Link>
+			</span>
+		</label>
+
+		<label class="checkbox">
+			<input
+				onchange={(event) => onNewsletterChange?.(event.currentTarget.checked)}
+				{...f.fields.newsletter.as('checkbox', newsletterIntent)}
+			/>
+			<span>{msg.signup_newsletterLabel()}</span>
+		</label>
+
+		<!-- Localizes the /auth/confirm landing via the roundtrip cookie. -->
+		<LocaleField field={f.fields.locale} />
+
+		<!-- Honeypot: invisible to humans, tempting to bots. -->
+		<Honeypot form={f.fields} id="signup-website" />
+
+		<div class="actions">
+			<Button type="submit" pending={f.pending}>{msg.signup_submit()}</Button>
+		</div>
+		<FormErrorFeedback result={f.result} />
+	</form>
+{/if}
+
+<style>
+	form {
+		max-width: 24rem;
+	}
+
+	input {
+		padding: var(--space-2);
+	}
+
+	.checkbox {
+		display: flex;
+		align-items: baseline;
+		gap: var(--space-2);
+		font-weight: 400;
+		font-size: var(--text-sm);
+		color: var(--color-ink-secondary);
+	}
+
+	.checkbox input {
+		padding: 0;
+	}
+</style>

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

@@ -0,0 +1,27 @@
+import type { RemoteField, RemoteFormInstance } from '../../forms/types.js';
+/** The preflighted signup form the host page passes in. */
+export type SignupFormInstance = RemoteFormInstance<{
+    displayName: RemoteField;
+    email: RemoteField;
+    password: RemoteField;
+    terms: RemoteField;
+    newsletter: RemoteField;
+    locale: RemoteField;
+    website: RemoteField;
+}>;
+interface Props {
+    /** True when arriving from the newsletter band (?newsletter=1). */
+    newsletterIntent?: boolean;
+    /**
+     * Callbacks for the single consent block's live state, so the page can
+     * mirror it into the Google flow — one set of checkboxes for both
+     * signup methods (callback props per the foundation's convention).
+     */
+    onTermsChange?: (accepted: boolean) => void;
+    onNewsletterChange?: (checked: boolean) => void;
+    /** The remote form, preflighted by the host page against its schema. */
+    signupForm: SignupFormInstance;
+}
+declare const SignupForm: import("svelte").Component<Props, {}, "">;
+type SignupForm = ReturnType<typeof SignupForm>;
+export default SignupForm;

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

@@ -0,0 +1,7 @@
+export { default as AuthPageShell } from './AuthPageShell.svelte';
+export { default as GoogleAuthForm } from './GoogleAuthForm.svelte';
+export type { GoogleLoginFormInstance } from './GoogleAuthForm.svelte';
+export { default as LoginForm } from './LoginForm.svelte';
+export type { LoginFormInstance, MagicLinkFormInstance } from './LoginForm.svelte';
+export { default as SignupForm } from './SignupForm.svelte';
+export type { SignupFormInstance } from './SignupForm.svelte';

package/dist/components/auth/index.js

@@ -0,0 +1,4 @@
+export { default as AuthPageShell } from './AuthPageShell.svelte';
+export { default as GoogleAuthForm } from './GoogleAuthForm.svelte';
+export { default as LoginForm } from './LoginForm.svelte';
+export { default as SignupForm } from './SignupForm.svelte';

package/dist/components/contact/ContactForm.svelte

@@ -0,0 +1,148 @@
+<script module lang="ts">
+	import type { FormResultOf, RemoteField, RemoteFormInstance } from '../../forms/types.js';
+
+	/** The preflighted contact form the host page passes in. */
+	export type ContactFormInstance = RemoteFormInstance<
+		{
+			category: RemoteField;
+			name: RemoteField;
+			email: RemoteField;
+			message: RemoteField;
+			locale: RemoteField;
+			website: RemoteField;
+		},
+		FormResultOf
+	> & {
+		fields: { allIssues(): Array<{ message: string }> | undefined };
+	};
+</script>
+
+<script lang="ts">
+	import { getUiConfig } from '../../config/context.js';
+	import { CONTACT_MESSAGE, CONTACT_NAME, EMAIL } from '../../forms/constraints.js';
+	import { CONTACT_CATEGORIES } from '../../content/types.js';
+	import { contactCategoryLabel } from '../../utils/contact.js';
+	import Button from '../ui/Button.svelte';
+	import Field from '../ui/Field.svelte';
+	import FormErrorFeedback from '../ui/FormErrorFeedback.svelte';
+	import FormFeedback from '../ui/FormFeedback.svelte';
+	import Honeypot from '../ui/Honeypot.svelte';
+	import LocaleField from '../ui/LocaleField.svelte';
+
+	interface Props {
+		/**
+		 * The remote form, preflighted by the host page against its schema.
+		 * Progressive enhancement is unchanged: without JavaScript the form
+		 * posts natively and the page re-renders with the result.
+		 */
+		form: ContactFormInstance;
+	}
+
+	let { form }: Props = $props();
+
+	const config = getUiConfig();
+	const msg = $derived(config.messages);
+	const f = $derived(form);
+
+	// Derived, not restated: the package owns which categories exist and in
+	// what order (the host schema derives its enum from CONTACT_CATEGORIES),
+	// and the messages own the copy for each.
+	const categories = CONTACT_CATEGORIES;
+</script>
+
+{#if f.result?.ok}
+	<FormFeedback kind="success">{msg.contact_success()}</FormFeedback>
+{:else}
+	<form class="form-stack" {...f}>
+		<Field
+			id="contact-category"
+			label={msg.contact_categoryLabel()}
+			field={f.fields.category}
+			constraint={null}
+		>
+			{#snippet children(attrs)}
+				<select class="control" {...attrs} {...f.fields.category.as('select')}>
+					{#each categories as category (category)}
+						<option value={category}>{contactCategoryLabel(category, msg)}</option>
+					{/each}
+				</select>
+			{/snippet}
+		</Field>
+
+		<Field
+			id="contact-name"
+			label={msg.contact_nameLabel()}
+			field={f.fields.name}
+			constraint={CONTACT_NAME}
+		>
+			{#snippet children(attrs)}
+				<input
+					class="control"
+					required
+					autocomplete="name"
+					{...attrs}
+					{...f.fields.name.as('text')}
+				/>
+			{/snippet}
+		</Field>
+
+		<Field
+			id="contact-email"
+			label={msg.contact_emailLabel()}
+			field={f.fields.email}
+			constraint={EMAIL}
+		>
+			{#snippet children(attrs)}
+				<input
+					class="control"
+					required
+					autocomplete="email"
+					{...attrs}
+					{...f.fields.email.as('email')}
+				/>
+			{/snippet}
+		</Field>
+
+		<Field
+			id="contact-message"
+			label={msg.contact_messageLabel()}
+			field={f.fields.message}
+			constraint={CONTACT_MESSAGE}
+		>
+			{#snippet children(attrs)}
+				<textarea class="control" required rows="6" {...attrs} {...f.fields.message.as('text')}
+				></textarea>
+			{/snippet}
+		</Field>
+
+		<LocaleField field={f.fields.locale} />
+
+		<Honeypot form={f.fields} id="contact-website" />
+
+		<div class="actions">
+			<Button type="submit" pending={f.pending}>{msg.contact_submit()}</Button>
+		</div>
+
+		{#if f.result && !f.result.ok}
+			<FormErrorFeedback result={f.result} />
+		{:else if f.fields.allIssues()?.length}
+			<FormFeedback kind="error">{msg.contact_invalid()}</FormFeedback>
+		{/if}
+	</form>
+{/if}
+
+<style>
+	form {
+		max-width: 32rem;
+	}
+
+	input,
+	select,
+	textarea {
+		padding: var(--space-2);
+	}
+
+	textarea {
+		resize: vertical;
+	}
+</style>

package/dist/components/contact/ContactForm.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { FormResultOf, RemoteField, RemoteFormInstance } from '../../forms/types.js';
+/** The preflighted contact form the host page passes in. */
+export type ContactFormInstance = RemoteFormInstance<{
+    category: RemoteField;
+    name: RemoteField;
+    email: RemoteField;
+    message: RemoteField;
+    locale: RemoteField;
+    website: RemoteField;
+}, FormResultOf> & {
+    fields: {
+        allIssues(): Array<{
+            message: string;
+        }> | undefined;
+    };
+};
+interface Props {
+    /**
+     * The remote form, preflighted by the host page against its schema.
+     * Progressive enhancement is unchanged: without JavaScript the form
+     * posts natively and the page re-renders with the result.
+     */
+    form: ContactFormInstance;
+}
+declare const ContactForm: import("svelte").Component<Props, {}, "">;
+type ContactForm = ReturnType<typeof ContactForm>;
+export default ContactForm;

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

@@ -0,0 +1,2 @@
+export { default as ContactForm } from './ContactForm.svelte';
+export type { ContactFormInstance } from './ContactForm.svelte';

package/dist/components/contact/index.js

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

package/dist/components/ui/Honeypot.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { HONEYPOT_FIELD } from '../../forms/transport.js';
+
+	/**
+	 * Spam trap for the public forms: invisible to humans, tempting to bots.
+	 * The server half is HONEYPOT_FIELD in ../../forms/transport.js, which the
+	 * host app's form envelope checks before running any handler.
+	 *
+	 * This takes the form and reads that field itself. Taking the field meant
+	 * both callers named it — `f.fields.website` — so the two halves were
+	 * joined by a string typed twice rather than by the constant, and nothing
+	 * outside the schemas and the envelope imported it. A trap whose markup
+	 * name drifts from the schema's is a trap that silently stops catching.
+	 */
+	interface HoneypotField {
+		as(type: 'text'): Record<string, unknown>;
+	}
+
+	interface Props {
+		/** The remote form; its honeypot field is read by name from the schema. */
+		form: Record<typeof HONEYPOT_FIELD, HoneypotField>;
+		/** DOM id, unique per page — two honeypot forms can share one. */
+		id: string;
+	}
+
+	let { form, id }: Props = $props();
+
+	const field = $derived(form[HONEYPOT_FIELD]);
+</script>
+
+<div class="hp" aria-hidden="true">
+	<label for={id}>Website</label>
+	<input {id} tabindex="-1" autocomplete="off" {...field.as('text')} />
+</div>
+
+<style>
+	.hp {
+		position: absolute;
+		left: -9999px;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+	}
+</style>

package/dist/components/ui/Honeypot.svelte.d.ts

@@ -0,0 +1,24 @@
+import { HONEYPOT_FIELD } from '../../forms/transport.js';
+/**
+ * Spam trap for the public forms: invisible to humans, tempting to bots.
+ * The server half is HONEYPOT_FIELD in ../../forms/transport.js, which the
+ * host app's form envelope checks before running any handler.
+ *
+ * This takes the form and reads that field itself. Taking the field meant
+ * both callers named it — `f.fields.website` — so the two halves were
+ * joined by a string typed twice rather than by the constant, and nothing
+ * outside the schemas and the envelope imported it. A trap whose markup
+ * name drifts from the schema's is a trap that silently stops catching.
+ */
+interface HoneypotField {
+    as(type: 'text'): Record<string, unknown>;
+}
+interface Props {
+    /** The remote form; its honeypot field is read by name from the schema. */
+    form: Record<typeof HONEYPOT_FIELD, HoneypotField>;
+    /** DOM id, unique per page — two honeypot forms can share one. */
+    id: string;
+}
+declare const Honeypot: import("svelte").Component<Props, {}, "">;
+type Honeypot = ReturnType<typeof Honeypot>;
+export default Honeypot;

package/dist/components/ui/LocaleField.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { getUiConfig } from '../../config/context.js';
+
+	/**
+	 * The hidden `locale` input every form carries. Without it a no-JS
+	 * submission is stored under the base locale, because the unprefixed POST
+	 * target resolves there before the locale cookie is consulted. Rendering it
+	 * from one module makes the invariant enforceable instead of restated at
+	 * every form.
+	 */
+	interface Props {
+		/** The form's `locale` field: `form.fields.locale`. */
+		field: { as(type: 'hidden', value: string): Record<string, unknown> };
+	}
+
+	let { field }: Props = $props();
+
+	const config = getUiConfig();
+</script>
+
+<input {...field.as('hidden', config.locale())} />