smartphoto 1.6.4 → 2.0.0

package/lib/smartphoto.mjs

@@ -0,0 +1,1799 @@
+// src/lib/util.ts
+var isSmartPhone = () => {
+  const agent = navigator.userAgent;
+  return agent.indexOf("iPhone") > 0 || agent.indexOf("iPad") > 0 || agent.indexOf("ipod") > 0 || agent.indexOf("Android") > 0;
+};
+function deepExtend(out, ...args) {
+  out = out || {};
+  for (let i = 0; i < args.length; i++) {
+    const obj = args[i];
+    if (!obj) {
+      continue;
+    }
+    for (const key in obj) {
+      if (Object.hasOwn(obj, key)) {
+        const value = obj[key];
+        if (value && typeof value === "object") {
+          out[key] = deepExtend(
+            out[key] ?? {},
+            value
+          );
+        } else {
+          out[key] = value;
+        }
+      }
+    }
+  }
+  return out;
+}
+var extend = deepExtend;
+var triggerEvent = (el, eventName, options) => {
+  let event;
+  if (window.CustomEvent) {
+    event = new CustomEvent(eventName, { cancelable: true });
+  } else {
+    event = document.createEvent("CustomEvent");
+    event.initCustomEvent(eventName, false, false, options);
+  }
+  el.dispatchEvent(event);
+};
+var parseQuery = (query) => {
+  const data = {};
+  for (const pair of query.split("&")) {
+    const param = pair.split("=");
+    const key = param[0];
+    const value = param.length > 1 ? param.slice(1).join("=") : key;
+    data[key] = decodeURIComponent(value);
+  }
+  return data;
+};
+var getViewPos = (element) => {
+  return {
+    left: element.getBoundingClientRect().left,
+    top: element.getBoundingClientRect().top
+  };
+};
+
+// src/core/state.ts
+var defaults = {
+  classNames: {
+    smartPhoto: "smartphoto",
+    smartPhotoClose: "smartphoto-close",
+    smartPhotoBody: "smartphoto-body",
+    smartPhotoInner: "smartphoto-inner",
+    smartPhotoContent: "smartphoto-content",
+    smartPhotoImg: "smartphoto-img",
+    smartPhotoImgOnMove: "smartphoto-img-onmove",
+    smartPhotoImgElasticMove: "smartphoto-img-elasticmove",
+    smartPhotoImgWrap: "smartphoto-img-wrap",
+    smartPhotoArrows: "smartphoto-arrows",
+    smartPhotoNav: "smartphoto-nav",
+    smartPhotoArrowRight: "smartphoto-arrow-right",
+    smartPhotoArrowLeft: "smartphoto-arrow-left",
+    smartPhotoArrowHideIcon: "smartphoto-arrow-hide",
+    smartPhotoImgLeft: "smartphoto-img-left",
+    smartPhotoImgRight: "smartphoto-img-right",
+    smartPhotoList: "smartphoto-list",
+    smartPhotoListOnMove: "smartphoto-list-onmove",
+    smartPhotoHeader: "smartphoto-header",
+    smartPhotoCount: "smartphoto-count",
+    smartPhotoCaption: "smartphoto-caption",
+    smartPhotoDismiss: "smartphoto-dismiss",
+    smartPhotoLoader: "smartphoto-loader",
+    smartPhotoLoaderWrap: "smartphoto-loader-wrap",
+    smartPhotoImgClone: "smartphoto-img-clone"
+  },
+  message: {
+    gotoNextImage: "go to the next image",
+    gotoPrevImage: "go to the previous image",
+    closeDialog: "close the image dialog",
+    carouselLabel: "Images"
+  },
+  arrows: true,
+  nav: true,
+  showAnimation: true,
+  verticalGravity: false,
+  useOrientationApi: false,
+  useHistoryApi: true,
+  swipeTopToClose: false,
+  swipeBottomToClose: true,
+  swipeOffset: 100,
+  headerHeight: 60,
+  footerHeight: 60,
+  forceInterval: 10,
+  registance: 0.5,
+  loadOffset: 2,
+  resizeStyle: "fit",
+  lazyAttribute: "data-src",
+  animationSpeed: 300
+};
+function deepFreeze(obj) {
+  Object.keys(obj).forEach((key) => {
+    const value = obj[key];
+    if (value && typeof value === "object" && !Object.isFrozen(value)) {
+      deepFreeze(value);
+    }
+  });
+  return Object.freeze(obj);
+}
+function createState(settings) {
+  return {
+    options: deepFreeze(
+      extend({}, defaults, settings)
+    ),
+    viewer: {
+      isOpen: false,
+      currentGroup: null,
+      currentIndex: 0,
+      oldIndex: 0,
+      total: 0,
+      translateX: 0,
+      translateY: 0,
+      photoPosX: 0,
+      photoPosY: 0,
+      scaleSize: 1,
+      scale: false,
+      elastic: false,
+      hideUi: false,
+      onMove: false,
+      appear: false,
+      appearEffect: null,
+      prev: -1,
+      next: -1,
+      showPrevArrow: false,
+      showNextArrow: false
+    },
+    groups: /* @__PURE__ */ new Map()
+  };
+}
+function groupIdFromElement(element) {
+  return element.getAttribute("data-group") || "nogroup";
+}
+function groupIdFromSlide(slide) {
+  return slide.group || "nogroup";
+}
+function itemFromElement(element, options, index, winWidth) {
+  const groupId = groupIdFromElement(element);
+  const src = element.getAttribute("href");
+  const img = element.querySelector("img");
+  let thumb = src;
+  if (img) {
+    if (img.getAttribute(options.lazyAttribute)) {
+      thumb = img.getAttribute(options.lazyAttribute);
+    } else if (img.currentSrc) {
+      thumb = img.currentSrc;
+    } else {
+      thumb = img.src;
+    }
+  }
+  let alt = "";
+  if (img?.getAttribute("alt")) {
+    alt = img.getAttribute("alt");
+  } else if (element.getAttribute("data-caption")) {
+    alt = element.getAttribute("data-caption");
+  } else {
+    alt = src ?? "";
+  }
+  const dataId = element.getAttribute("data-id");
+  return {
+    src,
+    thumb,
+    caption: element.getAttribute("data-caption"),
+    alt,
+    groupId,
+    translateX: winWidth * index,
+    translateY: 0,
+    index,
+    width: 50,
+    height: 50,
+    scale: 1,
+    x: 0,
+    y: 0,
+    id: dataId || index,
+    loaded: false,
+    processed: false,
+    element
+  };
+}
+function itemFromSlide(slide, index, winWidth) {
+  const groupId = groupIdFromSlide(slide);
+  const src = slide.src;
+  const thumb = slide.thumb ?? src;
+  const caption = slide.caption ?? null;
+  const alt = slide.alt ?? caption ?? src;
+  const hasSize = typeof slide.width === "number" && typeof slide.height === "number";
+  return {
+    src,
+    thumb,
+    caption,
+    alt,
+    groupId,
+    translateX: winWidth * index,
+    translateY: 0,
+    index,
+    width: hasSize ? slide.width : 50,
+    height: hasSize ? slide.height : 50,
+    scale: 1,
+    x: 0,
+    y: 0,
+    id: slide.id ?? index,
+    loaded: hasSize,
+    processed: false,
+    element: null
+  };
+}
+function addItemToGroup(state, item) {
+  if (!state.groups.has(item.groupId)) {
+    state.groups.set(item.groupId, []);
+  }
+  state.groups.get(item.groupId).push(item);
+  state.viewer.currentGroup = item.groupId;
+}
+function currentItems(state) {
+  if (state.viewer.currentGroup === null) {
+    return null;
+  }
+  return state.groups.get(state.viewer.currentGroup) ?? null;
+}
+function currentItem(state) {
+  const items = currentItems(state);
+  return items ? items[state.viewer.currentIndex] ?? null : null;
+}
+function setArrow(state) {
+  const items = currentItems(state);
+  if (!items) {
+    return;
+  }
+  const length = items.length;
+  const next = state.viewer.currentIndex + 1;
+  const prev = state.viewer.currentIndex - 1;
+  state.viewer.showNextArrow = false;
+  state.viewer.showPrevArrow = false;
+  if (next !== length) {
+    state.viewer.next = next;
+    state.viewer.showNextArrow = true;
+  }
+  if (prev !== -1) {
+    state.viewer.prev = prev;
+    state.viewer.showPrevArrow = true;
+  }
+}
+function resetTranslate(items, winWidth) {
+  items.forEach((item, index) => {
+    item.translateX = winWidth * index;
+  });
+}
+function round(val, precision) {
+  const digit = 10 ** precision;
+  return Math.round(val * digit) / digit;
+}
+function scaleBorder(item, winWidth, winHeight, isSmartPhone2) {
+  if (!isSmartPhone2) {
+    return 1 / item.scale;
+  }
+  if (item.width > item.height) {
+    return winHeight / (item.height * item.scale);
+  }
+  return winWidth / (item.width * item.scale);
+}
+function makeBound(item, viewer, winWidth, winHeight) {
+  const width = item.width * item.scale * viewer.scaleSize;
+  const height = item.height * item.scale * viewer.scaleSize;
+  let minX;
+  let minY;
+  let maxX;
+  let maxY;
+  if (winWidth > width) {
+    maxX = (winWidth - width) / 2;
+    minX = -1 * maxX;
+  } else {
+    maxX = (width - winWidth) / 2;
+    minX = -1 * maxX;
+  }
+  if (winHeight > height) {
+    maxY = (winHeight - height) / 2;
+    minY = -1 * maxY;
+  } else {
+    maxY = (height - winHeight) / 2;
+    minY = -1 * maxY;
+  }
+  return {
+    minX: round(minX, 6) * viewer.scaleSize,
+    minY: round(minY, 6) * viewer.scaleSize,
+    maxX: round(maxX, 6) * viewer.scaleSize,
+    maxY: round(maxY, 6) * viewer.scaleSize
+  };
+}
+function sizeItems(items, winWidth, winHeight, headerHeight, footerHeight) {
+  const screenY = winHeight - (headerHeight + footerHeight);
+  items.forEach((item) => {
+    if (!item.loaded) {
+      return;
+    }
+    item.processed = true;
+    item.scale = screenY / item.height;
+    if (item.height < screenY) {
+      item.scale = 1;
+    }
+    item.x = (item.scale - 1) / 2 * item.width + (winWidth - item.width * item.scale) / 2;
+    item.y = (item.scale - 1) / 2 * item.height + (winHeight - item.height * item.scale) / 2;
+    if (item.width * item.scale > winWidth) {
+      item.scale = winWidth / item.width;
+      item.x = (item.scale - 1) / 2 * item.width;
+    }
+  });
+}
+function buildHash(state) {
+  const item = currentItem(state);
+  if (!item) {
+    return "";
+  }
+  return `group=${state.viewer.currentGroup}&photo=${item.id}`;
+}
+function findItemByHash(state, hashObj) {
+  let found = null;
+  state.groups.forEach((items) => {
+    items.forEach((item) => {
+      if (hashObj.group === item.groupId && hashObj.photo === item.id) {
+        found = item;
+      }
+    });
+  });
+  return found;
+}
+
+// src/core/gestures.ts
+function round2(val, precision) {
+  const digit = 10 ** precision;
+  return Math.round(val * digit) / digit;
+}
+function getPos(e) {
+  return { x: e.pageX, y: e.pageY };
+}
+function distance(p1, p2) {
+  const x = p1.x - p2.x;
+  const y = p1.y - p2.y;
+  return Math.sqrt(x * x + y * y);
+}
+function getForceAndTheta(x, y) {
+  return { force: Math.sqrt(x * x + y * y), theta: Math.atan2(y, x) };
+}
+function windowSize() {
+  return {
+    width: document.documentElement.clientWidth,
+    height: document.documentElement.clientHeight
+  };
+}
+function createGestures({ state, callbacks }, { signal }) {
+  const activePointers = /* @__PURE__ */ new Map();
+  let tapSecond = Date.now();
+  let swiping = false;
+  let dragStart = false;
+  let firstPos = null;
+  let oldPos = null;
+  let moveDir = null;
+  let photoSwipable = false;
+  let firstPhotoPos = null;
+  let oldPhotoPos = null;
+  let photoVX = 0;
+  let photoVY = 0;
+  let pinching = false;
+  let oldDistance = 0;
+  let vx = 0;
+  let vy = 0;
+  function isSmartPhone2() {
+    return isSmartPhone();
+  }
+  function boundOf(item) {
+    const { width, height } = windowSize();
+    return makeBound(item, state.viewer, width, height);
+  }
+  function borderOf(item) {
+    const { width, height } = windowSize();
+    return scaleBorder(item, width, height, isSmartPhone2());
+  }
+  function registerElasticForce(flagX, flagY) {
+    const item = currentItem(state);
+    const bound = boundOf(item);
+    state.viewer.elastic = true;
+    if (flagX === 1) {
+      state.viewer.photoPosX = bound.minX;
+    } else if (flagX === -1) {
+      state.viewer.photoPosX = bound.maxX;
+    }
+    if (flagY === 1) {
+      state.viewer.photoPosY = bound.minY;
+    } else if (flagY === -1) {
+      state.viewer.photoPosY = bound.maxY;
+    }
+    callbacks.onPhotoDragMove();
+    setTimeout(() => {
+      state.viewer.elastic = false;
+      callbacks.onPhotoDragMove();
+    }, 300);
+  }
+  const interval = setInterval(() => {
+    if (pinching || swiping || photoSwipable || state.viewer.elastic || !state.viewer.scale) {
+      return;
+    }
+    state.viewer.photoPosX += vx;
+    state.viewer.photoPosY += vy;
+    const item = currentItem(state);
+    if (!item) {
+      return;
+    }
+    const bound = boundOf(item);
+    if (state.viewer.photoPosX < bound.minX) {
+      state.viewer.photoPosX = bound.minX;
+      vx *= -0.2;
+    } else if (state.viewer.photoPosX > bound.maxX) {
+      state.viewer.photoPosX = bound.maxX;
+      vx *= -0.2;
+    }
+    if (state.viewer.photoPosY < bound.minY) {
+      state.viewer.photoPosY = bound.minY;
+      vy *= -0.2;
+    } else if (state.viewer.photoPosY > bound.maxY) {
+      state.viewer.photoPosY = bound.maxY;
+      vy *= -0.2;
+    }
+    const power = getForceAndTheta(vx, vy);
+    const force = power.force - state.options.registance;
+    if (Math.abs(force) < 0.5) {
+      return;
+    }
+    vx = Math.cos(power.theta) * force;
+    vy = Math.sin(power.theta) * force;
+    callbacks.onPhotoDragMove();
+  }, state.options.forceInterval);
+  function calcGravity(gamma, beta) {
+    if (gamma > 5 || gamma < -5) {
+      vx += gamma * 0.05;
+    }
+    if (!state.options.verticalGravity) {
+      return;
+    }
+    if (beta > 5 || beta < -5) {
+      vy += beta * 0.05;
+    }
+  }
+  function handleOrientationEvent(e) {
+    if (!e?.gamma || state.viewer.appearEffect) {
+      return;
+    }
+    if (pinching || swiping || photoSwipable || state.viewer.elastic || !state.viewer.scale) {
+      return;
+    }
+    const { orientation } = window;
+    if (orientation === 0) {
+      calcGravity(e.gamma, e.beta);
+    } else if (orientation === 90) {
+      calcGravity(e.beta, e.gamma);
+    } else if (orientation === -90) {
+      calcGravity(-e.beta, -e.gamma);
+    } else if (orientation === 180) {
+      calcGravity(-e.gamma, -e.beta);
+    }
+  }
+  if (state.options.useOrientationApi) {
+    window.addEventListener(
+      "deviceorientation",
+      handleOrientationEvent,
+      { signal }
+    );
+  }
+  function startPinch() {
+    pinching = true;
+    swiping = false;
+    photoSwipable = false;
+    const points = Array.from(activePointers.values());
+    oldDistance = distance(
+      points[0],
+      points[1]
+    );
+    state.viewer.scale = true;
+    callbacks.onGestureStart();
+  }
+  function startSwipe(e) {
+    const pos = getPos(e);
+    swiping = true;
+    dragStart = true;
+    firstPos = pos;
+    oldPos = pos;
+  }
+  function startPhotoDrag(e) {
+    photoSwipable = true;
+    const pos = getPos(e);
+    oldPhotoPos = pos;
+    firstPhotoPos = pos;
+  }
+  function onPointerDown(e) {
+    try {
+      e.currentTarget.setPointerCapture?.(e.pointerId);
+    } catch {
+    }
+    activePointers.set(e.pointerId, getPos(e));
+    if (activePointers.size > 1) {
+      startPinch();
+      return;
+    }
+    if (state.viewer.scale) {
+      startPhotoDrag(e);
+      return;
+    }
+    startSwipe(e);
+  }
+  function movePinch() {
+    const points = Array.from(activePointers.values());
+    const dist = distance(
+      points[0],
+      points[1]
+    );
+    const size = (dist - oldDistance) / 100;
+    const oldScaleSize = state.viewer.scaleSize;
+    const posX = state.viewer.photoPosX;
+    const posY = state.viewer.photoPosY;
+    state.viewer.scaleSize += round2(size, 6);
+    if (state.viewer.scaleSize < 0.2) {
+      state.viewer.scaleSize = 0.2;
+    }
+    if (state.viewer.scaleSize < oldScaleSize) {
+      state.viewer.photoPosX = (1 + state.viewer.scaleSize - oldScaleSize) * posX;
+      state.viewer.photoPosY = (1 + state.viewer.scaleSize - oldScaleSize) * posY;
+    }
+    const item = currentItem(state);
+    if (item) {
+      const border = borderOf(item);
+      state.viewer.hideUi = state.viewer.scaleSize < 1 || state.viewer.scaleSize > border;
+    }
+    oldDistance = dist;
+    callbacks.onGestureMove();
+  }
+  function moveSwipe(e) {
+    const pos = getPos(e);
+    const x = pos.x - oldPos.x;
+    const y = pos.y - firstPos.y;
+    if (dragStart) {
+      callbacks.onSwipeStart();
+      dragStart = false;
+      moveDir = Math.abs(x) > Math.abs(y) ? "horizontal" : "vertical";
+    }
+    if (moveDir === "horizontal") {
+      state.viewer.translateX += x;
+    } else {
+      state.viewer.translateY = y;
+    }
+    oldPos = pos;
+    callbacks.onSwipeMove();
+  }
+  function movePhotoDrag(e) {
+    const pos = getPos(e);
+    const x = pos.x - oldPhotoPos.x;
+    const y = pos.y - oldPhotoPos.y;
+    const moveX = round2(state.viewer.scaleSize * x, 6);
+    const moveY = round2(state.viewer.scaleSize * y, 6);
+    state.viewer.photoPosX += moveX;
+    photoVX = moveX;
+    state.viewer.photoPosY += moveY;
+    photoVY = moveY;
+    oldPhotoPos = pos;
+    callbacks.onPhotoDragMove();
+  }
+  function onPointerMove(e) {
+    if (!activePointers.has(e.pointerId)) {
+      return;
+    }
+    activePointers.set(e.pointerId, getPos(e));
+    if (pinching) {
+      movePinch();
+      return;
+    }
+    if (photoSwipable) {
+      movePhotoDrag(e);
+      return;
+    }
+    moveSwipe(e);
+  }
+  function endPinch() {
+    pinching = false;
+    const item = currentItem(state);
+    if (!item) {
+      return;
+    }
+    const border = borderOf(item);
+    if (state.viewer.scaleSize > border) {
+      return;
+    }
+    state.viewer.photoPosX = 0;
+    state.viewer.photoPosY = 0;
+    state.viewer.scale = false;
+    state.viewer.scaleSize = 1;
+    state.viewer.hideUi = false;
+    callbacks.onGestureEnd();
+  }
+  function endSwipe() {
+    swiping = false;
+    const first = firstPos;
+    const last = oldPos;
+    const now = Date.now();
+    const offset = tapSecond - now;
+    const swipeWidth = last.x - first.x;
+    const swipeHeight = last.y - first.y;
+    const noMove = swipeWidth === 0 && swipeHeight === 0;
+    if (!isSmartPhone2() && noMove) {
+      callbacks.onTap();
+      return;
+    }
+    if (Math.abs(offset) <= 500 && noMove) {
+      callbacks.onTap();
+      return;
+    }
+    tapSecond = now;
+    const items = currentItems(state) ?? [];
+    if (moveDir === "horizontal") {
+      let result = "stay";
+      if (swipeWidth >= state.options.swipeOffset && state.viewer.currentIndex !== 0) {
+        result = "prev";
+      } else if (swipeWidth <= -state.options.swipeOffset && state.viewer.currentIndex !== items.length - 1) {
+        result = "next";
+      }
+      callbacks.onSwipeEnd(result);
+    } else {
+      let result = "stay";
+      if (state.options.swipeBottomToClose && swipeHeight >= state.options.swipeOffset) {
+        result = "close-bottom";
+      } else if (state.options.swipeTopToClose && swipeHeight <= -state.options.swipeOffset) {
+        result = "close-top";
+      }
+      callbacks.onSwipeEnd(result);
+    }
+  }
+  function endPhotoDrag() {
+    photoSwipable = false;
+    const oldPos_ = oldPhotoPos;
+    const firstPos_ = firstPhotoPos;
+    if (oldPos_.x === firstPos_.x) {
+      callbacks.onPhotoDragEnd("zoom-out");
+      return;
+    }
+    const item = currentItem(state);
+    if (!item) {
+      callbacks.onPhotoDragEnd(null);
+      return;
+    }
+    const bound = boundOf(item);
+    const offset = state.options.swipeOffset * state.viewer.scaleSize;
+    let flagX = 0;
+    let flagY = 0;
+    if (state.viewer.photoPosX > bound.maxX) {
+      flagX = -1;
+    } else if (state.viewer.photoPosX < bound.minX) {
+      flagX = 1;
+    }
+    if (state.viewer.photoPosY > bound.maxY) {
+      flagY = -1;
+    } else if (state.viewer.photoPosY < bound.minY) {
+      flagY = 1;
+    }
+    if (state.viewer.photoPosX - bound.maxX > offset && state.viewer.currentIndex !== 0) {
+      callbacks.onPhotoDragEnd("prev");
+      return;
+    }
+    if (bound.minX - state.viewer.photoPosX > offset && state.viewer.currentIndex + 1 !== state.viewer.total) {
+      callbacks.onPhotoDragEnd("next");
+      return;
+    }
+    if (flagX === 0 && flagY === 0) {
+      vx = photoVX / 5;
+      vy = photoVY / 5;
+    } else {
+      registerElasticForce(flagX, flagY);
+    }
+    callbacks.onPhotoDragEnd(null);
+  }
+  function onPointerUp(e) {
+    activePointers.delete(e.pointerId);
+    if (pinching) {
+      if (activePointers.size < 2) {
+        endPinch();
+      }
+      return;
+    }
+    if (photoSwipable) {
+      endPhotoDrag();
+      return;
+    }
+    if (swiping) {
+      endSwipe();
+    }
+  }
+  function attach(...targets) {
+    for (const target of targets) {
+      target.addEventListener("pointerdown", onPointerDown, {
+        signal
+      });
+      target.addEventListener("pointermove", onPointerMove, {
+        signal
+      });
+      target.addEventListener("pointerup", onPointerUp, {
+        signal
+      });
+      target.addEventListener("pointercancel", onPointerUp, {
+        signal
+      });
+    }
+  }
+  function detach() {
+    clearInterval(interval);
+  }
+  return { attach, detach };
+}
+
+// src/core/view.ts
+function srOnly(text) {
+  const span = document.createElement("span");
+  span.className = "smartphoto-sr-only";
+  span.textContent = text;
+  return span;
+}
+function buildButton() {
+  const button = document.createElement("button");
+  button.type = "button";
+  return button;
+}
+function escapeCssUrl(value) {
+  return value.replace(/"/g, '\\"');
+}
+function createView({ id, options }, handlers, { signal }) {
+  const { classNames, message } = options;
+  const root = document.createElement("div");
+  root.setAttribute("data-id", id);
+  const dialog = document.createElement("dialog");
+  dialog.className = classNames.smartPhoto;
+  dialog.setAttribute("aria-labelledby", `smartphoto-${id}-title`);
+  dialog.style.setProperty(
+    "--smartphoto-animation-speed",
+    `${options.animationSpeed}ms`
+  );
+  const body = document.createElement("div");
+  body.className = classNames.smartPhotoBody;
+  const inner = document.createElement("div");
+  inner.className = classNames.smartPhotoInner;
+  const header = document.createElement("div");
+  header.className = classNames.smartPhotoHeader;
+  const count = document.createElement("span");
+  count.className = classNames.smartPhotoCount;
+  const caption = document.createElement("h1");
+  caption.id = `smartphoto-${id}-title`;
+  caption.className = classNames.smartPhotoCaption;
+  caption.setAttribute("tabindex", "-1");
+  const dismiss = document.createElement("button");
+  dismiss.className = classNames.smartPhotoDismiss;
+  dismiss.appendChild(srOnly(message.closeDialog));
+  dismiss.addEventListener("click", () => handlers.onDismiss(), { signal });
+  header.append(count, caption, dismiss);
+  const content = document.createElement("div");
+  content.className = classNames.smartPhotoContent;
+  content.addEventListener(
+    "click",
+    (e) => {
+      if (e.target === content) {
+        handlers.onBackdropClick();
+      }
+    },
+    { signal }
+  );
+  const list = document.createElement("ul");
+  list.className = classNames.smartPhotoList;
+  list.setAttribute("role", "region");
+  list.setAttribute("aria-roledescription", "carousel");
+  list.setAttribute("aria-label", message.carouselLabel);
+  list.setAttribute("aria-live", "polite");
+  list.setAttribute("aria-atomic", "false");
+  inner.append(header, content, list);
+  let arrows = null;
+  let arrowLeft = null;
+  let arrowRight = null;
+  if (options.arrows) {
+    arrows = document.createElement("ul");
+    arrows.className = classNames.smartPhotoArrows;
+    arrowLeft = document.createElement("li");
+    arrowLeft.className = classNames.smartPhotoArrowLeft;
+    const prevButton = buildButton();
+    prevButton.appendChild(srOnly(message.gotoPrevImage));
+    prevButton.addEventListener("click", () => handlers.onPrev(), { signal });
+    arrowLeft.appendChild(prevButton);
+    arrowRight = document.createElement("li");
+    arrowRight.className = classNames.smartPhotoArrowRight;
+    const nextButton = buildButton();
+    nextButton.appendChild(srOnly(message.gotoNextImage));
+    nextButton.addEventListener("click", () => handlers.onNext(), { signal });
+    arrowRight.appendChild(nextButton);
+    arrows.append(arrowLeft, arrowRight);
+    inner.appendChild(arrows);
+  }
+  let nav = null;
+  let navList = null;
+  if (options.nav) {
+    nav = document.createElement("nav");
+    nav.className = classNames.smartPhotoNav;
+    nav.setAttribute("aria-label", "Choose slide to display");
+    navList = document.createElement("ul");
+    nav.appendChild(navList);
+    inner.appendChild(nav);
+  }
+  body.appendChild(inner);
+  dialog.appendChild(body);
+  root.appendChild(dialog);
+  const refs = {
+    dialog,
+    count,
+    caption,
+    dismiss,
+    content,
+    list,
+    arrows,
+    arrowLeft,
+    arrowRight,
+    nav,
+    navList,
+    slides: /* @__PURE__ */ new Map(),
+    imgClone: null
+  };
+  function buildLoaderWrap() {
+    const loaderWrap = document.createElement("div");
+    loaderWrap.className = classNames.smartPhotoLoaderWrap;
+    const loader = document.createElement("span");
+    loader.className = classNames.smartPhotoLoader;
+    loaderWrap.appendChild(loader);
+    return loaderWrap;
+  }
+  function buildImgWrap(item) {
+    const imgWrap = document.createElement("div");
+    imgWrap.className = classNames.smartPhotoImgWrap;
+    const img = document.createElement("img");
+    img.className = classNames.smartPhotoImg;
+    img.src = item.src ?? "";
+    img.alt = item.alt ?? "";
+    img.addEventListener("dragstart", (e) => e.preventDefault(), { signal });
+    imgWrap.appendChild(img);
+    return { imgWrap, img };
+  }
+  function syncSlides(items, state) {
+    refs.list.replaceChildren();
+    refs.navList?.replaceChildren();
+    refs.slides = /* @__PURE__ */ new Map();
+    items.forEach((item) => {
+      const li = document.createElement("li");
+      li.setAttribute("role", "group");
+      li.setAttribute("aria-roledescription", "slide");
+      li.setAttribute("aria-label", `${item.index + 1} of ${items.length}`);
+      const slideRefs = {
+        li,
+        loaderWrap: null,
+        imgWrap: null,
+        img: null,
+        navLink: null
+      };
+      if (item.processed) {
+        const { imgWrap, img } = buildImgWrap(item);
+        li.appendChild(imgWrap);
+        slideRefs.imgWrap = imgWrap;
+        slideRefs.img = img;
+      } else {
+        const loaderWrap = buildLoaderWrap();
+        li.appendChild(loaderWrap);
+        slideRefs.loaderWrap = loaderWrap;
+      }
+      refs.list.appendChild(li);
+      refs.slides.set(item, slideRefs);
+      if (refs.navList) {
+        const navLi = document.createElement("li");
+        const navLink = buildButton();
+        navLink.style.backgroundImage = `url("${escapeCssUrl(item.thumb ?? "")}")`;
+        const index = item.index;
+        navLink.addEventListener("click", () => handlers.onNavigate(index), {
+          signal
+        });
+        navLink.appendChild(srOnly(`go to ${item.caption ?? ""}`));
+        navLi.appendChild(navLink);
+        refs.navList.appendChild(navLi);
+        slideRefs.navLink = navLink;
+      }
+    });
+    render(state);
+  }
+  function upgradeIfProcessed(item, slideRefs) {
+    if (slideRefs.imgWrap || !item.processed) {
+      return slideRefs;
+    }
+    const { imgWrap, img } = buildImgWrap(item);
+    slideRefs.loaderWrap?.replaceWith(imgWrap);
+    slideRefs.loaderWrap = null;
+    slideRefs.imgWrap = imgWrap;
+    slideRefs.img = img;
+    return slideRefs;
+  }
+  function hideFromA11yIfFocused(el) {
+    if (el && document.activeElement && el.contains(document.activeElement)) {
+      refs.caption.focus();
+    }
+  }
+  function render(state) {
+    const { viewer } = state;
+    refs.count.textContent = `${viewer.currentIndex + 1}/${viewer.total}`;
+    refs.slides.forEach((rawSlideRefs, item) => {
+      const slideRefs = upgradeIfProcessed(item, rawSlideRefs);
+      const isCurrent = item.index === viewer.currentIndex;
+      slideRefs.li.style.transform = `translate(${item.translateX}px,${item.translateY}px)`;
+      slideRefs.li.classList.toggle("current", isCurrent);
+      if (isCurrent) {
+        slideRefs.li.removeAttribute("aria-hidden");
+      } else {
+        slideRefs.li.setAttribute("aria-hidden", "true");
+      }
+      if (isCurrent) {
+        refs.caption.textContent = item.caption ?? "";
+      }
+      if (slideRefs.imgWrap && slideRefs.img) {
+        slideRefs.imgWrap.style.transform = `translate(${item.x}px,${item.y}px) scale(${item.scale})`;
+        slideRefs.img.style.width = `${item.width}px`;
+        slideRefs.img.classList.toggle("active", viewer.appear);
+        slideRefs.img.classList.toggle(
+          classNames.smartPhotoImgOnMove,
+          viewer.scale
+        );
+        slideRefs.img.classList.toggle(
+          classNames.smartPhotoImgElasticMove,
+          viewer.elastic
+        );
+      }
+      if (slideRefs.navLink) {
+        slideRefs.navLink.classList.toggle("current", isCurrent);
+        if (isCurrent) {
+          slideRefs.navLink.setAttribute("aria-current", "true");
+        } else {
+          slideRefs.navLink.removeAttribute("aria-current");
+        }
+      }
+    });
+    if (refs.arrowLeft) {
+      if (viewer.showPrevArrow) {
+        refs.arrowLeft.removeAttribute("aria-hidden");
+      } else {
+        hideFromA11yIfFocused(refs.arrowLeft);
+        refs.arrowLeft.setAttribute("aria-hidden", "true");
+      }
+    }
+    if (refs.arrowRight) {
+      if (viewer.showNextArrow) {
+        refs.arrowRight.removeAttribute("aria-hidden");
+      } else {
+        hideFromA11yIfFocused(refs.arrowRight);
+        refs.arrowRight.setAttribute("aria-hidden", "true");
+      }
+    }
+    if (refs.arrows) {
+      if (viewer.hideUi) {
+        hideFromA11yIfFocused(refs.arrows);
+      }
+      refs.arrows.setAttribute("aria-hidden", viewer.hideUi ? "true" : "false");
+    }
+    if (refs.nav) {
+      if (viewer.hideUi) {
+        hideFromA11yIfFocused(refs.nav);
+      }
+      refs.nav.setAttribute("aria-hidden", viewer.hideUi ? "true" : "false");
+    }
+  }
+  function findCurrentSlideRefs(state) {
+    for (const [item, slideRefs] of refs.slides) {
+      if (item.index === state.viewer.currentIndex) {
+        return slideRefs;
+      }
+    }
+    return null;
+  }
+  function updatePhotoTransform(state) {
+    const { viewer } = state;
+    const slideRefs = findCurrentSlideRefs(state);
+    const img = slideRefs?.img;
+    if (img) {
+      img.style.transform = `translate(${viewer.photoPosX}px,${viewer.photoPosY}px) scale(${viewer.scaleSize})`;
+      img.classList.toggle(classNames.smartPhotoImgOnMove, viewer.scale);
+      img.classList.toggle(classNames.smartPhotoImgElasticMove, viewer.elastic);
+    }
+    if (refs.nav) {
+      if (viewer.hideUi) {
+        hideFromA11yIfFocused(refs.nav);
+      }
+      refs.nav.setAttribute("aria-hidden", viewer.hideUi ? "true" : "false");
+    }
+    if (refs.arrows) {
+      if (viewer.hideUi) {
+        hideFromA11yIfFocused(refs.arrows);
+      }
+      refs.arrows.setAttribute("aria-hidden", viewer.hideUi ? "true" : "false");
+    }
+  }
+  function updateListTransform(state) {
+    const { viewer } = state;
+    refs.list.style.transform = `translate(${viewer.translateX}px,${viewer.translateY}px)`;
+    refs.list.classList.toggle(classNames.smartPhotoListOnMove, viewer.onMove);
+  }
+  function showAppearEffect(effect) {
+    const clone = document.createElement("img");
+    clone.className = classNames.smartPhotoImgClone;
+    clone.src = effect.img;
+    clone.style.width = `${effect.width}px`;
+    clone.style.height = `${effect.height}px`;
+    clone.style.transform = `translate(${effect.left}px,${effect.top}px) scale(1)`;
+    body.appendChild(clone);
+    refs.imgClone = clone;
+  }
+  function removeAppearEffect() {
+    refs.imgClone?.remove();
+    refs.imgClone = null;
+  }
+  function destroy() {
+    root.remove();
+  }
+  return {
+    root,
+    refs,
+    render,
+    syncSlides,
+    updatePhotoTransform,
+    updateListTransform,
+    showAppearEffect,
+    removeAppearEffect,
+    destroy
+  };
+}
+
+// src/core/index.ts
+function getWindowWidth() {
+  return document.documentElement.clientWidth;
+}
+function getWindowHeight() {
+  return document.documentElement.clientHeight;
+}
+function getUniqId() {
+  return (Date.now().toString(36) + Math.random().toString(36).substring(2, 7)).toUpperCase();
+}
+function getScroll() {
+  return {
+    x: window.pageXOffset !== void 0 ? window.pageXOffset : document.documentElement.scrollLeft,
+    y: window.pageYOffset !== void 0 ? window.pageYOffset : document.documentElement.scrollTop
+  };
+}
+var SmartPhoto = class {
+  constructor(source, settings) {
+    this.id = getUniqId();
+    this.abortController = new AbortController();
+    this.isSmartPhoneFlag = isSmartPhone();
+    this.lastTriggerElement = null;
+    // fireEvent("close") が dialog に発火する公開イベントは、ネイティブの close
+    // イベントと同じ "close" という型名を共有する(§8)。閉じるアニメーション完了後に
+    // 遅延発火するこの公開イベントを、ネイティブ close 同期用リスナー(下記)が
+    // 誤って拾わないよう、発火中であることを示すフラグで区別する
+    this.isFiringPublicCloseEvent = false;
+    // doHideEffect() の後始末(画像に設定した translateY の除去と promise 解決)を
+    // transitionend を待たずに即時実行するための関数。後始末が済むと null に戻る
+    this.finishHideEffect = null;
+    this.timeouts = [];
+    this.loadAllFired = /* @__PURE__ */ new Set();
+    this.syncedGroupId = null;
+    // ---- 内部: window イベント ----
+    this.handleResize = () => {
+      if (!currentItems(this.state)) {
+        return;
+      }
+      this.resetTranslateCurrent();
+      this.setPosByCurrentIndex();
+      this.setSizeByScreen();
+      this.commit();
+    };
+    this.handleKeydown = (e) => {
+      if (!this.state.viewer.isOpen) {
+        return;
+      }
+      const code = e.keyCode || e.which;
+      if (code === 37) {
+        this.gotoSlide(this.state.viewer.prev);
+      } else if (code === 39) {
+        this.gotoSlide(this.state.viewer.next);
+      } else if (code === 27) {
+        this.hidePhoto();
+      }
+    };
+    this.handleOrientationChange = () => {
+      if (!currentItems(this.state)) {
+        return;
+      }
+      this.resetTranslateCurrent();
+      this.setPosByCurrentIndex();
+      this.setHashByCurrentIndex();
+      this.setSizeByScreen();
+      this.commit();
+      const prevWidth = getWindowWidth();
+      const timeout = 500;
+      const poll = (time) => {
+        this.scheduleTimeout(() => {
+          if (prevWidth !== getWindowWidth()) {
+            this.resetTranslateCurrent();
+            this.setPosByCurrentIndex();
+            this.setHashByCurrentIndex();
+            this.setSizeByScreen();
+            this.commit();
+          } else if (time <= timeout) {
+            poll(time + 25);
+          }
+        }, 25);
+      };
+      poll(0);
+    };
+    this.state = createState(settings ?? {});
+    this.view = createView(
+      { id: this.id, options: this.state.options },
+      this.buildViewHandlers(),
+      { signal: this.abortController.signal }
+    );
+    document.body.appendChild(this.view.root);
+    this.gestures = createGestures(
+      { state: this.state, callbacks: this.buildGestureCallbacks() },
+      { signal: this.abortController.signal }
+    );
+    this.gestures.attach(this.view.refs.content, this.view.refs.list);
+    this.view.refs.dialog.addEventListener(
+      "close",
+      () => {
+        if (!this.isFiringPublicCloseEvent && this.state.viewer.isOpen) {
+          this.hidePhoto();
+        }
+      },
+      { signal: this.abortController.signal }
+    );
+    this.ingestSource(source);
+    this.syncCurrentGroupView();
+    const restored = this.restoreFromHash();
+    if (restored) {
+      if (restored.element) {
+        triggerEvent(restored.element, "click");
+      } else {
+        this.openPhoto(restored, null);
+      }
+    }
+    if (!this.isSmartPhoneFlag) {
+      window.addEventListener("resize", this.handleResize, {
+        signal: this.abortController.signal
+      });
+      window.addEventListener("keydown", this.handleKeydown, {
+        signal: this.abortController.signal
+      });
+      return;
+    }
+    window.addEventListener("orientationchange", this.handleOrientationChange, {
+      signal: this.abortController.signal
+    });
+  }
+  // ---- 公開 API: 既存契約 ----
+  on(event, fn) {
+    const dialog = this.view.refs.dialog;
+    const handler = (e) => fn.call(dialog, e);
+    dialog.addEventListener(event, handler, {
+      signal: this.abortController.signal
+    });
+  }
+  destroy() {
+    this.state.viewer.isOpen = false;
+    if (this.view.refs.dialog.open) {
+      this.view.refs.dialog.close();
+    }
+    this.abortController.abort();
+    this.timeouts.forEach((id) => {
+      clearTimeout(id);
+    });
+    this.timeouts = [];
+    this.gestures.detach();
+    this.view.destroy();
+  }
+  gotoSlide(index) {
+    this.state.viewer.currentIndex = Number.parseInt(String(index), 10);
+    if (!this.state.viewer.currentIndex) {
+      this.state.viewer.currentIndex = 0;
+    }
+    this.slideList();
+  }
+  hidePhoto(dir = "bottom") {
+    if (!this.state.viewer.isOpen) {
+      return;
+    }
+    this.state.viewer.isOpen = false;
+    this.state.viewer.appear = false;
+    this.state.viewer.appearEffect = null;
+    this.view.removeAppearEffect();
+    this.state.viewer.hideUi = false;
+    this.state.viewer.scale = false;
+    this.state.viewer.scaleSize = 1;
+    const scroll = getScroll();
+    if (location.hash) {
+      this.setHash("");
+    }
+    window.scroll(scroll.x, scroll.y);
+    this.syncDialog();
+    if (this.lastTriggerElement?.isConnected) {
+      this.lastTriggerElement.focus();
+    }
+    this.lastTriggerElement = null;
+    this.doHideEffect(dir).then(() => {
+      this.view.render(this.state);
+      this.isFiringPublicCloseEvent = true;
+      this.fireEvent("close");
+      this.isFiringPublicCloseEvent = false;
+    });
+  }
+  zoomPhoto() {
+    const item = currentItem(this.state);
+    if (!item) {
+      return;
+    }
+    this.state.viewer.hideUi = true;
+    this.state.viewer.scaleSize = scaleBorder(
+      item,
+      getWindowWidth(),
+      getWindowHeight(),
+      this.isSmartPhoneFlag
+    );
+    if (this.state.viewer.scaleSize <= 1) {
+      return;
+    }
+    this.state.viewer.photoPosX = 0;
+    this.state.viewer.photoPosY = 0;
+    this.view.updatePhotoTransform(this.state);
+    this.scheduleTimeout(() => {
+      this.state.viewer.scale = true;
+      this.view.updatePhotoTransform(this.state);
+      this.fireEvent("zoomin");
+    }, 300);
+  }
+  zoomOutPhoto() {
+    this.state.viewer.scaleSize = 1;
+    this.state.viewer.hideUi = false;
+    this.state.viewer.scale = false;
+    this.state.viewer.photoPosX = 0;
+    this.state.viewer.photoPosY = 0;
+    this.view.updatePhotoTransform(this.state);
+    this.fireEvent("zoomout");
+  }
+  addNewItem(element) {
+    return this.addItem(element);
+  }
+  // ---- 公開 API: v2 新設(§3.3) ----
+  show(indexOrId = 0, opts = {}) {
+    const groupId = opts.group ?? this.state.viewer.currentGroup;
+    if (groupId === null) {
+      return;
+    }
+    const items = this.state.groups.get(groupId);
+    if (!items?.length) {
+      return;
+    }
+    const item = typeof indexOrId === "number" ? items[indexOrId] : items.find((i) => i.id === indexOrId);
+    if (!item) {
+      return;
+    }
+    const activeElement = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const trigger = opts.trigger ?? item.element ?? activeElement;
+    this.openPhoto(item, trigger);
+  }
+  hide() {
+    this.hidePhoto();
+  }
+  next() {
+    if (!this.state.viewer.showNextArrow) {
+      return;
+    }
+    this.gotoSlide(this.state.viewer.next);
+  }
+  prev() {
+    if (!this.state.viewer.showPrevArrow) {
+      return;
+    }
+    this.gotoSlide(this.state.viewer.prev);
+  }
+  addItem(slideOrElement) {
+    const item = slideOrElement instanceof Element ? this.addElementItem(slideOrElement) : this.addSlideItem(slideOrElement);
+    this.syncCurrentGroupView();
+    return item;
+  }
+  get currentIndex() {
+    return this.state.viewer.currentIndex;
+  }
+  // ---- 内部: ソース取り込み ----
+  ingestSource(source) {
+    if (Array.isArray(source)) {
+      source.forEach((slide) => {
+        this.addSlideItem(slide);
+      });
+      return;
+    }
+    const elements = typeof source === "string" ? Array.from(document.querySelectorAll(source)) : Array.from(source);
+    elements.forEach((el) => {
+      this.addElementItem(el);
+    });
+  }
+  addElementItem(element) {
+    const groupId = groupIdFromElement(element);
+    const index = this.state.groups.get(groupId)?.length ?? 0;
+    const item = itemFromElement(
+      element,
+      this.state.options,
+      index,
+      getWindowWidth()
+    );
+    addItemToGroup(this.state, item);
+    this.loadAllFired.delete(groupId);
+    this.bindThumbnailClick(element, item);
+    return item;
+  }
+  addSlideItem(slide) {
+    const groupId = groupIdFromSlide(slide);
+    const index = this.state.groups.get(groupId)?.length ?? 0;
+    const item = itemFromSlide(slide, index, getWindowWidth());
+    addItemToGroup(this.state, item);
+    this.loadAllFired.delete(groupId);
+    return item;
+  }
+  bindThumbnailClick(element, item) {
+    element.addEventListener(
+      "click",
+      (e) => {
+        e.preventDefault();
+        this.openPhoto(item, element);
+      },
+      { signal: this.abortController.signal }
+    );
+  }
+  syncCurrentGroupView() {
+    const items = currentItems(this.state);
+    if (items) {
+      this.view.syncSlides(items, this.state);
+      this.syncedGroupId = this.state.viewer.currentGroup;
+    }
+  }
+  // ---- 内部: ハッシュ ----
+  setHash(hash) {
+    if (!window.history?.pushState || !this.state.options.useHistoryApi) {
+      return;
+    }
+    const path = `${location.pathname}${location.search}`;
+    window.history.replaceState(null, "", hash ? `${path}#${hash}` : path);
+  }
+  setHashByCurrentIndex() {
+    const scroll = getScroll();
+    this.setHash(buildHash(this.state));
+    window.scroll(scroll.x, scroll.y);
+  }
+  restoreFromHash() {
+    const hash = location.hash.substring(1);
+    if (!hash) {
+      return null;
+    }
+    return findItemByHash(this.state, parseQuery(hash));
+  }
+  // ---- 内部: レイアウト ----
+  setPosByCurrentIndex() {
+    const item = currentItem(this.state);
+    if (!item) {
+      return;
+    }
+    this.state.viewer.translateX = -item.translateX;
+    this.state.viewer.translateY = 0;
+    this.view.updateListTransform(this.state);
+  }
+  setSizeByScreen() {
+    const items = currentItems(this.state);
+    if (!items) {
+      return;
+    }
+    sizeItems(
+      items,
+      getWindowWidth(),
+      getWindowHeight(),
+      this.state.options.headerHeight,
+      this.state.options.footerHeight
+    );
+  }
+  // resize/orientationchange ハンドラは呼び出し前に currentItems の存在を確認済み
+  resetTranslateCurrent() {
+    resetTranslate(currentItems(this.state), getWindowWidth());
+  }
+  currentImgElement() {
+    for (const [item, slideRefs] of this.view.refs.slides) {
+      if (item.index === this.state.viewer.currentIndex) {
+        return slideRefs.img;
+      }
+    }
+    return null;
+  }
+  // ---- 内部: dialog 制御(§8) ----
+  syncDialog() {
+    const { dialog, caption } = this.view.refs;
+    if (this.state.viewer.isOpen && !dialog.open) {
+      dialog.showModal();
+      caption.focus();
+    } else if (!this.state.viewer.isOpen && dialog.open) {
+      dialog.close();
+    }
+  }
+  commit() {
+    this.view.render(this.state);
+    this.syncDialog();
+  }
+  // ---- 内部: 開く演出 ----
+  // initPhoto() は必ず有効なアイテムが存在するグループを開いた直後に呼ばれる
+  // (doOpen/loadNeighborItems/slideList のいずれも呼び出し前に確認済み)
+  initPhoto() {
+    this.finishHideEffect?.();
+    this.view.refs.dialog.style.opacity = "";
+    const items = currentItems(this.state);
+    this.state.viewer.total = items.length;
+    this.state.viewer.isOpen = true;
+    this.state.viewer.photoPosX = 0;
+    this.state.viewer.photoPosY = 0;
+    this.setPosByCurrentIndex();
+    this.setSizeByScreen();
+    setArrow(this.state);
+    if (this.state.options.resizeStyle === "fill" && this.isSmartPhoneFlag) {
+      const item = currentItem(this.state);
+      this.state.viewer.scale = true;
+      this.state.viewer.hideUi = true;
+      this.state.viewer.scaleSize = scaleBorder(
+        item,
+        getWindowWidth(),
+        getWindowHeight(),
+        this.isSmartPhoneFlag
+      );
+    }
+  }
+  supportsViewTransition() {
+    return typeof document.startViewTransition === "function";
+  }
+  openPhotoWithViewTransition(trigger) {
+    const transitionName = "smartphoto-hero";
+    const thumbImg = trigger?.querySelector("img") ?? null;
+    if (thumbImg) {
+      thumbImg.style.viewTransitionName = transitionName;
+    }
+    const clearNames = () => {
+      if (thumbImg) {
+        thumbImg.style.viewTransitionName = "";
+      }
+      const img = this.currentImgElement();
+      if (img) {
+        img.style.viewTransitionName = "";
+      }
+    };
+    const transition = document.startViewTransition?.(() => {
+      this.initPhoto();
+      this.state.viewer.appear = true;
+      this.commit();
+      if (thumbImg) {
+        thumbImg.style.viewTransitionName = "";
+      }
+      this.currentImgElement().style.viewTransitionName = transitionName;
+    });
+    transition?.ready.catch(() => {
+      clearNames();
+    });
+    transition?.finished.then(clearNames, clearNames);
+  }
+  // doOpen() の呼び出し元でこの分岐に来る時点で showAnimation !== false が保証されている
+  addAppearEffect(trigger, item) {
+    const img = trigger?.querySelector("img") ?? null;
+    if (!img) {
+      this.state.viewer.appear = true;
+      return;
+    }
+    const pos = getViewPos(img);
+    const width = img.offsetWidth;
+    const height = img.offsetHeight;
+    const toX = getWindowWidth();
+    const toY = getWindowHeight();
+    const screenY = toY - this.state.options.headerHeight - this.state.options.footerHeight;
+    let scale = 1;
+    if (this.state.options.resizeStyle === "fill" && this.isSmartPhoneFlag) {
+      if (width > height) {
+        scale = toY / height;
+      } else {
+        scale = toX / width;
+      }
+    } else {
+      if (width >= height) {
+        if (item.height < screenY) {
+          scale = item.width / width;
+        } else {
+          scale = screenY / height;
+        }
+      } else {
+        if (item.height < screenY) {
+          scale = item.height / height;
+        } else {
+          scale = screenY / height;
+        }
+      }
+      if (width * scale > toX) {
+        scale = toX / width;
+      }
+    }
+    const x = (scale - 1) / 2 * width + (toX - width * scale) / 2;
+    const y = (scale - 1) / 2 * height + (toY - height * scale) / 2;
+    const lazyImg = img.getAttribute(this.state.options.lazyAttribute);
+    this.state.viewer.appearEffect = {
+      width,
+      height,
+      top: pos.top,
+      left: pos.left,
+      once: true,
+      img: lazyImg || item.src || "",
+      afterX: x,
+      afterY: y,
+      scale
+    };
+  }
+  // showAppearEffect() が直前で refs.imgClone を必ず生成するため non-null が保証される
+  runAppearEffect(effect) {
+    this.view.showAppearEffect(effect);
+    const clone = this.view.refs.imgClone;
+    return new Promise((resolve) => {
+      const handler = () => {
+        clone.removeEventListener("transitionend", handler, true);
+        resolve();
+      };
+      clone.addEventListener("transitionend", handler, true);
+      this.scheduleTimeout(() => {
+        clone.style.transform = `translate(${effect.afterX}px, ${effect.afterY}px) scale(${effect.scale})`;
+      }, 10);
+    });
+  }
+  doOpen(trigger, item) {
+    if (this.state.options.showAnimation !== false && this.supportsViewTransition()) {
+      this.openPhotoWithViewTransition(trigger);
+    } else if (this.state.options.showAnimation === false) {
+      this.initPhoto();
+      this.state.viewer.appear = true;
+      this.commit();
+    } else {
+      this.initPhoto();
+      this.addAppearEffect(trigger, item);
+      this.commit();
+      const effect = this.state.viewer.appearEffect;
+      if (effect) {
+        this.runAppearEffect(effect).then(() => {
+          this.state.viewer.appearEffect = null;
+          this.view.removeAppearEffect();
+          this.state.viewer.appear = true;
+          this.commit();
+        });
+      }
+    }
+    this.fireEvent("open");
+    this.resyncSizeAfterOpen();
+  }
+  // initPhoto() 内の setSizeByScreen() は dialog がまだ showModal() 前(§: :root:has()
+  // による overflow:hidden 未適用)の時点の getWindowWidth/Height() を使っている。
+  // ページに縦スクロールバーがある環境ではその分だけ幅が狭く計測され、実際に
+  // dialog が開いてスクロールバーが消えた後の幅とズレる。次の描画フレームで
+  // 開いた後の正しいサイズを使って再計算し、必要なら再描画する
+  resyncSizeAfterOpen() {
+    const winWidthBefore = getWindowWidth();
+    const winHeightBefore = getWindowHeight();
+    requestAnimationFrame(() => {
+      if (!this.state.viewer.isOpen) {
+        return;
+      }
+      if (getWindowWidth() === winWidthBefore && getWindowHeight() === winHeightBefore) {
+        return;
+      }
+      this.resetTranslateCurrent();
+      this.setPosByCurrentIndex();
+      this.setSizeByScreen();
+      this.view.render(this.state);
+    });
+  }
+  openPhoto(item, trigger) {
+    this.lastTriggerElement = trigger;
+    this.state.viewer.currentGroup = item.groupId;
+    this.state.viewer.currentIndex = item.index;
+    if (this.syncedGroupId !== item.groupId) {
+      this.syncCurrentGroupView();
+    }
+    this.setHashByCurrentIndex();
+    if (item.loaded) {
+      this.doOpen(trigger, item);
+    } else {
+      this.loadItem(item).then(() => {
+        this.doOpen(trigger, item);
+      });
+    }
+  }
+  doHideEffect(dir) {
+    return new Promise((resolve) => {
+      const dialog = this.view.refs.dialog;
+      const img = this.currentImgElement();
+      const height = getWindowHeight();
+      const applied = dir === "top" ? `translateY(-${height}px)` : `translateY(${height}px)`;
+      const finish = () => {
+        if (this.finishHideEffect !== finish) {
+          return;
+        }
+        this.finishHideEffect = null;
+        dialog.removeEventListener("transitionend", finish, true);
+        if (img && img.style.transform === applied) {
+          img.style.transform = "";
+        }
+        resolve();
+      };
+      this.finishHideEffect = finish;
+      if (img) {
+        img.style.transform = applied;
+      }
+      dialog.addEventListener("transitionend", finish, true);
+      this.scheduleTimeout(finish, this.state.options.animationSpeed + 100);
+    });
+  }
+  // ---- 内部: ロード ----
+  loadItem(item) {
+    return new Promise((resolve) => {
+      const img = new Image();
+      img.onload = () => {
+        item.width = img.width;
+        item.height = img.height;
+        item.loaded = true;
+        this.checkLoadAll(item.groupId);
+        resolve();
+      };
+      img.onerror = () => resolve();
+      img.src = item.src ?? "";
+    });
+  }
+  checkLoadAll(groupId) {
+    if (this.loadAllFired.has(groupId)) {
+      return;
+    }
+    const items = this.state.groups.get(groupId);
+    if (items?.length && items.every((i) => i.loaded)) {
+      this.loadAllFired.add(groupId);
+      this.fireEvent("loadall");
+    }
+  }
+  loadNeighborItems() {
+    const items = currentItems(this.state);
+    if (!items) {
+      return;
+    }
+    const { currentIndex } = this.state.viewer;
+    const { loadOffset } = this.state.options;
+    const promises = [];
+    for (let i = currentIndex - loadOffset; i < currentIndex + loadOffset; i++) {
+      const item = items[i];
+      if (item && !item.loaded) {
+        promises.push(this.loadItem(item));
+      }
+    }
+    if (promises.length) {
+      Promise.all(promises).then(() => {
+        this.initPhoto();
+        this.commit();
+      });
+    }
+  }
+  // ---- 内部: ナビゲーション ----
+  slideList() {
+    this.state.viewer.scaleSize = 1;
+    this.state.viewer.hideUi = false;
+    this.state.viewer.scale = false;
+    this.state.viewer.photoPosX = 0;
+    this.state.viewer.photoPosY = 0;
+    this.state.viewer.onMove = true;
+    this.setPosByCurrentIndex();
+    this.setHashByCurrentIndex();
+    this.setSizeByScreen();
+    this.scheduleTimeout(() => {
+      const item = currentItem(this.state);
+      this.state.viewer.onMove = false;
+      setArrow(this.state);
+      this.commit();
+      if (this.state.viewer.oldIndex !== this.state.viewer.currentIndex) {
+        this.fireEvent("change");
+      }
+      this.state.viewer.oldIndex = this.state.viewer.currentIndex;
+      this.loadNeighborItems();
+      if (item && !item.loaded) {
+        this.loadItem(item).then(() => {
+          this.initPhoto();
+          this.commit();
+        });
+      }
+    }, 200);
+  }
+  // ---- 内部: タイマー(destroy 時に一括破棄) ----
+  scheduleTimeout(fn, delay) {
+    const id = window.setTimeout(() => {
+      this.timeouts = this.timeouts.filter((t) => t !== id);
+      fn();
+    }, delay);
+    this.timeouts.push(id);
+    return id;
+  }
+  // ---- 内部: イベント発火 ----
+  fireEvent(eventName) {
+    triggerEvent(this.view.refs.dialog, eventName);
+  }
+  // ---- 内部: 結線 ----
+  buildViewHandlers() {
+    return {
+      onDismiss: () => this.hidePhoto(),
+      onPrev: () => this.prev(),
+      onNext: () => this.next(),
+      onNavigate: (index) => this.gotoSlide(index),
+      onBackdropClick: () => this.hidePhoto()
+    };
+  }
+  buildGestureCallbacks() {
+    return {
+      onSwipeStart: () => this.fireEvent("swipestart"),
+      onSwipeMove: () => this.view.updateListTransform(this.state),
+      onSwipeEnd: (result) => {
+        this.fireEvent("swipeend");
+        if (result === "close-bottom") {
+          this.hidePhoto("bottom");
+          return;
+        }
+        if (result === "close-top") {
+          this.hidePhoto("top");
+          return;
+        }
+        if (result === "prev") {
+          this.state.viewer.currentIndex -= 1;
+        } else if (result === "next") {
+          this.state.viewer.currentIndex += 1;
+        }
+        this.slideList();
+      },
+      onTap: () => this.zoomPhoto(),
+      onGestureStart: () => {
+        this.fireEvent("gesturestart");
+        this.view.updatePhotoTransform(this.state);
+      },
+      onGestureMove: () => this.view.updatePhotoTransform(this.state),
+      onGestureEnd: () => {
+        this.fireEvent("gestureend");
+        this.view.updatePhotoTransform(this.state);
+      },
+      onPhotoDragMove: () => this.view.updatePhotoTransform(this.state),
+      onPhotoDragEnd: (result) => {
+        if (result === "zoom-out") {
+          this.zoomOutPhoto();
+          return;
+        }
+        if (result === "prev") {
+          this.gotoSlide(this.state.viewer.prev);
+          return;
+        }
+        if (result === "next") {
+          this.gotoSlide(this.state.viewer.next);
+          return;
+        }
+        this.view.updatePhotoTransform(this.state);
+      }
+    };
+  }
+};
+
+// src/index.ts
+var src_default = SmartPhoto;
+export {
+  src_default as default
+};