@vit-foundation/ui 0.3.0 → 0.5.0

package/dist/components/account/NewsletterSignup.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { getUiConfig } from '../../config/context.js';
+	import Editable from '../../edit/Editable.svelte';
 	import { withNewsletterIntent } from '../../forms/transport.js';
 	import type { NewsletterToggleFormInstance } from './AccountPanel.svelte';
 	import Button from '../ui/Button.svelte';
@@ -27,19 +28,33 @@
 
 <section class="newsletter" aria-labelledby="newsletter-title">
 	<div class="inner band">
-		<h2 id="newsletter-title">{msg.newsletter_title()}</h2>
-		<p>{msg.newsletter_intro()}</p>
+		<Editable edit={config.messageEdit?.('newsletter_title')} value={msg.newsletter_title()}>
+			{#snippet children(text, attrs)}<h2 id="newsletter-title" {...attrs}>{text}</h2>{/snippet}
+		</Editable>
+		<Editable edit={config.messageEdit?.('newsletter_intro')} value={msg.newsletter_intro()}>
+			{#snippet children(text, attrs)}<p {...attrs}>{text}</p>{/snippet}
+		</Editable>
 
 		{#if account === null}
 			<p class="prompt">
-				{msg.newsletter_promptLoggedOut()}
+				<Editable
+					edit={config.messageEdit?.('newsletter_promptLoggedOut')}
+					value={msg.newsletter_promptLoggedOut()}
+				>
+					{#snippet children(text, attrs)}<span {...attrs}>{text}</span>{/snippet}
+				</Editable>
 				<Link href={withNewsletterIntent('/signup')}>{msg.comments_signupLink()}</Link>
 				·
 				<Link href={withNewsletterIntent('/login')}>{msg.comments_loginLink()}</Link>
 			</p>
 		{:else if account.newsletterSubscribed}
 			<p class="prompt">
-				{msg.newsletter_subscribedNote()}
+				<Editable
+					edit={config.messageEdit?.('newsletter_subscribedNote')}
+					value={msg.newsletter_subscribedNote()}
+				>
+					{#snippet children(text, attrs)}<span {...attrs}>{text}</span>{/snippet}
+				</Editable>
 				<Link href="/account">{msg.account_navLabel()}</Link>
 			</p>
 		{:else}

package/dist/components/jobs/JobList.svelte

@@ -30,8 +30,12 @@
 </script>
 
 {#if jobs.length === 0}
-	<p class="empty">{msg.jobs_empty()}</p>
-	<p class="nudge">{msg.jobs_newsletterNudge()}</p>
+	<Editable edit={config.messageEdit?.('jobs_empty')} value={msg.jobs_empty()}>
+		{#snippet children(text, attrs)}<p class="empty" {...attrs}>{text}</p>{/snippet}
+	</Editable>
+	<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)}
@@ -49,7 +53,9 @@
 			</li>
 		{/each}
 	</ul>
-	<p class="nudge">{msg.jobs_newsletterNudge()}</p>
+	<Editable edit={config.messageEdit?.('jobs_newsletterNudge')} value={msg.jobs_newsletterNudge()}>
+		{#snippet children(text, attrs)}<p class="nudge" {...attrs}>{text}</p>{/snippet}
+	</Editable>
 {/if}
 
 <style>

package/dist/components/layout/Footer.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { getUiConfig } from '../../config/context.js';
 	import type { SiteLink } from '../../config/types.js';
+	import Editable from '../../edit/Editable.svelte';
 	import Link from '../ui/Link.svelte';
 
 	/**
@@ -29,7 +30,15 @@
 				<li><Link href={link.href}>{link.label}</Link></li>
 			{/each}
 		</ul>
-		<p class="rights">© {year} {config.messages.footer_rights()}</p>
+		<p class="rights">
+			© {year}
+			<Editable
+				edit={config.messageEdit?.('footer_rights')}
+				value={config.messages.footer_rights()}
+			>
+				{#snippet children(text, attrs)}<span {...attrs}>{text}</span>{/snippet}
+			</Editable>
+		</p>
 	</div>
 </footer>
 

package/dist/components/weeklies/CommentSection.svelte

@@ -10,6 +10,7 @@
 
 <script lang="ts">
 	import { getUiConfig } from '../../config/context.js';
+	import Editable from '../../edit/Editable.svelte';
 	import { COMMENT_BODY } from '../../forms/constraints.js';
 	import type { CommentData, CommentThreadData } from '../../content/types.js';
 	import Button from '../ui/Button.svelte';
@@ -67,10 +68,16 @@
 {/snippet}
 
 <section aria-labelledby="comments-heading">
-	<h2 class="subsection-heading" id="comments-heading">{msg.comments_title()}</h2>
+	<Editable edit={config.messageEdit?.('comments_title')} value={msg.comments_title()}>
+		{#snippet children(text, attrs)}
+			<h2 class="subsection-heading" id="comments-heading" {...attrs}>{text}</h2>
+		{/snippet}
+	</Editable>
 
 	{#if comments.length === 0}
-		<p class="empty">{msg.comments_empty()}</p>
+		<Editable edit={config.messageEdit?.('comments_empty')} value={msg.comments_empty()}>
+			{#snippet children(text, attrs)}<p class="empty" {...attrs}>{text}</p>{/snippet}
+		</Editable>
 	{:else}
 		<ul class="list">
 			{#each comments as thread (thread.id)}
@@ -148,7 +155,12 @@
 		</form>
 	{:else}
 		<p class="login-prompt">
-			{msg.comments_loginPrompt()}
+			<Editable
+				edit={config.messageEdit?.('comments_loginPrompt')}
+				value={msg.comments_loginPrompt()}
+			>
+				{#snippet children(text, attrs)}<span {...attrs}>{text}</span>{/snippet}
+			</Editable>
 			<Link href="/login">{msg.comments_loginLink()}</Link>
 			·
 			<Link href="/signup">{msg.comments_signupLink()}</Link>

package/dist/config/context.js

@@ -37,7 +37,10 @@ export function setUiConfig(input) {
         },
         get messages() {
             return input().messages ?? defaultMessages;
-        }
+        },
+        // Undefined means inert: components render their message strings as
+        // plain text, which is every app but the CMS.
+        messageEdit: (key) => input().messageEdit?.(key)
     };
     return setContext(KEY, resolved);
 }

package/dist/config/types.d.ts

@@ -1,3 +1,4 @@
+import type { EditDescriptor } from '../edit/types.js';
 /**
  * The site's locales and their canonical member. Fixed rather than generic:
  * `ca` is load-bearing — it is the required key of every localized column
@@ -156,6 +157,14 @@ export interface UiConfig {
     /** Appended to document titles and shown as the wordmark. */
     siteName: string;
     messages: UiMessages;
+    /**
+     * Edit descriptor for one of THIS config's message strings, by catalog
+     * key — the interface-wording half of edit mode. Optional and undefined by
+     * default, so a read-only app (and every story/test) renders the messages
+     * as plain text. A CMS-shaped host supplies it alongside an EditAdapter;
+     * components offer only their parameterless, plain-text message sites.
+     */
+    messageEdit?: (key: string) => EditDescriptor | undefined;
 }
 /** What an app hands UiProvider: any subset; the rest keeps package defaults. */
 export interface UiConfigInput {
@@ -166,4 +175,5 @@ export interface UiConfigInput {
     canonicalPathname?: UiConfig['canonicalPathname'];
     siteName?: string;
     messages?: UiMessages;
+    messageEdit?: UiConfig['messageEdit'];
 }

package/dist/edit/helpers.d.ts

@@ -1,5 +1,14 @@
 import type { Locale } from '../config/types.js';
 import type { EditableEntity, EditDescriptor } from './types.js';
+/**
+ * Descriptor for one interface-wording message (a Paraglide catalog key).
+ * Only parameterless messages are sensibly editable in place — editing the
+ * RENDERED text of a parameterized one would overwrite its template.
+ */
+export declare function chromeEdit(key: string, locale: Locale, options?: {
+    format?: EditDescriptor['format'];
+    label?: string;
+}): EditDescriptor;
 /** Descriptor for one page-copy block (`page_content` row). */
 export declare function pageCopyEdit(page: string, sectionKey: string, locale: Locale, options?: {
     format?: EditDescriptor['format'];

package/dist/edit/helpers.js

@@ -1,3 +1,11 @@
+/**
+ * Descriptor for one interface-wording message (a Paraglide catalog key).
+ * Only parameterless messages are sensibly editable in place — editing the
+ * RENDERED text of a parameterized one would overwrite its template.
+ */
+export function chromeEdit(key, locale, options) {
+    return { ref: { kind: 'chrome', key }, locale, ...options };
+}
 /** Descriptor for one page-copy block (`page_content` row). */
 export function pageCopyEdit(page, sectionKey, locale, options) {
     return { ref: { kind: 'page-copy', page, sectionKey }, locale, ...options };

package/dist/edit/index.d.ts

@@ -1,5 +1,5 @@
 export { getEditAdapter, setEditAdapter } from './context.js';
 export { default as Editable } from './Editable.svelte';
-export { entityEdit, pageCopyEdit } from './helpers.js';
+export { chromeEdit, entityEdit, pageCopyEdit } from './helpers.js';
 export { localize } from './types.js';
 export type { ContentRef, EditableEntity, EditAdapter, EditDescriptor, LocalizedText } from './types.js';

package/dist/edit/index.js

@@ -1,4 +1,4 @@
 export { getEditAdapter, setEditAdapter } from './context.js';
 export { default as Editable } from './Editable.svelte';
-export { entityEdit, pageCopyEdit } from './helpers.js';
+export { chromeEdit, entityEdit, pageCopyEdit } from './helpers.js';
 export { localize } from './types.js';

package/dist/edit/types.d.ts

@@ -17,8 +17,12 @@ export declare function localize(value: LocalizedText, locale: Locale): string;
  */
 export type EditableEntity = 'weeklies' | 'projects' | 'milestones' | 'team_members' | 'job_openings';
 /**
- * The identity of one editable string in the content model: either a page
- * copy block (`page_content` row) or one localized field of a domain entity.
+ * 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
+ * interface-wording message (`chrome`) — a Paraglide catalog key. What a
+ * chrome save MEANS is the host's decision, like every other ref: the
+ * foundation CMS writes the website's `ui_messages` table, from which the
+ * catalogs are regenerated at deploy.
  */
 export type ContentRef = {
     kind: 'page-copy';
@@ -29,6 +33,9 @@ export type ContentRef = {
     entity: EditableEntity;
     id: string | number;
     field: string;
+} | {
+    kind: 'chrome';
+    key: string;
 };
 /** What a component hands the adapter alongside the new value. */
 export interface EditDescriptor {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vit-foundation/ui",
-	"version": "0.3.0",
+	"version": "0.5.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -122,7 +122,7 @@
 		"svelte"
 	],
 	"license": "MIT",
-	"description": "Fundaci\u00f3 VIT's shared Svelte 5 component library with pluggable edit mode",
+	"description": "Fundació VIT's shared Svelte 5 component library with pluggable edit mode",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/fndvit/VizVit-UI.git"