@prosekit/lit 0.0.8 → 0.0.10

package/dist/{chunk-J73E7P6J.js → chunk-3UDA5JEW.js}

@@ -18,16 +18,9 @@ import { css } from "lit";
 var componentStyles = css`:host{box-sizing:border-box}:host *,:host ::after,:host ::before{box-sizing:inherit}`;
 
 // 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"
-);
+var blockComponentStyles = css2`${componentStyles}:host{display:block;border-style:solid;border-width:0}:host([hidden]){display:none}`;
 
 export {
   __decorateClass,
-  blockComponentStyles,
-  commandListContext
+  blockComponentStyles
 };

package/dist/{chunk-37EPOFI5.js → chunk-AWQAU2JR.js}

@@ -1,8 +1,10 @@
 import {
-  __decorateClass,
-  blockComponentStyles,
   commandListContext
-} from "./chunk-J73E7P6J.js";
+} from "./chunk-DYEHERSG.js";
+import {
+  __decorateClass,
+  blockComponentStyles
+} from "./chunk-3UDA5JEW.js";
 
 // src/components/autocomplete-item/component.ts
 import { consume } from "@lit-labs/context";

package/dist/chunk-BMDOOASL.js

@@ -0,0 +1,57 @@
+import {
+  comboBoxContext
+} from "./chunk-HMV7TD6T.js";
+import {
+  LightBlockElement
+} from "./chunk-TRZW33VF.js";
+import {
+  __decorateClass,
+  blockComponentStyles
+} from "./chunk-3UDA5JEW.js";
+
+// src/components/combo-box-item/component.ts
+import { consume } from "@lit-labs/context";
+import "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+var propNames = [];
+var ComboBoxItem = class extends LightBlockElement {
+  constructor() {
+    super(...arguments);
+    this.selected = false;
+  }
+  updated() {
+    var _a, _b, _c, _d;
+    const content = ((_a = this.textContent) != null ? _a : "").trim();
+    const query2 = ((_c = (_b = this.comboBoxContext) == null ? void 0 : _b.inputValue) != null ? _c : "").trim();
+    const match = content.toLowerCase().includes(query2.toLowerCase());
+    this.selected = match && content === ((_d = this.comboBoxContext) == null ? void 0 : _d.selectedValue);
+    this.ariaSelected = String(this.selected);
+    this.setHidden(!match);
+  }
+};
+/** @hidden */
+ComboBoxItem.styles = blockComponentStyles;
+__decorateClass([
+  property({ attribute: false })
+], ComboBoxItem.prototype, "editor", 2);
+__decorateClass([
+  query("slot")
+], ComboBoxItem.prototype, "defaultSlot", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "data-selected" })
+], ComboBoxItem.prototype, "selected", 2);
+__decorateClass([
+  consume({ context: comboBoxContext, subscribe: true }),
+  state({})
+], ComboBoxItem.prototype, "comboBoxContext", 2);
+__decorateClass([
+  property({ attribute: false })
+], ComboBoxItem.prototype, "onSelect", 2);
+ComboBoxItem = __decorateClass([
+  customElement("prosekit-combo-box-item")
+], ComboBoxItem);
+
+export {
+  propNames,
+  ComboBoxItem
+};

package/dist/chunk-DYEHERSG.js

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

package/dist/chunk-G5KPDHDH.js

