kind: Solution
version: v0

router:
  kind: Router
  routes:
    - frame: home-frame

frames:
  home-frame:
    kind: Frame

    layout:
      kind: ColumnLayout
      widths: [400px, 400px]
      areas: [left, right]

    contents:
      left:
        kind: ControlPanel
        controls:
          a:
            kind: TextInput
            label: Text Input Control
            value: Hello
            placeholder: Insert text

          b:
            kind: Slider
            label: Number Slider Control
            value: 20
            min: 0
            max: 100
            precision: 3
            unit: mm

          c:
            kind: Toggle
            label: Toggle Control
            value: false

          d:
            kind: Dropdown
            label: Dropdown Control
            value: 20
            choices:
              - label: Option 10
                value: 10
              - label: Option 20
                value: 20

          e:
            kind: Checkbox
            label: Checkbox Control
            choices:
              - label: Option 1
                value: "1"
              - label: Option 2
                value: "2"

      right:
        kind: ControlPanel
        controls:
          p:
            kind: Select
            label: Select Color Control
            value: blue
            height: 50
            itemHeight: 50
            columns: 2
            choices:
              - kind: Color
                label: Blue
                value: blue
                color: [0, 0, 255]
              - kind: Color
                label: Red
                value: red
                color: [200, 0, 0]

          q:
            kind: Select
            label: Select Image Control
            value: "1"
            height: 300
            itemHeight: 180
            columns: 2
            choices:
              - kind: Image
                label: Img 1
                value: "1"
                imagePath: one.jpg
              - kind: Image
                label: Img 2
                value: "2"
                imagePath: two.jpg
