@vit-foundation/ui 0.25.0 → 0.27.0

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

package/dist/forms/index.d.ts

@@ -5,6 +5,7 @@ export { default as FormResultSlot } from '../components/ui/FormResultSlot.svelt
 export { default as Honeypot } from '../components/ui/Honeypot.svelte';
 export { default as LocaleField } from '../components/ui/LocaleField.svelte';
 export { default as NewsletterIntentField } from '../components/ui/NewsletterIntentField.svelte';
+export { default as SelectField, type SelectOption } from '../components/ui/SelectField.svelte';
 export { default as TextField } from '../components/ui/TextField.svelte';
 export { COMMENT_BODY, CONTACT_MESSAGE, CONTACT_NAME, DISPLAY_NAME, EMAIL, LOGIN_PASSWORD, PASSWORD } from './constraints.js';
 export { hasNewsletterIntent, HONEYPOT_FIELD, isNewsletterIntent, NEWSLETTER_INTENT_PARAM, NEWSLETTER_INTENT_VALUE, withNewsletterIntent } from './transport.js';

package/dist/forms/index.js

@@ -5,6 +5,7 @@ export { default as FormResultSlot } from '../components/ui/FormResultSlot.svelt
 export { default as Honeypot } from '../components/ui/Honeypot.svelte';
 export { default as LocaleField } from '../components/ui/LocaleField.svelte';
 export { default as NewsletterIntentField } from '../components/ui/NewsletterIntentField.svelte';
+export { default as SelectField } from '../components/ui/SelectField.svelte';
 export { default as TextField } from '../components/ui/TextField.svelte';
 export { COMMENT_BODY, CONTACT_MESSAGE, CONTACT_NAME, DISPLAY_NAME, EMAIL, LOGIN_PASSWORD, PASSWORD } from './constraints.js';
 export { hasNewsletterIntent, HONEYPOT_FIELD, isNewsletterIntent, NEWSLETTER_INTENT_PARAM, NEWSLETTER_INTENT_VALUE, withNewsletterIntent } from './transport.js';

package/dist/styles/base.css

@@ -40,7 +40,7 @@
  * Sizing (padding, widths) stays with the component that adds the class. */
 .control {
 	border: 1px solid var(--color-axis);
-	border-radius: var(--radius);
+	border-radius: var(--radius-control);
 	background: var(--color-surface);
 }
 

package/dist/styles/tokens.css

@@ -50,6 +50,10 @@
 
 	/* Shape & layout */
 	--radius: 8px;
+	/* The corner of an input, a select, a textarea — the `.control` skin.
+	   Separate from `--radius` because a theme that makes its buttons pills
+	   (the admin app sets `--radius: 999px`) still wants a boxed field. */
+	--radius-control: 8px;
 	--radius-lg: 16px;
 	--content-max: 1200px;
 

package/package.json

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

package/dist/components/account/index.d.ts

@@ -1,3 +0,0 @@
-export { default as AccountPanel } from './AccountPanel.svelte';
-export type { DeleteAccountFormInstance, LogoutFormInstance, NewsletterToggleFormInstance, UpdateNameFormInstance } from './AccountPanel.svelte';
-export { default as NewsletterSignup } from './NewsletterSignup.svelte';

package/dist/components/account/index.js

@@ -1,2 +0,0 @@
-export { default as AccountPanel } from './AccountPanel.svelte';
-export { default as NewsletterSignup } from './NewsletterSignup.svelte';

package/dist/components/auth/index.d.ts

@@ -1,7 +0,0 @@
-export { default as AuthPageShell } from './AuthPageShell.svelte';
-export { default as GoogleAuthForm } from './GoogleAuthForm.svelte';
-export type { GoogleLoginFormInstance } from './GoogleAuthForm.svelte';
-export { default as LoginForm } from './LoginForm.svelte';
-export type { LoginFormInstance, MagicLinkFormInstance } from './LoginForm.svelte';
-export { default as SignupForm } from './SignupForm.svelte';
-export type { SignupFormInstance } from './SignupForm.svelte';

package/dist/components/auth/index.js

@@ -1,4 +0,0 @@
-export { default as AuthPageShell } from './AuthPageShell.svelte';
-export { default as GoogleAuthForm } from './GoogleAuthForm.svelte';
-export { default as LoginForm } from './LoginForm.svelte';
-export { default as SignupForm } from './SignupForm.svelte';

package/dist/components/contact/index.d.ts

@@ -1,2 +0,0 @@
-export { default as ContactForm } from './ContactForm.svelte';
-export type { ContactFormInstance } from './ContactForm.svelte';

package/dist/components/contact/index.js

@@ -1 +0,0 @@
-export { default as ContactForm } from './ContactForm.svelte';

package/dist/content/index.d.ts

@@ -1,6 +0,0 @@
-export { renderBody } from './richtext.js';
-export type { RichTextBlock } from './richtext.js';
-export { GET_INVOLVED_REASON_KEYS, PAGE_COPY_KEYS } from './pages.js';
-export type { CopyEditFor, CopyKey, PageCopy, PageId } from './pages.js';
-export { COMMENT_STATUSES, CONTACT_CATEGORIES, MILESTONE_CATEGORIES, PROJECT_KINDS, REACTIONS } from './types.js';
-export type { ArticleEdit, CollaboratorData, CommentData, CommentThreadData, CommentStatus, ContactCategory, FieldConstraint, FormFailReason, JobOpeningData, MilestoneCategory, MilestoneData, ProjectArticleData, ProjectCardData, ProjectKind, Reaction, ReactionSummary, ReactionTarget, SortDirection, TeamMemberData, ThemeData, WeeklyArticleData, WeeklyCardData, WeeklySourceData } from './types.js';

package/dist/content/index.js

@@ -1,3 +0,0 @@
-export { renderBody } from './richtext.js';
-export { GET_INVOLVED_REASON_KEYS, PAGE_COPY_KEYS } from './pages.js';
-export { COMMENT_STATUSES, CONTACT_CATEGORIES, MILESTONE_CATEGORIES, PROJECT_KINDS, REACTIONS } from './types.js';