@crafter/rn-ai-elements 0.0.1

package/src/streaming/renderers/HeadingRenderer.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Text, StyleSheet, type TextStyle } from 'react-native';
+import { useAIElementsTheme } from '../../theme';
+import type { AIElementsTheme } from '../../theme';
+import type { MarkdownNode } from '../parser';
+import { renderInlineChildren } from './renderInlineChildren';
+
+export interface HeadingRendererProps {
+  node: MarkdownNode;
+}
+
+function headingStyle(level: number, theme: AIElementsTheme): TextStyle {
+  const { typography, colors } = theme;
+  const weight = typography.fontWeight.bold as TextStyle['fontWeight'];
+
+  const sizeMap: Record<number, number> = {
+    1: typography.fontSize['2xl'],
+    2: typography.fontSize.xl,
+    3: typography.fontSize.lg,
+    4: typography.fontSize.md,
+    5: typography.fontSize.sm,
+    6: typography.fontSize.xs,
+  };
+
+  const marginMap: Record<number, number> = {
+    1: 20,
+    2: 16,
+    3: 14,
+    4: 12,
+    5: 10,
+    6: 8,
+  };
+
+  const fontSize = sizeMap[level] ?? typography.fontSize.md;
+
+  return {
+    fontSize,
+    fontWeight: weight,
+    fontFamily: typography.fontFamily,
+    color: colors.foreground,
+    lineHeight: fontSize * typography.lineHeight.tight,
+    marginTop: marginMap[level] ?? 12,
+    marginBottom: 8,
+  };
+}
+
+export const HeadingRenderer = React.memo(function HeadingRenderer({
+  node,
+}: HeadingRendererProps) {
+  const theme = useAIElementsTheme();
+  const level = node.level ?? 1;
+
+  return (
+    <Text style={[styles.base, headingStyle(level, theme)]}>
+      {renderInlineChildren(node.children, theme)}
+    </Text>
+  );
+});
+
+const styles = StyleSheet.create({
+  base: {
+    flexShrink: 1,
+  },
+});

package/src/streaming/renderers/ImageRenderer.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Image, View, Text, StyleSheet } from 'react-native';
+import { useAIElementsTheme } from '../../theme';
+import type { MarkdownNode } from '../parser';
+
+export interface ImageRendererProps {
+  node: MarkdownNode;
+}
+
+export const ImageRenderer = React.memo(function ImageRenderer({
+  node,
+}: ImageRendererProps) {
+  const theme = useAIElementsTheme();
+
+  if (!node.url) return null;
+
+  return (
+    <View style={styles.container}>
+      <Image
+        source={{ uri: node.url }}
+        style={[
+          styles.image,
+          {
+            borderRadius: theme.radius.md,
+            backgroundColor: theme.colors.muted,
+          },
+        ]}
+        resizeMode="contain"
+        accessibilityLabel={node.alt ?? undefined}
+      />
+      {node.alt ? (
+        <Text
+          style={[
+            styles.caption,
+            {
+              color: theme.colors.mutedForeground,
+              fontSize: theme.typography.fontSize.sm,
+              fontFamily: theme.typography.fontFamily,
+            },
+          ]}
+        >
+          {node.alt}
+        </Text>
+      ) : null}
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: 8,
+    alignItems: 'center',
+  },
+  image: {
+    width: '100%',
+    height: 200,
+  },
+  caption: {
+    marginTop: 4,
+    textAlign: 'center',
+  },
+});

package/src/streaming/renderers/LinkRenderer.tsx

