serpentine-border 1.0.1 → 2.0.0

package/README.md

@@ -1,6 +1,6 @@
 # serpentine-border
 
-A multi-stroke serpentine (wavy) border drawn with SVG. Use from vanilla JS or as a React component.
+A multi-stroke serpentine (wavy) border drawn with SVG. Usable as a helper function for building the border in vanillaJS (see example) or as a React component.
 
 ## Install
 
@@ -15,31 +15,36 @@ Pass a wrapper element; the border is computed from the measured heights of its
 ```js
 import { serpentineBorder } from 'serpentine-border'
 
-const wrapper = document.getElementById('wrapper')
-const result = serpentineBorder({ wrapperEl: wrapper })
-if (result) {
-  Object.assign(wrapper.style, result.wrapperStyle)
-  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
-  if (result.svgAttributes.class) svg.setAttribute('class', result.svgAttributes.class)
-  svg.setAttribute('viewBox', result.svgAttributes.viewBox)
-  Object.assign(svg.style, result.svgAttributes.style)
-  result.paths.forEach((p) => {
-    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
-    path.setAttribute('d', p.d)
-    path.setAttribute('stroke', p.stroke)
-    path.setAttribute('stroke-width', String(p.strokeWidth))
-    path.setAttribute('fill', p.fill)
-    svg.appendChild(path)
-  })
-  wrapper.insertBefore(svg, wrapper.firstChild)
+function setAttributes(el, attrs) {
+  for (const [key, value] of Object.entries(attrs)) {
+    if (value == null) continue
+    el.setAttribute(key, String(value))
+  }
 }
+
+const wrapperEl = document.getElementById('wrapper')
+const result = serpentineBorder({ wrapperEl })
+if (!result) return
+const { wrapperStyle, svgAttributes, paths, sectionsPadding } = result
+Object.assign(wrapperEl.style, wrapperStyle)
+// Optionally apply sectionsPadding[i] to each section so content does not overlap the border
+
+const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+setAttributes(svg, svgAttributes)
+
+for (const p of paths) {
+  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+  setAttributes(path, p)
+  svg.appendChild(path)
+}
+wrapperEl.insertBefore(svg, wrapperEl.firstChild)
 ```
 
 ## API
 
 ### serpentineBorder(options)
 
-Returns `wrapperStyle`, `svgAttributes` (class, viewBox, style), and `paths`. Pass either `wrapperEl` (measures from the DOM; returns `null` when DOM is unavailable, e.g. SSR) or `width` + `sectionBottomYs` (pure; never returns null).
+Returns `wrapperStyle`, `svgAttributes` (class, viewBox, style), `paths`, and `sectionsPadding` (array of `{ top, right, bottom, left }` padding in px for each section so content does not overlap the border). Pass either `wrapperEl` (measures from the DOM; returns `null` when DOM is unavailable, e.g. SSR) or `width` + `sectionBottomYs` (pure; never returns null).
 
 | Option | Type | Default | Description |
 |--------|------|---------|-------------|
@@ -49,11 +54,13 @@ Returns `wrapperStyle`, `svgAttributes` (class, viewBox, style), and `paths`. Pa
 | `strokeCount` | `number` | `5` | Number of parallel strokes. |
 | `strokeWidth` | `number` | `8` | Width of each stroke in px. |
 | `radius` | `number` | `50` | Radius of the wavy turns in px. |
-| `horizontalOverlap` | `number \| 'borderWidth' \| 'halfBorderWidth'` | `0` | Extra width per side (px or keyword). |
+| `horizontalOverflow` | `number \| 'borderWidth' \| 'halfBorderWidth'` | `0` | Horizontal overflow per side so the border extends past content (px or keyword). |
 | `colors` | `string[]` | `['#ffffff', '#000000']` | Stroke colors (hex/CSS). |
