@vit-foundation/ui 0.12.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

@@ -62,13 +62,31 @@
 	 */
 	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)
-				}))
+			? [
+					...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(

package/dist/components/jobs/JobList.svelte

@@ -20,6 +20,7 @@
 	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';
@@ -94,6 +95,7 @@
 					<Editable edit={edit?.title} value={job.title}>
 						{#snippet children(text, attrs)}<h3 {...attrs}>{text}</h3>{/snippet}
 					</Editable>
+					{#if job.draft}<DraftBadge />{/if}
 					<DateText value={job.postedOn} />
 					{#if job.description}
 						<Editable edit={edit?.description} value={job.description}>

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

package/dist/components/projects/ProjectCard.svelte

@@ -26,6 +26,7 @@
 	import EditFrame from '../../edit/chrome/EditFrame.svelte';
 	import EditPanel from '../../edit/chrome/EditPanel.svelte';
 	import CardMedia from '../ui/CardMedia.svelte';
+	import DraftBadge from '../../edit/chrome/DraftBadge.svelte';
 	import CardTitle from '../ui/CardTitle.svelte';
 	import DateText from '../ui/DateText.svelte';
 	import Link from '../ui/Link.svelte';
@@ -84,6 +85,7 @@
 		{/snippet}
 		<CardMedia src={project.imageUrl} alt="" ratio="16 / 9" width="1200" height="675" />
 		<div class="text">
+			{#if project.draft}<DraftBadge />{/if}
 			<DateText value={project.publishedOn} />
 			<CardTitle>
 				{#if titleEditing}

package/dist/components/timeline/TimelineMilestone.svelte

@@ -29,6 +29,7 @@
 	import Editable from '../../edit/Editable.svelte';
 	import { MILESTONE_CATEGORY_COLOR, milestoneCategoryLabel } from '../../utils/milestones.js';
 	import CardMedia from '../ui/CardMedia.svelte';
+	import DraftBadge from '../../edit/chrome/DraftBadge.svelte';
 	import DateText from '../ui/DateText.svelte';
 	import Link from '../ui/Link.svelte';
 
@@ -110,6 +111,7 @@
 			{#snippet children(text, attrs)}<p class="category" {...attrs}>{text}</p>{/snippet}
 		</Editable>
 		<DateText value={milestone.occurredOn} />
+		{#if milestone.draft}<DraftBadge />{/if}
 		<Editable edit={edit?.title} value={milestone.title}>
 			{#snippet children(text, attrs)}<h3 {...attrs}>{text}</h3>{/snippet}
 		</Editable>
@@ -119,7 +121,7 @@
 			</Editable>
 		{/if}
 		{#if milestone.imageUrls.length > 0}
-			<CardMedia src={milestone.imageUrls[0]} alt="" width="1200" height="675" />
+			<CardMedia src={milestone.imageUrls[0] ?? null} alt="" width="1200" height="675" />
 		{/if}
 		{#if milestone.linkUrl}
 			<p class="more">

package/dist/components/ui/CardMedia.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
 	import type { HTMLImgAttributes } from 'svelte/elements';
 
-	interface Props extends HTMLImgAttributes {
-		src: string;
+	interface Props extends Omit<HTMLImgAttributes, 'src'> {
+		/**
+		 * Null/undefined renders the placeholder directly — a row may simply
+		 * have no image yet (the CMS creates rows before anyone uploads one).
+		 */
+		src: string | null | undefined;
 		/** Empty string for decorative images (the surrounding card carries the text). */
 		alt: string;
 		/** CSS aspect-ratio (e.g. '16 / 9'); omit to keep the image's natural height. */
@@ -10,9 +14,54 @@
 	}
 
 	let { src, alt, ratio, ...rest }: Props = $props();
+
+	/**
+	 * The src that 404'd, so a broken path degrades to the placeholder instead
+	 * of the browser's broken-image box. Keyed by value, not a boolean: a NEW
+	 * src (an editor fixing the path) gets a fresh attempt.
+	 */
+	let failedSrc = $state<string | null>(null);
+	const showImage = $derived(Boolean(src) && src !== failedSrc);
+
+	// The placeholder must hold the image's footprint: the ratio prop when
+	// given, else the intrinsic width/height the caller passed, else square.
+	const placeholderRatio = $derived(
+		ratio ?? (rest.width && rest.height ? `${rest.width} / ${rest.height}` : '1 / 1')
+	);
 </script>
 
-<img {src} {alt} loading="lazy" style:aspect-ratio={ratio} {...rest} />
+{#if showImage}
+	<img
+		{src}
+		{alt}
+		loading="lazy"
+		style:aspect-ratio={ratio}
+		onerror={() => (failedSrc = src ?? null)}
+		{...rest}
+	/>
+{:else}
+	<!-- Same accessibility contract as the img: named when alt has text,
+	     invisible to readers when the image was decorative. -->
+	<div
+		class="placeholder"
+		style:aspect-ratio={placeholderRatio}
+		role={alt ? 'img' : undefined}
+		aria-label={alt || undefined}
+		aria-hidden={alt ? undefined : true}
+	>
+		<svg
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="1.5"
+			aria-hidden="true"
+		>
+			<rect x="3" y="4" width="18" height="16" rx="2" />
+			<circle cx="9" cy="10" r="1.8" />
+			<path d="M3.5 17.5 9 13l4 3.2 4-4.2 3.5 4" />
+		</svg>
+	</div>
+{/if}
 
 <style>
 	img {
@@ -20,4 +69,18 @@
 		background: var(--color-band-grey);
 		object-fit: cover;
 	}
+
+	.placeholder {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		border-radius: var(--radius);
+		background: var(--color-band-grey);
+		color: var(--color-ink-muted);
+	}
+
+	.placeholder svg {
+		width: clamp(1.5rem, 18%, 3rem);
+	}
 </style>

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

@@ -1,6 +1,10 @@
 import type { HTMLImgAttributes } from 'svelte/elements';
-interface Props extends HTMLImgAttributes {
-    src: string;
+interface Props extends Omit<HTMLImgAttributes, 'src'> {
+    /**
+     * Null/undefined renders the placeholder directly — a row may simply
+     * have no image yet (the CMS creates rows before anyone uploads one).
+     */
+    src: string | null | undefined;
     /** Empty string for decorative images (the surrounding card carries the text). */
     alt: string;
     /** CSS aspect-ratio (e.g. '16 / 9'); omit to keep the image's natural height. */

package/dist/components/weeklies/CommentSection.svelte

@@ -97,7 +97,14 @@
 						{@const reply = replyFormFor(String(thread.id))}
 						<!-- Native disclosure: the reply form opens without JS. -->
 						<details class="reply">
-							<summary>{msg.comments_replyLabel()}</summary>
+							<summary>
+								<ActionLabel
+									edit={config.messageEdit?.('comments_replyLabel')}
+									value={msg.comments_replyLabel()}
+								>
+									{#snippet control()}{msg.comments_replyLabel()}{/snippet}
+								</ActionLabel>
+							</summary>
 							<form class="form-stack" {...reply}>
 								<Field
 									id="reply-body-{thread.id}"
@@ -173,9 +180,19 @@
 			>
 				{#snippet children(text, attrs)}<span {...attrs}>{text}</span>{/snippet}
 			</Editable>
-			<Link href="/login">{msg.comments_loginLink()}</Link>
+			<ActionLabel
+				edit={config.messageEdit?.('comments_loginLink')}
+				value={msg.comments_loginLink()}
+			>
+				{#snippet control()}<Link href="/login">{msg.comments_loginLink()}</Link>{/snippet}
+			</ActionLabel>
 			·
-			<Link href="/signup">{msg.comments_signupLink()}</Link>
+			<ActionLabel
+				edit={config.messageEdit?.('comments_signupLink')}
+				value={msg.comments_signupLink()}
+			>
+				{#snippet control()}<Link href="/signup">{msg.comments_signupLink()}</Link>{/snippet}
+			</ActionLabel>
 		</p>
 	{/if}
 </section>

package/dist/components/weeklies/WeeklieCard.svelte

@@ -23,6 +23,7 @@
 	import EditFrame from '../../edit/chrome/EditFrame.svelte';
 	import EditPanel from '../../edit/chrome/EditPanel.svelte';
 	import CardMedia from '../ui/CardMedia.svelte';
+	import DraftBadge from '../../edit/chrome/DraftBadge.svelte';
 	import CardTitle from '../ui/CardTitle.svelte';
 	import DateText from '../ui/DateText.svelte';
 	import Link from '../ui/Link.svelte';
@@ -62,6 +63,7 @@
 		{/snippet}
 		<header>
 			<span class="number">{config.messages.weeklie_number({ number: weekly.number })}</span>
+			{#if weekly.draft}<DraftBadge />{/if}
 			<DateText value={weekly.publishedOn} />
 		</header>
 		<CardMedia src={weekly.imageUrl} alt="" ratio="1 / 1" width="600" height="600" />

package/dist/config/edit-messages.d.ts

@@ -36,6 +36,8 @@ export interface EditMessages {
     edit_addFailed(): string;
     /** Property rows. */
     edit_uploadImage(): string;
+    /** The chip a card wears while its row is unpublished. */
+    edit_draftBadge(): string;
     edit_clearValue(): string;
     edit_emptyRequired(): string;
 }

package/dist/config/edit-messages.js

@@ -19,6 +19,7 @@ export const defaultEditMessages = {
     edit_add: ({ label }) => `Afegeix ${label}`,
     edit_addFailed: () => 'No s’ha pogut afegir',
     edit_uploadImage: () => 'Puja una imatge',
+    edit_draftBadge: () => 'Esborrany',
     edit_clearValue: () => 'Buida el valor',
     edit_emptyRequired: () => 'Aquest camp no pot quedar buit'
 };

package/dist/config/types.d.ts

@@ -12,8 +12,12 @@ export type Locale = (typeof LOCALES)[number];
 export declare const BASE_LOCALE: Locale;
 /** One primary-navigation entry, rendered by Nav and repeated by Footer. */
 export interface SiteLink {
+    /** Present only where the nav is editable — structural ops need identity. */
+    id?: string | number;
     href: string;
     label: string;
+    /** The row's sort_order, for the CMS's order panel row. */
+    order?: number;
 }
 /**
  * The strings the components render, as message *functions* so the app's

package/dist/content/types.d.ts

@@ -18,6 +18,8 @@ export type SortDirection = 'asc' | 'desc';
 /** A weekly as its listing card shows it. */
 export interface WeeklyCardData {
     id: number;
+    /** CMS-only: true renders the «Esborrany» badge. The public site never sets it. */
+    draft?: boolean;
     number: number;
     slug: string;
     /** ISO date (2026-08-30). */
@@ -30,6 +32,8 @@ export type ProjectKind = 'collaboration' | 'passion';
 /** A project as its card shows it. */
 export interface ProjectCardData {
     id: number;
+    /** CMS-only: true renders the «Esborrany» badge. The public site never sets it. */
+    draft?: boolean;
     slug: string;
     kind: ProjectKind;
     publishedOn: string;
@@ -43,6 +47,8 @@ export type MilestoneCategory = 'education' | 'lab' | 'foundation' | 'collaborat
 /** One timeline milestone. */
 export interface MilestoneData {
     id: number;
+    /** CMS-only: true renders the «Esborrany» badge. The public site never sets it. */
+    draft?: boolean;
     occurredOn: string;
     category: MilestoneCategory;
     title: string;
@@ -68,6 +74,8 @@ export interface CollaboratorData {
 export interface JobOpeningData {
     /** Present only where the list is editable — remove ops need an identity. */
     id?: string | number;
+    /** CMS-only: true renders the «Esborrany» badge. The public site never sets it. */
+    draft?: boolean;
     slug: string;
     title: string;
     description: string | null;

package/dist/edit/chrome/DraftBadge.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { getUiConfig } from '../../config/context.js';
+
+	/**
+	 * The «Esborrany» chip a card wears while its row is unpublished. The flag
+	 * arrives on the DATA (`draft?: boolean`), set only by a CMS host — the
+	 * public site never marks anything draft, so its cards render without this
+	 * component ever mounting. Wording comes from editMessages for the same
+	 * reason: it is editor-facing, never catalog copy.
+	 */
+	const config = getUiConfig();
+</script>
+
+<span class="draft">{config.editMessages.edit_draftBadge()}</span>
+
+<style>
+	.draft {
+		display: inline-block;
+		align-self: start;
+		border: 1px solid var(--color-ink-muted);
+		border-radius: 999px;
+		padding: 0.1em 0.7em;
+		font-size: var(--text-sm);
+		font-weight: 600;
+		letter-spacing: 0.04em;
+		text-transform: uppercase;
+		color: var(--color-ink-muted);
+		background: var(--color-surface);
+	}
+</style>

package/dist/edit/chrome/DraftBadge.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DraftBadge: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DraftBadge = InstanceType<typeof DraftBadge>;
+export default DraftBadge;

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' | 'collaborators';
+export type EditableEntity = 'weeklies' | 'projects' | 'milestones' | 'team_members' | 'job_openings' | 'themes' | 'collaborators' | 'site_links';
 /**
  * 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.12.0",
+	"version": "0.13.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",