@@ -0,0 +1,53 @@
+import React, { useCallback } from 'react';
+import { Text, Pressable, Linking, StyleSheet, type TextStyle } from 'react-native';
+import { useAIElementsTheme } from '../../theme';
+import type { MarkdownNode } from '../parser';
+import { renderInlineChildren } from './renderInlineChildren';
+
+export interface LinkRendererProps {
+  node: MarkdownNode;
+}
+
+export const LinkRenderer = React.memo(function LinkRenderer({
+  node,
+}: LinkRendererProps) {
+  const theme = useAIElementsTheme();
+
+  const handlePress = useCallback(() => {
+    if (node.url) {
+      Linking.openURL(node.url).catch(() => {
+        // Silently ignore -- the URL may not be openable.
+      });
+    }
+  }, [node.url]);
+
+  const textStyle: TextStyle = {
+    color: theme.colors.primary,
+    fontSize: theme.typography.fontSize.md,
+    fontFamily: theme.typography.fontFamily,
+    textDecorationLine: 'underline',
+  };
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      style={({ pressed }) => [
+        styles.pressable,
+        pressed && styles.pressed,
+      ]}
+    >
+      <Text style={textStyle}>
+        {renderInlineChildren(node.children, theme)}
+      </Text>
+    </Pressable>
+  );
+});
+
+const styles = StyleSheet.create({
+  pressable: {
+    alignSelf: 'flex-start',
+  },
+  pressed: {
+    opacity: 0.7,
+  },
+});

package/src/streaming/renderers/ListRenderer.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { View, Text, StyleSheet, type TextStyle } from 'react-native';
+import { useAIElementsTheme } from '../../theme';
+import type { MarkdownNode } from '../parser';
+import { renderInlineChildren } from './renderInlineChildren';
+
+export interface ListRendererProps {
+  node: MarkdownNode;
+}
+
+export const ListRenderer = React.memo(function ListRenderer({
+  node,
+}: ListRendererProps) {
+  const theme = useAIElementsTheme();
+  const ordered = node.ordered ?? false;
+
+  const bulletStyle: TextStyle = {
+    color: theme.colors.mutedForeground,
+    fontSize: theme.typography.fontSize.md,
+    fontFamily: theme.typography.fontFamily,
+    lineHeight: theme.typography.fontSize.md * theme.typography.lineHeight.normal,
+  };
+
+  const textStyle: TextStyle = {
+    color: theme.colors.foreground,
+    fontSize: theme.typography.fontSize.md,
+    fontFamily: theme.typography.fontFamily,
+    lineHeight: theme.typography.fontSize.md * theme.typography.lineHeight.normal,
+    flexShrink: 1,
+  };
+
+  return (
+    <View style={styles.list}>
+      {(node.children ?? []).map((item, index) => (
+        <View key={`list-item-${index}`} style={styles.item}>
+          <Text style={[styles.bullet, bulletStyle]}>
+            {ordered ? `${index + 1}.` : '\u2022'}
+          </Text>
+          <Text style={[styles.content, textStyle]}>
+            {renderInlineChildren(item.children, theme)}
+          </Text>
+        </View>
+      ))}
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  list: {
+    marginVertical: 4,
+  },
+  item: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    marginBottom: 4,
+  },
+  bullet: {
+    width: 24,
+    textAlign: 'right',
+    marginRight: 8,
+  },
+  content: {
+    flex: 1,
+  },
+});

