@colixsystems/widget-sdk 0.122.0 → 0.124.0

package/dist/richtext-view.js

@@ -0,0 +1,156 @@
+// sc-6970 — the ONE implementation behind the `<RichText>` SDK primitive.
+//
+// Renders the markdown-subset block tree from `markdown.js` with React Native
+// primitives, so formatted content reads the same in the web Player and the
+// exported Expo app. There is deliberately no HTML path — see `markdown.js`.
+//
+// The two platform bindings (`richtext.js` / `richtext.native.js`) differ ONLY
+// in where the primitives come from; the component is defined once here so the
+// hosts cannot drift (CLAUDE.md §3, §8).
+
+import React from "react";
+import { useHostTheme } from "./hooks.js";
+import { parseMarkdown, isHttpImageSrc } from "./markdown.js";
+import { resolveRichTextTokens } from "./richtext-tokens.js";
+
+export function makeRichText(rn) {
+  const { Text, View, Image } = rn;
+
+  function Spans({ spans, tokens }) {
+    return spans.map((span, i) =>
+      React.createElement(
+        Text,
+        {
+          key: i,
+          style: [
+            span.bold ? { fontWeight: "700" } : null,
+            span.italic ? { fontStyle: "italic" } : null,
+            span.code
+              ? {
+                  // A code span needs a mono face; the theme has no mono token.
+                  fontFamily: "monospace",
+                  fontSize: tokens.codeSize,
+                  color: tokens.mutedColor,
+                }
+              : null,
+          ],
+        },
+        span.text,
+      ),
+    );
+  }
+
+  function RichText({ value, renderImage, style, testID }) {
+    const theme = useHostTheme();
+    const tokens = React.useMemo(() => resolveRichTextTokens(theme), [theme]);
+    const blocks = React.useMemo(() => parseMarkdown(value), [value]);
+
+    if (blocks.length === 0) return null;
+
+    const paragraph = {
+      fontFamily: tokens.bodyFont,
+      fontSize: tokens.bodySize,
+      lineHeight: tokens.lineHeight,
+      color: tokens.color,
+      marginBottom: tokens.blockGap,
+    };
+
+    return React.createElement(
+      View,
+      { style, testID },
+      blocks.map((block, i) => {
+        const spans = React.createElement(Spans, { spans: block.spans, tokens });
+
+        if (block.type === "heading") {
+          return React.createElement(
+            Text,
+            {
+              key: i,
+              style: [
+                paragraph,
+                {
+                  fontFamily: tokens.headingFont,
+                  fontWeight: "700",
+                  fontSize: tokens.headingSizes[block.level] || tokens.headingSizes[3],
+                  lineHeight: undefined,
+                },
+              ],
+            },
+            spans,
+          );
+        }
+
+        if (block.type === "image") {
+          if (typeof renderImage === "function") {
+            return React.createElement(
+              View,
+              { key: i, style: { marginBottom: tokens.blockGap } },
+              renderImage(block),
+            );
+          }
+          // Without a resolver only an absolute URL can be shown; a filestore
+          // id needs the widget's own scopes, so it renders as its caption.
+          return React.createElement(
+            View,
+            {
+              key: i,
+              style: {
+                marginBottom: tokens.blockGap,
+                width: tokens.imageWidth[block.size] || tokens.imageWidth.full,
+              },
+            },
+            isHttpImageSrc(block.src)
+              ? React.createElement(Image, {
+                  source: { uri: block.src },
+                  accessibilityLabel: block.alt || undefined,
+                  resizeMode: "cover",
+                  style: {
+                    width: "100%",
+                    aspectRatio: 16 / 9,
+                    borderRadius: tokens.radius,
+                    backgroundColor: tokens.surface,
+                  },
+                })
+              : null,
+            block.alt
+              ? React.createElement(
+                  Text,
+                  {
+                    style: {
+                      fontFamily: tokens.bodyFont,
+                      fontSize: tokens.codeSize,
+                      color: tokens.mutedColor,
+                    },
+                  },
+                  block.alt,
+                )
+              : null,
+          );
+        }
+
+        if (block.type === "bullet" || block.type === "ordered") {
+          return React.createElement(
+            View,
+            { key: i, style: { flexDirection: "row" } },
+            React.createElement(
+              Text,
+              {
+                style: [
+                  paragraph,
+                  { color: tokens.mutedColor, marginRight: tokens.markerGap },
+                ],
+              },
+              block.marker,
+            ),
+            React.createElement(Text, { style: [paragraph, { flex: 1 }] }, spans),
+          );
+        }
+
+        return React.createElement(Text, { key: i, style: paragraph }, spans);
+      }),
+    );
+  }
+
+  RichText.displayName = "RichText";
+  return RichText;
+}

package/dist/richtext.js

@@ -0,0 +1,11 @@
+// sc-6970 — `<RichText>` (web). Binds the shared implementation in
+// ./richtext-view.js to react-native-web's primitives.
+//
+// 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.
+
+import * as ReactNative from "react-native-web";
+import { makeRichText } from "./richtext-view.js";
+
+export const RichText = makeRichText(ReactNative);

package/dist/richtext.native.js

@@ -0,0 +1,8 @@
+// sc-6970 — `<RichText>` (native). Binds the shared implementation in
+// ./richtext-view.js to React Native's own primitives. Only the import differs
+// from the web mirror in ./richtext.js.
+
+import { Text, View, Image } from "react-native";
+import { makeRichText } from "./richtext-view.js";
+
+export const RichText = makeRichText({ Text, View, Image });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colixsystems/widget-sdk",
-  "version": "0.122.0",
+  "version": "0.124.0",
   "description": "Common widget interface for AppStudio. Implements WidgetManifest, WidgetContext, property schema, and helper hooks.",
   "homepage": "https://github.com/Colix-AB/AppStudio",
   "type": "module",
