@buoy-gg/shared-ui 7.0.41 → 7.0.43

package/lib/module/dataViewer/DataViewer.js

@@ -1,153 +1 @@
-"use strict";
-
-import { useState, useMemo } from "react";
-import { View, StyleSheet } from "react-native";
-import { VirtualizedDataExplorer } from "./VirtualizedDataExplorer.js";
-import { isPlainObject } from "../types/types.js";
-import { TypeLegend } from "./TypeLegend.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * DataViewer component that combines VirtualizedDataExplorer with TypeLegend
- * Provides type filtering functionality like in Sentry event details
- *
- * Applied principles [[rule3]]:
- * - Decompose by Responsibility: Combines data viewing with type filtering
- * - Prefer Composition over Configuration: Uses existing components
- * - Extract Reusable Logic: Shared between storage and Sentry views
- */
-export const DataViewer = ({
-  title,
-  data,
-  maxDepth = 10,
-  rawMode = true,
-  showTypeFilter = true,
-  initialExpanded = false,
-  disableCopy = false,
-  onSelectionChange,
-  onRequestInlineEdit,
-  inlineEditPath,
-  renderInlineEditor,
-  selectPath,
-  testIDPrefix
-}) => {
-  const [activeFilter, setActiveFilter] = useState(null);
-
-  // Calculate visible types in the data
-  const visibleTypes = useMemo(() => {
-    if (!data || !showTypeFilter) return [];
-    const types = [];
-    const processValue = (value, depth = 0) => {
-      if (depth > 3) return; // Limit depth for performance
-
-      const type = Array.isArray(value) ? "array" : value === null ? "null" : typeof value;
-      types.push(type);
-      if (type === "object" && isPlainObject(value)) {
-        Object.values(value).forEach(v => processValue(v, depth + 1));
-      } else if (Array.isArray(value)) {
-        value.forEach(v => processValue(v, depth + 1));
-      }
-    };
-    processValue(data);
-    return Array.from(new Set(types)).slice(0, 8); // Unique types, limit to 8
-  }, [data, showTypeFilter]);
-
-  // Get filtered data based on active filter
-  const getFilteredData = useMemo(() => {
-    if (!activeFilter || !data) return null;
-    const filteredObject = {};
-    let itemCount = 0;
-    const flattenByType = (obj, targetType, path = "", depth = 0) => {
-      if (depth > 10 || itemCount > 100) return;
-      if (Array.isArray(obj)) {
-        obj.forEach((item, index) => {
-          const currentPath = path ? `${path}[${index}]` : `[${index}]`;
-          const itemType = item === null ? "null" : typeof item;
-          if (itemType === targetType) {
-            filteredObject[currentPath] = item;
-            itemCount++;
-          }
-
-          // Recurse into nested structures
-          if (itemType === "object" && item !== null || Array.isArray(item)) {
-            flattenByType(item, targetType, currentPath, depth + 1);
-          }
-        });
-      } else if (obj && typeof obj === "object") {
-        Object.entries(obj).forEach(([key, value]) => {
-          const currentPath = path ? `${path}.${key}` : key;
-          const valueType = Array.isArray(value) ? "array" : value === null ? "null" : typeof value;
-          if (valueType === targetType) {
-            filteredObject[currentPath] = value;
-            itemCount++;
-          }
-
-          // Recurse into nested structures
-          if (valueType === "object" && value !== null || valueType === "array") {
-            flattenByType(value, targetType, currentPath, depth + 1);
-          }
-        });
-      }
-    };
-    flattenByType(data, activeFilter);
-    return {
-      filteredObject,
-      itemCount
-    };
-  }, [activeFilter, data]);
-
-  // Render content based on filter state
-  const renderContent = () => {
-    // Show filtered results if filter is active.
-    //
-    // Selection is deliberately NOT forwarded here: the filtered view is a
-    // DERIVED object, so its row paths address that projection rather than the
-    // real document. An op built from one would edit an unrelated node —
-    // silently, and with a plausible-looking result.
-    if (activeFilter && getFilteredData) {
-      return /*#__PURE__*/_jsx(VirtualizedDataExplorer, {
-        title: `${activeFilter} values`,
-        data: getFilteredData.filteredObject,
-        maxDepth: maxDepth,
-        rawMode: rawMode,
-        initialExpanded: initialExpanded,
-        disableCopy: disableCopy,
-        testIDPrefix: testIDPrefix
-      });
-    }
-
-    // Default: show all data
-    return /*#__PURE__*/_jsx(VirtualizedDataExplorer, {
-      title: title,
-      data: data,
-      maxDepth: maxDepth,
-      rawMode: rawMode,
-      initialExpanded: initialExpanded,
-      disableCopy: disableCopy,
-      onSelectionChange: onSelectionChange,
-      onRequestInlineEdit: onRequestInlineEdit,
-      inlineEditPath: inlineEditPath,
-      renderInlineEditor: renderInlineEditor,
-      selectPath: selectPath,
-      testIDPrefix: testIDPrefix
-    });
-  };
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.container,
-    children: [showTypeFilter && /*#__PURE__*/_jsx(View, {
-      style: styles.header,
-      children: /*#__PURE__*/_jsx(TypeLegend, {
-        types: visibleTypes,
-        activeFilter: activeFilter,
-        onFilterChange: setActiveFilter
-      })
-    }), renderContent()]
-  });
-};
-const styles = StyleSheet.create({
-  container: {},
-  header: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center"
-  }
-});
+"use strict";import{useState as _,useMemo as h}from"react";import{View as C,StyleSheet as q}from"react-native";import{VirtualizedDataExplorer as D}from"./VirtualizedDataExplorer.js";import{isPlainObject as z}from"../types/types.js";import{TypeLegend as B}from"./TypeLegend.js";import{jsx as u,jsxs as L}from"react/jsx-runtime";export const DataViewer=({title:$,data:o,maxDepth:A=10,rawMode:j=true,showTypeFilter:p=true,initialExpanded:d=false,disableCopy:x=false,onSelectionChange:O,onRequestInlineEdit:S,inlineEditPath:w,renderInlineEditor:I,selectPath:V,testIDPrefix:E})=>{const[l,F]=_(null);const g=h(()=>{if(!o||!p)return[];const f=[];const i=(e,r=0)=>{if(r>3)return;const c=Array.isArray(e)?"array":e===null?"null":typeof e;f.push(c);if(c==="object"&&z(e)){Object.values(e).forEach(s=>i(s,r+1))}else if(Array.isArray(e)){e.forEach(s=>i(s,r+1))}};i(o);return Array.from(new Set(f)).slice(0,8)},[o,p]);const b=h(()=>{if(!l||!o)return null;const f={};let i=0;const e=(r,c,s="",m=0)=>{if(m>10||i>100)return;if(Array.isArray(r)){r.forEach((t,n)=>{const y=s?`${s}[${n}]`:`[${n}]`;const a=t===null?"null":typeof t;if(a===c){f[y]=t;i++}if(a==="object"&&t!==null||Array.isArray(t)){e(t,c,y,m+1)}})}else if(r&&typeof r==="object"){Object.entries(r).forEach(([t,n])=>{const y=s?`${s}.${t}`:t;const a=Array.isArray(n)?"array":n===null?"null":typeof n;if(a===c){f[y]=n;i++}if(a==="object"&&n!==null||a==="array"){e(n,c,y,m+1)}})}};e(o,l);return{filteredObject:f,itemCount:i}},[l,o]);const M=()=>{if(l&&b){return u(D,{title:`${l} values`,data:b.filteredObject,maxDepth:A,rawMode:j,initialExpanded:d,disableCopy:x,testIDPrefix:E})}return u(D,{title:$,data:o,maxDepth:A,rawMode:j,initialExpanded:d,disableCopy:x,onSelectionChange:O,onRequestInlineEdit:S,inlineEditPath:w,renderInlineEditor:I,selectPath:V,testIDPrefix:E})};return L(C,{style:P.container,children:[p&&u(C,{style:P.header,children:u(B,{types:g,activeFilter:l,onFilterChange:F})}),M()]})};const P=q.create({container:{},header:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"}});

package/lib/module/dataViewer/DiffSummary.js

@@ -1,129 +1 @@
-"use strict";
-
-/**
- * DiffSummary
- *
- * Displays a summary bar showing counts of added, removed, and modified lines.
- * Used by SplitDiffViewer to show diff statistics.
- */
-
-import React, { memo } from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { monoFont } from "../ui/fonts.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * DiffSummary displays a summary bar showing diff statistics.
- */
-export const DiffSummary = /*#__PURE__*/memo(function DiffSummary({
-  added,
-  removed,
-  modified,
-  theme,
-  style
-}) {
-  const hasChanges = added > 0 || removed > 0 || modified > 0;
-  if (!hasChanges) {
-    return null;
-  }
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.container, {
-      backgroundColor: theme.summaryBackground,
-      borderTopColor: theme.borderColor
-    }, style],
-    children: [added > 0 && /*#__PURE__*/_jsxs(View, {
-      style: [styles.badge, {
-        backgroundColor: theme.addedBackground
-      }],
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.icon, {
-          color: theme.summaryAddedText
-        }],
-        children: "+"
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.count, {
-          color: theme.summaryAddedText
-        }],
-        children: added
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.label, {
-          color: theme.summaryAddedText
-        }],
-        children: "new"
-      })]
-    }), removed > 0 && /*#__PURE__*/_jsxs(View, {
-      style: [styles.badge, {
-        backgroundColor: theme.removedBackground
-      }],
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.icon, {
-          color: theme.summaryRemovedText
-        }],
-        children: "\u2212"
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.count, {
-          color: theme.summaryRemovedText
-        }],
-        children: removed
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.label, {
-          color: theme.summaryRemovedText
-        }],
-        children: "gone"
-      })]
-    }), modified > 0 && /*#__PURE__*/_jsxs(View, {
-      style: [styles.badge, {
-        backgroundColor: theme.modifiedBackground
-      }],
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.icon, {
-          color: theme.summaryModifiedText
-        }],
-        children: "\u2248"
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.count, {
-          color: theme.summaryModifiedText
-        }],
-        children: modified
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.label, {
-          color: theme.summaryModifiedText
-        }],
-        children: "modified"
-      })]
-    })]
-  });
-});
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 12,
-    paddingVertical: 6,
-    paddingHorizontal: 12,
-    borderTopWidth: 1
-  },
-  badge: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 3,
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-    borderRadius: 10
-  },
-  icon: {
-    fontSize: 11,
-    fontFamily: monoFont,
-    fontWeight: "700"
-  },
-  count: {
-    fontSize: 10,
-    fontFamily: monoFont,
-    fontWeight: "600"
-  },
-  label: {
-    fontSize: 9,
-    fontFamily: monoFont,
-    opacity: 0.9
-  }
-});
+"use strict";import x,{memo as y}from"react";import{View as l,Text as e,StyleSheet as m}from"react-native";import{monoFont as a}from"../ui/fonts.js";import{jsx as n,jsxs as i}from"react/jsx-runtime";export const DiffSummary=y(function f({added:t,removed:c,modified:d,theme:o,style:s}){const u=t>0||c>0||d>0;if(!u){return null}return i(l,{style:[r.container,{backgroundColor:o.summaryBackground,borderTopColor:o.borderColor},s],children:[t>0&&i(l,{style:[r.badge,{backgroundColor:o.addedBackground}],children:[n(e,{style:[r.icon,{color:o.summaryAddedText}],children:"+"}),n(e,{style:[r.count,{color:o.summaryAddedText}],children:t}),n(e,{style:[r.label,{color:o.summaryAddedText}],children:"new"})]}),c>0&&i(l,{style:[r.badge,{backgroundColor:o.removedBackground}],children:[n(e,{style:[r.icon,{color:o.summaryRemovedText}],children:"\u2212"}),n(e,{style:[r.count,{color:o.summaryRemovedText}],children:c}),n(e,{style:[r.label,{color:o.summaryRemovedText}],children:"gone"})]}),d>0&&i(l,{style:[r.badge,{backgroundColor:o.modifiedBackground}],children:[n(e,{style:[r.icon,{color:o.summaryModifiedText}],children:"\u2248"}),n(e,{style:[r.count,{color:o.summaryModifiedText}],children:d}),n(e,{style:[r.label,{color:o.summaryModifiedText}],children:"modified"})]})]})});const r=m.create({container:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:12,paddingVertical:6,paddingHorizontal:12,borderTopWidth:1},badge:{flexDirection:"row",alignItems:"center",gap:3,paddingHorizontal:6,paddingVertical:2,borderRadius:10},icon:{fontSize:11,fontFamily:a,fontWeight:"700"},count:{fontSize:10,fontFamily:a,fontWeight:"600"},label:{fontSize:9,fontFamily:a,opacity:.9}});