package/src/streaming/renderers/TableRenderer.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { View, Text, StyleSheet, type TextStyle } from 'react-native';
+import { useAIElementsTheme } from '../../theme';
+import type { MarkdownNode } from '../parser';
+import { renderInlineChildren } from './renderInlineChildren';
+
+export interface TableRendererProps {
+  node: MarkdownNode;
+}
+
+export const TableRenderer = React.memo(function TableRenderer({
+  node,
+}: TableRendererProps) {
+  const theme = useAIElementsTheme();
+
+  const rows = node.children ?? [];
+
+  const headerTextStyle: TextStyle = {
+    fontWeight: theme.typography.fontWeight.semibold as TextStyle['fontWeight'],
+    color: theme.colors.foreground,
+    fontSize: theme.typography.fontSize.sm,
+    fontFamily: theme.typography.fontFamily,
+  };
+
+  const cellTextStyle: TextStyle = {
+    color: theme.colors.foreground,
+    fontSize: theme.typography.fontSize.sm,
+    fontFamily: theme.typography.fontFamily,
+  };
+
+  return (
+    <View
+      style={[
+        styles.table,
+        {
+          borderColor: theme.colors.border,
+          borderRadius: theme.radius.sm,
+        },
+      ]}
+    >
+      {rows.map((row, rowIndex) => {
+        const cells = row.children ?? [];
+        const isHeaderRow = cells.some((c) => c.header);
+
+        return (
+          <View
+            key={`row-${rowIndex}`}
+            style={[
+              styles.row,
+              {
+                borderBottomColor: theme.colors.border,
+                backgroundColor: isHeaderRow
+                  ? theme.colors.muted
+                  : 'transparent',
+              },
+              rowIndex === rows.length - 1 && styles.lastRow,
+            ]}
+          >
+            {cells.map((cell, cellIndex) => (
+              <View
+                key={`cell-${rowIndex}-${cellIndex}`}
+                style={[
+                  styles.cell,
+                  {
+                    borderRightColor: theme.colors.border,
+                  },
+                  cellIndex === cells.length - 1 && styles.lastCell,
+                ]}
+              >
+                <Text style={cell.header ? headerTextStyle : cellTextStyle}>
+                  {renderInlineChildren(cell.children, theme)}
+                </Text>
+              </View>
+            ))}
+          </View>
+        );
+      })}
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  table: {
+    borderWidth: 1,
+    marginVertical: 8,
+    overflow: 'hidden',
+  },
+  row: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+  },
+  lastRow: {
+    borderBottomWidth: 0,
+  },
+  cell: {
+    flex: 1,
+    padding: 8,
+    borderRightWidth: 1,
+  },
+  lastCell: {
+    borderRightWidth: 0,
+  },
+});

package/src/streaming/renderers/TextRenderer.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Text, StyleSheet, type TextStyle } from 'react-native';
+import { useAIElementsTheme } from '../../theme';
+import type { MarkdownNode } from '../parser';
+import { renderInlineChildren } from './renderInlineChildren';
+
+export interface TextRendererProps {
+  node: MarkdownNode;
+}
+
+export const TextRenderer = React.memo(function TextRenderer({
+  node,
+}: TextRendererProps) {
+  const theme = useAIElementsTheme();
+
+  const baseStyle: TextStyle = {
+    color: theme.colors.foreground,
+    fontSize: theme.typography.fontSize.md,
+    lineHeight: theme.typography.fontSize.md * theme.typography.lineHeight.normal,
+    fontFamily: theme.typography.fontFamily,
+  };
+
+  if (node.type === 'text') {
+    return <Text style={baseStyle}>{node.content}</Text>;
+  }
+
+  // paragraph
+  return (
+    <Text style={[baseStyle, styles.paragraph]}>
+      {renderInlineChildren(node.children, theme)}
+    </Text>
+  );
+});
+
+const styles = StyleSheet.create({
+  paragraph: {
+    marginBottom: 8,
+  },
+});

package/src/streaming/renderers/index.ts

@@ -0,0 +1,26 @@
+export { TextRenderer } from './TextRenderer';
+export type { TextRendererProps } from './TextRenderer';
+
+export { HeadingRenderer } from './HeadingRenderer';
+export type { HeadingRendererProps } from './HeadingRenderer';
+
+export { CodeRenderer } from './CodeRenderer';
+export type { CodeRendererProps } from './CodeRenderer';
+
+export { ListRenderer } from './ListRenderer';
+export type { ListRendererProps } from './ListRenderer';
+
+export { LinkRenderer } from './LinkRenderer';
+export type { LinkRendererProps } from './LinkRenderer';
+
+export { ImageRenderer } from './ImageRenderer';
+export type { ImageRendererProps } from './ImageRenderer';
+
+export { BlockquoteRenderer } from './BlockquoteRenderer';
+export type { BlockquoteRendererProps } from './BlockquoteRenderer';
+
+export { TableRenderer } from './TableRenderer';
+export type { TableRendererProps } from './TableRenderer';
+
+export { renderNode } from './renderNode';
+export { renderInlineChildren } from './renderInlineChildren';

