@pswaqtch/around 0.1.0 → 0.1.1

package/README.md

@@ -0,0 +1,86 @@
+# @pswaqtch/around
+
+Radial text layout engine for React. Wraps article-formatted text around closed and open track shapes — stadium, ellipse, spiral, wave, blob, or a custom SVG path.
+
+## Install
+
+```bash
+npm install @pswaqtch/around
+```
+
+## Usage
+
+```tsx
+import { RadialText } from "@pswaqtch/around";
+import "@pswaqtch/around/style.css";
+
+function App() {
+  return (
+    <RadialText
+      text={articleText}
+      shape="stadium"
+      loop
+    />
+  );
+}
+```
+
+The component renders a fixed, full-viewport disc. Scrolling advances the text along the track.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `text` | `string` | — | Markdown-lite article text (headings `#`, quotes `>`, lists `-`) |
+| `shape` | `RadialShapeKind` | `"stadium"` | Track shape |
+| `loop` | `boolean` | `false` | Loop text continuously around closed tracks |
+| `geometry` | `RadialTextGeometry` | — | Shape dimensions (width/height ratios, corner radius, etc.) |
+| `layout` | `RadialTextLayout` | — | Text inset, line spacing, alignment |
+| `typography` | `RadialTextTypography` | — | Font family, sizes, weights |
+| `discBg` | `string` | — | CSS `background` for the disc (overrides default gradient) |
+| `textColor` | `string` | `#171717` | Base text color |
+| `showGuides` | `boolean` | `true` | Show inner/outer track boundary guides |
+| `ref` | `Ref<RadialTextHandle>` | — | Imperative handle for export |
+
+### `RadialShapeKind`
+
+`"stadium" | "ellipse" | "spiral" | "wave" | "blob" | "svg-path"`
+
+### `RadialTextHandle`
+
+```ts
+interface RadialTextHandle {
+  discEl: HTMLDivElement;  // the viewport-filling disc element
+  rootEl: HTMLDivElement;  // the component root
+}
+```
+
+## Export
+
+```ts
+import { exportDiscAsPng, exportDiscAsSvg } from "@pswaqtch/around";
+
+const { discEl, rootEl } = radialRef.current;
+await exportDiscAsPng(discEl, rootEl, "output.png");
+exportDiscAsSvg(discEl, "output.svg");
+```
+
+`exportDiscAsSvg` walks the live DOM and emits pixel-perfect `<text>` elements — no canvas rendering.
+
+## Text format
+
+The `text` prop accepts a lightweight markdown-like format:
+
+```
+# Heading
+
+Regular paragraph text that wraps automatically.
+
+> A blockquote line
+
+- A list item
+```
+
+## License
+
+MIT

package/dist/index.css

@@ -1,4 +1,4 @@
-/* src/components/RadialText/RadialText.css */
+/* src/RadialText/RadialText.css */
 .radialText {
   position: relative;
 }

package/dist/index.js

