@buoy-gg/shared-ui 7.0.4 → 7.0.6

package/lib/commonjs/dataViewer/lineDiff.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DiffType = void 0;
+exports.DiffType = exports.ABSENT_VALUE = void 0;
 exports.computeLineDiff = computeLineDiff;
+exports.isAbsent = isAbsent;
 /**
  * Line-by-line diff computation for React Native
  *
@@ -18,6 +19,23 @@ let DiffType = exports.DiffType = /*#__PURE__*/function (DiffType) {
   DiffType["MODIFIED"] = "modified";
   return DiffType;
 }({});
+/**
+ * Marks one side of a diff as "this value did not exist".
+ *
+ * Deliberately distinct from `null`, `[]`, `{}` and `""` — those are real
+ * stored values and diff normally. An absent side contributes zero lines, so a
+ * key that was just created reads as purely added rather than as an edit of the
+ * literal text `null`.
+ *
+ * `Symbol.for` so the identity holds even if a bundler ends up with two copies
+ * of this module.
+ */
+const ABSENT_VALUE = exports.ABSENT_VALUE = Symbol.for("buoy.diff.absent");
+
+/** True when a diff side represents a value that did not exist. */
+function isAbsent(value) {
+  return value === ABSENT_VALUE;
+}
 /**
  * Compute diff based on method - for word-level diff within lines
  */
