refactor(devtools): make use of root level css variable.

[Kinbaum]

I replaced state-driven panel resizing with CSS custom properties set on the root HTML element. This decouples sizing from React state, lets CSS handle layout changes when the devtools panel moves or resizes, and provides a smoother developer experience when iterating on our own UIs.

Usage

If I'm building an interface with shadcn sidebar for example, then I can add the following classNames to the SidebarInset

className={cn(
    // ... inset classes
    process.env.NODE_ENV === 'development' &&
        '[&:has(.ai-devtools-panel-bottom)]:h-[calc(100dvh-var(--ai-devtools-panel-height))]',
    process.env.NODE_ENV === 'development' &&
        '[&:has(.ai-devtools-panel-right)]:mr-(--ai-devtools-panel-width)'
)}

Now my interface will automatically adjust based on the variable value. Solid DX win.

[vercel]

@Kinbaum is attempting to deploy a commit to the Pontus Abrahamsson's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Kinbaum]

@pontusab Can I get your review on this PR?