@colixsystems/widget-sdk 0.112.0 → 0.114.0

package/README.md

@@ -17,7 +17,7 @@ The data layer lives in **four separate domain-client packages**, each instantia
 
 | Group | Hook (signature) | Returns | Reads / scope |
 | ----- | ---------------- | ------- | ------------- |
-| **CORE** | `useTheme()` | `{ colors, elevation, spacing, spacingScale, radii, typography, components, widgetStyles }` | `ctx.workspace.theme` — no scope. `elevation` is the shared depth scale (`none / sm / md / lg / xl`) you spread into a style; `colors` includes the accent's quiet tiers (`primarySoft` / `onPrimarySoft` / `primaryStrong`) and `loader`, the spinner colour for your own loading state. `components` is HOST-OWNED (the theme's per-component style tokens); the host has already folded it into your `props.style`, so read `useWidgetStyle()` and ignore this slice. |
+| **CORE** | `useTheme()` | `{ colors, elevation, interaction, spacing, spacingScale, radii, typography, components, widgetStyles }` | `ctx.workspace.theme` — no scope. `elevation` is the shared depth scale (`none / sm / md / lg / xl`) you spread into a style; `colors` includes the accent's quiet tiers (`primarySoft` / `onPrimarySoft` / `primaryStrong`) and `loader`, the spinner colour for your own loading state. `components` is HOST-OWNED (the theme's per-component style tokens); the host has already folded it into your `props.style`, so read `useWidgetStyle()` and ignore this slice. |
 | **CORE** | `useWorkspaceCurrency()` | `{ currency, formatMoney }` | `ctx.workspace.currency` — no scope. The currency this workspace charges its app users in, resolved at RENDER time. Render every price as `formatMoney(minorUnits)` and never write a currency symbol or code into a widget: the owner can change it after the widget ships, and a baked label then contradicts the charge. |
 | **CORE** | `useWidgetStyle()` | `{ [styleField]: value }` | `ctx.props.style` — no scope. The author-set per-widget style values declared in `manifest.styleSchema`; apply each onto whatever element you choose. |
 | **CORE** | `useUser()` | `{ id, email, displayName, roles, groupIds }` | `ctx.user` (host-built context, **camelCase** — not a wire payload; `id` null when anonymous) — no scope |
@@ -37,6 +37,7 @@ The data layer lives in **four separate domain-client packages**, each instantia
 | **CORE** | `useToast()` | `{ showToast }` | `ctx.toast.showToast` — wired by the Player and the Expo export; an authoring preview omits it and the call is a no-op — no scope |
 | **CORE** | `useGeolocation(options?)` | `{ latitude, longitude, accuracy, loading, error, getCurrentPosition }` | `ctx.device.geolocation` — no scope. Capture is IMPERATIVE: call `getCurrentPosition()` from a user gesture (a tap), never on mount. Resolves to `{ latitude, longitude, accuracy }`; rejects with `GeolocationError` (`.code` in `PERMISSION_DENIED \| UNAVAILABLE \| TIMEOUT \| UNSUPPORTED \| INTERNAL`). Identical on web (`navigator.geolocation`) and the Expo export (`expo-location`). |
 | **CORE** | `useSpeechToText(options?)` | `{ transcript, partial, listening, supported, error, start, stop, abort, reset }` | `ctx.device.speech` — no scope. Dictation with the device's **on-device** recogniser: no audio is uploaded and no AI credit is spent. Capture is IMPERATIVE: call `start()` from a user gesture (a tap), never on mount. `transcript` accumulates finalised speech, `partial` holds the uncommitted guess (needs `options.interimResults`); `stop()` keeps it, `abort()` discards it. Rejects with `SpeechToTextError` (`.code` in `PERMISSION_DENIED \| NO_SPEECH \| LANGUAGE_UNSUPPORTED \| NETWORK \| ABORTED \| UNSUPPORTED \| INTERNAL`). **Gate your mic button on `supported`** — Firefox ships no `SpeechRecognition`. Identical on web (`SpeechRecognition`) and the Expo export (`expo-speech-recognition`). |
+| **CORE** | `useCamera(options?)` | `{ asset, loading, error, supported, capture, pick, reset }` | `ctx.device.camera` — no scope. Take a photo (`capture()`) or choose one (`pick()`). Capture is IMPERATIVE: call from a user gesture (a tap), never on mount. Both resolve a normalised `{ uri, name, mimeType, width, height, size, file }`, or **`null` when the user dismisses the picker** — dismissal is not an error, so no `try/catch` is needed on the happy path. Rejects with `CameraError` (`.code` in `PERMISSION_DENIED \| UNSUPPORTED \| INTERNAL`). `asset.file` is already the right upload part for the host, so `fd.append("file", asset.file)` → `ctx.assets.upload(fd)` is ONE code path on both. **Gate your camera button on `supported`.** Identical on web (file input) and the Expo export (`expo-image-picker`). |
 | **CORE** | `useI18n()` | `{ t, locale }` | `ctx.i18n` — no scope. `t(key)` resolves the widget-namespaced key (`widget.<id>.<key>`, declared in `manifest.translations`) first, then a **predefined shared key** (`shared.<key>`) when `key` is one of the standard strings (`submit`, `cancel`, `save`, `loading`, …), then the raw key. Use a shared key for an identical default string so it translates once and any per-instance `widget.<id>.<key>` override still wins. |
 | **CORE** | `useTranslate()` | `{ translate, translating, error, language, available }` | `ctx.i18n.translate` — no scope. Machine-translates **user-generated content** (record text, file names, API payloads) into the app user's language; `useI18n().t()` is still the answer for your own copy. `translate(str)` → `Promise<string>`, `translate(str[])` → `Promise<string[]>` in ONE request. Target defaults to the app user's language. Cached per session, per pod, and durably per workspace, so repeat text is free. Limits: 50 segments / 5 000 chars each / 20 000 total. Rejects with `TranslateError`; `available` is false where the host cannot translate. |
 | **CORE** | `useStableQuery(buildQuery)` | `T \| undefined` (whatever `buildQuery()` returns) | No context slice, no scope. Keeps `buildQuery()`'s result at a STABLE reference across renders when its (JSON-serialised) content hasn't changed, so `useDatastoreQuery(tableId, useStableQuery(() => ({...})))` replaces a hand-rolled `useMemo` with an easy-to-get-wrong deps array. Never throws: a `buildQuery` that itself throws degrades to a stable `undefined`; a result that can't be diffed (e.g. circular) degrades to "always a new reference". |
