@buoy-gg/shared-ui 7.0.40 → 7.0.42

package/lib/module/ui/components/DetailViewToggle.js

@@ -1,125 +1 @@
-"use strict";
-
-/**
- * DetailViewToggle — the row of view cards at the top of a detail screen
- * (ACTION · STATE · DIFF, CHANGE · STATE · DIFF, …).
- *
- * redux, zustand and jotai each shipped their own copy, differing only in
- * the view keys, labels and testID prefix. The cards, the accent chrome,
- * the disabled state (diff with nothing to compare) and the a11y contract
- * are all one component now; tools pass their `views`.
- */
-
-import React, { memo } from "react";
-import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { night } from "../night/nightTheme.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function DetailViewToggleImpl({
-  views,
-  activeView,
-  onViewChange,
-  disabledKeys,
-  testIDPrefix
-}) {
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.container,
-    children: views.map(view => {
-      const isActive = activeView === view.key;
-      const isDisabled = disabledKeys?.includes(view.key) ?? false;
-      const activeColor = view.activeColor ?? night.color.accent;
-      const IconComponent = view.icon;
-      return /*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: [styles.card, isActive && [styles.cardActive, {
-          borderColor: activeColor
-        }], isDisabled && styles.cardDisabled],
-        onPress: () => !isDisabled && onViewChange(view.key),
-        activeOpacity: isDisabled ? 1 : 0.8,
-        disabled: isDisabled,
-        testID: testIDPrefix ? `${testIDPrefix}-view-${view.key}` : undefined,
-        accessibilityRole: "button",
-        accessibilityLabel: view.label,
-        accessibilityState: {
-          selected: isActive,
-          disabled: isDisabled
-        },
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.cardContent,
-          children: [/*#__PURE__*/_jsx(IconComponent, {
-            size: 14,
-            color: isActive ? activeColor : isDisabled ? night.color.textTertiary : night.color.textSecondary
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.cardLabel, isActive && [styles.cardLabelActive, {
-              color: activeColor
-            }], isDisabled && styles.cardLabelDisabled],
-            children: view.label
-          })]
-        }), view.description ? /*#__PURE__*/_jsx(Text, {
-          style: [styles.cardDescription, isActive && styles.cardDescriptionActive, isDisabled && styles.cardDescriptionDisabled],
-          children: view.description
-        }) : null]
-      }, view.key);
-    })
-  });
-}
-export const DetailViewToggle = /*#__PURE__*/memo(DetailViewToggleImpl);
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    gap: 8,
-    padding: 14,
-    // Transparent so the night sheet's star field shows through.
-    backgroundColor: "transparent"
-  },
-  card: {
-    flex: 1,
-    backgroundColor: night.color.surface,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    padding: 10,
-    gap: 4
-  },
-  cardActive: {
-    borderWidth: 1.5,
-    backgroundColor: night.color.accentSoft,
-    shadowColor: night.color.accent,
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 8,
-    elevation: 3
-  },
-  cardDisabled: {
-    opacity: 0.5
-  },
-  cardContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  cardLabel: {
-    fontSize: 10,
-    fontWeight: "700",
-    letterSpacing: 0.5,
-    color: night.color.textSecondary
-  },
-  cardLabelActive: {
-    color: night.color.text
-  },
-  cardLabelDisabled: {
-    color: night.color.textTertiary
-  },
-  cardDescription: {
-    fontSize: 9,
-    color: night.color.textTertiary,
-    lineHeight: 12
-  },
-  cardDescriptionActive: {
-    color: night.color.textSecondary
-  },
-  cardDescriptionDisabled: {
-    color: night.color.textTertiary
-  }
-});
+"use strict";import C,{memo as D}from"react";import{StyleSheet as f,Text as d,TouchableOpacity as x,View as n}from"react-native";import{night as e}from"../night/nightTheme.js";import{jsx as a,jsxs as s}from"react/jsx-runtime";function u({views:b,activeView:p,onViewChange:y,disabledKeys:h,testIDPrefix:l}){return a(n,{style:r.container,children:b.map(o=>{const c=p===o.key;const t=h?.includes(o.key)??false;const i=o.activeColor??e.color.accent;const g=o.icon;return s(x,{style:[r.card,c&&[r.cardActive,{borderColor:i}],t&&r.cardDisabled],onPress:()=>!t&&y(o.key),activeOpacity:t?1:.8,disabled:t,testID:l?`${l}-view-${o.key}`:void 0,accessibilityRole:"button",accessibilityLabel:o.label,accessibilityState:{selected:c,disabled:t},children:[s(n,{style:r.cardContent,children:[a(g,{size:14,color:c?i:t?e.color.textTertiary:e.color.textSecondary}),a(d,{style:[r.cardLabel,c&&[r.cardLabelActive,{color:i}],t&&r.cardLabelDisabled],children:o.label})]}),o.description?a(d,{style:[r.cardDescription,c&&r.cardDescriptionActive,t&&r.cardDescriptionDisabled],children:o.description}):null]},o.key)})})}export const DetailViewToggle=D(u);const r=f.create({container:{flexDirection:"row",gap:8,padding:14,backgroundColor:"transparent"},card:{flex:1,backgroundColor:e.color.surface,borderRadius:12,borderWidth:1,borderColor:e.color.border,padding:10,gap:4},cardActive:{borderWidth:1.5,backgroundColor:e.color.accentSoft,shadowColor:e.color.accent,shadowOffset:{width:0,height:2},shadowOpacity:.1,shadowRadius:8,elevation:3},cardDisabled:{opacity:.5},cardContent:{flexDirection:"row",alignItems:"center",gap:6},cardLabel:{fontSize:10,fontWeight:"700",letterSpacing:.5,color:e.color.textSecondary},cardLabelActive:{color:e.color.text},cardLabelDisabled:{color:e.color.textTertiary},cardDescription:{fontSize:9,color:e.color.textTertiary,lineHeight:12},cardDescriptionActive:{color:e.color.textSecondary},cardDescriptionDisabled:{color:e.color.textTertiary}});

