@vit-foundation/ui 0.24.2 → 0.26.0

package/dist/config/types.d.ts

@@ -149,6 +149,42 @@ export interface UiMessages {
     category_education(): string;
     category_collaboration(): string;
     category_press(): string;
+    /**
+     * The wording the PAGE MODULES read (`components/pages/*`), REQUIRED like
+     * every key but the *Href pair above.
+     *
+     * ⚠ Adding them was a compile-break for any host whose `messages` object
+     * lacked one — `messages` is all-or-nothing (see ./messages.js), so a
+     * catalog that compiled against 0.24 stops compiling here rather than
+     * rendering a hole. Both hosts already carried every key (the website's
+     * Paraglide catalog, vit-brain's `ui_messages` table) because the nine
+     * route files read them by hand before the pages moved in; the only thing
+     * that changed is that the package now names what it reads. The four
+     * `*Href` keys are destinations edited as wording (fndvit-website#11) —
+     * a link's text and address are one editorial gesture, so both are keys.
+     */
+    nav_whoWeAre(): string;
+    nav_whatWeDo(): string;
+    nav_getInvolved(): string;
+    nav_weeklies(): string;
+    common_seeAll(): string;
+    common_seeAllHref(): string;
+    cta_meetTeam(): string;
+    cta_meetTeamHref(): string;
+    cta_contactUs(): string;
+    cta_contactUsHref(): string;
+    weeklies_searchPlaceholder(): string;
+    weeklies_exploreOne(): string;
+    weeklies_filterLabel(): string;
+    weeklies_searchResultsLabel(): string;
+    weeklies_loadError(): string;
+    weeklies_empty(): string;
+    timeline_searchPlaceholder(): string;
+    timeline_filterLabel(): string;
+    timeline_empty(): string;
+    back_label(): string;
+    weeklie_sources(): string;
+    weeklie_keepExploring(): string;
     /**
      * Editorial state, as the panel's `flag` rows word it: a card's
      * published/draft pair, an opening's open/closed pair. Catalog keys rather

package/dist/content/pages.d.ts

@@ -0,0 +1,64 @@
+import type { EditDescriptor } from '../edit/types.js';
+/**
+ * Page copy: the editorial blocks of a static page, stored per page and
+ * section key in the website's `page_content` table. This module is the
+ * only declaration of which keys each page has — the website's `seed.sql`
+ * supplies their text and its repository integration test asserts the two
+ * agree, so a renamed or dropped row fails that suite instead of silently
+ * rendering nothing. vit-brain's `page-copy-keys.test.ts` pins the same set
+ * against the live table from the other side.
+ *
+ * It lived in fndvit-website's `schemas/page-copy.ts` and was restated in
+ * vit-brain's `mirror.ts` (with the FORMAT each block edits in — that half
+ * stays in brain, ADR-0019). Now that the page modules render from this
+ * package, the keys a page reads are the package's fact: a module indexes
+ * `copy.hero_title`, so the tuple that makes that compile has to live beside
+ * it. Component-free on purpose — `./contract` re-exports it for a host's
+ * `+page.server.ts` and a CMS's producer alike.
+ *
+ * UI chrome (labels, buttons, error messages) is not page copy: it lives in
+ * `UiMessages` and ships with the build.
+ */
+/**
+ * The "why get in touch" blocks, rendered as one list on /get-involved.
+ *
+ * Named because a run of keys being a *group* is a fact about the copy, and it
+ * needs the same single owner the keys themselves have: the page used to
+ * restate these five, so adding a sixth reason here and to the seed left the
+ * page silently ignoring it — no type error, no failing test.
+ */
+export declare const GET_INVOLVED_REASON_KEYS: readonly ["reason_collaborate", "reason_event", "reason_press", "reason_brand", "reason_other"];
+export declare const PAGE_COPY_KEYS: {
+    readonly home: readonly ["hero_title", "hero_subtitle", "milestones_heading", "weeklies_heading", "weeklies_intro", "know_more_heading"];
+    readonly 'what-we-do': readonly ["latest_heading", "collaborations_heading", "collaborations_intro", "passion_heading", "passion_intro"];
+    readonly 'who-we-are': readonly ["team_heading", "team_intro", "board_heading", "board_intro", "collaborators_heading"];
+    readonly weeklies: readonly ["intro"];
+    readonly 'get-involved': readonly ["contact_heading", "contact_intro", "reason_collaborate", "reason_event", "reason_press", "reason_brand", "reason_other", "funding_heading", "funding_body", "careers_heading", "careers_intro"];
+    readonly transparency: readonly ["heading", "intro"];
+    readonly legal: readonly ["heading", "body"];
+};
+/** A page that has editorial copy. Matches the `page_content.page` column. */
+export type PageId = keyof typeof PAGE_COPY_KEYS;
+/** The section keys declared for one page. */
+export type CopyKey<P extends PageId> = (typeof PAGE_COPY_KEYS)[P][number];
+/**
+ * One page's copy, one locale already applied. Every declared key is present:
+ * a row missing from the database resolves to an empty string rather than
+ * `undefined`.
+ *
+ * The page modules do NOT guard for that empty string. It is not a state the
+ * site is meant to render around — the website's repository integration test
+ * asserts that every declared key resolves to non-empty copy, so a dropped or
+ * renamed row fails the suite. Guarding at the render site instead puts the
+ * decision back at every call site, which is what the assertion exists to
+ * avoid (the same answer `CopyIntro` gives).
+ */
+export type PageCopy<P extends PageId> = Record<CopyKey<P>, string>;
+/**
+ * How a page module asks for one copy block's edit descriptor: by the key it
+ * renders, so a module cannot name a block its page does not declare. A
+ * read-only host passes nothing; a CMS answers with a `page-copy` ref for the
+ * locale being edited (vit-brain's `pageCopyEditor`), or `undefined` to leave
+ * one block alone.
+ */
+export type CopyEditFor<P extends PageId> = (key: CopyKey<P>) => EditDescriptor | undefined;

package/dist/content/pages.js

@@ -0,0 +1,71 @@
+/**
+ * Page copy: the editorial blocks of a static page, stored per page and
+ * section key in the website's `page_content` table. This module is the
+ * only declaration of which keys each page has — the website's `seed.sql`
+ * supplies their text and its repository integration test asserts the two
+ * agree, so a renamed or dropped row fails that suite instead of silently
+ * rendering nothing. vit-brain's `page-copy-keys.test.ts` pins the same set
+ * against the live table from the other side.
+ *
+ * It lived in fndvit-website's `schemas/page-copy.ts` and was restated in
+ * vit-brain's `mirror.ts` (with the FORMAT each block edits in — that half
+ * stays in brain, ADR-0019). Now that the page modules render from this
+ * package, the keys a page reads are the package's fact: a module indexes
+ * `copy.hero_title`, so the tuple that makes that compile has to live beside
+ * it. Component-free on purpose — `./contract` re-exports it for a host's
+ * `+page.server.ts` and a CMS's producer alike.
+ *
+ * UI chrome (labels, buttons, error messages) is not page copy: it lives in
+ * `UiMessages` and ships with the build.
+ */
+/**
+ * The "why get in touch" blocks, rendered as one list on /get-involved.
+ *
+ * Named because a run of keys being a *group* is a fact about the copy, and it
+ * needs the same single owner the keys themselves have: the page used to
+ * restate these five, so adding a sixth reason here and to the seed left the
+ * page silently ignoring it — no type error, no failing test.
+ */
+export const GET_INVOLVED_REASON_KEYS = [
+    'reason_collaborate',
+    'reason_event',
+    'reason_press',
+    'reason_brand',
+    'reason_other'
+];
+export const PAGE_COPY_KEYS = {
+    home: [
+        'hero_title',
+        'hero_subtitle',
+        'milestones_heading',
+        'weeklies_heading',
+        'weeklies_intro',
+        'know_more_heading'
+    ],
+    'what-we-do': [
+        'latest_heading',
+        'collaborations_heading',
+        'collaborations_intro',
+        'passion_heading',
+        'passion_intro'
+    ],
+    'who-we-are': [
+        'team_heading',
+        'team_intro',
+        'board_heading',
+        'board_intro',
+        'collaborators_heading'
+    ],
+    weeklies: ['intro'],
+    'get-involved': [
+        'contact_heading',
+        'contact_intro',
+        ...GET_INVOLVED_REASON_KEYS,
+        'funding_heading',
+        'funding_body',
+        'careers_heading',
+        'careers_intro'
+    ],
+    transparency: ['heading', 'intro'],
+    legal: ['heading', 'body']
+};

package/dist/content/types.d.ts

@@ -3,6 +3,7 @@
  * applied. The website's zod-inferred types satisfy these structurally; the
  * package states them itself so consumers owe it no schema library.
  */
+import type { EditDescriptor } from '../edit/types.js';
 /** The bounds of one form field; Field turns them into length attributes. */
 export interface FieldConstraint {
     min?: number;
@@ -28,6 +29,26 @@ export interface WeeklyCardData {
     excerpt: string;
     imageUrl: string;
 }
+/** A theme a weekly is filed under, as the /weeklies filter chips render it. */
+export interface ThemeData {
+    slug: string;
+    name: string;
+}
+/** One cited source of a weekly. */
+export interface WeeklySourceData {
+    label: string;
+    url: string;
+}
+/**
+ * A weekly's OWN page: the card, plus what only the detail renders. The
+ * website's `weeklyDetailSchema` carries `related` too; the page module
+ * takes that list as its own prop, because vit-brain loads it separately.
+ */
+export interface WeeklyArticleData extends WeeklyCardData {
+    body: string | null;
+    instagramUrl: string | null;
+    sources: WeeklySourceData[];
+}
 /** The kinds a project can have, in display order — a host's enum derives from this. */
 export declare const PROJECT_KINDS: readonly ["collaboration", "passion"];
 export type ProjectKind = (typeof PROJECT_KINDS)[number];
@@ -45,6 +66,28 @@ export interface ProjectCardData {
     externalUrl: string | null;
     hasStory: boolean;
 }
+/**
+ * A project's OWN page: the card, plus what only the detail renders. The
+ * website's `projectDetailSchema` and vit-brain's `toProjectArticle` both
+ * answer this shape.
+ */
+export interface ProjectArticleData extends ProjectCardData {
+    body: string | null;
+    previewImageUrl: string | null;
+}
+/**
+ * A weekly's or a project's OWN page: the same localized fields as its card,
+ * except that `body` renders as rich text there. Which surface a field is
+ * rendered on is the page's fact, and these two are the only pages with one
+ * — so the map is shared by `ProjectPage` and `WeeklyPage` and answered by
+ * one producer (vit-brain's `articleEdit`). All members optional, like every
+ * `*EditMap`: a host may open the body and leave the title alone.
+ */
+export interface ArticleEdit {
+    title?: EditDescriptor;
+    excerpt?: EditDescriptor;
+    body?: EditDescriptor;
+}
 /**
  * The timeline's categories, in DISPLAY ORDER — every select that offers them
  * and every host enum derives from this.
@@ -75,6 +118,8 @@ export interface MilestoneData {
     linkUrl: string | null;
 }
 export interface TeamMemberData {
+    /** Present only where the card is editable — a descriptor needs the row (precedent: CollaboratorData). */
+    id?: string | number;
     slug: string;
     name: string;
     role: string;

package/dist/content/types.js

@@ -1,8 +1,3 @@
-/**
- * Structural shapes of the content the components render, one locale already
- * applied. The website's zod-inferred types satisfy these structurally; the
- * package states them itself so consumers owe it no schema library.
- */
 /** The kinds a project can have, in display order — a host's enum derives from this. */
 export const PROJECT_KINDS = ['collaboration', 'passion'];
 /**

package/dist/content-components.d.ts

@@ -17,7 +17,28 @@ export { default as TimelineMilestone } from './components/timeline/TimelineMile
 export type { MilestoneEditMap } from './components/timeline/TimelineMilestone.svelte';
 export { default as WeeklieCard } from './components/weeklies/WeeklieCard.svelte';
 export type { WeeklyEditMap } from './components/weeklies/WeeklieCard.svelte';
-export * from './content/index.js';
+export { default as HomePage } from './components/pages/HomePage.svelte';
+export type { HomePageEdit } from './components/pages/HomePage.svelte';
+export { default as WhoWeArePage } from './components/pages/WhoWeArePage.svelte';
+export type { WhoWeArePageEdit } from './components/pages/WhoWeArePage.svelte';
+export { default as WhatWeDoPage } from './components/pages/WhatWeDoPage.svelte';
+export type { WhatWeDoPageEdit } from './components/pages/WhatWeDoPage.svelte';
+export { default as GetInvolvedPage } from './components/pages/GetInvolvedPage.svelte';
+export type { GetInvolvedPageEdit } from './components/pages/GetInvolvedPage.svelte';
+export { default as TransparencyPage } from './components/pages/TransparencyPage.svelte';
+export type { TransparencyPageEdit } from './components/pages/TransparencyPage.svelte';
+export { default as LegalPage } from './components/pages/LegalPage.svelte';
+export type { LegalPageEdit } from './components/pages/LegalPage.svelte';
+export { default as WeekliesPage } from './components/pages/WeekliesPage.svelte';
+export type { WeekliesPageEdit } from './components/pages/WeekliesPage.svelte';
+export { default as ProjectPage } from './components/pages/ProjectPage.svelte';
+export { default as WeeklyPage } from './components/pages/WeeklyPage.svelte';
+export { renderBody } from './content/richtext.js';
+export type { RichTextBlock } from './content/richtext.js';
+export { GET_INVOLVED_REASON_KEYS, PAGE_COPY_KEYS } from './content/pages.js';
+export type { CopyEditFor, CopyKey, PageCopy, PageId } from './content/pages.js';
+export { COMMENT_STATUSES, CONTACT_CATEGORIES, MILESTONE_CATEGORIES, PROJECT_KINDS, REACTIONS } from './content/types.js';
+export type { ArticleEdit, CollaboratorData, CommentData, CommentThreadData, CommentStatus, ContactCategory, FieldConstraint, FormFailReason, JobOpeningData, MilestoneCategory, MilestoneData, ProjectArticleData, ProjectCardData, ProjectKind, Reaction, ReactionSummary, ReactionTarget, SortDirection, TeamMemberData, ThemeData, WeeklyArticleData, WeeklyCardData, WeeklySourceData } from './content/types.js';
 export { MILESTONE_CATEGORY_COLOR, matchesMilestoneFilter, milestoneCategoryLabel } from './utils/milestones.js';
 export { createUrlFilters } from './utils/url-filters.svelte.js';
 export type { UrlFilters, UrlFiltersConfig } from './utils/url-filters.svelte.js';

package/dist/content-components.js

@@ -11,7 +11,23 @@ export { default as TeamMemberCard } from './components/team/TeamMemberCard.svel
 export { default as Timeline } from './components/timeline/Timeline.svelte';
 export { default as TimelineMilestone } from './components/timeline/TimelineMilestone.svelte';
 export { default as WeeklieCard } from './components/weeklies/WeeklieCard.svelte';
-export * from './content/index.js';
+// The nine PAGE modules: a website route is one tag over the site's read
+// projection, and a CMS opens it with the module's `*PageEdit` map. Same door
+// as the cards they compose — a page is content that renders, not chrome.
+export { default as HomePage } from './components/pages/HomePage.svelte';
+export { default as WhoWeArePage } from './components/pages/WhoWeArePage.svelte';
+export { default as WhatWeDoPage } from './components/pages/WhatWeDoPage.svelte';
+export { default as GetInvolvedPage } from './components/pages/GetInvolvedPage.svelte';
+export { default as TransparencyPage } from './components/pages/TransparencyPage.svelte';
+export { default as LegalPage } from './components/pages/LegalPage.svelte';
+export { default as WeekliesPage } from './components/pages/WeekliesPage.svelte';
+export { default as ProjectPage } from './components/pages/ProjectPage.svelte';
+export { default as WeeklyPage } from './components/pages/WeeklyPage.svelte';
+// The content vocabularies and data shapes, beside the renderers that consume
+// them. `./contract` names the component-free ones a second time, by design.
+export { renderBody } from './content/richtext.js';
+export { GET_INVOLVED_REASON_KEYS, PAGE_COPY_KEYS } from './content/pages.js';
+export { COMMENT_STATUSES, CONTACT_CATEGORIES, MILESTONE_CATEGORIES, PROJECT_KINDS, REACTIONS } from './content/types.js';
 export { MILESTONE_CATEGORY_COLOR, matchesMilestoneFilter, milestoneCategoryLabel } from './utils/milestones.js';
 // The two list rules: URL-mirrored filters, and the weeklies index over them.
 export { createUrlFilters } from './utils/url-filters.svelte.js';

package/dist/contract.d.ts

@@ -17,9 +17,13 @@
  * is what makes it a promise rather than a description: adding a `.svelte`
  * anywhere beneath it fails here rather than in a consumer's server build.
  *
- * It adds nothing. Every name below is already exported from a semantic
- * subpath and stays there — this is a second door into the same rooms, not a
- * new floor, and the barrel remains the surface a component host reads.
+ * It adds almost nothing. Every name below is already exported from a
+ * semantic subpath and stays there — this is a second door into the same
+ * rooms, not a new floor, and the barrel remains the surface a component host
+ * reads. `contract-names.test.ts` holds that to be true, name by name and from
+ * the same source module; its `CONTRACT_ONLY` list names the three exceptions
+ * (the two destination classifiers and the title format), each with its
+ * reason, so a fourth cannot arrive unexplained.
  *
  * It was cut to fit ONE consumer, and the second one did not fit through it.
  * vit-brain's four restatements were the motive, so the first version carried
@@ -38,7 +42,7 @@
  * the guard walks them like the rest.
  */
 export { LOCALES, BASE_LOCALE } from './config/types.js';
-export type { Locale, NotParameterized, ParameterizedKey, ParameterlessKey, SiteLink, UiMessages } from './config/types.js';
+export type { Locale, NotParameterized, ParameterlessKey, SiteLink, UiMessages } from './config/types.js';
 export { localize } from './edit/types.js';
 export type { CollectionRef, ContentRef, EditableEntity, EditDescriptor, EntityOp, LocalizedText, PropertyDescriptor, PropertyOption, PropertyType, PropertyValue } from './edit/types.js';
 export { REACTIONS } from './content/types.js';
@@ -47,6 +51,9 @@ export { MILESTONE_CATEGORIES, PROJECT_KINDS } from './content/types.js';
 export type { MilestoneCategory, ProjectKind } from './content/types.js';
 export { WEEKLY_LIST_DEFAULTS, WEEKLY_LIST_PARAMS, parseWeeklyListUrl } from './utils/weekly-list-contract.js';
 export type { WeeklyListFilters, WeeklyListPage, WeeklyListServerData } from './utils/weekly-list-contract.js';
+export { GET_INVOLVED_REASON_KEYS, PAGE_COPY_KEYS } from './content/pages.js';
+export type { CopyEditFor, CopyKey, PageCopy, PageId } from './content/pages.js';
+export type { ArticleEdit, ProjectArticleData, ThemeData, WeeklyArticleData, WeeklySourceData } from './content/types.js';
 export { CONTACT_CATEGORIES } from './content/types.js';
 export { COMMENT_STATUSES } from './content/types.js';
 export type { CommentStatus, ContactCategory, FieldConstraint, FormFailReason } from './content/types.js';

package/dist/contract.js

@@ -17,9 +17,13 @@
  * is what makes it a promise rather than a description: adding a `.svelte`
  * anywhere beneath it fails here rather than in a consumer's server build.
  *
- * It adds nothing. Every name below is already exported from a semantic
- * subpath and stays there — this is a second door into the same rooms, not a
- * new floor, and the barrel remains the surface a component host reads.
+ * It adds almost nothing. Every name below is already exported from a
+ * semantic subpath and stays there — this is a second door into the same
+ * rooms, not a new floor, and the barrel remains the surface a component host
+ * reads. `contract-names.test.ts` holds that to be true, name by name and from
+ * the same source module; its `CONTRACT_ONLY` list names the three exceptions
+ * (the two destination classifiers and the title format), each with its
+ * reason, so a fourth cannot arrive unexplained.
  *
  * It was cut to fit ONE consumer, and the second one did not fit through it.
  * vit-brain's four restatements were the motive, so the first version carried
@@ -49,6 +53,10 @@ export { MILESTONE_CATEGORIES, PROJECT_KINDS } from './content/types.js';
 // half had three spellings across two repositories and this package's own test,
 // and the round-trip case guarding them crossed against the test's copy.
 export { WEEKLY_LIST_DEFAULTS, WEEKLY_LIST_PARAMS, parseWeeklyListUrl } from './utils/weekly-list-contract.js';
+// The page-copy vocabulary: which blocks each static page reads. A host's
+// `+page.server.ts` builds `PageCopy<P>` from it and a CMS's producer binds
+// its own per-page format table to it, both on the server.
+export { GET_INVOLVED_REASON_KEYS, PAGE_COPY_KEYS } from './content/pages.js';
 export { CONTACT_CATEGORIES } from './content/types.js';
 export { COMMENT_STATUSES } from './content/types.js';
 export { COMMENT_BODY, CONTACT_MESSAGE, CONTACT_NAME, DISPLAY_NAME, EMAIL, LOGIN_PASSWORD, PASSWORD } from './forms/constraints.js';

package/dist/edit/Editable.svelte

@@ -1,14 +1,11 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { getUiConfig } from '../config/context.js';
-	import { getEditAdapter } from './context.js';
-	import { commitState } from './commit.svelte.js';
-	import type { EditDescriptor } from './types.js';
+	import type { EditableProps } from './chrome-props.js';
+	import { getEditAdapter, getEditChrome } from './context.js';
 
 	/**
-	 * The inline-edit primitive. It renders no element of its own: the child
-	 * snippet receives the text and a bag of attributes, and spreads both onto
-	 * whatever semantic element the call site owns —
+	 * The inline-edit primitive's GATE. It renders no element of its own: the
+	 * child snippet receives the text and a bag of attributes, and spreads
+	 * both onto whatever semantic element the call site owns —
 	 *
 	 *   <Editable edit={descriptor} value={title}>
 	 *     {#snippet children(text, attrs)}<h3 {...attrs}>{text}</h3>{/snippet}
@@ -20,164 +17,23 @@
 	 *
 	 * Inactive — no `edit` descriptor, no adapter in context (a read-only
 	 * app), or the adapter's `isEditing` off — it renders the child with an
-	 * empty attribute bag: no listeners, no wrapper, no cost.
-	 *
-	 * Active, it makes the element a plain-text `contenteditable` textbox.
-	 * The DOM owns the draft while the reader types; this component reads it
-	 * back on commit. Enter commits single-line fields (Cmd/Ctrl+Enter for
-	 * 'multiline'), Escape reverts to the last saved value, blur commits a
-	 * dirty draft. A failed save keeps the draft on screen in the error state
-	 * so nothing typed is lost. State is announced through a visually hidden
-	 * `role="status"` region, the pattern ShareRow set for its copy action.
-	 *
-	 * Styling for the affordance lives in base.css (`[data-vit-editing]`):
-	 * the element is rendered by the *caller's* markup, which scoped styles
-	 * here could never reach.
+	 * empty attribute bag: no listeners, no wrapper, no cost. Active, it
+	 * mounts the LIVE half the host installed (`edit/live/Editable.svelte`,
+	 * through `setEditAdapter`'s chrome), which owns the contenteditable, the
+	 * commit lifecycle and the announcements. This file imports none of that,
+	 * so a renderer that imports it ships none of that (`chrome-props.ts`).
 	 */
-	interface EditableAttrs {
-		contenteditable?: 'plaintext-only' | 'true';
-		role?: 'textbox';
-		'aria-label'?: string;
-		'aria-multiline'?: 'true';
-		'data-vit-editing'?: 'idle' | 'dirty' | 'saving' | 'error';
-		onbeforeinput?: (event: InputEvent) => void;
-		oninput?: (event: Event) => void;
-		onblur?: (event: FocusEvent) => void;
-		onkeydown?: (event: KeyboardEvent) => void;
-		onpaste?: (event: ClipboardEvent) => void;
-	}
-
-	interface Props {
-		/** Identity of the string. Omit it and this is a passthrough. */
-		edit?: EditDescriptor;
-		value: string;
-		children: Snippet<[string, EditableAttrs]>;
-	}
-
-	let { edit, value, children }: Props = $props();
+	let { edit, value, children }: EditableProps = $props();
 
 	const adapter = getEditAdapter();
-	const config = getUiConfig();
-
-	/**
-	 * The commit lifecycle — the four states, the announcements, the last
-	 * persisted value and the follow-the-prop rule — is shared with
-	 * `PropertyRow` (see `./commit.svelte.js`). What stays here is where the
-	 * DRAFT lives: in the DOM, because this is a contenteditable.
-	 */
-	// svelte-ignore state_referenced_locally
-	const commit_ = commitState(value, config.editMessages);
-	/** What the child snippet renders. Only rewritten while the DOM is not
-	 * being typed in — Svelte and the reader must not fight over the node. */
-	// svelte-ignore state_referenced_locally
-	let renderText = $state(value);
-
-	$effect(() => {
-		const adopted = commit_.follow(value);
-		if (adopted !== null) renderText = adopted;
-	});
+	const chrome = getEditChrome();
 
 	const active = $derived(edit !== undefined && (adapter?.isEditing ?? false));
-	const multiline = $derived(edit?.format === 'multiline' || edit?.format === 'richtext');
-
-	/** contenteditable text, innerText keeps line breaks; NBSPs become spaces. */
-	function textOf(element: HTMLElement): string {
-		return (element.innerText ?? element.textContent ?? '').replace(/\u00a0/g, ' ');
-	}
-
-	function handleBeforeInput(event: InputEvent): void {
-		// 'plaintext-only' is not universal (Firefox); strip rich insertions.
-		if (event.inputType === 'insertFromPaste' || event.inputType === 'insertFromDrop') return;
-		if (!multiline && event.inputType === 'insertParagraph') event.preventDefault();
-	}
-
-	function handlePaste(event: ClipboardEvent): void {
-		// Plain text only, whatever the clipboard holds.
-		event.preventDefault();
-		const text = event.clipboardData?.getData('text/plain') ?? '';
-		const selection = window.getSelection();
-		if (!selection || selection.rangeCount === 0) return;
-		const range = selection.getRangeAt(0);
-		range.deleteContents();
-		range.insertNode(document.createTextNode(multiline ? text : text.replace(/\s*\n\s*/g, ' ')));
-		selection.collapseToEnd();
-		commit_.markDirty();
-	}
-
-	function handleInput(): void {
-		commit_.markDirty();
-	}
-
-	async function commit(element: HTMLElement): Promise<void> {
-		if (!edit || !adapter) return;
-		const draft = textOf(element).trim();
-		if (draft === commit_.saved) {
-			commit_.settle();
-			return;
-		}
-		// A failed save leaves the draft in the DOM; the reader decides whether
-		// to retry.
-		await commit_.commit(draft, () => adapter.save(edit, draft));
-	}
-
-	function handleBlur(event: FocusEvent): void {
-		const status = commit_.status;
-		if (status === 'dirty' || status === 'error') void commit(event.currentTarget as HTMLElement);
-	}
-
-	function handleKeydown(event: KeyboardEvent): void {
-		const element = event.currentTarget as HTMLElement;
-		if (event.key === 'Escape') {
-			// Svelte's cached text still equals renderText, so a state write
-			// alone cannot repaint a node the reader has mutated: restore the
-			// DOM directly, then settle.
-			element.textContent = commit_.saved;
-			commit_.revert();
-			element.blur();
-			return;
-		}
-		const commitKey = multiline
-			? event.key === 'Enter' && (event.metaKey || event.ctrlKey)
-			: event.key === 'Enter';
-		if (commitKey) {
-			event.preventDefault();
-			void commit(element);
-		}
-	}
-
-	const attrs = $derived<EditableAttrs>(
-		active
-			? {
-					contenteditable: 'plaintext-only',
-					role: 'textbox',
-					'aria-label': edit?.label,
-					'aria-multiline': multiline ? 'true' : undefined,
-					'data-vit-editing': commit_.status,
-					onbeforeinput: handleBeforeInput,
-					oninput: handleInput,
-					onblur: handleBlur,
-					onkeydown: handleKeydown,
-					onpaste: handlePaste
-				}
-			: {}
-	);
 </script>
 
-{@render children(renderText, attrs)}
-{#if active}
-	<span class="status" role="status">{commit_.announcement}</span>
+{#if active && chrome}
+	{@const Live = chrome.Editable}
+	<Live {edit} {value} {children} />
+{:else}
+	{@render children(value, {})}
 {/if}
-
-<style>
-	.status {
-		position: absolute;
-		width: 1px;
-		height: 1px;
-		padding: 0;
-		margin: -1px;
-		overflow: hidden;
-		clip-path: inset(50%);
-		white-space: nowrap;
-		border: 0;
-	}
-</style>

package/dist/edit/Editable.svelte.d.ts

@@ -1,52 +1,4 @@
-import type { Snippet } from 'svelte';
-import type { EditDescriptor } from './types.js';
-/**
- * The inline-edit primitive. It renders no element of its own: the child
- * snippet receives the text and a bag of attributes, and spreads both onto
- * whatever semantic element the call site owns —
- *
- *   <Editable edit={descriptor} value={title}>
- *     {#snippet children(text, attrs)}<h3 {...attrs}>{text}</h3>{/snippet}
- *   </Editable>
- *
- * — the same contract Field uses for its control attrs, and for the same
- * reason: the element (h1, p, span) is part of the document outline and
- * belongs to the caller, not behind a prop.
- *
- * Inactive — no `edit` descriptor, no adapter in context (a read-only
- * app), or the adapter's `isEditing` off — it renders the child with an
- * empty attribute bag: no listeners, no wrapper, no cost.
- *
- * Active, it makes the element a plain-text `contenteditable` textbox.
- * The DOM owns the draft while the reader types; this component reads it
- * back on commit. Enter commits single-line fields (Cmd/Ctrl+Enter for
- * 'multiline'), Escape reverts to the last saved value, blur commits a
- * dirty draft. A failed save keeps the draft on screen in the error state
- * so nothing typed is lost. State is announced through a visually hidden
- * `role="status"` region, the pattern ShareRow set for its copy action.
- *
- * Styling for the affordance lives in base.css (`[data-vit-editing]`):
- * the element is rendered by the *caller's* markup, which scoped styles
- * here could never reach.
- */
-interface EditableAttrs {
-    contenteditable?: 'plaintext-only' | 'true';
-    role?: 'textbox';
-    'aria-label'?: string;
-    'aria-multiline'?: 'true';
-    'data-vit-editing'?: 'idle' | 'dirty' | 'saving' | 'error';
-    onbeforeinput?: (event: InputEvent) => void;
-    oninput?: (event: Event) => void;
-    onblur?: (event: FocusEvent) => void;
-    onkeydown?: (event: KeyboardEvent) => void;
-    onpaste?: (event: ClipboardEvent) => void;
-}
-interface Props {
-    /** Identity of the string. Omit it and this is a passthrough. */
-    edit?: EditDescriptor;
-    value: string;
-    children: Snippet<[string, EditableAttrs]>;
-}
-declare const Editable: import("svelte").Component<Props, {}, "">;
+import type { EditableProps } from './chrome-props.js';
+declare const Editable: import("svelte").Component<EditableProps, {}, "">;
 type Editable = ReturnType<typeof Editable>;
 export default Editable;