@colixsystems/widget-sdk 0.273.0 → 0.275.0

package/README.md

@@ -86,7 +86,15 @@ See the design reference for the full architecture: [`docs/architecture/widget-m
 
 ## Status
 
-`v0.273.0` — pre-publish. The package surface (types, function names, export paths) is the v1 contract; runtime behaviour for some hooks is stubbed (each hook documents what's wired and what isn't). It is **not yet published to npm**.
+`v0.275.0` — pre-publish. The package surface (types, function names, export paths) is the v1 contract; runtime behaviour for some hooks is stubbed (each hook documents what's wired and what isn't). It is **not yet published to npm**.
+
+### What's new in 0.275.0 (contract 1.225.0)
+
+**`<MarkdownInput>` styles its field as you type.** The field the user writes in now draws the markdown live: headings at their size, bold, italic, code and links in place, the markers kept in the text but dimmed. So there is one place to read and edit the result instead of a raw-markdown box over a separate preview. The stored value is exactly what was typed, so existing content and `<RichText>` output are unchanged. `showPreview` now defaults to `false`. Set it to `true` to keep drawing the rendered `<RichText>` copy underneath, for content with images or tables, which the field shows only as their markers. The field is a `TextInput` with styled children on iOS and Android, and a plain-text editable element on the web Player, with its own undo history.
+
+### What's new in 0.274.0 (contract 1.224.0)
+
+**The shared widget strings ship in Swedish.** Every entry in `CONTRACT.sharedTranslationKeys` now carries a hand-written `sv` value beside `en` (`cancel` is `{ en: "Cancel", sv: "Avbryt" }`), so a Swedish workspace gets the right word instead of a machine translation of a lone word. Translation seeding also matches a regional language to its primary one: a workspace language `sv-SE` takes the `sv` text a widget's `manifest.translations` ships, unless the widget ships `sv-SE` itself.
 
 ### What's new in 0.273.0 (contract 1.223.0)
 
@@ -3632,7 +3640,7 @@ export default function OpenTasks({ tableId, titleField, statusField }) {
 | `filter` | Keeps the rows that match. A map `{ column: "op:value" }` (an array of expressions puts a range on one column), or an array `[{ column, operator, value }]`. |
 | `filterMode` | `"and"` (the default) keeps rows matching every condition; `"or"` keeps rows matching any. |
 | `q` | Free-text search: a case-insensitive substring match across every text column of the table (encrypted columns excepted). |
-| `sort` | `{ field, dir }` with `dir` `"asc"` or `"desc"`, or the string `"field:desc"`. One column; `created_at` and `updated_at` work too. |
+| `sort` | `{ field, dir }` with `dir` `"asc"` or `"desc"`, or the string `"field:desc"`. One column; `created_at` and `updated_at` work too. Newest first is `{ field: "created_at", dir: "desc" }`. `"-field"` or an unknown column is refused: `data` stays empty and `error` names the sortable columns. |
 | `limit` | Rows per page: 50 when left out, at most 1000. |
 | `offset` | Rows to skip, for the next page. |
 | `includeCapabilities` | `true` stamps each row with `_capabilities`, what the signed-in user may do to it. |
@@ -3665,12 +3673,13 @@ export default function ContactList({ tableId }) {
     limit: PAGE,
     offset: page * PAGE,
   }));
-  const { data, total, loading } = useDatastoreQuery(tableId, query);
+  const { data, total, loading, error } = useDatastoreQuery(tableId, query);
   const pick = (next) => { setStatus(next); setPage(0); };
   return (
     <View>
       <TextInput value={draft} onChangeText={setDraft} placeholder="Search" />
       <Pressable onPress={() => pick(status === "Won" ? "" : "Won")}><Text>Won</Text></Pressable>
+      {error ? <Text>{error.message}</Text> : null}
       {loading ? <Text>Loading…</Text> : data.map((row) => <Text key={row.id}>{row.name}</Text>)}
       <Text>{total ?? 0} contacts</Text>
       {(page + 1) * PAGE < (total ?? 0) ? (

package/dist/contract.cjs

@@ -3473,7 +3473,7 @@ const PRIMITIVES = [
   {
     name: "MarkdownInput",
     description:
-      'Formatted-content editor. `<MarkdownInput value={draft} onChange={setDraft} />`. The default way to let an app USER write formatted text: a multi-line field, a toolbar whose buttons wrap the current SELECTION in markdown markers (bold, italic, code, H2, H3, bullets, numbered list), a Table button that inserts a pipe-table skeleton with the first header cell selected, a Link button that opens a form for the link text plus its target, and a live `<RichText>` preview of the result underneath. Use it rather than a bare `TextInput` plus formatting buttons of your own; an editor you do build (one that only bolds, a checklist editor) still stores markdown markers and previews with `<RichText>` — buttons that splice `<strong>`/`<br>`/`<table>` tags into the string leave the author reading tag soup with no preview of the real output. The stored value is markdown text. Props: `value`, `onChange(next)`, `placeholder`, `previewLabel` (default "Preview"), `showPreview` (default true), `renderImage` (passed through to the preview), `pages` (optional `[{ id, name }]` — supply it and the Link form offers those pages to link to by name, the way `renderImage` is supplied for filestore images; without it the form offers only an external address, because a widget cannot know the app\'s pages on its own), `minHeight` (default 150) and `maxHeight` (default 280) so the field scrolls internally instead of growing without bound, `accessibilityLabel`, `style`, `testID`. Links in the preview are deliberately inert, so a tap while editing cannot navigate away from the draft.',
+      'Formatted-content editor. `<MarkdownInput value={draft} onChange={setDraft} />`. The default way to let an app USER write formatted text: a multi-line field that styles the markdown live as the user types (headings sized, bold, italic, code and links drawn in place, the markers kept in the text but dimmed), so the user reads and edits the result in one place; a toolbar whose buttons wrap the current SELECTION in markdown markers (bold, italic, code, H2, H3, bullets, numbered list); a Table button that inserts a pipe-table skeleton with the first header cell selected; and a Link button that opens a form for the link text plus its target. Use it rather than a bare `TextInput` plus formatting buttons of your own; an editor you do build (one that only bolds, a checklist editor) still stores markdown markers and previews with `<RichText>` — buttons that splice `<strong>`/`<br>`/`<table>` tags into the string leave the author reading tag soup with no preview of the real output. The stored value is markdown text, exactly as typed. Props: `value`, `onChange(next)`, `placeholder`, `showPreview` (default false; true also draws a rendered `<RichText>` copy underneath, for content the field can only show as markers: images and tables), `previewLabel` (default "Preview", the heading above that copy), `renderImage` (passed through to the preview), `pages` (optional `[{ id, name }]` — supply it and the Link form offers those pages to link to by name, the way `renderImage` is supplied for filestore images; without it the form offers only an external address, because a widget cannot know the app\'s pages on its own), `minHeight` (default 150) and `maxHeight` (default 280) so the field scrolls internally instead of growing without bound, `accessibilityLabel`, `style`, `testID`. Links in the preview are deliberately inert, so a tap while editing cannot navigate away from the draft.',
     rnComponent: null,
     docsUrl: null,
   },
@@ -5127,32 +5127,33 @@ function sharedTranslationKey(key) {
   return `${SHARED_TRANSLATION_PREFIX}${key}`;
 }
 
-// The predefined set. Map of bare key -> { en } (English default only; the
-// tenant adds target-language values once in the Translations admin and every
-// widget inherits them). Adding/removing a key is a CONTRACT change (it grows
-// the dictionary every tenant gets), so the list lives with the contract and
-// the seeder reads it from here — never a second copy.
+// The predefined set. Map of bare key -> { en, sv }. Swedish is shipped by
+// hand because a lone word machine-translates to the wrong sense ("Cancel" ->
+// "Avboka"); other languages are translated in the Translations admin and
+// every widget inherits them. Adding/removing a key is a CONTRACT change (it
+// grows the dictionary every tenant gets), so the list lives with the contract
+// and the seeder reads it from here — never a second copy.
 const SHARED_TRANSLATION_KEYS = Object.freeze({
-  submit: { en: "Submit" },
-  cancel: { en: "Cancel" },
-  save: { en: "Save" },
-  delete: { en: "Delete" },
-  edit: { en: "Edit" },
-  close: { en: "Close" },
-  confirm: { en: "Confirm" },
-  back: { en: "Back" },
-  next: { en: "Next" },
-  previous: { en: "Previous" },
-  yes: { en: "Yes" },
-  no: { en: "No" },
-  ok: { en: "OK" },
-  loading: { en: "Loading…" },
-  search: { en: "Search" },
-  no_results: { en: "No results" },
-  required: { en: "Required" },
-  retry: { en: "Retry" },
-  add: { en: "Add" },
-  remove: { en: "Remove" },
+  submit: { en: "Submit", sv: "Skicka" },
+  cancel: { en: "Cancel", sv: "Avbryt" },
+  save: { en: "Save", sv: "Spara" },
+  delete: { en: "Delete", sv: "Ta bort" },
+  edit: { en: "Edit", sv: "Redigera" },
+  close: { en: "Close", sv: "Stäng" },
+  confirm: { en: "Confirm", sv: "Bekräfta" },
+  back: { en: "Back", sv: "Tillbaka" },
+  next: { en: "Next", sv: "Nästa" },
+  previous: { en: "Previous", sv: "Föregående" },
+  yes: { en: "Yes", sv: "Ja" },
+  no: { en: "No", sv: "Nej" },
+  ok: { en: "OK", sv: "OK" },
+  loading: { en: "Loading…", sv: "Laddar…" },
+  search: { en: "Search", sv: "Sök" },
+  no_results: { en: "No results", sv: "Inga resultat" },
+  required: { en: "Required", sv: "Obligatoriskt" },
+  retry: { en: "Retry", sv: "Försök igen" },
+  add: { en: "Add", sv: "Lägg till" },
+  remove: { en: "Remove", sv: "Ta bort" },
 });
 
 // True when `key` is one of the predefined shared keys — the discriminator
@@ -6568,7 +6569,11 @@ const CONTRACT = deepFreeze({
   // 1.223.0: stricter (sc-12906) — `scopeMintPatterns`; a widget that calls
   //    the scope-header mint or sets `X-Widget-Scopes` is refused
   //    (`no-scope-header-mint`).
-  version: "1.223.0",
+  // 1.224.0: additive (sc-14501) — every `sharedTranslationKeys` entry
+  //    ships a hand-written `sv` value beside `en`.
+  // 1.225.0: behaviour (sc-14974) — `<MarkdownInput>` styles its own field
+  //    live; `showPreview` now defaults to false.
+  version: "1.225.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,

package/dist/contract.js

@@ -3470,7 +3470,7 @@ const PRIMITIVES = [
   {
     name: "MarkdownInput",
     description:
-      'Formatted-content editor. `<MarkdownInput value={draft} onChange={setDraft} />`. The default way to let an app USER write formatted text: a multi-line field, a toolbar whose buttons wrap the current SELECTION in markdown markers (bold, italic, code, H2, H3, bullets, numbered list), a Table button that inserts a pipe-table skeleton with the first header cell selected, a Link button that opens a form for the link text plus its target, and a live `<RichText>` preview of the result underneath. Use it rather than a bare `TextInput` plus formatting buttons of your own; an editor you do build (one that only bolds, a checklist editor) still stores markdown markers and previews with `<RichText>` — buttons that splice `<strong>`/`<br>`/`<table>` tags into the string leave the author reading tag soup with no preview of the real output. The stored value is markdown text. Props: `value`, `onChange(next)`, `placeholder`, `previewLabel` (default "Preview"), `showPreview` (default true), `renderImage` (passed through to the preview), `pages` (optional `[{ id, name }]` — supply it and the Link form offers those pages to link to by name, the way `renderImage` is supplied for filestore images; without it the form offers only an external address, because a widget cannot know the app\'s pages on its own), `minHeight` (default 150) and `maxHeight` (default 280) so the field scrolls internally instead of growing without bound, `accessibilityLabel`, `style`, `testID`. Links in the preview are deliberately inert, so a tap while editing cannot navigate away from the draft.',
+      'Formatted-content editor. `<MarkdownInput value={draft} onChange={setDraft} />`. The default way to let an app USER write formatted text: a multi-line field that styles the markdown live as the user types (headings sized, bold, italic, code and links drawn in place, the markers kept in the text but dimmed), so the user reads and edits the result in one place; a toolbar whose buttons wrap the current SELECTION in markdown markers (bold, italic, code, H2, H3, bullets, numbered list); a Table button that inserts a pipe-table skeleton with the first header cell selected; and a Link button that opens a form for the link text plus its target. Use it rather than a bare `TextInput` plus formatting buttons of your own; an editor you do build (one that only bolds, a checklist editor) still stores markdown markers and previews with `<RichText>` — buttons that splice `<strong>`/`<br>`/`<table>` tags into the string leave the author reading tag soup with no preview of the real output. The stored value is markdown text, exactly as typed. Props: `value`, `onChange(next)`, `placeholder`, `showPreview` (default false; true also draws a rendered `<RichText>` copy underneath, for content the field can only show as markers: images and tables), `previewLabel` (default "Preview", the heading above that copy), `renderImage` (passed through to the preview), `pages` (optional `[{ id, name }]` — supply it and the Link form offers those pages to link to by name, the way `renderImage` is supplied for filestore images; without it the form offers only an external address, because a widget cannot know the app\'s pages on its own), `minHeight` (default 150) and `maxHeight` (default 280) so the field scrolls internally instead of growing without bound, `accessibilityLabel`, `style`, `testID`. Links in the preview are deliberately inert, so a tap while editing cannot navigate away from the draft.',
     rnComponent: null,
     docsUrl: null,
   },
@@ -5124,32 +5124,33 @@ function sharedTranslationKey(key) {
   return `${SHARED_TRANSLATION_PREFIX}${key}`;
 }
 
-// The predefined set. Map of bare key -> { en } (English default only; the
-// tenant adds target-language values once in the Translations admin and every
-// widget inherits them). Adding/removing a key is a CONTRACT change (it grows
-// the dictionary every tenant gets), so the list lives with the contract and
-// the seeder reads it from here — never a second copy.
+// The predefined set. Map of bare key -> { en, sv }. Swedish is shipped by
+// hand because a lone word machine-translates to the wrong sense ("Cancel" ->
+// "Avboka"); other languages are translated in the Translations admin and
+// every widget inherits them. Adding/removing a key is a CONTRACT change (it
+// grows the dictionary every tenant gets), so the list lives with the contract
+// and the seeder reads it from here — never a second copy.
 const SHARED_TRANSLATION_KEYS = Object.freeze({
-  submit: { en: "Submit" },
-  cancel: { en: "Cancel" },
-  save: { en: "Save" },
-  delete: { en: "Delete" },
-  edit: { en: "Edit" },
-  close: { en: "Close" },
-  confirm: { en: "Confirm" },
-  back: { en: "Back" },
-  next: { en: "Next" },
-  previous: { en: "Previous" },
-  yes: { en: "Yes" },
-  no: { en: "No" },
-  ok: { en: "OK" },
-  loading: { en: "Loading…" },
-  search: { en: "Search" },
-  no_results: { en: "No results" },
-  required: { en: "Required" },
-  retry: { en: "Retry" },
-  add: { en: "Add" },
-  remove: { en: "Remove" },
+  submit: { en: "Submit", sv: "Skicka" },
+  cancel: { en: "Cancel", sv: "Avbryt" },
+  save: { en: "Save", sv: "Spara" },
+  delete: { en: "Delete", sv: "Ta bort" },
+  edit: { en: "Edit", sv: "Redigera" },
+  close: { en: "Close", sv: "Stäng" },
+  confirm: { en: "Confirm", sv: "Bekräfta" },
+  back: { en: "Back", sv: "Tillbaka" },
+  next: { en: "Next", sv: "Nästa" },
+  previous: { en: "Previous", sv: "Föregående" },
+  yes: { en: "Yes", sv: "Ja" },
+  no: { en: "No", sv: "Nej" },
+  ok: { en: "OK", sv: "OK" },
+  loading: { en: "Loading…", sv: "Laddar…" },
+  search: { en: "Search", sv: "Sök" },
+  no_results: { en: "No results", sv: "Inga resultat" },
+  required: { en: "Required", sv: "Obligatoriskt" },
+  retry: { en: "Retry", sv: "Försök igen" },
+  add: { en: "Add", sv: "Lägg till" },
+  remove: { en: "Remove", sv: "Ta bort" },
 });
 
 // True when `key` is one of the predefined shared keys — the discriminator
@@ -6565,7 +6566,11 @@ const CONTRACT = deepFreeze({
   // 1.223.0: stricter (sc-12906) — `scopeMintPatterns`; a widget that calls
   //    the scope-header mint or sets `X-Widget-Scopes` is refused
   //    (`no-scope-header-mint`).
-  version: "1.223.0",
+  // 1.224.0: additive (sc-14501) — every `sharedTranslationKeys` entry
+  //    ships a hand-written `sv` value beside `en`.
+  // 1.225.0: behaviour (sc-14974) — `<MarkdownInput>` styles its own field
+  //    live; `showPreview` now defaults to false.
+  version: "1.225.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,

package/dist/index.d.ts

@@ -5712,9 +5712,11 @@ export const RichText: (props: {
 
 /**
  * sc-6970 — the authoring half of `<RichText>`: a multi-line field whose
- * toolbar wraps the current selection in markdown markers, with a live preview
- * of the rendered result. Use it instead of a bare `TextInput` plus hand-rolled
- * formatting buttons, which can only splice literal tags into the text.
+ * toolbar wraps the current selection in markdown markers. sc-14974: the field
+ * styles the markdown as it is typed, markers dimmed, so the author edits the
+ * formatted text directly. Use it instead of a bare `TextInput` plus
+ * hand-rolled formatting buttons, which can only splice literal tags into the
+ * text.
  *
  * @example
  *   <MarkdownInput value={draft} onChange={setDraft} placeholder="Write…" />
@@ -5725,9 +5727,12 @@ export const MarkdownInput: (props: {
   /** Receives the next markdown string on every edit. */
   onChange?: (next: string) => void;
   placeholder?: string;
-  /** Heading above the live preview. Defaults to "Preview". */
+  /** Heading above the rendered preview. Defaults to "Preview". */
   previewLabel?: string;
-  /** Set false to hide the live preview. Defaults to true. */
+  /**
+   * Also draw a rendered `<RichText>` copy under the field, for images and
+   * tables the field shows only as markers. Defaults to false.
+   */
   showPreview?: boolean;
   /** Passed through to the preview's `<RichText>`. */
   renderImage?: (block: {

package/dist/markdown-input-view.js

@@ -1,10 +1,14 @@
 // sc-6970 — the ONE implementation behind the `<MarkdownInput>` SDK primitive.
 //
 // The authoring half of `<RichText>`: a multi-line field whose toolbar wraps the
-// author's SELECTION in markdown markers and whose preview renders the result
-// live. Widgets previously had only a bare `TextInput`, so a widget asked for a
-// formatting toolbar had to splice literal `<strong>`/`<br>` tags into the text
-// — markup the author then read as tag soup, with no preview of the real output.
+// author's SELECTION in markdown markers. Widgets previously had only a bare
+// `TextInput`, so a widget asked for a formatting toolbar had to splice literal
+// `<strong>`/`<br>` tags into the text — markup the author then read as tag soup.
+//
+// sc-14974: the field itself is live-styled, so the author edits the formatted
+// text directly. Each host binding supplies its own `LiveField` (a TextInput
+// with styled children natively, a contentEditable on web); the rendered
+// `<RichText>` preview is opt-in for content the field shows only as markers.
 //
 // The two platform bindings differ ONLY in where the primitives come from; the
 // component is defined once here so the hosts cannot drift (CLAUDE.md §3, §8).
@@ -34,8 +38,8 @@ const TOOLS = Object.freeze([
   },
 ]);
 
-export function makeMarkdownInput(rn, RichText, Modal, Button) {
-  const { Text, View, Pressable, TextInput } = rn;
+export function makeMarkdownInput(rn, RichText, Modal, Button, LiveField) {
+  const { Text, View, Pressable } = rn;
   const MarkdownLinkDialog = makeMarkdownLinkDialog(rn, Modal, Button);
 
   function MarkdownInput({
@@ -43,7 +47,7 @@ export function makeMarkdownInput(rn, RichText, Modal, Button) {
     onChange,
     placeholder,
     previewLabel = "Preview",
-    showPreview = true,
+    showPreview = false,
     renderImage,
     pages,
     minHeight = 150,
@@ -55,6 +59,7 @@ export function makeMarkdownInput(rn, RichText, Modal, Button) {
     const theme = useHostTheme();
     const tokens = React.useMemo(() => resolveRichTextTokens(theme), [theme]);
     const [selection, setSelection] = React.useState({ start: 0, end: 0 });
+    const fieldRef = React.useRef(null);
     const [linkOpen, setLinkOpen] = React.useState(false);
 
     const text = typeof value === "string" ? value : "";
@@ -70,6 +75,8 @@ export function makeMarkdownInput(rn, RichText, Modal, Button) {
         const edit = markdownEditOps[toolKey];
         if (!edit) return;
         const next = edit(text, selection, options);
+        const field = fieldRef.current;
+        if (field && typeof field.recordEdit === "function") field.recordEdit();
         onChange(next.value);
         setSelection(next.selection);
       },
@@ -167,15 +174,15 @@ export function makeMarkdownInput(rn, RichText, Modal, Button) {
           ),
         ),
       ),
-      React.createElement(TextInput, {
+      React.createElement(LiveField, {
+        ref: fieldRef,
         value: text,
         onChangeText: onChange,
         onSelectionChange,
+        selection,
         placeholder,
-        placeholderTextColor: tokens.mutedColor,
         accessibilityLabel,
-        multiline: true,
-        numberOfLines: 6,
+        tokens,
         style: fieldStyle,
         testID: testID ? `${testID}-field` : undefined,
       }),

package/dist/markdown-input.js

@@ -1,17 +1,20 @@
 // sc-6970 — `<MarkdownInput>` (web). Binds the shared implementation in
-// ./markdown-input-view.js to react-native-web's primitives, and to the web
-// `<RichText>` it renders its preview with.
+// ./markdown-input-view.js to react-native-web's primitives, the web
+// `<RichText>` it renders its preview with, and the web live field.
 
 import { ReactNative } from "./text-scale.js";
 import { makeMarkdownInput } from "./markdown-input-view.js";
+import { MarkdownLiveField } from "./markdown-live-field.js";
 import { RichText } from "./richtext.js";
 import { Modal } from "./modal.js";
 import { Button } from "./button.js";
 import { TextInput } from "./primitives.js";
 
+// TextInput stays for the link form, which is built from the same `rn`.
 export const MarkdownInput = makeMarkdownInput(
   { ...ReactNative, TextInput },
   RichText,
   Modal,
   Button,
+  MarkdownLiveField,
 );

package/dist/markdown-input.native.js

@@ -5,6 +5,7 @@
 import { View, Pressable, ScrollView } from "react-native";
 import { Text, TextInput } from "./bounded-text.native.js";
 import { makeMarkdownInput } from "./markdown-input-view.js";
+import { MarkdownLiveField } from "./markdown-live-field.native.js";
 import { RichText } from "./richtext.native.js";
 import { Modal } from "./modal.native.js";
 import { Button } from "./button.native.js";
@@ -16,4 +17,5 @@ export const MarkdownInput = makeMarkdownInput(
   RichText,
   Modal,
   Button,
+  MarkdownLiveField,
 );

package/dist/markdown-live-field.js

@@ -0,0 +1,312 @@
+// sc-14974 — the live-styled field behind `<MarkdownInput>` (web).
+//
+// A `<textarea>` holds one string in one style, so the browser half is a
+// plain-text `contentEditable` instead: the author types into the styled text
+// itself. React cannot own the children of a node the browser is editing, so
+// this element is painted by hand from `markdownLiveSegments` and read back
+// as text. The native mirror is ./markdown-live-field.native.js.
+
+import React from "react";
+import { markdownLiveSegments } from "./markdown.js";
+import { markdownLiveRunStyle } from "./richtext-tokens.js";
+import { flattenStyle } from "./flatten-style.js";
+import { withTouchInputFontFloor } from "./touch-input-font-floor.js";
+
+const SENTINEL = "data-live-sentinel";
+const HISTORY_LIMIT = 100;
+// Keystrokes closer together than this undo as one step, like a textarea.
+const HISTORY_COALESCE_MS = 500;
+
+function hasCoarsePointer() {
+  return (
+    typeof window !== "undefined" &&
+    typeof window.matchMedia === "function" &&
+    window.matchMedia("(pointer: coarse)").matches
+  );
+}
+
+function isBlock(node) {
+  return node.nodeName === "DIV" || node.nodeName === "P";
+}
+
+// The browser may split text, add a `<br>` for Enter, or wrap a pasted line
+// in a block; each of those reads back as the newline it stands for.
+function readText(node, dropTrailingBreak = false) {
+  const children = [...node.childNodes];
+  // A final <br> only holds the last line open, so it is never content.
+  const last = children[children.length - 1];
+  if (dropTrailingBreak && last && last.nodeName === "BR") children.pop();
+  let out = "";
+  children.forEach((child, i) => {
+    if (child.nodeType === 3) out += child.data;
+    else if (child.nodeName === "BR") {
+      if (!child.hasAttribute(SENTINEL)) out += "\n";
+    } else {
+      if (isBlock(child) && i > 0) out += "\n";
+      out += readText(child);
+    }
+  });
+  return out;
+}
+
+const fieldText = (root) => readText(root, true);
+
+function firstDifference(a, b) {
+  let i = 0;
+  while (i < a.length && a.charAt(i) === b.charAt(i)) i += 1;
+  return i;
+}
+
+function offsetOf(root, node, offset) {
+  const range = root.ownerDocument.createRange();
+  range.setStart(root, 0);
+  range.setEnd(node, offset);
+  return readText(range.cloneContents());
+}
+
+function readSelection(root) {
+  const selection = root.ownerDocument.getSelection();
+  if (!selection || selection.rangeCount === 0) return null;
+  const { anchorNode, focusNode } = selection;
+  if (!root.contains(anchorNode) || !root.contains(focusNode)) return null;
+  const anchor = offsetOf(root, anchorNode, selection.anchorOffset).length;
+  const focus = offsetOf(root, focusNode, selection.focusOffset).length;
+  return { start: Math.min(anchor, focus), end: Math.max(anchor, focus) };
+}
+
+// Only ever called on a tree `paint` built: text nodes inside spans.
+function locate(root, target) {
+  let remaining = target;
+  for (const child of root.childNodes) {
+    const textNode = child.nodeType === 3 ? child : child.firstChild;
+    if (!textNode || textNode.nodeType !== 3) continue;
+    if (remaining <= textNode.data.length) return [textNode, remaining];
+    remaining -= textNode.data.length;
+  }
+  return [root, Math.max(root.childNodes.length - 1, 0)];
+}
+
+function writeSelection(root, { start, end }) {
+  const selection = root.ownerDocument.getSelection();
+  if (!selection) return;
+  const range = root.ownerDocument.createRange();
+  range.setStart(...locate(root, start));
+  range.setEnd(...locate(root, end));
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+
+function cssOf(style) {
+  const css = {};
+  for (const [key, value] of Object.entries(style)) {
+    css[key] = typeof value === "number" && key !== "fontWeight" ? `${value}px` : value;
+  }
+  return css;
+}
+
+function paint(root, value, tokens) {
+  const doc = root.ownerDocument;
+  root.textContent = "";
+  for (const run of markdownLiveSegments(value)) {
+    const span = doc.createElement("span");
+    span.textContent = run.text;
+    Object.assign(span.style, cssOf(markdownLiveRunStyle(run, tokens)));
+    root.appendChild(span);
+  }
+  // Without it a trailing newline has no line to draw, nor a caret to hold.
+  const sentinel = doc.createElement("br");
+  sentinel.setAttribute(SENTINEL, "");
+  root.appendChild(sentinel);
+}
+
+// The field arrives as a React Native style; this element is plain DOM.
+function fieldCss(style) {
+  const { lineHeight, ...rest } = flattenStyle(withTouchInputFontFloor(style, hasCoarsePointer()));
+  delete rest.textAlignVertical;
+  return {
+    ...rest,
+    ...(typeof lineHeight === "number" ? { lineHeight: `${lineHeight}px` } : null),
+    ...(rest.borderWidth ? { borderStyle: "solid" } : null),
+    overflowY: "auto",
+    whiteSpace: "pre-wrap",
+    overflowWrap: "anywhere",
+    outlineOffset: 2,
+  };
+}
+
+function isUndoKey(event) {
+  return (event.metaKey || event.ctrlKey) && !event.altKey;
+}
+
+
+export const MarkdownLiveField = React.forwardRef(function MarkdownLiveField(
+  { value, onChangeText, onSelectionChange, selection, placeholder, accessibilityLabel, tokens, style, testID },
+  handle,
+) {
+  const ref = React.useRef(null);
+  const painted = React.useRef(null);
+  const emitted = React.useRef(null);
+  const announced = React.useRef(false);
+  const composing = React.useRef(false);
+  const [isComposing, setComposing] = React.useState(false);
+  const [, rerender] = React.useReducer((n) => n + 1, 0);
+  const history = React.useRef({ past: [], future: [], at: 0 });
+  const latest = React.useRef(null);
+
+  // `coalesce` joins the open step; a typed edit leaves its step open for more.
+  const record = React.useCallback((coalesce, typing) => {
+    const stack = history.current;
+    const now = Date.now();
+    if (!coalesce || now - stack.at > HISTORY_COALESCE_MS || stack.past.length === 0) {
+      stack.past.push({ value: latest.current.value, selection: latest.current.selection });
+      if (stack.past.length > HISTORY_LIMIT) stack.past.shift();
+    }
+    stack.at = typing ? now : 0;
+    stack.future = [];
+  }, []);
+
+  // The toolbar edits the value from outside; this makes that edit undoable.
+  React.useImperativeHandle(
+    handle,
+    () => ({
+      recordEdit() {
+        record(false);
+        announced.current = true;
+      },
+    }),
+    [record],
+  );
+
+  const step = (redo) => {
+    const stack = history.current;
+    const entry = (redo ? stack.future : stack.past).pop();
+    if (!entry) return;
+    (redo ? stack.past : stack.future).push({ value, selection });
+    stack.at = 0;
+    if (typeof onChangeText !== "function") return;
+    emitted.current = entry.value;
+    onChangeText(entry.value);
+    const root = ref.current;
+    if (root) {
+      paint(root, entry.value, tokens);
+      painted.current = { value: entry.value, tokens };
+      if (entry.selection) writeSelection(root, entry.selection);
+    }
+  };
+  latest.current = { value, selection, onSelectionChange, step };
+
+  // Runs after every render, so an edit the parent did not take reverts.
+  React.useLayoutEffect(() => {
+    const root = ref.current;
+    if (!root) return;
+    const unchanged =
+      painted.current && painted.current.value === value && painted.current.tokens === tokens;
+    if (unchanged && fieldText(root) === value) return;
+    const typed = emitted.current === value;
+    if (painted.current && !unchanged && !typed && !announced.current) {
+      // The parent replaced the text (a reset, another record): old steps no longer apply.
+      history.current = { past: [], future: [], at: 0 };
+    }
+    announced.current = false;
+    const caret = readSelection(root);
+    paint(root, value, tokens);
+    painted.current = { value, tokens };
+    if (caret && (typed || unchanged)) writeSelection(root, caret);
+  });
+
+  React.useEffect(() => {
+    const root = ref.current;
+    if (!root) return undefined;
+    const doc = root.ownerDocument;
+    const report = () => {
+      const next = readSelection(root);
+      const handler = latest.current.onSelectionChange;
+      if (next && typeof handler === "function") handler({ nativeEvent: { selection: next } });
+    };
+    // The Edit menu, a context menu and shake-to-undo arrive here, not as keys.
+    const onBeforeInput = (event) => {
+      if (event.inputType !== "historyUndo" && event.inputType !== "historyRedo") return;
+      event.preventDefault();
+      latest.current.step(event.inputType === "historyRedo");
+    };
+    doc.addEventListener("selectionchange", report);
+    root.addEventListener("beforeinput", onBeforeInput);
+    return () => {
+      doc.removeEventListener("selectionchange", report);
+      root.removeEventListener("beforeinput", onBeforeInput);
+    };
+  }, []);
+
+  const onInput = () => {
+    const root = ref.current;
+    if (composing.current || !root) return;
+    const next = fieldText(root);
+    if (next !== value && typeof onChangeText === "function") {
+      // A typed space or newline starts a new undo step, as in a textarea.
+      const inserted = next.length > value.length ? next.charAt(firstDifference(value, next)) : "";
+      record(!/\s/.test(inserted), true);
+      emitted.current = next;
+      onChangeText(next);
+    }
+    rerender();
+  };
+
+  // Every repaint replaces the nodes the browser's own undo stack points at.
+  const onKeyDown = (event) => {
+    if (!isUndoKey(event)) return;
+    const key = event.key.toLowerCase();
+    if (key !== "z" && key !== "y") return;
+    event.preventDefault();
+    step(key === "y" || event.shiftKey);
+  };
+
+  const css = fieldCss(style);
+  return React.createElement(
+    "div",
+    { style: { position: "relative" } },
+    React.createElement("div", {
+      ref,
+      contentEditable: "plaintext-only",
+      suppressContentEditableWarning: true,
+      role: "textbox",
+      "aria-multiline": "true",
+      "aria-label": accessibilityLabel,
+      "aria-placeholder": placeholder,
+      "data-testid": testID,
+      spellCheck: true,
+      style: css,
+      onInput,
+      onKeyDown,
+      onCompositionStart: () => {
+        composing.current = true;
+        setComposing(true);
+      },
+      onCompositionEnd: () => {
+        composing.current = false;
+        setComposing(false);
+        onInput();
+      },
+    }),
+    !value && !isComposing && placeholder
+      ? React.createElement(
+          "div",
+          {
+            "aria-hidden": "true",
+            // The field's own box, transparent, so the hint sits where text will.
+            style: {
+              ...css,
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              pointerEvents: "none",
+              color: tokens.mutedColor,
+              backgroundColor: "transparent",
+              borderColor: "transparent",
+            },
+          },
+          placeholder,
+        )
+      : null,
+  );
+});

package/dist/markdown-live-field.native.js

@@ -0,0 +1,36 @@
+// sc-14974 — the live-styled field behind `<MarkdownInput>` (native).
+//
+// iOS and Android both accept nested `<Text>` as a `TextInput`'s children and
+// draw them as attributed text, so the formatting appears in the field the
+// author types into. The runs join back to `value` exactly, which is what keeps
+// the input controlled. The web mirror is ./markdown-live-field.js.
+
+import React from "react";
+import { Text, TextInput } from "./bounded-text.native.js";
+import { markdownLiveSegments } from "./markdown.js";
+import { markdownLiveRunStyle } from "./richtext-tokens.js";
+
+// The OS keeps this field's undo history, so the toolbar has nothing to record.
+export const MarkdownLiveField = React.forwardRef(function MarkdownLiveField(
+  { value, onChangeText, onSelectionChange, placeholder, accessibilityLabel, tokens, style, testID },
+  ref,
+) {
+  const runs = React.useMemo(() => markdownLiveSegments(value), [value]);
+  return React.createElement(
+    TextInput,
+    {
+      ref,
+      onChangeText,
+      onSelectionChange,
+      placeholder,
+      placeholderTextColor: tokens.mutedColor,
+      accessibilityLabel,
+      multiline: true,
+      style,
+      testID,
+    },
+    runs.map((run, i) =>
+      React.createElement(Text, { key: i, style: markdownLiveRunStyle(run, tokens) }, run.text),
+    ),
+  );
+});

package/dist/markdown.js

@@ -192,10 +192,18 @@ const LINK_PATTERN =
 const PLAIN_PATTERN =
   /(!?)([^\s\S])([^\s\S])|(\*\*)(.+?)\4|(`)([^`]+?)\6|([*_])(.+?)\8/g;
 
-/** Splits one line into `{ text, bold?, italic?, code?, href? }` spans. */
-function parseInline(line) {
-  const source = typeof line === "string" ? line : "";
-  const spans = [];
+/**
+ * Splits one line into positioned tokens: `{ type: "text", start, end }`, or
+ * `{ type: "bold"|"italic"|"code", start, end, contentStart, contentEnd }`, or
+ * `{ type: "link", start, end, contentStart, contentEnd, href }` whose content
+ * is the RAW label. `parseInline` and the live editor both read these, so the
+ * editor cannot style a construct the renderer would not draw.
+ */
+function scanInline(source) {
+  const tokens = [];
+  const text = (start, end) => {
+    if (end > start) tokens.push({ type: "text", start, end });
+  };
   // One pass over the four delimiters. Alternation order matters: `**` must
   // be tried before `*` or the bold marker is consumed as two italics.
   // The link branch scans forward from EVERY `[`, so a line carrying many
@@ -208,34 +216,68 @@ function parseInline(line) {
   let cursor = 0;
   let match = pattern.exec(source);
   while (match) {
-    if (match.index > cursor) {
-      spans.push({ text: source.slice(cursor, match.index) });
-    }
+    text(cursor, match.index);
+    const end = match.index + match[0].length;
     if (match[3] !== undefined) {
       // An image is its own whole-line block, so an inline `![alt](src)` stays
       // literal text rather than becoming a link to the image.
-      if (match[1]) spans.push({ text: match[0] });
-      else for (const span of linkSpans(match[2], match[3])) spans.push(span);
+      if (match[1]) text(match.index, end);
+      else {
+        const contentStart = match.index + 1;
+        tokens.push({
+          type: "link",
+          start: match.index,
+          end,
+          contentStart,
+          contentEnd: contentStart + match[2].length,
+          href: match[3],
+        });
+      }
     } else if (match[4] || match[8]) {
       const delim = match[4] || match[8];
       const content = match[4] ? match[5] : match[9];
-      const closeEnd = match.index + match[0].length;
-      if (!emphasisFlanks(delim, content, source, match.index, closeEnd)) {
+      if (!emphasisFlanks(delim, content, source, match.index, end)) {
         // Not emphasis after all: keep the delimiter as text and rescan from
         // just after it, so a later legitimate pair can still match.
-        spans.push({ text: delim });
+        text(match.index, match.index + delim.length);
         cursor = match.index + delim.length;
         pattern.lastIndex = cursor;
         match = pattern.exec(source);
         continue;
       }
-      if (match[4]) spans.push({ text: content, bold: true });
-      else spans.push({ text: content, italic: true });
-    } else if (match[6]) spans.push({ text: match[7], code: true });
-    cursor = match.index + match[0].length;
+      tokens.push({
+        type: match[4] ? "bold" : "italic",
+        start: match.index,
+        end,
+        contentStart: match.index + delim.length,
+        contentEnd: end - delim.length,
+      });
+    } else if (match[6]) {
+      tokens.push({
+        type: "code",
+        start: match.index,
+        end,
+        contentStart: match.index + 1,
+        contentEnd: end - 1,
+      });
+    }
+    cursor = end;
     match = pattern.exec(source);
   }
-  if (cursor < source.length) spans.push({ text: source.slice(cursor) });
+  text(cursor, source.length);
+  return tokens;
+}
+
+/** Splits one line into `{ text, bold?, italic?, code?, href? }` spans. */
+function parseInline(line) {
+  const source = typeof line === "string" ? line : "";
+  const spans = [];
+  for (const token of scanInline(source)) {
+    const content = source.slice(token.contentStart, token.contentEnd);
+    if (token.type === "text") spans.push({ text: source.slice(token.start, token.end) });
+    else if (token.type === "link") spans.push(...linkSpans(content, token.href));
+    else spans.push({ text: content, [token.type]: true });
+  }
   if (spans.length === 0) return [{ text: source }];
   // A rejected delimiter leaves plain fragments either side of it; fold them
   // back so a line of prose stays one span instead of three.
@@ -490,6 +532,116 @@ export function parseMarkdown(text, options) {
   return blocks;
 }
 
+const LIVE_STYLE_KEYS = ["marker", "bold", "italic", "code", "href", "heading"];
+
+function sameLiveStyle(a, b) {
+  return LIVE_STYLE_KEYS.every((key) => (a[key] || false) === (b[key] || false));
+}
+
+/**
+ * sc-14974 — `text` cut into styled runs for the live editor. Joining every
+ * run's `text` gives back `text` byte for byte: nothing is trimmed or joined,
+ * and markdown markers stay in place flagged `marker` so the editor can dim
+ * them. Each run is `{ text, marker?, bold?, italic?, code?, href?, heading? }`
+ * with `heading` the level. Lines are classified in `parseMarkdown`'s order.
+ */
+export function markdownLiveSegments(text) {
+  const source = typeof text === "string" ? text : "";
+  const runs = [];
+  const push = (value, style) => {
+    if (!value) return;
+    const last = runs[runs.length - 1];
+    if (last && sameLiveStyle(last, style)) last.text += value;
+    else runs.push({ text: value, ...style });
+  };
+  const inline = (value, base) => {
+    for (const token of scanInline(value)) {
+      if (token.type === "text") {
+        push(value.slice(token.start, token.end), base);
+        continue;
+      }
+      const content = value.slice(token.contentStart, token.contentEnd);
+      push(value.slice(token.start, token.contentStart), { ...base, marker: true });
+      if (token.type === "link") inline(content, { ...base, href: token.href });
+      else push(content, { ...base, [token.type]: true });
+      push(value.slice(token.contentEnd, token.end), { ...base, marker: true });
+    }
+  };
+  const tableRow = (line, base) => {
+    let cellStart = 0;
+    for (let k = 0; k < line.length; k += 1) {
+      if (line.charAt(k) === "\\" && line.charAt(k + 1) === "|") k += 1;
+      else if (line.charAt(k) === "|") {
+        inline(line.slice(cellStart, k), base);
+        push("|", { marker: true });
+        cellStart = k + 1;
+      }
+    }
+    inline(line.slice(cellStart), base);
+  };
+
+  const lines = source.split("\n");
+  let inFence = false;
+  let tableStart = -1;
+  let tableEnd = -1;
+  for (let i = 0; i < lines.length; i += 1) {
+    if (i > 0) push("\n", {});
+    const line = lines[i];
+    const trimmed = line.trimEnd();
+    const tail = line.slice(trimmed.length);
+
+    if (inFence) {
+      if (FENCE_CLOSE_RE.test(line)) inFence = false;
+      push(line, inFence ? { code: true } : { marker: true });
+      continue;
+    }
+    if (FENCE_OPEN_RE.test(trimmed)) {
+      inFence = true;
+      push(line, { marker: true });
+      continue;
+    }
+
+    if (i > tableEnd && TABLE_ROW_RE.test(line) && TABLE_DIVIDER_RE.test(lines[i + 1] || "")) {
+      tableStart = i;
+      tableEnd = i + 1;
+      while (tableEnd + 1 < lines.length && TABLE_ROW_RE.test(lines[tableEnd + 1])) tableEnd += 1;
+    }
+    if (i <= tableEnd) {
+      if (i === tableStart + 1) push(line, { marker: true });
+      else tableRow(line, i === tableStart ? { bold: true } : {});
+      continue;
+    }
+
+    const lead = trimmed.length - trimmed.trimStart().length;
+    const image = IMAGE_RE.exec(trimmed.trimStart());
+    if (image) {
+      const altStart = lead + 2;
+      const altEnd = altStart + image[1].length;
+      push(line.slice(0, altStart), { marker: true });
+      push(line.slice(altStart, altEnd), {});
+      push(line.slice(altEnd, trimmed.length), { marker: true });
+      push(tail, {});
+      continue;
+    }
+
+    const heading = HEADING_RE.exec(trimmed);
+    const listItem = heading ? null : BULLET_RE.exec(trimmed) || ORDERED_RE.exec(trimmed);
+    if (heading || listItem) {
+      const content = heading ? heading[2] : listItem[listItem.length - 1];
+      const base = heading ? { heading: heading[1].length } : {};
+      const contentStart = trimmed.length - content.length;
+      push(trimmed.slice(0, contentStart), { ...base, marker: true });
+      inline(content, base);
+      push(tail, base);
+      continue;
+    }
+
+    inline(trimmed, {});
+    push(tail, {});
+  }
+  return runs;
+}
+
 function spansToText(spans) {
   return spans.map((span) => span.text).join("");
 }

package/dist/richtext-tokens.js

@@ -57,3 +57,41 @@ export function resolveRichTextTokens(theme) {
 }
 
 export { IMAGE_WIDTH as RICH_TEXT_IMAGE_WIDTH };
+
+/** The style one inline span is drawn with, by `<RichText>` and the editor. */
+export function richTextSpanStyle(span, tokens) {
+  return {
+    ...(span.bold ? { fontWeight: "700" } : null),
+    ...(span.italic ? { fontStyle: "italic" } : null),
+    // A code span needs a mono face; the theme has no mono token.
+    ...(span.code
+      ? { fontFamily: "monospace", fontSize: tokens.codeSize, color: tokens.mutedColor }
+      : null),
+    // sc-7349: a link looks like a link whether or not THIS host can follow it.
+    ...(span.href ? { color: tokens.accent, textDecorationLine: "underline" } : null),
+  };
+}
+
+/**
+ * sc-14974 — the style one `markdownLiveSegments` run is drawn with in
+ * `<MarkdownInput>`: the span's `<RichText>` look, sized as its heading, with
+ * markers dimmed so the text reads as the result while staying editable.
+ */
+export function markdownLiveRunStyle(run, tokens) {
+  const headingSize = run.heading
+    ? tokens.headingSizes[run.heading] || tokens.headingSizes[3]
+    : null;
+  return {
+    ...(headingSize
+      ? {
+          fontFamily: tokens.headingFont,
+          fontWeight: "700",
+          fontSize: headingSize,
+          // The field's body leading would overlap a larger heading line.
+          lineHeight: Math.round(headingSize * 1.3),
+        }
+      : null),
+    ...richTextSpanStyle(run, tokens),
+    ...(run.marker ? { color: tokens.mutedColor, textDecorationLine: "none" } : null),
+  };
+}

package/dist/richtext-view.js

@@ -11,7 +11,7 @@
 import React from "react";
 import { useHostTheme, useHostNavigation } from "./hooks.js";
 import { parseMarkdown, isHttpImageSrc } from "./markdown.js";
-import { resolveRichTextTokens } from "./richtext-tokens.js";
+import { resolveRichTextTokens, richTextSpanStyle } from "./richtext-tokens.js";
 
 export function makeRichText(rn) {
   const { Text, View, Image } = rn;
@@ -25,23 +25,7 @@ export function makeRichText(rn) {
           key: i,
           onPress: followable ? () => onLinkPress(span.href) : undefined,
           accessibilityRole: followable ? "link" : undefined,
-          style: [
-            span.bold ? { fontWeight: "700" } : null,
-            span.italic ? { fontStyle: "italic" } : null,
-            span.code
-              ? {
-                  // A code span needs a mono face; the theme has no mono token.
-                  fontFamily: "monospace",
-                  fontSize: tokens.codeSize,
-                  color: tokens.mutedColor,
-                }
-              : null,
-            // sc-7349: a link looks like a link whether or not THIS host can
-            // follow it, so the editor preview shows the reader's document.
-            span.href
-              ? { color: tokens.accent, textDecorationLine: "underline" }
-              : null,
-          ],
+          style: richTextSpanStyle(span, tokens),
         },
         span.text,
       );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colixsystems/widget-sdk",
-  "version": "0.273.0",
+  "version": "0.275.0",
   "description": "Common widget interface for AppStudio. Implements WidgetManifest, WidgetContext, property schema, and helper hooks.",
   "homepage": "https://github.com/Colix-AB/AppStudio",
   "type": "module",

package/src/contract.js

@@ -3470,7 +3470,7 @@ const PRIMITIVES = [
   {
     name: "MarkdownInput",
     description:
-      'Formatted-content editor. `<MarkdownInput value={draft} onChange={setDraft} />`. The default way to let an app USER write formatted text: a multi-line field, a toolbar whose buttons wrap the current SELECTION in markdown markers (bold, italic, code, H2, H3, bullets, numbered list), a Table button that inserts a pipe-table skeleton with the first header cell selected, a Link button that opens a form for the link text plus its target, and a live `<RichText>` preview of the result underneath. Use it rather than a bare `TextInput` plus formatting buttons of your own; an editor you do build (one that only bolds, a checklist editor) still stores markdown markers and previews with `<RichText>` — buttons that splice `<strong>`/`<br>`/`<table>` tags into the string leave the author reading tag soup with no preview of the real output. The stored value is markdown text. Props: `value`, `onChange(next)`, `placeholder`, `previewLabel` (default "Preview"), `showPreview` (default true), `renderImage` (passed through to the preview), `pages` (optional `[{ id, name }]` — supply it and the Link form offers those pages to link to by name, the way `renderImage` is supplied for filestore images; without it the form offers only an external address, because a widget cannot know the app\'s pages on its own), `minHeight` (default 150) and `maxHeight` (default 280) so the field scrolls internally instead of growing without bound, `accessibilityLabel`, `style`, `testID`. Links in the preview are deliberately inert, so a tap while editing cannot navigate away from the draft.',
+      'Formatted-content editor. `<MarkdownInput value={draft} onChange={setDraft} />`. The default way to let an app USER write formatted text: a multi-line field that styles the markdown live as the user types (headings sized, bold, italic, code and links drawn in place, the markers kept in the text but dimmed), so the user reads and edits the result in one place; a toolbar whose buttons wrap the current SELECTION in markdown markers (bold, italic, code, H2, H3, bullets, numbered list); a Table button that inserts a pipe-table skeleton with the first header cell selected; and a Link button that opens a form for the link text plus its target. Use it rather than a bare `TextInput` plus formatting buttons of your own; an editor you do build (one that only bolds, a checklist editor) still stores markdown markers and previews with `<RichText>` — buttons that splice `<strong>`/`<br>`/`<table>` tags into the string leave the author reading tag soup with no preview of the real output. The stored value is markdown text, exactly as typed. Props: `value`, `onChange(next)`, `placeholder`, `showPreview` (default false; true also draws a rendered `<RichText>` copy underneath, for content the field can only show as markers: images and tables), `previewLabel` (default "Preview", the heading above that copy), `renderImage` (passed through to the preview), `pages` (optional `[{ id, name }]` — supply it and the Link form offers those pages to link to by name, the way `renderImage` is supplied for filestore images; without it the form offers only an external address, because a widget cannot know the app\'s pages on its own), `minHeight` (default 150) and `maxHeight` (default 280) so the field scrolls internally instead of growing without bound, `accessibilityLabel`, `style`, `testID`. Links in the preview are deliberately inert, so a tap while editing cannot navigate away from the draft.',
     rnComponent: null,
     docsUrl: null,
   },
@@ -5124,32 +5124,33 @@ function sharedTranslationKey(key) {
   return `${SHARED_TRANSLATION_PREFIX}${key}`;
 }
 
-// The predefined set. Map of bare key -> { en } (English default only; the
-// tenant adds target-language values once in the Translations admin and every
-// widget inherits them). Adding/removing a key is a CONTRACT change (it grows
-// the dictionary every tenant gets), so the list lives with the contract and
-// the seeder reads it from here — never a second copy.
+// The predefined set. Map of bare key -> { en, sv }. Swedish is shipped by
+// hand because a lone word machine-translates to the wrong sense ("Cancel" ->
+// "Avboka"); other languages are translated in the Translations admin and
+// every widget inherits them. Adding/removing a key is a CONTRACT change (it
+// grows the dictionary every tenant gets), so the list lives with the contract
+// and the seeder reads it from here — never a second copy.
 const SHARED_TRANSLATION_KEYS = Object.freeze({
-  submit: { en: "Submit" },
-  cancel: { en: "Cancel" },
-  save: { en: "Save" },
-  delete: { en: "Delete" },
-  edit: { en: "Edit" },
-  close: { en: "Close" },
-  confirm: { en: "Confirm" },
-  back: { en: "Back" },
-  next: { en: "Next" },
-  previous: { en: "Previous" },
-  yes: { en: "Yes" },
-  no: { en: "No" },
-  ok: { en: "OK" },
-  loading: { en: "Loading…" },
-  search: { en: "Search" },
-  no_results: { en: "No results" },
-  required: { en: "Required" },
-  retry: { en: "Retry" },
-  add: { en: "Add" },
-  remove: { en: "Remove" },
+  submit: { en: "Submit", sv: "Skicka" },
+  cancel: { en: "Cancel", sv: "Avbryt" },
+  save: { en: "Save", sv: "Spara" },
+  delete: { en: "Delete", sv: "Ta bort" },
+  edit: { en: "Edit", sv: "Redigera" },
+  close: { en: "Close", sv: "Stäng" },
+  confirm: { en: "Confirm", sv: "Bekräfta" },
+  back: { en: "Back", sv: "Tillbaka" },
+  next: { en: "Next", sv: "Nästa" },
+  previous: { en: "Previous", sv: "Föregående" },
+  yes: { en: "Yes", sv: "Ja" },
+  no: { en: "No", sv: "Nej" },
+  ok: { en: "OK", sv: "OK" },
+  loading: { en: "Loading…", sv: "Laddar…" },
+  search: { en: "Search", sv: "Sök" },
+  no_results: { en: "No results", sv: "Inga resultat" },
+  required: { en: "Required", sv: "Obligatoriskt" },
+  retry: { en: "Retry", sv: "Försök igen" },
+  add: { en: "Add", sv: "Lägg till" },
+  remove: { en: "Remove", sv: "Ta bort" },
 });
 
 // True when `key` is one of the predefined shared keys — the discriminator
@@ -6565,7 +6566,11 @@ const CONTRACT = deepFreeze({
   // 1.223.0: stricter (sc-12906) — `scopeMintPatterns`; a widget that calls
   //    the scope-header mint or sets `X-Widget-Scopes` is refused
   //    (`no-scope-header-mint`).
-  version: "1.223.0",
+  // 1.224.0: additive (sc-14501) — every `sharedTranslationKeys` entry
+  //    ships a hand-written `sv` value beside `en`.
+  // 1.225.0: behaviour (sc-14974) — `<MarkdownInput>` styles its own field
+  //    live; `showPreview` now defaults to false.
+  version: "1.225.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,