@prosekit/lit 0.0.4 → 0.0.6

package/dist/{prosekit-lit-components-command-list.js → chunk-65QAWC7L.js}

@@ -1,27 +1,35 @@
-import {
-  commandListContext
-} from "./chunk-L6CSVKWR.js";
-import {
-  commandPopoverContext,
-  isCommandItem
-} from "./chunk-WPC5TQP7.js";
 import {
   __decorateClass,
-  blockComponentStyles
-} from "./chunk-FB3RHUS6.js";
+  blockComponentStyles,
+  commandListContext
+} from "./chunk-J73E7P6J.js";
+
+// src/components/autocomplete-popover/context.ts
+import { createContext } from "@lit-labs/context";
+var commandPopoverContext = createContext(
+  "prosekit-autocomplete-popover-context"
+);
 
-// src/internal/command/list.ts
+// src/components/autocomplete-list/component.ts
 import { consume, provide } from "@lit-labs/context";
+import "@prosekit/core";
 import { html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 
-// src/internal/command-score.ts
+// src/utils/command-score.ts
 import commandScoreModule from "@superhuman/command-score";
 var commandScore = commandScoreModule;
 
-// src/internal/command/list-controller.ts
+// src/components/autocomplete-item/helpers.ts
+function isAutocompleteItem(element) {
+  var _a;
+  return ((_a = element == null ? void 0 : element.tagName) == null ? void 0 : _a.toLowerCase()) === "prosekit-autocomplete-item";
+}
+
+// src/components/autocomplete-list/controller.ts
 import { addKeymap } from "@prosekit/core";
-var CommandListController = class {
+import "lit";
+var AutocompleteListController = class {
   constructor(host, keymap) {
     this.host = host;
     this.keymap = keymap;
@@ -52,11 +60,12 @@ var CommandListController = class {
   }
 };
 
-// src/internal/command/list.ts
-var CommandList = class extends LitElement {
+// src/components/autocomplete-list/component.ts
+var AutocompleteList = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.controller = new CommandListController(this, {
+    /** @hidden */
+    this.controller = new AutocompleteListController(this, {
       ArrowUp: () => {
         if (!this.active)
           return false;
@@ -83,6 +92,7 @@ var CommandList = class extends LitElement {
         return true;
       }
     });
+    this.lastMouseMoveTime = 0;
     this.popoverContext = null;
     this.context = {
       scores: /* @__PURE__ */ new Map(),
@@ -99,7 +109,7 @@ var CommandList = class extends LitElement {
   }
   get items() {
     var _a, _b, _c;
-    return (_c = (_b = (_a = this.defaultSlot) == null ? void 0 : _a.assignedElements({ flatten: true })) == null ? void 0 : _b.filter(isCommandItem)) != null ? _c : [];
+    return (_c = (_b = (_a = this.defaultSlot) == null ? void 0 : _a.assignedElements({ flatten: true })) == null ? void 0 : _b.filter(isAutocompleteItem)) != null ? _c : [];
   }
   get availableItems() {
     var _a, _b;
@@ -167,17 +177,23 @@ var CommandList = class extends LitElement {
       this.updateValue(items[nextIndex].content);
     }
   }
+  handleMouseMove() {
+    this.lastMouseMoveTime = Date.now();
+  }
   handleMouseOver(event) {
+    if (this.lastMouseMoveTime + 500 < Date.now()) {
+      return;
+    }
     const target = event.target;
-    if (isCommandItem(target)) {
+    if (isAutocompleteItem(target)) {
       this.updateValue(target.content);
     }
   }
   handleClick(event) {
     event.preventDefault();
     const target = event.target;
-    const item = target == null ? void 0 : target.closest("prosekit-command-item");
-    if (item && isCommandItem(item)) {
+    const item = target == null ? void 0 : target.closest("prosekit-autocomplete-item");
+    if (item && isAutocompleteItem(item)) {
       this.handleSelect(item);
     }
   }
@@ -191,28 +207,30 @@ var CommandList = class extends LitElement {
   }
   /** @hidden */
   render() {
-    return html`<div role="listbox" aria-label="Suggestions" @mouseover="${this.handleMouseOver.bind(this)}" @click="${this.handleClick.bind(this)}" @mousedown="${this.handleMouseDown.bind(this)}"><slot></slot></div>`;
+    return html`<div role="listbox" aria-label="Suggestions" @mousemove="${this.handleMouseMove.bind(this)}" @mouseover="${this.handleMouseOver.bind(this)}" @click="${this.handleClick.bind(this)}" @mousedown="${this.handleMouseDown.bind(this)}"><slot></slot></div>`;
   }
 };
 /** @hidden */
-CommandList.styles = blockComponentStyles;
+AutocompleteList.styles = blockComponentStyles;
 __decorateClass([
   property({ attribute: false })
-], CommandList.prototype, "editor", 2);
+], AutocompleteList.prototype, "editor", 2);
 __decorateClass([
   consume({ context: commandPopoverContext, subscribe: true }),
   state()
-], CommandList.prototype, "popoverContext", 2);
+], AutocompleteList.prototype, "popoverContext", 2);
 __decorateClass([
   provide({ context: commandListContext }),
   state()
-], CommandList.prototype, "context", 2);
+], AutocompleteList.prototype, "context", 2);
 __decorateClass([
   query("slot")
-], CommandList.prototype, "defaultSlot", 2);
-CommandList = __decorateClass([
-  customElement("prosekit-command-list")
-], CommandList);
+], AutocompleteList.prototype, "defaultSlot", 2);
+AutocompleteList = __decorateClass([
+  customElement("prosekit-autocomplete-list")
+], AutocompleteList);
+
 export {
-  CommandList
+  commandPopoverContext,
+  AutocompleteList
 };

package/dist/{chunk-FB3RHUS6.js → chunk-J73E7P6J.js}

@@ -20,7 +20,14 @@ var componentStyles = css`:host{box-sizing:border-box}:host *,:host ::after,:hos
 // src/styles/block-component.styles.ts
 var blockComponentStyles = css2`${componentStyles}:host{display:block}:host([hidden]){display:none}`;
 
+// src/components/autocomplete-list/context.ts
+import { createContext } from "@lit-labs/context";
+var commandListContext = createContext(
+  "prosekit-autocomplete-list-context"
+);
+
 export {
   __decorateClass,
-  blockComponentStyles
+  blockComponentStyles,
+  commandListContext
 };

package/dist/{prosekit-lit-components-command-item.js → chunk-UDTISUHF.js}

@@ -1,16 +1,14 @@
-import {
-  commandListContext
-} from "./chunk-L6CSVKWR.js";
 import {
   __decorateClass,
-  blockComponentStyles
-} from "./chunk-FB3RHUS6.js";
+  blockComponentStyles,
+  commandListContext
+} from "./chunk-J73E7P6J.js";
 
-// src/internal/command/item.ts
+// src/components/autocomplete-item/component.ts
 import { consume } from "@lit-labs/context";
 import { LitElement, html } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
-var CommandItem = class extends LitElement {
+var AutocompleteItem = class extends LitElement {
   constructor() {
     super(...arguments);
     this.value = "";
@@ -31,6 +29,11 @@ var CommandItem = class extends LitElement {
       this.listContext.registerValue(this.content);
     }
   }
+  updated(changedProperties) {
+    if (this.selected && changedProperties.has("selected") && !changedProperties.get("selected")) {
+      this.scrollIntoView({ block: "nearest" });
+    }
+  }
   /** @hidden */
   render() {
     if (this.hidden) {
@@ -40,26 +43,27 @@ var CommandItem = class extends LitElement {
   }
 };
 /** @hidden */
-CommandItem.styles = blockComponentStyles;
+AutocompleteItem.styles = blockComponentStyles;
 __decorateClass([
   property({ type: String, reflect: true, attribute: "data-value" })
-], CommandItem.prototype, "value", 2);
+], AutocompleteItem.prototype, "value", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true, attribute: "data-selected" })
-], CommandItem.prototype, "selected", 2);
+], AutocompleteItem.prototype, "selected", 2);
 __decorateClass([
   property({ attribute: false })
-], CommandItem.prototype, "onSelect", 2);
+], AutocompleteItem.prototype, "onSelect", 2);
 __decorateClass([
   query("slot")
-], CommandItem.prototype, "defaultSlot", 2);
+], AutocompleteItem.prototype, "defaultSlot", 2);
 __decorateClass([
   consume({ context: commandListContext, subscribe: true }),
   state({})
-], CommandItem.prototype, "listContext", 2);
-CommandItem = __decorateClass([
-  customElement("prosekit-command-item")
-], CommandItem);
+], AutocompleteItem.prototype, "listContext", 2);
+AutocompleteItem = __decorateClass([
+  customElement("prosekit-autocomplete-item")
+], AutocompleteItem);
+
 export {
-  CommandItem
+  AutocompleteItem
 };

package/dist/{list-context-2692a600.d.ts → context-19474449.d.ts}

@@ -1,7 +1,7 @@
-type CommandListContext = {
+type AutocompleteListContext = {
     scores: Map<string, number>;
     selectedValue: string;
     registerValue: (value: string) => VoidFunction;
 };
 
-export { CommandListContext as C };
+export { AutocompleteListContext as A };

package/dist/{popover-context-d5266bd6.d.ts → context-436a56d3.d.ts}

@@ -1,8 +1,8 @@
-type CommandPopoverContext = {
+type AutocompletePopoverContext = {
     active: boolean;
     query: string;
     handleDismiss: VoidFunction;
     handleSubmit: VoidFunction;
 };
 
-export { CommandPopoverContext as C };
+export { AutocompletePopoverContext as A };

package/dist/prosekit-lit-components-autocomplete-empty.d.ts

@@ -0,0 +1,16 @@
+import * as lit from 'lit';
+import { LitElement, CSSResultGroup, PropertyValues } from 'lit';
+import { A as AutocompleteListContext } from './context-19474449.js';
+
+interface AutocompleteEmptyProps {
+}
+declare class AutocompleteEmpty extends LitElement implements AutocompleteEmptyProps {
+    /** @hidden */
+    static styles: CSSResultGroup;
+    listContext?: AutocompleteListContext;
+    protected willUpdate(_changedProperties: PropertyValues<this>): void;
+    /** @hidden */
+    render(): lit.TemplateResult<1> | null;
+}
+
+export { AutocompleteEmpty, AutocompleteEmptyProps };

package/dist/{prosekit-lit-components-command-empty.js → prosekit-lit-components-autocomplete-empty.js}

@@ -1,16 +1,14 @@
-import {
-  commandListContext
-} from "./chunk-L6CSVKWR.js";
 import {
   __decorateClass,
-  blockComponentStyles
-} from "./chunk-FB3RHUS6.js";
+  blockComponentStyles,
+  commandListContext
+} from "./chunk-J73E7P6J.js";
 
-// src/internal/command/empty.ts
+// src/components/autocomplete-empty/index.ts
 import { consume } from "@lit-labs/context";
 import { LitElement, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
-var CommandEmpty = class extends LitElement {
+var AutocompleteEmpty = class extends LitElement {
   willUpdate(_changedProperties) {
     var _a;
     const scores = (_a = this.listContext) == null ? void 0 : _a.scores;
@@ -35,14 +33,14 @@ var CommandEmpty = class extends LitElement {
   }
 };
 /** @hidden */
-CommandEmpty.styles = blockComponentStyles;
+AutocompleteEmpty.styles = blockComponentStyles;
 __decorateClass([
   consume({ context: commandListContext, subscribe: true }),
   state()
-], CommandEmpty.prototype, "listContext", 2);
-CommandEmpty = __decorateClass([
-  customElement("prosekit-command-empty")
-], CommandEmpty);
+], AutocompleteEmpty.prototype, "listContext", 2);
+AutocompleteEmpty = __decorateClass([
+  customElement("prosekit-autocomplete-empty")
+], AutocompleteEmpty);
 export {
-  CommandEmpty
+  AutocompleteEmpty
 };

package/dist/{prosekit-lit-components-command-item.d.ts → prosekit-lit-components-autocomplete-item.d.ts}

@@ -1,8 +1,8 @@
 import * as lit from 'lit';
 import { LitElement, CSSResultGroup, PropertyValues } from 'lit';
-import { C as CommandListContext } from './list-context-2692a600.js';
+import { A as AutocompleteListContext } from './context-19474449.js';
 
-interface CommandItemProps {
+interface AutocompleteItemProps {
     value?: string;
     onSelect: VoidFunction;
 }
@@ -11,7 +11,7 @@ interface CommandItemProps {
  * navigation. Preferably pass a `value`, otherwise the value will be inferred
  * from the rendered item's `textContent`.
  */
-declare class CommandItem extends LitElement implements Partial<CommandItemProps> {
+declare class AutocompleteItem extends LitElement implements Partial<AutocompleteItemProps> {
     /** @hidden */
     static styles: CSSResultGroup;
     value: string;
@@ -20,11 +20,12 @@ declare class CommandItem extends LitElement implements Partial<CommandItemProps
     onSelect?: VoidFunction;
     /** @hidden */
     defaultSlot?: HTMLSlotElement;
-    listContext?: CommandListContext;
+    listContext?: AutocompleteListContext;
     get content(): string;
-    protected willUpdate(changedProperties: PropertyValues<CommandItem>): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
     /** @hidden */
     render(): lit.TemplateResult<1> | null;
 }
 
-export { CommandItem, CommandItemProps };
+export { AutocompleteItem, AutocompleteItemProps };

package/dist/prosekit-lit-components-autocomplete-item.js

@@ -0,0 +1,7 @@
+import {
+  AutocompleteItem
+} from "./chunk-UDTISUHF.js";
+import "./chunk-J73E7P6J.js";
+export {
+  AutocompleteItem
+};

package/dist/{prosekit-lit-components-command-list.d.ts → prosekit-lit-components-autocomplete-list.d.ts}

@@ -1,20 +1,22 @@
 import * as lit from 'lit';
 import { LitElement, CSSResultGroup, PropertyValues } from 'lit';
 import { Editor } from '@prosekit/core';
-import { C as CommandListContext } from './list-context-2692a600.js';
-import { C as CommandPopoverContext } from './popover-context-d5266bd6.js';
+import { A as AutocompletePopoverContext } from './context-436a56d3.js';
+import { A as AutocompleteListContext } from './context-19474449.js';
 
-interface CommandListProps {
+interface AutocompleteListProps {
     editor: Editor;
 }
-declare class CommandList extends LitElement implements Partial<CommandListProps> {
+declare class AutocompleteList extends LitElement implements Partial<AutocompleteListProps> {
     /** @hidden */
     static styles: CSSResultGroup;
+    /** @hidden */
     private controller;
     private get active();
+    private lastMouseMoveTime;
     editor?: Editor;
-    popoverContext: CommandPopoverContext | null;
-    context: CommandListContext;
+    popoverContext: AutocompletePopoverContext | null;
+    context: AutocompleteListContext;
     protected firstUpdated(): void;
     private get items();
     private get availableItems();
@@ -26,8 +28,9 @@ declare class CommandList extends LitElement implements Partial<CommandListProps
     /** @hidden */
     defaultSlot?: HTMLSlotElement;
     /** @hidden */
-    willUpdate(changedProperties: PropertyValues<CommandList>): void;
+    willUpdate(changedProperties: PropertyValues<this>): void;
     private updateSelectedByChange;
+    private handleMouseMove;
     private handleMouseOver;
     private handleClick;
     private handleMouseDown;
@@ -36,4 +39,4 @@ declare class CommandList extends LitElement implements Partial<CommandListProps
     render(): lit.TemplateResult<1>;
 }
 
-export { CommandList, CommandListProps };
+export { AutocompleteList, AutocompleteListProps };

package/dist/prosekit-lit-components-autocomplete-list.js

@@ -0,0 +1,8 @@
+import {
+  AutocompleteList
+} from "./chunk-65QAWC7L.js";
+import "./chunk-UDTISUHF.js";
+import "./chunk-J73E7P6J.js";
+export {
+  AutocompleteList
+};

package/dist/{prosekit-lit-components-command-popover.d.ts → prosekit-lit-components-autocomplete-popover.d.ts}

@@ -1,8 +1,8 @@
 import * as lit from 'lit';
-import { LitElement, CSSResultGroup, PropertyValues } from 'lit';
+import { LitElement, CSSResultGroup } from 'lit';
 import { ComputePositionConfig } from '@floating-ui/dom';
 import { Editor } from '@prosekit/core';
-import { C as CommandPopoverContext } from './popover-context-d5266bd6.js';
+import { A as AutocompletePopoverContext } from './context-436a56d3.js';
 
 /**
  * The `PopoverOptions` interface defines the options that can be passed to the
@@ -15,25 +15,20 @@ import { C as CommandPopoverContext } from './popover-context-d5266bd6.js';
  */
 type PopoverOptions = ComputePositionConfig;
 
-type QueryBuilder = (match: RegExpMatchArray, matchAfter?: RegExpMatchArray | null) => string;
-
-interface CommandPopoverProps {
+interface AutocompletePopoverProps {
     editor: Editor;
     regex: RegExp;
-    regexAfter?: RegExp;
-    queryBuilder?: QueryBuilder;
     popoverOptions?: PopoverOptions;
 }
-declare class CommandPopover extends LitElement implements Partial<CommandPopoverProps> {
+declare class AutocompletePopover extends LitElement implements Partial<AutocompletePopoverProps> {
     /** @hidden */
     static styles: CSSResultGroup;
+    /** @hidden */
     private controller;
     editor?: Editor;
     regex?: RegExp;
-    regexAfter?: RegExp;
-    queryBuilder: QueryBuilder;
     popoverOptions: PopoverOptions;
-    context: CommandPopoverContext;
+    context: AutocompletePopoverContext;
     /** @hidden */
     onSelect?: VoidFunction;
     private get list();
@@ -43,9 +38,9 @@ declare class CommandPopover extends LitElement implements Partial<CommandPopove
     /** @hidden */
     protected get active(): boolean;
     /** @hidden */
-    willUpdate(changedProperties: PropertyValues<CommandPopover>): void;
+    willUpdate(): void;
     /** @hidden */
     render(): lit.TemplateResult<1>;
 }
 
-export { CommandPopover, CommandPopoverProps, PopoverOptions, QueryBuilder };
+export { AutocompletePopover, AutocompletePopoverProps, PopoverOptions };

package/dist/{prosekit-lit-components-command-popover.js → prosekit-lit-components-autocomplete-popover.js}

@@ -1,18 +1,21 @@
 import {
-  commandPopoverContext,
-  isCommandList
-} from "./chunk-WPC5TQP7.js";
+  commandPopoverContext
+} from "./chunk-65QAWC7L.js";
+import "./chunk-UDTISUHF.js";
 import {
   __decorateClass,
   blockComponentStyles
-} from "./chunk-FB3RHUS6.js";
+} from "./chunk-J73E7P6J.js";
 
-// src/internal/popover/popover.ts
+// src/components/popover/index.ts
 import {
   autoUpdate,
   computePosition
 } from "@floating-ui/dom";
-import { LitElement, html } from "lit";
+import {
+  LitElement,
+  html
+} from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
 
@@ -22,7 +25,10 @@ function roundByDPR(value) {
   return Math.round(value * dpr) / dpr;
 }
 
-// src/internal/popover/popover.ts
+// src/components/popover/options.ts
+import "@floating-ui/dom";
+
+// src/components/popover/index.ts
 var Popover = class extends LitElement {
   /** @hidden */
   constructor() {
@@ -121,22 +127,40 @@ Popover = __decorateClass([
   customElement("prosekit-popover")
 ], Popover);
 
-// src/internal/command/popover.ts
+// src/components/autocomplete-popover/index.ts
 import { provide } from "@lit-labs/context";
-import { LitElement as LitElement2, html as html2 } from "lit";
+import "@prosekit/core";
+import { html as html2, LitElement as LitElement2 } from "lit";
 import { customElement as customElement2, property as property2, query as query2, state as state2 } from "lit/decorators.js";
 
-// src/internal/command/popover-controller.ts
-import { addSuggestion } from "@prosekit/extensions/suggestion";
-var CommandPopoverController = class {
+// src/components/autocomplete-list/helpers.ts
+function isAutocompleteList(element) {
+  var _a;
+  return ((_a = element == null ? void 0 : element.tagName) == null ? void 0 : _a.toLowerCase()) === "prosekit-autocomplete-list";
+}
+
+// src/components/autocomplete-popover/controller.ts
+import "@prosekit/core";
+import {
+  AutocompleteRule,
+  addAutocomplete
+} from "@prosekit/extensions/autocomplete";
+import "lit";
+
+// src/components/autocomplete-popover/helpers.ts
+function defaultQueryBuilder(match) {
+  return match[0].toLowerCase().replace(/[!"#$%&'()*+,-./:;<=>?@[\\\]^_`{|}~]/g, "").replace(/\s\s+/g, " ").trim();
+}
+
+// src/components/autocomplete-popover/controller.ts
+var AutocompletePopoverController = class {
   constructor(host, onChange) {
     this.host = host;
     this.onChange = onChange;
     this.reference = null;
     this.editor = null;
-    this.rules = [];
+    this.regex = null;
     this.cleanup = null;
-    this.queryBuilder = null;
     this.handleDismiss = null;
     this.handleSubmit = null;
     this.host.addController(this);
@@ -144,68 +168,64 @@ var CommandPopoverController = class {
   setEditor(editor) {
     if (this.editor !== editor) {
       this.editor = editor;
-      this.host.requestUpdate();
       this.addExtension();
-    }
-  }
-  setRules(rules) {
-    if (this.rules.length !== rules.length || this.rules.some((r, i) => r !== rules[i])) {
-      this.rules = rules;
       this.host.requestUpdate();
-      this.addExtension();
     }
   }
-  setQueryBuilder(queryBuilder) {
-    if (this.queryBuilder !== queryBuilder) {
-      this.queryBuilder = queryBuilder;
-      this.host.requestUpdate();
+  setRegex(regex) {
+    if (this.regex !== regex) {
+      this.regex = regex;
       this.addExtension();
+      this.host.requestUpdate();
     }
   }
-  hostDisconnected() {
-    var _a;
-    (_a = this.cleanup) == null ? void 0 : _a.call(this);
-    this.cleanup = null;
-  }
   addExtension() {
     var _a;
-    (_a = this.cleanup) == null ? void 0 : _a.call(this);
-    this.cleanup = null;
-    if (!this.editor || !this.rules || this.rules.length === 0) {
+    const regex = this.regex;
+    const editor = this.editor;
+    if (!regex || !editor) {
       return;
     }
-    const editor = this.editor;
-    const extension = addSuggestion({
-      rules: this.rules,
-      onMatch: ({ dismiss, deleteMatch, match, matchAfter }) => {
-        var _a2;
-        const span = editor.view.dom.querySelector(
-          ".prosemirror-prediction-match"
-        );
-        if (span) {
-          this.reference = span;
-        }
-        const query3 = (_a2 = this.queryBuilder) == null ? void 0 : _a2.call(this, match, matchAfter);
-        this.onChange(query3 != null ? query3 : "", !!this.reference);
-        this.handleDismiss = dismiss;
-        this.handleSubmit = deleteMatch;
-        setTimeout(() => {
-          this.host.requestUpdate();
-        }, 0);
-      },
-      onDeactivate: () => {
-        this.reference = null;
-        this.host.requestUpdate();
-        this.onChange("", false);
-        this.handleDismiss = null;
-        this.handleSubmit = null;
+    (_a = this.cleanup) == null ? void 0 : _a.call(this);
+    this.cleanup = null;
+    const handleEnter = (options) => {
+      const span = editor.view.dom.querySelector(
+        ".prosemirror-prediction-match"
+      );
+      if (span) {
+        this.reference = span;
       }
+      const query3 = defaultQueryBuilder(options.match);
+      this.onChange(query3 != null ? query3 : "", !!this.reference);
+      this.handleDismiss = options.ignoreMatch;
+      this.handleSubmit = options.deleteMatch;
+      setTimeout(() => {
+        this.host.requestUpdate();
+      }, 0);
+    };
+    const handleLeave = () => {
+      this.reference = null;
+      this.host.requestUpdate();
+      this.onChange("", false);
+      this.handleDismiss = null;
+      this.handleSubmit = null;
+    };
+    const rule = new AutocompleteRule({
+      regex,
+      onEnter: handleEnter,
+      onLeave: handleLeave
     });
+    const extension = addAutocomplete(rule);
     this.cleanup = editor.use(extension);
   }
+  hostDisconnected() {
+    var _a;
+    (_a = this.cleanup) == null ? void 0 : _a.call(this);
+    this.cleanup = null;
+  }
 };
 
-// src/internal/command/popover-default-options.ts
+// src/components/autocomplete-popover/default-popover-options.ts
 import {
   flip,
   inline,
@@ -253,22 +273,15 @@ var defaultPopoverOptions = {
   ]
 };
 
-// src/internal/command/query-builder.ts
-var defaultQueryBuilder = (match, matchAfter) => {
-  var _a;
-  const query3 = match[0] + ((_a = matchAfter == null ? void 0 : matchAfter[0]) != null ? _a : "");
-  return query3.toLowerCase().replace(/[!"#$%&'()*+,-./:;<=>?@[\\\]^_`{|}~]/g, "").replace(/\s\s+/g, " ").trim();
-};
-
-// src/internal/command/popover.ts
-var CommandPopover = class extends LitElement2 {
+// src/components/autocomplete-popover/index.ts
+var AutocompletePopover = class extends LitElement2 {
   constructor() {
     super(...arguments);
-    this.controller = new CommandPopoverController(
+    /** @hidden */
+    this.controller = new AutocompletePopoverController(
       this,
       this.updateContext.bind(this)
     );
-    this.queryBuilder = defaultQueryBuilder;
     this.popoverOptions = defaultPopoverOptions;
     this.context = {
       active: false,
@@ -285,7 +298,7 @@ var CommandPopover = class extends LitElement2 {
   }
   get list() {
     var _a, _b, _c;
-    return (_c = (_b = (_a = this.defaultSlot) == null ? void 0 : _a.assignedElements({ flatten: true })) == null ? void 0 : _b.find(isCommandList)) != null ? _c : null;
+    return (_c = (_b = (_a = this.defaultSlot) == null ? void 0 : _a.assignedElements({ flatten: true })) == null ? void 0 : _b.find(isAutocompleteList)) != null ? _c : null;
   }
   updateContext(query3, active) {
     if (this.context.query === query3 && this.context.active === active) {
@@ -303,23 +316,12 @@ var CommandPopover = class extends LitElement2 {
     return !!((_a = this.controller) == null ? void 0 : _a.reference);
   }
   /** @hidden */
-  willUpdate(changedProperties) {
-    if (changedProperties.has("editor") && this.editor) {
+  willUpdate() {
+    if (this.editor) {
       this.controller.setEditor(this.editor);
     }
-    if (changedProperties.has("regex") || changedProperties.has("regexAfter")) {
-      const regex = this.regex;
-      const regexAfter = this.regexAfter;
-      if (regex) {
-        const rule = {
-          match: regex,
-          matchAfter: regexAfter != null ? regexAfter : void 0
-        };
-        this.controller.setRules([rule]);
-      }
-    }
-    if (changedProperties.has("queryBuilder") && this.queryBuilder) {
-      this.controller.setQueryBuilder(this.queryBuilder);
+    if (this.regex) {
+      this.controller.setRegex(this.regex);
     }
   }
   /** @hidden */
@@ -329,35 +331,29 @@ var CommandPopover = class extends LitElement2 {
   }
 };
 /** @hidden */
-CommandPopover.styles = blockComponentStyles;
-__decorateClass([
-  property2({ attribute: false })
-], CommandPopover.prototype, "editor", 2);
-__decorateClass([
-  property2({ attribute: false })
-], CommandPopover.prototype, "regex", 2);
+AutocompletePopover.styles = blockComponentStyles;
 __decorateClass([
   property2({ attribute: false })
-], CommandPopover.prototype, "regexAfter", 2);
+], AutocompletePopover.prototype, "editor", 2);
 __decorateClass([
   property2({ attribute: false })
-], CommandPopover.prototype, "queryBuilder", 2);
+], AutocompletePopover.prototype, "regex", 2);
 __decorateClass([
   property2({ attribute: false })
-], CommandPopover.prototype, "popoverOptions", 2);
+], AutocompletePopover.prototype, "popoverOptions", 2);
 __decorateClass([
   provide({ context: commandPopoverContext }),
   state2()
-], CommandPopover.prototype, "context", 2);
+], AutocompletePopover.prototype, "context", 2);
 __decorateClass([
   property2({ attribute: false })
-], CommandPopover.prototype, "onSelect", 2);
+], AutocompletePopover.prototype, "onSelect", 2);
 __decorateClass([
   query2("slot")
-], CommandPopover.prototype, "defaultSlot", 2);
-CommandPopover = __decorateClass([
-  customElement2("prosekit-command-popover")
-], CommandPopover);
+], AutocompletePopover.prototype, "defaultSlot", 2);
+AutocompletePopover = __decorateClass([
+  customElement2("prosekit-autocomplete-popover")
+], AutocompletePopover);
 export {
-  CommandPopover
+  AutocompletePopover
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/lit",
   "type": "module",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -30,36 +30,36 @@
       "import": "./dist/prosekit-lit.js",
       "default": "./dist/prosekit-lit.js"
     },
-    "./components/command-empty": {
-      "types": "./dist/prosekit-lit-components-command-empty.d.ts",
-      "import": "./dist/prosekit-lit-components-command-empty.js",
-      "default": "./dist/prosekit-lit-components-command-empty.js"
+    "./components/autocomplete-empty": {
+      "types": "./dist/prosekit-lit-components-autocomplete-empty.d.ts",
+      "import": "./dist/prosekit-lit-components-autocomplete-empty.js",
+      "default": "./dist/prosekit-lit-components-autocomplete-empty.js"
     },
-    "./components/command-item": {
-      "types": "./dist/prosekit-lit-components-command-item.d.ts",
-      "import": "./dist/prosekit-lit-components-command-item.js",
-      "default": "./dist/prosekit-lit-components-command-item.js"
+    "./components/autocomplete-item": {
+      "types": "./dist/prosekit-lit-components-autocomplete-item.d.ts",
+      "import": "./dist/prosekit-lit-components-autocomplete-item.js",
+      "default": "./dist/prosekit-lit-components-autocomplete-item.js"
     },
-    "./components/command-list": {
-      "types": "./dist/prosekit-lit-components-command-list.d.ts",
-      "import": "./dist/prosekit-lit-components-command-list.js",
-      "default": "./dist/prosekit-lit-components-command-list.js"
+    "./components/autocomplete-list": {
+      "types": "./dist/prosekit-lit-components-autocomplete-list.d.ts",
+      "import": "./dist/prosekit-lit-components-autocomplete-list.js",
+      "default": "./dist/prosekit-lit-components-autocomplete-list.js"
     },
-    "./components/command-popover": {
-      "types": "./dist/prosekit-lit-components-command-popover.d.ts",
-      "import": "./dist/prosekit-lit-components-command-popover.js",
-      "default": "./dist/prosekit-lit-components-command-popover.js"
+    "./components/autocomplete-popover": {
+      "types": "./dist/prosekit-lit-components-autocomplete-popover.d.ts",
+      "import": "./dist/prosekit-lit-components-autocomplete-popover.js",
+      "default": "./dist/prosekit-lit-components-autocomplete-popover.js"
     }
   },
   "files": [
     "dist"
   ],
   "dependencies": {
-    "@floating-ui/dom": "^1.4.4",
+    "@floating-ui/dom": "^1.4.5",
     "@lit-labs/context": "^0.3.3",
     "@lit/reactive-element": "^1.6.2",
-    "@prosekit/core": "^0.0.3",
-    "@prosekit/extensions": "^0.0.3",
+    "@prosekit/core": "^0.0.5",
+    "@prosekit/extensions": "^0.0.5",
     "@prosekit/pm": "^0.0.3",
     "@superhuman/command-score": "^0.5.0",
     "lit": "^2.7.6",
@@ -84,17 +84,17 @@
       ".": [
         "./dist/prosekit-lit.d.ts"
       ],
-      "components/command-empty": [
-        "./dist/prosekit-lit-components-command-empty.d.ts"
+      "components/autocomplete-empty": [
+        "./dist/prosekit-lit-components-autocomplete-empty.d.ts"
       ],
-      "components/command-item": [
-        "./dist/prosekit-lit-components-command-item.d.ts"
+      "components/autocomplete-item": [
+        "./dist/prosekit-lit-components-autocomplete-item.d.ts"
       ],
-      "components/command-list": [
-        "./dist/prosekit-lit-components-command-list.d.ts"
+      "components/autocomplete-list": [
+        "./dist/prosekit-lit-components-autocomplete-list.d.ts"
       ],
-      "components/command-popover": [
-        "./dist/prosekit-lit-components-command-popover.d.ts"
+      "components/autocomplete-popover": [
+        "./dist/prosekit-lit-components-autocomplete-popover.d.ts"
       ]
     }
   }

package/src/index.ts

@@ -1,5 +1 @@
-/**
- * @module @prosekit/lit
- */
-
 export {}

package/dist/chunk-L6CSVKWR.js

@@ -1,9 +0,0 @@
-// src/internal/command/list-context.ts
-import { createContext } from "@lit-labs/context";
-var commandListContext = createContext(
-  "prosekit-command-list-context"
-);
-
-export {
-  commandListContext
-};

package/dist/chunk-WPC5TQP7.js

@@ -1,21 +0,0 @@
-// src/internal/command/popover-context.ts
-import { createContext } from "@lit-labs/context";
-var commandPopoverContext = createContext(
-  "prosekit-command-popover-context"
-);
-
-// src/internal/command/utils.ts
-function isCommandItem(element) {
-  var _a;
-  return ((_a = element == null ? void 0 : element.tagName) == null ? void 0 : _a.toLowerCase()) === "prosekit-command-item";
-}
-function isCommandList(element) {
-  var _a;
-  return ((_a = element == null ? void 0 : element.tagName) == null ? void 0 : _a.toLowerCase()) === "prosekit-command-list";
-}
-
-export {
-  commandPopoverContext,
-  isCommandItem,
-  isCommandList
-};

package/dist/prosekit-lit-components-command-empty.d.ts

@@ -1,16 +0,0 @@
-import * as lit from 'lit';
-import { LitElement, CSSResultGroup, PropertyValues } from 'lit';
-import { C as CommandListContext } from './list-context-2692a600.js';
-
-interface CommandEmptyProps {
-}
-declare class CommandEmpty extends LitElement implements CommandEmptyProps {
-    /** @hidden */
-    static styles: CSSResultGroup;
-    listContext?: CommandListContext;
-    protected willUpdate(_changedProperties: PropertyValues<CommandEmpty>): void;
-    /** @hidden */
-    render(): lit.TemplateResult<1> | null;
-}
-
-export { CommandEmpty, CommandEmptyProps };