@@ -0,0 +1,120 @@
+import {
+  LightBlockElement
+} from "./chunk-TRZW33VF.js";
+import {
+  __decorateClass,
+  blockComponentStyles
+} from "./chunk-3UDA5JEW.js";
+
+// src/components/popover/options.ts
+import "@floating-ui/dom";
+
+// src/components/popover/index.ts
+import {
+  autoUpdate,
+  computePosition
+} from "@floating-ui/dom";
+import "lit";
+import { customElement, property } from "lit/decorators.js";
+
+// src/utils/round-by-dpr.ts
+function roundByDPR(value) {
+  const dpr = window.devicePixelRatio || 1;
+  return Math.round(value * dpr) / dpr;
+}
+
+// src/components/popover/default-popover-options.ts
+import { offset, shift } from "@floating-ui/dom";
+var defaultPopoverOptions = {
+  placement: "bottom",
+  middleware: [offset(4), shift({ padding: 8 })]
+};
+
+// src/components/popover/index.ts
+var Popover = class extends LightBlockElement {
+  /** @hidden */
+  constructor() {
+    super();
+    this.active = false;
+    this.autoUpdate = false;
+  }
+  /** @hidden */
+  disconnectedCallback() {
+    this.cleanup();
+  }
+  /** @hidden */
+  updated() {
+    this.start();
+    this.setHidden(!this.active);
+  }
+  /** @hidden */
+  start() {
+    this.cleanup();
+    const reference = this.reference;
+    if (!reference)
+      return;
+    if (!this.active)
+      return;
+    if (this.autoUpdate) {
+      this.cleanupAutoUpdate = autoUpdate(
+        reference,
+        this,
+        () => void this.compute(),
+        this.autoUpdateOptions
+      );
+    } else {
+      void this.compute();
+    }
+  }
+  /** @hidden */
+  async compute() {
+    var _a, _b, _c;
+    const reference = this.reference;
+    if (!reference)
+      return;
+    if (!this.active)
+      return;
+    this.setHidden(false);
+    this.style.position = (_b = (_a = this.options) == null ? void 0 : _a.strategy) != null ? _b : "absolute";
+    const options = (_c = this.options) != null ? _c : defaultPopoverOptions;
+    const computed = await computePosition(reference, this, options);
+    const { x, y, strategy } = computed != null ? computed : { x: 0, y: 0, strategy: "absolute" };
+    this.style.top = "0";
+    this.style.left = "0";
+    this.style.position = strategy;
+    this.style.transform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`;
+  }
+  /** @hidden */
+  cleanup() {
+    var _a;
+    (_a = this.cleanupAutoUpdate) == null ? void 0 : _a.call(this);
+    this.cleanupAutoUpdate = void 0;
+  }
+};
+/** @hidden */
+Popover.styles = blockComponentStyles;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Popover.prototype, "active", 2);
+__decorateClass([
+  property({ attribute: false })
+], Popover.prototype, "reference", 2);
+__decorateClass([
+  property({ attribute: false })
+], Popover.prototype, "options", 2);
+__decorateClass([
+  property({
+    type: Boolean,
+    reflect: true
+  })
+], Popover.prototype, "autoUpdate", 2);
+__decorateClass([
+  property({ type: Object })
+], Popover.prototype, "autoUpdateOptions", 2);
+Popover = __decorateClass([
+  customElement("prosekit-popover")
+], Popover);
+
+export {
+  Popover
+};

package/dist/chunk-HMV7TD6T.js

@@ -0,0 +1,9 @@
+// src/components/combo-box/context.ts
+import { createContext } from "@lit-labs/context";
+var comboBoxContext = createContext(
+  "prosekit-combo-box-context"
+);
+
+export {
+  comboBoxContext
+};

package/dist/{chunk-HPMQEYGA.js → chunk-KGZID7N7.js}

@@ -1,8 +1,13 @@
 import {
-  __decorateClass,
-  blockComponentStyles,
   commandListContext
-} from "./chunk-J73E7P6J.js";
+} from "./chunk-DYEHERSG.js";
+import {
+  ListManager
+} from "./chunk-PCXKL6TA.js";
+import {
+  __decorateClass,
+  blockComponentStyles
+} from "./chunk-3UDA5JEW.js";
 
 // src/components/autocomplete-popover/context.ts
 import { createContext } from "@lit-labs/context";
@@ -13,7 +18,7 @@ var commandPopoverContext = createContext(
 // src/components/autocomplete-list/component.ts
 import { consume, provide } from "@lit-labs/context";
 import "@prosekit/core";
-import { html, LitElement } from "lit";
+import { LitElement, html } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 
 // src/utils/command-score.ts
@@ -25,6 +30,19 @@ function isAutocompleteItem(element) {
   var _a;
   return ((_a = element == null ? void 0 : element.tagName) == null ? void 0 : _a.toLowerCase()) === "prosekit-autocomplete-item";
 }
+function queryClosestAutocompleteItem(element) {
+  if (!element) {
+    return null;
+  }
+  if (isAutocompleteItem(element)) {
+    return element;
+  }
+  const item = element.closest("prosekit-autocomplete-item");
+  if (isAutocompleteItem(item)) {
+    return item;
+  }
+  return null;
+}
 
 // src/components/autocomplete-list/controller.ts
 import {
@@ -70,34 +88,30 @@ var AutocompleteList = class extends LitElement {
   constructor() {
     super(...arguments);
     /** @hidden */
-    this.controller = new AutocompleteListController(this, {
-      ArrowUp: () => {
-        if (!this.active)
-          return false;
-        this.updateSelectedByChange(-1);
-        return true;
-      },
-      ArrowDown: () => {
-        if (!this.active)
-          return false;
-        this.updateSelectedByChange(1);
-        return true;
-      },
-      Escape: () => {
+    this.listManager = new ListManager({
+      getItems: () => this.items,
+      getSelectedValue: () => this.context.selectedValue,
+      setSelectedValue: (value) => this.updateValue(value),
+      getItemValue: (item) => item.content,
+      queryClosestItem: queryClosestAutocompleteItem,
+      getActive: () => this.active,
+      onDismiss: () => {
         var _a, _b;
-        if (!this.active)
-          return false;
-        (_b = (_a = this.popoverContext) == null ? void 0 : _a.handleDismiss) == null ? void 0 : _b.call(_a);
-        return true;
+        return (_b = (_a = this.popoverContext) == null ? void 0 : _a.handleDismiss) == null ? void 0 : _b.call(_a);
       },
-      Enter: () => {
-        if (!this.active)
-          return false;
-        this.handleSelect(this.selectedItem);
-        return true;
+      onSelect: (item) => {
+        var _a, _b, _c;
+        (_b = (_a = this.popoverContext) == null ? void 0 : _a.handleSubmit) == null ? void 0 : _b.call(_a);
+        (_c = item == null ? void 0 : item.onSelect) == null ? void 0 : _c.call(item);
       }
     });
-    this.lastMouseMoveTime = 0;
+    /** @hidden */
+    this.controller = new AutocompleteListController(this, {
+      ArrowUp: () => this.listManager.handleArrowUp(),
+      ArrowDown: () => this.listManager.handleArrowDown(),
+      Escape: () => this.listManager.handleEscape(),
+      Enter: () => this.listManager.handleEnter()
+    });
     this.popoverContext = null;
     this.context = {
       scores: /* @__PURE__ */ new Map(),
@@ -110,30 +124,30 @@ var AutocompleteList = class extends LitElement {
     return (_b = (_a = this.popoverContext) == null ? void 0 : _a.active) != null ? _b : false;
   }
   firstUpdated() {
-    this.selectFirstItem();
+    this.listManager.selectFirstItem();
+    this.addEventListener(
+      "mousemove",
+      (event) => this.listManager.handleMouseMove(event)
+    );
+    this.addEventListener(
+      "mouseover",
+      (event) => this.listManager.handleMouseOver(event)
+    );
+    this.addEventListener(
+      "mousedown",
+      (event) => this.listManager.handleMouseDown(event)
+    );
+    this.addEventListener(
+      "click",
+      (event) => this.listManager.handleClick(event)
+    );
   }
   get items() {
     var _a, _b, _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;
-    return (_b = (_a = this.items) == null ? void 0 : _a.filter((item) => !item.hidden)) != null ? _b : [];
-  }
-  get firstItem() {
-    var _a;
-    return (_a = this.availableItems[0]) != null ? _a : null;
-  }
-  get selectedItem() {
-    var _a;
-    return (_a = this.availableItems.find(
-      (item) => item.content === this.context.selectedValue
-    )) != null ? _a : null;
-  }
   selectFirstItem() {
-    var _a, _b;
-    const selected = (_b = (_a = this.firstItem) == null ? void 0 : _a.content) != null ? _b : "";
-    this.updateValue(selected);
+    this.listManager.selectFirstItem();
   }
   updateValue(selectedValue) {
     if (this.context.selectedValue === selectedValue)
@@ -165,54 +179,9 @@ var AutocompleteList = class extends LitElement {
     );
     this.context = { ...this.context, scores };
   }
-  updateSelectedByChange(change) {
-    const items = this.availableItems;
-    if (items.length === 0) {
-      return;
-    }
-    const selectedItem = this.selectedItem;
-    const selectedIndex = selectedItem ? items.indexOf(selectedItem) : -1;
-    let nextIndex = selectedIndex + change;
-    if (nextIndex < 0) {
-      nextIndex = 0;
-    } else if (nextIndex >= items.length) {
-      nextIndex = items.length - 1;
-    }
-    if (selectedIndex !== nextIndex) {
-      this.updateValue(items[nextIndex].content);
-    }
-  }
-  handleMouseMove() {
-    this.lastMouseMoveTime = Date.now();
-  }
-  handleMouseOver(event) {
-    if (this.lastMouseMoveTime + 500 < Date.now()) {
-      return;
-    }
-    const target = event.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-autocomplete-item");
-    if (item && isAutocompleteItem(item)) {
-      this.handleSelect(item);
-    }
-  }
-  handleMouseDown(event) {
-    event.preventDefault();
-  }
-  handleSelect(item) {
-    var _a, _b, _c;
-    (_b = (_a = this.popoverContext) == null ? void 0 : _a.handleSubmit) == null ? void 0 : _b.call(_a);
-    (_c = item == null ? void 0 : item.onSelect) == null ? void 0 : _c.call(item);
-  }
   /** @hidden */
   render() {
-    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>`;
+    return html`<slot></slot>`;
   }
 };
 /** @hidden */

