@buoy-gg/redux 7.0.40 → 7.0.42

package/lib/module/redux/components/ReduxActionItem.js

@@ -1,330 +1 @@
-"use strict";
-
-/**
- * Compact list item for displaying a Redux action
- * Uses shared CompactRow for consistent styling with React Query devtools
- */
-
-import { memo } from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { ChangeRow, buoyColors, AlertCircle, monoFont } from "@buoy-gg/shared-ui";
-import { reduxActionStore } from "../utils/reduxActionStore";
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-/**
- * Color palette for async operation badges
- * Each operation gets a distinct color to make matching easy
- */
-const OPERATION_COLORS = [{
-  bg: "rgba(99, 102, 241, 0.25)",
-  text: "#818CF8"
-},
-// indigo
-{
-  bg: "rgba(236, 72, 153, 0.25)",
-  text: "#F472B6"
-},
-// pink
-{
-  bg: "rgba(14, 165, 233, 0.25)",
-  text: "#38BDF8"
-},
-// sky
-{
-  bg: "rgba(245, 158, 11, 0.25)",
-  text: "#FBBF24"
-},
-// amber
-{
-  bg: "rgba(16, 185, 129, 0.25)",
-  text: "#34D399"
-},
-// emerald
-{
-  bg: "rgba(168, 85, 247, 0.25)",
-  text: "#C084FC"
-},
-// purple
-{
-  bg: "rgba(239, 68, 68, 0.25)",
-  text: "#F87171"
-},
-// red
-{
-  bg: "rgba(20, 184, 166, 0.25)",
-  text: "#2DD4BF"
-} // teal
-];
-function getOperationColor(index) {
-  if (index <= 0) return {
-    bg: "rgba(142, 142, 147, 0.2)",
-    text: buoyColors.textSecondary
-  };
-  return OPERATION_COLORS[(index - 1) % OPERATION_COLORS.length];
-}
-
-/**
- * Slice color palette - consistent colors per slice name
- * Makes it easy to visually track actions from the same slice
- */
-const SLICE_COLORS = {
-  cart: "#10B981",
-  // emerald - shopping/commerce
-  user: "#3B82F6",
-  // blue - user related
-  auth: "#8B5CF6",
-  // purple - authentication
-  app: "#6366F1",
-  // indigo - app-wide
-  ui: "#EC4899",
-  // pink - UI state
-  settings: "#F59E0B",
-  // amber - settings
-  api: "#14B8A6",
-  // teal - API calls
-  data: "#06B6D4" // cyan - data management
-};
-
-/**
- * Get consistent color for a slice based on its name
- */
-function getSliceColor(sliceName) {
-  if (!sliceName) return "#6B7280"; // gray for unknown
-
-  const lowerSlice = sliceName.toLowerCase();
-
-  // Check for exact match first
-  if (SLICE_COLORS[lowerSlice]) {
-    return SLICE_COLORS[lowerSlice];
-  }
-
-  // Check for partial matches
-  for (const [key, color] of Object.entries(SLICE_COLORS)) {
-    if (lowerSlice.includes(key)) {
-      return color;
-    }
-  }
-
-  // Generate consistent color from slice name hash
-  const hash = sliceName.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
-  const hue = hash * 137 % 360;
-  return `hsl(${hue}, 70%, 60%)`;
-}
-
-/**
- * Get status label based on category and slice
- */
-function getStatusLabel(category, sliceName) {
-  switch (category) {
-    case "pending":
-      return "Pending";
-    case "fulfilled":
-      return "Success";
-    case "rejected":
-      return "Error";
-    case "internal":
-      return "Internal";
-    case "query":
-      return "Query";
-    case "mutation":
-      return "Mutation";
-    default:
-      // For regular actions, show slice name if available
-      return sliceName ? sliceName.charAt(0).toUpperCase() + sliceName.slice(1) : "Action";
-  }
-}
-
-/**
- * Get color for action category
- */
-function getStatusColor(category, hasStateChange, sliceName) {
-  switch (category) {
-    case "pending":
-      return buoyColors.warning;
-    case "fulfilled":
-      return buoyColors.success;
-    case "rejected":
-      return buoyColors.error;
-    case "internal":
-      return buoyColors.textMuted;
-    case "query":
-      return buoyColors.info;
-    case "mutation":
-      return buoyColors.info;
-    default:
-      // For regular actions, use slice-based color
-      return getSliceColor(sliceName);
-  }
-}
-
-/**
- * Get sublabel with duration and diff info
- */
-function getSublabel(action) {
-  const parts = [];
-
-  // Add duration if available and meaningful
-  if (action.duration !== undefined && action.duration >= 0.1) {
-    parts.push(`${action.duration.toFixed(1)}ms`);
-  }
-
-  // Add diff summary - be more descriptive
-  if (action.hasStateChange) {
-    if (action.changedKeysCount && action.changedKeysCount > 0) {
-      parts.push(`${action.changedKeysCount} key${action.changedKeysCount > 1 ? 's' : ''} changed`);
-    } else {
-      parts.push(action.diffSummary || "state changed");
-    }
-  } else {
-    parts.push("no state change");
-  }
-  return parts.join(" · ");
-}
-
-/**
- * Get action name badge text
- */
-function getActionBadge(action) {
-  // Show the action name in uppercase (e.g., ADDITEM, ORDERCOMPLETED)
-  return action.actionName?.toUpperCase() || action.type.split('/').pop()?.toUpperCase() || "";
-}
-
-/**
- * Get primary text - use action name for cleaner display
- */
-function getPrimaryText(action) {
-  // For internal actions, show the full type
-  if (action.category === "internal") {
-    return action.type;
-  }
-
-  // For others, show slice/actionName format
-  if (action.sliceName) {
-    return `${action.sliceName}/${action.actionName.toLowerCase()}`;
-  }
-  return action.type;
-}
-
-// Memo justified by profiling (tool-bench 2026-07-06): ReduxActionItem
-// x172 renders during a 5s idle dwell at 200 seeded actions. The relative
-// timestamp is delegated to the shared <RelativeTime/> leaf so the 5s
-// tick re-renders only that Text, not this row.
-export const ReduxActionItem = /*#__PURE__*/memo(function ReduxActionItem({
-  action,
-  onPress,
-  linkedCount,
-  testID
-}) {
-  const sliceName = action.sliceName ?? undefined;
-  const statusColor = getStatusColor(action.category, action.hasStateChange, sliceName);
-  const statusLabel = getStatusLabel(action.category, sliceName);
-  const sublabel = getSublabel(action);
-  const primaryText = getPrimaryText(action);
-  const actionBadge = getActionBadge(action);
-
-  // Check for linked async actions. The COUNT comes from the list (see the
-  // prop's doc); the ordered list is only needed to say where in the flow this
-  // action sits, and only when there is a flow at all.
-  const hasLinkedActions = (linkedCount ?? 0) > 1;
-  const linkedActions = hasLinkedActions ? reduxActionStore.getLinkedActions(action) : [];
-
-  // Get position in async sequence (1/2, 2/2, etc.)
-  const asyncPosition = hasLinkedActions ? linkedActions.findIndex(a => a.id === action.id) + 1 : 0;
-
-  // Get sequential operation index to distinguish concurrent requests (#1, #2, etc.)
-  const operationIndex = hasLinkedActions && action.meta?.requestId ? reduxActionStore.getAsyncOperationIndex(action.meta.requestId) : 0;
-
-  // Get color for this operation's badge
-  const opColor = getOperationColor(operationIndex);
-
-  // The async-sequence chip ("1/2 #3") sits in front of whatever indicator
-  // the row shows; the ⚡ / 🕒 indicators and the mono action verb are drawn
-  // by the shared ChangeRow.
-  const sequenceChip = hasLinkedActions ? /*#__PURE__*/_jsx(View, {
-    style: [styles.asyncSequenceBadge, {
-      backgroundColor: opColor.bg
-    }],
-    children: /*#__PURE__*/_jsxs(Text, {
-      style: [styles.asyncSequenceText, {
-        color: opColor.text
-      }],
-      testID: testID ? `${testID}-seq` : undefined,
-      children: [asyncPosition, "/", linkedCount, " #", operationIndex]
-    })
-  }) : undefined;
-  const common = {
-    statusColor,
-    statusLabel,
-    sublabel,
-    primaryText,
-    timestamp: action.timestamp,
-    onPress: () => onPress(action),
-    testID,
-    accessibilityLabel: `${primaryText}, ${statusLabel}, ${sublabel}`
-  };
-  if (action.isSlowAction) {
-    // Slow action warning (with the sequence chip when part of a flow).
-    return /*#__PURE__*/_jsx(ChangeRow, {
-      ...common,
-      badgePrefix: sequenceChip,
-      slow: true
-    });
-  }
-  if (action.category === "rejected") {
-    // Error badge for rejected actions.
-    return /*#__PURE__*/_jsx(ChangeRow, {
-      ...common,
-      customBadge: /*#__PURE__*/_jsxs(View, {
-        style: styles.badgeContainer,
-        children: [sequenceChip, /*#__PURE__*/_jsx(View, {
-          style: styles.errorBadge,
-          testID: testID ? `${testID}-error` : undefined,
-          children: /*#__PURE__*/_jsx(AlertCircle, {
-            size: 12,
-            color: buoyColors.error
-          })
-        })]
-      })
-    });
-  }
-  if (hasLinkedActions) {
-    // Linked indicator for async actions.
-    return /*#__PURE__*/_jsx(ChangeRow, {
-      ...common,
-      badgePrefix: sequenceChip,
-      changed: action.hasStateChange
-    });
-  }
-  if (action.hasStateChange) {
-    // State change indicator with the action verb.
-    return /*#__PURE__*/_jsx(ChangeRow, {
-      ...common,
-      badgeText: actionBadge,
-      changed: true
-    });
-  }
-  // Nothing special: CompactRow's plain badge with the action verb.
-  return /*#__PURE__*/_jsx(ChangeRow, {
-    ...common,
-    plainBadgeText: actionBadge
-  });
-});
-const styles = StyleSheet.create({
-  badgeContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4
-  },
-  errorBadge: {
-    paddingHorizontal: 4
-  },
-  asyncSequenceBadge: {
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-    borderRadius: 4
-  },
-  asyncSequenceText: {
-    fontSize: 10,
-    fontWeight: "600",
-    fontFamily: monoFont
-  }
-});
+"use strict";import{memo as I}from"react";import{View as f,Text as L,StyleSheet as O}from"react-native";import{ChangeRow as c,buoyColors as n,AlertCircle as $,monoFont as T}from"@buoy-gg/shared-ui";import{reduxActionStore as S}from"../utils/reduxActionStore";import{jsxs as B,jsx as s}from"react/jsx-runtime";const A=[{bg:"rgba(99, 102, 241, 0.25)",text:"#818CF8"},{bg:"rgba(236, 72, 153, 0.25)",text:"#F472B6"},{bg:"rgba(14, 165, 233, 0.25)",text:"#38BDF8"},{bg:"rgba(245, 158, 11, 0.25)",text:"#FBBF24"},{bg:"rgba(16, 185, 129, 0.25)",text:"#34D399"},{bg:"rgba(168, 85, 247, 0.25)",text:"#C084FC"},{bg:"rgba(239, 68, 68, 0.25)",text:"#F87171"},{bg:"rgba(20, 184, 166, 0.25)",text:"#2DD4BF"}];function P(t){if(t<=0)return{bg:"rgba(142, 142, 147, 0.2)",text:n.textSecondary};return A[(t-1)%A.length]}const p={cart:"#10B981",user:"#3B82F6",auth:"#8B5CF6",app:"#6366F1",ui:"#EC4899",settings:"#F59E0B",api:"#14B8A6",data:"#06B6D4"};function R(t){if(!t)return"#6B7280";const e=t.toLowerCase();if(p[e]){return p[e]}for(const[r,o]of Object.entries(p)){if(e.includes(r)){return o}}const a=t.split("").reduce((r,o)=>r+o.charCodeAt(0),0);const d=a*137%360;return`hsl(${d}, 70%, 60%)`}function k(t,e){switch(t){case"pending":return"Pending";case"fulfilled":return"Success";case"rejected":return"Error";case"internal":return"Internal";case"query":return"Query";case"mutation":return"Mutation";default:return e?e.charAt(0).toUpperCase()+e.slice(1):"Action"}}function E(t,e,a){switch(t){case"pending":return n.warning;case"fulfilled":return n.success;case"rejected":return n.error;case"internal":return n.textMuted;case"query":return n.info;case"mutation":return n.info;default:return R(a)}}function z(t){const e=[];if(t.duration!==void 0&&t.duration>=.1){e.push(`${t.duration.toFixed(1)}ms`)}if(t.hasStateChange){if(t.changedKeysCount&&t.changedKeysCount>0){e.push(`${t.changedKeysCount} key${t.changedKeysCount>1?"s":""} changed`)}else{e.push(t.diffSummary||"state changed")}}else{e.push("no state change")}return e.join(" \xB7 ")}function D(t){return t.actionName?.toUpperCase()||t.type.split("/").pop()?.toUpperCase()||""}function K(t){if(t.category==="internal"){return t.type}const e=t.type.split("/");if(e.length>=3&&["pending","fulfilled","rejected"].includes(e[e.length-1])){return e.slice(0,-1).join("/")}return t.type}export const ReduxActionItem=I(function t({action:e,onPress:a,linkedCount:d,testID:r}){const o=e.sliceName??void 0;const F=E(e.category,e.hasStateChange,o);const h=k(e.category,o);const b=z(e);const y=K(e);const x=D(e);const u=(d??0)>1;const j=u?S.getLinkedActions(e):[];const q=u?j.findIndex(w=>w.id===e.id)+1:0;const C=u&&e.meta?.requestId?S.getAsyncOperationIndex(e.meta.requestId):0;const m=P(C);const l=u?s(f,{style:[g.asyncSequenceBadge,{backgroundColor:m.bg}],children:B(L,{style:[g.asyncSequenceText,{color:m.text}],testID:r?`${r}-seq`:void 0,children:[q,"/",d," #",C]})}):void 0;const i={statusColor:F,statusLabel:h,sublabel:b,primaryText:y,timestamp:e.timestamp,onPress:()=>a(e),testID:r,accessibilityLabel:`${y}, ${h}, ${b}`};if(e.isSlowAction){return s(c,{...i,badgePrefix:l,slow:true})}if(e.category==="rejected"){return s(c,{...i,customBadge:B(f,{style:g.badgeContainer,children:[l,s(f,{style:g.errorBadge,testID:r?`${r}-error`:void 0,children:s($,{size:12,color:n.error})})]})})}if(u){return s(c,{...i,badgePrefix:l,changed:e.hasStateChange})}if(e.hasStateChange){return s(c,{...i,badgeText:x,changed:true})}return s(c,{...i,plainBadgeText:x})});const g=O.create({badgeContainer:{flexDirection:"row",alignItems:"center",gap:4},errorBadge:{paddingHorizontal:4},asyncSequenceBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:4},asyncSequenceText:{fontSize:10,fontWeight:"600",fontFamily:T}});

