                                :children [[title2 "Notes"]
                                           [status-text "Stable"]
                                           [p "h-box is a container which lays out its  " [:code ":children"] " in a single horizontal row."]
-                                          [p
-                                           "To understand it fully and use it powerfully, you must have a good understanding of the "
-                                           [hyperlink-href
-                                            :label "CSS Flexbox"
-                                            :href "https://css-tricks.com/snippets/css/a-guide-to-flexbox"
-                                            :target "_blank"]
-                                           " layout system."]
-                                          [p "The actual layout is a function of the " [:code ":size"] " of the container and the " [:code ":size"] " provided for each of the children."]
+
+                                          [p "The " [:span.bold "Layout"] " page (look LHS) describes the importance of " [:span.bold ":size"] "The actual layout is a function of the " [:code ":size"] " of the container and the " [:code ":size"] " provided for each of the children."]
                                           [p "Todo: Nestability with v-box"]
 
                                           [args-table h-box-args-desc]]]
-                              [demo]]]
+                              [v-box
+                               :gap      "10px"
+                               :width    "500px"
+                               :children [[title2 "Demo"]
+                                          [demo]
+                                          [editable-code]]]
+                              ]]
                   [gap :size "30px"]]]))

      ;; =>  [box :a 1 :b 2  :c 3]
  "
  [v m]
  (let [not-nil-value #(identity (second %))]
    (->> m
         (filter not-nil-value)
         (reduce concat [])
         (into v)
         vec)))


(defn make-box

                   {:id :auto   :label "auto"}
                   {:id :none   :label "none"}
                   {:id :px     :label "px"}
                   {:id :%      :label "num"}])

(def demo-state (reagent/atom
              {:hbox {:width   "500px"
                     :height  "100px"
                     :justify :start
                     :gap     "4px"}
               :box1 {:size "none"
                      ; :min-width "200px"
                      ; :height  "200px"
                      :align-self :center
                      :text "Box1"}
               :box2 {:size "0 1 50px"
                      :text "Box2"}
               :box3 {:size "0 1 100px"
                      :text "Box3"}
               :box4 {:size "1 1 100px"
                     :text "Box4"}}))

(defn merge-named-params
