@buoy-gg/shared-ui 7.0.22 → 7.0.24

package/lib/commonjs/ui/backgrounds/variants/starfield.js

@@ -0,0 +1,210 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Starfield = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _absoluteFill = require("../../../utils/absoluteFill.js");
+var _primitives = require("../primitives.js");
+var _rng = require("../rng.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Starfield — the RN-primitive port of the Everlights parallax-drift starfield.
+ *
+ * The original is a GPU-instanced Skia `<Atlas>` with a per-star worklet; Buoy
+ * can't depend on Skia, so the depth continuum is quantised into five discrete
+ * bands. Each band is one rasterized layer of dots sliding at its own speed —
+ * five native-driven loops instead of 160 per-frame transforms — and the eye
+ * reads five parallax speeds as depth just as well as it reads a continuum.
+ */
+
+/**
+ * Depth bands, far → near. `z` drives both size and speed (drift/sec at z=1 is
+ * 0.016 of the width, matching the original), `count` thins out as stars get
+ * closer so the fast, big ones stay sparse.
+ */
+const BANDS = [
+// dia is the star's core in px; halo is how many core-widths the bloom
+// spreads (0 = no bloom, which is what keeps the far bands cheap).
+{
+  z: 1.0,
+  count: 38,
+  dia: 1.4,
+  halo: 0,
+  color: "#7C93B5",
+  alpha: 0.55
+}, {
+  z: 0.78,
+  count: 26,
+  dia: 1.9,
+  halo: 0,
+  color: "#A6BBD8",
+  alpha: 0.65
+}, {
+  z: 0.6,
+  count: 18,
+  dia: 2.4,
+  halo: 0,
+  color: "#C9D9F0",
+  alpha: 0.8
+}, {
+  z: 0.45,
+  count: 11,
+  dia: 3.1,
+  halo: 0,
+  color: "#E4EEFC",
+  alpha: 0.92
+},
+// Only the closest band gets a bloom: 6 stars x 3 extra discs is 36 views,
+// and it is the entire difference between "dots" and "stars".
+{
+  z: 0.3,
+  count: 6,
+  dia: 4.2,
+  halo: 4.4,
+  color: "#FFFFFF",
+  alpha: 1
+}];
+const DRIFT = 0.016; // fraction of width travelled per second at z=1
+
+/** Pre-scattered x/y per band, generated once at module load. */
+const BAND_TABLES = BANDS.map((b, i) => ({
+  xs: (0, _rng.scatter)(0x5747 + i * 977, b.count),
+  ys: (0, _rng.scatter)(0x91c3 + i * 613, b.count)
+}));
+
+/**
+ * The bloom around a close star. Three nested discs rather than a `RadialGlow`,
+ * because this one is drawn per star and lives INSIDE the band layer — which is
+ * the point: the halo travels with its star instead of sitting still while the
+ * star drifts off it.
+ */
+function haloDiscs(cx, cy, core, spread, color, key) {
+  const out = [];
+  const steps = [{
+    mul: spread,
+    alpha: 0.05
+  }, {
+    mul: spread * 0.62,
+    alpha: 0.09
+  }, {
+    mul: spread * 0.34,
+    alpha: 0.16
+  }];
+  for (let i = 0; i < steps.length; i++) {
+    const d = core * steps[i].mul;
+    out.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        position: "absolute",
+        left: cx - d / 2,
+        top: cy - d / 2,
+        width: d,
+        height: d,
+        borderRadius: d / 2,
+        backgroundColor: (0, _rng.withAlpha)(color, steps[i].alpha)
+      }
+    }, `${key}-h${i}`));
+  }
+  return out;
+}
+const StarBand = /*#__PURE__*/(0, _react.memo)(function StarBand({
+  index,
+  width,
+  height,
+  animated
+}) {
+  const band = BANDS[index];
+  const table = BAND_TABLES[index];
+  // One full width of travel takes z / DRIFT seconds — nearer (smaller z) is
+  // faster, which is the whole parallax effect.
+  const drift = (0, _primitives.useLoop)(band.z / DRIFT * 1000, animated);
+  const translateX = drift.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, -width]
+  });
+  const dots = [];
+  for (let i = 0; i < band.count; i++) {
+    const x = table.xs[i] * width;
+    const y = table.ys[i] * height;
+    // Each star is drawn twice, one width apart, so the layer tiles seamlessly
+    // when the loop snaps back to 0.
+    for (let copy = 0; copy < 2; copy++) {
+      const cx = x + copy * width;
+      const key = `${i}-${copy}`;
+      if (band.halo > 0) {
+        dots.push(...haloDiscs(cx, y, band.dia, band.halo, band.color, key));
+      }
+      dots.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          position: "absolute",
+          left: cx - band.dia / 2,
+          top: y - band.dia / 2,
+          width: band.dia,
+          height: band.dia,
+          borderRadius: band.dia / 2,
+          backgroundColor: (0, _rng.withAlpha)(band.color, band.alpha)
+        }
+      }, key));
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    style: [{
+      position: "absolute",
+      left: 0,
+      top: 0,
+      width: width * 2,
+      height
+    }, {
+      transform: [{
+        translateX
+      }]
+    }],
+    pointerEvents: "none",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.RasterLayer, {
+      style: {
+        width: width * 2,
+        height
+      },
+      children: dots
+    })
+  });
+});
+const Starfield = exports.Starfield = /*#__PURE__*/(0, _react.memo)(function Starfield(props) {
+  // A single slow breath over the whole field. One node, and it's what stops
+  // the sky looking like a printed dot pattern now that the per-star twinkle
+  // from the Skia original isn't affordable.
+  const shimmer = (0, _primitives.usePulse)(5200, props.animated);
+  const opacity = shimmer.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0.82, 1]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: _absoluteFill.absoluteFill,
+    pointerEvents: "none",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Base, {
+      color: "#05060A"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.RadialGlow, {
+      size: props.width * 1.6,
+      color: "#1E3A8A",
+      alpha: 0.2,
+      rings: 8,
+      falloff: 2,
+      style: {
+        position: "absolute",
+        left: -props.width * 0.3,
+        top: -props.width * 0.9
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [_absoluteFill.absoluteFill, {
+        opacity
+      }],
+      pointerEvents: "none",
+      children: BANDS.map((_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(StarBand, {
+        index: i,
+        ...props
+      }, i))
+    })]
+  });
+});

