@vit-foundation/ui 0.1.0

package/dist/components/ui/RichText.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+	import { renderBody } from '../../content/richtext.js';
+	import { getEditAdapter } from '../../edit/context.js';
+	import type { EditDescriptor } from '../../edit/types.js';
+	import Button from './Button.svelte';
+	import GhostButton from './GhostButton.svelte';
+
+	/**
+	 * Renders the block mini-format (`## ` subheadings, blank-line paragraphs)
+	 * with real elements — never `{@html}`.
+	 *
+	 * With an `edit` descriptor and an active adapter it offers a source
+	 * editor: the mini-format *is* the stored format, so a textarea over the
+	 * raw body with a live preview underneath is the honest v1. A block-level
+	 * WYSIWYG is future work; the save contract would not change.
+	 */
+	interface Props {
+		body: string;
+		/** Marks the body editable where an edit adapter is active. */
+		edit?: EditDescriptor;
+	}
+
+	let { body, edit }: Props = $props();
+
+	const adapter = getEditAdapter();
+	const canEdit = $derived(edit !== undefined && (adapter?.isEditing ?? false));
+
+	/** Last persisted body: what renders, and what Cancel·la returns to. */
+	// svelte-ignore state_referenced_locally
+	let savedBody = $state(body);
+	let draft = $state('');
+	let isOpen = $state(false);
+	let status = $state<'idle' | 'saving' | 'error'>('idle');
+
+	// Follow the prop when the app reloads content — and only then (after a
+	// save, savedBody has legitimately advanced past the prop). Never over an
+	// open editor.
+	// svelte-ignore state_referenced_locally
+	let lastPropBody = $state(body);
+	$effect(() => {
+		if (body !== lastPropBody) {
+			lastPropBody = body;
+			if (!isOpen) savedBody = body;
+		}
+	});
+
+	const blocks = $derived(renderBody(savedBody));
+	const preview = $derived(renderBody(draft));
+
+	function open(): void {
+		draft = savedBody;
+		status = 'idle';
+		isOpen = true;
+	}
+
+	function cancel(): void {
+		isOpen = false;
+		status = 'idle';
+	}
+
+	async function save(): Promise<void> {
+		if (!edit || !adapter) return;
+		status = 'saving';
+		try {
+			await adapter.save(edit, draft);
+			savedBody = draft;
+			isOpen = false;
+			status = 'idle';
+		} catch {
+			// The draft stays in the textarea; the reader decides whether to retry.
+			status = 'error';
+		}
+	}
+</script>
+
+{#if canEdit && isOpen}
+	<div class="editor">
+		<textarea
+			class="control"
+			bind:value={draft}
+			rows={Math.max(6, draft.split('\n').length + 1)}
+			aria-label={edit?.label ?? 'Edita el contingut'}
+		></textarea>
+		<div class="actions">
+			<Button pending={status === 'saving' ? 1 : 0} onclick={() => void save()}>Desa</Button>
+			<GhostButton onclick={cancel}>Cancel·la</GhostButton>
+			{#if status === 'error'}
+				<p class="error" role="alert">Error en desar. Torna-ho a provar.</p>
+			{/if}
+		</div>
+		<div class="richtext preview" aria-label="Vista prèvia">
+			{#each preview as block, index (index)}
+				{#if block.type === 'h2'}
+					<h2>{block.text}</h2>
+				{:else}
+					<p>{block.text}</p>
+				{/if}
+			{/each}
+		</div>
+	</div>
+{:else}
+	<div class="richtext">
+		{#each blocks as block, index (index)}
+			{#if block.type === 'h2'}
+				<h2>{block.text}</h2>
+			{:else}
+				<p>{block.text}</p>
+			{/if}
+		{/each}
+		{#if canEdit}
+			<p class="edit-row"><GhostButton onclick={open}>Edita</GhostButton></p>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.richtext {
+		max-width: 65ch;
+	}
+
+	h2 {
+		font-size: var(--text-lg);
+		margin-block: var(--space-4) var(--space-2);
+	}
+
+	.editor {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-3);
+		max-width: 65ch;
+	}
+
+	textarea {
+		width: 100%;
+		padding: var(--space-2) var(--space-3);
+		font: inherit;
+		resize: vertical;
+	}
+
+	.actions {
+		display: flex;
+		align-items: center;
+		gap: var(--space-2);
+	}
+
+	.error {
+		margin: 0;
+		color: var(--series-8);
+		font-size: var(--text-sm);
+	}
+
+	.preview {
+		border-top: 1px dashed var(--color-hairline);
+		padding-top: var(--space-3);
+	}
+
+	.edit-row {
+		margin: var(--space-2) 0 0;
+	}
+</style>

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

@@ -0,0 +1,18 @@
+import type { EditDescriptor } from '../../edit/types.js';
+/**
+ * Renders the block mini-format (`## ` subheadings, blank-line paragraphs)
+ * with real elements — never `{@html}`.
+ *
+ * With an `edit` descriptor and an active adapter it offers a source
+ * editor: the mini-format *is* the stored format, so a textarea over the
+ * raw body with a live preview underneath is the honest v1. A block-level
+ * WYSIWYG is future work; the save contract would not change.
+ */
+interface Props {
+    body: string;
+    /** Marks the body editable where an edit adapter is active. */
+    edit?: EditDescriptor;
+}
+declare const RichText: import("svelte").Component<Props, {}, "">;
+type RichText = ReturnType<typeof RichText>;
+export default RichText;

package/dist/components/ui/SearchInput.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	interface Props {
+		/** Ties the label to the input; override when a page renders two. */
+		id?: string;
+		value?: string;
+		placeholder: string;
+		label: string;
+		/** Called after the debounce delay with the trimmed query. */
+		onsearch: (query: string) => void;
+		debounceMs?: number;
+	}
+
+	const DEFAULT_DEBOUNCE_MS = 300;
+
+	let {
+		id = 'search-input',
+		value = '',
+		placeholder,
+		label,
+		onsearch,
+		debounceMs = DEFAULT_DEBOUNCE_MS
+	}: Props = $props();
+
+	// svelte-ignore state_referenced_locally
+	let query = $state(value);
+	let timer: ReturnType<typeof setTimeout> | undefined;
+
+	/**
+	 * The last query this input reported, so it can tell its own echo from a
+	 * new value. The caller writes what we emit back into `value`, and on the
+	 * weeklies index that round trip lands mid-debounce: adopting `value`
+	 * unconditionally would overwrite the characters typed since.
+	 */
+	// svelte-ignore state_referenced_locally
+	let emitted = $state(value);
+
+	// `value` seeds the field and then follows it, but only when the caller
+	// reports something this input did not ask for — a navigation that changed
+	// the filters. Without this the box kept the previous page's search text
+	// while the results below it came back unfiltered.
+	$effect(() => {
+		if (value !== emitted) {
+			query = value;
+			emitted = value;
+		}
+	});
+
+	function emit(): void {
+		emitted = query.trim();
+		onsearch(emitted);
+	}
+
+	function handleInput(): void {
+		clearTimeout(timer);
+		timer = setTimeout(emit, debounceMs);
+	}
+
+	// The pending timer outlives the component without this. Typing and then
+	// clicking a result within the debounce window fired `onsearch` from a
+	// destroyed input, and on the weeklies index that writes the query back to
+	// the URL — rewriting the address bar of whatever page the reader had just
+	// navigated to.
+	$effect(() => () => clearTimeout(timer));
+
+	function handleSubmit(event: SubmitEvent): void {
+		event.preventDefault();
+		clearTimeout(timer);
+		emit();
+	}
+</script>
+
+<form role="search" onsubmit={handleSubmit}>
+	<label class="visually-hidden" for={id}>{label}</label>
+	<input
+		{id}
+		class="control"
+		type="search"
+		{placeholder}
+		bind:value={query}
+		oninput={handleInput}
+	/>
+</form>
+
+<style>
+	input {
+		width: 100%;
+		max-width: 24rem;
+		padding: var(--space-2) var(--space-3);
+	}
+</style>

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

@@ -0,0 +1,13 @@
+interface Props {
+    /** Ties the label to the input; override when a page renders two. */
+    id?: string;
+    value?: string;
+    placeholder: string;
+    label: string;
+    /** Called after the debounce delay with the trimmed query. */
+    onsearch: (query: string) => void;
+    debounceMs?: number;
+}
+declare const SearchInput: import("svelte").Component<Props, {}, "">;
+type SearchInput = ReturnType<typeof SearchInput>;
+export default SearchInput;

package/dist/components/ui/ShareRow.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { getUiConfig } from '../../config/context.js';
+	import GhostButton from './GhostButton.svelte';
+
+	/**
+	 * The page URL and the clipboard are parameters, not module-scope reads.
+	 * The remote forms already substitute this way (`form?: typeof defaultForm`);
+	 * routing state never did, which is why the copy branches below — the reset
+	 * timeout and the rejected write — had no test.
+	 */
+	interface Props {
+		/** Title used in the share text. */
+		title: string;
+		/** The URL being shared. Only tests and stories pass one. */
+		url?: string;
+		/** Only tests and stories pass one. */
+		writeClipboard?: (text: string) => Promise<void>;
+		/** How long the "copied" confirmation stays up. */
+		copiedResetMs?: number;
+	}
+
+	let {
+		title,
+		url = undefined,
+		writeClipboard = (text) => navigator.clipboard.writeText(text),
+		copiedResetMs = 2000
+	}: Props = $props();
+
+	const config = getUiConfig();
+	const msg = $derived(config.messages);
+
+	let isCopied = $state(false);
+
+	const shareUrl = $derived(url ?? config.url()?.href ?? '');
+	const encodedUrl = $derived(encodeURIComponent(shareUrl));
+	const encodedTitle = $derived(encodeURIComponent(title));
+
+	async function copyLink(): Promise<void> {
+		try {
+			await writeClipboard(shareUrl);
+			isCopied = true;
+			setTimeout(() => (isCopied = false), copiedResetMs);
+		} catch {
+			isCopied = false;
+		}
+	}
+</script>
+
+<div class="share">
+	<span class="label">{msg.share_label()}</span>
+	<a
+		href={`https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedTitle}`}
+		rel="external noopener"
+		target="_blank"
+	>
+		X
+	</a>
+	<a
+		href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`}
+		rel="external noopener"
+		target="_blank"
+	>
+		LinkedIn
+	</a>
+	<GhostButton class="copy" onclick={copyLink}>
+		{isCopied ? msg.share_copied() : msg.share_copyLink()}
+	</GhostButton>
+	<span class="visually-hidden" role="status">{isCopied ? msg.share_copied() : ''}</span>
+</div>
+
+<style>
+	.share {
+		display: flex;
+		align-items: center;
+		gap: var(--space-3);
+		padding-block: var(--space-3);
+		border-top: 1px solid var(--color-hairline);
+	}
+
+	.label {
+		font-weight: 700;
+	}
+
+	a {
+		color: var(--color-ink-secondary);
+	}
+
+	.share :global(button.copy) {
+		color: var(--color-ink-secondary);
+	}
+
+	.share :global(button.copy:hover) {
+		color: var(--color-brand);
+	}
+</style>

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

@@ -0,0 +1,19 @@
+/**
+ * The page URL and the clipboard are parameters, not module-scope reads.
+ * The remote forms already substitute this way (`form?: typeof defaultForm`);
+ * routing state never did, which is why the copy branches below — the reset
+ * timeout and the rejected write — had no test.
+ */
+interface Props {
+    /** Title used in the share text. */
+    title: string;
+    /** The URL being shared. Only tests and stories pass one. */
+    url?: string;
+    /** Only tests and stories pass one. */
+    writeClipboard?: (text: string) => Promise<void>;
+    /** How long the "copied" confirmation stays up. */
+    copiedResetMs?: number;
+}
+declare const ShareRow: import("svelte").Component<Props, {}, "">;
+type ShareRow = ReturnType<typeof ShareRow>;
+export default ShareRow;

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

@@ -0,0 +1,17 @@
+export { default as Button } from './Button.svelte';
+export { default as CardMedia } from './CardMedia.svelte';
+export { default as CardTitle } from './CardTitle.svelte';
+export { default as CopyIntro } from './CopyIntro.svelte';
+export { default as DateText } from './DateText.svelte';
+export { default as DecorShapes } from './DecorShapes.svelte';
+export { default as Field } from './Field.svelte';
+export { default as FilterChips } from './FilterChips.svelte';
+export { default as FormErrorFeedback } from './FormErrorFeedback.svelte';
+export { default as FormFeedback } from './FormFeedback.svelte';
+export { default as FormResultSlot } from './FormResultSlot.svelte';
+export { default as GhostButton } from './GhostButton.svelte';
+export { default as Link } from './Link.svelte';
+export { default as Pagination } from './Pagination.svelte';
+export { default as RichText } from './RichText.svelte';
+export { default as SearchInput } from './SearchInput.svelte';
+export { default as ShareRow } from './ShareRow.svelte';

package/dist/components/ui/index.js

@@ -0,0 +1,17 @@
+export { default as Button } from './Button.svelte';
+export { default as CardMedia } from './CardMedia.svelte';
+export { default as CardTitle } from './CardTitle.svelte';
+export { default as CopyIntro } from './CopyIntro.svelte';
+export { default as DateText } from './DateText.svelte';
+export { default as DecorShapes } from './DecorShapes.svelte';
+export { default as Field } from './Field.svelte';
+export { default as FilterChips } from './FilterChips.svelte';
+export { default as FormErrorFeedback } from './FormErrorFeedback.svelte';
+export { default as FormFeedback } from './FormFeedback.svelte';
+export { default as FormResultSlot } from './FormResultSlot.svelte';
+export { default as GhostButton } from './GhostButton.svelte';
+export { default as Link } from './Link.svelte';
+export { default as Pagination } from './Pagination.svelte';
+export { default as RichText } from './RichText.svelte';
+export { default as SearchInput } from './SearchInput.svelte';
+export { default as ShareRow } from './ShareRow.svelte';

package/dist/components/weeklies/SortSelect.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { getUiConfig } from '../../config/context.js';
+	import type { SortDirection } from '../../content/types.js';
+
+	interface Props {
+		value: SortDirection;
+		onchange: (value: SortDirection) => void;
+	}
+
+	let { value, onchange }: Props = $props();
+
+	const config = getUiConfig();
+	const msg = $derived(config.messages);
+
+	function handleChange(event: Event): void {
+		const target = event.currentTarget as HTMLSelectElement;
+		onchange(target.value === 'asc' ? 'asc' : 'desc');
+	}
+</script>
+
+<label>
+	<span>{msg.weeklies_sortLabel()}</span>
+	<select class="control" {value} onchange={handleChange}>
+		<option value="desc">{msg.weeklies_sortDesc()}</option>
+		<option value="asc">{msg.weeklies_sortAsc()}</option>
+	</select>
+</label>
+
+<style>
+	label {
+		display: inline-flex;
+		flex-direction: column;
+		gap: var(--space-1);
+		font-size: var(--text-sm);
+		color: var(--color-ink-secondary);
+	}
+
+	select {
+		padding: var(--space-1) var(--space-2);
+		font-weight: 600;
+	}
+</style>

package/dist/components/weeklies/SortSelect.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { SortDirection } from '../../content/types.js';
+interface Props {
+    value: SortDirection;
+    onchange: (value: SortDirection) => void;
+}
+declare const SortSelect: import("svelte").Component<Props, {}, "">;
+type SortSelect = ReturnType<typeof SortSelect>;
+export default SortSelect;

package/dist/components/weeklies/WeeklieCard.svelte

@@ -0,0 +1,82 @@
+<script module lang="ts">
+	import type { EditDescriptor } from '../../edit/types.js';
+
+	/** Which of the card's localized fields are editable at this render site. */
+	export interface WeeklyEditMap {
+		title?: EditDescriptor;
+		excerpt?: EditDescriptor;
+	}
+</script>
+
+<script lang="ts">
+	import { getUiConfig } from '../../config/context.js';
+	import type { WeeklyCardData } from '../../content/types.js';
+	import { getEditAdapter } from '../../edit/context.js';
+	import Editable from '../../edit/Editable.svelte';
+	import CardMedia from '../ui/CardMedia.svelte';
+	import CardTitle from '../ui/CardTitle.svelte';
+	import DateText from '../ui/DateText.svelte';
+	import Link from '../ui/Link.svelte';
+
+	interface Props {
+		weekly: WeeklyCardData;
+		/** Marks fields editable where an edit adapter is active. */
+		edit?: WeeklyEditMap;
+	}
+
+	let { weekly, edit }: Props = $props();
+
+	const config = getUiConfig();
+	const adapter = getEditAdapter();
+
+	// While the title is being edited it renders as plain text, not a link:
+	// a contenteditable inside an anchor still navigates on click, which
+	// would throw the editor off the page mid-draft.
+	const titleEditing = $derived(edit?.title !== undefined && (adapter?.isEditing ?? false));
+</script>
+
+<article>
+	<header>
+		<span class="number">{config.messages.weeklie_number({ number: weekly.number })}</span>
+		<DateText value={weekly.publishedOn} />
+	</header>
+	<CardMedia src={weekly.imageUrl} alt="" ratio="1 / 1" width="600" height="600" />
+	<CardTitle>
+		{#if titleEditing}
+			<Editable edit={edit?.title} value={weekly.title}>
+				{#snippet children(text, attrs)}<span {...attrs}>{text}</span>{/snippet}
+			</Editable>
+		{:else}
+			<Link href={`/weeklies/${weekly.slug}`}>{weekly.title}</Link>
+		{/if}
+	</CardTitle>
+	<Editable edit={edit?.excerpt} value={weekly.excerpt}>
+		{#snippet children(text, attrs)}<p {...attrs}>{text}</p>{/snippet}
+	</Editable>
+</article>
+
+<style>
+	article {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-2);
+	}
+
+	header {
+		display: flex;
+		justify-content: space-between;
+		align-items: baseline;
+		font-size: var(--text-sm);
+		color: var(--color-ink-secondary);
+	}
+
+	.number {
+		font-weight: 700;
+	}
+
+	p {
+		margin: 0;
+		color: var(--color-ink-secondary);
+		font-size: var(--text-sm);
+	}
+</style>

package/dist/components/weeklies/WeeklieCard.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { EditDescriptor } from '../../edit/types.js';
+/** Which of the card's localized fields are editable at this render site. */
+export interface WeeklyEditMap {
+    title?: EditDescriptor;
+    excerpt?: EditDescriptor;
+}
+import type { WeeklyCardData } from '../../content/types.js';
+interface Props {
+    weekly: WeeklyCardData;
+    /** Marks fields editable where an edit adapter is active. */
+    edit?: WeeklyEditMap;
+}
+declare const WeeklieCard: import("svelte").Component<Props, {}, "">;
+type WeeklieCard = ReturnType<typeof WeeklieCard>;
+export default WeeklieCard;

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

@@ -0,0 +1,3 @@
+export { default as SortSelect } from './SortSelect.svelte';
+export { default as WeeklieCard } from './WeeklieCard.svelte';
+export type { WeeklyEditMap } from './WeeklieCard.svelte';

package/dist/components/weeklies/index.js

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

package/dist/config/UiProvider.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { setUiConfig } from './context.js';
+	import type { UiConfigInput } from './types.js';
+
+	/**
+	 * Mounts the host app's UiConfig for everything beneath it — typically
+	 * once, in the root layout. The config prop is read lazily on every
+	 * access, so reactive inputs (current locale, current URL) stay live.
+	 */
+	interface Props {
+		config: UiConfigInput;
+		children: Snippet;
+	}
+
+	let { config, children }: Props = $props();
+
+	setUiConfig(() => config);
+</script>
+
+{@render children()}

package/dist/config/UiProvider.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { UiConfigInput } from './types.js';
+/**
+ * Mounts the host app's UiConfig for everything beneath it — typically
+ * once, in the root layout. The config prop is read lazily on every
+ * access, so reactive inputs (current locale, current URL) stay live.
+ */
+interface Props {
+    config: UiConfigInput;
+    children: Snippet;
+}
+declare const UiProvider: import("svelte").Component<Props, {}, "">;
+type UiProvider = ReturnType<typeof UiProvider>;
+export default UiProvider;

package/dist/config/context.d.ts

@@ -0,0 +1,17 @@
+import { type UiConfig, type UiConfigInput } from './types.js';
+/**
+ * The provider-less config: identity hrefs, Catalan, no router. Complete on
+ * purpose — every component must render without a provider, which is what
+ * keeps stories and component tests free of app wiring.
+ */
+export declare const DEFAULT_UI_CONFIG: UiConfig;
+/**
+ * Installs the app's config for the subtree. Takes a *thunk* so a provider
+ * whose input is a reactive prop stays live: the resolved object delegates
+ * every read back through `input()`, and Svelte's reactivity flows through
+ * the getters. Called by UiProvider; call it directly only from a layout-like
+ * component's init.
+ */
+export declare function setUiConfig(input: () => UiConfigInput): UiConfig;
+/** The nearest provider's config, or the standalone defaults. */
+export declare function getUiConfig(): UiConfig;