@colixsystems/widget-sdk 0.79.0 → 0.81.0

package/README.md

@@ -24,8 +24,11 @@ The data layer lives in **four separate domain-client packages**, each instantia
 | **CORE** | `useRouteParams()` | `{ [paramKey]: value }` | `ctx.navigation.currentRoute.params` — no scope. The nav params the previous page passed via `goTo(pageId, params)`; the flat accessor for master→detail (read `recordId` on a detail page). Empty object when none. |
 | **CORE** | `usePageContext()` | `{ params, records }` | `ctx.pageContext` — no scope. The page's DECLARED parameters, resolved once by the host: `params` are coerced to their declared types, `records` holds the row already fetched for each `record` param (read it instead of fetching again). Both empty when the page declares none. |
 | **CORE** | `useWidgetEvent(name)` | `(payload?) => void` | `ctx.events.emit` — no scope |
+| **CORE** | `useWidgetInput(inputName)` | the published payload, or `undefined` | `ctx.inputs` — no scope. Reads a value ANOTHER widget on the same page published with `useWidgetEvent`. Declare the input in `manifest.inputs`; the page author wires it to one sibling's declared event. The channel retains the last payload, so a widget that mounts later still reads it. `undefined` while unwired or before the first publish — always render a sensible default. Page-scoped and ephemeral: use `useRouteParams()` for state that must survive navigation, the datastore for state that must persist. |
 | **CORE** | `useChildRenderer()` | `{ renderNode(node) }` | `ctx.renderer` — no scope (prefer the `WidgetTree` component) |
 | **CORE** | `useFill()` | `boolean` | `ctx.fill` — no scope. `true` when the host sized this widget to fill its page-grid tile's reserved height (containers + media fill by default; the author can override per tile). Media-style widgets switch to a `flex: 1` / `height: "100%"` layout; others ignore it. Defaults `false`. |
