@vanira/sdk-react-native 0.0.2

package/src/presets/chalkboard/drawUtils.ts

@@ -0,0 +1,123 @@
+/**
+ * Simplified draw-shape parser for RN chalkboard (web MathBoard parity subset).
+ */
+
+export type DrawShapeType =
+  | 'circle'
+  | 'rectangle'
+  | 'triangle'
+  | 'line'
+  | 'label'
+  | 'polygon'
+  | 'polyline'
+  | 'path';
+
+export type BoardDrawShape = {
+  type: DrawShapeType;
+  summary: string;
+};
+
+function num(value: unknown): number | undefined {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === 'string' && value.trim() !== '') {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : undefined;
+  }
+  return undefined;
+}
+
+function inferShapeType(args: Record<string, unknown>): DrawShapeType | null {
+  const figure = String(args.figure ?? '').toLowerCase();
+  if (figure.includes('circle')) {
+    return 'circle';
+  }
+  if (figure.includes('rect') || figure.includes('square')) {
+    return 'rectangle';
+  }
+  if (figure.includes('triangle')) {
+    return 'triangle';
+  }
+  if (figure.includes('line')) {
+    return 'line';
+  }
+  return null;
+}
+
+export function buildShapeFromFlatArgs(
+  args: Record<string, unknown>,
+): BoardDrawShape | null {
+  const type = (
+    String(args.shape_type ?? args.type ?? '').toLowerCase() ||
+    inferShapeType(args) ||
+    ''
+  ) as DrawShapeType;
+
+  if (!type) {
+    const label = String(args.label_text ?? args.text ?? '').trim();
+    if (label) {
+      return {type: 'label', summary: `Label: ${label}`};
+    }
+    return null;
+  }
+
+  if (type === 'circle') {
+    const r = num(args.radius) ?? num(args.r) ?? 40;
+    const cx = num(args.center_x) ?? num(args.cx);
+    const cy = num(args.center_y) ?? num(args.cy);
+    return {
+      type: 'circle',
+      summary: `Circle r=${r}${cx !== undefined ? ` @(${cx},${cy})` : ''}`,
+    };
+  }
+
+  if (type === 'rectangle') {
+    const w = num(args.rect_width) ?? num(args.width) ?? 80;
+    const h = num(args.rect_height) ?? num(args.height) ?? 60;
+    return {type: 'rectangle', summary: `Rectangle ${w}×${h}`};
+  }
+
+  if (type === 'triangle') {
+    const kind = String(args.triangle_kind ?? args.figure ?? 'triangle');
+    return {type: 'triangle', summary: `Triangle (${kind})`};
+  }
+
+  if (type === 'line') {
+    return {type: 'line', summary: 'Line segment'};
+  }
+
+  if (type === 'label') {
+    const text = String(args.label_text ?? args.text ?? '').trim();
+    if (!text) {
+      return null;
+    }
+    return {type: 'label', summary: `Label: ${text}`};
+  }
+
+  return {type, summary: `Shape: ${type}`};
+}
+
+export function buildShapesFromArgs(
+  args: Record<string, unknown>,
+): BoardDrawShape[] {
+  const shapes: BoardDrawShape[] = [];
+  const single = buildShapeFromFlatArgs(args);
+  if (single) {
+    shapes.push(single);
+  }
+
+  const figure = String(args.figure ?? '').trim();
+  if (figure && !single) {
+    shapes.push({type: 'path', summary: `Figure: ${figure}`});
+  }
+
+  return shapes;
+}
+
+export function shapesToBoardAnnotation(shapes: BoardDrawShape[]): string {
+  if (shapes.length === 0) {
+    return '';
+  }
+  return `\n[Diagram: ${shapes.map(s => s.summary).join('; ')}]`;
+}

package/src/presets/chalkboard/textUtils.ts

