@buoy-gg/shared-ui 7.0.34 → 7.0.36

package/lib/commonjs/sync/valuePath.js

@@ -0,0 +1,337 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parsePath = parsePath;
+exports.patchFromPath = patchFromPath;
+exports.readPath = readPath;
+var _keyedArrays = require("./keyedArrays.js");
+/**
+ * Addressing a single value inside cached data or a store — one implementation,
+ * shared by every adapter that reads or merges.
+ *
+ * WHY. The most common measured write failure is not a wrong value, it is a
+ * wrong DEPTH: ten of eleven `query` failures on the bench sent `{name: "x"}`
+ * for a payload shaped `{item: {name}}`. That is not a missing instruction — the
+ * system prompt says, verbatim, "if the value is {item:{name}} send
+ * {"item":{"name":"test123"}}, never {name}" — and models that had just called
+ * `getQueryData` still flattened it. The rule is being read past, not missed.
+ *
+ * So stop asking. `path: "item.name", value: "x"` has no depth to get wrong:
+ * there is exactly one way to write it and the adapter builds the nested patch.
+ * The same syntax on the READ side returns one slice instead of a payload that
+ * gets cut off at the engine's 24,000-character cap, which is the other half of
+ * the same problem — a caller cannot write a shape it was never able to see.
+ *
+ * Lists are addressed by IDENTITY, never by position. `lines[0]` is resolved to
+ * the id of whatever is at index 0 right now and rewritten as an id-addressed
+ * edit, because between the read and the write an item may have been removed and
+ * index 0 is then a different row. A list whose items carry no stable id is
+ * refused rather than guessed at — see keyedArrays.ts for why silently picking a
+ * row is the failure mode that loses data.
+ */
+
+const isPlainObject = v => typeof v === "object" && v !== null && !Array.isArray(v);
+/**
+ * Where a field of this name actually lives, as a dotted path — breadth-first,
+ * capped so a big payload cannot stall the walk.
+ *
+ * A wrong `path` is not the same mistake as a wrong depth, and `path` does not
+ * prevent it. Measured on TWO cases in one run: grok wrote
+ * `path: "item.name"` against the flat PokéAPI payload `{name, id, stats, …}`,
+ * having generalised the shape from a different screen it had seen. The value it
+ * wanted was at `name`, one segment, right there. A refusal that says so is a
+ * one-turn recovery; a refusal that only lists the available fields makes the
+ * caller re-derive it.
+ */
+function findFieldPath(obj, key, maxNodes = 2000) {
+  const queue = [{
+    node: obj,
+    path: ""
+  }];
+  let seen = 0;
+  while (queue.length && seen < maxNodes) {
+    const {
+      node,
+      path
+    } = queue.shift();
+    seen++;
+    if (Array.isArray(node)) {
+      node.slice(0, 20).forEach((v, i) => queue.push({
+        node: v,
+        path: `${path}[${i}]`
+      }));
+    } else if (isPlainObject(node)) {
+      for (const [k, v] of Object.entries(node)) {
+        const p = path ? `${path}.${k}` : k;
+        if (k === key) return p;
+        if (isPlainObject(v) || Array.isArray(v)) queue.push({
+          node: v,
+          path: p
+        });
+      }
+    }
+  }
+  return undefined;
+}
+
+/**
+ * "No field X here" plus, when the field exists somewhere else, the path that
+ * would have worked. `leaf` is the segment the caller was ultimately after.
+ */
+function missingFieldError(root, at, key, available, leaf) {
+  const elsewhere = findFieldPath(root, leaf ?? key);
+  const has = available.slice(0, 12).join(", ") || "(no fields)";
+  return elsewhere ? `No field "${key}" at "${at}" — did you mean path "${elsewhere}"? "${at}" has: ${has}.` : `No field "${key}" at "${at}". It has: ${has}.`;
+}
+
+/** Read a dotted field path inside one list item. */
+function fieldOf(item, field) {
+  let cur = item;
+  for (const seg of field.split(".")) {
+    if (!isPlainObject(cur)) return undefined;
+    cur = cur[seg];
+  }
+  return cur;
+}
+
+/**
+ * `lines[0].addonIds`, `item.name`, `results[name=pikachu].url` → segments.
+ *
+ * Returns undefined for syntax it does not understand rather than doing
+ * something approximate with it.
+ */
+function parsePath(path) {
+  if (!path.trim()) return undefined;
+  const out = [];
+  // Walk the string rather than splitting on ".", because a [field=value]
+  // selector may legitimately contain a dot ("results[url=a.b/c]").
+  let i = 0;
+  while (i < path.length) {
+    if (path[i] === ".") {
+      i++;
+      continue;
+    }
+    if (path[i] === "[") {
+      const end = path.indexOf("]", i);
+      if (end === -1) return undefined;
+      const inner = path.slice(i + 1, end);
+      if (/^\d+$/.test(inner)) out.push({
+        kind: "index",
+        index: Number(inner)
+      });else {
+        const eq = inner.indexOf("=");
+        if (eq <= 0) return undefined;
+        out.push({
+          kind: "match",
+          field: inner.slice(0, eq).trim(),
+          value: inner.slice(eq + 1).trim()
+        });
+      }
+      i = end + 1;
+      continue;
+    }
+    let j = i;
+    while (j < path.length && path[j] !== "." && path[j] !== "[") j++;
+    const key = path.slice(i, j);
+    if (!key) return undefined;
+    out.push({
+      kind: "key",
+      key
+    });
+    i = j;
+  }
+  return out.length ? out : undefined;
+}
+
+/** Read the value at `path`, or undefined if any step of it does not exist. */
+function readPath(value, path) {
+  const segs = parsePath(path);
+  if (!segs) return {
+    ok: false,
+    error: `Could not read the path "${path}". Use dotted keys with optional [0] or [field=value], like "item.name" or "lines[lineId=seed-1].qty".`
+  };
+  let cur = value;
+  const walked = [];
+  for (const seg of segs) {
+    if (cur === null || cur === undefined) {
+      return {
+        ok: false,
+        error: `"${walked.join(".") || "(root)"}" is ${cur === null ? "null" : "not set"}, so there is nothing at "${path}".`
+      };
+    }
+    if (seg.kind === "key") {
+      if (!isPlainObject(cur)) return {
+        ok: false,
+        error: `"${walked.join(".") || "(root)"}" is not an object, so it has no field "${seg.key}".`
+      };
+      if (!(seg.key in cur)) {
+        const leafSeg = segs[segs.length - 1];
+        return {
+          ok: false,
+          error: missingFieldError(value, walked.join(".") || "(root)", seg.key, Object.keys(cur), leafSeg?.kind === "key" ? leafSeg.key : undefined)
+        };
+      }
+      cur = cur[seg.key];
+      walked.push(seg.key);
+    } else if (seg.kind === "index") {
+      if (!Array.isArray(cur)) return {
+        ok: false,
+        error: `"${walked.join(".") || "(root)"}" is not a list, so [${seg.index}] means nothing.`
+      };
+      cur = cur[seg.index];
+      walked.push(`[${seg.index}]`);
+    } else {
+      if (!Array.isArray(cur)) return {
+        ok: false,
+        error: `"${walked.join(".") || "(root)"}" is not a list, so [${seg.field}=${seg.value}] means nothing.`
+      };
+      const hit = cur.find(el => isPlainObject(el) && String(fieldOf(el, seg.field)) === seg.value);
+      if (hit === undefined) return {
+        ok: false,
+        error: `No item with ${seg.field}="${seg.value}" in "${walked.join(".") || "(root)"}".`
+      };
+      cur = hit;
+      walked.push(`[${seg.field}=${seg.value}]`);
+    }
+  }
+  return {
+    ok: true,
+    value: cur
+  };
+}
+
+/**
+ * Build the merge patch that sets `path` to `value`, against the data as it is
+ * now.
+ *
+ * The result is an ordinary merge patch, so it goes through the SAME typed-edit
+ * guard as a hand-written one and gains no new powers — `path` is a way to say
+ * the same thing without being able to get the depth wrong, not a way around
+ * the rules. A list step becomes the id-addressed form, so the write stays
+ * proof against a truncated read.
+ */
+function patchFromPath(current, path, value) {
+  const segs = parsePath(path);
+  if (!segs) return {
+    ok: false,
+    error: `Could not read the path "${path}". Use dotted keys with optional [0] or [field=value], like "item.name" or "lines[lineId=seed-1].qty".`
+  };
+  if (segs[0]?.kind !== "key") return {
+    ok: false,
+    error: `A path must start with a field name, not a list index — "${path}" does not say which list.`
+  };
+  const build = (node, at) => {
+    if (at >= segs.length) return {
+      ok: true,
+      patch: value
+    };
+    const seg = segs[at];
+    if (seg.kind === "key") {
+      // A field that does not exist is left for the typed-edit guard, which owns
+      // that decision — EXCEPT when there are more segments to walk, because
+      // then the caller is describing a shape that is not there at all and the
+      // guard's message ("no field named `item`") would not say where the value
+      // it wanted actually lives.
+      if (isPlainObject(node) && !(seg.key in node) && at + 1 < segs.length) {
+        const leafSeg = segs[segs.length - 1];
+        return {
+          ok: false,
+          error: missingFieldError(current, pathUpTo(segs, at), seg.key, Object.keys(node), leafSeg?.kind === "key" ? leafSeg.key : undefined)
+        };
+      }
+      const child = isPlainObject(node) ? node[seg.key] : undefined;
+      const inner = build(child, at + 1);
+      return inner.ok ? {
+        ok: true,
+        patch: {
+          [seg.key]: inner.patch
+        }
+      } : inner;
+    }
+    if (!Array.isArray(node)) {
+      return {
+        ok: false,
+        error: `"${pathUpTo(segs, at)}" is not a list, so "${path}" cannot be resolved. Read it first — \`shape\` on the read says what each field holds.`
+      };
+    }
+    const index = seg.kind === "index" ? seg.index : node.findIndex(el => isPlainObject(el) && String(fieldOf(el, seg.field)) === seg.value);
+    const item = index >= 0 ? node[index] : undefined;
+    const missing = seg.kind === "index" ? index < 0 || index >= node.length : index < 0;
+    if (missing) {
+      return {
+        ok: false,
+        error: seg.kind === "index" ? `"${pathUpTo(segs, at)}" has ${node.length} item(s), so there is nothing at [${seg.index}].` : `No item with ${seg.field}="${seg.value}" in "${pathUpTo(segs, at)}".`
+      };
+    }
+    /**
+     * A list of PRIMITIVES, addressed by index — `tags[0]` on
+     * `["alpha","beta"]`.
+     *
+     * The guard below used to be `!isPlainObject(item)`, which folded this in
+     * with a genuinely out-of-range index and answered `"tags" has 2 item(s),
+     * so there is nothing at [0]` — a sentence that contradicts itself, for the
+     * commonest index there is. A model reading the data, seeing two items and
+     * being told [0] and [1] are both empty has nowhere left to go.
+     *
+     * There is nothing to descend into on a string, so the index IS the leaf:
+     * rebuild the list with that one element replaced, exactly as the no-stable-id
+     * branch below does. Anything deeper genuinely cannot be resolved, and says so.
+     */
+    if (!isPlainObject(item)) {
+      if (at < segs.length - 1) {
+        return {
+          ok: false,
+          error: `"${pathUpTo(segs, at)}[${seg.kind === "index" ? seg.index : `${seg.field}=${seg.value}`}]" holds ${item === null ? "null" : typeof item}, not an object, so "${path}" cannot go any deeper. Set the item itself.`
+        };
+      }
+      const replaced = node.slice();
+      replaced[index] = value;
+      return {
+        ok: true,
+        patch: replaced
+      };
+    }
+    const inner = build(item, at + 1);
+    if (!inner.ok) return inner;
+    const idField = (0, _keyedArrays.identityField)(node);
+    // Positions move; ids do not. Prefer the addressed form whichever way the
+    // caller named the row.
+    if (idField) return {
+      ok: true,
+      patch: {
+        [String(item[idField])]: inner.patch
+      }
+    };
+
+    // No stable id — a Pokémon's `stats` are `{stat: {name}, base_stat}`, with
+    // nothing flat and unique on the item itself, and that is an ordinary shape
+    // rather than a broken one. Rebuild the whole list here instead of refusing.
+    //
+    // This is safe in a way the SAME array coming from a model is not: we are
+    // holding the current list in memory, so nothing is being reconstructed from
+    // a truncated read and no row can be dropped by omission. The caller still
+    // only named one value. What it cannot be is proof against the list changing
+    // between this call and the write, which addressing by id would be — so the
+    // id form stays preferred wherever one exists.
+    const next = node.slice();
+    next[index] = isPlainObject(inner.patch) ? {
+      ...item,
+      ...inner.patch
+    } : inner.patch;
+    return {
+      ok: true,
+      patch: next
+    };
+  };
+  const built = build(current, 0);
+  if (!built.ok) return built;
+  return {
+    ok: true,
+    patch: built.patch
+  };
+}
+function pathUpTo(segs, at) {
+  return segs.slice(0, at).map(s => s.kind === "key" ? s.key : s.kind === "index" ? `[${s.index}]` : `[${s.field}=${s.value}]`).join(".").replace(/\.\[/g, "[") || "(root)";
+}

package/lib/commonjs/sync/valueShape.js

@@ -0,0 +1,161 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.listShapes = listShapes;
+exports.shapeOf = shapeOf;
+exports.shapeSummary = shapeSummary;
+exports.shapesWereTruncated = shapesWereTruncated;
+exports.unshapedLists = unshapedLists;
+/**
+ * A compact type sketch of a runtime value — one implementation, shared by every
+ * adapter that hands data to a model.
+ *
+ * WHY. A model cannot write a well-formed item into a list it has never seen the
+ * shape of, and we were not showing it. Measured on `cart/bag-still-zustand`: the
+ * rendered prompt is 83,000 characters and the words `lineId`, `itemId`,
+ * `sizeId`, `addonIds` and `unitPrice` appear in it ZERO times. Every model
+ * "failing" that case invented a line shape because inventing was the only move
+ * available. The zustand typed-edit guard would have caught the invention — but
+ * only on a list that already holds an item, since it builds its template from
+ * `list[0]`. On an EMPTY list there is no template, the guard has nothing to
+ * compare against, and the invented shape is written silently.
+ *
+ * So the sketch has two jobs, and the second is the one that pays:
+ *
+ *   1. Say what the items in a list look like, so an addition can match.
+ *   2. Say when NOTHING knows — an empty list's item shape is not merely
+ *      unread, it is unknowable from runtime state, and the honest answer is to
+ *      admit that rather than let a guess through unremarked.
+ *
+ * It is deliberately tiny. A sketch of a 120-line bag is the same size as a
+ * sketch of a 2-line one, so unlike the data it survives the engine's 24,000-
+ * character result cap — which is the whole point, because the cases where the
+ * model most needs the shape are exactly the ones where the data got cut off.
+ */
+
+const isPlainObject = v => typeof v === "object" && v !== null && !Array.isArray(v);
+
+/** Beyond this the sketch stops being cheaper to read than the data. */
+const MAX_DEPTH = 3;
+const MAX_KEYS = 24;
+/**
+ * Hard caps on `listShapes`. MAX_DEPTH bounds how DEEP it goes; nothing bounded
+ * how WIDE it went, and it walks every entry of every object at each permitted
+ * level. A store holding a few hundred keyed records therefore produced a
+ * "compact" sketch larger than the data it was standing in for — in a value
+ * that rides in every prompt. Depth is not a size budget.
+ */
+const MAX_LIST_PATHS = 40;
+const MAX_ENTRIES_VISITED = 600;
+
+/**
+ * `{lineId: string, qty: number, addonIds: string[]}` — a one-line type for a
+ * value, built from the value itself.
+ *
+ * An array is described by its FIRST item, because a list whose items disagree
+ * is a list nothing can safely add to and the guard will say so anyway. An empty
+ * array is `unknown[]`, which is the true answer and the one that matters: it
+ * tells a reader that adding to this list is unchecked.
+ */
+function shapeOf(value, depth = 0) {
+  if (value === null) return "null";
+  if (Array.isArray(value)) {
+    if (!value.length) return "unknown[]";
+    if (depth >= MAX_DEPTH) return "…[]";
+    const inner = shapeOf(value[0], depth + 1);
+    return inner.includes(" ") || inner.endsWith("]") ? `(${inner})[]` : `${inner}[]`;
+  }
+  if (isPlainObject(value)) {
+    if (depth >= MAX_DEPTH) return "{…}";
+    const keys = Object.keys(value);
+    const shown = keys.slice(0, MAX_KEYS);
+    const body = shown.map(k => `${k}: ${shapeOf(value[k], depth + 1)}`).join(", ");
+    const more = keys.length > shown.length ? `, +${keys.length - shown.length} more` : "";
+    return `{${body}${more}}`;
+  }
+  const t = typeof value;
+  return t === "undefined" ? "undefined" : t === "function" ? "function" : t;
+}
+/**
+ * Every list inside a value, with the shape of what goes in it.
+ *
+ * This is what a caller needs before adding to a list, and it is the part that
+ * cannot be recovered from a truncated read of the data itself.
+ *
+ * A list with `item: undefined` is the warning case: it is empty, so its item
+ * shape exists nowhere in the running app — not in the store, not in the
+ * persisted copy, not in this sketch. Anything added to it goes in unchecked.
+ */
+function listShapes(value, path = "", out = [], depth = 0, budget = {
+  visited: 0
+}) {
+  if (depth > MAX_DEPTH) return out;
+  // Two independent stops: enough lists described, or enough of the value
+  // walked. The second is what a wide-but-shallow store hits.
+  if (out.length >= MAX_LIST_PATHS || budget.visited >= MAX_ENTRIES_VISITED) return out;
+  if (Array.isArray(value)) {
+    const first = value[0];
+    out.push({
+      path: path || "(root)",
+      length: value.length,
+      ...(value.length ? {
+        item: shapeOf(first)
+      } : {})
+    });
+    // One level into the items, so `lines[].addonIds` is reachable too.
+    if (value.length && isPlainObject(first)) {
+      for (const [k, v] of Object.entries(first)) {
+        if (++budget.visited >= MAX_ENTRIES_VISITED) break;
+        listShapes(v, path ? `${path}[].${k}` : `[].${k}`, out, depth + 1, budget);
+      }
+    }
+    return out;
+  }
+  if (isPlainObject(value)) {
+    for (const [k, v] of Object.entries(value)) {
+      if (++budget.visited >= MAX_ENTRIES_VISITED) break;
+      listShapes(v, path ? `${path}.${k}` : k, out, depth + 1, budget);
+    }
+  }
+  return out;
+}
+
+/** True when a sketch stopped early, so a caller can say so rather than imply completeness. */
+function shapesWereTruncated(value) {
+  const budget = {
+    visited: 0
+  };
+  const out = listShapes(value, "", [], 0, budget);
+  return out.length >= MAX_LIST_PATHS || budget.visited >= MAX_ENTRIES_VISITED;
+}
+
+/**
+ * The lists in a value that a caller could add to WITHOUT any way to know the
+ * item shape. Empty by definition on a healthy value; non-empty means a write
+ * into one of these paths cannot be checked by anything.
+ */
+function unshapedLists(value) {
+  return listShapes(value).filter(l => l.item === undefined).map(l => l.path);
+}
+
+/**
+ * The sketch an adapter attaches to a read: the value's own type, plus the item
+ * type of every list in it.
+ *
+ * Returns undefined when there is nothing worth saying (a scalar, or an object
+ * holding no lists) so adapters can spread it and add no noise.
+ */
+function shapeSummary(value) {
+  if (value === undefined) return undefined;
+  const lists = listShapes(value);
+  const shape = shapeOf(value);
+  if (!lists.length && !isPlainObject(value) && !Array.isArray(value)) return undefined;
+  return lists.length ? {
+    shape,
+    lists
+  } : {
+    shape
+  };
+}

package/lib/commonjs/ui/components/ChangeRow.js

@@ -10,6 +10,7 @@ var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
 var _CompactRow = require("./CompactRow.js");
 var _index = require("../../icons/index.js");
 var _RelativeTime = require("../../utils/time/RelativeTime.js");
+var _fonts = require("../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -102,7 +103,7 @@ const styles = _reactNative.StyleSheet.create({
   badgeText: {
     fontSize: 11,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   },
   iconBadge: {
     paddingHorizontal: 4

package/lib/commonjs/ui/components/ClipboardHintBanner.js

@@ -7,6 +7,7 @@ exports.ClipboardHintBanner = void 0;
 var _react = require("react");
 var _reactNative = require("react-native");
 var _index = require("../gameUI/index.js");
+var _fonts = require("../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * ClipboardHintBanner - A hint banner that shows users how to fix iOS Simulator clipboard sync
@@ -129,7 +130,7 @@ const styles = _reactNative.StyleSheet.create({
     textAlign: "center"
   },
   menuPath: {
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     fontSize: 12,
     color: _index.gameUIColors.primary,
     fontWeight: "600"

package/lib/commonjs/ui/components/CompactRow.js

@@ -7,6 +7,7 @@ exports.CompactRow = CompactRow;
 var _reactNative = require("react-native");
 var _index = require("../../icons/index.js");
 var _nightTheme = require("../night/nightTheme.js");
+var _fonts = require("../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function CompactRow({
   statusDotColor,
@@ -225,7 +226,7 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 12
   },
   queryHash: {
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     fontSize: 12,
     color: _nightTheme.night.color.text,
     lineHeight: 16
@@ -269,6 +270,6 @@ const styles = _reactNative.StyleSheet.create({
   bottomRightText: {
     fontSize: 9,
     color: _nightTheme.night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   }
 });

package/lib/commonjs/ui/components/DataInspector.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _index = require("../../icons/index.js");
 var _index2 = require("../gameUI/index.js");
 var _CopyButton = require("./CopyButton.js");
+var _fonts = require("../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function DataInspector({
   data,
@@ -268,14 +269,14 @@ const styles = _reactNative.StyleSheet.create({
     maxHeight: 300
   },
   codeText: {
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     fontSize: 11,
     color: _index2.gameUIColors.text,
     padding: 12,
     lineHeight: 16
   },
   editor: {
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     fontSize: 11,
     color: _index2.gameUIColors.text,
     padding: 12,

package/lib/commonjs/ui/components/DetailView.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _index = require("../gameUI/index.js");
 var _ModalHeader = require("./ModalHeader.js");
 var _CopyButton = require("./CopyButton.js");
+var _fonts = require("../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function DetailView({
   children,
@@ -297,7 +298,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   dataText: {
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     color: _index.gameUIColors.text
   },
   statusBar: {

package/lib/commonjs/ui/components/DynamicFilterView.js

@@ -12,6 +12,7 @@ var _FilterComponents = require("./FilterComponents.js");
 var _useFilterManager = require("../../hooks/useFilterManager.js");
 var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
 var _nightTheme = require("../night/nightTheme.js");
+var _fonts = require("../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function DynamicFilterView({
   sections = [],
@@ -493,7 +494,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 14,
     fontWeight: "700",
     color: _nightTheme.night.color.text,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     marginTop: 3,
     marginBottom: 1,
     textShadowColor: "rgba(0, 0, 0, 0.2)",
@@ -507,7 +508,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 11,
     fontWeight: "500",
     color: _nightTheme.night.color.textTertiary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     marginTop: 3,
     marginBottom: 1
   },
@@ -551,7 +552,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 13,
     fontWeight: "700",
     letterSpacing: 0.3,
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   },
   activeFiltersSection: {
     backgroundColor: _nightTheme.night.color.surface,
@@ -690,7 +691,7 @@ const styles = _reactNative.StyleSheet.create({
     flex: 1,
     fontSize: 11,
     color: _nightTheme.night.color.text,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     marginRight: 8
   },
   howItWorksSection: {
@@ -709,7 +710,7 @@ const styles = _reactNative.StyleSheet.create({
     marginBottom: 12,
     marginTop: 8,
     paddingHorizontal: 16,
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   },
   examplesContainer: {
     paddingTop: 8,
@@ -722,14 +723,14 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 10,
     fontWeight: "600",
     color: _nightTheme.night.color.textTertiary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     letterSpacing: 0.5,
     marginBottom: 6
   },
   exampleItem: {
     fontSize: 10,
     color: _nightTheme.night.color.textTertiary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     lineHeight: 16
   },
   previewSection: {