@vit-foundation/ui 0.25.0 → 0.26.0

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;

package/dist/edit/live/LinkEdit.svelte

@@ -0,0 +1,276 @@
+<script lang="ts">
+	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 { LinkEditProps } from '../chrome-props.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.
+	 */
+	let {
+		text,
+		href,
+		extras = undefined,
+		removeOp = undefined,
+		label = undefined,
+		control
+	}: LinkEditProps = $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 ?? []).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}
+{: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/live/LinkEdit.svelte.d.ts

@@ -0,0 +1,4 @@
+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 → live}/PropertyRow.svelte

@@ -2,7 +2,7 @@
 	import { getUiConfig } from '../../config/context.js';
 	import type { ParameterlessKey } from '../../config/types.js';
 	import { getEditAdapter } from '../context.js';
-	import { commitState, propertyValue } from '../commit.svelte.js';
+	import { commitState, propertyValue } from './commit.svelte.js';
 	import type { PropertyDescriptor, PropertyValue } from '../types.js';
 
 	/**

package/dist/edit/{commit.svelte.d.ts → live/commit.svelte.d.ts}

@@ -1,5 +1,5 @@
-import type { EditMessages } from '../config/edit-messages.js';
-import type { PropertyDescriptor, PropertyValue } from './types.js';
+import type { EditMessages } from '../../config/edit-messages.js';
+import type { PropertyDescriptor, PropertyValue } from '../types.js';
 /**
  * The commit lifecycle of ONE editable value — the state machine
  * `Editable` and `PropertyRow` both ran, in one place.

package/dist/edit/live/index.d.ts

@@ -0,0 +1,10 @@
+import type { EditChrome } from '../context.js';
+/**
+ * The package's edit chrome, as the table a host hands `setEditAdapter`.
+ *
+ * This is the ONE module outside `edit/live/` allowed to import the live
+ * components (see `live-isolation.test.ts`). A host that edits imports it —
+ * brain, at its mirror layout — and a host that only renders never names it,
+ * which is what keeps the live half out of that host's bundle.
+ */
+export declare const EDIT_CHROME: EditChrome;

package/dist/edit/live/index.js

@@ -0,0 +1,14 @@
+import AddSlot from './AddSlot.svelte';
+import Editable from './Editable.svelte';
+import EditFrame from './EditFrame.svelte';
+import EditPanel from './EditPanel.svelte';
+import LinkEdit from './LinkEdit.svelte';
+/**
+ * The package's edit chrome, as the table a host hands `setEditAdapter`.
+ *
+ * This is the ONE module outside `edit/live/` allowed to import the live
+ * components (see `live-isolation.test.ts`). A host that edits imports it —
+ * brain, at its mirror layout — and a host that only renders never names it,
+ * which is what keeps the live half out of that host's bundle.
+ */
+export const EDIT_CHROME = { Editable, EditFrame, EditPanel, AddSlot, LinkEdit };