[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"example-src-spotify-playlist":3},"\u003Cgui version=\"1.0\" name=\"SpotifyPlaylist\">\n  \u003Ctokens>\n    \u003Ccolor name=\"bg\" value=\"#09080B\" \u002F>\n    \u003Ccolor name=\"surface\" value=\"#131118\" \u002F>\n    \u003Ccolor name=\"surface-2\" value=\"#211E29\" \u002F>\n    \u003Ccolor name=\"border\" value=\"#1E1C24\" \u002F>\n    \u003Ccolor name=\"text-primary\" value=\"#FFFFFF\" \u002F>\n    \u003Ccolor name=\"text-secondary\" value=\"#9C98A6\" \u002F>\n    \u003Ccolor name=\"text-tertiary\" value=\"#5B5764\" \u002F>\n    \u003Ccolor name=\"primary\" value=\"#1ED760\" \u002F>\n    \u003Ccolor name=\"accent\" value=\"#8B5CF6\" \u002F>\n    \u003Cnumber name=\"radius-subtle\" value=\"4\" \u002F>\n    \u003Cnumber name=\"radius-card\" value=\"12\" \u002F>\n    \u003Cnumber name=\"radius-pill\" value=\"999\" \u002F>\n  \u003C\u002Ftokens>\n\n  \u003Cstyles>\n    \u003Ctext-style name=\"Nav\u002FTitle\" font-family=\"SF Pro\" font-size=\"16\" font-weight=\"600\" line-height=\"20\" \u002F>\n    \u003Ctext-style name=\"Title\u002FPlaylist\" font-family=\"SF Pro\" font-size=\"24\" font-weight=\"700\" line-height=\"30\" \u002F>\n    \u003Ctext-style name=\"Title\u002FSong\" font-family=\"SF Pro\" font-size=\"15\" font-weight=\"600\" line-height=\"20\" \u002F>\n    \u003Ctext-style name=\"Body\" font-family=\"SF Pro\" font-size=\"13\" font-weight=\"400\" line-height=\"18\" \u002F>\n    \u003Ctext-style name=\"Body\u002FBold\" font-family=\"SF Pro\" font-size=\"13\" font-weight=\"600\" line-height=\"18\" \u002F>\n    \u003Ctext-style name=\"Caption\" font-family=\"SF Pro\" font-size=\"12\" font-weight=\"400\" line-height=\"16\" \u002F>\n    \u003Ctext-style name=\"Micro\" font-family=\"SF Pro\" font-size=\"11\" font-weight=\"500\" line-height=\"14\" \u002F>\n  \u003C\u002Fstyles>\n\n  \u003Cfonts>\n    \u003Cfont family=\"SF Pro\" source=\"system\" weights=\"400 500 600 700\" styles=\"normal\" \u002F>\n    \u003Cfont family=\"Inter\" source=\"google\" weights=\"400 500 600 700\" styles=\"normal\" \u002F>\n  \u003C\u002Ffonts>\n\n  \u003C!-- Root Canvas, standard scrolling column for 390 width native screen -->\n  \u003Ccol w=\"390\" fill=\"$bg\">\n    \u003C!-- Combined Seamless Blended Gradient Header (Safe Area Spacer + NavHeader + Playlist Header Card) -->\n    \u003Ccol w=\"fill\" fill=\"linear-gradient(180deg, #3E247E 0%, #09080B 100%)\" p=\"0 0 12 0\">\n      \u003C!-- Status Bar Spacer (Safe Area Top) -->\n      \u003Ccol h=\"47\" w=\"fill\" \u002F>\n\n      \u003C!-- Navigation Header -->\n      \u003Crow role=\"top-navigation-bar\" p=\"12 16\" align=\"middle-left\" gap=\"auto\" w=\"fill\">\n        \u003C!-- Back button -->\n        \u003Crow p=\"8\" align=\"middle-center\" w=\"32\" h=\"32\" radius=\"$radius-pill\" fill=\"$surface\">\n          \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Farrow-left.svg?color=%23ffffff\" w=\"18\" h=\"18\" \u002F>\n        \u003C\u002Frow>\n        \u003C!-- Center text context -->\n        \u003Ctext value=\"Playlist\" text-style=\"Nav\u002FTitle\" color=\"$text-primary\" \u002F>\n        \u003C!-- More menu -->\n        \u003Crow p=\"8\" align=\"middle-center\" w=\"32\" h=\"32\" radius=\"$radius-pill\" fill=\"$surface\">\n          \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fmore-vertical.svg?color=%23ffffff\" w=\"18\" h=\"18\" \u002F>\n        \u003C\u002Frow>\n      \u003C\u002Frow>\n\n      \u003C!-- Playlist Header Banner Details -->\n      \u003Crow p=\"16 16 8 16\" gap=\"16\" align=\"middle-left\" w=\"fill\">\n        \u003C!-- Large Cover art image -->\n        \u003Cimg src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1514525253161-7a46d19cd819?auto=format&fit=crop&w=240&q=80\" w=\"120\" h=\"120\" radius=\"$radius-card\" fit=\"cover\" \u002F>\n        \n        \u003C!-- Playlist meta details -->\n        \u003Ccol gap=\"6\" w=\"222\">\n          \u003Ctext value=\"PLAYLIST\" text-style=\"Micro\" color=\"$primary\" \u002F>\n          \u003Ctext value=\"Late Night Reverie\" text-style=\"Title\u002FPlaylist\" color=\"$text-primary\" \u002F>\n          \u003Ctext value=\"Curated by Spotify • 48 songs, 2h 45m\" text-style=\"Body\" color=\"$text-secondary\" \u002F>\n          \u003Ctext value=\"Deep atmospheric electronic soundscapes for focused minds.\" text-style=\"Caption\" color=\"$text-secondary\" \u002F>\n        \u003C\u002Fcol>\n      \u003C\u002Frow>\n    \u003C\u002Fcol>\n\n    \u003C!-- Playlist Play & Action Controls Row -->\n    \u003Crow p=\"8 16\" align=\"middle-left\" gap=\"auto\" w=\"fill\">\n      \u003Crow gap=\"18\" align=\"middle-left\">\n        \u003C!-- Liked heart icon (Active in green) -->\n        \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fheart.svg?color=%231ed760\" w=\"22\" h=\"22\" \u002F>\n        \u003C!-- Offline download status (Active green circle) -->\n        \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Farrow-down-circle.svg?color=%231ed760\" w=\"22\" h=\"22\" \u002F>\n        \u003C!-- Shuffle controls -->\n        \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fshuffle.svg?color=%239c98a6\" w=\"22\" h=\"22\" \u002F>\n      \u003C\u002Frow>\n\n      \u003C!-- Prominent play button -->\n      \u003Crow role=\"button\" w=\"52\" h=\"52\" radius=\"26\" fill=\"$primary\" align=\"middle-center\">\n        \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fplay.svg?color=%2309080b\" w=\"24\" h=\"24\" \u002F>\n      \u003C\u002Frow>\n    \u003C\u002Frow>\n\n    \u003C!-- Tracks List -->\n    \u003Ccol p=\"12 16\" gap=\"12\" w=\"fill\">\n\n      \u003C!-- ================= TRACK 1 (Midnight City - Playing Active State) ================= -->\n      \u003Crow w=\"fill\" gap=\"12\" align=\"middle-left\" p=\"8\" radius=\"$radius-card\" fill=\"$surface\">\n        \u003C!-- Equalizer animation speaker instead of number -->\n        \u003Crow w=\"16\" h=\"16\" align=\"middle-center\">\n          \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fvolume-2.svg?color=%231ed760\" w=\"14\" h=\"14\" \u002F>\n        \u003C\u002Frow>\n        \u003C!-- Album cover -->\n        \u003Cimg src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1470225620780-dba8ba36b745?auto=format&fit=crop&w=80&q=80\" w=\"40\" h=\"40\" radius=\"6\" fit=\"cover\" \u002F>\n        \n        \u003C!-- Track details -->\n        \u003Ccol gap=\"2\" w=\"220\">\n          \u003Ctext value=\"Midnight City\" text-style=\"Title\u002FSong\" color=\"$primary\" \u002F>\n          \u003Ctext value=\"M83\" text-style=\"Body\" color=\"$text-secondary\" \u002F>\n        \u003C\u002Fcol>\n        \n        \u003C!-- Duration & Actions -->\n        \u003Crow gap=\"8\" align=\"middle-right\" w=\"50\">\n          \u003Ctext value=\"4:03\" text-style=\"Caption\" color=\"$text-secondary\" \u002F>\n          \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fmore-vertical.svg?color=%239c98a6\" w=\"16\" h=\"16\" \u002F>\n        \u003C\u002Frow>\n      \u003C\u002Frow>\n\n      \u003C!-- ================= TRACK 2 (Intro) ================= -->\n      \u003Crow w=\"fill\" gap=\"12\" align=\"middle-left\" p=\"8\" radius=\"$radius-card\">\n        \u003Crow w=\"16\" h=\"16\" align=\"middle-center\">\n          \u003Ctext value=\"2\" text-style=\"Body\" color=\"$text-secondary\" \u002F>\n        \u003C\u002Frow>\n        \u003Cimg src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1511671782779-c97d3d27a1d4?auto=format&fit=crop&w=80&q=80\" w=\"40\" h=\"40\" radius=\"6\" fit=\"cover\" \u002F>\n        \n        \u003Ccol gap=\"2\" w=\"220\">\n          \u003Ctext value=\"Intro\" text-style=\"Title\u002FSong\" color=\"$text-primary\" \u002F>\n          \u003Ctext value=\"The xx\" text-style=\"Body\" color=\"$text-secondary\" \u002F>\n        \u003C\u002Fcol>\n        \n        \u003Crow gap=\"8\" align=\"middle-right\" w=\"50\">\n          \u003Ctext value=\"2:08\" text-style=\"Caption\" color=\"$text-secondary\" \u002F>\n          \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fmore-vertical.svg?color=%239c98a6\" w=\"16\" h=\"16\" \u002F>\n        \u003C\u002Frow>\n      \u003C\u002Frow>\n\n      \u003C!-- ================= TRACK 3 (Nightcall) ================= -->\n      \u003Crow w=\"fill\" gap=\"12\" align=\"middle-left\" p=\"8\" radius=\"$radius-card\">\n        \u003Crow w=\"16\" h=\"16\" align=\"middle-center\">\n          \u003Ctext value=\"3\" text-style=\"Body\" color=\"$text-secondary\" \u002F>\n        \u003C\u002Frow>\n        \u003Cimg src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1507838153414-b4b713384a76?auto=format&fit=crop&w=80&q=80\" w=\"40\" h=\"40\" radius=\"6\" fit=\"cover\" \u002F>\n        \n        \u003Ccol gap=\"2\" w=\"220\">\n          \u003Ctext value=\"Nightcall\" text-style=\"Title\u002FSong\" color=\"$text-primary\" \u002F>\n          \u003Ctext value=\"Kavinsky\" text-style=\"Body\" color=\"$text-secondary\" \u002F>\n        \u003C\u002Fcol>\n        \n        \u003Crow gap=\"8\" align=\"middle-right\" w=\"50\">\n          \u003Ctext value=\"4:18\" text-style=\"Caption\" color=\"$text-secondary\" \u002F>\n          \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fmore-vertical.svg?color=%239c98a6\" w=\"16\" h=\"16\" \u002F>\n        \u003C\u002Frow>\n      \u003C\u002Frow>\n\n      \u003C!-- ================= TRACK 4 (After Hours) ================= -->\n      \u003Crow w=\"fill\" gap=\"12\" align=\"middle-left\" p=\"8\" radius=\"$radius-card\">\n        \u003Crow w=\"16\" h=\"16\" align=\"middle-center\">\n          \u003Ctext value=\"4\" text-style=\"Body\" color=\"$text-secondary\" \u002F>\n        \u003C\u002Frow>\n        \u003Cimg src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1498038432885-c6f3f1b912ee?auto=format&fit=crop&w=80&q=80\" w=\"40\" h=\"40\" radius=\"6\" fit=\"cover\" \u002F>\n        \n        \u003Ccol gap=\"2\" w=\"220\">\n          \u003Ctext value=\"After Hours\" text-style=\"Title\u002FSong\" color=\"$text-primary\" \u002F>\n          \u003Ctext value=\"The Weeknd\" text-style=\"Body\" color=\"$text-secondary\" \u002F>\n        \u003C\u002Fcol>\n        \n        \u003Crow gap=\"8\" align=\"middle-right\" w=\"50\">\n          \u003Ctext value=\"6:01\" text-style=\"Caption\" color=\"$text-secondary\" \u002F>\n          \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fmore-vertical.svg?color=%239c98a6\" w=\"16\" h=\"16\" \u002F>\n        \u003C\u002Frow>\n      \u003C\u002Frow>\n\n      \u003C!-- ================= TRACK 5 (Resonance) ================= -->\n      \u003Crow w=\"fill\" gap=\"12\" align=\"middle-left\" p=\"8\" radius=\"$radius-card\">\n        \u003Crow w=\"16\" h=\"16\" align=\"middle-center\">\n          \u003Ctext value=\"5\" text-style=\"Body\" color=\"$text-secondary\" \u002F>\n        \u003C\u002Frow>\n        \u003Cimg src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1514525253161-7a46d19cd819?auto=format&fit=crop&w=80&q=80\" w=\"40\" h=\"40\" radius=\"6\" fit=\"cover\" \u002F>\n        \n        \u003Ccol gap=\"2\" w=\"220\">\n          \u003Ctext value=\"Resonance\" text-style=\"Title\u002FSong\" color=\"$text-primary\" \u002F>\n          \u003Ctext value=\"HOME\" text-style=\"Body\" color=\"$text-secondary\" \u002F>\n        \u003C\u002Fcol>\n        \n        \u003Crow gap=\"8\" align=\"middle-right\" w=\"50\">\n          \u003Ctext value=\"3:32\" text-style=\"Caption\" color=\"$text-secondary\" \u002F>\n          \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fmore-vertical.svg?color=%239c98a6\" w=\"16\" h=\"16\" \u002F>\n        \u003C\u002Frow>\n      \u003C\u002Frow>\n    \u003C\u002Fcol>\n\n    \u003C!-- Bottom Spacing margin before the sticky drawer -->\n    \u003Ccol h=\"12\" w=\"fill\" \u002F>\n\n    \u003C!-- ================= STICKY FLOATING PLAYER DRAWER ================= -->\n    \u003Ccol p=\"0 16 16 16\" w=\"fill\">\n      \u003Ccol fill=\"$surface-2\" radius=\"$radius-card\" p=\"12 12 10 12\" gap=\"8\" w=\"fill\">\n        \u003C!-- Top Metadata & controls -->\n        \u003Crow w=\"fill\" align=\"middle-left\" gap=\"auto\">\n          \u003C!-- Album art + title -->\n          \u003Crow gap=\"10\" align=\"middle-left\">\n            \u003Cimg src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1470225620780-dba8ba36b745?auto=format&fit=crop&w=80&q=80\" w=\"38\" h=\"38\" radius=\"6\" fit=\"cover\" \u002F>\n            \u003Ccol gap=\"2\">\n              \u003Ctext value=\"Midnight City\" text-style=\"Title\u002FSong\" color=\"$text-primary\" \u002F>\n              \u003Ctext value=\"M83 • Late Night Reverie\" text-style=\"Micro\" color=\"$text-secondary\" \u002F>\n            \u003C\u002Fcol>\n          \u003C\u002Frow>\n          \n          \u003C!-- Speaker Cast + Pause button -->\n          \u003Crow gap=\"16\" align=\"middle-right\">\n            \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fmonitor-speaker.svg?color=%231ed760\" w=\"20\" h=\"20\" \u002F>\n            \u003C!-- Circular Solid White Pause circular card -->\n            \u003Crow role=\"button\" w=\"32\" h=\"32\" radius=\"16\" fill=\"#FFFFFF\" align=\"middle-center\">\n              \u003Cimg src=\"https:\u002F\u002Fapi.iconify.design\u002Flucide\u002Fpause.svg?color=%2309080b\" w=\"16\" h=\"16\" \u002F>\n            \u003C\u002Frow>\n          \u003C\u002Frow>\n        \u003C\u002Frow>\n        \n        \u003C!-- Beautiful custom music progress bar -->\n        \u003Crow w=\"fill\" align=\"middle-center\" gap=\"8\">\n          \u003Ctext value=\"1:24\" text-style=\"Micro\" color=\"$text-secondary\" \u002F>\n          \n          \u003C!-- Slider Track -->\n          \u003Crow role=\"slider\" w=\"258\" h=\"4\" fill=\"$text-tertiary\" radius=\"$radius-pill\" align=\"middle-left\">\n            \u003C!-- Active Green Playback Time Line -->\n            \u003Cshape type=\"rect\" w=\"108\" h=\"4\" fill=\"$primary\" radius=\"$radius-pill\" \u002F>\n          \u003C\u002Frow>\n          \n          \u003Ctext value=\"4:03\" text-style=\"Micro\" color=\"$text-secondary\" \u002F>\n        \u003C\u002Frow>\n      \u003C\u002Fcol>\n    \u003C\u002Fcol>\n\n    \u003C!-- iOS Home Indicator Safe Area Bottom -->\n    \u003Ccol h=\"34\" w=\"fill\" align=\"middle-center\" p=\"0 0 10 0\">\n      \u003Cshape type=\"rect\" w=\"134\" h=\"5\" fill=\"$border\" radius=\"$radius-pill\" \u002F>\n    \u003C\u002Fcol>\n  \u003C\u002Fcol>\n\u003C\u002Fgui>\n",1784753172946]