@vit-foundation/ui 0.10.1 → 0.12.0

package/dist/components/timeline/Timeline.svelte

@@ -2,6 +2,9 @@
 	import { getUiConfig } from '../../config/context.js';
 	import type { MilestoneData } from '../../content/types.js';
 	import type { MilestoneEditMap } from './TimelineMilestone.svelte';
+	import AddSlot from '../../edit/chrome/AddSlot.svelte';
+	import { getEditAdapter } from '../../edit/context.js';
+	import type { CollectionRef } from '../../edit/types.js';
 	import { yearOf } from '../../utils/dates.js';
 	import TimelineMilestone from './TimelineMilestone.svelte';
 
@@ -11,11 +14,30 @@
 		variant?: 'compact' | 'full';
 		/** Edit descriptors for one milestone's fields; see TimelineMilestone. */
 		editFor?: (milestone: MilestoneData) => MilestoneEditMap | undefined;
+		/**
+		 * Names the collection these milestones are rows of. Set alongside an
+		 * adapter with `applyOp`, it turns on the add slots and each frame's
+		 * remove. NO reorder: order derives from `occurredOn` — editing the
+		 * date IS the reorder.
+		 */
+		collection?: CollectionRef;
 	}
 
-	let { milestones, variant = 'compact', editFor }: Props = $props();
+	let { milestones, variant = 'compact', editFor, 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 and order. */
+	function editMapFor(milestone: MilestoneData): MilestoneEditMap | undefined {
+		const map = editFor?.(milestone);
+		if (!structural || !collection) return map;
+		return { ...map, removeOp: { kind: 'remove', collection, id: milestone.id } };
+	}
 
 	interface TimelineEntry {
 		milestone: MilestoneData;
@@ -46,13 +68,29 @@
 >
 	<ol>
 		{#each entries as entry (entry.milestone.id)}
+			{#if structural && collection}
+				<li class="add-slot">
+					<AddSlot
+						op={{
+							kind: 'create',
+							collection,
+							anchor: { id: entry.milestone.id, placement: 'before' }
+						}}
+					/>
+				</li>
+			{/if}
 			<li>
 				{#if entry.yearMarker}
 					<span class="year">{entry.yearMarker}</span>
 				{/if}
-				<TimelineMilestone milestone={entry.milestone} edit={editFor?.(entry.milestone)} />
+				<TimelineMilestone milestone={entry.milestone} edit={editMapFor(entry.milestone)} />
 			</li>
 		{/each}
+		{#if structural && collection}
+			<li class="add-slot">
+				<AddSlot op={{ kind: 'create', collection }} />
+			</li>
+		{/if}
 	</ol>
 </div>
 
@@ -92,6 +130,13 @@
 		flex-basis: 18rem;
 	}
 
+	/* The add affordances sit between the cards without taking a card's slot. */
+	li.add-slot,
+	.full li.add-slot {
+		flex: 0 0 auto;
+		align-self: center;
+	}
+
 	.year {
 		position: absolute;
 		top: -2.4rem;

package/dist/components/timeline/Timeline.svelte.d.ts

@@ -1,11 +1,19 @@
 import type { MilestoneData } from '../../content/types.js';
 import type { MilestoneEditMap } from './TimelineMilestone.svelte';
+import type { CollectionRef } from '../../edit/types.js';
 interface Props {
     milestones: MilestoneData[];
     /** 'compact' = homepage slice; 'full' = transparency history with year markers. */
     variant?: 'compact' | 'full';
     /** Edit descriptors for one milestone's fields; see TimelineMilestone. */
     editFor?: (milestone: MilestoneData) => MilestoneEditMap | undefined;
+    /**
+     * Names the collection these milestones are rows of. Set alongside an
+     * adapter with `applyOp`, it turns on the add slots and each frame's
+     * remove. NO reorder: order derives from `occurredOn` — editing the
+     * date IS the reorder.
+     */
+    collection?: CollectionRef;
 }
 declare const Timeline: import("svelte").Component<Props, {}, "">;
 type Timeline = ReturnType<typeof Timeline>;

package/dist/components/timeline/TimelineMilestone.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 the milestone's localized fields are editable at this render site. */
+	/**
+	 * Which of the milestone's fields are editable at this render site:
+	 * localized text inline (EditDescriptor), scalars through the frame's
+	 * property panel (PropertyDescriptor), and removal from the collection.
+	 */
 	export interface MilestoneEditMap {
 		title?: EditDescriptor;
 		body?: EditDescriptor;
+		occurredOn?: PropertyDescriptor;
+		category?: PropertyDescriptor;
+		linkUrl?: PropertyDescriptor;
+		image?: PropertyDescriptor;
+		/** Accessible name for the frame, e.g. "Fita: Neix la fundació". */
+		label?: string;
+		/** Set by Timeline from its `collection` — removal of this milestone. */
+		removeOp?: Extract<EntityOp, { kind: 'remove' }>;
 	}
 </script>
 
 <script lang="ts">
 	import { getUiConfig } from '../../config/context.js';
 	import ActionLabel from '../../edit/ActionLabel.svelte';
-	import type { MilestoneData } from '../../content/types.js';
+	import type { MilestoneCategory, MilestoneData } from '../../content/types.js';
+	import EditFrame from '../../edit/chrome/EditFrame.svelte';
+	import EditPanel from '../../edit/chrome/EditPanel.svelte';
 	import Editable from '../../edit/Editable.svelte';
 	import { MILESTONE_CATEGORY_COLOR, milestoneCategoryLabel } from '../../utils/milestones.js';
 	import CardMedia from '../ui/CardMedia.svelte';
@@ -28,6 +42,41 @@
 
 	const config = getUiConfig();
 
+	const CATEGORIES = Object.keys(MILESTONE_CATEGORY_COLOR) as MilestoneCategory[];
+
+	/**
+	 * The panel rows, zipped from the map's descriptors and this milestone's
+	 * values. The category select's options come from the same labels the chip
+	 * renders — filled here so the host never re-derives them.
+	 */
+	const panelRows = $derived(
+		[
+			edit?.occurredOn && { descriptor: edit.occurredOn, value: milestone.occurredOn },
+			edit?.category && {
+				descriptor: {
+					options: CATEGORIES.map((category) => ({
+						value: category,
+						label: milestoneCategoryLabel(category, config.messages)
+					})),
+					...edit.category
+				},
+				value: milestone.category
+			},
+			edit?.linkUrl && { descriptor: edit.linkUrl, value: milestone.linkUrl },
+			edit?.image && { descriptor: edit.image, value: milestone.imageUrls[0] ?? null }
+		].filter((row) => row !== undefined)
+	);
+
+	const frameSpec = $derived(
+		edit && (panelRows.length > 0 || edit.removeOp)
+			? {
+					label: edit.label ?? milestone.title,
+					hasPanel: panelRows.length > 0,
+					removeOp: edit.removeOp
+				}
+			: undefined
+	);
+
 	const color = $derived(MILESTONE_CATEGORY_COLOR[milestone.category]);
 	/**
 	 * `link_url` is an unconstrained editable column, and the `press` category
@@ -48,42 +97,49 @@
 
 <article style={`--milestone-color: ${color}`}>
 	<span class="dot" aria-hidden="true"></span>
-	<Editable
-		edit={config.messageEdit?.(`category_${milestone.category}`)}
-		value={milestoneCategoryLabel(milestone.category, config.messages)}
-	>
-		{#snippet children(text, attrs)}<p class="category" {...attrs}>{text}</p>{/snippet}
-	</Editable>
-	<DateText value={milestone.occurredOn} />
-	<Editable edit={edit?.title} value={milestone.title}>
-		{#snippet children(text, attrs)}<h3 {...attrs}>{text}</h3>{/snippet}
-	</Editable>
-	{#if milestone.body}
-		<Editable edit={edit?.body} value={milestone.body}>
-			{#snippet children(text, attrs)}<p class="body" {...attrs}>{text}</p>{/snippet}
+	<!-- The frame sits INSIDE the article so the timeline's flex row never
+	     gains an unexpected child; inactive it renders the content alone. -->
+	<EditFrame spec={frameSpec}>
+		{#snippet panel()}
+			<EditPanel rows={panelRows} />
+		{/snippet}
+		<Editable
+			edit={config.messageEdit?.(`category_${milestone.category}`)}
+			value={milestoneCategoryLabel(milestone.category, config.messages)}
+		>
+			{#snippet children(text, attrs)}<p class="category" {...attrs}>{text}</p>{/snippet}
+		</Editable>
+		<DateText value={milestone.occurredOn} />
+		<Editable edit={edit?.title} value={milestone.title}>
+			{#snippet children(text, attrs)}<h3 {...attrs}>{text}</h3>{/snippet}
 		</Editable>
-	{/if}
-	{#if milestone.imageUrls.length > 0}
-		<CardMedia src={milestone.imageUrls[0]} alt="" width="1200" height="675" />
-	{/if}
-	{#if milestone.linkUrl}
-		<p class="more">
-			<ActionLabel
-				edit={config.messageEdit?.('common_readMore')}
-				value={config.messages.common_readMore()}
-			>
-				{#snippet control()}
-					{#if isExternal}
-						<a href={milestone.linkUrl} rel="external noopener"
-							>{config.messages.common_readMore()}</a
-						>
-					{:else if milestone.linkUrl}
-						<Link href={milestone.linkUrl}>{config.messages.common_readMore()}</Link>
-					{/if}
-				{/snippet}
-			</ActionLabel>
-		</p>
-	{/if}
+		{#if milestone.body}
+			<Editable edit={edit?.body} value={milestone.body}>
+				{#snippet children(text, attrs)}<p class="body" {...attrs}>{text}</p>{/snippet}
+			</Editable>
+		{/if}
+		{#if milestone.imageUrls.length > 0}
+			<CardMedia src={milestone.imageUrls[0]} alt="" width="1200" height="675" />
+		{/if}
+		{#if milestone.linkUrl}
+			<p class="more">
+				<ActionLabel
+					edit={config.messageEdit?.('common_readMore')}
+					value={config.messages.common_readMore()}
+				>
+					{#snippet control()}
+						{#if isExternal}
+							<a href={milestone.linkUrl} rel="external noopener"
+								>{config.messages.common_readMore()}</a
+							>
+						{:else if milestone.linkUrl}
+							<Link href={milestone.linkUrl}>{config.messages.common_readMore()}</Link>
+						{/if}
+					{/snippet}
+				</ActionLabel>
+			</p>
+		{/if}
+	</EditFrame>
 </article>
 
 <style>

package/dist/components/timeline/TimelineMilestone.svelte.d.ts

@@ -1,8 +1,22 @@
-import type { EditDescriptor } from '../../edit/types.js';
-/** Which of the milestone's localized fields are editable at this render site. */
+import type { EditDescriptor, EntityOp, PropertyDescriptor } from '../../edit/types.js';
+/**
+ * Which of the milestone's fields are editable at this render site:
+ * localized text inline (EditDescriptor), scalars through the frame's
+ * property panel (PropertyDescriptor), and removal from the collection.
+ */
 export interface MilestoneEditMap {
     title?: EditDescriptor;
     body?: EditDescriptor;
+    occurredOn?: PropertyDescriptor;
+    category?: PropertyDescriptor;
+    linkUrl?: PropertyDescriptor;
+    image?: PropertyDescriptor;
+    /** Accessible name for the frame, e.g. "Fita: Neix la fundació". */
+    label?: string;
+    /** Set by Timeline from its `collection` — removal of this milestone. */
+    removeOp?: Extract<EntityOp, {
+        kind: 'remove';
+    }>;
 }
 import type { MilestoneData } from '../../content/types.js';
 interface Props {

package/dist/components/ui/RichText.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { getUiConfig } from '../../config/context.js';
 	import { renderBody } from '../../content/richtext.js';
 	import { getEditAdapter } from '../../edit/context.js';
 	import type { EditDescriptor } from '../../edit/types.js';
@@ -23,6 +24,7 @@
 	let { body, edit }: Props = $props();
 
 	const adapter = getEditAdapter();
+	const config = getUiConfig();
 	const canEdit = $derived(edit !== undefined && (adapter?.isEditing ?? false));
 
 	/** Last persisted body: what renders, and what Cancel·la returns to. */
@@ -79,16 +81,18 @@
 			class="control"
 			bind:value={draft}
 			rows={Math.max(6, draft.split('\n').length + 1)}
-			aria-label={edit?.label ?? 'Edita el contingut'}
+			aria-label={edit?.label ?? config.editMessages.edit_editBody()}
 		></textarea>
 		<div class="actions">
-			<Button pending={status === 'saving' ? 1 : 0} onclick={() => void save()}>Desa</Button>
-			<GhostButton onclick={cancel}>Cancel·la</GhostButton>
+			<Button pending={status === 'saving' ? 1 : 0} onclick={() => void save()}>
+				{config.editMessages.edit_save()}
+			</Button>
+			<GhostButton onclick={cancel}>{config.editMessages.edit_cancel()}</GhostButton>
 			{#if status === 'error'}
-				<p class="error" role="alert">Error en desar. Torna-ho a provar.</p>
+				<p class="error" role="alert">{config.editMessages.edit_saveError()}. Torna-ho a provar.</p>
 			{/if}
 		</div>
-		<div class="richtext preview" aria-label="Vista prèvia">
+		<div class="richtext preview" aria-label={config.editMessages.edit_preview()}>
 			{#each preview as block, index (index)}
 				{#if block.type === 'h2'}
 					<h2>{block.text}</h2>
@@ -108,7 +112,9 @@
 			{/if}
 		{/each}
 		{#if canEdit}
-			<p class="edit-row"><GhostButton onclick={open}>Edita</GhostButton></p>
+			<p class="edit-row">
+				<GhostButton onclick={open}>{config.editMessages.edit_edit()}</GhostButton>
+			</p>
 		{/if}
 	</div>
 {/if}

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/config/context.js

@@ -1,4 +1,5 @@
 import { getContext, setContext } from 'svelte';
+import { defaultEditMessages } from './edit-messages.js';
 import { defaultMessages } from './messages.js';
 import { BASE_LOCALE, LOCALES } from './types.js';
 const KEY = Symbol.for('@vit-foundation/ui:config');
@@ -14,7 +15,8 @@ export const DEFAULT_UI_CONFIG = {
     url: () => undefined,
     canonicalPathname: (url) => url.pathname,
     siteName: 'ViT',
-    messages: defaultMessages
+    messages: defaultMessages,
+    editMessages: defaultEditMessages
 };
 /**
  * Installs the app's config for the subtree. Takes a *thunk* so a provider
@@ -38,6 +40,9 @@ export function setUiConfig(input) {
         get messages() {
             return input().messages ?? defaultMessages;
         },
+        get editMessages() {
+            return input().editMessages ?? defaultEditMessages;
+        },
         // Undefined means inert: components render their message strings as
         // plain text, which is every app but the CMS.
         messageEdit: (key) => input().messageEdit?.(key)