@vit-foundation/ui 0.13.1 → 0.14.0

package/dist/components/account/NewsletterSignup.svelte

@@ -2,6 +2,8 @@
 	import { getUiConfig } from '../../config/context.js';
 	import ActionLabel from '../../edit/ActionLabel.svelte';
 	import Editable from '../../edit/Editable.svelte';
+	import LinkEdit from '../../edit/chrome/LinkEdit.svelte';
+	import { chromeProperty } from '../../edit/helpers.js';
 	import { withNewsletterIntent } from '../../forms/transport.js';
 	import type { NewsletterToggleFormInstance } from './AccountPanel.svelte';
 	import Button from '../ui/Button.svelte';
@@ -25,6 +27,19 @@
 	// verified — no app mail needed). Logged out, the band routes to the auth
 	// pages carrying the intent as ?newsletter=1 (never an email in a URL).
 	const f = $derived(newsletterToggleForm);
+
+	// The destinations are OPTIONAL catalog keys added after these components
+	// first shipped; a host without them keeps the built-in paths, and the
+	// intent query rides on whatever the key resolves to.
+	const signupHref = $derived(msg.comments_signupLinkHref?.() ?? '/signup');
+	const loginHref = $derived(msg.comments_loginLinkHref?.() ?? '/login');
+	// Gated like the form wording: descriptors exist only where the host
+	// exposes messageEdit; LinkEdit further requires saveProperty for the
+	// Adreça field.
+	const hrefProperty = (key: string) =>
+		config.messageEdit
+			? chromeProperty(key, { type: 'text', label: config.editMessages.edit_linkUrl() })
+			: undefined;
 </script>
 
 <section class="newsletter" aria-labelledby="newsletter-title">
