@buoy-gg/floating-tools-core 7.0.17 → 7.0.19

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IconTriangle = exports.IconSmoothArc = exports.IconSemicircle = exports.IconRect = exports.IconLine = exports.IconContainer = exports.IconCircle = exports.IconArc = void 0;
+exports.IconTriangle = exports.IconText = exports.IconSmoothArc = exports.IconSemicircle = exports.IconRect = exports.IconLine = exports.IconContainer = exports.IconCircle = exports.IconArc = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Icon Primitives - WEB
@@ -12,6 +12,16 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Mobile bundlers (Metro) pick icon-primitives.native.tsx instead.
  */
 
+/**
+ * Round to 2 decimals. Computed geometry must not carry full float precision
+ * into inline styles: the browser's CSSOM re-serializes numbers to ~6
+ * significant digits (e.g. rotate(117.64597536373869deg) -> "117.646deg"), so
+ * on server-rendered pages (buoy.gg docs) every full-precision value becomes a
+ * React hydration mismatch. Two decimals round-trip exactly and are far below
+ * visual tolerance at icon sizes.
+ */
+const r2 = n => Math.round(n * 100) / 100;
+
 // ===========================================
 // Types
 // ===========================================
@@ -26,8 +36,8 @@ const IconContainer = ({
 }) => {
   const style = {
     position: 'relative',
-    width: size,
-    height: size
+    width: r2(size),
+    height: r2(size)
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     style: style,
@@ -45,15 +55,15 @@ function createNeonGlow(color, radius) {
   // Layer 2: Medium spread
   // Layer 3: Wide soft outer glow
   // Layer 4: Very wide ambient glow
-  return [`0 0 ${radius * 0.15}px ${color}`,
+  return [`0 0 ${r2(radius * 0.15)}px ${color}`,
   // Bright core
-  `0 0 ${radius * 0.3}px ${color}`,
+  `0 0 ${r2(radius * 0.3)}px ${color}`,
   // Inner glow
-  `0 0 ${radius * 0.6}px ${color}cc`,
+  `0 0 ${r2(radius * 0.6)}px ${color}cc`,
   // Medium glow (80% opacity)
-  `0 0 ${radius}px ${color}80`,
+  `0 0 ${r2(radius)}px ${color}80`,
   // Outer glow (50% opacity)
-  `0 0 ${radius * 1.5}px ${color}40` // Ambient glow (25% opacity)
+  `0 0 ${r2(radius * 1.5)}px ${color}40` // Ambient glow (25% opacity)
   ].join(', ');
 }
 const IconCircle = ({
@@ -72,18 +82,18 @@ const IconCircle = ({
 }) => {
   const diameter = r * 2;
   const transforms = [];
-  if (scaleX !== 1) transforms.push(`scaleX(${scaleX})`);
-  if (scaleY !== 1) transforms.push(`scaleY(${scaleY})`);
-  if (rotation !== 0) transforms.push(`rotate(${rotation}deg)`);
+  if (scaleX !== 1) transforms.push(`scaleX(${r2(scaleX)})`);
+  if (scaleY !== 1) transforms.push(`scaleY(${r2(scaleY)})`);
+  if (rotation !== 0) transforms.push(`rotate(${r2(rotation)}deg)`);
   const style = {
     position: 'absolute',
-    left: cx - r,
-    top: cy - r,
-    width: diameter,
-    height: diameter,
-    borderRadius: r,
+    left: r2(cx - r),
+    top: r2(cy - r),
+    width: r2(diameter),
+    height: r2(diameter),
+    borderRadius: r2(r),
     backgroundColor: fill,
-    border: borderColor ? `${borderWidth}px solid ${borderColor}` : undefined,
+    border: borderColor ? `${r2(borderWidth)}px solid ${borderColor}` : undefined,
     opacity,
     transform: transforms.length > 0 ? transforms.join(' ') : undefined,
     transformOrigin: '50% 50%',
@@ -113,29 +123,63 @@ const IconRect = ({
 }) => {
   const style = {
     position: 'absolute',
-    left: x,
-    top: y,
-    width,
-    height,
-    borderRadius,
+    left: r2(x),
+    top: r2(y),
+    width: r2(width),
+    height: r2(height),
+    borderRadius: r2(borderRadius),
     backgroundColor: fill,
-    border: borderColor ? `${borderWidth}px solid ${borderColor}` : undefined,
+    border: borderColor ? `${r2(borderWidth)}px solid ${borderColor}` : undefined,
     opacity,
     boxShadow: glowColor && glowRadius > 0 ? createNeonGlow(glowColor, glowRadius) : undefined,
     boxSizing: 'border-box',
-    transform: rotation !== undefined ? `rotate(${rotation}deg)` : undefined,
-    transformOrigin: rotation !== undefined ? `${originX * 100}% ${originY * 100}%` : undefined
+    transform: rotation !== undefined ? `rotate(${r2(rotation)}deg)` : undefined,
+    transformOrigin: rotation !== undefined ? `${r2(originX * 100)}% ${r2(originY * 100)}%` : undefined
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     style: style
   });
 };
+exports.IconRect = IconRect;
+const IconText = ({
+  x,
+  y,
+  text,
+  fontSize,
+  fontWeight = 700,
+  align = 'center',
+  fill,
+  opacity = 1,
+  rotation,
+  letterSpacing = 0
+}) => {
+  const translateX = align === 'left' ? '0%' : align === 'right' ? '-100%' : '-50%';
+  const style = {
+    position: 'absolute',
+    left: r2(x),
+    top: r2(y),
+    transform: `translate(${translateX}, -50%)${rotation !== undefined ? ` rotate(${r2(rotation)}deg)` : ''}`,
+    color: fill,
+    fontSize: r2(fontSize),
+    fontWeight,
+    lineHeight: 1,
+    whiteSpace: 'nowrap',
+    fontFamily: "'Helvetica Neue', Arial, sans-serif",
+    letterSpacing,
+    opacity,
+    userSelect: 'none'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: style,
+    children: text
+  });
+};
 
 /**
  * Calculates a point on a quadratic Bezier curve (1 control point)
  * B(t) = (1-t)²P0 + 2(1-t)tP1 + t²P2
  */
-exports.IconRect = IconRect;
+exports.IconText = IconText;
 function getQuadraticBezierPoint(t, p0x, p0y, p1x, p1y, p2x, p2y) {
   const mt = 1 - t;
   return {
@@ -221,10 +265,10 @@ const IconLine = ({
       const pt = isCubic ? getCubicBezierPoint(t, x1, y1, control1X, control1Y, control2X, control2Y, x2, y2) : getQuadraticBezierPoint(t, x1, y1, hasCurve1 ? control1X : control2X, hasCurve1 ? control1Y : control2Y, x2, y2);
       const circleStyle = {
         position: 'absolute',
-        left: pt.x - strokeWidth / 2,
-        top: pt.y - strokeWidth / 2,
-        width: strokeWidth,
-        height: strokeWidth,
+        left: r2(pt.x - strokeWidth / 2),
+        top: r2(pt.y - strokeWidth / 2),
+        width: r2(strokeWidth),
+        height: r2(strokeWidth),
         borderRadius: '50%',
         backgroundColor: stroke,
         opacity,
@@ -253,15 +297,15 @@ const IconLine = ({
   const totalRotation = angle + rotation;
   const style = {
     position: 'absolute',
-    left: centerX - length / 2,
-    top: centerY - strokeWidth / 2,
-    width: length,
-    height: strokeWidth,
+    left: r2(centerX - length / 2),
+    top: r2(centerY - strokeWidth / 2),
+    width: r2(length),
+    height: r2(strokeWidth),
     backgroundColor: stroke,
     opacity,
-    transform: `rotate(${totalRotation}deg)`,
+    transform: `rotate(${r2(totalRotation)}deg)`,
     transformOrigin: '50% 50%',
-    borderRadius: strokeWidth / 2,
+    borderRadius: r2(strokeWidth / 2),
     boxShadow: glowColor && glowRadius > 0 ? createNeonGlow(glowColor, glowRadius) : undefined
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -285,7 +329,7 @@ const IconTriangle = ({
 }) => {
   // CSS border trick: use transparent borders to create triangle
   // The size is the height of the triangle, width is size * 2 / sqrt(3) for equilateral
-  const halfWidth = size * 0.577; // size / sqrt(3) for equilateral-ish triangle
+  const halfWidth = r2(size * 0.577); // size / sqrt(3) for equilateral-ish triangle
 
   // Build border styles based on direction
   let borderStyles = {};
@@ -296,7 +340,7 @@ const IconTriangle = ({
       borderStyles = {
         borderLeft: `${halfWidth}px solid transparent`,
         borderRight: `${halfWidth}px solid transparent`,
-        borderTop: `${size}px solid ${fill}`
+        borderTop: `${r2(size)}px solid ${fill}`
       };
       offsetX = -halfWidth;
       offsetY = 0;
@@ -305,7 +349,7 @@ const IconTriangle = ({
       borderStyles = {
         borderLeft: `${halfWidth}px solid transparent`,
         borderRight: `${halfWidth}px solid transparent`,
-        borderBottom: `${size}px solid ${fill}`
+        borderBottom: `${r2(size)}px solid ${fill}`
       };
       offsetX = -halfWidth;
       offsetY = -size;
@@ -314,7 +358,7 @@ const IconTriangle = ({
       borderStyles = {
         borderTop: `${halfWidth}px solid transparent`,
         borderBottom: `${halfWidth}px solid transparent`,
-        borderRight: `${size}px solid ${fill}`
+        borderRight: `${r2(size)}px solid ${fill}`
       };
       offsetX = -size;
       offsetY = -halfWidth;
@@ -323,7 +367,7 @@ const IconTriangle = ({
       borderStyles = {
         borderTop: `${halfWidth}px solid transparent`,
         borderBottom: `${halfWidth}px solid transparent`,
-        borderLeft: `${size}px solid ${fill}`
+        borderLeft: `${r2(size)}px solid ${fill}`
       };
       offsetX = 0;
       offsetY = -halfWidth;
@@ -331,12 +375,12 @@ const IconTriangle = ({
   }
   const transforms = [];
   if (rotation !== undefined) {
-    transforms.push(`rotate(${rotation}deg)`);
+    transforms.push(`rotate(${r2(rotation)}deg)`);
   }
   const style = {
     position: 'absolute',
-    left: x + offsetX,
-    top: y + offsetY,
+    left: r2(x + offsetX),
+    top: r2(y + offsetY),
     width: 0,
     height: 0,
     opacity,
@@ -396,15 +440,15 @@ const IconArc = ({
     const midY = (y1 + y2) / 2;
     const style = {
       position: 'absolute',
-      left: midX - length / 2,
-      top: midY - strokeWidth / 2,
-      width: length,
-      height: strokeWidth,
+      left: r2(midX - length / 2),
+      top: r2(midY - strokeWidth / 2),
+      width: r2(length),
+      height: r2(strokeWidth),
       backgroundColor: stroke,
       opacity,
-      transform: `rotate(${angle}deg)`,
+      transform: `rotate(${r2(angle)}deg)`,
       transformOrigin: '50% 50%',
-      borderRadius: strokeWidth / 2
+      borderRadius: r2(strokeWidth / 2)
     };
     lines.push(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       style: style
@@ -442,32 +486,32 @@ const IconSemicircle = ({
   let borderRadius;
   switch (half) {
     case 'top':
-      left = cx - r;
-      top = cy - r;
-      width = diameter;
-      height = r;
-      borderRadius = `${r}px ${r}px 0 0`;
+      left = r2(cx - r);
+      top = r2(cy - r);
+      width = r2(diameter);
+      height = r2(r);
+      borderRadius = `${r2(r)}px ${r2(r)}px 0 0`;
       break;
     case 'bottom':
-      left = cx - r;
-      top = cy;
-      width = diameter;
-      height = r;
-      borderRadius = `0 0 ${r}px ${r}px`;
+      left = r2(cx - r);
+      top = r2(cy);
+      width = r2(diameter);
+      height = r2(r);
+      borderRadius = `0 0 ${r2(r)}px ${r2(r)}px`;
       break;
     case 'left':
-      left = cx - r;
-      top = cy - r;
-      width = r;
-      height = diameter;
-      borderRadius = `${r}px 0 0 ${r}px`;
+      left = r2(cx - r);
+      top = r2(cy - r);
+      width = r2(r);
+      height = r2(diameter);
+      borderRadius = `${r2(r)}px 0 0 ${r2(r)}px`;
       break;
     case 'right':
-      left = cx;
-      top = cy - r;
-      width = r;
-      height = diameter;
-      borderRadius = `0 ${r}px ${r}px 0`;
+      left = r2(cx);
+      top = r2(cy - r);
+      width = r2(r);
+      height = r2(diameter);
+      borderRadius = `0 ${r2(r)}px ${r2(r)}px 0`;
       break;
   }
   const style = {
@@ -478,7 +522,7 @@ const IconSemicircle = ({
     height,
     borderRadius,
     backgroundColor: fill,
-    border: borderColor ? `${borderWidth}px solid ${borderColor}` : undefined,
+    border: borderColor ? `${r2(borderWidth)}px solid ${borderColor}` : undefined,
     opacity,
     boxShadow: glowColor && glowRadius > 0 ? createNeonGlow(glowColor, glowRadius) : undefined,
     boxSizing: 'border-box'
@@ -538,12 +582,12 @@ const IconSmoothArc = ({
   }
   const style = {
     position: 'absolute',
-    left: cx - r,
-    top: cy - r,
-    width: diameter,
-    height: diameter,
-    borderRadius: r,
-    borderWidth: strokeWidth,
+    left: r2(cx - r),
+    top: r2(cy - r),
+    width: r2(diameter),
+    height: r2(diameter),
+    borderRadius: r2(r),
+    borderWidth: r2(strokeWidth),
     borderStyle: 'solid',
     borderTopColor,
     borderBottomColor,

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IconTriangle = exports.IconSmoothArc = exports.IconSemicircle = exports.IconRect = exports.IconLine = exports.IconContainer = exports.IconCircle = exports.IconArc = void 0;
+exports.IconTriangle = exports.IconText = exports.IconSmoothArc = exports.IconSemicircle = exports.IconRect = exports.IconLine = exports.IconContainer = exports.IconCircle = exports.IconArc = void 0;
 var _reactNative = require("react-native");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -271,12 +271,62 @@ function getCubicBezierPoint(t, p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y) {
     y: mt3 * p0y + 3 * mt2 * t * p1y + 3 * mt * t2 * p2y + t3 * p3y
   };
 }
+const IconText = ({
+  x,
+  y,
+  text,
+  fontSize,
+  fontWeight = 700,
+  align = 'center',
+  fill,
+  opacity = 1,
+  rotation,
+  letterSpacing = 0
+}) => {
+  // RN has no translate(-50%), so anchor via an estimated-width container with
+  // matching textAlign. The estimate only pads the container; alignment inside
+  // it is exact for left/right and near-exact for center.
+  const estWidth = text.length * fontSize * 0.75 + Math.max(0, text.length - 1) * letterSpacing + fontSize;
+  const height = fontSize * 1.5;
+  const left = align === 'left' ? x : align === 'right' ? x - estWidth : x - estWidth / 2;
+  const containerStyle = {
+    position: 'absolute',
+    left,
+    top: y - height / 2,
+    width: estWidth,
+    height,
+    justifyContent: 'center',
+    transform: rotation !== undefined ? [{
+      rotate: `${rotation}deg`
+    }] : undefined
+  };
+  const textStyle = {
+    color: fill,
+    fontSize,
+    fontWeight: String(fontWeight),
+    textAlign: align,
+    letterSpacing,
+    opacity,
+    includeFontPadding: false
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: containerStyle,
+    pointerEvents: "none",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: textStyle,
+      numberOfLines: 1,
+      allowFontScaling: false,
+      children: text
+    })
+  });
+};
 
 /**
  * IconLine - draws a line between two points
  * Auto-calculates length and rotation from coordinates!
  * Supports curved lines via cubic Bezier (2 control points) or quadratic (1 control point).
  */
+exports.IconText = IconText;
 const IconLine = ({
   x1,
   y1,

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

@@ -44,6 +44,12 @@ var _jsxRuntime = require("react/jsx-runtime");
  * This is the "clever trick" for WiFi-style arcs.
  */
 
+/**
+ * Text element - a short label (sign lettering, badges).
+ * Currently TS targets only: icons containing text are excluded from the
+ * Flutter/NativeScript generators until those renderers support it.
+ */
+
 // ===========================================
 // Color Utilities
 // ===========================================
@@ -139,7 +145,7 @@ function renderIconData(data, size, colorOverride, bgColorOverride) {
           cy: center + el.cy * scale,
           r: el.r * scale,
           fill: resolveColor(el.fill, color, bgColor),
-          borderColor: el.border ? color : undefined,
+          borderColor: el.border ? resolveColor(el.borderColor, color, bgColor) ?? color : undefined,
           borderWidth: el.border ? (el.borderWidth ?? 2) * scale : 0,
           opacity: el.opacity,
           scaleX: el.scaleX,
@@ -160,7 +166,7 @@ function renderIconData(data, size, colorOverride, bgColorOverride) {
           width: el.width * scale,
           height: el.height * scale,
           fill: resolveColor(el.fill, color, bgColor),
-          borderColor: el.border ? color : undefined,
+          borderColor: el.border ? resolveColor(el.borderColor, color, bgColor) ?? color : undefined,
           borderWidth: el.border ? (el.borderWidth ?? 1) * scale : 0,
           borderRadius: (el.borderRadius ?? 0) * scale,
           opacity: el.opacity,
@@ -220,13 +226,27 @@ function renderIconData(data, size, colorOverride, bgColorOverride) {
           r: el.r * scale,
           half: el.half,
           fill: resolveColor(el.fill, color, bgColor),
-          borderColor: el.border ? color : undefined,
+          borderColor: el.border ? resolveColor(el.borderColor, color, bgColor) ?? color : undefined,
           borderWidth: el.border ? (el.borderWidth ?? 2) * scale : 0,
           opacity: el.opacity,
           glowColor: el.glow ? color : undefined,
           glowRadius: el.glow ? (el.glowRadius ?? 4) * scale : 0
         }, i);
       }
+      if (el.type === 'text') {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconPrimitives.IconText, {
+          x: center + el.x * scale,
+          y: center + el.y * scale,
+          text: el.text,
+          fontSize: (el.size ?? 2) * scale,
+          fontWeight: el.weight,
+          align: el.align,
+          letterSpacing: el.letterSpacing !== undefined ? el.letterSpacing * scale : undefined,
+          fill: resolveColor(el.fill ?? 'color', color, bgColor),
+          opacity: el.opacity,
+          rotation: el.rotation
+        }, i);
+      }
       if (el.type === 'smootharc') {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconPrimitives.IconSmoothArc, {
           cx: center + el.cx * scale,

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "RIVERPOD_ICON_COLOR", {
+  enumerable: true,
+  get: function () {
+    return _iconDataG.RIVERPOD_ICON_COLOR;
+  }
+});
+exports.RiverpodIcon = void 0;
+var _iconRenderer = require("./icon-renderer.js");
+var _iconDataG = require("./generated/icon-data.g.js");
+/**
+ * RiverpodIcon - Data-driven icon
+ *
+ * Water-drop mark for the Flutter Riverpod inspector (paired color with Jotai).
+ *
+ * Defined as pure data in shared/icons/riverpod.json (Buoy Icon Format), so this
+ * is the same artwork the Flutter build renders.
+ *
+ * To change: edit that JSON, then run `node scripts/gen-icons.mjs`.
+ */
+
+const RiverpodIcon = exports.RiverpodIcon = (0, _iconRenderer.createIcon)(_iconDataG.riverpodIconData);

package/lib/commonjs/icons/time-machine-icon.js

@@ -15,7 +15,7 @@ var _iconDataG = require("./generated/icon-data.g.js");
 /**
  * TimeMachineIcon - Data-driven icon
  *
- * Clock face inside a rewind arc — snapshot & restore app state.
+ * Police box (a very specific time machine) — snapshot & restore app state.
  *
  * Defined as pure data in shared/icons/time-machine.json (Buoy Icon Format),
  * so this is the same artwork the Flutter build renders.

package/lib/commonjs/index.js

@@ -345,6 +345,12 @@ Object.defineProperty(exports, "RENDERS_ICON_COLOR", {
     return _rendersIcon.RENDERS_ICON_COLOR;
   }
 });
+Object.defineProperty(exports, "RIVERPOD_ICON_COLOR", {
+  enumerable: true,
+  get: function () {
+    return _riverpodIcon.RIVERPOD_ICON_COLOR;
+  }
+});
 Object.defineProperty(exports, "ROUTES_ICON_COLOR", {
   enumerable: true,
   get: function () {
@@ -363,6 +369,12 @@ Object.defineProperty(exports, "RendersIcon", {
     return _rendersIcon.RendersIcon;
   }
 });
+Object.defineProperty(exports, "RiverpodIcon", {
+  enumerable: true,
+  get: function () {
+    return _riverpodIcon.RiverpodIcon;
+  }
+});
 Object.defineProperty(exports, "RouteDotIcon", {
   enumerable: true,
   get: function () {
@@ -866,5 +878,6 @@ var _impersonateIcon = require("./icons/impersonate-icon.js");
 var _imageOverlayIcon = require("./icons/image-overlay-icon.js");
 var _zustandIcon = require("./icons/zustand-icon.js");
 var _jotaiIcon = require("./icons/jotai-icon.js");
+var _riverpodIcon = require("./icons/riverpod-icon.js");
 var _iconFactories = require("./icons/icon-factories.js");
 var _iconRenderer = require("./icons/icon-renderer.js");