+| **CORE** | `useContainerWidth()` | `[width, onLayout]` | No context slice, no scope. Measures the width the widget's OWN box has, so it can lay itself out for the space it is in rather than for the screen. Spread the handler onto your outermost primitive. Use it for any widget with a wide form and a narrow one (a table, a toolbar, a row of tiles) — never switch on the device or window width, because a widget in a one-of-three grid cell on desktop has phone-width room and a widget filling a phone page does not. Width is 0 until the first layout: render the WIDE form then. One implementation covers web (react-native-web) and the native export. |
+| **CORE** | `isNarrowWidth(width)` | `boolean` | No context slice, no scope. True when a MEASURED width is below `NARROW_WIDTH_PX` (480) — the one threshold every widget switches at, so a page reflows together rather than raggedly. An unmeasured width (0) is NOT narrow, so nothing flashes through the narrow form on first paint. |
 | **CORE** | `useSectionEmpty(isEmpty)` | `void` | `ctx.section.reportEmpty` — no scope. Declares that the widget has NO content to show, so the host drops its layout slot instead of reserving space (and its parent's `gap`) for it. Returning `null` is not enough: the host wraps every widget in an entrance element, so a widget rendering nothing still leaves an empty box the parent stack gaps around. For a CONDITIONALLY ABSENT section (a per-record child collection with no rows for this record), never to suppress a genuine empty state. Stays mounted while collapsed, so passing `false` brings it back. Authoring surfaces never collapse. No-op on a host that doesn't implement it. |
 | **CORE** | `useRefresh(handler)` | `void` | `ctx.refresh.subscribe` — no scope. Subscribes the handler to the page-level refresh tick (pull-to-refresh on mobile). Handler may return a Promise — the host waits for `allSettled` before clearing the spinner. The three datastore hooks auto-subscribe their own `refetch`; widgets only call this directly to re-run non-datastore work. No-op on a host that doesn't implement refresh. |
 | **CORE** | `useClipboard()` | `{ copy, paste, hasContent }` | platform clipboard (web `navigator.clipboard` / native `expo-clipboard`); rejects with `ClipboardError` — no scope |
@@ -302,6 +305,8 @@ useEffect(() => {
 
 ### What's new in 0.41.0
 
+**New `useContainerWidth()` hook + `isNarrowWidth(width)` / `NARROW_WIDTH_PX` (sc-4399).** A widget can now measure the width of its OWN box and lay itself out for the space it is in. This is the capability that was missing for every widget except Gallery, which had hand-rolled the same `onLayout` measurement for its carousel — that copy is now gone and Gallery reads the hook. It matters because the screen is the wrong question: a widget in a one-of-three grid cell on a desktop page has phone-width room, and a widget filling a phone page does not, so a table-shaped widget that switches on the device is wrong in both directions. `isNarrowWidth` gives every widget one threshold (480) to switch at, so a page of them reflows together instead of raggedly, and an unmeasured width (0) is deliberately not narrow so nothing flashes through its narrow form on first paint. `onLayout` is a react-native primitive callback, so ONE implementation serves the web Player and the exported app. Additive — `CONTRACT.version` bumped to the next minor for two new hooks.
+
 **New `useSectionEmpty(isEmpty)` hook + optional `ctx.section` slice (sc-4416).** A widget can now tell the host it has no content to show, and the host removes its layout slot rather than reserving space for it. This closes a gap that `null` alone could not: the host wraps every widget node in an entrance element, so a widget that rendered nothing still left an empty box its parent stack put `gap` around — a dead band of whitespace exactly where the content would have been. It matters most for a per-record child collection (a policy detail page whose quiz section only exists for policies that have questions): the widget owns the rows, so only the widget can say, and `visibleWhen` cannot reach it because "has related rows" is not a field the record carries. The widget stays MOUNTED while collapsed, so when rows arrive it reports `false` and the section returns on its own — no measurement, no second pass. The slot (`ctx.section.reportEmpty`) is optional and deliberately omitted on authoring surfaces: on the Studio canvas and in the Agent Mode edit preview an empty widget must stay visible and selectable, or an absent section could never be edited. Additive — `CONTRACT.version` bumped to the next minor for a new hook plus a new optional context slice.
 
 **New `useRefresh(handler)` hook + page-level refresh signal (sc-1179).** Pull-to-refresh on the mobile web Player + the native Expo export's `RefreshControl` now fans a page-level refresh tick out to every widget on the page. The three datastore hooks — `useDatastoreQuery`, `useDatastoreRecord`, `useAsset` — auto-subscribe their own `refetch`, so a widget built on those hooks gets refreshed for free. Widgets that need to re-run other work (a third-party `fetch`, a derived calculation) call `useRefresh(async () => { … })` directly. The handler may return a Promise — the host waits on `Promise.allSettled` of every subscriber before clearing the spinner. The slot (`ctx.refresh.subscribe`) is optional on the WidgetContext: a host that does not implement refresh (the Studio canvas preview) simply omits it and the hook collapses to a no-op. Additive — `CONTRACT.version` bumped to the next minor since the contract grew a new hook + a new (optional) context slice.
@@ -615,7 +620,7 @@ import { defineWidget, validateManifest, useDatastoreQuery, Text, View } from "@
 
 - `defineWidget({ manifest, component })` — validates the manifest and produces a widget module the host can register.
 - `validateManifest(m)` / `validatePropertySchema(s)` / `validateProps(schema, props)` — shape validation; no third-party deps.
-- `useDatastoreQuery`, `useDatastoreRecord`, `useDatastoreSchema`, `useDatastoreMutation`, `useDirectory`, `useUsers`, `useGroups`, `useRecordPermissions`, `useAsset`, `useWidgetEvent`, `usePayments`, `useSendNotification`, `useTheme`, `useI18n`, `useUser`, `useNavigation`, `useRouteParams`, `usePageContext`, `useChildRenderer`, `useClipboard`, `useToast` — hooks that read from the host-provided `WidgetContext` (or, for `useClipboard`, the platform clipboard API directly). `useDirectory(query?)` returns `{ users, loading, error, refetch }` (each user `{ id, name, role }`) and requires the `directory.read:users` scope. `useUsers(query?)` returns `{ users, loading, error, refetch, invite, deactivate, reactivate, remove }` and requires `users.read:*` (mutations also need `users.write:*`); rejections are a `DirectoryError`. `useGroups(query?)` returns `{ groups, loading, error, refetch, create, remove, addMember, removeMember }` and requires `groups.read:*` (mutations also need `groups.write:*`). `usePayments()` returns `{ requestPayment, getPayment }` and requires the `payments.charge:appUser` scope; `requestPayment(...)` rejects with a `PaymentError`. `useSendNotification()` returns `{ send, sending, error }` and requires the `notifications.send:appUser` scope; `send({ recipient_user_id, title, body, link?, payload? })` notifies one app user in the same workspace (cross-workspace `recipient_user_id` is rejected), must be called from an event handler rather than render, and rejects with a `NotificationError`. `useUser()` returns the active end-user identity `{ id, email, displayName, roles, groupIds }` (camelCase — the host-built context object, not a wire payload; `id` is `null` for anonymous / preview). `useNavigation()` returns `{ goTo, goBack, push, replace, back, currentRoute }` for internal page navigation — for external URLs use the `Linking` primitive (`Linking.openURL(url)`). `useRouteParams()` returns the current route's params object (`currentRoute.params`) — the flat master→detail accessor; read a param off it (e.g. `recordId`), never call it. `useDatastoreRecord(tableId, recordId)` returns `{ data, loading, error, refetch }` for a single record (data is one row or null). `useDatastoreSchema(tableId)` returns `{ schema, loading, error, refetch }` where `schema` is `{ id, name, columns: [{ id, name, data_type, required, relation_type, target_table_id, is_identification }] }` (structure only, no row data; snake_case verbatim) — use it to resolve a stored `columnId` to its column type at runtime; requires the `datastore.read:<table>` scope. `useAsset(fileId)` returns `{ url, file, loading, error, refetch }` — the `url` is an absolute URL composed against the host's API base. `useChildRenderer()` returns `{ renderNode(node) }` — container widgets call it to render arbitrary child page-tree nodes (prefer the `WidgetTree` component for the common case).
+- `useDatastoreQuery`, `useDatastoreRecord`, `useDatastoreSchema`, `useDatastoreMutation`, `useDirectory`, `useUsers`, `useGroups`, `useRecordPermissions`, `useAsset`, `useWidgetEvent`, `useWidgetInput`, `usePayments`, `useSendNotification`, `useTheme`, `useI18n`, `useUser`, `useNavigation`, `useRouteParams`, `usePageContext`, `useChildRenderer`, `useClipboard`, `useToast` — hooks that read from the host-provided `WidgetContext` (or, for `useClipboard`, the platform clipboard API directly). `useDirectory(query?)` returns `{ users, loading, error, refetch }` (each user `{ id, name, role }`) and requires the `directory.read:users` scope. `useUsers(query?)` returns `{ users, loading, error, refetch, invite, deactivate, reactivate, remove }` and requires `users.read:*` (mutations also need `users.write:*`); rejections are a `DirectoryError`. `useGroups(query?)` returns `{ groups, loading, error, refetch, create, remove, addMember, removeMember }` and requires `groups.read:*` (mutations also need `groups.write:*`). `usePayments()` returns `{ requestPayment, getPayment }` and requires the `payments.charge:appUser` scope; `requestPayment(...)` rejects with a `PaymentError`. `useSendNotification()` returns `{ send, sending, error }` and requires the `notifications.send:appUser` scope; `send({ recipient_user_id, title, body, link?, payload? })` notifies one app user in the same workspace (cross-workspace `recipient_user_id` is rejected), must be called from an event handler rather than render, and rejects with a `NotificationError`. `useUser()` returns the active end-user identity `{ id, email, displayName, roles, groupIds }` (camelCase — the host-built context object, not a wire payload; `id` is `null` for anonymous / preview). `useNavigation()` returns `{ goTo, goBack, push, replace, back, currentRoute }` for internal page navigation — for external URLs use the `Linking` primitive (`Linking.openURL(url)`). `useRouteParams()` returns the current route's params object (`currentRoute.params`) — the flat master→detail accessor; read a param off it (e.g. `recordId`), never call it. `useDatastoreRecord(tableId, recordId)` returns `{ data, loading, error, refetch }` for a single record (data is one row or null). `useDatastoreSchema(tableId)` returns `{ schema, loading, error, refetch }` where `schema` is `{ id, name, columns: [{ id, name, data_type, required, relation_type, target_table_id, is_identification }] }` (structure only, no row data; snake_case verbatim) — use it to resolve a stored `columnId` to its column type at runtime; requires the `datastore.read:<table>` scope. `useAsset(fileId)` returns `{ url, file, loading, error, refetch }` — the `url` is an absolute URL composed against the host's API base. `useChildRenderer()` returns `{ renderNode(node) }` — container widgets call it to render arbitrary child page-tree nodes (prefer the `WidgetTree` component for the common case). `useWidgetInput(inputName)` returns the latest payload a sibling widget published on the event the page author wired to this widget's declared `inputs` entry (`undefined` when unwired or not yet published).
 - `WidgetTree({ node })` — component that renders an author-authored child node through the host's renderer; used by Tabs / Card / custom containers to host arbitrary child widgets.
 - `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.
 - `WidgetContextProvider` — React context provider that the host (Studio, Player, exported app) wraps widgets with.

package/dist/container-width.js

@@ -0,0 +1,28 @@
+// sc-4399 — the narrow-form threshold, in its own dependency-free module.
+//
+// Deliberately NOT in hooks.js: that file's test harnesses load it through a
+// hand-rolled transform that only understands `export function`, so an
+// `export const` there breaks every hooks test at once. Keeping the constant
+// here also means a consumer that just wants the number pays no React import.
+//
+// `useContainerWidth` itself stays in hooks.js, where React is already
+// imported — it is the hook that measures; these two only classify.
+
+/**
+ * The width below which a widget should adopt its narrow form — a table
+ * becomes stacked label/value blocks, a toolbar wraps. ONE number so a page of
+ * widgets reflows together instead of raggedly.
+ */
+export const NARROW_WIDTH_PX = 480;
+
+/**
+ * True when a MEASURED width is below the threshold.
+ *
+ * An unmeasured width (0, before the first `onLayout`) is deliberately NOT
+ * narrow: the wide rendering is the historical one, so a widget that never
+ * lays out is unchanged, and no widget flashes through its narrow form on
+ * first paint.
+ */
+export function isNarrowWidth(width) {
+  return typeof width === "number" && width > 0 && width < NARROW_WIDTH_PX;
+}

package/dist/contract.cjs

@@ -226,6 +226,17 @@ const THEME_COMPONENTS = Object.freeze({
   }),
 });
 
+// sc-4505 — the value types a widget event payload field may declare. Narrower
+// than propertySchema VALID_TYPES on purpose: a payload is DATA that crosses to
+// the native export, so it is the JSON-serializable set, not the editor set.
+const PAYLOAD_VALUE_TYPES = Object.freeze([
+  "string",
+  "number",
+  "boolean",
+  "object",
+  "array",
+]);
+
 const HOOKS = [
   {
     name: "useTheme",
@@ -358,6 +369,45 @@ const HOOKS = [
     requiredContextSlice: ["refresh.subscribe"],
     scopes: null,
   },
+  {
+    name: "useContainerWidth",
+    signature: "useContainerWidth()",
+    description:
+      "Measure the width the widget's OWN box has, so it can lay itself out " +
+      "for the space it is in rather than for the screen. Returns " +
+      "`[width, onLayout]`; spread the handler onto the widget's outermost " +
+      "primitive. A widget in a 1-of-3 grid cell on a desktop page has " +
+      "phone-width room while a widget filling a phone page does not, and the " +
+      "window width answers neither question — this is why a table-shaped " +
+      "widget must not switch on the device. `onLayout` is the react-native " +
+      "callback, so ONE implementation serves the web Player (through " +
+      "react-native-web) and the native export. Before the first layout the " +
+      "width is 0: treat that as \"not yet measured\" and render the wide " +
+      "form. Pair it with `isNarrowWidth(width)` so every widget switches at " +
+      "the same threshold. Takes no host context, so it is safe everywhere " +
+      "including the Studio canvas.",
+    returnShape: {
+      "(returns)": "[number, function]",
+    },
+    requiredContextSlice: [],
+    scopes: null,
+  },
+  {
+    name: "isNarrowWidth",
+    signature: "isNarrowWidth(width)",
+    description:
+      "True when a MEASURED width is below `NARROW_WIDTH_PX` (480), the one " +
+      "threshold at which a widget adopts its narrow form — a table becomes " +
+      "stacked cards, a toolbar wraps. One number so a page of widgets " +
+      "reflows together instead of raggedly. An unmeasured width (0) is " +
+      "deliberately NOT narrow, so a widget that never lays out keeps its " +
+      "historical wide rendering.",
+    returnShape: {
+      "(returns)": "boolean",
+    },
+    requiredContextSlice: [],
+    scopes: null,
+  },
   {
     name: "useSectionEmpty",
     signature: "useSectionEmpty(isEmpty)",
@@ -736,6 +786,18 @@ const HOOKS = [
     requiredContextSlice: ["events.emit"],
     scopes: null,
   },
+  {
+    name: "useWidgetInput",
+    signature: "useWidgetInput(inputName)",
+    returnShape: {
+      value:
+        "The latest payload published on the sibling event this input is " +
+        "wired to, or undefined until the producer has published. The hook " +
+        "returns the value itself, not a wrapper.",
+    },
+    requiredContextSlice: ["inputs.subscribe"],
+    scopes: null,
+  },
   {
     name: "usePayments",
     signature: "usePayments()",
@@ -1313,7 +1375,25 @@ const MANIFEST_SCHEMA = {
   events: {
     type: "object[]",
     required: true,
-    description: "Declared events. Each entry { name, payloadSchema? }.",
+    description:
+      "Declared events the widget publishes. Each entry { name, description?, " +
+      "payloadSchema? }. payloadSchema is a FLAT map of payload field name to " +
+      "{ type, label? } — the SAME shape as propertySchema, NOT JSON Schema — " +
+      "where type is one of string, number, boolean, object, array. The payload reaches " +
+      "any sibling widget on the page whose inputs entry the page author wired " +
+      "to this event.",
+    default: [],
+  },
+  inputs: {
+    type: "object[]",
+    required: false,
+    description:
+      "Optional. Values this widget CONSUMES from a sibling widget on the same " +
+      "page. Each entry { name, description?, schema? }; schema is the same flat " +
+      "{ field: { type, label? } } map as events[].payloadSchema. The page author " +
+      "wires each input to ONE sibling widget event; the widget reads the latest " +
+      "published payload with useWidgetInput(name). An unwired input reads " +
+      "undefined, so a widget must always render a sensible default.",
     default: [],
   },
   datastoreTemplate: {
@@ -1481,6 +1561,18 @@ const WIDGET_CONTEXT_SHAPE = {
     required: true,
     fields: { emit: "function" },
   },
+  inputs: {
+    description:
+      "{ get(name), subscribe(name, handler) } — the page-scoped input wiring " +
+      "ALREADY RESOLVED for this widget instance, so widget code never sees node " +
+      "ids. get() returns the retained value (undefined when unwired); " +
+      "subscribe() returns an unsubscribe function. The host MUST keep this " +
+      "slice referentially STABLE for a given set of author bindings — " +
+      "useWidgetInput depends on the reference to decide when to resubscribe. " +
+      "Backs useWidgetInput().",
+    required: true,
+    fields: { get: "function", subscribe: "function" },
+  },
   payments: {
     description:
       "Injected @colixsystems/payments-client instance (REQ-BILL-07-WIDGETPAY). { requestPayment(body) -> Promise<{ id, status }>, getPayment(id) -> Promise<payment> }; wire is snake_case (amount_cents, return_path). Backs usePayments(); requires the payments.charge:appUser scope. The host opens hosted Checkout itself — same-tab on web, in-app browser on native (or auto-confirms under the mock provider); the charge settles to the workspace owner.",
@@ -2406,7 +2498,15 @@ const CONTRACT = deepFreeze({
   //    public endpoint instead, which skips the cache, the metering and the
   //    workspace's provider. Publishing the host list here keeps the linter,
   //    the Developer guide and the agent prompt reading one source.
-  version: "1.53.0",
+  // 1.54.0: additive (sc-4399, epic 4395) — `useContainerWidth()` +
+  //    `isNarrowWidth(width)` / `NARROW_WIDTH_PX`. Built-in widgets laid
+  //    themselves out at a fixed size — UserManagement's rows alone carried
+  //    ~800px of minWidth — so a page that reflowed around them still
+  //    overflowed, because the widget inside demanded desktop width. Gallery
+  //    already measured its own box with onLayout; this promotes that one
+  //    pattern to the SDK so custom and marketplace widgets get it too,
+  //    instead of each rolling its own.
+  version: "1.55.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,
@@ -2427,6 +2527,7 @@ const CONTRACT = deepFreeze({
   vettedImports: VETTED_IMPORTS,
   allowedBareImports: ALLOWED_BARE_IMPORTS,
   hostApiUrlPatterns: HOST_API_URL_PATTERNS,
+  payloadValueTypes: PAYLOAD_VALUE_TYPES,
   translationApiHosts: TRANSLATION_API_HOSTS,
 });
 

package/dist/contract.js

@@ -226,6 +226,17 @@ const THEME_COMPONENTS = Object.freeze({
   }),
 });
 
+// sc-4505 — the value types a widget event payload field may declare. Narrower
+// than propertySchema VALID_TYPES on purpose: a payload is DATA that crosses to
+// the native export, so it is the JSON-serializable set, not the editor set.
+const PAYLOAD_VALUE_TYPES = Object.freeze([
+  "string",
+  "number",
+  "boolean",
+  "object",
+  "array",
+]);
+
 const HOOKS = [
   {
     name: "useTheme",
@@ -358,6 +369,45 @@ const HOOKS = [
     requiredContextSlice: ["refresh.subscribe"],
     scopes: null,
   },
+  {
+    name: "useContainerWidth",
+    signature: "useContainerWidth()",
+    description:
+      "Measure the width the widget's OWN box has, so it can lay itself out " +
+      "for the space it is in rather than for the screen. Returns " +
+      "`[width, onLayout]`; spread the handler onto the widget's outermost " +
+      "primitive. A widget in a 1-of-3 grid cell on a desktop page has " +
+      "phone-width room while a widget filling a phone page does not, and the " +
+      "window width answers neither question — this is why a table-shaped " +
+      "widget must not switch on the device. `onLayout` is the react-native " +
+      "callback, so ONE implementation serves the web Player (through " +
+      "react-native-web) and the native export. Before the first layout the " +
+      "width is 0: treat that as \"not yet measured\" and render the wide " +
+      "form. Pair it with `isNarrowWidth(width)` so every widget switches at " +
+      "the same threshold. Takes no host context, so it is safe everywhere " +
+      "including the Studio canvas.",
+    returnShape: {
+      "(returns)": "[number, function]",
+    },
+    requiredContextSlice: [],
+    scopes: null,
+  },
+  {
+    name: "isNarrowWidth",
+    signature: "isNarrowWidth(width)",
+    description:
+      "True when a MEASURED width is below `NARROW_WIDTH_PX` (480), the one " +
+      "threshold at which a widget adopts its narrow form — a table becomes " +
+      "stacked cards, a toolbar wraps. One number so a page of widgets " +
+      "reflows together instead of raggedly. An unmeasured width (0) is " +
+      "deliberately NOT narrow, so a widget that never lays out keeps its " +
+      "historical wide rendering.",
+    returnShape: {
+      "(returns)": "boolean",
+    },
+    requiredContextSlice: [],
+    scopes: null,
+  },
   {
     name: "useSectionEmpty",
     signature: "useSectionEmpty(isEmpty)",
@@ -736,6 +786,18 @@ const HOOKS = [
     requiredContextSlice: ["events.emit"],
     scopes: null,
   },
+  {
+    name: "useWidgetInput",
+    signature: "useWidgetInput(inputName)",
+    returnShape: {
+      value:
+        "The latest payload published on the sibling event this input is " +
+        "wired to, or undefined until the producer has published. The hook " +
+        "returns the value itself, not a wrapper.",
+    },
+    requiredContextSlice: ["inputs.subscribe"],
+    scopes: null,
+  },
   {
     name: "usePayments",
     signature: "usePayments()",
@@ -1313,7 +1375,25 @@ const MANIFEST_SCHEMA = {
   events: {
     type: "object[]",
     required: true,
-    description: "Declared events. Each entry { name, payloadSchema? }.",
+    description:
+      "Declared events the widget publishes. Each entry { name, description?, " +
+      "payloadSchema? }. payloadSchema is a FLAT map of payload field name to " +
+      "{ type, label? } — the SAME shape as propertySchema, NOT JSON Schema — " +
+      "where type is one of string, number, boolean, object, array. The payload reaches " +
+      "any sibling widget on the page whose inputs entry the page author wired " +
+      "to this event.",
+    default: [],
+  },
+  inputs: {
+    type: "object[]",
+    required: false,
+    description:
+      "Optional. Values this widget CONSUMES from a sibling widget on the same " +
+      "page. Each entry { name, description?, schema? }; schema is the same flat " +
+      "{ field: { type, label? } } map as events[].payloadSchema. The page author " +
+      "wires each input to ONE sibling widget event; the widget reads the latest " +
+      "published payload with useWidgetInput(name). An unwired input reads " +
+      "undefined, so a widget must always render a sensible default.",
     default: [],
   },
   datastoreTemplate: {
@@ -1481,6 +1561,18 @@ const WIDGET_CONTEXT_SHAPE = {
     required: true,
     fields: { emit: "function" },
   },
+  inputs: {
+    description:
+      "{ get(name), subscribe(name, handler) } — the page-scoped input wiring " +
+      "ALREADY RESOLVED for this widget instance, so widget code never sees node " +
+      "ids. get() returns the retained value (undefined when unwired); " +
+      "subscribe() returns an unsubscribe function. The host MUST keep this " +
+      "slice referentially STABLE for a given set of author bindings — " +
+      "useWidgetInput depends on the reference to decide when to resubscribe. " +
+      "Backs useWidgetInput().",
+    required: true,
+    fields: { get: "function", subscribe: "function" },
+  },
   payments: {
     description:
       "Injected @colixsystems/payments-client instance (REQ-BILL-07-WIDGETPAY). { requestPayment(body) -> Promise<{ id, status }>, getPayment(id) -> Promise<payment> }; wire is snake_case (amount_cents, return_path). Backs usePayments(); requires the payments.charge:appUser scope. The host opens hosted Checkout itself — same-tab on web, in-app browser on native (or auto-confirms under the mock provider); the charge settles to the workspace owner.",
@@ -2406,7 +2498,15 @@ const CONTRACT = deepFreeze({
   //    public endpoint instead, which skips the cache, the metering and the
   //    workspace's provider. Publishing the host list here keeps the linter,
   //    the Developer guide and the agent prompt reading one source.
-  version: "1.53.0",
+  // 1.54.0: additive (sc-4399, epic 4395) — `useContainerWidth()` +
+  //    `isNarrowWidth(width)` / `NARROW_WIDTH_PX`. Built-in widgets laid
+  //    themselves out at a fixed size — UserManagement's rows alone carried
+  //    ~800px of minWidth — so a page that reflowed around them still
+  //    overflowed, because the widget inside demanded desktop width. Gallery
+  //    already measured its own box with onLayout; this promotes that one
+  //    pattern to the SDK so custom and marketplace widgets get it too,
+  //    instead of each rolling its own.
+  version: "1.55.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,
@@ -2427,6 +2527,7 @@ const CONTRACT = deepFreeze({
   vettedImports: VETTED_IMPORTS,
   allowedBareImports: ALLOWED_BARE_IMPORTS,
   hostApiUrlPatterns: HOST_API_URL_PATTERNS,
+  payloadValueTypes: PAYLOAD_VALUE_TYPES,
   translationApiHosts: TRANSLATION_API_HOSTS,
 });
 

package/dist/hooks.js

@@ -80,6 +80,55 @@ export function useWidgetEvent(name) {
   return useCallback((payload) => ctx.events.emit(name, payload), [ctx, name]);
 }
 
+/**
+ * sc-4505 — read a value published by ANOTHER widget on the same page.
+ *
+ * The page author wires this widget's manifest-declared `inputs` entry to one
+ * sibling widget's declared event, so widget code names only its OWN input and
+ * never learns which widget feeds it:
+ *
+ *   const period = useWidgetInput("period");   // { month: "2027-02" } | undefined
+ *
+ * The channel RETAINS the last published payload, so a widget that mounts after
+ * the producer published (a tab switch, a lazily rendered section) still reads
+ * it. An input the author has not wired — and one whose producer has not
+ * published yet — reads `undefined`, so a widget must always render a sensible
+ * default rather than an empty state.
+ *
+ * The value is page-scoped and ephemeral: it is gone once the page unmounts.
+ * For state that must survive navigation read `useRouteParams()`; for state
+ * that must persist, write it to the datastore.
+ */
+export function useWidgetInput(inputName) {
+  const ctx = useWidgetContextOrThrow("useWidgetInput");
+  // The host keeps `ctx.inputs` referentially stable for a given set of author
+  // bindings (CONTRACT.widgetContextShape.inputs), so depending on it here
+  // resubscribes when — and only when — the wiring actually changes.
+  const inputs = ctx.inputs;
+  const [value, setValue] = useState(() => readInput(inputs, inputName));
+
+  useEffect(() => {
+    if (!inputs || typeof inputs.subscribe !== "function") {
+      setValue(undefined);
+      return undefined;
+    }
+    // The producer may have published between the initial render and this
+    // effect, so re-read rather than waiting for the next publish.
+    setValue(readInput(inputs, inputName));
+    // `() => next` so a payload that is itself a function can never be
+    // mistaken for a React state updater.
+    return inputs.subscribe(inputName, (next) => setValue(() => next));
+  }, [inputs, inputName]);
+
+  return value;
+}
+
+function readInput(inputs, inputName) {
+  return inputs && typeof inputs.get === "function"
+    ? inputs.get(inputName)
+    : undefined;
+}
+
 /**
  * Returns the host-provided theme tokens. The host guarantees every field
  * documented in CONTRACT.themeTokens is present (defaults merged with
@@ -289,6 +338,38 @@ export function useSectionEmpty(isEmpty) {
   }, [empty]);
 }
 
+/**
+ * sc-4399 — measure the width the widget's own box actually has, so it can lay
+ * itself out for the space it is in rather than for the screen. A widget in a
+ * 1-of-3 grid cell on a desktop page has phone-width room; a widget filling a
+ * phone page does not. The window width answers neither question.
+ *
+ * Spread the returned handler onto the widget's outermost primitive:
+ *
+ *   const [width, onLayout] = useContainerWidth();
+ *   return <View onLayout={onLayout}>{isNarrowWidth(width) ? <Cards/> : <Table/>}</View>;
+ *
+ * `onLayout` is the react-native primitive callback, so ONE implementation
+ * serves the web Player (through react-native-web) and the native export.
+ * Before the first layout the width is 0 — treat that as "not yet measured"
+ * and render the wide form, which is what `isNarrowWidth`
+ * (./container-width.js) does.
+ *
+ * Takes no context, so it is safe on every host including the Studio canvas.
+ */
+export function useContainerWidth() {
+  const [width, setWidth] = useState(0);
+  const onLayout = useCallback((event) => {
+    const next =
+      event && event.nativeEvent && event.nativeEvent.layout
+        ? event.nativeEvent.layout.width
+        : undefined;
+    if (typeof next !== "number" || !(next > 0)) return;
+    setWidth((prev) => (prev === next ? prev : next));
+  }, []);
+  return [width, onLayout];
+}
+
 /**
  * Returns the host-provided navigation surface:
  *   `{ goTo, goBack, push, replace, back, currentRoute }`.

package/dist/index.d.ts

@@ -124,6 +124,17 @@ export interface WidgetEventDescriptor {
   payloadSchema?: WidgetPropertySchema;
 }
 
+/**
+ * A value the widget CONSUMES from a sibling widget on the same page. The page
+ * author wires each input to one sibling event; the widget reads the latest
+ * published payload with `useWidgetInput(name)`.
+ */
+export interface WidgetInputDescriptor {
+  name: string;
+  description?: string;
+  schema?: WidgetPropertySchema;
+}
+
 /**
  * Optional datastore template a widget can ship in its manifest. When the
  * tenant installs the widget, every declared table is created in their
@@ -249,6 +260,11 @@ export interface WidgetManifest {
    */
   styleSchema?: WidgetPropertySchema;
   events: WidgetEventDescriptor[];
+  /**
+   * Optional (sc-4505). Values this widget reads from a sibling widget on the
+   * same page, wired by the page author. Read each with `useWidgetInput(name)`.
+   */
+  inputs?: WidgetInputDescriptor[];
   /**
    * Optional datastore template seeded into the tenant's workspace when
    * the widget is installed. The author wires the resulting tables into
@@ -703,6 +719,13 @@ export function useDirectory(query?: DirectoryQuery): DirectoryResult;
 
 export function useWidgetEvent(name: string): (payload?: unknown) => void;
 
+/**
+ * Reads the latest payload published on the sibling event this widget input is
+ * wired to. `undefined` until the producer publishes, and for an unwired input
+ * — so always render a sensible default. Page-scoped and ephemeral.
+ */
+export function useWidgetInput(inputName: string): unknown;
+
 /**
  * Arguments for `usePayments().requestPayment(...)`. snake_case VERBATIM —
  * this is the wire contract (REQ-GEN-09). `amount_cents` is the charge in the
@@ -1110,6 +1133,34 @@ export function useRefresh(
  */
 export function useSectionEmpty(isEmpty: boolean): void;
 
+/** The layout event a react-native primitive passes to `onLayout`. */
+export interface WidgetLayoutEvent {
+  nativeEvent: { layout: { width: number; height: number; x: number; y: number } };
+}
+
+/**
+ * sc-4399 — measure the width the widget's OWN box has, so it can lay itself
+ * out for the space it is in rather than for the screen. Spread the returned
+ * handler onto the widget's outermost primitive; ONE implementation serves the
+ * web Player (via react-native-web) and the native export. The width is 0
+ * before the first layout — treat that as "not yet measured" and render the
+ * wide form, which is what `isNarrowWidth` does.
+ */
+export function useContainerWidth(): [
+  number,
+  (event: WidgetLayoutEvent) => void,
+];
+
+/** The width below which a widget should adopt its narrow form (480). */
+export const NARROW_WIDTH_PX: number;
+
+/**
+ * True when a MEASURED width is below `NARROW_WIDTH_PX`. An unmeasured width
+ * (0) is deliberately NOT narrow, so a widget that never lays out keeps its
+ * historical wide rendering.
+ */
+export function isNarrowWidth(width: number): boolean;
+
 /** Pass-through options for `useGeolocation().getCurrentPosition(...)`. */
 export interface GeolocationOptions {
   enableHighAccuracy?: boolean;

package/dist/index.js

@@ -36,6 +36,7 @@ export {
   useRecordPermissions,
   useDatastoreSubscription,
   useWidgetEvent,
+  useWidgetInput,
   usePayments,
   useSendNotification,
   useTheme,
@@ -51,10 +52,12 @@ export {
   useChildRenderer,
   useRefresh,
   useSectionEmpty,
+  useContainerWidth,
   useGeolocation,
   GeolocationError,
   WidgetTree,
 } from "./hooks.js";
+export { isNarrowWidth, NARROW_WIDTH_PX } from "./container-width.js";
 // REQ-WSDK-PLATFORM §6 — Tier A hooks. Each ships in a per-platform file
 // (./clipboard.js / .native.js, ./toast.js / .native.js); index.js picks
 // the web variant and index.native.js picks the native variant.

package/dist/index.native.js

@@ -36,6 +36,7 @@ export {
   useRecordPermissions,
   useDatastoreSubscription,
   useWidgetEvent,
+  useWidgetInput,
   usePayments,
   useSendNotification,
   useTheme,
@@ -51,10 +52,12 @@ export {
   useChildRenderer,
   useRefresh,
   useSectionEmpty,
+  useContainerWidth,
   useGeolocation,
   GeolocationError,
   WidgetTree,
 } from "./hooks.js";
+export { isNarrowWidth, NARROW_WIDTH_PX } from "./container-width.js";
 // REQ-WSDK-PLATFORM §6 — Tier A hooks (native variants).
 export { useClipboard, ClipboardError } from "./clipboard.native.js";
 export { useToast } from "./toast.native.js";

package/dist/manifest.cjs

@@ -4,6 +4,35 @@
 // re-exports the same functions defined here so there is exactly one
 // implementation.
 
+const { CONTRACT } = require("./contract.cjs");
+
+const PAYLOAD_VALUE_TYPES = CONTRACT.payloadValueTypes;
+
+// sc-4505 — a payload / input field map: { <field>: { type, label? } }. This is
+// the FLAT propertySchema-style shape index.d.ts already types, NOT JSON Schema.
+// `type` is restricted to the JSON-serializable set because a payload crosses
+// to the exported Expo app (CLAUDE.md §8).
+function validatePayloadFieldMap(schema, label, errors) {
+  if (schema === null || typeof schema !== "object" || Array.isArray(schema)) {
+    errors.push(`${label} must be an object mapping field name to { type }`);
+    return;
+  }
+  for (const [field, def] of Object.entries(schema)) {
+    if (def === null || typeof def !== "object" || Array.isArray(def)) {
+      errors.push(`${label}.${field} must be an object`);
+      continue;
+    }
+    if (!PAYLOAD_VALUE_TYPES.includes(def.type)) {
+      errors.push(
+        `${label}.${field}.type must be one of ${PAYLOAD_VALUE_TYPES.join(", ")}`,
+      );
+    }
+    if (def.label !== undefined && typeof def.label !== "string") {
+      errors.push(`${label}.${field}.label must be a string when present`);
+    }
+  }
+}
+
 const VALID_CATEGORIES = new Set([
   "input", "display", "layout", "data", "media", "communication", "administration", "custom",
   "INPUT", "DISPLAY", "LAYOUT", "DATA", "MEDIA", "COMMUNICATION", "ADMINISTRATION", "CUSTOM",
@@ -275,6 +304,52 @@ function validateManifest(m) {
       }
       if (!isNonEmptyString(e.name)) {
         errors.push("manifest.events[].name must be a non-empty string");
+        continue;
+      }
+      if (e.description !== undefined && !isNonEmptyString(e.description)) {
+        errors.push(
+          `manifest.events[${e.name}].description must be a non-empty string when present`,
+        );
+      }
+      if (e.payloadSchema !== undefined) {
+        validatePayloadFieldMap(
+          e.payloadSchema,
+          `manifest.events[${e.name}].payloadSchema`,
+          errors,
+        );
+      }
+    }
+  }
+
+  // sc-4505 — `inputs` is optional (additive). Declares the values this widget
+  // CONSUMES from a sibling widget event, wired by the page author.
+  if (manifest.inputs !== undefined) {
+    if (!Array.isArray(manifest.inputs)) {
+      errors.push("manifest.inputs must be an array (use [] for none)");
+    } else {
+      const seenInputs = new Set();
+      for (const i of manifest.inputs) {
+        if (i === null || typeof i !== "object" || Array.isArray(i)) {
+          errors.push("manifest.inputs entries must be objects");
+          break;
+        }
+        if (!isNonEmptyString(i.name)) {
+          errors.push("manifest.inputs[].name must be a non-empty string");
+          continue;
+        }
+        // A duplicate name would make the author-facing wiring ambiguous.
+        if (seenInputs.has(i.name)) {
+          errors.push(`manifest.inputs[].name "${i.name}" is declared twice`);
+        }
+        seenInputs.add(i.name);
+        if (i.description !== undefined && !isNonEmptyString(i.description)) {
+          errors.push(
+            `manifest.inputs[${i.name}].description must be a non-empty string when present`,
+          );
+        }
+        if (i.schema !== undefined) {
+          validatePayloadFieldMap(i.schema, `manifest.inputs[${i.name}].schema`, errors);
+        }
       }
     }
   }

package/dist/manifest.js

@@ -4,6 +4,35 @@
 // re-exports the same functions defined here so there is exactly one
 // implementation.
 
+import { CONTRACT } from "./contract.js";
+
+const PAYLOAD_VALUE_TYPES = CONTRACT.payloadValueTypes;
+
+// sc-4505 — a payload / input field map: { <field>: { type, label? } }. This is
+// the FLAT propertySchema-style shape index.d.ts already types, NOT JSON Schema.
+// `type` is restricted to the JSON-serializable set because a payload crosses
+// to the exported Expo app (CLAUDE.md §8).
+function validatePayloadFieldMap(schema, label, errors) {
+  if (schema === null || typeof schema !== "object" || Array.isArray(schema)) {
+    errors.push(`${label} must be an object mapping field name to { type }`);
+    return;
+  }
+  for (const [field, def] of Object.entries(schema)) {
+    if (def === null || typeof def !== "object" || Array.isArray(def)) {
+      errors.push(`${label}.${field} must be an object`);
+      continue;
+    }
+    if (!PAYLOAD_VALUE_TYPES.includes(def.type)) {
+      errors.push(
+        `${label}.${field}.type must be one of ${PAYLOAD_VALUE_TYPES.join(", ")}`,
+      );
+    }
+    if (def.label !== undefined && typeof def.label !== "string") {
+      errors.push(`${label}.${field}.label must be a string when present`);
+    }
+  }
+}
+
 const VALID_CATEGORIES = new Set([
   "input", "display", "layout", "data", "media", "communication", "administration", "custom",
   "INPUT", "DISPLAY", "LAYOUT", "DATA", "MEDIA", "COMMUNICATION", "ADMINISTRATION", "CUSTOM",
@@ -275,6 +304,52 @@ function validateManifest(m) {
       }
       if (!isNonEmptyString(e.name)) {
         errors.push("manifest.events[].name must be a non-empty string");
+        continue;
+      }
+      if (e.description !== undefined && !isNonEmptyString(e.description)) {
+        errors.push(
+          `manifest.events[${e.name}].description must be a non-empty string when present`,
+        );
+      }
+      if (e.payloadSchema !== undefined) {
+        validatePayloadFieldMap(
+          e.payloadSchema,
+          `manifest.events[${e.name}].payloadSchema`,
+          errors,
+        );
+      }
+    }
+  }
+
+  // sc-4505 — `inputs` is optional (additive). Declares the values this widget
+  // CONSUMES from a sibling widget event, wired by the page author.
+  if (manifest.inputs !== undefined) {
+    if (!Array.isArray(manifest.inputs)) {
+      errors.push("manifest.inputs must be an array (use [] for none)");
+    } else {
+      const seenInputs = new Set();
+      for (const i of manifest.inputs) {
+        if (i === null || typeof i !== "object" || Array.isArray(i)) {
+          errors.push("manifest.inputs entries must be objects");
+          break;
+        }
+        if (!isNonEmptyString(i.name)) {
+          errors.push("manifest.inputs[].name must be a non-empty string");
+          continue;
+        }
+        // A duplicate name would make the author-facing wiring ambiguous.
+        if (seenInputs.has(i.name)) {
+          errors.push(`manifest.inputs[].name "${i.name}" is declared twice`);
+        }
+        seenInputs.add(i.name);
+        if (i.description !== undefined && !isNonEmptyString(i.description)) {
+          errors.push(
+            `manifest.inputs[${i.name}].description must be a non-empty string when present`,
+          );
+        }
+        if (i.schema !== undefined) {
+          validatePayloadFieldMap(i.schema, `manifest.inputs[${i.name}].schema`, errors);
+        }
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colixsystems/widget-sdk",
-  "version": "0.79.0",
+  "version": "0.81.0",
   "description": "Common widget interface for AppStudio. Implements WidgetManifest, WidgetContext, property schema, and helper hooks.",
   "type": "module",
   "main": "./dist/index.js",