@pswaqtch/around 0.1.0

package/dist/index.css

@@ -0,0 +1,68 @@
+/* src/components/RadialText/RadialText.css */
+.radialText {
+  position: relative;
+}
+.radialText__disc {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100dvh;
+  background:
+    linear-gradient(
+      135deg,
+      rgba(255, 255, 255, 0.72),
+      rgba(232, 235, 231, 0.52)),
+    #f3f4f2;
+  overflow: hidden;
+}
+.radialText__scrollSpacer {
+  height: var(--radial-scroll-height, 260vh);
+  pointer-events: none;
+}
+.radialText__guides {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+}
+.radialText__guidePath {
+  fill: none;
+  stroke: rgba(78, 100, 87, 0.34);
+  stroke-width: 1;
+  opacity: 0;
+  transition: opacity 180ms ease;
+  vector-effect: non-scaling-stroke;
+}
+.radialText--guides .radialText__guidePath {
+  opacity: 1;
+}
+.radialText__line {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  box-sizing: border-box;
+  padding-left: 0;
+  padding-right: 0;
+  color: var(--radial-text-color, #171717);
+  font-size: 9px;
+  line-height: 1;
+  text-align-last: inherit;
+  transform-origin: left center;
+  user-select: text;
+  white-space: nowrap;
+}
+.radialText__line--heading {
+  color: #111513;
+}
+.radialText__line--quote {
+  color: #565c57;
+}
+.radialText__line--spacer,
+.radialText__line--separator {
+  user-select: none;
+}
+.radialText__line--separator {
+  color: #a8ada8;
+}

package/dist/index.d.ts

@@ -0,0 +1,98 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Ref } from 'react';
+
+type RadialTextAlign = "left" | "right" | "justify";
+
+interface StadiumTrackOptions {
+    widthRatio?: number;
+    heightRatio?: number;
+    innerWidthRatio?: number;
+    innerHeightRatio?: number;
+    trackThickness?: number;
+    cornerRadius?: number;
+}
+interface EllipseTrackOptions {
+    widthRatio?: number;
+    heightRatio?: number;
+    innerWidthRatio?: number;
+    innerHeightRatio?: number;
+    trackThickness?: number;
+}
+interface SpiralTrackOptions {
+    scale?: number;
+    turns?: number;
+    innerRadiusRatio?: number;
+    trackThickness?: number;
+}
+interface WaveTrackOptions {
+    widthRatio?: number;
+    amplitudeRatio?: number;
+    cycles?: number;
+    trackThickness?: number;
+}
+interface BlobTrackOptions {
+    widthRatio?: number;
+    heightRatio?: number;
+    wobble?: number;
+    lobes?: number;
+    trackThickness?: number;
+}
+interface SvgPolylineTrackOptions {
+    points: Array<[number, number]>;
+    scale?: number;
+    trackThickness?: number;
+    closed?: boolean;
+}
+
+type RadialShapeKind = "stadium" | "ellipse" | "spiral" | "wave" | "blob" | "svg-path";
+interface RadialTextGeometry {
+    stadium?: StadiumTrackOptions;
+    ellipse?: EllipseTrackOptions;
+    spiral?: SpiralTrackOptions;
+    wave?: WaveTrackOptions;
+    blob?: BlobTrackOptions;
+    svgPath?: Partial<SvgPolylineTrackOptions>;
+}
+interface RadialTextLayout {
+    align?: RadialTextAlign;
+    textInset?: number;
+    lineSpacing?: number;
+    minScrollHeightVh?: number;
+    linesPerViewport?: number;
+}
+interface RadialTextTypography {
+    fontFamily?: string;
+    bodySize?: number;
+    headingSize?: number;
+    quoteSize?: number;
+    bodyWeight?: number;
+    headingWeight?: number;
+}
+/** Imperative handle exposed to parent components for export. */
+interface RadialTextHandle {
+    /** The viewport-filling disc element — pass directly to html2canvas. */
+    discEl: HTMLDivElement;
+    /** The component root element — carries the `radialText--guides` class. */
+    rootEl: HTMLDivElement;
+}
+interface RadialTextProps {
+    text: string;
+    shape?: RadialShapeKind;
+    loop?: boolean;
+    geometry?: RadialTextGeometry;
+    layout?: RadialTextLayout;
+    typography?: RadialTextTypography;
+    className?: string;
+    showGuides?: boolean;
+    discBg?: string;
+    textColor?: string;
+    /** Optional ref to receive imperative access to disc and root elements. */
+    ref?: Ref<RadialTextHandle>;
+}
+declare function RadialText({ text, shape, loop, geometry, layout, typography, className, showGuides, discBg, textColor, ref, }: RadialTextProps): react_jsx_runtime.JSX.Element;
+
+declare function exportDiscAsPng(discEl: HTMLElement, rootEl: HTMLElement, filename?: string): Promise<void>;
+
+declare function exportDiscAsSvg(discEl: HTMLElement, filename?: string): void;
+
+export { type RadialShapeKind, RadialText, type RadialTextAlign, type RadialTextGeometry, type RadialTextHandle, type RadialTextLayout, type RadialTextProps, type RadialTextTypography, exportDiscAsPng, exportDiscAsSvg };

