@qontinui/ui-bridge-native 0.7.0 → 0.8.0

package/dist/server/index.mjs

@@ -335,6 +335,164 @@ var UI_BRIDGE_NATIVE_ROUTES = {
   }
 };
 
+// src/core/sha256.ts
+var K = new Uint32Array([
+  1116352408,
+  1899447441,
+  3049323471,
+  3921009573,
+  961987163,
+  1508970993,
+  2453635748,
+  2870763221,
+  3624381080,
+  310598401,
+  607225278,
+  1426881987,
+  1925078388,
+  2162078206,
+  2614888103,
+  3248222580,
+  3835390401,
+  4022224774,
+  264347078,
+  604807628,
+  770255983,
+  1249150122,
+  1555081692,
+  1996064986,
+  2554220882,
+  2821834349,
+  2952996808,
+  3210313671,
+  3336571891,
+  3584528711,
+  113926993,
+  338241895,
+  666307205,
+  773529912,
+  1294757372,
+  1396182291,
+  1695183700,
+  1986661051,
+  2177026350,
+  2456956037,
+  2730485921,
+  2820302411,
+  3259730800,
+  3345764771,
+  3516065817,
+  3600352804,
+  4094571909,
+  275423344,
+  430227734,
+  506948616,
+  659060556,
+  883997877,
+  958139571,
+  1322822218,
+  1537002063,
+  1747873779,
+  1955562222,
+  2024104815,
+  2227730452,
+  2361852424,
+  2428436474,
+  2756734187,
+  3204031479,
+  3329325298
+]);
+var H0 = [
+  1779033703,
+  3144134277,
+  1013904242,
+  2773480762,
+  1359893119,
+  2600822924,
+  528734635,
+  1541459225
+];
+function utf8Bytes(input) {
+  const out = [];
+  for (let i = 0; i < input.length; i++) {
+    let cp = input.charCodeAt(i);
+    if (cp >= 55296 && cp <= 56319) {
+      const next = i + 1 < input.length ? input.charCodeAt(i + 1) : 0;
+      if (next >= 56320 && next <= 57343) {
+        cp = 65536 + (cp - 55296 << 10) + (next - 56320);
+        i++;
+      } else {
+        cp = 65533;
+      }
+    } else if (cp >= 56320 && cp <= 57343) {
+      cp = 65533;
+    }
+    if (cp < 128) {
+      out.push(cp);
+    } else if (cp < 2048) {
+      out.push(192 | cp >> 6, 128 | cp & 63);
+    } else if (cp < 65536) {
+      out.push(224 | cp >> 12, 128 | cp >> 6 & 63, 128 | cp & 63);
+    } else {
+      out.push(
+        240 | cp >> 18,
+        128 | cp >> 12 & 63,
+        128 | cp >> 6 & 63,
+        128 | cp & 63
+      );
+    }
+  }
+  return Uint8Array.from(out);
+}
+var rotr = (x, n) => x >>> n | x << 32 - n;
+function sha256Hex(input) {
+  const bytes = utf8Bytes(input);
+  const blockBytes = Math.ceil((bytes.length + 9) / 64) * 64;
+  const buffer = new Uint8Array(blockBytes);
+  buffer.set(bytes);
+  buffer[bytes.length] = 128;
+  const view = new DataView(buffer.buffer);
+  const bitLength = bytes.length * 8;
+  view.setUint32(blockBytes - 8, Math.floor(bitLength / 4294967296));
+  view.setUint32(blockBytes - 4, bitLength >>> 0);
+  const h = H0.slice();
+  const w = new Uint32Array(64);
+  for (let block = 0; block < blockBytes; block += 64) {
+    for (let t = 0; t < 16; t++) w[t] = view.getUint32(block + t * 4);
+    for (let t = 16; t < 64; t++) {
+      const s0 = rotr(w[t - 15], 7) ^ rotr(w[t - 15], 18) ^ w[t - 15] >>> 3;
+      const s1 = rotr(w[t - 2], 17) ^ rotr(w[t - 2], 19) ^ w[t - 2] >>> 10;
+      w[t] = w[t - 16] + s0 + w[t - 7] + s1;
+    }
+    let [a, b, c, d, e, f, g, hh] = h;
+    for (let t = 0; t < 64; t++) {
+      const S1 = rotr(e, 6) ^ rotr(e, 11) ^ rotr(e, 25);
+      const ch = e & f ^ ~e & g;
+      const t1 = hh + S1 + ch + K[t] + w[t] | 0;
+      const S0 = rotr(a, 2) ^ rotr(a, 13) ^ rotr(a, 22);
+      const maj = a & b ^ a & c ^ b & c;
+      const t2 = S0 + maj | 0;
+      hh = g;
+      g = f;
+      f = e;
+      e = d + t1 | 0;
+      d = c;
+      c = b;
+      b = a;
+      a = t1 + t2 | 0;
+    }
+    h[0] = h[0] + a | 0;
+    h[1] = h[1] + b | 0;
+    h[2] = h[2] + c | 0;
+    h[3] = h[3] + d | 0;
+    h[4] = h[4] + e | 0;
+    h[5] = h[5] + f | 0;
+    h[6] = h[6] + g | 0;
+    h[7] = h[7] + hh | 0;
+  }
+  return h.map((word) => (word >>> 0).toString(16).padStart(8, "0")).join("");
+}
+
 // src/core/vision-fields.ts
 var INTERACTIVE_HANDLER_NAMES = /* @__PURE__ */ new Set([
   "onPress",
@@ -418,13 +576,18 @@ var NAMED_COLORS = {
   gray: { r: 128, g: 128, b: 128 },
   grey: { r: 128, g: 128, b: 128 },
   silver: { r: 192, g: 192, b: 192 },
-  transparent: { r: 0, g: 0, b: 0 },
   orange: { r: 255, g: 165, b: 0 },
   yellow: { r: 255, g: 255, b: 0 },
   purple: { r: 128, g: 0, b: 128 },
   navy: { r: 0, g: 0, b: 128 }
 };
 var clamp255 = (n) => Math.max(0, Math.min(255, Math.round(n)));
+function parseAlpha(p) {
+  const pct = p.endsWith("%");
+  const n = parseFloat(pct ? p.slice(0, -1) : p);
+  if (!Number.isFinite(n)) return void 0;
+  return Math.min(1, pct ? n / 100 : n);
+}
 function parseColorToRgb(input) {
   if (typeof input !== "string") return void 0;
   const raw = input.trim().toLowerCase();
@@ -435,6 +598,7 @@ function parseColorToRgb(input) {
   if (raw.startsWith("#")) {
     const hex = raw.slice(1);
     if (hex.length === 3 || hex.length === 4) {
+      if (hex.length === 4 && hex[3] !== "f") return void 0;
       const r = parseInt(hex[0] + hex[0], 16);
       const g = parseInt(hex[1] + hex[1], 16);
       const b = parseInt(hex[2] + hex[2], 16);
@@ -442,6 +606,7 @@ function parseColorToRgb(input) {
       return void 0;
     }
     if (hex.length === 6 || hex.length === 8) {
+      if (hex.length === 8 && hex.slice(6, 8) !== "ff") return void 0;
       const r = parseInt(hex.slice(0, 2), 16);
       const g = parseInt(hex.slice(2, 4), 16);
       const b = parseInt(hex.slice(4, 6), 16);
@@ -453,7 +618,11 @@ function parseColorToRgb(input) {
   const rgbMatch = raw.match(/^rgba?\(([^)]+)\)$/);
   if (rgbMatch) {
     const parts = rgbMatch[1].split(",").map((p) => p.trim());
-    if (parts.length < 3) return void 0;
+    if (parts.length < 3 || parts.length > 4) return void 0;
+    if (parts.length === 4) {
+      const alpha = parseAlpha(parts[3]);
+      if (alpha === void 0 || alpha < 1) return void 0;
+    }
     const channel = (p) => {
       if (p.endsWith("%")) {
         const pct = parseFloat(p.slice(0, -1));
@@ -485,13 +654,87 @@ function parseFontSizePx(input) {
   }
   return void 0;
 }
+var ASCII_WHITESPACE_EDGES = /^[\t\n\f\r ]+|[\t\n\f\r ]+$/g;
+function nonEmptyString(v) {
+  return typeof v === "string" && v.length > 0 ? v : void 0;
+}
+var OBJECT_FIT_TO_RESIZE_MODE = /* @__PURE__ */ new Map([
+  ["contain", "contain"],
+  ["cover", "cover"],
+  ["fill", "stretch"],
+  ["scale-down", "contain"],
+  ["none", "none"]
+]);
+var RESIZE_MODE_TO_OBJECT_FIT = /* @__PURE__ */ new Map([
+  ["cover", "cover"],
+  ["contain", "contain"],
+  ["stretch", "fill"],
+  ["center", "scale-down"],
+  ["none", "none"]
+]);
+function resolveObjectFit(props, flatStyle) {
+  const styleFit = nonEmptyString(flatStyle?.objectFit);
+  const mode = (styleFit !== void 0 ? OBJECT_FIT_TO_RESIZE_MODE.get(styleFit) : void 0) ?? nonEmptyString(props?.resizeMode) ?? nonEmptyString(flatStyle?.resizeMode);
+  return mode !== void 0 ? RESIZE_MODE_TO_OBJECT_FIT.get(mode) : void 0;
+}
+function resolveImageSource(props) {
+  if (!props) return void 0;
+  if (props.srcSet !== void 0 && props.srcSet !== null) return void 0;
+  const src = nonEmptyString(props.src);
+  if (src !== void 0) return src;
+  const source = props.source;
+  const one = Array.isArray(source) ? source.length === 1 ? source[0] : void 0 : source;
+  if (one && typeof one === "object") {
+    return nonEmptyString(one.uri);
+  }
+  return void 0;
+}
+function isHiddenFromAccessibility(props) {
+  if (!props) return false;
+  return props.accessible === false && props.alt === void 0 || props.importantForAccessibility === "no" || props.importantForAccessibility === "no-hide-descendants" || props.accessibilityElementsHidden === true;
+}
+function resolveImageLabel(props, registryLabel) {
+  if (props === void 0) return registryLabel;
+  const own = props["aria-label"] ?? props.accessibilityLabel ?? props.alt;
+  return typeof own === "string" ? own : void 0;
+}
+function projectMedia(args) {
+  const { layout, props, flatStyle, accessibilityLabel, inViewport } = args;
+  const media = { kind: "img" };
+  if (layout && Number.isFinite(layout.width) && Number.isFinite(layout.height) && layout.width >= 0 && layout.height >= 0) {
+    media.rendered_px = { w: layout.width, h: layout.height };
+  }
+  const objectFit = resolveObjectFit(props, flatStyle);
+  if (objectFit !== void 0) media.object_fit = objectFit;
+  if (isHiddenFromAccessibility(props)) {
+    media.alt = { decorative: true };
+  } else {
+    const label = resolveImageLabel(props, accessibilityLabel);
+    const text = label?.replace(ASCII_WHITESPACE_EDGES, "");
+    if (text) media.alt = { decorative: false, text };
+  }
+  const src = resolveImageSource(props);
+  if (src !== void 0) media.src_digest = sha256Hex(src);
+  if (inViewport !== void 0) media.in_viewport = inViewport;
+  return media;
+}
 function projectVisionFields(args) {
   const { type, label, handlerNames, state, flatStyle } = args;
   const fields = {
     interactable: deriveInteractable(type, handlerNames)
   };
-  const text = deriveText(state, label);
-  if (text !== void 0) fields.text = text;
+  if (type === "image") {
+    fields.media = projectMedia({
+      layout: state.layout,
+      props: args.props,
+      flatStyle,
+      accessibilityLabel: args.accessibilityLabel,
+      inViewport: args.inViewport
+    });
+  } else {
+    const text = deriveText(state, label);
+    if (text !== void 0) fields.text = text;
+  }
   const role = roleForType(type);
   if (role !== void 0) fields.role = role;
   if (flatStyle) {
@@ -585,11 +828,17 @@ function computeVisibility(state, clip) {
   if (!rect) {
     return { visibility: "visible" };
   }
-  if (isEmptyRect(clip)) {
-    return { visibility: "hidden", visibilityReason: "off-screen" };
-  }
-  const onScreen = spansOverlap(rect.left, rect.right, clip.left, clip.right) && spansOverlap(rect.top, rect.bottom, clip.top, clip.bottom);
-  return onScreen ? { visibility: "visible" } : { visibility: "hidden", visibilityReason: "off-screen" };
+  return rectReachesClip(rect, clip) ? { visibility: "visible" } : { visibility: "hidden", visibilityReason: "off-screen" };
+}
+function rectReachesClip(rect, clip) {
+  if (isEmptyRect(clip)) return false;
+  return spansOverlap(rect.left, rect.right, clip.left, clip.right) && spansOverlap(rect.top, rect.bottom, clip.top, clip.bottom);
+}
+function computeInViewport(state, clip) {
+  if (!state.visible || !clip) return void 0;
+  const rect = pageRectOf(state);
+  if (!rect) return void 0;
+  return rectReachesClip(rect, clip);
 }
 
 // src/design/design-inspector-native.ts
@@ -1264,7 +1513,7 @@ var NATIVE_PAGE_HEALTH_PRODUCER_ID = "sdk-native/page-health";
 function defaultProducer() {
   return {
     id: NATIVE_PAGE_HEALTH_PRODUCER_ID,
-    version: "0.7.0" 
+    version: "0.8.0" 
   };
 }
 function pageHealthUnknown(code, detail, options = {}) {
@@ -1306,14 +1555,7 @@ var LOADING_PHRASES = [
   "initializing",
   "fetching"
 ];
-var EMPTY_PHRASES = [
-  "no data",
-  "no results",
-  "nothing here",
-  "empty",
-  "no items",
-  "get started"
-];
+var EMPTY_PHRASES = ["no data", "no results", "nothing here", "empty", "no items", "get started"];
 function severityRank(s) {
   if (s === "CRITICAL") return 3;
   if (s === "WARNING") return 2;
@@ -1388,20 +1630,44 @@ function observe(input, producer, evaluatedAt) {
   }
   return analyze(elements, viewport, base);
 }
+function nothingOnScreenDetail(elements, visibleCount, visibilityUnstated) {
+  if (visibilityUnstated === 0 && visibleCount > 0) {
+    return `all ${visibleCount} visible element(s) have no measured layout yet, so spatial coverage, layout regions and visual anomalies cannot be measured`;
+  }
+  if (visibilityUnstated > 0) {
+    const geometry = visibleCount > 0 ? ` and none of the ${visibleCount} visible one(s) has a measured layout` : "";
+    return `${visibilityUnstated} of ${elements.length} element(s) carry no boolean \`state.visible\`${geometry}, so no element can be placed on screen; spatial coverage, layout regions and visual anomalies cannot be measured`;
+  }
+  const unmounted = elements.filter((el) => el.state?.mounted === false).length;
+  return `all ${elements.length} registered element(s) report visible: false (unmounted=${unmounted}, off-screen route or otherwise=${elements.length - unmounted}), so whatever is on screen is not a registered element and there is nothing on screen to measure; this says nothing about whether the screen is blank`;
+}
 function analyze(elements, viewport, base) {
   const findings = [];
-  const considered = elements.filter((el) => el.state.visible);
-  const visible = considered.flatMap((el) => {
+  const onScreen = elements.filter((el) => el.state?.visible === true);
+  const visibilityUnstated = elements.filter(
+    (el) => typeof el.state?.visible !== "boolean"
+  ).length;
+  const visible = onScreen.flatMap((el) => {
     const rect = normalizeRect(el.state, viewport);
     return rect ? [{ el, rect }] : [];
   });
-  const withoutGeometry = considered.length - visible.length;
-  const unmeasured = withoutGeometry > 0 ? [{ dimension: "geometry", count: withoutGeometry, code: "input_missing" }] : [];
-  const coverage = { considered: considered.length, measured: visible.length, unmeasured };
-  if (considered.length > 0 && visible.length === 0) {
+  const withoutGeometry = onScreen.length - visible.length;
+  const unmeasured = [];
+  if (withoutGeometry > 0) {
+    unmeasured.push({ dimension: "geometry", count: withoutGeometry, code: "input_missing" });
+  }
+  if (visibilityUnstated > 0) {
+    unmeasured.push({ dimension: "visibility", count: visibilityUnstated, code: "input_missing" });
+  }
+  const coverage = {
+    considered: onScreen.length + visibilityUnstated,
+    measured: visible.length,
+    unmeasured
+  };
+  if (elements.length > 0 && visible.length === 0) {
     return Observation.unknown(
       "input_missing",
-      `all ${considered.length} visible element(s) have no measured layout yet, so spatial coverage, layout regions and visual anomalies cannot be measured`,
+      nothingOnScreenDetail(elements, onScreen.length, visibilityUnstated),
       Observation.provenance({ ...base, coverage })
     );
   }
@@ -1491,7 +1757,7 @@ function analyze(elements, viewport, base) {
   for (const el of elements) {
     const elType = el.type ?? "";
     if (SKIP_TEXT_TYPES.has(elType)) continue;
-    const text = (el.state.textContent ?? "").toString();
+    const text = (el.state?.textContent ?? "").toString();
     if (!text) continue;
     const textLower = text.toLowerCase();
     for (const p of ERROR_PHRASES) {
@@ -1532,7 +1798,7 @@ function analyze(elements, viewport, base) {
   for (const el of elements) {
     if (!INTERACTIVE_TYPES2.has(el.type)) continue;
     interactiveTotal++;
-    if (el.state.enabled === false) interactiveDisabled++;
+    if (el.state?.enabled === false) interactiveDisabled++;
   }
   const interactiveSeverity = interactiveTotal > 0 && interactiveDisabled / interactiveTotal > 0.5 ? "WARNING" : "OK";
   findings.push({
@@ -1556,9 +1822,7 @@ function analyze(elements, viewport, base) {
     detail: `zero_size=${zeroSize}, outside_viewport=${outsideViewport} (horizontal-overflow only; below/above-fold scrollable content is not an anomaly)`,
     data: { zero_size: zeroSize, outside_viewport: outsideViewport }
   });
-  const heatmap = grid.map(
-    (row) => row.map((cell) => cell ? "#" : ".").join("")
-  );
+  const heatmap = grid.map((row) => row.map((cell) => cell ? "#" : ".").join(""));
   return Observation.measured(
     {
       summary: worstSeverity(findings),
@@ -1818,10 +2082,9 @@ function createServerHandlers(registry, executor, config) {
       const elements = allElements.map((e) => {
         const handlers = extractHandlerNames(e.props);
         const state = e.getState();
-        const { visibility, visibilityReason } = computeVisibility(
-          state,
-          registry.getClipRectFor(e, viewport)
-        );
+        const identifier = e.getIdentifier();
+        const clip = registry.getClipRectFor(e, viewport);
+        const { visibility, visibilityReason } = computeVisibility(state, clip);
         const bbox = projectBbox(state, visibility, registry.getPixelRatio());
         const vision = projectVisionFields({
           type: e.type,
@@ -1830,13 +2093,16 @@ function createServerHandlers(registry, executor, config) {
           // synthesize press/click onto every element. See projectVisionFields.
           handlerNames: handlers,
           state,
-          flatStyle: e.flatStyle
+          flatStyle: e.flatStyle,
+          props: e.props,
+          accessibilityLabel: identifier.accessibilityLabel,
+          inViewport: computeInViewport(state, clip)
         });
         return {
           id: e.id,
           type: e.type,
           label: e.label,
-          identifier: e.getIdentifier(),
+          identifier,
           state,
           actions: e.actions,
           customActions: serializeElementCustomActions(e.customActions),
@@ -2544,7 +2810,7 @@ function createServerHandlers(registry, executor, config) {
       };
       if (config?.appInfo) {
         response.uiBridge = {
-          version: "0.7.0",
+          version: "0.8.0",
           ...config.appInfo,
           capabilities: ["elements", "components", "actions", "design"],
           elementCount: stats.elements,