package/dist/chunk-PCXKL6TA.js

@@ -0,0 +1,109 @@
+// src/manager/list-manager.ts
+var ListManager = class {
+  constructor(options) {
+    this.lastMouseMoveTime = 0;
+    this.getItems = options.getItems;
+    this.getSelectedValue = options.getSelectedValue;
+    this.setSelectedValue = options.setSelectedValue;
+    this.getItemValue = options.getItemValue;
+    this.queryClosestItem = options.queryClosestItem;
+    this.getActive = options.getActive;
+    this.onDismiss = options.onDismiss;
+    this.onSelect = options.onSelect;
+  }
+  get items() {
+    return this.getItems();
+  }
+  get availableItems() {
+    var _a, _b;
+    return (_b = (_a = this.items) == null ? void 0 : _a.filter((item) => !item.hidden)) != null ? _b : [];
+  }
+  get firstItem() {
+    var _a;
+    return (_a = this.availableItems[0]) != null ? _a : null;
+  }
+  get selectedItem() {
+    var _a;
+    return (_a = this.availableItems.find(
+      (item) => this.getItemValue(item) === this.getSelectedValue()
+    )) != null ? _a : null;
+  }
+  updateSelectedByChange(change) {
+    const items = this.availableItems;
+    if (items.length === 0) {
+      return;
+    }
+    const selectedItem = this.selectedItem;
+    const selectedIndex = selectedItem ? items.indexOf(selectedItem) : -1;
+    let nextIndex = selectedIndex + change;
+    if (nextIndex < 0) {
+      nextIndex = 0;
+    } else if (nextIndex >= items.length) {
+      nextIndex = items.length - 1;
+    }
+    if (selectedIndex !== nextIndex) {
+      this.setSelectedValue(this.getItemValue(items[nextIndex]));
+    }
+  }
+  handleSelect(item) {
+    this.setSelectedValue(this.getItemValue(item));
+  }
+  selectFirstItem() {
+    const item = this.firstItem;
+    const value = item ? this.getItemValue(item) : "";
+    this.setSelectedValue(value);
+  }
+  handleMouseMove(_event) {
+    this.lastMouseMoveTime = Date.now();
+  }
+  handleMouseOver(event) {
+    if (this.lastMouseMoveTime + 500 < Date.now()) {
+      return;
+    }
+    const target = event.target;
+    const item = target && this.queryClosestItem(target);
+    if (item) {
+      this.setSelectedValue(this.getItemValue(item));
+    }
+  }
+  handleMouseDown(event) {
+    event.preventDefault();
+  }
+  handleClick(event) {
+    event.preventDefault();
+    const target = event.target;
+    const item = target && this.queryClosestItem(target);
+    if (item) {
+      this.handleSelect(item);
+      this.onSelect(item);
+    }
+  }
+  handleArrowUp() {
+    if (!this.getActive())
+      return false;
+    this.updateSelectedByChange(-1);
+    return true;
+  }
+  handleArrowDown() {
+    if (!this.getActive())
+      return false;
+    this.updateSelectedByChange(1);
+    return true;
+  }
+  handleEscape() {
+    if (!this.getActive())
+      return false;
+    this.onDismiss();
+    return true;
+  }
+  handleEnter() {
+    if (!this.getActive())
+      return false;
+    this.onSelect(this.selectedItem);
+    return true;
+  }
+};
+
+export {
+  ListManager
+};

