;; 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 "#101117" :color "#DCE0EC" (flex :flex-wrap wrap :gap ((lh 0) (ch 2)) :padding-bottom (lh 1) (box :padding-inline (ch 1) :background-color "#D7FA73" :color "#151A0C" :font-weight bold "ORBIT / CREATIVE OS") (box :color "#A99BFF" "VOL. 007 / SPATIAL EDITION")) (box :padding ((lh 1) (ch 2)) :background-color "#1A1D28" (box :font-weight bold :color "#F7F8FF" "MAKE ROOM\nFOR THE UNEXPECTED.") (box :padding-top (lh 1) :color "#AEB6CE" "A desktop of intersecting ideas.\nPull it apart. Shift the focus. Change the atmosphere.")) (flex :flex-wrap wrap :gap ((lh 1) (ch 1)) :padding-block (lh 1) :pointer hand :font-weight bold :color "#101117" :hover-style (:background-color "#FFFFFF") (box :padding-inline (ch 1) :background-color "#D7FA73" :help-echo "Separate the three cards, then bring them back into their original stack." :keymap ,(layer-demo-action demo 'explode) "EXPLODE STACK") (box :padding-inline (ch 1) :background-color "#A99BFF" :help-echo "Bring Studio, Next, and Signal to the front in turn." :keymap ,(layer-demo-action demo 'focus) "CYCLE FOCUS") (box :padding-inline (ch 1) :background-color "#B9E9F2" :help-echo "Switch between electric violet / ice / lime and a warmer studio palette." :keymap ,(layer-demo-action demo 'mood) "SWITCH MOOD")) ;; Each card is a local stacking group. The dark slabs are separate ;; backplates; moving the cards deliberately reveals the composition. (box :id "orbit-canvas" :height (lh 25) :background-color "#101117" (box :position absolute :left (ch 1) :top (lh 0) :width (ch 24) :height (lh 1) :color "#9099B4" "FIELD / 007 + +") (box :position absolute :left (% 75) :top (lh 0) :width (ch 18) :height (lh 1) :color "#D7FA73" "COMPOSITION / LIVE") (box :position absolute :left (ch 0) :top (lh 2) :width (ch 2) :height (lh 21) :color "#4E566E" "00\n |\n |\n |\n04\n |\n |\n |\n08\n |\n |\n |\n12\n |\n |\n |\n16\n |\n |\n |\n20") (box :position absolute :left (ch 8) :top (lh 5) :width (ch 68) :height (lh 16) :background-color "#32354B" (box :position absolute :left (ch 2) :top (lh 1) :width (ch 64) :height (lh 14) :background-color "#202333" (box :position absolute :left (ch 1) :top (lh 12) :width (ch 32) :height (lh 1) :color "#8B92AE" "+ LOCAL SPACE / INFINITE IDEAS"))) (box :position absolute :left (ch 6) :top (lh 4) :width (ch 40) :height (lh 12) :z-index 1 :background-color "#06070B") (box :position absolute :left (ch 48) :top (lh 3) :width (ch 28) :height (lh 9) :z-index 1 :background-color "#06070B") (box :position absolute :left (ch 22) :top (lh 8) :width (ch 40) :height (lh 13) :z-index 1 :background-color "#06070B") (box :id "orbit-violet" :position absolute :left (ch 4) :top (lh 3) :width (ch 40) :height (lh 12) :z-index 2 :padding-inline (ch 2) :background-color "#A99BFF" :color "#201A38" :help-echo "Studio is a local group: its small lime badge cannot escape above a higher sibling card." (box :padding-top (lh 1) :font-weight bold "STUDIO / 01") (box :padding-top (lh 1) "FORM FOLLOWS\nIMAGINATION.") (box :position absolute :left (ch 2) :top (lh 5) :width (ch 32) :height (lh 5) :background-color "#30284E" :color "#D4C9FF" (box :position absolute :left (ch 2) :top (lh 1) :width (ch 14) :height (lh 3) :background-color "#645293" " [ [ + ] ]\n\n SHAPE / PLAY") (box :position absolute :left (ch 12) :top (lh 0) :width (ch 12) :height (lh 3) :z-index 1 :background-color "#D7CFFF" :color "#30284E" " + +\n / /\n + +") (box :position absolute :left (ch 20) :top (lh 2) :width (ch 10) :height (lh 2) :z-index 60 :background-color "#D7FA73" :color "#202816" :text-align center "DEPTH\n03")) (box :position absolute :left (ch 2) :top (lh 10) :width (ch 30) :height (lh 1) "OBJECT 01 / EDITION 007")) (box :id "orbit-lime" :position absolute :left (ch 46) :top (lh 2) :width (ch 28) :height (lh 9) :z-index 3 :padding-inline (ch 2) :background-color "#D7FA73" :color "#202816" :help-echo "Next is a separate sibling card. Cycle Focus to move its whole local composition forward." (box :padding-top (lh 1) :font-weight bold "NEXT / 02") (box :padding-top (lh 1) "LESS NOISE.\nMORE POSSIBILITY.") (box :position absolute :left (ch 15) :top (lh 5) :width (ch 9) :height (lh 3) :background-color "#24301A" :color "#D7FA73" :text-align center " /\n /___\n / ") (box :position absolute :left (ch 2) :top (lh 6) :width (ch 12) :height (lh 2) "OPEN SPACE\n24 / 7")) (box :id "orbit-signal" :position absolute :left (ch 20) :top (lh 7) :width (ch 40) :height (lh 13) :z-index 4 :padding-inline (ch 2) :background-color "#B9E9F2" :color "#173139" :help-echo "Signal starts in front. Its bars, labels, and floating badge move together as one local stack." (box :padding-top (lh 1) :font-weight bold "SIGNAL / NOW PLAYING") (box :padding-top (lh 1) "AFTER HOURS\nA soundtrack for what comes next.") (box :position absolute :left (ch 2) :top (lh 5) :width (ch 32) :height (lh 5) :background-color "#173139" :color "#B9E9F2" (box :position absolute :left (ch 2) :top (lh 3) :width (ch 3) :height (lh 1) :background-color "#B9E9F2") (box :position absolute :left (ch 6) :top (lh 2) :width (ch 3) :height (lh 2) :background-color "#A99BFF") (box :position absolute :left (ch 10) :top (lh 1) :width (ch 3) :height (lh 3) :background-color "#D7FA73") (box :position absolute :left (ch 14) :top (lh 0) :width (ch 3) :height (lh 4) :background-color "#B9E9F2") (box :position absolute :left (ch 18) :top (lh 2) :width (ch 3) :height (lh 2) :background-color "#A99BFF") (box :position absolute :left (ch 22) :top (lh 1) :width (ch 3) :height (lh 3) :background-color "#D7FA73") (box :position absolute :left (ch 26) :top (lh 3) :width (ch 3) :height (lh 1) :background-color "#B9E9F2") (box :position absolute :left (ch 20) :top (lh 0) :width (ch 10) :height (lh 1) :z-index 8 :background-color "#F9FCF3" :color "#173139" :text-align center "ON AIR +")) (box :position absolute :left (ch 2) :top (lh 11) :width (ch 32) :height (lh 1) "03:42 ========---- 05:18")) (box :position absolute :left (ch 61) :top (lh 15) :width (ch 15) :height (lh 3) :z-index 5 :padding-inline (ch 1) :background-color "#F6F5EF" :color "#282B35" "+ IN SYNC\n3 OPEN IDEAS\nSHARED SPACE") (box :position absolute :left (ch 3) :top (lh 22) :width (ch 72) :height (lh 1) :color "#A99BFF" "+ . + . + . + . + . + . + . + . + . + . + .") (box :position absolute :left (ch 3) :top (lh 24) :width (ch 70) :height (lh 1) :color "#9099B4" "ORBIT / 007 COMPOSE IN LAYERS. THINK IN POSSIBILITIES.")) (box :id "orbit-state" :padding-inline (ch 1) :background-color "#222637" :color "#D7FA73" ,(layer-demo-orbit-status demo)) (box :padding-top (lh 2) :font-weight bold :color "#F7F8FF" "EBOX / LAYER LAB") (box :color "#AEB6CE" "Retained 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 "#505B7A") (box :padding-inline (ch 1) :background-color "#343B52" :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 "#343B52" :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 "#343B52" :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 "#343B52" :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 "#222637" (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 "#292437" (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 "#505B7A") (box :padding-inline (ch 1) :background-color "#343B52" :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 "#343B52" :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 "#1C2430" "SPACE ABOVE / top placements can cover this area\n" "........................................................................\n" "........................................................................") (box :id "menu-owner" :height (lh 1) :overflow hidden :background-color "#303D43" (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") (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 "#1C2430" "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.")))