@buoy-gg/shared-ui 7.0.41 → 7.0.42

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

@@ -1,383 +1 @@
-"use strict";
-
-import { useState, useRef, useCallback, useEffect } from "react";
-import { View, TouchableOpacity, StyleSheet, Animated, Platform } from "react-native";
-import { X, Minus, DockBottom, FloatWindow } from "../../icons/index.js";
-import { buoyColors } from "../gameUI/constants/gameUIColors.js";
-import { night } from "../night/nightTheme.js";
-
-// ============================================================================
-// Global expandable setting — controlled via setExpandableWindowControls()
-// ============================================================================
-
-// The expandable behavior is a touch affordance (big tap targets). On web a
-// mouse clicks the small dots directly, so it's always off there — the
-// setting only applies to native touch platforms.
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const EXPANDABLE_SUPPORTED = Platform.OS !== "web";
-let _expandableEnabled = true; // Default ON (native touch devices)
-
-/**
- * Set whether window controls use the expandable iPad-style behavior.
- * Called by the floating-tools settings system when the setting changes.
- */
-export function setExpandableWindowControls(enabled) {
-  _expandableEnabled = enabled;
-}
-
-// ============================================================================
-// Types
-// ============================================================================
-
-// ============================================================================
-// Constants - macOS Style Window Controls
-// ============================================================================
-
-// macOS window control colors (matching exact macOS appearance)
-const COLORS = {
-  close: "#FF5F57",
-  // Red - close button
-  minimize: "#FEBC2E",
-  // Yellow - minimize button
-  toggleMode: "#28C840" // Green - expand/fullscreen button
-};
-
-// Collapsed state (original small dots)
-const BUTTON_SIZE = 12;
-const BUTTON_SPACING = 8;
-const ICON_SIZE = 8;
-
-// Expanded state (large easy-to-tap buttons)
-const EXPANDED_BUTTON_SIZE = 36;
-const EXPANDED_BUTTON_SPACING = 12;
-const EXPANDED_ICON_SIZE = 16;
-const EXPANDED_PADDING = 8;
-
-// Auto-dismiss timeout
-const AUTO_DISMISS_MS = 3000;
-
-// ============================================================================
-// Component
-// ============================================================================
-
-/**
- * iPad-style expandable window controls.
- * Default: small macOS-style colored dots. On tap, expands to reveal
- * large, easy-to-press buttons. Auto-dismisses after timeout or tap outside.
- */
-export function WindowControls({
-  onClose,
-  onMinimize,
-  onToggleMode,
-  mode,
-  variant = "night",
-  defaultExpanded
-}) {
-  // Show action-based icon: what will happen when clicked
-  const ToggleModeIcon = mode === "floating" ? DockBottom : FloatWindow;
-  const toggleModeLabel = mode === "floating" ? "Dock to bottom sheet" : "Make floating window";
-
-  // When expandable is disabled (or unsupported on this platform), render
-  // original directly-tappable buttons
-  if (!_expandableEnabled || !EXPANDABLE_SUPPORTED) {
-    return /*#__PURE__*/_jsxs(View, {
-      style: styles.container,
-      children: [onMinimize && /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: onMinimize,
-        style: [styles.dot, styles.minimizeDot],
-        activeOpacity: 0.8,
-        accessibilityLabel: "Minimize modal",
-        accessibilityRole: "button",
-        children: /*#__PURE__*/_jsx(Minus, {
-          size: ICON_SIZE,
-          color: "#7A5A00",
-          strokeWidth: 1.5
-        })
-      }), onToggleMode && /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: onToggleMode,
-        style: [styles.dot, styles.expandDot],
-        activeOpacity: 0.8,
-        accessibilityLabel: toggleModeLabel,
-        accessibilityRole: "button",
-        children: /*#__PURE__*/_jsx(ToggleModeIcon, {
-          size: ICON_SIZE,
-          color: "#004A1A",
-          strokeWidth: 1.5
-        })
-      }), /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: onClose,
-        style: [styles.dot, styles.closeDot],
-        activeOpacity: 0.8,
-        accessibilityLabel: "Close modal",
-        testID: "tool-window-close",
-        accessibilityRole: "button",
-        children: /*#__PURE__*/_jsx(X, {
-          size: ICON_SIZE,
-          color: "#4A0000",
-          strokeWidth: 1.5
-        })
-      })]
-    });
-  }
-
-  // On real devices, use iPad-style expandable controls
-  return /*#__PURE__*/_jsx(ExpandableWindowControls, {
-    onClose: onClose,
-    onMinimize: onMinimize,
-    onToggleMode: onToggleMode,
-    mode: mode,
-    variant: variant,
-    defaultExpanded: defaultExpanded
-  });
-}
-function ExpandableWindowControls({
-  onClose,
-  onMinimize,
-  onToggleMode,
-  mode,
-  variant = "night",
-  defaultExpanded = false
-}) {
-  const isNight = variant === "night";
-  const [expanded, setExpanded] = useState(defaultExpanded);
-  const expandAnim = useRef(new Animated.Value(defaultExpanded ? 1 : 0)).current;
-  const dismissTimeout = useRef(null);
-  const ToggleModeIcon = mode === "floating" ? DockBottom : FloatWindow;
-  const toggleModeLabel = mode === "floating" ? "Dock to bottom sheet" : "Make floating window";
-  const clearDismissTimer = useCallback(() => {
-    if (dismissTimeout.current) {
-      clearTimeout(dismissTimeout.current);
-      dismissTimeout.current = null;
-    }
-  }, []);
-
-  // JS driver on purpose: native-driven animations on this node silently
-  // never run inside JsModal's subtree (the panel sat at opacity 0 forever,
-  // making the expanded controls unreachable). The popover is tiny and the
-  // animation is 150ms — the JS driver is fine.
-  const collapse = useCallback(() => {
-    clearDismissTimer();
-    Animated.spring(expandAnim, {
-      toValue: 0,
-      tension: 200,
-      friction: 20,
-      useNativeDriver: false
-    }).start(() => {
-      setExpanded(false);
-    });
-  }, [expandAnim, clearDismissTimer]);
-  const expand = useCallback(() => {
-    setExpanded(true);
-    Animated.spring(expandAnim, {
-      toValue: 1,
-      tension: 180,
-      friction: 18,
-      useNativeDriver: false
-    }).start();
-
-    // Auto-dismiss
-    clearDismissTimer();
-    dismissTimeout.current = setTimeout(collapse, AUTO_DISMISS_MS);
-  }, [expandAnim, collapse, clearDismissTimer]);
-  useEffect(() => {
-    return clearDismissTimer;
-  }, [clearDismissTimer]);
-  const handleAction = useCallback(action => {
-    collapse();
-    action();
-  }, [collapse]);
-
-  // Animation interpolations
-  const scale = expandAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0.3, 1]
-  });
-  const opacity = expandAnim.interpolate({
-    inputRange: [0, 0.5, 1],
-    outputRange: [0, 0.8, 1]
-  });
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-      onPress: expand,
-      activeOpacity: 0.7,
-      accessibilityLabel: "Open window controls",
-      testID: "tool-window-controls",
-      accessibilityRole: "button",
-      style: styles.trigger,
-      hitSlop: {
-        top: 8,
-        bottom: 8,
-        left: 8,
-        right: 8
-      },
-      children: /*#__PURE__*/_jsxs(View, {
-        style: styles.container,
-        children: [onMinimize && /*#__PURE__*/_jsx(View, {
-          style: [styles.dot, styles.minimizeDot],
-          children: /*#__PURE__*/_jsx(Minus, {
-            size: ICON_SIZE,
-            color: "#7A5A00",
-            strokeWidth: 1.5
-          })
-        }), onToggleMode && /*#__PURE__*/_jsx(View, {
-          style: [styles.dot, styles.expandDot],
-          children: /*#__PURE__*/_jsx(ToggleModeIcon, {
-            size: ICON_SIZE,
-            color: "#004A1A",
-            strokeWidth: 1.5
-          })
-        }), /*#__PURE__*/_jsx(View, {
-          style: [styles.dot, styles.closeDot],
-          children: /*#__PURE__*/_jsx(X, {
-            size: ICON_SIZE,
-            color: "#4A0000",
-            strokeWidth: 1.5
-          })
-        })]
-      })
-    }), expanded && /*#__PURE__*/_jsx(Animated.View, {
-      style: [styles.expandedPanelInline, {
-        transform: [{
-          scale
-        }],
-        opacity
-      }],
-      children: /*#__PURE__*/_jsxs(View, {
-        style: [styles.expandedContainer, isNight && styles.nightExpandedContainer],
-        children: [onMinimize && /*#__PURE__*/_jsx(TouchableOpacity, {
-          onPress: () => handleAction(onMinimize),
-          style: [styles.expandedButton, isNight ? styles.nightMinimizeButton : styles.minimizeButtonExpanded],
-          activeOpacity: 0.7,
-          accessibilityLabel: "Minimize modal",
-          testID: "tool-window-minimize",
-          accessibilityRole: "button",
-          children: /*#__PURE__*/_jsx(Minus, {
-            size: EXPANDED_ICON_SIZE,
-            color: isNight ? night.color.warning : "#7A5A00",
-            strokeWidth: 2
-          })
-        }), onToggleMode && /*#__PURE__*/_jsx(TouchableOpacity, {
-          onPress: () => handleAction(onToggleMode),
-          style: [styles.expandedButton, isNight ? styles.nightToggleButton : styles.expandButtonExpanded],
-          activeOpacity: 0.7,
-          accessibilityLabel: toggleModeLabel,
-          testID: "tool-window-mode",
-          accessibilityRole: "button",
-          children: /*#__PURE__*/_jsx(ToggleModeIcon, {
-            size: EXPANDED_ICON_SIZE,
-            color: isNight ? night.color.accent : "#004A1A",
-            strokeWidth: 2
-          })
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          onPress: () => handleAction(onClose),
-          style: [styles.expandedButton, isNight ? styles.nightCloseButton : styles.closeButtonExpanded],
-          activeOpacity: 0.7,
-          accessibilityLabel: "Close modal",
-          testID: "tool-window-close",
-          accessibilityRole: "button",
-          children: /*#__PURE__*/_jsx(X, {
-            size: EXPANDED_ICON_SIZE,
-            color: isNight ? night.color.danger : "#4A0000",
-            strokeWidth: 2
-          })
-        })]
-      })
-    })]
-  });
-}
-
-// ============================================================================
-// Styles
-// ============================================================================
-
-const styles = StyleSheet.create({
-  trigger: {
-    padding: 2
-  },
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: BUTTON_SPACING
-  },
-  dot: {
-    width: BUTTON_SIZE,
-    height: BUTTON_SIZE,
-    borderRadius: BUTTON_SIZE / 2,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  closeDot: {
-    backgroundColor: COLORS.close
-  },
-  minimizeDot: {
-    backgroundColor: COLORS.minimize
-  },
-  expandDot: {
-    backgroundColor: COLORS.toggleMode
-  },
-  // Anchored to the windowControlsContainer (absolute top-right of the
-  // modal chrome); grows leftward/downward over the header.
-  expandedPanelInline: {
-    position: "absolute",
-    top: -EXPANDED_PADDING,
-    right: -EXPANDED_PADDING,
-    zIndex: 9999
-  },
-  expandedContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: EXPANDED_BUTTON_SPACING,
-    backgroundColor: buoyColors.card,
-    borderRadius: (EXPANDED_BUTTON_SIZE + EXPANDED_PADDING * 2) / 2,
-    paddingHorizontal: EXPANDED_PADDING,
-    paddingVertical: EXPANDED_PADDING,
-    borderWidth: 1,
-    borderColor: buoyColors.border,
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 4
-    },
-    shadowOpacity: 0.4,
-    shadowRadius: 12,
-    elevation: 30
-  },
-  expandedButton: {
-    width: EXPANDED_BUTTON_SIZE,
-    height: EXPANDED_BUTTON_SIZE,
-    borderRadius: EXPANDED_BUTTON_SIZE / 2,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  closeButtonExpanded: {
-    backgroundColor: COLORS.close
-  },
-  minimizeButtonExpanded: {
-    backgroundColor: COLORS.minimize
-  },
-  expandButtonExpanded: {
-    backgroundColor: COLORS.toggleMode
-  },
-  // ── Night variant (Everlights language — see ui/night/nightTheme.ts):
-  // near-black plate, hairline border, soft-tinted circles with toned icons
-  // instead of the solid macOS traffic lights.
-  nightExpandedContainer: {
-    backgroundColor: night.color.surface,
-    borderColor: night.color.border
-  },
-  nightMinimizeButton: {
-    backgroundColor: night.color.warningSoft,
-    borderWidth: 1,
-    borderColor: night.color.warning + "59"
-  },
-  nightToggleButton: {
-    backgroundColor: night.color.accentSoft,
-    borderWidth: 1,
-    borderColor: night.color.accentBorderStrong
-  },
-  nightCloseButton: {
-    backgroundColor: night.color.dangerSoft,
-    borderWidth: 1,
-    borderColor: night.color.danger + "59"
-  }
-});
+"use strict";import{useState as j,useRef as P,useCallback as f,useEffect as U}from"react";import{View as u,TouchableOpacity as s,StyleSheet as V,Animated as C,Platform as X}from"react-native";import{X as k,Minus as I,DockBottom as R,FloatWindow as N}from"../../icons/index.js";import{buoyColors as W}from"../gameUI/constants/gameUIColors.js";import{night as e}from"../night/nightTheme.js";import{jsx as t,jsxs as x,Fragment as Z}from"react/jsx-runtime";const G=X.OS!=="web";let _=true;export function setExpandableWindowControls(l){_=l}const g={close:"#FF5F57",minimize:"#FEBC2E",toggleMode:"#28C840"};const B=12;const H=8;const b=8;const w=36;const q=12;const O=16;const p=8;const J=3e3;export function WindowControls({onClose:l,onMinimize:i,onToggleMode:r,mode:a,variant:D="night",defaultExpanded:h}){const n=a==="floating"?R:N;const E=a==="floating"?"Dock to bottom sheet":"Make floating window";if(!_||!G){return x(u,{style:o.container,children:[i&&t(s,{onPress:i,style:[o.dot,o.minimizeDot],activeOpacity:.8,accessibilityLabel:"Minimize modal",accessibilityRole:"button",children:t(I,{size:b,color:"#7A5A00",strokeWidth:1.5})}),r&&t(s,{onPress:r,style:[o.dot,o.expandDot],activeOpacity:.8,accessibilityLabel:E,accessibilityRole:"button",children:t(n,{size:b,color:"#004A1A",strokeWidth:1.5})}),t(s,{onPress:l,style:[o.dot,o.closeDot],activeOpacity:.8,accessibilityLabel:"Close modal",testID:"tool-window-close",accessibilityRole:"button",children:t(k,{size:b,color:"#4A0000",strokeWidth:1.5})})]})}return t(K,{onClose:l,onMinimize:i,onToggleMode:r,mode:a,variant:D,defaultExpanded:h})}function K({onClose:l,onMinimize:i,onToggleMode:r,mode:a,variant:D="night",defaultExpanded:h=false}){const n=D==="night";const[E,z]=j(h);const c=P(new C.Value(h?1:0)).current;const m=P(null);const S=a==="floating"?R:N;const T=a==="floating"?"Dock to bottom sheet":"Make floating window";const d=f(()=>{if(m.current){clearTimeout(m.current);m.current=null}},[]);const y=f(()=>{d();C.spring(c,{toValue:0,tension:200,friction:20,useNativeDriver:false}).start(()=>{z(false)})},[c,d]);const v=f(()=>{z(true);C.spring(c,{toValue:1,tension:180,friction:18,useNativeDriver:false}).start();d();m.current=setTimeout(y,J)},[c,y,d]);U(()=>{return d},[d]);const A=f(F=>{y();F()},[y]);const L=c.interpolate({inputRange:[0,1],outputRange:[.3,1]});const M=c.interpolate({inputRange:[0,.5,1],outputRange:[0,.8,1]});return x(Z,{children:[t(s,{onPress:v,activeOpacity:.7,accessibilityLabel:"Open window controls",testID:"tool-window-controls",accessibilityRole:"button",style:o.trigger,hitSlop:{top:8,bottom:8,left:8,right:8},children:x(u,{style:o.container,children:[i&&t(u,{style:[o.dot,o.minimizeDot],children:t(I,{size:b,color:"#7A5A00",strokeWidth:1.5})}),r&&t(u,{style:[o.dot,o.expandDot],children:t(S,{size:b,color:"#004A1A",strokeWidth:1.5})}),t(u,{style:[o.dot,o.closeDot],children:t(k,{size:b,color:"#4A0000",strokeWidth:1.5})})]})}),E&&t(C.View,{style:[o.expandedPanelInline,{transform:[{scale:L}],opacity:M}],children:x(u,{style:[o.expandedContainer,n&&o.nightExpandedContainer],children:[i&&t(s,{onPress:()=>A(i),style:[o.expandedButton,n?o.nightMinimizeButton:o.minimizeButtonExpanded],activeOpacity:.7,accessibilityLabel:"Minimize modal",testID:"tool-window-minimize",accessibilityRole:"button",children:t(I,{size:O,color:n?e.color.warning:"#7A5A00",strokeWidth:2})}),r&&t(s,{onPress:()=>A(r),style:[o.expandedButton,n?o.nightToggleButton:o.expandButtonExpanded],activeOpacity:.7,accessibilityLabel:T,testID:"tool-window-mode",accessibilityRole:"button",children:t(S,{size:O,color:n?e.color.accent:"#004A1A",strokeWidth:2})}),t(s,{onPress:()=>A(l),style:[o.expandedButton,n?o.nightCloseButton:o.closeButtonExpanded],activeOpacity:.7,accessibilityLabel:"Close modal",testID:"tool-window-close",accessibilityRole:"button",children:t(k,{size:O,color:n?e.color.danger:"#4A0000",strokeWidth:2})})]})})]})}const o=V.create({trigger:{padding:2},container:{flexDirection:"row",alignItems:"center",gap:H},dot:{width:B,height:B,borderRadius:B/2,alignItems:"center",justifyContent:"center"},closeDot:{backgroundColor:g.close},minimizeDot:{backgroundColor:g.minimize},expandDot:{backgroundColor:g.toggleMode},expandedPanelInline:{position:"absolute",top:-p,right:-p,zIndex:9999},expandedContainer:{flexDirection:"row",alignItems:"center",gap:q,backgroundColor:W.card,borderRadius:(w+p*2)/2,paddingHorizontal:p,paddingVertical:p,borderWidth:1,borderColor:W.border,shadowColor:"#000",shadowOffset:{width:0,height:4},shadowOpacity:.4,shadowRadius:12,elevation:30},expandedButton:{width:w,height:w,borderRadius:w/2,alignItems:"center",justifyContent:"center"},closeButtonExpanded:{backgroundColor:g.close},minimizeButtonExpanded:{backgroundColor:g.minimize},expandButtonExpanded:{backgroundColor:g.toggleMode},nightExpandedContainer:{backgroundColor:e.color.surface,borderColor:e.color.border},nightMinimizeButton:{backgroundColor:e.color.warningSoft,borderWidth:1,borderColor:e.color.warning+"59"},nightToggleButton:{backgroundColor:e.color.accentSoft,borderWidth:1,borderColor:e.color.accentBorderStrong},nightCloseButton:{backgroundColor:e.color.dangerSoft,borderWidth:1,borderColor:e.color.danger+"59"}});

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

