Resizable panels, animated with Motion

pnpm add motion-panels motion       # the core alone
pnpm add motion-panels motion react # with the React adapter

import { createPanel, const createPanelGroup: (orientation?: Orientation) => PanelGroupcreatePanelGroup } from 'motion-panels'
            
const createPanel: (group: PanelGroup, initial: PanelOptions) => PanelController
import { const Group: ({ children, orientation, style, transition, ...props }: GroupProps) => JSX.ElementGroup, const Panel: (props: PanelProps) => JSX.ElementPanel, const Separator: ({ "aria-label": ariaLabel, own, style, tabIndex, transition, ...props }: SeparatorProps) => JSX.ElementSeparator } from 'motion-panels/react'

import { const Group: ({ children, orientation, style, transition, ...props }: GroupProps) => JSX.ElementGroup, const Panel: (props: PanelProps) => JSX.ElementPanel } from 'motion-panels/react'
import { function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>] (+1 overload)
Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState } from 'react'

export function function Layout(): JSX.ElementLayout() {
  const [const width: numberwidth, const setWidth: Dispatch<SetStateAction<number>>setWidth] = useState<number>(initialState: number | (() => number)): [number, Dispatch<SetStateAction<number>>] (+1 overload)
Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState(240)

  return (
    <const Group: ({ children, orientation, style, transition, ...props }: GroupProps) => JSX.ElementGroup orientation?: "horizontal" | "vertical" | undefinedorientation="horizontal">
      <const Panel: (props: PanelProps) => JSX.ElementPanel
        size: numbersize={const width: numberwidth}
        minSize?: number | undefinedminSize={160}
        maxSize?: number | undefinedmaxSize={420}
        onSizeChange?: ((size: number) => void) | undefinedonSizeChange={const setWidth: Dispatch<SetStateAction<number>>setWidth}
      >
        <function FileTree(): ReactNodeFileTree />
      </const Panel: (props: PanelProps) => JSX.ElementPanel>
      <const Panel: (props: PanelProps) => JSX.ElementPanel>
        <function Editor(): ReactNodeEditor />
      </const Panel: (props: PanelProps) => JSX.ElementPanel>
    </const Group: ({ children, orientation, style, transition, ...props }: GroupProps) => JSX.ElementGroup>
  )
}

import { const Group: ({ children, orientation, style, transition, ...props }: GroupProps) => JSX.ElementGroup, const Panel: (props: PanelProps) => JSX.ElementPanel, const Separator: ({ "aria-label": ariaLabel, own, style, tabIndex, transition, ...props }: SeparatorProps) => JSX.ElementSeparator } from 'motion-panels/react'

export function function Layout(): JSX.ElementLayout() {
  return (
    <const Group: ({ children, orientation, style, transition, ...props }: GroupProps) => JSX.ElementGroup>
      <const Panel: (props: PanelProps) => JSX.ElementPanel size: numbersize={240} minSize?: number | undefinedminSize={160} maxSize?: number | undefinedmaxSize={420}>
        <function FileTree(): ReactNodeFileTree />
      </const Panel: (props: PanelProps) => JSX.ElementPanel>
      <const Separator: ({ "aria-label": ariaLabel, own, style, tabIndex, transition, ...props }: SeparatorProps) => JSX.ElementSeparator />
      <const Panel: (props: PanelProps) => JSX.ElementPanel>
        <function Editor(): ReactNodeEditor />
      </const Panel: (props: PanelProps) => JSX.ElementPanel>
    </const Group: ({ children, orientation, style, transition, ...props }: GroupProps) => JSX.ElementGroup>
  )
}

import { const Group: ({ children, orientation, style, transition, ...props }: GroupProps) => JSX.ElementGroup, const Panel: (props: PanelProps) => JSX.ElementPanel, const Separator: ({ "aria-label": ariaLabel, own, style, tabIndex, transition, ...props }: SeparatorProps) => JSX.ElementSeparator } from 'motion-panels/react'
import { function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>] (+1 overload)
Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState } from 'react'