@@ -71,6 +72,25 @@ See the design reference for the full architecture: [`docs/architecture/widget-m
 
 `v0.112.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.113.0 (contract 1.86.0)
+
+**New `useCamera()` hook — take a photo or pick one from the device library.** A new CORE hook reading a new `camera` capability on the existing `ctx.device` slice. Returns `{ asset, loading, error, supported, capture, pick, reset }`. Capture is **imperative** — call `capture()` or `pick()` from a user gesture (a `Pressable.onPress`); the browser and the mobile OS gate the permission prompt on a gesture, so it NEVER opens on mount. `options` (`{ allowsEditing, quality }`) pass through to the host. It needs **no manifest scope** and **no `requestedScopes` entry**.
+
+**Dismissing the picker resolves `null`, not an error.** Backing out is the most common outcome, so it is deliberately not a rejection — your happy path needs no `try/catch`. A genuine failure (permission refused, no host broker) rejects with a structured `CameraError` (new named export) carrying a stable `.code` (`PERMISSION_DENIED` / `UNSUPPORTED` / `INTERNAL`).
+
+**One upload path on both hosts.** The resolved asset is normalised to `{ uri, name, mimeType, width, height, size, file }`, where `uri` is directly displayable (`<Image source={{ uri }} />`) and `file` is already the right upload part for the platform — a `File` on web, a `{ uri, name, type }` triple on native. So the same three lines work everywhere:
+
+```js
+const fd = new FormData();
+fd.append("file", asset.file);
+await ctx.assets.upload(fd);
+```
+
+`options` (`{ allowsEditing, quality }`) are **hints**: the Expo export applies both, the web file input applies neither — so never depend on a cropped result or a capped file size. `reset()` clears the asset and releases it (on web that revokes the blob URL, which otherwise leaks for the life of the document). **Gate your camera button on `supported`** — a host that brokers no camera reports `false` rather than throwing. The web Player brokers it via a file input (`capture="environment"` opens the camera on a phone); the Expo export via `expo-image-picker`, whose config plugin declares the camera and photo-library permissions the runtime needs.
+
+Additive — one new hook, one new optional context-slice member; no existing export changed signature.
+
+
 ### What's new in 0.112.0 (contract unchanged at 1.85.0)
 
 **Two linter rules make the styling contract checkable, and `lintStyleWiring` joins the linter export (sc-6455).** Every visual value a widget writes reaches the app's owner through one of exactly two channels — a **theme token** (`useTheme()`), which is the app-wide default and follows a look change, or a **`styleSchema` field** read off `props.style`, which the Studio offers per instance in the widget editor *and* app-wide under **Design → Widget appearance**. A literal reaches neither: it outranks the theme permanently and no control on either surface can move it, so the owner finds a corner of their app they cannot restyle. Until now that rule was documentation only.
@@ -1074,15 +1094,16 @@ A widget that works but looks unfinished is only half done. `useTheme()` is the
 - **Contain and elevate.** Wrap a logical unit in a surface: `colors.surface` + padding + `radii.lg` + `...theme.elevation.sm`. Give it the elevation **or** a `colors.border` hairline, not both — and prefer the elevation, because a hairline-only card reads as a wireframe. `theme.elevation` is a token table you spread into a style (`...theme.elevation.md`), covering `none / sm / md / lg / xl`; never hand-write `shadowOpacity` / `shadowRadius` / `boxShadow`. Use the status roles (`danger / success / warning / info`) for state.
 - **Tint the supporting cast.** `colors.primarySoft` is a tint of the workspace accent over the surface and `colors.onPrimarySoft` is guaranteed readable on it (WCAG AA, on light and dark themes alike). Use the pair for chips, secondary buttons, progress tracks, icon badges and selected rows. One saturated accent moment surrounded by several pale echoes of the same hue is what reads as designed — a row of grey-outlined buttons reads as a form. Never hand-mix a tint with `rgba(...)` or a translucent overlay.
 - **Spend one gradient.** `<Gradient colors={[theme.colors.primary, theme.colors.primaryStrong]} angle={160} style={…}>` is a `View` that paints a gradient behind its children, so it replaces the `View` you'd otherwise give a flat `backgroundColor`. `angle` is CSS degrees (0 = to top, 90 = to right, default 180); text on it uses `colors.onPrimary`. Exactly **one** per widget — on the focal element — and never behind body text. Both hosts render it identically (web paints CSS, native uses `expo-linear-gradient`), so there is no per-platform branching to write; don't import `expo-linear-gradient` yourself and don't write a `backgroundImage` string.
+- **Answer the touch.** Every tappable card, row and list entry lifts while the pointer is over it (web) or it is pressed (touch). One declaration does both: give the Pressable a style FUNCTION and spread `pressableLift` — `<Pressable onPress={open} style={(state) => [styles.card, ...pressableLift(state)]}>`. The lift is a -2px nudge plus one elevation step from `theme.interaction`, with the web transition built in. Never hand-write hover logic or your own pressed shadows, and never fake feedback with `opacity` — a dimmed surface reads as disabling itself.
 - **Size to your container — measure it, don't stretch into it.** The same widget sits in a full-width desktop section (~1400px), a half-width grid cell (~700px) and a phone (~360px), so layout built only from `flex: 1` stretches to fill whatever it is handed — a month calendar ends up with 200px day cells and swallows the page. Measure your own width with `onLayout={(e) => setWidth(e.nativeEvent.layout.width)}` on the root `View` (a React Native primitive, so it behaves identically on both hosts), render nothing size-dependent while `width === 0`, and compute every threshold from the measured value: a widget gets no declared breakpoint prop, but it can always measure. **Cap a repeating cell** rather than giving a grid `flex: 1` — `const cell = Math.max(32, Math.min(Math.floor((usable - gap * (columns - 1)) / columns), 64));`, with a calendar day cell topping out at 56–72px on `aspectRatio: 1`, and the grid given its exact computed width plus `alignSelf: 'center'` when the cap leaves slack. **Split two co-equal surfaces above ~720px measured width** (`flexDirection: width >= 720 ? 'row' : 'column'`, each half `{ flex: 1, minWidth: 0 }`) — a picker beside the form it feeds on a wide canvas, stacked in reading order below it. Never hardcode a width, never put `flex: 1` / `height: '100%'` on a content widget's root, and don't read the screen with `Dimensions` — the screen is not the widget.
 - **Compose forms — pair fields into rows, don't stack one per row.** Put short, related fields side by side (first + last name, city + postal code, expiry + CVC): a row of `{ flexDirection: 'row', flexWrap: 'wrap', gap: theme.spacing.md }` with each field cell `{ flexGrow: 1, flexBasis: 160 }` splits the width on a wide card and wraps to stacked on a narrow phone — the right recipe for field pairs because it needs no measurement (a fixed-width column overflows a phone; when a layout needs a real column count instead of wrapping, measure your width as above). Keep wide fields (email, address, notes) full-width, cap it at two–three per row, group a long form into labelled sections, and label every input above it (not placeholder-only). Give a `multiline` field BOTH a floor and a ceiling (`{ minHeight: 150, maxHeight: 260 }`) so a long value scrolls inside the box instead of growing past its card, and keep the Save / Cancel row in normal flow below the fields, never positioned over them.
-- **Respond to touch.** Give every `Pressable` a pressed state via the function-style `style={({ pressed }) => [base, pressed && { opacity: 0.7 }]}`.
+- **Respond to touch.** Give every `Pressable` the lift via the function-style `style={(state) => [base, ...pressableLift(state)]}` — see "Answer the touch" above. Never dim with `opacity`, which reads as the surface disabling itself.
 - **Drag and drop — show what is being dragged.** A drag where the item stays put reads as broken. Three things change the moment a drag starts: the **drag proxy** (the item lifts and follows the finger — `...theme.elevation.lg`, `{ scale: 1.03 }`, `opacity: 0.9`; for a tall or full-width item drag a compact `primarySoft` pill with its icon + one line of label instead), the **source placeholder** (the vacated slot keeps its height as a quiet `colors.surfaceMuted` block so the list doesn't collapse), and the **drop target** (one slot at a time highlighted with `primarySoft` or a 2px `colors.primary` border). Always animate the release — settle into the new slot, or `Animated.spring(pan, { toValue: { x: 0, y: 0 }, useNativeDriver: false })` back to the origin on cancel. Build it with `Animated` + `PanResponder` from `react-native` (the only mechanism that behaves identically on both hosts) — never HTML5 drag events (`draggable` / `onDragStart` / `dataTransfer` are web-only, and `document` / `window` are banned) — and start the drag from a `GripVertical` grip handle whenever the row is also tappable or sits in a `ScrollView`.
 - **Use icons for clarity.** Pair a `lucide-react-native` icon with its label at a consistent size, coloured from the theme. The label never repeats the icon as a character — with a `Plus` icon the button says "Add item", never "+ Add item" (that renders a doubled plus).
 - **Use imagery deliberately.** Render pictures with the `Image` primitive (`source` takes a URL or `{ uri }`); resolve workspace assets via `useAsset()`. Give every image a sized, `radii`-clipped container so it never renders as a raw rectangle, and never hardcode a credentialed image URL — expose an `image`-type property instead. The frame is your decision, never the picture's: size it for the role (a 40–56 square avatar, a 72–96 square row thumbnail, a `16 / 9` card cover, a 160–240 tall band) and let `resizeMode="cover"` crop the photo into it — photos arrive at every size and ratio, so one left to its own proportions breaks the layout. Keep `contain` for art whose whole subject must stay visible (a logo, a diagram), inside a fixed frame.
 - **Design the empty, loading, and error states.** A blank box on a fresh install reads as broken — show a short helper line when a list is empty, a calm loading line, and a single human sentence in `colors.danger` on error.
 
-**Honest ceilings:** the styling surface is React Native style objects, not full CSS. Gradients come from the `<Gradient>` primitive (not a CSS `linear-gradient` string), depth comes from `theme.elevation` (not arbitrary `box-shadow` stacks), and there are no custom CSS keyframe animations or `transition` strings, no `filter` / `backdrop-filter` / `clip-path` / `mask` / blend modes, and no opacity-faked tints (that's what `primarySoft` is for). Aim for clean, confident, professional polish within those bounds — lifted surfaces, generous corners, one accent moment.
+**Honest ceilings:** the styling surface is React Native style objects, not full CSS. Gradients come from the `<Gradient>` primitive (not a CSS `linear-gradient` string), depth comes from `theme.elevation` (not arbitrary `box-shadow` stacks), and there are no custom CSS keyframe animations or `transition` strings (the hover/press lift comes built into `pressableLift` — never write your own), no `filter` / `backdrop-filter` / `clip-path` / `mask` / blend modes, and no opacity-faked tints (that's what `primarySoft` is for). Aim for clean, confident, professional polish within those bounds — lifted surfaces, generous corners, one accent moment.
 
 ## Managing app users from a widget
 

package/dist/contract.cjs

@@ -45,6 +45,24 @@ const ELEVATION = Object.freeze({
   }),
 });
 
+// sc-6531 (REQ-AI-AGENT-DESIGN-LIFT): the ONE cross-platform interaction
+// vocabulary. A tappable surface answers the pointer over it (web) and the
+// press on it (touch) by LIFTING. `raised` is one elevation step up plus a
+// nudge — the scale above stays the only shadow vocabulary — and is what a
+// widget's own surface wears via `pressableLift`; `translateY` alone is the
+// surface-agnostic nudge a tappable layout REGION gets on both hosts.
+const INTERACTION = Object.freeze({
+  lift: Object.freeze({
+    translateY: -2,
+    raised: Object.freeze({
+      transform: Object.freeze([Object.freeze({ translateY: -2 })]),
+      ...ELEVATION.lg,
+    }),
+    // Web-only smoothing; a touch state change is instant.
+    transitionMs: 150,
+  }),
+});
+
 const DEFAULT_THEME_TOKENS = Object.freeze({
   colors: Object.freeze({
     primary: "#3b82f6",
@@ -76,6 +94,7 @@ const DEFAULT_THEME_TOKENS = Object.freeze({
     info: "#0284c7",
   }),
   elevation: ELEVATION,
+  interaction: INTERACTION,
   spacing: Object.freeze({ xs: 4, sm: 8, md: 16, lg: 24, xl: 32 }),
   // REQ-THEME-LOOK: multiplies every layout spacing value at render. 1 is
   // unchanged, so a theme that never sets it renders exactly as before.
@@ -1576,6 +1595,37 @@ const HOOKS = [
     requiredContextSlice: [],
     scopes: null,
   },
+  // sc-6448 — host-brokered camera capture / photo picking. Optional slice;
+  // the hook reports supported:false rather than throwing at render.
+  {
+    name: "useCamera",
+    signature: "useCamera(options?)",
+    description:
+      "Take a photo or choose one from the device library. Returns { asset, loading, error, supported, capture, pick, reset }. " +
+      "Capture is IMPERATIVE — call capture() or pick() from a user gesture (a tap); the browser and the mobile OS gate the " +
+      "permission prompt on a gesture, so it NEVER opens on mount. Both resolve to a normalised asset " +
+      "{ uri, name, mimeType, width, height, size, file }, or NULL when the user dismisses the picker — dismissal is the " +
+      "common case and is deliberately NOT an error, so no try/catch is needed on the happy path. They reject with a " +
+      "CameraError whose .code is one of PERMISSION_DENIED | UNSUPPORTED | INTERNAL. `asset.file` is already the right " +
+      "upload part for the host (a File on web, { uri, name, type } on native): append it to a FormData as `file` and pass " +
+      "that to ctx.assets.upload(fd) — one code path on both platforms. reset() clears the asset and releases it. Check " +
+      "`supported` before rendering a camera button. options: { allowsEditing, quality } are HINTS the host honours where it " +
+      "can — the Expo export applies both, the web file input applies neither, so never depend on a capped file size or a " +
+      "cropped result. Behaviour is otherwise identical on web (file input) and the Expo export (expo-image-picker).",
+    returnShape: {
+      asset:
+        "{ uri, name, mimeType, width, height, size, file } | null",
+      loading: "boolean",
+      error: "CameraError | null",
+      supported: "boolean  // false when the host brokers no camera",
+      capture:
+        "() => Promise<asset | null>  // null if dismissed; rejects with CameraError",
+      pick: "() => Promise<asset | null>  // null if dismissed; rejects with CameraError",
+      reset: "() => void  // clear the asset + error and release it",
+    },
+    requiredContextSlice: [],
+    scopes: null,
+  },
 ];
 
 // REQ-WSDK-RN-WEB: the SDK exposes the React Native primitive API
@@ -1709,6 +1759,17 @@ const PRIMITIVES = [
     rnComponent: "expo-linear-gradient",
     docsUrl: "https://docs.expo.dev/versions/latest/sdk/linear-gradient/",
   },
+  // sc-6531 (REQ-AI-AGENT-DESIGN-LIFT) — the hover/press lift affordance. A
+  // FUNCTION primitive, not a component: it resolves the interaction tokens per
+  // input, so one declaration answers the pointer on web and the press on
+  // native.
+  {
+    name: "pressableLift",
+    description:
+      "Interaction feedback for a tappable surface. Call it inside a Pressable's style FUNCTION and spread the result: `<Pressable style={(state) => [styles.card, ...pressableLift(state)]}>`. While the pointer hovers the surface (web) or it is pressed (touch), the surface lifts: a -2px nudge plus one elevation step, from `themeTokens.interaction`, with the web transition built in. Give it to EVERY tappable card, row and list entry; never hand-write hover logic, `transition` strings, or your own pressed shadows.",
+    rnComponent: null,
+    docsUrl: null,
+  },
 ];
 
 const CATEGORIES = [
@@ -2168,14 +2229,18 @@ const WIDGET_CONTEXT_SHAPE = {
     description:
       "Optional host-brokered device capabilities. " +
       "{ geolocation: { getCurrentPosition(options?) -> Promise<{ latitude, longitude, accuracy }> }, " +
-      "speech: { isSupported() -> boolean, start(options, { onResult, onError, onEnd }) -> Promise<{ stop(), abort() }> } }. " +
-      "Backs useGeolocation() and useSpeechToText(). The web Player brokers them via navigator.geolocation and " +
-      "window.SpeechRecognition; the Expo export via expo-location and expo-speech-recognition. " +
+      "speech: { isSupported() -> boolean, start(options, { onResult, onError, onEnd }) -> Promise<{ stop(), abort() }> }, " +
+      "camera: { isSupported() -> boolean, capture(options?) -> Promise<asset | null>, pick(options?) -> Promise<asset | null> } }. " +
+      "Backs useGeolocation(), useSpeechToText() and useCamera(). The web Player brokers them via navigator.geolocation, " +
+      "window.SpeechRecognition and a file input; the Expo export via expo-location, expo-speech-recognition and " +
+      "expo-image-picker. " +
       "getCurrentPosition rejects with a GeolocationError (.code PERMISSION_DENIED | UNAVAILABLE | TIMEOUT | UNSUPPORTED | INTERNAL). " +
       "speech.start streams { transcript, isFinal } to onResult and runs ON DEVICE — it uploads no audio and spends no AI credit; " +
-      "its onError carries the Web Speech error vocabulary (not-allowed | no-speech | language-not-supported | network | aborted).",
+      "its onError carries the Web Speech error vocabulary (not-allowed | no-speech | language-not-supported | network | aborted). " +
+      "camera.capture/pick resolve a normalised { uri, name, mimeType, width, height, size, file, release? } or NULL when the " +
+      "user dismisses the picker, and reject with a CameraError (.code PERMISSION_DENIED | UNSUPPORTED | INTERNAL).",
     required: false,
-    fields: { geolocation: "object", speech: "object" },
+    fields: { geolocation: "object", speech: "object", camera: "object" },
   },
 };
 
@@ -3386,7 +3451,24 @@ const CONTRACT = deepFreeze({
   //    byte-identically. `mapSpacing` pushes each side through the responsive
   //    and theme scaling the scalar already got; `isZeroSpacing` lets each box
   //    property keep its own zero policy.
-  version: "1.85.0",
+  //
+  // 1.86.0: additive (sc-6448) — new `useCamera()` hook + a `camera` member on
+  //    the optional `device` host slice. Takes a photo or picks one from the
+  //    library, resolving a normalised asset whose `file` is already the right
+  //    upload part for the host (a File on web, `{ uri, name, type }` on
+  //    native), so one code path feeds `ctx.assets.upload`. Host-brokered
+  //    rather than a vetted import — the same reasoning as `speech`: widgets
+  //    never import the native module, so it stays out of widget bundles.
+  //    This supersedes the `expo-camera` deferral in
+  //    docs/design/req-widget-sdk-cross-platform-primitives.md, which was
+  //    about vetting a full camera surface (permissions, multi-step UX, frame
+  //    processing) as a widget import — none of which this adds.
+  // 1.87.0: additive (sc-6531) — `themeTokens.interaction`: the interaction-
+  // state vocabulary (`lift.raised`, `lift.translateY`, `lift.transitionMs`),
+  // plus the `pressableLift` primitive that resolves it per input — hover on
+  // web, press on native. Tappable layout containers and widget surfaces lift
+  // from this ONE table.
+  version: "1.87.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,

package/dist/contract.js

@@ -45,6 +45,24 @@ const ELEVATION = Object.freeze({
   }),
 });
 
+// sc-6531 (REQ-AI-AGENT-DESIGN-LIFT): the ONE cross-platform interaction
+// vocabulary. A tappable surface answers the pointer over it (web) and the
+// press on it (touch) by LIFTING. `raised` is one elevation step up plus a
+// nudge — the scale above stays the only shadow vocabulary — and is what a
+// widget's own surface wears via `pressableLift`; `translateY` alone is the
+// surface-agnostic nudge a tappable layout REGION gets on both hosts.
+const INTERACTION = Object.freeze({
+  lift: Object.freeze({
+    translateY: -2,
+    raised: Object.freeze({
+      transform: Object.freeze([Object.freeze({ translateY: -2 })]),
+      ...ELEVATION.lg,
+    }),
+    // Web-only smoothing; a touch state change is instant.
+    transitionMs: 150,
+  }),
+});
+
 const DEFAULT_THEME_TOKENS = Object.freeze({
   colors: Object.freeze({
     primary: "#3b82f6",
@@ -76,6 +94,7 @@ const DEFAULT_THEME_TOKENS = Object.freeze({
     info: "#0284c7",
   }),
   elevation: ELEVATION,
+  interaction: INTERACTION,
   spacing: Object.freeze({ xs: 4, sm: 8, md: 16, lg: 24, xl: 32 }),
   // REQ-THEME-LOOK: multiplies every layout spacing value at render. 1 is
   // unchanged, so a theme that never sets it renders exactly as before.
@@ -1576,6 +1595,37 @@ const HOOKS = [
     requiredContextSlice: [],
     scopes: null,
   },
+  // sc-6448 — host-brokered camera capture / photo picking. Optional slice;
+  // the hook reports supported:false rather than throwing at render.
+  {
+    name: "useCamera",
+    signature: "useCamera(options?)",
+    description:
+      "Take a photo or choose one from the device library. Returns { asset, loading, error, supported, capture, pick, reset }. " +
+      "Capture is IMPERATIVE — call capture() or pick() from a user gesture (a tap); the browser and the mobile OS gate the " +
+      "permission prompt on a gesture, so it NEVER opens on mount. Both resolve to a normalised asset " +
+      "{ uri, name, mimeType, width, height, size, file }, or NULL when the user dismisses the picker — dismissal is the " +
+      "common case and is deliberately NOT an error, so no try/catch is needed on the happy path. They reject with a " +
+      "CameraError whose .code is one of PERMISSION_DENIED | UNSUPPORTED | INTERNAL. `asset.file` is already the right " +
+      "upload part for the host (a File on web, { uri, name, type } on native): append it to a FormData as `file` and pass " +
+      "that to ctx.assets.upload(fd) — one code path on both platforms. reset() clears the asset and releases it. Check " +
+      "`supported` before rendering a camera button. options: { allowsEditing, quality } are HINTS the host honours where it " +
+      "can — the Expo export applies both, the web file input applies neither, so never depend on a capped file size or a " +
+      "cropped result. Behaviour is otherwise identical on web (file input) and the Expo export (expo-image-picker).",
+    returnShape: {
+      asset:
+        "{ uri, name, mimeType, width, height, size, file } | null",
+      loading: "boolean",
+      error: "CameraError | null",
+      supported: "boolean  // false when the host brokers no camera",
+      capture:
+        "() => Promise<asset | null>  // null if dismissed; rejects with CameraError",
+      pick: "() => Promise<asset | null>  // null if dismissed; rejects with CameraError",
+      reset: "() => void  // clear the asset + error and release it",
+    },
+    requiredContextSlice: [],
+    scopes: null,
+  },
 ];
 
 // REQ-WSDK-RN-WEB: the SDK exposes the React Native primitive API
@@ -1709,6 +1759,17 @@ const PRIMITIVES = [
     rnComponent: "expo-linear-gradient",
     docsUrl: "https://docs.expo.dev/versions/latest/sdk/linear-gradient/",
   },
+  // sc-6531 (REQ-AI-AGENT-DESIGN-LIFT) — the hover/press lift affordance. A
+  // FUNCTION primitive, not a component: it resolves the interaction tokens per
+  // input, so one declaration answers the pointer on web and the press on
+  // native.
+  {
+    name: "pressableLift",
+    description:
+      "Interaction feedback for a tappable surface. Call it inside a Pressable's style FUNCTION and spread the result: `<Pressable style={(state) => [styles.card, ...pressableLift(state)]}>`. While the pointer hovers the surface (web) or it is pressed (touch), the surface lifts: a -2px nudge plus one elevation step, from `themeTokens.interaction`, with the web transition built in. Give it to EVERY tappable card, row and list entry; never hand-write hover logic, `transition` strings, or your own pressed shadows.",
+    rnComponent: null,
+    docsUrl: null,
+  },
 ];
 
 const CATEGORIES = [
@@ -2168,14 +2229,18 @@ const WIDGET_CONTEXT_SHAPE = {
     description:
       "Optional host-brokered device capabilities. " +
       "{ geolocation: { getCurrentPosition(options?) -> Promise<{ latitude, longitude, accuracy }> }, " +
-      "speech: { isSupported() -> boolean, start(options, { onResult, onError, onEnd }) -> Promise<{ stop(), abort() }> } }. " +
-      "Backs useGeolocation() and useSpeechToText(). The web Player brokers them via navigator.geolocation and " +
-      "window.SpeechRecognition; the Expo export via expo-location and expo-speech-recognition. " +
+      "speech: { isSupported() -> boolean, start(options, { onResult, onError, onEnd }) -> Promise<{ stop(), abort() }> }, " +
+      "camera: { isSupported() -> boolean, capture(options?) -> Promise<asset | null>, pick(options?) -> Promise<asset | null> } }. " +
+      "Backs useGeolocation(), useSpeechToText() and useCamera(). The web Player brokers them via navigator.geolocation, " +
+      "window.SpeechRecognition and a file input; the Expo export via expo-location, expo-speech-recognition and " +
+      "expo-image-picker. " +
       "getCurrentPosition rejects with a GeolocationError (.code PERMISSION_DENIED | UNAVAILABLE | TIMEOUT | UNSUPPORTED | INTERNAL). " +
       "speech.start streams { transcript, isFinal } to onResult and runs ON DEVICE — it uploads no audio and spends no AI credit; " +
-      "its onError carries the Web Speech error vocabulary (not-allowed | no-speech | language-not-supported | network | aborted).",
+      "its onError carries the Web Speech error vocabulary (not-allowed | no-speech | language-not-supported | network | aborted). " +
+      "camera.capture/pick resolve a normalised { uri, name, mimeType, width, height, size, file, release? } or NULL when the " +
+      "user dismisses the picker, and reject with a CameraError (.code PERMISSION_DENIED | UNSUPPORTED | INTERNAL).",
     required: false,
-    fields: { geolocation: "object", speech: "object" },
+    fields: { geolocation: "object", speech: "object", camera: "object" },
   },
 };
 
@@ -3386,7 +3451,24 @@ const CONTRACT = deepFreeze({
   //    byte-identically. `mapSpacing` pushes each side through the responsive
   //    and theme scaling the scalar already got; `isZeroSpacing` lets each box
   //    property keep its own zero policy.
-  version: "1.85.0",
+  //
+  // 1.86.0: additive (sc-6448) — new `useCamera()` hook + a `camera` member on
+  //    the optional `device` host slice. Takes a photo or picks one from the
+  //    library, resolving a normalised asset whose `file` is already the right
+  //    upload part for the host (a File on web, `{ uri, name, type }` on
+  //    native), so one code path feeds `ctx.assets.upload`. Host-brokered
+  //    rather than a vetted import — the same reasoning as `speech`: widgets
+  //    never import the native module, so it stays out of widget bundles.
+  //    This supersedes the `expo-camera` deferral in
+  //    docs/design/req-widget-sdk-cross-platform-primitives.md, which was
+  //    about vetting a full camera surface (permissions, multi-step UX, frame
+  //    processing) as a widget import — none of which this adds.
+  // 1.87.0: additive (sc-6531) — `themeTokens.interaction`: the interaction-
+  // state vocabulary (`lift.raised`, `lift.translateY`, `lift.transitionMs`),
+  // plus the `pressableLift` primitive that resolves it per input — hover on
+  // web, press on native. Tappable layout containers and widget surfaces lift
+  // from this ONE table.
+  version: "1.87.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,

package/dist/hooks.js

@@ -1297,6 +1297,159 @@ export function useSpeechToText(options) {
   };
 }
 
+/**
+ * Structured error thrown by `useCamera` callbacks.
+ *
+ * `code` is one of:
+ *   - "PERMISSION_DENIED" — the user (or OS) refused camera / library access.
+ *   - "UNSUPPORTED"       — this host does not broker the camera.
+ *   - "INTERNAL"          — anything else.
+ *
+ * A user dismissing the picker is NOT an error — the promise resolves `null`.
+ */
+export class CameraError extends Error {
+  constructor(code, message, opts) {
+    super(message);
+    this.name = "CameraError";
+    this.code = code;
+    if (opts && opts.cause) this.cause = opts.cause;
+  }
+}
+
+/** Coerce a thrown value into a CameraError with a stable code. */
+function toCameraError(err) {
+  if (err instanceof CameraError) return err;
+  const raw = err && err.code !== undefined ? err.code : null;
+  let code = "INTERNAL";
+  if (raw === "PERMISSION_DENIED") code = "PERMISSION_DENIED";
+  else if (raw === "UNSUPPORTED") code = "UNSUPPORTED";
+  const message =
+    (err && typeof err.message === "string" && err.message) ||
+    "Camera request failed";
+  return new CameraError(code, message, { cause: err });
+}
+
+/**
+ * Take a photo or choose one from the device library. Returns
+ *   `{ asset, loading, error, supported, capture, pick, reset }`.
+ *
+ * Capture is IMPERATIVE — call `capture()` / `pick()` from a user gesture. The
+ * OS and the browser gate the permission prompt on a gesture, so the hook never
+ * opens the camera on mount.
+ *
+ * Both resolve to a normalised asset, or `null` when the user dismisses the
+ * picker — dismissal is the most common outcome and is deliberately not an
+ * error, so widgets need no try/catch on the happy path. They reject with a
+ * `CameraError` for a genuine failure (permission refused, no host broker).
+ *
+ * The asset's `file` is already the right shape to upload on either host — a
+ * `File` on web, a `{ uri, name, type }` part on native — so one code path
+ * covers both:
+ *
+ *     const fd = new FormData();
+ *     fd.append("file", asset.file);
+ *     await ctx.assets.upload(fd);
+ *
+ * Check `supported` before rendering a camera button; a host with no broker
+ * reports false rather than throwing at render.
+ */
+export function useCamera(options) {
+  const ctx = useWidgetContextOrThrow("useCamera");
+  const [asset, setAsset] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  // `ctx` is a fresh identity every host render — hold the live client and
+  // options in refs so the returned callbacks stay stable.
+  const clientRef = useRef(ctx.device && ctx.device.camera);
+  clientRef.current = ctx.device && ctx.device.camera;
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  // Web hands back a blob: URL per asset; abandoning it leaks the blob for the
+  // life of the document, so the hook owns revoking the one it replaced.
+  const releaseRef = useRef(null);
+  const runRef = useRef(0);
+
+  const supported = Boolean(
+    clientRef.current &&
+      typeof clientRef.current.capture === "function" &&
+      (typeof clientRef.current.isSupported !== "function" ||
+        clientRef.current.isSupported()),
+  );
+
+  const release = useCallback(() => {
+    const revoke = releaseRef.current;
+    releaseRef.current = null;
+    if (typeof revoke === "function") {
+      try {
+        revoke();
+      } catch {
+        /* the host already released it */
+      }
+    }
+  }, []);
+
+  useEffect(() => () => release(), [release]);
+
+  const reset = useCallback(() => {
+    runRef.current += 1;
+    release();
+    setAsset(null);
+    setError(null);
+  }, [release]);
+
+  // capture() and pick() differ only in which broker method they call, so both
+  // run through one request path — otherwise the loading/abort bookkeeping
+  // would exist twice and drift.
+  const request = useCallback(
+    async (method) => {
+      const client = clientRef.current;
+      if (
+        !client ||
+        typeof client[method] !== "function" ||
+        (typeof client.isSupported === "function" && !client.isSupported())
+      ) {
+        const e = new CameraError(
+          "UNSUPPORTED",
+          "This host does not provide camera access.",
+        );
+        setError(e);
+        throw e;
+      }
+      const run = (runRef.current += 1);
+      setLoading(true);
+      setError(null);
+      try {
+        const next = await client[method](optionsRef.current || {});
+        // A reset() or a newer request landed while this one was open — drop
+        // the result rather than clobbering what the widget now shows.
+        if (run !== runRef.current) {
+          if (next && typeof next.release === "function") next.release();
+          return null;
+        }
+        if (!next) return null;
+        release();
+        releaseRef.current =
+          typeof next.release === "function" ? next.release : null;
+        setAsset(next);
+        return next;
+      } catch (err) {
+        const ce = toCameraError(err);
+        if (run === runRef.current) setError(ce);
+        throw ce;
+      } finally {
+        if (run === runRef.current) setLoading(false);
+      }
+    },
+    [release],
+  );
+
+  const capture = useCallback(() => request("capture"), [request]);
+  const pick = useCallback(() => request("pick"), [request]);
+
+  return { asset, loading, error, supported, capture, pick, reset };
+}
+
 /* ============================================================================
  * DATASTORE CLIENT — ctx.datastore (@colixsystems/datastore-client)
  *

package/dist/index.d.ts

@@ -1538,6 +1538,75 @@ export class SpeechToTextError extends Error {
   );
 }
 
+/**
+ * Options for `useCamera(...)`. Both are HINTS the host honours where it can:
+ * the Expo export applies them, the web file input applies neither — so never
+ * depend on a cropped result or a capped file size.
+ */
+export interface CameraOptions {
+  /** Let the user crop/rotate before returning. Native only. Defaults to false. */
+  allowsEditing?: boolean;
+  /** 0–1 compression quality. Native only. Defaults to 0.8. */
+  quality?: number;
+}
+
+/** A photo taken or picked through `useCamera()`, normalised across hosts. */
+export interface CameraAsset {
+  /** Displayable source — `<Image source={{ uri }} />` / `<img src>`. */
+  uri: string;
+  /** File name, derived from the source when the host supplies none. */
+  name: string;
+  mimeType: string;
+  width: number | null;
+  height: number | null;
+  /** Bytes, when the host reports it. */
+  size: number | null;
+  /**
+   * Ready-to-upload part — a `File` on web, `{ uri, name, type }` on native.
+   * Append it to a FormData and hand that to `ctx.assets.upload(...)`.
+   */
+  file: unknown;
+}
+
+export interface CameraResult {
+  /** The most recent asset, or null before the first capture / after reset. */
+  asset: CameraAsset | null;
+  loading: boolean;
+  error: CameraError | null;
+  /** False when the host brokers no camera. */
+  supported: boolean;
+  /** Open the camera. Resolves null if the user dismisses it. */
+  capture(): Promise<CameraAsset | null>;
+  /** Open the photo library. Resolves null if the user dismisses it. */
+  pick(): Promise<CameraAsset | null>;
+  /** Clear `asset` and `error`, releasing the held asset. */
+  reset(): void;
+}
+
+/**
+ * Take a photo or choose one from the device library. Capture is imperative
+ * (call `capture()` / `pick()` from a user gesture; it never opens on mount).
+ * The same hook drives both platforms — the web Player brokers it via a file
+ * input, the Expo export via `expo-image-picker`. Dismissing the picker
+ * resolves `null` rather than rejecting; a genuine failure rejects with a
+ * `CameraError`. Safe to call on a host that brokers no camera: `supported` is
+ * then false, so gate the camera button on it.
+ */
+export function useCamera(options?: CameraOptions): CameraResult;
+
+/**
+ * Error surfaced by `useCamera()` — thrown by `capture()` / `pick()` and stored
+ * in the hook's `error` slot. `code` is a stable categorisation.
+ */
+export class CameraError extends Error {
+  code: "PERMISSION_DENIED" | "UNSUPPORTED" | "INTERNAL";
+  constructor(
+    code: CameraError["code"],
+    message: string,
+    opts?: { cause?: unknown },
+  );
+}
+
 /**
  * Error class thrown by useDatastoreMutation callbacks (and surfaced by
  * useDatastoreQuery in its `error` slot). The `code` is a stable
@@ -2243,3 +2312,15 @@ export const CONTRACT: AiWidgetContract;
 
 export function isHookAllowed(name: string): boolean;
 export function requiredContextKeys(): string[];
+
+/**
+ * sc-6531 (REQ-AI-AGENT-DESIGN-LIFT) — interaction feedback for a tappable
+ * surface. Call inside a Pressable's style function and spread the result:
+ * `<Pressable style={(state) => [styles.card, ...pressableLift(state)]}>`.
+ * Web raises the surface while hovered or pressed (with the transition built
+ * in); native raises it while pressed.
+ */
+export function pressableLift(state?: {
+  hovered?: boolean;
+  pressed?: boolean;
+}): Array<Record<string, unknown> | null>;

package/dist/index.js

@@ -80,6 +80,8 @@ export {
   GeolocationError,
   useSpeechToText,
   SpeechToTextError,
+  useCamera,
+  CameraError,
   WidgetTree,
 } from "./hooks.js";
 export { isNarrowWidth, NARROW_WIDTH_PX } from "./container-width.js";
@@ -127,3 +129,4 @@ export {
   scaleSpacing,
 } from "./contract.js";
 export { normalizeLucideIconName } from "./lucideIconName.js";
+export { pressableLift } from "./interaction.js";

package/dist/index.native.js

@@ -80,6 +80,8 @@ export {
   GeolocationError,
   useSpeechToText,
   SpeechToTextError,
+  useCamera,
+  CameraError,
   WidgetTree,
 } from "./hooks.js";
 export { isNarrowWidth, NARROW_WIDTH_PX } from "./container-width.js";
@@ -125,3 +127,4 @@ export {
   scaleSpacing,
 } from "./contract.js";
 export { normalizeLucideIconName } from "./lucideIconName.js";
+export { pressableLift } from "./interaction.native.js";

package/dist/interaction.js

@@ -0,0 +1,16 @@
+// sc-6531 (REQ-AI-AGENT-DESIGN-LIFT) — the web half of the lift affordance.
+// react-native-web's Pressable hands its style function `{ hovered, pressed }`;
+// either one raises the surface, and the smoothing rides the RESTING style so
+// the lift animates in both directions. The touch half is interaction.native.js
+// — no hover exists there, and a pressed state change is instant.
+import { CONTRACT } from "./contract.js";
+
+const LIFT = CONTRACT.themeTokens.interaction.lift;
+const SMOOTHING = Object.freeze({
+  transitionProperty: "transform, box-shadow",
+  transitionDuration: `${LIFT.transitionMs}ms`,
+});
+
+export function pressableLift(state = {}) {
+  return [SMOOTHING, state.hovered || state.pressed ? LIFT.raised : null];
+}

package/dist/interaction.native.js

@@ -0,0 +1,10 @@
+// sc-6531 (REQ-AI-AGENT-DESIGN-LIFT) — the touch half of the lift affordance:
+// there is no hover, the press state raises the surface, and the change is
+// instant (RN styles carry no transitions). The pointer half is interaction.js.
+import { CONTRACT } from "./contract.js";
+
+const LIFT = CONTRACT.themeTokens.interaction.lift;
+
+export function pressableLift(state = {}) {
+  return [state.pressed ? LIFT.raised : null];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colixsystems/widget-sdk",
-  "version": "0.112.0",
+  "version": "0.114.0",
   "description": "Common widget interface for AppStudio. Implements WidgetManifest, WidgetContext, property schema, and helper hooks.",
   "type": "module",
   "main": "./dist/index.js",
@@ -48,7 +48,7 @@
   ],
   "scripts": {
     "build": "node scripts/build.js",
-    "test": "node --test src/__tests__/contract.test.js src/__tests__/vetted-imports-audit.test.js src/__tests__/hooks-users.test.js src/__tests__/hooks-groups.test.js src/__tests__/hooks-invites.test.js src/__tests__/hooks-schema.test.js src/__tests__/hooks-assets-by-tag.test.js src/__tests__/hooks-filestore-upload.test.js src/__tests__/hooks-filestore-file.test.js src/__tests__/hooks-mutation.test.js src/__tests__/hooks-payments.test.js src/__tests__/hooks-record-permissions.test.js src/__tests__/hooks-geolocation.test.js src/__tests__/hooks-section-empty.test.js src/__tests__/hooks-widget-event.test.js src/__tests__/hooks-widget-input.test.js src/__tests__/hooks-identification.test.js src/__tests__/hooks-subscription.test.js src/__tests__/hooks-volatile-query-key.test.js src/__tests__/linter-users-scope.test.js src/__tests__/linter-comments.test.js src/__tests__/linter-translation-api.test.js src/__tests__/linter-page-url.test.js src/__tests__/linter-image-height.test.js src/__tests__/linter-hardcoded-design.test.js src/__tests__/linter-measured-padding.test.js src/__tests__/linter-payment-error.test.js src/__tests__/linter-platform.test.js src/__tests__/linter-react-import.test.js src/__tests__/lucide-icon-names.test.js src/__tests__/lucideIconName.test.js src/__tests__/manifest-actions.test.js src/__tests__/widget-translations.test.js src/__tests__/hooks-translate.test.js src/__tests__/devserver.test.js src/__tests__/host-externals.test.js src/__tests__/datetimepicker.test.js src/__tests__/property-schema-resolve.test.js src/__tests__/corner-radius.test.js src/__tests__/theme-components-parity.test.js src/__tests__/navigation-parity.test.js src/__tests__/theme-depth-tokens.test.js src/__tests__/toast-host.test.js src/__tests__/hooks-domain-error-mapping.test.js src/__tests__/linter-datastore-error.test.js src/__tests__/linter-write-gating.test.js src/__tests__/hooks-speech-to-text.test.js src/__tests__/hooks-bound-columns.test.js src/__tests__/hooks-stable-query.test.js src/__tests__/hooks-can-write.test.js src/__tests__/widget-route.test.js"
+    "test": "node --test src/__tests__/contract.test.js src/__tests__/vetted-imports-audit.test.js src/__tests__/hooks-users.test.js src/__tests__/hooks-groups.test.js src/__tests__/hooks-invites.test.js src/__tests__/hooks-schema.test.js src/__tests__/hooks-assets-by-tag.test.js src/__tests__/hooks-filestore-upload.test.js src/__tests__/hooks-filestore-file.test.js src/__tests__/hooks-mutation.test.js src/__tests__/hooks-payments.test.js src/__tests__/hooks-record-permissions.test.js src/__tests__/hooks-geolocation.test.js src/__tests__/hooks-section-empty.test.js src/__tests__/hooks-widget-event.test.js src/__tests__/hooks-widget-input.test.js src/__tests__/hooks-identification.test.js src/__tests__/hooks-subscription.test.js src/__tests__/hooks-volatile-query-key.test.js src/__tests__/linter-users-scope.test.js src/__tests__/linter-comments.test.js src/__tests__/linter-translation-api.test.js src/__tests__/linter-page-url.test.js src/__tests__/linter-image-height.test.js src/__tests__/linter-hardcoded-design.test.js src/__tests__/linter-measured-padding.test.js src/__tests__/linter-payment-error.test.js src/__tests__/linter-platform.test.js src/__tests__/linter-react-import.test.js src/__tests__/lucide-icon-names.test.js src/__tests__/lucideIconName.test.js src/__tests__/manifest-actions.test.js src/__tests__/widget-translations.test.js src/__tests__/hooks-translate.test.js src/__tests__/devserver.test.js src/__tests__/host-externals.test.js src/__tests__/datetimepicker.test.js src/__tests__/property-schema-resolve.test.js src/__tests__/corner-radius.test.js src/__tests__/theme-components-parity.test.js src/__tests__/navigation-parity.test.js src/__tests__/theme-depth-tokens.test.js src/__tests__/interaction-lift.test.js src/__tests__/toast-host.test.js src/__tests__/hooks-domain-error-mapping.test.js src/__tests__/linter-datastore-error.test.js src/__tests__/linter-write-gating.test.js src/__tests__/hooks-speech-to-text.test.js src/__tests__/hooks-camera.test.js src/__tests__/hooks-bound-columns.test.js src/__tests__/hooks-stable-query.test.js src/__tests__/hooks-can-write.test.js src/__tests__/widget-route.test.js"
   },
   "engines": {
     "node": ">=18"