@@ -157,6 +175,10 @@ function computeDiffByMethod(oldStr, newStr, method) {
  * Convert object to formatted JSON lines
  */
 function objectToLines(obj) {
+  // A value that never existed has no text at all — not the word "null".
+  if (isAbsent(obj)) {
+    return [];
+  }
   if (obj === null || obj === undefined) {
     return [String(obj)];
   }
@@ -240,63 +262,265 @@ function filterDiffWithContext(diffs, contextLines) {
 }
 
 /**
- * Compare lines based on method
+ * Normalize a line into the key used for matching.
+ *
+ * Display always uses the raw JSON; only matching sees this. `trimmedLines`
+ * drops indentation, and `ignoreTrailingComma` drops the trailing comma so
+ * pushing one item onto an array doesn't report the previous last item as
+ * modified.
  */
-function compareLinesWithMethod(line1, line2, method) {
-  switch (method) {
-    case "trimmedLines":
-      return line1.trim() === line2.trim();
-    case "chars":
-    case "words":
-    case "lines":
-    default:
-      return line1 === line2;
+function normalizeCompareKey(line, compareMethod, ignoreTrailingComma) {
+  const base = compareMethod === "trimmedLines" ? line.trim() : line;
+  return ignoreTrailingComma ? base.replace(/,\s*$/, "") : base;
+}
+
+/**
+ * The original heuristic: lines that start alike are an edit of one line rather
+ * than an unrelated removal plus addition. Only ever applied inside a hunk the
+ * line matcher already proved unmatched, so it can no longer pair lines that
+ * merely shifted position.
+ */
+function looksLikeModification(oldLine, newLine) {
+  const oldTrimmed = oldLine.trim();
+  const newTrimmed = newLine.trim();
+  return !!oldTrimmed && !!newTrimmed && (oldTrimmed.startsWith(newTrimmed.substring(0, 3)) || newTrimmed.startsWith(oldTrimmed.substring(0, 3)));
+}
+/**
+ * Myers is O(ND) in the number of edits, so near-identical values (the common
+ * case — one array push) are close to free and only wildly different values get
+ * expensive. Past these bounds we fall back to the pairwise walk.
+ */
+const MYERS_MAX_TOTAL_LINES = 8000;
+const MYERS_MAX_EDIT_DISTANCE = 1024;
+
+/**
+ * Myers' O(ND) diff ("An O(ND) Difference Algorithm and Its Variations", 1986)
+ * over line keys — the same algorithm git and `diff` use.
+ *
+ * Returns null when the input is too large or too dissimilar to be worth it,
+ * which tells the caller to use the fallback walk.
+ */
+function myersLineOps(a, b) {
+  const n = a.length;
+  const m = b.length;
+  if (n + m > MYERS_MAX_TOTAL_LINES) return null;
+  if (n === 0 && m === 0) return [];
+  const max = n + m;
+  // +1 of padding on each side so the k-1 / k+1 probes at the frontier stay in
+  // bounds without clamping (clamping would corrupt the index arithmetic).
+  const offset = max + 1;
+  const v = new Int32Array(2 * max + 3);
+  const maxD = Math.min(max, MYERS_MAX_EDIT_DISTANCE);
+
+  // Frontier snapshot per depth. Only k in [-(d+1), d+1] is ever read back, so
+  // each snapshot is O(d) and the whole trace is O(D^2) — not O(D * max).
+  const trace = [];
+  for (let d = 0; d <= maxD; d++) {
+    trace.push(v.slice(offset - (d + 1), offset + d + 2));
+    for (let k = -d; k <= d; k += 2) {
+      let x;
+      if (k === -d || k !== d && v[k - 1 + offset] < v[k + 1 + offset]) {
+        x = v[k + 1 + offset];
+      } else {
+        x = v[k - 1 + offset] + 1;
+      }
+      let y = x - k;
+
+      // Follow the diagonal as far as the lines keep matching.
+      while (x < n && y < m && a[x] === b[y]) {
+        x++;
+        y++;
+      }
+      v[k + offset] = x;
+      if (x >= n && y >= m) {
+        return backtrackOps(trace, n, m);
+      }
+    }
   }
+  return null;
 }
 
 /**
- * Compute line-by-line diff between two objects
+ * Walk the recorded frontiers backwards to recover the edit script.
  */
-function computeLineDiff(oldValue, newValue, options = {}) {
-  const {
-    compareMethod = "words",
-    disableWordDiff = false,
-    showDiffOnly = false,
-    contextLines = 3
-  } = options;
-  const oldLines = objectToLines(oldValue);
-  const newLines = objectToLines(newValue);
+function backtrackOps(trace, n, m) {
+  const ops = [];
+  let x = n;
+  let y = m;
+  for (let d = trace.length - 1; d >= 0; d--) {
+    const snapshot = trace[d];
+    // Snapshot d covers k in [-(d+1), d+1], so k=0 sits at index d+1.
+    const base = d + 1;
+    const k = x - y;
+    let prevK;
+    if (k === -d || k !== d && snapshot[k - 1 + base] < snapshot[k + 1 + base]) {
+      prevK = k + 1;
+    } else {
+      prevK = k - 1;
+    }
+    const prevX = snapshot[prevK + base];
+    const prevY = prevX - prevK;
+    while (x > prevX && y > prevY) {
+      ops.push({
+        kind: "eq",
+        i: x - 1,
+        j: y - 1
+      });
+      x--;
+      y--;
+    }
+    if (d > 0) {
+      if (x === prevX) {
+        ops.push({
+          kind: "ins",
+          j: y - 1
+        });
+      } else {
+        ops.push({
+          kind: "del",
+          i: x - 1
+        });
+      }
+    }
+    x = prevX;
+    y = prevY;
+  }
+  ops.reverse();
+  return ops;
+}
+
+/**
+ * Emit one hunk of unmatched lines. Removals and additions are paired off in
+ * order and become MODIFIED rows when they look like an edit of the same line;
+ * everything left over stays a one-sided removal or addition.
+ */
+function emitHunk(result, dels, inss, oldLines, newLines, compareMethod, disableWordDiff) {
+  const pairs = Math.min(dels.length, inss.length);
+  for (let k = 0; k < pairs; k++) {
+    const i = dels[k];
+    const j = inss[k];
+    if (!looksLikeModification(oldLines[i], newLines[j])) {
+      result.push({
+        leftLineNumber: i + 1,
+        type: DiffType.REMOVED,
+        leftContent: oldLines[i],
+        leftRaw: oldLines[i]
+      });
+      result.push({
+        rightLineNumber: j + 1,
+        type: DiffType.ADDED,
+        rightContent: newLines[j],
+        rightRaw: newLines[j]
+      });
+      continue;
+    }
+    if (!disableWordDiff && compareMethod !== "lines") {
+      const wordDiff = computeDiffByMethod(oldLines[i], newLines[j], compareMethod);
+      result.push({
+        leftLineNumber: i + 1,
+        rightLineNumber: j + 1,
+        type: DiffType.MODIFIED,
+        leftContent: wordDiff.left,
+        rightContent: wordDiff.right,
+        leftRaw: oldLines[i],
+        rightRaw: newLines[j]
+      });
+    } else {
+      result.push({
+        leftLineNumber: i + 1,
+        rightLineNumber: j + 1,
+        type: DiffType.MODIFIED,
+        leftContent: oldLines[i],
+        rightContent: newLines[j],
+        leftRaw: oldLines[i],
+        rightRaw: newLines[j]
+      });
+    }
+  }
+  for (let k = pairs; k < dels.length; k++) {
+    const i = dels[k];
+    result.push({
+      leftLineNumber: i + 1,
+      type: DiffType.REMOVED,
+      leftContent: oldLines[i],
+      leftRaw: oldLines[i]
+    });
+  }
+  for (let k = pairs; k < inss.length; k++) {
+    const j = inss[k];
+    result.push({
+      rightLineNumber: j + 1,
+      type: DiffType.ADDED,
+      rightContent: newLines[j],
+      rightRaw: newLines[j]
+    });
+  }
+}
+
+/**
+ * Turn the edit script into rows, grouping each run of unmatched lines into a
+ * hunk so modification pairing stays local to a real change.
+ */
+function buildRowsFromOps(ops, oldLines, newLines, compareMethod, disableWordDiff) {
   const result = [];
-  let leftLineNum = 1;
-  let rightLineNum = 1;
+  let idx = 0;
+  while (idx < ops.length) {
+    const op = ops[idx];
+    if (op.kind === "eq") {
+      result.push({
+        leftLineNumber: op.i + 1,
+        rightLineNumber: op.j + 1,
+        type: DiffType.DEFAULT,
+        leftContent: oldLines[op.i],
+        rightContent: newLines[op.j],
+        leftRaw: oldLines[op.i],
+        rightRaw: newLines[op.j]
+      });
+      idx++;
+      continue;
+    }
+    const dels = [];
+    const inss = [];
+    while (idx < ops.length && ops[idx].kind !== "eq") {
+      const hunkOp = ops[idx];
+      if (hunkOp.kind === "del") dels.push(hunkOp.i);else if (hunkOp.kind === "ins") inss.push(hunkOp.j);
+      idx++;
+    }
+    emitHunk(result, dels, inss, oldLines, newLines, compareMethod, disableWordDiff);
+  }
+  return result;
+}
 
-  // Simple line diff algorithm (can be improved with LCS)
-  let i = 0,
-    j = 0;
+/**
+ * Fallback pairwise walk, used only when the input is past the Myers bounds.
+ * Advances both sides in lockstep, so a shifted line reads as changed — the
+ * reason it isn't the primary path.
+ */
+function pairwiseLineWalk(oldLines, newLines, oldKeys, newKeys, compareMethod, disableWordDiff) {
+  const result = [];
+  let i = 0;
+  let j = 0;
   while (i < oldLines.length || j < newLines.length) {
     if (i >= oldLines.length) {
-      // Rest are additions
       result.push({
-        rightLineNumber: rightLineNum++,
+        rightLineNumber: j + 1,
         type: DiffType.ADDED,
         rightContent: newLines[j],
         rightRaw: newLines[j]
       });
       j++;
     } else if (j >= newLines.length) {
-      // Rest are removals
       result.push({
-        leftLineNumber: leftLineNum++,
+        leftLineNumber: i + 1,
         type: DiffType.REMOVED,
         leftContent: oldLines[i],
         leftRaw: oldLines[i]
       });
       i++;
-    } else if (compareLinesWithMethod(oldLines[i], newLines[j], compareMethod === "trimmedLines" ? "trimmedLines" : "lines")) {
-      // Lines match (possibly after trimming if trimmedLines)
+    } else if (oldKeys[i] === newKeys[j]) {
       result.push({
-        leftLineNumber: leftLineNum++,
-        rightLineNumber: rightLineNum++,
+        leftLineNumber: i + 1,
+        rightLineNumber: j + 1,
         type: DiffType.DEFAULT,
         leftContent: oldLines[i],
         rightContent: newLines[j],
@@ -306,57 +530,35 @@ function computeLineDiff(oldValue, newValue, options = {}) {
       i++;
       j++;
     } else {
-      // Lines differ - check if it's a modification or separate add/remove
-      const oldTrimmed = oldLines[i].trim();
-      const newTrimmed = newLines[j].trim();
-
-      // Simple heuristic: if lines start similarly, treat as modification
-      if (oldTrimmed && newTrimmed && (oldTrimmed.startsWith(newTrimmed.substring(0, 3)) || newTrimmed.startsWith(oldTrimmed.substring(0, 3)))) {
-        // Treat as modification - compute word diff if enabled
-        if (!disableWordDiff && compareMethod !== "lines") {
-          const wordDiff = computeDiffByMethod(oldLines[i], newLines[j], compareMethod);
-          result.push({
-            leftLineNumber: leftLineNum++,
-            rightLineNumber: rightLineNum++,
-            type: DiffType.MODIFIED,
-            leftContent: wordDiff.left,
-            rightContent: wordDiff.right,
-            leftRaw: oldLines[i],
-            rightRaw: newLines[j]
-          });
-        } else {
-          // No word diff - just mark lines as different
-          result.push({
-            leftLineNumber: leftLineNum++,
-            rightLineNumber: rightLineNum++,
-            type: DiffType.MODIFIED,
-            leftContent: oldLines[i],
-            rightContent: newLines[j],
-            leftRaw: oldLines[i],
-            rightRaw: newLines[j]
-          });
-        }
-        i++;
-        j++;
-      } else {
-        // Treat as separate remove and add
-        result.push({
-          leftLineNumber: leftLineNum++,
-          type: DiffType.REMOVED,
-          leftContent: oldLines[i],
-          leftRaw: oldLines[i]
-        });
-        result.push({
-          rightLineNumber: rightLineNum++,
-          type: DiffType.ADDED,
-          rightContent: newLines[j],
-          rightRaw: newLines[j]
-        });
-        i++;
-        j++;
-      }
+      emitHunk(result, [i], [j], oldLines, newLines, compareMethod, disableWordDiff);
+      i++;
+      j++;
     }
   }
+  return result;
+}
+
+/**
+ * Compute line-by-line diff between two objects
+ *
+ * Lines are matched with Myers' O(ND) algorithm over normalized keys, so an
+ * insert or append shows up as the one line that actually arrived instead of
+ * every line after it shifting into a change.
+ */
+function computeLineDiff(oldValue, newValue, options = {}) {
+  const {
+    compareMethod = "words",
+    disableWordDiff = false,
+    showDiffOnly = false,
+    contextLines = 3,
+    ignoreTrailingComma = true
+  } = options;
+  const oldLines = objectToLines(oldValue);
+  const newLines = objectToLines(newValue);
+  const oldKeys = oldLines.map(line => normalizeCompareKey(line, compareMethod, ignoreTrailingComma));
+  const newKeys = newLines.map(line => normalizeCompareKey(line, compareMethod, ignoreTrailingComma));
+  const ops = myersLineOps(oldKeys, newKeys);
+  const result = ops ? buildRowsFromOps(ops, oldLines, newLines, compareMethod, disableWordDiff) : pairwiseLineWalk(oldLines, newLines, oldKeys, newKeys, compareMethod, disableWordDiff);
 
   // Apply showDiffOnly filter if enabled
   if (showDiffOnly) {

package/lib/commonjs/dataViewer/tree/TreeDiffViewer.js

@@ -7,6 +7,7 @@ exports.default = TreeDiffViewer;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
+var _lineDiff = require("../lineDiff.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 // @ts-nocheck
@@ -110,6 +111,11 @@ function isEqual(a, b) {
 function computeDiff(oldValue, newValue, path = []) {
   const result = [];
 
+  // A side marked absent never existed, so it contributes nothing and the other
+  // side reads as purely added (or removed). Only the root can be absent.
+  if ((0, _lineDiff.isAbsent)(oldValue)) oldValue = undefined;
+  if ((0, _lineDiff.isAbsent)(newValue)) newValue = undefined;
+
   // Handle primitives and null/undefined
   if (!isObject(oldValue) && !isObject(newValue) && !Array.isArray(oldValue) && !Array.isArray(newValue)) {
     if (!isEqual(oldValue, newValue)) {
@@ -322,7 +328,8 @@ function TreeDiffViewer({
   newValue,
   theme: themeName = "dark",
   expandAll = false,
-  showUnchanged = true
+  showUnchanged = true,
+  scrollEnabled = true
 }) {
   const theme = themeName === "dark" ? darkTheme : lightTheme;
 
@@ -637,8 +644,12 @@ function TreeDiffViewer({
 
   // Show header only if there are changes
   const hasChanges = stats.added > 0 || stats.removed > 0 || stats.changed > 0;
+
+  // Inline mode must not claim `flex: 1`, or it would stretch to the pane and
+  // clip the rows an ancestor ScrollView is supposed to reveal.
+  const RowsContainer = scrollEnabled ? _reactNative.ScrollView : _reactNative.View;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [styles.container, {
+    style: [scrollEnabled ? styles.container : styles.containerInline, {
       backgroundColor: theme.background
     }],
     children: [hasChanges && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -703,8 +714,8 @@ function TreeDiffViewer({
           })]
         })]
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-      style: styles.scrollView,
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(RowsContainer, {
+      style: scrollEnabled ? styles.scrollView : undefined,
       showsVerticalScrollIndicator: false,
       children: diffTree.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.emptyState,
@@ -744,6 +755,10 @@ const styles = _reactNative.StyleSheet.create({
     borderRadius: 8,
     overflow: "hidden"
   },
+  containerInline: {
+    borderRadius: 8,
+    overflow: "hidden"
+  },
   header: {
     paddingHorizontal: 12,
     paddingVertical: 8,
@@ -795,7 +810,7 @@ const styles = _reactNative.StyleSheet.create({
     justifyContent: "center",
     flexDirection: "row",
     borderBottomWidth: _reactNative.StyleSheet.hairlineWidth,
-    borderBottomColor: "rgba(255, 255, 255, 0.02)"
+    borderBottomColor: "rgba(128, 128, 128, 0.04)"
   },
   lineNumber: {
     width: 32,

package/lib/commonjs/dataViewer/treeActions.js

@@ -0,0 +1,167 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.breadcrumb = breadcrumb;
+exports.treeActionMap = treeActionMap;
+exports.treeActionsFor = treeActionsFor;
+exports.typeLabel = typeLabel;
+var _jsonOps = require("./jsonOps.js");
+/**
+ * What you can do to the node a data explorer has selected — as data, not UI.
+ *
+ * Two surfaces render this list and they look nothing alike: the dashboard's
+ * footer bar is a row of small chips beside a cursor, the phone's full-screen
+ * editor is a grid of thumb-sized tiles. Deriving both from one function is the
+ * point — "can this item move up" is a property of the DOCUMENT, and having two
+ * components each answer it from their own reading of `root` is how the two
+ * surfaces quietly start disagreeing about what's legal.
+ *
+ * So this module answers it once and hands back a list. The renderers decide
+ * what a disabled action looks like and which icon it wears; they never decide
+ * whether it applies.
+ */
+
+/** The node a data explorer currently has selected. */
+
+/** The node's type, as a badge shows it. */
+function typeLabel(value) {
+  if (value === null) return "null";
+  if (Array.isArray(value)) return "array";
+  if ((0, _jsonOps.isRebuildableObject)(value)) return "object";
+  return typeof value;
+}
+
+/** `a › b › 2` — reads as a location, which a bare index like `2` does not. */
+function breadcrumb(path) {
+  return path.length === 0 ? "root" : path.join(" › ");
+}
+
+/**
+ * Index the list by id, for renderers that lay the six out in their own order.
+ *
+ * The bar and the dock genuinely disagree here — the bar puts the two move
+ * arrows together in the middle because they're icon-only and read as a pair,
+ * the dock follows the mockup's reading order. Neither ordering belongs in the
+ * capability list, so both look up what they need.
+ */
+function treeActionMap(actions) {
+  const map = {};
+  for (const action of actions) map[action.id] = action;
+  return map;
+}
+
+/** A key that doesn't collide, for "add" on an object. */
+function newKeyFor(container) {
+  if (!("newKey" in container)) return "newKey";
+  let n = 2;
+  while (`newKey ${n}` in container) n++;
+  return `newKey ${n}`;
+}
+
+/**
+ * The six things a selection can do, ALWAYS in this order and always all six.
+ *
+ * Returning the inapplicable ones as `enabled: false` rather than omitting them
+ * is deliberate and is why this returns a fixed-length list: a renderer that
+ * drops entries reflows every time the selection moves, so stepping from item 1
+ * to item 0 would slide the remaining controls sideways under a finger already
+ * on its way down. Stable position also means the same action is always in the
+ * same place, which is most of what makes a grid of six learnable.
+ */
+function treeActionsFor(root, selection, options = {}) {
+  const path = selection?.path ?? [];
+  const value = selection?.value;
+  const has = selection != null;
+  const isRoot = path.length === 0;
+  const parent = has && !isRoot ? (0, _jsonOps.getAtPath)(root, path.slice(0, -1)) : undefined;
+  const parentIsArray = Array.isArray(parent);
+  const index = parentIsArray ? Number(path[path.length - 1]) : -1;
+  const isArray = Array.isArray(value);
+  const isObject = (0, _jsonOps.isRebuildableObject)(value);
+  const isContainer = (0, _jsonOps.isEditableContainer)(value);
+  const canEditValue = has && (options.containersEditable === true || !isContainer);
+
+  // One "+" slot whose meaning follows the container type, rather than two
+  // mutually-exclusive buttons of which one is always dead.
+  const addedKey = isObject ? newKeyFor(value) : "";
+  const add = isObject ? {
+    id: "add",
+    label: "Add key",
+    enabled: true,
+    op: {
+      kind: "addKey",
+      path,
+      key: addedKey,
+      value: (0, _jsonOps.suggestedNewValue)(value)
+    },
+    selectAfter: [...path, addedKey]
+  } : {
+    id: "add",
+    label: "Append",
+    enabled: isArray,
+    op: isArray ? {
+      kind: "append",
+      path,
+      value: (0, _jsonOps.suggestedNewValue)(value)
+    } : null,
+    selectAfter: isArray ? [...path, String(value.length)] : undefined
+  };
+  return [
+  // A boolean has exactly two states, so there is nothing to ask and nothing
+  // to type — an editor for it would be a screen whose only job is to offer
+  // the value you didn't pick. It flips in place instead.
+  typeof value === "boolean" ? {
+    id: "editValue",
+    label: "Toggle",
+    enabled: true,
+    op: {
+      kind: "replace",
+      path,
+      value: !value
+    }
+  } : {
+    id: "editValue",
+    label: "Edit value",
+    enabled: canEditValue,
+    op: null
+  }, add, {
+    // `duplicate` handles object keys too (it mints a "<key> copy" in place),
+    // so this applies to any entry that has a parent.
+    id: "duplicate",
+    label: "Duplicate",
+    enabled: has && !isRoot,
+    op: has && !isRoot ? {
+      kind: "duplicate",
+      path
+    } : null
+  }, {
+    id: "moveUp",
+    label: "Move up",
+    enabled: has && parentIsArray && index > 0,
+    op: has && parentIsArray && index > 0 ? {
+      kind: "move",
+      path,
+      toIndex: index - 1
+    } : null
+  }, {
+    id: "moveDown",
+    label: "Move down",
+    enabled: has && parentIsArray && index > -1 && index < parent.length - 1,
+    op: has && parentIsArray && index > -1 && index < parent.length - 1 ? {
+      kind: "move",
+      path,
+      toIndex: index + 1
+    } : null
+  }, {
+    id: "remove",
+    label: "Remove",
+    danger: true,
+    enabled: has && !isRoot,
+    op: has && !isRoot ? {
+      kind: "remove",
+      path
+    } : null
+  }];
+}

package/lib/commonjs/env/EnvironmentSelector.js

@@ -180,10 +180,10 @@ const styles = _reactNative.StyleSheet.create({
     width: "100%"
   },
   optionContainerSelected: {
-    backgroundColor: "rgba(255, 255, 255, 0.05)"
+    backgroundColor: "rgba(128, 128, 128, 0.1)"
   },
   optionContainerPressed: {
-    backgroundColor: "rgba(255, 255, 255, 0.1)"
+    backgroundColor: "rgba(128, 128, 128, 0.2)"
   },
   optionLeft: {
     flexDirection: "row",

package/lib/commonjs/env/EnvironmentSelectorInline.js

@@ -274,10 +274,10 @@ const styles = _reactNative.StyleSheet.create({
     height: OPTION_HEIGHT
   },
   optionContainerSelected: {
-    backgroundColor: "rgba(255, 255, 255, 0.05)"
+    backgroundColor: "rgba(128, 128, 128, 0.1)"
   },
   optionContainerPressed: {
-    backgroundColor: "rgba(255, 255, 255, 0.1)"
+    backgroundColor: "rgba(128, 128, 128, 0.2)"
   },
   optionLeft: {
     flexDirection: "row",