@colixsystems/widget-sdk 0.122.0 → 0.123.0

package/README.md

@@ -37,7 +37,7 @@ The data layer lives in **four separate domain-client packages**, each instantia
 | **CORE** | `useToast()` | `{ showToast }` | `ctx.toast.showToast` — wired by the Player and the Expo export; an authoring preview omits it and the call is a no-op — no scope |
 | **CORE** | `useGeolocation(options?)` | `{ latitude, longitude, accuracy, loading, error, getCurrentPosition, backgroundSupported, backgroundWatching, startBackgroundWatch, stopBackgroundWatch }` | `ctx.device.geolocation` — no scope. Capture is IMPERATIVE: call `getCurrentPosition()` from a user gesture (a tap), never on mount. Resolves to `{ latitude, longitude, accuracy }`; rejects with `GeolocationError` (`.code` in `PERMISSION_DENIED \| UNAVAILABLE \| TIMEOUT \| UNSUPPORTED \| INTERNAL`). Identical on web (`navigator.geolocation`) and the Expo export (`expo-location`). **Background watch (sc-6450)** — `startBackgroundWatch({ enableHighAccuracy, distanceIntervalMeters, timeIntervalMs })` keeps positions arriving while the app is backgrounded; `stopBackgroundWatch()` releases it. NATIVE-ONLY and opt-in per app: gate the control on `backgroundSupported` (false on web, and in an export whose workspace did not opt in). The watch outlives the widget's mount, and its positions land in the same `latitude`/`longitude`/`accuracy` slots. |
 | **CORE** | `useSpeechToText(options?)` | `{ transcript, partial, listening, supported, error, start, stop, abort, reset }` | `ctx.device.speech` — no scope. Dictation with the device's **on-device** recogniser: no audio is uploaded and no AI credit is spent. Capture is IMPERATIVE: call `start()` from a user gesture (a tap), never on mount. `transcript` accumulates finalised speech, `partial` holds the uncommitted guess (needs `options.interimResults`); `stop()` keeps it, `abort()` discards it. Rejects with `SpeechToTextError` (`.code` in `PERMISSION_DENIED \| NO_SPEECH \| LANGUAGE_UNSUPPORTED \| NETWORK \| ABORTED \| UNSUPPORTED \| INTERNAL`). **Gate your mic button on `supported`** — Firefox ships no `SpeechRecognition`. Identical on web (`SpeechRecognition`) and the Expo export (`expo-speech-recognition`). |
-| **CORE** | `useCamera(options?)` | `{ asset, loading, error, supported, capture, pick, reset }` | `ctx.device.camera` — no scope. Take a photo (`capture()`) or choose one (`pick()`). Capture is IMPERATIVE: call from a user gesture (a tap), never on mount. Both resolve a normalised `{ uri, name, mimeType, width, height, size, file }`, or **`null` when the user dismisses the picker** — dismissal is not an error, so no `try/catch` is needed on the happy path. Rejects with `CameraError` (`.code` in `PERMISSION_DENIED \| UNSUPPORTED \| INTERNAL`). `asset.file` is already the right upload part for the host, so `fd.append("file", asset.file)` → `ctx.assets.upload(fd)` is ONE code path on both. **Gate your camera button on `supported`.** Identical on web (file input) and the Expo export (`expo-image-picker`). |
+| **CORE** | `useCamera(options?)` | `{ asset, loading, error, supported, capture, pick, reset }` | `ctx.device.camera` — no scope. Take a photo (`capture()`) or choose one (`pick()`). Capture is IMPERATIVE: call from a user gesture (a tap), never on mount. Both resolve a normalised `{ uri, name, mimeType, width, height, size, file }`, or **`null` when the user dismisses the picker** — dismissal is not an error, so no `try/catch` is needed on the happy path. Rejects with `CameraError` (`.code` in `PERMISSION_DENIED \| UNSUPPORTED \| INTERNAL`). `asset.file` is already the right upload part for the host, so `fd.append("file", asset.file)` → `ctx.assets.upload(fd)` is ONE code path on both. **Gate your camera button on `supported`.** Identical on web (a live `getUserMedia` preview, phones included; a file input only where getUserMedia is absent) and the Expo export (`expo-image-picker`). |
 | **CORE** | `useI18n()` | `{ t, locale }` | `ctx.i18n` — no scope. `t(key)` resolves the widget-namespaced key (`widget.<id>.<key>`, declared in `manifest.translations`) first, then a **predefined shared key** (`shared.<key>`) when `key` is one of the standard strings (`submit`, `cancel`, `save`, `loading`, …), then the raw key. Use a shared key for an identical default string so it translates once and any per-instance `widget.<id>.<key>` override still wins. |
 | **CORE** | `useTranslate()` | `{ translate, translating, error, language, available }` | `ctx.i18n.translate` — no scope. Machine-translates **user-generated content** (record text, file names, API payloads) into the app user's language; `useI18n().t()` is still the answer for your own copy. `translate(str)` → `Promise<string>`, `translate(str[])` → `Promise<string[]>` in ONE request. Target defaults to the app user's language. Cached per session, per pod, and durably per workspace, so repeat text is free. Limits: 50 segments / 5 000 chars each / 20 000 total. Rejects with `TranslateError`; `available` is false where the host cannot translate. |
 | **CORE** | `useStableQuery(buildQuery)` | `T \| undefined` (whatever `buildQuery()` returns) | No context slice, no scope. Keeps `buildQuery()`'s result at a STABLE reference across renders when its (JSON-serialised) content hasn't changed, so `useDatastoreQuery(tableId, useStableQuery(() => ({...})))` replaces a hand-rolled `useMemo` with an easy-to-get-wrong deps array. Never throws: a `buildQuery` that itself throws degrades to a stable `undefined`; a result that can't be diffed (e.g. circular) degrades to "always a new reference". |
