@buoy-gg/floating-tools-core 7.0.38 → 7.0.40

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

@@ -1 +1,899 @@
-"use strict";import{memo}from"react";import{Text,View}from"react-native";import{ICON_GLOW}from"./iconGlow.js";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";export const IconContainer=({size:t,children:o,style:e})=>_jsx(View,{style:[{position:"relative",width:t,height:t},e],children:o});const IconCircleImpl=({cx:t,cy:o,r:e,fill:r,borderColor:i,borderWidth:a=0,opacity:s=1,scaleX:n=1,scaleY:d=1,glowColor:h,glowRadius:l=0})=>{const c=2*e,p=[];1!==n&&p.push({scaleX:n}),1!==d&&p.push({scaleY:d});const b=h&&l>0&&(!r||"transparent"===r),g=r&&"transparent"!==r,u={position:"absolute",left:t-e,top:o-e,width:c,height:c,borderRadius:e,backgroundColor:r,borderColor:i,borderWidth:a,opacity:s,transform:p.length>0?p:void 0,...h&&l>0&&g&&{shadowColor:h,shadowOffset:{width:0,height:0},shadowOpacity:ICON_GLOW.filledShadowOpacity,shadowRadius:l*ICON_GLOW.filledRadiusScale}};return b?_jsxs(_Fragment,{children:[_jsx(View,{style:{position:"absolute",left:t-e,top:o-e,width:2*e,height:2*e,borderRadius:e,backgroundColor:"#000",borderWidth:a||1,borderColor:h,opacity:ICON_GLOW.ringLayerOpacity,transform:p.length>0?p:void 0,shadowColor:h,shadowOffset:{width:0,height:0},shadowOpacity:ICON_GLOW.ringShadowOpacity,shadowRadius:ICON_GLOW.ringShadowRadius}}),_jsx(View,{style:u})]}):_jsx(View,{style:u})},IconRectImpl=({x:t,y:o,width:e,height:r,fill:i,borderColor:a,borderWidth:s=0,borderRadius:n=0,opacity:d=1,glowColor:h,glowRadius:l=0,rotation:c,originX:p=.5,originY:b=.5})=>{const g=[];if(void 0!==c){const t=(.5-p)*e,o=(.5-b)*r;0===t&&0===o||(g.push({translateX:-t}),g.push({translateY:-o})),g.push({rotate:`${c}deg`}),0===t&&0===o||(g.push({translateX:t}),g.push({translateY:o}))}const u=h&&l>0,m=u&&(!i||"transparent"===i),w=i&&"transparent"!==i,f={position:"absolute",left:t,top:o,width:e,height:r,borderRadius:n,backgroundColor:i,borderColor:a,borderWidth:s,opacity:d,transform:g.length>0?g:void 0,...u&&w&&{shadowColor:h,shadowOffset:{width:0,height:0},shadowOpacity:ICON_GLOW.filledShadowOpacity,shadowRadius:l*ICON_GLOW.filledRadiusScale}};if(m){const i=s||1;return _jsxs(_Fragment,{children:[_jsx(View,{style:{position:"absolute",left:t-i,top:o-i,width:e+2*i,height:r+2*i,borderRadius:n+i,borderWidth:i*ICON_GLOW.rectBorderScale,borderColor:h,opacity:ICON_GLOW.rectLayerOpacity,transform:g.length>0?g:void 0,shadowColor:h,shadowOffset:{width:0,height:0},shadowOpacity:ICON_GLOW.rectShadowOpacity,shadowRadius:i*ICON_GLOW.rectShadowRadiusScale}}),_jsx(View,{style:f})]})}return _jsx(View,{style:f})},CURVE_FLATTEN_TOLERANCE=.08,CURVE_FLATTEN_SAFETY=1.5,CURVE_MAX_SEGMENTS=48;function bezierSegmentCount(t,o,e,r,i,a,s,n,d,h){let l;if(d){const d=t-2*e+i,h=o-2*r+a,c=e-2*i+s,p=r-2*a+n;l=3*Math.max(Math.hypot(d,h),Math.hypot(c,p))}else l=Math.hypot(t-2*e+s,o-2*r+n);if(!(l>0))return 2;const c=Math.ceil(1.5*Math.sqrt(l/(8*h)));return Math.max(2,Math.min(48,c))}function getQuadraticBezierPoint(t,o,e,r,i,a,s){const n=1-t;return{x:n*n*o+2*n*t*r+t*t*a,y:n*n*e+2*n*t*i+t*t*s}}function getCubicBezierPoint(t,o,e,r,i,a,s,n,d){const h=1-t,l=h*h,c=l*h,p=t*t,b=p*t;return{x:c*o+3*l*t*r+3*h*p*a+b*n,y:c*e+3*l*t*i+3*h*p*s+b*d}}const IconTextImpl=({x:t,y:o,text:e,fontSize:r,fontWeight:i=700,align:a="center",fill:s,opacity:n=1,rotation:d,letterSpacing:h=0})=>{const l=e.length*r*.75+Math.max(0,e.length-1)*h+r,c=1.5*r,p={position:"absolute",left:"left"===a?t:"right"===a?t-l:t-l/2,top:o-c/2,width:l,height:c,justifyContent:"center",transform:void 0!==d?[{rotate:`${d}deg`}]:void 0},b={color:s,fontSize:r,fontWeight:String(i),textAlign:a,letterSpacing:h,opacity:n,includeFontPadding:!1};return _jsx(View,{style:p,pointerEvents:"none",children:_jsx(Text,{style:b,numberOfLines:1,allowFontScaling:!1,children:e})})},IconLineImpl=({x1:t,y1:o,x2:e,y2:r,stroke:i,strokeWidth:a=1,opacity:s=1,glowColor:n,glowRadius:d=0,rotation:h=0,curveX:l,curveY:c,curve2X:p,curve2Y:b})=>{const g=void 0!==l&&0!==l||void 0!==c&&0!==c,u=void 0!==p&&0!==p||void 0!==b&&0!==b;if(g||u){const n=(t+e)/2,d=(o+r)/2,h=n+(l??0),m=d+(c??0),w=n+(p??0),f=d+(b??0),y=g&&u,C=g?h:w,O=g?m:f,I=i=>y?getCubicBezierPoint(i,t,o,h,m,w,f,e,r):getQuadraticBezierPoint(i,t,o,C,O,e,r),x=bezierSegmentCount(t,o,y?h:C,y?m:O,w,f,e,r,y,.08),_=[];let R={x:t,y:o};for(let t=1;t<=x;t++){const o=I(t/x),e=o.x-R.x,r=o.y-R.y,n=Math.sqrt(e*e+r*r),d=Math.atan2(r,e)*(180/Math.PI),h=t>1?a/2:0,l=t<x?a/2:0,c=n+h+l,p=(R.x+o.x)/2+(n>0?e/n:0)*(l-h)/2,b=(R.y+o.y)/2+(n>0?r/n:0)*(l-h)/2;_.push(_jsx(View,{style:{position:"absolute",left:p-c/2,top:b-a/2,width:c,height:a,borderRadius:a/2,backgroundColor:i,opacity:s,transform:[{rotate:`${d}deg`}]}},`s${t}`)),R=o}return _jsx(_Fragment,{children:_})}const m=e-t,w=r-o,f=Math.sqrt(m*m+w*w),y=Math.atan2(w,m)*(180/Math.PI),C=(t+e)/2,O=(o+r)/2,I=y+h,x={position:"absolute",left:C-f/2,top:O-a/2,width:f,height:a,backgroundColor:i,opacity:s,transform:[{rotate:`${I}deg`}],borderRadius:a/2};return n&&d>0?_jsxs(_Fragment,{children:[_jsx(View,{style:{position:"absolute",left:C-f/2,top:O-a/2,width:f,height:a,backgroundColor:n,opacity:ICON_GLOW.lineLayerOpacity,transform:[{rotate:`${I}deg`}],borderRadius:a/2,shadowColor:n,shadowOffset:{width:0,height:0},shadowOpacity:ICON_GLOW.lineShadowOpacity,shadowRadius:ICON_GLOW.lineShadowRadius}}),_jsx(View,{style:x})]}):_jsx(View,{style:x})},IconTriangleImpl=({x:t,y:o,size:e,direction:r,fill:i,opacity:a=1,rotation:s})=>{const n=.577*e;let d={},h=0,l=0;switch(r){case"down":d={borderLeftWidth:n,borderRightWidth:n,borderTopWidth:e,borderLeftColor:"transparent",borderRightColor:"transparent",borderTopColor:i},h=-n,l=0;break;case"up":d={borderLeftWidth:n,borderRightWidth:n,borderBottomWidth:e,borderLeftColor:"transparent",borderRightColor:"transparent",borderBottomColor:i},h=-n,l=-e;break;case"left":d={borderTopWidth:n,borderBottomWidth:n,borderRightWidth:e,borderTopColor:"transparent",borderBottomColor:"transparent",borderRightColor:i},h=-e,l=-n;break;case"right":d={borderTopWidth:n,borderBottomWidth:n,borderLeftWidth:e,borderTopColor:"transparent",borderBottomColor:"transparent",borderLeftColor:i},h=0,l=-n}const c=[];void 0!==s&&c.push({rotate:`${s}deg`});const p={position:"absolute",left:t+h,top:o+l,width:0,height:0,opacity:a,...d,transform:c.length>0?c:void 0};return _jsx(View,{style:p})},IconArcImpl=({cx:t,cy:o,r:e,startAngle:r,endAngle:i,stroke:a,strokeWidth:s=1.5,opacity:n=1,segments:d})=>{const h=Math.abs(i-r),l=Math.max(8,Math.ceil(h/10)),c=d??l,p=[],b=(i-r)/c;for(let i=0;i<c;i++){const d=r+(i+1)*b,h=(r+i*b)*Math.PI/180,l=d*Math.PI/180,g=t+e*Math.cos(h),u=o+e*Math.sin(h),m=t+e*Math.cos(l),w=o+e*Math.sin(l),f=m-g,y=w-u,C=Math.sqrt(f*f+y*y),O=i>0?s/2:0,I=i<c-1?s/2:0,x=C+O+I,_={position:"absolute",left:(g+m)/2+(C>0?f/C:0)*(I-O)/2-x/2,top:(u+w)/2+(C>0?y/C:0)*(I-O)/2-s/2,width:x,height:s,backgroundColor:a,opacity:n,transform:[{rotate:Math.atan2(y,f)*(180/Math.PI)+"deg"}],borderRadius:s/2};p.push(_jsx(View,{style:_},i))}return _jsx(_Fragment,{children:p})},IconSemicircleImpl=({cx:t,cy:o,r:e,half:r,fill:i,borderColor:a,borderWidth:s=0,opacity:n=1,glowColor:d,glowRadius:h=0})=>{const l=2*e;let c,p,b,g,u=0,m=0,w=0,f=0;switch(r){case"top":c=t-e,p=o-e,b=l,g=e,u=e,m=e;break;case"bottom":c=t-e,p=o,b=l,g=e,w=e,f=e;break;case"left":c=t-e,p=o-e,b=e,g=l,u=e,w=e;break;case"right":c=t,p=o-e,b=e,g=l,m=e,f=e}const y=d&&h>0,C=y&&(!i||"transparent"===i),O={position:"absolute",left:c,top:p,width:b,height:g,borderTopLeftRadius:u,borderTopRightRadius:m,borderBottomLeftRadius:w,borderBottomRightRadius:f,backgroundColor:i,borderColor:a,borderWidth:s,opacity:n,...y&&i&&"transparent"!==i&&{shadowColor:d,shadowOffset:{width:0,height:0},shadowOpacity:ICON_GLOW.filledShadowOpacity,shadowRadius:h*ICON_GLOW.filledRadiusScale}};if(C){const i=s||1,a=e+i;return _jsxs(_Fragment,{children:[_jsx(View,{style:{position:"absolute",left:t-("right"===r?0:a),top:o-("bottom"===r?0:a),width:"left"===r||"right"===r?a:2*a,height:"top"===r||"bottom"===r?a:2*a,borderTopLeftRadius:"top"===r||"left"===r?a:0,borderTopRightRadius:"top"===r||"right"===r?a:0,borderBottomLeftRadius:"bottom"===r||"left"===r?a:0,borderBottomRightRadius:"bottom"===r||"right"===r?a:0,borderWidth:i*ICON_GLOW.rectBorderScale,borderColor:d,opacity:ICON_GLOW.rectLayerOpacity,shadowColor:d,shadowOffset:{width:0,height:0},shadowOpacity:ICON_GLOW.rectShadowOpacity,shadowRadius:i*ICON_GLOW.rectShadowRadiusScale}}),_jsx(View,{style:O})]})}return _jsx(View,{style:O})},IconSmoothArcImpl=({cx:t,cy:o,r:e,stroke:r,strokeWidth:i=2,opacity:a=1,portion:s="bottom"})=>{const n=2*e;let d=r,h=r,l=r,c=r;switch(s){case"bottom":d="transparent",l="transparent",c="transparent";break;case"top":h="transparent",l="transparent",c="transparent";break;case"left":d="transparent",h="transparent",c="transparent";break;case"right":d="transparent",h="transparent",l="transparent"}return _jsx(View,{style:{position:"absolute",left:t-e,top:o-e,width:n,height:n,borderRadius:e,borderWidth:i,borderTopColor:d,borderBottomColor:h,borderLeftColor:l,borderRightColor:c,opacity:a}})};export const IconCircle=memo(IconCircleImpl);export const IconRect=memo(IconRectImpl);export const IconText=memo(IconTextImpl);export const IconLine=memo(IconLineImpl);export const IconTriangle=memo(IconTriangleImpl);export const IconArc=memo(IconArcImpl);export const IconSemicircle=memo(IconSemicircleImpl);export const IconSmoothArc=memo(IconSmoothArcImpl);
+"use strict";
+
+/**
+ * Icon Primitives - MOBILE (React Native)
+ *
+ * This file is auto-picked by Metro (React Native bundler).
+ * Web bundlers pick icon-primitives.tsx instead.
+ */
+
+import { memo } from 'react';
+import { Text, View } from 'react-native';
+import { ICON_GLOW } from "./iconGlow.js";
+
+// ===========================================
+// Types
+// ===========================================
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// ===========================================
+// Mobile Primitives (React Native Views)
+// ===========================================
+
+export const IconContainer = ({
+  size,
+  children,
+  style
+}) => {
+  const box = {
+    position: 'relative',
+    width: size,
+    height: size
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: [box, style],
+    children: children
+  });
+};
+const IconCircleImpl = ({
+  cx,
+  cy,
+  r,
+  fill,
+  borderColor,
+  borderWidth = 0,
+  opacity = 1,
+  scaleX = 1,
+  scaleY = 1,
+  glowColor,
+  glowRadius = 0
+}) => {
+  const diameter = r * 2;
+
+  // Build transforms array
+  const transforms = [];
+  if (scaleX !== 1) transforms.push({
+    scaleX
+  });
+  if (scaleY !== 1) transforms.push({
+    scaleY
+  });
+
+  // Check if this is a "transparent" element (border-only ring)
+  // RN shadows require backgroundColor, so we need a separate glow layer
+  const needsSeparateGlow = glowColor && glowRadius > 0 && (!fill || fill === 'transparent');
+  const hasFillForShadow = fill && fill !== 'transparent';
+  const style = {
+    position: 'absolute',
+    left: cx - r,
+    top: cy - r,
+    width: diameter,
+    height: diameter,
+    borderRadius: r,
+    backgroundColor: fill,
+    borderColor,
+    borderWidth,
+    opacity,
+    transform: transforms.length > 0 ? transforms : undefined,
+    // Only apply shadow if we have a fill (RN shadows need backgroundColor)
+    ...(glowColor && glowRadius > 0 && hasFillForShadow && {
+      shadowColor: glowColor,
+      shadowOffset: {
+        width: 0,
+        height: 0
+      },
+      shadowOpacity: ICON_GLOW.filledShadowOpacity,
+      shadowRadius: glowRadius * ICON_GLOW.filledRadiusScale
+    })
+  };
+
+  // For border-only elements (rings), create glow using a filled circle with shadow
+  // The trick: use backgroundColor:'#000' (matches icon bg) so shadow renders,
+  // with glowColor on the border for the visible glow effect
+  if (needsSeparateGlow) {
+    const strokeW = borderWidth || 1;
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          position: 'absolute',
+          left: cx - r,
+          top: cy - r,
+          width: r * 2,
+          height: r * 2,
+          borderRadius: r,
+          backgroundColor: '#000',
+          // Matches icon bg - enables shadow
+          borderWidth: strokeW,
+          borderColor: glowColor,
+          opacity: ICON_GLOW.ringLayerOpacity,
+          transform: transforms.length > 0 ? transforms : undefined,
+          shadowColor: glowColor,
+          shadowOffset: {
+            width: 0,
+            height: 0
+          },
+          shadowOpacity: ICON_GLOW.ringShadowOpacity,
+          shadowRadius: ICON_GLOW.ringShadowRadius
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: style
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: style
+  });
+};
+const IconRectImpl = ({
+  x,
+  y,
+  width,
+  height,
+  fill,
+  borderColor,
+  borderWidth = 0,
+  borderRadius = 0,
+  opacity = 1,
+  glowColor,
+  glowRadius = 0,
+  rotation,
+  originX = 0.5,
+  // default center
+  originY = 0.5 // default center
+}) => {
+  // Build transform array
+  // React Native rotates around center by default.
+  // To rotate around a custom origin, we:
+  // 1. Translate so the origin point moves to center
+  // 2. Rotate
+  // 3. Translate back
+
+  const transforms = [];
+  if (rotation !== undefined) {
+    // Calculate offset from center to desired origin
+    // originX/originY are 0-1 values (0=left/top, 0.5=center, 1=right/bottom)
+    const offsetX = (0.5 - originX) * width;
+    const offsetY = (0.5 - originY) * height;
+
+    // Apply transforms: translate to origin, rotate, translate back
+    if (offsetX !== 0 || offsetY !== 0) {
+      transforms.push({
+        translateX: -offsetX
+      });
+      transforms.push({
+        translateY: -offsetY
+      });
+    }
+    transforms.push({
+      rotate: `${rotation}deg`
+    });
+    if (offsetX !== 0 || offsetY !== 0) {
+      transforms.push({
+        translateX: offsetX
+      });
+      transforms.push({
+        translateY: offsetY
+      });
+    }
+  }
+
+  // Check if this is a "transparent" element (border-only)
+  // RN shadows require backgroundColor, so we need a separate glow layer
+  const hasGlow = glowColor && glowRadius > 0;
+  const needsSeparateGlow = hasGlow && (!fill || fill === 'transparent');
+  const hasFillForShadow = fill && fill !== 'transparent';
+  const style = {
+    position: 'absolute',
+    left: x,
+    top: y,
+    width,
+    height,
+    borderRadius,
+    backgroundColor: fill,
+    borderColor,
+    borderWidth,
+    opacity,
+    transform: transforms.length > 0 ? transforms : undefined,
+    // Only apply shadow if we have a fill (RN shadows need backgroundColor)
+    ...(hasGlow && hasFillForShadow && {
+      shadowColor: glowColor,
+      shadowOffset: {
+        width: 0,
+        height: 0
+      },
+      shadowOpacity: ICON_GLOW.filledShadowOpacity,
+      shadowRadius: glowRadius * ICON_GLOW.filledRadiusScale
+    })
+  };
+
+  // For border-only elements, render a glow rect with shadow
+  if (needsSeparateGlow) {
+    const strokeW = borderWidth || 1;
+    const glowExpand = strokeW;
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          position: 'absolute',
+          left: x - glowExpand,
+          top: y - glowExpand,
+          width: width + glowExpand * 2,
+          height: height + glowExpand * 2,
+          borderRadius: borderRadius + glowExpand,
+          borderWidth: strokeW * ICON_GLOW.rectBorderScale,
+          borderColor: glowColor,
+          opacity: ICON_GLOW.rectLayerOpacity,
+          transform: transforms.length > 0 ? transforms : undefined,
+          shadowColor: glowColor,
+          shadowOffset: {
+            width: 0,
+            height: 0
+          },
+          shadowOpacity: ICON_GLOW.rectShadowOpacity,
+          shadowRadius: strokeW * ICON_GLOW.rectShadowRadiusScale
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: style
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: style
+  });
+};
+
+/**
+ * Curve flattening budget, in dp. A curved line is drawn as a polyline of
+ * straight capsule segments (the same primitive the straight-line path below
+ * uses); the segment count is derived from the standard Bezier flattening
+ * bound so the polyline never strays further than this from the true curve,
+ * however the curve was authored. 0.08dp is a quarter of a physical pixel on a
+ * 3x screen — well below anything the eye can resolve.
+ */
+const CURVE_FLATTEN_TOLERANCE = 0.08;
+/**
+ * The analytic bound is derived for a slightly different error metric than the
+ * one that matters here (distance from the curve to the *nearest* segment), so
+ * the segment count is padded. 1.5 was the smallest factor that satisfied every
+ * curve in shared/icons when checked against an exact numeric search.
+ */
+const CURVE_FLATTEN_SAFETY = 1.5;
+/** Hard ceiling, so a pathologically authored curve can never explode the tree. */
+const CURVE_MAX_SEGMENTS = 48;
+
+/**
+ * How many straight segments a Bezier needs to stay within `tolerance` of the
+ * true curve, via the second-difference flattening bound.
+ */
+function bezierSegmentCount(p0x, p0y, c1x, c1y, c2x, c2y, p1x, p1y, isCubic, tolerance) {
+  let secondDiff;
+  if (isCubic) {
+    const ax = p0x - 2 * c1x + c2x;
+    const ay = p0y - 2 * c1y + c2y;
+    const bx = c1x - 2 * c2x + p1x;
+    const by = c1y - 2 * c2y + p1y;
+    secondDiff = 3 * Math.max(Math.hypot(ax, ay), Math.hypot(bx, by));
+  } else {
+    secondDiff = Math.hypot(p0x - 2 * c1x + p1x, p0y - 2 * c1y + p1y);
+  }
+  if (!(secondDiff > 0)) return 2;
+  const n = Math.ceil(CURVE_FLATTEN_SAFETY * Math.sqrt(secondDiff / (8 * tolerance)));
+  return Math.max(2, Math.min(CURVE_MAX_SEGMENTS, n));
+}
+
+/**
+ * Calculates a point on a quadratic Bezier curve (1 control point)
+ * B(t) = (1-t)²P0 + 2(1-t)tP1 + t²P2
+ */
+function getQuadraticBezierPoint(t, p0x, p0y, p1x, p1y, p2x, p2y) {
+  const mt = 1 - t;
+  return {
+    x: mt * mt * p0x + 2 * mt * t * p1x + t * t * p2x,
+    y: mt * mt * p0y + 2 * mt * t * p1y + t * t * p2y
+  };
+}
+
+/**
+ * Calculates a point on a cubic Bezier curve (2 control points)
+ * B(t) = (1-t)³P0 + 3(1-t)²tP1 + 3(1-t)t²P2 + t³P3
+ */
+function getCubicBezierPoint(t, p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y) {
+  const mt = 1 - t;
+  const mt2 = mt * mt;
+  const mt3 = mt2 * mt;
+  const t2 = t * t;
+  const t3 = t2 * t;
+  return {
+    x: mt3 * p0x + 3 * mt2 * t * p1x + 3 * mt * t2 * p2x + t3 * p3x,
+    y: mt3 * p0y + 3 * mt2 * t * p1y + 3 * mt * t2 * p2y + t3 * p3y
+  };
+}
+const IconTextImpl = ({
+  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__*/_jsx(View, {
+    style: containerStyle,
+    pointerEvents: "none",
+    children: /*#__PURE__*/_jsx(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).
+ */
+const IconLineImpl = ({
+  x1,
+  y1,
+  x2,
+  y2,
+  stroke,
+  strokeWidth = 1,
+  opacity = 1,
+  glowColor,
+  glowRadius = 0,
+  rotation = 0,
+  curveX,
+  curveY,
+  curve2X,
+  curve2Y
+}) => {
+  // Check if this is a curved line (either control point set)
+  const hasCurve1 = curveX !== undefined && curveX !== 0 || curveY !== undefined && curveY !== 0;
+  const hasCurve2 = curve2X !== undefined && curve2X !== 0 || curve2Y !== undefined && curve2Y !== 0;
+  const isCurved = hasCurve1 || hasCurve2;
+  if (isCurved) {
+    const midX = (x1 + x2) / 2;
+    const midY = (y1 + y2) / 2;
+
+    // Control points: offset from line midpoint
+    const control1X = midX + (curveX ?? 0);
+    const control1Y = midY + (curveY ?? 0);
+    const control2X = midX + (curve2X ?? 0);
+    const control2Y = midY + (curve2Y ?? 0);
+
+    // Determine if cubic (2 distinct control points) or quadratic (1 control point)
+    const isCubic = hasCurve1 && hasCurve2;
+    const soleControlX = hasCurve1 ? control1X : control2X;
+    const soleControlY = hasCurve1 ? control1Y : control2Y;
+    const pointAt = t => isCubic ? getCubicBezierPoint(t, x1, y1, control1X, control1Y, control2X, control2Y, x2, y2) : getQuadraticBezierPoint(t, x1, y1, soleControlX, soleControlY, x2, y2);
+    const segments = bezierSegmentCount(x1, y1, isCubic ? control1X : soleControlX, isCubic ? control1Y : soleControlY, control2X, control2Y, x2, y2, isCubic, CURVE_FLATTEN_TOLERANCE);
+    const elements = [];
+    let prev = {
+      x: x1,
+      y: y1
+    };
+    for (let i = 1; i <= segments; i++) {
+      const pt = pointAt(i / segments);
+      const segDx = pt.x - prev.x;
+      const segDy = pt.y - prev.y;
+      const segLength = Math.sqrt(segDx * segDx + segDy * segDy);
+      const segAngle = Math.atan2(segDy, segDx) * (180 / Math.PI);
+      const segCenterX = (prev.x + pt.x) / 2;
+      const segCenterY = (prev.y + pt.y) / 2;
+
+      // 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(View, {
+        style: {
+          position: 'absolute',
+          left: capCenterX - capLength / 2,
+          top: capCenterY - strokeWidth / 2,
+          width: capLength,
+          height: strokeWidth,
+          borderRadius: strokeWidth / 2,
+          backgroundColor: stroke,
+          opacity,
+          transform: [{
+            rotate: `${segAngle}deg`
+          }]
+        }
+      }, `s${i}`));
+      prev = pt;
+    }
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: elements
+    });
+  }
+
+  // Straight line (original logic)
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const length = Math.sqrt(dx * dx + dy * dy);
+  const angle = Math.atan2(dy, dx) * (180 / Math.PI);
+
+  // Position at midpoint of line
+  const centerX = (x1 + x2) / 2;
+  const centerY = (y1 + y2) / 2;
+
+  // Total rotation = line angle + additional rotation
+  const totalRotation = angle + rotation;
+  const hasGlow = glowColor && glowRadius > 0;
+  const style = {
+    position: 'absolute',
+    left: centerX - length / 2,
+    top: centerY - strokeWidth / 2,
+    width: length,
+    height: strokeWidth,
+    backgroundColor: stroke,
+    opacity,
+    transform: [{
+      rotate: `${totalRotation}deg`
+    }],
+    borderRadius: strokeWidth / 2
+  };
+
+  // For neon glow effect, render a glow line with shadow
+  if (hasGlow) {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          position: 'absolute',
+          left: centerX - length / 2,
+          top: centerY - strokeWidth / 2,
+          width: length,
+          height: strokeWidth,
+          backgroundColor: glowColor,
+          opacity: ICON_GLOW.lineLayerOpacity,
+          transform: [{
+            rotate: `${totalRotation}deg`
+          }],
+          borderRadius: strokeWidth / 2,
+          // Shadow creates the glow
+          shadowColor: glowColor,
+          shadowOffset: {
+            width: 0,
+            height: 0
+          },
+          shadowOpacity: ICON_GLOW.lineShadowOpacity,
+          shadowRadius: ICON_GLOW.lineShadowRadius
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: style
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: style
+  });
+};
+
+/**
+ * IconTriangle - creates triangles using CSS border trick
+ * Works in pure React Native!
+ */
+const IconTriangleImpl = ({
+  x,
+  y,
+  size,
+  direction,
+  fill,
+  opacity = 1,
+  rotation
+}) => {
+  // CSS border trick: use transparent borders to create triangle
+  // The size is the height of the triangle
+  const halfWidth = size * 0.577; // size / sqrt(3) for equilateral-ish triangle
+
+  // Build border styles based on direction
+  let borderStyles = {};
+  let offsetX = 0;
+  let offsetY = 0;
+  switch (direction) {
+    case 'down':
+      borderStyles = {
+        borderLeftWidth: halfWidth,
+        borderRightWidth: halfWidth,
+        borderTopWidth: size,
+        borderLeftColor: 'transparent',
+        borderRightColor: 'transparent',
+        borderTopColor: fill
+      };
+      offsetX = -halfWidth;
+      offsetY = 0;
+      break;
+    case 'up':
+      borderStyles = {
+        borderLeftWidth: halfWidth,
+        borderRightWidth: halfWidth,
+        borderBottomWidth: size,
+        borderLeftColor: 'transparent',
+        borderRightColor: 'transparent',
+        borderBottomColor: fill
+      };
+      offsetX = -halfWidth;
+      offsetY = -size;
+      break;
+    case 'left':
+      borderStyles = {
+        borderTopWidth: halfWidth,
+        borderBottomWidth: halfWidth,
+        borderRightWidth: size,
+        borderTopColor: 'transparent',
+        borderBottomColor: 'transparent',
+        borderRightColor: fill
+      };
+      offsetX = -size;
+      offsetY = -halfWidth;
+      break;
+    case 'right':
+      borderStyles = {
+        borderTopWidth: halfWidth,
+        borderBottomWidth: halfWidth,
+        borderLeftWidth: size,
+        borderTopColor: 'transparent',
+        borderBottomColor: 'transparent',
+        borderLeftColor: fill
+      };
+      offsetX = 0;
+      offsetY = -halfWidth;
+      break;
+  }
+
+  // Build transforms
+  const transforms = [];
+  if (rotation !== undefined) {
+    transforms.push({
+      rotate: `${rotation}deg`
+    });
+  }
+  const style = {
+    position: 'absolute',
+    left: x + offsetX,
+    top: y + offsetY,
+    width: 0,
+    height: 0,
+    opacity,
+    ...borderStyles,
+    transform: transforms.length > 0 ? transforms : undefined
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: style
+  });
+};
+
+/**
+ * IconArc - draws an arc using multiple line segments
+ * Creates smooth curves in pure React Native!
+ */
+const IconArcImpl = ({
+  cx,
+  cy,
+  r,
+  startAngle,
+  endAngle,
+  stroke,
+  strokeWidth = 1.5,
+  opacity = 1,
+  segments
+}) => {
+  // Calculate number of segments based on arc length
+  const arcLength = Math.abs(endAngle - startAngle);
+  const autoSegments = Math.max(8, Math.ceil(arcLength / 10)); // ~10 degrees per segment
+  const numSegments = segments ?? autoSegments;
+
+  // Generate line segments
+  const lines = [];
+  const angleStep = (endAngle - startAngle) / numSegments;
+  for (let i = 0; i < numSegments; i++) {
+    const angle1 = startAngle + i * angleStep;
+    const angle2 = startAngle + (i + 1) * angleStep;
+
+    // Convert to radians
+    const rad1 = angle1 * Math.PI / 180;
+    const rad2 = angle2 * Math.PI / 180;
+
+    // Calculate segment endpoints
+    const x1 = cx + r * Math.cos(rad1);
+    const y1 = cy + r * Math.sin(rad1);
+    const x2 = cx + r * Math.cos(rad2);
+    const y2 = cy + r * Math.sin(rad2);
+
+    // 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 segLen = Math.sqrt(dx * dx + dy * dy);
+    const angle = Math.atan2(dy, dx) * (180 / Math.PI);
+    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,
+      top: midY - strokeWidth / 2,
+      width: length,
+      height: strokeWidth,
+      backgroundColor: stroke,
+      opacity,
+      transform: [{
+        rotate: `${angle}deg`
+      }],
+      borderRadius: strokeWidth / 2
+    };
+    lines.push(/*#__PURE__*/_jsx(View, {
+      style: style
+    }, i));
+  }
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: lines
+  });
+};
+
+/**
+ * IconSemicircle - creates a half circle (filled)
+ * Perfect for pokeball-style split designs!
+ */
+const IconSemicircleImpl = ({
+  cx,
+  cy,
+  r,
+  half,
+  fill,
+  borderColor,
+  borderWidth = 0,
+  opacity = 1,
+  glowColor,
+  glowRadius = 0
+}) => {
+  const diameter = r * 2;
+
+  // Calculate position and border radii based on which half
+  let left;
+  let top;
+  let width;
+  let height;
+  let borderTopLeftRadius = 0;
+  let borderTopRightRadius = 0;
+  let borderBottomLeftRadius = 0;
+  let borderBottomRightRadius = 0;
+  switch (half) {
+    case 'top':
+      left = cx - r;
+      top = cy - r;
+      width = diameter;
+      height = r;
+      borderTopLeftRadius = r;
+      borderTopRightRadius = r;
+      break;
+    case 'bottom':
+      left = cx - r;
+      top = cy;
+      width = diameter;
+      height = r;
+      borderBottomLeftRadius = r;
+      borderBottomRightRadius = r;
+      break;
+    case 'left':
+      left = cx - r;
+      top = cy - r;
+      width = r;
+      height = diameter;
+      borderTopLeftRadius = r;
+      borderBottomLeftRadius = r;
+      break;
+    case 'right':
+      left = cx;
+      top = cy - r;
+      width = r;
+      height = diameter;
+      borderTopRightRadius = r;
+      borderBottomRightRadius = r;
+      break;
+  }
+
+  // Check if this is a "transparent" element (border-only)
+  // RN shadows require backgroundColor, so we need a separate glow layer
+  const hasGlow = glowColor && glowRadius > 0;
+  const needsSeparateGlow = hasGlow && (!fill || fill === 'transparent');
+  const hasFillForShadow = fill && fill !== 'transparent';
+  const style = {
+    position: 'absolute',
+    left,
+    top,
+    width,
+    height,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    backgroundColor: fill,
+    borderColor,
+    borderWidth,
+    opacity,
+    // Only apply shadow if we have a fill (RN shadows need backgroundColor)
+    ...(hasGlow && hasFillForShadow && {
+      shadowColor: glowColor,
+      shadowOffset: {
+        width: 0,
+        height: 0
+      },
+      shadowOpacity: ICON_GLOW.filledShadowOpacity,
+      shadowRadius: glowRadius * ICON_GLOW.filledRadiusScale
+    })
+  };
+
+  // For border-only elements, render a glow semicircle with shadow
+  if (needsSeparateGlow) {
+    const strokeW = borderWidth || 1;
+    const glowExpand = strokeW;
+    const glowR = r + glowExpand;
+    const glowWidth = half === 'left' || half === 'right' ? glowR : glowR * 2;
+    const glowHeight = half === 'top' || half === 'bottom' ? glowR : glowR * 2;
+    const glowLeft = cx - (half === 'right' ? 0 : glowR);
+    const glowTop = cy - (half === 'bottom' ? 0 : glowR);
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          position: 'absolute',
+          left: glowLeft,
+          top: glowTop,
+          width: glowWidth,
+          height: glowHeight,
+          borderTopLeftRadius: half === 'top' || half === 'left' ? glowR : 0,
+          borderTopRightRadius: half === 'top' || half === 'right' ? glowR : 0,
+          borderBottomLeftRadius: half === 'bottom' || half === 'left' ? glowR : 0,
+          borderBottomRightRadius: half === 'bottom' || half === 'right' ? glowR : 0,
+          borderWidth: strokeW * ICON_GLOW.rectBorderScale,
+          borderColor: glowColor,
+          opacity: ICON_GLOW.rectLayerOpacity,
+          shadowColor: glowColor,
+          shadowOffset: {
+            width: 0,
+            height: 0
+          },
+          shadowOpacity: ICON_GLOW.rectShadowOpacity,
+          shadowRadius: strokeW * ICON_GLOW.rectShadowRadiusScale
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: style
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: style
+  });
+};
+
+/**
+ * IconSmoothArc - creates a smooth arc using the border trick
+ * Uses bordered circles with partial borders hidden - gives perfect anti-aliased curves!
+ * This is how the WiFi icon achieves smooth lines without dots.
+ */
+const IconSmoothArcImpl = ({
+  cx,
+  cy,
+  r,
+  stroke,
+  strokeWidth = 2,
+  opacity = 1,
+  portion = 'bottom'
+}) => {
+  const diameter = r * 2;
+
+  // Build border colors based on which portion to show
+  let borderTopColor = stroke;
+  let borderBottomColor = stroke;
+  let borderLeftColor = stroke;
+  let borderRightColor = stroke;
+  switch (portion) {
+    case 'bottom':
+      // Show bottom arc (hide top, left, right)
+      borderTopColor = 'transparent';
+      borderLeftColor = 'transparent';
+      borderRightColor = 'transparent';
+      break;
+    case 'top':
+      // Show top arc (hide bottom, left, right)
+      borderBottomColor = 'transparent';
+      borderLeftColor = 'transparent';
+      borderRightColor = 'transparent';
+      break;
+    case 'left':
+      // Show left arc (hide top, bottom, right)
+      borderTopColor = 'transparent';
+      borderBottomColor = 'transparent';
+      borderRightColor = 'transparent';
+      break;
+    case 'right':
+      // Show right arc (hide top, bottom, left)
+      borderTopColor = 'transparent';
+      borderBottomColor = 'transparent';
+      borderLeftColor = 'transparent';
+      break;
+  }
+  const style = {
+    position: 'absolute',
+    left: cx - r,
+    top: cy - r,
+    width: diameter,
+    height: diameter,
+    borderRadius: r,
+    borderWidth: strokeWidth,
+    borderTopColor,
+    borderBottomColor,
+    borderLeftColor,
+    borderRightColor,
+    opacity
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: style
+  });
+};
+
+// ===========================================
+// Memoized leaf exports
+// ===========================================
+
+/**
+ * These primitives are LEAF nodes with measured render cost, so they are the
+ * one place rule2 sanctions React.memo. Every prop is a scalar, so a shallow
+ * compare is exact — an icon whose geometry did not change cannot re-render.
+ *
+ * Evidence (iOS sim, reopening the Time Machine tool, measure_renders):
+ * IconLine alone burned 58.3ms across 103 renders, 100% attributed to
+ * `parent` — a pure cascade from IconContainer with identical props. A curved
+ * IconLine expands to 100+ absolutely-positioned Views, so each of those
+ * cascaded renders rebuilt hundreds of style objects for an unchanged glyph.
+ */
+export const IconCircle = /*#__PURE__*/memo(IconCircleImpl);
+export const IconRect = /*#__PURE__*/memo(IconRectImpl);
+export const IconText = /*#__PURE__*/memo(IconTextImpl);
+export const IconLine = /*#__PURE__*/memo(IconLineImpl);
+export const IconTriangle = /*#__PURE__*/memo(IconTriangleImpl);
+export const IconArc = /*#__PURE__*/memo(IconArcImpl);
+export const IconSemicircle = /*#__PURE__*/memo(IconSemicircleImpl);
+export const IconSmoothArc = /*#__PURE__*/memo(IconSmoothArcImpl);