@colixsystems/widget-sdk 0.196.0 → 0.198.0

package/dist/overlay-view.js

@@ -6,7 +6,7 @@
 // (`overflow: hidden` cards, scroll containers) clip it and where React Native
 // has no `position: "fixed"` at all. `<Overlay>` fixes that for both hosts at
 // once by rendering into React Native's `Modal`, which leaves the parent's
-// layout on BOTH platforms — react-native-web portals it to `document.body`,
+// layout on BOTH platforms — the web binding portals it to `document.body`,
 // native hands it to the OS — while keeping the children in the widget's own
 // React tree, so their state, hooks and WidgetContext all survive.
 //
@@ -74,10 +74,7 @@ export function makeOverlay(rn) {
       {
         visible: true,
         transparent: true,
-        // Not animated on purpose: the web host arms the overlay's dialog role
-        // and its Escape handler when the entrance animation ENDS, so a fade
-        // leaves a window where the keyboard cannot dismiss it — and a dropped
-        // animation event would leave it un-dismissable for good.
+        // Not animated: a sheet must answer the tap that opened it at once.
         animationType: "none",
         onRequestClose: requestClose,
       },

package/dist/overlay.js

@@ -1,13 +1,20 @@
 // sc-6607 — `<Overlay>` (web). Binds the shared implementation in
-// ./overlay-view.js to react-native-web's primitives.
+// ./overlay-view.js to react-native-web's primitives, with ./web-modal.js in
+// place of react-native-web's `Modal`, which breaks under React StrictMode.
 //
 // The import is `react-native-web` rather than the bare `react-native`
 // specifier for the rolldown optional-peer-dep reason spelled out at the top of
-// ./primitives.js. react-native-web's `Modal` portals its subtree into a
-// `document.body` container at `position: fixed`, which is exactly what makes
-// the overlay escape the widget's clipping ancestors.
+// ./primitives.js. The modal layer portals its subtree into a `document.body`
+// 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 { makeOverlay } from "./overlay-view.js";
+import { WebModal } from "./web-modal.js";
 
-export const Overlay = makeOverlay(ReactNative);
+export const Overlay = makeOverlay({
+  Modal: WebModal,
+  View: ReactNative.View,
+  Pressable: ReactNative.Pressable,
+  StyleSheet: ReactNative.StyleSheet,
+});

package/dist/primitives.js

@@ -80,3 +80,5 @@ export { FilePicker } from "./filepicker.js";
 // `linear-gradient` on a View; the native build (./gradient.native.js) delegates
 // to expo-linear-gradient through the same angle projection.
 export { Gradient } from "./gradient.js";
+// sc-10268 — `<Video>` (web): the browser's <video>, inline with controls.
+export { Video } from "./video.js";

package/dist/primitives.native.js

@@ -40,3 +40,5 @@ export { FilePicker } from "./filepicker.native.js";
 // expo-linear-gradient (pinned unconditionally in every export); the web build
 // (./gradient.js) paints the equivalent CSS `linear-gradient`.
 export { Gradient } from "./gradient.native.js";
+// sc-10268 — `<Video>` (native): expo-video's VideoView.
+export { Video } from "./video.native.js";

package/dist/video.js

@@ -0,0 +1,51 @@
+// sc-10268 — `<Video>` (web).
+//
+// Plays a video file inline: the browser's own <video> element with its own
+// controls. The native counterpart (./video.native.js) is expo-video's
+// VideoView over the same props, so a widget plays video on both hosts with
+// no platform split.
+//
+// `preload="metadata"` plus a `#t=` fragment paints the first frame as the
+// thumbnail; Safari draws nothing before playback without the fragment.
+
+import React from "react";
+import * as ReactNative from "react-native-web";
+
+const FIRST_FRAME = "#t=0.001";
+const FITS = { contain: "contain", cover: "cover" };
+
+export function Video({
+  source,
+  controls = true,
+  autoPlay = false,
+  contentFit = "contain",
+  style,
+  accessibilityLabel,
+  testID,
+  onError,
+}) {
+  const uri = typeof source === "string" && source ? source : null;
+  return React.createElement(
+    ReactNative.View,
+    { style, testID },
+    uri
+      ? React.createElement("video", {
+          src: uri.includes("#") ? uri : `${uri}${FIRST_FRAME}`,
+          controls: Boolean(controls),
+          // Browsers only autoplay muted video.
+          autoPlay: Boolean(autoPlay),
+          muted: Boolean(autoPlay),
+          playsInline: true,
+          preload: "metadata",
+          "aria-label": accessibilityLabel,
+          onError: onError ? () => onError() : undefined,
+          style: {
+            width: "100%",
+            height: "100%",
+            objectFit: FITS[contentFit] || FITS.contain,
+            display: "block",
+          },
+        })
+      : null,
+  );
+}

package/dist/video.native.js

@@ -0,0 +1,61 @@
+// sc-10268 — `<Video>` (native).
+//
+// expo-video's VideoView (AVPlayer on iOS, ExoPlayer on Android), pinned in
+// every export (BASE_DEPENDENCIES in
+// backend/src/core/services/export-dependencies.ts), so Metro always resolves
+// it. The web counterpart (./video.js) is the browser's <video> over the same
+// props; keep the two in lockstep.
+
+import React, { useEffect } from "react";
+import { View, StyleSheet } from "react-native";
+import { VideoView, useVideoPlayer } from "expo-video";
+
+const FITS = { contain: "contain", cover: "cover" };
+
+export function Video({
+  source,
+  controls = true,
+  autoPlay = false,
+  contentFit = "contain",
+  style,
+  accessibilityLabel,
+  testID,
+  onError,
+}) {
+  const uri = typeof source === "string" && source ? source : null;
+  // A bare string keeps the source stable, so the player is not recreated
+  // every render; null is an idle player.
+  const player = useVideoPlayer(uri);
+  // An effect rather than the setup callback, so turning autoPlay on later
+  // still starts it. Muted, as the web host must be to autoplay.
+  useEffect(() => {
+    if (!uri || !autoPlay) return;
+    try {
+      player.muted = true;
+      player.play();
+    } catch (_) {
+      // A released player has nothing to start.
+    }
+  }, [player, uri, autoPlay]);
+  useEffect(() => {
+    if (!onError) return undefined;
+    const subscription = player.addListener("statusChange", (event) => {
+      if (event && event.status === "error") onError();
+    });
+    return () => subscription.remove();
+  }, [player, onError]);
+  return React.createElement(
+    View,
+    { style, testID },
+    uri
+      ? React.createElement(VideoView, {
+          player,
+          nativeControls: Boolean(controls),
+          contentFit: FITS[contentFit] || FITS.contain,
+          allowsFullscreen: true,
+          accessibilityLabel,
+          style: StyleSheet.absoluteFill,
+        })
+      : null,
+  );
+}

package/dist/web-modal.js

@@ -0,0 +1,139 @@
+// The web `<Overlay>`'s modal layer: a body-level portal that owns its
+// container in a layout effect.
+//
+// react-native-web's `Modal` creates its container during render and removes it
+// in an effect cleanup. React StrictMode's mount → cleanup → mount detaches that
+// container, so the overlay rendered into an off-page node until some unrelated
+// re-render rebuilt it, and its Escape and focus handling never re-armed.
+//
+// Implements only the `Modal` props `<Overlay>` passes: `visible`,
+// `onRequestClose` and `children`; it is never animated.
+
+import React from "react";
+import { createPortal } from "react-dom";
+
+const FOCUSABLE =
+  'button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+const layerStyle = {
+  position: "fixed",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  zIndex: 9999,
+  display: "flex",
+  flexDirection: "column",
+  outline: "none",
+};
+
+// Open layers, innermost last: only the top one handles Escape and Tab.
+const openLayers = [];
+
+function tabStops(dialog) {
+  return Array.from(dialog.querySelectorAll(FOCUSABLE)).filter(
+    (node) => node.getAttribute("aria-hidden") !== "true",
+  );
+}
+
+/**
+ * @param {{visible?: boolean, onRequestClose?: () => void, children?: any}} props
+ */
+export function WebModal({ visible = true, onRequestClose, children }) {
+  const [container, setContainer] = React.useState(null);
+  const dialogRef = React.useRef(null);
+  const onCloseRef = React.useRef(onRequestClose);
+  onCloseRef.current = onRequestClose;
+  // Taken before the dialog mounts, so a child that focuses itself on mount
+  // cannot become the place focus returns to.
+  const returnFocusRef = React.useRef(null);
+
+  React.useLayoutEffect(() => {
+    if (!visible) return undefined;
+    returnFocusRef.current = document.activeElement;
+    const node = document.createElement("div");
+    document.body.appendChild(node);
+    setContainer(node);
+    return () => {
+      node.remove();
+      setContainer(null);
+    };
+  }, [visible]);
+
+  React.useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!container || !dialog) return undefined;
+    const layer = {};
+    openLayers.push(layer);
+    const isTop = () => openLayers[openLayers.length - 1] === layer;
+    const returnFocusTo = returnFocusRef.current;
+    if (!dialog.contains(document.activeElement)) {
+      dialog.focus({ preventScroll: true });
+    }
+
+    // keyup, as react-native-web's Modal did, so the keydown that opened a
+    // nested overlay cannot also close it.
+    const onKeyUp = (event) => {
+      if (event.key !== "Escape" || !isTop()) return;
+      event.stopPropagation();
+      if (typeof onCloseRef.current === "function") onCloseRef.current();
+    };
+    const onKeyDown = (event) => {
+      if (event.key !== "Tab" || !isTop()) return;
+      const stops = tabStops(dialog);
+      if (!stops.length) {
+        event.preventDefault();
+        return;
+      }
+      const first = stops[0];
+      const last = stops[stops.length - 1];
+      const current = document.activeElement;
+      const outside = !dialog.contains(current) || current === dialog;
+      if (event.shiftKey && (outside || current === first)) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && (outside || current === last)) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    const onFocusIn = (event) => {
+      if (isTop() && !dialog.contains(event.target)) {
+        dialog.focus({ preventScroll: true });
+      }
+    };
+    document.addEventListener("keyup", onKeyUp);
+    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("focusin", onFocusIn);
+    return () => {
+      document.removeEventListener("keyup", onKeyUp);
+      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("focusin", onFocusIn);
+      const index = openLayers.indexOf(layer);
+      if (index !== -1) openLayers.splice(index, 1);
+      if (
+        returnFocusTo &&
+        typeof returnFocusTo.focus === "function" &&
+        returnFocusTo.isConnected
+      ) {
+        returnFocusTo.focus({ preventScroll: true });
+      }
+    };
+  }, [container]);
+
+  if (!visible || !container) return null;
+  return createPortal(
+    React.createElement(
+      "div",
+      {
+        ref: dialogRef,
+        role: "dialog",
+        "aria-modal": "true",
+        tabIndex: -1,
+        style: layerStyle,
+      },
+      children,
+    ),
+    container,
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colixsystems/widget-sdk",
-  "version": "0.196.0",
+  "version": "0.198.0",
   "description": "Common widget interface for AppStudio. Implements WidgetManifest, WidgetContext, property schema, and helper hooks.",
   "homepage": "https://github.com/Colix-AB/AppStudio",
   "type": "module",
@@ -62,6 +62,7 @@
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-native": "*",
+    "react-dom": ">=18.0.0",
     "react-native-web": ">=0.19.0"
   },
   "peerDependenciesMeta": {
@@ -73,6 +74,9 @@
     },
     "react-native-web": {
       "optional": true
+    },
+    "react-dom": {
+      "optional": true
     }
   },
   "optionalDependencies": {