@prosekit/preact 0.6.8 → 0.7.0-beta.1

package/src/components/popover/popover-trigger.gen.ts

@@ -1,34 +1,95 @@
-import {
-  type PopoverTriggerElement,
-  type PopoverTriggerProps as Props,
-  type PopoverTriggerEvents as Events,
-  popoverTriggerProps,
-  popoverTriggerEvents,
-} from '@prosekit/web/popover'
-import type {
-  ForwardRefExoticComponent,
-  HTMLAttributes,
-  RefAttributes,
-} from 'preact/compat'
-
-import { createComponent } from '../create-component.ts'
-import type { CreateProps } from '../create-props.ts'
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerPopoverTriggerElement, type PopoverTriggerElement, type PopoverTriggerProps as PopoverTriggerElementProps, type PopoverTriggerEvents } from '@prosekit/web/popover';
+import { createElement, type HTMLAttributes, type Ref } from 'preact';
+import { forwardRef, type ForwardRefExoticComponent, type RefAttributes } from 'preact/compat';
+import { useCallback, useRef, useLayoutEffect } from 'preact/hooks';
+
+/**
+ * Props for the {@link PopoverTrigger} Preact component.
+ *
+ * @public
+ */
+export interface PopoverTriggerProps extends HTMLAttributes<PopoverTriggerElement> {
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled?: PopoverTriggerElementProps['disabled'];
+  /**
+   * Whether the popover should also open when the trigger is hovered.
+   * @default false
+   */
+  openOnHover?: PopoverTriggerElementProps['openOnHover'];
+  /**
+   * The delay in milliseconds before opening the popover when hovering.
+   * Only applies when `openOnHover` is true.
+   * @default 300
+   */
+  delay?: PopoverTriggerElementProps['delay'];
+  /**
+   * The delay in milliseconds before closing the popover when hover ends.
+   * Only applies when `openOnHover` is true.
+   * @default 0
+   */
+  closeDelay?: PopoverTriggerElementProps['closeDelay'];
+  /** Emitted when the popover is opened or closed. */
+  onOpenChange?: (event: PopoverTriggerEvents['openChange']) => void;
+}
+
+function PopoverTriggerComponent(props: PopoverTriggerProps, forwardedRef: Ref<PopoverTriggerElement>) {
+  registerPopoverTriggerElement();
+
+  const elementRef = useRef<PopoverTriggerElement>(null);
+  const handlersRef = useRef<Array<((event: Event) => void) | undefined>>([]);
+
+  const { closeDelay: p0, delay: p1, disabled: p2, openOnHover: p3, onOpenChange: e0, ...restProps } = props;
+
+  useLayoutEffect(() => {
+    const element = elementRef.current as Record<string, unknown> | null;
+    if (!element) return;
+    Object.assign(element, { closeDelay: p0, delay: p1, disabled: p2, openOnHover: p3 });
+    handlersRef.current = [e0] as Array<((event: Event) => void) | undefined>;
+  });
+
+  useLayoutEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    const ac = new AbortController();
+    for (const [index, eventName] of ['openChange'].entries()) {
+      element.addEventListener(
+        eventName,
+        (event: Event) => {
+          handlersRef.current[index]?.(event);
+        },
+        { signal: ac.signal },
+      );
+    }
+    return () => ac.abort();
+  }, []);
+
+  const mergedRef = useCallback(
+    (element: PopoverTriggerElement | null) => {
+      elementRef.current = element;
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(element);
+      } else if (forwardedRef) {
+        forwardedRef.current = element;
+      }
+    },
+    [forwardedRef],
+  );
+
+  return createElement('prosekit-popover-trigger', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });
+}
 
 /**
- * Props for the {@link PopoverTrigger} component.
+ * A Preact component that renders an `prosekit-popover-trigger` custom element.
+ *
+ * @public
  */
