@colixsystems/widget-sdk 0.266.0 → 0.267.0

package/README.md

@@ -86,7 +86,15 @@ See the design reference for the full architecture: [`docs/architecture/widget-m
 
 ## Status
 
-`v0.266.0` — pre-publish. The package surface (types, function names, export paths) is the v1 contract; runtime behaviour for some hooks is stubbed (each hook documents what's wired and what isn't). It is **not yet published to npm**.
+`v0.267.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.267.0 (contract 1.217.0)
+
+**Every text field can raise the right keyboard.** The `TextInput` primitive (and `<TextField>`, which passes every `TextInput` prop through) now documents `keyboardType` — `"email-address"`, `"phone-pad"`, `"url"`, `"number-pad"`, `"decimal-pad"` — plus `autoCapitalize`, `autoCorrect`, `autoComplete` and `secureTextEntry`. They already worked on both hosts (react-native-web turns `keyboardType` into the input's `type` / `inputMode`); now the contract and the AI widget agent say to set them. A `useDatastoreSchema` column's `text_format` (`"EMAIL"` | `"PHONE"` | `"URL"` | a JSON format | `null`) is typed on `DatastoreSchemaColumn`, so a typed widget can pick the keyboard from it.
+
+### What's new in 0.266.1 (contract 1.216.0)
+
+**An open `<Modal>` or `<Overlay>` holds the page still on the web.** Scrolling past the end of a dialog's body, or over a dialog with nothing to scroll, used to scroll the page behind it. The page now stays put until the dialog closes, as it already did in the phone app. Nothing changes for a widget. An anchored `<Menu>`, `<Popover>` or `<Tooltip>` still closes when the page scrolls under it.
 
 ### What's new in 0.266.0 (contract 1.216.0)
 

package/dist/contract.cjs

@@ -2028,13 +2028,16 @@ const HOOKS = [
       "widget can resolve a stored columnId to the column's name / dataType / " +
       "relation target at runtime (e.g. a form that renders inputs by column " +
       "type). Returns { schema, loading, error, refetch } where schema is " +
-      "{ id, name, columns: [{ id, name, dataType, required, relationType, " +
-      "targetTableId, isIdentification }] } (null until loaded). Reads only the " +
+      "{ id, name, columns: [{ id, name, data_type, required, relation_type, " +
+      "target_table_id, is_identification, text_format }] } (null until " +
+      "loaded; snake_case as the server sends it). `text_format` is " +
+      "\"EMAIL\" | \"PHONE\" | \"URL\" (or a JSON format, or null) and names the " +
+      "keyboard a field for that column should raise. Reads only the " +
       "structure, never row data; gated by the same datastore.read ACL as " +
       "record reads, so a public-grant table resolves for anonymous visitors.",
     returnShape: {
       schema:
-        "{ id, name, columns: [{ id, name, dataType, required, relationType, targetTableId, isIdentification }] } | null",
+        "{ id, name, columns: [{ id, name, data_type, required, relation_type, target_table_id, is_identification, text_format }] } | null",
       loading: "boolean",
       error: "DatastoreError | null",
       refetch: "() => Promise<void>",
@@ -3248,7 +3251,7 @@ const PRIMITIVES = [
   {
     name: "TextInput",
     description:
-      "Single-line or multi-line text field. Controlled — pass `value` + `onChangeText`. Set `multiline` for a textarea-style field (`numberOfLines` controls visible rows). See https://reactnative.dev/docs/textinput.",
+      "Single-line or multi-line text field. Controlled — pass `value` + `onChangeText`. Set `multiline` for a textarea-style field (`numberOfLines` controls visible rows). Pick the on-screen keyboard from what the field holds — the default alphabetic keyboard is wrong for most structured values: `keyboardType=\"email-address\"` for an email, `\"phone-pad\"` for a phone number, `\"url\"` for a link, `\"number-pad\"` for whole digits (a card or code), `\"decimal-pad\"` for an amount. For an email, link, username or code also pass `autoCapitalize=\"none\"` and `autoCorrect={false}`, so the keyboard never rewrites the value; `autoComplete` (\"email\", \"tel\", \"name\", \"one-time-code\") lets the device offer a saved value, and `secureTextEntry` masks a password. The same props reach the web: react-native-web turns `keyboardType` into the input's `type` / `inputMode`. A column's declared format (`text_format` on a `useDatastoreSchema` column: \"EMAIL\" | \"PHONE\" | \"URL\") names the keyboard for a field bound to it. See https://reactnative.dev/docs/textinput.",
     rnComponent: "TextInput",
     docsUrl: "https://reactnative.dev/docs/textinput",
   },
@@ -3607,7 +3610,7 @@ const PRIMITIVES = [
   {
     name: "TextField",
     description:
-      'Themed text-entry field. `<TextField value={name} onChangeText={setName} placeholder="Your name" accessibilityLabel="Name" />` — every `TextInput` prop works, and its background, text colour, border, corner radius and height come from the app\'s input look (Design > Components > Inputs), so a widget\'s fields match the built-in forms. `multiline` grows the field to a ceiling and then scrolls inside it. Override one field with `background`, `textColor`, `borderColor`, `radius` or `height`; `style` is merged last. `label` draws a label above the field and names it for a screen reader, `helper` a hint below, `error` a message in the helper\'s place with a danger border (`true` marks it without a message), `disabled` makes it read-only and dimmed; `containerStyle` styles the box around a labelled field, or around the field and its icons. An icon goes INSIDE the field, never beside it: `leadingIcon` / `trailingIcon` take a lucide name (`<TextField trailingIcon="map-pin" … />`), and `onTrailingPress` with a `trailingAccessibilityLabel` makes the trailing one a button (a clear control, "use my location"). Never wrap a field in a bordered row of your own to put an icon or a button beside it: the field draws its own border, so that shows a box inside a box. Use it by default instead of styling a bare `TextInput`; a field it cannot draw (a one-time code split into digit boxes, an amount with a stepper inside its border) is your own build that keeps a label, the input colours of the theme and an error message.',
+      'Themed text-entry field. `<TextField value={name} onChangeText={setName} placeholder="Your name" accessibilityLabel="Name" />` — every `TextInput` prop works (set `keyboardType` from what the field holds: `"email-address"`, `"phone-pad"`, `"url"`, `"number-pad"`, `"decimal-pad"`), and its background, text colour, border, corner radius and height come from the app\'s input look (Design > Components > Inputs), so a widget\'s fields match the built-in forms. `multiline` grows the field to a ceiling and then scrolls inside it. Override one field with `background`, `textColor`, `borderColor`, `radius` or `height`; `style` is merged last. `label` draws a label above the field and names it for a screen reader, `helper` a hint below, `error` a message in the helper\'s place with a danger border (`true` marks it without a message), `disabled` makes it read-only and dimmed; `containerStyle` styles the box around a labelled field, or around the field and its icons. An icon goes INSIDE the field, never beside it: `leadingIcon` / `trailingIcon` take a lucide name (`<TextField trailingIcon="map-pin" … />`), and `onTrailingPress` with a `trailingAccessibilityLabel` makes the trailing one a button (a clear control, "use my location"). Never wrap a field in a bordered row of your own to put an icon or a button beside it: the field draws its own border, so that shows a box inside a box. Use it by default instead of styling a bare `TextInput`; a field it cannot draw (a one-time code split into digit boxes, an amount with a stepper inside its border) is your own build that keeps a label, the input colours of the theme and an error message.',
     rnComponent: null,
     docsUrl: null,
   },
@@ -6466,7 +6469,10 @@ const CONTRACT = deepFreeze({
   //    `useUsers().invite` takes `send_invitation` (false stores the invite
   //    unsent), invite rows carry `sent_at`, `not_sent` is a status, and
   //    `useInvites().resend` performs the first send.
-  version: "1.216.0",
+  // 1.217.0: additive (sc-4747) — `TextInput` documents `keyboardType`,
+  //    `autoCapitalize`, `autoCorrect`, `autoComplete`, `secureTextEntry`;
+  //    `useDatastoreSchema` columns document `text_format` (snake_case wire).
+  version: "1.217.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,

package/dist/contract.js

@@ -2025,13 +2025,16 @@ const HOOKS = [
       "widget can resolve a stored columnId to the column's name / dataType / " +
       "relation target at runtime (e.g. a form that renders inputs by column " +
       "type). Returns { schema, loading, error, refetch } where schema is " +
-      "{ id, name, columns: [{ id, name, dataType, required, relationType, " +
-      "targetTableId, isIdentification }] } (null until loaded). Reads only the " +
+      "{ id, name, columns: [{ id, name, data_type, required, relation_type, " +
+      "target_table_id, is_identification, text_format }] } (null until " +
+      "loaded; snake_case as the server sends it). `text_format` is " +
+      "\"EMAIL\" | \"PHONE\" | \"URL\" (or a JSON format, or null) and names the " +
+      "keyboard a field for that column should raise. Reads only the " +
       "structure, never row data; gated by the same datastore.read ACL as " +
       "record reads, so a public-grant table resolves for anonymous visitors.",
     returnShape: {
       schema:
-        "{ id, name, columns: [{ id, name, dataType, required, relationType, targetTableId, isIdentification }] } | null",
+        "{ id, name, columns: [{ id, name, data_type, required, relation_type, target_table_id, is_identification, text_format }] } | null",
       loading: "boolean",
       error: "DatastoreError | null",
       refetch: "() => Promise<void>",
@@ -3245,7 +3248,7 @@ const PRIMITIVES = [
   {
     name: "TextInput",
     description:
-      "Single-line or multi-line text field. Controlled — pass `value` + `onChangeText`. Set `multiline` for a textarea-style field (`numberOfLines` controls visible rows). See https://reactnative.dev/docs/textinput.",
+      "Single-line or multi-line text field. Controlled — pass `value` + `onChangeText`. Set `multiline` for a textarea-style field (`numberOfLines` controls visible rows). Pick the on-screen keyboard from what the field holds — the default alphabetic keyboard is wrong for most structured values: `keyboardType=\"email-address\"` for an email, `\"phone-pad\"` for a phone number, `\"url\"` for a link, `\"number-pad\"` for whole digits (a card or code), `\"decimal-pad\"` for an amount. For an email, link, username or code also pass `autoCapitalize=\"none\"` and `autoCorrect={false}`, so the keyboard never rewrites the value; `autoComplete` (\"email\", \"tel\", \"name\", \"one-time-code\") lets the device offer a saved value, and `secureTextEntry` masks a password. The same props reach the web: react-native-web turns `keyboardType` into the input's `type` / `inputMode`. A column's declared format (`text_format` on a `useDatastoreSchema` column: \"EMAIL\" | \"PHONE\" | \"URL\") names the keyboard for a field bound to it. See https://reactnative.dev/docs/textinput.",
     rnComponent: "TextInput",
     docsUrl: "https://reactnative.dev/docs/textinput",
   },
@@ -3604,7 +3607,7 @@ const PRIMITIVES = [
   {
     name: "TextField",
     description:
-      'Themed text-entry field. `<TextField value={name} onChangeText={setName} placeholder="Your name" accessibilityLabel="Name" />` — every `TextInput` prop works, and its background, text colour, border, corner radius and height come from the app\'s input look (Design > Components > Inputs), so a widget\'s fields match the built-in forms. `multiline` grows the field to a ceiling and then scrolls inside it. Override one field with `background`, `textColor`, `borderColor`, `radius` or `height`; `style` is merged last. `label` draws a label above the field and names it for a screen reader, `helper` a hint below, `error` a message in the helper\'s place with a danger border (`true` marks it without a message), `disabled` makes it read-only and dimmed; `containerStyle` styles the box around a labelled field, or around the field and its icons. An icon goes INSIDE the field, never beside it: `leadingIcon` / `trailingIcon` take a lucide name (`<TextField trailingIcon="map-pin" … />`), and `onTrailingPress` with a `trailingAccessibilityLabel` makes the trailing one a button (a clear control, "use my location"). Never wrap a field in a bordered row of your own to put an icon or a button beside it: the field draws its own border, so that shows a box inside a box. Use it by default instead of styling a bare `TextInput`; a field it cannot draw (a one-time code split into digit boxes, an amount with a stepper inside its border) is your own build that keeps a label, the input colours of the theme and an error message.',
+      'Themed text-entry field. `<TextField value={name} onChangeText={setName} placeholder="Your name" accessibilityLabel="Name" />` — every `TextInput` prop works (set `keyboardType` from what the field holds: `"email-address"`, `"phone-pad"`, `"url"`, `"number-pad"`, `"decimal-pad"`), and its background, text colour, border, corner radius and height come from the app\'s input look (Design > Components > Inputs), so a widget\'s fields match the built-in forms. `multiline` grows the field to a ceiling and then scrolls inside it. Override one field with `background`, `textColor`, `borderColor`, `radius` or `height`; `style` is merged last. `label` draws a label above the field and names it for a screen reader, `helper` a hint below, `error` a message in the helper\'s place with a danger border (`true` marks it without a message), `disabled` makes it read-only and dimmed; `containerStyle` styles the box around a labelled field, or around the field and its icons. An icon goes INSIDE the field, never beside it: `leadingIcon` / `trailingIcon` take a lucide name (`<TextField trailingIcon="map-pin" … />`), and `onTrailingPress` with a `trailingAccessibilityLabel` makes the trailing one a button (a clear control, "use my location"). Never wrap a field in a bordered row of your own to put an icon or a button beside it: the field draws its own border, so that shows a box inside a box. Use it by default instead of styling a bare `TextInput`; a field it cannot draw (a one-time code split into digit boxes, an amount with a stepper inside its border) is your own build that keeps a label, the input colours of the theme and an error message.',
     rnComponent: null,
     docsUrl: null,
   },
@@ -6463,7 +6466,10 @@ const CONTRACT = deepFreeze({
   //    `useUsers().invite` takes `send_invitation` (false stores the invite
   //    unsent), invite rows carry `sent_at`, `not_sent` is a status, and
   //    `useInvites().resend` performs the first send.
-  version: "1.216.0",
+  // 1.217.0: additive (sc-4747) — `TextInput` documents `keyboardType`,
+  //    `autoCapitalize`, `autoCorrect`, `autoComplete`, `secureTextEntry`;
+  //    `useDatastoreSchema` columns document `text_format` (snake_case wire).
+  version: "1.217.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,

package/dist/hooks.js

@@ -3165,9 +3165,9 @@ export function useDatastoreRecord(table, recordId, options) {
 
 /**
  * Stateful table-schema resolver hook. Returns { schema, loading, error,
- * refetch } where `schema` is `{ id, name, columns: [{ id, name, dataType,
- * required, relationType, targetTableId, isIdentification }] }` (`null` until
- * loaded).
+ * refetch } where `schema` is `{ id, name, columns: [{ id, name, data_type,
+ * required, relation_type, target_table_id, is_identification, text_format }] }`
+ * (`null` until loaded) — the server's snake_case, verbatim.
  *
  * The host's datastore client exposes `schema(table)` which resolves to the
  * table's structural metadata — columns and their types, NOT row data. Use it

package/dist/index.d.ts

@@ -1667,6 +1667,19 @@ export interface DatastoreSchemaColumn {
   copy_via_column_id?: string | null;
   /** Set on a copy the server keeps: the related table's column it copies. */
   copy_of_column_id?: string | null;
+  /**
+   * STRING / TEXT columns only — the value's declared format. EMAIL, PHONE and
+   * URL name the keyboard a field for this column should raise
+   * (`keyboardType` "email-address" / "phone-pad" / "url").
+   */
+  text_format?:
+    | "EMAIL"
+    | "PHONE"
+    | "URL"
+    | "JSON_ARRAY"
+    | "JSON_OBJECT"
+    | "JSON_VALUE"
+    | null;
 }
 
 export interface DatastoreSchema {

package/dist/property-schema.js

@@ -82,6 +82,9 @@ const VALID_TYPES = new Set([
   "object", "array",
 ]);
 
+/** The propertySchema field types, for documentation generated from this list. */
+export const PROPERTY_TYPES = Object.freeze([...VALID_TYPES]);
+
 function isPlainObject(v) {
   return v !== null && typeof v === "object" && !Array.isArray(v);
 }

package/dist/web-modal.js

@@ -59,6 +59,32 @@ function useCloseOnOutsideScroll(container, enabled, onCloseRef) {
   }, [container, enabled, onCloseRef]);
 }
 
+// A dialog owns the screen, as on native: the page beneath must not
+// scroll, even once the dialog's own body runs out of scroll.
+let pageScrollLocks = 0;
+let unlockedRootStyle = null;
+
+function usePageScrollLock(enabled) {
+  React.useEffect(() => {
+    if (!enabled) return undefined;
+    const root = document.documentElement;
+    if (pageScrollLocks++ === 0) {
+      unlockedRootStyle = {
+        overflow: root.style.overflow,
+        scrollbarGutter: root.style.scrollbarGutter,
+      };
+      // Keep a visible scrollbar's space, so the page does not shift sideways.
+      if (window.innerWidth > root.clientWidth) root.style.scrollbarGutter = "stable";
+      root.style.overflow = "hidden";
+    }
+    return () => {
+      if (--pageScrollLocks > 0) return;
+      root.style.overflow = unlockedRootStyle.overflow;
+      root.style.scrollbarGutter = unlockedRootStyle.scrollbarGutter;
+    };
+  }, [enabled]);
+}
+
 function tabStops(dialog) {
   return Array.from(dialog.querySelectorAll(FOCUSABLE)).filter(
     (node) => node.getAttribute("aria-hidden") !== "true",
@@ -147,6 +173,8 @@ function ModalLayer({
   }, [visible]);
   const container = useBodyContainer(visible);
   useCloseOnOutsideScroll(container, closesOnOutsideScroll, onCloseRef);
+  // An anchored panel closes on a scroll beneath instead.
+  usePageScrollLock(Boolean(container) && !closesOnOutsideScroll);
 
   React.useEffect(() => {
     const dialog = dialogRef.current;

package/package.json

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

package/src/contract.js

@@ -2025,13 +2025,16 @@ const HOOKS = [
       "widget can resolve a stored columnId to the column's name / dataType / " +
       "relation target at runtime (e.g. a form that renders inputs by column " +
       "type). Returns { schema, loading, error, refetch } where schema is " +
-      "{ id, name, columns: [{ id, name, dataType, required, relationType, " +
-      "targetTableId, isIdentification }] } (null until loaded). Reads only the " +
+      "{ id, name, columns: [{ id, name, data_type, required, relation_type, " +
+      "target_table_id, is_identification, text_format }] } (null until " +
+      "loaded; snake_case as the server sends it). `text_format` is " +
+      "\"EMAIL\" | \"PHONE\" | \"URL\" (or a JSON format, or null) and names the " +
+      "keyboard a field for that column should raise. Reads only the " +
       "structure, never row data; gated by the same datastore.read ACL as " +
       "record reads, so a public-grant table resolves for anonymous visitors.",
     returnShape: {
       schema:
-        "{ id, name, columns: [{ id, name, dataType, required, relationType, targetTableId, isIdentification }] } | null",
+        "{ id, name, columns: [{ id, name, data_type, required, relation_type, target_table_id, is_identification, text_format }] } | null",
       loading: "boolean",
       error: "DatastoreError | null",
       refetch: "() => Promise<void>",
@@ -3245,7 +3248,7 @@ const PRIMITIVES = [
   {
     name: "TextInput",
     description:
-      "Single-line or multi-line text field. Controlled — pass `value` + `onChangeText`. Set `multiline` for a textarea-style field (`numberOfLines` controls visible rows). See https://reactnative.dev/docs/textinput.",
+      "Single-line or multi-line text field. Controlled — pass `value` + `onChangeText`. Set `multiline` for a textarea-style field (`numberOfLines` controls visible rows). Pick the on-screen keyboard from what the field holds — the default alphabetic keyboard is wrong for most structured values: `keyboardType=\"email-address\"` for an email, `\"phone-pad\"` for a phone number, `\"url\"` for a link, `\"number-pad\"` for whole digits (a card or code), `\"decimal-pad\"` for an amount. For an email, link, username or code also pass `autoCapitalize=\"none\"` and `autoCorrect={false}`, so the keyboard never rewrites the value; `autoComplete` (\"email\", \"tel\", \"name\", \"one-time-code\") lets the device offer a saved value, and `secureTextEntry` masks a password. The same props reach the web: react-native-web turns `keyboardType` into the input's `type` / `inputMode`. A column's declared format (`text_format` on a `useDatastoreSchema` column: \"EMAIL\" | \"PHONE\" | \"URL\") names the keyboard for a field bound to it. See https://reactnative.dev/docs/textinput.",
     rnComponent: "TextInput",
     docsUrl: "https://reactnative.dev/docs/textinput",
   },
@@ -3604,7 +3607,7 @@ const PRIMITIVES = [
   {
     name: "TextField",
     description:
-      'Themed text-entry field. `<TextField value={name} onChangeText={setName} placeholder="Your name" accessibilityLabel="Name" />` — every `TextInput` prop works, and its background, text colour, border, corner radius and height come from the app\'s input look (Design > Components > Inputs), so a widget\'s fields match the built-in forms. `multiline` grows the field to a ceiling and then scrolls inside it. Override one field with `background`, `textColor`, `borderColor`, `radius` or `height`; `style` is merged last. `label` draws a label above the field and names it for a screen reader, `helper` a hint below, `error` a message in the helper\'s place with a danger border (`true` marks it without a message), `disabled` makes it read-only and dimmed; `containerStyle` styles the box around a labelled field, or around the field and its icons. An icon goes INSIDE the field, never beside it: `leadingIcon` / `trailingIcon` take a lucide name (`<TextField trailingIcon="map-pin" … />`), and `onTrailingPress` with a `trailingAccessibilityLabel` makes the trailing one a button (a clear control, "use my location"). Never wrap a field in a bordered row of your own to put an icon or a button beside it: the field draws its own border, so that shows a box inside a box. Use it by default instead of styling a bare `TextInput`; a field it cannot draw (a one-time code split into digit boxes, an amount with a stepper inside its border) is your own build that keeps a label, the input colours of the theme and an error message.',
+      'Themed text-entry field. `<TextField value={name} onChangeText={setName} placeholder="Your name" accessibilityLabel="Name" />` — every `TextInput` prop works (set `keyboardType` from what the field holds: `"email-address"`, `"phone-pad"`, `"url"`, `"number-pad"`, `"decimal-pad"`), and its background, text colour, border, corner radius and height come from the app\'s input look (Design > Components > Inputs), so a widget\'s fields match the built-in forms. `multiline` grows the field to a ceiling and then scrolls inside it. Override one field with `background`, `textColor`, `borderColor`, `radius` or `height`; `style` is merged last. `label` draws a label above the field and names it for a screen reader, `helper` a hint below, `error` a message in the helper\'s place with a danger border (`true` marks it without a message), `disabled` makes it read-only and dimmed; `containerStyle` styles the box around a labelled field, or around the field and its icons. An icon goes INSIDE the field, never beside it: `leadingIcon` / `trailingIcon` take a lucide name (`<TextField trailingIcon="map-pin" … />`), and `onTrailingPress` with a `trailingAccessibilityLabel` makes the trailing one a button (a clear control, "use my location"). Never wrap a field in a bordered row of your own to put an icon or a button beside it: the field draws its own border, so that shows a box inside a box. Use it by default instead of styling a bare `TextInput`; a field it cannot draw (a one-time code split into digit boxes, an amount with a stepper inside its border) is your own build that keeps a label, the input colours of the theme and an error message.',
     rnComponent: null,
     docsUrl: null,
   },
@@ -6463,7 +6466,10 @@ const CONTRACT = deepFreeze({
   //    `useUsers().invite` takes `send_invitation` (false stores the invite
   //    unsent), invite rows carry `sent_at`, `not_sent` is a status, and
   //    `useInvites().resend` performs the first send.
-  version: "1.216.0",
+  // 1.217.0: additive (sc-4747) — `TextInput` documents `keyboardType`,
+  //    `autoCapitalize`, `autoCorrect`, `autoComplete`, `secureTextEntry`;
+  //    `useDatastoreSchema` columns document `text_format` (snake_case wire).
+  version: "1.217.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,