@egjs/flicking 4.13.2-beta.0 → 4.14.0

package/dist/flicking.cjs.js

@@ -4,13 +4,14 @@ name: @egjs/flicking
 license: MIT
 author: NAVER Corp.
 repository: https://github.com/naver/egjs-flicking
-version: 4.13.2-beta.0
+version: 4.14.0
 */
 'use strict';
 
 var Component = require('@egjs/component');
 var Axes = require('@egjs/axes');
 var ImReady = require('@egjs/imready');
+var core = require('@cfcs/core');
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -669,11 +670,14 @@ var findIndex = function (array, checker) {
   }
   return -1;
 };
-var getProgress = function (pos, prev, next) {
+var getProgress$1 = function (pos, prev, next) {
   return (pos - prev) / (next - prev);
 };
 // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
 var getStyle = function (el) {
+  if (!el) {
+    return {};
+  }
   return window.getComputedStyle(el) || el.currentStyle;
 };
 var setSize = function (el, _a) {
@@ -946,13 +950,59 @@ var Viewport = /*#__PURE__*/function () {
   return Viewport;
 }();
 
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+/**
+ * A component that detects size change and trigger resize method when the autoResize option is used
+ * @ko autoResize 옵션을 사용할 때 크기 변화를 감지하고 Flicking의 resize를 호출하는 컴포넌트
+ */
 var AutoResizer = /*#__PURE__*/function () {
   function AutoResizer(flicking) {
     var _this = this;
-    this._onResize = function () {
+    this._onResizeWrapper = function () {
+      _this._onResize([]);
+    };
+    this._onResize = function (entries) {
       var flicking = _this._flicking;
       var resizeDebounce = flicking.resizeDebounce;
       var maxResizeDebounce = flicking.maxResizeDebounce;
+      var resizedViewportElement = flicking.element;
+      // 현재 구현에서 리사이즈 옵저빙 대상은 패널과 뷰포트 2개만 존재.
+      // 아래는 뷰포트만 변경되었을 때 동작해야하는 로직이 있으므로 아래와 같이 조건문을 건다.
+      // 패널 쪽에서는 리사이즈 감지에 resizeObserver를 사용하지 않는 경우가 없으므로 이 조건은 곧 뷰포트만 리사이즈가 된 경우를 의미한다.
+      var isResizedViewportOnly = entries.find(function (e) {
+        return e.target === flicking.element;
+      }) && entries.length === 1;
+      // 참고: resizeObserver를 사용하지 않은 경우에는 entries.length가 0으로 오는데 이 경우에는 그냥 항상 리사이즈가 진행되도록 한다.
+      //   (vw, vh 등을 사용하는 경우 이상 동작이 발생할 여지가 있기 때문이다)
+      if (isResizedViewportOnly) {
+        // resize 이벤트가 발생했으나 이전과 width, height의 변화가 없다면 이후 로직을 진행하지 않는다.
+        var beforeSize = {
+          width: flicking.viewport.width,
+          height: flicking.viewport.height
+        };
+        var afterSize = {
+          width: getElementSize({
+            el: resizedViewportElement,
+            horizontal: true,
+            useFractionalSize: _this._flicking.useFractionalSize,
+            useOffset: false,
+            style: getStyle(resizedViewportElement)
+          }),
+          height: getElementSize({
+            el: resizedViewportElement,
+            horizontal: false,
+            useFractionalSize: _this._flicking.useFractionalSize,
+            useOffset: false,
+            style: getStyle(resizedViewportElement)
+          })
+        };
+        if (beforeSize.height === afterSize.height && beforeSize.width === afterSize.width) {
+          return;
+        }
+      }
       if (resizeDebounce <= 0) {
         void flicking.resize();
       } else {
@@ -978,12 +1028,12 @@ var AutoResizer = /*#__PURE__*/function () {
     // eslint-disable-next-line @typescript-eslint/member-ordering
     this._skipFirstResize = function () {
       var isFirstResize = true;
-      return function () {
+      return function (entries) {
         if (isFirstResize) {
           isFirstResize = false;
           return;
         }
-        _this._onResize();
+        _this._onResize(entries);
       };
     }();
     this._flicking = flicking;
@@ -1009,14 +1059,46 @@ var AutoResizer = /*#__PURE__*/function () {
     if (flicking.useResizeObserver && !!window.ResizeObserver) {
       var viewportSizeNot0 = viewport.width !== 0 || viewport.height !== 0;
       var resizeObserver = viewportSizeNot0 ? new ResizeObserver(this._skipFirstResize) : new ResizeObserver(this._onResize);
-      resizeObserver.observe(flicking.viewport.element);
       this._resizeObserver = resizeObserver;
+      this.observe(flicking.viewport.element);
+      if (flicking.observePanelResize) {
+        this.observePanels();
+      }
     } else {
-      window.addEventListener("resize", this._onResize);
+      window.addEventListener("resize", this._onResizeWrapper);
     }
     this._enabled = true;
     return this;
   };
+  __proto.observePanels = function () {
+    var _this = this;
+    this._flicking.panels.forEach(function (panel) {
+      _this.observe(panel.element);
+    });
+    return this;
+  };
+  __proto.unobservePanels = function () {
+    var _this = this;
+    this._flicking.panels.forEach(function (panel) {
+      _this.unobserve(panel.element);
+    });
+    return this;
+  };
+  __proto.observe = function (element) {
+    var resizeObserver = this._resizeObserver;
+    if (!resizeObserver) return this;
+    resizeObserver.observe(element);
+    return this;
+  };
+  __proto.unobserve = function (element) {
+    var resizeObserver = this._resizeObserver;
+    if (!resizeObserver) return this;
+    resizeObserver.unobserve(element);
+    if (this._flicking.observePanelResize) {
+      this.unobservePanels();
+    }
+    return this;
+  };
   __proto.disable = function () {
     if (!this._enabled) return this;
     var resizeObserver = this._resizeObserver;
@@ -1024,7 +1106,7 @@ var AutoResizer = /*#__PURE__*/function () {
       resizeObserver.disconnect();
       this._resizeObserver = null;
     } else {
-      window.removeEventListener("resize", this._onResize);
+      window.removeEventListener("resize", this._onResizeWrapper);
     }
     this._enabled = false;
     return this;
@@ -2915,11 +2997,7 @@ var SnapControl = /*#__PURE__*/function (_super) {
     if (snapDelta >= snapThreshold && snapDelta > 0) {
       // Move to anchor at position
       targetAnchor = this._findSnappedAnchor(position, anchorAtCamera);
-      // const targetPanel = targetAnchor.panel;
-      // const nextPosition = this._getPosition(targetPanel, DIRECTION.NEXT);
-      // const prevPosition = this._getPosition(targetPanel, DIRECTION.PREV);
-      // targetPosition = Math.abs(camera.position - nextPosition) < Math.abs(camera.position - prevPosition) ? nextPosition : prevPosition;
-    } else if (absPosDelta >= flicking.threshold && absPosDelta > 0 && anchorAtCamera === activeAnchor) {
+    } else if (absPosDelta >= flicking.threshold && absPosDelta > 0) {
       // Move to the adjacent panel
       targetAnchor = this._findAdjacentAnchor(position, posDelta, anchorAtCamera);
     } else {
@@ -2947,7 +3025,6 @@ var SnapControl = /*#__PURE__*/function (_super) {
     if (!anchorAtCamera || !anchorAtPosition) {
       throw new FlickingError(MESSAGE.POSITION_NOT_REACHABLE(position), CODE.POSITION_NOT_REACHABLE);
     }
-    //    console.log("_findSnappedAnchor", anchorAtPosition);
     if (!isFinite(count)) {
       return anchorAtPosition;
     }
@@ -3368,7 +3445,10 @@ var CameraMode = /*#__PURE__*/function () {
   };
   __proto.findAnchorIncludePosition = function (position) {
     var anchors = this._flicking.camera.anchorPoints;
-    return anchors.reduce(function (nearest, anchor) {
+    var anchorsIncludingPosition = anchors.filter(function (anchor) {
+      return anchor.panel.includePosition(position, true);
+    });
+    return anchorsIncludingPosition.reduce(function (nearest, anchor) {
       if (!nearest) return anchor;
       return Math.abs(nearest.position - position) < Math.abs(anchor.position - position) ? nearest : anchor;
     }, null);
@@ -4033,7 +4113,7 @@ var Camera = /*#__PURE__*/function () {
         if (prevPosition > panelPos) {
           prevPosition -= rangeDiff;
         }
-        return nearestPanel.index - 1 + getProgress(position, prevPosition, panelPos);
+        return nearestPanel.index - 1 + getProgress$1(position, prevPosition, panelPos);
       } else {
         var nextPanel = nearestPanel.next();
         var nextPosition = nextPanel ? nextPanel.position + nextPanel.offset : nextRange + bounceSize[1];
@@ -4041,7 +4121,7 @@ var Camera = /*#__PURE__*/function () {
         if (nextPosition < panelPos) {
           nextPosition += rangeDiff;
         }
-        return nearestPanel.index + getProgress(position, panelPos, nextPosition);
+        return nearestPanel.index + getProgress$1(position, panelPos, nextPosition);
       }
     },
     enumerable: false,
@@ -4824,6 +4904,18 @@ var Renderer = /*#__PURE__*/function () {
     var activePanel = control.activePanel;
     // Update camera & control
     this._updateCameraAndControl();
+    if (flicking.autoResize && flicking.useResizeObserver) {
+      panelsAdded.forEach(function (panel) {
+        if (panel.element) {
+          flicking.autoResizer.observe(panel.element);
+        }
+      });
+      panelsRemoved.forEach(function (panel) {
+        if (panel.element) {
+          flicking.autoResizer.unobserve(panel.element);
+        }
+      });
+    }
     void this.render();
     if (!flicking.animating) {
       if (!activePanel || activePanel.removed) {
@@ -5372,10 +5464,10 @@ var Panel = /*#__PURE__*/function () {
       }
       if (camPos < position) {
         var disappearPosNext = position + (camera.size - camera.alignPosition) + alignPosition;
-        return -getProgress(camPos, position, disappearPosNext);
+        return -getProgress$1(camPos, position, disappearPosNext);
       } else {
         var disappearPosPrev = position - (camera.alignPosition + this._size - alignPosition);
-        return 1 - getProgress(camPos, disappearPosPrev, position);
+        return 1 - getProgress$1(camPos, disappearPosPrev, position);
       }
     },
     enumerable: false,
@@ -6101,18 +6193,23 @@ var Flicking = /*#__PURE__*/function (_super) {
       useResizeObserver = _9 === void 0 ? true : _9,
       _10 = _b.resizeDebounce,
       resizeDebounce = _10 === void 0 ? 0 : _10,
-      _11 = _b.maxResizeDebounce,
-      maxResizeDebounce = _11 === void 0 ? 100 : _11,
-      _12 = _b.useFractionalSize,
-      useFractionalSize = _12 === void 0 ? false : _12,
-      _13 = _b.externalRenderer,
-      externalRenderer = _13 === void 0 ? null : _13,
-      _14 = _b.renderExternal,
-      renderExternal = _14 === void 0 ? null : _14;
+      _11 = _b.observePanelResize,
+      observePanelResize = _11 === void 0 ? false : _11,
+      _12 = _b.maxResizeDebounce,
+      maxResizeDebounce = _12 === void 0 ? 100 : _12,
+      _13 = _b.useFractionalSize,
+      useFractionalSize = _13 === void 0 ? false : _13,
+      _14 = _b.externalRenderer,
+      externalRenderer = _14 === void 0 ? null : _14,
+      _15 = _b.renderExternal,
+      renderExternal = _15 === void 0 ? null : _15,
+      _16 = _b.optimizeSizeUpdate,
+      optimizeSizeUpdate = _16 === void 0 ? false : _16;
     var _this = _super.call(this) || this;
     // Internal states
     _this._initialized = false;
     _this._plugins = [];
+    _this._isResizing = false;
     // Bind options
     _this._align = align;
     _this._defaultIndex = defaultIndex;
@@ -6148,9 +6245,11 @@ var Flicking = /*#__PURE__*/function (_super) {
     _this._useResizeObserver = useResizeObserver;
     _this._resizeDebounce = resizeDebounce;
     _this._maxResizeDebounce = maxResizeDebounce;
+    _this._observePanelResize = observePanelResize;
     _this._useFractionalSize = useFractionalSize;
     _this._externalRenderer = externalRenderer;
     _this._renderExternal = renderExternal;
+    _this._optimizeSizeUpdate = optimizeSizeUpdate;
     // Create core components
     _this._viewport = new Viewport(_this, getElement(root));
     _this._autoResizer = new AutoResizer(_this);
@@ -6231,6 +6330,19 @@ var Flicking = /*#__PURE__*/function (_super) {
     enumerable: false,
     configurable: true
   });
+  Object.defineProperty(__proto, "autoResizer", {
+    /**
+     * {@link AutoResizer} instance of the Flicking
+     * @ko 현재 Flicking에 활성화된 {@link AutoResizer} 인스턴스
+     * @internal
+     * @readonly
+     */
+    get: function () {
+      return this._autoResizer;
+    },
+    enumerable: false,
+    configurable: true
+  });
   Object.defineProperty(__proto, "initialized", {
     // Internal States
     /**
@@ -7104,6 +7216,9 @@ var Flicking = /*#__PURE__*/function (_super) {
     // OTHERS
     set: function (val) {
       this._autoResize = val;
+      if (!this._initialized) {
+        return;
+      }
       if (val) {
         this._autoResizer.enable();
       } else {
@@ -7126,13 +7241,38 @@ var Flicking = /*#__PURE__*/function (_super) {
     },
     set: function (val) {
       this._useResizeObserver = val;
-      if (this._autoResize) {
+      if (this._initialized && this._autoResize) {
         this._autoResizer.enable();
       }
     },
     enumerable: false,
     configurable: true
   });
+  Object.defineProperty(__proto, "observePanelResize", {
+    /**
+     * Whether to use {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver} to observe the size of the panel element
+     * This is only available when `useResizeObserver` is enabled.
+     * This option garantees that the resize event is triggered when the size of the panel element is changed.
+     * @ko 이 옵션을 활성화할 경우, {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver}를 사용하여 패널 엘리먼트의 크기를 추적합니다.
+     * 이 옵션은 `useResizeObserver` 옵션이 활성화된 경우에만 사용할 수 있습니다.
+     * 이 옵션은 패널 엘리먼트의 크기가 변경될 경우 resize 이벤트가 발생하도록 보장합니다.
+     */
+    get: function () {
+      return this._observePanelResize;
+    },
+    set: function (val) {
+      this._observePanelResize = val;
+      if (this._initialized && this._autoResize) {
+        if (val) {
+          this._autoResizer.observePanels();
+        } else {
+          this._autoResizer.unobservePanels();
+        }
+      }
+    },
+    enumerable: false,
+    configurable: true
+  });
   Object.defineProperty(__proto, "resizeDebounce", {
     /**
      * Delays size recalculation from `autoResize` by the given time in milisecond.
@@ -7214,6 +7354,30 @@ var Flicking = /*#__PURE__*/function (_super) {
     enumerable: false,
     configurable: true
   });
+  Object.defineProperty(__proto, "optimizeSizeUpdate", {
+    /**
+     * This option works only when autoResize is set to true.
+     * By default, autoResize listens to changes in both the viewport's width and height, updating all panel sizes accordingly.
+     * When optimizeSizeUpdate is enabled, the update behavior is optimized based on the flicking direction:
+     * If direction is "horizontal", only changes in width will trigger panel size updates.
+     * If direction is "vertical", only changes in height will do so.
+     * This option is useful when panel heights vary and unwanted flickering occurs due to frequent size recalculations during flicking. Enabling optimizeSizeUpdate prevents unnecessary updates and helps maintain visual stability.
+     * @ko optimizeSizeUpdate는 autoResize가 true일 때만 동작합니다.
+     * 기본적으로 autoResize는 뷰포트의 width와 height 변화를 모두 감지하여 패널들의 사이즈를 업데이트합니다.
+     * 이 옵션을 활성화하면 플리킹 방향에 따라 필요한 차원(horizontal → width, vertical → height)에 대해서만 사이즈를 업데이트합니다.
+     * 내부 패널의 높이가 서로 다를 때, 플리킹 중 과도한 리사이징으로 인한 깜빡임 현상을 줄이는 데 유용합니다.
+     * @type {boolean}
+     * @default false
+     */
+    get: function () {
+      return this._optimizeSizeUpdate;
+    },
+    set: function (val) {
+      this._optimizeSizeUpdate = val;
+    },
+    enumerable: false,
+    configurable: true
+  });
   /**
    * Initialize Flicking and move to the default index
    * This is automatically called on Flicking's constructor when `autoInit` is true(default)
@@ -7652,6 +7816,8 @@ var Flicking = /*#__PURE__*/function (_super) {
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
+            if (this._isResizing) return [2 /*return*/];
+            this._isResizing = true;
             viewport = this._viewport;
             renderer = this._renderer;
             camera = this._camera;
@@ -7666,9 +7832,20 @@ var Flicking = /*#__PURE__*/function (_super) {
               element: viewport.element
             }));
             viewport.resize();
+            if (!this._optimizeSizeUpdate) return [3 /*break*/, 3];
+            if (!(this.horizontal && viewport.width !== prevWidth || !this.horizontal && viewport.height !== prevHeight)) return [3 /*break*/, 2];
             return [4 /*yield*/, renderer.forceRenderAllPanels()];
           case 1:
+            _a.sent();
+            _a.label = 2;
+          case 2:
+            return [3 /*break*/, 5];
+          case 3:
+            return [4 /*yield*/, renderer.forceRenderAllPanels()];
+          case 4:
             _a.sent(); // Render all panel elements, to update sizes
+            _a.label = 5;
+          case 5:
             if (!this._initialized) {
               return [2 /*return*/];
             }
@@ -7681,7 +7858,7 @@ var Flicking = /*#__PURE__*/function (_super) {
             camera.updatePanelOrder();
             camera.updateOffset();
             return [4 /*yield*/, renderer.render()];
-          case 2:
+          case 6:
             _a.sent();
             if (!this._initialized) {
               return [2 /*return*/];
@@ -7704,6 +7881,7 @@ var Flicking = /*#__PURE__*/function (_super) {
               sizeChanged: sizeChanged,
               element: viewport.element
             }));
+            this._isResizing = false;
             return [2 /*return*/];
         }
       });
@@ -7923,7 +8101,7 @@ var Flicking = /*#__PURE__*/function (_super) {
    * Flicking.VERSION;  // ex) 4.0.0
    * ```
    */
-  Flicking.VERSION = "4.13.2-beta.0";
+  Flicking.VERSION = "4.14.0";
   return Flicking;
 }(Component);
 
@@ -8479,6 +8657,190 @@ var parseAlign = function (alignVal) {
   }
 };
 
+// Check if Flicking has reached the first panel
+var getIsReachStart = function (flicking) {
+  return !flicking.circular && flicking.index === 0;
+};
+// Check if Flicking has reached the last panel
+var getIsReachEnd = function (flicking) {
+  return !flicking.circular && flicking.index === flicking.panelCount - 1;
+};
+// Get the total number of panels
+var getTotalPanelCount = function (flicking) {
+  return flicking.panelCount;
+};
+// Get the current active panel index
+var getCurrentPanelIndex = function (flicking) {
+  return flicking.index;
+};
+// Calculate the overall scroll progress percentage based on the current camera position
+var getProgress = function (flicking) {
+  var cam = flicking.camera;
+  var progressRatio = (cam.position - cam.range.min) / (cam.range.max - cam.range.min);
+  var percent = Math.min(Math.max(progressRatio, 0), 1) * 100;
+  return percent;
+};
+// Calculate the progress between panels including decimal values
+var getIndexProgress = function (flicking) {
+  var cam = flicking.camera;
+  var anchorPoints = cam.anchorPoints;
+  var length = anchorPoints.length;
+  var cameraPosition = cam.position;
+  var isCircular = flicking.circularEnabled;
+  var indexProgress = 0;
+  var _a = cam.range,
+    min = _a.min,
+    max = _a.max;
+  var firstAnchorPoint = anchorPoints[0];
+  var lastAnchorPoint = anchorPoints[length - 1];
+  var distanceLastToFirst = max - lastAnchorPoint.position + (firstAnchorPoint.position - min);
+  anchorPoints.some(function (anchorPoint, index) {
+    var anchorPosition = anchorPoint.position;
+    var nextAnchorPoint = anchorPoints[index + 1];
+    if (index === 0 && cameraPosition <= anchorPosition) {
+      if (isCircular) {
+        indexProgress = (cameraPosition - anchorPosition) / distanceLastToFirst;
+      } else {
+        indexProgress = (cameraPosition - anchorPosition) / anchorPoint.panel.size;
+      }
+    } else if (index === length - 1 && cameraPosition >= anchorPosition) {
+      if (isCircular) {
+        indexProgress = index + (cameraPosition - anchorPosition) / distanceLastToFirst;
+      } else {
+        indexProgress = index + (cameraPosition - anchorPosition) / anchorPoint.panel.size;
+      }
+    } else if (nextAnchorPoint && anchorPosition <= cameraPosition && cameraPosition <= nextAnchorPoint.position) {
+      indexProgress = index + (cameraPosition - anchorPosition) / (nextAnchorPoint.position - anchorPosition);
+    } else {
+      return false;
+    }
+    return true;
+  });
+  return indexProgress;
+};
+/**
+ * Internal reactive API adapter for Flicking that manages state and event listeners
+ * This adapter is used internally by framework-specific packages (react-flicking, vue-flicking, etc.)
+ * to provide reactive API support. Users rarely need to use this directly.
+ * @ko Flicking의 상태와 이벤트 리스너를 관리하는 내부 반응형 API 어댑터
+ * 이 어댑터는 react-flicking, vue-flicking 등의 프레임워크별 패키지에서 내부적으로 사용되어
+ * 반응형 API 지원을 제공합니다. 사용자가 직접 사용할 일은 거의 없습니다.
+ * @param onInit - Callback when reactive object is initialized<ko>반응형 객체가 초기화될 때 호출되는 콜백</ko>
+ * @param onDestroy - Callback when reactive object is destroyed<ko>반응형 객체가 파괴될 때 호출되는 콜백</ko>
+ * @param setMethods - Function to set available methods<ko>사용 가능한 메서드를 설정하는 함수</ko>
+ * @returns Reactive object with Flicking state and methods<ko>Flicking 상태와 메서드를 포함한 반응형 객체</ko>
+ */
+var flickingReactiveAPIAdapter = function (_a) {
+  var _b, _c, _d;
+  var onInit = _a.onInit,
+    onDestroy = _a.onDestroy,
+    setMethods = _a.setMethods,
+    getProps = _a.getProps;
+  var flicking;
+  // Move to a specific panel index
+  var moveTo = function (i) {
+    if (flicking == null) {
+      return Promise.reject(new Error("Flicking instance is not available"));
+    }
+    if (flicking === null || flicking === void 0 ? void 0 : flicking.animating) {
+      return Promise.resolve();
+    }
+    return flicking.moveTo(i);
+  };
+  setMethods(["moveTo"]);
+  var options = getProps().options;
+  // options를 고려하지 않고 초기값을 설정해도 동작에는 아무런 문제가 없으나, 이 시점의 초기값과 컴포넌트 init 단계에서의 초기값이 다르면 화면 리렌더링이 발생할 수 있으므로
+  // 이렇게 미리 옵션을 통해서 예측할 수 있는 부분들은 맞춰둔다.
+  var reactiveObj = core.reactive({
+    isReachStart: (options === null || options === void 0 ? void 0 : options.defaultIndex) ? (options === null || options === void 0 ? void 0 : options.defaultIndex) === 0 : true,
+    isReachEnd: (options === null || options === void 0 ? void 0 : options.totalPanelCount) && (options === null || options === void 0 ? void 0 : options.defaultIndex) ? options.defaultIndex === options.totalPanelCount - 1 : false,
+    totalPanelCount: (_b = options === null || options === void 0 ? void 0 : options.totalPanelCount) !== null && _b !== void 0 ? _b : 0,
+    currentPanelIndex: (_c = options === null || options === void 0 ? void 0 : options.defaultIndex) !== null && _c !== void 0 ? _c : 0,
+    progress: 0,
+    indexProgress: (_d = options === null || options === void 0 ? void 0 : options.defaultIndex) !== null && _d !== void 0 ? _d : 0,
+    moveTo: moveTo
+  });
+  // Update state when panel changes
+  var onChanged = function () {
+    if (flicking === undefined) return;
+    reactiveObj.isReachStart = getIsReachStart(flicking);
+    reactiveObj.isReachEnd = getIsReachEnd(flicking);
+    reactiveObj.currentPanelIndex = getCurrentPanelIndex(flicking);
+  };
+  // Update state when panel count changes
+  var onPanelChange = function () {
+    if (flicking === undefined) return;
+    onChanged();
+    reactiveObj.totalPanelCount = getTotalPanelCount(flicking);
+  };
+  // Update progress when camera moves
+  var onMove = function () {
+    if (flicking === undefined) return;
+    reactiveObj.progress = getProgress(flicking);
+    reactiveObj.indexProgress = getIndexProgress(flicking);
+  };
+  onInit(function (inst, data) {
+    flicking = data.flicking;
+    if (flicking === undefined) return;
+    reactiveObj.isReachStart = getIsReachStart(flicking);
+    reactiveObj.isReachEnd = getIsReachEnd(flicking);
+    reactiveObj.currentPanelIndex = getCurrentPanelIndex(flicking);
+    reactiveObj.progress = getProgress(flicking);
+    reactiveObj.totalPanelCount = getTotalPanelCount(flicking);
+    flicking === null || flicking === void 0 ? void 0 : flicking.on("changed", onChanged);
+    flicking === null || flicking === void 0 ? void 0 : flicking.on("panelChange", onPanelChange);
+    flicking === null || flicking === void 0 ? void 0 : flicking.on("move", onMove);
+  });
+  onDestroy(function () {
+    flicking === null || flicking === void 0 ? void 0 : flicking.off("changed", onChanged);
+    flicking === null || flicking === void 0 ? void 0 : flicking.off("panelChange", onPanelChange);
+    flicking === null || flicking === void 0 ? void 0 : flicking.off("move", onMove);
+  });
+  return reactiveObj;
+};
+/**
+ * Connect Flicking instance to reactive API
+ * @ko Flicking 인스턴스를 반응형 API에 연결합니다
+ * @param {Flicking} flicking - Flicking instance to connect<ko>연결할 Flicking 인스턴스</ko>
+ * @param {FlickingReactiveAPIOptions} [options] - Flicking options<ko>Flicking 옵션</ko>
+ * @returns {FlickingReactiveObject} Reactive object with Flicking state and methods<ko>Flicking 상태와 메서드를 포함한 반응형 객체</ko>
+ * @example
+ * ```js
+ * import Flicking, { connectFlickingReactiveAPI } from "@egjs/flicking";
+ *
+ * const flicking = new Flicking("#el");
+ * const reactiveObj = connectFlickingReactiveAPI(flicking);
+ *
+ * // Access reactive state
+ * console.log("Current panel:", reactiveObj.currentPanelIndex);
+ * console.log("Progress:", reactiveObj.progress + "%");
+ * console.log("Is at start:", reactiveObj.isReachStart);
+ * console.log("Is at end:", reactiveObj.isReachEnd);
+ * console.log("Total panels:", reactiveObj.totalPanelCount);
+ * console.log("Index progress:", reactiveObj.indexProgress);
+ *
+ * // Subscribe to state changes
+ * reactiveObj.subscribe("currentPanelIndex", (nextValue) => {
+ *   console.log("Panel changed to:", nextValue);
+ * });
+ *
+ * // Use reactive methods
+ * reactiveObj.moveTo(2); // Move to third panel
+ * ```
+ */
+var connectFlickingReactiveAPI = function (flicking, options) {
+  var obj = core.adaptReactive(flickingReactiveAPIAdapter, function () {
+    return {
+      flicking: flicking,
+      options: options
+    };
+  });
+  obj.mounted();
+  var instance = obj.instance();
+  obj.init();
+  return instance;
+};
+
 /*
  * Copyright (c) 2015 NAVER Corp.
  * egjs projects are licensed under the MIT license
@@ -8552,7 +8914,7 @@ var modules = {
     find: find,
     findRight: findRight,
     findIndex: findIndex,
-    getProgress: getProgress,
+    getProgress: getProgress$1,
     getStyle: getStyle,
     setSize: setSize,
     isBetween: isBetween,
@@ -8561,7 +8923,9 @@ var modules = {
     getElementSize: getElementSize,
     setPrototypeOf: setPrototypeOf,
     camelize: camelize,
-    getDataAttributes: getDataAttributes
+    getDataAttributes: getDataAttributes,
+    flickingReactiveAPIAdapter: flickingReactiveAPIAdapter,
+    connectFlickingReactiveAPI: connectFlickingReactiveAPI
 };
 
 /*
@@ -8618,10 +8982,12 @@ exports.checkExistence = checkExistence;
 exports.circulateIndex = circulateIndex;
 exports.circulatePosition = circulatePosition;
 exports.clamp = clamp;
+exports.connectFlickingReactiveAPI = connectFlickingReactiveAPI;
 exports["default"] = Flicking;
 exports.find = find;
 exports.findIndex = findIndex;
 exports.findRight = findRight;
+exports.flickingReactiveAPIAdapter = flickingReactiveAPIAdapter;
 exports.getDataAttributes = getDataAttributes;
 exports.getDefaultCameraTransform = getDefaultCameraTransform;
 exports.getDirection = getDirection;
@@ -8629,7 +8995,7 @@ exports.getElement = getElement;
 exports.getElementSize = getElementSize;
 exports.getFlickingAttached = getFlickingAttached;
 exports.getMinusCompensatedIndex = getMinusCompensatedIndex;
-exports.getProgress = getProgress;
+exports.getProgress = getProgress$1;
 exports.getRenderingPanels = getRenderingPanels;
 exports.getStyle = getStyle;
 exports.includes = includes;