@vit-foundation/ui 0.13.1 → 0.15.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/layout/Footer.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
 	import { getUiConfig } from '../../config/context.js';
 	import type { SiteLink } from '../../config/types.js';
-	import ActionLabel from '../../edit/ActionLabel.svelte';
 	import AddSlot from '../../edit/chrome/AddSlot.svelte';
-	import EditFrame from '../../edit/chrome/EditFrame.svelte';
-	import EditPanel from '../../edit/chrome/EditPanel.svelte';
+	import LinkEdit from '../../edit/chrome/LinkEdit.svelte';
 	import { getEditAdapter } from '../../edit/context.js';
 	import Editable from '../../edit/Editable.svelte';
 	import type { CollectionRef, EditDescriptor } from '../../edit/types.js';
@@ -20,7 +18,7 @@
 		links: SiteLink[];
 		/** Edit descriptors for the link labels — see Nav. */
 		editFor?: (link: SiteLink) => EditDescriptor | undefined;
-		/** Panel rows (href, order) per link — see Nav. */
+		/** The modal's Adreça/Ordre rows and removal per link — see LinkEdit. */
 		propertiesFor?: (link: SiteLink) => SiteLinkEditMap | undefined;
 		/** Names the links' collection; with `applyOp`, turns on add/remove. */
 		collection?: CollectionRef;
@@ -42,13 +40,6 @@
 		return { ...map, removeOp: { kind: 'remove', collection, id: link.id } };
 	}
 
-	function rowsFor(link: SiteLink, map: SiteLinkEditMap | undefined) {
-		return [
-			map?.href && { descriptor: map.href, value: link.href },
-			map?.order && { descriptor: map.order, value: String(link.order ?? 0) }
-		].filter((row) => row !== undefined);
-	}
-
 	const year = new Date().getFullYear();
 </script>
 