package/lib/module/redux/components/ReduxAutoInstrument.js

@@ -1,17 +1 @@
-"use strict";
-
-import { useAutoInstrumentRedux } from "../hooks/useAutoInstrumentRedux";
-
-/**
- * Headless startup instrumentation. Auto-rendered by FloatingDevTools (same
- * pattern as RouteTracker & the overlay tools) so the Redux store is bound
- * from app mount — action log, MCP getState/dispatch, and desktop sync all
- * work WITHOUT the user ever opening the Redux tool. Renders nothing.
- *
- * Safe anywhere: if react-redux is missing or there's no Provider above, the
- * hook records the diagnostic and fails gracefully.
- */
-export function ReduxAutoInstrument() {
-  useAutoInstrumentRedux();
-  return null;
-}
+"use strict";import{useAutoInstrumentRedux as t}from"../hooks/useAutoInstrumentRedux";export function ReduxAutoInstrument(){t();return null}

package/lib/module/redux/components/ReduxDetailViewToggle.js

@@ -1,45 +1 @@
-"use strict";
-
-/**
- * ReduxDetailViewToggle
- *
- * Three-card toggle for switching between Action, State, and Diff views.
- * The cards themselves are the shared `DetailViewToggle`; this file owns
- * the redux view list and testID prefix.
- */
-
-import React, { memo } from "react";
-import { DetailViewToggle, FileText, Database, GitBranch } from "@buoy-gg/shared-ui";
-import { jsx as _jsx } from "react/jsx-runtime";
-// Active-card chrome takes the single night accent (the per-view
-// warning/info/success tints were selection chrome, not data).
-const VIEWS = [{
-  key: "action",
-  label: "ACTION",
-  description: "View action details",
-  icon: FileText
-}, {
-  key: "state",
-  label: "STATE",
-  description: "View current state",
-  icon: Database
-}, {
-  key: "diff",
-  label: "DIFF",
-  description: "Compare changes",
-  icon: GitBranch
-}];
-const DIFF_DISABLED = ["diff"];
-export const ReduxDetailViewToggle = /*#__PURE__*/memo(function ReduxDetailViewToggle({
-  activeView,
-  onViewChange,
-  diffDisabled = false
-}) {
-  return /*#__PURE__*/_jsx(DetailViewToggle, {
-    views: VIEWS,
-    activeView: activeView,
-    onViewChange: onViewChange,
-    disabledKeys: diffDisabled ? DIFF_DISABLED : undefined,
-    testIDPrefix: "buoy-redux"
-  });
-});
+"use strict";import u,{memo as o}from"react";import{DetailViewToggle as a,FileText as n,Database as s,GitBranch as r}from"@buoy-gg/shared-ui";import{jsx as c}from"react/jsx-runtime";const l=[{key:"action",label:"ACTION",description:"View action details",icon:n},{key:"state",label:"STATE",description:"View current state",icon:s},{key:"diff",label:"DIFF",description:"Compare changes",icon:r}];const d=["diff"];export const ReduxDetailViewToggle=o(function f({activeView:e,onViewChange:i,diffDisabled:t=false}){return c(a,{views:l,activeView:e,onViewChange:i,disabledKeys:t?d:void 0,testIDPrefix:"buoy-redux"})});

package/lib/module/redux/components/ReduxIcon.js

@@ -1,8 +1 @@
-"use strict";
-
-/**
- * Redux DevTools icon
- * Re-exports from floating-tools-core for consistency
- */
-
-export { ReduxIcon, REDUX_ICON_COLOR } from "@buoy-gg/floating-tools-core";
+"use strict";export{ReduxIcon,REDUX_ICON_COLOR}from"@buoy-gg/floating-tools-core";