@@ -0,0 +1,109 @@
+import type {PresetContext} from '../types';
+
+/** Port of vanira-sdk/src/ui/utils.ts cleanLatexText. */
+export function cleanLatexText(text: string): string {
+  if (!text) {
+    return '';
+  }
+  return text
+    .replace(/\\frac\{([^}]+)\}\{([^}]+)\}/g, '$1/$2')
+    .replace(/\\sqrt\{([^}]+)\}/g, '√$1')
+    .replace(/\\sqrt(?![a-zA-Z])/g, '√')
+    .replace(/\bsqrt\b/gi, '√')
+    .replace(/\\left(?![a-zA-Z])/g, '')
+    .replace(/\\right(?![a-zA-Z])/g, '')
+    .replace(/\\text\{([^}]+)\}/g, '$1')
+    .replace(/\\text\{([^}]+)$/g, '$1')
+    .replace(/\\text(?![a-zA-Z])/g, '')
+    .replace(/\\times(?![a-zA-Z])/g, '×')
+    .replace(/\\div(?![a-zA-Z])/g, '÷')
+    .replace(/\\pm(?![a-zA-Z])/g, '±')
+    .replace(/\\ge(q)?(?![a-zA-Z])/g, '≥')
+    .replace(/\\le(q)?(?![a-zA-Z])/g, '≤')
+    .replace(/\\ne(q)?(?![a-zA-Z])/g, '≠')
+    .replace(/\\approx(?![a-zA-Z])/g, '≈')
+    .replace(/\\cdot(?![a-zA-Z])/g, '·')
+    .replace(/\\degree(?![a-zA-Z])/g, '°')
+    .replace(/\\pi(?![a-zA-Z])/g, 'π')
+    .replace(/\\theta(?![a-zA-Z])/g, 'θ')
+    .replace(/\\infty(?![a-zA-Z])/g, '∞')
+    .replace(/[{}]/g, '')
+    .replace(/  +/g, ' ');
+}
+
+export function eraseLastWords(text: string, count: number): string {
+  if (!text) {
+    return '';
+  }
+  const trimmed = text.trimEnd();
+  if (!trimmed) {
+    return '';
+  }
+
+  let current = trimmed;
+  for (let i = 0; i < count; i++) {
+    const lastSpace = current.lastIndexOf(' ');
+    const lastNewline = current.lastIndexOf('\n');
+    const cutIndex = Math.max(lastSpace, lastNewline);
+    if (cutIndex === -1) {
+      current = '';
+      break;
+    }
+    current = current.slice(0, cutIndex).trimEnd();
+  }
+  return current;
+}
+
+function merged(ctx: PresetContext): Record<string, unknown> {
+  return {...ctx.args, ...ctx.clientFields};
+}
+
+export function parseTypeTextArgs(ctx: PresetContext): {
+  text: string;
+  delayMs: number;
+} {
+  const fields = merged(ctx);
+  const rawText = String(
+    fields.text_to_type ??
+      fields.text ??
+      fields.value ??
+      fields.search_query ??
+      fields.query ??
+      '',
+  );
+  const delayMs = Number(
+    fields.delay_ms !== undefined ? fields.delay_ms : 50,
+  );
+  return {
+    text: cleanLatexText(rawText),
+    delayMs: Number.isFinite(delayMs) ? delayMs : 50,
+  };
+}
+
+export function parseEraseTextArgs(ctx: PresetContext): {
+  mode: 'all' | 'words';
+  numWords: number;
+  delayMs: number;
+} {
+  const fields = merged(ctx);
+  const modeRaw = String(fields.mode ?? 'all')
+    .trim()
+    .toLowerCase();
+  const numWords = Number(
+    fields.num_words !== undefined
+      ? fields.num_words
+      : fields.words_count !== undefined
+        ? fields.words_count
+        : fields.count !== undefined
+          ? fields.count
+          : 1,
+  );
+  const delayMs = Number(
+    fields.delay_ms !== undefined ? fields.delay_ms : 50,
+  );
+  return {
+    mode: modeRaw === 'words' ? 'words' : 'all',
+    numWords: Number.isFinite(numWords) ? numWords : 1,
+    delayMs: Number.isFinite(delayMs) ? delayMs : 50,
+  };
+}

package/src/presets/clipRegion/ClipRegionModal.tsx

