Splitter - Set-Size example buggy / crashes

[sparecycles]

Description

When I do api().setSize("a", 10) I expect the panel to get resized to 10% of the size.

It doesn't do that consistently, just hitting the buttons makes the UI unresponsive.

Additionally: resizing a panel to under 10% and then setting the size to 10% throws an exception that the total is over 100%: this breaks mouseover of the handle since state.context becomes undefined.

Link to Reproduction (or Detailed Explanation)

(video)

Steps to Reproduce

https://github.com/chakra-ui/ark/assets/719818/2dd3d1e8-f857-45cd-82f6-40cd8c31f2b7

(Code from https://ark-ui.com/react/docs/components/splitter)

import { Splitter } from '@ark-ui/solid'

export const RenderProp = () => (
  <Splitter.Root
    size={[
      { id: 'a', size: 50 },
      { id: 'b', size: 50 },
    ]}
  >
    <Splitter.Context>
      {(api) => (
        <>
          <Splitter.Panel id="a">
            <button type="button" onClick={() => api().setSize('a', 10)}>
              Set to 10%
            </button>
          </Splitter.Panel>
          <Splitter.ResizeTrigger id="a:b" />
          <Splitter.Panel id="b">
            <button type="button" onClick={() => api().setSize('b', 10)}>
              Set to 10%
            </button>
          </Splitter.Panel>
        </>
      )}
    </Splitter.Context>
  </Splitter.Root>
)

Ark UI Version

3.3.0

Framework

• [ ] React
• [X] Solid
• [ ] Vue

Browser

Electron 29.1.5

Additional Information

No response