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: <S extends Size>(group: PanelGroup, initial: PanelOptions<S>) => PanelController<S>
import { const Group: <V>({ children, onOrderChange, order, orientation, reorder: travel, style, transition, ...props }: GroupProps<V>) => JSX.ElementGroup, 
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel, const Separator: ({ "aria-label": ariaLabel, end, own, style, tabIndex, transition, ...props }: GripProps) => JSX.ElementSeparator } from 'motion-panels/react'

npx shadcn@latest add https://motion-panels.letstri.dev/r/motion-panels.json

import { PanelGroup, Panel, PanelSeparator } from '@/components/ui/motion-panels'
import { useState } from 'react'

export function Layout() {
  const [width, setWidth] = useState(240)

  return (
    <PanelGroup orientation="horizontal">
      <Panel size={width} minSize={160} maxSize={420} onSizeChange={setWidth}>
        <FileTree />
      </Panel>
      <PanelSeparator withHandle />
      <Panel>
        <Editor />
      </Panel>
    </PanelGroup>
  )
}

import { const Group: <V>({ children, onOrderChange, order, orientation, reorder: travel, style, transition, ...props }: GroupProps<V>) => JSX.ElementGroup, 
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel } 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: <V>({ children, onOrderChange, order, orientation, reorder: travel, style, transition, ...props }: GroupProps<V>) => JSX.ElementGroup orientation?: "horizontal" | "vertical" | undefinedorientation="horizontal">
      <
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel
        size: numbersize={const width: numberwidth}
        minSize?: Size | undefinedminSize={160}
        maxSize?: Size | undefinedmaxSize={420}
        onSizeChange?: ((size: number) => void) | undefinedonSizeChange={const setWidth: Dispatch<SetStateAction<number>>setWidth}
      >
        <function FileTree(): ReactNodeFileTree />
      </
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel>
      <
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel>
        <function Editor(): ReactNodeEditor />
      </
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel>
    </const Group: <V>({ children, onOrderChange, order, orientation, reorder: travel, style, transition, ...props }: GroupProps<V>) => JSX.ElementGroup>
  )
}

import { const Group: <V>({ children, onOrderChange, order, orientation, reorder: travel, style, transition, ...props }: GroupProps<V>) => JSX.ElementGroup, 
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel, const Separator: ({ "aria-label": ariaLabel, end, own, style, tabIndex, transition, ...props }: GripProps) => JSX.ElementSeparator } from 'motion-panels/react'

export function function Layout(): JSX.ElementLayout() {
  return (
    <const Group: <V>({ children, onOrderChange, order, orientation, reorder: travel, style, transition, ...props }: GroupProps<V>) => JSX.ElementGroup>
      <
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel size: 240size={240} minSize?: Size | undefinedminSize={160} maxSize?: Size | undefinedmaxSize={420}>
        <function FileTree(): ReactNodeFileTree />
      </
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel>
      <const Separator: ({ "aria-label": ariaLabel, end, own, style, tabIndex, transition, ...props }: GripProps) => JSX.ElementSeparator />
      <
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel>
        <function Editor(): ReactNodeEditor />
      </
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel>
    </const Group: <V>({ children, onOrderChange, order, orientation, reorder: travel, style, transition, ...props }: GroupProps<V>) => JSX.ElementGroup>
  )
}

