@colixsystems/widget-sdk 0.160.0 → 0.162.0

package/README.md

@@ -48,7 +48,7 @@ The data layer lives in **four separate domain-client packages**, each instantia
 | **DATASTORE** | `useDatastoreSchema(tableId)` | `{ schema, loading, error, refetch }` | `schema(tableId)` — `datastore.read:<table>` |
 | **DATASTORE** | `useBoundColumns(tableId, shape, props)` | `{ columns, resolved, missing, loading, error }` | `schema(tableId)` (built on `useDatastoreSchema`) — `datastore.read:<table>`. Resolves author-bound column NAMES from `props` by exact name → case-insensitive name → first unclaimed column matching `shape[key].dataType`, so a column an author renamed after install still resolves instead of `record[props.titleField]` reading `undefined`. `columns` holds the resolved NAME (`record[columns.titleField]`); `resolved` holds the full `Column`; `missing` lists non-`optional` keys that never resolved. Falsy `tableId` collapses to `{ columns: {}, resolved: {}, missing: Object.keys(shape), loading: false, error: null }`. |
 | **DATASTORE** | `useInterpretDraft(tableId)` | `{ interpret, interpreting, error, result, available }` | `interpret(tableId, body)` — `datastore.read:<table>`. Turns ONE sentence a user typed ("walk at 11 am tomorrow") into DRAFT column values so a form can prefill itself. IMPERATIVE: call `interpret(text, { fields?, timeZone? })` from an event handler, never on mount. It DRAFTS and writes nothing — show the values for review, then submit through `useDatastoreMutation().create`. Resolves to `{ values, unresolved }`; `values` is keyed by column NAME (the shape `create()` takes) and `unresolved` names the fields the sentence did not state. Only text / number / boolean / date / datetime / array columns are drafted — `FILE`, `RELATION`, `USER` and `USER_GROUP` carry ids and are never guessed. Fails closed to an empty draft. **Every call spends the workspace's AI credits** and is rate-limited per actor, so call it once per user action (never on mount or in a render loop); once the workspace runs out the call is refused with a generic 429 — an app user is deliberately **not** told the workspace's billing state, since they have never heard of an AI credit and cannot buy one. Never surface a raw error to the person filling the form: say drafting is unavailable and keep every field editable by hand. `available` is false where the host brokers no interpreter. |
-| **AGENTS** | `useAgent(agentRef)` | `{ send, reset, messages, sending, error, available }` | `ctx.agents` — `ai.invoke:*`. Hold a conversation with one of the WORKSPACE's own AI agents (an author-written name + system prompt). IMPERATIVE: call `send(text)` from an event handler, never on mount — the first send opens the conversation, so a widget nobody types into costs nothing. `messages` is the running transcript, oldest first. You **cannot** set or read the system prompt, replay an edited transcript, or pick a model: the server assembles every turn from the stored prompt plus the stored history, and `content` is the only thing that reaches the wire. `reset()` drops the thread (a "new chat" affordance). **Every send spends the workspace's AI credits** and is rate-limited per caller AND per workspace. Rejects with `AgentError`; branch on `.code` — `AI_QUOTA_EXCEEDED` (429) is the workspace's credit ceiling and will NOT clear on a retry, unlike `RATE_LIMITED`, so never offer "try again" for it, and `AGENT_DISABLED` (409) means the author turned it off, so hide the affordance. Never surface a raw error or the workspace's billing state to an app user. `available` is false when no agent is bound or the host brokers none — render a visible unbound state, never a blank box. An assistant message that used a tool also carries **`activity`** — what the agent DID with the user's data: the table it read, or the table and columns it CHANGED (never the values, and never a row the permissions refused). **Render a write.** A reply saying "done!" is not evidence a row was written, and if the agent got it wrong the user has no other way to notice. A talk-only turn omits the key entirely. |
+| **AGENTS** | `useAgent(agentRef)` | `{ send, cancel, reset, messages, sending, resuming, error, available }` | `ctx.agents` — `ai.invoke:*`. Hold a conversation with one of the WORKSPACE's own AI agents (an author-written name + system prompt). Sending is IMPERATIVE: call `send(text)` from an event handler, never on mount — the first send opens the conversation, so a widget nobody types into costs nothing. On mount the hook DOES reopen the caller's most recent thread with this agent, so a refresh or a navigation keeps the conversation instead of starting a blank one; that resume only READS and spends no credit. `resuming` is true while it runs — render a loading state, not an empty thread. `messages` is the running transcript, oldest first. You **cannot** set or read the system prompt, replay an edited transcript, or pick a model: the server assembles every turn from the stored prompt plus the stored history, and `content` is the only thing that reaches the wire. `reset()` drops the thread (a "new chat" affordance), and the new thread is the one a later mount resumes. **Every send spends the workspace's AI credits** and is rate-limited per caller AND per workspace. Rejects with `AgentError`; branch on `.code` — `AI_QUOTA_EXCEEDED` (429) is the workspace's credit ceiling and will NOT clear on a retry, unlike `RATE_LIMITED`, so never offer "try again" for it, and `AGENT_DISABLED` (409) means the author turned it off, so hide the affordance. Never surface a raw error or the workspace's billing state to an app user. `available` is false when no agent is bound or the host brokers none — render a visible unbound state, never a blank box. An assistant message that used a tool also carries **`activity`** — what the agent DID with the user's data: the table it read, or the table and columns it CHANGED (never the values, and never a row the permissions refused). **Render a write.** A reply saying "done!" is not evidence a row was written, and if the agent got it wrong the user has no other way to notice. A talk-only turn omits the key entirely. |
 | **DATASTORE** | `useDatastoreMutation(table)` | `{ create, update, delete }` | `records(table).{ create, update (PATCH), delete }` — `datastore.write:*`. **To CLEAR a cell, pass it empty** — `update(id, { when: null })` (also `""` or `[]`) empties that cell and it reads back as `null` (`[]` on an array column). There is no separate clear call, so never write a sentinel such as `0` or a placeholder date to mean "no value". `false` and `0` are values, not clears, and a REQUIRED column cannot be cleared. |
 | **DATASTORE** | `useDatastoreSubscription(table, handlers, options)` (optional: options) | `{ status }` — `"connecting" \| "live" \| "reconnecting" \| "fallback"` | `records(table).subscribe` — `datastore.read:<table>`. Live `onCreated` / `onUpdated` / `onDeleted` off the REQ-RT-07 socket; never throws, resolving to `{ status: "fallback" }` so the widget polls instead. A whole-table subscribe is gated on read-EVERY-row, because one envelope reaches every subscriber of the table — so for a table governed by per-record grants pass `options.scope`: `{ kind: "record", record_id }` for one row, or `{ kind: "parent", relation_column, record_id }` for the rows whose RELATION column points at that parent (the column must carry `inheritAcl`, else the subscribe reports `"fallback"`). Re-subscribes on the scope's VALUES, so a fresh object literal each render is fine. |
 | **DATASTORE** | `useRecordPermissions(tableId, recordId)` | `{ permissions, loading, error, grant, revoke, update, refetch }` | `records(table).permissions(record).{ list, grant, update, revoke }` — `acl.write:records` (+ `can_grant` on the record) |
