@leavepulse/ui 0.77.3 → 0.78.1

package/dist/chunks/{LpInput-Tw-yxT4I.js → LpInput-D0O6dpuA.js}

@@ -1,19 +1,17 @@
-import { defineComponent, computed, useSlots, useAttrs, ref, openBlock, createBlock, normalizeStyle, unref, normalizeClass, withCtx, createElementVNode, createElementBlock, renderSlot, createCommentVNode, mergeProps, withModifiers, createVNode } from "vue";
+import { defineComponent, computed, useSlots, useAttrs, ref, openBlock, createBlock, normalizeProps, guardReactiveProps, unref, withCtx, createElementVNode, normalizeStyle, normalizeClass, createVNode, createSlots, renderSlot, mergeProps, createElementBlock, withModifiers, createCommentVNode } from "vue";
+import { CONTROL_SIZE } from "../components/controlSize.js";
 import { usePaletteControl } from "../composables/usePaletteCommands.js";
 import { tv } from "tailwind-variants";
-import { useFieldControl } from "../composables/useField.js";
+import { useFieldControl, isAttrOn, fieldWrapperBinds, mergeDescribedBy } from "../composables/useField.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { useInputFilter } from "../composables/useInputFilter.js";
 import { useInputMask, DEFAULT_MASK_TOKENS } from "../composables/useInputMask.js";
 import { mergeClass } from "../composables/useMergedClass.js";
-import { _ as _sfc_main$1 } from "./FieldWrapper-CORPzo9s.js";
-import { _ as _sfc_main$2 } from "./LpIcon--5WSb3jJ.js";
-const _hoisted_1 = {
-  key: 0,
-  class: "flex shrink-0 items-center text-muted"
-};
-const _hoisted_2 = ["id", "type", "value", "placeholder", "disabled", "required", "aria-invalid", "aria-describedby"];
-const _hoisted_3 = ["aria-label"];
+import { _ as _sfc_main$1 } from "./FieldWrapper-DnuMTrqW.js";
+import { _ as _sfc_main$2 } from "./FieldLeading-mr81aEAP.js";
+import { _ as _sfc_main$3 } from "./LpIcon-C6JpQ5td.js";
+const _hoisted_1 = ["id", "type", "value", "placeholder", "disabled", "required", "aria-invalid", "aria-describedby"];
+const _hoisted_2 = ["aria-label"];
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -53,11 +51,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-55"
       ],
       variants: {
-        size: {
-          sm: "h-(--size-control-sm) text-xs",
-          md: "h-(--size-control-md) text-sm",
-          lg: "h-(--size-control-lg) text-sm"
-        },
+        size: CONTROL_SIZE,
         invalid: {
           true: "border-danger focus-within:border-danger focus-within:ring-danger-soft"
         }
@@ -80,20 +74,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function onBefore(event) {
       onBeforeInput(event);
       if (!event.defaultPrevented) masking.onBeforeInput(event);
-      if (event.defaultPrevented && masking.active.value && event.target instanceof HTMLInputElement) {
+      if (event.defaultPrevented && masking.active.value) {
         emit("update:modelValue", event.target.value);
       }
     }
     function onInputEvent(event) {
+      filterInput(event);
       if (masking.active.value) masking.onInput(event);
-      else filterInput(event);
       emit("update:modelValue", event.target.value);
     }
     function onComposed(event) {
-      if (masking.active.value) {
-        masking.onCompositionEnd(event);
-        emit("update:modelValue", event.target.value);
-      } else onCompositionEnd(event);
+      onCompositionEnd(event);
+      if (!masking.active.value) return;
+      masking.onCompositionEnd(event);
+      emit("update:modelValue", event.target.value);
     }
     const patternInvalid = computed(() => isInvalid(props.modelValue));
     const slots = useSlots();
@@ -112,7 +106,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       disabled: props.disabled
     }));
     const text = useLabels("input", { clear: "Clear" }, () => props.labels);
