@buoy-gg/floating-tools-core 7.0.34 → 7.0.36

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";

package/lib/module/icons/generated/glyph-icons.g.js

@@ -0,0 +1,296 @@
+"use strict";
+
+// GENERATED by scripts/gen-icons.mjs — DO NOT EDIT.
+// Source of truth: shared/icons/glyphs/*.json  (format: shared/icons/SPEC.md)
+//
+// To change a glyph, edit its JSON and re-run `node scripts/gen-icons.mjs`.
+
+import { createIcon } from "../icon-renderer.js";
+import { activityGlyphData, alertCircleGlyphData, alertTriangleGlyphData, arrowDownToLineGlyphData, arrowDownGlyphData, arrowUpGlyphData, barChartGlyphData, bookmarkGlyphData, boxGlyphData, bracesGlyphData, bugGlyphData, checkCircleGlyphData, checkGlyphData, chevronDownGlyphData, chevronLeftGlyphData, chevronRightGlyphData, chevronUpGlyphData, circleGlyphData, clockGlyphData, codeGlyphData, copyGlyphData, cropGlyphData, databaseGlyphData, dockBottomGlyphData, downloadGlyphData, edit3GlyphData, eyeOffGlyphData, eyeGlyphData, fileJsonGlyphData, fileTextGlyphData, filmGlyphData, filterGlyphData, flaskConicalGlyphData, floatWindowGlyphData, gaugeGlyphData, gitBranchGlyphData, globeGlyphData, gripVerticalGlyphData, hashGlyphData, homeGlyphData, imageOffGlyphData, imageGlyphData, infoGlyphData, keyGlyphData, layersGlyphData, linkGlyphData, lockGlyphData, minusGlyphData, moreVerticalGlyphData, musicGlyphData, navigationGlyphData, paletteGlyphData, pauseGlyphData, pinGlyphData, playGlyphData, plusGlyphData, powerGlyphData, refreshCwGlyphData, searchGlyphData, serverGlyphData, settingsGlyphData, shieldGlyphData, trash2GlyphData, unlockGlyphData, uploadGlyphData, userGlyphData, wifiGlyphData, xCircleGlyphData, xGlyphData, zapGlyphData } from "./icon-data.g.js";
+
+/** `{ glyph: true }` = the caller's `strokeWidth` replaces the authored one. */
+
+export const ActivityGlyph = createIcon(activityGlyphData, {
+  glyph: true
+});
+export const AlertCircleGlyph = createIcon(alertCircleGlyphData, {
+  glyph: true
+});
+export const AlertTriangleGlyph = createIcon(alertTriangleGlyphData, {
+  glyph: true
+});
+export const ArrowDownToLineGlyph = createIcon(arrowDownToLineGlyphData, {
+  glyph: true
+});
+export const ArrowDownGlyph = createIcon(arrowDownGlyphData, {
+  glyph: true
+});
+export const ArrowUpGlyph = createIcon(arrowUpGlyphData, {
+  glyph: true
+});
+export const BarChartGlyph = createIcon(barChartGlyphData, {
+  glyph: true
+});
+export const BookmarkGlyph = createIcon(bookmarkGlyphData, {
+  glyph: true
+});
+export const BoxGlyph = createIcon(boxGlyphData, {
+  glyph: true
+});
+export const BracesGlyph = createIcon(bracesGlyphData, {
+  glyph: true
+});
+export const BugGlyph = createIcon(bugGlyphData, {
+  glyph: true
+});
+export const CheckCircleGlyph = createIcon(checkCircleGlyphData, {
+  glyph: true
+});
+export const CheckGlyph = createIcon(checkGlyphData, {
+  glyph: true
+});
+export const ChevronDownGlyph = createIcon(chevronDownGlyphData, {
+  glyph: true
+});
+export const ChevronLeftGlyph = createIcon(chevronLeftGlyphData, {
+  glyph: true
+});
+export const ChevronRightGlyph = createIcon(chevronRightGlyphData, {
+  glyph: true
+});
+export const ChevronUpGlyph = createIcon(chevronUpGlyphData, {
+  glyph: true
+});
+export const CircleGlyph = createIcon(circleGlyphData, {
+  glyph: true
+});
+export const ClockGlyph = createIcon(clockGlyphData, {
+  glyph: true
+});
+export const CodeGlyph = createIcon(codeGlyphData, {
+  glyph: true
+});
+export const CopyGlyph = createIcon(copyGlyphData, {
+  glyph: true
+});
+export const CropGlyph = createIcon(cropGlyphData, {
+  glyph: true
+});
+export const DatabaseGlyph = createIcon(databaseGlyphData, {
+  glyph: true
+});
+export const DockBottomGlyph = createIcon(dockBottomGlyphData, {
+  glyph: true
+});
+export const DownloadGlyph = createIcon(downloadGlyphData, {
+  glyph: true
+});
+export const Edit3Glyph = createIcon(edit3GlyphData, {
+  glyph: true
+});
+export const EyeOffGlyph = createIcon(eyeOffGlyphData, {
+  glyph: true
+});
+export const EyeGlyph = createIcon(eyeGlyphData, {
+  glyph: true
+});
+export const FileJsonGlyph = createIcon(fileJsonGlyphData, {
+  glyph: true
+});
+export const FileTextGlyph = createIcon(fileTextGlyphData, {
+  glyph: true
+});
+export const FilmGlyph = createIcon(filmGlyphData, {
+  glyph: true
+});
+export const FilterGlyph = createIcon(filterGlyphData, {
+  glyph: true
+});
+export const FlaskConicalGlyph = createIcon(flaskConicalGlyphData, {
+  glyph: true
+});
+export const FloatWindowGlyph = createIcon(floatWindowGlyphData, {
+  glyph: true
+});
+export const GaugeGlyph = createIcon(gaugeGlyphData, {
+  glyph: true
+});
+export const GitBranchGlyph = createIcon(gitBranchGlyphData, {
+  glyph: true
+});
+export const GlobeGlyph = createIcon(globeGlyphData, {
+  glyph: true
+});
+export const GripVerticalGlyph = createIcon(gripVerticalGlyphData, {
+  glyph: true
+});
+export const HashGlyph = createIcon(hashGlyphData, {
+  glyph: true
+});
+export const HomeGlyph = createIcon(homeGlyphData, {
+  glyph: true
+});
+export const ImageOffGlyph = createIcon(imageOffGlyphData, {
+  glyph: true
+});
+export const ImageGlyph = createIcon(imageGlyphData, {
+  glyph: true
+});
+export const InfoGlyph = createIcon(infoGlyphData, {
+  glyph: true
+});
+export const KeyGlyph = createIcon(keyGlyphData, {
+  glyph: true
+});
+export const LayersGlyph = createIcon(layersGlyphData, {
+  glyph: true
+});
+export const LinkGlyph = createIcon(linkGlyphData, {
+  glyph: true
+});
+export const LockGlyph = createIcon(lockGlyphData, {
+  glyph: true
+});
+export const MinusGlyph = createIcon(minusGlyphData, {
+  glyph: true
+});
+export const MoreVerticalGlyph = createIcon(moreVerticalGlyphData, {
+  glyph: true
+});
+export const MusicGlyph = createIcon(musicGlyphData, {
+  glyph: true
+});
+export const NavigationGlyph = createIcon(navigationGlyphData, {
+  glyph: true
+});
+export const PaletteGlyph = createIcon(paletteGlyphData, {
+  glyph: true
+});
+export const PauseGlyph = createIcon(pauseGlyphData, {
+  glyph: true
+});
+export const PinGlyph = createIcon(pinGlyphData, {
+  glyph: true
+});
+export const PlayGlyph = createIcon(playGlyphData, {
+  glyph: true
+});
+export const PlusGlyph = createIcon(plusGlyphData, {
+  glyph: true
+});
+export const PowerGlyph = createIcon(powerGlyphData, {
+  glyph: true
+});
+export const RefreshCwGlyph = createIcon(refreshCwGlyphData, {
+  glyph: true
+});
+export const SearchGlyph = createIcon(searchGlyphData, {
+  glyph: true
+});
+export const ServerGlyph = createIcon(serverGlyphData, {
+  glyph: true
+});
+export const SettingsGlyph = createIcon(settingsGlyphData, {
+  glyph: true
+});
+export const ShieldGlyph = createIcon(shieldGlyphData, {
+  glyph: true
+});
+export const Trash2Glyph = createIcon(trash2GlyphData, {
+  glyph: true
+});
+export const UnlockGlyph = createIcon(unlockGlyphData, {
+  glyph: true
+});
+export const UploadGlyph = createIcon(uploadGlyphData, {
+  glyph: true
+});
+export const UserGlyph = createIcon(userGlyphData, {
+  glyph: true
+});
+export const WifiGlyph = createIcon(wifiGlyphData, {
+  glyph: true
+});
+export const XCircleGlyph = createIcon(xCircleGlyphData, {
+  glyph: true
+});
+export const XGlyph = createIcon(xGlyphData, {
+  glyph: true
+});
+export const ZapGlyph = createIcon(zapGlyphData, {
+  glyph: true
+});
+
+/** Every glyph component, keyed by its source filename. */
+export const glyphsByName = {
+  'activity': ActivityGlyph,
+  'alert-circle': AlertCircleGlyph,
+  'alert-triangle': AlertTriangleGlyph,
+  'arrow-down-to-line': ArrowDownToLineGlyph,
+  'arrow-down': ArrowDownGlyph,
+  'arrow-up': ArrowUpGlyph,
+  'bar-chart': BarChartGlyph,
+  'bookmark': BookmarkGlyph,
+  'box': BoxGlyph,
+  'braces': BracesGlyph,
+  'bug': BugGlyph,
+  'check-circle': CheckCircleGlyph,
+  'check': CheckGlyph,
+  'chevron-down': ChevronDownGlyph,
+  'chevron-left': ChevronLeftGlyph,
+  'chevron-right': ChevronRightGlyph,
+  'chevron-up': ChevronUpGlyph,
+  'circle': CircleGlyph,
+  'clock': ClockGlyph,
+  'code': CodeGlyph,
+  'copy': CopyGlyph,
+  'crop': CropGlyph,
+  'database': DatabaseGlyph,
+  'dock-bottom': DockBottomGlyph,
+  'download': DownloadGlyph,
+  'edit-3': Edit3Glyph,
+  'eye-off': EyeOffGlyph,
+  'eye': EyeGlyph,
+  'file-json': FileJsonGlyph,
+  'file-text': FileTextGlyph,
+  'film': FilmGlyph,
+  'filter': FilterGlyph,
+  'flask-conical': FlaskConicalGlyph,
+  'float-window': FloatWindowGlyph,
+  'gauge': GaugeGlyph,
+  'git-branch': GitBranchGlyph,
+  'globe': GlobeGlyph,
+  'grip-vertical': GripVerticalGlyph,
+  'hash': HashGlyph,
+  'home': HomeGlyph,
+  'image-off': ImageOffGlyph,
+  'image': ImageGlyph,
+  'info': InfoGlyph,
+  'key': KeyGlyph,
+  'layers': LayersGlyph,
+  'link': LinkGlyph,
+  'lock': LockGlyph,
+  'minus': MinusGlyph,
+  'more-vertical': MoreVerticalGlyph,
+  'music': MusicGlyph,
+  'navigation': NavigationGlyph,
+  'palette': PaletteGlyph,
+  'pause': PauseGlyph,
+  'pin': PinGlyph,
+  'play': PlayGlyph,
+  'plus': PlusGlyph,
+  'power': PowerGlyph,
+  'refresh-cw': RefreshCwGlyph,
+  'search': SearchGlyph,
+  'server': ServerGlyph,
+  'settings': SettingsGlyph,
+  'shield': ShieldGlyph,
+  'trash-2': Trash2Glyph,
+  'unlock': UnlockGlyph,
+  'upload': UploadGlyph,
+  'user': UserGlyph,
+  'wifi': WifiGlyph,
+  'x-circle': XCircleGlyph,
+  'x': XGlyph,
+  'zap': ZapGlyph
+};

