@prosekit/svelte 0.8.10 → 0.9.0-beta.1

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

@@ -1,5 +1,13 @@
-export { PopoverContent, type PopoverContentProps } from './popover-content.gen.ts'
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
 
-export { PopoverRoot, type PopoverRootProps } from './popover-root.gen.ts'
+export { PopoverPopup, type PopoverPopupProps } from './popover-popup.gen.ts';
 
-export { PopoverTrigger, type PopoverTriggerProps } from './popover-trigger.gen.ts'
+export { PopoverPositioner, type PopoverPositionerProps } from './popover-positioner.gen.ts';
+
+export { PopoverRoot, type PopoverRootProps, type PopoverRootEvents } from './popover-root.gen.ts';
+
+export { PopoverTrigger, type PopoverTriggerProps, type PopoverTriggerEvents } from './popover-trigger.gen.ts';
+
+export { OpenChangeEvent } from '@prosekit/web/popover';

package/src/components/popover/index.ts

@@ -0,0 +1,24 @@
+/**
+
+@module
+
+## Anatomy
+
+```jsx
+import {
+  PopoverPopup,
+  PopoverPositioner,
+  PopoverRoot,
+  PopoverTrigger,
+} from 'prosekit/svelte/popover'
+
+<PopoverRoot>
+  <PopoverTrigger>...</PopoverTrigger>
+  <PopoverPositioner>
+    <PopoverPopup>...</PopoverPopup>
+  </PopoverPositioner>
+</PopoverRoot>
+```
+*/
+
+export * from './index.gen.ts'

package/src/components/popover/popover-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 { registerPopoverPopupElement } from '@prosekit/web/popover'
+  registerPopoverPopupElement()
+
+  let { children = undefined, ...restProps } = $props()
+</script>
+
+<prosekit-popover-popup {...restProps}>{@render children?.()}</prosekit-popover-popup>

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

@@ -0,0 +1,24 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import type { Component, Snippet } from 'svelte';
+
+import PopoverPopupComponent from './popover-popup.gen.svelte';
+
+/**
+ * Props for the {@link PopoverPopup} Svelte component.
+ *
+ * @public
+ */
+export interface PopoverPopupProps {
+  children?: Snippet;
+  [key: string]: unknown;
+}
+
+/**
+ * A Svelte component that renders an `prosekit-popover-popup` custom element.
+ *
+ * @public
+ */
+export const PopoverPopup: Component<PopoverPopupProps> = PopoverPopupComponent as unknown as Component<PopoverPopupProps>;

package/src/components/popover/popover-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 { registerPopoverPositionerElement } from '@prosekit/web/popover'
+  import type { PopoverPositionerElement } from '@prosekit/web/popover'
+  registerPopoverPositionerElement()
+
+  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: PopoverPositionerElement | 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-popover-positioner {...restProps} bind:this={element}>{@render children?.()}</prosekit-popover-positioner>

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

