@vit-foundation/ui 0.25.0 → 0.26.0

package/dist/edit/chrome/LinkEdit.svelte

@@ -1,52 +1,16 @@
 <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 type { ParameterlessKey } from '../../config/types.js';
-	import { getEditAdapter } from '../context.js';
-	import { propertyValue } from '../commit.svelte.js';
-	import type { EditDescriptor, EntityOp, PropertyDescriptor } from '../types.js';
-	import ConfirmDialog from './ConfirmDialog.svelte';
+	import type { LinkEditProps } from '../chrome-props.js';
+	import { getEditAdapter, getEditChrome } from '../context.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
+	 * A LINK edited whole — the GATE. While the adapter is editing and a text
+	 * descriptor is supplied, the control is REPLACED by the live half
+	 * (`edit/live/LinkEdit.svelte`): a button wearing the label that opens one
+	 * modal for the link's text and destination, the ActionLabel rule (a
+	 * caret or a click inside a live link would navigate mid-edit). Without an
 	 * adapter or a descriptor the control renders untouched, byte-identical to
-	 * a read-only build.
+	 * a read-only build, and the modal's code is not in that 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, and rendered
-		 * BY TYPE: this used to be a bare text input whatever the descriptor
-		 * said, which made it a second renderer that would silently miss any
-		 * property type the package grew. An `image` row has no place in a link
-		 * modal and is the one type refused here.
-		 */
-		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,
@@ -54,245 +18,17 @@
 		removeOp = undefined,
 		label = undefined,
 		control
-	}: Props = $props();
+	}: LinkEditProps = $props();
 
 	const adapter = getEditAdapter();
-	const config = getUiConfig();
-	const messages = $derived(config.editMessages);
+	const chrome = getEditChrome();
 
 	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 ?? []).filter((extra) => extra.descriptor.type !== 'image')