-| `layoutMode` | `'content' \| 'border'` | `'content'` | `'content'`: layout from content; `'border'`: outer border edge defines box. |
+| `layoutMode` | `'content' \| 'border'` | `'border'` | See note below. |
 | `svgClassName` | `string` | `'serpentine-border-svg'` | Class applied to the SVG (and used to exclude it when measuring). |
 
+**Layout mode:** In some instances, you may want the border to be an overlay that doesn't affect flow and content size. With `'content'`, the wrapper’s size follows its content and the border is drawn around it (the SVG can extend outside). With `'border'`, the outer edge of the border defines the box: the full border fits inside the layout, and content sits inside that box. This mode avoids the border spilling out and overlapping neighboring elements.
+
 ### React: SerpentineBorder
 
 Wrap your content with the React component; it accepts the same options as `serpentineBorder` as props.
@@ -81,6 +88,10 @@ function App() {
 
 When DOM is unavailable (e.g. server-side), pass `width` and `sectionBottomYs` into `serpentineBorder({ width, sectionBottomYs, ... })` instead of `wrapperEl`.
 
+## Tests
+
+Run `npm run test` for e2e tests. If Playwright browsers are not installed yet, run `npm run test:install-browsers` first. On Linux you may also need to install system dependencies (e.g. `sudo npx playwright install-deps`).
+
 ## License
 
 MIT

package/dist/serpentine-border.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react/jsx-runtime"),z=require("react"),J=["#ffffff","#000000"];function G(t,c,o){if(typeof t=="number")return t;const s=c*o;return t==="borderWidth"?s:t==="halfBorderWidth"?s/2:0}function Q(t,c,o,s,u,g,l,n,r,h){const e=u*(o-1),a=u/2,$=c.length-1,i=[];for(let f=0;f<o;f++){const d=f*u,m=(o-1-f)*u,v=s-d,B=s-m,C=e-m,k=r-h+a,x=d-r+k,L=h,b=t+L-m-a,y=x+(s-d),N=t+L-s-a,A=t+L-e-a,D=r+n,p=[`M ${b} ${D-e-u/2-l}`,`L ${b} ${D-e-l}`,`A ${C} ${C} 0 0 1 ${A} ${D-m-l}`,`L ${y} ${d+n-l}`,`A ${v} ${v} 0 0 0 ${x} ${s+n-l}`,`L ${x} ${s+n}`];for(let M=0;M<$-1;M++){const w=c[M+1],X=c[M+2],q=w+s-r+n;M%2===0?(p.push(`L ${x} ${w-s+n}`),p.push(`A ${v}  ${v}  0 0 0 ${y}      ${w-d+n}`),p.push(`L ${N} ${w-d+n}`),p.push(`A ${B} ${B} 0 0 1 ${b} ${q}`),p.push(`L ${b} ${X-s+n}`)):(p.push(`L ${b} ${w-s+n}`),p.push(`A ${B} ${B} 0 0 1 ${N} ${w-m+n}`),p.push(`L ${y} ${w-m+n}`),p.push(`A ${v}  ${v}  0 0 0 ${x}      ${q}`),p.push(`L ${x} ${X-s+n}`))}const U=c[$];($-2)%2===0?p.push(`L ${b} ${U}`):p.push(`L ${x} ${U}`),i.push({d:p.join(" "),stroke:g[f%g.length],strokeWidth:u,fill:"none"})}return i}const S="serpentine-border-svg",j={strokeCount:5,strokeWidth:8,radius:50,horizontalOverlap:0,layoutMode:"content"};function P(t){const c=t.strokeCount??j.strokeCount,o=t.strokeWidth??j.strokeWidth,s=t.radius??j.radius,u=t.horizontalOverlap??j.horizontalOverlap,g=t.colors??J,l=t.layoutMode??j.layoutMode,n=t.svgClassName??S;let r,h;if(t.wrapperEl!=null){const y=t.wrapperEl;if(!(typeof document<"u"&&typeof y.getBoundingClientRect=="function"))return null;const A=V(y,{layoutMode:l,horizontalOverlap:u,strokeCount:c,strokeWidth:o,excludeClassName:n});if(!A)return null;r=A.width,h=A.sectionBottomYs}else{if(t.width==null||t.sectionBottomYs==null)return null;r=t.width,h=t.sectionBottomYs}const e=G(u,c,o),a=(c-1)*o,$=c*o,i=2*o,f=a/2,d=(c-1)/2*o+f,R=l==="border"?{boxSizing:"border-box",position:"relative",marginTop:$/2,...e>0&&{paddingLeft:e,paddingRight:e}}:{position:"relative",boxSizing:"border-box"},m=l==="border"?{position:"absolute",overflow:"hidden",width:"100%",left:0,top:-(i+d),height:`calc(100% + ${i+d}px)`}:{position:"absolute",overflow:"hidden",width:`calc(100% + ${2*e}px)`,left:-e,top:-(i+d),height:`calc(100% + ${i+d}px)`},v=Q(r,h,c,s,o,g,d,f,a,e),B=h[h.length-1]??0,C=Math.max(1,r+2*e),k=B+i+d,x=e>0?-e:0,L=-o*2-d,b=`${x} ${L} ${C} ${k}`;return{wrapperStyle:R,svgAttributes:{class:n,viewBox:b,style:m},paths:v}}function V(t,c){const{layoutMode:o,horizontalOverlap:s=0,strokeCount:u,strokeWidth:g,excludeClassName:l=S}=c,n=G(s,u,g);if(!t)return null;const r=l?Array.from(t.children).filter(i=>!i.classList.contains(l)):Array.from(t.children);if(r.length===0)return null;const h=t.getBoundingClientRect(),e=h.width,a=o==="border"?Math.max(1,e-2*n):Math.max(1,e),$=[0];for(let i=0;i<r.length;i++){const f=r[i].getBoundingClientRect();$.push(f.top-h.top+f.height)}return{width:a,sectionBottomYs:$}}function Z({children:t,strokeCount:c,strokeWidth:o,radius:s,horizontalOverlap:u,colors:g,layoutMode:l}){const n=z.useRef(null),[r,h]=z.useState(null);return z.useEffect(()=>{const e=n.current;if(!e)return;const a=()=>{const i=V(e,{layoutMode:l,horizontalOverlap:u,strokeCount:c,strokeWidth:o});if(!i)return;const f=P({width:i.width,sectionBottomYs:i.sectionBottomYs,strokeCount:c,strokeWidth:o,radius:s,horizontalOverlap:u,colors:g,layoutMode:l});h(f)};a();const $=new ResizeObserver(a);return $.observe(e),()=>$.disconnect()},[c,o,s,u,g,l]),W.jsxs("div",{ref:n,className:"serpentine-wrapper",style:(r==null?void 0:r.wrapperStyle)??{position:"relative",boxSizing:"border-box"},"data-testid":"serpentine-wrapper",children:[r&&(()=>{const{class:e,...a}=r.svgAttributes;return W.jsx("svg",{"data-testid":"serpentine-svg",className:e,...a,children:r.paths.map(($,i)=>W.jsx("path",{...$},i))})})(),t]})}exports.SerpentineBorder=Z;exports.serpentineBorder=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("react/jsx-runtime"),U=require("react"),Z=["#ffffff","#000000"];function q(t,n,e){if(typeof t=="number")return t;const s=n*e;return t==="borderWidth"?s:t==="halfBorderWidth"?s/2:0}function J(t){return Object.entries(t).map(([n,e])=>{const s=n.replace(/([A-Z])/g,"-$1").toLowerCase(),c=typeof e=="number"&&!Number.isNaN(e)?`${e}px`:String(e);return`${s}: ${c}`}).join("; ")}function Q(t,n,e,s,c,x,u,r,i,$){const o=c*(e-1),a=c/2,f=n.length-1,l=[];for(let p=0;p<e;p++){const d=p*c,y=(e-1-p)*c,w=s-d,L=s-y,N=o-y,z=i-$+a,m=d-i+z,A=$,v=t+A-y-a,C=m+(s-d),M=t+A-s-a,S=t+A-o-a,j=i+r,h=[`M ${v} ${j-o-c/2-u}`,`L ${v} ${j-o-u}`,`A ${N} ${N} 0 0 1 ${S} ${j-y-u}`,`L ${C} ${d+r-u}`,`A ${w} ${w} 0 0 0 ${m} ${s+r-u}`,`L ${m} ${s+r}`];for(let B=0;B<f-1;B++){const g=n[B+1],W=n[B+2],D=g+s-i+r;B%2===0?(h.push(`L ${m} ${g-s+r}`),h.push(`A ${w}  ${w}  0 0 0 ${C}      ${g-d+r}`),h.push(`L ${M} ${g-d+r}`),h.push(`A ${L} ${L} 0 0 1 ${v} ${D}`),h.push(`L ${v} ${W-s+r}`)):(h.push(`L ${v} ${g-s+r}`),h.push(`A ${L} ${L} 0 0 1 ${M} ${g-y+r}`),h.push(`L ${C} ${g-y+r}`),h.push(`A ${w}  ${w}  0 0 0 ${m}      ${D}`),h.push(`L ${m} ${W-s+r}`))}const b=n[f];(f-2)%2===0?h.push(`L ${v} ${b}`):h.push(`L ${m} ${b}`),l.push({d:h.join(" "),stroke:x[p%x.length],"stroke-width":c,fill:"none"})}return l}const G="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,s=t.radius??k.radius,c=t.horizontalOverflow??k.horizontalOverflow,x=t.colors??Z,u=t.layoutMode??k.layoutMode,r=t.svgClassName??G;let i,$;if(t.wrapperEl!=null){const b=t.wrapperEl;if(!(typeof document<"u"&&typeof b.getBoundingClientRect=="function"))return null;const g=V(b,{layoutMode:u,horizontalOverflow:c,strokeCount:n,strokeWidth:e,excludeClassName:r});if(!g)return null;i=g.width,$=g.sectionBottomYs}else{if(t.width==null||t.sectionBottomYs==null)return null;i=t.width,$=t.sectionBottomYs}const o=q(c,n,e),a=(n-1)*e,f=n*e,l=2*e,p=a/2,d=(n-1)/2*e+p,X=u==="border"?{boxSizing:"border-box",position:"relative",marginTop:`${f/2}px`,...o>0&&{paddingLeft:`${o}px`,paddingRight:`${o}px`}}:{position:"relative",boxSizing:"border-box"},y=u==="border"?{position:"absolute",overflow:"hidden",width:"100%",left:0,top:-(l+d),height:`calc(100% + ${l+d}px)`}:{position:"absolute",overflow:"hidden",width:`calc(100% + ${2*o}px)`,left:-o,top:-(l+d),height:`calc(100% + ${l+d}px)`},w=J(y),L=Q(i,$,n,s,e,x,d,p,a,o),N=$[$.length-1]??0,z=Math.max(1,i+2*o),m=N+l+d,A=o>0?-o:0,v=-e*2-d,C=`${A} ${v} ${z} ${m}`,M=$.length-1,S=f/2,j=f-o,h=[];for(let b=0;b<M;b++){const B=S,g=b===M-1?0:S,W=b%2===0?j:0,D=b%2===0?0:j;h.push({top:B,right:D,bottom:g,left:W})}return{wrapperStyle:X,svgAttributes:{class:r,viewBox:C,style:w},paths:L,sectionsPadding:h}}function V(t,n){const{layoutMode:e,horizontalOverflow:s=0,strokeCount:c,strokeWidth:x,excludeClassName:u=G}=n,r=q(s,c,x);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 $=t.getBoundingClientRect(),o=$.width,a=e==="border"?Math.max(1,o-2*r):Math.max(1,o),f=[0];for(let l=0;l<i.length;l++){const p=i[l].getBoundingClientRect();f.push(p.top-$.top+p.height)}return{width:a,sectionBottomYs:f}}function E(t){const n={};if(!t||typeof t!="string")return n;for(const e of t.split(";")){const s=e.indexOf(":");if(s===-1)continue;const c=e.slice(0,s).trim().replace(/-([a-z])/g,(u,r)=>r.toUpperCase()),x=e.slice(s+1).trim();c&&(n[c]=x)}return n}function O(t){return Object.fromEntries(Object.entries(t).map(([n,e])=>[n==="stroke-width"?"strokeWidth":n,e]))}function H({children:t,strokeCount:n,strokeWidth:e,radius:s,horizontalOverflow:c,colors:x,layoutMode:u}){const r=U.useRef(null),[i,$]=U.useState(null);return U.useEffect(()=>{const o=r.current;if(!o)return;const a=()=>{const l=V(o,{layoutMode:u,horizontalOverflow:c,strokeCount:n,strokeWidth:e});if(!l)return;const p=P({width:l.width,sectionBottomYs:l.sectionBottomYs,strokeCount:n,strokeWidth:e,radius:s,horizontalOverflow:c,colors:x,layoutMode:u});$(p)};a();const f=new ResizeObserver(a);return f.observe(o),()=>f.disconnect()},[n,e,s,c,x,u]),R.jsxs("div",{ref:r,className:"serpentine-wrapper",style:(i==null?void 0:i.wrapperStyle)??{position:"relative",boxSizing:"border-box"},"data-testid":"serpentine-wrapper",children:[i&&(()=>{const{class:o,style:a,...f}=i.svgAttributes,l=typeof a=="string"?E(a):a;return R.jsx("svg",{"data-testid":"serpentine-svg",className:o,style:l,...f,children:i.paths.map((p,d)=>R.jsx("path",{...O(p)},d))})})(),t]})}exports.SerpentineBorder=H;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 resolveOverlapToPixels(horizontalOverlap, N, STROKE_WIDTH) {\n  if (typeof horizontalOverlap === 'number') return horizontalOverlap\n  const totalBorderWidth = N * STROKE_WIDTH\n  if (horizontalOverlap === 'borderWidth') return totalBorderWidth\n  if (horizontalOverlap === 'halfBorderWidth') return totalBorderWidth / 2\n  return 0\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      strokeWidth: 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  horizontalOverlap: 0,\n  layoutMode: 'content',\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 *   horizontalOverlap?: 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: Record<string, unknown> }\n *   paths: Array<{ d: string, stroke: string, strokeWidth: 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 horizontalOverlap = options.horizontalOverlap ?? DEFAULTS.horizontalOverlap\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      horizontalOverlap,\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 = resolveOverlapToPixels(horizontalOverlap, 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,\n          ...(BORDER_EXTRA > 0 && {\n            paddingLeft: BORDER_EXTRA,\n            paddingRight: BORDER_EXTRA,\n          }),\n        }\n      : {\n          position: 'relative',\n          boxSizing: 'border-box',\n        }\n\n  const svgStyle =\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\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 * 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 * horizontalOverlap is resolved to pixels using strokeCount and strokeWidth.\n *\n * @param {HTMLElement} wrapperEl\n * @param {{\n *   layoutMode: 'content' | 'border'\n *   horizontalOverlap?: 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, horizontalOverlap = 0, strokeCount, strokeWidth, excludeClassName = DEFAULT_SVG_CLASS } = options\n  const BORDER_EXTRA = resolveOverlapToPixels(horizontalOverlap, 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 SerpentineBorder({\n  children,\n  strokeCount,\n  strokeWidth,\n  radius,\n  horizontalOverlap,\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        horizontalOverlap,\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        horizontalOverlap,\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, horizontalOverlap, 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, ...restSvgAttrs } = borderData.svgAttributes\n        return (\n          <svg\n            data-testid=\"serpentine-svg\"\n            className={className}\n            {...restSvgAttrs}\n          >\n            {borderData.paths.map((pathAttributes, i) => (\n              <path key={i} {...pathAttributes} />\n            ))}\n          </svg>\n        )\n      })()}\n      {children}\n    </div>\n  )\n}\n\nexport default SerpentineBorder\n"],"names":["DEFAULT_COLORS","resolveOverlapToPixels","horizontalOverlap","N","STROKE_WIDTH","totalBorderWidth","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","svgStyle","paths","totalHeight","totalWidth","viewBoxHeight","viewBoxMinX","viewBoxMinY","viewBoxStr","strokeCount","strokeWidth","excludeClassName","sectionEls","el","rect","baseWidth","SerpentineBorder","children","radius","colors","wrapperRef","useRef","borderData","setBorderData","useState","useEffect","wrapper","measure","data","ro","jsxs","className","restSvgAttrs","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 *   sectionsPadding: Array<{ top: number, right: number, bottom: number, left: number }>\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 = 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  const n = Y.length - 1\n  const halfBorderWidth = TOTAL_BORDER_WIDTH / 2\n  const insetSide = TOTAL_BORDER_WIDTH - BORDER_EXTRA\n  const sectionsPadding = []\n  for (let i = 0; i < n; i++) {\n    const top = halfBorderWidth\n    const bottom = i === n - 1 ? 0 : halfBorderWidth\n    const left = i % 2 === 0 ? insetSide : 0\n    const right = i % 2 === 0 ? 0 : insetSide\n    sectionsPadding.push({ top, right, bottom, left })\n  }\n\n  return {\n    wrapperStyle,\n    svgAttributes: {\n      class: svgClassName,\n      viewBox: viewBoxStr,\n      style: svgStyle,\n    },\n    paths,\n    sectionsPadding,\n  }\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","halfBorderWidth","insetSide","sectionsPadding","top","bottom","left","right","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

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

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 resolveOverlapToPixels(horizontalOverlap, N, STROKE_WIDTH) {\n  if (typeof horizontalOverlap === 'number') return horizontalOverlap\n  const totalBorderWidth = N * STROKE_WIDTH\n  if (horizontalOverlap === 'borderWidth') return totalBorderWidth\n  if (horizontalOverlap === 'halfBorderWidth') return totalBorderWidth / 2\n  return 0\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      strokeWidth: 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  horizontalOverlap: 0,\n  layoutMode: 'content',\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 *   horizontalOverlap?: 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: Record<string, unknown> }\n *   paths: Array<{ d: string, stroke: string, strokeWidth: 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 horizontalOverlap = options.horizontalOverlap ?? DEFAULTS.horizontalOverlap\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      horizontalOverlap,\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 = resolveOverlapToPixels(horizontalOverlap, 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,\n          ...(BORDER_EXTRA > 0 && {\n            paddingLeft: BORDER_EXTRA,\n            paddingRight: BORDER_EXTRA,\n          }),\n        }\n      : {\n          position: 'relative',\n          boxSizing: 'border-box',\n        }\n\n  const svgStyle =\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\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 * 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 * horizontalOverlap is resolved to pixels using strokeCount and strokeWidth.\n *\n * @param {HTMLElement} wrapperEl\n * @param {{\n *   layoutMode: 'content' | 'border'\n *   horizontalOverlap?: 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, horizontalOverlap = 0, strokeCount, strokeWidth, excludeClassName = DEFAULT_SVG_CLASS } = options\n  const BORDER_EXTRA = resolveOverlapToPixels(horizontalOverlap, 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 SerpentineBorder({\n  children,\n  strokeCount,\n  strokeWidth,\n  radius,\n  horizontalOverlap,\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        horizontalOverlap,\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        horizontalOverlap,\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, horizontalOverlap, 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, ...restSvgAttrs } = borderData.svgAttributes\n        return (\n          <svg\n            data-testid=\"serpentine-svg\"\n            className={className}\n            {...restSvgAttrs}\n          >\n            {borderData.paths.map((pathAttributes, i) => (\n              <path key={i} {...pathAttributes} />\n            ))}\n          </svg>\n        )\n      })()}\n      {children}\n    </div>\n  )\n}\n\nexport default SerpentineBorder\n"],"names":["DEFAULT_COLORS","resolveOverlapToPixels","horizontalOverlap","N","STROKE_WIDTH","totalBorderWidth","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","svgStyle","paths","totalHeight","totalWidth","viewBoxHeight","viewBoxMinX","viewBoxMinY","viewBoxStr","strokeCount","strokeWidth","excludeClassName","sectionEls","el","rect","baseWidth","SerpentineBorder","children","radius","colors","wrapperRef","useRef","borderData","setBorderData","useState","useEffect","wrapper","measure","data","ro","jsxs","className","restSvgAttrs","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 *   sectionsPadding: Array<{ top: number, right: number, bottom: number, left: number }>\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 = 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  const n = Y.length - 1\n  const halfBorderWidth = TOTAL_BORDER_WIDTH / 2\n  const insetSide = TOTAL_BORDER_WIDTH - BORDER_EXTRA\n  const sectionsPadding = []\n  for (let i = 0; i < n; i++) {\n    const top = halfBorderWidth\n    const bottom = i === n - 1 ? 0 : halfBorderWidth\n    const left = i % 2 === 0 ? insetSide : 0\n    const right = i % 2 === 0 ? 0 : insetSide\n    sectionsPadding.push({ top, right, bottom, left })\n  }\n\n  return {\n    wrapperStyle,\n    svgAttributes: {\n      class: svgClassName,\n      viewBox: viewBoxStr,\n      style: svgStyle,\n    },\n    paths,\n    sectionsPadding,\n  }\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","halfBorderWidth","insetSide","sectionsPadding","top","bottom","left","right","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/index.d.ts

@@ -5,7 +5,7 @@ export interface SerpentineBorderProps {
   strokeCount?: number
   strokeWidth?: number
   radius?: number
-  horizontalOverlap?: number | 'borderWidth' | 'halfBorderWidth'
+  horizontalOverflow?: number | 'borderWidth' | 'halfBorderWidth'
   colors?: string[]
   layoutMode?: 'content' | 'border'
 }
@@ -23,16 +23,24 @@ export interface SerpentineBorderOptions {
   strokeCount?: number
   strokeWidth?: number
   radius?: number
-  horizontalOverlap?: number | 'borderWidth' | 'halfBorderWidth'
+  horizontalOverflow?: number | 'borderWidth' | 'halfBorderWidth'
   colors?: string[]
   layoutMode?: 'content' | 'border'
   svgClassName?: string
 }
 
+export interface SectionPadding {
+  top: number
+  right: number
+  bottom: number
+  left: number
+}
+
 export interface SerpentineBorderResult {
   wrapperStyle: Record<string, unknown>
-  svgAttributes: { class?: string; viewBox: string; style: Record<string, unknown> }
-  paths: Array<{ d: string; stroke: string; strokeWidth: number; fill: string }>
+  svgAttributes: { class?: string; viewBox: string; style: string }
+  paths: Array<{ d: string; stroke: string; 'stroke-width': number; fill: string }>
+  sectionsPadding: SectionPadding[]
 }
 
 export declare function serpentineBorder(options: SerpentineBorderOptions): SerpentineBorderResult | null

package/package.json

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