package/src/streaming/renderers/renderInlineChildren.tsx

@@ -0,0 +1,115 @@
+import React, { type ReactNode } from 'react';
+import { Text, type TextStyle } from 'react-native';
+import type { AIElementsTheme } from '../../theme';
+import type { MarkdownNode } from '../parser';
+
+/**
+ * Recursively render inline markdown nodes (text, bold, italic, bold_italic,
+ * code_inline, link, image) as nested React Native <Text> elements.
+ *
+ * This is extracted as a shared helper so every block-level renderer can
+ * render its inline children consistently.
+ */
+export function renderInlineChildren(
+  children: MarkdownNode[] | undefined,
+  theme: AIElementsTheme,
+): ReactNode {
+  if (!children || children.length === 0) return null;
+
+  return children.map((child, index) => {
+    const key = `${child.type}-${index}`;
+
+    switch (child.type) {
+      case 'text':
+        return (
+          <Text key={key} style={{ color: theme.colors.foreground }}>
+            {child.content}
+          </Text>
+        );
+
+      case 'bold': {
+        const style: TextStyle = {
+          fontWeight: theme.typography.fontWeight.bold as TextStyle['fontWeight'],
+          color: theme.colors.foreground,
+        };
+        return (
+          <Text key={key} style={style}>
+            {renderInlineChildren(child.children, theme)}
+          </Text>
+        );
+      }
+
+      case 'italic': {
+        const style: TextStyle = {
+          fontStyle: 'italic',
+          color: theme.colors.foreground,
+        };
+        return (
+          <Text key={key} style={style}>
+            {renderInlineChildren(child.children, theme)}
+          </Text>
+        );
+      }
+
+      case 'bold_italic': {
+        const style: TextStyle = {
+          fontWeight: theme.typography.fontWeight.bold as TextStyle['fontWeight'],
+          fontStyle: 'italic',
+          color: theme.colors.foreground,
+        };
+        return (
+          <Text key={key} style={style}>
+            {renderInlineChildren(child.children, theme)}
+          </Text>
+        );
+      }
+
+      case 'code_inline': {
+        const style: TextStyle = {
+          fontFamily: theme.typography.monoFontFamily,
+          fontSize: theme.typography.fontSize.sm,
+          backgroundColor: theme.colors.muted,
+          color: theme.colors.foreground,
+          borderRadius: theme.radius.sm,
+          paddingHorizontal: 4,
+          paddingVertical: 1,
+        };
+        return (
+          <Text key={key} style={style}>
+            {child.content}
+          </Text>
+        );
+      }
+
+      case 'link': {
+        const style: TextStyle = {
+          color: theme.colors.primary,
+          textDecorationLine: 'underline',
+        };
+        // Links inline are rendered as styled text.
+        // The LinkRenderer handles the Pressable wrapper at block level.
+        // Inside inline contexts we just show styled text.
+        return (
+          <Text key={key} style={style}>
+            {renderInlineChildren(child.children, theme)}
+          </Text>
+        );
+      }
+
+      case 'image':
+        // Images inline are rendered as their alt text within a Text tree.
+        return (
+          <Text key={key} style={{ color: theme.colors.mutedForeground }}>
+            {child.alt ?? '[image]'}
+          </Text>
+        );
+
+      default:
+        return (
+          <Text key={key} style={{ color: theme.colors.foreground }}>
+            {child.content}
+          </Text>
+        );
+    }
+  });
+}

package/src/streaming/renderers/renderNode.tsx