@@ -70,7 +70,35 @@ See the design reference for the full architecture: [`docs/architecture/widget-m
 
 ## Status
 
-`v0.122.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.123.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.123.0 (contract unchanged at 1.95.0)
+
+**Two new primitives, `<RichText>` and `<MarkdownInput>` — a widget can finally let an app user write FORMATTED text (sc-6970).** Widgets render through React Native primitives, which have no `dangerouslySetInnerHTML` on either host, so there was no path at all from a content string to bold, a heading or a list. A generated "manage content" widget that was asked for a formatting toolbar therefore drew a fake B/I/H2 bar over a plain `TextInput` whose buttons spliced literal `<strong>`/`<br>` tags into the value — the author read tag soup with no preview of the text a reader would get, and the reader got the tags.
+
+Content is **markdown text** now: one primitive authors it, the other renders it, and the string that travels between them is the one you store.
+
+```jsx
+<MarkdownInput value={draft} onChange={setDraft} placeholder="Write the announcement…" />
+
+<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.
+
+`<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.
+
+The grammar is exported too, for content you need to inspect rather than render: `parseMarkdown(text)` returns the block list, `markdownToPlainText(text)` a marker-free projection for a list preview, a search index or an accessibility label, `parseMarkdownImage(line)` / `formatMarkdownImage(block)` read and write the one-line image form, `stripHtmlToMarkdown(text)` normalises a legacy HTML row on read, and `MARKDOWN_IMAGE_SIZES` is the closed size list (`small` | `medium` | `large` | `full`).
+
+A widget that renders images itself through `renderImage` gets the image half of the same grammar, so it classifies a src exactly the way the parser does rather than re-deriving the rule: `isSafeMarkdownImageSrc(src)` (an `http(s)` URL or a filestore id — anything else, a `javascript:` scheme included, is refused), `isHttpImageSrc(src)` to tell a URL from a filestore id, `normaliseMarkdownImageSize(size)` and `readMarkdownAlt(raw)`.
+
+The linter gains `no-html-in-content` to catch the old shape: an HTML tag inside a **string** (`"<strong>"`, `"<br>"`, `"<p>…</p>"`) is flagged, because no host will ever render it. Only string and template content is scanned, so your own `<View>` / `<Text>` JSX cannot trip it. Warning-severity for a human author, blocking for the AI widget agent.
+
+Additive — two new primitives, ten new grammar exports, one new soft linter rule; no existing export changed signature. `CONTRACT.primitives` carries both entries; `CONTRACT.version` is unchanged at `1.95.0`.
+
+### What's new in contract 1.95.0 (package unchanged at 0.122.0)
+
+**`useCamera().capture()` opens a real camera on the DESKTOP web Player.** The web broker's only camera surface was `<input type="file" capture="environment">`, and that attribute is honoured by phone browsers but **silently ignored on the desktop** — so on a laptop `capture()` opened an ordinary file dialog, indistinguishable from `pick()`. It now opens a live `getUserMedia` preview with a shutter, on every web host. Nothing a widget imports changed: same signature, same normalised asset, same `PERMISSION_DENIED | UNSUPPORTED | INTERNAL` vocabulary, and the Expo export is untouched. Three things a widget can observe: `options.quality` now reaches the encoder on web (it previously reached nothing); a phone gets the same in-page preview rather than its OS camera app, which trades the phone camera's optics for one behaviour everywhere; and a camera that cannot be opened (no device, or another app holding it) rejects `UNSUPPORTED` instead of quietly showing a file dialog.
 
 ### What's new in 0.122.0 (contract 1.94.0)
 
@@ -228,7 +256,7 @@ fd.append("file", asset.file);
 await ctx.assets.upload(fd);
 ```
 
-`options` (`{ allowsEditing, quality }`) are **hints**: the Expo export applies both, the web file input applies neither — so never depend on a cropped result or a capped file size. `reset()` clears the asset and releases it (on web that revokes the blob URL, which otherwise leaks for the life of the document). **Gate your camera button on `supported`** — a host that brokers no camera reports `false` rather than throwing. The web Player brokers it via a file input (`capture="environment"` opens the camera on a phone); the Expo export via `expo-image-picker`, whose config plugin declares the camera and photo-library permissions the runtime needs.
+`options` (`{ allowsEditing, quality }`) are **hints**: the Expo export applies both, the web camera applies `quality` only — so never depend on a cropped result. `reset()` clears the asset and releases it (on web that revokes the blob URL, which otherwise leaks for the life of the document). **Gate your camera button on `supported`** — a host that brokers no camera reports `false` rather than throwing. The web Player brokers it via `getUserMedia` — a live preview with a shutter — on every web host: it is the only camera a DESKTOP browser will open, and a phone reaches the same preview rather than its own camera app. It falls back to a file input (`capture="environment"`) only where getUserMedia is absent up front: an insecure origin or an older browser. Once the permission prompt has been shown the user gesture is spent, so a camera that then fails to open rejects (`PERMISSION_DENIED` if refused, `UNSUPPORTED` if there is no usable device) rather than falling back to a file dialog the browser would refuse to open. The Expo export uses `expo-image-picker`, whose config plugin declares the camera and photo-library permissions the runtime needs.
 
 Additive — one new hook, one new optional context-slice member; no existing export changed signature.
 
@@ -1223,6 +1251,10 @@ import { defineWidget, validateManifest, useDatastoreQuery, Text, View } from "@
 - `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.
 - `Text`, `View`, `Pressable`, `Image`, `ScrollView`, `TextInput`, `FlatList`, `SectionList`, `ActivityIndicator`, `Switch`, `StyleSheet`, `Linking`, `Icon`, `DateTimePicker` — re-exported from `react-native` (the RN primitives) or implemented in the SDK (`Icon` wraps `lucide-react-native`; `DateTimePicker` wraps `@react-native-community/datetimepicker` on native and renders `<input type="date|time|datetime-local">` directly on web because the RN library has no react-native-web mapping). The web build aliases `react-native` to `react-native-web` so the RN-re-exported primitives render in the browser without any per-platform code; the exported Expo app's Metro bundler resolves the real `react-native` library. `Linking` is a static API (`Linking.openURL(url)`) — use it for external URLs, and use `useNavigation().goTo(pageId)` for internal page navigation. See https://reactnative.dev/docs/ for per-component props.
 - `Overlay` — the screen-level overlay (sc-6607). `<Overlay visible={!!preview} onRequestClose={() => setPreview(null)} size="full">…</Overlay>` renders its children OUTSIDE the widget's layout box on both hosts (web portals it to the document root, native uses the OS modal), so no clipping card, `ScrollView` or neighbouring widget can cut off a document/media preview, lightbox or confirm dialog — which absolute positioning inside the widget cannot achieve on either platform. Children stay in your own React tree, so state and hooks work normally. `onRequestClose` carries the backdrop press, Escape on web, and the Android back button; `size` is `sm` | `md` (default) | `lg` | `full`; the scrim, surface, radius, padding and elevation come from the workspace theme. An anchored dropdown still belongs inside your own root.
+- `RichText` — the formatted-content renderer (sc-6970). `<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>` (sc-6970). `<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`.
+- `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.
 - `WidgetContextProvider` — React context provider that the host (Studio, Player, exported app) wraps widgets with.
 
 ## Design & visual polish
@@ -1501,6 +1533,8 @@ Two rules keep a widget's look reachable from the Studio (sc-6455). `no-hardcode
 
 Pass `--manifest` to enable `style-field-unread` — it needs the manifest, and it needs every source at once so a split-impl widget's per-host field reads are seen together.
 
+`no-html-in-content` flags an HTML tag inside a **string** (sc-6970) — `"<strong>"`, `"<br>"`, `"<p>…</p>"`. There is no HTML renderer on either host, so the tag reaches the reader as literal text; author formatted text with `<MarkdownInput>` and render it with `<RichText>` instead. Only string and template content is scanned, so your own `<View>` / `<Text>` JSX can never trip it. A warning for a human author, blocking for the AI widget agent.
+
 ## Local dev loop (`appstudio-widget dev`)
 
 Author a marketplace widget with live reload instead of the publish → submit →

package/dist/contract.cjs

@@ -1664,8 +1664,10 @@ const HOOKS = [
       "upload part for the host (a File on web, { uri, name, type } on native): append it to a FormData as `file` and pass " +
       "that to ctx.assets.upload(fd) — one code path on both platforms. reset() clears the asset and releases it. Check " +
       "`supported` before rendering a camera button. options: { allowsEditing, quality } are HINTS the host honours where it " +
-      "can — the Expo export applies both, the web file input applies neither, so never depend on a capped file size or a " +
-      "cropped result. Behaviour is otherwise identical on web (file input) and the Expo export (expo-image-picker).",
+      "can — the Expo export applies both, the web camera applies quality only, so never depend on a cropped result. " +
+      "Behaviour is otherwise identical on web (a getUserMedia preview on EVERY host, phones included; a file input " +
+      "only where getUserMedia is absent) and the Expo export (expo-image-picker). A camera that cannot be opened " +
+      "rejects UNSUPPORTED — there is no silent fall back to a file dialog.",
     returnShape: {
       asset:
         "{ uri, name, mimeType, width, height, size, file } | null",
@@ -1835,6 +1837,25 @@ const PRIMITIVES = [
     rnComponent: null,
     docsUrl: null,
   },
+  // sc-6970 — formatted content, rendered. Widgets have no HTML path on either
+  // host, so this is the ONE way bold, headings and lists reach a reader.
+  {
+    name: "RichText",
+    description:
+      'Formatted-content renderer. `<RichText value={record.body} />`. THE way to display text an app user wrote with formatting — bold, italic, inline code, `#`/`##`/`###` headings, `-` bullets, `1.` numbered items, and one-line `![alt](src "large")` images. `value` is markdown text, NOT HTML: widgets render through React Native primitives, which have no `dangerouslySetInnerHTML` on either host, so HTML inside a content string shows up as literal tag soup — never assemble content out of `<strong>`/`<br>` tags. Stored text that still holds legacy HTML is stripped to plain text rather than shown as markup. Props: `value` (markdown string), `renderImage` (optional `({ src, alt, size }) => node` — supply it when images are filestore ids, because resolving those needs the scopes your own widget holds; without it only absolute http(s) URLs render), `style`, `testID`. Colour, type scale and leading all come from the workspace theme — never re-style them.',
+    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.
+  {
+    name: "MarkdownInput",
+    description:
+      'Formatted-content editor. `<MarkdownInput value={draft} onChange={setDraft} />`. THE 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), and a live `<RichText>` preview of the result underneath. Use it instead of a bare `TextInput` plus hand-rolled formatting buttons — buttons that splice `<strong>`/`<br>` 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), `minHeight` (default 150) and `maxHeight` (default 280) so the field scrolls internally instead of growing without bound, `accessibilityLabel`, `style`, `testID`.',
+    rnComponent: null,
+    docsUrl: null,
+  },
 ];
 
 const CATEGORIES = [
@@ -2303,7 +2324,7 @@ const WIDGET_CONTEXT_SHAPE = {
       "speech: { isSupported() -> boolean, start(options, { onResult, onError, onEnd }) -> Promise<{ stop(), abort() }> }, " +
       "camera: { isSupported() -> boolean, capture(options?) -> Promise<asset | null>, pick(options?) -> Promise<asset | null> } }. " +
       "Backs useGeolocation(), useSpeechToText() and useCamera(). The web Player brokers them via navigator.geolocation, " +
-      "window.SpeechRecognition and a file input; the Expo export via expo-location, expo-speech-recognition and " +
+      "window.SpeechRecognition and a getUserMedia camera preview; the Expo export via expo-location, expo-speech-recognition and " +
       "expo-image-picker. " +
       "getCurrentPosition rejects with a GeolocationError (.code PERMISSION_DENIED | UNAVAILABLE | TIMEOUT | UNSUPPORTED | INTERNAL). " +
       "speech.start streams { transcript, isFinal } to onResult and runs ON DEVICE — it uploads no audio and spends no AI credit; " +
@@ -3621,7 +3642,20 @@ const CONTRACT = deepFreeze({
   //    widget that branched on 404 alone should accept both, and the actionable
   //    case -- a public space whose upload access is still off -- is now
   //    distinguishable instead of arriving as a bare "Space not found".
-  version: "1.94.0",
+  // 1.95.0: behavioural (web host only) -- `ctx.device.camera.capture()` in the
+  //    Player now opens a live `getUserMedia` preview with a shutter instead of
+  //    a file input. `<input capture="environment">` is honoured only by phone
+  //    browsers and is SILENTLY IGNORED on the desktop, so `capture()` there was
+  //    a plain file dialog -- indistinguishable from `pick()`, and no camera at
+  //    all. No signature, asset shape or error code moved, and the native export
+  //    is untouched; what a web host DOES for the same call changed. Two
+  //    consequences worth branching on: `options.quality` now reaches the JPEG
+  //    encoder on web (it previously reached nothing), and a phone now gets the
+  //    same in-page preview rather than its OS camera app. A camera that cannot
+  //    be opened rejects UNSUPPORTED rather than falling back to a file dialog:
+  //    the gesture is already spent on the permission prompt, and a file input
+  //    clicked outside it would never open.
+  version: "1.95.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,

package/dist/contract.js

@@ -1664,8 +1664,10 @@ const HOOKS = [
       "upload part for the host (a File on web, { uri, name, type } on native): append it to a FormData as `file` and pass " +
       "that to ctx.assets.upload(fd) — one code path on both platforms. reset() clears the asset and releases it. Check " +
       "`supported` before rendering a camera button. options: { allowsEditing, quality } are HINTS the host honours where it " +
-      "can — the Expo export applies both, the web file input applies neither, so never depend on a capped file size or a " +
-      "cropped result. Behaviour is otherwise identical on web (file input) and the Expo export (expo-image-picker).",
+      "can — the Expo export applies both, the web camera applies quality only, so never depend on a cropped result. " +
+      "Behaviour is otherwise identical on web (a getUserMedia preview on EVERY host, phones included; a file input " +
+      "only where getUserMedia is absent) and the Expo export (expo-image-picker). A camera that cannot be opened " +
+      "rejects UNSUPPORTED — there is no silent fall back to a file dialog.",
     returnShape: {
       asset:
         "{ uri, name, mimeType, width, height, size, file } | null",
@@ -1835,6 +1837,25 @@ const PRIMITIVES = [
     rnComponent: null,
     docsUrl: null,
   },
+  // sc-6970 — formatted content, rendered. Widgets have no HTML path on either
+  // host, so this is the ONE way bold, headings and lists reach a reader.
+  {
+    name: "RichText",
+    description:
+      'Formatted-content renderer. `<RichText value={record.body} />`. THE way to display text an app user wrote with formatting — bold, italic, inline code, `#`/`##`/`###` headings, `-` bullets, `1.` numbered items, and one-line `![alt](src "large")` images. `value` is markdown text, NOT HTML: widgets render through React Native primitives, which have no `dangerouslySetInnerHTML` on either host, so HTML inside a content string shows up as literal tag soup — never assemble content out of `<strong>`/`<br>` tags. Stored text that still holds legacy HTML is stripped to plain text rather than shown as markup. Props: `value` (markdown string), `renderImage` (optional `({ src, alt, size }) => node` — supply it when images are filestore ids, because resolving those needs the scopes your own widget holds; without it only absolute http(s) URLs render), `style`, `testID`. Colour, type scale and leading all come from the workspace theme — never re-style them.',
+    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.
+  {
+    name: "MarkdownInput",
+    description:
+      'Formatted-content editor. `<MarkdownInput value={draft} onChange={setDraft} />`. THE 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), and a live `<RichText>` preview of the result underneath. Use it instead of a bare `TextInput` plus hand-rolled formatting buttons — buttons that splice `<strong>`/`<br>` 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), `minHeight` (default 150) and `maxHeight` (default 280) so the field scrolls internally instead of growing without bound, `accessibilityLabel`, `style`, `testID`.',
+    rnComponent: null,
+    docsUrl: null,
+  },
 ];
 
 const CATEGORIES = [
@@ -2303,7 +2324,7 @@ const WIDGET_CONTEXT_SHAPE = {
       "speech: { isSupported() -> boolean, start(options, { onResult, onError, onEnd }) -> Promise<{ stop(), abort() }> }, " +
       "camera: { isSupported() -> boolean, capture(options?) -> Promise<asset | null>, pick(options?) -> Promise<asset | null> } }. " +
       "Backs useGeolocation(), useSpeechToText() and useCamera(). The web Player brokers them via navigator.geolocation, " +
-      "window.SpeechRecognition and a file input; the Expo export via expo-location, expo-speech-recognition and " +
+      "window.SpeechRecognition and a getUserMedia camera preview; the Expo export via expo-location, expo-speech-recognition and " +
       "expo-image-picker. " +
       "getCurrentPosition rejects with a GeolocationError (.code PERMISSION_DENIED | UNAVAILABLE | TIMEOUT | UNSUPPORTED | INTERNAL). " +
       "speech.start streams { transcript, isFinal } to onResult and runs ON DEVICE — it uploads no audio and spends no AI credit; " +
@@ -3621,7 +3642,20 @@ const CONTRACT = deepFreeze({
   //    widget that branched on 404 alone should accept both, and the actionable
   //    case -- a public space whose upload access is still off -- is now
   //    distinguishable instead of arriving as a bare "Space not found".
-  version: "1.94.0",
+  // 1.95.0: behavioural (web host only) -- `ctx.device.camera.capture()` in the
+  //    Player now opens a live `getUserMedia` preview with a shutter instead of
+  //    a file input. `<input capture="environment">` is honoured only by phone
+  //    browsers and is SILENTLY IGNORED on the desktop, so `capture()` there was
+  //    a plain file dialog -- indistinguishable from `pick()`, and no camera at
+  //    all. No signature, asset shape or error code moved, and the native export
+  //    is untouched; what a web host DOES for the same call changed. Two
+  //    consequences worth branching on: `options.quality` now reaches the JPEG
+  //    encoder on web (it previously reached nothing), and a phone now gets the
+  //    same in-page preview rather than its OS camera app. A camera that cannot
+  //    be opened rejects UNSUPPORTED rather than falling back to a file dialog:
+  //    the gesture is already spent on the permission prompt, and a file input
+  //    clicked outside it would never open.
+  version: "1.95.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,

package/dist/index.d.ts

@@ -2236,6 +2236,130 @@ export const Overlay: (props: {
   children?: ReactNode;
 }) => any;
 
+// ----------------------------------------------------- formatted content
+// sc-6970 — widgets have no HTML path: they render through React Native
+// primitives, which have no `dangerouslySetInnerHTML` on either host. Content
+// with formatting is therefore markdown text, authored with `<MarkdownInput>`
+// and displayed with `<RichText>`.
+
+/** One inline run of a parsed markdown line. */
+export interface MarkdownSpan {
+  text: string;
+  bold?: boolean;
+  italic?: boolean;
+  code?: boolean;
+}
+
+/** One parsed markdown block. Image blocks carry no spans. */
+export type MarkdownBlock =
+  | { type: "heading"; level: 1 | 2 | 3; spans: MarkdownSpan[] }
+  | { type: "paragraph"; spans: MarkdownSpan[] }
+  | { type: "bullet"; marker: string; spans: MarkdownSpan[] }
+  | { type: "ordered"; marker: string; spans: MarkdownSpan[] }
+  | { type: "image"; src: string; alt: string; size: MarkdownImageSize };
+
+export type MarkdownImageSize = "small" | "medium" | "large" | "full";
+
+export const MARKDOWN_IMAGE_SIZES: readonly MarkdownImageSize[];
+
+/** Parses the markdown subset into blocks. Non-string input yields `[]`. */
+export function parseMarkdown(text: unknown): MarkdownBlock[];
+
+/** Marker-free projection of `text`, for search, previews and a11y labels. */
+export function markdownToPlainText(text: unknown): string;
+
+/** Reads one line as an image block, or `null` when it is not one. */
+export function parseMarkdownImage(
+  line: unknown,
+): { src: string; alt: string; size: MarkdownImageSize } | null;
+
+/** Writes an image block back to its one-line markdown form. */
+export function formatMarkdownImage(block: {
+  src?: string;
+  alt?: string;
+  size?: string;
+}): string;
+
+/**
+ * Normalises stored content to markdown: HTML-bearing text has its tags
+ * stripped to line breaks, anything else is returned unchanged. HTML is never
+ * interpreted.
+ */
+export function stripHtmlToMarkdown(text: unknown): string;
+
+/** Un-escapes an alt captured by the image grammar. */
+export function readMarkdownAlt(raw: unknown): string;
+
+/** True when `src` is an http(s) URL rather than a filestore id. */
+export function isHttpImageSrc(src: unknown): boolean;
+
+/**
+ * True when `src` is renderable — an http(s) URL or a filestore id. Content is
+ * author-supplied, so anything else (a `javascript:` scheme, say) is refused.
+ */
+export function isSafeMarkdownImageSrc(src: unknown): boolean;
+
+/** Coerces any value to a known image size, defaulting to `"full"`. */
+export function normaliseMarkdownImageSize(size: unknown): MarkdownImageSize;
+
+/**
+ * sc-6970 — renders the markdown subset with SDK primitives, so formatted
+ * content reads the same in the web Player and the exported Expo app. `value`
+ * is markdown, never HTML.
+ *
+ * @example
+ *   <RichText value={record.body} />
+ */
+export const RichText: (props: {
+  /** Markdown text. Legacy HTML is stripped to plain text, never rendered. */
+  value?: string;
+  /**
+   * Resolves an image block to a node. Supply it when images are filestore
+   * ids — without it only absolute http(s) URLs render.
+   */
+  renderImage?: (block: {
+    src: string;
+    alt: string;
+    size: MarkdownImageSize;
+  }) => ReactNode;
+  style?: any;
+  testID?: string;
+}) => any;
+
+/**
+ * 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.
+ *
+ * @example
+ *   <MarkdownInput value={draft} onChange={setDraft} placeholder="Write…" />
+ */
+export const MarkdownInput: (props: {
+  /** Markdown text. */
+  value?: string;
+  /** Receives the next markdown string on every edit. */
+  onChange?: (next: string) => void;
+  placeholder?: string;
+  /** Heading above the live preview. Defaults to "Preview". */
+  previewLabel?: string;
+  /** Set false to hide the live preview. Defaults to true. */
+  showPreview?: boolean;
+  /** Passed through to the preview's `<RichText>`. */
+  renderImage?: (block: {
+    src: string;
+    alt: string;
+    size: MarkdownImageSize;
+  }) => 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. */
+  maxHeight?: number;
+  accessibilityLabel?: string;
+  style?: any;
+  testID?: string;
+}) => any;
+
 // ------------------------------------------------------- theme derivation
 // sc-3696: the colour maths both hosts resolve `useTheme()` with. Exported so
 // the Player (frontend/src/services/widgetTheme.js) and the exported app's

package/dist/index.js

@@ -94,6 +94,23 @@ export { useToast } from "./toast.js";
 // each platform's primitives, so a widget's modal escapes its container box
 // identically on the Player and the Expo export.
 export { Overlay } from "./overlay.js";
+// sc-6970 — formatted content. `<RichText>` renders the markdown subset and
+// `<MarkdownInput>` authors it; widgets have no HTML path on either host, so
+// these are the ONE way content with bold/headings/lists is written and shown.
+export { RichText } from "./richtext.js";
+export { MarkdownInput } from "./markdown-input.js";
+export {
+  parseMarkdown,
+  markdownToPlainText,
+  parseMarkdownImage,
+  formatMarkdownImage,
+  stripHtmlToMarkdown,
+  readMarkdownAlt,
+  isHttpImageSrc,
+  isSafeMarkdownImageSrc,
+  normaliseMarkdownImageSize,
+  MARKDOWN_IMAGE_SIZES,
+} from "./markdown.js";
 export {
   Text,
   View,

package/dist/index.native.js

@@ -90,6 +90,21 @@ export { useClipboard, ClipboardError } from "./clipboard.native.js";
 export { useToast } from "./toast.native.js";
 // sc-6607 — see the note on the web mirror in ./index.js.
 export { Overlay } from "./overlay.native.js";
+// sc-6970 — see the note on the web mirror in ./index.js.
+export { RichText } from "./richtext.native.js";
+export { MarkdownInput } from "./markdown-input.native.js";
+export {
+  parseMarkdown,
+  markdownToPlainText,
+  parseMarkdownImage,
+  formatMarkdownImage,
+  stripHtmlToMarkdown,
+  readMarkdownAlt,
+  isHttpImageSrc,
+  isSafeMarkdownImageSrc,
+  normaliseMarkdownImageSize,
+  MARKDOWN_IMAGE_SIZES,
+} from "./markdown.js";
 export {
   Text,
   View,

package/dist/linter.cjs

@@ -392,6 +392,47 @@ function _hostApiUrlRules(source) {
   return findings;
 }
 
+// sc-6970 — see linter.js for the rationale comment. The two files must stay
+// in lockstep (the contract test asserts behaviour-equivalence).
+const HTML_IN_CONTENT_RE =
+  /<\/\s*[a-z][a-z0-9]*\s*>|<(?:br|hr|img|p|div|span|strong|em|b|i|u|s|h[1-6]|ul|ol|li|a|blockquote|code|pre|table|thead|tbody|tr|td|th)(?:\s[^<>]*)?\/?>/i;
+
+function _stringLiteralLines(source) {
+  const withStrings = _stripNonCode(source, { keepStrings: true }).split(
+    /\r?\n/,
+  );
+  const withoutStrings = _stripNonCode(source).split(/\r?\n/);
+  return withStrings.map((line, i) => {
+    const masked = withoutStrings[i] || "";
+    let out = "";
+    for (let c = 0; c < line.length; c += 1) {
+      out += masked[c] === line[c] ? " " : line[c];
+    }
+    return out;
+  });
+}
+
+function _htmlInContentRules(source) {
+  const findings = [];
+  const lines = source.split(/\r?\n/);
+  const stringLines = _stringLiteralLines(source);
+  for (let i = 0; i < stringLines.length; i += 1) {
+    if (!HTML_IN_CONTENT_RE.test(stringLines[i])) continue;
+    findings.push({
+      rule: "no-html-in-content",
+      severity: "warning",
+      label:
+        "HTML tag in a string — widgets have no HTML renderer on either " +
+        "host, so it shows as literal tag soup. Author formatted text with " +
+        "<MarkdownInput> and render it with <RichText> (markdown), never " +
+        "spliced tags.",
+      line: i + 1,
+      snippet: lines[i].trim().slice(0, 200),
+    });
+  }
+  return findings;
+}
+
 // sc-5619 — see linter.js for the rationale comment. The two files must stay
 // in lockstep (the contract test asserts behaviour-equivalence).
 const PAGE_URL_RE = /["'`][^"'`]*\/play\/|\/play\/\$\{/;
@@ -1443,6 +1484,8 @@ function lintSource(source, options) {
     })),
   );
   findings.push(..._hostApiUrlRules(source));
+  // sc-6970 — soft warning: HTML markup spliced into a content string.
+  findings.push(..._htmlInContentRules(source));
   findings.push(..._translationApiRules(source));
   findings.push(..._handBuiltPageUrlRules(source));
   findings.push(..._lucideIconRules(source));

package/dist/linter.js

@@ -294,6 +294,62 @@ function _hostApiUrlRules(source) {
   return findings;
 }
 
+// sc-6970 — no-html-in-content.
+//
+// Widgets draw with React Native primitives, so there is no
+// `dangerouslySetInnerHTML` on either host: an HTML tag inside a STRING stays
+// literal text the reader sees as tag soup. This is the defect a generated
+// "manage content" widget shipped — a hand-rolled B / I / H2 toolbar whose only
+// possible action was splicing `<strong>` and `<br>` into a TextInput, leaving
+// the author reading markup instead of a preview. `severity: "warning"` so a
+// human submission still publishes and the review queue flags it, while the AI
+// publish loop treats it as a blocking check that drives a repair turn.
+//
+// Only STRING content is scanned. JSX is excluded by construction (the masked
+// and unmasked sources agree outside string literals), so a widget's own
+// `<View>` / `<Text>` elements can never trigger it.
+const HTML_IN_CONTENT_RE =
+  /<\/\s*[a-z][a-z0-9]*\s*>|<(?:br|hr|img|p|div|span|strong|em|b|i|u|s|h[1-6]|ul|ol|li|a|blockquote|code|pre|table|thead|tbody|tr|td|th)(?:\s[^<>]*)?\/?>/i;
+
+// Everything the masked source hides but the string-keeping source shows is,
+// by definition, string/template text. Column positions are preserved by both
+// maskings, so the result still lines up 1:1 with the original lines.
+function _stringLiteralLines(source) {
+  const withStrings = _stripNonCode(source, { keepStrings: true }).split(
+    /\r?\n/,
+  );
+  const withoutStrings = _stripNonCode(source).split(/\r?\n/);
+  return withStrings.map((line, i) => {
+    const masked = withoutStrings[i] || "";
+    let out = "";
+    for (let c = 0; c < line.length; c += 1) {
+      out += masked[c] === line[c] ? " " : line[c];
+    }
+    return out;
+  });
+}
+
+function _htmlInContentRules(source) {
+  const findings = [];
+  const lines = source.split(/\r?\n/);
+  const stringLines = _stringLiteralLines(source);
+  for (let i = 0; i < stringLines.length; i += 1) {
+    if (!HTML_IN_CONTENT_RE.test(stringLines[i])) continue;
+    findings.push({
+      rule: "no-html-in-content",
+      severity: "warning",
+      label:
+        "HTML tag in a string — widgets have no HTML renderer on either " +
+        "host, so it shows as literal tag soup. Author formatted text with " +
+        "<MarkdownInput> and render it with <RichText> (markdown), never " +
+        "spliced tags.",
+      line: i + 1,
+      snippet: lines[i].trim().slice(0, 200),
+    });
+  }
+  return findings;
+}
+
 // sc-5619 — no-hand-built-page-url.
 //
 // A published app answers on two URL shapes: `/play/<tenantId>/page/<slug>` on
@@ -1477,6 +1533,8 @@ export function lintSource(source, options) {
   );
   // REQ-WSDK-PLATFORM §3.5: soft host-API URL warning (does not block).
   findings.push(..._hostApiUrlRules(source));
+  // sc-6970 — soft warning: HTML markup spliced into a content string.
+  findings.push(..._htmlInContentRules(source));
   findings.push(..._translationApiRules(source));
   findings.push(..._handBuiltPageUrlRules(source));
   findings.push(..._lucideIconRules(source));

package/dist/markdown-edit.js

@@ -0,0 +1,97 @@
+// sc-6970 — the selection edits `<MarkdownInput>`'s toolbar performs.
+//
+// Pure string maths, kept out of the component the way `richtext-tokens.js`
+// keeps the theme maths out: a toolbar button is only correct if it wraps the
+// author's SELECTION rather than appending at the end, and that is a thing
+// tests can pin without a renderer.
+
+const LINE_RE = /^(\s*)((?:#{1,3}\s)|(?:[-*]\s)|(?:\d+[.)]\s))?([\s\S]*)$/;
+
+const LINE_KINDS = Object.freeze({
+  heading2: { marker: "## ", test: /^##\s/ },
+  heading3: { marker: "### ", test: /^###\s/ },
+  bullet: { marker: "- ", test: /^[-*]\s/ },
+  ordered: { marker: null, test: /^\d+[.)]\s/ },
+});
+
+function clamp(index, max) {
+  const n = Number.isFinite(index) ? Math.trunc(index) : 0;
+  return Math.min(Math.max(n, 0), max);
+}
+
+function readRange(text, selection) {
+  const src = typeof text === "string" ? text : "";
+  const raw = selection && typeof selection === "object" ? selection : {};
+  const a = clamp(raw.start, src.length);
+  const b = clamp(raw.end, src.length);
+  return { src, start: Math.min(a, b), end: Math.max(a, b) };
+}
+
+function wrap(marker) {
+  return (text, selection) => {
+    const { src, start, end } = readRange(text, selection);
+    const selected = src.slice(start, end);
+    const pair = marker.length * 2;
+
+    // Already wrapped — the button toggles the emphasis back off.
+    if (selected.length >= pair && selected.startsWith(marker) && selected.endsWith(marker)) {
+      const inner = selected.slice(marker.length, selected.length - marker.length);
+      return {
+        value: src.slice(0, start) + inner + src.slice(end),
+        selection: { start, end: start + inner.length },
+      };
+    }
+
+    return {
+      value: src.slice(0, start) + marker + selected + marker + src.slice(end),
+      // Leaves the author's own text selected (or the caret between an empty
+      // pair), so typing continues inside the emphasis they just asked for.
+      selection: { start: start + marker.length, end: end + marker.length },
+    };
+  };
+}
+
+function linePrefix(kind) {
+  const spec = LINE_KINDS[kind];
+  return (text, selection) => {
+    const { src, start, end } = readRange(text, selection);
+    const blockStart = src.lastIndexOf("\n", Math.max(start - 1, 0)) + 1;
+    const newlineAfter = src.indexOf("\n", end);
+    const blockEnd = newlineAfter === -1 ? src.length : newlineAfter;
+
+    const lines = src.slice(blockStart, blockEnd).split("\n");
+    const filled = lines.filter((line) => line.trim());
+    // Toggled off only when EVERY line already carries this kind, so a mixed
+    // selection becomes uniformly marked rather than half-stripped.
+    const removing =
+      filled.length > 0 &&
+      filled.every((line) => spec.test.test(line.replace(/^\s*/, "")));
+
+    let ordinal = 0;
+    const rebuilt = lines.map((line) => {
+      const match = LINE_RE.exec(line);
+      const indent = match[1];
+      const body = match[3];
+      if (!line.trim()) return line;
+      if (removing) return indent + body;
+      ordinal += 1;
+      return indent + (spec.marker || `${ordinal}. `) + body;
+    });
+
+    const block = rebuilt.join("\n");
+    return {
+      value: src.slice(0, blockStart) + block + src.slice(blockEnd),
+      selection: { start: blockStart, end: blockStart + block.length },
+    };
+  };
+}
+
+export const markdownEditOps = Object.freeze({
+  bold: wrap("**"),
+  italic: wrap("*"),
+  code: wrap("`"),
+  heading2: linePrefix("heading2"),
+  heading3: linePrefix("heading3"),
+  bullet: linePrefix("bullet"),
+  ordered: linePrefix("ordered"),
+});