@syra.fm/sdk 0.4.0 → 0.5.0

package/lib/typescript/module/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB;;;;;;GAMG;AAEH,mFAAmF;AACnF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;EAKhC,CAAC;AACH,MAAM,MAAM,eAAe,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAEpE,4CAA4C;AAC5C,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAO9B,CAAC;AACH,MAAM,MAAM,aAAa,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAEhE,yBAAyB;AACzB,MAAM,MAAM,WAAW,GAAG,MAAM,aAAa,CAAC;AAE9C;;;GAGG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAW7B,CAAC;AACH,MAAM,MAAM,YAAY,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAE9D;;;;;;;;;GASG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAQ/B,CAAC;AACH,MAAM,MAAM,cAAc,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAElE;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAa/B,CAAC;AACH,MAAM,MAAM,cAAc,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,oBAAoB,CAAC,CAAC"}

package/package.json

@@ -1,39 +1,48 @@
 {
   "name": "@syra.fm/sdk",
-  "version": "0.4.0",
-  "description": "Headless, isomorphic client for the Syra public API — catalog reads and 30s preview clips. No React/RN/DOM dependencies; public reads only.",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "version": "0.5.0",
+  "description": "Syra SDK — headless, isomorphic catalog client (Node/React-free, public reads + 30s previews) that also ships the Syra live-rooms engine (audio rooms over LiveKit) on React Native and web.",
   "source": "src/index.ts",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/commonjs/index.d.ts",
+  "react-native": "src/index.native.ts",
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
   },
   "exports": {
     ".": {
+      "react-native": "./src/index.native.ts",
+      "browser": {
+        "types": "./lib/typescript/module/index.native.d.ts",
+        "import": "./lib/module/index.native.js",
+        "require": "./lib/commonjs/index.native.js"
+      },
       "import": {
-        "types": "./dist/types/index.d.ts",
-        "default": "./dist/esm/index.js"
+        "types": "./lib/typescript/module/index.d.ts",
+        "default": "./lib/module/index.js"
       },
       "require": {
-        "types": "./dist/types/index.d.ts",
-        "default": "./dist/cjs/index.js"
+        "types": "./lib/typescript/commonjs/index.d.ts",
+        "default": "./lib/commonjs/index.js"
       },
-      "default": "./dist/esm/index.js"
+      "default": "./lib/module/index.js"
     },
+    "./src/live/assets/*": "./src/live/assets/*",
     "./package.json": "./package.json"
   },
   "files": [
-    "dist",
-    "src"
+    "src",
+    "lib"
   ],
   "keywords": [
     "syra",
     "sdk",
     "music",
     "api-client",
-    "preview"
+    "preview",
+    "live-rooms"
   ],
   "author": "Syra Team",
   "license": "MIT",
@@ -41,21 +50,124 @@
     "node": ">=18.0.0"
   },
   "scripts": {
-    "build": "bun run clean && bun run build:cjs && bun run build:esm && bun run build:types && bun run build:markers",
-    "build:cjs": "tsc -p tsconfig.cjs.json",
-    "build:esm": "tsc -p tsconfig.esm.json && node scripts/fix-esm-imports.mjs",
-    "build:types": "tsc -p tsconfig.types.json",
-    "build:markers": "node scripts/write-dist-markers.mjs",
-    "clean": "rm -rf dist",
-    "typecheck": "tsc -p tsconfig.json",
+    "build": "bob build",
+    "clean": "rm -rf lib",
+    "typecheck": "tsc --noEmit -p tsconfig.build.json",
     "test": "bun test src",
     "prepublishOnly": "bun run build"
   },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "exclude": "{**/{__tests__,__mocks__}/**,**/*.{test,spec}.{ts,tsx},**/*.mp3}",
