serpentine-border 3.0.1 → 3.0.3

package/dist/serpentine-border.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("react/jsx-runtime"),S=require("react"),G=["#ffffff","#000000"];function D(t,n,e){if(typeof t=="number")return t;const o=n*e;return t==="borderWidth"?o:t==="halfBorderWidth"?o/2:0}function V(t){return Object.entries(t).map(([n,e])=>{const o=n.replace(/([A-Z])/g,"-$1").toLowerCase(),c=typeof e=="number"&&!Number.isNaN(e)?`${e}px`:String(e);return`${o}: ${c}`}).join("; ")}function Z(t,n,e,o,c,p,u,s,i,h){const r=c*(e-1),a=c/2,$=n.length-1,l=[];for(let f=0;f<e;f++){const d=f*c,b=(e-1-f)*c,m=o-d,B=o-b,M=r-b,N=i-h+a,x=d-i+N,L=h,w=t+L-b-a,j=x+(o-d),A=t+L-o-a,z=t+L-r-a,y=i+s,g=[`M ${w} ${y-r-c/2-u}`,`L ${w} ${y-r-u}`,`A ${M} ${M} 0 0 1 ${z} ${y-b-u}`,`L ${j} ${d+s-u}`,`A ${m} ${m} 0 0 0 ${x} ${o+s-u}`,`L ${x} ${o+s}`];for(let C=0;C<$-1;C++){const v=n[C+1],O=n[C+2],U=v+o-i+s;C%2===0?(g.push(`L ${x} ${v-o+s}`),g.push(`A ${m}  ${m}  0 0 0 ${j}      ${v-d+s}`),g.push(`L ${A} ${v-d+s}`),g.push(`A ${B} ${B} 0 0 1 ${w} ${U}`),g.push(`L ${w} ${O-o+s}`)):(g.push(`L ${w} ${v-o+s}`),g.push(`A ${B} ${B} 0 0 1 ${A} ${v-b+s}`),g.push(`L ${j} ${v-b+s}`),g.push(`A ${m}  ${m}  0 0 0 ${x}      ${U}`),g.push(`L ${x} ${O-o+s}`))}const E=n[$];($-2)%2===0?g.push(`L ${w} ${E}`):g.push(`L ${x} ${E}`),l.push({d:g.join(" "),stroke:p[f%p.length],"stroke-width":c,fill:"none"})}return l}const X="serpentine-border-svg",k={strokeCount:5,strokeWidth:8,radius:50,horizontalOverflow:0,layoutMode:"border"};function P(t){const n=t.strokeCount??k.strokeCount,e=t.strokeWidth??k.strokeWidth,o=t.radius??k.radius,c=t.horizontalOverflow??k.horizontalOverflow,p=t.colors??G,u=t.layoutMode??k.layoutMode,s=t.svgClassName??X;let i,h;if(t.wrapperEl!=null){const A=t.wrapperEl;if(!(typeof document<"u"&&typeof A.getBoundingClientRect=="function"))return null;const y=q(A,{layoutMode:u,horizontalOverflow:c,strokeCount:n,strokeWidth:e,excludeClassName:s});if(!y)return null;i=y.width,h=y.sectionBottomYs}else{if(t.width==null||t.sectionBottomYs==null)return null;i=t.width,h=t.sectionBottomYs}const r=D(c,n,e),a=(n-1)*e,$=n*e,l=2*e,f=a/2,d=(n-1)/2*e+f,W=u==="border"?{boxSizing:"border-box",position:"relative",marginTop:`${$/2}px`,...r>0&&{paddingLeft:`${r}px`,paddingRight:`${r}px`}}:{position:"relative",boxSizing:"border-box"},b=u==="border"?{position:"absolute",overflow:"hidden",...r>0?{width:"100%",left:0}:{width:`calc(100% + ${2*r}px)`,left:-r},top:-(l+d),height:`calc(100% + ${l+d}px)`}:{position:"absolute",overflow:"hidden",width:`calc(100% + ${2*r}px)`,left:-r,top:-(l+d),height:`calc(100% + ${l+d}px)`},m=V(b),B=Z(i,h,n,o,e,p,d,f,a,r),M=h[h.length-1]??0,N=Math.max(1,i+2*r),x=M+l+d,L=r>0?-r:0,w=-e*2-d,j=`${L} ${w} ${N} ${x}`;return{wrapperStyle:W,svgAttributes:{class:s,viewBox:j,style:m},paths:B}}function J(t){const{sectionCount:n,strokeCount:e,strokeWidth:o}=t,c=t.horizontalOverflow??0,p=e*o,u=D(c,e,o),s=p/2,i=p-u,h={top:s,right:0,bottom:s,left:i},r={top:s,right:i,bottom:s,left:0},a=n>0&&(n-1)%2===0;return{even:h,odd:r,last:{top:s,right:a?0:i,bottom:0,left:a?i:0}}}function q(t,n){const{layoutMode:e,horizontalOverflow:o=0,strokeCount:c,strokeWidth:p,excludeClassName:u=X}=n,s=D(o,c,p);if(!t)return null;const i=u?Array.from(t.children).filter(l=>!l.classList.contains(u)):Array.from(t.children);if(i.length===0)return null;const h=t.getBoundingClientRect(),r=h.width,a=e==="border"?Math.max(1,r-2*s):Math.max(1,r),$=[0];for(let l=0;l<i.length;l++){const f=i[l].getBoundingClientRect();$.push(f.top-h.top+f.height)}return{width:a,sectionBottomYs:$}}function Q(t){const n={};if(!t||typeof t!="string")return n;for(const e of t.split(";")){const o=e.indexOf(":");if(o===-1)continue;const c=e.slice(0,o).trim().replace(/-([a-z])/g,(u,s)=>s.toUpperCase()),p=e.slice(o+1).trim();c&&(n[c]=p)}return n}function H(t){return Object.fromEntries(Object.entries(t).map(([n,e])=>[n==="stroke-width"?"strokeWidth":n,e]))}function I({children:t,strokeCount:n,strokeWidth:e,radius:o,horizontalOverflow:c,colors:p,layoutMode:u}){const s=S.useRef(null),[i,h]=S.useState(null);return S.useEffect(()=>{const r=s.current;if(!r)return;const a=()=>{const l=q(r,{layoutMode:u,horizontalOverflow:c,strokeCount:n,strokeWidth:e});if(!l)return;const f=P({width:l.width,sectionBottomYs:l.sectionBottomYs,strokeCount:n,strokeWidth:e,radius:o,horizontalOverflow:c,colors:p,layoutMode:u});h(f)};a();const $=new ResizeObserver(a);return $.observe(r),()=>$.disconnect()},[n,e,o,c,p,u]),R.jsxs("div",{ref:s,className:"serpentine-wrapper",style:(i==null?void 0:i.wrapperStyle)??{position:"relative",boxSizing:"border-box"},"data-testid":"serpentine-wrapper",children:[i&&(()=>{const{class:r,style:a,...$}=i.svgAttributes,l=typeof a=="string"?Q(a):a;return R.jsx("svg",{"data-testid":"serpentine-svg",className:r,style:l,...$,children:i.paths.map((f,d)=>R.jsx("path",{...H(f)},d))})})(),t]})}exports.SerpentineBorder=I;exports.getSectionsPadding=J;exports.serpentineBorder=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react/jsx-runtime"),D=require("react"),G=["#ffffff","#000000"];function W(t,n,e){if(typeof t=="number")return t;const o=n*e;return t==="borderWidth"?o:t==="halfBorderWidth"?o/2:0}function V(t){return Object.entries(t).map(([n,e])=>{const o=n.replace(/([A-Z])/g,"-$1").toLowerCase(),c=typeof e=="number"&&!Number.isNaN(e)?`${e}px`:String(e);return`${o}: ${c}`}).join("; ")}function Z(t,n,e,o,c,$,l,s,i,f){const r=c*(e-1),a=c/2,g=n.length-1,u=[];for(let p=0;p<e;p++){const h=p*c,m=(e-1-p)*c,x=o-h,w=o-m,k=r-m,N=i-f+a,b=h-i+N,B=f,v=t+B-m-a,L=b+(o-h),j=t+B-o-a,M=t+B-r-a,R=i+s,d=[`M ${v} ${R-r-c/2-l}`,`L ${v} ${R-r-l}`,`A ${k} ${k} 0 0 1 ${M} ${R-m-l}`,`L ${L} ${h+s-l}`,`A ${x} ${x} 0 0 0 ${b} ${o+s-l}`,`L ${b} ${o+s}`];for(let A=0;A<g-1;A++){const y=n[A+1],O=n[A+2],U=y+o-i+s;A%2===0?(d.push(`L ${b} ${y-o+s}`),d.push(`A ${x}  ${x}  0 0 0 ${L}      ${y-h+s}`),d.push(`L ${j} ${y-h+s}`),d.push(`A ${w} ${w} 0 0 1 ${v} ${U}`),d.push(`L ${v} ${O-o+s}`)):(d.push(`L ${v} ${y-o+s}`),d.push(`A ${w} ${w} 0 0 1 ${j} ${y-m+s}`),d.push(`L ${L} ${y-m+s}`),d.push(`A ${x}  ${x}  0 0 0 ${b}      ${U}`),d.push(`L ${b} ${O-o+s}`))}const E=n[g];(g-2)%2===0?d.push(`L ${v} ${E}`):d.push(`L ${b} ${E}`),u.push({d:d.join(" "),stroke:$[p%$.length],"stroke-width":c,fill:"none"})}return u}const X="serpentine-border-svg",C={strokeCount:5,strokeWidth:8,radius:50,horizontalOverflow:0,layoutMode:"border"};function P(t){const n=t.strokeCount??C.strokeCount,e=t.strokeWidth??C.strokeWidth,o=t.radius??C.radius,c=t.horizontalOverflow??C.horizontalOverflow,$=t.colors??G,l=t.layoutMode??C.layoutMode,s=t.svgClassName??X;let i,f;if(t.wrapperEl!=null){const M=t.wrapperEl;if(!(typeof document<"u"&&typeof M.getBoundingClientRect=="function"))return null;const d=q(M,{layoutMode:l,horizontalOverflow:c,strokeCount:n,strokeWidth:e,excludeClassName:s});if(!d)return null;i=d.width,f=d.sectionBottomYs}else{if(t.width==null||t.sectionBottomYs==null)return null;i=t.width,f=t.sectionBottomYs}const r=W(c,n,e),a=(n-1)*e,g=n*e,u=2*e,p=a/2,h=(n-1)/2*e+p,z=l==="border"?{boxSizing:"border-box",position:"relative",marginTop:`${g/2}px`,...r>0&&{paddingLeft:`${r}px`,paddingRight:`${r}px`}}:{position:"relative",boxSizing:"border-box"},m=l==="border"?{position:"absolute",overflow:"hidden",width:"100%",left:0,top:-(u+h),height:`calc(100% + ${u+h}px)`}:{position:"absolute",overflow:"hidden",width:`calc(100% + ${2*r}px)`,left:-r,top:-(u+h),height:`calc(100% + ${u+h}px)`},x=V(m),w=Z(i,f,n,o,e,$,h,p,a,r),k=f[f.length-1]??0,N=r<0?Math.max(1,i):Math.max(1,i+2*r),b=k+u+h,B=r<0?0:-r,v=-e*2-h,L=`${B} ${v} ${N} ${b}`,j={class:s,viewBox:L,style:x};return l==="border"&&r<0&&(j.preserveAspectRatio="none"),{wrapperStyle:z,svgAttributes:j,paths:w}}function J(t){const{sectionCount:n,strokeCount:e,strokeWidth:o}=t,c=t.horizontalOverflow??0,$=e*o,l=W(c,e,o),s=$/2,i=$-l,f={top:s,right:0,bottom:s,left:i},r={top:s,right:i,bottom:s,left:0},a=n>0&&(n-1)%2===0;return{even:f,odd:r,last:{top:s,right:a?0:i,bottom:0,left:a?i:0}}}function q(t,n){const{layoutMode:e,horizontalOverflow:o=0,strokeCount:c,strokeWidth:$,excludeClassName:l=X}=n,s=W(o,c,$);if(!t)return null;const i=l?Array.from(t.children).filter(u=>!u.classList.contains(l)):Array.from(t.children);if(i.length===0)return null;const f=t.getBoundingClientRect(),r=f.width,a=e==="border"?Math.max(1,r-2*s):Math.max(1,r),g=[0];for(let u=0;u<i.length;u++){const p=i[u].getBoundingClientRect();g.push(p.top-f.top+p.height)}return{width:a,sectionBottomYs:g}}function Q(t){const n={};if(!t||typeof t!="string")return n;for(const e of t.split(";")){const o=e.indexOf(":");if(o===-1)continue;const c=e.slice(0,o).trim().replace(/-([a-z])/g,(l,s)=>s.toUpperCase()),$=e.slice(o+1).trim();c&&(n[c]=$)}return n}function H(t){return Object.fromEntries(Object.entries(t).map(([n,e])=>[n==="stroke-width"?"strokeWidth":n,e]))}function I({children:t,strokeCount:n,strokeWidth:e,radius:o,horizontalOverflow:c,colors:$,layoutMode:l}){const s=D.useRef(null),[i,f]=D.useState(null);return D.useEffect(()=>{const r=s.current;if(!r)return;const a=()=>{const u=q(r,{layoutMode:l,horizontalOverflow:c,strokeCount:n,strokeWidth:e});if(!u)return;const p=P({width:u.width,sectionBottomYs:u.sectionBottomYs,strokeCount:n,strokeWidth:e,radius:o,horizontalOverflow:c,colors:$,layoutMode:l});f(p)};a();const g=new ResizeObserver(a);return g.observe(r),()=>g.disconnect()},[n,e,o,c,$,l]),S.jsxs("div",{ref:s,className:"serpentine-wrapper",style:(i==null?void 0:i.wrapperStyle)??{position:"relative",boxSizing:"border-box"},"data-testid":"serpentine-wrapper",children:[i&&(()=>{const{class:r,style:a,...g}=i.svgAttributes,u=typeof a=="string"?Q(a):a;return S.jsx("svg",{"data-testid":"serpentine-svg",className:r,style:u,...g,children:i.paths.map((p,h)=>S.jsx("path",{...H(p)},h))})})(),t]})}exports.SerpentineBorder=I;exports.getSectionsPadding=J;exports.serpentineBorder=P;
 //# sourceMappingURL=serpentine-border.cjs.map

