@comergehq/studio 0.1.2 → 0.1.3

package/src/components/primitives/types.ts

@@ -0,0 +1,30 @@
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+export type WithStyle<T> = {
+  style?: StyleProp<T>;
+};
+
+export type PressStateStyle<T> = {
+  style?: StyleProp<T> | ((state: { pressed: boolean; disabled?: boolean }) => StyleProp<T>);
+};
+
+export type TextAlign = 'auto' | 'left' | 'right' | 'center' | 'justify';
+
+export type TextVariant = 'body' | 'bodyMuted' | 'caption' | 'captionMuted' | 'title';
+
+export type ButtonVariant = 'primary' | 'neutral' | 'danger' | 'ghost';
+
+export type ButtonSize = 'sm' | 'md' | 'icon';
+
+export type SurfaceVariant = 'background' | 'surface' | 'surfaceRaised' | 'floating';
+
+export type CardVariant = 'surface' | 'surfaceRaised';
+
+export type DividerVariant = 'subtle' | 'default';
+
+export type IconColorRole = 'default' | 'muted' | 'primary' | 'danger' | 'success' | 'warning';
+
+export type TextStyleProp = StyleProp<TextStyle>;
+export type ViewStyleProp = StyleProp<ViewStyle>;
+
+

package/src/components/studio-sheet/StudioBottomSheet.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import BottomSheet, { type BottomSheetBackgroundProps, type BottomSheetProps } from '@gorhom/bottom-sheet';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { useTheme } from '../../theme';
+import { StudioSheetBackground, type StudioSheetBackgroundProps } from './StudioSheetBackground';
+import type { StudioSheetSnapPoints } from './types';
+
+export type StudioBottomSheetProps = {
+  /**
+   * Controlled open state.
+   */
+  open: boolean;
+  onOpenChange?: (open: boolean) => void;
+
+  /**
+   * Snap points for the sheet.
+   */
+  snapPoints?: StudioSheetSnapPoints;
+
+  /**
+   * Optional ref forwarding to control the BottomSheet imperatively.
+   */
+  sheetRef?: React.RefObject<BottomSheet | null>;
+
+  /**
+   * Provide a custom background renderer (e.g. BlurView).
+   */
+  background?: Pick<StudioSheetBackgroundProps, 'renderBackground'>;
+
+  /**
+   * Content inside the sheet.
+   */
+  children: React.ReactNode;
+
+  /**
+   * Additional BottomSheet props, for advanced tuning.
+   * We intentionally do not expose everything as first-class props to keep SRP.
+   */
+  bottomSheetProps?: Omit<
+    BottomSheetProps,
+    | 'ref'
+    | 'index'
+    | 'snapPoints'
+    | 'enablePanDownToClose'
+    | 'backgroundComponent'
+    | 'topInset'
+    | 'bottomInset'
+    | 'handleIndicatorStyle'
+    | 'onChange'
+    | 'children'
+  >;
+};
+
+export function StudioBottomSheet({
+  open,
+  onOpenChange,
+  snapPoints = ['80%', '100%'],
+  sheetRef,
+  background,
+  children,
+  bottomSheetProps,
+}: StudioBottomSheetProps) {
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const internalSheetRef = React.useRef<BottomSheet | null>(null);
+  const resolvedSheetRef = sheetRef ?? internalSheetRef;
+
+  // Gorhom BottomSheet `index` is not reliably "fully controlled" across versions.
+  // Ensure the visual sheet actually opens/closes when `open` changes (e.g. via header X button).
+  React.useEffect(() => {
+    const sheet = resolvedSheetRef.current;
+    if (!sheet) return;
+
+    if (open) {
+      // Open to the highest snap point by default.
+      sheet.snapToIndex(snapPoints.length - 1);
+    } else {
+      sheet.close();
+    }
+  }, [open, resolvedSheetRef, snapPoints.length]);
+
+  const handleChange = React.useCallback(
+    (index: number) => {
+      onOpenChange?.(index >= 0);
+    },
+    [onOpenChange]
+  );
+
+  return (
+    <BottomSheet
+      ref={resolvedSheetRef}
+      index={open ? snapPoints.length - 1 : -1}
+      snapPoints={snapPoints}
+      enablePanDownToClose
+      keyboardBehavior="extend"
+      keyboardBlurBehavior="restore"
+      android_keyboardInputMode="adjustResize"
+      backgroundComponent={(props: BottomSheetBackgroundProps) => (
+        <StudioSheetBackground {...props} renderBackground={background?.renderBackground} />
+      )}
+      topInset={insets.top}
+      bottomInset={insets.bottom}
+      handleIndicatorStyle={{ backgroundColor: theme.colors.handleIndicator }}
+      onChange={handleChange}
+      {...bottomSheetProps}
+    >
+      <View style={{ flex: 1, overflow: 'hidden' }}>{children}</View>
+    </BottomSheet>
+  );
+}
+
+

