@vit-foundation/ui 0.10.0 → 0.11.0

package/dist/edit/chrome/ConfirmDialog.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import Button from '../../components/ui/Button.svelte';
+	import Modal from '../../components/ui/Modal.svelte';
+	import { getUiConfig } from '../../config/context.js';
+
+	/**
+	 * Destructive confirmation over the Modal primitive: native <dialog>
+	 * handles top layer, backdrop and Escape. The confirm button turns
+	 * destructive by overriding the tokens Button's `primary` reads — a theme
+	 * decision expressed as token values, not a new Button variant.
+	 */
+	interface Props {
+		open: boolean;
+		title: string;
+		message: string;
+		confirmLabel: string;
+		pending?: boolean;
+		onconfirm: () => void;
+		oncancel: () => void;
+	}
+
+	let {
+		open,
+		title,
+		message,
+		confirmLabel,
+		pending = false,
+		onconfirm,
+		oncancel
+	}: Props = $props();
+
+	const config = getUiConfig();
+</script>
+
+<Modal {open} {title} onclose={oncancel} closeLabel={config.editMessages.edit_close()}>
+	<p class="message">{message}</p>
+	<div class="actions">
+		<span class="danger">
+			<Button pending={pending ? 1 : 0} onclick={onconfirm}>{confirmLabel}</Button>
+		</span>
+		<Button variant="ghost" pending={null} onclick={oncancel}>
+			{config.editMessages.edit_cancel()}
+		</Button>
+	</div>
+</Modal>
+
+<style>
+	.message {
+		margin: 0;
+		max-width: 44ch;
+	}
+
+	.actions {
+		display: flex;
+		gap: var(--space-2);
+	}
+
+	/* Button's primary fill reads --color-brand (hover --color-navy); the
+	   error hue is --series-8, so overriding both here IS the destructive
+	   variant — no second styling path inside Button. */
+	.danger {
+		--color-brand: var(--series-8);
+		--color-navy: color-mix(in srgb, var(--series-8) 80%, var(--color-ink));
+	}
+</style>

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

@@ -0,0 +1,18 @@
+/**
+ * Destructive confirmation over the Modal primitive: native <dialog>
+ * handles top layer, backdrop and Escape. The confirm button turns
+ * destructive by overriding the tokens Button's `primary` reads — a theme
+ * decision expressed as token values, not a new Button variant.
+ */
+interface Props {
+    open: boolean;
+    title: string;
+    message: string;
+    confirmLabel: string;
+    pending?: boolean;
+    onconfirm: () => void;
+    oncancel: () => void;
+}
+declare const ConfirmDialog: import("svelte").Component<Props, {}, "">;
+type ConfirmDialog = ReturnType<typeof ConfirmDialog>;
+export default ConfirmDialog;

package/dist/edit/chrome/EditFrame.svelte

@@ -0,0 +1,171 @@
+<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' }>;
+	}
+
+	/**
+	 * 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;
+	}
+
+	let { spec, panel, children }: Props = $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/chrome/EditFrame.svelte.d.ts

@@ -0,0 +1,33 @@
+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, {}, "">;
+type EditFrame = ReturnType<typeof EditFrame>;
+export default EditFrame;

package/dist/edit/chrome/EditPanel.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { PropertyDescriptor } from '../types.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.
+	 */
+	interface Props {
+		rows: { descriptor: PropertyDescriptor; value: string | null }[];
+	}
+
+	let { rows }: Props = $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/chrome/EditPanel.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { PropertyDescriptor } 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: string | null;
+    }[];
+}
+declare const EditPanel: import("svelte").Component<Props, {}, "">;
+type EditPanel = ReturnType<typeof EditPanel>;
+export default EditPanel;

package/dist/edit/chrome/EditPopover.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * The floating layer an EditFrame opens its panel in. Absolutely
+	 * positioned INSIDE the frame (no portal: in-flow positioning needs no
+	 * SSR-unfriendly machinery, and modality is only for destructive confirm,
+	 * which native <dialog> covers). Escape and outside pointerdown close it;
+	 * the OPENER owns focus return, because only it knows its own element —
+	 * the Nav menu pattern.
+	 */
+	interface Props {
+		label: string;
+		onclose: () => void;
+		children: Snippet;
+	}
+
+	let { label, onclose, children }: Props = $props();
+
+	let popover: HTMLDivElement | undefined = $state();
+
+	// Focus the first control so the keyboard lands where the caret goes.
+	$effect(() => {
+		popover?.querySelector<HTMLElement>('input, select, textarea, button, [tabindex]')?.focus();
+	});
+
+	function onWindowKeydown(event: KeyboardEvent): void {
+		if (event.key === 'Escape') onclose();
+	}
+
+	function onWindowPointerdown(event: PointerEvent): void {
+		// The opening click's pointerdown fired before this listener existed,
+		// so only genuinely outside presses land here.
+		if (popover && !popover.contains(event.target as Node)) onclose();
+	}
+</script>
+
+<svelte:window onkeydown={onWindowKeydown} onpointerdown={onWindowPointerdown} />
+
+<div class="popover" role="dialog" aria-label={label} bind:this={popover}>
+	{@render children()}
+</div>
+
+<style>
+	.popover {
+		position: absolute;
+		top: var(--space-2);
+		right: var(--space-2);
+		width: min(20rem, 90vw);
+		z-index: var(--z-overlay);
+		background: var(--color-surface);
+		border: 1px solid var(--color-hairline);
+		border-radius: var(--radius);
+		box-shadow: var(--shadow-2);
+		padding: var(--space-3);
+	}
+</style>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+/**
+ * The floating layer an EditFrame opens its panel in. Absolutely
+ * positioned INSIDE the frame (no portal: in-flow positioning needs no
+ * SSR-unfriendly machinery, and modality is only for destructive confirm,
+ * which native <dialog> covers). Escape and outside pointerdown close it;
+ * the OPENER owns focus return, because only it knows its own element —
+ * the Nav menu pattern.
+ */
+interface Props {
+    label: string;
+    onclose: () => void;
+    children: Snippet;
+}
+declare const EditPopover: import("svelte").Component<Props, {}, "">;
+type EditPopover = ReturnType<typeof EditPopover>;
+export default EditPopover;

