@dcg-overseas/number-line 0.1.6 → 0.1.7

package/dist/index.cjs

@@ -0,0 +1,1059 @@
+"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 };
+}
+function useZoom({
+  dataMin,
+  dataMax,
+  minZoom,
+  maxZoom,
+  controlledMin,
+  controlledMax,
+  onChange
+}) {
+  const isControlled = controlledMin !== void 0 && controlledMax !== void 0;
+  const [internal, setInternal] = React.useState([dataMin, dataMax]);
+  const lastRange = React.useRef([dataMin, dataMax]);
+  React.useEffect(() => {
+    const [lm, lM] = lastRange.current;
+    if (lm !== dataMin || lM !== dataMax) {
+      lastRange.current = [dataMin, dataMax];
+      if (!isControlled) setInternal([dataMin, dataMax]);
+    }
+  }, [dataMin, dataMax, isControlled]);
+  const viewMin = isControlled ? controlledMin : internal[0];
+  const viewMax = isControlled ? controlledMax : internal[1];
+  const viewRef = React.useRef({ viewMin, viewMax });
+  viewRef.current = { viewMin, viewMax };
+  const dataRange = dataMax - dataMin;
+  const minView = dataRange / Math.max(1, maxZoom);
+  const maxView = dataRange / Math.max(1, Math.min(minZoom, maxZoom));
+  const commit = React.useCallback(
+    (next) => {
+      const { viewMin: curMin, viewMax: curMax } = viewRef.current;
+      let [a, b] = next;
+      let width = b - a;
+      if (width < minView) {
+        const c = (a + b) / 2;
+        a = c - minView / 2;
+        b = c + minView / 2;
+        width = minView;
+      }
+      if (width > maxView) {
+        const c = (a + b) / 2;
+        a = c - maxView / 2;
+        b = c + maxView / 2;
+        width = maxView;
+      }
+      if (a < dataMin) {
+        b += dataMin - a;
+        a = dataMin;
+      }
+      if (b > dataMax) {
+        a -= b - dataMax;
+        b = dataMax;
+      }
+      if (a < dataMin) a = dataMin;
+      if (b > dataMax) b = dataMax;
+      if (a === curMin && b === curMax) return;
+      if (!isControlled) setInternal([a, b]);
+      onChange == null ? void 0 : onChange(a, b);
+    },
+    [minView, maxView, dataMin, dataMax, isControlled, onChange]
+  );
+  const zoomAt = React.useCallback(
+    (factor, f) => {
+      const width = viewMax - viewMin;
+      const anchorVal = viewMin + width * f;
+      const newWidth = width / factor;
+      const a = anchorVal - newWidth * f;
+      const b = anchorVal + newWidth * (1 - f);
+      commit([a, b]);
+    },
+    [viewMin, viewMax, commit]
+  );
+  const panByFraction = React.useCallback(
+    (df) => {
+      const width = viewMax - viewMin;
+      const dv = width * df;
+      commit([viewMin + dv, viewMax + dv]);
+    },
+    [viewMin, viewMax, commit]
+  );
+  const resetView = React.useCallback(() => {
+    commit([dataMin, dataMax]);
+  }, [commit, dataMin, dataMax]);
+  return { viewMin, viewMax, zoomAt, panByFraction, resetView };
+}
+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 normalizeDomain(lo, hi) {
+  const a = Number(lo);
+  const b = Number(hi);
+  const x = Math.min(a, b);
+  const y = Math.max(a, b);
+  if (!Number.isFinite(x) || !Number.isFinite(y)) {
+    return { min: 0, max: 1 };
+  }
+  if (y <= x) {
+    return { min: x, max: x + 1 };
+  }
+  return { min: x, max: y };
+}
+function NumberLineProvider({
+  min,
+  max,
+  groupSize,
+  groupCount,
+  tickStep,
+  arcColors,
+  showGroupTicks = true,
+  showMajorTicks = true,
+  showMinorTicks = false,
+  enableZoom = false,
+  minZoom = 1,
+  maxZoom = 50,
+  viewMin: controlledViewMin,
+  viewMax: controlledViewMax,
+  onViewChange,
+  children
+}) {
+  const { min: domainMin, max: domainMax } = normalizeDomain(min, max);
+  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 { viewMin, viewMax, zoomAt, panByFraction, resetView } = useZoom({
+    dataMin: domainMin,
+    dataMax: domainMax,
+    minZoom,
+    maxZoom,
+    controlledMin: controlledViewMin,
+    controlledMax: controlledViewMax,
+    onChange: onViewChange
+  });
+  const [liveStroke, setLiveStroke] = React.useState(null);
+  const svgPoint = React.useRef(null);
+  React.useEffect(() => {
+    setDeletedArcIndices(/* @__PURE__ */ new Set());
+    setSelectedArcIndices(/* @__PURE__ */ new Set());
+  }, [domainMin, domainMax, 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: domainMin,
+        max: domainMax,
+        groupSize,
+        groupCount,
+        tickStep,
+        arcColors,
+        showGroupTicks,
+        showMajorTicks,
+        showMinorTicks,
+        viewMin,
+        viewMax,
+        enableZoom,
+        resetView,
+        zoomAt,
+        panByFraction,
+        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,
+  viewMin,
+  viewMax,
+  axisY,
+  padLeft,
+  padRight,
+  viewWidth,
+  containerWidth,
+  groupSize,
+  groupCount,
+  tickStep,
+  showGroupTicks,
+  showMajorTicks,
+  showMinorTicks
+}) {
+  const range = viewMax - viewMin;
+  if (range <= 0) return null;
+  const usable = viewWidth - padLeft - padRight;
+  const toX = (v) => padLeft + (v - viewMin) / 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 startVal = Math.floor(viewMin / iterStep) * iterStep;
+  const allTicks = [];
+  for (let v = startVal; v <= viewMax; v += iterStep) {
+    if (v >= viewMin && v <= viewMax) 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 maxGroupBoundary = min + groupCount * groupSize;
+      const isGroupBoundary = groupSize > 0 && offset % groupSize === 0 && v <= maxGroupBoundary;
+      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,
+  viewMin,
+  viewMax,
+  groupSize,
+  groupCount,
+  axisY,
+  padLeft,
+  padRight,
+  viewWidth,
+  arcMaxHeight,
+  tool,
+  selectedArcIndices,
+  deletedArcIndices,
+  onArcClick,
+  arcColors = ARC_COLORS
+}) {
+  if (groupSize <= 0 || groupCount <= 0) return null;
+  const range = viewMax - viewMin;
+  const usable = viewWidth - padLeft - padRight;
+  const toX = (v) => padLeft + (v - viewMin) / range * usable;
+  const clipId = React.useId().replace(/:/g, "_") + "-arcs-clip";
+  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;
+    if (end < viewMin || start > viewMax) continue;
+    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 },
+            onClick: (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.jsxs("g", { className: "nl-arcs-layer", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: clipId, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "rect",
+      {
+        x: padLeft,
+        y: 0,
+        width: usable,
+        height: axisY + 1
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: `url(#${clipId})`, 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" },
+          onClick: (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_LEGACY = 30;
+const PAD_RIGHT_LEGACY = 40;
+const PAD_X = (PAD_LEFT_LEGACY + PAD_RIGHT_LEGACY) / 2;
+const LABEL_SPACE_BELOW_AXIS = 42;
+const LABEL_ABOVE_AXIS_SLOP = 32;
+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,
+    viewMin,
+    viewMax,
+    enableZoom,
+    resetView,
+    zoomAt,
+    panByFraction,
+    tool,
+    strokes,
+    liveStroke,
+    selectedArcIndices,
+    deletedArcIndices,
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    onStrokeClick,
+    onArcClick
+  } = useNumberLineContext();
+  const w = containerWidth;
+  const h = containerHeight;
+  const range = Math.max(viewMax - viewMin, 1e-6);
+  const usable = Math.max(w - 2 * PAD_X, 1);
+  let ryTypical = MIN_ARC_HEIGHT * 0.5;
+  if (groupSize > 0 && groupCount > 0) {
+    const rx = usable * groupSize / range / 2;
+    ryTypical = Math.min(rx * 0.7, h * 0.48);
+  }
+  const minAxisY = MIN_ARC_HEIGHT + ARC_TOP_PADDING;
+  const maxAxisY = h - LABEL_SPACE_BELOW_AXIS;
+  const axisYCentered = (h + ryTypical + LABEL_ABOVE_AXIS_SLOP - LABEL_SPACE_BELOW_AXIS) / 2;
+  const axisY = Math.min(maxAxisY, Math.max(minAxisY, axisYCentered));
+  const arcMaxHeight = Math.max(MIN_ARC_HEIGHT, axisY - ARC_TOP_PADDING);
+  const [isZoomActive, setIsZoomActive] = React.useState(false);
+  const [isPanning, setIsPanning] = React.useState(false);
+  const panStart = React.useRef(null);
+  const activePointers = React.useRef(/* @__PURE__ */ new Map());
+  const pinchState = React.useRef(null);
+  const handleWheel = React.useCallback(
+    (e) => {
+      if (!enableZoom || !isZoomActive) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const svg = svgRef.current;
+      if (!svg) return;
+      const rect = svg.getBoundingClientRect();
+      const mouseX = e.clientX - rect.left;
+      const fraction = mouseX / w;
+      const factor = e.deltaY < 0 ? 1.15 : 1 / 1.15;
+      zoomAt(factor, fraction);
+    },
+    [enableZoom, isZoomActive, svgRef, w, zoomAt]
+  );
+  const handlePanStart = React.useCallback(
+    (e) => {
+      if (!enableZoom || tool !== "none") return;
+      if (e.button !== 0 && e.button !== 1) return;
+      const svg = svgRef.current;
+      if (!svg) return;
+      const rect = svg.getBoundingClientRect();
+      panStart.current = { x: e.clientX - rect.left, pointerId: e.pointerId };
+    },
+    [enableZoom, tool, svgRef]
+  );
+  const handlePanMove = React.useCallback(
+    (e) => {
+      if (!enableZoom || !panStart.current) return;
+      if (e.pointerId !== panStart.current.pointerId) return;
+      const svg = svgRef.current;
+      if (!svg) return;
+      const rect = svg.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const dx = x - panStart.current.x;
+      if (!isPanning && Math.abs(dx) < 5) return;
+      if (!isPanning) {
+        setIsPanning(true);
+        svg.setPointerCapture(e.pointerId);
+      }
+      const df = -dx / w;
+      panByFraction(df);
+      panStart.current.x = x;
+    },
+    [enableZoom, isPanning, svgRef, w, panByFraction]
+  );
+  const handlePanEnd = React.useCallback(() => {
+    panStart.current = null;
+    setIsPanning(false);
+  }, []);
+  const updatePinch = React.useCallback(() => {
+    if (!enableZoom || activePointers.current.size !== 2) return;
+    const [p1, p2] = Array.from(activePointers.current.values());
+    const dist = Math.hypot(p2.x - p1.x, p2.y - p1.y);
+    const midX = (p1.x + p2.x) / 2;
+    if (!pinchState.current) {
+      pinchState.current = { dist, midX };
+    } else {
+      const factor = dist / pinchState.current.dist;
+      const fraction = midX / w;
+      zoomAt(factor, fraction);
+      pinchState.current = { dist, midX };
+    }
+  }, [enableZoom, w, zoomAt]);
+  const handlePointerDown = React.useCallback(
+    (e) => {
+      if (e.pointerType === "touch" && enableZoom) {
+        const svg = svgRef.current;
+        if (!svg) return;
+        const rect = svg.getBoundingClientRect();
+        activePointers.current.set(e.pointerId, {
+          x: e.clientX - rect.left,
+          y: e.clientY - rect.top
+        });
+        setIsZoomActive(true);
+        updatePinch();
+      }
+      if (tool === "pen") {
+        onPointerDown(e);
+      } else {
+        handlePanStart(e);
+        onPointerDown(e);
+      }
+    },
+    [tool, enableZoom, svgRef, onPointerDown, handlePanStart, updatePinch]
+  );
+  const handlePointerMove = React.useCallback(
+    (e) => {
+      if (e.pointerType === "touch" && enableZoom && activePointers.current.has(e.pointerId)) {
+        const svg = svgRef.current;
+        if (!svg) return;
+        const rect = svg.getBoundingClientRect();
+        activePointers.current.set(e.pointerId, {
+          x: e.clientX - rect.left,
+          y: e.clientY - rect.top
+        });
+        updatePinch();
+      }
+      onPointerMove(e);
+      handlePanMove(e);
+    },
+    [enableZoom, svgRef, onPointerMove, handlePanMove, updatePinch]
+  );
+  const handlePointerUp = React.useCallback(
+    (e) => {
+      if (activePointers.current.has(e.pointerId)) {
+        activePointers.current.delete(e.pointerId);
+        if (activePointers.current.size < 2) {
+          pinchState.current = null;
+        }
+        if (activePointers.current.size === 0 && e.pointerType === "touch") {
+          setIsZoomActive(false);
+        }
+      }
+      onPointerUp();
+      handlePanEnd();
+    },
+    [onPointerUp, handlePanEnd]
+  );
+  const handleDoubleClick = React.useCallback(
+    () => {
+      if (!enableZoom) return;
+      resetView();
+    },
+    [enableZoom, resetView]
+  );
+  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: enableZoom && isZoomActive ? "2px solid rgba(59, 130, 246, 0.5)" : "none",
+        cursor: svgCursor,
+        touchAction: "none"
+      },
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onWheel: handleWheel,
+      onDoubleClick: handleDoubleClick,
+      onMouseEnter: () => enableZoom && setIsZoomActive(true),
+      onMouseLeave: () => enableZoom && setIsZoomActive(false),
+      onFocus: () => enableZoom && setIsZoomActive(true),
+      onBlur: () => enableZoom && setIsZoomActive(false),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          AxisLayer,
+          {
+            min,
+            max,
+            viewMin,
+            viewMax,
+            axisY,
+            padLeft: PAD_X,
+            padRight: PAD_X,
+            viewWidth: w,
+            containerWidth: w,
+            groupSize,
+            groupCount,
+            tickStep,
+            showGroupTicks,
+            showMajorTicks,
+            showMinorTicks
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          GroupArcsLayer,
+          {
+            min,
+            max,
+            viewMin,
+            viewMax,
+            groupSize,
+            groupCount,
+            axisY,
+            padLeft: PAD_X,
+            padRight: PAD_X,
+            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;