-export interface PopoverTriggerProps extends Partial<CreateProps<Props, Events>> {}
-
-export const PopoverTrigger: ForwardRefExoticComponent<
-  Partial<PopoverTriggerProps> &
-  RefAttributes<PopoverTriggerElement> &
-  HTMLAttributes<PopoverTriggerElement>
-> = createComponent<
-  PopoverTriggerProps,
-  PopoverTriggerElement
->(
-  'prosekit-popover-trigger',
-  'PopoverTrigger',
-  Object.keys(popoverTriggerProps),
-  Object.keys(popoverTriggerEvents),
-)
+export const PopoverTrigger: ForwardRefExoticComponent<PopoverTriggerProps & RefAttributes<PopoverTriggerElement>> = /* @__PURE__ */ forwardRef(PopoverTriggerComponent);
+
+export type { PopoverTriggerEvents };

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

@@ -1,3 +1,9 @@
-export { ResizableHandle, type ResizableHandleProps } from './resizable-handle.gen.ts'
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
 
-export { ResizableRoot, type ResizableRootProps } from './resizable-root.gen.ts'
+export { ResizableRoot, type ResizableRootProps, type ResizableRootEvents } from './resizable-root.gen.ts';
+
+export { ResizableHandle, type ResizableHandleProps } from './resizable-handle.gen.ts';
+
+export { ResizeEndEvent, ResizeStartEvent } from '@prosekit/web/resizable';

package/src/components/resizable/index.ts

@@ -0,0 +1,20 @@
+/**
+
+@module
+
+## Anatomy
+
+```jsx
+import {
+  ResizableHandle,
+  ResizableRoot,
+} from 'prosekit/preact/resizable'
+
+<ResizableRoot>
+  <img src="..." />
+  <ResizableHandle>...</ResizableHandle>
+</ResizableRoot>
+```
+*/
+
+export * from './index.gen.ts'

package/src/components/resizable/resizable-handle.gen.ts

@@ -1,34 +1,57 @@
-import {
-  type ResizableHandleElement,
-  type ResizableHandleProps as Props,
-  type ResizableHandleEvents as Events,
-  resizableHandleProps,
-  resizableHandleEvents,
-} from '@prosekit/web/resizable'
-import type {
-  ForwardRefExoticComponent,
-  HTMLAttributes,
-  RefAttributes,
-} from 'preact/compat'
-
-import { createComponent } from '../create-component.ts'
-import type { CreateProps } from '../create-props.ts'
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerResizableHandleElement, type ResizableHandleElement, type ResizableHandleProps as ResizableHandleElementProps } from '@prosekit/web/resizable';
+import { createElement, type HTMLAttributes, type Ref } from 'preact';
+import { forwardRef, type ForwardRefExoticComponent, type RefAttributes } from 'preact/compat';
+import { useCallback, useRef, useLayoutEffect } from 'preact/hooks';
+
+/**
+ * Props for the {@link ResizableHandle} Preact component.
+ *
+ * @public
+ */
+export interface ResizableHandleProps extends HTMLAttributes<ResizableHandleElement> {
+  /**
+   * The position of the handle.
+   *
+   * @default "bottom-right"
+   */
+  position?: ResizableHandleElementProps['position'];
+}
+
+function ResizableHandleComponent(props: ResizableHandleProps, forwardedRef: Ref<ResizableHandleElement>) {
+  registerResizableHandleElement();
+
+  const elementRef = useRef<ResizableHandleElement>(null);
+
+  const { position: p0, ...restProps } = props;
+
+  useLayoutEffect(() => {
+    const element = elementRef.current as Record<string, unknown> | null;
+    if (!element) return;
+    Object.assign(element, { position: p0 });
+  });
+
+  const mergedRef = useCallback(
+    (element: ResizableHandleElement | null) => {
+      elementRef.current = element;
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(element);
+      } else if (forwardedRef) {
+        forwardedRef.current = element;
+      }
+    },
+    [forwardedRef],
+  );
+
+  return createElement('prosekit-resizable-handle', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });
+}
 
 /**
- * Props for the {@link ResizableHandle} component.
+ * A Preact component that renders an `prosekit-resizable-handle` custom element.
+ *
+ * @public
  */
