@ternkit/tern 1.2.1 → 1.4.0

package/dist/ui/Sidebar.svelte

@@ -0,0 +1,263 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { page } from '../runtime/state.svelte.js';
+	import Dialog from './Dialog.svelte';
+
+	export type SidebarLink = {
+		label: string;
+		href: string;
+		/** An icon, shown alone when the sidebar is collapsed. */
+		icon?: Snippet;
+		/** A count or label after the link, such as "3". */
+		badge?: string;
+		/** Links under this one, shown while it or one of them is current. */
+		items?: { label: string; href: string }[];
+	};
+	export type SidebarGroup = { label?: string; items: SidebarLink[] };
+
+	type Props = {
+		groups: SidebarGroup[];
+		/** The app's name or logo, at the top. */
+		header?: Snippet;
+		/** Things at the bottom, such as the signed-in user. */
+		footer?: Snippet;
+		/** Show icons only on wide screens; bind it. */
+		collapsed?: boolean;
+		/** Names the navigation. */
+		label?: string;
+		/** The page's content, next to the sidebar. */
+		children: Snippet;
+		class?: string;
+	};
+	let { groups, header, footer, collapsed = $bindable(false), label = 'Main', children, class: klass = '' }: Props = $props();
+
+	let mobileOpen = $state(false);
+	const path = $derived(page.url?.pathname ?? '');
+	const isCurrent = (href: string) => path === href;
+	const inSection = (l: SidebarLink) => isCurrent(l.href) || !!l.items?.some((s) => path === s.href || path.startsWith(s.href + '/'));
+
+	// Close the mobile sheet after navigating.
+	$effect(() => {
+		void path;
+		mobileOpen = false;
+	});
+</script>
+
+{#snippet nav(compact: boolean)}
+	<nav aria-label={label} class="nav" class:compact>
+		{#each groups as group, gi (gi)}
+			<div class="group">
+				{#if group.label && !compact}<div class="group-label" id="tern-sidebar-group-{gi}">{group.label}</div>{/if}
+				<ul aria-labelledby={group.label && !compact ? `tern-sidebar-group-${gi}` : undefined}>
+					{#each group.items as link (link.href)}
+						<li>
+							<a href={link.href} class="link" aria-current={isCurrent(link.href) ? 'page' : undefined} aria-label={compact ? link.label : undefined} title={compact ? link.label : undefined}>
+								{#if link.icon}<span class="icon" aria-hidden="true">{@render link.icon()}</span>{/if}
+								{#if !compact}
+									<span class="label">{link.label}</span>
+									{#if link.badge}<span class="badge">{link.badge}</span>{/if}
+								{/if}
+							</a>
+							{#if link.items && !compact && inSection(link)}
+								<ul class="sub">
+									{#each link.items as sub (sub.href)}
+										<li><a href={sub.href} class="link" aria-current={isCurrent(sub.href) ? 'page' : undefined}>{sub.label}</a></li>
+									{/each}
+								</ul>
+							{/if}
+						</li>
+					{/each}
+				</ul>
+			</div>
+		{/each}
+	</nav>
+{/snippet}
+
+<div class="tern-sidebar-layout {klass}" class:collapsed>
+	<aside class="sidebar">
+		<div class="top">
+			{#if header && !collapsed}<div class="header">{@render header()}</div>{/if}
+			<button type="button" class="collapse" aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'} aria-pressed={collapsed} onclick={() => (collapsed = !collapsed)}>
+				<svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.4"><rect x="2" y="2.5" width="12" height="11" rx="2" /><path d="M6 2.5v11" /></svg>
+			</button>
+		</div>
+		{@render nav(collapsed)}
+		{#if footer && !collapsed}<div class="footer">{@render footer()}</div>{/if}
+	</aside>
+	<div class="mobilebar">
+		<button type="button" class="collapse" aria-label="Open navigation" aria-expanded={mobileOpen} onclick={() => (mobileOpen = true)}>
+			<svg aria-hidden="true" viewBox="0 0 16 16" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M2.5 4h11M2.5 8h11M2.5 12h11" /></svg>
+		</button>
+		{#if header}<div class="header">{@render header()}</div>{/if}
+	</div>
+	<div class="main">{@render children()}</div>
+</div>
+
+<Dialog bind:open={mobileOpen} title="Navigation" side="left" class="tern-sidebar-sheet">
+	{@render nav(false)}
+	{#if footer}<div class="footer">{@render footer()}</div>{/if}
+</Dialog>
+
+<style>
+	.tern-sidebar-layout {
+		display: grid;
+		grid-template-columns: 15rem 1fr;
+		min-height: 100vh;
+	}
+	.collapsed {
+		grid-template-columns: 3.75rem 1fr;
+	}
+	.sidebar {
+		position: sticky;
+		top: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		height: 100vh;
+		box-sizing: border-box;
+		padding: 0.75rem;
+		overflow-y: auto;
+		background: var(--tern-surface);
+		border-right: 1px solid var(--tern-border);
+	}
+	.top {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+		min-height: 2.25rem;
+	}
+	.collapsed .top {
+		justify-content: center;
+	}
+	.header {
+		font-weight: 700;
+		letter-spacing: -0.01em;
+		min-width: 0;
+	}
+	.collapse {
+		display: grid;
+		place-items: center;
+		width: 2rem;
+		height: 2rem;
+		flex: none;
+		color: var(--tern-muted);
+		background: transparent;
+		border: 0;
+		border-radius: var(--tern-radius-sm);
+		cursor: pointer;
+	}
+	.collapse:hover {
+		color: var(--tern-fg);
+		background: var(--tern-surface-2);
+	}
+	.collapse:focus-visible,
+	.link:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: -2px;
+	}
+	.nav {
+		display: grid;
+		gap: 1rem;
+		align-content: start;
+		flex: 1;
+	}
+	.group-label {
+		padding: 0 0.6rem 0.3rem;
+		font-size: 0.75rem;
+		font-weight: 600;
+		color: var(--tern-muted);
+	}
+	ul {
+		display: grid;
+		gap: 0.125rem;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+	.link {
+		display: flex;
+		align-items: center;
+		gap: 0.6rem;
+		min-height: 2.125rem;
+		padding: 0 0.6rem;
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: var(--tern-muted);
+		text-decoration: none;
+		border-radius: var(--tern-radius-sm);
+	}
+	.compact .link {
+		justify-content: center;
+		padding: 0;
+	}
+	.link:hover {
+		color: var(--tern-fg);
+		background: var(--tern-surface-2);
+	}
+	.link[aria-current='page'] {
+		color: var(--tern-fg);
+		background: var(--tern-accent-soft);
+		font-weight: 600;
+	}
+	.icon {
+		display: inline-flex;
+		width: 1.125rem;
+		justify-content: center;
+		flex: none;
+	}
+	.label {
+		flex: 1;
+	}
+	.badge {
+		min-width: 1.25rem;
+		padding: 0 0.35rem;
+		font-size: 0.75rem;
+		font-weight: 600;
+		text-align: center;
+		color: var(--tern-fg);
+		background: var(--tern-surface-2);
+		border-radius: 1rem;
+	}
+	.sub {
+		margin: 0.125rem 0 0.25rem 1.45rem;
+		padding-left: 0.6rem;
+		border-left: 1px solid var(--tern-border);
+	}
+	.sub .link {
+		min-height: 1.875rem;
+	}
+	.footer {
+		padding-top: 0.75rem;
+		border-top: 1px solid var(--tern-border);
+	}
+	.main {
+		min-width: 0;
+	}
+	.mobilebar {
+		display: none;
+	}
+	@media (max-width: 48rem) {
+		.tern-sidebar-layout,
+		.collapsed {
+			grid-template-columns: 1fr;
+		}
+		.sidebar {
+			display: none;
+		}
+		.mobilebar {
+			position: sticky;
+			top: 0;
+			z-index: 10;
+			display: flex;
+			align-items: center;
+			gap: 0.5rem;
+			padding: 0.5rem 0.75rem;
+			background: var(--tern-surface);
+			border-bottom: 1px solid var(--tern-border);
+		}
+	}
+	:global(.tern-sidebar-sheet.left) {
+		width: min(18rem, 100vw - 3rem);
+	}
+</style>

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

@@ -0,0 +1,35 @@
+import type { Snippet } from 'svelte';
+export type SidebarLink = {
+    label: string;
+    href: string;
+    /** An icon, shown alone when the sidebar is collapsed. */
+    icon?: Snippet;
+    /** A count or label after the link, such as "3". */
+    badge?: string;
+    /** Links under this one, shown while it or one of them is current. */
+    items?: {
+        label: string;
+        href: string;
+    }[];
+};
+export type SidebarGroup = {
+    label?: string;
+    items: SidebarLink[];
+};
+type Props = {
+    groups: SidebarGroup[];
+    /** The app's name or logo, at the top. */
+    header?: Snippet;
+    /** Things at the bottom, such as the signed-in user. */
+    footer?: Snippet;
+    /** Show icons only on wide screens; bind it. */
+    collapsed?: boolean;
+    /** Names the navigation. */
+    label?: string;
+    /** The page's content, next to the sidebar. */
+    children: Snippet;
+    class?: string;
+};
+declare const Sidebar: import("svelte").Component<Props, {}, "collapsed">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/ui/SignIn.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { FormField } from '../runtime/validate.js';
+	import Alert from './Alert.svelte';
+	import Button from './Button.svelte';
+	import Checkbox from './Checkbox.svelte';
+	import Field from './Field.svelte';
+	import Form from './Form.svelte';
+	import Input from './Input.svelte';
+	import PasswordInput from './PasswordInput.svelte';
+	import Separator from './Separator.svelte';
+
+	type Props = {
+		title?: string;
+		description?: string;
+		/** The heading level; 1 when this is the page's main content. */
+		level?: 1 | 2 | 3;
+		/** Providers from plugins/oauth, such as plugin.Providers(): each links to /auth/<name>/login. */
+		providers?: { name: string; label: string }[];
+		/** Where plugins/oauth lives. */
+		authPath?: string;
+		/** Where to go after signing in, a path on this site. */
+		next?: string;
+		/** Show the email and password form, which posts to action. */
+		password?: boolean;
+		action?: string;
+		/** The sign-in action's rules, from ./$forms. */
+		rules?: FormField[];
+		/** The page's form prop, for the server's errors. */
+		form?: unknown;
+		/** The ?error= code plugins/oauth sends back after a failed sign-in. */
+		error?: string | null;
+		/** A "Keep me signed in" checkbox, posted as remember. */
+		remember?: boolean;
+		/** Where to reset a forgotten password. */
+		forgotHref?: string;
+		/** Where to create an account. */
+		signUpHref?: string;
+		/** More content under the form, such as legal text. */
+		footer?: Snippet;
+		class?: string;
+	};
+	let {
+		title = 'Sign in',
+		description,
+		level = 1,
+		providers = [],
+		authPath = '/auth',
+		next,
+		password = true,
+		action,
+		rules,
+		form,
+		error,
+		remember = false,
+		forgotHref,
+		signUpHref,
+		footer,
+		class: klass = ''
+	}: Props = $props();
+
+	let submitting = $state(false);
+	const errorText = $derived(
+		!error ? null : error === 'access_denied' ? 'You cancelled the sign-in. Try again when you’re ready.' : 'Signing in didn’t work. Try again, or choose another way.'
+	);
+	const login = (name: string) => `${authPath}/${encodeURIComponent(name)}/login${next ? `?next=${encodeURIComponent(next)}` : ''}`;
+</script>
+
+<section class="tern-auth {klass}" aria-labelledby="tern-signin-title">
+	<header>
+		<svelte:element this={`h${level}`} id="tern-signin-title">{title}</svelte:element>
+		{#if description}<p>{description}</p>{/if}
+	</header>
+	{#if errorText}<Alert tone="danger" live>{errorText}</Alert>{/if}
+	{#if providers.length}
+		<div class="providers">
+			{#each providers as p (p.name)}
+				<Button variant="secondary" href={login(p.name)}>Continue with {p.label}</Button>
+			{/each}
+		</div>
+	{/if}
+	{#if providers.length && password}<div class="or"><Separator /><span>or</span><Separator /></div>{/if}
+	{#if password}
+		<Form {rules} {form} {action} bind:submitting reset={false}>
+			{#if next}<input type="hidden" name="next" value={next} />{/if}
+			<Field label="Email" name="email">
+				<Input type="email" autocomplete="username" spellcheck="false" />
+			</Field>
+			<Field label="Password" name="password">
+				<PasswordInput autocomplete="current-password" />
+			</Field>
+			<div class="row">
+				{#if remember}<Checkbox name="remember">Keep me signed in</Checkbox>{/if}
+				{#if forgotHref}<a href={forgotHref}>Forgot your password?</a>{/if}
+			</div>
+			<Button type="submit" loading={submitting}>Sign in</Button>
+		</Form>
+	{/if}
+	{#if signUpHref}<p class="switch">New here? <a href={signUpHref}>Create an account</a></p>{/if}
+	{#if footer}<div class="footer">{@render footer()}</div>{/if}
+</section>
+
+<style>
+	.tern-auth {
+		display: grid;
+		gap: 1.25rem;
+		width: 100%;
+		max-width: 24rem;
+		box-sizing: border-box;
+		padding: 2rem;
+		color: var(--tern-fg);
+		background: var(--tern-surface);
+		border: 1px solid var(--tern-border);
+		border-radius: calc(var(--tern-radius) + 4px);
+		box-shadow: var(--tern-shadow);
+	}
+	header {
+		display: grid;
+		gap: 0.35rem;
+	}
+	:is(h1, h2, h3) {
+		margin: 0;
+		font-size: 1.375rem;
+		font-weight: 650;
+		letter-spacing: -0.02em;
+	}
+	header p {
+		margin: 0;
+		color: var(--tern-muted);
+		font-size: 0.875rem;
+	}
+	.providers {
+		display: grid;
+		gap: 0.5rem;
+	}
+	.providers :global(.tern-btn) {
+		width: 100%;
+	}
+	.or {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		color: var(--tern-muted);
+		font-size: 0.8125rem;
+	}
+	.or :global(.tern-separator) {
+		flex: 1;
+	}
+	.row {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+		font-size: 0.875rem;
+	}
+	.row:empty {
+		display: none;
+	}
+	a {
+		color: var(--tern-accent);
+		font-weight: 550;
+	}
+	a:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 2px;
+		border-radius: 2px;
+	}
+	.switch {
+		margin: 0;
+		text-align: center;
+		font-size: 0.875rem;
+		color: var(--tern-muted);
+	}
+	.footer {
+		font-size: 0.8125rem;
+		color: var(--tern-muted);
+	}
+	.tern-auth :global(.tern-form > .tern-btn) {
+		width: 100%;
+	}
+</style>

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

@@ -0,0 +1,38 @@
+import type { Snippet } from 'svelte';
+import type { FormField } from '../runtime/validate.js';
+type Props = {
+    title?: string;
+    description?: string;
+    /** The heading level; 1 when this is the page's main content. */
+    level?: 1 | 2 | 3;
+    /** Providers from plugins/oauth, such as plugin.Providers(): each links to /auth/<name>/login. */
+    providers?: {
+        name: string;
+        label: string;
+    }[];
+    /** Where plugins/oauth lives. */
+    authPath?: string;
+    /** Where to go after signing in, a path on this site. */
+    next?: string;
+    /** Show the email and password form, which posts to action. */
+    password?: boolean;
+    action?: string;
+    /** The sign-in action's rules, from ./$forms. */
+    rules?: FormField[];
+    /** The page's form prop, for the server's errors. */
+    form?: unknown;
+    /** The ?error= code plugins/oauth sends back after a failed sign-in. */
+    error?: string | null;
+    /** A "Keep me signed in" checkbox, posted as remember. */
+    remember?: boolean;
+    /** Where to reset a forgotten password. */
+    forgotHref?: string;
+    /** Where to create an account. */
+    signUpHref?: string;
+    /** More content under the form, such as legal text. */
+    footer?: Snippet;
+    class?: string;
+};
+declare const SignIn: import("svelte").Component<Props, {}, "">;
+type SignIn = ReturnType<typeof SignIn>;
+export default SignIn;

package/dist/ui/SignUp.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { FormField } from '../runtime/validate.js';
+	import Button from './Button.svelte';
+	import Checkbox from './Checkbox.svelte';
+	import Field from './Field.svelte';
+	import Form from './Form.svelte';
+	import Input from './Input.svelte';
+	import PasswordInput from './PasswordInput.svelte';
+
+	type Props = {
+		title?: string;
+		description?: string;
+		level?: 1 | 2 | 3;
+		action?: string;
+		/** The sign-up action's rules, from ./$forms; they also set the password hint. */
+		rules?: FormField[];
+		form?: unknown;
+		/** Ask for a name, posted as name. */
+		name?: boolean;
+		/** Ask to type the password twice, posted as confirm. */
+		confirm?: boolean;
+		/** Links to the terms; then a checkbox, posted as terms, must be checked. */
+		termsHref?: string;
+		signInHref?: string;
+		footer?: Snippet;
+		class?: string;
+	};
+	let { title = 'Create an account', description, level = 1, action, rules, form, name = true, confirm = false, termsHref, signInHref, footer, class: klass = '' }: Props = $props();
+
+	let submitting = $state(false);
+	const minPassword = $derived(rules?.find((f) => f.name === 'password')?.rules?.find((r) => r.name === 'min')?.arg);
+</script>
+
+<section class="tern-auth {klass}" aria-labelledby="tern-signup-title">
+	<header>
+		<svelte:element this={`h${level}`} id="tern-signup-title">{title}</svelte:element>
+		{#if description}<p>{description}</p>{/if}
+	</header>
+	<Form {rules} {form} {action} bind:submitting reset={false}>
+		{#if name}
+			<Field label="Name" name="name"><Input autocomplete="name" /></Field>
+		{/if}
+		<Field label="Email" name="email"><Input type="email" autocomplete="email" spellcheck="false" /></Field>
+		<Field label="Password" name="password" description={minPassword ? `At least ${minPassword} characters.` : undefined}>
+			<PasswordInput autocomplete="new-password" />
+		</Field>
+		{#if confirm}
+			<Field label="Confirm password" name="confirm"><PasswordInput autocomplete="new-password" /></Field>
+		{/if}
+		{#if termsHref}
+			<Checkbox name="terms">I agree to the <a href={termsHref}>terms</a></Checkbox>
+		{/if}
+		<Button type="submit" loading={submitting}>Create account</Button>
+	</Form>
+	{#if signInHref}<p class="switch">Already have an account? <a href={signInHref}>Sign in</a></p>{/if}
+	{#if footer}<div class="footer">{@render footer()}</div>{/if}
+</section>
+
+<style>
+	.tern-auth {
+		display: grid;
+		gap: 1.25rem;
+		width: 100%;
+		max-width: 24rem;
+		box-sizing: border-box;
+		padding: 2rem;
+		color: var(--tern-fg);
+		background: var(--tern-surface);
+		border: 1px solid var(--tern-border);
+		border-radius: calc(var(--tern-radius) + 4px);
+		box-shadow: var(--tern-shadow);
+	}
+	header {
+		display: grid;
+		gap: 0.35rem;
+	}
+	:is(h1, h2, h3) {
+		margin: 0;
+		font-size: 1.375rem;
+		font-weight: 650;
+		letter-spacing: -0.02em;
+	}
+	header p {
+		margin: 0;
+		color: var(--tern-muted);
+		font-size: 0.875rem;
+	}
+	a {
+		color: var(--tern-accent);
+		font-weight: 550;
+	}
+	.switch {
+		margin: 0;
+		text-align: center;
+		font-size: 0.875rem;
+		color: var(--tern-muted);
+	}
+	.footer {
+		font-size: 0.8125rem;
+		color: var(--tern-muted);
+	}
+	.tern-auth :global(.tern-form > .tern-btn) {
+		width: 100%;
+	}
+</style>

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

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import type { FormField } from '../runtime/validate.js';
+type Props = {
+    title?: string;
+    description?: string;
+    level?: 1 | 2 | 3;
+    action?: string;
+    /** The sign-up action's rules, from ./$forms; they also set the password hint. */
+    rules?: FormField[];
+    form?: unknown;
+    /** Ask for a name, posted as name. */
+    name?: boolean;
+    /** Ask to type the password twice, posted as confirm. */
+    confirm?: boolean;
+    /** Links to the terms; then a checkbox, posted as terms, must be checked. */
+    termsHref?: string;
+    signInHref?: string;
+    footer?: Snippet;
+    class?: string;
+};
+declare const SignUp: import("svelte").Component<Props, {}, "">;
+type SignUp = ReturnType<typeof SignUp>;
+export default SignUp;

package/dist/ui/Skeleton.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	type Props = { width?: string; height?: string; radius?: string; class?: string };
+	let { width = '100%', height = '1rem', radius = 'var(--tern-radius-sm)', class: klass = '' }: Props = $props();
+</script>
+
+<!-- Decorative: pair it with a status message, such as aria-busy on the region it stands in for. -->
+<span class="tern-skeleton {klass}" aria-hidden="true" style:width style:height style:border-radius={radius}></span>
+
+<style>
+	.tern-skeleton {
+		display: block;
+		background: linear-gradient(90deg, var(--tern-surface-2) 25%, color-mix(in oklch, var(--tern-surface-2) 60%, var(--tern-border)) 50%, var(--tern-surface-2) 75%);
+		background-size: 200% 100%;
+		animation: shimmer 1.4s ease-in-out infinite;
+	}
+	@keyframes shimmer {
+		from {
+			background-position: 100% 0;
+		}
+		to {
+			background-position: -100% 0;
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.tern-skeleton {
+			animation: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,9 @@
+type Props = {
+    width?: string;
+    height?: string;
+    radius?: string;
+    class?: string;
+};
+declare const Skeleton: import("svelte").Component<Props, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;