@colixsystems/widget-sdk 0.39.0 → 0.40.1

package/README.md

@@ -47,7 +47,11 @@ See the design reference for the full architecture: [`docs/architecture/widget-m
 
 ## Status
 
-`v0.39.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.40.1` — 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.40.1
+
+**`<DateTimePicker>` actually renders on web (sc-1118).** The primitive was a single source that wrapped `@react-native-community/datetimepicker`, but that library ships iOS / Android only and has no react-native-web mapping — on the web Player and Studio the primitive rendered nothing, so date columns in the built-in **Form Input** / **Form Builder** widgets showed a label and required-asterisk with no input beneath them. The implementation is now split: native (`./datetimepicker.native.js`) still wraps the RN library; web (`./datetimepicker.js`) renders the browser's native `<input type="date|time|datetime-local">` directly. **The public contract is unchanged** — same component name, same `{ value, onChange, mode, minimumDate, maximumDate, disabled }` props, same ISO 8601 wire format on the value and the `onChange` callback. `CONTRACT.version` is unchanged.
 
 ### What's new in 0.39.0
 
@@ -233,7 +237,7 @@ The tenant's **Theme Settings** now flow all the way into `useTheme()`.
 
 The "split-implementation + vetted package list" pivot.
 
-- **`CONTRACT.vettedImports` (new).** A curated allowlist of bare specifiers a widget may import — `react`, `@colixsystems/widget-sdk`, `react-native`, `axios`, `date-fns`, `react-native-svg`, `lucide-react-native`, `react-native-maps`, `leaflet`, `react-leaflet`, `expo-av`, `@react-native-community/datetimepicker`, `expo-clipboard`, `expo-haptics`. Each entry carries `platforms` (one or both of `"web"` / `"native"`) and a `category` so the linter and the marketplace listing can render honest platform badges. `CONTRACT.allowedBareImports` (the existing field) is now derived from `vettedImports` and stays a plain `string[]` for back-compat.
+- **`CONTRACT.vettedImports` (new).** A curated allowlist of bare specifiers a widget may import — `react`, `@colixsystems/widget-sdk`, `react-native`, `axios`, `date-fns`, `react-native-svg`, `lucide-react-native`, `react-native-maps`, `leaflet`, `react-leaflet`, `expo-audio`, `expo-video`, `@react-native-community/datetimepicker`, `expo-clipboard`, `expo-haptics`. Each entry carries `platforms` (one or both of `"web"` / `"native"`) and a `category` so the linter and the marketplace listing can render honest platform badges. `CONTRACT.allowedBareImports` (the existing field) is now derived from `vettedImports` and stays a plain `string[]` for back-compat.
 - **`fetch` and `XMLHttpRequest` come off `CONTRACT.bannedApis`.** Widgets may call third-party APIs directly. Calls to the host's own `/api/*` surface will 401 because the JWT token is never shared with widget code; the linter emits a soft `no-host-api-url` warning when it sees host-URL substrings so authors learn the rule statically. Use SDK hooks (`useDatastoreQuery`, `useUsers`, `useAsset`, …) for workspace data; use `axios` / `fetch` for third-party APIs.
 - **`import-not-vetted` linter rule (new).** Every bare `import` specifier is validated against `CONTRACT.vettedImports`. Relative imports inside the bundle (`./shared.js`) are allowed so split-impl widgets can share helpers; `../` and absolute paths are rejected.
 - **`import-platform-mismatch` linter rule (new).** A single-source widget that imports a native-only package while `manifest.supportedPlatforms` includes `"web"` fails the lint. The author either drops the platform from the manifest OR ships a `widget.web.jsx` + `widget.native.jsx` pair where the platform-specific import lives in the file that targets its platform.
@@ -340,7 +344,7 @@ import { defineWidget, validateManifest, useDatastoreQuery, Text, View } from "@
 - `validateManifest(m)` / `validatePropertySchema(s)` / `validateProps(schema, props)` — shape validation; no third-party deps.
 - `useDatastoreQuery`, `useDatastoreRecord`, `useDatastoreSchema`, `useDatastoreMutation`, `useDirectory`, `useUsers`, `useGroups`, `useRecordPermissions`, `useAsset`, `useWidgetEvent`, `usePayments`, `useTheme`, `useI18n`, `useUser`, `useNavigation`, `useChildRenderer`, `useClipboard`, `useToast` — hooks that read from the host-provided `WidgetContext` (or, for `useClipboard`, the platform clipboard API directly). `useDirectory(query?)` returns `{ users, loading, error, refetch }` (each user `{ id, name, role }`) and requires the `directory.read:users` scope. `useUsers(query?)` returns `{ users, loading, error, refetch, invite, deactivate, reactivate, remove }` and requires `users.read:*` (mutations also need `users.write:*`); rejections are a `DirectoryError`. `useGroups(query?)` returns `{ groups, loading, error, refetch, create, remove, addMember, removeMember }` and requires `groups.read:*` (mutations also need `groups.write:*`). `usePayments()` returns `{ requestPayment, getPayment }` and requires the `payments.charge:appUser` scope; `requestPayment(...)` rejects with a `PaymentError`. `useUser()` returns the active end-user identity `{ id, email, display_name, roles, group_ids }` (snake_case verbatim; `id` is `null` for anonymous / preview). `useNavigation()` returns `{ goTo, goBack, push, replace, back, currentRoute }` for internal page navigation — for external URLs use the `Linking` primitive (`Linking.openURL(url)`). `useDatastoreRecord(tableId, recordId)` returns `{ data, loading, error, refetch }` for a single record (data is one row or null). `useDatastoreSchema(tableId)` returns `{ schema, loading, error, refetch }` where `schema` is `{ id, name, columns: [{ id, name, data_type, required, relation_type, target_table_id, is_identification }] }` (structure only, no row data; snake_case verbatim) — use it to resolve a stored `columnId` to its column type at runtime; requires the `datastore.read:<table>` scope. `useAsset(fileId)` returns `{ url, file, loading, error, refetch }` — the `url` is an absolute URL composed against the host's API base. `useChildRenderer()` returns `{ renderNode(node) }` — container widgets call it to render arbitrary child page-tree nodes (prefer the `WidgetTree` component for the common case).
 - `WidgetTree({ node })` — component that renders an author-authored child node through the host's renderer; used by Tabs / Card / custom containers to host arbitrary child widgets.
-- `Text`, `View`, `Pressable`, `Image`, `ScrollView`, `TextInput`, `FlatList`, `SectionList`, `ActivityIndicator`, `Switch`, `StyleSheet`, `Linking`, `Icon`, `DateTimePicker` — re-exported from `react-native` (the RN primitives) or implemented in the SDK (`Icon` wraps `lucide-react-native`, `DateTimePicker` wraps `@react-native-community/datetimepicker`). The web build aliases `react-native` to `react-native-web` so widgets render in the browser without any per-platform code; the exported Expo app's Metro bundler resolves the real `react-native` library. `Linking` is a static API (`Linking.openURL(url)`) — use it for external URLs, and use `useNavigation().goTo(pageId)` for internal page navigation. See https://reactnative.dev/docs/ for per-component props.
+- `Text`, `View`, `Pressable`, `Image`, `ScrollView`, `TextInput`, `FlatList`, `SectionList`, `ActivityIndicator`, `Switch`, `StyleSheet`, `Linking`, `Icon`, `DateTimePicker` — re-exported from `react-native` (the RN primitives) or implemented in the SDK (`Icon` wraps `lucide-react-native`; `DateTimePicker` wraps `@react-native-community/datetimepicker` on native and renders `<input type="date|time|datetime-local">` directly on web because the RN library has no react-native-web mapping). The web build aliases `react-native` to `react-native-web` so the RN-re-exported primitives render in the browser without any per-platform code; the exported Expo app's Metro bundler resolves the real `react-native` library. `Linking` is a static API (`Linking.openURL(url)`) — use it for external URLs, and use `useNavigation().goTo(pageId)` for internal page navigation. See https://reactnative.dev/docs/ for per-component props.
 - `WidgetContextProvider` — React context provider that the host (Studio, Player, exported app) wraps widgets with.
 
 ## Design & visual polish

package/dist/contract.cjs

@@ -664,7 +664,7 @@ const PRIMITIVES = [
   {
     name: "DateTimePicker",
     description:
-      'Cross-platform date / time / datetime picker. `<DateTimePicker value={iso} onChange={iso => …} mode="date" | "time" | "datetime" />`. The value prop and the onChange callback both speak ISO 8601 strings (the datastore wire format) — authors never round-trip through `new Date()`. Web renders the browser\'s native input via react-native-web; native uses @react-native-community/datetimepicker.',
+      'Cross-platform date / time / datetime picker. `<DateTimePicker value={iso} onChange={iso => …} mode="date" | "time" | "datetime" />`. The value prop and the onChange callback both speak ISO 8601 strings (the datastore wire format) — authors never round-trip through `new Date()`. Web renders the browser\'s native `<input type="date|time|datetime-local">` directly (react-native-web has no mapping for the RN datetimepicker library); native uses @react-native-community/datetimepicker.',
     rnComponent: "@react-native-community/datetimepicker",
     docsUrl: "https://github.com/react-native-datetimepicker/datetimepicker",
   },
@@ -1133,11 +1133,18 @@ const VETTED_IMPORTS = [
     description: "React bindings for leaflet. Web-only.",
   },
   {
-    specifier: "expo-av",
+    specifier: "expo-audio",
     platforms: ["native"],
     category: "media",
     description:
-      "Native audio + video playback. Native-only; pair with browser <audio>/<video> in widget.web.jsx.",
+      "Native audio playback (Expo SDK 56; replaces the removed expo-av). Native-only; pair with the browser <audio> element in widget.web.jsx.",
+  },
+  {
+    specifier: "expo-video",
+    platforms: ["native"],
+    category: "media",
+    description:
+      "Native video playback (Expo SDK 56; replaces the removed expo-av). Native-only; pair with the browser <video> element in widget.web.jsx.",
   },
   {
     specifier: "@react-native-community/datetimepicker",

package/dist/contract.js

@@ -664,7 +664,7 @@ const PRIMITIVES = [
   {
     name: "DateTimePicker",
     description:
-      'Cross-platform date / time / datetime picker. `<DateTimePicker value={iso} onChange={iso => …} mode="date" | "time" | "datetime" />`. The value prop and the onChange callback both speak ISO 8601 strings (the datastore wire format) — authors never round-trip through `new Date()`. Web renders the browser\'s native input via react-native-web; native uses @react-native-community/datetimepicker.',
+      'Cross-platform date / time / datetime picker. `<DateTimePicker value={iso} onChange={iso => …} mode="date" | "time" | "datetime" />`. The value prop and the onChange callback both speak ISO 8601 strings (the datastore wire format) — authors never round-trip through `new Date()`. Web renders the browser\'s native `<input type="date|time|datetime-local">` directly (react-native-web has no mapping for the RN datetimepicker library); native uses @react-native-community/datetimepicker.',
     rnComponent: "@react-native-community/datetimepicker",
     docsUrl: "https://github.com/react-native-datetimepicker/datetimepicker",
   },
@@ -1133,11 +1133,18 @@ const VETTED_IMPORTS = [
     description: "React bindings for leaflet. Web-only.",
   },
   {
-    specifier: "expo-av",
+    specifier: "expo-audio",
     platforms: ["native"],
     category: "media",
     description:
-      "Native audio + video playback. Native-only; pair with browser <audio>/<video> in widget.web.jsx.",
+      "Native audio playback (Expo SDK 56; replaces the removed expo-av). Native-only; pair with the browser <audio> element in widget.web.jsx.",
+  },
+  {
+    specifier: "expo-video",
+    platforms: ["native"],
+    category: "media",
+    description:
+      "Native video playback (Expo SDK 56; replaces the removed expo-av). Native-only; pair with the browser <video> element in widget.web.jsx.",
   },
   {
     specifier: "@react-native-community/datetimepicker",

package/dist/datetimepicker.js

@@ -1,64 +1,74 @@
-// REQ-WSDK-PLATFORM §6 — `<DateTimePicker>` SDK primitive.
+// REQ-WSDK-PLATFORM §6 — `<DateTimePicker>` SDK primitive (web implementation).
 //
-// Cross-platform date / time / datetime picker. Wraps
-// `@react-native-community/datetimepicker` (works on both web and native:
-// on web it renders the browser's native `<input type="date|time">`
-// surface through react-native-web's mapping). The wire format is ISO
-// 8601 strings — the same format the datastore speaks, so widget authors
-// never round-trip through `new Date()`.
+// `@react-native-community/datetimepicker` ships iOS / Android only — it has
+// no react-native-web mapping, so importing it in the browser yields no
+// rendered control. The web build therefore uses the browser's native
+// `<input type="date" | "time" | "datetime-local">` directly and keeps the
+// public contract identical to the native build: the value prop and the
+// onChange callback both speak ISO 8601 strings (the datastore wire format),
+// so a widget's JSX is byte-for-byte the same on both platforms.
 //
-// Props:
+// Props (mirrors datetimepicker.native.js):
 //   value: string | null   — ISO 8601 (`2026-05-28` for date mode,
-//                            `2026-05-28T14:30:00.000Z` for datetime).
-//                            `null` defaults to "now".
+//                            `14:30` for time mode,
+//                            `2026-05-28T14:30:00.000Z` for datetime mode).
+//                            `null` / "" leaves the input blank.
 //   onChange: (iso: string) => void
 //   mode:    "date" | "time" | "datetime"  — default "date"
 //   minimumDate / maximumDate: string | null  — ISO bounds
 //   disabled: boolean
-//
-// The author writes:
-//   const [day, setDay] = useState(null);
-//   <DateTimePicker value={day} onChange={setDay} mode="date" />
-//
-// …and `day` ends up as an ISO string suitable for storing directly into
-// a DATE column. The previous pattern of importing the RN library
-// directly and managing `Date` objects in widget state is gone — the
-// primitive normalizes both ends.
+//   accessibilityLabel: string | undefined  — written to the DOM input as
+//                            `aria-label`. The shared form-field renderer
+//                            in `frontend/src/components/widgets/_shared/
+//                            formFields.jsx` passes the column's label
+//                            through this prop so Playwright / screen
+//                            readers can locate the input by its label.
 
-import React, { useMemo } from "react";
-// eslint-disable-next-line no-restricted-syntax
-import RNDateTimePicker from "@react-native-community/datetimepicker";
+import React from "react";
 
-function _parseToDate(value) {
-  if (value == null || value === "") return new Date();
-  if (value instanceof Date) return Number.isNaN(value.getTime()) ? new Date() : value;
-  if (typeof value === "string") {
-    const d = new Date(value);
-    return Number.isNaN(d.getTime()) ? new Date() : d;
-  }
-  return new Date();
-}
+const MODE_TO_INPUT_TYPE = {
+  date: "date",
+  time: "time",
+  datetime: "datetime-local",
+};
 
-function _formatToIso(date, mode) {
-  if (!(date instanceof Date) || Number.isNaN(date.getTime())) return null;
+// Render the saved ISO value in the format each `<input>` accepts.
+//
+// `date` and `time` are already local / timezone-free in the SDK contract,
+// so they pass through verbatim. `datetime-local` needs `YYYY-MM-DDTHH:mm`
+// in LOCAL time — we round-trip through Date to convert a stored UTC ISO
+// (e.g. `2026-05-28T13:30:00.000Z`) to the user's local clock.
+function _isoToInputValue(value, mode) {
+  if (value == null || value === "") return "";
   if (mode === "date") {
-    // Local-date ISO (yyyy-mm-dd) — calendar dates should be timezone-free
-    // so a "May 28" picked in Stockholm doesn't read as "May 27" in NYC.
-    const y = date.getFullYear();
-    const m = String(date.getMonth() + 1).padStart(2, "0");
-    const d = String(date.getDate()).padStart(2, "0");
-    return `${y}-${m}-${d}`;
+    // Strip any time portion if a datetime ISO accidentally lands in a
+    // date-mode picker — keep the YYYY-MM-DD head.
+    return String(value).slice(0, 10);
   }
   if (mode === "time") {
-    // Local-time ISO (hh:mm) — time-of-day is timezone-free for the same
-    // reason. Authors who want a full datetime get mode="datetime".
-    const h = String(date.getHours()).padStart(2, "0");
-    const mm = String(date.getMinutes()).padStart(2, "0");
-    return `${h}:${mm}`;
+    return String(value).slice(0, 5);
   }
-  // datetime — full UTC ISO so the wire format round-trips through the
-  // datastore's DATE column unchanged.
-  return date.toISOString();
+  // datetime-local
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) return "";
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  const hh = String(d.getHours()).padStart(2, "0");
+  const mm = String(d.getMinutes()).padStart(2, "0");
+  return `${y}-${m}-${day}T${hh}:${mm}`;
+}
+
+// Translate the input's typed string back to the ISO format the wire wants.
+// `date` and `time` are already in the right shape; `datetime-local` is
+// parsed as local time and serialized as the full UTC ISO so the value
+// round-trips into a DATE column unchanged.
+function _inputValueToIso(raw, mode) {
+  if (raw == null || raw === "") return "";
+  if (mode === "date" || mode === "time") return raw;
+  const d = new Date(raw);
+  if (Number.isNaN(d.getTime())) return "";
+  return d.toISOString();
 }
 
 export function DateTimePicker({
@@ -68,35 +78,57 @@ export function DateTimePicker({
   minimumDate,
   maximumDate,
   disabled,
+  accessibilityLabel,
 }) {
   const effectiveMode = mode === "time" || mode === "datetime" ? mode : "date";
-  const dateValue = useMemo(() => _parseToDate(value), [value]);
-  const min = useMemo(
-    () => (minimumDate ? _parseToDate(minimumDate) : undefined),
-    [minimumDate],
-  );
-  const max = useMemo(
-    () => (maximumDate ? _parseToDate(maximumDate) : undefined),
-    [maximumDate],
-  );
+  const inputType = MODE_TO_INPUT_TYPE[effectiveMode];
+  const inputValue = _isoToInputValue(value, effectiveMode);
 
-  const handleChange = (_event, picked) => {
+  const handleChange = (event) => {
     if (typeof onChange !== "function") return;
-    if (!(picked instanceof Date)) return;
-    const iso = _formatToIso(picked, effectiveMode);
-    if (iso != null) onChange(iso);
+    const iso = _inputValueToIso(event.target.value, effectiveMode);
+    onChange(iso);
   };
 
-  // The RN library's `mode` accepts "date" / "time"; for "datetime" we
-  // ask for "datetime" on iOS / Android and let the picker's
-  // implementation handle it. react-native-web's mapping interprets
-  // "datetime" as `<input type="datetime-local">`.
-  return React.createElement(RNDateTimePicker, {
-    value: dateValue,
-    mode: effectiveMode,
-    minimumDate: min,
-    maximumDate: max,
-    disabled: !!disabled,
+  // The min/max props accept ISO strings too — pass them through in the
+  // input-friendly representation. Undefined when not provided so the
+  // browser doesn't show an empty constraint chip.
+  const min =
+    minimumDate != null && minimumDate !== ""
+      ? _isoToInputValue(minimumDate, effectiveMode)
+      : undefined;
+  const max =
+    maximumDate != null && maximumDate !== ""
+      ? _isoToInputValue(maximumDate, effectiveMode)
+      : undefined;
+
+  // Inline styles match the SDK's other web-only primitives — the host's
+  // form widgets wrap this in their own labelled field, so the input just
+  // needs to look like a normal text input.
+  const style = {
+    boxSizing: "border-box",
+    width: "100%",
+    minHeight: 44,
+    padding: "8px 12px",
+    fontSize: 16,
+    fontFamily: "inherit",
+    color: "inherit",
+    backgroundColor: "transparent",
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: "rgba(0, 0, 0, 0.16)",
+    borderRadius: 6,
+    outline: "none",
+  };
+
+  return React.createElement("input", {
+    type: inputType,
+    value: inputValue,
     onChange: handleChange,
+    min,
+    max,
+    disabled: !!disabled,
+    style,
+    "aria-label": accessibilityLabel || undefined,
   });
 }

package/dist/datetimepicker.native.js

@@ -0,0 +1,102 @@
+// REQ-WSDK-PLATFORM §6 — `<DateTimePicker>` SDK primitive.
+//
+// Cross-platform date / time / datetime picker. Wraps
+// `@react-native-community/datetimepicker` (works on both web and native:
+// on web it renders the browser's native `<input type="date|time">`
+// surface through react-native-web's mapping). The wire format is ISO
+// 8601 strings — the same format the datastore speaks, so widget authors
+// never round-trip through `new Date()`.
+//
+// Props:
+//   value: string | null   — ISO 8601 (`2026-05-28` for date mode,
+//                            `2026-05-28T14:30:00.000Z` for datetime).
+//                            `null` defaults to "now".
+//   onChange: (iso: string) => void
+//   mode:    "date" | "time" | "datetime"  — default "date"
+//   minimumDate / maximumDate: string | null  — ISO bounds
+//   disabled: boolean
+//
+// The author writes:
+//   const [day, setDay] = useState(null);
+//   <DateTimePicker value={day} onChange={setDay} mode="date" />
+//
+// …and `day` ends up as an ISO string suitable for storing directly into
+// a DATE column. The previous pattern of importing the RN library
+// directly and managing `Date` objects in widget state is gone — the
+// primitive normalizes both ends.
+
+import React, { useMemo } from "react";
+// eslint-disable-next-line no-restricted-syntax
+import RNDateTimePicker from "@react-native-community/datetimepicker";
+
+function _parseToDate(value) {
+  if (value == null || value === "") return new Date();
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? new Date() : value;
+  if (typeof value === "string") {
+    const d = new Date(value);
+    return Number.isNaN(d.getTime()) ? new Date() : d;
+  }
+  return new Date();
+}
+
+function _formatToIso(date, mode) {
+  if (!(date instanceof Date) || Number.isNaN(date.getTime())) return null;
+  if (mode === "date") {
+    // Local-date ISO (yyyy-mm-dd) — calendar dates should be timezone-free
+    // so a "May 28" picked in Stockholm doesn't read as "May 27" in NYC.
+    const y = date.getFullYear();
+    const m = String(date.getMonth() + 1).padStart(2, "0");
+    const d = String(date.getDate()).padStart(2, "0");
+    return `${y}-${m}-${d}`;
+  }
+  if (mode === "time") {
+    // Local-time ISO (hh:mm) — time-of-day is timezone-free for the same
+    // reason. Authors who want a full datetime get mode="datetime".
+    const h = String(date.getHours()).padStart(2, "0");
+    const mm = String(date.getMinutes()).padStart(2, "0");
+    return `${h}:${mm}`;
+  }
+  // datetime — full UTC ISO so the wire format round-trips through the
+  // datastore's DATE column unchanged.
+  return date.toISOString();
+}
+
+export function DateTimePicker({
+  value,
+  onChange,
+  mode,
+  minimumDate,
+  maximumDate,
+  disabled,
+}) {
+  const effectiveMode = mode === "time" || mode === "datetime" ? mode : "date";
+  const dateValue = useMemo(() => _parseToDate(value), [value]);
+  const min = useMemo(
+    () => (minimumDate ? _parseToDate(minimumDate) : undefined),
+    [minimumDate],
+  );
+  const max = useMemo(
+    () => (maximumDate ? _parseToDate(maximumDate) : undefined),
+    [maximumDate],
+  );
+
+  const handleChange = (_event, picked) => {
+    if (typeof onChange !== "function") return;
+    if (!(picked instanceof Date)) return;
+    const iso = _formatToIso(picked, effectiveMode);
+    if (iso != null) onChange(iso);
+  };
+
+  // The RN library's `mode` accepts "date" / "time"; for "datetime" we
+  // ask for "datetime" on iOS / Android and let the picker's
+  // implementation handle it. react-native-web's mapping interprets
+  // "datetime" as `<input type="datetime-local">`.
+  return React.createElement(RNDateTimePicker, {
+    value: dateValue,
+    mode: effectiveMode,
+    minimumDate: min,
+    maximumDate: max,
+    disabled: !!disabled,
+    onChange: handleChange,
+  });
+}

package/dist/primitives.js

@@ -63,8 +63,10 @@ export const Linking = ReactNative.Linking;
 // REQ-WSDK-PLATFORM §6 — `<Icon>` wraps lucide-react-native. Same source
 // runs on both platforms; see ./icon.js.
 export { Icon } from "./icon.js";
-// REQ-WSDK-PLATFORM §6 — `<DateTimePicker>` wraps
-// @react-native-community/datetimepicker and normalizes its value to
-// ISO 8601 strings. Same source runs on both platforms; see
-// ./datetimepicker.js.
+// REQ-WSDK-PLATFORM §6 — `<DateTimePicker>` (web). Renders the browser's
+// native `<input type="date|time|datetime-local">` directly because
+// @react-native-community/datetimepicker (used by the native build in
+// ./datetimepicker.native.js) ships iOS / Android only and has no
+// react-native-web mapping. Both implementations honour the same
+// ISO 8601 value / onChange contract.
 export { DateTimePicker } from "./datetimepicker.js";

package/dist/primitives.native.js

@@ -24,8 +24,10 @@ export {
 // REQ-WSDK-PLATFORM §6 — `<Icon>` is implemented in one file that runs on
 // both platforms (lucide-react-native ships a working build for both).
 export { Icon } from "./icon.js";
-// REQ-WSDK-PLATFORM §6 — `<DateTimePicker>` ditto. The underlying
-// @react-native-community/datetimepicker handles its own
-// per-platform rendering; the SDK wrapper just normalizes the value
-// to ISO strings.
-export { DateTimePicker } from "./datetimepicker.js";
+// REQ-WSDK-PLATFORM §6 — `<DateTimePicker>` (native). Wraps
+// @react-native-community/datetimepicker, which ships iOS / Android only
+// and has no react-native-web mapping, so the web build uses a separate
+// implementation backed by `<input type="date|time|datetime-local">` in
+// `./datetimepicker.js`. Both files honour the same ISO 8601 value /
+// onChange contract.
+export { DateTimePicker } from "./datetimepicker.native.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colixsystems/widget-sdk",
-  "version": "0.39.0",
+  "version": "0.40.1",
   "description": "Common widget interface for AppStudio. Implements WidgetManifest, WidgetContext, property schema, and helper hooks.",
   "type": "module",
   "main": "./dist/index.js",