@colixsystems/widget-sdk 0.198.0 → 0.200.0

package/dist/linter.js

@@ -1081,6 +1081,33 @@ function _jsxOpenTagEnd(source, from) {
   return source.length;
 }
 
+// sc-10721 — a useBundledAsset literal must name a file the package ships.
+const BUNDLED_ASSET_CALL_RE =
+  /\buseBundledAsset\s*\(\s*(?:"([^"\n]*)"|'([^'\n]*)'|`([^`]*)`)\s*[,)]/g;
+
+function _bundledAssetRules(source, assetFiles) {
+  if (!Array.isArray(assetFiles)) return [];
+  const findings = [];
+  // Comments blanked, strings kept: the file name IS a string literal.
+  const code = _stripNonCode(source, { keepStrings: true });
+  const sourceLines = source.split(/\r?\n/);
+  for (const match of code.matchAll(BUNDLED_ASSET_CALL_RE)) {
+    const name = match[1] || match[2] || match[3] || "";
+    if (name.includes("${") || assetFiles.includes(name)) continue;
+    const line = code.slice(0, match.index).split(/\r?\n/).length;
+    findings.push({
+      rule: "bundled-asset-missing",
+      severity: "error",
+      label:
+        `useBundledAsset("${name}") names a file that is not in the package's ` +
+        "assets/ directory. Add the file there or correct the name.",
+      line,
+      snippet: (sourceLines[line - 1] || "").trim().slice(0, 200),
+    });
+  }
+  return findings;
+}
+
 // sc-4649 / sc-4686 — payment-currency.
 //
 // A widget must not name a currency AT ALL. Each workspace charges its app users
