@colixsystems/widget-sdk 0.275.2 → 0.277.0

package/dist/markdown-editor-webview.js

@@ -0,0 +1,70 @@
+// sc-15080 — the page `<MarkdownInput>` runs its editor in on iOS and Android.
+//
+// React Native has no editable rich-text surface, so the native field hosts
+// the SAME editor module the web field mounts, inside a WebView. This entry is
+// bundled into ./markdown-editor-html.js by scripts/build-markdown-editor.mjs;
+// nothing imports it at runtime.
+//
+// Messages are JSON strings. In: init, style, set, command, focus. Out:
+// ready, change, height, focus, selection, state.
+
+import { createMarkdownEditor } from "./markdown-editor-core.js";
+import { markdownEditorCss } from "./markdown-editor-css.js";
+
+const ROOT = "#root";
+
+function post(message) {
+  if (window.ReactNativeWebView) window.ReactNativeWebView.postMessage(JSON.stringify(message));
+}
+
+let instance = null;
+const style = document.createElement("style");
+document.head.appendChild(style);
+
+function paint({ tokens, minHeight }) {
+  if (tokens && typeof tokens === "object") style.textContent = markdownEditorCss(tokens, ROOT, { minHeight });
+}
+
+function init(message) {
+  if (instance) return;
+  const { markdown, placeholder, label } = message;
+  paint(message);
+
+  const root = document.querySelector(ROOT);
+  instance = createMarkdownEditor({
+    element: root,
+    markdown,
+    placeholder,
+    label,
+    onChange: (next) => post({ type: "change", markdown: next }),
+    onFocusChange: (focused) => post({ type: "focus", focused }),
+    onState: (state) => post({ type: "state", inTable: state.inTable === true }),
+  });
+  instance.editor.on("selectionUpdate", () => post({ type: "selection", text: instance.selectedText() }));
+
+  let lastHeight = 0;
+  new ResizeObserver(() => {
+    const height = Math.ceil(root.getBoundingClientRect().height);
+    if (height !== lastHeight) post({ type: "height", height: (lastHeight = height) });
+  }).observe(root);
+}
+
+window.mdEditor = {
+  receive(raw) {
+    let message;
+    try {
+      message = JSON.parse(raw);
+    } catch {
+      return;
+    }
+    if (!message || typeof message !== "object") return;
+    if (message.type === "init") init(message);
+    else if (message.type === "style") paint(message);
+    else if (!instance) return;
+    else if (message.type === "set") instance.setMarkdown(message.markdown);
+    else if (message.type === "command") instance.command(message.name, message.args);
+    else if (message.type === "focus") instance.focus();
+  },
+};
+
+post({ type: "ready" });

package/dist/markdown-input-view.js

@@ -1,14 +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. Widgets previously had only a bare
+// The authoring half of `<RichText>`. 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.
+// sc-15080: the author edits the formatted result directly — headings, lists,
+// links and real tables — while the stored value stays markdown. Each host
+// binding supplies its own `EditorField` around the one shared editor (mounted
+// in the page on web, in a WebView natively), so `showPreview` has nothing
+// left to show and is accepted as a no-op.
 //
 // 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).
@@ -16,7 +16,6 @@
 import React from "react";
 import { useHostTheme } from "./hooks.js";
 import { resolveRichTextTokens } from "./richtext-tokens.js";
