@greypan/web-ui 6.4.0 → 8.0.0

package/dist/components/editable-text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/editable-text/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { FormAssociated, defineFormAssociation, FormAssociationController } from '@/shared/form-association'\n\nimport style from './style.css?inline'\n\n/** 空值且无 placeholder 时占位，保留一个行盒，避免宿主退化成 0 高度、无法点击进入编辑。 */\nconst BLANK_GLYPH = '\\u200B'\n\n/** 行/字符落点二分的容差（px），吸收次像素与舍入差异。 */\nconst CARET_TOLERANCE = 1\n\n/**\n * 取文本层承载文案的 Text 节点。\n *\n * 绑定表达式位于元素首个位置时，Lit 会在它前面留一个注释标记节点，因此不能用\n * `firstChild`：那会拿到没有布局的注释，Range 量不到任何矩形。\n */\nfunction textNodeOf(layer: HTMLElement): Text | null {\n  for (const child of layer.childNodes) {\n    if (child instanceof Text) return child\n  }\n  return null\n}\n\n/**\n * 把视口坐标映射为文本层的字符偏移。\n *\n * `document.caretPositionFromPoint` 不进入 shadow DOM（对 shadow 内容返回 shadow host\n * 之外的节点），因此在文本层上用 Range 空矩形二分：先按 y 选行，再在行内按 x 选字符。\n * 文本层与编辑层同盒同排版，偏移与 textarea 的 selectionStart 一一对应。\n */\nfunction caretOffsetFromPoint(textLayer: HTMLElement, x: number, y: number): number {\n  const node = textNodeOf(textLayer)\n  if (!node) return 0\n  const length = node.data.length\n  const range = document.createRange()\n  const rectAt = (offset: number): DOMRect => {\n    range.setStart(node, offset)\n    range.setEnd(node, offset)\n    return range.getBoundingClientRect()\n  }\n\n  // 同一行的盒可能被拆成多个 client rect；按 top 去重得到行列表，取与 y 最近的一行，\n  // 距离相等时取更靠下的一行（与浏览器在行间的落点行为一致）。\n  const lines: DOMRect[] = []\n  for (const rect of textLayer.getClientRects()) {\n    if (!lines.some(line => Math.abs(line.top - rect.top) <= CARET_TOLERANCE)) lines.push(rect)\n  }\n  if (lines.length === 0) return length\n  let line = lines[0]\n  let nearest = Infinity\n  for (const candidate of lines) {\n    const distance = Math.abs((candidate.top + candidate.bottom) / 2 - y)\n    if (distance <= nearest) {\n      nearest = distance\n      line = candidate\n    }\n  }\n\n  // 行首：caret top 首次落入本行的最小偏移\n  let lo = 0\n  let hi = length\n  while (lo < hi) {\n    const mid = (lo + hi) >> 1\n    if (rectAt(mid).top >= line.top - CARET_TOLERANCE) hi = mid\n    else lo = mid + 1\n  }\n  const lineStart = lo\n  // 行尾：caret top 仍落在本行的最大偏移\n  lo = lineStart\n  hi = length\n  while (lo < hi) {\n    const mid = (lo + hi + 1) >> 1\n    if (rectAt(mid).top <= line.top + CARET_TOLERANCE) lo = mid\n    else hi = mid - 1\n  }\n  const lineEnd = Math.max(lo, lineStart)\n  // 行内：caret left 不超过 x 的最大偏移\n  lo = lineStart\n  hi = lineEnd\n  while (lo < hi) {\n    const mid = (lo + hi + 1) >> 1\n    if (rectAt(mid).left <= x + CARET_TOLERANCE) lo = mid\n    else hi = mid - 1\n  }\n  return lo\n}\n\n@customElement('web-ui-editable-text')\nexport class WebUiEditableText extends FormAssociated(LitElement) {\n  static override styles = [unsafeCSS(style)]\n\n  @property({ type: String, reflect: true }) name = ''\n  @property({ type: String, reflect: true }) placeholder = ''\n  @property({ type: Boolean, reflect: true }) disabled = false\n  @property({ type: String, attribute: 'aria-label' }) override ariaLabel: string | null = null\n\n  @state() private _value = ''\n\n  /**\n   * `value` attribute 承载 form reset 的初值，不随当前值反射；property 暴露当前值，\n   * 与原生 input 的 value / defaultValue 关系一致。\n   */\n  @property({ type: String })\n  get value(): string {\n    return this._value\n  }\n\n  set value(v: string) {\n    const old = this._value\n    this._value = v\n    this._formAssociation.sync()\n    this.requestUpdate('value', old)\n  }\n\n  @query('.editor') private _editor?: HTMLTextAreaElement\n  @query('.text') private _textLayer?: HTMLElement\n\n  private _editing = false\n  private _editBase = ''\n  private _pendingCaret: number | null = null\n  private _refocusing = false\n  private _resizeObserver: ResizeObserver | null = null\n\n  private get _isDisabled(): boolean {\n    return this.disabled || this._formAssociation.isFormDisabled()\n  }\n\n  private readonly _formAssociation = defineFormAssociation<string>({\n    host: this,\n    getState: () => this._value,\n    setState: value => {\n      this.value = value\n    },\n    getFormValue: () => this._value,\n    getFormState: () => this._value,\n    restoreState: state => {\n      if (typeof state === 'string') this.value = state\n    }\n  }).make()\n\n  private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\n\n  constructor() {\n    super()\n    // focus 不冒泡：宿主监听只在焦点从组件外进入时触发，shadow 内聚焦不会误触\n    this.addEventListener('focus', this._onHostFocus)\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    this._releaseEditingKeys()\n    this._teardownAutosize()\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    /*\n     * autosize 的 ResizeObserver 在 disconnectedCallback 被拆掉，搭建若只放在\n     * firstUpdated（一生一次），元素断开再重连后 RO 永久丢失、autosize 静默失效。\n     * connectedCallback 每次连接都跑：_setupAutosize 自带 teardown，重复进入无副作用。\n     * 首连接时渲染尚未发生（_editor 为 null），_autosizeEditor 与 RO 回调都有判空守卫。\n     */\n    this._setupAutosize()\n    // 同类缺口：编辑态被断开时 _releaseEditingKeys 撤了 window 监听，重连后 _editing\n    // 仍为 true（blur 取消未必先于断开到达），此时补领，避免重连后按键失灵。\n    if (this._editing) this._claimEditingKeys()\n  }\n\n  override updated() {\n    // disabled 时移出 tab 序列；编辑态由 editing attribute 表达，二者互斥\n    if (this._isDisabled) this.removeAttribute('tabindex')\n    else this.setAttribute('tabindex', '0')\n    // 禁用态生效时（属性或 fieldset）退出编辑：值保持当前草稿，不派发提交事件\n    if (this._editing && this._isDisabled) this._exitEditing()\n    this._autosizeEditor()\n  }\n\n  private _onHostFocus() {\n    if (this._refocusing) {\n      this._refocusing = false\n      return\n    }\n    this._enterEditing()\n  }\n\n  /**\n   * pointerdown 时文本层仍是命中目标，此时记录落点；浏览器随后的默认聚焦会触发\n   * host focus 进入编辑，偏移在那里应用到 textarea。\n   */\n  private _onPointerDown(e: PointerEvent) {\n    if (this._isDisabled || this._editing || !this._textLayer) return\n    this._pendingCaret = caretOffsetFromPoint(this._textLayer, e.clientX, e.clientY)\n  }\n\n  /** mousedown 默认聚焦被拦截等场景由 click 兜底进入编辑。 */\n  private _onClick() {\n    if (this._isDisabled || this._editing) return\n    this._enterEditing()\n  }\n\n  /**\n   * 公共 API：进入编辑态并全选内容；已在编辑态时只重新全选。\n   *\n   * `disabled` 时不进入编辑，与 `focus()` 一致。\n   */\n  select() {\n    if (this._isDisabled) return\n    if (!this._editing) this._enterEditing()\n    const editor = this._editor\n    // 全选：末端显式取当前文本长度，覆盖 _enterEditing 落下的光标位置\n    editor?.setSelectionRange(0, editor.value.length)\n  }\n\n  private _enterEditing() {\n    if (this._isDisabled || this._editing) return\n    this._editing = true\n    this._editBase = this._value\n    this.toggleAttribute('editing', true)\n    this._claimEditingKeys()\n    const editor = this._editor\n    if (!editor) return\n    editor.focus()\n    // Tab / 编程式聚焦光标到末尾；指针落点用 pointerdown 记下的偏移\n    const offset = this._pendingCaret ?? this._value.length\n    this._pendingCaret = null\n    const clamped = Math.max(0, Math.min(offset, editor.value.length))\n    editor.setSelectionRange(clamped, clamped)\n  }\n\n  private _exitEditing() {\n    if (!this._editing) return\n    this._editing = false\n    this._releaseEditingKeys()\n    this.toggleAttribute('editing', false)\n  }\n\n  private _onInput() {\n    // 原生 input 已 composed 冒泡出 shadow root 且 target 重定向到宿主，无需补发\n    this._value = this._editor?.value ?? ''\n    this._formAssociation.sync()\n    this._autosizeEditor()\n  }\n\n  /**\n   * blur 提交：与 Enter 同一条提交路径，草稿成为新值并派发 change。\n   *\n   * 不交还焦点：焦点已被用户移走，抢回宿主会吞掉消费者的目标焦点。\n   */\n  private _onBlur() {\n    if (!this._editing || this._isDisabled) return\n    this._commitEditing(false)\n  }\n\n  /**\n   * 提交：草稿成为新值、退出编辑，并恰好派发一次 change。Enter 与 blur 同走这一条路。\n   *\n   * `returnFocus` 区分两种来路：Enter 主动结束时把焦点交还宿主（标记防重入编辑）；\n   * blur 是被动失焦，焦点已被用户移走，再抢回宿主会吞掉消费者的目标焦点。\n   * 先退出编辑再动焦点：退出时 textarea 隐藏触发的 blur 看到 _editing 已为 false，\n   * 不会把这次提交误判成又一次 blur 提交。\n   */\n  private _commitEditing(returnFocus: boolean) {\n    if (!this._editing) return\n    this._exitEditing()\n    if (returnFocus) this._returnFocusToHost()\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n  }\n\n  /**\n   * 取消：恢复进入编辑时的值并派发 cancel。仅 Escape 走这一条路径。\n   *\n   * 调用方（Escape 分支）随后才交还焦点：本方法先摘除编辑态，焦点迁移触发的 blur\n   * 到达时 `_editing` 已为 false 而早退，不会把取消误判成 blur 提交。\n   */\n  private _cancelEditing() {\n    if (!this._editing) return\n    this._value = this._editBase\n    this._formAssociation.sync()\n    this._exitEditing()\n    /*\n     * 重入守卫先于 dispatch 置位：cancel 同步派发，消费者可能在监听器里调\n     * el.focus()——那是一次真实的宿主 focus，没有守卫就会重新进入编辑，随后一次\n     * blur 便把恢复后的原值当成新草稿提交，用户什么都没改却收到 change。守卫在此\n     * 置位后即被该次 focus 消费，与取消后由组件自己交还焦点走同一条早退路径。\n     */\n    this._refocusing = true\n    /*\n     * cancel 与原生 <dialog> 的 cancel 同名，而 dialog 的关闭管线就监听这个事件名。\n     * 组件被消费方投映进浮层 shadow（drawer/dialog 标题）时，任何冒泡的 cancel——\n     * composed 与否都一样，slot 都会把事件带进 shadow 树——都会被那个 dialog 当成\n     * 一次关闭请求：issue #159 的实测症状是 drawer 标题聚焦编辑时按 Escape，或点到\n     * 抽屉别处触发 blur，抽屉跟着编辑一起关。因此只在宿主上派发，不冒泡不组合；\n     * 监听挂在组件本身即可（vue @cancel、React addEventListener 均不受影响）。\n     * 手法同 checkbox/radio 受管时的事件策略（见各自 handleClick 注释）。\n     */\n    this.dispatchEvent(new Event('cancel', { bubbles: false, composed: false }))\n  }\n\n  /**\n   * 焦点交还宿主：先标记再聚焦，宿主 focus 到达时标记已消费，不会再次进入编辑；\n   * 标记在微任务里清掉，此后的聚焦照常进入编辑。\n   */\n  private _returnFocusToHost() {\n    this._refocusing = true\n    this.focus()\n    queueMicrotask(() => {\n      this._refocusing = false\n    })\n  }\n\n  /**\n   * 编辑态按键归属：Enter 提交、Escape 取消。\n   *\n   * 监听挂在 window 捕获阶段而不是 shadow 内的 textarea 上：消费方（浮层仲裁者）在\n   * document 捕获阶段收 Escape，组件若只在 textarea 上处理，按键先被仲裁者收走，\n   * 于是一次 Escape 会同时取消编辑和关闭外层浮层。window 在 document 上游，\n   * stopPropagation 只有挂在这里才拦得住仲裁者。\n   */\n  private _claimEditingKeys() {\n    window.addEventListener('keydown', this._onEditingKeydown, true)\n  }\n\n  private _releaseEditingKeys() {\n    window.removeEventListener('keydown', this._onEditingKeydown, true)\n  }\n\n  private readonly _onEditingKeydown = (e: KeyboardEvent) => {\n    // 输入法组合期间的 Enter/Escape 属于组合会话，交给 IME\n    if (e.isComposing) return\n    if (!e.composedPath().includes(this)) return\n    if (e.key === 'Escape') {\n      // 按键本身也被编辑层消费：外层浮层不应收到同一次 Escape\n      e.preventDefault()\n      e.stopPropagation()\n      // 先取消（内部摘除编辑态）再交还焦点：focus 触发的 blur 看到 _editing 已为\n      // false 而早退，不会把这次取消误判成 blur 提交\n      this._cancelEditing()\n      this._returnFocusToHost()\n      return\n    }\n    if (e.key === 'Enter') {\n      /*\n       * 与 Escape 同套消费策略：preventDefault 压掉 textarea 的换行默认行为，\n       * stopPropagation 让按键不外泄。取舍是明说的：编辑态 Enter 属于提交，外层\n       * 表单的隐式提交与浮层监听不应收到同一次按键——正如 Escape 属于取消。\n       * 此前只 preventDefault 不对称，Enter 会漏进外层监听。\n       */\n      e.preventDefault()\n      e.stopPropagation()\n      this._commitEditing(true)\n    }\n  }\n\n  private _setupAutosize() {\n    this._teardownAutosize()\n    // jsdom 等无 ResizeObserver 的环境退化为按渲染 autosize，够用且不抛错\n    if (typeof ResizeObserver === 'undefined') {\n      this._autosizeEditor()\n      return\n    }\n    this._resizeObserver = new ResizeObserver(() => this._autosizeEditor())\n    this._resizeObserver.observe(this)\n    this._autosizeEditor()\n  }\n\n  private _teardownAutosize() {\n    this._resizeObserver?.disconnect()\n    this._resizeObserver = null\n    this._editor?.style.removeProperty('height')\n  }\n\n  /**\n   * 编辑层高度始终跟随自身内容，不依赖文本层折出的行盒。\n   *\n   * 编辑层绝对定位并用 top/bottom 撑高，`height: auto` 量到的是包含块高度而不是内容高；\n   * 先归零再读 scrollHeight，拿到的才是自身内容的高度（含 1px 内边距）。\n   * 观察宿主而非编辑层：编辑层在文档流外，改它的高度不会反过来改动宿主尺寸。\n   */\n  private _autosizeEditor() {\n    const editor = this._editor\n    if (!editor) return\n    const previous = editor.style.height\n    editor.style.height = '0px'\n    const height = editor.scrollHeight\n    editor.style.height = height > 0 ? `${height}px` : previous\n  }\n\n  private get _displayText(): string {\n    if (this._value !== '') return this._value\n    if (this.placeholder !== '') return this.placeholder\n    return BLANK_GLYPH\n  }\n\n  override render() {\n    return html`\n      <div class=\"layers\" @pointerdown=${this._onPointerDown} @click=${this._onClick}>\n        <span class=${classMap({ text: true, placeholder: this._value === '' })}>${this._displayText}</span>\n        <textarea\n          class=\"editor\"\n          .value=${this._value}\n          .placeholder=${this.placeholder}\n          ?disabled=${this._isDisabled}\n          aria-label=${ifDefined(this.ariaLabel)}\n          @input=${this._onInput}\n          @blur=${this._onBlur}\n        ></textarea>\n      </div>\n    `\n  }\n\n  declare readonly $events: {\n    input: Event\n    change: Event\n    cancel: Event\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-editable-text': WebUiEditableText\n  }\n}\n"],"mappings":"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"}

package/dist/components/editable-text/style.js

@@ -0,0 +1,6 @@
+//#region src/components/editable-text/style.css?inline
+var e = "*,:before,:after{box-sizing:border-box}:host{display:inline-block}.layers{display:block;position:relative}.text,.editor{overflow-wrap:var(--wui-editable-text-overflow-wrap,anywhere);white-space:var(--wui-editable-text-white-space,pre-wrap)}.text{display:inline}.placeholder{color:var(--wui-color-text-secondary,#6a6a6a)}.editor{resize:none;font:inherit;line-height:inherit;color:inherit;text-align:inherit;text-transform:inherit;letter-spacing:inherit;word-break:inherit;appearance:none;visibility:hidden;caret-color:var(--wui-color-accent,#08f);background:0 0;border:0;outline:none;margin:0;padding:1px;position:absolute;inset:-1px;overflow:hidden}.editor::placeholder{color:var(--wui-color-text-secondary,#6a6a6a)}:host([editing]) .editor{visibility:visible;min-width:1ch}:host([editing]) .text{visibility:hidden}:host([disabled]){cursor:not-allowed}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=style.js.map

package/dist/components/editable-text/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/editable-text/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n/* 组件对外表现为同级 span：行内级盒子，排版与颜色全部继承外部上下文。\n   :host 只设 display（ADR-0005），其余样式在 shadow root 内。 */\n:host {\n  display: inline-block;\n}\n\n/* 文本层与编辑层共用的排版盒：编辑层 absolute 定位覆盖它，切换只改可见性，\n  因此文字态与编辑态逐像素同盒。 */\n.layers {\n  position: relative;\n  display: block;\n}\n\n.text,\n.editor {\n  /* 长无空格串两层都必须能断：文本层若只继承宿主默认的 normal，长字母数字串不\n     截断、直接溢出宿主盒（文字态），而编辑层在盒内裁剪（编辑态），两层断行\n     不一致。默认 anywhere：仅在单词放不下时断，且参与 min-content 计算，收缩\n     上下文（flex 项 min-width:0）里长串也不会撑爆宿主；两层取同一变量，外部\n     覆盖时仍保持一致。 */\n  overflow-wrap: var(--wui-editable-text-overflow-wrap, anywhere);\n\n  /* 多行编辑要求换行符成行，但 pre-wrap 只能落在文本层上：模板里元素之间的空白\n     文本节点若被 pre-wrap 保留，会各自生成幻影行盒，把文本层顶偏、盒高翻倍，\n     文字态与编辑态随之不再同盒。这里保持 .layers 为默认 normal 让空白折叠，\n     两层取同一变量，外部覆盖（如 nowrap）时仍保持一致。 */\n  white-space: var(--wui-editable-text-white-space, pre-wrap);\n}\n\n.text {\n  display: inline;\n}\n\n.placeholder {\n  color: var(--wui-color-text-secondary, #6a6a6a);\n}\n\n/* 原生控件 reset：不贡献尺寸、无边框背景描边、不可手拖改变大小 */\n.editor {\n  resize: none;\n\n  position: absolute;\n\n  /* 四边各外扩 1px，再用 1px 内边距把文本起点与换行宽度拉回内容盒。\n     两层必须同盒，但盒的边界同时也是原生控件的裁剪边界：文本层的字形会按\n     边距溢出内容盒半个像素左右，紧凑行高下 textarea 内部内容也会比内容盒高\n     出 1px。裁剪盒若与内容盒重合，这些墨色只存在于文字态，编辑态被裁掉或顶偏，\n     两态逐像素比对就对不上；外扩 1px 后编辑层的裁剪盒覆盖文本层的墨色范围。 */\n  inset: -1px;\n\n  overflow: hidden;\n\n  margin: 0;\n  padding: 1px;\n  border: 0;\n\n  /* 原生控件不继承排版：显式继承让编辑层与文本层共用同一套字体度量 */\n  font: inherit;\n  line-height: inherit;\n  color: inherit;\n  text-align: inherit;\n  text-transform: inherit;\n  letter-spacing: inherit;\n  word-break: inherit;\n\n  appearance: none;\n  visibility: hidden;\n  background: transparent;\n  outline: none;\n\n  /* 光标颜色组件级默认：跟随共享语义 token，消费方在宿主或任意祖先上设\n     --wui-color-accent 即可覆盖（自定义属性穿透 shadow 边界继承）；\n     此前只有 interweave 页面级设置，demo 等消费方拿到的是浏览器默认黑。 */\n  caret-color: var(--wui-color-accent, #08f);\n\n  &::placeholder {\n    color: var(--wui-color-text-secondary, #6a6a6a);\n  }\n}\n\n/* 可见性切换：文字态隐藏编辑层、编辑态显露；盒模型、滚动与换行不随之变化 */\n:host([editing]) .editor {\n  /* 空内容时宿主可能被收缩到 0 宽：行内级盒子配上零宽占位符，收缩上下文（flex 项\n     min-width:0、表格单元格等）里就量不到宽度，编辑层随之没有可绘制光标的地盘，\n     清空全部内容后光标消失。留一个字符宽，保证空草稿下光标仍然可见。\n     规则落在 shadow 内：宿主上的 min-width 属于外层文档样式，会盖过 :host 声明。 */\n  min-width: 1ch;\n  visibility: visible;\n}\n\n/* 编辑态隐藏文本层：两层同盒同排版，若同时可见会把同一份文字画两遍，\n   抗锯齿边缘的墨色会加重，破坏文字态/编辑态的逐像素一致。 */\n:host([editing]) .text {\n  visibility: hidden;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n"],"mappings":""}

package/dist/components/image-preview/index.js

@@ -1,33 +1,37 @@
 import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import "../icon/index.js";
-import t from "../../icons/generated/lucide-chevron-left.js";
-import n from "../../icons/generated/lucide-chevron-right.js";
-import r from "../../icons/generated/lucide-plus.js";
-import i from "../../icons/generated/lucide-minus.js";
-import a from "../../icons/generated/ooui-close.js";
-import o from "../../icons/generated/radix-icons-reset.js";
-import s from "../../assets/glass.js";
-import { getFallbackOverlayRoot as c } from "../../shared/overlay/overlay-root.js";
-import { findNearestTheme as l, findRootTheme as u } from "../../shared/overlay/theme-overlay-scope.js";
-import { defineScrollLockLease as d } from "../../shared/scroll-lock/scroll-lock.js";
+import t from "../../assets/glass.js";
+import n from "../../icons/generated/lucide-chevron-left.js";
+import r from "../../icons/generated/lucide-chevron-right.js";
+import i from "../../icons/generated/lucide-plus.js";
+import a from "../../icons/generated/lucide-minus.js";
+import o from "../../icons/generated/ooui-close.js";
+import s from "../../icons/generated/radix-icons-reset.js";
 import "../button/index.js";
-import { defineNativeDialogPresence as f } from "../../shared/overlay/native-dialog-presence.js";
-import { attachDragGesture as p } from "../../shared/gesture/drag-gesture.js";
-import { clamp as m } from "../../shared/gesture/physics.js";
-import { attachPinchGesture as h } from "../../shared/gesture/pinch-gesture.js";
-import g from "./style.js";
-import { LitElement as _, html as v, nothing as y, unsafeCSS as b } from "lit";
-import { customElement as x, property as S, state as C } from "lit/decorators.js";
-import { classMap as w } from "lit/directives/class-map.js";
-import { styleMap as T } from "lit/directives/style-map.js";
+import { defineOpenOverlay as c } from "../../shared/overlay/open-overlay.js";
+import { getFallbackOverlayRoot as l } from "../../shared/overlay/overlay-root.js";
+import { findNearestTheme as u, findRootTheme as d } from "../../shared/overlay/theme-overlay-scope.js";
+import { defineScrollLockLease as f } from "../../shared/scroll-lock/scroll-lock.js";
+import { defineNativeDialogPresence as p } from "../../shared/overlay/native-dialog-presence.js";
+import { attachDragGesture as m } from "../../shared/gesture/drag-gesture.js";
+import { clamp as h } from "../../shared/gesture/physics.js";
+import { attachPinchGesture as g } from "../../shared/gesture/pinch-gesture.js";
+import _ from "./style.js";
+import { LitElement as v, html as y, nothing as b, unsafeCSS as x } from "lit";
+import { customElement as S, property as C, state as w } from "lit/decorators.js";
+import { classMap as T } from "lit/directives/class-map.js";
+import { styleMap as E } from "lit/directives/style-map.js";
 //#region src/components/image-preview/index.ts
-var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F = 320, I = class extends _ {
+var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I = 320, L = class extends v {
 	constructor(...e) {
-		super(...e), this.images = [], this.loop = !0, this.nav = !1, this.toolbar = !1, this.closable = !1, this.indicator = !1, this.swipe = !1, this.noScrollLock = !1, this.noBackdropClose = !1, this._open = !1, this._index = 0, this._scale = E, this._offsetX = 0, this._offsetY = 0, this._swipeOffset = 0, this._swipeSettling = !1, this._dragging = !1, this._loadedSources = /* @__PURE__ */ new Set(), this._swipeDir = 0, this._swipeStartTime = 0, this._swipeSettleCommit = !1, this._swipeSettleDir = 1, this._scrollLock = d().make(), this._presence = f().make({
+		super(...e), this.images = [], this.loop = !0, this.nav = !1, this.toolbar = !1, this.closable = !1, this.indicator = !1, this.swipe = !1, this.noScrollLock = !1, this.noBackdropClose = !1, this._open = !1, this._index = 0, this._scale = D, this._offsetX = 0, this._offsetY = 0, this._swipeOffset = 0, this._swipeSettling = !1, this._dragging = !1, this._loadedSources = /* @__PURE__ */ new Set(), this._swipeDir = 0, this._swipeStartTime = 0, this._swipeSettleCommit = !1, this._swipeSettleDir = 1, this._scrollLock = f().make(), this._overlay = c().make({
+			requestClose: () => this.close(),
+			isConnected: () => this.isConnected
+		}), this._handle = null, this._presence = p().make({
 			getDialog: () => this.dialog,
 			isConnected: () => this.isConnected,
 			isOpen: () => this._open
-		}), this._dismissed = !1, this._swipeGesture = !1, this._panOriginX = 0, this._panOriginY = 0, this._dragged = !1, this._blankPointerDown = !1, this._pinchScale = E, this._pinchLocalX = 0, this._pinchLocalY = 0, this._handleImageSettled = (e) => {
+		}), this._dismissed = !1, this._swipeGesture = !1, this._panOriginX = 0, this._panOriginY = 0, this._dragged = !1, this._blankPointerDown = !1, this._pinchScale = D, this._pinchLocalX = 0, this._pinchLocalY = 0, this._handleImageSettled = (e) => {
 			let t = e.currentTarget;
 			t && (this._loadedSources.add(t.src), this.requestUpdate());
 		}, this._handleCancel = (e) => {
@@ -58,7 +62,7 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
 			if (!this._open) return;
 			e.preventDefault();
 			let t = e.deltaMode === 1 ? e.deltaY * 16 : e.deltaY, n = this._stageOrigin();
-			this._zoomAt(this._scale * Math.exp(-t * k), e.clientX - n.x, e.clientY - n.y);
+			this._zoomAt(this._scale * Math.exp(-t * A), e.clientX - n.x, e.clientY - n.y);
 		}, this._handleClick = (e) => {
 			if (!this._open) return;
 			let t = this._blankPointerDown;
@@ -70,7 +74,7 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
 				this.noBackdropClose || this.close();
 			}
 		}, this._handleDoubleClick = (e) => {
-			this._open && e.target === this._image && (this._scale > E ? this.resetZoom() : this._setScale(D / 2));
+			this._open && e.target === this._image && (this._scale > D ? this.resetZoom() : this._setScale(O / 2));
 		}, this._handlePinchStart = (e) => {
 			if (!this._open) return;
 			this._endGesture(), this._dragging = !0, this._dragged = !0;
@@ -78,7 +82,7 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
 			this._pinchScale = this._scale, this._pinchLocalX = (e.centerX - t.x - this._offsetX) / this._scale, this._pinchLocalY = (e.centerY - t.y - this._offsetY) / this._scale;
 		}, this._handlePinchMove = (e) => {
 			if (!this._open) return;
-			let t = m(this._pinchScale * e.ratio, E, D), n = this._stageOrigin();
+			let t = h(this._pinchScale * e.ratio, D, O), n = this._stageOrigin();
 			this._applyScale(t, e.centerX - n.x - this._pinchLocalX * t, e.centerY - n.y - this._pinchLocalY * t);
 		}, this._handlePinchEnd = () => {
 			this._dragging = !1;
@@ -90,9 +94,9 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
 			if (!this._open || (this._cancelSwipeSettle(), this._swipeDir = 0, this._swipeOffset = 0, e.button !== 0 || e.isPrimary === !1)) return;
 			this._blankPointerDown = this._isBlank(e.target), this._dragged = !1;
 			let t = this._stage;
-			t && (e.target === t || t.contains(e.target)) && (this._swipeGesture = this._scale === E && this.swipe && this.images.length > 1, this._swipeStartTime = e.timeStamp, this._panOriginX = this._offsetX, this._panOriginY = this._offsetY, this._gesture?.destroy(), this._gesture = p(e, {
+			t && (e.target === t || t.contains(e.target)) && (this._swipeGesture = this._scale === D && this.swipe && this.images.length > 1, this._swipeStartTime = e.timeStamp, this._panOriginX = this._offsetX, this._panOriginY = this._offsetY, this._gesture?.destroy(), this._gesture = m(e, {
 				axis: "both",
-				threshold: A,
+				threshold: j,
 				onMove: (e) => {
 					this._swipeGesture ? (this._swipeOffset = e.deltaX, e.deltaX !== 0 && (this._swipeDir = e.deltaX < 0 ? 1 : -1)) : this._panTo(e.deltaX, e.deltaY);
 				},
@@ -109,7 +113,7 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
 		};
 	}
 	static {
-		this.styles = [b(s), b(g)];
+		this.styles = [x(t), x(_)];
 	}
 	get dialog() {
 		return this.shadowRoot?.querySelector("dialog") ?? null;
@@ -127,7 +131,7 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
 		return this._scale;
 	}
 	configure(e) {
-		this.images = e.images, this.loop = e.loop, this.nav = e.nav, this.toolbar = e.toolbar, this.closable = e.closable, this.indicator = e.indicator, this.swipe = e.swipe, this.noScrollLock = e.noScrollLock, this.noBackdropClose = e.noBackdropClose, this._index = m(e.index, 0, Math.max(0, e.images.length - 1));
+		this.images = e.images, this.loop = e.loop, this.nav = e.nav, this.toolbar = e.toolbar, this.closable = e.closable, this.indicator = e.indicator, this.swipe = e.swipe, this.noScrollLock = e.noScrollLock, this.noBackdropClose = e.noBackdropClose, this._index = h(e.index, 0, Math.max(0, e.images.length - 1));
 	}
 	show() {
 		this._open ||= (this._dismissed = !1, !0);
@@ -138,7 +142,7 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
 	goTo(e) {
 		let t = this.images.length;
 		if (t === 0) return;
-		let n = this.loop ? (e % t + t) % t : m(e, 0, t - 1);
+		let n = this.loop ? (e % t + t) % t : h(e, 0, t - 1);
 		n !== this._index && (this._index = n, this.resetZoom());
 	}
 	next() {
@@ -148,17 +152,29 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
 		this.goTo(this._index - 1);
 	}
 	zoomIn() {
-		this._setScale(this._scale + O);
+		this._setScale(this._scale + k);
 	}
 	zoomOut() {
-		this._setScale(this._scale - O);
+		this._setScale(this._scale - k);
 	}
 	resetZoom() {
-		(this._scale !== E || this._offsetX !== 0 || this._offsetY !== 0) && (this._scale = E, this._offsetX = 0, this._offsetY = 0);
+		(this._scale !== D || this._offsetX !== 0 || this._offsetY !== 0) && (this._scale = D, this._offsetX = 0, this._offsetY = 0);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._presence.reconcile(), this._syncScrollLock(), this._attachPinch(), this._reclaimIfOpen();
+	}
+	_reclaimIfOpen() {
+		if (!this._open || this._handle) return;
+		let e = this.dialog;
+		e && (this._handle = this._overlay.claim(e, { ancestryFrom: this }));
 	}
 	firstUpdated() {
+		this._attachPinch();
+	}
+	_attachPinch() {
+		if (this._pinch) return;
 		let e = this._stage;
-		e && (this._pinch = h(e, {
+		e && (this._pinch = g(e, {
 			onStart: this._handlePinchStart,
 			onMove: this._handlePinchMove,
 			onEnd: this._handlePinchEnd,
@@ -166,10 +182,17 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
 		}));
 	}
 	updated(e) {
-		super.updated(e), this.isConnected && (e.has("_open") && (this._presence.sync(this._open), !this._open && !this.dialog?.open && queueMicrotask(() => this._notifyDismissed())), (e.has("_open") || e.has("noScrollLock")) && this._syncScrollLock());
+		if (super.updated(e), this.isConnected) {
+			if (e.has("_open")) {
+				this._presence.sync(this._open);
+				let e = this.dialog;
+				e && (this._open ? (this._handle?.release(), this._handle = this._overlay.claim(e, { ancestryFrom: this })) : (this._handle?.release(), this._handle = null)), !this._open && !this.dialog?.open && queueMicrotask(() => this._notifyDismissed());
+			}
+			(e.has("_open") || e.has("noScrollLock")) && this._syncScrollLock();
+		}
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this._endGesture(), this._pinch?.destroy(), this._pinch = void 0, this._presence.dispose(), this._scrollLock.release();
+		super.disconnectedCallback(), this._endGesture(), this._pinch?.destroy(), this._pinch = void 0, this._presence.dispose(), this._scrollLock.release(), this._handle?.release(), this._handle = null;
 	}
 	_syncScrollLock() {
 		this._scrollLock.sync(this._open && !this.noScrollLock);
@@ -178,13 +201,13 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
 		this._dismissed || this._open || (this._dismissed = !0, this.dispatchEvent(new CustomEvent("preview-dismissed")));
 	}
 	_zoomAt(e, t, n) {
-		let r = m(e, E, D);
+		let r = h(e, D, O);
 		if (r === this._scale) return;
 		let i = r / this._scale;
 		this._applyScale(r, t - (t - this._offsetX) * i, n - (n - this._offsetY) * i);
 	}
 	_applyScale(e, t, n) {
-		if (this._scale = e, e === E) {
+		if (this._scale = e, e === D) {
 			this._offsetX = 0, this._offsetY = 0;
 			return;
 		}
@@ -225,7 +248,7 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
 	}
 	_clampOffsets() {
 		let e = this._offsetBounds();
-		this._offsetX = m(this._offsetX, -e.x, e.x), this._offsetY = m(this._offsetY, -e.y, e.y);
+		this._offsetX = h(this._offsetX, -e.x, e.x), this._offsetY = h(this._offsetY, -e.y, e.y);
 	}
 	_isBlank(e) {
 		return e === this.dialog || e === this._stage;
@@ -259,16 +282,16 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
 			this._swipeOffset = 0;
 			return;
 		}
-		let a = Math.max(1, Math.round(i * j)), o = n - this._swipeStartTime, s = o >= 2 ? e / o * 1e3 : 0, c = (Math.abs(e) >= a || Math.abs(t) >= M || Math.abs(e) >= N && Math.max(Math.abs(t), Math.abs(s)) >= P) && this._adjacentIndex(r) !== -1;
-		this._swipeSettling = !0, this._swipeSettleCommit = c, this._swipeSettleDir = r, this._swipeOffset = c ? -r * i : 0, this._swipeSettleTimer = setTimeout(() => this._finishSwipeSettle(), F);
+		let a = Math.max(1, Math.round(i * M)), o = n - this._swipeStartTime, s = o >= 2 ? e / o * 1e3 : 0, c = (Math.abs(e) >= a || Math.abs(t) >= N || Math.abs(e) >= P && Math.max(Math.abs(t), Math.abs(s)) >= F) && this._adjacentIndex(r) !== -1;
+		this._swipeSettling = !0, this._swipeSettleCommit = c, this._swipeSettleDir = r, this._swipeOffset = c ? -r * i : 0, this._swipeSettleTimer = setTimeout(() => this._finishSwipeSettle(), I);
 	}
 	_panTo(e, t) {
 		let n = this._offsetBounds();
-		this._offsetX = m(this._panOriginX + e, -n.x, n.x), this._offsetY = m(this._panOriginY + t, -n.y, n.y);
+		this._offsetX = h(this._panOriginX + e, -n.x, n.x), this._offsetY = h(this._panOriginY + t, -n.y, n.y);
 	}
 	render() {
-		let e = this.images.length, s = this._scale > E, c = e > 0 ? this._adjacentIndex(-1) : -1, l = e > 0 ? this._adjacentIndex(1) : -1, u = `translate3d(${this._swipeOffset}px, 0, 0)`, d = `translate3d(${this._offsetX}px, ${this._offsetY}px, 0) scale(${this._scale})`, f = s ? "translate3d(0, 0, 0) scale(1)" : `translate3d(0, ${this._offsetY}px, 0) scale(1)`;
-		return v`
+		let e = this.images.length, t = this._scale > D, c = e > 0 ? this._adjacentIndex(-1) : -1, l = e > 0 ? this._adjacentIndex(1) : -1, u = `translate3d(${this._swipeOffset}px, 0, 0)`, d = `translate3d(${this._offsetX}px, ${this._offsetY}px, 0) scale(${this._scale})`, f = t ? "translate3d(0, 0, 0) scale(1)" : `translate3d(0, ${this._offsetY}px, 0) scale(1)`;
+		return y`
       <dialog
         aria-label="图片预览"
         @cancel=${this._handleCancel}
@@ -284,74 +307,74 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
         <div class="wui-image-preview-content">
           <div class="wui-image-preview-surface">
             <div
-              class=${w({
+              class=${T({
 			"wui-image-preview-stage": !0,
-			"is-zoomed": s,
+			"is-zoomed": t,
 			"is-dragging": this._dragging,
 			"is-settling": this._swipeSettling
 		})}
             >
               <div
                 class="wui-image-preview-track"
-                style=${T({ transform: u })}
+                style=${E({ transform: u })}
                 @transitionend=${this._handleSwipeSettleEnd}
               >
-                ${c >= 0 ? v`
+                ${c >= 0 ? y`
                         <div class="wui-image-preview-slide is-prev" aria-hidden="true">
                           <img
-                            class=${w({
+                            class=${T({
 			"wui-image-preview-image": !0,
 			"is-loaded": this._loadedSources.has(this.images[c].src)
 		})}
                             src=${this.images[c].src}
                             alt=${this.images[c].alt ?? ""}
                             draggable="false"
-                            style=${T({ transform: f })}
+                            style=${E({ transform: f })}
                             @load=${this._handleImageSettled}
                             @error=${this._handleImageSettled}
                           />
                         </div>
-                      ` : y}
-                ${e > 0 ? v`
+                      ` : b}
+                ${e > 0 ? y`
                         <div class="wui-image-preview-slide is-current">
                           <img
-                            class=${w({
+                            class=${T({
 			"wui-image-preview-image": !0,
 			"is-loaded": this._loadedSources.has(this.images[this._index].src)
 		})}
                             src=${this.images[this._index].src}
                             alt=${this.images[this._index].alt ?? ""}
                             draggable="false"
-                            style=${T({ transform: d })}
+                            style=${E({ transform: d })}
                             @load=${this._handleImageSettled}
                             @error=${this._handleImageSettled}
                           />
                         </div>
-                      ` : y}
-                ${l >= 0 ? v`
+                      ` : b}
+                ${l >= 0 ? y`
                         <div class="wui-image-preview-slide is-next" aria-hidden="true">
                           <img
-                            class=${w({
+                            class=${T({
 			"wui-image-preview-image": !0,
 			"is-loaded": this._loadedSources.has(this.images[l].src)
 		})}
                             src=${this.images[l].src}
                             alt=${this.images[l].alt ?? ""}
                             draggable="false"
-                            style=${T({ transform: f })}
+                            style=${E({ transform: f })}
                             @load=${this._handleImageSettled}
                             @error=${this._handleImageSettled}
                           />
                         </div>
-                      ` : y}
+                      ` : b}
               </div>
             </div>
           </div>
           <div class="wui-image-preview-controls">
-            ${this.indicator ? v`<span class="wui-image-preview-counter wui-glass" aria-live="polite"
+            ${this.indicator ? y`<span class="wui-image-preview-counter wui-glass" aria-live="polite"
                     >${this._index + 1} / ${e}</span
-                  >` : y}
-            ${this.closable ? v`
+                  >` : b}
+            ${this.closable ? y`
                     <web-ui-button
                       class="wui-image-preview-close"
                       variant="glass"
@@ -360,10 +383,10 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
                       aria-label="关闭"
                       @click=${this.close}
                     >
-                      <web-ui-icon size="16" .icon=${a}></web-ui-icon>
+                      <web-ui-icon size="16" .icon=${o}></web-ui-icon>
                     </web-ui-button>
-                  ` : y}
-            ${this.nav && e > 1 ? v`
+                  ` : b}
+            ${this.nav && e > 1 ? y`
                     <web-ui-button
                       class="wui-image-preview-nav wui-image-preview-nav-prev"
                       variant="glass"
@@ -373,7 +396,7 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
                       ?disabled=${!this.loop && this._index === 0}
                       @click=${this.prev}
                     >
-                      <web-ui-icon size="20" .icon=${t}></web-ui-icon>
+                      <web-ui-icon size="20" .icon=${n}></web-ui-icon>
                     </web-ui-button>
                     <web-ui-button
                       class="wui-image-preview-nav wui-image-preview-nav-next"
@@ -384,20 +407,20 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
                       ?disabled=${!this.loop && this._index === e - 1}
                       @click=${this.next}
                     >
-                      <web-ui-icon size="20" .icon=${n}></web-ui-icon>
+                      <web-ui-icon size="20" .icon=${r}></web-ui-icon>
                     </web-ui-button>
-                  ` : y}
-            ${this.toolbar ? v`
+                  ` : b}
+            ${this.toolbar ? y`
                     <div class="wui-image-preview-toolbar wui-glass">
                       <web-ui-button
                         variant="glass"
                         icon
                         size="30"
                         aria-label="缩小"
-                        ?disabled=${this._scale <= E}
+                        ?disabled=${this._scale <= D}
                         @click=${this.zoomOut}
                       >
-                        <web-ui-icon size="16" .icon=${i}></web-ui-icon>
+                        <web-ui-icon size="16" .icon=${a}></web-ui-icon>
                       </web-ui-button>
                       <span class="wui-image-preview-scale">${Math.round(this._scale * 100)}%</span>
                       <web-ui-button
@@ -405,37 +428,37 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
                         icon
                         size="30"
                         aria-label="放大"
-                        ?disabled=${this._scale >= D}
+                        ?disabled=${this._scale >= O}
                         @click=${this.zoomIn}
                       >
-                        <web-ui-icon size="16" .icon=${r}></web-ui-icon>
+                        <web-ui-icon size="16" .icon=${i}></web-ui-icon>
                       </web-ui-button>
                       <web-ui-button
                         variant="glass"
                         icon
                         size="30"
                         aria-label="重置缩放"
-                        ?disabled=${this._scale <= E && !this._isPanned}
+                        ?disabled=${this._scale <= D && !this._isPanned}
                         @click=${this.resetZoom}
                       >
-                        <web-ui-icon size="16" .icon=${o}></web-ui-icon>
+                        <web-ui-icon size="16" .icon=${s}></web-ui-icon>
                       </web-ui-button>
                     </div>
-                  ` : y}
+                  ` : b}
           </div>
         </div>
       </dialog>
     `;
 	}
 };
-e([S({ attribute: !1 })], I.prototype, "images", void 0), e([S({ attribute: !1 })], I.prototype, "loop", void 0), e([S({ attribute: !1 })], I.prototype, "nav", void 0), e([S({ attribute: !1 })], I.prototype, "toolbar", void 0), e([S({ attribute: !1 })], I.prototype, "closable", void 0), e([S({ attribute: !1 })], I.prototype, "indicator", void 0), e([S({ attribute: !1 })], I.prototype, "swipe", void 0), e([S({ attribute: !1 })], I.prototype, "noScrollLock", void 0), e([S({ attribute: !1 })], I.prototype, "noBackdropClose", void 0), e([C()], I.prototype, "_open", void 0), e([C()], I.prototype, "_index", void 0), e([C()], I.prototype, "_scale", void 0), e([C()], I.prototype, "_offsetX", void 0), e([C()], I.prototype, "_offsetY", void 0), e([C()], I.prototype, "_swipeOffset", void 0), e([C()], I.prototype, "_swipeSettling", void 0), e([C()], I.prototype, "_dragging", void 0), I = e([x("web-ui-image-preview")], I);
-function L(e) {
+e([C({ attribute: !1 })], L.prototype, "images", void 0), e([C({ attribute: !1 })], L.prototype, "loop", void 0), e([C({ attribute: !1 })], L.prototype, "nav", void 0), e([C({ attribute: !1 })], L.prototype, "toolbar", void 0), e([C({ attribute: !1 })], L.prototype, "closable", void 0), e([C({ attribute: !1 })], L.prototype, "indicator", void 0), e([C({ attribute: !1 })], L.prototype, "swipe", void 0), e([C({ attribute: !1 })], L.prototype, "noScrollLock", void 0), e([C({ attribute: !1 })], L.prototype, "noBackdropClose", void 0), e([w()], L.prototype, "_open", void 0), e([w()], L.prototype, "_index", void 0), e([w()], L.prototype, "_scale", void 0), e([w()], L.prototype, "_offsetX", void 0), e([w()], L.prototype, "_offsetY", void 0), e([w()], L.prototype, "_swipeOffset", void 0), e([w()], L.prototype, "_swipeSettling", void 0), e([w()], L.prototype, "_dragging", void 0), L = e([S("web-ui-image-preview")], L);
+function R(e) {
 	let t = (e.images ?? []).map((e) => ({
 		src: e.src,
 		alt: e.alt ?? ""
 	}));
 	if (t.length === 0) throw Error("[web-ui-image-preview] imagePreview requires at least one image");
-	let n = e.target ? l(e.target) : u(), r = e.container ?? n?.getOverlayRoot() ?? c(), i = document.createElement("web-ui-image-preview");
+	let n = e.target ? u(e.target) : d(), r = e.container ?? n?.getOverlayRoot() ?? l(), i = document.createElement("web-ui-image-preview");
 	i.configure({
 		images: t,
 		index: e.index ?? 0,
@@ -476,6 +499,6 @@ function L(e) {
 	};
 }
 //#endregion
-export { L as imagePreview };
+export { R as imagePreview };
 
 //# sourceMappingURL=index.js.map