@vit-foundation/ui 0.25.0 → 0.26.0

package/README.md

@@ -29,7 +29,7 @@ Everything exports flat from the root, and again grouped by role:
 | [`/chrome`](./docs/components/chrome.md)                        | PageShell, Nav, Footer                                                                                                                                                                                                                                                            |
 | [`/content`](./docs/components/content.md)                      | WeeklieCard, ProjectCard, Timeline, TimelineMilestone, TeamMemberCard, CollaboratorList, JobList, SortSelect, the nine page modules (HomePage … WeeklyPage) — plus the data shapes, the page-copy vocabulary, helpers and the two list rules (createWeeklyList, createUrlFilters) |
 | [`/community`](./docs/components/community.md)                  | AuthPageShell, LoginForm, SignupForm, GoogleAuthForm, AccountPanel, NewsletterSignup, CommentSection, ReactionBar, ContactForm                                                                                                                                                    |
-| [`/edit`](./docs/edit-mode.md)                                  | Editable, setEditAdapter/getEditAdapter, descriptors and helpers, collectionEditing, LocalizedText                                                                                                                                                                                |
+| [`/edit`](./docs/edit-mode.md)                                  | Editable, setEditAdapter(adapter, EDIT_CHROME)/getEditAdapter, descriptors and helpers, collectionEditing, LocalizedText                                                                                                                                                          |
 | [`/config`](./docs/getting-started.md#wiring-an-app-uiprovider) | UiProvider, UiConfig, the locale set, the default Catalan messages                                                                                                                                                                                                                |
 | `/contract`                                                     | The component-free half: LOCALES, BASE_LOCALE, localize, REACTIONS, PAGE_COPY_KEYS and the edit-descriptor types — the one subpath a host may import from SERVER code                                                                                                             |
 | `/testing`                                                      | createRemoteFormMock — the remote-form stand-in for stories and tests                                                                                                                                                                                                             |

package/dist/community.d.ts

@@ -3,9 +3,18 @@
  * and contact. Every one takes its remote form(s) as required props — the
  * host app owns schemas and preflight; see ./forms for the seam's types.
  */
-export * from './components/account/index.js';
-export * from './components/auth/index.js';
-export * from './components/contact/index.js';
+export { default as AccountPanel } from './components/account/AccountPanel.svelte';
+export type { DeleteAccountFormInstance, LogoutFormInstance, NewsletterToggleFormInstance, UpdateNameFormInstance } from './components/account/AccountPanel.svelte';
+export { default as NewsletterSignup } from './components/account/NewsletterSignup.svelte';
+export { default as AuthPageShell } from './components/auth/AuthPageShell.svelte';
+export { default as GoogleAuthForm } from './components/auth/GoogleAuthForm.svelte';
+export type { GoogleLoginFormInstance } from './components/auth/GoogleAuthForm.svelte';
+export { default as LoginForm } from './components/auth/LoginForm.svelte';
+export type { LoginFormInstance, MagicLinkFormInstance } from './components/auth/LoginForm.svelte';
+export { default as SignupForm } from './components/auth/SignupForm.svelte';
+export type { SignupFormInstance } from './components/auth/SignupForm.svelte';
+export { default as ContactForm } from './components/contact/ContactForm.svelte';
+export type { ContactFormInstance } from './components/contact/ContactForm.svelte';
 export { default as CommentSection } from './components/weeklies/CommentSection.svelte';
 export type { CommentFormInstance } from './components/weeklies/CommentSection.svelte';
 export { default as ReactionBar } from './components/weeklies/ReactionBar.svelte';

package/dist/community.js

@@ -3,8 +3,12 @@
  * and contact. Every one takes its remote form(s) as required props — the
  * host app owns schemas and preflight; see ./forms for the seam's types.
  */
-export * from './components/account/index.js';
-export * from './components/auth/index.js';
-export * from './components/contact/index.js';
+export { default as AccountPanel } from './components/account/AccountPanel.svelte';
+export { default as NewsletterSignup } from './components/account/NewsletterSignup.svelte';
+export { default as AuthPageShell } from './components/auth/AuthPageShell.svelte';
+export { default as GoogleAuthForm } from './components/auth/GoogleAuthForm.svelte';
+export { default as LoginForm } from './components/auth/LoginForm.svelte';
+export { default as SignupForm } from './components/auth/SignupForm.svelte';
+export { default as ContactForm } from './components/contact/ContactForm.svelte';
 export { default as CommentSection } from './components/weeklies/CommentSection.svelte';
 export { default as ReactionBar } from './components/weeklies/ReactionBar.svelte';

package/dist/components/pages/ProjectPage.svelte

@@ -1,13 +1,6 @@
-<script module lang="ts">
-	import type { ArticleEdit } from '../../content/types.js';
-
-	/** What a CMS may open on a project's own page: title, excerpt, and the body as rich text. */
-	export type ProjectPageEdit = ArticleEdit;
-</script>
-
 <script lang="ts">
 	import { getUiConfig } from '../../config/context.js';
-	import type { ProjectArticleData } from '../../content/types.js';
+	import type { ArticleEdit, ProjectArticleData } from '../../content/types.js';
 	import ActionLabel from '../../edit/ActionLabel.svelte';
 	import Editable from '../../edit/Editable.svelte';
 	import PageShell from '../layout/PageShell.svelte';
@@ -24,7 +17,8 @@
 	 */
 	interface Props {
 		project: ProjectArticleData;
-		edit?: ProjectPageEdit;
+		/** What a CMS may open on a project's own page: title, excerpt, and the body as rich text. */
+		edit?: ArticleEdit;
 	}
 
 	let { project, edit }: Props = $props();

package/dist/components/pages/ProjectPage.svelte.d.ts

@@ -1,7 +1,4 @@
-import type { ArticleEdit } from '../../content/types.js';
-/** What a CMS may open on a project's own page: title, excerpt, and the body as rich text. */
-export type ProjectPageEdit = ArticleEdit;
-import type { ProjectArticleData } from '../../content/types.js';
+import type { ArticleEdit, ProjectArticleData } from '../../content/types.js';
 /**
  * A project's story: date, title, excerpt, hero image, the rich-text body
  * with a share row, and — when the project points somewhere — a preview
@@ -10,7 +7,8 @@ import type { ProjectArticleData } from '../../content/types.js';
  */
 interface Props {
     project: ProjectArticleData;
-    edit?: ProjectPageEdit;
+    /** What a CMS may open on a project's own page: title, excerpt, and the body as rich text. */
+    edit?: ArticleEdit;
 }
 declare const ProjectPage: import("svelte").Component<Props, {}, "">;
 type ProjectPage = ReturnType<typeof ProjectPage>;

package/dist/components/pages/WeeklyPage.svelte

@@ -1,17 +1,7 @@
-<script module lang="ts">
-	import type { ArticleEdit } from '../../content/types.js';
-
-	/**
-	 * What a CMS may open on a weekly's own page: title, excerpt, and the body
-	 * as rich text. The «Dades i fonts» and «Segueix explorant» headings and
-	 * the back link edit through `config.messageEdit` over their own keys.
-	 */
-	export type WeeklyPageEdit = ArticleEdit;
-</script>
-
 <script lang="ts">
 	import { getUiConfig } from '../../config/context.js';
 	import type {
+		ArticleEdit,
 		CommentThreadData,
 		ReactionSummary,
 		WeeklyArticleData,
@@ -48,7 +38,12 @@
 		/** One preflighted instance per reply box; see CommentSection. */
 		replyFormFor: (threadId: string) => CommentFormInstance;
 		reactionForms: ReactionBarForms;
-		edit?: WeeklyPageEdit;
+		/**
+		 * What a CMS may open on a weekly's own page: title, excerpt, and the body
+		 * as rich text. The «Dades i fonts» and «Segueix explorant» headings and
+		 * the back link edit through `config.messageEdit` over their own keys.
+		 */
+		edit?: ArticleEdit;
 	}
 
 	let {

package/dist/components/pages/WeeklyPage.svelte.d.ts

@@ -1,11 +1,4 @@
-import type { ArticleEdit } from '../../content/types.js';
-/**
- * What a CMS may open on a weekly's own page: title, excerpt, and the body
- * as rich text. The «Dades i fonts» and «Segueix explorant» headings and
- * the back link edit through `config.messageEdit` over their own keys.
- */
-export type WeeklyPageEdit = ArticleEdit;
-import type { CommentThreadData, ReactionSummary, WeeklyArticleData, WeeklyCardData } from '../../content/types.js';
+import type { ArticleEdit, CommentThreadData, ReactionSummary, WeeklyArticleData, WeeklyCardData } from '../../content/types.js';
 import { type CommentFormInstance } from '../weeklies/CommentSection.svelte';
 import { type ReactionBarForms } from '../weeklies/ReactionBar.svelte';
 /**
@@ -28,7 +21,12 @@ interface Props {
     /** One preflighted instance per reply box; see CommentSection. */
     replyFormFor: (threadId: string) => CommentFormInstance;
     reactionForms: ReactionBarForms;
-    edit?: WeeklyPageEdit;
+    /**
+     * What a CMS may open on a weekly's own page: title, excerpt, and the body
+     * as rich text. The «Dades i fonts» and «Segueix explorant» headings and
+     * the back link edit through `config.messageEdit` over their own keys.
+     */
+    edit?: ArticleEdit;
 }
 declare const WeeklyPage: import("svelte").Component<Props, {}, "">;
 type WeeklyPage = ReturnType<typeof WeeklyPage>;

package/dist/components/ui/Modal.svelte

@@ -1,7 +1,24 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+	import { onMount, type Snippet } from 'svelte';
 	import IconButton from './IconButton.svelte';
 
+	/**
+	 * A modal over the native <dialog>: showModal() traps focus and layers the
+	 * backdrop, the cancel event covers Escape, a backdrop click closes.
+	 *
+	 * The element is NOT part of the server-rendered document. A <dialog> is
+	 * flow content, so wherever a caller mounts one inside phrasing content —
+	 * a LinkEdit inside a <p>, which NewsletterSignup does — the HTML parser
+	 * closes the paragraph early, Svelte reports `node_invalid_placement_ssr`
+	 * on the way out and a hydration mismatch on the way back in, on every
+	 * page that renders the caller. No dialog is open at first paint (opening
+	 * one takes a click), so the server has nothing to say about it; the
+	 * element is created after mount, by script, which the content model does
+	 * not police. Placement is this module's to own — a caller cannot know
+	 * what its parent is — and owning it here fixes every caller at once,
+	 * ConfirmDialog included.
+	 */
+
 	interface Props {
 		open: boolean;
 		title: string;
@@ -16,9 +33,11 @@
 	let { open, title, onclose, closeLabel = 'Tanca', children }: Props = $props();
 
 	let dialog: HTMLDialogElement | undefined = $state();
+	let mounted = $state(false);
+	onMount(() => {
+		mounted = true;
+	});
 
-	// Native <dialog>: showModal() traps focus and layers the backdrop; the
-	// cancel event covers Escape.
 	$effect(() => {
 		if (!dialog) return;
 		if (open && !dialog.open) dialog.showModal();
@@ -32,15 +51,17 @@
 	}
 </script>
 
-<dialog bind:this={dialog} oncancel={onclose} {onclick}>
-	<div class="panel">
-		<div class="top">
-			<h2>{title}</h2>
-			<IconButton icon="close" label={closeLabel} onclick={onclose} />
+{#if mounted}
+	<dialog bind:this={dialog} oncancel={onclose} {onclick}>
+		<div class="panel">
+			<div class="top">
+				<h2>{title}</h2>
+				<IconButton icon="close" label={closeLabel} onclick={onclose} />
+			</div>
+			{@render children()}
 		</div>
-		{@render children()}
-	</div>
-</dialog>
+	</dialog>
+{/if}
 
 <style>
 	dialog {

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

@@ -1,4 +1,20 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
+/**
+ * A modal over the native <dialog>: showModal() traps focus and layers the
+ * backdrop, the cancel event covers Escape, a backdrop click closes.
+ *
+ * The element is NOT part of the server-rendered document. A <dialog> is
+ * flow content, so wherever a caller mounts one inside phrasing content —
+ * a LinkEdit inside a <p>, which NewsletterSignup does — the HTML parser
+ * closes the paragraph early, Svelte reports `node_invalid_placement_ssr`
+ * on the way out and a hydration mismatch on the way back in, on every
+ * page that renders the caller. No dialog is open at first paint (opening
+ * one takes a click), so the server has nothing to say about it; the
+ * element is created after mount, by script, which the content model does
+ * not police. Placement is this module's to own — a caller cannot know
+ * what its parent is — and owning it here fixes every caller at once,
+ * ConfirmDialog included.
+ */
 interface Props {
     open: boolean;
     title: string;

package/dist/config/context.d.ts

@@ -1,10 +1,4 @@
 import { type UiConfig, type UiConfigInput } from './types.js';
-/**
- * The provider-less config: identity hrefs, Catalan, no router. Complete on
- * purpose — every component must render without a provider, which is what
- * keeps stories and component tests free of app wiring.
- */
-export declare const DEFAULT_UI_CONFIG: UiConfig;
 /**
  * Installs the app's config for the subtree. Takes a *thunk* so a provider
  * whose input is a reactive prop stays live: the resolved object delegates

package/dist/config/context.js

@@ -8,7 +8,7 @@ const KEY = Symbol.for('@vit-foundation/ui:config');
  * purpose — every component must render without a provider, which is what
  * keeps stories and component tests free of app wiring.
  */
-export const DEFAULT_UI_CONFIG = {
+const DEFAULT_UI_CONFIG = {
     href: (path) => path,
     locale: () => BASE_LOCALE,
     locales: LOCALES,

package/dist/config/index.d.ts

@@ -1,7 +1,7 @@
-export { DEFAULT_UI_CONFIG, getUiConfig, setUiConfig } from './context.js';
+export { getUiConfig, setUiConfig } from './context.js';
 export { defaultEditMessages } from './edit-messages.js';
 export type { EditMessages } from './edit-messages.js';
 export { defaultMessages } from './messages.js';
 export { default as UiProvider } from './UiProvider.svelte';
 export { BASE_LOCALE, LOCALES } from './types.js';
-export type { Locale, NotParameterized, ParameterizedKey, ParameterlessKey, SiteLink, UiConfig, UiConfigInput, UiMessages } from './types.js';
+export type { Locale, NotParameterized, ParameterlessKey, SiteLink, UiConfig, UiConfigInput, UiMessages } from './types.js';

package/dist/config/index.js

@@ -1,4 +1,4 @@
-export { DEFAULT_UI_CONFIG, getUiConfig, setUiConfig } from './context.js';
+export { getUiConfig, setUiConfig } from './context.js';
 export { defaultEditMessages } from './edit-messages.js';
 export { defaultMessages } from './messages.js';
 export { default as UiProvider } from './UiProvider.svelte';

package/dist/content-components.d.ts

@@ -32,10 +32,13 @@ 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 type { ProjectPageEdit } from './components/pages/ProjectPage.svelte';
 export { default as WeeklyPage } from './components/pages/WeeklyPage.svelte';
-export type { WeeklyPageEdit } from './components/pages/WeeklyPage.svelte';
-export * from './content/index.js';
+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

@@ -23,7 +23,11 @@ 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';
-export * from './content/index.js';
+// 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';

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

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;