@vit-foundation/ui 0.11.0 → 0.12.0

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,54 @@
 	// 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)
+				}))
+			: []
+	);
+	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,30 @@
 <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 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 +34,80 @@
 		 * 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}
+					<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 +147,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/projects/ProjectCard.svelte

@@ -1,10 +1,19 @@
 <script module lang="ts">
-	import type { EditDescriptor } from '../../edit/types.js';
+	import type { EditDescriptor, PropertyDescriptor } from '../../edit/types.js';
 
-	/** Which of the card's localized fields are editable at this render site. */
+	/**
+	 * Which of the card's fields are editable at this render site: localized
+	 * text inline, the record-shaped scalars through the frame's panel.
+	 */
 	export interface ProjectEditMap {
 		title?: EditDescriptor;
 		excerpt?: EditDescriptor;
+		kind?: PropertyDescriptor;
+		publishedOn?: PropertyDescriptor;
+		externalUrl?: PropertyDescriptor;
+		image?: PropertyDescriptor;
+		/** Accessible name for the frame, e.g. the project's title. */
+		label?: string;
 	}
 </script>
 
@@ -14,6 +23,8 @@
 	import type { ProjectCardData } from '../../content/types.js';
 	import { getEditAdapter } from '../../edit/context.js';
 	import Editable from '../../edit/Editable.svelte';
+	import EditFrame from '../../edit/chrome/EditFrame.svelte';
+	import EditPanel from '../../edit/chrome/EditPanel.svelte';
 	import CardMedia from '../ui/CardMedia.svelte';
 	import CardTitle from '../ui/CardTitle.svelte';
 	import DateText from '../ui/DateText.svelte';
@@ -35,41 +46,75 @@
 	// See WeeklieCard: an editing title renders as plain text, never inside
 	// the story link or the external anchor.
 	const titleEditing = $derived(edit?.title !== undefined && (adapter?.isEditing ?? false));
+
+	/**
+	 * Default kind options are the raw union members: no message keys exist
+	 * for them, and a host wanting worded labels passes `options` in its
+	 * descriptor, which wins over these (same spread rule as the milestone
+	 * category select).
+	 */
+	const KIND_OPTIONS = [
+		{ value: 'collaboration', label: 'Collaboration' },
+		{ value: 'passion', label: 'Passion' }
+	];
+
+	const panelRows = $derived(
+		[
+			edit?.kind && {
+				descriptor: { options: KIND_OPTIONS, ...edit.kind },
+				value: project.kind as string
+			},
+			edit?.publishedOn && { descriptor: edit.publishedOn, value: project.publishedOn },
+			edit?.externalUrl && { descriptor: edit.externalUrl, value: project.externalUrl },
+			edit?.image && { descriptor: edit.image, value: project.imageUrl }
+		].filter((row) => row !== undefined)
+	);
+	const frameSpec = $derived(
+		edit && panelRows.length > 0
+			? { label: edit.label ?? project.title, hasPanel: true }
+			: undefined
+	);
 </script>
 
 <article class={variant}>