package/dist/serpentine-border.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"serpentine-border.cjs","sources":["../src/constants.js","../src/serpentineCore.js","../src/SerpentineBorder.jsx"],"sourcesContent":["export const DEFAULT_COLORS = ['#ffffff', '#000000']\n","/**\n * Vanilla JS core for serpentine border SVG generation.\n * Single export: call with measured dimensions and options to get everything needed to render.\n */\n\nimport { DEFAULT_COLORS } from './constants.js'\n\nfunction resolveOverflowToPixels(horizontalOverflow, N, STROKE_WIDTH) {\n  if (typeof horizontalOverflow === 'number') return horizontalOverflow\n  const totalBorderWidth = N * STROKE_WIDTH\n  if (horizontalOverflow === 'borderWidth') return totalBorderWidth\n  if (horizontalOverflow === 'halfBorderWidth') return totalBorderWidth / 2\n  return 0\n}\n\nfunction styleObjectToCss(obj) {\n  return Object.entries(obj)\n    .map(([k, v]) => {\n      const key = k.replace(/([A-Z])/g, '-$1').toLowerCase()\n      const val = typeof v === 'number' && !Number.isNaN(v) ? `${v}px` : String(v)\n      return `${key}: ${val}`\n    })\n    .join('; ')\n}\n\nfunction buildPathD(W, Y, N, R, STROKE_WIDTH, COLORS, TOP_ARC_SHIFT, Y_OFFSET, O_TOTAL, BORDER_EXTRA) {\n  const R1 = STROKE_WIDTH * (N - 1)\n  const RIGHT_EXTEND = STROKE_WIDTH / 2\n  const n = Y.length - 1\n  const parts = []\n  for (let i = 0; i < N; i++) {\n    const o = i * STROKE_WIDTH\n    const j = N - 1 - i\n    const oj = j * STROKE_WIDTH\n    const r = R - o\n    const rj = R - oj\n    const r1 = R1 - o\n    const rj1 = R1 - oj\n\n    const leftOffset = O_TOTAL - BORDER_EXTRA + RIGHT_EXTEND\n    const xLeft = o - O_TOTAL + leftOffset\n    const rightExt = BORDER_EXTRA\n    const xRight = W + rightExt - oj - RIGHT_EXTEND\n    const xLeftArc = xLeft + (R - o)\n    const xRightArc = W + rightExt - R - RIGHT_EXTEND\n    const xRightR1 = W + rightExt - R1 - RIGHT_EXTEND\n\n    const yCurrTop = O_TOTAL + Y_OFFSET\n    const segs = [\n      `M ${xRight} ${yCurrTop - R1 - STROKE_WIDTH / 2 - TOP_ARC_SHIFT}`,\n      `L ${xRight} ${yCurrTop - R1 - TOP_ARC_SHIFT}`,\n      `A ${rj1} ${rj1} 0 0 1 ${xRightR1} ${yCurrTop - oj - TOP_ARC_SHIFT}`,\n      `L ${xLeftArc} ${o + Y_OFFSET - TOP_ARC_SHIFT}`,\n      `A ${r} ${r} 0 0 0 ${xLeft} ${R + Y_OFFSET - TOP_ARC_SHIFT}`,\n      `L ${xLeft} ${R + Y_OFFSET}`,\n    ]\n\n    for (let t = 0; t < n - 1; t++) {\n      const yCurr = Y[t + 1]\n      const yNext = Y[t + 2]\n      const yExit = yCurr + R - O_TOTAL + Y_OFFSET\n\n      if (t % 2 === 0) {\n        segs.push(`L ${xLeft} ${yCurr - R + Y_OFFSET}`)\n        segs.push(`A ${r}  ${r}  0 0 0 ${xLeftArc}      ${yCurr - o + Y_OFFSET}`)\n        segs.push(`L ${xRightArc} ${yCurr - o + Y_OFFSET}`)\n        segs.push(`A ${rj} ${rj} 0 0 1 ${xRight} ${yExit}`)\n        segs.push(`L ${xRight} ${yNext - R + Y_OFFSET}`)\n      } else {\n        segs.push(`L ${xRight} ${yCurr - R + Y_OFFSET}`)\n        segs.push(`A ${rj} ${rj} 0 0 1 ${xRightArc} ${yCurr - oj + Y_OFFSET}`)\n        segs.push(`L ${xLeftArc} ${yCurr - oj + Y_OFFSET}`)\n        segs.push(`A ${r}  ${r}  0 0 0 ${xLeft}      ${yExit}`)\n        segs.push(`L ${xLeft} ${yNext - R + Y_OFFSET}`)\n      }\n    }\n\n    const lastY = Y[n]\n    if ((n - 2) % 2 === 0) {\n      segs.push(`L ${xRight} ${lastY}`)\n    } else {\n      segs.push(`L ${xLeft} ${lastY}`)\n    }\n    parts.push({\n      d: segs.join(' '),\n      stroke: COLORS[i % COLORS.length],\n      'stroke-width': STROKE_WIDTH,\n      fill: 'none',\n    })\n  }\n  return parts\n}\n\nconst DEFAULT_SVG_CLASS = 'serpentine-border-svg'\n\nconst DEFAULTS = {\n  strokeCount: 5,\n  strokeWidth: 8,\n  radius: 50,\n  horizontalOverflow: 0,\n  layoutMode: 'border',\n}\n\n/**\n * Compute everything needed to render the serpentine border.\n * Accepts either (width + sectionBottomYs) for pure/custom use, or wrapperEl to measure from the DOM.\n * When using wrapperEl, returns null in non-DOM environments (e.g. SSR) or when measurement fails.\n *\n * @param {{\n *   width?: number\n *   sectionBottomYs?: number[]\n *   wrapperEl?: HTMLElement\n *   strokeCount?: number\n *   strokeWidth?: number\n *   radius?: number\n *   horizontalOverflow?: number | 'borderWidth' | 'halfBorderWidth'\n *   colors?: string[]\n *   layoutMode?: 'content' | 'border'\n *   svgClassName?: string\n * }} options\n * @returns {{\n *   wrapperStyle: Record<string, unknown>\n *   svgAttributes: { class?: string, viewBox: string, style: string }\n *   paths: Array<{ d: string, stroke: string, 'stroke-width': number, fill: string }>\n * } | null}\n */\nexport function serpentineBorder(options) {\n  const N = options.strokeCount ?? DEFAULTS.strokeCount\n  const STROKE_WIDTH = options.strokeWidth ?? DEFAULTS.strokeWidth\n  const R = options.radius ?? DEFAULTS.radius\n  const horizontalOverflow = options.horizontalOverflow ?? DEFAULTS.horizontalOverflow\n  const COLORS = options.colors ?? DEFAULT_COLORS\n  const layoutMode = options.layoutMode ?? DEFAULTS.layoutMode\n  const svgClassName = options.svgClassName ?? DEFAULT_SVG_CLASS\n\n  let W, Y\n  if (options.wrapperEl != null) {\n    const wrapperEl = options.wrapperEl\n    const hasDOM = typeof document !== 'undefined' && typeof wrapperEl.getBoundingClientRect === 'function'\n    if (!hasDOM) return null\n    const measured = measureSections(wrapperEl, {\n      layoutMode,\n      horizontalOverflow,\n      strokeCount: N,\n      strokeWidth: STROKE_WIDTH,\n      excludeClassName: svgClassName,\n    })\n    if (!measured) return null\n    W = measured.width\n    Y = measured.sectionBottomYs\n  } else {\n    if (options.width == null || options.sectionBottomYs == null) return null\n    W = options.width\n    Y = options.sectionBottomYs\n  }\n\n  const BORDER_EXTRA = resolveOverflowToPixels(horizontalOverflow, N, STROKE_WIDTH)\n  const O_TOTAL = (N - 1) * STROKE_WIDTH\n  const TOTAL_BORDER_WIDTH = N * STROKE_WIDTH\n  const TOP_OFFSET = 2 * STROKE_WIDTH\n  const Y_OFFSET = O_TOTAL / 2\n  const TOP_ARC_SHIFT = ((N - 1) / 2) * STROKE_WIDTH + Y_OFFSET\n\n  const wrapperStyle =\n    layoutMode === 'border'\n      ? {\n          boxSizing: 'border-box',\n          position: 'relative',\n          marginTop: `${TOTAL_BORDER_WIDTH / 2}px`,\n          ...(BORDER_EXTRA > 0 && {\n            paddingLeft: `${BORDER_EXTRA}px`,\n            paddingRight: `${BORDER_EXTRA}px`,\n          }),\n        }\n      : {\n          position: 'relative',\n          boxSizing: 'border-box',\n        }\n\n  const svgStyleObj =\n    layoutMode === 'border'\n      ? {\n          position: 'absolute',\n          overflow: 'hidden',\n          ...(BORDER_EXTRA > 0\n            ? { width: '100%', left: 0 }\n            : { width: `calc(100% + ${2 * BORDER_EXTRA}px)`, left: -BORDER_EXTRA }),\n          top: -(TOP_OFFSET + TOP_ARC_SHIFT),\n          height: `calc(100% + ${TOP_OFFSET + TOP_ARC_SHIFT}px)`,\n        }\n      : {\n          position: 'absolute',\n          overflow: 'hidden',\n          width: `calc(100% + ${2 * BORDER_EXTRA}px)`,\n          left: -BORDER_EXTRA,\n          top: -(TOP_OFFSET + TOP_ARC_SHIFT),\n          height: `calc(100% + ${TOP_OFFSET + TOP_ARC_SHIFT}px)`,\n        }\n  const svgStyle = styleObjectToCss(svgStyleObj)\n\n  const paths = buildPathD(W, Y, N, R, STROKE_WIDTH, COLORS, TOP_ARC_SHIFT, Y_OFFSET, O_TOTAL, BORDER_EXTRA)\n\n  const totalHeight = Y[Y.length - 1] ?? 0\n  const totalWidth = Math.max(1, W + 2 * BORDER_EXTRA)\n  const viewBoxHeight = totalHeight + TOP_OFFSET + TOP_ARC_SHIFT\n  const viewBoxMinX = BORDER_EXTRA > 0 ? -BORDER_EXTRA : 0\n  const viewBoxMinY = -STROKE_WIDTH * 2 - TOP_ARC_SHIFT\n  const viewBoxStr = `${viewBoxMinX} ${viewBoxMinY} ${totalWidth} ${viewBoxHeight}`\n\n  return {\n    wrapperStyle,\n    svgAttributes: {\n      class: svgClassName,\n      viewBox: viewBoxStr,\n      style: svgStyle,\n    },\n    paths,\n  }\n}\n\n/**\n * Compute padding for each section so content does not overlap the border.\n * Returns an object with even, odd, and last: use for even-indexed sections, odd-indexed sections, and the last section respectively.\n *\n * @param {{\n *   sectionCount: number\n *   strokeCount: number\n *   strokeWidth: number\n *   horizontalOverflow?: number | 'borderWidth' | 'halfBorderWidth'\n * }} options\n * @returns {{ even: { top: number, right: number, bottom: number, left: number }, odd: { top: number, right: number, bottom: number, left: number }, last: { top: number, right: number, bottom: number, left: number } }}\n */\nexport function getSectionsPadding(options) {\n  const { sectionCount: n, strokeCount: N, strokeWidth: STROKE_WIDTH } = options\n  const horizontalOverflow = options.horizontalOverflow ?? 0\n  const TOTAL_BORDER_WIDTH = N * STROKE_WIDTH\n  const BORDER_EXTRA = resolveOverflowToPixels(horizontalOverflow, N, STROKE_WIDTH)\n  const halfBorderWidth = TOTAL_BORDER_WIDTH / 2\n  const insetSide = TOTAL_BORDER_WIDTH - BORDER_EXTRA\n  const even = { top: halfBorderWidth, right: 0, bottom: halfBorderWidth, left: insetSide }\n  const odd = { top: halfBorderWidth, right: insetSide, bottom: halfBorderWidth, left: 0 }\n  const lastIsEven = n > 0 && (n - 1) % 2 === 0\n  const last = {\n    top: halfBorderWidth,\n    right: lastIsEven ? 0 : insetSide,\n    bottom: 0,\n    left: lastIsEven ? insetSide : 0,\n  }\n  return { even, odd, last }\n}\n\n/**\n * Measure wrapper and section elements to get width and section bottom Ys.\n * Children with the excludeClassName (default: same class used on the SVG by serpentineBorder) are excluded.\n * horizontalOverflow is resolved to pixels using strokeCount and strokeWidth.\n *\n * @param {HTMLElement} wrapperEl\n * @param {{\n *   layoutMode: 'content' | 'border'\n *   horizontalOverflow?: number | 'borderWidth' | 'halfBorderWidth'\n *   strokeCount: number\n *   strokeWidth: number\n *   excludeClassName?: string\n * }} options\n * @returns {{ width: number, sectionBottomYs: number[] } | null}\n */\nexport function measureSections(wrapperEl, options) {\n  const { layoutMode, horizontalOverflow = 0, strokeCount, strokeWidth, excludeClassName = DEFAULT_SVG_CLASS } = options\n  const BORDER_EXTRA = resolveOverflowToPixels(horizontalOverflow, strokeCount, strokeWidth)\n  if (!wrapperEl) return null\n\n  const sectionEls = excludeClassName\n    ? Array.from(wrapperEl.children).filter((el) => !el.classList.contains(excludeClassName))\n    : Array.from(wrapperEl.children)\n\n  if (sectionEls.length === 0) return null\n\n  const rect = wrapperEl.getBoundingClientRect()\n  const baseWidth = rect.width\n\n  const W =\n    layoutMode === 'border'\n      ? Math.max(1, baseWidth - 2 * BORDER_EXTRA)\n      : Math.max(1, baseWidth)\n\n  const Y = [0]\n  for (let i = 0; i < sectionEls.length; i++) {\n    const r = sectionEls[i].getBoundingClientRect()\n    Y.push(r.top - rect.top + r.height)\n  }\n\n  return { width: W, sectionBottomYs: Y }\n}\n","import { useEffect, useRef, useState } from 'react'\nimport { measureSections, serpentineBorder } from './serpentineCore.js'\n\nfunction cssStringToStyleObject(css) {\n  const obj = {}\n  if (!css || typeof css !== 'string') return obj\n  for (const decl of css.split(';')) {\n    const colon = decl.indexOf(':')\n    if (colon === -1) continue\n    const key = decl.slice(0, colon).trim().replace(/-([a-z])/g, (_, c) => c.toUpperCase())\n    const value = decl.slice(colon + 1).trim()\n    if (key) obj[key] = value\n  }\n  return obj\n}\n\nfunction pathAttrsForReact(attrs) {\n  return Object.fromEntries(\n    Object.entries(attrs).map(([k, v]) => [k === 'stroke-width' ? 'strokeWidth' : k, v])\n  )\n}\n\nfunction SerpentineBorder({\n  children,\n  strokeCount,\n  strokeWidth,\n  radius,\n  horizontalOverflow,\n  colors,\n  layoutMode,\n}) {\n  const wrapperRef = useRef(null)\n  const [borderData, setBorderData] = useState(null)\n\n  useEffect(() => {\n    const wrapper = wrapperRef.current\n    if (!wrapper) return\n\n    const measure = () => {\n      const measured = measureSections(wrapper, {\n        layoutMode,\n        horizontalOverflow,\n        strokeCount,\n        strokeWidth,\n      })\n      if (!measured) return\n\n      const data = serpentineBorder({\n        width: measured.width,\n        sectionBottomYs: measured.sectionBottomYs,\n        strokeCount,\n        strokeWidth,\n        radius,\n        horizontalOverflow,\n        colors,\n        layoutMode,\n      })\n      setBorderData(data)\n    }\n\n    measure()\n    const ro = new ResizeObserver(measure)\n    ro.observe(wrapper)\n    return () => ro.disconnect()\n  }, [strokeCount, strokeWidth, radius, horizontalOverflow, colors, layoutMode])\n\n  return (\n    <div\n      ref={wrapperRef}\n      className=\"serpentine-wrapper\"\n      style={borderData?.wrapperStyle ?? { position: 'relative', boxSizing: 'border-box' }}\n      data-testid=\"serpentine-wrapper\"\n    >\n      {borderData && (() => {\n        const { class: className, style: styleStr, ...restSvgAttrs } = borderData.svgAttributes\n        const style = typeof styleStr === 'string' ? cssStringToStyleObject(styleStr) : styleStr\n        return (\n          <svg\n            data-testid=\"serpentine-svg\"\n            className={className}\n            style={style}\n            {...restSvgAttrs}\n          >\n            {borderData.paths.map((pathAttributes, i) => (\n              <path key={i} {...pathAttrsForReact(pathAttributes)} />\n            ))}\n          </svg>\n        )\n      })()}\n      {children}\n    </div>\n  )\n}\n\nexport default SerpentineBorder\n"],"names":["DEFAULT_COLORS","resolveOverflowToPixels","horizontalOverflow","N","STROKE_WIDTH","totalBorderWidth","styleObjectToCss","obj","k","v","key","val","buildPathD","W","Y","R","COLORS","TOP_ARC_SHIFT","Y_OFFSET","O_TOTAL","BORDER_EXTRA","R1","RIGHT_EXTEND","n","parts","i","o","oj","r","rj","rj1","leftOffset","xLeft","rightExt","xRight","xLeftArc","xRightArc","xRightR1","yCurrTop","segs","t","yCurr","yNext","yExit","lastY","DEFAULT_SVG_CLASS","DEFAULTS","serpentineBorder","options","layoutMode","svgClassName","wrapperEl","measured","measureSections","TOTAL_BORDER_WIDTH","TOP_OFFSET","wrapperStyle","svgStyleObj","svgStyle","paths","totalHeight","totalWidth","viewBoxHeight","viewBoxMinX","viewBoxMinY","viewBoxStr","getSectionsPadding","halfBorderWidth","insetSide","even","odd","lastIsEven","strokeCount","strokeWidth","excludeClassName","sectionEls","el","rect","baseWidth","cssStringToStyleObject","css","decl","colon","_","c","value","pathAttrsForReact","attrs","SerpentineBorder","children","radius","colors","wrapperRef","useRef","borderData","setBorderData","useState","useEffect","wrapper","measure","data","ro","jsxs","className","styleStr","restSvgAttrs","style","jsx","pathAttributes"],"mappings":"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"}
+{"version":3,"file":"serpentine-border.cjs","sources":["../src/constants.js","../src/serpentineCore.js","../src/SerpentineBorder.jsx"],"sourcesContent":["export const DEFAULT_COLORS = ['#ffffff', '#000000']\n","/**\n * Vanilla JS core for serpentine border SVG generation.\n * Single export: call with measured dimensions and options to get everything needed to render.\n */\n\nimport { DEFAULT_COLORS } from './constants.js'\n\nfunction resolveOverflowToPixels(horizontalOverflow, N, STROKE_WIDTH) {\n  if (typeof horizontalOverflow === 'number') return horizontalOverflow\n  const totalBorderWidth = N * STROKE_WIDTH\n  if (horizontalOverflow === 'borderWidth') return totalBorderWidth\n  if (horizontalOverflow === 'halfBorderWidth') return totalBorderWidth / 2\n  return 0\n}\n\nfunction styleObjectToCss(obj) {\n  return Object.entries(obj)\n    .map(([k, v]) => {\n      const key = k.replace(/([A-Z])/g, '-$1').toLowerCase()\n      const val = typeof v === 'number' && !Number.isNaN(v) ? `${v}px` : String(v)\n      return `${key}: ${val}`\n    })\n    .join('; ')\n}\n\nfunction buildPathD(W, Y, N, R, STROKE_WIDTH, COLORS, TOP_ARC_SHIFT, Y_OFFSET, O_TOTAL, BORDER_EXTRA) {\n  const R1 = STROKE_WIDTH * (N - 1)\n  const RIGHT_EXTEND = STROKE_WIDTH / 2\n  const n = Y.length - 1\n  const parts = []\n  for (let i = 0; i < N; i++) {\n    const o = i * STROKE_WIDTH\n    const j = N - 1 - i\n    const oj = j * STROKE_WIDTH\n    const r = R - o\n    const rj = R - oj\n    const r1 = R1 - o\n    const rj1 = R1 - oj\n\n    const leftOffset = O_TOTAL - BORDER_EXTRA + RIGHT_EXTEND\n    const xLeft = o - O_TOTAL + leftOffset\n    const rightExt = BORDER_EXTRA\n    const xRight = W + rightExt - oj - RIGHT_EXTEND\n    const xLeftArc = xLeft + (R - o)\n    const xRightArc = W + rightExt - R - RIGHT_EXTEND\n    const xRightR1 = W + rightExt - R1 - RIGHT_EXTEND\n\n    const yCurrTop = O_TOTAL + Y_OFFSET\n    const segs = [\n      `M ${xRight} ${yCurrTop - R1 - STROKE_WIDTH / 2 - TOP_ARC_SHIFT}`,\n      `L ${xRight} ${yCurrTop - R1 - TOP_ARC_SHIFT}`,\n      `A ${rj1} ${rj1} 0 0 1 ${xRightR1} ${yCurrTop - oj - TOP_ARC_SHIFT}`,\n      `L ${xLeftArc} ${o + Y_OFFSET - TOP_ARC_SHIFT}`,\n      `A ${r} ${r} 0 0 0 ${xLeft} ${R + Y_OFFSET - TOP_ARC_SHIFT}`,\n      `L ${xLeft} ${R + Y_OFFSET}`,\n    ]\n\n    for (let t = 0; t < n - 1; t++) {\n      const yCurr = Y[t + 1]\n      const yNext = Y[t + 2]\n      const yExit = yCurr + R - O_TOTAL + Y_OFFSET\n\n      if (t % 2 === 0) {\n        segs.push(`L ${xLeft} ${yCurr - R + Y_OFFSET}`)\n        segs.push(`A ${r}  ${r}  0 0 0 ${xLeftArc}      ${yCurr - o + Y_OFFSET}`)\n        segs.push(`L ${xRightArc} ${yCurr - o + Y_OFFSET}`)\n        segs.push(`A ${rj} ${rj} 0 0 1 ${xRight} ${yExit}`)\n        segs.push(`L ${xRight} ${yNext - R + Y_OFFSET}`)\n      } else {\n        segs.push(`L ${xRight} ${yCurr - R + Y_OFFSET}`)\n        segs.push(`A ${rj} ${rj} 0 0 1 ${xRightArc} ${yCurr - oj + Y_OFFSET}`)\n        segs.push(`L ${xLeftArc} ${yCurr - oj + Y_OFFSET}`)\n        segs.push(`A ${r}  ${r}  0 0 0 ${xLeft}      ${yExit}`)\n        segs.push(`L ${xLeft} ${yNext - R + Y_OFFSET}`)\n      }\n    }\n\n    const lastY = Y[n]\n    if ((n - 2) % 2 === 0) {\n      segs.push(`L ${xRight} ${lastY}`)\n    } else {\n      segs.push(`L ${xLeft} ${lastY}`)\n    }\n    parts.push({\n      d: segs.join(' '),\n      stroke: COLORS[i % COLORS.length],\n      'stroke-width': STROKE_WIDTH,\n      fill: 'none',\n    })\n  }\n  return parts\n}\n\nconst DEFAULT_SVG_CLASS = 'serpentine-border-svg'\n\nconst DEFAULTS = {\n  strokeCount: 5,\n  strokeWidth: 8,\n  radius: 50,\n  horizontalOverflow: 0,\n  layoutMode: 'border',\n}\n\n/**\n * Compute everything needed to render the serpentine border.\n * Accepts either (width + sectionBottomYs) for pure/custom use, or wrapperEl to measure from the DOM.\n * When using wrapperEl, returns null in non-DOM environments (e.g. SSR) or when measurement fails.\n *\n * @param {{\n *   width?: number\n *   sectionBottomYs?: number[]\n *   wrapperEl?: HTMLElement\n *   strokeCount?: number\n *   strokeWidth?: number\n *   radius?: number\n *   horizontalOverflow?: number | 'borderWidth' | 'halfBorderWidth'\n *   colors?: string[]\n *   layoutMode?: 'content' | 'border'\n *   svgClassName?: string\n * }} options\n * @returns {{\n *   wrapperStyle: Record<string, unknown>\n *   svgAttributes: { class?: string, viewBox: string, style: string }\n *   paths: Array<{ d: string, stroke: string, 'stroke-width': number, fill: string }>\n * } | null}\n */\nexport function serpentineBorder(options) {\n  const N = options.strokeCount ?? DEFAULTS.strokeCount\n  const STROKE_WIDTH = options.strokeWidth ?? DEFAULTS.strokeWidth\n  const R = options.radius ?? DEFAULTS.radius\n  const horizontalOverflow = options.horizontalOverflow ?? DEFAULTS.horizontalOverflow\n  const COLORS = options.colors ?? DEFAULT_COLORS\n  const layoutMode = options.layoutMode ?? DEFAULTS.layoutMode\n  const svgClassName = options.svgClassName ?? DEFAULT_SVG_CLASS\n\n  let W, Y\n  if (options.wrapperEl != null) {\n    const wrapperEl = options.wrapperEl\n    const hasDOM = typeof document !== 'undefined' && typeof wrapperEl.getBoundingClientRect === 'function'\n    if (!hasDOM) return null\n    const measured = measureSections(wrapperEl, {\n      layoutMode,\n      horizontalOverflow,\n      strokeCount: N,\n      strokeWidth: STROKE_WIDTH,\n      excludeClassName: svgClassName,\n    })\n    if (!measured) return null\n    W = measured.width\n    Y = measured.sectionBottomYs\n  } else {\n    if (options.width == null || options.sectionBottomYs == null) return null\n    W = options.width\n    Y = options.sectionBottomYs\n  }\n\n  const BORDER_EXTRA = resolveOverflowToPixels(horizontalOverflow, N, STROKE_WIDTH)\n  const O_TOTAL = (N - 1) * STROKE_WIDTH\n  const TOTAL_BORDER_WIDTH = N * STROKE_WIDTH\n  const TOP_OFFSET = 2 * STROKE_WIDTH\n  const Y_OFFSET = O_TOTAL / 2\n  const TOP_ARC_SHIFT = ((N - 1) / 2) * STROKE_WIDTH + Y_OFFSET\n\n  const wrapperStyle =\n    layoutMode === 'border'\n      ? {\n          boxSizing: 'border-box',\n          position: 'relative',\n          marginTop: `${TOTAL_BORDER_WIDTH / 2}px`,\n          ...(BORDER_EXTRA > 0 && {\n            paddingLeft: `${BORDER_EXTRA}px`,\n            paddingRight: `${BORDER_EXTRA}px`,\n          }),\n        }\n      : {\n          position: 'relative',\n          boxSizing: 'border-box',\n        }\n\n  const svgStyleObj =\n    layoutMode === 'border'\n      ? {\n          position: 'absolute',\n          overflow: 'hidden',\n          width: '100%',\n          left: 0,\n          top: -(TOP_OFFSET + TOP_ARC_SHIFT),\n          height: `calc(100% + ${TOP_OFFSET + TOP_ARC_SHIFT}px)`,\n        }\n      : {\n          position: 'absolute',\n          overflow: 'hidden',\n          width: `calc(100% + ${2 * BORDER_EXTRA}px)`,\n          left: -BORDER_EXTRA,\n          top: -(TOP_OFFSET + TOP_ARC_SHIFT),\n          height: `calc(100% + ${TOP_OFFSET + TOP_ARC_SHIFT}px)`,\n        }\n  const svgStyle = styleObjectToCss(svgStyleObj)\n\n  const paths = buildPathD(W, Y, N, R, STROKE_WIDTH, COLORS, TOP_ARC_SHIFT, Y_OFFSET, O_TOTAL, BORDER_EXTRA)\n\n  const totalHeight = Y[Y.length - 1] ?? 0\n  const totalWidth =\n    BORDER_EXTRA < 0 ? Math.max(1, W) : Math.max(1, W + 2 * BORDER_EXTRA)\n  const viewBoxHeight = totalHeight + TOP_OFFSET + TOP_ARC_SHIFT\n  const viewBoxMinX = BORDER_EXTRA < 0 ? 0 : -BORDER_EXTRA\n  const viewBoxMinY = -STROKE_WIDTH * 2 - TOP_ARC_SHIFT\n  const viewBoxStr = `${viewBoxMinX} ${viewBoxMinY} ${totalWidth} ${viewBoxHeight}`\n\n  const svgAttributes = {\n    class: svgClassName,\n    viewBox: viewBoxStr,\n    style: svgStyle,\n  }\n  if (layoutMode === 'border' && BORDER_EXTRA < 0) {\n    svgAttributes.preserveAspectRatio = 'none'\n  }\n  return {\n    wrapperStyle,\n    svgAttributes,\n    paths,\n  }\n}\n\n/**\n * Compute padding for each section so content does not overlap the border.\n * Returns an object with even, odd, and last: use for even-indexed sections, odd-indexed sections, and the last section respectively.\n *\n * @param {{\n *   sectionCount: number\n *   strokeCount: number\n *   strokeWidth: number\n *   horizontalOverflow?: number | 'borderWidth' | 'halfBorderWidth'\n * }} options\n * @returns {{ even: { top: number, right: number, bottom: number, left: number }, odd: { top: number, right: number, bottom: number, left: number }, last: { top: number, right: number, bottom: number, left: number } }}\n */\nexport function getSectionsPadding(options) {\n  const { sectionCount: n, strokeCount: N, strokeWidth: STROKE_WIDTH } = options\n  const horizontalOverflow = options.horizontalOverflow ?? 0\n  const TOTAL_BORDER_WIDTH = N * STROKE_WIDTH\n  const BORDER_EXTRA = resolveOverflowToPixels(horizontalOverflow, N, STROKE_WIDTH)\n  const halfBorderWidth = TOTAL_BORDER_WIDTH / 2\n  const insetSide = TOTAL_BORDER_WIDTH - BORDER_EXTRA\n  const even = { top: halfBorderWidth, right: 0, bottom: halfBorderWidth, left: insetSide }\n  const odd = { top: halfBorderWidth, right: insetSide, bottom: halfBorderWidth, left: 0 }\n  const lastIsEven = n > 0 && (n - 1) % 2 === 0\n  const last = {\n    top: halfBorderWidth,\n    right: lastIsEven ? 0 : insetSide,\n    bottom: 0,\n    left: lastIsEven ? insetSide : 0,\n  }\n  return { even, odd, last }\n}\n\n/**\n * Measure wrapper and section elements to get width and section bottom Ys.\n * Children with the excludeClassName (default: same class used on the SVG by serpentineBorder) are excluded.\n * horizontalOverflow is resolved to pixels using strokeCount and strokeWidth.\n *\n * @param {HTMLElement} wrapperEl\n * @param {{\n *   layoutMode: 'content' | 'border'\n *   horizontalOverflow?: number | 'borderWidth' | 'halfBorderWidth'\n *   strokeCount: number\n *   strokeWidth: number\n *   excludeClassName?: string\n * }} options\n * @returns {{ width: number, sectionBottomYs: number[] } | null}\n */\nexport function measureSections(wrapperEl, options) {\n  const { layoutMode, horizontalOverflow = 0, strokeCount, strokeWidth, excludeClassName = DEFAULT_SVG_CLASS } = options\n  const BORDER_EXTRA = resolveOverflowToPixels(horizontalOverflow, strokeCount, strokeWidth)\n  if (!wrapperEl) return null\n\n  const sectionEls = excludeClassName\n    ? Array.from(wrapperEl.children).filter((el) => !el.classList.contains(excludeClassName))\n    : Array.from(wrapperEl.children)\n\n  if (sectionEls.length === 0) return null\n\n  const rect = wrapperEl.getBoundingClientRect()\n  const baseWidth = rect.width\n\n  const W =\n    layoutMode === 'border'\n      ? Math.max(1, baseWidth - 2 * BORDER_EXTRA)\n      : Math.max(1, baseWidth)\n\n  const Y = [0]\n  for (let i = 0; i < sectionEls.length; i++) {\n    const r = sectionEls[i].getBoundingClientRect()\n    Y.push(r.top - rect.top + r.height)\n  }\n\n  return { width: W, sectionBottomYs: Y }\n}\n","import { useEffect, useRef, useState } from 'react'\nimport { measureSections, serpentineBorder } from './serpentineCore.js'\n\nfunction cssStringToStyleObject(css) {\n  const obj = {}\n  if (!css || typeof css !== 'string') return obj\n  for (const decl of css.split(';')) {\n    const colon = decl.indexOf(':')\n    if (colon === -1) continue\n    const key = decl.slice(0, colon).trim().replace(/-([a-z])/g, (_, c) => c.toUpperCase())\n    const value = decl.slice(colon + 1).trim()\n    if (key) obj[key] = value\n  }\n  return obj\n}\n\nfunction pathAttrsForReact(attrs) {\n  return Object.fromEntries(\n    Object.entries(attrs).map(([k, v]) => [k === 'stroke-width' ? 'strokeWidth' : k, v])\n  )\n}\n\nfunction SerpentineBorder({\n  children,\n  strokeCount,\n  strokeWidth,\n  radius,\n  horizontalOverflow,\n  colors,\n  layoutMode,\n}) {\n  const wrapperRef = useRef(null)\n  const [borderData, setBorderData] = useState(null)\n\n  useEffect(() => {\n    const wrapper = wrapperRef.current\n    if (!wrapper) return\n\n    const measure = () => {\n      const measured = measureSections(wrapper, {\n        layoutMode,\n        horizontalOverflow,\n        strokeCount,\n        strokeWidth,\n      })\n      if (!measured) return\n\n      const data = serpentineBorder({\n        width: measured.width,\n        sectionBottomYs: measured.sectionBottomYs,\n        strokeCount,\n        strokeWidth,\n        radius,\n        horizontalOverflow,\n        colors,\n        layoutMode,\n      })\n      setBorderData(data)\n    }\n\n    measure()\n    const ro = new ResizeObserver(measure)\n    ro.observe(wrapper)\n    return () => ro.disconnect()\n  }, [strokeCount, strokeWidth, radius, horizontalOverflow, colors, layoutMode])\n\n  return (\n    <div\n      ref={wrapperRef}\n      className=\"serpentine-wrapper\"\n      style={borderData?.wrapperStyle ?? { position: 'relative', boxSizing: 'border-box' }}\n      data-testid=\"serpentine-wrapper\"\n    >\n      {borderData && (() => {\n        const { class: className, style: styleStr, ...restSvgAttrs } = borderData.svgAttributes\n        const style = typeof styleStr === 'string' ? cssStringToStyleObject(styleStr) : styleStr\n        return (\n          <svg\n            data-testid=\"serpentine-svg\"\n            className={className}\n            style={style}\n            {...restSvgAttrs}\n          >\n            {borderData.paths.map((pathAttributes, i) => (\n              <path key={i} {...pathAttrsForReact(pathAttributes)} />\n            ))}\n          </svg>\n        )\n      })()}\n      {children}\n    </div>\n  )\n}\n\nexport default SerpentineBorder\n"],"names":["DEFAULT_COLORS","resolveOverflowToPixels","horizontalOverflow","N","STROKE_WIDTH","totalBorderWidth","styleObjectToCss","obj","k","v","key","val","buildPathD","W","Y","R","COLORS","TOP_ARC_SHIFT","Y_OFFSET","O_TOTAL","BORDER_EXTRA","R1","RIGHT_EXTEND","n","parts","i","o","oj","r","rj","rj1","leftOffset","xLeft","rightExt","xRight","xLeftArc","xRightArc","xRightR1","yCurrTop","segs","t","yCurr","yNext","yExit","lastY","DEFAULT_SVG_CLASS","DEFAULTS","serpentineBorder","options","layoutMode","svgClassName","wrapperEl","measured","measureSections","TOTAL_BORDER_WIDTH","TOP_OFFSET","wrapperStyle","svgStyleObj","svgStyle","paths","totalHeight","totalWidth","viewBoxHeight","viewBoxMinX","viewBoxMinY","viewBoxStr","svgAttributes","getSectionsPadding","halfBorderWidth","insetSide","even","odd","lastIsEven","strokeCount","strokeWidth","excludeClassName","sectionEls","el","rect","baseWidth","cssStringToStyleObject","css","decl","colon","_","c","value","pathAttrsForReact","attrs","SerpentineBorder","children","radius","colors","wrapperRef","useRef","borderData","setBorderData","useState","useEffect","wrapper","measure","data","ro","jsxs","className","styleStr","restSvgAttrs","style","jsx","pathAttributes"],"mappings":"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"}

