@colixsystems/widget-sdk 0.274.0 → 0.275.1

package/README.md

@@ -86,7 +86,15 @@ See the design reference for the full architecture: [`docs/architecture/widget-m
 
 ## Status
 
-`v0.274.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.1` — 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.1 (contract 1.225.0)
+
+**A filter on a list column asks about its members.** On a `STRING_ARRAY` or `INT_ARRAY` column, `eq` keeps the rows whose list holds that value (exactly, case included), and `empty` / `nempty` keep the rows whose list is empty or not. Any other operator on a list column is refused with `INVALID_FILTER`. Before, every filter on a list column matched nothing (`empty` matched everything), so a widget that shows the documents tagged for one page had to fetch a batch and narrow it in JavaScript. Now it sends `filter: [{ column: pagesField, operator: "eq", value: tag }]`.
+
+### 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)
 
@@ -3327,7 +3335,7 @@ Additive: `WidgetManifest` carries an optional `datastoreTemplate` field. When a
 import { defineWidget, validateManifest, useDatastoreQuery, Text, View } from "@colixsystems/widget-sdk";
 ```
 
-- `defineWidget({ manifest, component })` — validates the manifest and produces a widget module the host can register.
+- `defineWidget({ manifest, component })` — validates the manifest and produces a widget module the host can register. For published packages: a widget sent with `submit_widget_source` default-exports the component, and its manifest goes only in the `manifest` field.
 - `validateManifest(m)` / `validatePropertySchema(s)` / `validateProps(schema, props)` — shape validation; no third-party deps.
 - `useDatastoreQuery`, `useDatastoreRecord`, `useDatastoreSchema`, `useDatastoreMutation`, `useDirectory`, `useUsers`, `useGroups`, `useRecordPermissions`, `useAsset`, `useWidgetEvent`, `useWidgetInput`, `usePayments`, `useSendNotification`, `useTheme`, `useI18n`, `useUser`, `useNavigation`, `useRouteParams`, `usePageContext`, `useWidgetRoute`, `useChildRenderer`, `useClipboard`, `useToast` — hooks that read from the host-provided `WidgetContext` (or, for `useClipboard`, the platform clipboard API directly). `useDirectory(query?)` returns `{ users, loading, error, refetch }` (each user `{ id, name, role }`) and requires the `directory.read:users` scope. `useUsers(query?)` returns `{ users, loading, error, refetch, invite, deactivate, reactivate, remove }` and requires `users.read:*` (mutations also need `users.write:*`); rejections are a `DirectoryError`. `useGroups(query?)` returns `{ groups, loading, error, refetch, create, remove, addMember, removeMember }` and requires `groups.read:*` (mutations also need `groups.write:*`). `usePayments()` returns `{ requestPayment, getPayment }` and requires the `payments.charge:appUser` scope; `requestPayment(...)` rejects with a `PaymentError` carrying `code`, the server's user-safe `message`, and `retryable` (`false` = this charge cannot succeed until the workspace, manifest, or amount changes — show the message, not a retry). `useSendNotification()` returns `{ send, sending, error }` and requires the `notifications.send:appUser` scope; `send({ recipient_user_id, title, body, link?, payload? })` notifies one app user in the same workspace (cross-workspace `recipient_user_id` is rejected), must be called from an event handler rather than render, and rejects with a `NotificationError`. `useUser()` returns the active end-user identity `{ id, email, displayName, roles, groupIds }` (camelCase — the host-built context object, not a wire payload; `id` is `null` for anonymous / preview). `useNavigation()` returns `{ goTo, goToStartPage, scrollToSection, scrollIntoView, goBack, push, replace, back, currentRoute, openLink }` for internal page navigation; `goToStartPage()` opens the signed-in user's own start page (the page the app opens on for them); `scrollToSection(sectionId)` scrolls the current page to one of its sections (bind the id with a `sectionRef` prop); `scrollIntoView(ref)` scrolls it to an element inside the calling widget; `openLink(link)` follows an author- or data-supplied link of unknown shape through the host's shared resolver (in-app page → internal route, off-app http(s) → opened outside, unsafe → refused) and is the safe choice for any value your code did not construct, while `Linking.openURL(url)` is for an external URL you built yourself. `useRouteParams()` returns the current route's params object (`currentRoute.params`) — the flat master→detail accessor; read a param off it (e.g. `recordId`), never call it. `useDatastoreRecord(tableId, recordId)` returns `{ data, loading, error, refetch }` for a single record (data is one row or null). `useDatastoreSchema(tableId)` returns `{ schema, loading, error, refetch }` where `schema` is `{ id, name, columns: [{ id, name, data_type, required, relation_type, target_table_id, is_identification }] }` (structure only, no row data; snake_case verbatim) — use it to resolve a stored `columnId` to its column type at runtime; requires the `datastore.read:<table>` scope. `useAsset(fileId)` returns `{ url, file, loading, error, refetch }` — the `url` is an absolute URL composed against the host's API base. `useChildRenderer()` returns `{ renderNode(node) }` — container widgets call it to render arbitrary child page-tree nodes (prefer the `WidgetTree` component for the common case). `useWidgetInput(inputName)` returns the latest payload a sibling widget published on the event the page author wired to this widget's declared `inputs` entry (`undefined` when unwired or not yet published).
 - `WidgetTree({ node })` — component that renders an author-authored child node through the host's renderer; used by Tabs / Card / custom containers to host arbitrary child widgets.
@@ -3641,7 +3649,7 @@ export default function OpenTasks({ tableId, titleField, statusField }) {
 | `offset` | Rows to skip, for the next page. |
 | `includeCapabilities` | `true` stamps each row with `_capabilities`, what the signed-in user may do to it. |
 
-The filter operators are `eq`, `neq`, `gt`, `gte`, `lt`, `lte`, `contains` (a case-insensitive substring), `empty` and `nempty` (no value). In the array form a condition may carry `valueMode`: `"currentUser"` or `"currentUserGroup"` with `eq` or `neq` matches the signed-in user (or their groups) on a USER or USER_GROUP column, and `"relativeDate"` with an ordering operator reads `value` as "that many days ago".
+The filter operators are `eq`, `neq`, `gt`, `gte`, `lt`, `lte`, `contains` (a case-insensitive substring), `empty` and `nempty` (no value). On a list column (`STRING_ARRAY`, `INT_ARRAY`), `eq` keeps the rows whose list holds the value exactly, `empty` / `nempty` test whether it holds any, and every other operator is refused. In the array form a condition may carry `valueMode`: `"currentUser"` or `"currentUserGroup"` with `eq` or `neq` matches the signed-in user (or their groups) on a USER or USER_GROUP column, and `"relativeDate"` with an ordering operator reads `value` as "that many days ago".
 
 The result's `total` is how many rows match in all, not just this page: show "12 of 312" and page with `offset`. For a count, a sum or an average, use `useDatastoreFigure(tableId, { aggregate, column, filter })` instead of reading rows.
 

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,
   },
@@ -6571,7 +6571,9 @@ const CONTRACT = deepFreeze({
   //    (`no-scope-header-mint`).
   // 1.224.0: additive (sc-14501) — every `sharedTranslationKeys` entry
   //    ships a hand-written `sv` value beside `en`.
-  version: "1.224.0",
+  // 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,
   },
@@ -6568,7 +6568,9 @@ const CONTRACT = deepFreeze({
   //    (`no-scope-header-mint`).
   // 1.224.0: additive (sc-14501) — every `sharedTranslationKeys` entry
   //    ships a hand-written `sv` value beside `en`.
-  version: "1.224.0",
+  // 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.274.0",
+  "version": "0.275.1",
   "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,
   },
@@ -6568,7 +6568,9 @@ const CONTRACT = deepFreeze({
   //    (`no-scope-header-mint`).
   // 1.224.0: additive (sc-14501) — every `sharedTranslationKeys` entry
   //    ships a hand-written `sv` value beside `en`.
-  version: "1.224.0",
+  // 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,