package/lib/module/ui/components/DevToolsCard.js

@@ -1,122 +1 @@
-"use strict";
-
-/**
- * DevToolsCard
- *
- * A unified container component for all DevTools list items.
- * Provides consistent sizing, spacing, and styling across all packages.
- *
- * Usage:
- * ```tsx
- * <DevToolsCard onPress={handlePress} isSelected={selected}>
- *   <YourCustomContent />
- * </DevToolsCard>
- * ```
- */
-
-import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { night } from "../night/nightTheme.js";
-
-/**
- * Standard card dimensions - adjust these to change all DevTools cards globally
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-export const DEVTOOLS_CARD_CONSTANTS = {
-  /** Horizontal padding inside the card */
-  padding: 12,
-  /** Horizontal margin between card and screen edge */
-  marginHorizontal: 12,
-  /** Vertical margin between cards */
-  marginVertical: 4,
-  /** Card corner radius */
-  borderRadius: 8,
-  /** Minimum height for touch accessibility (Apple HIG) */
-  minHeight: 44,
-  /** Border width */
-  borderWidth: 1
-};
-export function DevToolsCard({
-  children,
-  onPress,
-  onLongPress,
-  isSelected = false,
-  disabled = false,
-  activeOpacity = 0.8,
-  style,
-  contentStyle,
-  testID,
-  accessibilityLabel,
-  accessible
-}) {
-  const isInteractive = !!onPress || !!onLongPress;
-
-  // Non-interactive card (just a container)
-  if (!isInteractive) {
-    return /*#__PURE__*/_jsx(View, {
-      style: [styles.wrapper, style],
-      testID: testID,
-      accessible: accessible,
-      accessibilityLabel: accessibilityLabel,
-      children: /*#__PURE__*/_jsx(View, {
-        style: [styles.card, isSelected && styles.selectedCard, contentStyle],
-        children: children
-      })
-    });
-  }
-
-  // Interactive card
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.wrapper, style],
-    children: /*#__PURE__*/_jsx(TouchableOpacity, {
-      style: [styles.card, isSelected && styles.selectedCard, contentStyle],
-      onPress: onPress,
-      onLongPress: onLongPress,
-      activeOpacity: activeOpacity,
-      disabled: disabled,
-      testID: testID,
-      accessibilityLabel: accessibilityLabel,
-      children: children
-    })
-  });
-}
-
-/**
- * A bordered tile in a gutter. `CompactRow` is the other row primitive; keep the
- * two in step.
- */
-const styles = StyleSheet.create({
-  wrapper: {
-    marginHorizontal: DEVTOOLS_CARD_CONSTANTS.marginHorizontal,
-    marginVertical: DEVTOOLS_CARD_CONSTANTS.marginVertical
-  },
-  card: {
-    // Translucent night scrim — same luminance contract as the old
-    // buoyColors.cardScrim (backing stays readable under the brightest
-    // scenes), re-based on the night surface so the ToolBackground reads
-    // through every tool's card lists, not only around them.
-    backgroundColor: "rgba(12, 12, 12, 0.9)",
-    borderRadius: DEVTOOLS_CARD_CONSTANTS.borderRadius,
-    borderWidth: DEVTOOLS_CARD_CONSTANTS.borderWidth,
-    borderColor: night.color.border,
-    // The separator. On classic this just re-states the full outline; on chat
-    // it is the ONLY edge the row has.
-    borderBottomWidth: 1,
-    borderBottomColor: night.color.separator,
-    padding: DEVTOOLS_CARD_CONSTANTS.padding,
-    paddingHorizontal: DEVTOOLS_CARD_CONSTANTS.padding,
-    minHeight: DEVTOOLS_CARD_CONSTANTS.minHeight
-  },
-  selectedCard: {
-    // The night selection language: soft accent fill + accent border.
-    backgroundColor: night.color.accentSoft,
-    borderColor: night.color.accentBorderStrong,
-    shadowColor: night.color.accent,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 8,
-    elevation: 2
-  }
-});
+"use strict";import{View as a,TouchableOpacity as C,StyleSheet as u}from"react-native";import{night as o}from"../night/nightTheme.js";import{jsx as e}from"react/jsx-runtime";export const DEVTOOLS_CARD_CONSTANTS={padding:12,marginHorizontal:12,marginVertical:4,borderRadius:8,minHeight:44,borderWidth:1};export function DevToolsCard({children:t,onPress:i,onLongPress:d,isSelected:c=false,disabled:h=false,activeOpacity:p=.8,style:l,contentStyle:n,testID:s,accessibilityLabel:g,accessible:b}){const m=!!i||!!d;if(!m){return e(a,{style:[r.wrapper,l],testID:s,accessible:b,accessibilityLabel:g,children:e(a,{style:[r.card,c&&r.selectedCard,n],children:t})})}return e(a,{style:[r.wrapper,l],children:e(C,{style:[r.card,c&&r.selectedCard,n],onPress:i,onLongPress:d,activeOpacity:p,disabled:h,testID:s,accessibilityLabel:g,children:t})})}const r=u.create({wrapper:{marginHorizontal:DEVTOOLS_CARD_CONSTANTS.marginHorizontal,marginVertical:DEVTOOLS_CARD_CONSTANTS.marginVertical},card:{backgroundColor:"rgba(12, 12, 12, 0.9)",borderRadius:DEVTOOLS_CARD_CONSTANTS.borderRadius,borderWidth:DEVTOOLS_CARD_CONSTANTS.borderWidth,borderColor:o.color.border,borderBottomWidth:1,borderBottomColor:o.color.separator,padding:DEVTOOLS_CARD_CONSTANTS.padding,paddingHorizontal:DEVTOOLS_CARD_CONSTANTS.padding,minHeight:DEVTOOLS_CARD_CONSTANTS.minHeight},selectedCard:{backgroundColor:o.color.accentSoft,borderColor:o.color.accentBorderStrong,shadowColor:o.color.accent,shadowOffset:{width:0,height:0},shadowOpacity:.1,shadowRadius:8,elevation:2}});