package/lib/commonjs/ui/index.js

@@ -31,9 +31,7 @@ Object.keys(_index).forEach(function (key) {
     }
   });
 });
-var _toolTheme = require("./toolTheme.js");
-var _CyberpunkSectionButton = require("./console/CyberpunkSectionButton.js");
-var _index2 = require("./gameUI/index.js");
+var _index2 = require("./backgrounds/index.js");
 Object.keys(_index2).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -44,4 +42,18 @@ Object.keys(_index2).forEach(function (key) {
       return _index2[key];
     }
   });
+});
+var _toolTheme = require("./toolTheme.js");
+var _CyberpunkSectionButton = require("./console/CyberpunkSectionButton.js");
+var _index3 = require("./gameUI/index.js");
+Object.keys(_index3).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _index3[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _index3[key];
+    }
+  });
 });

package/lib/module/JsModal.js

@@ -693,6 +693,14 @@ const JsModalComponent = ({
       } else {
         // Floating mode entrance - simple fade without scale pop
         floatingScale.setValue(1); // Set scale to 1 directly, no animation
+        // Minimizing animated the window to the dock icon's corner. Put it
+        // back where it actually lives, or reopening leaves it parked
+        // off-screen — `initialModalState` only covers the dock's restore
+        // path, and the dial opens the same tool without one.
+        floatingPosition.setValue({
+          x: currentDimensionsRef.current.left,
+          y: currentDimensionsRef.current.top
+        });
         openAnimation = Animated.timing(visibilityProgress, {
           toValue: 1,
           duration: 200,
@@ -741,7 +749,7 @@ const JsModalComponent = ({
         // Stopped close animation
       }
     };
-  }, [visible, mode, visibilityProgress, bottomSheetTranslateY, floatingScale, externalAnimatedHeight]); // Removed initialHeight to prevent animation restarts on height changes
+  }, [visible, mode, visibilityProgress, bottomSheetTranslateY, floatingScale, floatingPosition, externalAnimatedHeight]); // Removed initialHeight to prevent animation restarts on height changes
 
   // ============================================================================
   // OPTIMIZED PAN RESPONDER: Bottom Sheet Resize
