geekinney/ebox-playground
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
c129464c57
ebox-playground/examples/layer-reference.ebox
Kinneyzhang db41a9b769 Batch ORBIT actions and add reusable scroll performance checks 
Coalesce action updates, retain native interaction behavior and validate complete mixed action cycles against fresh rendering.

Extend the shared evaluator with committed-input parity, nested owner selection, cold prefix measurements and GC counters. Document supported invocations and test cleanup and failure reporting.
2026-09-10 23:15:16 +08:00

253 lines
17 KiB
Plaintext
Raw Blame History

;; 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)
:font-weight bold :color "#101117"
(box :padding-inline (ch 1) :background-color "#D7FA73"
:pointer hand :hover-style (:background-color "#FFFFFF")
: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"
:pointer hand :hover-style (:background-color "#FFFFFF")
: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"
:pointer hand :hover-style (:background-color "#FFFFFF")
: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)
(box :padding-inline (ch 1) :background-color "#343B52"
:pointer hand :hover-style (:background-color "#505B7A")
: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"
:pointer hand :hover-style (:background-color "#505B7A")
: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"
:pointer hand :hover-style (:background-color "#505B7A")
: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"
:pointer hand :hover-style (:background-color "#505B7A")
: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)
(box :padding-inline (ch 1) :background-color "#343B52"
:pointer hand :hover-style (:background-color "#505B7A")
: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"
:pointer hand :hover-style (:background-color "#505B7A")
: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.")))
Reference in New Issue View Git Blame Copy Permalink