package/lib/module/dataViewer/IndentGuides.js

@@ -1,124 +1 @@
-"use strict";
-
-import { memo, useMemo } from "react";
-import { View, StyleSheet } from "react-native";
-import { gameUIColors } from "../ui/gameUI/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const INDENT_WIDTH = 10; // Width per indent level
-const LINE_COLOR = gameUIColors.primary + "40"; // More visible line color (25% opacity)
-const ACTIVE_LINE_COLOR = gameUIColors.primary + "66"; // Highlighted line color (40% opacity)
-
-/**
- * IndentGuides component that renders VS Code-style indent guide lines
- * Shows vertical lines for each indent level and horizontal connectors
- */
-export const IndentGuides = /*#__PURE__*/memo(({
-  depth,
-  isLastChild,
-  isExpanded,
-  hasChildren,
-  parentHasMoreSiblings = [],
-  activeDepth = -1,
-  itemHeight
-}) => {
-  const guides = useMemo(() => {
-    const elements = [];
-
-    // Render vertical guides for parent levels that continue through this item
-    for (let level = 1; level < depth; level++) {
-      const isActive = level === activeDepth;
-      // Show line if parent at this level has more siblings
-      const shouldShowLine = parentHasMoreSiblings[level - 1];
-      if (shouldShowLine) {
-        // Vertical line that passes through this item from parent levels
-        elements.push(/*#__PURE__*/_jsx(View, {
-          style: [styles.verticalLine, {
-            left: (level - 1) * INDENT_WIDTH - 0.5,
-            backgroundColor: isActive ? ACTIVE_LINE_COLOR : LINE_COLOR,
-            height: itemHeight
-          }]
-        }, `v-${level}`));
-      }
-    }
-
-    // Vertical line for the current item's level
-    if (depth > 0) {
-      // For last child without expansion, line goes to the middle
-      // For expanded items or items with siblings below, line goes through entire height
-      const lineHeight = isLastChild && !isExpanded ? itemHeight / 2 - 1 : itemHeight;
-      elements.push(/*#__PURE__*/_jsx(View, {
-        style: [styles.verticalLine, {
-          left: (depth - 1) * INDENT_WIDTH - 0.5,
-          backgroundColor: activeDepth === depth - 1 ? ACTIVE_LINE_COLOR : LINE_COLOR,
-          height: lineHeight
-        }]
-      }, `v-current`));
-
-      // Add a subtle L-shaped corner for last children that aren't expanded
-      if (isLastChild && !isExpanded) {
-        elements.push(/*#__PURE__*/_jsx(View, {
-          style: [styles.horizontalLine, {
-            left: (depth - 1) * INDENT_WIDTH,
-            top: itemHeight / 2 - 1,
-            width: INDENT_WIDTH / 2,
-            backgroundColor: activeDepth === depth - 1 ? ACTIVE_LINE_COLOR : LINE_COLOR
-          }]
-        }, "h-corner"));
-      }
-
-      // For expanded items, add a small horizontal connector
-      if (isExpanded && hasChildren) {
-        elements.push(/*#__PURE__*/_jsx(View, {
-          style: [styles.horizontalLine, {
-            left: (depth - 1) * INDENT_WIDTH,
-            top: itemHeight / 2 - 1,
-            width: INDENT_WIDTH / 2,
-            backgroundColor: activeDepth === depth - 1 ? ACTIVE_LINE_COLOR : LINE_COLOR
-          }]
-        }, "h-expand-connector"));
-      }
-    }
-
-    // Vertical line extending down for expanded items with children
-    if (hasChildren && isExpanded) {
-      elements.push(/*#__PURE__*/_jsx(View, {
-        style: [styles.verticalLine, {
-          left: depth * INDENT_WIDTH - 0.5,
-          top: itemHeight / 2,
-          height: itemHeight / 2 + 1,
-          // Extend slightly to connect better
-          backgroundColor: activeDepth === depth ? ACTIVE_LINE_COLOR : LINE_COLOR
-        }]
-      }, "v-children"));
-    }
-    return elements;
-  }, [depth, isLastChild, isExpanded, hasChildren, parentHasMoreSiblings, activeDepth, itemHeight]);
-  if (depth === 0) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.container,
-    pointerEvents: "none",
-    children: guides
-  });
-});
-IndentGuides.displayName = "IndentGuides";
-const styles = StyleSheet.create({
-  container: {
-    position: "absolute",
-    left: 0,
-    top: 0,
-    bottom: 0,
-    right: 0
-  },
-  verticalLine: {
-    position: "absolute",
-    width: 1.5,
-    // Slightly thicker for better visibility
-    top: 0
-  },
-  horizontalLine: {
-    position: "absolute",
-    height: 1.5 // Slightly thicker for better visibility
-  }
-});
+"use strict";import{memo as v,useMemo as w}from"react";import{View as e,StyleSheet as C}from"react-native";import{gameUIColors as b}from"../ui/gameUI/index.js";import{jsx as c}from"react/jsx-runtime";const t=10;const f=b.primary+"40";const y=b.primary+"66";export const IndentGuides=v(({depth:o,isLastChild:a,isExpanded:u,hasChildren:m,parentHasMoreSiblings:L=[],activeDepth:l=-1,itemHeight:r})=>{const I=w(()=>{const s=[];for(let n=1;n<o;n++){const g=n===l;const k=L[n-1];if(k){s.push(c(e,{style:[i.verticalLine,{left:(n-1)*t-.5,backgroundColor:g?y:f,height:r}]},`v-${n}`))}}if(o>0){const n=a&&!u?r/2-1:r;s.push(c(e,{style:[i.verticalLine,{left:(o-1)*t-.5,backgroundColor:l===o-1?y:f,height:n}]},`v-current`));if(a&&!u){s.push(c(e,{style:[i.horizontalLine,{left:(o-1)*t,top:r/2-1,width:t/2,backgroundColor:l===o-1?y:f}]},"h-corner"))}if(u&&m){s.push(c(e,{style:[i.horizontalLine,{left:(o-1)*t,top:r/2-1,width:t/2,backgroundColor:l===o-1?y:f}]},"h-expand-connector"))}}if(m&&u){s.push(c(e,{style:[i.verticalLine,{left:o*t-.5,top:r/2,height:r/2+1,backgroundColor:l===o?y:f}]},"v-children"))}return s},[o,a,u,m,L,l,r]);if(o===0){return null}return c(e,{style:i.container,pointerEvents:"none",children:I})});IndentGuides.displayName="IndentGuides";const i=C.create({container:{position:"absolute",left:0,top:0,bottom:0,right:0},verticalLine:{position:"absolute",width:1.5,top:0},horizontalLine:{position:"absolute",height:1.5}});

