@colixsystems/widget-sdk 0.260.0 → 0.261.0

package/README.md

@@ -85,7 +85,11 @@ See the design reference for the full architecture: [`docs/architecture/widget-m
 
 ## Status
 
-`v0.260.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.261.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.261.0 (contract 1.211.0)
+
+**The Builder can preview that bound.** On the web, `<Text>` and `<TextInput>` (and every SDK component built on them) follow a host's `TextScaleProvider`, so the Studio canvas can show a page at the largest phone text size an exported app allows. Nothing changes for a widget: outside the preview the scale is 1×.
 
 ### What's new in 0.260.0 (contract 1.211.0)
 

package/dist/accordion.js

@@ -1,7 +1,8 @@
 // `<Accordion>` / `<AccordionItem>` (web). Binds ./accordion-view.js to
 // react-native-web; see ./primitives.js for why not the bare specifier.
 
-import { View, Text, Pressable } from "react-native-web";
+import { View, Pressable } from "react-native-web";
+import { Text } from "./text-scale.js";
 import { makeAccordion } from "./accordion-view.js";
 
 export const { Accordion, AccordionItem } = makeAccordion({ View, Text, Pressable });

package/dist/banner.js

@@ -1,7 +1,7 @@
 // `<Banner>` (web). Binds ./banner-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 { makeBanner } from "./banner-view.js";
 
 export const Banner = makeBanner(ReactNative);

package/dist/button.js

@@ -2,7 +2,7 @@
 // react-native-web, the CSS gradient and the web `<Spinner>`; see
 // ./primitives.js for why not the bare specifier.
 
-import * as ReactNative from "react-native-web";
+import { ReactNative } from "./text-scale.js";
 import { Gradient } from "./gradient.js";
 import { Spinner } from "./loading.js";
 import { makeButton, BUTTON_VARIANTS } from "./button-view.js";

package/dist/card-photo.js

@@ -2,7 +2,7 @@
 // `background-position` is what keeps the chosen part of a crop in frame.
 
 import React from "react";
-import * as ReactNative from "react-native-web";
+import { ReactNative } from "./text-scale.js";
 
 // A quote, backslash or newline would end the CSS `url("…")` early.
 function cssUrl(uri) {

package/dist/card.js

@@ -1,7 +1,7 @@
 // `<Card>` (web). Binds ./card-view.js to react-native-web and the CSS
 // gradient; see ./primitives.js for why not the bare specifier.
 
-import * as ReactNative from "react-native-web";
+import { ReactNative } from "./text-scale.js";
 import { Gradient } from "./gradient.js";
 import { Photo } from "./card-photo.js";
 import { makeCard } from "./card-view.js";

package/dist/chart.js

@@ -1,7 +1,7 @@
 // `<Chart>` (web). Binds ./chart-view.js to react-native-web and the host's
 // react-native-svg; see ./primitives.js for why not the bare specifier.
 
-import * as ReactNative from "react-native-web";
+import { ReactNative } from "./text-scale.js";
 import Svg, { G, Path, Line, Circle, Text as SvgText } from "react-native-svg";
 import { Skeleton } from "./loading.js";
 import { EmptyState } from "./list.js";

package/dist/checkbox.js

@@ -1,7 +1,7 @@
 // `<Checkbox>` (web). Binds ./checkbox-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 { makeCheckbox } from "./checkbox-view.js";
 
 export const Checkbox = makeCheckbox({

package/dist/chip.js

@@ -2,7 +2,7 @@
 // ./primitives.js for why not the bare specifier. Only the web keeps a single
 // tab stop per single-choice group.
 
-import * as ReactNative from "react-native-web";
+import { ReactNative } from "./text-scale.js";
 import { makeChip } from "./chip-view.js";
 
 export const { Chip, ChipGroup } = makeChip(ReactNative, { web: true });

package/dist/confirm-dialog.js

@@ -2,7 +2,7 @@
 // and the web `<Modal>`, `<Button>` and `<Spinner>`; see ./primitives.js for
 // why not the bare specifier.
 
-import { Text } from "react-native-web";
+import { Text } from "./text-scale.js";
 import { makeConfirmDialog } from "./confirm-dialog-view.js";
 import { Modal } from "./modal.js";
 import { Button } from "./button.js";

package/dist/data-table.js

@@ -2,7 +2,7 @@
 // web list, loading, menu and button parts; 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, ListHeader, EmptyState } from "./list.js";
 import { Skeleton } from "./loading.js";
 import { Menu } from "./popover.js";

package/dist/datetimepicker.js

@@ -2,7 +2,8 @@
 // and the themed calendar sheet; see ./primitives.js for why not the bare
 // specifier.
 
-import { View, Text, Pressable, ScrollView, Platform } from "react-native-web";
+import { View, Pressable, ScrollView, Platform } from "react-native-web";
+import { Text } from "./text-scale.js";
 import { makeDateTimePicker } from "./datetimepicker-view.js";
 import { makeDateTimeSheet } from "./datetimepicker-sheet.js";
 import { Overlay } from "./overlay.js";

package/dist/detail-parts.js

@@ -2,7 +2,7 @@
 // ./detail-parts-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 Svg, { Circle } from "react-native-svg";
 import { makeDetailParts } from "./detail-parts-view.js";
 

package/dist/emoji-picker.js

@@ -7,7 +7,7 @@
 // specifier for the rolldown optional-peer-dep reason at the top of
 // ./primitives.js.
 
-import * as ReactNative from "react-native-web";
+import { ReactNative } from "./text-scale.js";
 import { makeEmojiPicker } from "./emoji-picker-view.js";
 import { Overlay } from "./overlay.js";
 import { TextInput } from "./primitives.js";

package/dist/file-image.js

@@ -1,7 +1,7 @@
 // `<FileImage>` (web). Binds ./file-image-view.js to react-native-web and the
 // web `<Skeleton>`; see ./primitives.js for why not the bare specifier.
 
-import * as ReactNative from "react-native-web";
+import { ReactNative } from "./text-scale.js";
 import { Skeleton } from "./loading.js";
 import { makeFileImage } from "./file-image-view.js";
 

package/dist/file-upload.js

@@ -4,7 +4,8 @@
 // button, which is the whole control on native.
 
 import React from "react";
-import { View, Text, Pressable, Platform } from "react-native-web";
+import { View, Pressable, Platform } from "react-native-web";
+import { Text } from "./text-scale.js";
 import { makeFileUpload } from "./file-upload-view.js";
 import { FilePicker } from "./filepicker.js";
 import { Button } from "./button.js";

package/dist/filter-bar.js

@@ -2,7 +2,7 @@
 // web `<SearchField>`, `<Select>`, `<Chip>`, `<Button>` and `<Modal>`; see
 // ./primitives.js for why not the bare specifier.
 
-import * as ReactNative from "react-native-web";
+import { ReactNative } from "./text-scale.js";
 import { makeFilterBar } from "./filter-bar-view.js";
 import { SearchField } from "./search-field.js";
 import { Select } from "./select.js";

package/dist/form.js

@@ -2,7 +2,7 @@
 // (web). Binds ./form-view.js to the web primitives and the web `<Grid>`; see
 // ./primitives.js for why not the bare specifier.
 
-import * as ReactNative from "react-native-web";
+import { ReactNative } from "./text-scale.js";
 import { makeForm } from "./form-view.js";
 import { Grid } from "./grid.js";
 

package/dist/gradient.js

@@ -17,7 +17,7 @@
 // `gradientAngleToVector` from the contract. Keep the two in lockstep.
 
 import React from "react";
-import * as ReactNative from "react-native-web";
+import { ReactNative } from "./text-scale.js";
 import { gradientStops } from "./gradient-stops.js";
 
 const DEFAULT_ANGLE = 180;

package/dist/grid.js

@@ -1,7 +1,7 @@
 // `<Grid>` (web). Binds ./grid-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 { makeGrid } from "./grid-view.js";
 
 export const Grid = makeGrid({ View: ReactNative.View });

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/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/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/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/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/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/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/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/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/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/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/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/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/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-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.260.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",