-    const showClear = computed(() => props.clearable && !!props.modelValue && !field.value.disabled && (attrs.readonly === void 0 || attrs.readonly === false));
+    const showClear = computed(() => props.clearable && !!props.modelValue && !field.value.disabled && !isAttrOn(attrs.readonly) && !isAttrOn(attrs.readOnly));
     const isInvalidState = computed(() => field.value.invalid);
     const shellClass = computed(
       () => shell({ size: props.size, invalid: isInvalidState.value })
@@ -136,31 +130,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     usePaletteControl({ label: () => props.label, disabled: () => field.value.disabled, invalid: () => field.value.invalid, available: () => !["password", "hidden"].includes(props.type), editorProps: () => ({ label: void 0, hint: void 0, error: void 0 }) });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$1, {
-        wrapped: hasField.value,
-        id: unref(field).id,
-        label: __props.label,
-        hint: __props.hint,
-        error: __props.error,
-        required: __props.required,
-        class: normalizeClass(unref(attrs).class),
-        style: normalizeStyle(unref(attrs).style)
-      }, {
+      return openBlock(), createBlock(_sfc_main$1, normalizeProps(guardReactiveProps(unref(fieldWrapperBinds)(hasField.value, unref(field), _ctx.$props, unref(attrs)))), {
         default: withCtx(() => [
           createElementVNode("div", {
             "data-lp-ring-owner": "",
             class: normalizeClass(unref(mergeClass)(shellClass.value, hasLeading.value ? "pl-2.5" : "", hasTrailing.value ? "pr-1.5" : "", hasField.value ? "" : unref(attrs).class)),
             style: normalizeStyle(hasField.value ? void 0 : unref(attrs).style)
           }, [
-            hasLeading.value ? (openBlock(), createElementBlock("span", _hoisted_1, [
-              renderSlot(_ctx.$slots, "leading", {}, () => [
-                __props.icon ? (openBlock(), createBlock(_sfc_main$2, {
-                  key: 0,
-                  name: __props.icon,
-                  size: 16
-                }, null, 8, ["name"])) : createCommentVNode("", true)
-              ])
-            ])) : createCommentVNode("", true),
+            createVNode(_sfc_main$2, { icon: __props.icon }, createSlots({ _: 2 }, [
+              _ctx.$slots.leading ? {
+                name: "default",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "leading")
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["icon"]),
             createElementVNode("input", mergeProps({
               ref_key: "inputEl",
               ref: inputEl
@@ -172,7 +157,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               disabled: unref(field).disabled,
               required: unref(field).required || void 0,
               "aria-invalid": isInvalidState.value || void 0,
-              "aria-describedby": unref(field).describedBy,
+              "aria-describedby": unref(mergeDescribedBy)(unref(attrs)["aria-describedby"], unref(field).describedBy),
               class: [
                 "lp-autofill min-w-0 flex-1 self-stretch bg-transparent outline-none placeholder:text-muted",
                 __props.clearable && "[&::-webkit-search-cancel-button]:hidden",
@@ -184,10 +169,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               (...args) => unref(onPaste) && unref(onPaste)(...args)),
               onCompositionend: onComposed,
               onInput: onInputEvent
-            }), null, 16, _hoisted_2),
+            }), null, 16, _hoisted_1),
             renderSlot(_ctx.$slots, "trailing"),
             showClear.value ? (openBlock(), createElementBlock("button", {
-              key: 1,
+              key: 0,
               type: "button",
               "aria-label": unref(text).clear,
               class: "shrink-0 rounded-inner p-1 text-muted outline-none transition-colors hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
@@ -195,15 +180,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }, ["prevent"])),
               onClick: clear
             }, [
-              createVNode(_sfc_main$2, {
+              createVNode(_sfc_main$3, {
                 name: "lucide:x",
                 size: __props.size === "sm" ? 12 : 16
               }, null, 8, ["size"])
-            ], 40, _hoisted_3)) : createCommentVNode("", true)
+            ], 40, _hoisted_2)) : createCommentVNode("", true)
           ], 6)
         ]),
         _: 3
-      }, 8, ["wrapped", "id", "label", "hint", "error", "required", "class", "style"]);
+      }, 16);
     };
   }
 });

package/dist/chunks/LpInspector-DO3fTCQ1.js

