@vit-foundation/ui 0.25.0 → 0.27.0

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;

package/dist/edit/live/EditFrame.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">
+	import IconButton from '../../components/ui/IconButton.svelte';
+	import { getUiConfig } from '../../config/context.js';
+	import { getEditAdapter } from '../context.js';
+	import type { EditFrameProps } from '../chrome-props.js';
+	import ConfirmDialog from './ConfirmDialog.svelte';
+	import EditPopover from './EditPopover.svelte';
+
+	/**
+	 * The page-builder wrapper: a corner toolbar (revealed on hover AND
+	 * :focus-within — never hover-only) with a gear that opens the property
+	 * panel and a trash that confirms, then applies the remove op.
+	 *
+	 * Triple-gated per affordance: spec present ∧ adapter editing ∧ the
+	 * capability method present. With nothing to offer it renders the children
+	 * ALONE — zero wrapper element, so an unadapted app's DOM is byte-identical
+	 * (pinned by test). Components mount it INSIDE their own root element, so
+	 * the wrapper never disturbs the parent's flex/grid.
+	 */
+	let { spec, panel, children }: EditFrameProps = $props();
+
+	const adapter = getEditAdapter();
+	const config = getUiConfig();
+
+	const editing = $derived(spec !== undefined && (adapter?.isEditing ?? false));
+	const showGear = $derived(
+		editing && spec?.hasPanel === true && panel !== undefined && adapter?.saveProperty !== undefined
+	);
+	const showTrash = $derived(
+		editing && spec?.removeOp !== undefined && adapter?.applyOp !== undefined
+	);
+	const framed = $derived(showGear || showTrash);
+
+	let panelOpen = $state(false);
+	let confirming = $state(false);
+	let removing = $state(false);
+	let announcement = $state('');
+	let toolbar: HTMLDivElement | undefined = $state();
+
+	function closePanel(): void {
+		panelOpen = false;
+		// The popover owned focus; hand it back to the control that opened it.
+		toolbar?.querySelector('button')?.focus();
+	}
+
+	async function remove(): Promise<void> {
+		if (!adapter?.applyOp || !spec?.removeOp) return;
+		removing = true;
+		try {
+			await adapter.applyOp(spec.removeOp);
+			// The host's refresh unmounts this frame with the removed item.
+			confirming = false;
+		} catch {
+			confirming = false;
+			announcement = config.editMessages.edit_saveError();
+		} finally {
+			removing = false;
+		}
+	}
+</script>
+
+{#if framed && spec}
+	<div class="vit-edit-frame">
+		{@render children()}
+		<div class="toolbar" bind:this={toolbar}>
+			{#if showGear}
+				<IconButton
+					icon="gear"
+					label={config.editMessages.edit_properties({ label: spec.label })}
+					onclick={() => (panelOpen = !panelOpen)}
+				/>
+			{/if}
+			{#if showTrash}
+				<IconButton
+					icon="trash"
+					label={config.editMessages.edit_remove()}
+					onclick={() => (confirming = true)}
+				/>
+			{/if}
+		</div>
+		{#if panelOpen && panel}
+			<EditPopover
+				label={config.editMessages.edit_properties({ label: spec.label })}
+				onclose={closePanel}
+			>
+				{@render panel()}
+			</EditPopover>
+		{/if}
+		{#if showTrash}
+			<ConfirmDialog
+				open={confirming}
+				title={config.editMessages.edit_remove()}
+				message={config.editMessages.edit_removeConfirm({ label: spec.label })}
+				confirmLabel={config.editMessages.edit_remove()}
+				pending={removing}
+				onconfirm={() => void remove()}
+				oncancel={() => (confirming = false)}
+			/>
+		{/if}
+		<span class="status" role="status">{announcement}</span>
+	</div>
+{:else}
+	{@render children()}
+{/if}
+
+<style>
+	.vit-edit-frame {
+		position: relative;
+		border-radius: var(--radius);
+		outline: 1px dashed transparent;
+		outline-offset: 4px;
+		transition: outline-color var(--transition-fast);
+	}
+
+	.vit-edit-frame:hover,
+	.vit-edit-frame:focus-within {
+		outline-color: var(--color-brand);
+	}
+
+	.toolbar {
+		position: absolute;
+		top: calc(-1 * var(--space-2));
+		right: 0;
+		display: flex;
+		gap: 2px;
+		z-index: var(--z-raised);
+		background: var(--color-surface);
+		border: 1px solid var(--color-hairline);
+		border-radius: var(--radius);
+		box-shadow: var(--shadow-1);
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity var(--transition-fast);
+	}
+
+	.vit-edit-frame:hover .toolbar,
+	.vit-edit-frame:focus-within .toolbar {
+		opacity: 1;
+		pointer-events: auto;
+	}
+
+	.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/EditFrame.svelte.d.ts

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

package/dist/edit/live/EditPanel.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { EditPanelProps } from '../chrome-props.js';
+	import PropertyRow from './PropertyRow.svelte';
+
+	/**
+	 * The property form an EditFrame's popover holds: one PropertyRow per
+	 * entry, each with its own independent commit lifecycle. The component
+	 * knows nothing about the entity — the descriptors say everything.
+	 */
+	let { rows }: EditPanelProps = $props();
+</script>
+
+<div class="panel">
+	{#each rows as row (JSON.stringify(row.descriptor.ref) + row.descriptor.label)}
+		<PropertyRow descriptor={row.descriptor} value={row.value} />
+	{/each}
+</div>
+
+<style>
+	.panel {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-3);
+	}
+</style>

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

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

package/dist/edit/live/Editable.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+	import { getUiConfig } from '../../config/context.js';
+	import { getEditAdapter } from '../context.js';
+	import { commitState } from './commit.svelte.js';
+	import type { EditableAttrs, EditableProps } from '../chrome-props.js';
+
+	/**
+	 * The inline-edit primitive. It renders no element of its own: the child
+	 * snippet receives the text and a bag of attributes, and spreads both onto
+	 * whatever semantic element the call site owns —
+	 *
+	 *   <Editable edit={descriptor} value={title}>
+	 *     {#snippet children(text, attrs)}<h3 {...attrs}>{text}</h3>{/snippet}
+	 *   </Editable>
+	 *
+	 * — the same contract Field uses for its control attrs, and for the same
+	 * reason: the element (h1, p, span) is part of the document outline and
+	 * belongs to the caller, not behind a prop.
+	 *
+	 * Inactive — no `edit` descriptor, no adapter in context (a read-only
+	 * app), or the adapter's `isEditing` off — it renders the child with an
+	 * empty attribute bag: no listeners, no wrapper, no cost.
+	 *
+	 * Active, it makes the element a plain-text `contenteditable` textbox.
+	 * The DOM owns the draft while the reader types; this component reads it
+	 * back on commit. Enter commits single-line fields (Cmd/Ctrl+Enter for
+	 * 'multiline'), Escape reverts to the last saved value, blur commits a
+	 * dirty draft. A failed save keeps the draft on screen in the error state
+	 * so nothing typed is lost. State is announced through a visually hidden
+	 * `role="status"` region, the pattern ShareRow set for its copy action.
+	 *
+	 * Styling for the affordance lives in base.css (`[data-vit-editing]`):
+	 * the element is rendered by the *caller's* markup, which scoped styles
+	 * here could never reach.
+	 */
+	let { edit, value, children }: EditableProps = $props();
+
+	const adapter = getEditAdapter();
+	const config = getUiConfig();
+
+	/**
+	 * The commit lifecycle — the four states, the announcements, the last
+	 * persisted value and the follow-the-prop rule — is shared with
+	 * `PropertyRow` (see `./commit.svelte.js`). What stays here is where the
+	 * DRAFT lives: in the DOM, because this is a contenteditable.
+	 */
+	// svelte-ignore state_referenced_locally
+	const commit_ = commitState(value, config.editMessages);
+	/** What the child snippet renders. Only rewritten while the DOM is not
+	 * being typed in — Svelte and the reader must not fight over the node. */
+	// svelte-ignore state_referenced_locally
+	let renderText = $state(value);
+
+	$effect(() => {
+		const adopted = commit_.follow(value);
+		if (adopted !== null) renderText = adopted;
+	});
+
+	const active = $derived(edit !== undefined && (adapter?.isEditing ?? false));
+	const multiline = $derived(edit?.format === 'multiline' || edit?.format === 'richtext');
+
+	/** contenteditable text, innerText keeps line breaks; NBSPs become spaces. */
+	function textOf(element: HTMLElement): string {
+		return (element.innerText ?? element.textContent ?? '').replace(/\u00a0/g, ' ');
+	}
+
+	function handleBeforeInput(event: InputEvent): void {
+		// 'plaintext-only' is not universal (Firefox); strip rich insertions.
+		if (event.inputType === 'insertFromPaste' || event.inputType === 'insertFromDrop') return;
+		if (!multiline && event.inputType === 'insertParagraph') event.preventDefault();
+	}
+
+	function handlePaste(event: ClipboardEvent): void {
+		// Plain text only, whatever the clipboard holds.
+		event.preventDefault();
+		const text = event.clipboardData?.getData('text/plain') ?? '';
+		const selection = window.getSelection();
+		if (!selection || selection.rangeCount === 0) return;
+		const range = selection.getRangeAt(0);
+		range.deleteContents();
+		range.insertNode(document.createTextNode(multiline ? text : text.replace(/\s*\n\s*/g, ' ')));
+		selection.collapseToEnd();
+		commit_.markDirty();
+	}
+
+	function handleInput(): void {
+		commit_.markDirty();
+	}
+
+	async function commit(element: HTMLElement): Promise<void> {
+		if (!edit || !adapter) return;
+		const draft = textOf(element).trim();
+		if (draft === commit_.saved) {
+			commit_.settle();
+			return;
+		}
+		// A failed save leaves the draft in the DOM; the reader decides whether
+		// to retry.
+		await commit_.commit(draft, () => adapter.save(edit, draft));
+	}
+
+	function handleBlur(event: FocusEvent): void {
+		const status = commit_.status;
+		if (status === 'dirty' || status === 'error') void commit(event.currentTarget as HTMLElement);
+	}
+
+	function handleKeydown(event: KeyboardEvent): void {
+		const element = event.currentTarget as HTMLElement;
+		if (event.key === 'Escape') {
+			// Svelte's cached text still equals renderText, so a state write
+			// alone cannot repaint a node the reader has mutated: restore the
+			// DOM directly, then settle.
+			element.textContent = commit_.saved;
+			commit_.revert();
+			element.blur();
+			return;
+		}
+		const commitKey = multiline
+			? event.key === 'Enter' && (event.metaKey || event.ctrlKey)
+			: event.key === 'Enter';
+		if (commitKey) {
+			event.preventDefault();
+			void commit(element);
+		}
+	}
+
+	const attrs = $derived<EditableAttrs>(
+		active
+			? {
+					contenteditable: 'plaintext-only',
+					role: 'textbox',
+					'aria-label': edit?.label,
+					'aria-multiline': multiline ? 'true' : undefined,
+					'data-vit-editing': commit_.status,
+					onbeforeinput: handleBeforeInput,
+					oninput: handleInput,
+					onblur: handleBlur,
+					onkeydown: handleKeydown,
+					onpaste: handlePaste
+				}
+			: {}
+	);
+</script>
+
+{@render children(renderText, attrs)}
+{#if active}
+	<span class="status" role="status">{commit_.announcement}</span>
+{/if}
+
+<style>
+	.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/Editable.svelte.d.ts

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