@@ -73,7 +73,39 @@ See the design reference for the full architecture: [`docs/architecture/widget-m
 
 ## Status
 
-`v0.160.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.162.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.162.0 (contract 1.125.0)
+
+**Themed list rows: `List`, `ListRow`, `EmptyState`, and the `list` theme scope.** Each widget that showed records used to hand-roll its rows from `View` + `Pressable`, so two lists in one app disagreed on padding, dividers and corners. `<ListRow>` draws one row whose padding, minimum height, divider, corner radius and background come from **Theme Settings > Lists** (`themeConfig.components.list`), and `<List>` spaces its rows and passes any override down to them. Unthemed, a row is the flush, hairline band the built-in Data List always drew. When the theme sets a `gap`, rows become separate tiles on the surface, outlined by the divider. A selected row carries an accent bar as well as the tint, the last row of a `<List>` has no divider, a pressable row never drops below 44px, and every override passes the same bounds a theme value does. `<EmptyState>` is the matching "nothing here" panel.
+
+```jsx
+<List>
+  {items.map((item) => (
+    <ListRow key={item.id} title={item.name} subtitle={item.email} onPress={() => open(item)} selected={item.id === selectedId} />
+  ))}
+</List>
+{items.length === 0 ? <EmptyState icon="inbox" title="No orders yet" message="New orders appear here." /> : null}
+```
+
+To let an author restyle one widget's rows, declare the style fields `listRowPadding`, `listRowMinHeight`, `listRowGap`, `listRowRadius`, `listRowBackground`, `listDividerColor` and `listDividerWidth`. They follow the theme until set, like the `card*` fields do, and you pass them through as the matching `ListRow` props (`rowPadding`, …).
+
+**`textRoleStyle(role, theme.typography, theme.colors)`** returns the complete style of a semantic text tier (`display`, `title`, `subtitle`, `body`, `caption`, `overline`) — size, absolute line height, weight, tracking, case, the tier's face and its colour. The built-in widgets use the same function, so your text matches theirs.
+
+Additive: a theme without a `list` scope renders exactly as before.
+
+### What's new in 0.161.0 (contract 1.124.0)
+
+**`useAgent()` resumes the conversation after a refresh or a navigation (sc-8867).** The backend has always persisted the thread, but the hook held the conversation id and the transcript in component state, so every remount opened a blank one. An app user who refreshed the page lost the conversation on screen — and re-explaining the context to the agent spent another paid turn.
+
+On mount the hook now reopens the caller's most recent thread with the bound agent and restores its transcript. Two things are worth knowing:
+
+- **It spends nothing.** The resume is two READ-ONLY GETs of the caller's own rows (`conversations.list` then `messages.list`). Sending stays imperative — no paid call is made on mount, so a widget nobody types into still costs the workspace nothing.
+- **New `resuming` flag** — true only while the transcript is being reopened. Render a loading state: an empty thread that is about to fill reads as a lost conversation. It is never true for a turn in flight; that is still `sending`.
+
+`reset()` is unchanged as a "new chat" affordance, and the new thread it starts is the one a later mount resumes. A transcript that fails to load renders no error — the widget is fully usable without it and the next send opens a fresh thread.
+
+Additive: a widget that ignores `resuming` behaves as before, except that it now shows the conversation the user actually left.
 
 ### What's new in 0.160.0 (contract 1.123.0)
 
@@ -201,7 +233,7 @@ It presents inside `<Overlay>`, so it escapes the widget's clipping box on both
 A workspace **agent** is a name plus a system prompt its author wrote in the Studio. This hook lets any widget hold a conversation with one, without touching HTTP and without ever holding an API key.
 
 ```js
-const { send, reset, messages, sending, error, available } = useAgent(props.agentId);
+const { send, reset, messages, sending, resuming, error, available } = useAgent(props.agentId);
 ```
 
 **What a widget deliberately cannot do.** You cannot set the system prompt, send your own transcript, or pick a model, and no API surface returns the prompt. The server assembles every turn from the stored prompt plus the stored history, and `content` is the only field that reaches the wire — not because the rest is filtered out, but because nothing else is ever sent. That guarantee is about the WIRE, not about secrecy: a model can be talked into repeating its own prompt, so an agent's prompt is not a secret store — never put credentials, or data the app's users may not see, in one. `messages` is the transcript this widget has seen; the real one is the server's.
@@ -1754,6 +1786,8 @@ import { defineWidget, validateManifest, useDatastoreQuery, Text, View } from "@
 - `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.
+- `List`, `ListRow`, `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; `<EmptyState icon title message>` is the "nothing here" panel. Never hand-roll a row from `View` + `Pressable`.
+- `textRoleStyle(role, typography, colors)`, `TEXT_ROLES` — the style of a semantic text tier, shared with the built-in widgets.
 - `WidgetContextProvider` — React context provider that the host (Studio, Player, exported app) wraps widgets with.
 
 ## Design & visual polish

package/dist/contract.cjs

@@ -433,6 +433,18 @@ const DANGER_BUTTON_FIELDS = Object.freeze({
   borderColor: "dangerBorderColor",
 });
 
+// The list-row vocabulary. Bound by name as well as to the Data List, so a
+// custom widget that declares `listRowPadding` follows "Lists" like a built-in.
+const LIST_ROW_FIELDS = Object.freeze({
+  rowPadding: "listRowPadding",
+  rowMinHeight: "listRowMinHeight",
+  gap: "listRowGap",
+  radius: "listRowRadius",
+  background: "listRowBackground",
+  dividerColor: "listDividerColor",
+  dividerWidth: "listDividerWidth",
+});
+
 const THEME_COMPONENTS = Object.freeze({
   button: Object.freeze({
     label: "Buttons",
@@ -584,6 +596,24 @@ const THEME_COMPONENTS = Object.freeze({
       "appstudio.button": Object.freeze({ color: "ringColor", width: "ringWidth" }),
     }),
   }),
+  // Record rows: `<ListRow>` reads this scope directly; the fields bind it
+  // onto widgets. No uiDefault on the height: it has no theme token.
+  list: Object.freeze({
+    label: "Lists",
+    universalFields: LIST_ROW_FIELDS,
+    tokens: Object.freeze({
+      rowPadding: Object.freeze({ type: "size", min: 0, max: 32, uiDefault: "spacing.md" }),
+      rowMinHeight: Object.freeze({ type: "size", min: 32, max: 96 }),
+      gap: Object.freeze({ type: "size", min: 0, max: 24 }),
+      radius: Object.freeze({ type: "size", min: 0, max: 32 }),
+      background: Object.freeze({ type: "color" }),
+      dividerColor: Object.freeze({ type: "color", uiDefault: "colors.border" }),
+      dividerWidth: Object.freeze({ type: "size", min: 0, max: 4 }),
+    }),
+    targets: Object.freeze({
+      "appstudio.data-list": LIST_ROW_FIELDS,
+    }),
+  }),
 });
 
 // sc-4505 — the value types a widget event payload field may declare. Narrower
@@ -1315,6 +1345,11 @@ const HOOKS = [
       "agents (an author-written name + system prompt). IMPERATIVE: call " +
       "send(text) from an event handler, never on mount — the first send " +
       "opens the conversation, so a widget nobody types into costs nothing. " +
+      "On mount the hook DOES reopen the caller's most recent thread with " +
+      "this agent, so a refresh or a navigation keeps the conversation " +
+      "instead of starting a blank one; that resume only READS and spends no " +
+      "credit. `resuming` is true while it runs — render a loading state, " +
+      "not an empty thread, or the transcript appears to pop in from nowhere. " +
       "`messages` is the running transcript, oldest first, each " +
       "{ id, role, content, created_at } with role 'user' | 'assistant'. " +
       "An assistant message that used a tool also carries `activity`: what " +
@@ -1332,7 +1367,8 @@ const HOOKS = [
       "`agentRef` property — when it is missing, or the host brokers no " +
       "agents client, `available` is false and send() rejects UNAVAILABLE; " +
       "render a visible unbound state, NEVER a blank box. reset() drops the " +
-      "thread and clears the transcript (a 'new chat' affordance). " +
+      "thread and clears the transcript (a 'new chat' affordance) and the " +
+      "NEW thread is the one a later mount resumes. " +
       "Every send spends the workspace's AI CREDITS and is rate-limited per " +
       "caller AND per workspace, so call it once per user action. " +
       "AgentError.code distinguishes the refusals that share a status: " +
@@ -1352,6 +1388,8 @@ const HOOKS = [
       reset: "() => void",
       messages: "Array<{ id, conversation_id, role, content, created_at }>",
       sending: "boolean",
+      resuming:
+        "boolean  // true only while the stored transcript is being reopened on mount; show a loading state, not an empty thread",
       error: "AgentError | null",
       available: "boolean  // false when no agent is bound, or the host brokers none",
     },
@@ -2165,6 +2203,27 @@ const PRIMITIVES = [
     rnComponent: null,
     docsUrl: null,
   },
+  {
+    name: "List",
+    description:
+      "Themed list container. `<List>{rows.map((r) => <ListRow key={r.id} title={r.name} />)}</List>`. Spaces and insets its `<ListRow>` children the way the app's look says (flush rows with hairlines, or separated rounded rows), and hands any row override you pass (`rowPadding`, `rowMinHeight`, `gap`, `radius`, `background`, `dividerColor`, `dividerWidth`) down to every row. Props: those overrides, `style`, `testID`. Put it inside a `ScrollView` (or bound its height) for long lists.",
+    rnComponent: null,
+    docsUrl: null,
+  },
+  {
+    name: "ListRow",
+    description:
+      'Themed list row. `<ListRow title={item.name} subtitle={item.email} leading={<Icon name="user" size={20} />} trailing={<Text>…</Text>} onPress={() => open(item)} selected={item.id === selectedId} />`. THE way to draw one row of records: its padding, minimum height, divider, corner radius and background come from the theme\'s Lists settings, so every list in the app matches — never hand-roll a row from `View` + `Pressable`. Props: `title`, `subtitle` (rendered in the subtitle / caption text tiers), `leading` / `trailing` nodes, `children` (replaces the title block, for a multi-column row), `onPress` (makes it a button with a press state), `selected`, `disabled`, `divider` (default true; pass false on the last row), `accessibilityLabel`, `style`, `testID`, plus the same per-row overrides `<List>` takes. Declare `listRowPadding` / `listRowRadius` / … style fields and pass them through to let an author override one widget.',
+    rnComponent: null,
+    docsUrl: null,
+  },
+  {
+    name: "EmptyState",
+    description:
+      'Themed empty / zero-data state. `<EmptyState icon="inbox" title="No orders yet" message="New orders appear here." />`. THE way to say "nothing here" — a muted panel with an icon, a title and a caption, centred, in the app\'s own surface and text tiers. Props: `icon` (a lucide icon name, default "inbox"; pass null for none), `title`, `message`, `children` (an action, e.g. a button), `style`, `testID`.',
+    rnComponent: null,
+    docsUrl: null,
+  },
 ];
 
 const CATEGORIES = [
@@ -4349,7 +4408,12 @@ const CONTRACT = deepFreeze({
   // 1.123.0: behaviour (sc-8595) — useDatastoreQuery / useDatastoreRecord
   //    keep their data while a changed query or refetch runs; `loading` only
   //    until the first result for the table/record, new `fetching` flag.
-  version: "1.123.0",
+  // 1.125.0: additive — the `list` component scope (row padding, height, gap,
+  //    radius, background, divider) and the `List` / `ListRow` / `EmptyState`
+  //    primitives that read it, plus `textRoleStyle` and its role helpers.
+  //    Widgets each hand-rolled their rows, so two lists in one app disagreed.
+  //    Additive: a theme without `list` paints the rows exactly as before.
+  version: "1.125.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,

package/dist/contract.js

@@ -433,6 +433,18 @@ const DANGER_BUTTON_FIELDS = Object.freeze({
   borderColor: "dangerBorderColor",
 });
 
+// The list-row vocabulary. Bound by name as well as to the Data List, so a
+// custom widget that declares `listRowPadding` follows "Lists" like a built-in.
+const LIST_ROW_FIELDS = Object.freeze({
+  rowPadding: "listRowPadding",
+  rowMinHeight: "listRowMinHeight",
+  gap: "listRowGap",
+  radius: "listRowRadius",
+  background: "listRowBackground",
+  dividerColor: "listDividerColor",
+  dividerWidth: "listDividerWidth",
+});
+
 const THEME_COMPONENTS = Object.freeze({
   button: Object.freeze({
     label: "Buttons",
@@ -584,6 +596,24 @@ const THEME_COMPONENTS = Object.freeze({
       "appstudio.button": Object.freeze({ color: "ringColor", width: "ringWidth" }),
     }),
   }),
+  // Record rows: `<ListRow>` reads this scope directly; the fields bind it
+  // onto widgets. No uiDefault on the height: it has no theme token.
+  list: Object.freeze({
+    label: "Lists",
+    universalFields: LIST_ROW_FIELDS,
+    tokens: Object.freeze({
+      rowPadding: Object.freeze({ type: "size", min: 0, max: 32, uiDefault: "spacing.md" }),
+      rowMinHeight: Object.freeze({ type: "size", min: 32, max: 96 }),
+      gap: Object.freeze({ type: "size", min: 0, max: 24 }),
+      radius: Object.freeze({ type: "size", min: 0, max: 32 }),
+      background: Object.freeze({ type: "color" }),
+      dividerColor: Object.freeze({ type: "color", uiDefault: "colors.border" }),
+      dividerWidth: Object.freeze({ type: "size", min: 0, max: 4 }),
+    }),
+    targets: Object.freeze({
+      "appstudio.data-list": LIST_ROW_FIELDS,
+    }),
+  }),
 });
 
 // sc-4505 — the value types a widget event payload field may declare. Narrower
@@ -1315,6 +1345,11 @@ const HOOKS = [
       "agents (an author-written name + system prompt). IMPERATIVE: call " +
       "send(text) from an event handler, never on mount — the first send " +
       "opens the conversation, so a widget nobody types into costs nothing. " +
+      "On mount the hook DOES reopen the caller's most recent thread with " +
+      "this agent, so a refresh or a navigation keeps the conversation " +
+      "instead of starting a blank one; that resume only READS and spends no " +
+      "credit. `resuming` is true while it runs — render a loading state, " +
+      "not an empty thread, or the transcript appears to pop in from nowhere. " +
       "`messages` is the running transcript, oldest first, each " +
       "{ id, role, content, created_at } with role 'user' | 'assistant'. " +
       "An assistant message that used a tool also carries `activity`: what " +
@@ -1332,7 +1367,8 @@ const HOOKS = [
       "`agentRef` property — when it is missing, or the host brokers no " +
       "agents client, `available` is false and send() rejects UNAVAILABLE; " +
       "render a visible unbound state, NEVER a blank box. reset() drops the " +
-      "thread and clears the transcript (a 'new chat' affordance). " +
+      "thread and clears the transcript (a 'new chat' affordance) and the " +
+      "NEW thread is the one a later mount resumes. " +
       "Every send spends the workspace's AI CREDITS and is rate-limited per " +
       "caller AND per workspace, so call it once per user action. " +
       "AgentError.code distinguishes the refusals that share a status: " +
@@ -1352,6 +1388,8 @@ const HOOKS = [
       reset: "() => void",
       messages: "Array<{ id, conversation_id, role, content, created_at }>",
       sending: "boolean",
+      resuming:
+        "boolean  // true only while the stored transcript is being reopened on mount; show a loading state, not an empty thread",
       error: "AgentError | null",
       available: "boolean  // false when no agent is bound, or the host brokers none",
     },
@@ -2165,6 +2203,27 @@ const PRIMITIVES = [
     rnComponent: null,
     docsUrl: null,
   },
+  {
+    name: "List",
+    description:
+      "Themed list container. `<List>{rows.map((r) => <ListRow key={r.id} title={r.name} />)}</List>`. Spaces and insets its `<ListRow>` children the way the app's look says (flush rows with hairlines, or separated rounded rows), and hands any row override you pass (`rowPadding`, `rowMinHeight`, `gap`, `radius`, `background`, `dividerColor`, `dividerWidth`) down to every row. Props: those overrides, `style`, `testID`. Put it inside a `ScrollView` (or bound its height) for long lists.",
+    rnComponent: null,
+    docsUrl: null,
+  },
+  {
+    name: "ListRow",
+    description:
+      'Themed list row. `<ListRow title={item.name} subtitle={item.email} leading={<Icon name="user" size={20} />} trailing={<Text>…</Text>} onPress={() => open(item)} selected={item.id === selectedId} />`. THE way to draw one row of records: its padding, minimum height, divider, corner radius and background come from the theme\'s Lists settings, so every list in the app matches — never hand-roll a row from `View` + `Pressable`. Props: `title`, `subtitle` (rendered in the subtitle / caption text tiers), `leading` / `trailing` nodes, `children` (replaces the title block, for a multi-column row), `onPress` (makes it a button with a press state), `selected`, `disabled`, `divider` (default true; pass false on the last row), `accessibilityLabel`, `style`, `testID`, plus the same per-row overrides `<List>` takes. Declare `listRowPadding` / `listRowRadius` / … style fields and pass them through to let an author override one widget.',
+    rnComponent: null,
+    docsUrl: null,
+  },
+  {
+    name: "EmptyState",
+    description:
+      'Themed empty / zero-data state. `<EmptyState icon="inbox" title="No orders yet" message="New orders appear here." />`. THE way to say "nothing here" — a muted panel with an icon, a title and a caption, centred, in the app\'s own surface and text tiers. Props: `icon` (a lucide icon name, default "inbox"; pass null for none), `title`, `message`, `children` (an action, e.g. a button), `style`, `testID`.',
+    rnComponent: null,
+    docsUrl: null,
+  },
 ];
 
 const CATEGORIES = [
@@ -4345,7 +4404,12 @@ const CONTRACT = deepFreeze({
   // 1.123.0: behaviour (sc-8595) — useDatastoreQuery / useDatastoreRecord
   //    keep their data while a changed query or refetch runs; `loading` only
   //    until the first result for the table/record, new `fetching` flag.
-  version: "1.123.0",
+  // 1.125.0: additive — the `list` component scope (row padding, height, gap,
+  //    radius, background, divider) and the `List` / `ListRow` / `EmptyState`
+  //    primitives that read it, plus `textRoleStyle` and its role helpers.
+  //    Widgets each hand-rolled their rows, so two lists in one app disagreed.
+  //    Additive: a theme without `list` paints the rows exactly as before.
+  version: "1.125.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,

package/dist/hooks.js

@@ -2813,13 +2813,19 @@ function toAgentError(err) {
 
 /**
  * sc-7991 — hold a conversation with a workspace-authored AI agent.
- * Returns `{ send, reset, messages, sending, error, available }`.
+ * Returns `{ send, cancel, reset, messages, sending, resuming, error, available }`.
  *
  *   send(text) → Promise<{ role, content }>   the agent's reply
  *
- * The hook is IMPERATIVE — it NEVER fires on mount; the widget calls `send`
- * from an event handler. The first `send` opens the conversation, so an author
- * who places the widget and never types costs the workspace nothing.
+ * Sending is IMPERATIVE — no PAID call is ever made on mount; the widget calls
+ * `send` from an event handler, and the first `send` opens the conversation, so
+ * an author who places the widget and never types costs the workspace nothing.
+ *
+ * sc-8867 — on mount the hook does reopen the caller's most recent thread with
+ * this agent, so a refresh or a navigation keeps the conversation instead of
+ * starting a blank one. That resume is two READ-ONLY GETs of the caller's own
+ * rows and spends no AI credit. `resuming` is true only while it runs; `reset()`
+ * starts a fresh thread and outdates any resume still in flight.
  *
  * `messages` is the running transcript this widget has seen, oldest first,
  * each `{ id, role, content, created_at }` with `role` of "user" | "assistant".
@@ -2860,12 +2866,25 @@ export function useAgent(agentRef) {
   const [messages, setMessages] = useState([]);
   const [sending, setSending] = useState(false);
   const [error, setError] = useState(null);
+  const [resuming, setResuming] = useState(available);
 
   // Set during render when the binding changes; consumed below. A setState in
   // the render body would be a cascading re-render, so the flag is applied to
   // the value this render returns instead.
   const pendingResetRef = useRef(false);
 
+  // sc-8867 — a `reset()` must SURVIVE the resume effect. Without it, "New
+  // conversation" on a mount whose list call is still in flight is overwritten
+  // by the transcript the user just asked to leave.
+  const resumeGenerationRef = useRef(0);
+
+  // "New conversation" is a decision about the THREAD, not about this mount.
+  // `reset()` drops only the client's handle — the server still lists the
+  // abandoned thread as the most recent one — so without this a remount
+  // resumes exactly what the user just dismissed. Cleared on a rebind, which
+  // is a different agent and therefore a different decision.
+  const suppressResumeRef = useRef(false);
+
   // A changed binding is a different agent, so neither the open thread nor the
   // transcript carries — leaving the messages would render agent A's
   // conversation underneath agent B.
@@ -2874,14 +2893,25 @@ export function useAgent(agentRef) {
     boundRef.current = agentRef;
     conversationRef.current = null;
     pendingResetRef.current = true;
+    // A resume for the PREVIOUS agent is now outdated, and the new binding's
+    // own resume has not run yet — without this the widget renders one frame
+    // of "no conversation" before the effect reports it is loading.
+    resumeGenerationRef.current += 1;
+    // A different agent is a different decision: leaving the old agent's
+    // "new conversation" set would stop this one from ever resuming.
+    suppressResumeRef.current = false;
   }
 
   const abortRef = useRef(null);
 
   const reset = useCallback(() => {
+    // Outdates any resume in flight, so its transcript is discarded on arrival.
+    resumeGenerationRef.current += 1;
+    suppressResumeRef.current = true;
     conversationRef.current = null;
     setMessages([]);
     setError(null);
+    setResuming(false);
   }, []);
 
   // Ends the WAIT, not the turn: the abort never reaches the server, which
@@ -2891,6 +2921,104 @@ export function useAgent(agentRef) {
     if (controller) controller.abort();
   }, []);
 
+  // sc-8867 — reopen the caller's most recent thread with this agent.
+  //
+  // The transcript lives on the SERVER; holding it only in component state
+  // meant a refresh or a navigation started a blank thread, losing the
+  // context and paying to rebuild it. Both calls here are READ-ONLY GETs of
+  // the caller's own rows: this spends no AI credit, so the hook's rule that
+  // it never makes a PAID call on mount is intact — `send` and
+  // `conversations.create` remain imperative and reachable only from an
+  // event handler.
+  //
+  // Nothing is resumed when the transcript is non-empty (a send already
+  // opened this thread) or after a `reset()`, whose generation bump outdates
+  // an in-flight resume.
+  useEffect(() => {
+    if (!available) {
+      setResuming(false);
+      return undefined;
+    }
+    const client = clientRef.current;
+    const agentId = agentIdRef.current;
+    if (!client || !agentId) {
+      setResuming(false);
+      return undefined;
+    }
+
+    let cancelled = false;
+    const generation = resumeGenerationRef.current;
+    // A remount with the thread already open would re-read what it holds, and
+    // a thread the user deliberately left must not come back on a remount.
+    if (conversationRef.current || suppressResumeRef.current) {
+      setResuming(false);
+      return undefined;
+    }
+
+    // An older host may broker a client with no `list`. Resuming is an
+    // ENHANCEMENT, so a client that cannot do it degrades to the previous
+    // behaviour — never to a widget wedged on a loading state it cannot leave.
+    let thread;
+    try {
+      thread = client.conversations(agentId);
+    } catch {
+      thread = null;
+    }
+    if (!thread || typeof thread.list !== "function") {
+      setResuming(false);
+      return undefined;
+    }
+    setResuming(true);
+
+    (async () => {
+      try {
+        const listed = await thread.list({ limit: 1 });
+        const latest =
+          listed && Array.isArray(listed.data) && listed.data.length > 0
+            ? listed.data[0]
+            : null;
+        const conversationId = latest && latest.id ? latest.id : null;
+        if (!conversationId) return;
+        const transcript = thread.messages(conversationId);
+        if (!transcript || typeof transcript.list !== "function") return;
+        const history = await transcript.list();
+        // Re-checked AFTER the awaits: a rebind, an unmount or a reset during
+        // the round trip must not adopt this agent's thread under another.
+        if (
+          cancelled ||
+          agentIdRef.current !== agentId ||
+          resumeGenerationRef.current !== generation ||
+          suppressResumeRef.current ||
+          // A `send` that started during the resume already latched a thread.
+          // Overwriting it would orphan that PAID turn in a conversation
+          // nothing reads again, and point the next send somewhere else.
+          conversationRef.current
+        ) {
+          return;
+        }
+        conversationRef.current = Promise.resolve(conversationId);
+        const rows =
+          history && Array.isArray(history.data) ? history.data : [];
+        // Never clobber a turn a concurrent send already appended.
+        if (rows.length > 0) setMessages((prior) => (prior.length > 0 ? prior : rows));
+      } catch {
+        // A transcript that will not load is not a failed turn, and the widget
+        // is fully usable without it: a visible error here would report a
+        // healthy agent as broken. The next send opens a fresh thread.
+      } finally {
+        if (!cancelled) setResuming(false);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      // A hung `list()` never settles, so the `finally` above may never run.
+      // Without this the next render stays latched on a spinner with the
+      // composer disabled — the wedge this whole path exists to avoid.
+      setResuming(false);
+    };
+  }, [available, agentRef]);
+
   const send = useCallback(async (text) => {
     const client = clientRef.current;
     const agentId = agentIdRef.current;
@@ -2962,6 +3090,7 @@ export function useAgent(agentRef) {
   // than one frame of the previous agent's conversation.
   let visibleMessages = messages;
   let visibleError = error;
+  let visibleResuming = resuming;
   if (pendingResetRef.current) {
     pendingResetRef.current = false;
     visibleMessages = [];
@@ -2970,6 +3099,10 @@ export function useAgent(agentRef) {
     // report a healthy agent as broken, and widgets gate on error.code.
     visibleError = null;
     if (error) setError(null);
+    // The new binding's resume starts in the effect below, so report it as
+    // loading now rather than showing an empty thread for one frame.
+    visibleResuming = available;
+    if (resuming !== available) setResuming(available);
   }
 
   return {
@@ -2978,6 +3111,10 @@ export function useAgent(agentRef) {
     reset,
     messages: visibleMessages,
     sending,
+    // sc-8867 — true only while the stored transcript is being reopened, so a
+    // widget shows a loading state instead of an empty thread that is about to
+    // fill. Never true for a turn in flight; that is `sending`.
+    resuming: visibleResuming,
     error: visibleError,
     available,
   };

package/dist/index.d.ts

@@ -1255,11 +1255,21 @@ export interface AgentApi {
    * "cancel", and show no error when the user presses it.
    */
   cancel(): void;
-  /** Drop the open thread and clear the transcript this widget has seen. */
+  /**
+   * Drop the open thread and clear the transcript this widget has seen. The
+   * NEW thread is the one a later mount resumes.
+   */
   reset(): void;
   /** Oldest first. The SERVER owns the real transcript. */
   messages: AgentMessage[];
   sending: boolean;
+  /**
+   * sc-8867 — true only while the caller's most recent thread is being
+   * reopened on mount. Render a loading state: an empty thread that is about
+   * to fill reads as a lost conversation. Never true for a turn in flight —
+   * that is `sending`.
+   */
+  resuming: boolean;
   error: AgentError | null;
   /** False when no agent is bound, or the host brokers no agents client. */
   available: boolean;
@@ -1267,9 +1277,13 @@ export interface AgentApi {
 
 /**
  * sc-7991 — hold a conversation with a workspace-authored AI agent.
- * IMPERATIVE: never fires on mount, so an unused widget costs nothing. The
- * widget sends ONE message; the system prompt and the real transcript stay
- * server-side and are never readable or settable from here.
+ * Sending is IMPERATIVE: no PAID call is made on mount, so an unused widget
+ * costs nothing. The widget sends ONE message; the system prompt and the real
+ * transcript stay server-side and are never readable or settable from here.
+ *
+ * sc-8867 — on mount it DOES reopen the caller's most recent thread with this
+ * agent (two read-only GETs, no credit spent), so a refresh or a navigation
+ * keeps the conversation rather than starting a blank one.
  */
 export function useAgent(agentRef: string | null | undefined): AgentApi;
 
@@ -2539,6 +2553,88 @@ export const Overlay: (props: {
   children?: ReactNode;
 }) => any;
 
+/** Per-list row overrides; unset values follow Theme Settings > Lists. */
+export interface ListRowTokens {
+  rowPadding?: number;
+  rowMinHeight?: number;
+  /** Space between rows. Above 0, rows are separate tiles on the muted surface. */
+  gap?: number;
+  radius?: number;
+  background?: string;
+  dividerColor?: string;
+  dividerWidth?: number;
+}
+
+/**
+ * Themed list container. Spaces and insets its `<ListRow>` children the way the
+ * app's look says, and hands its overrides down to every row.
+ */
+export const List: (props: ListRowTokens & {
+  style?: any;
+  testID?: string;
+  children?: ReactNode;
+}) => any;
+
+/**
+ * Themed list row. Padding, height, divider, radius and background come from
+ * the theme's `list` scope, so every list in the app matches.
+ *
+ * @example
+ *   <List>
+ *     {items.map((item) => (
+ *       <ListRow key={item.id} title={item.name} subtitle={item.email} onPress={() => open(item)} />
+ *     ))}
+ *   </List>
+ */
+export const ListRow: (props: ListRowTokens & {
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  leading?: ReactNode;
+  trailing?: ReactNode;
+  /** Makes the row a button with a press state. */
+  onPress?: () => void;
+  selected?: boolean;
+  disabled?: boolean;
+  /** Defaults to true; pass false on the last row. */
+  divider?: boolean;
+  accessibilityLabel?: string;
+  style?: any;
+  testID?: string;
+  /** Replaces the title block, e.g. for a multi-column row. */
+  children?: ReactNode;
+}) => any;
+
+/** Themed empty / zero-data state: icon, title and caption on the muted surface. */
+export const EmptyState: (props: {
+  /** A lucide icon name; defaults to "inbox". Pass null for none. */
+  icon?: string | null;
+  title?: ReactNode;
+  message?: ReactNode;
+  style?: any;
+  testID?: string;
+  children?: ReactNode;
+}) => any;
+
+export type TextRole = "display" | "title" | "subtitle" | "body" | "caption" | "overline";
+export const TEXT_ROLES: readonly TextRole[];
+export const TEXT_TRANSFORMS: readonly string[];
+export const LINE_HEIGHT_RATIO: number;
+export const LEGACY_FONT_ROLE_ALIASES: Readonly<Record<string, TextRole>>;
+export const DEFAULT_TEXT_ROLE: TextRole;
+export const ROLE_FACES: Readonly<Record<TextRole, "heading" | "body">>;
+export function normaliseTextRole(value: unknown): TextRole;
+export function roleTokens(role: string, typography: any): Record<string, any> | null;
+export function roleColor(tokens: any, colors: any): string | undefined;
+/**
+ * The full text style for a semantic tier — size, absolute line height, weight,
+ * tracking, case, the tier's face and its colour — from the theme.
+ *
+ * @example
+ *   const theme = useTheme();
+ *   <Text style={textRoleStyle("caption", theme.typography, theme.colors)}>Updated 2m ago</Text>
+ */
+export function textRoleStyle(role: TextRole | string, typography: any, colors?: any): Record<string, any>;
+
 // ----------------------------------------------------- formatted content
 // sc-6970 — widgets have no HTML path: they render through React Native
 // primitives, which have no `dangerouslySetInnerHTML` on either host. Content

package/dist/index.js

@@ -189,6 +189,21 @@ export {
   applyPendingReactions,
 } from "./emoji-reactions.js";
 export { insertAtCaret, pushRecentEmoji } from "./emoji-picker-tokens.js";
+// Themed list building blocks; rows follow the theme's `list` scope.
+export { List, ListRow, EmptyState } from "./list.js";
+// The semantic text tiers, shared with the built-in widgets.
+export {
+  textRoleStyle,
+  TEXT_ROLES,
+  TEXT_TRANSFORMS,
+  LINE_HEIGHT_RATIO,
+  LEGACY_FONT_ROLE_ALIASES,
+  DEFAULT_TEXT_ROLE,
+  ROLE_FACES,
+  normaliseTextRole,
+  roleTokens,
+  roleColor,
+} from "./text-roles.js";
 export { normalizeLucideIconName } from "./lucideIconName.js";
 export { pressableLift } from "./interaction.js";
 export { styleGroup } from "./style-group.js";

package/dist/index.native.js

@@ -182,6 +182,21 @@ export {
   applyPendingReactions,
 } from "./emoji-reactions.js";
 export { insertAtCaret, pushRecentEmoji } from "./emoji-picker-tokens.js";
+// Themed list building blocks; rows follow the theme's `list` scope.
+export { List, ListRow, EmptyState } from "./list.native.js";
+// The semantic text tiers, shared with the built-in widgets.
+export {
+  textRoleStyle,
+  TEXT_ROLES,
+  TEXT_TRANSFORMS,
+  LINE_HEIGHT_RATIO,
+  LEGACY_FONT_ROLE_ALIASES,
+  DEFAULT_TEXT_ROLE,
+  ROLE_FACES,
+  normaliseTextRole,
+  roleTokens,
+  roleColor,
+} from "./text-roles.js";
 export { normalizeLucideIconName } from "./lucideIconName.js";
 export { pressableLift } from "./interaction.native.js";
 export { styleGroup } from "./style-group.js";

package/dist/list-tokens.js

@@ -0,0 +1,68 @@
+// The values `<List>` / `<ListRow>` paint with, resolved from the theme's `list`
+// component scope. Platform-free, like overlay-tokens.js, so both hosts render
+// a row from the same numbers and tests can pin them without a renderer.
+
+import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
+import { mixHex } from "./contract.js";
+import { normaliseThemeComponents } from "./theme-components.js";
+
+// A row with no themed height still meets the 44px touch-target floor.
+export const LIST_ROW_MIN_HEIGHT = 44;
+
+// The per-row overrides a widget may pass, named as the theme tokens are.
+export const LIST_TOKEN_NAMES = Object.freeze([
+  "rowPadding",
+  "rowMinHeight",
+  "gap",
+  "radius",
+  "background",
+  "dividerColor",
+  "dividerWidth",
+]);
+
+function isSet(value) {
+  return value !== undefined && value !== null && value !== "";
+}
+
+function pick(overrides, scope, name) {
+  if (overrides && isSet(overrides[name])) return overrides[name];
+  if (scope && isSet(scope[name])) return scope[name];
+  return undefined;
+}
+
+/**
+ * Resolve one list's row values: explicit override, then the theme's `list`
+ * scope, then the theme tokens. Both layers pass the contract's own bounds, so
+ * a hand-edited or planned value cannot reach a native style unvalidated.
+ * Unthemed, a row is the flush band with a 1px hairline the Data List drew;
+ * a `gap` makes separate tiles on the surface, outlined by the divider.
+ *
+ * @param {object} theme — the resolved workspace theme (`useTheme()` shape).
+ * @param {object} [overrides] — per-list values keyed by LIST_TOKEN_NAMES.
+ */
+export function resolveListTokens(theme, overrides) {
+  const base = theme && typeof theme === "object" ? theme : DEFAULT_THEME_TOKENS;
+  const fallback = DEFAULT_THEME_TOKENS;
+  const colors = base.colors || fallback.colors;
+  const spacing = base.spacing || fallback.spacing;
+  const scope = base.components && base.components.list;
+  const own = normaliseThemeComponents({ list: overrides }).list;
+
+  const gap = pick(own, scope, "gap") ?? 0;
+  const separated = gap > 0;
+  const background = pick(own, scope, "background") ?? (separated ? colors.surface : undefined);
+  return {
+    rowPadding: pick(own, scope, "rowPadding") ?? spacing.md,
+    rowMinHeight: pick(own, scope, "rowMinHeight") ?? LIST_ROW_MIN_HEIGHT,
+    gap,
+    separated,
+    // A flush band has square ends; a divider would curve into round ones.
+    radius: separated ? pick(own, scope, "radius") ?? 0 : 0,
+    background,
+    dividerColor: pick(own, scope, "dividerColor") ?? colors.border,
+    dividerWidth: pick(own, scope, "dividerWidth") ?? 1,
+    selectedBackground: colors.primarySoft || colors.surfaceMuted,
+    selectedAccent: colors.primary,
+    pressedBackground: mixHex(colors.onSurface, background || colors.surface, 0.94),
+  };
+}

package/dist/list-view.js

@@ -0,0 +1,215 @@
+// The ONE implementation behind the `<List>`, `<ListRow>` and `<EmptyState>`
+// SDK primitives. The platform bindings (`list.js` / `list.native.js`) differ
+// only in where the primitives come from, so the hosts cannot drift.
+//
+// Every widget drawing a list of records used to hand-roll its rows, so two
+// widgets in one app disagreed on padding, dividers and radius. These read the
+// theme's `list` scope, which a look sets once for the whole app.
+
+import React from "react";
+import { useHostTheme } from "./hooks.js";
+import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
+import { Icon } from "./icon.js";
+import { resolveListTokens, LIST_TOKEN_NAMES } from "./list-tokens.js";
+import { textRoleStyle } from "./text-roles.js";
+
+// Outside a widget host (a test, a preview) the defaults still paint a row.
+function useListTheme() {
+  return useHostTheme() || DEFAULT_THEME_TOKENS;
+}
+
+function listOverrides(props) {
+  const out = {};
+  for (const name of LIST_TOKEN_NAMES) {
+    if (props[name] !== undefined && props[name] !== null) out[name] = props[name];
+  }
+  return out;
+}
+
+/**
+ * Bind the shared list components to one platform's primitives.
+ *
+ * @param {{View: any, Text: any, Pressable: any}} rn
+ */
+export function makeList(rn) {
+  const { View, Text, Pressable } = rn;
+  const ListContext = React.createContext(null);
+
+  function List(props) {
+    const { children, style, testID } = props;
+    const theme = useListTheme();
+    const inherited = React.useContext(ListContext);
+    const overrides = { ...inherited, ...listOverrides(props) };
+    const tokens = resolveListTokens(theme, overrides);
+    // No divider under the last row: the list's own edge ends it.
+    const rows = React.Children.toArray(children);
+    const last = rows.length - 1;
+    const content = rows.map((row, i) =>
+      i === last && React.isValidElement(row) && row.props.divider === undefined
+        ? React.cloneElement(row, { divider: false })
+        : row,
+    );
+    return React.createElement(
+      ListContext.Provider,
+      { value: overrides },
+      React.createElement(View, { style: [{ gap: tokens.gap }, style], testID }, content),
+    );
+  }
+  List.displayName = "List";
+
+  function ListRow(props) {
+    const {
+      title,
+      subtitle,
+      leading,
+      trailing,
+      onPress,
+      selected = false,
+      disabled = false,
+      divider = true,
+      accessibilityLabel,
+      style,
+      testID,
+      children,
+    } = props;
+    const theme = useListTheme();
+    const inherited = React.useContext(ListContext);
+    const tokens = resolveListTokens(theme, {
+      ...inherited,
+      ...listOverrides(props),
+    });
+    const { colors, spacing, typography } = theme;
+
+    const pressable = typeof onPress === "function";
+    // A tile is outlined; a flush band is separated by its bottom divider.
+    const edge = tokens.separated
+      ? tokens.dividerWidth > 0
+        ? { borderWidth: tokens.dividerWidth, borderColor: tokens.dividerColor }
+        : null
+      : divider && tokens.dividerWidth > 0
+        ? { borderBottomWidth: tokens.dividerWidth, borderColor: tokens.dividerColor }
+        : null;
+    const rowStyle = {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: spacing.md,
+      paddingHorizontal: tokens.rowPadding,
+      paddingVertical: tokens.rowPadding,
+      // A dense look may shrink a static row, never a tap target.
+      minHeight: pressable ? Math.max(tokens.rowMinHeight, 44) : tokens.rowMinHeight,
+      borderRadius: tokens.radius,
+      ...(tokens.background ? { backgroundColor: tokens.background } : null),
+      ...edge,
+      // A tint alone is too faint to read as the current row.
+      ...(selected
+        ? {
+            backgroundColor: tokens.selectedBackground,
+            borderLeftWidth: 3,
+            borderLeftColor: tokens.selectedAccent,
+          }
+        : null),
+    };
+
+    const body =
+      children !== undefined
+        ? children
+        : React.createElement(
+            View,
+            { style: { flex: 1, gap: 2 } },
+            title !== undefined && title !== null
+              ? React.createElement(
+                  Text,
+                  {
+                    style: textRoleStyle("subtitle", typography, colors),
+                    numberOfLines: 1,
+                  },
+                  title,
+                )
+              : null,
+            subtitle !== undefined && subtitle !== null
+              ? React.createElement(
+                  Text,
+                  {
+                    style: textRoleStyle("caption", typography, colors),
+                    numberOfLines: 2,
+                  },
+                  subtitle,
+                )
+              : null,
+          );
+    const content = [leading || null, body, trailing || null];
+
+    if (!pressable) {
+      return React.createElement(
+        View,
+        {
+          style: [rowStyle, style],
+          testID,
+          accessibilityLabel,
+          accessible: accessibilityLabel ? true : undefined,
+        },
+        ...content,
+      );
+    }
+    return React.createElement(
+      Pressable,
+      {
+        onPress,
+        disabled,
+        // accessibilityRole + aria-*: the pair that announces on both hosts.
+        accessibilityRole: "button",
+        accessibilityLabel,
+        "aria-selected": selected,
+        "aria-disabled": disabled,
+        testID,
+        style: ({ pressed }) => [
+          rowStyle,
+          pressed ? { backgroundColor: tokens.pressedBackground } : null,
+          disabled ? { opacity: 0.5 } : null,
+          style,
+        ],
+      },
+      ...content,
+    );
+  }
+  ListRow.displayName = "ListRow";
+
+  function EmptyState({ icon = "inbox", title, message, children, style, testID }) {
+    const { colors, spacing, radii, typography } = useListTheme();
+    return React.createElement(
+      View,
+      {
+        style: [
+          {
+            padding: spacing.lg,
+            borderRadius: radii.md,
+            backgroundColor: colors.surfaceMuted,
+            alignItems: "center",
+            gap: spacing.sm,
+          },
+          style,
+        ],
+        testID,
+      },
+      icon ? React.createElement(Icon, { name: icon, size: 20, color: colors.onSurfaceMuted }) : null,
+      title
+        ? React.createElement(
+            Text,
+            { style: { ...textRoleStyle("subtitle", typography, colors), textAlign: "center" } },
+            title,
+          )
+        : null,
+      message
+        ? React.createElement(
+            Text,
+            { style: { ...textRoleStyle("caption", typography, colors), textAlign: "center" } },
+            message,
+          )
+        : null,
+      children || null,
+    );
+  }
+  EmptyState.displayName = "EmptyState";
+
+  return { List, ListRow, EmptyState };
+}

package/dist/list.js

@@ -0,0 +1,7 @@
+// `<List>`, `<ListRow>`, `<EmptyState>` (web). Binds ./list-view.js to
+// react-native-web; see ./primitives.js for why not the bare specifier.
+
+import * as ReactNative from "react-native-web";
+import { makeList } from "./list-view.js";
+
+export const { List, ListRow, EmptyState } = makeList(ReactNative);

package/dist/list.native.js

@@ -0,0 +1,7 @@
+// `<List>`, `<ListRow>`, `<EmptyState>` (native). Binds ./list-view.js to
+// React Native's own primitives; only the import differs from ./list.js.
+
+import { View, Text, Pressable } from "react-native";
+import { makeList } from "./list-view.js";
+
+export const { List, ListRow, EmptyState } = makeList({ View, Text, Pressable });

package/dist/text-roles.js

@@ -0,0 +1,102 @@
+// REQ-THEME-ROLE — the semantic text tiers, resolved against a theme.
+//
+// The ONE implementation behind every role-styled text: the built-in widgets
+// (frontend `_shared/textStyle.js` re-exports it), the SDK's own themed
+// components, and any custom widget that calls `textRoleStyle`. Platform-free,
+// so both hosts and the exported app resolve a tier identically.
+
+// Leading is a MULTIPLE of the font size; 1.4 is the platform body ratio.
+export const LINE_HEIGHT_RATIO = 1.4;
+
+export const TEXT_TRANSFORMS = ["none", "uppercase", "capitalize"];
+
+// The role names the TIER; `theme.typography.roles` owns what it looks like.
+export const TEXT_ROLES = [
+  "display",
+  "title",
+  "subtitle",
+  "body",
+  "caption",
+  "overline",
+];
+
+// sc-3862's `heading` value predates the tiers and must keep resolving.
+export const LEGACY_FONT_ROLE_ALIASES = Object.freeze({ heading: "title" });
+
+export const DEFAULT_TEXT_ROLE = "body";
+
+// Structural, not a token: the tier decides which of the two faces it takes.
+export const ROLE_FACES = Object.freeze({
+  display: "heading",
+  title: "heading",
+  subtitle: "body",
+  body: "body",
+  caption: "body",
+  overline: "body",
+});
+
+export function normaliseTextRole(value) {
+  const raw = typeof value === "string" ? value.trim() : "";
+  const aliased = LEGACY_FONT_ROLE_ALIASES[raw] || raw;
+  return TEXT_ROLES.includes(aliased) ? aliased : DEFAULT_TEXT_ROLE;
+}
+
+/** The role's token set as the host resolved it, or null. */
+export function roleTokens(role, typography) {
+  const roles = typography && typography.roles;
+  const tokens = roles && roles[normaliseTextRole(role)];
+  return tokens || null;
+}
+
+/**
+ * The colour a role paints in: the theme's explicit override, else the surface
+ * token the role names — resolved per render so a dark surface recolours it.
+ */
+export function roleColor(tokens, colors) {
+  if (!tokens) return undefined;
+  const explicit = typeof tokens.color === "string" ? tokens.color.trim() : "";
+  if (explicit) return explicit;
+  if (!colors || typeof tokens.colorToken !== "string") return undefined;
+  return colors[tokens.colorToken];
+}
+
+/**
+ * The complete text style for a semantic tier: size, absolute line height,
+ * weight, tracking, case, the tier's face and its colour.
+ *
+ * @param {string} role — one of TEXT_ROLES; a legacy `heading` is aliased.
+ * @param {object} typography — the resolved theme's typography tokens.
+ * @param {object} [colors] — the resolved theme's colours, for `colorToken`.
+ */
+export function textRoleStyle(role, typography, colors) {
+  const resolved = normaliseTextRole(role);
+  const tokens = roleTokens(resolved, typography) || {};
+  const size =
+    typeof tokens.fontSize === "number" && Number.isFinite(tokens.fontSize)
+      ? tokens.fontSize
+      : undefined;
+  const ratio =
+    typeof tokens.lineHeight === "number" && Number.isFinite(tokens.lineHeight)
+      ? tokens.lineHeight
+      : LINE_HEIGHT_RATIO;
+  const family = !typography
+    ? undefined
+    : ROLE_FACES[resolved] === "heading"
+      ? typography.headingFontFamily || typography.fontFamily
+      : typography.fontFamily;
+  const color = roleColor(tokens, colors);
+  return {
+    ...(size ? { fontSize: size, lineHeight: Math.round(size * ratio) } : null),
+    ...(tokens.fontWeight ? { fontWeight: tokens.fontWeight } : null),
+    ...(tokens.fontStyle ? { fontStyle: tokens.fontStyle } : null),
+    ...(typeof tokens.letterSpacing === "number" &&
+    Number.isFinite(tokens.letterSpacing)
+      ? { letterSpacing: tokens.letterSpacing }
+      : null),
+    ...(TEXT_TRANSFORMS.includes(tokens.textTransform)
+      ? { textTransform: tokens.textTransform }
+      : null),
+    ...(family ? { fontFamily: family } : null),
+    ...(color ? { color } : null),
+  };
+}

package/package.json

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