ui(components): Adds InputNumber component and 4d panel updates

[dan-rukas]

Context

This PR introduces a new flexible InputNumber component with vertical and horizontal controls to ui-next. In addition, 4d panel components are migrated to ui-next including WindowLevel.

Changes & Results

InputNumber component

• Compound Component Architecture - Uses React Context to share state between related components for flexible composition and layout control
• Multiple Control Variants - Supports both horizontal (left/right) and vertical (up/down) control layouts through specialized subcomponents
• Smart Constraint Inheritance - Define constraints (min/max/step) once on control components and they automatically apply to inputs through context
• Automatic Formatting - Handles decimal precision display based on step value and provides proper validation against constraints
• Flexible Composition - Components can be freely combined in different arrangements to create custom UIs while maintaining consistent behavior

Usage examples

Basic Usage with Horizontal Controls

<InputNumber value={count} onChange={setCount}>
  <InputNumber.Container size="md">
    <InputNumber.HorizontalControls min={0} max={10} step={1}>
      <InputNumber.Input />
    </InputNumber.HorizontalControls>
  </InputNumber.Container>
  <InputNumber.Label position="bottom">Count</InputNumber.Label>
</InputNumber>

Vertical Controls Example

<InputNumber value={value} onChange={setValue}>
  <InputNumber.Container>
    <InputNumber.VerticalControls min={1} max={100} step={1}>
      <InputNumber.Input />
    </InputNumber.VerticalControls>
  </InputNumber.Container>
  <InputNumber.Label position="bottom">Label</InputNumber.Label>
</InputNumber>

Decimal Number Example

<InputNumber value={price} onChange={setPrice}>
  <InputNumber.Container size="lg">
    <InputNumber.HorizontalControls min={0} max={1000} step={0.01}>
      <InputNumber.Input />
    </InputNumber.HorizontalControls>
  </InputNumber.Container>
  <InputNumber.Label position="left">Price ($)</InputNumber.Label>
</InputNumber>

Additional Panel updates preview

Testing

• Added and tested to 4d mode
• Note: CinePlayer still uses the legacy component (a new PR will be added for this component)

Checklist

PR

• My Pull Request title is descriptive, accurate and follows the
  semantic-release format and guidelines.

Code

• My code has been well-documented (function documentation, inline comments,
  etc.)

Public Documentation Updates

• [] The documentation page has been updated as necessary for any public API
  additions or removals.

Tested Environment

• OS: macOS Sequoia 15.3 (24D60), Apple M4 Pro
• Node version: 23.7.0
• Browser: 134.0.6998.89 (Current)

[netlify]

✅ Deploy Preview for ohif-dev canceled.

Name	Link
🔨 Latest commit	ab688bb
🔍 Latest deploy log	https://app.netlify.com/sites/ohif-dev/deploys/67e2ae6e5ac65a0008c70197

[netlify]

✅ Deploy Preview for ohif-platform-docs ready!

Name	Link
🔨 Latest commit	ab688bb
🔍 Latest deploy log	https://app.netlify.com/sites/ohif-platform-docs/deploys/67e2ae6e67c48c000871345d
😎 Deploy Preview	https://deploy-preview-4874--ohif-platform-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[dan-rukas]

Note: The label for "Frame" was mislabeled "Group". This is fixed now.