@colixsystems/widget-sdk 0.116.0 → 0.118.0

package/README.md

@@ -70,7 +70,54 @@ See the design reference for the full architecture: [`docs/architecture/widget-m
 
 ## Status
 
-`v0.112.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.118.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.118.0 (contract 1.90.0)
+
+**A `styleSchema` field's `default` now actually applies.** Declaring `default` on a style field wrote it into the manifest and nothing ever read it back, so a widget's own styling baseline — and any design saved from the Widget Builder preview — was silently dropped on the next render. The host now resolves it onto `props.style`.
+
+It is the **weakest** layer, deliberately: it applies only when nothing above it sets that field.
+
+```
+styleSchema `default`  ->  palette / components.<scope>  ->  widgetStyles[manifestId]  ->  per-instance props.style
+```
+
+So a workspace theme still outranks a widget's own baseline, and a field you leave undefaulted keeps following the theme exactly as before. Nothing changes for a widget that declares no style defaults.
+
+The host still does **not** apply style to elements — your widget owns placement and keeps reading `props.style.<field>` (or `useWidgetStyle()`) and applying each value where it chooses:
+
+```jsx
+const style = useWidgetStyle();
+<View style={[styles.card, style.cardBackground && { backgroundColor: style.cardBackground }]}>
+```
+
+Keep `themeDefault` for a fallback that IS a theme token: it stays display-only (a greyed placeholder in the Style panel) so the field tracks the workspace theme. Use `default` for a literal constant your code genuinely falls back to — that value now reaches `props.style`, so it must match what your code applies.
+
+### What's new in 0.117.0 (contract 1.89.0)
+
+**`expo-sensors` is a vetted import — widgets can read device motion.** The allowlist held no sensor package, so a step counter, a shake control, a tilt/level, or a compass had nothing to read the hardware with. `expo-sensors` (Accelerometer, Gyroscope, Magnetometer, DeviceMotion, Barometer, Pedometer, LightSensor) is now on the list as **native-only** (`platforms: ["native"]`, category `sensors`) and pinned by the Expo export.
+
+Native-only is deliberate rather than a gap: the package's own web build derives "acceleration" from `deviceorientation` **angles**, not real motion, so a shake threshold tuned in the Player would behave differently in the exported app. Split the widget and read the browser API directly on web:
+
+```jsx
+// widget.native.jsx
+import { Accelerometer } from "expo-sensors";
+
+Accelerometer.setUpdateInterval(100);
+const sub = Accelerometer.addListener(({ x, y, z }) => setReading({ x, y, z }));
+return () => sub.remove();          // ALWAYS remove it — a live sensor drains the battery
+```
+
+```jsx
+// widget.web.jsx — window.DeviceMotionEvent exposes the same hardware
+const onMotion = (e) => setReading(e.accelerationIncludingGravity);
+window.addEventListener("devicemotion", onMotion);
+return () => window.removeEventListener("devicemotion", onMotion);
+```
+
+Start the reading from a **user gesture** on both hosts — iOS Safari also needs an explicit `DeviceMotionEvent.requestPermission()` grant, and neither host delivers readings to a listener attached on mount.
+
+**Fixed: a `expo-haptics` widget failed the native build.** `expo-haptics` has been vetted since the package expansion but was never pinned in the exported app's `package.json`, so a widget importing it rendered in the web Player and broke the Expo bundle with "Unable to resolve module expo-haptics". It is pinned now, and the pairing is no longer hand-maintained: every native-capable entry on the vetted list is checked against the export's dependency set by a contract-derived test.
 
 ### What's new in 0.116.0 (contract 1.88.0)
 

package/dist/contract.cjs

@@ -1967,8 +1967,11 @@ const MANIFEST_SCHEMA = {
       "exposes; the Studio Properties Panel renders a \"Style\" section from " +
       "it. The author's resolved values are delivered to the widget under " +
       "props.style (one object keyed by style-field name); the widget reads " +
-      "props.style.<field> and applies each wherever it chooses. The host " +
-      "never auto-applies style — the widget owns placement.",
+      "props.style.<field> and applies each wherever it chooses. A field's " +
+      "own `default` is resolved onto props.style as the WEAKEST layer " +
+      "(sc-6750): it applies only when no theme layer and no per-instance " +
+      "value sets that field. The host never applies style to elements " +
+      "— the widget owns placement.",
     default: {},
   },
   rendersOwnChrome: {
@@ -2571,6 +2574,13 @@ const VETTED_IMPORTS = [
     description:
       "Renders a QR code, drawn as SVG through the vetted react-native-svg — so one `<QRCode value={…} size={…} />` covers both platforms with no split file. Pure JS with no native module of its own: the web host resolves it and the Expo export pins it, exactly like date-fns. Its `text-encoding` polyfill is opt-in for React Native < 0.75 only; the export ships RN 0.85.3, which has a global TextEncoder, so the Metro transformer that package documents is deliberately not wired up.",
   },
+  {
+    specifier: "expo-sensors",
+    platforms: ["native"],
+    category: "sensors",
+    description:
+      "Device motion hardware on the Expo export: Accelerometer, Gyroscope, Magnetometer, DeviceMotion, Barometer, Pedometer and LightSensor, each read as an addListener subscription with setUpdateInterval — always remove the subscription on unmount, a sensor left running drains the battery. Expo SDK 56 ships 56.0.x. Native-only on purpose: the package's own web build derives acceleration from deviceorientation ANGLES rather than real motion, so a shake or tilt threshold tuned on one host would read differently on the other. Author it in widget.native.jsx and pair it with a widget.web.jsx reading window.DeviceMotionEvent (accelerationIncludingGravity / rotationRate), the browser API the same hardware exposes. Both hosts need a user gesture before readings start, and iOS Safari additionally needs an explicit DeviceMotionEvent.requestPermission() grant — so gate the reading behind a Pressable, never start it on mount.",
+  },
 ];
 
 // sc-1064: CORE React infrastructure specifiers the host RESOLVES at runtime
@@ -3500,7 +3510,24 @@ const CONTRACT = deepFreeze({
   // widget can open at SCREEN level. Everything before it was clipped by the
   // layout container the widget sits in, so a preview or dialog could not leave
   // the widget's own tile on either host.
-  version: "1.88.0",
+  // 1.89.0: additive — `expo-sensors` joins VETTED_IMPORTS as a native-only
+  // `sensors` package (Accelerometer / Gyroscope / DeviceMotion / Barometer /
+  // Pedometer / LightSensor). Widgets had no path to device motion at all: the
+  // allowlist held no sensor package, so a step counter, a tilt/shake control,
+  // a level, or a compass was unbuildable. Native-only because the package's
+  // web build reads deviceorientation angles rather than real acceleration —
+  // the web half is a widget.web.jsx over window.DeviceMotionEvent. Pinned in
+  // the compiler's export dependencies, like every other native-module member.
+  // 1.90.0: additive (sc-6750) — a `styleSchema` field's declared `default`
+  // now RESOLVES onto `props.style`, as the weakest style layer. It was
+  // written into the manifest and then read by nothing, so an author's saved
+  // colour was silently dropped on the next render. Precedence is unchanged
+  // above it: styleSchema `default` -> palette/`components.<scope>` ->
+  // `widgetStyles[manifestId]` -> per-instance `props.style`, so a workspace
+  // theme still outranks a widget's own baseline and a field the author never
+  // defaulted follows the theme exactly as before. The host still never
+  // applies style to elements — the widget owns placement.
+  version: "1.90.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,

package/dist/contract.js

@@ -1967,8 +1967,11 @@ const MANIFEST_SCHEMA = {
       "exposes; the Studio Properties Panel renders a \"Style\" section from " +
       "it. The author's resolved values are delivered to the widget under " +
       "props.style (one object keyed by style-field name); the widget reads " +
-      "props.style.<field> and applies each wherever it chooses. The host " +
-      "never auto-applies style — the widget owns placement.",
+      "props.style.<field> and applies each wherever it chooses. A field's " +
+      "own `default` is resolved onto props.style as the WEAKEST layer " +
+      "(sc-6750): it applies only when no theme layer and no per-instance " +
+      "value sets that field. The host never applies style to elements " +
+      "— the widget owns placement.",
     default: {},
   },
   rendersOwnChrome: {
@@ -2571,6 +2574,13 @@ const VETTED_IMPORTS = [
     description:
       "Renders a QR code, drawn as SVG through the vetted react-native-svg — so one `<QRCode value={…} size={…} />` covers both platforms with no split file. Pure JS with no native module of its own: the web host resolves it and the Expo export pins it, exactly like date-fns. Its `text-encoding` polyfill is opt-in for React Native < 0.75 only; the export ships RN 0.85.3, which has a global TextEncoder, so the Metro transformer that package documents is deliberately not wired up.",
   },
+  {
+    specifier: "expo-sensors",
+    platforms: ["native"],
+    category: "sensors",
+    description:
+      "Device motion hardware on the Expo export: Accelerometer, Gyroscope, Magnetometer, DeviceMotion, Barometer, Pedometer and LightSensor, each read as an addListener subscription with setUpdateInterval — always remove the subscription on unmount, a sensor left running drains the battery. Expo SDK 56 ships 56.0.x. Native-only on purpose: the package's own web build derives acceleration from deviceorientation ANGLES rather than real motion, so a shake or tilt threshold tuned on one host would read differently on the other. Author it in widget.native.jsx and pair it with a widget.web.jsx reading window.DeviceMotionEvent (accelerationIncludingGravity / rotationRate), the browser API the same hardware exposes. Both hosts need a user gesture before readings start, and iOS Safari additionally needs an explicit DeviceMotionEvent.requestPermission() grant — so gate the reading behind a Pressable, never start it on mount.",
+  },
 ];
 
 // sc-1064: CORE React infrastructure specifiers the host RESOLVES at runtime
@@ -3500,7 +3510,24 @@ const CONTRACT = deepFreeze({
   // widget can open at SCREEN level. Everything before it was clipped by the
   // layout container the widget sits in, so a preview or dialog could not leave
   // the widget's own tile on either host.
-  version: "1.88.0",
+  // 1.89.0: additive — `expo-sensors` joins VETTED_IMPORTS as a native-only
+  // `sensors` package (Accelerometer / Gyroscope / DeviceMotion / Barometer /
+  // Pedometer / LightSensor). Widgets had no path to device motion at all: the
+  // allowlist held no sensor package, so a step counter, a tilt/shake control,
+  // a level, or a compass was unbuildable. Native-only because the package's
+  // web build reads deviceorientation angles rather than real acceleration —
+  // the web half is a widget.web.jsx over window.DeviceMotionEvent. Pinned in
+  // the compiler's export dependencies, like every other native-module member.
+  // 1.90.0: additive (sc-6750) — a `styleSchema` field's declared `default`
+  // now RESOLVES onto `props.style`, as the weakest style layer. It was
+  // written into the manifest and then read by nothing, so an author's saved
+  // colour was silently dropped on the next render. Precedence is unchanged
+  // above it: styleSchema `default` -> palette/`components.<scope>` ->
+  // `widgetStyles[manifestId]` -> per-instance `props.style`, so a workspace
+  // theme still outranks a widget's own baseline and a field the author never
+  // defaulted follows the theme exactly as before. The host still never
+  // applies style to elements — the widget owns placement.
+  version: "1.90.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,

package/dist/devserver.js

@@ -67,32 +67,38 @@ import {
   shimSpecifierFromSlug,
 } from "./dev-shims.js";
 import { bundleWebEntry } from "./webbundle.js";
+import {
+  findImportStatements,
+  findRelativeImportStatements,
+} from "./flatten-entry.js";
 
 // Bare-import / relative-import detection. The loader rewrites bare specifiers
 // in the ENTRY to client-side blob shims, so they resolve fine. Relative
 // imports in a SINGLE-FILE entry have nowhere to resolve — single-file mode
 // refuses them with guidance. In directory mode, relative imports in the entry
 // AND in siblings are rewritten to absolute dev-server URLs.
-const RELATIVE_IMPORT_RE =
-  /(?:^|\n)\s*(?:import|export)[^;\n]*?from\s*['"](\.\.?\/[^'"]+)['"]/g;
-
-// Static-import / static-export-from anchored at a statement boundary
-// (start-of-line, `;`, or newline before `import`/`export`) so the rewriter
-// doesn't touch occurrences inside string literals or comment bodies. The
-// dynamic-import form (`import("...")`) is matched separately by
-// `DYNAMIC_IMPORT_RE` below — it's safe to anchor in the same way because
-// it's also valid only as an expression.
 //
-// Capture groups for both regexes:
-//   1 = leading keyword + whitespace (and the leading boundary char, which we
-//       preserve verbatim during replace so the surrounding statement isn't
-//       glued onto the previous line)
+// STATIC imports are found by the packer's scanner (`findImportStatements`),
+// never by a local regex. sc-6086 removed RELATIVE_IMPORT_RE and sc-6670 the
+// rewriter's STATIC_IMPORT_RE for the same defect: a `[^'";\n]` clause body
+// cannot span newlines, so a multi-line `import {\n a,\n} from "react"` — the
+// norm in this codebase — read as no import at all and was served verbatim.
+// The scanner walks the clause character by character, so line breaks are
+// nothing special, and it returns the specifier's quote offsets so the
+// rewriter splices exactly the specifier and can never bleed into an adjacent
+// statement. One scanner for the guard, the packer, and the rewriter (§3).
+
+// Dynamic import (`import("…")`) is an EXPRESSION, valid at any brace depth,
+// so the statement scanner does not see it — it keeps its own regex. That
+// regex separates the specifier from `import` with `\s*`, which does match
+// newlines, so it has no multi-line gap (sc-6670 verified).
+//
+// Capture groups:
+//   1 = `import` + whitespace + `(` (and the leading boundary char, preserved
+//       verbatim during replace so the call isn't glued onto what precedes it)
 //   2 = opening quote
 //   3 = specifier
-const STATIC_IMPORT_RE =
-  /((?:^|[\n;])\s*(?:import|export)\s+(?:[^'";\n]*?\s+from\s*)?)(['"])([^'"]+)\2/gm;
-const DYNAMIC_IMPORT_RE =
-  /((?:^|[\s;\(,!?:=])import\s*\(\s*)(['"])([^'"]+)\2/g;
+const DYNAMIC_IMPORT_RE = /((?:^|[\s;\(,!?:=])import\s*\(\s*)(['"])([^'"]+)\2/g;
 
 /**
  * Lazily resolve `sucrase`'s `transform`. Kept out of the module's static
@@ -137,15 +143,21 @@ export function transpile(transform, source) {
  * single-file mode to reject split-impl bundles with a clear message instead
  * of serving a module the browser can't resolve.
  *
+ * sc-6086: this delegates to the packer's statement scanner rather than
+ * `RELATIVE_IMPORT_RE`, whose `[^;\n]` body cannot span newlines — so a
+ * MULTI-LINE `import {\n  a,\n  b,\n} from "./lib/x.js"` was invisible to it.
+ * That blind spot is why `worktime-employer` passed every local check and
+ * still shipped an unresolvable import to the marketplace. One scanner, so
+ * the dev guard and the packer agree on what a relative import is
+ * (CLAUDE.md §3).
+ *
  * @param {string} source
  * @returns {string[]} unique relative specifiers
  */
 export function findRelativeImports(source) {
-  const out = new Set();
-  let m;
-  RELATIVE_IMPORT_RE.lastIndex = 0;
-  while ((m = RELATIVE_IMPORT_RE.exec(source))) out.add(m[1]);
-  return Array.from(out);
+  return Array.from(
+    new Set(findRelativeImportStatements(source).map((s) => s.specifier)),
+  );
 }
 
 /**
@@ -201,15 +213,16 @@ export function resolveRelativeImport(fromRel, specifier) {
 export function rewriteImportsForDirectoryMode(source, ctx) {
   const { fromRel, baseUrl, shimmable } = ctx;
   const unresolved = new Set();
-  const handler = (match, prefix, quote, spec) => {
+  // The URL a specifier should become, or null to leave it exactly as written.
+  const resolveSpecifier = (spec) => {
     // Relative — resolve under the widget dir.
     if (spec.startsWith("./") || spec.startsWith("../")) {
       const rel = resolveRelativeImport(fromRel, spec);
       if (!rel) {
         unresolved.add(spec);
-        return match;
+        return null;
       }
-      return `${prefix}${quote}${baseUrl}/file/${rel}${quote}`;
+      return `${baseUrl}/file/${rel}`;
     }
     // Absolute or already-resolved — leave alone.
     if (
@@ -219,21 +232,36 @@ export function rewriteImportsForDirectoryMode(source, ctx) {
       spec.startsWith("blob:") ||
       spec.startsWith("data:")
     ) {
-      return match;
+      return null;
     }
     // Bare — rewrite if shimmable, else surface as unresolved.
     if (shimmable.includes(spec)) {
-      return `${prefix}${quote}${baseUrl}/shim/${shimSlugFor(spec)}${quote}`;
+      return `${baseUrl}/shim/${shimSlugFor(spec)}`;
     }
     unresolved.add(spec);
-    return match;
+    return null;
   };
-  // Two passes: anchored static-import + anchored dynamic-import. The split
-  // (vs. one mega-regex) keeps each pattern simple AND lets us anchor each at
-  // its real statement boundary — so substrings inside string literals like
-  // `const s = "import x from 'react'"` never match.
-  let out = source.replace(STATIC_IMPORT_RE, handler);
-  out = out.replace(DYNAMIC_IMPORT_RE, handler);
+
+  // Pass 1 — static imports, spliced by the scanner's quote offsets. Splicing
+  // only what sits BETWEEN the quotes is what makes span bleed impossible:
+  // the clause, the trailing `;`, and any adjacent statement are never part of
+  // the replaced range. Walk back-to-front so earlier offsets stay valid.
+  const statements = findImportStatements(source);
+  let out = source;
+  for (let i = statements.length - 1; i >= 0; i -= 1) {
+    const { specifier, quoteStart, quoteEnd } = statements[i];
+    const url = resolveSpecifier(specifier);
+    if (url === null) continue;
+    out = out.slice(0, quoteStart + 1) + url + out.slice(quoteEnd);
+  }
+
+  // Pass 2 — dynamic `import("…")`, an expression the statement scanner does
+  // not report. Its own anchor keeps it off substrings inside string literals
+  // like `const s = "import('react')"`.
+  out = out.replace(DYNAMIC_IMPORT_RE, (match, prefix, quote, spec) => {
+    const url = resolveSpecifier(spec);
+    return url === null ? match : `${prefix}${quote}${url}${quote}`;
+  });
   return { code: out, unresolved: Array.from(unresolved) };
 }
 
@@ -315,7 +343,10 @@ export function loadWidgetJson(widgetDir) {
     const candidates = [
       resolve(widgetDir, p),
       p.startsWith(`first-party-widgets/${widgetSlug}/`)
-        ? resolve(widgetDir, p.slice(`first-party-widgets/${widgetSlug}/`.length))
+        ? resolve(
+            widgetDir,
+            p.slice(`first-party-widgets/${widgetSlug}/`.length),
+          )
         : null,
       resolve(widgetDir, "..", "..", p),
     ].filter(Boolean);
@@ -326,7 +357,10 @@ export function loadWidgetJson(widgetDir) {
       `${configPath}: ${label} must point at a file under ${widgetDir} (got "${p}")`,
     );
   }
-  const manifestAbs = _resolveUnderWidget("manifestSource", config.manifestSource);
+  const manifestAbs = _resolveUnderWidget(
+    "manifestSource",
+    config.manifestSource,
+  );
 
   let entryAbs;
   if (config.componentSources && typeof config.componentSources === "object") {
@@ -353,7 +387,12 @@ export function loadWidgetJson(widgetDir) {
     );
   }
   const entryRel = relative(widgetDir, entryAbs).split(sep).join("/");
-  return { widgetDir, manifestPath: manifestAbs, entryPath: entryAbs, entryRel };
+  return {
+    widgetDir,
+    manifestPath: manifestAbs,
+    entryPath: entryAbs,
+    entryRel,
+  };
 }
 
 function _isUnder(parentAbs, childAbs) {
@@ -444,7 +483,13 @@ export function createDevServer({
   // entry's own ancestor node_modules by default, so a widget that vendored
   // its deps locally still resolves.
   const bundleNodePaths = [];
-  const _frontendNm = resolve(watchRoot, "..", "..", "frontend", "node_modules");
+  const _frontendNm = resolve(
+    watchRoot,
+    "..",
+    "..",
+    "frontend",
+    "node_modules",
+  );
   if (existsSync(_frontendNm)) bundleNodePaths.push(_frontendNm);
 
   const sseClients = new Set();
@@ -700,7 +745,13 @@ export function createDevServer({
     if (url === "/__dev/events") return serveEvents(req, res);
     if (url === "/__dev/health") {
       res.writeHead(200, { "Content-Type": "application/json" });
-      res.end(JSON.stringify({ ok: true, manifestId, mode: directoryMode ? "directory" : "single-file" }));
+      res.end(
+        JSON.stringify({
+          ok: true,
+          manifestId,
+          mode: directoryMode ? "directory" : "single-file",
+        }),
+      );
       return;
     }
     if (directoryMode && url.startsWith("/file/")) {
@@ -736,7 +787,8 @@ export function createDevServer({
       if (ok) onLint("lint: clean");
       else {
         onLint(`lint: ${findings.length} finding(s)`);
-        for (const f of findings) onLint(`  [${f.rule}] line ${f.line}: ${f.label}`);
+        for (const f of findings)
+          onLint(`  [${f.rule}] line ${f.line}: ${f.label}`);
       }
     }
   }