@@ -0,0 +1,72 @@
+import React, { type ReactNode } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useAIElementsTheme } from '../../theme';
+import type { MarkdownNode } from '../parser';
+import { TextRenderer } from './TextRenderer';
+import { HeadingRenderer } from './HeadingRenderer';
+import { CodeRenderer } from './CodeRenderer';
+import { ListRenderer } from './ListRenderer';
+import { LinkRenderer } from './LinkRenderer';
+import { ImageRenderer } from './ImageRenderer';
+import { BlockquoteRenderer } from './BlockquoteRenderer';
+import { TableRenderer } from './TableRenderer';
+
+/** Themed horizontal rule. */
+const HorizontalRule = React.memo(function HorizontalRule() {
+  const theme = useAIElementsTheme();
+  return (
+    <View
+      style={[
+        hrStyles.rule,
+        { backgroundColor: theme.colors.border },
+      ]}
+    />
+  );
+});
+
+const hrStyles = StyleSheet.create({
+  rule: {
+    height: 1,
+    marginVertical: 16,
+  },
+});
+
+/**
+ * Map a single MarkdownNode to its corresponding React Native renderer.
+ * Used by both StreamingMarkdown and BlockquoteRenderer (for nested blocks).
+ */
+export function renderNode(node: MarkdownNode, key: string): ReactNode {
+  switch (node.type) {
+    case 'paragraph':
+    case 'text':
+      return <TextRenderer key={key} node={node} />;
+
+    case 'heading':
+      return <HeadingRenderer key={key} node={node} />;
+
+    case 'code_inline':
+    case 'code_block':
+      return <CodeRenderer key={key} node={node} />;
+
+    case 'list':
+      return <ListRenderer key={key} node={node} />;
+
+    case 'link':
+      return <LinkRenderer key={key} node={node} />;
+
+    case 'image':
+      return <ImageRenderer key={key} node={node} />;
+
+    case 'blockquote':
+      return <BlockquoteRenderer key={key} node={node} />;
+
+    case 'horizontal_rule':
+      return <HorizontalRule key={key} />;
+
+    case 'table':
+      return <TableRenderer key={key} node={node} />;
+
+    default:
+      return null;
+  }
+}

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,77 @@
+import React, {
+  createContext,
+  useContext,
+  useMemo,
+  type PropsWithChildren,
+} from 'react';
+import { useColorScheme } from 'react-native';
+import type { AIElementsTheme } from './tokens';
+import { lightTheme, darkTheme } from './defaultTheme';
+
+const ThemeContext = createContext<AIElementsTheme>(lightTheme);
+
+export type ColorSchemeMode = 'light' | 'dark' | 'system';
+
+type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+
+export interface AIElementsProviderProps {
+  theme?: DeepPartial<AIElementsTheme>;
+  mode?: ColorSchemeMode;
+}
+
+function mergeTheme(
+  base: AIElementsTheme,
+  overrides?: DeepPartial<AIElementsTheme>
+): AIElementsTheme {
+  if (!overrides) return base;
+  return {
+    ...base,
+    ...overrides,
+    colors: { ...base.colors, ...overrides.colors },
+    spacing: { ...base.spacing, ...overrides.spacing },
+    radius: { ...base.radius, ...overrides.radius },
+    typography: {
+      ...base.typography,
+      ...overrides.typography,
+      fontSize: {
+        ...base.typography.fontSize,
+        ...overrides.typography?.fontSize,
+      },
+      lineHeight: {
+        ...base.typography.lineHeight,
+        ...overrides.typography?.lineHeight,
+      },
+      fontWeight: {
+        ...base.typography.fontWeight,
+        ...overrides.typography?.fontWeight,
+      },
+    },
+  };
+}
+
+export function AIElementsProvider({
+  theme: themeOverrides,
+  mode = 'system',
+  children,
+}: PropsWithChildren<AIElementsProviderProps>) {
+  const systemScheme = useColorScheme();
+
+  const resolvedTheme = useMemo(() => {
+    const isDark =
+      mode === 'system' ? systemScheme === 'dark' : mode === 'dark';
+    const base = isDark ? darkTheme : lightTheme;
+    return mergeTheme(base, themeOverrides);
+  }, [mode, systemScheme, themeOverrides]);
+
+  return (
+    <ThemeContext.Provider value={resolvedTheme}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useAIElementsTheme(): AIElementsTheme {
+  return useContext(ThemeContext);
+}