import { const Group: <V>({ children, onOrderChange, order, orientation, reorder: travel, style, transition, ...props }: GroupProps<V>) => JSX.ElementGroup, 
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel, const Separator: ({ "aria-label": ariaLabel, end, own, style, tabIndex, transition, ...props }: GripProps) => 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: <V>({ children, onOrderChange, order, orientation, reorder: travel, style, transition, ...props }: GroupProps<V>) => JSX.ElementGroup orientation?: "vertical" | "horizontal" | undefinedorientation="vertical">
      <
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel>
        <function Editor(): ReactNodeEditor />
      </
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel>
      <const Separator: ({ "aria-label": ariaLabel, end, own, style, tabIndex, transition, ...props }: GripProps) => JSX.ElementSeparator />
      <
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel size: numbersize={const height: numberheight} minSize?: Size | undefinedminSize={80} maxSize?: Size | undefinedmaxSize={220} onSizeChange?: ((size: number) => void) | undefinedonSizeChange={const setHeight: Dispatch<SetStateAction<number>>setHeight}>
        <function Output(): ReactNodeOutput />
      </
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel>
    </const Group: <V>({ children, onOrderChange, order, orientation, reorder: travel, style, transition, ...props }: GroupProps<V>) => JSX.ElementGroup>
  )
}

import { const Group: <V>({ children, onOrderChange, order, orientation, reorder: travel, style, transition, ...props }: GroupProps<V>) => JSX.ElementGroup, 
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel, const Separator: ({ "aria-label": ariaLabel, end, own, style, tabIndex, transition, ...props }: GripProps) => 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: <V>({ children, onOrderChange, order, orientation, reorder: travel, style, transition, ...props }: GroupProps<V>) => JSX.ElementGroup>
      <
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel
        size: numbersize={const width: numberwidth}
        minSize?: Size | 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}
        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 }}
        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' }}
        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: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel>
      <const Separator: ({ "aria-label": ariaLabel, end, own, style, tabIndex, transition, ...props }: GripProps) => JSX.ElementSeparator />
      <
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel>
        <function Editor(): ReactNodeEditor />
      </
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel>
    </const Group: <V>({ children, onOrderChange, order, orientation, reorder: travel, style, transition, ...props }: GroupProps<V>) => JSX.ElementGroup>
  )
}

import { const Group: <V>({ children, onOrderChange, order, orientation, reorder: travel, style, transition, ...props }: GroupProps<V>) => JSX.ElementGroup, 
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel, const Separator: ({ "aria-label": ariaLabel, end, own, style, tabIndex, transition, ...props }: GripProps) => 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: <V>({ children, onOrderChange, order, orientation, reorder: travel, style, transition, ...props }: GroupProps<V>) => JSX.ElementGroup>
      <
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel
        size: numbersize={const width: numberwidth}
        minSize?: Size | 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: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel>
      <const Separator: ({ "aria-label": ariaLabel, end, own, style, tabIndex, transition, ...props }: GripProps) => JSX.ElementSeparator />
      <
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel pin?: boolean | undefinedpin>
        <function Document(): ReactNodeDocument />
      </
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel>
    </const Group: <V>({ children, onOrderChange, order, orientation, reorder: travel, style, transition, ...props }: GroupProps<V>) => JSX.ElementGroup>
  )
}

import { const Group: <V>({ children, onOrderChange, order, orientation, reorder: travel, style, transition, ...props }: GroupProps<V>) => JSX.ElementGroup, 
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel, const Separator: ({ "aria-label": ariaLabel, end, own, style, tabIndex, transition, ...props }: GripProps) => 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: <V>({ children, onOrderChange, order, orientation, reorder: travel, style, transition, ...props }: GroupProps<V>) => JSX.ElementGroup>
      <
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel size: numbersize={const sidebar: numbersidebar} minSize?: Size | undefinedminSize={140} onSizeChange?: ((size: number) => void) | undefinedonSizeChange={const setSidebar: Dispatch<SetStateAction<number>>setSidebar}>
        <function FileTree(): ReactNodeFileTree />
      </
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel>
      <const Separator: ({ "aria-label": ariaLabel, end, own, style, tabIndex, transition, ...props }: GripProps) => JSX.ElementSeparator />
      <
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel>
        <const Group: <V>({ children, onOrderChange, order, orientation, reorder: travel, style, transition, ...props }: GroupProps<V>) => JSX.ElementGroup orientation?: "vertical" | "horizontal" | undefinedorientation="vertical">
          <
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel>
            <function Editor(): ReactNodeEditor />
          </
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel>
          <const Separator: ({ "aria-label": ariaLabel, end, own, style, tabIndex, transition, ...props }: GripProps) => JSX.ElementSeparator />
          <
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel size: numbersize={const terminal: numberterminal} minSize?: Size | undefinedminSize={60} onSizeChange?: ((size: number) => void) | undefinedonSizeChange={const setTerminal: Dispatch<SetStateAction<number>>setTerminal}>
            <function Console(): ReactNodeConsole />
          </
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel>
        </const Group: <V>({ children, onOrderChange, order, orientation, reorder: travel, style, transition, ...props }: GroupProps<V>) => JSX.ElementGroup>
      </
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel>
    </const Group: <V>({ children, onOrderChange, order, orientation, reorder: travel, style, transition, ...props }: GroupProps<V>) => JSX.ElementGroup>
  )
}