package/dist/edit/chrome/PropertyRow.svelte

@@ -0,0 +1,241 @@
+<script lang="ts">
+	import { getUiConfig } from '../../config/context.js';
+	import { getEditAdapter } from '../context.js';
+	import type { PropertyDescriptor } from '../types.js';
+
+	/**
+	 * One property of an EditPanel: label, a control by `descriptor.type`, and
+	 * its own commit lifecycle — Editable's state machine, panel-shaped. Each
+	 * row commits on change/blur independently; a failed save keeps the draft
+	 * in the control so nothing typed is lost.
+	 *
+	 * The row assumes an adapter with `saveProperty` exists — EditPanel only
+	 * renders when the frame's triple gate already established both.
+	 */
+	interface Props {
+		descriptor: PropertyDescriptor;
+		value: string | null;
+	}
+
+	let { descriptor, value }: Props = $props();
+
+	const adapter = getEditAdapter();
+	const config = getUiConfig();
+
+	let status = $state<'idle' | 'dirty' | 'saving' | 'error'>('idle');
+	let announcement = $state('');
+	/** Last persisted value, what a failed draft is measured against. */
+	// svelte-ignore state_referenced_locally
+	let savedValue = $state(value ?? '');
+	// svelte-ignore state_referenced_locally
+	let draft = $state(value ?? '');
+	let fileInput: HTMLInputElement | undefined = $state();
+
+	// Follow the prop only while idle — never repaint a held draft (the
+	// Editable rule).
+	// svelte-ignore state_referenced_locally
+	let lastPropValue = $state(value ?? '');
+	$effect(() => {
+		const next = value ?? '';
+		if (next !== lastPropValue) {
+			lastPropValue = next;
+			if (status === 'idle') {
+				savedValue = next;
+				draft = next;
+			}
+		}
+	});
+
+	async function persist(next: string | null): Promise<void> {
+		if (!adapter?.saveProperty) return;
+		status = 'saving';
+		announcement = config.editMessages.edit_saving();
+		try {
+			await adapter.saveProperty(descriptor, next);
+			savedValue = next ?? '';
+			draft = next ?? '';
+			status = 'idle';
+			announcement = config.editMessages.edit_saved();
+		} catch {
+			// Draft stays in the control; the editor decides whether to retry.
+			status = 'error';
+			announcement = config.editMessages.edit_saveError();
+		}
+	}
+
+	function commit(): void {
+		const trimmed = draft.trim();
+		if (trimmed === savedValue) {
+			status = 'idle';
+			return;
+		}
+		if (trimmed === '') {
+			if (!descriptor.nullable) {
+				status = 'error';
+				announcement = config.editMessages.edit_emptyRequired();
+				return;
+			}
+			void persist(null);
+			return;
+		}
+		void persist(trimmed);
+	}
+
+	function markDirty(): void {
+		if (status !== 'saving') status = 'dirty';
+	}
+
+	async function upload(event: Event): Promise<void> {
+		const file = (event.currentTarget as HTMLInputElement).files?.[0];
+		if (!file || !adapter?.uploadImage) return;
+		status = 'saving';
+		announcement = config.editMessages.edit_saving();
+		try {
+			const path = await adapter.uploadImage(descriptor, file);
+			await persist(path);
+		} catch {
+			status = 'error';
+			announcement = config.editMessages.edit_saveError();
+		} finally {
+			if (fileInput) fileInput.value = '';
+		}
+	}
+
+	// One id per instance so the label reaches its control.
+	const id = $props.id();
+</script>
+
+<div class="row">
+	<label for={id}>{descriptor.label}</label>
+
+	{#if descriptor.type === 'select'}
+		<select
+			{id}
+			data-vit-editing={status}
+			value={draft}
+			onchange={(event) => {
+				draft = event.currentTarget.value;
+				commit();
+			}}
+		>
+			{#each descriptor.options ?? [] as option (option.value)}
+				<option value={option.value}>{option.label}</option>
+			{/each}
+		</select>
+	{:else if descriptor.type === 'image'}
+		{#if savedValue}
+			<img class="thumb" src={savedValue} alt="" />
+		{/if}
+		<input
+			{id}
+			type="text"
+			data-vit-editing={status}
+			placeholder={descriptor.placeholder}
+			bind:value={draft}
+			oninput={markDirty}
+			onchange={commit}
+		/>
+		{#if adapter?.uploadImage}
+			<input
+				bind:this={fileInput}
+				class="file"
+				type="file"
+				accept="image/*"
+				onchange={(event) => void upload(event)}
+				aria-label={config.editMessages.edit_uploadImage()}
+			/>
+			<button type="button" class="aux" onclick={() => fileInput?.click()}>
+				{config.editMessages.edit_uploadImage()}
+			</button>
+		{/if}
+	{:else}
+		<input
+			{id}
+			type={descriptor.type === 'date' ? 'date' : descriptor.type === 'url' ? 'url' : 'text'}
+			data-vit-editing={status}
+			placeholder={descriptor.placeholder}
+			bind:value={draft}
+			oninput={markDirty}
+			onchange={commit}
+		/>
+	{/if}
+
+	{#if descriptor.nullable && savedValue !== ''}
+		<button
+			type="button"
+			class="aux"
+			onclick={() => {
+				draft = '';
+				void persist(null);
+			}}
+		>
+			{config.editMessages.edit_clearValue()}
+		</button>
+	{/if}
+
+	<span class="status" role="status">{announcement}</span>
+</div>
+
+<style>
+	.row {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-1);
+	}
+
+	label {
+		font-size: var(--text-sm);
+		font-weight: 600;
+	}
+
+	input:not(.file),
+	select {
+		font: inherit;
+		font-size: var(--text-sm);
+		padding: var(--space-1) var(--space-2);
+		border: 1px solid var(--color-hairline);
+		border-radius: var(--radius);
+		background: var(--color-surface);
+		color: var(--color-ink);
+		width: 100%;
+	}
+
+	.thumb {
+		max-width: 100%;
+		max-height: 6rem;
+		object-fit: cover;
+		border-radius: var(--radius);
+	}
+
+	/* The real picker; the styled button drives it. */
+	.file {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	.aux {
+		align-self: flex-start;
+		border: none;
+		background: none;
+		padding: 0;
+		font-size: var(--text-sm);
+		color: var(--color-brand);
+		cursor: pointer;
+		text-decoration: underline;
+	}
+
+	.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/PropertyRow.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { PropertyDescriptor } from '../types.js';
+/**
+ * One property of an EditPanel: label, a control by `descriptor.type`, and
+ * its own commit lifecycle — Editable's state machine, panel-shaped. Each
+ * row commits on change/blur independently; a failed save keeps the draft
+ * in the control so nothing typed is lost.
+ *
+ * The row assumes an adapter with `saveProperty` exists — EditPanel only
+ * renders when the frame's triple gate already established both.
+ */
+interface Props {
+    descriptor: PropertyDescriptor;
+    value: string | null;
+}
+declare const PropertyRow: import("svelte").Component<Props, {}, "">;
+type PropertyRow = ReturnType<typeof PropertyRow>;
+export default PropertyRow;

package/dist/edit/helpers.d.ts

@@ -1,5 +1,7 @@
 import type { Locale } from '../config/types.js';
-import type { EditableEntity, EditDescriptor } from './types.js';
+import type { CollectionRef, EditableEntity, EditDescriptor, PropertyDescriptor } from './types.js';
+/** Everything a property descriptor carries beyond its ref. */
+type PropertySpec = Omit<PropertyDescriptor, 'ref'>;
 /**
  * Descriptor for one interface-wording message (a Paraglide catalog key).
  * Only parameterless messages are sensibly editable in place — editing the
@@ -25,3 +27,19 @@ export declare function entityEdit(entity: EditableEntity, id: string | number,
     format?: EditDescriptor['format'];
     label?: string;
 }) => EditDescriptor;
+/**
+ * Property-descriptor factory for one entity's scalar fields — the panel
+ * sibling of `entityEdit`, naming the row once:
+ *
+ *   const property = entityProperty('milestones', milestone.id);
+ *   occurredOn: property('occurred_on', { type: 'date', label: 'Data' })
+ */
+export declare function entityProperty(entity: EditableEntity, id: string | number): (field: string, spec: PropertySpec) => PropertyDescriptor;
+/**
+ * A panel property over one interface-wording message — how strings that can
+ * never hold a caret (an `<option>` label, an input placeholder) still edit.
+ */
+export declare function chromeProperty(key: string, spec: PropertySpec): PropertyDescriptor;
+/** Names one entity collection at one render site. */
+export declare function collectionOf(entity: EditableEntity, scope?: string): CollectionRef;
+export {};