-			: []
-	);
-
-	/** A flag state's wording, from the same catalog the site renders. */
-	const wording = (key: ParameterlessKey): string => config.messages[key]?.() ?? key;
-	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;
-				// A flag extra hands the adapter a BOOLEAN, like a panel row does.
-				await adapter.saveProperty!(extra.descriptor, propertyValue(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>
-					{#if extra.descriptor.type === 'select'}
-						<select bind:value={draftExtras[index]} disabled={saving}>
-							{#each extra.descriptor.options ?? [] as option (option.value)}
-								<option value={option.value}>{option.label}</option>
-							{/each}
-						</select>
-					{:else if extra.descriptor.type === 'flag'}
-						<select bind:value={draftExtras[index]} disabled={saving}>
-							<option value="true">{wording(extra.descriptor.on ?? 'status_published')}</option>
-							<option value="false">{wording(extra.descriptor.off ?? 'status_draft')}</option>
-						</select>
-					{:else}
-						<input
-							type={extra.descriptor.type === 'date' ? 'date' : 'text'}
-							placeholder={extra.descriptor.placeholder}
-							bind:value={draftExtras[index]}
-							disabled={saving}
-						/>
-					{/if}
-				</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}
+{#if editing && chrome}
+	{@const Live = chrome.LinkEdit}
+	<Live {text} {href} {extras} {removeOp} {label} {control} />
 {: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

@@ -1,50 +1,4 @@
-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, and rendered
-     * BY TYPE: this used to be a bare text input whatever the descriptor
-     * said, which made it a second renderer that would silently miss any
-     * property type the package grew. An `image` row has no place in a link
-     * modal and is the one type refused here.
-     */
-    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, {}, "">;
+import type { LinkEditProps } from '../chrome-props.js';
+declare const LinkEdit: import("svelte").Component<LinkEditProps, {}, "">;
 type LinkEdit = ReturnType<typeof LinkEdit>;
 export default LinkEdit;

package/dist/edit/chrome-props.d.ts

@@ -0,0 +1,96 @@
+import type { Snippet } from 'svelte';
+import type { EditDescriptor, EntityOp, PropertyDescriptor, PropertyValue } from './types.js';
+/**
+ * The props of the five edit-chrome modules, in one component-free file.
+ *
+ * Each of these modules is TWO components with one interface: a GATE at the
+ * name every renderer imports (`edit/Editable.svelte`, `edit/chrome/*`), and
+ * the LIVE half under `edit/live/`, which a host installs through
+ * `setEditAdapter(adapter, EDIT_CHROME)`. The gate decides whether editing is
+ * on; the live half is the editing. A read-only host never imports the live
+ * half, so it never ships it — the property the page tests used to assert on
+ * the DOM alone ("byte-identical without descriptors") while the site's bundle
+ * carried `dist/edit` regardless.
+ *
+ * The props live here rather than in either component so the two halves are
+ * typed against ONE declaration and `EditChrome` (in `./context.ts`) can name
+ * the live component's type without importing a `.svelte` file into a `.ts`
+ * one.
+ */
+export interface EditableAttrs {
+    contenteditable?: 'plaintext-only' | 'true';
+    role?: 'textbox';
+    'aria-label'?: string;
+    'aria-multiline'?: 'true';
+    'data-vit-editing'?: 'idle' | 'dirty' | 'saving' | 'error';
+    onbeforeinput?: (event: InputEvent) => void;
+    oninput?: (event: Event) => void;
+    onblur?: (event: FocusEvent) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+    onpaste?: (event: ClipboardEvent) => void;
+}
+export interface EditableProps {
+    /** Identity of the string. Omit it and this is a passthrough. */
+    edit?: EditDescriptor;
+    value: string;
+    children: Snippet<[string, EditableAttrs]>;
+}
+/** What one framed component tells the frame about itself. */
+export interface EditFrameSpec {
+    /** Human name of the thing, e.g. "Fita: Neix la fundació". */
+    label: string;
+    /** Gates the gear — true when the panel snippet has rows to show. */
+    hasPanel?: boolean;
+    /** Gates the trash: removing this item from its collection. */
+    removeOp?: Extract<EntityOp, {
+        kind: 'remove';
+    }>;
+}
+export interface EditFrameProps {
+    spec?: EditFrameSpec;
+    /** The panel content — an EditPanel with this component's rows. */
+    panel?: Snippet;
+    children: Snippet;
+}
+export interface EditPanelProps {
+    rows: {
+        descriptor: PropertyDescriptor;
+        value: PropertyValue;
+    }[];
+}
+export interface AddSlotProps {
+    op: Extract<EntityOp, {
+        kind: 'create';
+    }>;
+    /** The entity noun for the label, e.g. "una fita". */
+    label?: string;
+}
+export interface LinkEditProps {
+    /** 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, and rendered
+     * BY TYPE: this used to be a bare text input whatever the descriptor
+     * said, which made it a second renderer that would silently miss any
+     * property type the package grew. An `image` row has no place in a link
+     * modal and is the one type refused here.
+     */
+    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/dist/edit/chrome-props.js

@@ -0,0 +1 @@
+export {};

package/dist/edit/context.d.ts

@@ -1,10 +1,43 @@
+import type { Component } from 'svelte';
+import type { AddSlotProps, EditableProps, EditFrameProps, EditPanelProps, LinkEditProps } from './chrome-props.js';
 import type { EditAdapter } from './types.js';
 /**
- * Installs the app's persistence adapter for the subtree. An app that never
- * calls this is read-only by construction: without an adapter every edit
- * affordance renders as plain content, byte-identical to a build of the
- * components with no edit mode at all.
+ * The LIVE half of the edit chrome: the five components that turn a gate into
+ * an editing surface. `EDIT_CHROME` in `./live/index.js` is the package's
+ * table; a host installs it beside its adapter.
+ *
+ * Why the host passes it rather than the gates importing it. Every renderer
+ * imports the gates — `Editable`, `EditFrame`, `EditPanel`, `AddSlot`,
+ * `LinkEdit` — because a renderer that MIGHT be edited has to say where.
+ * When the gates imported the live components too, a page module's static
+ * import graph reached the contenteditable machinery, the property panel, the
+ * link modal and the Modal primitive, and the public site shipped all of it
+ * (`dist/edit`, 176 KB) to render nothing with it. Through this seam the
+ * import is the host's: brain names the table once at its composition root,
+ * the site never names it, and a bundler following the site's imports never
+ * sees `edit/live/`. `live-isolation.test.ts` pins that no renderer reaches it.
  */
-export declare function setEditAdapter(adapter: EditAdapter): EditAdapter;
+export interface EditChrome {
+    Editable: Component<EditableProps>;
+    EditFrame: Component<EditFrameProps>;
+    EditPanel: Component<EditPanelProps>;
+    AddSlot: Component<AddSlotProps>;
+    LinkEdit: Component<LinkEditProps>;
+}
+/**
+ * Installs the app's persistence adapter, and the chrome it drives, for the
+ * subtree. An app that never calls this is read-only by construction: without
+ * an adapter every edit affordance renders as plain content, byte-identical
+ * to a build of the components with no edit mode at all — and, since 0.26,
+ * without the edit mode's code in its bundle either.
+ *
+ * Both arguments are required. An adapter with no chrome would be an editing
+ * host whose gates open onto nothing, and the failure would be a page that
+ * silently does not edit; a chrome with no adapter has nothing to save
+ * through. One call, two halves, so neither can be installed alone.
+ */
+export declare function setEditAdapter(adapter: EditAdapter, chrome: EditChrome): EditAdapter;
 /** The nearest adapter, or undefined in a read-only app. */
 export declare function getEditAdapter(): EditAdapter | undefined;
+/** The chrome installed beside the nearest adapter, or undefined in a read-only app. */
+export declare function getEditChrome(): EditChrome | undefined;

package/dist/edit/context.js

@@ -1,15 +1,26 @@
 import { getContext, setContext } from 'svelte';
 const KEY = Symbol.for('@vit-foundation/ui:edit-adapter');
 /**
- * Installs the app's persistence adapter for the subtree. An app that never
- * calls this is read-only by construction: without an adapter every edit
- * affordance renders as plain content, byte-identical to a build of the
- * components with no edit mode at all.
+ * Installs the app's persistence adapter, and the chrome it drives, for the
+ * subtree. An app that never calls this is read-only by construction: without
+ * an adapter every edit affordance renders as plain content, byte-identical
+ * to a build of the components with no edit mode at all — and, since 0.26,
+ * without the edit mode's code in its bundle either.
+ *
+ * Both arguments are required. An adapter with no chrome would be an editing
+ * host whose gates open onto nothing, and the failure would be a page that
+ * silently does not edit; a chrome with no adapter has nothing to save
+ * through. One call, two halves, so neither can be installed alone.
  */
-export function setEditAdapter(adapter) {
-    return setContext(KEY, adapter);
+export function setEditAdapter(adapter, chrome) {
+    setContext(KEY, { adapter, chrome });
+    return adapter;
 }
 /** The nearest adapter, or undefined in a read-only app. */
 export function getEditAdapter() {
-    return getContext(KEY);
+    return getContext(KEY)?.adapter;
+}
+/** The chrome installed beside the nearest adapter, or undefined in a read-only app. */
+export function getEditChrome() {
+    return getContext(KEY)?.chrome;
 }

package/dist/edit/index.d.ts

@@ -1,14 +1,16 @@
-export { getEditAdapter, setEditAdapter } from './context.js';
+export { getEditAdapter, getEditChrome, setEditAdapter } from './context.js';
+export type { EditChrome } from './context.js';
+export { EDIT_CHROME } from './live/index.js';
 export { collectionEditing } from './collection.svelte.js';
 export type { CollectionEditing, RemovableMap } from './collection.svelte.js';
 export { default as ActionLabel } from './ActionLabel.svelte';
 export { default as Editable } from './Editable.svelte';
 export { default as AddSlot } from './chrome/AddSlot.svelte';
-export { default as ConfirmDialog } from './chrome/ConfirmDialog.svelte';
+export { default as ConfirmDialog } from './live/ConfirmDialog.svelte';
 export { default as EditFrame } from './chrome/EditFrame.svelte';
-export type { EditFrameSpec } from './chrome/EditFrame.svelte';
+export type { EditFrameSpec } from './chrome-props.js';
 export { default as EditPanel } from './chrome/EditPanel.svelte';
-export { default as EditPopover } from './chrome/EditPopover.svelte';
+export { default as EditPopover } from './live/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/dist/edit/index.js

@@ -1,12 +1,13 @@
-export { getEditAdapter, setEditAdapter } from './context.js';
+export { getEditAdapter, getEditChrome, setEditAdapter } from './context.js';
+export { EDIT_CHROME } from './live/index.js';
 export { collectionEditing } from './collection.svelte.js';
 export { default as ActionLabel } from './ActionLabel.svelte';
 export { default as Editable } from './Editable.svelte';
 export { default as AddSlot } from './chrome/AddSlot.svelte';
-export { default as ConfirmDialog } from './chrome/ConfirmDialog.svelte';
+export { default as ConfirmDialog } from './live/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 EditPopover } from './live/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/dist/edit/live/AddSlot.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import Icon from '../../components/ui/Icon.svelte';
+	import { getUiConfig } from '../../config/context.js';
+	import { getEditAdapter } from '../context.js';
+	import type { AddSlotProps } from '../chrome-props.js';
+
+	/**
+	 * The "+" affordance of an editable collection. Renders ONLY while the
+	 * adapter is editing AND implements `applyOp` — otherwise nothing, the
+	 * byte-identical invariant. The op resolves server-side and the host's
+	 * refresh brings the new row in; this control only shows pending/error.
+	 */
+	let { op, label = '' }: AddSlotProps = $props();
+
+	const adapter = getEditAdapter();
+	const config = getUiConfig();
+
+	let pending = $state(false);
+	let announcement = $state('');
+
+	const active = $derived((adapter?.isEditing ?? false) && adapter?.applyOp !== undefined);
+	const text = $derived(config.editMessages.edit_add({ label }).trim());
+
+	async function add(): Promise<void> {
+		if (!adapter?.applyOp || pending) return;
+		pending = true;
+		announcement = '';
+		try {
+			await adapter.applyOp(op);
+		} catch {
+			announcement = config.editMessages.edit_addFailed();
+		} finally {
+			pending = false;
+		}
+	}
+</script>
+
+{#if active}
+	<button type="button" class="add" disabled={pending} onclick={() => void add()}>
+		<Icon name="plus" size={16} />
+		{text}
+	</button>
+	<span class="status" role="status">{announcement}</span>
+{/if}
+
+<style>
+	.add {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-1);
+		padding: var(--space-1) var(--space-3);
+		border: 1px dashed var(--color-ink-muted);
+		border-radius: 999px;
+		background: transparent;
+		color: var(--color-ink);
+		font: inherit;
+		font-size: var(--text-sm);
+		cursor: pointer;
+		transition: border-color var(--transition-fast);
+	}
+
+	.add:hover:not(:disabled) {
+		border-color: var(--color-brand);
+		color: var(--color-brand);
+	}
+
+	.add:disabled {
+		opacity: 0.5;
+		cursor: default;
+	}
+
+	.status {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+		border: 0;
+	}
+</style>

package/dist/edit/live/AddSlot.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AddSlotProps } from '../chrome-props.js';
+declare const AddSlot: import("svelte").Component<AddSlotProps, {}, "">;
+type AddSlot = ReturnType<typeof AddSlot>;
+export default AddSlot;