@colixsystems/widget-sdk 0.259.0 → 0.261.0

package/dist/index.d.ts

@@ -5868,6 +5868,8 @@ export interface AiWidgetContract {
   readonly bundleExportContract: ReadonlyArray<ContractBundleShape>;
   /** sc-10829 — the export name of a `badgeCounter: true` entry's hook. */
   readonly badgeCounterExport: "useBadgeCount";
+  /** The most native Text / TextInput grow with the device font-scale setting. */
+  readonly maxFontSizeMultiplier: number;
   readonly bannedApis: ReadonlyArray<ContractBannedApi>;
   readonly allowedBareImports: ReadonlyArray<string>;
   /** Bare specifiers the web host provides by exact name; a widget bundle never inlines them. */

package/dist/linter.cjs

@@ -4,7 +4,7 @@
 // The ESM `linter.js` is the source-of-truth. This file MUST mirror its
 // rule set byte-for-byte — the contract test in packages/widget-sdk
 // asserts the two are behaviour-equivalent. When you edit one, edit the
-// other in the same PR. (Pattern matches `contract.cjs` / `contract.js`.)
+// other in the same PR.
 //
 // The SDK build script copies both into `dist/`.
 

package/dist/list.js

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

package/dist/list.native.js

@@ -1,7 +1,8 @@
 // `<List>`, `<ListRow>`, `<ListHeader>`, `<EmptyState>` (native). Binds
 // ./list-view.js to React Native's own primitives; only the imports differ from ./list.js.
 
-import { View, Text, Pressable } from "react-native";
+import { View, Pressable } from "react-native";
+import { Text } from "./bounded-text.native.js";
 import { Card } from "./card.native.js";
 import { makeList } from "./list-view.js";
 

package/dist/loading.js

@@ -1,7 +1,7 @@
 // `<Spinner>` and `<Skeleton>` (web). Binds ./loading-view.js to
 // react-native-web; see ./primitives.js for why not the bare specifier.
 
-import * as ReactNative from "react-native-web";
+import { ReactNative } from "./text-scale.js";
 import { makeLoading } from "./loading-view.js";
 
 export const { Spinner, Skeleton } = makeLoading(ReactNative, { useNativeDriver: false });

package/dist/loading.native.js

@@ -1,7 +1,8 @@
 // `<Spinner>` and `<Skeleton>` (native). Binds ./loading-view.js to React
 // Native's own primitives; only the import differs from ./loading.js.
 
-import { View, Text, Animated, Easing, AccessibilityInfo } from "react-native";
+import { View, Animated, Easing, AccessibilityInfo } from "react-native";
+import { Text } from "./bounded-text.native.js";
 import { makeLoading } from "./loading-view.js";
 
 export const { Spinner, Skeleton } = makeLoading(

package/dist/markdown-input.js

@@ -2,7 +2,7 @@
 // ./markdown-input-view.js to react-native-web's primitives, and to the web
 // `<RichText>` it renders its preview with.
 
-import * as ReactNative from "react-native-web";
+import { ReactNative } from "./text-scale.js";
 import { makeMarkdownInput } from "./markdown-input-view.js";
 import { RichText } from "./richtext.js";
 import { Modal } from "./modal.js";

package/dist/markdown-input.native.js

@@ -2,7 +2,8 @@
 // ./markdown-input-view.js to React Native's own primitives and the native
 // `<RichText>`. Only the imports differ from the web mirror.
 
-import { Text, View, Pressable, TextInput, ScrollView } from "react-native";
+import { View, Pressable, ScrollView } from "react-native";
+import { Text, TextInput } from "./bounded-text.native.js";
 import { makeMarkdownInput } from "./markdown-input-view.js";
 import { RichText } from "./richtext.native.js";
 import { Modal } from "./modal.native.js";

package/dist/modal.js

@@ -1,7 +1,7 @@
 // `<Modal>` (web). Binds ./modal-view.js to react-native-web and the web
 // `<Overlay>`; see ./primitives.js for why not the bare specifier.
 
-import * as ReactNative from "react-native-web";
+import { ReactNative } from "./text-scale.js";
 import { makeModal } from "./modal-view.js";
 import { Overlay } from "./overlay.js";
 

package/dist/modal.native.js

@@ -6,12 +6,12 @@
 import React from "react";
 import {
   View,
-  Text,
   Pressable,
   ScrollView,
   KeyboardAvoidingView,
   Platform,
 } from "react-native";
+import { Text } from "./bounded-text.native.js";
 // Host-provided: the exported app pins it and mounts its provider at the root.
 import { SafeAreaInsetsContext } from "react-native-safe-area-context";
 import { makeModal } from "./modal-view.js";

package/dist/overlay.js

@@ -8,7 +8,7 @@
 // container at `position: fixed`, which is exactly what makes the overlay
 // escape the widget's clipping ancestors.
 
-import * as ReactNative from "react-native-web";
+import { ReactNative } from "./text-scale.js";
 import { makeOverlay } from "./overlay-view.js";
 import { WebModal } from "./web-modal.js";
 

package/dist/people-picker.js

@@ -1,7 +1,7 @@
 // `<PeoplePicker>` (web). Binds ./people-picker-view.js to the web `<Select>`
 // and `<Avatar>`; see ./primitives.js for why not the bare specifier.
 
-import * as ReactNative from "react-native-web";
+import { ReactNative } from "./text-scale.js";
 import { makePeoplePicker } from "./people-picker-view.js";
 import { Select } from "./select.js";
 import { Avatar } from "./detail-parts.js";

package/dist/popover.js

@@ -2,7 +2,7 @@
 // ./menu-view.js and ./tooltip-view.js to react-native-web and the web
 // `<Overlay>`; see ./primitives.js for why not the bare specifier.
 
-import * as ReactNative from "react-native-web";
+import { ReactNative } from "./text-scale.js";
 import { makePopover } from "./popover-view.js";
 import { makeMenu } from "./menu-view.js";
 import { makeTooltip } from "./tooltip-view.js";

package/dist/popover.native.js

@@ -3,7 +3,8 @@
 // differ from ./popover.js, plus the safe-area inset a bottom sheet pads by.
 
 import React from "react";
-import { View, Text, Pressable, ScrollView, Platform, useWindowDimensions } from "react-native";
+import { View, Pressable, ScrollView, Platform, useWindowDimensions } from "react-native";
+import { Text } from "./bounded-text.native.js";
 // Host-provided: the exported app pins it and mounts its provider at the root.
 import { SafeAreaInsetsContext } from "react-native-safe-area-context";
 import { makePopover } from "./popover-view.js";

package/dist/primitives.js

@@ -39,7 +39,7 @@
 // installed dep (no stub), and runtime property access sidesteps the
 // static re-export tracing. Behaviour is identical to the old
 // `react-native` alias path on the web.
-import * as ReactNative from "react-native-web";
+import { ReactNative } from "./text-scale.js";
 import { makeTextInput } from "./text-input-view.js";
 
 export const Text = ReactNative.Text;

package/dist/primitives.native.js

@@ -7,12 +7,10 @@
 // `./primitives.js`.
 
 export {
-  Text,
   View,
   Pressable,
   Image,
   ScrollView,
-  TextInput,
   FlatList,
   SectionList,
   ActivityIndicator,
@@ -20,6 +18,8 @@ export {
   StyleSheet,
   Linking,
 } from "react-native";
+// sc-9168 — bounded to the device font-scale cap; no web twin (no such setting).
+export { Text, TextInput } from "./bounded-text.native.js";
 
 // REQ-WSDK-PLATFORM §6 — `<Icon>` is implemented in one file that runs on
 // both platforms (lucide-react-native ships a working build for both).

package/dist/radio-group.js

@@ -1,7 +1,7 @@
 // `<RadioGroup>` (web). Binds ./radio-group-view.js to react-native-web; see
 // ./primitives.js for why not the bare specifier.
 
-import * as ReactNative from "react-native-web";
+import { ReactNative } from "./text-scale.js";
 import { makeRadioGroup } from "./radio-group-view.js";
 
 export const RadioGroup = makeRadioGroup({

package/dist/radio-group.native.js

@@ -1,7 +1,8 @@
 // `<RadioGroup>` (native). Binds ./radio-group-view.js to React Native's own
 // primitives; only the import differs from ./radio-group.js.
 
-import { View, Text, Pressable, Platform } from "react-native";
+import { View, Pressable, Platform } from "react-native";
+import { Text } from "./bounded-text.native.js";
 import { makeRadioGroup } from "./radio-group-view.js";
 
 export const RadioGroup = makeRadioGroup({ View, Text, Pressable, Platform });

package/dist/richtext.js

@@ -5,7 +5,7 @@
 // specifier for the rolldown optional-peer-dep reason spelled out at the top of
 // ./primitives.js.
 
-import * as ReactNative from "react-native-web";
+import { ReactNative } from "./text-scale.js";
 import { makeRichText } from "./richtext-view.js";
 
 export const RichText = makeRichText(ReactNative);

package/dist/richtext.native.js

@@ -2,7 +2,8 @@
 // ./richtext-view.js to React Native's own primitives. Only the import differs
 // from the web mirror in ./richtext.js.
 
-import { Text, View, Image } from "react-native";
+import { View, Image } from "react-native";
+import { Text } from "./bounded-text.native.js";
 import { makeRichText } from "./richtext-view.js";
 
 export const RichText = makeRichText({ Text, View, Image });

package/dist/search-field.js

@@ -1,7 +1,7 @@
 // `<SearchField>` (web). Binds ./search-field-view.js to react-native-web and
 // the web `<TextField>`; see ./primitives.js for why not the bare specifier.
 
-import * as ReactNative from "react-native-web";
+import { ReactNative } from "./text-scale.js";
 import { makeSearchField } from "./search-field-view.js";
 import { TextField } from "./text-field.js";
 

package/dist/search-field.native.js

@@ -2,7 +2,8 @@
 // primitives and the native `<TextField>`; only the imports differ from
 // ./search-field.js.
 
-import { View, Text, Pressable } from "react-native";
+import { View, Pressable } from "react-native";
+import { Text } from "./bounded-text.native.js";
 import { makeSearchField } from "./search-field-view.js";
 import { TextField } from "./text-field.native.js";
 

package/dist/select.js

@@ -2,7 +2,7 @@
 // `<Overlay>`, `<Button>`, `<Chip>`, `<SearchField>` and `<Spinner>`; see
 // ./primitives.js for why not the bare specifier.
 
-import * as ReactNative from "react-native-web";
+import { ReactNative } from "./text-scale.js";
 import { makeSelect } from "./select-view.js";
 import { Overlay } from "./overlay.js";
 import { Button } from "./button.js";

package/dist/select.native.js

@@ -2,7 +2,8 @@
 // primitives and the native `<Overlay>`, `<Button>`, `<Chip>`,
 // `<SearchField>` and `<Spinner>`; only the imports differ from ./select.js.
 
-import { View, Text, Pressable, ScrollView, Platform } from "react-native";
+import { View, Pressable, ScrollView, Platform } from "react-native";
+import { Text } from "./bounded-text.native.js";
 import { makeSelect } from "./select-view.js";
 import { Overlay } from "./overlay.native.js";
 import { Button } from "./button.native.js";

package/dist/sortable.js

@@ -1,7 +1,7 @@
 // `<SortableList>` and `<Board>` (web). Bind ./sortable-view.js to
 // react-native-web; see ./primitives.js for why not the bare specifier.
 
-import * as ReactNative from "react-native-web";
+import { ReactNative } from "./text-scale.js";
 import { List, ListRow } from "./list.js";
 import { Card } from "./card.js";
 import { Menu } from "./popover.js";

package/dist/sortable.native.js

@@ -2,7 +2,8 @@
 // Native's own primitives; only the imports and the handle style differ from
 // ./sortable.js.
 
-import { View, Text, ScrollView, Animated, PanResponder, Platform, AccessibilityInfo } from "react-native";
+import { View, ScrollView, Animated, PanResponder, Platform, AccessibilityInfo } from "react-native";
+import { Text } from "./bounded-text.native.js";
 import { List, ListRow } from "./list.native.js";
 import { Card } from "./card.native.js";
 import { Menu } from "./popover.native.js";

package/dist/surface-theme.js

@@ -26,8 +26,8 @@ import {
  * derived from an image, so its subtree keeps what it inherited and the scrim
  * plus an explicit light text colour carries the hero.
  *
- * The web Player calls this; the export's generated layout renderer mirrors
- * it — the two hosts must not differ here (CLAUDE.md §8).
+ * The web Player and the export's generated layout renderer both call this,
+ * so the two hosts cannot differ here (CLAUDE.md §8).
  */
 export function surfaceAwareTheme(tenantTheme, backgroundColor) {
   const surfaceTokens = deriveSurfaceTokens(backgroundColor);

package/dist/switch.js

@@ -10,7 +10,7 @@
 //  - it forwards only a label to its `<input>`, dropping the other ARIA props.
 
 import React from "react";
-import * as ReactNative from "react-native-web";
+import { ReactNative } from "./text-scale.js";
 import { makeSwitch } from "./switch-view.js";
 import { DISABLED_OPACITY } from "./form-control-tokens.js";
 import { shareRef } from "./form-control-logic.js";

package/dist/switch.native.js

@@ -1,7 +1,8 @@
 // `<Switch>` (native). Binds ./switch-view.js to React Native's own
 // primitives; only the import differs from ./switch.js.
 
-import { View, Text, Pressable, Switch as PlatformSwitch } from "react-native";
+import { View, Pressable, Switch as PlatformSwitch } from "react-native";
+import { Text } from "./bounded-text.native.js";
 import { makeSwitch } from "./switch-view.js";
 
 export const Switch = makeSwitch({ View, Text, Pressable, Switch: PlatformSwitch });

package/dist/tabs.js

@@ -1,7 +1,7 @@
 // `<Tabs>` (web). Binds ./tabs-view.js to react-native-web; see
 // ./primitives.js for why not the bare specifier.
 
-import * as ReactNative from "react-native-web";
+import { ReactNative } from "./text-scale.js";
 import { makeTabs } from "./tabs-view.js";
 
 export const Tabs = makeTabs(ReactNative);

package/dist/tabs.native.js

@@ -1,7 +1,8 @@
 // `<Tabs>` (native). Binds ./tabs-view.js to React Native's own primitives;
 // only the import differs from ./tabs.js.
 
-import { View, Text, Pressable, ScrollView } from "react-native";
+import { View, Pressable, ScrollView } from "react-native";
+import { Text } from "./bounded-text.native.js";
 import { makeTabs } from "./tabs-view.js";
 
 export const Tabs = makeTabs({ View, Text, Pressable, ScrollView });

package/dist/text-field.js

@@ -1,7 +1,7 @@
 // `<TextField>` (web). Binds ./text-field-view.js to react-native-web; see
 // ./primitives.js for why not the bare specifier.
 
-import * as ReactNative from "react-native-web";
+import { ReactNative } from "./text-scale.js";
 import { makeTextField } from "./text-field-view.js";
 import { TextInput } from "./primitives.js";
 

package/dist/text-field.native.js

@@ -1,7 +1,8 @@
 // `<TextField>` (native). Binds ./text-field-view.js to React Native's own
 // primitives; only the import differs from ./text-field.js.
 
-import { TextInput, View, Text, Pressable } from "react-native";
+import { View, Pressable } from "react-native";
+import { TextInput, Text } from "./bounded-text.native.js";
 import { makeTextField } from "./text-field-view.js";
 
 export const TextField = makeTextField({ TextInput, View, Text, Pressable });

package/dist/text-scale-style.js

@@ -0,0 +1,60 @@
+// sc-12791: device font-scale arithmetic, React-free so node tests can load it.
+
+// Unstyled text renders at 14px in both React Native and react-native-web.
+export const DEFAULT_FONT_SIZE = 14;
+
+// `em` is relative to an already-scaled parent, so it is left alone.
+const ABSOLUTE_LENGTH = /\d(?:px|rem)$/;
+
+function flattenStyle(style, into = {}) {
+  if (Array.isArray(style)) {
+    for (const entry of style) flattenStyle(entry, into);
+  } else if (style && typeof style === "object") {
+    Object.assign(into, style);
+  }
+  return into;
+}
+
+function scaleLength(value, factor) {
+  if (typeof value === "number") return value * factor;
+  if (typeof value === "string" && ABSOLUTE_LENGTH.test(value.trim())) {
+    return `calc(${value.trim()} * ${factor})`;
+  }
+  return undefined;
+}
+
+/**
+ * The multiplier one text element gets under a preview scale, honouring the
+ * same per-element props React Native does.
+ *
+ * @param {number} scale The previewed device font scale.
+ * @param {{ allowFontScaling?: boolean, maxFontSizeMultiplier?: number }} props
+ * @returns {number}
+ */
+export function textScaleFactor(scale, props) {
+  if (!(scale > 1) || props?.allowFontScaling === false) return 1;
+  const cap = props?.maxFontSizeMultiplier;
+  return typeof cap === "number" && cap >= 1 ? Math.min(scale, cap) : scale;
+}
+
+/**
+ * `style` with its font size and line height multiplied by `factor`.
+ *
+ * @param {any} style A React Native style (object, array, or falsy).
+ * @param {number} factor
+ * @param {{ inheritsSize?: boolean }} [options] `inheritsSize` marks text
+ *   nested in already-scaled text: without its own size it inherits the
+ *   parent's, which must not be multiplied twice.
+ * @returns {any} The original style when nothing changes.
+ */
+export function scaleTextStyle(style, factor, { inheritsSize = false } = {}) {
+  if (factor === 1) return style;
+  const flat = flattenStyle(style);
+  const override = {};
+  const fontSize = flat.fontSize ?? (inheritsSize ? undefined : DEFAULT_FONT_SIZE);
+  const scaledFontSize = scaleLength(fontSize, factor);
+  if (scaledFontSize !== undefined) override.fontSize = scaledFontSize;
+  const scaledLineHeight = scaleLength(flat.lineHeight, factor);
+  if (scaledLineHeight !== undefined) override.lineHeight = scaledLineHeight;
+  return Object.keys(override).length > 0 ? [style, override] : style;
+}

package/dist/text-scale.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Previews a device font scale for every SDK `Text` / `TextInput` below it, as
+ * a phone's text-size setting would: font sizes and line heights grow, layout
+ * boxes do not. Web hosts only — native text already follows the device.
+ */
+export function TextScaleProvider(props: { scale?: number; children?: unknown }): unknown;
+
+/** react-native-web's `Text`, following the nearest `TextScaleProvider`. */
+export const Text: unknown;
+/** react-native-web's `TextInput`, following the nearest `TextScaleProvider`. */
+export const TextInput: unknown;

package/dist/text-scale.js

@@ -0,0 +1,40 @@
+// Web twin of ./bounded-text.native.js: previews a device text-size setting.
+// Every SDK web module takes react-native-web from here (text-scale.test.js).
+import React from "react";
+import * as ReactNativeWeb from "react-native-web";
+import { scaleTextStyle, textScaleFactor } from "./text-scale-style.js";
+
+const TextScaleContext = React.createContext(1);
+const ScaledTextAncestorContext = React.createContext(false);
+
+/**
+ * Previews a device font scale for every SDK Text / TextInput below it.
+ * Web hosts only: native text already follows the device setting.
+ *
+ * @param {{ scale?: number, children?: React.ReactNode }} props
+ */
+export function TextScaleProvider({ scale = 1, children }) {
+  const value = Number.isFinite(scale) && scale > 0 ? scale : 1;
+  return React.createElement(TextScaleContext.Provider, { value }, children);
+}
+
+function withTextScale(Base, { displayName, nests = false }) {
+  const Scaled = React.forwardRef(function ScaledText(props, ref) {
+    const scale = React.useContext(TextScaleContext);
+    const insideScaledText = React.useContext(ScaledTextAncestorContext);
+    if (scale === 1) return React.createElement(Base, { ...props, ref });
+    const factor = textScaleFactor(scale, props);
+    const style = scaleTextStyle(props.style, factor, { inheritsSize: insideScaledText });
+    const element = React.createElement(Base, { ...props, ref, style });
+    // Children inherit this size even when this element opted out of scaling.
+    if (!nests || insideScaledText) return element;
+    return React.createElement(ScaledTextAncestorContext.Provider, { value: true }, element);
+  });
+  Scaled.displayName = displayName;
+  return Scaled;
+}
+
+export const Text = withTextScale(ReactNativeWeb.Text, { displayName: "Text", nests: true });
+export const TextInput = withTextScale(ReactNativeWeb.TextInput, { displayName: "TextInput" });
+// Spread, not re-exported; see ./primitives.js for why.
+export const ReactNative = { ...ReactNativeWeb, Text, TextInput };

package/dist/video.js

@@ -9,7 +9,7 @@
 // thumbnail; Safari draws nothing before playback without the fragment.
 
 import React from "react";
-import * as ReactNative from "react-native-web";
+import { ReactNative } from "./text-scale.js";
 
 const FIRST_FRAME = "#t=0.001";
 const FITS = { contain: "contain", cover: "cover" };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colixsystems/widget-sdk",
-  "version": "0.259.0",
+  "version": "0.261.0",
   "description": "Common widget interface for AppStudio. Implements WidgetManifest, WidgetContext, property schema, and helper hooks.",
   "homepage": "https://github.com/Colix-AB/AppStudio",
   "type": "module",
@@ -29,6 +29,11 @@
       "import": "./dist/host.js",
       "default": "./dist/host.js"
     },
+    "./text-scale": {
+      "types": "./dist/text-scale.d.ts",
+      "import": "./dist/text-scale.js",
+      "default": "./dist/text-scale.js"
+    },
     "./contract": {
       "types": "./dist/index.d.ts",
       "require": "./dist/contract.cjs",
@@ -56,6 +61,7 @@
   ],
   "scripts": {
     "build": "node scripts/build.js",
+    "generate:contract": "node scripts/contract-cjs.js",
     "test": "node --test \"src/__tests__/*.test.js\""
   },
   "engines": {