@@ -0,0 +1,152 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import type { PopoverPositionerProps as PopoverPositionerElementProps } from '@prosekit/web/popover';
+import type { Component, Snippet } from 'svelte';
+
+import PopoverPositionerComponent from './popover-positioner.gen.svelte';
+
+/**
+ * Props for the {@link PopoverPositioner} Svelte component.
+ *
+ * @public
+ */
+export interface PopoverPositionerProps {
+  /**
+   * The strategy to use for positioning
+   *
+   * @default "absolute"
+   */
+  strategy?: PopoverPositionerElementProps['strategy'];
+  /**
+   * The initial placement of the floating element
+   *
+   * @default "top"
+   */
+  placement?: PopoverPositionerElementProps['placement'];
+  /**
+   * Options to activate auto-update listeners
+   *
+   * @see https://floating-ui.com/docs/autoUpdate
+   *
+   * @default true
+   */
+  autoUpdate?: PopoverPositionerElementProps['autoUpdate'];
+  /**
+   * Whether to use the browser Popover API to place the floating element on
+   * top of other page content.
+   *
+   * @default true
+   */
+  hoist?: PopoverPositionerElementProps['hoist'];
+  /**
+   * The distance between the reference and floating element.
+   *
+   * @default 6
+   */
+  offset?: PopoverPositionerElementProps['offset'];
+  /**
+   * 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?: PopoverPositionerElementProps['flip'];
+  /**
+   * Whether the floating element should shift to keep it in view.
+   *
+   * @default true
+   */
+  shift?: PopoverPositionerElementProps['shift'];
+  /**
+   * Whether the floating element can overlap the reference element to keep it
+   * in view.
+   *
+   * @default false
+   */
+  overlap?: PopoverPositionerElementProps['overlap'];
+  /**
+   * Whether to constrain the floating element's width and height to not exceed
+   * the viewport.
+   *
+   * @default false
+   */
+  fitViewport?: PopoverPositionerElementProps['fitViewport'];
+  /**
+   * Whether to constrain the floating element's width so that it matches the
+   * reference element.
+   *
+   * @default false
+   */
+  sameWidth?: PopoverPositionerElementProps['sameWidth'];
+  /**
+   * Whether to constrain the floating element's height so that it matches the
+   * reference element.
+   *
+   * @default false
+   */
+  sameHeight?: PopoverPositionerElementProps['sameHeight'];
+  /**
+   * Whether to improve positioning for inline reference elements that span over
+   * multiple lines.
+   *
+   * @default false
+   */
+  inline?: PopoverPositionerElementProps['inline'];
+  /**
+   * Whether to hide the floating element when the reference element or the
+   * floating element is fully clipped.
+   *
+   * @default false
+   */
+  hide?: PopoverPositionerElementProps['hide'];
+  /**
+   * Describes the clipping element(s) or area that overflow will be checked relative to.
+   * Please see https://floating-ui.com/docs/detectoverflow#boundary for more information.
+   *
+   * @default 'clippingAncestors'
+   */
+  boundary?: PopoverPositionerElementProps['boundary'];
+  /**
+   * 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?: PopoverPositionerElementProps['rootBoundary'];
+  /**
+   * Describes the virtual padding around the boundary to check for overflow.
+   * Please see https://floating-ui.com/docs/detectoverflow#padding for more information.
+   *
+   * @default 4
+   */
+  overflowPadding?: PopoverPositionerElementProps['overflowPadding'];
+  /**
+   * 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?: PopoverPositionerElementProps['elementContext'];
+  /**
+   * Whether to check the alternate elementContext's boundary. Please see
+   * https://floating-ui.com/docs/detectoverflow#altboundary for more
+   * information.
+   *
+   * @default false
+   */
+  altBoundary?: PopoverPositionerElementProps['altBoundary'];
+  children?: Snippet;
+  [key: string]: unknown;
+}
+
+/**
+ * A Svelte component that renders an `prosekit-popover-positioner` custom element.
+ *
+ * @public
+ */
+export const PopoverPositioner: Component<PopoverPositionerProps> = PopoverPositionerComponent as unknown as Component<PopoverPositionerProps>;

