@colixsystems/widget-sdk 0.275.1 → 0.276.0

package/README.md

@@ -86,7 +86,15 @@ See the design reference for the full architecture: [`docs/architecture/widget-m
 
 ## Status
 
-`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**.
+`v0.276.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.276.0 (contract 1.226.0)
+
+**`<MarkdownInput>` edits the formatted result directly.** The field is now a rich-text editor: headings, bold, italic, code, links, bulleted and numbered lists and real tables appear as they will read, with no markdown markers in view. The toolbar applies formatting to the selection, the Table button inserts a real table, and while the caret is in one the toolbar adds buttons to add or remove rows and columns or delete it, and typing `## `, `- `, `1. ` or `**bold**` formats as you type. The value is still markdown in the `<RichText>` grammar, so stored content and `<RichText>` output are unchanged; loading a value never rewrites it, and an edit writes each construct in its canonical spelling. On iOS and Android the editor runs in a WebView from a page bundled into the SDK, so it needs no network. `showPreview`, `previewLabel` and `renderImage` are still accepted and ignored. Nothing to change in a widget that uses it.
+
+### What's new in 0.275.2
+
+**The linter's cost stays linear on any input.** Many checks re-read the source once per match. The affected checks were: finding each `<Text>` tag's end and braced child; the look-around at each `React` / SDK-primitive mention; the `useDatastoreMutation`, `useMemo` and lucide-import patterns; the measured-width and full-width-margin checks; the bordered-row check over nested or shared style objects; closing-tag matching; the per-field style-wiring check; and the line number of every finding. A large or malformed file could take minutes to lint. Each check now reads the source a bounded number of times. Findings are unchanged, with one exception: an `<Image>` or `<Marker>` written inside another tag of the same kind's attributes is no longer checked on its own.
 
 ### What's new in 0.275.1 (contract 1.225.0)
 
@@ -2176,7 +2184,7 @@ Content is **markdown text** now: one primitive authors it, the other renders it
 <RichText value={post.body} />
 ```
 
-`<MarkdownInput>` is a multi-line field, a toolbar whose buttons wrap the current **selection** in markdown markers (bold, italic, code, H2, H3, bullets, numbered list — pressing one again toggles it back off), and a live `<RichText>` preview of the result underneath. `previewLabel` defaults to `Preview` and `showPreview` to `true`; `minHeight` (150) and `maxHeight` (280) give the field a floor and a ceiling, so a long draft scrolls inside its box instead of growing past its card. Reach for it instead of a bare `TextInput` plus hand-rolled formatting buttons, which can only splice literal tags into the text.
+`<MarkdownInput>` is a rich-text field where the author edits the formatted result directly — headings, bold, italic, code, links, bulleted and numbered lists and real tables, with no markdown markers in view — plus a toolbar (bold, italic, code, H2, H3, bullets, numbered list, each toggling back off), a Table button and a Link button. The value it reads and writes is markdown in the `<RichText>` grammar below; loading a value never rewrites it. `minHeight` (150) and `maxHeight` (280) bound the field: it grows with its content between them, then scrolls inside its box instead of growing past its card. Don't put a `<RichText>` preview under it — the field already shows the result. Reach for it instead of a bare `TextInput` plus hand-rolled formatting buttons, which can only splice literal tags into the text.
 
 `<RichText>` parses the subset — `**bold**`, `*italic*` / `_italic_`, `` `code` ``, `#`/`##`/`###` headings, `-`/`*` bullets, `1.` ordered items, and one-line `![alt](src "large")` images — and renders it with SDK primitives, so formatted content reads the same in the web Player and the exported Expo app. Colour, type scale and leading come from the workspace theme; never re-style them. Pass `renderImage` (`({ src, alt, size }) => node`) when images are filestore ids, because resolving one needs the scopes your own widget holds — without it only absolute `http(s)` URLs render. HTML is never interpreted: stored text that still holds markup is stripped to plain text rather than shown as tags.
 
@@ -3344,7 +3352,7 @@ import { defineWidget, validateManifest, useDatastoreQuery, Text, View } from "@
 - `ConfirmDialog` — the standard confirmation prompt, a preset of `Modal` and `Button`. `<ConfirmDialog visible={asking} tone="destructive" title="Delete this order?" message="This cannot be undone." confirmLabel="Delete" onCancel={() => setAsking(false)} onConfirm={removeOrder} />` asks before a delete or any other action that cannot be undone. Cancel, the close button, the backdrop, Escape and the Android back button fire `onCancel`; a promise returned from `onConfirm` keeps it busy (buttons disabled, a second press ignored) until it settles. Props: `visible`, `title`, `message`, `confirmLabel`, `cancelLabel`, `tone` (`default` | `destructive`), `busy`, `onConfirm`, `onCancel`, `closeAccessibilityLabel`, `testID`. Use it instead of building a confirmation from `Modal` yourself.
 - `Modal` — the standard dialog, built on `Overlay`. `<Modal visible={open} onRequestClose={() => setOpen(false)} title="Edit order" footer={<Button title="Save" onPress={save} />}>…</Modal>` draws a title, a close button, a body that scrolls when it is long and a footer action row laid out below it. Its background, corner radius, padding, scrim, shadow and title colour come from the theme's `modal` scope (Design > Components > Dialogs), so every dialog in an app matches. Props: `visible`, `onRequestClose`, `dismissible`, `title`, `footer`, `presentation` (`dialog` | `sheet`), `size` (`sm` | `md` | `lg` | `full`), `dismissOnBackdropPress`, `role`, `initialFocusRef`, `closeAccessibilityLabel`, `accessibilityLabel`, `testID`. Use it for every dialog instead of hand-building a header and an action row inside `Overlay`.
 - `RichText` — the formatted-content renderer. `<RichText value={post.body} />` parses the markdown subset (`**bold**`, `*italic*` / `_italic_`, `` `code` ``, `#`/`##`/`###` headings, `-`/`*` bullets, `1.` ordered items, one-line `![alt](src "large")` images) and renders it with SDK primitives, so formatted content reads the same in the web Player and the exported Expo app. `value` is markdown, NOT HTML — widgets have no `dangerouslySetInnerHTML` on either host, so tags in a content string render as literal tag soup; stored text that still holds legacy HTML is stripped to plain text rather than shown as markup. Props: `value`, `renderImage` (`({ src, alt, size }) => node` — supply it when images are filestore ids, because resolving one needs the scopes your own widget holds; without it only absolute `http(s)` URLs render), `style`, `testID`. Colour, type scale and leading come from the workspace theme — never re-style them.
-- `MarkdownInput` — the authoring half of `<RichText>`. `<MarkdownInput value={draft} onChange={setDraft} />` is a multi-line field, a toolbar whose buttons wrap the current SELECTION in markdown markers (bold, italic, code, H2, H3, bullets, numbered list, each toggling back off), and a live `<RichText>` preview of the result underneath — the way to let an app USER write formatted text, instead of a bare `TextInput` plus hand-rolled buttons that can only splice literal tags into the value. Props: `value`, `onChange(next)`, `placeholder`, `previewLabel` (default `Preview`), `showPreview` (default true), `renderImage` (passed through to the preview), `minHeight` (150) and `maxHeight` (280) so a long draft scrolls inside its box, `accessibilityLabel`, `style`, `testID`.
+- `MarkdownInput` — the authoring half of `<RichText>`. `<MarkdownInput value={draft} onChange={setDraft} />` is a rich-text field where the author edits the formatted result directly (headings, emphasis, code, links, lists and real tables), with a toolbar, a Table button and a Link button — the way to let an app USER write formatted text, instead of a bare `TextInput` plus hand-rolled buttons that can only splice literal tags into the value. The value stays markdown. Props: `value`, `onChange(next)`, `placeholder`, `pages` (offered by name in the Link form), `minHeight` (150) and `maxHeight` (280) — it grows between them, then scrolls — `accessibilityLabel`, `style`, `testID`. `showPreview`, `previewLabel` and `renderImage` are accepted and ignored.
 - `parseMarkdown`, `markdownToPlainText`, `parseMarkdownImage`, `formatMarkdownImage`, `stripHtmlToMarkdown`, `MARKDOWN_IMAGE_SIZES` — the same grammar as pure helpers, for content you inspect rather than render: the block list, a marker-free projection (list previews, search, a11y labels), the one-line image form read and written, a legacy-HTML row normalised to markdown on read, and the closed size list (`small` | `medium` | `large` | `full`).
 - `isSafeMarkdownImageSrc`, `isHttpImageSrc`, `normaliseMarkdownImageSize`, `readMarkdownAlt` — the image half of that grammar, for a widget rendering images itself via `renderImage`. `isSafeMarkdownImageSrc` is the same allowlist the parser applies (an `http(s)` URL or a filestore id; a `javascript:` scheme is refused), so the widget and the parser cannot disagree about which src is renderable.
 - `List`, `ListRow`, `ListHeader`, `EmptyState` — the themed list building blocks. `<ListRow title subtitle leading trailing onPress selected divider>` draws one record row from the theme's `list` scope (padding, height, gap, radius, background, divider); `<List>` spaces its rows and hands overrides down; `<ListHeader>` labels a table's columns on the rows' own inset; `<EmptyState icon title message>` is the "nothing here" panel. Use them by default for record rows and a table's header; build your own row when it needs what `ListRow` cannot do (a swipe-to-delete row, a row that expands in place).

package/dist/contract.cjs

@@ -3467,13 +3467,13 @@ const PRIMITIVES = [
     rnComponent: null,
     docsUrl: null,
   },
-  // sc-6970 — formatted content, authored. The authoring half of `<RichText>`:
-  // a real selection-aware toolbar plus a live preview, so a generated widget
-  // never has to splice HTML tags into a plain TextInput again.
+  // sc-6970 — formatted content, authored. The authoring half of `<RichText>`,
+  // so a generated widget never has to splice HTML tags into a plain TextInput
+  // again. sc-15080: the field edits the formatted result directly.
   {
     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 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.',
+      "Formatted-content editor. `<MarkdownInput value={draft} onChange={setDraft} />`. The default way to let an app USER write formatted text: a rich-text field where the user edits the FORMATTED RESULT directly — headings, bold, italic, code, links, bulleted and numbered lists and real tables are shown as they will read, with no markdown markers in view — plus a toolbar (bold, italic, code, H2, H3, bullets, numbered list), a Table button that inserts a real table, with buttons to add or remove rows and columns or delete the table while the caret is in one, and a Link button that opens a form for the link text plus its target. Typing `## `, `- `, `1. `, `**bold**` or `*italic*` formats as you type. Use it rather than a bare `TextInput` plus formatting buttons of your own, and do NOT add a `<RichText>` preview under it: the field already shows the result; 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. The stored value is markdown text in the `<RichText>` grammar; loading a value never rewrites it, and an edit writes each construct in its canonical spelling. On iOS and Android the field runs in a WebView bundled into the SDK (no network). Props: `value`, `onChange(next)`, `placeholder`, `pages` (optional `[{ id, name }]` — supply it and the Link form offers those pages to link to by name; 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) — the field grows with its content between them, then scrolls — `accessibilityLabel`, `style`, `testID`. `showPreview`, `previewLabel` and `renderImage` are still accepted and ignored. Images show inside the field when their source is an http(s) URL and as a labelled placeholder when it is a filestore id. Links in the field are inert, so a tap while editing cannot navigate away from the draft.",
     rnComponent: null,
     docsUrl: null,
   },
@@ -6573,7 +6573,10 @@ const CONTRACT = deepFreeze({
   //    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",
+  // 1.226.0: behaviour (sc-15080) — `<MarkdownInput>` is a rich-text editor
+  //    showing the formatted result; `showPreview`, `previewLabel` and
+  //    `renderImage` are accepted and ignored.
+  version: "1.226.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,

package/dist/contract.js

@@ -3464,13 +3464,13 @@ const PRIMITIVES = [
     rnComponent: null,
     docsUrl: null,
   },
-  // sc-6970 — formatted content, authored. The authoring half of `<RichText>`:
-  // a real selection-aware toolbar plus a live preview, so a generated widget
-  // never has to splice HTML tags into a plain TextInput again.
+  // sc-6970 — formatted content, authored. The authoring half of `<RichText>`,
+  // so a generated widget never has to splice HTML tags into a plain TextInput
+  // again. sc-15080: the field edits the formatted result directly.
   {
     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 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.',
+      "Formatted-content editor. `<MarkdownInput value={draft} onChange={setDraft} />`. The default way to let an app USER write formatted text: a rich-text field where the user edits the FORMATTED RESULT directly — headings, bold, italic, code, links, bulleted and numbered lists and real tables are shown as they will read, with no markdown markers in view — plus a toolbar (bold, italic, code, H2, H3, bullets, numbered list), a Table button that inserts a real table, with buttons to add or remove rows and columns or delete the table while the caret is in one, and a Link button that opens a form for the link text plus its target. Typing `## `, `- `, `1. `, `**bold**` or `*italic*` formats as you type. Use it rather than a bare `TextInput` plus formatting buttons of your own, and do NOT add a `<RichText>` preview under it: the field already shows the result; 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. The stored value is markdown text in the `<RichText>` grammar; loading a value never rewrites it, and an edit writes each construct in its canonical spelling. On iOS and Android the field runs in a WebView bundled into the SDK (no network). Props: `value`, `onChange(next)`, `placeholder`, `pages` (optional `[{ id, name }]` — supply it and the Link form offers those pages to link to by name; 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) — the field grows with its content between them, then scrolls — `accessibilityLabel`, `style`, `testID`. `showPreview`, `previewLabel` and `renderImage` are still accepted and ignored. Images show inside the field when their source is an http(s) URL and as a labelled placeholder when it is a filestore id. Links in the field are inert, so a tap while editing cannot navigate away from the draft.",
     rnComponent: null,
     docsUrl: null,
   },
@@ -6570,7 +6570,10 @@ const CONTRACT = deepFreeze({
   //    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",
+  // 1.226.0: behaviour (sc-15080) — `<MarkdownInput>` is a rich-text editor
+  //    showing the formatted result; `showPreview`, `previewLabel` and
+  //    `renderImage` are accepted and ignored.
+  version: "1.226.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,

package/dist/index.d.ts

@@ -5711,12 +5711,13 @@ export const RichText: (props: {
 }) => any;
 
 /**
- * sc-6970 — the authoring half of `<RichText>`: a multi-line field whose
- * 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.
+ * sc-6970 — the authoring half of `<RichText>`. sc-15080: a rich-text field
+ * where the author edits the formatted result directly — headings, emphasis,
+ * code, links, lists and real tables — with a formatting toolbar, while the
+ * value stays markdown in the `<RichText>` grammar. Loading a value never
+ * rewrites it. On iOS and Android the field runs in a bundled WebView. 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…" />
@@ -5727,14 +5728,13 @@ export const MarkdownInput: (props: {
   /** Receives the next markdown string on every edit. */
   onChange?: (next: string) => void;
   placeholder?: string;
-  /** Heading above the rendered preview. Defaults to "Preview". */
+  /** The app's pages, offered by name in the Link form. */
+  pages?: ReadonlyArray<{ id: string; name: string }>;
+  /** @deprecated Ignored: the field shows the formatted result itself. */
   previewLabel?: string;
-  /**
-   * Also draw a rendered `<RichText>` copy under the field, for images and
-   * tables the field shows only as markers. Defaults to false.
-   */
+  /** @deprecated Ignored: the field shows the formatted result itself. */
   showPreview?: boolean;
-  /** Passed through to the preview's `<RichText>`. */
+  /** @deprecated Ignored: the field shows the formatted result itself. */
   renderImage?: (block: {
     src: string;
     alt: string;
@@ -5742,7 +5742,7 @@ export const MarkdownInput: (props: {
   }) => ReactNode;
   /** Field floor, so it opens at a usable height. Defaults to 150. */
   minHeight?: number;
-  /** Field ceiling, so it scrolls internally instead of growing. Defaults to 280. */
+  /** The field grows with its content up to this, then scrolls. Defaults to 280. */
   maxHeight?: number;
   accessibilityLabel?: string;
   style?: any;