package/src/components/studio-sheet/StudioSheetBackground.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { Platform, View, type ViewStyle } from 'react-native';
+import type { BottomSheetBackgroundProps } from '@gorhom/bottom-sheet';
+import { LiquidGlassView, isLiquidGlassSupported } from '@callstack/liquid-glass';
+
+import { useTheme } from '../../theme';
+
+export type StudioSheetBackgroundProps = BottomSheetBackgroundProps & {
+  /**
+   * Optional override to render a custom background (e.g. BlurView).
+   * If provided, it receives the computed container style.
+   */
+  renderBackground?: (params: { style: ViewStyle }) => React.ReactNode;
+};
+
+export function StudioSheetBackground({
+  style,
+  renderBackground,
+}: StudioSheetBackgroundProps) {
+  const theme = useTheme();
+  const radius = Platform.OS === 'ios' ? 39 : 16;
+  const fallbackBgColor = theme.scheme === 'dark' ? 'rgba(11, 8, 15, 0.85)' : 'rgba(255, 255, 255, 0.85)';
+  const secondaryBgBaseColor = theme.scheme === 'dark' ? 'rgb(24, 24, 27)' : 'rgb(173, 173, 173)';
+
+  const containerStyle: ViewStyle = {
+    ...(style as ViewStyle),
+    borderTopLeftRadius: radius,
+    borderTopRightRadius: radius,
+    overflow: 'hidden',
+  };
+
+  if (renderBackground) {
+    return <>{renderBackground({ style: containerStyle })}</>;
+  }
+
+  return (
+    <>
+      <LiquidGlassView
+        style={[containerStyle, !isLiquidGlassSupported && { backgroundColor: fallbackBgColor }]}
+        effect="regular"
+      />
+      {isLiquidGlassSupported && (
+        <View
+          style={[
+            containerStyle,
+            {
+              backgroundColor: secondaryBgBaseColor,
+              opacity: 0.4,
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              pointerEvents: 'none',
+            },
+          ]}
+        />
+      )}
+    </>
+  );
+}
+
+

package/src/components/studio-sheet/StudioSheetHeader.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { View, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../../theme';
+
+export type StudioSheetHeaderProps = {
+  left?: React.ReactNode;
+  right?: React.ReactNode;
+  center?: React.ReactNode;
+  style?: ViewStyle;
+};
+
+export function StudioSheetHeader({ left, center, right, style }: StudioSheetHeaderProps) {
+  const theme = useTheme();
+  return (
+    <View
+      style={[
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          paddingHorizontal: theme.spacing.lg,
+          paddingBottom: theme.spacing.sm,
+        },
+        style,
+      ]}
+    >
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>{left}</View>
+      <View style={{ flex: 1, alignItems: 'center' }}>{center}</View>
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>{right}</View>
+    </View>
+  );
+}
+
+

