;; Layout and initial geometry live here; native gestures live in the companion. (let* ((styles '((desktop-root (:background-color "#0B1020" :color "#CFD8EA") (:background-color "#F3F0E8" :color "#263347")) (desktop-brand (:color "#BBA9FF") (:color "#674795")) (desktop-heading (:color "#F1F5FF") (:color "#18263B")) (desktop-muted (:color "#8F9FBD") (:color "#53637A")) (desktop-quiet (:color "#657899") (:color "#596A84")) (desktop-control (:background-color "#25324B" :color "#D7E3F8" :hover-style (:background-color "#354662")) (:background-color "#CBD6E4" :color "#253247" :hover-style (:background-color "#B9C9DE"))) (desktop-chrome (:background-color "#25324B" :color "#C1CBE0") (:background-color "#D5DDE8" :color "#344359")) (desktop-workspace (:background-color "#111A2C") (:background-color "#E3E8EF")) (desktop-grid-label (:color "#3F5273") (:color "#566B86")) (desktop-grid-dots (:color "#334866") (:color "#A6B3C3")) (desktop-grid-hint (:color "#5A6D8E") (:color "#566A83")) (desktop-studio (:border "#8977B5" :background-color "#26223B" :color "#D6CDEF") (:border "#9782B6" :background-color "#E9E3F2" :color "#4F3F67")) (desktop-studio-heading (:color "#F5F0FF") (:color "#37284F")) (desktop-studio-caption (:color "#A999C8") (:color "#67577E")) (desktop-studio-text (:color "#B8A9D0") (:color "#5F4D78")) (desktop-studio-muted (:color "#85799F") (:color "#6D587F")) (desktop-art-form (:background-color "#7561AC" :color "#EAE1FF") (:background-color "#C9BCE3" :color "#453259")) (desktop-art-space (:background-color "#BBA9FF" :color "#302449") (:background-color "#DED3F6" :color "#51356C")) (desktop-art-play (:background-color "#D8EAAB" :color "#303D22") (:background-color "#DBE8C3" :color "#41512B")) (desktop-notes (:border "#A18B61" :background-color "#EEE3CB" :color "#514430") (:border "#B69B62" :background-color "#FFF4D8" :color "#5B482B")) (desktop-notes-caption (:color "#8C744E") (:color "#7A623E")) (desktop-notes-muted (:color "#887651") (:color "#836D49")) (desktop-notes-rule (:color "#A18B61") (:color "#A38E65")) (desktop-notes-footer (:color "#746345") (:color "#705935")) (desktop-signal (:border "#518F9D" :background-color "#17343E" :color "#BFE5E9") (:border "#6B9EA8" :background-color "#DBEEF0" :color "#315B65")) (desktop-signal-heading (:color "#E4FBF9") (:color "#184B57")) (desktop-signal-caption (:color "#7BAEB9") (:color "#436971")) (desktop-signal-muted (:color "#699CA9") (:color "#496F77")) (desktop-signal-accent (:color "#8DE1E4") (:color "#2E7280")) (desktop-wave-muted (:background-color "#518F9D") (:background-color "#9EC9CF")) (desktop-wave-cyan (:background-color "#8DE1E4") (:background-color "#5EADB5")) (desktop-wave-violet (:background-color "#BBA9FF") (:background-color "#927AC9")) (desktop-terminal (:border "#608C7F" :background-color "#101F22" :color "#B6D7CC") (:border "#7B9F88" :background-color "#E0EEE4" :color "#355E4C")) (desktop-terminal-accent (:color "#A7E8BB") (:color "#256544")) (desktop-terminal-muted (:color "#608C7F") (:color "#496D5B")) (desktop-palette (:border "#AF8DA9" :background-color "#39283D" :color "#EBCBDE") (:border "#B18AA4" :background-color "#F0E1EB" :color "#65485E")) (desktop-palette-caption (:color "#AF8DA9") (:color "#7B5670")) (desktop-palette-accent (:color "#F3A8C9") (:color "#925277")) (desktop-swatch-violet (:background-color "#BBA9FF") (:background-color "#9578CF")) (desktop-swatch-amber (:background-color "#F6C879") (:background-color "#DEB251")) (desktop-swatch-cyan (:background-color "#8DE1E4") (:background-color "#58A7AF")) (desktop-swatch-mint (:background-color "#A7E8BB") (:background-color "#72AB83")) (desktop-swatch-rose (:background-color "#F3A8C9") (:background-color "#CE87AA")))) (studio (desktop-demo-window-create :id "desk-studio" :label "STUDIO" :accent "#BBA9FF" :ink "#241B40" :light-accent "#6D4AA2" :light-ink "#FFFFFF" :left '(% 5) :top '(lh 1))) (notes (desktop-demo-window-create :id "desk-notes" :label "NOTES" :accent "#F6C879" :ink "#3B2917" :light-accent "#8C6421" :light-ink "#FFFFFF" :left '(% 45) :top '(% 4))) (signal (desktop-demo-window-create :id "desk-signal" :label "SIGNAL" :accent "#8DE1E4" :ink "#15383D" :light-accent "#246675" :light-ink "#FFFFFF" :left '(% 57) :top '(% 32))) (terminal (desktop-demo-window-create :id "desk-terminal" :label "TERMINAL" :accent "#A7E8BB" :ink "#1B3826" :light-accent "#2F674B" :light-ink "#FFFFFF" :left '(% 8) :top '(% 46))) (palette (desktop-demo-window-create :id "desk-palette" :label "PALETTE" :accent "#F3A8C9" :ink "#402438" :light-accent "#875270" :light-ink "#FFFFFF" :left '(% 43) :top '(% 65))) (panes (list studio notes signal terminal palette)) (demo (desktop-demo-create :windows panes :styles styles :order (mapcar #'desktop-demo-window-id panes) :active "desk-palette"))) `(column :id "desktop-root" :class desktop-root :width (vw 100) :height (vh 100) :overflow hidden ,@(desktop-demo-style demo 'desktop-root) (box :height (lh 3) :padding-inline (ch 1) (row :height (lh 1) (box :class desktop-brand ,@(desktop-demo-style demo 'desktop-brand) :font-weight bold "P A R A L L A X") (box :padding-left (ch 2) :class desktop-quiet ,@(desktop-demo-style demo 'desktop-quiet) "DESKTOP / 05")) (box :class desktop-heading ,@(desktop-demo-style demo 'desktop-heading) "A little space. A lot of possibilities.") (box :class desktop-muted ,@(desktop-demo-style demo 'desktop-muted) "Click to focus. Drag a title bar to move.")) (flex :height (lh 1) :gap ((lh 0) (ch 1)) :padding-inline (ch 1) (box :padding-inline (ch 1) :flex-shrink 0 :class desktop-control ,@(desktop-demo-style demo 'desktop-control) :pointer hand :help-echo "Restore the five original positions and stacking order." :keymap ,(desktop-demo-control demo 'reset) "RESET") (box :padding-inline (ch 1) :flex-shrink 0 :class desktop-control ,@(desktop-demo-style demo 'desktop-control) :pointer hand :help-echo "Bring the backmost window to the front." :keymap ,(desktop-demo-control demo 'next) "CYCLE") (box :id "desktop-theme" :class desktop-control ,@(desktop-demo-style demo 'desktop-control) :width (ch 7) :flex-shrink 0 :text-align center :pointer hand :help-echo "Switch the whole desktop between light and dark palettes." :keymap ,(desktop-demo-control demo 'theme) "LIGHT") (box :class desktop-quiet :min-width (px 0) :overflow hidden :wrap-mode none ,@(desktop-demo-style demo 'desktop-quiet) "FIVE IDEAS / ONE SHARED SPACE")) (box :id "desktop-canvas" :height (calc (- (vh 100) (lh 7))) :overflow hidden :class desktop-workspace ,@(desktop-demo-style demo 'desktop-workspace) (box :position absolute :left (ch 1) :top (lh 0) :class desktop-grid-label ,@(desktop-demo-style demo 'desktop-grid-label) "WORKSPACE 01 + + + + +") (box :position absolute :left (% 68) :top (% 78) :width (% 30) :class desktop-grid-dots ,@(desktop-demo-style demo 'desktop-grid-dots) "+ . + . +\n. + . + .\n+ . + . +\n. + . + .") (box :position absolute :left (ch 2) :top (% 93) :class desktop-grid-hint ,@(desktop-demo-style demo 'desktop-grid-hint) "MOVE THINGS AROUND. MAKE IT YOURS.") (box :id "desk-studio" :position absolute :left ,(desktop-demo-window-left studio) :top ,(desktop-demo-window-top studio) :width (min (ch 44) (% 55)) :height (lh 13) :z-index 1 :overflow hidden :class desktop-studio ,@(desktop-demo-style demo 'desktop-studio) :pointer arrow :help-echo "Studio. Click any exposed area to bring this whole window forward." :keymap ,(desktop-demo-keymap demo "desk-studio") (box :id "desk-studio-title" :height (lh 1) :padding-inline (ch 1) :class desktop-chrome ,@(desktop-demo-style demo 'desktop-chrome) :font-weight bold :pointer hand :keymap ,(desktop-demo-keymap demo "desk-studio" t) :help-echo "Drag Studio. Alt+arrows moves it from the keyboard." "STUDIO / 01 ::") (box :padding ((lh 1) (ch 2)) (box :font-weight bold :class desktop-studio-heading ,@(desktop-demo-style demo 'desktop-studio-heading) "Make space for the unexpected.") (box :padding-top (lh 1) :class desktop-studio-caption ,@(desktop-demo-style demo 'desktop-studio-caption) "EXPERIMENT 024 / SOFT STRUCTURES") (box :height (lh 5) :padding-top (lh 1) (box :position absolute :left (ch 0) :top (lh 1) :width (ch 13) :height (lh 3) :class desktop-art-form ,@(desktop-demo-style demo 'desktop-art-form) :text-align center "\nFORM / 01") (box :position absolute :left (ch 9) :top (lh 0) :width (ch 13) :height (lh 3) :z-index 1 :class desktop-art-space ,@(desktop-demo-style demo 'desktop-art-space) :text-align center "\nSPACE / 02") (box :position absolute :left (ch 18) :top (lh 2) :width (ch 12) :height (lh 3) :z-index 2 :class desktop-art-play ,@(desktop-demo-style demo 'desktop-art-play) :text-align center "\nPLAY / 03")) (box :class desktop-studio-text ,@(desktop-demo-style demo 'desktop-studio-text) "Fragments become a composition.") (box :padding-top (lh 1) :class desktop-studio-muted ,@(desktop-demo-style demo 'desktop-studio-muted) "COLLECTION / UNFINISHED POSSIBILITIES"))) (box :id "desk-notes" :position absolute :left ,(desktop-demo-window-left notes) :top ,(desktop-demo-window-top notes) :width (min (ch 34) (% 43)) :height (lh 11) :z-index 2 :overflow hidden :class desktop-notes ,@(desktop-demo-style demo 'desktop-notes) :pointer arrow :help-echo "Notes. The content remains here even when another window covers it." :keymap ,(desktop-demo-keymap demo "desk-notes") (box :id "desk-notes-title" :height (lh 1) :padding-inline (ch 1) :class desktop-chrome ,@(desktop-demo-style demo 'desktop-chrome) :font-weight bold :pointer hand :keymap ,(desktop-demo-keymap demo "desk-notes" t) :help-echo "Drag Notes. Alt+arrows moves it from the keyboard." "NOTES / 02 ::") (box :padding ((lh 1) (ch 1)) (box :font-weight bold "A quieter kind of focus.") (box :padding-top (lh 1) :class desktop-notes-caption ,@(desktop-demo-style demo 'desktop-notes-caption) "TODAY / THINGS WORTH MAKING") (box :padding-top (lh 1) "[x] Collect the small ideas\n[ ] Give the good ones room\n[ ] Leave something unfinished") (box :padding-top (lh 1) :class desktop-notes-muted ,@(desktop-demo-style demo 'desktop-notes-muted) "Less noise. More intention.") (box :class desktop-notes-rule ,@(desktop-demo-style demo 'desktop-notes-rule) "------------------------------") (box :class desktop-notes-footer ,@(desktop-demo-style demo 'desktop-notes-footer) "03 NOTES / SAVED IN THE MOMENT"))) (box :id "desk-signal" :position absolute :left ,(desktop-demo-window-left signal) :top ,(desktop-demo-window-top signal) :width (min (ch 32) (% 39)) :height (lh 10) :z-index 3 :overflow hidden :class desktop-signal ,@(desktop-demo-style demo 'desktop-signal) :pointer arrow :help-echo "Signal. Raise the entire player, including its overlapping waveform." :keymap ,(desktop-demo-keymap demo "desk-signal") (box :id "desk-signal-title" :height (lh 1) :padding-inline (ch 1) :class desktop-chrome ,@(desktop-demo-style demo 'desktop-chrome) :font-weight bold :pointer hand :keymap ,(desktop-demo-keymap demo "desk-signal" t) :help-echo "Drag Signal. Alt+arrows moves it from the keyboard." "SIGNAL / 03 ::") (box :padding ((lh 1) (ch 2)) (box :font-weight bold :class desktop-signal-heading ,@(desktop-demo-style demo 'desktop-signal-heading) "AFTER HOURS") (box :class desktop-signal-caption ,@(desktop-demo-style demo 'desktop-signal-caption) "A soundtrack for the in-between.") (flex :height (lh 3) :gap ((lh 0) (ch 1)) :padding-top (lh 1) (box :width (ch 2) :height (lh 1) :class desktop-wave-muted ,@(desktop-demo-style demo 'desktop-wave-muted)) (box :width (ch 2) :height (lh 2) :class desktop-wave-cyan ,@(desktop-demo-style demo 'desktop-wave-cyan)) (box :width (ch 2) :height (lh 1) :class desktop-wave-muted ,@(desktop-demo-style demo 'desktop-wave-muted)) (box :width (ch 2) :height (lh 2) :class desktop-wave-violet ,@(desktop-demo-style demo 'desktop-wave-violet)) (box :width (ch 2) :height (lh 1) :class desktop-wave-cyan ,@(desktop-demo-style demo 'desktop-wave-cyan)) (box :width (ch 2) :height (lh 2) :class desktop-wave-violet ,@(desktop-demo-style demo 'desktop-wave-violet)) (box :width (ch 2) :height (lh 1) :class desktop-wave-muted ,@(desktop-demo-style demo 'desktop-wave-muted))) (box :class desktop-signal-accent ,@(desktop-demo-style demo 'desktop-signal-accent) "========------------ 03:42") (box :padding-top (lh 1) :class desktop-signal-muted ,@(desktop-demo-style demo 'desktop-signal-muted) "SIDE B / SLOWER ORBITS"))) (box :id "desk-terminal" :position absolute :left ,(desktop-demo-window-left terminal) :top ,(desktop-demo-window-top terminal) :width (min (ch 48) (% 60)) :height (lh 11) :z-index 4 :overflow hidden :class desktop-terminal ,@(desktop-demo-style demo 'desktop-terminal) :pointer arrow :help-echo "Terminal. This sample transcript is part of the movable text window." :keymap ,(desktop-demo-keymap demo "desk-terminal") (box :id "desk-terminal-title" :height (lh 1) :padding-inline (ch 1) :class desktop-chrome ,@(desktop-demo-style demo 'desktop-chrome) :font-weight bold :pointer hand :keymap ,(desktop-demo-keymap demo "desk-terminal" t) :help-echo "Drag Terminal. Alt+arrows moves it from the keyboard." "TERMINAL / 04 ::") (box :padding ((lh 1) (ch 2)) (box :class desktop-terminal-accent ,@(desktop-demo-style demo 'desktop-terminal-accent) "$ build something good") (box :padding-top (lh 1) :class desktop-terminal-muted ,@(desktop-demo-style demo 'desktop-terminal-muted) " session: creative / local\n workspace: parallax") (box :padding-top (lh 1) " + ideas connected\n + room for experiments\n + all five windows ready") (box :padding-top (lh 1) :class desktop-terminal-accent ,@(desktop-demo-style demo 'desktop-terminal-accent) " READY / follow your curiosity"))) (box :id "desk-palette" :position absolute :left ,(desktop-demo-window-left palette) :top ,(desktop-demo-window-top palette) :width (min (ch 29) (% 36)) :height (lh 9) :z-index 5 :overflow hidden :class desktop-palette ,@(desktop-demo-style demo 'desktop-palette) :pointer arrow :help-echo "Palette starts in front. Click a window underneath to change the stack." :keymap ,(desktop-demo-keymap demo "desk-palette") (box :id "desk-palette-title" :height (lh 1) :padding-inline (ch 1) :class desktop-chrome ,@(desktop-demo-chrome-style demo palette t) :font-weight bold :pointer hand :keymap ,(desktop-demo-keymap demo "desk-palette" t) :help-echo "Drag Palette. Alt+arrows moves it from the keyboard." "PALETTE / 05 ::") (box :padding ((lh 1) (ch 1)) (box :font-weight bold "Objects in conversation.") (box :padding-top (lh 1) :class desktop-palette-caption ,@(desktop-demo-style demo 'desktop-palette-caption) "FIVE TONES / ONE ATMOSPHERE") (flex :height (lh 2) :padding-top (lh 1) :gap ((lh 0) (ch 1)) (box :width (ch 4) :height (lh 1) :class desktop-swatch-violet ,@(desktop-demo-style demo 'desktop-swatch-violet)) (box :width (ch 4) :height (lh 1) :class desktop-swatch-amber ,@(desktop-demo-style demo 'desktop-swatch-amber)) (box :width (ch 4) :height (lh 1) :class desktop-swatch-cyan ,@(desktop-demo-style demo 'desktop-swatch-cyan)) (box :width (ch 4) :height (lh 1) :class desktop-swatch-mint ,@(desktop-demo-style demo 'desktop-swatch-mint)) (box :width (ch 4) :height (lh 1) :class desktop-swatch-rose ,@(desktop-demo-style demo 'desktop-swatch-rose))) (box :padding-top (lh 1) :class desktop-palette-accent ,@(desktop-demo-style demo 'desktop-palette-accent) "MIDNIGHT / SOFT ELECTRIC")))) (flex :height (lh 2) :gap ((lh 0) (ch 1)) :padding-top (lh 1) ,@(cl-loop for pane in panes for index from 1 for short in '("ST" "NT" "SG" "TM" "PL") for active = (equal (desktop-demo-window-id pane) (desktop-demo-active demo)) collect `(box :id ,(concat (desktop-demo-window-id pane) "-dock") :padding-inline (ch 1) :class desktop-chrome ,@(desktop-demo-chrome-style demo pane active) :font-weight bold :pointer hand :help-echo ,(format "Bring %s to front, even when covered. Alt+arrows moves it." (desktop-demo-window-label pane)) :keymap ,(desktop-demo-keymap demo (desktop-demo-window-id pane)) ,(format "%02d %s" index short)))) (box :id "desktop-status" :height (lh 1) :class desktop-muted ,@(desktop-demo-style demo 'desktop-muted) ,(desktop-demo-status demo))))