@vit-foundation/ui 0.25.0 → 0.26.0

package/dist/edit/chrome/AddSlot.svelte

@@ -1,89 +1,22 @@
 <script lang="ts">
-	import Icon from '../../components/ui/Icon.svelte';
-	import { getUiConfig } from '../../config/context.js';
-	import { getEditAdapter } from '../context.js';
-	import type { EntityOp } from '../types.js';
+	import type { AddSlotProps } from '../chrome-props.js';
+	import { getEditAdapter, getEditChrome } from '../context.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.
+	 * The "+" affordance's GATE. Renders ONLY while the adapter is editing
+	 * AND implements `applyOp` — otherwise nothing, the byte-identical
+	 * invariant. The control itself, its pending state and its announcement
+	 * live in `edit/live/AddSlot.svelte`, installed by the host.
 	 */
-	interface Props {
-		op: Extract<EntityOp, { kind: 'create' }>;
-		/** The entity noun for the label, e.g. "una fita". */
-		label?: string;
-	}
-
-	let { op, label = '' }: Props = $props();
+	let { op, label = '' }: AddSlotProps = $props();
 
 	const adapter = getEditAdapter();
-	const config = getUiConfig();
-
-	let pending = $state(false);
-	let announcement = $state('');
+	const chrome = getEditChrome();
 
 	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 active && chrome}
+	{@const Live = chrome.AddSlot}
+	<Live {op} {label} />
 {/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/chrome/AddSlot.svelte.d.ts

@@ -1,17 +1,4 @@
-import type { EntityOp } from '../types.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.
- */
-interface Props {
-    op: Extract<EntityOp, {
-        kind: 'create';
-    }>;
-    /** The entity noun for the label, e.g. "una fita". */
-    label?: string;
-}
-declare const AddSlot: import("svelte").Component<Props, {}, "">;
+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/chrome/EditFrame.svelte

@@ -1,171 +1,28 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import IconButton from '../../components/ui/IconButton.svelte';
-	import { getUiConfig } from '../../config/context.js';
-	import { getEditAdapter } from '../context.js';
-	import type { EntityOp } from '../types.js';
-	import ConfirmDialog from './ConfirmDialog.svelte';
-	import EditPopover from './EditPopover.svelte';
-
-	/** 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' }>;
-	}
+	import type { EditFrameProps } from '../chrome-props.js';
+	import { getEditAdapter, getEditChrome } from '../context.js';
 
 	/**
-	 * 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.
+	 * The page-builder wrapper's GATE. With no spec, no adapter or editing
+	 * off it renders the children ALONE — zero wrapper element, so an
+	 * unadapted app's DOM is byte-identical (pinned by test). Editing, it
+	 * mounts the live frame the host installed (`edit/live/EditFrame.svelte`),
+	 * which owns the corner toolbar, the property popover and the confirmed
+	 * remove, and which applies the finer per-affordance gates itself.
+	 * Components mount this INSIDE their own root element, so the wrapper
+	 * never disturbs the parent's flex/grid.
 	 */
-	interface Props {
-		spec?: EditFrameSpec;
-		/** The panel content — an EditPanel with this component's rows. */
-		panel?: Snippet;
-		children: Snippet;
-	}
-
-	let { spec, panel, children }: Props = $props();
+	let { spec, panel, children }: EditFrameProps = $props();
 
 	const adapter = getEditAdapter();
-	const config = getUiConfig();
+	const chrome = getEditChrome();
 
 	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>
+{#if editing && chrome}
+	{@const Live = chrome.EditFrame}
+	<Live {spec} {panel} {children} />
 {: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/chrome/EditFrame.svelte.d.ts

@@ -1,33 +1,4 @@
-import type { Snippet } from 'svelte';
-import type { EntityOp } from '../types.js';
-/** 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';
-    }>;
-}
-/**
- * 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.
- */
-interface Props {
-    spec?: EditFrameSpec;
-    /** The panel content — an EditPanel with this component's rows. */
-    panel?: Snippet;
-    children: Snippet;
-}
-declare const EditFrame: import("svelte").Component<Props, {}, "">;
+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/chrome/EditPanel.svelte

@@ -1,29 +1,21 @@
 <script lang="ts">
-	import type { PropertyDescriptor, PropertyValue } from '../types.js';
-	import PropertyRow from './PropertyRow.svelte';
+	import type { EditPanelProps } from '../chrome-props.js';
+	import { getEditChrome } from '../context.js';
 
 	/**
-	 * 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.
+	 * The property form's GATE. A renderer builds its panel snippet from this
+	 * whether or not anyone will ever open it, so this is the name it imports;
+	 * the rows themselves (`edit/live/EditPanel.svelte`, one PropertyRow per
+	 * entry with its own commit lifecycle) exist only where a host installed
+	 * the chrome. The snippet is only rendered inside a live frame's popover,
+	 * so with no chrome there is nothing to render and nothing is.
 	 */
-	interface Props {
-		rows: { descriptor: PropertyDescriptor; value: PropertyValue }[];
-	}
+	let { rows }: EditPanelProps = $props();
 
-	let { rows }: Props = $props();
+	const chrome = getEditChrome();
 </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>
+{#if chrome}
+	{@const Live = chrome.EditPanel}
+	<Live {rows} />
+{/if}

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

@@ -1,15 +1,4 @@
-import type { PropertyDescriptor, PropertyValue } from '../types.js';
-/**
- * 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.
- */
-interface Props {
-    rows: {
-        descriptor: PropertyDescriptor;
-        value: PropertyValue;
-    }[];
-}
-declare const EditPanel: import("svelte").Component<Props, {}, "">;
+import type { EditPanelProps } from '../chrome-props.js';
+declare const EditPanel: import("svelte").Component<EditPanelProps, {}, "">;
 type EditPanel = ReturnType<typeof EditPanel>;
 export default EditPanel;