package/lib/module/icons/generated/icon-data.g.js

@@ -156,15 +156,15 @@ export const benchmarkIconData = {
     opacity: 0.9
   }, {
     type: 'rect',
-    x: -0.75,
-    y: -4,
-    width: 1.5,
-    height: 5,
+    x: 0,
+    y: 0.25,
+    width: 5,
+    height: 1.5,
     fill: 'color',
     borderRadius: 1,
     opacity: 0.9,
-    rotation: -45,
-    rotateFromCenter: true
+    rotation: -135,
+    rotateFromCenter: false
   }, {
     type: 'circle',
     cx: 0,
@@ -3378,123 +3378,199 @@ export const sentryIconData = {
   color: SENTRY_ICON_COLOR,
   bgColor: '#000',
   elements: [{
-    type: 'circle',
+    type: 'arc',
+    cx: -10.5,
+    cy: 8.55,
+    r: 14.3,
+    startAngle: -60,
+    endAngle: -0.4,
+    segments: 24,
+    strokeWidth: 1.54
+  }, {
+    type: 'line',
+    x1: -3.343,
+    y1: -3.835,
+    x2: -0.98,
+    y2: -7.883,
+    strokeWidth: 1.62
+  }, {
+    type: 'semicircle',
     cx: 0,
-    cy: 1,
-    r: 8,
-    fill: 'color',
-    opacity: 0.15
+    cy: -7.3,
+    r: 1.96,
+    half: 'top',
+    fill: 'color'
   }, {
-    type: 'rect',
-    x: -6,
-    y: -4,
-    width: 12,
-    height: 14,
-    fill: 'color',
-    borderRadius: 6,
-    opacity: 0.9
+    type: 'line',
+    x1: 0.96,
+    y1: -7.868,
+    x2: 9.551,
+    y2: 6.754,
+    strokeWidth: 1.67
+  }, {
+    type: 'semicircle',
+    cx: 8.568,
+    cy: 7.333,
+    r: 1.977,
+    half: 'right',
+    fill: 'color'
   }, {
     type: 'rect',
-    x: -4,
-    y: -9,
-    width: 8,
-    height: 6,
-    fill: 'color',
-    borderRadius: 4,
-    opacity: 0.95
+    x: 6.552,
+    y: 7.657,
+    width: 2.008,
+    height: 1.6,
+    fill: 'color'
+  }, {
+    type: 'arc',
+    cx: -10.5,
+    cy: 8.55,
+    r: 10.83,
+    startAngle: -60,
+    endAngle: -0.53,
+    segments: 20,
+    strokeWidth: 1.6
   }, {
     type: 'rect',
-    x: -3,
-    y: -12,
-    width: 0.8,
-    height: 4,
-    fill: 'color',
-    opacity: 0.7,
-    rotation: -15
+    x: -0.521,
+    y: 7.64,
+    width: 5.17,
+    height: 1.6,
+    fill: 'color'
+  }, {
+    type: 'line',
+    x1: -5.086,
+    y1: -0.823,
+    x2: -6.791,
+    y2: 2.125,
+    strokeWidth: 1.62
+  }, {
+    type: 'arc',
+    cx: -10.5,
+    cy: 8.55,
+    r: 7.42,
+    startAngle: -60,
+    endAngle: -0.83,
+    segments: 16,
+    strokeWidth: 1.46
+  }, {
+    type: 'rect',
+    x: -8.547,
+    y: 7.631,
+    width: 6.09,
+    height: 1.609,
+    fill: 'color'
+  }, {
+    type: 'semicircle',
+    cx: -8.547,
+    cy: 7.308,
+    r: 1.931,
+    half: 'left',
+    fill: 'color'
   }, {
+    type: 'line',
+    x1: -9.517,
+    y1: 6.737,
+    x2: -8.639,
+    y2: 5.33,
+    strokeWidth: 1.61
+  }]
+};
+
+// ===========================================
+// SETTINGS
+// ===========================================
+
+export const settingsIconData = {
+  color: '#E0E0E0',
+  bgColor: '#0a0a0f',
+  elements: [{
     type: 'circle',
-    cx: -4,
-    cy: -12,
-    r: 1.2,
-    fill: 'color',
-    opacity: 0.6
+    cx: 0,
+    cy: 0,
+    r: 7.09,
+    border: true,
+    borderWidth: 3.6
   }, {
     type: 'rect',
-    x: 2.2,
-    y: -12,
-    width: 0.8,
-    height: 4,
+    x: 6,
+    y: -1.785,
+    width: 4,
+    height: 3.57,
     fill: 'color',
-    opacity: 0.7,
-    rotation: 15
+    borderRadius: 0.45,
+    rotation: 0,
+    rotateFromCenter: true
   }, {
-    type: 'circle',
-    cx: 4,
-    cy: -12,
-    r: 1.2,
+    type: 'rect',
+    x: 3.657,
+    y: 3.872,
+    width: 4,
+    height: 3.57,
     fill: 'color',
-    opacity: 0.6
+    borderRadius: 0.45,
+    rotation: 45,
+    rotateFromCenter: true
   }, {
     type: 'rect',
-    x: -10,
-    y: -2,
+    x: -2,
+    y: 6.215,
     width: 4,
-    height: 1,
+    height: 3.57,
     fill: 'color',
-    opacity: 0.8,
-    rotation: -20
+    borderRadius: 0.45,
+    rotation: 90,
+    rotateFromCenter: true
   }, {
     type: 'rect',
-    x: -10,
-    y: 1,
+    x: -7.657,
+    y: 3.872,
     width: 4,
-    height: 1,
+    height: 3.57,
     fill: 'color',
-    opacity: 0.8,
-    rotation: -10
+    borderRadius: 0.45,
+    rotation: 135,
+    rotateFromCenter: true
   }, {
     type: 'rect',
     x: -10,
-    y: 4,
+    y: -1.785,
     width: 4,
-    height: 1,
+    height: 3.57,
     fill: 'color',
-    opacity: 0.8,
-    rotation: 10
+    borderRadius: 0.45,
+    rotation: 180,
+    rotateFromCenter: true
   }, {
     type: 'rect',
-    x: 6,
-    y: -2,
+    x: -7.657,
+    y: -7.442,
     width: 4,
-    height: 1,
+    height: 3.57,
     fill: 'color',
-    opacity: 0.8,
-    rotation: 20
+    borderRadius: 0.45,
+    rotation: 225,
+    rotateFromCenter: true
   }, {
     type: 'rect',
-    x: 6,
-    y: 1,
+    x: -2,
+    y: -9.785,
     width: 4,
-    height: 1,
+    height: 3.57,
     fill: 'color',
-    opacity: 0.8,
-    rotation: 10
+    borderRadius: 0.45,
+    rotation: 270,
+    rotateFromCenter: true
   }, {
     type: 'rect',
-    x: 6,
-    y: 4,
+    x: 3.657,
+    y: -7.442,
     width: 4,
-    height: 1,
+    height: 3.57,
     fill: 'color',
-    opacity: 0.8,
-    rotation: -10
-  }, {
-    type: 'circle',
-    cx: 0,
-    cy: 1,
-    r: 1,
-    fill: '#fff',
-    opacity: 0.3
+    borderRadius: 0.45,
+    rotation: 315,
+    rotateFromCenter: true
   }]
 };
 

package/lib/module/icons/icon-primitives.js

@@ -30,15 +30,19 @@ const r2 = n => Math.round(n * 100) / 100;
 
 export const IconContainer = ({
   size,
-  children
+  children,
+  style
 }) => {
-  const style = {
+  const box = {
     position: 'relative',
     width: r2(size),
     height: r2(size)
   };
   return /*#__PURE__*/_jsx("div", {
-    style: style,
+    style: {
+      ...box,
+      ...style
+    },
     children: children
   });
 };
@@ -291,14 +295,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__*/_jsx("div", {
         style: {
           position: 'absolute',
-          left: r2(segCenterX - segLength / 2),
-          top: r2(segCenterY - strokeWidth / 2),
-          width: r2(segLength),
+          left: r2(capCenterX - capLength / 2),
+          top: r2(capCenterY - strokeWidth / 2),
+          width: r2(capLength),
           height: r2(strokeWidth),
           borderRadius: r2(strokeWidth / 2),
           backgroundColor: stroke,
@@ -460,13 +474,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: r2(midX - length / 2),