-import { markdownEditOps } from "./markdown-edit.js";
 import { makeMarkdownLinkDialog } from "./markdown-link-dialog.js";
 
 const TOOLS = Object.freeze([
@@ -28,8 +27,7 @@ const TOOLS = Object.freeze([
   { key: "bullet", label: "•", accessibilityLabel: "Bulleted list" },
   { key: "ordered", label: "1.", accessibilityLabel: "Numbered list" },
   { key: "table", label: "Table", accessibilityLabel: "Insert table" },
-  // sc-7349: the one tool a selection cannot complete — a link needs a target,
-  // so this button opens the form instead of editing the string directly.
+  // sc-7349: a link needs a target no selection supplies, so this opens a form.
   {
     key: "link",
     label: "Link",
@@ -38,17 +36,26 @@ const TOOLS = Object.freeze([
   },
 ]);
 
-export function makeMarkdownInput(rn, RichText, Modal, Button, LiveField) {
+// Shown while the caret is in a table: a phone keyboard has no Tab key to
+// grow one, and a table must be removable without selecting around it.
+const TABLE_TOOLS = Object.freeze([
+  { key: "addRow", label: "+ Row", accessibilityLabel: "Add row" },
+  { key: "addColumn", label: "+ Column", accessibilityLabel: "Add column" },
+  { key: "removeRow", label: "− Row", accessibilityLabel: "Remove row" },
+  { key: "removeColumn", label: "− Column", accessibilityLabel: "Remove column" },
+  { key: "removeTable", label: "Delete table", accessibilityLabel: "Delete table" },
+]);
+
+export function makeMarkdownInput(rn, Modal, Button, EditorField) {
   const { Text, View, Pressable } = rn;
   const MarkdownLinkDialog = makeMarkdownLinkDialog(rn, Modal, Button);
 
+  // `previewLabel`, `showPreview` and `renderImage` are accepted for widgets
+  // written before the field showed the formatted result itself.
   function MarkdownInput({
     value,
     onChange,
     placeholder,
-    previewLabel = "Preview",
-    showPreview = false,
-    renderImage,
     pages,
     minHeight = 150,
     maxHeight = 280,
@@ -58,72 +65,34 @@ export function makeMarkdownInput(rn, RichText, Modal, Button, LiveField) {
   }) {
     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 : "";
+    const [linkLabel, setLinkLabel] = React.useState(null);
+    const [inTable, setInTable] = React.useState(false);
+    const onStateChange = React.useCallback((state) => setInTable(state.inTable), []);
 
-    const onSelectionChange = React.useCallback((event) => {
-      const next = event && event.nativeEvent && event.nativeEvent.selection;
-      if (next) setSelection({ start: next.start, end: next.end });
+    const run = React.useCallback((name, args) => {
+      const field = fieldRef.current;
+      if (field) field.command(name, args);
     }, []);
 
-    const applyTool = React.useCallback(
-      (toolKey, options) => {
-        if (typeof onChange !== "function") return;
-        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);
-      },
-      [onChange, text, selection],
-    );
-
     const pressTool = React.useCallback(
       (tool) => {
-        if (tool.opensDialog) {
-          setLinkOpen(true);
-          return;
-        }
-        applyTool(tool.key);
+        // The selection seeds the form's Link text, so a highlighted phrase
+        // stays the label.
+        if (tool.opensDialog) setLinkLabel(fieldRef.current ? fieldRef.current.selectedText() : "");
+        else run(tool.key);
       },
-      [applyTool],
+      [run],
     );
 
     const insertLink = React.useCallback(
       (result) => {
-        setLinkOpen(false);
-        applyTool("link", result);
+        setLinkLabel(null);
+        run("link", result);
       },
-      [applyTool],
-    );
-
-    // The selection seeds the dialog's Link text, so highlighting a phrase and
-    // pressing Link keeps that phrase as the label.
-    const selected = text.slice(
-      Math.min(selection.start, selection.end),
-      Math.max(selection.start, selection.end),
+      [run],
     );
 
-    const fieldStyle = {
-      fontFamily: tokens.bodyFont,
-      fontSize: tokens.bodySize,
-      lineHeight: tokens.lineHeight,
-      color: tokens.color,
-      backgroundColor: tokens.surface,
-      borderWidth: 1,
-      borderColor: tokens.border,
-      borderRadius: tokens.radius,
-      padding: tokens.padding,
-      minHeight,
-      maxHeight,
-      textAlignVertical: "top",
-    };
-
     return React.createElement(
       View,
       { style, testID },
@@ -137,7 +106,7 @@ export function makeMarkdownInput(rn, RichText, Modal, Button, LiveField) {
           },
           testID: testID ? `${testID}-toolbar` : undefined,
         },
-        TOOLS.map((tool) =>
+        (inTable ? [...TOOLS, ...TABLE_TOOLS] : TOOLS).map((tool) =>
           React.createElement(
             Pressable,
             {
@@ -174,51 +143,24 @@ export function makeMarkdownInput(rn, RichText, Modal, Button, LiveField) {
           ),
         ),
       ),
-      React.createElement(LiveField, {
+      React.createElement(EditorField, {
         ref: fieldRef,
-        value: text,
+        value: typeof value === "string" ? value : "",
         onChangeText: onChange,
-        onSelectionChange,
-        selection,
+        onStateChange,
         placeholder,
         accessibilityLabel,
         tokens,
-        style: fieldStyle,
+        minHeight,
+        maxHeight,
         testID: testID ? `${testID}-field` : undefined,
       }),
-      showPreview && text.trim()
-        ? React.createElement(
-            View,
-            { style: { marginTop: tokens.padding } },
-            React.createElement(
-              Text,
-              {
-                style: {
-                  fontFamily: tokens.bodyFont,
-                  fontSize: tokens.codeSize,
-                  color: tokens.mutedColor,
-                  marginBottom: tokens.blockGap,
-                },
-              },
-              previewLabel,
-            ),
-            React.createElement(RichText, {
-              value: text,
-              renderImage,
-              // sc-7349: the preview shows the reader's document, but a tap
-              // must NOT leave the page — that would throw away the draft the
-              // author is still writing.
-              followLinks: false,
-              testID: testID ? `${testID}-preview` : undefined,
-            }),
-          )
-        : null,
       React.createElement(MarkdownLinkDialog, {
-        visible: linkOpen,
-        onClose: () => setLinkOpen(false),
+        visible: linkLabel !== null,
+        onClose: () => setLinkLabel(null),
         onSubmit: insertLink,
         pages,
-        initialLabel: selected,
+        initialLabel: linkLabel || "",
         testID,
       }),
     );

package/dist/markdown-input.js

@@ -1,11 +1,10 @@
 // sc-6970 — `<MarkdownInput>` (web). Binds the shared implementation in
-// ./markdown-input-view.js to react-native-web's primitives, the web
-// `<RichText>` it renders its preview with, and the web live field.
+// ./markdown-input-view.js to react-native-web's primitives and the web
+// editor 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 { MarkdownEditorField } from "./markdown-editor-field.js";
 import { Modal } from "./modal.js";
 import { Button } from "./button.js";
 import { TextInput } from "./primitives.js";
@@ -13,8 +12,7 @@ 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,
+  MarkdownEditorField,
 );

package/dist/markdown-input.native.js

@@ -1,12 +1,11 @@
 // sc-6970 — `<MarkdownInput>` (native). Binds the shared implementation in
 // ./markdown-input-view.js to React Native's own primitives and the native
-// `<RichText>`. Only the imports differ from the web mirror.
+// editor field. Only the imports differ from the web mirror.
 
 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 { MarkdownEditorField } from "./markdown-editor-field.native.js";
 import { Modal } from "./modal.native.js";
 import { Button } from "./button.native.js";
 
@@ -14,8 +13,7 @@ import { Button } from "./button.native.js";
 // scroll rather than grow an app's every page past the panel.
 export const MarkdownInput = makeMarkdownInput(
   { Text, View, Pressable, TextInput, ScrollView },
-  RichText,
   Modal,
   Button,
-  MarkdownLiveField,
+  MarkdownEditorField,
 );

package/dist/markdown.js

@@ -196,8 +196,7 @@ const PLAIN_PATTERN =
  * 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.
+ * is the RAW label.
  */
 function scanInline(source) {
   const tokens = [];
@@ -532,116 +531,6 @@ 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/navigation.cjs

@@ -1,11 +1,8 @@
-// CommonJS mirror of navigation.js — the CJS compiler and the Mason build runner
-// resolve a `theme_config.navigation` block with the SAME rules the web host
-// applies, so an app's menu type cannot mean one thing on web and another in the
-// exported Expo app.
-//
-// The BODY below is copied VERBATIM from navigation.js; only the module syntax
-// differs. navigation-parity.test.js pins both facts — identical bodies AND
-// identical behaviour over a shared case table — so drift fails CI.
+// GENERATED from navigation.js by scripts/generate-cjs.js — DO NOT EDIT.
+// Change navigation.js, then run `npm run generate:cjs` in packages/widget-sdk.
+"use strict";
+
+const { CONTRACT, isHexColor, contrastRatio, mixHex, readableTextColor } = require("./contract.cjs");
 
 // REQ-NAV-STRUCTURE — the host side of an app's navigation SHAPE and the
 // tokens its footer strip is painted with.
@@ -25,7 +22,6 @@
 // the SAME literal, so what a planner may persist and what a host draws cannot
 // diverge.
 
-const { CONTRACT, isHexColor, contrastRatio, mixHex, readableTextColor } = require("./contract.cjs");
 
 // Absent or unknown resolves here, so every app authored before menu types
 // existed renders and compiles byte-identically.
@@ -895,5 +891,29 @@ function borderWidthOr(...values) {
   }
   return BORDER_WIDTH_MIN;
 }
-
-module.exports = { normaliseNavigation, menuItemCap, resolveFooterTokens, FOOTER_SIZES, clampFooterSize, FOOTER_HOME_LINE_CLEARANCE_PX, resolveSidebarTokens, resolveTopStripeLayout, resolveTopBarTokens, topStripeShowKey, TOP_STRIPE_ALWAYS_SHOWN_SLOTS, TOP_STRIPE_SLOTS, MIN_TOP_STRIPE_HEIGHT_PX, MAX_TOP_STRIPE_HEIGHT_PX, MIN_TOP_STRIPE_PADDING_X_PX, MAX_TOP_STRIPE_PADDING_X_PX, MAX_TOP_STRIPE_OFFSET_Y_PX, DEFAULT_TOP_STRIPE_HEIGHT_PX, DEFAULT_TOP_STRIPE_PADDING_X_PX, resolveSidebarUnfold, resolveLocalNavModel, drawsLocalNavAnywhere, isDarkSurface, resolveAppLogo };
+module.exports = {
+  normaliseNavigation,
+  menuItemCap,
+  resolveFooterTokens,
+  FOOTER_SIZES,
+  clampFooterSize,
+  FOOTER_HOME_LINE_CLEARANCE_PX,
+  resolveSidebarTokens,
+  TOP_STRIPE_SLOTS,
+  TOP_STRIPE_ALWAYS_SHOWN_SLOTS,
+  MIN_TOP_STRIPE_HEIGHT_PX,
+  MAX_TOP_STRIPE_HEIGHT_PX,
+  MIN_TOP_STRIPE_PADDING_X_PX,
+  MAX_TOP_STRIPE_PADDING_X_PX,
+  MAX_TOP_STRIPE_OFFSET_Y_PX,
+  DEFAULT_TOP_STRIPE_HEIGHT_PX,
+  DEFAULT_TOP_STRIPE_PADDING_X_PX,
+  topStripeShowKey,
+  resolveTopStripeLayout,
+  isDarkSurface,
+  resolveAppLogo,
+  resolveTopBarTokens,
+  resolveSidebarUnfold,
+  resolveLocalNavModel,
+  drawsLocalNavAnywhere,
+};

package/dist/richtext-tokens.js

@@ -58,7 +58,7 @@ 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. */
+/** The style one inline span is drawn with by `<RichText>`. */
 export function richTextSpanStyle(span, tokens) {
   return {
     ...(span.bold ? { fontWeight: "700" } : null),
@@ -71,27 +71,3 @@ export function richTextSpanStyle(span, tokens) {
     ...(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),
-  };
-}