From 5f536ebec8099247e9dfade7579a6dbe2fa0a78d Mon Sep 17 00:00:00 2001
From: "Yuichiro Tachibana (Tsuchiya)" <t.yic.yt@gmail.com>
Date: Tue, 12 Aug 2025 14:15:45 +0900
Subject: [PATCH 01/14] Percentage values for endpoint positions

---
 components/parse-option.test.ts    | 28 +++++++++++++++--
 components/parse-option.ts         | 48 ++++++++++++++++++++----------
 components/use-element-position.ts | 38 ++++++++++++++++++-----
 3 files changed, 89 insertions(+), 25 deletions(-)

diff --git a/components/parse-option.test.ts b/components/parse-option.test.ts
index 525d598..1066b25 100644
--- a/components/parse-option.test.ts
+++ b/components/parse-option.test.ts
@@ -21,8 +21,32 @@ describe("parsePosition", () => {
       // Assuming parsePosition is a function that processes the options
       const parsed = parseArrowEndpointShorthand(optionString);
       expect(parsed).toEqual({
-        x: 100,
-        y: 200,
+        x: { value: 100, unit: "px" },
+        y: { value: 200, unit: "px" },
+      });
+    });
+  });
+  (
+    [
+      "(10%,20%)",
+      "(10%, 20%)",
+      "(10% ,20%)",
+      "(10% , 20%)",
+      "( 10%,20%)",
+      " (10%,20%)",
+      "(10%,20%) ",
+      " (10%,20%) ",
+      " (10% ,20%) ",
+      " (10%, 20%) ",
+      " (10% , 20%) ",
+    ] as const
+  ).forEach((optionString) => {
+    it(`parses string with absolute option correctly: "${optionString}"`, () => {
+      // Assuming parsePosition is a function that processes the options
+      const parsed = parseArrowEndpointShorthand(optionString);
+      expect(parsed).toEqual({
+        x: { value: 10, unit: "%" },
+        y: { value: 20, unit: "%" },
       });
     });
   });
diff --git a/components/parse-option.ts b/components/parse-option.ts
index c28e7c1..ec33aab 100644
--- a/components/parse-option.ts
+++ b/components/parse-option.ts
@@ -1,32 +1,44 @@
 import type { SnapPosition } from "./use-element-position";
-import type { AbsolutePosition } from "./use-rough-arrow";
 
 export interface SnapTarget {
   query: string;
   snapPosition: SnapPosition | undefined;
 }
 