@@ -49,7 +49,7 @@
   ],
   "scripts": {
     "build": "node scripts/build.js",
-    "test": "node --test src/__tests__/contract.test.js src/__tests__/vetted-imports-audit.test.js src/__tests__/hooks-users.test.js src/__tests__/hooks-groups.test.js src/__tests__/hooks-invites.test.js src/__tests__/hooks-schema.test.js src/__tests__/hooks-assets-by-tag.test.js src/__tests__/hooks-filestore-upload.test.js src/__tests__/hooks-filestore-file.test.js src/__tests__/hooks-mutation.test.js src/__tests__/hooks-payments.test.js src/__tests__/hooks-record-permissions.test.js src/__tests__/hooks-geolocation.test.js src/__tests__/hooks-section-empty.test.js src/__tests__/hooks-widget-event.test.js src/__tests__/hooks-widget-input.test.js src/__tests__/hooks-identification.test.js src/__tests__/hooks-subscription.test.js src/__tests__/hooks-volatile-query-key.test.js src/__tests__/linter-users-scope.test.js src/__tests__/linter-comments.test.js src/__tests__/linter-translation-api.test.js src/__tests__/linter-page-url.test.js src/__tests__/linter-image-height.test.js src/__tests__/linter-hardcoded-design.test.js src/__tests__/linter-measured-padding.test.js src/__tests__/linter-payment-error.test.js src/__tests__/linter-platform.test.js src/__tests__/linter-react-import.test.js src/__tests__/lucide-icon-names.test.js src/__tests__/lucideIconName.test.js src/__tests__/manifest-actions.test.js src/__tests__/widget-translations.test.js src/__tests__/hooks-translate.test.js src/__tests__/devserver.test.js src/__tests__/flatten-entry.test.js src/__tests__/host-externals.test.js src/__tests__/datetimepicker.test.js src/__tests__/property-schema-resolve.test.js src/__tests__/corner-radius.test.js src/__tests__/theme-components-parity.test.js src/__tests__/navigation-parity.test.js src/__tests__/theme-depth-tokens.test.js src/__tests__/interaction-lift.test.js src/__tests__/toast-host.test.js src/__tests__/overlay-tokens.test.js src/__tests__/hooks-domain-error-mapping.test.js src/__tests__/linter-datastore-error.test.js src/__tests__/linter-write-gating.test.js src/__tests__/hooks-speech-to-text.test.js src/__tests__/hooks-camera.test.js src/__tests__/hooks-bound-columns.test.js src/__tests__/hooks-stable-query.test.js src/__tests__/hooks-can-write.test.js src/__tests__/widget-route.test.js"
+    "test": "node --test src/__tests__/contract.test.js src/__tests__/vetted-imports-audit.test.js src/__tests__/hooks-users.test.js src/__tests__/hooks-groups.test.js src/__tests__/hooks-invites.test.js src/__tests__/hooks-schema.test.js src/__tests__/hooks-assets-by-tag.test.js src/__tests__/hooks-filestore-upload.test.js src/__tests__/hooks-filestore-file.test.js src/__tests__/hooks-mutation.test.js src/__tests__/hooks-payments.test.js src/__tests__/hooks-record-permissions.test.js src/__tests__/hooks-geolocation.test.js src/__tests__/hooks-section-empty.test.js src/__tests__/hooks-widget-event.test.js src/__tests__/hooks-widget-input.test.js src/__tests__/hooks-identification.test.js src/__tests__/hooks-subscription.test.js src/__tests__/hooks-volatile-query-key.test.js src/__tests__/linter-users-scope.test.js src/__tests__/linter-comments.test.js src/__tests__/linter-translation-api.test.js src/__tests__/linter-page-url.test.js src/__tests__/linter-image-height.test.js src/__tests__/linter-hardcoded-design.test.js src/__tests__/linter-measured-padding.test.js src/__tests__/linter-payment-error.test.js src/__tests__/linter-platform.test.js src/__tests__/linter-react-import.test.js src/__tests__/lucide-icon-names.test.js src/__tests__/lucideIconName.test.js src/__tests__/manifest-actions.test.js src/__tests__/widget-translations.test.js src/__tests__/hooks-translate.test.js src/__tests__/devserver.test.js src/__tests__/flatten-entry.test.js src/__tests__/host-externals.test.js src/__tests__/datetimepicker.test.js src/__tests__/property-schema-resolve.test.js src/__tests__/corner-radius.test.js src/__tests__/theme-components-parity.test.js src/__tests__/navigation-parity.test.js src/__tests__/theme-depth-tokens.test.js src/__tests__/interaction-lift.test.js src/__tests__/toast-host.test.js src/__tests__/overlay-tokens.test.js src/__tests__/hooks-domain-error-mapping.test.js src/__tests__/linter-datastore-error.test.js src/__tests__/linter-write-gating.test.js src/__tests__/hooks-speech-to-text.test.js src/__tests__/hooks-camera.test.js src/__tests__/hooks-bound-columns.test.js src/__tests__/hooks-stable-query.test.js src/__tests__/hooks-can-write.test.js src/__tests__/widget-route.test.js src/__tests__/linter-html-in-content.test.js src/__tests__/markdown.test.js src/__tests__/markdown-edit.test.js src/__tests__/richtext-tokens.test.js"
   },
   "engines": {
     "node": ">=18"