-	<CardMedia src={project.imageUrl} alt="" ratio="16 / 9" width="1200" height="675" />
-	<div class="text">
-		<DateText value={project.publishedOn} />
-		<CardTitle>
-			{#if titleEditing}
-				<Editable edit={edit?.title} value={project.title}>
-					{#snippet children(text, attrs)}<span {...attrs}>{text}</span>{/snippet}
-				</Editable>
-			{:else if project.hasStory}
-				<Link href={`/what-we-do/${project.slug}`}>{project.title}</Link>
-			{:else if project.externalUrl}
-				<a href={project.externalUrl} rel="external noopener">{project.title}</a>
-			{:else}
-				{project.title}
+	<!-- Inside the article — see WeeklieCard. -->
+	<EditFrame spec={frameSpec}>
+		{#snippet panel()}
+			<EditPanel rows={panelRows} />
+		{/snippet}
+		<CardMedia src={project.imageUrl} alt="" ratio="16 / 9" width="1200" height="675" />
+		<div class="text">
+			<DateText value={project.publishedOn} />
+			<CardTitle>
+				{#if titleEditing}
+					<Editable edit={edit?.title} value={project.title}>
+						{#snippet children(text, attrs)}<span {...attrs}>{text}</span>{/snippet}
+					</Editable>
+				{:else if project.hasStory}
+					<Link href={`/what-we-do/${project.slug}`}>{project.title}</Link>
+				{:else if project.externalUrl}
+					<a href={project.externalUrl} rel="external noopener">{project.title}</a>
+				{:else}
+					{project.title}
+				{/if}
+			</CardTitle>
+			<Editable edit={edit?.excerpt} value={project.excerpt}>
+				{#snippet children(text, attrs)}<p {...attrs}>{text}</p>{/snippet}
+			</Editable>
+			{#if project.hasStory}
+				<ActionLabel
+					edit={config.messageEdit?.('common_readMore')}
+					value={config.messages.common_readMore()}
+				>
+					{#snippet control()}
+						<Link href={`/what-we-do/${project.slug}`} class="more">
+							{config.messages.common_readMore()}
+						</Link>
+					{/snippet}
+				</ActionLabel>
 			{/if}
-		</CardTitle>
-		<Editable edit={edit?.excerpt} value={project.excerpt}>
-			{#snippet children(text, attrs)}<p {...attrs}>{text}</p>{/snippet}
-		</Editable>
-		{#if project.hasStory}
-			<ActionLabel
-				edit={config.messageEdit?.('common_readMore')}
-				value={config.messages.common_readMore()}
-			>
-				{#snippet control()}
-					<Link href={`/what-we-do/${project.slug}`} class="more">
-						{config.messages.common_readMore()}
-					</Link>
-				{/snippet}
-			</ActionLabel>
-		{/if}
-	</div>
+		</div>
+	</EditFrame>
 </article>
 
 <style>

package/dist/components/projects/ProjectCard.svelte.d.ts

@@ -1,8 +1,17 @@
-import type { EditDescriptor } from '../../edit/types.js';
-/** Which of the card's localized fields are editable at this render site. */
+import type { EditDescriptor, PropertyDescriptor } from '../../edit/types.js';
+/**
+ * Which of the card's fields are editable at this render site: localized
+ * text inline, the record-shaped scalars through the frame's panel.
+ */
 export interface ProjectEditMap {
     title?: EditDescriptor;
     excerpt?: EditDescriptor;
+    kind?: PropertyDescriptor;
+    publishedOn?: PropertyDescriptor;
+    externalUrl?: PropertyDescriptor;
+    image?: PropertyDescriptor;
+    /** Accessible name for the frame, e.g. the project's title. */
+    label?: string;
 }
 import type { ProjectCardData } from '../../content/types.js';
 interface Props {

package/dist/components/team/CollaboratorList.svelte

@@ -1,25 +1,99 @@
+<script module lang="ts">
+	import type { EntityOp, PropertyDescriptor } from '../../edit/types.js';
+
+	/**
+	 * A collaborator is three plain (non-localized) columns, so everything
+	 * edits through the frame's PANEL — the per-locale inline contract does
+	 * not apply to any of it.
+	 */
+	export interface CollaboratorEditMap {
+		personName?: PropertyDescriptor;
+		affiliation?: PropertyDescriptor;
+		url?: PropertyDescriptor;
+		/** Accessible name for the frame — usually the person's name. */
+		label?: string;
+		/** Set by the list from its `collection` — removal of this row. */
+		removeOp?: Extract<EntityOp, { kind: 'remove' }>;
+	}
+</script>
+
 <script lang="ts">
 	import type { CollaboratorData } from '../../content/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 } from '../../edit/types.js';
 
 	interface Props {
 		collaborators: CollaboratorData[];
+		/** Edit descriptors per row; returning undefined leaves it read-only. */
+		editFor?: (collaborator: CollaboratorData) => CollaboratorEditMap | undefined;
+		/**
+		 * Names the collection these rows 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 { collaborators }: Props = $props();
+	let { collaborators, editFor, collection }: Props = $props();
+
+	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(collaborator: CollaboratorData): CollaboratorEditMap | undefined {
+		const map = editFor?.(collaborator);
+		if (!structural || !collection || collaborator.id === undefined) return map;
+		return { ...map, removeOp: { kind: 'remove', collection, id: collaborator.id } };
+	}
+
+	function rowsFor(collaborator: CollaboratorData, map: CollaboratorEditMap | undefined) {
+		return [
+			map?.personName && { descriptor: map.personName, value: collaborator.personName },
+			map?.affiliation && { descriptor: map.affiliation, value: collaborator.affiliation },
+			map?.url && { descriptor: map.url, value: collaborator.url }
+		].filter((row) => row !== undefined);
+	}
 </script>
 
 <ul>
-	{#each collaborators as collaborator (collaborator.personName + collaborator.affiliation)}
+	{#each collaborators as collaborator (collaborator.id ?? collaborator.personName + collaborator.affiliation)}
+		{@const map = editMapFor(collaborator)}
+		{@const rows = rowsFor(collaborator, map)}
 		<li>
-			<strong>{collaborator.personName}</strong>
-			·
-			{#if collaborator.url}
-				<a href={collaborator.url} rel="external noopener">{collaborator.affiliation}</a>
-			{:else}
-				{collaborator.affiliation}
-			{/if}
+			<!-- Inside the li, so the list's own layout never gains a child. -->
+			<EditFrame
+				spec={map && (rows.length > 0 || map.removeOp)
+					? {
+							label: map.label ?? collaborator.personName,
+							hasPanel: rows.length > 0,
+							removeOp: map.removeOp
+						}
+					: undefined}
+			>
+				{#snippet panel()}
+					<EditPanel {rows} />
+				{/snippet}
+				<strong>{collaborator.personName}</strong>
+				·
+				{#if collaborator.url}
+					<a href={collaborator.url} rel="external noopener">{collaborator.affiliation}</a>
+				{:else}
+					{collaborator.affiliation}
+				{/if}
+			</EditFrame>
 		</li>
 	{/each}
+	{#if structural && collection}
+		<li class="add-slot">
+			<AddSlot op={{ kind: 'create', collection }} />
+		</li>
+	{/if}
 </ul>
 
 <style>
@@ -34,4 +108,8 @@
 	a {
 		color: var(--color-brand);
 	}
+
+	li.add-slot {
+		list-style: none;
+	}
 </style>

package/dist/components/team/CollaboratorList.svelte.d.ts

@@ -1,6 +1,32 @@
+import type { EntityOp, PropertyDescriptor } from '../../edit/types.js';
+/**
+ * A collaborator is three plain (non-localized) columns, so everything
+ * edits through the frame's PANEL — the per-locale inline contract does
+ * not apply to any of it.
+ */
+export interface CollaboratorEditMap {
+    personName?: PropertyDescriptor;
+    affiliation?: PropertyDescriptor;
+    url?: PropertyDescriptor;
+    /** Accessible name for the frame — usually the person's name. */
+    label?: string;
+    /** Set by the list from its `collection` — removal of this row. */
+    removeOp?: Extract<EntityOp, {
+        kind: 'remove';
+    }>;
+}
 import type { CollaboratorData } from '../../content/types.js';
+import type { CollectionRef } from '../../edit/types.js';
 interface Props {
     collaborators: CollaboratorData[];
+    /** Edit descriptors per row; returning undefined leaves it read-only. */
+    editFor?: (collaborator: CollaboratorData) => CollaboratorEditMap | undefined;
+    /**
+     * Names the collection these rows 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 CollaboratorList: import("svelte").Component<Props, {}, "">;
 type CollaboratorList = ReturnType<typeof CollaboratorList>;

package/dist/components/team/TeamMemberCard.svelte

@@ -1,20 +1,26 @@
 <script module lang="ts">
-	import type { EditDescriptor } from '../../edit/types.js';
+	import type { EditDescriptor, PropertyDescriptor } from '../../edit/types.js';
 
 	/**
-	 * Which of the card's localized fields are editable at this render site.
-	 * `name` is deliberately absent: it is a plain-text column, not a
-	 * localized one, so the per-locale save contract does not apply to it.
+	 * Which of the card's fields are editable at this render site. `name` and
+	 * `photo` are plain (non-localized) columns, so they edit through the
+	 * frame's PANEL — the per-locale inline contract does not apply to them.
 	 */
 	export interface TeamMemberEditMap {
 		role?: EditDescriptor;
 		bio?: EditDescriptor;
+		name?: PropertyDescriptor;
+		photo?: PropertyDescriptor;
+		/** Accessible name for the frame — usually the member's name. */
+		label?: string;
 	}
 </script>
 
 <script lang="ts">
 	import type { TeamMemberData } from '../../content/types.js';
 	import Editable from '../../edit/Editable.svelte';
+	import EditFrame from '../../edit/chrome/EditFrame.svelte';
+	import EditPanel from '../../edit/chrome/EditPanel.svelte';
 	import CardMedia from '../ui/CardMedia.svelte';
 
 	interface Props {
@@ -26,25 +32,41 @@
 	}
 
 	let { member, variant = 'board', edit }: Props = $props();
+
+	const panelRows = $derived(
+		[
+			edit?.name && { descriptor: edit.name, value: member.name },
+			edit?.photo && { descriptor: edit.photo, value: member.photoUrl }
+		].filter((row) => row !== undefined)
+	);
+	const frameSpec = $derived(
+		edit && panelRows.length > 0 ? { label: edit.label ?? member.name, hasPanel: true } : undefined
+	);
 </script>
 
 <article class={variant}>
-	<CardMedia
-		src={member.photoUrl}
-		alt={member.name}
-		ratio={variant === 'featured' ? '4 / 5' : '1 / 1'}
-		width="400"
-		height="500"
-	/>
-	<h3>{member.name}</h3>
-	<Editable edit={edit?.role} value={member.role}>
-		{#snippet children(text, attrs)}<p class="role" {...attrs}>{text}</p>{/snippet}
-	</Editable>
-	{#if member.bio}
-		<Editable edit={edit?.bio} value={member.bio}>
-			{#snippet children(text, attrs)}<p class="bio" {...attrs}>{text}</p>{/snippet}
+	<!-- Inside the article — see WeeklieCard. -->
+	<EditFrame spec={frameSpec}>
+		{#snippet panel()}
+			<EditPanel rows={panelRows} />
+		{/snippet}
+		<CardMedia
+			src={member.photoUrl}
+			alt={member.name}
+			ratio={variant === 'featured' ? '4 / 5' : '1 / 1'}
+			width="400"
+			height="500"
+		/>
+		<h3>{member.name}</h3>
+		<Editable edit={edit?.role} value={member.role}>
+			{#snippet children(text, attrs)}<p class="role" {...attrs}>{text}</p>{/snippet}
 		</Editable>
-	{/if}
+		{#if member.bio}
+			<Editable edit={edit?.bio} value={member.bio}>
+				{#snippet children(text, attrs)}<p class="bio" {...attrs}>{text}</p>{/snippet}
+			</Editable>
+		{/if}
+	</EditFrame>
 </article>
 
 <style>

package/dist/components/team/TeamMemberCard.svelte.d.ts

@@ -1,12 +1,16 @@
-import type { EditDescriptor } from '../../edit/types.js';
+import type { EditDescriptor, PropertyDescriptor } from '../../edit/types.js';
 /**
- * Which of the card's localized fields are editable at this render site.
- * `name` is deliberately absent: it is a plain-text column, not a
- * localized one, so the per-locale save contract does not apply to it.
+ * Which of the card's fields are editable at this render site. `name` and
+ * `photo` are plain (non-localized) columns, so they edit through the
+ * frame's PANEL — the per-locale inline contract does not apply to them.
  */
 export interface TeamMemberEditMap {
     role?: EditDescriptor;
     bio?: EditDescriptor;
+    name?: PropertyDescriptor;
+    photo?: PropertyDescriptor;
+    /** Accessible name for the frame — usually the member's name. */
+    label?: string;
 }
 import type { TeamMemberData } from '../../content/types.js';
 interface Props {

package/dist/components/ui/SearchInput.svelte

@@ -1,4 +1,8 @@
 <script lang="ts">
+	import EditFrame from '../../edit/chrome/EditFrame.svelte';
+	import EditPanel from '../../edit/chrome/EditPanel.svelte';
+	import type { PropertyDescriptor } from '../../edit/types.js';
+
 	interface Props {
 		/** Ties the label to the input; override when a page renders two. */
 		id?: string;
@@ -8,6 +12,12 @@
 		/** Called after the debounce delay with the trimmed query. */
 		onsearch: (query: string) => void;
 		debounceMs?: number;
+		/**
+		 * A placeholder cannot hold a caret, so it edits through the frame's
+		 * panel: one text row over whatever the host's descriptor names
+		 * (a chrome key on the foundation site). Inert without an adapter.
+		 */
+		placeholderEdit?: PropertyDescriptor;
 	}
 
 	const DEFAULT_DEBOUNCE_MS = 300;
@@ -18,9 +28,12 @@
 		placeholder,
 		label,
 		onsearch,
-		debounceMs = DEFAULT_DEBOUNCE_MS
+		debounceMs = DEFAULT_DEBOUNCE_MS,
+		placeholderEdit
 	}: Props = $props();
 
+	const frameSpec = $derived(placeholderEdit !== undefined ? { label, hasPanel: true } : undefined);
+
 	// svelte-ignore state_referenced_locally
 	let query = $state(value);
 	let timer: ReturnType<typeof setTimeout> | undefined;
@@ -70,15 +83,23 @@
 </script>
 
 <form role="search" onsubmit={handleSubmit}>
-	<label class="visually-hidden" for={id}>{label}</label>
-	<input
-		{id}
-		class="control"
-		type="search"
-		{placeholder}
-		bind:value={query}
-		oninput={handleInput}
-	/>
+	<!-- Inside the form, so the host's toolbar layout never gains a child. -->
+	<EditFrame spec={frameSpec}>
+		{#snippet panel()}
+			{#if placeholderEdit}
+				<EditPanel rows={[{ descriptor: placeholderEdit, value: placeholder }]} />
+			{/if}
+		{/snippet}
+		<label class="visually-hidden" for={id}>{label}</label>
+		<input
+			{id}
+			class="control"
+			type="search"
+			{placeholder}
+			bind:value={query}
+			oninput={handleInput}
+		/>
+	</EditFrame>
 </form>
 
 <style>

package/dist/components/ui/SearchInput.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { PropertyDescriptor } from '../../edit/types.js';
 interface Props {
     /** Ties the label to the input; override when a page renders two. */
     id?: string;
@@ -7,6 +8,12 @@ interface Props {
     /** Called after the debounce delay with the trimmed query. */
     onsearch: (query: string) => void;
     debounceMs?: number;
+    /**
+     * A placeholder cannot hold a caret, so it edits through the frame's
+     * panel: one text row over whatever the host's descriptor names
+     * (a chrome key on the foundation site). Inert without an adapter.
+     */
+    placeholderEdit?: PropertyDescriptor;
 }
 declare const SearchInput: import("svelte").Component<Props, {}, "">;
 type SearchInput = ReturnType<typeof SearchInput>;

package/dist/components/weeklies/SortSelect.svelte

@@ -2,34 +2,64 @@
 	import { getUiConfig } from '../../config/context.js';
 	import type { SortDirection } from '../../content/types.js';
 	import ActionLabel from '../../edit/ActionLabel.svelte';
+	import EditFrame from '../../edit/chrome/EditFrame.svelte';
+	import EditPanel from '../../edit/chrome/EditPanel.svelte';
+	import type { PropertyDescriptor } from '../../edit/types.js';
 
 	interface Props {
 		value: SortDirection;
 		onchange: (value: SortDirection) => void;
+		/**
+		 * An <option> cannot hold a caret, so the option labels edit through
+		 * the frame's panel — one text row per direction, descriptors from the
+		 * host (chrome keys on the foundation site). The visible label keeps
+		 * its ActionLabel swap. Inert without an adapter.
+		 */
+		optionsEdit?: (direction: SortDirection) => PropertyDescriptor | undefined;
 	}
 
-	let { value, onchange }: Props = $props();
+	let { value, onchange, optionsEdit }: Props = $props();
 
 	const config = getUiConfig();
 	const msg = $derived(config.messages);
 
+	const panelRows = $derived(
+		(
+			[
+				['desc', msg.weeklies_sortDesc()],
+				['asc', msg.weeklies_sortAsc()]
+			] as const
+		).flatMap(([direction, label]) => {
+			const descriptor = optionsEdit?.(direction);
+			return descriptor ? [{ descriptor, value: label }] : [];
+		})
+	);
+	const frameSpec = $derived(
+		panelRows.length > 0 ? { label: msg.weeklies_sortLabel(), hasPanel: true } : undefined
+	);
+
 	function handleChange(event: Event): void {
 		const target = event.currentTarget as HTMLSelectElement;
 		onchange(target.value === 'asc' ? 'asc' : 'desc');
 	}
 </script>
 
-<ActionLabel edit={config.messageEdit?.('weeklies_sortLabel')} value={msg.weeklies_sortLabel()}>
-	{#snippet control()}
-		<label>
-			<span>{msg.weeklies_sortLabel()}</span>
-			<select class="control" {value} onchange={handleChange}>
-				<option value="desc">{msg.weeklies_sortDesc()}</option>
-				<option value="asc">{msg.weeklies_sortAsc()}</option>
-			</select>
-		</label>
+<EditFrame spec={frameSpec}>
+	{#snippet panel()}
+		<EditPanel rows={panelRows} />
 	{/snippet}
-</ActionLabel>
+	<ActionLabel edit={config.messageEdit?.('weeklies_sortLabel')} value={msg.weeklies_sortLabel()}>
+		{#snippet control()}
+			<label>
+				<span>{msg.weeklies_sortLabel()}</span>
+				<select class="control" {value} onchange={handleChange}>
+					<option value="desc">{msg.weeklies_sortDesc()}</option>
+					<option value="asc">{msg.weeklies_sortAsc()}</option>
+				</select>
+			</label>
+		{/snippet}
+	</ActionLabel>
+</EditFrame>
 
 <style>
 	label {

package/dist/components/weeklies/SortSelect.svelte.d.ts

@@ -1,7 +1,15 @@
 import type { SortDirection } from '../../content/types.js';
+import type { PropertyDescriptor } from '../../edit/types.js';
 interface Props {
     value: SortDirection;
     onchange: (value: SortDirection) => void;
+    /**
+     * An <option> cannot hold a caret, so the option labels edit through
+     * the frame's panel — one text row per direction, descriptors from the
+     * host (chrome keys on the foundation site). The visible label keeps
+     * its ActionLabel swap. Inert without an adapter.
+     */
+    optionsEdit?: (direction: SortDirection) => PropertyDescriptor | undefined;
 }
 declare const SortSelect: import("svelte").Component<Props, {}, "">;
 type SortSelect = ReturnType<typeof SortSelect>;

package/dist/components/weeklies/WeeklieCard.svelte

@@ -1,10 +1,17 @@
 <script module lang="ts">
-	import type { EditDescriptor } from '../../edit/types.js';
+	import type { EditDescriptor, PropertyDescriptor } from '../../edit/types.js';
 
-	/** Which of the card's localized fields are editable at this render site. */
+	/**
+	 * Which of the card's fields are editable at this render site: localized
+	 * text inline, the cover image through the frame's panel. NO collection
+	 * ops — weeklies keep their own authoring flow in the CMS.
+	 */
 	export interface WeeklyEditMap {
 		title?: EditDescriptor;
 		excerpt?: EditDescriptor;
+		image?: PropertyDescriptor;
+		/** Accessible name for the frame, e.g. "Weekly #12". */
+		label?: string;
 	}
 </script>
 
@@ -13,6 +20,8 @@
 	import type { WeeklyCardData } from '../../content/types.js';
 	import { getEditAdapter } from '../../edit/context.js';
 	import Editable from '../../edit/Editable.svelte';
+	import EditFrame from '../../edit/chrome/EditFrame.svelte';
+	import EditPanel from '../../edit/chrome/EditPanel.svelte';
 	import CardMedia from '../ui/CardMedia.svelte';
 	import CardTitle from '../ui/CardTitle.svelte';
 	import DateText from '../ui/DateText.svelte';
@@ -33,26 +42,42 @@
 	// a contenteditable inside an anchor still navigates on click, which
 	// would throw the editor off the page mid-draft.
 	const titleEditing = $derived(edit?.title !== undefined && (adapter?.isEditing ?? false));
+
+	const panelRows = $derived(
+		[edit?.image && { descriptor: edit.image, value: weekly.imageUrl }].filter(
+			(row) => row !== undefined
+		)
+	);
+	const frameSpec = $derived(
+		edit && panelRows.length > 0 ? { label: edit.label ?? weekly.title, hasPanel: true } : undefined
+	);
 </script>
 
 <article>
-	<header>
-		<span class="number">{config.messages.weeklie_number({ number: weekly.number })}</span>
-		<DateText value={weekly.publishedOn} />
-	</header>
-	<CardMedia src={weekly.imageUrl} alt="" ratio="1 / 1" width="600" height="600" />
-	<CardTitle>
-		{#if titleEditing}
-			<Editable edit={edit?.title} value={weekly.title}>
-				{#snippet children(text, attrs)}<span {...attrs}>{text}</span>{/snippet}
-			</Editable>
-		{:else}
-			<Link href={`/weeklies/${weekly.slug}`}>{weekly.title}</Link>
-		{/if}
-	</CardTitle>
-	<Editable edit={edit?.excerpt} value={weekly.excerpt}>
-		{#snippet children(text, attrs)}<p {...attrs}>{text}</p>{/snippet}
-	</Editable>
+	<!-- Inside the article, so the grid the host lays cards into never gains
+	     an unexpected child; inactive it renders the content alone. -->
+	<EditFrame spec={frameSpec}>
+		{#snippet panel()}
+			<EditPanel rows={panelRows} />
+		{/snippet}
+		<header>
+			<span class="number">{config.messages.weeklie_number({ number: weekly.number })}</span>
+			<DateText value={weekly.publishedOn} />
+		</header>
+		<CardMedia src={weekly.imageUrl} alt="" ratio="1 / 1" width="600" height="600" />
+		<CardTitle>
+			{#if titleEditing}
+				<Editable edit={edit?.title} value={weekly.title}>
+					{#snippet children(text, attrs)}<span {...attrs}>{text}</span>{/snippet}
+				</Editable>
+			{:else}
+				<Link href={`/weeklies/${weekly.slug}`}>{weekly.title}</Link>
+			{/if}
+		</CardTitle>
+		<Editable edit={edit?.excerpt} value={weekly.excerpt}>
+			{#snippet children(text, attrs)}<p {...attrs}>{text}</p>{/snippet}
+		</Editable>
+	</EditFrame>
 </article>
 
 <style>

package/dist/components/weeklies/WeeklieCard.svelte.d.ts

@@ -1,8 +1,15 @@
-import type { EditDescriptor } from '../../edit/types.js';
-/** Which of the card's localized fields are editable at this render site. */
+import type { EditDescriptor, PropertyDescriptor } from '../../edit/types.js';
+/**
+ * Which of the card's fields are editable at this render site: localized
+ * text inline, the cover image through the frame's panel. NO collection
+ * ops — weeklies keep their own authoring flow in the CMS.
+ */
 export interface WeeklyEditMap {
     title?: EditDescriptor;
     excerpt?: EditDescriptor;
+    image?: PropertyDescriptor;
+    /** Accessible name for the frame, e.g. "Weekly #12". */
+    label?: string;
 }
 import type { WeeklyCardData } from '../../content/types.js';
 interface Props {

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/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

package/package.json

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