@@ -1,52 +1 @@
-"use strict";
-
-export { BackButton } from "./BackButton.js";
-export { ValueTypeBadge } from "./ValueTypeBadge.js";
-export { StorageTypeBadge } from "./StorageTypeBadge.js";
-export { CopyButton, InlineCopyButton, ToolbarCopyButton, ActionCopyButton, ToolbarClearButton } from "./CopyButton.js";
-export { ModalHeader } from "./ModalHeader.js";
-export { windowDragProps, noWindowDragProps } from "./windowDrag.js";
-export { ModalHintBanner } from "./ModalHintBanner.js";
-export { ClipboardHintBanner } from "./ClipboardHintBanner.js";
-export { SectionHeader } from "./SectionHeader.js";
-export { ListItem } from "./ListItem.js";
-export { FilterSection, FilterBadge, AddFilterInput, AddFilterButton, FilterList } from "./FilterComponents.js";
-export { CompactFilterChips } from "./CompactFilterChips.js";
-export { Badge, StatusBadge, CountBadge, TypeBadge, MethodBadge } from "./Badge.js";
-export { TabSelector } from "./TabSelector.js";
-export { ToolButton } from "./ToolButton.js";
-export { EventListItem } from "./EventListItem.js";
-export { StatsCard } from "./StatsCard.js";
-export { CompactRow } from "./CompactRow.js";
-export { DevToolsCard, DEVTOOLS_CARD_CONSTANTS } from "./DevToolsCard.js";
-export { HeaderSearchButton } from "./HeaderSearchButton.js";
-export { EmptyState, NoDataEmptyState, NoResultsEmptyState, NoSearchResultsEmptyState } from "./EmptyState.js";
-// The shared "nothing here" panel + the precedence between its causes. Every
-// capture tool's list empty goes through this — see the file header.
-export { ToolEmptyState, resolveListEmptyState } from "./ToolEmptyState.js";
-export { StatusIndicator } from "./StatusIndicator.js";
-export { TimeDisplay } from "./TimeDisplay.js";
-export { DetailView } from "./DetailView.js";
-export { DraggableHeader } from "./DraggableHeader.js";
-export { GripVerticalIcon } from "./GripVerticalIcon.js";
-export { CollapsibleSection } from "./CollapsibleSection.js";
-export { DataInspector } from "./DataInspector.js";
-export { SearchBar } from "./SearchBar.js";
-export { DynamicFilterView } from "./DynamicFilterView.js";
-export { WindowControls, setExpandableWindowControls } from "./WindowControls.js";
-export { EventStepperFooter } from "./EventStepperFooter.js";
-export { ExpandablePopover } from "./ExpandablePopover.js";
-export { PowerToggleButton } from "./PowerToggleButton.js";
-export { ExpandedInfoRow, PillBadge } from "./ExpandedInfoRow.js";
-
-// EventHistoryViewer components
-export { EventHistoryViewer, ViewToggleCards, DiffModeTabs, CompareBar, EventPickerModal } from "./EventHistoryViewer/index.js";
-export { InfoRow } from "./InfoRow.js";
-export { DetailViewToggle } from "./DetailViewToggle.js";
-export { ChangeRow } from "./ChangeRow.js";
-export { Pill } from "./Pill.js";
-export { ToolFooter, FooterRow, FooterCaption, FooterMessage, FooterButton } from "./ToolFooter.js";
-export { EntityFilterView } from "./EntityFilterView.js";
-export { ToggleRow } from "./ToggleRow.js";
-export { ChipStrip, useChipTap } from "./ChipStrip.js";
-export { ExportPreview, sizeWarningLevel } from "./ExportPreview.js";
+"use strict";export{BackButton}from"./BackButton.js";export{ValueTypeBadge}from"./ValueTypeBadge.js";export{StorageTypeBadge}from"./StorageTypeBadge.js";export{CopyButton,InlineCopyButton,ToolbarCopyButton,ActionCopyButton,ToolbarClearButton}from"./CopyButton.js";export{ModalHeader}from"./ModalHeader.js";export{windowDragProps,noWindowDragProps}from"./windowDrag.js";export{ModalHintBanner}from"./ModalHintBanner.js";export{ClipboardHintBanner}from"./ClipboardHintBanner.js";export{SectionHeader}from"./SectionHeader.js";export{ListItem}from"./ListItem.js";export{FilterSection,FilterBadge,AddFilterInput,AddFilterButton,FilterList}from"./FilterComponents.js";export{CompactFilterChips}from"./CompactFilterChips.js";export{Badge,StatusBadge,CountBadge,TypeBadge,MethodBadge}from"./Badge.js";export{TabSelector}from"./TabSelector.js";export{ToolButton}from"./ToolButton.js";export{EventListItem}from"./EventListItem.js";export{StatsCard}from"./StatsCard.js";export{CompactRow}from"./CompactRow.js";export{DevToolsCard,DEVTOOLS_CARD_CONSTANTS}from"./DevToolsCard.js";export{HeaderSearchButton}from"./HeaderSearchButton.js";export{EmptyState,NoDataEmptyState,NoResultsEmptyState,NoSearchResultsEmptyState}from"./EmptyState.js";export{ToolEmptyState,resolveListEmptyState}from"./ToolEmptyState.js";export{StatusIndicator}from"./StatusIndicator.js";export{TimeDisplay}from"./TimeDisplay.js";export{DetailView}from"./DetailView.js";export{DraggableHeader}from"./DraggableHeader.js";export{GripVerticalIcon}from"./GripVerticalIcon.js";export{CollapsibleSection}from"./CollapsibleSection.js";export{DataInspector}from"./DataInspector.js";export{SearchBar}from"./SearchBar.js";export{DynamicFilterView}from"./DynamicFilterView.js";export{WindowControls,setExpandableWindowControls}from"./WindowControls.js";export{EventStepperFooter}from"./EventStepperFooter.js";export{ExpandablePopover}from"./ExpandablePopover.js";export{PowerToggleButton}from"./PowerToggleButton.js";export{ExpandedInfoRow,PillBadge}from"./ExpandedInfoRow.js";export{EventHistoryViewer,ViewToggleCards,DiffModeTabs,CompareBar,EventPickerModal}from"./EventHistoryViewer/index.js";export{InfoRow}from"./InfoRow.js";export{DetailViewToggle}from"./DetailViewToggle.js";export{ChangeRow}from"./ChangeRow.js";export{Pill}from"./Pill.js";export{ToolFooter,FooterRow,FooterCaption,FooterMessage,FooterButton}from"./ToolFooter.js";export{EntityFilterView}from"./EntityFilterView.js";export{ToggleRow}from"./ToggleRow.js";export{ChipStrip,useChipTap}from"./ChipStrip.js";export{ExportPreview,sizeWarningLevel}from"./ExportPreview.js";

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

