@vit-foundation/ui 0.11.0 → 0.13.0

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/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,7 +20,10 @@
 	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 DraftBadge from '../../edit/chrome/DraftBadge.svelte';
 	import CardTitle from '../ui/CardTitle.svelte';
 	import DateText from '../ui/DateText.svelte';
 	import Link from '../ui/Link.svelte';
@@ -33,26 +43,43 @@
 	// 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>
+			{#if weekly.draft}<DraftBadge />{/if}
+			<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/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;
@@ -59,11 +65,17 @@ 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;
+    /** 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';
+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.11.0",
+	"version": "0.13.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",