+    "targets": [
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
   "dependencies": {
     "zod": "^3.25.76"
   },
+  "peerDependencies": {
+    "react": "^19.2.3",
+    "react-native": "^0.85.3",
+    "react-native-reanimated": "^4.3.1",
+    "react-native-safe-area-context": "^5.7.0",
+    "@oxyhq/services": "^13.1.7",
+    "@oxyhq/core": "^5.2.1",
+    "livekit-client": "^2.20.0",
+    "@livekit/react-native": "^2.11.1",
+    "expo-audio": "~56.0.12",
+    "expo-image-picker": "~56.0.18",
+    "socket.io-client": "^4.8.1",
+    "@expo/vector-icons": "^15.0.2",
+    "react-native-svg": "15.15.4",
+    "sonner-native": "^0.21.1",
+    "expo-blur": "~56.0.3"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    },
+    "react-native-reanimated": {
+      "optional": true
+    },
+    "react-native-safe-area-context": {
+      "optional": true
+    },
+    "@oxyhq/services": {
+      "optional": true
+    },
+    "@oxyhq/core": {
+      "optional": true
+    },
+    "livekit-client": {
+      "optional": true
+    },
+    "@livekit/react-native": {
+      "optional": true
+    },
+    "expo-audio": {
+      "optional": true
+    },
+    "expo-image-picker": {
+      "optional": true
+    },
+    "socket.io-client": {
+      "optional": true
+    },
+    "@expo/vector-icons": {
+      "optional": true
+    },
+    "react-native-svg": {
+      "optional": true
+    },
+    "sonner-native": {
+      "optional": true
+    },
+    "expo-blur": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@types/node": "^20.0.0",
-    "typescript": "~5.9.2"
+    "@types/react": "~19.2.14",
+    "react-native-builder-bob": "^0.40.16",
+    "nativewind": "5.0.0-preview.3",
+    "typescript": "~5.9.3",
+    "react": "^19.2.3",
+    "react-native": "^0.85.3",
+    "react-native-reanimated": "^4.3.1",
+    "react-native-safe-area-context": "^5.7.0",
+    "@oxyhq/services": "^13.1.7",
+    "@oxyhq/core": "^5.2.1",
+    "livekit-client": "^2.20.0",
+    "@livekit/react-native": "^2.11.1",
+    "expo-audio": "~56.0.12",
+    "expo-image-picker": "~56.0.18",
+    "socket.io-client": "^4.8.1",
+    "@expo/vector-icons": "^15.0.2",
+    "react-native-svg": "15.15.4",
+    "sonner-native": "^0.21.1",
+    "expo-blur": "~56.0.3"
   }
 }

package/src/index.native.ts

@@ -0,0 +1,2 @@
+export * from './index';
+export * from './live';

package/src/live/assets/icons/spaces-icon.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import { ViewStyle, type ColorValue } from 'react-native';
+
+export const LiveRoomsIcon = ({ color = 'currentColor', size = 26, style }: { color?: ColorValue; size?: number; style?: ViewStyle }) => (
+  <Svg viewBox="0 0 24 24" width={size} height={size} style={style}>
+    <Path d="M12 22.25c-4.99 0-9.18-3.393-10.39-7.994l1.93-.512c.99 3.746 4.4 6.506 8.46 6.506s7.47-2.76 8.46-6.506l1.93.512c-1.21 4.601-5.4 7.994-10.39 7.994zM5 11.5c0 3.866 3.13 7 7 7s7-3.134 7-7V8.75c0-3.866-3.13-7-7-7s-7 3.134-7 7v2.75zm12-2.75v2.75c0 2.761-2.24 5-5 5s-5-2.239-5-5V8.75c0-2.761 2.24-5 5-5s5 2.239 5 5zM11.25 8v4.25c0 .414.34.75.75.75s.75-.336.75-.75V8c0-.414-.34-.75-.75-.75s-.75.336-.75.75zm-3 1v2.25c0 .414.34.75.75.75s.75-.336.75-.75V9c0-.414-.34-.75-.75-.75s-.75.336-.75.75zm7.5 0c0-.414-.34-.75-.75-.75s-.75.336-.75.75v2.25c0 .414.34.75.75.75s.75-.336.75-.75V9z" fill={color} />
+  </Svg>
+);
+
+export const LiveRoomsIconActive = ({ color = 'currentColor', size = 26, style }: { color?: ColorValue; size?: number; style?: ViewStyle }) => (
+  <Svg viewBox="0 0 24 24" width={size} height={size} style={style}>
+    <Path d="M12 22.25c-4.99 0-9.18-3.393-10.39-7.994l1.93-.512c.99 3.746 4.4 6.506 8.46 6.506s7.47-2.76 8.46-6.506l1.93.512c-1.21 4.601-5.4 7.994-10.39 7.994zm0-20.5c-3.87 0-7 3.134-7 7v2.75c0 3.866 3.13 7 7 7s7-3.134 7-7V8.75c0-3.866-3.13-7-7-7zm-2.25 9.5c0 .414-.34.75-.75.75s-.75-.336-.75-.75V9c0-.414.34-.75.75-.75s.75.336.75.75v2.25zm3 1c0 .414-.34.75-.75.75s-.75-.336-.75-.75V8c0-.414.34-.75.75-.75s.75.336.75.75v4.25zm3-1c0 .414-.34.75-.75.75s-.75-.336-.75-.75V9c0-.414.34-.75.75-.75s.75.336.75.75v2.25z" fill={color} />
+  </Svg>
+);