package/lib/module/dataViewer/IndentGuidesOverlay.js

@@ -1,99 +1 @@
-"use strict";
-
-import React, { memo, useMemo } from "react";
-import { StyleSheet, View } from "react-native";
-import { gameUIColors } from "../ui/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const NORMAL_ALPHA = "4D"; // ~30%
-const ACTIVE_ALPHA = "80"; // ~50%
-export const IndentGuidesOverlay = /*#__PURE__*/memo(({
-  items,
-  visibleRange,
-  itemHeight,
-  indentWidth,
-  activeDepth = -1
-}) => {
-  const columns = useMemo(() => {
-    const start = Math.max(0, visibleRange.start);
-    const end = Math.min(items.length - 1, visibleRange.end);
-    if (start > end || items.length === 0) return [];
-
-    // Find max depth in visible range
-    let maxDepth = 0;
-    for (let i = start; i <= end; i++) {
-      const d = items[i]?.depth ?? 0;
-      if (d > maxDepth) maxDepth = d;
-    }
-    const results = [];
-    for (let depth = 1; depth <= maxDepth; depth++) {
-      const leftTarget = (depth - 0.5) * indentWidth; // center of indent column
-      const left = Math.round(leftTarget) + 0.5; // snap for crisp 1px
-      const segments = [];
-      let segStart = -1;
-      let segEnd = -1;
-      for (let i = start; i <= end; i++) {
-        const item = items[i];
-        // Draw a column for any row that reaches this depth
-        // i.e. all rows with depth >= current column depth
-        const showAtThisDepth = (item?.depth ?? 0) >= depth;
-        if (showAtThisDepth) {
-          if (segStart === -1) segStart = i;
-          segEnd = i;
-        } else if (segStart !== -1) {
-          segments.push({
-            startIndex: segStart,
-            endIndex: segEnd
-          });
-          segStart = -1;
-          segEnd = -1;
-        }
-      }
-      if (segStart !== -1) {
-        segments.push({
-          startIndex: segStart,
-          endIndex: segEnd
-        });
-      }
-      if (segments.length > 0) {
-        results.push({
-          depth,
-          left,
-          segments
-        });
-      }
-    }
-    return results;
-  }, [items, visibleRange, itemHeight, indentWidth]);
-  return /*#__PURE__*/_jsx(View, {
-    pointerEvents: "none",
-    style: styles.overlay,
-    children: columns.map(col => col.segments.map((seg, idx) => {
-      const top = (seg.startIndex - visibleRange.start) * itemHeight;
-      const height = (seg.endIndex - seg.startIndex + 1) * itemHeight;
-      const isActive = col.depth === activeDepth;
-      return /*#__PURE__*/_jsx(View, {
-        style: [styles.line, {
-          left: col.left,
-          top,
-          height,
-          backgroundColor: `${gameUIColors.primary}${isActive ? ACTIVE_ALPHA : NORMAL_ALPHA}`
-        }]
-      }, `${col.depth}-${idx}`);
-    }))
-  });
-});
-IndentGuidesOverlay.displayName = "IndentGuidesOverlay";
-const styles = StyleSheet.create({
-  overlay: {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    zIndex: 1
-  },
-  line: {
-    position: "absolute",
-    width: 1
-  }
-});
+"use strict";import O,{memo as $,useMemo as v}from"react";import{StyleSheet as w,View as m}from"react-native";import{gameUIColors as C}from"../ui/index.js";import{jsx as u}from"react/jsx-runtime";const D="4D";const E="80";export const IndentGuidesOverlay=$(({items:r,visibleRange:l,itemHeight:f,indentWidth:i,activeDepth:I=-1})=>{const y=v(()=>{const e=Math.max(0,l.start);const n=Math.min(r.length-1,l.end);if(e>n||r.length===0)return[];let a=0;for(let t=e;t<=n;t++){const s=r[t]?.depth??0;if(s>a)a=s}const p=[];for(let t=1;t<=a;t++){const s=(t-.5)*i;const A=Math.round(s)+.5;const c=[];let o=-1;let h=-1;for(let d=e;d<=n;d++){const g=r[d];const M=(g?.depth??0)>=t;if(M){if(o===-1)o=d;h=d}else if(o!==-1){c.push({startIndex:o,endIndex:h});o=-1;h=-1}}if(o!==-1){c.push({startIndex:o,endIndex:h})}if(c.length>0){p.push({depth:t,left:A,segments:c})}}return p},[r,l,f,i]);return u(m,{pointerEvents:"none",style:x.overlay,children:y.map(e=>e.segments.map((n,a)=>{const p=(n.startIndex-l.start)*f;const t=(n.endIndex-n.startIndex+1)*f;const s=e.depth===I;return u(m,{style:[x.line,{left:e.left,top:p,height:t,backgroundColor:`${C.primary}${s?E:D}`}]},`${e.depth}-${a}`)}))})});IndentGuidesOverlay.displayName="IndentGuidesOverlay";const x=w.create({overlay:{position:"absolute",left:0,right:0,top:0,bottom:0,zIndex:1},line:{position:"absolute",width:1}});