@@ -1111,22 +1119,18 @@ const JsModalComponent = ({
   // RENDER: Modal UI with transform-based animations
   // ============================================================================
 
-  // When not visible, render off-screen to keep children mounted (preserves state/listeners)
-  // This is similar to how React Navigation keeps screens mounted
-  if (!visible) {
-    return /*#__PURE__*/_jsx(View, {
-      style: styles.hiddenContainer,
-      pointerEvents: "none",
-      accessibilityElementsHidden: true,
-      importantForAccessibility: "no-hide-descendants",
-      children: children
-    });
-  }
+  // When not visible the SAME tree is rendered, just parked off-screen. It has
+  // to be the same tree: React reconciles by position, so a separate "hidden"
+  // branch would unmount and rebuild every child on each minimize AND each
+  // restore — which is the whole cost minimizing is supposed to avoid.
 
   // Render floating mode
   if (mode === "floating") {
     return /*#__PURE__*/_jsxs(Animated.View, {
       nativeID: "jsmodal-root",
+      pointerEvents: visible ? "auto" : "none",
+      accessibilityElementsHidden: !visible,
+      importantForAccessibility: visible ? "auto" : "no-hide-descendants",
       style: [styles.floatingModal, {
         width: dimensions.width,
         // Use state dimensions for real-time updates
@@ -1140,7 +1144,7 @@ const JsModalComponent = ({
         ...(zIndex !== undefined && {
           zIndex
         })
-      }, (isDragging || isResizing) && styles.floatingModalDragging, customStyles.container],
+      }, (isDragging || isResizing) && styles.floatingModalDragging, customStyles.container, !visible && styles.parkedOffscreen],
       children: [/*#__PURE__*/_jsx(DraggableHeader, {
         position: floatingPosition,
         onDragStart: handleFloatingDragStart,
@@ -1237,10 +1241,16 @@ const JsModalComponent = ({
 
   // Render bottom sheet mode with proper height animation
   return /*#__PURE__*/_jsx(View, {
-    style: [styles.fullScreenContainer, zIndex !== undefined && {
+    style: [
+    // Same box either way — parking it off-screen instead of resizing it
+    // keeps the sheet's layout intact, so coming back is a translate and
+    // not a full relayout.
+    visible ? styles.fullScreenContainer : styles.parkedFullScreen, visible && zIndex !== undefined && {
       zIndex
     }],
-    pointerEvents: "box-none",
+    pointerEvents: visible ? "box-none" : "none",
+    accessibilityElementsHidden: !visible,
+    importantForAccessibility: visible ? "auto" : "no-hide-descendants",
     children: /*#__PURE__*/_jsx(Animated.View, {
       nativeID: "jsmodal-root",
       style: [styles.bottomSheetWrapper, {
@@ -1336,10 +1346,23 @@ const styles = StyleSheet.create({
     shadowRadius: 12,
     elevation: 20
   },
-  hiddenContainer: {
+  /** Off-screen park for a minimized floating modal — same box, moved away. */
+  parkedOffscreen: {
+    left: -9999,
+    top: -9999,
+    opacity: 0
+  },
+  /**
+   * Off-screen park for a minimized bottom sheet. Screen-sized on purpose:
+   * `fullScreenContainer` is an absolute fill, and shrinking it here would
+   * relayout the whole sheet on every minimize/restore.
+   */
+  parkedFullScreen: {
     position: "absolute",
     left: -9999,
     top: -9999,
+    width: SCREEN.width,
+    height: SCREEN.height,
     opacity: 0
   },
   floatingModal: {

package/lib/module/dataViewer/JsonStringNotice.js

@@ -0,0 +1,54 @@
+"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
+  }
+});

package/lib/module/dataViewer/ThemedSplitView.js

@@ -14,6 +14,10 @@ import { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } fro
 import { View, Text, FlatList, StyleSheet, TouchableOpacity } from "react-native";
 import { computeLineDiff, DiffType } from "./lineDiff.js";
 import { DiffSummary } from "./DiffSummary.js";
+import { TimestampDeltaBar } from "./TimestampDeltaBar.js";
+import { describeTimestampDeltas } from "./timestampDiff.js";
+import { JsonStringNotice } from "./JsonStringNotice.js";
+import { decodeJsonStringPair } from "./jsonStringValue.js";
 
 /** Rendering options (the shape storage's DiffOptionsPanel edits). */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -42,7 +46,12 @@ export function ThemedSplitView({
     showDiffOnly: options.showDiffOnly,
     contextLines: options.contextLines
   }), [options.compareMethod, options.disableWordDiff, options.showDiffOnly, options.contextLines]);
-  const lineDiffs = useMemo(() => computeLineDiff(oldValue, newValue, diffComputeOptions), [oldValue, newValue, diffComputeOptions]);
+
+  // A JSON-encoded string is diffed decoded, or its one real change reads as
+  // one unreadable escaped line. Everything downstream — the line diff, the
+  // timestamp scan — works off the decoded pair.
+  const pair = useMemo(() => decodeJsonStringPair(oldValue, newValue), [oldValue, newValue]);
+  const lineDiffs = useMemo(() => computeLineDiff(pair.left, pair.right, diffComputeOptions), [pair, diffComputeOptions]);
 
   // One pass for the summary instead of three .filter() calls per render.
   const summary = useMemo(() => {
@@ -59,6 +68,10 @@ export function ThemedSplitView({
     };
   }, [lineDiffs]);
 
+  // Detection walks at most one object level, but it runs on every render of
+  // a diff that may hold thousands of lines — keep it on the value identities.
+  const timestampDeltas = useMemo(() => describeTimestampDeltas(pair.left, pair.right), [pair]);
+
   // Auto-collapse runs of unchanged lines that aren't near a change. Keeps
   // CONTEXT_LINES on either side of every change visible (GitHub-style), folds
   // the rest into a tappable header.
@@ -147,6 +160,12 @@ export function ThemedSplitView({
       removed: summary.removed,
       modified: summary.modified,
       theme: theme
+    }), /*#__PURE__*/_jsx(JsonStringNotice, {
+      visible: pair.decoded,
+      theme: theme
+    }), /*#__PURE__*/_jsx(TimestampDeltaBar, {
+      deltas: timestampDeltas,
+      theme: theme
     }), lineDiffs.length === 0 ? /*#__PURE__*/_jsx(View, {
       style: dynamicStyles.emptyState,
       children: /*#__PURE__*/_jsx(Text, {

package/lib/module/dataViewer/TimestampDeltaBar.js

@@ -0,0 +1,91 @@
+"use strict";
+
+/**
+ * TimestampDeltaBar — reads out the timestamp pairs in a diff.
+ *
+ * Sits under the diff summary and translates `1787085897165 → 1787012175875`
+ * into "20h 29m earlier", with both instants spelled out. The raw values stay
+ * on the rows below: this annotates the diff, it never replaces it.
+ *
+ * Renders nothing when no side of the diff is confidently a timestamp — see
+ * timestampDiff.ts for how narrow "confidently" is.
+ */
+import { memo } from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const TimestampDeltaBar = /*#__PURE__*/memo(function TimestampDeltaBar({
+  deltas,
+  theme
+}) {
+  if (deltas.length === 0) return null;
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.container, {
+      backgroundColor: theme.summaryBackground,
+      borderTopColor: theme.borderColor
+    }],
+    children: deltas.map(delta => /*#__PURE__*/_jsxs(View, {
+      style: styles.row,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.glyph, {
+          color: theme.summaryModifiedText
+        }],
+        children: "\u25F7"
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.text,
+        children: [/*#__PURE__*/_jsxs(Text, {
+          style: styles.headline,
+          children: [delta.path ? /*#__PURE__*/_jsxs(Text, {
+            style: [styles.path, {
+              color: theme.lineNumberText
+            }],
+            children: [delta.path, " "]
+          }) : null, /*#__PURE__*/_jsx(Text, {
+            style: {
+              color: theme.summaryModifiedText
+            },
+            children: delta.deltaLabel
+          })]
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: [styles.instants, {
+            color: theme.lineNumberText
+          }],
+          children: [delta.fromLabel, " \u2192 ", delta.toLabel]
+        })]
+      })]
+    }, delta.path ?? "__value__"))
+  });
+});
+const styles = StyleSheet.create({
+  container: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    paddingHorizontal: 10,
+    paddingVertical: 7,
+    gap: 6
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 7
+  },
+  glyph: {
+    fontSize: 12,
+    lineHeight: 15
+  },
+  text: {
+    flex: 1,
+    minWidth: 0
+  },
+  headline: {
+    fontSize: 12,
+    fontWeight: "600",
+    lineHeight: 15
+  },
+  path: {
+    fontWeight: "400"
+  },
+  instants: {
+    fontSize: 11,
+    marginTop: 1,
+    fontVariant: ["tabular-nums"]
+  }
+});

package/lib/module/dataViewer/index.js

@@ -33,6 +33,10 @@ export { DataTreeActionDock } from "./DataTreeActionDock.js";
 // Diff viewer components
 export { SplitDiffViewer } from "./SplitDiffViewer.js";
 export { DiffSummary } from "./DiffSummary.js";
+export { TimestampDeltaBar } from "./TimestampDeltaBar.js";
+export { JsonStringNotice } from "./JsonStringNotice.js";
+export { decodeJsonStringPair, parseJsonContainer } from "./jsonStringValue.js";
+export { detectTimestamp, describeTimestampDeltas, formatDuration, formatInstant } from "./timestampDiff.js";
 // Diff utilities and themes
 export { computeLineDiff, DiffType, ABSENT_VALUE, isAbsent } from "./lineDiff.js";
 export { diffThemes, gitClassicTheme, devToolsDefaultTheme } from "./diffThemes.js";

package/lib/module/dataViewer/jsonStringValue.js

@@ -0,0 +1,89 @@
+"use strict";
+
+/**
+ * JSON-encoded string values in diffs.
+ *
+ * Every device storage backend stores STRINGS, so apps write
+ * `JSON.stringify(["pikachu"])` and the stored value is the six-character
+ * string `["pikachu"]`. Rendering that through the diff's own
+ * `JSON.stringify` escapes it a second time and you get `"[\"pikachu\"]"` on
+ * one unreadable line — and a real change (one entry added to a list of
+ * twenty) becomes a single modified line you can't read.
+ *
+ * So: when a side is a JSON-encoded OBJECT OR ARRAY, diff the decoded value
+ * and say so on screen. The label is the whole contract — the store really
+ * does hold a string, and a viewer that quietly showed an array without
+ * mentioning it would be lying about the shape of the data.
+ *
+ * Scalars are deliberately NOT decoded. Turning the stored string `"5"` into
+ * the number 5, or `"true"` into a boolean, changes the apparent type while
+ * adding no readability — the exact misrepresentation this is trying to
+ * avoid.
+ */
+import { isAbsent } from "./lineDiff.js";
+
+/**
+ * Parse a string that encodes a JSON object or array. Returns a wrapper so a
+ * successfully decoded `null`-ish payload is still distinguishable from "not
+ * decodable" (the prefix check makes that unreachable today, but callers
+ * shouldn't have to know that).
+ */
+export function parseJsonContainer(value) {
+  if (typeof value !== "string") return null;
+  const trimmed = value.trim();
+  // Cheap gate before JSON.parse: only containers qualify, and this keeps a
+  // try/catch off the path for every ordinary string in a diff.
+  if (!trimmed.startsWith("{") && !trimmed.startsWith("[")) return null;
+  try {
+    const parsed = JSON.parse(trimmed);
+    if (typeof parsed !== "object" || parsed === null) return null;
+    return {
+      value: parsed
+    };
+  } catch {
+    return null;
+  }
+}
+/** A side that carries no value at all — an add or a delete, not a change. */
+function isMissing(value) {
+  return isAbsent(value) || value === undefined || value === null;
+}
+
+/**
+ * Decode both sides of a diff when they are JSON-encoded containers.
+ *
+ * One side alone is decoded ONLY when the other side is missing entirely
+ * (a key being added or removed). A JSON string on one side and an ordinary
+ * value on the other is a change of shape, and decoding just one half would
+ * present it as something it isn't.
+ */
+export function decodeJsonStringPair(left, right) {
+  const decodedLeft = parseJsonContainer(left);
+  const decodedRight = parseJsonContainer(right);
+  if (decodedLeft && decodedRight) {
+    return {
+      left: decodedLeft.value,
+      right: decodedRight.value,
+      decoded: true
+    };
+  }
+  if (decodedLeft && isMissing(right)) {
+    return {
+      left: decodedLeft.value,
+      right,
+      decoded: true
+    };
+  }
+  if (decodedRight && isMissing(left)) {
+    return {
+      left,
+      right: decodedRight.value,
+      decoded: true
+    };
+  }
+  return {
+    left,
+    right,
+    decoded: false
+  };
+}