@tollwyn/baukasten 0.0.2 → 1.2.2

package/dist/ui/Frame.svelte.d.ts

@@ -0,0 +1,12 @@
+import './base.css';
+import { type Snippet } from 'svelte';
+import type { FrameData } from './data.js';
+type $$ComponentProps = {
+    data: {
+        frame: FrameData;
+    };
+    children: Snippet;
+};
+declare const Frame: import("svelte").Component<$$ComponentProps, {}, "">;
+type Frame = ReturnType<typeof Frame>;
+export default Frame;

package/dist/ui/LegalPage.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">import { useFrame } from "./frame.js";
+let { data } = $props();
+const { name } = useFrame();
+const legal = $derived(data.legal);
+</script>
+
+<!-- One line: whitespace between the pieces would show as a blank in the sentence. -->
+<!-- prettier-ignore -->
+{#snippet inline(parts: LegalInline[])}{#each parts as part, index (index)}{#if typeof part === 'string'}{part}{:else if part.kind === 'strong'}<strong>{part.text}</strong>{:else if part.kind === 'code'}<code>{part.text}</code>{:else}<a href={part.href}>{part.text}</a>{/if}{/each}{/snippet}
+
+<svelte:head>
+	<title>{legal.title} – {name}</title>
+</svelte:head>
+
+<article class="bk-ui bk-legal">
+	<h1>{legal.title}</h1>
+	{#each legal.blocks as block, index (index)}
+		{#if block.kind === 'heading'}
+			<h2>{block.text}</h2>
+		{:else if block.kind === 'paragraph'}
+			<p>{@render inline(block.parts)}</p>
+		{:else if block.kind === 'note'}
+			<p class="bk-muted">{@render inline(block.parts)}</p>
+		{:else if block.kind === 'list'}
+			<ul>
+				{#each block.items as item, at (at)}
+					<li>{@render inline(item)}</li>
+				{/each}
+			</ul>
+		{:else}
+			<ol type="a">
+				{#each block.items as item, at (at)}
+					<li>{@render inline(item)}</li>
+				{/each}
+			</ol>
+		{/if}
+	{/each}
+</article>

package/dist/ui/LegalPage.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { LegalData } from './data.js';
+type $$ComponentProps = {
+    data: {
+        legal: LegalData;
+    };
+};
+declare const LegalPage: import("svelte").Component<$$ComponentProps, {}, "">;
+type LegalPage = ReturnType<typeof LegalPage>;
+export default LegalPage;

package/dist/ui/Linked.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">let { text, href } = $props();
+export {};
+</script>
+
+{text.before}<a {href}>{text.link}</a>{text.after}

package/dist/ui/Linked.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Linked } from '../texts.js';
+type $$ComponentProps = {
+    text: Linked;
+    href: string;
+};
+declare const Linked: import("svelte").Component<$$ComponentProps, {}, "">;
+type Linked = ReturnType<typeof Linked>;
+export default Linked;

package/dist/ui/LoginPage.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">import Field from "./Field.svelte";
+import Form from "./Form.svelte";
+import { useFrame } from "./frame.js";
+import Linked from "./Linked.svelte";
+let { data, form } = $props();
+const { t, name, link } = useFrame();
+</script>
+
+<svelte:head>
+	<title>{t.login.title} – {name}</title>
+</svelte:head>
+
+<div class="bk-ui bk-narrow">
+	<h1>{t.login.title}</h1>
+	{#if data.login.notice === 'verified'}
+		<p class="bk-success" role="status">{t.login.verified}</p>
+	{:else if data.login.notice === 'emailChanged'}
+		<p class="bk-success" role="status">{t.login.emailChanged}</p>
+	{/if}
+	<Form button={t.login.button} error={form?.error}>
+		<Field
+			label={t.login.email}
+			name="email"
+			type="email"
+			autocomplete="email"
+			required
+			value={form?.email ?? ''}
+		/>
+		<Field
+			label={t.login.password}
+			name="password"
+			type="password"
+			autocomplete="current-password"
+			required
+		/>
+	</Form>
+	<p class="bk-muted">
+		<a href={link('/forgot-password')}>{t.login.forgot}</a> ·
+		<Linked text={t.login.noAccount} href={link('/signup')} />
+	</p>
+</div>

package/dist/ui/LoginPage.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { LoginData, LoginForm } from './data.js';
+type $$ComponentProps = {
+    data: {
+        login: LoginData;
+    };
+    form?: LoginForm | null;
+};
+declare const LoginPage: import("svelte").Component<$$ComponentProps, {}, "">;
+type LoginPage = ReturnType<typeof LoginPage>;
+export default LoginPage;

package/dist/ui/LogoutPage.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">import Form from "./Form.svelte";
+import { useFrame } from "./frame.js";
+let { data } = $props();
+const { t, name } = useFrame();
+</script>
+
+<svelte:head>
+	<title>{t.logout.title} – {name}</title>
+</svelte:head>
+
+<div class="bk-ui bk-narrow">
+	{#if data.logout.loggedIn}
+		<h1>{t.logout.title}</h1>
+		<Form button={t.logout.button} />
+	{:else}
+		<h1>{data.logout.deleted ? t.logout.deleted : t.logout.done}</h1>
+		<p><a href="/login">{t.logout.again}</a></p>
+	{/if}
+</div>

package/dist/ui/LogoutPage.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { LogoutData } from './data.js';
+type $$ComponentProps = {
+    data: {
+        logout: LogoutData;
+    };
+};
+declare const LogoutPage: import("svelte").Component<$$ComponentProps, {}, "">;
+type LogoutPage = ReturnType<typeof LogoutPage>;
+export default LogoutPage;

package/dist/ui/ResetPasswordPage.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">import Field from "./Field.svelte";
+import Form from "./Form.svelte";
+import { useFrame } from "./frame.js";
+import Linked from "./Linked.svelte";
+let { data, form } = $props();
+const { t, name } = useFrame();
+</script>
+
+<svelte:head>
+	<title>{t.reset.title} – {name}</title>
+</svelte:head>
+
+<div class="bk-ui bk-narrow">
+	<h1>{t.reset.title}</h1>
+	{#if data.reset.valid}
+		<Form button={t.reset.button} error={form?.error}>
+			<input type="hidden" name="token" value={data.reset.token} />
+			<Field
+				label={t.reset.password}
+				name="password"
+				type="password"
+				autocomplete="new-password"
+				minlength={10}
+				required
+			/>
+		</Form>
+	{:else}
+		<p class="bk-error" role="alert"><Linked text={t.reset.invalid} href="/forgot-password" /></p>
+	{/if}
+</div>

package/dist/ui/ResetPasswordPage.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ResetData, ResetForm } from './data.js';
+type $$ComponentProps = {
+    data: {
+        reset: ResetData;
+    };
+    form?: ResetForm | null;
+};
+declare const ResetPasswordPage: import("svelte").Component<$$ComponentProps, {}, "">;
+type ResetPasswordPage = ReturnType<typeof ResetPasswordPage>;
+export default ResetPasswordPage;

package/dist/ui/SignupPage.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">import Field from "./Field.svelte";
+import Form from "./Form.svelte";
+import { useFrame } from "./frame.js";
+import Linked from "./Linked.svelte";
+let { data, form } = $props();
+const { t, name, link } = useFrame();
+</script>
+
+<svelte:head>
+	<title>{data.signup.heading} – {name}</title>
+</svelte:head>
+
+<div class="bk-ui bk-narrow">
+	<h1>{data.signup.heading}</h1>
+	<p class="bk-lead">{data.signup.lead}</p>
+	<Form button={t.signup.button} error={form?.error}>
+		{#if data.signup.via !== null}
+			<input type="hidden" name="via" value={data.signup.via} />
+		{/if}
+		<Field
+			label={t.signup.email}
+			name="email"
+			type="email"
+			autocomplete="email"
+			required
+			value={form?.email ?? ''}
+		/>
+		<Field
+			label={t.signup.password}
+			name="password"
+			type="password"
+			autocomplete="new-password"
+			minlength={10}
+			required
+		/>
+		<label class="bk-check">
+			<input type="checkbox" name="terms" value="accepted" required />
+			<span><Linked text={t.signup.terms} href={link('/terms')} /></span>
+		</label>
+		<label class="bk-check">
+			<input type="checkbox" name="business" value="confirmed" required />
+			<span>{t.signup.business}</span>
+		</label>
+	</Form>
+	{#if form?.taken}
+		<p>
+			<a href={link('/login')}>{t.signup.takenLogIn}</a> ·
+			<a href={link('/forgot-password')}>{t.signup.takenReset}</a>
+		</p>
+	{/if}
+	<p class="bk-muted"><Linked text={t.signup.haveAccount} href={link('/login')} /></p>
+</div>

package/dist/ui/SignupPage.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { SignupData, SignupForm } from './data.js';
+type $$ComponentProps = {
+    data: {
+        signup: SignupData;
+    };
+    form?: SignupForm | null;
+};
+declare const SignupPage: import("svelte").Component<$$ComponentProps, {}, "">;
+type SignupPage = ReturnType<typeof SignupPage>;
+export default SignupPage;

package/dist/ui/VerifyEmailPage.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">import Field from "./Field.svelte";
+import Form from "./Form.svelte";
+import { useFrame } from "./frame.js";
+import Linked from "./Linked.svelte";
+let { data, form } = $props();
+const { t, name } = useFrame();
+const verify = $derived(data.verify);
+</script>
+
+<svelte:head>
+	<title>{t.verify.title} – {name}</title>
+</svelte:head>
+
+<div class="bk-ui bk-narrow">
+	<h1>{t.verify.title}</h1>
+	{#if verify.kind === 'link'}
+		{#if verify.valid}
+			<Form action="?/confirm" button={t.verify.button} error={form?.error}>
+				<input type="hidden" name="token" value={verify.token} />
+				{#if verify.needsPassword}
+					<p class="bk-muted">{t.verify.apiAccount}</p>
+					<Field
+						label={t.verify.password}
+						name="password"
+						type="password"
+						autocomplete="new-password"
+						minlength={10}
+					/>
+				{/if}
+			</Form>
+		{:else}
+			<p class="bk-error" role="alert">{t.verify.invalid}</p>
+			<p><Linked text={t.verify.newLink} href="/verify-email" /></p>
+		{/if}
+	{:else if verify.kind === 'pending'}
+		{#if form?.resent}
+			<p class="bk-success" role="status">{t.verify.resent(form.resent)}</p>
+		{:else if verify.unsent}
+			<p class="bk-error" role="status">{t.verify.unsent}</p>
+		{:else}
+			<p role="status">{t.verify.pending(verify.email)}</p>
+		{/if}
+		<Form action="?/resend" button={t.verify.resend} error={form?.error} />
+	{:else if verify.kind === 'confirmed'}
+		<p class="bk-success" role="status">{t.verify.confirmed}</p>
+		<p><a href="/account">{t.verify.continue}</a></p>
+	{:else}
+		<p><Linked text={t.verify.logIn} href="/login?next=%2Fverify-email" /></p>
+	{/if}
+</div>

package/dist/ui/VerifyEmailPage.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { VerifyData, VerifyForm } from './data.js';
+type $$ComponentProps = {
+    data: {
+        verify: VerifyData;
+    };
+    form?: VerifyForm | null;
+};
+declare const VerifyEmailPage: import("svelte").Component<$$ComponentProps, {}, "">;
+type VerifyEmailPage = ReturnType<typeof VerifyEmailPage>;
+export default VerifyEmailPage;

package/dist/ui/base.css

@@ -0,0 +1,287 @@
+/*
+ * This statement comes first, so it fixes the order of the layers, those of Tailwind 4 and Skeleton
+ * too (`properties` holds Tailwind's fallbacks for old browsers and must stay below its utilities).
+ * `bk-root` lies below everything, so that whatever the product brings wins over it. `bk` lies above
+ * Tailwind's base and below its components and utilities, and its element styles apply only inside
+ * the frame and the pages of the baukasten: the preflight does not strip their headings, lists and
+ * buttons, and a product's own pages get none of them.
+ */
+@layer bk-root, properties, theme, base, bk, components, utilities;
+
+@layer bk-root {
+	:root {
+		--bk-text: #1f2328;
+		--bk-muted: #5c6670;
+		--bk-background: #ffffff;
+		--bk-surface: #f5f7f9;
+		--bk-border: #d5dbe1;
+		--bk-accent: #1f5fbf;
+		--bk-accent-text: #ffffff;
+		--bk-error: #b42318;
+		--bk-success: #1a7f37;
+		--bk-radius: 6px;
+		--bk-width: 64rem;
+		--bk-narrow: 28rem;
+		--bk-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+		color-scheme: light;
+	}
+
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
+
+	body {
+		margin: 0;
+		font-family: var(--bk-font);
+		line-height: 1.5;
+		color: var(--bk-text);
+		background: var(--bk-background);
+	}
+
+	a {
+		color: var(--bk-accent);
+	}
+}
+
+@layer bk {
+	.bk-page {
+		min-height: 100vh;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.bk-head,
+	.bk-foot {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.5rem 1.5rem;
+		padding: 0.75rem 1.25rem;
+		border-bottom: 1px solid var(--bk-border);
+	}
+
+	.bk-foot {
+		margin-top: auto;
+		border-top: 1px solid var(--bk-border);
+		border-bottom: none;
+		font-size: 0.875rem;
+	}
+
+	.bk-name {
+		display: inline-flex;
+		align-items: center;
+		font-weight: 700;
+		color: var(--bk-text);
+		text-decoration: none;
+	}
+
+	.bk-logo {
+		display: block;
+		max-height: 2.5rem;
+		width: auto;
+	}
+
+	.bk-nav {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 1rem;
+	}
+
+	.bk-account {
+		margin-left: auto;
+	}
+
+	.bk-account form {
+		margin: 0;
+	}
+
+	.bk-main {
+		width: 100%;
+		max-width: var(--bk-width);
+		margin: 0 auto;
+		padding: 1.5rem 1.25rem 3rem;
+	}
+
+	.bk-narrow {
+		max-width: var(--bk-narrow);
+	}
+
+	.bk-lead,
+	.bk-muted {
+		color: var(--bk-muted);
+	}
+
+	.bk-notice {
+		margin: 0;
+		padding: 0.6rem 1.25rem;
+		background: var(--bk-surface);
+		border-bottom: 1px solid var(--bk-border);
+	}
+
+	.bk-form {
+		display: flex;
+		flex-direction: column;
+		gap: 0.85rem;
+		margin: 1rem 0;
+	}
+
+	.bk-field {
+		display: flex;
+		flex-direction: column;
+		gap: 0.3rem;
+	}
+
+	.bk-check {
+		display: flex;
+		gap: 0.5rem;
+		align-items: flex-start;
+	}
+
+	/* What the browser gives these elements and Tailwind's preflight takes away, on the pages of the
+	   baukasten only. */
+	.bk-ui h1 {
+		margin: 0.67em 0;
+		font-size: 2em;
+		font-weight: 700;
+		line-height: 1.2;
+	}
+
+	.bk-ui h2 {
+		margin: 0.83em 0;
+		font-size: 1.5em;
+		font-weight: 700;
+		line-height: 1.25;
+	}
+
+	.bk-ui p {
+		margin: 1em 0;
+	}
+
+	.bk-ui ul,
+	.bk-ui ol {
+		margin: 1em 0;
+		padding-left: 2.5em;
+	}
+
+	.bk-ui ul {
+		list-style: disc;
+	}
+
+	.bk-ui ol {
+		list-style: decimal;
+	}
+
+	.bk-ui ol[type='a'] {
+		list-style-type: lower-alpha;
+	}
+
+	.bk-ui code {
+		font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
+		font-size: 0.95em;
+	}
+
+	.bk-ui section {
+		margin-top: 2.25rem;
+	}
+
+	.bk-ui a,
+	.bk-head a,
+	.bk-foot a,
+	.bk-notice a {
+		color: var(--bk-accent);
+		text-decoration: underline;
+	}
+
+	.bk-head .bk-name {
+		color: var(--bk-text);
+		text-decoration: none;
+	}
+
+	:is(.bk-ui, .bk-form) input:not([type='checkbox']) {
+		font: inherit;
+		padding: 0.5rem 0.6rem;
+		border: 1px solid var(--bk-border);
+		border-radius: var(--bk-radius);
+		background: var(--bk-background);
+		color: var(--bk-text);
+	}
+
+	:is(.bk-ui, .bk-head, .bk-form) button,
+	.bk-button {
+		font: inherit;
+		align-self: flex-start;
+		padding: 0.5rem 1rem;
+		border: none;
+		border-radius: var(--bk-radius);
+		background: var(--bk-accent);
+		color: var(--bk-accent-text);
+		text-decoration: none;
+		cursor: pointer;
+	}
+
+	:is(.bk-ui, .bk-head, .bk-form) button:disabled {
+		opacity: 0.6;
+		cursor: progress;
+	}
+
+	.bk-head .bk-button {
+		color: var(--bk-accent-text);
+		text-decoration: none;
+	}
+
+	:is(.bk-ui, .bk-head, .bk-form) .bk-link {
+		padding: 0;
+		background: none;
+		color: var(--bk-accent);
+		text-decoration: underline;
+	}
+
+	.bk-error {
+		color: var(--bk-error);
+	}
+
+	.bk-success {
+		color: var(--bk-success);
+	}
+
+	.bk-secret {
+		display: block;
+		margin-top: 0.4rem;
+		padding: 0.5rem;
+		background: var(--bk-surface);
+		border-radius: var(--bk-radius);
+		overflow-wrap: anywhere;
+	}
+
+	.bk-table {
+		border-collapse: collapse;
+		margin: 0.5rem 0;
+	}
+
+	.bk-table th,
+	.bk-table td {
+		padding: 0.35rem 0.75rem 0.35rem 0;
+		text-align: left;
+		border-bottom: 1px solid var(--bk-border);
+	}
+
+	.bk-table .bk-form {
+		margin: 0;
+	}
+
+	.bk-legal {
+		max-width: 46rem;
+	}
+
+	.bk-legal h2 {
+		margin-top: 2rem;
+		font-size: 1.15rem;
+	}
+
+	.bk-legal li {
+		margin: 0.4rem 0;
+	}
+}