@vit-foundation/ui 0.11.0 → 0.13.0

package/dist/chrome.d.ts

@@ -4,4 +4,5 @@
  */
 export { default as Footer } from './components/layout/Footer.svelte';
 export { default as Nav } from './components/layout/Nav.svelte';
+export type { SiteLinkEditMap } from './components/layout/site-link-edit.js';
 export { default as PageShell } from './components/layout/PageShell.svelte';

package/dist/components/account/NewsletterSignup.svelte

@@ -44,9 +44,23 @@
 				>
 					{#snippet children(text, attrs)}<span {...attrs}>{text}</span>{/snippet}
 				</Editable>
-				<Link href={withNewsletterIntent('/signup')}>{msg.comments_signupLink()}</Link>
+				<ActionLabel
+					edit={config.messageEdit?.('comments_signupLink')}
+					value={msg.comments_signupLink()}
+				>
+					{#snippet control()}<Link href={withNewsletterIntent('/signup')}
+							>{msg.comments_signupLink()}</Link
+						>{/snippet}
+				</ActionLabel>
 				·
-				<Link href={withNewsletterIntent('/login')}>{msg.comments_loginLink()}</Link>
+				<ActionLabel
+					edit={config.messageEdit?.('comments_loginLink')}
+					value={msg.comments_loginLink()}
+				>
+					{#snippet control()}<Link href={withNewsletterIntent('/login')}
+							>{msg.comments_loginLink()}</Link
+						>{/snippet}
+				</ActionLabel>
 			</p>
 		{:else if account.newsletterSubscribed}
 			<p class="prompt">
@@ -56,7 +70,9 @@
 				>
 					{#snippet children(text, attrs)}<span {...attrs}>{text}</span>{/snippet}
 				</Editable>
-				<Link href="/account">{msg.account_navLabel()}</Link>
+				<ActionLabel edit={config.messageEdit?.('account_navLabel')} value={msg.account_navLabel()}>
+					{#snippet control()}<Link href="/account">{msg.account_navLabel()}</Link>{/snippet}
+				</ActionLabel>
 			</p>
 		{:else}
 			<form {...f}>

package/dist/components/contact/ContactForm.svelte

@@ -20,6 +20,9 @@
 <script lang="ts">
 	import { getUiConfig } from '../../config/context.js';
 	import ActionLabel from '../../edit/ActionLabel.svelte';
+	import EditFrame from '../../edit/chrome/EditFrame.svelte';
+	import EditPanel from '../../edit/chrome/EditPanel.svelte';
+	import { chromeProperty } from '../../edit/helpers.js';
 	import { CONTACT_MESSAGE, CONTACT_NAME, EMAIL } from '../../forms/constraints.js';
 	import { CONTACT_CATEGORIES } from '../../content/types.js';
 	import { contactCategoryLabel } from '../../utils/contact.js';
@@ -49,27 +52,72 @@
 	// what order (the host schema derives its enum from CONTACT_CATEGORIES),
 	// and the messages own the copy for each.
 	const categories = CONTACT_CATEGORIES;
+
+	/**
+	 * An <option> cannot hold a caret, so the category labels edit through
+	 * the frame's panel — one text row per category, over the SAME chrome
+	 * keys the options render. Gated the way the form's other wording is:
+	 * only where the host exposes `messageEdit` (the CMS mirror); the frame
+	 * itself further requires an editing adapter with `saveProperty`.
+	 */
+	const categoryRows = $derived(
+		config.messageEdit
+			? [
+					...categories.map((category) => ({
+						descriptor: chromeProperty(`contact_category_${category}`, {
+							type: 'text' as const,
+							label: contactCategoryLabel(category, msg)
+						}),
+						value: contactCategoryLabel(category, msg)
+					})),
+					// Post-submit feedback never shows while editing (the mirror's
+					// forms are inert), so these two edit here or nowhere in place.
+					{
+						descriptor: chromeProperty('contact_success', {
+							type: 'text' as const,
+							label: msg.contact_success()
+						}),
+						value: msg.contact_success()
+					},
+					{
+						descriptor: chromeProperty('contact_invalid', {
+							type: 'text' as const,
+							label: msg.contact_invalid()
+						}),
+						value: msg.contact_invalid()
+					}
+				]
+			: []
+	);
+	const categoryFrameSpec = $derived(
+		categoryRows.length > 0 ? { label: msg.contact_categoryLabel(), hasPanel: true } : undefined
+	);
 </script>
 
 {#if f.result?.ok}
 	<FormFeedback kind="success">{msg.contact_success()}</FormFeedback>
 {:else}
 	<form class="form-stack" {...f}>
-		<Field
-			id="contact-category"
-			label={msg.contact_categoryLabel()}
-			labelEdit={config.messageEdit?.('contact_categoryLabel')}
-			field={f.fields.category}
-			constraint={null}
-		>
-			{#snippet children(attrs)}
-				<select class="control" {...attrs} {...f.fields.category.as('select')}>
-					{#each categories as category (category)}
-						<option value={category}>{contactCategoryLabel(category, msg)}</option>
-					{/each}
-				</select>
+		<EditFrame spec={categoryFrameSpec}>
+			{#snippet panel()}
+				<EditPanel rows={categoryRows} />
 			{/snippet}
-		</Field>
+			<Field
+				id="contact-category"
+				label={msg.contact_categoryLabel()}
+				labelEdit={config.messageEdit?.('contact_categoryLabel')}
+				field={f.fields.category}
+				constraint={null}
+			>
+				{#snippet children(attrs)}
+					<select class="control" {...attrs} {...f.fields.category.as('select')}>
+						{#each categories as category (category)}
+							<option value={category}>{contactCategoryLabel(category, msg)}</option>
+						{/each}
+					</select>
+				{/snippet}
+			</Field>
+		</EditFrame>
 
 		<Field
 			id="contact-name"

package/dist/components/jobs/JobList.svelte

@@ -1,17 +1,31 @@
 <script module lang="ts">
-	import type { EditDescriptor } from '../../edit/types.js';
+	import type { EditDescriptor, EntityOp, PropertyDescriptor } from '../../edit/types.js';
 
-	/** Which of one opening's localized fields are editable at this render site. */
+	/**
+	 * Which of one opening's fields are editable at this render site:
+	 * localized text inline, the posting date through the frame's panel.
+	 */
 	export interface JobEditMap {
 		title?: EditDescriptor;
 		description?: EditDescriptor;
+		postedOn?: PropertyDescriptor;
+		/** Accessible name for the frame — usually the opening's title. */
+		label?: string;
+		/** Set by the list from its `collection` — removal of this opening. */
+		removeOp?: Extract<EntityOp, { kind: 'remove' }>;
 	}
 </script>
 
 <script lang="ts">
 	import { getUiConfig } from '../../config/context.js';
 	import type { JobOpeningData } from '../../content/types.js';
+	import AddSlot from '../../edit/chrome/AddSlot.svelte';
+	import DraftBadge from '../../edit/chrome/DraftBadge.svelte';
+	import EditFrame from '../../edit/chrome/EditFrame.svelte';
+	import EditPanel from '../../edit/chrome/EditPanel.svelte';
+	import { getEditAdapter } from '../../edit/context.js';
 	import Editable from '../../edit/Editable.svelte';
+	import type { CollectionRef } from '../../edit/types.js';
 	import DateText from '../ui/DateText.svelte';
 
 	interface Props {
@@ -21,37 +35,81 @@
 		 * own identity. Returning undefined leaves that row read-only.
 		 */
 		editFor?: (job: JobOpeningData) => JobEditMap | undefined;
+		/**
+		 * Names the collection the openings belong to. Set alongside an adapter
+		 * with `applyOp`, it turns on the add slot and each frame's remove —
+		 * for rows that carry an `id` (removal needs an identity).
+		 */
+		collection?: CollectionRef;
 	}
 
-	let { jobs, editFor }: Props = $props();
+	let { jobs, editFor, collection }: Props = $props();
 
 	const config = getUiConfig();
+	const adapter = getEditAdapter();
 	const msg = $derived(config.messages);
+
+	const structural = $derived(
+		collection !== undefined && (adapter?.isEditing ?? false) && adapter?.applyOp !== undefined
+	);
+
+	/** The map the host gave, plus removal — the list owns identity. */
+	function editMapFor(job: JobOpeningData): JobEditMap | undefined {
+		const map = editFor?.(job);
+		if (!structural || !collection || job.id === undefined) return map;
+		return { ...map, removeOp: { kind: 'remove', collection, id: job.id } };
+	}
 </script>
 
 {#if jobs.length === 0}
 	<Editable edit={config.messageEdit?.('jobs_empty')} value={msg.jobs_empty()}>
 		{#snippet children(text, attrs)}<p class="empty" {...attrs}>{text}</p>{/snippet}
 	</Editable>
+	{#if structural && collection}
+		<AddSlot op={{ kind: 'create', collection }} />
+	{/if}
 	<Editable edit={config.messageEdit?.('jobs_newsletterNudge')} value={msg.jobs_newsletterNudge()}>
 		{#snippet children(text, attrs)}<p class="nudge" {...attrs}>{text}</p>{/snippet}
 	</Editable>
 {:else}
 	<ul>
 		{#each jobs as job (job.slug)}
-			{@const edit = editFor?.(job)}
+			{@const edit = editMapFor(job)}
+			{@const rows = [edit?.postedOn && { descriptor: edit.postedOn, value: job.postedOn }].filter(
+				(row) => row !== undefined
+			)}
 			<li>
-				<Editable edit={edit?.title} value={job.title}>
-					{#snippet children(text, attrs)}<h3 {...attrs}>{text}</h3>{/snippet}
-				</Editable>
-				<DateText value={job.postedOn} />
-				{#if job.description}
-					<Editable edit={edit?.description} value={job.description}>
-						{#snippet children(text, attrs)}<p {...attrs}>{text}</p>{/snippet}
+				<!-- Inside the li — see CollaboratorList. -->
+				<EditFrame
+					spec={edit && (rows.length > 0 || edit.removeOp)
+						? {
+								label: edit.label ?? job.title,
+								hasPanel: rows.length > 0,
+								removeOp: edit.removeOp
+							}
+						: undefined}
+				>
+					{#snippet panel()}
+						<EditPanel {rows} />
+					{/snippet}
+					<Editable edit={edit?.title} value={job.title}>
+						{#snippet children(text, attrs)}<h3 {...attrs}>{text}</h3>{/snippet}
 					</Editable>
-				{/if}
+					{#if job.draft}<DraftBadge />{/if}
+					<DateText value={job.postedOn} />
+					{#if job.description}
+						<Editable edit={edit?.description} value={job.description}>
+							{#snippet children(text, attrs)}<p {...attrs}>{text}</p>{/snippet}
+						</Editable>
+					{/if}
+				</EditFrame>
 			</li>
 		{/each}
+		{#if structural && collection}
+			<li class="add-slot">
+				<AddSlot op={{ kind: 'create', collection }} />
+			</li>
+		{/if}
 	</ul>
 	<Editable edit={config.messageEdit?.('jobs_newsletterNudge')} value={msg.jobs_newsletterNudge()}>
 		{#snippet children(text, attrs)}<p class="nudge" {...attrs}>{text}</p>{/snippet}
@@ -91,4 +149,9 @@
 	.nudge {
 		color: var(--color-ink-secondary);
 	}
+
+	li.add-slot {
+		background: none;
+		padding: 0;
+	}
 </style>

package/dist/components/jobs/JobList.svelte.d.ts

@@ -1,10 +1,21 @@
-import type { EditDescriptor } from '../../edit/types.js';
-/** Which of one opening's localized fields are editable at this render site. */
+import type { EditDescriptor, EntityOp, PropertyDescriptor } from '../../edit/types.js';
+/**
+ * Which of one opening's fields are editable at this render site:
+ * localized text inline, the posting date through the frame's panel.
+ */
 export interface JobEditMap {
     title?: EditDescriptor;
     description?: EditDescriptor;
+    postedOn?: PropertyDescriptor;
+    /** Accessible name for the frame — usually the opening's title. */
+    label?: string;
+    /** Set by the list from its `collection` — removal of this opening. */
+    removeOp?: Extract<EntityOp, {
+        kind: 'remove';
+    }>;
 }
 import type { JobOpeningData } from '../../content/types.js';
+import type { CollectionRef } from '../../edit/types.js';
 interface Props {
     jobs: JobOpeningData[];
     /**
@@ -12,6 +23,12 @@ interface Props {
      * own identity. Returning undefined leaves that row read-only.
      */
     editFor?: (job: JobOpeningData) => JobEditMap | undefined;
+    /**
+     * Names the collection the openings belong to. Set alongside an adapter
+     * with `applyOp`, it turns on the add slot and each frame's remove —
+     * for rows that carry an `id` (removal needs an identity).
+     */
+    collection?: CollectionRef;
 }
 declare const JobList: import("svelte").Component<Props, {}, "">;
 type JobList = ReturnType<typeof JobList>;

package/dist/components/layout/Footer.svelte

@@ -2,9 +2,14 @@
 	import { getUiConfig } from '../../config/context.js';
 	import type { SiteLink } from '../../config/types.js';
 	import ActionLabel from '../../edit/ActionLabel.svelte';
+	import AddSlot from '../../edit/chrome/AddSlot.svelte';
+	import EditFrame from '../../edit/chrome/EditFrame.svelte';
+	import EditPanel from '../../edit/chrome/EditPanel.svelte';
+	import { getEditAdapter } from '../../edit/context.js';
 	import Editable from '../../edit/Editable.svelte';
-	import type { EditDescriptor } from '../../edit/types.js';
+	import type { CollectionRef, EditDescriptor } from '../../edit/types.js';
 	import Link from '../ui/Link.svelte';
+	import type { SiteLinkEditMap } from './site-link-edit.js';
 
 	/**
 	 * The links are a prop rather than a package constant: the host app owns
@@ -15,11 +20,34 @@
 		links: SiteLink[];
 		/** Edit descriptors for the link labels — see Nav. */
 		editFor?: (link: SiteLink) => EditDescriptor | undefined;
+		/** Panel rows (href, order) per link — see Nav. */
+		propertiesFor?: (link: SiteLink) => SiteLinkEditMap | undefined;
+		/** Names the links' collection; with `applyOp`, turns on add/remove. */
+		collection?: CollectionRef;
 	}
 
-	let { links, editFor = undefined }: Props = $props();
+	let { links, editFor = undefined, propertiesFor = undefined, collection }: Props = $props();
 
 	const config = getUiConfig();
+	const adapter = getEditAdapter();
+
+	const structural = $derived(
+		collection !== undefined && (adapter?.isEditing ?? false) && adapter?.applyOp !== undefined
+	);
+
+	/** The map the host gave, plus removal — the list owns identity. */
+	function editMapFor(link: SiteLink): SiteLinkEditMap | undefined {
+		const map = propertiesFor?.(link);
+		if (!structural || !collection || link.id === undefined) return map;
+		return { ...map, removeOp: { kind: 'remove', collection, id: link.id } };
+	}
+
+	function rowsFor(link: SiteLink, map: SiteLinkEditMap | undefined) {
+		return [
+			map?.href && { descriptor: map.href, value: link.href },
+			map?.order && { descriptor: map.order, value: String(link.order ?? 0) }
+		].filter((row) => row !== undefined);
+	}
 
 	const year = new Date().getFullYear();
 </script>
@@ -31,12 +59,33 @@
 		</span>
 		<ul>
 			{#each links as link (link.href)}
+				{@const map = editMapFor(link)}
+				{@const rows = rowsFor(link, map)}
 				<li>
-					<ActionLabel edit={editFor?.(link)} value={link.label}>
-						{#snippet control()}<Link href={link.href}>{link.label}</Link>{/snippet}
-					</ActionLabel>
+					<!-- Inside the li, so the list's flex layout never gains a child. -->
+					<EditFrame
+						spec={map && (rows.length > 0 || map.removeOp)
+							? {
+									label: map.label ?? link.label,
+									hasPanel: rows.length > 0,
+									removeOp: map.removeOp
+								}
+							: undefined}
+					>
+						{#snippet panel()}
+							<EditPanel {rows} />
+						{/snippet}
+						<ActionLabel edit={editFor?.(link)} value={link.label}>
+							{#snippet control()}<Link href={link.href}>{link.label}</Link>{/snippet}
+						</ActionLabel>
+					</EditFrame>
 				</li>
 			{/each}
+			{#if structural && collection}
+				<li>
+					<AddSlot op={{ kind: 'create', collection }} />
+				</li>
+			{/if}
 		</ul>
 		<p class="rights">
 			© {year}

package/dist/components/layout/Footer.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { SiteLink } from '../../config/types.js';
-import type { EditDescriptor } from '../../edit/types.js';
+import type { CollectionRef, EditDescriptor } from '../../edit/types.js';
+import type { SiteLinkEditMap } from './site-link-edit.js';
 /**
  * The links are a prop rather than a package constant: the host app owns
  * its routes, and Nav and Footer render the same list — the foundation
@@ -9,6 +10,10 @@ interface Props {
     links: SiteLink[];
     /** Edit descriptors for the link labels — see Nav. */
     editFor?: (link: SiteLink) => EditDescriptor | undefined;
+    /** Panel rows (href, order) per link — see Nav. */
+    propertiesFor?: (link: SiteLink) => SiteLinkEditMap | undefined;
+    /** Names the links' collection; with `applyOp`, turns on add/remove. */
+    collection?: CollectionRef;
 }
 declare const Footer: import("svelte").Component<Props, {}, "">;
 type Footer = ReturnType<typeof Footer>;

package/dist/components/layout/Nav.svelte

@@ -2,10 +2,15 @@
 	import { getUiConfig } from '../../config/context.js';
 	import type { SiteLink } from '../../config/types.js';
 	import ActionLabel from '../../edit/ActionLabel.svelte';
-	import type { EditDescriptor } from '../../edit/types.js';
+	import AddSlot from '../../edit/chrome/AddSlot.svelte';
+	import EditFrame from '../../edit/chrome/EditFrame.svelte';
+	import EditPanel from '../../edit/chrome/EditPanel.svelte';
+	import { getEditAdapter } from '../../edit/context.js';
+	import type { CollectionRef, EditDescriptor } from '../../edit/types.js';
 	import { isPathUnder } from '../../utils/paths.js';
 	import GhostButton from '../ui/GhostButton.svelte';
 	import Link from '../ui/Link.svelte';
+	import type { SiteLinkEditMap } from './site-link-edit.js';
 
 	interface Props {
 		/**
@@ -25,11 +30,41 @@
 		 * text instead of an anchor (see ActionLabel).
 		 */
 		editFor?: (link: SiteLink) => EditDescriptor | undefined;
+		/** Panel rows (href, order) per link — the label edits via `editFor`. */
+		propertiesFor?: (link: SiteLink) => SiteLinkEditMap | undefined;
+		/** Names the links' collection; with `applyOp`, turns on add/remove. */
+		collection?: CollectionRef;
 	}
 
-	let { links, account = null, url = undefined, editFor = undefined }: Props = $props();
+	let {
+		links,
+		account = null,
+		url = undefined,
+		editFor = undefined,
+		propertiesFor = undefined,
+		collection
+	}: Props = $props();
 
 	const config = getUiConfig();
+	const adapter = getEditAdapter();
+
+	const structural = $derived(
+		collection !== undefined && (adapter?.isEditing ?? false) && adapter?.applyOp !== undefined
+	);
+
+	/** The map the host gave, plus removal — the list owns identity. */
+	function editMapFor(link: SiteLink): SiteLinkEditMap | undefined {
+		const map = propertiesFor?.(link);
+		if (!structural || !collection || link.id === undefined) return map;
+		return { ...map, removeOp: { kind: 'remove', collection, id: link.id } };
+	}
+
+	function rowsFor(link: SiteLink, map: SiteLinkEditMap | undefined) {
+		return [
+			map?.href && { descriptor: map.href, value: link.href },
+			map?.order && { descriptor: map.order, value: String(link.order ?? 0) }
+		].filter((row) => row !== undefined);
+	}
 	const msg = $derived(config.messages);
 
 	let isMenuOpen = $state(false);
@@ -85,16 +120,37 @@
 		<div class="menu" id="site-menu" class:open={isMenuOpen}>
 			<ul class="links">
 				{#each links as link (link.href)}
+					{@const map = editMapFor(link)}
+					{@const rows = rowsFor(link, map)}
 					<li>
-						<ActionLabel edit={editFor?.(link)} value={link.label}>
-							{#snippet control()}
-								<Link href={link.href} aria-current={isCurrent(link.href) ? 'page' : undefined}>
-									{link.label}
-								</Link>
+						<!-- Inside the li, so the row's layout never gains a child. -->
+						<EditFrame
+							spec={map && (rows.length > 0 || map.removeOp)
+								? {
+										label: map.label ?? link.label,
+										hasPanel: rows.length > 0,
+										removeOp: map.removeOp
+									}
+								: undefined}
+						>
+							{#snippet panel()}
+								<EditPanel {rows} />
 							{/snippet}
-						</ActionLabel>
+							<ActionLabel edit={editFor?.(link)} value={link.label}>
+								{#snippet control()}
+									<Link href={link.href} aria-current={isCurrent(link.href) ? 'page' : undefined}>
+										{link.label}
+									</Link>
+								{/snippet}
+							</ActionLabel>
+						</EditFrame>
 					</li>
 				{/each}
+				{#if structural && collection}
+					<li>
+						<AddSlot op={{ kind: 'create', collection }} />
+					</li>
+				{/if}
 			</ul>
 
 			{#if account}

package/dist/components/layout/Nav.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { SiteLink } from '../../config/types.js';
-import type { EditDescriptor } from '../../edit/types.js';
+import type { CollectionRef, EditDescriptor } from '../../edit/types.js';
+import type { SiteLinkEditMap } from './site-link-edit.js';
 interface Props {
     /**
      * Primary navigation entries. A prop rather than a package constant:
@@ -20,6 +21,10 @@ interface Props {
      * text instead of an anchor (see ActionLabel).
      */
     editFor?: (link: SiteLink) => EditDescriptor | undefined;
+    /** Panel rows (href, order) per link — the label edits via `editFor`. */
+    propertiesFor?: (link: SiteLink) => SiteLinkEditMap | undefined;
+    /** Names the links' collection; with `applyOp`, turns on add/remove. */
+    collection?: CollectionRef;
 }
 declare const Nav: import("svelte").Component<Props, {}, "">;
 type Nav = ReturnType<typeof Nav>;

package/dist/components/layout/site-link-edit.d.ts

@@ -0,0 +1,17 @@
+import type { EntityOp, PropertyDescriptor } from '../../edit/types.js';
+/**
+ * What the CMS may edit on one nav/footer link beyond its LABEL (which edits
+ * through the existing `editFor` ActionLabel swap): the href and the display
+ * order are panel rows, and removal arrives injected by the list from its
+ * `collection` — the Timeline/CollaboratorList pattern.
+ */
+export interface SiteLinkEditMap {
+    href?: PropertyDescriptor;
+    order?: PropertyDescriptor;
+    /** Accessible name for the frame, defaulting to the link's label. */
+    label?: string;
+    /** Set by the list from its `collection` — removal of this row. */
+    removeOp?: Extract<EntityOp, {
+        kind: 'remove';
+    }>;
+}

package/dist/components/layout/site-link-edit.js

@@ -0,0 +1 @@
+export {};