package/lib/module/ui/components/DraggableHeader.js

@@ -1,211 +1 @@
-"use strict";
-
-import { useRef, useMemo, useEffect, memo } from "react";
-import { View, PanResponder, Dimensions } from "react-native";
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * DraggableHeader — the canonical floating-tools drag handle.
- *
- * Used by FloatingDevTools, JsModal's floating mode, and the perf-monitor
- * bubble. Tracks drag via relative `dx`/`dy` (so parent padding/margins
- * don't affect motion), discriminates tap-vs-drag by total distance, and
- * clamps the final position to the container bounds.
- *
- * IMPORTANT: the PanResponder is created exactly ONCE per mount. All
- * volatile props (callbacks, bounds, sizing) flow through `propsRef` so
- * a parent re-render mid-gesture does NOT re-create the responder. Re-
- * creating it during a drag detaches the active gesture and snaps the
- * element back — that bug burned us once already.
- */
-export const DraggableHeader = /*#__PURE__*/memo(function DraggableHeader({
-  children,
-  position,
-  onDragStart,
-  onDragEnd,
-  onTap,
-  onLongPress,
-  longPressDelay = 350,
-  containerBounds = Dimensions.get("window"),
-  elementSize = {
-    width: 100,
-    height: 50
-  },
-  minPosition = {
-    x: 0,
-    y: 0
-  },
-  style,
-  enabled = true,
-  claimOnMove = true,
-  onLayout,
-  hitSlop,
-  maxOverflowX = 0,
-  testID,
-  accessibilityLabel
-}) {
-  const isDraggingRef = useRef(false);
-  const dragDistanceRef = useRef(0);
-  const startPositionRef = useRef({
-    x: 0,
-    y: 0
-  });
-  const longPressTimerRef = useRef(null);
-  const longPressFiredRef = useRef(false);
-
-  // Clear any pending long-press timer if the component unmounts mid-press,
-  // so the timeout never fires after we're gone.
-  useEffect(() => {
-    return () => {
-      if (longPressTimerRef.current != null) {
-        clearTimeout(longPressTimerRef.current);
-        longPressTimerRef.current = null;
-      }
-    };
-  }, []);
-
-  // Latest props in a ref. Keeps the PanResponder closure stable across
-  // re-renders so an active drag never gets its handlers swapped.
-  const propsRef = useRef({
-    onDragStart,
-    onDragEnd,
-    onTap,
-    onLongPress,
-    longPressDelay,
-    containerBounds,
-    elementSize,
-    minPosition,
-    enabled,
-    claimOnMove,
-    maxOverflowX
-  });
-  propsRef.current = {
-    onDragStart,
-    onDragEnd,
-    onTap,
-    onLongPress,
-    longPressDelay,
-    containerBounds,
-    elementSize,
-    minPosition,
-    enabled,
-    claimOnMove,
-    maxOverflowX
-  };
-  const panResponder = useMemo(() => {
-    const cancelLongPress = () => {
-      if (longPressTimerRef.current != null) {
-        clearTimeout(longPressTimerRef.current);
-        longPressTimerRef.current = null;
-      }
-    };
-    return PanResponder.create({
-      onStartShouldSetPanResponder: () => propsRef.current.enabled,
-      onMoveShouldSetPanResponder: (_, g) => propsRef.current.enabled && propsRef.current.claimOnMove && (Math.abs(g.dx) > 1 || Math.abs(g.dy) > 1),
-      onPanResponderTerminationRequest: () => false,
-      onPanResponderGrant: () => {
-        isDraggingRef.current = false;
-        dragDistanceRef.current = 0;
-        longPressFiredRef.current = false;
-        // Read position synchronously so the first onPanResponderMove
-        // has the correct startPosition. stopAnimation's callback can
-        // be async on iOS and races the first move event.
-        const sx = position.x.__getValue();
-        const sy = position.y.__getValue();
-        startPositionRef.current = {
-          x: sx,
-          y: sy
-        };
-        const {
-          onLongPress: lp,
-          longPressDelay: lpDelay
-        } = propsRef.current;
-        if (lp) {
-          longPressTimerRef.current = setTimeout(() => {
-            longPressTimerRef.current = null;
-            if (!isDraggingRef.current && dragDistanceRef.current <= 5) {
-              longPressFiredRef.current = true;
-              lp();
-            }
-          }, lpDelay);
-        }
-      },
-      onPanResponderMove: (_evt, gestureState) => {
-        const totalDistance = Math.abs(gestureState.dx) + Math.abs(gestureState.dy);
-        dragDistanceRef.current = totalDistance;
-        if (totalDistance > 5 && !isDraggingRef.current) {
-          isDraggingRef.current = true;
-          cancelLongPress();
-          propsRef.current.onDragStart?.();
-        }
-        // Use dx/dy relative movement so parent transforms don't affect
-        // the drag.
-        const x = startPositionRef.current.x + gestureState.dx;
-        const y = startPositionRef.current.y + gestureState.dy;
-        position.setValue({
-          x,
-          y
-        });
-      },
-      onPanResponderRelease: () => {
-        cancelLongPress();
-        const longPressed = longPressFiredRef.current;
-        longPressFiredRef.current = false;
-        const wasTap = dragDistanceRef.current <= 5 && !isDraggingRef.current;
-        if (wasTap) {
-          if (!longPressed) propsRef.current.onTap?.();
-          isDraggingRef.current = false;
-          return;
-        }
-
-        // Read the final position synchronously and clamp.
-        const cx = position.x.__getValue();
-        const cy = position.y.__getValue();
-        const {
-          containerBounds: bounds,
-          elementSize: size,
-          minPosition: minPos,
-          maxOverflowX: maxOX,
-          onDragEnd: dragEnd
-        } = propsRef.current;
-        const maxX = bounds.width - size.width + maxOX;
-        const clampedX = Math.max(minPos.x, Math.min(cx, maxX));
-        const clampedY = Math.max(minPos.y, Math.min(cy, bounds.height - size.height));
-        position.setValue({
-          x: clampedX,
-          y: clampedY
-        });
-        dragEnd?.({
-          x: clampedX,
-          y: clampedY
-        });
-        isDraggingRef.current = false;
-      },
-      onPanResponderTerminate: () => {
-        cancelLongPress();
-        longPressFiredRef.current = false;
-        isDraggingRef.current = false;
-      }
-    });
-    // The responder is stable for the component's lifetime — props are
-    // read from a ref. Position is the only Animated.Value reference and
-    // is itself stable (created via useRef in the parent hook).
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [position]);
-  return /*#__PURE__*/_jsx(View, {
-    style: style,
-    onLayout: onLayout,
-    hitSlop: hitSlop,
-    testID: testID,
-    accessibilityLabel: accessibilityLabel,
-    accessibilityRole: onTap ? "button" : undefined,
-    accessibilityActions: onTap ? [{
-      name: "activate",
-      label: "Hide or show"
-    }] : undefined,
-    onAccessibilityAction: event => {
-      if (event.nativeEvent.actionName === "activate") propsRef.current.onTap?.();
-    },
-    ...panResponder.panHandlers,
-    children: children
-  });
-});
+"use strict";import{useRef as a,useMemo as G,useEffect as I,memo as N}from"react";import{View as O,PanResponder as Y,Dimensions as k}from"react-native";import{jsx as B}from"react/jsx-runtime";export const DraggableHeader=N(function C({children:H,position:c,onDragStart:x,onDragEnd:y,onTap:d,onLongPress:R,longPressDelay:g=350,containerBounds:p=k.get("window"),elementSize:b={width:100,height:50},minPosition:P={x:0,y:0},style:A,enabled:M=true,claimOnMove:_=true,onLayout:E,hitSlop:L,maxOverflowX:w=0,testID:S,accessibilityLabel:X}){const r=a(false);const f=a(0);const h=a({x:0,y:0});const t=a(null);const u=a(false);I(()=>{return()=>{if(t.current!=null){clearTimeout(t.current);t.current=null}}},[]);const n=a({onDragStart:x,onDragEnd:y,onTap:d,onLongPress:R,longPressDelay:g,containerBounds:p,elementSize:b,minPosition:P,enabled:M,claimOnMove:_,maxOverflowX:w});n.current={onDragStart:x,onDragEnd:y,onTap:d,onLongPress:R,longPressDelay:g,containerBounds:p,elementSize:b,minPosition:P,enabled:M,claimOnMove:_,maxOverflowX:w};const j=G(()=>{const o=()=>{if(t.current!=null){clearTimeout(t.current);t.current=null}};return Y.create({onStartShouldSetPanResponder:()=>n.current.enabled,onMoveShouldSetPanResponder:(l,e)=>n.current.enabled&&n.current.claimOnMove&&(Math.abs(e.dx)>1||Math.abs(e.dy)>1),onPanResponderTerminationRequest:()=>false,onPanResponderGrant:()=>{r.current=false;f.current=0;u.current=false;const l=c.x.__getValue();const e=c.y.__getValue();h.current={x:l,y:e};const{onLongPress:s,longPressDelay:i}=n.current;if(s){t.current=setTimeout(()=>{t.current=null;if(!r.current&&f.current<=5){u.current=true;s()}},i)}},onPanResponderMove:(l,e)=>{const s=Math.abs(e.dx)+Math.abs(e.dy);f.current=s;if(s>5&&!r.current){r.current=true;o();n.current.onDragStart?.()}const i=h.current.x+e.dx;const m=h.current.y+e.dy;c.setValue({x:i,y:m})},onPanResponderRelease:()=>{o();const l=u.current;u.current=false;const e=f.current<=5&&!r.current;if(e){if(!l)n.current.onTap?.();r.current=false;return}const s=c.x.__getValue();const i=c.y.__getValue();const{containerBounds:m,elementSize:D,minPosition:v,maxOverflowX:q,onDragEnd:z}=n.current;const F=m.width-D.width+q;const V=Math.max(v.x,Math.min(s,F));const T=Math.max(v.y,Math.min(i,m.height-D.height));c.setValue({x:V,y:T});z?.({x:V,y:T});r.current=false},onPanResponderTerminate:()=>{o();u.current=false;r.current=false}})},[c]);return B(O,{style:A,onLayout:E,hitSlop:L,testID:S,accessibilityLabel:X,accessibilityRole:d?"button":void 0,accessibilityActions:d?[{name:"activate",label:"Hide or show"}]:void 0,onAccessibilityAction:o=>{if(o.nativeEvent.actionName==="activate")n.current.onTap?.()},...j.panHandlers,children:H})});