@@ -0,0 +1,209 @@
+import { defineComponent, useModel, useSlots, computed, watch, onBeforeUnmount, openBlock, createElementBlock, mergeProps, unref, normalizeClass, createElementVNode, createCommentVNode, renderSlot, createTextVNode, toDisplayString, createBlock, createVNode, withCtx, Fragment, renderList, mergeModels } from "vue";
+import { startPointerDrag } from "../composables/pointerDrag.js";
+import { useCloseGuard } from "../composables/useCloseGuard.js";
+import { useLabels } from "../composables/useLpConfig.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { usePersisted } from "../composables/usePersisted.js";
+import { clamp } from "../composables/clamp.js";
+import { _ as _sfc_main$4 } from "./LpDataList-CaVfsozH.js";
+import { _ as _sfc_main$3 } from "./LpDisclosure-DG7JCo-d.js";
+import "@iconify/vue";
+import "./icons-CYfcpSDS.js";
+import { _ as _sfc_main$2 } from "./LpScrollArea-CqvwfZs2.js";
+import { _ as _sfc_main$1 } from "./IconCloseButton-COZEsa9u.js";
+const _hoisted_1 = ["aria-label"];
+const _hoisted_2 = ["aria-label", "aria-valuenow", "aria-valuemin", "aria-valuemax"];
+const _hoisted_3 = {
+  key: 1,
+  class: "flex shrink-0 items-start gap-2 px-4 pb-3 pt-4"
+};
+const _hoisted_4 = { class: "min-w-0 flex-1" };
+const _hoisted_5 = { class: "truncate text-sm font-semibold text-ink" };
+const _hoisted_6 = {
+  key: 0,
+  class: "truncate text-xs text-muted"
+};
+const _hoisted_7 = { class: "py-8 text-center text-sm text-muted" };
+const _hoisted_8 = {
+  key: 1,
+  class: "flex flex-col gap-2"
+};
+const _hoisted_9 = {
+  key: 0,
+  class: "text-xs font-semibold text-muted"
+};
+const _hoisted_10 = {
+  key: 2,
+  class: "flex shrink-0 justify-end gap-2 px-4 pb-4 pt-3"
+};
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpInspector",
+  props: /* @__PURE__ */ mergeModels({
+    subject: { default: void 0 },
+    title: {},
+    subtitle: {},
+    sections: {},
+    side: { default: "right" },
+    width: { default: 320 },
+    resizable: { type: Boolean },
+    minWidth: { default: 240 },
+    maxWidth: { default: 640 },
+    persist: {},
+    closable: { type: Boolean, default: true },
+    guard: { type: [Boolean, Function] },
+    labels: {}
+  }, {
+    "open": { type: Boolean, ...{ default: true } },
+    "openModifiers": {}
+  }),
+  emits: ["update:open"],
+  setup(__props, { expose: __expose }) {
+    const KEY_STEP = 16;
+    const props = __props;
+    const open = useModel(__props, "open");
+    const slots = useSlots();
+    const text = useLabels(
+      "inspector",
+      { close: "Close", empty: "Nothing selected", resize: "Resize panel", region: "Details" },
+      () => props.labels
+    );
+    const saved = usePersisted(() => props.resizable && props.persist && `lp-inspector:${props.persist}`, null, {
+      validate: (value) => value === null || typeof value === "number" && value > 0
+    });
+    const shownWidth = computed(() => clamp(saved.value ?? props.width, props.minWidth, props.maxWidth));
+    const isEmpty = computed(() => props.subject == null && !props.sections?.length && !slots.default);
+    const { allowClose } = useCloseGuard(() => props.guard, () => open.value);
+    async function close() {
+      if (await allowClose()) open.value = false;
+    }
+    __expose({ close });
+    const { class: rootClass, attrs: rest } = useMergedAttrs(
+      () => [
+        "relative flex h-full min-h-0 shrink-0 flex-col bg-surface border-line",
+        props.side === "right" ? "border-l" : "border-r"
+      ].join(" ")
+    );
+    let stopDrag = null;
+    function startResize(event) {
+      if (event.button !== 0) return;
+      const start = shownWidth.value;
+      const startX = event.clientX;
+      const sign = props.side === "right" ? -1 : 1;
+      stopDrag = startPointerDrag(event, {
+        move: (ev) => {
+          saved.value = clamp(start + (ev.clientX - startX) * sign, props.minWidth, props.maxWidth);
+        },
+        end: () => stopDrag = null
+      });
+    }
+    function onGripKeydown(event) {
+      const step = event.key === "ArrowLeft" ? -KEY_STEP : event.key === "ArrowRight" ? KEY_STEP : 0;
+      if (!step) return;
+      event.preventDefault();
+      const sign = props.side === "right" ? -1 : 1;
+      saved.value = clamp(shownWidth.value + step * sign, props.minWidth, props.maxWidth);
+    }
+    watch(open, (isOpen) => {
+      if (!isOpen) stopDrag?.();
+    });
+    onBeforeUnmount(() => stopDrag?.());
+    return (_ctx, _cache) => {
+      return open.value ? (openBlock(), createElementBlock("aside", mergeProps({ key: 0 }, unref(rest), {
+        class: unref(rootClass),
+        style: { width: `${shownWidth.value}px` },
+        "aria-label": __props.title ?? unref(text).region
+      }), [
+        __props.resizable ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          role: "separator",
+          tabindex: "0",
+          "aria-orientation": "vertical",
+          "aria-label": unref(text).resize,
+          "aria-valuenow": shownWidth.value,
+          "aria-valuemin": __props.minWidth,
+          "aria-valuemax": __props.maxWidth,
+          class: normalizeClass(["group/resize absolute inset-y-0 z-10 w-1.5 cursor-ew-resize touch-none outline-none", __props.side === "right" ? "-left-px" : "-right-px"]),
+          onPointerdown: startResize,
+          onKeydown: onGripKeydown
+        }, [..._cache[0] || (_cache[0] = [
+          createElementVNode("span", { class: "absolute inset-y-0 left-0 w-px transition-colors group-hover/resize:bg-brand group-focus-visible/resize:bg-brand" }, null, -1)
+        ])], 42, _hoisted_2)) : createCommentVNode("", true),
+        __props.title || __props.subtitle || _ctx.$slots.title || __props.closable ? (openBlock(), createElementBlock("header", _hoisted_3, [
+          createElementVNode("div", _hoisted_4, [
+            createElementVNode("h2", _hoisted_5, [
+              renderSlot(_ctx.$slots, "title", {}, () => [
+                createTextVNode(toDisplayString(__props.title), 1)
+              ])
+            ]),
+            __props.subtitle ? (openBlock(), createElementBlock("p", _hoisted_6, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)
+          ]),
+          renderSlot(_ctx.$slots, "actions"),
+          __props.closable ? (openBlock(), createBlock(_sfc_main$1, {
+            key: 0,
+            label: unref(text).close,
+            onClick: close
+          }, null, 8, ["label"])) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true),
+        createVNode(_sfc_main$2, {
+          class: "min-h-0 flex-1",
+          "content-class": "flex flex-col gap-4 px-4 pb-4"
+        }, {
+          default: withCtx(() => [
+            isEmpty.value ? renderSlot(_ctx.$slots, "empty", { key: 0 }, () => [
+              createElementVNode("p", _hoisted_7, toDisplayString(unref(text).empty), 1)
+            ]) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.sections, (section) => {
+                return openBlock(), createElementBlock(Fragment, {
+                  key: section.key
+                }, [
+                  section.collapsible && section.title ? (openBlock(), createBlock(_sfc_main$3, {
+                    key: 0,
+                    label: section.title,
+                    "default-open": !section.collapsed
+                  }, {
+                    default: withCtx(() => [
+                      renderSlot(_ctx.$slots, `section-${section.key}`, {
+                        subject: __props.subject,
+                        section
+                      }, () => [
+                        createVNode(_sfc_main$4, {
+                          items: section.items ?? [],
+                          size: "sm"
+                        }, null, 8, ["items"])
+                      ])
+                    ]),
+                    _: 2
+                  }, 1032, ["label", "default-open"])) : (openBlock(), createElementBlock("section", _hoisted_8, [
+                    section.title ? (openBlock(), createElementBlock("h3", _hoisted_9, toDisplayString(section.title), 1)) : createCommentVNode("", true),
+                    renderSlot(_ctx.$slots, `section-${section.key}`, {
+                      subject: __props.subject,
+                      section
+                    }, () => [
+                      createVNode(_sfc_main$4, {
+                        items: section.items ?? [],
+                        size: "sm"
+                      }, null, 8, ["items"])
+                    ])
+                  ]))
+                ], 64);
+              }), 128)),
+              renderSlot(_ctx.$slots, "default", { subject: __props.subject })
+            ], 64))
+          ]),
+          _: 3
+        }),
+        _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_10, [
+          renderSlot(_ctx.$slots, "footer", {
+            subject: __props.subject,
+            close
+          })
+        ])) : createCommentVNode("", true)
+      ], 16, _hoisted_1)) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpLaneNode-HtnQf2FF.js → LpLaneNode-Bqcdm8Rf.js}