@@ -0,0 +1,261 @@
+import React, {useCallback, useRef, useState} from 'react';
+import {
+  Modal,
+  PanResponder,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  useWindowDimensions,
+} from 'react-native';
+import {captureRef} from 'react-native-view-shot';
+import type {PresetClient, PresetContext} from '../types';
+import {getClipRegionCaptureTarget} from './clipRegionBridge';
+import {resolveUploadBase} from '../streaming/mediaFrameUpload';
+
+type Props = {
+  visible: boolean;
+  ctx: PresetContext;
+  client: PresetClient | null;
+  onClose: () => void;
+  onCancel: (reason?: string) => void;
+  onComplete: (payload: Record<string, unknown>) => void;
+};
+
+type Rect = {left: number; top: number; width: number; height: number};
+
+export function ClipRegionModal({
+  visible,
+  ctx,
+  client,
+  onClose,
+  onCancel,
+  onComplete,
+}: Props) {
+  const {width: screenW, height: screenH} = useWindowDimensions();
+  const [rect, setRect] = useState<Rect | null>(null);
+  const rectRef = useRef<Rect | null>(null);
+  const [capturing, setCapturing] = useState(false);
+  const startRef = useRef({x: 0, y: 0});
+  const merged = {...ctx.args, ...ctx.clientFields};
+  const hint = String(
+    merged.hint ?? 'Drag to select an area — release to clip.',
+  );
+  const minSize = Number(merged.min_region_px ?? 24);
+
+  const finalizeClip = useCallback(async () => {
+    const activeRect = rectRef.current;
+    if (!activeRect || activeRect.width < minSize || activeRect.height < minSize) {
+      setRect(null);
+      rectRef.current = null;
+      return;
+    }
+    if (!client) {
+      onCancel('No client available');
+      onClose();
+      return;
+    }
+
+    const target = getClipRegionCaptureTarget();
+    if (!target) {
+      onCancel(
+        'Clip region capture target not registered. Ensure PresetHostProvider wraps your app.',
+      );
+      onClose();
+      return;
+    }
+
+    setCapturing(true);
+    try {
+      const uri = await captureRef(target, {
+        format: 'jpg',
+        quality: 0.85,
+        result: 'tmpfile',
+      });
+
+      const uploadBase = resolveUploadBase(client.serverUrl ?? '');
+      const uploadUrl = `${uploadBase}/media/upload`;
+      const form = new FormData();
+      form.append('file', {
+        uri,
+        type: 'image/jpeg',
+        name: `clip_${Date.now()}.jpg`,
+      } as unknown as Blob);
+      form.append('call_id', client.callId ?? '');
+      form.append('reason', String(merged.reason ?? 'region_clip'));
+
+      const res = await fetch(uploadUrl, {method: 'POST', body: form});
+      if (!res.ok) {
+        throw new Error(`Upload HTTP ${res.status}`);
+      }
+      const data = (await res.json()) as {media_id?: string; url?: string};
+      if (!data.media_id || !data.url) {
+        throw new Error('Upload response missing media_id/url');
+      }
+
+      const region = {
+        x: activeRect.left / screenW,
+        y: activeRect.top / screenH,
+        w: activeRect.width / screenW,
+        h: activeRect.height / screenH,
+      };
+
+      onComplete({
+        status: 'success',
+        preset_id: ctx.presetId,
+        media_id: data.media_id,
+        media_url: data.url,
+        region,
+        viewport: {width: screenW, height: screenH},
+        pixel_size: {width: activeRect.width, height: activeRect.height},
+      });
+      onClose();
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Clip failed';
+      onCancel(message);
+      onClose();
+    } finally {
+      setCapturing(false);
+      setRect(null);
+      rectRef.current = null;
+    }
+  }, [
+    minSize,
+    client,
+    merged.reason,
+    screenW,
+    screenH,
+    onComplete,
+    onCancel,
+    onClose,
+    ctx.presetId,
+  ]);
+
+  const finalizeClipRef = useRef(finalizeClip);
+  finalizeClipRef.current = finalizeClip;
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => !capturing,
+      onMoveShouldSetPanResponder: () => !capturing,
+      onPanResponderGrant: evt => {
+        const {locationX, locationY} = evt.nativeEvent;
+        startRef.current = {x: locationX, y: locationY};
+        const next = {left: locationX, top: locationY, width: 0, height: 0};
+        rectRef.current = next;
+        setRect(next);
+      },
+      onPanResponderMove: evt => {
+        const {locationX, locationY} = evt.nativeEvent;
+        const start = startRef.current;
+        const next = {
+          left: Math.min(start.x, locationX),
+          top: Math.min(start.y, locationY),
+          width: Math.abs(locationX - start.x),
+          height: Math.abs(locationY - start.y),
+        };
+        rectRef.current = next;
+        setRect(next);
+      },
+      onPanResponderRelease: () => {
+        void finalizeClipRef.current();
+      },
+    }),
+  ).current;
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <Modal
+      visible
+      transparent
+      animationType="fade"
+      statusBarTranslucent
+      onRequestClose={() => {
+        onCancel('User cancelled');
+        onClose();
+      }}>
+      <View style={styles.root} {...panResponder.panHandlers}>
+        <View style={styles.toolbar}>
+          <Text style={styles.hint}>{hint}</Text>
+          <Pressable
+            style={styles.cancelBtn}
+            onPress={() => {
+              onCancel('User cancelled');
+              onClose();
+            }}>
+            <Text style={styles.cancelText}>Cancel</Text>
+          </Pressable>
+        </View>
+
+        {rect && rect.width > 0 && rect.height > 0 ? (
+          <View
+            style={[
+              styles.selection,
+              {
+                left: rect.left,
+                top: rect.top,
+                width: rect.width,
+                height: rect.height,
+              },
+            ]}
+            pointerEvents="none"
+          />
+        ) : null}
+
+        {capturing ? (
+          <View style={styles.capturingOverlay}>
+            <Text style={styles.capturingText}>Capturing…</Text>
+          </View>
+        ) : null}
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.28)',
+  },
+  toolbar: {
+    position: 'absolute',
+    top: 48,
+    left: 16,
+    right: 16,
+    zIndex: 2,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    padding: 12,
+    borderRadius: 14,
+    backgroundColor: '#0f172a',
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.12)',
+  },
+  hint: {flex: 1, color: '#e2e8f0', fontSize: 13, lineHeight: 18},
+  cancelBtn: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.15)',
+  },
+  cancelText: {color: '#e2e8f0', fontWeight: '600', fontSize: 13},
+  selection: {
+    position: 'absolute',
+    borderWidth: 2,
+    borderColor: '#6366f1',
+    borderRadius: 2,
+    backgroundColor: 'transparent',
+  },
+  capturingOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0,0,0,0.45)',
+  },
+  capturingText: {color: '#fff', fontSize: 16, fontWeight: '600'},
+});

