@milkdown/crepe 7.19.2 → 7.21.0

package/src/feature/ai/commands.ts

@@ -0,0 +1,257 @@
+import type { Ctx } from '@milkdown/kit/ctx'
+import type { MilkdownError } from '@milkdown/kit/exception'
+
+import { commandsCtx } from '@milkdown/kit/core'
+import { aiBuildContextError, aiProviderError } from '@milkdown/kit/exception'
+import { diffPluginKey } from '@milkdown/kit/plugin/diff'
+import {
+  abortStreamingCmd,
+  endStreamingCmd,
+  pushChunkCmd,
+  startStreamingCmd,
+  streamingPluginKey,
+} from '@milkdown/kit/plugin/streaming'
+import { $command, $ctx } from '@milkdown/kit/utils'
+
+import type { AIProvider, AIPromptContext, RunAIOptions } from './types'
+
+import { defaultBuildContext } from './context'
+
+// ---------------------------------------------------------------------------
+// Context slices
+// ---------------------------------------------------------------------------
+
+/// Holds the user-supplied provider and prompt builder. Populated by
+/// the AI feature's setup function from `AIFeatureConfig`. `aiIcon`
+/// lives here too so that other features (notably the toolbar) can pick
+/// up the AI feature's icon override at render time.
+export const aiProviderConfig = $ctx(
+  {
+    provider: undefined as AIProvider | undefined,
+    buildContext: undefined as
+      | ((ctx: Ctx, instruction: string) => AIPromptContext)
+      | undefined,
+    diffReviewOnEnd: true,
+    onError: (error: MilkdownError) => {
+      console.error(`[milkdown/ai] [${error.code}]`, error)
+    },
+    aiIcon: undefined as string | undefined,
+  },
+  'aiProviderConfig'
+)
+
+/// Holds the AbortController and active-form label for the current AI
+/// session (null/empty when idle). `label` is shown in the streaming
+/// indicator. `lastInstruction`, `lastLabel`, `lastFrom`, `lastTo` are
+/// kept after the session ends so the diff-actions Retry button can
+/// re-run the same prompt on the same text range. `diffOwnedByAI` is
+/// flipped on right before our `endStreamingCmd` activates diff review
+/// and back off when the diff panel sees the diff close, so a manually
+/// started diff review (via `startDiffReviewCmd`) doesn't inherit the
+/// previous AI session's Retry affordance.
+export const aiSessionCtx = $ctx(
+  {
+    abortController: null as AbortController | null,
+    label: '',
+    lastInstruction: '',
+    lastLabel: undefined as string | undefined,
+    lastFrom: -1,
+    lastTo: -1,
+    diffOwnedByAI: false,
+  },
+  'aiSession'
+)
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function emitAIError(ctx: Ctx, error: MilkdownError): void {
+  const config = ctx.get(aiProviderConfig.key)
+  try {
+    config.onError(error)
+  } catch (handlerError) {
+    console.error('[milkdown/ai] onError handler failed:', handlerError)
+  }
+}
+
+/// Clear the live (`abortController`, `label`) portion of the session
+/// while preserving the `last*` fields used by the diff-actions Retry
+/// button.
+function clearActiveSession(ctx: Ctx): void {
+  const current = ctx.get(aiSessionCtx.key)
+  ctx.set(aiSessionCtx.key, {
+    ...current,
+    abortController: null,
+    label: '',
+  })
+}
+
+// ---------------------------------------------------------------------------
+// Async provider runner
+// ---------------------------------------------------------------------------
+
+async function runProvider(
+  ctx: Ctx,
+  provider: AIProvider,
+  promptContext: AIPromptContext,
+  abortController: AbortController
+): Promise<void> {
+  try {
+    const iterable = provider(promptContext, abortController.signal)
+    const commands = ctx.get(commandsCtx)
+    for await (const chunk of iterable) {
+      if (abortController.signal.aborted) break
+      commands.call(pushChunkCmd.key, chunk)
+    }
+    if (abortController.signal.aborted) return
+    // Streaming complete — hand off to diff review if configured. The
+    // ownership flag is flipped *before* the dispatch so the diff-actions
+    // panel reads `true` during the same transaction's update cycle.
+    // If the dispatch is rejected (e.g. host code already ended the
+    // streaming session), revert the flag so the next manually-started
+    // diff review isn't misclassified as AI-owned — `clearActiveSession`
+    // intentionally preserves `diffOwnedByAI` because the panel is
+    // responsible for clearing it on the diff true→false edge, but no
+    // such edge fires when the dispatch never landed.
+    const config = ctx.get(aiProviderConfig.key)
+    if (config.diffReviewOnEnd) {
+      const cur = ctx.get(aiSessionCtx.key)
+      ctx.set(aiSessionCtx.key, { ...cur, diffOwnedByAI: true })
+    }
+    const dispatched = commands.call(endStreamingCmd.key, {
+      diffReview: config.diffReviewOnEnd,
+    })
+    if (config.diffReviewOnEnd && !dispatched) {
+      const cur = ctx.get(aiSessionCtx.key)
+      ctx.set(aiSessionCtx.key, { ...cur, diffOwnedByAI: false })
+    }
+  } catch (error) {
+    if (abortController.signal.aborted) return
+    const milkdownError = aiProviderError(error)
+    emitAIError(ctx, milkdownError)
+    const commands = ctx.get(commandsCtx)
+    commands.call(abortStreamingCmd.key, { keep: false })
+  } finally {
+    // Only clean up if this session is still the active one. If the
+    // user aborted and immediately started a new session, the new
+    // session owns the ctx now and we must not clobber it.
+    const current = ctx.get(aiSessionCtx.key)
+    if (current.abortController === abortController) {
+      clearActiveSession(ctx)
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Commands
+// ---------------------------------------------------------------------------
+
+/// Start an AI session: capture context, start streaming, and call the
+/// provider asynchronously. The command returns synchronously; the
+/// provider runs in the background.
+///
+/// When the user has a text selection, the streamed output replaces the
+/// selected text. The provider also receives the selected text in
+/// `AIPromptContext.selection` for context-aware generation.
+export const runAICmd = $command('RunAI', (ctx) => {
+  return (options?: RunAIOptions) => (state, dispatch) => {
+    if (!options?.instruction) return false
+
+    const config = ctx.get(aiProviderConfig.key)
+    if (!config.provider) return false
+
+    // Reject if a session is already running, streaming is active, or
+    // diff review is active (the diff plugin blocks non-diff transactions,
+    // so streaming flushes would be silently rejected).
+    const session = ctx.get(aiSessionCtx.key)
+    if (session.abortController) return false
+    if (streamingPluginKey.getState(state)?.active) return false
+    if (diffPluginKey.getState(state)?.active) return false
+
+    // Dry-run: when dispatch is undefined, ProseMirror is probing
+    // whether this command can execute. All precondition checks above
+    // are side-effect-free so we can return true here.
+    if (!dispatch) return true
+
+    // Set the session label before starting the streaming plugin, so
+    // the streaming-indicator widget reads the right label when its
+    // decoration is first built. Empty string means "no caller-supplied
+    // label" — the indicator widget falls through to its configured
+    // `fallbackLabel`. `lastInstruction` / `lastLabel` are also stored
+    // here so the diff-actions Retry button can re-run the same prompt
+    // later.
+    const abortController = new AbortController()
+    const { from, to } = state.selection
+    ctx.set(aiSessionCtx.key, {
+      abortController,
+      label: options.label ?? '',
+      lastInstruction: options.instruction,
+      lastLabel: options.label,
+      lastFrom: from,
+      lastTo: to,
+      // Reset every run; only the success path that hands off to diff
+      // review flips it back on.
+      diffOwnedByAI: false,
+    })
+
+    // Start streaming — replaces the selection if non-empty.
+    const commands = ctx.get(commandsCtx)
+    const insertAt = state.selection.empty
+      ? ('cursor' as const)
+      : ('selection' as const)
+    if (!commands.call(startStreamingCmd.key, { insertAt })) {
+      clearActiveSession(ctx)
+      return false
+    }
+
+    // Everything after startStreamingCmd is wrapped in try/catch: if
+    // buildContext or anything else throws, we must abort the streaming
+    // session to avoid leaving the editor locked with no way to recover.
+    let promptContext: AIPromptContext
+    try {
+      const buildContext = config.buildContext ?? defaultBuildContext
+      promptContext = buildContext(ctx, options.instruction)
+    } catch (error) {
+      const milkdownError = aiBuildContextError(error)
+      emitAIError(ctx, milkdownError)
+      commands.call(abortStreamingCmd.key, { keep: false })
+      clearActiveSession(ctx)
+      return false
+    }
+
+    // Fire-and-forget: the provider pushes chunks asynchronously.
+    // startStreamingCmd already dispatched its own transaction — we
+    // must NOT dispatch state.tr here as it would overwrite the
+    // streaming plugin's state with a stale doc.
+    void runProvider(ctx, config.provider, promptContext, abortController)
+
+    return true
+  }
+})
+
+/// Abort the current AI session. Signals the provider to stop and
+/// delegates to `abortStreamingCmd` if streaming is still active.
+/// Returns true whenever an AI session was actually cleaned up.
+export const abortAICmd = $command('AbortAI', (ctx) => {
+  return (options?: { keep?: boolean }) => (state, dispatch) => {
+    const session = ctx.get(aiSessionCtx.key)
+    // Dry-run: return whether there's something to abort, without
+    // performing any side effects.
+    if (!dispatch) return !!session.abortController
+
+    if (!session.abortController) return false
+
+    session.abortController.abort()
+    clearActiveSession(ctx)
+
+    // Only call abortStreamingCmd if the streaming plugin is still
+    // active — it may have already finished/errored by the time the
+    // user clicks abort.
+    if (streamingPluginKey.getState(state)?.active) {
+      const commands = ctx.get(commandsCtx)
+      commands.call(abortStreamingCmd.key, options)
+    }
+    return true
+  }
+})

package/src/feature/ai/context.ts

@@ -0,0 +1,45 @@
+import type { Ctx } from '@milkdown/kit/ctx'
+
+import { editorViewCtx, serializerCtx } from '@milkdown/kit/core'
+
+import type { AIPromptContext } from './types'
+
+/// Default prompt context builder. Serializes the full document and
+/// the current selection (if any) as markdown, then pairs them with
+/// the user instruction.
+export function defaultBuildContext(
+  ctx: Ctx,
+  instruction: string
+): AIPromptContext {
+  const view = ctx.get(editorViewCtx)
+  const serializer = ctx.get(serializerCtx)
+  const { state } = view
+
+  // Full document as markdown
+  const document = serializer(state.doc)
+
+  // Selected text as markdown (empty if selection is collapsed).
+  // For block-level selections (whole paragraphs, list items, etc.)
+  // we wrap the slice content in a doc node and serialize it. For
+  // inline-only selections (text inside a single paragraph),
+  // createAndFill on the doc type returns null because inline content
+  // isn't valid as direct doc children — wrap it in a paragraph first
+  // so marks (bold, italic, links) survive into the markdown output.
+  let selection = ''
+  if (!state.selection.empty) {
+    const { from, to } = state.selection
+    const slice = state.doc.slice(from, to)
+    const { schema } = state.doc.type
+    let wrapper = schema.topNodeType.createAndFill(null, slice.content)
+    if (!wrapper) {
+      const paragraph = schema.nodes.paragraph?.createAndFill(
+        null,
+        slice.content
+      )
+      if (paragraph) wrapper = schema.topNodeType.createAndFill(null, paragraph)
+    }
+    selection = wrapper ? serializer(wrapper) : state.doc.textBetween(from, to)
+  }
+
+  return { document, selection, instruction }
+}

package/src/feature/ai/diff-actions/index.ts

@@ -0,0 +1,95 @@
+import { commandsCtx } from '@milkdown/kit/core'
+import { acceptAllDiffsCmd, diffPluginKey } from '@milkdown/kit/plugin/diff'
+import { Plugin, PluginKey } from '@milkdown/kit/prose/state'
+import { $prose } from '@milkdown/kit/utils'
+
+import type { AIDiffActionsConfig } from '../types'
+
+import {
+  clearIcon as defaultRejectIcon,
+  confirmIcon as defaultAcceptIcon,
+  enterKeyIcon as defaultEnterKeyIcon,
+  retryIcon as defaultRetryIcon,
+} from '../../../icons'
+import { aiSessionCtx } from '../commands'
+import { DiffActionsPanelView, type ResolvedDiffActionsConfig } from './view'
+
+const diffActionsPanelKey = new PluginKey('CREPE_AI_DIFF_ACTIONS_PANEL')
+
+export const DEFAULT_DIFF_ACTIONS_RETRY_LABEL = 'Retry'
+export const DEFAULT_DIFF_ACTIONS_REJECT_ALL_LABEL = 'Reject all'
+export const DEFAULT_DIFF_ACTIONS_ACCEPT_ALL_LABEL = 'Accept all'
+
+function detectModSymbol(): string {
+  if (typeof navigator === 'undefined') return '⌘'
+  // `userAgentData.platform` is the modern accessor; fall back to the
+  // legacy `platform` / `userAgent` strings for older browsers and
+  // jsdom-based test environments.
+  const ua = navigator as unknown as {
+    userAgentData?: { platform?: string }
+    platform?: string
+    userAgent?: string
+  }
+  const platform =
+    ua.userAgentData?.platform ?? ua.platform ?? ua.userAgent ?? ''
+  return /mac|iphone|ipad|ipod/i.test(platform) ? '⌘' : 'Ctrl'
+}
+
+/// Detected per renderer process. Override via
+/// `AIDiffActionsConfig.modSymbol` when the UI should diverge from the
+/// runtime platform (e.g. always render `⌘` in a macOS-themed product).
+export const DEFAULT_DIFF_ACTIONS_MOD_SYMBOL = detectModSymbol()
+
+interface DiffActionsPluginOptions {
+  config?: AIDiffActionsConfig
+  /// The enter-key icon is owned by the top-level `AIFeatureConfig` so a
+  /// single override applies to both the instruction tooltip and this
+  /// panel's shortcut chip.
+  enterKeyIcon?: string
+}
+
+function resolveDiffActionsConfig(
+  options: DiffActionsPluginOptions
+): ResolvedDiffActionsConfig {
+  const { config, enterKeyIcon } = options
+  return {
+    retryLabel: config?.retryLabel ?? DEFAULT_DIFF_ACTIONS_RETRY_LABEL,
+    rejectAllLabel:
+      config?.rejectAllLabel ?? DEFAULT_DIFF_ACTIONS_REJECT_ALL_LABEL,
+    acceptAllLabel:
+      config?.acceptAllLabel ?? DEFAULT_DIFF_ACTIONS_ACCEPT_ALL_LABEL,
+    retryIcon: config?.retryIcon ?? defaultRetryIcon,
+    rejectIcon: config?.rejectIcon ?? defaultRejectIcon,
+    acceptIcon: config?.acceptIcon ?? defaultAcceptIcon,
+    enterKeyIcon: enterKeyIcon ?? defaultEnterKeyIcon,
+    modSymbol: config?.modSymbol ?? DEFAULT_DIFF_ACTIONS_MOD_SYMBOL,
+  }
+}
+
+export function diffActionsPanelPlugin(options: DiffActionsPluginOptions = {}) {
+  const resolved = resolveDiffActionsConfig(options)
+
+  return $prose((ctx) => {
+    return new Plugin({
+      key: diffActionsPanelKey,
+      view(view) {
+        return new DiffActionsPanelView(ctx, view, resolved)
+      },
+      props: {
+        handleKeyDown(view, event) {
+          if (event.key !== 'Enter') return false
+          if (!(event.metaKey || event.ctrlKey)) return false
+          if (!diffPluginKey.getState(view.state)?.active) return false
+          // Only intercept Mod-Enter for diffs this AI session started.
+          // Manual `startDiffReviewCmd` flows shouldn't have their key
+          // bindings mutated just because the AI feature is loaded.
+          if (!ctx.get(aiSessionCtx.key).diffOwnedByAI) return false
+          event.preventDefault()
+          const commands = ctx.get(commandsCtx)
+          commands.call(acceptAllDiffsCmd.key)
+          return true
+        },
+      },
+    })
+  })
+}

package/src/feature/ai/diff-actions/view.ts

@@ -0,0 +1,237 @@
+import type { Ctx } from '@milkdown/kit/ctx'
+import type { Node } from '@milkdown/kit/prose/model'
+import type { PluginView } from '@milkdown/kit/prose/state'
+import type { EditorView } from '@milkdown/kit/prose/view'
+
+import { commandsCtx, editorViewCtx } from '@milkdown/kit/core'
+import {
+  acceptAllDiffsCmd,
+  clearDiffReviewCmd,
+  diffPluginKey,
+} from '@milkdown/kit/plugin/diff'
+import { TextSelection } from '@milkdown/kit/prose/state'
+import DOMPurify from 'dompurify'
+
+import { aiSessionCtx, runAICmd } from '../commands'
+
+const PANEL_CLASS = 'milkdown-ai-diff-actions'
+
+/// Icons in `ResolvedDiffActionsConfig` are user-supplied SVG strings,
+/// so route them through DOMPurify before assigning to `innerHTML` —
+/// matches the sanitization the shared `Icon` component already does
+/// for Vue-rendered icons.
+function setSanitizedIcon(host: HTMLElement, svg: string): void {
+  host.innerHTML = DOMPurify.sanitize(svg.trim())
+}
+
+/// Fully resolved diff actions config — every field has a value, so the
+/// view doesn't have to know about defaults.
+export interface ResolvedDiffActionsConfig {
+  retryLabel: string
+  rejectAllLabel: string
+  acceptAllLabel: string
+  retryIcon: string
+  rejectIcon: string
+  acceptIcon: string
+  enterKeyIcon: string
+  modSymbol: string
+}
+
+function createIcon(svg: string): HTMLElement {
+  const span = document.createElement('span')
+  span.className = `${PANEL_CLASS}-icon`
+  setSanitizedIcon(span, svg)
+  return span
+}
+
+export class DiffActionsPanelView implements PluginView {
+  readonly #panel: HTMLElement
+  readonly #host: HTMLElement
+  readonly #retryBtn: HTMLButtonElement
+  readonly #config: ResolvedDiffActionsConfig
+  #visible = false
+  /// Tracks the diff plugin's `active` flag across transactions so we
+  /// can detect false→true / true→false edges independently of whether
+  /// the panel is actually being shown.
+  #diffActive = false
+  /// Doc snapshot at the moment diff review activated. If the live doc
+  /// drifts from this snapshot the user has accepted some per-change
+  /// diffs and the stored `lastFrom`/`lastTo` no longer point at the
+  /// original range — Retry is unsafe at that point.
+  #diffStartDoc: Node | null = null
+  /// Whether the active diff review came from this AI session's
+  /// streaming hand-off (vs being started manually via
+  /// `startDiffReviewCmd`). Captured at the false→true transition.
+  /// The panel only renders when this is true so it doesn't take over
+  /// non-AI diff flows that exist independently of the AI feature.
+  #ownedByAI = false
+
+  constructor(
+    readonly ctx: Ctx,
+    view: EditorView,
+    config: ResolvedDiffActionsConfig
+  ) {
+    this.#config = config
+    this.#host = this.#findHost(view)
+
+    const panel = document.createElement('div')
+    panel.className = PANEL_CLASS
+    panel.dataset.show = 'false'
+
+    this.#retryBtn = this.#makeButton(
+      'retry',
+      config.retryIcon,
+      config.retryLabel,
+      this.#retry
+    )
+    panel.appendChild(this.#retryBtn)
+    panel.appendChild(
+      this.#makeButton(
+        'reject',
+        config.rejectIcon,
+        config.rejectAllLabel,
+        this.#rejectAll
+      )
+    )
+    const acceptBtn = this.#makeButton(
+      'accept',
+      config.acceptIcon,
+      config.acceptAllLabel,
+      this.#acceptAll
+    )
+    acceptBtn.appendChild(this.#makeShortcutChip())
+    panel.appendChild(acceptBtn)
+
+    this.#panel = panel
+    this.#host.appendChild(panel)
+    this.update(view)
+  }
+
+  #findHost(view: EditorView): HTMLElement {
+    return (view.dom.closest('.milkdown') as HTMLElement) ?? document.body
+  }
+
+  #makeButton(
+    variant: 'retry' | 'reject' | 'accept',
+    icon: string,
+    label: string,
+    onClick: () => void
+  ): HTMLButtonElement {
+    const btn = document.createElement('button')
+    btn.type = 'button'
+    btn.className = `${PANEL_CLASS}-btn ${PANEL_CLASS}-btn-${variant}`
+    btn.appendChild(createIcon(icon))
+    const text = document.createElement('span')
+    text.textContent = label
+    btn.appendChild(text)
+    btn.addEventListener('mousedown', (e) => e.preventDefault())
+    btn.addEventListener('click', (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+      onClick()
+    })
+    return btn
+  }
+
+  #makeShortcutChip(): HTMLElement {
+    const shortcut = document.createElement('span')
+    shortcut.className = `${PANEL_CLASS}-shortcut`
+    const cmd = document.createElement('span')
+    cmd.textContent = this.#config.modSymbol
+    const enter = document.createElement('span')
+    enter.className = `${PANEL_CLASS}-shortcut-icon`
+    setSanitizedIcon(enter, this.#config.enterKeyIcon)
+    shortcut.append(cmd, enter)
+    return shortcut
+  }
+
+  #retry = (): void => {
+    const session = this.ctx.get(aiSessionCtx.key)
+    if (!session.lastInstruction) return
+    // Refuse to retry when the active diff didn't originate from this
+    // AI session, or once the user has accepted any individual diff —
+    // `clearDiffReviewCmd` only exits diff mode, it doesn't roll back
+    // accepted changes, so the stored range would point at shifted text.
+    if (!this.#ownedByAI || !this.#canRetry()) return
+
+    const commands = this.ctx.get(commandsCtx)
+    commands.call(clearDiffReviewCmd.key)
+    const editorView = this.ctx.get(editorViewCtx)
+    const { doc } = editorView.state
+    const from = Math.min(Math.max(session.lastFrom, 0), doc.content.size)
+    const to = Math.min(Math.max(session.lastTo, 0), doc.content.size)
+    editorView.dispatch(
+      editorView.state.tr.setSelection(
+        TextSelection.create(editorView.state.doc, from, to)
+      )
+    )
+    commands.call(runAICmd.key, {
+      instruction: session.lastInstruction,
+      label: session.lastLabel,
+    })
+  }
+
+  #canRetry(): boolean {
+    if (!this.#diffStartDoc) return false
+    const editorView = this.ctx.get(editorViewCtx)
+    return editorView.state.doc.eq(this.#diffStartDoc)
+  }
+
+  #rejectAll = (): void => {
+    this.ctx.get(commandsCtx).call(clearDiffReviewCmd.key)
+  }
+
+  #acceptAll = (): void => {
+    this.ctx.get(commandsCtx).call(acceptAllDiffsCmd.key)
+  }
+
+  update(view: EditorView): void {
+    const diffActive = !!diffPluginKey.getState(view.state)?.active
+
+    if (diffActive !== this.#diffActive) {
+      this.#diffActive = diffActive
+      if (diffActive) {
+        // false → true. Capture ownership now; from this point on any
+        // doc drift means the user has accepted individual diffs.
+        const session = this.ctx.get(aiSessionCtx.key)
+        this.#ownedByAI = session.diffOwnedByAI
+        this.#diffStartDoc = view.state.doc
+      } else {
+        // true → false. Clear local state and the session-level flag so
+        // a subsequent manual diff doesn't pick up stale ownership.
+        this.#ownedByAI = false
+        this.#diffStartDoc = null
+        const session = this.ctx.get(aiSessionCtx.key)
+        if (session.diffOwnedByAI) {
+          this.ctx.set(aiSessionCtx.key, {
+            ...session,
+            diffOwnedByAI: false,
+          })
+        }
+      }
+    }
+
+    // Render only for AI-owned diff reviews. Non-AI diffs (started via
+    // `startDiffReviewCmd` directly) are left to whatever UX the host
+    // had in place before this feature shipped.
+    const shouldShow = diffActive && this.#ownedByAI
+    if (shouldShow !== this.#visible) {
+      this.#visible = shouldShow
+      this.#panel.dataset.show = shouldShow ? 'true' : 'false'
+    }
+
+    if (shouldShow) {
+      // Re-evaluate Retry every transaction so the button disables the
+      // moment a per-change accept shifts the doc out of its initial
+      // form.
+      const session = this.ctx.get(aiSessionCtx.key)
+      const docUntouched =
+        !!this.#diffStartDoc && view.state.doc.eq(this.#diffStartDoc)
+      this.#retryBtn.disabled = !session.lastInstruction || !docUntouched
+    }
+  }
+
+  destroy(): void {
+    this.#panel.remove()
+  }
+}