package/dist/serpentine-border.js

@@ -12,32 +12,32 @@ function J(t) {
     return `${n}: ${i}`;
   }).join("; ");
 }
-function Q(t, o, e, n, i, p, u, s, c, h) {
-  const r = i * (e - 1), a = i / 2, $ = o.length - 1, l = [];
-  for (let f = 0; f < e; f++) {
-    const d = f * i, x = (e - 1 - f) * i, b = n - d, B = n - x, M = r - x, N = c - h + a, m = d - c + N, L = h, w = t + L - x - a, A = m + (n - d), j = t + L - n - a, W = t + L - r - a, v = c + s, g = [
-      `M ${w} ${v - r - i / 2 - u}`,
-      `L ${w} ${v - r - u}`,
-      `A ${M} ${M} 0 0 1 ${W} ${v - x - u}`,
-      `L ${A} ${d + s - u}`,
-      `A ${b} ${b} 0 0 0 ${m} ${n + s - u}`,
+function Q(t, o, e, n, i, $, l, s, c, f) {
+  const r = i * (e - 1), a = i / 2, g = o.length - 1, u = [];
+  for (let p = 0; p < e; p++) {
+    const h = p * i, x = (e - 1 - p) * i, b = n - h, y = n - x, k = r - x, R = c - f + a, m = h - c + R, B = f, v = t + B - x - a, L = m + (n - h), A = t + B - n - a, M = t + B - r - a, N = c + s, d = [
+      `M ${v} ${N - r - i / 2 - l}`,
+      `L ${v} ${N - r - l}`,
+      `A ${k} ${k} 0 0 1 ${M} ${N - x - l}`,
+      `L ${L} ${h + s - l}`,
+      `A ${b} ${b} 0 0 0 ${m} ${n + s - l}`,
       `L ${m} ${n + s}`
     ];
-    for (let C = 0; C < $ - 1; C++) {
-      const y = o[C + 1], S = o[C + 2], E = y + n - c + s;
-      C % 2 === 0 ? (g.push(`L ${m} ${y - n + s}`), g.push(`A ${b}  ${b}  0 0 0 ${A}      ${y - d + s}`), g.push(`L ${j} ${y - d + s}`), g.push(`A ${B} ${B} 0 0 1 ${w} ${E}`), g.push(`L ${w} ${S - n + s}`)) : (g.push(`L ${w} ${y - n + s}`), g.push(`A ${B} ${B} 0 0 1 ${j} ${y - x + s}`), g.push(`L ${A} ${y - x + s}`), g.push(`A ${b}  ${b}  0 0 0 ${m}      ${E}`), g.push(`L ${m} ${S - n + s}`));
+    for (let j = 0; j < g - 1; j++) {
+      const w = o[j + 1], S = o[j + 2], E = w + n - c + s;
+      j % 2 === 0 ? (d.push(`L ${m} ${w - n + s}`), d.push(`A ${b}  ${b}  0 0 0 ${L}      ${w - h + s}`), d.push(`L ${A} ${w - h + s}`), d.push(`A ${y} ${y} 0 0 1 ${v} ${E}`), d.push(`L ${v} ${S - n + s}`)) : (d.push(`L ${v} ${w - n + s}`), d.push(`A ${y} ${y} 0 0 1 ${A} ${w - x + s}`), d.push(`L ${L} ${w - x + s}`), d.push(`A ${b}  ${b}  0 0 0 ${m}      ${E}`), d.push(`L ${m} ${S - n + s}`));
     }
-    const z = o[$];
-    ($ - 2) % 2 === 0 ? g.push(`L ${w} ${z}`) : g.push(`L ${m} ${z}`), l.push({
-      d: g.join(" "),
-      stroke: p[f % p.length],
+    const z = o[g];
+    (g - 2) % 2 === 0 ? d.push(`L ${v} ${z}`) : d.push(`L ${m} ${z}`), u.push({
+      d: d.join(" "),
+      stroke: $[p % $.length],
       "stroke-width": i,
       fill: "none"
     });
   }
-  return l;
+  return u;
 }
-const X = "serpentine-border-svg", k = {
+const X = "serpentine-border-svg", C = {
   strokeCount: 5,
   strokeWidth: 8,
   radius: 50,
@@ -45,28 +45,28 @@ const X = "serpentine-border-svg", k = {
   layoutMode: "border"
 };
 function H(t) {
-  const o = t.strokeCount ?? k.strokeCount, e = t.strokeWidth ?? k.strokeWidth, n = t.radius ?? k.radius, i = t.horizontalOverflow ?? k.horizontalOverflow, p = t.colors ?? q, u = t.layoutMode ?? k.layoutMode, s = t.svgClassName ?? X;
-  let c, h;
+  const o = t.strokeCount ?? C.strokeCount, e = t.strokeWidth ?? C.strokeWidth, n = t.radius ?? C.radius, i = t.horizontalOverflow ?? C.horizontalOverflow, $ = t.colors ?? q, l = t.layoutMode ?? C.layoutMode, s = t.svgClassName ?? X;
+  let c, f;
   if (t.wrapperEl != null) {
-    const j = t.wrapperEl;
-    if (!(typeof document < "u" && typeof j.getBoundingClientRect == "function")) return null;
-    const v = O(j, {
-      layoutMode: u,
+    const M = t.wrapperEl;
+    if (!(typeof document < "u" && typeof M.getBoundingClientRect == "function")) return null;
+    const d = O(M, {
+      layoutMode: l,
       horizontalOverflow: i,
       strokeCount: o,
       strokeWidth: e,
       excludeClassName: s
     });
-    if (!v) return null;
-    c = v.width, h = v.sectionBottomYs;
+    if (!d) return null;
+    c = d.width, f = d.sectionBottomYs;
   } else {
     if (t.width == null || t.sectionBottomYs == null) return null;
-    c = t.width, h = t.sectionBottomYs;
+    c = t.width, f = t.sectionBottomYs;
   }
-  const r = D(i, o, e), a = (o - 1) * e, $ = o * e, l = 2 * e, f = a / 2, d = (o - 1) / 2 * e + f, R = u === "border" ? {
+  const r = D(i, o, e), a = (o - 1) * e, g = o * e, u = 2 * e, p = a / 2, h = (o - 1) / 2 * e + p, W = l === "border" ? {
     boxSizing: "border-box",
     position: "relative",
-    marginTop: `${$ / 2}px`,
+    marginTop: `${g / 2}px`,
     ...r > 0 && {
       paddingLeft: `${r}px`,
       paddingRight: `${r}px`
@@ -74,33 +74,34 @@ function H(t) {
   } : {
     position: "relative",
     boxSizing: "border-box"
-  }, x = u === "border" ? {
+  }, x = l === "border" ? {
     position: "absolute",
     overflow: "hidden",
-    ...r > 0 ? { width: "100%", left: 0 } : { width: `calc(100% + ${2 * r}px)`, left: -r },
-    top: -(l + d),
-    height: `calc(100% + ${l + d}px)`
+    width: "100%",
+    left: 0,
+    top: -(u + h),
+    height: `calc(100% + ${u + h}px)`
   } : {
     position: "absolute",
     overflow: "hidden",
     width: `calc(100% + ${2 * r}px)`,
     left: -r,
-    top: -(l + d),
-    height: `calc(100% + ${l + d}px)`
-  }, b = J(x), B = Q(c, h, o, n, e, p, d, f, a, r), M = h[h.length - 1] ?? 0, N = Math.max(1, c + 2 * r), m = M + l + d, L = r > 0 ? -r : 0, w = -e * 2 - d, A = `${L} ${w} ${N} ${m}`;
-  return {
-    wrapperStyle: R,
-    svgAttributes: {
-      class: s,
-      viewBox: A,
-      style: b
-    },
-    paths: B
+    top: -(u + h),
+    height: `calc(100% + ${u + h}px)`
+  }, b = J(x), y = Q(c, f, o, n, e, $, h, p, a, r), k = f[f.length - 1] ?? 0, R = r < 0 ? Math.max(1, c) : Math.max(1, c + 2 * r), m = k + u + h, B = r < 0 ? 0 : -r, v = -e * 2 - h, L = `${B} ${v} ${R} ${m}`, A = {
+    class: s,
+    viewBox: L,
+    style: b
+  };
+  return l === "border" && r < 0 && (A.preserveAspectRatio = "none"), {
+    wrapperStyle: W,
+    svgAttributes: A,
+    paths: y
   };
 }
 function _(t) {
-  const { sectionCount: o, strokeCount: e, strokeWidth: n } = t, i = t.horizontalOverflow ?? 0, p = e * n, u = D(i, e, n), s = p / 2, c = p - u, h = { top: s, right: 0, bottom: s, left: c }, r = { top: s, right: c, bottom: s, left: 0 }, a = o > 0 && (o - 1) % 2 === 0;
-  return { even: h, odd: r, last: {
+  const { sectionCount: o, strokeCount: e, strokeWidth: n } = t, i = t.horizontalOverflow ?? 0, $ = e * n, l = D(i, e, n), s = $ / 2, c = $ - l, f = { top: s, right: 0, bottom: s, left: c }, r = { top: s, right: c, bottom: s, left: 0 }, a = o > 0 && (o - 1) % 2 === 0;
+  return { even: f, odd: r, last: {
     top: s,
     right: a ? 0 : c,
     bottom: 0,
@@ -108,16 +109,16 @@ function _(t) {
   } };
 }
 function O(t, o) {
-  const { layoutMode: e, horizontalOverflow: n = 0, strokeCount: i, strokeWidth: p, excludeClassName: u = X } = o, s = D(n, i, p);
+  const { layoutMode: e, horizontalOverflow: n = 0, strokeCount: i, strokeWidth: $, excludeClassName: l = X } = o, s = D(n, i, $);
   if (!t) return null;
-  const c = u ? Array.from(t.children).filter((l) => !l.classList.contains(u)) : Array.from(t.children);
+  const c = l ? Array.from(t.children).filter((u) => !u.classList.contains(l)) : Array.from(t.children);
   if (c.length === 0) return null;
-  const h = t.getBoundingClientRect(), r = h.width, a = e === "border" ? Math.max(1, r - 2 * s) : Math.max(1, r), $ = [0];
-  for (let l = 0; l < c.length; l++) {
-    const f = c[l].getBoundingClientRect();
-    $.push(f.top - h.top + f.height);
+  const f = t.getBoundingClientRect(), r = f.width, a = e === "border" ? Math.max(1, r - 2 * s) : Math.max(1, r), g = [0];
+  for (let u = 0; u < c.length; u++) {
+    const p = c[u].getBoundingClientRect();
+    g.push(p.top - f.top + p.height);
   }
-  return { width: a, sectionBottomYs: $ };
+  return { width: a, sectionBottomYs: g };
 }
 function I(t) {
   const o = {};
@@ -125,8 +126,8 @@ function I(t) {
   for (const e of t.split(";")) {
     const n = e.indexOf(":");
     if (n === -1) continue;
-    const i = e.slice(0, n).trim().replace(/-([a-z])/g, (u, s) => s.toUpperCase()), p = e.slice(n + 1).trim();
-    i && (o[i] = p);
+    const i = e.slice(0, n).trim().replace(/-([a-z])/g, (l, s) => s.toUpperCase()), $ = e.slice(n + 1).trim();
+    i && (o[i] = $);
   }
   return o;
 }
@@ -141,37 +142,37 @@ function F({
   strokeWidth: e,
   radius: n,
   horizontalOverflow: i,
-  colors: p,
-  layoutMode: u
+  colors: $,
+  layoutMode: l
 }) {
-  const s = P(null), [c, h] = V(null);
+  const s = P(null), [c, f] = V(null);
   return Z(() => {
     const r = s.current;
     if (!r) return;
     const a = () => {
-      const l = O(r, {
-        layoutMode: u,
+      const u = O(r, {
+        layoutMode: l,
         horizontalOverflow: i,
         strokeCount: o,
         strokeWidth: e
       });
-      if (!l) return;
-      const f = H({
-        width: l.width,
-        sectionBottomYs: l.sectionBottomYs,
+      if (!u) return;
+      const p = H({
+        width: u.width,
+        sectionBottomYs: u.sectionBottomYs,
         strokeCount: o,
         strokeWidth: e,
         radius: n,
         horizontalOverflow: i,
-        colors: p,
-        layoutMode: u
+        colors: $,
+        layoutMode: l
       });
-      h(f);
+      f(p);
     };
     a();
-    const $ = new ResizeObserver(a);
-    return $.observe(r), () => $.disconnect();
-  }, [o, e, n, i, p, u]), /* @__PURE__ */ G(
+    const g = new ResizeObserver(a);
+    return g.observe(r), () => g.disconnect();
+  }, [o, e, n, i, $, l]), /* @__PURE__ */ G(
     "div",
     {
       ref: s,
@@ -180,15 +181,15 @@ function F({
       "data-testid": "serpentine-wrapper",
       children: [
         c && (() => {
-          const { class: r, style: a, ...$ } = c.svgAttributes, l = typeof a == "string" ? I(a) : a;
+          const { class: r, style: a, ...g } = c.svgAttributes, u = typeof a == "string" ? I(a) : a;
           return /* @__PURE__ */ U(
             "svg",
             {
               "data-testid": "serpentine-svg",
               className: r,
-              style: l,
-              ...$,
-              children: c.paths.map((f, d) => /* @__PURE__ */ U("path", { ...K(f) }, d))
+              style: u,
+              ...g,
+              children: c.paths.map((p, h) => /* @__PURE__ */ U("path", { ...K(p) }, h))
             }
           );
         })(),

package/dist/serpentine-border.js.map

@@ -1 +1 @@
-{"version":3,"file":"serpentine-border.js","sources":["../src/constants.js","../src/serpentineCore.js","../src/SerpentineBorder.jsx"],"sourcesContent":["export const DEFAULT_COLORS = ['#ffffff', '#000000']\n","/**\n * Vanilla JS core for serpentine border SVG generation.\n * Single export: call with measured dimensions and options to get everything needed to render.\n */\n\nimport { DEFAULT_COLORS } from './constants.js'\n\nfunction resolveOverflowToPixels(horizontalOverflow, N, STROKE_WIDTH) {\n  if (typeof horizontalOverflow === 'number') return horizontalOverflow\n  const totalBorderWidth = N * STROKE_WIDTH\n  if (horizontalOverflow === 'borderWidth') return totalBorderWidth\n  if (horizontalOverflow === 'halfBorderWidth') return totalBorderWidth / 2\n  return 0\n}\n\nfunction styleObjectToCss(obj) {\n  return Object.entries(obj)\n    .map(([k, v]) => {\n      const key = k.replace(/([A-Z])/g, '-$1').toLowerCase()\n      const val = typeof v === 'number' && !Number.isNaN(v) ? `${v}px` : String(v)\n      return `${key}: ${val}`\n    })\n    .join('; ')\n}\n\nfunction buildPathD(W, Y, N, R, STROKE_WIDTH, COLORS, TOP_ARC_SHIFT, Y_OFFSET, O_TOTAL, BORDER_EXTRA) {\n  const R1 = STROKE_WIDTH * (N - 1)\n  const RIGHT_EXTEND = STROKE_WIDTH / 2\n  const n = Y.length - 1\n  const parts = []\n  for (let i = 0; i < N; i++) {\n    const o = i * STROKE_WIDTH\n    const j = N - 1 - i\n    const oj = j * STROKE_WIDTH\n    const r = R - o\n    const rj = R - oj\n    const r1 = R1 - o\n    const rj1 = R1 - oj\n\n    const leftOffset = O_TOTAL - BORDER_EXTRA + RIGHT_EXTEND\n    const xLeft = o - O_TOTAL + leftOffset\n    const rightExt = BORDER_EXTRA\n    const xRight = W + rightExt - oj - RIGHT_EXTEND\n    const xLeftArc = xLeft + (R - o)\n    const xRightArc = W + rightExt - R - RIGHT_EXTEND\n    const xRightR1 = W + rightExt - R1 - RIGHT_EXTEND\n\n    const yCurrTop = O_TOTAL + Y_OFFSET\n    const segs = [\n      `M ${xRight} ${yCurrTop - R1 - STROKE_WIDTH / 2 - TOP_ARC_SHIFT}`,\n      `L ${xRight} ${yCurrTop - R1 - TOP_ARC_SHIFT}`,\n      `A ${rj1} ${rj1} 0 0 1 ${xRightR1} ${yCurrTop - oj - TOP_ARC_SHIFT}`,\n      `L ${xLeftArc} ${o + Y_OFFSET - TOP_ARC_SHIFT}`,\n      `A ${r} ${r} 0 0 0 ${xLeft} ${R + Y_OFFSET - TOP_ARC_SHIFT}`,\n      `L ${xLeft} ${R + Y_OFFSET}`,\n    ]\n\n    for (let t = 0; t < n - 1; t++) {\n      const yCurr = Y[t + 1]\n      const yNext = Y[t + 2]\n      const yExit = yCurr + R - O_TOTAL + Y_OFFSET\n\n      if (t % 2 === 0) {\n        segs.push(`L ${xLeft} ${yCurr - R + Y_OFFSET}`)\n        segs.push(`A ${r}  ${r}  0 0 0 ${xLeftArc}      ${yCurr - o + Y_OFFSET}`)\n        segs.push(`L ${xRightArc} ${yCurr - o + Y_OFFSET}`)\n        segs.push(`A ${rj} ${rj} 0 0 1 ${xRight} ${yExit}`)\n        segs.push(`L ${xRight} ${yNext - R + Y_OFFSET}`)\n      } else {\n        segs.push(`L ${xRight} ${yCurr - R + Y_OFFSET}`)\n        segs.push(`A ${rj} ${rj} 0 0 1 ${xRightArc} ${yCurr - oj + Y_OFFSET}`)\n        segs.push(`L ${xLeftArc} ${yCurr - oj + Y_OFFSET}`)\n        segs.push(`A ${r}  ${r}  0 0 0 ${xLeft}      ${yExit}`)\n        segs.push(`L ${xLeft} ${yNext - R + Y_OFFSET}`)\n      }\n    }\n\n    const lastY = Y[n]\n    if ((n - 2) % 2 === 0) {\n      segs.push(`L ${xRight} ${lastY}`)\n    } else {\n      segs.push(`L ${xLeft} ${lastY}`)\n    }\n    parts.push({\n      d: segs.join(' '),\n      stroke: COLORS[i % COLORS.length],\n      'stroke-width': STROKE_WIDTH,\n      fill: 'none',\n    })\n  }\n  return parts\n}\n\nconst DEFAULT_SVG_CLASS = 'serpentine-border-svg'\n\nconst DEFAULTS = {\n  strokeCount: 5,\n  strokeWidth: 8,\n  radius: 50,\n  horizontalOverflow: 0,\n  layoutMode: 'border',\n}\n\n/**\n * Compute everything needed to render the serpentine border.\n * Accepts either (width + sectionBottomYs) for pure/custom use, or wrapperEl to measure from the DOM.\n * When using wrapperEl, returns null in non-DOM environments (e.g. SSR) or when measurement fails.\n *\n * @param {{\n *   width?: number\n *   sectionBottomYs?: number[]\n *   wrapperEl?: HTMLElement\n *   strokeCount?: number\n *   strokeWidth?: number\n *   radius?: number\n *   horizontalOverflow?: number | 'borderWidth' | 'halfBorderWidth'\n *   colors?: string[]\n *   layoutMode?: 'content' | 'border'\n *   svgClassName?: string\n * }} options\n * @returns {{\n *   wrapperStyle: Record<string, unknown>\n *   svgAttributes: { class?: string, viewBox: string, style: string }\n *   paths: Array<{ d: string, stroke: string, 'stroke-width': number, fill: string }>\n * } | null}\n */\nexport function serpentineBorder(options) {\n  const N = options.strokeCount ?? DEFAULTS.strokeCount\n  const STROKE_WIDTH = options.strokeWidth ?? DEFAULTS.strokeWidth\n  const R = options.radius ?? DEFAULTS.radius\n  const horizontalOverflow = options.horizontalOverflow ?? DEFAULTS.horizontalOverflow\n  const COLORS = options.colors ?? DEFAULT_COLORS\n  const layoutMode = options.layoutMode ?? DEFAULTS.layoutMode\n  const svgClassName = options.svgClassName ?? DEFAULT_SVG_CLASS\n\n  let W, Y\n  if (options.wrapperEl != null) {\n    const wrapperEl = options.wrapperEl\n    const hasDOM = typeof document !== 'undefined' && typeof wrapperEl.getBoundingClientRect === 'function'\n    if (!hasDOM) return null\n    const measured = measureSections(wrapperEl, {\n      layoutMode,\n      horizontalOverflow,\n      strokeCount: N,\n      strokeWidth: STROKE_WIDTH,\n      excludeClassName: svgClassName,\n    })\n    if (!measured) return null\n    W = measured.width\n    Y = measured.sectionBottomYs\n  } else {\n    if (options.width == null || options.sectionBottomYs == null) return null\n    W = options.width\n    Y = options.sectionBottomYs\n  }\n\n  const BORDER_EXTRA = resolveOverflowToPixels(horizontalOverflow, N, STROKE_WIDTH)\n  const O_TOTAL = (N - 1) * STROKE_WIDTH\n  const TOTAL_BORDER_WIDTH = N * STROKE_WIDTH\n  const TOP_OFFSET = 2 * STROKE_WIDTH\n  const Y_OFFSET = O_TOTAL / 2\n  const TOP_ARC_SHIFT = ((N - 1) / 2) * STROKE_WIDTH + Y_OFFSET\n\n  const wrapperStyle =\n    layoutMode === 'border'\n      ? {\n          boxSizing: 'border-box',\n          position: 'relative',\n          marginTop: `${TOTAL_BORDER_WIDTH / 2}px`,\n          ...(BORDER_EXTRA > 0 && {\n            paddingLeft: `${BORDER_EXTRA}px`,\n            paddingRight: `${BORDER_EXTRA}px`,\n          }),\n        }\n      : {\n          position: 'relative',\n          boxSizing: 'border-box',\n        }\n\n  const svgStyleObj =\n    layoutMode === 'border'\n      ? {\n          position: 'absolute',\n          overflow: 'hidden',\n          ...(BORDER_EXTRA > 0\n            ? { width: '100%', left: 0 }\n            : { width: `calc(100% + ${2 * BORDER_EXTRA}px)`, left: -BORDER_EXTRA }),\n          top: -(TOP_OFFSET + TOP_ARC_SHIFT),\n          height: `calc(100% + ${TOP_OFFSET + TOP_ARC_SHIFT}px)`,\n        }\n      : {\n          position: 'absolute',\n          overflow: 'hidden',\n          width: `calc(100% + ${2 * BORDER_EXTRA}px)`,\n          left: -BORDER_EXTRA,\n          top: -(TOP_OFFSET + TOP_ARC_SHIFT),\n          height: `calc(100% + ${TOP_OFFSET + TOP_ARC_SHIFT}px)`,\n        }\n  const svgStyle = styleObjectToCss(svgStyleObj)\n\n  const paths = buildPathD(W, Y, N, R, STROKE_WIDTH, COLORS, TOP_ARC_SHIFT, Y_OFFSET, O_TOTAL, BORDER_EXTRA)\n\n  const totalHeight = Y[Y.length - 1] ?? 0\n  const totalWidth = Math.max(1, W + 2 * BORDER_EXTRA)\n  const viewBoxHeight = totalHeight + TOP_OFFSET + TOP_ARC_SHIFT\n  const viewBoxMinX = BORDER_EXTRA > 0 ? -BORDER_EXTRA : 0\n  const viewBoxMinY = -STROKE_WIDTH * 2 - TOP_ARC_SHIFT\n  const viewBoxStr = `${viewBoxMinX} ${viewBoxMinY} ${totalWidth} ${viewBoxHeight}`\n\n  return {\n    wrapperStyle,\n    svgAttributes: {\n      class: svgClassName,\n      viewBox: viewBoxStr,\n      style: svgStyle,\n    },\n    paths,\n  }\n}\n\n/**\n * Compute padding for each section so content does not overlap the border.\n * Returns an object with even, odd, and last: use for even-indexed sections, odd-indexed sections, and the last section respectively.\n *\n * @param {{\n *   sectionCount: number\n *   strokeCount: number\n *   strokeWidth: number\n *   horizontalOverflow?: number | 'borderWidth' | 'halfBorderWidth'\n * }} options\n * @returns {{ even: { top: number, right: number, bottom: number, left: number }, odd: { top: number, right: number, bottom: number, left: number }, last: { top: number, right: number, bottom: number, left: number } }}\n */\nexport function getSectionsPadding(options) {\n  const { sectionCount: n, strokeCount: N, strokeWidth: STROKE_WIDTH } = options\n  const horizontalOverflow = options.horizontalOverflow ?? 0\n  const TOTAL_BORDER_WIDTH = N * STROKE_WIDTH\n  const BORDER_EXTRA = resolveOverflowToPixels(horizontalOverflow, N, STROKE_WIDTH)\n  const halfBorderWidth = TOTAL_BORDER_WIDTH / 2\n  const insetSide = TOTAL_BORDER_WIDTH - BORDER_EXTRA\n  const even = { top: halfBorderWidth, right: 0, bottom: halfBorderWidth, left: insetSide }\n  const odd = { top: halfBorderWidth, right: insetSide, bottom: halfBorderWidth, left: 0 }\n  const lastIsEven = n > 0 && (n - 1) % 2 === 0\n  const last = {\n    top: halfBorderWidth,\n    right: lastIsEven ? 0 : insetSide,\n    bottom: 0,\n    left: lastIsEven ? insetSide : 0,\n  }\n  return { even, odd, last }\n}\n\n/**\n * Measure wrapper and section elements to get width and section bottom Ys.\n * Children with the excludeClassName (default: same class used on the SVG by serpentineBorder) are excluded.\n * horizontalOverflow is resolved to pixels using strokeCount and strokeWidth.\n *\n * @param {HTMLElement} wrapperEl\n * @param {{\n *   layoutMode: 'content' | 'border'\n *   horizontalOverflow?: number | 'borderWidth' | 'halfBorderWidth'\n *   strokeCount: number\n *   strokeWidth: number\n *   excludeClassName?: string\n * }} options\n * @returns {{ width: number, sectionBottomYs: number[] } | null}\n */\nexport function measureSections(wrapperEl, options) {\n  const { layoutMode, horizontalOverflow = 0, strokeCount, strokeWidth, excludeClassName = DEFAULT_SVG_CLASS } = options\n  const BORDER_EXTRA = resolveOverflowToPixels(horizontalOverflow, strokeCount, strokeWidth)\n  if (!wrapperEl) return null\n\n  const sectionEls = excludeClassName\n    ? Array.from(wrapperEl.children).filter((el) => !el.classList.contains(excludeClassName))\n    : Array.from(wrapperEl.children)\n\n  if (sectionEls.length === 0) return null\n\n  const rect = wrapperEl.getBoundingClientRect()\n  const baseWidth = rect.width\n\n  const W =\n    layoutMode === 'border'\n      ? Math.max(1, baseWidth - 2 * BORDER_EXTRA)\n      : Math.max(1, baseWidth)\n\n  const Y = [0]\n  for (let i = 0; i < sectionEls.length; i++) {\n    const r = sectionEls[i].getBoundingClientRect()\n    Y.push(r.top - rect.top + r.height)\n  }\n\n  return { width: W, sectionBottomYs: Y }\n}\n","import { useEffect, useRef, useState } from 'react'\nimport { measureSections, serpentineBorder } from './serpentineCore.js'\n\nfunction cssStringToStyleObject(css) {\n  const obj = {}\n  if (!css || typeof css !== 'string') return obj\n  for (const decl of css.split(';')) {\n    const colon = decl.indexOf(':')\n    if (colon === -1) continue\n    const key = decl.slice(0, colon).trim().replace(/-([a-z])/g, (_, c) => c.toUpperCase())\n    const value = decl.slice(colon + 1).trim()\n    if (key) obj[key] = value\n  }\n  return obj\n}\n\nfunction pathAttrsForReact(attrs) {\n  return Object.fromEntries(\n    Object.entries(attrs).map(([k, v]) => [k === 'stroke-width' ? 'strokeWidth' : k, v])\n  )\n}\n\nfunction SerpentineBorder({\n  children,\n  strokeCount,\n  strokeWidth,\n  radius,\n  horizontalOverflow,\n  colors,\n  layoutMode,\n}) {\n  const wrapperRef = useRef(null)\n  const [borderData, setBorderData] = useState(null)\n\n  useEffect(() => {\n    const wrapper = wrapperRef.current\n    if (!wrapper) return\n\n    const measure = () => {\n      const measured = measureSections(wrapper, {\n        layoutMode,\n        horizontalOverflow,\n        strokeCount,\n        strokeWidth,\n      })\n      if (!measured) return\n\n      const data = serpentineBorder({\n        width: measured.width,\n        sectionBottomYs: measured.sectionBottomYs,\n        strokeCount,\n        strokeWidth,\n        radius,\n        horizontalOverflow,\n        colors,\n        layoutMode,\n      })\n      setBorderData(data)\n    }\n\n    measure()\n    const ro = new ResizeObserver(measure)\n    ro.observe(wrapper)\n    return () => ro.disconnect()\n  }, [strokeCount, strokeWidth, radius, horizontalOverflow, colors, layoutMode])\n\n  return (\n    <div\n      ref={wrapperRef}\n      className=\"serpentine-wrapper\"\n      style={borderData?.wrapperStyle ?? { position: 'relative', boxSizing: 'border-box' }}\n      data-testid=\"serpentine-wrapper\"\n    >\n      {borderData && (() => {\n        const { class: className, style: styleStr, ...restSvgAttrs } = borderData.svgAttributes\n        const style = typeof styleStr === 'string' ? cssStringToStyleObject(styleStr) : styleStr\n        return (\n          <svg\n            data-testid=\"serpentine-svg\"\n            className={className}\n            style={style}\n            {...restSvgAttrs}\n          >\n            {borderData.paths.map((pathAttributes, i) => (\n              <path key={i} {...pathAttrsForReact(pathAttributes)} />\n            ))}\n          </svg>\n        )\n      })()}\n      {children}\n    </div>\n  )\n}\n\nexport default SerpentineBorder\n"],"names":["DEFAULT_COLORS","resolveOverflowToPixels","horizontalOverflow","N","STROKE_WIDTH","totalBorderWidth","styleObjectToCss","obj","k","v","key","val","buildPathD","W","Y","R","COLORS","TOP_ARC_SHIFT","Y_OFFSET","O_TOTAL","BORDER_EXTRA","R1","RIGHT_EXTEND","n","parts","i","o","oj","r","rj","rj1","leftOffset","xLeft","rightExt","xRight","xLeftArc","xRightArc","xRightR1","yCurrTop","segs","t","yCurr","yNext","yExit","lastY","DEFAULT_SVG_CLASS","DEFAULTS","serpentineBorder","options","layoutMode","svgClassName","wrapperEl","measured","measureSections","TOTAL_BORDER_WIDTH","TOP_OFFSET","wrapperStyle","svgStyleObj","svgStyle","paths","totalHeight","totalWidth","viewBoxHeight","viewBoxMinX","viewBoxMinY","viewBoxStr","getSectionsPadding","halfBorderWidth","insetSide","even","odd","lastIsEven","strokeCount","strokeWidth","excludeClassName","sectionEls","el","rect","baseWidth","cssStringToStyleObject","css","decl","colon","_","c","value","pathAttrsForReact","attrs","SerpentineBorder","children","radius","colors","wrapperRef","useRef","borderData","setBorderData","useState","useEffect","wrapper","measure","data","ro","jsxs","className","styleStr","restSvgAttrs","style","jsx","pathAttributes"],"mappings":"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"}
+{"version":3,"file":"serpentine-border.js","sources":["../src/constants.js","../src/serpentineCore.js","../src/SerpentineBorder.jsx"],"sourcesContent":["export const DEFAULT_COLORS = ['#ffffff', '#000000']\n","/**\n * Vanilla JS core for serpentine border SVG generation.\n * Single export: call with measured dimensions and options to get everything needed to render.\n */\n\nimport { DEFAULT_COLORS } from './constants.js'\n\nfunction resolveOverflowToPixels(horizontalOverflow, N, STROKE_WIDTH) {\n  if (typeof horizontalOverflow === 'number') return horizontalOverflow\n  const totalBorderWidth = N * STROKE_WIDTH\n  if (horizontalOverflow === 'borderWidth') return totalBorderWidth\n  if (horizontalOverflow === 'halfBorderWidth') return totalBorderWidth / 2\n  return 0\n}\n\nfunction styleObjectToCss(obj) {\n  return Object.entries(obj)\n    .map(([k, v]) => {\n      const key = k.replace(/([A-Z])/g, '-$1').toLowerCase()\n      const val = typeof v === 'number' && !Number.isNaN(v) ? `${v}px` : String(v)\n      return `${key}: ${val}`\n    })\n    .join('; ')\n}\n\nfunction buildPathD(W, Y, N, R, STROKE_WIDTH, COLORS, TOP_ARC_SHIFT, Y_OFFSET, O_TOTAL, BORDER_EXTRA) {\n  const R1 = STROKE_WIDTH * (N - 1)\n  const RIGHT_EXTEND = STROKE_WIDTH / 2\n  const n = Y.length - 1\n  const parts = []\n  for (let i = 0; i < N; i++) {\n    const o = i * STROKE_WIDTH\n    const j = N - 1 - i\n    const oj = j * STROKE_WIDTH\n    const r = R - o\n    const rj = R - oj\n    const r1 = R1 - o\n    const rj1 = R1 - oj\n\n    const leftOffset = O_TOTAL - BORDER_EXTRA + RIGHT_EXTEND\n    const xLeft = o - O_TOTAL + leftOffset\n    const rightExt = BORDER_EXTRA\n    const xRight = W + rightExt - oj - RIGHT_EXTEND\n    const xLeftArc = xLeft + (R - o)\n    const xRightArc = W + rightExt - R - RIGHT_EXTEND\n    const xRightR1 = W + rightExt - R1 - RIGHT_EXTEND\n\n    const yCurrTop = O_TOTAL + Y_OFFSET\n    const segs = [\n      `M ${xRight} ${yCurrTop - R1 - STROKE_WIDTH / 2 - TOP_ARC_SHIFT}`,\n      `L ${xRight} ${yCurrTop - R1 - TOP_ARC_SHIFT}`,\n      `A ${rj1} ${rj1} 0 0 1 ${xRightR1} ${yCurrTop - oj - TOP_ARC_SHIFT}`,\n      `L ${xLeftArc} ${o + Y_OFFSET - TOP_ARC_SHIFT}`,\n      `A ${r} ${r} 0 0 0 ${xLeft} ${R + Y_OFFSET - TOP_ARC_SHIFT}`,\n      `L ${xLeft} ${R + Y_OFFSET}`,\n    ]\n\n    for (let t = 0; t < n - 1; t++) {\n      const yCurr = Y[t + 1]\n      const yNext = Y[t + 2]\n      const yExit = yCurr + R - O_TOTAL + Y_OFFSET\n\n      if (t % 2 === 0) {\n        segs.push(`L ${xLeft} ${yCurr - R + Y_OFFSET}`)\n        segs.push(`A ${r}  ${r}  0 0 0 ${xLeftArc}      ${yCurr - o + Y_OFFSET}`)\n        segs.push(`L ${xRightArc} ${yCurr - o + Y_OFFSET}`)\n        segs.push(`A ${rj} ${rj} 0 0 1 ${xRight} ${yExit}`)\n        segs.push(`L ${xRight} ${yNext - R + Y_OFFSET}`)\n      } else {\n        segs.push(`L ${xRight} ${yCurr - R + Y_OFFSET}`)\n        segs.push(`A ${rj} ${rj} 0 0 1 ${xRightArc} ${yCurr - oj + Y_OFFSET}`)\n        segs.push(`L ${xLeftArc} ${yCurr - oj + Y_OFFSET}`)\n        segs.push(`A ${r}  ${r}  0 0 0 ${xLeft}      ${yExit}`)\n        segs.push(`L ${xLeft} ${yNext - R + Y_OFFSET}`)\n      }\n    }\n\n    const lastY = Y[n]\n    if ((n - 2) % 2 === 0) {\n      segs.push(`L ${xRight} ${lastY}`)\n    } else {\n      segs.push(`L ${xLeft} ${lastY}`)\n    }\n    parts.push({\n      d: segs.join(' '),\n      stroke: COLORS[i % COLORS.length],\n      'stroke-width': STROKE_WIDTH,\n      fill: 'none',\n    })\n  }\n  return parts\n}\n\nconst DEFAULT_SVG_CLASS = 'serpentine-border-svg'\n\nconst DEFAULTS = {\n  strokeCount: 5,\n  strokeWidth: 8,\n  radius: 50,\n  horizontalOverflow: 0,\n  layoutMode: 'border',\n}\n\n/**\n * Compute everything needed to render the serpentine border.\n * Accepts either (width + sectionBottomYs) for pure/custom use, or wrapperEl to measure from the DOM.\n * When using wrapperEl, returns null in non-DOM environments (e.g. SSR) or when measurement fails.\n *\n * @param {{\n *   width?: number\n *   sectionBottomYs?: number[]\n *   wrapperEl?: HTMLElement\n *   strokeCount?: number\n *   strokeWidth?: number\n *   radius?: number\n *   horizontalOverflow?: number | 'borderWidth' | 'halfBorderWidth'\n *   colors?: string[]\n *   layoutMode?: 'content' | 'border'\n *   svgClassName?: string\n * }} options\n * @returns {{\n *   wrapperStyle: Record<string, unknown>\n *   svgAttributes: { class?: string, viewBox: string, style: string }\n *   paths: Array<{ d: string, stroke: string, 'stroke-width': number, fill: string }>\n * } | null}\n */\nexport function serpentineBorder(options) {\n  const N = options.strokeCount ?? DEFAULTS.strokeCount\n  const STROKE_WIDTH = options.strokeWidth ?? DEFAULTS.strokeWidth\n  const R = options.radius ?? DEFAULTS.radius\n  const horizontalOverflow = options.horizontalOverflow ?? DEFAULTS.horizontalOverflow\n  const COLORS = options.colors ?? DEFAULT_COLORS\n  const layoutMode = options.layoutMode ?? DEFAULTS.layoutMode\n  const svgClassName = options.svgClassName ?? DEFAULT_SVG_CLASS\n\n  let W, Y\n  if (options.wrapperEl != null) {\n    const wrapperEl = options.wrapperEl\n    const hasDOM = typeof document !== 'undefined' && typeof wrapperEl.getBoundingClientRect === 'function'\n    if (!hasDOM) return null\n    const measured = measureSections(wrapperEl, {\n      layoutMode,\n      horizontalOverflow,\n      strokeCount: N,\n      strokeWidth: STROKE_WIDTH,\n      excludeClassName: svgClassName,\n    })\n    if (!measured) return null\n    W = measured.width\n    Y = measured.sectionBottomYs\n  } else {\n    if (options.width == null || options.sectionBottomYs == null) return null\n    W = options.width\n    Y = options.sectionBottomYs\n  }\n\n  const BORDER_EXTRA = resolveOverflowToPixels(horizontalOverflow, N, STROKE_WIDTH)\n  const O_TOTAL = (N - 1) * STROKE_WIDTH\n  const TOTAL_BORDER_WIDTH = N * STROKE_WIDTH\n  const TOP_OFFSET = 2 * STROKE_WIDTH\n  const Y_OFFSET = O_TOTAL / 2\n  const TOP_ARC_SHIFT = ((N - 1) / 2) * STROKE_WIDTH + Y_OFFSET\n\n  const wrapperStyle =\n    layoutMode === 'border'\n      ? {\n          boxSizing: 'border-box',\n          position: 'relative',\n          marginTop: `${TOTAL_BORDER_WIDTH / 2}px`,\n          ...(BORDER_EXTRA > 0 && {\n            paddingLeft: `${BORDER_EXTRA}px`,\n            paddingRight: `${BORDER_EXTRA}px`,\n          }),\n        }\n      : {\n          position: 'relative',\n          boxSizing: 'border-box',\n        }\n\n  const svgStyleObj =\n    layoutMode === 'border'\n      ? {\n          position: 'absolute',\n          overflow: 'hidden',\n          width: '100%',\n          left: 0,\n          top: -(TOP_OFFSET + TOP_ARC_SHIFT),\n          height: `calc(100% + ${TOP_OFFSET + TOP_ARC_SHIFT}px)`,\n        }\n      : {\n          position: 'absolute',\n          overflow: 'hidden',\n          width: `calc(100% + ${2 * BORDER_EXTRA}px)`,\n          left: -BORDER_EXTRA,\n          top: -(TOP_OFFSET + TOP_ARC_SHIFT),\n          height: `calc(100% + ${TOP_OFFSET + TOP_ARC_SHIFT}px)`,\n        }\n  const svgStyle = styleObjectToCss(svgStyleObj)\n\n  const paths = buildPathD(W, Y, N, R, STROKE_WIDTH, COLORS, TOP_ARC_SHIFT, Y_OFFSET, O_TOTAL, BORDER_EXTRA)\n\n  const totalHeight = Y[Y.length - 1] ?? 0\n  const totalWidth =\n    BORDER_EXTRA < 0 ? Math.max(1, W) : Math.max(1, W + 2 * BORDER_EXTRA)\n  const viewBoxHeight = totalHeight + TOP_OFFSET + TOP_ARC_SHIFT\n  const viewBoxMinX = BORDER_EXTRA < 0 ? 0 : -BORDER_EXTRA\n  const viewBoxMinY = -STROKE_WIDTH * 2 - TOP_ARC_SHIFT\n  const viewBoxStr = `${viewBoxMinX} ${viewBoxMinY} ${totalWidth} ${viewBoxHeight}`\n\n  const svgAttributes = {\n    class: svgClassName,\n    viewBox: viewBoxStr,\n    style: svgStyle,\n  }\n  if (layoutMode === 'border' && BORDER_EXTRA < 0) {\n    svgAttributes.preserveAspectRatio = 'none'\n  }\n  return {\n    wrapperStyle,\n    svgAttributes,\n    paths,\n  }\n}\n\n/**\n * Compute padding for each section so content does not overlap the border.\n * Returns an object with even, odd, and last: use for even-indexed sections, odd-indexed sections, and the last section respectively.\n *\n * @param {{\n *   sectionCount: number\n *   strokeCount: number\n *   strokeWidth: number\n *   horizontalOverflow?: number | 'borderWidth' | 'halfBorderWidth'\n * }} options\n * @returns {{ even: { top: number, right: number, bottom: number, left: number }, odd: { top: number, right: number, bottom: number, left: number }, last: { top: number, right: number, bottom: number, left: number } }}\n */\nexport function getSectionsPadding(options) {\n  const { sectionCount: n, strokeCount: N, strokeWidth: STROKE_WIDTH } = options\n  const horizontalOverflow = options.horizontalOverflow ?? 0\n  const TOTAL_BORDER_WIDTH = N * STROKE_WIDTH\n  const BORDER_EXTRA = resolveOverflowToPixels(horizontalOverflow, N, STROKE_WIDTH)\n  const halfBorderWidth = TOTAL_BORDER_WIDTH / 2\n  const insetSide = TOTAL_BORDER_WIDTH - BORDER_EXTRA\n  const even = { top: halfBorderWidth, right: 0, bottom: halfBorderWidth, left: insetSide }\n  const odd = { top: halfBorderWidth, right: insetSide, bottom: halfBorderWidth, left: 0 }\n  const lastIsEven = n > 0 && (n - 1) % 2 === 0\n  const last = {\n    top: halfBorderWidth,\n    right: lastIsEven ? 0 : insetSide,\n    bottom: 0,\n    left: lastIsEven ? insetSide : 0,\n  }\n  return { even, odd, last }\n}\n\n/**\n * Measure wrapper and section elements to get width and section bottom Ys.\n * Children with the excludeClassName (default: same class used on the SVG by serpentineBorder) are excluded.\n * horizontalOverflow is resolved to pixels using strokeCount and strokeWidth.\n *\n * @param {HTMLElement} wrapperEl\n * @param {{\n *   layoutMode: 'content' | 'border'\n *   horizontalOverflow?: number | 'borderWidth' | 'halfBorderWidth'\n *   strokeCount: number\n *   strokeWidth: number\n *   excludeClassName?: string\n * }} options\n * @returns {{ width: number, sectionBottomYs: number[] } | null}\n */\nexport function measureSections(wrapperEl, options) {\n  const { layoutMode, horizontalOverflow = 0, strokeCount, strokeWidth, excludeClassName = DEFAULT_SVG_CLASS } = options\n  const BORDER_EXTRA = resolveOverflowToPixels(horizontalOverflow, strokeCount, strokeWidth)\n  if (!wrapperEl) return null\n\n  const sectionEls = excludeClassName\n    ? Array.from(wrapperEl.children).filter((el) => !el.classList.contains(excludeClassName))\n    : Array.from(wrapperEl.children)\n\n  if (sectionEls.length === 0) return null\n\n  const rect = wrapperEl.getBoundingClientRect()\n  const baseWidth = rect.width\n\n  const W =\n    layoutMode === 'border'\n      ? Math.max(1, baseWidth - 2 * BORDER_EXTRA)\n      : Math.max(1, baseWidth)\n\n  const Y = [0]\n  for (let i = 0; i < sectionEls.length; i++) {\n    const r = sectionEls[i].getBoundingClientRect()\n    Y.push(r.top - rect.top + r.height)\n  }\n\n  return { width: W, sectionBottomYs: Y }\n}\n","import { useEffect, useRef, useState } from 'react'\nimport { measureSections, serpentineBorder } from './serpentineCore.js'\n\nfunction cssStringToStyleObject(css) {\n  const obj = {}\n  if (!css || typeof css !== 'string') return obj\n  for (const decl of css.split(';')) {\n    const colon = decl.indexOf(':')\n    if (colon === -1) continue\n    const key = decl.slice(0, colon).trim().replace(/-([a-z])/g, (_, c) => c.toUpperCase())\n    const value = decl.slice(colon + 1).trim()\n    if (key) obj[key] = value\n  }\n  return obj\n}\n\nfunction pathAttrsForReact(attrs) {\n  return Object.fromEntries(\n    Object.entries(attrs).map(([k, v]) => [k === 'stroke-width' ? 'strokeWidth' : k, v])\n  )\n}\n\nfunction SerpentineBorder({\n  children,\n  strokeCount,\n  strokeWidth,\n  radius,\n  horizontalOverflow,\n  colors,\n  layoutMode,\n}) {\n  const wrapperRef = useRef(null)\n  const [borderData, setBorderData] = useState(null)\n\n  useEffect(() => {\n    const wrapper = wrapperRef.current\n    if (!wrapper) return\n\n    const measure = () => {\n      const measured = measureSections(wrapper, {\n        layoutMode,\n        horizontalOverflow,\n        strokeCount,\n        strokeWidth,\n      })\n      if (!measured) return\n\n      const data = serpentineBorder({\n        width: measured.width,\n        sectionBottomYs: measured.sectionBottomYs,\n        strokeCount,\n        strokeWidth,\n        radius,\n        horizontalOverflow,\n        colors,\n        layoutMode,\n      })\n      setBorderData(data)\n    }\n\n    measure()\n    const ro = new ResizeObserver(measure)\n    ro.observe(wrapper)\n    return () => ro.disconnect()\n  }, [strokeCount, strokeWidth, radius, horizontalOverflow, colors, layoutMode])\n\n  return (\n    <div\n      ref={wrapperRef}\n      className=\"serpentine-wrapper\"\n      style={borderData?.wrapperStyle ?? { position: 'relative', boxSizing: 'border-box' }}\n      data-testid=\"serpentine-wrapper\"\n    >\n      {borderData && (() => {\n        const { class: className, style: styleStr, ...restSvgAttrs } = borderData.svgAttributes\n        const style = typeof styleStr === 'string' ? cssStringToStyleObject(styleStr) : styleStr\n        return (\n          <svg\n            data-testid=\"serpentine-svg\"\n            className={className}\n            style={style}\n            {...restSvgAttrs}\n          >\n            {borderData.paths.map((pathAttributes, i) => (\n              <path key={i} {...pathAttrsForReact(pathAttributes)} />\n            ))}\n          </svg>\n        )\n      })()}\n      {children}\n    </div>\n  )\n}\n\nexport default SerpentineBorder\n"],"names":["DEFAULT_COLORS","resolveOverflowToPixels","horizontalOverflow","N","STROKE_WIDTH","totalBorderWidth","styleObjectToCss","obj","k","v","key","val","buildPathD","W","Y","R","COLORS","TOP_ARC_SHIFT","Y_OFFSET","O_TOTAL","BORDER_EXTRA","R1","RIGHT_EXTEND","n","parts","i","o","oj","r","rj","rj1","leftOffset","xLeft","rightExt","xRight","xLeftArc","xRightArc","xRightR1","yCurrTop","segs","t","yCurr","yNext","yExit","lastY","DEFAULT_SVG_CLASS","DEFAULTS","serpentineBorder","options","layoutMode","svgClassName","wrapperEl","measured","measureSections","TOTAL_BORDER_WIDTH","TOP_OFFSET","wrapperStyle","svgStyleObj","svgStyle","paths","totalHeight","totalWidth","viewBoxHeight","viewBoxMinX","viewBoxMinY","viewBoxStr","svgAttributes","getSectionsPadding","halfBorderWidth","insetSide","even","odd","lastIsEven","strokeCount","strokeWidth","excludeClassName","sectionEls","el","rect","baseWidth","cssStringToStyleObject","css","decl","colon","_","c","value","pathAttrsForReact","attrs","SerpentineBorder","children","radius","colors","wrapperRef","useRef","borderData","setBorderData","useState","useEffect","wrapper","measure","data","ro","jsxs","className","styleStr","restSvgAttrs","style","jsx","pathAttributes"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "serpentine-border",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "description": "Multi-stroke serpentine (wavy) border SVG — vanilla JS and React",
   "type": "module",
   "main": "./dist/serpentine-border.cjs",