@colixsystems/widget-sdk 0.199.0 → 0.200.0

package/README.md

@@ -83,7 +83,11 @@ See the design reference for the full architecture: [`docs/architecture/widget-m
 
 ## Status
 
-`v0.199.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.200.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.200.0 (contract 1.159.0)
+
+**Host sign-in screen: a logo on the card.** `resolveLoginLogoUrl(login, appLogoUrl)` answers which logo the built-in sign-in card shows: the author's own sign-in logo (`login.logoUrlResolved`, the host's resolution of `login.logoAssetId`, else the pasted `login.logoUrl`), else the app logo the host already resolved, else `null` for the stock mark. Every candidate passes the same scheme allowlist as the sign-in background, so a `javascript:` or `data:` value never reaches either host. It is kept apart from `normaliseLoginDesign` because an app logo alone is not an authored design. Widgets are unaffected: this is the host surface (`@colixsystems/widget-sdk/host`), and the widget contract version does not change.
 
 ### What's new in 0.199.0 (contract 1.159.0)
 

package/dist/emoji-picker.js

@@ -10,5 +10,6 @@
 import * as ReactNative from "react-native-web";
 import { makeEmojiPicker } from "./emoji-picker-view.js";
 import { Overlay } from "./overlay.js";
+import { TextInput } from "./primitives.js";
 
-export const EmojiPicker = makeEmojiPicker({ ...ReactNative, Overlay });
+export const EmojiPicker = makeEmojiPicker({ ...ReactNative, TextInput, Overlay });

package/dist/host.d.ts

@@ -460,6 +460,12 @@ export interface LoginDesign {
 /** The sign-in screen's authored design, or null when nothing is configured. */
 export function normaliseLoginDesign(raw: unknown): LoginDesign | null;
 
+/** sc-10845 — the sign-in card's logo: the author's own, else the app logo. */
+export function resolveLoginLogoUrl(
+  login: unknown,
+  appLogoUrl: string | null | undefined,
+): string | null;
+
 /** sc-7800 — true when a stored value is a `theme:<path>` colour binding. */
 export function isThemeTokenRef(value: unknown): boolean;
 

package/dist/host.js

@@ -128,6 +128,7 @@ export {
   LOGIN_TEXT_MAX_LENGTH,
   normaliseThemeGradient,
   normaliseLoginDesign,
+  resolveLoginLogoUrl,
 } from "./theme-background.js";
 
 // sc-8448: one DATETIME local-clock conversion for the picker and the Studio.

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.199.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",