package/dist/chunk-TRZW33VF.js

@@ -0,0 +1,35 @@
+import {
+  blockComponentStyles
+} from "./chunk-3UDA5JEW.js";
+
+// src/components/block-element/index.ts
+import { LitElement } from "lit";
+var BlockElement = class extends LitElement {
+  setHidden(hidden) {
+    if (this.hidden !== hidden) {
+      this.hidden = hidden;
+      const display = this.style.display;
+      this.style.display = hidden ? "none" : display === "none" ? "" : display;
+    }
+  }
+};
+var LightBlockElement = class extends BlockElement {
+  createRenderRoot() {
+    return this;
+  }
+};
+var ShadowBlockElement = class extends BlockElement {
+  setHidden(hidden) {
+    if (this.hidden !== hidden) {
+      this.hidden = hidden;
+      const display = this.style.display;
+      this.style.display = hidden ? "none" : display === "none" ? "" : display;
+    }
+  }
+};
+/** @hidden */
+ShadowBlockElement.styles = blockComponentStyles;
+
+export {
+  LightBlockElement
+};

package/dist/index-2645d161.d.ts

@@ -0,0 +1,10 @@
+import { LitElement } from 'lit';
+
+declare class BlockElement extends LitElement {
+    setHidden(hidden: boolean): void;
+}
+declare class LightBlockElement extends BlockElement {
+    createRenderRoot(): this;
+}
+
+export { LightBlockElement as L };

