@vit-foundation/ui 0.14.0 → 0.15.0

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/edit/chrome/LinkEdit.svelte

@@ -5,7 +5,8 @@
 	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';
+	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
@@ -18,45 +19,67 @@
 	 * 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.
+	 * 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, label = undefined, control }: Props = $props();
+	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));
-	// The Adreça field needs both a place to save to and a verb to save with.
+	// 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) return;
+		if (saving || removing) return;
 		open = false;
 	}
 
@@ -78,6 +101,12 @@
 				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 =
@@ -86,6 +115,24 @@
 			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}
@@ -117,6 +164,12 @@
 					<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>
@@ -124,8 +177,26 @@
 		<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}
@@ -184,4 +255,12 @@
 		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

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { EditDescriptor, PropertyDescriptor } from '../types.js';
+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
@@ -11,8 +11,10 @@ import type { EditDescriptor, PropertyDescriptor } from '../types.js';
  * 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.
+ * 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. */
@@ -25,6 +27,16 @@ interface Props {
         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;

package/package.json

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