export function function Workspace(): JSX.ElementWorkspace() {
  const [const height: numberheight, const setHeight: Dispatch<SetStateAction<number>>setHeight] = useState<number>(initialState: number | (() => number)): [number, Dispatch<SetStateAction<number>>] (+1 overload)
Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState(120)

  return (
    <const Group: ({ children, orientation, style, transition, ...props }: GroupProps) => JSX.ElementGroup orientation?: "vertical" | "horizontal" | undefinedorientation="vertical">
      <const Panel: (props: PanelProps) => JSX.ElementPanel>
        <function Editor(): ReactNodeEditor />
      </const Panel: (props: PanelProps) => JSX.ElementPanel>
      <const Separator: ({ "aria-label": ariaLabel, own, style, tabIndex, transition, ...props }: SeparatorProps) => JSX.ElementSeparator />
      <const Panel: (props: PanelProps) => JSX.ElementPanel size: numbersize={const height: numberheight} minSize?: number | undefinedminSize={80} maxSize?: number | undefinedmaxSize={220} onSizeChange?: ((size: number) => void) | undefinedonSizeChange={const setHeight: Dispatch<SetStateAction<number>>setHeight}>
        <function Output(): ReactNodeOutput />
      </const Panel: (props: PanelProps) => JSX.ElementPanel>
    </const Group: ({ children, orientation, style, transition, ...props }: GroupProps) => JSX.ElementGroup>
  )
}

import { const Group: ({ children, orientation, style, transition, ...props }: GroupProps) => JSX.ElementGroup, const Panel: (props: PanelProps) => JSX.ElementPanel, const Separator: ({ "aria-label": ariaLabel, own, style, tabIndex, transition, ...props }: SeparatorProps) => JSX.ElementSeparator } from 'motion-panels/react'
import { function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>] (+1 overload)
Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState } from 'react'

