@buoy-gg/floating-tools-core 7.0.33 → 7.0.35

package/lib/commonjs/icons/icon-primitives.native.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.IconTriangle = exports.IconText = exports.IconSmoothArc = exports.IconSemicircle = exports.IconRect = exports.IconLine = exports.IconContainer = exports.IconCircle = exports.IconArc = void 0;
 var _react = require("react");
 var _reactNative = require("react-native");
+var _iconGlow = require("./iconGlow.js");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Icon Primitives - MOBILE (React Native)
@@ -24,15 +25,16 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 const IconContainer = ({
   size,
-  children
+  children,
+  style
 }) => {
-  const style = {
+  const box = {
     position: 'relative',
     width: size,
     height: size
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: style,
+    style: [box, style],
     children: children
   });
 };
@@ -84,8 +86,8 @@ const IconCircleImpl = ({
         width: 0,
         height: 0
       },
-      shadowOpacity: 0.9,
-      shadowRadius: glowRadius * 0.8
+      shadowOpacity: _iconGlow.ICON_GLOW.filledShadowOpacity,
+      shadowRadius: glowRadius * _iconGlow.ICON_GLOW.filledRadiusScale
     })
   };
 
@@ -107,15 +109,15 @@ const IconCircleImpl = ({
           // Matches icon bg - enables shadow
           borderWidth: strokeW,
           borderColor: glowColor,
-          opacity: 0.5,
+          opacity: _iconGlow.ICON_GLOW.ringLayerOpacity,
           transform: transforms.length > 0 ? transforms : undefined,
           shadowColor: glowColor,
           shadowOffset: {
             width: 0,
             height: 0
           },
-          shadowOpacity: 0.9,
-          shadowRadius: 8
+          shadowOpacity: _iconGlow.ICON_GLOW.ringShadowOpacity,
+          shadowRadius: _iconGlow.ICON_GLOW.ringShadowRadius
         }
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: style
@@ -203,8 +205,8 @@ const IconRectImpl = ({
         width: 0,
         height: 0
       },
-      shadowOpacity: 0.9,
-      shadowRadius: glowRadius * 0.8
+      shadowOpacity: _iconGlow.ICON_GLOW.filledShadowOpacity,
+      shadowRadius: glowRadius * _iconGlow.ICON_GLOW.filledRadiusScale
     })
   };
 
