;; Layout data only. The matching companion owns state and business actions. (let ((demo (layer-demo-create))) `(column :width (vw 100) :height (vh 100) :padding ((lh 1) (ch 2)) :background-color "#F4F3ED" :color "#273B42" (box :padding ((lh 1) (ch 2)) :background-color "#153F4A" :color "#FFFFFF" "EBOX / LAYER LAB\nRetained content, opaque overlap, native interaction.") (box :padding-block (lh 1) "Click a control, or move point into it and press RET / SPC.\n" "All text shares one font size. Scroll with the wheel or C-v when needed.") (box "01 / LAYERED DESK absolute position + local stacking") (flex :flex-wrap wrap :gap ((lh 1) (ch 1)) :padding-block (lh 1) :pointer hand :hover-style (:background-color "#CCE0D6") (box :padding-inline (ch 1) :background-color "#DDE9DF" :help-echo "Hide or show Panel A. Revealing a lower layer shows its latest content." :keymap ,(layer-demo-action demo 'toggle) "TOGGLE PANEL A") (box :padding-inline (ch 1) :background-color "#DDE9DF" :help-echo "Move Panel A between left 4ch / top 2lh and left 10ch / top 0lh." :keymap ,(layer-demo-action demo 'move) "MOVE PANEL A") (box :padding-inline (ch 1) :background-color "#DDE9DF" :help-echo "Switch Panel A between z=2 and z=4; Panel B stays at z=3." :keymap ,(layer-demo-action demo 'raise) "RAISE / LOWER A") (box :padding-inline (ch 1) :background-color "#DDE9DF" :help-echo "Update the lower note even when every part of it is covered." :keymap ,(layer-demo-action demo 'update-lower) "UPDATE COVERED NOTE")) (box :id "layer-desk" :height (lh 10) :background-color "#DFE5E4" (box :height (lh 10) "DESK / ordinary content stays in its flow slot\n" "........................................................................\n" "........................................................................\n" "........................................................................\n" "........................................................................\n" "........................................................................\n" "........................................................................\n" "........................................................................\n" "........................................................................\n" "DESK END / panels do not add flow rows") (box :id "lower-note" :position absolute :left (ch 4) :top (lh 2) :width (ch 38) :height (lh 5) :z-index 0 :padding-inline (ch 1) :background-color "#C9DED0" :color "#244F36" :pointer hand :hover-style (:background-color "#ADCAB7") :help-echo ,(ebox-help-create (apply-partially #'layer-demo-help demo 'lower)) :keymap ,(layer-demo-action demo 'lower) ,(layer-demo-lower-content demo)) (box :id "panel-a" :position absolute :left (ch 4) :top (lh 2) :width (ch 38) :height (lh 5) :z-index 2 :padding-inline (ch 1) :background-color "#3A687E" :color "#FFFFFF" :help-echo "Panel A is opaque, including its blank padding. Use the toolbar to move or raise it." "PANEL A / blue\nMove and raise from the toolbar.\nA survives under the amber panel.\nOpaque padding covers too.\nThe covered note remains alive.") (box :id "panel-b" :position absolute :left (ch 22) :top (lh 4) :width (ch 28) :height (lh 4) :z-index 3 :padding-inline (ch 1) :background-color "#D7AF6D" :color "#503B21" :help-echo "Panel B stays at z=3. Raising A changes which panel owns the overlap." "PANEL B / amber\nFixed at z=3.\nLater layers cover earlier\npaint, not logical data.")) (box :height (lh 1)) (box "02 / RELATIVE POSITION reserve the slot, shift the paint") (column :height (lh 4) :background-color "#E8E1EE" (box :id "relative-marker" :position relative :left (ch 4) :top (lh 1) :width (ch 24) :height (lh 1) :z-index 1 :background-color "#765D87" :color "#FFFFFF" "RELATIVE / +4ch, +1lh") (box "flow row 2: the shifted marker covers part of this row") (box :id "relative-following" "FLOW ROW 3 / the original slot was kept") (box "Each parent keeps a local stacking group automatically.")) (box :height (lh 1)) (box "03 / ANCHORED MENU nested owner + root projection") (box :padding-block (lh 1) "The owner below clips to one row. Its menu stays a logical child\n" "but paints in the root layer, outside that local clip.") (flex :gap ((lh 0) (ch 1)) :padding-bottom (lh 1) :pointer hand :hover-style (:background-color "#CCE0D6") (box :padding-inline (ch 1) :background-color "#DDE9DF" :help-echo "Cycle bottom-start, bottom-end, top-start, and top-end. Open the menu to compare." :keymap ,(layer-demo-action demo 'placement) "CYCLE PLACEMENT") (box :padding-inline (ch 1) :background-color "#DDE9DF" :help-echo "Move the relative trigger from left 4ch to 12ch. The open menu follows its anchor." :keymap ,(layer-demo-action demo 'anchor) "MOVE ANCHOR")) (box :height (lh 3) :background-color "#E5EBE7" "SPACE ABOVE / top placements can cover this area\n" "........................................................................\n" "........................................................................") (box :id "menu-owner" :height (lh 1) :overflow hidden :background-color "#CFDCD5" (box :id "menu-trigger" :position relative :left (ch 4) :top (lh 0) :width (ch 32) :height (lh 1) :padding-inline (ch 1) :background-color "#286347" :color "#FFFFFF" :pointer hand :hover-style (:background-color "#407E5C") :help-echo ,(ebox-help-create (apply-partially #'layer-demo-help demo 'menu)) :keymap ,(layer-demo-action demo 'menu) "OPEN / CLOSE ROOT MENU") (box :id "root-menu" :position absolute :layer root :anchor "menu-trigger" :placement bottom-start :z-index 50 :visibility hidden :width (ch 26) :height (lh 3) :background-color "#153F4A" :color "#FFFFFF" (box :padding-inline (ch 1) "ROOT MENU / choose a color") (box :id "menu-sage" :padding-inline (ch 1) :pointer hand :hover-style (:background-color "#407E5C") :help-echo "Choose sage, update the result, and close the menu." :keymap ,(layer-demo-action demo 'sage) "CHOOSE SAGE") (box :id "menu-amber" :padding-inline (ch 1) :pointer hand :hover-style (:background-color "#895314") :help-echo "Choose amber, update the result, and close the menu." :keymap ,(layer-demo-action demo 'amber) "CHOOSE AMBER"))) (box :height (lh 3) :background-color "#E5EBE7" "SPACE BELOW / bottom placements can cover this area\n" "........................................................................\n" "........................................................................") (box :id "menu-result" :padding-block (lh 1) "No menu selection yet.") (box :id "layer-status" :background-color "#153F4A" :color "#FFFFFF" :padding-inline (ch 1) ,(layer-demo-status demo)) (box :padding-top (lh 1) "Try: update the covered note twice, hide A, then activate the revealed note.\n" "Open the menu, cycle all four placements, move its anchor, and select a color.\n" "Commands publish named-region updates. Layers do not create a focus system.")))