@@ -2080,6 +2107,7 @@ export function lintSource(source, options) {
   findings.push(..._translationApiRules(source));
   findings.push(..._handBuiltPageUrlRules(source));
   findings.push(..._lucideIconRules(source));
+  findings.push(..._bundledAssetRules(source, options && options.assetFiles));
   // sc-2353 / sc-5897 — widget source must be self-contained: a referenced
   // `React` global or SDK export with no import throws at render.
   findings.push(..._selfContainedReferenceRules(source));

package/dist/manifest.cjs

@@ -329,6 +329,7 @@ function validateManifest(m) {
 }
 
 module.exports = {
+  TRANSLATIONS_MAX_KEYS,
   validateManifest,
   validateManifestTranslations,
   canonicalCategory,

package/dist/manifest.js

@@ -375,6 +375,7 @@ function validateManifest(m) {
 }
 
 export {
+  TRANSLATIONS_MAX_KEYS,
   validateManifest,
   validateManifestTranslations,
   canonicalCategory,

package/dist/markdown-input.js

@@ -6,5 +6,10 @@ import * as ReactNative from "react-native-web";
 import { makeMarkdownInput } from "./markdown-input-view.js";
 import { RichText } from "./richtext.js";
 import { Overlay } from "./overlay.js";
+import { TextInput } from "./primitives.js";
 
-export const MarkdownInput = makeMarkdownInput(ReactNative, RichText, Overlay);
+export const MarkdownInput = makeMarkdownInput(
+  { ...ReactNative, TextInput },
+  RichText,
+  Overlay,
+);

package/dist/primitives.js

@@ -40,13 +40,14 @@
 // 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 { makeTextInput } from "./text-input-view.js";
 
 export const Text = ReactNative.Text;
 export const View = ReactNative.View;
 export const Pressable = ReactNative.Pressable;
 export const Image = ReactNative.Image;
 export const ScrollView = ReactNative.ScrollView;
-export const TextInput = ReactNative.TextInput;
+export const TextInput = makeTextInput(ReactNative.TextInput);
 // Additional cross-platform primitives the AI agent + handwritten
 // widgets commonly reach for. All work in both react-native-web and
 // native react-native without per-platform code.

package/dist/text-field.js

@@ -3,5 +3,6 @@
 
 import * as ReactNative from "react-native-web";
 import { makeTextField } from "./text-field-view.js";
+import { TextInput } from "./primitives.js";
 
-export const TextField = makeTextField(ReactNative);
+export const TextField = makeTextField({ ...ReactNative, TextInput });

package/dist/text-input-view.js

@@ -0,0 +1,27 @@
+// The web `<TextInput>`: the host's input with the touch font floor. Native
+// has no focus zoom, so ./primitives.native.js re-exports RN's input as is.
+
+import React from "react";
+import { withTouchInputFontFloor } from "./touch-input-font-floor.js";
+
+function hasCoarsePointer() {
+  return (
+    typeof window !== "undefined" &&
+    typeof window.matchMedia === "function" &&
+    window.matchMedia("(pointer: coarse)").matches
+  );
+}
+
+/**
+ * @param {any} BaseTextInput react-native-web's `TextInput`.
+ * @returns a `TextInput` taking the same props and ref.
+ */
+export function makeTextInput(BaseTextInput) {
+  return React.forwardRef(function TextInput({ style, ...rest }, ref) {
+    return React.createElement(BaseTextInput, {
+      ...rest,
+      ref,
+      style: withTouchInputFontFloor(style, hasCoarsePointer()),
+    });
+  });
+}

package/dist/theme-background.cjs

@@ -68,8 +68,8 @@ function normaliseImageUrl(raw) {
   if (typeof raw !== "string") return null;
   const url = raw.trim();
   if (!url) return null;
-  // A workspace upload is served same-origin as an absolute path.
-  if (url.startsWith("/") && !url.startsWith("//")) return url;
+  // A same-origin path; `/\host` and whitespace are foreign hosts to a browser.
+  if (/^\/(?![/\\])\S*$/.test(url)) return url;
   return /^https?:\/\/\S+$/i.test(url) ? url : null;
 }
 
@@ -135,4 +135,27 @@ function normaliseLoginDesign(raw) {
   return configured ? design : null;
 }
 
-module.exports = { LOGIN_TEXT_MAX_LENGTH, normaliseThemeGradient, normaliseLoginDesign };
+/**
+ * sc-10845 — the sign-in card's logo: the author's own, else the app logo,
+ * else null. Hosts resolve `logoAssetId` into `logoUrlResolved` first. Not in
+ * `normaliseLoginDesign`: an app logo alone is not an authored design.
+ *
+ * @param {object|null|undefined} login - `themeConfig.login`.
+ * @param {string|null|undefined} appLogoUrl - the host's resolved app logo.
+ * @returns {string|null}
+ */
+function resolveLoginLogoUrl(login, appLogoUrl) {
+  const own =
+    login && typeof login === "object"
+      ? normaliseImageUrl(login.logoUrlResolved) ||
+        normaliseImageUrl(login.logoUrl)
+      : null;
+  return own || normaliseImageUrl(appLogoUrl);
+}
+
+module.exports = {
+  LOGIN_TEXT_MAX_LENGTH,
+  normaliseThemeGradient,
+  normaliseLoginDesign,
+  resolveLoginLogoUrl,
+};

package/dist/theme-background.js

@@ -60,8 +60,8 @@ function normaliseImageUrl(raw) {
   if (typeof raw !== "string") return null;
   const url = raw.trim();
   if (!url) return null;
-  // A workspace upload is served same-origin as an absolute path.
-  if (url.startsWith("/") && !url.startsWith("//")) return url;
+  // A same-origin path; `/\host` and whitespace are foreign hosts to a browser.
+  if (/^\/(?![/\\])\S*$/.test(url)) return url;
   return /^https?:\/\/\S+$/i.test(url) ? url : null;
 }
 
@@ -126,3 +126,21 @@ export function normaliseLoginDesign(raw) {
   const configured = Object.values(design).some((value) => value !== null);
   return configured ? design : null;
 }
+
+/**
+ * sc-10845 — the sign-in card's logo: the author's own, else the app logo,
+ * else null. Hosts resolve `logoAssetId` into `logoUrlResolved` first. Not in
+ * `normaliseLoginDesign`: an app logo alone is not an authored design.
+ *
+ * @param {object|null|undefined} login - `themeConfig.login`.
+ * @param {string|null|undefined} appLogoUrl - the host's resolved app logo.
+ * @returns {string|null}
+ */
+export function resolveLoginLogoUrl(login, appLogoUrl) {
+  const own =
+    login && typeof login === "object"
+      ? normaliseImageUrl(login.logoUrlResolved) ||
+        normaliseImageUrl(login.logoUrl)
+      : null;
+  return own || normaliseImageUrl(appLogoUrl);
+}

package/dist/touch-input-font-floor.js

@@ -0,0 +1,22 @@
+// iOS Safari zooms the page when a focused field's text is under 16px, and
+// never zooms back out. Platform-free so it is testable without a DOM.
+
+import { flattenStyle } from "./flatten-style.js";
+
+export const MIN_TOUCH_INPUT_FONT_SIZE = 16;
+
+/**
+ * `style` with its font size raised to the touch floor. An unset size is
+ * floored too: react-native-web's own input default is 14px.
+ *
+ * @param {object|Array|null|undefined|false} style
+ * @param {boolean} isTouch whether the primary pointer is a finger
+ * @returns {object|Array|null|undefined|false} `style` itself when unchanged.
+ */
+export function withTouchInputFontFloor(style, isTouch) {
+  if (!isTouch) return style;
+  const { fontSize } = flattenStyle(style);
+  if (typeof fontSize === "string") return style;
+  if (fontSize >= MIN_TOUCH_INPUT_FONT_SIZE) return style;
+  return [style, { fontSize: MIN_TOUCH_INPUT_FONT_SIZE }];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colixsystems/widget-sdk",
-  "version": "0.198.0",
+  "version": "0.200.0",
   "description": "Common widget interface for AppStudio. Implements WidgetManifest, WidgetContext, property schema, and helper hooks.",
   "homepage": "https://github.com/Colix-AB/AppStudio",
   "type": "module",
@@ -35,6 +35,12 @@
       "import": "./dist/contract.js",
       "default": "./dist/contract.cjs"
     },
+    "./bundled-assets": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/bundled-assets.cjs",
+      "import": "./dist/bundled-assets.js",
+      "default": "./dist/bundled-assets.cjs"
+    },
     "./src/webbundle.js": "./src/webbundle.js"
   },
   "bin": {

package/src/contract.js

@@ -1171,6 +1171,20 @@ const HOOKS = [
     requiredContextSlice: ["assets.list"],
     scopes: null,
   },
+  {
+    name: "useBundledAsset",
+    signature: "useBundledAsset(fileName)",
+    description:
+      "Returns the URL of an image or sound file the widget package ships in " +
+      "its assets/ directory, or null when the package has no file with that " +
+      "name. Only an uploaded package can bundle files; a widget written in " +
+      "the Studio has none.",
+    returnShape: {
+      "(returns)": "string | null",
+    },
+    requiredContextSlice: ["widget.assets"],
+    scopes: null,
+  },
   {
     name: "useFilestoreFiles",
     signature: "useFilestoreFiles({ spaceType, recordId, folderId, q, type })",
@@ -2884,6 +2898,19 @@ const ACTION_SCRIPT_GLOBALS = [
 // Mirrors action.service.js SCRIPT_MAX_BYTES.
 const ACTION_SCRIPT_MAX_BYTES = 200 * 1024;
 
+// The one package size limit; the backend derives its upload caps from it.
+const PACKAGE_MAX_BYTES = 12 * 1024 * 1024;
+
+const BUNDLED_ASSETS = {
+  directory: "assets",
+  maxFiles: 50,
+  maxNameLength: 64,
+  types: {
+    image: { extensions: ["png", "jpg", "jpeg", "gif", "webp"] },
+    audio: { extensions: ["mp3", "m4a", "wav"] },
+  },
+};
+
 /**
  * sc-4915 — the trigger set a manifest action declares, canonically ordered.
  *
@@ -3067,9 +3094,15 @@ const WIDGET_CONTEXT_SHAPE = {
   },
   widget: {
     description:
-      "Identity of the currently rendered widget instance ({ id, version }).",
+      "Identity of the currently rendered widget instance ({ id, version }) " +
+      "and the files its package bundles.",
     required: true,
-    fields: { id: "manifest.id", version: "manifest.version" },
+    fields: {
+      id: "manifest.id",
+      version: "manifest.version",
+      assets:
+        "{ [fileName]: string } — bundled file name → absolute URL; {} when the package bundles nothing",
+    },
   },
   // REQ-LAY-08 — optional host layout hint backing useFill(). True when the
   // host sized this widget to fill its layout slot's available height (a
@@ -5264,7 +5297,11 @@ const CONTRACT = deepFreeze({
   //    asset carrying `durationMs`. New `useHardwareBack(handler)` walks a
   //    widget's own pages on Android's back button (optional
   //    `ctx.navigation.onHardwareBack`; unsupported on the web).
-  version: "1.158.0",
+  // 1.159.0: additive (sc-10721) — a package may ship images and sounds in a
+  //    flat `assets/` directory (`bundledAssets`, within `packageMaxBytes`).
+  //    New `useBundledAsset(fileName)` resolves one through the new
+  //    `widget.assets` map; linter rule `bundled-asset-missing` (error).
+  version: "1.159.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,
@@ -5274,6 +5311,8 @@ const CONTRACT = deepFreeze({
   actionTriggerTypes: ACTION_TRIGGER_TYPES,
   actionScriptGlobals: ACTION_SCRIPT_GLOBALS,
   actionScriptMaxBytes: ACTION_SCRIPT_MAX_BYTES,
+  packageMaxBytes: PACKAGE_MAX_BYTES,
+  bundledAssets: BUNDLED_ASSETS,
   themeTokens: DEFAULT_THEME_TOKENS,
   themeColorTokens: THEME_COLOR_TOKENS,
   themeComponents: THEME_COMPONENTS,