@@ -221,17 +223,17 @@ const IconRectImpl = ({
           width: width + glowExpand * 2,
           height: height + glowExpand * 2,
           borderRadius: borderRadius + glowExpand,
-          borderWidth: strokeW * 2,
+          borderWidth: strokeW * _iconGlow.ICON_GLOW.rectBorderScale,
           borderColor: glowColor,
-          opacity: 0.4,
+          opacity: _iconGlow.ICON_GLOW.rectLayerOpacity,
           transform: transforms.length > 0 ? transforms : undefined,
           shadowColor: glowColor,
           shadowOffset: {
             width: 0,
             height: 0
           },
-          shadowOpacity: 0.8,
-          shadowRadius: strokeW * 4
+          shadowOpacity: _iconGlow.ICON_GLOW.rectShadowOpacity,
+          shadowRadius: strokeW * _iconGlow.ICON_GLOW.rectShadowRadiusScale
         }
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: style
@@ -414,14 +416,24 @@ const IconLineImpl = ({
       const segCenterX = (prev.x + pt.x) / 2;
       const segCenterY = (prev.y + pt.y) / 2;
 
-      // A capsule: rounded ends butt against the neighbouring segment's, so
-      // the joints read as a continuous stroke rather than a mitred polyline.
+      // A capsule per segment. Interior joints OVERLAP by half a stroke on each side (a
+      // capsule exactly segLength long shrinks to a blob when the segment is shorter than
+      // the stroke, and neighbouring round ends leave notches on the outside of a turn —
+      // the route-path icon rendered as dashes). The chain's two ends stay exactly at the
+      // authored endpoints so a curve is the same length as a straight line.
+      const extS = i > 1 ? strokeWidth / 2 : 0;
+      const extE = i < segments ? strokeWidth / 2 : 0;
+      const ux = segLength > 0 ? segDx / segLength : 0;
+      const uy = segLength > 0 ? segDy / segLength : 0;
+      const capLength = segLength + extS + extE;
+      const capCenterX = segCenterX + ux * (extE - extS) / 2;
+      const capCenterY = segCenterY + uy * (extE - extS) / 2;
       elements.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: {
           position: 'absolute',
-          left: segCenterX - segLength / 2,
-          top: segCenterY - strokeWidth / 2,
-          width: segLength,
+          left: capCenterX - capLength / 2,
+          top: capCenterY - strokeWidth / 2,
+          width: capLength,
           height: strokeWidth,
           borderRadius: strokeWidth / 2,
           backgroundColor: stroke,
@@ -476,7 +488,7 @@ const IconLineImpl = ({
           width: length,
           height: strokeWidth,
           backgroundColor: glowColor,
-          opacity: 0.5,
+          opacity: _iconGlow.ICON_GLOW.lineLayerOpacity,
           transform: [{
             rotate: `${totalRotation}deg`
           }],
@@ -487,8 +499,8 @@ const IconLineImpl = ({
             width: 0,
             height: 0
           },
-          shadowOpacity: 0.9,
-          shadowRadius: 8
+          shadowOpacity: _iconGlow.ICON_GLOW.lineShadowOpacity,
+          shadowRadius: _iconGlow.ICON_GLOW.lineShadowRadius
         }
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: style
@@ -631,13 +643,19 @@ const IconArcImpl = ({
     const x2 = cx + r * Math.cos(rad2);
     const y2 = cy + r * Math.sin(rad2);
 
-    // Calculate segment geometry
+    // Calculate segment geometry. Interior joints overlap by half a stroke (same reason
+    // as the curved-line chain above); the arc's two ends stay at the authored angles.
     const dx = x2 - x1;
     const dy = y2 - y1;
-    const length = Math.sqrt(dx * dx + dy * dy);
+    const segLen = Math.sqrt(dx * dx + dy * dy);
     const angle = Math.atan2(dy, dx) * (180 / Math.PI);
-    const midX = (x1 + x2) / 2;
-    const midY = (y1 + y2) / 2;
+    const extS = i > 0 ? strokeWidth / 2 : 0;
+    const extE = i < numSegments - 1 ? strokeWidth / 2 : 0;
+    const ux = segLen > 0 ? dx / segLen : 0;
+    const uy = segLen > 0 ? dy / segLen : 0;
+    const length = segLen + extS + extE;
+    const midX = (x1 + x2) / 2 + ux * (extE - extS) / 2;
+    const midY = (y1 + y2) / 2 + uy * (extE - extS) / 2;
     const style = {
       position: 'absolute',
       left: midX - length / 2,
@@ -748,8 +766,8 @@ const IconSemicircleImpl = ({
         width: 0,
         height: 0
       },
-      shadowOpacity: 0.9,
-      shadowRadius: glowRadius * 0.8
+      shadowOpacity: _iconGlow.ICON_GLOW.filledShadowOpacity,
+      shadowRadius: glowRadius * _iconGlow.ICON_GLOW.filledRadiusScale
     })
   };
 
@@ -774,16 +792,16 @@ const IconSemicircleImpl = ({
           borderTopRightRadius: half === 'top' || half === 'right' ? glowR : 0,
           borderBottomLeftRadius: half === 'bottom' || half === 'left' ? glowR : 0,
           borderBottomRightRadius: half === 'bottom' || half === 'right' ? glowR : 0,
-          borderWidth: strokeW * 2,
+          borderWidth: strokeW * _iconGlow.ICON_GLOW.rectBorderScale,
           borderColor: glowColor,
-          opacity: 0.4,
+          opacity: _iconGlow.ICON_GLOW.rectLayerOpacity,
           shadowColor: glowColor,
           shadowOffset: {
             width: 0,
             height: 0
           },
-          shadowOpacity: 0.8,
-          shadowRadius: strokeW * 4
+          shadowOpacity: _iconGlow.ICON_GLOW.rectShadowOpacity,
+          shadowRadius: strokeW * _iconGlow.ICON_GLOW.rectShadowRadiusScale
         }
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: style

package/lib/commonjs/icons/icon-renderer.js

@@ -129,8 +129,19 @@ function resolveColor(fill, color, bgColor) {
 // Icon Renderer
 // ===========================================
 
-function renderIconData(data, size, colorOverride, bgColorOverride) {
+function renderIconData(data, size, colorOverride, bgColorOverride,
+/**
+ * REPLACES every authored stroke and border width (it does not scale them) —
+ * lucide's `strokeWidth` prop, for the uniform-weight GLYPH tier whose weight
+ * is caller-controlled. Applying it to a brand icon whose elements
+ * deliberately vary in weight would flatten it, so only the glyph components
+ * pass it. The Flutter twin is `BuoyIconPainter.strokeWidthOverride`.
+ */
+strokeWidthOverride, /** Merged over the icon's box — the lucide components' `style` passthrough. */
+style) {
   const scale = size / 24;
+  /** An authored width in icon units → pixels, honouring the override. */
+  const sw = authored => (strokeWidthOverride ?? authored) * scale;
   const center = size / 2;
   // Use colorOverride if provided, otherwise use the icon's default color
   const color = colorOverride ?? data.color;
@@ -139,6 +150,7 @@ function renderIconData(data, size, colorOverride, bgColorOverride) {
   const elements = data.elements;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconPrimitives.IconContainer, {
     size: size,
+    style: style,
     children: elements.map((el, i) => {
       if (el.type === 'circle') {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconPrimitives.IconCircle, {
@@ -147,7 +159,7 @@ function renderIconData(data, size, colorOverride, bgColorOverride) {
           r: el.r * scale,
           fill: resolveColor(el.fill, color, bgColor),
           borderColor: el.border ? resolveColor(el.borderColor, color, bgColor) ?? color : undefined,
-          borderWidth: el.border ? (el.borderWidth ?? 2) * scale : 0,
+          borderWidth: el.border ? sw(el.borderWidth ?? 2) : 0,
           opacity: el.opacity,
           scaleX: el.scaleX,
           scaleY: el.scaleY,
@@ -168,7 +180,7 @@ function renderIconData(data, size, colorOverride, bgColorOverride) {
           height: el.height * scale,
           fill: resolveColor(el.fill, color, bgColor),
           borderColor: el.border ? resolveColor(el.borderColor, color, bgColor) ?? color : undefined,
-          borderWidth: el.border ? (el.borderWidth ?? 1) * scale : 0,
+          borderWidth: el.border ? sw(el.borderWidth ?? 1) : 0,
           borderRadius: (el.borderRadius ?? 0) * scale,
           opacity: el.opacity,
           glowColor: el.glow ? color : undefined,
@@ -185,7 +197,7 @@ function renderIconData(data, size, colorOverride, bgColorOverride) {
           x2: center + el.x2 * scale,
           y2: center + el.y2 * scale,
           stroke: resolveColor(el.stroke ?? 'color', color, bgColor),
-          strokeWidth: (el.strokeWidth ?? 1) * scale,
+          strokeWidth: sw(el.strokeWidth ?? 1),
           opacity: el.opacity,
           glowColor: el.glow ? color : undefined,
           glowRadius: el.glow ? (el.glowRadius ?? 4) * scale : 0,
@@ -215,7 +227,7 @@ function renderIconData(data, size, colorOverride, bgColorOverride) {
           startAngle: el.startAngle,
           endAngle: el.endAngle,
           stroke: resolveColor(el.stroke ?? 'color', color, bgColor),
-          strokeWidth: (el.strokeWidth ?? 1.5) * scale,
+          strokeWidth: sw(el.strokeWidth ?? 1.5),
           opacity: el.opacity,
           segments: el.segments
         }, i);
@@ -228,7 +240,7 @@ function renderIconData(data, size, colorOverride, bgColorOverride) {
           half: el.half,
           fill: resolveColor(el.fill, color, bgColor),
           borderColor: el.border ? resolveColor(el.borderColor, color, bgColor) ?? color : undefined,
-          borderWidth: el.border ? (el.borderWidth ?? 2) * scale : 0,
+          borderWidth: el.border ? sw(el.borderWidth ?? 2) : 0,
           opacity: el.opacity,
           glowColor: el.glow ? color : undefined,
           glowRadius: el.glow ? (el.glowRadius ?? 4) * scale : 0
@@ -254,7 +266,7 @@ function renderIconData(data, size, colorOverride, bgColorOverride) {
           cy: center + el.cy * scale,
           r: el.r * scale,
           stroke: resolveColor(el.stroke ?? 'color', color, bgColor),
-          strokeWidth: (el.strokeWidth ?? 2) * scale,
+          strokeWidth: sw(el.strokeWidth ?? 2),
           opacity: el.opacity,
           portion: el.portion ?? 'bottom'
         }, i);
@@ -268,7 +280,14 @@ function renderIconData(data, size, colorOverride, bgColorOverride) {
 // Icon Factory
 // ===========================================
 
-function createIcon(data) {
+/**
+ * A Buoy icon component. Deliberately NOT `FC`: React's `FunctionComponent`
+ * type admits an async component (`Promise<ReactNode>`), so an `FC` is not
+ * assignable to the plain `(props) => ReactNode` slots callers declare for an
+ * icon — which is what the hand-drawn lucide components used to satisfy.
+ */
+
+function createIcon(data, opts) {
   // Memoised because every prop is a primitive and the body is expensive: an
   // icon rebuilds one element per shape in its data (dozens, for the detailed
   // ones) on every render. Without this, any parent re-render — a settings
@@ -277,9 +296,11 @@ function createIcon(data) {
   const Icon = ({
     size = 24,
     color,
-    bgColor
+    bgColor,
+    strokeWidth,
+    style
   }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: renderIconData(data, size, color, bgColor)
+    children: renderIconData(data, size, color, bgColor, opts?.glyph ? strokeWidth : undefined, style)
   });
   Icon.displayName = 'Icon';
   return /*#__PURE__*/(0, _react.memo)(Icon);

package/lib/commonjs/icons/iconGlow.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ICON_GLOW = void 0;
+/**
+ * Icon glow — the numbers behind every `glow: true` element, in ONE table so the ports read
+ * them instead of re-typing them (`pnpm parity styles` → Swift/Dart constants).
+ *
+ * RN renders a glow as a CALayer shadow. A filled element casts its own shadow; a border-only
+ * ring or a line gets a separate "glow layer" View drawn underneath (RN shadows need a
+ * background colour), with its own opacity and a FIXED shadow radius in points.
+ */
+const ICON_GLOW = exports.ICON_GLOW = {
+  /** Filled circle / rect: `shadowOpacity` and `shadowRadius = glowRadius × this`. */
+  filledShadowOpacity: 0.9,
+  filledRadiusScale: 0.8,
+  /** Border-only circle: black-filled twin ring under the real one. */
+  ringLayerOpacity: 0.5,
+  ringShadowOpacity: 0.9,
+  ringShadowRadius: 8,
+  /** Line: same line in the glow colour under the real one. */
+  lineLayerOpacity: 0.5,
+  lineShadowOpacity: 0.9,
+  lineShadowRadius: 8,
+  /** Border-only rect: twin expanded by the stroke width, border `strokeW × borderScale`. */
+  rectLayerOpacity: 0.4,
+  rectShadowOpacity: 0.8,
+  rectBorderScale: 2,
+  rectShadowRadiusScale: 4
+};

package/lib/commonjs/index.js

@@ -3,6 +3,156 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  FloatingToolsStore: true,
+  monoFont: true,
+  VISIBLE_HANDLE_WIDTH: true,
+  DRAG_THRESHOLD: true,
+  ANIMATION_DURATION: true,
+  EDGE_PADDING: true,
+  SAVE_DEBOUNCE_MS: true,
+  STORAGE_KEYS: true,
+  DevToolsStateManager: true,
+  devToolsStateManager: true,
+  devToolsReducer: true,
+  getUserStatusConfig: true,
+  getGripIconLayout: true,
+  filterValidChildren: true,
+  easing: true,
+  getEasing: true,
+  interpolate: true,
+  interpolatePosition: true,
+  floatingToolsColors: true,
+  withAlpha: true,
+  MAX_DIAL_SLOTS: true,
+  DIAL_START_ANGLE: true,
+  DIAL_BUTTON_SIZE: true,
+  DIAL_ICON_SIZE: true,
+  DIAL_ICON_GLYPH_SIZE: true,
+  DIAL_ICON_PADDING: true,
+  DIAL_GRID_LINE_COUNT: true,
+  dialColors: true,
+  dialStyles: true,
+  getGridLineRotations: true,
+  getDialLayout: true,
+  getIconAngle: true,
+  getIconPosition: true,
+  getAllIconPositions: true,
+  dialAnimationConfig: true,
+  getIconStaggerInputRange: true,
+  dialCSSBeziers: true,
+  generateDialCSSKeyframes: true,
+  getDialCSSAnimationStyles: true,
+  getDialCSSKeyframesString: true,
+  getSpiralAnimationPosition: true,
+  getStaggeredIconProgress: true,
+  USAGE_HALF_LIFE_MS: true,
+  USAGE_MIN_SCORE: true,
+  decayScore: true,
+  recordUsage: true,
+  rankToolIds: true,
+  pruneUsage: true,
+  SETTINGS_STORAGE_KEY: true,
+  MAX_SETTINGS_DIAL_SLOTS: true,
+  settingsTabs: true,
+  settingsColors: true,
+  toolColors: true,
+  getToolColor: true,
+  settingsStyles: true,
+  toolLabels: true,
+  getToolLabel: true,
+  toolDescriptions: true,
+  getToolDescription: true,
+  globalSettingsConfig: true,
+  enforceDialLimit: true,
+  sanitizeFloatingSettings: true,
+  mergeSettingsWithDefaults: true,
+  generateDefaultSettings: true,
+  countEnabledTools: true,
+  canEnableDialTool: true,
+  getEnabledToolIds: true,
+  SettingsEventBus: true,
+  settingsEventBus: true,
+  NetworkIcon: true,
+  NETWORK_ICON_COLOR: true,
+  EnvIcon: true,
+  ENV_ICON_COLOR: true,
+  StorageIcon: true,
+  STORAGE_ICON_COLOR: true,
+  RoutesIcon: true,
+  RoutePinIcon: true,
+  RoutePathIcon: true,
+  RouteDotIcon: true,
+  RouteTwoPinsIcon: true,
+  CurveTestA: true,
+  CurveTestB: true,
+  CurveTestC: true,
+  CurveTestD: true,
+  CurveTestE: true,
+  CurveTestF: true,
+  CurveTestG: true,
+  CurveTestH: true,
+  CurveTestI: true,
+  CurveTestJ: true,
+  CurveTestK: true,
+  CurveTestL: true,
+  CurveTestM: true,
+  CurveTestN: true,
+  CurveTestO: true,
+  CurveTestP: true,
+  ROUTES_ICON_COLOR: true,
+  QueryIcon: true,
+  QUERY_ICON_COLOR: true,
+  HighlighterIcon: true,
+  HIGHLIGHTER_ICON_COLOR: true,
+  RendersIcon: true,
+  RENDERS_ICON_COLOR: true,
+  BenchmarkIcon: true,
+  BENCHMARK_ICON_COLOR: true,
+  SentryIcon: true,
+  SENTRY_ICON_COLOR: true,
+  WifiIcon: true,
+  WIFI_ICON_COLOR: true,
+  HighlightIcon: true,
+  HIGHLIGHT_ICON_COLOR: true,
+  ReduxIcon: true,
+  REDUX_ICON_COLOR: true,
+  EventsIcon: true,
+  EVENTS_ICON_COLOR: true,
+  ConsoleIcon: true,
+  CONSOLE_ICON_COLOR: true,
+  TimeMachineIcon: true,
+  TIME_MACHINE_ICON_COLOR: true,
+  ScenariosIcon: true,
+  SCENARIOS_ICON_COLOR: true,
+  AskBuoyIcon: true,
+  ASK_BUOY_ICON_COLOR: true,
+  ImagesIcon: true,
+  IMAGES_ICON_COLOR: true,
+  CameraIcon: true,
+  CAMERA_ICON_COLOR: true,
+  AssetsIcon: true,
+  ASSETS_ICON_COLOR: true,
+  ImpersonateIcon: true,
+  IMPERSONATE_ICON_COLOR: true,
+  ImageOverlayIcon: true,
+  IMAGE_OVERLAY_ICON_COLOR: true,
+  ZustandIcon: true,
+  ZUSTAND_ICON_COLOR: true,
+  JotaiIcon: true,
+  JOTAI_ICON_COLOR: true,
+  RiverpodIcon: true,
+  RIVERPOD_ICON_COLOR: true,
+  createNode: true,
+  createLine: true,
+  createRing: true,
+  createDot: true,
+  createGlow: true,
+  createArrow: true,
+  createBar: true,
+  renderIconData: true,
+  createIcon: true
+};
 Object.defineProperty(exports, "ANIMATION_DURATION", {
   enumerable: true,
   get: function () {
@@ -807,6 +957,12 @@ Object.defineProperty(exports, "mergeSettingsWithDefaults", {
     return _settings.mergeSettingsWithDefaults;
   }
 });
+Object.defineProperty(exports, "monoFont", {
+  enumerable: true,
+  get: function () {
+    return _fonts.monoFont;
+  }
+});
 Object.defineProperty(exports, "pruneUsage", {
   enumerable: true,
   get: function () {
@@ -886,6 +1042,19 @@ Object.defineProperty(exports, "withAlpha", {
   }
 });
 var _FloatingToolsStore = require("./FloatingToolsStore.js");
+var _fonts = require("./fonts.js");
+var _glyphIconsG = require("./icons/generated/glyph-icons.g.js");
+Object.keys(_glyphIconsG).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _glyphIconsG[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _glyphIconsG[key];
+    }
+  });
+});
 var _constants = require("./constants.js");
 var _devToolsState = require("./devToolsState.js");
 var _utils = require("./utils.js");

package/lib/module/dial.js

@@ -1,5 +1,6 @@
 "use strict";
 
+import { monoFont } from "./fonts.js";
 /**
  * Dial Menu - Shared layout calculations, colors, and styling.
  *
@@ -133,7 +134,7 @@ export const dialStyles = {
       fontSize: 10,
       fontWeight: '900',
       letterSpacing: 1,
-      fontFamily: 'monospace'
+      fontFamily: monoFont
     },
     proText: {
       fontSize: 8,
@@ -154,7 +155,7 @@ export const dialStyles = {
       fontSize: 8,
       fontWeight: '900',
       letterSpacing: 0.3,
-      fontFamily: 'monospace',
+      fontFamily: monoFont,
       marginTop: 2
     },
     /** Icon wrapper margin bottom */

package/lib/module/fonts.js

@@ -0,0 +1,28 @@
+"use strict";
+
+import { Platform } from "react-native";
+
+/**
+ * The monospace family, per platform — THE seam for every `fontFamily` in Buoy.
+ *
+ * `"monospace"` is an ANDROID family name. iOS has no family called that, so
+ * React Native silently falls back to the system font: every code path, header
+ * name, JSON value and status chip Buoy renders "in monospace" was actually
+ * proportional on iOS. The cross-framework parity sheet is what surfaced it —
+ * Flutter resolves `monospace` to a real monospaced face, so its chips came out
+ * wider and taller than their RN twins and looked like a port bug.
+ *
+ * Menlo ships with every iOS version and is the family the ports can name too
+ * (Flutter `buoyMonoFont`, SwiftUI `Font.custom("Menlo", …)`), which is what
+ * makes the three frameworks draw the same glyphs.
+ *
+ * On web (the desktop dashboard, react-native-web) the generic `monospace`
+ * resolves to a thin, poorly-hinted browser default, so a curated stack is used
+ * there instead — the choice `packages/console` had already made locally.
+ */
+export const monoFont = Platform.select({
+  ios: "Menlo",
+  android: "monospace",
+  web: 'ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Liberation Mono", monospace',
+  default: "monospace"
+}) ?? "monospace";