-const absolutePositionRegex = /^\(\s*(\d+)\s*,\s*(\d+)\s*\)$/;
+export interface LengthPercentage {
+  value: number;
+  unit: "px" | "%";
+}
+export interface Position {
+  x: LengthPercentage;
+  y: LengthPercentage;
+}
+
+const positionRegex =
+  /^\(\s*(?<xValue>[+-]?\d+)(?<xUnit>%|px)?\s*,\s*(?<yValue>[+-]?\d+)(?<yUnit>%|px)?\s*\)$/;
 const snapTargetRegex = /^(\S+?)(@(\S+?))?$/;
 
 /**
  * The `arrowEndpointShorthand` can be in the format of a CSS selector with a snap position,
- * or an absolute position in the format "(x,y)".
+ * or a position in the format "(x,y)".
  * - For example, "[data-id=snap-target]" or "[data-id=snap-target]@left".
- * - Or an absolute position like "(100,200)".
+ * - Or a position like "(100,200)", "(100px,200px)", or (10%,20%).
  */
 export function parseArrowEndpointShorthand(
   arrowEndpointShorthand: string,
-): SnapTarget | AbsolutePosition {
+): SnapTarget | Position {
   arrowEndpointShorthand = arrowEndpointShorthand.trim();
 
-  const absolutePositionMatch = arrowEndpointShorthand.match(
-    absolutePositionRegex,
-  );
-  if (absolutePositionMatch) {
-    const x = parseInt(absolutePositionMatch[1], 10);
-    const y = parseInt(absolutePositionMatch[2], 10);
-    return { x, y };
+  const positionMatch = arrowEndpointShorthand.match(positionRegex);
+  if (positionMatch) {
+    const xValue = parseInt(positionMatch.groups?.xValue ?? "0", 10);
+    const xUnit = (positionMatch.groups?.xUnit ?? "px") as "px" | "%";
+    const yValue = parseInt(positionMatch.groups?.yValue ?? "0", 10);
+    const yUnit = (positionMatch.groups?.yUnit ?? "px") as "px" | "%";
+    return {
+      x: { value: xValue, unit: xUnit },
+      y: { value: yValue, unit: yUnit },
+    };
   }
 
   const snapTargetMatch = arrowEndpointShorthand.match(snapTargetRegex);
@@ -49,7 +61,7 @@ interface ArrowEndpointProps {
 }
 export function compileArrowEndpointProps(
   props: ArrowEndpointProps,
-): SnapTarget | AbsolutePosition | undefined {
+): SnapTarget | Position | undefined {
   if (props.shorthand) {
     try {
       return parseArrowEndpointShorthand(props.shorthand);
@@ -75,8 +87,14 @@ export function compileArrowEndpointProps(
 
   if (props.x != undefined || props.y != undefined) {
     return {
-      x: Number(props.x ?? 0),
-      y: Number(props.y ?? 0),
+      x: {
+        value: Number(props.x ?? 0),
+        unit: "px",
+      },
+      y: {
+        value: Number(props.y ?? 0),
+        unit: "px",
+      },
     };
   }
 
diff --git a/components/use-element-position.ts b/components/use-element-position.ts
index b0bdbeb..700bf58 100644
--- a/components/use-element-position.ts
+++ b/components/use-element-position.ts
@@ -6,9 +6,14 @@ import {
   onWatcherCleanup,
   type Ref,
 } from "vue";
-import { useSlideContext, useIsSlideActive } from "@slidev/client";
-import { AbsolutePosition } from "./use-rough-arrow";
-import { SnapTarget } from "./parse-option";
+import {
+  useSlideContext,
+  useIsSlideActive,
+  slideWidth,
+  slideHeight,
+} from "@slidev/client";
+import type { AbsolutePosition } from "./use-rough-arrow";
+import type { SnapTarget, Position, LengthPercentage } from "./parse-option";
 
 export type SnapPosition =
   | "top"
@@ -20,10 +25,24 @@ export type SnapPosition =
   | "bottomleft"
   | "bottomright";
 
+function getAbsoluteValue(
+  lengthPercentage: LengthPercentage,
+  total: number,
+): number {
+  if (lengthPercentage.unit === "px") {
+    return lengthPercentage.value;
+  } else if (lengthPercentage.unit === "%") {
+    return (lengthPercentage.value / 100) * total;
+  } else {
+    console.warn(`Unknown length percentage unit: ${lengthPercentage.unit}`);
+    return 0;
+  }
+}
+
 export function useEndpointResolution(
   slideContainerRef: Ref<Element | undefined>,
   rootElementRef: Ref<SVGSVGElement | undefined>,
-  endpointRef: Ref<AbsolutePosition | SnapTarget | undefined>,
+  endpointRef: Ref<Position | SnapTarget | undefined>,
   fallbackOption: {
     self: Ref<HTMLElement | undefined>;
     direction: "next" | "prev";
@@ -51,7 +70,7 @@ export function useEndpointResolution(
       };
     }
     if (!("query" in endpoint)) {
-      // endpoint is AbsolutePosition
+      // endpoint is of type Position
       // so we don't need to resolve the element.
       return undefined;
     }
@@ -65,7 +84,7 @@ export function useEndpointResolution(
 
   const point = ref<AbsolutePosition | undefined>(undefined);
 
-  // Sync endpointRef -> point in case where endpoint is AbsolutePosition
+  // Sync endpointRef -> point in case where endpoint is Position
   watch(
     endpointRef,
     (endpoint) => {
@@ -73,7 +92,10 @@ export function useEndpointResolution(
         point.value = undefined;
         return;
       } else if ("x" in endpoint) {
-        point.value = { x: endpoint.x, y: endpoint.y };
+        point.value = {
+          x: getAbsoluteValue(endpoint.x, slideWidth.value),
+          y: getAbsoluteValue(endpoint.y, slideHeight.value),
+        };
         return;
       }
     },
@@ -83,7 +105,7 @@ export function useEndpointResolution(
   // Sync snappedElementInfo -> point in case where endpoint is SnapTarget
   const updateSnappedPosition = () => {
     if (!snappedElementInfo.value) {
-      // This case means endpoint is AbsolutePosition
+      // This case means endpoint is of type Position
       // so we don't need to update point in this method
       // as it's done in the watch above.
       return;

From efab04ee92b7a23ddb5c1e8acc3dcb868a521fd0 Mon Sep 17 00:00:00 2001
From: "Yuichiro Tachibana (Tsuchiya)" <t.yic.yt@gmail.com>
Date: Tue, 12 Aug 2025 15:36:12 +0900
Subject: [PATCH 02/14] Percentage values for snap position

---
 components/parse-option.test.ts    |  7 ++--
 components/parse-option.ts         | 52 +++++++++++++++++++-----------
 components/use-element-position.ts | 23 +++++++------
 3 files changed, 52 insertions(+), 30 deletions(-)

diff --git a/components/parse-option.test.ts b/components/parse-option.test.ts
index 1066b25..b71e123 100644
--- a/components/parse-option.test.ts
+++ b/components/parse-option.test.ts
@@ -15,9 +15,10 @@ describe("parsePosition", () => {
       " (100 ,200) ",
       " (100, 200) ",
       " (100 , 200) ",
+      "(+100,+200)",
     ] as const
   ).forEach((optionString) => {
-    it(`parses string with absolute option correctly: "${optionString}"`, () => {
+    it(`parses a string with an absolute position correctly: "${optionString}"`, () => {
       // Assuming parsePosition is a function that processes the options
       const parsed = parseArrowEndpointShorthand(optionString);
       expect(parsed).toEqual({
@@ -26,6 +27,7 @@ describe("parsePosition", () => {
       });
     });
   });
+
   (
     [
       "(10%,20%)",
@@ -39,9 +41,10 @@ describe("parsePosition", () => {
       " (10% ,20%) ",
       " (10%, 20%) ",
       " (10% , 20%) ",
+      "(+10%,+20%)",
     ] as const
   ).forEach((optionString) => {
-    it(`parses string with absolute option correctly: "${optionString}"`, () => {
+    it(`parses a string with a relative option correctly: "${optionString}"`, () => {
       // Assuming parsePosition is a function that processes the options
       const parsed = parseArrowEndpointShorthand(optionString);
       expect(parsed).toEqual({
diff --git a/components/parse-option.ts b/components/parse-option.ts
index ec33aab..ac751c5 100644
--- a/components/parse-option.ts
+++ b/components/parse-option.ts
@@ -1,10 +1,5 @@
 import type { SnapPosition } from "./use-element-position";
 
-export interface SnapTarget {
-  query: string;
-  snapPosition: SnapPosition | undefined;
-}
-
 export interface LengthPercentage {
   value: number;
   unit: "px" | "%";
@@ -14,9 +9,30 @@ export interface Position {
   y: LengthPercentage;
 }
 
+export interface SnapTarget {
+  query: string;
+  snapPosition: SnapPosition | Position | undefined;
+}
+
 const positionRegex =
   /^\(\s*(?<xValue>[+-]?\d+)(?<xUnit>%|px)?\s*,\s*(?<yValue>[+-]?\d+)(?<yUnit>%|px)?\s*\)$/;
-const snapTargetRegex = /^(\S+?)(@(\S+?))?$/;
+const snapTargetRegex = /^(?<query>\S+?)(@(?<snapPosition>\S+?))?$/;
+
+function parsePosition(positionString: string): Position | undefined {
+  const positionMatch = positionString.match(positionRegex);
+  if (!positionMatch) {
+    return undefined;
+  }
+
+  const xValue = parseInt(positionMatch.groups?.xValue ?? "0", 10);
+  const xUnit = (positionMatch.groups?.xUnit ?? "px") as "px" | "%";
+  const yValue = parseInt(positionMatch.groups?.yValue ?? "0", 10);
+  const yUnit = (positionMatch.groups?.yUnit ?? "px") as "px" | "%";
+  return {
+    x: { value: xValue, unit: xUnit },
+    y: { value: yValue, unit: yUnit },
+  };
+}
 
 /**
  * The `arrowEndpointShorthand` can be in the format of a CSS selector with a snap position,
@@ -29,23 +45,21 @@ export function parseArrowEndpointShorthand(
 ): SnapTarget | Position {
   arrowEndpointShorthand = arrowEndpointShorthand.trim();
 
-  const positionMatch = arrowEndpointShorthand.match(positionRegex);
-  if (positionMatch) {
-    const xValue = parseInt(positionMatch.groups?.xValue ?? "0", 10);
-    const xUnit = (positionMatch.groups?.xUnit ?? "px") as "px" | "%";
-    const yValue = parseInt(positionMatch.groups?.yValue ?? "0", 10);
-    const yUnit = (positionMatch.groups?.yUnit ?? "px") as "px" | "%";
-    return {
-      x: { value: xValue, unit: xUnit },
-      y: { value: yValue, unit: yUnit },
-    };
+  const position = parsePosition(arrowEndpointShorthand);
+  if (position) {
+    return position;
   }
 
   const snapTargetMatch = arrowEndpointShorthand.match(snapTargetRegex);
   if (snapTargetMatch) {
-    const query = snapTargetMatch[1];
-    const snapPosition = snapTargetMatch[3] as SnapPosition | undefined;
-    return { query, snapPosition };
+    const query = snapTargetMatch.groups!.query;
+    const snapPosition = snapTargetMatch.groups?.snapPosition;
+    return {
+      query,
+      snapPosition: snapPosition
+        ? (parsePosition(snapPosition) ?? (snapPosition as SnapPosition))
+        : undefined,
+    };
   }
 
   throw new Error(`Invalid arrow endpoint format: ${arrowEndpointShorthand}`);
diff --git a/components/use-element-position.ts b/components/use-element-position.ts
index 700bf58..e139b9e 100644
--- a/components/use-element-position.ts
+++ b/components/use-element-position.ts
@@ -125,15 +125,20 @@ export function useEndpointResolution(
     const width = rect.width / $scale.value;
     const height = rect.height / $scale.value;
 
-    if (snapPosition?.includes("right")) {
-      x += width;
-    } else if (!snapPosition?.includes("left")) {
-      x += width / 2;
-    }
-    if (snapPosition?.includes("bottom")) {
-      y += height;
-    } else if (!snapPosition?.includes("top")) {
-      y += height / 2;
+    if (typeof snapPosition === "string" || snapPosition == null) {
+      if (snapPosition?.includes("right")) {
+        x += width;
+      } else if (!snapPosition?.includes("left")) {
+        x += width / 2;
+      }
+      if (snapPosition?.includes("bottom")) {
+        y += height;
+      } else if (!snapPosition?.includes("top")) {
+        y += height / 2;
+      }
+    } else if (typeof snapPosition === "object") {
+      x += getAbsoluteValue(snapPosition.x, width);
+      y += getAbsoluteValue(snapPosition.y, height);
     }
 
     if (point.value?.x !== x || point.value?.y !== y) {

From 22d0bf7ddeefdf9936cc8bb1397927c0bcab2a69 Mon Sep 17 00:00:00 2001
From: "Yuichiro Tachibana (Tsuchiya)" <t.yic.yt@gmail.com>
Date: Wed, 13 Aug 2025 00:26:16 +0900
Subject: [PATCH 03/14] Add test cases

---
 components/parse-option.test.ts | 42 +++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/components/parse-option.test.ts b/components/parse-option.test.ts
index b71e123..3bc78f8 100644
--- a/components/parse-option.test.ts
+++ b/components/parse-option.test.ts
@@ -62,6 +62,48 @@ describe("parsePosition", () => {
       ["#target@left", ["#target", "left"]],
       [".target@left", [".target", "left"]],
       ["[data-id=target]@left", ["[data-id=target]", "left"]],
+      [
+        "#target@(100,200)",
+        [
+          "#target",
+          { x: { value: 100, unit: "px" }, y: { value: 200, unit: "px" } },
+        ],
+      ],
+      [
+        ".target@(100,200)",
+        [
+          ".target",
+          { x: { value: 100, unit: "px" }, y: { value: 200, unit: "px" } },
+        ],
+      ],
+      [
+        "[data-id=target]@(10%,20%)",
+        [
+          "[data-id=target]",
+          { x: { value: 10, unit: "%" }, y: { value: 20, unit: "%" } },
+        ],
+      ],
+      [
+        "#target@(10%,20%)",
+        [
+          "#target",
+          { x: { value: 10, unit: "%" }, y: { value: 20, unit: "%" } },
+        ],
+      ],
+      [
+        ".target@(10%,20%)",
+        [
+          ".target",
+          { x: { value: 10, unit: "%" }, y: { value: 20, unit: "%" } },
+        ],
+      ],
+      [
+        "[data-id=target]@(10%,20%)",
+        [
+          "[data-id=target]",
+          { x: { value: 10, unit: "%" }, y: { value: 20, unit: "%" } },
+        ],
+      ],
     ] as const
   ).forEach(([optionString, [expectedQuery, expectedSnapPosition]]) => {
     it(`parses string with snap target CSS selector correctly: "${optionString}"`, () => {

From 7360d279ff598e3bf91e7c0c473e697a3d1dc3db Mon Sep 17 00:00:00 2001
From: "Yuichiro Tachibana (Tsuchiya)" <t.yic.yt@gmail.com>
Date: Wed, 13 Aug 2025 00:45:07 +0900
Subject: [PATCH 04/14] Update slides.md

---
 slides.md | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/slides.md b/slides.md
index b1c2eea..fb88db4 100644
--- a/slides.md
+++ b/slides.md
@@ -628,6 +628,52 @@ If no snap target or absolute position is specified, the arrow will automaticall
 
 ---
 
+# Specify the snapping point by position values
+
+<div h-40>
+    <img
+        src="https://images.unsplash.com/photo-1513407030348-c983a97b98d8?q=80&w=1920&auto=format&fit=crop"
+        data-id="snapped-image"
+        m-auto
+        max-h="100%"
+    />
+</div>
+
+<span data-id="label-tower" text-6xl absolute left-40 top-30>🗼</span>
+
+<FancyArrow
+    to="[data-id=snapped-image]@(20%,50%)"
+    from="[data-id=label-tower]"
+    arc="0.3"
+    color="red"
+/>
+
+<span data-id="label-house" text-6xl absolute right-40 top-30>🏘️</span>
+
+<FancyArrow
+    to="[data-id=snapped-image]@(100,120)"
+    from="[data-id=label-house]"
+    arc="-0.3"
+    color="purple"
+/>
+
+```html {2,8}
+<FancyArrow
+    to="[data-id=snapped-image]@(20%,50%)"
+    from="[data-id=label-tower]"
+    arc="0.3"
+    color="red"
+/>
+<FancyArrow
+    to="[data-id=snapped-image]@(100,120)"
+    from="[data-id=label-house]"
+    arc="-0.3"
+    color="purple"
+/>
+```
+
+---
+
 # Contents on the arrow
 
 <FancyArrow x1="100" y1="100" x2="200" y2="200" >

From 3f1a0defd142c10360eed2368a9bc5cdeaf0969e Mon Sep 17 00:00:00 2001
From: "Yuichiro Tachibana (Tsuchiya)" <t.yic.yt@gmail.com>
Date: Wed, 13 Aug 2025 00:47:01 +0900
Subject: [PATCH 05/14] Add changeset

---
 .changeset/clever-moments-judge.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/clever-moments-judge.md

diff --git a/.changeset/clever-moments-judge.md b/.changeset/clever-moments-judge.md
new file mode 100644
index 0000000..23b3473
--- /dev/null
+++ b/.changeset/clever-moments-judge.md
@@ -0,0 +1,5 @@
+---
+"slidev-addon-fancy-arrow": minor
+---
+
+Snapping points specified by position values

From f7296c6c1e1e3c8871fba2e4eb7ba8fb65ab9eb1 Mon Sep 17 00:00:00 2001
From: "Yuichiro Tachibana (Tsuchiya)" <t.yic.yt@gmail.com>
Date: Wed, 13 Aug 2025 00:58:38 +0900
Subject: [PATCH 06/14] Make pos1 and pos2 accept position values

---
 components/parse-option.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/parse-option.ts b/components/parse-option.ts
index ac751c5..f3989da 100644
--- a/components/parse-option.ts
+++ b/components/parse-option.ts
@@ -88,14 +88,18 @@ export function compileArrowEndpointProps(
   if (props.q) {
     return {
       query: props.q,
-      snapPosition: props.pos,
+      snapPosition: props.pos
+        ? (parsePosition(props.pos) ?? props.pos)
+        : undefined,
     };
   }
   if (props.id) {
     // Deprecated
     return {
       query: `#${props.id}`,
-      snapPosition: props.pos,
+      snapPosition: props.pos
+        ? (parsePosition(props.pos) ?? props.pos)
+        : undefined,
     };
   }
 

From e4fac9378d9557ffbab4ba3be58412a8c92955bc Mon Sep 17 00:00:00 2001
From: "Yuichiro Tachibana (Tsuchiya)" <t.yic.yt@gmail.com>
Date: Wed, 13 Aug 2025 01:13:03 +0900
Subject: [PATCH 07/14] Refactoring

---
 components/FancyArrow.vue          |  7 ++----
 components/parse-option.ts         | 35 +++++++++++++++++++++---------
 components/use-element-position.ts | 10 ---------
 3 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/components/FancyArrow.vue b/components/FancyArrow.vue
index 8352d68..812f7f5 100644
--- a/components/FancyArrow.vue
+++ b/components/FancyArrow.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, type Ref } from "vue";
-import { compileArrowEndpointProps } from "./parse-option";
-import {
-  useEndpointResolution,
-  type SnapPosition,
-} from "./use-element-position";
+import { compileArrowEndpointProps, type SnapPosition } from "./parse-option";
+import { useEndpointResolution } from "./use-element-position";
 import { useRoughArrow, type AbsolutePosition } from "./use-rough-arrow";
 
 const props = defineProps<{
diff --git a/components/parse-option.ts b/components/parse-option.ts
index f3989da..bc781d2 100644
--- a/components/parse-option.ts
+++ b/components/parse-option.ts
@@ -1,4 +1,15 @@
-import type { SnapPosition } from "./use-element-position";
+export const SNAP_POSITIONS = [
+  "center",
+  "top",
+  "bottom",
+  "left",
+  "right",
+  "topleft",
+  "topright",
+  "bottomleft",
+  "bottomright",
+] as const;
+export type SnapPosition = (typeof SNAP_POSITIONS)[number];
 
 export interface LengthPercentage {
   value: number;
@@ -34,6 +45,16 @@ function parsePosition(positionString: string): Position | undefined {
   };
 }
 
+function parseSnapPosition(
+  snapPositionString: string,
+): SnapPosition | Position | undefined {
+  if ((SNAP_POSITIONS as readonly string[]).includes(snapPositionString)) {
+    return snapPositionString as SnapPosition;
+  }
+
+  return parsePosition(snapPositionString);
+}
+
 /**
  * The `arrowEndpointShorthand` can be in the format of a CSS selector with a snap position,
  * or a position in the format "(x,y)".
@@ -56,9 +77,7 @@ export function parseArrowEndpointShorthand(
     const snapPosition = snapTargetMatch.groups?.snapPosition;
     return {
       query,
-      snapPosition: snapPosition
-        ? (parsePosition(snapPosition) ?? (snapPosition as SnapPosition))
-        : undefined,
+      snapPosition: snapPosition ? parseSnapPosition(snapPosition) : undefined,
     };
   }
 
@@ -88,18 +107,14 @@ export function compileArrowEndpointProps(
   if (props.q) {
     return {
       query: props.q,
-      snapPosition: props.pos
-        ? (parsePosition(props.pos) ?? props.pos)
-        : undefined,
+      snapPosition: props.pos ? parseSnapPosition(props.pos) : undefined,
     };
   }
   if (props.id) {
     // Deprecated
     return {
       query: `#${props.id}`,
-      snapPosition: props.pos
-        ? (parsePosition(props.pos) ?? props.pos)
-        : undefined,
+      snapPosition: props.pos ? parseSnapPosition(props.pos) : undefined,
     };
   }
 
diff --git a/components/use-element-position.ts b/components/use-element-position.ts
index e139b9e..668e7c4 100644
--- a/components/use-element-position.ts
+++ b/components/use-element-position.ts
@@ -15,16 +15,6 @@ import {
 import type { AbsolutePosition } from "./use-rough-arrow";
 import type { SnapTarget, Position, LengthPercentage } from "./parse-option";
 
-export type SnapPosition =
-  | "top"
-  | "bottom"
-  | "left"
-  | "right"
-  | "topleft"
-  | "topright"
-  | "bottomleft"
-  | "bottomright";
-
 function getAbsoluteValue(
   lengthPercentage: LengthPercentage,
   total: number,

From 6cbe7acdf5e2fc803485901f28681e3ebd64a077 Mon Sep 17 00:00:00 2001
From: "Yuichiro Tachibana (Tsuchiya)" <t.yic.yt@gmail.com>
Date: Wed, 13 Aug 2025 01:13:29 +0900
Subject: [PATCH 08/14] Refactoring

---
 components/FancyArrow.vue  |  9 ++++++---
 components/parse-option.ts | 14 +++++++-------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/components/FancyArrow.vue b/components/FancyArrow.vue
index 812f7f5..371852f 100644
--- a/components/FancyArrow.vue
+++ b/components/FancyArrow.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { ref, computed, type Ref } from "vue";
-import { compileArrowEndpointProps, type SnapPosition } from "./parse-option";
+import {
+  compileArrowEndpointProps,
+  type SnapAnchorPoint,
+} from "./parse-option";
 import { useEndpointResolution } from "./use-element-position";
 import { useRoughArrow, type AbsolutePosition } from "./use-rough-arrow";
 
@@ -11,8 +14,8 @@ const props = defineProps<{
   q2?: string;
   id1?: string; // Deprecated
   id2?: string; // Deprecated
-  pos1?: SnapPosition;
-  pos2?: SnapPosition;
+  pos1?: SnapAnchorPoint;
+  pos2?: SnapAnchorPoint;
   x1?: number | string;
   y1?: number | string;
   x2?: number | string;
diff --git a/components/parse-option.ts b/components/parse-option.ts
index bc781d2..7c8cffb 100644
--- a/components/parse-option.ts
+++ b/components/parse-option.ts
@@ -1,4 +1,4 @@
-export const SNAP_POSITIONS = [
+export const SNAP_ANCHOR_POINTS = [
   "center",
   "top",
   "bottom",
@@ -9,7 +9,7 @@ export const SNAP_POSITIONS = [
   "bottomleft",
   "bottomright",
 ] as const;
-export type SnapPosition = (typeof SNAP_POSITIONS)[number];
+export type SnapAnchorPoint = (typeof SNAP_ANCHOR_POINTS)[number];
 
 export interface LengthPercentage {
   value: number;
@@ -22,7 +22,7 @@ export interface Position {
 
 export interface SnapTarget {
   query: string;
-  snapPosition: SnapPosition | Position | undefined;
+  snapPosition: SnapAnchorPoint | Position | undefined;
 }
 
 const positionRegex =
@@ -47,9 +47,9 @@ function parsePosition(positionString: string): Position | undefined {
 
 function parseSnapPosition(
   snapPositionString: string,
-): SnapPosition | Position | undefined {
-  if ((SNAP_POSITIONS as readonly string[]).includes(snapPositionString)) {
-    return snapPositionString as SnapPosition;
+): SnapAnchorPoint | Position | undefined {
+  if ((SNAP_ANCHOR_POINTS as readonly string[]).includes(snapPositionString)) {
+    return snapPositionString as SnapAnchorPoint;
   }
 
   return parsePosition(snapPositionString);
@@ -88,7 +88,7 @@ interface ArrowEndpointProps {
   shorthand?: string;
   q?: string;
   id?: string; // Deprecated
-  pos?: SnapPosition;
+  pos?: SnapAnchorPoint;
   x?: number | string;
   y?: number | string;
 }

From 00b5f9bf31580262f2d853da9c478a1e91219115 Mon Sep 17 00:00:00 2001
From: "Yuichiro Tachibana (Tsuchiya)" <t.yic.yt@gmail.com>
Date: Wed, 13 Aug 2025 01:25:59 +0900
Subject: [PATCH 09/14] Split lengthPercentage parser and make x1, y1, x2, and
 y2 accept percentage values

---
 components/parse-option.ts | 50 ++++++++++++++++++++++++++------------
 1 file changed, 34 insertions(+), 16 deletions(-)

diff --git a/components/parse-option.ts b/components/parse-option.ts
index 7c8cffb..42537ef 100644
--- a/components/parse-option.ts
+++ b/components/parse-option.ts
@@ -25,23 +25,37 @@ export interface SnapTarget {
   snapPosition: SnapAnchorPoint | Position | undefined;
 }
 
-const positionRegex =
-  /^\(\s*(?<xValue>[+-]?\d+)(?<xUnit>%|px)?\s*,\s*(?<yValue>[+-]?\d+)(?<yUnit>%|px)?\s*\)$/;
+const ZERO_LENGTH_PERCENTAGE: LengthPercentage = { value: 0, unit: "px" };
+
+const lengthPercentageRegex = /(?<value>[+-]?\d+)(?<unit>%|px)?/;
+const positionRegex = /^\(\s*(?<x>\S+)\s*,\s*(?<y>\S+)\s*\)$/;
 const snapTargetRegex = /^(?<query>\S+?)(@(?<snapPosition>\S+?))?$/;
 
+function parseLengthPercentage(
+  lengthString: string,
+): LengthPercentage | undefined {
+  const match = lengthString.match(lengthPercentageRegex);
+  if (!match) {
+    return undefined;
+  }
+  const value = parseInt(match.groups?.value ?? "0", 10);
+  const unit = (match.groups?.unit ?? "px") as "px" | "%";
+  return { value, unit };
+}
+
 function parsePosition(positionString: string): Position | undefined {
   const positionMatch = positionString.match(positionRegex);
   if (!positionMatch) {
     return undefined;
   }
 
-  const xValue = parseInt(positionMatch.groups?.xValue ?? "0", 10);
-  const xUnit = (positionMatch.groups?.xUnit ?? "px") as "px" | "%";
-  const yValue = parseInt(positionMatch.groups?.yValue ?? "0", 10);
-  const yUnit = (positionMatch.groups?.yUnit ?? "px") as "px" | "%";
+  const x =
+    parseLengthPercentage(positionMatch.groups!.x) ?? ZERO_LENGTH_PERCENTAGE;
+  const y =
+    parseLengthPercentage(positionMatch.groups!.y) ?? ZERO_LENGTH_PERCENTAGE;
   return {
-    x: { value: xValue, unit: xUnit },
-    y: { value: yValue, unit: yUnit },
+    x,
+    y,
   };
 }
 
@@ -120,14 +134,18 @@ export function compileArrowEndpointProps(
 
   if (props.x != undefined || props.y != undefined) {
     return {
-      x: {
-        value: Number(props.x ?? 0),
-        unit: "px",
-      },
-      y: {
-        value: Number(props.y ?? 0),
-        unit: "px",
-      },
+      x:
+        typeof props.x === "number"
+          ? { value: props.x, unit: "px" }
+          : typeof props.x === "string"
+            ? (parseLengthPercentage(props.x) ?? ZERO_LENGTH_PERCENTAGE)
+            : ZERO_LENGTH_PERCENTAGE,
+      y:
+        typeof props.y === "number"
+          ? { value: props.y, unit: "px" }
+          : typeof props.y === "string"
+            ? (parseLengthPercentage(props.y) ?? ZERO_LENGTH_PERCENTAGE)
+            : ZERO_LENGTH_PERCENTAGE,
     };
   }
 

From 769baf166fa85c6c2f6d59749262f7035a244b4a Mon Sep 17 00:00:00 2001
From: "Yuichiro Tachibana (Tsuchiya)" <t.yic.yt@gmail.com>
Date: Wed, 13 Aug 2025 01:30:07 +0900
Subject: [PATCH 10/14] Update changeset

---
 .changeset/clever-moments-judge.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/clever-moments-judge.md b/.changeset/clever-moments-judge.md
index 23b3473..aadabfa 100644
--- a/.changeset/clever-moments-judge.md
+++ b/.changeset/clever-moments-judge.md
@@ -2,4 +2,4 @@
 "slidev-addon-fancy-arrow": minor
 ---
 
-Snapping points specified by position values
+Arrow head positions and snapping points specified by absolute or percentage values

From 8a745485974dee40e25f5a0f8494c60a8992d7fd Mon Sep 17 00:00:00 2001
From: "Yuichiro Tachibana (Tsuchiya)" <t.yic.yt@gmail.com>
Date: Wed, 13 Aug 2025 01:59:03 +0900
Subject: [PATCH 11/14] Use Set instead of Array for faster search

---
 components/parse-option.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/parse-option.ts b/components/parse-option.ts
index 42537ef..fddceaf 100644
--- a/components/parse-option.ts
+++ b/components/parse-option.ts
@@ -1,4 +1,4 @@
-export const SNAP_ANCHOR_POINTS = [
+const SNAP_ANCHOR_POINTS_LIST = [
   "center",
   "top",
   "bottom",
@@ -9,7 +9,8 @@ export const SNAP_ANCHOR_POINTS = [
   "bottomleft",
   "bottomright",
 ] as const;
-export type SnapAnchorPoint = (typeof SNAP_ANCHOR_POINTS)[number];
+export const SNAP_ANCHOR_POINTS = new Set(SNAP_ANCHOR_POINTS_LIST);
+export type SnapAnchorPoint = (typeof SNAP_ANCHOR_POINTS_LIST)[number];
 
 export interface LengthPercentage {
   value: number;
@@ -62,7 +63,7 @@ function parsePosition(positionString: string): Position | undefined {
 function parseSnapPosition(
   snapPositionString: string,
 ): SnapAnchorPoint | Position | undefined {
-  if ((SNAP_ANCHOR_POINTS as readonly string[]).includes(snapPositionString)) {
+  if ((SNAP_ANCHOR_POINTS as Set<string>).has(snapPositionString)) {
     return snapPositionString as SnapAnchorPoint;
   }
 

From e1efb15617987d6b69b82d09cd8e898cb0766d08 Mon Sep 17 00:00:00 2001
From: "Yuichiro Tachibana (Tsuchiya)" <t.yic.yt@gmail.com>
Date: Wed, 13 Aug 2025 02:00:12 +0900
Subject: [PATCH 12/14] Update components/parse-option.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 components/parse-option.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/parse-option.ts b/components/parse-option.ts
index fddceaf..819e4b3 100644
--- a/components/parse-option.ts
+++ b/components/parse-option.ts
@@ -53,7 +53,9 @@ function parsePosition(positionString: string): Position | undefined {
   const x =
     parseLengthPercentage(positionMatch.groups!.x) ?? ZERO_LENGTH_PERCENTAGE;
   const y =
-    parseLengthPercentage(positionMatch.groups!.y) ?? ZERO_LENGTH_PERCENTAGE;
+    parseLengthPercentage(positionMatch.groups?.x ?? "") ?? ZERO_LENGTH_PERCENTAGE;
+  const y =
+    parseLengthPercentage(positionMatch.groups?.y ?? "") ?? ZERO_LENGTH_PERCENTAGE;
   return {
     x,
     y,

From b66c8893332024a032bb9b12cd4df3299306565e Mon Sep 17 00:00:00 2001
From: "Yuichiro Tachibana (Tsuchiya)" <t.yic.yt@gmail.com>
Date: Wed, 13 Aug 2025 02:00:28 +0900
Subject: [PATCH 13/14] Update components/parse-option.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 components/parse-option.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/parse-option.ts b/components/parse-option.ts
index 819e4b3..aa58d21 100644
--- a/components/parse-option.ts
+++ b/components/parse-option.ts
@@ -90,7 +90,10 @@ export function parseArrowEndpointShorthand(
 
   const snapTargetMatch = arrowEndpointShorthand.match(snapTargetRegex);
   if (snapTargetMatch) {
-    const query = snapTargetMatch.groups!.query;
+    const query = snapTargetMatch.groups?.query;
+    if (!query) {
+      throw new Error(`Invalid arrow endpoint format: missing query group in "${arrowEndpointShorthand}"`);
+    }
     const snapPosition = snapTargetMatch.groups?.snapPosition;
     return {
       query,

From b3e9d0e3d4dc2b74c2d404ebf1813543ba34ed0a Mon Sep 17 00:00:00 2001
From: "Yuichiro Tachibana (Tsuchiya)" <t.yic.yt@gmail.com>
Date: Wed, 13 Aug 2025 02:03:44 +0900
Subject: [PATCH 14/14] Fix Copilot's weird mistake

---
 components/parse-option.ts | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/components/parse-option.ts b/components/parse-option.ts
index aa58d21..edc5144 100644
--- a/components/parse-option.ts
+++ b/components/parse-option.ts
@@ -51,11 +51,11 @@ function parsePosition(positionString: string): Position | undefined {
   }
 
   const x =
-    parseLengthPercentage(positionMatch.groups!.x) ?? ZERO_LENGTH_PERCENTAGE;
+    parseLengthPercentage(positionMatch.groups?.x ?? "") ??
+    ZERO_LENGTH_PERCENTAGE;
   const y =
-    parseLengthPercentage(positionMatch.groups?.x ?? "") ?? ZERO_LENGTH_PERCENTAGE;
-  const y =
-    parseLengthPercentage(positionMatch.groups?.y ?? "") ?? ZERO_LENGTH_PERCENTAGE;
+    parseLengthPercentage(positionMatch.groups?.y ?? "") ??
+    ZERO_LENGTH_PERCENTAGE;
   return {
     x,
     y,
@@ -92,7 +92,9 @@ export function parseArrowEndpointShorthand(
   if (snapTargetMatch) {
     const query = snapTargetMatch.groups?.query;
     if (!query) {
-      throw new Error(`Invalid arrow endpoint format: missing query group in "${arrowEndpointShorthand}"`);
+      throw new Error(
+        `Invalid arrow endpoint format: missing query group in "${arrowEndpointShorthand}"`,
+      );
     }
     const snapPosition = snapTargetMatch.groups?.snapPosition;
     return {