package/dist/index-c461623f.d.ts

@@ -0,0 +1,67 @@
+import { Editor } from '@prosekit/core';
+import { CSSResultGroup } from 'lit';
+import { L as LightBlockElement } from './index-2645d161.js';
+
+declare class ListManager<Item extends {
+    hidden: boolean;
+} & HTMLElement> {
+    private lastMouseMoveTime;
+    private getItems;
+    private getSelectedValue;
+    private setSelectedValue;
+    private getItemValue;
+    private queryClosestItem;
+    private getActive;
+    private onDismiss;
+    private onSelect;
+    constructor(options: {
+        getItems: () => Item[];
+        getSelectedValue: () => string;
+        setSelectedValue: (value: string) => void;
+        getItemValue: (item: Item) => string;
+        queryClosestItem: (element: HTMLElement) => Item | null;
+        getActive: () => boolean;
+        onDismiss: () => void;
+        onSelect: (item?: Item | null) => void;
+    });
+    get items(): Item[];
+    get availableItems(): Item[];
+    get firstItem(): Item | null;
+    get selectedItem(): Item | null;
+    private updateSelectedByChange;
+    private handleSelect;
+    selectFirstItem(): void;
+    handleMouseMove(_event: MouseEvent): void;
+    handleMouseOver(event: MouseEvent): void;
+    handleMouseDown(event: MouseEvent): void;
+    handleClick(event: MouseEvent): void;
+    handleArrowUp(): boolean;
+    handleArrowDown(): boolean;
+    handleEscape(): boolean;
+    handleEnter(): boolean;
+}
+
+type ComboBoxContext = {
+    inputValue: string;
+    setInputValue: (val: string) => void;
+    selectedValue: string;
+    setSelectedValue: (val: string) => void;
+    listManager: ListManager<ComboBoxItem>;
+};
+
+declare const propNames: never[];
+type ComboBoxItemProps = Record<string, never>;
+declare class ComboBoxItem extends LightBlockElement {
+    /** @hidden */
+    static styles: CSSResultGroup;
+    editor?: Editor;
+    /** @hidden */
+    defaultSlot?: HTMLSlotElement;
+    selected: boolean;
+    comboBoxContext?: ComboBoxContext;
+    /** @hidden */
+    onSelect?: VoidFunction;
+    protected updated(): void;
+}
+
+export { ComboBoxContext as C, ComboBoxItem as a, ComboBoxItemProps as b, propNames as p };