@comergehq/studio 0.1.2 → 0.1.4

package/src/components/draw/DrawToolbar.tsx

@@ -0,0 +1,253 @@
+import * as React from 'react';
+import {
+  ActivityIndicator,
+  Animated,
+  PanResponder,
+  Pressable,
+  View,
+  useWindowDimensions,
+  type ViewStyle,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Check, GripVertical, Undo2, X } from 'lucide-react-native';
+
+import { impact } from './optionalHaptics';
+import { DrawColorPicker } from './DrawColorPicker';
+
+export type DrawToolbarProps = {
+  colors: string[];
+  selectedColor: string;
+  onSelectColor: (color: string) => void;
+  canUndo: boolean;
+  onUndo: () => void;
+  onCancel: () => void;
+  onDone: () => void;
+  capturing?: boolean;
+  hidden?: boolean;
+  renderUndoIcon?: () => React.ReactNode;
+  renderCancelIcon?: () => React.ReactNode;
+  renderDoneIcon?: () => React.ReactNode;
+  renderDragHandle?: () => React.ReactNode;
+  style?: ViewStyle;
+};
+
+export function DrawToolbar({
+  colors,
+  selectedColor,
+  onSelectColor,
+  canUndo,
+  onUndo,
+  onCancel,
+  onDone,
+  capturing = false,
+  hidden = false,
+  renderUndoIcon,
+  renderCancelIcon,
+  renderDoneIcon,
+  renderDragHandle,
+  style,
+}: DrawToolbarProps) {
+  const insets = useSafeAreaInsets();
+  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
+
+  const [expanded, setExpanded] = React.useState(false);
+
+  const pos = React.useRef(new Animated.ValueXY({ x: screenWidth / 2 - 110, y: -140 })).current;
+  const start = React.useRef({ x: 0, y: 0 });
+  const currentPos = React.useRef({ x: 0, y: 0 });
+
+  React.useEffect(() => {
+    if (hidden) return;
+    Animated.spring(pos.y, {
+      toValue: insets.top + 60,
+      useNativeDriver: true,
+      damping: 12,
+      stiffness: 120,
+      mass: 0.8,
+    }).start();
+  }, [hidden, insets.top, pos.y]);
+
+  React.useEffect(() => {
+    const id = pos.addListener((v) => {
+      currentPos.current = { x: v.x ?? 0, y: v.y ?? 0 };
+    });
+    return () => {
+      pos.removeListener(id);
+    };
+  }, [pos]);
+
+  const clamp = React.useCallback(
+    (x: number, y: number) => {
+      const minX = 10;
+      const maxX = Math.max(10, screenWidth - 230);
+      const minY = insets.top + 10;
+      const maxY = Math.max(minY, screenHeight - 180);
+      return { x: Math.max(minX, Math.min(maxX, x)), y: Math.max(minY, Math.min(maxY, y)) };
+    },
+    [insets.top, screenHeight, screenWidth]
+  );
+
+  const panResponder = React.useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => false,
+        onMoveShouldSetPanResponder: (_e, g) => Math.abs(g.dx) > 5 || Math.abs(g.dy) > 5,
+        onPanResponderGrant: () => {
+          start.current = { ...currentPos.current };
+        },
+        onPanResponderMove: (_e, g) => {
+          const next = clamp(start.current.x + g.dx, start.current.y + g.dy);
+          pos.setValue(next);
+        },
+        onPanResponderRelease: () => {
+          const next = clamp(currentPos.current.x, currentPos.current.y);
+          Animated.spring(pos, { toValue: next, useNativeDriver: true }).start();
+        },
+      }),
+    [clamp, pos]
+  );
+
+  if (hidden) return null;
+
+  function CircleActionButton({
+    accessibilityLabel,
+    disabled,
+    capturingDisabled,
+    backgroundColor,
+    onPress,
+    children,
+  }: {
+    accessibilityLabel: string;
+    disabled?: boolean;
+    capturingDisabled?: boolean;
+    backgroundColor: string;
+    onPress: () => void;
+    children: React.ReactNode;
+  }) {
+    const isDisabled = Boolean(disabled) || Boolean(capturingDisabled);
+    const [pressed, setPressed] = React.useState(false);
+    return (
+      <View
+        style={{
+          width: 28,
+          height: 28,
+          borderRadius: 14,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor,
+          opacity: isDisabled ? 0.5 : pressed ? 0.85 : 1,
+        }}
+      >
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={accessibilityLabel}
+          disabled={isDisabled}
+          onPress={onPress}
+          onPressIn={() => setPressed(true)}
+          onPressOut={() => setPressed(false)}
+          style={{ width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center' }}
+          hitSlop={8}
+        >
+          {children}
+        </Pressable>
+      </View>
+    );
+  }
+
+  return (
+    <Animated.View
+      style={[
+        {
+          position: 'absolute',
+          zIndex: 100,
+          transform: [{ translateX: pos.x }, { translateY: pos.y }],
+          shadowColor: '#000',
+          shadowOffset: { width: 0, height: 4 },
+          shadowOpacity: 0.3,
+          shadowRadius: 8,
+          elevation: 8,
+        },
+        style,
+      ]}
+      {...panResponder.panHandlers}
+    >
+      <View
+        style={{
+          backgroundColor: '#F43F5E',
+          borderRadius: 16,
+          padding: 12,
+          minWidth: 220,
+        }}
+      >
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+          {renderDragHandle ? (
+            renderDragHandle()
+          ) : (
+            <GripVertical size={20} color="rgba(255, 255, 255, 0.6)" />
+          )}
+
+          <DrawColorPicker
+            colors={colors}
+            selected={selectedColor}
+            expanded={expanded}
+            onToggle={() => {
+              void impact('light');
+              setExpanded((v) => !v);
+            }}
+            onSelect={(c) => {
+              void impact('light');
+              onSelectColor(c);
+            }}
+          />
+
+          <View style={{ width: 1, height: 20, backgroundColor: 'rgba(255, 255, 255, 0.3)', marginHorizontal: 4 }} />
+
+          <CircleActionButton
+            accessibilityLabel="Undo"
+            disabled={!canUndo}
+            capturingDisabled={capturing}
+            backgroundColor={!canUndo || capturing ? 'rgba(255, 255, 255, 0.1)' : 'rgba(255, 255, 255, 0.25)'}
+            onPress={() => {
+              void impact('light');
+              onUndo();
+            }}
+          >
+            {renderUndoIcon ? renderUndoIcon() : <Undo2 size={16} color={canUndo ? '#FFFFFF' : 'rgba(255,255,255,0.4)'} />}
+          </CircleActionButton>
+
+          <CircleActionButton
+            accessibilityLabel="Cancel"
+            capturingDisabled={capturing}
+            backgroundColor="rgba(255, 255, 255, 0.15)"
+            onPress={() => {
+              void impact('medium');
+              onCancel();
+            }}
+          >
+            {renderCancelIcon ? renderCancelIcon() : <X size={16} color="#FFFFFF" />}
+          </CircleActionButton>
+
+          <CircleActionButton
+            accessibilityLabel="Done"
+            capturingDisabled={capturing}
+            backgroundColor="rgba(255, 255, 255, 0.35)"
+            onPress={() => {
+              void impact('medium');
+              onDone();
+            }}
+          >
+            {capturing ? (
+              <ActivityIndicator color="#FFFFFF" size="small" />
+            ) : renderDoneIcon ? (
+              renderDoneIcon()
+            ) : (
+              <Check size={16} color="#FFFFFF" />
+            )}
+          </CircleActionButton>
+        </View>
+      </View>
+    </Animated.View>
+  );
+}
+
+

package/src/components/draw/index.ts

@@ -0,0 +1,15 @@
+export { DrawModeOverlay } from './DrawModeOverlay';
+export type { DrawModeOverlayProps } from './DrawModeOverlay';
+
+export { DrawSurface } from './DrawSurface';
+export type { DrawSurfaceProps } from './DrawSurface';
+
+export { DrawToolbar } from './DrawToolbar';
+export type { DrawToolbarProps } from './DrawToolbar';
+
+export { DrawColorPicker } from './DrawColorPicker';
+export type { DrawColorPickerProps } from './DrawColorPicker';
+
+export type { Point, Stroke } from './types';
+
+

package/src/components/draw/optionalHaptics.ts

@@ -0,0 +1,15 @@
+type ImpactStyle = 'light' | 'medium' | 'heavy';
+
+export async function impact(style: ImpactStyle) {
+  try {
+    const Haptics = require('expo-haptics') as typeof import('expo-haptics');
+    const map: Record<ImpactStyle, any> = {
+      light: Haptics.ImpactFeedbackStyle.Light,
+      medium: Haptics.ImpactFeedbackStyle.Medium,
+      heavy: Haptics.ImpactFeedbackStyle.Heavy,
+    };
+    await Haptics.impactAsync(map[style]);
+  } catch {}
+}
+
+

package/src/components/draw/strokes.ts

@@ -0,0 +1,21 @@
+import type { Point } from './types';
+
+export function pointsToSmoothPath(points: Point[]): string {
+  if (points.length === 0) return '';
+  if (points.length === 1) return `M${points[0].x},${points[0].y}`;
+  if (points.length === 2) return `M${points[0].x},${points[0].y} L${points[1].x},${points[1].y}`;
+
+  let path = `M${points[0].x},${points[0].y}`;
+  for (let i = 1; i < points.length - 1; i++) {
+    const p1 = points[i];
+    const p2 = points[i + 1];
+    const midX = (p1.x + p2.x) / 2;
+    const midY = (p1.y + p2.y) / 2;
+    path += ` Q${p1.x},${p1.y} ${midX},${midY}`;
+  }
+  const last = points[points.length - 1];
+  path += ` L${last.x},${last.y}`;
+  return path;
+}
+
+

package/src/components/draw/types.ts

@@ -0,0 +1,9 @@
+export type Point = { x: number; y: number };
+
+export type Stroke = {
+  points: Point[];
+  color: string;
+  width: number;
+};
+
+

package/src/components/floating-draggable-button/FloatingDraggableButton.tsx

@@ -0,0 +1,323 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import {
+  PanResponder,
+  Pressable,
+  StyleSheet,
+  Text,
+  type GestureResponderEvent,
+  useWindowDimensions,
+  View,
+} from 'react-native';
+import * as Haptics from 'expo-haptics';
+import Animated, {
+  Easing,
+  interpolateColor,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+import { LiquidGlassView, isLiquidGlassSupported } from '@callstack/liquid-glass';
+
+import { DEFAULT_EDGE_PADDING, DEFAULT_OFFSET, DEFAULT_SIZE, ENTER_ROTATION_FROM_DEG, ENTER_SCALE_FROM, HIDDEN_OPACITY, PULSE_DURATION_MS } from './constants';
+import type { FloatingDraggableButtonProps } from './types';
+import { useTheme } from '../../theme';
+
+const HIDDEN_OFFSET_X = 20;
+
+const SPRING_POSITION = { damping: 12, stiffness: 100, mass: 0.8 } as const;
+const SPRING_SCALE_IN = { damping: 10, stiffness: 200 } as const;
+const SPRING_SCALE_OUT = { damping: 12, stiffness: 150 } as const;
+const SPRING_ROTATION_IN = { damping: 15, stiffness: 80 } as const;
+const SPRING_ROTATION_GRAB = { damping: 20 } as const;
+const SPRING_SCALE_GRAB = { damping: 15, stiffness: 200 } as const;
+
+const TIMING_OPACITY_IN = { duration: 300, easing: Easing.out(Easing.ease) } as const;
+const TIMING_OPACITY_OUT = { duration: 250, easing: Easing.in(Easing.ease) } as const;
+
+function clamp(value: number, min: number, max: number) {
+  'worklet';
+  return Math.max(min, Math.min(max, value));
+}
+
+function getHiddenTranslateX(size: number) {
+  return -size - HIDDEN_OFFSET_X;
+}
+
+function getHiddenTranslateY(height: number) {
+  return height;
+}
+
+function getFinalTranslateY(height: number, size: number, bottomOffset: number) {
+  return height - size - bottomOffset;
+}
+
+export function FloatingDraggableButton({
+  onPress,
+  size = DEFAULT_SIZE,
+  disabled = false,
+  ariaLabel,
+  isLoading = false,
+  visible = true,
+  badgeCount = 0,
+  offset = DEFAULT_OFFSET,
+  variant = 'default',
+  forceShowTrigger = 0,
+  children,
+  style,
+  testID,
+  edgePadding = DEFAULT_EDGE_PADDING,
+  backgroundColor,
+}: FloatingDraggableButtonProps) {
+  const theme = useTheme();
+  const { width, height } = useWindowDimensions();
+  const isDanger = variant === 'danger';
+
+  const onPressRef = useRef(onPress);
+  useEffect(() => {
+    onPressRef.current = onPress;
+  }, [onPress]);
+
+  const fallbackBgColor = useMemo(() => {
+    if (backgroundColor) return backgroundColor;
+    if (isDanger) return 'rgba(239, 68, 68, 0.9)';
+    return theme.scheme === 'dark' ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.6)';
+  }, [backgroundColor, isDanger, theme.scheme]);
+
+  const translateX = useSharedValue(getHiddenTranslateX(size));
+  const translateY = useSharedValue(getHiddenTranslateY(height));
+  const scale = useSharedValue(ENTER_SCALE_FROM);
+  const rotation = useSharedValue(ENTER_ROTATION_FROM_DEG);
+  const opacity = useSharedValue(1);
+  const borderPulse = useSharedValue(0);
+  const startPos = useRef({ x: 0, y: 0 });
+  const isAnimatingOut = useRef(false);
+
+  const animateToHidden = useCallback(
+    (options?: { onFinish?: () => void }) => {
+      // Animate back to starting position (reverse of entrance)
+      translateX.value = withSpring(getHiddenTranslateX(size), SPRING_POSITION);
+      translateY.value = withSpring(getHiddenTranslateY(height), SPRING_POSITION);
+      scale.value = withSpring(ENTER_SCALE_FROM, SPRING_SCALE_IN);
+      rotation.value = withSpring(ENTER_ROTATION_FROM_DEG, SPRING_ROTATION_IN);
+
+      const finish = options?.onFinish;
+      if (!finish) {
+        opacity.value = withTiming(HIDDEN_OPACITY, TIMING_OPACITY_OUT);
+        return;
+      }
+
+      opacity.value = withTiming(
+        HIDDEN_OPACITY as unknown as number,
+        TIMING_OPACITY_OUT,
+        (finished?: boolean) => {
+          if (finished) runOnJS(finish)();
+        }
+      );
+    },
+    [height, opacity, rotation, scale, size, translateX, translateY]
+  );
+
+  const animateOut = useCallback(() => {
+    if (isAnimatingOut.current) return;
+    isAnimatingOut.current = true;
+
+    try {
+      void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+    } catch {
+      // noop
+    }
+
+    animateToHidden({
+      onFinish: () => {
+        onPressRef.current?.();
+      },
+    });
+  }, [animateToHidden]);
+
+  useEffect(() => {
+    if (isLoading) {
+      borderPulse.value = withRepeat(
+        withSequence(
+          withTiming(1, { duration: PULSE_DURATION_MS, easing: Easing.out(Easing.ease) }),
+          withTiming(0, { duration: PULSE_DURATION_MS, easing: Easing.in(Easing.ease) })
+        ),
+        -1,
+        true
+      );
+    } else {
+      borderPulse.value = withTiming(0, { duration: 200 });
+    }
+  }, [borderPulse, isLoading]);
+
+  const animateIn = useCallback(() => {
+    isAnimatingOut.current = false;
+    translateX.value = withSpring(offset.left ?? DEFAULT_OFFSET.left, SPRING_POSITION);
+    const finalY = getFinalTranslateY(height, size, offset.bottom ?? DEFAULT_OFFSET.bottom);
+    translateY.value = withSpring(finalY, SPRING_POSITION);
+    scale.value = withSequence(
+      withSpring(1.2, SPRING_SCALE_IN),
+      withSpring(1, SPRING_SCALE_OUT)
+    );
+    rotation.value = withSpring(0, SPRING_ROTATION_IN);
+    opacity.value = withTiming(1, TIMING_OPACITY_IN);
+  }, [height, offset.bottom, offset.left, opacity, rotation, scale, size, translateX, translateY]);
+
+  // Initial animation on mount
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (visible) {
+        animateIn();
+      }
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  useEffect(() => {
+    if (visible && isAnimatingOut.current) {
+      animateIn();
+    } else if (!visible && !isAnimatingOut.current) {
+      animateToHidden();
+      isAnimatingOut.current = true;
+    }
+  }, [visible, animateIn, animateToHidden]);
+
+  useEffect(() => {
+    if (forceShowTrigger > 0 && visible) {
+      isAnimatingOut.current = false;
+      animateIn();
+    }
+  }, [forceShowTrigger, visible, animateIn]);
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: () => {
+        startPos.current = {
+          x: translateX.value,
+          y: translateY.value,
+        };
+        scale.value = withSpring(1.1, SPRING_SCALE_GRAB);
+        rotation.value = withSpring(0, SPRING_ROTATION_GRAB);
+      },
+      onPanResponderMove: (_: GestureResponderEvent, gesture) => {
+        const newX = startPos.current.x + gesture.dx;
+        const newY = startPos.current.y + gesture.dy;
+        translateX.value = clamp(newX, edgePadding, width - size - edgePadding);
+        translateY.value = clamp(newY, edgePadding, height - size - edgePadding);
+      },
+      onPanResponderRelease: (_evt, gesture) => {
+        scale.value = withSpring(1, SPRING_SCALE_GRAB);
+        const distance = Math.sqrt(gesture.dx ** 2 + gesture.dy ** 2);
+        if (distance < 5 && !disabled) {
+          animateOut();
+        }
+      },
+    })
+  ).current;
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: translateX.value },
+      { translateY: translateY.value },
+      { scale: scale.value },
+      { rotate: `${rotation.value}deg` },
+    ],
+    opacity: opacity.value,
+  }));
+
+  const borderAnimatedStyle = useAnimatedStyle(() => {
+    const borderColor = interpolateColor(
+      borderPulse.value,
+      [0, 1],
+      isDanger
+        ? ['rgba(239,68,68,0.4)', 'rgba(239,68,68,1)']
+        : theme.scheme === 'dark'
+          ? ['rgba(255,255,255,0.2)', 'rgba(255,255,255,0.9)']
+          : ['rgba(55,0,179,0.2)', 'rgba(55,0,179,0.9)']
+    );
+    return {
+      borderWidth: isLoading ? 2 : 0,
+      borderColor,
+      borderRadius: size / 2,
+    };
+  });
+
+  return (
+    <Animated.View
+      {...panResponder.panHandlers}
+      testID={testID}
+      style={[styles.floatingButton, { width: size, height: size, borderRadius: size / 2 }, style, animatedStyle]}
+      accessibilityRole="button"
+      accessibilityLabel={ariaLabel}
+    >
+      <Animated.View style={[{ width: size, height: size, borderRadius: size / 2 }, borderAnimatedStyle]}>
+        <LiquidGlassView
+          style={[{ flex: 1, borderRadius: size / 2 }, !isLiquidGlassSupported && { backgroundColor: fallbackBgColor }]}
+          interactive
+          effect="clear"
+        >
+          <Pressable
+            onPress={() => {
+              if (!disabled) animateOut();
+            }}
+            style={styles.buttonInner}
+            android_ripple={{ color: 'rgba(255, 255, 255, 0.3)', borderless: true }}
+          >
+            {children ?? <View />}
+          </Pressable>
+        </LiquidGlassView>
+      </Animated.View>
+
+      {badgeCount > 0 && (
+        <View style={[styles.badge, { backgroundColor: theme.colors.danger }]}>
+          <Text style={[styles.badgeText, { color: theme.colors.onDanger }]}>
+            {badgeCount > 99 ? '99+' : badgeCount}
+          </Text>
+        </View>
+      )}
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  floatingButton: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  buttonInner: {
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 999,
+  },
+  badge: {
+    position: 'absolute',
+    top: -4,
+    right: -4,
+    minWidth: 20,
+    height: 20,
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 5,
+  },
+  badgeText: {
+    fontSize: 11,
+    fontWeight: '700',
+  },
+});
+
+

package/src/components/floating-draggable-button/constants.ts

@@ -0,0 +1,17 @@
+import type { FloatingButtonOffset } from './types';
+
+export const DEFAULT_SIZE = 48;
+export const DEFAULT_EDGE_PADDING = 10;
+
+export const DEFAULT_OFFSET: Required<FloatingButtonOffset> = {
+  left: 20,
+  bottom: 60,
+};
+
+export const ENTER_SCALE_FROM = 0.3;
+export const ENTER_ROTATION_FROM_DEG = -180;
+export const HIDDEN_OPACITY = 0.3;
+
+export const PULSE_DURATION_MS = 900;
+
+

package/src/components/floating-draggable-button/index.ts

@@ -0,0 +1,4 @@
+export { FloatingDraggableButton } from './FloatingDraggableButton';
+export type { FloatingDraggableButtonProps, FloatingButtonOffset } from './types';
+
+