export function function Workspace(): JSX.ElementWorkspace() {
  const [const width: numberwidth, const setWidth: Dispatch<SetStateAction<number>>setWidth] = useState<number>(initialState: number | (() => number)): [number, Dispatch<SetStateAction<number>>] (+1 overload)
Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState(260)
  const [const collapsed: booleancollapsed, const setCollapsed: Dispatch<SetStateAction<boolean>>setCollapsed] = useState<boolean>(initialState: boolean | (() => boolean)): [boolean, Dispatch<SetStateAction<boolean>>] (+1 overload)
Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState(false)

  return (
    <const Group: ({ children, orientation, style, transition, ...props }: GroupProps) => JSX.ElementGroup>
      <const Panel: (props: PanelProps) => JSX.ElementPanel
        size: numbersize={const width: numberwidth}
        minSize?: number | undefinedminSize={180}
        collapsed?: boolean | undefinedcollapsed={const collapsed: booleancollapsed}
        onCollapsedChange?: ((collapsed: boolean) => void) | undefinedonCollapsedChange={const setCollapsed: Dispatch<SetStateAction<boolean>>setCollapsed}
        onSizeChange?: ((size: number) => void) | undefinedonSizeChange={const setWidth: Dispatch<SetStateAction<number>>setWidth}
        MotionNodeAnimationOptions.initial?: boolean | TargetAndTransition | VariantLabels | undefined
Properties, variant label or array of variant labels to start in.

Set to `false` to initialise with the values in `animate` (disabling the mount animation)

```jsx
// As values
<motion.div initial={{ opacity: 1 }} />

// As variant
<motion.div initial="visible" variants={variants} />

// Multiple variants
<motion.div initial={["visible", "active"]} variants={variants} />

// As false (disable mount animation)
<motion.div initial={false} animate={{ opacity: 0 }} />
```initial={{ scale?: ValueKeyframesDefinition | undefined
[MDN Reference](https://developer.mozilla.org/docs/Web/CSS/scale)scale: 0.9 }}
        MotionNodeAnimationOptions.animate?: boolean | TargetAndTransition | VariantLabels | LegacyAnimationControls | undefined
Values to animate to, variant label(s), or `LegacyAnimationControls`.

```jsx
// As values
<motion.div animate={{ opacity: 1 }} />

// As variant
<motion.div animate="visible" variants={variants} />

// Multiple variants
<motion.div animate={["visible", "active"]} variants={variants} />

// LegacyAnimationControls
<motion.div animate={animation} />
```animate={{ scale?: ValueKeyframesDefinition | undefined
[MDN Reference](https://developer.mozilla.org/docs/Web/CSS/scale)scale: 1 }}
        transition?: (Transition<any> & Transition) | undefined
Default transition. If no `transition` is defined in `animate`, it will use the transition defined here.
```jsx
const spring = {
  type: "spring",
  damping: 10,
  stiffness: 100
}

<motion.div transition={spring} animate={{ scale: 1.2 }} />
```transition={{ bounce?: number | undefined
`bounce` determines the "bounciness" of a spring animation.

`0` is no bounce, and `1` is extremely bouncy.

If `duration` is set, this defaults to `0.25`.

Note: `bounce` and `duration` will be overridden if `stiffness`, `damping` or `mass` are set.
@publicbounce: 0.4, ValueTransition.duration?: number | undefined
The duration of the tween animation. Set to `0.3` by default, 0r `0.8` if animating a series of keyframes.
@publicduration: 0.7, ValueTransition.type?: AnimationGeneratorType | undefined
Type of animation to use.

- "tween": Duration-based animation with ease curve
- "spring": Physics or duration-based spring animation
- false: Use an instant animationtype: 'spring' }}
        MotionProps.style?: MotionStyle | undefined

The React DOM `style` prop, enhanced with support for `MotionValue`s and separate `transform` values.

```jsx
export const MyComponent = () => {
  const x = useMotionValue(0)

  return <motion.div style={{ x, opacity: 1, scale: 0.5 }} />
}
```style={{ originX?: MotionValueHelper<AnyResolvedKeyframe | undefined>originX: 1 }}
      >
        <function Navigator(): ReactNodeNavigator />
      </const Panel: (props: PanelProps) => JSX.ElementPanel>
      <const Separator: ({ "aria-label": ariaLabel, own, style, tabIndex, transition, ...props }: SeparatorProps) => JSX.ElementSeparator />
      <const Panel: (props: PanelProps) => JSX.ElementPanel>
        <function Editor(): ReactNodeEditor />
      </const Panel: (props: PanelProps) => JSX.ElementPanel>
    </const Group: ({ children, orientation, style, transition, ...props }: GroupProps) => JSX.ElementGroup>
  )
}

import { const Group: ({ children, orientation, style, transition, ...props }: GroupProps) => JSX.ElementGroup, const Panel: (props: PanelProps) => JSX.ElementPanel, const Separator: ({ "aria-label": ariaLabel, own, style, tabIndex, transition, ...props }: SeparatorProps) => JSX.ElementSeparator } from 'motion-panels/react'
import { function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>] (+1 overload)
Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState } from 'react'

export function function Workspace(): JSX.ElementWorkspace() {
  const [const width: numberwidth, const setWidth: Dispatch<SetStateAction<number>>setWidth] = useState<number>(initialState: number | (() => number)): [number, Dispatch<SetStateAction<number>>] (+1 overload)
Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState(240)
  const [const collapsed: booleancollapsed, const setCollapsed: Dispatch<SetStateAction<boolean>>setCollapsed] = useState<boolean>(initialState: boolean | (() => boolean)): [boolean, Dispatch<SetStateAction<boolean>>] (+1 overload)
Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState(false)

  return (
    <const Group: ({ children, orientation, style, transition, ...props }: GroupProps) => JSX.ElementGroup>
      <const Panel: (props: PanelProps) => JSX.ElementPanel
        size: numbersize={const width: numberwidth}
        minSize?: number | undefinedminSize={160}
        collapsed?: boolean | undefinedcollapsed={const collapsed: booleancollapsed}
        onCollapsedChange?: ((collapsed: boolean) => void) | undefinedonCollapsedChange={const setCollapsed: Dispatch<SetStateAction<boolean>>setCollapsed}
        onSizeChange?: ((size: number) => void) | undefinedonSizeChange={const setWidth: Dispatch<SetStateAction<number>>setWidth}
      >
        <function FileTree(): ReactNodeFileTree />
      </const Panel: (props: PanelProps) => JSX.ElementPanel>
      <const Separator: ({ "aria-label": ariaLabel, own, style, tabIndex, transition, ...props }: SeparatorProps) => JSX.ElementSeparator />
      <const Panel: (props: PanelProps) => JSX.ElementPanel pin?: boolean | undefinedpin>
        <function Document(): ReactNodeDocument />
      </const Panel: (props: PanelProps) => JSX.ElementPanel>
    </const Group: ({ children, orientation, style, transition, ...props }: GroupProps) => JSX.ElementGroup>
  )
}

import { const Group: ({ children, orientation, style, transition, ...props }: GroupProps) => JSX.ElementGroup, const Panel: (props: PanelProps) => JSX.ElementPanel, const Separator: ({ "aria-label": ariaLabel, own, style, tabIndex, transition, ...props }: SeparatorProps) => JSX.ElementSeparator } from 'motion-panels/react'
import { function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>] (+1 overload)
Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState } from 'react'

export function function Ide(): JSX.ElementIde() {
  const [const sidebar: numbersidebar, const setSidebar: Dispatch<SetStateAction<number>>setSidebar] = useState<number>(initialState: number | (() => number)): [number, Dispatch<SetStateAction<number>>] (+1 overload)
Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState(200)
  const [const terminal: numberterminal, const setTerminal: Dispatch<SetStateAction<number>>setTerminal] = useState<number>(initialState: number | (() => number)): [number, Dispatch<SetStateAction<number>>] (+1 overload)
Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState(100)

  return (
    <const Group: ({ children, orientation, style, transition, ...props }: GroupProps) => JSX.ElementGroup>
      <const Panel: (props: PanelProps) => JSX.ElementPanel size: numbersize={const sidebar: numbersidebar} minSize?: number | undefinedminSize={140} onSizeChange?: ((size: number) => void) | undefinedonSizeChange={const setSidebar: Dispatch<SetStateAction<number>>setSidebar}>
        <function FileTree(): ReactNodeFileTree />
      </const Panel: (props: PanelProps) => JSX.ElementPanel>
      <const Separator: ({ "aria-label": ariaLabel, own, style, tabIndex, transition, ...props }: SeparatorProps) => JSX.ElementSeparator />
      <const Panel: (props: PanelProps) => JSX.ElementPanel>
        <const Group: ({ children, orientation, style, transition, ...props }: GroupProps) => JSX.ElementGroup orientation?: "vertical" | "horizontal" | undefinedorientation="vertical">
          <const Panel: (props: PanelProps) => JSX.ElementPanel>
            <function Editor(): ReactNodeEditor />
          </const Panel: (props: PanelProps) => JSX.ElementPanel>
          <const Separator: ({ "aria-label": ariaLabel, own, style, tabIndex, transition, ...props }: SeparatorProps) => JSX.ElementSeparator />
          <const Panel: (props: PanelProps) => JSX.ElementPanel size: numbersize={const terminal: numberterminal} minSize?: number | undefinedminSize={60} onSizeChange?: ((size: number) => void) | undefinedonSizeChange={const setTerminal: Dispatch<SetStateAction<number>>setTerminal}>
            <function Console(): ReactNodeConsole />
          </const Panel: (props: PanelProps) => JSX.ElementPanel>
        </const Group: ({ children, orientation, style, transition, ...props }: GroupProps) => JSX.ElementGroup>
      </const Panel: (props: PanelProps) => JSX.ElementPanel>
    </const Group: ({ children, orientation, style, transition, ...props }: GroupProps) => JSX.ElementGroup>
  )
}

import { const Group: ({ children, orientation, style, transition, ...props }: GroupProps) => JSX.ElementGroup, const Panel: (props: PanelProps) => JSX.ElementPanel } from 'motion-panels/react'
import { function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>] (+1 overload)
Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState } from 'react'

export function function Workbench(): JSX.ElementWorkbench() {
  const [const left: numberleft, const setLeft: Dispatch<SetStateAction<number>>setLeft] = useState<number>(initialState: number | (() => number)): [number, Dispatch<SetStateAction<number>>] (+1 overload)
Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState(180)
  const [const right: numberright, const setRight: Dispatch<SetStateAction<number>>setRight] = useState<number>(initialState: number | (() => number)): [number, Dispatch<SetStateAction<number>>] (+1 overload)
Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState(180)

  return (
    <const Group: ({ children, orientation, style, transition, ...props }: GroupProps) => JSX.ElementGroup>
      <const Panel: (props: PanelProps) => JSX.ElementPanel size: numbersize={const left: numberleft} minSize?: number | undefinedminSize={120} onSizeChange?: ((size: number) => void) | undefinedonSizeChange={const setLeft: Dispatch<SetStateAction<number>>setLeft}>
        <function FileTree(): ReactNodeFileTree />
      </const Panel: (props: PanelProps) => JSX.ElementPanel>
      <const Panel: (props: PanelProps) => JSX.ElementPanel>
        <function Editor(): ReactNodeEditor />
      </const Panel: (props: PanelProps) => JSX.ElementPanel>
      <const Panel: (props: PanelProps) => JSX.ElementPanel size: numbersize={const right: numberright} minSize?: number | undefinedminSize={120} onSizeChange?: ((size: number) => void) | undefinedonSizeChange={const setRight: Dispatch<SetStateAction<number>>setRight}>
        <function Outline(): ReactNodeOutline />
      </const Panel: (props: PanelProps) => JSX.ElementPanel>
    </const Group: ({ children, orientation, style, transition, ...props }: GroupProps) => JSX.ElementGroup>
  )
}

import { const createPanel: (group: PanelGroup, initial: PanelOptions) => PanelControllercreatePanel, const createPanelGroup: (orientation?: Orientation) => PanelGroupcreatePanelGroup, const FILL_ATTRIBUTE: "data-motion-panels-fill"FILL_ATTRIBUTE } from 'motion-panels'

export function function mountSplit(root: HTMLElement, panel: HTMLElement, fill: HTMLElement, grip: HTMLElement): () => voidmountSplit(root: HTMLElementroot: HTMLElement, panel: HTMLElementpanel: HTMLElement, fill: HTMLElementfill: HTMLElement, grip: HTMLElementgrip: HTMLElement) {
  const const group: PanelGroupgroup = function createPanelGroup(orientation?: Orientation): PanelGroupcreatePanelGroup('horizontal')

  var Object: ObjectConstructor
Provides functionality common to all JavaScript objects.Object.
ObjectConstructor.assign<CSSStyleDeclaration, {
    display: string;
    flexDirection: "row" | "column";
    overflow: string;
}>(target: CSSStyleDeclaration, source: {
    display: string;
    flexDirection: "row" | "column";
    overflow: string;
}): CSSStyleDeclaration & {
    display: string;
    flexDirection: "row" | "column";
    overflow: string;
} (+3 overloads)
Copy the values of all of the enumerable own properties from one or more source objects to a
target object. Returns the target object.
@paramtarget The target object to copy to.@paramsource The source object from which to copy properties.assign(root: HTMLElementroot.ElementCSSInlineStyle.style: CSSStyleDeclaration
[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/style)style, { display: stringdisplay: 'flex', flexDirection: "row" | "column"flexDirection: const group: PanelGroupgroup.PanelGroup.axes: Axesaxes.direction: "row" | "column"direction, overflow: stringoverflow: 'clip' })
  fill: HTMLElementfill.Element.setAttribute(qualifiedName: string, value: string): void
The **`setAttribute()`** method of the Element interface sets the value of an attribute on the specified element.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/setAttribute)setAttribute(const FILL_ATTRIBUTE: "data-motion-panels-fill"FILL_ATTRIBUTE, '')

  let let size: numbersize = 240
  const 
const base: {
    minSize: number;
    maxSize: number;
    onSizeChange: (next: number) => void;
}base = {
    minSize: numberminSize: 160,
    maxSize: numbermaxSize: 420,
    onSizeChange: (next: number) => voidonSizeChange: (next: numbernext: number) => {
      let size: numbersize = next: numbernext
      const controller: PanelControllercontroller.PanelController.sync: (options: PanelOptions) => voidsync({ ...
const base: {
    minSize: number;
    maxSize: number;
    onSizeChange: (next: number) => void;
}base, PanelOptions.size: numbersize })
    },
  }

  const const controller: PanelControllercontroller = function createPanel(group: PanelGroup, initial: PanelOptions): PanelControllercreatePanel(const group: PanelGroupgroup, { ...
const base: {
    minSize: number;
    maxSize: number;
    onSizeChange: (next: number) => void;
}base, PanelOptions.size: numbersize })
  const const detach: () => voiddetach = const controller: PanelControllercontroller.PanelController.attach: (element: HTMLElement) => () => voidattach(panel: HTMLElementpanel)

  const controller: PanelControllercontroller.
PanelController.motion: {
    content: MotionValue<number>;
    size: MotionValue<number>;
}motion.size: MotionValue<number>size.MotionValue<number>.on<"change">(eventName: "change", callback: (latestValue: number) => void): VoidFunctionon('change', (value: numbervalue) => {
    panel: HTMLElementpanel.ElementCSSInlineStyle.style: CSSStyleDeclaration
[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/style)style.CSSStyleDeclaration.width: string
[MDN Reference](https://developer.mozilla.org/docs/Web/CSS/width)width = `${var Math: Math
An intrinsic object that provides basic mathematics functionality and constants.Math.Math.max(...values: number[]): number
Returns the larger of a set of supplied numeric expressions.
@paramvalues Numeric expressions to be evaluated.max(0, value: numbervalue)}px`
  })

  grip: HTMLElementgrip.ARIAMixin.role: string | null
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/role)role = 'separator'
  grip: HTMLElementgrip.HTMLOrSVGElement.tabIndex: number
[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/tabIndex)tabIndex = 0
  grip: HTMLElementgrip.ARIAMixin.ariaOrientation: string | null
[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/ariaOrientation)ariaOrientation = const group: PanelGroupgroup.PanelGroup.axes: Axesaxes.separator: "horizontal" | "vertical"separator

  grip: HTMLElementgrip.HTMLElement.addEventListener<"pointerdown">(type: "pointerdown", listener: (this: HTMLElement, ev: PointerEvent) => any, options?: boolean | AddEventListenerOptions): void (+1 overload)
The **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)addEventListener('pointerdown', (event: PointerEventevent) => {
    const 
const origin: {
    x: number;
    y: number;
}origin = { x: numberx: event: PointerEventevent.MouseEvent.clientX: number
The **`clientX`** read-only property of the MouseEvent interface provides the horizontal coordinate within the application's viewport at which the event occurred (as opposed to the coordinate within the page).

[MDN Reference](https://developer.mozilla.org/docs/Web/API/MouseEvent/clientX)clientX, y: numbery: event: PointerEventevent.MouseEvent.clientY: number
The **`clientY`** read-only property of the MouseEvent interface provides the vertical coordinate within the application's viewport at which the event occurred (as opposed to the coordinate within the page).

[MDN Reference](https://developer.mozilla.org/docs/Web/API/MouseEvent/clientY)clientY }
    grip: HTMLElementgrip.Element.setPointerCapture(pointerId: number): void
The **`setPointerCapture()`** method of the _capture target_ of future pointer events.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/setPointerCapture)setPointerCapture(event: PointerEventevent.PointerEvent.pointerId: number
The **`pointerId`** read-only property of the event.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/PointerEvent/pointerId)pointerId)
    const controller: PanelControllercontroller.PanelController.drag: PanelDragdrag.PanelDrag.start: (cursor?: string) => voidstart()

    const const onMove: (move: PointerEvent) => voidonMove = (move: PointerEventmove: PointerEvent) =>
      const controller: PanelControllercontroller.PanelController.drag: PanelDragdrag.
PanelDrag.move: (offset: {
    x: number;
    y: number;
}) => voidmove({ x: numberx: move: PointerEventmove.MouseEvent.clientX: number
The **`clientX`** read-only property of the MouseEvent interface provides the horizontal coordinate within the application's viewport at which the event occurred (as opposed to the coordinate within the page).

[MDN Reference](https://developer.mozilla.org/docs/Web/API/MouseEvent/clientX)clientX - 
const origin: {
    x: number;
    y: number;
}origin.x: numberx, y: numbery: move: PointerEventmove.MouseEvent.clientY: number
The **`clientY`** read-only property of the MouseEvent interface provides the vertical coordinate within the application's viewport at which the event occurred (as opposed to the coordinate within the page).

[MDN Reference](https://developer.mozilla.org/docs/Web/API/MouseEvent/clientY)clientY - 
const origin: {
    x: number;
    y: number;
}origin.y: numbery })
    const const onUp: () => voidonUp = () => {
      const controller: PanelControllercontroller.PanelController.drag: PanelDragdrag.PanelDrag.end: () => voidend()
      grip: HTMLElementgrip.HTMLElement.removeEventListener<"pointermove">(type: "pointermove", listener: (this: HTMLElement, ev: PointerEvent) => any, options?: boolean | EventListenerOptions): void (+1 overload)
The **`removeEventListener()`** method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)removeEventListener('pointermove', const onMove: (move: PointerEvent) => voidonMove)
      grip: HTMLElementgrip.HTMLElement.removeEventListener<"pointerup">(type: "pointerup", listener: (this: HTMLElement, ev: PointerEvent) => any, options?: boolean | EventListenerOptions): void (+1 overload)
The **`removeEventListener()`** method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)removeEventListener('pointerup', const onUp: () => voidonUp)
    }

    grip: HTMLElementgrip.HTMLElement.addEventListener<"pointermove">(type: "pointermove", listener: (this: HTMLElement, ev: PointerEvent) => any, options?: boolean | AddEventListenerOptions): void (+1 overload)
The **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)addEventListener('pointermove', const onMove: (move: PointerEvent) => voidonMove)
    grip: HTMLElementgrip.HTMLElement.addEventListener<"pointerup">(type: "pointerup", listener: (this: HTMLElement, ev: PointerEvent) => any, options?: boolean | AddEventListenerOptions): void (+1 overload)
The **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)addEventListener('pointerup', const onUp: () => voidonUp)
  })

  grip: HTMLElementgrip.HTMLElement.addEventListener<"keydown">(type: "keydown", listener: (this: HTMLElement, ev: KeyboardEvent) => any, options?: boolean | AddEventListenerOptions): void (+1 overload)
The **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)addEventListener('keydown', (event: KeyboardEventevent) => const controller: PanelControllercontroller.PanelController.resizeByKey: (event: PanelKeyEvent) => voidresizeByKey(event: KeyboardEventevent))
  grip: HTMLElementgrip.HTMLElement.addEventListener<"dblclick">(type: "dblclick", listener: (this: HTMLElement, ev: MouseEvent) => any, options?: boolean | AddEventListenerOptions): void (+1 overload)
The **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)addEventListener('dblclick', () => const controller: PanelControllercontroller.PanelController.reset: () => voidreset())

  return () => {
    const detach: () => voiddetach()
    const controller: PanelControllercontroller.PanelController.destroy: () => voiddestroy()
  }
}

import type { PanelController, PanelOptions } from 'motion-panels'
import { 
const grips: {
    at(point: Point): HTMLElement[];
    invalidate: () => void;
    mark(key: "crossed" | "held", elements: HTMLElement[]): void;
    partners(elements: HTMLElement[], self: HTMLElement | null): PanelController[];
    register(element: HTMLElement, controller: PanelController): () => void;
    state(element: HTMLElement | null): GripState;
    subscribe: (listener: () => void) => () => void;
}grips } from 'motion-panels'

export function function wireExtras(controller: PanelController, options: PanelOptions, content: HTMLElement, grip: HTMLElement, toggle: HTMLElement): () => voidwireExtras(controller: PanelControllercontroller: PanelController, options: PanelOptionsoptions: PanelOptions, content: HTMLElementcontent: HTMLElement, grip: HTMLElementgrip: HTMLElement, toggle: HTMLElementtoggle: HTMLElement) {
  let let collapsed: booleancollapsed = false

  toggle: HTMLElementtoggle.HTMLElement.addEventListener<"click">(type: "click", listener: (this: HTMLElement, ev: PointerEvent) => any, options?: boolean | AddEventListenerOptions): void (+1 overload)
The **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)addEventListener('click', () => {
    let collapsed: booleancollapsed = !let collapsed: booleancollapsed
    controller: PanelControllercontroller.PanelController.sync: (options: PanelOptions) => voidsync({ ...options: PanelOptionsoptions, PanelOptions.collapsed?: boolean | undefinedcollapsed })
  })

  controller: PanelControllercontroller.
PanelController.motion: {
    content: MotionValue<number>;
    size: MotionValue<number>;
}motion.content: MotionValue<number>content.MotionValue<number>.on<"change">(eventName: "change", callback: (latestValue: number) => void): VoidFunctionon('change', (value: numbervalue) => {
    content: HTMLElementcontent.ElementCSSInlineStyle.style: CSSStyleDeclaration
[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/style)style.CSSStyleDeclaration.width: string
[MDN Reference](https://developer.mozilla.org/docs/Web/CSS/width)width = `${value: numbervalue}px`
  })

  const const stop: () => voidstop = controller: PanelControllercontroller.PanelController.subscribe: (listener: () => void) => () => voidsubscribe(() => {
    grip: HTMLElementgrip.Element.toggleAttribute(qualifiedName: string, force?: boolean): boolean
The **`toggleAttribute()`** method of the present and adding it if it is not present) on the given element.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/toggleAttribute)toggleAttribute('data-resizing', controller: PanelControllercontroller.PanelController.state: PanelStatestate.PanelState.dragging: booleandragging)
  })

  const const unregister: () => voidunregister = 
const grips: {
    at(point: Point): HTMLElement[];
    invalidate: () => void;
    mark(key: "crossed" | "held", elements: HTMLElement[]): void;
    partners(elements: HTMLElement[], self: HTMLElement | null): PanelController[];
    register(element: HTMLElement, controller: PanelController): () => void;
    state(element: HTMLElement | null): GripState;
    subscribe: (listener: () => void) => () => void;
}grips.function register(element: HTMLElement, controller: PanelController): () => voidregister(grip: HTMLElementgrip, controller: PanelControllercontroller)

  grip: HTMLElementgrip.HTMLElement.addEventListener<"pointerdown">(type: "pointerdown", listener: (this: HTMLElement, ev: PointerEvent) => any, options?: boolean | AddEventListenerOptions): void (+1 overload)
The **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)addEventListener('pointerdown', (event: PointerEventevent) => {
    
const grips: {
    at(point: Point): HTMLElement[];
    invalidate: () => void;
    mark(key: "crossed" | "held", elements: HTMLElement[]): void;
    partners(elements: HTMLElement[], self: HTMLElement | null): PanelController[];
    register(element: HTMLElement, controller: PanelController): () => void;
    state(element: HTMLElement | null): GripState;
    subscribe: (listener: () => void) => () => void;
}grips.invalidate: () => voidinvalidate()
    const const crossed: HTMLElement[]crossed = 
const grips: {
    at(point: Point): HTMLElement[];
    invalidate: () => void;
    mark(key: "crossed" | "held", elements: HTMLElement[]): void;
    partners(elements: HTMLElement[], self: HTMLElement | null): PanelController[];
    register(element: HTMLElement, controller: PanelController): () => void;
    state(element: HTMLElement | null): GripState;
    subscribe: (listener: () => void) => () => void;
}grips.function at(point: Point): HTMLElement[]at(event: PointerEventevent)
    const const partners: PanelController[]partners = 
const grips: {
    at(point: Point): HTMLElement[];
    invalidate: () => void;
    mark(key: "crossed" | "held", elements: HTMLElement[]): void;
    partners(elements: HTMLElement[], self: HTMLElement | null): PanelController[];
    register(element: HTMLElement, controller: PanelController): () => void;
    state(element: HTMLElement | null): GripState;
    subscribe: (listener: () => void) => () => void;
}grips.function partners(elements: HTMLElement[], self: HTMLElement | null): PanelController[]partners(const crossed: HTMLElement[]crossed, grip: HTMLElementgrip)
    const const cursor: "move" | undefinedcursor = const partners: PanelController[]partners.Array<PanelController>.length: number
Gets or sets the length of the array. This is a number one higher than the highest index in the array.length > 0 ? 'move' : var undefinedundefined

    
const grips: {
    at(point: Point): HTMLElement[];
    invalidate: () => void;
    mark(key: "crossed" | "held", elements: HTMLElement[]): void;
    partners(elements: HTMLElement[], self: HTMLElement | null): PanelController[];
    register(element: HTMLElement, controller: PanelController): () => void;
    state(element: HTMLElement | null): GripState;
    subscribe: (listener: () => void) => () => void;
}grips.function mark(key: "crossed" | "held", elements: HTMLElement[]): voidmark('held', const crossed: HTMLElement[]crossed)
    controller: PanelControllercontroller.PanelController.drag: PanelDragdrag.PanelDrag.start: (cursor?: string) => voidstart(const cursor: "move" | undefinedcursor)
    for (const const partner: PanelControllerpartner of const partners: PanelController[]partners) {
      const partner: PanelControllerpartner.PanelController.drag: PanelDragdrag.PanelDrag.start: (cursor?: string) => voidstart(const cursor: "move" | undefinedcursor)
    }
  })

  return () => {
    const unregister: () => voidunregister()
    const stop: () => voidstop()
  }
}

[role='separator'][aria-orientation='vertical'] {
  width: 14px;
}

[role='separator']::after {
  border-radius: 999px;
  background: var(--border);
  content: '';
}

[role='separator']:hover::after,
[role='separator'][data-crossing]::after {
  background: var(--muted-foreground);
}

[role='separator'][data-resizing]::after {
  background: var(--primary);
}

[role='separator'][data-motion-panels-edge]::after {
  display: none;
}