@greypan/web-ui 11.0.0 → 11.1.0

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

@@ -1 +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'\nimport { createFieldId } from '@/shared/form-association/field-id'\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: Boolean, reflect: true }) readonly = false\n\n  /**\n   * 卸载时按提交语义结束编辑，默认 false。\n   *\n   * 跨引擎实测（Chromium 与 WebKit 各一轮）结论**不一致**，这是本属性的主要价值来源：\n   *\n   * - Chromium：移除正在编辑的组件会向编辑层派发 `blur`，默认行为下 `change` 已照常派发\n   *   一次，草稿不丢。blur 与 change 同步排在 `disconnectedCallback` 之后（后者在\n   *   disconnected 步骤内跑完），卸载因此没拿到一条「排在该消费方状态更新之前」的提交来源。\n   * - WebKit（Safari / iOS）：移除**不派发 blur**，默认路径什么都不提交，草稿随组件一起丢弃。\n   *   这里 blur 兜底不存在，只有显式开启本属性才能保住草稿。\n   * - Gecko（Firefox）**未验证**：实测所用机器上没有任何 Firefox 能启动，这里不做断言。把它当作\n   *   未知，而不是默认与上面两者之一相同。\n   *\n   * 所以在 Safari 上这不是可选优化而是必需的：默认值 `false` 对 Safari 用户等于没有兜底，\n   * 消费方若依赖「行被回收时草稿不丢」，在 Safari 上必须显式开启本属性。\n   *\n   * 开启后由 `disconnectedCallback` 复用 `_commitEditing`，与 `Enter`／`blur` 是同一份实现，\n   * 卸载不是第三条独立的提交语义。副作用与 `blur` 提交一致：草稿成为新值、退出编辑、\n   * 派发一次 `change`（冒泡且组合）。两处与 `blur` 刻意不同：\n   *\n   * 1. 提交判据——`Enter` 与 `blur` 由用户动作触发，一律算提交意图；卸载没有这种意图，\n   *    因此只在草稿与进入编辑时的值确实不同时才提交，不产生空提交。\n   * 2. 禁用与只读态——`disabled` / `readonly` 时与 `_onBlur` 一致：不派发提交事件。两者对「已有\n   *    草稿」的后果不同，必须分开说：`disabled` 下草稿保留在组件上；`readonly` 下草稿是真的\n   *    丢掉——`readonly` 阻止不了先前的输入，而卸载时不会再有 blur 兜底（WebKit 上连 blur\n   *    都没有）。可达路径是「可编辑态进入 → 起草稿 → 期间翻 readonly → 卸载」。这里不按取消\n   *    处理：cancel 的契约是恢复 `_editBase`，而卸载既没有焦点要交还也没有宿主接收结果，\n   *    改成 cancel 还会与「与 `_onBlur` 一致」这条公开承诺相悖。用户看到的是「我打的字没了」，\n   *    既没有 change 也没有 cancel。\n   *\n   * 派发发生在卸载回调内，`change` 沿组合路径向上派发，因此挂在组件自身或任一祖先上的监听\n   * 都会执行，**包括已经随宿主一起被卸载的祖先**——派发不要求祖先仍在文档中。这正是虚拟化\n   * 场景需要的：消费方的监听器往往就挂在被回收的那一行上。因此监听器不能假定组件此刻仍在\n   * 文档里；需要把结果交给宿主树之外的状态时，用 `queueMicrotask` 之类的显式转交。\n   *\n   * 祖先上的 `display: none` 不是卸载：组件仍在文档中、不派发任何事件（两引擎一致），那种\n   * 场合需要消费方主动结束编辑。\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'commit-on-unmount' }) commitOnUnmount = false\n\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  private readonly _fieldId = createFieldId('web-ui-editable-text')\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    /*\n     * 卸载没有用户动作作为提交意图（`Enter` / `blur` 都有），所以判据是草稿与进入编辑时的\n     * 值是否不同，而不是「是否提交过」——Escape 会把值恢复成 `_editBase`，但那是取消，与\n     * 本次卸载无关；一个只聚焦了没打字的会话也不该在消失时凭空产生一次 change。\n     *\n     * `_isDisabled` 与 `readonly` 两道守卫都与 `_onBlur` 对称：两者都不派发提交事件。`disabled`\n     * 必须显式判——`disabled = true` 与 `remove()` 在同一任务里执行时 Lit 更新是微任务，\n     * `updated()` 还没跑到（禁用态退出编辑那条分支尚未执行），此时组件仍在编辑态，不判就会\n     * 派发一条 blur 路径明确拒绝的 change。`readonly` 不能靠「草稿恒等于基线」兜住：可编辑态\n     * 进入并起草稿之后属性才翻成 readonly 的会话，基线仍是进入编辑时的旧值，两条判据都成立\n     * 却不该提交（草稿在这次卸载中丢失，理由见 property 的 JSDoc）。\n     */\n    if (\n      this.commitOnUnmount &&\n      this._editing &&\n      !this._isDisabled &&\n      !this.readonly &&\n      this._value !== this._editBase\n    ) {\n      this._commitEditing(false)\n    }\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    const editor = this._editor\n    if (this._isDisabled || this.readonly) {\n      if (editor && editor.value !== this._value) editor.value = this._value\n      return\n    }\n    this._value = 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    if (this.readonly) {\n      this._exitEditing()\n      return\n    }\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     * 组件被消费方投映进 overlay shadow（drawer/dialog 标题）时，任何冒泡的 cancel——\n     * composed 与否都一样，slot 都会把事件带进 shadow 树——都会被那个 dialog 当成\n     * 一次关闭请求：issue #159 的实测症状是 drawer 标题聚焦编辑时按 Escape，或点到\n     * drawer 别处触发 blur，drawer 跟着编辑一起关。因此只在宿主上派发，不冒泡不组合；\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 上：消费方（overlay 仲裁者）在\n   * document 捕获阶段收 Escape，组件若只在 textarea 上处理，按键先被仲裁者收走，\n   * 于是一次 Escape 会同时取消编辑和关闭外层 overlay。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      // 按键本身也被编辑层消费：外层 overlay 不应收到同一次 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       * Enter 无论是否只读都属于编辑层，消费策略与 Escape 对称：preventDefault\n       * 压掉默认行为，stopPropagation 阻止外层表单隐式提交或 overlay 监听收到按键。\n       * 只读态只是没有草稿可提交，因此消费后直接返回，不退出编辑、不派发 change。\n       */\n      e.preventDefault()\n      e.stopPropagation()\n      if (this.readonly) return\n      /*\n       * 可编辑态的 Enter 随后提交草稿；外层表单的隐式提交与 overlay 监听不应收到\n       * 同一次按键——正如 Escape 属于取消。\n       */\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          id=${this._fieldId}\n          class=\"editor\"\n          .value=${this._value}\n          .placeholder=${this.placeholder}\n          ?disabled=${this._isDisabled}\n          ?readonly=${this.readonly}\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":";;;;;;;;;AAWA,IAAM,IAAc,KAGd,IAAkB;AAQxB,SAAS,EAAW,GAAiC;CACnD,KAAK,IAAM,KAAS,EAAM,YACxB,IAAI,aAAiB,MAAM,OAAO;CAEpC,OAAO;AACT;AASA,SAAS,EAAqB,GAAwB,GAAW,GAAmB;CAClF,IAAM,IAAO,EAAW,CAAS;CACjC,IAAI,CAAC,GAAM,OAAO;CAClB,IAAM,IAAS,EAAK,KAAK,QACnB,IAAQ,SAAS,YAAY,GAC7B,KAAU,OACd,EAAM,SAAS,GAAM,CAAM,GAC3B,EAAM,OAAO,GAAM,CAAM,GAClB,EAAM,sBAAsB,IAK/B,IAAmB,CAAC;CAC1B,KAAK,IAAM,KAAQ,EAAU,eAAe,GAC1C,AAAK,EAAM,MAAK,MAAQ,KAAK,IAAI,EAAK,MAAM,EAAK,GAAG,KAAK,CAAe,KAAG,EAAM,KAAK,CAAI;CAE5F,IAAI,EAAM,WAAW,GAAG,OAAO;CAC/B,IAAI,IAAO,EAAM,IACb,IAAU;CACd,KAAK,IAAM,KAAa,GAAO;EAC7B,IAAM,IAAW,KAAK,KAAK,EAAU,MAAM,EAAU,UAAU,IAAI,CAAC;EACpE,AAAI,KAAY,MACd,IAAU,GACV,IAAO;CAEX;CAGA,IAAI,IAAK,GACL,IAAK;CACT,OAAO,IAAK,IAAI;EACd,IAAM,IAAO,IAAK,KAAO;EACzB,AAAI,EAAO,CAAG,CAAC,CAAC,OAAO,EAAK,MAAM,IAAiB,IAAK,IACnD,IAAK,IAAM;CAClB;CACA,IAAM,IAAY;CAIlB,KAFA,IAAK,GACL,IAAK,GACE,IAAK,IAAI;EACd,IAAM,IAAO,IAAK,IAAK,KAAM;EAC7B,AAAI,EAAO,CAAG,CAAC,CAAC,OAAO,EAAK,MAAM,IAAiB,IAAK,IACnD,IAAK,IAAM;CAClB;CACA,IAAM,IAAU,KAAK,IAAI,GAAI,CAAS;CAItC,KAFA,IAAK,GACL,IAAK,GACE,IAAK,IAAI;EACd,IAAM,IAAO,IAAK,IAAK,KAAM;EAC7B,AAAI,EAAO,CAAG,CAAC,CAAC,QAAQ,IAAI,IAAiB,IAAK,IAC7C,IAAK,IAAM;CAClB;CACA,OAAO;AACT;AAGO,IAAM,IAAN,cAAgC,EAAe,CAAU,CAAC,CAAC;;EACvC,KAAA,SAAA,CAAC,EAAU,CAAK,CAAC;;CAuD1C,IACI,QAAgB;EAClB,OAAO,KAAK;CACd;CAEA,IAAI,MAAM,GAAW;EACnB,IAAM,IAAM,KAAK;EAGjB,AAFA,KAAK,SAAS,GACd,KAAK,iBAAiB,KAAK,GAC3B,KAAK,cAAc,SAAS,CAAG;CACjC;CAYA,IAAY,cAAuB;EACjC,OAAO,KAAK,YAAY,KAAK,iBAAiB,eAAe;CAC/D;CAiBA,cAAc;EAGZ,AAFA,MAAM,GA/F0C,KAAA,OAAA,IACO,KAAA,cAAA,IACF,KAAA,WAAA,IACA,KAAA,WAAA,IAwCuC,KAAA,kBAAA,IAEL,KAAA,YAAA,MAE/D,KAAA,SAAA,IAqBP,KAAA,WAAA,IACC,KAAA,YAAA,IACmB,KAAA,gBAAA,MACjB,KAAA,cAAA,IAC2B,KAAA,kBAAA,MACrB,KAAA,WAAA,EAAc,sBAAsB,GAM5B,KAAA,mBAAA,EAA8B;GAChE,MAAM;GACN,gBAAgB,KAAK;GACrB,WAAU,MAAS;IACjB,KAAK,QAAQ;GACf;GACA,oBAAoB,KAAK;GACzB,oBAAoB,KAAK;GACzB,eAAc,MAAS;IACrB,AAAI,OAAO,KAAU,aAAU,KAAK,QAAQ;GAC9C;EACF,CAAC,CAAC,CAAC,KAAK,GAEsC,KAAA,6BAAA,IAAI,EAA0B,MAAM,KAAK,gBAAgB,GAwNjE,KAAA,qBAAA,MAAqB;GAErD,OAAE,eACD,EAAE,aAAa,CAAC,CAAC,SAAS,IAAI,GACnC;QAAI,EAAE,QAAQ,UAAU;KAOtB,AALA,EAAE,eAAe,GACjB,EAAE,gBAAgB,GAGlB,KAAK,eAAe,GACpB,KAAK,mBAAmB;KACxB;IACF;IACA,IAAI,EAAE,QAAQ,SAAS;KAQrB,IAFA,EAAE,eAAe,GACjB,EAAE,gBAAgB,GACd,KAAK,UAAU;KAKnB,KAAK,eAAe,EAAI;IAC1B;GAfA;EAgBF,GAhPE,KAAK,iBAAiB,SAAS,KAAK,YAAY;CAClD;CAEA,uBAAgC;EAwB9B,AAvBA,MAAM,qBAAqB,GAczB,KAAK,mBACL,KAAK,YACL,CAAC,KAAK,eACN,CAAC,KAAK,YACN,KAAK,WAAW,KAAK,aAErB,KAAK,eAAe,EAAK,GAE3B,KAAK,oBAAoB,GACzB,KAAK,kBAAkB;CACzB;CAEA,oBAA6B;EAW3B,AAVA,MAAM,kBAAkB,GAOxB,KAAK,eAAe,GAGhB,KAAK,YAAU,KAAK,kBAAkB;CAC5C;CAEA,UAAmB;EAMjB,AAJI,KAAK,cAAa,KAAK,gBAAgB,UAAU,IAChD,KAAK,aAAa,YAAY,GAAG,GAElC,KAAK,YAAY,KAAK,eAAa,KAAK,aAAa,GACzD,KAAK,gBAAgB;CACvB;CAEA,eAAuB;EACrB,IAAI,KAAK,aAAa;GACpB,KAAK,cAAc;GACnB;EACF;EACA,KAAK,cAAc;CACrB;CAMA,eAAuB,GAAiB;EAClC,KAAK,eAAe,KAAK,YAAY,CAAC,KAAK,eAC/C,KAAK,gBAAgB,EAAqB,KAAK,YAAY,EAAE,SAAS,EAAE,OAAO;CACjF;CAGA,WAAmB;EACb,KAAK,eAAe,KAAK,YAC7B,KAAK,cAAc;CACrB;CAOA,SAAS;EACP,IAAI,KAAK,aAAa;EACtB,AAAK,KAAK,YAAU,KAAK,cAAc;EACvC,IAAM,IAAS,KAAK;EAEpB,GAAQ,kBAAkB,GAAG,EAAO,MAAM,MAAM;CAClD;CAEA,gBAAwB;EACtB,IAAI,KAAK,eAAe,KAAK,UAAU;EAIvC,AAHA,KAAK,WAAW,IAChB,KAAK,YAAY,KAAK,QACtB,KAAK,gBAAgB,WAAW,EAAI,GACpC,KAAK,kBAAkB;EACvB,IAAM,IAAS,KAAK;EACpB,IAAI,CAAC,GAAQ;EACb,EAAO,MAAM;EAEb,IAAM,IAAS,KAAK,iBAAiB,KAAK,OAAO;EACjD,KAAK,gBAAgB;EACrB,IAAM,IAAU,KAAK,IAAI,GAAG,KAAK,IAAI,GAAQ,EAAO,MAAM,MAAM,CAAC;EACjE,EAAO,kBAAkB,GAAS,CAAO;CAC3C;CAEA,eAAuB;EAChB,KAAK,aACV,KAAK,WAAW,IAChB,KAAK,oBAAoB,GACzB,KAAK,gBAAgB,WAAW,EAAK;CACvC;CAEA,WAAmB;EAEjB,IAAM,IAAS,KAAK;EACpB,IAAI,KAAK,eAAe,KAAK,UAAU;GACrC,AAAI,KAAU,EAAO,UAAU,KAAK,WAAQ,EAAO,QAAQ,KAAK;GAChE;EACF;EAGA,AAFA,KAAK,SAAS,GAAQ,SAAS,IAC/B,KAAK,iBAAiB,KAAK,GAC3B,KAAK,gBAAgB;CACvB;CAOA,UAAkB;EACZ,IAAC,KAAK,YAAY,MAAK,aAC3B;OAAI,KAAK,UAAU;IACjB,KAAK,aAAa;IAClB;GACF;GACA,KAAK,eAAe,EAAK;EADzB;CAEF;CAUA,eAAuB,GAAsB;EACtC,KAAK,aACV,KAAK,aAAa,GACd,KAAa,KAAK,mBAAmB,GACzC,KAAK,cAAc,IAAI,MAAM,UAAU;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CAC3E;CAQA,iBAAyB;EAClB,KAAK,aACV,KAAK,SAAS,KAAK,WACnB,KAAK,iBAAiB,KAAK,GAC3B,KAAK,aAAa,GAOlB,KAAK,cAAc,IAUnB,KAAK,cAAc,IAAI,MAAM,UAAU;GAAE,SAAS;GAAO,UAAU;EAAM,CAAC,CAAC;CAC7E;CAMA,qBAA6B;EAG3B,AAFA,KAAK,cAAc,IACnB,KAAK,MAAM,GACX,qBAAqB;GACnB,KAAK,cAAc;EACrB,CAAC;CACH;CAUA,oBAA4B;EAC1B,OAAO,iBAAiB,WAAW,KAAK,mBAAmB,EAAI;CACjE;CAEA,sBAA8B;EAC5B,OAAO,oBAAoB,WAAW,KAAK,mBAAmB,EAAI;CACpE;CAiCA,iBAAyB;EAGvB,IAFA,KAAK,kBAAkB,GAEnB,OAAO,iBAAmB,KAAa;GACzC,KAAK,gBAAgB;GACrB;EACF;EAGA,AAFA,KAAK,kBAAkB,IAAI,qBAAqB,KAAK,gBAAgB,CAAC,GACtE,KAAK,gBAAgB,QAAQ,IAAI,GACjC,KAAK,gBAAgB;CACvB;CAEA,oBAA4B;EAG1B,AAFA,KAAK,iBAAiB,WAAW,GACjC,KAAK,kBAAkB,MACvB,KAAK,SAAS,MAAM,eAAe,QAAQ;CAC7C;CASA,kBAA0B;EACxB,IAAM,IAAS,KAAK;EACpB,IAAI,CAAC,GAAQ;EACb,IAAM,IAAW,EAAO,MAAM;EAC9B,EAAO,MAAM,SAAS;EACtB,IAAM,IAAS,EAAO;EACtB,EAAO,MAAM,SAAS,IAAS,IAAI,GAAG,EAAO,MAAM;CACrD;CAEA,IAAY,eAAuB;EAGjC,OAFI,KAAK,WAAW,KAChB,KAAK,gBAAgB,KAClB,IAD6B,KAAK,cADV,KAAK;CAGtC;CAEA,SAAkB;EAChB,OAAO,CAAI;yCAC0B,KAAK,eAAe,UAAU,KAAK,SAAS;sBAC/D,EAAS;GAAE,MAAM;GAAM,aAAa,KAAK,WAAW;EAAG,CAAC,EAAE,GAAG,KAAK,aAAa;;eAEtF,KAAK,SAAS;;mBAEV,KAAK,OAAO;yBACN,KAAK,YAAY;sBACpB,KAAK,YAAY;sBACjB,KAAK,SAAS;uBACb,EAAU,KAAK,SAAS,EAAE;mBAC9B,KAAK,SAAS;kBACf,KAAK,QAAQ;;;;CAI7B;AAOF;AAnZG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GACxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,GACxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAwCzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAoB,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,GAEzE,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAa,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAElD,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAMN,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,IAAA,GAYzB,EAAA,CAAA,EAAM,SAAS,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GACf,EAAA,CAAA,EAAM,OAAO,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GAtEf,IAAA,EAAA,CAAA,EAAc,sBAAsB,CAAA,GAAA,CAAA"}
+{"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'\nimport { createFieldId } from '@/shared/form-association/field-id'\n\nimport style from './style.css?inline'\n\n/** 空值且无 placeholder 时保留可点击行盒。 */\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: Boolean, reflect: true }) readonly = false\n\n  /**\n   * 卸载时按提交语义结束编辑，默认 false。\n   *\n   * 跨引擎实测（Chromium 与 WebKit 各一轮）结论**不一致**，这是本属性的主要价值来源：\n   *\n   * - Chromium：移除正在编辑的组件会向编辑层派发 `blur`，默认行为下 `change` 已照常派发\n   *   一次，草稿不丢。blur 与 change 同步排在 `disconnectedCallback` 之后（后者在\n   *   disconnected 步骤内跑完），卸载因此没拿到一条「排在该消费方状态更新之前」的提交来源。\n   * - WebKit（Safari / iOS）：移除**不派发 blur**，默认路径什么都不提交，草稿随组件一起丢弃。\n   *   这里 blur 兜底不存在，只有显式开启本属性才能保住草稿。\n   * - Gecko（Firefox）**未验证**：实测所用机器上没有任何 Firefox 能启动，这里不做断言。把它当作\n   *   未知，而不是默认与上面两者之一相同。\n   *\n   * 所以在 Safari 上这不是可选优化而是必需的：默认值 `false` 对 Safari 用户等于没有兜底，\n   * 消费方若依赖「行被回收时草稿不丢」，在 Safari 上必须显式开启本属性。\n   *\n   * 开启后由 `disconnectedCallback` 复用 `_commitEditing`，与 `Enter`／`blur` 是同一份实现，\n   * 卸载不是第三条独立的提交语义。副作用与 `blur` 提交一致：草稿成为新值、退出编辑、\n   * 派发一次 `change`（冒泡且组合）。两处与 `blur` 刻意不同：\n   *\n   * 1. 提交判据——`Enter` 与 `blur` 由用户动作触发，一律算提交意图；卸载没有这种意图，\n   *    因此只在草稿与进入编辑时的值确实不同时才提交，不产生空提交。\n   * 2. 禁用与只读态——`disabled` / `readonly` 时与 `_onBlur` 一致：不派发提交事件。两者对「已有\n   *    草稿」的后果不同，必须分开说：`disabled` 下草稿保留在组件上；`readonly` 下草稿是真的\n   *    丢掉——`readonly` 阻止不了先前的输入，而卸载时不会再有 blur 兜底（WebKit 上连 blur\n   *    都没有）。可达路径是「可编辑态进入 → 起草稿 → 期间翻 readonly → 卸载」。这里不按取消\n   *    处理：cancel 的契约是恢复 `_editBase`，而卸载既没有焦点要交还也没有宿主接收结果，\n   *    改成 cancel 还会与「与 `_onBlur` 一致」这条公开承诺相悖。用户看到的是「我打的字没了」，\n   *    既没有 change 也没有 cancel。\n   *\n   * 派发发生在卸载回调内，`change` 沿组合路径向上派发，因此挂在组件自身或任一祖先上的监听\n   * 都会执行，**包括已经随宿主一起被卸载的祖先**——派发不要求祖先仍在文档中。这正是虚拟化\n   * 场景需要的：消费方的监听器往往就挂在被回收的那一行上。因此监听器不能假定组件此刻仍在\n   * 文档里；需要把结果交给宿主树之外的状态时，用 `queueMicrotask` 之类的显式转交。\n   *\n   * 祖先上的 `display: none` 不是卸载：组件仍在文档中、不派发任何事件（两引擎一致），那种\n   * 场合需要消费方主动结束编辑。\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'commit-on-unmount' }) commitOnUnmount = false\n\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  private readonly _fieldId = createFieldId('web-ui-editable-text')\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    /*\n     * 卸载没有用户动作作为提交意图（`Enter` / `blur` 都有），所以判据是草稿与进入编辑时的\n     * 值是否不同，而不是「是否提交过」——Escape 会把值恢复成 `_editBase`，但那是取消，与\n     * 本次卸载无关；一个只聚焦了没打字的会话也不该在消失时凭空产生一次 change。\n     *\n     * `_isDisabled` 与 `readonly` 两道守卫都与 `_onBlur` 对称：两者都不派发提交事件。`disabled`\n     * 必须显式判——`disabled = true` 与 `remove()` 在同一任务里执行时 Lit 更新是微任务，\n     * `updated()` 还没跑到（禁用态退出编辑那条分支尚未执行），此时组件仍在编辑态，不判就会\n     * 派发一条 blur 路径明确拒绝的 change。`readonly` 不能靠「草稿恒等于基线」兜住：可编辑态\n     * 进入并起草稿之后属性才翻成 readonly 的会话，基线仍是进入编辑时的旧值，两条判据都成立\n     * 却不该提交（草稿在这次卸载中丢失，理由见 property 的 JSDoc）。\n     */\n    if (\n      this.commitOnUnmount &&\n      this._editing &&\n      !this._isDisabled &&\n      !this.readonly &&\n      this._value !== this._editBase\n    ) {\n      this._commitEditing(false)\n    }\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    const editor = this._editor\n    if (this._isDisabled || this.readonly) {\n      if (editor && editor.value !== this._value) editor.value = this._value\n      return\n    }\n    this._value = 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    if (this.readonly) {\n      this._exitEditing()\n      return\n    }\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     * 组件被消费方投映进 overlay shadow（drawer/dialog 标题）时，任何冒泡的 cancel——\n     * composed 与否都一样，slot 都会把事件带进 shadow 树——都会被那个 dialog 当成\n     * 一次关闭请求：issue #159 的实测症状是 drawer 标题聚焦编辑时按 Escape，或点到\n     * drawer 别处触发 blur，drawer 跟着编辑一起关。因此只在宿主上派发，不冒泡不组合；\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 上：消费方（overlay 仲裁者）在\n   * document 捕获阶段收 Escape，组件若只在 textarea 上处理，按键先被仲裁者收走，\n   * 于是一次 Escape 会同时取消编辑和关闭外层 overlay。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      // 按键本身也被编辑层消费：外层 overlay 不应收到同一次 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       * Enter 无论是否只读都属于编辑层，消费策略与 Escape 对称：preventDefault\n       * 压掉默认行为，stopPropagation 阻止外层表单隐式提交或 overlay 监听收到按键。\n       * 只读态只是没有草稿可提交，因此消费后直接返回，不退出编辑、不派发 change。\n       */\n      e.preventDefault()\n      e.stopPropagation()\n      if (this.readonly) return\n      /*\n       * 可编辑态的 Enter 随后提交草稿；外层表单的隐式提交与 overlay 监听不应收到\n       * 同一次按键——正如 Escape 属于取消。\n       */\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\n          class=${classMap({\n            text: true,\n            placeholder: this._value === '',\n            'trailing-newline': this._value.endsWith('\\n')\n          })}\n          >${this._displayText}</span\n        >\n        <textarea\n          id=${this._fieldId}\n          class=\"editor\"\n          .value=${this._value}\n          .placeholder=${this.placeholder}\n          ?disabled=${this._isDisabled}\n          ?readonly=${this.readonly}\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

@@ -1,5 +1,5 @@
 //#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}";
+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}.text.trailing-newline:after{content:\"\";width:0;display:inline-block}.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,#0071e3);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 };
 

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

@@ -1 +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 让空白 collapse，\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 宽：行内级盒子配上零宽 placeholder，收缩上下文（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":""}
+{"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 让空白 collapse，\n     两层取同一变量，外部覆盖（如 nowrap）时仍保持一致。 */\n  white-space: var(--wui-editable-text-white-space, pre-wrap);\n}\n\n.text {\n  display: inline;\n}\n\n/* pre-wrap 不为文本节点末尾的换行留下行盒；空的零宽行内块触发末行排版，\n   不向文本节点添加字符，因此选择、复制与 value 保持一致。 */\n.text.trailing-newline::after {\n  content: '';\n  display: inline-block;\n  width: 0;\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, #0071e3);\n\n  &::placeholder {\n    color: var(--wui-color-text-secondary, #6a6a6a);\n  }\n}\n\n/* 可见性切换：文字态隐藏编辑层、编辑态显露；盒模型、滚动与换行不随之变化 */\n:host([editing]) .editor {\n  /* 空内容时宿主可能被收缩到 0 宽：行内级盒子配上零宽 placeholder，收缩上下文（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,6 +1,6 @@
 import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import "../icon/index.js";
-import t from "../../assets/glass.js";
+import t from "../../classes/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";
@@ -267,7 +267,7 @@ var O = 1, k = 4, A = .5, j = .002, M = 3, N = .15, P = 320, F = 16, I = 160, L
 	}
 	_adjacentIndex(e) {
 		let t = this.images.length;
-		if (t === 0) return -1;
+		if (t <= 1) return -1;
 		if (this.loop) return ((this._index + e) % t + t) % t;
 		let n = this._index + e;
 		return n >= 0 && n < t ? n : -1;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/image-preview/index.ts"],"sourcesContent":["import '@/components/button'\nimport '@/components/icon'\n\nimport { html, LitElement, nothing, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { styleMap } from 'lit/directives/style-map.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport modalSurface from '@/assets/modal-surface.css?inline'\nimport { lucideChevronLeft, lucideChevronRight, lucideMinus, lucidePlus, oouiClose, radixIconsReset } from '@/icons'\nimport { attachDragGesture, type DragGestureHandle } from '@/shared/gesture/drag-gesture'\nimport { clamp } from '@/shared/gesture/physics'\nimport {\n  attachPinchGesture,\n  type PinchGestureHandle,\n  type PinchMoveInfo,\n  type PinchStartInfo\n} from '@/shared/gesture/pinch-gesture'\nimport { defineNativeDialogPresence } from '@/shared/overlay/native-dialog-presence'\nimport { defineOpenOverlay, type OpenOverlayHandle } from '@/shared/overlay/open-overlay'\nimport { getFallbackOverlayRoot } from '@/shared/overlay/overlay-root'\nimport { findNearestTheme, findRootTheme } from '@/shared/overlay/theme-overlay-scope'\nimport { defineScrollLockLease } from '@/shared/scroll-lock/scroll-lock'\n\nimport style from './style.css?inline'\n\nexport interface ImagePreviewItem {\n  src: string\n  /** 无障碍替代文本；也用于图片加载失败时的回退展示。 */\n  alt?: string\n}\n\nexport interface ImagePreviewOptions {\n  images: ImagePreviewItem[]\n  /** 初始图片索引，越界时钳制到有效区间。默认 0。 */\n  index?: number\n  /** 首尾循环切换。默认 true。 */\n  loop?: boolean\n  /** 用于解析最近 web-ui-theme 作用域的触发元素。 */\n  target?: Element\n  /** 显式挂载容器，优先级高于 target 和主题作用域。 */\n  container?: HTMLElement\n  /** 展示上一张 / 下一张 button；仅在图片多于一张时渲染。默认 false。 */\n  nav?: boolean\n  /** 展示缩放工具条。默认 false。 */\n  toolbar?: boolean\n  /** 展示关闭 button。默认 false。 */\n  closable?: boolean\n  /** 展示「当前 / 总数」indicator。默认 false。 */\n  indicator?: boolean\n  /**\n   * 1x 且图片多于一张时，允许左右滑动切换图片：该手势接管整个拖拽，纵向位移被忽略\n   * （不驱平移、不跟手），横向用于切图。放大后拖拽一律平移（纵横都跟）、不再切图。\n   * 默认 false。\n   */\n  swipe?: boolean\n  /** 打开期间不锁定页面滚动，语义与 `<web-ui-dialog>` 的 `noScrollLock` 一致。默认 false。 */\n  noScrollLock?: boolean\n  /** 点击图片以外的空白区域不关闭，语义与 `<web-ui-dialog>` 的 `noBackdropClose` 一致。默认 false。 */\n  noBackdropClose?: boolean\n}\n\nexport interface ImagePreviewHandle {\n  /** 当前图片索引；关闭后仍保留最后一次的值。 */\n  readonly index: number\n  /** 当前缩放倍率，区间 [1, 4]；切换图片时重置为 1。 */\n  readonly scale: number\n  readonly images: readonly ImagePreviewItem[]\n  /** 退场过渡结束、宿主已从 DOM 移除后兑现。 */\n  readonly closed: Promise<void>\n  next(): void\n  prev(): void\n  goTo(index: number): void\n  zoomIn(): void\n  zoomOut(): void\n  resetZoom(): void\n  close(): void\n}\n\ntype ResolvedImagePreviewOptions = Required<Omit<ImagePreviewOptions, 'target' | 'container'>>\n\nconst MIN_SCALE = 1\nconst MAX_SCALE = 4\nconst ZOOM_STEP = 0.5\n// 滚轮 deltaY(px) 到缩放的指数系数；每 120px 步进约放大 27%。\nconst WHEEL_ZOOM_SENSITIVITY = 0.002\n// 判定为拖拽（平移或滑动）而非点击的最小位移。\nconst PAN_MOVE_THRESHOLD = 3\n// 滑动切图的距离阈值 = 舞台宽度 × 该比例（取整），速度阈值任一满足即切图。\n// 用户决策：阈值参考舞台宽度百分比而非固定 px（48px 在 320px 舞台 ≈ 15%），\n// 不同舞台宽度下切图手感一致（窄屏更容易、宽屏要求更长距离）。\nconst SWIPE_DISTANCE_RATIO = 0.15\nconst SWIPE_VELOCITY = 320\n// 快速轻扫兜底：真实触摸事件流可能被合并/延迟稀释（CDP 取证：40px/167ms 的轻扫被\n// 100ms 速度窗口低估到 ~115-165px/s），单靠 320px/s 会把快速轻扫误判为回弹。方向明确\n// （位移达到小距离）且速度过半阈值时仍提交；速度取「窗口速度」与「整段位移平均速度」\n// 的较大者——后者对稀释的事件流鲁棒（CDP 复现下整段平均约 240px/s）。慢拖两种速度\n// 都趋近 0，不会误提交。\nconst SWIPE_FLICK_DISTANCE = 16\nconst SWIPE_FLICK_VELOCITY = 160\n// 滑入/回位的兜底时长：正常由 transform 的 transitionend 提前收尾；jsdom、无过渡\n// （prefers-reduced-motion）等场景没有 transitionend，按该时长兜底提交。\nconst SWIPE_SETTLE_MS = 320\n\n/**\n * 图像预览的内部宿主。对外只通过 `imagePreview()` 使用，因此不导出类、\n * 不注册 `HTMLElementTagNameMap`，避免形成声明式 tag 契约。\n *\n * 内部使用原生 `<dialog>.showModal()`，与 `<web-ui-dialog>` 共享\n * `native-dialog-presence` 与 `scroll-lock` 两个底层插件，而不是复用该组件：\n * 本组件需要自身铺满视口的 dialog（backdrop 即 dialog 背景）与自有指针交互，\n * 与 dialog 组件的玻璃卡片 / 插槽契约不同源。\n */\n@customElement('web-ui-image-preview')\nclass WebUiImagePreview extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(modalSurface), unsafeCSS(style)]\n\n  @property({ attribute: false }) images: ImagePreviewItem[] = []\n  @property({ attribute: false }) loop = true\n  @property({ attribute: false }) nav = false\n  @property({ attribute: false }) toolbar = false\n  @property({ attribute: false }) closable = false\n  @property({ attribute: false }) indicator = false\n  @property({ attribute: false }) swipe = false\n  @property({ attribute: false }) noScrollLock = false\n  @property({ attribute: false }) noBackdropClose = false\n\n  @state() private _open = false\n  @state() private _index = 0\n  @state() private _scale = MIN_SCALE\n  @state() private _offsetX = 0\n  @state() private _offsetY = 0\n  /** 滑动跟手位移，只作用于左右方向；可叠加在平移位移之上。 */\n  @state() private _swipeOffset = 0\n  /** 滑入/回位过渡中：stage 挂 is-settling，启用 track transform 过渡。 */\n  @state() private _swipeSettling = false\n  @state() private _dragging = false\n\n  /** 已加载完成的图片 src 集合；每张图首次 load/error 后淡入，切换回已加载图不再闪烁。 */\n  private _loadedSources = new Set<string>()\n\n  /** 相邻图方向：1 = 下一张（位于右侧），-1 = 上一张（位于左侧）。非响应式，随 _swipeOffset 一同更新。 */\n  private _swipeDir: 1 | -1 | 0 = 0\n  /** 当前滑动手势的起始时间戳；松手时与 endInfo.timeStamp 求整段平均速度（对稀释事件流鲁棒）。 */\n  private _swipeStartTime = 0\n  private _swipeSettleCommit = false\n  private _swipeSettleDir: 1 | -1 = 1\n  private _swipeSettleTimer: ReturnType<typeof setTimeout> | undefined\n\n  private readonly _scrollLock = defineScrollLockLease().make()\n  /*\n   * 开启态 overlay（issue #120 Block 1）。预览的 Escape 原本只走原生 <dialog> 的 cancel 事件，\n   * 自己从不参与登记 —— 于是它既不是仲裁候选、又指望原生 cancel 兜底，而仲裁者一旦命中\n   * 别的层就会 preventDefault 压掉那个 cancel：与任何已登记的层同时打开时，一次 Escape\n   * 关掉的是下面那层，最上层的预览留在屏幕上。登记之后它与其它层同处一棵逻辑树。\n   *\n   * 没有惰性通道：预览没有 `no-escape-close` 这类策略，Escape 恒可关闭（与 `closable`\n   * 只管关闭 button 一样，不表达「能否关闭」）。\n   */\n  private readonly _overlay = defineOpenOverlay().make({\n    requestClose: () => this.close(),\n    isConnected: () => this.isConnected\n  })\n  private _handle: OpenOverlayHandle | null = null\n  private readonly _presence = defineNativeDialogPresence().make({\n    getDialog: () => this.dialog,\n    isConnected: () => this.isConnected,\n    isOpen: () => this._open\n  })\n\n  private _dismissed = false\n  private _gesture: DragGestureHandle | undefined\n  private _swipeGesture = false\n  private _panOriginX = 0\n  private _panOriginY = 0\n  private _dragged = false\n  private _blankPointerDown = false\n  private _pinch: PinchGestureHandle | undefined\n  /** 双指手势起始倍率，以及起始两指中点所对应的图片局部（1x）坐标。 */\n  private _pinchScale = MIN_SCALE\n  private _pinchLocalX = 0\n  private _pinchLocalY = 0\n\n  private get dialog() {\n    return this.shadowRoot?.querySelector('dialog') ?? null\n  }\n\n  private get _stage() {\n    return this.shadowRoot?.querySelector<HTMLElement>('.wui-image-preview-stage') ?? null\n  }\n\n  private get _image() {\n    return (\n      this.shadowRoot?.querySelector<HTMLImageElement>(\n        '.wui-image-preview-slide.is-current .wui-image-preview-image'\n      ) ?? null\n    )\n  }\n\n  get index(): number {\n    return this._index\n  }\n\n  get scale(): number {\n    return this._scale\n  }\n\n  configure(options: ResolvedImagePreviewOptions): void {\n    this.images = options.images\n    this.loop = options.loop\n    this.nav = options.nav\n    this.toolbar = options.toolbar\n    this.closable = options.closable\n    this.indicator = options.indicator\n    this.swipe = options.swipe\n    this.noScrollLock = options.noScrollLock\n    this.noBackdropClose = options.noBackdropClose\n    this._index = clamp(options.index, 0, Math.max(0, options.images.length - 1))\n  }\n\n  show(): void {\n    if (this._open) return\n    this._dismissed = false\n    this._open = true\n  }\n\n  close(): void {\n    if (!this._open) return\n    this._endGesture()\n    this._open = false\n  }\n\n  goTo(target: number): void {\n    const count = this.images.length\n    if (count === 0) return\n\n    const next = this.loop ? ((target % count) + count) % count : clamp(target, 0, count - 1)\n    if (next === this._index) return\n\n    this._index = next\n    this.resetZoom()\n    // track 渲染所有图：目标图若已加载直接展示（无淡入闪烁），未加载由图自身 load 淡入。\n  }\n\n  next(): void {\n    this.goTo(this._index + 1)\n  }\n\n  prev(): void {\n    this.goTo(this._index - 1)\n  }\n\n  zoomIn(): void {\n    this._setScale(this._scale + ZOOM_STEP)\n  }\n\n  zoomOut(): void {\n    this._setScale(this._scale - ZOOM_STEP)\n  }\n\n  resetZoom(): void {\n    if (this._scale === MIN_SCALE && this._offsetX === 0 && this._offsetY === 0) return\n    this._scale = MIN_SCALE\n    this._offsetX = 0\n    this._offsetY = 0\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    // 重挂载对账：断连时 presence 与滚动锁已被 dispose/release，而 `_open` 未变化时\n    // `updated()` 不会补跑任何 sync 分支。首次连接时 shadow 尚未渲染、`this.dialog`\n    // 为 null，reconcile 内部直接返回；打开态的首次进入仍由 updated() 的\n    // `props.has('_open')` 分支处理。\n    this._presence.reconcile()\n    this._syncScrollLock()\n    this._attachPinch()\n    this._reclaimIfOpen()\n  }\n\n  /*\n   * 「重挂载恢复」的调用方一半：模块刻意不观察 DOM 连接状态，所以断连撤销登记之后，\n   * 重连时仍有开启态就必须由组件重新声明。首次连接时 shadow 尚未渲染、`this.dialog`\n   * 为 null，直接跳过；打开态的首次进入仍由 updated() 的 `props.has('_open')` 分支处理。\n   */\n  private _reclaimIfOpen() {\n    if (!this._open || this._handle) return\n    const dialog = this.dialog\n    if (!dialog) return\n    this._handle = this._overlay.claim(dialog, { ancestryFrom: this })\n  }\n\n  protected override firstUpdated() {\n    this._attachPinch()\n  }\n\n  /**\n   * 双指缩放手势挂载。`firstUpdated` 整个生命周期只跑一次，而断连时会 destroy\n   * 并清空 `_pinch`，宿主被移出文档再接回后手势会永久失效——因此首连与重挂\n   * 共用本方法，重挂时补挂。\n   */\n  private _attachPinch() {\n    if (this._pinch) return\n    const stage = this._stage\n    if (!stage) return\n\n    this._pinch = attachPinchGesture(stage, {\n      onStart: this._handlePinchStart,\n      onMove: this._handlePinchMove,\n      onEnd: this._handlePinchEnd,\n      onCancel: this._handlePinchCancel\n    })\n  }\n\n  protected override updated(props: PropertyValues) {\n    super.updated(props)\n    if (!this.isConnected) return\n\n    if (props.has('_open')) {\n      this._presence.sync(this._open)\n      if (this._open) {\n        // presence.sync 内的 showModal() 把 dialog 提升进 top layer，和 dialog /\n        // drawer 走同一条路径。dialog / drawer 上实测到的机制是：双击手势留下的活选区\n        // 会被浏览器拿去和提升后的新布局重新解析，落进刚挂载的 panel 正文。脆弱的是\n        // 「手势来源的活选区」，不是 dblclick 的判定窗口（把打开推迟 250ms 仍复现）；\n        // 选区由浏览器在 showModal() 调用内部生成，脚本没有任何 Selection API 调用，\n        // 在 dblclick 上 preventDefault 也拦不住。\n        //\n        // 但**双击路径在本组件上不复现**：预览层自身是 user-select: none（见\n        // style.css），重解析拿不到可落的文本。实测 native showModal() 刚返回时\n        // 选区本就是 rangeCount === 0，既没有可见高亮，也没有残留的塌陷 range；\n        // 且这与触发目标本身无关——换成一块可选中文本 div 当触发目标，仍是 0。\n        //\n        // 真正让这一行有意义的是另一条事实：showModal() 不会动打开前就已存在的选区。\n        // 所以它清的是「先选中页面文本、再打开预览」这条路径，属防御性清理，同时让\n        // 三个组件的打开行为保持一致（dialog / drawer 上这行是真修复，本组件上是\n        // 兜底）。这里只清文档选区，不动 user-select。\n        window.getSelection()?.removeAllRanges()\n      }\n      // 原生 dialog 登记为开启态 overlay：Escape 仲裁据此判出最内层（issue #120 Block 1）。\n      const dialog = this.dialog\n      if (dialog) {\n        if (this._open) {\n          // 同一 panel 重新 claim = 新的一次开启：旧会话整体作废。\n          this._handle?.release()\n          this._handle = this._overlay.claim(dialog, { ancestryFrom: this })\n        } else {\n          this._handle?.release()\n          this._handle = null\n        }\n      }\n      // 无原生 dialog 支持或 dialog 未能打开时不会收到 close 事件，这里补齐退场结算。\n      if (!this._open && !this.dialog?.open) queueMicrotask(() => this._notifyDismissed())\n    }\n    if (props.has('_open') || props.has('noScrollLock')) this._syncScrollLock()\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    this._endGesture()\n    this._pinch?.destroy()\n    this._pinch = undefined\n    this._presence.dispose()\n    this._scrollLock.release()\n    // 断连即撤销登记：层不留在全局注册表里，重连后由 _reclaimIfOpen 显式重新声明。\n    this._handle?.release()\n    this._handle = null\n  }\n\n  private _syncScrollLock() {\n    this._scrollLock.sync(this._open && !this.noScrollLock)\n  }\n\n  private _notifyDismissed() {\n    if (this._dismissed || this._open) return\n    this._dismissed = true\n    this.dispatchEvent(new CustomEvent('preview-dismissed'))\n  }\n\n  /**\n   * 以锚点缩放：锚点是相对舞台中心的偏移，它覆盖的图片内容在缩放前后保持不动。\n   * 滚轮传光标位置，两指传两指中点，工具栏与键盘传 (0, 0)（即视口中心）。\n   */\n  private _zoomAt(next: number, anchorX: number, anchorY: number) {\n    const scale = clamp(next, MIN_SCALE, MAX_SCALE)\n    if (scale === this._scale) return\n\n    const ratio = scale / this._scale\n    this._applyScale(scale, anchorX - (anchorX - this._offsetX) * ratio, anchorY - (anchorY - this._offsetY) * ratio)\n  }\n\n  private _applyScale(scale: number, offsetX: number, offsetY: number) {\n    this._scale = scale\n    if (scale === MIN_SCALE) {\n      this._offsetX = 0\n      this._offsetY = 0\n      return\n    }\n    this._offsetX = offsetX\n    this._offsetY = offsetY\n    this._clampOffsets()\n  }\n\n  private _setScale(next: number) {\n    this._zoomAt(next, 0, 0)\n  }\n\n  /** 舞台中心的视口坐标；所有缩放锚点都以它为原点。 */\n  private _stageOrigin(): { x: number; y: number } {\n    const stage = this._stage\n    if (!stage) return { x: 0, y: 0 }\n    const rect = stage.getBoundingClientRect()\n    return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }\n  }\n\n  /**\n   * 平移边界 = 图片与舞台在缩放后「尺寸差」的一半。\n   *\n   * 图片比舞台大时它是「能露出多少边缘」，比舞台小时它是「能在视口内移动多远」——\n   * 两种情形是同一个绝对差，所以 1x 也能拖动，且图片永远拖不出视口。\n   * 图片只受 max-width/max-height 收缩（不放大），因此 offsetWidth/offsetHeight\n   * 就是绘制尺寸，不受 CSS transform 影响。\n   */\n  private _offsetBounds(): { x: number; y: number } {\n    const stage = this._stage\n    const image = this._image\n    if (!stage || !image) return { x: 0, y: 0 }\n\n    const width = image.offsetWidth\n    const height = image.offsetHeight\n    if (!width || !height) return { x: 0, y: 0 }\n\n    return {\n      x: Math.abs(width * this._scale - stage.clientWidth) / 2,\n      y: Math.abs(height * this._scale - stage.clientHeight) / 2\n    }\n  }\n\n  /** 当前是否存在位移。1x 也能平移，因此「重置缩放」是否可用不能只看倍率。 */\n  private get _isPanned() {\n    return this._offsetX !== 0 || this._offsetY !== 0\n  }\n\n  private _clampOffsets() {\n    const bounds = this._offsetBounds()\n    this._offsetX = clamp(this._offsetX, -bounds.x, bounds.x)\n    this._offsetY = clamp(this._offsetY, -bounds.y, bounds.y)\n  }\n\n  /**\n   * 空白 = dialog 本体或未被图片 / 控件覆盖的舞台区域。\n   *\n   * 只能在 pointerdown（指针捕获生效前）判定：一旦舞台通过 setPointerCapture\n   * 取得捕获，后续 click 的 target 会被重定向到舞台，用它判断会把「点图片」\n   * 误判成「点空白」而关闭 overlay。\n   */\n  private _isBlank(target: EventTarget | null): boolean {\n    return target === this.dialog || target === this._stage\n  }\n\n  private _handleImageSettled = (event: Event) => {\n    const image = event.currentTarget as HTMLImageElement | null\n    if (!image) return\n    this._markLoaded(image)\n    this.requestUpdate()\n  }\n\n  /**\n   * 登记加载完成的图片，键与 render 侧 `is-loaded` 的查询同源。\n   *\n   * 不能用 `image.src`：那是 IDL 属性，返回**相对 src 解析后的绝对 URL**，而查询用的是\n   * `this.images[i].src`（调用方原始串）。相对 src 下两者永不相等 → `is-loaded` 永不\n   * 施加 → 图片停在 `opacity: 0`，尽管 img 早已 `complete`。\n   *\n   * 所属下标由模板写在 `data-index` 上（与该 img 的 `src` 出自同一处），因此多图 /\n   * lazy 渲染下不会错位。\n   */\n  private _markLoaded(image: HTMLImageElement): void {\n    const src = this.images[Number(image.dataset.index)]?.src\n    if (src !== undefined) this._loadedSources.add(src)\n  }\n\n  /*\n   * 登记之后 Escape 由仲裁者接管（它在 capture 阶段 preventDefault，UA 因此不再派发原生\n   * cancel），但本 handler **不可删**：任何到达 dialog 的 cancel 都要 preventDefault，\n   * 把 top layer 保留到视觉退场结束，否则原生关闭会跳过退出动画。jsdom 与重挂载用例\n   * 正是直接派发 cancel 来压这条断言。\n   */\n  private _handleCancel = (event: Event) => {\n    // 保留 top layer 直到退出过渡完成，避免原生关闭跳过退出动画。\n    event.preventDefault()\n    this.close()\n  }\n\n  private _handleNativeClose = () => {\n    this._notifyDismissed()\n  }\n\n  private _handleTransitionEnd = (event: TransitionEvent) => {\n    this._presence.handleTransitionEnd(event)\n  }\n\n  private _handleKeydown = (event: KeyboardEvent) => {\n    if (!this._open || event.defaultPrevented) return\n    if (event.altKey || event.ctrlKey || event.metaKey) return\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        event.preventDefault()\n        this.prev()\n        break\n      case 'ArrowRight':\n        event.preventDefault()\n        this.next()\n        break\n      case '+':\n      case '=':\n        event.preventDefault()\n        this.zoomIn()\n        break\n      case '-':\n      case '_':\n        event.preventDefault()\n        this.zoomOut()\n        break\n      case '0':\n        event.preventDefault()\n        this.resetZoom()\n        break\n      default:\n        break\n    }\n  }\n\n  private _handleWheel = (event: WheelEvent) => {\n    if (!this._open) return\n\n    event.preventDefault()\n    // deltaMode 1 为按行滚动（Firefox），折算成像素后再套用同一系数。\n    const delta = event.deltaMode === 1 ? event.deltaY * 16 : event.deltaY\n    const origin = this._stageOrigin()\n    this._zoomAt(\n      this._scale * Math.exp(-delta * WHEEL_ZOOM_SENSITIVITY),\n      event.clientX - origin.x,\n      event.clientY - origin.y\n    )\n  }\n\n  private _handleClick = (event: MouseEvent) => {\n    if (!this._open) return\n\n    const blank = this._blankPointerDown\n    this._blankPointerDown = false\n    if (!blank) return\n\n    // detail 为 0 表示这次 click 不来自指针（键盘激活 button、程序化 .click()），\n    // 此时 pointerdown 起点可能是上一次指针交互的残留，不能据此判定 backdrop 点击。\n    if (event.detail === 0) return\n\n    // 拖拽（平移或滑动）结束后的 click 不再当作 backdrop 点击。\n    if (this._dragged) {\n      this._dragged = false\n      return\n    }\n    if (this.noBackdropClose) return\n    this.close()\n  }\n\n  private _handleDoubleClick = (event: MouseEvent) => {\n    if (!this._open || event.target !== this._image) return\n    if (this._scale > MIN_SCALE) this.resetZoom()\n    else this._setScale(MAX_SCALE / 2)\n  }\n\n  /**\n   * 双指接管时先中止可能已开始的单指平移/滑动，避免两套手势同时写 offset。\n   * 手势起点在图片上的位置被记住，缩放与两指中点位移都以它为基准。\n   */\n  private _handlePinchStart = (info: PinchStartInfo) => {\n    if (!this._open) return\n\n    this._endGesture()\n    this._dragging = true\n    // 双指操作后浏览器不会补发 click，但混合输入的兼容 click 不应被当作 backdrop 点击。\n    this._dragged = true\n\n    const origin = this._stageOrigin()\n    this._pinchScale = this._scale\n    this._pinchLocalX = (info.centerX - origin.x - this._offsetX) / this._scale\n    this._pinchLocalY = (info.centerY - origin.y - this._offsetY) / this._scale\n  }\n\n  private _handlePinchMove = (info: PinchMoveInfo) => {\n    if (!this._open) return\n\n    const scale = clamp(this._pinchScale * info.ratio, MIN_SCALE, MAX_SCALE)\n    const origin = this._stageOrigin()\n    this._applyScale(\n      scale,\n      info.centerX - origin.x - this._pinchLocalX * scale,\n      info.centerY - origin.y - this._pinchLocalY * scale\n    )\n  }\n\n  private _handlePinchEnd = () => {\n    this._dragging = false\n  }\n\n  private _handlePinchCancel = () => {\n    this._dragging = false\n  }\n\n  private _endGesture() {\n    this._gesture?.destroy()\n    this._gesture = undefined\n    this._dragging = false\n    this._cancelSwipeSettle()\n    this._swipeDir = 0\n    this._swipeOffset = 0\n  }\n\n  /** 轮播滑动的相邻图索引；loop 环绕，非 loop 越界返回 -1（表示没有可滑入的图）。 */\n  private _adjacentIndex(dir: 1 | -1): number {\n    const count = this.images.length\n    if (count === 0) return -1\n    if (this.loop) return (((this._index + dir) % count) + count) % count\n    const target = this._index + dir\n    return target >= 0 && target < count ? target : -1\n  }\n\n  /** 取消未完成的滑入/回位过渡（新手势、pointercancel、关闭等接管时）。 */\n  private _cancelSwipeSettle() {\n    if (this._swipeSettleTimer !== undefined) {\n      clearTimeout(this._swipeSettleTimer)\n      this._swipeSettleTimer = undefined\n    }\n    this._swipeSettling = false\n    this._swipeSettleCommit = false\n    this._swipeSettleDir = 1\n  }\n\n  /** 滑入/回位过渡结束：按目标提交索引切换，或复位到单图静止态。 */\n  private _finishSwipeSettle() {\n    if (this._swipeSettleTimer === undefined) return\n    clearTimeout(this._swipeSettleTimer)\n    this._swipeSettleTimer = undefined\n    const commit = this._swipeSettleCommit\n    const dir = this._swipeSettleDir\n    this._swipeSettling = false\n    this._swipeSettleCommit = false\n    this._swipeDir = 0\n    this._swipeOffset = 0\n    if (commit) this._commitSwipeTo(dir)\n  }\n\n  /** 把当前索引切换到相邻图；相邻图在滑动期间已在 DOM 中呈现，提交后直接以已加载态展示，避免重复淡入闪烁。 */\n  private _commitSwipeTo(dir: 1 | -1) {\n    const target = this._adjacentIndex(dir)\n    if (target < 0 || target === this._index) return\n    this._index = target\n    this.resetZoom()\n  }\n\n  /** 释放后的滑入/回位：把 _swipeOffset 从跟手位移过渡到目标位（越界滑入相邻图，否则回 0）。 */\n  private _settleSwipe(deltaX: number, velocityX: number, endTime: number) {\n    const dir = this._swipeDir\n    const stageW = this._stage?.clientWidth ?? 0\n    if (dir === 0 || stageW <= 0) {\n      // 无横向位移或无布局（jsdom）：直接复位。\n      this._swipeOffset = 0\n      return\n    }\n    const distanceThreshold = Math.max(1, Math.round(stageW * SWIPE_DISTANCE_RATIO))\n    // 整段位移平均速度：事件流被合并/延迟稀释时，100ms 窗口速度只采到中后段而偏低，\n    // 平均速度（整段位移 / 整段时间）对快速轻扫更鲁棒。合成事件时间戳相同/缺失时\n    // 跨度不足 2ms，视为 0（与 drag-gesture 的速度守卫一致），慢拖不会误提交。\n    const spanMs = endTime - this._swipeStartTime\n    const fullSpanVelocity = spanMs >= 2 ? (deltaX / spanMs) * 1000 : 0\n    const flickVelocity = Math.max(Math.abs(velocityX), Math.abs(fullSpanVelocity))\n    const crossed =\n      Math.abs(deltaX) >= distanceThreshold ||\n      Math.abs(velocityX) >= SWIPE_VELOCITY ||\n      (Math.abs(deltaX) >= SWIPE_FLICK_DISTANCE && flickVelocity >= SWIPE_FLICK_VELOCITY)\n    const commit = crossed && this._adjacentIndex(dir) !== -1\n    this._swipeSettling = true\n    this._swipeSettleCommit = commit\n    this._swipeSettleDir = dir\n    // 过渡目标：越过阈值 → track 再滑一个舞台宽度让相邻图入位（相邻图本就在 ±100% 处，\n    // 提交后新当前图回到 track 原点，视觉位置不变、无跳变）；否则弹回原位。\n    this._swipeOffset = commit ? -dir * stageW : 0\n    this._swipeSettleTimer = setTimeout(() => this._finishSwipeSettle(), SWIPE_SETTLE_MS)\n  }\n\n  private _handleSwipeSettleEnd = (event: TransitionEvent) => {\n    if (!this._swipeSettling || event.propertyName !== 'transform') return\n    this._finishSwipeSettle()\n  }\n\n  private _panTo(deltaX: number, deltaY: number) {\n    const bounds = this._offsetBounds()\n    this._offsetX = clamp(this._panOriginX + deltaX, -bounds.x, bounds.x)\n    this._offsetY = clamp(this._panOriginY + deltaY, -bounds.y, bounds.y)\n  }\n\n  /**\n   * 平移与左右滑动共用 `attachDragGesture`：它把指针捕获推迟到确认拖拽之后，\n   * 因此不会像立即捕获那样破坏图片自身的 click / dblclick 命中；\n   * 拖拽过程中的窗口级监听同时兜住指针移出元素甚至移出视口的情况。\n   *\n   * 拖拽默认平移且不限方向，与倍率无关：放大后是查看被裁切的边缘，1x 是在视口内\n   * 移动图片。唯一的例外是 `swipe` 独占 1x——未放大、开启 swipe 且多于一张图时，\n   * 整个拖拽归切图（横向驱动轮播、纵向 delta 完全忽略，不做任何平移）。鼠标按住\n   * 拖拽与单指拖拽走的是同一条 Pointer 路径。\n   *\n   * 监听挂在 dialog 而非舞台上：控件层里的按下不会经过舞台，挂在舞台会漏掉\n   * 这些按下而留下过期的「起于空白」标记。\n   */\n  private _handlePointerDown = (event: PointerEvent) => {\n    if (!this._open) return\n\n    // 新手势接管：中止可能未完成的滑入/回位过渡并复位轮播状态。\n    this._cancelSwipeSettle()\n    this._swipeDir = 0\n    this._swipeOffset = 0\n\n    // 只有主指针左键才可能生成 click；副指针或其它键的按下不产生 click，\n    // 若让它们覆盖标记，主指针随后释放时的 click 会拿副指针的命中结果误判 backdrop 点击。\n    const primary = event.button === 0 && event.isPrimary !== false\n    if (!primary) return\n\n    // 指针捕获会把后续 click 的 target 重定向到捕获元素，因此在按下时（捕获生效前）\n    // 记录真实命中元素，作为「是否起于空白区域」的唯一判据。\n    this._blankPointerDown = this._isBlank(event.target)\n    this._dragged = false\n\n    const stage = this._stage\n    if (!stage || (event.target !== stage && !stage.contains(event.target as Node))) return\n\n    // swipe 独占 1x：只有未放大、开启 swipe 且多于一张图时，横向拖拽才归切图；\n    // 其余情形拖拽一律平移，且不限方向（边界见 _offsetBounds）。\n    this._swipeGesture = this._scale === MIN_SCALE && this.swipe && this.images.length > 1\n    this._swipeStartTime = event.timeStamp\n    this._panOriginX = this._offsetX\n    this._panOriginY = this._offsetY\n\n    this._gesture?.destroy()\n    this._gesture = attachDragGesture(event, {\n      // 不能用 axis: 'x'：那会把以纵向为主的拖拽整体判定为「取消」，1x 下纵向就\n      // 无法平移了。这里始终按 both 追踪，让 swipe 只接管横向分量。\n      axis: 'both',\n      threshold: PAN_MOVE_THRESHOLD,\n      onMove: info => {\n        if (this._swipeGesture) {\n          // 横向跟手位移驱动 track 整体平移（单 track 轮播）；方向随拖拽符号更新，\n          // track 位移随 _swipeOffset 反转时自然换向。纵向 delta 完全忽略：\n          // 该手势独占拖拽，不驱平移、不产生纵向跟手（放大态的 pan 不受影响）。\n          this._swipeOffset = info.deltaX\n          if (info.deltaX !== 0) this._swipeDir = info.deltaX < 0 ? 1 : -1\n        } else this._panTo(info.deltaX, info.deltaY)\n      },\n      onEnd: info => {\n        this._dragged = true\n        this._dragging = false\n        if (this._swipeGesture) this._settleSwipe(info.deltaX, info.velocityX, info.timeStamp)\n      },\n      onTap: () => {\n        this._dragging = false\n      },\n      onCancel: () => {\n        this._dragging = false\n        this._cancelSwipeSettle()\n        this._swipeDir = 0\n        this._swipeOffset = 0\n      }\n    })\n    this._dragging = true\n  }\n\n  override render() {\n    const count = this.images.length\n    const zoomed = this._scale > MIN_SCALE\n    // 单 track 轮播（相邻图渲染）：track 只放当前图与左右相邻，当前图恒在 track 原点。\n    // 相邻图用绝对定位放在 ±100%（= 舞台宽度）处，与当前图同尺寸同基线；loop\n    // 环绕时首尾相邻恒在两侧，任何索引拖拽（含首尾环绕）相邻图都真实跟手，不会\n    // 出现「越过 track 末端滑空」的空白（全量渲染 track 在 last→first 环绕时相邻图在\n    // 远端，拖拽中间态必然空白）。\n    // track 整体随 _swipeOffset 平移：松手越过阈值再滑一个舞台宽度让相邻图入位，\n    // 否则弹回原点。图片自身只负责平移/缩放（swipe 只动 track、不碰图片 transform，\n    // 缩放锚点数学不变）。\n    const prevIndex = count > 0 ? this._adjacentIndex(-1) : -1\n    const nextIndex = count > 0 ? this._adjacentIndex(1) : -1\n    const trackTransform = `translate3d(${this._swipeOffset}px, 0, 0)`\n    // 缩放/平移只作用于当前图的 img：相邻 slide 永远 1x（scale(1)），放大态连纵向 pan\n    // 也不跟随（pan 只动当前图），避免放大后相邻图被带大/带进视口「穿过来」。\n    // 1x 非 swipe 的平移路径仍可纵向拖拽，相邻图共享 offsetY 保持行内对齐；swipe 生效\n    // 期间纵向 delta 被忽略（offsetY 恒 0），相邻图同样不产生纵向跟手。\n    const imageTransform = `translate3d(${this._offsetX}px, ${this._offsetY}px, 0) scale(${this._scale})`\n    const neighborTransform = zoomed\n      ? 'translate3d(0, 0, 0) scale(1)'\n      : `translate3d(0, ${this._offsetY}px, 0) scale(1)`\n\n    return html`\n      <dialog\n        aria-label=\"Image preview\"\n        @cancel=${this._handleCancel}\n        @close=${this._handleNativeClose}\n        @pointerdown=${this._handlePointerDown}\n        @click=${this._handleClick}\n        @dblclick=${this._handleDoubleClick}\n        @keydown=${this._handleKeydown}\n        @wheel=${this._handleWheel}\n        @transitionend=${this._handleTransitionEnd}\n      >\n        <div class=\"wui-image-preview-backdrop\" aria-hidden=\"true\"></div>\n        <div class=\"wui-image-preview-content\">\n          <div class=\"wui-image-preview-surface\">\n            <div\n              class=${classMap({\n                'wui-image-preview-stage': true,\n                'is-zoomed': zoomed,\n                'is-dragging': this._dragging,\n                'is-settling': this._swipeSettling\n              })}\n            >\n              <div\n                class=\"wui-image-preview-track\"\n                style=${styleMap({ transform: trackTransform })}\n                @transitionend=${this._handleSwipeSettleEnd}\n              >\n                ${\n                  prevIndex >= 0\n                    ? html`\n                        <div class=\"wui-image-preview-slide is-prev\" aria-hidden=\"true\">\n                          <img\n                            class=${classMap({\n                              'wui-image-preview-image': true,\n                              'is-loaded': this._loadedSources.has(this.images[prevIndex].src)\n                            })}\n                            data-index=${prevIndex}\n                            src=${this.images[prevIndex].src}\n                            alt=${this.images[prevIndex].alt ?? ''}\n                            draggable=\"false\"\n                            style=${styleMap({ transform: neighborTransform })}\n                            @load=${this._handleImageSettled}\n                            @error=${this._handleImageSettled}\n                          />\n                        </div>\n                      `\n                    : nothing\n                }\n                ${\n                  count > 0\n                    ? html`\n                        <div class=\"wui-image-preview-slide is-current\">\n                          <img\n                            class=${classMap({\n                              'wui-image-preview-image': true,\n                              'is-loaded': this._loadedSources.has(this.images[this._index].src)\n                            })}\n                            data-index=${this._index}\n                            src=${this.images[this._index].src}\n                            alt=${this.images[this._index].alt ?? ''}\n                            draggable=\"false\"\n                            style=${styleMap({ transform: imageTransform })}\n                            @load=${this._handleImageSettled}\n                            @error=${this._handleImageSettled}\n                          />\n                        </div>\n                      `\n                    : nothing\n                }\n                ${\n                  nextIndex >= 0\n                    ? html`\n                        <div class=\"wui-image-preview-slide is-next\" aria-hidden=\"true\">\n                          <img\n                            class=${classMap({\n                              'wui-image-preview-image': true,\n                              'is-loaded': this._loadedSources.has(this.images[nextIndex].src)\n                            })}\n                            data-index=${nextIndex}\n                            src=${this.images[nextIndex].src}\n                            alt=${this.images[nextIndex].alt ?? ''}\n                            draggable=\"false\"\n                            style=${styleMap({ transform: neighborTransform })}\n                            @load=${this._handleImageSettled}\n                            @error=${this._handleImageSettled}\n                          />\n                        </div>\n                      `\n                    : nothing\n                }\n              </div>\n            </div>\n          </div>\n          <div class=\"wui-image-preview-controls\">\n            ${\n              this.indicator\n                ? html`<span class=\"wui-image-preview-counter wui-glass\" aria-live=\"polite\"\n                    >${this._index + 1} / ${count}</span\n                  >`\n                : nothing\n            }\n            ${\n              this.closable\n                ? html`\n                    <web-ui-button\n                      class=\"wui-image-preview-close\"\n                      variant=\"glass\"\n                      icon\n                      size=\"36\"\n                      aria-label=\"Close\"\n                      @click=${this.close}\n                    >\n                      <web-ui-icon size=\"16\" .icon=${oouiClose}></web-ui-icon>\n                    </web-ui-button>\n                  `\n                : nothing\n            }\n            ${\n              this.nav && count > 1\n                ? html`\n                    <web-ui-button\n                      class=\"wui-image-preview-nav wui-image-preview-nav-prev\"\n                      variant=\"glass\"\n                      icon\n                      size=\"44\"\n                      aria-label=\"Previous image\"\n                      ?disabled=${!this.loop && this._index === 0}\n                      @click=${this.prev}\n                    >\n                      <web-ui-icon size=\"20\" .icon=${lucideChevronLeft}></web-ui-icon>\n                    </web-ui-button>\n                    <web-ui-button\n                      class=\"wui-image-preview-nav wui-image-preview-nav-next\"\n                      variant=\"glass\"\n                      icon\n                      size=\"44\"\n                      aria-label=\"Next image\"\n                      ?disabled=${!this.loop && this._index === count - 1}\n                      @click=${this.next}\n                    >\n                      <web-ui-icon size=\"20\" .icon=${lucideChevronRight}></web-ui-icon>\n                    </web-ui-button>\n                  `\n                : nothing\n            }\n            ${\n              this.toolbar\n                ? html`\n                    <div class=\"wui-image-preview-toolbar wui-glass\">\n                      <web-ui-button\n                        variant=\"glass\"\n                        icon\n                        size=\"30\"\n                        aria-label=\"Zoom out\"\n                        ?disabled=${this._scale <= MIN_SCALE}\n                        @click=${this.zoomOut}\n                      >\n                        <web-ui-icon size=\"16\" .icon=${lucideMinus}></web-ui-icon>\n                      </web-ui-button>\n                      <span class=\"wui-image-preview-scale\">${Math.round(this._scale * 100)}%</span>\n                      <web-ui-button\n                        variant=\"glass\"\n                        icon\n                        size=\"30\"\n                        aria-label=\"Zoom in\"\n                        ?disabled=${this._scale >= MAX_SCALE}\n                        @click=${this.zoomIn}\n                      >\n                        <web-ui-icon size=\"16\" .icon=${lucidePlus}></web-ui-icon>\n                      </web-ui-button>\n                      <web-ui-button\n                        variant=\"glass\"\n                        icon\n                        size=\"30\"\n                        aria-label=\"Reset zoom\"\n                        ?disabled=${this._scale <= MIN_SCALE && !this._isPanned}\n                        @click=${this.resetZoom}\n                      >\n                        <web-ui-icon size=\"16\" .icon=${radixIconsReset}></web-ui-icon>\n                      </web-ui-button>\n                    </div>\n                  `\n                : nothing\n            }\n          </div>\n        </div>\n      </dialog>\n    `\n  }\n}\n\n/**\n * 打开一个命令式 image preview。\n *\n * 组件挂载到目标 `web-ui-theme` 的 overlay 容器（无主题作用域时回退到全局\n * fallback root），返回的 handle 是唯一的控制入口。所有展示类 option 默认关闭，\n * 默认只渲染图片本身。\n */\nexport function imagePreview(options: ImagePreviewOptions): ImagePreviewHandle {\n  const images = (options.images ?? []).map(item => ({ src: item.src, alt: item.alt ?? '' }))\n  if (images.length === 0) {\n    throw new Error('[web-ui-image-preview] imagePreview requires at least one image')\n  }\n\n  const theme = options.target ? findNearestTheme(options.target) : findRootTheme()\n  const container = options.container ?? theme?.getOverlayRoot() ?? getFallbackOverlayRoot()\n\n  const element = document.createElement('web-ui-image-preview') as WebUiImagePreview\n  element.configure({\n    images,\n    index: options.index ?? 0,\n    loop: options.loop ?? true,\n    nav: options.nav ?? false,\n    toolbar: options.toolbar ?? false,\n    closable: options.closable ?? false,\n    indicator: options.indicator ?? false,\n    swipe: options.swipe ?? false,\n    noScrollLock: options.noScrollLock ?? false,\n    noBackdropClose: options.noBackdropClose ?? false\n  })\n\n  let settle: (() => void) | undefined\n  const closed = new Promise<void>(resolve => {\n    settle = resolve\n  })\n\n  element.addEventListener(\n    'preview-dismissed',\n    () => {\n      element.remove()\n      settle?.()\n      settle = undefined\n    },\n    { once: true }\n  )\n\n  container.appendChild(element)\n  element.show()\n\n  return {\n    get index() {\n      return element.index\n    },\n    get scale() {\n      return element.scale\n    },\n    get images() {\n      return element.images\n    },\n    get closed() {\n      return closed\n    },\n    next: () => element.next(),\n    prev: () => element.prev(),\n    goTo: (index: number) => element.goTo(index),\n    zoomIn: () => element.zoomIn(),\n    zoomOut: () => element.zoomOut(),\n    resetZoom: () => element.resetZoom(),\n    close: () => element.close()\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/image-preview/index.ts"],"sourcesContent":["import '@/components/button'\nimport '@/components/icon'\n\nimport { html, LitElement, nothing, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { styleMap } from 'lit/directives/style-map.js'\n\nimport modalSurface from '@/assets/modal-surface.css?inline'\nimport glass from '@/classes/glass.css?inline'\nimport { lucideChevronLeft, lucideChevronRight, lucideMinus, lucidePlus, oouiClose, radixIconsReset } from '@/icons'\nimport { attachDragGesture, type DragGestureHandle } from '@/shared/gesture/drag-gesture'\nimport { clamp } from '@/shared/gesture/physics'\nimport {\n  attachPinchGesture,\n  type PinchGestureHandle,\n  type PinchMoveInfo,\n  type PinchStartInfo\n} from '@/shared/gesture/pinch-gesture'\nimport { defineNativeDialogPresence } from '@/shared/overlay/native-dialog-presence'\nimport { defineOpenOverlay, type OpenOverlayHandle } from '@/shared/overlay/open-overlay'\nimport { getFallbackOverlayRoot } from '@/shared/overlay/overlay-root'\nimport { findNearestTheme, findRootTheme } from '@/shared/overlay/theme-overlay-scope'\nimport { defineScrollLockLease } from '@/shared/scroll-lock/scroll-lock'\n\nimport style from './style.css?inline'\n\nexport interface ImagePreviewItem {\n  src: string\n  /** 无障碍替代文本；也用于图片加载失败时的回退展示。 */\n  alt?: string\n}\n\nexport interface ImagePreviewOptions {\n  images: ImagePreviewItem[]\n  /** 初始图片索引，越界时钳制到有效区间。默认 0。 */\n  index?: number\n  /** 首尾循环切换。默认 true。 */\n  loop?: boolean\n  /** 用于解析最近 web-ui-theme 作用域的触发元素。 */\n  target?: Element\n  /** 显式挂载容器，优先级高于 target 和主题作用域。 */\n  container?: HTMLElement\n  /** 展示上一张 / 下一张 button；仅在图片多于一张时渲染。默认 false。 */\n  nav?: boolean\n  /** 展示缩放工具条。默认 false。 */\n  toolbar?: boolean\n  /** 展示关闭 button。默认 false。 */\n  closable?: boolean\n  /** 展示「当前 / 总数」indicator。默认 false。 */\n  indicator?: boolean\n  /**\n   * 1x 且图片多于一张时，允许左右滑动切换图片：该手势接管整个拖拽，纵向位移被忽略\n   * （不驱平移、不跟手），横向用于切图。放大后拖拽一律平移（纵横都跟）、不再切图。\n   * 默认 false。\n   */\n  swipe?: boolean\n  /** 打开期间不锁定页面滚动，语义与 `<web-ui-dialog>` 的 `noScrollLock` 一致。默认 false。 */\n  noScrollLock?: boolean\n  /** 点击图片以外的空白区域不关闭，语义与 `<web-ui-dialog>` 的 `noBackdropClose` 一致。默认 false。 */\n  noBackdropClose?: boolean\n}\n\nexport interface ImagePreviewHandle {\n  /** 当前图片索引；关闭后仍保留最后一次的值。 */\n  readonly index: number\n  /** 当前缩放倍率，区间 [1, 4]；切换图片时重置为 1。 */\n  readonly scale: number\n  readonly images: readonly ImagePreviewItem[]\n  /** 退场过渡结束、宿主已从 DOM 移除后兑现。 */\n  readonly closed: Promise<void>\n  next(): void\n  prev(): void\n  goTo(index: number): void\n  zoomIn(): void\n  zoomOut(): void\n  resetZoom(): void\n  close(): void\n}\n\ntype ResolvedImagePreviewOptions = Required<Omit<ImagePreviewOptions, 'target' | 'container'>>\n\nconst MIN_SCALE = 1\nconst MAX_SCALE = 4\nconst ZOOM_STEP = 0.5\n// 滚轮 deltaY(px) 到缩放的指数系数；每 120px 步进约放大 27%。\nconst WHEEL_ZOOM_SENSITIVITY = 0.002\n// 判定为拖拽（平移或滑动）而非点击的最小位移。\nconst PAN_MOVE_THRESHOLD = 3\n// 滑动切图的距离阈值 = 舞台宽度 × 该比例（取整），速度阈值任一满足即切图。\n// 用户决策：阈值参考舞台宽度百分比而非固定 px（48px 在 320px 舞台 ≈ 15%），\n// 不同舞台宽度下切图手感一致（窄屏更容易、宽屏要求更长距离）。\nconst SWIPE_DISTANCE_RATIO = 0.15\nconst SWIPE_VELOCITY = 320\n// 快速轻扫兜底：真实触摸事件流可能被合并/延迟稀释（CDP 取证：40px/167ms 的轻扫被\n// 100ms 速度窗口低估到 ~115-165px/s），单靠 320px/s 会把快速轻扫误判为回弹。方向明确\n// （位移达到小距离）且速度过半阈值时仍提交；速度取「窗口速度」与「整段位移平均速度」\n// 的较大者——后者对稀释的事件流鲁棒（CDP 复现下整段平均约 240px/s）。慢拖两种速度\n// 都趋近 0，不会误提交。\nconst SWIPE_FLICK_DISTANCE = 16\nconst SWIPE_FLICK_VELOCITY = 160\n// 滑入/回位的兜底时长：正常由 transform 的 transitionend 提前收尾；jsdom、无过渡\n// （prefers-reduced-motion）等场景没有 transitionend，按该时长兜底提交。\nconst SWIPE_SETTLE_MS = 320\n\n/**\n * 图像预览的内部宿主。对外只通过 `imagePreview()` 使用，因此不导出类、\n * 不注册 `HTMLElementTagNameMap`，避免形成声明式 tag 契约。\n *\n * 内部使用原生 `<dialog>.showModal()`，与 `<web-ui-dialog>` 共享\n * `native-dialog-presence` 与 `scroll-lock` 两个底层插件，而不是复用该组件：\n * 本组件需要自身铺满视口的 dialog（backdrop 即 dialog 背景）与自有指针交互，\n * 与 dialog 组件的玻璃卡片 / 插槽契约不同源。\n */\n@customElement('web-ui-image-preview')\nclass WebUiImagePreview extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(modalSurface), unsafeCSS(style)]\n\n  @property({ attribute: false }) images: ImagePreviewItem[] = []\n  @property({ attribute: false }) loop = true\n  @property({ attribute: false }) nav = false\n  @property({ attribute: false }) toolbar = false\n  @property({ attribute: false }) closable = false\n  @property({ attribute: false }) indicator = false\n  @property({ attribute: false }) swipe = false\n  @property({ attribute: false }) noScrollLock = false\n  @property({ attribute: false }) noBackdropClose = false\n\n  @state() private _open = false\n  @state() private _index = 0\n  @state() private _scale = MIN_SCALE\n  @state() private _offsetX = 0\n  @state() private _offsetY = 0\n  /** 滑动跟手位移，只作用于左右方向；可叠加在平移位移之上。 */\n  @state() private _swipeOffset = 0\n  /** 滑入/回位过渡中：stage 挂 is-settling，启用 track transform 过渡。 */\n  @state() private _swipeSettling = false\n  @state() private _dragging = false\n\n  /** 已加载完成的图片 src 集合；每张图首次 load/error 后淡入，切换回已加载图不再闪烁。 */\n  private _loadedSources = new Set<string>()\n\n  /** 相邻图方向：1 = 下一张（位于右侧），-1 = 上一张（位于左侧）。非响应式，随 _swipeOffset 一同更新。 */\n  private _swipeDir: 1 | -1 | 0 = 0\n  /** 当前滑动手势的起始时间戳；松手时与 endInfo.timeStamp 求整段平均速度（对稀释事件流鲁棒）。 */\n  private _swipeStartTime = 0\n  private _swipeSettleCommit = false\n  private _swipeSettleDir: 1 | -1 = 1\n  private _swipeSettleTimer: ReturnType<typeof setTimeout> | undefined\n\n  private readonly _scrollLock = defineScrollLockLease().make()\n  /*\n   * 开启态 overlay（issue #120 Block 1）。预览的 Escape 原本只走原生 <dialog> 的 cancel 事件，\n   * 自己从不参与登记 —— 于是它既不是仲裁候选、又指望原生 cancel 兜底，而仲裁者一旦命中\n   * 别的层就会 preventDefault 压掉那个 cancel：与任何已登记的层同时打开时，一次 Escape\n   * 关掉的是下面那层，最上层的预览留在屏幕上。登记之后它与其它层同处一棵逻辑树。\n   *\n   * 没有惰性通道：预览没有 `no-escape-close` 这类策略，Escape 恒可关闭（与 `closable`\n   * 只管关闭 button 一样，不表达「能否关闭」）。\n   */\n  private readonly _overlay = defineOpenOverlay().make({\n    requestClose: () => this.close(),\n    isConnected: () => this.isConnected\n  })\n  private _handle: OpenOverlayHandle | null = null\n  private readonly _presence = defineNativeDialogPresence().make({\n    getDialog: () => this.dialog,\n    isConnected: () => this.isConnected,\n    isOpen: () => this._open\n  })\n\n  private _dismissed = false\n  private _gesture: DragGestureHandle | undefined\n  private _swipeGesture = false\n  private _panOriginX = 0\n  private _panOriginY = 0\n  private _dragged = false\n  private _blankPointerDown = false\n  private _pinch: PinchGestureHandle | undefined\n  /** 双指手势起始倍率，以及起始两指中点所对应的图片局部（1x）坐标。 */\n  private _pinchScale = MIN_SCALE\n  private _pinchLocalX = 0\n  private _pinchLocalY = 0\n\n  private get dialog() {\n    return this.shadowRoot?.querySelector('dialog') ?? null\n  }\n\n  private get _stage() {\n    return this.shadowRoot?.querySelector<HTMLElement>('.wui-image-preview-stage') ?? null\n  }\n\n  private get _image() {\n    return (\n      this.shadowRoot?.querySelector<HTMLImageElement>(\n        '.wui-image-preview-slide.is-current .wui-image-preview-image'\n      ) ?? null\n    )\n  }\n\n  get index(): number {\n    return this._index\n  }\n\n  get scale(): number {\n    return this._scale\n  }\n\n  configure(options: ResolvedImagePreviewOptions): void {\n    this.images = options.images\n    this.loop = options.loop\n    this.nav = options.nav\n    this.toolbar = options.toolbar\n    this.closable = options.closable\n    this.indicator = options.indicator\n    this.swipe = options.swipe\n    this.noScrollLock = options.noScrollLock\n    this.noBackdropClose = options.noBackdropClose\n    this._index = clamp(options.index, 0, Math.max(0, options.images.length - 1))\n  }\n\n  show(): void {\n    if (this._open) return\n    this._dismissed = false\n    this._open = true\n  }\n\n  close(): void {\n    if (!this._open) return\n    this._endGesture()\n    this._open = false\n  }\n\n  goTo(target: number): void {\n    const count = this.images.length\n    if (count === 0) return\n\n    const next = this.loop ? ((target % count) + count) % count : clamp(target, 0, count - 1)\n    if (next === this._index) return\n\n    this._index = next\n    this.resetZoom()\n    // track 渲染所有图：目标图若已加载直接展示（无淡入闪烁），未加载由图自身 load 淡入。\n  }\n\n  next(): void {\n    this.goTo(this._index + 1)\n  }\n\n  prev(): void {\n    this.goTo(this._index - 1)\n  }\n\n  zoomIn(): void {\n    this._setScale(this._scale + ZOOM_STEP)\n  }\n\n  zoomOut(): void {\n    this._setScale(this._scale - ZOOM_STEP)\n  }\n\n  resetZoom(): void {\n    if (this._scale === MIN_SCALE && this._offsetX === 0 && this._offsetY === 0) return\n    this._scale = MIN_SCALE\n    this._offsetX = 0\n    this._offsetY = 0\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    // 重挂载对账：断连时 presence 与滚动锁已被 dispose/release，而 `_open` 未变化时\n    // `updated()` 不会补跑任何 sync 分支。首次连接时 shadow 尚未渲染、`this.dialog`\n    // 为 null，reconcile 内部直接返回；打开态的首次进入仍由 updated() 的\n    // `props.has('_open')` 分支处理。\n    this._presence.reconcile()\n    this._syncScrollLock()\n    this._attachPinch()\n    this._reclaimIfOpen()\n  }\n\n  /*\n   * 「重挂载恢复」的调用方一半：模块刻意不观察 DOM 连接状态，所以断连撤销登记之后，\n   * 重连时仍有开启态就必须由组件重新声明。首次连接时 shadow 尚未渲染、`this.dialog`\n   * 为 null，直接跳过；打开态的首次进入仍由 updated() 的 `props.has('_open')` 分支处理。\n   */\n  private _reclaimIfOpen() {\n    if (!this._open || this._handle) return\n    const dialog = this.dialog\n    if (!dialog) return\n    this._handle = this._overlay.claim(dialog, { ancestryFrom: this })\n  }\n\n  protected override firstUpdated() {\n    this._attachPinch()\n  }\n\n  /**\n   * 双指缩放手势挂载。`firstUpdated` 整个生命周期只跑一次，而断连时会 destroy\n   * 并清空 `_pinch`，宿主被移出文档再接回后手势会永久失效——因此首连与重挂\n   * 共用本方法，重挂时补挂。\n   */\n  private _attachPinch() {\n    if (this._pinch) return\n    const stage = this._stage\n    if (!stage) return\n\n    this._pinch = attachPinchGesture(stage, {\n      onStart: this._handlePinchStart,\n      onMove: this._handlePinchMove,\n      onEnd: this._handlePinchEnd,\n      onCancel: this._handlePinchCancel\n    })\n  }\n\n  protected override updated(props: PropertyValues) {\n    super.updated(props)\n    if (!this.isConnected) return\n\n    if (props.has('_open')) {\n      this._presence.sync(this._open)\n      if (this._open) {\n        // presence.sync 内的 showModal() 把 dialog 提升进 top layer，和 dialog /\n        // drawer 走同一条路径。dialog / drawer 上实测到的机制是：双击手势留下的活选区\n        // 会被浏览器拿去和提升后的新布局重新解析，落进刚挂载的 panel 正文。脆弱的是\n        // 「手势来源的活选区」，不是 dblclick 的判定窗口（把打开推迟 250ms 仍复现）；\n        // 选区由浏览器在 showModal() 调用内部生成，脚本没有任何 Selection API 调用，\n        // 在 dblclick 上 preventDefault 也拦不住。\n        //\n        // 但**双击路径在本组件上不复现**：预览层自身是 user-select: none（见\n        // style.css），重解析拿不到可落的文本。实测 native showModal() 刚返回时\n        // 选区本就是 rangeCount === 0，既没有可见高亮，也没有残留的塌陷 range；\n        // 且这与触发目标本身无关——换成一块可选中文本 div 当触发目标，仍是 0。\n        //\n        // 真正让这一行有意义的是另一条事实：showModal() 不会动打开前就已存在的选区。\n        // 所以它清的是「先选中页面文本、再打开预览」这条路径，属防御性清理，同时让\n        // 三个组件的打开行为保持一致（dialog / drawer 上这行是真修复，本组件上是\n        // 兜底）。这里只清文档选区，不动 user-select。\n        window.getSelection()?.removeAllRanges()\n      }\n      // 原生 dialog 登记为开启态 overlay：Escape 仲裁据此判出最内层（issue #120 Block 1）。\n      const dialog = this.dialog\n      if (dialog) {\n        if (this._open) {\n          // 同一 panel 重新 claim = 新的一次开启：旧会话整体作废。\n          this._handle?.release()\n          this._handle = this._overlay.claim(dialog, { ancestryFrom: this })\n        } else {\n          this._handle?.release()\n          this._handle = null\n        }\n      }\n      // 无原生 dialog 支持或 dialog 未能打开时不会收到 close 事件，这里补齐退场结算。\n      if (!this._open && !this.dialog?.open) queueMicrotask(() => this._notifyDismissed())\n    }\n    if (props.has('_open') || props.has('noScrollLock')) this._syncScrollLock()\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    this._endGesture()\n    this._pinch?.destroy()\n    this._pinch = undefined\n    this._presence.dispose()\n    this._scrollLock.release()\n    // 断连即撤销登记：层不留在全局注册表里，重连后由 _reclaimIfOpen 显式重新声明。\n    this._handle?.release()\n    this._handle = null\n  }\n\n  private _syncScrollLock() {\n    this._scrollLock.sync(this._open && !this.noScrollLock)\n  }\n\n  private _notifyDismissed() {\n    if (this._dismissed || this._open) return\n    this._dismissed = true\n    this.dispatchEvent(new CustomEvent('preview-dismissed'))\n  }\n\n  /**\n   * 以锚点缩放：锚点是相对舞台中心的偏移，它覆盖的图片内容在缩放前后保持不动。\n   * 滚轮传光标位置，两指传两指中点，工具栏与键盘传 (0, 0)（即视口中心）。\n   */\n  private _zoomAt(next: number, anchorX: number, anchorY: number) {\n    const scale = clamp(next, MIN_SCALE, MAX_SCALE)\n    if (scale === this._scale) return\n\n    const ratio = scale / this._scale\n    this._applyScale(scale, anchorX - (anchorX - this._offsetX) * ratio, anchorY - (anchorY - this._offsetY) * ratio)\n  }\n\n  private _applyScale(scale: number, offsetX: number, offsetY: number) {\n    this._scale = scale\n    if (scale === MIN_SCALE) {\n      this._offsetX = 0\n      this._offsetY = 0\n      return\n    }\n    this._offsetX = offsetX\n    this._offsetY = offsetY\n    this._clampOffsets()\n  }\n\n  private _setScale(next: number) {\n    this._zoomAt(next, 0, 0)\n  }\n\n  /** 舞台中心的视口坐标；所有缩放锚点都以它为原点。 */\n  private _stageOrigin(): { x: number; y: number } {\n    const stage = this._stage\n    if (!stage) return { x: 0, y: 0 }\n    const rect = stage.getBoundingClientRect()\n    return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }\n  }\n\n  /**\n   * 平移边界 = 图片与舞台在缩放后「尺寸差」的一半。\n   *\n   * 图片比舞台大时它是「能露出多少边缘」，比舞台小时它是「能在视口内移动多远」——\n   * 两种情形是同一个绝对差，所以 1x 也能拖动，且图片永远拖不出视口。\n   * 图片只受 max-width/max-height 收缩（不放大），因此 offsetWidth/offsetHeight\n   * 就是绘制尺寸，不受 CSS transform 影响。\n   */\n  private _offsetBounds(): { x: number; y: number } {\n    const stage = this._stage\n    const image = this._image\n    if (!stage || !image) return { x: 0, y: 0 }\n\n    const width = image.offsetWidth\n    const height = image.offsetHeight\n    if (!width || !height) return { x: 0, y: 0 }\n\n    return {\n      x: Math.abs(width * this._scale - stage.clientWidth) / 2,\n      y: Math.abs(height * this._scale - stage.clientHeight) / 2\n    }\n  }\n\n  /** 当前是否存在位移。1x 也能平移，因此「重置缩放」是否可用不能只看倍率。 */\n  private get _isPanned() {\n    return this._offsetX !== 0 || this._offsetY !== 0\n  }\n\n  private _clampOffsets() {\n    const bounds = this._offsetBounds()\n    this._offsetX = clamp(this._offsetX, -bounds.x, bounds.x)\n    this._offsetY = clamp(this._offsetY, -bounds.y, bounds.y)\n  }\n\n  /**\n   * 空白 = dialog 本体或未被图片 / 控件覆盖的舞台区域。\n   *\n   * 只能在 pointerdown（指针捕获生效前）判定：一旦舞台通过 setPointerCapture\n   * 取得捕获，后续 click 的 target 会被重定向到舞台，用它判断会把「点图片」\n   * 误判成「点空白」而关闭 overlay。\n   */\n  private _isBlank(target: EventTarget | null): boolean {\n    return target === this.dialog || target === this._stage\n  }\n\n  private _handleImageSettled = (event: Event) => {\n    const image = event.currentTarget as HTMLImageElement | null\n    if (!image) return\n    this._markLoaded(image)\n    this.requestUpdate()\n  }\n\n  /**\n   * 登记加载完成的图片，键与 render 侧 `is-loaded` 的查询同源。\n   *\n   * 不能用 `image.src`：那是 IDL 属性，返回**相对 src 解析后的绝对 URL**，而查询用的是\n   * `this.images[i].src`（调用方原始串）。相对 src 下两者永不相等 → `is-loaded` 永不\n   * 施加 → 图片停在 `opacity: 0`，尽管 img 早已 `complete`。\n   *\n   * 所属下标由模板写在 `data-index` 上（与该 img 的 `src` 出自同一处），因此多图 /\n   * lazy 渲染下不会错位。\n   */\n  private _markLoaded(image: HTMLImageElement): void {\n    const src = this.images[Number(image.dataset.index)]?.src\n    if (src !== undefined) this._loadedSources.add(src)\n  }\n\n  /*\n   * 登记之后 Escape 由仲裁者接管（它在 capture 阶段 preventDefault，UA 因此不再派发原生\n   * cancel），但本 handler **不可删**：任何到达 dialog 的 cancel 都要 preventDefault，\n   * 把 top layer 保留到视觉退场结束，否则原生关闭会跳过退出动画。jsdom 与重挂载用例\n   * 正是直接派发 cancel 来压这条断言。\n   */\n  private _handleCancel = (event: Event) => {\n    // 保留 top layer 直到退出过渡完成，避免原生关闭跳过退出动画。\n    event.preventDefault()\n    this.close()\n  }\n\n  private _handleNativeClose = () => {\n    this._notifyDismissed()\n  }\n\n  private _handleTransitionEnd = (event: TransitionEvent) => {\n    this._presence.handleTransitionEnd(event)\n  }\n\n  private _handleKeydown = (event: KeyboardEvent) => {\n    if (!this._open || event.defaultPrevented) return\n    if (event.altKey || event.ctrlKey || event.metaKey) return\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        event.preventDefault()\n        this.prev()\n        break\n      case 'ArrowRight':\n        event.preventDefault()\n        this.next()\n        break\n      case '+':\n      case '=':\n        event.preventDefault()\n        this.zoomIn()\n        break\n      case '-':\n      case '_':\n        event.preventDefault()\n        this.zoomOut()\n        break\n      case '0':\n        event.preventDefault()\n        this.resetZoom()\n        break\n      default:\n        break\n    }\n  }\n\n  private _handleWheel = (event: WheelEvent) => {\n    if (!this._open) return\n\n    event.preventDefault()\n    // deltaMode 1 为按行滚动（Firefox），折算成像素后再套用同一系数。\n    const delta = event.deltaMode === 1 ? event.deltaY * 16 : event.deltaY\n    const origin = this._stageOrigin()\n    this._zoomAt(\n      this._scale * Math.exp(-delta * WHEEL_ZOOM_SENSITIVITY),\n      event.clientX - origin.x,\n      event.clientY - origin.y\n    )\n  }\n\n  private _handleClick = (event: MouseEvent) => {\n    if (!this._open) return\n\n    const blank = this._blankPointerDown\n    this._blankPointerDown = false\n    if (!blank) return\n\n    // detail 为 0 表示这次 click 不来自指针（键盘激活 button、程序化 .click()），\n    // 此时 pointerdown 起点可能是上一次指针交互的残留，不能据此判定 backdrop 点击。\n    if (event.detail === 0) return\n\n    // 拖拽（平移或滑动）结束后的 click 不再当作 backdrop 点击。\n    if (this._dragged) {\n      this._dragged = false\n      return\n    }\n    if (this.noBackdropClose) return\n    this.close()\n  }\n\n  private _handleDoubleClick = (event: MouseEvent) => {\n    if (!this._open || event.target !== this._image) return\n    if (this._scale > MIN_SCALE) this.resetZoom()\n    else this._setScale(MAX_SCALE / 2)\n  }\n\n  /**\n   * 双指接管时先中止可能已开始的单指平移/滑动，避免两套手势同时写 offset。\n   * 手势起点在图片上的位置被记住，缩放与两指中点位移都以它为基准。\n   */\n  private _handlePinchStart = (info: PinchStartInfo) => {\n    if (!this._open) return\n\n    this._endGesture()\n    this._dragging = true\n    // 双指操作后浏览器不会补发 click，但混合输入的兼容 click 不应被当作 backdrop 点击。\n    this._dragged = true\n\n    const origin = this._stageOrigin()\n    this._pinchScale = this._scale\n    this._pinchLocalX = (info.centerX - origin.x - this._offsetX) / this._scale\n    this._pinchLocalY = (info.centerY - origin.y - this._offsetY) / this._scale\n  }\n\n  private _handlePinchMove = (info: PinchMoveInfo) => {\n    if (!this._open) return\n\n    const scale = clamp(this._pinchScale * info.ratio, MIN_SCALE, MAX_SCALE)\n    const origin = this._stageOrigin()\n    this._applyScale(\n      scale,\n      info.centerX - origin.x - this._pinchLocalX * scale,\n      info.centerY - origin.y - this._pinchLocalY * scale\n    )\n  }\n\n  private _handlePinchEnd = () => {\n    this._dragging = false\n  }\n\n  private _handlePinchCancel = () => {\n    this._dragging = false\n  }\n\n  private _endGesture() {\n    this._gesture?.destroy()\n    this._gesture = undefined\n    this._dragging = false\n    this._cancelSwipeSettle()\n    this._swipeDir = 0\n    this._swipeOffset = 0\n  }\n\n  /** 轮播滑动的相邻图索引；单图没有相邻图，多图 loop 环绕，非 loop 越界返回 -1。 */\n  private _adjacentIndex(dir: 1 | -1): number {\n    const count = this.images.length\n    if (count <= 1) return -1\n    if (this.loop) return (((this._index + dir) % count) + count) % count\n    const target = this._index + dir\n    return target >= 0 && target < count ? target : -1\n  }\n\n  /** 取消未完成的滑入/回位过渡（新手势、pointercancel、关闭等接管时）。 */\n  private _cancelSwipeSettle() {\n    if (this._swipeSettleTimer !== undefined) {\n      clearTimeout(this._swipeSettleTimer)\n      this._swipeSettleTimer = undefined\n    }\n    this._swipeSettling = false\n    this._swipeSettleCommit = false\n    this._swipeSettleDir = 1\n  }\n\n  /** 滑入/回位过渡结束：按目标提交索引切换，或复位到单图静止态。 */\n  private _finishSwipeSettle() {\n    if (this._swipeSettleTimer === undefined) return\n    clearTimeout(this._swipeSettleTimer)\n    this._swipeSettleTimer = undefined\n    const commit = this._swipeSettleCommit\n    const dir = this._swipeSettleDir\n    this._swipeSettling = false\n    this._swipeSettleCommit = false\n    this._swipeDir = 0\n    this._swipeOffset = 0\n    if (commit) this._commitSwipeTo(dir)\n  }\n\n  /** 把当前索引切换到相邻图；相邻图在滑动期间已在 DOM 中呈现，提交后直接以已加载态展示，避免重复淡入闪烁。 */\n  private _commitSwipeTo(dir: 1 | -1) {\n    const target = this._adjacentIndex(dir)\n    if (target < 0 || target === this._index) return\n    this._index = target\n    this.resetZoom()\n  }\n\n  /** 释放后的滑入/回位：把 _swipeOffset 从跟手位移过渡到目标位（越界滑入相邻图，否则回 0）。 */\n  private _settleSwipe(deltaX: number, velocityX: number, endTime: number) {\n    const dir = this._swipeDir\n    const stageW = this._stage?.clientWidth ?? 0\n    if (dir === 0 || stageW <= 0) {\n      // 无横向位移或无布局（jsdom）：直接复位。\n      this._swipeOffset = 0\n      return\n    }\n    const distanceThreshold = Math.max(1, Math.round(stageW * SWIPE_DISTANCE_RATIO))\n    // 整段位移平均速度：事件流被合并/延迟稀释时，100ms 窗口速度只采到中后段而偏低，\n    // 平均速度（整段位移 / 整段时间）对快速轻扫更鲁棒。合成事件时间戳相同/缺失时\n    // 跨度不足 2ms，视为 0（与 drag-gesture 的速度守卫一致），慢拖不会误提交。\n    const spanMs = endTime - this._swipeStartTime\n    const fullSpanVelocity = spanMs >= 2 ? (deltaX / spanMs) * 1000 : 0\n    const flickVelocity = Math.max(Math.abs(velocityX), Math.abs(fullSpanVelocity))\n    const crossed =\n      Math.abs(deltaX) >= distanceThreshold ||\n      Math.abs(velocityX) >= SWIPE_VELOCITY ||\n      (Math.abs(deltaX) >= SWIPE_FLICK_DISTANCE && flickVelocity >= SWIPE_FLICK_VELOCITY)\n    const commit = crossed && this._adjacentIndex(dir) !== -1\n    this._swipeSettling = true\n    this._swipeSettleCommit = commit\n    this._swipeSettleDir = dir\n    // 过渡目标：越过阈值 → track 再滑一个舞台宽度让相邻图入位（相邻图本就在 ±100% 处，\n    // 提交后新当前图回到 track 原点，视觉位置不变、无跳变）；否则弹回原位。\n    this._swipeOffset = commit ? -dir * stageW : 0\n    this._swipeSettleTimer = setTimeout(() => this._finishSwipeSettle(), SWIPE_SETTLE_MS)\n  }\n\n  private _handleSwipeSettleEnd = (event: TransitionEvent) => {\n    if (!this._swipeSettling || event.propertyName !== 'transform') return\n    this._finishSwipeSettle()\n  }\n\n  private _panTo(deltaX: number, deltaY: number) {\n    const bounds = this._offsetBounds()\n    this._offsetX = clamp(this._panOriginX + deltaX, -bounds.x, bounds.x)\n    this._offsetY = clamp(this._panOriginY + deltaY, -bounds.y, bounds.y)\n  }\n\n  /**\n   * 平移与左右滑动共用 `attachDragGesture`：它把指针捕获推迟到确认拖拽之后，\n   * 因此不会像立即捕获那样破坏图片自身的 click / dblclick 命中；\n   * 拖拽过程中的窗口级监听同时兜住指针移出元素甚至移出视口的情况。\n   *\n   * 拖拽默认平移且不限方向，与倍率无关：放大后是查看被裁切的边缘，1x 是在视口内\n   * 移动图片。唯一的例外是 `swipe` 独占 1x——未放大、开启 swipe 且多于一张图时，\n   * 整个拖拽归切图（横向驱动轮播、纵向 delta 完全忽略，不做任何平移）。鼠标按住\n   * 拖拽与单指拖拽走的是同一条 Pointer 路径。\n   *\n   * 监听挂在 dialog 而非舞台上：控件层里的按下不会经过舞台，挂在舞台会漏掉\n   * 这些按下而留下过期的「起于空白」标记。\n   */\n  private _handlePointerDown = (event: PointerEvent) => {\n    if (!this._open) return\n\n    // 新手势接管：中止可能未完成的滑入/回位过渡并复位轮播状态。\n    this._cancelSwipeSettle()\n    this._swipeDir = 0\n    this._swipeOffset = 0\n\n    // 只有主指针左键才可能生成 click；副指针或其它键的按下不产生 click，\n    // 若让它们覆盖标记，主指针随后释放时的 click 会拿副指针的命中结果误判 backdrop 点击。\n    const primary = event.button === 0 && event.isPrimary !== false\n    if (!primary) return\n\n    // 指针捕获会把后续 click 的 target 重定向到捕获元素，因此在按下时（捕获生效前）\n    // 记录真实命中元素，作为「是否起于空白区域」的唯一判据。\n    this._blankPointerDown = this._isBlank(event.target)\n    this._dragged = false\n\n    const stage = this._stage\n    if (!stage || (event.target !== stage && !stage.contains(event.target as Node))) return\n\n    // swipe 独占 1x：只有未放大、开启 swipe 且多于一张图时，横向拖拽才归切图；\n    // 其余情形拖拽一律平移，且不限方向（边界见 _offsetBounds）。\n    this._swipeGesture = this._scale === MIN_SCALE && this.swipe && this.images.length > 1\n    this._swipeStartTime = event.timeStamp\n    this._panOriginX = this._offsetX\n    this._panOriginY = this._offsetY\n\n    this._gesture?.destroy()\n    this._gesture = attachDragGesture(event, {\n      // 不能用 axis: 'x'：那会把以纵向为主的拖拽整体判定为「取消」，1x 下纵向就\n      // 无法平移了。这里始终按 both 追踪，让 swipe 只接管横向分量。\n      axis: 'both',\n      threshold: PAN_MOVE_THRESHOLD,\n      onMove: info => {\n        if (this._swipeGesture) {\n          // 横向跟手位移驱动 track 整体平移（单 track 轮播）；方向随拖拽符号更新，\n          // track 位移随 _swipeOffset 反转时自然换向。纵向 delta 完全忽略：\n          // 该手势独占拖拽，不驱平移、不产生纵向跟手（放大态的 pan 不受影响）。\n          this._swipeOffset = info.deltaX\n          if (info.deltaX !== 0) this._swipeDir = info.deltaX < 0 ? 1 : -1\n        } else this._panTo(info.deltaX, info.deltaY)\n      },\n      onEnd: info => {\n        this._dragged = true\n        this._dragging = false\n        if (this._swipeGesture) this._settleSwipe(info.deltaX, info.velocityX, info.timeStamp)\n      },\n      onTap: () => {\n        this._dragging = false\n      },\n      onCancel: () => {\n        this._dragging = false\n        this._cancelSwipeSettle()\n        this._swipeDir = 0\n        this._swipeOffset = 0\n      }\n    })\n    this._dragging = true\n  }\n\n  override render() {\n    const count = this.images.length\n    const zoomed = this._scale > MIN_SCALE\n    // 单 track 轮播（相邻图渲染）：track 只放当前图与左右相邻，当前图恒在 track 原点。\n    // 相邻图用绝对定位放在 ±100%（= 舞台宽度）处，与当前图同尺寸同基线；loop\n    // 环绕时首尾相邻恒在两侧，任何索引拖拽（含首尾环绕）相邻图都真实跟手，不会\n    // 出现「越过 track 末端滑空」的空白（全量渲染 track 在 last→first 环绕时相邻图在\n    // 远端，拖拽中间态必然空白）。\n    // track 整体随 _swipeOffset 平移：松手越过阈值再滑一个舞台宽度让相邻图入位，\n    // 否则弹回原点。图片自身只负责平移/缩放（swipe 只动 track、不碰图片 transform，\n    // 缩放锚点数学不变）。\n    const prevIndex = count > 0 ? this._adjacentIndex(-1) : -1\n    const nextIndex = count > 0 ? this._adjacentIndex(1) : -1\n    const trackTransform = `translate3d(${this._swipeOffset}px, 0, 0)`\n    // 缩放/平移只作用于当前图的 img：相邻 slide 永远 1x（scale(1)），放大态连纵向 pan\n    // 也不跟随（pan 只动当前图），避免放大后相邻图被带大/带进视口「穿过来」。\n    // 1x 非 swipe 的平移路径仍可纵向拖拽，相邻图共享 offsetY 保持行内对齐；swipe 生效\n    // 期间纵向 delta 被忽略（offsetY 恒 0），相邻图同样不产生纵向跟手。\n    const imageTransform = `translate3d(${this._offsetX}px, ${this._offsetY}px, 0) scale(${this._scale})`\n    const neighborTransform = zoomed\n      ? 'translate3d(0, 0, 0) scale(1)'\n      : `translate3d(0, ${this._offsetY}px, 0) scale(1)`\n\n    return html`\n      <dialog\n        aria-label=\"Image preview\"\n        @cancel=${this._handleCancel}\n        @close=${this._handleNativeClose}\n        @pointerdown=${this._handlePointerDown}\n        @click=${this._handleClick}\n        @dblclick=${this._handleDoubleClick}\n        @keydown=${this._handleKeydown}\n        @wheel=${this._handleWheel}\n        @transitionend=${this._handleTransitionEnd}\n      >\n        <div class=\"wui-image-preview-backdrop\" aria-hidden=\"true\"></div>\n        <div class=\"wui-image-preview-content\">\n          <div class=\"wui-image-preview-surface\">\n            <div\n              class=${classMap({\n                'wui-image-preview-stage': true,\n                'is-zoomed': zoomed,\n                'is-dragging': this._dragging,\n                'is-settling': this._swipeSettling\n              })}\n            >\n              <div\n                class=\"wui-image-preview-track\"\n                style=${styleMap({ transform: trackTransform })}\n                @transitionend=${this._handleSwipeSettleEnd}\n              >\n                ${\n                  prevIndex >= 0\n                    ? html`\n                        <div class=\"wui-image-preview-slide is-prev\" aria-hidden=\"true\">\n                          <img\n                            class=${classMap({\n                              'wui-image-preview-image': true,\n                              'is-loaded': this._loadedSources.has(this.images[prevIndex].src)\n                            })}\n                            data-index=${prevIndex}\n                            src=${this.images[prevIndex].src}\n                            alt=${this.images[prevIndex].alt ?? ''}\n                            draggable=\"false\"\n                            style=${styleMap({ transform: neighborTransform })}\n                            @load=${this._handleImageSettled}\n                            @error=${this._handleImageSettled}\n                          />\n                        </div>\n                      `\n                    : nothing\n                }\n                ${\n                  count > 0\n                    ? html`\n                        <div class=\"wui-image-preview-slide is-current\">\n                          <img\n                            class=${classMap({\n                              'wui-image-preview-image': true,\n                              'is-loaded': this._loadedSources.has(this.images[this._index].src)\n                            })}\n                            data-index=${this._index}\n                            src=${this.images[this._index].src}\n                            alt=${this.images[this._index].alt ?? ''}\n                            draggable=\"false\"\n                            style=${styleMap({ transform: imageTransform })}\n                            @load=${this._handleImageSettled}\n                            @error=${this._handleImageSettled}\n                          />\n                        </div>\n                      `\n                    : nothing\n                }\n                ${\n                  nextIndex >= 0\n                    ? html`\n                        <div class=\"wui-image-preview-slide is-next\" aria-hidden=\"true\">\n                          <img\n                            class=${classMap({\n                              'wui-image-preview-image': true,\n                              'is-loaded': this._loadedSources.has(this.images[nextIndex].src)\n                            })}\n                            data-index=${nextIndex}\n                            src=${this.images[nextIndex].src}\n                            alt=${this.images[nextIndex].alt ?? ''}\n                            draggable=\"false\"\n                            style=${styleMap({ transform: neighborTransform })}\n                            @load=${this._handleImageSettled}\n                            @error=${this._handleImageSettled}\n                          />\n                        </div>\n                      `\n                    : nothing\n                }\n              </div>\n            </div>\n          </div>\n          <div class=\"wui-image-preview-controls\">\n            ${\n              this.indicator\n                ? html`<span class=\"wui-image-preview-counter wui-glass\" aria-live=\"polite\"\n                    >${this._index + 1} / ${count}</span\n                  >`\n                : nothing\n            }\n            ${\n              this.closable\n                ? html`\n                    <web-ui-button\n                      class=\"wui-image-preview-close\"\n                      variant=\"glass\"\n                      icon\n                      size=\"36\"\n                      aria-label=\"Close\"\n                      @click=${this.close}\n                    >\n                      <web-ui-icon size=\"16\" .icon=${oouiClose}></web-ui-icon>\n                    </web-ui-button>\n                  `\n                : nothing\n            }\n            ${\n              this.nav && count > 1\n                ? html`\n                    <web-ui-button\n                      class=\"wui-image-preview-nav wui-image-preview-nav-prev\"\n                      variant=\"glass\"\n                      icon\n                      size=\"44\"\n                      aria-label=\"Previous image\"\n                      ?disabled=${!this.loop && this._index === 0}\n                      @click=${this.prev}\n                    >\n                      <web-ui-icon size=\"20\" .icon=${lucideChevronLeft}></web-ui-icon>\n                    </web-ui-button>\n                    <web-ui-button\n                      class=\"wui-image-preview-nav wui-image-preview-nav-next\"\n                      variant=\"glass\"\n                      icon\n                      size=\"44\"\n                      aria-label=\"Next image\"\n                      ?disabled=${!this.loop && this._index === count - 1}\n                      @click=${this.next}\n                    >\n                      <web-ui-icon size=\"20\" .icon=${lucideChevronRight}></web-ui-icon>\n                    </web-ui-button>\n                  `\n                : nothing\n            }\n            ${\n              this.toolbar\n                ? html`\n                    <div class=\"wui-image-preview-toolbar wui-glass\">\n                      <web-ui-button\n                        variant=\"glass\"\n                        icon\n                        size=\"30\"\n                        aria-label=\"Zoom out\"\n                        ?disabled=${this._scale <= MIN_SCALE}\n                        @click=${this.zoomOut}\n                      >\n                        <web-ui-icon size=\"16\" .icon=${lucideMinus}></web-ui-icon>\n                      </web-ui-button>\n                      <span class=\"wui-image-preview-scale\">${Math.round(this._scale * 100)}%</span>\n                      <web-ui-button\n                        variant=\"glass\"\n                        icon\n                        size=\"30\"\n                        aria-label=\"Zoom in\"\n                        ?disabled=${this._scale >= MAX_SCALE}\n                        @click=${this.zoomIn}\n                      >\n                        <web-ui-icon size=\"16\" .icon=${lucidePlus}></web-ui-icon>\n                      </web-ui-button>\n                      <web-ui-button\n                        variant=\"glass\"\n                        icon\n                        size=\"30\"\n                        aria-label=\"Reset zoom\"\n                        ?disabled=${this._scale <= MIN_SCALE && !this._isPanned}\n                        @click=${this.resetZoom}\n                      >\n                        <web-ui-icon size=\"16\" .icon=${radixIconsReset}></web-ui-icon>\n                      </web-ui-button>\n                    </div>\n                  `\n                : nothing\n            }\n          </div>\n        </div>\n      </dialog>\n    `\n  }\n}\n\n/**\n * 打开一个命令式 image preview。\n *\n * 组件挂载到目标 `web-ui-theme` 的 overlay 容器（无主题作用域时回退到全局\n * fallback root），返回的 handle 是唯一的控制入口。所有展示类 option 默认关闭，\n * 默认只渲染图片本身。\n */\nexport function imagePreview(options: ImagePreviewOptions): ImagePreviewHandle {\n  const images = (options.images ?? []).map(item => ({ src: item.src, alt: item.alt ?? '' }))\n  if (images.length === 0) {\n    throw new Error('[web-ui-image-preview] imagePreview requires at least one image')\n  }\n\n  const theme = options.target ? findNearestTheme(options.target) : findRootTheme()\n  const container = options.container ?? theme?.getOverlayRoot() ?? getFallbackOverlayRoot()\n\n  const element = document.createElement('web-ui-image-preview') as WebUiImagePreview\n  element.configure({\n    images,\n    index: options.index ?? 0,\n    loop: options.loop ?? true,\n    nav: options.nav ?? false,\n    toolbar: options.toolbar ?? false,\n    closable: options.closable ?? false,\n    indicator: options.indicator ?? false,\n    swipe: options.swipe ?? false,\n    noScrollLock: options.noScrollLock ?? false,\n    noBackdropClose: options.noBackdropClose ?? false\n  })\n\n  let settle: (() => void) | undefined\n  const closed = new Promise<void>(resolve => {\n    settle = resolve\n  })\n\n  element.addEventListener(\n    'preview-dismissed',\n    () => {\n      element.remove()\n      settle?.()\n      settle = undefined\n    },\n    { once: true }\n  )\n\n  container.appendChild(element)\n  element.show()\n\n  return {\n    get index() {\n      return element.index\n    },\n    get scale() {\n      return element.scale\n    },\n    get images() {\n      return element.images\n    },\n    get closed() {\n      return closed\n    },\n    next: () => element.next(),\n    prev: () => element.prev(),\n    goTo: (index: number) => element.goTo(index),\n    zoomIn: () => element.zoomIn(),\n    zoomOut: () => element.zoomOut(),\n    resetZoom: () => element.resetZoom(),\n    close: () => element.close()\n  }\n}\n"],"mappings":"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"}

package/dist/components/input/index.d.ts

@@ -385,6 +385,7 @@ export declare class WebUiInput extends WebUiInput_base {
     private get _isDisabled();
     private readonly _formAssociation;
     private readonly _formAssociationController;
+    formDisabledCallback(disabled: boolean): void;
     updated(changed: Map<string, unknown>): void;
     private _syncValidity;
     private _onSlotChange;

package/dist/components/input/index.js

@@ -1,6 +1,6 @@
 import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import "../icon/index.js";
-import t from "../../assets/glass.js";
+import t from "../../classes/glass.js";
 import n from "../../icons/generated/jam-close-circle-f.js";
 import { FormAssociated as r, FormAssociationController as i, defineFormAssociation as a, forwardInputValidity as o } from "../../shared/form-association/index.js";
 import "../button/index.js";
@@ -40,6 +40,9 @@ var _ = class extends r(l) {
 	get _isDisabled() {
 		return this.disabled || this._formAssociation.isFormDisabled();
 	}
+	formDisabledCallback(e) {
+		super.formDisabledCallback(e), this.toggleAttribute("data-form-disabled", e);
+	}
 	updated(e) {
 		if (e.has("_value")) {
 			let e = this.shadowRoot?.querySelector("input");
@@ -102,7 +105,7 @@ var _ = class extends r(l) {
 		this._isDisabled || this.shadowRoot?.querySelector("input")?.select();
 	}
 	render() {
-		let e = this.clearable && this._value && !this.readonly;
+		let e = this.clearable && this._value && !this._isDisabled && !this.readonly;
 		return u`
       <div class="wui-glass wui-input-inner" @click=${this.focusInput}>
         <slot name="prefix" class=${h({ empty: !this._hasPrefix })} @slotchange=${this._onSlotChange}></slot>

package/dist/components/input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/input/index.ts"],"sourcesContent":["import '@/components/button'\nimport '@/components/icon'\n\nimport { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport { jamCloseCircleF } from '@/icons'\nimport {\n  FormAssociated,\n  defineFormAssociation,\n  forwardInputValidity,\n  FormAssociationController\n} from '@/shared/form-association'\nimport { createFieldId } from '@/shared/form-association/field-id'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-input')\nexport class WebUiInput extends FormAssociated(LitElement) {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n  @property({ type: String, reflect: true }) type = 'text'\n  @property({ type: String, reflect: true }) placeholder = ''\n  @property({ type: String, reflect: true }) name = ''\n  @property({ type: Boolean, reflect: true }) disabled = false\n  @property({ type: Boolean, reflect: true }) readonly = false\n  @property({ type: Boolean, reflect: true }) required = false\n  @property({ type: Boolean, reflect: true }) clearable = false\n  @property({ type: Boolean, reflect: true }) full = false\n  @property({ type: Boolean, reflect: true }) borderless = false\n  @property({ type: String, attribute: 'aria-label' }) override ariaLabel: string | null = null\n\n  @state() private _value = ''\n  @state() private _focused = false\n  @state() private _hasPrefix = false\n  @state() private _hasSuffix = false\n\n  private readonly _fieldId = createFieldId('web-ui-input')\n\n  @property({ type: String, reflect: true })\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  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    syncValidity: () => this._syncValidity()\n  }).make()\n\n  private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('_value')) {\n      const input = this.shadowRoot?.querySelector('input')\n      if (input && input.value !== this._value) {\n        input.value = this._value\n      }\n    }\n    this._syncValidity()\n    this.toggleAttribute('focused', this._focused)\n  }\n\n  private _syncValidity() {\n    const input = this.shadowRoot?.querySelector('input')\n    const internals = this._formAssociation.getInternals()\n    if (!internals || !input || typeof internals.setValidity !== 'function') return\n    forwardInputValidity(\n      internals,\n      input,\n      ['valueMissing', 'typeMismatch', 'patternMismatch', 'tooLong', 'tooShort'],\n      this._isDisabled\n    )\n  }\n\n  private _onSlotChange(e: Event) {\n    if (!(e.target instanceof HTMLSlotElement)) return\n    const slot = e.target\n    const hasContent = slot.assignedElements().length > 0\n    if (slot.name === 'prefix') this._hasPrefix = hasContent\n    if (slot.name === 'suffix') this._hasSuffix = hasContent\n  }\n\n  private handleInput(e: Event) {\n    if (this._isDisabled || this.readonly) return\n    if (!(e.target instanceof HTMLInputElement)) return\n    this._value = e.target.value\n    this._formAssociation.sync()\n  }\n\n  // 原生 change 不 composed，被 shadow root 挡住；这里补发 composed 事件，\n  // 兑现 $events/README 声明的公共 change 契约。\n  private handleNativeChange(e: Event) {\n    if (this._isDisabled || this.readonly) return\n    if (!(e.target instanceof HTMLInputElement)) return\n    this._value = e.target.value\n    this._formAssociation.sync()\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n  }\n\n  private handleFocus() {\n    if (!this._isDisabled) this._focused = true\n  }\n\n  private handleBlur() {\n    this._focused = false\n  }\n\n  private handleClear() {\n    if (this._isDisabled || this.readonly) return\n    this._value = ''\n    this._formAssociation.sync()\n    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n    // 清除是离散的已提交变更（不是连续输入）：只派 input 会让 v-model.lazy\n    // 等只监听 change 的消费者永远收不到清空，故与 input 一并派发。\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n  }\n\n  private preventMouseDownBlur(e: Event) {\n    e.preventDefault()\n  }\n\n  private focusInput() {\n    if (this._isDisabled) return\n    this.shadowRoot?.querySelector('input')?.focus()\n  }\n\n  // 公共 focus/blur 与 textarea 对齐：宿主自身没有 tab 位（不可聚焦），\n  // 不重定向到内部原生控件的话，调用方拿到的是一次空操作\n  override focus(options?: FocusOptions) {\n    if (this._isDisabled) return\n    this.shadowRoot?.querySelector('input')?.focus(options)\n  }\n\n  override blur() {\n    this.shadowRoot?.querySelector('input')?.blur()\n  }\n\n  /**\n   * 公共 API：全选当前值。\n   *\n   * `disabled` 时与 `focus()` 一致不产生效果；原生控件未渲染时安全 no-op。\n   */\n  select() {\n    if (this._isDisabled) return\n    this.shadowRoot?.querySelector('input')?.select()\n  }\n\n  override render() {\n    // readonly 下不可清除：清空 button 会修改值，与只读语义冲突\n    const showClear = this.clearable && this._value && !this.readonly\n\n    return html`\n      <div class=\"wui-glass wui-input-inner\" @click=${this.focusInput}>\n        <slot name=\"prefix\" class=${classMap({ empty: !this._hasPrefix })} @slotchange=${this._onSlotChange}></slot>\n        <input\n          id=${this._fieldId}\n          type=${this.type}\n          placeholder=${this.placeholder}\n          name=${this.name}\n          aria-label=${ifDefined(this.ariaLabel)}\n          ?disabled=${this._isDisabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${this._value}\n          @input=${this.handleInput}\n          @change=${this.handleNativeChange}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n        />\n        ${\n          showClear\n            ? html`<web-ui-button\n                icon\n                variant=\"ghost\"\n                size=\"20\"\n                aria-label=\"Clear\"\n                @pointerdown=${this.preventMouseDownBlur}\n                @click=${this.handleClear}\n              >\n                <web-ui-icon .icon=${jamCloseCircleF} size=\"14\"></web-ui-icon>\n              </web-ui-button>`\n            : ''\n        }\n        <slot name=\"suffix\" class=${classMap({ empty: !this._hasSuffix })} @slotchange=${this._onSlotChange}></slot>\n      </div>\n    `\n  }\n\n  declare readonly $events: {\n    input: Event\n    change: Event\n    focus: FocusEvent\n    blur: FocusEvent\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-input': WebUiInput\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/input/index.ts"],"sourcesContent":["import '@/components/button'\nimport '@/components/icon'\n\nimport { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport glass from '@/classes/glass.css?inline'\nimport { jamCloseCircleF } from '@/icons'\nimport {\n  FormAssociated,\n  defineFormAssociation,\n  forwardInputValidity,\n  FormAssociationController\n} from '@/shared/form-association'\nimport { createFieldId } from '@/shared/form-association/field-id'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-input')\nexport class WebUiInput extends FormAssociated(LitElement) {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n  @property({ type: String, reflect: true }) type = 'text'\n  @property({ type: String, reflect: true }) placeholder = ''\n  @property({ type: String, reflect: true }) name = ''\n  @property({ type: Boolean, reflect: true }) disabled = false\n  @property({ type: Boolean, reflect: true }) readonly = false\n  @property({ type: Boolean, reflect: true }) required = false\n  @property({ type: Boolean, reflect: true }) clearable = false\n  @property({ type: Boolean, reflect: true }) full = false\n  @property({ type: Boolean, reflect: true }) borderless = false\n  @property({ type: String, attribute: 'aria-label' }) override ariaLabel: string | null = null\n\n  @state() private _value = ''\n  @state() private _focused = false\n  @state() private _hasPrefix = false\n  @state() private _hasSuffix = false\n\n  private readonly _fieldId = createFieldId('web-ui-input')\n\n  @property({ type: String, reflect: true })\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  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    syncValidity: () => this._syncValidity()\n  }).make()\n\n  private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\n\n  override formDisabledCallback(disabled: boolean) {\n    super.formDisabledCallback(disabled)\n    this.toggleAttribute('data-form-disabled', disabled)\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('_value')) {\n      const input = this.shadowRoot?.querySelector('input')\n      if (input && input.value !== this._value) {\n        input.value = this._value\n      }\n    }\n    this._syncValidity()\n    this.toggleAttribute('focused', this._focused)\n  }\n\n  private _syncValidity() {\n    const input = this.shadowRoot?.querySelector('input')\n    const internals = this._formAssociation.getInternals()\n    if (!internals || !input || typeof internals.setValidity !== 'function') return\n    forwardInputValidity(\n      internals,\n      input,\n      ['valueMissing', 'typeMismatch', 'patternMismatch', 'tooLong', 'tooShort'],\n      this._isDisabled\n    )\n  }\n\n  private _onSlotChange(e: Event) {\n    if (!(e.target instanceof HTMLSlotElement)) return\n    const slot = e.target\n    const hasContent = slot.assignedElements().length > 0\n    if (slot.name === 'prefix') this._hasPrefix = hasContent\n    if (slot.name === 'suffix') this._hasSuffix = hasContent\n  }\n\n  private handleInput(e: Event) {\n    if (this._isDisabled || this.readonly) return\n    if (!(e.target instanceof HTMLInputElement)) return\n    this._value = e.target.value\n    this._formAssociation.sync()\n  }\n\n  // 原生 change 不 composed，被 shadow root 挡住；这里补发 composed 事件，\n  // 兑现 $events/README 声明的公共 change 契约。\n  private handleNativeChange(e: Event) {\n    if (this._isDisabled || this.readonly) return\n    if (!(e.target instanceof HTMLInputElement)) return\n    this._value = e.target.value\n    this._formAssociation.sync()\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n  }\n\n  private handleFocus() {\n    if (!this._isDisabled) this._focused = true\n  }\n\n  private handleBlur() {\n    this._focused = false\n  }\n\n  private handleClear() {\n    if (this._isDisabled || this.readonly) return\n    this._value = ''\n    this._formAssociation.sync()\n    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n    // 清除是离散的已提交变更（不是连续输入）：只派 input 会让 v-model.lazy\n    // 等只监听 change 的消费者永远收不到清空，故与 input 一并派发。\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n  }\n\n  private preventMouseDownBlur(e: Event) {\n    e.preventDefault()\n  }\n\n  private focusInput() {\n    if (this._isDisabled) return\n    this.shadowRoot?.querySelector('input')?.focus()\n  }\n\n  // 公共 focus/blur 与 textarea 对齐：宿主自身没有 tab 位（不可聚焦），\n  // 不重定向到内部原生控件的话，调用方拿到的是一次空操作\n  override focus(options?: FocusOptions) {\n    if (this._isDisabled) return\n    this.shadowRoot?.querySelector('input')?.focus(options)\n  }\n\n  override blur() {\n    this.shadowRoot?.querySelector('input')?.blur()\n  }\n\n  /**\n   * 公共 API：全选当前值。\n   *\n   * `disabled` 时与 `focus()` 一致不产生效果；原生控件未渲染时安全 no-op。\n   */\n  select() {\n    if (this._isDisabled) return\n    this.shadowRoot?.querySelector('input')?.select()\n  }\n\n  override render() {\n    // disabled / readonly 时隐藏清除 button，避免暴露不可执行的值修改操作\n    const showClear = this.clearable && this._value && !this._isDisabled && !this.readonly\n\n    return html`\n      <div class=\"wui-glass wui-input-inner\" @click=${this.focusInput}>\n        <slot name=\"prefix\" class=${classMap({ empty: !this._hasPrefix })} @slotchange=${this._onSlotChange}></slot>\n        <input\n          id=${this._fieldId}\n          type=${this.type}\n          placeholder=${this.placeholder}\n          name=${this.name}\n          aria-label=${ifDefined(this.ariaLabel)}\n          ?disabled=${this._isDisabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${this._value}\n          @input=${this.handleInput}\n          @change=${this.handleNativeChange}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n        />\n        ${\n          showClear\n            ? html`<web-ui-button\n                icon\n                variant=\"ghost\"\n                size=\"20\"\n                aria-label=\"Clear\"\n                @pointerdown=${this.preventMouseDownBlur}\n                @click=${this.handleClear}\n              >\n                <web-ui-icon .icon=${jamCloseCircleF} size=\"14\"></web-ui-icon>\n              </web-ui-button>`\n            : ''\n        }\n        <slot name=\"suffix\" class=${classMap({ empty: !this._hasSuffix })} @slotchange=${this._onSlotChange}></slot>\n      </div>\n    `\n  }\n\n  declare readonly $events: {\n    input: Event\n    change: Event\n    focus: FocusEvent\n    blur: FocusEvent\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-input': WebUiInput\n  }\n}\n"],"mappings":"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"}

package/dist/components/input/style.js

@@ -1,5 +1,5 @@
 //#region src/components/input/style.css?inline
-var e = "*,:before,:after{box-sizing:border-box}:host{--wui-input-clear-color:var(--wui-color-text-tertiary,color-mix(in srgb, var(--wui-color-text) 35%, transparent));display:inline-block}:host([disabled]){cursor:not-allowed;opacity:.4}.wui-input-inner{--wui-glass-corner-radius:calc(var(--wui-control-size,36px) / 2);gap:var(--wui-space-2,8px);box-sizing:border-box;width:var(--wui-input-width,200px);min-width:var(--wui-control-size,36px);height:var(--wui-control-size,36px);padding:0 var(--wui-space-3,12px);border-radius:var(--wui-radius-control,calc(infinity * 1px));align-items:center;display:flex;position:relative}:host([full]){display:block}:host([full]) .wui-input-inner{width:100%}:host([borderless]) .wui-input-inner{-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;background:0 0;border:none}:host([borderless]) .wui-input-inner:before{content:none}.wui-input-inner:after{pointer-events:none;content:\"\";border-radius:inherit;box-shadow:inset 0 0 0 1px transparent, 0 0 0 var(--wui-focus-ring-width,3px) transparent;transition:box-shadow var(--wui-duration-focus,.2s);position:absolute;inset:0}:host([focused]) .wui-input-inner:after{box-shadow:inset 0 0 0 1px var(--wui-color-accent,#08f), 0 0 0 var(--wui-focus-ring-width,3px) var(--wui-color-focus-ring,color-mix(in srgb, var(--wui-color-accent,#08f) 40%, transparent))}input{min-width:0;height:100%;font:inherit;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);background:0 0;border:none;outline:none;flex:1;margin:0;padding:0}input::placeholder{font:inherit;color:var(--wui-color-text-secondary,#6a6a6a)}input:disabled{cursor:not-allowed;opacity:.4}@media (pointer:coarse){input{font-size:max(16px, var(--wui-font-size,14px))}}slot{font-size:var(--wui-font-size,14px);color:var(--wui-color-text-secondary,#6a6a6a);flex-shrink:0;align-items:center;display:flex}slot.empty{display:none}.wui-input-inner web-ui-button[variant=ghost]{--wui-button-color:var(--wui-input-clear-color);margin-left:-8px;margin-right:-4px}";
+var e = "*,:before,:after{box-sizing:border-box}:host{--wui-input-clear-color:var(--wui-color-text-tertiary,color-mix(in srgb, var(--wui-color-text) 35%, transparent));display:inline-block}:host([disabled]),:host([data-form-disabled]){cursor:not-allowed;opacity:.4}.wui-input-inner{--wui-glass-corner-radius:calc(var(--wui-control-size,36px) / 2);gap:var(--wui-space-2,8px);box-sizing:border-box;width:var(--wui-input-width,200px);min-width:var(--wui-control-size,36px);height:var(--wui-control-size,36px);padding:0 var(--wui-space-3,12px);border-radius:var(--wui-radius-control,calc(infinity * 1px));align-items:center;display:flex;position:relative}:host([full]){display:block}:host([full]) .wui-input-inner{width:100%}:host([borderless]) .wui-input-inner{-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;background:0 0;border:none}:host([borderless]) .wui-input-inner:before{content:none}.wui-input-inner:after{pointer-events:none;content:\"\";border-radius:inherit;box-shadow:inset 0 0 0 1px transparent, 0 0 0 var(--wui-focus-ring-width,3px) transparent;transition:box-shadow var(--wui-duration-focus,.2s);position:absolute;inset:0}:host([focused]) .wui-input-inner:after{box-shadow:inset 0 0 0 1px var(--wui-color-accent,#0071e3), 0 0 0 var(--wui-focus-ring-width,3px) var(--wui-color-focus-ring,color-mix(in srgb, var(--wui-color-accent,#0071e3) 40%, transparent))}input{min-width:0;height:100%;font:inherit;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);background:0 0;border:none;outline:none;flex:1;margin:0;padding:0}input::placeholder{font:inherit;color:var(--wui-color-text-secondary,#6a6a6a)}input:disabled{cursor:not-allowed}@media (pointer:coarse){input{font-size:max(16px, var(--wui-font-size,14px))}}slot{font-size:var(--wui-font-size,14px);color:var(--wui-color-text-secondary,#6a6a6a);flex-shrink:0;align-items:center;display:flex}slot.empty{display:none}.wui-input-inner web-ui-button[variant=ghost]{--wui-button-color:var(--wui-input-clear-color);margin-left:-8px;margin-right:-4px}";
 //#endregion
 export { e as default };