@egjs/flicking 4.14.2-beta.2 → 4.16.0-beta.0

package/src/Flicking.ts

@@ -3,147 +3,530 @@
  * egjs projects are licensed under the MIT license
  */
 import Component, { ComponentEvent } from "@egjs/component";
-
-import FlickingError from "./core/FlickingError";
-import Viewport from "./core/Viewport";
-import AutoResizer from "./core/AutoResizer";
-import { Panel } from "./core/panel";
-import { VanillaElementProvider } from "./core/panel/provider";
-import VirtualManager, { VirtualOptions } from "./core/VirtualManager";
+import { Camera } from "./camera";
+import { ALIGN, CIRCULAR_FALLBACK, DIRECTION, MOVE_TYPE } from "./constants/values";
 import {
   Control,
+  FreeControl,
+  FreeControlOptions,
   SnapControl,
   SnapControlOptions,
-  FreeControl,
   StrictControl,
-  FreeControlOptions,
   StrictControlOptions
 } from "./control";
-import { Camera } from "./camera";
+import AutoResizer from "./core/AutoResizer";
+import { Panel } from "./core/panel";
+import { VanillaElementProvider } from "./core/panel/provider";
+import Viewport from "./core/Viewport";
+import VirtualManager, { VirtualOptions } from "./core/VirtualManager";
+import * as ERROR from "./error/codes";
+import FlickingError from "./error/FlickingError";
+import { EVENTS } from "./event/names";
+import { FlickingEvents } from "./event/types";
 import {
-  Renderer,
-  VanillaRenderer,
   ExternalRenderer,
-  RendererOptions,
   NormalRenderingStrategy,
+  Renderer,
+  RendererOptions,
+  VanillaRenderer,
   VirtualRenderingStrategy
 } from "./renderer";
-import {
-  EVENTS,
-  ALIGN,
-  MOVE_TYPE,
-  DIRECTION,
-  CIRCULAR_FALLBACK
-} from "./const/external";
-import * as ERROR from "./const/error";
+import { ElementLike, MoveTypeOptions, Plugin, Status } from "./types/external";
+import { LiteralUnion, ValueOf } from "./types/internal";
 import { findIndex, getElement, includes, parseElement } from "./utils";