package/src/components/studio-sheet/StudioSheetHeaderIconButton.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { Pressable, View, type ViewStyle } from 'react-native';
+import { LiquidGlassView, isLiquidGlassSupported } from '@callstack/liquid-glass';
+
+import { useTheme } from '../../theme';
+
+export type StudioSheetHeaderIconButtonProps = {
+  onPress: () => void;
+  disabled?: boolean;
+  children: React.ReactNode;
+  style?: ViewStyle;
+  accessibilityLabel?: string;
+  intent?: 'neutral' | 'primary' | 'danger';
+  appearance?: 'glass' | 'solid';
+};
+
+export function StudioSheetHeaderIconButton({
+  onPress,
+  disabled,
+  children,
+  style,
+  accessibilityLabel,
+  intent = 'neutral',
+  appearance = 'solid',
+}: StudioSheetHeaderIconButtonProps) {
+  const theme = useTheme();
+  const size = 44;
+  const [pressed, setPressed] = React.useState(false);
+
+  const solidBg =
+    intent === 'danger'
+      ? theme.colors.danger
+      : intent === 'primary'
+        ? theme.colors.primary
+        : theme.colors.neutral;
+
+  const glassFallbackBg = theme.scheme === 'dark' ? '#18181B' : '#F6F6F6';
+  const glassInnerBg = intent === 'danger' ? theme.colors.danger : theme.colors.primary;
+
+  const resolvedOpacity = disabled ? 0.6 : pressed ? 0.9 : 1;
+
+  return (
+    <View style={style}>
+      {appearance === 'glass' ? (
+        <LiquidGlassView
+          style={[{ borderRadius: 100 }, !isLiquidGlassSupported && { backgroundColor: glassFallbackBg }]}
+          interactive
+          effect="clear"
+        >
+          <View
+            style={{
+              width: size,
+              height: size,
+              borderRadius: 100,
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: glassInnerBg,
+              opacity: resolvedOpacity,
+            }}
+          >
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel={accessibilityLabel}
+              disabled={disabled}
+              onPress={onPress}
+              onPressIn={() => {
+                if (!disabled) setPressed(true);
+              }}
+              onPressOut={() => setPressed(false)}
+              hitSlop={8}
+              style={{ flex: 1, alignItems: 'center', justifyContent: 'center', width: '100%' }}
+            >
+              {children}
+            </Pressable>
+          </View>
+        </LiquidGlassView>
+      ) : (
+        <View
+          style={{
+            width: size,
+            height: size,
+            borderRadius: 100,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: solidBg,
+            opacity: resolvedOpacity,
+          }}
+        >
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={accessibilityLabel}
+            disabled={disabled}
+            onPress={onPress}
+            onPressIn={() => {
+              if (!disabled) setPressed(true);
+            }}
+            onPressOut={() => setPressed(false)}
+            hitSlop={8}
+            style={{ flex: 1, alignItems: 'center', justifyContent: 'center', width: '100%' }}
+          >
+            {children}
+          </Pressable>
+        </View>
+      )}
+    </View>
+  );
+}
+
+

package/src/components/studio-sheet/StudioSheetPager.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { Animated, type ViewStyle } from 'react-native';
+
+import type { StudioSheetPage } from './types';
+
+export type StudioSheetPagerProps = {
+  activePage: StudioSheetPage;
+  width: number;
+  preview: React.ReactNode;
+  chat: React.ReactNode;
+  style?: ViewStyle;
+};
+
+export function StudioSheetPager({ activePage, width, preview, chat, style }: StudioSheetPagerProps) {
+  const anim = React.useRef(new Animated.Value(activePage === 'chat' ? 1 : 0)).current;
+
+  React.useEffect(() => {
+    Animated.spring(anim, {
+      toValue: activePage === 'chat' ? 1 : 0,
+      useNativeDriver: true,
+      tension: 65,
+      friction: 11,
+    }).start();
+  }, [activePage, anim]);
+
+  const previewTranslateX = anim.interpolate({ inputRange: [0, 1], outputRange: [0, -width] });
+  const chatTranslateX = anim.interpolate({ inputRange: [0, 1], outputRange: [width, 0] });
+
+  return (
+    <Animated.View style={[{ flex: 1 }, style]}>
+      <Animated.View
+        style={[
+          {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            transform: [{ translateX: previewTranslateX }],
+          },
+        ]}
+        pointerEvents={activePage === 'preview' ? 'auto' : 'none'}
+      >
+        {preview}
+      </Animated.View>
+
+      <Animated.View
+        style={[
+          {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            transform: [{ translateX: chatTranslateX }],
+          },
+        ]}
+        pointerEvents={activePage === 'chat' ? 'auto' : 'none'}
+      >
+        {chat}
+      </Animated.View>
+    </Animated.View>
+  );
+}
+
+

package/src/components/studio-sheet/index.ts