package/src/presets/clipRegion/clipRegionBridge.ts

@@ -0,0 +1,19 @@
+import type {View} from 'react-native';
+
+type CaptureTarget = View | null;
+
+let captureTarget: CaptureTarget = null;
+
+/** Register the app root view used for clip-region screenshots. */
+export function registerClipRegionCaptureTarget(target: CaptureTarget): () => void {
+  captureTarget = target;
+  return () => {
+    if (captureTarget === target) {
+      captureTarget = null;
+    }
+  };
+}
+
+export function getClipRegionCaptureTarget(): CaptureTarget {
+  return captureTarget;
+}

package/src/presets/form/formValidation.ts

@@ -0,0 +1,104 @@
+import type {FormFieldDefinition, FormFieldType} from './parseFormFields';
+
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const PHONE_RE = /^\+?[0-9\s\-().]{7,20}$/;
+const DATE_RE = /^\d{4}-\d{2}-\d{2}$/;
+
+export type FormValues = Record<string, string | boolean>;
+
+export function getFieldStringValue(
+  values: FormValues,
+  field: FormFieldDefinition,
+): string {
+  const raw = values[field.id];
+  if (field.type === 'checkbox') {
+    return raw === true || raw === 'true' ? 'true' : 'false';
+  }
+  return String(raw ?? '').trim();
+}
+
+export function validateFormFields(
+  fields: FormFieldDefinition[],
+  values: FormValues,
+): Record<string, string> {
+  const errors: Record<string, string> = {};
+
+  for (const field of fields) {
+    const value = getFieldStringValue(values, field);
+
+    if (field.type === 'checkbox') {
+      if (field.required && value !== 'true') {
+        errors[field.id] = `${field.label} is required`;
+      }
+      continue;
+    }
+
+    if (field.required && !value) {
+      errors[field.id] = `${field.label} is required`;
+      continue;
+    }
+
+    if (!value) {
+      continue;
+    }
+
+    const err = validateByType(field.type, value, field.label);
+    if (err) {
+      errors[field.id] = err;
+    }
+
+    if (
+      (field.type === 'select' || field.type === 'radio') &&
+      field.options.length > 0
+    ) {
+      const allowed = field.options.map(o =>
+        typeof o === 'string' ? o : o.value,
+      );
+      if (!allowed.includes(value)) {
+        errors[field.id] = `Select a valid ${field.label}`;
+      }
+    }
+  }
+
+  return errors;
+}
+
+function validateByType(
+  type: FormFieldType,
+  value: string,
+  label: string,
+): string | null {
+  switch (type) {
+    case 'email':
+      return EMAIL_RE.test(value) ? null : `Enter a valid ${label}`;
+    case 'phone':
+      return PHONE_RE.test(value)
+        ? null
+        : `Enter a valid phone number for ${label}`;
+    case 'number':
+      return Number.isFinite(Number(value))
+        ? null
+        : `${label} must be a number`;
+    case 'date':
+      if (!DATE_RE.test(value)) {
+        return `${label} must be YYYY-MM-DD`;
+      }
+      return Number.isNaN(Date.parse(value))
+        ? `Enter a valid ${label}`
+        : null;
+    default:
+      return null;
+  }
+}
+
+/** Build web-shaped submit payload: Record<id, string>. */
+export function buildFormSubmitPayload(
+  fields: FormFieldDefinition[],
+  values: FormValues,
+): Record<string, string> {
+  const result: Record<string, string> = {};
+  for (const field of fields) {
+    result[field.id] = getFieldStringValue(values, field);
+  }
+  return result;
+}