@@ -1,21 +1,7 @@
-// src/components/RadialText/RadialText.tsx
+// src/RadialText/RadialText.tsx
 import { useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 
-// src/lib/article-layout.ts
-var DEFAULT_BODY_STYLE = Object.freeze({
-  fontSize: 9,
-  weight: 400,
-  family: "Georgia, serif"
-});
-var STYLE_BY_KIND = Object.freeze({
-  heading: Object.freeze({ fontSize: 11, weight: 700, family: "Georgia, serif" }),
-  paragraph: DEFAULT_BODY_STYLE,
-  "list-item": DEFAULT_BODY_STYLE,
-  "list-continuation": DEFAULT_BODY_STYLE,
-  quote: Object.freeze({ fontSize: 9, weight: 400, family: "Georgia, serif", italic: true }),
-  spacer: DEFAULT_BODY_STYLE,
-  separator: DEFAULT_BODY_STYLE
-});
+// src/layout/parse.ts
 var HEADING_MARKER_RE = /^(#{1,6})\s+(.+)$/;
 var LIST_MARKER_RE = /^[-*+]\s+(.+)$/;
 var NUMBERED_MARKER_RE = /^\d+[.)]\s+(.+)$/;
@@ -93,6 +79,73 @@ function parseArticle(source) {
   flushParagraph();
   return blocks;
 }
+function normalizeInlineText(text) {
+  return text.replace(/`([^`]+)`/g, "$1").replace(/\*\*([^*]+)\*\*/g, "$1").replace(/\*([^*]+)\*/g, "$1").replace(/\[([^\]]+)\]\([^)]+\)/g, "$1").replace(/\s+/g, " ").trim();
+}
+
+// src/layout/wrap.ts
+import { layoutWithLines, prepareWithSegments } from "@chenglou/pretext";
+var LINE_HEIGHT_RATIO = 1.12;
+var measureContext;
+function measureTextWidth(text, style) {
+  const context = getMeasureContext();
+  if (!context) {
+    return text.length * style.fontSize * 0.55;
+  }
+  context.font = toCanvasFont(style);
+  return context.measureText(text).width;
+}
+function fillLine(char, maxWidth, style) {
+  const charWidth = measureTextWidth(char, style);
+  const repeatCount = charWidth > 0 ? Math.floor(maxWidth / charWidth) : 1;
+  return char.repeat(Math.max(1, repeatCount));
+}
+function createPretextWrapper() {
+  const preparedCache = /* @__PURE__ */ new Map();
+  return function wrapText(text, maxWidth, style) {
+    const font = toCanvasFont(style);
+    const key = `${font}
+${text}`;
+    let prepared = preparedCache.get(key);
+    if (!prepared) {
+      prepared = prepareWithSegments(text, font);
+      preparedCache.set(key, prepared);
+    }
+    return layoutWithLines(prepared, maxWidth, style.fontSize * LINE_HEIGHT_RATIO).lines.map((line) => line.text);
+  };
+}
+function getMeasureContext() {
+  if (measureContext !== void 0) {
+    return measureContext;
+  }
+  if (typeof document === "undefined") {
+    measureContext = null;
+    return measureContext;
+  }
+  const canvas = document.createElement("canvas");
+  measureContext = canvas.getContext("2d");
+  return measureContext;
+}
+function toCanvasFont(style) {
+  const fontStyle = style.italic ? "italic " : "";
+  return `${fontStyle}${style.weight} ${style.fontSize}px ${style.family}`;
+}
+
+// src/layout/lines.ts
+var DEFAULT_BODY_STYLE = Object.freeze({
+  fontSize: 9,
+  weight: 400,
+  family: "Georgia, serif"
+});
+var STYLE_BY_KIND = Object.freeze({
+  heading: Object.freeze({ fontSize: 11, weight: 700, family: "Georgia, serif" }),
+  paragraph: DEFAULT_BODY_STYLE,
+  "list-item": DEFAULT_BODY_STYLE,
+  "list-continuation": DEFAULT_BODY_STYLE,
+  quote: Object.freeze({ fontSize: 9, weight: 400, family: "Georgia, serif", italic: true }),
+  spacer: DEFAULT_BODY_STYLE,
+  separator: DEFAULT_BODY_STYLE
+});
 function buildArticleLines(source, options) {
   const maxWidth = options.maxWidth;
   const wrapText = options.wrapText;
@@ -137,9 +190,6 @@ function getStyle(kind, typography) {
     ...kindOverride
   };
 }
-function normalizeInlineText(text) {
-  return text.replace(/`([^`]+)`/g, "$1").replace(/\*\*([^*]+)\*\*/g, "$1").replace(/\*([^*]+)\*/g, "$1").replace(/\[([^\]]+)\]\([^)]+\)/g, "$1").replace(/\s+/g, " ").trim();
-}
 function shouldInsertSpacer(previous, current) {
   if (current.kind === "list-item" && previous.kind === "list-item") {
     return false;
@@ -158,55 +208,105 @@ function createSpacerLine(typography) {
   };
 }
 
-// src/lib/pretext-wrap.ts
-import { layoutWithLines, prepareWithSegments } from "@chenglou/pretext";
-var LINE_HEIGHT_RATIO = 1.12;
-var measureContext;
-function measureTextWidth(text, style) {
-  const context = getMeasureContext();
-  if (!context) {
-    return text.length * style.fontSize * 0.55;
+// src/tracks/math.ts
+function roundedRectPoint(t, arcOffsetX, arcOffsetY, radius) {
+  const perimeter = 4 * arcOffsetX + 4 * arcOffsetY + 2 * Math.PI * radius;
+  let s = positiveUnit(t) * perimeter;
+  const quarterArc = Math.PI / 2 * radius;
+  if (s < 2 * arcOffsetX) {
+    return { x: -arcOffsetX + s, y: -(arcOffsetY + radius), angleDeg: -90 };
   }
-  context.font = toCanvasFont(style);
-  return context.measureText(text).width;
+  s -= 2 * arcOffsetX;
+  if (s < quarterArc) {
+    const alpha2 = -90 + s / quarterArc * 90;
+    const rad2 = alpha2 * Math.PI / 180;
+    return { x: arcOffsetX + radius * Math.cos(rad2), y: -arcOffsetY + radius * Math.sin(rad2), angleDeg: alpha2 };
+  }
+  s -= quarterArc;
+  if (s < 2 * arcOffsetY) {
+    return { x: arcOffsetX + radius, y: -arcOffsetY + s, angleDeg: 0 };
+  }
+  s -= 2 * arcOffsetY;
+  if (s < quarterArc) {
+    const alpha2 = s / quarterArc * 90;
+    const rad2 = alpha2 * Math.PI / 180;
+    return { x: arcOffsetX + radius * Math.cos(rad2), y: arcOffsetY + radius * Math.sin(rad2), angleDeg: alpha2 };
+  }
+  s -= quarterArc;
+  if (s < 2 * arcOffsetX) {
+    return { x: arcOffsetX - s, y: arcOffsetY + radius, angleDeg: 90 };
+  }
+  s -= 2 * arcOffsetX;
+  if (s < quarterArc) {
+    const alpha2 = 90 + s / quarterArc * 90;
+    const rad2 = alpha2 * Math.PI / 180;
+    return { x: -arcOffsetX + radius * Math.cos(rad2), y: arcOffsetY + radius * Math.sin(rad2), angleDeg: alpha2 };
+  }
+  s -= quarterArc;
+  if (s < 2 * arcOffsetY) {
+    return { x: -(arcOffsetX + radius), y: arcOffsetY - s, angleDeg: 180 };
+  }
+  s -= 2 * arcOffsetY;
+  const alpha = 180 + s / quarterArc * 90;
+  const rad = alpha * Math.PI / 180;
+  return { x: -arcOffsetX + radius * Math.cos(rad), y: -arcOffsetY + radius * Math.sin(rad), angleDeg: alpha };
 }
-function fillLine(char, maxWidth, style) {
-  const charWidth = measureTextWidth(char, style);
-  const repeatCount = charWidth > 0 ? Math.floor(maxWidth / charWidth) : 1;
-  return char.repeat(Math.max(1, repeatCount));
+function offsetNodesByAngle(nodes, distance) {
+  return nodes.map((node) => {
+    const angle = node.angleDeg * Math.PI / 180;
+    return {
+      ...node,
+      x: node.x + Math.cos(angle) * distance,
+      y: node.y + Math.sin(angle) * distance
+    };
+  });
 }
-function createPretextWrapper() {
-  const preparedCache = /* @__PURE__ */ new Map();
-  return function wrapText(text, maxWidth, style) {
-    const font = toCanvasFont(style);
-    const key = `${font}
-${text}`;
-    let prepared = preparedCache.get(key);
-    if (!prepared) {
-      prepared = prepareWithSegments(text, font);
-      preparedCache.set(key, prepared);
-    }
-    return layoutWithLines(prepared, maxWidth, style.fontSize * LINE_HEIGHT_RATIO).lines.map((line) => line.text);
-  };
+function offsetNodesByTangent(nodes, distance) {
+  return nodes.map((node) => {
+    const angle = (node.tangentDeg + 90) * Math.PI / 180;
+    return {
+      ...node,
+      x: node.x + Math.cos(angle) * distance,
+      y: node.y + Math.sin(angle) * distance
+    };
+  });
 }
-function getMeasureContext() {
-  if (measureContext !== void 0) {
-    return measureContext;
-  }
-  if (typeof document === "undefined") {
-    measureContext = null;
-    return measureContext;
-  }
-  const canvas = document.createElement("canvas");
-  measureContext = canvas.getContext("2d");
-  return measureContext;
+function withPolylineTangents(nodes, closed) {
+  return nodes.map((node, index) => {
+    const prev = nodes[index - 1] ?? (closed ? nodes.at(-1) : node);
+    const next = nodes[index + 1] ?? (closed ? nodes[0] : node);
+    const tangentDeg = prev && next ? angleBetween(prev.x, prev.y, next.x, next.y) : 0;
+    return {
+      ...node,
+      tangentDeg,
+      angleDeg: tangentDeg + 90
+    };
+  });
 }
-function toCanvasFont(style) {
-  const fontStyle = style.italic ? "italic " : "";
-  return `${fontStyle}${style.weight} ${style.fontSize}px ${style.family}`;
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function lerp(a, b, t) {
+  return a + (b - a) * t;
+}
+function lerpAngle(a, b, t) {
+  const delta = (b - a + 540) % 360 - 180;
+  return a + delta * t;
+}
+function angleBetween(x1, y1, x2, y2) {
+  return Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
+}
+function positiveModulo(value, modulo) {
+  return (value % modulo + modulo) % modulo;
+}
+function positiveUnit(value) {
+  return positiveModulo(value, 1);
+}
+function format(value) {
+  return Number(value.toFixed(2));
 }
 
-// src/lib/text-track.ts
+// src/tracks/build.ts
 var DISC_MARGIN = 4;
 var DEFAULT_GEOMETRY = {
   widthRatio: 0.9,
@@ -239,12 +339,110 @@ function sampleTextTrackLines(lines, track, startT = 0, minSpacing = 12, loop =
   }
   return result;
 }
+function buildTrack(kind, nodes, closed, fallbackLineWidth, guidePath, outerGuidePath) {
+  const measured = measureNodes(nodes, closed);
+  const length = measured.at(-1)?.distance ?? 0;
+  return {
+    kind,
+    closed,
+    length,
+    lineWidth: fallbackLineWidth,
+    guidePath,
+    outerGuidePath,
+    sampleAt(distance) {
+      if (measured.length === 0) {
+        return { x: 0, y: 0, angleDeg: 0, tangentDeg: 0, lineWidth: fallbackLineWidth };
+      }
+      const target = closed ? positiveModulo(distance, length) : clamp(distance, 0, length);
+      let hi = measured.findIndex((node) => node.distance >= target);
+      if (hi <= 0) {
+        return measured[0];
+      }
+      const prev = measured[hi - 1];
+      const next = measured[hi];
+      const span = Math.max(1e-6, next.distance - prev.distance);
+      const amount = (target - prev.distance) / span;
+      const tangentDeg = angleBetween(prev.x, prev.y, next.x, next.y);
+      return {
+        x: lerp(prev.x, next.x, amount),
+        y: lerp(prev.y, next.y, amount),
+        tangentDeg,
+        angleDeg: lerpAngle(prev.angleDeg, next.angleDeg, amount),
+        lineWidth: lerp(prev.lineWidth, next.lineWidth, amount)
+      };
+    }
+  };
+}
+function sampleParametric(count, closed, sample) {
+  const points = [];
+  const end = closed ? count : count - 1;
+  for (let i = 0; i <= end; i += 1) {
+    const t = i / count;
+    const point = sample(t, i);
+    points.push({ ...point, tangentDeg: 0 });
+  }
+  for (let i = 0; i < points.length; i += 1) {
+    const prev = points[Math.max(0, i - 1)];
+    const next = points[Math.min(points.length - 1, i + 1)];
+    const tangentDeg = angleBetween(prev.x, prev.y, next.x, next.y);
+    points[i].tangentDeg = tangentDeg;
+    if (!Number.isFinite(points[i].angleDeg)) {
+      points[i].angleDeg = tangentDeg - 90;
+    }
+  }
+  return points;
+}
+function measureNodes(nodes, closed) {
+  if (nodes.length === 0) {
+    return [];
+  }
+  const measured = [{ ...nodes[0], distance: 0 }];
+  let distance = 0;
+  const limit = closed ? nodes.length : nodes.length - 1;
+  for (let i = 1; i <= limit; i += 1) {
+    const prev = nodes[i - 1];
+    const next = nodes[i % nodes.length];
+    distance += Math.hypot(next.x - prev.x, next.y - prev.y);
+    measured.push({ ...next, distance });
+  }
+  return measured;
+}
+function pathFromNodes(nodes, closed) {
+  if (nodes.length === 0) {
+    return "";
+  }
+  const path = [`M ${format(nodes[0].x)} ${format(nodes[0].y)}`];
+  for (let i = 1; i < nodes.length; i += 1) {
+    path.push(`L ${format(nodes[i].x)} ${format(nodes[i].y)}`);
+  }
+  if (closed) {
+    path.push("Z");
+  }
+  return path.join(" ");
+}
+function resolveGeometry(viewportWidth, viewportHeight, options) {
+  const widthRatio = clamp(options.widthRatio ?? DEFAULT_GEOMETRY.widthRatio, 0.05, 1);
+  const heightRatio = clamp(options.heightRatio ?? DEFAULT_GEOMETRY.heightRatio, 0.05, 1);
+  const trackThickness = clamp(options.trackThickness ?? DEFAULT_GEOMETRY.trackThickness, 0.05, 0.9);
+  const outerHalfW = Math.max(1, Math.floor(viewportWidth / 2 * widthRatio) - DISC_MARGIN);
+  const outerHalfH = Math.max(1, Math.floor(viewportHeight / 2 * heightRatio) - DISC_MARGIN);
+  const trackWidth = Math.max(1, Math.round(Math.min(outerHalfW, outerHalfH) * trackThickness));
+  return {
+    outerHalfW,
+    outerHalfH,
+    trackWidth,
+    cornerRadius: clamp(options.cornerRadius ?? DEFAULT_GEOMETRY.cornerRadius, 0, 1)
+  };
+}
+
+// src/tracks/stadium.ts
+var DISC_MARGIN2 = 4;
 function createStadiumTrack(viewportWidth, viewportHeight, options = {}) {
   const geometry = resolveGeometry(viewportWidth, viewportHeight, options);
   const outerHalfW = geometry.outerHalfW;
   const outerHalfH = geometry.outerHalfH;
-  const innerHalfW = options.innerWidthRatio != null ? Math.max(1, Math.floor(viewportWidth / 2 * clamp(options.innerWidthRatio, 0.05, 1)) - DISC_MARGIN) : Math.max(1, outerHalfW - geometry.trackWidth);
-  const innerHalfH = options.innerHeightRatio != null ? Math.max(1, Math.floor(viewportHeight / 2 * clamp(options.innerHeightRatio, 0.05, 1)) - DISC_MARGIN) : Math.max(1, outerHalfH - geometry.trackWidth);
+  const innerHalfW = options.innerWidthRatio != null ? Math.max(1, Math.floor(viewportWidth / 2 * clamp(options.innerWidthRatio, 0.05, 1)) - DISC_MARGIN2) : Math.max(1, outerHalfW - geometry.trackWidth);
+  const innerHalfH = options.innerHeightRatio != null ? Math.max(1, Math.floor(viewportHeight / 2 * clamp(options.innerHeightRatio, 0.05, 1)) - DISC_MARGIN2) : Math.max(1, outerHalfH - geometry.trackWidth);
   const trackWidth = Math.min(outerHalfW - innerHalfW, outerHalfH - innerHalfH);
   const radius = Math.min(innerHalfW, innerHalfH) * geometry.cornerRadius;
   const arcOffsetX = Math.max(0, innerHalfW - radius);
@@ -255,12 +453,15 @@ function createStadiumTrack(viewportWidth, viewportHeight, options = {}) {
   }));
   return buildTrack("stadium", nodes, true, trackWidth, pathFromNodes(nodes, true), pathFromNodes(offsetNodesByAngle(nodes, trackWidth), true));
 }
+
+// src/tracks/ellipse.ts
+var DISC_MARGIN3 = 4;
 function createEllipseTrack(viewportWidth, viewportHeight, options = {}) {
   const geometry = resolveGeometry(viewportWidth, viewportHeight, options);
   const outerA = geometry.outerHalfW;
   const outerB = geometry.outerHalfH;
-  const innerA = options.innerWidthRatio != null ? Math.max(1, Math.floor(viewportWidth / 2 * clamp(options.innerWidthRatio, 0.05, 1)) - DISC_MARGIN) : Math.max(1, outerA - geometry.trackWidth);
-  const innerB = options.innerHeightRatio != null ? Math.max(1, Math.floor(viewportHeight / 2 * clamp(options.innerHeightRatio, 0.05, 1)) - DISC_MARGIN) : Math.max(1, outerB - geometry.trackWidth);
+  const innerA = options.innerWidthRatio != null ? Math.max(1, Math.floor(viewportWidth / 2 * clamp(options.innerWidthRatio, 0.05, 1)) - DISC_MARGIN3) : Math.max(1, outerA - geometry.trackWidth);
+  const innerB = options.innerHeightRatio != null ? Math.max(1, Math.floor(viewportHeight / 2 * clamp(options.innerHeightRatio, 0.05, 1)) - DISC_MARGIN3) : Math.max(1, outerB - geometry.trackWidth);
   const trackWidth = Math.min(outerA - innerA, outerB - innerB);
   const nodes = sampleParametric(960, true, (t) => {
     const angle = t * Math.PI * 2 - Math.PI / 2;
@@ -282,9 +483,13 @@ function createEllipseTrack(viewportWidth, viewportHeight, options = {}) {
   });
   return buildTrack("ellipse", nodes, true, trackWidth, pathFromNodes(nodes, true), pathFromNodes(offsetNodesByAngle(nodes, trackWidth), true));
 }
+
+// src/tracks/spiral.ts
+var DISC_MARGIN4 = 4;
+var DEFAULT_WIDTH_RATIO = 0.9;
 function createSpiralTrack(viewportWidth, viewportHeight, options = {}) {
-  const scale = clamp(options.scale ?? DEFAULT_GEOMETRY.widthRatio, 0.05, 1);
-  const outerRadius = Math.max(1, Math.floor(Math.min(viewportWidth, viewportHeight) / 2 * scale) - DISC_MARGIN);
+  const scale = clamp(options.scale ?? DEFAULT_WIDTH_RATIO, 0.05, 1);
+  const outerRadius = Math.max(1, Math.floor(Math.min(viewportWidth, viewportHeight) / 2 * scale) - DISC_MARGIN4);
   const trackThickness = clamp(options.trackThickness ?? 0.18, 0.03, 0.65);
   const trackWidth = Math.max(1, Math.round(outerRadius * trackThickness));
   const maxRadius = Math.max(1, outerRadius - trackWidth);
@@ -304,10 +509,14 @@ function createSpiralTrack(viewportWidth, viewportHeight, options = {}) {
   });
   return buildTrack("spiral", nodes, false, trackWidth, pathFromNodes(nodes, false), pathFromNodes(offsetNodesByAngle(nodes, trackWidth), false));
 }
+
+// src/tracks/wave.ts
+var DISC_MARGIN5 = 4;
+var DEFAULT_WIDTH_RATIO2 = 0.9;
 function createWaveTrack(viewportWidth, viewportHeight, options = {}) {
-  const widthRatio = clamp(options.widthRatio ?? DEFAULT_GEOMETRY.widthRatio, 0.05, 1);
+  const widthRatio = clamp(options.widthRatio ?? DEFAULT_WIDTH_RATIO2, 0.05, 1);
   const amplitudeRatio = clamp(options.amplitudeRatio ?? 0.32, 0.02, 0.9);
-  const halfW = Math.max(1, Math.floor(viewportWidth / 2 * widthRatio) - DISC_MARGIN);
+  const halfW = Math.max(1, Math.floor(viewportWidth / 2 * widthRatio) - DISC_MARGIN5);
   const trackWidth = Math.max(
     1,
     Math.round(Math.min(halfW, viewportHeight / 2) * clamp(options.trackThickness ?? 0.16, 0.03, 0.65))
@@ -322,6 +531,8 @@ function createWaveTrack(viewportWidth, viewportHeight, options = {}) {
   }));
   return buildTrack("wave", nodes, false, trackWidth, pathFromNodes(nodes, false), pathFromNodes(offsetNodesByTangent(nodes, trackWidth), false));
 }
+
+// src/tracks/blob.ts
 function createBlobTrack(viewportWidth, viewportHeight, options = {}) {
   const geometry = resolveGeometry(viewportWidth, viewportHeight, options);
   const baseA = Math.max(1, geometry.outerHalfW - geometry.trackWidth);
@@ -347,6 +558,8 @@ function createBlobTrack(viewportWidth, viewportHeight, options = {}) {
   });
   return buildTrack("blob", nodes, true, geometry.trackWidth, pathFromNodes(nodes, true), pathFromNodes(blobOuter, true));
 }
+
+// src/tracks/svg-path.ts
 function createSvgPolylineTrack(viewportWidth, viewportHeight, options) {
   const trackWidth = Math.max(1, Math.min(viewportWidth, viewportHeight) * (options.trackThickness ?? 0.14));
   const scale = clamp(options.scale ?? 1, 0.05, 4);
@@ -366,199 +579,8 @@ function createSvgPolylineTrack(viewportWidth, viewportHeight, options) {
     pathFromNodes(offsetNodesByTangent(nodes, trackWidth), Boolean(options.closed))
   );
 }
-function buildTrack(kind, nodes, closed, fallbackLineWidth, guidePath, outerGuidePath) {
-  const measured = measureNodes(nodes, closed);
-  const length = measured.at(-1)?.distance ?? 0;
-  return {
-    kind,
-    closed,
-    length,
-    lineWidth: fallbackLineWidth,
-    guidePath,
-    outerGuidePath,
-    sampleAt(distance) {
-      if (measured.length === 0) {
-        return { x: 0, y: 0, angleDeg: 0, tangentDeg: 0, lineWidth: fallbackLineWidth };
-      }
-      const target = closed ? positiveModulo(distance, length) : clamp(distance, 0, length);
-      let hi = measured.findIndex((node) => node.distance >= target);
-      if (hi <= 0) {
-        return measured[0];
-      }
-      const prev = measured[hi - 1];
-      const next = measured[hi];
-      const span = Math.max(1e-6, next.distance - prev.distance);
-      const amount = (target - prev.distance) / span;
-      const tangentDeg = angleBetween(prev.x, prev.y, next.x, next.y);
-      return {
-        x: lerp(prev.x, next.x, amount),
-        y: lerp(prev.y, next.y, amount),
-        tangentDeg,
-        angleDeg: lerpAngle(prev.angleDeg, next.angleDeg, amount),
-        lineWidth: lerp(prev.lineWidth, next.lineWidth, amount)
-      };
-    }
-  };
-}
-function sampleParametric(count, closed, sample) {
-  const points = [];
-  const end = closed ? count : count - 1;
-  for (let i = 0; i <= end; i += 1) {
-    const t = i / count;
-    const point = sample(t, i);
-    points.push({ ...point, tangentDeg: 0 });
-  }
-  for (let i = 0; i < points.length; i += 1) {
-    const prev = points[Math.max(0, i - 1)];
-    const next = points[Math.min(points.length - 1, i + 1)];
-    const tangentDeg = angleBetween(prev.x, prev.y, next.x, next.y);
-    points[i].tangentDeg = tangentDeg;
-    if (!Number.isFinite(points[i].angleDeg)) {
-      points[i].angleDeg = tangentDeg - 90;
-    }
-  }
-  return points;
-}
-function measureNodes(nodes, closed) {
-  if (nodes.length === 0) {
-    return [];
-  }
-  const measured = [{ ...nodes[0], distance: 0 }];
-  let distance = 0;
-  const limit = closed ? nodes.length : nodes.length - 1;
-  for (let i = 1; i <= limit; i += 1) {
-    const prev = nodes[i - 1];
-    const next = nodes[i % nodes.length];
-    distance += Math.hypot(next.x - prev.x, next.y - prev.y);
-    measured.push({ ...next, distance });
-  }
-  return measured;
-}
-function resolveGeometry(viewportWidth, viewportHeight, options) {
-  const widthRatio = clamp(options.widthRatio ?? DEFAULT_GEOMETRY.widthRatio, 0.05, 1);
-  const heightRatio = clamp(options.heightRatio ?? DEFAULT_GEOMETRY.heightRatio, 0.05, 1);
-  const trackThickness = clamp(options.trackThickness ?? DEFAULT_GEOMETRY.trackThickness, 0.05, 0.9);
-  const outerHalfW = Math.max(1, Math.floor(viewportWidth / 2 * widthRatio) - DISC_MARGIN);
-  const outerHalfH = Math.max(1, Math.floor(viewportHeight / 2 * heightRatio) - DISC_MARGIN);
-  const trackWidth = Math.max(1, Math.round(Math.min(outerHalfW, outerHalfH) * trackThickness));
-  return {
-    outerHalfW,
-    outerHalfH,
-    trackWidth,
-    cornerRadius: clamp(options.cornerRadius ?? DEFAULT_GEOMETRY.cornerRadius, 0, 1)
-  };
-}
-function roundedRectPoint(t, arcOffsetX, arcOffsetY, radius) {
-  const perimeter = 4 * arcOffsetX + 4 * arcOffsetY + 2 * Math.PI * radius;
-  let s = positiveUnit(t) * perimeter;
-  const quarterArc = Math.PI / 2 * radius;
-  if (s < 2 * arcOffsetX) {
-    return { x: -arcOffsetX + s, y: -(arcOffsetY + radius), angleDeg: -90 };
-  }
-  s -= 2 * arcOffsetX;
-  if (s < quarterArc) {
-    const alpha2 = -90 + s / quarterArc * 90;
-    const rad2 = alpha2 * Math.PI / 180;
-    return { x: arcOffsetX + radius * Math.cos(rad2), y: -arcOffsetY + radius * Math.sin(rad2), angleDeg: alpha2 };
-  }
-  s -= quarterArc;
-  if (s < 2 * arcOffsetY) {
-    return { x: arcOffsetX + radius, y: -arcOffsetY + s, angleDeg: 0 };
-  }
-  s -= 2 * arcOffsetY;
-  if (s < quarterArc) {
-    const alpha2 = s / quarterArc * 90;
-    const rad2 = alpha2 * Math.PI / 180;
-    return { x: arcOffsetX + radius * Math.cos(rad2), y: arcOffsetY + radius * Math.sin(rad2), angleDeg: alpha2 };
-  }
-  s -= quarterArc;
-  if (s < 2 * arcOffsetX) {
-    return { x: arcOffsetX - s, y: arcOffsetY + radius, angleDeg: 90 };
-  }
-  s -= 2 * arcOffsetX;
-  if (s < quarterArc) {
-    const alpha2 = 90 + s / quarterArc * 90;
-    const rad2 = alpha2 * Math.PI / 180;
-    return { x: -arcOffsetX + radius * Math.cos(rad2), y: arcOffsetY + radius * Math.sin(rad2), angleDeg: alpha2 };
-  }
-  s -= quarterArc;
-  if (s < 2 * arcOffsetY) {
-    return { x: -(arcOffsetX + radius), y: arcOffsetY - s, angleDeg: 180 };
-  }
-  s -= 2 * arcOffsetY;
-  const alpha = 180 + s / quarterArc * 90;
-  const rad = alpha * Math.PI / 180;
-  return { x: -arcOffsetX + radius * Math.cos(rad), y: -arcOffsetY + radius * Math.sin(rad), angleDeg: alpha };
-}
-function pathFromNodes(nodes, closed) {
-  if (nodes.length === 0) {
-    return "";
-  }
-  const path = [`M ${format(nodes[0].x)} ${format(nodes[0].y)}`];
-  for (let i = 1; i < nodes.length; i += 1) {
-    path.push(`L ${format(nodes[i].x)} ${format(nodes[i].y)}`);
-  }
-  if (closed) {
-    path.push("Z");
-  }
-  return path.join(" ");
-}
-function offsetNodesByAngle(nodes, distance) {
-  return nodes.map((node) => {
-    const angle = node.angleDeg * Math.PI / 180;
-    return {
-      ...node,
-      x: node.x + Math.cos(angle) * distance,
-      y: node.y + Math.sin(angle) * distance
-    };
-  });
-}
-function offsetNodesByTangent(nodes, distance) {
-  return nodes.map((node) => {
-    const angle = (node.tangentDeg + 90) * Math.PI / 180;
-    return {
-      ...node,
-      x: node.x + Math.cos(angle) * distance,
-      y: node.y + Math.sin(angle) * distance
-    };
-  });
-}
-function withPolylineTangents(nodes, closed) {
-  return nodes.map((node, index) => {
-    const prev = nodes[index - 1] ?? (closed ? nodes.at(-1) : node);
-    const next = nodes[index + 1] ?? (closed ? nodes[0] : node);
-    const tangentDeg = prev && next ? angleBetween(prev.x, prev.y, next.x, next.y) : 0;
-    return {
-      ...node,
-      tangentDeg,
-      angleDeg: tangentDeg + 90
-    };
-  });
-}
-function angleBetween(x1, y1, x2, y2) {
-  return Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
-}
-function lerp(a, b, t) {
-  return a + (b - a) * t;
-}
-function lerpAngle(a, b, t) {
-  const delta = (b - a + 540) % 360 - 180;
-  return a + delta * t;
-}
-function positiveUnit(value) {
-  return positiveModulo(value, 1);
-}
-function positiveModulo(value, modulo) {
-  return (value % modulo + modulo) % modulo;
-}
-function clamp(value, min, max) {
-  return Math.min(max, Math.max(min, value));
-}
-function format(value) {
-  return Number(value.toFixed(2));
-}
 
-// src/components/RadialText/RadialText.tsx
+// src/RadialText/RadialText.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var DEFAULT_GEOMETRY2 = {
   stadium: {
@@ -901,7 +923,7 @@ function createSvgPathShape(width, height, config) {
   return createSvgPolylineTrack(width, height, config.geometry.svgPath);
 }
 
-// src/lib/export-disc.ts
+// src/export/png.ts
 import html2canvas from "html2canvas";
 var GUIDES_ACTIVE_CLASS = "radialText--guides";
 async function exportDiscAsPng(discEl, rootEl, filename = "radial-text.png") {
@@ -936,7 +958,7 @@ async function exportDiscAsPng(discEl, rootEl, filename = "radial-text.png") {
   }
 }
 
-// src/lib/export-disc-svg.ts
+// src/export/svg.ts
 function exportDiscAsSvg(discEl, filename = "radial-text.svg") {
   const w = discEl.offsetWidth;
   const h = discEl.offsetHeight;

package/package.json

@@ -1,8 +1,10 @@
 {
   "name": "@pswaqtch/around",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -20,7 +22,8 @@
     "dev": "vite --host 127.0.0.1",
     "build": "tsup",
     "build:demo": "tsc && vite build",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "release": "npm run build && npm version patch && npm publish --access public"
   },
   "peerDependencies": {
     "react": ">=18",