@wells-nelson/interactions 0.0.0-stage → 1.0.0

package/dist/account/ShareModal.svelte

@@ -0,0 +1,297 @@
+<script lang="ts">
+	import { Badge, Button, IconButton, Modal } from '@wells-nelson/displays';
+	import { untrack } from 'svelte';
+	import Segmented from '../Segmented.svelte';
+	import {
+		EMAIL_PATTERN,
+		ROLE_OPTIONS,
+		errorText,
+		type CloudStatus,
+		type ContainerLocation,
+		type Member,
+		type MembersApi,
+		type Nouns,
+		type Role
+	} from './types.js';
+
+	/**
+	 * Who a container is shared with: invite by email, active / pending members, remove members.
+	 * Offers sign-in or making the container cloud-enabled first. With `roles`, owners pick a role
+	 * per member and the last owner can't be removed or demoted.
+	 */
+	let {
+		containerId,
+		name,
+		location,
+		ready = true,
+		role = 'owner',
+		roles = false,
+		cloud,
+		members: api,
+		nouns,
+		appName,
+		signInHref,
+		signInPitch,
+		description,
+		onmakecloud,
+		onclose
+	}: {
+		containerId: string;
+		name: string;
+		/** Undefined once the container is gone (deleted, or moved under a new id); the modal closes. */
+		location: ContainerLocation | undefined;
+		/** False while the app is still loading its containers (don't treat "missing" as gone). */
+		ready?: boolean;
+		/** This user's role on the container (ignored without `roles`). */
+		role?: Role;
+		roles?: boolean;
+		cloud: CloudStatus & { setRole?(containerId: string, role: Role): void };
+		members: MembersApi;
+		nouns: Nouns;
+		appName: string;
+		signInHref: string;
+		signInPitch?: string;
+		/** Who can do what, shown above the invite form. */
+		description?: string;
+		onmakecloud: () => Promise<unknown>;
+		onclose: () => void;
+	} = $props();
+
+	const isCloud = $derived(location === 'cloud');
+	const isOwner = $derived(!roles || role === 'owner');
+	const signedIn = $derived(!!cloud.user);
+	const uploaded = $derived(isCloud && !cloud.hasPending(containerId));
+
+	let open = $state(true);
+	let list = $state<Member[] | null>(null);
+	let error = $state<string | null>(null);
+	let email = $state('');
+	let inviteRole = $state<Role>('viewer');
+	let busy = $state(false);
+
+	const others = $derived((list ?? []).filter((m) => m.email !== cloud.email));
+	/** With roles everyone is listed (including you, to show your role); without, only the others. */
+	const shown = $derived(roles ? (list ?? []) : others);
+	const ownerCount = $derived((list ?? []).filter((m) => m.role === 'owner').length);
+	const emailValid = $derived(EMAIL_PATTERN.test(email.trim()));
+	const isLastOwner = (m: Member) => roles && m.role === 'owner' && ownerCount <= 1;
+
+	const pitch = $derived(signInPitch ?? `Sign in to share ${nouns.plural} with other people.`);
+	const explainer = $derived(
+		description ??
+			(roles
+				? `Viewers can see everything. Editors can also make changes. Owners can also rename or delete the ${nouns.singular} and manage sharing.`
+				: `People you share with can do everything you can, including renaming and deleting the ${nouns.singular}.`)
+	);
+
+	function close() {
+		open = false;
+		onclose();
+	}
+
+	$effect(() => {
+		if (ready && !location && !busy) close();
+	});
+
+	async function load() {
+		if (!isCloud || !signedIn) return;
+		if (!cloud.online) {
+			error = 'You are offline. Sharing details load once you reconnect.';
+			return;
+		}
+		try {
+			error = null;
+			list = await api.fetchMembers(containerId);
+			const me = list.find((m) => m.email === cloud.email);
+			if (roles && me?.role) cloud.setRole?.(containerId, me.role);
+		} catch (err) {
+			error = errorText(err);
+		}
+	}
+
+	// Reload when connectivity or the location changes, not on whatever state `load` happens to read.
+	$effect(() => {
+		void cloud.online;
+		void isCloud;
+		void untrack(load);
+	});
+
+	async function act(fn: () => Promise<unknown>) {
+		busy = true;
+		error = null;
+		try {
+			await fn();
+		} catch (err) {
+			error = errorText(err);
+		} finally {
+			busy = false;
+			await load();
+		}
+	}
+
+	function invite(e: SubmitEvent) {
+		e.preventDefault();
+		if (!emailValid) return;
+		void act(async () => {
+			await api.inviteMember(containerId, email, roles ? inviteRole : undefined);
+			email = '';
+			inviteRole = 'viewer';
+		});
+	}
+</script>
+
+<Modal bind:open title={`Share “${name}”`} {onclose}>
+	{#if !cloud.configured}
+		<p class="muted">Sharing isn't available because cloud sync isn't set up for this copy of {appName}.</p>
+	{:else if !signedIn}
+		<p>{pitch}</p>
+		<a href={signInHref} onclick={close}>Go to sign in</a>
+	{:else if !isCloud}
+		<p>Only cloud-enabled {nouns.plural} can be shared. This one is only on this device.</p>
+		<Button variant="primary" icon="cloud" onclick={() => act(onmakecloud)} disabled={busy}>Make cloud-enabled</Button>
+	{:else}
+		<p class="muted small">{explainer}</p>
+
+		{#if isOwner}
+			{#if !uploaded}
+				<p class="muted small">Sharing is available once this {nouns.singular} has finished uploading.</p>
+			{:else}
+				<form class="invite" class:with-role={roles} onsubmit={invite}>
+					<input type="email" placeholder="name@example.com" bind:value={email} aria-label="Email to share with" />
+					{#if roles}
+						<Segmented label="Role for the invite" bind:value={inviteRole} options={ROLE_OPTIONS} />
+					{/if}
+					<Button variant="primary" type="submit" icon="share" disabled={!emailValid || busy || !cloud.online}>Share</Button>
+				</form>
+			{/if}
+		{:else}
+			<p class="muted small">Only owners can change who this {nouns.singular} is shared with.</p>
+		{/if}
+
+		{#if shown.length > 0}
+			<ul class="members">
+				{#each shown as m (m.id)}
+					{@const me = m.email === cloud.email}
+					<li>
+						<div class="who">
+							<span class="email">{m.email}{me ? ' (you)' : ''}</span>
+							{#if !m.active}
+								<Badge tone="warning">Pending</Badge>
+							{:else if !roles}
+								<Badge tone="accent">Active</Badge>
+							{/if}
+						</div>
+						{#if roles && isOwner}
+							<select
+								aria-label={`Role for ${m.email}`}
+								value={m.role}
+								disabled={busy || !cloud.online || isLastOwner(m) || !api.setMemberRole}
+								title={isLastOwner(m)
+									? `A ${nouns.singular} needs at least one owner. Make someone else an owner first.`
+									: undefined}
+								onchange={(e) => act(() => api.setMemberRole!(m.id, (e.currentTarget as HTMLSelectElement).value as Role))}
+							>
+								{#each ROLE_OPTIONS as r (r.value)}<option value={r.value}>{r.label}</option>{/each}
+							</select>
+						{:else if roles}
+							<span class="role">{ROLE_OPTIONS.find((r) => r.value === m.role)?.label}</span>
+						{/if}
+						{#if isOwner && !me}
+							<IconButton
+								icon="x"
+								label={roles ? `Remove ${m.email}` : `Stop sharing with ${m.email}`}
+								disabled={busy || !cloud.online || isLastOwner(m)}
+								onclick={() => act(() => api.removeMember(m.id))}
+							/>
+						{/if}
+					</li>
+				{/each}
+			</ul>
+			{#if roles && isOwner && ownerCount <= 1}
+				<p class="muted small">You're the only owner. To step down, make someone else an owner first.</p>
+			{/if}
+			<p class="muted small">
+				Pending means they haven't signed in to {appName} yet; they get the {nouns.singular} the first time they do.
+			</p>
+		{:else if list}
+			<p class="muted small">Not shared with anyone yet.</p>
+		{/if}
+	{/if}
+	{#if error}<p class="error">{error}</p>{/if}
+
+	{#snippet footer()}
+		<Button onclick={close}>Done</Button>
+	{/snippet}
+</Modal>
+
+<style>
+	p {
+		margin: 0;
+		line-height: 1.5;
+	}
+	.small {
+		font-size: 0.9rem;
+	}
+	.error {
+		color: var(--danger);
+	}
+	.invite {
+		display: flex;
+		gap: 0.5rem;
+	}
+	.invite input {
+		flex: 1;
+		min-width: 0;
+	}
+	.invite.with-role {
+		flex-direction: column;
+		gap: 0.6rem;
+	}
+	.invite :global(legend) {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip: rect(0 0 0 0);
+	}
+	.members {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		border: 1px solid var(--border);
+		border-radius: var(--radius);
+	}
+	.members li {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.25rem 0.25rem 0.25rem 0.9rem;
+		min-height: 3rem;
+	}
+	.members li + li {
+		border-top: 1px solid var(--border);
+	}
+	.who {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.25rem 0.5rem;
+	}
+	.email {
+		overflow-wrap: anywhere;
+	}
+	select {
+		font: inherit;
+		color: inherit;
+		padding: 0.35rem 0.5rem;
+		border: 1px solid var(--border-strong);
+		border-radius: var(--radius);
+		background: var(--surface);
+	}
+	.role {
+		color: var(--muted);
+		padding-right: 0.75rem;
+	}
+</style>

package/dist/account/ShareModal.svelte.d.ts

@@ -0,0 +1,27 @@
+import { type CloudStatus, type ContainerLocation, type MembersApi, type Nouns, type Role } from './types.js';
+type $$ComponentProps = {
+    containerId: string;
+    name: string;
+    /** Undefined once the container is gone (deleted, or moved under a new id); the modal closes. */
+    location: ContainerLocation | undefined;
+    /** False while the app is still loading its containers (don't treat "missing" as gone). */
+    ready?: boolean;
+    /** This user's role on the container (ignored without `roles`). */
+    role?: Role;
+    roles?: boolean;
+    cloud: CloudStatus & {
+        setRole?(containerId: string, role: Role): void;
+    };
+    members: MembersApi;
+    nouns: Nouns;
+    appName: string;
+    signInHref: string;
+    signInPitch?: string;
+    /** Who can do what, shown above the invite form. */
+    description?: string;
+    onmakecloud: () => Promise<unknown>;
+    onclose: () => void;
+};
+declare const ShareModal: import("svelte").Component<$$ComponentProps, {}, "">;
+type ShareModal = ReturnType<typeof ShareModal>;
+export default ShareModal;

package/dist/account/SignInCard.svelte

@@ -0,0 +1,178 @@
+<script lang="ts">
+	import { Button, Icon } from '@wells-nelson/displays';
+	import { EMAIL_PATTERN, errorText, type AccountActions, type CloudStatus } from './types.js';
+
+	/**
+	 * "Continue with Google" plus, optionally, "Email me a sign-in link". Shows the expired-session
+	 * notice and the offline state.
+	 */
+	let {
+		cloud,
+		account,
+		returnUrl,
+		pitch,
+		emailLink = true,
+		googleLabel = 'Continue with Google'
+	}: {
+		cloud: CloudStatus;
+		account: Pick<AccountActions, 'signInWithGoogle' | 'signInWithEmail'>;
+		/** Absolute URL to come back to after signing in (usually the profile page). */
+		returnUrl: () => string;
+		/** Why to sign in, e.g. "Sign in to sync projects across your devices…". */
+		pitch: string;
+		emailLink?: boolean;
+		googleLabel?: string;
+	} = $props();
+
+	let error = $state<string | null>(null);
+	let busy = $state(false);
+	let email = $state('');
+	let linkSentTo = $state<string | null>(null);
+	const emailValid = $derived(EMAIL_PATTERN.test(email.trim()));
+	const inputId = $props.id();
+
+	async function google() {
+		error = null;
+		busy = true;
+		try {
+			await account.signInWithGoogle(returnUrl());
+		} catch (err) {
+			error = errorText(err);
+			busy = false;
+		}
+	}
+
+	async function sendLink(e: SubmitEvent) {
+		e.preventDefault();
+		if (!emailValid) return;
+		error = null;
+		busy = true;
+		try {
+			await account.signInWithEmail(email, returnUrl());
+			linkSentTo = email.trim();
+		} catch (err) {
+			error = errorText(err);
+		} finally {
+			busy = false;
+		}
+	}
+</script>
+
+<section class="card section">
+	{#if cloud.sessionExpired}
+		<div class="notice"><Icon name="alert" /> Your session expired. Sign in again to resume syncing.</div>
+	{/if}
+	<h2>Sign in</h2>
+	<p class="muted">{pitch}</p>
+	<Button variant="primary" onclick={google} disabled={busy || !cloud.online}>
+		<svg width="18" height="18" viewBox="0 0 48 48" aria-hidden="true">
+			<path
+				fill="#FFC107"
+				d="M43.6 20.5H42V20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34 6.1 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.4-.4-3.5z"
+			/>
+			<path
+				fill="#FF3D00"
+				d="M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z"
+			/>
+			<path
+				fill="#4CAF50"
+				d="M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-7.9l-6.5 5C9.5 39.6 16.2 44 24 44z"
+			/>
+			<path
+				fill="#1976D2"
+				d="M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C37 39.2 44 34 44 24c0-1.3-.1-2.4-.4-3.5z"
+			/>
+		</svg>
+		{googleLabel}
+	</Button>
+
+	{#if emailLink}
+		<div class="or muted">or</div>
+
+		{#if linkSentTo}
+			<div class="sent">
+				<Icon name="mail" />
+				<p>
+					Check your email for a sign-in link. We sent it to <strong>{linkSentTo}</strong>. Open it in this browser.
+					<button type="button" class="link" onclick={() => (linkSentTo = null)}>Use a different email</button>
+				</p>
+			</div>
+		{:else}
+			<form class="email" onsubmit={sendLink}>
+				<label for={inputId}>Email me a sign-in link</label>
+				<div class="row">
+					<input id={inputId} type="email" autocomplete="email" placeholder="name@example.com" bind:value={email} />
+					<Button type="submit" disabled={!emailValid || busy || !cloud.online}>Send link</Button>
+				</div>
+			</form>
+		{/if}
+	{/if}
+	{#if !cloud.online}<p class="muted small">You're offline. Connect to sign in.</p>{/if}
+	{#if error}<p class="error">{error}</p>{/if}
+</section>
+
+<style>
+	.section {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		padding: 1rem;
+		margin-bottom: 1rem;
+	}
+	.section p {
+		margin: 0;
+		line-height: 1.5;
+	}
+	h2 {
+		margin: 0;
+		font-size: 1.05rem;
+	}
+	.small {
+		font-size: 0.9rem;
+	}
+	.or {
+		text-align: center;
+		font-size: 0.9rem;
+	}
+	.email {
+		display: flex;
+		flex-direction: column;
+		gap: 0.35rem;
+	}
+	.email label {
+		font-weight: 600;
+		font-size: 0.9rem;
+	}
+	.row {
+		display: flex;
+		gap: 0.5rem;
+	}
+	.row input {
+		flex: 1;
+		min-width: 0;
+	}
+	.sent {
+		display: flex;
+		gap: 0.6rem;
+		padding: 0.75rem 1rem;
+		border-radius: var(--radius);
+		background: var(--accent-soft);
+	}
+	.sent :global(.icon) {
+		color: var(--accent-text);
+		margin-top: 0.15rem;
+	}
+	.link {
+		display: block;
+		margin-top: 0.35rem;
+		padding: 0;
+		border: none;
+		background: none;
+		color: var(--accent-text);
+		text-decoration: underline;
+		cursor: pointer;
+	}
+	.error {
+		color: var(--danger);
+	}
+</style>

package/dist/account/SignInCard.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type AccountActions, type CloudStatus } from './types.js';
+type $$ComponentProps = {
+    cloud: CloudStatus;
+    account: Pick<AccountActions, 'signInWithGoogle' | 'signInWithEmail'>;
+    /** Absolute URL to come back to after signing in (usually the profile page). */
+    returnUrl: () => string;
+    /** Why to sign in, e.g. "Sign in to sync projects across your devices…". */
+    pitch: string;
+    emailLink?: boolean;
+    googleLabel?: string;
+};
+declare const SignInCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type SignInCard = ReturnType<typeof SignInCard>;
+export default SignInCard;

package/dist/account/SignOutCard.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { Button, ConfirmDialog } from '@wells-nelson/displays';
+	import { errorText, type AccountActions, type CloudStatus, type Nouns } from './types.js';
+
+	/** Sign out, with a warning listing anything that hasn't reached the cloud yet. */
+	let {
+		cloud,
+		account,
+		nouns,
+		pending
+	}: {
+		cloud: CloudStatus;
+		account: Pick<AccountActions, 'signOut'>;
+		nouns: Nouns;
+		pending: { id: string; name: string }[];
+	} = $props();
+
+	let busy = $state(false);
+	let confirming = $state(false);
+	let error = $state<string | null>(null);
+
+	function request() {
+		if (cloud.hasAnyPending) confirming = true;
+		else void signOut();
+	}
+
+	async function signOut() {
+		busy = true;
+		error = null;
+		try {
+			await account.signOut();
+		} catch (err) {
+			error = errorText(err);
+		} finally {
+			busy = false;
+		}
+	}
+</script>
+
+<section class="card section">
+	<p class="muted small">
+		Signing out removes your cloud-enabled {nouns.plural} from this device. Local-only {nouns.plural} stay.
+	</p>
+	<Button onclick={request} disabled={busy}>Sign out</Button>
+	{#if error}<p class="error">{error}</p>{/if}
+</section>
+
+<ConfirmDialog
+	bind:open={confirming}
+	title="Sign out with unsynced changes?"
+	message={`These ${nouns.plural} have changes that haven't reached the cloud yet:\n${pending.map((p) => `• ${p.name}`).join('\n')}\n\nIf you sign out now those changes will be lost. Reconnect and use "Force re-sync" first to keep them.`}
+	confirmLabel="Sign out anyway"
+	danger
+	onconfirm={signOut}
+/>
+
+<style>
+	.section {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		padding: 1rem;
+		margin-bottom: 1rem;
+	}
+	.section p {
+		margin: 0;
+		line-height: 1.5;
+	}
+	.small {
+		font-size: 0.9rem;
+	}
+	.error {
+		color: var(--danger);
+	}
+</style>

package/dist/account/SignOutCard.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type AccountActions, type CloudStatus, type Nouns } from './types.js';
+type $$ComponentProps = {
+    cloud: CloudStatus;
+    account: Pick<AccountActions, 'signOut'>;
+    nouns: Nouns;
+    pending: {
+        id: string;
+        name: string;
+    }[];
+};
+declare const SignOutCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type SignOutCard = ReturnType<typeof SignOutCard>;
+export default SignOutCard;