@vit-foundation/ui 0.10.1 → 0.12.0

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 {};

package/dist/edit/helpers.js

@@ -20,3 +20,24 @@ export function pageCopyEdit(page, sectionKey, locale, options) {
 export function entityEdit(entity, id, locale) {
     return (field, options) => ({ ref: { kind: 'entity', entity, id, field }, locale, ...options });
 }
+/**
+ * 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 function entityProperty(entity, id) {
+    return (field, spec) => ({ ref: { kind: 'entity', entity, id, field }, ...spec });
+}
+/**
+ * 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 function chromeProperty(key, spec) {
+    return { ref: { kind: 'chrome', key }, ...spec };
+}
+/** Names one entity collection at one render site. */
+export function collectionOf(entity, scope) {
+    return scope === undefined ? { entity } : { entity, scope };
+}

package/dist/edit/index.d.ts

@@ -1,6 +1,12 @@
 export { getEditAdapter, setEditAdapter } from './context.js';
 export { default as ActionLabel } from './ActionLabel.svelte';
 export { default as Editable } from './Editable.svelte';
-export { chromeEdit, entityEdit, pageCopyEdit } from './helpers.js';
+export { default as AddSlot } from './chrome/AddSlot.svelte';
+export { default as ConfirmDialog } from './chrome/ConfirmDialog.svelte';
+export { default as EditFrame } from './chrome/EditFrame.svelte';
+export type { EditFrameSpec } from './chrome/EditFrame.svelte';
+export { default as EditPanel } from './chrome/EditPanel.svelte';
+export { default as EditPopover } from './chrome/EditPopover.svelte';
+export { chromeEdit, chromeProperty, collectionOf, entityEdit, entityProperty, pageCopyEdit } from './helpers.js';
 export { localize } from './types.js';
-export type { ContentRef, EditableEntity, EditAdapter, EditDescriptor, LocalizedText } from './types.js';
+export type { CollectionRef, ContentRef, EditableEntity, EditAdapter, EditDescriptor, EntityOp, LocalizedText, PropertyDescriptor, PropertyOption, PropertyType } from './types.js';

package/dist/edit/index.js

@@ -1,5 +1,10 @@
 export { getEditAdapter, setEditAdapter } from './context.js';
 export { default as ActionLabel } from './ActionLabel.svelte';
 export { default as Editable } from './Editable.svelte';
-export { chromeEdit, entityEdit, pageCopyEdit } from './helpers.js';
+export { default as AddSlot } from './chrome/AddSlot.svelte';
+export { default as ConfirmDialog } from './chrome/ConfirmDialog.svelte';
+export { default as EditFrame } from './chrome/EditFrame.svelte';
+export { default as EditPanel } from './chrome/EditPanel.svelte';
+export { default as EditPopover } from './chrome/EditPopover.svelte';
+export { chromeEdit, chromeProperty, collectionOf, entityEdit, entityProperty, pageCopyEdit } from './helpers.js';
 export { localize } from './types.js';

package/dist/edit/types.d.ts

@@ -15,7 +15,7 @@ export declare function localize(value: LocalizedText, locale: Locale): string;
  * The entities whose fields the components can mark editable. Names match
  * the content tables so an adapter can route a save without a mapping layer.
  */
-export type EditableEntity = 'weeklies' | 'projects' | 'milestones' | 'team_members' | 'job_openings' | 'themes';
+export type EditableEntity = 'weeklies' | 'projects' | 'milestones' | 'team_members' | 'job_openings' | 'themes' | 'collaborators';
 /**
  * The identity of one editable string in the content model: a page copy
  * block (`page_content` row), one localized field of a domain entity, or one
@@ -51,9 +51,75 @@ export interface EditDescriptor {
     /** Accessible name for the edit control, e.g. "Títol del weekly #12". */
     label?: string;
 }
+/**
+ * The value kinds a property panel can edit. Everything in this content model
+ * serializes to a string on the wire — an ISO date, a URL, an enum member, a
+ * storage path — so there is no typed value union: the ADAPTER parses, and
+ * the host's schemas stay the sole validators.
+ */
+export type PropertyType = 'text' | 'url' | 'date' | 'select' | 'image';
+/** One choice of a `select` property. */
+export interface PropertyOption {
+    value: string;
+    label: string;
+}
+/**
+ * Identity + shape of one panel-edited property. Unlike `EditDescriptor`,
+ * `locale` is optional: dates, urls, enum members and image paths are not
+ * localized, and its absence says so to the adapter.
+ */
+export interface PropertyDescriptor {
+    ref: ContentRef;
+    /** Present only for localized text properties. */
+    locale?: Locale;
+    type: PropertyType;
+    /** Panel row label — required, the panel renders it. */
+    label: string;
+    /** Required when `type` is 'select'. */
+    options?: readonly PropertyOption[];
+    placeholder?: string;
+    /** Clearing the field saves null (linkUrl, externalUrl). */
+    nullable?: boolean;
+}
+/**
+ * Names one entity collection at one render site. `scope` disambiguates when
+ * the same entity renders in several lists (a board grid vs. a full roster).
+ */
+export interface CollectionRef {
+    entity: EditableEntity;
+    scope?: string;
+}
+/**
+ * A structural collection operation. Deliberately WITHOUT an `update` verb:
+ * field values always travel through `save`/`saveProperty` — one save path
+ * per value — and ops stay purely about existence and order.
+ */
+export type EntityOp = {
+    kind: 'create';
+    collection: CollectionRef;
+    anchor?: {
+        id: string | number;
+        placement: 'before' | 'after';
+    };
+} | {
+    kind: 'remove';
+    collection: CollectionRef;
+    id: string | number;
+} | {
+    kind: 'reorder';
+    collection: CollectionRef;
+    id: string | number;
+    anchor: {
+        id: string | number;
+        placement: 'before' | 'after';
+    };
+};
 /**
  * What a consuming app plugs in to make the components writable. The package
- * never talks to a database: `save` is the whole persistence contract.
+ * never talks to a database: `save` is the whole persistence contract for
+ * inline text, and the three OPTIONAL members below are the property-panel
+ * and structural halves — leave them off and the components render no panel
+ * or collection affordance at all, byte-identical to a read-only build.
  *
  * Implementations must:
  * - back `isEditing` with reactive state (`$state`) — it gates every edit
@@ -68,4 +134,18 @@ export interface EditDescriptor {
 export interface EditAdapter {
     readonly isEditing: boolean;
     save(descriptor: EditDescriptor, value: string): Promise<void>;
+    /**
+     * Panel property save. The value stays a string on the wire (ISO date,
+     * url, enum member, image path); `null` clears a `nullable` property.
+     */
+    saveProperty?(descriptor: PropertyDescriptor, value: string | null): Promise<void>;
+    /**
+     * Structural collection ops. `create` may resolve the new row's id so the
+     * UI can point at it after the host's refresh.
+     */
+    applyOp?(op: EntityOp): Promise<{
+        id?: string | number;
+    } | void>;
+    /** Image upload; resolves to the stored path an `image` property saves. */
+    uploadImage?(descriptor: PropertyDescriptor, file: File): Promise<string>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vit-foundation/ui",
-	"version": "0.10.1",
+	"version": "0.12.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",