-export interface ResizableHandleProps extends Partial<CreateProps<Props, Events>> {}
-
-export const ResizableHandle: ForwardRefExoticComponent<
-  Partial<ResizableHandleProps> &
-  RefAttributes<ResizableHandleElement> &
-  HTMLAttributes<ResizableHandleElement>
-> = createComponent<
-  ResizableHandleProps,
-  ResizableHandleElement
->(
-  'prosekit-resizable-handle',
-  'ResizableHandle',
-  Object.keys(resizableHandleProps),
-  Object.keys(resizableHandleEvents),
-)
+export const ResizableHandle: ForwardRefExoticComponent<ResizableHandleProps & RefAttributes<ResizableHandleElement>> = /* @__PURE__ */ forwardRef(ResizableHandleComponent);

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

@@ -1,34 +1,93 @@
-import {
-  type ResizableRootElement,
-  type ResizableRootProps as Props,
-  type ResizableRootEvents as Events,
-  resizableRootProps,
-  resizableRootEvents,
-} from '@prosekit/web/resizable'
-import type {
-  ForwardRefExoticComponent,
-  HTMLAttributes,
-  RefAttributes,
-} from 'preact/compat'
-
-import { createComponent } from '../create-component.ts'
-import type { CreateProps } from '../create-props.ts'
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerResizableRootElement, type ResizableRootElement, type ResizableRootProps as ResizableRootElementProps, type ResizableRootEvents } from '@prosekit/web/resizable';
+import { createElement, type HTMLAttributes, type Ref } from 'preact';
+import { forwardRef, type ForwardRefExoticComponent, type RefAttributes } from 'preact/compat';
+import { useCallback, useRef, useLayoutEffect } from 'preact/hooks';
+
+/**
+ * Props for the {@link ResizableRoot} Preact component.
+ *
+ * @public
+ */
+export interface ResizableRootProps extends HTMLAttributes<ResizableRootElement> {
+  /**
+   * The width of the resizable element.
+   *
+   * @default null
+   */
+  width?: ResizableRootElementProps['width'];
+  /**
+   * The height of the resizable element.
+   *
+   * @default null
+   */
+  height?: ResizableRootElementProps['height'];
+  /**
+   * The aspect ratio of the resizable element.
+   *
+   * @default null
+   */
+  aspectRatio?: ResizableRootElementProps['aspectRatio'];
+  /** Emitted when a resize operation starts. */
+  onResizeStart?: (event: ResizableRootEvents['resizeStart']) => void;
+  /** Emitted when a resize operation ends. */
+  onResizeEnd?: (event: ResizableRootEvents['resizeEnd']) => void;
+}
+
+function ResizableRootComponent(props: ResizableRootProps, forwardedRef: Ref<ResizableRootElement>) {
+  registerResizableRootElement();
+
+  const elementRef = useRef<ResizableRootElement>(null);
+  const handlersRef = useRef<Array<((event: Event) => void) | undefined>>([]);
+
+  const { aspectRatio: p0, height: p1, width: p2, onResizeEnd: e0, onResizeStart: e1, ...restProps } = props;
+
+  useLayoutEffect(() => {
+    const element = elementRef.current as Record<string, unknown> | null;
+    if (!element) return;
+    Object.assign(element, { aspectRatio: p0, height: p1, width: p2 });
+    handlersRef.current = [e0, e1] as Array<((event: Event) => void) | undefined>;
+  });
+
+  useLayoutEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    const ac = new AbortController();
+    for (const [index, eventName] of ['resizeEnd', 'resizeStart'].entries()) {
+      element.addEventListener(
+        eventName,
+        (event: Event) => {
+          handlersRef.current[index]?.(event);
+        },
+        { signal: ac.signal },
+      );
+    }
+    return () => ac.abort();
+  }, []);
+
+  const mergedRef = useCallback(
+    (element: ResizableRootElement | null) => {
+      elementRef.current = element;
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(element);
+      } else if (forwardedRef) {
+        forwardedRef.current = element;
+      }
+    },
+    [forwardedRef],
+  );
+
+  return createElement('prosekit-resizable-root', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });
+}
 
 /**
- * Props for the {@link ResizableRoot} component.
+ * A Preact component that renders an `prosekit-resizable-root` custom element.
+ *
+ * @public
  */
