@prosekit/svelte 0.9.0-beta.0 → 0.9.0-beta.2

package/dist/build/components/tooltip/tooltip-root.gen.svelte

@@ -1,23 +1,32 @@
+<!-- This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly. -->
+
 <script lang="ts">
-import '@prosekit/web/tooltip'
+  import { registerTooltipRootElement } from '@prosekit/web/tooltip'
+  import type { TooltipRootElement } from '@prosekit/web/tooltip'
+  registerTooltipRootElement()
+
+  let { defaultOpen: p0, disabled: p1, open: p2, onOpenChange: e0, children = undefined, ...restProps } = $props()
+  let element: TooltipRootElement | undefined
+  const handlers: EventListener[] = []
+
+  $effect(() => {
+    if (!element) return
+
+    Object.assign(element, { defaultOpen: p0, disabled: p1, open: p2 })
 
-import { tooltipRootProps, tooltipRootEvents } from '@prosekit/web/tooltip'
-import { ClientUpdate } from '../client-update/index.js'
-import { useComponent } from '../use-component.js'
-import { useEventHandlers } from '../use-event-handlers.js'
+    handlers.length = 0
+    handlers.push(e0)
+  })
 
-let attributes: Record<string, unknown> = {}
-let eventHandlers: Record<string, (...args: any[]) => any> = {}
-let element: HTMLElement | undefined = undefined
-const handleChange = useComponent(Object.keys(tooltipRootProps), Object.keys(tooltipRootEvents))
+  $effect(() => {
+    if (!element) return
 
-$: {
-  [attributes, eventHandlers] = handleChange(element, $$props)
-}
+    const ac = new AbortController()
+    for (const [index, eventName] of ["openChange"].entries()) {
+      element.addEventListener(eventName, (event) => handlers[index]?.(event), { signal: ac.signal })
+    }
+    return () => ac.abort()
+  })
 </script>
 
-<ClientUpdate>
-  <prosekit-tooltip-root {...attributes} use:useEventHandlers={eventHandlers} bind:this={element}>
-    <slot />
-  </prosekit-tooltip-root>
-</ClientUpdate>
+<prosekit-tooltip-root {...restProps} bind:this={element}>{@render children?.()}</prosekit-tooltip-root>

package/dist/build/components/tooltip/tooltip-root.gen.svelte.d.ts

@@ -0,0 +1,10 @@
+declare const TooltipRoot: import("svelte").Component<{
+    defaultOpen: any;
+    disabled: any;
+    open: any;
+    onOpenChange: any;
+    children?: any;
+} & Record<string, any>, {}, "">;
+type TooltipRoot = ReturnType<typeof TooltipRoot>;
+export default TooltipRoot;
+//# sourceMappingURL=tooltip-root.gen.svelte.d.ts.map

package/dist/build/components/tooltip/tooltip-root.gen.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-root.gen.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip-root.gen.svelte.ts"],"names":[],"mappings":"AAyCA,QAAA,MAAM,WAAW;iBAhCuE,GAAG;cAAY,GAAG;UAAQ,GAAG;kBAAgB,GAAG;eAAa,GAAG;gCAgC/F,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/build/components/tooltip/tooltip-trigger.gen.d.ts

@@ -1,11 +1,36 @@
-import type { TooltipTriggerElement, TooltipTriggerProps as Props, TooltipTriggerEvents as Events } from '@prosekit/web/tooltip';
-import type { SvelteComponent } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-import type { CreateProps } from '../create-props.ts';
 /**
- * Props for the {@link TooltipTrigger} component.
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
  */
