                    {:id :auto   :label "auto"}
                    {:id :none   :label "none"}
                    {:id :px     :label "px"}
-                   {:id :%      :label "%"}])
+                   {:id :%      :label "num"}])
 
-(def config (reagent/atom
+(def demo-state (reagent/atom
               {:hbox {:width   "500px"
                      :height  "100px"
                      :justify :start
                      :gap     "4px"}
-               :box1 {:size "auto"
-                      :min-width "200px"
-                      ; :height  "20px"
-                      :align-self :end
+               :box1 {:size "none"
+                      ; :min-width "200px"
+                      ; :height  "200px"
+                      :align-self :center
                       :text "Box1"}
-               :box2 {:size "0 1 100px"
-
+               :box2 {:size "0 1 50px"
                       :text "Box2"}
                :box3 {:size "0 1 100px"
                       :text "Box3"}
-               :box4 {:size "0 1 100px"
+               :box4 {:size "1 1 100px"
                      :text "Box4"}}))
 
 (defn merge-named-params

                               :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 "Todo: Nestability with v-box"]

                                          [args-table h-box-args-desc]]]
                              [demo]]]
                  [gap :size "30px"]]]))

      (conj [:div {:style rounded-panel} (:text box-parameters)])))



(defn demo
  "creates the hiccup for the real demo, with its child boxes and all"
  []
  (-> [h-box
       :padding  "4px"
       :style {:border "dashed 1px red"}]
      (merge-named-params (:hbox @demo-state))
      (conj :children)
      (conj [(make-box (:box1 @demo-state))
             (make-box (:box2 @demo-state))
             (make-box (:box3 @demo-state))
             (make-box (:box4 @demo-state))])))

(defn code-row
  [indent text & args]
  (let  [mouse-over   (reagent/atom false)]
    (fn [indent text & args]
    [h-box
     :attr  {:on-mouse-over  #(do (reset! mouse-over true) (println "over") nil)
             :on-mouse-out   #(do (reset! mouse-over false) nil)
             }
     :style {:background-color (if @mouse-over "#f0f0f0")}
     :children [[gap :size (str (* indent 10) "px")]   ;; leading indent
                [:span {:style {:flex "0 0 100px"}} text]
                args]])))


(defn editable-code
  "Shows the code in a way that values can be edited, allowing for an interactive demo."
  []
  [v-box
   :children [[gap :size "20px"]
              [p "the demo above is produced by the code below"]
              [v-box
               :style {:font-family      "Consolas, \"Courier New\", monospace"
                       :background-color "#f5f5f5"
                       :border           "1px solid lightgray"
                       :border-radius    "4px"
                       :padding          "8px"}
               :children [[code-row 0 "[h-box"        ]
                          [code-row 2 "  :size"      "\"1\"" ]
                          [code-row 2 "  :gap"     "\"1px\"" ]
                          [code-row 2 "  :children"  " ["]]]]])



  (defn panel
