@prosekit/web 0.1.10 → 0.2.0

package/dist/_tsup-dts-rollup.d.ts

@@ -29,6 +29,7 @@ import { UpdateHandler } from '@prosekit/core';
 import { usePopoverContent } from '@aria-ui/popover';
 import { usePopoverRoot } from '@aria-ui/popover';
 import { usePopoverTrigger } from '@aria-ui/popover';
+import { useTooltipContent } from '@aria-ui/tooltip';
 import { useTooltipRoot } from '@aria-ui/tooltip';
 import { useTooltipTrigger } from '@aria-ui/tooltip';
 import type { VirtualElement } from '@floating-ui/dom';
@@ -320,7 +321,8 @@ export { defaultBlockPopoverProps as defaultBlockPopoverProps_alias_1 }
 
 declare const defaultInlinePopoverProps: Readonly<{
     editor: null;
-    open: true;
+    defaultOpen: true;
+    open: false;
     onOpenChange: null;
     placement: "top";
     offset: 12;
@@ -434,16 +436,27 @@ declare interface InlinePopoverProps extends Omit<OverlayPositionerProps, 'place
      * @default null
      */
     editor: Editor | null;
+    /**
+     * Whether the popover is open by default when some inline content is
+     * selected.
+     *
+     * When `defaultOpen` is true, the popover will open or close based on the
+     * inline selection. When `defaultOpen` is false, the popover will never be
+     * opened unless the `open` prop is true.
+     *
+     * @default true
+     */
+    defaultOpen: boolean;
     /**
      * Whether the popover is open.
      *
      * Notice that the popover will be always hidden if the inline selection is empty.
      *
-     * @default `true`
+     * @default false
      */
     open: boolean;
     /**
-     * A callback that is called when the popover's open state changes.
+     * Event handler called when the open state changed caused by user interaction (i.e. select or unselect inline content).
      *
      * @default null
      */
@@ -486,6 +499,8 @@ export declare function isFinitePositiveNumber(value: unknown): value is number;
 
 export declare function isInCodeBlock(selection: Selection_2): boolean | undefined;
 
+export declare function omit<T extends Record<string, unknown>, K extends keyof T>(object: T, keys: K[]): Omit<T, K>;
+
 /**
  * @internal
  */
@@ -656,17 +671,17 @@ declare const TooltipTriggerElement_base: {
 export { TooltipTriggerProps }
 export { TooltipTriggerProps as TooltipTriggerProps_alias_1 }
 
-export declare function useAutocompleteEmpty(element: ConnectableElement, _props?: Partial<AutocompleteEmptyProps>): SignalState<AutocompleteEmptyProps>;
+export declare function useAutocompleteEmpty(element: ConnectableElement): void;
 
-export declare function useAutocompleteItem(element: ConnectableElement, props?: Partial<AutocompleteItemProps>): SignalState<AutocompleteItemProps>;
+export declare function useAutocompleteItem(element: ConnectableElement, state: SignalState<AutocompleteItemProps>): void;
 
-export declare function useAutocompleteList(element: ConnectableElement, props?: Partial<AutocompleteListProps>): SignalState<AutocompleteListProps>;
+export declare function useAutocompleteList(element: ConnectableElement, state: SignalState<AutocompleteListProps>): void;
 
-export declare function useAutocompletePopover(host: ConnectableElement, props?: Partial<AutocompletePopoverProps>): SignalState<Readonly<AutocompletePopoverProps>>;
+export declare function useAutocompletePopover(host: ConnectableElement, state: SignalState<AutocompletePopoverProps>): void;
 
-export declare function useBlockDragHandle(host: ConnectableElement, props?: Partial<BlockDragHandleProps>): SignalState<BlockDragHandleProps>;
+export declare function useBlockDragHandle(host: ConnectableElement, state: SignalState<BlockDragHandleProps>): void;
 
-export declare function useBlockPopover(host: ConnectableElement, props?: Partial<BlockPopoverProps>): SignalState<BlockPopoverProps>;
+export declare function useBlockPopover(host: ConnectableElement, state: SignalState<BlockPopoverProps>): void;
 
 export declare function useEditorExtension(host: ConnectableElement, editor: ReadonlySignal<Editor | null>, extension: Extension): void;
 
@@ -682,7 +697,7 @@ export declare function useEditorUpdateEvent(host: ConnectableElement, editor: R
 
 export declare function useFirstRendering(host: ConnectableElement): ReadonlySignal<boolean>;
 
-export declare function useInlinePopover(host: ConnectableElement, props?: Partial<InlinePopoverProps>): SignalState<Readonly<InlinePopoverProps>>;
+export declare function useInlinePopover(host: ConnectableElement, state: SignalState<InlinePopoverProps>): void;
 
 export { usePopoverContent }
 
@@ -690,11 +705,11 @@ export { usePopoverRoot }
 
 export { usePopoverTrigger }
 
-export declare function useResizableHandle(host: ConnectableElement, props?: Partial<ResizableHandleProps>): SignalState<Readonly<ResizableHandleProps>>;
+export declare function useResizableHandle(host: ConnectableElement, state: SignalState<ResizableHandleProps>): void;
 
-export declare function useResizableRoot(host: ConnectableElement, props?: Partial<ResizableRootProps>): SignalState<Readonly<ResizableRootProps>>;
+export declare function useResizableRoot(host: ConnectableElement, state: SignalState<ResizableRootProps>): void;
 
-export declare function useTooltipContent(element: ConnectableElement, props?: Partial<TooltipContentProps>): SignalState<TooltipContentProps>;
+export { useTooltipContent }
 
 export { useTooltipRoot }
 

package/dist/{chunk-VJEVDINM.js → chunk-MZSYOTZT.js}

@@ -5,7 +5,7 @@ import {
 function useEditorExtension(host, editor, extension) {
   useEffect(host, () => {
     var _a;
-    return (_a = editor.value) == null ? void 0 : _a.use(extension);
+    return (_a = editor.get()) == null ? void 0 : _a.use(extension);
   });
 }
 

package/dist/prosekit-web-autocomplete.js

@@ -1,29 +1,29 @@
 import {
   useEditorExtension
-} from "./chunk-VJEVDINM.js";
+} from "./chunk-MZSYOTZT.js";
 import {
   defineCustomElement
 } from "./chunk-Y2CJYXR5.js";
 
 // src/components/autocomplete/autocomplete-empty/element.gen.ts
-import { ElementMixin } from "@aria-ui/core";
+import { ElementBuilder } from "@aria-ui/core";
 
 // src/components/autocomplete/autocomplete-empty/props.ts
 var defaultAutocompleteEmptyProps = {};
 
 // src/components/autocomplete/autocomplete-empty/state.ts
 import { useListboxEmpty } from "@aria-ui/listbox";
-function useAutocompleteEmpty(element, _props) {
-  return useListboxEmpty(element), {};
+function useAutocompleteEmpty(element) {
+  useListboxEmpty(element);
 }
 
 // src/components/autocomplete/autocomplete-empty/element.gen.ts
-var AutocompleteEmptyElement = class extends ElementMixin(useAutocompleteEmpty, defaultAutocompleteEmptyProps) {
+var AutocompleteEmptyElement = class extends ElementBuilder(useAutocompleteEmpty, defaultAutocompleteEmptyProps) {
 };
 defineCustomElement("prosekit-autocomplete-empty", AutocompleteEmptyElement);
 
 // src/components/autocomplete/autocomplete-item/element.gen.ts
-import { ElementMixin as ElementMixin2 } from "@aria-ui/core";
+import { ElementBuilder as ElementBuilder2 } from "@aria-ui/core";
 
 // src/components/autocomplete/autocomplete-item/props.ts
 var defaultAutocompleteItemProps = {
@@ -51,21 +51,22 @@ var queryContext = createContext(
 );
 
 // src/components/autocomplete/autocomplete-item/state.ts
-function useAutocompleteItem(element, props) {
-  let { onSelect, value } = useListboxItem(element, props), open = openContext.consume(element);
-  return useEffect(element, () => {
+function useAutocompleteItem(element, state) {
+  useListboxItem(element, state);
+  let open = openContext.consume(element);
+  useEffect(element, () => {
     var _a;
-    !value.peek() && open.value && (value.value = (_a = element.textContent) != null ? _a : "");
-  }), { onSelect, value };
+    !state.value.peek() && open.get() && state.value.set((_a = element.textContent) != null ? _a : "");
+  });
 }
 
 // src/components/autocomplete/autocomplete-item/element.gen.ts
-var AutocompleteItemElement = class extends ElementMixin2(useAutocompleteItem, defaultAutocompleteItemProps) {
+var AutocompleteItemElement = class extends ElementBuilder2(useAutocompleteItem, defaultAutocompleteItemProps) {
 };
 defineCustomElement("prosekit-autocomplete-item", AutocompleteItemElement);
 
 // src/components/autocomplete/autocomplete-list/element.gen.ts
-import { ElementMixin as ElementMixin3 } from "@aria-ui/core";
+import { ElementBuilder as ElementBuilder3 } from "@aria-ui/core";
 
 // src/components/autocomplete/autocomplete-list/props.ts
 import { defaultListboxProps } from "@aria-ui/listbox";
@@ -76,76 +77,86 @@ var defaultFilter = defaultListboxProps.filter, defaultAutocompleteListProps = {
 
 // src/components/autocomplete/autocomplete-list/state.ts
 import {
-  assignProps,
   createSignal,
+  mapSignals,
   useEffect as useEffect2
 } from "@aria-ui/core";
-import { useListbox } from "@aria-ui/listbox";
+import {
+  defaultListboxProps as defaultListboxProps2,
+  useListbox
+} from "@aria-ui/listbox";
 import {
   Priority,
   defineDOMEventHandler,
   withPriority
 } from "@prosekit/core";
-function useAutocompleteList(element, props) {
-  let fullProps = assignProps(defaultAutocompleteListProps, props), editor = createSignal(fullProps.editor), open = openContext.consume(element), query = queryContext.consume(element), onSubmit = onSubmitContext.consume(element), onKeydownHandlerAdd = useKeyboardHandler(element, open, editor), onValueChange = (value) => {
+
+// src/utils/omit.ts
+function omit(object, keys) {
+  return Object.fromEntries(
+    Object.entries(object).filter(([key]) => !keys.includes(key))
+  );
+}
+
+// src/components/autocomplete/autocomplete-list/state.ts
+function useAutocompleteList(element, state) {
+  let open = openContext.consume(element), query = queryContext.consume(element), onSubmit = onSubmitContext.consume(element), onKeydownHandlerAdd = useKeyboardHandler(element, open, state.editor), onValueChange = (value) => {
     var _a;
     value && ((_a = onSubmit.peek()) == null || _a());
-  }, {
-    query: listboxQuery,
-    value: listboxValue,
-    filter,
-    autoFocus
-  } = useListbox(element, {
-    onKeydownHandlerAdd,
-    onValueChange,
-    filter: fullProps.filter
-  });
-  return useEffect2(element, () => {
-    listboxQuery.value = query.value;
+  }, listboxState = {
+    ...mapSignals({
+      ...omit(defaultListboxProps2, ["filter"]),
+      onKeydownHandlerAdd,
+      onValueChange
+    }),
+    filter: state.filter
+  };
+  useListbox(element, listboxState), useEffect2(element, () => {
+    listboxState.query.set(query.get());
   }), useEffect2(element, () => {
-    open.value || (listboxValue.value = "", query.value = "");
+    open.get() || (listboxState.value.set(""), query.set(""));
   }), useEffect2(element, () => {
-    if (!open.value)
-      autoFocus.value = !1;
+    if (!open.get())
+      listboxState.autoFocus.set(!1);
     else {
       let canceled = !1;
       return requestAnimationFrame(() => {
-        canceled || (autoFocus.value = !0);
+        canceled || listboxState.autoFocus.set(!0);
       }), () => {
         canceled = !0;
       };
     }
   }), useEffect2(element, () => {
     element.tabIndex = -1;
-  }), { editor, filter };
+  });
 }
 function useKeyboardHandler(element, open, editor) {
   let keydownHandler = createSignal(
     null
   ), disposeKeydownHandler = null;
   return useEffect2(element, () => {
-    let editorValue = editor.value, keydownHandlerValue = keydownHandler.value;
+    let editorValue = editor.get(), keydownHandlerValue = keydownHandler.get();
     if (!editorValue || !keydownHandlerValue)
       return;
     let extension = defineDOMEventHandler(
       "keydown",
-      (view, event) => view.composing || event.defaultPrevented || !open.value ? !1 : (keydownHandlerValue(event), event.defaultPrevented)
+      (view, event) => view.composing || event.defaultPrevented || !open.get() ? !1 : (keydownHandlerValue(event), event.defaultPrevented)
     );
     disposeKeydownHandler == null || disposeKeydownHandler(), disposeKeydownHandler = editorValue.use(
       withPriority(extension, Priority.highest)
     );
-  }), (keydownHandlerValue) => (keydownHandler.value = keydownHandlerValue, () => {
+  }), (keydownHandlerValue) => (keydownHandler.set(keydownHandlerValue), () => {
     disposeKeydownHandler == null || disposeKeydownHandler(), disposeKeydownHandler = null;
   });
 }
 
 // src/components/autocomplete/autocomplete-list/element.gen.ts
-var AutocompleteListElement = class extends ElementMixin3(useAutocompleteList, defaultAutocompleteListProps) {
+var AutocompleteListElement = class extends ElementBuilder3(useAutocompleteList, defaultAutocompleteListProps) {
 };
 defineCustomElement("prosekit-autocomplete-list", AutocompleteListElement);
 
 // src/components/autocomplete/autocomplete-popover/element.gen.ts
-import { ElementMixin as ElementMixin4 } from "@aria-ui/core";
+import { ElementBuilder as ElementBuilder4 } from "@aria-ui/core";
 
 // src/components/autocomplete/autocomplete-popover/props.ts
 import { defaultOverlayPositionerProps } from "@aria-ui/overlay";
@@ -166,10 +177,8 @@ var body = typeof document != "undefined" && document.querySelector("body"), def
 
 // src/components/autocomplete/autocomplete-popover/state.ts
 import {
-  assignProps as assignProps2,
   createComputed,
   createSignal as createSignal3,
-  mapSignals,
   useAnimationFrame,
   useEffect as useEffect4
 } from "@aria-ui/core";
@@ -194,7 +203,7 @@ function useFirstRendering(host) {
   let firstRendering = createSignal2(!0);
   return useEffect3(host, () => {
     requestAnimationFrame(() => {
-      firstRendering.value = !1;
+      firstRendering.set(!1);
     });
   }), firstRendering;
 }
@@ -205,12 +214,8 @@ function defaultQueryBuilder(match) {
 }
 
 // src/components/autocomplete/autocomplete-popover/state.ts
-function useAutocompletePopover(host, props) {
-  let state = mapSignals(assignProps2(defaultAutocompletePopoverProps, props));
-  return useAutocompletePopoverState(host, state), state;
-}
-function useAutocompletePopoverState(host, state) {
-  let { editor, regex, ...overlayState } = state, reference = createSignal3(null), query = createSignal3(""), onDismiss = createSignal3(null), onSubmit = createSignal3(null), presence = createComputed(() => !!reference.value);
+function useAutocompletePopover(host, state) {
+  let { editor, regex, ...overlayState } = state, reference = createSignal3(null), query = createSignal3(""), onDismiss = createSignal3(null), onSubmit = createSignal3(null), presence = createComputed(() => !!reference.get());
   queryContext.provide(host, query), onSubmitContext.provide(host, onSubmit), openContext.provide(host, presence), useEscapeKeydown(host, editor, createKeymapHandler(onDismiss, presence)), useAutocompleteExtension(
     host,
     editor,
@@ -223,10 +228,10 @@ function useAutocompletePopoverState(host, state) {
   let firstRendering = useFirstRendering(host);
   useEffect4(host, () => {
     var _a;
-    let queryValue = query.value;
+    let queryValue = query.get();
     firstRendering.peek() || (_a = state.onQueryChange.peek()) == null || _a(queryValue);
   }), useAnimationFrame(host, () => {
-    let presenceValue = presence.value, onOpenChangeValue = state.onOpenChange.peek();
+    let presenceValue = presence.get(), onOpenChangeValue = state.onOpenChange.peek();
     if (onOpenChangeValue)
       return () => {
         onOpenChangeValue(presenceValue);
@@ -235,7 +240,7 @@ function useAutocompletePopoverState(host, state) {
 }
 function useAutocompleteExtension(host, editor, regex, reference, query, onDismiss, onSubmit) {
   useEffect4(host, () => {
-    let editorValue = editor.value, regexValue = regex.value;
+    let editorValue = editor.get(), regexValue = regex.get();
     if (!(!editorValue || !regexValue))
       return addAutocompleteExtension(
         editorValue,
@@ -250,9 +255,9 @@ function useAutocompleteExtension(host, editor, regex, reference, query, onDismi
 function addAutocompleteExtension(editor, regex, reference, query, onDismiss, onSubmit) {
   let handleEnter = (options) => {
     let span = editor.view.dom.querySelector(".prosemirror-prediction-match");
-    span && (reference.value = span), query.value = defaultQueryBuilder(options.match), onDismiss.value = options.ignoreMatch, onSubmit.value = options.deleteMatch;
+    span && reference.set(span), query.set(defaultQueryBuilder(options.match)), onDismiss.set(options.ignoreMatch), onSubmit.set(options.deleteMatch);
   }, handleLeave = () => {
-    reference.value = null, query.value = "", onDismiss.value = null, onSubmit.value = null;
+    reference.set(null), query.set(""), onDismiss.set(null), onSubmit.set(null);
   }, rule = new AutocompleteRule({
     regex,
     onEnter: handleEnter,
@@ -262,7 +267,7 @@ function addAutocompleteExtension(editor, regex, reference, query, onDismiss, on
 }
 function createKeymapHandler(handler, enabled) {
   return () => {
-    if (!enabled.value)
+    if (!enabled.get())
       return !1;
     let fn = handler.peek();
     return fn ? (fn(), !0) : !1;
@@ -274,7 +279,7 @@ function useEscapeKeydown(host, editor, handler) {
 }
 
 // src/components/autocomplete/autocomplete-popover/element.gen.ts
-var AutocompletePopoverElement = class extends ElementMixin4(useAutocompletePopover, defaultAutocompletePopoverProps) {
+var AutocompletePopoverElement = class extends ElementBuilder4(useAutocompletePopover, defaultAutocompletePopoverProps) {
 };
 defineCustomElement("prosekit-autocomplete-popover", AutocompletePopoverElement);
 export {

package/dist/prosekit-web-block-handle.js

@@ -1,12 +1,12 @@
 import {
   useEditorExtension
-} from "./chunk-VJEVDINM.js";
+} from "./chunk-MZSYOTZT.js";
 import {
   defineCustomElement
 } from "./chunk-Y2CJYXR5.js";
 
 // src/components/block-handle/block-drag-handle/element.gen.ts
-import { ElementMixin } from "@aria-ui/core";
+import { ElementBuilder } from "@aria-ui/core";
 
 // src/components/block-handle/block-drag-handle/props.ts
 var defaultBlockDragHandleProps = Object.freeze({
@@ -15,8 +15,6 @@ var defaultBlockDragHandleProps = Object.freeze({
 
 // src/components/block-handle/block-drag-handle/state.ts
 import {
-  assignProps,
-  mapSignals,
   useEffect,
   useEventListener
 } from "@aria-ui/core";
@@ -35,13 +33,13 @@ var blockPopoverContext = createContext(
 );
 
 // src/components/block-handle/block-drag-handle/state.ts
-function useBlockDragHandle(host, props) {
-  let context = blockPopoverContext.consume(host), state = mapSignals(assignProps(defaultBlockDragHandleProps, props));
-  return useEffect(host, () => {
+function useBlockDragHandle(host, state) {
+  let context = blockPopoverContext.consume(host);
+  useEffect(host, () => {
     host.draggable = !0;
   }), useEventListener(host, "pointerdown", () => {
     var _a, _b;
-    let { pos } = (_a = context.value) != null ? _a : {}, { view } = (_b = state.editor.value) != null ? _b : {};
+    let { pos } = (_a = context.get()) != null ? _a : {}, { view } = (_b = state.editor.get()) != null ? _b : {};
     pos == null || view == null || (view.dispatch(
       view.state.tr.setSelection(NodeSelection.create(view.state.doc, pos))
     ), requestAnimationFrame(() => {
@@ -49,21 +47,21 @@ function useBlockDragHandle(host, props) {
     }));
   }), useEventListener(host, "dragstart", (event) => {
     var _a, _b;
-    let { pos, element, node } = (_a = context.value) != null ? _a : {}, { view } = (_b = state.editor.value) != null ? _b : {};
+    let { pos, element, node } = (_a = context.get()) != null ? _a : {}, { view } = (_b = state.editor.get()) != null ? _b : {};
     pos == null || !element || !node || !view || !event.dataTransfer || (event.dataTransfer.clearData(), event.dataTransfer.setData("text/html", element.outerHTML), event.dataTransfer.effectAllowed = "copyMove", event.dataTransfer.setDragImage(element, 0, 0), view.dragging = {
       slice: new Slice(Fragment.from(node), 0, 0),
       move: !0
     });
-  }), state;
+  });
 }
 
 // src/components/block-handle/block-drag-handle/element.gen.ts
-var BlockDragHandleElement = class extends ElementMixin(useBlockDragHandle, defaultBlockDragHandleProps) {
+var BlockDragHandleElement = class extends ElementBuilder(useBlockDragHandle, defaultBlockDragHandleProps) {
 };
 defineCustomElement("prosekit-block-drag-handle", BlockDragHandleElement);
 
 // src/components/block-handle/block-popover/element.gen.ts
-import { ElementMixin as ElementMixin2 } from "@aria-ui/core";
+import { ElementBuilder as ElementBuilder2 } from "@aria-ui/core";
 
 // src/components/block-handle/block-popover/props.ts
 import { defaultOverlayPositionerProps } from "@aria-ui/overlay";
@@ -76,10 +74,8 @@ var defaultBlockPopoverProps = Object.freeze({
 
 // src/components/block-handle/block-popover/state.ts
 import {
-  assignProps as assignProps2,
   createComputed,
   createSignal,
-  mapSignals as mapSignals2,
   useAttribute,
   useEffect as useEffect2
 } from "@aria-ui/core";
@@ -148,8 +144,8 @@ function defineElementHoverHandler(handler) {
 }
 
 // src/components/block-handle/block-popover/state.ts
-function useBlockPopover(host, props) {
-  let state = mapSignals2(assignProps2(defaultBlockPopoverProps, props)), { editor, ...overlayState } = state, reference = createSignal(null);
+function useBlockPopover(host, state) {
+  let { editor, ...overlayState } = state, reference = createSignal(null);
   useOverlayPositionerState(host, overlayState, { reference });
   let context = createSignal({
     pos: null,
@@ -159,12 +155,12 @@ function useBlockPopover(host, props) {
   blockPopoverContext.provide(host, context);
   let open = createSignal(!1);
   useEffect2(host, () => {
-    open.value = !!context.value.element;
+    open.set(!!context.get().element);
   }), useHoverExtension(host, editor, (referenceValue, element, node, pos) => {
-    reference.value = referenceValue, context.value = { element, node, pos };
+    reference.set(referenceValue), context.set({ element, node, pos });
   });
-  let presence = createComputed(() => !!reference.value);
-  return useAttribute(host, "data-state", () => presence.value ? "open" : "closed"), usePresence(host, presence), state;
+  let presence = createComputed(() => !!reference.get());
+  useAttribute(host, "data-state", () => presence.get() ? "open" : "closed"), usePresence(host, presence);
 }
 function useHoverExtension(host, editor, handler) {
   let prevElement = null, prevPos = null, extension = defineElementHoverHandler(
@@ -176,7 +172,7 @@ function useHoverExtension(host, editor, handler) {
 }
 
 // src/components/block-handle/block-popover/element.gen.ts
-var BlockPopoverElement = class extends ElementMixin2(useBlockPopover, defaultBlockPopoverProps) {
+var BlockPopoverElement = class extends ElementBuilder2(useBlockPopover, defaultBlockPopoverProps) {
 };
 defineCustomElement("prosekit-block-popover", BlockPopoverElement);
 export {

package/dist/prosekit-web-inline-popover.js

@@ -1,19 +1,20 @@
 import {
   useEditorExtension
-} from "./chunk-VJEVDINM.js";
+} from "./chunk-MZSYOTZT.js";
 import {
   defineCustomElement
 } from "./chunk-Y2CJYXR5.js";
 
 // src/components/inline-popover/inline-popover/element.gen.ts
-import { ElementMixin } from "@aria-ui/core";
+import { ElementBuilder } from "@aria-ui/core";
 
 // src/components/inline-popover/inline-popover/props.ts
 import { defaultOverlayPositionerProps } from "@aria-ui/overlay";
 var defaultInlinePopoverProps = Object.freeze({
   ...defaultOverlayPositionerProps,
   editor: null,
-  open: !0,
+  defaultOpen: !0,
+  open: !1,
   onOpenChange: null,
   placement: "top",
   offset: 12,
@@ -30,10 +31,8 @@ var defaultInlinePopoverProps = Object.freeze({
 
 // src/components/inline-popover/inline-popover/state.ts
 import {
-  assignProps,
   createComputed,
   createSignal,
-  mapSignals,
   useAttribute,
   useEffect
 } from "@aria-ui/core";
@@ -107,31 +106,27 @@ function getInlineDecoration(view) {
 }
 
 // src/components/inline-popover/inline-popover/state.ts
-function useInlinePopover(host, props) {
-  let state = mapSignals(assignProps(defaultInlinePopoverProps, props));
-  return useInlinePopoverState(host, state), state;
-}
-function useInlinePopoverState(host, state) {
-  let { editor, open, onOpenChange, ...overlayState } = state, reference = useInlinePopoverReference(host, editor);
-  useOverlayPositionerState(host, overlayState, { reference });
-  let presence = createComputed(() => !!reference.value && open.value);
-  useAttribute(host, "data-state", () => presence.value ? "open" : "closed"), usePresence(host, presence), useEffect(host, () => {
-    var _a;
-    let presenceValue = presence.value;
-    (_a = onOpenChange.peek()) == null || _a(presenceValue);
-  });
+function useInlinePopover(host, state) {
+  let { editor, defaultOpen, open, onOpenChange, ...overlayState } = state, reference = useInlinePopoverReference(host, editor), hasReference = createComputed(() => !!reference.get());
+  useEffect(host, () => {
+    let hasReferenceValue = hasReference.get(), onOpenChangeValue = onOpenChange.peek(), defaultOpenValue = defaultOpen.peek(), openValue = open.peek();
+    onOpenChangeValue && (defaultOpenValue || openValue) && onOpenChangeValue(hasReferenceValue);
+  }), useEffect(host, () => {
+    let hasReferenceValue = hasReference.get(), defaultOpenValue = defaultOpen.peek();
+    hasReferenceValue && defaultOpenValue ? open.set(!0) : hasReferenceValue || open.set(!1);
+  }), useOverlayPositionerState(host, overlayState, { reference }), useAttribute(host, "data-state", () => open.get() ? "open" : "closed"), usePresence(host, open);
 }
 function useInlinePopoverReference(host, editor) {
   let reference = createSignal(null), editorFocused = !1;
   return useEditorFocusChangeEvent(host, editor, (focus) => {
     editorFocused = focus;
   }), useEditorUpdateEvent(host, editor, (view) => {
-    !editorFocused && host.contains(host.ownerDocument.activeElement) || (reference.value = getVirtualSelectionElement(view));
+    !editorFocused && host.contains(host.ownerDocument.activeElement) || reference.set(getVirtualSelectionElement(view));
   }), reference;
 }
 
 // src/components/inline-popover/inline-popover/element.gen.ts
-var InlinePopoverElement = class extends ElementMixin(useInlinePopover, defaultInlinePopoverProps) {
+var InlinePopoverElement = class extends ElementBuilder(useInlinePopover, defaultInlinePopoverProps) {
 };
 defineCustomElement("prosekit-inline-popover", InlinePopoverElement);
 export {

package/dist/prosekit-web-popover.js

@@ -3,7 +3,7 @@ import {
 } from "./chunk-Y2CJYXR5.js";
 
 // src/components/popover/popover-content/element.gen.ts
-import { ElementMixin } from "@aria-ui/core";
+import { ElementBuilder } from "@aria-ui/core";
 
 // src/components/popover/popover-content/props.ts
 import {
@@ -14,12 +14,12 @@ import {
 import { usePopoverContent } from "@aria-ui/popover";
 
 // src/components/popover/popover-content/element.gen.ts
-var PopoverContentElement = class extends ElementMixin(usePopoverContent, defaultPopoverContentProps) {
+var PopoverContentElement = class extends ElementBuilder(usePopoverContent, defaultPopoverContentProps) {
 };
 defineCustomElement("prosekit-popover-content", PopoverContentElement);
 
 // src/components/popover/popover-root/element.gen.ts
-import { ElementMixin as ElementMixin2 } from "@aria-ui/core";
+import { ElementBuilder as ElementBuilder2 } from "@aria-ui/core";
 
 // src/components/popover/popover-root/props.ts
 import {
@@ -30,12 +30,12 @@ import {
 import { usePopoverRoot } from "@aria-ui/popover";
 
 // src/components/popover/popover-root/element.gen.ts
-var PopoverRootElement = class extends ElementMixin2(usePopoverRoot, defaultPopoverRootProps) {
+var PopoverRootElement = class extends ElementBuilder2(usePopoverRoot, defaultPopoverRootProps) {
 };
 defineCustomElement("prosekit-popover-root", PopoverRootElement);
 
 // src/components/popover/popover-trigger/element.gen.ts
-import { ElementMixin as ElementMixin3 } from "@aria-ui/core";
+import { ElementBuilder as ElementBuilder3 } from "@aria-ui/core";
 
 // src/components/popover/popover-trigger/props.ts
 import {
@@ -46,7 +46,7 @@ import {
 import { usePopoverTrigger } from "@aria-ui/popover";
 
 // src/components/popover/popover-trigger/element.gen.ts
-var PopoverTriggerElement = class extends ElementMixin3(usePopoverTrigger, defaultPopoverTriggerProps) {
+var PopoverTriggerElement = class extends ElementBuilder3(usePopoverTrigger, defaultPopoverTriggerProps) {
 };
 defineCustomElement("prosekit-popover-trigger", PopoverTriggerElement);
 export {

package/dist/prosekit-web-resizable.js

@@ -3,7 +3,7 @@ import {
 } from "./chunk-Y2CJYXR5.js";
 
 // src/components/resizable/resizable-handle/element.gen.ts
-import { ElementMixin } from "@aria-ui/core";
+import { ElementBuilder } from "@aria-ui/core";
 
 // src/components/resizable/resizable-handle/props.ts
 var defaultResizableHandleProps = {
@@ -12,9 +12,7 @@ var defaultResizableHandleProps = {
 
 // src/components/resizable/resizable-handle/state.ts
 import {
-  assignProps,
   createSignal,
-  mapSignals,
   useEffect
 } from "@aria-ui/core";
 import { getWindow } from "@zag-js/dom-query";
@@ -79,18 +77,18 @@ var calcBottomRightResize = (w, h, dx, dy, r) => {
 }, calcTopResize = (w, h, dx, dy, r) => (h -= dy, w = h * r, [w, h]), calcRightResize = (w, h, dx, dy, r) => (w += dx, h = w / r, [w, h]), calcBottomResize = (w, h, dx, dy, r) => (h += dy, w = h * r, [w, h]), calcLeftResize = (w, h, dx, dy, r) => (w -= dx, h = w / r, [w, h]);
 
 // src/components/resizable/resizable-handle/state.ts
-function useResizableHandle(host, props) {
-  let state = mapSignals(assignProps(defaultResizableHandleProps, props)), onResize = onResizeContext.consume(host), onResizeStart = onResizeStartContext.consume(host), onResizeEnd = onResizeEndContext.consume(host);
-  return useResizableHandleState(host, state, { onResize, onResizeStart, onResizeEnd }), state;
+function useResizableHandle(host, state) {
+  let onResize = onResizeContext.consume(host), onResizeStart = onResizeStartContext.consume(host), onResizeEnd = onResizeEndContext.consume(host);
+  useResizableHandleState(host, state, { onResize, onResizeStart, onResizeEnd });
 }
 function useResizableHandleState(host, state, context) {
   let startX = 0, startY = 0, width = 0, height = 0, aspectRatio = 1, pointerPressing = createSignal(!1), handlePointerDown = (event) => {
-    var _a, _b;
-    event.preventDefault(), pointerPressing.value = !0, startX = event.x, startY = event.y;
-    let size = (_b = (_a = context.onResizeStart).value) == null ? void 0 : _b.call(_a);
+    var _a;
+    event.preventDefault(), pointerPressing.set(!0), startX = event.x, startY = event.y;
+    let size = (_a = context.onResizeStart.get()) == null ? void 0 : _a();
     size && ([width, height, aspectRatio] = size);
   }, handlePointerMove = (event) => {
-    var _a, _b;
+    var _a;
     event.preventDefault();
     let dx = event.x - startX, dy = event.y - startY, [w, h] = calcResize(
       state.position.peek(),
@@ -100,15 +98,15 @@ function useResizableHandleState(host, state, context) {
       dy,
       aspectRatio
     );
-    (_b = (_a = context.onResize).value) == null || _b.call(_a, w, h);
+    (_a = context.onResize.get()) == null || _a(w, h);
   }, handlePointerUp = (event) => {
-    var _a, _b;
-    event.preventDefault(), pointerPressing.value = !1, (_b = (_a = context.onResizeEnd).value) == null || _b.call(_a);
+    var _a;
+    event.preventDefault(), pointerPressing.set(!1), (_a = context.onResizeEnd.get()) == null || _a();
   };
   useEffect(host, () => (host.addEventListener("pointerdown", handlePointerDown), () => {
     host.removeEventListener("pointerdown", handlePointerDown);
   })), useEffect(host, () => {
-    if (!pointerPressing.value)
+    if (!pointerPressing.get())
       return;
     let win = getWindow(host);
     return win.addEventListener("pointermove", handlePointerMove), win.addEventListener("pointerup", handlePointerUp), () => {
@@ -118,12 +116,12 @@ function useResizableHandleState(host, state, context) {
 }
 
 // src/components/resizable/resizable-handle/element.gen.ts
-var ResizableHandleElement = class extends ElementMixin(useResizableHandle, defaultResizableHandleProps) {
+var ResizableHandleElement = class extends ElementBuilder(useResizableHandle, defaultResizableHandleProps) {
 };
 defineCustomElement("prosekit-resizable-handle", ResizableHandleElement);
 
 // src/components/resizable/resizable-root/element.gen.ts
-import { ElementMixin as ElementMixin2 } from "@aria-ui/core";
+import { ElementBuilder as ElementBuilder2 } from "@aria-ui/core";
 
 // src/components/resizable/resizable-root/props.ts
 var defaultResizableRootProps = {
@@ -137,23 +135,17 @@ var defaultResizableRootProps = {
 
 // src/components/resizable/resizable-root/state.ts
 import {
-  assignProps as assignProps2,
   createSignal as createSignal2,
-  mapSignals as mapSignals2,
   useEffect as useEffect2
 } from "@aria-ui/core";
-function useResizableRoot(host, props) {
-  let state = mapSignals2(assignProps2(defaultResizableRootProps, props));
-  return useResizableRootState(host, state), state;
-}
-function useResizableRootState(host, state) {
+function useResizableRoot(host, state) {
   let onResizeStart = () => {
     var _a, _b;
     let { width, height } = host.getBoundingClientRect(), aspectRatio = (_a = state.aspectRatio.peek()) != null ? _a : width / height;
     return isFinitePositiveNumber(aspectRatio) || (aspectRatio = 0), (_b = state.onSizeChangeStart.peek()) == null || _b({ width, height }), [width, height, aspectRatio];
   }, onResize = (width, height) => {
     var _a;
-    (_a = state.onSizeChange.peek()) == null || _a({ width, height }), state.width.value = width, state.height.value = height;
+    (_a = state.onSizeChange.peek()) == null || _a({ width, height }), state.width.set(width), state.height.set(height);
   }, onResizeEnd = () => {
     var _a;
     let { width, height } = host.getBoundingClientRect();
@@ -162,9 +154,9 @@ function useResizableRootState(host, state) {
   onResizeStartContext.provide(host, createSignal2(onResizeStart)), onResizeContext.provide(host, createSignal2(onResize)), onResizeEndContext.provide(host, createSignal2(onResizeEnd)), useEffect2(host, () => {
     updateResizableRootStyles(
       host,
-      state.width.value,
-      state.height.value,
-      state.aspectRatio.value
+      state.width.get(),
+      state.height.get(),
+      state.aspectRatio.get()
     );
   });
 }
@@ -173,7 +165,7 @@ function updateResizableRootStyles(host, width, height, aspectRatio) {
 }
 
 // src/components/resizable/resizable-root/element.gen.ts
-var ResizableRootElement = class extends ElementMixin2(useResizableRoot, defaultResizableRootProps) {
+var ResizableRootElement = class extends ElementBuilder2(useResizableRoot, defaultResizableRootProps) {
 };
 defineCustomElement("prosekit-resizable-root", ResizableRootElement);
 export {

package/dist/prosekit-web-tooltip.js

@@ -3,7 +3,7 @@ import {
 } from "./chunk-Y2CJYXR5.js";
 
 // src/components/tooltip/tooltip-content/element.gen.ts
-import { ElementMixin } from "@aria-ui/core";
+import { ElementBuilder } from "@aria-ui/core";
 
 // src/components/tooltip/tooltip-content/props.ts
 import { defaultTooltipContentProps as defaultProps } from "@aria-ui/tooltip";
@@ -19,19 +19,15 @@ var defaultTooltipContentProps = {
 };
 
 // src/components/tooltip/tooltip-content/state.ts
-import { assignProps } from "@aria-ui/core";
-import { useTooltipContent as useElement } from "@aria-ui/tooltip";
-function useTooltipContent(element, props) {
-  return useElement(element, assignProps(defaultTooltipContentProps, props));
-}
+import { useTooltipContent } from "@aria-ui/tooltip";
 
 // src/components/tooltip/tooltip-content/element.gen.ts
-var TooltipContentElement = class extends ElementMixin(useTooltipContent, defaultTooltipContentProps) {
+var TooltipContentElement = class extends ElementBuilder(useTooltipContent, defaultTooltipContentProps) {
 };
 defineCustomElement("prosekit-tooltip-content", TooltipContentElement);
 
 // src/components/tooltip/tooltip-root/element.gen.ts
-import { ElementMixin as ElementMixin2 } from "@aria-ui/core";
+import { ElementBuilder as ElementBuilder2 } from "@aria-ui/core";
 
 // src/components/tooltip/tooltip-root/props.ts
 import { defaultTooltipRootProps } from "@aria-ui/tooltip";
@@ -40,12 +36,12 @@ import { defaultTooltipRootProps } from "@aria-ui/tooltip";
 import { useTooltipRoot } from "@aria-ui/tooltip";
 
 // src/components/tooltip/tooltip-root/element.gen.ts
-var TooltipRootElement = class extends ElementMixin2(useTooltipRoot, defaultTooltipRootProps) {
+var TooltipRootElement = class extends ElementBuilder2(useTooltipRoot, defaultTooltipRootProps) {
 };
 defineCustomElement("prosekit-tooltip-root", TooltipRootElement);
 
 // src/components/tooltip/tooltip-trigger/element.gen.ts
-import { ElementMixin as ElementMixin3 } from "@aria-ui/core";
+import { ElementBuilder as ElementBuilder3 } from "@aria-ui/core";
 
 // src/components/tooltip/tooltip-trigger/props.ts
 import { defaultTooltipTriggerProps } from "@aria-ui/tooltip";
@@ -54,7 +50,7 @@ import { defaultTooltipTriggerProps } from "@aria-ui/tooltip";
 import { useTooltipTrigger } from "@aria-ui/tooltip";
 
 // src/components/tooltip/tooltip-trigger/element.gen.ts
-var TooltipTriggerElement = class extends ElementMixin3(useTooltipTrigger, defaultTooltipTriggerProps) {
+var TooltipTriggerElement = class extends ElementBuilder3(useTooltipTrigger, defaultTooltipTriggerProps) {
 };
 defineCustomElement("prosekit-tooltip-trigger", TooltipTriggerElement);
 export {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/web",
   "type": "module",
-  "version": "0.1.10",
+  "version": "0.2.0",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -66,21 +66,21 @@
   ],
   "dependencies": {
     "@aria-ui/collection": "^0.0.3",
-    "@aria-ui/core": "^0.0.14",
-    "@aria-ui/listbox": "^0.0.13",
-    "@aria-ui/overlay": "^0.0.15",
-    "@aria-ui/popover": "^0.0.14",
-    "@aria-ui/presence": "^0.0.9",
-    "@aria-ui/tooltip": "^0.0.16",
+    "@aria-ui/core": "^0.0.16",
+    "@aria-ui/listbox": "^0.0.15",
+    "@aria-ui/overlay": "^0.0.17",
+    "@aria-ui/popover": "^0.0.17",
+    "@aria-ui/presence": "^0.0.11",
+    "@aria-ui/tooltip": "^0.0.19",
     "@floating-ui/dom": "^1.6.5",
-    "@zag-js/dom-query": "^0.53.0",
-    "@prosekit/core": "^0.5.5",
+    "@zag-js/dom-query": "^0.58.2",
+    "@prosekit/core": "^0.6.0",
     "@prosekit/pm": "^0.1.5",
-    "@prosekit/extensions": "^0.5.3"
+    "@prosekit/extensions": "^0.6.0"
   },
   "devDependencies": {
     "tsup": "^8.1.0",
-    "typescript": "^5.4.5",
+    "typescript": "^5.5.2",
     "vitest": "^1.6.0",
     "@prosekit/dev": "0.0.0"
   },