-export interface ResizableRootProps extends Partial<CreateProps<Props, Events>> {}
-
-export const ResizableRoot: ForwardRefExoticComponent<
-  Partial<ResizableRootProps> &
-  RefAttributes<ResizableRootElement> &
-  HTMLAttributes<ResizableRootElement>
-> = createComponent<
-  ResizableRootProps,
-  ResizableRootElement
->(
-  'prosekit-resizable-root',
-  'ResizableRoot',
-  Object.keys(resizableRootProps),
-  Object.keys(resizableRootEvents),
-)
+export const ResizableRoot: ForwardRefExoticComponent<ResizableRootProps & RefAttributes<ResizableRootElement>> = /* @__PURE__ */ forwardRef(ResizableRootComponent);
+
+export type { ResizableRootEvents };

package/src/components/table-handle/index.gen.ts

@@ -1,17 +1,25 @@
-export { TableHandleColumnRoot, type TableHandleColumnRootProps } from './table-handle-column-root.gen.ts'
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
 
-export { TableHandleColumnTrigger, type TableHandleColumnTriggerProps } from './table-handle-column-trigger.gen.ts'
+export { TableHandleColumnPopup, type TableHandleColumnPopupProps } from './table-handle-column-popup.gen.ts';
 
-export { TableHandleDragPreview, type TableHandleDragPreviewProps } from './table-handle-drag-preview.gen.ts'
+export { TableHandleColumnPositioner, type TableHandleColumnPositionerProps } from './table-handle-column-positioner.gen.ts';
 
-export { TableHandleDropIndicator, type TableHandleDropIndicatorProps } from './table-handle-drop-indicator.gen.ts'
+export { TableHandleColumnMenuRoot, type TableHandleColumnMenuRootProps } from './table-handle-column-menu-root.gen.ts';
 
-export { TableHandlePopoverContent, type TableHandlePopoverContentProps } from './table-handle-popover-content.gen.ts'
+export { TableHandleColumnMenuTrigger, type TableHandleColumnMenuTriggerProps } from './table-handle-column-menu-trigger.gen.ts';
 
-export { TableHandlePopoverItem, type TableHandlePopoverItemProps } from './table-handle-popover-item.gen.ts'
+export { TableHandleDragPreview, type TableHandleDragPreviewProps } from './table-handle-drag-preview.gen.ts';
 
-export { TableHandleRoot, type TableHandleRootProps } from './table-handle-root.gen.ts'
+export { TableHandleDropIndicator, type TableHandleDropIndicatorProps } from './table-handle-drop-indicator.gen.ts';
 
-export { TableHandleRowRoot, type TableHandleRowRootProps } from './table-handle-row-root.gen.ts'
+export { TableHandleRoot, type TableHandleRootProps } from './table-handle-root.gen.ts';
 
-export { TableHandleRowTrigger, type TableHandleRowTriggerProps } from './table-handle-row-trigger.gen.ts'
+export { TableHandleRowPopup, type TableHandleRowPopupProps } from './table-handle-row-popup.gen.ts';
+
+export { TableHandleRowPositioner, type TableHandleRowPositionerProps } from './table-handle-row-positioner.gen.ts';
+
+export { TableHandleRowMenuRoot, type TableHandleRowMenuRootProps } from './table-handle-row-menu-root.gen.ts';
+
+export { TableHandleRowMenuTrigger, type TableHandleRowMenuTriggerProps } from './table-handle-row-menu-trigger.gen.ts';

package/src/components/table-handle/index.ts