@@ -0,0 +1,18 @@
+export { StudioBottomSheet } from './StudioBottomSheet';
+export type { StudioBottomSheetProps } from './StudioBottomSheet';
+
+export { StudioSheetBackground } from './StudioSheetBackground';
+export type { StudioSheetBackgroundProps } from './StudioSheetBackground';
+
+export { StudioSheetPager } from './StudioSheetPager';
+export type { StudioSheetPagerProps } from './StudioSheetPager';
+
+export { StudioSheetHeader } from './StudioSheetHeader';
+export type { StudioSheetHeaderProps } from './StudioSheetHeader';
+
+export { StudioSheetHeaderIconButton } from './StudioSheetHeaderIconButton';
+export type { StudioSheetHeaderIconButtonProps } from './StudioSheetHeaderIconButton';
+
+export type { StudioSheetPage, StudioSheetSnapPoints } from './types';
+
+

package/src/components/studio-sheet/types.ts

@@ -0,0 +1,5 @@
+export type StudioSheetPage = 'preview' | 'chat';
+
+export type StudioSheetSnapPoints = readonly (string | number)[];
+
+

package/src/components/utils/color.ts

@@ -0,0 +1,25 @@
+export function withAlpha(color: string, alpha: number): string {
+  const a = Math.max(0, Math.min(1, alpha));
+  const hex = color.trim();
+  if (!hex.startsWith('#')) return color;
+
+  const raw = hex.slice(1);
+  const expanded =
+    raw.length === 3
+      ? raw
+          .split('')
+          .map((c) => c + c)
+          .join('')
+      : raw;
+
+  if (expanded.length !== 6) return color;
+
+  const r = Number.parseInt(expanded.slice(0, 2), 16);
+  const g = Number.parseInt(expanded.slice(2, 4), 16);
+  const b = Number.parseInt(expanded.slice(4, 6), 16);
+
+  if ([r, g, b].some((n) => Number.isNaN(n))) return color;
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
+}
+
+

package/src/components/utils/formatTimeAgo.ts

@@ -0,0 +1,19 @@
+export function formatTimeAgo(iso: string): string {
+  const then = new Date(iso).getTime();
+  const now = Date.now();
+  const seconds = Math.max(1, Math.floor((now - then) / 1000));
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  const months = Math.floor(days / 30);
+  const years = Math.floor(days / 365);
+
+  if (years > 0) return `${years}y ago`;
+  if (months > 0) return `${months}mo ago`;
+  if (days > 0) return `${days}d ago`;
+  if (hours > 0) return `${hours}h ago`;
+  if (minutes > 0) return `${minutes}m ago`;
+  return `${seconds}s ago`;
+}
+
+

package/src/core/logger.ts

@@ -0,0 +1,42 @@
+import { logger, consoleTransport } from 'react-native-logs';
+
+export type StudioLogger = {
+  debug: (...args: unknown[]) => void;
+  info: (...args: unknown[]) => void;
+  warn: (...args: unknown[]) => void;
+  error: (...args: unknown[]) => void;
+  extend: (extension: string) => Pick<StudioLogger, 'debug' | 'info' | 'warn' | 'error'>;
+  enable: (extension?: string) => boolean;
+  disable: (extension?: string) => boolean;
+  getExtensions: () => string[];
+  setSeverity: (level: string) => string;
+  getSeverity: () => string;
+  patchConsole: () => void;
+};
+
+export const log: StudioLogger = logger.createLogger({
+    levels: {
+      debug: 0,
+      info: 1,
+      warn: 2,
+      error: 3,
+    },
+    severity: "debug",
+    transport: consoleTransport,
+    transportOptions: {
+      colors: {
+        info: "blueBright",
+        warn: "yellowBright",
+        error: "redBright",
+      },
+    },
+    async: true,
+    dateFormat: "time",
+    printLevel: true,
+    printDate: true,
+    fixedExtLvlLength: false,
+    enabled: true,
+  }
+) as unknown as StudioLogger;
+
+

package/src/core/services/http/baseUrl.ts

@@ -0,0 +1,3 @@
+export const BASE_URL = "http://192.168.8.175:8080";
+
+

package/src/core/services/http/index.ts

