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

package/src/components/autocomplete/autocomplete-item.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/autocomplete'
+  import { registerAutocompleteItemElement } from '@prosekit/web/autocomplete'
+  import type { AutocompleteItemElement } from '@prosekit/web/autocomplete'
+  registerAutocompleteItemElement()
+
+  let { disabled: p0, value: p1, onSelect: e0, children = undefined, ...restProps } = $props()
+  let element: AutocompleteItemElement | undefined
+  const handlers: EventListener[] = []
+
+  $effect(() => {
+    if (!element) return
+
+    Object.assign(element, { disabled: p0, value: p1 })
 
-import { autocompleteItemProps, autocompleteItemEvents } from '@prosekit/web/autocomplete'
-import { ClientUpdate } from '../client-update/index.ts'
-import { useComponent } from '../use-component.ts'
-import { useEventHandlers } from '../use-event-handlers.ts'
+    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(autocompleteItemProps), Object.keys(autocompleteItemEvents))
+  $effect(() => {
+    if (!element) return
 
-$: {
-  [attributes, eventHandlers] = handleChange(element, $$props)
-}
+    const ac = new AbortController()
+    for (const [index, eventName] of ["select"].entries()) {
+      element.addEventListener(eventName, (event) => handlers[index]?.(event), { signal: ac.signal })
+    }
+    return () => ac.abort()
+  })
 </script>
 
-<ClientUpdate>
-  <prosekit-autocomplete-item {...attributes} use:useEventHandlers={eventHandlers} bind:this={element}>
-    <slot />
-  </prosekit-autocomplete-item>
-</ClientUpdate>
+<prosekit-autocomplete-item {...restProps} bind:this={element}>{@render children?.()}</prosekit-autocomplete-item>

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

@@ -1,14 +1,43 @@
-import type { AutocompleteItemElement, AutocompleteItemProps as Props, AutocompleteItemEvents 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 { AutocompleteItemEvents, AutocompleteItemProps as AutocompleteItemElementProps } from '@prosekit/web/autocomplete';
+import type { Component, Snippet } from 'svelte';
 
-import type { CreateProps } from '../create-props.ts'
+import AutocompleteItemComponent from './autocomplete-item.gen.svelte';
 
-import Component from './autocomplete-item.gen.svelte'
+/**
+ * Props for the {@link AutocompleteItem} Svelte component.
+ *
+ * @public
+ */
+export interface AutocompleteItemProps {
+  /**
+   * The value of the item, which will be matched against the query.
+   *
+   * If not provided, the value is the item's text content.
+   *
+   * @default ""
+   */
+  value?: AutocompleteItemElementProps['value'];
+  /**
+   * Whether this option is disabled.
+   *
+   * @default false
+   */
+  disabled?: AutocompleteItemElementProps['disabled'];
+  /** Emitted when the the item is selected. */
+  onSelect?: (event: AutocompleteItemEvents['select']) => void;
+  children?: Snippet;
+  [key: string]: unknown;
+}
 
 /**
- * Props for the {@link AutocompleteItem} component.
+ * A Svelte component that renders an `prosekit-autocomplete-item` custom element.
+ *
+ * @public
  */
-export interface AutocompleteItemProps extends Partial<CreateProps<Props, Events>> {}
+export const AutocompleteItem: Component<AutocompleteItemProps> = AutocompleteItemComponent as unknown as Component<AutocompleteItemProps>;
 
-export const AutocompleteItem = Component as typeof SvelteComponent<AutocompleteItemProps & HTMLAttributes<AutocompleteItemElement>>
+export type { AutocompleteItemEvents };

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

@@ -0,0 +1,31 @@
+<!-- This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly. -->
+
+<script lang="ts">
+  import { registerAutocompletePopupElement } from '@prosekit/web/autocomplete'
+  import type { AutocompletePopupElement } from '@prosekit/web/autocomplete'
+  registerAutocompletePopupElement()
+
+  let { onValueChange: e0, onValuesChange: e1, children = undefined, ...restProps } = $props()
+  let element: AutocompletePopupElement | undefined
+  const handlers: EventListener[] = []
+
+  $effect(() => {
+    if (!element) return
+
+    handlers.length = 0
+    handlers.push(e0)
+    handlers.push(e1)
+  })
+
+  $effect(() => {
+    if (!element) return
+
+    const ac = new AbortController()
+    for (const [index, eventName] of ["valueChange", "valuesChange"].entries()) {
+      element.addEventListener(eventName, (event) => handlers[index]?.(event), { signal: ac.signal })
+    }
+    return () => ac.abort()
+  })
+</script>
+
+<prosekit-autocomplete-popup {...restProps} bind:this={element}>{@render children?.()}</prosekit-autocomplete-popup>

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

@@ -0,0 +1,37 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import type { AutocompletePopupEvents } from '@prosekit/web/autocomplete';
+import type { Component, Snippet } from 'svelte';
+
+import AutocompletePopupComponent from './autocomplete-popup.gen.svelte';
+
+/**
+ * Props for the {@link AutocompletePopup} Svelte component.
+ *
+ * @public
+ */
+export interface AutocompletePopupProps {
+  /**
+   * Emitted when the selected value changes. Only available when multiple is
+   * false.
+   */
+  onValueChange?: (event: AutocompletePopupEvents['valueChange']) => void;
+  /**
+   * Emitted when the selected values change. Only available when multiple is
+   * true.
+   */
+  onValuesChange?: (event: AutocompletePopupEvents['valuesChange']) => void;
+  children?: Snippet;
+  [key: string]: unknown;
+}
+
+/**
+ * A Svelte component that renders an `prosekit-autocomplete-popup` custom element.
+ *
+ * @public
+ */
+export const AutocompletePopup: Component<AutocompletePopupProps> = AutocompletePopupComponent as unknown as Component<AutocompletePopupProps>;
+
+export type { AutocompletePopupEvents };

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

@@ -0,0 +1,18 @@
+<!-- This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly. -->
+
+<script lang="ts">
+  import { registerAutocompletePositionerElement } from '@prosekit/web/autocomplete'
+  import type { AutocompletePositionerElement } from '@prosekit/web/autocomplete'
+  registerAutocompletePositionerElement()
+
+  let { altBoundary: p0, autoUpdate: p1, boundary: p2, elementContext: p3, fitViewport: p4, flip: p5, hide: p6, hoist: p7, inline: p8, offset: p9, overflowPadding: p10, overlap: p11, placement: p12, rootBoundary: p13, sameHeight: p14, sameWidth: p15, shift: p16, strategy: p17, children = undefined, ...restProps } = $props()
+  let element: AutocompletePositionerElement | undefined
+
+  $effect(() => {
+    if (!element) return
+
+    Object.assign(element, { altBoundary: p0, autoUpdate: p1, boundary: p2, elementContext: p3, fitViewport: p4, flip: p5, hide: p6, hoist: p7, inline: p8, offset: p9, overflowPadding: p10, overlap: p11, placement: p12, rootBoundary: p13, sameHeight: p14, sameWidth: p15, shift: p16, strategy: p17 })
+  })
+</script>
+
+<prosekit-autocomplete-positioner {...restProps} bind:this={element}>{@render children?.()}</prosekit-autocomplete-positioner>

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

@@ -0,0 +1,127 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import type { AutocompletePositionerProps as AutocompletePositionerElementProps } from '@prosekit/web/autocomplete';
+import type { Component, Snippet } from 'svelte';
+
+import AutocompletePositionerComponent from './autocomplete-positioner.gen.svelte';
+
+/**
+ * Props for the {@link AutocompletePositioner} Svelte component.
+ *
+ * @public
+ */
+export interface AutocompletePositionerProps {
+  /**
+   * The placement of the popover, relative to the text cursor.
+   *
+   * @default "bottom-start"
+   */
+  placement?: AutocompletePositionerElementProps['placement'];
+  /**
+   * The distance between the popover and the hovered block.
+   *
+   * @default 4
+   */
+  offset?: AutocompletePositionerElementProps['offset'];
+  /** @default true */
+  inline?: AutocompletePositionerElementProps['inline'];
+  /** @default true */
+  hoist?: AutocompletePositionerElementProps['hoist'];
+  /** @default true */
+  fitViewport?: AutocompletePositionerElementProps['fitViewport'];
+  /** @default "The body element" */
+  boundary?: AutocompletePositionerElementProps['boundary'];
+  /** @default 8 */
+  overflowPadding?: AutocompletePositionerElementProps['overflowPadding'];
+  /**
+   * The strategy to use for positioning
+   *
+   * @default "absolute"
+   */
+  strategy?: AutocompletePositionerElementProps['strategy'];
+  /**
+   * Options to activate auto-update listeners
+   *
+   * @see https://floating-ui.com/docs/autoUpdate
+   *
+   * @default true
+   */
+  autoUpdate?: AutocompletePositionerElementProps['autoUpdate'];
+  /**
+   * Whether to flip the `placement` in order to keep it in view when the
+   * preferred placement(s) will overflow the clipping boundary. You can also
+   * provide an array of placements to try sequentially if the preferred
+   * `placement` does not fit.
+   *
+   * @default true
+   */
+  flip?: AutocompletePositionerElementProps['flip'];
+  /**
+   * Whether the floating element should shift to keep it in view.
+   *
+   * @default true
+   */
+  shift?: AutocompletePositionerElementProps['shift'];
+  /**
+   * Whether the floating element can overlap the reference element to keep it
+   * in view.
+   *
+   * @default false
+   */
+  overlap?: AutocompletePositionerElementProps['overlap'];
+  /**
+   * Whether to constrain the floating element's width so that it matches the
+   * reference element.
+   *
+   * @default false
+   */
+  sameWidth?: AutocompletePositionerElementProps['sameWidth'];
+  /**
+   * Whether to constrain the floating element's height so that it matches the
+   * reference element.
+   *
+   * @default false
+   */
+  sameHeight?: AutocompletePositionerElementProps['sameHeight'];
+  /**
+   * Whether to hide the floating element when the reference element or the
+   * floating element is fully clipped.
+   *
+   * @default false
+   */
+  hide?: AutocompletePositionerElementProps['hide'];
+  /**
+   * Describes the root boundary that the element will be checked for overflow relative to.
+   * Please see https://floating-ui.com/docs/detectoverflow#rootboundary for more information.
+   *
+   * @default 'viewport'
+   */
+  rootBoundary?: AutocompletePositionerElementProps['rootBoundary'];
+  /**
+   * The element that will be used to check for overflow. Please see
+   * https://floating-ui.com/docs/detectoverflow#elementcontext for more
+   * information.
+   *
+   * @default 'floating'
+   */
+  elementContext?: AutocompletePositionerElementProps['elementContext'];
+  /**
+   * Whether to check the alternate elementContext's boundary. Please see
+   * https://floating-ui.com/docs/detectoverflow#altboundary for more
+   * information.
+   *
+   * @default false
+   */
+  altBoundary?: AutocompletePositionerElementProps['altBoundary'];
+  children?: Snippet;
+  [key: string]: unknown;
+}
+
+/**
+ * A Svelte component that renders an `prosekit-autocomplete-positioner` custom element.
+ *
+ * @public
+ */
+export const AutocompletePositioner: Component<AutocompletePositionerProps> = AutocompletePositionerComponent as unknown as Component<AutocompletePositionerProps>;

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

@@ -0,0 +1,38 @@
+<!-- This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly. -->
+
+<script lang="ts">
+  import { registerAutocompleteRootElement } from '@prosekit/web/autocomplete'
+  import type { AutocompleteRootElement } from '@prosekit/web/autocomplete'
+  import { useEditorContext } from '../../contexts/editor-context.ts'
+  registerAutocompleteRootElement()
+
+  let { editor: p0, filter: p1, regex: p2, onOpenChange: e0, onQueryChange: e1, onValueChange: e2, onValuesChange: e3, children = undefined, ...restProps } = $props()
+  let element: AutocompleteRootElement | undefined
+  const handlers: EventListener[] = []
+
+  const p0Fallback = useEditorContext()
+
+  $effect(() => {
+    if (!element) return
+
+    Object.assign(element, { editor: p0 ?? p0Fallback, filter: p1, regex: p2 })
+
+    handlers.length = 0
+    handlers.push(e0)
+    handlers.push(e1)
+    handlers.push(e2)
+    handlers.push(e3)
+  })
+
+  $effect(() => {
+    if (!element) return
+
+    const ac = new AbortController()
+    for (const [index, eventName] of ["openChange", "queryChange", "valueChange", "valuesChange"].entries()) {
+      element.addEventListener(eventName, (event) => handlers[index]?.(event), { signal: ac.signal })
+    }
+    return () => ac.abort()
+  })
+</script>
+
+<prosekit-autocomplete-root {...restProps} bind:this={element}>{@render children?.()}</prosekit-autocomplete-root>

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

@@ -0,0 +1,61 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import type { AutocompleteRootEvents, AutocompleteRootProps as AutocompleteRootElementProps } from '@prosekit/web/autocomplete';
+import type { Component, Snippet } from 'svelte';
+
+import AutocompleteRootComponent from './autocomplete-root.gen.svelte';
+
+/**
+ * Props for the {@link AutocompleteRoot} Svelte component.
+ *
+ * @public
+ */
+export interface AutocompleteRootProps {
+  /**
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
+  editor?: AutocompleteRootElementProps['editor'];
+  /**
+   * The regular expression to match the query text to autocomplete.
+   *
+   * @default null
+   */
+  regex?: AutocompleteRootElementProps['regex'];
+  /**
+   * The filter function to determine if an item should be shown in the
+   * listbox.
+   *
+   * @default defaultItemFilter
+   */
+  filter?: AutocompleteRootElementProps['filter'];
+  /** Fired when the open state changes. */
+  onOpenChange?: (event: AutocompleteRootEvents['openChange']) => void;
+  /** Fired when the query changes. */
+  onQueryChange?: (event: AutocompleteRootEvents['queryChange']) => void;
+  /**
+   * Emitted when the selected value changes. Only available when multiple is
+   * false.
+   */
+  onValueChange?: (event: AutocompleteRootEvents['valueChange']) => void;
+  /**
+   * Emitted when the selected values change. Only available when multiple is
+   * true.
+   */
+  onValuesChange?: (event: AutocompleteRootEvents['valuesChange']) => void;
+  children?: Snippet;
+  [key: string]: unknown;
+}
+
+/**
+ * A Svelte component that renders an `prosekit-autocomplete-root` custom element.
+ *
+ * @public
+ */
+export const AutocompleteRoot: Component<AutocompleteRootProps> = AutocompleteRootComponent as unknown as Component<AutocompleteRootProps>;
+
+export type { AutocompleteRootEvents };

package/src/components/autocomplete/index.gen.ts

@@ -1,7 +1,15 @@
-export { AutocompleteEmpty, type AutocompleteEmptyProps } from './autocomplete-empty.gen.ts'
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
 
-export { AutocompleteItem, type AutocompleteItemProps } from './autocomplete-item.gen.ts'
+export { AutocompleteEmpty, type AutocompleteEmptyProps } from './autocomplete-empty.gen.ts';
 
-export { AutocompleteList, type AutocompleteListProps } from './autocomplete-list.gen.ts'
+export { AutocompleteItem, type AutocompleteItemProps, type AutocompleteItemEvents } from './autocomplete-item.gen.ts';
 
-export { AutocompletePopover, type AutocompletePopoverProps } from './autocomplete-popover.gen.ts'
+export { AutocompletePopup, type AutocompletePopupProps, type AutocompletePopupEvents } from './autocomplete-popup.gen.ts';
+
+export { AutocompletePositioner, type AutocompletePositionerProps } from './autocomplete-positioner.gen.ts';
+
+export { AutocompleteRoot, type AutocompleteRootProps, type AutocompleteRootEvents } from './autocomplete-root.gen.ts';
+
+export { OpenChangeEvent, QueryChangeEvent, SelectEvent, ValueChangeEvent, ValuesChangeEvent } from '@prosekit/web/autocomplete';

package/src/components/autocomplete/index.ts

@@ -0,0 +1,27 @@
+/**
+
+@module
+
+## Anatomy
+
+```jsx
+import {
+  AutocompleteEmpty,
+  AutocompleteItem,
+  AutocompletePopup,
+  AutocompletePositioner,
+  AutocompleteRoot,
+} from 'prosekit/svelte/autocomplete'
+
+<AutocompleteRoot>
+  <AutocompletePositioner>
+    <AutocompletePopup>
+      <AutocompleteItem>...</AutocompleteItem>
+      <AutocompleteEmpty>...</AutocompleteEmpty>
+    </AutocompletePopup>
+  </AutocompletePositioner>
+</AutocompleteRoot>
+```
+*/
+
+export * from './index.gen.ts'

package/src/components/block-handle/block-handle-add.gen.svelte

@@ -1,23 +1,21 @@
+<!-- This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly. -->
+
 <script lang="ts">
-import '@prosekit/web/block-handle'
+  import { registerBlockHandleAddElement } from '@prosekit/web/block-handle'
+  import type { BlockHandleAddElement } from '@prosekit/web/block-handle'
+  import { useEditorContext } from '../../contexts/editor-context.ts'
+  registerBlockHandleAddElement()
+
+  let { editor: p0, children = undefined, ...restProps } = $props()
+  let element: BlockHandleAddElement | undefined
 
-import { blockHandleAddProps, blockHandleAddEvents } from '@prosekit/web/block-handle'
-import { ClientUpdate } from '../client-update/index.ts'
-import { useComponent } from '../use-component.ts'
-import { useEventHandlers } from '../use-event-handlers.ts'
+  const p0Fallback = useEditorContext()
 
-let attributes: Record<string, unknown> = {}
-let eventHandlers: Record<string, (...args: any[]) => any> = {}
-let element: HTMLElement | undefined = undefined
-const handleChange = useComponent(Object.keys(blockHandleAddProps), Object.keys(blockHandleAddEvents))
+  $effect(() => {
+    if (!element) return
 
-$: {
-  [attributes, eventHandlers] = handleChange(element, $$props)
-}
+    Object.assign(element, { editor: p0 ?? p0Fallback })
+  })
 </script>
 
-<ClientUpdate>
-  <prosekit-block-handle-add {...attributes} use:useEventHandlers={eventHandlers} bind:this={element}>
-    <slot />
-  </prosekit-block-handle-add>
-</ClientUpdate>
+<prosekit-block-handle-add {...restProps} bind:this={element}>{@render children?.()}</prosekit-block-handle-add>

package/src/components/block-handle/block-handle-add.gen.ts

@@ -1,14 +1,32 @@
-import type { BlockHandleAddElement, BlockHandleAddProps as Props, BlockHandleAddEvents as Events } from '@prosekit/web/block-handle'    
-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 { BlockHandleAddProps as BlockHandleAddElementProps } from '@prosekit/web/block-handle';
+import type { Component, Snippet } from 'svelte';
 
-import Component from './block-handle-add.gen.svelte'
+import BlockHandleAddComponent from './block-handle-add.gen.svelte';
 
 /**
- * Props for the {@link BlockHandleAdd} component.
+ * Props for the {@link BlockHandleAdd} Svelte component.
+ *
+ * @public
  */
-export interface BlockHandleAddProps extends Partial<CreateProps<Props, Events>> {}
+export interface BlockHandleAddProps {
+  /**
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
+  editor?: BlockHandleAddElementProps['editor'];
+  children?: Snippet;
+  [key: string]: unknown;
+}
 
-export const BlockHandleAdd = Component as typeof SvelteComponent<BlockHandleAddProps & HTMLAttributes<BlockHandleAddElement>>
+/**
+ * A Svelte component that renders an `prosekit-block-handle-add` custom element.
+ *
+ * @public
+ */
+export const BlockHandleAdd: Component<BlockHandleAddProps> = BlockHandleAddComponent as unknown as Component<BlockHandleAddProps>;

package/src/components/block-handle/block-handle-draggable.gen.svelte

@@ -1,23 +1,21 @@
+<!-- This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly. -->
+
 <script lang="ts">
-import '@prosekit/web/block-handle'
+  import { registerBlockHandleDraggableElement } from '@prosekit/web/block-handle'
+  import type { BlockHandleDraggableElement } from '@prosekit/web/block-handle'
+  import { useEditorContext } from '../../contexts/editor-context.ts'
+  registerBlockHandleDraggableElement()
+
+  let { editor: p0, children = undefined, ...restProps } = $props()
+  let element: BlockHandleDraggableElement | undefined
 
-import { blockHandleDraggableProps, blockHandleDraggableEvents } from '@prosekit/web/block-handle'
-import { ClientUpdate } from '../client-update/index.ts'
-import { useComponent } from '../use-component.ts'
-import { useEventHandlers } from '../use-event-handlers.ts'
+  const p0Fallback = useEditorContext()
 
-let attributes: Record<string, unknown> = {}
-let eventHandlers: Record<string, (...args: any[]) => any> = {}
-let element: HTMLElement | undefined = undefined
-const handleChange = useComponent(Object.keys(blockHandleDraggableProps), Object.keys(blockHandleDraggableEvents))
+  $effect(() => {
+    if (!element) return
 
-$: {
-  [attributes, eventHandlers] = handleChange(element, $$props)
-}
+    Object.assign(element, { editor: p0 ?? p0Fallback })
+  })
 </script>
 
-<ClientUpdate>
-  <prosekit-block-handle-draggable {...attributes} use:useEventHandlers={eventHandlers} bind:this={element}>
-    <slot />
-  </prosekit-block-handle-draggable>
-</ClientUpdate>
+<prosekit-block-handle-draggable {...restProps} bind:this={element}>{@render children?.()}</prosekit-block-handle-draggable>

package/src/components/block-handle/block-handle-draggable.gen.ts

@@ -1,14 +1,32 @@
-import type { BlockHandleDraggableElement, BlockHandleDraggableProps as Props, BlockHandleDraggableEvents as Events } from '@prosekit/web/block-handle'    
-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 { BlockHandleDraggableProps as BlockHandleDraggableElementProps } from '@prosekit/web/block-handle';
+import type { Component, Snippet } from 'svelte';
 
-import Component from './block-handle-draggable.gen.svelte'
+import BlockHandleDraggableComponent from './block-handle-draggable.gen.svelte';
 
 /**
- * Props for the {@link BlockHandleDraggable} component.
+ * Props for the {@link BlockHandleDraggable} Svelte component.
+ *
+ * @public
  */
-export interface BlockHandleDraggableProps extends Partial<CreateProps<Props, Events>> {}
+export interface BlockHandleDraggableProps {
+  /**
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
+  editor?: BlockHandleDraggableElementProps['editor'];
+  children?: Snippet;
+  [key: string]: unknown;
+}
 
-export const BlockHandleDraggable = Component as typeof SvelteComponent<BlockHandleDraggableProps & HTMLAttributes<BlockHandleDraggableElement>>
+/**
+ * A Svelte component that renders an `prosekit-block-handle-draggable` custom element.
+ *
+ * @public
+ */
+export const BlockHandleDraggable: Component<BlockHandleDraggableProps> = BlockHandleDraggableComponent as unknown as Component<BlockHandleDraggableProps>;

package/src/components/block-handle/block-handle-popup.gen.svelte

@@ -0,0 +1,10 @@
+<!-- This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly. -->
+
+<script lang="ts">
+  import { registerBlockHandlePopupElement } from '@prosekit/web/block-handle'
+  registerBlockHandlePopupElement()
+
+  let { children = undefined, ...restProps } = $props()
+</script>
+
+<prosekit-block-handle-popup {...restProps}>{@render children?.()}</prosekit-block-handle-popup>