package/src/components/popover/popover-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/popover'
+  import { registerPopoverRootElement } from '@prosekit/web/popover'
+  import type { PopoverRootElement } from '@prosekit/web/popover'
+  registerPopoverRootElement()
+
+  let { defaultOpen: p0, disabled: p1, modal: p2, open: p3, onOpenChange: e0, children = undefined, ...restProps } = $props()
+  let element: PopoverRootElement | undefined
+  const handlers: EventListener[] = []
+
+  $effect(() => {
+    if (!element) return
+
+    Object.assign(element, { defaultOpen: p0, disabled: p1, modal: p2, open: p3 })
 
-import { popoverRootProps, popoverRootEvents } from '@prosekit/web/popover'
-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(popoverRootProps), Object.keys(popoverRootEvents))
+  $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-popover-root {...attributes} use:useEventHandlers={eventHandlers} bind:this={element}>
-    <slot />
-  </prosekit-popover-root>
-</ClientUpdate>
+<prosekit-popover-root {...restProps} bind:this={element}>{@render children?.()}</prosekit-popover-root>

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

@@ -1,14 +1,51 @@
-import type { PopoverRootElement, PopoverRootProps as Props, PopoverRootEvents as Events } from '@prosekit/web/popover'    
-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 { PopoverRootEvents, PopoverRootProps as PopoverRootElementProps } from '@prosekit/web/popover';
+import type { Component, Snippet } from 'svelte';
 
-import type { CreateProps } from '../create-props.ts'
+import PopoverRootComponent from './popover-root.gen.svelte';
 
-import Component from './popover-root.gen.svelte'
+/**
+ * Props for the {@link PopoverRoot} Svelte component.
+ *
+ * @public
+ */
+export interface PopoverRootProps {
+  /**
+   * Whether the popover should be modal.
+   * When true, the popover will trap focus and prevent interaction with the rest of the page.
+   *
+   * @default false
+   */
+  modal?: PopoverRootElementProps['modal'];
+  /**
+   * Whether the overlay is initially open.
+   * @default false
+   */
+  defaultOpen?: PopoverRootElementProps['defaultOpen'];
+  /**
+   * Whether the overlay is currently open.
+   * @default null
+   */
+  open?: PopoverRootElementProps['open'];
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled?: PopoverRootElementProps['disabled'];
+  /** Emitted when the popover is opened or closed. */
+  onOpenChange?: (event: PopoverRootEvents['openChange']) => void;
+  children?: Snippet;
+  [key: string]: unknown;
+}
 
 /**
- * Props for the {@link PopoverRoot} component.
+ * A Svelte component that renders an `prosekit-popover-root` custom element.
+ *
+ * @public
  */
-export interface PopoverRootProps extends Partial<CreateProps<Props, Events>> {}
+export const PopoverRoot: Component<PopoverRootProps> = PopoverRootComponent as unknown as Component<PopoverRootProps>;
 
-export const PopoverRoot = Component as typeof SvelteComponent<PopoverRootProps & HTMLAttributes<PopoverRootElement>>
+export type { PopoverRootEvents };

package/src/components/popover/popover-trigger.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/popover'
+  import { registerPopoverTriggerElement } from '@prosekit/web/popover'
+  import type { PopoverTriggerElement } from '@prosekit/web/popover'
+  registerPopoverTriggerElement()
+
+  let { closeDelay: p0, delay: p1, disabled: p2, openOnHover: p3, onOpenChange: e0, children = undefined, ...restProps } = $props()
+  let element: PopoverTriggerElement | undefined
+  const handlers: EventListener[] = []
+
+  $effect(() => {
+    if (!element) return
+
+    Object.assign(element, { closeDelay: p0, delay: p1, disabled: p2, openOnHover: p3 })
 
-import { popoverTriggerProps, popoverTriggerEvents } from '@prosekit/web/popover'
-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(popoverTriggerProps), Object.keys(popoverTriggerEvents))
+  $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-popover-trigger {...attributes} use:useEventHandlers={eventHandlers} bind:this={element}>
-    <slot />
-  </prosekit-popover-trigger>
-</ClientUpdate>
+<prosekit-popover-trigger {...restProps} bind:this={element}>{@render children?.()}</prosekit-popover-trigger>

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

@@ -1,14 +1,51 @@
-import type { PopoverTriggerElement, PopoverTriggerProps as Props, PopoverTriggerEvents as Events } from '@prosekit/web/popover'    
-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 { PopoverTriggerEvents, PopoverTriggerProps as PopoverTriggerElementProps } from '@prosekit/web/popover';
+import type { Component, Snippet } from 'svelte';
 
-import type { CreateProps } from '../create-props.ts'
+import PopoverTriggerComponent from './popover-trigger.gen.svelte';
 
-import Component from './popover-trigger.gen.svelte'
+/**
+ * Props for the {@link PopoverTrigger} Svelte component.
+ *
+ * @public
+ */
+export interface PopoverTriggerProps {
+  /**
+   * 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;
+  children?: Snippet;
+  [key: string]: unknown;
+}
 
 /**
- * Props for the {@link PopoverTrigger} component.
+ * A Svelte component that renders an `prosekit-popover-trigger` custom element.
+ *
+ * @public
  */
-export interface PopoverTriggerProps extends Partial<CreateProps<Props, Events>> {}
+export const PopoverTrigger: Component<PopoverTriggerProps> = PopoverTriggerComponent as unknown as Component<PopoverTriggerProps>;
 
-export const PopoverTrigger = Component as typeof SvelteComponent<PopoverTriggerProps & HTMLAttributes<PopoverTriggerElement>>
+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/svelte/resizable'
+
+<ResizableRoot>
+  <img src="..." />
+  <ResizableHandle>...</ResizableHandle>
+</ResizableRoot>
+```
+*/
+
+export * from './index.gen.ts'

package/src/components/resizable/resizable-handle.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/resizable'
+  import { registerResizableHandleElement } from '@prosekit/web/resizable'
+  import type { ResizableHandleElement } from '@prosekit/web/resizable'
+  registerResizableHandleElement()
 
-import { resizableHandleProps, resizableHandleEvents } from '@prosekit/web/resizable'
-import { ClientUpdate } from '../client-update/index.ts'
-import { useComponent } from '../use-component.ts'
-import { useEventHandlers } from '../use-event-handlers.ts'
+  let { position: p0, children = undefined, ...restProps } = $props()
+  let element: ResizableHandleElement | undefined
 
-let attributes: Record<string, unknown> = {}
-let eventHandlers: Record<string, (...args: any[]) => any> = {}
-let element: HTMLElement | undefined = undefined
-const handleChange = useComponent(Object.keys(resizableHandleProps), Object.keys(resizableHandleEvents))
+  $effect(() => {
+    if (!element) return
 
-$: {
-  [attributes, eventHandlers] = handleChange(element, $$props)
-}
+    Object.assign(element, { position: p0 })
+  })
 </script>
 
-<ClientUpdate>
-  <prosekit-resizable-handle {...attributes} use:useEventHandlers={eventHandlers} bind:this={element}>
-    <slot />
-  </prosekit-resizable-handle>
-</ClientUpdate>
+<prosekit-resizable-handle {...restProps} bind:this={element}>{@render children?.()}</prosekit-resizable-handle>

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

@@ -1,14 +1,31 @@
-import type { ResizableHandleElement, ResizableHandleProps as Props, ResizableHandleEvents as Events } from '@prosekit/web/resizable'    
-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 { ResizableHandleProps as ResizableHandleElementProps } from '@prosekit/web/resizable';
+import type { Component, Snippet } from 'svelte';
 
-import Component from './resizable-handle.gen.svelte'
+import ResizableHandleComponent from './resizable-handle.gen.svelte';
 
 /**
- * Props for the {@link ResizableHandle} component.
+ * Props for the {@link ResizableHandle} Svelte component.
+ *
+ * @public
  */
-export interface ResizableHandleProps extends Partial<CreateProps<Props, Events>> {}
+export interface ResizableHandleProps {
+  /**
+   * The position of the handle.
+   *
+   * @default "bottom-right"
+   */
+  position?: ResizableHandleElementProps['position'];
+  children?: Snippet;
+  [key: string]: unknown;
+}
 
-export const ResizableHandle = Component as typeof SvelteComponent<ResizableHandleProps & HTMLAttributes<ResizableHandleElement>>
+/**
+ * A Svelte component that renders an `prosekit-resizable-handle` custom element.
+ *
+ * @public
+ */
+export const ResizableHandle: Component<ResizableHandleProps> = ResizableHandleComponent as unknown as Component<ResizableHandleProps>;

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

@@ -1,23 +1,33 @@
+<!-- This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly. -->
+
 <script lang="ts">
-import '@prosekit/web/resizable'
+  import { registerResizableRootElement } from '@prosekit/web/resizable'
+  import type { ResizableRootElement } from '@prosekit/web/resizable'
+  registerResizableRootElement()
+
+  let { aspectRatio: p0, height: p1, width: p2, onResizeEnd: e0, onResizeStart: e1, children = undefined, ...restProps } = $props()
+  let element: ResizableRootElement | undefined
+  const handlers: EventListener[] = []
+
+  $effect(() => {
+    if (!element) return
+
+    Object.assign(element, { aspectRatio: p0, height: p1, width: p2 })
 
-import { resizableRootProps, resizableRootEvents } from '@prosekit/web/resizable'
-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)
+    handlers.push(e1)
+  })
 
-let attributes: Record<string, unknown> = {}
-let eventHandlers: Record<string, (...args: any[]) => any> = {}
-let element: HTMLElement | undefined = undefined
-const handleChange = useComponent(Object.keys(resizableRootProps), Object.keys(resizableRootEvents))
+  $effect(() => {
+    if (!element) return
 
-$: {
-  [attributes, eventHandlers] = handleChange(element, $$props)
-}
+    const ac = new AbortController()
+    for (const [index, eventName] of ["resizeEnd", "resizeStart"].entries()) {
+      element.addEventListener(eventName, (event) => handlers[index]?.(event), { signal: ac.signal })
+    }
+    return () => ac.abort()
+  })
 </script>
 
-<ClientUpdate>
-  <prosekit-resizable-root {...attributes} use:useEventHandlers={eventHandlers} bind:this={element}>
-    <slot />
-  </prosekit-resizable-root>
-</ClientUpdate>
+<prosekit-resizable-root {...restProps} bind:this={element}>{@render children?.()}</prosekit-resizable-root>