@@ -2,7 +2,25 @@ import { defineComponent, openBlock, createElementBlock, normalizeStyle, createE
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpLaneNode",
   props: {
-    data: {}
+    id: {},
+    type: {},
+    selected: { type: Boolean },
+    connectable: { type: [Boolean, Number, String, Function] },
+    position: {},
+    dimensions: {},
+    label: {},
+    isValidTargetPos: { type: Function },
+    isValidSourcePos: { type: Function },
+    parent: {},
+    parentNodeId: {},
+    dragging: { type: Boolean },
+    resizing: { type: Boolean },
+    zIndex: {},
+    targetPosition: {},
+    sourcePosition: {},
+    dragHandle: {},
+    data: {},
+    events: {}
   },
   setup(__props) {
     const props = __props;

package/dist/chunks/{LpLightbox-B95yu22B.js → LpLightbox-CtDTQV01.js}

@@ -1,13 +1,18 @@
 import { defineComponent, ref, watch, onBeforeUnmount, computed, nextTick, openBlock, createBlock, unref, withCtx, createVNode, normalizeStyle, normalizeClass, createTextVNode, toDisplayString, createElementVNode, createElementBlock, createCommentVNode, renderSlot, withModifiers, Fragment, renderList } from "vue";
+import { useModelOverlayHistory } from "../composables/useOverlayHistory.js";
+import { clamp } from "../composables/clamp.js";
 import { DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription } from "reka-ui";
 import { useLabels } from "../composables/useLpConfig.js";
 import { useZoomPan } from "../composables/useZoomPan.js";
+import { clickLink } from "../components/exportData.js";
 import { fileNameOf } from "../components/lightbox.js";
-import { _ as _sfc_main$2 } from "./LpCopyButton-xF7wFVoU.js";
-import { _ as _sfc_main$1 } from "./LpIcon--5WSb3jJ.js";
-import { _ as _sfc_main$3 } from "./LpLoader-DVwkOmt9.js";
+import { _ as _sfc_main$2 } from "./LpCopyButton-sAMvWeLP.js";
+import { _ as _sfc_main$1 } from "./LpIcon-C6JpQ5td.js";
+import { _ as _sfc_main$3 } from "./LpLoader-Bf1yZwaU.js";
 import { useModalLayer } from "../components/modalDepth.js";
-import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
+import { inTextField } from "../composables/textEntry.js";
+import { useView, usePortalTarget, useOutsideGuard, viewDocument } from "../composables/useView.js";
+import { nodeWindow } from "../composables/realm.js";
 const _hoisted_1 = { class: "flex shrink-0 items-center gap-1 p-3 text-sm text-white/70 [--chrome-from:-8px] animate-[lightbox-chrome-in_var(--duration-medium)_var(--ease-emphasized)_60ms_both] motion-reduce:animate-none" };
 const _hoisted_2 = {
   key: 0,
@@ -52,11 +57,13 @@ const _hoisted_20 = {
 const _hoisted_21 = ["data-index", "aria-label", "onClick"];
 const _hoisted_22 = ["src", "alt"];
 const WHEEL_STEP = 60;
+const OWNS_KEYS = "input, textarea, select, [contenteditable]:not([contenteditable='false']), [role='textbox'], [role='searchbox'], [role='combobox']";
 const BTN = "flex size-9 items-center justify-center rounded-control text-white/80 outline-none transition-colors duration-[var(--duration-fast)] hover:bg-white/15 hover:text-white focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40";
 const ARROW = "absolute top-1/2 z-10 flex size-11 -translate-y-1/2 items-center justify-center rounded-pill bg-black/45 text-white/75 ring-1 ring-white/0 outline-none backdrop-blur-sm transition-[background-color,scale,color,box-shadow] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:bg-white/20 hover:text-white hover:ring-white/30 hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-0 motion-reduce:transition-none motion-reduce:hover:scale-100 motion-reduce:active:scale-100";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpLightbox",
   props: {
+    history: { type: [Boolean, String], default: void 0 },
     open: { type: Boolean, default: false },
     items: {},
     index: { default: 0 },
@@ -72,6 +79,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    useModelOverlayHistory({
+      mode: () => props.history,
+      open: () => !!props.open,
+      setOpen: (open) => emit("update:open", open),
+      allowClose: async () => true
+    });
     const text = useLabels(
       "lightbox",
       {
@@ -102,7 +115,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const isPanning = computed(() => zoom.panning.value);
     const shown = ref(props.index);
     watch(() => props.index, (i) => shown.value = i);
-    const current = computed(() => Math.min(Math.max(shown.value, 0), Math.max(props.items.length - 1, 0)));
+    const current = computed(() => clamp(shown.value, 0, Math.max(props.items.length - 1, 0)));
     const item = computed(() => props.items[current.value]);
     const total = computed(() => props.items.length);
     const showStrip = computed(() => props.filmstrip ?? total.value > 1);
@@ -110,12 +123,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const loading = ref(false);
     const failed = ref(false);
     const viewport = ref(null);
+    const stageImage = ref(null);
     const stripEl = ref(null);
     watch(viewport, (el) => zoom.setViewport(el));
     const direction = ref(1);
     function go(next) {
       if (!total.value) return;
-      const wrapped = props.loop ? (next + total.value) % total.value : Math.min(Math.max(next, 0), total.value - 1);
+      const wrapped = props.loop ? (next + total.value) % total.value : clamp(next, 0, total.value - 1);
       if (wrapped === current.value) return;
       direction.value = next > current.value ? 1 : -1;
       shown.value = wrapped;
@@ -148,7 +162,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     watch(
-      () => [current.value, props.open],
+      () => [current.value, props.open, item.value?.src],
       () => {
         zoom.reset();
         rotation.value = 0;
@@ -157,6 +171,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         if (props.open) nextTick(scrollThumbIntoView);
       }
     );
+    function imageSettled(event, ok) {
+      if (event.currentTarget !== stageImage.value) return;
+      loading.value = false;
+      if (!ok) failed.value = true;
+    }
     function scrollThumbIntoView() {
       const el = stripEl.value?.querySelector(`[data-index="${current.value}"]`);
       el?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
@@ -176,6 +195,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     );
     function onKeydown(e) {
+      if (e.defaultPrevented || e.ctrlKey || e.metaKey || e.altKey) return;
+      if (inTextField(e.target, OWNS_KEYS)) return;
       switch (e.key) {
         case "ArrowRight":
           e.preventDefault();
@@ -241,26 +262,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (e.target.closest("[data-lightbox-image]")) return;
       close();
     }
+    const view = useView();
+    const viewerDocument = () => viewDocument(view.value);
+    const viewerWindow = () => nodeWindow(viewerDocument());
+    const resolved = (src) => new URL(src, viewerDocument().baseURI);
     function sameOrigin(src) {
       try {
-        const url = new URL(src, window.location.href);
-        return url.protocol === "blob:" || url.protocol === "data:" || url.origin === window.location.origin;
+        const url = resolved(src);
+        return url.protocol === "blob:" || url.protocol === "data:" || url.origin === new URL(viewerDocument().baseURI).origin;
       } catch {
         return false;
       }
     }
     function save(href, name, newTab = false) {
-      const a = document.createElement("a");
-      a.href = href;
-      if (newTab) {
-        a.target = "_blank";
-        a.rel = "noopener";
-      } else {
-        a.download = name;
-      }
-      document.body.appendChild(a);
-      a.click();
-      a.remove();
+      clickLink(viewerDocument(), newTab ? { href, target: "_blank", rel: "noopener" } : { href, download: name });
     }
     async function download() {
       const target = item.value;
@@ -269,11 +284,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const name = fileNameOf(target);
       if (sameOrigin(target.src)) return save(target.src, name);
       try {
-        const response = await fetch(target.src, { mode: "cors" });
+        const win = viewerWindow();
+        const response = await win.fetch(resolved(target.src).href, { mode: "cors" });
         if (!response.ok) throw new Error(String(response.status));
-        const url = URL.createObjectURL(await response.blob());
+        const url = win.URL.createObjectURL(await response.blob());
         save(url, name);
-        window.setTimeout(() => URL.revokeObjectURL(url), 0);
+        win.setTimeout(() => win.URL.revokeObjectURL(url), 0);
       } catch {
         save(target.src, name, true);
       }
@@ -282,18 +298,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     async function imageToCopy() {
       const target = copyTarget = item.value;
       if (!target) throw new Error("No image");
-      const response = await fetch(target.src);
+      const win = viewerWindow();
+      const response = await win.fetch(resolved(target.src).href);
       const blob = await response.blob();
-      return blob.type === "image/png" ? blob : reencodeToPng(await createImageBitmap(blob));
+      return blob.type === "image/png" ? blob : reencodeToPng(await win.createImageBitmap(blob));
     }
     function copyDone(ok) {
-      if (copyTarget) emit("copy", copyTarget, ok);
+      const target = copyTarget;
+      copyTarget = void 0;
+      if (target) emit("copy", target, ok);
     }
     async function reencodeToPng(bitmap) {
-      const canvas = document.createElement("canvas");
-      canvas.width = bitmap.width;
-      canvas.height = bitmap.height;
-      canvas.getContext("2d")?.drawImage(bitmap, 0, 0);
+      const canvas = viewerDocument().createElement("canvas");
+      try {
+        canvas.width = bitmap.width;
+        canvas.height = bitmap.height;
+        canvas.getContext("2d")?.drawImage(bitmap, 0, 0);
+      } finally {
+        bitmap.close();
+      }
       return new Promise(
         (resolve, reject) => canvas.toBlob((b) => b ? resolve(b) : reject(new Error("encode failed")), "image/png")
       );
@@ -461,14 +484,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       }, toDisplayString(unref(text).reveal), 1)
                     ])) : item.value ? (openBlock(), createElementBlock("img", {
                       key: `${current.value}:${item.value.src}`,
+                      ref_key: "stageImage",
+                      ref: stageImage,
                       "data-lightbox-image": "",
                       src: item.value.src,
                       alt: item.value.title ?? "",
                       class: "max-h-full max-w-full select-none object-contain transition-transform duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] animate-[lightbox-frame-in_var(--duration-medium)_var(--ease-emphasized)] motion-reduce:animate-none motion-reduce:transition-none",
                       style: normalizeStyle(imageStyle.value),
                       draggable: "false",
-                      onLoad: _cache[6] || (_cache[6] = ($event) => loading.value = false),
-                      onError: _cache[7] || (_cache[7] = ($event) => (failed.value = true, loading.value = false))
+                      onLoad: _cache[6] || (_cache[6] = ($event) => imageSettled($event, true)),
+                      onError: _cache[7] || (_cache[7] = ($event) => imageSettled($event, false))
                     }, null, 44, _hoisted_15)) : createCommentVNode("", true),
                     createVNode(_sfc_main$3, {
                       active: loading.value && !failed.value && !covered(current.value),

package/dist/chunks/{LpLoader-DVwkOmt9.js → LpLoader-Bf1yZwaU.js}

@@ -3,7 +3,7 @@ import { useLabels } from "../composables/useLpConfig.js";
 import { useLoadingGate } from "../composables/useLoadingGate.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { _ as _sfc_main$2 } from "./LoaderMark-C1dubiKn.js";
-import { _ as _sfc_main$1 } from "./LpSwap-C96c0LWh.js";
+import { _ as _sfc_main$1 } from "./LpSwap-M7nFeW3C.js";
 import { toneLook } from "../components/tone.js";
 const _hoisted_1 = ["aria-busy"];
 const _hoisted_2 = {