@@ -0,0 +1,58 @@
+/**
+
+@module
+
+## Anatomy
+
+```jsx
+import {
+  TableHandleColumnMenuRoot,
+  TableHandleColumnMenuTrigger,
+  TableHandleColumnPopup,
+  TableHandleColumnPositioner,
+  TableHandleDragPreview,
+  TableHandleDropIndicator,
+  TableHandleRoot,
+  TableHandleRowMenuRoot,
+  TableHandleRowMenuTrigger,
+  TableHandleRowPopup,
+  TableHandleRowPositioner,
+} from 'prosekit/preact/table-handle'
+import {
+  MenuItem,
+  MenuPopup,
+  MenuPositioner,
+} from 'prosekit/preact/menu'
+
+<TableHandleRoot>
+  <TableHandleDragPreview />
+  <TableHandleDropIndicator />
+  <TableHandleColumnPositioner>
+    <TableHandleColumnPopup>
+      <TableHandleColumnMenuRoot>
+        <TableHandleColumnMenuTrigger>...</TableHandleColumnMenuTrigger>
+        <MenuPositioner>
+          <MenuPopup>
+            <MenuItem>...</MenuItem>
+          </MenuPopup>
+        </MenuPositioner>
+      </TableHandleColumnMenuRoot>
+    </TableHandleColumnPopup>
+  </TableHandleColumnPositioner>
+  <TableHandleRowPositioner>
+    <TableHandleRowPopup>
+      <TableHandleRowMenuRoot>
+        <TableHandleRowMenuTrigger>...</TableHandleRowMenuTrigger>
+        <MenuPositioner>
+          <MenuPopup>
+            <MenuItem>...</MenuItem>
+          </MenuPopup>
+        </MenuPositioner>
+      </TableHandleRowMenuRoot>
+    </TableHandleRowPopup>
+  </TableHandleRowPositioner>
+</TableHandleRoot>
+```
+*/
+
+export * from './index.gen.ts'

package/src/components/table-handle/table-handle-column-menu-root.gen.ts

@@ -0,0 +1,66 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerTableHandleColumnMenuRootElement, type TableHandleColumnMenuRootElement, type TableHandleColumnMenuRootProps as TableHandleColumnMenuRootElementProps } from '@prosekit/web/table-handle';
+import { createElement, type HTMLAttributes, type Ref } from 'preact';
+import { forwardRef, type ForwardRefExoticComponent, type RefAttributes } from 'preact/compat';
+import { useCallback, useRef, useLayoutEffect } from 'preact/hooks';
+
+/**
+ * Props for the {@link TableHandleColumnMenuRoot} Preact component.
+ *
+ * @public
+ */
+export interface TableHandleColumnMenuRootProps extends HTMLAttributes<TableHandleColumnMenuRootElement> {
+  /**
+   * Whether the overlay is initially open.
+   * @default false
+   */
+  defaultOpen?: TableHandleColumnMenuRootElementProps['defaultOpen'];
+  /**
+   * Whether the overlay is currently open.
+   * @default null
+   */
+  open?: TableHandleColumnMenuRootElementProps['open'];
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled?: TableHandleColumnMenuRootElementProps['disabled'];
+}
+
+function TableHandleColumnMenuRootComponent(props: TableHandleColumnMenuRootProps, forwardedRef: Ref<TableHandleColumnMenuRootElement>) {
+  registerTableHandleColumnMenuRootElement();
+
+  const elementRef = useRef<TableHandleColumnMenuRootElement>(null);
+
+  const { defaultOpen: p0, disabled: p1, open: p2, ...restProps } = props;
+
+  useLayoutEffect(() => {
+    const element = elementRef.current as Record<string, unknown> | null;
+    if (!element) return;
+    Object.assign(element, { defaultOpen: p0, disabled: p1, open: p2 });
+  });
+
+  const mergedRef = useCallback(
+    (element: TableHandleColumnMenuRootElement | null) => {
+      elementRef.current = element;
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(element);
+      } else if (forwardedRef) {
+        forwardedRef.current = element;
+      }
+    },
+    [forwardedRef],
+  );
+
+  return createElement('prosekit-table-handle-column-menu-root', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });
+}
+
+/**
+ * A Preact component that renders an `prosekit-table-handle-column-menu-root` custom element.
+ *
+ * @public
+ */
+export const TableHandleColumnMenuRoot: ForwardRefExoticComponent<TableHandleColumnMenuRootProps & RefAttributes<TableHandleColumnMenuRootElement>> = /* @__PURE__ */ forwardRef(TableHandleColumnMenuRootComponent);

package/src/components/table-handle/table-handle-column-menu-trigger.gen.ts