@@ -1,41 +1 @@
-"use strict";
-
-/**
- * Desktop window-drag tagging for tool headers.
- *
- * Buoy Desktop runs a FRAMELESS Electron window: nothing but a
- * `-webkit-app-region: drag` region moves it. The sidebar's own header carries
- * that duty, but with the sidebar open the content column has no strip of its
- * own — the TOOL's header is the top edge of the window there, so grabbing it
- * looked like it should move the app and didn't.
- *
- * These spread onto a `View` and mark the region for the desktop stylesheet
- * (`apps/desktop/src/index.css`, `[data-buoy-window-drag]`). react-native-web
- * turns `dataSet` into `data-*` attributes; React Native drops the prop on
- * device, so this is INERT on mobile — the styling that gives it meaning only
- * exists in the desktop app.
- *
- * `dataSet` is a react-native-web extension that RN's own prop types don't
- * declare; spreading it (rather than passing it inline) is what keeps
- * TypeScript quiet, and puts the explanation here once instead of a
- * `@ts-ignore` at every header.
- *
- * A drag region SWALLOWS mouse events, so every control inside one has to opt
- * back out or it stops being clickable. The desktop app does that for itself:
- * react-native-web renders touchables as featureless `<div>`s, so it finds
- * them at runtime by their `cursor: pointer` rather than by any selector —
- * see apps/desktop/src/windowDragRegions.ts. `noWindowDragProps` is here for
- * a region that must opt out regardless of how it looks.
- */
-export const windowDragProps = {
-  dataSet: {
-    buoyWindowDrag: "1"
-  }
-};
-
-/** Opt a subtree back out of an enclosing {@link windowDragProps} region. */
-export const noWindowDragProps = {
-  dataSet: {
-    buoyNoDrag: "1"
-  }
-};
+"use strict";export const windowDragProps={dataSet:{buoyWindowDrag:"1"}};export const noWindowDragProps={dataSet:{buoyNoDrag:"1"}};