@@ -0,0 +1,128 @@
+import axios, {
+  AxiosError,
+  AxiosInstance,
+  InternalAxiosRequestConfig,
+  AxiosResponse,
+} from 'axios';
+import { getSupabaseClient } from '../supabase';
+import { log } from '../../logger';
+import { BASE_URL } from './baseUrl';
+
+declare module 'axios' {
+  export interface AxiosRequestConfig {
+    _retried?: boolean;
+  }
+}
+
+export const createApiClient = (baseURL: string): AxiosInstance => {
+  const apiClient = axios.create({
+    baseURL,
+    timeout: 3 * 60 * 1000,
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    },
+  });
+
+  const maskAuthHeader = (headers: unknown) => {
+    if (!headers || typeof headers !== 'object') return headers;
+    const copy: Record<string, unknown> = { ...(headers as any) };
+    const auth = (copy.Authorization ?? copy.authorization) as unknown;
+    if (typeof auth === 'string' && auth.startsWith('Bearer ')) {
+      copy.Authorization = 'Bearer [REDACTED]';
+    }
+    return copy;
+  };
+
+  apiClient.interceptors.request.use(
+    async (config: InternalAxiosRequestConfig) => {
+      try {
+        const supabase = getSupabaseClient();
+        const { data } = await supabase.auth.getSession();
+        const accessToken = data.session?.access_token;
+        if (accessToken) {
+          config.headers = config.headers ?? {};
+          (config.headers).Authorization = `Bearer ${accessToken}`;
+        }
+      } catch (err) {
+        log.warn('Failed to attach auth token to request', err);
+      }
+
+      log.debug('Request:', {
+        url: config.url,
+        method: config.method,
+        headers: maskAuthHeader(config.headers),
+        data: config.data,
+      });
+      return config;
+    },
+    (error: AxiosError) => {
+      log.error('Request Error:', error);
+      return Promise.reject(error);
+    }
+  );
+
+  apiClient.interceptors.response.use(
+    (response: AxiosResponse) => {
+      log.debug('Response:', {
+        url: response.config?.url,
+        status: response.status,
+        headers: response.headers,
+        data: response.data,
+      });
+      return response;
+    },
+    async (error: AxiosError) => {
+      const originalRequest = error.config as
+        | (InternalAxiosRequestConfig & { _retried?: boolean })
+        | undefined;
+      log.error('Response Error:', {
+        message: error.message,
+        code: error.code,
+        url: originalRequest?.url,
+        method: originalRequest?.method,
+        requestHeaders: maskAuthHeader(originalRequest?.headers),
+        requestData: originalRequest?.data,
+        status: error.response?.status,
+        statusText: (error.response as any)?.statusText,
+        responseHeaders: error.response?.headers,
+        responseData: error.response?.data,
+      });
+
+      if (!originalRequest) {
+        return Promise.reject(error);
+      }
+
+      const authHeader = (originalRequest.headers as any)?.Authorization as string | undefined;
+      const hasBearerToken = Boolean(authHeader && authHeader.startsWith('Bearer '));
+
+      if (error.response?.status === 401 && hasBearerToken && !originalRequest._retried) {
+        originalRequest._retried = true;
+        try {
+          const supabase = getSupabaseClient();
+          const { data, error: refreshError } = await supabase.auth.refreshSession();
+          if (refreshError) throw refreshError;
+          const newToken = data.session?.access_token;
+          if (newToken && originalRequest.headers) {
+            (originalRequest.headers as any).Authorization = `Bearer ${newToken}`;
+          }
+          await new Promise((resolve) => setTimeout(resolve, 500));
+          return apiClient(originalRequest);
+        } catch (refreshErr) {
+          log.warn('Token refresh failed', refreshErr);
+          return Promise.reject(refreshErr);
+        }
+      }
+
+      return Promise.reject(error);
+    }
+  );
+
+  return apiClient;
+};
+
+export const api = createApiClient(BASE_URL);
+
+export default createApiClient;
+
+

package/src/core/services/http/public.ts

@@ -0,0 +1,14 @@
+import axios from "axios";
+
+import { BASE_URL } from "./baseUrl";
+
+export const publicApi = axios.create({
+	baseURL: BASE_URL,
+	timeout: 30_000,
+	headers: {
+		Accept: "application/json",
+		"Content-Type": "application/json",
+	},
+});
+
+