@dcg-overseas/number-line 0.1.4 → 0.1.6

package/dist/index.cjs

@@ -1,753 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-function useHistory() {
-  const stackRef = React.useRef([]);
-  const [stackLen, setStackLen] = React.useState(0);
-  const push = React.useCallback((op) => {
-    stackRef.current = [...stackRef.current, op];
-    setStackLen(stackRef.current.length);
-  }, []);
-  const undo = React.useCallback((strokes) => {
-    if (stackRef.current.length === 0) return { strokes: null, arcIndices: [] };
-    const op = stackRef.current[stackRef.current.length - 1];
-    stackRef.current = stackRef.current.slice(0, -1);
-    setStackLen(stackRef.current.length);
-    switch (op.type) {
-      case "add":
-        return {
-          strokes: strokes.filter((s) => !op.strokes.some((os) => os.id === s.id)),
-          arcIndices: []
-        };
-      case "delete":
-        return {
-          strokes: op.strokesBefore,
-          arcIndices: op.arcIndices
-        };
-    }
-  }, []);
-  const clear = React.useCallback(() => {
-    stackRef.current = [];
-    setStackLen(0);
-  }, []);
-  return { push, undo, clear, canUndo: stackLen > 0 };
-}
-function useDrawing() {
-  const [strokes, setStrokes] = React.useState([]);
-  const [tool, setTool] = React.useState("none");
-  const drawing = React.useRef(false);
-  const pointCount = React.useRef(0);
-  const currentD = React.useRef("");
-  const currentId = React.useRef("");
-  const toggleTool = React.useCallback((t) => {
-    setTool((prev) => {
-      if (prev === t) return "none";
-      return t;
-    });
-    setStrokes((prev) => prev.map((s) => ({ ...s, selected: false })));
-  }, []);
-  const startStroke = React.useCallback((x, y, w, h) => {
-    drawing.current = true;
-    pointCount.current = 1;
-    const xN = w > 0 ? x / w : 0;
-    const yN = h > 0 ? y / h : 0;
-    currentD.current = `M ${xN} ${yN}`;
-    currentId.current = `${Date.now()}-${Math.random()}`;
-  }, []);
-  const continueStroke = React.useCallback((x, y, w, h) => {
-    if (!drawing.current) return null;
-    pointCount.current++;
-    const xN = w > 0 ? x / w : 0;
-    const yN = h > 0 ? y / h : 0;
-    currentD.current += ` L ${xN} ${yN}`;
-    return {
-      id: currentId.current,
-      d: currentD.current,
-      selected: false
-    };
-  }, []);
-  const endStroke = React.useCallback(() => {
-    if (!drawing.current) return null;
-    drawing.current = false;
-    if (pointCount.current < 2) {
-      currentD.current = "";
-      pointCount.current = 0;
-      return null;
-    }
-    const stroke = {
-      id: currentId.current,
-      d: currentD.current,
-      selected: false
-    };
-    currentD.current = "";
-    pointCount.current = 0;
-    return stroke;
-  }, []);
-  const toggleSelect = React.useCallback((id) => {
-    setStrokes(
-      (prev) => prev.map((s) => s.id === id ? { ...s, selected: !s.selected } : s)
-    );
-  }, []);
-  const eraseStroke = React.useCallback((id) => {
-    setStrokes((prev) => prev.filter((s) => s.id !== id));
-  }, []);
-  const addStroke = React.useCallback((stroke) => {
-    setStrokes((prev) => [...prev, stroke]);
-  }, []);
-  const deleteSelected = React.useCallback(() => {
-    setStrokes((prev) => prev.filter((s) => !s.selected));
-  }, []);
-  const resetStrokes = React.useCallback(() => {
-    setStrokes([]);
-  }, []);
-  const restoreStrokes = React.useCallback((restored) => {
-    setStrokes(restored);
-  }, []);
-  return {
-    strokes,
-    tool,
-    toggleTool,
-    startStroke,
-    continueStroke,
-    endStroke,
-    toggleSelect,
-    eraseStroke,
-    addStroke,
-    deleteSelected,
-    resetStrokes,
-    restoreStrokes
-  };
-}
-function useContainerSize() {
-  const ref = React.useRef(null);
-  const [size, setSize] = React.useState({ width: 600, height: 200 });
-  React.useLayoutEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    const rect = el.getBoundingClientRect();
-    if (rect.width > 0 && rect.height > 0) {
-      setSize({ width: rect.width, height: rect.height });
-    }
-  }, []);
-  React.useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    const ro = new ResizeObserver((entries) => {
-      var _a;
-      const rect = (_a = entries[0]) == null ? void 0 : _a.contentRect;
-      if (rect && rect.width > 0 && rect.height > 0) {
-        setSize({ width: rect.width, height: rect.height });
-      }
-    });
-    ro.observe(el);
-    return () => ro.disconnect();
-  }, []);
-  return { ref, width: size.width, height: size.height };
-}
-const NumberLineContext = React.createContext(null);
-function useNumberLineContext() {
-  const ctx = React.useContext(NumberLineContext);
-  if (!ctx) throw new Error("Must be used inside <NumberLineProvider>");
-  return ctx;
-}
-function NumberLineProvider({
-  min,
-  max,
-  groupSize,
-  groupCount,
-  tickStep,
-  arcColors,
-  showGroupTicks = true,
-  showMajorTicks = true,
-  showMinorTicks = false,
-  children
-}) {
-  const [selectedArcIndices, setSelectedArcIndices] = React.useState(/* @__PURE__ */ new Set());
-  const [deletedArcIndices, setDeletedArcIndices] = React.useState(/* @__PURE__ */ new Set());
-  const { ref: svgRef, width: containerWidth, height: containerHeight } = useContainerSize();
-  const history = useHistory();
-  const drawing = useDrawing();
-  const [liveStroke, setLiveStroke] = React.useState(null);
-  const svgPoint = React.useRef(null);
-  React.useEffect(() => {
-    setDeletedArcIndices(/* @__PURE__ */ new Set());
-    setSelectedArcIndices(/* @__PURE__ */ new Set());
-  }, [min, max, groupSize, groupCount]);
-  const getLocalCoords = React.useCallback(
-    (e) => {
-      const svg = svgRef.current;
-      if (!svg) return null;
-      const ctm = svg.getScreenCTM();
-      if (!ctm) return null;
-      if (!svgPoint.current) svgPoint.current = svg.createSVGPoint();
-      svgPoint.current.x = e.clientX;
-      svgPoint.current.y = e.clientY;
-      const pt = svgPoint.current.matrixTransform(ctm.inverse());
-      return [pt.x, pt.y];
-    },
-    [svgRef]
-  );
-  const onPointerDown = React.useCallback(
-    (e) => {
-      e.currentTarget.focus();
-      if (drawing.tool !== "pen") return;
-      e.currentTarget.setPointerCapture(e.pointerId);
-      const coords = getLocalCoords(e);
-      if (!coords) return;
-      drawing.startStroke(coords[0], coords[1], containerWidth, containerHeight);
-    },
-    [drawing, getLocalCoords, containerWidth, containerHeight]
-  );
-  const onPointerMove = React.useCallback(
-    (e) => {
-      if (drawing.tool !== "pen") return;
-      const coords = getLocalCoords(e);
-      if (!coords) return;
-      const live = drawing.continueStroke(coords[0], coords[1], containerWidth, containerHeight);
-      if (live) setLiveStroke(live);
-    },
-    [drawing, getLocalCoords, containerWidth, containerHeight]
-  );
-  const onPointerUp = React.useCallback(() => {
-    if (drawing.tool !== "pen") return;
-    const stroke = drawing.endStroke();
-    setLiveStroke(null);
-    if (stroke) {
-      drawing.addStroke(stroke);
-      history.push({ type: "add", strokes: [stroke] });
-    }
-  }, [drawing, history]);
-  const onStrokeClick = React.useCallback(
-    (id, e) => {
-      e.stopPropagation();
-      if (drawing.tool === "eraser") {
-        const target = drawing.strokes.find((s) => s.id === id);
-        if (target) {
-          const strokesBefore = drawing.strokes;
-          drawing.eraseStroke(id);
-          history.push({ type: "delete", strokesBefore, arcIndices: [] });
-        }
-      } else if (drawing.tool === "none") {
-        drawing.toggleSelect(id);
-      }
-    },
-    [drawing, history]
-  );
-  const onArcClick = React.useCallback(
-    (groupIndex, e) => {
-      e.stopPropagation();
-      if (drawing.tool === "eraser") {
-        const strokesBefore = drawing.strokes;
-        setDeletedArcIndices((prev) => /* @__PURE__ */ new Set([...prev, groupIndex]));
-        history.push({ type: "delete", strokesBefore, arcIndices: [groupIndex] });
-      } else if (drawing.tool === "none") {
-        setSelectedArcIndices((prev) => {
-          const next = new Set(prev);
-          if (next.has(groupIndex)) next.delete(groupIndex);
-          else next.add(groupIndex);
-          return next;
-        });
-      }
-    },
-    [drawing.tool, drawing.strokes, history]
-  );
-  const clearArcSelection = React.useCallback(() => setSelectedArcIndices(/* @__PURE__ */ new Set()), []);
-  const onDelete = React.useCallback(() => {
-    const strokesBefore = drawing.strokes;
-    const deletedStrokes = drawing.strokes.filter((s) => s.selected);
-    const deletedArcs = [...selectedArcIndices];
-    if (deletedStrokes.length === 0 && deletedArcs.length === 0) return;
-    if (deletedStrokes.length > 0) drawing.deleteSelected();
-    if (deletedArcs.length > 0) {
-      setDeletedArcIndices((prev) => /* @__PURE__ */ new Set([...prev, ...deletedArcs]));
-      setSelectedArcIndices(/* @__PURE__ */ new Set());
-    }
-    history.push({ type: "delete", strokesBefore, arcIndices: deletedArcs });
-  }, [drawing, history, selectedArcIndices]);
-  const onReset = React.useCallback(() => {
-    drawing.resetStrokes();
-    history.clear();
-    setDeletedArcIndices(/* @__PURE__ */ new Set());
-    setSelectedArcIndices(/* @__PURE__ */ new Set());
-  }, [drawing, history]);
-  const onUndo = React.useCallback(() => {
-    const result = history.undo(drawing.strokes);
-    if (result.strokes !== null) drawing.restoreStrokes(result.strokes);
-    if (result.arcIndices.length > 0) {
-      setDeletedArcIndices((prev) => {
-        const next = new Set(prev);
-        result.arcIndices.forEach((i) => next.delete(i));
-        return next;
-      });
-    }
-  }, [history, drawing]);
-  const onTogglePen = React.useCallback(
-    () => {
-      drawing.toggleTool("pen");
-      clearArcSelection();
-    },
-    [drawing, clearArcSelection]
-  );
-  const onToggleEraser = React.useCallback(
-    () => {
-      drawing.toggleTool("eraser");
-      clearArcSelection();
-    },
-    [drawing, clearArcSelection]
-  );
-  const canDelete = drawing.strokes.some((s) => s.selected) || selectedArcIndices.size > 0;
-  React.useEffect(() => {
-    setSelectedArcIndices(/* @__PURE__ */ new Set());
-  }, [drawing.tool]);
-  const keyHandlers = React.useRef({ toggleTool: drawing.toggleTool, clearArcSelection, canDelete, onDelete, onUndo });
-  keyHandlers.current = { toggleTool: drawing.toggleTool, clearArcSelection, canDelete, onDelete, onUndo };
-  React.useEffect(() => {
-    const svg = svgRef.current;
-    if (!svg) return;
-    const onKey = (e) => {
-      const h = keyHandlers.current;
-      if (e.key === "Escape") {
-        h.toggleTool("none");
-        h.clearArcSelection();
-      } else if ((e.key === "Delete" || e.key === "Backspace") && h.canDelete) {
-        e.preventDefault();
-        h.onDelete();
-      } else if (e.key === "z" && (e.ctrlKey || e.metaKey)) {
-        e.preventDefault();
-        h.onUndo();
-      }
-    };
-    svg.addEventListener("keydown", onKey);
-    return () => svg.removeEventListener("keydown", onKey);
-  }, [svgRef]);
-  const svgCursor = drawing.tool === "pen" ? "crosshair" : drawing.tool === "eraser" ? "cell" : "default";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    NumberLineContext.Provider,
-    {
-      value: {
-        svgRef,
-        containerWidth,
-        containerHeight,
-        svgCursor,
-        min,
-        max,
-        groupSize,
-        groupCount,
-        tickStep,
-        arcColors,
-        showGroupTicks,
-        showMajorTicks,
-        showMinorTicks,
-        tool: drawing.tool,
-        strokes: drawing.strokes,
-        liveStroke,
-        selectedArcIndices,
-        deletedArcIndices,
-        onPointerDown,
-        onPointerMove,
-        onPointerUp,
-        onStrokeClick,
-        onArcClick,
-        canDelete,
-        canUndo: history.canUndo,
-        onTogglePen,
-        onToggleEraser,
-        onDelete,
-        onReset,
-        onUndo
-      },
-      children
-    }
-  );
-}
-function buildArcPath({ x1, x2, y, rx, ry }) {
-  return `M ${x1} ${y} A ${rx} ${ry} 0 0 1 ${x2} ${y}`;
-}
-function computeLabelStep(containerWidth, range) {
-  const maxLabels = Math.floor(containerWidth / 40);
-  if (maxLabels <= 0) return range;
-  const raw = range / maxLabels;
-  const candidates = [1, 2, 5, 10, 20, 25, 50, 100, 200, 500];
-  return candidates.find((c) => c >= raw) ?? candidates[candidates.length - 1];
-}
-const ARC_COLORS = [
-  "#7c3aed",
-  "#0891b2",
-  "#d97706",
-  "#be185d",
-  "#16a34a"
-];
-function gcd(a, b) {
-  let x = Math.max(1, Math.abs(Math.round(a)));
-  let y = Math.max(1, Math.abs(Math.round(b)));
-  while (y !== 0) [x, y] = [y, x % y];
-  return x;
-}
-const AxisLayer = React.memo(function AxisLayer2({
-  min,
-  max,
-  axisY,
-  padLeft,
-  padRight,
-  viewWidth,
-  containerWidth,
-  groupSize,
-  tickStep,
-  showGroupTicks,
-  showMajorTicks,
-  showMinorTicks
-}) {
-  const range = max - min;
-  if (range <= 0) return null;
-  const usable = viewWidth - padLeft - padRight;
-  const toX = (v) => padLeft + (v - min) / range * usable;
-  const step = Math.max(1, Math.round(tickStep));
-  const rawLabelStep = computeLabelStep(containerWidth, range);
-  const labelStep = Math.max(step, Math.ceil(rawLabelStep / step) * step);
-  const MAX_TICKS = 500;
-  const capStep = Math.max(1, Math.ceil(range / MAX_TICKS));
-  const visibleStep = groupSize > 0 ? gcd(step, groupSize) : step;
-  const iterStep = showMinorTicks ? capStep : Math.max(capStep, visibleStep);
-  const allTicks = [];
-  for (let v = min; v <= max; v += iterStep) allTicks.push(v);
-  return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "nl-axis-layer", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "line",
-      {
-        x1: padLeft - 4,
-        y1: axisY,
-        x2: viewWidth - padRight,
-        y2: axisY,
-        stroke: "#374151",
-        strokeWidth: 2
-      }
-    ),
-    allTicks.map((v) => {
-      const x = toX(v);
-      const offset = v - min;
-      const isMajor = offset % step === 0;
-      const isGroupBoundary = groupSize > 0 && offset % groupSize === 0;
-      const visible = isGroupBoundary && showGroupTicks || isMajor && showMajorTicks || !isGroupBoundary && !isMajor && showMinorTicks;
-      if (!visible) return null;
-      const renderAsGroup = isGroupBoundary && showGroupTicks;
-      const renderAsMajor = !renderAsGroup && isMajor && showMajorTicks;
-      const showLabel = (renderAsGroup || renderAsMajor) && offset % labelStep === 0;
-      const tickH = renderAsGroup ? 7 : renderAsMajor ? 10 : 4;
-      const strokeW = renderAsGroup ? 1.5 : renderAsMajor ? 1 : 0.5;
-      const color = renderAsGroup || renderAsMajor ? "#374151" : "#9ca3af";
-      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "line",
-          {
-            x1: x,
-            y1: axisY - tickH,
-            x2: x,
-            y2: axisY + tickH,
-            stroke: color,
-            strokeWidth: strokeW
-          }
-        ),
-        showLabel && /* @__PURE__ */ jsxRuntime.jsx(
-          "text",
-          {
-            x,
-            y: axisY + 22,
-            textAnchor: "middle",
-            fontSize: 11,
-            fill: "#374151",
-            pointerEvents: "none",
-            style: { userSelect: "none", WebkitUserSelect: "none" },
-            children: v
-          }
-        )
-      ] }, v);
-    })
-  ] });
-});
-const GroupArcsLayer = React.memo(function GroupArcsLayer2({
-  min,
-  max,
-  groupSize,
-  groupCount,
-  axisY,
-  padLeft,
-  padRight,
-  viewWidth,
-  arcMaxHeight,
-  tool,
-  selectedArcIndices,
-  deletedArcIndices,
-  onArcClick,
-  arcColors = ARC_COLORS
-}) {
-  if (groupSize <= 0 || groupCount <= 0) return null;
-  const range = max - min;
-  const usable = viewWidth - padLeft - padRight;
-  const toX = (v) => padLeft + (v - min) / range * usable;
-  const arcs = [];
-  for (let g = 0; g < groupCount; g++) {
-    if (deletedArcIndices.has(g)) continue;
-    const start = min + g * groupSize;
-    const end = start + groupSize;
-    if (end > max) break;
-    const x1 = toX(start);
-    const x2 = toX(end);
-    const rx = (x2 - x1) / 2;
-    const ry = Math.min(rx * 0.7, arcMaxHeight);
-    const color = arcColors[g % arcColors.length];
-    const arrowHeadH = 7;
-    const arrowHeadHW = 4;
-    const MIN_ARROW_SPAN = 18;
-    const textY = Math.min(axisY - ry - 6, axisY - MIN_ARROW_SPAN);
-    const arcPath = buildArcPath({ x1, x2, y: axisY, rx, ry });
-    const isSelected = selectedArcIndices.has(g);
-    const hitCursor = tool === "eraser" ? "cell" : tool === "none" ? "pointer" : "default";
-    arcs.push(
-      /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
-        isSelected && /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: arcPath,
-            fill: "none",
-            stroke: "rgba(0,0,0,0.15)",
-            strokeWidth: 14,
-            strokeLinecap: "round",
-            pointerEvents: "none"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: arcPath,
-            fill: "none",
-            stroke: isSelected ? "#1d4ed8" : color,
-            strokeWidth: isSelected ? 3 : 2,
-            pointerEvents: "none"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: arcPath,
-            fill: "none",
-            stroke: "transparent",
-            strokeWidth: 20,
-            strokeLinecap: "round",
-            pointerEvents: "stroke",
-            style: { cursor: hitCursor },
-            onPointerDown: (e) => {
-              if (tool === "eraser" || tool === "none") {
-                e.stopPropagation();
-                onArcClick(g, e);
-              }
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "text",
-          {
-            x: x2,
-            y: textY,
-            textAnchor: "middle",
-            fontSize: 10,
-            fill: isSelected ? "#1d4ed8" : color,
-            fontWeight: "600",
-            pointerEvents: "none",
-            style: { userSelect: "none", WebkitUserSelect: "none" },
-            children: end
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "line",
-          {
-            x1: x2,
-            y1: textY + 4,
-            x2,
-            y2: axisY - arrowHeadH,
-            stroke: isSelected ? "#1d4ed8" : color,
-            strokeWidth: 1.5,
-            pointerEvents: "none"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "polygon",
-          {
-            points: `${x2},${axisY} ${x2 - arrowHeadHW},${axisY - arrowHeadH} ${x2 + arrowHeadHW},${axisY - arrowHeadH}`,
-            fill: isSelected ? "#1d4ed8" : color,
-            pointerEvents: "none"
-          }
-        )
-      ] }, g)
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("g", { className: "nl-arcs-layer", children: arcs });
-});
-function DrawingLayer({ strokes, liveStroke, tool, width, height, onStrokeClick }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "nl-drawing-layer", transform: `scale(${width} ${height})`, children: [
-    strokes.map((s) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
-      s.selected && /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: s.d,
-          fill: "none",
-          stroke: "rgba(0,0,0,0.15)",
-          strokeWidth: 18,
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          vectorEffect: "non-scaling-stroke",
-          pointerEvents: "none"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: s.d,
-          fill: "none",
-          stroke: "transparent",
-          strokeWidth: tool === "eraser" ? 32 : 28,
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          vectorEffect: "non-scaling-stroke",
-          pointerEvents: "stroke",
-          style: { cursor: tool === "eraser" ? "cell" : tool === "none" ? "pointer" : "default" },
-          onPointerDown: (e) => {
-            if (tool === "eraser" || tool === "none") {
-              e.stopPropagation();
-              onStrokeClick(s.id, e);
-            }
-          }
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: s.d,
-          fill: "none",
-          stroke: "#7c3aed",
-          strokeWidth: 2.5,
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          vectorEffect: "non-scaling-stroke",
-          pointerEvents: "none"
-        }
-      )
-    ] }, s.id)),
-    liveStroke && /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        d: liveStroke.d,
-        fill: "none",
-        stroke: "#7c3aed",
-        strokeWidth: 2.5,
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        vectorEffect: "non-scaling-stroke",
-        pointerEvents: "none",
-        opacity: 0.7
-      }
-    )
-  ] });
-}
-const PAD_LEFT = 30;
-const PAD_RIGHT = 40;
-const AXIS_BOTTOM_OFFSET = 50;
-const ARC_TOP_PADDING = 16;
-const MIN_ARC_HEIGHT = 24;
-function NumberLine({ className }) {
-  const {
-    svgRef,
-    containerWidth,
-    containerHeight,
-    svgCursor,
-    min,
-    max,
-    groupSize,
-    groupCount,
-    tickStep,
-    arcColors,
-    showGroupTicks,
-    showMajorTicks,
-    showMinorTicks,
-    tool,
-    strokes,
-    liveStroke,
-    selectedArcIndices,
-    deletedArcIndices,
-    onPointerDown,
-    onPointerMove,
-    onPointerUp,
-    onStrokeClick,
-    onArcClick
-  } = useNumberLineContext();
-  const w = containerWidth;
-  const h = containerHeight;
-  const axisY = Math.max(MIN_ARC_HEIGHT + ARC_TOP_PADDING, h - AXIS_BOTTOM_OFFSET);
-  const arcMaxHeight = Math.max(MIN_ARC_HEIGHT, axisY - ARC_TOP_PADDING);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "svg",
-    {
-      ref: svgRef,
-      tabIndex: 0,
-      className: className ? `nl-svg ${className}` : "nl-svg",
-      viewBox: `0 0 ${w} ${h}`,
-      preserveAspectRatio: "none",
-      style: { width: "100%", height: "100%", display: "block", outline: "none", cursor: svgCursor, touchAction: "none" },
-      onPointerDown,
-      onPointerMove,
-      onPointerUp,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AxisLayer,
-          {
-            min,
-            max,
-            axisY,
-            padLeft: PAD_LEFT,
-            padRight: PAD_RIGHT,
-            viewWidth: w,
-            containerWidth: w,
-            groupSize,
-            tickStep,
-            showGroupTicks,
-            showMajorTicks,
-            showMinorTicks
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          GroupArcsLayer,
-          {
-            min,
-            max,
-            groupSize,
-            groupCount,
-            axisY,
-            padLeft: PAD_LEFT,
-            padRight: PAD_RIGHT,
-            viewWidth: w,
-            arcMaxHeight,
-            tool,
-            selectedArcIndices,
-            deletedArcIndices,
-            onArcClick,
-            arcColors
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          DrawingLayer,
-          {
-            strokes,
-            liveStroke,
-            tool,
-            width: w,
-            height: h,
-            onStrokeClick
-          }
-        )
-      ]
-    }
-  );
-}
-exports.NumberLine = NumberLine;
-exports.NumberLineProvider = NumberLineProvider;
-exports.useNumberLineContext = useNumberLineContext;