-import {
-  HoldStartEvent,
-  HoldEndEvent,
-  MoveStartEvent,
-  SelectEvent,
-  MoveEvent,
-  MoveEndEvent,
-  WillChangeEvent,
-  WillRestoreEvent,
-  NeedPanelEvent,
-  VisibleChangeEvent,
-  ReachEdgeEvent,
-  ReadyEvent,
-  AfterResizeEvent,
-  BeforeResizeEvent,
-  ChangedEvent,
-  RestoredEvent,
-  PanelChangeEvent
-} from "./type/event";
-import { LiteralUnion, ValueOf } from "./type/internal";
-import { ElementLike, Plugin, Status, MoveTypeOptions } from "./type/external";
 
 /**
- * @interface
- */
-export interface FlickingEvents {
-  [EVENTS.READY]: ReadyEvent;
-  [EVENTS.BEFORE_RESIZE]: BeforeResizeEvent;
-  [EVENTS.AFTER_RESIZE]: AfterResizeEvent;
-  [EVENTS.HOLD_START]: HoldStartEvent;
-  [EVENTS.HOLD_END]: HoldEndEvent;
-  [EVENTS.MOVE_START]: MoveStartEvent;
-  [EVENTS.MOVE]: MoveEvent;
-  [EVENTS.MOVE_END]: MoveEndEvent;
-  [EVENTS.WILL_CHANGE]: WillChangeEvent;
-  [EVENTS.CHANGED]: ChangedEvent;
-  [EVENTS.WILL_RESTORE]: WillRestoreEvent;
-  [EVENTS.RESTORED]: RestoredEvent;
-  [EVENTS.SELECT]: SelectEvent;
-  [EVENTS.NEED_PANEL]: NeedPanelEvent;
-  [EVENTS.VISIBLE_CHANGE]: VisibleChangeEvent;
-  [EVENTS.REACH_EDGE]: ReachEdgeEvent;
-  [EVENTS.PANEL_CHANGE]: PanelChangeEvent;
-}
-
-/**
- * @interface
+ * Options for the Flicking component
+ * @public
  */
 export interface FlickingOptions {
   // UI / LAYOUT
-  align:
-  | LiteralUnion<ValueOf<typeof ALIGN>>
-  | number
-  | { panel: number | string; camera: number | string };
+  /**
+   * Align position of the panels within viewport. You can set different values each for the panel and camera.
+   * @remarks
+   * Possible values include
+   *
+   * - literal strings ("prev", "center", "next")
+   *
+   * - percentage values ("0%", "25%")
+   *
+   * - pixel values ("0px", "100px")
+   *
+   * - arithmetic expressions ("50% - 25px")
+   *
+   * - numbers
+   *
+   * - an object with separate `panel` and `camera` alignment values
+   *
+   * @example
+   * ```ts
+   * const possibleOptions = [
+   *   // Literal strings
+   *   "prev", "center", "next",
+   *   // % values, applied to both panel & camera
+   *   "0%", "25%", "42%",
+   *   // px values, arithmetic calculation with (+/-) is also allowed.
+   *   "0px", "100px", "50% - 25px",
+   *   // numbers, same to number + px ("0px", "100px")
+   *   0, 100, 1000,
+   *   // Setting a different value for panel & camera
+   *   { panel: "10%", camera: "25%" }
+   * ];
+   *
+   * possibleOptions.forEach(align => {
+   *   new Flicking("#el", { align });
+   * });
+   * ```
+   * @accepts {@link ALIGN}
+   * @defaultValue "center"
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/basic/alignment | Demo: Alignment}
+   */
+  align: LiteralUnion<ValueOf<typeof ALIGN>> | number | { panel: number | string; camera: number | string };
+
+  /**
+   * Index of the panel to move when Flicking's {@link Flicking.init | init()} is called. A zero-based integer.
+   * @defaultValue 0
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/basic/default-index | Demo: Default Index}
+   */
   defaultIndex: number;
+
+  /**
+   * Direction of panel movement. `true` for horizontal, `false` for vertical.
+   *
+   * @remarks
+   * In vanilla JS, you must manually add the `vertical` class to the viewport element when using vertical mode.
+   * React and Vue wrappers add this class automatically.
+   *
+   * @example
+   * ```ts
+   * // Vanilla JS: add "vertical" class to the viewport element
+   * // <div class="flicking-viewport vertical">
+   * //   <div class="flicking-camera">...</div>
+   * // </div>
+   * const flicking = new Flicking("#my-flicking", {
+   *   horizontal: false
+   * });
+   * ```
+   *
+   * @defaultValue true
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/basic/vertical | Demo: Vertical}
+   */
   horizontal: boolean;
+
+  /**
+   * Enables circular (continuous loop) mode, which connects first/last panel for continuous scrolling.
+   * @dependency Mutual Exclusive - {@link FlickingOptions.bound | bound}. When both are true, circular takes precedence and bound will be ignored.
+   * @dependency Conditional - Total panel size must be ≥ viewport size. If not met, automatically falls back to {@link FlickingOptions.circularFallback | circularFallback} mode.
+   * @dependency Related - {@link FlickingOptions.circularFallback | circularFallback} determines fallback behavior when circular cannot be enabled
+   *
+   * @defaultValue false
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/basic/circular | Demo: Circular}
+   */
   circular: boolean;
+
+  /**
+   * Set panel control mode for the case when circular cannot be enabled.
+   * @dependency Requires - Only takes effect when {@link FlickingOptions.circular | circular} is true but activation requirements are not met (total panel size < viewport size)
+   *
+   * @remarks
+   * - "linear": The view's range is set from the top of the first panel to the top of the last panel.
+   * - "bound": Prevents the view from going out of the first/last panel, hiding empty spaces.
+   *
+   * @accepts {@link CIRCULAR_FALLBACK}
+   * @defaultValue "linear"
+   *
+   * @since 4.5.0
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/basic/circular | Demo: Circular}
+   */
   circularFallback: LiteralUnion<ValueOf<typeof CIRCULAR_FALLBACK>>;
+
+  /**
+   * Prevent the view (camera element) from going out of the first/last panel.
+   * @dependency Mutual Exclusive - {@link FlickingOptions.circular | circular}. When circular is true, this option is ignored.
+   * @dependency Related - Works with {@link FlickingOptions.bounce | bounce} for bounce effect at boundaries
+   *
+   * @defaultValue false
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/basic/bound | Demo: Bound}
+   */
   bound: boolean;
+
+  /**
+   * Update height of the viewport element after movement same to the height of the panel below.
+   * @dependency Conditional - Only works when {@link FlickingOptions.horizontal | horizontal} is true. When horizontal is false, this option has no effect.
+   *
+   * @defaultValue false
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/basic/adaptive | Demo: Adaptive}
+   */
   adaptive: boolean;
+
+  /**
+   * A visible number of panels on viewport. Enabling this option will force the panel to resize.
+   * @remarks
+   * When set to -1, automatically calculates based on panel sizes.
+   *
+   * @dependency Related - Affects how {@link FlickingOptions.align | align} calculates panel positions
+   * @dependency Requires - Required for {@link FlickingOptions.virtual | virtual} to work (must be > 0)
+   * @dependency Related - Works with {@link FlickingOptions.noPanelStyleOverride | noPanelStyleOverride} to prevent style modifications
+   *
+   * @defaultValue -1
+   *
+   * @since 4.2.0
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/basic/panels-per-view | Demo: Panels Per View}
+   */
   panelsPerView: number;
+
+  /**
+   * When enabled, prevents modifying the panel's `width/height` styles when {@link Flicking.panelsPerView | panelsPerView} is enabled.
+   * Enabling this option can improve performance if you are manually managing all panel sizes.
+   * @defaultValue false
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/basic/panels-per-view | Demo: Panels Per View}
+   */
   noPanelStyleOverride: boolean;
+
+  /**
+   * When enabled, automatically calls {@link Flicking.resize} when images/videos inside Flicking panels are loaded.
+   * This is useful when Flicking contains content that changes size before and after loading.
+   * @defaultValue false
+   * @since 4.3.0
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/advanced/resize-on-contents-ready | Demo: Resize On Contents Ready}
+   */
   resizeOnContentsReady: boolean;
+
+  /**
+   * Enable nested Flicking mode to allow parent Flicking to move when reaching boundaries.
+   * @remarks
+   * When Flicking is nested inside another Flicking, enabling this option allows the parent
+   * Flicking to move in the same direction after the nested Flicking reaches the first or last panel.
+   *
+   * This option is not required if the parent and nested Flicking have different horizontal options.
+   *
+   * @defaultValue false
+   *
+   * @since 4.7.0
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/basic/nested | Demo: Nested}
+   */
   nested: boolean;
 
   // EVENT
+  /**
+   * A threshold from the viewport edge to trigger the `needPanel` event.
+   * @defaultValue 0
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/advanced/infinite-scroll | Demo: Infinite Scroll}
+   */
   needPanelThreshold: number;
+
+  /**
+   * When enabled, disables events before the `ready` event during initialization.
+   * @defaultValue true
+   * @since 4.2.0
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/basic/auto-init | Demo: Auto Init}
+   */
   preventEventsBeforeInit: boolean;
 
   // ANIMATION
+  /**
+   * Deceleration of panel movement animation with momentum applied by user interaction (input).
+   * Higher values result in a shorter animation duration.
+   * @defaultValue 0.0075
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/basic/deceleration | Demo: Deceleration}
+   */
   deceleration: number;
+
+  /**
+   * Default duration of the animation in milliseconds.
+   * @defaultValue 500
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/basic/duration | Demo: Duration}
+   */
   duration: number;
+
+  /**
+   * An easing function applied to the panel movement animation.
+   * @defaultValue "easeOutCubic" (x => 1 - Math.pow(1 - x, 3))
+   * @see {@link http://easings.net/ | Easing Functions Cheat Sheet}
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/basic/easing | Demo: Easing}
+   */
   easing: (x: number) => number;
 
   // INPUT
+  /**
+   * Types of input devices to enable.
+   * @defaultValue ["touch", "mouse"]
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/basic/input-type | Demo: Input Type}
+   */
   inputType: string[];
-  moveType:
-  | ValueOf<typeof MOVE_TYPE>
-  | MoveTypeOptions<ValueOf<typeof MOVE_TYPE>>;
+
+  /**
+   * Movement style by user input. Determines the instance type of {@link Flicking.control | control}.
+   * @remarks
+   * - "snap": Uses {@link SnapControl}
+   *
+   * - "freeScroll": Uses {@link FreeControl} with {@link FreeControlOptions}
+   *
+   * - "strict": Uses {@link StrictControl} with {@link StrictControlOptions}
+   * @accepts {@link MOVE_TYPE}
+   * @example
+   * ```ts
+   * import Flicking, { MOVE_TYPE } from "@egjs/flicking";
+   *
+   * const flicking = new Flicking({
+   *   moveType: MOVE_TYPE.SNAP
+   * });
+   * ```
+   *
+   * ```ts
+   * const flicking = new Flicking({
+   *   // If you want more specific settings for the moveType
+   *   // [moveType, options for that moveType]
+   *   // In this case, it's ["freeScroll", FreeControlOptions]
+   *   moveType: [MOVE_TYPE.FREE_SCROLL, { stopAtEdge: true }]
+   * });
+   * ```
+   * @defaultValue "snap"
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/basic/movement-types | Demo: Movement Types}
+   */
+  moveType: ValueOf<typeof MOVE_TYPE> | MoveTypeOptions<ValueOf<typeof MOVE_TYPE>>;
+
+  /**
+   * Movement threshold to change panels (unit: px). Panels will only change after scrolling beyond this value.
+   * @defaultValue 40
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/basic/threshold | Demo: Threshold}
+   */
   threshold: number;
+
+  /**
+   * Minimum distance to recognize user input (unit: px). Panels will only move after scrolling beyond this value.
+   * @defaultValue 1
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/basic/threshold | Demo: Threshold}
+   */
   dragThreshold: number;
+
+  /**
+   * The minimum distance for animation to proceed.
+   * @remarks
+   * If the distance to be moved is less than `animationThreshold`, the movement proceeds immediately without animation (duration: 0).
+   * @defaultValue 0.5
+   * @since 4.15.0
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/advanced/animation-threshold | Demo: Animation Threshold}
+   */
   animationThreshold: number;
+
+  /**
+   * Using `useCSSOrder` does not change the DOM order, but the `order` CSS property changes the order on the screen.
+   * @remarks
+   * When `circular` is used, the DOM order changes depending on the position.
+   * When using `iframe`, you can prevent reloading when the DOM order changes.
+   * In svelte, CSS order is always used.
+   * @defaultValue false
+   * @since 4.15.0
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/advanced/use-css-order | Demo: CSS Order}
+   */
   useCSSOrder: boolean;
+
+  /**
+   * Allows stopping animations with user click/touch input.
+   * @defaultValue true
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/basic/interruptable | Demo: Interruptable}
+   */
   interruptable: boolean;
+
+  /**
+   * The size value of the bounce area.
+   * @dependency Conditional - Only can be enabled when {@link FlickingOptions.circular | circular} is false
+   * @dependency Related - Works with {@link FlickingOptions.bound | bound} to provide bounce effect at panel boundaries
+   *
+   * @remarks
+   * You can set different bounce value for prev/next direction by using array.
+   * Use `number` for px value, and `string` for px or % value relative to viewport size.
+   * You have to call {@link Control.updateInput | updateInput()} after changing this value to take effect.
+   *
+   * @example
+   * ```ts
+   * const possibleOptions = [
+   *   "0%", "25%", "42%",           // % values
+   *   "0px", "100px", "50% - 25px", // px values with arithmetic
+   *   0, 100, 1000                  // numbers (same as px)
+   * ];
+   * ```
+   *
+   * @defaultValue "20%"
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/basic/bound | Demo: Bound}
+   */
   bounce: number | string | [number | string, number | string];
+
+  /**
+   * Size of the area from the right edge in iOS Safari (in px) that enables swipe-back or swipe-forward.
+   * @defaultValue 30
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/basic/input-type | Demo: Input Type}
+   */
   iOSEdgeSwipeThreshold: number;
+
+  /**
+   * Automatically cancels {@link https://developer.mozilla.org/ko/docs/Web/API/Element/click_event | click} events when the user drags the viewport by any amount.
+   * @defaultValue true
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/basic/prevent-click | Demo: Prevent Click}
+   */
   preventClickOnDrag: boolean;
+
+  /**
+   * Whether to use the {@link https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault | preventDefault} when the user starts dragging
+   * @defaultValue false
+   * @since 4.11.0
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/basic/prevent-click | Demo: Prevent Click}
+   */
   preventDefaultOnDrag: boolean;
+
+  /**
+   * Automatically call {@link Flicking.disableInput | disableInput()} during initialization.
+   * @defaultValue false
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/basic/disable-input | Demo: Disable Input}
+   */
   disableOnInit: boolean;
+
+  /**
+   * Change active panel index on mouse/touch hold while animating.
+   * @remarks
+   * `index` of the `willChange`/`willRestore` event will be used as new index.
+   * @defaultValue false
+   * @since 4.8.0
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/basic/interruptable | Demo: Interruptable}
+   */
   changeOnHold: boolean;
 
   // PERFORMANCE
+  /**
+   * When enabled, only renders visible panels. Can significantly improve performance with many panels.
+   * @defaultValue false
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/advanced/render-only-visible | Demo: Render Only Visible}
+   */
   renderOnlyVisible: boolean;
+
+  /**
+   * When enabled, restricts the number of panel elements to `panelsPerView + 1` to reduce memory usage.
+   * @dependency Requires - Must be used with {@link FlickingOptions.panelsPerView | panelsPerView}. When panelsPerView is -1 (auto), this option is ignored.
+   *
+   * @remarks
+   * After Flicking initialization, this property can be used to add or remove the number of rendered panels.
+   *
+   * The option object contains:
+   * - `renderPanel`: A rendering function for the panel element's innerHTML
+   * - `initialPanelCount`: Initial panel count to render
+   * - `cache` (optional, default: false): Whether to cache rendered panel's innerHTML
+   * - `panelClass` (optional, default: "flicking-panel"): The class name for rendered panel elements
+   *
+   * @example
+   * ```ts
+   * import Flicking, { VirtualPanel } from "@egjs/flicking";
+   *
+   * const flicking = new Flicking("#some_el", {
+   *   panelsPerView: 3,
+   *   virtual: {
+   *     renderPanel: (panel: VirtualPanel, index: number) => `Panel ${index}`,
+   *     initialPanelCount: 100
+   *   }
+   * });
+   *
+   * // Add 100 virtual panels (at the end)
+   * flicking.virtual.append(100);
+   *
+   * // Remove 100 virtual panels from 0 to 100
+   * flicking.virtual.remove(0, 100);
+   * ```
+   *
+   * @defaultValue null
+   *
+   * @since 4.4.0
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/advanced/virtual-scroll | Demo: Virtual Scroll}
+   */
   virtual: VirtualOptions | null;
 
   // OTHERS
+  /**
+   * Call {@link Flicking.init | init()} automatically when creating Flicking's instance.
+   * @defaultValue true
+   * @readonly
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/basic/auto-init | Demo: Auto Init}
+   */
   autoInit: boolean;
+
+  /**
+   * Whether to automatically call {@link Flicking.resize | resize()} when the viewport element (.flicking-viewport) size is changed.
+   * @defaultValue true
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/advanced/auto-resize | Demo: Auto Resize}
+   */
   autoResize: boolean;
+
+  /**
+   * Whether to listen {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver | ResizeObserver}'s event instead of Window's {@link https://developer.mozilla.org/ko/docs/Web/API/Window/resize_event | resize} event when using the `autoResize` option
+   * @defaultValue true
+   * @since 4.4.0
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/advanced/auto-resize | Demo: Auto Resize}
+   */
   useResizeObserver: boolean;
+
+  /**
+   * Delays size recalculation from `autoResize` by the given time in milliseconds.
+   * @remarks
+   * If the size is changed again while being delayed, it cancels the previous one and delays from the beginning again.
+   * This can increase performance by preventing `resize` being called too often.
+   * @defaultValue 0
+   * @since 4.6.0
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/advanced/resize-debounce | Demo: Resize Debounce}
+   */
   resizeDebounce: number;
+
+  /**
+   * Whether to use ResizeObserver to observe the size of the panel element.
+   * @dependency Conditional - Only available when {@link FlickingOptions.useResizeObserver | useResizeObserver} is enabled
+   *
+   * @remarks
+   * This option guarantees that the resize event is triggered when the size of the panel element is changed.
+   *
+   * @since 4.13.1
+   * @defaultValue false
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/advanced/observe-panel-resize | Demo: Observe Panel Resize}
+   */
   observePanelResize: boolean;
+
+  /**
+   * The maximum time for size recalculation delay when using `resizeDebounce`, in milliseconds.
+   * @remarks
+   * This guarantees that size recalculation is performed at least once every (n)ms.
+   * @defaultValue 100
+   * @since 4.6.0
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/advanced/resize-debounce | Demo: Resize Debounce}
+   */
   maxResizeDebounce: number;
+
+  /**
+   * By enabling this, Flicking will calculate all internal size with CSS width computed with getComputedStyle.
+   * @remarks
+   * This can prevent 1px offset issue in some cases where panel size has the fractional part.
+   * All sizes will have the original size before CSS {@link https://developer.mozilla.org/en-US/docs/Web/CSS/transform | transform} is applied on the element.
+   * @defaultValue false
+   * @since 4.9.0
+   * @see {@link https://naver.github.io/egjs-flicking/docs/demos/advanced/fractional-size | Demo: Fractional Size}
+   */
   useFractionalSize: boolean;
+
+  /**
+   * This is an option for the frameworks (React, Vue, Angular, ...).
+   * Don't set it as it's automatically managed by Flicking.
+   * @defaultValue null
+   * @internal
+   * @readonly
+   */
   externalRenderer: ExternalRenderer | null;
+
+  /**
+   * This option works only when autoResize is set to true.
+   * @internal
+   * @defaultValue false
+   */
   optimizeSizeUpdate: boolean;
 
-  // @deprecated
+  /**
+   * @deprecated Use {@link FlickingOptions.externalRenderer | externalRenderer} instead
+   */
   renderExternal: {
     renderer: new (options: RendererOptions) => ExternalRenderer;
     rendererOptions: RendererOptions;
@@ -151,23 +534,41 @@ export interface FlickingOptions {
 }
 
 /**
- * @extends Component
- * @support {"ie": "9+(with polyfill)", "ch" : "latest", "ff" : "latest",  "sf" : "latest", "edge" : "latest", "ios" : "7+", "an" : "4.X+"}
- * @requires {@link https://github.com/naver/egjs-component|@egjs/component}
- * @requires {@link https://github.com/naver/egjs-axes|@egjs/axes}
+ * Parameters for {@link Flicking.getStatus}
+ * @public
  */
+export interface GetStatusParams {
+  /**
+   * Include current panel index
+   * @defaultValue true
+   */
+  index?: boolean;
+  /**
+   * Include camera position. Only works when {@link FlickingOptions.moveType | moveType} is `freeScroll`
+   * @defaultValue true
+   */
+  position?: boolean;
+  /**
+   * Include panel's `outerHTML`
+   * @defaultValue false
+   */
+  includePanelHTML?: boolean;
+  /**
+   * Include only visible panels' HTML. Only available when `includePanelHTML` is `true`
+   * @defaultValue false
+   */
+  visiblePanelsOnly?: boolean;
+}
+
 class Flicking extends Component<FlickingEvents> {
   /**
    * Version info string
-   * @ko 버전정보 문자열
-   * @type {string}
-   * @readonly
    * @example
    * ```ts
    * Flicking.VERSION;  // ex) 4.0.0
    * ```
    */
-  public static VERSION = "#__VERSION__#";
+  public static readonly VERSION: string = "#__VERSION__#";
 
   // Core components
   private _viewport: Viewport;
@@ -204,7 +605,6 @@ class Flicking extends Component<FlickingEvents> {
   private _dragThreshold: FlickingOptions["dragThreshold"];
   private _animationThreshold: FlickingOptions["animationThreshold"];
   private _useCSSOrder: FlickingOptions["useCSSOrder"];
-
   private _interruptable: FlickingOptions["interruptable"];
   private _bounce: FlickingOptions["bounce"];
   private _iOSEdgeSwipeThreshold: FlickingOptions["iOSEdgeSwipeThreshold"];
@@ -234,784 +634,466 @@ class Flicking extends Component<FlickingEvents> {
 
   // Components
   /**
-   * {@link Control} instance of the Flicking
-   * @ko 현재 Flicking에 활성화된 {@link Control} 인스턴스
-   * @type {Control}
-   * @default SnapControl
+   * {@link Control} instance that manages user input and panel movement animations
+   * @remarks
+   * The concrete Control implementation is selected based on {@link FlickingOptions.moveType | moveType} option.
+   * @privateRemarks
+   * The control instance is created during construction by {@link Flicking._createControl}.
    * @readonly
-   * @see Control
-   * @see SnapControl
-   * @see FreeControl
    */
-  public get control() {
+  public get control(): Control {
     return this._control;
   }
 
   /**
-   * {@link Camera} instance of the Flicking
-   * @ko 현재 Flicking에 활성화된 {@link Camera} 인스턴스
-   * @type {Camera}
-   * @default LinearCamera
+   * {@link Camera} instance that manages actual movement and positioning inside the viewport
+   * @remarks
+   * The concrete Camera implementation is selected based on {@link FlickingOptions.circular} and {@link FlickingOptions.bound} options.
+   * @privateRemarks
+   * The camera instance is created during construction by {@link Flicking._createCamera}.
    * @readonly
-   * @see Camera
-   * @see LinearCamera
-   * @see BoundCamera
-   * @see CircularCamera
    */
-  public get camera() {
+  public get camera(): Camera {
     return this._camera;
   }
 
   /**
-   * {@link Renderer} instance of the Flicking
-   * @ko 현재 Flicking에 활성화된 {@link Renderer} 인스턴스
-   * @type {Renderer}
-   * @default VanillaRenderer
+   * {@link Renderer} instance that manages panels and their elements
+   * @remarks
+   * The concrete Renderer implementation is selected based on {@link Flicking.externalRenderer} and {@link FlickingOptions.virtual} options.
+   * @privateRemarks
+   * The renderer instance is created during construction by {@link Flicking._createRenderer}.
    * @readonly
-   * @see Renderer
-   * @see VanillaRenderer
-   * @see ExternalRenderer
    */
-  public get renderer() {
+  public get renderer(): Renderer {
     return this._renderer;
   }
 
   /**
-   * A component that manages viewport size
-   * @ko 뷰포트 크기 정보를 담당하는 컴포넌트
-   * @type {Viewport}
+   * {@link Viewport} instance that manages viewport size and element
+   * @privateRemarks
+   * The viewport instance is created during construction by {@link Flicking} constructor.
    * @readonly
-   * @see Viewport
    */
-  public get viewport() { return this._viewport; }
+  public get viewport(): Viewport {
+    return this._viewport;
+  }
+
   /**
-   * {@link AutoResizer} instance of the Flicking
-   * @ko 현재 Flicking에 활성화된 {@link AutoResizer} 인스턴스
-   * @internal
+   * {@link AutoResizer} instance that detects size changes and triggers resize when {@link FlickingOptions.autoResize | autoResize} option is enabled
+   * @privateRemarks
+   * The autoResizer instance is created during construction by {@link Flicking} constructor.
    * @readonly
    */
-  public get autoResizer() { return this._autoResizer; }
+  public get autoResizer(): AutoResizer {
+    return this._autoResizer;
+  }
+
   // Internal States
   /**
-   * Whether Flicking's {@link Flicking#init init()} is called.
-   * This is `true` when {@link Flicking#init init()} is called, and is `false` after calling {@link Flicking#destroy destroy()}.
-   * @ko Flicking의 {@link Flicking#init init()}이 호출되었는지를 나타내는 멤버 변수.
-   * 이 값은 {@link Flicking#init init()}이 호출되었으면 `true`로 변하고, {@link Flicking#destroy destroy()}호출 이후에 다시 `false`로 변경됩니다.
-   * @type {boolean}
-   * @default false
+   * Whether Flicking's {@link Flicking.init} is called.
+   * @remarks
+   * This is `true` when {@link Flicking.init} is called, and is `false` after calling {@link Flicking.destroy}.
+   * Use this to check if Flicking is ready before calling certain methods that require initialization.
+   * @defaultValue false
    * @readonly
+   * @example
+   * ```ts
+   * if (flicking.initialized) {
+   *   flicking.setStatus(status);
+   * } else {
+   *   await flicking.init();
+   *   flicking.setStatus(status);
+   * }
+   * ```
    */
-  public get initialized() {
+  public get initialized(): boolean {
     return this._initialized;
   }
 
   /**
-   * Whether the `circular` option is enabled.
-   * The {@link Flicking#circular circular} option can't be enabled when sum of the panel sizes are too small.
-   * @ko {@link Flicking#circular circular} 옵션이 활성화되었는지 여부를 나타내는 멤버 변수.
-   * {@link Flicking#circular circular} 옵션은 패널의 크기의 합이 충분하지 않을 경우 비활성화됩니다.
-   * @type {boolean}
-   * @default false
+   * Whether the circular mode is actually enabled.
+   * @remarks
+   * The {@link FlickingOptions.circular} option may not be enabled when the sum of panel sizes is too small.
+   * This property reflects the actual enabled state, which may differ from the {@link FlickingOptions.circular} option value.
+   * @defaultValue false
    * @readonly
    */
-  public get circularEnabled() {
+  public get circularEnabled(): boolean {
     return this._camera.circularEnabled;
   }
 
   /**
-   * Whether the `virtual` option is enabled.
-   * The {@link Flicking#virtual virtual} option can't be enabled when  {@link Flicking#panelsPerView panelsPerView} is less or equal than zero.
-   * @ko {@link Flicking#virtual virtual} 옵션이 활성화되었는지 여부를 나타내는 멤버 변수.
-   * {@link Flicking#virtual virtual} 옵션은 {@link Flicking#panelsPerView panelsPerView} 옵션의 값이 0보다 같거나 작으면 비활성화됩니다.
-   * @type {boolean}
-   * @default false
+   * Whether the virtual mode is actually enabled.
+   * @remarks
+   * The {@link FlickingOptions.virtual} option may not be enabled when {@link FlickingOptions.panelsPerView} is less than or equal to zero.
+   * This property reflects the actual enabled state, which may differ from the {@link FlickingOptions.virtual} option value.
+   * @defaultValue false
    * @readonly
    */
-  public get virtualEnabled() {
+  public get virtualEnabled(): boolean {
     return this._panelsPerView > 0 && this._virtual != null;
   }
 
   /**
-   * Index number of the {@link Flicking#currentPanel currentPanel}
-   * @ko {@link Flicking#currentPanel currentPanel}의 인덱스 번호
-   * @type {number}
-   * @default 0
+   * Index of the currently active panel.
+   * @remarks
+   * Returns -1 when there is no active panel. This is a shorthand for `Flicking.currentPanel.index`.
    * @readonly
    */
-  public get index() {
+  public get index(): number {
     return this._control.activeIndex;
   }
 
   /**
-   * The root(`.flicking-viewport`) element
-   * @ko root(`.flicking-viewport`) 엘리먼트
-   * @type {HTMLElement}
+   * The root viewport element (`.flicking-viewport`).
+   * @remarks
+   * This is the element passed to the Flicking constructor. It is a shorthand for `Flicking.viewport.element`.
    * @readonly
    */
-  public get element() {
+  public get element(): HTMLElement {
     return this._viewport.element;
   }
 
   /**
-   * Currently active panel
-   * @ko 현재 선택된 패널
-   * @type {Panel}
+   * The currently active panel.
+   * @remarks
+   * Returns `null` when there is no active panel. This is a shorthand for `Flicking.control.activePanel`.
    * @readonly
-   * @see Panel
    */
-  public get currentPanel() {
+  public get currentPanel(): Panel | null {
     return this._control.activePanel;
   }
 
   /**
-   * Array of panels
-   * @ko 전체 패널들의 배열
-   * @type {Panel[]}
+   * Array of all panels.
+   * @remarks
+   * This is a shorthand for `Flicking.renderer.panels`.
    * @readonly
-   * @see Panel
    */
-  public get panels() {
+  public get panels(): Panel[] {
     return this._renderer.panels;
   }
 
   /**
-   * Count of panels
-   * @ko 전체 패널의 개수
-   * @type {number}
+   * Total number of panels.
+   * @remarks
+   * This is a shorthand for `Flicking.renderer.panelCount`.
    * @readonly
    */
-  public get panelCount() {
+  public get panelCount(): number {
     return this._renderer.panelCount;
   }
 
   /**
-   * Array of panels that is visible at the current position
-   * @ko 현재 보이는 패널의 배열
-   * @type {Panel[]}
+   * Array of panels that are currently visible in the viewport.
+   * @remarks
+   * This is a shorthand for `Flicking.camera.visiblePanels`.
    * @readonly
-   * @see Panel
    */
-  public get visiblePanels() {
+  public get visiblePanels(): Panel[] {
     return this._camera.visiblePanels;
   }
 
   /**
-   * Whether Flicking's animating
-   * @ko 현재 애니메이션 동작 여부
-   * @type {boolean}
+   * Whether Flicking is currently animating.
+   * @remarks
+   * This is a shorthand for `Flicking.control.animating`.
    * @readonly
    */
-  public get animating() {
+  public get animating(): boolean {
     return this._control.animating;
   }
 
   /**
-   * Whether user is clicking or touching
-   * @ko 현재 사용자가 클릭/터치중인지 여부
-   * @type {boolean}
+   * Whether the user is currently clicking or touching the viewport.
+   * @remarks
+   * This is a shorthand for `Flicking.control.holding`.
    * @readonly
    */
-  public get holding() {
+  public get holding(): boolean {
     return this._control.holding;
   }
 
   /**
-   * A current list of activated plugins
-   * @ko 현재 활성화된 플러그인 목록
-   * @type {Plugin[]}
+   * Array of currently activated plugins.
+   * @remarks
+   * Plugins are added via {@link Flicking.addPlugins} and removed via {@link Flicking.removePlugins}.
    * @readonly
    */
-  public get activePlugins() {
+  public get activePlugins(): Plugin[] {
     return this._plugins;
   }
 
   // Options Getter
   // UI / LAYOUT
-  /**
-   * Align position of the panels within viewport. You can set different values each for the panel and camera
-   * @ko 뷰포트 내에서 패널 정렬방식을 설정하는 옵션. 카메라와 패널 개별로 옵션을 설정할 수도 있습니다
-   * @type {ALIGN | string | number | { panel: string | number, camera: string | number }}
-   * @property {ALIGN | string | number} panel The align value for each {@link Panel}s<ko>개개의 {@link Panel}에 적용할 값</ko>
-   * @property {ALIGN | string | number} camera The align value for {@link Camera}<ko>{@link Camera}에 적용할 값</ko>
-   * @default "center"
-   * @see {@link https://naver.github.io/egjs-flicking/Options#align align ( Options )}
-   * @example
-   * ```ts
-   * const possibleOptions = [
-   *   // Literal strings
-   *   "prev", "center", "next",
-   *   // % values, applied to both panel & camera
-   *   "0%", "25%", "42%",
-   *   // px values, arithmetic calculation with (+/-) is also allowed.
-   *   "0px", "100px", "50% - 25px",
-   *   // numbers, same to number + px ("0px", "100px")
-   *   0, 100, 1000,
-   *   // Setting a different value for panel & camera
-   *   { panel: "10%", camera: "25%" }
-   * ];
-   *
-   * possibleOptions.forEach(align => {
-   *   new Flicking("#el", { align });
-   * });
-   * ```
-   */
-  public get align() {
+  /** Current value of the {@link FlickingOptions.align | align} option. */
+  public get align(): FlickingOptions["align"] {
     return this._align;
   }
 
-  /**
-   * Index of the panel to move when Flicking's {@link Flicking#init init()} is called. A zero-based integer
-   * @ko Flicking의 {@link Flicking#init init()}이 호출될 때 이동할 디폴트 패널의 인덱스로, 0부터 시작하는 정수입니다.
-   * @type {number}
-   * @default 0
-   * @see {@link https://naver.github.io/egjs-flicking/Options#defaultindex defaultIndex ( Options )}
-   */
-  public get defaultIndex() {
+  /** Current value of the {@link FlickingOptions.defaultIndex | defaultIndex} option. */
+  public get defaultIndex(): FlickingOptions["defaultIndex"] {
     return this._defaultIndex;
   }
 
-  /**
-   * Direction of panel movement (true: horizontal, false: vertical)
-   * @ko 패널 이동 방향 (true: 가로방향, false: 세로방향)
-   * @type {boolean}
-   * @default true
-   * @see {@link https://naver.github.io/egjs-flicking/Options#horizontal horizontal ( Options )}
-   */
-  public get horizontal() {
+  /** Current value of the {@link FlickingOptions.horizontal | horizontal} option. */
+  public get horizontal(): FlickingOptions["horizontal"] {
     return this._horizontal;
   }
 
-  /**
-   * Enables circular(continuous loop) mode, which connects first/last panel for continuous scrolling.
-   * @ko 순환 모드를 활성화합니다. 순환 모드에서는 양 끝의 패널이 서로 연결되어 끊김없는 스크롤이 가능합니다.
-   * @type {boolean}
-   * @default false
-   * @see {@link https://naver.github.io/egjs-flicking/Options#circular circular ( Options )}
-   */
-  public get circular() {
+  /** Current value of the {@link FlickingOptions.circular | circular} option. */
+  public get circular(): FlickingOptions["circular"] {
     return this._circular;
   }
 
   /**
-   * Set panel control mode for the case when circular cannot be enabled.
-   * "linear" will set the view's range from the top of the first panel to the top of the last panel.
-   * "bound" will prevent the view from going out of the first/last panel, so it won't show empty spaces before/after the first/last panel.
-   * @ko 순환 모드 사용 불가능시 사용할 패널 조작 범위 설정 방식을 변경합니다.
-   * "linear" 사용시 시점이 첫번째 엘리먼트 위에서부터 마지막 엘리먼트 위까지 움직일 수 있도록 설정합니다.
-   * "bound" 사용시 시점이 첫번째 엘리먼트와 마지막 엘리먼트의 끝과 끝 사이에서 움직일 수 있도록 설정합니다.
-   * @see CIRCULAR_FALLBACK
-   * @type {string}
-   * @default "linear"
-   * @see {@link https://naver.github.io/egjs-flicking/Options#circularfallback circularFallback ( Options )}
-   */
-  public get circularFallback() {
+   * Current value of the {@link FlickingOptions.circularFallback | circularFallback} option.
+   * @since 4.5.0
+   */
+  public get circularFallback(): FlickingOptions["circularFallback"] {
     return this._circularFallback;
   }
 
-  /**
-   * Prevent the view(camera element) from going out of the first/last panel, so it won't show empty spaces before/after the first/last panel
-   * Only can be enabled when `circular=false`
-   * @ko 뷰(카메라 엘리먼트)가 첫번째와 마지막 패널 밖으로 넘어가지 못하게 하여, 첫번째/마지막 패널 전/후의 빈 공간을 보이지 않도록 하는 옵션입니다
-   * `circular=false`인 경우에만 사용할 수 있습니다
-   * @type {boolean}
-   * @default false
-   * @see {@link https://naver.github.io/egjs-flicking/Options#bound bound ( Options )}
-   */
-  public get bound() {
+  /** Current value of the {@link FlickingOptions.bound | bound} option. */
+  public get bound(): FlickingOptions["bound"] {
     return this._bound;
   }
 
-  /**
-   * Update height of the viewport element after movement same to the height of the panel below. This can be only enabled when `horizontal=true`
-   * @ko 이동한 후 뷰포트 엘리먼트의 크기를 현재 패널의 높이와 동일하게 설정합니다. `horizontal=true`인 경우에만 사용할 수 있습니다.
-   * @type {boolean}
-   * @default false
-   * @see {@link https://naver.github.io/egjs-flicking/Options#adaptive adaptive ( Options )}
-   */
-  public get adaptive() {
+  /** Current value of the {@link FlickingOptions.adaptive | adaptive} option. */
+  public get adaptive(): FlickingOptions["adaptive"] {
     return this._adaptive;
   }
 
   /**
-   * A visible number of panels on viewport. Enabling this option will automatically resize panel size
-   * @ko 한 화면에 보이는 패널의 개수. 이 옵션을 활성화할 경우 패널의 크기를 강제로 재조정합니다
-   * @type {number}
-   * @default -1
-   * @see {@link https://naver.github.io/egjs-flicking/Options#panelsperview panelsPerView ( Options )}
+   * Current value of the {@link FlickingOptions.panelsPerView | panelsPerView} option.
+   * @since 4.2.0
    */
-  public get panelsPerView() {
+  public get panelsPerView(): FlickingOptions["panelsPerView"] {
     return this._panelsPerView;
   }
 
-  /**
-   * Enabling this option will not change `width/height` style of the panels if {@link Flicking#panelsPerView} is enabled.
-   * This behavior can be useful in terms of performance when you're manually managing all panel sizes
-   * @ko 이 옵션을 활성화할 경우, {@link Flicking#panelsPerView} 옵션이 활성화되었을 때 패널의 `width/height` 스타일을 변경하지 않도록 설정합니다.
-   * 모든 패널들의 크기를 직접 관리하고 있을 경우, 이 옵션을 활성화하면 성능면에서 유리할 수 있습니다
-   * @type {boolean}
-   * @default false
-   */
-  public get noPanelStyleOverride() {
+  /** Current value of the {@link FlickingOptions.noPanelStyleOverride | noPanelStyleOverride} option. */
+  public get noPanelStyleOverride(): FlickingOptions["noPanelStyleOverride"] {
     return this._noPanelStyleOverride;
   }
 
   /**
-   * Enabling this option will automatically call {@link Flicking#resize} when all image/video inside panels are loaded.
-   * This can be useful when you have contents inside Flicking that changes its size when it's loaded
-   * @ko 이 옵션을 활성화할 경우, Flicking 패널 내부의 이미지/비디오들이 로드되었을 때 자동으로 {@link Flicking#resize}를 호출합니다.
-   * 이 동작은 Flicking 내부에 로드 전/후로 크기가 변하는 콘텐츠를 포함하고 있을 때 유용하게 사용하실 수 있습니다.
-   * @type {boolean}
-   * @default false
-   * @see {@link https://naver.github.io/egjs-flicking/Options#resizeOnContentsReady resizeOnContentsReady ( Options )}
+   * Current value of the {@link FlickingOptions.resizeOnContentsReady | resizeOnContentsReady} option.
+   * @since 4.3.0
    */
-  public get resizeOnContentsReady() {
+  public get resizeOnContentsReady(): FlickingOptions["resizeOnContentsReady"] {
     return this._resizeOnContentsReady;
   }
 
   /**
-   * If you enable this option on child Flicking when the Flicking is placed inside the Flicking, the parent Flicking will move in the same direction after the child Flicking reaches the first/last panel.
-   * If the parent Flicking and child Flicking have different horizontal option, you do not need to set this option.
-   * @ko Flicking 내부에 Flicking이 배치될 때 하위 Flicking에서 이 옵션을 활성화하면 하위 Flicking이 첫/마지막 패널에 도달한 뒤부터 같은 방향으로 상위 Flicking이 움직입니다.
-   * 만약 상위 Flicking과 하위 Flicking이 서로 다른 horizontal 옵션을 가지고 있다면 이 옵션을 설정할 필요가 없습니다.
-   * @type {boolean}
-   * @default false
-   * @see {@link https://naver.github.io/egjs-flicking/Options#nested nested ( Options )}
+   * Current value of the {@link FlickingOptions.nested | nested} option.
+   * @since 4.7.0
    */
-  public get nested() {
+  public get nested(): FlickingOptions["nested"] {
     return this._nested;
   }
 
   // EVENTS
-  /**
-   * A Threshold from viewport edge before triggering `needPanel` event
-   * @ko `needPanel`이벤트가 발생하기 위한 뷰포트 끝으로부터의 최대 거리
-   * @type {number}
-   * @default 0
-   * @see {@link https://naver.github.io/egjs-flicking/Options#needpanelthreshold needPanelThreshold ( Options )}
-   */
-  public get needPanelThreshold() {
+  /** Current value of the {@link FlickingOptions.needPanelThreshold | needPanelThreshold} option. */
+  public get needPanelThreshold(): FlickingOptions["needPanelThreshold"] {
     return this._needPanelThreshold;
   }
 
   /**
-   * When enabled, events are not triggered before `ready` when initializing
-   * @ko 활성화할 경우 초기화시 `ready` 이벤트 이전의 이벤트가 발생하지 않습니다.
-   * @type {boolean}
-   * @default true
-   * @see {@link https://naver.github.io/egjs-flicking/Options#preventeventsbeforeinit preventEventsBeforeInit ( Options )}
+   * Current value of the {@link FlickingOptions.preventEventsBeforeInit | preventEventsBeforeInit} option.
+   * @since 4.2.0
    */
-  public get preventEventsBeforeInit() {
+  public get preventEventsBeforeInit(): FlickingOptions["preventEventsBeforeInit"] {
     return this._preventEventsBeforeInit;
   }
 
   // ANIMATION
-  /**
-   * Deceleration value for panel movement animation which is triggered by user input. A higher value means a shorter animation time
-   * @ko 사용자의 동작으로 가속도가 적용된 패널 이동 애니메이션의 감속도. 값이 높을수록 애니메이션 실행 시간이 짧아집니다
-   * @type {number}
-   * @default 0.0075
-   * @see {@link https://naver.github.io/egjs-flicking/Options#deceleration deceleration ( Options )}
-   */
-  public get deceleration() {
+  /** Current value of the {@link FlickingOptions.deceleration | deceleration} option. */
+  public get deceleration(): FlickingOptions["deceleration"] {
     return this._deceleration;
   }
 
-  /**
-   * An easing function applied to the panel movement animation. Default value is `easeOutCubic`
-   * @ko 패널 이동 애니메이션에 적용할 easing 함수. 기본값은 `easeOutCubic`이다
-   * @type {function}
-   * @default x => 1 - Math.pow(1 - x, 3)
-   * @see Easing Functions Cheat Sheet {@link http://easings.net/} <ko>이징 함수 Cheat Sheet {@link http://easings.net/}</ko>
-   * @see {@link https://naver.github.io/egjs-flicking/Options#easing Easing ( Options )}
-   */
-  public get easing() {
+  /** Current value of the {@link FlickingOptions.easing | easing} option. */
+  public get easing(): FlickingOptions["easing"] {
     return this._easing;
   }
 
-  /**
-   * Default duration of the animation (ms)
-   * @ko 디폴트 애니메이션 재생 시간 (ms)
-   * @type {number}
-   * @default 500
-   * @see {@link https://naver.github.io/egjs-flicking/Options#duration duration ( Options )}
-   */
-  public get duration() {
+  /** Current value of the {@link FlickingOptions.duration | duration} option. */
+  public get duration(): FlickingOptions["duration"] {
     return this._duration;
   }
 
   // INPUT
-  /**
-   * Types of input devices to enable
-   * @ko 활성화할 입력 장치 종류
-   * @type {string[]}
-   * @default ["touch", "mouse"]
-   * @see {@link https://naver.github.io/egjs-axes/Options#paninput-options Possible values (PanInputOption#inputType)}
-   * <ko>{@link https://naver.github.io/egjs-axes/Options#paninput-options 가능한 값들 (PanInputOption#inputType)}</ko>
-   * @see {@link https://naver.github.io/egjs-flicking/Options#inputtype inputType ( Options )}
-   */
-  public get inputType() {
+  /** Current value of the {@link FlickingOptions.inputType | inputType} option. */
+  public get inputType(): FlickingOptions["inputType"] {
     return this._inputType;
   }
 
-  /**
-   * Movement style by user input. This will change instance type of {@link Flicking#control}
-   * You can use the values of the constant {@link MOVE_TYPE}
-   * @ko 사용자 입력에 의한 이동 방식. 이 값에 따라 {@link Flicking#control}의 인스턴스 타입이 결정됩니다
-   * 상수 {@link MOVE_TYPE}에 정의된 값들을 이용할 수 있습니다
-   * @type {MOVE_TYPE | Pair<string, object>}
-   * @default "snap"
-   * @see {@link https://naver.github.io/egjs-flicking/Options#movetype moveType ( Options )}
-   * @example
-   * |moveType|control|options|
-   * |:---:|:---:|:---:|
-   * |"snap"|{@link SnapControl}||
-   * |"freeScroll"|{@link FreeControl}|{@link FreeControlOptions}|
-   *
-   * ```ts
-   * import Flicking, { MOVE_TYPE } from "@egjs/flicking";
-   *
-   * const flicking = new Flicking({
-   *   moveType: MOVE_TYPE.SNAP
-   * });
-   * ```
-   *
-   * ```ts
-   * const flicking = new Flicking({
-   *   // If you want more specific settings for the moveType
-   *   // [moveType, options for that moveType]
-   *   // In this case, it's ["freeScroll", FreeControlOptions]
-   *   moveType: [MOVE_TYPE.FREE_SCROLL, { stopAtEdge: true }]
-   * });
-   * ```
-   */
-  public get moveType() {
+  /** Current value of the {@link FlickingOptions.moveType | moveType} option. */
+  public get moveType(): FlickingOptions["moveType"] {
     return this._moveType;
   }
 
-  /**
-   * Movement threshold to change panel (unit: px). It should be dragged above the threshold to change the current panel.
-   * @ko 패널 변경을 위한 이동 임계값 (단위: px). 주어진 값 이상으로 스크롤해야만 패널 변경이 가능합니다.
-   * @type {number}
-   * @default 40
-   * @see {@link https://naver.github.io/egjs-flicking/Options#threshold Threshold ( Options )}
-   */
-  public get threshold() {
+  /** Current value of the {@link FlickingOptions.threshold | threshold} option. */
+  public get threshold(): FlickingOptions["threshold"] {
     return this._threshold;
   }
 
-  /**
-   * Minimal distance of user input before recognizing (unit: px). It should be dragged above the dragThreshold to move the panel.
-   * @ko 사용자의 입력을 인식하기 위한 최소한의 거리 (단위: px). 주어진 값 이상으로 스크롤해야만 패널이 움직입니다.
-   * @type {number}
-   * @default 1
-   * @see {@link https://naver.github.io/egjs-flicking/Options#dragThreshold dragThreshold ( Options )}
-   */
-  public get dragThreshold() {
+  /** Current value of the {@link FlickingOptions.dragThreshold | dragThreshold} option. */
+  public get dragThreshold(): FlickingOptions["dragThreshold"] {
     return this._dragThreshold;
   }
+
   /**
-   * The minimum distance for animation to proceed. If the distance to be moved is less than `animationThreshold`, the movement proceeds immediately without animation (duration: 0).
-   * @ko animation이 진행되기 위한 최소한의 거리. 이동하려는 거리가 `animationThreshold`보다 적으면 애니메이션 없이(duration: 0) 즉시 이동한다.
-   * @type {number}
-   * @default 0.5
-   * @see {@link https://naver.github.io/egjs-flicking/Options#animationThreshold animationThreshold ( Options )}
+   * Current value of the {@link FlickingOptions.animationThreshold | animationThreshold} option.
+   * @since 4.15.0
    */
   public get animationThreshold() {
     return this._animationThreshold;
   }
+
   /**
-   * Using `useCSSOrder` does not change the DOM order, but the `order` CSS property changes the order on the screen. (When `circular` is used, the DOM order changes depending on the position.)
-   * When using `iframe`, you can prevent reloading when the DOM order changes.
-   * In svelte, CSS order is always used.
-   * @ko `useCSSOrder`를 사용하면 DOM의 순서는 변경되지 않지만 `order` css가 설정되면서 화면상 순서가 바뀐다. (`circular`를 사용한 경우 위치에 따라 DOM의 순서가 변경된다.)
-   * `iframe`을 사용하는 경우 DOM의 순서가 변경되면서 reload가 되는 것을 막을 수 있다.
-   * svelte에서는 css order를 무조건 사용한다.
-   * @type {boolean}
-   * @default false
-   * @see {@link https://naver.github.io/egjs-flicking/Options#useCSSOrder useCSSOrder ( Options )}
+   * Current value of the {@link FlickingOptions.useCSSOrder | useCSSOrder} option.
+   * @since 4.15.0
    */
   public get useCSSOrder() {
     return this._useCSSOrder;
   }
 
-  /**
-   * Set animation to be interruptable by click/touch.
-   * @ko 사용자의 클릭/터치로 인해 애니메이션을 도중에 멈출 수 있도록 설정합니다.
-   * @type {boolean}
-   * @default true
-   * @see {@link https://naver.github.io/egjs-flicking/Options#interruptable Interruptable ( Options )}
-   */
-  public get interruptable() {
+  /** Current value of the {@link FlickingOptions.interruptable | interruptable} option. */
+  public get interruptable(): FlickingOptions["interruptable"] {
     return this._interruptable;
   }
 
-  /**
-   * The size value of the bounce area. Only can be enabled when `circular=false`.
-   * You can set different bounce value for prev/next direction by using array.
-   * `number` for px value, and `string` for px, and % value relative to viewport size.
-   * You have to call {@link Control#updateInput} after changing this to take effect.
-   * @ko Flicking이 최대 영역을 넘어서 갈 수 있는 최대 크기. `circular=false`인 경우에만 사용할 수 있습니다.
-   * 배열을 통해 prev/next 방향에 대해 서로 다른 바운스 값을 지정할 수 있습니다.
-   * `number`를 통해 px값을, `stirng`을 통해 px 혹은 뷰포트 크기 대비 %값을 사용할 수 있습니다.
-   * 이 값을 변경시 {@link Control#updateInput}를 호출해야 합니다.
-   * @type {string | number | Array<string | number>}
-   * @default "20%"
-   * @see {@link https://naver.github.io/egjs-flicking/Options#bounce bounce ( Options )}
-   * @example
-   * ```ts
-   * const possibleOptions = [
-   *   // % values, relative to viewport element(".flicking-viewport")'s size
-   *   "0%", "25%", "42%",
-   *   // px values, arithmetic calculation with (+/-) is also allowed.
-   *   "0px", "100px", "50% - 25px",
-   *   // numbers, same to number + px ("0px", "100px")
-   *   0, 100, 1000
-   * ];
-   * ```
-   *
-   * @example
-   * ```ts
-   * const flicking = new Flicking("#el", { bounce: "20%" });
-   *
-   * flicking.bounce = "100%";
-   * flicking.control.updateInput(); // Call this to update!
-   * ```
-   */
-  public get bounce() {
+  /** Current value of the {@link FlickingOptions.bounce | bounce} option. */
+  public get bounce(): FlickingOptions["bounce"] {
     return this._bounce;
   }
 
-  /**
-   * Size of the area from the right edge in iOS safari (in px) which enables swipe-back or swipe-forward
-   * @ko iOS Safari에서 swipe를 통한 뒤로가기/앞으로가기를 활성화하는 오른쪽 끝으로부터의 영역의 크기 (px)
-   * @type {number}
-   * @default 30
-   * @see {@link https://naver.github.io/egjs-flicking/Options#iosedgeswipethreshold iOSEdgeSwipeThreshold ( Options )}
-   */
-  public get iOSEdgeSwipeThreshold() {
+  /** Current value of the {@link FlickingOptions.iOSEdgeSwipeThreshold | iOSEdgeSwipeThreshold} option. */
+  public get iOSEdgeSwipeThreshold(): FlickingOptions["iOSEdgeSwipeThreshold"] {
     return this._iOSEdgeSwipeThreshold;
   }
 
-  /**
-   * Automatically prevent `click` event if the user has dragged at least a single pixel on the viewport element
-   * @ko 사용자가 뷰포트 영역을 1픽셀이라도 드래그했을 경우 자동으로 {@link https://developer.mozilla.org/ko/docs/Web/API/Element/click_event click} 이벤트를 취소합니다
-   * @type {boolean}
-   * @default true
-   * @see {@link https://naver.github.io/egjs-flicking/Options#preventclickondrag preventClickOnDrag ( Options )}
-   */
-  public get preventClickOnDrag() {
+  /** Current value of the {@link FlickingOptions.preventClickOnDrag | preventClickOnDrag} option. */
+  public get preventClickOnDrag(): FlickingOptions["preventClickOnDrag"] {
     return this._preventClickOnDrag;
   }
 
   /**
-   * Whether to use the {@link https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault preventDefault} when the user starts dragging
-   * @ko 사용자가 드래그를 시작할 때 {@link https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault preventDefault} 실행 여부
-   * @type {boolean}
-   * @default false
-   * @see {@link https://naver.github.io/egjs-flicking/Options#preventDefaultOnDrag preventDefaultOnDrag ( Options )}
+   * Current value of the {@link FlickingOptions.preventDefaultOnDrag | preventDefaultOnDrag} option.
+   * @since 4.11.0
    */
-  public get preventDefaultOnDrag() {
+  public get preventDefaultOnDrag(): FlickingOptions["preventDefaultOnDrag"] {
     return this._preventDefaultOnDrag;
   }
 
-  /**
-   * Automatically call {@link Flicking#disableInput disableInput()} on initialization
-   * @ko Flicking init시에 {@link Flicking#disableInput disableInput()}을 바로 호출합니다
-   * @type {boolean}
-   * @default false
-   * @see {@link https://naver.github.io/egjs-flicking/Options#disableoninit disableOnInit ( Options )}
-   */
-  public get disableOnInit() {
+  /** Current value of the {@link FlickingOptions.disableOnInit | disableOnInit} option. */
+  public get disableOnInit(): FlickingOptions["disableOnInit"] {
     return this._disableOnInit;
   }
 
   /**
-   * Change active panel index on mouse/touch hold while animating.
-   * `index` of the `willChange`/`willRestore` event will be used as new index.
-   * @ko 애니메이션 도중 마우스/터치 입력시 현재 활성화된 패널의 인덱스를 변경합니다.
-   * `willChange`/`willRestore` 이벤트의 `index`값이 새로운 인덱스로 사용될 것입니다.
-   * @type {boolean}
-   * @default false
-   * @see {@link https://naver.github.io/egjs-flicking/Options#changeonhold changeOnHold ( Options )}
+   * Current value of the {@link FlickingOptions.changeOnHold | changeOnHold} option.
+   * @since 4.8.0
    */
-  public get changeOnHold() {
+  public get changeOnHold(): FlickingOptions["changeOnHold"] {
     return this._changeOnHold;
   }
 
   // PERFORMANCE
-  /**
-   * Whether to render visible panels only. This can dramatically increase performance when there're many panels
-   * @ko 보이는 패널만 렌더링할지 여부를 설정합니다. 패널이 많을 경우에 퍼포먼스를 크게 향상시킬 수 있습니다
-   * @type {boolean}
-   * @default false
-   * @see {@link https://naver.github.io/egjs-flicking/Options#renderonlyvisible renderOnlyVisible ( Options )}
-   */
-  public get renderOnlyVisible() {
+  /** Current value of the {@link FlickingOptions.renderOnlyVisible | renderOnlyVisible} option. */
+  public get renderOnlyVisible(): FlickingOptions["renderOnlyVisible"] {
     return this._renderOnlyVisible;
   }
 
   /**
-   * By enabling this option, it will reduce memory consumption by restricting the number of DOM elements to `panelsPerView + 1`
-   * Must be used with `panelsPerview`.
-   * After Flicking's initialized, this property can be used to add/remove the panel count.
-   * @ko 이 옵션을 활성화할 경우 패널 엘리먼트의 개수를 `panelsPerView + 1` 개로 고정함으로써, 메모리 사용량을 줄일 수 있습니다.
-   * `panelsPerView` 옵션과 함께 사용되어야만 합니다.
-   * Flicking 초기화 이후에, 이 프로퍼티는 렌더링하는 패널의 개수를 추가/제거하기 위해 사용될 수 있습니다.
-   * @type {VirtualManager}
-   * @property {function} renderPanel A rendering function for the panel element's innerHTML<ko>패널 엘리먼트의 innerHTML을 렌더링하는 함수</ko>
-   * @property {number} initialPanelCount Initial panel count to render<ko>최초로 렌더링할 패널의 개수</ko>
-   * @property {boolean} [cache=false] Whether to cache rendered panel's innerHTML<ko>렌더링된 패널의 innerHTML 정보를 캐시할지 여부</ko>
-   * @property {string} [panelClass="flicking-panel"] The class name that will be applied to rendered panel elements<ko>렌더링되는 패널 엘리먼트에 적용될 클래스 이름</ko>
-   * @see {@link https://naver.github.io/egjs-flicking/Options#virtual virtual ( Options )}
-   * @example
-   * ```ts
-   * import Flicking, { VirtualPanel } from "@egjs/flicking";
-   *
-   * const flicking = new Flicking("#some_el", {
-   *   panelsPerView: 3,
-   *   virtual: {
-   *     renderPanel: (panel: VirtualPanel, index: number) => `Panel ${index}`,
-   *     initialPanelCount: 100
-   *   }
-   * });
-   *
-   * // Add 100 virtual panels (at the end)
-   * flicking.virtual.append(100);
-   *
-   * // Remove 100 virtual panels from 0 to 100
-   * flicking.virtual.remove(0, 100);
-   * ```
+   * {@link VirtualManager} instance that manages virtual panels
+   * @privateRemarks
+   * The virtualManager instance is created during construction by {@link Flicking} constructor.
+   * @readonly
    */
-  public get virtual() {
+  public get virtual(): VirtualManager {
     return this._virtualManager;
   }
 
   // OTHERS
-  /**
-   * Call {@link Flicking#init init()} automatically when creating Flicking's instance
-   * @ko Flicking 인스턴스를 생성할 때 자동으로 {@link Flicking#init init()}를 호출합니다
-   * @type {boolean}
-   * @default true
-   * @see {@link https://naver.github.io/egjs-flicking/Options#autoinit autoInit ( Options )}
-   * @readonly
-   */
-  public get autoInit() {
+  /** Current value of the {@link FlickingOptions.autoInit | autoInit} option. */
+  public get autoInit(): FlickingOptions["autoInit"] {
     return this._autoInit;
   }
 
-  /**
-   * Whether to automatically call {@link Flicking#resize resize()} when the viewport element(.flicking-viewport)'s size is changed
-   * @ko 뷰포트 엘리먼트(.flicking-viewport)의 크기 변경시 {@link Flicking#resize resize()} 메소드를 자동으로 호출할지 여부를 설정합니다
-   * @type {boolean}
-   * @default true
-   */
-  public get autoResize() {
+  /** Current value of the {@link FlickingOptions.autoResize | autoResize} option. */
+  public get autoResize(): FlickingOptions["autoResize"] {
     return this._autoResize;
   }
 
   /**
-   * Whether to listen {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver}'s event instead of Window's {@link https://developer.mozilla.org/ko/docs/Web/API/Window/resize_event resize} event when using the `autoResize` option
-   * @ko autoResize 옵션 사용시 {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver}의 이벤트를 Window객체의 {@link https://developer.mozilla.org/ko/docs/Web/API/Window/resize_event resize} 이벤트 대신 수신할지 여부를 설정합니다
-   * @type {boolean}
-   * @default true
-   * @see {@link https://naver.github.io/egjs-flicking/Options#useresizeobserver useResizeObserver ( Options )}
+   * Current value of the {@link FlickingOptions.useResizeObserver | useResizeObserver} option.
+   * @since 4.4.0
    */
-  public get useResizeObserver() { return this._useResizeObserver; }
+  public get useResizeObserver(): FlickingOptions["useResizeObserver"] {
+    return this._useResizeObserver;
+  }
+
   /**
-   * 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 이벤트가 발생하도록 보장합니다.
+   * Current value of the {@link FlickingOptions.observePanelResize | observePanelResize} option.
+   * @since 4.13.1
    */
-  public get observePanelResize() { return this._observePanelResize; }
+  public get observePanelResize(): FlickingOptions["observePanelResize"] {
+    return this._observePanelResize;
+  }
+
   /**
-   * Delays size recalculation from `autoResize` by the given time in milisecond.
-   * If the size is changed again while being delayed, it cancels the previous one and delays from the beginning again.
-   * This can increase performance by preventing `resize` being called too often.
-   * @ko `autoResize` 설정시에 호출되는 크기 재계산을 주어진 시간(단위: ms)만큼 지연시킵니다.
-   * 지연시키는 도중 크기가 다시 변경되었을 경우, 이전 것을 취소하고 주어진 시간만큼 다시 지연시킵니다.
-   * 이를 통해 `resize`가 너무 많이 호출되는 것을 방지하여 성능을 향상시킬 수 있습니다.
-   * @type {number}
-   * @default 0
-   * @see {@link https://naver.github.io/egjs-flicking/Options#resizedebounce resizeDebounce ( Options )}
-   */
-  public get resizeDebounce() {
+   * Current value of the {@link FlickingOptions.resizeDebounce | resizeDebounce} option.
+   * @since 4.6.0
+   */
+  public get resizeDebounce(): FlickingOptions["resizeDebounce"] {
     return this._resizeDebounce;
   }
 
   /**
-   * The maximum time for size recalculation delay when using `resizeDebounce`, in milisecond.
-   * This guarantees that size recalculation is performed at least once every (n)ms.
-   * @ko `resizeDebounce` 사용시에 크기 재계산이 지연되는 최대 시간을 지정합니다. (단위: ms)
-   * 이를 통해, 적어도 (n)ms에 한번은 크기 재계산을 수행하는 것을 보장할 수 있습니다.
-   * @type {number}
-   * @default 100
-   * @see {@link https://naver.github.io/egjs-flicking/Options#maxresizedebounce maxResizeDebounce ( Options )}
+   * Current value of the {@link FlickingOptions.maxResizeDebounce | maxResizeDebounce} option.
+   * @since 4.6.0
    */
-  public get maxResizeDebounce() {
+  public get maxResizeDebounce(): FlickingOptions["maxResizeDebounce"] {
     return this._maxResizeDebounce;
   }
 
   /**
-   * By enabling this, Flicking will calculate all internal size with CSS width computed with getComputedStyle.
-   * This can prevent 1px offset issue in some cases where panel size has the fractional part.
-   * All sizes will have the original size before CSS {@link https://developer.mozilla.org/en-US/docs/Web/CSS/transform transform} is applied on the element.
-   * @ko 이 옵션을 활성화할 경우, Flicking은 내부의 모든 크기를 {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect getBoundingClientRect}를 이용하여 계산합니다.
-   * 이를 통해, 패널 크기에 소수점을 포함할 경우에 발생할 수 있는 일부 1px 오프셋 이슈를 해결 가능합니다.
-   * 모든 크기는 CSS {@link https://developer.mozilla.org/en-US/docs/Web/CSS/transform transform}이 엘리먼트에 적용되기 이전의 크기를 사용할 것입니다.
-   * @type {boolean}
-   * @default false
-   * @see {@link https://naver.github.io/egjs-flicking/Options#usefractionalsize useFractionalSize ( Options )}
-   */
-  public get useFractionalSize() {
+   * Current value of the {@link FlickingOptions.useFractionalSize | useFractionalSize} option.
+   * @since 4.9.0
+   */
+  public get useFractionalSize(): FlickingOptions["useFractionalSize"] {
     return this._useFractionalSize;
   }
 
-  /**
-   * This is an option for the frameworks(React, Vue, Angular, ...). Don't set it as it's automatically managed by Flicking.
-   * @ko 프레임워크(React, Vue, Angular, ...)에서만 사용하는 옵션으로, 자동으로 설정되므로 따로 사용하실 필요 없습니다!
-   * @default null
-   * @internal
-   * @readonly
-   */
-  public get externalRenderer() {
+  /** Current value of the {@link FlickingOptions.externalRenderer | externalRenderer} option. */
+  public get externalRenderer(): FlickingOptions["externalRenderer"] {
     return this._externalRenderer;
   }
 
   /**
-   * This is an option for the frameworks(React, Vue, Angular, ...). Don't set it as it's automatically managed by Flicking.
-   * @ko 프레임워크(React, Vue, Angular, ...)에서만 사용하는 옵션으로, 자동으로 설정되므로 따로 사용하실 필요 없습니다!
-   * @default null
-   * @internal
-   * @readonly
-   * @deprecated
+   * @deprecated Use {@link Flicking.externalRenderer | externalRenderer} instead.
+   * Current value of the {@link FlickingOptions.renderExternal | renderExternal} option.
    */
-  public get renderExternal() {
+  public get renderExternal(): FlickingOptions["renderExternal"] {
     return this._renderExternal;
   }
 
-  /**
-   * 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
-   */
-  public get optimizeSizeUpdate() {
+  /** @internal */
+  public get optimizeSizeUpdate(): FlickingOptions["optimizeSizeUpdate"] {
     return this._optimizeSizeUpdate;
   }
 
   // Options Setter
   // UI / LAYOUT
+  /**
+   * Sets {@link FlickingOptions.align}.
+   * @privateRemarks
+   * Setting this value updates the renderer and camera alignment, and triggers a resize operation.
+   */
   public set align(val: FlickingOptions["align"]) {
     this._align = val;
     this._renderer.align = val;
@@ -1023,48 +1105,84 @@ class Flicking extends Component<FlickingEvents> {
     this._defaultIndex = val;
   }
 
+  /**
+   * Sets {@link FlickingOptions.horizontal}.
+   * @privateRemarks
+   * Setting this value updates the control direction and triggers a resize operation.
+   */
   public set horizontal(val: FlickingOptions["horizontal"]) {
     this._horizontal = val;
     this._control.controller.updateDirection();
     void this.resize();
   }
 
+  /**
+   * Sets {@link FlickingOptions.circular}.
+   * @privateRemarks
+   * Setting this value triggers a resize operation to recalculate panel positions.
+   */
   public set circular(val: FlickingOptions["circular"]) {
     this._circular = val;
     void this.resize();
   }
 
+  /**
+   * Sets {@link FlickingOptions.bound}.
+   * @privateRemarks
+   * Setting this value triggers a resize operation to recalculate panel positions.
+   */
   public set bound(val: FlickingOptions["bound"]) {
     this._bound = val;
     void this.resize();
   }
 
+  /**
+   * Sets {@link FlickingOptions.adaptive}.
+   * @privateRemarks
+   * Setting this value triggers a resize operation to recalculate panel sizes.
+   */
   public set adaptive(val: FlickingOptions["adaptive"]) {
     this._adaptive = val;
     void this.resize();
   }
 
+  /**
+   * Sets {@link FlickingOptions.panelsPerView}.
+   * @privateRemarks
+   * Setting this value triggers a resize operation to recalculate panel sizes.
+   */
   public set panelsPerView(val: FlickingOptions["panelsPerView"]) {
     this._panelsPerView = val;
     void this.resize();
   }
 
-  public set noPanelStyleOverride(
-    val: FlickingOptions["noPanelStyleOverride"]
-  ) {
+  /**
+   * Sets {@link FlickingOptions.noPanelStyleOverride}.
+   * @privateRemarks
+   * Setting this value triggers a resize operation to update panel styles.
+   */
+  public set noPanelStyleOverride(val: FlickingOptions["noPanelStyleOverride"]) {
     this._noPanelStyleOverride = val;
     void this.resize();
   }
 
-  public set resizeOnContentsReady(
-    val: FlickingOptions["resizeOnContentsReady"]
-  ) {
+  /**
+   * Sets {@link FlickingOptions.resizeOnContentsReady}.
+   * @privateRemarks
+   * When set to `true`, immediately checks all panels for content readiness.
+   */
+  public set resizeOnContentsReady(val: FlickingOptions["resizeOnContentsReady"]) {
     this._resizeOnContentsReady = val;
     if (val) {
       this._renderer.checkPanelContentsReady(this._renderer.panels);
     }
   }
 
+  /**
+   * Sets {@link FlickingOptions.nested}.
+   * @privateRemarks
+   * Setting this value updates the control's axes options.
+   */
   public set nested(val: FlickingOptions["nested"]) {
     this._nested = val;
     const axes = this._control.controller.axes;
@@ -1079,13 +1197,16 @@ class Flicking extends Component<FlickingEvents> {
     this._needPanelThreshold = val;
   }
 
-  public set preventEventsBeforeInit(
-    val: FlickingOptions["preventEventsBeforeInit"]
-  ) {
+  public set preventEventsBeforeInit(val: FlickingOptions["preventEventsBeforeInit"]) {
     this._preventEventsBeforeInit = val;
   }
 
   // ANIMATION
+  /**
+   * Sets {@link FlickingOptions.deceleration}.
+   * @privateRemarks
+   * Setting this value updates the control's axes deceleration option.
+   */
   public set deceleration(val: FlickingOptions["deceleration"]) {
     this._deceleration = val;
     const axes = this._control.controller.axes;
@@ -1095,6 +1216,11 @@ class Flicking extends Component<FlickingEvents> {
     }
   }
 
+  /**
+   * Sets {@link FlickingOptions.easing}.
+   * @privateRemarks
+   * Setting this value updates the control's axes easing option.
+   */
   public set easing(val: FlickingOptions["easing"]) {
     this._easing = val;
     const axes = this._control.controller.axes;
@@ -1109,6 +1235,11 @@ class Flicking extends Component<FlickingEvents> {
   }
 
   // INPUT
+  /**
+   * Sets {@link FlickingOptions.inputType}.
+   * @privateRemarks
+   * Setting this value updates the control's pan input options.
+   */
   public set inputType(val: FlickingOptions["inputType"]) {
     this._inputType = val;
     const panInput = this._control.controller.panInput;
@@ -1118,6 +1249,11 @@ class Flicking extends Component<FlickingEvents> {
     }
   }
 
+  /**
+   * Sets {@link FlickingOptions.moveType}.
+   * @privateRemarks
+   * Setting this value creates a new Control instance based on the moveType and preserves the current panel position and progress.
+   */
   public set moveType(val: FlickingOptions["moveType"]) {
     this._moveType = val;
 
@@ -1126,9 +1262,7 @@ class Flicking extends Component<FlickingEvents> {
     const activePanel = prevControl.activePanel;
     newControl.copy(prevControl);
 
-    const prevProgressInPanel = activePanel
-      ? this._camera.getProgressInPanel(activePanel)
-      : 0;
+    const prevProgressInPanel = activePanel ? this._camera.getProgressInPanel(activePanel) : 0;
 
     this._control = newControl;
     this._control.updatePosition(prevProgressInPanel);
@@ -1139,6 +1273,11 @@ class Flicking extends Component<FlickingEvents> {
     this._threshold = val;
   }
 
+  /**
+   * Sets {@link FlickingOptions.dragThreshold}.
+   * @privateRemarks
+   * Setting this value updates the control's pan input threshold option.
+   */
   public set dragThreshold(val: FlickingOptions["dragThreshold"]) {
     this._dragThreshold = val;
     const panInput = this._control.controller.panInput;
@@ -1147,13 +1286,26 @@ class Flicking extends Component<FlickingEvents> {
       panInput.options.threshold = val;
     }
   }
+
+  /**
+   * Sets {@link FlickingOptions.animationThreshold}.
+   */
   public set animationThreshold(val: FlickingOptions["animationThreshold"]) {
     this._animationThreshold = val;
   }
+
+  /**
+   * Sets {@link FlickingOptions.useCSSOrder}.
+   */
   public set useCSSOrder(val: FlickingOptions["useCSSOrder"]) {
     this._useCSSOrder = val;
   }
 
+  /**
+   * Sets {@link FlickingOptions.interruptable}.
+   * @privateRemarks
+   * Setting this value updates the control's axes interruptable option.
+   */
   public set interruptable(val: FlickingOptions["interruptable"]) {
     this._interruptable = val;
 
@@ -1164,14 +1316,22 @@ class Flicking extends Component<FlickingEvents> {
     }
   }
 
+  /**
+   * Sets {@link FlickingOptions.bounce}.
+   * @privateRemarks
+   * Setting this value updates the control input configuration.
+   */
   public set bounce(val: FlickingOptions["bounce"]) {
     this._bounce = val;
     this._control.updateInput();
   }
 
-  public set iOSEdgeSwipeThreshold(
-    val: FlickingOptions["iOSEdgeSwipeThreshold"]
-  ) {
+  /**
+   * Sets {@link FlickingOptions.iOSEdgeSwipeThreshold}.
+   * @privateRemarks
+   * Setting this value updates the control's pan input iOS edge swipe threshold option.
+   */
+  public set iOSEdgeSwipeThreshold(val: FlickingOptions["iOSEdgeSwipeThreshold"]) {
     this._iOSEdgeSwipeThreshold = val;
     const panInput = this._control.controller.panInput;
 
@@ -1180,6 +1340,11 @@ class Flicking extends Component<FlickingEvents> {
     }
   }
 
+  /**
+   * Sets {@link FlickingOptions.preventClickOnDrag}.
+   * @privateRemarks
+   * Setting this value adds or removes the prevent click handler from the control.
+   */
   public set preventClickOnDrag(val: FlickingOptions["preventClickOnDrag"]) {
     const prevVal = this._preventClickOnDrag;
 
@@ -1196,9 +1361,12 @@ class Flicking extends Component<FlickingEvents> {
     this._preventClickOnDrag = val;
   }
 
-  public set preventDefaultOnDrag(
-    val: FlickingOptions["preventDefaultOnDrag"]
-  ) {
+  /**
+   * Sets {@link FlickingOptions.preventDefaultOnDrag}.
+   * @privateRemarks
+   * Setting this value updates the control's pan input preventDefaultOnDrag option.
+   */
+  public set preventDefaultOnDrag(val: FlickingOptions["preventDefaultOnDrag"]) {
     this._preventDefaultOnDrag = val;
     const panInput = this._control.controller.panInput;
 
@@ -1216,12 +1384,22 @@ class Flicking extends Component<FlickingEvents> {
   }
 
   // PERFORMANCE
+  /**
+   * Sets {@link FlickingOptions.renderOnlyVisible}.
+   * @privateRemarks
+   * Setting this value triggers an immediate render operation.
+   */
   public set renderOnlyVisible(val: FlickingOptions["renderOnlyVisible"]) {
     this._renderOnlyVisible = val;
     void this._renderer.render();
   }
 
   // OTHERS
+  /**
+   * Sets {@link FlickingOptions.autoResize}.
+   * @privateRemarks
+   * Setting this value enables or disables the auto resizer if Flicking is already initialized.
+   */
   public set autoResize(val: FlickingOptions["autoResize"]) {
     this._autoResize = val;
 
@@ -1236,6 +1414,11 @@ class Flicking extends Component<FlickingEvents> {
     }
   }
 
+  /**
+   * Sets {@link FlickingOptions.useResizeObserver}.
+   * @privateRemarks
+   * Setting this value re-enables the auto resizer if Flicking is initialized and autoResize is enabled.
+   */
   public set useResizeObserver(val: FlickingOptions["useResizeObserver"]) {
     this._useResizeObserver = val;
 
@@ -1244,6 +1427,11 @@ class Flicking extends Component<FlickingEvents> {
     }
   }
 
+  /**
+   * Sets {@link FlickingOptions.observePanelResize}.
+   * @privateRemarks
+   * Setting this value starts or stops observing panel sizes if Flicking is initialized and autoResize is enabled.
+   */
   public set observePanelResize(val: FlickingOptions["observePanelResize"]) {
     this._observePanelResize = val;
 
@@ -1260,23 +1448,10 @@ class Flicking extends Component<FlickingEvents> {
     this._optimizeSizeUpdate = val;
   }
 
-  /**
-   * @param root A root HTMLElement to initialize Flicking on it. When it's a typeof `string`, it should be a css selector string
-   * <ko>Flicking을 초기화할 HTMLElement로, `string` 타입으로 지정시 css 선택자 문자열을 지정해야 합니다.</ko>
-   * @param {object} [options={}] An options object for Flicking.<ko>Flicking에 적용할 옵션 오브젝트</ko>
-   * @throws {FlickingError}
-   * |code|condition|
-   * |---|---|
-   * |{@link ERROR_CODE WRONG_TYPE}|When the root is not either string or HTMLElement|
-   * |{@link ERROR_CODE ELEMENT_NOT_FOUND}|When the element with given CSS selector does not exist|
-   * <ko>
-   *
-   * |code|조건|
-   * |---|---|
-   * |{@link ERROR_CODE WRONG_TYPE}|루트 엘리먼트가 string이나 HTMLElement가 아닐 경우|
-   * |{@link ERROR_CODE ELEMENT_NOT_FOUND}|주어진 CSS selector로 엘리먼트를 찾지 못했을 경우|
-   *
-   * </ko>
+  /** Creates a new Flicking instance
+   * @param root - A root HTMLElement to initialize Flicking on it. When it's a typeof `string`, it should be a css selector string
+   * @param options - A {@link FlickingOptions} object
+   * @throws {@link InitializationErrors}
    * @example
    * ```ts
    * import Flicking from "@egjs/flicking";
@@ -1288,51 +1463,54 @@ class Flicking extends Component<FlickingEvents> {
    * const flicking2 = new Flicking(".flicking-viewport", { circular: true });
    * ```
    */
-  public constructor(root: HTMLElement | string, {
-    align = ALIGN.CENTER,
-    defaultIndex = 0,
-    horizontal = true,
-    circular = false,
-    circularFallback = CIRCULAR_FALLBACK.LINEAR,
-    bound = false,
-    adaptive = false,
-    panelsPerView = -1,
-    noPanelStyleOverride = false,
-    resizeOnContentsReady = false,
-    nested = false,
-    needPanelThreshold = 0,
-    preventEventsBeforeInit = true,
-    deceleration = 0.0075,
-    duration = 500,
-    easing = x => 1 - Math.pow(1 - x, 3),
-    inputType = ["mouse", "touch"],
-    moveType = "snap",
-    threshold = 40,
-    dragThreshold = 1,
-    interruptable = true,
-    bounce = "20%",
-    iOSEdgeSwipeThreshold = 30,
-    preventClickOnDrag = true,
-    preventDefaultOnDrag = false,
-    disableOnInit = false,
-    changeOnHold = false,
-    renderOnlyVisible = false,
-    virtual = null,
-    autoInit = true,
-    autoResize = true,
-    useResizeObserver = true,
-    resizeDebounce = 0,
-    observePanelResize = false,
-    maxResizeDebounce = 100,
-    useFractionalSize = false,
-    externalRenderer = null,
-    renderExternal = null,
-    optimizeSizeUpdate = false,
-    animationThreshold = 0.5,
-    useCSSOrder = false,
-  }: Partial<FlickingOptions> = {}) {
+  public constructor(root: HTMLElement | string, options: Partial<FlickingOptions> = {}) {
     super();
 
+    // Destructure options with default values
+    const {
+      align = ALIGN.CENTER,
+      defaultIndex = 0,
+      horizontal = true,
+      circular = false,
+      circularFallback = CIRCULAR_FALLBACK.LINEAR,
+      bound = false,
+      adaptive = false,
+      panelsPerView = -1,
+      noPanelStyleOverride = false,
+      resizeOnContentsReady = false,
+      nested = false,
+      needPanelThreshold = 0,
+      preventEventsBeforeInit = true,
+      deceleration = 0.0075,
+      duration = 500,
+      easing = x => 1 - (1 - x) ** 3,
+      inputType = ["mouse", "touch"],
+      moveType = "snap",
+      threshold = 40,
+      dragThreshold = 1,
+      interruptable = true,
+      bounce = "20%",
+      iOSEdgeSwipeThreshold = 30,
+      preventClickOnDrag = true,
+      preventDefaultOnDrag = false,
+      disableOnInit = false,
+      changeOnHold = false,
+      renderOnlyVisible = false,
+      virtual = null,
+      autoInit = true,
+      autoResize = true,
+      useResizeObserver = true,
+      resizeDebounce = 0,
+      observePanelResize = false,
+      maxResizeDebounce = 100,
+      useFractionalSize = false,
+      externalRenderer = null,
+      renderExternal = null,
+      optimizeSizeUpdate = false,
+      animationThreshold = 0.5,
+      useCSSOrder = false
+    } = options;
+
     // Internal states
     this._initialized = false;
     this._plugins = [];
@@ -1395,12 +1573,12 @@ class Flicking extends Component<FlickingEvents> {
   }
 
   /**
-   * Initialize Flicking and move to the default index
-   * This is automatically called on Flicking's constructor when `autoInit` is true(default)
-   * @ko Flicking을 초기화하고, 디폴트 인덱스로 이동합니다
-   * 이 메소드는 `autoInit` 옵션이 true(default)일 경우 Flicking이 생성될 때 자동으로 호출됩니다
-   * @fires Flicking#ready
-   * @return {Promise<void>}
+   * Initialize Flicking and move to the default index.
+   * @remarks
+   * This method is automatically called in the constructor when {@link FlickingOptions.autoInit | autoInit} is `true` (default).
+   * If Flicking is already initialized, this method returns immediately without doing anything.
+   * @fires {@link ReadyEvent}
+   * @returns Promise that resolves when initialization is complete
    */
   public init(): Promise<void> {
     if (this._initialized) return Promise.resolve();
@@ -1439,7 +1617,7 @@ class Flicking extends Component<FlickingEvents> {
 
     return renderer.render().then(() => {
       // Done initializing & emit ready event
-      this._plugins.forEach((plugin) => plugin.init(this));
+      this._plugins.forEach(plugin => plugin.init(this));
 
       if (preventEventsBeforeInit) {
         this.trigger = originalTrigger;
@@ -1449,9 +1627,10 @@ class Flicking extends Component<FlickingEvents> {
   }
 
   /**
-   * Destroy Flicking and remove all event handlers
-   * @ko Flicking과 하위 컴포넌트들을 초기 상태로 되돌리고, 부착된 모든 이벤트 핸들러를 제거합니다
-   * @return {void}
+   * Destroy Flicking and remove all event handlers.
+   * @remarks
+   * This method cleans up all resources including event handlers, components, and plugins.
+   * After calling this method, {@link Flicking.initialized} will be `false` and the instance should not be used.
    */
   public destroy(): void {
     this.off();
@@ -1461,7 +1640,7 @@ class Flicking extends Component<FlickingEvents> {
     this._camera.destroy();
     this._renderer.destroy();
 
-    this._plugins.forEach((plugin) => plugin.destroy());
+    this._plugins.forEach(plugin => plugin.destroy());
 
     this._scheduleResize = false;
     this._initialized = false;
@@ -1469,129 +1648,41 @@ class Flicking extends Component<FlickingEvents> {
   }
 
   /**
-   * Move to the previous panel (current index - 1)
-   * @ko 이전 패널로 이동합니다 (현재 인덱스 - 1)
-   * @param {number} [duration={@link Flicking#duration options.duration}] Duration of the panel movement animation (unit: ms)<ko>패널 이동 애니메이션 진행 시간 (단위: ms)</ko>
-   * @async
-   * @fires Flicking#moveStart
-   * @fires Flicking#move
-   * @fires Flicking#moveEnd
-   * @fires Flicking#willChange
-   * @fires Flicking#changed
-   * @fires Flicking#willRestore
-   * @fires Flicking#restored
-   * @fires Flicking#needPanel
-   * @fires Flicking#visibleChange
-   * @fires Flicking#reachEdge
-   * @throws {FlickingError}
-   * |code|condition|
-   * |---|---|
-   * |{@link ERROR_CODE INDEX_OUT_OF_RANGE}|When the previous panel does not exist|
-   * |{@link ERROR_CODE ANIMATION_ALREADY_PLAYING}|When the animation is already playing|
-   * |{@link ERROR_CODE ANIMATION_INTERRUPTED}|When the animation is interrupted by user input|
-   * |{@link ERROR_CODE STOP_CALLED_BY_USER}|When the any of the event's `stop()` is called|
-   * <ko>
-   *
-   * |code|condition|
-   * |---|---|
-   * |{@link ERROR_CODE INDEX_OUT_OF_RANGE}|이전 패널이 존재하지 않을 경우|
-   * |{@link ERROR_CODE ANIMATION_ALREADY_PLAYING}|애니메이션이 이미 진행중인 경우|
-   * |{@link ERROR_CODE ANIMATION_INTERRUPTED}|사용자 입력에 의해 애니메이션이 중단된 경우|
-   * |{@link ERROR_CODE STOP_CALLED_BY_USER}|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우|
-   * </ko>
-   * @return {Promise<void>} A Promise which will be resolved after reaching the previous panel<ko>이전 패널 도달시에 resolve되는 Promise</ko>
+   * Move to the previous panel (current index - 1).
+   * @param duration - Duration of the panel movement animation (unit: ms). Defaults to {@link FlickingOptions.duration}
+   * @fires {@link MovementEvents}
+   * @throws {@link MovementErrors}
+   * @returns Promise that resolves after reaching the previous panel
    */
   public prev(duration: number = this._duration): Promise<void> {
-    return this.moveTo(
-      this._control.activePanel?.prev()?.index ?? -1,
-      duration,
-      DIRECTION.PREV
-    );
+    return this.moveTo(this._control.activePanel?.prev()?.index ?? -1, duration, DIRECTION.PREV);
   }
 
   /**
-   * Move to the next panel (current index + 1)
-   * @ko 다음 패널로 이동합니다 (현재 인덱스 + 1)
-   * @param {number} [duration={@link Flicking#duration options.duration}] Duration of the panel movement animation (unit: ms).<ko>패널 이동 애니메이션 진행 시간 (단위: ms)</ko>
-   * @async
-   * @fires Flicking#moveStart
-   * @fires Flicking#move
-   * @fires Flicking#moveEnd
-   * @fires Flicking#willChange
-   * @fires Flicking#changed
-   * @fires Flicking#willRestore
-   * @fires Flicking#restored
-   * @fires Flicking#needPanel
-   * @fires Flicking#visibleChange
-   * @fires Flicking#reachEdge
-   * @throws {FlickingError}
-   * |code|condition|
-   * |---|---|
-   * |{@link ERROR_CODE INDEX_OUT_OF_RANGE}|When the next panel does not exist|
-   * |{@link ERROR_CODE ANIMATION_ALREADY_PLAYING}|When the animation is already playing|
-   * |{@link ERROR_CODE ANIMATION_INTERRUPTED}|When the animation is interrupted by user input|
-   * |{@link ERROR_CODE STOP_CALLED_BY_USER}|When the any of the event's `stop()` is called|
-   * <ko>
-   *
-   * |code|condition|
-   * |---|---|
-   * |{@link ERROR_CODE INDEX_OUT_OF_RANGE}|다음 패널이 존재하지 않을 경우|
-   * |{@link ERROR_CODE ANIMATION_ALREADY_PLAYING}|애니메이션이 이미 진행중인 경우|
-   * |{@link ERROR_CODE ANIMATION_INTERRUPTED}|사용자 입력에 의해 애니메이션이 중단된 경우|
-   * |{@link ERROR_CODE STOP_CALLED_BY_USER}|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우|
-   *
-   * </ko>
-   * @return {Promise<void>} A Promise which will be resolved after reaching the next panel<ko>다음 패널 도달시에 resolve되는 Promise</ko>
+   * Move to the next panel (current index + 1).
+   * @param duration - Duration of the panel movement animation (unit: ms). Defaults to {@link FlickingOptions.duration}
+   * @fires {@link MovementEvents}
+   * @throws {@link MovementErrors}
+   * @returns Promise that resolves after reaching the next panel
    */
-  public next(duration: number = this._duration) {
-    return this.moveTo(
-      this._control.activePanel?.next()?.index ?? this._renderer.panelCount,
-      duration,
-      DIRECTION.NEXT
-    );
+  public next(duration: number = this._duration): Promise<void> {
+    return this.moveTo(this._control.activePanel?.next()?.index ?? this._renderer.panelCount, duration, DIRECTION.NEXT);
   }
 
   /**
-   * Move to the panel with given index
-   * @ko 주어진 인덱스에 해당하는 패널로 이동합니다
-   * @param {number} index The index of the panel to move<ko>이동할 패널의 인덱스</ko>
-   * @param {number} [duration={@link Flicking#duration options.duration}] Duration of the animation (unit: ms)<ko>애니메이션 진행 시간 (단위: ms)</ko>
-   * @param {DIRECTION} [direction=DIRECTION.NONE] Direction to move, only available in the {@link Flicking#circular circular} mode<ko>이동할 방향. {@link Flicking#circular circular} 옵션 활성화시에만 사용 가능합니다</ko>
-   * @async
-   * @fires Flicking#moveStart
-   * @fires Flicking#move
-   * @fires Flicking#moveEnd
-   * @fires Flicking#willChange
-   * @fires Flicking#changed
-   * @fires Flicking#willRestore
-   * @fires Flicking#restored
-   * @fires Flicking#needPanel
-   * @fires Flicking#visibleChange
-   * @fires Flicking#reachEdge
-   * @throws {FlickingError}
-   * |code|condition|
-   * |---|---|
-   * |{@link ERROR_CODE INDEX_OUT_OF_RANGE}|When the root is not either string or HTMLElement|
-   * |{@link ERROR_CODE ANIMATION_ALREADY_PLAYING}|When the animation is already playing|
-   * |{@link ERROR_CODE ANIMATION_INTERRUPTED}|When the animation is interrupted by user input|
-   * |{@link ERROR_CODE STOP_CALLED_BY_USER}|When the any of the event's `stop()` is called|
-   * <ko>
-   *
-   * |code|condition|
-   * |---|---|
-   * |{@link ERROR_CODE INDEX_OUT_OF_RANGE}|해당 인덱스를 가진 패널이 존재하지 않을 경우|
-   * |{@link ERROR_CODE ANIMATION_ALREADY_PLAYING}|애니메이션이 이미 진행중인 경우|
-   * |{@link ERROR_CODE ANIMATION_INTERRUPTED}|사용자 입력에 의해 애니메이션이 중단된 경우|
-   * |{@link ERROR_CODE STOP_CALLED_BY_USER}|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우|
-   *
-   * </ko>
-   * @return {Promise<void>} A Promise which will be resolved after reaching the target panel<ko>해당 패널 도달시에 resolve되는 Promise</ko>
+   * Move to the panel with the given index.
+   * @param index - The index of the panel to move to
+   * @param duration - Duration of the animation (unit: ms). Defaults to {@link FlickingOptions.duration}
+   * @param direction - Direction to move (circular mode only). Defaults to {@link DIRECTION.NONE}
+   * @fires {@link MovementEvents}
+   * @throws {@link MovementErrors}
+   * @returns Promise that resolves after reaching the target panel
    */
   public moveTo(
     index: number,
     duration: number = this._duration,
     direction: ValueOf<typeof DIRECTION> = DIRECTION.NONE
-  ) {
+  ): Promise<void> {
     const renderer = this._renderer;
     const panelCount = renderer.panelCount;
 
@@ -1599,19 +1690,13 @@ class Flicking extends Component<FlickingEvents> {
 
     if (!panel) {
       return Promise.reject(
-        new FlickingError(
-          ERROR.MESSAGE.INDEX_OUT_OF_RANGE(index, 0, panelCount - 1),
-          ERROR.CODE.INDEX_OUT_OF_RANGE
-        )
+        new FlickingError(ERROR.MESSAGE.INDEX_OUT_OF_RANGE(index, 0, panelCount - 1), ERROR.CODE.INDEX_OUT_OF_RANGE)
       );
     }
 
     if (this._control.animating) {
       return Promise.reject(
-        new FlickingError(
-          ERROR.MESSAGE.ANIMATION_ALREADY_PLAYING,
-          ERROR.CODE.ANIMATION_ALREADY_PLAYING
-        )
+        new FlickingError(ERROR.MESSAGE.ANIMATION_ALREADY_PLAYING, ERROR.CODE.ANIMATION_ALREADY_PLAYING)
       );
     }
 
@@ -1626,21 +1711,16 @@ class Flicking extends Component<FlickingEvents> {
   }
 
   /**
-   * Change the destination and duration of the animation currently playing
-   * @ko 재생 중인 애니메이션의 목적지와 재생 시간을 변경합니다
-   * @param {number} index The index of the panel to move<ko>이동할 패널의 인덱스</ko>
-   * @param {number} duration Duration of the animation (unit: ms)<ko>애니메이션 진행 시간 (단위: ms)</ko>
-   * @param {DIRECTION} direction Direction to move, only available in the {@link Flicking#circular circular} mode<ko>이동할 방향. {@link Flicking#circular circular} 옵션 활성화시에만 사용 가능합니다</ko>
-   * @throws {FlickingError}
-   * {@link ERROR_CODE INDEX_OUT_OF_RANGE} When the root is not either string or HTMLElement
-   * <ko>{@link ERROR_CODE INDEX_OUT_OF_RANGE} 해당 인덱스를 가진 패널이 존재하지 않을 경우</ko>
-   * @return {void}
+   * Change the destination and duration of the animation currently playing.
+   * @remarks
+   * This method does nothing if no animation is currently playing.
+   * @param index - The index of the panel to move to
+   * @param duration - Duration of the animation (unit: ms)
+   * @param direction - Direction to move. Only available when {@link FlickingOptions.circular} is enabled
+   * @since 4.10.0
+   * @throws {@link AnimationUpdateErrors}
    */
-  public updateAnimation(
-    index: number,
-    duration?: number,
-    direction?: ValueOf<typeof DIRECTION>
-  ): void {
+  public updateAnimation(index: number, duration?: number, direction?: ValueOf<typeof DIRECTION>): void {
     if (!this._control.animating) {
       return;
     }
@@ -1661,10 +1741,11 @@ class Flicking extends Component<FlickingEvents> {
   }
 
   /**
-   * Stops the animation currently playing
-   * @ko 재생 중인 애니메이션을 중단시킵니다
-   * @fires Flicking#moveEnd
-   * @return {void}
+   * Stop the animation currently playing.
+   * @remarks
+   * This method does nothing if no animation is currently playing.
+   * @since 4.10.0
+   * @fires {@link MoveEndEvent}
    */
   public stopAnimation(): void {
     if (!this._control.animating) {
@@ -1675,10 +1756,9 @@ class Flicking extends Component<FlickingEvents> {
   }
 
   /**
-   * Return the {@link Panel} at the given index. `null` if it doesn't exists.
-   * @ko 주어진 인덱스에 해당하는 {@link Panel}을 반환합니다. 주어진 인덱스에 해당하는 패널이 존재하지 않을 경우 `null`을 반환합니다.
-   * @return {Panel | null} Panel at the given index<ko>주어진 인덱스에 해당하는 패널</ko>
-   * @see Panel
+   * Get the panel at the given index.
+   * @param index - The index of the panel to get
+   * @returns The panel at the given index, or `null` if it doesn't exist. This is a shorthand for `Flicking.renderer.getPanel(index)`.
    * @example
    * ```ts
    * const panel = flicking.getPanel(0);
@@ -1691,9 +1771,10 @@ class Flicking extends Component<FlickingEvents> {
   }
 
   /**
-   * Enable input from the user (mouse/touch)
-   * @ko 사용자의 입력(마우스/터치)를 활성화합니다
-   * @return {this}
+   * Enable user input (mouse/touch).
+   * @remarks
+   * This is a shorthand for `Flicking.control.enable`.
+   * @returns The current instance for method chaining
    */
   public enableInput(): this {
     this._control.enable();
@@ -1701,9 +1782,10 @@ class Flicking extends Component<FlickingEvents> {
   }
 
   /**
-   * Disable input from the user (mouse/touch)
-   * @ko 사용자의 입력(마우스/터치)를 막습니다
-   * @return {this}
+   * Disable user input (mouse/touch).
+   * @remarks
+   * This is a shorthand for `Flicking.control.disable`.
+   * @returns The current instance for method chaining
    */
   public disableInput(): this {
     this._control.disable();
@@ -1711,32 +1793,19 @@ class Flicking extends Component<FlickingEvents> {
   }
 
   /**
-   * Get current flicking status. You can restore current state by giving returned value to {@link Flicking#setStatus setStatus()}
-   * @ko 현재 상태를 반환합니다. 반환받은 값을 {@link Flicking#setStatus setStatus()} 메소드의 인자로 지정하면 현재 상태를 복원할 수 있습니다
-   * @param {object} options Status retrieving options<ko>Status 반환 옵션</ko>
-   * @param {boolean} [options.index=true] Include current panel index to the returning status. Camera will automatically move to the given index when the {@link Flicking#setStatus setStatus} is called<ko>현재 패널 인덱스를 반환값에 포함시킵니다. {@link Flicking#setStatus setStatus} 호출시 자동으로 해당 인덱스로 카메라를 움직입니다</ko>
-   * @param {boolean} [options.position=true] Include camera position to the returning status. This works only when the {@link Flicking#moveType moveType} is `freeScroll`<ko>카메라의 현재 위치를 반환값에 포함시킵니다. 이 옵션은 {@link Flicking#moveType moveType}이 `freeScroll`일 경우에만 동작합니다</ko>
-   * @param {boolean} [options.includePanelHTML=false] Include panel's `outerHTML` to the returning status<ko>패널의 `outerHTML`을 반환값에 포함시킵니다</ko>
-   * @param {boolean} [options.visiblePanelsOnly=false] Include only {@link Flicking#visiblePanel visiblePanel}'s HTML. This option is available only when the `includePanelHTML` is true
-   * <ko>현재 보이는 패널({@link Flicking#visiblePanel visiblePanel})의 HTML만 반환합니다. `includePanelHTML`이 `true`일 경우에만 동작합니다.</ko>
-   * @return {Status} An object with current status value information<ko>현재 상태값 정보를 가진 객체.</ko>
-   */
-  public getStatus({
-    index = true,
-    position = true,
-    includePanelHTML = false,
-    visiblePanelsOnly = false
-  }: Partial<{
-    index: boolean;
-    position: boolean;
-    includePanelHTML: boolean;
-    visiblePanelsOnly: boolean;
-  }> = {}): Status {
+   * Get the current Flicking status.
+   * @param options - {@link GetStatusParams}
+   * @returns Status object that can be used with {@link Flicking.setStatus} to restore the state
+   */
+  public getStatus(options: GetStatusParams = {}): Status {
+    // Destructure options with default values
+    const { index = true, position = true, includePanelHTML = false, visiblePanelsOnly = false } = options;
+
     const camera = this._camera;
     const panels = visiblePanelsOnly ? this.visiblePanels : this.panels;
 
     const status: Status = {
-      panels: panels.map((panel) => {
+      panels: panels.map(panel => {
         const panelInfo: Status["panels"][0] = { index: panel.index };
 
         if (includePanelHTML) {
@@ -1771,17 +1840,13 @@ class Flicking extends Component<FlickingEvents> {
   }
 
   /**
-   * Restore to the state of the given {@link Status}
-   * @ko 주어진 {@link Status}의 상태로 복원합니다
-   * @param {Partial<Status>} status Status value to be restored. You should use the return value of the {@link Flicking#getStatus getStatus()} method<ko>복원할 상태 값. {@link Flicking#getStatus getStatus()} 메서드의 반환값을 지정하면 됩니다</ko>
-   * @return {void}
+   * Restore Flicking to the state of the given {@link Status}.
+   * @param status - {@link Status}
+   * @throws {@link StatusRestoreErrors}
    */
   public setStatus(status: Status): void {
     if (!this._initialized) {
-      throw new FlickingError(
-        ERROR.MESSAGE.NOT_INITIALIZED,
-        ERROR.CODE.NOT_INITIALIZED
-      );
+      throw new FlickingError(ERROR.MESSAGE.NOT_INITIALIZED, ERROR.CODE.NOT_INITIALIZED);
     }
 
     const { index, position, visibleOffset, panels } = status;
@@ -1798,7 +1863,7 @@ class Flicking extends Component<FlickingEvents> {
       });
       renderer.batchInsert({
         index: 0,
-        elements: parseElement(panels.map((panel) => panel.html!)),
+        elements: parseElement(panels.map(panel => panel.html!)),
         hasDOMInElements: true
       });
     }
@@ -1813,23 +1878,23 @@ class Flicking extends Component<FlickingEvents> {
       const { panel, progressInPanel } = position;
       const panelIndex = visibleOffset ? panel - visibleOffset : panel;
       const panelRange = renderer.panels[panelIndex].range;
-      const newCameraPos =
-        panelRange.min + (panelRange.max - panelRange.min) * progressInPanel;
+      const newCameraPos = panelRange.min + (panelRange.max - panelRange.min) * progressInPanel;
 
       void control.moveToPosition(newCameraPos, 0).catch(() => void 0);
     }
   }
 
   /**
-   * Add plugins that can have different effects on Flicking
-   * @ko 플리킹에 다양한 효과를 부여할 수 있는 플러그인을 추가합니다
-   * @param {...Plugin} plugins The plugin(s) to add<ko>추가할 플러그인(들)</ko>
-   * @return {this}
+   * Add plugins to Flicking.
+   * @remarks
+   * Plugins are automatically initialized if Flicking is already initialized.
+   * @param plugins - {@link Plugin}
+   * @returns The current instance for method chaining
    * @see https://github.com/naver/egjs-flicking-plugins
    */
-  public addPlugins(...plugins: Plugin[]) {
+  public addPlugins(...plugins: Plugin[]): this {
     if (this._initialized) {
-      plugins.forEach((item) => item.init(this));
+      plugins.forEach(item => item.init(this));
     }
 
     this._plugins.push(...plugins);
@@ -1839,14 +1904,13 @@ class Flicking extends Component<FlickingEvents> {
 
   /**
    * Remove plugins from Flicking.
-   * @ko 플리킹으로부터 플러그인들을 제거합니다.
-   * @param {...Plugin} plugin The plugin(s) to remove.<ko>제거 플러그인(들).</ko>
-   * @return {this}
+   * @param plugins - {@link Plugin}
+   * @returns The current instance for method chaining
    * @see https://github.com/naver/egjs-flicking-plugins
    */
-  public removePlugins(...plugins: Plugin[]) {
-    plugins.forEach((item) => {
-      const foundIndex = findIndex(this._plugins, (val) => val === item);
+  public removePlugins(...plugins: Plugin[]): this {
+    plugins.forEach(item => {
+      const foundIndex = findIndex(this._plugins, val => val === item);
 
       if (foundIndex >= 0) {
         item.destroy();
@@ -1858,21 +1922,23 @@ class Flicking extends Component<FlickingEvents> {
   }
 
   /**
-   * Update viewport/panel sizes
-   * @ko 패널 및 뷰포트의 크기를 갱신합니다
-   * @method
-   * @fires Flicking#beforeResize
-   * @fires Flicking#afterResize
-   * @return {boolean}
+   * Update viewport and panel sizes.
+   * @remarks
+   * This method does nothing if a resize is already in progress.
+   * @fires {@link ResizeEvents}
+   * @returns Promise that resolves when resize is complete
    */
   public async resize(): Promise<void> {
     if (!this._initialized) {
       return;
     }
     if (this._isResizing) {
+      // resize를 연속으로 발생하면 무시하기에 마지막 viewport를 사이즈를 알 수 없음.
+      // resize를 1번 더 실행할 수 잇는 스케줄링 등록
       this._scheduleResize = true;
       return;
     }
+
     this._scheduleResize = false;
     this._isResizing = true;
 
@@ -1884,9 +1950,7 @@ class Flicking extends Component<FlickingEvents> {
     const activePanel = control.activePanel;
     const prevWidth = viewport.width;
     const prevHeight = viewport.height;
-    const prevProgressInPanel = activePanel
-      ? camera.getProgressInPanel(activePanel)
-      : 0;
+    const prevProgressInPanel = activePanel ? camera.getProgressInPanel(activePanel) : 0;
 
     this.trigger(
       new ComponentEvent(EVENTS.BEFORE_RESIZE, {
@@ -1951,30 +2015,24 @@ class Flicking extends Component<FlickingEvents> {
 
     this._isResizing = false;
 
+    // 연속으로 resize를 호출하는 경우를 대비하기 위해서 스케줄링 반영
     if (this._scheduleResize) {
-      this.resize();
+      void this.resize();
     }
     return;
   }
 
   /**
-   * Add new panels after the last panel
-   * @ko 패널 목록의 제일 끝에 새로운 패널들을 추가합니다
-   * @param {ElementLike | ElementLike[]} element A new HTMLElement, a outerHTML of element, or an array of both
-   * <ko>새로운 HTMLElement, 혹은 엘리먼트의 outerHTML, 혹은 그것들의 배열</ko>
-   * @return {Panel[]} An array of appended panels<ko>추가된 패널들의 배열</ko>
-   * @see Panel
-   * @see ElementLike
-   * @throws {FlickingError} {@link ERROR_CODE ERROR_CODE.NOT_ALLOWED_IN_FRAMEWORK} if called on frameworks (React, Angular, Vue...)
+   * Add new panels after the last panel.
+   * @param element - A new HTMLElement, outerHTML string, or an array of both
+   * @throws {@link DOMManipulationErrors}
+   * @returns Array of appended panels
    * @example
    * ```ts
    * const flicking = new Flicking("#flick");
-   * // These are possible parameters
    * flicking.append(document.createElement("div"));
-   * flicking.append("\<div\>Panel\</div\>");
-   * flicking.append(["\<div\>Panel\</div\>", document.createElement("div")]);
-   * // Even this is possible
-   * flicking.append("\<div\>Panel 1\</div\>\<div\>Panel 2\</div\>");
+   * flicking.append("<div>Panel</div>");
+   * flicking.append(["<div>Panel</div>", document.createElement("div")]);
    * ```
    */
   public append(element: ElementLike | ElementLike[]): Panel[] {
@@ -1982,24 +2040,18 @@ class Flicking extends Component<FlickingEvents> {
   }
 
   /**
-   * Add new panels before the first panel
-   * This will increase index of panels after by the number of panels added
-   * @ko 패널 목록의 제일 앞(index 0)에 새로운 패널들을 추가합니다
-   * 추가한 패널의 개수만큼 기존 패널들의 인덱스가 증가합니다.
-   * @param {ElementLike | ElementLike[]} element A new HTMLElement, a outerHTML of element, or an array of both
-   * <ko>새로운 HTMLElement, 혹은 엘리먼트의 outerHTML, 혹은 그것들의 배열</ko>
-   * @return {Panel[]} An array of prepended panels<ko>추가된 패널들의 배열</ko>
-   * @see Panel
-   * @see ElementLike
-   * @throws {FlickingError} {@link ERROR_CODE ERROR_CODE.NOT_ALLOWED_IN_FRAMEWORK} if called on frameworks (React, Angular, Vue...)
+   * Add new panels before the first panel.
+   * @remarks
+   * This will increase the index of existing panels by the number of panels added.
+   * @param element - A new HTMLElement, outerHTML string, or an array of both
+   * @throws {@link DOMManipulationErrors}
+   * @returns Array of prepended panels
    * @example
    * ```ts
-   * const flicking = new eg.Flicking("#flick");
+   * const flicking = new Flicking("#flick");
    * flicking.prepend(document.createElement("div"));
-   * flicking.prepend("\<div\>Panel\</div\>");
-   * flicking.prepend(["\<div\>Panel\</div\>", document.createElement("div")]);
-   * // Even this is possible
-   * flicking.prepend("\<div\>Panel 1\</div\>\<div\>Panel 2\</div\>");
+   * flicking.prepend("<div>Panel</div>");
+   * flicking.prepend(["<div>Panel</div>", document.createElement("div")]);
    * ```
    */
   public prepend(element: ElementLike | ElementLike[]): Panel[] {
@@ -2007,31 +2059,24 @@ class Flicking extends Component<FlickingEvents> {
   }
 
   /**
-   * Insert new panels at given index
-   * This will increase index of panels after by the number of panels added
-   * @ko 주어진 인덱스에 새로운 패널들을 추가합니다
-   * 해당 인덱스보다 같거나 큰 인덱스를 가진 기존 패널들은 추가한 패널의 개수만큼 인덱스가 증가합니다.
-   * @param {number} index Index to insert new panels at<ko>새로 패널들을 추가할 인덱스</ko>
-   * @param {ElementLike | ElementLike[]} element A new HTMLElement, a outerHTML of element, or an array of both
-   * <ko>새로운 HTMLElement, 혹은 엘리먼트의 outerHTML, 혹은 그것들의 배열</ko>
-   * @return {Panel[]} An array of prepended panels<ko>추가된 패널들의 배열</ko>
-   * @throws {FlickingError} {@link ERROR_CODE ERROR_CODE.NOT_ALLOWED_IN_FRAMEWORK} if called on frameworks (React, Angular, Vue...)
+   * Insert new panels at the given index.
+   * @remarks
+   * This will increase the index of panels at or after the given index by the number of panels added.
+   * @param index - Index to insert new panels at
+   * @param element - A new HTMLElement, outerHTML string, or an array of both
+   * @throws {@link DOMManipulationErrors}
+   * @returns Array of inserted panels
    * @example
    * ```ts
-   * const flicking = new eg.Flicking("#flick");
+   * const flicking = new Flicking("#flick");
    * flicking.insert(0, document.createElement("div"));
-   * flicking.insert(2, "\<div\>Panel\</div\>");
-   * flicking.insert(1, ["\<div\>Panel\</div\>", document.createElement("div")]);
-   * // Even this is possible
-   * flicking.insert(3, "\<div\>Panel 1\</div\>\<div\>Panel 2\</div\>");
+   * flicking.insert(2, "<div>Panel</div>");
+   * flicking.insert(1, ["<div>Panel</div>", document.createElement("div")]);
    * ```
    */
   public insert(index: number, element: ElementLike | ElementLike[]): Panel[] {
     if (this._renderExternal) {
-      throw new FlickingError(
-        ERROR.MESSAGE.NOT_ALLOWED_IN_FRAMEWORK,
-        ERROR.CODE.NOT_ALLOWED_IN_FRAMEWORK
-      );
+      throw new FlickingError(ERROR.MESSAGE.NOT_ALLOWED_IN_FRAMEWORK, ERROR.CODE.NOT_ALLOWED_IN_FRAMEWORK);
     }
 
     return this._renderer.batchInsert({
@@ -2042,20 +2087,17 @@ class Flicking extends Component<FlickingEvents> {
   }
 
   /**
-   * Remove the panel at the given index
-   * This will decrease index of panels after by the number of panels removed
-   * @ko 주어진 인덱스의 패널을 제거합니다
-   * 해당 인덱스보다 큰 인덱스를 가진 기존 패널들은 제거한 패널의 개수만큼 인덱스가 감소합니다
-   * @param {number} index Index of panel to remove<ko>제거할 패널의 인덱스</ko>
-   * @param {number} [deleteCount=1] Number of panels to remove from index<ko>`index` 이후로 제거할 패널의 개수</ko>
-   * @return {Panel[]} An array of removed panels<ko>제거된 패널들의 배열</ko>
+   * Remove panels starting from the given index.
+   * @remarks
+   * This will decrease the index of panels after the removed ones by the number of panels removed.
+   * @param index - Index of the first panel to remove
+   * @param deleteCount - Number of panels to remove. Defaults to `1`
+   * @throws {@link DOMManipulationErrors}
+   * @returns Array of removed panels
    */
   public remove(index: number, deleteCount: number = 1): Panel[] {
     if (this._renderExternal) {
-      throw new FlickingError(
-        ERROR.MESSAGE.NOT_ALLOWED_IN_FRAMEWORK,
-        ERROR.CODE.NOT_ALLOWED_IN_FRAMEWORK
-      );
+      throw new FlickingError(ERROR.MESSAGE.NOT_ALLOWED_IN_FRAMEWORK, ERROR.CODE.NOT_ALLOWED_IN_FRAMEWORK);
     }
 
     return this._renderer.batchRemove({
@@ -2065,15 +2107,20 @@ class Flicking extends Component<FlickingEvents> {
     });
   }
 
+  /**
+   * Factory method to create the appropriate Control implementation based on moveType option.
+   * @internal
+   * @privateRemarks
+   * Called during constructor and when moveType option is changed. The moveType option must be set before calling this method.
+   * Throws error if moveType is invalid.
+   */
   private _createControl(): Control {
     const moveType = this._moveType;
-    const moveTypes = Object.keys(MOVE_TYPE).map(
-      (key) => MOVE_TYPE[key] as ValueOf<typeof MOVE_TYPE>
-    );
+    const moveTypes = Object.keys(MOVE_TYPE).map(key => MOVE_TYPE[key] as ValueOf<typeof MOVE_TYPE>);
 
     const moveTypeStr = Array.isArray(moveType) ? moveType[0] : moveType;
 
-    const moveTypeOptions = Array.isArray(moveType) ? moveType[1] ?? {} : {};
+    const moveTypeOptions = Array.isArray(moveType) ? (moveType[1] ?? {}) : {};
 
     if (!includes(moveTypes, moveTypeStr)) {
       throw new FlickingError(
@@ -2092,12 +2139,17 @@ class Flicking extends Component<FlickingEvents> {
     }
   }
 
+  /**
+   * Factory method to create Camera instance for managing viewport movement and positioning.
+   * @internal
+   * @privateRemarks
+   * Called during constructor. The align option must be set before calling this method.
+   * Warns if both circular and bound options are enabled (bound is ignored).
+   */
   private _createCamera(): Camera {
     if (this._circular && this._bound) {
       // eslint-disable-next-line no-console
-      console.warn(
-        "\"circular\" and \"bound\" option cannot be used together, ignoring bound."
-      );
+      console.warn('"circular" and "bound" option cannot be used together, ignoring bound.');
     }
 
     return new Camera(this, {
@@ -2105,13 +2157,18 @@ class Flicking extends Component<FlickingEvents> {
     });
   }
 
+  /**
+   * Factory method to create the appropriate Renderer implementation based on externalRenderer and virtual options.
+   * @internal
+   * @privateRemarks
+   * Called during constructor. Selects ExternalRenderer if externalRenderer is provided, otherwise creates VanillaRenderer or ExternalRenderer based on renderExternal option.
+   * Warns if virtual is enabled without panelsPerView.
+   */
   private _createRenderer(): Renderer {
     const externalRenderer = this._externalRenderer;
     if (this._virtual && this._panelsPerView <= 0) {
       // eslint-disable-next-line no-console
-      console.warn(
-        "\"virtual\" and \"panelsPerView\" option should be used together, ignoring virtual."
-      );
+      console.warn('"virtual" and "panelsPerView" option should be used together, ignoring virtual.');
     }
 
     return externalRenderer
@@ -2121,12 +2178,25 @@ class Flicking extends Component<FlickingEvents> {
         : this._createVanillaRenderer();
   }
 
+  /**
+   * Factory method to create ExternalRenderer from renderExternal option (deprecated).
+   * @internal
+   * @privateRemarks
+   * Called by _createRenderer when renderExternal option is set. The renderExternal option must not be null and must contain renderer class and options.
+   */
   private _createExternalRenderer(): ExternalRenderer {
     const { renderer, rendererOptions } = this._renderExternal!;
 
     return new renderer({ align: this._align, ...rendererOptions });
   }
 
+  /**
+   * Factory method to create VanillaRenderer for vanilla JavaScript rendering.
+   * @internal
+   * @privateRemarks
+   * Called by _createRenderer when neither externalRenderer nor renderExternal is set.
+   * Uses VirtualRenderingStrategy if virtual is enabled, otherwise NormalRenderingStrategy.
+   */
   private _createVanillaRenderer(): VanillaRenderer {
     const virtual = this.virtualEnabled;
 
@@ -2135,25 +2205,31 @@ class Flicking extends Component<FlickingEvents> {
       strategy: virtual
         ? new VirtualRenderingStrategy()
         : new NormalRenderingStrategy({
-          providerCtor: VanillaElementProvider
-        })
+            providerCtor: VanillaElementProvider
+          })
     });
   }
 
+  /**
+   * Move camera to the initial panel position based on defaultIndex option.
+   * @internal
+   * @privateRemarks
+   * Called during init() method, after _initialResize(). Requires camera, renderer, and control to be already initialized.
+   * Throws error if the initial panel position is not reachable.
+   */
   private _moveToInitialPanel(): void {
     const renderer = this._renderer;
     const control = this._control;
     const camera = this._camera;
-    const defaultPanel =
-      renderer.getPanel(this._defaultIndex) || renderer.getPanel(0);
+    const defaultPanel = renderer.getPanel(this._defaultIndex) || renderer.getPanel(0);
 
     if (!defaultPanel) return;
 
     const nearestAnchor = camera.findNearestAnchor(defaultPanel.position);
     const initialPanel =
       nearestAnchor &&
-        defaultPanel.position !== nearestAnchor.panel.position &&
-        defaultPanel.index !== nearestAnchor.panel.index
+      defaultPanel.position !== nearestAnchor.panel.position &&
+      defaultPanel.index !== nearestAnchor.panel.index
         ? nearestAnchor.panel
         : defaultPanel;
     control.setActive(initialPanel, null, false);
@@ -2176,6 +2252,13 @@ class Flicking extends Component<FlickingEvents> {
     camera.updateOffset();
   }
 
+  /**
+   * Calculate initial viewport and panel sizes during initialization.
+   * @internal
+   * @privateRemarks
+   * Called during init() method, before _moveToInitialPanel(). This is separate from the regular resize() to avoid triggering events before initialization is complete.
+   * Requires viewport, renderer, camera, and control to be already initialized. Triggers BEFORE_RESIZE and AFTER_RESIZE events.
+   */
   private _initialResize() {
     const viewport = this._viewport;
     const renderer = this._renderer;