-export interface TooltipTriggerProps extends Partial<CreateProps<Props, Events>> {
+import type { TooltipTriggerProps as TooltipTriggerElementProps } from '@prosekit/web/tooltip';
+import type { Component, Snippet } from 'svelte';
+/**
+ * Props for the {@link TooltipTrigger} Svelte component.
+ *
+ * @public
+ */
+export interface TooltipTriggerProps {
+    /**
+     * Whether the component should ignore user interaction.
+     * @default false
+     */
+    disabled?: TooltipTriggerElementProps['disabled'];
+    /**
+     * The delay in milliseconds before opening the tooltip on hover.
+     * @default 600
+     */
+    openDelay?: TooltipTriggerElementProps['openDelay'];
+    /**
+     * The delay in milliseconds before closing the tooltip when hover/focus ends.
+     * @default 0
+     */
+    closeDelay?: TooltipTriggerElementProps['closeDelay'];
+    children?: Snippet;
+    [key: string]: unknown;
 }
-export declare const TooltipTrigger: typeof SvelteComponent<TooltipTriggerProps & HTMLAttributes<TooltipTriggerElement>>;
+/**
+ * A Svelte component that renders an `prosekit-tooltip-trigger` custom element.
+ *
+ * @public
+ */
+export declare const TooltipTrigger: Component<TooltipTriggerProps>;
 //# sourceMappingURL=tooltip-trigger.gen.d.ts.map

package/dist/build/components/tooltip/tooltip-trigger.gen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-trigger.gen.d.ts","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip-trigger.gen.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,mBAAmB,IAAI,KAAK,EAAE,oBAAoB,IAAI,MAAM,EAAE,MAAM,uBAAuB,CAAA;AAChI,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAIrD;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,OAAO,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;CAAG;AAEnF,eAAO,MAAM,cAAc,EAAgB,OAAO,eAAe,CAAC,mBAAmB,GAAG,cAAc,CAAC,qBAAqB,CAAC,CAAC,CAAA"}
+{"version":3,"file":"tooltip-trigger.gen.d.ts","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip-trigger.gen.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,mBAAmB,IAAI,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAC/F,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIjD;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,0BAA0B,CAAC,UAAU,CAAC,CAAC;IAClD;;;OAGG;IACH,SAAS,CAAC,EAAE,0BAA0B,CAAC,WAAW,CAAC,CAAC;IACpD;;;OAGG;IACH,UAAU,CAAC,EAAE,0BAA0B,CAAC,YAAY,CAAC,CAAC;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc,EAAE,SAAS,CAAC,mBAAmB,CAAwE,CAAC"}

package/dist/build/components/tooltip/tooltip-trigger.gen.js

@@ -1,2 +1,10 @@
-import Component from './tooltip-trigger.gen.svelte';
-export const TooltipTrigger = Component;
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+import TooltipTriggerComponent from './tooltip-trigger.gen.svelte';
+/**
+ * A Svelte component that renders an `prosekit-tooltip-trigger` custom element.
+ *
+ * @public
+ */
+export const TooltipTrigger = TooltipTriggerComponent;

package/dist/build/components/tooltip/tooltip-trigger.gen.svelte

@@ -1,23 +1,18 @@
+<!-- This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly. -->
+
 <script lang="ts">
-import '@prosekit/web/tooltip'
+  import { registerTooltipTriggerElement } from '@prosekit/web/tooltip'
+  import type { TooltipTriggerElement } from '@prosekit/web/tooltip'
+  registerTooltipTriggerElement()
 
-import { tooltipTriggerProps, tooltipTriggerEvents } from '@prosekit/web/tooltip'
-import { ClientUpdate } from '../client-update/index.js'
-import { useComponent } from '../use-component.js'
-import { useEventHandlers } from '../use-event-handlers.js'
+  let { closeDelay: p0, disabled: p1, openDelay: p2, children = undefined, ...restProps } = $props()
+  let element: TooltipTriggerElement | undefined
 
-let attributes: Record<string, unknown> = {}
-let eventHandlers: Record<string, (...args: any[]) => any> = {}
-let element: HTMLElement | undefined = undefined
-const handleChange = useComponent(Object.keys(tooltipTriggerProps), Object.keys(tooltipTriggerEvents))
+  $effect(() => {
+    if (!element) return
 
-$: {
-  [attributes, eventHandlers] = handleChange(element, $$props)
-}
+    Object.assign(element, { closeDelay: p0, disabled: p1, openDelay: p2 })
+  })
 </script>
 
-<ClientUpdate>
-  <prosekit-tooltip-trigger {...attributes} use:useEventHandlers={eventHandlers} bind:this={element}>
-    <slot />
-  </prosekit-tooltip-trigger>
-</ClientUpdate>
+<prosekit-tooltip-trigger {...restProps} bind:this={element}>{@render children?.()}</prosekit-tooltip-trigger>

package/dist/build/components/tooltip/tooltip-trigger.gen.svelte.d.ts

@@ -0,0 +1,9 @@
+declare const TooltipTrigger: import("svelte").Component<{
+    closeDelay: any;
+    disabled: any;
+    openDelay: any;
+    children?: any;
+} & Record<string, any>, {}, "">;
+type TooltipTrigger = ReturnType<typeof TooltipTrigger>;
+export default TooltipTrigger;
+//# sourceMappingURL=tooltip-trigger.gen.svelte.d.ts.map

package/dist/build/components/tooltip/tooltip-trigger.gen.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-trigger.gen.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip-trigger.gen.svelte.ts"],"names":[],"mappings":"AA2BA,QAAA,MAAM,cAAc;gBAlBsE,GAAG;cAAY,GAAG;eAAa,GAAG;eAAa,GAAG;gCAkBhF,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/build/components/view-renderer/view-renderer.svelte.d.ts

@@ -0,0 +1,31 @@
+import { type Editor } from '@prosekit/core';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const ViewRenderer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    editor: Editor;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type ViewRenderer = InstanceType<typeof ViewRenderer>;
+export default ViewRenderer;
+//# sourceMappingURL=view-renderer.svelte.d.ts.map

package/dist/build/components/view-renderer/view-renderer.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-renderer.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/view-renderer/view-renderer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAS,KAAK,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAkCnD,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,YAAY;YAf2B,MAAM;;;;;;;cAeoD,CAAC;AACtF,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AACxD,eAAe,YAAY,CAAC"}

package/dist/build/extensions/svelte-node-view.spec.js

@@ -0,0 +1,70 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import TestEditor from '../testing/image-refresh-editor.svelte';
+import { resetState, state } from '../testing/image-refresh-state';
+describe('SvelteNodeView', () => {
+    beforeEach(() => {
+        resetState();
+    });
+    const paragraphJSON = {
+        type: 'paragraph',
+        content: [{ type: 'text', text: 'Hello' }],
+    };
+    const imageRefreshJSON = {
+        type: 'image',
+    };
+    const editor = page.getByTestId('editor');
+    const imageRefresh = page.getByTestId('image-refresh-view');
+    it('can render a single self-update image node', async () => {
+        const initialContent = {
+            type: 'doc',
+            content: [imageRefreshJSON, paragraphJSON],
+        };
+        const screen = await render(TestEditor, { initialContent });
+        await expect.element(editor).toBeVisible();
+        await expect.element(imageRefresh).toBeInTheDocument();
+        const urls = new Set();
+        const check = () => {
+            imageRefresh.elements().forEach((element) => {
+                const url = element.getAttribute('data-url');
+                if (url) {
+                    urls.add(url);
+                }
+            });
+            return urls.size >= 5;
+        };
+        await expect.poll(check, { interval: 50, timeout: 30000 }).toBe(true);
+        await screen.unmount();
+        expect(state.imageRefresh.setAttrs).toBeGreaterThanOrEqual(5);
+        expect(state.imageRefresh.mounted).toBe(1);
+        expect(state.imageRefresh.unmounted).toBe(1);
+    });
+    it('can render multiple self-update image nodes', async () => {
+        const initialContent = {
+            type: 'doc',
+            content: [imageRefreshJSON, paragraphJSON, imageRefreshJSON, imageRefreshJSON],
+        };
+        const screen = await render(TestEditor, { initialContent });
+        await expect.element(editor).toBeVisible();
+        await expect.element(imageRefresh.nth(0)).toBeInTheDocument();
+        await expect.element(imageRefresh.nth(1)).toBeInTheDocument();
+        await expect.element(imageRefresh.nth(2)).toBeInTheDocument();
+        await expect.element(imageRefresh.nth(3)).not.toBeInTheDocument();
+        const urls = new Set();
+        const check = () => {
+            imageRefresh.elements().forEach((element) => {
+                const url = element.getAttribute('data-url');
+                if (url) {
+                    urls.add(url);
+                }
+            });
+            return urls.size >= 15;
+        };
+        await expect.poll(check, { interval: 50, timeout: 30000 }).toBe(true);
+        await screen.unmount();
+        expect(state.imageRefresh.setAttrs).toBeGreaterThanOrEqual(15);
+        expect(state.imageRefresh.mounted).toBe(3);
+        expect(state.imageRefresh.unmounted).toBe(3);
+    });
+});

package/dist/build/testing/image-refresh-editor.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+import { createEditor, union, type NodeJSON } from '@prosekit/core'
+import { defineTestExtension } from '@prosekit/testing'
+
+import { defineSvelteNodeView, ProseKit } from '../index.js'
+import ImageRefreshView from './image-refresh-view.svelte'
+
+export let initialContent: NodeJSON | undefined = undefined
+
+const extension = union(
+  defineTestExtension(),
+  defineSvelteNodeView({
+    name: 'image',
+    component: ImageRefreshView,
+  }),
+)
+
+const editor = createEditor({
+  extension,
+  defaultContent: initialContent,
+})
+</script>
+
+<ProseKit {editor}>
+  <div data-testid="editor" {@attach editor.mount}></div>
+</ProseKit>

package/dist/build/testing/image-refresh-state.js

@@ -0,0 +1,12 @@
+export const state = {
+    imageRefresh: {
+        mounted: 0,
+        unmounted: 0,
+        setAttrs: 0,
+    },
+};
+export function resetState() {
+    state.imageRefresh.mounted = 0;
+    state.imageRefresh.unmounted = 0;
+    state.imageRefresh.setAttrs = 0;
+}

package/dist/build/testing/image-refresh-view.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+import type { ImageAttrs } from '@prosekit/testing'
+import { fromStore } from 'svelte/store'
+import type { SvelteNodeViewProps } from '../index.js'
+import { state } from './image-refresh-state.js'
+
+const props: SvelteNodeViewProps = $props()
+
+const node = $derived(fromStore(props.node))
+const url = $derived((node.current.attrs as ImageAttrs).src)
+
+$effect(() => {
+  state.imageRefresh.mounted++
+  const id = setInterval(() => {
+    state.imageRefresh.setAttrs++
+    props.setAttrs({ src: String(Math.random()) })
+  }, 50)
+
+  return () => {
+    state.imageRefresh.unmounted++
+    clearInterval(id)
+  }
+})
+</script>
+
+<div data-testid="image-refresh-view" data-url={url}></div>

package/dist/prosekit-svelte-autocomplete.d.ts

@@ -1 +1 @@
-export * from './build/components/autocomplete/index.gen.js'
+export * from './build/components/autocomplete/index.js'

package/dist/prosekit-svelte-autocomplete.js

@@ -1 +1 @@
-export * from './build/components/autocomplete/index.gen.js'
+export * from './build/components/autocomplete/index.js'

package/dist/prosekit-svelte-block-handle.d.ts

@@ -1 +1 @@
-export * from './build/components/block-handle/index.gen.js'
+export * from './build/components/block-handle/index.js'

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

@@ -1 +1 @@
-export * from './build/components/block-handle/index.gen.js'
+export * from './build/components/block-handle/index.js'

package/dist/prosekit-svelte-drop-indicator.d.ts

@@ -1 +1 @@
-export * from './build/components/drop-indicator/index.gen.js'
+export * from './build/components/drop-indicator/index.js'

package/dist/prosekit-svelte-drop-indicator.js

@@ -1 +1 @@
-export * from './build/components/drop-indicator/index.gen.js'
+export * from './build/components/drop-indicator/index.js'

package/dist/prosekit-svelte-inline-popover.d.ts

@@ -1 +1 @@
-export * from './build/components/inline-popover/index.gen.js'
+export * from './build/components/inline-popover/index.js'

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

@@ -1 +1 @@
-export * from './build/components/inline-popover/index.gen.js'
+export * from './build/components/inline-popover/index.js'

package/dist/prosekit-svelte-menu.d.ts

@@ -0,0 +1 @@
+export * from './build/components/menu/index.js'

package/dist/prosekit-svelte-menu.js

@@ -0,0 +1 @@
+export * from './build/components/menu/index.js'

package/dist/prosekit-svelte-popover.d.ts

@@ -1 +1 @@
-export * from './build/components/popover/index.gen.js'
+export * from './build/components/popover/index.js'

package/dist/prosekit-svelte-popover.js

@@ -1 +1 @@
-export * from './build/components/popover/index.gen.js'
+export * from './build/components/popover/index.js'

package/dist/prosekit-svelte-resizable.d.ts

@@ -1 +1 @@
-export * from './build/components/resizable/index.gen.js'
+export * from './build/components/resizable/index.js'

package/dist/prosekit-svelte-resizable.js

@@ -1 +1 @@
-export * from './build/components/resizable/index.gen.js'
+export * from './build/components/resizable/index.js'

package/dist/prosekit-svelte-table-handle.d.ts

@@ -1 +1 @@
-export * from './build/components/table-handle/index.gen.js'
+export * from './build/components/table-handle/index.js'

package/dist/prosekit-svelte-table-handle.js

@@ -1 +1 @@
-export * from './build/components/table-handle/index.gen.js'
+export * from './build/components/table-handle/index.js'

package/dist/prosekit-svelte-tooltip.d.ts

@@ -1 +1 @@
-export * from './build/components/tooltip/index.gen.js'
+export * from './build/components/tooltip/index.js'

package/dist/prosekit-svelte-tooltip.js

@@ -1 +1 @@
-export * from './build/components/tooltip/index.gen.js'
+export * from './build/components/tooltip/index.js'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/svelte",
   "type": "module",
-  "version": "0.9.0-beta.0",
+  "version": "0.9.0-beta.2",
   "private": false,
   "description": "Svelte components and utilities for ProseKit",
   "author": {
@@ -50,6 +50,11 @@
       "svelte": "./dist/prosekit-svelte-inline-popover.js",
       "default": "./dist/prosekit-svelte-inline-popover.js"
     },
+    "./menu": {
+      "types": "./dist/prosekit-svelte-menu.d.ts",
+      "svelte": "./dist/prosekit-svelte-menu.js",
+      "default": "./dist/prosekit-svelte-menu.js"
+    },
     "./popover": {
       "types": "./dist/prosekit-svelte-popover.d.ts",
       "svelte": "./dist/prosekit-svelte-popover.js",
@@ -76,11 +81,11 @@
     "src"
   ],
   "dependencies": {
-    "@prosemirror-adapter/core": "^0.5.2",
-    "@prosemirror-adapter/svelte": "^0.5.2",
+    "@prosemirror-adapter/core": "^0.5.3",
+    "@prosemirror-adapter/svelte": "^0.5.3",
+    "@prosekit/core": "^0.12.0-beta.0",
     "@prosekit/pm": "^0.1.15",
-    "@prosekit/web": "^0.8.0-beta.0",
-    "@prosekit/core": "^0.12.0-beta.0"
+    "@prosekit/web": "^0.8.0-beta.2"
   },
   "peerDependencies": {
     "svelte": ">= 5.0.0"
@@ -92,11 +97,16 @@
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@types/node": "^24.10.13",
-    "svelte": "^5.55.0",
-    "svelte-check": "^4.4.5",
+    "svelte": "^5.55.2",
+    "svelte-check": "^4.4.6",
     "tsx": "^4.21.0",
     "typescript": "~5.9.3",
+    "vitest": "^4.1.4",
+    "vitest-browser-svelte": "^2.1.0",
+    "@prosekit/config-vitest": "0.0.0",
+    "@prosekit/testing": "0.0.0",
     "@prosekit/config-ts": "0.0.0"
   },
   "publishConfig": {
@@ -105,14 +115,15 @@
   "dev": {
     "entry": {
       "prosekit-svelte": "./src/index.ts",
-      "prosekit-svelte-autocomplete": "./src/components/autocomplete/index.gen.ts",
-      "prosekit-svelte-block-handle": "./src/components/block-handle/index.gen.ts",
-      "prosekit-svelte-drop-indicator": "./src/components/drop-indicator/index.gen.ts",
-      "prosekit-svelte-inline-popover": "./src/components/inline-popover/index.gen.ts",
-      "prosekit-svelte-popover": "./src/components/popover/index.gen.ts",
-      "prosekit-svelte-resizable": "./src/components/resizable/index.gen.ts",
-      "prosekit-svelte-table-handle": "./src/components/table-handle/index.gen.ts",
-      "prosekit-svelte-tooltip": "./src/components/tooltip/index.gen.ts"
+      "prosekit-svelte-autocomplete": "./src/components/autocomplete/index.ts",
+      "prosekit-svelte-block-handle": "./src/components/block-handle/index.ts",
+      "prosekit-svelte-drop-indicator": "./src/components/drop-indicator/index.ts",
+      "prosekit-svelte-inline-popover": "./src/components/inline-popover/index.ts",
+      "prosekit-svelte-menu": "./src/components/menu/index.ts",
+      "prosekit-svelte-popover": "./src/components/popover/index.ts",
+      "prosekit-svelte-resizable": "./src/components/resizable/index.ts",
+      "prosekit-svelte-table-handle": "./src/components/table-handle/index.ts",
+      "prosekit-svelte-tooltip": "./src/components/tooltip/index.ts"
     }
   },
   "scripts": {
@@ -140,6 +151,9 @@
       "inline-popover": [
         "./dist/prosekit-svelte-inline-popover.d.ts"
       ],
+      "menu": [
+        "./dist/prosekit-svelte-menu.d.ts"
+      ],
       "popover": [
         "./dist/prosekit-svelte-popover.d.ts"
       ],

package/src/components/autocomplete/autocomplete-empty.gen.svelte

@@ -1,23 +1,10 @@
-<script lang="ts">
-import '@prosekit/web/autocomplete'
-
-import { autocompleteEmptyProps, autocompleteEmptyEvents } from '@prosekit/web/autocomplete'
-import { ClientUpdate } from '../client-update/index.ts'
-import { useComponent } from '../use-component.ts'
-import { useEventHandlers } from '../use-event-handlers.ts'
+<!-- This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly. -->
 
-let attributes: Record<string, unknown> = {}
-let eventHandlers: Record<string, (...args: any[]) => any> = {}
-let element: HTMLElement | undefined = undefined
-const handleChange = useComponent(Object.keys(autocompleteEmptyProps), Object.keys(autocompleteEmptyEvents))
+<script lang="ts">
+  import { registerAutocompleteEmptyElement } from '@prosekit/web/autocomplete'
+  registerAutocompleteEmptyElement()
 
-$: {
-  [attributes, eventHandlers] = handleChange(element, $$props)
-}
+  let { children = undefined, ...restProps } = $props()
 </script>
 
-<ClientUpdate>
-  <prosekit-autocomplete-empty {...attributes} use:useEventHandlers={eventHandlers} bind:this={element}>
-    <slot />
-  </prosekit-autocomplete-empty>
-</ClientUpdate>
+<prosekit-autocomplete-empty {...restProps}>{@render children?.()}</prosekit-autocomplete-empty>

package/src/components/autocomplete/autocomplete-empty.gen.ts

@@ -1,14 +1,24 @@
-import type { AutocompleteEmptyElement, AutocompleteEmptyProps as Props, AutocompleteEmptyEvents as Events } from '@prosekit/web/autocomplete'    
-import type { SvelteComponent } from 'svelte'
-import type { HTMLAttributes } from 'svelte/elements'
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
 
-import type { CreateProps } from '../create-props.ts'
+import type { Component, Snippet } from 'svelte';
 
-import Component from './autocomplete-empty.gen.svelte'
+import AutocompleteEmptyComponent from './autocomplete-empty.gen.svelte';
 
 /**
- * Props for the {@link AutocompleteEmpty} component.
+ * Props for the {@link AutocompleteEmpty} Svelte component.
+ *
+ * @public
  */
-export interface AutocompleteEmptyProps extends Partial<CreateProps<Props, Events>> {}
+export interface AutocompleteEmptyProps {
+  children?: Snippet;
+  [key: string]: unknown;
+}
 
-export const AutocompleteEmpty = Component as typeof SvelteComponent<AutocompleteEmptyProps & HTMLAttributes<AutocompleteEmptyElement>>
+/**
+ * A Svelte component that renders an `prosekit-autocomplete-empty` custom element.
+ *
+ * @public
+ */
+export const AutocompleteEmpty: Component<AutocompleteEmptyProps> = AutocompleteEmptyComponent as unknown as Component<AutocompleteEmptyProps>;