@@ -60,25 +51,19 @@
 		<ul>
 			{#each links as link (link.href)}
 				{@const map = editMapFor(link)}
-				{@const rows = rowsFor(link, map)}
 				<li>
-					<!-- Inside the li, so the list's flex layout never gains a child. -->
-					<EditFrame
-						spec={map && (rows.length > 0 || map.removeOp)
-							? {
-									label: map.label ?? link.label,
-									hasPanel: rows.length > 0,
-									removeOp: map.removeOp
-								}
+					<!-- One gesture: the modal edits text, destination, order, removal. -->
+					<LinkEdit
+						text={{ edit: editFor?.(link), value: link.label }}
+						href={{ descriptor: map?.href, value: link.href }}
+						extras={map?.order
+							? [{ descriptor: map.order, value: String(link.order ?? 0) }]
 							: undefined}
+						removeOp={map?.removeOp}
+						label={map?.label ?? link.label}
 					>
-						{#snippet panel()}
-							<EditPanel {rows} />
-						{/snippet}
-						<ActionLabel edit={editFor?.(link)} value={link.label}>
-							{#snippet control()}<Link href={link.href}>{link.label}</Link>{/snippet}
-						</ActionLabel>
-					</EditFrame>
+						{#snippet control()}<Link href={link.href}>{link.label}</Link>{/snippet}
+					</LinkEdit>
 				</li>
 			{/each}
 			{#if structural && collection}

package/dist/components/layout/Footer.svelte.d.ts

@@ -10,7 +10,7 @@ interface Props {
     links: SiteLink[];
     /** Edit descriptors for the link labels — see Nav. */
     editFor?: (link: SiteLink) => EditDescriptor | undefined;
-    /** Panel rows (href, order) per link — see Nav. */
+    /** The modal's Adreça/Ordre rows and removal per link — see LinkEdit. */
     propertiesFor?: (link: SiteLink) => SiteLinkEditMap | undefined;
     /** Names the links' collection; with `applyOp`, turns on add/remove. */
     collection?: CollectionRef;

package/dist/components/layout/Nav.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
 	import { getUiConfig } from '../../config/context.js';
 	import type { SiteLink } from '../../config/types.js';
-	import ActionLabel from '../../edit/ActionLabel.svelte';
 	import AddSlot from '../../edit/chrome/AddSlot.svelte';
-	import EditFrame from '../../edit/chrome/EditFrame.svelte';
-	import EditPanel from '../../edit/chrome/EditPanel.svelte';
+	import LinkEdit from '../../edit/chrome/LinkEdit.svelte';
 	import { getEditAdapter } from '../../edit/context.js';
 	import type { CollectionRef, EditDescriptor } from '../../edit/types.js';
 	import { isPathUnder } from '../../utils/paths.js';
@@ -26,11 +24,12 @@
 		/**
 		 * Edit descriptors for the link LABELS — a function because the host
 		 * owns both the routes and the message keys behind them. While the
-		 * adapter is editing, a link with a descriptor renders as editable
-		 * text instead of an anchor (see ActionLabel).
+		 * adapter is editing, a link with a descriptor swaps for a button that
+		 * opens the LINK MODAL (see LinkEdit) — every half of the entry edits
+		 * in that one gesture.
 		 */
 		editFor?: (link: SiteLink) => EditDescriptor | undefined;
-		/** Panel rows (href, order) per link — the label edits via `editFor`. */
+		/** The modal's Adreça/Ordre rows and removal per link — see LinkEdit. */
 		propertiesFor?: (link: SiteLink) => SiteLinkEditMap | undefined;
 		/** Names the links' collection; with `applyOp`, turns on add/remove. */
 		collection?: CollectionRef;
@@ -59,12 +58,6 @@
 		return { ...map, removeOp: { kind: 'remove', collection, id: link.id } };
 	}
 
-	function rowsFor(link: SiteLink, map: SiteLinkEditMap | undefined) {
-		return [
-			map?.href && { descriptor: map.href, value: link.href },
-			map?.order && { descriptor: map.order, value: String(link.order ?? 0) }
-		].filter((row) => row !== undefined);
-	}
 	const msg = $derived(config.messages);
 
 	let isMenuOpen = $state(false);
@@ -121,29 +114,24 @@
 			<ul class="links">
 				{#each links as link (link.href)}
 					{@const map = editMapFor(link)}
-					{@const rows = rowsFor(link, map)}
 					<li>
-						<!-- Inside the li, so the row's layout never gains a child. -->
-						<EditFrame
-							spec={map && (rows.length > 0 || map.removeOp)
-								? {
-										label: map.label ?? link.label,
-										hasPanel: rows.length > 0,
-										removeOp: map.removeOp
-									}
+						<!-- One gesture: clicking the entry opens the modal that edits
+						     its text, destination, order and removal together. -->
+						<LinkEdit
+							text={{ edit: editFor?.(link), value: link.label }}
+							href={{ descriptor: map?.href, value: link.href }}
+							extras={map?.order
+								? [{ descriptor: map.order, value: String(link.order ?? 0) }]
 								: undefined}
+							removeOp={map?.removeOp}
+							label={map?.label ?? link.label}
 						>
-							{#snippet panel()}
-								<EditPanel {rows} />
+							{#snippet control()}
+								<Link href={link.href} aria-current={isCurrent(link.href) ? 'page' : undefined}>
+									{link.label}
+								</Link>
 							{/snippet}
-							<ActionLabel edit={editFor?.(link)} value={link.label}>
-								{#snippet control()}
-									<Link href={link.href} aria-current={isCurrent(link.href) ? 'page' : undefined}>
-										{link.label}
-									</Link>
-								{/snippet}
-							</ActionLabel>
-						</EditFrame>
+						</LinkEdit>
 					</li>
 				{/each}
 				{#if structural && collection}

package/dist/components/layout/Nav.svelte.d.ts

@@ -17,11 +17,12 @@ interface Props {
     /**
      * Edit descriptors for the link LABELS — a function because the host
      * owns both the routes and the message keys behind them. While the
-     * adapter is editing, a link with a descriptor renders as editable
-     * text instead of an anchor (see ActionLabel).
+     * adapter is editing, a link with a descriptor swaps for a button that
+     * opens the LINK MODAL (see LinkEdit) — every half of the entry edits
+     * in that one gesture.
      */
     editFor?: (link: SiteLink) => EditDescriptor | undefined;
-    /** Panel rows (href, order) per link — the label edits via `editFor`. */
+    /** The modal's Adreça/Ordre rows and removal per link — see LinkEdit. */
     propertiesFor?: (link: SiteLink) => SiteLinkEditMap | undefined;
     /** Names the links' collection; with `applyOp`, turns on add/remove. */
     collection?: CollectionRef;

package/dist/components/layout/site-link-edit.d.ts

@@ -1,9 +1,10 @@
 import type { EntityOp, PropertyDescriptor } from '../../edit/types.js';
 /**
- * What the CMS may edit on one nav/footer link beyond its LABEL (which edits
- * through the existing `editFor` ActionLabel swap): the href and the display
- * order are panel rows, and removal arrives injected by the list from its
- * `collection` — the Timeline/CollaboratorList pattern.
+ * What the CMS may edit on one nav/footer link beyond its LABEL: the href and
+ * the display order join the label in ONE modal (LinkEdit — clicking the
+ * entry opens it), and removal arrives injected by the list from its
+ * `collection`. The modal is entered through the label's `editFor`
+ * descriptor, so these rows take effect alongside it.
  */
 export interface SiteLinkEditMap {
     href?: PropertyDescriptor;

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,266 @@
+<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, EntityOp, PropertyDescriptor } from '../types.js';
+	import ConfirmDialog from './ConfirmDialog.svelte';
+
+	/**
+	 * 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. Extra rows (a menu link's Ordre) and a confirmed
+	 * Elimina ride in the same modal when the host supplies them. 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 };
+		/**
+		 * Extra property rows under Adreça — a menu link's Ordre. Labelled from
+		 * their descriptors, committed on Desa only when changed.
+		 */
+		extras?: { descriptor: PropertyDescriptor; value: string | null }[];
+		/** With `adapter.applyOp`, the modal gains a confirmed Elimina action. */
+		removeOp?: EntityOp;
+		/** Accessible name for the modal, e.g. the link's current text. */
+		label?: string;
+		control: Snippet;
+	}
+
+	let {
+		text,
+		href,
+		extras = undefined,
+		removeOp = undefined,
+		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));
+	// Every field beyond the text needs both a place and a verb to save with.
+	const editsHref = $derived(href.descriptor !== undefined && adapter?.saveProperty !== undefined);
+	const editableExtras = $derived(adapter?.saveProperty !== undefined ? (extras ?? []) : []);
+	const removable = $derived(removeOp !== undefined && adapter?.applyOp !== undefined);
+
+	let open = $state(false);
+	let draftText = $state('');
+	let draftHref = $state('');
+	let draftExtras = $state<string[]>([]);
+	let saving = $state(false);
+	let confirmingRemove = $state(false);
+	let removing = $state(false);
+	let error = $state<string | null>(null);
+
+	function show(): void {
+		draftText = text.value;
+		draftHref = href.value;
+		draftExtras = editableExtras.map((extra) => extra.value ?? '');
+		error = null;
+		open = true;
+	}
+
+	/** Escape/Cancel·la/backdrop: discard the drafts, keep the stored values. */
+	function cancel(): void {
+		if (saving || removing) 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;
+			}
+			for (const [index, extra] of editableExtras.entries()) {
+				const next = draftExtras[index].trim();
+				if (next === (extra.value ?? '')) continue;
+				await adapter.saveProperty!(extra.descriptor, next);
+				draftExtras[index] = next;
+			}
+			open = false;
+		} catch (thrown) {
+			error =
+				thrown instanceof Error && thrown.message ? thrown.message : messages.edit_saveError();
+		} finally {
+			saving = false;
+		}
+	}
+
+	/** Confirmed removal closes everything; a failure reports in THIS modal. */
+	async function remove(): Promise<void> {
+		if (!adapter?.applyOp || removeOp === undefined) return;
+		removing = true;
+		error = null;
+		try {
+			await adapter.applyOp(removeOp);
+			confirmingRemove = false;
+			open = false;
+		} catch (thrown) {
+			confirmingRemove = false;
+			error =
+				thrown instanceof Error && thrown.message ? thrown.message : messages.edit_saveError();
+		} finally {
+			removing = 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}
+			{#each editableExtras as extra, index (index)}
+				<label>
+					<span>{extra.descriptor.label}</span>
+					<input type="text" bind:value={draftExtras[index]} disabled={saving} />
+				</label>
+			{/each}
+		</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>
+			{#if removable}
+				<span class="danger">
+					<Button variant="ghost" pending={null} onclick={() => (confirmingRemove = true)}>
+						{messages.edit_remove()}
+					</Button>
+				</span>
+			{/if}
+		</div>
+	</Modal>
+	{#if removable}
+		<ConfirmDialog
+			open={confirmingRemove}
+			title={messages.edit_remove()}
+			message={messages.edit_removeConfirm({ label: label ?? text.value })}
+			confirmLabel={messages.edit_remove()}
+			pending={removing}
+			onconfirm={() => void remove()}
+			oncancel={() => (confirmingRemove = false)}
+		/>
+	{/if}
+{: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);
+	}
+
+	/* Elimina sits apart from the commit pair, wearing the error hue — the
+	   ConfirmDialog token override, reused. */
+	.danger {
+		margin-left: auto;
+		--color-brand: var(--series-8);
+		--color-ink: var(--series-8);
+	}
+</style>

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

@@ -0,0 +1,46 @@
+import type { Snippet } from 'svelte';
+import type { EditDescriptor, EntityOp, 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. Extra rows (a menu link's Ordre) and a confirmed
+ * Elimina ride in the same modal when the host supplies them. 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;
+    };
+    /**
+     * Extra property rows under Adreça — a menu link's Ordre. Labelled from
+     * their descriptors, committed on Desa only when changed.
+     */
+    extras?: {
+        descriptor: PropertyDescriptor;
+        value: string | null;
+    }[];
+    /** With `adapter.applyOp`, the modal gains a confirmed Elimina action. */
+    removeOp?: EntityOp;
+    /** 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.15.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",