package/lib/module/dataViewer/JsonStringNotice.js

@@ -1,54 +1 @@
-"use strict";
-
-/**
- * Says out loud that the diff below is showing a decoded value.
- *
- * Not decoration: the store holds a STRING, and the rows underneath show an
- * object or an array. Without this line the viewer would be misreporting the
- * type of what is stored — see jsonStringValue.ts.
- */
-import { memo } from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const JsonStringNotice = /*#__PURE__*/memo(function JsonStringNotice({
-  visible,
-  theme
-}) {
-  if (!visible) return null;
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.container, {
-      backgroundColor: theme.summaryBackground,
-      borderTopColor: theme.borderColor
-    }],
-    children: [/*#__PURE__*/_jsx(Text, {
-      style: [styles.glyph, {
-        color: theme.lineNumberText
-      }],
-      children: "{ }"
-    }), /*#__PURE__*/_jsx(Text, {
-      style: [styles.text, {
-        color: theme.lineNumberText
-      }],
-      children: "Stored as a JSON string \u2014 decoded below so the change is readable."
-    })]
-  });
-});
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 7,
-    borderTopWidth: StyleSheet.hairlineWidth,
-    paddingHorizontal: 10,
-    paddingVertical: 6
-  },
-  glyph: {
-    fontSize: 11,
-    fontWeight: "700"
-  },
-  text: {
-    flex: 1,
-    fontSize: 11,
-    lineHeight: 14
-  }
-});
+"use strict";import{memo as l}from"react";import{View as s,Text as r,StyleSheet as t}from"react-native";import{jsx as i,jsxs as c}from"react/jsx-runtime";export const JsonStringNotice=l(function a({visible:n,theme:e}){if(!n)return null;return c(s,{style:[o.container,{backgroundColor:e.summaryBackground,borderTopColor:e.borderColor}],children:[i(r,{style:[o.glyph,{color:e.lineNumberText}],children:"{ }"}),i(r,{style:[o.text,{color:e.lineNumberText}],children:"Stored as a JSON string \u2014 decoded below so the change is readable."})]})});const o=t.create({container:{flexDirection:"row",alignItems:"center",gap:7,borderTopWidth:t.hairlineWidth,paddingHorizontal:10,paddingVertical:6},glyph:{fontSize:11,fontWeight:"700"},text:{flex:1,fontSize:11,lineHeight:14}});