import { const Group: <V>({ children, onOrderChange, order, orientation, reorder: travel, style, transition, ...props }: GroupProps<V>) => JSX.ElementGroup, const Handle: ({ "aria-label": ariaLabel, onKeyDown, onPointerDown, style, type, ...props }: HandleProps) => JSX.Element | nullHandle, 
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel, const Separator: ({ "aria-label": ariaLabel, end, own, style, tabIndex, transition, ...props }: GripProps) => 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'

const const SIDES: Record<string, ReactNode>SIDES: type Record<K extends keyof any, T> = { [P in K]: T; }
Construct a type with a set of properties K of type TRecord<string, type ReactNode = string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode> | null | undefined
Represents all of the things React can render.

Where 
{@link 
ReactElement
}
 only represents JSX, `ReactNode` represents everything that can be rendered.
@see{@link https://react-typescript-cheatsheet.netlify.app/docs/reference/reactnode/ React TypeScript Cheatsheet}@example```tsx
// Typing children
type Props = { children: ReactNode }

const Component = ({ children }: Props) => <div>{children}</div>

<Component>hello</Component>
```@example```tsx
// Typing a custom element
type Props = { customElement: ReactNode }

const Component = ({ customElement }: Props) => <div>{customElement}</div>

<Component customElement={<div>hello</div>} />
```ReactNode> = {
  files: JSX.Elementfiles: <function Files(): ReactNodeFiles />,
  outline: JSX.Elementoutline: <function Outline(): ReactNodeOutline />,
}

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

  const const side: (id: string) => JSX.Elementside = (id: stringid: string) => (
    <
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel Attributes.key?: Key | null | undefinedkey={id: stringid} size: 200size={200} value?: unknownvalue={id: stringid}>
      <const Handle: ({ "aria-label": ariaLabel, onKeyDown, onPointerDown, style, type, ...props }: HandleProps) => JSX.Element | nullHandle className?: string | undefinedclassName={const GRIP: stringGRIP}>⠿</const Handle: ({ "aria-label": ariaLabel, onKeyDown, onPointerDown, style, type, ...props }: HandleProps) => JSX.Element | nullHandle>
      {const SIDES: Record<string, ReactNode>SIDES[id: stringid]}
    </
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel>
  )

  return (
    <const Group: <V>({ children, onOrderChange, order, orientation, reorder: travel, style, transition, ...props }: GroupProps<V>) => JSX.ElementGroup order?: string[] | undefinedorder={const order: string[]order} onOrderChange?: ((order: string[]) => void) | undefinedonOrderChange={const setOrder: Dispatch<SetStateAction<string[]>>setOrder}>
      {const side: (id: string) => JSX.Elementside(const order: string[]order[0])}
      <const Separator: ({ "aria-label": ariaLabel, end, own, style, tabIndex, transition, ...props }: GripProps) => JSX.ElementSeparator />
      <
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel>
        <function Editor(): ReactNodeEditor />
      </
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel>
      <const Separator: ({ "aria-label": ariaLabel, end, own, style, tabIndex, transition, ...props }: GripProps) => JSX.ElementSeparator />
      {const side: (id: string) => JSX.Elementside(const order: string[]order[1])}
    </const Group: <V>({ children, onOrderChange, order, orientation, reorder: travel, style, transition, ...props }: GroupProps<V>) => JSX.ElementGroup>
  )
}

import type { type Size = number | `${number}%`Size } from 'motion-panels/react'
import { const Group: <V>({ children, onOrderChange, order, orientation, reorder: travel, style, transition, ...props }: GroupProps<V>) => JSX.ElementGroup, 
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel } 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: Sizeleft, const setLeft: Dispatch<SetStateAction<Size>>setLeft] = useState<Size>(initialState: Size | (() => Size)): [Size, Dispatch<SetStateAction<Size>>] (+1 overload)
Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState<type Size = number | `${number}%`Size>('25%')
  const [const right: Sizeright, const setRight: Dispatch<SetStateAction<Size>>setRight] = useState<Size>(initialState: Size | (() => Size)): [Size, Dispatch<SetStateAction<Size>>] (+1 overload)
Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState<type Size = number | `${number}%`Size>('25%')

  return (
    <const Group: <V>({ children, onOrderChange, order, orientation, reorder: travel, style, transition, ...props }: GroupProps<V>) => JSX.ElementGroup>
      <
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel size: Sizesize={const left: Sizeleft} minSize?: Size | undefinedminSize="14%" maxSize?: Size | undefinedmaxSize="35%" onSizeChange?: ((size: Size) => void) | undefinedonSizeChange={const setLeft: Dispatch<SetStateAction<Size>>setLeft}>
        <function FileTree(): ReactNodeFileTree />
      </
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel>
      <
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel>
        <function Editor(): ReactNodeEditor />
      </
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel>
      <
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel size: Sizesize={const right: Sizeright} minSize?: Size | undefinedminSize="14%" maxSize?: Size | undefinedmaxSize="35%" onSizeChange?: ((size: Size) => void) | undefinedonSizeChange={const setRight: Dispatch<SetStateAction<Size>>setRight}>
        <function Outline(): ReactNodeOutline />
      </
const Panel: {
    <S extends Size>(props: SizedPanelProps<S>): ReactElement;
    (props: AnyPanelProps): ReactElement;
}
Overloads, not one generic signature: `ComponentProps<typeof Panel>` in a
wrapper reads the last one, and a lone generic would resolve there to its
constraint, handing the wrapper's consumers `Size` instead of the form they
passed. The last signature is the shapes side by side, which a call site
narrows on its own size.Panel>
    </const Group: <V>({ children, onOrderChange, order, orientation, reorder: travel, style, transition, ...props }: GroupProps<V>) => JSX.ElementGroup>
  )
}

import { const attachSeparator: (element: HTMLElement, group: PanelGroup, own?: PanelController) => () => voidattachSeparator, const createPanel: <S extends Size>(group: PanelGroup, initial: PanelOptions<S>) => PanelController<S>createPanel, 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: PanelController<number>controller.PanelController<number>.sync(options: PanelOptions<number>, mounting?: boolean): voidsync({ ...
const base: {
    minSize: number;
    maxSize: number;
    onSizeChange: (next: number) => void;
}base, PanelOptions<number>.size: numbersize })
    },
  }

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

  const controller: PanelController<number>controller.
PanelController<number>.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
  const const detachGrip: () => voiddetachGrip = function attachSeparator(element: HTMLElement, group: PanelGroup, own?: PanelController): () => voidattachSeparator(grip: HTMLElementgrip, const group: PanelGroupgroup, const controller: PanelController<number>controller)

  return () => {
    const detachGrip: () => voiddetachGrip()
    const detach: () => voiddetach()
    const controller: PanelController<number>controller.PanelController<number>.destroy: () => voiddestroy()
  }
}