package/dist/index.js

@@ -0,0 +1,985 @@
+// src/components/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
+});
+var HEADING_MARKER_RE = /^(#{1,6})\s+(.+)$/;
+var LIST_MARKER_RE = /^[-*+]\s+(.+)$/;
+var NUMBERED_MARKER_RE = /^\d+[.)]\s+(.+)$/;
+var QUOTE_MARKER_RE = /^>\s?(.+)$/;
+var THEMATIC_BREAK_RE = /^([-*_=])\1{2,}\s*$/;
+function parseArticle(source) {
+  const normalized = source.replace(/\r\n?/g, "\n").trim();
+  if (!normalized) {
+    return [];
+  }
+  const lines = normalized.split("\n");
+  const blocks = [];
+  let paragraph = [];
+  function flushParagraph() {
+    if (paragraph.length === 0) {
+      return;
+    }
+    blocks.push({
+      kind: "paragraph",
+      text: normalizeInlineText(paragraph.join(" "))
+    });
+    paragraph = [];
+  }
+  lines.forEach((rawLine, index) => {
+    const line = rawLine.trim();
+    if (!line) {
+      flushParagraph();
+      return;
+    }
+    const heading = line.match(HEADING_MARKER_RE);
+    if (heading) {
+      flushParagraph();
+      blocks.push({
+        kind: "heading",
+        text: normalizeInlineText(heading[2] ?? ""),
+        level: Math.min(heading[1]?.length ?? 1, 3)
+      });
+      return;
+    }
+    const listItem = line.match(LIST_MARKER_RE) ?? line.match(NUMBERED_MARKER_RE);
+    if (listItem) {
+      flushParagraph();
+      blocks.push({
+        kind: "list-item",
+        text: normalizeInlineText(listItem[1] ?? "")
+      });
+      return;
+    }
+    const quote = line.match(QUOTE_MARKER_RE);
+    if (quote) {
+      flushParagraph();
+      blocks.push({
+        kind: "quote",
+        text: normalizeInlineText(quote[1] ?? "")
+      });
+      return;
+    }
+    if (THEMATIC_BREAK_RE.test(line)) {
+      flushParagraph();
+      return;
+    }
+    const previousLine = index > 0 ? lines[index - 1]?.trim() ?? "" : "";
+    const nextLine = lines[index + 1]?.trim() ?? "";
+    const looksLikeTitle = blocks.length === 0 && paragraph.length === 0 && index <= 1 && line.length <= 90 && !/[.!,:;]$/.test(line) && nextLine.length > 0 && previousLine.length === 0;
+    if (looksLikeTitle) {
+      blocks.push({
+        kind: "heading",
+        text: normalizeInlineText(line),
+        level: 1
+      });
+      return;
+    }
+    paragraph.push(line);
+  });
+  flushParagraph();
+  return blocks;
+}
+function buildArticleLines(source, options) {
+  const maxWidth = options.maxWidth;
+  const wrapText = options.wrapText;
+  const typography = options.typography;
+  const blocks = parseArticle(source);
+  const lines = [];
+  blocks.forEach((block, index) => {
+    const previous = blocks[index - 1];
+    if (index > 0 && previous && shouldInsertSpacer(previous, block)) {
+      lines.push(createSpacerLine(typography));
+    }
+    const style = getStyle(block.kind, typography);
+    const prefix = block.kind === "list-item" ? "- " : block.kind === "quote" ? '"' : "";
+    const suffix = block.kind === "quote" ? '"' : "";
+    const wrapped = wrapText(`${prefix}${block.text}${suffix}`, maxWidth, style);
+    wrapped.forEach((text, lineIndex) => {
+      lines.push({
+        kind: lineIndex > 0 && block.kind === "list-item" ? "list-continuation" : block.kind,
+        text: lineIndex > 0 && block.kind === "list-item" ? `  ${text}` : text,
+        fontSize: style.fontSize,
+        weight: style.weight,
+        family: style.family,
+        italic: Boolean(style.italic)
+      });
+    });
+  });
+  return lines;
+}
+function calculateScrollStartT(scrollY, maxScroll, direction = 1) {
+  if (maxScroll <= 0) {
+    return scrollY * direction;
+  }
+  return scrollY / maxScroll * direction;
+}
+function getStyle(kind, typography) {
+  const baseStyle = STYLE_BY_KIND[kind] ?? DEFAULT_BODY_STYLE;
+  const bodyOverride = typography?.paragraph ?? {};
+  const kindOverride = typography?.[kind] ?? {};
+  return {
+    ...baseStyle,
+    ...bodyOverride,
+    ...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;
+  }
+  return true;
+}
+function createSpacerLine(typography) {
+  const style = getStyle("spacer", typography);
+  return {
+    kind: "spacer",
+    text: "",
+    fontSize: 7,
+    weight: style.weight,
+    family: style.family,
+    italic: false
+  };
+}
+
+// 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;
+  }
+  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/lib/text-track.ts
+var DISC_MARGIN = 4;
+var DEFAULT_GEOMETRY = {
+  widthRatio: 0.9,
+  heightRatio: 0.9,
+  trackThickness: 0.56,
+  cornerRadius: 1
+};
+function sampleTextTrackLines(lines, track, startT = 0, minSpacing = 12, loop = false) {
+  if (lines.length === 0 || track.length <= 0) {
+    return [];
+  }
+  const usableLength = track.closed ? track.length - minSpacing : track.length;
+  const numSlots = Math.ceil(usableLength / minSpacing) + 1;
+  const beltPos = loop ? positiveUnit(startT) * lines.length : clamp(startT, 0, 1) * lines.length;
+  const firstIdx = Math.floor(beltPos);
+  const frac = beltPos - firstIdx;
+  const result = [];
+  for (let i = 0; i < numSlots; i += 1) {
+    const distance = (i - frac) * minSpacing;
+    const lineIndex = loop ? (firstIdx + i) % lines.length : firstIdx + i;
+    if (distance < 0 || distance >= usableLength || lineIndex < 0 || lineIndex >= lines.length) {
+      result.push(null);
+      continue;
+    }
+    result.push({
+      ...lines[lineIndex],
+      ...track.sampleAt(distance),
+      _lineIndex: lineIndex
+    });
+  }
+  return result;
+}
+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 trackWidth = Math.min(outerHalfW - innerHalfW, outerHalfH - innerHalfH);
+  const radius = Math.min(innerHalfW, innerHalfH) * geometry.cornerRadius;
+  const arcOffsetX = Math.max(0, innerHalfW - radius);
+  const arcOffsetY = Math.max(0, innerHalfH - radius);
+  const nodes = sampleParametric(720, true, (t) => ({
+    ...roundedRectPoint(t, arcOffsetX, arcOffsetY, radius),
+    lineWidth: trackWidth
+  }));
+  return buildTrack("stadium", nodes, true, trackWidth, pathFromNodes(nodes, true), pathFromNodes(offsetNodesByAngle(nodes, trackWidth), true));
+}
+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 trackWidth = Math.min(outerA - innerA, outerB - innerB);
+  const nodes = sampleParametric(960, true, (t) => {
+    const angle = t * Math.PI * 2 - Math.PI / 2;
+    const cosA = Math.cos(angle);
+    const sinA = Math.sin(angle);
+    const x = innerA * cosA;
+    const y = innerB * sinA;
+    const gx = cosA / innerA;
+    const gy = sinA / innerB;
+    const gl = Math.hypot(gx, gy) || 1;
+    const nx = gx / gl;
+    const ny = gy / gl;
+    return {
+      x,
+      y,
+      angleDeg: Math.atan2(ny, nx) * 180 / Math.PI,
+      lineWidth: trackWidth
+    };
+  });
+  return buildTrack("ellipse", nodes, true, trackWidth, pathFromNodes(nodes, true), pathFromNodes(offsetNodesByAngle(nodes, trackWidth), true));
+}
+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 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);
+  const innerRadiusRatio = clamp(options.innerRadiusRatio ?? 0.18, 0.02, 0.8);
+  const minRadius = Math.max(1, maxRadius * innerRadiusRatio);
+  const turns = clamp(options.turns ?? 2.85, 0.5, 8);
+  const thetaMax = turns * Math.PI * 2;
+  const nodes = sampleParametric(960, false, (t) => {
+    const theta = t * thetaMax - Math.PI / 2;
+    const radius = minRadius + (maxRadius - minRadius) * t;
+    return {
+      x: radius * Math.cos(theta),
+      y: radius * Math.sin(theta),
+      angleDeg: theta * 180 / Math.PI,
+      lineWidth: trackWidth
+    };
+  });
+  return buildTrack("spiral", nodes, false, trackWidth, pathFromNodes(nodes, false), pathFromNodes(offsetNodesByAngle(nodes, trackWidth), false));
+}
+function createWaveTrack(viewportWidth, viewportHeight, options = {}) {
+  const widthRatio = clamp(options.widthRatio ?? DEFAULT_GEOMETRY.widthRatio, 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 trackWidth = Math.max(
+    1,
+    Math.round(Math.min(halfW, viewportHeight / 2) * clamp(options.trackThickness ?? 0.16, 0.03, 0.65))
+  );
+  const amplitude = Math.max(1, viewportHeight / 2 * amplitudeRatio - trackWidth);
+  const cycles = clamp(options.cycles ?? 2.4, 0.25, 8);
+  const nodes = sampleParametric(720, false, (t) => ({
+    x: -halfW + halfW * 2 * t,
+    y: Math.sin(t * Math.PI * 2 * cycles) * amplitude,
+    angleDeg: 0,
+    lineWidth: trackWidth
+  }));
+  return buildTrack("wave", nodes, false, trackWidth, pathFromNodes(nodes, false), pathFromNodes(offsetNodesByTangent(nodes, trackWidth), false));
+}
+function createBlobTrack(viewportWidth, viewportHeight, options = {}) {
+  const geometry = resolveGeometry(viewportWidth, viewportHeight, options);
+  const baseA = Math.max(1, geometry.outerHalfW - geometry.trackWidth);
+  const baseB = Math.max(1, geometry.outerHalfH - geometry.trackWidth);
+  const wobble = clamp(options.wobble ?? 0.16, 0, 0.45);
+  const lobes = Math.max(2, Math.round(clamp(options.lobes ?? 5, 2, 12)));
+  const blobInner = sampleParametric(960, true, (t) => {
+    const theta = t * Math.PI * 2 - Math.PI / 2;
+    const radiusScale = 1 + wobble * Math.sin(theta * lobes + 0.6) + wobble * 0.55 * Math.sin(theta * (lobes + 2) - 0.9);
+    return {
+      x: baseA * radiusScale * Math.cos(theta),
+      y: baseB * radiusScale * Math.sin(theta),
+      angleDeg: theta * 180 / Math.PI,
+      lineWidth: geometry.trackWidth
+    };
+  });
+  const blobOuter = offsetNodesByAngle(blobInner, geometry.trackWidth);
+  const nodes = blobInner.map((node) => {
+    const nearest = blobOuter.reduce(
+      (best, o) => Math.hypot(o.x - node.x, o.y - node.y) < Math.hypot(best.x - node.x, best.y - node.y) ? o : best
+    );
+    return { ...node, lineWidth: Math.hypot(nearest.x - node.x, nearest.y - node.y) };
+  });
+  return buildTrack("blob", nodes, true, geometry.trackWidth, pathFromNodes(nodes, true), pathFromNodes(blobOuter, true));
+}
+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);
+  const nodes = withPolylineTangents(options.points.map(([x, y]) => ({
+    x: x * scale,
+    y: y * scale,
+    angleDeg: 0,
+    tangentDeg: 0,
+    lineWidth: trackWidth
+  })), Boolean(options.closed));
+  return buildTrack(
+    "svg-path",
+    nodes,
+    Boolean(options.closed),
+    trackWidth,
+    pathFromNodes(nodes, Boolean(options.closed)),
+    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
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_GEOMETRY2 = {
+  stadium: {
+    widthRatio: 0.9,
+    heightRatio: 0.9,
+    trackThickness: 0.56,
+    cornerRadius: 1
+  },
+  ellipse: {
+    widthRatio: 0.9,
+    heightRatio: 0.9,
+    trackThickness: 0.56
+  },
+  spiral: {
+    scale: 0.76,
+    turns: 2.85,
+    innerRadiusRatio: 0.18,
+    trackThickness: 0.18
+  },
+  wave: {
+    widthRatio: 0.9,
+    amplitudeRatio: 0.32,
+    cycles: 2.4,
+    trackThickness: 0.16
+  },
+  blob: {
+    widthRatio: 0.82,
+    heightRatio: 0.78,
+    wobble: 0.16,
+    lobes: 5,
+    trackThickness: 0.2
+  },
+  svgPath: {
+    points: [
+      [-420, -120],
+      [-180, 110],
+      [120, -90],
+      [430, 130]
+    ],
+    scale: 1,
+    trackThickness: 0.16,
+    closed: false
+  }
+};
+var DEFAULT_LAYOUT = {
+  align: "left",
+  textInset: 6,
+  lineSpacing: 12,
+  minScrollHeightVh: 260,
+  linesPerViewport: 80
+};
+var DEFAULT_TYPOGRAPHY = {
+  fontFamily: "Georgia, serif",
+  bodySize: 9,
+  headingSize: 11,
+  quoteSize: 9,
+  bodyWeight: 400,
+  headingWeight: 700
+};
+var RADIAL_TRACK_FACTORIES = {
+  stadium: createStadiumShape,
+  ellipse: createEllipseShape,
+  spiral: createSpiralShape,
+  wave: createWaveShape,
+  blob: createBlobShape,
+  "svg-path": createSvgPathShape
+};
+function RadialText({
+  text,
+  shape = "stadium",
+  loop = false,
+  geometry,
+  layout,
+  typography,
+  className,
+  showGuides = true,
+  discBg,
+  textColor,
+  ref
+}) {
+  const rootRef = useRef(null);
+  const discRef = useRef(null);
+  const guideSvgRef = useRef(null);
+  const guidePathRef = useRef(null);
+  const outerGuidePathRef = useRef(null);
+  useImperativeHandle(
+    ref,
+    () => ({
+      get discEl() {
+        if (!discRef.current) throw new Error("RadialText disc not mounted");
+        return discRef.current;
+      },
+      get rootEl() {
+        if (!rootRef.current) throw new Error("RadialText root not mounted");
+        return rootRef.current;
+      }
+    }),
+    []
+  );
+  const [scrollHeightVh, setScrollHeightVh] = useState(DEFAULT_LAYOUT.minScrollHeightVh);
+  const resolvedConfig = useMemo(
+    () => resolveRadialTextConfig(geometry, layout, typography),
+    [geometry, layout, typography]
+  );
+  const rootClassName = [
+    "radialText",
+    showGuides ? "radialText--guides" : "",
+    className ?? ""
+  ].filter(Boolean).join(" ");
+  const style = {
+    "--radial-scroll-height": `${scrollHeightVh}vh`
+  };
+  useEffect(() => {
+    const disc = discRef.current;
+    const guideSvg = guideSvgRef.current;
+    const guidePath = guidePathRef.current;
+    const outerGuidePath = outerGuidePathRef.current;
+    if (!disc || !guideSvg || !guidePath || !outerGuidePath || typeof window === "undefined") {
+      return void 0;
+    }
+    const discElement = disc;
+    const guideSvgElement = guideSvg;
+    const guidePathElement = guidePath;
+    const outerGuidePathElement = outerGuidePath;
+    const wrapText = createPretextWrapper();
+    let disposed = false;
+    let articleLines = [];
+    let lineElements = [];
+    let prevLineIndices = [];
+    let activeTrack = createTrack(shape, resolvedConfig);
+    let latestScrollY = window.scrollY;
+    let tickFrame = 0;
+    let resizeFrame = 0;
+    let ticking = false;
+    function createTrack(kind, config) {
+      return RADIAL_TRACK_FACTORIES[kind](window.innerWidth, window.innerHeight, config);
+    }
+    function applyGeometry() {
+      activeTrack = createTrack(shape, resolvedConfig);
+      guideSvgElement.setAttribute(
+        "viewBox",
+        `${-window.innerWidth / 2} ${-window.innerHeight / 2} ${window.innerWidth} ${window.innerHeight}`
+      );
+      guidePathElement.setAttribute("d", activeTrack.guidePath);
+      outerGuidePathElement.setAttribute("d", activeTrack.outerGuidePath);
+    }
+    function buildLines() {
+      const maxWidth = Math.max(1, activeTrack.lineWidth - resolvedConfig.textInset * 2);
+      const separatorStyle = getStyle("separator", resolvedConfig.typography);
+      const separatorText = fillLine("=", maxWidth, separatorStyle);
+      articleLines = buildArticleLines(text, {
+        maxWidth,
+        wrapText,
+        typography: resolvedConfig.typography
+      });
+      articleLines.push({
+        kind: "separator",
+        text: separatorText,
+        fontSize: separatorStyle.fontSize,
+        weight: separatorStyle.weight,
+        family: separatorStyle.family,
+        italic: false
+      });
+      const nextScrollHeight = Math.max(
+        resolvedConfig.minScrollHeightVh,
+        Math.ceil(articleLines.length / resolvedConfig.linesPerViewport) * 100
+      );
+      if (!disposed) {
+        setScrollHeightVh(nextScrollHeight);
+      }
+    }
+    function renderRadial() {
+      const numSlots = Math.ceil(activeTrack.length / resolvedConfig.lineSpacing) + 1;
+      discElement.querySelectorAll(".radialText__line").forEach((element) => element.remove());
+      lineElements = [];
+      prevLineIndices = [];
+      const fragment = document.createDocumentFragment();
+      for (let i = 0; i < numSlots; i += 1) {
+        const line = document.createElement("div");
+        line.className = "radialText__line";
+        line.style.visibility = "hidden";
+        lineElements.push(line);
+        fragment.appendChild(line);
+      }
+      discElement.appendChild(fragment);
+      updateConveyorBelt();
+    }
+    function updateConveyorBelt() {
+      const maxScroll = Math.max(1, document.documentElement.scrollHeight - window.innerHeight);
+      const startT = calculateScrollStartT(latestScrollY, maxScroll, 1);
+      const placed = sampleTextTrackLines(
+        articleLines,
+        activeTrack,
+        startT,
+        resolvedConfig.lineSpacing,
+        loop && activeTrack.closed
+      );
+      const isJustify = resolvedConfig.align === "justify";
+      for (let i = 0; i < lineElements.length; i += 1) {
+        const element = lineElements[i];
+        const line = placed[i];
+        if (!element) {
+          continue;
+        }
+        if (!line) {
+          element.style.visibility = "hidden";
+          continue;
+        }
+        element.style.visibility = "";
+        element.style.transform = lineTransform(line);
+        if (line._lineIndex !== prevLineIndices[i]) {
+          element.className = `radialText__line radialText__line--${line.kind}`;
+          element.textContent = line.text;
+          element.style.width = `${line.lineWidth}px`;
+          element.style.fontSize = `${line.fontSize}px`;
+          element.style.fontWeight = String(line.weight);
+          element.style.fontFamily = line.family;
+          element.style.fontStyle = line.italic ? "italic" : "normal";
+          element.style.paddingLeft = `${resolvedConfig.textInset}px`;
+          element.style.paddingRight = `${resolvedConfig.textInset}px`;
+          element.style.textAlign = isJustify ? "justify" : resolvedConfig.align;
+          element.style.textAlignLast = isJustify ? "justify" : "";
+          prevLineIndices[i] = line._lineIndex;
+        }
+      }
+      ticking = false;
+    }
+    function requestConveyorUpdate() {
+      latestScrollY = window.scrollY;
+      if (!ticking) {
+        tickFrame = window.requestAnimationFrame(updateConveyorBelt);
+        ticking = true;
+      }
+    }
+    function rebuild() {
+      applyGeometry();
+      buildLines();
+      renderRadial();
+    }
+    function requestRebuild() {
+      window.cancelAnimationFrame(resizeFrame);
+      resizeFrame = window.requestAnimationFrame(rebuild);
+    }
+    if (text.trim()) {
+      rebuild();
+    } else {
+      discElement.querySelectorAll(".radialText__line").forEach((element) => element.remove());
+      setScrollHeightVh(resolvedConfig.minScrollHeightVh);
+    }
+    window.addEventListener("scroll", requestConveyorUpdate, { passive: true });
+    window.addEventListener("resize", requestRebuild);
+    return () => {
+      disposed = true;
+      window.removeEventListener("scroll", requestConveyorUpdate);
+      window.removeEventListener("resize", requestRebuild);
+      window.cancelAnimationFrame(tickFrame);
+      window.cancelAnimationFrame(resizeFrame);
+      discElement.querySelectorAll(".radialText__line").forEach((element) => element.remove());
+    };
+  }, [
+    geometry,
+    layout,
+    loop,
+    shape,
+    text,
+    typography,
+    resolvedConfig
+  ]);
+  return /* @__PURE__ */ jsxs("div", { className: rootClassName, style, ref: rootRef, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "radialText__disc",
+        ref: discRef,
+        style: {
+          ...discBg != null ? { background: discBg } : {},
+          "--radial-text-color": textColor
+        },
+        children: /* @__PURE__ */ jsxs("svg", { className: "radialText__guides", ref: guideSvgRef, "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("path", { className: "radialText__guidePath radialText__guidePath--outer", ref: outerGuidePathRef }),
+          /* @__PURE__ */ jsx("path", { className: "radialText__guidePath", ref: guidePathRef })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "radialText__scrollSpacer", "aria-hidden": "true" })
+  ] });
+}
+function lineTransform(line) {
+  const pivotAdjY = line.y - line.fontSize / 2;
+  return `translate(${line.x}px, ${pivotAdjY}px) rotate(${line.angleDeg}deg)`;
+}
+function resolveRadialTextConfig(geometry, layout, typography) {
+  const fontFamily = typography?.fontFamily ?? DEFAULT_TYPOGRAPHY.fontFamily;
+  const bodySize = Math.max(1, typography?.bodySize ?? DEFAULT_TYPOGRAPHY.bodySize);
+  const headingSize = Math.max(1, typography?.headingSize ?? DEFAULT_TYPOGRAPHY.headingSize);
+  const quoteSize = Math.max(1, typography?.quoteSize ?? DEFAULT_TYPOGRAPHY.quoteSize);
+  const bodyWeight = Math.max(1, typography?.bodyWeight ?? DEFAULT_TYPOGRAPHY.bodyWeight);
+  const headingWeight = Math.max(1, typography?.headingWeight ?? DEFAULT_TYPOGRAPHY.headingWeight);
+  return {
+    geometry: {
+      stadium: { ...DEFAULT_GEOMETRY2.stadium, ...geometry?.stadium },
+      ellipse: { ...DEFAULT_GEOMETRY2.ellipse, ...geometry?.ellipse },
+      spiral: { ...DEFAULT_GEOMETRY2.spiral, ...geometry?.spiral },
+      wave: { ...DEFAULT_GEOMETRY2.wave, ...geometry?.wave },
+      blob: { ...DEFAULT_GEOMETRY2.blob, ...geometry?.blob },
+      svgPath: { ...DEFAULT_GEOMETRY2.svgPath, ...geometry?.svgPath }
+    },
+    typography: {
+      paragraph: { family: fontFamily, fontSize: bodySize, weight: bodyWeight },
+      "list-item": { family: fontFamily, fontSize: bodySize, weight: bodyWeight },
+      "list-continuation": { family: fontFamily, fontSize: bodySize, weight: bodyWeight },
+      spacer: { family: fontFamily, fontSize: bodySize, weight: bodyWeight },
+      separator: { family: fontFamily, fontSize: bodySize, weight: bodyWeight },
+      quote: { family: fontFamily, fontSize: quoteSize, weight: bodyWeight, italic: true },
+      heading: { family: fontFamily, fontSize: headingSize, weight: headingWeight }
+    },
+    align: layout?.align ?? DEFAULT_LAYOUT.align,
+    textInset: Math.max(0, layout?.textInset ?? DEFAULT_LAYOUT.textInset),
+    lineSpacing: Math.max(4, layout?.lineSpacing ?? DEFAULT_LAYOUT.lineSpacing),
+    minScrollHeightVh: Math.max(100, layout?.minScrollHeightVh ?? DEFAULT_LAYOUT.minScrollHeightVh),
+    linesPerViewport: Math.max(1, layout?.linesPerViewport ?? DEFAULT_LAYOUT.linesPerViewport)
+  };
+}
+function createStadiumShape(width, height, config) {
+  return createStadiumTrack(width, height, config.geometry.stadium);
+}
+function createEllipseShape(width, height, config) {
+  return createEllipseTrack(width, height, config.geometry.ellipse);
+}
+function createSpiralShape(width, height, config) {
+  return createSpiralTrack(width, height, config.geometry.spiral);
+}
+function createWaveShape(width, height, config) {
+  return createWaveTrack(width, height, config.geometry.wave);
+}
+function createBlobShape(width, height, config) {
+  return createBlobTrack(width, height, config.geometry.blob);
+}
+function createSvgPathShape(width, height, config) {
+  return createSvgPolylineTrack(width, height, config.geometry.svgPath);
+}
+
+// src/lib/export-disc.ts
+import html2canvas from "html2canvas";
+var GUIDES_ACTIVE_CLASS = "radialText--guides";
+async function exportDiscAsPng(discEl, rootEl, filename = "radial-text.png") {
+  const hadGuides = rootEl.classList.contains(GUIDES_ACTIVE_CLASS);
+  if (hadGuides) {
+    rootEl.classList.remove(GUIDES_ACTIVE_CLASS);
+  }
+  try {
+    const canvas = await html2canvas(discEl, {
+      useCORS: true,
+      scale: window.devicePixelRatio ?? 1,
+      windowWidth: window.innerWidth,
+      windowHeight: window.innerHeight,
+      width: discEl.offsetWidth,
+      height: discEl.offsetHeight,
+      x: 0,
+      y: 0,
+      scrollX: 0,
+      scrollY: 0,
+      foreignObjectRendering: false,
+      logging: false
+    });
+    const a = document.createElement("a");
+    a.href = canvas.toDataURL("image/png");
+    a.download = filename;
+    a.click();
+    a.remove();
+  } finally {
+    if (hadGuides) {
+      rootEl.classList.add(GUIDES_ACTIVE_CLASS);
+    }
+  }
+}
+
+// src/lib/export-disc-svg.ts
+function exportDiscAsSvg(discEl, filename = "radial-text.svg") {
+  const w = discEl.offsetWidth;
+  const h = discEl.offsetHeight;
+  const cx = w / 2;
+  const cy = h / 2;
+  const bgColor = discEl.style.background.trim() || "#f3f4f2";
+  const textEls = [];
+  discEl.querySelectorAll(".radialText__line").forEach((el) => {
+    if (el.style.visibility === "hidden" || !el.textContent) return;
+    const { tx, ty, rot } = parseTransform(el.style.transform);
+    const fontSize = parseFloat(el.style.fontSize) || 9;
+    const ax = (cx + tx).toFixed(2);
+    const ay = (cy + ty + fontSize / 2).toFixed(2);
+    const fill = window.getComputedStyle(el).color;
+    const px = parseFloat(el.style.paddingLeft) || 0;
+    textEls.push(
+      `<g transform="translate(${ax},${ay}) rotate(${rot.toFixed(2)})"><text x="${px}" dominant-baseline="middle" font-size="${fontSize}" font-family="${esc(el.style.fontFamily)}" font-weight="${el.style.fontWeight}" font-style="${el.style.fontStyle || "normal"}" fill="${fill}">${esc(el.textContent)}</text></g>`
+    );
+  });
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}">
+<rect width="${w}" height="${h}" fill="${esc(bgColor)}"/>
+` + textEls.join("\n") + `
+</svg>`;
+  const a = document.createElement("a");
+  a.href = URL.createObjectURL(new Blob([svg], { type: "image/svg+xml" }));
+  a.download = filename;
+  a.click();
+  a.remove();
+}
+function parseTransform(t) {
+  const tr = t.match(/translate\(([^,]+)px,\s*([^)]+)px\)/);
+  const ro = t.match(/rotate\(([^)]+)deg\)/);
+  return {
+    tx: tr ? parseFloat(tr[1]) : 0,
+    ty: tr ? parseFloat(tr[2]) : 0,
+    rot: ro ? parseFloat(ro[1]) : 0
+  };
+}
+function esc(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+export {
+  RadialText,
+  exportDiscAsPng,
+  exportDiscAsSvg
+};

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@pswaqtch/around",
+  "version": "0.1.0",
+  "type": "module",
+  "files": ["dist"],
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/index.css"
+  },
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "tsup",
+    "build:demo": "tsc && vite build",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@chenglou/pretext": "^0.0.7",
+    "html2canvas": "^1.4.1"
+  },
+  "devDependencies": {
+    "@types/html2canvas": "^1.0.0",
+    "@types/react": "^19.2.15",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.3",
+    "vite": "^7.2.4"
+  }
+}