@kanyun-ai-infra/band-plugin-react 0.0.0-stage → 0.1.2

package/dist/image-view.js

@@ -0,0 +1,788 @@
+// src/image-view-model.ts
+var unit = (n) => typeof n === "number" && n >= 0 && n <= 1;
+function unitRectFrom(value) {
+  if (!value || typeof value !== "object") return null;
+  const r = value;
+  if (!unit(r.x) || !unit(r.y) || !unit(r.w) || !unit(r.h)) return null;
+  if (r.x + r.w > 1.000001 || r.y + r.h > 1.000001) return null;
+  return { x: r.x, y: r.y, w: r.w, h: r.h };
+}
+var DRAG_PX = 4;
+function unitRectOf(content, a, b = a) {
+  if (content.width <= 0 || content.height <= 0) return null;
+  const milli = (v, size) => Math.round(Math.min(1, Math.max(0, v / size)) * 1e3);
+  const x0 = milli(Math.min(a.x, b.x) - content.left, content.width);
+  const x1 = milli(Math.max(a.x, b.x) - content.left, content.width);
+  const y0 = milli(Math.min(a.y, b.y) - content.top, content.height);
+  const y1 = milli(Math.max(a.y, b.y) - content.top, content.height);
+  return { x: x0 / 1e3, y: y0 / 1e3, w: (x1 - x0) / 1e3, h: (y1 - y0) / 1e3 };
+}
+var MIN_SCALE = 1;
+var MAX_SCALE = 8;
+var SNAP_SCALE = 1.05;
+var FIT = { scale: 1, x: 0, y: 0 };
+function fitSize(natural, viewport) {
+  if (natural.width <= 0 || natural.height <= 0) return { width: 0, height: 0 };
+  const k = Math.min(1, viewport.width / natural.width, viewport.height / natural.height);
+  return { width: natural.width * k, height: natural.height * k };
+}
+function clampView(v, base, viewport, max = MAX_SCALE) {
+  const scale = Math.min(max, Math.max(MIN_SCALE, v.scale));
+  const room = (size, view) => Math.max(0, (size * scale - view) / 2);
+  const rx = room(base.width, viewport.width);
+  const ry = room(base.height, viewport.height);
+  return {
+    scale,
+    x: Math.min(rx, Math.max(-rx, v.x)),
+    y: Math.min(ry, Math.max(-ry, v.y))
+  };
+}
+function zoomAt(v, factor, at, base, viewport, max = MAX_SCALE) {
+  const scale = Math.min(Math.max(max, v.scale), Math.max(MIN_SCALE, v.scale * factor));
+  if (factor < 1 && scale < SNAP_SCALE) return FIT;
+  const k = scale / v.scale;
+  return clampView(
+    { scale, x: at.x - (at.x - v.x) * k, y: at.y - (at.y - v.y) * k },
+    base,
+    viewport,
+    Math.max(max, v.scale)
+  );
+}
+
+// src/image-lightbox.ts
+import {
+  blockingDialog,
+  withImeGuard
+} from "@kanyun-ai-infra/band-plugin-sdk";
+
+// src/image-lightbox-model.ts
+var LIGHTBOX_MAX_SCALE = Math.min(MAX_SCALE, 4);
+var LIGHTBOX_DRAG_PX = Math.max(DRAG_PX, 6);
+function lightboxSize(natural, viewport, narrow) {
+  const gap = narrow ? 12 : 40;
+  return fitSize(natural, {
+    width: Math.max(0, viewport.width - gap * 2),
+    height: Math.max(0, viewport.height - gap * 2)
+  });
+}
+function lightboxClamp(view, base, viewport) {
+  if (view.scale <= 1) return { scale: 1, x: 0, y: 0 };
+  return clampView(
+    view,
+    base,
+    {
+      width: Math.max(0, viewport.width - 80),
+      height: Math.max(0, viewport.height - 80)
+    },
+    LIGHTBOX_MAX_SCALE
+  );
+}
+function lightboxZoom(view, factor, at, base, viewport) {
+  const room = {
+    width: Math.max(0, viewport.width - 80),
+    height: Math.max(0, viewport.height - 80)
+  };
+  return lightboxClamp(zoomAt(view, factor, at, base, room, LIGHTBOX_MAX_SCALE), base, viewport);
+}
+function focusRegion(rect, base, viewport) {
+  return lightboxClamp(
+    {
+      scale: 2,
+      x: (0.5 - rect.x - rect.w / 2) * base.width * 2,
+      y: (0.5 - rect.y - rect.h / 2) * base.height * 2
+    },
+    base,
+    viewport
+  );
+}
+function nextImage(index, delta, count) {
+  return Math.max(0, Math.min(count - 1, index + delta));
+}
+
+// src/image-lightbox.ts
+var LIGHTBOX_STYLE = `
+.bs-frame { position: relative; min-height: 0; height: 100%; display: grid; }
+.bs-frame .bs-lb [hidden] { display: none; }
+.bs-picture { display: block; position: relative; padding: 0; border: 0; background: none; border-radius: var(--r-sm); cursor: zoom-in; justify-self: start; }
+.bs-picture:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.bs-wall .bs-picture { width: 100%; justify-self: stretch; }
+.bs-wall .bs-thumb { max-width: 100%; }
+.bs-magnify { position: absolute; right: 4px; bottom: 4px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; background: rgba(0,0,0,.45); color: var(--media-ink); opacity: 0; }
+.bs-magnify svg { width: 14px; height: 14px; }
+.bs-picture:hover .bs-magnify, .bs-picture:focus-visible .bs-magnify { opacity: 1; }
+.bs-count { position: absolute; top: 4px; left: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font: 600 10px var(--mono); }
+.bs-returned { outline: 2px solid var(--accent); outline-offset: -2px; }
+.bs-lb { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto; background: var(--media); color: var(--media-ink); min-width: 0; }
+/* \u5168\u5C4F\u5C42\u7EA7\u7531\u771F\u5B9E\u6302\u8F7D\u70B9\u7BA1\u7406\uFF1B\u9501\u5B9A\u8BC4\u8BBA\u5BBF\u4E3B\u540C\u6863\u540E\u7F6E\uFF0C\u7EE7\u7EED\u753B\u5728\u5927\u56FE\u4E0A\u9762\u3002 */
+.bs-lb[data-full="true"] { position: fixed; inset: 0; }
+.bs-lb-bar { display: flex; align-items: center; gap: 4px; padding: 8px 12px; min-width: 0; }
+.bs-lb-title { font-size: var(--fs-ui); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; margin: 0 6px; }
+.bs-lb-title span { color: rgba(255,255,255,.6); font: var(--fs-meta) var(--mono); margin-left: 6px; }
+.bs-lb-grow { flex: 1; }
+.bs-lb .bs-lb-button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; display: inline-grid; place-items: center; background: transparent; color: rgba(255,255,255,.85); cursor: pointer; flex: none; }
+.bs-lb-button svg { width: 18px; height: 18px; }
+.bs-lb .bs-lb-button:hover, .bs-lb-back:hover, .bs-lb-zoom:hover { background: rgba(255,255,255,.12); }
+.bs-lb button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.bs-lb button:disabled { opacity: .3; cursor: default; }
+.bs-lb-back { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: rgba(255,255,255,.85); font: var(--fs-ui) var(--font); padding: 5px 8px 5px 4px; border-radius: var(--r); cursor: pointer; white-space: nowrap; }
+.bs-lb-back svg { width: 16px; height: 16px; }
+.bs-lb-zoom { font: 500 var(--fs-meta) var(--mono); color: rgba(255,255,255,.8); min-width: 48px; text-align: center; border: 0; background: transparent; cursor: pointer; border-radius: var(--r-sm); padding: 4px 2px; font-variant-numeric: tabular-nums; }
+.bs-lb-main { display: grid; grid-template-columns: minmax(0,1fr) 300px; min-height: 0; }
+.bs-lb-stage { position: relative; overflow: hidden; touch-action: none; user-select: none; min-height: 0; outline: none; }
+.bs-lb-stage[data-pan="true"] { cursor: grab; }
+.bs-lb-stage[data-pan="true"]:active { cursor: grabbing; }
+.bs-lb-stage[data-mark="true"] { cursor: crosshair; }
+.bs-lb-image { position: absolute; border-radius: 2px; box-shadow: 0 8px 30px rgba(0,0,0,.5); max-width: none; object-fit: fill; pointer-events: none; }
+.bs-lb-regions { position: absolute; inset: 0; pointer-events: none; }
+.bs-lb-region { position: absolute; border: 2px solid var(--accent); background: color-mix(in srgb,var(--accent) 13%,transparent); border-radius: 2px; }
+.bs-lb-region.old { border-width: 1.5px; border-style: dashed; background: color-mix(in srgb,var(--accent) 8%,transparent); }
+.bs-lb-point { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent); translate: -50% -50%; }
+.bs-lb-nav { position: absolute; top: 50%; translate: 0 -50%; width: 40px; height: 40px; border-radius: 20px; border: 0; background: rgba(0,0,0,.45); color: var(--media-ink); display: grid; place-items: center; cursor: pointer; }
+.bs-lb-nav:hover { background: rgba(0,0,0,.7); }
+.bs-lb-nav svg { width: 20px; height: 20px; }
+.bs-lb-nav.prev { left: 12px; } .bs-lb-nav.next { right: 12px; }
+.bs-lb-side { background: var(--panel); color: var(--ink); overflow: auto; overscroll-behavior: contain; padding: 16px; display: grid; gap: 12px; align-content: start; border-left: 1px solid var(--rule); min-width: 0; }
+.bs-lb-side h3 { margin: 0; font-size: var(--fs-title); display: flex; align-items: baseline; gap: 8px; }
+.bs-lb-side h3 span { font: var(--fs-meta) var(--mono); color: var(--muted); font-weight: 400; }
+.bs-lb-side dl { margin: 0; display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 6px 8px; font-size: var(--fs-ui); }
+.bs-lb-side dt { color: var(--muted); font-size: var(--fs-meta); padding-top: 1px; }
+.bs-lb-side dd { margin: 0; overflow-wrap: anywhere; }
+.bs-lb-path { font-family: var(--mono); }
+.bs-lb-cm-head { font-size: var(--fs-meta); color: var(--muted); border-top: 1px solid var(--rule); padding-top: 10px; }
+.bs-lb-cm { border: 0; background: none; text-align: left; display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 8px; padding: 6px; border-radius: var(--r); cursor: pointer; font: var(--fs-ui) var(--font); color: var(--ink); }
+.bs-lb-cm:hover { background: var(--fill-2); }
+.bs-lb-excerpt { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+.bs-lb-hint { margin: 0; font-size: var(--fs-meta); color: var(--muted); }
+.bs-lb-stage .bs-lb-hint { padding: 40px; color: var(--media-ink); }
+.bs-lb-strip { display: flex; gap: 6px; padding: 8px 12px 10px; overflow-x: auto; overscroll-behavior: contain; justify-content: safe center; }
+.bs-lb-strip button { flex: none; width: 88px; aspect-ratio: 16/9; border-radius: 4px; border: 2px solid transparent; padding: 0; position: relative; overflow: hidden; cursor: pointer; background: none; opacity: .65; }
+.bs-lb-strip button[aria-current="true"] { border-color: rgba(255,255,255,1); opacity: 1; }
+.bs-lb-strip button:hover { opacity: 1; }
+.bs-lb-strip img { width: 100%; height: 100%; object-fit: cover; }
+.bs-lb-strip span { position: absolute; left: 4px; bottom: 2px; font: 600 10px var(--mono); color: var(--media-ink); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
+@media (max-width: 600px) {
+ .bs-lb-main { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) minmax(0,1fr); }
+ .bs-lb-side { border-left: 0; border-top: 1px solid var(--rule); }
+ .bs-lb-strip { display: none; }
+ .bs-lb-nav { width: 34px; height: 34px; }
+ .bs-lb-title { margin: 0; }
+ .bs-lb-back { font-size: 0; padding: 5px 4px; }
+}
+`;
+var ICONS = {
+  back: "M15 18l-6-6 6-6",
+  next: "M9 18l6-6-6-6",
+  minus: "M10 14h4 M21 21l-5-5 M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0",
+  plus: "M10 6v8 M6 10h8 M21 21l-5-5 M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0",
+  full: "M15 3h6v6 M21 3l-7 7 M9 21H3v-6 M3 21l7-7",
+  comment: "M21 11a9 9 0 0 1-9 9H3l2-5a9 9 0 1 1 16-4"
+};
+function lightboxIcon(doc, name) {
+  const svg = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "1.8");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  svg.setAttribute("aria-hidden", "true");
+  const path = doc.createElementNS(svg.namespaceURI, "path");
+  path.setAttribute("d", ICONS[name]);
+  svg.append(path);
+  return svg;
+}
+function createImageLightbox(ctx, root, frame, options) {
+  const doc = root.ownerDocument;
+  const win = doc.defaultView;
+  const el = (tag, cls, text) => {
+    const node = doc.createElement(tag);
+    if (cls) node.className = cls;
+    if (text !== void 0) node.textContent = text;
+    return node;
+  };
+  let layer = null;
+  let stage = null;
+  let image = null;
+  let regions = null;
+  let side = null;
+  let index = 0;
+  let view = FIT;
+  let full = false;
+  let space = false;
+  let alive = true;
+  let loaded = false;
+  let generation = 0;
+  let gesture = null;
+  let draft = null;
+  let ownAnchor = null;
+  let threads = [];
+  let focused = null;
+  let ready = Promise.resolve(false);
+  let settleImage = () => void 0;
+  const pointers = /* @__PURE__ */ new Map();
+  let savedFull = null;
+  const fullStyle = {
+    position: "fixed",
+    "z-index": "var(--layer-viewer-full)",
+    inset: "0",
+    margin: "0",
+    "overflow-x": "hidden",
+    "overflow-y": "hidden",
+    "overscroll-behavior-x": "contain",
+    "overscroll-behavior-y": "contain"
+  };
+  const applyFullStyle = (on) => {
+    if (on) {
+      savedFull = {
+        style: Object.keys(fullStyle).map((key) => [
+          key,
+          root.style.getPropertyValue(key),
+          root.style.getPropertyPriority(key)
+        ])
+      };
+      for (const [key, value] of Object.entries(fullStyle)) root.style.setProperty(key, value);
+    } else if (savedFull) {
+      for (const [key, value, priority] of savedFull.style) {
+        if (value) root.style.setProperty(key, value, priority);
+        else root.style.removeProperty(key);
+      }
+      savedFull = null;
+    }
+  };
+  const narrow = () => (win?.innerWidth ?? 1440) <= 600;
+  const marking = () => options.canComment() && ctx.anchors.annotating.get() && !narrow() && !space;
+  const viewport = () => ({
+    width: stage?.getBoundingClientRect().width ?? 0,
+    height: stage?.getBoundingClientRect().height ?? 0
+  });
+  const base = () => lightboxSize(
+    { width: image?.naturalWidth ?? 0, height: image?.naturalHeight ?? 0 },
+    viewport(),
+    narrow()
+  );
+  const path = () => options.items()[index]?.path ?? null;
+  const relative = (at) => {
+    const r = stage?.getBoundingClientRect();
+    return {
+      x: at.x - (r?.left ?? 0) - (r?.width ?? 0) / 2,
+      y: at.y - (r?.top ?? 0) - (r?.height ?? 0) / 2
+    };
+  };
+  const imageRect = () => {
+    const r = stage?.getBoundingClientRect();
+    const b = base();
+    const width = b.width * view.scale;
+    const height = b.height * view.scale;
+    return {
+      left: (r?.left ?? 0) + ((r?.width ?? 0) - width) / 2 + view.x,
+      top: (r?.top ?? 0) + ((r?.height ?? 0) - height) / 2 + view.y,
+      width,
+      height
+    };
+  };
+  const fits = (p) => {
+    const r = imageRect();
+    return p.x >= r.left && p.x <= r.left + r.width && p.y >= r.top && p.y <= r.top + r.height;
+  };
+  const clearSelection = () => {
+    const selected = ctx.selection.get();
+    if (ownAnchor && selected?.kind === "anchor" && selected.anchor.id === ownAnchor)
+      ctx.selection.set(null);
+    ownAnchor = null;
+    draft = null;
+  };
+  const cancel = () => {
+    gesture = null;
+    draft = null;
+    pointers.clear();
+  };
+  const addRegion = (rect, old) => {
+    if (!regions || !stage) return;
+    const r = imageRect();
+    const s = stage.getBoundingClientRect();
+    const point = rect.w === 0 && rect.h === 0;
+    const mark = el("div", point ? "bs-lb-point" : `bs-lb-region${old ? " old" : ""}`);
+    mark.style.left = `${r.left - s.left + rect.x * r.width}px`;
+    mark.style.top = `${r.top - s.top + rect.y * r.height}px`;
+    if (!point) {
+      mark.style.width = `${rect.w * r.width}px`;
+      mark.style.height = `${rect.h * r.height}px`;
+    }
+    regions.append(mark);
+  };
+  const drawRegions = () => {
+    regions?.replaceChildren();
+    if (!loaded || !ctx.anchors.annotating.get() || narrow()) return;
+    for (const t of threads) {
+      const target = options.region(t.anchor);
+      if (t.status !== "resolved" && target?.index === index) addRegion(target.rect, true);
+    }
+    if (draft) addRegion(draft, false);
+  };
+  const paint = () => {
+    if (!stage || !image) return;
+    view = lightboxClamp(view, base(), viewport());
+    const r = imageRect();
+    const s = stage.getBoundingClientRect();
+    Object.assign(image.style, {
+      left: `${r.left - s.left}px`,
+      top: `${r.top - s.top}px`,
+      width: `${r.width}px`,
+      height: `${r.height}px`
+    });
+    const zoom2 = layer?.querySelector('[aria-label="\u9002\u5E94\u7A97\u53E3"]');
+    if (zoom2) zoom2.textContent = `${Math.round(view.scale * 100)}%`;
+    stage.dataset.mark = String(marking());
+    stage.dataset.pan = String(view.scale > 1 && !marking());
+    drawRegions();
+    options.notify();
+  };
+  const zoom = (factor, at = { x: 0, y: 0 }) => {
+    view = lightboxZoom(view, factor, at, base(), viewport());
+    paint();
+  };
+  const setFull = () => {
+    full = !full;
+    applyFullStyle(full);
+    if (layer) layer.dataset.full = String(full);
+    drawFullButton();
+    paint();
+  };
+  const makeButton = (label, icon, action, cls = "bs-lb-button") => {
+    const button = el("button", cls);
+    button.type = "button";
+    button.setAttribute("aria-label", label);
+    button.title = label;
+    button.append(lightboxIcon(doc, icon));
+    button.addEventListener("click", action);
+    return button;
+  };
+  const drawFullButton = () => {
+    const toggle = layer?.querySelector("[data-full-comment]");
+    if (toggle) {
+      toggle.hidden = !full || !options.canComment() || narrow();
+      toggle.setAttribute("aria-pressed", String(ctx.anchors.annotating.get()));
+    }
+  };
+  const drawSide = () => {
+    if (!side) return;
+    side.replaceChildren();
+    options.renderSide(side, index);
+  };
+  const close = () => {
+    if (!layer) return;
+    clearSelection();
+    applyFullStyle(false);
+    cancel();
+    generation++;
+    settleImage(false);
+    layer.remove();
+    layer = stage = image = regions = side = null;
+    full = false;
+    loaded = false;
+    options.returned(index);
+    options.notify();
+  };
+  const pinch = () => {
+    const [a, b] = [...pointers.values()];
+    return a && b ? {
+      distance: Math.hypot(a.x - b.x, a.y - b.y),
+      mid: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }
+    } : null;
+  };
+  const bindStage = (canvas) => {
+    canvas.addEventListener(
+      "wheel",
+      (e) => {
+        if (!loaded) return;
+        e.preventDefault();
+        zoom(
+          Math.exp(-Math.max(-100, Math.min(100, e.deltaY)) * 2e-3 * (e.ctrlKey ? 4 : 1)),
+          relative({ x: e.clientX, y: e.clientY })
+        );
+      },
+      { passive: false }
+    );
+    canvas.addEventListener("dblclick", (e) => {
+      if (!loaded || marking()) return;
+      if (view.scale > 1) {
+        view = FIT;
+        paint();
+      } else zoom(2, relative({ x: e.clientX, y: e.clientY }));
+    });
+    canvas.addEventListener("pointerdown", (e) => {
+      if (!loaded || e.pointerType === "mouse" && e.button !== 0 || e.target instanceof Element && e.target.closest("button"))
+        return;
+      const at = { x: e.clientX, y: e.clientY };
+      pointers.set(e.pointerId, at);
+      canvas.setPointerCapture?.(e.pointerId);
+      if (pointers.size === 2) {
+        const p = pinch();
+        draft = null;
+        gesture = p ? { kind: "pinch", ...p, view } : null;
+        paint();
+        return;
+      }
+      if (pointers.size !== 1) return;
+      if (marking() && fits(at))
+        gesture = { kind: "mark", id: e.pointerId, start: at, view, moved: false };
+      else if (!marking() && view.scale > 1)
+        gesture = { kind: "pan", id: e.pointerId, start: at, view, moved: false };
+    });
+    canvas.addEventListener("pointermove", (e) => {
+      if (!pointers.has(e.pointerId)) return;
+      const at = { x: e.clientX, y: e.clientY };
+      pointers.set(e.pointerId, at);
+      const g = gesture;
+      if (!g) return;
+      if (g.kind === "pinch") {
+        const p = pinch();
+        if (!p || g.distance <= 0) return;
+        const z = lightboxZoom(
+          g.view,
+          p.distance / g.distance,
+          relative(g.mid),
+          base(),
+          viewport()
+        );
+        view = lightboxClamp(
+          { ...z, x: z.x + p.mid.x - g.mid.x, y: z.y + p.mid.y - g.mid.y },
+          base(),
+          viewport()
+        );
+        paint();
+        return;
+      }
+      if (g.id !== e.pointerId) return;
+      if (g.kind === "pan") {
+        view = lightboxClamp(
+          { ...g.view, x: g.view.x + at.x - g.start.x, y: g.view.y + at.y - g.start.y },
+          base(),
+          viewport()
+        );
+        paint();
+        return;
+      }
+      if (!g.moved && Math.hypot(at.x - g.start.x, at.y - g.start.y) <= LIGHTBOX_DRAG_PX) return;
+      g.moved = true;
+      draft = unitRectOf(imageRect(), g.start, at);
+      paint();
+    });
+    const release = (e, commit) => {
+      if (!pointers.delete(e.pointerId)) return;
+      const g = gesture;
+      if (g?.kind === "pinch") {
+        if (pointers.size < 2) {
+          gesture = null;
+          pointers.clear();
+        }
+        return;
+      }
+      if (!g || g.id !== e.pointerId) return;
+      gesture = null;
+      draft = null;
+      paint();
+      if (!commit || g.kind !== "mark" || !marking()) return;
+      const rect = unitRectOf(
+        imageRect(),
+        g.start,
+        g.moved ? { x: e.clientX, y: e.clientY } : g.start
+      );
+      const p = path();
+      if (!rect || !p) return;
+      const anchor = options.makeAnchor?.(index, rect);
+      if (!anchor) return;
+      ownAnchor = anchor.id;
+      ctx.threads.openAt(anchor);
+    };
+    canvas.addEventListener("pointerup", (e) => release(e, true));
+    canvas.addEventListener("pointercancel", (e) => release(e, false));
+  };
+  const open = (next) => {
+    const items = options.items();
+    if (!items[next]) return;
+    clearSelection();
+    cancel();
+    generation++;
+    const seq = generation;
+    settleImage(false);
+    index = next;
+    view = FIT;
+    loaded = false;
+    focused = null;
+    layer?.remove();
+    layer = el("section", "bs-lb");
+    layer.setAttribute("aria-label", options.labels.layer);
+    layer.dataset.full = String(full);
+    const bar = el("div", "bs-lb-bar");
+    const back = makeButton(options.labels.back, "back", close, "bs-lb-back");
+    back.append(options.labels.back);
+    bar.append(back);
+    const heading = options.heading(index);
+    const title = el("div", "bs-lb-title", heading.title);
+    if (heading.meta) title.append(el("span", void 0, heading.meta));
+    const fit = el("button", "bs-lb-zoom", "100%");
+    fit.type = "button";
+    fit.setAttribute("aria-label", "\u9002\u5E94\u7A97\u53E3");
+    fit.addEventListener("click", () => {
+      view = FIT;
+      paint();
+    });
+    const comment = makeButton(
+      "\u8BC4\u8BBA\uFF08C\uFF09",
+      "comment",
+      () => ctx.anchors.annotating.set(!ctx.anchors.annotating.get())
+    );
+    comment.dataset.fullComment = "";
+    bar.append(
+      title,
+      el("span", "bs-lb-grow"),
+      makeButton("\u7F29\u5C0F", "minus", () => zoom(1 / 1.25)),
+      fit,
+      makeButton("\u653E\u5927", "plus", () => zoom(1.25)),
+      makeButton("\u5168\u5C4F\uFF08F\uFF09", "full", setFull),
+      comment
+    );
+    const main = el("div", "bs-lb-main");
+    stage = el("div", "bs-lb-stage");
+    stage.setAttribute("aria-label", options.labels.stage);
+    stage.tabIndex = 0;
+    image = el("img", "bs-lb-image");
+    image.alt = items[index]?.alt ?? items[index]?.title ?? "";
+    regions = el("div", "bs-lb-regions");
+    stage.append(image, regions);
+    bindStage(stage);
+    const go = (delta) => {
+      const n = nextImage(index, delta, items.length);
+      if (n !== index) open(n);
+    };
+    const prev = makeButton(options.labels.previous, "back", () => go(-1), "bs-lb-nav prev");
+    const nextButton = makeButton(options.labels.next, "next", () => go(1), "bs-lb-nav next");
+    prev.disabled = index === 0;
+    nextButton.disabled = index === items.length - 1;
+    stage.append(prev, nextButton);
+    side = el("aside", "bs-lb-side");
+    side.setAttribute("aria-label", options.labels.side);
+    main.append(stage, side);
+    const strip = el("nav", "bs-lb-strip");
+    strip.setAttribute("aria-label", options.labels.strip);
+    items.forEach((item, i) => {
+      const button = el("button");
+      button.type = "button";
+      button.setAttribute("aria-label", options.labels.item(i));
+      button.setAttribute("aria-current", String(i === index));
+      const p2 = item.path;
+      if (p2) {
+        const thumb = el("img");
+        thumb.alt = "";
+        button.append(thumb);
+        void options.imageUrl(p2).then(
+          (url) => {
+            if (alive && seq === generation) thumb.src = url;
+          },
+          () => void 0
+        );
+      }
+      button.append(el("span", void 0, String(i + 1)));
+      button.addEventListener("click", () => {
+        if (i !== index) open(i);
+      });
+      strip.append(button);
+    });
+    layer.append(bar, main, strip);
+    frame.append(layer);
+    drawSide();
+    drawFullButton();
+    paint();
+    stage.focus({ preventScroll: true });
+    ready = new Promise((r) => {
+      settleImage = r;
+    });
+    const img = image;
+    const p = path();
+    img.addEventListener(
+      "load",
+      () => {
+        if (seq !== generation || !alive) return;
+        loaded = true;
+        if (focused) view = focusRegion(focused, base(), viewport());
+        paint();
+        settleImage(true);
+      },
+      { once: true }
+    );
+    img.addEventListener(
+      "error",
+      () => {
+        if (seq !== generation || !alive) return;
+        settleImage(false);
+        stage?.append(el("p", "bs-lb-hint", options.labels.error));
+      },
+      { once: true }
+    );
+    if (p)
+      void options.imageUrl(p).then(
+        (url) => {
+          if (seq === generation && alive) img.src = url;
+        },
+        () => {
+          if (seq === generation) img.dispatchEvent(new Event("error"));
+        }
+      );
+    else settleImage(false);
+    options.notify();
+  };
+  const locate = (anchor) => {
+    const target = options.region(anchor);
+    if (!target) return { at: "none" };
+    if (!layer || target.index !== index) return { at: "elsewhere" };
+    if (!loaded || !stage) return { at: "pending" };
+    const r = imageRect();
+    const s = stage.getBoundingClientRect();
+    const o = root.getBoundingClientRect();
+    const rect = target.rect;
+    const left = Math.max(s.left, r.left + rect.x * r.width);
+    const top = Math.max(s.top, r.top + rect.y * r.height);
+    const right = Math.min(s.right, r.left + (rect.x + rect.w) * r.width);
+    const bottom = Math.min(s.bottom, r.top + (rect.y + rect.h) * r.height);
+    if (left > right || top > bottom) return { at: "elsewhere" };
+    return {
+      at: "rects",
+      rects: [{ x: left - o.left, y: top - o.top, width: right - left, height: bottom - top }],
+      ...options.changed(anchor, target.path) ? { status: "changed" } : {}
+    };
+  };
+  const reveal = async (anchor) => {
+    const target = options.region(anchor);
+    if (!target) return false;
+    if (options.canComment()) ctx.anchors.annotating.set(true);
+    if (!layer || target.index !== index) open(target.index);
+    focused = target.rect;
+    if (loaded) {
+      view = focusRegion(target.rect, base(), viewport());
+      paint();
+    }
+    const seq = generation;
+    const ok = await ready;
+    return alive && ok && seq === generation;
+  };
+  const ownsKeys = () => {
+    const layers = doc.querySelectorAll("[data-band-layer]");
+    const own = root.closest("[data-band-layer]");
+    if (own !== (layers[layers.length - 1] ?? null)) return false;
+    return blockingDialog(void 0, {
+      querySelectorAll: (selector) => [...doc.querySelectorAll(selector)].filter((node) => !node.contains(root))
+    }) === null;
+  };
+  const onKeyDown = withImeGuard((e) => {
+    if (!layer || e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey || !ownsKeys()) return;
+    const typing = e.target instanceof HTMLElement && (e.target.isContentEditable || !!e.target.closest("input,textarea,select"));
+    if (typing) return;
+    if (e.key === "Escape") {
+      if (gesture?.kind === "mark") {
+        cancel();
+        paint();
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        return;
+      }
+      e.preventDefault();
+      if (options.canComment() && ctx.anchors.annotating.get()) ctx.anchors.annotating.set(false);
+      else if (full) setFull();
+      else close();
+      return;
+    }
+    const items = options.items();
+    if (!items.length) return;
+    if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+      const n = nextImage(index, e.key === "ArrowLeft" ? -1 : 1, items.length);
+      if (n !== index) open(n);
+    } else if (e.key === "+" || e.key === "=") zoom(1.25);
+    else if (e.key === "-") zoom(1 / 1.25);
+    else if (e.key === "0") {
+      view = FIT;
+      paint();
+    } else if (e.code === "KeyF" || e.key.toLowerCase() === "f") {
+      if (!e.repeat) setFull();
+    } else if (e.code === "Space" || e.key === " ") {
+      space = true;
+      paint();
+    } else return;
+    e.preventDefault();
+    e.stopPropagation();
+  });
+  const onKeyUp = (e) => {
+    if (e.code === "Space" || e.key === " ") {
+      space = false;
+      paint();
+    }
+  };
+  const resize = () => {
+    drawFullButton();
+    drawSide();
+    paint();
+  };
+  const blur = () => {
+    space = false;
+    cancel();
+    paint();
+  };
+  doc.addEventListener("keydown", onKeyDown);
+  doc.addEventListener("keyup", onKeyUp);
+  win?.addEventListener("resize", resize);
+  win?.addEventListener("blur", blur);
+  const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(resize);
+  observer?.observe(frame);
+  const offMode = ctx.anchors.annotating.subscribe(() => {
+    cancel();
+    drawFullButton();
+    paint();
+  });
+  return {
+    open,
+    locate,
+    reveal,
+    setThreads(next) {
+      threads = next;
+      drawSide();
+      drawRegions();
+    },
+    close,
+    refresh() {
+      drawSide();
+      drawRegions();
+    },
+    dispose() {
+      alive = false;
+      close();
+      observer?.disconnect();
+      offMode();
+      doc.removeEventListener("keydown", onKeyDown);
+      doc.removeEventListener("keyup", onKeyUp);
+      win?.removeEventListener("resize", resize);
+      win?.removeEventListener("blur", blur);
+    }
+  };
+}
+export {
+  DRAG_PX,
+  FIT,
+  LIGHTBOX_DRAG_PX,
+  LIGHTBOX_MAX_SCALE,
+  LIGHTBOX_STYLE,
+  MAX_SCALE,
+  MIN_SCALE,
+  SNAP_SCALE,
+  clampView,
+  createImageLightbox,
+  fitSize,
+  focusRegion,
+  lightboxClamp,
+  lightboxIcon,
+  lightboxSize,
+  lightboxZoom,
+  nextImage,
+  unitRectFrom,
+  unitRectOf,
+  zoomAt
+};