package/src/live/assets/icons/syra-icon.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import Svg, { Rect } from 'react-native-svg';
+import { ViewStyle, type ColorValue } from 'react-native';
+
+export const SyraIcon = ({ color = 'currentColor', size = 26, style }: { color?: ColorValue; size?: number; style?: ViewStyle }) => (
+  <Svg viewBox="0 0 500 500" width={size} height={size} style={style}>
+    <Rect x="303.35" y="46.22" width="128.77" height="407.56" fill={color} />
+    <Rect x="153.71" y="88.97" width="106.76" height="322.05" fill={color} />
+    <Rect x="25" y="131.94" width="86.2" height="236.13" fill={color} />
+  </Svg>
+);
+
+export const SyraIconActive = SyraIcon;

package/src/live/components/AnimatedPulse.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withTiming,
+  Easing,
+} from 'react-native-reanimated';
+
+interface AnimatedPulseProps {
+  size?: number;
+  color?: string;
+}
+
+export const AnimatedPulse = React.memo(function AnimatedPulse({
+  size = 8,
+  color = '#FFFFFF',
+}: AnimatedPulseProps) {
+  const opacity = useSharedValue(1);
+
+  useEffect(() => {
+    opacity.value = withRepeat(
+      withTiming(0.3, { duration: 500, easing: Easing.inOut(Easing.ease) }),
+      -1,
+      true,
+    );
+  }, [opacity]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  return (
+    <Animated.View
+      style={[
+        styles.dot,
+        {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          backgroundColor: color,
+        },
+        animatedStyle,
+      ]}
+    />
+  );
+});
+
+const styles = StyleSheet.create({
+  dot: {},
+});

package/src/live/components/AnimatedSpeakerRing.tsx

@@ -0,0 +1,101 @@
+import React, { useEffect } from 'react';
+import { View, StyleSheet } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withSequence,
+  withTiming,
+  Easing,
+  cancelAnimation,
+} from 'react-native-reanimated';
+
+interface AnimatedSpeakerRingProps {
+  isSpeaking: boolean;
+  isMuted: boolean;
+  primaryColor: string;
+  children: React.ReactNode;
+}
+
+export const AnimatedSpeakerRing = React.memo(function AnimatedSpeakerRing({
+  isSpeaking,
+  isMuted,
+  primaryColor,
+  children,
+}: AnimatedSpeakerRingProps) {
+  const pulseScale = useSharedValue(1);
+  const pulseOpacity = useSharedValue(0);
+
+  useEffect(() => {
+    if (isSpeaking && !isMuted) {
+      pulseOpacity.value = withRepeat(
+        withSequence(
+          withTiming(0.4, { duration: 600, easing: Easing.out(Easing.ease) }),
+          withTiming(0, { duration: 600, easing: Easing.in(Easing.ease) }),
+        ),
+        -1,
+        false,
+      );
+      pulseScale.value = withRepeat(
+        withSequence(
+          withTiming(1.15, { duration: 600, easing: Easing.out(Easing.ease) }),
+          withTiming(1, { duration: 600, easing: Easing.in(Easing.ease) }),
+        ),
+        -1,
+        false,
+      );
+    } else {
+      cancelAnimation(pulseScale);
+      cancelAnimation(pulseOpacity);
+      pulseScale.value = withTiming(1, { duration: 200 });
+      pulseOpacity.value = withTiming(0, { duration: 200 });
+    }
+  }, [isSpeaking, isMuted, pulseScale, pulseOpacity]);
+
+  const pulseStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: pulseScale.value }],
+    opacity: pulseOpacity.value,
+  }));
+
+  return (
+    <View style={styles.container}>
+      <Animated.View
+        style={[
+          styles.pulseRing,
+          { borderColor: primaryColor },
+          pulseStyle,
+        ]}
+      />
+      <View
+        style={[
+          styles.avatarRing,
+          !isMuted
+            ? { borderColor: primaryColor, borderWidth: 3 }
+            : { borderColor: 'transparent', borderWidth: 3 },
+        ]}
+      >
+        {children}
+      </View>
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+  },
+  pulseRing: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    borderRadius: 19,
+    borderWidth: 3,
+  },
+  avatarRing: {
+    borderRadius: 19,
+    padding: 2,
+    position: 'relative',
+  },
+});