@@ -0,0 +1,60 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerTableHandleColumnMenuTriggerElement, type TableHandleColumnMenuTriggerElement, type TableHandleColumnMenuTriggerProps as TableHandleColumnMenuTriggerElementProps } from '@prosekit/web/table-handle';
+import { createElement, type HTMLAttributes, type Ref } from 'preact';
+import { forwardRef, type ForwardRefExoticComponent, type RefAttributes } from 'preact/compat';
+import { useCallback, useRef, useLayoutEffect } from 'preact/hooks';
+
+import { useEditorContext } from '../../contexts/editor-context.ts';
+
+/**
+ * Props for the {@link TableHandleColumnMenuTrigger} Preact component.
+ *
+ * @public
+ */
+export interface TableHandleColumnMenuTriggerProps extends HTMLAttributes<TableHandleColumnMenuTriggerElement> {
+  /**
+   * @default null
+   * @hidden
+   */
+  editor?: TableHandleColumnMenuTriggerElementProps['editor'];
+}
+
+function TableHandleColumnMenuTriggerComponent(props: TableHandleColumnMenuTriggerProps, forwardedRef: Ref<TableHandleColumnMenuTriggerElement>) {
+  registerTableHandleColumnMenuTriggerElement();
+
+  const elementRef = useRef<TableHandleColumnMenuTriggerElement>(null);
+
+  const p0Fallback = useEditorContext();
+
+  const { editor: p0, ...restProps } = props;
+
+  useLayoutEffect(() => {
+    const element = elementRef.current as Record<string, unknown> | null;
+    if (!element) return;
+    Object.assign(element, { editor: p0 ?? p0Fallback });
+  });
+
+  const mergedRef = useCallback(
+    (element: TableHandleColumnMenuTriggerElement | null) => {
+      elementRef.current = element;
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(element);
+      } else if (forwardedRef) {
+        forwardedRef.current = element;
+      }
+    },
+    [forwardedRef],
+  );
+
+  return createElement('prosekit-table-handle-column-menu-trigger', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });
+}
+
+/**
+ * A Preact component that renders an `prosekit-table-handle-column-menu-trigger` custom element.
+ *
+ * @public
+ */
+export const TableHandleColumnMenuTrigger: ForwardRefExoticComponent<TableHandleColumnMenuTriggerProps & RefAttributes<TableHandleColumnMenuTriggerElement>> = /* @__PURE__ */ forwardRef(TableHandleColumnMenuTriggerComponent);

package/src/components/table-handle/table-handle-column-popup.gen.ts

@@ -0,0 +1,44 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerTableHandleColumnPopupElement, type TableHandleColumnPopupElement } from '@prosekit/web/table-handle';
+import { createElement, type HTMLAttributes, type Ref } from 'preact';
+import { forwardRef, type ForwardRefExoticComponent, type RefAttributes } from 'preact/compat';
+import { useCallback, useRef } from 'preact/hooks';
+
+/**
+ * Props for the {@link TableHandleColumnPopup} Preact component.
+ *
+ * @public
+ */
+export interface TableHandleColumnPopupProps extends HTMLAttributes<TableHandleColumnPopupElement> {}
+
+function TableHandleColumnPopupComponent(props: TableHandleColumnPopupProps, forwardedRef: Ref<TableHandleColumnPopupElement>) {
+  registerTableHandleColumnPopupElement();
+
+  const elementRef = useRef<TableHandleColumnPopupElement>(null);
+
+  const { ...restProps } = props;
+
+  const mergedRef = useCallback(
+    (element: TableHandleColumnPopupElement | null) => {
+      elementRef.current = element;
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(element);
+      } else if (forwardedRef) {
+        forwardedRef.current = element;
+      }
+    },
+    [forwardedRef],
+  );
+
+  return createElement('prosekit-table-handle-column-popup', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });
+}
+
+/**
+ * A Preact component that renders an `prosekit-table-handle-column-popup` custom element.
+ *
+ * @public
+ */
+export const TableHandleColumnPopup: ForwardRefExoticComponent<TableHandleColumnPopupProps & RefAttributes<TableHandleColumnPopupElement>> = /* @__PURE__ */ forwardRef(TableHandleColumnPopupComponent);