@vit-foundation/ui 0.10.1 → 0.12.0

package/dist/config/edit-messages.d.ts

@@ -0,0 +1,47 @@
+/**
+ * The editor chrome's own strings — status announcements, panel labels, the
+ * confirm-delete wording. A separate object from `UiMessages` on purpose:
+ * that interface mirrors the website's wording catalog (its keys are
+ * `ui_messages` rows a CMS edits), while these strings belong to the EDITOR
+ * a CMS host renders — they must never leak into the site's catalog, and
+ * they must never themselves become editable chrome.
+ *
+ * Same message-function style as `UiMessages`, and the same all-or-nothing
+ * override: a host replaces the whole object or keeps the Catalan defaults.
+ */
+export interface EditMessages {
+    /** Inline + panel status announcements. */
+    edit_saving(): string;
+    edit_saved(): string;
+    edit_saveError(): string;
+    /** RichText's source editor. */
+    edit_save(): string;
+    edit_cancel(): string;
+    edit_edit(): string;
+    edit_preview(): string;
+    edit_editBody(): string;
+    /** The frame toolbar and its panel. */
+    edit_properties(params: {
+        label: string;
+    }): string;
+    edit_remove(): string;
+    edit_removeConfirm(params: {
+        label: string;
+    }): string;
+    edit_close(): string;
+    /** Collections. */
+    edit_add(params: {
+        label: string;
+    }): string;
+    edit_addFailed(): string;
+    /** Property rows. */
+    edit_uploadImage(): string;
+    edit_clearValue(): string;
+    edit_emptyRequired(): string;
+}
+/**
+ * Catalan defaults. The first three and the RichText strings reproduce the
+ * previously hardcoded copy byte-identically — swapping the source of a
+ * string must not repaint a single test or page.
+ */
+export declare const defaultEditMessages: EditMessages;

package/dist/config/edit-messages.js

@@ -0,0 +1,24 @@
+/**
+ * Catalan defaults. The first three and the RichText strings reproduce the
+ * previously hardcoded copy byte-identically — swapping the source of a
+ * string must not repaint a single test or page.
+ */
+export const defaultEditMessages = {
+    edit_saving: () => 'Desant…',
+    edit_saved: () => 'Desat',
+    edit_saveError: () => 'Error en desar',
+    edit_save: () => 'Desa',
+    edit_cancel: () => 'Cancel·la',
+    edit_edit: () => 'Edita',
+    edit_preview: () => 'Vista prèvia',
+    edit_editBody: () => 'Edita el contingut',
+    edit_properties: ({ label }) => `Propietats: ${label}`,
+    edit_remove: () => 'Elimina',
+    edit_removeConfirm: ({ label }) => `Segur que vols eliminar «${label}»? Es pot desfer des de l’historial.`,
+    edit_close: () => 'Tanca',
+    edit_add: ({ label }) => `Afegeix ${label}`,
+    edit_addFailed: () => 'No s’ha pogut afegir',
+    edit_uploadImage: () => 'Puja una imatge',
+    edit_clearValue: () => 'Buida el valor',
+    edit_emptyRequired: () => 'Aquest camp no pot quedar buit'
+};

package/dist/config/index.d.ts

@@ -1,4 +1,6 @@
 export { DEFAULT_UI_CONFIG, getUiConfig, setUiConfig } from './context.js';
+export { defaultEditMessages } from './edit-messages.js';
+export type { EditMessages } from './edit-messages.js';
 export { defaultMessages } from './messages.js';
 export { default as UiProvider } from './UiProvider.svelte';
 export { BASE_LOCALE, LOCALES } from './types.js';

package/dist/config/index.js

@@ -1,4 +1,5 @@
 export { DEFAULT_UI_CONFIG, getUiConfig, setUiConfig } from './context.js';
+export { defaultEditMessages } from './edit-messages.js';
 export { defaultMessages } from './messages.js';
 export { default as UiProvider } from './UiProvider.svelte';
 export { BASE_LOCALE, LOCALES } from './types.js';

package/dist/config/types.d.ts

@@ -1,4 +1,5 @@
 import type { EditDescriptor } from '../edit/types.js';
+import type { EditMessages } from './edit-messages.js';
 /**
  * The site's locales and their canonical member. Fixed rather than generic:
  * `ca` is load-bearing — it is the required key of every localized column
@@ -157,6 +158,12 @@ export interface UiConfig {
     /** Appended to document titles and shown as the wordmark. */
     siteName: string;
     messages: UiMessages;
+    /**
+     * The editor chrome's own strings (status announcements, panel wording) —
+     * resolved, Catalan by default. NOT part of `messages`: see
+     * `./edit-messages.js` for why the two catalogs must not mix.
+     */
+    editMessages: EditMessages;
     /**
      * Edit descriptor for one of THIS config's message strings, by catalog
      * key — the interface-wording half of edit mode. Optional and undefined by
@@ -175,5 +182,6 @@ export interface UiConfigInput {
     canonicalPathname?: UiConfig['canonicalPathname'];
     siteName?: string;
     messages?: UiMessages;
+    editMessages?: EditMessages;
     messageEdit?: UiConfig['messageEdit'];
 }

package/dist/content/types.d.ts

@@ -59,11 +59,15 @@ export interface TeamMemberData {
     isBoard: boolean;
 }
 export interface CollaboratorData {
+    /** Present only where the list is editable — remove ops need an identity. */
+    id?: string | number;
     personName: string;
     affiliation: string;
     url: string | null;
 }
 export interface JobOpeningData {
+    /** Present only where the list is editable — remove ops need an identity. */
+    id?: string | number;
     slug: string;
     title: string;
     description: string | null;

package/dist/edit/Editable.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { getUiConfig } from '../config/context.js';
 	import { getEditAdapter } from './context.js';
 	import type { EditDescriptor } from './types.js';
 
@@ -55,6 +56,7 @@
 	let { edit, value, children }: Props = $props();
 
 	const adapter = getEditAdapter();
+	const config = getUiConfig();
 
 	let status = $state<'idle' | 'dirty' | 'saving' | 'error'>('idle');
 	/** Last persisted value: what Escape restores and blur diffs against. */
@@ -121,16 +123,16 @@
 			return;
 		}
 		status = 'saving';
-		announcement = 'Desant…';
+		announcement = config.editMessages.edit_saving();
 		try {
 			await adapter.save(edit, draft);
 			savedValue = draft;
 			status = 'idle';
-			announcement = 'Desat';
+			announcement = config.editMessages.edit_saved();
 		} catch {
 			// Draft stays in the DOM; the reader decides whether to retry.
 			status = 'error';
-			announcement = 'Error en desar';
+			announcement = config.editMessages.edit_saveError();
 		}
 	}
 

package/dist/edit/chrome/AddSlot.svelte

@@ -0,0 +1,89 @@
+<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';
+
+	/**
+	 * 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;
+	}
+
+	let { op, label = '' }: Props = $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/chrome/AddSlot.svelte.d.ts

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

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;