@@ -44,23 +59,29 @@
 				>
 					{#snippet children(text, attrs)}<span {...attrs}>{text}</span>{/snippet}
 				</Editable>
-				<ActionLabel
-					edit={config.messageEdit?.('comments_signupLink')}
-					value={msg.comments_signupLink()}
+				<LinkEdit
+					text={{
+						edit: config.messageEdit?.('comments_signupLink'),
+						value: msg.comments_signupLink()
+					}}
+					href={{ descriptor: hrefProperty('comments_signupLinkHref'), value: signupHref }}
 				>
-					{#snippet control()}<Link href={withNewsletterIntent('/signup')}
+					{#snippet control()}<Link href={withNewsletterIntent(signupHref)}
 							>{msg.comments_signupLink()}</Link
 						>{/snippet}
-				</ActionLabel>
+				</LinkEdit>
 				·
-				<ActionLabel
-					edit={config.messageEdit?.('comments_loginLink')}
-					value={msg.comments_loginLink()}
+				<LinkEdit
+					text={{
+						edit: config.messageEdit?.('comments_loginLink'),
+						value: msg.comments_loginLink()
+					}}
+					href={{ descriptor: hrefProperty('comments_loginLinkHref'), value: loginHref }}
 				>
-					{#snippet control()}<Link href={withNewsletterIntent('/login')}
+					{#snippet control()}<Link href={withNewsletterIntent(loginHref)}
 							>{msg.comments_loginLink()}</Link
 						>{/snippet}
-				</ActionLabel>
+				</LinkEdit>
 			</p>
 		{:else if account.newsletterSubscribed}
 			<p class="prompt">

package/dist/components/weeklies/CommentSection.svelte

@@ -11,6 +11,8 @@
 <script lang="ts">
 	import { getUiConfig } from '../../config/context.js';
 	import ActionLabel from '../../edit/ActionLabel.svelte';
+	import LinkEdit from '../../edit/chrome/LinkEdit.svelte';
+	import { chromeProperty } from '../../edit/helpers.js';
 	import Editable from '../../edit/Editable.svelte';
 	import { COMMENT_BODY } from '../../forms/constraints.js';
 	import type { CommentData, CommentThreadData } from '../../content/types.js';
@@ -52,6 +54,14 @@
 	const main = $derived(commentForm);
 
 	const errorMessages = $derived({ unauthenticated: msg.comments_loginPrompt() });
+
+	// Optional catalog keys; hosts without them keep the built-in paths.
+	const signupHref = $derived(msg.comments_signupLinkHref?.() ?? '/signup');
+	const loginHref = $derived(msg.comments_loginLinkHref?.() ?? '/login');
+	const hrefProperty = (key: string) =>
+		config.messageEdit
+			? chromeProperty(key, { type: 'text', label: config.editMessages.edit_linkUrl() })
+			: undefined;
 </script>
 
 {#snippet commentMeta(comment: CommentData)}
@@ -180,19 +190,22 @@
 			>
 				{#snippet children(text, attrs)}<span {...attrs}>{text}</span>{/snippet}
 			</Editable>
-			<ActionLabel
-				edit={config.messageEdit?.('comments_loginLink')}
-				value={msg.comments_loginLink()}
+			<LinkEdit
+				text={{ edit: config.messageEdit?.('comments_loginLink'), value: msg.comments_loginLink() }}
+				href={{ descriptor: hrefProperty('comments_loginLinkHref'), value: loginHref }}
 			>
-				{#snippet control()}<Link href="/login">{msg.comments_loginLink()}</Link>{/snippet}
-			</ActionLabel>
+				{#snippet control()}<Link href={loginHref}>{msg.comments_loginLink()}</Link>{/snippet}
+			</LinkEdit>
 			·
-			<ActionLabel
-				edit={config.messageEdit?.('comments_signupLink')}
-				value={msg.comments_signupLink()}
+			<LinkEdit
+				text={{
+					edit: config.messageEdit?.('comments_signupLink'),
+					value: msg.comments_signupLink()
+				}}
+				href={{ descriptor: hrefProperty('comments_signupLinkHref'), value: signupHref }}
 			>
-				{#snippet control()}<Link href="/signup">{msg.comments_signupLink()}</Link>{/snippet}
-			</ActionLabel>
+				{#snippet control()}<Link href={signupHref}>{msg.comments_signupLink()}</Link>{/snippet}
+			</LinkEdit>
 		</p>
 	{/if}
 </section>

package/dist/config/edit-messages.d.ts

@@ -40,6 +40,12 @@ export interface EditMessages {
     edit_draftBadge(): string;
     edit_clearValue(): string;
     edit_emptyRequired(): string;
+    /** The link modal: one dialog edits a link's text and destination. */
+    edit_editLink(params: {
+        label: string;
+    }): string;
+    edit_linkText(): string;
+    edit_linkUrl(): string;
 }
 /**
  * Catalan defaults. The first three and the RichText strings reproduce the

package/dist/config/edit-messages.js

@@ -21,5 +21,8 @@ export const defaultEditMessages = {
     edit_uploadImage: () => 'Puja una imatge',
     edit_draftBadge: () => 'Esborrany',
     edit_clearValue: () => 'Buida el valor',
-    edit_emptyRequired: () => 'Aquest camp no pot quedar buit'
+    edit_emptyRequired: () => 'Aquest camp no pot quedar buit',
+    edit_editLink: ({ label }) => `Edita l’enllaç «${label}»`,
+    edit_linkText: () => 'Text',
+    edit_linkUrl: () => 'Adreça'
 };

package/dist/config/messages.js

@@ -82,6 +82,8 @@ export const defaultMessages = {
     comments_loginPrompt: () => 'Per comentar cal iniciar la sessió.',
     comments_loginLink: () => 'Inicia la sessió',
     comments_signupLink: () => 'Crea un compte',
+    comments_loginLinkHref: () => '/login',
+    comments_signupLinkHref: () => '/signup',
     reaction_like: () => "M'agrada",
     reaction_love: () => "M'encanta",
     reaction_clap: () => 'Aplaudiment',

package/dist/config/types.d.ts

@@ -114,6 +114,13 @@ export interface UiMessages {
     comments_loginPrompt(): string;
     comments_loginLink(): string;
     comments_signupLink(): string;
+    /**
+     * OPTIONAL — the login/signup destinations, added after the catalogs these
+     * components first shipped with. A host without the keys keeps the
+     * built-in /login and /signup paths, byte-identically.
+     */
+    comments_loginLinkHref?(): string;
+    comments_signupLinkHref?(): string;
     reaction_like(): string;
     reaction_love(): string;
     reaction_clap(): string;

package/dist/edit/chrome/LinkEdit.svelte

@@ -0,0 +1,187 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Button from '../../components/ui/Button.svelte';
+	import Icon from '../../components/ui/Icon.svelte';
+	import Modal from '../../components/ui/Modal.svelte';
+	import { getUiConfig } from '../../config/context.js';
+	import { getEditAdapter } from '../context.js';
+	import type { EditDescriptor, PropertyDescriptor } from '../types.js';
+
+	/**
+	 * A LINK edited whole: one modal for its text and its destination, instead
+	 * of an inline label swap plus a separate property panel — a link's two
+	 * halves belong to one gesture.
+	 *
+	 * While the adapter is editing and a text descriptor is supplied, the
+	 * control is REPLACED by a button wearing the label (the ActionLabel rule:
+	 * a caret or a click inside a live link would navigate mid-edit) that
+	 * opens the modal. Desa commits ONLY the halves that changed — the text
+	 * through `adapter.save`, the destination through `adapter.saveProperty` —
+	 * so a failure on one keeps the other's success and the modal stays open
+	 * with the reason. Without an adapter or a descriptor the control renders
+	 * untouched, byte-identical to a read-only build.
+	 */
+	interface Props {
+		/** Inline-label half; undefined leaves the control alone. */
+		text: { edit: EditDescriptor | undefined; value: string };
+		/** Destination half; undefined hides the Adreça field. */
+		href: { descriptor: PropertyDescriptor | undefined; value: string };
+		/** Accessible name for the modal, e.g. the link's current text. */
+		label?: string;
+		control: Snippet;
+	}
+
+	let { text, href, label = undefined, control }: Props = $props();
+
+	const adapter = getEditAdapter();
+	const config = getUiConfig();
+	const messages = $derived(config.editMessages);
+
+	const editing = $derived(text.edit !== undefined && (adapter?.isEditing ?? false));
+	// The Adreça field needs both a place to save to and a verb to save with.
+	const editsHref = $derived(href.descriptor !== undefined && adapter?.saveProperty !== undefined);
+
+	let open = $state(false);
+	let draftText = $state('');
+	let draftHref = $state('');
+	let saving = $state(false);
+	let error = $state<string | null>(null);
+
+	function show(): void {
+		draftText = text.value;
+		draftHref = href.value;
+		error = null;
+		open = true;
+	}
+
+	/** Escape/Cancel·la/backdrop: discard the drafts, keep the stored values. */
+	function cancel(): void {
+		if (saving) return;
+		open = false;
+	}
+
+	async function save(): Promise<void> {
+		if (!adapter || text.edit === undefined) return;
+		const nextText = draftText.trim();
+		const nextHref = draftHref.trim();
+		saving = true;
+		error = null;
+		try {
+			// Sequential on purpose: if the text lands and the address fails, the
+			// reseeded draft no longer differs, so a retry commits only what is
+			// still pending.
+			if (nextText !== text.value) {
+				await adapter.save(text.edit, nextText);
+				draftText = nextText;
+			}
+			if (editsHref && href.descriptor && nextHref !== href.value) {
+				await adapter.saveProperty!(href.descriptor, nextHref);
+				draftHref = nextHref;
+			}
+			open = false;
+		} catch (thrown) {
+			error =
+				thrown instanceof Error && thrown.message ? thrown.message : messages.edit_saveError();
+		} finally {
+			saving = false;
+		}
+	}
+</script>
+
+{#if editing}
+	<button
+		type="button"
+		class="link-swap"
+		data-vit-editing="idle"
+		aria-label={messages.edit_editLink({ label: label ?? text.value })}
+		onclick={show}
+	>
+		{text.value}
+		<Icon name="pencil" size={13} />
+	</button>
+	<Modal
+		{open}
+		title={messages.edit_editLink({ label: label ?? text.value })}
+		onclose={cancel}
+		closeLabel={messages.edit_close()}
+	>
+		<div class="fields">
+			<label>
+				<span>{messages.edit_linkText()}</span>
+				<input type="text" bind:value={draftText} disabled={saving} />
+			</label>
+			{#if editsHref}
+				<label>
+					<span>{messages.edit_linkUrl()}</span>
+					<!-- type=text, not url: site destinations are relative paths. -->
+					<input type="text" bind:value={draftHref} disabled={saving} />
+				</label>
+			{/if}
+		</div>
+		{#if error}
+			<p class="error" role="alert">{error}</p>
+		{/if}
+		<div class="actions">
+			<Button pending={saving ? 1 : 0} onclick={() => void save()}>{messages.edit_save()}</Button>
+			<Button variant="ghost" pending={null} onclick={cancel}>{messages.edit_cancel()}</Button>
+		</div>
+	</Modal>
+{:else}
+	{@render control()}
+{/if}
+
+<style>
+	/* The ActionLabel footprint plus a pencil hint: the same dashed affordance
+	   (base.css paints [data-vit-editing]), but a click OPENS rather than
+	   focuses — this swap is a button, never a caret. */
+	.link-swap {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-1);
+		padding: 0.2em 0.4em;
+		border: none;
+		background: transparent;
+		font: inherit;
+		color: inherit;
+		cursor: pointer;
+	}
+
+	.fields {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-3);
+	}
+
+	label {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-1);
+		font-size: var(--text-sm);
+		font-weight: 600;
+	}
+
+	/* PropertyRow's control look — the modal is the panel, relocated. */
+	input {
+		font: inherit;
+		font-size: var(--text-sm);
+		font-weight: 400;
+		color: var(--color-ink);
+		padding: var(--space-1) var(--space-2);
+		border: 1px solid var(--color-hairline);
+		border-radius: var(--radius);
+		background: var(--color-surface);
+		width: 100%;
+	}
+
+	.error {
+		margin: var(--space-3) 0 0;
+		color: var(--series-8);
+		font-size: var(--text-sm);
+	}
+
+	.actions {
+		display: flex;
+		gap: var(--space-2);
+		margin-top: var(--space-4);
+	}
+</style>

package/dist/edit/chrome/LinkEdit.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { Snippet } from 'svelte';
+import type { EditDescriptor, PropertyDescriptor } from '../types.js';
+/**
+ * A LINK edited whole: one modal for its text and its destination, instead
+ * of an inline label swap plus a separate property panel — a link's two
+ * halves belong to one gesture.
+ *
+ * While the adapter is editing and a text descriptor is supplied, the
+ * control is REPLACED by a button wearing the label (the ActionLabel rule:
+ * a caret or a click inside a live link would navigate mid-edit) that
+ * opens the modal. Desa commits ONLY the halves that changed — the text
+ * through `adapter.save`, the destination through `adapter.saveProperty` —
+ * so a failure on one keeps the other's success and the modal stays open
+ * with the reason. Without an adapter or a descriptor the control renders
+ * untouched, byte-identical to a read-only build.
+ */
+interface Props {
+    /** Inline-label half; undefined leaves the control alone. */
+    text: {
+        edit: EditDescriptor | undefined;
+        value: string;
+    };
+    /** Destination half; undefined hides the Adreça field. */
+    href: {
+        descriptor: PropertyDescriptor | undefined;
+        value: string;
+    };
+    /** Accessible name for the modal, e.g. the link's current text. */
+    label?: string;
+    control: Snippet;
+}
+declare const LinkEdit: import("svelte").Component<Props, {}, "">;
+type LinkEdit = ReturnType<typeof LinkEdit>;
+export default LinkEdit;

package/dist/edit/index.d.ts

@@ -7,6 +7,7 @@ export { default as EditFrame } from './chrome/EditFrame.svelte';
 export type { EditFrameSpec } from './chrome/EditFrame.svelte';
 export { default as EditPanel } from './chrome/EditPanel.svelte';
 export { default as EditPopover } from './chrome/EditPopover.svelte';
+export { default as LinkEdit } from './chrome/LinkEdit.svelte';
 export { chromeEdit, chromeProperty, collectionOf, entityEdit, entityProperty, pageCopyEdit } from './helpers.js';
 export { localize } from './types.js';
 export type { CollectionRef, ContentRef, EditableEntity, EditAdapter, EditDescriptor, EntityOp, LocalizedText, PropertyDescriptor, PropertyOption, PropertyType } from './types.js';

package/dist/edit/index.js

@@ -6,5 +6,6 @@ export { default as ConfirmDialog } from './chrome/ConfirmDialog.svelte';
 export { default as EditFrame } from './chrome/EditFrame.svelte';
 export { default as EditPanel } from './chrome/EditPanel.svelte';
 export { default as EditPopover } from './chrome/EditPopover.svelte';
+export { default as LinkEdit } from './chrome/LinkEdit.svelte';
 export { chromeEdit, chromeProperty, collectionOf, entityEdit, entityProperty, pageCopyEdit } from './helpers.js';
 export { localize } from './types.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vit-foundation/ui",
-	"version": "0.13.1",
+	"version": "0.14.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",